チームスピリットデベロッパーブログ

チームスピリット開発者のブログ

Slack×GAS 契約自動更新サービスの稟議忘れを防ぎたい!

こんにちは。開発チームで社内利用ツールの管理もしている松田(id:a-matsuda)です。
みなさん、開発に際して、いろんなクラウドサービスを利用しているのではないかと思います。

弊社でも

  • JIRA
  • Confluence
  • Cacoo
  • CirecleCI  などなど・・

様々なツールを利用して、開発プロジェクトやドキュメントの管理、開発工程の効率化などを行っています。 が、今回のテーマは、使っている開発ツールの便利な使い方、とかではありません!

こういったツールって、だいたいが契約自動更新ですよね?
再契約しなくて済むので、その点は非常に楽なのですが、反面、気づいたら社内の稟議期限が切れてしまいそうだった(しまっていた・・・汗!)なんてこと、ありませんか?

今回は、そんな危ない稟議漏れを防ぐ仕組みをSlack×GAS(Google Apps Script)で作ろうという内容です。

これまではどうしてた?

月初に1回、当月に更新切れになるものがないかをプロアクティブにチェックしていました。

困っていたこと

  • 管理するツールが20件を超えた時点で、自身の目が節穴になる。
  • 1ヶ月の無償期間を経て有償になるツールを利用したいというニーズが出てきた。
    この場合、2weeks検証したあとに、解約または契約(のあと、稟議)となるので、
    1ヶ月に1回じゃ間に合わない。

目的

自動更新されてしまう前に、漏れなく社内稟議、承認までを完了できるようにしたい。

実現したいこと

毎週月曜日10時に、契約しているクラウドサービスのうち、契約見直日(※)の14日前をきっているサービスがあったら、Slackに契約更新通知を行いたい。
(※解約通知が3ヶ月前というサービスもあります。弊社の場合は、解約通知日=契約見直日として、契約見直日の前に契約継続でいいかを判断したうえで、継続の場合は社内稟議をあげるルールとしています。)

使う技術要素

  • SlackのIncoming WebHooks
    Slackが発行するURLへPOSTするとSlackにメッセージが投稿される機能 api.slack.com
  • Google Apps Script
    Googleが提供するサーバーサイド・スクリプト環境

おおまかな流れ

1. スプレッドシートで契約一覧を作ろう
契約サービス名と契約見直日は、最低限管理をしておきましょう。 f:id:a-matsuda:20171212013126j:plain

2. SlackのIncoming WebHooksの登録しよう

  • https://(Slackドメイン名).slack.com/apps にアクセスします。
  • 上部に検索ボックスが表示されるので、そこで「Incoming WebHooks」という検索をすると、Incoming WebHooksの設定ページへと飛ぶことができます。
  • 「Add Configuration」をクリック後、投稿したいチャンネルを選択し、作成ボタンをクリックします。
  • 作成完了後、Webhook URLの項目に表示されるURLを次の章で使用します。

3. GASを作成しよう

function alertContract() {
    var mySheet = SpreadsheetApp.openById('シートID').getSheetByName('契約サービス一覧_sample'); //スプレッドシートを取得
    var lastRow = mySheet.getLastRow(); //スプレッドシートの最終行を取得
    var today = new Date(); //今日の日付を取得
  
    /* 契約見直日まで14日切っていたらSlack投稿 */
    for (var i = 2; i <= lastRow; i++) {
        var Di = mySheet.getRange(i, 4).getValue(); //サービス名(Di列)を取得
        var dateHi = new Date(mySheet.getRange(i, 8).getValue()); //契約見直日(Hi列)を取得
        var period = dateHi.getDate() - today.getDate(); //今日から契約見直日までの期間を取得
        if (period <= 14) { //2週間前に告知
          //通知文を作成
          var strText = "@matsuda.akiko " + Di + "の契約更新期限が迫っています。稟議を上げてください。期限:" + dateHi;
          //Slackへ投稿
          postSlack(strText);
        }
    }
}

function postSlack(strText) {
 
  //payload
  var payload  = { 
    'username'  : "Contract Notification",
    'text'      : strText,
    'link_names' : "1", //
  };
  var options = {
    'method'      : 'post'                 ,
    'contentType' : 'application/json'     ,
    'payload'     : JSON.stringify(payload),
  };
 
  // Webhook URL へPOSTする
  var url = 'https://hooks.slack.com/services/XXXX/XXXX/XXXX';  //「2.SlackのIncoming WebHooksの登録しよう」で払い出したURLを指定
  UrlFetchApp.fetch(url, options);
}

4. トリガーを登録しよう
「現在のプロジェクトのトリガー」アイコンをクリックし、トリガーの予定を登録して保存します。

f:id:a-matsuda:20171212014925p:plain

5. 無事Slackに投稿されました!
f:id:a-matsuda:20171212024256p:plain

つまづいたところ

  • チャネルに投稿するときに自分にメンションをしたかったのですが、最初はテキストにしか認識されませんでした。
    payloadの設定で、'link_names' : "1" に追加することで無事メンション認識されました!

