技術イベントの楽しみ方（Developers Summit 2019 Day1）

みなさんこんにちは、マーケティング担当の金尾です。
(一日遅れになりましたが)Happy Valentine’s Day!　ということで、弊社のオフィスにも心温まる差し入れが届きました！（ありがたい限りです(T^T))
仕事で疲れた頭に美味しいチョコレートはめちゃくちゃ染み入りますよね！とはいえ、食べ過ぎにはくれぐれもご注意下さい^^;
さて、毎年この時期に行われている技術者向けイベントと言えば “Developers Summit（通称：デブサミ）“ですね。今年も昨日（2/14）から２日間の日程で行われています。
去年はブース協賛で出展しましたが今年はイチ参加者として行って来ましたので、Day1の模様をお届けしたいと思います。
今年のデブサミのテーマは「SHARE YOUR FUN」。エンジニアのさまざまな楽しみを持ち寄って共有しましょうということかと思います。
私は午後からの参加となったのですが、いつにも増して多くの方が参加しているように感じました。

受付近辺のようす

ちなみにデブサミに参加されたことが無い方のために会場の雰囲気も少しご紹介します！
ブースはセッション会場の外の通路の部分とブース用の部屋にずらっと並んでいるのですが、出展者の方々との話だけでなくて、参加者同士の会話もいたるところでなされています。久しぶりにあった方やちょっと話がしたかったけど中々合う機会がなかった人たちなどと交流することができることもこのイベントの魅力の一つだなと思います(私も旧友や思いがけない人とも会えたりして良い機会になりました)。

奥までずらっとブースが並んでいます

ブース用の部屋には書籍の販売コーナーや休憩エリアもあります

あと、各社が提供しているノベルティも楽しみの一つですね。今回は短い時間の滞在だったので基本的にはセッションにフォーカスしブースにはほとんど顔を出さなかったのですが、BIZREACHさんがブースとは別に会場内で提供していた言語名が入ったお水はありがたく頂戴しました。弊社でも昨年のLocation Business Japanというイベントでドリンク提供したのですが、結構参加者に喜んでもらえる仕掛けだと思います。

「なんでRubyがないの〜」という声を耳にしつつ、私はそっとPythonをいただきました^^;（もしかすると別の場所にはあったかもしれません）

このように技術そのものとは関係のないところでの楽しみもありますが、やはりこのイベントの最大の魅力は色々な分野のエンジニアがそれぞれの視点で最近追いかけているテクノロジーとその実装にまつわる実情を知ることができることにあるかと思います。最近は技術そのものの話だけでなく、開発手法や組織論の話なども話されていてとても勉強になります。
マーケターの立場としても市場感や現場感を知ることができますし、その場では理解しきれない内容だったとしてもキーワードをメモしておけばあとから勉強する糸口を掴むことができるので、技術面でも筋の通ったメッセージを作れるようになるためにもとても有意義な機会になります。
今回私は４つのセッションを聞くことができましたので、簡単に感じたことを紹介してみたいと思います。

Developers Summit 2019 Day1で聞いたセッションの所感

