blog/2 | ikuma-t.com

WhichKeyでVSCodeのショートカットをすいすい叩けるようにする

2024/1/6

に公開

はじめに

VSCode を利用し始めてかれこれ1年くらい経ちますが、基本的なものを除いていまいちショートカットが覚えられません。

JetBrains 系のエディタのプラグインにある Key Promoter X の VSCode 版を導入してみたのですが、結局正しいキーはなんなのかがわからずうまくいきませんでした。

これに対し、 Which Key という拡張機能を使うことでショートカットを覚えずに、ショートカットを活用できるようになったので紹介します。

WhichKey とは

WhichKey は　VSpaceCode🔗 という Spacemacs ライクなキーバインドを実現する拡張機能が提供している拡張機能です。

whichkeyを開いたところ

キーバインドに対応したコマンドパレット / チートシート機能を提供します。もともと Emacs に搭載されている機能を VSCode の拡張機能として実装したもののようです。

インストールと初期設定

VSpaceCodle をインストールしても Which Key は導入されますが、 Whichey 単独でもインストールすることができます。

https://marketplace.visualstudio.com/items?itemName=VSpaceCode.whichkey🔗

私の場合は VSCode NeoVim を利用しているので、以下のようなキー設定を追加して、 cmd + space で Whichkey が起動するようにしています（alt + space は Raycast ですでに使っていた）。

{
  "key": "alt+space",
  "command": "whichkey.show",
  "when": "editorTextFocus"
},

メニューのカスタマイズ

表示されるメニューは settings.json で編集することができます。

1つのキーに対して1つのアクションを指定する場合は以下のように設定します。

"whichkey.bindings": [
  {
    "key": "バインドしたいショートカットキー",
      "name": "任意の名前。メニューで表示される",
      "type": "command",
      "command": "VSCodeのコマンドの名前"
  }
]

またショートカットキーをネストさせることもできます。その場合は次のように設定します。

"whichkey.bindings": [
  {
    "key": "バインドしたいショートカットキー",
      "name": "任意の名前。メニューで表示される",
      "type": "bindings",
      "bindings": [
      // ...以下単一のアクションを設定する場合と同じシンタックス
      ]
  }
]

WhichKey 自体の設定

WhichKey 自体の挙動を settings.json に指定できます。冒頭の初期設定で述べた、 whichkey.show もその一例で、すでに説明した通り WhichKey を起動するためのコマンドです。

その他の細かな設定については Reference | VSpaceCode🔗 をご参照ください。

わたしの Which Key