こんなことにも応用してみた!

  • 私、採用も担当しております。googleカレンダーと連携し、翌日に面接に関連する予定が入っていたら、「ちゃんと面接の準備できてる?」とSlackで通知してくれる機能も作ってみました。 基本的な流れは一緒で、GASだけ下記ような感じで書いてみました。
function alertInterview() {
  //IDを指定してカレンダーを取得
  var calendar = CalendarApp.getCalendarById('カレンダーID');

  //翌日のイベントを取得
  var date = new Date();
 date.setDate(date.getDate() + 1);
  var events = calendar.getEventsForDay(date);

  //面談の予定があったらSlack投稿
  for (var i=0; i < events.length; i++) {
    var title = events[i].getTitle();
    var startTime = events[i].getStartTime()     
    var endTime = events[i].getEndTime()
    
    //面談の種類によりメッセージを振り分ける(実際はもう少し複雑・・)
    if(title.indexOf("面談") !== -1) {
      //通知文を作成
      strText = "@matsuda.akiko " + title + "面接の準備できてる?";
      //Slackへ投稿
      postSlack(strText);
    }  
  }
}

まとめ

大変簡単な技術ではありますが、Slack中心の生活を送っておられるエンジニアやチームマネージャー、私と同様に忘れっぽい方、忙しい方にも、Slackでのアラート通知は心強い味方になるでしょう。

おまけ

最後になりましたが、この投稿は チームスピリット Advent Calendar 2017 - Adventar 第12日目の投稿になります。 毎日面白い投稿が行われていますので、ぜひ継続してチェックしてください! adventar.org

Salesforce DX CLI から Apex を実行する

こんにちは、倉谷(id:a-kura)です。

今年もいつのまにかアドベントカレンダーの時期になってしまいました。皆さま、いかがお過ごしでしょうか?

さて、Salesforce DX CLI の紹介では、権限セットの付与やデータロードがデモされていましたが、実はもう一つ重要な機能があります。

そう、任意の Apex が実行できる機能です。

今回は、Salesforce DX CLI を使って、 Apex を実行する方法について紹介したいと思います。

f:id:a-kura:20171204124243p:plain

ヘルプ

まずは、Apex コードを実行するためのコマンドのヘルプを参照します。下記のコマンドを実行すると、ヘルプを表示できます。他のコマンドを調べるときも同様なので覚えておくと役立ちます。

$ sfdx help force:apex:execute
Usage: sfdx force:apex:execute [-f <file>] [-u <string>] [--json] [--loglevel <string>]

execute anonymous Apex code

Flags:
 -f, --apexcodefile APEXCODEFILE      path to a local file containing Apex code
 -u, --targetusername TARGETUSERNAME  username or alias for the target org;
                                      overrides default target org
 --json                               format output as json
 --loglevel LOGLEVEL                  logging level for this command invocation
                                      (error*,trace,debug,info,warn,fatal)

Executes one or more lines of Apex code, or executes the code in a local file.
Before you enter code, run this command with no parameters to get a prompt.
From the prompt, all commands are executed in a single execute anonymous request.
For more information, see "Anonymous Blocks" in the Apex Developer Guide.

Examples:
   $ sfdx force:apex:execute -f ~/test.apex

   $ sfdx force:apex:execute
   >> Start typing Apex code. Press the Enter key after each line,
   >> then press CTRL+D when finished.

コマンドラインから Apex コードを入力して実行する

では、コマンドラインから 直接 Apex コードを入力して実行してみましょう。 認証を済ませたあと、先ほどのヘルプで参照した内容を参考に実行してみます。

$ sfdx force:apex:execute

コマンドを実行すると、下記のようなメッセージが表示されて、入力待ちになります。

>> Start typing Apex code. Press the Enter key after each line,
>> then press CTRL+D when finished.

下記のように適当な Apex コードを入力して、CTRL+D を押下します。

System.debug('Hello, Astro!');

そうすると、実行結果が表示されます。 実行結果の内容を見ると、開発者コンソールから実行したときのログと同じものが表示されていることがわかります。

Compiled successfully.
Executed successfully.

41.0 APEX_CODE,DEBUG;APEX_PROFILING,INFO
Execute Anonymous: System.debug('Hello, Astro!');
23:41:42.11 (11567895)|USER_INFO|[EXTERNAL]|005xxxxxxxxxxxxxx|xxxxx@xxxxx.com|日本標準時|GMT+09:00
23:41:42.11 (11592457)|EXECUTION_STARTED
23:41:42.11 (11597237)|CODE_UNIT_STARTED|[EXTERNAL]|execute_anonymous_apex
23:41:42.11 (12249513)|USER_DEBUG|[1]|DEBUG|Hello, Astro!
23:41:42.12 (12311326)|CUMULATIVE_LIMIT_USAGE
23:41:42.12 (12311326)|LIMIT_USAGE_FOR_NS|(default)|
  Number of SOQL queries: 0 out of 100
  Number of query rows: 0 out of 50000
  Number of SOSL queries: 0 out of 20
  Number of DML statements: 0 out of 150
  Number of DML rows: 0 out of 10000
  Maximum CPU time: 0 out of 10000
  Maximum heap size: 0 out of 6000000
  Number of callouts: 0 out of 100
  Number of Email Invocations: 0 out of 10
  Number of future calls: 0 out of 50
  Number of queueable jobs added to the queue: 0 out of 50
  Number of Mobile Apex push calls: 0 out of 10

