野良 Scrapbox アプリ - スタートページの導入

久々にリリースしました。

github.com

今回は、スタートページを導入しました。閲覧した Scrapbox プロジェクト、開いたページのタイムライン、直近の編集履歴、お気に入りページが表示・更新されます。プロジェクト横断的なリンク集って感じになってます。

https://i.gyazo.com/382c181109dda1f15970d7a7c95a22b0.png

  • Projects: 訪問した Scrapbox プロジェクトのリスト
  • Favs: お気に入りページのリスト
  • Timeline: 閲覧・編集したページをタイムライン表示(自分が作成したページ、編集したページは色を変えてます)
  • Recently edited: 最近編集したページのリスト

いずれもページのリンクなので、よく使うページを開いたり編集の続きをやったりするのにいいかなと。

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

2Q のテックサイトへの投稿記事です。

7月

developer.mamezou-tech.com

Deno の Web フレームワーク Fresh が登場したので、書きました。この頃から Deno への興味が湧いてきてました。

developer.mamezou-tech.com

3月に書いた Taruri 記事へのアクセスが多く Tarui も v1.0 に到達したので、第2弾を書きました。この記事では Rust は書いてません。

developer.mamezou-tech.com

GitHub Project の Automated Kanban の使い方について書きました。

developer.mamezou-tech.com

野良 Scrapbox アプリのアーキテクチャーを刷新した話を書きました。1月に試してましたが、ようやく移行できました。

developer.mamezou-tech.com

Tauri 記事で取り上げた BPMN モデラーの開発元の Camunda のワークフローシステム Zeebe がよくできてたので、開発環境構築記事を書きました。

developer.mamezou-tech.com

Fresh で興味を持った Deno の CDN Deno Deploy を基盤とする Netlify の新機能 Edge Functions について書きました。

developer.mamezou-tech.com

GitHub Projects がリニューアルされてスプレッドシートのビューが導入され、リポジトリ横断でタスク管理ができるようになったので書きました。

developer.mamezou-tech.com

GitHub Teams(有償版) で利用可能になった Codespaces のコンテナイメージプレビルドについて書きました。パッケージレジストリがバックエンドで使われていて、GitHub Actions で実行されます。GitHub Actions ワークフローやイメージの管理については GitHub のマネージドになっているので楽です。

8月

developer.mamezou-tech.com

式年遷宮した野良 Scrapbox アプリを Electron v20 にアップデートする時に Renderer プロセスの Sandbox がデフォルトで有効になったので対応した記事です。

developer.mamezou-tech.com

M1 Mac で GitHub Actions のセルフホストランナーを動かしてみた記事です。GitHub Actions ランナーとセルフホストで M1 Mac と Intel Mac を Marix で実行するのも試しました。

developer.mamezou-tech.com

ソフトウェアのビルド、リリース、デプロイ というサプライチェーンへの攻撃の対策として、成果物の出所を検証可能な署名を付与するワークフローを利用してみた記事です。あまり書かない分野の記事でしたし、調査にもけっこう時間がかかりました。

developer.mamezou-tech.com

3月に書いた GitHub Actions の再利用可能ワークフロー記事の続編です。ネスト呼び出しや、Matrix strategy がサポートされ、かなり複雑な使い方ができるようになりました。大規模なプロジェクトでは役立つと思います。

9月

developer.mamezou-tech.com

GitHub issue と Jira のチケットを自動リンクしたりできる機能の仕様が変わったということで書きました。そもそも外部のサービスの自動リンク機能自体知らなかったし、未だに使ったことはないですが。

developer.mamezou-tech.com

Astro というイケてる SSG が v1.0 になったので使ってみた記事です。アイランドアーキテクチャで動的 UI をハイドレートするっていうの最近 SSG 界隈で流行っているようです。

developer.mamezou-tech.com

GitHub Pages はリポジトリのおまけ機能みたいな感じで、SSG でビルドしたアセットをリポジトリ管理しないといけないところがちょっといけてないのですが、GitHub Actions で GitHub が管理する基盤でアセットを配備してくれるようになります。現在ベータですが、正式公開が待ち遠しい人も多いのではないでしょうか。

developer.mamezou-tech.com

Deno をちゃんと勉強しようってことで養成ギブス的に連載を始めました。

developer.mamezou-tech.com

Deno 連載第2弾です。

developer.mamezou-tech.com

これは Deno 連載ではなく単発ブログです。Slack が Deno による新プラットフォームをベータ公開したのを知り、触ってみた記事です。

最後に

7月はここで紹介した記事とまとめ記事を合わせて9本も書いてましたが、8月はペースダウンしました。9月は6本で後1本で通算50記事に到達ということであがいてたのですが、無理でした (何と戦っているんだという話もありますが)。GitHub Actions と Deno 関係が多かったですね。

iPad でコードを書く Mid 2022 - Codespaces 編

3年ぐらい在宅ワークで iPad でコードを書くなんてことはなかったのですが、週1ぐらいで出社したりするようになって、重いラップトップ持っていくのが嫌なので、iPad でちょっとしたコード書きをしたいシーンが出てきました*1

Cloud IDE 界隈で最近一番のイノベーションは GitHub Codespaces です。会社のテックサイトに記事書きました。

developer.mamezou-tech.com

developer.mamezou-tech.com

個人のリポジトリについては今のところ課金されません。iPad では Safari で使う方が Chrome より問題が少ない印象です。