こんな感じの key bindings を設定しています。

  "whichkey.bindings": [
    {
      "key": "q",
      "name": "Quit",
      "type": "command",
      "command": "workbench.action.closeActiveEditor"
    },
    {
      "key": ";",
      "name": "commands",
      "type": "command",
      "command": "workbench.action.showCommands"
    },
    {
      "key": "a",
      "name": "Toggle Sidebar",
      "type": "command",
      "command": "workbench.action.toggleSidebarVisibility"
    },
    {
      "key": "e",
      "name": "Editors...",
      "type": "bindings",
      "bindings": [
        {
          "key": "d",
          "name": "Close active editor",
          "type": "command",
          "command": "workbench.action.closeActiveEditor"
        },
        {
          "key": "e",
          "name": "Show all editors",
          "type": "command",
          "command": "workbench.action.showAllEditors"
        },
        {
          "key": "f",
          "name": "Focus active editor",
          "type": "command",
          "command": "workbench.action.focusActiveEditorGroup"
        },
        {
          "key": "m",
          "name": "Close other editors",
          "type": "command",
          "command": "workbench.action.closeOtherEditors"
        },
        {
          "key": "n",
          "name": "Next editor",
          "type": "command",
          "command": "workbench.action.nextEditor"
        },
        {
          "key": "p",
          "name": "Previous editor",
          "type": "command",
          "command": "workbench.action.previousEditor"
        },
        {
          "key": "u",
          "name": "Reopen closed editor",
          "type": "command",
          "command": "workbench.action.reopenClosedEditor"
        },
      ]
    },
    {
      "key": "f",
      "name": "Find & Replace...",
      "type": "bindings",
      "bindings": [
        {
          "key": "f",
          "name": "File",
          "type": "command",
          "command": "editor.action.startFindReplaceAction"
        },
        {
          "key": "p",
          "name": "Project",
          "type": "command",
          "command": "workbench.action.replaceInFiles"
        }
      ]
    },
    {
      "key": "g",
      "name": "Git",
      "type": "command",
      "command": "workbench.view.scm"
    },
    {
      "key": "h",
      "name": "Split Horizontal",
      "type": "command",
      "command": "workbench.action.splitEditorDown"
    },
    {
      "key": "m",
      "name": "Toggle Minimap",
      "type": "command",
      "command": "editor.action.toggleMinimap"
    },
    {
      "key": "o",
      "name": "Open File",
      "type": "command",
      "command": "workbench.action.quickOpen"
    },
    {
      "key": "s",
      "name": "Show search",
      "type": "command",
      "command": "workbench.view.search"
    },
    {
      "key": "x",
      "name": "Show explorer",
      "type": "command",
      "command": "workbench.view.explorer"
    },
    {
      "key": "t",
      "name": "Terminal...",
      "type": "bindings",
      "bindings": [
        {
          "key": "t",
          "name": "Toggle Terminal",
          "type": "command",
          "command": "workbench.action.togglePanel"
        },
        {
          "key": "f",
          "name": "Focus Terminal",
          "type": "command",
          "command": "workbench.action.terminal.toggleTerminal",
          "when": "!terminalFocus"
        }
      ]
    },
    {
      "key": "v",
      "name": "Split Vertical",
      "type": "command",
      "command": "workbench.action.splitEditor"
    },
    {
      "key": "w",
      "name": "Window...",
      "type": "bindings",
      "bindings": [
        {
          "key": "h",
          "name": "Move editor group left",
          "type": "command",
          "command": "workbench.action.moveActiveEditorGroupLeft"
        },
        {
          "key": "j",
          "name": "Move editor group down",
          "type": "command",
          "command": "workbench.action.moveActiveEditorGroupDown"
        },
        {
          "key": "k",
          "name": "Move editor group up",
          "type": "command",
          "command": "workbench.action.moveActiveEditorGroupUp"
        },
        {
          "key": "l",
          "name": "Move editor group right",
          "type": "command",
          "command": "workbench.action.moveActiveEditorGroupRight"
        },
        {
          "key": "t",
          "name": "Toggle editor group sizes",
          "type": "command",
          "command": "workbench.action.toggleEditorWidths"
        },
        {
          "key": "m",
          "name": "Maximize editor group",
          "type": "command",
          "command": "workbench.action.minimizeOtherEditors"
        },
        {
          "key": "d",
          "name": "Close editor group",
          "type": "command",
          "command": "workbench.action.closeEditorsInGroup"
        },
        {
          "key": "x",
          "name": "Close all editor groups",
          "type": "command",
          "command": "workbench.action.closeAllGroups"
        }
      ]
    },
    {
      "key": "z",
      "name": "Toggle Mode...",
      "type": "bindings",
      "bindings": [
        {
          "key": "f",
          "name": "Toggle full screen mode",
          "type": "command",
          "command": "workbench.action.toggleFullScreen"
        },
        {
          "key": "z",
          "name": "Toggle zen mode",
          "type": "command",
          "command": "workbench.action.toggleZenMode"
        }
      ]
    },
  ],

おわりに

WhichKey は見た目もスッキリしているし、ショートカットを忘れずに済むのでおすすめです。ぜひ使ってみてください。

WhichKeyでVSCodeのショートカットをすいすい叩けるようにする

公開日: 2024/1/6

1年の目標は正月に1回失敗しておくくらいがちょうどよい

2024/1/5

に公開

1年の目標は正月に1回失敗しておくくらいがちょうどよい

タイトルは今年立てた「日記を毎日書くぞ」が昨日途絶えてしまった自分への言い訳でもあり、毎年考えているものでもある。

