Android用のホーム画面に追加したとき用アイコンを設定しようとしたら反映されなくて困った
AndroidにもiPhoneにも、webサイト（URL）をホーム画面に追加する機能がある。
この時、HTML上で適切な設定ができていれば任意のアイコンでホーム画面に追加できる。
（設定していなければサイトの頭文字かなにかで設定される）
Next.jsのプロジェクトで設定していたのだが、iPhoneは下記の記述でうまくいくがAndroidでは設定されないとの連絡をもらった。
<link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="icon" type="image/png" href="/android-touch-icon.png" />
ファイル名を変えてもsizeを設定しても一向に反映されない。
結論、絶対パスを指定することで解消することができた。
<link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <link rel="icon" type="image/png" href="https://ドメイン/android-touch-icon.png" />
上記設定は_documentファイルに記述する必要があり、サーバーサイドで実行されるため、クライアント側で動的にドメインを取得することはできない。
このため、.envにドメインの設定を記述する必要がある。
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" href={`${process.env.APP_URL}/android-touch-icon.png`} />↑こんな感じ。https://とドメイン部分を合わせておけば他の場所でも使えることがある かもしれない
もしブランチごとに環境を作成してい場合であれば、
それぞれで使用している.envに環境ごとのドメイン（URL）を設定すればよし。
ちなみにこれだと今までfavicon.icoという名前のファイルをpublic/images配下に設置すれば適用されていたファビコンが、
Androidのアイコンで上書きされてしまうため、favicon用の設定を追記する必要がある。
<link rel="icon" href="/favicon.ico">
アイコン設定参考元：
スマホ向けのファビコンを設定する | GRAYCODE HTML&CSS
はやぶさ新八御用帳をよんだ
時代小説に苦手意識があった。
だが、母が好きで勧められたので読んでみることにした。
一応、しゃばけシリーズは好きで読んでいた（これも母から勧められた）ので、
それが読めればこれも読めそうな文体でよかった。
（鬼平犯科帳は挫折済。）
面白いのだが、新八郎がちょっと恋愛的に最低な奴なので終わりも恋愛的に最低な感じで終わった。
恋愛、なくて、いい！！！！
恋愛ものが苦手な私にとっては少し辛い…
事件だけ解決して恋愛をいれるなら幸せな方にしてくれ…
明らかにどうにもならなさそうな関係で最低なのでそういうのが地雷の人にはあまりお勧めできない
人間の感情的に全くなくすことはできないが、エンタメとしてまで楽しまなくていい…という人には、だ
しかし全体としては人気シリーズだけあってやっぱりおもしろい。が、メインは新八郎とお鯉の恋愛模様！だった！！
プロジェクト立ち上げの話（webサービス）
プロジェクト立ち上げのタイミングで参画したので、
最初に決めておくとよいものや心に留めておくとよさそうな事柄を順不同で記載。
・ブランチ戦略
自分が思っていた方法がセオリーの運用だと思っていたらそうじゃなかったこともある。
セオリーと異なる方法を選択する場合でもそうでなくとも、ドキュメント化しておくことで確実に混乱を避けられる。
また、git自体の運用も（例: developブランチに最新の変更をマージする）明確にすると良い。
今のプロジェクトではある程度走り出したら大きな機能（スクラムなのでスプリントが跨るようなものは大きい機能として判断している）は開発ブランチをきってそこに集約するようにしている。どこでバグが出たかわかりやすくなる。
・キャメルケースなのかスネークケースなのか
永遠の論争。フロントエンドとバックエンドで一貫性を保つ必要は私はないと思うが、
一定のルールはあったほうがよい。
後々気持ち悪くならない。
自分はキャメルケースで書くことが多いが本当に正解はわからない
・仕様書に漏れが多い場合が多い
立ち上げ時となると特に考えることが多く、
最初に仕様をあれこれと決めていても実装し始めてから仕様が固まっていない箇所があることに気づくことが多い。
見積もりは余裕をもって行ったほうが良い。
途中で仕様自体が変わることも多く、このあたりは立ち上げ特有な気がする。
・急いでいるときこそドキュメント（場合による）
立ち上げ時はバタバタしているので、
暗黙の了解のような仕様が生まれてしまうことがある。
そのままコードとして残っていると、
落ち着いたころ「なんでこれこうなっているんだっけ？」となりがちなのだ。
本当に切迫した状況であれば致し方ないが、暗黙の部分はなるべく文書化しておくと後々困らない。
絶対にリファクタは入るものなのだ
・モックサーバーが便利
stoplight/prismという、OpenAPIのyamlファイルからモックサーバーを作成できるアプリがある。
事前に定義ファイルに記載しておくとPreferヘッダーにステータスコードを指定すれば任意のレスポンス（例:404エラーなど）にもできるので、
バックエンドはこれを作成してから開発に移るとフロントとの連携がとりやすい。
開発時にバックエンドの開発を待つ必要もなくなる。
これは立ち上げに限った話ではないが、立ち上げ時はのんびりバックエンドの開発を待ってる間に他のことを、などということはまずできないため。
・リリーススケジュール
これは立ち上げに限らないことだが、
決まっていることが多いのに結構重い機能が直前まで共有されないまま唐突に来週リリース予定でと言われたりするので、
いつなんの機能をリリースするのか早めに確認をとって、
最悪納期を伸ばすか仕様を妥協するか決めたほうが良い。
共有ブランチにマージするときも事前にリリースする範囲がわかればrevertやらcherry pickやら面倒なことが減る。
・予定は未定になりがち
最初はリリースする予定だった機能を途中で取りやめたり、
確実に必要不可欠な仕様が抜け漏れていて追加で実装する必要があったりしがちで、
かなり予定がずれ込むことが多い。
想定していた機能の総数の半分ほどでリリースに踏み切ることも多いので、
仕様を決める人と開発は早い段階で認識をすり合わせないと残念なことになる。
十角館殺人事件をよんだ
ずっと前から読んでみたかった十角館の殺人を読んだ。
著者である綾辻行人さんの作品を読んだことがなかったのだが、グロめだと聞いていたので心が元気な時にしようとずっと後回しにしていた。
私のように、刊行されたのが結構前でも読んだことがないという人は多いと思うので、
ネタバレを避けて感想を書く。
ちなみにずっとカーのことを力一と呼んでいた。youtubeの見過ぎである
実は私は何人も登場人物が出てくる話が苦手だ。わけがわからなくなってしまうので。
メインとなる人たちは少なくとも７人いて、それを取り巻く人を含めると結構な人数になる。
私自身の認識の問題なので、理解するのに少し時間がかかった。
しかしきちんと理解しておくことで、やはりこの作品が傑作であることを感じられたので頑張ってよかった…
今作、建物や殺人現場の図が挿絵になっている。
自分はミステリを推理しながら読めない（読まないのではなく、読めないのだ）のだが、
推理しながら読む方にとっては面白いのではないだろうか。
ミステリは何作か読んだが、図があるのは見たことがなかった。
うわさに聞いていたトリックもよかった。
そう聞くと大抵なんとなくわかってしまうので、下手に疑わないで読むのが私は好きだ。
本が全部教えてくれるので全部教えてくれるじゃん！という気持ちです
結末についてはそうなるのか、という気持ち。
報われないなと思ったが、回収という意味では綺麗にまとまったと思う。
スマホとPCでブラウザの挙動（見た目）が違うので辛いという話
Next.jsにはあまり関係がないかもしれないが、念のためNext.jsのプロジェクトでのこと
・セレクトボックスにdisabledが付いてる
最初の選択肢をdisabledにして、プレースホルダのように見せることがよくあると思う。
そのせいかは不明だが、PCのChromeで見たときは特に違和感ない見た目だったが、
iPhoneのSafariで見たときにグレーアウトしていてdisabledになっているように見える。
実際問題なく選択できるためdisabledにはなっていないのだが、明らかに見た目としてアウト。
これはbackground-colorにwhiteを指定すれば、異なるブラウザやデバイスで一貫した見た目にすることができた。
・下部分が見切れている
スマホで見たときに起こりがちな問題だと思われる。
もちろんPCのChromeのエミュレータでは起きない問題で、
画面下部のコンテンツが見きれて表示できない現象だ。
これはheightに100%を指定すれば改善されるはずだ。
・スペックを気にする
PCだとサクサク動いていてもスマホだともっさりしたり画面の描写が遅いということがある。
スマホ向けで開発しているのであれば、スマホでの挙動はかなり意識し、パフォーマンスの最適化を優先したほうが良い。
・横画面になった時（いろんな画面幅に対応する）
スマホユーザーであれば横画面でwebサイトを閲覧することもあるだろう。
その時、あまり意識していないサイズ感でみることになる。
この場合、フレキシブルレイアウトを意識した構成にしておくとそこまで気にならない。
逆に、画面幅がとても狭くなった場合でも対応できる（ある程度の妥協は必要になってくるが）。
openAPI v2 (Swagger) だとprismでmockした時にbasepathは適用できない話
basepathという項目がopenAPI（v2）にはある。
https://swagger.io/docs/specification/2-0/api-host-and-base-path/
APIはよくv1、v2とパスパラメータでバージョン管理したりするが、
そうすると、すべてのAPIのURLにバージョン部分が含まれるため、冗長な記述になる。
そのため、"basePath"を使用してAPIのベースパスを共通化し、バージョン番号を1箇所にまとめることができる。
だが、stoplight/prismのバージョンによってopenAPI v2自体はサポートしているもののbasepathに対応できていないようだ。
https://github.com/stoplightio/prism#faqs
stoplight/prismとは
openAPIが定義されたファイルからモックサーバーを構築できる便利ツールのこと。
モックサーバーを利用することで、APIができていない段階では実際のAPIの開発状況の影響を受けることなく機能の実装やエラーハンドリングを行うことができるので必須だと思う。
結局どうしたのか
Next.jsのプロジェクトで遭遇したため、
APIリクエストを行うタイミングで環境変数（localやstagingなど）によって、
モックサーバーなのか実際のサーバーにリクエストを送るのか判断し、
バージョンのパスパラメータを付けたURLにするかそうでないかを実装しておいた。
少し面倒だが、環境ごとの設定を変更するだけで、リクエスト先となるサーバの切り替えが少し簡単になった。
しかし次は最初からOpenAPI v3でyamlファイルを作ることにする。
v3では、"basePath"の代わりに"servers"という項目を使用して、APIのベースURLを定義することができる。
定義例：
openapi: 3.0.0
servers:
- url: https://example.com/v1
paths:
/users:
get:
Googleタグマネージャーの使い方メモ
備忘録的メモ
変数、トリガー、タグこの三つが基本的に必要になる
☆変数
なんの行動で計測するかを設定する。
例えばテキストをクリック、URLをクリックするなど
（デフォルトで有効になっていない項目が多いので「組み込み変数」の「設定」で確認すること）
また、ユーザー定義変数でGAのトラッキングIDを設定しておく。タグ設定で使用する。
☆トリガー
具体的になんの行動を計測するか設定する。
例えばリンクをクリックだったら、どんなリンクをクリックするのかなど（具体的なURLやaタグに設定しているテキストなど）
この時、「リンクのみ」の時は「タグの配信を待つ」を設定できるので設定する（秒数はそのままでよし）
これを設定しないと計測できないことがある（タグ配信が間に合わない）
URLクリックの場合は
「これらすべての条件が true の場合にこのトリガーを有効化」のところでどのページで計測するかを設定する。
正規表現がつかえるので.*とするとすべてのページで有効になる。
「このトリガーの発生場所」に具体的なリンクやテキストを設定する。
☆タグ
何処で何の計測をするか設定する。
GAで計測するならタグの種類に「Google アナリティクス: ユニバーサル アナリティクス」を設定し、
計測するトリガー（行動）を設定する。
また、「Google アナリティクス設定 」にユーザー定義変数で設定したGAのトラッキングIDを設定する。
URLクリックの場合は「トラッキング タイプ」に「イベント」を設定すると
カテゴリ、ラベル、アクションを設定できる欄が表示される。GAで使用するのでわかりやすい値を入力する。
（各項目は値が丸被りしないようにする）
設定を終えたら、左上にある「公開」ボタンから公開する。
これをしないと計測できないので注意。
最後にGAから目標の設定を行う。
設定すれば、GAで分析ができるようになる。
（下記の場所で出来る）
①管理画面のビューの「目標」に移動する
②「新しい目標」を作成する
③「テンプレート」ではなく「カスタム」を選択する
④名前を設定し、タイプに「イベント」を設定
⑤タグ設定でつけたカテゴリ、ラベル、アクションと同じ値を設定する。
これはすべてのタグ分目標を設定する必要があるので、目標の名前にはタグと同じ名前を付けることを推奨。
⑥保存して完了
実際に設定した行動をページで行ってみて、GAのリアルタイムで確認できればOK
