見出し画像

Cybozu Techに新着ブログ記事の一覧を載せたい（完結編）

jnkykn

こんにちは。サイボウズ株式会社 開発本部 People Experienceチーム コネクト支援チームの貴島(@jnkykn)です。サイボウズのエンジニアのポータルサイトCybozu Techを、開発者の酒井(@sakay_y)さんと一緒に運営管理しています。最近、このCybozu Techを改善したい案件が浮上したので、調査したり実装したりした件について書きます。今回は完結編です。


フロントエンドカンファレンス北海道2024おつかれさまでした！

サイボウズは、フロントエンドカンファレンス北海道2024にゴールドスポンサーとして協賛しました。開催当日は、サイボウズのフロントエンドエンジニアの皆さんと、現地でブース対応をしたり、登壇の応援をしたりしていました。

ハシコウをよろしくお願いします

ブースを賑わしていた、この鳥は、ハシコウといいます。ハシコウは、サイボウズのフロントエンドエキスパートチームの皆さんが発案された、サイボウズのフロントエンドエンジニアのマスコットです。今回のブース企画Frontend Expert QUIZの正解者プレゼント「アクリルキーホルダー」と「アイマスク」、ブース展示用の「大型アクリルスタンド」と「テーブルクロス」を制作、フロントエンドカンファレンス北海道2024で、初披露されました。皆さま、ハシコウをよろしくお願いします。ハシコウのグッズ、増えて欲しいです。（商品化されたら買いたい）

Cybozu Techに新着ブログ一覧ページを追加する

さて、ここから本題です。前回は、サイボウズの技術ブログCybozu Inside Outの他、ZennのPublicationやnoteマガジンを含む、エンジニアの新着ブログがまとめてチェックできるように、サイボウズのTech系ブログRSSを公開したところまでの話でした。今回は、そのRSSをもとに、Cybozu Techに新着記事一覧ページを追加して公開するまでを書きます。

GatsbyでRSSフィードを受け取る

Cybozu TechはGatsubyで構築しています。GatsbyでRSSフィードを受け取るには、gatsby-source-rss-feedを使用します。すでに、トップページ用に、Cybozu Inside Out、Cybozu Vietnam Tech Sharing、Kintone Engineering BlogのRSSを取得するのに使っていたので、gatsby-config.jsに、サイボウズのTech系ブログRSSのfeed取得設定を追加しました。

module.exports = {
　　　　　　　　　　：
  plugins: 
　　　　　　　　　　：
    // サイボウズのTech系ブログのfeed取得
    {
      resolve: `gatsby-source-rss-feeds`,
      options: {
        url: `https://cybozu.github.io/tech-blog-rss-feed/feeds/rss.xml`,
        name: `CybozuTechBlog`
      }
    },

新着記事一覧ページを追加する

新着記事一覧ページsrc/pages/blogs.tsxを追加、ページを構成するためのコンポーネントとして以下を追加しました。

  • 新着記事のリスト

  • 特別枠

  • 各ブログ一覧

新着ブログ一覧ページの構成。左ペインに新着記事のリスト、右ペイン上段に特別枠、右ペイン下段に各ブログ一覧が配置されている

そして、ヘッダーメニューの「Blogs」から、このページを表示できるようにしました。コネクト支援チーム内でレビューしていただいたところ、丸山さんから、「『Blogs』メニューと、この『新着記事一覧ページ』の関連がわかりにくい」というご指摘がありました。メニューのラベルを変えずにわかりやすくできないか検討し、メニューに説明文のtitle属性を追加しました。これで、どのメニューがどのページを表示するか、関連がわかりやすくなったと思います。

Blogsのtitle属性に設定した「サイボウズのエンジニアが執筆しているTech系ブログの新着記事」が表示されている

これで、「サイボウズのエンジニアが公開しているブログの記事をチェックしたい」と思ったら、Cybozu TechのBlogsをチェックしてね！と言える状態になりました。🙌

なお、当初このページは、Recent Tech Blogsという名前で公開していたのですが、SlidesやVideosと揃えたため、現在はBlogsです。URLも変わったので、下記の投稿のリンクは現在アクセスできなくなっています。事前の確認が甘くてすみません💦

さいごに

今回、複数のブログのRSSをまとめて、それをもとに新着記事をチェックしてもらいやすくしたいという目的のために、調査したり、実験したりしました。当初、CYBOZU SUMMER BLOG FES '24の期間中に公開できるか不安だったのですが、目的にぴったりなOSSのちからをお借りすることができたので、目標を達成できました。Gatsbyについても、少し理解が進んだ気がします。2年前くらいに実装にチャレンジして途中で頓挫してしまっている、Videosのタグ単位の絞り込みページ。今なら、どこに何を追加すればページが表示できるかわかるので、解決できそうです。これは、機会を作って完成させたいと思います。pdffontsの自動実行もテストができていないので、そっちもやらなくてはいけません。引き続き、やっていき💪

いいなと思ったら応援しよう！