アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

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

この記事は、英語版アシアルブログの翻訳記事です。
(原文はこちら

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

この記事では、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

>>HTML



Fetch Photos



Oops! looks like Flickr is down.