あまり深く考えずに立てると、今年の目標は「毎日/毎週/毎月 XXするぞ！」といった類の内容になりがちだが、日本のカレンダー構造的に序盤戦がハードであるため、達成が難しい。

1月。目標立て始めでモチベは高いものの、休み中に目標達成のために作った環境やルーティンが、仕事の始まりと共に崩壊しがち。

2月。そもそも月数が他の月に比べて不利。週に2本はブログ書くぞ！といった目標はこのステージによって破られた。

3月。4月始まりの会社の場合、締めがここになるのでなんやかんや忙しい。

これらのステージのいずれかで連続ストリークが途絶えると、敗戦ムードとなり目標は自然消滅する。どうせ負け戦になって中途半端に終わるくらいなら、正月早々に負けておいて、次の負けムードのときに「1回負けたけど、まだ持ち直せるよ〜」という心持ちで年末を迎えた方が得策ではないか。

というわけで今日は忘れずに日記を書きました。えらいぞ🤗

Kaigi on Rails 2023で登壇しました！

2023/10/29

に公開

Kaigi on Rails 2023 で登壇しました！

昨日、一昨日（2023/10/27 - 28）で開催された Kaigi on Rails 2023🔗 にSpeakerとして登壇してきました！

今年は初のオフライン開催。私自身Rubyコミュニティのオフラインイベントに参加するのが初めてだったコトと、カンファレンスでのオフライン登壇自体も初めてだったので（今年はスクラムフェス仙台でも登壇したけど、あれはサテライト配信だったので目の前に観客がいなかった）いろんな刺激を受けることができました。

この記事では参加者・登壇者それぞれの視点で今回のKaigi on Railsで感じたことを振り返っていきたいと思います。

これが「オフライン」…！

初オフライン Kaigi on Rails めちゃめちゃ楽しかったです！発表があって、ブースがあって…という構成は変わらないものの、やっぱり受ける刺激の量は全く異なり、来てよかったなあと感じました。これが「オフライン」…！

オフラインしぐさ

「懇親会の開始前に前説でパックマンルールを説明しよう」「2人で会話している人を見かけたら話しかける狙い目。2人だと話題を繰り出し続けるのも大変だし、会話抜けるタイミングも計れないしで困っているはず」みたいなオフライン懇親会仕草を徐々に取り戻していきたい。失われた技術。
— Takafumi ONAKA (@onk) July 24, 2023

前述の通りオフラインイベント慣れしていなかったので、懇親会やブースではonkさんのツイートに記載のあったロストテクノロジー¹をふと思い出し。自分は積極的に話しかけるのが苦手なので、会場うろちょろして2人でお話している方々を見つけては「話している人が2人…来るぞikuma！」²と心の中で叫んでいました。

ポストカードを使った自己紹介

一応自分のアイコンを含めたポストカードを前日にデザインして持って行きましたが、アイコンによってオンラインの姿と同期ができたのは一定効果があったようです。XのQRコードもつけたのですが、URLが間違っていたらしくこちらは全然意味をなさず…。来月もオフライン登壇の機会があるので、おとなしくプレーリーカード🔗 を作成しようと思います。

オンラインで知っている方/知らなかった人とお話しさせていただくことができて、嬉しかったです！お話しいただいたみなさん、ありがとうございました！

冷めても美味しいお弁当よりも、今ここでしか味わえない味を

登壇者的には「もっと現地を重視した構成にすればよかったなあ」と反省もありました。

エンジニアになってからの登壇はすべてオンライン配信だったため、いずれも意識的にオンライン向けに特化させた形になっていました。

リアルタイムでの反応が弱めなら、終わった後の体験の方に力を入れよう、具体的には後から見た時にも資料からおおよそのコンテキストが汲み取れる状態にする、といった具合です。お弁当用にちょっとおかずの味を濃いめにするみたいな気持ちです。

当たり前ですがオフラインの場合はすぐそこに聞いている人がいます。次回以降の登壇では以下のようなポイントを意識したいなあと、他の方の発表を見ている中で思いました。

