その他

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では、コントローラーと、HTML要素を、

で結びつけています。コントローラーは、以下の図で示されているように、

を介してデータをDOMに渡しています。

 

 

 

 

 

 

 

1. FlickrControllerという名前の関数をコントローラーとして作成し、$scopeをこの関数に渡しました。$scopeを介して、DOMにデータを渡すことができます。DOMとコントローラーを、ng-controllerで結びつけています。

 

 

 

2. ボタンがクリックされると、$scope.fetchPhotos()が呼ばれます。

 

 

 

3. Flickrからデータを取得している間、ボタンにスピナーアニメーションが表示されます。

 

 

 

4. feed.items はFlickr APIから取得した配列です。

を使って、配列の全要素を表示します。

 

 

 

5.

を使って、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.



 

<<HTML

author img for asial

asial

前の記事へ

次の記事へ

一覧へ戻る
PAGE TOP