GO NEXT LEVEL
完全に新しいCMSで
加速するアプリ体験
EASY
標準で提供する40種類以上の豊富な機能から、
素早くネイティブコンテンツの構築が可能。
ドラッグ&ドロップやCSVデータ入稿にも対応し、
リリースまでを最短距離で。
UPDATE POINTS
  • ドラッグ&ドロップでの画像入稿に対応
  • クーポン画像の自動生成・複製機能を追加
  • ニュース機能がCSV入稿に対応
FAST
管理画面でも、スマートフォンでも
リアルタイムに確認しながら
作業を進めることが可能。
※特許取得済
アイデアをさらにスピーディーに、もっと正確に表現。
UPDATE POINTS
  • CMSプレビューでの複数カラム表示、セルの表示/非表示に対応
  • 機能の新規作成時、アイコン検索に対応
  • セル編集とCMSプレビューのフォーカス表示連動
STYLE
新しいスタイリングでさらに
リッチな表現が可能に。
いつもの設定もワンクリックで。
UPDATE POINTS
  • セル/画像への角丸シャドウ効果を追加
  • セルのアピアランスコピー
  • 進化したリンクファインダーでリンク設定も簡単に
SECURE
ミスやエラーを防ぎ、運用効率を
大幅にアップデート。
日々のアプリ更新をもっと快適に。
UPDATE POINTS
  • セルの表示/非表示切り替え、ロック機能を追加
  • アラートメッセージでミス防止
  • 機能設定での機能複製/削除/編集へのショートカットに対応
PUSH
属性情報・位置情報・
オートプッシュ・APIプッシュなど、
対象セグメントを絞り込んで、
プッシュ通知を配信することが可能。
UPDATE POINTS
  • 全配信プッシュ
  • CRMプッシュ
  • APIプッシュ(連携したユーザーステータスに応じて配信)
  • オートプッシュ(簡易シナリオに対応)
  • ジオプッシュ
ANALYTICS
ダッシュボードでアプリの状態を簡単チェック。
プッシュの配信結果やクーポン利用数も一目でわかる。
YappliのCMSは分析もサポートします。
※下記データの取得に対応
UPDATE POINTS
  • 新規ユーザ数
  • アクティブユーザー数
  • プッシュ/オートプッシュ配信数および開封率
  • コンテンツ閲覧数
  • クーポン利用数
  • QR/短縮URLコード読み取り数
TECHNOLOGY
INTERVIEW

プロフィール

  • 大谷 洋嗣 フロントエンドエンジニア
    大谷 洋嗣 - Hirotsugu Otani
    フロントエンドエンジニア
    新CMS開発では主に画面を構成するコンポーネントの設計や開発を担当。
  • 城 由美 UI/UXデザイナー
    城 由美 - Yumi Jo
    UI/UXデザイナー
    新CMS開発ではコンセプト設計や各機能の情報整理、ワイヤー作成を担当。育児休暇のため途中半年ほど抜け、復帰後もUIデザインに従事。
  • 鬼木 悠貴 サーバーサイドエンジニア
    鬼木 悠貴 - Yuki Oniki
    サーバーサイドエンジニア
    新CMS開発ではサーバーサイド、フロントエンドのデータを扱うStoreの設計、開発等を担当。
  • 山影 純也 PM/PdM/サーバサイドエンジニア
    山影 純也 - Junya Yamakage
    PM/PdM/サーバサイドエンジニア
    新CMS開発ではプロジェクトマネージャーとしてタスク管理、サーバサイドエンジニアとして開発を担当。終盤はPdMも兼務。

導入

Yappliの要であるCMS(管理画面)。直感的な操作でアプリの更新を実現するCMSが、Yappli史上最も大きなプロジェクトを経て生まれ変わりました。なぜ刷新が必要だったのか、そしてリリースに至るまで、どんな困難があったのか。新CMSプロジェクトに関わった4人の社員へインタビューを行いました。

