ビーンタウンリファレンスアプリ

 App Cloud の SDK には API の使い方を解説するための 4 つのサンプルアプリケーションが同梱されています。より実際のアプリに近いサンプルとして、ビーンタウンというリファレンスアプリケーションを公開しました。ビーンタウンアプリは ビーンタウンコーヒー ウェブサイト (http://coffee.ac-app.brightcove.jp/) からニュースやクーポン情報などのコンテンツを取得するだけでなく、Brightcove Video Cloud や YouTube の動画コンテンツや Twitter, Google と連携をしコンテンツをアプリの中で提供しています。

 

ビーンタウンアプリはSDK 同梱のサンプルアプリより、実践に近いアプリを想定して作成されたテンプレートです。テンプレートのローカルPCでの実行からアプリの作成、カスタマイズまで以下の要素がお試しいただけます。テンプレートのソースコードも公開していますので、アプリ開発の最初にひな形としてお使いいただいたり、コードのカスタマイズして動作を確認いただけます。ソースコードをダウンロードせずにこのリファレンスアプリをプレビューしてみたい方は、このエントリーの最下部にあるQRコードをデバイスのWorkshop アプリで読み込むと、私のアカウントで作成したビーンタウンコーヒーのアプリをスマートフォンで動作確認することができます。

  • ブログコンテンツ(RSSフィード)をアプリのコンテンツとして登録、連携する
  • QRコードの読込
  • ローカルキャッシュを使ったデバイスへのデータの保存と読込
  • Twitter フィードとの連携
  • Google Maps/Places API との連携
  • Video Cloud のプレイリスト動画との連携
  • 単一のテンプレートから2つのアプリケーションを作成

また、リファレンスアプリケーションを App Cloud スタジオでカスタマイズいただけますので、タイトルやスタイルの変更、広告の配信、データソースの変更やカスタマイズ等を体験いただけます。

ダウンロード

ビーンタウンのアプリケーションは Github で公開しています。下記のリンクからリファンレスアプリケーションをダウンロードしていただけます。

Github ビーンタウンリファレンスアプリリポジトリ (https://github.com/brightcovekk/beantown)

ローカルマシンで動作させる方法

  1. Workshop アプリをスマートフォンやタブレットにインストールが必要な場合は iTunes App Store や Android Market からダウンロードし、お手元のデバイスに予めインストールしておきましょう。各プラットフォーム 用 Workshop アプリのダウンロードはこちらです。
    iOS 用 App Cloud Workshop アプリ
    Android 用 App Cloud Workshop アプリ
  2. ビーンタウンのリファレンスアプリケーションを Github からダウンロード&解凍し、PCのローカルウェブサーバに "template" ディレクトリをコピーします。
  3. ChromeもしくはSafariからscan.html ファイルを開きます。この際ファイルをダブルクリックするのではなく、ローカルネットワークから http プロトコルで開くことが重要です。ブラウザのアドレスバーから  http://192.168.1.100/~[user]/beantown/scan.html のように、http:// で始まるURLを入力してscan.html ファイルをリクエストします。localhost や 127.0.0.1 は使用しないでください。
  4. スマートフォンやタブレットをPCと同じローカルネットワークに接続します。
  5. Workshop アプリを起動し、カメラアイコンをクリックし、scan.html に表示されているQRコードをスキャンします。
  6. ビーンタウンテンプレートがWorkshop アプリにロードされます。ローカルPCのファイルを修正、編集後、メニュータブ(Androidではメニューは画面下部、iOSでは画面上部)をスライドし、「更新」をクリックすると最新の変更がデバイスでも確認できます。マニフェストファイル(manifest.json)に変更を加えた場合には、「更新」ではなく、「再起動」を選択しWorkshop アプリを再起動しましょう。

クロスドメインセキュリティのため、App Cloud SDK の bc.device.fetchContentsOfURL() メソッドはPC上のウェブブラウザでは動作しません。この API をウェブブラウザ上で実行するためには Chrome ブラウザを --disable-web-security オプションを付けて起動する必要があります。Windows、Mac OSX での起動の方法は以下のとおりです。 

Windows

chrome.exe --disable-web-security

(chrome.exe までのフルパスを指定する必要がある場合は、Chrome.exe の場所をドライブから指定してください) 

Mac OSX

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security

App Cloud スタジオ で動作させる方法

ローカルPCで確認ができたら、次は App Cloud スタジオにテンプレートをアップロードし、このテンプレートからアプリを作成し、プレビューしてみましょう。先程使った "template" ディレクトリを Zip ファイルに圧縮し、App Cloud スタジオにビーンタウンテンプレートをアップロードします。アップロードが完了するとテンプレートセクションに新しいテンプレート「ビーンタウンコーヒーテンプレート」が作成されます。アプリを作成する前に、以下ののデータソース、フィードをコンテンツとして予め登録する必要があります。App Cloud スタジオにログインし、コンテンツメニューに行き、下記のコンテンツを新規に作成します。

ビーンタウンアプリ用コンテンツ

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

Name: コーヒーニュース

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

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

 

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

Name: コーヒークーポン

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

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

 

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

Name: コーヒーメニュー

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

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

 

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

Name: コーヒーギャラリー

URL: http://coffee.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":"02ACC75C731FA9EA"}?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 のチェックボックスをオンにします。
以上でコンテンツの新規登録は完了です。

App Cloud スタジオでテンプレートセクションに戻り、先程登録した「ビーンタウンコーヒーテンプレート」から新しいアプリを作成します。テンプレートセクションの「ビーンタウンコーヒーテンプレート」をクリックし、「アプリの作成」ボタンをクリックします。新しいアプリには「ビーンタウンコーヒー」という名前をつけます。新しいアプリが作成され、プレビュー画面に移行します。ニュース、クーポン、メニュー、ギャラリー、ビデオのビューで先程設定したコンテンツフィードを割り当てます。

プレビュー画面右側にある縦に並んだメニューからニュースをクリックしニュースビューの設定を開きます。「blog構成」をクリックし、先程作成したコーヒーニュースコンテンツをセレクトボックスから選び、「選択」をクリックします。RSSフィードの各フィールドのマッピングが表示されますのでそのまま「フィードの保存」をクリックします。クーポン、メニュー、ギャラリー、ビデオビューでも同様に利用するデータソースを各ビューの設定画面より指定します。

設定が完了したら、Workshop アプリでプレビューしてみます。App Cloud スタジオ内のビーンタウンコーヒーアプリのプレビューで「QRコード」をクリックし、表示されたQRコードを Workshop アプリで読み込みます。

(↑のQRコードを読み込むと私のアカウントで作成したビーンタウンコーヒーのアプリがプレビューできます。)