Winter'17 リリースノート輪読 ~Lightning編~

## 自己紹介

- 山﨑　真吾
- 株式会社チームスピリット
- Twitter: [@zaki___yama](https://twitter.com/zaki___yama)
- Qiita, GitHub: @zaki-yama

---

## はじめに

リリースノートのうち、

* [Lightning Experience](https://releasenotes.docs.salesforce.com/ja-jp/winter17/release-notes/rn_lex.htm?edition=&impact=) 
* [開発 > Lightning Component](https://releasenotes.docs.salesforce.com/ja-jp/winter17/release-notes/rn_lightning.htm?edition=&impact=)

から気になった機能をいくつか紹介します。

ほとんど先日の開発者向け Webinar で話されてたやつです。

---

## 目次

:star: は開発者向け Webinar で紹介済み

* Lightning Experience 編
    * :star: ナビゲーションバー
    * :star: カスタムアプリケーションの作成
* Lightning Component 編
    * LockerService 延期
    * `e.force:navigateToComponent`
    * Lightning App での Lightning Design System の使用
    * :star: Lightning アクション
    * :star: Lightning Data Service

---

## Lightning Experience (LEX) 編

---
## ナビゲーションバー

これまでの左側のメニューが刷新され、Classic と同じように上部に表示。

![SS_2016-10-27_2_48_48.png](https://qiita-image-store.s3.amazonaws.com/0/36518/854c4ac6-6482-318f-5c72-a2212003a69c.png)

([Winter '17 開発者向け新機能Webセミナー
 p9](http://www.slideshare.net/DeveloperForceJapan/winter-17-web/9) より引用)

---

## アプリケーションランチャー

どのアプリを開いていても素早くアプリ切り替えが可能に。

![SS 2016-10-27 3.12.57.png](https://qiita-image-store.s3.amazonaws.com/0/36518/742e30a3-52c8-eb1b-09ad-50fc65cc09e6.png)


---

## カスタムアプリケーションの作成

LEX 用アプリケーション。ロゴやブランドカラーなどカスタマイズ可能。
（設定は アプリケーション > アプリケーションマネージャ　から）
![SS 2016-10-27 1.49.59.png](https://qiita-image-store.s3.amazonaws.com/0/36518/33b8060e-869d-b7b6-b5b1-61498aba6a8b.png)

---

## (続)カスタムアプリケーションの作成

- Classic アプリと Lightning アプリが「アプリケーション種別」で区別される
- アプリケーション種別:Lightning じゃないと LEX では表示されない

![SS_2016-10-27_3_03_40.png](https://qiita-image-store.s3.amazonaws.com/0/36518/81f6b6da-903b-bc74-c721-725310867bd4.png)

---

## 気になったので<br />調べてみたこと

---

## Q. 「アプリケーション種別」の違いって何で生じるの？

A. Classic 画面で作成したアプリは Classic, LEX で作成したアプリは Lightning です。

メタデータ的には `CustomApplication` に
`<uiType>Lightning</uiType>` がついてるのが Lightning のようです。

（かわりに、Classic には `<defaultLandingTab>` が入ってたり）

---

## Q. (続)「アプリケーション種別」の違いってどこで生じるの？

Classic から Lightning へは「アップグレード」により変換することができます。
変換といっても Classic 版はそのままで新たに Lightning 版が作成されます。

![SS 2016-10-27 2.41.06.png](https://qiita-image-store.s3.amazonaws.com/0/36518/a11da429-9c8a-469a-1ded-1f16cc228c0f.png)


---

## Q. 結局、ナビゲーションバーに表示できるアイテムは何種類？

A. 基本、ユーザインタフェース > タブ　で作成できるタブがそれに該当します。
（Summer'16 までのメニューと変わらず）

1. カスタムオブジェクト
2. Visualforce
3. Lightning Component  
`implements="force:appHostable"` するやつですね
4. Lightning ページ  
App Builder で作成したページのこと

加えて、なぜか「アプリケーションランチャー」が選べる

![SS_2016-10-27_3_12_06.png](https://qiita-image-store.s3.amazonaws.com/0/36518/2e48ae26-281f-8fa1-551e-c43538e9ec9e.png)

---

## Q. アプリケーションランチャーからアプリを非表示にするには？

A. 「アプリケーションメニュー」という設定があり、そちらで表示／非表示を設定できます。

![SS 2016-10-27 2.39.01.png](https://qiita-image-store.s3.amazonaws.com/0/36518/cdca9c99-2fe9-daf7-5f10-a7b3ee4a1535.png)



---

## Lightning Component 編

---

## LockerService の有効化 -> Spring'17 に延期

LockerService については:

- [Summer'16 リリースノート](http://docs.releasenotes.salesforce.com/en-us/summer16/release-notes/rn_lightning_locker.htm)
- [Summer '16 開発者向け新機能 Webセミナー p55](http://www.slideshare.net/DeveloperForceJapan/summer-16-web/55)

元々 Summer'16 でON/OFF切り替え可能、Winter'17 から適用のはずだった

![summer-16-web-55-638.jpg](https://qiita-image-store.s3.amazonaws.com/0/36518/40a5a95b-9788-258c-cf7a-b0fa3d8c3ea1.jpeg)


---

## [英語] [`e.force:navigateToComponent` (Beta)](https://releasenotes.docs.salesforce.com/en-us/winter17/release-notes/rn_lightning_navigateToComponent.htm) 

コンポーネント間遷移を実現するイベント。ベータ

```javascript
navigateToMyComponent : function(component, event, helper) {
  var evt = $A.get("e.force:navigateToComponent");
  evt.setParams({
    componentDef : "c:myComponent",
    componentAttributes: {
      contactName : component.get("v.contact.Name")
    }
  });
  evt.fire();
}
```

試してないです

---

## Lightning App での　Lightning Design System の使用

* `extends="force:slds"` つけると LDS が自動で読み込まれます
* **常に最新バージョン = バージョン固定できない**　（のはず）。。。

![SS 2016-10-27 12.23.39.png](https://qiita-image-store.s3.amazonaws.com/0/36518/f1deee6e-d9f4-3ad8-22ed-d297670ba573.png)

---

## Lightning カスタムアクション

* レコード詳細画面のボタンから Lightning Component を起動
* コンポーネントに `implements="force:lightningQuickAction"` をつける
    * または `force:lightningQuickActionWithoutHeader`
![SS_2016-10-27_4_40_10.png](https://qiita-image-store.s3.amazonaws.com/0/36518/bad97845-8bc2-a001-5b60-fc131391212c.png)


---

## Lightning Data Service (Developer Preview)

* Visualforce でいう Standard Controller
* Apex を使わずにレコードの取得や保存が行える
* **FLS（項目レベルセキュリティ）が自動的に考慮される**（[参考](http://qiita.com/mokamoto/items/84c967b8643b89de19fe#lightning-data-service-%E9%96%8B%E7%99%BA%E8%80%85%E3%83%97%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC)）

```xml:コンポーネント
<force:recordPreview aura:id="propertyService" 
                     recordId="{!v.recordId}" 
                     targetRecord="{!v.property}" 
                     fields="['Id', 'Status__c']"
                     recordUpdated="{!c.recordUpdated}"
                     mode="EDIT" />
```

```javascript:コントローラ(JS)
recordUpdated : function(component, event, helper) {
var changeType = event.getParams().changeType;
    if (changeType === "CHANGED") { 
        var service = component.find("propertyService");
        service.reloadRecord();
    }
}
```

---

## DEMO

* [DreamHouse アプリ](http://www.dreamhouseappjp.io/installation/) をインストールしよう
* それぞれの機能に対応するコンポーネントは以下
    * Lightning アクション： `SmartHome, SmartHomeCard`
    * Lightning Data Service： `PropertyStatus`
* インストール面倒、という方は [Dreamforce Dev Keynote のデモ](https://youtu.be/RMKFTLtn0-E?t=13m42s) をご覧ください
    * [Keynote の内容紹介記事](http://dackdive.hateblo.jp/entry/2016/10/07/141611) も書いた


---

## 余談ですが: Lightning Utility Bar?

* 画面の下からにょきって出て来るアレ
* Dreamforce のデモで見たけどリリースノートではまだでした
* [DreamHouse 英語版](http://www.dreamhouseapp.io/installation/) の方をインストールすると表示されます

![SS 2016-10-27 12.18.45.png](https://qiita-image-store.s3.amazonaws.com/0/36518/76d5e3b2-0eca-866f-842d-fc8b41b2f1b1.png)