SFDC：DreamHouse Slackbotを試してみました

July 22, 2016, 11:34 am

≫ Next: SFDC：DreamHouse Process Builderを試してみました

≪ Previous: SFDC：DreamHouseの日本語版が公開されました

$

0

0

DreamHose - Slackbotを試してみました。SalesforceとSlack APIの連携アプリを試してみることができます。

Slack Bot - DreamHouse JP サンプルアプリケーション | Salesforce Developers

はじめに

DreamHouseのインストールページに初期設定の手順が紹介されているので、それを終わらせておく必要があります。

機能概要

DreamHouseには以下のアプリが用意されています。

• 着信 Web フック
• スラッシュコマンド
• ボット

DreamHouseアプリには必要なApexクラスやオブジェクトは含まれていますが、SlackAPIを利用する準備は別に行う必要があります。リンク先の手順で準備できると思います。

着信 Web フック

着信 Web フックの機能を使って、Salesforce などの外部アプリケーションから、管理下で特定のイベントが発生したときに自動的に Slack チャネルにメッセージをポストできます。DreamHouse では着信 Web フックを使って、Salesforce で物件の価格が変更されると自動的に #general Slack チャネルにメッセージをポストします。

この機能はプロセスビルダーで実装することができます。Packageインストール時にプロセスビルダーもまとめてインストールできています。

『Post Price Changes to Slack』が今回対象のプロセスビルダーです。

PropertyオブジェクトのPrice__c項目が変更されたタイミングでApexクラス「PostPriceChangeToSlack」の処理を実行されるようになっています。

SlackAPIを利用するにはIncoming WebHooksのWebhook URLが必要になります。

Webhook URLの準備ができたら、PostPriceChangeToSlackクラスのslackURL変数にセットします。(実際はカスタム表示ラベルなどを利用することになると思います。)

SalesforceからSlackAPIを実行するにはリモートサイトの設定が必要になります。これはPackageに含まれているのでインストール時に自動で設定されました。

これで実行準備は完了です。PropertyオブジェクトのPrice__c項目を変更してみます。

値を変更して保存した後、対象のSlackを確認してみると、無事に変更内容が投稿されました。

このようにApexクラスとプロセスビルダーを組み合わせることで、Slackの着信 Web フックをつかった連携アプリを簡単に用意することができました。

スラッシュコマンド

続いてスラッシュコマンドをつかった連携アプリについてです。スラッシュコマンドを使用すると、Slack の UI から外部アプリの情報の問い合わせや更新ができます。たとえば、DreamHouse では、仲介業者はスラッシュコマンドを使用することで、Slack のユーザーインターフェースを離れることなく Salesforce 内の物件情報にすばやくアクセスできます。

このアプリはHerokuなどに用意することで利用することが可能です。そのまま動くサンプルアプリがGitHubに公開されています。

動作確認の手順

詳細はGitHubのREADMEファイルに記載がありますが、ざっくりした概要を紹介します。

接続アプリケーションの設定

まずは接続アプリケーションの設定からです。

• 接続アプリケーション名：MyDreamSlackApp（または任意の名前）
• API 参照名：MyDreamSlackApp
• 取引先責任者メール：自分のメールアドレスを入力します。
• OAuth 設定の有効化：チェックボックスをオンにします。
• コールバック URL：http://localhost:8200/oauthcallback.html（これは後で変更します）
• 選択した OAuth 範囲：フルアクセス（full）
• ［保存］をクリックします。

Herokuアプリのデプロイ

続いてHerokuアプリを用意します。GitHubにHerokuボタンが用意されているので簡単にデプロイできます。デプロイ時に環境変数を登録します。

• SF_CLIENT_ID：Salesforce 接続アプリケーションのコンシューマキーを入力します。
• SF_CLIENT_SECRET：Salesforce 接続アプリケーションのコンシューマの秘密を入力します。
• SF_USER_NAME：Salesforce 統合ユーザーのユーザー名を入力します。
• SF_PASSWORD：Salesforce 統合ユーザーのパスワードを入力します。
• SLACK_HOUSE_TOKEN は、ここでは空白のままにします。

Slack でスラッシュコマンドを作成

• ブラウザで、Slack チームの Custom Integration ページを開きます。例：https://<チーム名>.slack.com/apps/manage/custom-integrations（<チーム名>は実際のチーム名で置き換えます。）
• ［Slash Commands］をクリックし、［Add Configuration］をクリックします。
• ［Choose a Command］入力フィールドに「/house」と入力し、［Add Slash Command Integration］をクリックします。
• ［Integration Settings］セクションで以下のように設定します。
• Command：/house
• URL：Heroku にデプロイしたアプリの URL の末尾に /house を付加します。例：https://my-heroku-app.herokuapp.com/house
• Method：POST
• トークンをコピーし、ブラウザのタブをもう 1 つ開いて、Heroku ダッシュボードにログインし、Heroku の SLACK_HOUSE_TOKEN 環境変数にそのトークンの値を設定します（［Setting］>［Reveal Config Vars］）

Customize Name：DreamHouse

• ［Save Integration］をクリックします。

Slash Commandsの追加はトップページからやるほうが速いかもしれません。

こんな感じです。

Integration Settingsはこんな感じ。

Herokuの環境変数にトークンを登録します。Herokuのダッシュボードから更新できます。

接続アプリケーションのCallbackURLには一時的なURLをセットしていましたが、HerokuアプリのURLを入れておけばいいと思います。

動作確認

これで設定ができました。試しに次のCommandを試してみます。

/house search cambridge

実行結果です。Slack APIをつかってSalesforce組織の情報にアクセスすることができました。

その他こんなCommandを試せるようになっています。

/house changes
/house search boston 600000 700000

ボット

ボットを作成するには、Slack への WebSocket 接続を開くアプリケーションを作成します。そのアプリケーションでは、ボットが招待されたチャネルからのメッセージに加え、Slack ユーザーがボットに対して送信するダイレクトメッセージも受信します。

