Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ATNDに下書き保存とプレビューを追加するATND Draft

1,918 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

ATNDに下書き保存とプレビューを追加するATND Draft

  1. 1. 2011年4月21日co-meeting Inc. 木村篤彦
  2. 2. 自己紹介CEO / Co-Founder木村 篤彦Atsuhiko Kimura 旧Twitter : @a_kimura
  3. 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. 4. 今日はATND Draftのお話第0回 HTML5プログラミング&クリエイティブ コンテスト Chrome WebApp/Extension部門 最優秀作品賞受賞
  5. 5. ATND Draft WAS BORN ON 9 OCT. 2010 AT Mashup Camp#4-Chrome Extensions / Web Apps Day
  6. 6. CREATED BYチーム櫃まぶし @nakajiman @yoichi_u @a_kimura
  7. 7. 開発期間1日ちょい なのに受賞してしまいました…ありがとうございます。
  8. 8. 気を取り直して解説
  9. 9. ATND便利勉強会でよく使われている。
  10. 10. でも、いろいろダメ・下書き保存できない。・作成中にプレビューも できない。
  11. 11. その辺をできるようにしちゃう Chrome Extensionが
  12. 12. イベント作成画面 BEFORE
  13. 13. イベント作成画面 AFTER
  14. 14. 管理しているイベント一覧 BEFORE
  15. 15. 管理しているイベント一覧 AFTER
  16. 16. でも、久しぶりに動かしてみたら、ATNDのサイトが変わってて動かなくなってた :-(月曜日に直しました…
  17. 17. 技術解説
  18. 18. 下書き保存
  19. 19. Local Storage on atnd.org 下書き保存が押された らローカルストレージ に入力されたデータを 保存var id = new Date().getTime();localStorage.setItem($ + id, JSON.stringify(data));
  20. 20. Local Storage on atnd.org下書きを表示するときはローカルストレージからデータを復元var id = location.hash.substring(1);var data = localStorage.getItem($ + id);data = JSON.parse(data);
  21. 21. ポイントatnd.orgのローカルストレージは他のアプリからも見れてしまうから、区別するためにキーに接頭辞をつけました。 それでいいのかなあ…
  22. 22. プレビュー
  23. 23. 入力内容をChrome ExtensionのBackground Pageのグローバル変数に 一旦保存 Background Pageの グローバル変数 プレビュー画面を開く プレビュー画面chrome.extension.sendRequest(data);window.open(chrome.extension.getURL(preview.html));
  24. 24. Background Pageの グローバル変数プレビュー画面からBackground Pageのグローバル変数を取得して表示var background = chrome.extension.getBackgroundPage();var data = background.previewParams;
  25. 25. なんでこんな面倒なことを しているか
  26. 26. atnd.org Extensionから自分で 作ったHTMLをポップ Local Storage アップで開くには ○ on atnd.org Background Pagesに開 くしかない(たぶん) Content Scriptsでも、Background PagesからContent Scriptsの変数や × Background Pagesatnd.orgのLocal Storageには chrome-extension://アクセスできない プレビュー画面
  27. 27. atnd.org Content ScriptsとBackground Pagesのやり取りはChrome Extensionのメッセージ通信機 能でできる。 chrome.extension.sendRequest Content Scripts Background Pages chrome-extension:// ○ グローバル変数プレビュー画面はBackgroundPagesに属しているので、Backgroundのグローバル変数に プレビュー画面アクセスすることができる。
  28. 28. ポイントChrome ExtensionのContents Scriptから開いたポップアップ画面にデータを渡したいときは、一旦Background Pagesに送るといいよ 他にやり方あれば教えてください
  29. 29. 終わりです。ご清聴ありがとうございました。 株式会社 co-meeting CEO / Co-Founder 木村篤彦 http://www.co-meeting.com/ Twitter: @a_kimura

×