とあるStartupに勤めるエンジニアの技術ブログ

Salesforce、テスト関係の技術ブログなどを書く予定

Salesforce Developers Meetup #15 でLTしてきた

Salesforce Salesforce1 CI

はじめに

2017年7月12日 に開催された Tokyo Salesforce Developer Group の Salesforce Developers Meetup #15 で LT してきました。

www.slideshare.net

今回は、機械学習の技術を活用して、簡単にモバイルアプリの画面自動テストスクリプトが作成できるWebサービスである「Magic Pod」を Salesforce1アプリの自動テストに利用する提案を発表してきました。

www.trident-qa.com

Salesforce1 アプリは、Hybrid アプリとして動作して自作の Web ページを実行できます。
Web ブラウザからもアクセスできるため、Selenium で自動テストできなくはありませんが、Hybrid アプリとして実行したときのみ不具合が発生する可能性があるので、Hybrid アプリとして自動テストを CI したくなります。

そこで、問題となるのは、自社製アプリではない、ことです。
そのため、IDを取得しにくかったり（するために学ぶべきことが多い）、ネイティブアプリを作成していないので Appium などの iOS/Android の自動テストを実現するための技術セットを学習するコストが高くなったりします。

そこで、Magic Pod！
Magic Pod であれば、Hybrid アプリでも iOS/Android の技術セットがなくてもテストスクリプトを作成できるようになります。それ以外でも利用できる点は多いですが、Salesforce ISV/OEM に役立つユースケースを紹介しました。

その他の発表

リリースノート輪読発表

Salesforce Developers Meetup #15 の感想ですが、セールスフォース・ドットコム社の岡本さんからEinstein 関係、TAOドライブ社の米井さんからApex関係、 セールスフォース・ドットコム社の川畑さんから ISVforce/Lightning Bolt 関係のリリースノート輪読発表がありました。

技術系セッション

2017年6月28、29日に米国で開催された TrailheaDX で追加された Trailhead トレイル "Get Started with Salesforce DX" をチームスピリット社の山﨑さん、ウフル社の石川さんで分担して内容を発表してくれました。
さすがに、CLI の操作が多くて、一緒に操作するにはスピードが速かったりとなかなか発表についていけなかったですが、よい発表でした。

むすび

技術系セッションでは、初の試みとして Trailhead を解説してもらいましたが、時間的に少し詰め込みすぎになってしまったようです。発表内容としては面白くて資料も役立つものなので、もう少しやり方を考えていきたいと思いました。
また、今回は LT がいつもよりも多く4本もありました。この調子で次回以降も発表者がたくさん集まるといいですね。
最後になりましたが、発表していただいた皆さま、ありがとうございました！

おしまい

Tokyo Salesforce Developer GroupのMeetup#14でLTしたらネタが丸かぶりだった件

Salesforce

はじめに

Tokyo Salesforce Developer Group の Salesforce Developers Meetup #14 で LT して、事故ったのでご報告します。
www.meetup.com

事の発端

Advent Calendar でも書いたネタではありますが、開発自体に勢いが出てきていたので、PMD Apex について紹介しようと LT 枠をもらいました。それとは別に運営メンバーの会話の中にセールスフォース・ドットコム社からセキュリティ関係のツールの話をしたい、というオファーを見かけました。このときは、まさかあんなことが起きるなんて思っていませんでした（半分くらい予感はありました）。

そして、事件が起きた

技術セッションも進み、セールスフォース・ドットコム社のマラットさんからセキュリティ診断ツールの発表が始まると、あの文字がすぐに目に飛び込んできました。

PMD

そして、彼は「私のチームが作ってる」「私は ESLint 拡張の方を作っている」「承認がおりたら来週くらいオープンソースとして公開するね」など流暢な日本語で発表が…。

丸かぶりの LT 発表

LT を始める前からネタが丸かぶりで、ただの屍のようになっていた私ですが、壇上に上がらないわけには行きません。
ということで、これが私の発表資料です。

www.slideshare.net

以下、相違点を少し記載しておきます。

  • マラットさんは atom でデモしたが、私は VS Code でデモした（VS Codeのほうが拡張機能の作りがちゃんとしてそう）
  • Jenkins にもプラグインがあるよ（こっちのスクリーンショットとかのほうが良かったかも）
  • ルールセットを翻訳してみてる（著作権問題とかあるから悩ましい…）

それはさておき