なぜ新CMSの開発を決めたのか
複雑怪奇なCMSが新機能開発を邪魔していた

  • 新CMSを開発することになった経緯を教えて下さい
    2018年の初めごろ、今後のプロダクト開発について議論する機会がありました。実は当時、既存システムの改善や新機能追加がままならないほど、危機的状況だったんです。旧CMSは属人化され、機能ごとに最適化された作りのために全体の統一がなされておらず、どう着手すれば良いかと困っていました。「まずは土台を作ろう」という想いから、新CMSのプロジェクトが始まりました。
  • 旧CMSはどんな状態だったのですか?
    鬼木
    旧CMSはアバウトな言い方をすると、Yappliの40以上ある機能が全て1つに固まっているような構成でした。1つの機能をいじると、他の機能にも予期せぬ影響が出てしまっていたんです。そもそもYappliは、CTOである佐野が1人で作ったプロダクトです。1人で開発するのであれば、スピードも出やすく、この方法が最適であることは理解できます。しかし拡張性がある構成であれば、機能のそれぞれが独立しているため影響範囲が狭まり、新しく入社した方も安心して開発に着手できます。ありがたいことに、ヤプリも人が増えてどんどん大きくなるフェーズになったので、さらに進化していくために新CMSへの刷新が必要でした。
    大谷
    私が入社する前から、既にプロジェクトは始まっていました。面接の時にCMS刷新について話を聞いたので、このプロジェクトのために採用されたと思ってます。旧CMSを触る機会は少ないですが、複雑怪奇な印象ですね(笑)。
    山影
    フロントのソースとサーバーのソースが、べたっとくっついた状態で置かれてたよね。フロントとサーバーの両方を対応できる人ならいじりやすい面もあったけど、改めて見ると気持ち悪いなって思います。だからこそ、予期せぬところに影響が出たり、似たようなソースを見間違えて本来いじるべきでないところをいじっちゃうんだろうね。
    大谷
    そう!ほんとそれ。気づいたら違う部分のソースコードを触ってたりして、すごく危険だった。
    鬼木
    機能のデザインも統制がとれておらず、テンプレートやルールはほとんどありませんでした。旧CMSにおいて新規開発はコストが高いものだったなあと思います。
  • すべてを読む

