この記事は、英語版アシアルブログの翻訳記事です。
（原文はこちら）
==============================
この記事では、Flickr APIを利用して写真を表示するアプリを、HTML5 モバイル UIフレームワーク・OnsenUIを利用して作成します。
さらに、ボタンのスピナーアニメーションを使うことで、アプリに生き生きとした見た目を与えます。
今回作成するのは以下のアプリです。実際に動くので、触ってみてください。
![]()
![]()
プロジェクトの名前を「Flickr」とし、IDEを起動します。
![]()
OnsenUI最小限のテンプレートには、page1.htmlとpage2.htmlを行き来するナビゲーターコンポーネントが含まれています。
![]()
今回作成するのは1ページのアプリなので、page2.htmlは必要ありません。
page2.htmlを右クリックし、「削除」をクリックします。
home_navigator.html を開き、 title="Page 1" となっている部分をを title="Flickr" に変更します。
flickr.js という名前のファイルを www フォルダーに作成し、以下のコードをコピーして貼り付けます。
index.html のタグ内に、以下の記述を追加します。
![]()
page1.html を開き、既存のコードを全て消去して、以下のコードに書き換えます。
ここまでで、コードの作成は終了です。Monaca IDEの「プレビュー」機能やMonaca Debuggerで、動作確認してみましょう。
OnsenUIは、AngularJSをベースに作られています。AngularJSでは、コントローラーと、HTML要素を、ng-controllerで結びつけています。コントローラーは、以下の図で示されているように、$scopeオブジェクトを介してデータをDOMに渡しています。
![]()
1. FlickrControllerという名前の関数をコントローラーとして作成し、$scopeをこの関数に渡しました。$scopeを介して、DOMにデータを渡すことができます。DOMとコントローラーを、ng-controllerで結びつけています。
2. ボタンがクリックされると、$scope.fetchPhotos()が呼ばれます。
3. Flickrからデータを取得している間、ボタンにスピナーアニメーションが表示されます。
4. feed.items はFlickr APIから取得した配列です。ng-repeatを使って、配列の全要素を表示します。
5. ng-showを使って、APIの呼び出しが失敗した際のエラーメッセージを表示しています。
OnsenUIを使うと、スムーズなアニメーション等のリッチなUIを備えたアプリを、簡単に作ることができます。
ng-controllerによって、データを簡単にDOMに渡すことができます。
index.html
home_navigator.html
flickr.js
page1.html
（原文はこちら）
==============================
この記事では、Flickr APIを利用して写真を表示するアプリを、HTML5 モバイル UIフレームワーク・OnsenUIを利用して作成します。
さらに、ボタンのスピナーアニメーションを使うことで、アプリに生き生きとした見た目を与えます。
今回作成するのは以下のアプリです。実際に動くので、触ってみてください。
1. プロジェクトを作成する
1. Monacaのダッシュボードで、「新しいプロジェクト」をクリックします。
2. 「Onsen UI最小限のテンプレート」を選択します。
プロジェクトの名前を「Flickr」とし、IDEを起動します。
OnsenUI最小限のテンプレートには、page1.htmlとpage2.htmlを行き来するナビゲーターコンポーネントが含まれています。
2. コードを書く
1. page2.htmlを削除します。
今回作成するのは1ページのアプリなので、page2.htmlは必要ありません。
page2.htmlを右クリックし、「削除」をクリックします。
2. ナビゲーターツールバーのタイトルを変更する
home_navigator.html を開き、 title="Page 1" となっている部分をを title="Flickr" に変更します。
3. 取得したデータを操作するコントローラーを作成する
flickr.js という名前のファイルを www フォルダーに作成し、以下のコードをコピーして貼り付けます。
- function
FlickrController ($scope) { $scope.fetchPhotos = function(){ $scope.failed = false; $scope.isFetching = true; $.ajax({ url: "http://api.flickr.com/services/feeds/photos_public.gne?format=json", dataType: "jsonp", jsonpCallback: 'jsonFlickrFeed', success: function(feeds){ $scope.$apply(function(){ $scope.feeds = feeds; $scope.isFetching = false; $scope.failed = false; }); }, error: function(error){ $scope.$apply(function(){ $scope.failed = true; $scope.isFetching = false; }); } }); }; - }
4. flickr.js を index.html で読み込む
index.html のタグ内に、以下の記述を追加します。
- <script
src="flickr.js"></script>
5. page1.htmlを編集し、FlickrControllerが取得したデータを表示する
page1.html を開き、既存のコードを全て消去して、以下のコードに書き換えます。
- <div
ng-controller="FlickrController"> <ons-list> <ons-list-item class="center"> <ons-button type="cta" should-spin="{{isFetching}}" ng-click="fetchPhotos()">Fetch Photos</ons-button> </ons-list-item> <ons-list-item ng-animate="'zoom'" ng-show="failed"> Oops! looks like Flickr is down. </ons-list-item> <ons-list-item ng-repeat="item in feeds.items"> <img width="100%" ng-src="{{item.media.m}}"> </ons-list-item> </ons-list> - </div>
6. 動作確認
ここまでで、コードの作成は終了です。Monaca IDEの「プレビュー」機能やMonaca Debuggerで、動作確認してみましょう。
7. FlickrControllerとpage1.htmlの結びつき
OnsenUIは、AngularJSをベースに作られています。AngularJSでは、コントローラーと、HTML要素を、ng-controllerで結びつけています。コントローラーは、以下の図で示されているように、$scopeオブジェクトを介してデータをDOMに渡しています。
1. FlickrControllerという名前の関数をコントローラーとして作成し、$scopeをこの関数に渡しました。$scopeを介して、DOMにデータを渡すことができます。DOMとコントローラーを、ng-controllerで結びつけています。
2. ボタンがクリックされると、$scope.fetchPhotos()が呼ばれます。
3. Flickrからデータを取得している間、ボタンにスピナーアニメーションが表示されます。
4. feed.items はFlickr APIから取得した配列です。ng-repeatを使って、配列の全要素を表示します。
5. ng-showを使って、APIの呼び出しが失敗した際のエラーメッセージを表示しています。
3. まとめ
OnsenUIを使うと、スムーズなアニメーション等のリッチなUIを備えたアプリを、簡単に作ることができます。
ng-controllerによって、データを簡単にDOMに渡すことができます。
4. ソースコード全文
index.html
- <!doctype
html> - <html
lang="en" ng-app="myApp"> - <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="plugins/plugin-loader.css"> <script type="text/javascript" src="plugins/plugin-loader.js"></script> <script src="flickr.js"></script> <script> angular.module('myApp', ['onsen.directives']); document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { // Now safe to use the Cordova API } </script> - </head>
- <body>
<ons-screen page="home_navigator.html"></ons-screen> - </body>
- </html>
home_navigator.html
- <ons-navigator
title="Flickr" page="page1.html"></ons-navigator>
flickr.js
- function
FlickrController ($scope) { $scope.fetchPhotos = function(){ $scope.failed = false; $scope.isFetching = true; $.ajax({ url: "http://api.flickr.com/services/feeds/photos_public.gne?format=json", dataType: "jsonp", jsonpCallback: 'jsonFlickrFeed', success: function(feeds){ $scope.$apply(function(){ $scope.feeds = feeds; $scope.isFetching = false; $scope.failed = false; }); }, error: function(error){ $scope.$apply(function(){ $scope.failed = true; $scope.isFetching = false; }); } }); }; - }
page1.html
- <div
ng-controller="FlickrController"> <ons-list> <ons-list-item class="center"> <ons-button type="cta" should-spin="{{isFetching}}" ng-click="fetchPhotos()">Fetch Photos</ons-button> </ons-list-item> <ons-list-item ng-animate="'zoom'" ng-show="failed"> Oops! looks like Flickr is down. </ons-list-item> <ons-list-item ng-repeat="item in feeds.items"> <img width="100%" ng-src="{{item.media.m}}"> </ons-list-item> </ons-list> - </div>