こんにちは、サイボウズフロントエンドエキスパートチームの@__sosukesuzukiです。

サイボウズにはCybozu Inside Outという技術ブログがあります。 それとは別に、この度フロントエンドエキスパートチームとしてウェブサイトを開設することにしました。

この記事では、このウェブサイトを開設することになった経緯と目的、使用した技術について説明します。

経緯

フロントエンドエキスパートチームでは、チームでのコミュニケーションの促進を主な目的としてハッカソンを開催することがあります。 (チームでのハッカソンについてはCybozu Inside Out に投稿されている記事をご覧ください)

そのようなハッカソンで、フリーテーマの回がありました。 そこで、SakitoさんとBaHoさんとsosukesuzuki(私)のチームでは、フロントエンドエキスパートチームのウェブサイトを作ってみることにしました。

ハッカソンの期間内に完成することはありませんでしたが、チームとしてウェブサイトを持っていた方が良いということで合意が得られたので、ハッカソン終了後も開発を継続することにしました。

目的

フロントエンドエキスパートチームの活動を多くの人に知ってもらうためです。

フロントエンドエキスパートチームでは、日頃から様々なフロントエンド技術の啓蒙活動を行っています。 それらの多くはクローズドな場所で行われています。しかし基本的にその内容はサイボウズ特有のものではなく、一般的に有用な情報です。

そこで、フロントエンドエキスパートチームとしてウェブサイトを開設し、公開できる有用な情報は公開することにしました。

このウェブサイトを通して、フロントエンドエキスパートチームに興味を持ってくれたら嬉しいです。

技術

次の要件を満たす技術として、Next.js を採用しました。

• 環境構築が簡単である
  • もともとハッカソンで開発していたので、環境構築に多くの時間を割けないという事情がありました。
• SSG の機能を備えている
  • すべてのコンテンツは静的なものと決まっていたので、SSG ができると嬉しい
• TypeScript との相性が良い

記事は Markdown として管理して Next.js の getStaticProps のタイミングで remark を使って HTML に変換しています。

また、ブログの機能を持つので、feed の生成と記事ごとの OGP 画像の生成をのためのスクリプトをそれぞれ用意しました。feed 生成スクリプトは、記事データの Markdown からメタデータを取得し、XML ファイルを書き出します。 OGP 画像生成スクリプトは、記事データの Markdown からタイトルを取得し、Puppeteer で画像を生成します。

ホスティングには GitHub Pages を使っています。GitHub で管理している HTML をホストする先としてはやはり楽です。

実装はすべて https://github.com/cybozu/frontend-expert で公開しています。

おわりに

これから、不定期ではありますが、当サイトにてフロントエンドに関連する情報を発信していく予定です。ぜひ読んでみてくださいね。