Google Analytics 4 への移行作業

会社テックブログの Google Analytics 見てると「エンゲージメント-ページとスクリーン」などのいい感じのレポートあるなあと思って、自分のブログのレポート見るとそんなのない。もう GA4 という新しい Analytics がローンチされて、既存の UA-XXXXX のトラッキング ID を使用しているプロパティはそのうち使えなくなるというのを知りました。

fujii-yuji.net

はてなブログはまだ GA4 に正式対応してなかったので、設定の <head>要素にメタデータを追加 のところでこんなグローバルサイトタグを追加しました。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXXX');
</script>

そしてつい先日、はてなブログが GA4 に対応したアナウンスがありました。

staff.hatenablog.com

グローバルサイトタグのままでもいいのかもしれませんが、公式の設定の方がいいに違いないと思って早速設定。

旧トラッキング ID もまだ残してます。ブログはこれで移行完了。

kondoumh.com のホームページは、Hugo で作っています。

blog.kondoumh.com

旧 GA は Hugo の config.toml で UA-XXX のトラッキング ID を設定するだけで簡単でした。移行してから一度も Hugo のバージョンアップをしておらずかなり古いバージョンを使っているのですが、この辺の issue を見ると最新版でも GA4 にはまだ対応していないっぽいです。

github.com

ただ自前でグローバルサイトタグを head に埋め込めばいけるはずということで、使ってるテーマ Ananke のテンプレートをいじりました。

layouts/partials/analytics.html にグローバルサイトタグのテンプレートを追加。config.toml から読み込んだ G-XXX の ID を展開するように設定。

{{ if not .Site.IsServer }}
{{ with .Site.GoogleAnalytics }}
<!-- Global site tag (gtag.js) - Google Analytics 4-->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ . }}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '{{ . }}');
</script>
{{ end }}
{{ end }}

config.toml では G-XXX の ID を指定します。

googleAnalytics = "G-XXXXXXXXXX"

Ananke は layouts/_default/baseof.html_internal/google_analytics_async.html を呼び出していてこれが GA4 に対応していない模様。

hugo/google_analytics_async.html at master · gohugoio/hugo · GitHub

ということで、この呼び出しを追加した analytics.html に置き換えます。

-    {{ template "_internal/google_analytics_async.html" . }}
+    {{- partial "analytics" . -}}

これで、サイトをビルド・デプロイするとヘッダーにグローバルサイトタグの JavaScript が埋め込まれました。

以上でブログとホームページの GA4 への移行作業が完了しました。

2022 1-3月の会社テックサイトへの投稿記事

昨年12月にローンチした豆蔵デベロッパーサイト。社内有志で記事投稿しています。

developer.mamezou-tech.com

4ヶ月間の活動ふりかえりブログ書きました。

developer.mamezou-tech.com

この個人ブログでは今年に入って3月末までの四半期で僕が投稿した記事をふりかえってみます。

1月

developer.mamezou-tech.com

けっこう長いこと使ってきたのに Electron BrowserView まったく知りませんでした。記事書いて勉強したので Scrapbox アプリを WebView から BrowserView に移行する作業を隙間時間にやっています。

野良 Scarpbox アプリ - アーキテクチャ見直しドッグフーディング - kondoumh のブログ

developer.mamezou-tech.com

かなり前に Go で書いた Scrapbox -> Markdown 変換ツールの軽い記事。デベロッパーサイトにも Scrapbox の記事が増えたのでタグを追加してます。

“scrapbox”タグの記事 | 豆蔵デベロッパーサイト

2月

developer.mamezou-tech.com

BrowserView の勉強で Electron プログラミングのお作法がかなり変わってるなあと感じたので、公式リファレンスアプリのコミット履歴からその変遷を書いてみました。この時は Mermaid ブーム来てなかったので図は draw.io で描いてます。

developer.mamezou-tech.com

昨年使い始めた Slidev のことを書いたツール紹介記事です。サンプルで作ったスライドのネタは一つ前の Electron 公式リファレンスアプリの文章を流用しました。コードのハイライトではクリック回数を指定してコード上のフォーカスを移動するという凝った演出ができます。

developer.mamezou-tech.com

CI 関連のネタとして、過去にこのブログで書いた記事を再編して投稿してみました。直前に Mermaid プラグインが使えるようになり、まさにうってつけでした。

developer.mamezou-tech.com

最近使ってる Debezium について書きました。あまり調べきれてなくてこの記事書きながら知ったこととかもありました。知ってることを纏めるのも知識を整理するよい機会だと改めて思った次第です。

3月

developer.mamezou-tech.com

Publickey の記事読んで Tauri の存在を知り、ちょっと触ってみて書きました。Publickey の波に乗ってけっこうはてブがついてますね。

