osc html5-monaca
TRANSCRIPT
Monaca でつくる
HTML5 と
スマートフォンアプリ
ハイブリット
簡単！
OSC 2013
@Hikaru_Itou
・Web Design
・Web Programming
・UI Design
・HTML5 App Develop
About Me
技術でネイティブを凌駕するリッチなスマホUIを実現する
技術でネイティブを凌駕するリッチなスマホUIを実現する
900,000 Apps
2 Main Platforms
48 Billion DL 50 Billion DL
Start Developing Apps
Type of Apps
NativeApplicationObjective-C
Java + Eclipse
+ Xcode
MobileWebApp
NativeApp MobileApp
開発言語 OSによって異なる
HTML / CSS / JS
入手方法 ストアを介して ストア無し
機能 制限無し 制限有り
更新 ストアの審査 常時・即反映
New Type
HybridApplication
NativeApp WebAppHyblidApp
NativeApp
開発言語 OSによって異なる
入手方法 ストアを介して
機能 制限無し
更新 ストアの審査
MobileApp
HTML / CSS / JS
ストア無し
制限有り
常時・即反映
HyblidApp
JSからネイティブの機能を呼び出し
Web埋め込みにより常時即反映可
JavaScript から
ネイティブの機能を呼び出せる
で呼び出せる機能
・加速時計
・アドレス帳
・電子コンパス
・音の再生
・GPS
・端末情報
・ファイルシステムへのアクセス
・WebSQL
・起動画面
・プッシュ通知 ・バイブレーション
・接続回線取得
・カメラ
HybridApplication
UI 機能
Development Platform
Wonderful
とは？？
iOS・Android・Windows8
向けのアプリをワンソース
でブラウザ上で開発できる
サービス
2012年 3月 2日 Openβ版公開おととい正式版公開！（2013年 9月 12日）
Development in the browser
アプリのUIは、
スマホサイトを
作る感覚で。
HTMLMobileAppFramework
・大定番
・少し動作が重い
・デザイン ×
・自由度が低い
・情報が多い
・動作速度 ○
・デザイン ○
・カスタマイズ △
・情報は少なめ
・有料
・動作速度 ○
・デザイン ○
・カスタマイズ △
・情報は少なめ
・絵が描ける！
Asial Official UIFramework
【ons-screen】
index.html<ons-navigator page="page1.html" title="Page 1">
</ons-navigator>
page1.html<div class="page center">
<h1>Hello, I am Page 1</h1>
<ons-button ng-click="ons.screen.presentPage('page2.html')"">
Push Page 2
</ons-button>
</div>
page2.html<div class="page center">
<h1>Hello, I am Page 2</h1>
<ons-button ng-click="ons.screen.dismissPage()">
Pop Page
</ons-button>
</div>
【ons-navigator】
index.html<ons-navigator page="page1.html" title="Page 1">
</ons-navigator>
page1.html<div class="page center">
<h1>Hello, I am Page 1</h1>
<ons-button ng-click="ons.navigator.pushPage('page2.html', 'Page 2')">
Push Page 2
</ons-button>
</div>
page2.html<div class="page center">
<h1>Hello, I am Page 2</h1>
<ons-button ng-click="ons.navigator.popPage()">
Pop Page
</ons-button>
</div>
【ons-navigator】
Monacaにワンクリック導入！
Monacaデバッガー
デバッガーアプリで、即実機デモができる！
デバッガーアプリで、即実機デモができる！
デバッガーでHTML,
JSコンソールが見れる！
アプリ化（ビルド）もワンクリック！！
アプリ化（ビルド）もワンクリック！！
Monacaバックエンドが
すごい！
マニュアル・リファレンスが豊富！
完全日本語版！
WebDavが使える！
ここまでは調べれば
すぐわかる基本的なことです。
ハイブリッドアプリ開発
超必見テクニック集
widthやheightに、
borderやpaddingが含まれるようになる！
【CSS】box-sizing: border-boxを使え！
そのⅠ
width = boxのwidthwidth = (boxのwidth + borderの太さ)
* {
box-sizing:border-box;
}
【CSS】-webkit-touch-callout: none
-webkit-user-select: none
をつかえ！
その2
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
}
input[type=text] {
-webkit-user-select: auto;
}
アニメーションはCSS3を使え！
その3Snap.js
CSSアニメーションの
横スライドを実現する
プラグイン。
できるだけ、HTMLページ遷移は避けよう
その4
JS／CSSの読み込みや
特にPhoneGapの読み込みには
時間がかかる！
画面遷移は、同一HTMLに書いて、JSで制御
しましょう
慣性スクロールを実現しよう！
その5
［iOS］
-webkit-overflow-scrolling:touch
［Android］
iScroll.js
クリックイベントを高速化しよう
その6fastClick.js
300msの遅延がほぼ0になります
読み込むJS・CSSファイルは
一つに結合して、圧縮しよう
その7
