カテゴリーアーカイブ iOS

著者:村上

【Cordova】ソフトウェアキーボードを制御するためのプラグイン「cordova-plugin-keyboard」

現在開発中のCordovaアプリで、iOS のソフトウェアキーボードを制御したくて導入したプラグイン「cordova-plugin-keyboard」についてのご紹介です。
開発中のアプリには、LINE のトーク画面のように入力欄が画面下にぴったり張り付いているようなレイアウトになっているのですが、文字を入力するとき、キーボードのサイズが若干変わったタイミングで、入力欄がキーボードの裏に隠れてしまう不具合が発生しました。
それの対処法として、今回紹介するプラグインを使いました。
なお、この現象が発生するのは iOS のみで、どうやら OS のバグが原因のようでした。
Android だと、全く問題なかったので、気づくのに遅れてしまいました…。

さて、では対処法ですが、まず導入したプラグインの GitHub はこちらから。

GitHub – cjpearson/cordova-plugin-keyboard: Keyboard Plugin for Cordova
https://github.com/cjpearson/cordova-plugin-keyboard

他にも、cordova-plugin-ionic-keyboard というよく似たプラグインもありましたが、私の実現したいことにはそぐわなかったので、こちらは使用しませんでした。

インストールは、下記のコマンドを実行してください。

cordova plugin add cordova-plugin-keyboard --save

インストールが終わったら、任意のメソッドを導入します。
私は下記の2つのメソッドを使いました。

1. cordova.plugins.Keyboard.shrinkView
2. cordova.plugins.Keyboard.disableScrollingInShrinkView

1つ目のメソッドは、キーボードが表示されたときに、WebView のサイズを縮小するかどうかを指定できます。
指定する方法は下記の通りです。

cordova.plugins.Keyboard.shrinkView(true);

true を指定すると、キーボード出現時に WebView のサイズが縮み、スクロール可能になります。
false だと、キーボードが表示されても WebView のサイズは変わりません。
というか、iOS の場合、こうして指定しないと、キーボードが表示されても WebView のサイズは変わらないんですね…。
それなら、レイアウトが崩れたのも納得です。

次に、キーボードが表示されている間、スクロールを許可するかどうかを指定できるメソッドです。

cordova.plugins.Keyboard.disableScrollingInShrinkView(true);

スクロールを無効にするためには、true を指定します。
本当は、スクロールを有効にしたかったのですが、たまにレイアウトが崩れて謎の余白が発生したりするので、しぶしぶスクロールを禁止にしました。
レイアウト崩れがなんとかなりそうだったら、スクロール許可しようと思います。

なお、このメソッドは iOS しかサポートされていませんので、ご注意ください。
…でも、そもそも Android だと、これを使う必要もないので、これがあってもなくても特になんの影響もないんですけどね。

また、私の環境では、上記で紹介した書き方ではエラーが発生したので、下記のように書き直しました。

// 上記の記述でエラーが発生した場合、下記の記述に変更
window.Keyboard.shrinkView(true);
window.Keyboard.disableScrollingInShrinkView(true);

この対応が正しいのかはわからないのですが、問題なく期待する動作をしたので、これでOKだと思います。

私が使ったメソッドはこの2つですが、他にも、キーボードが表示されているか検知できるプロパティや、キーボードが表示/非表示になったときに実行されるイベントもあります。
イベントには、キーボードが表示/非表示になる前に発火するものもあるので、状況に応じて使い分けてください。

以上、ソフトウェアキーボードを制御するためのプラグイン「cordova-plugin-keyboard」のご紹介でした。
Cordovaアプリ開発中に、iOS のソフトウェアキーボードに悩まされた方は、是非ご参考にしていただければと思います。

著者:杉浦

Apple製品開発者用ドキュメントアーカイブの紹介

　Appleは開発者用ドキュメントを多く公開しており、それらは次のページにまとまっています。
Apple Developer Documentation
日本語ドキュメント – Apple Developer
　残念ながら日本語ドキュメントは数が少ないです。日本語ドキュメントのうち現役でリンクが張られているものは12本ですが、英語版は177本です。
　英語版は数多く、ドキュメント内の繋がりも複雑です。広範なApple製品全般を扱っているため、目当てのものを探すのは一苦労です。Documentation Archiveを用いると情報の新鮮さは多少落ちるでしょうが検索はずいぶん楽になります。
Documentation Archive
　下図の様にわかりやすくまとめられた表から目的のものにアクセスできます。ここから古いものを見つけて中にある単語らをキーワードに最新があるかないかチェック、あればそちらを見つからなければ手元にある方を参照できます。

　最近よくお世話になっているのは赤丸のSafari Web Content Guideです。このガイドの中にはSafariがHTML、CSS、JavaScriptの何にどう対応しているかが記述されています。例えばHandling Events章のSupported Events節にはload, unloadイベントが廃止予定で非推奨、代わりにpageshow, pagehideを使うべき、とあります。これはMDN Web DocsでもCan I useでもわからず問題点の確証を得るのが結構手間でした。

著者:村上

【Cordova】外部サイトをアプリ内ブラウザで表示できるプラグイン「cordova-plugin-inappbrowser」

昨年末にも似たような記事を投稿しましたが、今回はプラグインを使って外部サイトアプリ内ブラウザで表示する方法について。
まだ iOS でしか動作検証できていませんが、結構良い感じに動作したので、Android でも確認して、採用するか決めたいと思います。

使用したプラグインは、「cordova-plugin-inappbrowser」です。
GitHubはこちらから。

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

ただ、今回は下記のサイトの方が参考になりました。

InAppBrowser プラグイン｜Monaca Docs
https://docs.monaca.io/ja/reference/cordova_6.2/inappbrowser/

モナカのドキュメントのページですが、プラグインなどは同じものを使えるので問題なし。

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

cordova plugin add cordova-plugin-inappbrowser

インストールが完了したら、あとは下記の関数を呼び出して、サイトを開くだけ。

const url = '[開きたいページのURL]';
cordova.InAppBrowser.open(url, '_blank', 'location=no');

実際の画面はこんな感じ。

私のコードでは、一連の処理を抜粋して書くとこうなります。
ちなみに、React を使用しておりますので、悪しからず。

openSite(url) {
  cordova.InAppBrowser.open(url, '_blank', 'location=no');
}
render() {
  const url = '[開きたいページのURL]';
  return (
    <main>
      <a onClick={() => this.openLink(url)}>ページを開く</a>
    </main>
  );
}

なお、cordova.InAppBrowser.open() には引数がいくつかあります。
個人的に指定しておいたほうがいいと思うのは、第3引数の、location=no ですね。
こちらはロケーションバーの表示/非表示の設定を行えます。
で、デフォルト値が Yes なのですが…正直、格好悪い…！
そのため、申し訳ないのですが、速攻非表示にさせてもらいました…。
他にも、下の「完了」の文言を変えたり、新規のウィンドウを開く際に、キャッシュやCookie を削除することもできるらしいです。
その辺りは、状況に応じて設定してください。
なお、複数設定する場合、プロパティをスペースなしのカンマ区切りで指定してください。

以上、Cordova アプリで外部サイトをアプリ内ブラウザで表示する方法でした。

最後に、以前投稿した記事についてもご紹介しておきます。

【Cordova】外部サイトをアプリ内ブラウザで表示する方法
https://cpoint-lab.co.jp/article/201811/【cordova】外部サイトをアプリ内ブラウザで表示する/

こちらは Whitelist を利用してアプリ内ブラウザを開く方法です。
同じように外部サイトを開くことはできるのですが、前のページに戻れなかったので、この方法は却下しました。