Lightning ComponentをLightning Experienceで表示する方法

気になってたんだけど、こちらのスライドに書かれてたのでメモ。
2015/11/9 現在の方法。

Lightingコンポーネントベーシック開発 from Akihiro Iwaya

方法としては2つあるらしい。

Lightning Component タブとして表示
Visualforce に Lightning Component を埋め込み、Visualforce として表示

はじめに注意

スライドにも書かれていることですが、Winter'16 の時点では

Lightning App Builder でコンポーネントを組み合わせて Lightning ページを作成することができるが、
作成したページは Salesforce1 (モバイル) でしか見ることができない。
開発者コンソールから Lightning アプリケーションをプレビューすることができるが、これも LEX 上に表示することはできない。

表示に使用するコンポーネント

Lightning コンポーネント開発者ガイドで登場する expenseTracker を使った。

f:id:dackdive:20151109202023p:plain:w300

1. Lightning Component タブとして表示

ここにも書いてある方法。 Salesforce Developers

表示用のコンポーネントを作る

expenseTracker は、最上位の expenseTracker.app (.cmp ではない) の下に form.cmp と expenseList.cmp が含まれている。
このように複数のコンポーネントから成るアプリを表示させたい場合は
タブにするための最上位のコンポーネントを作成してやる必要がある。

また、タブ化するためには force:appHostable を implement する必要がある。

<!-- PreviewCmp.cmp -->
<aura:component implements="force:appHostable">

    <link href='/resource/bootstrap/' rel="stylesheet" />

    <div class="container">
        <h1>Add Expense</h1>

        <!-- Add the component here -->
        <zakiyama:form />
        <zakiyama:expenseList />
    </div>
</aura:component>

ほんとに一番外側だけ <aura:application> から <aura:component> に差し替えた感じ。

Lightning コンポーネントタブを作成する

作成 > タブ > Lightning コンポーネントタブ

から新規で作成し、先ほどのコンポーネントを選択する。

f:id:dackdive:20151109202948p:plain

カスタムアプリケーションを作成する

今度は

作成 > アプリケーション

から、新規カスタムアプリケーションを作成する。

「ステップ4. タブの選択」のところで先ほど作成した Lightning コンポーネントタブを選択しておく。

f:id:dackdive:20151109203107p:plain

Lightning Experience でアクセスする

右上のアプリケーションランチャーアイコンを選び

f:id:dackdive:20151109203318p:plain

作成したカスタムアプリケーションから、タブを選択すれば OK。

f:id:dackdive:20151109203328p:plain

f:id:dackdive:20151109203430p:plain

...なんか サイドメニューが消えてる 気がするけど、気にしない。

2. Visualforce に Lightning Component を埋め込み、Visualforce として表示

結論から言うと、こちらはうまくいかなかった。
一応、スライドや開発者ガイドに記載されている通りの手順と、実行結果を残しておこうと思う。
↓
（2015/11/13追記）
ちゃんと表示されるようになりました！どうやら、2015/11/13 あたりに Salesforce のパッチアップデートがあったようでうす。
Lightning Trailblazers グループに所属している方はこちらの投稿を参照のこと。
https://org62.my.salesforce.com/_ui/core/chatter/groups/GroupProfilePage?g=0F930000000LREP&fId=0D53000002Lbbaf

（追記ここまで）

いわゆる Lightning Component for Visualforce(LC4VF) を使った方法。
LC4VF についてはこのあたりを読むと良い。

Lightning アプリケーションを作成する

LC4VF 用にアプリケーションを作成する。

<!-- LC4VF.app -->
<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="PreviewCmp" />
</aura:application>

access やら extends やらつける必要がある。
また、使用するコンポーネントは <aura:dependency> で定義する。

Visualforce を作成する

基本的な書き方はこうなる。

<apex:page >
    <!-- 2015/11/13 あたりのアップデートで includeLightning という簡潔な書き方ができるようになったそう -->
    <!-- <apex:includeScript value="/lightning/lightning.out.js"/> -->
    <apex:includeLightning />
    
    <div id="lightning" />
    
    <script>
      // zakiyama は namespace
      $Lightning.use("zakiyama:LC4VF", function() {
          $Lightning.createComponent("zakiyama:PreviewCmp",
              {},
              "lightning",
              function(cmp) {
                  // do some staff
              });
      });
    </script>
</apex:page>