内容
状態:-
閲覧数:621
投稿日:2018-06-13
更新日:2018-06-19
一覧
手順1： PhoneGapのインストール
・「Windows10 PC」へ「PhoneGapアプリケーション」をインストールする
手順2： モバイルアプリのインストール
手順3： アプリの作成
手順4： アプリケーションのプレビュー
手順5： アプリケーションの更新
手順1： PhoneGapのインストール
内容
「Windows10 PC」へ「PhoneGapアプリケーション」をインストールする
手順
1.Windowsインストーラーをダウンロード
・VERSION 0.4.5 (BETA)
・Releases · phonegap/phonegap-app-desktop
ダウンロードされた「PhoneGapSetup-win32.exe」をクリック
デフォルトインストール先
▼C:\Program Files (x86)\Adobe\PhoneGap\PhoneGap Desktop
インストール終了
・「Finish」をクリックできるようになるまで、物凄く時間がかかる
デスクトップにショートカット
・自動で作成されないため、手動で作成しておく
手順2： モバイルアプリのインストール
1.スマホ実機へアプリインストール
Google Play から、無料のPhoneGap Developerアプリを探し、スマホ実機へインストール
・PhoneGap Developerアプリをインストール
最後にConnectボタンが表示されるが
・この段階ではそのまま次の手順へ進めば良い
・手順2： モバイルアプリのインストール
手順3： アプリの作成
1.Desktopアプリ起動
Adobe PhoneGap Desktopアプリを起動
▼C:\Program Files (x86)\Adobe\PhoneGap\PhoneGap Desktop\PhoneGap.exe
2.PhoneGapプロジェクト作成
PhoneGap画面
・左上のプラス記号をクリックし、「Create new PhoneGap project」を選択
SELECT A TEMPLATE 画面
・リストの最初のテンプレートはデフォルトのHello Worldプロジェクト
・Hello Worldのテンプレートの横の ラジオボタンが 選択されていることを確認
・緑の[次へ]ボタンを クリック
プロジェクトについての情報を入力するための画面
・プロジェクトを作成するローカルハードドライブのパス
L:\Android\phoneGapProject
・アプリ名app20180615
・オプションのIDwork.w4c.android0
・情報を入力したら、緑色の「Create project」ボタンをクリック手順3： アプリの作成
手順4： アプリケーションのプレビュー
1.Desktopアプリ起動
Adobe PhoneGap Desktopアプリを起動
▼C:\Program Files (x86)\Adobe\PhoneGap\PhoneGap Desktop\PhoneGap.exe
一番下に記述されているサーバーアドレスをコピー
2.スマホ実機起動
2-1.インストールした「PhoneGap Developerアプリ」を起動
2-2.サーバーアドレスを入力
・メイン画面で、「1」でコピーしたサーバーアドレスをペースト
・「Connect」をタップ
2-3.アプリケーションのプレビュー
スマホ実機で、Desktopアプリが動作していることを確認
・手順4： アプリケーションのプレビュー
手順5： アプリケーションの更新
内容
1.Desktopアプリのコードを一部変更
2.スマホ実機のアプリで変更反映を確認
1.index.htmlを開く
任意のテキストエディターを使用
・プロジェクトのwwwフォルダーにあるindex.htmlファイルを開く
▼L:\Android\phoneGapProject\app20180615\www\index.html
適当に修正後、保存
・<h1>PhoneGap</h1> を <h1>Hello PhoneGap</h1> へ変更
2.スマホ実機起動
2-1.インストールした「PhoneGap Developerアプリ」を起動
2-2.変更反映を確認
・スマホ実機で、変更したDesktopアプリ内容が反映されていることを確認
・手順4： アプリケーションのプレビュー
・「Hello World」の説明