NEWSニュース

2020.03.19

TECH BLOG

公式サイト開設サービス「Fensi」で「セフィラ・スゥ」のファンサイトを公開した話

こんにちは。フロントエンドエンジニアのうっすーです。

今回は僕の所属するCAMの若手から抜擢されたクリエイティブ集団、CreativeNEXTの活動の一環として行った、FensiでFTuber「セフィラ・スゥ」の公式ファンサイトをWeb Componentsライブラリ「LitElement」を利用して作った話について、ご紹介したいと思います。

まずは、これからの話の中で登場するサービス名称について紹介したいと思います。

 

■Fensi(フェンシー)とは

Fensiはタレントやアーティストなど表現活動をする方が、簡単に自身の公式サイトを開設することができるサービスです。コンテンツやデザインを自由に組み合わせることでその方らしいサイトを制作し、プロフィール設定やブログ更新、写真・動画のアップも簡単に行うことができるほか、2019年11月にはEC機能も追加されました。

 

■FTuber「セフィラ・スゥ」とは

FTuberとは、現役占い師による占い(Fortune) ✕ VTuberの造語。インターネット占い事業を展開するCAMから、業界初となる現役占い師による占い特化型VTuberとして2019年にデビューを果たしたのが「セフィラ・スゥ」です。

そんな「セフィラ・スゥ」は2020年1月3日放送の「THE 的中王2020」にも出演。YouTube上では、その場でリスナーさんを占う配信がメインではありますが、最近ではゲームや雑談など、占いの他にも幅広く配信活動を行っています。

 

1. [Fensi × セフィラ・スゥ] 公式ファンサイト作成プロジェクト発足


前段にもありましたが、FTuber「セフィラ・スゥ(以下、セフィラ)」とは現役占い師がVTuberとしてデビューした、CAMの公式VTuberです。YouTubeのチャンネル登録者数も2万5千人を突破しており、今注目されているVTuberなんです!

そんな、セフィラの公式ファンサイトを作ろうとなったきっかけは、CreativeNEXT(以下、クリネク)が発足して2ヶ月くらい経った7月頃。セフィラがYouTubeデビューして半年、そしてFensiがリリースされて3ヶ月くらいのタイミングです。

 

事前にfkeiさん(CAMのCTO)よりヒントとして「Fensi × セフィラでサイト作ったら?」とお告げがあり、クリネクみんなで必要なことは何か、その目的や要件定義、ゴールを考え、行動に移すことにしました

早速僕たちは、社内のセフィラ運営チームへ「Fensiでセフィラの公式サイトを作りましょう!」と提案をし、合意を得ることができプロジェクトとして動き始めました。

 

当初、このプロジェクトのゴールとしていたのは、Fensiのシステムを使いつつ、独自のデザインパターンを用いて、運営側の実現したいこと、ビジネスビジョンに合わせた公式ファンサイトを作ろうと考えていました。

運営チームとミーティングしていく中で、サイトに盛り込みたい機能だったり、トップのデザインはこうしたい、

ここの部分は重要なポイントなので注力したいなど、互いに意見を出し合い、開発が始まりました。

 

2.Fensiで「セフィラ・スゥ」がモデルとなった新たなテーマ作成プロジェクトに変更


 

セフィラ運営チームの意見を聞きながら、クリネクからはデザインのモックを作り、いい感じに進捗してきた頃のことです。コミュニケーションをしっかりと取ってきたつもりが、運営チームとクリネクとの間に認識の違いが出ていたことに気づきます。

 

僕たちクリネクは、「セフィラにとって将来的にメリットのある、ビジネスビジョンに合わせた公式ファンサイトを作ること」が一番重要だと思っていたので、Fensiのシステムは使うけれど元々のデザインパターンには囚われない、自由な公式ファンサイトを作る」

という認識でした。

ところが、運営チームのこのプロジェクトにかける重要な想いとして、「セフィラだけではなく、Fensiにもメリットになるようなプロジェクトにしたい」というものがありました。

 

Fensi には、

– 予め用意されたデザインテーマを選んでサイトを開設するパターン

– 社内で独自デザインを考案し、実装するパターン

があります。

僕たちは、パターン②のつもりで開発を進めていこうと思っていたのですが、そのゴールだと、

Fensiで開発をしているが、別物のサイトとして存在することになってしまうのです。(Fensiに対して直接的なメリットがない)

ここでもう一度ゴールを見直す必要があると判断し、運営チームとクリネクとで再度開発の設計を練り直すことになりました。

 

Fensiにとってメリットになることを考えた結果

– サイトを開設してくれるオーナーが増えること

– Fensiの認知度が上がること

– オーナーのサイトがより多くの人に見てもらえること

 

最良の方法は「セフィラの公式ファンサイトをFensiで作り、なおかつ新しいテーマを開発して公開する!」

そして、このゴールに込められた想いは「機械音痴なセフィラでもFensiを利用したら簡単にサイトが作れる!しかも、セフィラのようなVTuberでも使えるテーマがある!」です。

 

セフィラがその新しいテーマのモデルとして、サイトを公開することで、