developer.mamezou-tech.com

GitHub Actions のワークフロー再利用機能を使ってみて書きました。ナイトリービルドとリリースでブランチが違うだけでほとんどコピペで書いてるとか多いので、よい機能だと思います。

developer.mamezou-tech.com

リリースノート自動生成機能を試した記事。1年前にこのブログで取り上げた Release Drafter と同様の機能です。

GitHub リリースページのドラフトを自動生成してくれる Release Drafter を導入する - kondoumh のブログ

developer.mamezou-tech.com

Wasm 関連はたまにウォッチしていますが、そろそろ PoC 案件とかに登場するフェーズになってるのかなあと。

developer.mamezou-tech.com

Issue と PR の紐付けは忘れがちなので自動的にできるのはよい機能だと思いました。

以上、3ヶ月で11本書きました (冒頭のふりかえりブログ除く)。

GitHub 関連の記事4本入りました。これまで個人ブログの CI タグで色々GitHub Actions の機能について書いてきましたが、GitHub ウォッチャー的な記事を会社ブログの方に書いていこうかなと思ってます。今のところ連載を持つようなネタはないので単発ブログばかりです。

技術ネタはデベロッパーサイト優先にするため、個人ブログの投稿は減ってますが、四半期毎ぐらいにこんな感じで投稿した記事のレビューを書こうかなと思っています。

Mac のユニバーサルコントロールで Magic な入力機器に回帰

macOS Monterey 12.3 と iPadOS 15.4 がリリースされ、1台の Mac で iPad や他の Mac をシームレスにコントロールできるユニバーサルコントロール機能が解除されました(ただしベータ版)。さっそく macOS と iPadOS をアップデートして導入してみました。

www.apple.com

先日 iPad を Sidecar で第3のディスプレイにしたところでした。

blog.kondoumh.com

Sidecar とユニバーサルコントロールは共存できるっぽいんですが、画面とユニバーサルコントロールの対象デバイスは別物と認識されるようで、使ってる間にどちらかが解除されたり、Sidecar が有効だとユニバーサルコントロール対象デバイスの位置調整が思うようにできなかったりします。ベータ版だからでしょうか。

f:id:kondoumh:20220322235935p:plain

Sidecar はすばらしい機能ですが、iPad アプリとの切り替えは画面に手をのばしてスワイプする必要があり、やや煩雑です。ということで Sidecar による画面拡張は廃止して、ユニバーサルコントロールだけを使う運用にしました。安定して使えています。

ユニバーサルコントロールは、物理キーボードや Trackpad を iPad にペアリングしてるのとほぼ同じ感覚で使えてかなり快適です。今のところ iPad 側にカーソルを移動しただけではキーボードのコントロールが切り替わらなくて、1度クリックというかタップしないといけないのがちょっと微妙なので正式版での改善を期待しています。

去年11月に REALFORCE をリニューアルしたところですが、ユニバーサルコントロールだと iPad では US キーボードと認識されてしまうのと、机が狭くなっちゃってるので Apple Magic Keyboard を復活させました*1。Magic Keyboard は常用してると指先が痛くなるので3年前に iPad 用にしてたのを再び MacBook とペアリング。

blog.kondoumh.com

タッチは REALFORCE の方が圧倒的によいですが、やはりコンパクトで USB ケーブルも使わないのでスッキリします。Karabiner-Elements などサードパーティのドライバーも不要。マウスも Windows 用エルゴノマウス使ってたのを Magic Trackpad に戻しました。当然 MacBook との相性は完璧でスクロールもスムーズ。Magic Trackpad だけだとドロー系ツールで図を書くときなど厳しいので Magic Mouse で補ってます。再利用なので余分な出費も不要です。

ということで、ユニバーサルコントロールを Apple の周辺機器だけで使うのはとても快適です。純正周辺機器は正義、ワイヤレスは正義、という思いに至りました。副作用として時々 MacBook の画面を指でタッチしそうになる問題が。あと指先痛い問題が懸念ですが極力ソフトタッチでタイプするよう心がけてます。Magic Keyboad の荷重はやや重めなので MacBook Pro 本体ぐらいの柔らかタッチ Magic Keyboard の登場が待たれます。

*1:最初 MacBook 本体のキーボードと Trackpad 使ったらいいじゃんと思って試したのですが、パームレスト部分の熱がじわじわきて低温やけどになりそうなのでやめました。

Sidecar で iPad を第3のディスプレイ + Touch Bar にする

M1 Pro MacBook Pro 14 (2021) を業務用に調達しました。

scrapbox.io

ということで 私物 MacBook Pro 13 (2015) ではできなかった Sidecar で iPad を外部ディスプレイにするのをやってみました。