23:41:42.12 (12311326)|CUMULATIVE_LIMIT_USAGE_END

23:41:42.11 (12348943)|CODE_UNIT_FINISHED|execute_anonymous_apex
23:41:42.11 (13282152)|EXECUTION_FINISHED

ファイルから Apex コードを実行する

次に、Apex コードを保存したファイルから Apex コードを実行していましょう。 まずは、実行するための Apex コードを準備します。

ここでは、Apex コードが実行できるか試したいだけなので、先ほどと同じコードをファイルに保存します。

HelloAstro.apex
System.debug('Hello, Astro!');

先ほどのヘルプのとおり、ファイルを指定する場合は「--apexcodefile」または「-f」のあとにファイル名を入力します。

$ sfdx force:apex:execute --apexcodefile HellpAstro.apex

そうすると、先ほどコマンドラインから Apex コードを入力して実行したときと同じ実行結果になります。

活用方法

Apex コードが実行できると、どういった嬉しいことがあるのでしょうか?

実は、データの初期化などでオブジェクトのレコード間に相互参照などがあると、データインポートが難しくなることがあります。そういった場合には、Apex コードと組み合わせることで効率的にデータインポートができるようになります。

開発者がデータをクリアしたい場合、サンプルデータなどを一括作成する場合などには、Apex コードを準備しておくと、無駄な手間が少し省けるようになり、開発効率向上にも貢献できそうです。

また、オプション「--json」をつけて実行することで、実行結果をJSON形式で受け取ることができます。 JSON形式で受け取ることができれば、Jenkisやバッチ処理内で実行結果を条件判定するような処理を記述できるようになります。

シェルに組み込めるようになると、活用の幅も広がってきます。こういった柔軟性を与えることがこのコマンドのメリットと言えるでしょう。

むすび

Apex コードをコマンドラインから実行してみましたが、参考になりましたでしょうか?

Apex コードを実行できるようになることでかなり柔軟なことができるようになりますので、皆さまもよいアイデアがあれば共有してもらえると幸いです。

最後になりましたが、この投稿は チームスピリット Advent Calendar 2017 - AdventarSalesforce Platform Advent Calendar 2017 - Qiita 第2日目の投稿になります。

adventar.org

qiita.com

ハッピー・クリスマス!

Salesforce Developers Meetup #16 参加レポート

こんにちは、倉谷(id:a-kura)です。

今回の Meetup は雨が降っていたにもかかわらず、ほとんどの方が定刻に参加されていました。 参加人数と歩留まりを予想して会場をいつもの半分のサイズにしてもらっていたのですが、会場が満員になっていました。

プログラム

プログラムは以下のような感じでした。

リリースノート輪読

技術系セッション

  • Heroku Connect 苦肉の四苦八苦」(大久保英樹さん)
  • 「エンジニアがSalesforceを使って事業に貢献できること」(アドバンテッジ リスクマネジメント小泉剛さん)

LT

Meetup

www.meetup.com

感想

リリースノート輪読

Lightning Experienceへのマイグレーションが一段落して、機能的に充実してきたとともに新機能への投資が復活してきた印象があります。

Big Object、Platform Event、IoTなどはこれまで継続的に開発してきた機能をまとめあげて実戦投入してきています。 Trailheadが派手な宣伝をしているので目が行きがちですが、ビックデータ周りの機能強化は注目していきたいです。

技術系セッション

Heroku Connectを利用した事例がそれなりに増えてきて、ノウハウが溜まってきているように感じました。 Heroku Connectを利用した場合のインピーダンスミスマッチだけで拒絶反応を起こしてしまいがちです。 このインピーダンスミスマッチを乗り越えるためのノウハウ(苦肉の策)は、Heroku Connectの導入を検討されている方には参考になると思いました。

大久保さんの発表で言葉そのままではないですが、「発表資料を見るとHeroku Connectの辛みが出ているが、それ以上にHerokuとSalesforceを連携させることにメリットがある」ということをおっしゃっていたことが印象的でした。

LT

MiniHackの解答速報で定評のある弊社山崎よりMiniHackのふりかえり的なLTがありました。

www.slideshare.net

さすがの安定感あるLTでしたが、不安定な景品の処遇が気になるところです。 Visual Workflowネタは石井さんのLTと合わせて読み込むと、設定画面のアレなところとは裏腹にいろいろできそうでした。

宣伝

先日、このような投稿を見かけました。

美味しいご飯(まかない)を食べながらの勉強会が開催されるかも!?気になる方はconnpassのグループにジョインして待ちましょう!

teamspirit.connpass.com

Salesforce World Tour Tokyo2017に、弊社の倉谷が登壇しました!

こんにちは。開発チームマネージャーの松田(id:a-matsuda)です。