1.日経電子版のマイクロフロントエンドとPWAによる改善事例[日本経済新聞社]
PWAだけでなくServerlessなどかなり早い段階から新しいテクノロジーを積極的に取り入れ進化し続けているイメージのある日経電子版が特にPWA周りにどう取り組んでいるのかを聞いてみたくて聴講しました。
が、何が一番驚いたかというと発表者は2018年の新卒の方とのこと。しかもデブサミのセッション会場の中でも一番大きい３００名以上が入る部屋での登壇（満席でした）。ただただその気概というか度胸というか、そこで立って話している事自体に感動して心の中で「頑張れー」と応援しながら聞いていました(もしかするとこういう人が普通になってきてるのかもしれませんね。いやー、素晴らしい）。


セッションの中身もしっかり作られていて、まぁ案の定詳細は理解できないのですが、PWA単体ではなくてマイクロフロントエンドも含めて全体的に取り組むことでパフォーマンスをあげているということはわかりました(もちろんフロントだけでなくServerlessやCDNも含めて全体なのだとは思いますが、今日の話はフロントよりの話ということで)。
そもそもマイクロフロントエンドという概念を私は知らなかったのですが、簡単に言うとマイクロサービスの考え方をフロント側に持ち込んだもので、画面単位ではなくてコンテンツやパーツ単位で区分してそれぞれを個別にサービスとして走らせて処理できるようにするもののようです。
またPWAに関しても私はどちらかというとPWAの利点は「オフラインでも動く」ということと「ネイティブアプリのように使えつつWebの利点も維持できる」ということに視点が行っていたのですが、どうやらGoogleのデベロッパサイトには、「Reliable(信頼性)」「Fast(速さ)」「Engaging(アプリとしての魅力)」の３つがポイントと書かれているようです。
日経電子版がPWAという選択をした理由がいまいちピンときていなかったのですが、私の中ではこの「速さ」の視点が特に抜けていたようで、表示のパフォーマンスを上げるためにという理由もあったのだなと気づきました。
あとはAppShellだとか、Dynamic CCSS(Critical CSS)とか知らないキーワードも出てきたので、これはこれでまた調べて勉強してみようと思っています。
ちなみに日経電子版へのアクセスは月間３億もあり、かつ毎日900本もの記事が追加されているとのことで、想像もつかない規模ですね^^;
2. APIを活用したフォントの使い方 ～MR（Mixed Reality）の実例紹介～[モリサワ]
カタログを作ったりWebサイトを作ったりする際に使用するフォントを選ぶのは大変だけど楽しいですよね。そういう仕事柄フォントには興味津々だったのと、前職でMR(Mixed Reality)に関わっていた事もあったので、どんなことをされているのかなという興味で拝聴しました。
基本的にはTypeSquareというAPIでフォントを呼び出して利用できるモリサワさんのサービスの内容だったのですが、そもそもフォントを新しく作る際のTipsも紹介されて興味深く聞けました。まず、新しく(日本語の)フォントを作成する際にはよく使用される500文字をまず書き上げる必要があるようです。作業量としては最大で１日20文字程度ということだったので、平日だけの作業で最短で５週間掛かって初めてスタートラインに立てる感じですね。基本形のデザインを考えるだけでも時間がかかると思うので、実際はもっともっと時間を掛けているのだと思います。
ちなみに「永」という文字がフォントを作成する上で必要な要素(ハネとかハライとか)が全て含まれているそうで、この文字を始めに書いて見るようでした(へーっ)。
少し話題がずれましたが、基本的にこのフォントをAPIを使って呼び出して使用する形はWebで使用されているのですが、それ以外の使用用途を模索する中でMRの領域での研究をされている内容の話が後半にされました。実例を紹介されたのは神戸デジタル・ラボという会社の方でMRデバイスとしてはHoloLensを使用されていました。まだ研究段階ですがいくつものイベントでデモ展示をされているようで、例えば自転車のショップにおいて、お客様がHoloLensをかけて実際の自転車を見るとその各パーツの周りに説明文が表示されるというもの。MRの世界では現実世界に仮想のものを映り込ませるので、現実世界の背景（にある物体の色）や光の強さによっても視認性に差が出るのですが、フォントそのものをMRの世界で視認性を高める方法を色々と研究されているようです。
ちなみにこの自転車のデモ動画がYouTubeに上がっていたので貼り付けておきました。この世界は文章で表現するのと実際に見てもらうのとはかなり乖離が生まれやすいので、もしご興味があるようでしたら見てみることをおすすめします。

個人的にはMRの世界では、サウンドやボイスを上手く使うことがUXを高める重要なポイントだと思っているので、今後それらの要素をうまく活用した例が増えていけば良いと思っています。
3. ヤフー株式会社におけるフロントエンドの取り組み【ヤフー】
またフロントエンドの話ですが、弊社でもWebアプリやiOS/Android向けのアプリも業務として日々行っていることと、ヤフーさんの取り組みは面白そうだなと思っていたことから拝聴しました。


もう少し技術的な点がメインとなる話なのかなと思っていましたが、実は１００以上ものサービスを持つ会社がどのようにして個別最適と全体最適のバランスを取れるように努力しているかというお話でした。良い意味で期待を裏切ってくれる内容でしたが、ぜひ一度スライドをじっくり読まれることをおすすめします。
前半は各カンパニーでサービスを担当されている方が登壇され、各サービス単位でクオリティの平準化（というか平準地の底上げ）と効率化を実現しているかと言う話でした。メディアカンパニーでは常時12名程度のメンバーで開発をしているようなのですが、開発時の「規約」や「コンポーネントガイド」などを導入し始めたそうです。「規約」についてはGitBookを利用して運用されていて、何か変更を加えたいときにはプルリクをあげる形でオープンに進めているとのことでした。この規約を導入することで「個人の主観や属人的な要素を省くこと」を行えるようにし、結果的に質の向上やコードレビューの時間などの短縮などを実現しているようでした。特に「個人の主観や属人的な要素を省くこと」を意識することは、ヤフーさんの規模でなくてもすべきことだなと思います。またそれを実現するために、きちっとフレームワークを定めて運用されている点が組織としても素晴らしいなと感じました。
また次に登壇されたコマースカンパニーの方は、Yahoo！ショッピングの検索ページの刷新というタイミングを利用して課題に対しての取り組みを促進するべく取り組んでいるというお話。ABテストの実施にかかる「企画」「制作」「開発」の工程の工数の削減と、上手く行ったABテストの結果をサービスに反映させる時間の短縮を実現すべく、UIパーツ集を作成し無駄な部品の再開発などが起こらないようにデザインそのものだけでなくフレームワークの共通化も含め進めているようです。ただまだまだ取り組んでいる最中で、実際に効果が出てくるか、運用自体も円滑に行えるのかはまだ分からない(ので乞うご期待！)と仰っていたのですが、ここまで同じ方向を向きながらチームで取り組んだことは万が一効果が出なかったとしても素晴らしい経験になるのではないのかなと。サービスの開発だけでなく、組織としても現状を更に良くするためのプロジェクト(特に「良い状況」の定義付けからも含め)を行うことはプロジェクトメンバーを高めるという点においても良い方法なのではないかと感じています。
最後に昨年新設されたWebフロント技術室という組織の方が登壇されました。これまで発表された各カンパニーでサービスを開発している方々はその範囲内で個別最適化を進める話でしたが、このWebフロント技術室はその個別最適化が進みすぎないように横断的な視点でヤフー全体のフロントエンドの課題を解決することが目的として設立されたそうです。
その取組みを進める上で興味深かったのは「統一したパフォーマンス計測の検討」を進められているそうです。具体的な内容はセッション内では触れられていませんでしたが、全く別のエンドアクションを促すサービスがある中で統一した指標を作るということを考えるだけで大変かつ大切な取り組みになっているのだろうなと感じました。
統一指標を定めるかどうかは別としても、個別最適だけを考えるのではなくて全体としてのバランスを意識することは我々も日々考える必要がありますね（かつ、その事自体も個別対応に任せず組織としてフレームを組んで推進するというのも大きなポイントなのだと思います）。

立ち見が出るほどの満席でした

4. ★The DEMO Show★ Visual Studio & .NET Core の進化とクラウド ネイティブ開発【日本マイクロソフト】
これはたまたま私の前職の同僚が登壇するということで聞きに行きました。マイクロソフトでエバンジェリストが行うセッションを聞くときには、その内容だけでなくプレゼンの仕方やデモをどう行っているかという点もぜひ意識して見てみると、ご自身が登壇するときの参考になる点を発見できると思います。


例えばプレゼン資料の作り方に関して、基本としては「登壇する部屋のスクリーンの大きさと奥行きを意識してできるだけ大きめのフォントサイズで書く(その会場の一番うしろの人でも視認できるサイズにする)」というのがありますが、加えてズームアップの機能を活用しながら確実に届けるという方法を実践している人はまだまだ多くないと思います(私が見た今回のデブサミのセッションでは彼だけが実践していました)。これはコーディングのデモでも同じで、エディタ内の文字はどうしても小さくなってしまうのですが、そこをズームアップしてちゃんと見せることできちんと理解してもらえるようにすることが重要だったりします。得てして時間がなかったり、デモの成果物を見せることに意識が行ってしまい、ちゃちゃっとやってしまいたくなるのですが、そこをぐっと我慢してしっかり伝えるべきことを伝えるためにはどうすれば良いかを考えているのだと思います。
デモの組み方もそうです。このセッションではMac上にWindowsのインスタンスも立て、Windows上ではVisual Studio 2019、Mac上ではVisual Studio Codeを立ち上げておいて、Visual Studio Live Shareという機能を使ってペアプロのような共同作業ができることを見せていました。加えて、実行結果を表示させるのにブラウザも使っていましたが、このように画面をいろいろ切り替えていると今どこにいるか分からなくなってしまうことがあるのですが、何度も練習をしているのだと思いますが、スムースに進められていました。聞いている側からすると当たり前な話ではあるのですが、「自分がデモする立場だったら」「プレゼンする立場だったら」という意識で見てみるとまた違う発見ができると思います。
少しだけセッションの中身にも触れておくと、Visual StudioのIntelliCodeという機能は便利そうでした。これまでもIntelliSenceという、コードの入力途中に候補が表示されプルダウンで選択できる機能がありましたが、これにAIを組み込んで使用する可能性が高いものを上位に表示してくれるという優れものでした。IntelliSenceではアルファベット順に候補が表示されていて、場合によっては下の方までスクロールして対象を探さなくてはならなかったものを解消してくれるというわけです。AIというキーワードで色んなシーンで活用例が出てきていますが、コードを書くというシーンでも活用されているのは興味深いですね。機能としてはまだプレビューというステージのようですが、すでにC#に加え、Java, Python, TypeScript/JavaScript, C++, XAMLに対応しているようですので、ご使用中の言語があるようでしたら試してみてはいかがでしょうか？
ということで、今年も興味深いセッションがこれ以外も多く行われていました。
デブサミ2019の各セッションの資料やTogetterなどのまとめはこちらのページで紹介されていくようですので要チェックですね。
時間が許せば今日のDay2にも少し顔を出してきたいと思います！

関連記事

  1. ロケーションビジネスジャパン2019に出展しました！

  2. コミュニティ勉強会「PWAに備える3ヶ月」vol.2に参加してきました…

  3. ロボット好きの大人におすすめしたいイベント

  4. ワインのボトルに加速度センサー付きBeacon(ビーコン)を取り付けて…

  5. GrapeCity ECHO week 2020 に登壇します

  6. デブサミ2018に出展してきました！会議室ソリューション"F…