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

私のLTより私の作った唐揚げ丼に集中する皆さま

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

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

teamspirit.connpass.com

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

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

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

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

LT

当日は私を含めて４人が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があるべきであるし、我々フロントエンドエンジニアとしてはチームを導いていかないといけないですね。

ディスカッション

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

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

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

小ネタ

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

表情に定評のある同僚氏

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

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

これから

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

teamspirit.connpass.com

まかないてっく#１杯目 究極の唐揚げ（丼）レシピ

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

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

teamspirit.connpass.com

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

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

唐揚げレシピ

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

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

肉

• 鶏胸肉200g

下味用タレ

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

衣

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

揚げ油

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

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

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

大人の肉ドリル

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

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

試作

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

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

• 下味のレシピ
  • 肉ドリル
  • くらしのきほん
  • クックパッドより カリッとジュワッと 家族絶賛鶏の唐揚げ。
• 衣のバリエーション
• 移動用容器
• 調理器具

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

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

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

唐揚げ作るからハイボール飲みだしたｲｴｰｲ

— 腹筋ローラーの力を信じろ (@8845musign) 2017年7月22日

（休日試作）

業務の一環として唐揚げ食べるMTGしてきた

— 腹筋ローラーの力を信じろ (@8845musign) 2017年7月24日

（平日試食）

味付け

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

肉ドリル

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

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

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

くらしのきほん

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

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

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

衣

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

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

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

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

油

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

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

大きさ

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

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

移動用容器

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

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

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

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

機材

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

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

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

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

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

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

まとめ

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

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

体が糖質を求める

— 腹筋ローラーの力を信じろ (@8845musign) 2017年7月25日

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

teamspirit.connpass.com

まかない<s>てっく</s> "スマホカツサンド"

こんちには、買い出し担当の倉谷(id:a-kura)です。

みなさん、料理してますか？ 自宅での話ではありません。会社での話です。

料理はエンジニアリングであり、サイエンスです。

つまり、料理はエンジニアが取り扱うべき対象のひとつです。我々エンジニアがまかない料理を作ることは自然な流れになります。

では、今回のまかない “スマホカツ” についての実験レポートをどうぞ。

目的

たまたま調達できた美味しいパンと Anova と電気フライヤーで調理したスマホカツが合うかを検証することを目的とします。

“スマホカツ” とは、断面がスマートフォンくらいあるトンカツのことです。

この実験を通して、Anova と電気フライヤーで美味しいスマホカツが作成できるか、肩ロースとヒレはどちらがパンに合うか、などを確認します。

Salesforce Developers Meetup #15 に参加しました

こんにちは、チームスピリットの倉谷(id:a-kura)です。
ちょうどSoundCloud経営危機のニュースが流れてきて、Podcastのホスティング先を心配し始めています。

さて、7月12日(水)に開催されたTokyo Salesforce Developer Group主催のSalesforce Developers Meetup #15の参加レポートになります。 進行として、リリースノート輪読会、技術系セッション、LT4本でした。弊社チームスピリットからも2名が発表しました。

www.meetup.com

仕事が捗るスタンディングデスクのススメ

こんにちは id:ts-yokouchi です。

皆さんは仕事環境にはこだわりを持っていますか？

私は椅子にかなりのこだわりを持っています。
自宅ではリモートワークに備えてStealCaseのLeapチェアを購入し（新古品で10万くらいしました）、 会社でもオカムラのチェアをバリバリ前傾姿勢仕様にカスタマイズして使用しています。
そもそもPC作業に向く前傾姿勢に対応した椅子やセッティング（長いので以下略

ただ、こだわりを発揮した後に気づいたのですが、私は座り仕事に向いていないという弱点が発覚しました。

仕事中うとうとする問題

やる気を燃やしながら仕事を始めたとしても、お昼後や室内温度が高めになっている時など、どうしても眠気が襲ってくるポイントは発生してしまいます。
（※真面目に仕事はしています）

特に私は比較的涼しい地方の出身ということもあり、室温による「あったか〜い、ねむ〜い」現象に弱い体質です。
（※真面目に仕事はしています）

良い椅子は座りごこちも良いため、上記誘惑と一緒になって私を苦しめるのでした。
（※真面目に仕事はしています）

最強のソリューション

上記問題を解決する最強のソリューションを最近導入しました。

それは

「スタンディングデスク」です。

現場

こちらが最強の「スタンディングデスク」です。

独立したデスクを想像した方ごめんなさい、手作りスタンディングデスクです。

弊社SalesforceMVP 、倉谷に送付されてきたSalesforceグッズを梱包していたダンボールを使用しています。
SalesforceMVPに導かれしダンボール、「MVPダンボール」はスタンディング作業において面積・コスパ共にパーフェクトです。

このダンボールで仕事をしていればやがてMVPになれるような気がします。

また接続している外部ディスプレイはさすがにそのままの高さで使うことができないため、 程よい厚み面積の技術書で高さを若干かさ上げしています。 優れた書籍に支えられたディスプレイで仕事をしていると、根拠のない自信が湧いてきます。

PC自体は鼻セレブクラスの高級ティッシュボックス（強度が良さそう）を３つトライアングル型に配置した台座を作成して使用しています。

ただし、このような高さ調整も完璧ではなく、足を大股に開いて自分の身長を調整しています。

効能

• 仕事中全く眠くなくなった
• 帰りの電車で寝なくなった
• しばらく注目されつづけた

眠くなくなった、というのが一番大きなポイントです。
仕事場で立ちながら眠ることができる器用な人はなかなかいないと思います。
（いたら面白いので教えてください。）

