マル知る!(旧mcn)をフルスクラッチでリニューアルした話

はじめまして。 エイプリルナイツの @slncu と申します。

普段は社内や取引先でエンジニアをやっています。

よろしくお願いします。


さて、去る1月25日、mcnことマルチコアニュースは名称を「マル知る!」として新生しました。僕はリニューアルプロジェクトの話が走り始めたときから当時の話を知っている数少ない人間なのですが、今回は「なぜリニューアルをしたのか?どんな過程でリニューアルしたか?」を主眼においてお話をさせていただきます。また、この記事は主観的な部分を多分に含んでいます。いちエンジニアであり、マル知る!の運営者でもなければ、普段ライターとして活躍している訳でもありません。ご了承の上、読み進めていただければと思います。


mcnとは?と、その歴史


まず前提をお話します。

マルチコアニュース(mcn)は、一昨年(2017年)の12月に公式リリースされたエイプリルナイツ初のオウンドメディアサイトとなります。コンセプトは「ムズカシイをカンタンに」だとか「会話をニュースへ」だとか色々あったような気がします。当時はハードウェア系の記事を中心に取り扱っており、Twitterを利用したプレゼント企画や界隈の有名人をライターとして起用するなどしてPV数やフォロワー数を着実に伸ばしていた時期であったと記憶しています(もちろん今でもそういった企画をやっていると思いますが)。システム的な話をすると、ごく一般的なレンタルサーバーにWordPressをインストールしただけという、現代のインターネット標準に準拠したごく一般的なメディアサイトでした。


順風満帆に見えたメディア運営ですが、リリースまもなくして問題が浮上します。ひとつはサイトのパフォーマンスの問題、もうひとつは運用の問題です。前述の通り、mcnはレンタルサーバーにWordPressを乗せただけのサイトです。今になって思えば、この選択があまりよくありませんでした。僅かながらも右肩上がりにPV、ライターさんの数が伸びていく中でレンタルサーバー + WordPressという構成は、スケールアップも出来ず、機能のエンハンスもし辛いという、サービスの成長を阻害する足枷にしかなりませんでした。個人や企業の方には声を大にして言いたいのですが、今まさに成長させたいサービスがあるのなら、レンタルサーバー + WordPressという古き良きインターネットの標準は選択すべきではないでしょう。せめてVPSや、今ではPaaSやIaaSといった選択肢が充実しているので、しっかり吟味すべきと思います。


(設立間もない頃のローディング速度。コンスタントに16秒くらいかかっていた)


少し話が逸れましたが、つまり何を言いたいのかと言うと、mcnは成長しなければいけないタイミングだったのです。キュレーションメディアのようなサイトは世の中に無数に存在します。mcnが今後も戦っていくためには、コンテンツの中身(質、量)ももちろん大事ですが、コンテンツを快適にユーザーに届ける、ということも重要なファクターなのだと考えました。ここでいうユーザーとは、コンテンツを見る側、作る側の双方を指します。では、快適とは何か?僕は次の2つを過不足なく満たしていることと思います。


1. ユーザーにとってストレスがないこと

2. ユーザーにとって必要な機能が揃っていること


一般に非機能要件/機能要件と呼ばれるものです。実際のサイト(旧mcn)はどうでしょうか。


1. トップページの読み込みに8秒、ネットワークやサーバー負荷状況によっては20秒かかる

2. 不必要と思われる機能が多く、必要な機能はない


1に関してはとても深刻でした。少し調べれば多くの情報が出てきますが、レスポンス時間が1秒でも遅くなるとユーザーの直帰率は飛躍的に増します。サイトの回遊率 ≒ 収益 というメディアサイトの性質を鑑みるに、このパフォーマンスの悪さは致命的だったと言えます。2に関しては、WordPressのテンプレートという性質上仕方がない部分もあったかもしれません。しかしながら、誰がどんなプラグインを入れて、どのCSSやJS、PHPを弄ったかわからない、という運用上の問題は多くありました。不幸な問題はまだあります。前述の通り、mcnは間違いなく成長のタイミングでした。にも関わらず、上記のような課題が原因もわからないまま、ブラックボックス化されて転がっていたのです。僕たちはこの課題に対してどうすべきなのかを議論し、そして決断をしました。パフォーマンスを最適化した上で、必要な機能を必要な時にエンハンスできる仕組みを作ろうと。


よりパフォーマンスの高いサイトへ