アプリでは、パターンマッチングアルゴリズムと自然言語処理ツールを使って、メッセージに返信すべきかどうか、どのように返信するかを判断できます。

これもGitHubにコードと利用手順が公開されています。

接続アプリケーションの設定

• 接続アプリケーション名：DreamhouseJpSlackBot（または任意の名前）
• API 参照名：DreamhouseJpSlackBot
• 取引先責任者メール：自分のメールアドレスを入力します。
• OAuth 設定の有効化：チェックボックスをオンにします。
• コールバック URL：http://localhost:8200/oauthcallback.html
• 選択した OAuth 範囲：フルアクセス（full）
• ［保存］をクリックします。

Slack でBotユーザーを作成する

Botの作り方はこちら。Custom bot usersの辺りにあるcreating a new bot userリンクから作成できます。作成後に表示されるAPI Tokenが必要になります。
Bot Users | Slack

Herokuアプリをデプロイ

これもHerokuボタンが用意されているので簡単にデプロイできます。またデプロイ時に環境変数も登録します。

• ［SLACK_BOT_TOKEN］：先ほど作成したSlack Botユーザのトークンを入力します。
• ［SF_CLIENT_ID］：Salesforce 接続アプリケーションのコンシューマキーを入力します。
• ［SF_CLIENT_SECRET］：Salesforce 接続アプリケーションのコンシューマの秘密を入力します。
• ［SF_USER_NAME］：Salesforce 統合ユーザーのユーザー名を入力します。
• ［SF_PASSWORD］：Salesforce 統合ユーザーのパスワードを入力します。

Botはできたのですが、ちょっとうまく動かすことができませんでした。

とりあえずこういうものが用意されているみたいです。

関連記事

---

SFDC：DreamHouse Process Builderを試してみました

July 22, 2016, 1:36 pm

≫ Next: SFDC：DreamHouse App Builderを試してみました

≪ Previous: SFDC：DreamHouse Slackbotを試してみました

$

0

0

DreamHouse Process Builderを試してみました。

プロセスビルダー - DreamHouse JP サンプルアプリケーション | Salesforce Developers

次の機能を確認できます。

• 新着物件の告知
• モバイルデバイスへの価格変更のプッシュ通知
• 価格変更の Slack への投稿

新着物件の告知

新規物件が在庫に追加されると、仲介業者全員に知らせるために、メッセージを自動的に Chatter に投稿します。また、その物件のチラシを印刷するための条件を自動的に作成します。

Propertyオブジェクトを作成します。

するとChatterフィードに自動で投稿されます。また、ケースも自動生成されました。

この機能はプロセスビルダーの「Advertise New Property」で実装されています。

モバイルデバイスへの価格変更のプッシュ通知

DreamHouse では、お気に入りに登録した物件の価格に変化があったときに、モバイルにプッシュ通知を送れる仕組みが用意されています。

この機能はプロセスビルダーの「Price Change Push Notification」で実装されています。

通知処理ですが、Apexクラスの『PushPriceChangeNotification』から実行します。

Apexクラスを確認してみると、HerokuアプリのURLが指定されていました。おそらくプッシュ処理自体はHeroku側で行っているんだと思います。ここに関しては自分のDE組織では確認することができませんでした。

プロセスビルダー→Apexクラス→外部アプリにリクエストといった処理の実装例になるんだと思います。

価格変更の Slack への投稿

これはDreamHouseのSlack Botのページで紹介されていたものと同じものです。

プロセスビルダーを組み合わせることでこういったアプリ同士の連携を実装することができます。今まではApexトリガを経由する必要がありましたが、HTTPリクエストを実行するような処理はプロセスビルダーからApexクラスの処理を呼び出して対応するのが良いのかもしれません。(大量件数の一括処理は要確認)

SFDC：DreamHouse App Builderを試してみました

July 22, 2016, 10:08 pm

≫ Next: SFDC：DreamHouse Lightning Componentを試してみました

≪ Previous: SFDC：DreamHouse Process Builderを試してみました

$

0

0

DreamHouse App Builderを試してみました。

アプリケーションビルダー - DreamHouse JP サンプルアプリケーション | Salesforce Developers

PROPERTYレコードの編集ページで動作確認できるようになっています。

パッケージインストールするとLightningコンポーネントもインストールされます。

ドラッグ&ドロップでLigtningコンポーネントをページに追加できます。対象は以下の2つです。

• Map
• Picture Gallery

Map

Picture Gallery

自分の環境で試した時は、ドラッグ&ドロップしたタイミングでのプレビュー表示で正しく表示されませんでしたが、保存後に画面を再更新すると無事にLightningコンポーネントを利用できました。

SmartHome

DreamHouseのページでSmartHome コンポーネントが紹介されています。家の中にある家電と連携するIOTアプリの事例みたいです。パッケージ内には含まれていませんでしたが、デモ動画が公開されています。

DreamHouse App Builderはこんな感じでした。アプリケーションビルダーの使い方や事例を確認できました。

SFDC：DreamHouse Lightning Componentを試してみました

July 23, 2016, 2:38 am

≫ Next: SFDC：DreamHouse Salesforce1 Mobileを試してみました

≪ Previous: SFDC：DreamHouse App Builderを試してみました

$

0

0

DreamHouse Lightning Componentを試してみました。

Lightning コンポーネント - DreamHouse JP サンプルアプリケーション | Salesforce Developers

DreamHouse サンプルアプリケーションでは、以下の Lightning コンポーネントが使用されています。

• 物件の位置をすばやく確認できる Map コンポーネント
• 物件の写真を簡単にアップロードできる PictureGallery コンポーネント
• コネクテッドホームになっている物件のスマートデバイスを制御する SmartHome コンポーネント
• カスタムの検索機能を実現する PropertyExplorer コンポーネント

Map コンポーネントとPictureGallery コンポーネントはAppBuilderの方でも出てきました。今回はPropertyExplorer コンポーネントを確認してみます。

PropertyExplorerコンポーネント

PropertyExplorerタブからアクセスできます。