リリースに至るまでに実施したことや苦労話、思い出話 
開発案件は選択と集中を徹底 失敗を糧に、ユーザーと向き合った

  • 開発スケジュールを教えて下さい
    山影
    2018年2月 コンセプト策定開始
    2018年7月 開発着手
    2019年1月 第1弾リリース
    2019年7月 第2弾リリース
    2019年内に全てをリリースするため、第2段のリリース以降は、開発が完了したものから五月雨のリリースを行なってきました。元々は、2018年10月のYappli Summit*1で発表しようとしていましたが、結局丸2年以上かかりました。
    *1:Yappliが開催する新機能発表のイベント
  • 開発体制はどのような形でしたか?
    山影
    新CMSのプロジェクトでは、CTOの佐野は直接手を動かしていないんです。常時10人前後のフロントとサーバーエンジニアで稼働して、2年ほどかけて作りました。
    それゆえ、一番困ったのは、CTOしか知らない裏技操作です。例えばキーボードのshiftを押しながらクリックするとか(笑)。
    大谷
    そういった裏技は、今まで仕様として曖昧でした。レビューのタイミングで発覚するなど、仕様把握や実装はなかなか困難を極めましたね。裏技そのものは重宝されていたので、一部は隠し機能でなく、表のサービスに組み込むことで利便性にも繋げました。
    山影
    PdMとしては終盤しか携わっていませんが、メインで動いていたPdMメンバー(現在は育休中)は他の開発案件との調整に苦労していましたね。
    基本的に、フロントやサーバー側の作業が必要な新機能開発は止めていました。新機能を何も出さないというのは成長側面として問題なので、アプリエンジニアが頑張ることで実現できる機能を優先して、新機能開発を行うようにしていました。
  • 設計や言語から新しくするに当たって、どういった苦労がありましたか?
    旧CMSにも良いところはたくさんあったので、どこを残すかの取捨選択が難しかったですね。コンセプトを決めるため、数人でブレストをしながら決めていきました。これに並行して、事前に全社へ周知を行い、新CMSプロジェクトの認知を広めていったんです。

    実はこのプロジェクト以前にも、UI刷新を目的としたCMS開発が行われていました。
    当時は、社内でアプリ制作を担当するヘビーユーザーへのヒアリングや、関係部署へ変更点を周知するなど、あまりコミュニケーションを取らずにリリースしてしまいました。開発部主導の割と強引なリリースだったせいか、やはり考慮不足や不具合が多く、結局使われるのは旧CMSでした。過去の失敗を活かして、今回は開発部のみならず全社への周知を早期に行い、慎重に取り組みました。
  • 失敗を繰り返さないため、具体的にはどんなことをしたのでしょうか?
    山影
    社内のアプリ制作デザイナーにレビューをお願いしてましたよね。
    してました!実際にCMSを触っている方に、社内・社外を問わずヒアリングをしたんです。ヘビーユーザーと初心者、それぞれにとっての使いやすさって、評価軸が全然違うんですよ。例えばヘビーユーザーが求めるのは、利便性を更に高めるような進化。けれどそれは初心者にとって、操作箇所の名称やプルダウンの場所が分かりやすいといった、一般的なUIの観点からは逸脱している部分も多かったんです。私たちはヘビーユーザーの視点に慣れてしまっているがゆえ、スタンダードに寄せていく難しさを痛感しました。そのため、CMSを初めて触るヤプリの新入社員にヒアリングを行い、初心者ユーザーの評価を集めて、バランス良く判断できるよう考慮しました。デザインを見せるだけでは使い勝手がわからないので、実際に動かせるプロトタイプを触ってもらって使いやすさの確認もしました。レビューを通す上でも、何が問題なのか、言語化していくことに苦労しましたね。
    大谷
    私としては、プロジェクト全体でリファクタリングを実施し、ソースコードの改善を行なったのが印象的です。第1弾をリリースした2019年1月ごろから2ヶ月間は「みんなでソースコードを綺麗にしようぜ」っていう取り組みをしていました。それがあったからこそ今開発がすごくやりやすくなった。
  • やりがいに繋がったのはどんな点ですか?
    私はお客様の声でしょうか。リリース後に、お客様の反応が知りたくて、顧客訪問に同行させてもらったんです。一般的に機能改善に伴う変化というのは、身構えられてしまう傾向が強いので不安でした。しかしお客様からは、意外にも好意的な評価をいただけてすごく嬉しかったし、自信に繋がりましたね。
    とは言え痛みやバッシングはどうしても生じるので、この痛みをどう食いしばるかという点は重要だなと改めて感じました。
    鬼木
    自分は、大規模なシステムの設計をさせてもらえたことに、とてもやりがいを感じました。自分の年齢で任せてもらえることってなかなかないので、大変だったけど貴重な経験でした。手を上げればやらせてもらえる社風も、ありがたいと感じています。