Salesforce Developers Meetup #14 の感想ですが、Salesforce MVP の吉川さんから Apex&Visualforce、チームFLECTのお三方から REST API、セールスフォース・ドットコム岡本さんから Lightning についてそれぞれ Spring'17 リリースノート輪読発表がありました。

また、技術セッションではテラスカイ箕輪さんから LockerService をがっつり深堀した評価、上述したセールスフォース・ドットコムのマラットさんが絶賛開発中のセキュリティ診断ツールの紹介などがありました。

どの発表も素晴らしかったです。発表していただいた皆さま、ありがとうございました！

おむすび

最近、PMD Apex の開発がやたら活発だと思ったら、まさかの本家が開発参加しているとは思いませんでした。
そんな開発チームの方の発表を聴けて、今回のMeetupはとてもよかったです。

そういえば、マラットさんにご挨拶できずじまいでした。申し訳ございません。

おすし

ちょうど Meetup の日に私が Salesforce MVP に初選出していただいたこともあり、ケータリングをお寿司にしていただきました！ありがとうございます！！

お寿司、美味しかったです。

あと、シャンパンスパークリングワインも用意していただきました！
感謝。

おしまい

CI/CDが好きな奴ちょっと来い

CI selenium React.js

はじめに

2017年2月9日（肉の日）に株式会社チームスピリットで開催されたCI/CD NIGHTに参加＆LTしてきました。CI/CDに関連する話題をLTする勉強会＋懇親会でCIサービスの旬など面白い話題を聴くことができました。

teamspirit.connpass.com

LT発表

発表したLT資料はこちらになります。

www.slideshare.net

掻い摘んで内容を紹介すると、SeleniumでE2Eテストしたいのであれば、idやclassを適切に振ってあげましょう、という話です。
特に、React.jsではDOMを操作する意識をしなくて済むような仕組みになっています。そのため、意識してidやclassを付けてあげないとDOMベースのSeleniumとは相性が悪くなってしまいます。

そこの辛みを緩和するために、React.jsで作ってSeleniumでE2Eテストを自動化しようとしたときに苦労しないように、どこにidやclassを仕込んでおけばテスト自動化しやすくなるかリストを作ってみました。

あまり良い言葉でリストをまとめることができなかったですが、ブラッシュアップしていきたいと思いますので、優しいご意見・ご要望をお待ちしております。

むすび

CI/CDでどれくらい人が集まるのかと思いましたが、思いの外満員御礼でびっくりしました。登壇者について言えば、こんな感じでした。

「CI/CDが得意なフレンズなんだね！すご〜い！」

あと、懇親会ではピザと寿司が出て、美味しくいただきました！

「たのし〜！」

逆転の発想で考える2017新年会

Salesforce

最近、ブログ更新が滞っており、久しぶりの投稿です。
ちなみに、タイトルはホッテントリ―入りを目指して（ない）ホッテントリ―メーカーで作ってみました。
ということで、2017年1月25日に開催されたTokyo Salesforce Developer Group 2017新年会に参加＆LTしてきました。

www.meetup.com

LTでは、昨年末に開催した Advent Calendar をふりかえりました。昨年は3投稿させてもらったのですが、1つはPodcast収録方法で、1つはPodcast配信で…。まぁ、それはいいや。

Salesforce App Cloud Advent Calendar でQiitaのいいねをもっとも集めた投稿(2017年1月25日時点)は、以下の2つでした。

  • UI/UX変更の際に、サービス、ユーザ、実装者という3つの観点で気をつけていること(shokolatedayさん)
  • 開発組織（Developer Edition）をサインアップした後にやることリスト(stomitaさん)

ただし、Qiitaではない外部のブログに記事を投稿してもらったものについては集計できないので、対象外になっています。外部のブログに書いてもらった記事も面白いものがたくさんありました。

LT資料はこちらです。

www.slideshare.net

今年もmigration.fmともどもよろしくお願いします！
一応、新年の抱負としてPodcast配信月一回ペースで、という話をしたので、もう少し頑張っていきたいと思います。
migration.fm

第3回 日本Seleniumユーザコミュニティ勉強会に参加してきた！

selenium

今日は久しぶりの日本Seleniumユーザコミュニティ勉強会の日！

seleniumjp.connpass.com

調べてみたら、前回は2014年10月じゃないですか。ちなみに第2回の勉強会に参加した時のブログ投稿はこちら。
ということで、ヤフー株式会社にお邪魔してきました。

セッション

セッションの振り返りをざっくりと。詳細は後日資料が発表されるはずなので、そちらを確認するということで。

「Seleniumデザインパターン & ベストプラクティス」の勘所

