2013年に発表したやつ。 もう廃れたかもだけど。 表示が変だけどもう適当なので許してください

1. Monaca でつくる
HTML5 と
スマートフォンアプリ
ハイブリット
簡単！
OSC 2013

2. @Hikaru_Itou
・Web Design
・Web Programming
・UI Design
・HTML5 App Develop
About Me

3. 術でネイティブを凌駕するリ
スマホUIを実現する

4. 術でネイティブを凌駕するリ
スマホUIを実現する

6. 900,000 Apps

7. 2 Main Platforms
48 Billion DL 50 Billion DL

8. Start Developing Apps

9. Type of Apps

10. NativeApplication
Objective-C
Java + Eclipse
+ Xcode

11. MobileWebApp

12. NativeApp MobileApp
開発言語 OSによって
異なる
HTML / CSS / JS
入手方法 ストアを介して ストア無し
機能 制限無し 制限有り
更新 ストアの審査 常時・即反映

13. by blog.btrax.com/

14. New Type

15. HybridApplication
NativeApp WebAppHyblidApp

16. NativeApp
開発言語 OSによって
異なる
入手方法 ストアを介して
機能 制限無し
更新 ストアの審査
MobileApp
HTML / CSS / JS
ストア無し
制限有り
常時・即反映
HyblidApp
JSからネイティブ
の機能を呼び出し
Web埋め込みにより
常時即反映可

17. JavaScript から
ネイティブの機能を
呼び出せる

18. で呼び出せる機能
・加速時計
・アドレス帳
・電子コンパス
・音の再生
・GPS
・端末情報
・ファイルシステムへの
アクセス
・WebSQL
・起動画面
・プッシュ通知 ・バイブレーション
・接続回線取得
・カメラ

19. HybridApplication
UI 機能

20. Development Platform
Wonderful

22. とは？？
iOS・Android・Windows8
向けのアプリをワンソース
でブラウザ上で開発できる
サービス

23. 2012年 3月 2日 Openβ版 公開おととい正式版公開！
（2013年 9月 12日）

24. Development in the browser

25. アプリのUIは、
スマホサイトを
作る感覚で。

26. HTMLMobileAppFramework

27. ・大定番
・少し動作が重い
・デザイン ×
・自由度が低い
・情報が多い

28. ・動作速度 ○
・デザイン ○
・カスタマイズ △
・情報は少なめ
・有料

29. ・動作速度 ○
・デザイン ○
・カスタマイズ △
・情報は少なめ
・絵が描ける！

30. Asial Official UIFramework

31. 【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>

32. 【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>

33. 【ons-navigator】

34. Monacaにワンクリック導入！

35. Monacaデバッガー
デバッガーアプリで、即実機デモができる！

36. デバッガーアプリで、即実機デモができる！

37. デバッガーでHTML,
JSコンソールが見れる！

38. アプリ化（ビルド）もワンクリック！！

39. アプリ化（ビルド）もワンクリック！！

40. Monacaバックエンドが
すごい！

41. マニュアル・リファレンスが豊富！
完全日本語版！

42. WebDavが使える！

43. ここまでは調べれば
すぐわかる基本的なことです。

44. ハイブリッドアプリ開発
超必見テクニック集

45. widthやheightに、
borderやpaddingが含まれるようになる！
【CSS】box-sizing: border-box を使え！
そのⅠ
width = boxのwidthwidth = (boxのwidth + borderの太さ)
* {
box-sizing:border-box;
}

46. 【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;
}

47. アニメーションはCSS3を使え！
その3
Snap.js
CSSアニメーションの
横スライドを実現する
プラグイン。

48. できるだけ、HTMLページ遷移は避けよう
その4
JS／CSSの読み込みや
特にPhoneGapの読み込みには
時間がかかる！
画面遷移は、同一HTMLに書いて、JSで制御
しましょう

49. 慣性スクロールを実現しよう！
その5
［iOS］
-webkit-overflow-scrolling:touch
［Android］
iScroll.js

50. クリックイベントを高速化しよう
その6
fastClick.js
300msの遅延がほぼ0になります

51. 読み込むJS・CSSファイルは
一つに結合して、圧縮しよう
その7