カーソル変更時の絞込や写真をクリックした時に詳細ページにリンクする仕組みのアプリを試すことができます。また、ページネーションの機能も実装されていました。

このアプリのコードは開発者コンソールなどから確認することができます。まだサンプルの少ないLightningコンポーネントですが、DreamHouseのアプリのコードで基本的な実装例を確認できそうです。

SFDC：DreamHouse Salesforce1 Mobileを試してみました

July 23, 2016, 3:17 am

≫ Next: SFDC：DreamHouse Facebook Messenger Botを試してみました

≪ Previous: SFDC：DreamHouse Lightning Componentを試してみました

$

0

0

DreamHouse Salesforce1 Mobileを試してみました。

Salesforce1 モバイルアプリ - DreamHouse JP サンプルアプリケーション | Salesforce Developers

サンプルとしてSmartHomeアプリが用意されていました。アプリへはパブリッシャーアクションから移動できます。

SmartHomeはVisualforceで実装されているのでコードを確認することもできます。

実際に動かすことができるのでSalesforce1モバイルアプリ上でどのように動作するかのチェックもできて良かったです。

SFDC：DreamHouse Facebook Messenger Botを試してみました

July 23, 2016, 5:37 am

≫ Next: React：Create React Appコマンドを試してみました

≪ Previous: SFDC：DreamHouse Salesforce1 Mobileを試してみました

$

0

0

DreamHouse Facebook Messenger Botを試してみました。このアプリはFacebook Messenger Platformで動くアプリです。

Facebook Messenger Bot - DreamHouse JP サンプルアプリケーション | Salesforce Developers

はじめに

DreamHouseのインストールページで環境構築を終えた後に、Salesforceの接続アプリケーションを設定します。

接続アプリケーションの設定

• 接続アプリケーション名：DreamhouseJpMessengerBot（または任意の名前）
• API 参照名：DreamhouseJpMessengerBot
• 取引先責任者メール：自分のメールアドレスを入力します。
• OAuth 設定の有効化：チェックボックスをオンにします。
• コールバック URL：http://localhost:8200/oauthcallback.html
• 選択した OAuth 範囲：フルアクセス（full）

Herokuボタンにデプロイ

GitHubにHerokuボタンが公開されているのでクリック1つで自分の環境に用意できます。

• ［FB_PAGE_TOKEN］：ここでは空白のままにします。
• ［FB_VERIFY_TOKEN］：任意のパスフレーズを入力します。Facebook で Web フックを作成するときに同じパスフレーズを入力する必要があります。
• ［SF_CLIENT_ID］：Salesforce 接続アプリケーションのコンシューマキーを入力します。
• ［SF_CLIENT_SECRET］：Salesforce 接続アプリケーションのコンシューマの秘密を入力します。
• ［SF_USER_NAME］：Salesforce 統合ユーザーのユーザー名を入力します。
• ［SF_PASSWORD］：Salesforce 統合ユーザーのパスワードを入力します。

デプロイ完了後は・・

