nkjmkzk.net

powered by Kazuki Nakajima

Archive for the ‘lightning’ tag

Lightningコンポーネント開発のケーススタディ

2015/5/12にSalesforce1 Lightning Fast Seminarが開催され、その中でコンポーネント開発のケーススタディについてお話ししました。

このコンテンツを前撮りしたビデオを共有したいと思います。
アジェンダはこんな感じです。

Chart.jsのデモ

  • サンプルページを用いたイントロダクション
  • アプリケーションビルダーでのページ作成デモ
  • Salesforce1へページを表示

Cellのデモ

  • サンプルページを用いたイントロダクション
  • 開発者コンソールでのページ作成デモ
  • Auradocsでのリファレンス確認方法説明

家計簿のデモ

  • イベントを使ったコンポーネント同士の連携
  • Lightningアプリケーション開発にかかった工数

Enjoy.

without comments

Written by 中嶋 一樹

5月 12th, 2015 at 10:20 pm

Excelライクな表形式フォームを埋め込むLightningコンポーネント「Cell」をリリースしました

Salesforce上の複数レコード一括で更新したい場合、どのような方法があるでしょうか?

  • データインポートウィザード
  • データローダー
  • SOAP API
  • Bulk API

Geekなみなさんであればどれでもできそうですが、普通の人がおこなうには敷居が高い。
また、できるのはできるけど、データインポートウィザードなどは10件程度のデータを毎日のように扱う場合には面倒。
APIはわざわざプログラム組むまでやるのでは面倒。
ということで何かと面倒です。

そんなとき、Excelみたいな表形式でデータを編集して、それをそのまま保存できれば便利ですよね。
Cellはそんなオペレーションを可能にするLightningコンポーネントです。

使い方は簡単。

まず組織でLightningコンポーネントを有効にします。

次にCellをインストールします。インストールはこちらのappexchangeページからどうぞ。

開発者コンソールから新しいLightning Applicationを作成し、Cellを組み込みます。もっとも単純な組み込み方法は、下記のようなLightning Applicationを作成することです。

<aura:application>
  <c:Cell sobject="管理したいオブジェクト名" fields="表示する項目をカンマ区切りで" loadData="true" />
  <c:CellSaveButton />
</aura:application>

こちらの記事を参照してアプリケーションプルダウンメニューからこのLightning Applicationにアクセスできるようにします。

以上です。こんなLightning Applicationが作成されたら完成です。下図の例ではsobjectにとあるカスタムオブジェクトを指定しています。

スクリーンショット 0027-04-17 10.20.27

まじで簡単ですね。

ロードするデータを絞りこみたい場合は、下記のようにSOQL文をqueryにセットすることで可能です。

<aura:application>
  <c:Cell sobject="管理したいオブジェクト名" fields="Name, MyField1__c, MyField2__c" query="select Name, MyField1__c, MyField2__c from MyObject__c where MyDate__c = THIS_MONTH" />
  <c:CellSaveButton />
</aura:application>

各セルの値を編集してSaveボタンを押せば一括でデータが更新されます。
また、この表は右クリックでExcelと同じようなメニューがでます。Remove Rowで行を削除すると、そのデータをデータベースから削除することもできます(確認プロンプト付き)。

スクリーンショット 0027-04-17 10.23.21

単体でデータ入力・更新ツールとしても使えますが、CellはLightningコンポーネントです。
様々な要件のアプリに組み込んで利用することができます。そのあたりはスタートガイドの「コンポーネント間の連携」で紹介していますのでチェックしてみてください。

アプリの中に埋め込んで連携させている例はこんな感じ。詳しくはスタートガイドを。

スクリーンショット 0027-04-15 13.50.11

Enjoy.

without comments

Written by 中嶋 一樹

4月 17th, 2015 at 10:37 am

Lightningアプリケーションをアプリケーションプルダウンメニューに表示する方法

Lightningコンポーネントフレームワークでスタンドアローンアプリを作成したい場合、つまり、パーツではなく単体でアプリとして機能するものを作りたい場合、Lightningアプリケーションバンドルを作成することになります。

ただし2015年4月現在、LightningアプリケーションバンドルはSalesforce標準画面の右上にあるアプリケーションプルダウンメニューに通常の手段では表示することができません。

今回は、よく考えれば誰でもできるハックですが、このLightningアプリケーションバンドルを下図のようにアプリケーションプルダウンメニューに表示させる方法をご紹介します。

スクリーンショット_0027-04-16_12_39_52

スクリーンショット_0027-04-16_12_40_00

LightningアプリケーションバンドルはLightningコンポーネントバンドルとほぼ同じものですが、一意のURLが割り当てられる点が異なります。この特性を利用します。

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

まず開発者コンソールを開いてFile > New > Lightning ApplicationをクリックしてLightningアプリケーションバンドルを作成します。このLightningアプリケーションバンドルには下記のURLフォーマットでアクセスできます。

https://インスタンス名.salesforce.com/名前空間/バンドル名.app

リダイレクトを担当するVisualforceページを作成する

次にそのまま開発者コンソールからFile > New > Visualforce PageをクリックしてVisualforceページを作成します。ページの名前はなんでも構いません。Visualforceページの中身は下記のように記述します。

<apex:page showHeader="false" sidebar="false" standardStylesheets="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<html>
<head>
    <meta http-equiv="refresh" content="0; url=/名前空間/バンドル名.app" />
