vuejs-jp / vuefes-2019 Goto Github PK

ref: ティザーサイトの速度改善 · Issue #47 · kazupon/vuefes-2019

速度改善のヒントを探るため、 https://vuefes.jp/2019/ にチェックツールを使って、その結果をまとめます。

issueのゴール

• Lighthouse の計測結果をコメントする
• PageSpeed Insights の計測結果をコメントする

@potato4d @aytdm @Monkick @mtmtkzm @ryamakuchi @satotakumi @yinm @hisako135 @448jp CC: @kazupon

Vue Fes Japan 2019 は TypeScript で実装したいと思いますが、どうでしょう？

賛成 / 反対 / その他、皆さんの感触を教えてもらいたいです 🙏

理由 (1) 型を定義するコスト < メリット

vuefes-2018 を実装してみて、型を定義するコストよりもメリットのほうが上回ると感じた。（当たり前のことを言うようだけど）引数とか戻り値の型はあったほうが、安全なだけでなく、特に複数人で開発する場合は開発速度も上がると思う（型が書かれていたほうが、他の人が実装したコンポーネントやメソッドを使いやすい）

また、Nuxt 2.5.0 によって、TypeScript が公式サポートされたことにより、TypeScript 導入の敷居は下がったと思う。

Release Notes - Nuxt.js
https://nuxtjs.org/guide/release-notes

理由 (2) Vue / Nuxt コミュニティへの貢献

• Nuxt x ES2015+ で静的サイトを実装する例は vuefes-2018 を見てね
• Nuxt x TypeScript で静的サイトを実装する例は vuefes-2019 を見てね

というかたちになると、Vue / Nuxt コミュニティにも貢献できると思う（実装例を見たい層は一定数いると思う）

仕様

Vue Fes/2019/Webサイト/ティザーサイト仕様 - vuejs-jp.esa.io

プライバシーポリシーのページは、行動規範とほぼ同じなのでデザインは起こしていません。行動規範を流用してコーディングをお願いします

ティザーサイトにスピーカー情報を追加する。

ref: https://vuejs-jp.slack.com/archives/GENQVSDT3/p1561093572258500

期限

7/8（月）には公開したい。

@ryamakuchi

Copy from: Headless CMS を導入する · Issue #365 · kazupon/vuefes

解決したい問題

Vue Fes Japan 2018 の際、スポンサー情報の追加、変更のたびにソースコードを変更する必要が発生して面倒だった

問題を解決するために

• Headless CMS を導入して、スポンサー対応担当者が、スポンサー情報を CMS 上で編集すれば作業が完了できるようしたい
• CMS が編集されたタイミングで Netlify へ webhook を飛ばして nuxt generate が実行されるようにする
• nuxt generate 時に CMS の情報を API で取得し、最新のスポンサー情報がウェブ上に公開されるようになる

この Issue の完了条件

どのような Headless CMS があるか調査されていること

• https://headlesscms.org/ あたり？

Headless CMS が選定されていること

• 上記「問題を解決するために」が実現できること
• CMS での編集作業がしやすいこと
• 画像（スポンサーバナー）をアップロードできること
• 無料で利用できること
• ある程度メジャーであること（のちに情報を公開することを視野に入れる）
• Web サイト担当者のレビューを受けていること
• スポンサー対応担当者のレビューを受けていること（CMS での編集作業がしやすいか？）

Headless CMS を利用して 2019年のスポンサー情報を更新できる状態になっていること

• 2018年のスポンサー情報を CMS に移動させる必要はない
• master ブランチにマージされている必要はない。トピックブランチで動いていればよい

@kazupon @448jp @hashrock @potato4d @aytdm @ryamakuchi @yinm @satotakumi @Monkick @hisako135 @mtmtkzm

下記どうでしょう？

解決したい問題

Vue Fes Japan 2019 サイトから Vue Fes Japan 2018 サイトへ遷移した後に、2019 サイトへ戻る導線がない（ブラウザの「戻る」機能に頼るしかない）

案

