inabagumi-archive / animare.cafe Goto Github PK

Server-Side Rendering を行わずに生成した静的リソースの配信しか行っていないため、XSSなどの外部からの不正な埋め込みを受ける可能性は低い。しかし複数の外部ライブラリーを使い、また v-html 属性も複数箇所で利用しているため DOM-Based XSS の可能性は否定できない。

外部の攻撃者から盗み出されるような個人情報はそもそも得ていない。攻撃をされたとしても大きな問題は発生しないものと思われる。そのため優先度はとても低い。

影響範囲を調べつつ、必要なものだけを許可するようにしていきたい。

なお Netlify 用に _headers を、Firebase Hosting 用に firebase.json をそれぞれ編集しなければならない。

aria-* 属性を追加してアクセシビリティへの配慮を行いたい。

Screenshot

Screenshot

404などのエラーページでフッターに表示されるメンバーの個別リンクが空になってしまっている。

スクリーンショット

Nuxt.js ではページの移動時に History API が使われているため、Google Analytics 側で用意されている通常の方法では初期レンダリング時の情報しか取得されない。Nuxt.js には Google Analytics のモジュールも用意されているので、そちらを使って対処したい。

日本語で明朝体 (Serif体) を使っている箇所では英語でもSerif体を使って統一感を持たせるようにしたい。

Noto Serifを使うので良いと思う。

Google Analytics の導入 (#13) の際に必要となるもの。Google Analytics を導入するためには閲覧者の行動をトラッキングするためにクッキーが必要となる。プライバシーポリシーを書き、利用目的を明確にしておかなければならない。

現状の言語切り替えは

English | 日本語

のように切り替えのリンクが常時表示されるようになっている。どうしてもヘッダーにおいて占有する面積が多くなってしまっているので、これを隠蔽したい。

ヘッダーにはボタンを一つだけ配置するようにして、そこをクリックして始めて切り替える言語が選べるようになると良いと考える。

トップページと各メンバーのページにシェア用に複数のSNSへとURLの投稿ができるボタンを追加したい。

• https://material.io/design/components/cards.html

不正なコードが本番環境へのデプロイと紐付いた master ブランチに混入してしまわないように、Pull Request が merge される前に機械的なテストも実行されるようにしておきたい。

yarnpkg/yarn#5891 によれば registry.yarnpkg.com は今後推奨されない。npm 標準のレジストリである registry.npmjs.org からパッケージをインストールするようにしたい。

• https://kazupon.github.io/vue-i18n/guide/lazy-loading.html

• https://github.com/nuxt-community/sitemap-module

詳細な仕様や表示場所については別途考える。

どのような仕様になるにせよ YouTube から情報をリアルタイムに取得する Web API も必要になるので、先にそちらを開発しなければならない。無料枠に収め切ることが不可能で、かつコールドスタンバイで起動コストの高い Cloud Functions は避けたい。