ネットワーク通信に対応した写真アルバムアプリを作ろう！

Monacaでネット通信をしてWebサービスと連携する

これまで作成してきたアプリは、すべてのコードが端末内に配置されており、インターネット接続がなくても動作するものでした。今回は、いよいよモバイルアプリの真骨頂であるインターネット通信を行うことで、外部にあるデータを用いるアプリを開発します。

※ Android版は現時点で最新であるMonacaデバッガー1.7.1をダウンロード、もしくはビルドしてお試しください。

題材として選んだのが写真アルバムです。本アプリでは、起動時にFlickr（※）のAPIに接続し、最新の投稿写真を取得して表示します。スマホらしく、スワイプしたら横スクロールして写真を切り替えられるようにしましょう。

• ※ Flickrは米Yahoo!社が提供する写真共有サイトです。今回はFlickrが公式に提供するAPIを用いて写真の取得と表示を行います。

事前準備

Monacaの会員登録が済んでいない方はMonacaのWebサイトからサインアップを行ってください。現在Monacaは無料で提供されており、ブラウザーとスマホ端末さえあれば、誰でもアプリ開発を始められます。

会員登録が完了したら、ダッシュボード画面から新しいプロジェクトを作成します。スケルトンは「最小限のプロジェクト」を選択してください。名前（「写真アルバムアプリ」など）と説明文を入力しプロジェクトが作成できたら、「IDEを起動」でMonaca IDEを起動します。

起動すると、ブラウザー内にIDE画面が表示されます。正しく起動しない場合は、最新版のGoogle ChromeやSafariブラウザーをインストールして試してください。

またMonacaの開発では、実機上で動作を確認するための「Monacaデバッガー」も必要です。Google PlayやApp Storeから無料でダウンロードすることができます。

手順1：画像パーツをアップロードする

今回のアプリでは、画面の背景に画像を利用しています。利用する画像パーツを下記のリンクからダウンロードし、デスクトップ上で解凍してください。

ダウンロード：プロジェクトで利用する画像ファイル一式

解凍したファイルは、Monaca IDEを通じてプロジェクトにアップロードします。まずは、アップロード先であるimagesフォルダーをwwwフォルダー直下に作成してください。具体的には、Monaca IDE左側のツリーにて、wwwフォルダーを右クリックし「新規フォルダー」をクリックします。次に、作成するフォルダー名として"images"と入力し、新しいフォルダーを作成します。

次に、作成された「images」フォルダーを右クリックし、「アップロード...」をクリックします。画面の中央に、アップロードダイアログが表示されると思います。アップロード先が「images」フォルダーになっていることを確認し、先ほど解凍した2つの画像ファイルをドラッグ＆ドロップで転送してください。

画面2：ファイルのアップロードダイアログ

ファイルアップロードが終了したら、ファイルのツリーは下記の画面のようになるはずです。

画面3：ファイルアップロード後のファイル一覧

手順2：jQueryを有効にし、bxSliderプラグインを追加する

本アプリではスワイプ操作による写真表示を行うために、jQueryとjQueryプラグインであるbxSlider（※）を使用します。本連載の第2回で説明した通り、Monacaではプラグインという仕組みを通じてjQueryなどの著名なJavaScriptライブラリーを手軽にプロジェクトに組み込むことができます。

• ※ bxslider.com。フリーソフトです。

まずは「ファイル」メニューから「プラグイン設定...」を選択します。Monacaアプリから参照できるプラグインが一覧で表示されますので、「jQuery」と表示されている部分をチェックしてください。

今回は執筆時点での最新版である jquery.js (1.9) を選択しましたが、今回のサンプルを試す範囲ではどのバージョンを選んでも動作に支障はありません。画面4のように設定を行ったら、「保存する」をクリックして保存してください。

画面4：MonacaプラグインでjQueryを有効にする

次に、jQueryと共に利用するbxSliderを組み込みます。こちらはMonacaのプラグインとしては提供されていないため、公式サイトから「Download」をクリックし、プラグイン本体をダウンロードしてください。解凍したなかに含まれる「jquery.bxslider.js」を「js」フォルダーにアップロードします。先ほどの画像ファイルのアップロード手順と同様に、wwwフォルダー直下にjsフォルダーを作成し、そこにjquery.bxslider.jsをアップロードしてください。