案 (1)

Vue Fes Japan 2018 サイトから Vue Fes Japan 2019 サイトへのリンクを設置する。

案 (2)

Vue Fes Japan 2019 サイトから Vue Fes Japan 2018 サイトを開くときは target="_blank" で開くようにする。

検討

Nuxt generate（と PWA）を使っているので、2019 の中での遷移と、2018 の中での遷移については、ネットワークアクセスを生じさせずに回遊できる（= 速いし、オフラインにも対応している）

2019 から 2018 へ、あるいはその逆など、開催年を跨ぐと、ネットワークアクセスを生じる。

開催年をまたいで情報にアクセスしたい頻度がどれだけあるかは不明だが、メインは 2019 サイト内での回遊だと考える（特にティザーサイトではなく本番サイトリリース後は）ため、開催年をまたいだアクセスのしやすさの優先順位は落として、

• 同一の開催年サイト内での回遊のしやすさ
• サイトのメンテナンス・運用のしやすさ

を重視したい。とすると、案 (2) が妥当だと考えた。

参考

RubyKaigi では

RubyKaigi 2018 サイトには、過去の RubyKaigi への導線 はあるが、最新の RubyKaigi 2019 サイトへのリンクは見つからなかった。

なお、過去の RubyKaigi サイトについては、同じ rubykaigi.org ドメインだが target="_blank" で開くようにしている。

Node 学園祭では

Node 学園祭 2017 サイトには 2016 サイトへの導線はフッターにあるが、最新の 2018 サイトへのリンクは見つからなかった。

なお、過去の Node 学園祭サイトについては、同じ nodefest.jp ドメインだが target="_blank" で開くようにしている。

仕様

Vue Fes/2019/Webサイト/ティザーサイト仕様 - vuejs-jp.esa.io

Access セクションを追加する。

ref: https://vuejs-jp.slack.com/archives/GENQVSDT3/p1561093572258500

期限

7/8（月）には公開したい。

テスト実行時に下記の warning が出ているので修正する。

console.error node_modules/vue/dist/vue.common.dev.js:630
  [Vue warn]: Failed to resolve directive: lazy-container

仕様

Vue Fes/2019/Webサイト/ティザーサイト仕様 - vuejs-jp.esa.io

解決したい問題

Contentful でデータが更新（追加を含む）されたタイミングで、現状、Netlify で自動でビルドが実行されないこと。結果として Contentful でスポンサー情報が追加されても、手動でビルドされるまで Web サイトに反映されない。

問題を解決するために

Contenful と Netlify との連携設定を行う。

Contentful でデータが更新されたタイミングで Netlify で自動でビルドが実行されるようになる。結果、最新のスポンサー情報が Web サイトに反映される。

この Issue の完了条件

• Contentful から Sponsor データを取得する by ryamakuchi · Pull Request #55 · kazupon/vuefes-2019 がマージされること @ryamakuchi
• Contentful と Netlify との連携設定が完了すること（あとでどなたかにお願いします）
• Contentful でデータ更新後に、Web サイトに情報が反映されていることが確認されること @inouetakuya

手順

• Contentful にログイン後、ヘッダーから「Apps」メニューを選択する
• 「Enable alpha feature」ボタンをクリック
• Netlify を「Install」ボタンをクリックすると、連携画面へ遷移する

Netlify App – Contentful
https://www.contentful.com/developers/docs/extensibility/apps/netlify/

の Usage 以下に連携方法の手順が書かれている。

Step 2: Configure Netlify sites to build from Contentful

では、

• Netlify site: を vuefes-2019 にする
• Display name: を Production にする

解決したい問題

トップページ以外への導線が分かりにくい

問題を解決するために

グローバルメニューを作成する

デザイン

#134 (comment)

TEAM（Vue.js日本ユーザーグループのコアスタッフ一覧）に必要な素材について、Issue化しましたので、いったんリーダーの @inouetakuya をアサインします 🙏

解決したい問題

