アプリに含めるHTMLの制作

Webベースアプリでは、予め一部の画面のHTML / CSS / JavaScript / 画像を格納して配布します。起動後に表示するホーム画面、ブックマーク一覧画面等の必須画面の他、任意の画面を格納することができます。ダウンロードしたMobileApps.packのsamples/WebBasedApp_resourceにサンプルファイルが入っています。

アプリに含めるHTML / CSS / JavaScript / 画像は、Zip形式でアーカイブしアプリの設定画面でアップロードします。

必須の画面

以下の画面は必ずアプリに含める必要があります。なお、ファイル名は変更できません。

画面名ファイル名内容
ホーム index.html 起動後に表示される画面です。
ブックマーク一覧 bookmark.html ブックマークした記事の一覧を表示します。
ログイン画面 members-loginform.html (PowerCMS同梱のMembersプラグインを使用している場合のみ)
ログインフォーム画面です。
ログイン済画面 members-already-logged.html (PowerCMS同梱のMembersプラグインを使用している場合のみ)
ログインが完了している場合に表示される画面です。

HTMLファイルの配置

HTMLはサブディレクトリには入れず、index.htmlと同じ階層に格納してください。ファイル数が多くなる場合は接頭辞を付けるなどの工夫をすると分かりやすいかと思います。

アプリ内に含めるファイル同士のリンク方法

相対パスで記述することによりリンクすることが可能です。

ブックマーク一覧画面について

ブックマーク一覧はネイティブ側にてJSON形式の文字列(ブックマークデータ)をHTMLに書き込み、JavaScriptを使用して表示を行います。サンプルファイルでは「Handlebars.js」をテンプレートエンジンとして利用していますが他のテンプレートエンジンを利用することも可能です。

なお、記事詳細画面のURLには?bookmark=1を付けてください。(記事詳細画面からブックマーク一覧画面に戻ることができるようにするためです。)

ログイン画面・ログイン済画面について

画面下の「設定」をタップして表示された画面の中に「認証設定」メニューが表示されます。「認証設定」をタップすると状況に応じてログイン画面もしくはログイン済画面が表示されます。アプリの利用前に予めログインして頂くイメージです。

アーカイブの方法

ツールにもよりますが、index.htmlがある階層の一つ上の階層に移動しディレクトリをZip形式でアーカイブします。なお、アーカイブする際にMac固有のファイルや.git等アプリで使用しないディレクトリ・ファイルが混ざらないようにしてください。