イメージの Prebuild については個人のアカウントでは使えませんが、環境を破棄しない限り設定が残っているので1人で使っている分には特に困ることはありません。

VS Code が普通に iPadOS の Safari 内で動いてとても実用的ですが、以下の問題があります。

  1. 他のアプリにスイッチすると、結構な短時間でコネクションが切れて再接続が必要、しかも再接続が失敗しやすい
  2. ブラウザからクリップボードのコピペがセキュリティの関係?で失敗する時がある
  3. 動作しない VS Code 拡張がけっこうある

特に1番目は面倒なので、Codespaces を起動すると他のタスクは iPad ではなくスマホやったりしてます。

でもこれまでの iPadOS のエディタ、Cloud IDE、Terminal での接続などと比較して格段に体験がよく、かなり重宝しています。

*1:今は iPad Pro 2018 を Magic Keyboard で使っています

野良 Scrapbox アプリ - リニューアル

blog.kondoumh.com

半年ぐらい新アーキで簡素な UI で作りつつ、時折ないと不便だと感じた機能だけ移植しながら自分だけで使ってきました。UI を Vuetify にして、ベータ版を Pre-release で出してましたが、もういいかなってことで正式リリースしました。

技術的な詳細はこちらに書きました。

developer.mamezou-tech.com

v3.0.0 としてリリースして、直後にバグフィックスして v3.0.1 をリリース。

github.com

かなりシンプルなアプリになった気がします。

https://i.gyazo.com/5314e24354451448a0cb2aee1315f986.gif

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

7月になったので、1Q の会社テックサイトへの投稿記事をレビューしたいと思います。

サイトの機能追加のおかげで、執筆者別の記事リストが見えるようになりました。

developer.mamezou-tech.com

4月

developer.mamezou-tech.com

Apple Silicon 対応の Electron バイナリを作る方法を知らなかったので、ちょうど使い始めた M1 MacBook Pro で試して書いた記事です。結果、electron-builder を使うとバイナリやインストーラは、Intel Mac でも M1 Mac でも作れるし、Universal バイナリにすれば、どちらのアーキテクチャでも動くということがわかりました。

developer.mamezou-tech.com

複数のジョブから構成される GitHub Actions ワークフローの実行で、失敗したジョブだけリランする機能について紹介しました。長い長いパイプラインの最後の最後で失敗して徹夜みたいなことがよくあったので、この機能はもっと早く欲しかった。

developer.mamezou-tech.com

Minikube でプロファイルを切り替える時の config との関係がちょっとわかりづらかったので tips 的な記事にしました。

developer.mamezou-tech.com

Docker 開発者によるポータブルな CI 構築ツール Dagger が話題だったので試して記事にしてみました。

5月

developer.mamezou-tech.com

Gitpod が IntelliJ IDEA のリモート開発環境をリリースしたというブログを読んだので試してみた内容を記事にしました。

developer.mamezou-tech.com

GitHub Actions ワークフロー実行時に作成される Summary ページに情報を付加できるジョブサマリー機能を紹介しました。

developer.mamezou-tech.com

GitHub Codespaces のベータテストが僕のアカウントで解放されたので試用レポートを書きました。

developer.mamezou-tech.com

Kafka のようにステートフルな分散システムは Kubernetes での運用が難しいですが、これをかなり簡単にしてくれる Operator Strimzi について、導入から通常運用まで詳しめの記事にしました。

6月

developer.mamezou-tech.com

Electron のテストフレームワーク Spectron が discon になってどうしようかと思ってたら Playwright が対応してきてたので使ってみた記事です。ただ、Electron のサポートはまだ実験的段階で、GitHub Actions のワークフローで使ってみても大体タイムアウトでエラーになるので、しばらく静観します。

developer.mamezou-tech.com

3月に書いた再利用可能ワークフローの続編で、再利用可能ワークフローとマニュアルトリガーワークフローの入力値取得が統一され便利になった話を記事にしました。

developer.mamezou-tech.com

GitHub の Dependabot にライブラリのアップデートの Pull Request も作ってもらって更新をタイムリーに行う方法について紹介しました。

developer.mamezou-tech.com

GitHub のセキュリティ脆弱性スキャンの機能の紹介をしました。そこで使われている静的コード分析の言語 CodeQL が面白かったので記事にしたものです。

developer.mamezou-tech.com

M1 Mac で Minikube は、まだ Hyperkit が未対応で実質使えないですが、QEMU ドライバーに対応したリリースが出たので試してみました。結果、まだダメだったという人柱系記事です。

developer.mamezou-tech.com

同僚の人のリクエストで書いたのですが、PR のレビューについて、インラインコメントの conversation をちゃんと使おうねという記事でした。

会社ブログでも1Qのふりかえり記事を投稿してます。

developer.mamezou-tech.com

この四半期の記事は GitHub の新機能の紹介が多めでした。記事のネタを探して GitHub の ChangeLog を購読してたりします。PR レビューの機能はみんなが知ってると効率も品質も上がるので記事にする価値があると思いました。

けっこうなペースで記事を書いてるのでネタに困ることもありますが、テックブログなどで情報を得て、試してみてインプレッションを書くというのが割と自分に合ってる(というかテーマ性のある連載などができない)というのもあり、しばらくこういうスタイルで続けてみようかと思っています。

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 ウォッチャー的な記事を会社ブログの方に書いていこうかなと思ってます。今のところ連載を持つようなネタはないので単発ブログばかりです。

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