全編とまでは言わないが、心に残すためのインタラクションを
丁寧に構成された緻密なロジックよりも、その瞬間で理解できる単純なサンプルを
完全な解説よりも、考える余地というギフトを

ただ後から見返すための資料はそれはそれでメリットがあるので、そこはバランスですかね〜（2種類作るか）。

なんだか強くなった気がする！

今年は最初に自分の番を終えることができたので³、常にHall A/Bいずれかのセッションを聞かせていただいておりました。

Kaigi on Railsのコンセプトに「明日からの仕事に使える」がありますが、前回の参加時（エンジニア経験4ヶ月）に比べ、「仕事」も増えたことから「わかりみ」と「やらねば」のオンパレードでした。最近Railsも書いていなかったのですが、発表を聞いていく中で自分の中で眠っているRails筋が活動を再開する音が聞こえたような気もします（それは本当か？）。

ところで結構AI生成のイラストを使っているスライドが多く見受けられた印象が合って、逆張り系人材としては来年までに油絵や水彩画を学習して、オリジナリティを確保しようかなと思っています、たぶん。

自分の発表のふりかえり

登壇直前の様子

昨年に続き、独自系・網羅系でいくと後者の分類のトークでした。HTTPを手で書いて学ぶファイルアップロードのしくみ - ikuma-t.com🔗。

発表のモチベーション

そもそも今年Kaigi on RailsにCFPを出すのか、そもそも行くのか迷っていました。

昨年の6月にエンジニアになってから仕事では

昨年のKaigi on Railsまで：Rails
今年のKaigi on Railsまで：React（+ときどきGo）
今年のKaigi on Railsから：Rails

と、1年近くフロントに傾倒していたので、今年はパスかな〜と思っていたのですが、社内でRailsを書いていたhoguccさんとsanfrecce_osakaさんがCFPを出す雰囲気を感じたので、その勢いに便乗して書くことに。

結果CFPは通って登壇できたし、偶然またRails書くことになったしで、やってよかったです。

登壇テーマ

上述の通り、Railsをテーマにして話すのはちょっと無理があったので、今回も昨年同様「曖昧に使っている技術を最小実装で自分のものにしよう」という方向性で検討。資料中にもあったようないくつかのファイルアップロードに関する経験から、今回はHTTPを手で書いてファイルアップロードの基本を理解する、というテーマにしました。

「この技術は課題に対してオーバーキルではないか？」という疑念がいつもあり、そういう視点でちょいちょい仕様とかを調べたりしたものがCFPのタネになっているのですが、いかんせんまとめていないので、CFPを書く際も、実際に資料を作る際にも時間がかかる…。生活をリリースして登壇をアドバンス召喚するのはなかなか大変なので、よくアウトプットをされている方たちを真似て⁴これ登壇できるかもと思ったら、ストックするようにしたいなとあらためて思いました。

登壇資料

「フロントでは頑張ってたんだよ〜」という免罪符が欲しかったのか、発表資料はHTML + CSS + JSで書いていて、（ほぼ出番のなかった）資料埋め込みデモはReact + Ruby Wasmでできていたりします。ここは長いので気が向いたら別記事で書こうと思います。

「ファイルアップロード」が一般的で広いテーマゆえ、今回は昨年よりも内容の取捨選択が難しかったです。

HTTPの仕様改訂やら、もう少し実世界と繋げた説明やら、JSにおけるBlobとか、もともと入っていたが消えた内容も…。加えて練習時間があまり取れなかったこともあり、半分ぶっつけ本番・超早口で30分に無理やりねじ込む内容になってしまいました…。これは次回以降の反省点です。

Grow.rbに今年も感謝

Grow.rb特別回：登壇相談会2023【登壇ビギナー歓迎】🔗

チーフオーガナイザーの大倉さんが開催されているGrow.rbでは、Kaigi on RailsのCFP提出が解禁されると登壇特別回と称したCFP相談会⁵が開かれています。

昨年に引き続き今年もこちらで壁打ちをさせていただいたおかげで、CFPをブラッシュアップできました。大倉さん、アドバイスいただいた皆さん、ありがとうございました！