発表者：太田健一郎さん & 玉川紘子さん (SHIFT)

実践 Selenium WebDriver

実践 Selenium WebDriver

「Selenium実践入門」で学ぶテスト自動化の世界

発表者：伊藤望さん (TRIDENT)

  • ずっと手元に置いておきたい一冊
    • ファイルダイアログ、Basic認証、HTTPヘッダ、HTML5 などの細かなノウハウが書かれている
    • ウィンドウ・タブ、ブラウザログ、@FindBy などマイナーな機能が紹介されている
    • CSSセレクタ・XPath、コマンド文法のチートシート
  • Geb、FluentLenium、Capybara が紹介されている
  • サイボウズさん、DeNAさんの事例が紹介されている

Selenium実践入門 ―― 自動化による継続的なブラウザテスト (WEB+DB PRESS plus)

Selenium実践入門 ―― 自動化による継続的なブラウザテスト (WEB+DB PRESS plus)

E2Eテストフレームワークを使用したテスト自動化事例

発表者：太田邦昭さん (ヤフー株式会社)

  • AngularJSを使っている開発でテスト自動化するフレームワーク選定から導入までやった話
  • ヘッドレスブラウザはPhatomJSを導入検討
    • リアルブラウザでは動作するが、PhantomJSでは動作しないことが
      • ヘッドレスブラウザ(PhantomJS)はまだ早かった
    • XVfbでリアルブラウザをヘッドレス化

STFとAppiumをもちいたAndroidアプリの自動テスト

発表者：平田敏之さん (DeNA)

  • Selenium実践入門に書いたときはまだ課題だったが、この発表は解決編だ！
  • STFでデバイス管理ができる
  • ブラウザからしか操作できなかったから、社内のコミッターとAPIを実装したった
  • 次に書籍を書く機会があったら、解決編まで書く
  • STFの開発を手伝ってくれるエンジニア、ハードを収める箱をデザインしてくれるデザイナーを募集中

Azureを使って手軽にブラウザテストをはじめよう

発表者：小島直也さん

  • 爽やかにテストエビデンスをごまかしたことによる悪循環を解説
  • 頑張ってテスト自動化を進めた
    • 自動テストに立ち向かう人がぶち当たるあるある話
  • Azure上にWindowsServer立ち上げて、スクリーンショットを撮るように
  • テストエビデンスを

Gebに実践入門するために

発表者：PoohSunnyさん (株式会社リクルートジョブズ)

  • Geb愛に溢れる発表
  • Gebを知ってる人、思ったより多い
  • Selenium実践入門の特に素晴らしいところ、Gebの章があること！
  • Geb のハードル1：環境構築周り
    • Grade、Groovyの習得が必要
      • Geb の公式サンプルで勉強するのがいい
  • Geb のハードル2：Groovy習得
    • IDEにサポートしてもらう→IntelliJ IDEAだと少し賢くサポートしてくれる
  • 今日の発表資料は公開に時間がかかるので、リンクなどはあとでツイートしておきます

エビデンス取るのも自動化したい！

発表者：桑原雄一さん (Monocrea)

  • 「テストエビデンス撮るの嫌な人、拍手」
    • 会場から大きな拍手がｗww
  • テストエビデンスを撮るためのツールの紹介

Seleniumアンチパターン

発表者：宮田淳平さん (サイボウズ株式会社)

  • 自動化しちゃうおじさん
  • アンチパターン：なんでもSelenium
    • テストケース数が増えてメンテコスト増大→メンテ不能
      • Seleniumを避ける(適切な自動化方法を選択する)
  • アンチパターン：手動テストの代わり
    • 実装期間中のUI変更で放置、そしてメンテ不能に
      • 自動テストを開発プロセスに組み込み、放置しないようにする
      • なので、推進役が必要
  • アンチパターン：クロスブラウザがんばりすぎ
    • ブラウザの組合せで実行すると、毎日どこかで問題が起き、メンテ不能に
      • ブラウザを絞る(Chrome/Firefoxは比較的安定している)
  • アンチパターンの兆候を感じたら、先人の知恵を活かして解決しよう

薄っすい話百八式

発表者：戸田広さん

  • githubinaoのお話
    • rebuild.fmで@naoyaさんが話してたやつ
  • ポート番号にネタが仕込まれている、それも味わい深い
  • CIの結果の通知は、「音声」で
  • 仕事にもユーモアが大事

まとめ

