2020年7月17日（金）、ライトニングトーク（以下LT）大会「Ateam DESI-ENGINEER LT Fes 2020 夏」を開催しました。発表者は64名でエイチーム史上最大のLT大会となり、私は主にイベント用サイト制作をしました。
このイベントの詳しいレポートはエイチームコーポレートサイトでのコラムに掲載されています。よろしければこちらもあわせてどうぞ。
イベントの興り
エイチームグループのエンジニアやデザイナーの横断的なコミュケーションを活性化し、ノウハウや知見の共有を行うことで、事業やサービスの成長につなげることを目的に開催。
当時「COVID-19の影響もあって、普段と比べると雑談やプラスαな動きが減っているよね」という課題を感じた一部メンバーから発案があり、有志を募ってイベント運営が始まりました。
私の担当
- イベント特設サイトの制作
- 各種スライドの制作
- デザインレビュー全般
以上が私の主な担当でした。 その中でも特に特設サイトに焦点を当てて紹介します。
この特設サイト、実はイベントの必須要件として存在していませんでした。
最初の最初は「タイムテーブルの公開とかを特設サイトっぽくしたら『イベント感』が出るのでは？」という言わば思いつき。
少し裏話をすると、このイベントは当初はエンジニアだけで実施予定でした。
しかし「イベントの興り」で記載したように、目の前にあった課題はエンジニアだけに限ったものではありません。
そのため「デザイナーも一緒にやった方がより効果的ははず！」と、少し遅れてデザイナーからも参加を募るようになりました。
そして、私が運営に参加することになって「せっかくデザイナーが運営にいるなら」とスコープを広げていきました。 イベントロゴ、表彰の進め方、Zoom背景……と話を膨らませる中で特設サイトも挙がり制作に至ったわけです。
使用技術とポイント
「使用技術」と呼べそうなものはこのような具合で、GatsbyJS・Google Sheets API・Emotionを挙げます。 Gatsbyを使っているのでReactとGraphQLは必然的に使うのですが、記載はしています。
ポイント1 blankのstarterから作った
Gatsbyで新規プロジェクトを作るときは、以下のコマンドのようなイメージで何かしらのstarterを下敷きにして作ります。
gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO]
ですが、今回はチャレンジも含めてgatsby-starter-hello-worldという全くblankのstarterから作りました。 公式の説明も以下のように説明されているstarterです。
- A no-frills Gatsby install
- No plugins, no boilerplate
- Great for advanced users
そもそもGatsbyは単体で成立するものではなく、色々なプラグインを追加して動かすようなものです。
適切なstarterを選ぶと、プロジェクトを作成した時点で画像を軽く処理してくれたり最低限のSEOを上手にやってくれたりと、多くの便利なプラグインがが入っています。 ですが今回選んだstarterには何のプラグインも入っていません。
最終的に、使ってるプラグインは以下の6つです。
- gatsby-source-filesystem
- gatsby-plugin-sharp
- gatsby-transformer-sharp
- gatsby-source-google-spreadsheets
- gatsby-plugin-emotion
- gatsby-plugin-react-helmet
ポイント2 Google Sheetsをソースにした
上で挙げた中でも特に大事なのはgatsby-source-google-spreadsheetsです。
GatsbyはGraphQLでデータを取得するのですが、このプラグインを入れることで少しの設定をするだけで、Google SheetsのデータにGraphQLからアクセスできます。
具体的には、まずGoogle Developers ConsoleからGoogle Sheets APIをウィザードに沿って有効化。
その後生成されたjsonの中身をenvに登録。更にgatsby-configに必要な内容を記載します。
するとプラグインが働きGraphQLでGoogle Sheetsのデータをとるのクエリが書けるようになります。
実際にタイムテーブルを作るにあたってこのようなコードを書いてます。
この後はスタイリングを施し、Google Sheetsのデータをベースにしたタイムテーブルが出来上がります。 （個人名が含まれるためモザイクをかけています）
ちなみに似たようなプラグインは何種類かあるんですが、これはREADMEが他より親切だったので選びました。
ポイント3 「業務だとチャレンジできない」ことを行う
- UIツールを使わず完全にインブラウザで作る
- CSS Gridやmin(), max()などIEでは使えないプロパティを盛り込む
- 404ページは愛着をもって作る
- 盛り上げのため、飾り付けのためだけのマークアップやスタイリングに精を出す
上に挙げたのは実際に行っていた内容です。
事業会社でプロダクト開発をしている以上、なかなかチャレンジできない領域は間違いなく存在します。 かつ、業務上必要な開発だけを繰り返していると制作スキルは逓減していくもの。
こういった業務外のイベントでは極力「業務だとチャレンジできない」領域に手を伸ばしています。
まとめ
最初の方に記載した通り、このサイトは「LT大会」を開催するにあたって必須なものではありません。
しかし公開したタイミングで参加者のみなさんが非常に盛り上がってくださり、制作して良かった……と心から思いました。
普段は事業の成長のための制作をしていますが、たまにはこういう「自分が楽しむ・自分のチャレンジ」な制作もしておくと緩急がついて良いのではないでしょうか。