おわりに

あまりコミュニケーションが得意な人間ではないので、「勉強会やイベントには登壇者として参加することで、謎の免罪符を得る」戦略をFJORD BOOT CAMP時代からやっているのですが⁶、この戦略に頼りすぎて、免罪符なしで存在を保つことができるのか不安です。…ってことは存在を保つために、来年もKaigi on RailsのCFP出すしかないな！！

ブログを書いたし、アンケートも全部答えたのでこれにて私のKaigi on Rails 2023は終了です！運営の皆様、お疲れ様でした！

ロストテクノロジー - Wikipedia🔗 現存しない技術というよりかは取り戻すべき技術 ↩
レベル4のモンスターが2体…来るぞ遊馬！ 🔗 ↩
昨年は Day2の最後🔗 だったので、最後までそわそわ ↩
例えばkoicさんはBasecampで書いている🔗そう。またonkさんは社内のscrapboxにLTネタを貯めている🔗そう。 ↩
私の中での通称は「大倉塾」 ↩
謎の免罪符とかは言及されていないが、初心者でも登壇してみるのは話しやすくなるしおすすめ、ということは言われていたと思う、たぶん。 ↩

Kaigi on Rails 2023で登壇しました！

公開日: 2023/10/29

.env.developmentからdirenvで読み込む用の.envrcを作成するワンライナー

2023/10/15

に公開

ベースとなる環境変数ファイルから、direnv用のファイルを一発で作りたい

環境変数のベースとなるファイルを.env.developmentやらで作成しておき、実際の値は.gitignoreに記載された.envなどのファイルを各開発者のローカルで編集する、といった運用はよくある。

プロジェクトだけで使う環境変数をグローバルにexportするのもアレなので、こういった時にはdirenv🔗が使える。しかし

.env.developmentはHOGE=foo形式で記述されている
.envrc（direnvの読み込みファイル）はexport HOGE=fooで記述する

という時に、単純にcp .env.development .envrcとするだけでは動かない。

とはいえ全部に手でexportをつけるのもだるいのでワンライナーだとどうやるのか少しばかり試行錯誤してみた。

結論

awk '{if (NF > 0 && $0 !~ /^#/) print "export " $0; else print $0}' .env.development > .envrc

解説

解説というほどの大きなスクリプトでもないが、小さな心配りを説明する。

NF > 0: Number of fieldsが0より大きい、つまり非空行のみを対象にする。環境変数のグループを明示的にするために空行があったりする場合にexportだけが残らないようにする心配り。
$0 !~ /^#/: #から始まらない、つまりコメント行でない行を対象にする。

HOGE=foo
FUGA=bar

# animals
TAMA=cat
POCHI=dog

例えば上記の.env.developmentから次の.envrcが生成される。

export HOGE=foo
export FUGA=bar

# animals
export TAMA=cat
export POCHI=dog

.env.developmentからdirenvで読み込む用の.envrcを作成するワンライナー

公開日: 2023/10/15

O'REILLYのLearning PlatformにLLMを使った質問機能が追加されていた（Beta）

2023/10/14

に公開

O’REILLYの書籍読み放題のサブスクリプションLearning Platformを開いたら、サイドバーに「Ask a question」というメニューが追加されていました。

新しくサイドバーに追加されたLearning platformのAsk a questionメニュー

近頃ではこの形式のUIを見ると「AIか〜」と当たり前のように納得するようになってきましたね。最初は現在開いている書籍に関して問い合わせできるのかと思ったのですが、そうではなくLearing Platformに登録されている書籍から回答を生成しているようです。

Javascriptの分割代入について実際に質問してみた例

日本語書籍も登録はされていて回答の参考にされていましたが、日本語で質問しても回答自体は英語で返ってくる模様。

1つのトピックに対して複数の書籍をあたりたいケース、例えばプロダクト開発や開発プロセスに関する書籍を探す際には、この機能をきっかけに書籍を見つけるのもありかな〜と思いました。

O'REILLYのLearning PlatformにLLMを使った質問機能が追加されていた（Beta）

