本格派エンジニアの工具箱

第34回 Titanium 2.0とAppcelerator Cloud Servicesを使ったモバイルアプリの実行

この記事を読むのに必要な時間:およそ 2 分

Titanium Studio側に戻って設定を続けましょう。ACSを利用するためには,プロジェクトにACS用のモジュール「ti.cloud」を読み込む必要があります。TiApp.xmlにはti.cloudをロードする設定が書き込まれているのですが,本稿執筆時点のバージョンではこのモジュールを自動では読み込んでくれないため,手動でプロジェクトのResourcesフォルダにコピーします。必要なファイルは「C:\Users\USERNAME \Appdata\Roaming\Titanium\modules\commonjs\ti.cloud\2.0.1\」フォルダ(⁠C:\Users\USERNAME\」の部分はご自分の環境のユーザフォルダのパスに置き換えてください)にある「ti.cloud.js」「packages.json」の2つです。

サンプルプロジェクト用のファイルは,同じ場所のexampleフォルダにあります。そこにある「app,js」ファイルと,⁠android」⁠⁠themes」⁠⁠windows」の3つのフォルダを,同じくプロジェクトのResourcesフォルダにコピーしましょう。この時点で,プロジェクトのファイル構成は図2.5のようになっているはずです。

図6 ACS版Kichen Sinkプロジェクトのファイル構成

図6 ACS版Kichen Sinkプロジェクトのファイル構成

app.jsを開いてみると,先頭部分に「var Cloud = require('ti.cloud');」という1行があり,ti.cloudモジュールのAPIを読み込んでいることが確認できます(図7)⁠これによって,変数Cloud経由でACSの各種機能を利用できるようになるわけです。

図7 ACS用のAPIを読み込む

図7 ACS用のAPIを読み込む

実際にAPIを呼び出しているコードは,windowsフォルダ以下の各JavaScript中で確認することができます。例えば,windows/users/login.jsは,ACSのユーザ管理機能を使ってログインを実施するサンプルコードです。ユーザ管理を行うクラスはCloud.Usersクラスで,そのlogin()メソッドによって図8のようにログインを実行しています。

図8 Userクラスでログインを実施

図8 Userクラスでログインを実施

APIの詳細はTitanium 2.0のAPIドキュメントを参照してください。

ACS版Kichen Sinkの実行

それでは,CloudKichenSinkアプリをAndroid端末またはAndroid Emuratorにインストールして実行してみましょう。最初の画面は図9のようになっています。

図9 Kichen Sinkを実行

図9 Kichen Sinkを実行

このサンプルではACSの様々な機能を試すことができますが,それらはユーザ認証機能と紐づいているので,まずはユーザ登録をしてみます。[Users]-Create User]と選択して,図10のように任意のユーザ名を登録します。

図10 ユーザの登録

図10 ユーザの登録

ユーザ登録をすると自動的にログイン状態になるので,そのまま今度は[Photos]-[Create Photo]で写真をアップロードしてみます。[Select Photo from Gallery]で端末に保存された任意の画像ファイルをクラウドストレージにアップロードできます。ストレージ上に保存されている写真の情報は[Photos]-[Query Photo]で図11のように確認できます。

図11 アップロードした写真の情報を確認

図11 アップロードした写真の情報を確認

ここで,WebブラウザからACSのMy Appsページのアプリ管理画面にアクセスしてみましょう。⁠Users」「Photos」の項目が「⁠1)⁠となっているはずです。そして「Photos」をクリックすると図12のようにアップロードした写真を確認することができます。

図12 クラウドストレージに保存したファイルはACSのアプリ管理ページからも確認できる

図12 クラウドストレージに保存したファイルはACSのアプリ管理ページからも確認できる

次回は,ACSを利用するコードの中身をもう少し詳しく見ていこうと思います。

著者プロフィール

杉山貴章(すぎやまたかあき)

ONGS Inc.所属のプログラマ兼テクニカルライター。雑誌,書籍,Webメディアで多数の著作をもつ。

著書