– テーマを増やす。

– Fensiは簡単で、誰でもサイトを開設運用ができることをアピールできる。

– インフルエンサーやモデル、アーティストが多かったFensiのオーナー層に新たに「VTuber」も含めることができる。

 

といったメリットをもたらすことができると考えました。(また同時進行中だったFensiのオリジナルグッズが販売できるEC機能の宣伝にもなりました!)しかし、この舵きりがFensiをよく理解していなかったクリネクにとって、険しい道のりとなったのです。

 

3.Fensiのアーキテクチャーの理解


 

ようやくフロントエンドの話も出ています😅

ゴールが変わったことで色々と問題が出てきました。まずは、デザインです。

Fensiの新しいテーマの開発にシフトチェンジしたので、Fensiのデザインシステムの中で最大限実現できる方法を考える必要がありました。

 

Fensiのデザイナー、フロントエンドエンジニアにヒアリングをして、ほぼ出来上がっていた旧デザインをFensi仕様に変更していきました。

 

テーマデザイン担当の宮口さんも

「独自作成じゃなくなったので、Fensiの作り自体を理解してデザインする必要があったり、それぞれカラーを割り当てたりするのが大変でした。」

と言っておりました。

 

同時に、フロントエンドでも実装の仕方が大きく変わります。

 

Fensiの独自テーマ開発では、フロントエンドは独自に環境を作り、そこでコンポーネントを作ったりして開発をしていくのですが、

Fensiのテーマ開発となると、Fensiの開発環境下で実装を行うことになります。

 

Fensiの中での開発となったため、

そこにはFensiの実装、開発ルールがあり、僕はFensiに関して知識が乏しかったのでFensiを理解するため、Fensiチームの方々に

Fensiの仕組み、Fensiの全体像、フロントエンドの設計、どうやったら新しいテーマを組み込むことができるのか。

自分で調べては、質問を繰り返し、理解を深めていきました。

 

まず、Fensiというサービスは、認証、課金、通知など20を超えるマイクロサービスにより構成されており、それらが通信しあって、最終的にwebページとしてみれるという仕組みになっております。(マイクロサービスアーキテクチャを採用しています)

 

それぞれのマイクロサービスは互いに疎結合である必要があります。

マイクロサービスの利点として、

– マイクロサービスごとに実装、デプロイができる

-マイクロサービスが複数並行して実装、デプロイができる(スピード感)

-マイクロサービス間で技術など合わせる必要がなく、そのシステム、サービスに最適な技術を選択して開発ができる。

-機能の追加、変更がしやすい(スケーラブル)

などがあります。

 

Fensiはこのアーキテクチャで、日々進化しております!

このように、Fensiは機能を追加したりする場合、どのサービスに対する追加なのかをはっきりさせることが重要であることがわかりました。

また、今回の新テーマ開発も、マイクロサービスの一部を変更、追加することで開発できます。

 

初歩的なものも含んだ、たくさんの質問に答えてくれた先輩方には感謝しかありません!

そして、設計方針を社内のFensiチームに相談し、フロントエンドの開発が始まったのが昨年の10月です。

 

4.新卒1人と共同で新テーマフロント実装


 

僕1人で開発は大変かつ、クリネクの任期が2019年内ということもあり、テーマ開発の協力者をCAMのフロントエンジニア全員に有志で募集したところ、セフィラスゥに強い情熱を持っていた、新卒の木戸さんが立候補してくれました。

 

木戸さんは別案件で既にFensi, LitElementの知見があったので心強い方です。

 

新テーマの実装内容は大きく2つです。

1 – Headless CMSに新テーマの”設計書”を登録する

2 – Headless CMSから、テーマの設計データを受け取り、オーナーサイトを構築する

Headless CMSとは、その名の通りhead(ビューが)less(無い)CMS(コンテンツを管理するシステム)のことです。

CMSと聞いて有名なのはWordPressかなと思います。

WordPressのテーマや、ページのHTML部分がなくコンテンツを登録する管理画面だけあると考えるとわかりやすいかなと思います。

viewが無いということは、viewは使い手が自由に構築することができます。

一見、わざわざviewを自分で作らなければいけなくて、逆に面倒なのでは?と思われるかもしれませんが、昨今様々なデバイスがあり、CAMでもスマートフォンブラウザ向けだけでなく、PC向け、ネイティブアプリ向けなど様々な開発案件があります。それに対応するためにはviewがHTMLだけだと困ることがあるためです。

 

そこでFensiではHeadless CMSを内製し、純粋なデータのみをそこで管理して見た目の仕様やデザインには全く関与しないようにしてあります。

 

また各フロントエンドも標準的なJSONデータでやり取りができ、サービス開発が柔軟に行えるようになったわけです。

 

Fensiのサービスでは、オーナーのコンテンツをそのHeadress CMSで管理しており、viewはFensiの各オーナーサイトというわけですね。

 

FensiのviewはLitElementで多くのコンポーネントを組み合わせて構築されていますので、開発では新テーマ用のviewコンポーネントを作っていくことになります。

