Google+ Followers

2016年8月2日火曜日

Apache Cordovaを利用したiOSアプリでCustome URL Scheme呼び出しでhandleOpenURLが呼び出されないエラーの対処法

タイトルが長くなってしまった。

そして、久しぶりにブログを書きます。
どういうキャラで書いていたのかも忘れるくらい。

久しぶりなので前置きが長くなるのは許してください^^;;

ちょっとCordovaとの出会いについて。。。
ハイブリッドアプリのいうワードの加熱期をすぎ、騒がれなくなりましたね。
既存のウェブ技術でモバイルアプリが開発できるのでウェブのフロントエンドデベロッパーにはもってこいの技術。
さらにオンライン上で開発ができるMonacaっていうサービスもあるし簡単に始められる。

私が仕事でハイブリッドアプリを作り始めたのは2014年ごろ、やはりMonacaでした。開発に参加した当初はMonaca上で開発していました。
しかし、無料アカウントだと色々と制限があったので、Cordovaに全て移行することになって現在まで来てると。

本題に入ります。
なぜ、ブログを書くのかというと久々に3、4時間くらいハマった問題(タイトルの通り)があったからメモしないとまたいつかはまるかもしれないので。

◆環境
・Macbook Pro 15 2015late
・Mac OS X 10.11.6
・実行環境:iPad Pro 9.7 iOS 9.3.3
・Xcode 7.3.1
・Cordova 6.3.0
・bower 1.7.9(これは使わないけど一応)
・Atomエディタ
・リソース管理やビルド作業にはshell scriptとgruntを使ってます

そして、新しい機能(いわゆる特定スキーム呼び出し)を追加することになりました。
ウェブの特殊なリンクをクリックするとアプリが起動されるみたいな。

cordova(小文字表記はコマンドってことで)がインストールされている前提なのでご容赦を。入ってない方はnpmでインストールしてやってください。
(参考)https://cordova.apache.org/docs/en/latest/guide/cli/

次のコマンドで今回の検証用プロジェクトを作っておいてください。
開発中のプロジェクトでやるのはまずいでしょうってことで。
$cordova create hello jp.tajisoft.test CustomUrlSchemeTest

Cordovaでアプリ開発はプラグインがないことには始まらないってことで今回は、
(Custom-URL-schemeプラグイン)https://github.com/EddyVerbruggen/Custom-URL-schemeを利用しました。楽勝だと思っていたらこれが後にハマることに。。

ってことでまずはプラグインをインストールしましょう。
$cordova plugin add cordova-plugin-customurlscheme --variable URL_SCHEME=myapp
こうすると、例えば、myapp://aaa/bbb/ccc?param=valueとかっていうスキームでアプリが呼出せちゃう。(このプラグインは古いCordovaだとバグがあるみたいなので新しいバージョンを入れましょう。)
細かい設定あるからよくgithubの説明を読んで設定していく。

って言っても(フック処理がいらない場合)これだけで実はもう終わっている。
試しに、アプリを端末(筆者はiPad)にインストールして、Safariアプリを立ち上げてURLバーに「myapp://hoge/fuga」って入力してエンターすると

CustomUrlSchemeTestを開こうとしています
みたいなダイアログが表示され、OKするとアプリが起動します。
これで事足りる人はこれでokなので、これ以上は足を踏み入れない方がいい。

でも、これで事足りる人はほとんどいないだろう。
ほとんどの人はフック処理をしたいと思うはずだ。

myapp://init?lickey=hogehogehoge
とか、コマンドだったり、パラメータを渡してアプリを起動したいはず!!

そんなこと余裕でできちゃうよーんってプラグインのページの「3.Usage」に書いてある。

グローバルにhandleOpenURL(url)関数を作ればフックしてやるにゃん!って甘い囁きが。

なーんだ、簡単じゃん。←

3時間後。。。

できない!!呼ばれない!!!なぜだ!!!!!!!!!

私みたいにならないように、以下の設定を確認してください。
iOSしか確認してないので悪しからず。

(例)
<script>
 function handleOpenURL(url) {
     alert("hoge");
 }
</script>

・スペルミス
handleOpenURLになってますか?handleOpenUrlになってませんか?
・グローバルに関数追加してますか?
gapDebugなどでConsoleでhandleOpenURL()って実行してみてください。ちゃんと上の例の場合、アラートが表示されますか?
・config.xmlにスキーマ追加されてますか?
<allow-intent href="myapp:*" />が入ってますか?
・whitelist設定できてますか?
エントリーポイントのindex.htmlのhead内に以下の設定ありますか?
<meta http-equiv="Content-Security-Policy" content="default-src * myapp:; 
                  style-src * 'self' 'unsafe-inline' 'unsafe-eval'; 
                  script-src * 'self' 'unsafe-inline' 'unsafe-eval'">
・(これが重要!!というかプラグインページのiOS関連に説明がない!!)config.xmlのfeatureが入ってますか?
<feature name="HandleOpenUrl">
    <param name="ios-package" value="CDVHandleOpenURL" />
    <param name="onload" value="true" />
</feature>
プラグインインストールで自動に入ってる気もするけど、どうやら私の環境では自動で入らなかった。というのもソースディレクトリとビルド用のディレクトリを変えているんですよね。テストプロジェクトだとプラグインインストールで自動で入ってましたのでご安心を。

とまー、これだけ確認すれば動くはず!
ちょっとトリッキーな環境の人はお気をつけを。

0 件のコメント:

コメントを投稿