iOS」カテゴリーアーカイブ

PhonegapアプリにAdobe Mobile SDKを入れる

まずはMac上でPhonegapアプリを作るところから始めた。

ググると結構古い情報がヒットして困ったが、Phongegapの中身はCordovaなので、Cordovaの環境を揃えれば良いそうだ。

Xcodeはインストール済みだったので、
Xcodeコマンドラインツールを入れる。

あと、gitもインストール済みなので、そのまま使う。

で、今度はNode.jsを入れる。
node.jsに含まれるnpmコマンドを使うためである。
https://nodejs.org/en/

そしてcordovaをインストールする

$ sudo npm install cordova -g

インストールしたら、早速テストプロジェクトを作る

$ cordova create test-project

そしてiOSとAndroidのプラットフォームを追加

$ cordova platforms add ios
$ cordova platforms add android

そうするとtest-project/platforms配下にiosとandroidというディレクトリがそれぞれ出来上がるので、それらをbuildしたのち、エミュレーターで起動できます。

$ cordova build ios
$ cordova emulate ios

というわけで、次はAdobeのSDKを入れます。
管理画面からPhonegap pluginというのもダウンロードしておきます。
https://marketing.adobe.com/resources/help/en_US/mobile/ios/phonegap.html
最初はiOS。通常のiOSアプリと同じくADBMobileライブラリとADBMobileConfig.jsonをプロジェクトに追加します。

そして、ADBMobile_PhoneGap.h と ADBMobile_PhoneGap.m プロジェクトのpluginsフォルダにコピー。

それから、test-project/platforms/ios/www にPhonegapプラグインに含まれるADBHelpler.jsをコピーする。

で、config.xmlに下記の要素を貼り付けるとあるが、config.xmlがプロジェクトのrootとplatforms/ios/の2箇所にあるんだが、どっちだ?
とりあえず両方に入れといたw

<feature name="ADBMobile_PhoneGap">
    <param name="ios-package" value="ADBMobile_PhoneGap" />
</feature>

ここまでやったら、次はADBHelper.jsの実装。
とりあえずwwwの中のindex.htmlに入れる。
閉じタグの直前に、ADBHelper.jsをインクルード。

<script type="text/javascript" charset="utf-8" src="ADB_Helper.js"></script>

あとは各ADB.trackStateをコールすればビーコンが飛ぶ、はずなのですが、どうやらCordovaアプリ内ではonDeviceReadyイベントが発生してからじゃないと制御出来ない。

で、とりあえずjs/index.js内でonDeviceReadyで実行されるコールバック関数があったので、その中にADB.trackStateを入れたら動いた

    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
        
        /* ここでAdobe Analyticsのコードを実行 */
        ADB.setDebugLogging(true);
        ADB.collectLifecycleData();
        //pageNameにHelloCordova、prop1にhogeをセット
        ADB.trackState("HelloCordova", {"&&c1":"hoge"}); 
    }

trackingServerへの送信ビーコンの中身はXcodeのコンソールに出てくるので、それで確認。
Phonegapプラグインがちゃんとpluginsフォルダにコピーされてないとプラグインが見つからないというエラーが出てきて怒られるので注意。

以上iOS

Androidも大体やる事は同じ。
https://marketing.adobe.com/resources/help/en_US/mobile/android/phonegap.html
しかしbuildしたらtargetが見つからないとかで怒られる。

$ cordova build android

というわけでAndroid SDK Managerを起動してもろもろバージョンアップしたりインストールしてretryしたら動いた。

Firebase を試す (iOS)

さっそく無償で使える Firebase を試しました。

Firebase を Xcode で使うには cocoapods が必要。
という訳で、まずはググって見つけた手順に沿って cocoapods を入れる。

ここらへんとか参考。
https://www.firebase.com/docs/ios/guide/setup.html
https://cocoapods.org/pods/Firebase

あとは、Firebase にプロジェクトを作って進めていく。

ここらへんを参考。
http://dev.classmethod.jp/smartphone/firebase-notification-ios/

そして手元の iOS アプリに組み込んでみたところ、 Build Failed…

framework not found Pods
error: linker command failed with exit code 1 (use -v to see invocation)

というメッセージが出てきてシミュレータが起動しない。

で、Framework フォルダの下にある Pods.framework が赤文字で表示されていて、どうやらこのファイルが存在しない模様。
そして解決策は、この Framework/Pods.framework を Xcode から削除すればOK。
Stackoverflowにも似たような投稿あり

動いた。
Firebase Analytics にデータが入り始めたので、他にも色々機能を使ってみる。