Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Cordova-ios でShareExtension を実装する際に死ぬほどハマった話

はじめに

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は一致させておくべきです

②そうすると以下のようなファイル構造になっているはずです。
スクリーンショット 2020-06-29 14.19.23.png

こちらのShareViewController.hファイルの中に
#define SHAREEXT_GROUP_IDENTIFIER @"group.**********"
と書かれているところがあるので、そのグループ名と同じようにAppGroupを設定する

この時点でShareExtensionをBuildすると共有ボタンを押すとアプリアイコンが出てきていると思います。
そこでPostを押すと、アプリのuserDefaults(WebでいうLocalStorageのようなもの?)にURLなどの情報が保存されます。

③本体アプリの方でその情報を受け取るコードを書く!
ここが一番分からなかった、、、cordova-plugin-openwith-iosのマニュアルには一言Usageとだけ
スクリーンショット 2020-06-29 14.27.56.png
と書かれているけど、ってこれどこに書いたらいいねん!!(つい言葉が汚くなりました。すみません)

結局結論としては、
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に関しては情報が少なく、他に苦しんでいらっしゃる方の参考になれば幸いです。

Ko-rin
元々10年間臨床医をしていました。駆け出しエンジニアです。AR, VR, Vue.js, quasar-framework, firebase, BlockChainに興味がありアプリを開発しています。 上記の領域は情報が少なく、初心者の自分がつまづいたところを中心に共有できればと思います。
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away