※Salesforceコミュニティイベント「Japan Dreamin' 2020」登壇スライドです。 Lightning Championとして何か一つ、と考えて最近の主要アップデートであるLEX Mobileを題材にしてみました。 「なんで変えるの？」「実際なにが変わるの？」と疑問に思われる方も少なくないのでは。 温故知新の精神で開発史を学ぶことで、Lightning Experienceの意義や方向性を知る機会になればと思います。

1. LEXモバイルから紐解く
Salesforceモバイル史
For Japan Dreamin’ 2020
株式会社チームスピリット
畑本 貴史

2. 自己紹介
はたもと たかし
畑本 貴史
株式会社チームスピリット エンジニア
普段は自社製品(TeamSpirit)開発してます！
• AIアプリコンテスト2018 優勝チーム(ロボホンズ)
• Salesforce Developer Group Tokyo 運営
• Lightning App Dev Champion (2019～)

3. 「LEXモバイル」
もう試しましたか？

4. 皆さんは、「LEXモバイル」もう試しましたか？
Salesforceの「新しいSalesforce モバイルアプリケーション」で利用できる機能
• 従来の 「Salesforce Mobile」の後継
Spring’20 から全組織向けに適用されます。
みなさん、準備はできてますか？

5. 皆さんは、「LEXモバイル」もう試しましたか？
画面イメージ
• 詳細画面のレイアウトが変わってる！？
• アクションの位置が違う？

6. で、どう変わったの？
つまり、いったいどうなるの？
• ホーム画面メニューもアクションも基本的に前と同じっぽい
• 言うほど変わってない？
• 新機能とかないの？
・・・一緒に考えてみましょう！

7. 温故知新の精神
そもそも最初は、どんなものだったのか？
• 最近Salesforce始めたのに、5～10年前のことなんてよくわからないし・・・
• 「そんなに変わってない」と思う人もいるかも
モバイル対応の歴史＝モバイル端末の歴史
• 現状の仕様は「歴史的経緯の積み重ね」の中にある
• 過去の歴史を知ることで、現状をよりよく理解できるのでは？

8. Salesforceモバイル史を振り返る

9. Salesforceのモバイル対応開始
Salesforce最初のモバイル対応
2006年に買収した「Sendia」の技術を使用
→「AppExchange Mobile」のリリース
• 利用端末は主にBlackberry・Treo(Palm)
• 主要機能
• 標準オブジェクトのレコード閲覧・編集
• 活動(行動/ToDo)の登録
• レポート・ダッシュボード実行
• Salesforceのデータをモバイル端末で閲覧可能な
レイアウトに成形・出力

10. 当時の「スマートフォン」事情
当時、欧米で主流だった「PDA」の流れを汲むスマートフォン
PDA：”Portable Digital Assistant”
特徴
• PC用のデータを閲覧・編集できる
• PCのUIを踏襲→タッチペン・フルキーボード搭載機多数
→外出先でデータを見られる「電子手帳」的な存在

11. 一方、日本では・・・
日本市場で独自に発達した携帯電話(「ガラケー」)
日本市場スマートフォンの特徴
• 携帯電話独自のハードキーUI→テンキー+四方向カーソルで操作
• キャリアにより統制された独自かつ豊富なコンテンツ配信
• iモード→携帯電話のみの利用を前提としたWebサイトの増加(ケータイ小説、mixi、モバゲー等)

12. こんなソリューションもあったらしい
iModeブラウザでSalesforceのデータを表示・編集するAppExchange
• iModeブラウザではSalesforceのデータを
直接表示できない
→Apexでデータを成型し、Webサーバを
経由して画面表示

13. モバイル端末の運用課題
PCと異なる画面レイアウト設計の必要性
• 画面が小さく、PCと同じ情報量を一度に表示しきれない
→縦スクロールを前提とした画面設計
PCに比べ貧弱な端末性能
• 当時の端末・ブラウザではJavascriptで満足な描画処理・データ展開処理ができない
→モバイル端末で処理しやすくするため簡易なフォームを成型表示
信頼性に乏しい回線インフラ
• 地下・屋外ではアンテナが十分に敷設されておらず、たびたび圏外に
→通信不能でもデータを棄損しないため、専用アプリケーションを用意
・・・PC用データをモバイルで運用する場合には、モバイル独自の工夫が必要だった

14. 世代ごとの実装モデルまとめ①
モバイル端末の性能の制約のため、PCのリソースをそのまま取り扱うことはできない
• 処理性能、通信速度の不足→なるべく軽量化した
• 受信しやすいようにデータを選別
サーバーサイド、クライアントともに専用実装
• モバイルブラウザでは使えない通信プロトコル利用のためアプリ実装
1.モバイル初期の実装
PC用UI
(Classic)
モバイル
アプリ