目的を達成するために必要な技術は何となく頭の中に思い浮かんでいました。ほぼ無数の手段がありましたが、僕たちはカスタマー側画面をReact.js(Next.js)、管理画面をLaravelでスクラッチする手段を採用しました。なぜこの技術スタックを採用したかについては、気が向いたら別記事にしようと思いますが、ひとつ言えることは弊社エンジニアの技術スタックで最も実現可能性が高く、パフォーマンスも発揮できると判断したからです。しかし、今すぐにシステムの再構築をできるほど人間離れした技術は持っていません。まずは低パフォーマンスの原因を探り、純粋にサーバースペックが足りていないことを探り当てました(この調査結果が判明するまでに1日程かかりました…)。そして、フルスクラッチが完了する前の代替として、A社のレンタルサーバーからB社のレンタルサーバーへ乗り換えることにしました。この作業を実施した結果、十数秒かかっていたサイトの読み込みがコンスタントに4,5秒で収まるようになりました。これでようやく一般的なメディアサイトのパフォーマンスと肩を並べることができました。ここから先はより長く戦い続けるために、更なるパフォーマンスの向上と機能の最適化を目指していくことになります。


ひとり開発の難しさ


いよいよフルスクラッチでの開発が始められる準備が整ってきました。ちょうど去年(2018年)の7月頃のことです。週3日は現場に出向していたので、残りの週2日という限られた時間で作業を進めていきました。まずはワイヤーフレームを書き起こして、レビューをもらい、90%Fixした状態でフロント側の環境構築や設計的な部分の作業を進めていきました。また同時進行で、ワイヤーを元にしたデザインを tomitoms44 さんに依頼したり、バックエンド側の環境構築やDBの設計などを弊社エンジニアにお願いしていました(お二人には大変お世話になりました。ありがとうございました!)。


このプロジェクトが走り始めた当初、開発は僕一人で担っていく予定でしたが、結局は色々な人の手を借りることになりました。どこかで自分に足りないスキルセットが必要となる場面があることはわかっていましたが、それを差し置いても第三者的な立場での意見や観点は必要だし、結果的に、手戻りやコミュニケーションエラーが生まれづらいプロジェクトを推進できると感じました。これは設計から実装まで携わった僕だからこそ自戒の念を込めて記しておくのですが、プロジェクト/サービスの思想・設計・実装は、少なくとも2人以上のチーム体制を構築した上で、且つチームメンバーがそれらを理解した上で推進していくべきです。


マル知る!の誕生とこれから


2018年も終わろうとしている頃、運営体制に大きな変更がありました。それまで運営を仕切っていた方が離任され、投稿数トップのひじきぼーいもメインの体制からは外れることとなりました。丁度いいタイミングということで、サービス名も変更することになりました。そして、弊社社員の公募によって選ばれた「マル知る!」が誕生しました。「マルチに、まるっと、お役立ち情報を知る」という意味らしいです。「まるにゅ」の呼称で慣れ親しんだ人からすると少し親近感が湧く名前かもしれないですね。



(ロゴのラフ画像。実はリリースのほぼ一週間前に完成した)


冒頭で、マル知る!は様々な課題があったからリニューアルする必要があったと述べました。しかし、エイプリルナイツとしてはリニューアルすることにもうひとつ大きな意味がありました。それは、マル知る!がエイプリルナイツ初、100%内製のWebサービスであることです。この意味はとても大きいです。僕自身、業界未経験としてエイプリルナイツに入社し、いろいろな人や環境に育てられながらエンジニアという肩書きを貰いました。マル知る!の誕生によって、ドメスティックにエンジニアを育成できる環境を提供できることは、マル知る!のみならず、会社が成長することの一端も担います。これからのマル知る!の課題、ひいてはエイプリルナイツの課題は、成長を止めないための人を育てていくことです。これは僕個人の思いですが、マル知る!を通じて、そういったエンジニアが出ることを願って止みません。


おわりに


マルチコアニュース改め、マル知る!を今後ともよろしくお願いします。まだまだ成長過程のため至らぬ点も多々あるかと思いますが、要望や意見は可能な範囲で吸収していきます。また、エイプリルナイツでは、マル知る!のようなサービスを作ったり、一緒にゲームをしてくれる仲間を絶賛募集しています。現在(2019/1月 時点)は特にエンジニアの教育や人事に興味のある方を募集 しているみたいなので興味のある方は是非ご一報ください。 最後になりましたが、ここまでの長文をお読みいただきありがとうございました。重ね重ねのお願いとはなりますが、引き続きマル知る!をよろしくお願いします。

この記事を書いたライターは?

slncu

2年で20kg太った若き天才。 フロントエンドチョットデキル。

あなたにおすすめの記事