ID:30176さん

ヨガのキュレーションメディアの開発に従事しました。このサービスは、雑誌をオンライン化する事業で、収益は外部配信からの流入PVを増やす事で、タイアップ広告を増やしたり、アドネットワーク広告による収益化によって支えられています。 構成としてはCMSとユーザー側のサイトを別ドメインにして、ユーザー側のページはCloudFrontにキャッシュして返すようにしています。また、画像形式は次世代フォーマットのWebpに対応しており、S3にあげています。 私は主にこちらでCMSの機能や、RSSに記事を配信する機能や、外部サイトのデータを移植する機能を主に開発しました。 特に苦労したのは外部データの移植です。こちらでは、管理画面ではまずスクレイピングしたデータをDBに保存し、そのDB状態からローカル環境開発用のシーダを作る機能や、管理画面でデータの追加や編集、検索ができる機能を作り、その後にフロントを実装しました。 苦労した内容は、単語が記事本文内にあった時にフロントでの表示時に、それをリンクに自動変換する事です。Dom要素を本文解析する際に、HTMLタグの中に埋め込まれたテキストを抽出するのが難しく、再帰的に取り出す必要が生じたため、その実装の難しさを上司にアピールしました。すると、そこから、それを避けるために、ほう一度HTMLタグがあるものは別の記号に置き換え、テキストを置換した後にHTMLタグを元に戻すという提案を頂く事が出来て、処理を行う事で、シンプルに実装をしました。 ### 自ら工夫した点 Vue.jsをプロダクトに取り入れるという試みを実現しました。これは、スタジオの登録を企業が行うためのCMSを別で創設する際に行いました。１ページの中に、検索のモーダルやプルダウン、検索結果から選択した要素を、複数同時に一括保存するという機能を作る事になりました。従来だとjQueryを使っていたのですが、状態管理がとても大変で、Dom操作用の処理を実装する開発コストがかかるため、状態管理がしやすいフレームワークを投入する事にしました。結果、2週間かかるような工数の作業を、3日程度で実装する事が出来ました。

　ビジネスモデルは上のヨガジャーナルと同じく、雑誌のキュレーションメディアで、インフラ、ミドルウェア、言語は上記と同じです。仕様の違いとしては、上記ヨガメディアは管理画面のみでの記事編集だった事や、即時反映だったのに対し、こちらは一般ユーザーも編集を行える事や、記事配信の際に審査をする仕組みになっている事があります。また、一つ一つのフォームをモーダルで作り上げたSPAのような実装になっている事なども大きな特徴です。 　こちらでも、管理画面とフロント両方の機能を作りました。苦労した内容は、新規HTMLタグの埋め込み開発に伴う全体的なコードのリファクタリングとバグ修正です。このプロジェクトは、元々3人くらいの初期メンバーが自由な思想でコーディングしており、規則性のない、場所によってはとても冗長なソースコードで実装されていました。特にRSS配信ロジック周りや、記事編集画面では、300行以上の同じソースコードで成り立つ関数がおよそ10クラスで実装されており、それらに影響する部分の機能開発をする際は、全て編集しないといけなかったため、開発やテストの工数が膨らんでしまう構成でした。また、ところどころバグもあり、別の箇所を実装した人が、そこをバグのまま残す部分も介在していました。 　なので、まずは開発を進める事よりも、後々の保守を考え、上司にソースコードのリファクタを提案しました。クラスの継承関係を利用した共通メソッドの実装を行ったり、各画面ごとに違うファイルから呼び出していた全く同じ処理を、一箇所に統一しました。このように直した結果、テスト項目も3分の1くらいに減り、開発工数も5倍以上早くなりました。