手順3：UI定義ファイル（index.ui）でツールバーを描画する

続いて、Monacaの特徴の1つであるネイティブコンポーネント機能を用います。これは、ツールバーやタブバーなどのスマホアプリでよく用いられる画面パーツを、OSのネイティブ機能を用いて描画するものです。

今回は、画面上部に「Monaca Photo Viewer」と表示されたツールバーを表示します。実際にはボタンを配置したり、様々な装飾を行うことも可能です。ネイティブコンポーネントを用いるには、UI定義ファイルという特別なファイルを記述します。UI定義ファイルは、HTMLファイルと同名のファイルとし、拡張子を「.ui」にしたファイル名を持ちます。たとえば今回の例では、index.htmlに対するUI定義ファイルはindex.uiとなります。

早速wwwフォルダー上で右クリックし、「新しいファイル」をクリックしてください。ファイル名の入力にて、先述の通りindex.uiと入力し、新しいUI定義ファイルを作成します。作成直後はサンプルから作られたデータが表示されますので、この内容をすべて削除し、下記のように書き換えてください。

なおUI定義ファイルの確認を行うためには、Monacaデバッガーで実際にプロジェクトを実行してみる必要があります。画面５のような画面が表示されたら成功です。

画面5：ネイティブコンポーネントでツールバーを描画した例

手順4：index.htmlを修正する

ここから先は、いつも通りHTML、JavaScript、CSSでアプリを作成していきます。まずは、index.htmlを修正して、下記のコードを貼り付けて保存してください。

コードの説明は後ほど行います。まずは、必要なプログラムを書いて行きましょう。

手順5：main.jsを作成する

今回のプログラムではJavaScriptのコードが少し長くなるため、index.htmlに直接記述するのではなくjs/main.jsというファイルに分けることにします。そのため、jsフォルダー内にmain.jsという名前で新しいファイルを作成してください。main.jsでは、下記の内容を貼り付けて保存します。

手順6：style.cssを作成する

次は本アプリが用いるCSSファイルを作成します。こちらもindex.html内に記述するのではなく、外部ファイルとして参照します。まずは、wwwフォルダー直下に新しくcssフォルダーを作成し、そのなかにstyle.cssという名前のファイルを作成してください。style.cssには下記の記述を行い、保存します。

現在のフォルダ構成は以下のようになっています。

画面6：現時点でのフォルダ構成

手順7：アプリの設定ファイルを編集する

最後にアプリの向きを縦方向に固定するため設定ファイルを編集します。アプリの挙動の設定を変更するにはAndroidManifest.xmlファイル(Androidアプリ)とMonacaSkeleton-Info.plistファイル(iOSアプリ)を編集する必要があります。画面7のように両ファイルはそれぞれAndroidフォルダ、iOSフォルダ中に存在します。

画面7：Android、iOS設定ファイルの位置

ではAndroidManifest.xmlファイルを編集しましょう。Androidフォルダ中にあるAndroidManifest.xmlファイルをダブルクリックしてファイルを開きます。そして要素のandroid:screenOrientation="unspecified"となっている箇所を全てandroid:screenOrientation="portrait"に変更して保存します。

screenOrientationはAndroidアプリの画面の方向を指定するものであり、”portrait”という値をscreenOrientationに指定することにより端末の上部を上にして画面を縦表示に固定させることができます。

今度はiOSアプリの画面の向きを縦方向に固定しましょう。iOSフォルダ中のMonacaSkeleton-Info.plistをダブルクリックします。MonacaSkeleton-Info.plist中のUISupportedInterfaceOrientationsとUISupportedInterfaceOrientations~ipadの値を以下のように編集して保存します。

iOSの場合はUISupportedInterfaceOrientationsでアプリ画面の表示方向を指定します。iPadの画面の表示方向を設定するにはUISupportedInterfaceOrientations~ipadに値を設定します。UIInterfaceOrientationPortraitのみを指定することによって、ホームボタンを下にして縦表示する表示方法のみを許可します。これでiOSアプリの画面を縦方向に固定できます。