15. その後、モバイル市場に異変が！？
2008年 Apple「iPhone」登場
• メディアプレイヤー「iPod」から派生したスマートフォン
• 独自開発の端末・ソフトを使用した全く新しいモバイル端末
2009年 「Android 2.0」登場
• 初期バージョンはPDA系OSとして開発したものの、iPhoneのエッセンスを取り込み進化
• OSSで提供され、既存のモバイルプラットフォームを駆逐
・・・以後、「スマートフォン」はこれらの端末を指すようになる

16. iPhone以後のスマートフォンがもたらした「革命」
マルチタッチを前提としたリアクティブなUI
• ハードキーを排除し、タッチ&ジェスチャーによる直感的な入力を実現
→表示するWebページに
PC用を含む充実したコンテンツ対応
• ブラウザの性能がPC並みに強化
→HTML5+Javascriptによるリッチコンテンツ描画対応
アプリストアの展開によるモバイルアプリケーションの開発振興
• 開発者が自由にアプリを公開でき、ユーザが容易にアプリを利用できる配信システム
• モバイルアプリ開発への参入が急増
• →各ソリューションとの連携を目的としたアプリの増加
・・・モバイルアプリとの連携が必須要件となる

17. それに対し、Salesforceは・・・
1.コミュニケーションサービス「Chatter」の提供開始
• モバイル端末との親和性の高いコミュニケーションサービスの導入
• SNSでよく利用されるフィードベースのテキスト投稿
• ユーザやレコードに対してフィードを登録可能
→テキストコメントによって簡便なコミュニケーションが可能
• Chatter画面から実行できる「パブリッシャーアクション」
• 個別入力フォームを呼び出すボタンを定義
→モバイル画面で表示できる必要十分な入力画面を作成できる
• 目的別のアクションを作成し、ユーザが入力内容を迷わないようにナビゲート
• Chatter REST APIの提供
• SNSクライアントの開発者がChatter対応アプリを開発可能に
→Twitter・facebook等の汎用SNSアプリもChatter投稿可能に

18. 余談：こんなサービスもあった
Chatter Messenger
• Chatterユーザ同士のチャットツール
Chatter Desktop
• Chatterのフィード投稿、Messenger機能を持ったPCアプリ
• SlackやTeamsの先駆け！？
→(Yahoo!Messengerとかの後追いな気がする・・・)
• PCユーザ同士の緻密なコミュニケーション用
※2018年に廃止されました

19. モバイル普及期におけるSalesforceの切り札
2.「Mobile SDK」の提供
• Salesforce連携可能なモバイルアプリケーションの開発ツール提供
• HTML+Javascriptベースの簡易アプリケーション
• 最低限のコーディングで自由に画面を作成
• ネイティブコードで複雑な処理を行うアプリケーション
• HTMLで画面を作成し、要所でネイティブコードを使うハイブリッドアプリケーションも作成可能
→いずれの場合も、Salesforceとの連携部分を容易に実装できる
かつ、モバイルに特化した自由な画面レイアウト作成が可能

20. 世代ごとの実装モデルまとめ②
Chatter活用によるリアルタイムコミュニケーション
• 軽量なテキストベースでのデータ入出力→レスポンスの向上
• 受信しやすいようにデータを選別
Chatter関連のリソースはPCとモバイルで共有可
2.Chatter時代 の実装
Chatter領域は
PC・モバイル共通
その他標準機能は
モバイル独自の設定

21. 環境統合の試み：Salesforce1
2013年、新しいSalesforce公式アプリ「Salesforce1」を公開
• 現「Salesforce Mobile」のベースとなった
専用アプリだけでなく、ブラウザからも同じUIでアクセス可能
• 特定URLを入力することでPCからも閲覧できる

22. Salesforce1の狙いとは
新たなモバイル機器「タブレット」の登場
• 2010年 Apple「iPad」発売
• iPhoneベースながらノートPC相当の大画面を搭載
• 2012年 Microsoft「Windows 8」発売
• iPadを意識したタッチ対応、アプリストア
「第3のOS」を視野に入れた対応
• 第3のOS：iOS、Androidに続く第三極となるスマートフォンOS
• Windows Phone ←正式サポートあり
• Firefox Phone
• Ubuntu
• Tizen

