PhoneGap を Android 実機でデバッグ

Home > PC / スマホ > PhoneGap を Android 実機でデバッグ
すき 0
うんこ 0

エミュレータ環境を作成したけど、エミュレータでも動作するのにやはりAndroid 実機では動かない…。

PhoneGap build からではなく、$ phonegap run android で試してみてもだめだった。

実機で動かす方法はこちらの記事を参考にさせて頂きました。

Cordovaを使って、Androidの実機実行するまで – Qiita

実機で起動

  1. Android の USB デバッグをオンにする
     
  2. Mac と USB 接続(充電専用だとNGということで、DAISOで買った充電ケーブル大丈夫かな?と心配だったけど大丈夫だった)
     
  3. $ adb devices で確認

    ※最初 adb: command not found となってしまったのでこちらのページを参考にさせて頂きパスを通す
    adbをMacのターミナルで使えるようにする – Qiita

    無事 デバイスが出てきた

  4. $ phonegap run android

    …ディレクトリ間違えた、プロジェクトに移動して再度実行

    色々出てきてエラー

    こちらの記事を参考にさせて頂き、インストール済みのアプリを削除。
    Androidエラー Failure [INSTALL_FAILED_UPDATE_INCOMPATIBLE] – クリアメモリ

  5. 成功

    再度実行したところやっと成功

実機でアプリが起動したけど、やっぱり、エミュレータ上で動く所が実機では動かない…。

実機でデバッグ

adb logcat

console.log を確認したい

…Mac の エミュレータを終了して改めて…

ずらっといっぱい出てくる…

⌘C で終了して、下記コマンド

こちらの記事を参考にさせて頂きました
Cordova開発でAndroid実機テスト中のconsole.logを探したよ | Foolean – 備忘録風雑記ブログ

出てきたー

セキュリティポリシーのエラー

問題のエラー箇所、
ギャラリーを起動して画像を選択した先が動かない

ぐぐった結果こちらのページを参考にさせて頂き、

javascript – ‘img-src’ was not explicitly set, so ‘default-src’ is used as a fallback – Stack Overflow

index.html の  meta http-equiv=”Content-Security-Policy” を修正

デフォルト

img-src ‘self’ content:; を追加

これで再度実行したところ、動くようになったー!

セキュリティポリシー、なにそれ状態。

もっと、HTML & JS で、「chrome ブラウザで動くのと同じように」動くのかと思っていたけど、何かと難しい。

アプリ作成中

でもこれでやっと実機で、

  1. ギャラリーから画像選択してCanvas1に描画
  2. フィルタ用画像を選択してCanvas2に描画
  3. Canvas1 と Canvas2 を合成して Canvas3に描画
  4. Canvas3 を スマホのギャラリーに保存

まで出来た!

このような感じで宇宙加工など出来る画像加工アプリを作成しています。

保存した写真をインスタにもアップしてみた

 

#宇宙加工 #景色 #朝焼け #PhoneGag で 宇宙加工アプリ作成中

Home Made Garbageさん(@homemadegarbage)がシェアした投稿 –

 

コメントはこちらから

メールアドレスが公開されることはありません。コメントのみでもOKです。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください