【GIG勉強会Vol.27】「Vue.jsのサーバーレスアーキテクチャについて」と「メディアサイト制作プロジェクトを進めるために知っておきたいこと」

先日開催された第27回社内勉強会も前回に引き続き、GIGのconnpassページ上で10名限定で社外の方も参加できる枠を設けました。

当日は真冬のような寒さでしたが、足元が悪い中ご来場いただきありがとうございました！

前半のテーマは「大規模トラフィックに耐えるVue.jsのサーバーレスアーキテクチャについて」

前半はフロントエンドエンジニアの秋津辰弥さんが登壇し「大規模トラフィックに耐えるVue.jsのサーバーレスアーキテクチャについて」を解説してくれました。

秋津 辰弥（あきつ たつや）：フロントエンドエンジニア。 総合学園ヒューマンアカデミーを卒業後、職業支援学校にてWeb制作を習得。 その後イベント・映像制作系企業に入社し、およそ1年半自社企画のイベント告知サイトを中心に構築と運用を担当。2017年10月末、GIGにジョイン。

当日使用したスライドはこちらからご覧いただけます。

サーバーレスアーキテクチャとは

サーバーレスアーキテクチャとは、開発者がサーバーを使わないシステム設計です。一定のサーバー容量に依存せず、必要なリソースを動的に設定することでコスト削減につながります。

今回のサービスでサーバーレスアーキテクチャを採用するとメリットは以下の通りです。

• サーバーでの処理を極力最小限に抑えて、必要な時に必要なだけインフラを利用できる
• インフラの管理・運用を気にしなくていいので、その他のタスクに集中できる

今回のサービスの概要

秋津：「今回はトラフィックに波が激しくあることが予測されるサービスの設計だったため、一部サーバーレスのアーキテクチャを採用しました。リクエストが最大どれくらい来るのか、メモリはどう制御するのか、運用してから想定より多くリクエストが来てしまった時どう対応するのかなど、インフラ側の諸々のタスクを考えなくても問題ない構成にしました」

今回の開発環境

通常のSPA開発との相違点

• APIの接続先が混在する
• フロント側でソートや配列の再形成等の処理を多くしている
• 変数名をわかりやすくする
• ユーザーアクションによって更新された情報をpostする回数が少ない

良かった点

• DBの知識がなくてもファイルの有無や中身の状況を把握できる
• バックエンド開発環境を立ち上げる必要がない
• API通信がシンプル

悪かった点

• GCS上にJSONファイルがないとエラーになる
• アクセスポイントが大量になる
• ビジネスロジックが多くなる

最後に今回の開発を振り返り、個人的にやりやすかった点を振り返ってくれた秋津さん。

秋津：「インフラ側の管理工数がないので、フロントに注力することができたのは大きいです。DB確認ツール含め環境構築が楽でした。僕は途中からジョインさせていただいたので余計に感じていますが、最初にPCをセットアップする時もいろいろなツールを入れる必要がないのはありがたかったです」

Q&A

Q：GCSからJSONファイルが消えてしまう原因は？

秋津：バッチ処理の改修やCMS側の改修が入っているタイミングだったり、コンテンツ自体の改修が入って登録する情報の変数名を変えてしまうことなどが原因として挙げられました。

Q：一番苦労したことは？

秋津：UX側の管理です。ここまでフロント側でビジネスロジックを記述したことがなかったので、処理の順序を始め、想定通りにいかないことがありました。

Q：今回対応しているのはどんな種類のトラフィックか（バースト的に発生する、日毎にピークが存在するなど）

秋津：両方です。オートスケールでHerokuにいくものが存在しないので、それを回避するためにGCSに逃しています。

後半のテーマは「初心者向け！メディアサイト制作プロジェクトを進めるために知っておきたいこと」

後半はディレクターの氏江知沙さんが登壇し「初心者向け！メディアサイト制作プロジェクトを進めるために知っておきたいこと」について解説してくれました。

氏江 知沙（うじえ ちさ）：ディレクター。大学時代は、北陸地方の地域活性化やコンビニ商品を対象にブランディングの研究や、人材企業のインターンシップ生としてカフェの運営・イベント企画などを行う。卒業後、Web制作会社に入社し約1年を経て、2018年7月にGIGにジョイン。 受託制作の企画・ディレクション・予算管理などに従事。

当日使用したスライドは以下からご覧いただけます。

メディアサイト制作プロジェクト を進めるために知っておきたいこと from GIG inc.

発表の目的

「いろいろな職種の方がいるのでなるべくわかりやすく一般化して話したい」との言葉通り、噛み砕いて説明してくれた氏江さん。

まずは今回の発表の目的について共有がありました。

「オウンドメディア」の特徴や目的とは？

今回のモデルケースはオウンドメディア。オウンドメディアの特徴や目的について詳しく説明してくれました。

氏江：「企業が所有・運営するメディアがオウンドメディアと呼ばれます。既存のプラットフォームを利用する場合と違って、デザイン、記事の見た目、機能などがコントロール可能なのが大きな特徴です」

次に、制作段階で気をつけたいことを3つ教えてくれました。

プロジェクトメンバー全員がわかる要件定義書を作ろう

氏江：「メディアは運用して価値を届けるサービスなので、長い運用に備えて最低限のことはサクッと終わらせていかに磨き上げる時間を取ることが重要です」

要件定義書を作る際にプロジェクトマネージャー・ディレクターがチェックすべき項目がこちらです！

氏江：「参考は『フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと』のnote。わかりやすくまとめてあったのでおすすめです」

次に商品開発の際に用いられるマーケティング手法をもとに、CMS開発について提案がありました。

「コンセプトアウト」の考え方でCMS開発を

氏江：「メディアは運用を通して価値を届けるサービスなので、どんなコンテンツを書くのかと同じくらいCMS開発・選択が大事です。正しい開発を行うためには、開発初期からクライアントに入ってもらうのがいいかなと思っています」

氏江：「CMSは従来、開発者は開発に専念して、完成したらお客さんに運用してもらう流れが一般的でした。しかし、今回行なったのはコンセプトアウトの考え方に基づいたCMS開発。社内メンバーだけでなく、運用するクライアントにも開発初期から入ってもらいました」

氏江：「実際に行なってみてのメリットとしては、クライアントが運用・入稿する疑似体験をできるので、ちょこちょこ修正ができたので楽だったというのと、入稿することを自然とイメージする機会があるので必要な素材・図表・モジュールを考えるきっかけを与えられたことです」

氏江：「管理画面って、誰かが作ってくれたから使うものではなくサービスそのものです。良いサービスや良い価値を届けるための唯一の手段だと思っているので、初期から運用メンバーも巻き込んで爆速で回せたのは良かったと思います」

「要望をキャッチアップするのも大事だが、気をつけるべきことがある」と話す氏江さん。

要望の本質を見よう

氏江：「CMSの設計初期から運用メンバーを入れた結果、要望がめちゃくちゃ膨れ上がってしまいました。要望を受ける前に、ディレクターも開発も一旦立ち止まることが大事かなと思います」

氏江：「PMやディレクターは、言われたことをそれをそのまま開発者に投げるのではなく、お客様が機能追加によって求めていることを一度考えたいですね。制作・開発陣のみなさんも、一緒に考えてもらえたらと思います」

氏江：「その要望が、追々出てくる別の要望と相反するものにならないのか、データベースやセキュリティやSEOにどんな影響を及ぼすのか、もし悪影響があるのであればその課題を解決するために他にどんなアプローチがあるのかなどを一緒に考えられたらいいですね」

以前インタビューした制作の坂本さんも同じことを話されていました。しっかりチーム内で知見の共有がされているのですね。

勉強会の後はお待ちかねの立食パーティー！

勉強の後は食事が一層おいしくなります！発表で疑問に思ったことやフィードバックもその場ですぐにできるのでよい流れですね。
ピザ片手に話が盛り上がった夜でした。

GIGでは一緒に働く仲間を募集しています！

GIGでは「一緒に学びながら成長していきたい！」と意欲のある仲間を募集しています。

興味のある方はWantedlyからどうぞ！