How to Lightning Components – Part 1
みなさんこんにちは。吉川です。今回、Force.com MVPとしてWinter’15でベータ版として公開されたSalesforceの新しいフレームワーク『Lightning』についてForce.com Blogに寄稿させて頂きます。Lightningとはコンポーネントベースのフレームワークです。これを利用することで革新的なモバイルアプリケーションを、短時間で構築することが可能になります。このLightningの開発環境の構築方法から実際にアプリケーションを作って動かすところまで全3回に分けて紹介したいと思います。
Force.com MVP (Spring’14)
Salesforce経験：約4年 (2010年7月～)
Twitter
Blog
Salesforce Developer Editionにサインアップ
まずは開発環境の構築方法についてです。Salesforceでは開発者なら誰でも自由に使えるDeveloper Edtionが用意されています。アカウントを作成するだけで自分専用の環境を簡単に準備することができます。Developer EdtionのアカウントはSalesforce Developersのページから作成できます。
画面右上のサインアップボタンをクリックするとユーザ情報を入力するページが表示されます。必要事項を入力してサインアップボタンをクリックしてください。これだけでDeveloper Edtionのアカウントが作成されます。「Salesforce ログインのお知らせ」というメールが届きますのでメールの指示通りにパスワード設定等を行って下さい。設定完了後にDeveloper Edtionにログインすることが可能になります。
これで開発者用の環境を準備できました。簡単ですね。初回ログイン時はいろいろと通知が表示されていますが、これはクリックひとつで非表示にできます。確認した情報は非表示にしておくと画面がスッキリすると思います。
Lightningの有効化
開発環境も準備できましたので、実際にLightningアプリ開発を行ってみたいと思います。まずはじめにLightning機能を有効化する必要があります。設定画面の左上にある検索ボックスにAuraと入力してください。Aura バンドルというメニューからLightningを有効化できるようになっています。
「Enable Lightning Components」にチェックをつけてSaveボタンをクリックしてください。これで有効化が完了です。有効化すると「Aura デバッグモードを有効化」が表示されるのでこちらにもチェックをつけておいてください。
名前空間プレフィックス(namespace)の登録
Lightningアプリを開発するには組織で使用する名前空間プレフィックスを登録する必要があります。設定画面の検索ボックスに「パッケージ」と入力してください。パッケージというメニューから登録できるようになっています。
開発者設定の右側にある編集ボタンをクリックすると設定画面が表示されます。最初に注意事項が表示されるので内容を確認してから、次へボタンをクリックしてください。
次の画面が名前空間プレフィックスの登録画面です。他のSalesforce組織も含めて一意になる名称を指定する必要があります。ここで指定した名称はLightningアプリ開発で使用することになります。一度登録した内容は変更できないので注意してください。(管理するパッケージの方は、特に指定する必要はありません。)
選択内容の確認ボタンをクリックすると登録情報の確認画面が表示されます。間違いがなければ保存ボタンをクリックしてください。
これで名前空間プレフィックスの登録が完了しました。
– 補足 –
リリースノートによるとSpring’15のバージョンアップで名前空間プレフィックスの設定は不要になる予定とのことです。
LightningアプリでHello World
Lightningの有効化と名前空間プレフィックスの登録、この2つが完了すればLightningアプリ開発を行うことができるようになります。それでは実際にHello Worldと表示するアプリを作ってみましょう。Lightningアプリの開発は開発者コンソールで行います。右上のメニューから開発者コンソールを起動してください。
開発者コンソールを起動すると左上にメニューが表示されています。「File」→「New」→「Lightning Application」の順番で選択してください。
次のように「LightningHelloWorld」と名前を指定してSubmitボタンをクリックしてください。
これでLightning Applicationが作成されます。
それでは次のように『aura:application』タグの間に『Hello World』と入力してください。キーボードの「ctrl + s」で保存できるので、変更結果を保存してから右側のPreviewと表示されている部分をクリックします。
Lightning Applicationで”Hello World”を表示できます。
ひとまずLightning ApplicationのHello Worldを確認することができました。それではLightning Componentを作成して今のHello Worldをコンポーネント化したいと思います。「File」→「New」→「Lightning Component」の順番で選択してください。
名称は「LightningHelloWorldComponent」で作成してください。
Lightning Applicationのときと同じようにHello Worldと入力します。これでLightning Componentの準備は完了です。
次の書き方でLightning ApplicationからLightning Componentを呼び出すことができます。
Lightning Componentの呼び出し方法ですが、「名前空間プレフィックス:コンポーネント名」というルールになっています。名前空間プレフィックスは組織ごとに異なるので、開発者ドキュメントなどのサンプルコードを試す際には注意してください。
PreviewをクリックするとLightning ComponentのHello Worldが表示されることを確認できると思います。
以上で開発環境の構築方法とLightning Application/Lightning Componentを作成してHello Worldを表示するところまで確認できました。次回、Part 2ではCSSの設定とJavaScript処理の実装方法などについて紹介します。
今回使用したサンプルコードはこちらで公開してあります。