Salesforceの [接続アプリケーション］セクションにある、コールバック URLをデプロイしたHerokuアプリのドメイン http://yourappname.herokuapp.com/oauthcallback.htmlへ変更します。

このあとの工程で・・

この後、FacebookアプリとFacebookページを作成することになります。作成後にAPIを利用するためのトークンを生成できます。トークン生成後にHeroku環境変数のFB_PAGE_TOKENに値をセットします。

Facebook Messenger Platform Getting Started

Facebook Messenger Platformで動くアプリなのでチュートリアルページで使い方を確認する必要があります。

Messenger Platform - ドキュメンテーション - 開発者向けFacebook

Technical ImplementationのGetting Startedから始めれば良さそうです。

Getting Startedページはこんな感じ。

1. Create a Facebook App and Page

最初にFacebook AppとPageを作る必要があるみたいです。たぶんWebサイト用でいいと思います。

アプリ名を入力して設定を進めるとappIDなどの情報を取得できます。

作成後にダッシュボードページが表示されます。製品を追加→Messangerを選択します。(Webhooksもやっておきましたがいらなかったかも)

これでMessenger Platformの利用準備ができました。

APIを利用するにはトークンが必要となっています。ここでFacebookページが必要になりました。

FacebookページはCreate a Facebook App and Pageのリンクから簡単につくれました。

これでトークンも取得できるようになります。続いてMessenger PlatformのWebhooksのセクションのSetupボタンから設定を進めます。

CallbackURLなどの入力が求められます。

やってみた結果以下の情報を入力すれば登録できました。

• Callback URL = https://.herokuapp.com/webhook
• トークン = Herokuデプロイ時に設定したFB_VERIFY_TOKENの値

登録結果です。登録後は対象のFacebookページを指定する必要もあります。

これで設定完了です。

Facebook Messagener Botの利用

設定完了後、対象のFacebookページでMessengerを起動します。『ヘルプ』と送信すると返答が返ってきます。

GitHubのREADME.mdには『help』と記載がありましたが、こちらはサポートされていませんでした。日本語訳されたタイミングでキーワードもローカライズされているみたいです。

以上がDreamHouse Facebook Messenger Botを試してみて確認できたことです。Facebook Messenger Platformは少し気になっていたので気軽に動作確認できるDreamHouseのサンプルアプリが公開されて勉強になりました。

Facebook Botを利用する際の設定方法やFacebookページが必要になること、どのようなアプリが作れるかも確認できて良かったです。

React：Create React Appコマンドを試してみました

July 24, 2016, 8:21 am

≫ Next: React：mochaのテストとSassのSyntaxエラー

≪ Previous: SFDC：DreamHouse Facebook Messenger Botを試してみました

$

0

0

Reactのアプリ開発に必要な雛形ファイルを生成できる『create-react-app』コマンドを試してみました。

Create Apps with No Configuration | React

Qiitaに投稿されているのを見て知ったコマンドです。

使い方

コマンドインストール

最初にnpm installをつかってコマンドを利用できるようします。

$ npm install -g create-react-app

雛形ファイル生成

次のコマンドでアプリの雛形が生成されます。

$ create-react-app <your app name>

これで必要なファイルが生成されました。

アプリの起動

あとはnpm startコマンドでアプリを動かすことができます。

$ cd <your app name>
$ cd npm start

値を変更して保存すると、npm startコマンドを再実行しなくても自動で反映されます。

誤字・脱字などコードにミスがあった場合、ターミナルにエラー箇所が表示される仕組みが用意されているのですごく便利です。

ビルド

次のコマンドでビルド処理を実行できます。

$ npm run build

実行後はbuildディレクトリが生成されます。

build後のファイルを起動するには次のコマンドを実行します。
http-serverのインストール

$ npm install -g http-server

次の手順でlocalhost:8080で起動できます。『hs』コマンドが起動コマンドでした。

$ cd build
$ hs
open http://localhost:8080

Herokuにデプロイ

基本的な使い方を確認できたので、Herokuで動かすときの手順も確認してみました。buildフォルダ内のファイルをHerokuにデプロイすればいいと思います。

まずは、package.jsonファイルの生成から。

$ npm init

expressのinstall

$ npm install express --save

server.jsの作成

$ touch server.js

server.jsの内容はこんな感じ。

var express = require('express');
var app = express();
var port = process.env.PORT || 8080;

// Serve static files
app.use(express.static(__dirname + '/'));

// Serve your app
console.log('Served: http://localhost:' + port);
app.listen(port);

Gitファイルの準備

$ git init
$ gibo OSX Windows SublimeText Node >> .gitignore
$ git add .
$ git commit -m "commit"

Herokuアプリの作成

$ heroku create
$ git push heroku master
$ heroku open

これでHerokuにデプロイすることができました。

もしかするともっと簡単にできるかもしれませんが、とりあえずエラーも無かったのでこれで大丈夫じゃないかなと思います。

BuildファイルをHerokuにデプロイするときのコマンドまとめ

$ npm init
$ npm install express --save
$ touch server.js

$ git init
$ gibo OSX Windows SublimeText Node >> .gitignore
$ git add .
$ git commit -m "commit"

$ heroku create
$ git push heroku master
$ heroku open

Create React AppコマンドをつかったReactアプリの雛形ファイル生成はこんな感じでした。あとは自分のファイル構成にして開発を進められるかいろいろ確認してみようと思います。

React：mochaのテストとSassのSyntaxエラー

July 25, 2016, 1:02 pm

≫ Next: React：Unknown DOM property cellpaddingエラー

≪ Previous: React：Create React Appコマンドを試してみました

$

0

0

Reactで開発するときにMochaなどを利用することでコンポーネントのテストを実装することができます。ちょっと前に海外のDeveloperが公開した記事を参考にサンプルコードを試してみたところ、正しくテストを動かすことができました。

ですが、自分で用意したコードでテストしようとしたところ、Syntaxエラーが発生してしまいました。

テストの書き方の問題かと思ったのですが、一度動いていたテストで処理事態に変更はなかったのでそれ以外の問題だと思います。検索してみたところ、今回のエラーと同じ問題と思われる内容についてstackoverflowで解説がありました。

『ignore-styles』をつかうことでSassのSyntaxチェックを除外することで回避できるみたいです。

インストールコマンド

$ npm install --save-dev ignore-styles

使い方

$ mocha --require ignore-styles

自分の環境はこういう感じで実行しました。

$ mocha --require ignore-styles --require setup.js *.spec.js

早速やってみたのですが、自分の環境ではエラーとなってしまいました・・・

Error: Cannot find module 'ignore-styles'

ただインストールするだけではダメみたいです。どこかのファイルでimportしたりする必要があるみたいなのですが、その辺りの使い方を見つけることができませんでした。。

またいつか解決したら追記しようと思います。

追記

この記事を書いた後になんか解決しました。最初、テスト処理を実装している『spec』ファイルの方に追加すればいいのかと考えて試していたのですが、Sassファイルを読み込んでいるコンポーネントのJSファイル側で読みこめばよかったみたいです。

とりあえずエラーは無くなってテストを実装できるようになったので、解決案の１つとしては利用できそうです。

動いた時のテスト実行コマンド

$ mocha --require setup.js *.spec.js

• --require ignore-stylesは不要っぽいです。
• setup.jsは自分の環境で必要なJSファイルです。

追記の追記

テスト動いたのですが、webpackコマンドでwarningが発生するようになっていました。やっぱりこれじゃあダメそうです。

参考サイト

---

React：Unknown DOM property cellpaddingエラー

July 25, 2016, 3:57 pm

≫ Next: SFDC：React開発でJSforceの実行結果をState変数にセットする方法

≪ Previous: React：mochaのテストとSassのSyntaxエラー

$

0

0

Reactの開発を試している時に次のエラーに遭遇しました。

Warning: Unknown DOM property cellpadding. Did you mean cellPadding?
Warning: Unknown DOM property cellspacing. Did you mean cellSpacing?

そのときの処理はこんな感じです。

テーブルタグで宣言しているcellpaddingとcellspacing属性を除外したらエラーが発生しなくなりました。

以前、別の場所で似たコードを書いた時は動いたので、ちょっと悩んだのですがReactでサポートしているattributes一覧と比較してみて原因がわかりました。『cellpadding』と書いていたのですが正しくは『cellPadding』というように大文字にする必要があるみたいです。

Tags and Attributes | React

それと今回、『border="0"』と宣言していた箇所もエラーになりました。HTML Attributesの一覧に含まれていなかったのでこちらはCSSで対応する必要があるのかなと思います。

SFDC：React開発でJSforceの実行結果をState変数にセットする方法

July 28, 2016, 6:00 am

≫ Next: React：react-routerとanchor link

≪ Previous: React：Unknown DOM property cellpaddingエラー

$

0

0

ReactのState変数に値をセットするときは『setState』を使います。

this.setState({ user : res });

JSforceからSalesforceAPIを実行して結果をセットしたいときは次のように書けばいいのかなと試してみました。

conn.identity(function(err, res) {
  if (err) {
    alert(err);
  } else {
    this.setState({ user : res });
  }
});

これで実行したところCannot read propertyエラーが発生しました。

Uncaught TypeError: Cannot read property 'setState' of undefined

Salesforce APIを実行するときは非同期処理になるので、この書き方だとエラーになるみたいです。非同期処理のやり方を検索してみたところ次のように書けばいいみたいです。

conn.identity(function(err, res) {
      if (err) {
        alert(err);
      } else {
        this.setState({ user : res });
      }
    }.bind(this));

これでログインユーザの情報を取得してState変数にセットすることができました。

おまけ

State変数の値を画面に表示するときは次のように書きます。

<div>{this.state.user.last_name}</div>

こういう書き方もできるのかなと次のやり方を試してみました。

<div>{'Hello World!! ' + this.state.user.last_name + ' ' + this.state.user.first_name + '!!'}</div>

上の書き方だとstate変数に値がセットされるまでの一瞬に「undefined」と表示されてしまいました。きちんと次のように書いた方が良さそうです。

<div>Hello {this.state.user.last_name} {this.state.user.first_name}!!</div>

React：react-routerとanchor link

July 31, 2016, 4:30 pm

≫ Next: React：classNameの指定例

≪ Previous: SFDC：React開発でJSforceの実行結果をState変数にセットする方法

$

0

0

React開発のメモ。

React：classNameの指定例

August 1, 2016, 11:07 am

≫ Next: NPM：ローカルサーバー起動の環境構築メモ

≪ Previous: React：react-routerとanchor link

$

0

0

classNameを動的に指定する方法のメモ。もっといい方法あるのかな。

var sldsTabClass = 'slds-tabs--default__item slds-text-heading--label';
var homeTabClass = this.props.currentpage === 'Home' ? 'slds-active ' + sldsTabClass : sldsTabClass;
var aboutTabClass = this.props.currentpage === 'About' ? 'slds-active ' + sldsTabClass : sldsTabClass;
var portfolioTabClass = this.props.currentpage === 'Portfolio' ? 'slds-active ' + sldsTabClass : sldsTabClass;
var contactTabClass = this.props.currentpage === 'Contact' ? 'slds-active ' + sldsTabClass : sldsTabClass;

return (
  <header id="pageHead">
    <h1 id="siteTitle">T.Yoshikawa Labs</h1>
    <p id="catchcopy">~ React Sample Application ~</p>

    <div className="slds-tabs--default slds-m-bottom--small">
      <ul className="slds-tabs--default__nav">
        <li className={homeTabClass} title="Home">
          <Link to="/" className="slds-tabs--default__link">Home</Link>
        </li>
        <li className={aboutTabClass} title="About">
          <Link to="/about" className="slds-tabs--default__link">About</Link>
        </li>
        <li className={portfolioTabClass} title="Gallery">
          <Link to="/portfolio" className="slds-tabs--default__link">Gallery</Link>
        </li>
        <li className={contactTabClass} title="Contact">
          <Link to="/contact" className="slds-tabs--default__link">Contact</Link>
        </li>
      </ul>
    </div>
  </header>
);

NPM：ローカルサーバー起動の環境構築メモ

August 1, 2016, 4:19 pm

≫ Next: SFDC：analytics:reportChartとfilterの動的指定

≪ Previous: React：classNameの指定例

$

0

0

HTMLとJSファイルでちょっとしたサンプルコードを動かすときにnpmだけでローカルサーバを起動する方法はどうすればいいのかなと検索したところ、Qiitaにわかりやすい解説が投稿されていました。

自分で試した時に忘れてエラーになったところ

package.xml作成後にscriptsのstartでhttp-serverを起動するようにします。

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "http-server -o"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "http-server": "^0.9.0"
  }
}

