アイコンメモを支えるWeb技術

  • 618 views
Uploaded on

2013/6/1開催 第50回 Cocoa勉強会関西発表資料です。

2013/6/1開催 第50回 Cocoa勉強会関西発表資料です。

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
618
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. アイコンメモを支えるWeb技術@setoh2000
  • 2. 自己紹介昼間は会社員(Windows, Linux)主に深夜、早朝に活動いつかはアプリ専業で独立したい。。
  • 3. 今まで作ったアプリ• SmartEver• アイコンメモ• Touch Icon Creator• 和暦+• MY辞書登録• かんたん辞書登録• Duet Browser• TweetLink
  • 4. アイコンメモって何?•iPhoneのホーム画面に付箋紙を貼るアプリ•編集できるのがポイント!
  • 5. 前提条件•審査が通るかどうかわからない•リジェクトされる可能性も高いのであまり手をかけるわけにはいかない
  • 6. アイコンメモの前身Touch Icon Creator•ホーム画面に電話やSMSのショートカットアイコンを作るアプリ
  • 7. アイコン変更の実現方法•ネイティブアプリはアプリアイコンをアップデート時のみ変更可能。→ 和暦+ 年に1回アップデート
  • 8. Webアプリならば•「ホーム画面に追加」で初回設定•次からはページ読み込み毎に変更できる→リロードでもOK
  • 9. 実現の流れ•ネイティブアプリ→Safari→(ホーム画面に追加)→Webアプリ
  • 10. Webアプリの種類•Safariの中で動くもの•フルスクリーンで動くもの
  • 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 というファイルを置く方法もあり。
  • 13. アイコンを書き換えるには•サーバーの画像を変更•別の画像ファイルを指定サーバーサイドで処理が必要(ユーザーのメモをサーバーに送る必要がある)•プライバシー的に好ましくない。•遅い(回線速度による)
  • 14. クライアント側だけで実現できないか?JavaScriptでファイル名を書き換える!<link rel="apple-touch-icon-precomposed" href="hoge.png">しかし画像ファイルはサーバーに置かないとだめ?
  • 15. Data URI schemeWebページに直接データを埋めこむためのURIスキームdata:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA∼(省略)
  • 16. htmlの書き換え•jQueryでDOM操作•idとかclassを要素に指定しておき、後で書き換えるhtml<img src=‘aaa.png’ id=‘hoge’ />JavaScript$(‘#hoge’).attr(src, bbb.png);
  • 17. アイコンの書き換えアイコンの書き換えがクライアント側できた\(^o^)/(詳細は省略)
  • 18. テキストを画像に変換するには?•サーバーサイドならGDを使えばできるけど。。こんにちわ世界
  • 19. HTML5 CanvasJavaScriptで絵が描ける!当然文字も描画できる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();これだけ!超簡単
  • 22. メモをどうやって記憶するか•サーバーサイドならMySQLとかMongoDBとか
  • 23. localStorage•ローカルで記憶•ブラウザを閉じてもずっと覚えている
  • 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.appcacheCACHE MANIFEST# 2013-03-08:v002memo.min.jscolor.min.jsiconmemo-theme.min.cssjquery-1.8.3.min.js....このファイルを書き換えると再ダウンロードされる。(アップデートできる)
  • 27. 技術的な課題はクリア•こんなので審査が通るのか•せめて見栄えをなんとかせねばネイティブアプリっぽくしたい!
  • 28. フレームワーク的なもの•Bootstrap•iUI•Sencha touch•jQuery Mobile
  • 29. Bootstrap•デザインは良い感じ•レスポンシブ•ちょっと部品が足りない•Webサイト向け
  • 30. iUI•iOSネイティブ風•軽そう•http://www.iui-js.org/
  • 31. Sencha touch•気合入ってる•かなり良い感じ•使い方が独特
  • 32. jQuery Mobile•iOS、Androidなどモバイル一般向け•なかなか良く出来てる•部品が充実•ちょっと重そうな感じだけど
  • 33. jQuery Mobile っぽさが気になる•青くくすんだ色がThemeRollerで修正http://jquerymobile.com/themeroller/•丸で囲んだアイコン→使わない色々工夫してネイティブっぽく合わせる。
  • 34. ネイティブ側を jQueryMobileに合わせる•ナビゲーションバーをjQuery Mobileと同じみためにする[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"navbar"]forBarMetrics:UIBarMetricsDefault];
  • 35. こんな感じになった
  • 36. 起動画面•ネイティブ側はみなさんご存知の通り•Webアプリ側は?Default.pngDefault@2x.pngDefault-568h@2x.pngDefault-Landscape ipad.pngDefault-Portrait ipad.pngDefault-Landscape@2x ipad.pngDefault-Portrait@2x ipad.png
  • 37. Webアプリの起動画面設定の基本<link rel="apple-touch-startup-image" href="Default.png" />しかしデバイスの種類毎にどうやってわけるの?
  • 38. CSS3 メディアクエリー•メディア(デバイス)の幅や高さ、色数などに合わせてスタイルを適用できる詳しくはWebで!
  • 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-screenAdd to Home screen
  • 41. Add to Home screenの例
  • 42. シンボルフォント•もっと軽くしたい•画像の代わりにシンボルフォントを使う
  • 43. IcoMoon AppIcon Font Generator選択したシンボルだけをフォントファイルにパックしてくれる。mobile Safariだけで良いので楽。http://icomoon.io/app/
  • 44. デバッグとか•MacとUSB接続すればSafariでデバッグ可能iPhoneの設定画面Safari→詳細→WebインスペクタをONブレークポイントによるデバッグアクセス速度の調査など
  • 45. ホスティング•やっぱりサーバーは必要•手軽、でも速いのが良い。。•国内 さくらのレンタルサーバー(スタンダード)•海外 Google App Engine
  • 46. 海外からアクセスしたとき時間の計測•Pingdom Website Speed Testhttp://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. ローカライズ俺々gettextvar 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"));
  • 50. 今後の課題•全部クライアントでやっているのでソースが…•コード不正盗用が2件発生•1件は和解、1件は未解決Closure Compilerによる難読化?「アイコンメモ™」商標申請中