クライアントアプリをデザインしてスタートページを表示する

次は、Shell App Framework のクライアント側のアプリケーションの開発を行っていきます。前章で作成したスタートページのHTMLを実際のWebView内に表示することがこの章のゴールになります。

Shell App Frameworkでは、デベロッパーポータル上でクライアント側アプリケーションの開発を行うため、Eclipseなどのネイティブアプリ向けの開発環境は特に必要ありません。動作確認のためにapkファイルを端末にインストールする用途でadbコマンドを使用しますので、Android SDK Managerとその関連ツールをインストールしておいてください。

また、iOS の場合は、動作確認とアプリケーションの公開の為に iOS Developer Program への登録と XCode のインストールが必要になります。

作成しているアプリの「アプリケーション詳細」画面を表示します。

アセットのアップロード

まずは、「Android 設定」または「iOS 設定」 > 「アセット管理」の画面でクライアント側で使用するアセットをアップロードします。初期状態ではプリセットのヘッダ、フッタ画像が既に登録された状態です。

追加でヘッダ、フッタに利用するためのpng画像ファイルおよびBGM、サウンドエフェクトに利用する音声ファイル (Android は ogg、iOS は m4a) のみがアップロード可能です。

レイアウトのデザイン

次にアップロードしたpng画像ファイルを使用して、コミュニティーボタン、ヘッダ、フッタ、WebView部分のレイアウトをXMLで定義していきます。「Layout編集」リンクをクリックするとレイアウトXMLの編集画面が開きます。

定義したXMLの内容が画面右側にあるプレビュー画面に自動的に反映されますので、実機にアプリケーションをインストールすることなく事前にクライアント側アプリケーションのデザインを確認することができます。

レイアウトのヘッダ、フッタ内には複数のボタンを用意することができ、タップ時に特定のURLへ遷移することや、戻る/進む/再読み込みなどの基本動作、WebView内のJavaScript関数をコールするなどの挙動を定義することが可能です。このとき、WebView部分のレイアウトがヘッダ・フッタに重ならないようにデザインしてください。右側のプレビュー画面上のボタンをクリックすると実際の挙動がalertダイアログで表示され動作を確認することができます。

また、ヘッダ、フッタのレイアウトを複数パターンを定義して、WebView内のJavaScriptから画面に応じて切り替えることや、ヘッダ、フッタ自体を隠すことも可能です。こちらも右側のプレビュー機能の上部のselectでヘッダ、フッタの挙動をシュミレーションすることができます。

レイアウトXMLの詳細なスキーマに関しては、こちらを参照してください。

クライアントアプリケーションのダウンロード

Info.plist 設定 (iOSのみ)

クライアントアプリケーションをダウンロードする際に、iOSでは app 内にある Info.plist という設定ファイルの書き込み処理が行われますのでその設定を行う必要があります。

「iOS」>「Info」画面から Info.plist の設定を下記のように行います。

項目名

説明

チュートリアルでの設定例

Bundle Version

App Store上のアプリケーションのバージョン

1.0.0

Target Device Family

iPhone用、Univeral

iPhone/Universal のいずれか

CFBundlledentifier

App Store上のアプリケーションの識別子

com.example.myfirstshellapp

CFBundlleDisplayName

ホームアイコンに表示されるアプリ名

My ShellApp

UIPrerenderedIcon

ホームアイコンにグロスエフェクト入れない場合 true

true

上記に加えて、各サイズのアイコン画像をアップロードします。

Application Label 設定 (Android のみ)

アプリ名称が未設定の場合、「APK作成」リンクをクリックし、Application Label の「登録する」リンクをクリックするとポップアップが表示されますので、任意の値を入力し保存して下さい。入力された値がホームアイコンの下に表示させるアプリ名となります。存在しない画像がレイアウトXMLに定義されているなど妥当でない設定の場合はダウンロードできませんのでご注意ください。

WebView 設定(iOS のみ)

iOS 8 未満の場合、Shell App Framework の WebView には UIWebView が使用されてきました。iOS 8 以上から、新たに WKWebView が使用できるようになり、WebView の動作が向上します。WKWebView には以下の特徴があります。

  • メリット:UIWebView よりも JavaScript の実行速度が向上し、Safariと同等のパフォーマンスに
  • デメリット:UIWebView よりも一部端末でページ遷移が遅い。iOS 8 以上でないと使用できない。

上記特徴より、アプリの状況によって適切に判断して設定を行ってください。

『iOS』タブをクリック後、『APP作成』をクリックすると、以下の様な WebView 設定画面が表示されますので、『WebViewの設定を変更する』ボタンをクリックします。

以下の様な画面が表示されますので、WKWebView を有効にする場合には『WKWebViewを有効にする』を選択して『更新』ボタンをクリックしてください。

ログインイメージの準備

