カテゴリーアーカイブ iOS

著者:村上

【Cordova】アプリがオフラインになったことを検知する方法

タイトル通り、今回はアプリ（というより、アプリが実行されている端末？）がオフラインになったことを検知する方法についてです。
現在開発中のアプリは、当然ながらデータ通信が行われているので、アプリ利用時は常にオンラインである必要があるのですが、何らかの原因でオフラインになったときに、それを通知して、ネットワーク環境の確認を促すようにしたかったためです。

今回は、下記のCordovaのページを参考にしました。

オフライン – Apache Cordova
https://cordova.apache.org/docs/ja/3.1.0/cordova/events/events.offline.html

実装方法はとても簡単で、プラグインの追加なども不要！
私の環境では、index.js ファイル内に、下記のコードを追加するだけでした。

document.addEventListener("offline", onOffline, false);

function onOffline() {
    // オフラインの時に実行したい処理
}

サンプルコードを見ると、追加ファイルは index.html である場合もあるようです。
こちらは、開発環境に合わせて変更してください。

あとは、onOffline() 内に実行したい処理を記述すればOKです。
私は、Toast でエラーメッセージを表示しています。

なお、iOS の初回起動時、最初の オフラインイベントは少なくとも起動に 1秒かかりますとのこと。
こちらは仕様のようなので、諦めて受け入れるのが良さそうです。
また、Android や iOS は問題ありませんが、Windows Phone 7 など、端末によっては、オフラインが検知できないこともあるようなので、対応しているか十分注意してください。
…Android と iOS が対応していたら、ほぼほぼ大丈夫だとは思いますけどね。

以上、アプリがオフラインになったことを検知する方法でした。
プラグインも不要なので、実装しておいても良いと思います。

著者:村上

【Cordova】アプリにステータスバーを追加する方法

設定したのがずいぶん前だったので忘れていました…。
今回は、Cordova で開発しているアプリにステータスバーを追加する方法についてご紹介します。
Android なら、特に意識せずに開発ができるのですが、iOS で、特にヘッダーが固定されているデザインの時にデザインが少々崩れます。
ステータスバーのエリアまで、アプリの画面になるので、ヘッダー固定で、それ以外の要素がスクロールになったとき、ヘッダーを突き抜けてスクロールしてしまいます。
スクリーンショットを取り忘れてしまったので文章で書いておりますが、わかりにくいですね…。
発生した現象については、下記の記事が参考になります。

cordova-plugin-statusbarの使い方。 – Qiita
https://qiita.com/nagao_norihiro/items/2e6189c147098dc63ab9

そのため、iOSを対象としているときや、どうしても必要ない！という場合以外は、念のため導入しておくことをおすすめします。

さて、ステータスバーを設定する方法ですが、cordova-plugin-statusbar というプラグインを使用します。
GitHub のページは下記から。

GitHub – apache/cordova-plugin-statusbar: Apache Cordova
https://github.com/apache/cordova-plugin-statusbar

プラグインのインストールは、下記のコマンドを実行します。

cordova plugin add cordova-plugin-statusbar

インストールが終わったら、config.xml に preference で設定します。
まず、ステータスバーを有効にする場合は、下記を追加します。

<preference name="StatusBarOverlaysWebView" value="false" />

次に、ステータスバーの背景色を下記で指定します。

<preference name="StatusBarBackgroundColor" value="#000000" />

なお、色の指定は16進数 6文字で指定してください。
白色だからと、うっかり #FFF と書いたところ…青になりました。
きっちり 6文字で記載してください。

あとは、iOS でよくある、ステータスバーとタップすると上までスクロールするという処理を追加したい場合は下記を追加ます。

<preference name="StatusBarDefaultScrollToTop" value="true" />

デフォルト値は false なので、ステータスバータップでスクロールをさせたい場合は、true に設定します。

最後に、私は使いませんでしたが、ステータスバーのスタイルを指定するときは、下記を使用します。

<preference name="StatusBarStyle" value="lightcontent" />

設定できるオプションは、default, lightcontent, blacktranslucent, blackopaque があるようです。
デフォルト値は lightcontent です。

以上、Cordova アプリにステータスバーを追加する方法でした。
Android のみであれば任意でOKだと思いますが、iOS で利用するのであれば、導入しておくことをおすすめします。

著者:村上

【Cordova】アプリにスプラッシュスクリーンを追加する方法

先日の記事で、アプリの画面を iPhoneX に対応させる方法について紹介しましたが、その中で取り上げた「cordova-plugin-splashscreen」というプラグインについてしっかりとしたご紹介をしていなかったので、今回はそちらのプラグインについて。
名前のとおり、アプリにスプラッシュスクリーンを追加するためのプラグインです。
なお、スプラッシュスクリーンとは、アプリを起動した時に表示される画面のことです。
LINE を思い出してもらえれば分かりやすいかと思います。

GitHubのページはこちらから。

GitHub – apache/cordova-plugin-splashscreen: Apache Cordova Plugin splashscreen
https://github.com/apache/cordova-plugin-splashscreen

では、実装方法です。
まず、下記のコマンドを実行してインストールします。

cordova plugin add cordova-plugin-splashscreen

もしくは、下記でも可です。

cordova plugin add https://github.com/apache/cordova-plugin-splashscreen.git

インストール後は、/res/screen ディレクトリを作成し、その中に各プラットフォーム名のディレクトリを作成します。
例えば、Android、iOS であれば、/res/screen/android と /res/screen/ios ディレクトリを作成します。
各プラットフォームのファイル内に、表示したいスプラッシュスクリーンの画像を置きます。

あとは、config.xml に下記のようにスプラッシュページの設定を追加します。
なお、ファイル名は適宜変更してください。

<platform name="android">
    <splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
    <splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
    <splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
    <splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>
    <splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
    <splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
    <splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
    <splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>
<platform name="ios">
    <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
    <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
    <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
    <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
    <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
    <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
    <splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
    <splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
    <splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
</platform>

以上で設定は終了です。
なお、Android は、下記の設定を追加することで、スプラッシュスクリーンの表示時間を変更することもできるとのこと。

<preference name="SplashScreenDelay" value="10000" />

こちらも config.xml に追加してください。
変更前のデフォルト値は 3000 です。
私はやった事がないのでわかりませんが…もし、表示時間を変更する必要がある場合はご活用ください。

以上、Cordova アプリにスプラッシュスクリーンを追加する方法でした。
スプラッシュスクリーンを追加すると、一気にアプリらしくなるのでおすすめです。
また、iPhoneX の画面レイアウトにも対応できるので、是非導入をご検討になってはいかがでしょうか。