スマホ向けWebアプリ開発について~初級編~

1,356 views

Published on

ちょっとした工夫でWebアプリをちょっとネイティブアプリっぽく見せることができます。
そんなTipsを「初級編」ということで、いくつか紹介。

2013/7/12のDDF合同勉強会でのLTに使用したスライドです。

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,356
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

スマホ向けWebアプリ開発について~初級編~

  1. 1. The Designium iOS向けHTML5アプリ開発 初級編
  2. 2. The Designium 浅井です。ネット上ではwataluckyです。
  3. 3. The Designium 本日のお題。
  4. 4. The Designium 本日のお題。 ネイティブアプリっぽい HTML5アプリの作り方
  5. 5. The Designium ネイティブアプリっぽいとはどういうことか。 ・ホーム画面から全画面起動 ・ぬるぬる動く ・Safariの機能をオフる ・画面全体のスクロールをオフに
  6. 6. The Designium 本日のお題。 ホームから全画面起動
  7. 7. The Designium ホーム画面から全画面で起動したい
  8. 8. The Designium ホーム画面から全画面で起動したい どうやるの? ⇒以下を<head>内に挿入。 このモードをスタンドアロンモードと呼びます。 <meta name="apple-mobile-web-app-capable" content="yes" > window.navigator.standalone でスタンドアロンモードかどうかの判定も可能。
  9. 9. The Designium ついでにアイコンも設定したい。 どうやるの? ⇒以下を<head>内に挿入。 <link rel="apple-touch-icon" href="./icon.png" />
  10. 10. The Designium ちょっと一手間。
  11. 11. The Designium ちょっと一手間。 スタンドアロンモードかの判定を行って、 スタンドアロンモードじゃなかったら、 ホーム画面へのお気に入り追加を即すような 設計にしている例。
  12. 12. The Designium 本日のお題。 ぬるぬる動かすためには?
  13. 13. The Designium ぬるぬる動かしたい。 スマホでclickイベントは愚の骨頂 $('.Btn').bind('click',function(){ //ここにクリック時の処理を書く });
  14. 14. The Designium クリックイベントは使うな。 スマホではtouchイベントを使おう $('.Btn').bind('touchstart',function(){ //ここに指を触れてから離す前までの処理を書く }).bind('touchend',function(){ //ここに指を離した時の処理を書く });
  15. 15. The Designium クリックイベントは使うな。 スマホではtouchイベントを使おう $('.Btn').bind('touchstart',function(){ //ここに指を触れてから離す前までの処理を書く }).bind('touchend',function(){ //ここに指を離した時の処理を書く });
  16. 16. The Designium クリックイベントは使うな。 スマホではtouchイベントを使おう $('.Btn').bind('touchstart',function(){ //ここに指を触れてから離す前までの処理を書く }).bind('touchend',function(){ //ここに指を離した時の処理を書く });
  17. 17. The Designium 本日のお題。 Safariの機能をオフりたい
  18. 18. The Designium ポップアップメニューを消そう
  19. 19. The Designium ポップアップメニューを消そう どうやるの? ⇒以下のCSSで可能。 * { -webkit-touch-callout: none; -webkit-user-select: none; }
  20. 20. The Designium リンクタップ時のハイライトを消そう
  21. 21. The Designium リンクタップ時のハイライトを消そう どうやるの? ⇒以下のCSSで可能。 * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
  22. 22. The Designium 本日のお題。 画面のスクロールをオフに
  23. 23. The Designium 画面全体のスクロールをオフに どうやるの? ⇒以下のJSで可能。 $(window).on('touchmove.scrollOFF', function(e) { e.preventDefault(); });
  24. 24. The Designium 画面全体のスクロールをオフに どうやるの? ⇒以下のJSで可能。 $(window).on('touchmove.scrollOFF', function(e) { e.preventDefault(); });
  25. 25. The Designium 画面全体のスクロールをオフに どうやるの? ⇒以下のJSで可能。 $('menu').bind('touchstart',function(){ $('menu').off('.scrollOFF'); }).bind('touchend',function(){ });
  26. 26. The Designium イベント告知 8/10 JAWS-UG会津 第1回 http://peatix.com/event/15727 8/24 エフスタ!! In Aizu http://kokucheese.com/event/index/99855/
  27. 27. The Designium GPSの使用 GPS iOSに限らず基本的に大抵のスマホの場合はGPSは使用可能。 現在位置情報を取得するメソッドは2種類ある。 navigator.geolocation.getCurrentPosition() navigator.geolocation.watchPosition() 前者が一回のみ位置情報を取得、後者は定期的に位置情報を取得するために使用する。 GPSを常時使用するとバッテリー消費が激しいので基本的にはgetCurrentPositionを推奨。 なお、両者ともパラメータは共通しており、 navigator.geolocation.watchPosition(successCallback, errorCallback, option) のように使う。なお、オプションは、 enacleHighAccuracy より正確な位置情報を取得するか否か。バッテリー消費は激しくなる。初期値はfalse。 timeout タイムアウトまでの時間。初期値は無制限。 maximumAge 位置情報を取得するまでの時間。初期値は0。
  28. 28. The Designium 加速度センサーの使用 加速度センサー 加速度センサーが反応するとdevicemotionイベントが発生する。 このイベントオブジェクトにはx,y,z方向の加速度がそれぞれaccelerationプロパティに格納されている。 これらは、 window.addEventListener("devicemotion",function(e){ e.acceleration.x; e.acceleration.y; e.acceleration.z; },true); のように使う。 詳細、公式情報は以下。 DeviceMotionEvent Class Reference http://p.tl/-H5W

×