Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie アイコンメモを支えるWeb技術
Ähnlich wie アイコンメモを支えるWeb技術 (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (7)
アイコンメモを支えるWeb技術
- 3. 今まで作ったアプリ • SmartEver • アイコンメモ • Touch Icon Creator • 和暦＋ • MY辞書登録 • かんたん辞書登録 • Duet Browser • TweetLink
- 11. フルスクリーン Webアプリの作り方 <head> <meta charset="utf-8"> <title>IconMemo</title> <meta name="apple-mobile-web-app-capable" content="yes" /> ... ホーム画面に追加された場合に効力を発揮
- 12. アイコンの指定方法 <head> ... <link rel="apple-touch-icon-precomposed" href="hoge.png"> apple-touch-icon-precomposed：光沢なし apple-touch-icon：光沢あり ※サーバーのルートに apple-touch-icon.png もしくは apple-touch-icon- precomposed.png というファイルを置く方法もあり。
- 16. htmlの書き換え •jQueryでDOM操作 •idとかclassを要素に指定しておき、後で書 き換える html <img src=‘aaa.png’ id=‘hoge’ /> JavaScript $(‘#hoge’).attr('src', 'bbb.png');
- 19. HTML5 Canvas JavaScriptで絵が描ける！ 当然文字も描画できる fillText() や strokeText()
- 20. 文字の描画サンプル var canvas = document.getElementById('my-canvas'); var context = canvas.getContext('2d'); // 塗りの色 context.fillStyle = '#666666'; // フォント context.font = "bold 50px 'Arial'"; // テキストの行 え context.textAlign = 'center'; // テキストのベースライン context.fillText('Hello World!', 100, 50);
- 21. 書いた絵をData URIに •toDataURL() メソッド var url = canvas.toDataURL(); これだけ！超簡単
- 24. localStorageの使い方 // データの保存 window.localStorage.setItem("hoge", hogeVal); // データの取り出し var hogeVal = window.localStorage.getItem("hoge"); 超カンタン！ 「http://example.jp:80/」のように「ドメイン:ポート番号」の組み 合わせの「オリジン」単位で保存。 なので、同じオリジンで複数のWebアプリを作る場合は、キーを "hoge"で はなく、ID + ”hoge”のようにする必要あり。 （でもiOS6では同じオリジンでも別のSandboxで動くのでなくてもOK)
- 25. 毎回通信するのは 遅いよね？？ • アプリケーション キャッシュを使えばオフライ ンでもOK • キャッシュ マニフェスト ファイルを用意して おけばそこに書いてあるファイルはキャッシュ されるので次からはダウンロードされない。
- 26. アプリケーション キャッシュの例 キャッシュマニフェストファイルの指定 <html manifest="example.appcache"> ... </html> example.appcache CACHE MANIFEST # 2013-03-08:v002 memo.min.js color.min.js iconmemo-theme.min.css jquery-1.8.3.min.js .... このファイルを書き換えると再ダウンロードされる。 （アップデートできる）
- 34. ネイティブ側を jQuery Mobileに合わせる •ナビゲーションバーをjQuery Mobileと 同じみためにする [[UINavigationBar appearance] setBackgroundImage: [UIImage imageNamed:@"navbar"] forBarMetrics:UIBarMetricsDefault];
- 35. こんな感じになった
- 36. 起動画面 •ネイティブ側はみなさんご存知の通り •Webアプリ側は？ Default.png Default@2x.png Default-568h@2x.png Default-Landscape ipad.png Default-Portrait ipad.png Default-Landscape@2x ipad.png Default-Portrait@2x ipad.png
- 37. Webアプリの起動画面 設定の基本 <link rel="apple-touch-startup-image" href="Default.png" /> しかしデバイスの種類毎にどうやってわけるの？
- 39. Webアプリの起動画面 <!-- 640x920 for retina display --> <link rel="apple-touch-startup-image" media="screen and (device-height: 480px) and (-webkit-min-device-pixel-ratio: 1)" href="images/Default.png" /> <!-- 640x920 for retina display --> <link rel="apple-touch-startup-image" media="screen and (device-height: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="images/Default-2x.png" /> <!-- 640x1136 for retina display (568)--> <link rel="apple-touch-startup-image" media="screen and (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2)" href="images/Default-568h-2x.png" /> <!-- iPad Portrait 768x1004 --> <link rel="apple-touch-startup-image" media="screen and (device-width: 768px) and (orientation: portrait) and (-webkit-min-device- pixel-ratio: 1)" href="images/Default-Portrait-ipad.png" /> <!-- iPad Landscape 1024x748 --> <link rel="apple-touch-startup-image" media="screen and (device-width: 768px) and (orientation: landscape) and (-webkit-min- device-pixel-ratio: 1)" href="images/Default-Landscape-ipad.png" /> <!-- iPad Portrait 768x1004 --> <link rel="apple-touch-startup-image" media="screen and (device-width: 768px) and (orientation: portrait) and (-webkit-min-device- pixel-ratio: 2)" href="images/Default-Portrait-2x-ipad.png" /> <!-- iPad Landscape 1024x748 --> <link rel="apple-touch-startup-image" media="screen and (device-width: 768px) and (orientation: landscape) and (-webkit-min- device-pixel-ratio: 2)" href="images/Default-Landscape-2x-ipad.png" /> かなりググって見つけた成果
- 40. ホーム画面へ 追加する方法の説明 •いろんな言語に対応 •iPhoneとiPad、OSバージョンの違いも 考慮 • http://cubiq.org/add-to-home-screen Add to Home screen
- 41. Add to Home screenの例
- 43. IcoMoon App Icon Font Generator 選択したシンボルだけをフォントファイ ルにパックしてくれる。 mobile Safariだけで良いので楽。 http://icomoon.io/app/
- 44. デバッグとか •MacとUSB接続すればSafariでデバッグ可能 iPhoneの設定画面 Safari→詳細→WebインスペクタをON ブレークポイントによるデバッグ アクセス速度の調査など
- 46. 海外からアクセス したとき時間の計測 •Pingdom Website Speed Test http://tools.pingdom.com/fpt/
- 47. Google App Engine •PythonかJava (最近PHPも使えるように） •静的ファイルおくだけなら、定義ファイ ル(app.yaml)を書くだけ •Google App Engine Launcherで Deploy
- 48. 独自ドメイン ムームードメインにてドメイン取得してDNS設定 • 国内 jp.iconmemo.com • 海外 www.iconmemo.com 言語で判定してSafariを呼ぶときに振り分け
- 49. ローカライズ 俺々gettext var lang = window.navigator.language; var localizedDictionary = { "Memo": "メモ", "Save": "保存", "Done": "完了", "Cancel": "キャンセル", "Input text here.": "ここにメモを入力" }; var _ = function(str) { if (lang != "ja-jp") { ! return str; } if (str in localizedDictionary) { ! return localizedDictionary[str]; } return str; }; 使用例! $('#saveColor').html(_("Save")); $('#cancelColor').html(_("Cancel"));