More Related Content
Similar to Monaca公式ガイドブック発売記念全国キャラバン (20)
Monaca公式ガイドブック発売記念全国キャラバン
- 34. • 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;
- 36. <div class="counter">
<img src="img/no_00.png" width="55" class="counter-digit">
<img src="img/no_00.png" width="55" class="counter-digit">
<img src="img/no_00.png" width="55" class="counter-digit">
<img src="img/no_00.png" width="55" class="counter-digit">
</div>
<div class="reset-button-wrapper">
<button class="reset-button"><img src="img/btn_reset_normal.png"
width="64"></button>
</div>
<button class="count-button"><img src="img/btn_count_normal.png"
width="127"></button>
</body>
- 37. • $(function() {});
– イベント'DOMContentLoaded'と同じ意味です
• 関数や無名関数として記述した処理を、ブラウザがHTMLの解釈を終了したタイミングで実行します
• $('.count-button').on("touchend", increment);
– class名が'count-button'の要素がタッチされたタイミングでincrement関数を実行します
$(function() {
$('.count-button').on("touchend", increment);
$('.reset-button').on("touchend", reset);
update();
});
- 38. • var count = 0;の有効範囲
– JavaScriptではグローバルスコープをローカルスコープから参照することが出来ます
• count++
– 値を一つ増やす(インクリメント)処理です
<script>
var count = 0;
function increment() {
count++;
update();
}
- 40. • 変数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'
}
}
- 50. • ons.bootstrap()
– AngularJSの初期化やOnsen UIの読み込みを行います
• ons.disableAutoStatusBarFill()
– iOS7以上において画面上部に用意されるステータスバー用の空白を無効化しま
す
<script>
ons.bootstrap();
ons.disableAutoStatusBarFill();
</script>
- 51. • ons-*
– onsから始まるタグがOnsen UIのコンポーネントです
• ons-navigator
– ページナビゲーションを管理するためのコンポーネントです
• page属性
– 初期化時に表示するページを指定します
• var属性
– このコンポーネントを参照するための変数を作成します
<body>
<ons-navigator var="myNavigator" page="page1.html">
</ons-navigator>
</body>
- 52. • 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>
- 56. • <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>
- 57. • 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>
- 58. • <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>
- 59. • 即時関数の仕組みを利用し、初期化処理を記述しています
– strictモードでの実行
– 変数currentItemの宣言
– detail-pageとlist-pageの初期化時の処理を定義
(function(){
'use strict';
var currentItem = {};
$(document).on('pageinit', '#detail-page', function() {
…
}
$(document).on('pageinit', '#list-page', function() {
…
}
})();
- 60. • 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);
});
- 61. • 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');
});
});
- 67. • angular.module('myApp', ['onsen'])
– 今回のアプリに「myAPP」という名前を定義します
– Onsen UIという名前のモジュールを取り込みます
ons.bootstrap();
var app = angular.module('myApp', ['onsen']);
<html ng-app="myApp">
ons.bootstrap("myApp", []);
- 69. • app.controller('MainController', function($scope) {
– アプリに'MainController'という名前のコントローラを作成します
– $scopeはAngularJSのスコープという仕組みを使うための記述です
• スコープに格納した値はテンプレート側で参照できます
app.controller('MainController', function($scope) {
$scope.name = dataList[0].name;
$scope.changeProp1 = function(){
$scope.name = dataList[1].name;
}
$scope.changeProp2 = function(){
$scope.name = dataList[2].name;
}
});
- 70. テンプレートをコントローラーと連携させる
• <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>