ログインダイアログに表示される画像となります。下記画像の背景とゲームスタートボタンが対象となります。(詳細はこちら
 

以下の iPhone 用の PNG ファイルと Android 用の PNG ファイルをご用意頂く必要があります。

表示箇所デベロッパーサイト表示名画像サイズ(px)補足

背景

iPhone用背景

 

560x880 px

iPhone 用

ゲームスタートボタン

iPhone用ゲームスタートボタン画像

 

460x100 px

iPhone 用

背景

スマートフォン用背景

560x880 px

Android 用

ゲームスタートボタン

スマートフォン用ゲームスタートボタン画像

460x100 px

Android 用

背景

タブレット用背景

1120x1760 px

Android タブレット用

ゲームスタートボタン

タブレット用ゲームスタートボタン画像

920x200 px

Android タブレット用

また、ダイアログ下部には規約・ボタン等を表示する為の領域を確保して頂く必要があります。規約・ボタン等は下記、"規約・ボタン表示エリア" よりも下に表示されます。

画像種別

画像サイズ(px)

規約・ボタン表示エリアの開始位置

iPhone / Android 用背景画像

560x880

縦490px開始

Android タブレット用背景画像

1120x1760

縦980px開始

指定の位置からグラデーションをかける等を行い、可読性を損なわない画像を準備してください。

ログインイメージの設定

※ 詳細はこちら 

【Android の場合】

『Android』タブをクリック後、『APK作成』をクリックすると、以下の様な Login Image 設定画面が表示されますので、『Login Image を編集する』ボタンをクリックします。各画像を設定できる画面が表示されますので、前述の記載に沿った画像を設定して下さい。

【iOS の場合】

『iOS』タブをクリック後、『APP作成』をクリックすると、以下の様な Login Image 設定画面が表示されますので、『Login Image を編集する』ボタンをクリックします。各画像を設定できる画面が表示されますので、前述の記載に沿った画像を設定して下さい。

アプリケーションのダウンロード

アセットのアップロードとレイアウトの修正が完了したら、Androidの場合は、「APK作成」リンク、iOS の場合は「APP作成」リンクからパッケージングされたアプリケーションがダウンロードできます。

さて、チュートリアルではデフォルトのデザインのままSandbox用のapkをダウンロードしてみましょう。

Downloadの画面から「Sandbox版ダウンロード」ボタンをクリックすると Android の場合は apk ファイルが、iOS の場合は app.zip ファイルのダウンロードが始まります。

実機で動作を確認する (Android)

端末をUSBデバックモードで接続し、下記のコマンドでダウンロードしたapkをインストールします。

インストールしたアプリを起動するとログイン画面が出てきます。

以下のように、前章で作成したテストユーザーのメールアドレスと登録したパスワードでログインすることができます。

ログイン後にゲームのスタートページが表示されていれば成功です。

実機で動作を確認する (iOS)

まず、ダウンロードしてきた app ファイルを再署名しなければなりません。
再署名作業は iOS Provisioning Portal のアカウントと .app ファイルを紐づけて、実機に転送する為に必要な作業となります。(作業の前に zip 圧縮されたファイルを解凍しておいてください)

以下のツールをダウンロードして、使用例に従い再署名してください。

usage: re-sign-distribution.sh <application> <mobileprovision> <identity> <appPrefix> <bundleId> 
example: re-sign-distribution.sh webgame.app test.mobileprovison "iPhone Developer: Mobage Taro" ABCDEFG my.bundle.id
リモート通知機能を使用する場合には、re-sign-notification.sh をお使いください。
  • 上記コマンドの詳細説明
    • <application>
      • ダウンロードした .app ファイルのパスを入力します。
    • <mobileprovision>
      • iOS Provisioning Portal からダウンロードした、拡張子が mobileprovision のファイルのパスを入力します。
    • <identity>
      • iOS Provisioning Portal で登録した Distribution Certificates の証明書の通称を入力します。
    • <appPrefix>
      • iOS Provisioning Portal で App ID の登録時に自動的に作成される Bundle Seed ID (App ID Prefix) を入力します。iOS Provisioning Portal のApp IDs の Description に ”BundleSeedID”.”BundleID” という文字列がありますので、こちらの ”BundleSeedID” のみを入力してください。
    • <bundleId>
      • 上記の ”BundleID” のみを入力します。

再署名が完了したら、端末を PC に接続し XCode Organiser を起動して、再署名を行った app ファイルを実機へインストールします。
インストールしたアプリを起動するとログイン画面が出てきますので、Android と同様にログイン後にゲームのスタートページが表示されていれば成功です。

これで ShellApp クライアントをデザインしてスタートページを表示するチュートリアルは完了です。

更新履歴

  • 2014/7/22
    • ログイン画面の設定が必要になったので追記
  • 2013/4/2
    • WebViewにヘッダ・フッタにを重ねない旨の注意点を追加
  • 2012/12/11
    • 新規作成

PREVIOUS

gadget.xmlの登録とスタートページを作成する

NEXT

ログインユーザーの情報を表示する