読者です 読者をやめる 読者になる 読者になる

dackdive's blog

新米webエンジニアによる技術ブログ。JavaScript(React), Salesforce, Python など

follow us in feedly

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

Lightning Salesforce

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

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

  1. Lightning Component タブとして表示
  2. Visualforce に Lightning Component を埋め込み、Visualforce として表示
はじめに注意

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

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

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

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

1. Lightning Component タブとして表示

ここにも書いてある方法。 Add Lightning Components to Lightning Experience | Lightning Components Developer's Guide | 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>

$Lightning.use に指定するのが先ほど作成したアプリケーションで、
$Lightning.createComponent に指定するのが <aura:dependency> で宣言したコンポーネント

このとき、アプリ/コンポーネントの前に名前空間が必要かとか、
私のドメインじゃなくてもいいのかとかがよくわかっていない。

(2015/11/13追記) 名前空間は指定する必要があるようです。

アプリケーションに追加する

カスタムアプリケーションを作成するか、既存のアプリケーションにページを追加しておく。

Lightning Experience でアクセスする

1 のときと同じようにアプリケーションランチャーから作成した Visualforce ページまでたどる。

が、私の場合は下記のエラーが出て表示ができなかった。
(2015/11/13追記) ちゃんと表示されるようになった。

f:id:dackdive:20151113102759p:plain

(↓昔正常に表示されなかったやつ) f:id:dackdive:20151109211633p:plain

Uncaught error in $A.run() : Cannot read property 'charCodeAt' of undefined

(Salesforce Classic でも同様のエラーが出る)

(メモ)このへんと同じような話なのかな。。。
apex - Lightning components ui:inputNumber and ui:outputNumber, others don't work properly when created from a Visualforce page - Salesforce Stack Exchange