ビーンタウンリファレンスアプリ(その2)

ブログ「ビーンタウンリファレンスアプリ」ではApp Cloud SDKに同梱されているサンプルアプリよりも、より複雑で多機能なサンプルテンプレートを紹介しました。このブログエントリーでは「ビーンタウンリファレンスアプリその2」として、このビーンタウンテンプレートを使って別のアプリを作り、様々な設定を変更する方法や、変更可能な設定項目をアプリに取り入れる方法を紹介したいと思います。

 

App Cloud ではテンプレートを元にアプリを作成しますので、ひとつのテンプレートから複数のアプリを作成することが可能です。アプリの中で利用するデータソースや設定やタイトルなどアプリケーションごとに項目を変更することができるので、アプリごとに異なるコンテンツやRSSフィードを利用したりスタイルを変更できます。完成版をいち早くWorkshop アプリでご覧になりたい方は、エントリー最後にある QR コードを Workshop アプリから読込んでお手元のスマートフォンでお試しいただけます。

ビーンタウンテンプレートのダウンロードや設定に関しては「ビーンタウンリファレンスアプリ」のブログエントリーを参照してください。テンプレートが既に登録されていることを前提に進めていきます。

ビーンタウンコーヒーテンプレートから新しいアプリを作成します。App Cloud スタジオに入り、「ボストンビア」という名前のアプリをビーンタウンコーヒーテンプレートから新規に作成します。このボストンビアアプリではこちらボストンビアウェブサイト (http://brewery.ac-app.brightcove.jp/) の情報をコンテンツとして提供するアプリケーションです。アプリの作成が完了したら、カスタマイズする前にこのアプリで利用するコンテンツを設定します。

コンテンツの登録と設定

App Cloud スタジオに入り、コンテンツセクションへ行きます。ビーンタウン用にコンテンツを設定したのと同様の手順で以下の6つのコンテンツフィードを新規に登録します(ビールビデオはコーヒービデオと同一の動画で名前だけを変えています)。

Name: ビールニュース

URL: http://brewery.ac-app.brightcove.jp/?feed=rss2

フィールド: title, link, pubDate, guid, content_encoded, enclosure_url にチェックを入れます

 

クーポン(コンテンツフィード)

Name: ビールクーポン

URL: http://brewery.ac-app.brightcove.jp/wp-content/uploads/2012/04/coupons.json

「要素確認を有効化します」 のチェックボックスをオフにします。

 

メニュー(コンテンツフィード)

Name: ビールメニュー

URL: http://brewery.ac-app.brightcove.jp/wp-content/uploads/2012/04/menu.json

「要素確認を有効化します」 のチェックボックスをオフにします。

 

ギャラリー(コンテンツフィード)

Name: ビールギャラリー

URL: http://brewery.ac-app.brightcove.jp/wp-content/uploads/2012/04/gallery.json

フィールド: すべてのフィールドのチェックボックスをオンにします。

 

ビデオ(Brightcove Video Cloud)

Name: ビールビデオ

Video Cloud 読み出しAPIトークン:AzQvrfqoiwNvwDOHQFKnWnmg_kwYrjIOhM2j5mPswlA. (最後のピリオドまで必要です)

開発プレイリスト:「プレイリストの管理」をクリックし、コーヒービデオを選択します。 

 

YouTube(コンテンツフィード)

Name: ビールYouTube

URL: https://gdata.youtube.com/feeds/api/playlists/{"playlistId":"92E2F27744E3DC5F"}?v=2

エントリー数の限度: 20

フィールド: id, updated, title, media_group_media_description, media_group_media_thumbnail, media_group_media_title, media_group_yt_duration_seconds, media_group_yt_videoid, yt_statistics_viewCount のチェックボックスをオンにします。
以上でコンテンツの新規登録は完了です。

コンテンツの設定が終了したら、ボストンビアアプリの編集画面に行き、各ビューのデータソースを設定します。ビーンタウン同様、ニュース、クーポン、メニュー、ギャラリー、ビデオの各ビューで先程設定したコンテンツを割り当てます。これで、ビーンタウンコーヒーアプリと同じテンプレートから作られ、異なるコンテンツを提供するアプリが出来ました。

しかし、TwitterのフィードはコーヒーのハッシュタグのTweetを表示したり、地図にはカフェの一覧が表示されたりしていますので、次にこの辺りをビール情報が表示されるようにカスタマイズしていきます。App Cloud スタジオのアプリセクションに行き、ボストンビアアプリの編集画面に行きます。ニュースビューに行くと、「blog 変更」の下に、「設定」、「スタイル」、「広告」などの項目があります。ここから設定をクリックします。この設定画面ではニュースビュー上部に表示されている2つのタイトル、Twitter のフィードのURLが変更できます。

 

試しに上から、

Blog-Title を お知らせ

Tweets-Title を #ビール

Twitter-Query を %23%E3%83%93%E3%83%BC%E3%83%AB

とそれぞれ値を変更してみましょう。

3番目の「%23%E3%83%93%E3%83%BC%E3%83%AB」はTwitterのAPIをつかってハッシュタグ#ビールを取得するための文字列で「ビール」がURLエンコードされたものです。各設定を変更すると即座にスタジオ内のプレビューに反映されます。QRコードからWorkshop アプリでプレビューをすると同じく設定が反映されていることが確認できます。

ニュースビューのスタイルも変更してみます。ニュースビューの「スタイル」をクリックします。Accent という項目が一つ表示されます。緑色四角をクリックするとカラーピッカーが表示されるので、#F4A605を指定します。今まで緑色になっていた「お知らせ」「#ビール」がオレンジ色のハイライトに変わります。Workshop アプリでもプレビューしてみてください。変更が確認できると思います。

 

次に地図の設定も変更してみます。地図ビューに入り、設定をクリックします。Place-Type をbar に変更します。これで、カフェではなく、近くのバーが検索対象になります。 

このように、テンプレートに予め設定しているデフォルトの値をアプリケーションごとに上書きすることができるだけでなく、App Cloud スタジオ内で様々な変更ができます。アプリが既にパブリッシュされていれば、変更はライブのアプリにも瞬時に適用されますので、既にダウンロードしているユーザへ新しいバージョンのアプリのダウンロードを強いることなく最新の状態をすぐに配信することができます。

App Cloudスタジオ内で変更できる各ビューの設定項目はテンプレートに含まれるマニフェストファイル (manifest.json) で指定することができますので、テンプレートの開発者はアプリ作成時に変更可能とする項目を自由に決めることができます。先程 App Cloud スタジオで変更したしたニュースビューの設定をみてみます。テキストエディタで template ディレクトリの manifest.json を開きます。manifest.json は JSON形式でテンプレートの設定が指定できるファイルです。"navigationTitle": "ニュース" のsettingsセクションには

            "navigationTitle": "ニュース",
            "navigationIcon": "img/nav-news.png",
            "uri": "html/news.html",
            "settings": [
                {
                    "name": "blog-title",
                    "type": "string",
                    "value": "ブログ"
                },
                {
                    "name": "tweets-title",
                    "type": "string",
                    "value": "#コーヒー"
                },
                {
                    "name": "twitter-query",
                    "type": "string",
                    "value": "%EF%BC%83%E3%82%B3%E3%83%BC%E3%83%92%E3%83%BC"
                }

blog-titletweets-titletwitter-query の3つの項目が並んでいます。この3つのブロッグがApp Cloudスタジオ内ニュースビューの「設定」画面で変更可能なプロパティです。デフォルトの値がそれぞれ「ブログ」「#コーヒー」「%EF%BC%83%E3%82%B3%E3%83%BC%E3%83%92%E3%83%BC」と指定されていますので、アプリを新規に作成した状態ではこの値が使われます。ここで指定するsettings 内の項目がApp Cloud スタジオ の各アプリであとから設定変更できる項目です。

同様に、"navigationTitle": "ニュース" のsettingsセクションでは

            "styles": [
                {
                    "name": "accent",
                    "type": "color",
                    "attribute": "background-color",
                    "value": "#99CC33"
                }
            ],

styles というセクションもあり、先程変更したアクセントカラーの指定があります。この設定はデフォルトで"#99CC33"が指定され緑色のアクセントカラーがデフォルトになっています。この style セクションの設定もアプリごとにApp Cloud スタジオであとから設定変更できる項目になっています。

このように、manifest.json に設定を指定することで、App Cloud スタジオ内で自動的に編集可能な項目として設定画面が作られますので、テンプレート開発者は各アプリごとに変更できる箇所、スタイル、データソースを自由に取り入れることが可能になります。HTML5/CSS3/JavaScript でクロスプラットフォームのネイティブアプリが開発出来るだけでなく、テンプレートとして、アプリ公開後カスタマイズ可能な設定項目やスタイルを柔軟に設定できるのも App Cloud がアプリ運用の負担を軽減する仕組みの一つです。