この記事は共同開発鯖 Advent Calender 2021の15日目の記事です.

共同開発鯖のカレンダー | Advent Calendar 2021 - QiitaQiita Advent Calendar

共同開発鯖のカレンダーページです。

qiita.com

いま見ているこのBlogを突貫工事で作成し2週間ほど経ったので, 振り返りつつ記事を書いていきたいと思います.

開発概要

Blogの最低限の機能の作成とデプロイまで

開発期間	開発メンバー
約2週間	4人

作成の経緯

あまり覚えていませんが, アドベント・カレンダーに合わせてBlogを作成できたらいいよねという話から始まった気がします.
11月の頭あたりにそういった話があった気がしますが, 私を含めほとんどの人が11月は試験期間だったためすぐには開発は始まりませんでした.

技術選定と環境構築

技術選定

このBlogは以下で作成されています.

• Next.js / React
• Tailwind CSS
• SCSS

全く開発が進んでいないこの共同開発鯖のサイトでReact/Next.jsが選ばれていたこと, Vue/Nuxt.jsが書ける人がいないことなどから, 独断でスムーズにフレームワークは決定できました.

開発メンバーの1人がTailwind CSSを使いたいとのことだったので採用しましたが, スタイルは全くやってくれませんでした...

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

tailwindcss.com

環境構築

技術選定後, 環境構築はメンバーの1人にほとんどを担当してもらいました.

• ESLintの導入
• Pritterの導入
• Jestの導入
• Storybookの導入
• CI設定
• Editorconfigの設定

お陰でスムーズな開発ができたと思います.

記事表示部分の実装

実装内容

このBlogのデータはdataというディレクトリに保存されています.
このディレクリはBlogとは別のリポジトリで管理され, サブモジュールでBlogのリポジトリに取り込む形を採用しました.

data/articlesには作者ごとのディレクトリが置かれており, その配下に作者のプロフィール情報が保存されたprofile.jsonと各記事のディレクトリが置かれています.
記事はindex.mdというファイルで保存されており, マークダウン記法限定のBlogとなっていますが, メンバーのほとんどはマークダウン記法が使えるので大きな問題ではありません.

fugaという記事をhogeというユーザーで作成した場合のディレクトリ構成

├ README.md
└ articles
    └ hoge
        ├ profile.json
        └ fuga
            └ index.md

ブログの書き方より引用

Blogの書き方

Blog - 共同開発鯖

blog.growthers.dev

実装

このBlogはNext.jsのSSGを使って生成されており, ビルド時に記事へのパスとページが生成, マークダウンの変換にはreact-markdownを使用し, 複数のプラグインも導入しています.

GitHub - remarkjs/react-markdown: Markdown component for React

Markdown component for React. Contribute to remarkjs/react-markdown development by creating an account on GitHub.

github.com

動的ルーティングのSSG対応(?)は開発初期に1人のメンバーがすべてやってくれたため, 記事部分に細かい機能を加えるための時間がかなり確保できたと思います.

• URLを新規タブで開くように
• OGP表示
• 記事の更新日付の自動取得

URLを新規タブで開くように

ライブラリで変換されたaタグは同一タブで開くようになってしまっているため, 新規タブで開くように変更しています.

OGP表示

ogp-parserを使用してサイトのタイトルなどを取得, 記事の行間に挿入しています.

GitHub - ukyoda/ogpParser: Open Graph Protocol Parser for Node.js

Open Graph Protocol Parser for Node.js. Contribute to ukyoda/ogpParser development by creating an account on GitHub.

github.com

記事の更新日付の自動取得

gitlogを使用してGitのlogから記事の更新日を取得, 記事の先頭に表示させています.

GitHub - domharrington/node-gitlog: Git log parser for Node.JS

Git log parser for Node.JS. Contribute to domharrington/node-gitlog development by creating an account on GitHub.

github.com

今後

現在記事内すべてのURLにOGP表示を行っていますが, URLの次行にOGPコンテンツを強制的に挿入させているため, テーブルやコードブロック内に挿入され見た目が崩れてしまいました.

これ以外にも問題点はあるので, 徐々に修正を行っていきたいと思います.

感想

大したことが書けませんでしたが, ひとまずBlogが形になってよかったと思います.
gitのサブモジュールは使ったことがなかったのでいい経験になりました.