ティザーサイトに掲載する、TEAMで必要な、アイコン画像、ID（何の？）、リンク先といった各種素材を集めたい

このIssueの完了条件

何のIDにするかが決まること

• 昨年はTwitter
• GitHubと迷っている
  • エンジニアらしさならGitHub
  • 人となりが分かるならTwitter（ただし日本語限定）
• 何のIDにするかが決まれば自ずとリンク先は決まる

各種素材の集め方が決まること

• 昨年はオプトイン（esaに各自が入力してもらう）形式をとったが、全員分集まらなかった
  • 呼びかけを見逃すと入力する機会を逸する
• 今年はオプトアウト形式（基本掲載だが、掲載されたくない人は拒否できる）にしたいがどうか
  • 知らない間に意図せず載ってしまった、というケースを考慮すべき？
  • アイコンの解像度が足りない場合がありそうだがどうする？
• SlackのIDとTwitter（GitHub）のIDが違う人がいるので確認が必要

各種素材を集めること

• 上記集め方が決まったら、実際に動く

ティザーサイトの実装にあたり、各種原稿の叩き台を起こしましたので、各班のリーダーにチェックをしてもらいます。GitHubリポジトリにアクセス権がない人もいそうなので、Slackで進めます。
https://vuejs-jp.esa.io/posts/158

この Issue の完了条件

すべての原稿チェックが完了する

現在、下記のように、ヘッド画像が読み込まれてから、タイトルである「Vue Fes Japan 2019」がカクンと落ちるようになっている。

これを変更して、ヘッド画像が読み込まれる前からタイトルの位置を、ヘッド画像読み込み後と同じ位置に調整する。

参考

Vue Fes Japan 2018 ティザーサイトでは下記のように実装していた。

• https://github.com/kazupon/vuefes/blob/18f11d74db7bda916efb3c7195bb10c982843fe6/src/components/TheHeadImage.vue#L53-L68

.the-head-image {
  position: relative;
  padding-top: calc((1152 / 768) * 100%);

  @media screen and (min-width: $layout-breakpoint--is-small-up) {
    padding-top: calc((1080 / 1920) * 100%);
  }
}

.head-image {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
}

解決したい問題

Ticket セクションのボタンを有効化し、チケット購入ダイアログを表出するようにする

問題を解決するために

• 外部リソース（script ファイル）を読み込む
  https://www.universe.com/embed2.js
• ボタンのリンク先に Universe のチケット購入ページを指定する
  https://www.universe.com/events/vue-fes-japan-2019-tickets--YG3SMV

期限

2019/7/16（7/17 12:00 公開予定のため）

この Issue の完了条件

• ティザーサイト仕様 及び 原稿 に沿うよう修正する
  • Home ページ
  • 行動規範ページ
  • プライバシーポリシーページ
  • お問い合わせページ
• 沖さんによるレビュー（ティザーサイト公開まで Netlify が使えないので local dev 環境にて）
• レビューを踏まえて修正
• kazupon さんによる最終チェック
• 最終チェックを踏まえて修正

この Issue の対象外

• Netlify によるティザーサイト公開

デザイン

https://www.figma.com/file/BpIgcZdusbS3CgPHQhhK79T7/Vue-Fes-Japan-2019-Web

アバター画像

https://docs.google.com/spreadsheets/d/1pckLY7ojso6zYn9tJ3mcrww_4kZwj0lpnw-nA-0QNqQ/edit#gid=0

詳細: #133 (comment)

解決したい問題

本番サイト公開（7/17 水 12時）に向けて、実装を分担できるようにしたい。

問題を解決するために

vuefes-site というトピックブランチを作成し、本番サイト実装用のまとめプルリクを作成する。

子プルリクはそれぞれ vuefes-site からブランチを作成し、vuefes-site に対してプルリクエストを作成するようにする。

この Issue の完了条件

• 各分担タスクにそれぞれアサインされていること
• 本番サイト実装用のまとめプルリクが作成されていること
• 作業分担できる状態になっていること

仕様

