カテゴリーアーカイブ iOS

村上 著者:村上

【Cordova】アプリ内にAdMobのバナー広告を導入する方法

タイトル通り、Cordovaで開発したアプリにバナー広告を入れる方法です。
ちなみに、AndroidとiOSの両方に対応しています。
本当はネイティブ広告という、Twitterのタイムラインで表示されるような、記事っぽくみえる広告を導入したかったのですが、どうやらプラグインが対応していないようです。

今回使ったのは、cordova-plugin-admob-free というプラグインです。
GitHubはこちら。

GitHub – ratson/cordova-plugin-admob-free: Cordova AdMob Plugin
https://github.com/ratson/cordova-plugin-admob-free

 

まずインストールは下記のコマンドをコマンドプロンプト等で実行します。

cordova plugin add cordova-plugin-admob-free --save

インストールが終わったら、下記のコードをプログラムに記述するだけ!
なお、私の環境では、index.js というファイルに記述しました。

// AdMob 広告ID
var admobid = {}
if (/(android)/i.test(navigator.userAgent)) {  // Android
    admobid = {
        banner: 'ca-app-pub-3940256099942544/6300978111'
    }
} else if (/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {  // ios
    admobid = {
        banner: 'ca-app-pub-3940256099942544/2934735716'
    }
}

document.addEventListener('deviceready', function () {
    // バナー広告表示
    admob.banner.config({
        id: admobid.banner,
        isTesting: true,  // テスト広告
        autoShow: true,
    })
    admob.banner.prepare()
}, false);

コードの上の方で、アプリを使っている端末が Android なのか iOS なのかを取得しています。
Android と iOS では、広告のIDが異なるので、この処理も重要です。

なお、広告のIDはテスト用のものを使っています。
なんでも、動作を確認している段階のアプリで本番用の広告IDを使うと、最悪の場合アカウント停止になることもあるとのことだったので…。
絶対にそれは避けたいので、慎重に。

ちなみに、広告の種類は他に「インタースティシャル」という画面に大きく表示される広告と、あとは「動画広告」もあります。
このあたりは、お好みで使い分けてください。
…が、個人的に画面全部を覆うような広告は嫌いなので、使うとすればバナー広告かな。

 

以上、アプリ内に広告を入れる方法でした。
アプリの利用者数が増えてきたら、導入を検討していきたいと思います。

  • この記事いいね! (0)
村上 著者:村上

【Cordova】Android・iOSアプリを終了させる処理

Cordovaのアプリを開発中、プログラムからアプリを終了させる処理を行いたかったので、やり方を調べました。
が、結局アプリを終了しない処理で落ち着いたんですけどね。

今回参考にさせていただいたサイトはこちら。

monaca(cordova)でアプリを終了させる(Androidのみ)
https://blog.mitsuto.com/cordova-exit

 

で、アプリを終了させる処理は、実はこれだけ。

// アプリを終了する
navigator.app.exitApp();

アプリを終了させたいタイミングで、上記の一行を書くだけです!
思ったよりも簡単でした。

ですが、この処理は iOS では動作しません。
なので、下記のプラグインをインストールする必要があります。

GitHub – FRD49/iOS-ExitApp: navigator.app.exitApp() on iOS
https://github.com/FRD49/iOS-ExitApp

インストールするときは、下記を実行します。

// iOS-ExitApp のインストール
cordova plugin add com.frd49.cordova.exitApp

// 上のコマンドがエラーになる場合はこちらを実行
cordova plugin add https://github.com/FRD49/iOS-ExitApp.git

プラグインをインストールする時にエラーが発生した場合は、下のコマンドを実行してください。
私の環境では、上のコマンドではインストール元が見つからないとかで失敗しました。

プラグインの追加が完了したら、アプリを再ビルドして、実機で実行すればOKです。
これで、iOS でも「navigator.app.exitApp();」を使ってアプリを終了できるようになります。

 

以上、プログラムからアプリを終了させる方法でした。
が、確かにアプリは終了できるのですが、終了時の挙動が強制終了の時と似ている、というか同じなので、終了する前に「アプリを終了しますか?」の確認ダイアログは必須ですね。

  • この記事いいね! (0)
村上 著者:村上

【Xcode】実機でアプリを起動できない「Could not find Developer Disk Image」エラーの対処法

Xcodeでアプリを開発中に、実機でiOSアプリの動作確認をしようとしたときに遭遇した「Could not find Developer Disk Image」というエラーの対処法について。
こちらのエラーは、iOS端末をアップデートした際、そのバージョンに対応する Disk Image がXcodeになかったために発生するものです。
つまり、iOSのバージョンが新しく、かつXcodeのバージョンが古いときに発生します。

したがって、対処法としては、Xcodeをアップデートして、最新バージョンにするのが一番手っ取り早いです。

 

が、何らかの理由で、Xcodeを更新したくない場合の対処法についてはこちらから。
今回は、こちらのサイトを参考にさせていただきました。

【iOS】端末をアップデート後、Xcodeで実機に書き込めなくなった場合 – Qiita
https://qiita.com/Hakota/items/59b4247a203e2639f8c9

まず、下記のサイトから最新のXcodeをダウンロードしてきます。
https://developer.apple.com/downloads/index.action#
ここで注意することは、Beta版ではない最新バージョンのものをインストールすること。
なお、ダウンロード前に、既存のXcodeの名称を Xcode[バージョン] などに変更しておきましょう。
そうすると、既存のバージョンのXcodeを残したままで、最新のXcodeをインストールできます。

ダウンロードできたら、最新のXcode と、すでにインストール済みのXcode があるかと思うので、それぞれのアイコン上で右クリックして、 パッケージの内容を表示します。
開けたら、下記の場所まで移動します。

Contents/Developer/Platforms/iPhoneOS.platform/DeviceSupport/

すると、下の画像のように、フォルダがずらっと並んでいるかと思います。

で、この一覧を確認すると、今まで使用していた Xcode のフォルダ一覧には、iOS端末のバージョン名のフォルダがないと思います。
なので、最新の Xcode の方から、不足しているフォルダをコピー&ペーストしましょう。

あとは、ファイルを閉じて、Xcodeを再起動すれば完了です!
端末を接続し、実機でアプリを起動すれば、無事実行されるかと思います。

 

ということで、OSのバージョンをアップデートした実機で、iOSアプリを起動できないときの対処法でした。
私の環境ではこれで動いたので、同じことでお悩みの方は是非試してみてください。

  • この記事いいね! (0)
著者:aoki

iPhoneでいきなり「SIMはメッセージを送信しました」と表示される件

車ではスマートフォンはカーナビになるようにエアコン吹き出し口の所に設置できるようにしています。
先日夜に車で走っている際にいきなりiPhoneの通知で「SIMはメッセージを送信しました」と表示されたのを目撃!
その後停車中に確認しようと思ったのですが通知は跡形もなく消え・・・何が起こったのかわかりませんでした。
はっきり言っていきなりSIMがスマートフォンのデータを送った!なんて通知が来たら怖すぎます。

Twitterで検索してみると同じ現象が起こっている人が多数いることも分かりました。

https://platform.twitter.com/widgets.js

https://platform.twitter.com/widgets.js

どうもdocomoユーザだけが発生しているようです。
更に調べると対処法を書いている方がいらっしゃいました。

【iPhone】「SIMはメッセージを送信しました」の意味と対処方法
http://sbapp.net/appnews/app/upinfo/ios11/sim-message-send-78595
こちらの記事によれば

SIMがキャリアアップデートのサーバーに接続をした際に、何らかの通信障害が生じると「SIMはメッセージを送信しました」と画面に表示されることがあるとのこと。

という事らしいです。
なのでスマートフォンがおかしくなったとかウィルスとかそういう危険なものではなさそうですね。
対処法も書かれていましたので同様の現象が起こる方は「キャリアアップデート」の確認をしてみてください。
ちなみに私は電源を1度OFFにしたらそれ以降は1度も出てこなくなりました。

今思うとスマートフォンを触ってるときに振動だけして何も通知が無いという事が何度もあり、「SIMはメッセージを送信しました」が原因だったのかもしれませんね。

  • この記事いいね! (0)
村上 著者:村上

【Xcode】Type ‘UISlider’ does not conform to protocol ‘ValidatableInterfaceElement’エラーへの対処法

久しぶりに遭遇したXcodeでのエラーです。
特に内容を変更した記憶のないアプリを開いてみたら、いきなりビルドエラーが発生しました。
エラー分は下記のとおりです。

Type 'UISlider' does not conform to protocol 'ValidatableInterfaceElement'

どうやら、CocoaPodでインストールした「Validator」というライブラリ内部でエラーが発生していたことまでは突き止めたのですが、その原因がわからず…検索してもヒットしない状況でした。
なお、Validator についてはこちらから。

GitHub – adamwaite/Validator
https://github.com/adamwaite/Validator

が、会社にあるもう一台のMacbookでは問題なく動いていたので、そこが謎でした。

 

で、色々見てみた結果、どうやらXCodeのバージョンが影響していたことが判明!
先日、Xcode をアップデートして 9.3 にしたのですが、これを 9.2 に戻したら問題なく動き、ビルドも完了しました。
……Xcodeは不用意にアップデートしてはだめですね…。

なお、Xcodeの以前のバージョンをインストールする方法は、下記の記事を参考にしました。

Xcodeの旧バージョンをインストールする方法 – Qiita
https://qiita.com/TsukasaHasegawa/items/0d7d5c2cf3a2b8ce8993

ただ、ダウンロードに凄く時間がかかったので、何か別の作業をしながらのんびり待つことをおすすめします。
ダウンロード時間が「残り約60分」の表示を見た時は、正直ため息を付きそうになりました…。

 

ということで、ビルドエラーの解消方法でした。
同僚に聞いたところ、Xcode のバージョンの違いのせいで発生するバグってあるようなので、バグの原因が分からないときに確認するようにしましょう。

  • この記事いいね! (0)
村上 著者:村上

【Cordova】アプリのアイコンの設定方法とAndroidのアイコンサイズまとめ

マージに失敗したのか、Cordovaアプリのアイコンの設定をしている記述が掻き消えたので、備忘録を兼ねてまとめ。
これでもしもう一度コードが吹っ飛んでも大丈夫!

 

アプリのアイコンは config.xml で指定します。
まず、iOSアプリのアイコンは、下記のように記述します。

<platform name="ios">
    <icon height="180" src="res/icon/ios/icon-60@3x.png" width="180" />
    <icon height="60" src="res/icon/ios/icon-60.png" width="60" />
    <icon height="120" src="res/icon/ios/icon-60@2x.png" width="120" />
    <icon height="76" src="res/icon/ios/icon-76.png" width="76" />
    <icon height="152" src="res/icon/ios/icon-76@2x.png" width="152" />
    <icon height="40" src="res/icon/ios/icon-40.png" width="40" />
    <icon height="80" src="res/icon/ios/icon-40@2x.png" width="80" />
    <icon height="57" src="res/icon/ios/icon.png" width="57" />
    <icon height="114" src="res/icon/ios/icon@2x.png" width="114" />
    <icon height="72" src="res/icon/ios/icon-72.png" width="72" />
    <icon height="144" src="res/icon/ios/icon-72@2x.png" width="144" />
    <icon height="29" src="res/icon/ios/icon-small.png" width="29" />
    <icon height="58" src="res/icon/ios/icon-small@2x.png" width="58" />
    <icon height="50" src="res/icon/ios/icon-50.png" width="50" />
    <icon height="100" src="res/icon/ios/icon-50@2x.png" width="100" />
    <icon height="1024" src="res/icon/ios/icon-1024.png" width="1024" />
</platform>

Androidのアイコンの設定はこちら。

<platform name="android">
    <icon density="ldpi" src="res/icon/android/icon-ldpi.png" />
    <icon density="mdpi" src="res/icon/android/icon-mdpi.png" />
    <icon density="hdpi" src="res/icon/android/icon-hdpi.png" />
    <icon density="xhdpi" src="res/icon/android/icon-xhdpi.png" />
    <icon density="xxhdpi" src="res/icon/android/icon-xxhdpi.png" />
</platform>

が、Androidのアイコンサイズがいまいちわからないので簡単にまとめ。
このアイコンサイズについて、毎回こういったアイコンを準備するたびに調べているので、今回まとめました。

解像度 アイコンサイズ
ldpi 36×36px
mdpi 48×48px
hdpi 72×72px
xhdpi 96×96px
xxhdpi 144×144px
xxxhdpi 192×192px

あとは、Android・iOS 共に、上の表などを参考に、それぞれの画像を用意すれば設定完了です。
(上記コードだと、res/icon ディレクトリにそれぞれ android、ios フォルダを用意し、アイコンを保存しています)
いつも通りにビルドした後、実機で実行すればアイコンが設定されています。

 

以上、Cordovaアプリ開発時に、アプリアイコンを設定する方法でした。

  • この記事いいね! (0)
takahashi 著者:takahashi

Appleが異例の発表会で新型iPadを発表!話題の”あの”アクセサリにも対応!!

昨日の夜、Appleは定例のWWDCとは別の、異例の発表会(Let’s take a field trip.)を行いました。
その中で発表されたのはなんと新型のiPad(第6世代)!

そしてついにiPad Pro以外では初となる、ApplePencil対応となりました!!

Apple Pencil は筆圧検知に対応しており、精度も非常に高いと話題になりました。(一部の絵描きの方の間では、いままでデファクトスタンダードだったWacom社製タブレットよりも性能がいいと言っている方もでてきています。)

Apple Pencilの唯一の難点は、iPadの最上位モデル”iPad Pro”にしか対応していなくて、Apple Pencil(10,800円(税抜き))も合わせるとかなり高額になってしまっていたのですが、今回発表されたiPadは Wi-Fi 32GBモデルで37,800円(税別)という、比較的お手頃な価格になっていて、手が届きやすくなった印象です。

ApplePencilを使うためにiPad Proを買おうかと悩んでいた自分にはかなりの朗報でした。
これは欲しい…

今回の発表会で、ハードについてはメインはiPadのみだったようです。イベント内では他にもアプリケーションのアップデートの発表なども行われたようです。
発表の全体的な内容については、GIZMODOさんの記事でまとめられています。

【Apple Pencil対応、299ドルのiPadが登場!】Appleの発表イベント「Let’s take a field trip.」のキーノート実況 – GIZMODO

なお、かねてより噂されていた廉価版macbook Airと、新型iPhone SEについては残念ながら発表はなかったようです。
次回の発表会に期待ですね。

  • この記事いいね! (0)
村上 著者:村上

【CSS】iOSで画面を滑らかにスクロールさせる方法

iOSの端末で縦に長い画面をスクロールさせた時に、慣性スクロールが効かず、途中でつっかえるような、ぎこちない動きになってしまったときの対処法です。
と言っても対処法というほど難しいことはなく、そのスクロールする要素に対して -webkit-overflow-scrolling プロパティを適用するだけです。
具体的には下記のとおりです。

<div class="scroll">
    <p>スクロールさせたい要素です</p>

    // 以下、要素の中身を記述
</div>
.scroll {
    height: 300px;
    overflow: scroll;
    -webkit-overflow-scrolling : touch;
}

重要なのは、4行目の -webkit-overflow-scrolling : touch; です。
これを指定することで、慣性スクロールが有効になります。

この -webkit-overflow-scrolling プロパティは、値に auto もしくは touch を指定します。
なお、デフォルト値は auto で、この場合は慣性スクロールが適用されません。

 

ということで、iOS で慣性スクロールを適用する方法でした。
この指定があるのとないのでは、実際に使っているときの感覚に大分違いがあるので、スマートフォンでの閲覧が考えられる場合は、記述しておいた方が無難だと思います。
スマートフォンでのスクロールがカクつくと、ここまでなのか!と意外なくらい、ストレスを感じました。

  • この記事いいね! (0)
村上 著者:村上

【Xcode】アプリのデフォルト言語を日本語に設定する方法

前回に引き続き、今回もXcodeについての備忘録です。
今回は、アプリの言語を日本語に設定する方法について。

参考にさせていただいたのは、こちらの記事です。

Xcodeでアプリの標準言語を日本語にする方法
https://qiita.com/ko2ic/items/8918034d940f66fee97d

 

まず、Xcode上での設定です。
Target > Info を開きます。

まずは、「Custom iOS Target Properties」の「Localization native development」を「Japan」に変更します。
次に、同じく Custom iOS Target Properties に新しく1行追加し、「Localizations」を選択します。
そしてこの Localizations の値で Japanese を選択します。
Xcodeの設定は以上です。

続いて、お好みのターミナルアプリを開き、アプリがあるディレクトリまで移動します。
そして、vi コマンドで下記のファイルを開き、編集します。

vi [プロジェクト名].xcodeproj/project.pbxproj

無事開けたら、下記のような記述があるので、

developmentRegion = English;
hasScannedForEncodings = 0;
knownRegions = (
    en,
    Base,
);

こちらを下記のように変更します。

developmentRegion = Japanese;  // English -> Japanese
hasScannedForEncodings = 0;
knownRegions = (
    ja,  // en -> ja
    Base,
);

なお、行数が多いので、「Region」で検索するのがおすすめ。
検索方法は、コマンドモードで「/Region」と入力して Enter です。
該当箇所を書き換えられたら、「:wq」でセーブして終了です。

日本語設定は以上で完了です。
あとは通常にビルド→実行すれば、デフォルトの言語が日本語に代わっているはずです。

 

以上、アプリのデフォルト言語の設定方法でした。

  • この記事いいね! (0)
村上 著者:村上

【Xcode】実機での実行時に「This application’s application-identifier entitlement does not match that of the installed application. These values must match for an upgrade to be allowed.」となったときの対処法

タイトル長いですが、今回は Xcode のエラーについて。
アプリを実機で確認しようとして実行した際に遭遇したエラーです。

エラー全文はこちら。
This application’s application-identifier entitlement does not match that of the installed application. These values must match for an upgrade to be allowed.

ざっくり翻訳したところ、インストール済みのアプリと今実行しようとしているアプリの識別子などが一致していないため、アプリをアップグレードできないとのことでした。
私の場合は、Generalのビルドチームが未選択となってしまっていたことが原因のようでした。

 

で、このエラーの対処法ですが、単純に既に端末にインストール済みのアプリを削除すること、でした。
もしくは、私のように原因が分かっていれば、Generalからビルドチームを以前と同じ設定にするなど、以前と同じ設定に戻せばOKのようですが…こちらについては試していないのでわかりません。

エラー文がそこそこ長い文だったので、もっと手間取るかと思いきや、かなりあっさりと修正できました。
とりあえず、エラー文はきちんと読みましょう。

  • この記事いいね! (0)