• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
スマホ向けWebアプリ開発について~初級編~
 

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

on

  • 1,046 views

ちょっとした工夫でWebアプリをちょっとネイティブアプリっぽく見せることができます。

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

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

Statistics

Views

Total Views
1,046
Views on SlideShare
1,046
Embed Views
0

Actions

Likes
2
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • The Designium iOS向けHTML5アプリ開発 初級編
    • The Designium 浅井です。ネット上ではwataluckyです。
    • The Designium 本日のお題。
    • The Designium 本日のお題。 ネイティブアプリっぽい HTML5アプリの作り方
    • The Designium ネイティブアプリっぽいとはどういうことか。 ・ホーム画面から全画面起動 ・ぬるぬる動く ・Safariの機能をオフる ・画面全体のスクロールをオフに
    • The Designium 本日のお題。 ホームから全画面起動
    • The Designium ホーム画面から全画面で起動したい
    • The Designium ホーム画面から全画面で起動したい どうやるの? ⇒以下を<head>内に挿入。 このモードをスタンドアロンモードと呼びます。 <meta name="apple-mobile-web-app-capable" content="yes" > window.navigator.standalone でスタンドアロンモードかどうかの判定も可能。
    • The Designium ついでにアイコンも設定したい。 どうやるの? ⇒以下を<head>内に挿入。 <link rel="apple-touch-icon" href="./icon.png" />
    • The Designium ちょっと一手間。
    • The Designium ちょっと一手間。 スタンドアロンモードかの判定を行って、 スタンドアロンモードじゃなかったら、 ホーム画面へのお気に入り追加を即すような 設計にしている例。
    • The Designium 本日のお題。 ぬるぬる動かすためには?
    • The Designium ぬるぬる動かしたい。 スマホでclickイベントは愚の骨頂 $('.Btn').bind('click',function(){ //ここにクリック時の処理を書く });
    • The Designium クリックイベントは使うな。 スマホではtouchイベントを使おう $('.Btn').bind('touchstart',function(){ //ここに指を触れてから離す前までの処理を書く }).bind('touchend',function(){ //ここに指を離した時の処理を書く });
    • The Designium クリックイベントは使うな。 スマホではtouchイベントを使おう $('.Btn').bind('touchstart',function(){ //ここに指を触れてから離す前までの処理を書く }).bind('touchend',function(){ //ここに指を離した時の処理を書く });
    • The Designium クリックイベントは使うな。 スマホではtouchイベントを使おう $('.Btn').bind('touchstart',function(){ //ここに指を触れてから離す前までの処理を書く }).bind('touchend',function(){ //ここに指を離した時の処理を書く });
    • The Designium 本日のお題。 Safariの機能をオフりたい
    • The Designium ポップアップメニューを消そう
    • The Designium ポップアップメニューを消そう どうやるの? ⇒以下のCSSで可能。 * { -webkit-touch-callout: none; -webkit-user-select: none; }
    • The Designium リンクタップ時のハイライトを消そう
    • The Designium リンクタップ時のハイライトを消そう どうやるの? ⇒以下のCSSで可能。 * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
    • The Designium 本日のお題。 画面のスクロールをオフに
    • The Designium 画面全体のスクロールをオフに どうやるの? ⇒以下のJSで可能。 $(window).on('touchmove.scrollOFF', function(e) { e.preventDefault(); });
    • The Designium 画面全体のスクロールをオフに どうやるの? ⇒以下のJSで可能。 $(window).on('touchmove.scrollOFF', function(e) { e.preventDefault(); });
    • The Designium 画面全体のスクロールをオフに どうやるの? ⇒以下のJSで可能。 $('menu').bind('touchstart',function(){ $('menu').off('.scrollOFF'); }).bind('touchend',function(){ });
    • The Designium イベント告知 8/10 JAWS-UG会津 第1回 http://peatix.com/event/15727 8/24 エフスタ!! In Aizu http://kokucheese.com/event/index/99855/
    • 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。
    • 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