Da Vinci Studio 第 2 サーバー部の冨田です。
Da Vinci Studioではくふうグループ内、くふうグループ外問わず、様々なサイトの新規開発や保守運用をさせていただいております。 今回はその中でもDa Vinci Studioでサイトの発足から関わりのある「おやこのくふう」についてご紹介いたします。
技術ブログでありますので技術的なお話をメインで進めさせていただければと思います。 ただ、そもそも「おやこのくふう」というサイトを知っていただけないとその後の技術的なお話もわかりにくくなってしまうと思いますので、まずは軽く「おやこのくふう」についてご説明いたします。
「おやこのくふう」とは？
くふうグループの会社の1つである株式会社ロコガイドで運営されているサイトです。
ではどういったサイトなのかと申しますと3歳から6歳の「まなぶ・運動・食べる」のきほん情報を軸に、専門家による取材・監修と子育て中の親の気持ちに寄り沿った記事づくりを徹底してお届けするメディアサイトになっています。 実際に株式会社ロコガイド（旧:株式会社くらしにくふう）で2020年8月に実施した「3歳から6歳の時期の子育てに関するアンケート」では、「コロナ禍で家庭での子育てに関する悩みや困りごとが増えた」との回答が70％にも及んでおりました。 このようにコロナ禍をきっかけに子育て事情が大きく変化していく中で、お役に立てる可能性のあるサイトなのではないかなと思っています。
個人的には「おやこのくふう」のリリースの際にあった『「親の気持ちにも、子どものきもちにも寄り添った記事づくり」。「がんばりすぎない」「むりしない」を合言葉に、このコロナ禍でも、おやこが共に心地よくいられるためのアイデアを提案します。』というコメントがサイトの姿勢を特に表していると思っています。
技術構成
本ブログは技術ブログですので技術的な観点から「おやこのくふう」をご紹介いたします。私は第 2 サーバー部に所属しておりますので、主にサーバーサイドとフロントのお話をさせていただければと思います。（デザインやインフラは詳しくないので別途機会がありましたら他の部署のメンバーに紹介していただけるかもです。）
サーバーサイド
言語はRubyでフレームワークがRails、DBはPostgreSQL、キャッシュはRedisを使用しております。 ただ、それだけですと他のサイトやプロジェクトの大差がないような気がするので、「おやこのくふう」で活用しているgemを3つほど紹介いたします。
google_drive_dotenv
１つ目はgoogle_drive_dotenvです。 Da Vinci Studioの代表取締役である吉川が開発したgemになります。 （吉川は1日の予定のほとんどがMTGなのに現場の開発もサーバー部メンバーより進めているという…） こちらGoogle スプレッドシートの情報をもとに.envファイルを作成するというgemになっております。 Google スプレッドシートで管理するので、アクセスできるユーザーを管理しやすい点や変更履歴がわかる点などが使いやすい点だと思います。
Ridgepole
２つ目はRidgepoleです。 こちらはCookpadの菅原さんが開発されたgemになります。（Cookpadと縁のある社員もおりますのでその影響で使用されるようになったのかと） こちらはRailsのデフォルトのMigrationシステムの代わりに使用できるgemになっております。 使っていて感じる利点としてはカラムの追加や変更の際に該当行を1行変更するだけでできることだと思います。Migrationシステムより変更履歴がわかりにくいかもしれないですが、GitHubで管理しておりますので特に不便ではないかなと。
redcarpet
３つ目はredcarpetです。 マークダウン形式のテキストデータを元に、マークダウン形式で文章表示するためのHTMLを生成してくれるgemになっております。 こちらはマークダウンによる記述をする必要があるプロジェクトでは採用率が高いのではないでしょうか？ 実際にDa Vinci Studioのメディア系サイトの多くでこちらのgemは使用されております。 私は他にマークダウン形式を扱えるgemを使用したことがないのですが、redcarpetのみでやっていけるくらいにはオプション機能を含めたカスタマイズが充実しているのではないかなと思っております。
フロント
ビューテンプレートはHaml、JavaScriptはVanilla、CSSはScssを使用しております。 こちら有名なものになりますので簡単に「おやこのくふう」で採用している理由をお話しできればと思います。
Haml
採用理由はRailsでデフォルトのerbより簡潔に書ける点ですね。 広告の挿入コードなどHTML形式で挿入依頼されるものもあるので、必ずしもhamlの方がやりやすい訳ではないと思うのですが、HTML形式との相互変換も難しくないので運用しててメリットが勝っている印象です。
JavaScript(Vanilla)
Javascript(Vanilla)の採用理由はVueやReactなどを入れるほどでもないですけど、多少フロント側で操作したい部分があるため、JavaScript(Vanilla)として入れております。 「おやこのくふう」はメディアサイトですのであまりないと思うのですが、今後複雑な仕様がでてきたら導入を検討できればなと思っております。 ちなみに、Da Vinci Studioの他のプロジェクトではReactの導入が進み始めています。
Scss
採用理由は最初にプロジェクトを作成したエンジニアさんの気分です（笑） 実際のPRのコメントはこちら→「Scssにしたのは適当なのでSassが良ければ変更してもらっても大丈夫です。」
基本的に担当のエンジニアさんはScssでもSassでもCSSでも書けますので特にこだわりがなかったのではないかと。（個人的にはCSSで十分かなと思っています）
開発体制
くふうグループ内会社の1つである株式会社ロコガイドで運営されているサイトですので、Da Vinci Studioとしては受託開発という形になっております。 受託開発というと決められた仕様があり、基本的にはその仕様通りに作成するといったイメージが強いと思いますが、「おやこのくふう」での開発形態は少し異なりまして、受託開発とはいえ、雰囲気としてはほぼインハウスでの開発のように感じております。
UUやPVなどの目標に対してどのような施策をやっていくのが良いのかなどご相談を受けたりしておりまして、そのような話し合いの過程でDa Vinci Studio側から提案して、施策内容自体が大きく変更があった案件も少なくありません。
これはDa Vinci Studioの面白い一面であると感じている点でして、契約上では基本受託開発なのですが、その中身が各種プロジェクトで異なっておりまして、皆様のイメージに近い受託開発もあれば、インハウスに近い形式のやり方もあります。 私は他にもいくつかのプロジェクトを兼任させていただいているのですが、インハウスに近いやり方が面白いですね。
終わりに
今回はくふうグループの会社の1つである株式会社ロコガイドで運営されている「おやこのくふう」についてご紹介いたしました。 皆様のご参考になりましたら嬉しいです。
今回ご紹介した「おやこのくふう」以外にも幅広い技術構成や開発体制でDa Vinci Studioは日々開発をしております。 実際に経験してみるまで自分にどういった開発技術や開発体制があっているのかわからないと思いますので、その中で多種多様な経験ができるというのはDa Vinci Studioの大きな魅力の1つではないでしょうか？（個人の感想です）
そんなDa Vinci Studioでは一緒に働く仲間を絶賛募集中です。 興味のある方はこちらか recruit@da-vinci-studio.net までご連絡ください。