さて今回は、9月26日と27日の2日間で開催されたSalesforce World Tour Tokyo 2017にて、弊社アーキテクト兼QAリード、そしてSalesforce MVPでもある倉谷(id:a-kura)が登壇しましたので、その時の様子をレポートします!

Salesforce World Tour Tokyo 2017とは

セールスフォース・ドットコム社が主催する、参加者数2日間合計8,200名以上という国内最大級! 規模のクラウド・イベントで、大盛況のうちに終了しました。
100を超えるセッションが行われ、倉谷は9月27日の開発者向けセッションで登壇しました!

会場はこんなところ

東京プリンスホテルに、Salesforce管理者および開発者向けのコミュニティゾーン「Trailblazer Zone」が出現!
オープンスペースで、セッションやハンズオン形式で実施するワークショップ、Mini Hackなどをやっていて、歩きながら覗いたり聞いたりでき、参加同士がコミュニケーションする姿も印象的でした。
そのなかの一番大きなTHEATER「MAIN THEATER」で、今回のセッションが行われました! f:id:a-matsuda:20171006133038j:plain

セッションタイトルはこれ

タイトルは、「Salesforce DX ~Salesforce開発にも継続的デリバリーを~」。ついにオープンベータがリリースされ、Salesforceディベロッパー注目のSalesforce DXですが、今回はそのなかでも「継続的デリバリー」がテーマ。 セールスフォース・ドットコムのエバンジェリスト岡本充洋さんと弊社のアーキテクト倉谷彰のデュオセッションです。

登壇の様子

まずはワイヤレスマイクの装着から・・

マイク装着中の倉谷、なんとなく緊張が伝わりますね!! 会場もほぼ満席、立ち見の方もちらほらです。 f:id:a-matsuda:20171001220341j:plain

さあスタートです

まずは岡本さんから、Salesforce DXは、モダンなソフトウェアの開発要件を満たし、より開発の生産を高めるために生み出された、新しい開発手法という紹介がありました。 特徴は3つです。

  • ソース駆動開発
  • 素早いテストとデプロイ
  • オープンで標準的な開発プロセス

そして「そんなSalesforce DXのリリースされるずいぶん前から、継続的インテグレーションを導入し実践してきた チームスピリットの倉谷より、これまでやってきた継続的インテグレーションと、Salesforce DXでなにが変わるの?を話してもらいます」と倉谷にバトンタッチ。 f:id:a-matsuda:20171006133333j:plain

まず自己紹介から

ついに、倉谷の出番です。 会社でもいろんな肩書きを持っている倉谷ですが(兼務しすぎ問題!)、Winter'17のSalesforceMVP に選ばれています!なんと2017年10月現在、SalesfocreMVPは、日本国内で8名しかいません!
Developer Meetupやこういうセッションでの登壇実績の他、 migration.fm で Salesforce Developer 向けのPodcastを配信するなど様々な活動が認められたんですね! f:id:a-matsuda:20171006133059j:plain

TeamSpiritの急成長を支える仕組みづくり

TeamSpiritは、現在、800社・10万ユーザのお客様にご利用いただいていますが、お陰様で、2012年のリリースから右肩上がりにユーザ数が増えてきました。それを支える仕組み作りを、それこそContinuous にやってきた歴史について語りました。

そもそも、継続的デリバリーってどこまで自動化すること?

みなさん、インテグレーションとデリバリー、デプロイの違い、ちゃんと説明できますか?
特にごっちゃになりやすいのが、デリバリーとデプロイかなと思います。 デリバリーは、自動的にビルド、テスト、および本番へのリリース準備までをし、運用環境のデプロイには承認が必要。 一方、デプロイは、承認なしで自動デプロイするところまで継続的にやっちゃおうってこと、という説明がありました。
運用するサービスやプロダクトによって、どこまで継続的にやるか(やれるか)が変わってきますね。

TeamSpiritの継続的インテグレーションをご紹介

デモを交えて(実際のカバレッジが丸見え!)、現在のCI環境をご紹介!

これまででてきた課題と対策

このパートでは、改めて、改善を積み重ねてきた歴史を感じることができました!状況やフェーズが変われば、新たな課題が出てきて、それを潰していく努力が必要ということ。これぞContinuousだなと思いました。

  • リポジトリとパッケージ作成組織が不一致
  • リリース直前に問題が発覚する
  • 終わらない回帰テスト

に対して、ソースコード管理の一元化やJenkinsでデプロイ・Apexテストの自動化、ブラウザを操作してGUIテストの自動化等も進めてきており、現在では、コード品質を上げる、ドキュメントの作成が面倒みたいな状況にも対応していてます。

SalesforceDXでかわる継続的インテグレーション

チームスピリットでは、かなりCI環境の作り込みをしてきましたが、SalesforceDXを導入することによってさらによくなる部分ってどこなのか?よくなる部分があるのか?(笑)
興味深々でしたが、メリットは、Scratch Orgでテストの並行化ができることのようです。
開発者がマージ前に自動テストが通っているのかを確認した上で、マージができるなど、テスト効率化に寄与しそうだなと思いました。そして、SalesforceDXを使うとこんな感じになるというデモも!