Vue Fes/2019/Webサイト/ティザーサイト仕様 - vuejs-jp.esa.io

@potato4d @satotakumi @ryamakuchi @aytdm @yinm @mtmtkzm @Monkick @hisako135 @448jp

ティザーサイトの速度改善を行います。

どなたかチャレンジしたい方はいらっしゃいませんか？:raising_hand:

この Issue の完了条件

• 改善前の速度が計測されていること
• 速度が改善され、改善後の速度計測から、改善されたことが分かること
  • 複数の改善を行うのであれば、プルリクエストをそれぞれ別にすることを推奨
  • あとで探しやすいように 🚀 速度改善 のラベルを付けてください

スケジュールの目安

• 5月末からスポンサーを募集し、その後、スポンサー情報を追加したりなどの作業が発生するので、それよりも前に完了していることが望ましい。
• つまり「5月末に完了していること」を目安に進めていただきたいです〜 🙏

参考

Vue Fes Japan 2018 サイトでの速度改善。

• https://github.com/kazupon/vuefes/issues?utf8=%E2%9C%93&q=label%3A%22%F0%9F%9A%80+%E9%80%9F%E5%BA%A6%E6%94%B9%E5%96%84%22

仕様

Vue Fes/2019/Webサイト/ティザーサイト仕様 - vuejs-jp.esa.io

タイムテーブルの内容が決まり次第、サイトに反映させる。

また、これに伴い、セッション詳細ページに登壇会場と時間帯を追加する。

デザイン

• https://www.figma.com/file/BpIgcZdusbS3CgPHQhhK79T7/Vue-Fes-Japan-2019-Web?node-id=2%3A4

issue というより共有です:bow:（書く場所がよくわからなかったので、違っていたら指摘をお願いします）

Slack との連携はサイトの Settings → Form の Form notifications から行えました。
（Netlify にデプロイすると Form の機能が使えるようになります）

Slack の Web hook を設定するだけなので、チャンネルを作ってしまえばすぐできそうです:tada:

FYI：
お問い合わせ内容の一覧を csv ファイルでダウンロードする機能もついていました。
サイトの Forms → Active forms → contact 内の Submissions from contact から行えます。

入力内容の他に、IP address、User Agent が付加情報として付いていました

6/10あたりに一度

• プラン確定
• ロゴuploadのお願い(PRも?)
• 請求書については後ほど連絡します ref https://github.com/kazupon/vuefes/issues/389

あたりの連絡をする

Vue Fes Store のグッズデザイン情報（デザイン、値段）を掲載する。

デザイン

https://www.figma.com/file/BpIgcZdusbS3CgPHQhhK79T7/Vue-Fes-Japan-2019-Web

解決したい問題

• メインビジュアルの自動パターン切り替えを実装する。
• 画像が表示・非表示されたときにsrcにリクエストが飛んでしまう問題を解決したい。

問題を解決するために

• srcへのリクエストを抑え込む（base64化が有力？）

この Issue の完了条件

• パターン切り替えが実装されること

参考

• #49
• #62

仕様

Vue Fes/2019/Webサイト/ティザーサイト仕様 - vuejs-jp.esa.io

PR 文などを掲載した、スポンサー一覧ページを作成する。

デザイン

https://www.figma.com/file/BpIgcZdusbS3CgPHQhhK79T7/Vue-Fes-Japan-2019-Web?node-id=1080%3A3423

@448jp @potato4d @aytdm @Monkick @mtmtkzm @ryamakuchi @satotakumi @yinm @hisako135

Copy from: ティザーサイト 2019 公開までのスケジュール · Issue #362 · kazupon/vuefes

ティザーサイト公開に向けておよそのスケジュールを決めるための Issue です。

スケジュール