公開日: 2023/10/14

dockerのimageとvolumeを選択して消せるか、賑やかしができるdockern（どっかーん）コマンド

2023/10/14

に公開

作ったもの

dockern🔗

denoを使っているので、READMEの通りinstallしてdockernで実行できます。

経緯

色々とDockerコンテナをガチャガチャしていて、何度もimageやvolumeをまとめて削除したいケースが発生しました。

docker compose系のコマンドはエイリアスも貼ってあるし、覚えているのですが、dockerコマンドは全然覚えていないので、ここら辺をラップしてやってくれるコマンドを作ることにしました。（なおアイデアとライブラリだけ選んでほぼChatGPTで作った）。

仕事中に「dockerをドッカーンと」とか聞いたような記憶があったので、名前はdockernです。

ぐるぐるどっかーん

スプー世代の方はわかると思います。

$ dockern guru2
ぐるぐるぐるぐるどっかーん🎺

まあメインコマンドはdockernだけで実行できるので、明日以降これを実行することはないでしょう。

おわり

今消したいimageやvolumeがないので、あまりしっかり動作確認はしていません。業務中に動かなくなったら都度直していこうと思います。

dockerのimageとvolumeを選択して消せるか、賑やかしができるdockern（どっかーん）コマンド

公開日: 2023/10/14

WEBRickのqueryをパターンマッチで取り出す

2023/10/14

に公開

WEBRickではリクエストのクエリをreq.queryで取得できます。

WEBrick::HTTPRequest#query (Ruby 3.2 リファレンスマニュアル)🔗

この戻り値はHashなので、例えばhogeを取得するのであればreq.query['hoge']のようにすれば値を取得できます。できますが、せっかくなのでパターンマッチで取得します。

req.query.transform_keys(&:to_sym): req.queryのHashのキーはStringなので、パターンマッチで取得するためにSymbolに変換します。
req.query.transform_keys(&:to_sym) in :hoge: パターンマッチでhogeを取り出します。ローカル変数hogeにreq.query[“hoge”]の値が格納されます。

気がついたらパターンマッチのカッコは省略可能¹になっていたので、変数1,2個取り出すくらいならガンガンに省略していきたいですね。

Ruby3.1からだったみたい。知らなかった。 ↩

WEBRickのqueryをパターンマッチで取り出す

公開日: 2023/10/14

slidevでスライドの進捗に応じたプログレスバーを表示する

2023/10/9

に公開

Slidevでスライドを作成する際に、現在のページを表示しつつ、全体に対する進捗をプログレスバーとして表示したいと思い作ってみました。

Slidevではglobal-bottom.vueというファイルを作成すると、自動ですべてのスライドにそのコンポーネントがレンダリングされます。

以下の内容をglobal-bottom.vueとして配置することで、プログレスバーを表示できます。

<script setup lang="ts">
import { computed } from 'vue';

const r = 40
const strokeWidth = 11
const circumference = 2 * Math.PI * r

const progress = computed(() => {
  return ($slidev.nav.currentPage / $slidev.nav.total) * circumference;
});

const offset = computed(() => {
  return circumference - progress.value;
});
</script>

<template>
  <footer class="abs-br m-3">
    <svg w-8 viewBox="0 0 100 100">
      <circle class="base-circle" cx="50" cy="50" :r="r" fill="none" :stroke-width="strokeWidth" />
      <circle class="progress-circle" ref="progressCircle" cx="50" cy="50" :r="r" transform="rotate(-90 50 50)" fill="none" :stroke-width="strokeWidth" :stroke-dasharray="circumference" :stroke-dashoffset="offset"/>
      <text class="progress-text" font-size="9" x="50" y="52" dominant-baseline="middle" text-anchor="middle">{{ $slidev.nav.currentPage }}</text>
    </svg>
  </footer>
</template>

<style>
// 色は適当に調節してください
:root {
  --bg-stroke-color: #e2e8f0;
  --progress-stroke-color: #b91c1c;
  --text-fill-color: #020617;
}

.base-circle {
  stroke: var(--bg-stroke-color);
}