23. そして、Lightning Experienceへ
2015年 PC向け新UI 「Lightning Experience」(LEX)の発表
• 旧来デスクトップ環境は「Classic」と定義され、段階的な移行が始まる
• 実はPCブラウザ版「Salesforce1」の後継(URLにその名残あり)
SPA(単一ページアプリケーション)化を主軸としたユーザ体験の改善
• ブラウザの機能向上を前提としてHTML5+Javascriptをフル活用したレスポンシブデザイン
• カスタマイズ性の高まった「アプリケーション」
• パス・Kanban等標準コンポーネントの強化
• 画面コンポーネント・アクションを自由に埋め込める「Lightning ページ」
• 内部処理を含む画面やトリガをLow-Code実装できる「フロー」
• LEXでの利用に最適化された「Lightning コンポーネント」

24. 世代ごとの実装モデルまとめ③
PC用UIのリニューアル
• モバイルとのリソース共用を視野に入れたUI
モバイルブラウザ・アプリの機能統一を目指す
3.Salesforce1 → Lightning Experience時代 の実装
Classic
Lightning
Experience モバイル
アプリ
ブラウザ
一部リソース共有

25. Lightning Experience Mobile

26. Lightning Experience Mobile（本題）
2020年「新しいモバイルアプリケーション」で利用可能
• Lightning Experience用に作られたリソースをモバイル化
• 複数のアプリケーションを切り替え可能
• ナビゲーションバー領域追加
ブラウザアクセスを廃止し、アプリ専用に
• 「第3のOS」は、結局来なかった・・・
• 最新のハードウェア機能を利用するため専用アプリに
• 生体認証
• ボイスアシスタント

27. 1.アプリケーションランチャーの追加
従来のアプリでは「モバイルナビゲーション」1種類のみ
→LEX Mobileでは許可した全アプリケーションが呼び出し可能に

28. 2.Lightningページのモバイル対応
スマートフォン専用のレイアウト表示設定
今回、レコードページが新たにモバイル対応

29. 3.ナビゲーションバーの追加
従来最下部に設置されていたアクションの代わりに、ナビゲーション一覧が設置
• ナビゲーション(タブ)のうち、優先度の高いものを常時表示
• Spring’20アップデートで更にカスタマイズ性が向上
アクションの一覧は代わりに画面中部に
•

30. 4.その他：Einstein Platformへの対応
Einstein Analyticsのモバイル対応
• Analyticsダッシュボードへのアクセス
Einstein Voiceへの対応
• OS標準のボイスアシスタントからEinstein Voiceへの連携が可能に

31. 世代ごとの実装モデルまとめ④
モバイルにもLightning Experienceを
• PCと同内容のコンポーネントを利用することで情報量向上
モバイルブラウザ・アプリの機能統一
→LEX対応が進むほど恩恵がある！
4. Lightning Experience Mobile 時代 の実装
Classic
Lightning
Experience
リソース共有強化
モバイル
アプリ

32. 今後モバイル向け機能はどうなっていくのか？
タブレットの扱いはどうなるの？
• Spring’20 では以下の兆候が確認されている
• iPadでLightning Experience (PCと同一)を利用可能に
• 「新しいアプリケーション」適用対象外
• Lightning アプリケーションビルダーにタブレット向けレイアウトが登場
・・・今後、タブレットとスマートフォンは分かれていく？(かもしれない)
より先進的なハードウェアへのUI対応？
• MR(複合現実)
• ウェアラブル(ヘルスケア)
現状、アプリを作れば使える
標準で対応するか？
※個人の憶測です

33. モバイルアプリのために準備して欲しいこと
1.Lightning用アプリケーションの設定
• アプリケーション設定の「サポート対象フォーム要素」でスマートフォン向けの設定が可能
• PC専用、スマートフォン専用のアプリケーションも引き続き利用可
2.Lightningページの設定
• 既存のページをそのまま使った場合、レイアウトが狭くなる場合がある
• こちらも必要に応じてPCとスマートフォンを分ける
3.ついでにデスクトップもLightning化してみる
• せっかく整備したリソース、最大限活用しないともったいない！
もちろん、もう準備できてますよね？

34. もし困ってたら・・・
Trailblazer Communityで聞け！！！
• Salesforceユーザ同士での意見交換の場です。
• SalesforceエバンジェリストによるWebinar資料が公開されています。
“Spring'20 Lightning アプリがモバイルにやってくる！の巻”
Lightning Championに聞け！！！
• Salesforceユーザの中から認定されたLightning Experienceのエキスパートです。
• LEXの導入・活用方法を学ぶWorkshopを定期開催しています。
俺に聞け！！！

35. ご清聴
ありがとうございました！