海外のLightning Componentのサンプルを試してみよう

Salesforce App Cloud Advent Calendar 2015の17日目の記事ということで海外のDeveloperがつくったLightning Componentのサンプルについて投稿したいと思います。

#はじめに
今回は海外のDeveloperがつくったLightning Componentのサンプルについて紹介します。サンプル自体は検索するといくつか見つかると思うのですが、今回おもしろいサンプルが2つあったのでそちらを紹介したいと思います。

#Drag-and-Drop Profile Pictures
Salesforce Developers Blogで公開されているサンプルコードです。ドラッグ&ドロップで添付ファイルをアップロードできるLightning Componentを試すことができます。
<img width="1277" alt="スクリーンショット 2015-12-16 20.10.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/8407/8bb6858a-9fde-aad1-ec29-518f550d6ecb.png">
>Create a Lightning Component for Drag-and-Drop Profile Pictures
>https://developer.salesforce.com/blogs/developer-relations/2015/11/create-lightning-component-drag-drop-profile-pictures.html


例えばLightning Experience版のAppBuilderで商談レイアウトに追加できます。
<img width="1279" alt="スクリーンショット 2015-12-16 19.23.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/8407/8faa73c9-cc19-a651-70ac-a297995445db.png">

このように表示されます。
<img width="1272" alt="スクリーンショット 2015-12-16 19.24.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/8407/2bc49218-a543-397e-6cff-16dac08af9a9.png">

こんな感じで画像をドラッグ&ドロップしてあげると・・・
![スクリーンショット 2015-12-16 19.30.11.png](https://qiita-image-store.s3.amazonaws.com/0/8407/e686bbc7-53dd-20ca-1f49-5ce58b11c088.png)

画像が表示され『Uploading...』と表示されます。
<img width="200" alt="スクリーンショット 2015-12-16 19.32.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/8407/192811e3-aecd-61e5-f5f1-776180f22950.png">

『Image uploaded』と表示さればUpload完了です。商談レコードに紐付く添付ファイルを1件保存できました。
<img width="1271" alt="スクリーンショット 2015-12-16 19.34.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/8407/f4dba82d-8eeb-0765-f4db-7ad02b6f2748.png">

画面をリフレッシュするとメモ&添付ファイルの関連リストに先ほどアップしたファイルが追加されていることを確認できると思います。
<img width="1271" alt="スクリーンショット 2015-12-16 19.35.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/8407/666f00ba-74a6-1682-0d38-57de48462722.png">

このようにドラッグ&ドロップでファイルアップロードする方法を確認できる便利なサンプルコードとなっています。

このやり方を覚えておけばいろんな場面で役立ちそうです。

##補足
注意点というほどではありませんが、容量の大きいファイルをアップロードしようとするとシステムエラーになりました。(2MB〜3MBぐらいで確認) エラーが発生してアレ？っとなったときはファイルサイズを確認してみてください。

##開発ポイント
① force:hasRecordId
implementsで"force:hasRecordId"が宣言されています。force:hasRecordIdはWinter'16で追加された関数でレコードIDを取得できるみたいです。

```html:ProfilePicture.cmp
<aura:component controller="ProfilePictureController" implements="force:hasRecordId">
  <!-- 略 -->
</aura:component>
```

②DesignとLabel
Lightning ComponentのDesignファイルでlabelを宣言できます。これでAppBuliderで表示する際のラベルをカスタマイズできます。

```html:ProfilePicture.design
<design:component label="Lightning ProfilePicture">
  <design:attribute name="message" label="Message"/>
</design:component>
```

<img width="200" alt="スクリーンショット 2015-12-16 20.09.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/8407/f8c9c14a-d120-3198-d2ec-ddcccaaf92df.png">

#Account Tree
もうひとつはLightning ComponentとLightning Design Systemのサンプルコードです。取引先のツリー表示を試すことができます。
<img width="1277" alt="スクリーンショット 2015-12-16 20.16.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/8407/15946019-e58c-bb39-aa72-58fcbd8f7691.png">
>How to use Nested Components in Lightning Component Using Salesforce Lightning Design System
>https://sushilkumardeveloper.wordpress.com/2015/11/05/how-to-nested-components-in-lightning-component-using-salesforce-lightning-design-system/

先ほどと同じようにAppBuilderでレイアウトに追加します。
<img width="1271" alt="スクリーンショット 2015-12-16 23.58.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/8407/7f642faf-1c0f-c2a1-7901-e3aef2120596.png">

Lightning Design Systemのツリー表示ができるサンプルで、取引先名をクリックすると取引先責任者一覧の表示/非表示が切り替わります。
<img width="1274" alt="スクリーンショット 2015-12-16 23.59.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/8407/eaaf9ef8-ba92-5a3a-7c57-22f91e8ccc0a.png">

Lightning Design SystemのJS部分は自分で実装する必要があったので、その辺りの対応方法的なサンプルにもなると思いました。

この取引先ツリー表示コンポーネントを試す時ですが、事前にもう一つコンポーネントを作成する必要があります。Lightning ComponentでのSVG表示部分をコンポーネント化したサンプルです。こちらもかなり参考になるコンポーネントだと思います。
>How to use SVG Icon in Lightning Component Using Salesforce Lightning Design System
>https://sushilkumardeveloper.wordpress.com/2015/11/05/how-to-nested-components-in-lightning-component-using-salesforce-lightning-design-system/

#サンプルコード
今回試したコードはそれぞれのブログ内で紹介されています。自分が試して少しさわってみたコードはGitHubにアップしてあります。
>tyoshikawa1106/lightnng-component-global-sample-code
>https://github.com/tyoshikawa1106/lightnng-component-global-sample-code


これでドラッグ&ドロップとLightning Design Systemをつかったツリー表示について確認することができました。

#その他の参考ブログ
上記で2つのサンプルコードについて紹介しましたが、他にもさまざまなサンプルコードが見つかると思います。興味のある方は検索してみると思わぬコードに出会えるかもしれません。

- <a href="https://developer.salesforce.com/blogs/developer-relations/2015/02/lightning-components-sample-app-belgian-beer.html" target="_blank">Lightning Components Sample App: Belgian Beer Explorer</a>
- <a href="File Upload Lightning Component" target="_blank">File Upload Lightning Component</a>
- <a href="http://bobbuzzard.blogspot.jp/2015/12/lightning-component-wrapper-classes.html" target="_blank">Lightning Component Wrapper Classes</a>


以上、海外のDeveloperがつくったLightning Componentについてでした。