フロントエンドPodcastはじめました

こんにちは！ id:amagitakayosi です。
はてなブログチームで JavaScript と Perl を書いています。

最近はてなでは Frontend Lunch Podcast を配信しています。

(2017-02-07 15:38 追記) Podcast配信サイトを移転したので、配信URLを変更しました。

この記事では、Podcast を始めた経緯を通じて、はてなのフロントエンド会の取り組みを紹介したいと思います。

フロントエンド会の発足
フロントエンドMTG
フロントエンドランチ
Frontend Lunch Podcast
配信技術について
おわりに

フロントエンド会の発足

はてなには「フロントエンドエンジニア」という肩書のメンバーはいません。
人によって得手不得手はありますが、サーバー側のアプリケーションもクライアント側のJavaScriptもアプリケーションエンジニアが開発する、というスタイルです。

このスタイルのメリットとしては、タスクを柔軟にアサインできる事、チーム間でのメンバー入れ替えがしやすい事や、機能ごとの属人性を抑える事ができるといった点が挙げられます。
反面、フロントエンドに特化した設計やライブラリなどの知見をまとめるのが難しいという課題があります。
また、フロントエンド界でのニュースや流行の変化にキャッチアップするための場が欲しいという要望もありました。

こうした背景から、はてなでは本年度「フロントエンド会」というグループを設置し、フロントエンドに関する話題を引き受ける活動を始めました。

フロントエンドMTG

まずは、社内のプロジェクトの状況を把握するためのMTGを行ないました。
各チームからフロントエンドに明るいメンバーを一人ずつ選出し、毎回順番にチームの現状について報告してもらいます。
主な議題は以下のとおりです。

プロジェクトのフロントエンドまわりの構成
最近の取り組み
課題 (パフォーマンス、ビルドツール、ファイルサイズ等)

MTGで出た話題については、議事録でいつでも参照できるようにしました。

f:id:amagitakayosi:20161215183130p:plain:w600

これにより、設計の知見やライブラリの選定など、ある程度社内で共通した方針が得られました。
また、実際に他チームのコードを読んで議論することで、具体的な改善のアドバイスをしたり、自分のチームとの実装の差異を知ることもできました。

一方で、このMTGでは報告を行なうメンバーの負担が大きく、開催間隔があいてしまう為、技術共有の頻度が低くなってしまいました。
また、選ばれたメンバー以外にとっては参加の敷居が高く、裾野を広げられないという問題もありました。

そのため、一通り現状共有した時点でMTGは終了とし、別の方法を探ることにしました。

フロントエンドランチ

9月初旬より、毎週水曜日の昼休みに「フロントエンドランチ」を行なっています。
なるべく気軽に参加できるよう、誰でも参加OKとし、昼食を食べつつ雑談できるような雰囲気を目指しました。

ランチタイムになると会議室に集まり、 Google Hangouts を開始します。
はてなのオフィスは東京/京都の2箇所に分散しているので、 Hangouts で画面共有するようにしています。

フロントエンドランチは以下のような流れで行なっています。

JavaScript関連のニュース閲覧
勉強会チェック
近況報告/相談

まずは一週間分のJavaScript関連ニュースをチェックします。
JSer.info や JavaScript Weekly, Frontend Weekly といったメールマガジンが主な情報源です。
時間に余裕があれば Echo JS で新しい話題を探したりもします。

続いて、勉強会の情報をチェックします。
主に dots で JavaScript タグで絞り込んで見ています。
(例: https://eventdots.jp/event/search?keyword=javascript&pref=&from=2016-09-28 )

最後に近況報告タイムです。
参加者同士で、最近書いたコード、お悩み相談、気になったニュース等を共有します。
いくつか話題がある場合、あらかじめ GitHub issue に近況をまとめておいたりもします。

f:id:amagitakayosi:20161216084210p:plain:w640

フロントエンドランチを始めたのは、以下のツイートを見て「ランチタイムなら気軽に続けられるのでは……？」と思ったのがきっかけでした。

今日のフロントエンドランチは @koba04 さん発表の上映会でReact事情のキャッチアップ pic.twitter.com/d2H2y13ygU
— Teppei Sato (@teppeis) June 8, 2016

twitter.com

「とにかく気軽に続ける」をモットーに始めましたが、今のところ毎回3〜7人程の社員が参加してくれています。
あまりフロントエンドを触らないメンバーも参加してくれているので、当初の目論見はある程度実現できたと思っています。

Frontend Lunch Podcast

フロントエンドを続けていく内に、「参加していない人も会話の記録を聴けるようにしたい」と思うようになりました。
せっかくのランチタイムに毎回出席するのもしんどいし、用事が入って出席できない人もいますからね。

議事録をとったり、 Hangouts を録画するという方法も考えましたが、気軽に共有するのが難しそうです。
そんなわけで、フロントエンドランチの様子を録音し、 Podcast 形式で社内配信することにしました。

実は、はてなには社内で Podcast 配信を行なう社内サービスがあります。
配信当初はこれを利用して社員向けにのみ配信していました。

f:id:amagitakayosi:20161216090749p:plain:w640

ただ、続けるうちに、せっかくなので社外に配信したいという気持ちが強くなってきました。
はてなのフロントエンド方面でのアウトプットを増やすチャンスです。

社内の広報やチーフエンジニアに確認をとり、2016/11/07 から社外への公開をはじめました。
現在では、毎週できあがった音源をチーフエンジニアにレビューしてもらって公開する、というフローで運用しています。

配信技術について

この章では、 Frontend Lunch Podcast の配信に利用しているサービスや機材を紹介します。

録音には Chromebox for meetings のマイクを利用しています。
Chromebox for meetings は Google Hangouts でリモート会議を行なうためのシステムです。
このマイクはノイズを良い感じに軽減してくれます。
もともと画面共有のために Hangouts を利用していたので、ついでに録音もできて便利。

Soundflower を利用すると手元の PC の音声出力を音声入力にループバックできるので、これを手元の録音ソフトで録音します。

マイク -> (Google Hangouts) -> MacBookPro の音声出力 -> (soundflower) -> MacBookPro の音声入力 -> 録音ソフト

本家 Soundflower は最近の mac で動かないので、 fork 版を使うと良いです。
https://github.com/mattingalls/Soundflower

編集には Logic Pro X を使っています。
マイクとの距離によって声の大きさがバラついてしまったり、食器やエアコンの音が入ってしまうので、いくつかエフェクトをかけています。
具体的には、 EQ で 300Hz 以下をカットしたり 1kHz 辺りを上げて声を聞き取りやすくしています。
また、 Adaptive Limiter を重ねることで音量をそろえています。

普通に会話していると、どうしても間があいてしまったり噛んだりしてしまうので、そういった部分はカットするようにしています。

f:id:amagitakayosi:20161216094322p:plain:w640