HTML5Tweetこの記事は、英語版アシアルブログの翻訳記事です。UIフレームワーク・OnsenUIを利用して作成します。ボタンのスピナーアニメーションを使うことで、アプリに生き生きとした見た目を与えます。今回作成するのは以下のアプリです。実際に動くので、触ってみてください。Monacaのダッシュボードで、「新しいプロジェクト」をクリックします。UI最小限のテンプレート」を選択します。プロジェクトの名前を「Flickr」とし、IDEを起動します。OnsenUI最小限のテンプレートには、page1.htmlとpage2.htmlを行き来するナビゲーターコンポーネントが含まれています。page2.htmlを削除します。今回作成するのは1ページのアプリなので、page2.htmlは必要ありません。page2.htmlを右クリックし、「削除」をクリックします。フォルダーに作成し、以下のコードをコピーして貼り付けます。タグ内に、以下の記述を追加します。開き、既存のコードを全て消去して、以下のコードに書き換えます。動作確認ここまでで、コードの作成は終了です。Debuggerで、動作確認してみましょう。FlickrControllerとpage1.htmlの結びつきOnsenUIは、AngularJSをベースに作られています。AngularJSでは、コントローラーと、HTML要素を、ng-controllerで結びつけています。コントローラーは、以下の図で示されているように、$scopeオブジェクトを介してデータをDOMに渡しています。FlickrControllerという名前の関数をコントローラーとして作成し、$scopeをこの関数に渡しました。$scopeを介して、DOMにデータを渡すことができます。DOMとコントローラーを、ng-controllerで結びつけています。ボタンがクリックされると、$scope.fetchPhotos()が呼ばれます。Flickrからデータを取得している間、ボタンにスピナーアニメーションが表示されます。APIから取得した配列です。ng-repeatを使って、配列の全要素を表示します。ng-showを使って、APIの呼び出しが失敗した際のエラーメッセージを表示しています。まとめOnsenUIを使うと、スムーズなアニメーション等のリッチなUIを備えたアプリを、簡単に作ることができます。ng-controllerによって、データを簡単にDOMに渡すことができます。byスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。