• ティザーサイト 2019 の実装着手前の準備が完了（Nuxt バージョンアップなど）- 3/10（日） @inouetakuya ほか有志
• デザイン試作 @448jp
• 3月定例 MTG にてデザインのレビュー（3/15 〜 3/22 のいずれか）
• レビューを受けてデザイン更新（いつ頃になるか要確認） @448jp
• ダミーページ用のファイルを作成して、作業分担できる状態になること - 4/12 @inouetakuya
• 各ページ / コンポーネントの実装（4月中にマージ）
• @kazupon @448jp による最終レビュー
• 5月中旬（できれば上旬）公開

この Issue の完了条件

ティザーサイト 2019 が公開されていること

コメント

by @448jp

https://github.com/kazupon/vuefes/issues/362#issuecomment-466779306

@inouetakuya
はい、概ね問題ないと思います。このデザインプロセスで外せないクリティカルパスとして、以下が挙げられそうです。

1. @kazupon のお言葉
   • https://vuefes.jp/about/ に掲載する用
   • これは私がゴーストライターして最後に @kazupon チェックでもよさそう
2. 開催日と開催場所の確定
   • 未定でもいいけど、その段階ならティザーサイトは早そう
3. Evan You来日有無の確定
   • @masahirotanaka 確認中、のはず
4. スポンサー募集、CFP募集、チケット発売の大まかなスケジュール確定
   • ○月ごろ、くらいの感じでもいいと思います

とはいえ試作自体は始められるので、徐々に進めていきます！

by @448jp

https://github.com/kazupon/vuefes/issues/362#issuecomment-466790804

とりあえず上記が決まったと仮定して、構造だけ作ってみました。
https://xd.adobe.com/spec/23f44539-6967-4bfa-70fb-ca6d6f36826e-55c5/

by @kazupon

https://github.com/kazupon/vuefes/issues/362#issuecomment-466820323

@448jp
スポンサー向け資料、まだ WIP ですが、カンファレンス趣旨概要 というところがベースになると思います。
https://docs.google.com/presentation/d/1YSr_QVUUKZmkYMBICE3mIQl2Um9OXfeS2AKgiOHX4Ds/edit#slide=id.g4dd500c082_1_5

by @448jp

@kazupon ありがとうございます、これをもとにゴーストライターします 👻

by @inouetakuya

@yinm @ryamakuchi @aytdm @potato4d @hisako135 @mtmtkzm @Monkick @satotakumi

どなたかに担当してもらいたいなーと思うタスクに welcome contribution というラベルを付けました（今後もそんな感じでいきます）

• https://github.com/kazupon/vuefes-2019/labels/%3A%2B1%3A%20welcome%20contribution

どなたかやってみたいという方、いらっしゃいませんか？

やってみたいという方、それぞれの Issue（welcome contribution ラベルが付いた Issue）にコメントくださいー 🙏

解決したい問題

プライバシーポリシーの問い合わせ先が [email protected] になっているので、新しいアドレスにしたい。@vuefes.jp はもう使わない方針。

問題を解決するために

プライバシーポリシーの問い合わせ先を [email protected] に変更する

この Issue の完了条件

プライバシーポリシーの問い合わせ先を [email protected] に更新する

参考

@448jp @yinm @aytdm @ryamakuchi @mtmtkzm @Monkick @satotakumi @hisako135 @potato4d CC: @kazupon

welcome contribution ラベルと help wanted ラベルは必ずしも同じ意味ではないのですが、用途が重複する場合が多々あり、紛らわしいので、help wanted に統一します。

TODO

• Vue Fes の Web サイト班に周知する
• welcome contribution ラベルが付いている Issue に help wanted ラベルを付ける
• welcome contribution ラベルを削除する

Fix: #9 (comment)

https://nuxtjs.org/guide/typescript#from-javascript-to-typescript にしたがって nuxt.config.js -> nuxt.config.ts へ変換したところ、ESLint のエラーと TypeScript のコンパイルエラーが発生したため一旦 Revert している。その修正対応。

仕様

Vue Fes/2019/Webサイト/ティザーサイト仕様 - vuejs-jp.esa.io

この Issue の完了条件