事前に iPad と MacBook の双方で iCloud を使用して 2FA を有効化しておく必要があります。USB-C ケーブルで、MacBook - iPad を接続。iPad は 27 インチディスプレイとキーボードの間に配置しました。

f:id:kondoumh:20220305144910j:plain

これまでは、ターミナルのちょっとした作業を右サイドの MacBook 本体のディスプレイでやっていたのですが、iPad 側にターミナルを置いて使っています。やはり正面の方が作業がやりやすいです。時々 Finder でファイルを探したりするのも iPad 画面でやるようになりました。

Sidecar では Touch Bar の機能が発動するため、ちょうどキーボードの上部の Touch Bar 的なポジションで使用可能です *1

f:id:kondoumh:20220304090216j:plain

Sidecar ネットワーク接続もできるようですが、ケーブル接続なので遅延も少なく Apple 標準機能なので設定も簡単で非常に安定しています。Duet Display のようなオーバーヘッドもありません。

blog.kondoumh.com

この時は、iPad を Windows の外部ディスプレイにしてましたが、結局ポータブルディスプレイを導入してしまいました。

scrapbox.io

在宅ワーク環境はディスプレイだらけになりましたが、どの画面で何の作業をするかが固定されて、アプリの切り替えがほぼ無くなり混乱することが減ってよかったです。

*1:ほとんど使うことはなく廃止されたのは納得です。

Electron の記事執筆とスライド作成

豆蔵デベロッパーサイトにまた Electron の記事を投稿しました。

developer.mamezou-tech.com

同様の内容を Slidev を使ってスライドにしました。Netlify に簡単に publish できるのでしました。

f:id:kondoumh:20220215101939p:plain https://history-of-electron-quick-start.netlify.app

Slidev は 1スライド1 SPA サイトな感じですね。

sli.dev

それをまた記事にしました。

developer.mamezou-tech.com

野良 Scarpbox アプリ - アーキテクチャ見直しドッグフーディング

豆蔵デベロッパーサイトに投稿したブログ。

developer.mamezou-tech.com

WebView 使ってる場合じゃなかったんやー・・ってことで、より速くてセキュアで将来性のある BrowserView による 野良 Scrapbox アプリ再構築を試みています。

ツールバーとかタブバーは、メインウィンドウの BrowserWindow の webContents として実装。Scrapbox のページは BrowserView に読み込んでいます。

BrowserWindow や BrowserView ごとに

main process ↔ contextBridge(preload) ↔ renderer process

の形で実装し、renderer process は Node.js から隔離した (通常の Web アプリの JavaScript と同等の) 実行環境になっています。contextBridge は BrowserView / BrowserWindow の生成時に preload される JavaScript で、main process との通信を担い、Node.js を使った API を renderer process に提供します。色々と作り方が変わるので空き時間に試行錯誤しています。

ページ一覧画面は動きました。

f:id:kondoumh:20220130221024p:plain

従来、ページ情報画面などの補助画面を HTML の dialog 要素で作ってましたが、BrowserWindow を子ウィンドウとして表示する方式で実装しました。

f:id:kondoumh:20220130222342p:plain

メインウィンドウの webContents として全てのページを表示していた WebView 方式と違い、独立した Web ページとして各画面を表示しなくてはいけないので多少ルック&フィールは変わりますがまあいいかなと思っています。

今のところタブは作ってなくて、Scarpbox ページと一覧画面を切り替えるボタンをタブのように (静的に) 配置しているだけです。これまで使ってた electron-tabs が BrowserView には対応しておらず自分で作らなきゃなので、最回しにしてます *1

あとは、使いながらこれはないと不便!って思った機能 (URL をタイトル付きで貼り付けるなど) から優先的に追加していっています。

*1:ページごとにタブがなくても、ページと一覧を切り替えられるれば致命的には使いにくくならない感じです

2021 ふりかえり

Job

約3年参画していたプロダクト開発を夏前に (円満) 卒業しました。後半の1年半ぐらいは商用リリースに向けてかなりヘビーな日々が続いていました。メンバーが優秀でかつチームワークもよかったのでなんとか乗り切りることができました。並行して4月から別案件に半分の工数で参画してアーキテクチャ検討とかプロト開発やってます。これは現在も継続中です。

残りの工数は社内のグループリーダー業務と社外への情報発信活動に従事してました。

情報発信については、まず年初めに会社のホームページでサービス紹介のリニューアルを手伝いました。いろんな顧客案件の事例を収集・類型化し、現場でのアーキテクトやコンサルとしての支援イメージが伝わるように心がけました。

www.mamezou.com

そして秋からは社外のソフトウェアデベロッパーへの認知度を高めるべく、デベロッパーサイトの立ち上げ準備をやっていました。12月頭にローンチ。デザインとかも広報の人とやったりして楽しかったです。