出版された書籍の読みどころの紹介、実際の開発での活用方法から始まり、テストエビデンスにまつわる苦労と解決、事例に基づいた知見などなど盛りだくさんの勉強会で楽しかったです。特に、「自動テストを始めることは開発プロセスを変えること」という視点は、いろいろ考え始めてしまい発表に集中できないほど刺激を受けました。
発表していただいた方々、会場準備・運営していただいた方々、ありがとうございました。

おまけ

なんと、じゃんけん大会に勝ち残り、出版されたばかりの書籍＆ステッカーをいただきました！
技術評論社さん、ありがとうございます！！！

f:id:a-kura:20160206232745j:plain

※SeleniumJPステッカーは会場で配っているのをもらってきました

Lightning Componet でページ遷移する〜LightningRouter の提案〜

Lightning Component のページ遷移の問題点

Lightning Component は「 Single-Page-Application (SPA) を構築できるフレームワークだ！」なんて触れ込みもありましたが、実のところ1ページ内でViewを切り替えるための Router をライブラリに持っていません。
また、ページ内でのView切替するための仕組みもなく、以前紹介し唯一の可能性であった navigateToComponent() もお蔵入りになってしまっています。
 
つまり、Lightning Component のページ遷移を考えたときによい解決策がない状態でした。
 

LightningRouter の提案

 
実は、Winter'16 で aura:locationChange イベントが追加されました。このイベントは、URLのクエリー文字列やハッシュが変更されたタイミングで発火するものです。この機能追加によって、待望の Router 機能を実装できるようになりましたので、Lightning Component を実現する LightningRouter コンポーネントをサンプル実装してみました。
 

サンプル実装

ルーティングを処理するコンポーネントのサンプル実装です。
初期表示するコンポーネント、ルーティング情報を属性として与えられることで、動作するようになっています。ルーティング処理自体は、locationが変化した際に発生するイベントを受け取り、ルーティング情報に従って{v.body}に表示するコンポーネントを切り替えているだけで単純なものです。
 
```xml:src/aura/LightningRouter/LightningRouter.cmp
<aura:component>
  <aura:handler event="aura:locationChange" action="{!c.render}" />
  <aura:handler event="init" action="{!c.render}" />
  <aura:attribute name="init" type="String" access="global" />
  <aura:attribute name="route" type="String" access="global" />
 
  {!v.body}
</aura:component>
```
 
```js:src/aura/LightningRouter/LightningRouterController.js
({
  render : function (component, event, helper) {
    var token = event.getParam("token");
    var querystring = event.getParam("querystring");
 
    var route = JSON.parse(component.get("v.route"));
    if($A.util.isUndefined(token)) {
      token = component.get("v.init");
    }
    var cmpName = route[token];
 
    $A.createComponent(
      "c:" + cmpName,
      {
        "aura:Id": cmpName,
      },
      function(newCmp){
        if (component.isValid()) {
          var body = component.get("v.body");
          body.pop();
          body.push(newCmp);
          component.set("v.body", body);
        }
      }
    );
  }
})
```
 

利用方法

下記のように呼び出します。init 属性には初期表示する Lightning Component、route 属性には、ハッシュとそのハッシュがセットされた場合に表示する Lightning Component をJSON(連想配列)で記述します。
 
```xml:src/aura/LightningRouterApp/LightningRouterApp.app
<aura:application>
    <c:LightningRouter
        init="Sample1"
        route='{
            "Sample1" : "Sample1Cmp",
            "Sample2" : "Sample2Cmp"
        }'
    />
</aura:application>
```
 
あとは、ページとして表示する Lightning Component を用意し、下記のようにアンカータグでハッシュを呼び出せば、表示する Lightning Component を切り替えてページ遷移します。
 
```xml:src/aura/Sample1Cmp/Sample1Cmp.cmp
<aura:component>
  <div>
    Hello, Sample1!
    <a href="#Sample2">Sample2</a>
  </div>
</aura:component>
```
 
```xml:src/aura/Sample2Cmp/Sample2Cmp.cmp
<aura:component>
  <div>
    Hello, Sample2!
    <a href="#Sample1">Sample1</a>
  </div>
</aura:component>
```
 

GitHubリポジトリ

サンプルソースコードについては、ここで公開しています。
 

おわりに

以上のように、 Winter'16 で追加になったイベントを用いて、これまで Lightning Component になかった Router機能を実装しました。
今回実装したものは、単純に Lightning Component を切り替えるシンプルな実装となっています。
 
実際に製品開発などで利用する場合は、Salesforce1で動作するように修正する、ページ遷移時のアニメーションを追加する、など必要に応じて拡張していく必要があります。