明日から使える！WEB STORAGE

Transcript

1. 明日から使える！WEB STORAGE Salesforce勉強会 LightningTalks 2017年3月23日 @t_mozza
2. 自己紹介 名前 @t_mozza 略歴 ・2010年 Salesforce ・2017年 Salesforce Business Intelligence Robotic Process Automation 2
3. • Web Storage講座 • 基本 • 特徴 • Cookieとの比較 • 使い方 本日のテーマ 3 • つかってみた • 最近使ったデータ【参考】 • アーキテクチャ • Visualforceエリア • データ構造 • ソースコード • 画面イメージ • 課題
4. WEB STORAGE講座 4
5. Web Storage two related mechanisms, similar to HTTP session cookies, for storing name-value pairs on the client side. 【出典】https://www.w3.org/TR/webstorage/ (accessed 2016-03-22) 5 HTML5
6. Web Storage：基本 • HTML5で追加されたAPIのひとつ • name-value のペアをクライアントサイドに保存する • Origin(＝Domain+Port)単位で個別に領域を持つ 6 クライアント サーバ サーバ name value mail xx@yy.com phone 00-0000-0000 HTML5
7. • データサイズはOrigin単位で5MBまで ※W3C勧告 • サーバへのアクセス時に自動送信されない • Javascriptで任意のタイミングで送信できる • 2種類のメカニズムがある • Session Storage ：ウインドウを閉じると消える • Local Storage ：ウインドウを閉じても消えない • 有効期限がない Web Storage：特徴 7 HTML5
8. Web StorageとCookie：比較 8 Web Storage Cookie session local データサイズ 5,120 KB/origin 4 KB/cookie データ個数 個数制限なし 50 /domain 3,000 /total サーバへの自動送信 自動送信なし アクセス毎に送信 ウインドウ間の共有 共有しない 共有する 共有する 有効期限 ウインドウを 閉じるまで 永続 指定タイミングまで HTML5
9. Web Storage Cookie session local データサイズ 5,120 KB/origin 4 KB/cookie データ個数 個数制限なし 50 /domain 3,000 /total サーバへの自動送信 自動送信なし アクセス毎に送信 ウインドウ間の共有 共有しない 共有する 共有する 有効期限 ウインドウを 閉じるまで 永続 指定タイミングまで Web StorageとCookie：評価 9 容量：大 通信：小 維持できる 容量：小 通信：大 自動的に消せる 堅牢 利用性：高 HTML5
10. Web Storageの使い方 ※sessionStorageとlocalStorageは同じメソッドを使える 10 Javascript // 保存 sessionStorage.setItem("mail", "xx@yy.com"); sessionStorage.setItem("phone", "00-0000-0000"); // 参照 sessionStorage.getItem("mail"); // 削除 sessionStorage.removeItem("mail"); // 一括削除 sessionStorage.clear(); name value mail xx@yy.com phone 00-0000-0000 name value mail xx@yy.com phone 00-0000-0000 Storage name value mail xx@yy.com phone 00-0000-0000 HTML5
11. つかってみた 11
12. 12 最近使ったデータ：画面 サイドバー タブホーム 参考 SFDC
13. 最近使ったデータ：API RecentlyViewed オブジェクト • 実行ユーザが最近参照した/表示したレコード • 各オブジェクト200件まで保持 LastReferencedDate 項目/ LastViewedDate 項目 • 実行ユーザがレコードを最後に参照した/表示した日時 更新タイミング • 画面操作時 • FOR REFERENCE 句/ FOR VIEW句の使用時 13 参考 SFDC
14. 最近使ったページ 「最近使ったデータ」(Salesforce標準)ではなく 「最近使ったページ」の表示機能を作ってみた アーキテクチャ • Session StorageにユーザIDとURLを保持 • サイドバーの Javascriptで参照・保存 • サイドバーに一覧表示 14 ブラウザ サイドバー Storage Java script 保存 参照 一覧 HTML5 SFDC
15. Visualforceエリア • カスタマイズ ＞ ホーム ＞ ホームページのコンポーネント ＞ カスタムコンポーネント ＞ Visualforce エリア • カスタマイズ ＞ ユーザインタフェース ＞ すべてのページにカスタムサイドバーコンポーネントを表示 15 SFDC
16. HTMLエリアとお知らせ HTMLエリアやお知らせはJavascript使用不可 【出典】http://docs.releasenotes.salesforce.com/ja-jp/summer15/release- notes/rn_home_page_comp_changes.htm (accessed 2016-03-22) 【出典】http://docs.releasenotes.salesforce.com/ja-jp/spring16/release- notes/rn_forcecom_general_home_page_comp_changes.htm (accessed 2016-03-22) 16 SFDC 参考
17. データ構造 { "0056F000006DTnZQAW":{ "https://xx.com/home/home.jsp":"2017/3/23 19:18:56", "https://xx.com/0016F00001wiWZU":"2017/3/23 19:18:51" }, "0056F000006DoIJQA0":{ "https://xx.com/home/home.jsp":"2017/3/23 19:22:28", "https://xx.com/home/showAllTabs.jsp":"2017/3/23 19:21:59" } } 17 • JSON形式でWeb Storageに保存 • ユーザIDとURLの単位で最終表示時刻を保持 • 同一セッションでの複数ユーザによるログインを考慮 • URLの重複を削除 ユーザID URL 最終表示時刻 ページ単位 ユーザ単位 JSON
18. [ { "user":"0056F000006DTnZQAW", "pages":[ { "url":"https://xx.com/home/home.jsp", "lastdatetime":"2017/3/23 19:18:56" }, { "url":"https://xx.com/0016F00001wiWZU", "lastdatetime":"2017/3/23 19:18:51" } ] }, { "user":"0056F000006DoIJQA0", ～～～～～～～～～～～～～～～～～～～～～～～～～～～ } ] データ構造：理想 18 プロパティ名を省略しないほうが読みやすい JSON
19. [ { "user":"0056F000006DTnZQAW", "pages":[ { "url":"https://xx.com/home/home.jsp", "lastdatetime":"2017/3/23 19:18:56" } ] } ] データ構造：比較 19 { "0056F000006DTnZQAW":{ "https://xx.com/home/home.jsp":"2017/3/23 19:18:56" } } Simple Complex 自由 JSON
20. ソースコード：参照・保存 Visualforce ページ 20 var recentlyJson = {}; if(sessionStorage.getItem("recentlyViewedPage") !== null){ recentlyJson = JSON.parse(sessionStorage.getItem("recentlyViewedPage")); } var undefined; if(recentlyJson["{!$User.Id}"] === undefined){ recentlyJson["{!$User.Id}"] = {}; } recentlyJson["{!$User.Id}"]["{!$CurrentPage.parameters.sdfcIFrameOrigin}"] = (new Date()).toLocaleString(); sessionStorage.setItem("recentlyViewedPage", JSON.stringify(recentlyJson)); HTML5 SFDC
21. ソースコード：表示 function initialize(){ var SEARCH_SLASH_START = 8; var anchor, division; for(var url in recentlyJson["{!$User.Id}"]){ anchor = document.createElement("a"); anchor.href = url; anchor.target = "_parent"; anchor.textContent = url.substr(url.indexOf("/", SEARCH_SLASH_START)); division = document.createElement("div"); division.textContent = "・"; document.getElementsByName("recentlyBlock")[0].appendChild(division).appendChild(anchor); } } window.addEventListener("load", initialize); ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～ <apex:outputPanel html-name="recentlyBlock" layout="block" /> 21 Visualforce ページ HTML5 SFDC
22. 画面イメージ：ホーム 22 SFDC
23. 画面イメージ：すべてのタブ 23 SFDC
24. 画面イメージ：何度か移動した後 24 SFDC
25. 課題 • Salesforce Classic 限定 • サイドバーがない場合は使用できない • 設定画面、Chatter、レポート等・・・ → ブラウザ拡張なら解決できるはず • クロスドメイン制約で上位ページにアクセスできない • ページタイトルが取れない • クエリ文字列（＝パラメータ）が取れない → VisualforceとApexでカバーできるかも → ブラウザ拡張なら（略 25 SFDC
26. まとめ • HTML5のWeb Storageが便利 • 大容量 • 操作性が良い • サイドバーのVisualforceエリアは制約が厳しい • サイドバーが必要 • クロスドメイン制約がある • JSONのデータ構造の設計が難しい • だれか教えてください 26