【GIG勉強会Vol.27】「Vue.jsのサーバーレスアーキテクチャについて」と「メディアサイト制作の基礎知識」2019-05-16ニュースこんにちは。先日開催された第27回社内勉強会も前回に引き続き、GIGのconnpassページ上で10名限定で社外の方も参加できる枠を設けました。前半はフロントエンドエンジニアの秋津辰弥さんが登壇し「大規模トラフィックに耐えるVue.jsのサーバーレスアーキテクチャについて」を解説してくれました。たつや):フロントエンドエンジニア。その後イベント・映像制作系企業に入社し、およそ1年半自社企画のイベント告知サイトを中心に構築と運用を担当。2017年10月末、GIGにジョイン。当日使用したスライドはこちらからご覧いただけます。サーバーレスアーキテクチャとはサーバーレスアーキテクチャとは、開発者がサーバーを使わないシステム設計です。一定のサーバー容量に依存せず、必要なリソースを動的に設定することでコスト削減につながります。今回のサービスでサーバーレスアーキテクチャを採用するとメリットは以下の通りです。秋津:「今回はトラフィックに波が激しくあることが予測されるサービスの設計だったため、一部サーバーレスのアーキテクチャを採用しました。通常のSPA開発との相違点APIの接続先が混在するフロント側でソートや配列の再形成等の処理を多くしている変数名をわかりやすくするユーザーアクションによって更新された情報をpostする回数が少ない良かった点DBの知識がなくてもファイルの有無や中身の状況を把握できるバックエンド開発環境を立ち上げる必要がないAPI通信がシンプル悪かった点GCS上にJSONファイルがないとエラーになるアクセスポイントが大量になるビジネスロジックが多くなる最後に今回の開発を振り返り、個人的にやりやすかった点を振り返ってくれた秋津さん。秋津:「インフラ側の管理工数がないので、フロントに注力することができたのは大きいです。DB確認ツール含め環境構築が楽でした。僕は途中からジョインさせていただいたので余計に感じていますが、最初にPCをセットアップする時もいろいろなツールを入れる必要がないのはありがたかったです」Q&AQ:GCSからJSONファイルが消えてしまう原因は?秋津:バッチ処理の改修やCMS側の改修が入っているタイミングだったり、コンテンツ自体の改修が入って登録する情報の変数名を変えてしまうことなどが原因として挙げられました。Q:一番苦労したことは?秋津:UX側の管理です。ここまでフロント側でビジネスロジックを記述したことがなかったので、処理の順序を始め、想定通りにいかないことがありました。Q:今回対応しているのはどんな種類のトラフィックか(バースト的に発生する、日毎にピークが存在するなど)秋津:両方です。オートスケールでHerokuにいくものが存在しないので、それを回避するためにGCSに逃しています。後半はディレクターの氏江知沙さんが登壇し「初心者向け!メディアサイト制作プロジェクトを進めるために知っておきたいこと」について解説してくれました。大学時代は、北陸地方の地域活性化やコンビニ商品を対象にブランディングの研究や、人材企業のインターンシップ生としてカフェの運営・イベント企画などを行う。卒業後、Web制作会社に入社し約1年を経て、2018年7月にGIGにジョイン。受託制作の企画・ディレクション・予算管理などに従事。当日使用したスライドは以下からご覧いただけます。「いろいろな職種の方がいるのでなるべくわかりやすく一般化して話したい」との言葉通り、噛み砕いて説明してくれた氏江さん。今回の発表の目的について共有がありました。「オウンドメディア」の特徴や目的とは?今回のモデルケースはオウンドメディア。オウンドメディアの特徴や目的について詳しく説明してくれました。氏江:「企業が所有・運営するメディアがオウンドメディアと呼ばれます。次に、制作段階で気をつけたいことを3つ教えてくれました。要件定義書を作る際にプロジェクトマネージャー・ディレクターがチェックすべき項目がこちらです!氏江:「参考は『フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと』のnote。次に商品開発の際に用いられるマーケティング手法をもとに、CMS開発について提案がありました。「コンセプトアウト」の考え方でCMS開発を氏江:「メディアは運用を通して価値を届けるサービスなので、どんなコンテンツを書くのかと同じくらいCMS開発・選択が大事です。氏江:「CMSは従来、開発者は開発に専念して、完成したらお客さんに運用してもらう流れが一般的でした。今回行なったのはコンセプトアウトの考え方に基づいたCMS開発。氏江:「管理画面って、誰かが作ってくれたから使うものではなくサービスそのものです。「要望をキャッチアップするのも大事だが、気をつけるべきことがある」と話す氏江さん。要望の本質を見よう氏江:「CMSの設計初期から運用メンバーを入れた結果、要望がめちゃくちゃ膨れ上がってしまいました。氏江:「PMやディレクターは、言われたことをそれをそのまま開発者に投げるのではなく、お客様が機能追加によって求めていることを一度考えたいですね。以前インタビューした制作の坂本さんも同じことを話されていました。チーム内で知見の共有がされているのですね。勉強会の後はお待ちかねの立食パーティー!勉強の後は食事が一層おいしくなります!発表で疑問に思ったことやフィードバックもその場ですぐにできるのでよい流れですね。ピザ片手に話が盛り上がった夜でした。GIGでは一緒に働く仲間を募集しています!GIGでは「一緒に学びながら成長していきたい!」と意欲のある仲間を募集しています。株式会社GIGの社員によって構成される編集部。GIG社員のインタビューや、GIGで行われたイベントのレポート、その他GIGにかかわるさまざまな情報をお届けします。USシステム開発、デザイン、WEBマーケティング支援、ウェブ制作などのお見積り、ご相談をお気軽にご連絡ください。制作実績WORKSWEB制作、システム開発、WordPress構築からマーケティング支援まで、GIGの制作実績をご覧ください。株式会社GIGは、Web制作、Webマーケティング、コンテンツ制作、サービス開発など、Web戦略をトータルで支援するデジタルコンサルティング企業です。フリーランスとプロジェクトをつなげるスキルシェアサービス「Workship」を展開しています。