developer.mamezou-tech.com

Kubernetes に造詣の深い同僚の人がほとんどの記事を AWS EKS を使ったハンズオン形式で書いてます。わかりやすくて実践的な内容になっていると思います*1。僕も自分用 EKS 環境を作って検証して記事書きました。ローンチに際してのブログも書きました。

developer.mamezou-tech.com

デベロッパーサイト専用 Twitter アカウントも作り、新着記事を自動投稿したり時々中の人としてツイートしたりしてます。

twitter.com

あとはコンテンツを充実させてじわじわと浸透していけるといいなと思ってます。

Personal Development

会社の GitHub organization で公開している GitHub Actions 用 Action などの OSS もメンテナンス継続してました。

github.com

テレワークによる運動不足解消のため、ボクササイズ / ウォーキング / プランク (のいずれか) を毎日続けるために Pixela に記録する PWA を作ったりしました。

blog.kondoumh.com

Google Fit で歩数計測してるので体重データの読み書きも Fit API でできる環境を整えたりしました。

blog.kondoumh.com

blog.kondoumh.com

野良 Scrapbox アプリは主に Electron の更新に追従するためにメンテナンスしてました。

github.com

デベロッパーサイトでも簡単に紹介しました。

developer.mamezou-tech.com

Electron もバージョンアップのスピードが早く追従が難しくなってきました。v14 で remote が削除され、依存してる NPM パッケージがいくつか動かなくなるのがわかっていたので PR 作ってマージしてもらったりしていました。

blog.kondoumh.com

来年からはさらに古いバージョンの EOS までのリードタイムが短くなります。

https://www.electronjs.org/releases/stable#end-of-support-for-12xy-1600

2022 5月 までは 最新4バージョンまでサポートされますが、v19 以降は最新3バージョンまでのサポートに変更されます。WebView もパフォーマンス問題あったりするので、アーキテクチャの刷新を模索すべき時期かもです。

Gadgets

REARFORCE と Kindle をリニューアル。

blog.kondoumh.com

blog.kondoumh.com

会社支給の Let's note もリニューアルしました。その上テレワークでお客さんから複数のマシンを借りてたので置き場所やキーボード、マウス、ディスプレイを切り替えるのが大変でした。

blog.kondoumh.com

blog.kondoumh.com

今はこんな感じに落ち着いてます。

f:id:kondoumh:20211229001048j:plain

左から会社の Let's note、お客さんから借りてる ThinkPad、その上に iPad を浮かべて ThinkPad の上に iPad とペアリングする Magic Keyboard と Magic Trackpad を載せてます。その右にディスプレイと REALFORCE にマウス、1番右側に MacBook Proを立ててます。REALFORCE とマウスは USB スイッチで MacBook と ThinkPad を切り替え。今後またマシンが増えるとセットアップを工夫しないといけません。

2015年の MacBook Pro で今年も開発してました。コンテナでの開発も Minikube をうまく使うとメモリ16GB でもなんとかなりましたがそろそろリプレースですね。M1X 版 Mac mini が出てほしいです。

Pixel 3 XL も3年使ってます。Pixel 6 / 6 Pro はデカ重すぎてスルーしちゃいました。6a 待ちです。

Software and Services

年明けからドラクエウォークを初めてしまい、Ingress は全くやらなくなりました。

www.dragonquest.jp

クエストやほこら探しでウォーキングが捗ります。ただいま上級職 (バトマス、賢者、レンジャー、パラディン、スパスタ) を2人ずつレベル70に育成中です。

ドラクエウオークと自作 Pixela クライアントアプリで、ワークアウトでもけっこう草を生やすことができました (356日 650 コミット 平均 1.8 コミット) *2

f:id:kondoumh:20211231175452p:plain

f:id:kondoumh:20211231175728p:plain

デベロッパーサイトの Twitter アカウント運営に SocialDog を使い始めました。多機能なのに使いやすく、無料プランでも RSS フィードとツイートを連携させることができます。国産サービスです。

social-dog.net

Meet 使うようになりました。Google Apps にインテグレートされてて手軽に使えますね。

apps.google.com

社内イベントでバーチャルオフィスな感じの Teamflow も体験しました。

www.teamflowhq.com

今後もこの分野の革新が続くのでしょう (Metaverse とか)。

Markdown で綺麗なスライドが作れる Slidev 使い始めました。

sli.dev

最後に

年末は久々に忘年会で少人数ではありますが集まったりしました。コロナはまだ予断を許しませんが、テレワークは継続しつつ週1ぐらいでリアル交流ができるようになるといいなと思います。

*1:彼は 11ty 使ったサイトの SSG の仕組みや Netlify でのホスティングなども全部構築してくれました

*2:Pixela のサポーターにも登録しました