HTML5 + CSS3 + JavaScript で、iPhone / Android アプリを制作できる [ PhoneGap ] を試してみました！

だるかぶ

サンダルでスーパーカブ乗りの『だるかぶ』です！
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）

HTML5 + CSS3 + JavaScript で、iPhone / Android アプリを制作できる [ PhoneGap ] を試してみたので、わかった事をメモ書きしておきます。

わかった事

• iPhone 標準の UI ( ボタンなど ) が使えないので、自分で製作する必要がある。

• jQuery Mobile などのライブラリで開発したアプリをパッケージにし、AppStore に登録できる。

• 2011 年 10 月に Adobe が PhoneGap を開発する企業 Nitobi を買収したらしい。

• PhoneGap 内の HTML にリンク ( a href ) を設定するには、マニフェスト ( .xml ) に書かないといけないみたい。

• メールを送信する時などは、プラグイン を入れないといけないみたい。

• オープンソースの PhoneGap は Cordova という名前に変わり、Cordova をアドビ社が配布する時は、PhoneGap という名前になるそうです。

公式サイト

• PhoneGap
  本家！英語です。

• Apache Cordova API Documentation
  API リファレンス。

• PhoneGap Fan – PhoneGap の日本語コミュニティ
  サンプル・ドキュメントなどがあります。

チュートリアル

• 連載：PhoneGap で手軽に iPhone / Android アプリを作ろう｜gihyo.jp … 技術評論社
  PhoneGap のインストール、メモアプリ・カメラアプリのチュートリアルなど。

• ASCII.jp：古籏一浩の JavaScript ラボ
  いくつかチュートリアルがあります。

Adobe PhoneGap Build サービスで簡単にビルドする

PhoneGAP アプリを簡単にビルドできるウェブサービス。

▲ Adobe PhoneGap Build

※ Dreamweaver CC 2014 以降では、PhoneGap Build との連携機能がサポートされないそうです。 ただし、PhoneGap Build オンラインサービスに ZIP ファイルをアップロードすればパッケージ化できます。

参考 : https://helpx.adobe.com/jp/dreamweaver/using/packaging-web-apps.html

Dreamweaver CC には、PhoneGap Build サービスとの連携機能があるので便利です。

1. アプリ用に新規のサイト定義を作成する。

2. [ サイト ] → [ PhoneGap Build サービス ] → [ PhoneGap Build サービス ] でパネルを表示。

3. PhoneGap Build サービスのメールアドレスとパスワードを入力。

4. [ 新規プロジェクトを作成 ] を選択して [ 続行 ] をクリック。

Android アプリで必要となる証明書は、JDK の Keytool などで作成できますが、何も指定しなかった場合、デバッグ用の証明書が自動的に使われるようです。

参考にさせてもらったページ

• マルチデバイス対応のモバイルアプリ開発環境「PhoneGap」「PhoneGap Build」をおさらいする （1/5）：CodeZine

• Dreamweaver ヘルプ | PhoneGap Build を使用した Web アプリケーションのネイティブモバイルアプリケーションとしてのパッケージ化

ありがとうございます！

現場からは以上です。それでは、またッ！！！

だるかぶ

最後までお読みいただきありがとうございます！ スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！

記事内容の修正について 記載している内容は記事執筆時の情報です。 できるだけ最新情報を掲載するようにしていますが、情報が間違っている場合は「コメント」でご指摘いただけるとありがたいです。