SalesforceDXでかわる継続的デリバリー

「SI・自社開発」と「ISV/OEM」それぞれのケースで、継続的デリバリーがどう変わるか、岡本さんと会話形式で確認していきました。 ISV/OEMのパッケージの場合は、近い将来、継続的デプロイまでできるようになるそうです。
Salesforceも、最新バージョンを常に使ってもらうコンセプトがあるので、それが自動化できるように、パッケージもCLIでお客様の運用環境にリリースできるようになるとのこと。Winter'18でオープンベーダになるパッケージ2.0(CLIでパッケージ作成が可能)も楽しみですね。

まとめ

すぐに始められるDXは要注目!

  • 静的解析ツール:PMD ApexをIDEに組み込んで利用してみよう!インラインで警告を出してくれるので、開発の手助けになるようです。
  • Apexテストの自動実行をぜひ試してみよう!タイムリーにApexテストの実行結果が通知され、開発作業自体がかなり楽になるみたいですね。

そして・・We're Hiring!

エンジニア募集してます!倉谷と働きたい方ぜひご連絡ください!

終了

観衆の興味関心を一身に集めたセッションが無事終わりました! 会場の熱気がすごかったです。

倉谷からのコメント

ビジネスのスピードがどんどん加速して、短納期・継続開発が一般化し始めています。特に、Salesforce開発はプラットフォームでできることが多く、その傾向が顕著です。 そういったニーズを捉えるために、アジャイル開発、そのプラクティスの一つである継続的インテグレーション、継続的デリバリーを開発に取り入れることが非常に重要になってきています。

今回は、Salesforce開発で実現する継続的インテグレーション、Salesforce DX で変わる継続的デリバリーについてデモやディスカッションを交えて発表させていただきました。

セールスフォース・ドットコム社のサイトから動画もご覧いただけますので、弊社と一緒に Salesforce DX を利用してモダンな開発スタイルに挑戦していきましょう!

資料・動画はこちら

おまけ

  • 弊社エンジニア・山崎が、個人ブログにMini Hack について記事を書いています
  • 松田も、Trailhead 体験コーナーに立ち寄りまして、World Tour Tokyo '17 バッチとTシャツをゲットしました! f:id:a-matsuda:20171006133128j:plain
  • 弊社ヘルスケア部メンバー向けのコーナーもありました!! f:id:a-matsuda:20171006133103j:plain

TrailheaDX for you (in Japan) 参加レポート

こんにちは、倉谷(id:a-kura)です。

夏風邪を引いてしまいずっと引きずっていたので、「TrailheaDX for you (in Japan)」の参加レポートも途中まで書いたまま止まっていました。ようやく体調も戻ってきたので、思い出せる範囲で思い出してレポートします。

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

www.meetup.com

TrailheaDX for you (in Japan)

【第一部 中の人によるDXレポート】

基調講演最新情報(セールスフォース・ドットコム社 岡本さん)

中の人によるTrailheaDXの紹介です。EinsteinやSalesforceDXのデモを交えながら、TrailheaDXでどういった発表があったか、ふりかえりがありました。

発表資料:TrailheaDX for you Blaze Your Trail

次世代のパッケージング Packaging 2(Pilot)(セールスフォース・ドットコム社 川畑さん)

中の人による Packaging 2 の紹介がありました。ISV/OEMパートナーにとってどういった機能になっていくか興味津々な発表でした。 大きなところでは、Pilot機能として提供されてきていてブランチ組織がSalesforceDXと統合され、GAに向かっていっているようです。

ブランチ組織は、同じパッケージ名前空間を持つ開発組織を複数作成できるようになる仕組みです。 この仕組があれば、開発者ごとの開発組織で開発したソースコードをパッケージング時に名前空間に関するソースコードを修正してデプロイするような作業をなくすことができますのでリリースされるのが待ち遠しいです。

www.slideshare.net

モバイル・カスタム開発が加速するUser Interface APIのご紹介(セールスフォース・ドットコム社 菅原さん)

Summer'17 でリリースされた User Interface API のご紹介がありました。 項目の並びなどをSalesforce標準画面と揃えたモバイルAppを作成したり、項目の並びをカスタマイズする仕組みとしてページレイアウトを利用したりできるようになります。

セキュリティを考慮したデータ取得などもできるようになるので、これまで自分で実装する必要があった処理が大幅に簡略化できるようです。気になっていた機能なので、話が聴けてよかったです。

www.slideshare.net

【第二部 参加者による生の声レポート】

セールスフォース・ドットコム社 舟越さん司会のもと、Trailheadキャンペーンで当選した2名の方の遠藤さん、小泉さんのお話を伺いました。

いろいろとお話を伺えて面白かった記憶はあるのですが、夏風邪でダウンしていたので覚えてないです。すみません。 印象に残っていることは、やはり英語できるようになっとかないと、ということでした。。。

【LT】

Federated Search(統合検索)を見てみよう(セールスフォース・ドットコム社 稲葉さん)

地味にリリースされた統合検索についてご紹介がありました。OpenSearchプロトコルに準拠するサービスであれば、Salesforceの画面から統合検索できる機能です。