２つ目に関しては全くの予想外だったのですが、前は帰りの電車内で疲労からうとうとしていました。
スタンディングデスクを始めてから適度な筋肉の緊張が良い影響を与えたのか寝なくなりました。

ただし、スタンディングデスクをしたから痩せるといった効果は今のところでていません。
体への負荷はそこまでではないのかもしれません。

眠くなくなったのは良いことですが、疲れてる時はやる気がでなくて作業ができないという現実をマジマジと実感することになりました。
立ちによって肉体的消耗には対処できたのですが、精神的消耗もあるのです。
これに関してもエナジードリンクを注入することによってある程度対処できることがわかってきました。

最後に関して、執務室の入り口近くに席を置いているためか、部屋に入ってきた人にやたら話しかけられまくる時期がありました。
僕個人としては人見知りだから辛かった単純に真面目に作業改善を行なっているわけで「やめてくれ〜」という気持ちもありましたが、人は慣れるもので今では誰も気にしていないみたいです。

 体の痛み

スタンディングデスクを導入後、効果が上がって喜んでいましたが、一点大きな問題が浮上してきました。

足裏が死ぬほど痛いという悩みです。

1日立ちっぱなしだと、夕方には足裏の激痛でまともに立っていられないほどです。 これに関してはすこしお高い中敷を靴に敷くことである程度改善しました。 クッション性の高い運動靴などに履き替えるのもアリかなと思います。

スタンディングデスクは無理しない、少しづつ導入していくことが大切です。

スタンディングデスクに慣れた今では全くこの痛みに悩まされることはなくなりました。

まとめ

眠気に気を取られて作業になかなか集中できないという方はスタンディングデスクの導入で大幅な改善が見込めると思います。
高級なデスクを購入しなくとも、ぜひお手持ちのダンボールで試してみてください。

その際はくれぐれも無理しないようにしてくださいね。

※ 7/12追記

卓上ダンボールやキャビネット上など過酷な状況で作業を強いられてきたスタンディングデスク難民ですが、
それっぽいスタンディングデスクが追加されました。

写真は id:a-kura の様子です。

TeamSpirit の承認プロセス（1段）を簡単にデプロイする

こんにちは、チームスピリットの倉谷(id:a-kura)です。
今回は、誰得なのか分からないような TeamSpirit の Tips を紹介させてもらいます。

「Salesforceの承認プロセスの設定って面倒…」と思ったことはありませんか？

画面から設定できるので便利なのですが、TeamSpiritをインストールするたびに何度も同じような設定を繰り返すのは時間の無駄です。
「承認プロセスもパッケージに含めてくれればいいのに！」なんて声も聞こえてきそうですが、残念ながら承認プロセスはパッケージに含めることができません。

しかし、そんな皆様に朗報です！

TeamSpirit×Salesforce DG MeetUp 参加レポート

こんにちは。チームスピリットの中平(id:y_nakahira)です。

ホワイトデーの3/14(火)、Tokyo Salesforce Developer Groupとの共催でこちらのイベントを開催しました。 teamspirit.connpass.com

今回はその参加レポートを簡単にご紹介したいと思います。

プロダクト開発を加速するチームとそれぞれの役割とは

会の前半は、セールスフォース・ドットコムCTO 及川さんによる「プロダクト開発を加速するチームとそれぞれの役割とは」をテーマにしたご講演でした。

会社の成長に伴いメンバーが増え、開発手法をアジャイルに切り替えた話や、その運用についてはSalesforce上のアプリケーションを利用して使っている話など、セールスフォース・ドットコム社の具体的な取り組みを例にお話しいただきました。

弊社の開発プロセスもアジャイルで進めているのですが、特に違うと感じた点は、よくあるアジャイルという型に運用をはめていくのではなく、アジャイルの型を自分たちに合うようにカスタマイズして運用している点でした。

実際にどこをカスタマイズしているのかという具体的な話はお伺いできなかったのですが、型にとらわれる必要はなく自分たちの運用に合わせてカスタマイズしていけばいいんだ、と思えたことは収穫でした。

そして、セールスフォース・ドットコム社が実際に利用しているアプリケーションはAppExchangeに公開されており、なんと無料で利用できるそうです。(太っ腹・・！)

Agile Accelerator - Salesforce Labs - AppExchange

これからの時代に市場価値が高まるエンジニアのキャリアとは

会の後半は、セールスフォース・ドットコムCTO 及川さん、セールスフォース・ドットコム シニアディベロッパーエヴァンジェリスト 岡本さん、TAOドライブ エンジニア米井さん(Salesforce MVP)、そして弊社の倉谷(Salesforce MVP)の豪華な4名によるトークセッション。

エンジニアとしての今後のキャリア形成について各々持論を展開いただき、また、質問者からも具体的な質問が出るなど大変盛り上がりを見せました。

セッションを通して印象に残ったのは、

• 今までの経験 + 新しい境地 = ユニークなキャリアになる
• 自分が情熱を持って取り組めるもの・作り出していきたいものを意識して探す

また、全員に共通していたのが

• アウトプットを増やすためにインプットをどんどん増やしていきたい

という姿勢でした。

これからの時代を生き抜くためには日々インプットを増やし、アウトプットを出していくことが大切で、それがいつか自分のユニークなキャリアを形作っていくのだなと感じた、とても学びの多いセッションでした。

懇親会

懇親会はピザで乾杯でした。

登壇を終えた倉谷もアストロ君とこの笑顔。

ご登壇いただきました皆様、誠にありがとうございました！！