第16回HTML5とか勉強会で発表した資料です。 ATND Draftのインストールはこちらから https://chrome.google.com/webstore/detail/dgailpbnelpbokjmojjecfbhjmdpojbj

1. 2011年4月21日
co-meeting Inc. 木村篤彦

2. 自己紹介
CEO / Co-Founder
木村 篤彦
Atsuhiko Kimura
旧
Twitter : @a_kimura

3. December, 2010
マルチソーシャルメディア
クライアント「Crowy」が
Mashup Awards6で二賞受賞
http://www.crowy.net/
Com
in gu
ntil
S um
m er
March, 2011
時間と場所とデバイスを超えた
ミーティング co-meeting Inc. 設立
http://www.co-meeting.com/

4. 今日はATND Draftのお話
第0回 HTML5プログラミング＆クリエイティブ コンテスト
Chrome WebApp/Extension部門
最優秀作品賞受賞

5. ATND Draft
WAS BORN
ON
9 OCT. 2010
AT
Mashup Camp#4
-Chrome Extensions
/ Web Apps Day

7. CREATED BY
チーム櫃まぶし
@nakajiman
@yoichi_u
@a_kimura

8. 開発期間
１日ちょい
なのに受賞してしまいました…ありがとうございます。

9. 気を取り直して解説

11. ATND便利
勉強会でよく使われている。

13. でも、いろいろダメ
・下書き保存できない。
・作成中にプレビューも
できない。

14. その辺をできるようにしちゃう
Chrome Extensionが

15. イベント作成画面 BEFORE

16. イベント作成画面 AFTER

17. 管理しているイベント一覧 BEFORE

18. 管理しているイベント一覧 AFTER

19. でも、久しぶりに動かしてみたら、
ATNDのサイトが変わってて動かな
くなってた :'-(
月曜日に直しました…

20. 技術解説

21. 下書き保存

22. Local Storage
on atnd.org
下書き保存が押された
らローカルストレージ
に入力されたデータを
保存
var id = new Date().getTime();
localStorage.setItem('$' + id, JSON.stringify(data));

23. Local Storage
on atnd.org
下書きを表示するとき
はローカルストレージ
からデータを復元
var id = location.hash.substring(1);
var data = localStorage.getItem('$' + id);
data = JSON.parse(data);

24. ポイント
atnd.orgのローカルストレージは他
のアプリからも見れてしまうから、
区別するためにキーに接頭辞をつけ
ました。
それでいいのかなあ…

25. プレビュー

26. 入力内容をChrome
ExtensionのBackground
Pageのグローバル変数に
一旦保存
Background Pageの
グローバル変数
プレビュー画面を開く
プレビュー画面
chrome.extension.sendRequest(data);
window.open(chrome.extension.getURL('preview.html'));

27. Background Pageの
グローバル変数
プレビュー画面から
Background Pageの
グローバル変数を取
得して表示
var background = chrome.extension.getBackgroundPage();
var data = background.previewParams;

28. なんでこんな面倒なことを
しているか

29. atnd.org Extensionから自分で
作ったHTMLをポップ
Local Storage アップで開くには
○
on atnd.org Background Pagesに開
くしかない（たぶん）
Content Scripts
でも、Background Pagesか
らContent Scriptsの変数や
× Background Pages
atnd.orgのLocal Storageには chrome-extension://
アクセスできない
プレビュー画面

30. atnd.org
Content ScriptsとBackground
Pagesのやり取りはChrome
Extensionのメッセージ通信機
能でできる。
chrome.extension.sendRequest
Content Scripts
Background Pages
chrome-extension://
○
グローバル変数
プレビュー画面はBackground
Pagesに属しているので、
Backgroundのグローバル変数に
プレビュー画面
アクセスすることができる。

31. ポイント
Chrome ExtensionのContents Script
から開いたポップアップ画面にデー
タを渡したいときは、一旦
Background Pagesに送るといいよ
他にやり方あれば教えてください

32. 終わりです。
ご清聴ありがとうございました。
株式会社 co-meeting
CEO / Co-Founder 木村篤彦
http://www.co-meeting.com/
Twitter: @a_kimura