Monaca公式ガイドブック発売記念全国キャラバン

①ブラウザで開発 ②実機でデバッグ ③ブラウザでビルド

WebベースのIDE デバッガービルドシステム
クラウド
ソースコードは
クラウド上にターゲットOSに
合わせた環境で
アプリをビルド

•
–
•
•
–
•
•
Androidアプリ

•
– モバイル用UIを簡単に構築することができるAngularJSベースのフレームワーク
• 新しく追加された機能
– Pull to Refresh、無限リスト、他

•
<body>
<div id="heisei">
今年は平成<span id="heisei-year"></span>年です
</div>
<div id="ad">
A.D. <span id="year"></span>
</div>
</body>

• document.getElementById()でDOMを取得できます
• textContentプロパティに値を代入することで表示内容を変更できます
// 得られた数値をHTML に反映
document.getElementById('heisei-year').textContent =
heiseiYear;
document.getElementById('year').textContent =
fullYear;

• document.addEventListener()でイベントをリッスン(監視)します
– 第一引数でイベント'DOMContentLoaded'を指定
• このイベントはブラウザがHTMLの解釈を終了したタイミング（画像のロードは除く）を表します
– 第二引数で処理させたい関数を指定
• 今回は無名関数を利用して、直接処理を記述しています
document.addEventListener('DOMContentLoaded',
function() {

• Dateオブジェクトは日付を扱うためのJavaScript組み込みオブジェクトです
– getFullYear()メソッドで現在の西暦「2015」を取得します
• データを型変換する場合はNumber()やString()を利用します
– 文字列型にすることで文字操作用のメソッド(substr()等)が利用できます
– 「＋」は文字列連結も担っているため、Number()による数値型変換を行っています
// 今の日付を得る
var nowDate = new Date();
// 西暦を得る
var fullYear = nowDate.getFullYear();
// 数値の西暦を文字列に変換して、そこから下2桁の文字列を得る
var shortYear = String(fullYear).substr(2, 2);
// 西暦の下2桁の文字列を数値に変換して、それに12を足す
var heiseiYear = Number(shortYear) + 12;

• $(function() {});
– イベント'DOMContentLoaded'と同じ意味です
• 関数や無名関数として記述した処理を、ブラウザがHTMLの解釈を終了したタイミングで実行します
• $('.count-button').on("touchend", increment);
– class名が'count-button'の要素がタッチされたタイミングでincrement関数を実行します
$(function() {
$('.count-button').on("touchend", increment);
$('.reset-button').on("touchend", reset);
update();
});

• var count = 0;の有効範囲
– JavaScriptではグローバルスコープをローカルスコープから参照することが出来ます
• count++
– 値を一つ増やす（インクリメント）処理です
<script>
var count = 0;
function increment() {
count++;
update();
}

• confirm('カウンターをリセットしますか?')
– 確認のプロンプトを表示します
• 利用者の意思を確認した結果が真偽値で返ってくるのでif文などで活用できます
function reset() {
if (count > 0 && confirm('カウンターをリセットしま
すか?')) {
count = 0;
update();
}
}

• 変数strに文字列として4ケタのカウンターを用意します
– 例：変数countが123の場合
• 「0000」＋「123」＝「0000123」;
• 「0000123」.substring(3,7) ＝「0123」
• 繰り返し処理(for)で1ケタづつ画像を差し替えます
function update() {
var str = '0000' + count;
str = str.substring(str.length - 4, str.length);
var digits = $('.counter-digit');
for (var i = 0; i < str.length; i++) {
digits.get(i).src = 'img/no_0' + str[i] + '.png'
}
}

• ons.bootstrap()
– AngularJSの初期化やOnsen UIの読み込みを行います
• ons.disableAutoStatusBarFill()
– iOS7以上において画面上部に用意されるステータスバー用の空白を無効化しま
す
<script>
ons.bootstrap();
ons.disableAutoStatusBarFill();
</script>

• ons-*
– onsから始まるタグがOnsen UIのコンポーネントです
• ons-navigator
– ページナビゲーションを管理するためのコンポーネントです
• page属性
– 初期化時に表示するページを指定します
• var属性
– このコンポーネントを参照するための変数を作成します
<body>
<ons-navigator var="myNavigator" page="page1.html">
</ons-navigator>
</body>

• ons-page
– ページという単位のコンテナ（入れ物）を作成するコンポーネントです
• ons-toolbar
– ツールバーを作成するコンポーネントです
• ons-button
– ボタンを作成するコンポーネントです
<ons-page>
<ons-toolbar>
<div class="center">Navigator</div>
</ons-toolbar>
<div style="text-align: center">
<br>
<ons-button onclick="myNavigator.pushPage('page2.html')">Push Page 2</ons-button>
</div>
</ons-page>

• <ons-navigator page="list.html" var="app.navi">
– app.naviというオブジェクトとプロパティを作成しています
• <ons-template>
– 別ファイルを作成せずにページファイルを作成するためのコンポーネントです
– id属性
• テンプレートにファイル名を定義します
<ons-navigator page="list.html" var="app.navi"></ons-navigator>
<ons-template id="list.html">
<ons-page id="list-page">
<ons-toolbar>
<div class="center">Master Details</div>
</ons-toolbar>

• ons-listによるリスト表現
<ons-list>
<ons-list-item modifier="chevron" class="item">
<ons-row>
<ons-col width="60px">
<div class="item-thum"></div>
</ons-col>
<ons-col>
<header>
<span class="item-title">Item Title</span>
<span class="item-label">4h</span>
</header>
<p class="item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>

• <ons-template id="detail.html">
– detail.htmlというページを定義しています
• <ons-back-button>Back</ons-back-button><
– 戻るボタンを作成するコンポーネントです
<ons-template id="detail.html">
<ons-page id="detail-page">
<ons-toolbar>
<div class="left"><ons-back-button>Back</ons-back-button></div>
<div class="center">Details</div>
</ons-toolbar>

• 即時関数の仕組みを利用し、初期化処理を記述しています
– strictモードでの実行
– 変数currentItemの宣言
– detail-pageとlist-pageの初期化時の処理を定義
(function(){
'use strict';
var currentItem = {};
$(document).on('pageinit', '#detail-page', function() {
…
}
$(document).on('pageinit', '#list-page', function() {
…
}
})();

• detail-pageの初期化処理
– 変数currentItemの値を元にDOMの値を書き換える
var currentItem = {};
$(document).on('pageinit', '#detail-page', function() {
$('.item-title', this).text(currentItem.title);
$('.item-desc', this).text(currentItem.desc);
$('.item-label', this).text(currentItem.label);
});

• list-pageの初期化処理
– クラスitemが設定された要素にイベントリスナを設定する
• currentItemに値をセットする
• app.navi(<ons-navigator>)を参照しpushPage('detail.html')で詳細ページをプッシュする
$(document).on('pageinit', '#list-page', function() {
$('.item', this).on('click', function() {
currentItem = {
title : $('.item-title', this).text(),
desc : $('.item-desc', this).text(),
label : $('.item-label', this).text()
};
app.navi.pushPage('detail.html');
});
});

•
–
•
–
•
–
•
•
–
–
•
•

•
–
•
$scope.name = "片栗";

• angular.module('myApp', ['onsen'])
– 今回のアプリに「myAPP」という名前を定義します
– Onsen UIという名前のモジュールを取り込みます
ons.bootstrap();
var app = angular.module('myApp', ['onsen']);
<html ng-app="myApp">
ons.bootstrap("myApp", []);

グローバルスコープ上に変数を定義
• グローバルスコープ上に変数を定義
– 次のプログラムでコントローラーから参照します
var dataList = [
{ name: "福寿草"},
{ name: "姫踊り子草"},
{ name: "片栗"}
];

• app.controller('MainController', function($scope) {
– アプリに'MainController'という名前のコントローラを作成します
– $scopeはAngularJSのスコープという仕組みを使うための記述です
• スコープに格納した値はテンプレート側で参照できます
app.controller('MainController', function($scope) {
$scope.name = dataList[0].name;
$scope.changeProp1 = function(){
}
$scope.changeProp2 = function(){
}
});

テンプレートをコントローラーと連携させる
• <ons-page ng-controller="MainController">
– MainControllerと連携させます
• <p>{{name}}</p> (Expression)
– MainControllerの$scope.nameの内容がバインドされます
• ng-click
– clickされた時の処理を設定し、処理実行後にExpressionの更新を行います。
<ons-page ng-controller="MainController">
<ons-toolbar>
<div class="center">データ、表示、コントローラ</div>
</ons-toolbar>
<div style="text-align: center">
<p>{{name}}</p>
<ons-button ng-click="changeProp1()">プロパティを変更</ons-button>
<ons-button ng-click="changeProp2()">プロパティを変更</ons-button>
</div>

•
–
•
•
–
•
–
–
•
•
–
•

•
–
•
–
•
–
•
–

Monaca公式ガイドブック発売記念全国キャラバン

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (13)

Similar to Monaca公式ガイドブック発売記念全国キャラバン

Similar to Monaca公式ガイドブック発売記念全国キャラバン (20)

More from アシアル株式会社

More from アシアル株式会社 (20)

Monaca公式ガイドブック発売記念全国キャラバン