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

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