接続先が「application/atom+xml」形式で結果を返してくれる必要があり、簡単に試せるサービスがなかったとか。。。面白い機能なだけに残念ですね(汗)。

発表資料:Federated Search(統合検索)を見てみよう

おまけ

Salesforce Developer Group Tokyo 会長の米井さんから「TrailheaDX Map」の紹介がありました。TrailheaDXのキーノート、セッション資料(一部)、Minihackなどがまとまっていますので、ふりかえるお供として眺めてみると色々と捗りそうです。

資料: TrailheaDX Map

むすび

米国で開催された「TrailheaDX 2017」の雰囲気を少し感じることができました。とはいえ、やはり現地の空気感はまったく違うと思いますので、機会があれば行ってみたいです(英語をどうするか問題は残ってますが…)。

今回の発表では、OEMパートナーとして Packaging 2.0 の話が一番気になりました。現在のパッケージの仕組みもよくできた仕組みではありますが、やはり古くなって使いにくくなってきている部分もありますので、新しいバージョンには期待しています。正式リリースまではもう少し時間がかかるようなので、ちょっとずつ調べながら、GAになるのを楽しみに待っていたいと思います。

最後になりましたが、会場に入るときにTrailheaDXのお土産として、バックパックをもらいました。 登山用のバックパックのようで、防水になっているとのことです。ありがとうございます!

宣伝

弊社では最近美味しいご飯(まかない)を食べながらの勉強会を開催しております。気になる方はconnpassのグループにジョインください!

teamspirit.connpass.com

フロントエンドとごはんをいただく、まかないてっく#一杯目を開催しました

f:id:ts-yokouchi:20170731093835j:plain 私のLTより私の作った唐揚げ丼に集中する皆さま

こんにちは、腹筋ローラーの力を信じろ(id:ts-yokouchi)です。

弊社では先日、まかないてっく〜フロントエンドを語ろう〜というイベントを開催させていただきました。

teamspirit.connpass.com

弊社ではお昼にエンジニアが集まり、ご飯を食べながら技術談義を行う「Tech Lunch」という活動があります。

週の技術トピックをあげて適当に喋ったり、1時間半ほど設計相談が続いたり、いきなりLTがはじまったり、おもむろに出汁から作った明太子茶漬けが振舞われたりします。予定も内容も決めないゆる〜く技術について花を咲かせる会です。

今回は社外公開版Tech Lunch、「まかないてっく」テーマは「フロントエンドを語ろう」ということで開催させていただきました。

簡単にですがレポ or 感想をまとめていきます。 ちなみに当日お出しした唐揚げ丼についてはおもわず長文になってしまったので別記事としてまとめています。

LT

当日は私を含めて4人がLT枠で発表を行いました。

ES2018 AsyncIteratorでキメる / brn0227 さん

speakerdeck.com

Iteratorから非同期までざっとお話いただいたあとに、proposalsの一つであるAsyncIterator / for-await-ofをつかった自作のライブラリをご紹介いただきました。
github.com

Aysnc Iterationはstage3まで進んでおり、仕様としては固まっていてbabelでも利用することが可能です。
勉強が足らずに「なるほどいっぱい便利なのがでてきたな、面白そう!」みたいな感想しかでてきませんでした。

後日ネットサーフィンしたところ、似たような非同期データを扱う仕様としてObservable/Streamもあるらしく、それぞれどういった用途があるのかを理解するのは今後の課題です。

キーボード操作 (カチャカチャカチャ…ッターン!) するために / masuP9 さん

masup.net

アクセシビリティおじさんさんの発表です。なんと40枚ものスライドをご準備いただき、アクセシビリティのさわりからReactでの実装例まで一気に駆け抜けるような内容でした。 後半ネイティブでないUIをアクセシブルにする例をご紹介いただきましたが、こういった事例が実業務では多々あると思います。

そんな時に参考になるのがWAI-ARIA Authoring Practices 1.1、流し見しただけですが具体的な実装指針が乗っているようです。

8月は定員が埋まってしまったそうなのですがWCAGもくもく会という勉強会があるそうです。アクセシビリティに興味を持たれた方は是非参加してはいかがでしょう。

ca11y.connpass.com

Reactでつくる動的レンダリング / aloerina_ さん

speakerdeck.com

Reactの動的レンダリングをGofのFactory Patternを使って柔軟に実装するというお話でした。コンポーネントの描画切り替えを行う分岐をFactoryクラスに移譲することでContainerコンポーネントがスッキリかけるそうです。

実際描画されるコンポーネントはインターフェースを合わせる必要があるとのことで、TypeScriptやFlowなんかを合わせると効果を発揮しそうですし、HOCなんかで実装しても面白いのでは!と思いました。

CSSは死んだのか?/ 腹筋ローラーの力を信じろ

speakerdeck.com

自分の発表です。タイトルのインパクトが強いですが、要は世の中に溢れている設計やツールに頼りきらず、CSS(とその前段)を見直そう、というふんわりした話でした。

