Asial Blog

Recruit! Asialで一緒に働きませんか?

OnsenUIを使って、Flickrアプリを5分で作ろう

カテゴリ :
Monaca
タグ :
onsenui
angularjs
flickr
Animation
HTML5
この記事は、英語版アシアルブログの翻訳記事です。
(原文はこちら

==============================

この記事では、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 フォルダーに作成し、以下のコードをコピーして貼り付けます。

  1. function FlickrController ($scope) {
  2.  
  3.     $scope.fetchPhotos = function(){
  4.         $scope.failed = false;        
  5.         $scope.isFetching = true;
  6.  
  7.         $.ajax({
  8.             url: "http://api.flickr.com/services/feeds/photos_public.gne?format=json",
  9.             dataType: "jsonp",
  10.             jsonpCallback: 'jsonFlickrFeed',            
  11.             success: function(feeds){
  12.                 $scope.$apply(function(){
  13.                     $scope.feeds = feeds;
  14.                     $scope.isFetching = false;
  15.                     $scope.failed = false;
  16.                 });
  17.             },
  18.             error: function(error){
  19.                 $scope.$apply(function(){
  20.                     $scope.failed = true;                                   
  21.                     $scope.isFetching = false;    
  22.                 });
  23.             }
  24.         });
  25.     };
  26. }

4. flickr.js を index.html で読み込む



index.html のタグ内に、以下の記述を追加します。

  1. <script src="flickr.js"></script>



5. page1.htmlを編集し、FlickrControllerが取得したデータを表示する



page1.html を開き、既存のコードを全て消去して、以下のコードに書き換えます。

  1. <div ng-controller="FlickrController">
  2.     <ons-list>
  3.         <ons-list-item class="center">                          
  4.                 <ons-button type="cta" should-spin="{{isFetching}}" ng-click="fetchPhotos()">Fetch Photos</ons-button>
  5.         </ons-list-item>
  6.  
  7.         <ons-list-item ng-animate="'zoom'" ng-show="failed">
  8.             Oops! looks like Flickr is down.
  9.         </ons-list-item>
  10.  
  11.         <ons-list-item ng-repeat="item in feeds.items">
  12.             <img width="100%" ng-src="{{item.media.m}}">
  13.         </ons-list-item>
  14.     </ons-list>
  15. </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

  1. <!doctype html>
  2. <html lang="en" ng-app="myApp">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  6.   <link rel="stylesheet" href="plugins/plugin-loader.css">     
  7.   <script type="text/javascript" src="plugins/plugin-loader.js"></script>
  8.  
  9.   <script src="flickr.js"></script>
  10.  
  11.   <script>
  12.     angular.module('myApp', ['onsen.directives']);
  13.  
  14.     document.addEventListener("deviceready", onDeviceReady, false);
  15.  
  16.     function onDeviceReady() {
  17.         // Now safe to use the Cordova API
  18.     }
  19.   </script>    
  20. </head>
  21.  
  22. <body>
  23.  
  24.   <ons-screen page="home_navigator.html"></ons-screen>
  25.  
  26. </body>
  27. </html>

home_navigator.html

  1. <ons-navigator title="Flickr" page="page1.html"></ons-navigator>

flickr.js

  1. function FlickrController ($scope) {
  2.  
  3.     $scope.fetchPhotos = function(){
  4.         $scope.failed = false;        
  5.         $scope.isFetching = true;
  6.  
  7.         $.ajax({
  8.             url: "http://api.flickr.com/services/feeds/photos_public.gne?format=json",
  9.             dataType: "jsonp",
  10.             jsonpCallback: 'jsonFlickrFeed',            
  11.             success: function(feeds){
  12.                 $scope.$apply(function(){
  13.                     $scope.feeds = feeds;
  14.                     $scope.isFetching = false;
  15.                     $scope.failed = false;
  16.                 });
  17.             },
  18.             error: function(error){
  19.                 $scope.$apply(function(){
  20.                     $scope.failed = true;                                   
  21.                     $scope.isFetching = false;    
  22.                 });
  23.             }
  24.         });
  25.     };
  26. }

page1.html

  1. <div ng-controller="FlickrController">
  2.     <ons-list>
  3.         <ons-list-item class="center">                          
  4.                 <ons-button type="cta" should-spin="{{isFetching}}" ng-click="fetchPhotos()">Fetch Photos</ons-button>
  5.         </ons-list-item>
  6.  
  7.         <ons-list-item ng-animate="'zoom'" ng-show="failed">
  8.             Oops! looks like Flickr is down.
  9.         </ons-list-item>
  10.  
  11.         <ons-list-item ng-repeat="item in feeds.items">
  12.             <img width="100%" ng-src="{{item.media.m}}">
  13.         </ons-list-item>
  14.  
  15.     </ons-list>
  16.  
  17. </div>