# 今週何知った？ week:19

[](https://hackmd.io/CFlTER5rRHy37AW44sisZw)

> [name=makicamel]

## Resource Hints
- Resource Hints とは
> ［ UA により［ 接続されるべき生成元 ／fetch されるべきリソース ］］を指示するために利用されるリンク関係性の総称
[Resource Hints（日本語訳）](https://triple-underscore.github.io/resource-hints-ja.html)
- つまり、リソースをバックグラウンドで事前に接続を確立したり、読み込だりしておくことでページ遷移時のパフォーマンスを向上させる
- HTML の link 要素
- ユーザ入力やユーザの意図を見越して投機的に最適化することで待ち時間を省略する
- 以下の要素がある
- dns-prefetch
- preconnect
- prefetch
- prerender
- dns-prefetch, preconnect はリンクタグを入れたページ自体の高速化に役立つ
- prefetch, prerender はリンクタグを入れたページ自体の高速化ではなく該当ページから遷移するページの高速化に役立つ

### dns-prefecth
DNS による名前解決を早く行うことでページ読み込み時にかかる名前解決によるコストを下げる

<link rel="dns-prefetch" href="//example.com">

<!-- Amazon -->
<meta http-equiv='x-dns-prefetch-control' content='on'>
<link rel="dns-prefetch" href="https://images-fe.ssl-images-amazon.com">
<link rel="dns-prefetch" href="https://m.media-amazon.com">
<link rel="dns-prefetch" href="https://completion.amazon.com">

### preconnect
DNS ルックアップ、TCP ハンドシェイク、TLS ネゴシエーションまでを事前に処理する
- e.g. https://fonts.google.com/specimen/Dosis が推奨する link タグ

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Dosis:wght@700&display=swap" rel="stylesheet">

- ref [TCPハンドシェイク - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN](https://developer.mozilla.org/ja/docs/Glossary/TCP_handshake)
- ref [SSL を理解するための基礎ネゴシエーション](https://www.digicert.co.jp/welcome/pdf/wp_ssl_negotiation.pdf)
### prefecth
あらかじめめリソースをダウンロードしてキャッシュに格納する
リソースのサイズが大きい場合やネットワークが遅い場合などはブラウザはprefetchを行わない

<link rel="prefetch" href="//example.com/next-page.html" as="document" crossorigin="use-credentials">
<link rel="prefetch" href="/library.js" as="script">

### prerender
指定リンク先のページをダウンロード、DOM 構築、JavaScript の実行、CSS 適用、レイアウトなどまで行う

<link rel="prerender" href="//example.com/next-page.html">

### 参考
- [Resource Hints（日本語訳）](https://triple-underscore.github.io/resource-hints-ja.html)
- [resouce hintsとpreloadを使ってリソースの取得を最適化する | 69log](https://blog.kazu69.net/2016/03/19/optimize_resources_using_resoucehint_and_preload/)
- [少ない手間でそのWebページに適した手法で表示高速化ができるResource Hintsがすごい｜コラム｜メンバーズ](https://blog.members.co.jp/article/33474)

---

> [name=ken3ypa]

## おためしタイムテーブルSpreadsheet管理

## Motivation：
- タイムテーブル作成をmarkdown(in esa)で作成することがあるが、急な予定変更が入った場合にもすぐに対応できるようにしたい
- 現状だとあるイベントの時間を変更したり、予定を追加するとそれ以降のスケジュールをすべて手打ちで変更する必要がある
- 変更した際、誤記入や計算ちがいが起こりがちで、更新がなかなか大変…

### やってみたこと：
- Spreadsheetでタイムテーブルを作成し、それを iframe でesaに埋め込むようにした
- これにより、「所要時間」列に入力した数字をもとに時間を自動計算できる
- 所要時間が変更になったとき、予定が追加になったときなどの変更にも強い

### 参考にした記事：
- https://developer.mozilla.org/ja/docs/Web/HTML/Element/iframe
- https://tbpgr.hatenablog.com/entry/2016/11/02/233812
- https://kazumich.com/GoogleSheetsTTT.html

### Spreadsheetの作成とesaへの埋め込み：

元シート：https://docs.google.com/spreadsheets/d/1AwAwlkTiW1Oai6u2R4epkfObsMRNDkeq7E7wI_vXtro/edit#gid=0

<div class="timetable" style="width=100%;">
<iframe width="600px" height="400px"src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRHUUBfW01jN1n7e5d2sklDsstpn1twePD6n3zIH2x5l_tc8wX8LVh7qAH3MTgI78_Q1fXWLNlET2X-/pubhtml?hoge=1222;single=true&amp;widget=true&amp;headers=false"></iframe>
<div>

### 触ってみた感想：
- 時間を変更した際、時間が自動計算されるので、時間調整は圧倒的に楽
- 最初の読み込みは良いが、iframeのキャッシュが強すぎて、あとでタイムテーブルを更新したときにその差分がesa側に中々反映されない
- iframeで表示する際に、手打ちでCSS指定(width / height)が必要。そこはやや面倒

### 課題
- iframeのキャッシュ
- https://sutobu000.hateblo.jp/entry/20180227/1519657301
- 全部試したが無理。強すぎ…
- 変更に応じてiframe内の高さ・幅の自動調整