下記より画面の表示方向を設定済みのAndroidManifest.xmlおよび、MonacaSkeleton-Info.plistをダウンロードすることができます。参考としてお使いください。

ダウンロード：AndroidManifest.xml MonacaSkeleton-Info.plist

お疲れ様です、これで手順は完了です。

ではMonacaデバッガーで実行してみましょう。実行するとFlickrのWebサーバーに通信を行い、取得した画像からアルバムを表示します。ちなみにMonaca IDEにはプレビュー機能もありますが、本アプリはネットワーク通信を用いているためプレビュー機能を利用することができません。

プログラムコードのポイント解説

FlickrのAPIを使って最新の写真を取得する

このプログラムでは、Flickrが提供するAPIを用いて画像データの取得を行っています。詳細はFlickr The App Gardenに記述されていますが、公開されている写真を取得するためのURLが提供されており、そのURLにアクセスしてデータを取得します。

詳細はリファレンス・マニュアルに記述されていますが、今回は下記のURLにアクセスすることで、最新のデータをJSON形式で取得しています。

http://api.flickr.com/services/feeds/photos_public.gne?format=json

このURLはindex.htmlのscriptタグにて記述されています。そのため、アプリ実行直後に通信が行われ、データの読み込みが行われます。なお、本APIはクロスドメイン制約を回避するためにJSONP形式となっており、実際には下記のようなデータが返却されます。

このデータの特徴は、jsonFlickrFeedという関数の引数に実際のデータが渡されていることです。この関数をアプリ側に用意してあげることで、その第1引数にAPIの結果が渡される仕組みとなります。

では受け取るコードを見てみましょう。main.jsの6行目に記述された、jsonFlickrFeed関数がまさに該当する部分となります。APIの結果をresultという変数で受け取り、含まれる写真URLをimagesという配列に追加していきます。そして、setTimeout関数を用いて1秒後にdisplayPicture関数を呼び出しています（①）。

画像を追加し、スライダーを設定する

次に、displayPicture関数を見てみましょう。まず#containerで参照されたアルバム表示部分を非表示に（①）した後、$ul変数を作成しています（②）。④にて、$ul変数に対し、写真へのパスがセットされたli要素が追加されていきます。最後に、ページに要素を追加します（⑤）。

$ul変数に対してスライダーを適用するため，⑥にてスライダーの設定を行います。この設定の具体的な意味についてはbxSliderのリファレンスに記述されています。ここでは、開始時に自動的にアニメーションを開始し、画面遷移のスピードなどを設定しています。

ここまでで初期化手順は完了していますので、⑦では読み込み画像（スピナー）を非表示にし、アルバムの表示を行います。

ネイティブコンポーネントでネイティブのツールバーを描画する

今回のサンプルでは、Monacaの大きな特徴の1つであるネイティブコンポーネントを使用しています。ネイティブコンポーネントを用いると、OS標準のUIパーツを利用し、高品質な画面を描画できます。

先述のように、ネイティブコンポーネントの描画にはUI定義ファイルと呼ばれる専用のファイル形式を利用します。このUI定義ファイルはJSON形式のテキストファイルでMonacaのリファレンスに詳しく記述されています。

今回使用した、トップページに対するUI定義ファイル（index.ui）を再掲します。

今回の例では、画面上部にツールバーを配置し、そのタイトルとして「Monaca Photo Viewer」としています。また、背景色は灰色、タイトルの文字色を白色に指定しています。

最後に

今回はネットワーク通信を用いて、Flickrの写真をアルバム形式で表示するアプリの作成を行いました。その過程でJavaScriptやネイティブコンポーネント、jQueryプラグインなどの技術を用いていますので、本内容は様々なアプリに応用することが可能です。

Monacaでは簡単なお試しから本格的な開発まで、幅広いアプリ制作ニーズに対応できます。次回もサンプルアプリの制作を通じて、テクニックの紹介をしていきます。