• https://vuefes.jp/2019/ にアクセスすると Vue Fes Japan 2019 のティザーサイトの内容が表示されること
• https://vuefes.jp/ にアクセスすると https://vuefes.jp/2019/ へ 301 リダイレクトされること
• https://vuefes.jp/2018/ へアクセスすると Vue Fes Japan 2018 サイトが表示されること

関連 Issue

ティザーサイト公開までのスケジュール · Issue #1 · kazupon/vuefes-2019

5月中旬（できれば上旬）公開

仕様

Vue Fes/2019/Webサイト/ティザーサイト仕様 - vuejs-jp.esa.io

アバター画像

Vue Fes/2019/Webサイト/スタッフ - vuejs-jp.esa.io
https://vuejs-jp.esa.io/posts/169

チケットセクションを追加し、7/1（月）12時 に公開する。

ref: Vue Fes/2019/チケット担当/チケット販売のアナウンス - vuejs-jp.esa.io

• https://vuejs-jp.slack.com/archives/GENQVSDT3/p1559089316045800?thread_ts=1559083923.036100&cid=GENQVSDT3
• https://vuejs-jp.slack.com/archives/GENQVSDT3/p1559217510012000?thread_ts=1559135689.075400&cid=GENQVSDT3

あたりを追って、ティザーサイトからスポンサー募集フォームへの導線を作成する。

どなたか担当してくれる人〜？

実現方法はひとつではないと思いますが、参考までに Nuxt 公式ドキュメントのリンクを貼っておきます。

API: hooks プロパティ - Nuxt.js
https://ja.nuxtjs.org/api/configuration-hooks#root-%E3%81%A7%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88%E3%81%AF-router-base-%E3%81%AB%E3%83%AA%E3%83%80%E3%82%A4%E3%83%AC%E3%82%AF%E3%83%88%E3%81%95%E3%81%9B%E3%82%8B

@aytdm

Copy from: お問い合わせフォームを作る ・ Issue #363 ・ kazupon/vuefes

by @448jp

メールアドレスを vuefes.jp ではなく、 gmail.com に変更して誰でも対応できるようにする、という話がありましたが、そもそも（広い対象からの）問い合わせ先をメールアドレスではなくお問い合わせフォームにしておけばよいのでは、と思いました。

Netlify Formsですと無料プランで100件/月の送信まで対応できるので、これでよさそうかなーと思うのですが、いかがでしょうか？
@inouetakuya @kazupon @k-miyake @hypermkt
https://www.netlify.com/docs/form-handling/

この Issue の完了条件

• Vue Fes/2019/Webサイト/原稿 - vuejs-jp.esa.io の内容をもとに各ページを修正する
  • TOP ページ
  • 行動規範ページ
  • プライバシーポリシーページ
  • お問い合わせページ

@kazupon @448jp @inouetakuya

ティザーサイトの最終調整（リファクタリング含む） · Issue #36 · kazupon/vuefes-2019 が終わったら対応するので、esa に書いてある OGP の内容で問題ないかだけチェックしてもらえるとうれしいです 🙏

@syumai @inouetakuya @448jp

解決したい問題

技術同人誌企画への応募を増やす為、トップに動線を追加したい

問題を解決するために

下記の文章を、Vue Fes Storeの説明セクション内に追加させてください。

今回、技術同人誌を委託販売できる「技術同人誌販売コーナー」を企画しております。
会場内に立ち読みブースを設置し、気に入った本があれば会場で購入できます。
詳細はこちら（※リンク）

リンク先は下記とします。

• https://note.mu/hashrock/n/n50fc189c0c5e

この Issue の完了条件

• PRを作成する @hashrock
• マージ

https://vuejs-jp.slack.com/archives/GENQVSDT3/p1557889295231700

現象

Chrome Dev Tools で Disable cache にチェックを入れた状態で、

https://vuefes.jp/2019/ へアクセスしたときに https://vuefes.jp/2019/_nuxt/img/2d41e4e.png へ無限にリクエストが飛ぶ。

解決したい問題

トップページ以外（ex. 行動規範など）に遷移したあと、ブラウザで再読み込みを行うと、フッター内の「メニュー」の各種リンクのパスがズレてしまう