最後のほうで「デザインがあって、HTMLがあり…」といった内容のスライドを入れておいたのですが、HTMLが一番上にくるべきといった趣旨のまさかりをいただきました。Webというプラットフォームに乗っかる以上、デザインより先にWebがあるべきであるし、我々フロントエンドエンジニアとしてはチームを導いていかないといけないですね。

ディスカッション

後半はテーブル二つに分かれてディスカッションタイムを行いました。一時間 + 中締め後残っていた方はもう一時間近く続きました。

あらかじめ投稿していただいたネタを元に議論を行う予定でしたが、テーマからどんどん飛躍してとても濃い話ができたのではないかと思います。「フロントエンド」とテーマを決めてはいましたが、集まった面々はバックグラウンドや担当領域が異なり、いろんな側面からの意見がでて良かったです。

こういう参加型ディスカッションは実りになる内容がとても多いと感じており、いろんなところでやってみて欲しいなと勝手に思っています。

小ネタ

f:id:ts-yokouchi:20170731094608p:plain

今回は「まかない」がテーマだったこともありデザインの中心にしゃもじを据えてみました。「ゆるい」がテーマの一つだったのでいろいろと遊びましたw

f:id:ts-yokouchi:20170731094520j:plain 表情に定評のある同僚氏

写真はしゃもじを握ってる風に見えるマイクです。こういうくだらないことが大好きなんです。

LTでもみなさん、「まかない」ネタをちょくちょく挟んできてあって楽しかったですw

f:id:ts-yokouchi:20170731132329j:plain

これから

まかないてっくは「#一杯目」と打ち出しているように今後も継続していく予定です。 テーマもまかないも、毎回趣向を凝らして変えていこうと思いますので気になる方はconnpassのグループにご参加ください!

teamspirit.connpass.com

まかないてっく#1杯目 究極の唐揚げ(丼)レシピ

f:id:ts-yokouchi:20170731093713j:plain

こんにちは、腹筋ローラーの力を信じろ(id:ts-yokouchi)です。

先日弊社にて開催したまかないてっく#1杯目、まかないとして唐揚げ丼を提供させていただきました。

teamspirit.connpass.com

丼の上に乗っかっているメインの唐揚げは私が一つ一つ心を込めて揚げたものです。
レシピは時間をかけて試作を繰り返してチームスピリットのみんなで作り上げたものです。

今回はそのレシピの詳細をご紹介いたします。

唐揚げレシピ

鶏のから揚げはこんなふうに 奇跡の おいしさ - くらしのきほん

こちらのレシピをベースにさせていただいています。

  • 鶏胸肉200g

下味用タレ

  • 塩 ひとつまみ
  • 生姜汁 小さじ4杯
  • ごま油 1杯
  • 溶き卵1個
  • 片栗粉 2杯
  • 醤油 大さじ2杯
  • 酒 大さじ2杯

  • 米粉 180g
  • 薄力粉 小さじ1杯

揚げ油

  • 菜種油とひまわり油の1:1混合

下味用のタレを混ぜる際に、片栗粉は最後に少しづつ混ぜていきます、一気に入れるとまざりません。またタレの漬け込み時間は40分、肉を大き目にしたこともあり常温で行いました。

揚げ方については肉ドリルを参考に 1分揚げ→2分休ませ→1分揚げ→2分休ませ→10秒揚げを1イテレーションとして繰り返しました。温度は高めで190度です。

大人の肉ドリル

大人の肉ドリル

醤油は「井上醤油店 井上 古式じょうゆ」を酒には「菊正宗」を使っています。以前見たレシピ本では料理酒より普通の酒を使おう!と書いてあったので試したのですが、効果や理由など研究の余地がありそうです。(塩加減が違うみたいです)

量については、当日はこの10倍を生産しています。

試作

会のおおよそ5日前から試作をはじめました。 ぶっつけ本番で数キロの唐揚げを生産するリスクを下げるためと、最適なレシピを見つけるためです。

最終的なレシピを発見するために

上記のバリエーションを試作しました。
ちなみにどうでもいいのですが私はレシピ検索する際に「〇〇 究極」みたいなワードで検索することが多いです、中二病。

試作回数的には6回ほど行いましたがうち4回は自食、2回は社内のメンバーに試食いただきました。
自食の4回については味の追求というよりは「唐揚げを作るための素振り」最低限の料理スキルをあげるためのTryです。

社内メンバーによる試食ではかなり具体的な指摘が飛び交う実りの多いものでした。どのレシピも基本は「おいしい!」という意見をいただくことができました。

(休日試作)

(平日試食)

味付け

味付けとして用意した三つのレシピでは以下のような特徴があります。

肉ドリル

水分多め、加水をすることにより食べた時の肉汁によるジューシーさが違う。

カリッとジュワッと 家族絶賛鶏の唐揚げ。

すりおろし玉ねぎを入れるところがポイント、いままでにないジャンクな味。

くらしのきほん

一見スタンダードに見えるが生姜とにんにくの量が目をひく。卵と片栗粉を下味として使うところもポイント。前者のすりおろしが辛すぎて指の皮が剥がれるかと思いました。

