ポート株式会社 / WEB開発部:
新規オウンドメディア/立ち上げ&保守運用
【開発】 ・Wordpressによるコラム型コンテンツのオウンドメディアをリニューアルする。 ・コラム型コンテンツの拡張、コンテンツ掲載以外の機能拡張を目的としている。 ・その立ち上げから保守運用まで一気通貫して行う。 ・Ruby(Rails), Javascript(TypeScript, React)で実装を行う。 ・チームメンバーは、自身と他にインフラエンジニアとデザイナーを合わせて3人。 ・インフラエンジニアは以下を担当。自身の機能開発と並行して行う。 ・AWSでの CodePipeline による CodeBuild を使用した ECS へのデプロイ ・staging環境構築 ・Railsによるリニューアルを行う。下記は、その背景。 ・Node.jsやPHP等の他の技術で実装することも検討材料として含めたが、リリース時期を考慮して迅速に開発する必要があったこともあり、自身が一番使い慣れている技術を選択する必要があった。 ・また、社内のスキルセットから見てもバックエンドは9割Railsエンジニアであるため、Railsを使用した方が社内リソースでの継続的保守運用がしやすかった。 ・Rails(Ruby)は決して旬な技術とは言えないが、国内ではまだまだ現役であるため、採用という観点からもRails(Ruby)エンジニアは新規採用がしやすく安定的な運用につながる。 ・また、教育もしやすく、記事型メディアということもあり特別複雑な処理が存在するプロジェクトではないので、最悪Rails初心者でも開発に着手可能。 ・フロントエンドの開発において 、TypeScript + Reactも採用。下記は、その背景。 ・初期リリースにおいてはRailsによるERBも含めて実装するため、使用技術において特別な縛り等はなかったが、今後の採用活動の中でモダンな技術を積極的に組み込んでいることを実態に合わせて見せるたいという開発部の思いがあった。 ・また、社内の他プロジェクトにおいて、主要な全ての開発がTypeScript + Reactへ移行していることがあった。 ・加えて、開発部として社内のエンジニアにはTypeScript + Reactでフロント実装できるようになって欲しいという思いがあり、自分もそれができるようになりたいと常々思っていたことがマッチし、それを実行できる大きなチャンスであったため。 ・要件定義、基本設計、詳細設計、DB設計は自身で行う。 ・今回のプロジェクトの要である「記事コンテンツ」についての設計 ・コラム編集は、markdown形式で行うことになった。 ・それにより「編集はmarkdown」「表示はHTML」と二つの状態が存在することになる。このとき、表示の度にmarkdownをHTMLに変換するのは非常に非効率であるため、それらを保持それぞれ何らかの形で保存した方がいいと考える。 ・そこで今回は、markdown形式のデータだけをログのように残す形で、記事データには単一のHTML形式だけを保存するようにした。 ・Mementoパターンとは似て非なる構造だが、同じように過去の状態に戻すことも可能となることに加え、表示の度にデータ形式変換を行わなくて済む。 ・懸念点としては、編集が増えるほどメモリへの負担も大きくなっていくこと。そのため、古いデータは定期的に削除するようなライフサイクルを組み込まなければいけない。 【環境】 『言語・フレームワークなど』 ・Ruby(3.0.2) ・Ruby on Rails(6.1系) ・Rspec ・JavaScript ・TypeScript ・React ・Node.js(16.7.0) ・Webpack 5 ・Jest ・ESLint ・Prettier 『ミドルウェア』 ・MySQL(5.7) ・Nginx ・Docker 『インフラ』 ・AWS ・RDS ・S3 ・ECS ・ELB 『その他』 ・GitHub ・Figma ・Slack ・Kibela ・Airbrake 【タスク】 『環境構築』 ・Webpack導入によってバックエンドとフロントエンドの開発環境を分離する ・TypeScript + Reactの開発環境構築 ・Jest, ESLint, Prettierの導入 ・MySQL, Rspecの導入 ・Dockerの導入 ・Node.jsとRailsのマルチステージビルドによってイメージサイズを最適化する 『機能開発』 ・Wordpress DBの記事コンテンツをRails DBに移行 ・画像のアップロード機構作成 ・gem carrierwave を使用 ・画像のリサイズには libvips を使用 ・libvips の選択の背景 ・ImageMagicより高速に処理ができること。 ・Rails7.0系からActive StorageのデフォルトのvariantがImageMagickからlibvipsに変更されたこと。今後Railsのバージョンを7.0系に上げた場合に、variant変更のコストが発生しない。 ・コラム型コンテンツ管理機能作成 ・markdownエディターを採用 ・エディターの生成には react-simplemde-editor を使用。下記は、その選択の背景。 ・ライブラリ選択に係る機能要件としては、リアルタイムプレビューが存在すれば他はシンプルなエディターとして機能存在すればよかった。また、独自の記法も追加するので拡張が任意で可能なものであること。 ・react-simplemde-editor は、機能要件も満たしており拡張も可能。デフォルトの機能も非常にシンプルだった。また、他プロジェクトで使用している例も存在した、社内での管理も比較的しやすい。 ・react-simplemde-editor は、内部で easy-markdown-editor というライブラリを使用していて、それをReactコンポーネントでラップしたものです。この easy-markdown-editor のメンテナンスが継続的に行われていることが確認できたので、セキュリティという観点でも一先ず問題無いと判断した。 ・markdownパーサーには markdown-it を使用。下記は、その選択の背景。 ・ライブラリ選択に係る機能要件は、独自の記法を拡張できること。 ・markdown-itは要件を満たしている。また、Marked等の他のライブラリと比べて公式及びコミュニティによる拡張プラグインが充実していて、記法の拡張が柔軟にできることがわかったため。 ・頻度が高いわけではないが、ライブラリの更新も継続的に行われていて管理されていることが確認できた。 ・デザインデータ(psd)を元にviewを構築 ・SEO対策 ・metaタグの各種設定 ・サイトマップ作成。Amazon EventBridgeによってサイトマップ生成を定期実行し、S3に保存する。 ・構造化マークアップの作成。 ・画像遅延読み込みやページキャッシュ等によるサイトスピード向上。 【現在】 ・2022/2月初旬にリリース完了 ・新規機能開発継続中 ・プロジェクトメンバーに変化なし