App Cloud アプリでスマホのローカルストレージを使う

 App Cloud SDK にはスマホのローカルストレージにデータをキャッシュするAPIが備わっています。アプリケーションの設定をローカルのキャッシュに保存し、アプリを再度立ち上げた時も前回の設定を引き継ぐことや、ブックマークのように読みたいコンテンツを一時的に保存しておくことが可能です。

今回はローカルキャッシュを使ったサンプルアプリケーション、リーディングリストを紹介します。このアプリケーションでは、Google News からRSSでニュースコンテンツを取得し表示します。ローカルキャッシュを使って読みたい記事を「あとで読むリスト」に保存しておける機能を実装しています。

とりあえずアプリを試してみたい方は、Brightcove App Cloud ワークショップから下記のQRコードを読み込むとリーディングリストアプリを体験できます。

 テンプレートをダウンロードし、自分の環境で動作を確認する手順は以下のとおりです。Githubからリーディングリストテンプレートのソースコードをダウンロードします。

ローカルのPCで動かしてみる

Githubからダウンロードした Zip ファイルをお使いのPCのウェブサーバのディレクトリに解凍します。ブラウザを立ち上げ、コピーしたディレクトリにある html/news.html を開きます。Google News から取得してきたニュースが表示されています。各記事のタイトルをクリックするとニュースの本文が表示されます。各記事の右横にある「保存」ボタンをクリックすると、「あとで読むリスト」に追加され、ボタンも「保存済!」へと表示が変わります。

 「あとで読むリスト」には保存された各記事が一覧で表示され、「削除」「すべて削除」ボタンで読み終わった記事をリストから取り除くことができます。

App Cloud で動かしてみる

ローカルPCで動作が確認できたら App Cloud にテンプレートをアップロードしてアプリを作成してみましょう。

1. App Cloud スタジオにログインします。http://appcloud.brightcove.com

2. コンテンツセクション兵器、以下のフィードをコンテンツフィードとして作成します。

名前: Google ニュース(日本語)

URL: http://news.google.co.jp/news?pz=1&cf=all&ned=us&hl=ja&output=rss

3. reading-list ディレクトリを Zip ファイルに圧縮します。

4. App Cloud スタジオのアプリセクションに行きます。

5. 「新規アプリの作成」のドロップダウンリストから「From ZIP」を選択し、#3で圧縮した Zip ファイルを選択します。

6. アプリの登録が完了したら右上の「アプリの編集」に進みます。

7. 「google-news 構成」をクリックし #2 で作成した Google ニュース(日本語)コンテンツを選択します。

8. これでアプリの登録とコンテンツデータソースの登録が完了です。プレビューのQRコードをクリックし、Workshop アプリで読み込めます。