</head>
</html>
</apex:page>

あぁ、なるほど、と。このVisualforceページにアクセスしたらLightningアプリケーションのURLにリダイレクトするのね、ということがわかります。

タブを作成する

そしてビルド > 作成 > タブでVisualforceタブを作成し、先ほど作成したVisualforceページに紐付けます。

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

最後に、ビルド > 作成 > アプリケーションで新規アプリケーションを作成し、選択されたタブに先ほど作成したVisualforceタブを追加、そしてデフォルトの表示タブをそのVisuaforceタブにセットして保存します。

これで完成です。
アプリケーションプルダウンメニューからアプリを選択すると、下記の流れでLightningアプリケーションが表示されます。

  • デフォルトタブにセットされたVisualforceページがまずロードされる。
  • VisualforceページはすぐにLightningアプリケーションへリダイレクトする。
  • Lightningアプリケーションが表示される。

まどろっこしい仕組みですが、アクセスしてみると意外に遅延もなくスムースにLightningアプリケーションが表示されます。

現時点でLightningコンポーネントフレームワークでアプリを作ってしまいたい場合はこんな形で既存の環境でも違和感なく利用することができます。

Enjoy :)

without comments

Written by 中嶋 一樹

4月 16th, 2015 at 12:51 pm

Posted in Uncategorized

Tagged with ,

Lightning ComponentをSublime Textで開発する方法

現在Lightning Componentは基本的に開発者コンソールで開発することになっていますが、実はSublime Textでも開発可能で、sublime-lightingというプラグインが用意されています。今回はその環境構築方法を紹介します。なお、環境はMac OS XとSublime Text 3を前提として進めていきます。

sublime-lightningプライグインのインストール

Force.com CLIをインストールする

sublime-lightningは内部でForce.com CLIを利用しているため、まずForce.com CLIをインストールする必要があります。

まずhttps://force-cli.herokuapp.com/より各OS用のモジュールをダウンロードします。Macの場合、「force」というファイルがダウンロードされるのですが、最初一体このファイルをどうしたらいいのか途方に暮れます。このファイルは実はそのまま実行モジュールになっているので、コマンドラインからこのファイルを実行すればForce.com CLIが起動できます。そのためにはまず下記のようにパーミッションを実行可能なように変更する必要があります。

$ chmod 755 $HOME/Downloads/force

次にこのファイルをサーチパスに移してあげます。

$ sudo mv $HOME/Downloads/force /usr/bin/

本当は/usr/local/binにいれたいところですが、sublime-lightningのサーチパスに入っていないようなので/usr/binとしています。多分どこかで設定できると思いますが、またそれは後日。これでForce.com CLIのインストールは完了です。下記のようにコマンドが実行できるはずです。

$ force help

Sublime TextのPackage Controlをインストールする

MavensMateをインストールしている人は多くの場合すでに導入されていると思いますが、もしSublime TextのPackage Controlが導入されていなければ次のように導入します。

Sublime Textを起動し、メニューバーからView > Show Consoleを選択し、コンソールに下記コードをペーストしてEnterキーを押下します。

import urllib.request,os,hashlib; h = ‘eb2297e1a458f27d836c04bb0cbaf282′ + ‘d0e7a3098092775ccb37ca9d6b2e4b7d’; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘http://packagecontrol.io/’ + pf.replace(‘ ‘, ‘%20′)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install’ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb’ ).write(by)

これでPackage Controlのインストールが完了です。

sublime-lightningをインストールする

次にPlugin本体を下記の通りインストールします。

  • Sublime TextのメニューバーからTools > Command Paletteを選択し、Package Control: Install Packageを選択。
  • Lightningを検索して選択するとsublime-lightningがインストールされます。

これでプラグインのインストールは完了です。

Lightning Bundleを作成・編集する

まずSublime Textのワークスペースにディレクトリを作成します。このディレクトリはプロジェクトのような位置付けで、この中に複数のLightning Bundleが作成されることになります。*MYPROJECTは適当な名前に置き換えてください。

$ mkdir -p /MYPROJECT/metadata/aura

次にSublime Textを起動し、メニューバーからFile > Openを選択して作成したディレクトリを開きます。

次にサイドバーのディレクトリを右クリックし、Lightning > Salesforce Loginをクリックします。Sublimeウィンドウの最下部にUsernameを入れるフォームがあらわれるのでログインしたいSalesforce組織のユーザー名を入力しEnterキーを押下します。さらにパスワードを入力してEnterキーを押下します。ログインが成功したことを確認します。*Force.com CLIが正しくインストールされていないとエラーになります。

ログインが成功したらサイドバーからauraディレクトリを右クリックし、Lightning > Create App/Component/Eventをクリックすれば新しいLightning Bundleを作成できます。通常どおりファイルを保存するとファイルがSalesforce組織に保存されます。

既存のLightning Bundleを編集するには、サイドバーからauraディレクトリを右クリックし、Lightning > Fetch Lightningを選択して任意のLightning Bundleを選択すれば、auraディレクトリ配下にロードされます。


これで快適にLightning Componentを開発する環境が整いました。 Enjoy.

without comments

Written by 中嶋 一樹

2月 11th, 2015 at 11:11 am

Posted in Uncategorized

Tagged with , , ,