Enviar pesquisa
Carregar
アイコンメモを支えるWeb技術
•
5 gostaram
•
1,968 visualizações
Makoto Setoh
Seguir
2013/6/1開催 第50回 Cocoa勉強会関西発表資料です。
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 50
Recomendados
Google Glassでできること XE11版 最新開発情報 Mirror API & GDK
Google Glassでできること XE11版 最新開発情報 Mirror API & GDK
Masahiro Wakame
今のうちに知っておきたい Swiftの高速化 + 3D Touch API
今のうちに知っておきたい Swiftの高速化 + 3D Touch API
Masaki Oshikawa
Proyecto
Proyecto
Zadiita Shiguango
軽量EvernoteクライアントSmartEverにおけるアプリ高速化の工夫と課題
軽量EvernoteクライアントSmartEverにおけるアプリ高速化の工夫と課題
Makoto Setoh
Hype vs. Reality: The AI Explainer
Hype vs. Reality: The AI Explainer
Luminary Labs
Study: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving Cars
LinkedIn
マークアップ講座 03 スマートフォン・デバイス最適化
マークアップ講座 03 スマートフォン・デバイス最適化
eiji sekiya
Css nite(2010.09.23)
Css nite(2010.09.23)
Yoshiki Ushida
Recomendados
Google Glassでできること XE11版 最新開発情報 Mirror API & GDK
Google Glassでできること XE11版 最新開発情報 Mirror API & GDK
Masahiro Wakame
今のうちに知っておきたい Swiftの高速化 + 3D Touch API
今のうちに知っておきたい Swiftの高速化 + 3D Touch API
Masaki Oshikawa
Proyecto
Proyecto
Zadiita Shiguango
軽量EvernoteクライアントSmartEverにおけるアプリ高速化の工夫と課題
軽量EvernoteクライアントSmartEverにおけるアプリ高速化の工夫と課題
Makoto Setoh
Hype vs. Reality: The AI Explainer
Hype vs. Reality: The AI Explainer
Luminary Labs
Study: The Future of VR, AR and Self-Driving Cars
Study: The Future of VR, AR and Self-Driving Cars
LinkedIn
マークアップ講座 03 スマートフォン・デバイス最適化
マークアップ講座 03 スマートフォン・デバイス最適化
eiji sekiya
Css nite(2010.09.23)
Css nite(2010.09.23)
Yoshiki Ushida
これからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れ
Mitsuru Katoh
Wankuma0402
Wankuma0402
c-mitsuba
jQuery Mobile(開発編)勉強会資料
jQuery Mobile(開発編)勉強会資料
Nobumasa Ura
Jqm20120804 publish
Jqm20120804 publish
Takashi Okamoto
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
Takashi Okamoto
XAML のこれまでとこれから、今「やる」べき意義
XAML のこれまでとこれから、今「やる」べき意義
インフラジスティックス・ジャパン株式会社
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
shigeya
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Tsutomu Ogasawara
iosアプリのPaintcode利用
iosアプリのPaintcode利用
Rika Kurano
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop
Yoichiro Sakurai
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
OCHI Shuji
空のテンプレートから始めるWindows 8 ストアアプリ
空のテンプレートから始めるWindows 8 ストアアプリ
Akira Hatsune
Firefoxosハンズオン
Firefoxosハンズオン
Kazutoshi Kashimoto
Sencha touchのはじめかた
Sencha touchのはじめかた
Yuki Naotori
jQuery Mobileの基礎
jQuery Mobileの基礎
Takashi Okamoto
Webに今求められているレベル: HTML5 コントロールを利用した開発
Webに今求められているレベル: HTML5 コントロールを利用した開発
インフラジスティックス・ジャパン株式会社
Android Lecture #01 @PRO&BSC Inc.
Android Lecture #01 @PRO&BSC Inc.
Yuki Higuchi
AppStore申請を一式まるっと自動化する
AppStore申請を一式まるっと自動化する
Tomoki Hasegawa
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdf
furutsuka
Mais conteúdo relacionado
Semelhante a アイコンメモを支えるWeb技術
これからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れ
Mitsuru Katoh
Wankuma0402
Wankuma0402
c-mitsuba
jQuery Mobile(開発編)勉強会資料
jQuery Mobile(開発編)勉強会資料
Nobumasa Ura
Jqm20120804 publish
Jqm20120804 publish
Takashi Okamoto
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
Takashi Okamoto
XAML のこれまでとこれから、今「やる」べき意義
XAML のこれまでとこれから、今「やる」べき意義
インフラジスティックス・ジャパン株式会社
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
shigeya
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
Tsutomu Ogasawara
iosアプリのPaintcode利用
iosアプリのPaintcode利用
Rika Kurano
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop
Yoichiro Sakurai
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
OCHI Shuji
空のテンプレートから始めるWindows 8 ストアアプリ
空のテンプレートから始めるWindows 8 ストアアプリ
Akira Hatsune
Firefoxosハンズオン
Firefoxosハンズオン
Kazutoshi Kashimoto
Sencha touchのはじめかた
Sencha touchのはじめかた
Yuki Naotori
jQuery Mobileの基礎
jQuery Mobileの基礎
Takashi Okamoto
Webに今求められているレベル: HTML5 コントロールを利用した開発
Webに今求められているレベル: HTML5 コントロールを利用した開発
インフラジスティックス・ジャパン株式会社
Android Lecture #01 @PRO&BSC Inc.
Android Lecture #01 @PRO&BSC Inc.
Yuki Higuchi
AppStore申請を一式まるっと自動化する
AppStore申請を一式まるっと自動化する
Tomoki Hasegawa
Semelhante a アイコンメモを支えるWeb技術
(20)
これからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れ
Wankuma0402
Wankuma0402
jQuery Mobile(開発編)勉強会資料
jQuery Mobile(開発編)勉強会資料
Jqm20120804 publish
Jqm20120804 publish
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
jQuery MobileとPhoneGapでスマートフォンアプリ楽々クッキング
XAML のこれまでとこれから、今「やる」べき意義
XAML のこれまでとこれから、今「やる」べき意義
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
スマートフォンアプリケーション開発の最新動向
スマートフォンアプリケーション開発の最新動向
iosアプリのPaintcode利用
iosアプリのPaintcode利用
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
20120413 nestakabaneworkshop
20120413 nestakabaneworkshop
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
空のテンプレートから始めるWindows 8 ストアアプリ
空のテンプレートから始めるWindows 8 ストアアプリ
Firefoxosハンズオン
Firefoxosハンズオン
Sencha touchのはじめかた
Sencha touchのはじめかた
jQuery Mobileの基礎
jQuery Mobileの基礎
Webに今求められているレベル: HTML5 コントロールを利用した開発
Webに今求められているレベル: HTML5 コントロールを利用した開発
Android Lecture #01 @PRO&BSC Inc.
Android Lecture #01 @PRO&BSC Inc.
AppStore申請を一式まるっと自動化する
AppStore申請を一式まるっと自動化する
Último
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdf
furutsuka
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
Shota Ito
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
Atomu Hidaka
Último
(7)
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
UPWARD_share_company_information_20240415.pdf
UPWARD_share_company_information_20240415.pdf
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
アイコンメモを支えるWeb技術
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 scheme Webページに直接データを埋めこむため のURIスキーム data:image/png;base64,iVBORw0KGgoAA AANSUhEUgAAAAUA∼(省略)
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 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(); これだけ!超簡単
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.appcache CACHE MANIFEST #
2013-03-08:v002 memo.min.js color.min.js iconmemo-theme.min.css jquery-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.
ネイティブ側を 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"
/> しかしデバイスの種類毎にどうやってわけるの?
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-screen Add to
Home screen
41.
Add to Home
screenの例
42.
シンボルフォント •もっと軽くしたい •画像の代わりにシンボル フォントを使う
43.
IcoMoon App Icon Font
Generator 選択したシンボルだけをフォントファイ ルにパックしてくれる。 mobile Safariだけで良いので楽。 http://icomoon.io/app/
44.
デバッグとか •MacとUSB接続すればSafariでデバッグ可能 iPhoneの設定画面 Safari→詳細→WebインスペクタをON ブレークポイントによるデバッグ アクセス速度の調査など
45.
ホスティング •やっぱりサーバーは必要 •手軽、でも速いのが良い。。 •国内 さくらのレンタルサーバー(スタンダード) •海外 Google
App Engine
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"));
50.
今後の課題 •全部クライアントでやって いるのでソースが… •コード不正盗用が2件発生 •1件は和解、1件は未解決 Closure Compilerによる難読化? 「アイコンメモ™」商標申請中