例えば、行動規範のパスは https://vuefes.jp/2019/code-of-conduct が正しいものですが、上記の手順では https://vuefes.jp/2019/code-of-conduct/code-of-conduct になってしまいます。再読み込みだけでなく、直接URLにアクセスしたときも同様です。

WindowsのEdge（Dev版）、Chrome、Firefoxで確認済みです。

問題を解決するために

nuxt-linkで指定しているパスをルートパスで指定する？（他によい方法があれば、なんでもよいと思います😃）

Nuxtの標準的な作法がよくわかっていないのですが、私はいつもルートパスで指定しています。

この Issue の完了条件

解決したい問題がクリアされていること

仕様

Vue Fes/2019/Webサイト/ティザーサイト仕様 - vuejs-jp.esa.io

TIME TABLE セクションを追加する。

ref: https://vuejs-jp.slack.com/archives/GENQVSDT3/p1562404701138700?thread_ts=1561626442.407300&cid=GENQVSDT3

デザイン

https://www.figma.com/file/BpIgcZdusbS3CgPHQhhK79T7/Vue-Fes-Japan-2019-Web?node-id=36%3A453

期限

なる早が望ましいが、遅くとも下記のイメージ。

• 7/10（水）には実装を完了させてレビューを依頼する
• 7/11（木）レビューにもとづく更新
• 7/12（金）12時ごろ公開

下記あたりを追いつつ、実装する。

• https://vuejs-jp.slack.com/archives/GENQVSDT3/p1559135689075400
• https://xd.adobe.com/view/c3b354c5-4678-4d80-4693-32453b5de869-b582/

#11 の残件を分離したものです。

• アニメーションを実装し、 @448jp に調整を依頼
• @hisako135 の選定した写真を表示できるようにする
• @hisako135 のパターン変更仕様を満たす
• グラデーション方向の修正

@potato4d @aytdm @Monkick @mtmtkzm @ryamakuchi @satotakumi @yinm @hisako135 CC: @kazupon

https://github.com/kazupon/vuefes/issues/377#issue-420015809

どうやって実現するか？

の続きです。

https://vuefes.jp/2018/* へのアクセスを vuefes-2018 へ転送させる方法について検討します。

候補

案 (1) Netlify の Proxy 機能

https://www.netlify.com/docs/redirects/#rewrites-and-proxying

試験的に動かしてみたのが下記:

• https://netlify-proxy.netlify.com/2019/
• https://netlify-proxy.netlify.com/2018/

ソースコード

• https://github.com/inouetakuya/netlify-proxy-2019
• https://github.com/inouetakuya/netlify-proxy-2018

案 (2) CloudFront の Multi Origin

• CloudFront ウェブディストリビューションを使用して、複数のオリジンからコンテンツを配信
• 料金 - Amazon CloudFront | AWS
  • 無料利用枠の「50 GB のデータ送信」については、12か月間のみなので、それを超えると有料だと解釈した

案 (3) その他

有料だったら何でもアリだけど、無料に限定すると、何か他にあるのか、ちょっと分からない。

検討

案 (1) がよさそう。理由は下記。

• 無料
• Netlify のみで完結して、構成がシンプル
• パフォーマンスや可用性などの観点からも問題ないと判断

どうでしょう？

ref: ティザーサイトの速度改善 · Issue #47 · kazupon/vuefes-2019

WebPagetest で改善前の https://vuefes.jp/2019/ と比較対象サイトの速度を計測する。

計測方法

Tokyo, Japan - EC2 - Chrome - Cable で計測する
FMP はビジュアルの履歴を見て、ファーストビューが表示されたタイミングを判定する
WebPagetest では 3回計測されるので、Load Time が2番目のものの FMP を調べる

issueのゴール

• Vue Fes Japan 2019 トップページの FMP を計測する
• Vue Fes Japan 2018 トップページの FMP を計測する
• 阿部寛のホームページの FMP を計測する