完成した新CMSは何がすごいのか、そのこだわりポイントは 
新しい技術を採用し、誰でもスピーディーに開発可能な “攻めるCMS” へ

  • 完成した新CMSには新しい技術が盛りだくさんと聞きました。どんな技術でしょう?
    山影
    新CMSは、Goを使って開発しました。時流としてGoが盛り上がっていて、ヤプリのエンジニア陣も新しい言語を使ってみたい衝動に駆られていました。
    Goの特徴は、誰が書いても同じようなコードになるところで、ある程度矯正された書き方ができるんです。癖の強い書き方をする必要がなく、誰もが読めば理解できます。旧CMSのように、コードが複雑で読み解けないといった問題が解決し、開発スピードが上がりましたね。
    鬼木
    それに加えて、コードを書く時に迷ったり考え過ぎずに済む、というメリットもありましたね。ある程度制限されたレールに沿って書いていくので、新機能の開発においても工数が読みやすくなりました。
    新しく入社した人にとっては、類似機能を参照できることで、格段に開発しやすくなったんじゃないかな。
    山影
    他にも、gRPC(1つのファイルを通して複数の言語と通信可能な通信規格)やDDD(ドメイン駆動開発)、AWS Fargate(AWSのコンテナサービス)などの新しい技術を取り入れましたよね。
  • 新しい技術の採用は、どんな基準で決められたのですか?
    山影
    当時の選定基準は、「新しすぎず、世の中にそれなりの情報が溢れているもの」でしたね。これを満たすのが、Goでした。付随して、DDDなどの開発手法を選定しています。
    当時社内には、Goを触ったことのある人が2、3人ほどしか居ませんでした。その他多くのエンジニアにとってはストレッチな開発ではあるものの、学びながら開発できる言語を選んでいたので、一丸となって進めていきました。

    実は個人的に、Goがやりたかったんです。転職当時、候補にしていた他の会社はGoを使っていましたが、当時のYappliはPHPでした。プロダクトが好きでヤプリに入社しつつ、当時からGoを扱っていたら迷うことはなかったな(笑)
    鬼木
    Yappliのように1つの大きなプロダクトだと、粒度の小さいサービスに比べて、別の言語や開発方法を試すことは難しくなります。どうせ開発するのなら、新しい技術を取り入れたいっていう想いもありましたね。
  • 具体的に、新CMSは何が進化したのでしょうか?
    鬼木
    拡張性が高くなった点が、大きく変わったところです。本来は、ちょっとした機能改善をすぐにリリースできたらいいし、できるべきです。でも今までは、その複雑さや意図せぬ箇所への影響もあってできていなかった。基盤が整ったので、そういったちょっとした改善がしやすくなりましたね。
    山影
    エンジニアが修正しやすくなったよね。自分が触った機能は人より多少深く理解できているので、これをいろんな人に共有できるようになりました。みんなにナレッジを分散できたことで、開発のスピードも上がりました。
    大谷
    私はとにかく「普通」を目指して取り組みました。開発目線で言えば、グリッドシステムを取り入れたことで配置に困らなくなったし、サーバーサイドエンジニアでもいじりやすくなっています。フレームワークができたので、新しく入社した人が開発しても、基本的なデザインは統一できるようになりました。

    こうしてある程度のフレームワークがあれば、今後世間のベストプラクティスを取り入れやすくなるし、新しく入ってきたメンバーも、少し勉強すればすぐ戦力になれます。あと、保守や運用、拡張の妨げになるものを減らせますよね。
    デザイナーとしては、コンポーネント化やトンマナ統一に加えて、ちょっと導線を変えて画面間を行き来しやすくしたり、全体的に各機能を使いやすくするような、+αの改善を行いました。機能設定画面から該当機能の編集画面に飛べるようにした点は、昔からやりたかったんです。以前は技術的に難しく開発を諦めていたので、やっと着手できて嬉しかったです。

完走のひとこと、使う人へのメッセージ 
進化の基盤は整った ヤプリを技術面でも魅力ある会社に

  • プロジェクトを完走した皆さんから、メッセージをどうぞ
    鬼木
    拡張性が高くなった新CMSで、今まで止めていた新機能開発はもちろん、外からの要望もどんどん反映したいと思います。良い技術を選択でき基盤も構築できたと思っているので、これからもヤプリを技術面でもより魅力的な会社にしていきたいです。
    山影
    本当にそうだよね。今後、機能開発や改善速度は上がっていくと思います。
    またこれからヤプリへジョインする人にとっても、開発しやすい環境が整いました。エンジニア採用へのご応募お待ちしています!(笑)
    大谷
    今回のプロジェクトで、ソースコードをサーバーサイドとフロントエンドに分離できました。今後、新規開発や速度が求められるような開発も、フロントだけで完結できるので、良くしていくための下地はできたと思います。今後は海外でも戦っていけるよう、アクセシビリティの対応などもやっていきたいですね。
    ただ、次に目指すところはさらなる高い山。今回が富士山なら、次は多分エベレスト級のプロジェクトを予定しています。今回のリプレースは旧CMSを踏襲している部分が多いけれど、今後はアプリの制作体験がガラッと変わるような、大きな変化が待っています。既にそのプロジェクトは進んでいますので、今後にご期待ください!

終わりに

Yappliにとって過去最大の開発プロジェクトとなった新CMS。CTO佐野がたった1人で書き上げたソースコードは跡形もなく、まったく新しいYappliの誕生です。完遂を語る皆さんの表情は明るく、誇らしげにも見えました。休む間もなく次の大きなプロジェクトに奔走する、大谷さん・鬼木さん・城さん・山影さん。インタビューへのご協力、ありがとうございました!