![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
モバイルアプリのための万能ツールではなく、
ハイブリッドアプリを開発するためのフレームワーク。
PhoneGap?はCordovaベースのAdobe製品版。
以下の様なサービスも提供されている。
プラットフォームのすべての機能をサポートしているわけではない。
Node.js製コマンドライン開発ツール
だけ利用するでも開発可能だが、
Cordovaフレームワークに組み込まれていたネイティブ機能も含め、
Cordova3.0からは、ネイティブ機能を提供するものはすべてプラグインとして管理されるようになっている。
cordova plugin add リポジトリのURL
cordova plugin ls
cordova plugin rm org.apache.cordova.core.camera（プラグインの識別子）
cordova prepare -d
| # | ファイル・フォルダ | 説明 |
| 1 | config.xml | 各プラットフォームに展開されるCordova用設定ファイル。 |
| 2 | wwwフォルダ | HTML5リソースやアプリ設定に関するファイルが格納される。 ルートフォルダに配置したHTMLファイルなどがアプリとして表示される。 |
| 3 | pluginsフォルダ | プラグインが格納されている。 |
| 4 | mergesフォルダ | HTML5側をプラットフォームごとに切り替える。 wwwディレクトリがプラットフォームごとにコンパイルされる際、 ここに格納されている各プラットフォーム特有のリソースがマージされる。 |
| 5 | platformsフォルダ | ネイティブ側をプラットフォームごとに切り替える。 各プラットフォーム特有のプロジェクトファイルが格納される。 |
| # | 項目名 | 概要 |
| 1 | widget | ・id:アプリの識別子 ・version:バージョン番号 |
| 2 | name | アプリ名 |
| 3 | description | アプリの概要 |
| 4 | author | アプリの作成者 |
| 5 | content | アプリ起動時、最初にロードするコンテンツ(index.htmlなど)。 ・外部のURL(http://・・・)で外部のコンテンツを表示できる。 ・外部のURLの場合は、下記ホワイトリストの指定が必要。 |
| 6 | access | ・ホワイトリスト指定（http://aaa.bbb.com、http://xxx.yyy.com）。 ・*は制限なし。ドメイン指定も可能（http://*.xxxx.com）。 |
| 7 | preference | 実行時のフレームワークの挙動を設定。 ・name:設定名 ・value:設定値 |
| 8 | feature | プラグインの有効化 |
| 9 | allow-intent | URLSchemeで別アプリを起動する際に予め定義。 |
| 10 | platform | 特定のプラットフォームのみに反映する場合に利用 |
以下の中身を読んで理解する。
Cordovaで利用するプラグインやその設定ファイルを格納する。
HTML5側をプラットフォームごとに切り替える。
- wwwディレクトリの内容がplatforms/android/assets/wwwディレクトリ以下にコピーされる。
- merges/androidディレクトリの内容がplatforms/android/assets/wwwディレクトリ以下にコピーされる。
※ 同じ名前のファイルがある場合には上書きされる。
ネイティブ側をプラットフォームごとに切り替える。
| # | 項目名 | 概要 |
| 1 | loadingDialog | アプリの読み込み中に、ネイティブのロード中を表すダイアログ表示 |
| 2 | loadingPageDialog? | HTMLページの読み込み中に、ネイティブのロード中を表すダイアログを表示 |
| 3 | errorUrl | アプリのエラーページ(wwwディレクトリからの相対パス) |
| 4 | backgroundColor | アプリの背景色を指定 |
| 5 | loadUrlTimeoutValue? | アプリの読み込みのタイムアウト値設定 |
| 6 | keepRunning | ・バックグラウンド実行の設定。 ・trueかfalseを指定。デフォルトはtrue（バックグラウンドでも実行）。 |
| 7 | splashscreen | ・splashscreenの画像 ・res/drawableディレクトリ以下・拡張子無し。 |
| 8 | disallowOverscroll (boolean, defaults to false): | ・オーバースクロール時の表現。 ・trueかfalseを指定。デフォルトはfalse（表現しない）。 |
| # | 項目名 | 概要 |
| 1 | DisallowOverscroll? | ・オーバースクロール時の表現。 ・trueかfalseを指定。デフォルトはfalse（表現しない）。 |
| 2 | TopActivityIndicator? | ・ステータスバーに表示されるインジケータの種類を設定。 ・有効な値は、whiteLargeとwhiteとgray。デフォルトはgray。 |
| 3 | EnableViewportScale? | ・metaタグによるviewportのスケールの有効・無効。 ・trueかfalseを指定。デフォルトはfalse（metaタグでスケールする）。 |
| 4 | AutoHideSplashScreen? | ・スプラッシュスクリーンを消すタイミングをJavaScriptから指定する・しない。 ・trueかfalseを指定。デフォルトはtrue（JavaScriptから指定しない）。 |
| % | FadeSplashScreen? | ・スプラッシュスクリーンをフェードイン・フェードアウトさせるかどうか。 ・trueかfalseを指定。デフォルトはtrue（フェードイン・フェードアウトさせる）。 |
| 6 | FadeSplashScreenDuration? | ・スプラッシュスクリーンのアニメーションの長さを秒数で指定。 ・デフォルトは2。小数点も指定可能。 |
| 7 | ShowSplashScreenSpinner? | ・スプラッシュスクリーンの上にスピナー表示する・しない。 ・trueかfalseを指定。デフォルトはtrue（スピナー表示する）。 |
| 8 | MediaPlaybackRequiresUserAction? | ・HTML5videoタグの自動再生を許可する・しない。 ・trueかfalseを指定。デフォルトはfalse（自動再生を許可する）。 |
| 9 | AllowInlineMediaPlayback? | ・HTML5videoタグでのプレイバックを許可する・しない。 ・HTML側のvideoタグ属性にwebkit-playsinlineの追加が必要。 ・trueかfalseを指定します。デフォルトはfalse（自動再生を許可しない）。 |
| 10 | BackupWebStorage? | ・Webストレージのバックアップ場所を設定。 ・noneとcloud（iCloud）とlocal（iTunes経由）のいずれかを指定。デフォルトはfalse（自動再生を許可しない）。 |
| 11 | KeyboardDisplayRequiresUserAction? | ・JavaScriptのfocusメソッドで、ソフトウェアキーボードを表示する・しない。 ・trueかfalseを指定。デフォルトはtrueです（表示しない）。 |
| 12 | SuppressesIncrementalRendering? | ・すべてのビューを受け取ってからアプリ内部のHTMLをレンダリングする・しない。 ・trueかfalseを指定。デフォルトはfalse（すべてのビューを受け取ってからレンダリング）。 |
| 13 | HideKeyboardFormAccessoryBar? | ・ソフトウェアキーボードの上に表示されるツールバーを表示する・しない。 ・trueかfalseを指定。デフォルトはfalse（表示する）。 |
| 14 | KeyboardShrinksView? | ・ソフトウェアの大きさに合わせてWebViewの高さを変更する・しない。 ・trueかfalseを指定。デフォルトはfalse（変更しない）。 |
| # | ファイルのパス | サイズ |
| 1 | drawable-ldpi/icon.png | 36*36px |
| 2 | drawable-mdpi/icon.png | 48*48px |
| 3 | drawable-hdpi/icon.png | 72*72px |
| 4 | drawable-xhdpi/icon.png | 96*96px |
| # | ファイルのパス | サイズ |
| 1 | icon.png | 57*57px |
| 2 | icon@2x.png | 114*114px |
| 3 | icon-72.png | 72*72px |
| 4 | icon-72@2x.png | 144*144px |
| # | 9-patchファイルのパス | サイズ（縦*横） |
| 1 | drawable-ldpi/splash.9.png | 426*320px |
| 2 | drawable-mdpi/splash.9.png | 470*320px |
| 3 | drawable-hdpi/splash.9.png | 640*480px |
| 4 | drawable-xhdpi/splash.9.png | 960*720px |
| # | pngファイルのパス | サイズ（縦*横） |
| 1 | Default-568h@2x~iphone.png | 640*1136px |
| 2 | Default-Landscape~ipad.png | 1024*748px |
| 3 | Default-Landscape@2x~ipad.png | 2048*1496px |
| 4 | Default-Portrait~ipad.png | 768*1004px |
| 5 | Default-Portrait@2x~ipad.png | 1536*2008px |
| 6 | Default~iphone.png | 320*480px |
| 7 | Default@2x~iphone.png | 640*960px |
cordova.exec(<successFunction>, <failFunction>, <service>, <action>, [<args>]);
| # | 名前 | 概要 |
| 1 | <successFunction> | 呼び出し成功時に実行される関数 |
| 2 | <failFunction> | 呼び出し失敗時に実行される関数 |
| 3 | <service> | config.xmlに追加したプラグイン名 |
| 4 | <action> | 呼び出すプラグインのアクション名 |
| 5 | <args> | ネイティブ側に引数として渡す配列。JSON化できるもののみを渡す |
localのhtmlファイルに画面遷移
<body onload="onBodyLoad()">
<div data-role="header"><h1>Page1</h1></div>
<p>This app is for my Blog</p>
<a href="second.html" data-role="button">secondへ</a>
</body><body onload="onBodyLoad()">
<div data-role="header"><h1>Page2</h1></div>
<p>This is second page</p>
<a href="index.html" data-role="button">indexへ</a>
</body><section id="page1" data-role="page">・・・</section>
<script>
$(document).bind("bobileinit", function() {
$.mobile.page.prototype.options.addBackBtn = true;
});
</script>
・・・
<div data-role="page" id="id1">
<div data-role="header" data-add-back-btn="true"><div data-role="header">
<a href="" data-rel="back">戻る</a>
</div>以下のサイト情報から、2つの方式が確認できる。
ローカルにある静的なHTMLとWebAPI（JSON）によって機能する。
Webアプリケーションの画面をホストする。
Cordova (PhoneGap)ではなく、WebViewの話題っぽい。