LitElementはattributeによってデータをやり取りするWeb Componentsライブラリなので、cssの属性セレクターと組み合わせることで動的なスタイリングも可能となります。

 

今回のLitElementによる実装はいたってシンプルです。

新テーマ用のattributeによって、新テーマ用のstyleにするようにするだけです。

 

ですが、実際はそう簡単にはいきません。

大変だったのは、

– Fensiのフロントエンド構成の理解。

– 新テーマのデザインは、既存のテーマにはなかったグラデーションや、特徴的なタイトル、ボタンが盛り込まれていたので、うまく実装するのに工夫が必要だった。

– IE対応。

 

| Headless CMSから、テーマの設計データを受け取り、オーナーサイトを構築する

言葉だと簡単そうに見えますが、Headless CMSからどんな形式で、どのタイミングで、どこで受け取るのか、理解する必要がありました。

Fensiのマイクロサービスの一つに Static Site Generatorがあり、Fensiのオーナーページはそのジェネレータで生成しています。

以下の図の構成を理解するのに時間がかかってしまいました。

このようにFensiを解剖してみると、事前にエントリーファイルを静的なHTMLとしてS3にデプロイしており、ユーザーはもうすでに出来上がったファイルにアクセスするだけなので、とても最適化されていたことがわかりました!

 

– 新テーマのデザインは、既存のテーマにはなかったグラデーションや、特徴的なタイトル、ボタンが 盛り込まれていたので、うまく実装するのに工夫が必要でした。

 

ここは、木戸さんと協力して、進めていきました。

コンポーネントに追加したのは

新テーマのattributeの追加(gradation flag)

新テーマのstyle(postcssで記述)

です。

 

今まで、単色だった部分にグラデーションを当てられるようにコンポーネントを改修しました。

コンテンツ同士のつなぎのボーダーのグラデ化、ボタンのボーダーのグラデ化がメインで、

そのほかに新しいタイトルコンポーネントの追加や、背景模様を新しく作ったりしました。

 

例えば、

cssのborderpropertyはグラデーションをかけられないので、position:absolute × background-image propertyで書き換えたりしました。

 

新テーマ用のボタンやタイトルは、ボタンコンポーネントの派生でグラデ用のボタンコンポーネントを作成し、

タイトルコンポーネントの派生で特殊なタイトルコンポーネントの作成をしました。(HTMLの構造が変わるためcssだけでは困難だった)

 

| IE対応

これも調査に試行錯誤しました。

詳しくは、木戸さんのQiitaの記事をご覧ください!https://qiita.com/kidoyuna/items/a131294356f1e110b992

 

5.まとめ


リリースされているセフィラ・スゥの公式サイトはこちら 

クリネクデザイナー宮口さんが手がけた、今回のデザインテーマはVTuber向けに開発したので、他のテーマとは一味違ったpopなデザインに仕上がっております!

新テーマを使ったオーナーサイトは現在はセフィラ・スゥ限定ですが、近い将来すべてのサイトで使用できるようになる予定です!

 

– やってみて、感じたこと、成長したこと –

 

僕が担当業務では利用していない、LitElementを用いて開発ができたことやマイクロサービス化しているプロジェクトに触れることなど、とても勉強になりました。その中でも特に未経験がゆえにたくさん質問をしてしまった僕に対し、真摯に向き合ってくれたFensiのエンジニアチームにはとても感謝しています。また、その他

その中でも一番感じたのは、たくさんの方にお世話になったことです。

 

騒ぎ立てると介入してアドバイスをくれたfkeiさん、

僕らクリネクのケツを叩いて協力してくれたFensiチームのエンジニアの方々、

たくさん相談をさせてもらったセフィラ・スゥ運営チーム、

デザイン、スケジュールやマネジメントをしてくれたクリネクのメンバー、

一緒に開発してくれた木戸さん、

などなど

たくさんの方が関わってくれました。

 

コミュニケーション下手で、話しかけたり、自分の考えを伝えるのが苦手で、問題が起きても自分で解決してきたことが多かったのですが、今回の開発を通して、社内で自分からコミュニケーションが取れる人が増えたというのも良かったことだと思います。

聞かなきゃ進まない!という状況になってみて、初めて自分から色んなアプローチができるようになりました。

 

上記も成長なのですが、技術的な成長でいうと、

 

マイクロサービスというアーキテクチャでの開発が経験できたこと。

Headless CMSがどんなものか理解できたこと。

Fensiを理解できていなかった状況でスタートした「新テーマ開発」という大きめの実装でも、自分で調べ、聞き、考えて設計できたこと。

LitElementを使った開発が経験できたこと。

 

が自分の成長と自信になったかなと思います。今回クリネクとして、普段の業務でない、Fensiの開発を経験させていただき、マイクロサービスアーキテクチャは、各サービスがどうつながっているのか、構造を理解するのがとても大事だなと思いました。

 

今回のFensi以外にも、まだまだCAMには様々なドメインの事業や違う技術のサービスが多数あります。まだ関わったことのないサービスも今後携わる機会があれば、積極的に関わっていき、フロントエンドの理解を深めていけたらと思います。