これでnpm startするとサーバーが起動します。

こんな感じでindex.html以外も表示できます。

別の方法

$ mkdir app
$ cd app
$ npm init
$ npm install express --save
$ mkdir public
$ touch public/index.html
$ touch server.js

package.xmlの内容

{
  "name": "app",
  "version": "0.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

server.jsの内容。

var express = require('express');
var app = express();
var port = process.env.PORT || 8080;

// Serve static files
app.use(express.static(__dirname + '/public'));

// Serve your app
console.log('Served: http://localhost:' + port);
app.listen(port);

npm startで同じように表示できます。準備が少し大変だけどHerokuとかで動かしたいときはこっち。

SFDC：analytics:reportChartとfilterの動的指定

August 3, 2016, 9:11 pm

≫ Next: SFDC：Failed to create createContainerMember for containerIdエラーの解決方法

≪ Previous: NPM：ローカルサーバー起動の環境構築メモ

$

0

0

filterの条件指定ですが、Apexクラス側でString型変数をつかって用意することもできます。

public class SampleClass {
    public String filter {get; set;}
    
    public SampleClass() {
        this.filter = '{column:\'STAGE_NAME\', operator:\'equals\', value:\'Prospecting\'}';
        System.debug(filter);
    }
}

ページ側はこんな感じ。

<analytics:reportChart developerName="ProgressOpportunityReport"
            showRefreshButton="false" cacheResults="true" filter="{!filter}" />

関連記事

SFDC：Failed to create createContainerMember for containerIdエラーの解決方法

August 5, 2016, 6:36 am

≫ Next: SFDC：analytics:reportChartのfilterとAPI名

≪ Previous: SFDC：analytics:reportChartとfilterの動的指定

$

0

0

開発者コンソールで開発しているとときどき次のエラーが発生することがあります。

Failed to create createContainerMember for containerId

時間が経つか開発者コンソールを再起動すれば解決すると思いますが、それでも解決しない場合はワークスペースの新規作成を行うことで解決するみたいです。

詳細はSalesforceのヘルプに記載がありました。

Developer console cannot save classes/triggers/pages

---

SFDC：analytics:reportChartのfilterとAPI名

August 5, 2016, 6:43 am

≫ Next: React：react-routerのページ遷移とスクロールトップ

≪ Previous: SFDC：Failed to create createContainerMember for containerIdエラーの解決方法

$

0

0

analytics:reportChartのfilterに指定するAPI名は普段利用するものとは異なります。例えば商談のStageName項目の場合はSTAGE_NAMEとなります。

ここで指定するAPI名はワークベンチのREST Explorerで確認できます。

/services/data/v37.0/analytics/reports/<Report ID>/describe

ワークベンチのURLはこちらです。

Workbench

React：react-routerのページ遷移とスクロールトップ

August 6, 2016, 5:01 am

≫ Next: 『Amazon Web Servicesではじめる新米プログラマのためのクラウド超入門』を読んでみました

≪ Previous: SFDC：analytics:reportChartのfilterとAPI名

$

0

0

Reactをつかって開発をするときSPAになるように実装するときはreact-routerを利用することで簡単に対応できます。

便利なライブラリですが、ページ遷移時にスクロールの位置が維持される仕様がありました。AngularJSのときは『autoscroll』を宣言すればトップに戻るようになっていたので、Reactにも同じような仕組みがあるかなと検索してみました。

するとこんなIssueが。

ザックリ読んでみるとreact-router-scrollというのが用意されているみたいです。

NPMパッケージとして公開されているので簡単にインストールできます。

$ npm i -S react-router-scroll

インストール後は『import useScroll from 'react-router-scroll';』と『render={applyRouterMiddleware(useScroll())}』を宣言すれば利用できました。

これを利用してつくってみたのがこちら。react-routerでページ切り替え時にスクロール位置を一番上に戻すことができました。

今回の検証中に1つ困った問題に遭遇しました。アンカータグをつかった機能の実装部分です。react-routerでページ切り替えするとき、リンクの『#』をつかって同じページ内の移動がうまくいきませんでした。

これの解決方法は見つけられていないのですがIssueが1つ見つかりました。

ひとまず、react-routerを利用するときは『react-router-scroll』も併せて使えばいいのかなと思います。

『Amazon Web Servicesではじめる新米プログラマのためのクラウド超入門』を読んでみました

August 6, 2016, 11:10 am

≫ Next: SFDC：Salesforce Summer Session - Lightning Design System

≪ Previous: React：react-routerのページ遷移とスクロールトップ

$

0

0

『Amazon Web Servicesではじめる新米プログラマのためのクラウド超入門』を読んでみました。Windows PCをつかったAWSの使い方が解説されていました。

書籍の内容

ざっくりですがこんな感じの内容となっています。

1章 クラウドの役割

• システム基盤と従来インフラの問題点
• クラウドシステムとは
• 主要なクラウドサービス
• クラウドサービスの活用例

2章 AWSの基本とアカウント登録

• Amazon Web Servicesのサービス
• AWSクラウドデザインパターン
• AWSのデータセンター
• AWSアカウント登録と利用開始
• AWSの開発ツール

3章 Webサーバーの構築

• WebのしくみとHTTP通信の基本
• S3を使ったWebサイトの構築
• EC2をつかったWebサーバー構築
• ELBを使った不可分散
• Elastic IPを使った独自ドメインでのサイト運用
• Cloud Frontを使ったデータ配信

4章 Webアプリケーションサーバーの構築

• Webアプリのアーキテクチャーの基本
• アプリ開発環境の構築
• MySQLによるデータベースサーバー構築
• TomcatによるWebアプリケーションサーバー構築

5章 ネットワークの構築

• ネットワークの基礎技術
• セキュリティグループによるパケットフィルタリング
• VPCによる仮想ネットワーク構築

6章 AWSのセキュリティ

• セキュリティの基礎
• IAMによるユーザアカウント管理
• データの暗号化

7章 システム運用

• システム運用の基礎
• CloudWatchによる監視
• CloudFormationによる監視
• CloudFormationによる構成管理
• データのバックアップとリストア
• 課金管理

8章 Dockerコンテナー実行環境の構築

• Dockerとは
• Dockerのインストール
• Dockerイメージの作成
• Dockerイメージの公開
• AWSでのDockerコンテナー実行
• ES2でのDocker実行環境の構築
• EC2 Container ServiceによるDocker実行環境の構築

試してみたこと

S3の構築

EC2インスタンスの起動

メモ

書籍にはWindowsで説明があったため、設定にTeraTermを利用していました。自分はMacの環境で試したのでTerminalから進めました。TerminalからSSH接続するときの方法は次のリンク先を参考になりました。

手順

1. キーペア(秘密鍵)をダウンロードしておく
2. Terminalを起動。ダウンロードフォルダに移動して下記コマンドを実行

$ mv <秘密鍵名>.pem ~/.ssh/
$ chmod 600 ~/.ssh/<秘密鍵名>.pem
$ ssh -i ~/.ssh/<秘密鍵名>.pem [ユーザ名]@[IPアドレス or DNS名]

※ユーザ名の指定は書籍の手順と同じ
※IPアドレスはパブリックIPアドレスを指定 (EC2の設定で確認可能)

3. 接続の承認
SSH接続を承認するか確認メッセージが表示されるのでyesを入力

Are you sure you want to continue connecting (yes/no)? yes

4. yumのupdate
次のメッセージが表示されます。

Run "sudo yum update" to apply all updates.

メッセージどおりにコマンドを実行します。

$ sudo yum update

5. いろいろ実行されます (yumのupdate)

最後に『完了しました!』をメッセージが表示されました。これでyumのupdateができたみたいです。また自分の環境で試した時、以下のメッセージが表示されました。

$ packet_write_wait: Connection to : Broken pipe

SSH接続が切れたことが原因とのことです。次のリンク先が参考になりました。

Macのsshで「Write failed: Broken pipe」が出た場合の対処法 | 田舎に住みたいエンジニアの日記

今回は設定ファイルを変更せずに再接続し直して次に進めました。

6. httpdのインストール
SSH接続した状態で以下のコマンドを実行します。

$ sudo yum install -y httpd

7. httpdの起動
同じく次のコマンドを実行します。

$ sudo service httpd start

正常に起動できるとOKとメッセージが表示されました。

Starting httpd: [ OK ]

これで起動完了です。パブリックIPアドレスまたはパブリックDNSにアクセスするとApach HTTP Serverの規定画面を表示できました。

8. EC2へのファイルアップロード
TeraTermをつかえば画面から操作できますが、Terminalの場合はコマンドでアップロードします。こちらが参考になりました。

こんな感じです。

$ scp -i <秘密鍵のパス> <送信するファイルのパス> <ユーザ名>@<該当インスタンスのパブリックIPアドレス>:<ファイルを配置するパス>

もう少し詳細。送信するファイルのパスがデスクトップにある場合はパスは「~/Desktop」から始まります。(ちょっとハマりました。)

$ scp -i ~/.ssh/<秘密鍵名>.pem ~/Desktop/<Folder Path>/index.html <username>@<ip adress>:/home/<...>

これでパスの指定はできたと思うのですが、実行すると次のエラーが発生しました。

Warning: Identity file /home/***/.ssh/***.pem not accessible: No such file or directory.
Permission denied (publickey).
lost connection

秘密鍵ファイルが見当たらないというエラーっぽいです。ログインはできているので秘密鍵の設定もできていると思うのですが、ちょっと解決できませんでした。また今度気が向いたらWindowsの方で試してみようと思います。

まだはじめの部分しか読めていませんが、この他セキュリティの話とかJavaをつかったWebアプリの開発環境構築話とか載っているみたいです。

SFDC：Salesforce Summer Session - Lightning Design System

August 7, 2016, 10:13 am

≫ Next: Reflector2でレコーディングボタンを非表示にする手順

≪ Previous: 『Amazon Web Servicesではじめる新米プログラマのためのクラウド超入門』を読んでみました

$

0

0

少し前ですが、Salesforce Summer 2016の開発者向けセッションの動画と資料が公開されました。セッションの1つ『実践！Lightning Design System を活用したコンポーネント開発』を確認してみました。

[D2-5] 実践！Lightning Design System を活用したコンポーネント開発 日本語同時通訳 - Salesforce Summer Tokyo for Developers(20 -

資料の方ですが、Session時は英語でしたが公開版は日本語に翻訳されていました。

講演資料のダウンロードはこちらからです。

Salesforce - セールスフォース・ドットコム - Summer Event

スピーカーはSalesforceのプリンシパルディベロッパーエヴァンジェリスト グレッグ・ルイスさんです。GoLiveという企業の共同創設者の1人で日本にも何回か来ているそうです。

セッションの概要

ざっくり下記のような話を聞くことができました。

なぜデザインシステムが必要なのか

Salesforceは大きな企業でさまざまなチームがある。チームで協力して多くのPlatformをつくっている。最近、Lightning Experienceを立ち上げた。

数百人の開発者が様々な製品を担当しているが、デザイナーチームはあまり大きくないチームでデザインシステムチームは更に少人数です。

大半のデベロッパーはJavaなどで開発しているがCSSはメインではない。CSSはあまり触りたくないということが多い。そんなデベロッパーでもSalesforceのCSSをアプリに適用できる仕組みが必要になる。

2013年Salesforce1が登場。今までとは違ったデザインで実装された。開発者が同じ見栄えで実装できるようにするにはどうすればいいか。

ブラウザでコードを確認できれば良い。コピーペーストで対応できるようにしよう。
→ それでもまだ同じ見栄えにならない。

実際のデザインシステムを考え、内部・外部の開発者に同じように見えるアプリケーションを作れる仕組みを用意した。
→これがLightning Design System。

Lightning Design Systemのサイトに行くとガイドライン、各コンポーネントの使い方が確認できる。基本サイトのコードをコピー・ペーストするだけでSalesforceデザインのスタイルを適用できる。

Lightning Design Systemができるまでの経緯

今回はCSS Framework + UI Libraryの話。

まずはデザインの棚卸しから始めた。同じ青でも数十種類の色が使われていた。これを1つあるいは2つぐらいになるように共通化した。それをデザイントークンで管理できるようにした。

トークンを使うことで一箇所で管理できる。変更があったとしても開発者は意識することなく自動でアップデートできる。

SLDSマイクロパターンという考え方を取り入れた。一番小さいパターンを見つけて標準化。そこから様々な要素を組み合わせていく。

BEMの命名規則という考え方をした。
・ブロック (Block)
・要素 (Element)
・修飾子 (Modifier)

例えば家で考えると次のように当てはまる
.house (家)
ブロック (コンポーネントの名前)

.house__door (ドア)
.house__window (窓)
エレメント (コンポーネント部品)

.house—gray
修飾子 (コンポーネントのバリエーション)

.house__door—fuchsia (コンポーネント部品のバリエーション)

Design Systemを作るためにSalesforceの製品を全て見てこのマイクロパターンを特定していった。例えばボタンの場合、いろんなボタンがあると思うが全部で5種類のボタンに集約した。

テキストもマイクロパターンで対応している。通常ヘッダータグの場合、「h1..h2..h3..」とタグによってサイズが異なる。SLDSでは全て同じサイズになるようにした。サイズ変更はヘルパークラスの仕組みで対応することでマイクロパターンを実現した。

Design Systemの目標は、開発者がCSSを気にしなくていいようにする。コピー・ペーストでデザインを実装できるようにしたい。

Design Systemとレイアウト

コンポーネントのレイアウトはどうすればいいか。各コンポーネントをどう配置するか。

• レイアウトコンポーネントで対応。
• Media ObjectがSalesforceの製品で良く利用される基本パターン。
• 基本クラス + ヘルパークラスという組み合わせでカスタマイズできる。Component Overviewで確認できる。
• Design Systemのクラス名は長い名前になっています。理由は人が読めるようにするため。BEMという考え方。

Media Objectはこちら

ヘルパークラスのComponent Overview

レイアウトの考え方はFlexboxにもとづいている。

• Flexboxはユーザーインターフェース設計に最適化されたCSSボックスモデル。
• ページレイアウトの作成で一番良いと思う。簡単にレイアウトできる。
• モバイルファーストなデザインを実現できる。
• レスポンシブデザイン。大きなデバイスでも拡張できる仕組みを実現可能。
• Gridコンポーネントが用意されている。

通常のGridコンポーネントはこちら。class=“slds-grid”だけで実装可能。

<div class="slds-grid">
  <div>col</div>
  <div>col</div>
</div>

Gridコンポーネントには自動サイズ調整と手動サイズ調整できる仕組みを用意している。

Flex-Gridには欠点もある。自動でラップしてくれないのでボックスの端までいってもそのまま表示されてしまう。Flex-wrapの仕組みを用意した。これをつかうことで自動でボックス内に収まるようになる。class="slds-col"で適用できる。

<div class="slds-grid">
  <div class="slds-col">col</div>
  <div class="slds-col">col</div>
</div>

追記 : slds-wrapも必要かも。

<div class="slds-grid slds-wrap">
  <div class="slds-col">col</div>
  <div class="slds-col">col</div>
</div>

slds-colにはヘルパークラスが用意されているみたいです。

<div class="slds-grid slds-grid--pull-padded">
  <div class="slds-col--padded">col--padded</div>
  <div class="slds-col--padded">col--padded</div>
</div>

Flex-Wrapの詳細

Design Systemと手動サイジング (Manual Sizing)

ヘルパークラスをつかったサイジングの仕組みを用意した。 2、3、4、5、6、8、12列のグリッドをサポートしている。

<div class="slds-grid slds-wrap slds-grid--pull-padded">
  <div class="slds-col--padded slds-size--1-of-1">1</div>
  <div class="slds-col--padded slds-size--1-of-2 slds-medium-size--5-of-6 slds-large-size--8-of-12">2</div>
  <div class="slds-col--padded slds-size--1-of-2 slds-medium-size--1-of-6 slds-large-size--4-of-12">3</div>
  <div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-3">4</div>
  <div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-2 slds-large-size--1-of-3">5</div>
  <div class="slds-col--padded slds-size--1-of-1 slds-large-size--1-of-3">
    <div class="slds-grid slds-wrap slds-grid--pull-padded">
      <div class="slds-col--padded slds-size--1-of-2 slds-medium-size--1-of-1 slds-large-size--1-of-2">6</div>
      <div class="slds-col--padded slds-size--1-of-2 slds-medium-size--1-of-1 slds-large-size--1-of-2">7</div>
    </div>
  </div>
</div>

Manual Sizingは次のように%指定に変換される仕組み。

Design Systemとレスポンシブな サイジングヘルパー

レスポンシブテクノロジーが組み込まれたサイジングヘルパーを用意した。

<div class="slds-container--small">Contents go here.</div>
<div class="slds-container--medium">Contents go here.</div>
<div class="slds-container--large">Contents go here.</div>
<div class="slds-container--x-large">Contents go here.</div>
<div class="slds-container--fluid">Contents go here.</div>
<div class="slds-container--left slds-container--small">Contents go here.</div>
<div class="slds-container--center slds-container--small">Contents go here.</div>
<div class="slds-container--right slds-container--small">Contents go here.</div>

ブレークポイントの名前

• x-small = 小型の携帯電話
• small = 携帯電話
• medium = タブレット
• large = デスクトップ

レスポンシブグリッドの例

Grid Examples

Lightning Design Systemの利用場所

基本はLightning Component開発で利用される。Lightning Componentは次の4箇所で利用される
・Lightning Experience
・Visualforce
・Lightning App (スタンドアローンアプリ)
・Lightning Out (スタンドアローンアプリ)

Design Systemとスコープ設定

次のサイトでSLDSにスコープを追加できる。

Tools - Lightning Design System

だいたいこんな感じでした。Gridをつかったレイアウト作成の辺りの話が勉強になりました。

slds-grid--frame

ちょっと面白いクラスが用意されています。slds-grid--frameを使うと画面のサイズ(高さと幅)を目一杯つかったフレームを用意できます。ウィンドウサイズを変更すると自動でフレームのサイズが変更されます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <% include ../partials/head %>
  </head>
  <body class="slds">
    <main>
      <div class="slds-grid slds-grid--frame">
        <div class="slds-col myBox">App Content</div>
      </div>
    </main>
  </body>
</html>

サンプルコード

github.com

追記

AngularJSのnp-reaptと組み合わせたときの使い方です。
例えば次のように書くとします。

<div class="slds-grid">
    <div ng-repeat="item in lists|filter:query">
        <div class="slds-col">
            <a href="/{{item.wrapper.keyPrefix}}">
                <article class="padded">
                    <div class="simple-bold">
                        <span>{{item.wrapper.label}}</span>
                        <input type="hidden" value="{{item.wrapper.apiName}}" />
                    </div>
                </article>
            </a>
        </div>
    </div>
</div>

するとボックスサイズを超えても降りさずに表示し続けてしまいます。

ここで『class="slds-wrap"』を追加します。

これにより、ボックスサイズを超えたタイミングで自動で折り返しを行ってくれるようになります。

Reflector2でレコーディングボタンを非表示にする手順

August 8, 2016, 10:20 pm

≫ Next: SFDC：Lightning Experienceとナビゲーション処理

≪ Previous: SFDC：Salesforce Summer Session - Lightning Design System

$

0

0

Reflector2を利用時にレコーディングボタンと接続しているモバイル端末名が表示される仕組みがあります。

これの表示 / 非表示の切り替えは以下の手順で行うことが可能です。

1. メニューバーの設定アイコンをクリック (PC名がリンクになっています)

2. 一般タブのクライアントの名前を表示するでオフを選択

これでレコーディングボタンが非表示になりスッキリしました。