はじめに
vue.js+quasar-frameworkを使ってiosアプリを開発していた時に、
iosアプリ間でURLや画像がShareできるShare Extensionを実装しようとしたけど、情報が少なく、ハマりまくったため同じような方のためにこの記事を書きます。
(quasarFrameworkとはvue.jsのフレームワークの事で一つのコードでiOS, Android, desktopAppを作成できるという夢のような?Frameworkです。とても使いやすくてお勧めではあるのですが、cordovaに関する情報が少ないため色々ハマることもあります。参考記事 https://qiita.com/onigiri_/items/88b2164478c06c9e5a9f)
環境
•quasar-framework 1.0.0
•cordova-ios 5.1.1
.cordova-plugin-openwith-ios 2.0.0
.Xcode 11.5
.MacOS 10.15.5 Catalina
やってダメだった事
基本的にShareExtensionに関してWeb検索でヒットする情報はほぼ全てSwiftを使用したNativeアプリでの情報でした。
その情報を元に試行錯誤したものの、途中でよく分からないエラーが頻発してドツボにハマりました。
特に
The following build commands failed: CompileSwift normal x86_64
や、
PhaseScriptExecution [CP]\ Check\ Pods\ Manifest.lock
のエラーが頻回に発生し、その度にキャッシュをクリアしたり、全てBuildをやり直したり、pod fileを消してpod installしなおしり、、、、、心が何度も折れかけました。
cordova-plugin-openwith-iosを使用する!
Pod fileはいじらない!
cordova-plugin の cordova-plugin-openwith-ios を使用する!
Project、Target、の設定でターゲットのiosをpodファイルに書かれていあるiosのVersion(10.0など)と必ず一致させる!
これらを理解した後に少しずつ光が見えてきました。
cordova-plugin-openwith-iosはCordova-iosでshareExtensionを使用できるようにしてくれている神Pluginなのですが、使い方の説明がイマイチ不親切です。。。。。
https://www.npmjs.com/package/cordova-plugin-openwith-ios
ですので使い方の手順をまとめておきます。
(AppGroupの設定の仕方などは他にたくさん記事がありますので、ここでは省きます。)
①XcodeでShareExtensionを設定していない状態で、
cordova plugin add cordova-plugin-openwith-ios --variable IOS_URL_SCHEME=cordovaopenwithdemo
をTerminalからコマンドする。(IOS_URL_SCHEMEのところはどう設定すればいいのかイマイチわかりませんでした。僕はDefaultのままで設定しました。)
*注意点として、shareExtensionと元のTargetのBundleIDは一致させておくべきです。
こちらのShareViewController.hファイルの中に
#define SHAREEXT_GROUP_IDENTIFIER @"group.**********"
と書かれているところがあるので、そのグループ名と同じようにAppGroupを設定する。
この時点でShareExtensionをBuildすると共有ボタンを押すとアプリアイコンが出てきていると思います。
そこでPostを押すと、アプリのuserDefaults(WebでいうLocalStorageのようなもの?)にURLなどの情報が保存されます。
③本体アプリの方でその情報を受け取るコードを書く!
ここが一番分からなかった、、、cordova-plugin-openwith-iosのマニュアルには一言Usageとだけ
と書かれているけど、ってこれどこに書いたらいいねん!!(つい言葉が汚くなりました。すみません)
結局結論としては、
src-cordova => platfomrs/ios => platform_www => cordova.js
のファイルの中に書く!(アプリ起動時に最初に読み込まれる)
④Cordova.jsをいじると、Buildの時に~info.plist file not found !** 的なエラーが出る!
もー勘弁してくれ、、、これに関しては以下の記事を参照
https://github.com/apache/cordova-ios/issues/764
Cordovaのバグレポートでまだ直していない、次回Updateで直す?みたいな事が書かれている。
src-cordova => platforms/ios => cordova => lib => projectFile.js
の中の44-50行目あたりを
var plist_file_entry = _.find(xcBuildConfiguration, function(entry) { return ( entry.buildSettings && entry.buildSettings.INFOPLIST_FILE && entry.buildSettings.INFOPLIST_FILE.includes("プロジェクト名") ); });
に変更したらエラーが出なくなった。
⑤Cordova.jsをいじる
Cordova.jsの2040行目あたりに
document.addEventListener("deviceready", logger.__onDeviceReady, false);
という関数があるのだが、これはアプリが立ち上がった時に、logger.__onDeviceReadyという関数が呼ばれるよ!
という意味らしい。なので、マニュアルに書かれているUsageのコードをこのlogger.__onDeviceReady関数の中に埋め込んで、、、、試行錯誤。
無事URLが取れるようになりましたとさ。
終わりに
その他にも様々な苦労がありましたが、全ては書ききれず、覚えている範囲で走り書きしました。
かれこれ1週間弱沼の中でもがき苦しんでいました。
Cordovaに関しては情報が少なく、他に苦しんでいらっしゃる方の参考になれば幸いです。