.progress-circle {
  stroke: var(--progress-stroke-color);
}

.progress-text {
  fill: var(--text-fill-color);
}
</style>

プログレスバーのデモ

slidevでスライドの進捗に応じたプログレスバーを表示する

公開日: 2023/10/9

個人サイトをリニューアルしました！（N度目）

2023/8/7

に公開

N度目のリニューアル

もう何度目かわかりませんが、個人サイトをリニューアルしました。

元のサイトはこちら🔗です（vercelにFreeでアップしているので、生き残ってはいる）。

本当は以前のサイトをもう少し継続して使用する予定だったんですが、色々とローカルでいじっていたらAstroがぶっ壊れてしまい、直すのも面倒なので作り直したという経緯です。

使用技術

Remix
Tailwind CSS / shadcn/ui
Newt
Cloudflare Pages

今回はこんな構成で作ってみました。Next.jsのAppRouterを使っても良かったのですが、Cloudflareを使ってみたかったので相性の良いRemixを採用した次第です。

Remix

かなりゴリゴリ書いてしまったので、正直Remixの開発体験がいいのか悪いのかはジャッジできません。リファクタリングしないといけない箇所がたくさんあるので、修正するなかでまた感想を書こうと思います。

Cloudflareとの相性という点ではセットアップ時にCloudflare Pagesへのデプロイを指定できるので、ここはめちゃくちゃ良かったですね。あとからちゃんと確認しましたが、npm scriptsでnpm run devをwranglerにリフレクトするような仕草もデフォルトで入っていたので、デプロイはかなりスムーズでした。

Newt

Astroでローカルがぶっ壊れたのはエラーメッセージ的におそらくMDXのパースと踏んでいたので、同じ轍を踏まぬように今回はCMSを使うことに。

microCMSを使っても良かったのですが、あえてNewtを使ってみました。なんとなくです。

CMSのエディタが個人的には好印象で、表示部分はNotionのようにいくつかのビューを選択でき、登録・編集部分では「絵文字」や「カラー」などの珍しいフォーム部品もありました。このブログでも絵文字をCMS側で登録して、それをブログ一覧に表示しています。

マイナス点としては2つあり、1つはモデルの定義の場所がわかりにくい & 設定変更後保存しなくてもアラートが出ないのでよく保存し忘れること。もう1つはSDKの使い方が微妙に分かりにくいことです。後者はある程度使っていけばわかるようになりますが、初見でGitHubのREADMEを見ただけでは、複雑なクエリの発行が難しかったです。

Cloudflare Pages

ずっと使おうと思って早数ヶ月、やっとことさ使うことができました。Pagesの方はNetlifyやVercelを使ったときの体験と大体同じなので割愛です。

今回ブログの動的OGP生成のためにCloudflare Pages functionsを使おうとしたのですが、結果として1MBの制限を超えられず使用を断念しました。

vercel/ogのcloudflare-pages版が出ていたのでそれを使った実装を考えていたのですが、おそらくvercel/og自体のバンドルサイズやらで容量制限に引っかかっていそうです。考えている過程はこちら🔗を参照いただければと思います。

まあ固定でもいいっちゃいいんですが、時間がある時にまた対応しようと思います。

残タスク

とりあえず公開できるくらいにしましたが、まだまだ実装残があります。

記事移行
技術スタックのページをつくる
アンカーリンクがページ移動するだけで、リンクが切り替わらない
ブログ、登壇の動的OGP対応
リンクカード対応
ページネーション

まずは過去記事を移行しようと思っています。

おわりに

もともと記事しかなかった個人サイトもリニューアルするたびに機能が増えていっています。

前回の更新では登壇情報が増えましたが、今回は以下の機能が増えました。

ブログのカテゴリわけとタブ表示
個人的なお知らせ機能
年ごとの登壇数集計

突然の移管は不本意でしたが、乗り換えることによって、自分の実装力の向上を図ることができ、結果として良かったかなと思っています。

とはいえ次は1年以上もつといいなあ…。

個人サイトをリニューアルしました！（N度目）

公開日: 2023/8/7