今回は揚げてからしばらく時間をおくこと、「唐揚げ丼」としてごはんや他調味料などを加味してくらしのきほんレシピをベースにすることとしました。個人的には揚げたてで提供するなら肉ドリル、酒のつまみとしてはクックパッドレシピが良いかと思いました。ここらへんはユースケースを踏まえてのチョイスになるかと思います。

余談ですが、「ユースケース」という単語を食レポで使った同僚氏のセンスには脱帽です。

衣に関しては商用として売っている唐揚げのほとんどは片栗粉ベースとのことで、片栗粉を起点に試行しましした。片栗粉をつかうとカラッと上がる傾向があるんだそうです。加えてあらかじめ加水してあえて「ダマ」をつくることで厚みのある衣に仕上がるそうです。

ダマを作るレシピに関しては試してガッテンで紹介されたレシピのようです。 marron-dietrecipe.com

また今回は時間がなかったため採用見送りとなりましたが、こちらのレシピもとても美味しかったです。ご飯をいれることで衣に空洞をつくりサクサク感を出すのだそうです。 news.walkerplus.com

最終的には某惣菜屋での勤務経験のある人事より「米粉をつかうと時間がたってもサクサク感が落ちにくい」とのタレコミをくれたため米粉を使うことにしました。ただ、時間が経った唐揚げはどうしても衣のサクサク感も失われてしまいます。
一度冷めてしまった唐揚げの再加熱には、揚げ直しやオーブントースターで再加熱などが推奨されているようです。残念ながらオフィスにオーブンなどの火入れを行える機材がなかったため、極力薄めにつけることにしました。 その結果若干焼きが多く入り、ハードな仕上がりになりました。

こちらも元某惣菜屋からのタレコミにより菜種油とひまわり油の1:1混合したものは通常の油より臭みが少ないとの情報を得たため採用しました。実際に調理してみたところ、安価で手に入ったキャノーラ油と比べて調理が進んでも油はそこまで悪くならなかった印象です。

ただスーパーでは菜種油の取り扱いがなかったためAmazonから購入する必要がありました。一般に流通しているキャノーラ油は菜種の改良であるキャノーラ種を原料しており、菜種油の取り扱いは減らされているのかもしれませんね。

大きさ

今回の下味はかなり濃いめのため、鶏胸肉は大き目カットにしようとしましたが、一部失敗して小さくなってしまいました。

大き目にすることで下味は薄くなりますが肉本来のジューシーさは前面にでてきます。また今回衣を米粉にしたことで、個人的には米粉自体の味は他の衣と比べ1段落ちるような気がしたため、割合を減らして肉をなるべく主体にしたいと考えました。

移動用容器

試食にて密閉タッパーで持ち運んでいったところ元某惣菜屋(ry

理由はよくわかっていないのですが、ピクニックやお惣菜屋さんで使われるような透明な使い捨てプラスチック容器を採用しました。底面の凸凹が油ハケになることと、適度な隙間が余分な水分を逃してくれるのでしょうか?

ただこのプラ容器、匂いがだだ漏れなので工夫しないと常時飯テロ状態です。当日のオフィスは入った瞬間に唐揚げの匂いが鼻をつく飯テロオフィスと化していました。

当初用意していたタッパーは醤油麹に使われることになりました。こちらも発酵完了が楽しみ。

機材

揚げ工程については鍋を使わずに電気フライヤーを使っています。設定温度まで油の加熱ができたら自動的に加熱が止まるため、温度管理が圧倒的に楽なんです。

TWINBIRD コンパクトフライヤー パールホワイト EP-4694PW

TWINBIRD コンパクトフライヤー パールホワイト EP-4694PW

最初はTWINBIRDのコンパクトフライヤーを使っていたのですが、適温に達したかがわからない、一度に揚げれる量が少ないという壁にぶち当たったため、別のフライヤーを購入することにしました。

象印 あげあげ 電気フライヤー メタリックカカオ EFK-A10-TJ

象印 あげあげ 電気フライヤー メタリックカカオ EFK-A10-TJ

こちらの象印あげあげ電気フライヤーは 1)1000wという高出力 2) 1リットルという大容量 3) 適温に達したことをランプの消灯でお知らせ という特徴があり、そこそこの量を安定して唐揚げをあげることが可能です。特に適温に達したかどうか温度計で確かめなくとも良いのは嬉しいポイントです。

前者コンパクトフライヤーも普段使いににはちょうど良いサイズのため、両方使い倒していきたいですね。

まとめ

当日は2kgに及ぶ唐揚げの調理を行ったのですが、正気の沙汰ではありませんでした。二時間ほどのまま揚げ工程を繰り返し続けました。台所は油まみれになりましたし私も衰弱していきました。またやるとしたらキッチンの広い部屋に引っ越して業務用フライヤーを仕入れるべきでしょう。

当日、作った唐揚げ丼は食べませんでした。人に食べていただけるのを見るだけでお腹いっぱいになりますから!
(本当は緊張と糖質制限で胃袋が縮小してて食べられなかったんですが…)

弊社では勉強会のたびに美味しいご飯をご提供させていただくと思いますので、気になる方はconnpassのグループにジョインください。

teamspirit.connpass.com