# About me

tkancfというユーザ名で登録していることが多いです。  
よく使ってるアイコン↓

![tkancf](https://i.gyazo.com/a667d153340afb4c24ad28cb4805ca0a.png)

## 趣味

- プログラミング
- コーヒー
- Magic: The Gathering
- 漫画

## 仕事

- 2018/07 - 2022/07
    - MSPの会社でクラウドインフラのエンジニア(運用・保守)
- 2022/08 - 現在
    - 上記エンジニアチームのプレイングマネージャー


# 2022年の振り返り

年始すぐに書こうと思っていたのに大分経ってしまいましたが、今書かないと時期を逃しそうなので慌てて書きます。

## 2022年の振り返り

主なイベントとしては

- 5月から同棲
- 8月から仕事でマネージャー業をやることに
- 11月に入籍

という感じに人生的に大きなイベントが複雑あった年でした。  
妻と結婚しようと決めてから、諸々一気に進めたので後半は特に忙しい一年になりました。  

### 良かったこと

#### 自炊をするようになった

一人暮らしと比較して、ちゃんと料理するようになりました。  
誰かに食べてもらえると、モチベーションが違いますね。

#### 節約するようになった

あまり計画的なお金の使い方はせずに、余った金を適当に貯めるみたいな生活をしていたんですが、結婚を期に資産管理をちゃんとするようにしました。  
衝動買いの頻度を減らせたことが一番家計に効いてます。

#### 結婚できた

ちょっと前までは結婚なんて考えられないような状況だったので、自分でもびっくりです。  
末永く仲良くやっていきたいですね。

[https://twitter.com/tkancf/status/1594873686888222721?s=20&t=v_Ll0h92NT6eogk0Wr4JKA:embed]

### Motto

#### インプット量

生活習慣などがガラッと変わったのもあり、インプットの時間をあまり取れなかったのが反省点です。
今の生活サイクルに慣れた部分はかなりあるので、少しづつ増やしていこうと思っています。  

#### 仕事への取り組み

もうちょっと色々できたな〜と思う部分はあるので、要改善ですね。  
これについては、会社での目標をたててるのでそれを頑張る方針でやっていきます。

#### 技術的なアウトプット

雑記はいくつか書いたんですが、技術ブログをあまり書けませんでした。  
来年はもう少しかきたいです。

## 2023年の目標

- 貯金する
  - 大きめの買い物があるので、それを除いてもプラスになるようにする
- 本を読む
  - 最近読めてなくて、溜まってるので月に1冊は読む
- ブログを継続して書く
  - 技術ブログを優先的に書きます

以上、こんな感じで今年もがんばります。


# 2023年の振り返り

![Title Image](https://i.gyazo.com/c1486102d84730f1d1a744ac70455841.png)

年末なので、今年1年を振り返ってみます。٩( ᐛ )و

## 作ったもの・書いたもの等

### ブログ

今年は下記20件のブログを書きました。今年の4月にブログをはてなブログから、Astro + Cloudflare Pagesに移行してから、ブログを書く頻度が上がりました。去年は年間10件に満たなかったので、今年の20件は大幅な増加です。  
増えた理由としては、普段のメモの取り方を変えたこと、Twitterをほぼやめたことでブログについて考える頻度を増やせたのかなと思っています。

- [Self-hosted LiveSyncとFly.ioを使って、Obsidianのメモを無料で同期する](https://tkancf.com/blog/sync-obsidian-notes-free-self-hosted-livesync-flyio/)
- [CloudFlare PagesでホストしているAstro.jsブログでリダイレクトする方法](https://tkancf.com/blog/setting-up-redirects-astro-cloudflare-pages/)
- [VimのCTRL-K <Space>を理解する](https://tkancf.com/blog/understanding-vim-ctrl-k-space/)
- [ISUCON13に参加しました。最終スコアは8654でした](https://tkancf.com/blog/isucon13/)
- [tofu65キーボードを買いました](https://tkancf.com/blog/tofu65-keyboard-review/)
- [SvelteKitでカードゲームのプロキシメーカーを作りました](https://tkancf.com/blog/created-a-card-game-proxy-maker-with-sveltekit/)
- [GitHub Mobile + GitHub issueでメモが良い感じ](https://tkancf.com/blog/github-mobile-and-issue-as-memo/)
- [$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd ) を理解する](https://tkancf.com/blog/understanding-bash-source/)
- [iTerm2でベルの音を止める](https://tkancf.com/blog/mute-iterm2-bell/)
- [Astroのバージョンをv2からv3に上げました](https://tkancf.com/blog/update-astro-v2-to-v3/)
- [GitHub ActionsでPulumiをCI/CDしてみた](https://tkancf.com/blog/trying-cicd-with-pulumi-using-github-actions/)
- [Pulumi+GoでCloudflareのDNS既存リソースをインポートして管理してみた](https://tkancf.com/blog/managing-and-importing-existing-cloudflare-dns-resources-pulumi-go/)
- [cdコマンドを拡張したzoxideコマンドが便利](https://tkancf.com/blog/zoxide-a-convenient-extension-of-the-cd-command/)
- [CloudFlare Workers、Cloudflare D1、HonoでLINE botを作りました](https://tkancf.com/blog/creating-line-bot-with-cloudflare-workers-d1-and-hono/)
- [『SOFT SKILLS ソフトウェア開発者の人生マニュアル』を読み返しました](https://tkancf.com/blog/reading-soft-skills-the-software-developers-life-manual/)
- [Raycast のクリップボードヒストリーは Command+.で結合できる](https://tkancf.com/blog/raycast-clipboard-history-merge-with-cmd-period/)
- [Commandキーをtmuxのプレフィックスキーとして使う方法 on Iterm2](https://tkancf.com/blog/command-as-tmux-prefix-key/)
- [AstroとCloudflare Pagesでブログを作成しました](https://tkancf.com/blog/astro-and-cloudflare-pages-blog-creation/)
- [ブログをAstroへ以降しました](https://tkancf.com/blog/first-post/)
- [過去に別のブログで書いた技術記事まとめ](https://tkancf.com/blog/past-technical-articles-collection/)

### GitHub

GitHubは例年特に何もしていないのでまっさらなんですが、今年は以前のブログで触れた通り、ブログの記事管理をAstroに変更したり、Cloudflare WorkersでLINE botの作成などを行いそれなりに草が生えました。

下記が2022年の草
![GitHub Contribution 2022](https://i.gyazo.com/7da2fbabdbcf2d5857bb12f1d8d7cd47.png)

そして、これが今年(2023年)の草です。
![GitHub Contribution 2023](https://i.gyazo.com/17f0aeabdd6fc5068352a875e307647e.png)

4月にブログを移行してからしばらくは、ブログの記事を書くためにコミットできていましたが、5〜10月にほぼ何もできませんでした。  
10月中頃に結婚式が終わって一段落して以降の10月末頃から、またコミットできるようになりました。来年は年間通してコミットし続けられると良いですね。

### 作ったもの

以下プライベートで作っていたものです。  

- カードゲームのプロキシメーカー
  - SvelteKit + Cloudflare Pages
  - 個人的に欲しい機能を満たすものが無かったので自作しました
  - ブログも書きました: [SvelteKitでカードゲームのプロキシメーカーを作りました](https://tkancf.com/blog/created-a-card-game-proxy-maker-with-sveltekit/)
- LINE bot
  - Cloudflare Workers + Cloudflare D1 + Hono
  - Cloudflare Workersのお試し兼、妻とのやり取りで普通に欲しかったので作りました。今も少しずつ改良しながら便利に使っています
  - ブログも書きました: [CloudFlare Workers、Cloudflare D1、HonoでLINE botを作りました](https://tkancf.com/blog/creating-line-bot-with-cloudflare-workers-d1-and-hono/)
- MoneyForwardのデータをもとに、色々とグラフを作成して表示するためのツール
  - Go + Google Spreadsheet + Google Sites
  - MoneyForwardのデータをGoogle Spreadsheetにエクスポートして、Google Sitesで表示するためのツール
  - 毎月1回、家計簿の振り返りを行っていますが、MoneyForwardプレミアムのグラフだけだと、振り返りに必要な情報が足りないので作りました
  - Google Sitesは簡単にアクセス権限を設定できるし、Google Spreadsheetのグラフを並べたページを作成出来るので便利ですね
- ISUCON用便利スクリプト
  - ISUCONのために作ったスクリプト郡
    - [tkancf/isucon-tools](https://github.com/tkancf/isucon-tools)
  - ISUCON13では勉強不足を感じたので、次回に向けて引き続き育てていきたいです

全体的に自分の欲求を満たすために作ったものが多いですね。  
今は副業もしておらず、仕事でプログラミングする機会もほぼ無いのでプライベートで手を動かしていないと何も出来なくなりそうで恐怖しています。引き続き精進していきたいです。

## 仕事

2022年の8月から仕事でマネージャー業をやることになり、1年と少し経過しました。  
業務内容としてはチームメンバーのマネジメントが職務の中心で、ピープルマネジメントが軸になっています。  
1on1、評価、採用、目標設定、キャリアパス、チームビルディング、チームの課題の発見・整理・解決が良くある業務です。
エンジニアリングマネージャーという区分が一番近いのかなと思っています。  
プレイヤーをやっていた時と比べると、時間の区切り方が細かくなっておりバタバタしていると感じていましたが、流石に1年経つと慣れてきました。
プレイヤーとしての時間区切りが数時間単位だったのに対して、マネージャーとしての時間区切りは15分から1時間を単位にして会議・1on1・タスクを切り替えていくので、時間の区切り方が細かくなっていると感じています。  
採用面接など、まだ慣れない部分もあって、チームメンバーから偶に忙しそうと言われることがあるのが反省点なので、余裕があるように振る舞いたいですね。  
最近、[『エンジニアリングマネージャーのしごと ―チームが必要とするマネージャーになる方法』](https://amzn.to/47ncyHk)という本を読んでいて、自分のやっていることが本に書いてあることと似ているなと思いました。まだ読んでいる途中ですが、読み終わったらブログにまとめたいと思います。

## プライベート

### イベント

大きなイベントとしては、今年は結婚式を挙げました。妻と二人で相談しつつ準備を進め、無事に挙げることが出来ました。  
式の2, 3ヶ月前になると、やらなければいけないタスクが多くて大変でしたが、挙げて良かったなと思っています。
手書きが必要なタスクを苦手としているんですが、所々それらのタスクが必要で消耗しました。
結婚式の準備に力を取られすぎて、月に一度妻とやっている1on1を少しサボってしまったので、来年は忘れずにやりたいです。

### 生活

結婚式以外だと、今年は例年と比較して体調を崩すことが多かったです。リモートワークになってから、ベースの体力がなくなっている自覚はあるので筋トレで体力を増やしたいです。

今年は普段のメモ環境構築の検討・変更を繰り返していました。
11月頃にObsidianに落ち着いたんですが、直近2ヶ月ぐらいは良い感じのリズムを作れているので、引き続きやり方を改善しつつ、アウトプットに繋げていけると良いなと思っています。

## 2024年について

下記はやりたいなと思っています。

- ISUCON14に向けての準備
  - ISUCON13では勉強不足を感じたので、単純に練習量を増やしていきたいです
- ブログを継続して書く
  - 今年は20件書けたので、来年はそれ以上に書けるようにしたいです
- マネジメント関連の本を読む
  - 今は『エンジニアリングマネージャーのしごと ―チームが必要とするマネージャーになる方法』を読んでいますが、他にも気になる本はいくつかあるので読んでいきたいです

今年も1年お世話になりました。来年もよろしくお願いします。٩( ᐛ )و


# 個人メモ用のサイトを作ってみた

メモ用のツールとしてObsidianとかNotionとか流行ってる中、何が良いのか試しつつメモの管理手法について調べてました。  
PKM(Personal Knowledge Management)といって結構色々と手法があるようで、有名なものにZettelkasten、LYT、エバーグリーンノートなんかがあるようです。

一通り有名どころの手法を知ったので、それを活かしつつ公開できるサイトがあると良いな〜と思ったのでこのブログとは別で用意してみました。  
作ったサイトは TKM というサイトになってます。

2024-08-05追記: ブログとうまく使い分けられなかったので公開やめました。

HonoのSSGを利用してCloudflareで公開たんですが、ほぼ本ブログのコード使い回しなので制作時間は1時間未満とかです。  
Backlinksという、ページ末尾にそのページへリンクされているページの一覧を表示するようにした点だけがこだわりポイントです。  
現状は作ったばかりなので数十程度のメモしか置けてないですが、ちょっとずつ育てていけたら面白いかなと思ってます。

ちなみにメモツールは結局Neovimになってます。(Vimのない生活にはどうやっても馴染めなかったよ...)  
[epwalsh/obsidian.nvim](https://github.com/epwalsh/obsidian.nvim) というプラグインがObsidianのようにメモを作れるNeovimのプラグインになっており、ObsidianもVimも好きな私にはめちゃくちゃフィットしました。おすすめです。  

自分のメモの作り方に合うようにちょっとしたプラグインも書いてみたりしました。  
久々にVimの設定いじったので満足です。しばらくこの環境で遊んでみようと思います。


# 2024年の振り返り

もう2月なんですが、振り返ります。

## 作ったもの・書いたもの等

[はてなブックマークからOmnivoreに移行するためのツールを作ったり](https://zenn.dev/tkancf/articles/c323bf1c64eafb)、[ブログをAstroからHonoのSSGに移行したり](blog/blog-migration-astro-to-hono.md)と色々やれてました。  
5月中頃に妻の妊娠が分かり、それ以降バタバタしていたら何もできなくなってしまったのが残念ですが、12月に無事に産まれたのでもう少し育児が落ち着いたら色々と再開したいと思います。

### GitHub

下記が2023年の草  
![GitHub Contribution 2023](https://gyazo.com/1cbdc29b57b91024b1ff8b1fc21d465e.jpeg)  
そして、これが今年(2024年)の草です。  
![GitHub Contribution 2024](https://gyazo.com/0dfc2849822cb089a26558e46083ecd2.jpeg)  
前半に頑張りを感じますが、後半の失速具合がすごいですね。  

## 仕事

子供が生まれたら育休に入りたいということで引き継ぎをする必要があり、12月前は過去最高に忙しかったです。  
育休に入るのとあわせて、現チームのマネージャーを引き継いで異動希望を出していた別部署への移籍もすることになったので、てんやわんやでした。  
久々にマネージャー職から離れて、手を動かす仕事の比率が増えそうなので、気合い入れてやっていこうと思います。

## プライベート

### イベント

大きなイベントとして、今年は12月に子供が産まれました。  
色々と分からんことだらけで困ったりしてますが、会社も快く育休取らせてくれたりと環境には恵まれていると思ってるので頑張りたいですね。  
最初の1ヶ月はドッタンバッタン大騒ぎって気持ちでしたが、2ヶ月過ぎてから少し落ち着いてきた気がします。  
子育て、なんとなく障害対応に似てる気がするのでバタバタしてるときは、やばいアラート発生したな！って思いながら対応してます。  
初めて💩が膝に飛んだときのCRITICALアラート感すごかったです。(今は慣れました。)

### 生活

仕事の残業時間が多い月が増えていた事もあってスーパーの惣菜で終わりみたいな日が多めでした。  
12月以降はほぼ毎日自炊出来てるのでいい感じです。クラシルのYouTubeは神。  
あともうちょっとだけ、運動量増やしたいです。  
概ね健康に生きれたので、継続したいですね。

### 趣味

Magic: The Gatheringをしてました。  
ついにレガシーに手を出してしまい、緑ポストと青単デルバーを組んでしまいました。  
いつかデュアランドに手を出してしまいそうで怖いですよ。  
2025年はもっとリミテッドやりたいな〜と思っています。

## 2025年の目標

下記はやりたいなと思っています。

- ブログ書く量を増やす
- 子育て頑張る
- 筋トレを継続してやる

引き続きよろしくお願いします。


# blink.nvimでobsidian.nvimの補完を利用する方法

obsidian.nvimではリンク先ファイルの補完にnvim-cmpの補完ソースを提供していて、それ以外の保管ソースは用意されていません。
ただ、blink.nvimでは、`saghen/blink.compat`を利用する事でnvim-cmp補完ソースを使えるので、obsidian.nvimの補完が使えます。  
どう設定すれば良いかわからず、しばらく試行錯誤したのでメモとして置いておきます。

## 設定例

最終的に下記設定にすれば、いい感じになります。

```lua
return {
  {
    'saghen/blink.cmp',
    version = false,
    dependencies = {
      { "rafamadriz/friendly-snippets" },
      { "saghen/blink.compat", lazy = true, version = false },
      { "https://github.com/epwalsh/obsidian.nvim" },
    },

    ---@module 'blink.cmp'
    ---@type blink.cmp.Config
    opts = {
      -- 'default' for mappings similar to built-in completion
      -- 'super-tab' for mappings similar to vscode (tab to accept, arrow keys to navigate)
      -- 'enter' for mappings similar to 'super-tab' but with 'enter' to accept
      -- See the full "keymap" documentation for information on defining your own keymap.
      keymap = { preset = 'super-tab' },
      completion = { list = { selection = { preselect = false, auto_insert = false } } },
      appearance = {
        -- Sets the fallback highlight groups to nvim-cmp's highlight groups
        -- Useful for when your theme doesn't support blink.cmp
        -- Will be removed in a future release
        use_nvim_cmp_as_default = true,
        -- Set to 'mono' for 'Nerd Font Mono' or 'normal' for 'Nerd Font'
        -- Adjusts spacing to ensure icons are aligned
        nerd_font_variant = 'mono'
      },

      -- Default list of enabled providers defined so that you can extend it
      -- elsewhere in your config, without redefining it, due to `opts_extend`
      sources = {
        default = { "obsidian", "obsidian_new", "obsidian_tags", "lsp", "path", "snippets", "buffer" },
        providers = {
          obsidian = {
            name = "obsidian",
            module = "blink.compat.source",
          },
          obsidian_new = {
            name = "obsidian_new",
            module = "blink.compat.source",
          },
          obsidian_tags = {
            name = "obsidian_tags",
            module = "blink.compat.source",
          },
        },
      },
    },
    opts_extend = { "sources.default" }
  }
}
```

`saghen/blink.compat` をdependenciesに入れて、sourcesのprovidersにobsidianのソースを定義、それをsources.defaultに入れてあげればOKでした。  
[obsidian.nvimのこのIssue](https://github.com/epwalsh/obsidian.nvim/issues/770)にQ&Aと関連する修正commitが入っています。


## 試行錯誤メモ

- [blink.nvimでobsidian.nvimの補完を利用する](https://note.tkancf.com/20250110153217)

## 参考資料

- [Support blink.nvim Autocomplete · Issue #770 · epwalsh/obsidian.nvim](https://github.com/epwalsh/obsidian.nvim/issues/770)
- [dotfiles/.config/nvim/lua/plugins/blink.lua at edae7c4933300faf024b6cf6585085351840bba1 · rbmarliere/dotfiles](https://github.com/rbmarliere/dotfiles/blob/edae7c4933300faf024b6cf6585085351840bba1/.config/nvim/lua/plugins/blink.lua)


# snacks.nvimを試したらいい感じ

便利なNeovimプラグインの詰め合わせセット的なプラグインのsnacks.nvimを試しました。
詰め合わせセットですが、部分的に導入することが可能なので「何を入れたのかよく分からなくてモヤモヤする」みたいな状況になりづらくなっています。  
各プラグインの完成度がとても高く便利なのでかなりおすすめです。
私は個人的にpickerとScratch bufferで心を掴まれました。

含まれているプラグインの一覧は[snacks.nvimのREADME](https://github.com/folke/snacks.nvim)を見たほうが良いと思うので、個人的に試して良かったプラグインとその推しポイントを紹介します。

## [picker](https://github.com/folke/snacks.nvim/blob/main/docs/picker.md)

![pickerの画像](https://gyazo.com/639a3c1cf01260d97d8f2837e563fbc9.jpeg)

fuzzy finderです。Neovimのfuzzy finderには、他にもtelescope.nvim、fzf-luaなど沢山あるのでどれを選ぶかは好みになってくるんですが、私はsnacks.nvimのpickerが好みでした。  
今まではtelescope.nvimを利用していたんですが、デフォルトで提供されているソースの見た目が私好みでした。  

- 見た目の違い
    - telescope.nvimのcommand_history
        - ![telescope.nvimのcommand_history](https://gyazo.com/950d534520951ef64497fff3f8eb3de0.jpeg)
    - snacks.nvim pickerのcommand_history
        - ![snacks.nvim pickerのcommand_history](https://gyazo.com/8961a742d06f8d4dab73f1f37bb9925c.jpeg)

見た目以外の部分では、snacks.nvimの[bufdelete](https://github.com/folke/snacks.nvim/blob/main/docs/bufdelete.md)との組み合わせでバッファの絞り込み画面から、`dd`とするだけでバッファの削除が可能です。  
これまでの`:bd`を連打していた生活からはおさらばできそうです。

![snacks.nvimのbufdelete](https://i.gyazo.com/d3204992c64085056a82269571c5e336.gif)


## [explorer](https://github.com/folke/snacks.nvim/blob/main/docs/explorer.md)

ファイルエクスプローラーです。  
個人的にはこれまでoil.nvimを使っていて、不満は無いんですがファイルエクスプローラーに絞り込み機能が付属しているのは今まで見たことが無かったので紹介します。(私が知らないだけで、他プラグインもあるかもしれないです)  
下記のようにファイルエクスプローラーに絞り込み機能がついており、検索文字をファイル名に含むものだけ一覧表示可能です。  
変わらずメインはoil.nvimを使うつもりですが、用途ごとに使い分けるのも良さそうだなと思っています。

![snacks.nvimのexplorer](https://gyazo.com/32d0cb1e95d6101669b209e21f114a61.jpeg)

## [indent](https://github.com/folke/snacks.nvim/blob/main/docs/indent.md)

現在のインデントの深さに対応して線を引いてくれるプラグインです。  
この手のプラグイン、なんとなく入れたことが無かったんですが、有効にするだけなら敷居が低いので入れてみました。入れてみたらめっちゃ便利ですね。  
デフォルトだと線が描画されるときにアニメーションが入ってオシャレなんですが、個人的にはさっさと描画されて欲しいのでOFFにしています。

```lua
opts = {
    indent = {
        enabled = true,
        animate = {
            enabled = false
        }
    }
}
```

![snacks.nvimのindent](https://gyazo.com/1968dd50e22f6c05f19638bcd4b04f24.jpeg)

## [lazygit](https://github.com/folke/snacks.nvim/blob/main/docs/lazygit.md)

Neovim上でLazygitを触れるようにするプラグインです。  
Neovimのカラースキームで起動してくれます。ｵｼｬﾚ!!

![snacks.nvimのlazygit](https://gyazo.com/b3d361058206c578c863e3ef5fca2d7d.jpeg)

## [scratch](https://github.com/folke/snacks.nvim/blob/main/docs/scratch.md)

現在開いているディレクトリをベースに、ちょっとしたコードやメモを書いておくことが出来て、luaのコードならそのまま実行ができます。  
luaのコード実行が出来るのが、ちょっとNeovimの設定用にlua関数試してみるか...とかやってるときにかなり便利です。

![snacks.nvimのscratch](https://gyazo.com/b90c07663e5023053341a96f90a12c32.jpeg)


# このサイトでllms-full.txtを出力するようにした

このサイト (https://tkancf.com/) でllms-full.txtを出すようにしました。https://tkancf.com/llms-full.txt からアクセス可能です。

## llms.txt、llms-full.txtについて

[The /llms.txt file – llms-txt](https://llmstxt.org/)に詳しいです。  
ざっくり説明だと、llms.txtにサイト・コンテンツの概要、リンク集を用意。llms-full.txtにサイトの全コンテンツを用意してLLMで便利に使おうよってルールです。

## 理由

ブログのデータを[Google NotebookLM](https://notebooklm.google.com/)、などに丸っと取り込んで活用できたら便利かな〜というのと、今後AIツールが増えていったときにペラ一のデータで存在していたほうが入力しやすいという状況が発生する機会が増えそうという予測で追加してみました。

## 実装

このPRで[Add llms-full.txt by tkancf · Pull Request #58 · tkancf/tkancf.com](https://github.com/tkancf/tkancf.com/pull/58/files)追加しています。  
現状、このサイトは[quartz](https://quartz.jzhao.xyz/)を使って作ってるんですが、そのquartzのビルドスクリプト内でllms-full.txtを生成してtxt形式で保存しているだけです。

## お気持ち

各サイトでのスタンダードになったら、LLMへの情報入力で便利そうなので流行って欲しいな〜という気持ちです。

## 参考

[このサイトで llms-full.txt を提供し始めた | Hirotaka Miyagi](https://www.mh4gf.dev/articles/llms-full-txt)


# Commandキーをtmuxのプレフィックスキーとして使う方法 on iTerm2

## はじめに

tmuxのプレフィックスキーに最適なキーを探して数年が経ちました。
Vimのキーマップやターミナルのショートカットを考慮するとプレフィックスキーとして使える組み合わせってほぼ残って無いです。
(デフォルトのCtrl+bとか、shellでめっちゃ多用します)

なので色々な組み合わせを試してきたんですが、最近MacだったらCommandキーをプレフィックスキーとして使えば良いのではと考えて設定してみたら結構いい感じです。

「Commandキー+何かのキー」をプレフィックスキーとして使うメリットには主に下記2点が挙がります。  

- 押しやすい位置にある
- ターミナルで動くツール(vim, bash, 他CLIツール類)とショートカットでバッティングすることが無い(多分)

親指で押せる位置にあるというのは、ターミナルで生活する者としては結構重要です。小指とかで押すCtrl等をプレフィックスキーとして使用すると小指が死んでしまいます。
Commandキー単押しでプレフィックスキーとして動作させることも可能ですし、 `Commandキー + '` をtmuxのpane分割キーとして設定すること等も可能です。

## 前提

- 下記環境で動作確認を行っています。
  - macOS Catalinaバージョン10.15.5
  - iTerm2 Build 3.3.11
  - tmux 3.0a

## 設定方法

iTerm2にはキーボードショートカットを自分で登録する機能が最初からついてます。
ショートカットを入力した際に色々なアクションを実行できるのですが、そんなアクションの中に "Send Hex Code" というアクションがあります。
その名の通りショートカットを入力した際にASCIIコードを送信してくれる機能です。  
これを利用して、Commandキーを入力した際にtmuxのプレフィックスキーとして設定したキーのASCIIコードを送信してもらいます。

どのキーがASCIIコードの16進数で何に該当するのかは下記サイトをみると分かります。  
ＡＳＣＩＩコード表: https://ja.wikipedia.org/wiki/ASCII

### tmux 側の設定

tmuxのprefix設定は何でも良いわけではありません。
tmuxでは `Ctrl-<Space>` をプレフィックスキーとして使うことが出来るのですが、上記 "send Hex Code" の機能ではASCIIコード表に載っている文字もしくは制御文字しか対応していません。

なので普段使わなさそうな制御文字をプレフィックスキーとして利用します。
ASCIIコードの制御文字とその説明はWikipediaみると分かりやすいです。  
Wikipedia制御文字: https://ja.wikipedia.org/wiki/%E5%88%B6%E5%BE%A1%E6%96%87%E5%AD%97

私は `Ctrl + \` をtmuxのプレフィックスキーとして設定しました。 (制御文字としてはFile Separatorだそうです。)

`.tmux.conf` の設定として書くなら下記のようになります。(エスケープするためにバッククォートが2つついてます。)

```
# prefix key
set -g prefix C-\\
```

### iTerm2 側の設定

次にiTerm2側の設定です。 iTerm2のPreferencesから設定します。(Preferencesの開き方は`Commandキー + ,`)  
Preferences > Keys > Key Bindingsの左下の + ボタンからキーボードショートカットを新しく登録します。

私の設定を例にすると以下のようになります。

1. Preferences > Keys > Key Bindingsの左下の + ボタンを押す
2. Commandキーの単押しをプレフィックスキーとして使いたいので、 "Keyboard Shortcut" のところをクリックしてCommandキーを押す
3. Actionで "Send Hex Code" を選択する
4. Actionの下に入力欄が出るので、そこに先程プレフィックスキーとして設定した制御文字のASCIIコードを入力する
   - (私はFile Separatorをプレフィックスキーとして設定したので、そのASCIIコードである1cを入力します)

上記設定ができれば下記画像のようになるはずです。

![Commandキーをプレフィックスキーとして設定できたときの画像](https://i.gyazo.com/a3622686f316808a6da999e7e290665b.png)

ここまででCommandキーをプレフィックスキーとして利用できます。動作確認して終わりです。お疲れさまでした。

### おまけ

ここまでの設定の応用として、`Commandキー + '` をプレフィックスキーを押したあとで ' キーを押したと同様の動作(tmuxのデフォルト設定だとpaneの分割) をするようにしてみます。

1. Preferences > Keys > Key Bindingsの左下の + ボタンを押す
2. `Commandキー + '`をプレフィックスキーとして使いたいので、 "Keyboard Shortcut" のところをクリックしてCommandキーを押す
3. Actionで "Send Hex Code" を選択する
4. Actionの下に入力欄が出るので、そこに先程プレフィックスキーとして設定した制御文字のASCIIコードを入力し、半角スペースを入れて ' キーのASCIIコード(22) を入力します。
   - (私はFile Separatorをプレフィックスキーとして設定したので、そのASCIIコードである1cを入力します)

これで `Commandキー + '` をpane分割のショートカットとして登録できました。  
この調子でよく使うtmuxの操作をショートカットとして登録すると便利です。私の設定は現在下記画像の様になっていました。

![上記設定が全て完了した時の画像](https://i.gyazo.com/a8a03f684ccf587baa11d047596368b5.png)

Commandキーをプレフィックスキーとして利用すると小指に優しいのでおすすめです。  
良かったらぜひ試してみて下さいませ。


# AstroとCloudflare Pagesでブログを作成しました

[Astro](https://astro.build/) を利用して[ブログ](https://tkancf.com)を作成しました。ホスト先には Cloudflare Pages を利用しています。

## 選定理由

### Astro

Astro はコンテンツが豊富な Web サイトを構築するためのフレームワークです。

> **Astro was designed for building content-rich websites.** This includes most marketing sites, publishing sites, documentation sites, blogs, portfolios, and some ecommerce sites. [^1]

[^1]: Why Astro?: https://docs.astro.build/en/concepts/why-astro/#content-focused

今回はブログを作りたかったので、静的サイトジェネレータをいくつか調べていました。
Hugo は以前に利用したことがありそれ以外を検討していたのですが、Astro は以下の点に魅力を感じたので選択しました。

- デフォルトで高速
  - 実際にブログテンプレートで生成されるデフォルトのブログを Cloudflare Pages へデプロイすると、 [PageSpeed Insights](pagespeed.web.dev)で 100 点になります。
- React、Svelte などの UI フレームワークとインテグレーションが可能
- [example projects](https://astro.new/) に参考になりそうな例が豊富

### Cloudflare Pages

Astro では静的サイトが生成されるので、ホスト先の選択肢は豊富です。
GitHub Pages、Cloudflare Pages、Netlify、Vercel などがよく選ばれているようなので、その中で検討しました。

- GitHub Pages
- Netlify
  - 上記 2 つは過去に利用したことがあるので保留
  - 両サービス共、特に不満はないです
- Vercel
  - 無料プランだと[商用利用(アドセンス含む)は不可](https://vercel.com/docs/concepts/limits/fair-use-policy#commercial-usage) なので NG
    - 今後広告入れるかは未定ですが念のため
- Cloudflare Pages
  - 利用するドメインも Cloudflare で購入・管理しているので選定

## 導入から公開までやったこと

サイトは [GitHub へ公開](https://github.com/tkancf/tkancf.com)しているのでそのコミットを貼りつつ、どんなことをしたか書いていきます。

### ブログテンプレートを生成

- コミット: https://github.com/tkancf/tkancf.com/commit/26013ad20e8d417468ddc53cbc49f690ea4ebd4f
  - 実行コマンド例

```bash
❯ npm create astro@latest -- --template blog

╭─────╮  Houston:
│ ◠ ◡ ◠  Let's make the web weird!
╰─────╯

 astro   v2.3.0 Launch sequence initiated.

   dir   Where should we create your new project?
         ./blog
      ◼  tmpl Using blog as project template
      ✔  Template copied

  deps   Install dependencies?
         Yes
      ✔  Dependencies installed

    ts   Do you plan to write TypeScript?
         Yes

   use   How strict should TypeScript be?
         Strict
      ✔  TypeScript customized

   git   Initialize a new git repository?
         Yes
      ✔  Git initialized

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./blog
         Run npm run dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

╭─────╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut! 🚀
╰─────╯
```

### 基本的な情報の更新

#### URL、サイトタイトルの変更

https://github.com/tkancf/tkancf.com/commit/eb4c2fa535b591b2d50ae0400952b3fa55cacb46

#### コピーライト部分の変更 Twitter、GitHub アカウントの URL を自分のものに変更

Prettier のフォーマットが働いてしまって diff がでかくなってます...
https://github.com/tkancf/tkancf.com/commit/763fff1bc69d1a828b8c646a5da398ce7ce02df5

#### アバウトページの更新

https://github.com/tkancf/tkancf.com/commit/4ba74d011265211f14ff17201a1ddae7a9f6bc09

#### トップページの更新

https://github.com/tkancf/tkancf.com/commit/80ff54a1eda4d53e9db2f2c90d398042c26a2178

#### 画像ファイルの更新

https://github.com/tkancf/tkancf.com/commit/46673876dd7d41b8d08a49576155300cff64b702

### .node-version ファイルを追加

この指定がない場合、デフォルトでは `12.18.0` が利用されるのですが、これだとビルドが失敗してしまうので
`.node-version` ファイルに Node.js のバージョンを指定しておきます。

https://github.com/tkancf/tkancf.com/commit/80c890626dbd4742ecb83d9694343451069107b0

### Cloudflare Pages で公開

Pages の画面から
Create a project => Connect to Git => repository の選択
などを進めていくだけのぽちぽち作業。簡単です。

### robots.txt の追加

テンプレートには robots.txt が存在していなかったので、本当に最低限のものを用意しました。
https://github.com/tkancf/tkancf.com/commit/9db9e7c09c78a7e0c00c81f92fcfb1795ff9295f

```txt
User-agent: *

Allow: /

Sitemap: https://example.com/sitemap-index.xml
```

### jpeg 画像を webp へ変換

jpeg 画像が重く PageSpeed Insights のパフォーマンスが 93 点になっていたため、webp へ変換しました。
https://github.com/tkancf/tkancf.com/commit/591fdc4d0df85b532434ce396ec123a726ee46dc

変換前の PageSpeed Insights の点数
![PageSpeed Insightsで93点の画像](https://i.gyazo.com/4c8afae8ddc1a5ad2367aab37455d884.png)

変換後の PageSpeed Insights の点数

![PageSpeed Insightsで100点の画像](https://i.gyazo.com/2f33199c706919774595dfb264e32abd.png)

変換後は無事 100 点になりました。

## 終わりに

こんな感じで簡単に公開することが出来ました。今後デザインの変更などもやっていこうかと思っています。
ブログ以外にも Astro を利用して作ってみたいコンテンツがあるので、色々遊びたいです。
また、Cloudflare Pages を調べる中で Cloudflare Workers というのがあるのを知れたので、これも試してみようと思います。


# ブログ記事一覧ページに、外部サイト記事も表示するようにしてみた

## 概要

Astroのブログ記事一覧ページに、過去に他の場所で書いた記事も一覧表示したかったので対応しました。
やったことについては、このcommitを見てもらうのが一番早いです。  
https://github.com/tkancf/tkancf.com/pull/28/commits/4ff45a1cf5c75fd5d37d0649eb1c65b743481507

## もう少し詳しく How to

- IndexページのAstroファイル (`src/pages/blog/index.astro`)に、externalPostsという配列で、外部記事のリンク集を用意
- 既存の記事 (`getCollection("blog")`)とガッチャンコ
- 合わせた配列を日付順に表示して一覧表示
- 一覧表示する際に、外部記事の場合はリンク先を外部サイトにしつつ、タイトルの前に `(外部リンク):` という文字列を付与

というのが、ざっくりやったことです。

### 変更のdiff

[commitの内容](https://github.com/tkancf/tkancf.com/pull/28/commits/4ff45a1cf5c75fd5d37d0649eb1c65b743481507)より、一部抜粋

```diff
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -6,15 +6,133 @@ import { SITE_TITLE, SITE_DESCRIPTION } from "../../consts";
 import { getCollection } from "astro:content";
 import FormattedDate from "../../components/FormattedDate.astro";

+const externalPosts = [
+  {
+    id: "external-1",
+    slug: "",
+    body: "",
+    collection: "external",
+    data: {
+      title: "VimでMarkdownの日本語メモを取るための設定をする",
+      pubDate: new Date("2017-04-27"),
+      url: "https://qiita.com/tkancf/items/e61b7c09def497204628",
+    },
+  },
+  {
+    id: "external-2",
+    slug: "",
+    body: "",
+    collection: "external",
+    data: {
+      title: "この1冊ですべてわかる 新版 コーチングの基本を読みました",
+      pubDate: new Date("2022-08-21"),
+      url: "https://tkancf.hateblo.jp/blog/%E3%81%93%E3%81%AE1%E5%86%8A%E3%81%A7%E3%81%99%E3%81%B9%E3%81%A6%E3%82%8F%E3%81%8B%E3%82%8B_%E6%96%B0%E7%89%88_%E3%82%B3%E3%83%BC%E3%83%81%E3%83%B3%E3%82%B0%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%82%92%E8%AA%AD%E3%81%BF%E3%81%BE",
+    },
+  },
(中略)
+  {
+    id: "external-10",
+    slug: "",
+    body: "",
+    collection: "external",
+    data: {
+      title: "fish shellの初期設定覚え書き（PATHの設定とか）",
+      pubDate: new Date("2017-03-30"),
+      url: "https://tkancf.hateblo.jp/blog/2017/03/30",
+    },
+  },
+];
+
 const posts = (await getCollection("blog")).sort(
   (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
 );
+
+const combinedPosts = [...posts, ...externalPosts].sort(
+  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
+);
 ---
@@ -40,10 +158,19 @@ const posts = (await getCollection("blog")).sort(
       <section>
         <ul>
           {
-            posts.map((post) => (
+            combinedPosts.map((post) => (
               <li>
                 <FormattedDate date={post.data.pubDate} />
-                <a href={`/blog/${post.slug}/`}>{post.data.title}</a>
+                <a
+                  href={
+                    post.collection === "external"
+                      ? post.data.url
+                      : `/blog/${post.slug}/`
+                  }
+                >
+                  {post.collection === "external" ? "(外部リンク): " : ""}
+                  {post.data.title}{" "}
+                </a>
               </li>
             ))
           }
```

以上、とっても簡単でした。Astroは便利ですね。


# Gitでマルチバイト文字列がエスケープされる対策

デフォルトだとGitでマルチバイト文字列がエスケープされるのでその対策方法のメモです。

## どうすればいいのか？

core.quotepath オプションを false にする

下記コマンドを実行する

```bash
git config --global core.quotepath false
```

またはgitconfigに下記記載する

```
[core]
 quotepath = false
```

## core.quotepath is なんのオプション

このオプションがtrue(デフォルト設定)になっていると、マルチバイト文字列がCのエスケープ方法と同じようにエスケープされる。

UTF-8の"μ"を例にすると、  
"μ"はhex codeで"0xC2 0xB5"なので、これを10進数にして"\302\265"にエスケープされる。

日本語文字列も同じ要領でエスケープされるので、日本語をファイル名に含むファイルをGit管理するときは false にしたほうが良い。

## 参考資料

- Git - git-config Documentation
  - https://git-scm.com/docs/git-config#Documentation/git-config.txt-corequotePath


# ブログをAstroからHonoのSSGに移行しました

このブログは元々Astroを使って生成していました。

Astroはサクッとコンテンツメインのサイトが作れて便利なんですが、[Blogを作り、育み、慈しむ ~ Blog Hacks 2024](https://junkyard.song.mu/slides/yapc-hiroshima-2024/#0)というスライドを見て、もうちょっと「好きなもの」を使って作り変えるのも良いかなと思っていました。

同じくらいの時期に[Honoのv4でSSGが可能になり](https://zenn.dev/yusukebe/articles/b20025ebda310a)、触ってみたい気持ちが高まっていたので移行してみました。

Honoは以前、CloudFlare Workersで[LINE botを作ったとき](https://tkancf.com/blog/creating-line-bot-with-cloudflare-workers-d1-and-hono)に使ったんですが、かなり感触が良かったので定期的に状況をウォッチしていました。  
Hono自体も良いですし、[作者さん(@yusukebe)](https://github.com/yusukebe)のブログがワクワクする内容で好きなんですよね。  
[Honoのv4が2月9日にリリースされます](https://zenn.dev/yusukebe/articles/b20025ebda310a)とか、[OSSで世界と戦うために - ゆーすけべー日記](https://yusukebe.com/posts/2023/oss-against-the-world/)とか。

## 移行作業について

移行と言いつつ既存のコードはほとんど残っておらず、記事以外はほぼ作り直しになりましたが、Honoはシンプルで公式ドキュメントもexampleが分かりやすく、[先行事例](https://zenn.dev/razokulover/articles/9818ef632f677f)もあったので、大きくハマって悩むこともなく作れました。  
ざっくり以下のような流れで作りました。

- [yusukebe/hono-ssg-example](https://github.com/yusukebe/hono-ssg-example/)を参考に最小構成で動くことを確認
- [remark](https://remark.js.org/)を使ってMarkdownからHTML生成→表示確認
- CSSを適用
- sitemapを追加
- RSSフィード作成
- デプロイして動作確認

## やったこと

私が雑にお試しして試行錯誤しているリポジトリは[GitHub - tkancf/sandbox](https://github.com/tkancf/sandbox/tree/main/hono-ssg)です。

### 最小構成で動かしてみる

まずは、Hono作者さんの[yusukebe/hono-ssg-example](https://github.com/yusukebe/hono-ssg-example/)を参考に別のリポジトリでとりあえず生成できることを確認するだけのコードを用意してみました。  
[yusukebe/hono-ssg-example](https://github.com/yusukebe/hono-ssg-example/)はHono v4公開前にpatchを適用して作成しているexampleだったので、改変しつつ動かしてみました。  
[この辺りのcommit](https://github.com/tkancf/sandbox/tree/22af695683965d210df1c0d50d87c14ad1b5a1fd/hono-ssg)が最小構成で動くことを確認できた所だと思います。  

[Hono v4紹介記事](https://zenn.dev/yusukebe/articles/b20025ebda310a)では、静的ページを生成するために`build.ts`というファイルを作っていましたが、`@hono/vite-ssg`というViteのプラグインを使えば`build.ts`は不要でした。  
細かい部分は[該当commit](https://github.com/tkancf/sandbox/tree/22af695683965d210df1c0d50d87c14ad1b5a1fd/hono-ssg)をみてもらうと分かりますが、ポイントを一部抜粋して記載します。

以下が`vite.config.ts`です。  
`@hono/vite-ssg`を使うと、`vite build`実行時に各ページを生成してくれます。

```typescript
import { defineConfig } from "vite";
import ssg from "@hono/vite-ssg"; // 追加
import devServer from "@hono/vite-dev-server";

const entry = "src/index.tsx";

export default defineConfig(() => {
  return {
    plugins: [devServer({ entry }), ssg({ entry })], // ssg({entry})を追加
  };
});
```

`src/index.tsx`についてはほぼ見た通りで、該当コードは[こちら](https://github.com/tkancf/sandbox/blob/22af695683965d210df1c0d50d87c14ad1b5a1fd/hono-ssg/src/index.tsx)です。  
`ssgParams(() => posts),`の部分は、Path Parameterがついた各パスに静的に生成されるパスを割り当てるためのミドルウェアです。  
これがないと、`/posts/hoge`みたいなページが生成されません。  

私はNext.jsを触ったことがないので知りませんでしたが、Next.jsの[generateStaticPaths](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths)と似た機能らしいです。  

```typescript
app.get(
  "/posts/:id",
  ssgParams(() => posts),
  (c) => {
    return c.render(<h1>{c.req.param("id")}</h1>);
  }
);
```

### Markdownから記事生成

ここはHono関係なく、Astroのブログテンプレートだとデフォルトで用意されていたMarkdown→HTML変換を自前で用意する工程です。  
[Astroのドキュメント](https://docs.astro.build/en/guides/markdown-content/)を見ると[remark](https://remark.js.org/)というライブラリを使っていると書いていたので、同じライブラリを使って同様の機能を用意しました。  
該当コードは[src/lib/post.ts](https://github.com/tkancf/tkancf.com/blob/bc9f6936b2bd0a73d997281892e1c11c16bfce14/src/lib/post.ts)です。remarkを使えば簡単に用意できました。

こんな感じでパースできます。便利。

```typescript
      const content = fs.readFileSync(filePath, { encoding: "utf-8" });
      const result = await remark()
        .use(remarkParse)
        .use(remarkFrontmatter, [
          { type: "yaml", marker: "-", anywhere: false },
        ])
        .use(remarkExtractFrontmatter, {
          yaml: yaml.parse,
          name: "frontMatter",
        })
        .use(remarkExpressiveCode, {
          theme: "github-light",
        })
        .use(remarkGfm)
        .use(remarkRehype, { allowDangerousHtml: true })
        .use(rehypeStringify, { allowDangerousHtml: true })
        .use(remarkGfm)
        .process(content);
```

### sitemapの生成

こちらもAstroのブログテンプレートだとデフォルトで用意されていましたが、自前で生成してあげる必要があります。  
とは言ってもコード書くまでもなかったです。

`vite-plugin-sitemap`を入れて、`vite.config.ts`に設定を書いてあげるだけで完了しました。

追加後の`vite.config.ts`

```typescript
import { defineConfig } from "vite";
import ssg from "@hono/vite-ssg";
import devServer from "@hono/vite-dev-server";
import Sitemap from "vite-plugin-sitemap";  // vite-plugin-sitemapをいれて
import { baseURL } from "./src/lib/constants";

const entry = "src/index.tsx";

export default defineConfig(() => {
  return {
    plugins: [
      devServer({ entry }),
      ssg({ entry }),
      Sitemap({ hostname: baseURL, generateRobotsTxt: true }), // ←追加した設定はこの部分
    ],
  };
});
```

### RSSフィードの生成

こちらもAstroのブログテンプレートだとデフォルトで用意されていたRSSフィードを生成してあげます。  
記事一覧のデータさえ用意出来ていれば`rss`を利用してサクッと作れます。

```typescript
import RSS from "rss";

(中略)

const generateFeed = async () => {
  const rss = new RSS({
    title: siteName,
    site_url: baseURL,
    description: siteName,
    feed_url: baseURL + "/feed",
    generator: siteName,
  });
  posts.forEach(async (post: any) => {
    const url = baseURL + "/blog/" + post.slug;
    rss.item({
      title: post.title,
      url: url,
      date: new Date(post.pubDate),
      description: post.description,
    });
  });

  return rss.xml();
};

app.get("/feed", async (c) => {
  const feeds = await generateFeed();
  return c.text(feeds, 200, {
    "Content-Type": "text/xml",
  });
});
```

### CSSの適用

Honoには`hono/css`というCSS in JSのヘルパーがあるので、それを利用しました。  

グローバルなCSSをどう適用すれば良いのかちょっと試行錯誤しましたが、以下のようにhtmlタグに全体適用したいCSSを付与してあげて、headタグ内に `<Style />`を書いておけば良い感じになりました。

```typescript
export const Layout: FC = (props) => {
  return (
    <html class={globalCSS}> // ここでグローバルなCSSを適用
      <Head metadata={props.metadata} />
      <Header {...props} />
      <main>{props.children}</main>
      <Footer />
    </html>
  );
};
```

```typescript
export const Head: FC = (props) => {
  return (
    <head>
      <title>{props.metadata.title}</title>
      <Style /> // これが必要
      <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
      <link rel="sitemap" href="/sitemap.xml" />
      <meta charset="utf-8" />
(中略)
    </head>
  );
};
```

### DOCTYPEの設定

`jsxRenderer`ミドルウェアを利用して以下のように付与できます。最初`jsxRenderer`ミドルウェア要らないかなと思って消していたんですが、PageSpeed InsightsでDOCTYPEが無いと警告されました。  

`jsxRenderer`ミドルウェアを利用していれば、デフォルトで付与されます。`{ docType: false }`とすることで明示的に消すことも可能なようです。

```typescript
import { jsxRenderer } from "hono/jsx-renderer";
(中略)
app.all(
  "*",
  jsxRenderer(
    ({ children }) => {
      return <>{children}</>;
    },
    { docType: "<!DOCTYPE html>" }
  )
);
```

### デプロイ

Astroを利用していたときからCloudflare Pagesでホストしていたので、そこは変えませんでした。  
GitHubリポジトリと接続してあるので、Cloudflare Pagesの設定画面からBuild configurationsだけ今回構築したものと合わせてあげるだけでOKです。  

※ただ、今回はoutput directoryも何も変わらなかったので全部そのままです。

[yusukebe/hono-ssg-example](https://github.com/yusukebe/hono-ssg-example/blob/main/package.json)を参考にしたんですが、`package.json`に以下のようなスクリプトがあると、`./dist`配下をCloudflare Pagesへすぐにデプロイできます。  
ある程度完成した段階で「Cloudflare Pages上で動き見てみたいな」と思ったときにシュッと確認できて便利でした。

```json
  "scripts": {
(中略)
    "deploy": "$npm_execpath run build && wrangler pages deploy ./dist --commit-dirty=true"
  },
```

## まとめ

以上、AstroからHonoのSSGへの移行記録でした。  
最終的な成果物は[GitHub - tkancf/tkancf.com](https://github.com/tkancf/tkancf.com)にあるので、興味があれば見てみてください。

Astroがよしなにやってくれてたんだな〜というありがたみを感じつつ、思った以上にシュッとHonoへ移行できたので良かったです。

よく分からずにAstroデフォルトのテンプレートを使ってる状態から脱したので「自分で作った感」が得られたのが一番良いですね。  
今後もブログ弄りが捗りそうです。

## 参考資料

下記リンク先を参考にさせていただきました。大感謝です。

- [Honoのv4が2月9日にリリースされます](https://zenn.dev/yusukebe/articles/b20025ebda310a)
- [個人ブログをNext.jsのSSGからHonoのSSGに移行した](https://zenn.dev/razokulover/articles/9818ef632f677f)
- [YuheiNakasaka/gialog-diary](https://github.com/YuheiNakasaka/gialog-diary/)
- [yusukebe/hono-ssg-example](https://github.com/yusukebe/hono-ssg-example/)
- [DOM 要素 – React](https://ja.legacy.reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml)
- [jbaubree/vite-plugin-sitemap: Sitemap generator plugin for Vite](https://github.com/jbaubree/vite-plugin-sitemap)
- [Blogを作り、育み、慈しむ ~ Blog Hacks 2024](https://junkyard.song.mu/slides/yapc-hiroshima-2024/#0)
- [Data Fetching: getStaticPaths | Next.js](https://nextjs.org/docs/pages/building-your-application/data-fetching/get-static-paths)
- Honoドキュメント
  - [JSX Renderer Middleware - Hono](https://hono.dev/middleware/builtin/jsx-renderer)
  - [App - Hono - Hono](https://hono.dev/api/hono)
  - [SSG Helper - Hono](https://hono.dev/helpers/ssg)
  - [css Helper - Hono](https://hono.dev/helpers/css)
- remark関連
  - [remark - markdown processor powered by plugins](https://remark.js.org/)
  - [remarkjs/remark-gfm: remark plugin to support GFM (autolink literals, footnotes, strikethrough, tables, tasklists)](https://github.com/remarkjs/remark-gfm)
  - [remarkjs/remark: markdown processor powered by plugins part of the @unifiedjs collective](https://github.com/remarkjs/remark)
  - [expressive-code/packages/remark-expressive-code at main · expressive-code/expressive-code](https://github.com/expressive-code/expressive-code/tree/main/packages/remark-expressive-code)
  - [Syntax Highlighting | Expressive Code](https://expressive-code.com/key-features/syntax-highlighting/)


# SvelteKitでカードゲームのプロキシメーカーを作りました

## 概要

Magic: The Gatheringのプロキシカード作成にいい感じのWebアプリがなかったので、SvelteKitで作りました。

- 作ったアプリ: [proxy-maker](https://proxy-maker.tkancf.com/)
- ソースコード: [github.com/tkancf/proxy-maker](https://github.com/tkancf/proxy-maker)

## 背景

趣味でMagic: The Gathering（以降MTGと表記）をやっているんですが、カードが高いです。私が普段やっているルール（モダンフォーマット）だと、高いもので一枚15,000円ぐらいします。  
一デッキ揃えると10万円とかになるので、ちょっと試してみようで買うには手が出しにくい値段になっています。そのため、まずは自分好みのデッキか試すためにプロキシカードを作成し、それで遊んでみて楽しければカードを買うという流れを私はよくやっています。

プロキシカードの作成方法は以下のような手順になります。お試し用なので私は印刷も裁断も雑にやってますが、それでも面倒な手順です。

1. カード画像を検索
    - これは公式サイトにカード画像があるので、それを利用します
2. プロキシメーカーと呼ばれるWebアプリに画像URLを入れる or カード画像をアップロード
    - ここでカード画像をまとめて印刷できるように並べてくれる
3. 上記で出来た画像を印刷機で印刷
4. 紙を裁断して、スリーブに入れる
5. 試しに遊ぶ

特に「プロキシメーカーと呼ばれるWebアプリに画像URLを入れる or カード画像をアップロード」については、既存のアプリに不満がありました。

## モチベーション

不満に思っていたのは以下の点です。

- カード画像アップロードではなく、画像URLを用意するだけでOKにしてほしい
  - カード画像は公式にあるので、そのURLを一覧でバーっと書くだけでOKにしたい
- 画像URLは改行区切りの一覧でOKにしてほしい
  - いちいち各画像のURLを別のテキストボックスに入力したくない
- 画像は9枚ずつとかではなく、何枚でも登録可能にしてほしい
  - 一デッキに75枚は必要なので、9枚ずつ登録とかやってられない

上記不満を解決してくれるようなプロキシメーカーは探した限りでは見つかりませんでした。
無いなら作るしかありません。フロントエンドはさっぱりですが、やりたいことはシンプルなので、なんとかなるかなと思いつつ作りました。

## 技術選定

技術選定する上で、検討した事項は以下です。

- 無料で維持できること
- 簡単に完成まで行けること

### 無料で維持できること

これについては機能的にフロントエンドだけで完結させられそうなので、デプロイ先にだけ注意すれば良さそうでした。  
今回はCloudflare Pagesを利用しました。

### 簡単に完成まで行けること

これについては簡単の定義があいまいで難しいですが主な基準は公式ドキュメントだけ読めば大体完成まで行けること、利用者がそこそこいて情報に困らなさそうなことです。

最初はNext.jsで作成したんですが、App Router のルーティングとPages Routerのルーティングの情報が脳内でごちゃごちゃしてしまって、分からなくなったので一度破棄しました。  
そのタイミングで、昔少しだけチュートリアルをやったSvelteを思い出したのでSvelteKitに乗り換えました。SvelteKitに乗り換えてからはサクサクっと完成まで行けました。  
CSSについては、TailwindCSSが有名所のようだったのでこれを使いました。

## 詰まった部分

詰まった部分というか、これで良いのか良くわかっていない部分としては、ボタンを押して遷移するときに入力された内容を元に画像一覧を表示するため、入力された画像URL (`imageUrls`) を遷移先の画像一覧を表示するページへどう渡して上げるのが最適解なのかよく分かりませんでした。  
同じ `+layout.svelte`を使っているページだったので、 `+layout.svelte`内で以下のようにしたんですが、これで正しいのか？？と思いつつやっていました。  
やりたいことは出来ていますが...

```js
 import { setContext } from 'svelte';
 let imageUrls: string[] = [];
 setContext('imageUrls', imageUrls);
```

[該当箇所のGitHubリンク](https://github.com/tkancf/proxy-maker/blob/aec65a651e1db3a7087d47d9226be0ea132b3672/src/routes/%2Blayout.svelte#L4)

`+page.js` を使うことでも出来そうかなと思っていて、どちらがより良い手法なのか分からんな〜と思っています。
ちゃんとドキュメント全部読んでいないので、ちゃんと読めば書いてるかもですね。とりあえず完成を急いだので、後ほどドキュメントは全部目を通したいです。

CSSについては初心者なので大体ChatGPTに聞いて解決しました。いい時代ですね。

## まとめ

この程度の規模感なら私でもフロントエンドできることが分かったので、前より恐れず色々と遊べそうだなと思っています。  
また、SvelteKitも疑問はありつつも簡単で良かったので次もSvelteKit + なにかで作ろうと思っています。


# CloudFlare Workers、Cloudflare D1、HonoでLINE botを作りました

## はじめに

妻とのお買い物リスト共有にLINEを利用しているのですが、かなり昔に投稿した買いたい物が流れてしまって遡るのが大変という事象が発生していたので、解決するためにLINE botを作成しました。
作成時の流れ、ハマった事、気づいた事などをまとめておきます。

私自身がTypeScriptほぼ初心者かつ、CloudFlare Workers、Cloudflare D1、Honoを利用したことがなく、間違っている部分があるかもしれませんのでご了承くださいませ。

## 利用技術

CloudFlare Workersが少し前から気になっていたので、下記技術スタックで作成してみました。  

- CloudFlare Workers
- CloudFlare D1
- Hono
- LINE Messaging API

内容的に単純な文字列の追加・削除を行うbotですので、Workers KV（CloudFlare WorkersのKVストア）でも良かったんですが、CloudFlare D1を触ってみたかったのもあり、この構成になりました。

## 作成したLINE bot

作成したbotのソースコードは、[tkancf-sandbox/cf-d1-line-sample](https://github.com/tkancf-sandbox/cf-d1-line-sample)にありますので、こちらを参照してください。  
※wrangler.toml内のdatabase_idが公開しても良い情報なのか確信が持てなかったので、歴史含めて改ざんしてbot名と一緒に変更してあります。  
基本的なLINE botの機能は以下の通りです。

- 一覧という言葉に反応して一覧を返す
- 追加という言葉に反応して追加する
- 削除という言葉に反応して削除する

## 最低限の機能を持ったLINE botの作成

LINE botの作成については、下記記事とドキュメントを参考にさせていただきました。  

- [Cloudflare Worker + D1 + Hono + OpenAIでLINE Botを作る](https://zenn.dev/razokulover/articles/4d0ba10083524e)
- [LINE Developersコンソールへのログイン](https://developers.line.biz/ja/docs/line-developers-console/login-account/)
- [Messaging APIを始めよう](https://developers.line.biz/ja/docs/messaging-api/getting-started/)

LINE DevelopeLINE Developersコンソールへログイン後、下記設定を行いました。

- チャネル作成
- Messaging APIの設定
- アクセストークンの取得

その後、[Cloudflare Worker + D1 + Hono + OpenAIでLINE Botを作る](https://zenn.dev/razokulover/articles/4d0ba10083524e)を参考にしながら、まずは動作確認のためにLINEでメッセージを投げたら、CloudFlare Workersのログが出力されるだけのものを作成してみます。  

プロジェクトの初期化は下記コマンドで行いました。これにより、最低限のファイル群が作成されます。

```bash
npx wrangler init プロジェクト名 -y
```

[GitHubでの該当commitのソースコード](https://github.com/tkancf-sandbox/cf-d1-line-sample/blob/fc77444cabb66afa448474e3bf689e633c5af639/src/index.ts)

```typescript
import { Hono } from "hono";

const app = new Hono();

app.get("*", (c) => c.text("Hello World!"));

app.post("/api/webhook", async (c) => {
console.log(JSON.stringify(c));
return c.json({ message: "Hello World!" });
});

export default app;
```

`npm run start`でローカル環境での動作確認が可能です。  
curlでPOSTリクエストを投げることで、Hello World!が返ってくることを確認します。

```bash
curl -X POST http://localhost:8787/api/webhook
```

上記確認が問題なければ、CloudFlare Workersにデプロイします。  
これも下記コマンドを実行するだけで簡単です。

```bash
npm run deploy
```

デプロイ後、CloudFlare WorkersにデプロイされたWorkerのURLをLINE DevelopersコンソールのWebhook URLに設定します。
URLの形式は `https://XXXX.workers.dev/api/webhook` になります。
また、今回作りたいLINE botはグループトークでの利用を想定しているので、LINE DevelopersコンソールのWebhookの利用設定で「グループ・複数人トークへの参加を許可」にチェックを入れておきます。
![LINE DevelopersコンソールのWebhookグループへの参加を許可する設定画像](https://i.gyazo.com/ae48b32f51514e92778bfe1671b57a61.png)

設定が完了したら、CloudFlare WorkersのLogsタブ内からリアルタイムでログを確認できるので、確認しながらLINEでメッセージを投げてみます。
メッセージを送った際にリアルタイムログが更新されれば、LINEとCloudFlare Workersの連携は成功しています。

## オウム返しするLINE botの作成

少し機能を追加して、LINEで送信したメッセージをオウム返しするLINE botを作成します。こちらも引き続き[Cloudflare Worker + D1 + Hono + OpenAIでLINE Botを作る](https://zenn.dev/razokulover/articles/4d0ba10083524e#%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%92%E3%81%8A%E3%81%86%E3%82%80%E8%BF%94%E3%81%97%E3%81%99%E3%82%8Bbot%E3%82%92%E4%BD%9C%E3%82%8B)を参考にさせていただきました。

[GitHubでの該当commitのソースコード](https://github.com/tkancf-sandbox/cf-d1-line-sample/blob/857a700b975851265ce82d73d7a1543119b83d74/src/index.ts)  

```typescript
import {
  MessageAPIResponseBase,
  TextMessage,
  WebhookEvent,
} from "@line/bot-sdk";
import { Hono } from "hono";

const app = new Hono();
app.get("*", (c) => c.text("Hello World!"));

app.post("/api/webhook", async (c) => {
  const data = await c.req.json();
  const events: WebhookEvent[] = (data as any).events;
  // @ts-ignore アクセストークンが読めずにエラーになるが、実環境では読めるので無視する
  const accessToken: string = c.env.CHANNEL_ACCESS_TOKEN;

  await Promise.all(
    events.map(async (event: WebhookEvent) => {
      try {
        await textEventHandler(event, accessToken);
      } catch (err: unknown) {
        if (err instanceof Error) {
          console.error(err);
        }
        return c.json({
          status: "error",
        });
      }
    })
  );
  return c.json({ message: "ok" });
});

const textEventHandler = async (
  event: WebhookEvent,
  accessToken: string
): Promise<MessageAPIResponseBase | undefined> => {
  if (event.type !== "message" || event.message.type !== "text") {
    return;
  }

  const { replyToken } = event;
  const { text } = event.message;
  const response: TextMessage = {
    type: "text",
    text,
  };
  await fetch("https://api.line.me/v2/bot/message/reply", {
    body: JSON.stringify({
      replyToken: replyToken,
      messages: [response],
    }),
    method: "POST",
    headers: {
      Authorization: `Bearer ${accessToken}`,
      "Content-Type": "application/json",
    },
  });
};

export default app;
```

上記コードについて、下記部分にVSCode上で警告が出ており、この時点で良い解決策が分からなかったので`@ts-ignore`で無視しています。  
※無視せずに解決しましたので、この先に解決方法を記載します。

```typescript
  // @ts-ignore アクセストークンが読めずにエラーになるが、実環境では読めるので無視する
  const accessToken: string = c.env.CHANNEL_ACCESS_TOKEN;
```

上記コードを `npm run deploy` でデプロイした後、アクセストークンをCloudFlare Workersへ設定します。 [wranglerのドキュメントのCommands](https://developers.cloudflare.com/workers/wrangler/commands/#secret)にやり方があるのでその通りに実行します。

```bash
wrangler secret put CHANNEL_ACCESS_TOKEN
```

この状態で対象のLINE botに対してLINEでメッセージを送信すると、オウム返ししてくれることを確認します。

### ローカルでの動作確認

手元で`npm run start`で動作している状態でも動作確認をしたくなります。  
下記LINEのMessaging APIのドキュメントを確認すると、トークでユーザーからメンションと絵文字を含むテキストメッセージが送られた場合のJSONが例示されているのでイメージしやすいです。  
[Messaging APIリファレンス](https://developers.line.biz/ja/reference/messaging-api/#wh-text)
curlでやると以下のようになりますが、ここまで長いとPostmanなどを使った方が楽です。

```bash
curl --location 'http://127.0.0.1:8787/api/webhook' \
--header 'Content-Type: application/json' \
--data-raw '

{
    "destination": "xxxxxxxxxx",
    "events": [
        {
            "replyToken": "nHuyWiB7yP5Zw52FIkcQobQuGDXCTA",
            "type": "message",
            "mode": "active",
            "timestamp": 1462629479859,
            "source": {
                "type": "group",
                "groupId": "Ca56f94637c...",
                "userId": "U4af4980629..."
            },
            "webhookEventId": "01FZ74A0TDDPYRVKNK77XKC3ZR",
            "deliveryContext": {
                "isRedelivery": false
            },
            "message": {
                "id": "444573844083572737",
                "type": "text",
                "text": "@All @example Good Morning!! (love)",
                "emojis": [
                    {
                        "index": 29,
                        "length": 6,
                        "productId": "5ac1bfd5040ab15980c9b435",
                        "emojiId": "001"
                    }
                ],
                "mention": {
                    "mentionees": [
                        {
                            "index": 0,
                            "length": 4,
                            "type": "all"
                        },
                        {
                            "index": 5,
                            "length": 8,
                            "userId": "U49585cd0d5...",
                            "type": "user"
                        }
                    ]
                }
            }
        }
    ]
}'
```

## CloudFlare D1を利用したLINE botの作成

[Cloudflare D1 documentationのGet started](https://developers.cloudflare.com/d1/get-started/) を参考にしながら、Cloudflare D1の設定を行います。

### D1の作成

下記コマンドを実行すると、Cloudflare D1のDBが作成されます。

```bash
❯ wrangler d1 create <D1のDB名>
Delegating to locally-installed wrangler@2.15.1 over global wrangler@2.16.0...
Run `npx wrangler d1 create <D1のDB名>` to use the local version directly.

--------------------
🚧 D1 is currently in open alpha and is not recommended for production data and traffic
🚧 Please report any bugs to https://github.com/cloudflare/workers-sdk/issues/new/choose
🚧 To request features, visit https://community.cloudflare.com/c/developers/d1
🚧 To give feedback, visit https://discord.gg/cloudflaredev
--------------------

✅ Successfully created DB '<D1のDB名>'!

Add the following to your wrangler.toml to connect to it from a Worker:

[[ d1_databases ]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "<D1のDB名>"
database_id = "XXXXXXXXXXXXXXXXXXXXXXXXXXXX"
```

出力の通り、末尾に出力された下記の設定をコピーして`wrangler.toml`に追記します。

```toml
[[ d1_databases ]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "<D1のDB名>"
database_id = "XXXXXXXXXXXXXXXXXXXXXXXXXXXX"
```

### ローカルのD1の初期化

ローカルでもテスト用のDBが作成できるので、初期化用のSQLを作成します。

[migration.sql](https://github.com/tkancf-sandbox/cf-d1-line-sample/blob/bf3c4fde617f059f36bd8c64a743c17a6469db5d/migration.sql)

```sql
DROP TABLE IF EXISTS shopping_list;
CREATE TABLE shopping_list (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  item TEXT NOT NULL,
  added_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
);
INSERT INTO shopping_list (item) VALUES ('milk');
```

下記コマンドでローカルのDBを初期化します。

```bash
wrangler d1 execute <D1のDB名> --local --file=./migration.sql
```

初期化したローカルのDBを参照して、データが入っていることを確認します。

```bash
wrangler d1 execute <D1のDB名> --local --command='SELECT * FROM shopping_list;'
(中略)
┌────┬──────┬─────────────────────┐
│ id │ item │ added_at            │
├────┼──────┼─────────────────────┤
│ 1  │ milk │ 2023-04-24 14:32:22 │
└────┴──────┴─────────────────────┘
```

### CloudFlare D1を参照するプログラムの作成

D1の設定が完了して、ローカルのDBも初期化できたのでworkerから参照してみます。  
あわせて、先程VSCodeで警告されていた以下のようなエラーも解消します。

- 'c.env' は 'undefined' の可能性があります。
- 'c.env.DB''は 'unknown' 型です。
- 型 'unknown' を型 'string' に割り当てることはできません。

[GitHub上の対象commitのソースコード](https://github.com/tkancf-sandbox/cf-d1-line-sample/blob/bf3c4fde617f059f36bd8c64a743c17a6469db5d/src/index.ts)

```typescript
import {
  MessageAPIResponseBase,
  TextMessage,
  WebhookEvent,
} from "@line/bot-sdk";
import { Hono } from "hono";
import { Env as BaseEnv } from "hono/dist/types/types";

type Env = BaseEnv & {
  CHANNEL_ACCESS_TOKEN: string;
  DB: D1Database;
};

const app = new Hono<{ Bindings: Env }>();

type ShoppingItem = {
  id: number;
  item: string;
  added_at: string;
};

app.get("/api/select-test", async (c) => {
  const stmt = await c.env.DB.prepare(`SELECT * FROM shopping_list;`);
  const allResults: D1Result<ShoppingItem> = await stmt.all();

  if (!allResults.results) {
    // undefiled result
    return c.json({ message: "no results" });
  }

  const results: { results: ShoppingItem[] } = {
    results: allResults.results || [],
  };
  return c.json(results);
});

app.post("/api/webhook", async (c) => {
  const data = await c.req.json();
  const events: WebhookEvent[] = (data as any).events;
  const accessToken: string = c.env.CHANNEL_ACCESS_TOKEN;

  await Promise.all(
    events.map(async (event: WebhookEvent) => {
      try {
        await textEventHandler(event, accessToken);
      } catch (err: unknown) {
        if (err instanceof Error) {
          console.error(err);
        }
        return c.json({
          status: "error",
        });
      }
    })
  );
  return c.json({ message: "ok" });
});

const textEventHandler = async (
```

`app.get("/api/select-test", async (c) => {`部分のメソッドで、CloudFlare D1のDBに接続して、データを取得しています。

VSCodeの警告については、Honoの初期化時にEnvを渡してあげることで解消しました。  
元々、HonoのtypeにEnvがあったので、これを拡張して、LINEのチャネルアクセストークンとD1のDBを追加しています。  
TypeScript全然分からないまま書いているので、もしかしたらもっと良い書き方があるかもしれません。  

- 変更前

    ```typescript
    const app = new Hono();
    ```

- 変更後

    ```typescript
    type Env = BaseEnv & {
    CHANNEL_ACCESS_TOKEN: string;
    DB: D1Database;
    };

    const app = new Hono<{ Bindings: Env }>();
    ```

### ローカルのCloudFlare D1を利用するworkerの起動

デフォルトで設定されている `npm run start` では、 `wrangler dev` を実行するようになっていますが、オプションなしで `wrangler dev` を実行しても、ローカルのCloudFlare D1を利用するようにはなっていません。  
そこで、`package.json`に`dev`というスクリプトを追加して、そちらには `--local --persist`オプションを追加することで、ローカルのCloudFlare D1を利用するようにします。

```diff
     "start": "wrangler dev",
+    "dev": "wrangler dev --local --persist",
```

### CloudFlare D1を参照するworkerの動作確認

上記までの作業が完了していれば、 `npm run dev` でローカルのworkerが起動します。  
`/api/select-test` という新しいエンドポイントを生やして参照できるようにしたので、動作を確認してみます。  
シンプルにcurlでGETリクエストを投げれば、DBから取得したデータが返ってくることが確認できます。

```bash
curl http://127.0.0.1:8787/api/select-test
```

## 全部組み合わせて、LINE botを完成させる

ここまででLINE botの動作に必要なものは全て揃いましたので、あとはそれらを組み合わせてLINE botを完成させます。  
[GitHub上での該当commitソースコード](https://github.com/tkancf-sandbox/cf-d1-line-sample/blob/e384106693da9c7f9f4295017b7a3a052ff76287/)

index.ts

```typescript
import { TextMessage, WebhookEvent } from "@line/bot-sdk";
import { Hono } from "hono";
import { Env as BaseEnv } from "hono/dist/types/types";
import { Line } from "./line";

type Env = BaseEnv & {
  CHANNEL_ACCESS_TOKEN: string;
  DB: D1Database;
};

const app = new Hono<{ Bindings: Env }>();

type ShoppingItem = {
  id: number;
  item: string;
  added_at: string;
};

app.get("/api/select-test", async (c) => {
  const stmt = await c.env.DB.prepare(`SELECT * FROM shopping_list;`);
  const allResults: D1Result<ShoppingItem> = await stmt.all();

  if (!allResults.results) {
    // undefiled result
    return c.json({ message: "no results" });
  }

  const results: { results: ShoppingItem[] } = {
    results: allResults.results || [],
  };
  return c.json(results);
});

app.post("/api/insert-test", async (c) => {
  const data = await c.req.json();
  const item = data.item;
  console.log(item);
  const stmt = await c.env.DB.prepare(
    `INSERT INTO shopping_list (item) VALUES (?);`
  ).bind(item);
  const result = await stmt.run();
  return c.json(result);
});

app.post("/api/webhook", async (c) => {
  const data = await c.req.json();
  const events: WebhookEvent[] = (data as any).events;
  const event = events
    .map((event: WebhookEvent) => {
      if (event.type != "message" || event.message.type != "text") {
        return;
      }
      return event;
    })
    .filter((event) => event)[0];
  // undefinedを除外
  if (!event) {
    return c.json({ message: "No event: ${events}" });
  }
  const { replyToken } = event;
  const { text } = event.message as TextMessage;
  const client = new Line(c.env.CHANNEL_ACCESS_TOKEN);

  if (text === "一覧") {
    const message: string = await fetchAllItems(c);
    // messageの内容がからの場合、「内容がないよう」と返信する
    if (!message) {
      await client.replyMessage("内容がないよう", replyToken);
    } else {
      await client.replyMessage(message, replyToken);
    }
    return c.json({ message: "LINE 一覧" });
  } else if (text.startsWith("追加")) {
    const items = text.replace("追加", "").split("\n");
    for (const item of items) {
      if (!item) {
        continue;
      }
      const stmt = await c.env.DB.prepare(
        `INSERT INTO shopping_list (item) VALUES (?);`
      ).bind(item);
      await stmt.run();
    }
    await client.replyMessage("追加しました", replyToken);
    return c.json({ message: "LINE 追加" });
  } else if (text.startsWith("削除")) {
    const item = text.replace("削除", "");
    const stmt = await c.env.DB.prepare(
      `DELETE FROM shopping_list WHERE item = ?;`
    ).bind(item);
    await stmt.run();
    await client.replyMessage("削除しました", replyToken);
    return c.json({ message: "LINE 削除" });
  } else if (text === "全てを削除してください" || text === "全てを削除") {
    const stmt = await c.env.DB.prepare(`DELETE FROM shopping_list;`);
    await stmt.run();
    await client.replyMessage("全て削除しました", replyToken);
    return c.json({ message: "LINE 全てを削除してください" });
  }
  return c.json({ message: "ok" });
});

const convertResultToMessage = (allResults: D1Result<ShoppingItem>): string => {
  if (!allResults.results) {
    // undefiled result
    console.log("message: ", "no results");
  }

  const results: { results: ShoppingItem[] } = {
    results: allResults.results || [],
  };
  // convert results to string
  const message: string = results.results
    .map((result) => {
      return `${result.id}: ${result.item}`;
    })
    .join("\n");
  return message;
};

const fetchAllItems = async (c: any) => {
  const stmt = await c.env.DB.prepare(`SELECT * FROM shopping_list;`);
  const allResults: D1Result<ShoppingItem> = await stmt.all();
  // allResultsのIDを1からの連番へ変換する
  if (allResults.results) {
    allResults.results = allResults.results.map((result, index) => {
      result.id = index + 1;
      return result;
    });
  }
  const message = convertResultToMessage(allResults);
  return message;
};

export default app;
```

line.ts

```typescript
import { TextMessage } from "@line/bot-sdk";

export class Line {
  private readonly headers: Record<string, string>;
  private readonly baseUrl = "https://api.line.me";

  constructor(accessToken: string) {
    this.headers = {
      Authorization: `Bearer ${accessToken}`,
      "Content-Type": "application/json",
    };
  }

  public async replyMessage(
    text: string,
    replyToken: string
  ): Promise<Response | null> {
    const message: TextMessage = {
      type: "text",
      text,
    };
    return await fetch(`${this.baseUrl}/v2/bot/message/reply`, {
      method: "POST",
      headers: this.headers,
      body: JSON.stringify({
        replyToken: replyToken,
        messages: [message],
      }),
    }).catch((err) => {
      console.log(`LINE API error: ${err}`);
      return null;
    });
  }
}
```

ここまでの内容を `npm run deploy` でデプロイすることで、LINE Botの完成です。

## まとめ

CloudFlareの製品はいままでCDNくらいしか使っていなかったのですが、ブログをCloudFlare Pagesへ載せた際に興味を持って色々触ってみました。
CloudFlare Workers、Cloudflare D1、Honoいずれも初めて触りましたが無料でこれだけ遊べるのはすごいですね。特にD1はRDBが無料でこんなに使えて良いのかと驚きました。今回のような小規模な趣味プロジェクトで使うには十分すぎます。  
フレームワークはHonoを利用させていただきましたが、シンプルでドキュメントも十分なものがあり、私のようなTypeScript初心者にはとても使いやすかったです。  
他にも色々と作って遊びたいと思います。

また、今回[こちらの記事(Cloudflare Worker + D1 + Hono + OpenAIでLINE Botを作る)](https://zenn.dev/razokulover/articles/4d0ba10083524e)をずっと参考にさせていただきました。この記事がなければ、今回のLINE Botは作れませんでした。この記事を書いてくださった[YuheiNakasaka](https://zenn.dev/razokulover)様に感謝します。  

## 参考

- [LINE Developersコンソールへのログイン](https://developers.line.biz/ja/docs/line-developers-console/login-account/)
- [Messaging APIを始めよう](https://developers.line.biz/ja/docs/messaging-api/getting-started/)
- [Messaging APIリファレンス](https://developers.line.biz/ja/reference/messaging-api/#wh-text)
- [Cloudflare D1 documentationのGet started](https://developers.cloudflare.com/d1/get-started/)  
- [hono.dev](https://hono.dev/)
- [honojs/examples/tree/main/durable-objects](https://github.com/honojs/examples/tree/main/durable-objects)
- [Cloudflare Worker + D1 + Hono + OpenAIでLINE Botを作る](https://zenn.dev/razokulover/articles/4d0ba10083524e)
- [YuheiNakasaka/line-bot-cf-worker-sample](https://github.com/YuheiNakasaka/line-bot-cf-worker-sample/tree/main)


# Sapperで作ったアプリをGitHub ActionsでビルドしてGitHub Pagesで公開する

## 概要

Sapperで作ったアプリをGitHub ActionsでビルドしてGitHub Pagesで公開しようとした所、
BaseURLの設定周りで思ったよりハマってしまったので、記事にしておきます。

- [サンプルリポジトリ](https://github.com/tkancf/sapper-gh-pages-gh-actions)  

## 実現したいこと

- アプリのexportはGitHub Actionsで実行する
- Sapperで作ったアプリをGitHub Pagesで公開する
  - 公開先のURLは `https://<username>.github.io/<repository name>/` とする

## 前提

- Sapper v0.28.10
- node v14.13.0

## 手順

## アプリを作成

今回は[公式ページ](https://sapper.svelte.dev/)に書いてあるテンプレートのアプリをデプロイしますので、
まずはテンプレートアプリをnpxでとってきます。

```bash
❯ npx degit "sveltejs/sapper-template#rollup" sapper-gh-pages-gh-actions
npx: installed 1 in 1.19s
> cloned sveltejs/sapper-template#rollup to sapper-gh-pages-gh-actions
❯ cd sapper-gh-pages-gh-actions
```

現在はTypeScriptがサポートされているので、TypeScriptを有効化しておきます。  
下記コマンドを実行するだけです。

```bash
❯ node scripts/setupTypeScript.js
Adding TypeScript with Rollup...
Converted to TypeScript.
```

`npm install` を実行後、 `npm run dev` を実行して、動作確認してみます。  
localhost:3000 をブラウザから開くと、ナイスガイが決めポーズをしている画像が表示されるはずです。

```bash
❯ npm install
.
.
```

※`npm install`長いので割愛してます。

```bash
❯ npm run dev

> TODO@0.0.1 dev /Users/tkancf/src/github.com/tkancf/sapper-gh-pages-gh-actions
> sapper dev

✔ server (2.7s)
✔ client (2.7s)
> Listening on http://localhost:3000
✔ service worker (576ms)
```

ここまでは [公式ページのGetting started](https://sapper.svelte.dev/docs#Getting_started) にも書いてある内容なので、
問題ないはずです。

## BaseURL の変更

公開したいページのURLが  
`https://<username>.github.io/<repository name>/` となります。  
末尾にサブディレクトリの形でリポジトリ名が入っており、今のアプリのままでは画像等が表示されません。

まずはアプリをこのURL形式に対応させます。変更箇所は以下の2箇所です。  
Gitのdiffを貼っておきます。各々のリポジトリ名に合わせて読み替えて下さい。

### `src/server.ts`

```diff
diff --git a/src/server.ts b/src/server.ts
index c77f593..085e55a 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -8,6 +8,7 @@ const dev = NODE_ENV === 'development';

 polka() // You can also use Express
        .use(
+               'sapper-gh-pages-gh-actions',
                compression({ threshold: 0 }),
                sirv('static', { dev }),
                sapper.middleware()
```

### `rollup.config.js`

```diff
diff --git a/rollup.config.js b/rollup.config.js
index b5f1b96..3999295 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -39,7 +39,7 @@ export default {
                        }),
                        url({
                                sourceDir: path.resolve(__dirname, 'src/node_modules/images'),
-                               publicPath: '/client/'
+                               publicPath: '/sapper-gh-pages-gh-actions/client/'
                        }),
                        resolve({
                                browser: true,
```

上記を追加した後、再度 `npm run dev` を実行すると、 `localhost:3000/<repository name>` がアプリのURLになっているはずです。

## GitHub Actionsの設定

アプリは用意出来たのでGitHub Actionsを設定します。  
`.github/workflows/deploy.yml` というファイルを作成して以下の内容を書きます。(`sapper-gh-pages-gh-actions` の部分は適宜自分のリポジトリ名に変更して下さい。)

GitHub Actionsの [truewebartisans/actions-sapper](https://github.com/truewebartisans/actions-sapper)、
[peaceiris/actions-gh-pages](https://github.com/peaceiris/actions-gh-pages)を利用しています。  

```yaml
name: deploy
on: push
jobs:
  build_deploy:
    name: Build sapper app
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@master
      - name: Build Sapper
        uses: truewebartisans/actions-sapper@master
        with:
          args: "--legacy --basepath sapper-gh-pages-gh-actions"
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          publish_dir: __sapper__/export/sapper-gh-pages-gh-actions
          publish_branch: gh-pages
          github_token: ${{ secrets.GITHUB_TOKEN }}
```

## デプロイ

GitHubへpushしたら、リポジトリのSettingsからGithub PagesのSourceを gh-pages ブランチの `/(root)`に設定します。

ここまでの設定が問題なく完了していれば、 `https://<username>.github.io/<repository name>/` でアプリが確認出来るはずです。

## あとがき

今回GitHub Actionsを初めて使ったんですが、便利ですね。色々と使い道はあるようなので、調べつつもう少し試してみたいと思います。


# ブログをAstroへ以降しました

AstroとCloudflare Pagesを利用して、ブログを作成しました。  
今までは[はてなブログ](https://tkancf.hateblo.jp)で書いていましたが、最近の興味や技術動向に合わせてブログのプラットフォームを変更することにしました。

## 移行の理由

いくつかの理由がありますが、主に以下の2点が大きかったです。

- 最近TypeScriptを触り始めており、関連技術を調べていたところ、Astroが良いという話をTwitterで見て興味を持ったこと
- 管理されているサービス(はてなブログ)以外の場所で自由にやりたい気持ちとやる気が湧いてきたこと

## 今後の方針

新しいブログでは、以下のような方針で記事を書いていこうと思っています。

- 技術中心の記事を増やす
  - はてなブログで書いていた頃よりも、さらに技術的な内容にフォーカスしていく
- 週に1件程度は記事を増やすことを目標にする

## その他諸々

Astro.jsのブログテンプレートで出力されるデフォルトのデザインがシンプルでとても気に入ったので、しばらくはこのまま利用します。デザインを変更する必要がある場合は、その都度検討していく予定です。  
過去にはてなブログで書いた技術記事については、新しいブログからもアクセスできるようにリンク集を作成しました。[こちらのページ](/blog/past-technical-articles-collection/)から過去の記事をご覧いただけます。  
このブログの作成にあたって、AstroとCloudflare Pagesを利用した作成手順については、別の記事で詳しく説明しています。興味があれば[こちらの記事](astro-and-cloudflare-pages-blog-creation/)を読んでいただけると嬉しいです。


# Obsidianメモのフォルダ分けをやめて全部1フォルダにまとめてみた

普段Obsidianを使ってメモを取っています。これまでメモを綺麗にフォルダ分けして管理していましたが、最近あえてすべてのメモを一つのフォルダにまとめることにしました。  
個人的には良い判断だったと思っているので、そこに至るまでの思考などを書いてみたいと思います。

## フォルダ分けをしていた頃のフォルダ構成

以前の私のメモ管理方法は、以下のようなフォルダ構成でした。

- **daily**
  - デイリーノート
- **weekly**
  - ウィークリーノート
- **プロジェクト**
  - プロジェクトA
  - プロジェクトB
- **INBOX**
  - 仕分け前のノート用
- **Archive**
  - 終わったタスク、プロジェクト等あまり見なくなったもの
- **ext**
  - 画像等の添付ファイル

ネット上の他事例を参考に少しずつ変更しながら作った分け方なので、典型的な構成だと思います。

## 上記構成の不満点

しかし、プロジェクトAにもBにも分類できるメモが出てくると、どちらのフォルダに保存すべきか悩むことが増えました。後からメモを探す際にも、どちらのフォルダが適切だったのか悩む時間が増えてしまい、メモを作成すること自体に面倒くささを感じてしまいました。  
この悩みを全部一フォルダにまとめることで解消できないかなと考えました。

## フォルダ分けからフラット構造への変更で変わると予想していたもの

移行前に考えていたことです。

- **メリット**
  - 仕分けで悩まずに済む
  - ファイル名だけで内容が分かる可能性の向上
- **デメリット**
  - ディレクトリ名による情報の減少
  - 名前空間の分離の消失
  - ファイルツリーからのたどりやすさの消失

一番不安に感じていたのは、デメリットの「ファイルツリーからのたどりやすさの消失」でした。フォルダ分けをしていた頃は、フォルダを開いていくことでメモを開いていたからです。  
ただ、移行前にもフォルダの分類先が上手く辿れない時は検索で対応していたので、なんとかなるだろうと思いつつ思い切って移行することにしました。

### 変更後に実際に感じたこと

上記メリット・デメリットについては予想通りでした。下記については予想外に得られたものです。

- **グラフビューを見る回数の増加**
  - フォルダ分けをしていた頃は、関連するファイルはフォルダ内にあることが多かったのでグラフビューを見ることはほとんどありませんでした
    - フラット構造になってからは、関連するメモを探すためにグラフビューを活用するようになったので、機会が増えました
- **Quick Switcher活用の回数が増加**
  - フォルダ分けをしていた頃は、フォルダ内のファイルを開くことが多かったのでQuick Switcherを使うことはほとんどありませんでした
    - フラット構造になってからは、Quick Switcherで開くことが多くなりました
    - もっと早く使えば良かったと思うほど、便利な機能だと感じています
- **メモ分割の回数増加**
  - フォルダ分けをしていた頃は、分割メモをどこに配置するか考えるのが面倒だったので、一つのメモにまとめることが多かったです
    - フラット構造になってからは、関連するメモを分割することが多くなりました
      - 細かく分割するとグラフビューで関連するメモを見つけやすい気がします

### 困りごと

現状、特に問題はありませんがもっとメモの数が増えると管理が難しくなる可能性があります。
私の場合、メモが2,000ファイル程度ありますが現状は問題なさそうですし、倍になってもなんとかなるだろうという気がします。  
もしかしたら、10,000ファイルを超えると難しくなるかもしれません。

### フラット構造で意識していること

- 関連するノートに紐付ける
- プロジェクトAのようなノートを作成し、関連するノートから参照する
- ファイル名は内容が分かるように工夫する（Scrapboxの名前付け方に近い）

### おわりに

良かったら試してみてください。


# Emacsに入門した 2024年

## イントロ

最近Emacsの設定を頑張っていました。

- 設定したEmacsの設定: https://github.com/tkancf/.emacs.d/blob/main/init.org

10年ぐらいVimmerをやっているんですが、Emacsを羨ましいと思う要素がありました。 下記3つの機能です。

- インラインの画像表示
- dmacro
- org-mode

このうち、画像表示については[3rd/image.nvim](https://github.com/3rd/image.nvim/github.com/3rd/image.nvim)などを利用してNeovimで画像表示が可能になっています。  
dmacroについては、(私が知っている限りでは)Vimに似たプラグインは見つけられませんでした。  
org-modeについては、[nvim-orgmode/orgmode](https://github.com/nvim-orgmode/orgmode)というプラグインがかなりよく出来ており、org-modeの大体の機能はこれで利用できます。

ただ、nvim-orgmode/orgmodeでEmacsのorg-modeと完全に同等かというと、Emacsのorg-modeと使い比べてみると細々足りてない機能が気になります。  
org-modeを利用したいというのが主目的で、org-modeを利用するからにはその機能を全て使いたくなったので、Emacsに入門してみました。

## Vim, Neovimでのorg-modeについて

org-modeを使う前にVim, Neovimでのorg-modeの状況についても少々調べました。  
2024年現在だと以下のような状況かなと思っています。

### Emacsのorg-modeにしか無さそうな機能

しばらくEmacsのorg-modeを利用して、おそらくEmacsのorg-modeにしか無いなと思っているのは下記機能です。

- スピードコマンド
- org-babel
    - org-babel-tangle
    - おそらく似たことを出来る環境はあるが、実行対象の豊富さが強い
- org-roam
- org-exportの出力選択肢
    - Emacsのorg-modeは歴史が長いだけあって、出力設定が豊富
        - GitHub Flavored Markdown
        - Hugo Markdown
        - Zenn Flavored Markdown
- [alphapapa/org-web-tools](https://github.com/alphapapa/org-web-tools)
    - Emacsのブラウザ機能(eww)を利用して、クリップボードのURLのorg-modeリンクを自動で生成したり出来る

おそらくどの機能も作れなくは無い or 探せばどこかには似た機能やプラグインが存在するかもしれないんですが、私的にはEmacsを使ったほうが近道に感じました。

### nvim-orgmode/orgmodeでも実現できること

おそらく、これがVimもしくはNeovimのプラグインで一番多機能だと思います。  
基本的な機能はあります。

- Markdown的に軽量マークアップ言語としての利用
- org-agenda
- org-capture
- clock機能
- org-babelライクな使い方
    - [michaelb/sniprun](https://github.com/michaelb/sniprun) で似たことは出来そうです
        - ただ、org-modeでEmacsのinit.elの設定を書いて部分的に評価してVimの設定に反映的なことは難しいかもしれません

これで十分という場合も多いと思います。

### Neovimのnvim-neorg/neorgプラグイン

まだ発展途上という感じですが、[nvim-neorg/neorg](https://github.com/nvim-neorg/neorg)というNeovim用にorg-mode likeな機能を提供しようとしているプラグインがあります。  
現在はneorgでは未実装のTODO管理機能、clock機能は個人的に外せなかったので選択肢にはならなかったんですが、
neorgファイル用のLSPが存在しており、ファイルへのリンクなどがやりやすく良いプラグインだと思います。

## Emacsの設定について

まだEmacs歴が浅いので、雰囲気でやっている部分もあるんですが下記方針で設定を作っています。

- パッケージ管理にはuse-packageを使う
- 設定はorgファイルから生成する
- Spacemacs, Doom Emacsのようなディストリビューションは利用しない
    - 設定の参考にはする
- なるべく左手小指、薬指の負担を減らす
- Vim likeキーバインドは捨てられないので、evil-modeに頼る

### パッケージ管理にはuse-packageを使う

Vimのプラグインマネージャーが多くあるように、Emacsにもパッケージマネージャーがいくつかあるみたいです。
どれが良いのか評価出来るほど理解していませんが、use-packageで設定しているパッケージのREADMEを多く見かけたので、 use-packageを使っています。

多数派に従っていると、ChatGPT, Claude等に設定方法を聞いた時に楽なので多そうなやつにしました。

### 設定はorgファイルから生成する

Emacsには、 `org-babel-tangle` というorgファイルに書いたコードブロックをつなげて一つのファイルにしてくれる機能があります。  
これを利用して、 `init.org` というドキュメントにコードブロックとしてEmacs Lispを書いておき、設定をビルドする際にファイルとして書き出します。  
更新時に簡単に実行出来るようにMakefileで管理することが多いようです。

他の人の設定を参考にMakefileに以下のようなスクリプトを用意しました。  
`make build`を実行することで、`init.org`から`init.el`が生成されて、`init.el` のコンパイルが実行されます。

```makefile
.PHONY: build
build: ## Build emacs config
@$(EMACS) -Q --batch --eval "(progn (require 'ob-tangle) (org-babel-tangle-file \"./init.org\" \"./init.el\" \"emacs-lisp\"))"
@$(EMACS) --batch -Q -f batch-byte-compile init.el
```

このorgファイルから設定ファイルを生成するという体験がかなり便利で、org-mode最高ポイントの一つです。

### Spacemacs, Doom Emacsのようなディストリビューションは利用しない

一応、2016年ぐらいにSpacemacsを一瞬利用していたことがあります。  
よく出来ているんですが、ブラックボックスが多すぎると管理しきれず、何もわからんとなってしまったので今回は一から自分で設定を作っていきました。  
どのようなプラグインを利用しているか等の設定の参考には便利だったので、よくソースを見に行きました。

### 左手小指、薬指の負担を減らす

左手小指、薬指が貧弱なため、Emacsのデフォルトキーバインドをそのまま利用していると、私の指は耐えられません。  
evil-mode(Vim likeなキーバインドを提供するパッケージ)の利用である程度緩和できますが、他にも以下のような工夫をしています。

#### スペースキー長押しでCtrlキーにする

Karabiner-ElementsでEmacsに限らず設定しています。  
ターミナルでもCtrlキーは多様するので、小指の負担がかなり減ります。

#### C-xをC-jにリマップ

C-xはデフォルトで様々なコマンドのprefixになっており、頻繁に入力するキーです。  
xキーは左手薬指で押す必要があり、何度も入力していると貧弱な私の薬指では耐えられませんでした。  
下記のように設定してC-jで元のC-xの挙動をするようにしています。

```emacs-lisp
(define-key key-translation-map (kbd "C-j") (kbd "C-x"))
```

#### Super-jにM-xをリマップ

同様の理由でSuper-jにM-xをリマップしています。  
Macなので、SuperキーはCommandキーになり、押しやすいです。

#### Super-kに\*の割当

org-modeで\*を連打してるとShiftキーのせいで左手の小指が痛くなるので設定しています。  
Markdownはヘッダが#記号なので、左のShiftキーを押さずに済むんですよね...。

### Vim likeキーバインドは捨てられないので、evil-modeに頼る

テキスト編集はVimが最強だと思っているので、それに近い環境はほしいです。  
evil-modeはVimの基本的な機能はちゃんと使えるし、拡張も出来るので満足いく設定をしていけそうです。  
ただ、Vimと全く同様で不満が全く無いかというとそんなことは無いです。

## 困りごと・不満点

### evil-modeの不満点

設定でなんとかなるかもですが、今のところ困っている部分です。

- `/`検索→`:%s//変換文字列/`のような`/`検索した文字列をそのまま変換する際に検索文字列を省略できない
    - 少なくともデフォルトだと出来ないです
    - 設定もしくはEmacs Lisp書いて解決できないか模索中です
- Vimのノーマルモード操作をdmacroで繰り返すと、文字入力しようとする
    - これは単にdmacroがevil-modeなんて知らないというだけだと思いますが、出来たら嬉しいポイントです
- 矩形選択→選択範囲の行の末尾に文字を入力がVimと挙動が違う
    - 「C-v→$→A→入力→Esc」ではなく、「S-v→A→入力→Esc」になります
    - 代替手段があるので慣れでカバーできそうです

### ex-gfmでMarkdownを出力するとリストの表記が変

ex-gfmに限らずなんですが、リスト表記をMarkdownエクスポートすると、
`-␣文字列` となるはずが、 `-␣␣␣␣文字列`となってしまいます。  
設定次第な気がするんですが、見た目が微妙なのでなんとか直したいところです。

## まとめ

ちょっと不満もありますが、Emacs楽しいですね。  
常用するかはまだ決めてないんですが、なんとなくEmacs入門の扉は開けたかなと思います。  
気に入った機能をVimで再現してみるとかも楽しいかもしれません。もうしばらく遊んでみたいと思います。


# GitHub Mobile + GitHub issueでメモが良い感じ

## はじめに

色んなところでメモを書いている。基本はPCで書くことが多いが、出先の電車の中や長風呂してる時になんとなくメモをとることも割とある。  
ちょっと前まではiPhoneのメモアプリを使ってみたり、Obsidianを使ってみたりScrapboxを使ってみたりしていた。GitHubのリポジトリ内にMarkdownファイルを置いてメモも試したことがあったが、iPhoneのブラウザからファイルを編集してMarkdownを更新が微妙にやりづらくてやめてしまった。  
最近は出先でのメモ・雑なメモ書きはGitHub issue、整理されたメモはリポジトリ内のMarkdownファイルという使い分けをしてみている。これがなかなか良い感じなので、紹介したい。

## GitHub MobileのUI

こんな感じの画面でissueを更新できる

![GitHub MobileのUIキャプチャ画像](https://i.gyazo.com/9469839a0c1ed41fb5a5e8047e022c47.png)

画像アップロード、リスト、ヘッダなどMarkdown記法のショートカットなどもあってかなり使いやすい。  
スマホアプリのMarkdownエディタとしてもよく出来ていると思う。
日本語入力で困ることもない（ブラウザからだとたまにカーソル移動とか変なことになるアプリがある）  
とりあえずその月のメモ用Issueを作成して、そこに乱雑に追記するようにしている。
[2023/10月のメモIssue 例](https://github.com/tkancf/p/issues/2)  

## issue以外の使い方

リポジトリにもファイルを置いていて、こっちは整理したファイルをMarkdown形式で置いてある。  
未整理の雑なメモはissue、整理されたメモはMarkdownファイルという住み分けにしている。  
各コメントのリンクが取得できるので、それを貼って終わりにも出来るので、整理はそこまで大変じゃない。
iPhoneアプリからだとファイルの編集は可能だが、ファイルの追加ができないのでそこだけ諦めている。  
これについてはファイルの整理はPCでやるのが効率的だし、まぁ妥協できるかなという気持ち

## 他に使ってきたアプリとの比較

以下に、他に使ってきたアプリとの比較を書いておく。  
私と感じる課題点が同じ人は合う可能性が高いと思うので、その参考に。

### iPhoneのデフォルトメモアプリ

- Pros
  - 使いやすい
  - 同期もされる
  - 画像も貼りやすい
- Cons
  - Markdown形式じゃない
    - Markdownが使えて、Apple製品に縛られないならこれが最強だったかも
  - メモをMarkdownでブログに書きなおすのが面倒でやめた

### Scrapbox

- Pros
  - 雑に書きやすい
  - 検索とリンクが良い
  - 画像も貼りやすい
- Cons
  - Markdownじゃない
  - スマホからの入力が微妙
    - 91958ってアプリは入力に良かったが、やっぱり閲覧と入力は同じアプリであって欲しい

### Obsidian

- Pros
  - Markdown
  - 同期可能
- Cons
  - 同期にラグがあって、PCとスマホで切り替えつつ書いていると、同期が追いつかなくなる
    - これが一番致命的だった
- ほぼほぼこれで良かった
  - 同期の問題だけ
    - 課金すれば解決するのかも
- 同期する必要のない会社のメモはこれを使っている

### はてなブログの下書き

割と良かったが、めっちゃ雑な買い物メモとかがブログの下書きにあることに微妙な気持ちになってしまった  
そもそも用途に合ってないので仕方ない

### Google keep

付箋みたいな形式が思想に合わなかった

### Slack

- フロー形式のメモという体験はここで得た
- 画像も貼れる
- 無料版だと制限ができてしまい、メモだけのために課金する体力がなくて断念した

## おわりに

GitHub Mobile + GitHub issueでメモ良い感じなので、オススメ。  
プライベートリポジトリとパブリックリポジトリ両方用意して、最近はなるべくパブリックのほうに書くようにしている。  
だんだんTwitterみたいになっているが、Twitterも最近あまり見ていないので雑なアウトプットの場としても良いかもしれない。
よかったら試してみてください。

## 2023/12/19 追記

Self-hosted LiveSyncとFly.ioを使って、Obsidianのメモを無料で同期できるようになったので、今は結局Obsidianを使っています。

[Self-hosted LiveSyncとFly.ioを使って、Obsidianのメモを無料で同期する](https://tkancf.com/blog/sync-obsidian-notes-free-self-hosted-livesync-flyio/)


# ISUCON13に参加しました。最終スコアは8654でした

ISUCON13に参加しました。最終スコアは8,654でした。 (大敗北)
出来たこと、出来なかったこと、反省点などあるので振り返ります。

## 出来たこと

- ベンチマーク実行前後のログ解析等
  - 準備していたスクリプトが上手く使えたのは良かったです。
  - [用意していたスクリプト](https://github.com/tkancf/isucon-tools)
    - 昨年までは一つのMakefileに詰め込んでいたんですが、ちょっとスクリプトを修正したいとなったときにバッティングすることがあったので、一つのスクリプトで一つのことをやるという形にしました。
    - これは個人的には良い判断だったと思っています。
- いくつかのMySQLスロークエリにインデックス追加
  - 今回はインデックス追加すべき箇所が多かったですね。一つずつ様子見しながら貼っていましたが、一気にやっちゃったほうが良かったかなと思っています。
- 一部N+1の解消
  - N+1も目に付くものが多かったです。これは全部の対処が出来ませんでした。
- reserveLivestreamHandlerのタグ追加をバルクインサートに変更
  - 目に入ったのでやってみたんですが、あまり効果はなかったように思います。ちゃんと計測した上で取りかかるべきですね。
- PowerDNSのキャッシュ時間変更
  - 60sに変更しただけですが、捌ける数が増えました。
- register処理を若干改善
  - pdnsutilでのレコード追加処理をgoroutineで並列処理にしてみたんですが、これは無駄な作業だったかもしれません。あまり効いた感じはしませんでした。

## やろうとしたけど出来なかったこと

- PowerDNSにlua Scriptを実行する機能があったので、それを利用して存在しない名前解決は無視しようとした
  - 試したんですが、設定変更後にPowerDNSを再起動しようとすると失敗してしまいました。追試の中でもう一度試してみたいです。
- PowerDNSのバックエンドをMySQLからファイルに変換
  - これもやり方が分からず迷走してしまいました。
- サーバを複数台に分割
  - 後述しますが、練習不足と計画性が無かったです。
- searchLivestreamsHandlerのN+1など、複数個所のN+1改善
  - 試してはFailしてを繰り返していました。

## 反省点

- ISUCON11予選で練習していたんですが、一台のサーバで練習していたこともあり、サーバ分割をどの段階でやり始めるか決められていなかった
  - 結果、ラスト30分とかで慌ててやろうとしてベンチマークが通らず差し戻しになってしまいました。
- MySQLとnginxのログ解析はしていたが、pprofも欲しかった
  - netdataのようなモニタリングもあれば良かったです。
- 複数台サーバを活用出来なかった
  - サーバが3台あったので、各々が各サーバで作業すれば良かったが一台に全員で取り掛かったせいで順番待ち時間が多発しました。
- 上記からも分かる通り、チームでの練習が足りていなかった
  - 今年は時間合わない問題もあって一度も集まって練習出来ませんでした。来年はなんとか時間を作りたいですね。
- Goに対する慣れ不足
  - ちょっとしたプログラムを組むことはあってもGo言語をがっつり扱うのはほぼISUCONだけという状態なので、プライベートでがっつり触る時間を作らないとなと考えています。

## 振り返りでやりたいこと

- 複数台分割の練習
- PowerDNSについて、やりたかったことを改めて検証
- その他、やろうとして出来なかったことの復習とそもそも知らなかったことを講評みつつ復習

## 来年に向けて

ウー馬場ーイー222 チームのmatsuuさんが昔、[AtCoderとHighLoad Cupやっているという話](https://matsuu.hatenablog.com/entry/2019/04/16/230038)をみたので、作りたいものが思い浮かばなかったら真似してみようかと思っています。
毎年、感想戦やりたいと思いつつちゃんとやりきれていないので、今年はやりつつ学んだことをブログに残してみたいと思っています。


# Pulumi+GoでCloudflareのDNS既存リソースを管理してみる

最近Pulumiについてちょくちょく言及されているのを見て、気になったので試してみる。
まずは簡単な所から、Cloudflareで管理しているドメインのDNS設定を整理したかったので、そこをPulumiでコード管理にしてみた。

## 環境

- MacBook Air M1, 2020(Apple M1)
- macOS Ventura バージョン13.3.1 (a)
- go version go1.20.5 darwin/arm64

## 環境構築

### Pulumiのインストール

[Download & Install Pulumi | Pulumi Docs](https://www.pulumi.com/docs/install/)を参考にHomebrewを利用してインストールする。
インストール方法はいくつか選択肢があったが、素直にCommunity Homebrewを利用してインストールする。

```sh
brew install pulumi
```

```sh
$ pulumi version
v3.79.0
```

### Pulumiプロジェクトの作成

[Pulumi & AWS: Create new project](https://www.pulumi.com/docs/clouds/aws/get-started/create-project/) を参考に実施する。

```sh
mkdir <my-cloudflare-project>
cd <my-cloudflare-project>
pulumi new go --name <my-cloudflare-project>
```

`pulumi new` すると、Pulumi Cloudへのログインを求められるので、Enterを押してブラウザからログインする。
Pulumi Cloudのアカウントがない場合は、作成をしてログインする。

```sh
$ pulumi new go --name <my-cloudflare-project>
Manage your Pulumi stacks by logging in.
Run `pulumi login --help` for alternative login options.
Enter your access token from https://app.pulumi.com/account/tokens
    or hit <ENTER> to log in using your browser                   :
We've launched your web browser to complete the login process.
```

ブラウザでログインが完了すると、他項目の入力を求められるので入力していく。
stackについては、  `tkancf/prod` とするとPulumi Cloud上で `https://app.pulumi.com/tkancf/<my-cloudflare-project>/prod` というpath構造になった。

```sh
Waiting for login to complete...


  Welcome to Pulumi!

  Pulumi helps you create, deploy, and manage infrastructure on any cloud using
  your favorite language. You can get started today with Pulumi at:

      https://www.pulumi.com/docs/get-started/

  Tip: Resources you create with Pulumi are given unique names (a randomly
  generated suffix) by default. To learn more about auto-naming or customizing resource
  names see https://www.pulumi.com/docs/intro/concepts/resources/#autonaming.


This command will walk you through creating a new Pulumi project.

Enter a value or leave blank to accept the (default), and press <ENTER>.
Press ^C at any time to quit.

project description: (A minimal Go Pulumi program) My infrastructure code
Created project '<my-cloudflare-project>'

Please enter your desired stack name.
To create a stack in an organization, use the format <org-name>/<stack-name> (e.g. `acmecorp/dev`).
stack name: (dev) tkancf/prod
Created stack 'prod'

Installing dependencies...
(中略)
go: downloading github.com/kr/pretty v0.3.1
go: downloading github.com/anmitsu/go-shlex v0.0.0-20200514113438-38f4b401e2be
go: downloading github.com/kr/text v0.2.0
Finished installing dependencies

Your new project is ready to go! ✨

To perform an initial deployment, run `pulumi up`
```

## GoのSDKをインストール

```sh
go mod tidy
go get github.com/pulumi/pulumi-cloudflare/sdk/v5
```

## CloudflareのAPIトークンを設定する

CloudflareのAPIトークンを取得する。
Cloudflareにログインし、`Get your API token`からTokenを作成する。今回は、`Zone:Read, DNS:Read, DNS:Edit`権限があればOK。

![Cloudflare API TOKEN取得 参考画像](https://gyazo.com/d88ff805b35e61d709e1ab29d6fbf19a.png)

## 取得したAPIトークンを保存する

[PulumiのCloudflareのドキュメント Cloudflare: Installation & Configuration](https://www.pulumi.com/registry/packages/cloudflare/installation-configuration/)を参考に実施する。

環境変数として定義することも可能だが、下記コマンドでPulumiスタックと一緒に保存することができる。
複数ユーザーが簡単にアクセスできるようになり、公式でも推されていたのでこちらの方法で実施した。

```sh
pulumi config set cloudflare:apiToken --secret
```

`Pulumi.prod.yaml`が生成され、APIトークンは暗号化されて保存されている。
Pulumi Cloud によって管理されるスタックごとの暗号化キーと値ごとのソルトを使用して値を暗号化されるらしい。
https://www.pulumi.com/docs/concepts/secrets/

## コードを書く

`ExistingId` 関連の箇所は既存のDNSレコードをインポートするために、既存のDNSレコードのIDが必要なので入れておく。
インポート完了後は不要になるので、消してOK。
コードはgistにもサンプルを上げておく。 (https://gist.github.com/tkancf/bbcfc04e14c05529d2ec8e022ff1c85a#file-pulumi-go-cloudflare-dns-go)

```go
package main

import (
 "fmt"

 "github.com/pulumi/pulumi-cloudflare/sdk/v5/go/cloudflare"
 "github.com/pulumi/pulumi/sdk/v3/go/pulumi"
)

type DnsRecord struct {
 Name       string
 Value      string
 Kind       string
 Ttl        int
 Zone       string
 Note       string
 Proxied    bool
 ExistingId string
}

func addRecord(ctx *pulumi.Context, r *DnsRecord) error {
 _, err := cloudflare.NewRecord(ctx, fmt.Sprintf("%s-%s-%s", r.Kind, r.Name, r.Value), &cloudflare.RecordArgs{
  Name:    pulumi.String(r.Name),
  Value:   pulumi.String(r.Value),
  Type:    pulumi.String(r.Kind),
  ZoneId:  pulumi.String(r.Zone),
  Ttl:     pulumi.Int(r.Ttl),
  Comment: pulumi.StringPtr(r.Note),
  Proxied: pulumi.Bool(r.Proxied),
 }, pulumi.Import(pulumi.ID(r.ExistingId)))
 return err
}

func main() {
 pulumi.Run(
  func(ctx *pulumi.Context) error {
   const zoneId = "XXXXXXXXXXXXXXXXXXXXXXXXX"
   dnsRecords := []DnsRecord{
    {
     Name:       "localhost",
     Value:      "127.0.0.1",
     Kind:       "A",
     Ttl:        1,
     Zone:       zoneId,
     Note:       "localhost test",
     Proxied:    false,
    },
    {
     Name:       "lotkan.com",
     Value:      "lotkan-site.pages.dev.",
     Kind:       "CNAME",
     Ttl:        1,
     Zone:       zoneId,
     Proxied:    true,
     ExistingId: zoneId + "/" + "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    },
    {
     Name:       "lotkan.com",
     Value:      "my memo",
     Kind:       "TXT",
     Ttl:        1,
     Zone:       zoneId,
     Note:       "my memo",
     Proxied:    false,
     ExistingId: zoneId + "/" + "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    },
    {
     Name:       "test",
     Value:      "test",
     Kind:       "TXT",
     Ttl:        1,
     Zone:       zoneId,
     Proxied:    false,
     ExistingId: zoneId + "/" + "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    },
   }

   for _, d := range dnsRecords {
    if err := addRecord(ctx, &d); err != nil {
     return err
    }
   }
   return nil
  })
}
```

## デプロイ

```sh
pulumi up
```

インポートしようとしているリソースと差分があると、以下のように警告を出してくれるので差分がなくなるようにコードを修正していく。

```sh
- Diagnostics:
  - cloudflare:index:Record (TXT-test.lotkan.com-test):
    - warning: inputs to import do not match the existing resource; importing this resource will fail
```

`ExistingId` 関連の箇所をコードから消して終わり。

## 終わりに

以上、思った以上に簡単に既存リソースをインポート出来た。
Pulumiを触ったのは初めてだったが、公式がサンプルコードを多数置いてくれており悩む部分は少なかった。
個人的にはTerraformより既存リソースのインポートならPulumiの方が楽だと感じたが、まだ大きな違いを感じるほどしっかり触れてはいないので、今後もっと触ってみたい。

## 参考資料

- https://www.pulumi.com/docs/clouds/aws/get-started/create-project/
- https://www.pulumi.com/docs/concepts/secrets/
- https://www.pulumi.com/docs/get-started/
- https://www.pulumi.com/docs/install/
- https://www.pulumi.com/docs/intro/concepts/resources/#autonaming.
- https://www.pulumi.com/registry/packages/cloudflare/installation-configuration/


# iTerm2でベルの音を止める方法

iTerm2でターミナル操作をしている時に、タブキーを連打するとポンポン鳴ってたので止めました。  
ちょくちょくやり方を忘れて設定画面を探し回っているので、メモ

## 設定方法

- iTerm2の設定画面を開く
  - `⌘ + ,` で開ける
- Profiles > Terminal タブを開く
- 設定画面の真ん中辺りにある`Notifications`から、`Silence bell`にチェックを入れる

![iTerm2のSilence bell設定画面](https://gyazo.com/63fe402ea4d09ae1f8ee5a2b0fefa6d1.png)


# 過去に別のブログで書いた技術記事まとめ

## 概要

本ブログへ移った 2023/04/15 までに他のブログで書いた技術記事を本ページへまとめておきます。  

- **2023/09/11 追記: 一部は本ブログに移しました。**
- **2024/01/14 追記: 外部記事へのリンクが本ブログのブログ記事一覧ページに追加されました。**

## [はてなブログ](https://tkancf.hateblo.jp)

- [2022-08-21 この1冊ですべてわかる 新版 コーチングの基本を読みました](https://tkancf.hateblo.jp/blog/%E3%81%93%E3%81%AE1%E5%86%8A%E3%81%A7%E3%81%99%E3%81%B9%E3%81%A6%E3%82%8F%E3%81%8B%E3%82%8B_%E6%96%B0%E7%89%88_%E3%82%B3%E3%83%BC%E3%83%81%E3%83%B3%E3%82%B0%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%82%92%E8%AA%AD%E3%81%BF%E3%81%BE)
- [2022-08-21 Hugoのテーマを自作したので、知見メモ](https://tkancf.hateblo.jp/blog/hugo-theme-memo)
- [2022-08-21 Hugo で生HTMLを書く方法](https://tkancf.hateblo.jp/blog/hugo-raw-html)
- [2020-11-06 2ヶ月間Togglであらゆる時間をトラッキングしてみた](https://tkancf.hateblo.jp/blog/2%E3%83%B6%E6%9C%88%E9%96%93Toggl%E3%81%A7%E3%81%82%E3%82%89%E3%82%86%E3%82%8B%E6%99%82%E9%96%93%E3%82%92%E3%83%88%E3%83%A9%E3%83%83%E3%82%AD%E3%83%B3%E3%82%B0%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F)
- [2020-09-09 『エンジニアの知的生産術 ──効率的に学び、整理し、アウトプットする 』を読みました](https://tkancf.hateblo.jp/blog/%E3%80%8E%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AE%E7%9F%A5%E7%9A%84%E7%94%9F%E7%94%A3%E8%A1%93_%E2%94%80%E2%94%80%E5%8A%B9%E7%8E%87%E7%9A%84%E3%81%AB%E5%AD%A6%E3%81%B3%E3%80%81%E6%95%B4%E7%90%86%E3%81%97%E3%80%81)
- [2018-11-29 VimConf 2018が最高だった](https://tkancf.hateblo.jp/blog/VimConf_2018)
- [2018-10-10 Builderscon 2018 に参加した](https://tkancf.hateblo.jp/blog/builderscon-2018)
- [2017-06-01 Go言語でコマンドラインで動くポモドーロタイマー作った](https://tkancf.hateblo.jp/blog/gomato)
- [2017-03-30 fish shellの初期設定覚え書き（PATHの設定とか）](https://tkancf.hateblo.jp/blog/2017/03/30)

## [Qiita](https://qiita.com/tkancf)

- [VimでMarkdownの日本語メモを取るための設定をする](https://qiita.com/tkancf/items/e61b7c09def497204628)
  - 投稿日 2017年04月27日 更新日 2017年05月01日


# Raycast のクリップボードヒストリーは Command+.で結合できる

タイトル通りなんですが、どういうことか言葉だけだと分かりづらい部分もあるかと思うのでスクリーンショットを貼りつつ説明します。

## 説明

[Raycast](https://www.raycast.com/) にはクリップボードヒストリー機能があります。
(環境によりけりですが、`clip` ぐらいまで入力すれば出てくるはずです。)
![Raycast-clipboard-history.png](https://gyazo.com/10e76a4612cf7b332b6afb663f60f9f0.png)
クリップボードヒストリーでは以下のように、過去にコピーした文字列が記憶されています。
今回紹介する機能は過去の文字列と、現在コピーしている文字列を繋げられるという機能です。

### 例

以下は`tkan`がコピーされている状態のクリップボードヒストリーです。

- tkan をコピーした状態の画像
  ![tkanをコピーした状態の画像](https://gyazo.com/99cdf837bbb6f3cefc954644c71949f2.png)
  上の状態で一つ下の `٩( ᐛ )و ﾜｰ` を選択して、⌘ と`.` キーを同時押しすると、コピー中の文字列が更新(結合)されて `tkan ٩( ᐛ )و ﾜｰ` になります。

- 更新されて tkan ٩( ᐛ )و ﾜｰになった画像
  ![更新されてtkan ٩( ᐛ )و ﾜｰになった画像](https://gyazo.com/e91ff2c5cfca7f449ea90e0fbb18359d.png)

個人的には、README に書いてあるコマンドを複数行コピーしたいときに全部コピーしておいて繋げて実行という使い方をしたことがあります。

## まとめ

小ネタですが、最近 Alfred ではなく、Raycast を試していて個人的に便利だなと思った機能だったので紹介しました。  
Alfred も有料版ユーザーなので全然困っていないんですが、この機能があるのでしばらく Raycast 使おうかなという気になっています。


# 『SOFT SKILLS ソフトウェア開発者の人生マニュアル』を読み返しました

## はじめに

『SOFT SKILLS ソフトウェア開発者の人生マニュアル』を読み返しました。
以前にも読んだことがあるんですが、ITエンジニアをターゲットとして、キャリアの築き方、セルフマーケティングについて、お金について、健康の話など多岐にわたる内容を筆者の経験を元にアドバイスしてくれる本です。全てを鵜呑みにする必要はありませんが、参考になる部分が多く良い本です。  

## 今回の読み返しで印象に残った箇所

定期的に何度か読み返しているのですが、読む時期によって響く箇所が変わっています。
初めて読んだのはたしか大学生の頃でしたが、その頃は第3部の「学ぶことを学ぶ」という部分が気に入っていました。  
今回読み返した所、第2部のセルフマーケティングの部分が印象に残りました。  
この変化は、私自身が新卒で入社してから5年ほど経っており、今後のキャリアパスをどうしていくか考えているという状況から感じた変化だと思います。

## 今後に活かせそうな箇所

本書を読む中で、現状での私を客観的に見ると何ができて、何をしているエンジニアなのか分かってもらえる要素が少ないなと感じました。

本書の中では著者の経験からブログを書くことをかなり推奨しており、それもあって最近は本ブログでのアウトプットを増やそうとしています。  
ひとまず、週に1回は記事を書くようにして、アウトプットの習慣を身につけていきたいです。

## まとめ

起業家やフリーランスを目指す方にも役立つ情報が含まれており、幅広いキャリアパスを検討している方にもおすすめです。  
私自身、この本を定期的に読み返すことで、自分のキャリア形成やセルフマーケティングに対する意識が変わってきました。
ぜひ一読してみてください。

---

本記事を書いてから気づいたんですが、昨年第2版が出ていました。  
私は第1版を読んだんですが、時代に合わせて内容もアップデートされているらしいので、これから買う方はこちらの方が良さそうです。


# CloudFlare PagesでホストしているAstroブログでリダイレクト

## 解決したかった課題

CloudFlare PagesでホストしているAstro.jsのブログで、`/feed`へのアクセスでも`/rss.xml`の内容を返す必要があり、CloudFlare Pagesのリダイレクト設定を利用してやってみたのでそのメモです。

## 解決方法

CloudFlare Pagesのリダイレクト設定は、公開するディレクトリのルートに`_redirects`ファイルを作成して、そのファイルに設定するだけでOKです。  
Astroプロジェクトの場合は、`public`ディレクトリに`_redirects`ファイルを作成すれば良かったです。  
今回の`/feed`へのアクセスを`/rss.xml`へリダイレクトする場合は、`_redirects`ファイルに以下のように記述すれば行けました。

```
/feed /rss.xml 301
```

## 参考

- [Astro Documentation Project Structure | Docs](https://docs.astro.build/en/core-concepts/project-structure/)
- [Redirects · Cloudflare Pages docs](https://developers.cloudflare.com/pages/platform/redirects/)


# Svelteで Document インターフェイスを使いたい時は onMountライフサイクルを使うといい

**※注意!! 動作検証はしてますが、勉強不足により、この方法がベストなのか分かってないです。参考程度にお願いいたします。**

## 何がしたいか

こういうHTMLから

```html
<div id="text">Text</div>
```

文字列 "Text" を取得したい。

JavaScriptで普通にやるなら以下のように書けば良いが、Svelteではそうはいかなかった

```js
let t = document.getElementById('text');
console.log(t.textContent);
```

## どうすればいいか

onMountライフサイクルを使って、以下のように書けばOK ([REPLでの動作確認](https://svelte.dev/repl/6ae127160841452285c1e9386ff649cf?version=3.31.2))

```html
<script>
    import { onMount } from 'svelte';
    onMount(() => {
        let t = document.getElementById('text');
        console.log(t.textContent);
    });
</script>

<div id="text">Text</div>
```

## あとがき

Web Frontend 周辺何も分からないので、最近Svelteに手を出してみています。  
世界ではReactが流行っているようですが、なにかのタイミングでSvelteを見たときにEasyな気配がして選びました。

まだTutorialを読んでいる途中ぐらいの段階ですが、公式ドキュメントも充実しているので印象は良いです。  
以前はサポートしていなかったようですが、現在はTypeScriptもサポートされています。  
今年中にSvelte + Sapperでアプリを作れたら嬉しいなーというお気持ちです。


# Self-hosted LiveSyncとFly.ioを使って、Obsidianのメモを無料で同期する

## はじめに

メモアプリとしてObsidianを使っているのですが、メモの複数端末間での同期が有料プランになっているのが唯一のネックで、iPhoneでのメモはGitHub issueに書いていました。
サードパーティの同期方法はいくつか存在していてそれぞれ試したのですが、これといったものがない状態でした。  
サードパーティの同期プラグインの一つであるSelf-hosted LiveSyncについても存在は以前から知っていましたが、ドキュメントに記載のIBM Cloudを利用しようとした際に、IBM Cloudへのクレジットカード登録が上手く出来ず、利用を諦めていました。  
[Obsidianにfly.ioでSelf-hosted LiveSyncを設定する](https://www.lisz-works.com/entry/obsidian-self-hosted-livecync)という記事を見かけて、IBM Cloud以外でも出来そうと分かったので参考にしつつやってみた所、Obsidianライフがめちゃくちゃ快適になったので、だれかの参考になればと思い記事にします。

## 設定環境

- MacBook Air M1, 2020
- macOS Ventura 13.6

## 手順

### fly.ioのコントロール用CLIをインストール

Macなら、Homebrewでインストールできました。

```bash
brew install flyctl
```

### fly.ioへサインアップ

```bash
flyctl auth signup
```

上記実行すると、ブラウザでfly.ioの登録画面へ遷移するので会員登録します。

### Applicationセットアップ

このあと設定ファイルなどが作成されるので、作業ディレクトリなど作るとよいです。

```bash
mkdir <任意のディレクトリ名>
cd <任意のディレクトリ名>
```

fly.tomlファイルを作成します。nrtリージョンが東京らしいです。

```bash
flyctl launch --generate-name --detach --no-deploy --region nrt
```

ディスクを作成します。

```bash
flyctl volumes create --region nrt <ディスク名> --size 2 --yes
```

fly.toml が生成されているはずなので、編集します。

```toml
app = "<任意のアプリ名>"
primary_region = "nrt"

[http_service]
  internal_port = 5984
  force_https = true
  auto_stop_machines = true
  auto_start_machines = true
  min_machines_running = 0
  processes = ["app"]

[env]
  COUCHDB_USER = "<ユーザ名>"
  ERL_FLAGS="-couch_ini /opt/couchdb/etc/default.ini /opt/couchdb/etc/default.d/ /opt/couchdb/etc/local.d /opt/couchdb/etc/local.ini /opt/couchdb/data/persistence.ini"

[mounts]
  source="<ディスク名>"
  destination="/opt/couchdb/data"

[build]
  dockerfile = "./Dockerfile"
```

Dockerfileを用意します。

```docker
FROM couchdb:latest
RUN sed -i '2itouch /opt/couchdb/data/persistence.ini && chmod +w /opt/couchdb/data/persistence.ini' /docker-entrypoint.sh
```

CouchDBのパスワードを設定します。

```bash
flyctl secrets set COUCHDB_PASSWORD=<パスワード>
```

デプロイします。

```bash
flyctl deploy --detach --remote-only
```

fly.tomlへ記載した `https://<任意のアプリ名>.fly.dev`というURLでアクセス可能になっているはずです。

### CouchDBのセットアップ

 `https://<任意のアプリ名>.fly.dev/_utils/`へアクセスすると、ログイン画面が出てくるので、fly.tomlへ記載したCOUCHDB_USERのユーザ名とflyctl secretsで指定したCOUCHDB_PASSWORDでログインします。

設定画面で、Setup Apache CouchDBを開いて、Configure a Single Nodeをすすめます。
ユーザ名、パスワードを設定して、完了します。

### Obsidian側のSelf-hosted LiveSyncを設定する

こちら側は上記で設定したユーザ名、パスワード、DBのURL等をSelf-hosted LiveSyncの🛰マークの設定に入力していくだけで完了です。

## その他

- fly.ioに CouchDBのイメージがあるんですが、これを利用すると定期的にSelf-hosted LiveSyncの接続が切れる状態になってしまいました。
  - 原因は不明ですがDockerfileに変更すると事象が解消したので、Dockerfileを利用するのがおすすめです。
- iPhoneの設定でObsidianのモバイル通信をOFFにしておくと、WiFi接続時のみ同期するようになり通信量を抑えられるのでおすすめです。

## 参考資料

- [Obsidianにfly.ioでSelf-hosted LiveSyncを設定する
](https://www.lisz-works.com/entry/obsidian-self-hosted-livecync)
- [Setup CouchDB on fly.io](https://github.com/vrtmrz/obsidian-livesync/blob/c2491fdfad043d8301c3a20e4f0727150d67376a/docs/setup_flyio.md)


# tofu65キーボードを買いました

買いました！！！わいわい

![Title Image](https://gyazo.com/a2237b46c9e554b86c95dd296372cbac.png)

## はじめに

最近、HHKB Studioが発表されたので遊舎工房へ触りに行きました。
HHKB Studioも良かったですが、店頭に展示されていたtofu65というキーボードの打鍵感も良かったので気になっていました。  
HHKB Studioとどちらを買うか悩んだんですが 65%の配列、ガスケットマウントなどいくつかの要因によりtofu65に決めました。

## 購入理由

購入を決めた理由はいくつかあります。

1. **ホットスワップ対応**: 自分でキースイッチを交換できることが大きな魅力でした。
    - HHKB Studioが気になっていた理由でもあります。
2. **HHKB Studioとの比較**: 方向キーのある65%レイアウトのtofu65の方が、自分の使用スタイルに合っていると感じました。
    - Shiftキーやコントロールキーとの同時押しの際は同時押しが面倒に感じます。
3. **打鍵感**: 実際に触ってみて、打鍵感が非常に気に入りました。
    - ガスケットマウントが寄与しているのかと思います。
    - カツカツした感じが少なく、コトコトを感じます。
        - だいぶ抽象的...
4. **デザイン**: 可愛らしい見た目も、購入の決め手となりました。
    - 光は無くてもいい派なんですが、なんだかんだずっと光らせて使ってます。かわいい

## 購入して良かったと感じるポイント

### 打鍵感

- 最高です。
- 筐体の重さとガスケットマウントの組み合わせが、打鍵音の気持ちよさに寄与している気がします。
- 反響音が少なく、静かな打鍵感が心地よいです。

### VIAキーリマップツール

- 昔Helixを作ったときは、qmk_firmwareでキーマップをビルドして書き込んで〜とやるのが面倒だった記憶があります。
- VIAはブラウザからGUIで簡単にリマップが出来て楽でした。
- マクロの記録も直感的に可能なので、試行錯誤が捗ります。

### ホットスワップ対応

- キースイッチを簡単に交換できるため、色々試してみたくなります。
- リアルフォースのように変荷重が出来て楽しいです。
- ハンダ付けの必要がないため、手間がかかりません。

## 総評

tofu65は、使い勝手やカスタマイズ性に優れている上に重量があって良い打鍵音を出してくれるキーボードだと思うのでおすすめです。


# GitHub ActionsでPulumiをCI/CDしてみた

## はじめに

個人趣味のインフラをPulumiで管理しています。  
Pulumiの公式からGitHub Actionsが公開されていたので、こちらを利用してGitHubのmainブランチへpushしたら自動でデプロイされるように設定してみました。  

## 手順

### GitHub Actionsのワークフロー作成

[GitHub: pulumi/actions](https://github.com/pulumi/actions/)のリポジトリ内にワークフローのサンプルがあるので、これを参考にしてYAMLを書きます。  
ファイルは `.github/workflows/pulumi.yml` に配置します。

```yaml
name: Pulumi deploy
on:
  push:
    branches:
      - main
jobs:
  up:
    name: Update
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 🛎️
        uses: actions/checkout@v3

      - name: Setup Go ✨
        uses: actions/setup-go@v3
        with:
          go-version: "1.21"

      - name: Downloading dependencies 📦
        run: go mod download

      - name: Applying infrastructure 🚀
        uses: pulumi/actions@v4
        with:
          command: up
          stack-name: prod
        env:
          PULUMI_ACCESS_TOKEN: ${{ secrets.PULUMI_ACCESS_TOKEN }}
```

### Pulumiのアクセストークン取得

[Pulumi Cloud](https://app.pulumi.com/)へアクセスして、アクセストークンを取得します。

![Pulumi Cloudのアクセストークン取得画面](https://gyazo.com/55f273ca3bea77c73be1e71d3966cbdd.png)

### アクセストークンをGitHub ActionsのSecretsに登録

取得したアクセストークンをGitHub ActionsのSecretsに登録します。

![GitHub Actionsの設定画面](https://gyazo.com/3ba7f7e31b5050ce057b6331e32fbf11.png)

## おわりに

もう少し凝ったことをやろうとすると、GitHub Actions力が必要そうですが、公式のサンプルがあったので簡単にできました。  
Pulumiは公式のドキュメントであったり、サンプルが充実しているので、初心者でも簡単に始められて良いですね。

## 参考資料

- https://github.com/pulumi/actions/


# $( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd ) を理解する

## はじめに

bashスクリプトを読んでいると頻出するスニペットに以下のようなものがあります。  
実行しているスクリプトの絶対パスを `SCRIPT_PATH` として定義し、同じディレクトリにある設定ファイルをソースとして読み込んでいます。  

```bash
SCRIPT_PATH=$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )
source $SCRIPT_PATH/config
```

よく目にするので、なんとなく意味を理解していましたが、ちゃんと読み解けているわけではなかったので、
各要素に分解して改めて理解してみました。  

## BASH_SOURCE[0]

まずは `BASH_SOURCE[0]` の部分に絞って見ていきます。  
`BASH_SOURCE[0]` は、現在実行中のスクリプトのパスを格納している変数です。  
実際の実行結果でどうなるのか見るのが一番分かりやすいので以下に例示します。

```bash
$ cat test.sh
echo ${BASH_SOURCE[0]}
$ bash test.sh
test.sh
```

## dirname

manの説明を引用します。

> SYNOPSIS
> dirname [OPTION] NAME...
>
> DESCRIPTION
> Output each NAME with its last non-slash component and trailing slashes removed; if NAME contains no /'s, output '.' (meaning the current directory).

ファイルパスの最後の要素を除いて、そこまでのパスを返すコマンドです。
これも例示したほうが分かりやすいので以下に例示します。  

```bash
$ ls -l /usr/local/bin/kataribe
-rwxrwxr-x 1 isucon isucon 2741500 Sep 17 23:14 /usr/local/bin/kataribe
$ dirname /usr/local/bin/kataribe
/usr/local/bin
$ dirname /usr/local/bin/
/usr/local
```

`$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )`の場合は、`$( dirname "${BASH_SOURCE[0]}" )`までの記述で`${BASH_SOURCE[0]}`で取得した実行ファイルまでのパスを取得します。  
ここで取得できたパスは実行方法次第で相対パスになる可能性があるので、以降で必ず絶対パスになるようにします。

## cd と pwd

- `cd`: 現在の作業ディレクトリを変更するコマンド
- `pwd`: 現在の作業ディレクトリを表示するコマンド

`cd "$( dirname "${BASH_SOURCE[0]}"` の部分で、現在の作業ディレクトリを実行ファイルのディレクトリに変更しています。その直後に`pwd`で現在の作業ディレクトリを取得することで、実行ファイルの絶対パスを取得しています。

## ラスト

最後に、`SCRIPT_PATH=$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )`で、実行ファイルの絶対パスを変数として定義し、`source $SCRIPT_PATH/config`で実行ファイルと同じディレクトリにある設定ファイルを読み込んでいます。

## まとめ

よくよく見てみないと、グチャッとしていて理解し難い見た目をしたコードだったので改めて読み込んでスッキリしました。理解の参考になれば幸いです。


# VimのCTRL-K <Space>を理解する

## はじめに

先日、Vim上で何かの拍子に `CTRL-K <Space> <Space>` と入力してしまいました。これにより、見た目上は半角スペースが入力されました。  
その時はあまり気にしていなかったのですが、ここで入力された半角スペースはどうも本物の半角スペースとは別物であることに気づきました。半角スペースで検索をしてもその半角スペースのような何か（以降、「半角スペースもどき」と記載します）はハイライトされません。

![半角スペースで検索をしてハイライトしている画像](https://gyazo.com/9a40baf1c8633ffab687ca08950643f0.png)

上記画像の中の、 「Hello World!!」の「Hello」と「World!!」の間に半角スペースもどきがいます。見た目場は半角スペースですが、検索してもハイライトされていません。
なんじゃこれ？？と疑問に思ったので、調べてみました。

## `<CTRL-K>` の挙動

まずは、インサートモードにおける、`<CTRL-K>`がどのようなキーなのか調べます。
ヘルプを見てみると、 (`:h i_CTRL-K`もしくは、[insert - Vim日本語ドキュメント](https://vim-jp.org/vimdoc-ja/insert.html#i_CTRL-K) を参照) 以下のように記載されています。

```md
                                                i_CTRL-K
CTRL-K {char1} [char2]
                ダイグラフ(digraphs参照)を入力する。{char1}が特別なキーだっ
                た場合、そのキーのコードが<>の形で挿入される。例えば、
                <C-K><S-Space>(キー2つ)と入力することで、文字列 "<S-Space>" が
                入力される。マッピングも考慮されない。
```

これだけだとよくわかりませんが、ダイグラフを参照するように誘導されているのでそちらも確認してみます。 (`:h digraphs` もしくは、 [digraph - Vim日本語ドキュメント](https://vim-jp.org/vimdoc-ja/digraph.html)を参照)
こちらは長いので、参考になりそうな箇所を一部引用します。

```md
ダイグラフは、通常のキーボードから普通に入力できないキャラクタを入力するために
使われる。これらは多くの場合、印字可能な非 ASCII キャラクタである。
```

```md
ダイグラフの入力には2つの方法がある:                    i_digraph
        CTRL-K {char1} {char2}          または
        {char1} <BS> {char2}
最初のものは常に使える; ２番目のものは 'digraph' オプションが設定されていると
きのみ使える。
```

`CTRL-K {char1} {char2}` と入力することで、非 ASCII キャラクタを入力する機能のようです。 [digraph-table](https://vim-jp.org/vimdoc-ja/digraph.html#digraph-table)に入力できる文字もまとまっているので、試しに入力してみます。  
例えば、`CTRL-K A F`と入力することで 「∀」が入力できます。いつでも 「∀ガンダム」が入力できて便利ですね！  
また、`CTRL-K d =`と入力することで「д」が入力できます。これと`CTRL-K D G`で顔文字の完成です。これも便利ですね(°д°)

## `CTRL-K <Space>` の挙動

今回、私が入力した半角スペースもどき `CTRL-K <Space> <Space>`に話を戻します。  
ダイグラフの中でも `CTRL-K <Space>`は特殊なようで、ヘルプには以下のように記載されています。

```md
CTRL-Kについて、ひとつの汎用的なダイグラフがある: CTRL-K <Space> {char}で、  
{char}の最高位のビットを立てて入力する。これはメタキャラクタの入力に使える。
```

「最高位のビットを立てて入力する」というのが、最初よく分からなかったのですがこれはASCIIコードにおける最上位ビットのことを言っているようです。

※2023/12/07 追記:  
現在は、翻訳が修正されて、 「CTRL-K <Space> {char}で、{char}の最上位ビットを立てて入力する。」となっています。  
追記おわり  

例えば、スペースのASCIIコードは10進数で32です。これを2進数で表現すると以下ようになります。

```md
00100000
```

この最高位のビットを立てるということは、以下のように変更されます。

```md
10100000
```

[ASCIIコード表](https://www.asciim.cn/jp/)を見てみると、たしかに `10100000`(10進数なら160)は空白文字になっています。私が入力した半角スペースもどきは、この空白文字になっているようです。

一応、上記挙動の認識が合っているのかも確認してみます。
もう一度ASCIIコード表を見てみると、「w」の最高位のビットを立てると「÷」になるようです。

```md
w = 2進数: 01110111
```

↓ 最高位のビットを立てる

```md
÷ = 2進数: 11110111
```

つまり、 `CTRL-K <Space> w`と入力すると「÷」が入力されるはずです。やってみます。

![「÷」が入力された画像](https://gyazo.com/40b4dc3cff3c79d9bd6e43c8aac26e8c.png)
確かに「÷」が入力されました。認識はあってそうです。

## おわりに

結構長いことVimを使ってるんですが、特に何も考えず `i_CTRL-K`はリマップしていた事もあって全然知らない挙動だったので追ってみると面白かったです。  
絵文字を入力する時に便利、、、かなぁ？数学の記号とか頻繁に入力する場合には良いのかもしれません。


# Astroのバージョンをv2からv3に上げました

本ブログのビルドツールである[Astro](https://astro.build/)のバージョンをv2からv3に上げました。

## アップデート手順

公式にアップデート手順があるので、それに従ってバージョンを上げます。
[Astro v3へのアップグレード](https://docs.astro.build/en/guides/upgrade-to/v3/)

```bash
npm install astro@latest
```

## 変更への対応

`Experimental Flags` が削除されたようなので、`astro.config.mjs` から `experimental` を削除します。

```diff
 import { defineConfig } from 'astro/config';
 
 export default defineConfig({
-  experimental: {
-    assets: true,
-    viewTransitions: true,
-  },
 })
```

これらの機能はデフォルトで利用可能になったようです。


# Vimの設定整理した - 2020年版

## 概要

Vimの設定がごちゃごちゃしてきていたので、久々にvimrc大掃除して使っていないプラグインを消したりキーマップを考え直したりしました。  
プラグインの選定基準、キーマップの設定基準等を思い返すためにも一度まとめておきます。  

## 整理する上で意識したこと

- features=huge でコンパイルされた Vim8(>=8.0.1453) で動作すること
- Neovim のことは考えない
- Windows での動作は考えない
- 基本的に .vimrc 1ファイルを管理する

### features=huge でコンパイルされた Vim8(>=8.0.1453) で動作すること

私が開発したくなるような環境では Vim8(>=8.0.1453) が入っているか、容易にインストール可能なはずなので、 Vim7 以下については考慮しないようにしました。  
features=huge だけだと、 +python3, +lua が入りませんが、有効化されているか確認して必要があれば有効化する等の作業が個人的に煩わしいため、切り捨てました。

### Neovim のことは考えない

私はNeovimを使用していないので、そもそも検討していません。  
たまに情報を追ってはいるのですが、現状「どうしても Neovim でないと駄目！」って機能が個人的には無いので乗り換える予定もないです。

### Windows での動作は考えない

現在、家にも職場にも Windows 環境が無いので、検討しないことにしました。  
WSL2 もあるので。

### 基本的に .vimrc 1ファイルを管理する

1ファイルに全部の設定を書き、プラグインのロード、プラグインの設定等のカテゴリごとに fold しています。

## キーマップの割り当て

下手なマッピングをするとデフォルトの設定を上書きしてしまったり、覚えられないキーマップを設定してしまったりするため、ある程度規則性を持たせることにしました。  
\<Leader> キーはデフォルトの \ をそのまま使用し、プラグインのショートカット等に使用するキーとして以下の5キーを利用します。  

### \<Leader> キー (\ キー)

プラグイン用のキー。デフォルトでは何も割り当てられていないので自由に使える。  
他のキーに変えたりはせず、そのまま \ をプレフィックスキーとして使用します。

### \<Enter> キー

デフォルトだと "カーソルを N 行下の先頭の CHAR へ移動するキー。"(Nj\<C-^>と同等のハズ)  
デカイキーなのに使わない機能なので潰して、第2のプレフィックスキーになってもらうことにしました。

### s キー

デフォルトだと cl と同等の機能。  
比較的押しやすい位置にある使わない機能を持ったキーなので、第3のプレフィックスキーとして働いてもらいます。

### \<Space> キー

デフォルトだと l と同等の機能。  
でかくていい位置にあり、間違いなく使わない機能なので、第4のプレフィックスキーとしてよく使うプラグインを担当してもらいます。

### 方向キー

ノーマルモードでは方向キー h, j ,k, l と同等の機能。  
h, j ,k, l が壊れない限りは移動キーとして使わないので、gina.vimのキーバインドとして使うことにしました。  
矢印キーを押すとgitのdiffを確認したり、commit出来たりします。

それぞれの用途はざっくり以下のように決めました。

- \<Leader> キー
  - LSPの機能
- \<Enter> キー
  - coc.nvim
  - s キー
  - vim-operator-surround
- \<Space> キー
  - vim-quickrun
  - CtrlP
  - open-browser
  - その他自分で定義した関数
- 方向キー
  - gina.vim

## プラグイン

+python3 も +lua もないので、なるべくピュア Vim だけで動作するプラグインを選択するようにしています。  
現状だと、唯一[neoclide/coc.nvim](https://github.com/neoclide/coc.nvim) が node を事前にインストールしておく必要がありますが、node がインストールされていない時は vim-lsp を使うように分岐させています。  
下に挙げたもの以外にもいくつか各言語用のプラグインを入れたり消したりしてますが、入れ替わりが激しいので省きます。

※こっから下は入れてるプラグインとその雑な解説がつらつら書いてあるだけです。  

### [junegunn/vim-plug](https://github.com/junegunn/vim-plug)

プラグインマネージャー有名なやつです。  
シンプルに使いやすいのでずっと使っています。

### [vim-scripts/wombat256.vim](https://github.com/vim-scripts/wombat256.vim)

カラースキーム wombat256  
見やすいのでターミナルも含めて愛用してます。

### [itchyny/lightline.vim](https://github.com/itchyny/lightline.vim)

Vimのステータスラインをいい感じに表示してくれるプラグイン  
ステータスラインが見やすいとなんとなくモチベーションも上がるので。

### [vim-jp/vimdoc-ja](https://github.com/vim-jp/vimdoc-ja)

Vim のヘルプを日本語化するプラグイン

### [scrooloose/nerdtree](https://github.com/scrooloose/nerdtree)

ファイラプラグイン  
個人的にはディレクトリツリーを開ければ良いので、NERDTreeである必要は特に無いです。- キーをディレクトリツリーの表示・非表示としてマッピングしています。

### [glidenote/memolist.vim](https://github.com/glidenote/memolist.vim)

決まったフォーマットのメモを作成・呼び出し出来るシンプルなプラグイン  
作者の方のブログ記事読むのが一番良いです。[シンプルなメモ管理用プラグインmemolist.vimを作った](https://blog.glidenote.com/blog/2012/03/26/memolist.vim/)  
後述するCtrlPと組み合わせて使っています。

### [ctrlpvim/ctrlp.vim](https://github.com/ctrlpvim/ctrlp.vim)

いわゆるセレクタプラグイン(unite.vim, denite.nvimと似た機能のプラグイン)  
バッファ・直近で開いたファイル等の fuzzy finderとして利用できます。  
バッファの移動・直近で開いたファイルの編集・memolist.vim で作成したメモ一覧の検索によく利用しています。

### [mattn/ctrlp-launcher](https://github.com/mattn/ctrlp-launcher)

CtrlPの拡張プラグインでランチャー機能を追加できるプラグイン  
忘れがちなVimのコマンドを自由に登録して絞り込み→実行が可能になります。  
作者の方のブログ記事読むと完全に理解出来ます。[CtrlP にランチャ拡張書いたら捗りすぎて生きているのが辛い](https://mattn.kaoriya.net/software/vim/20120427205409.htm)  

- TweetVimでつぶやく
- exe "CtrlP" g:memolist\_path を実行してmemolistのファイル一覧を検索
- previm でMarkdownをプレビュー

機能としてはシンプルですが、これ無しには生きていけない体にされています。  

### [sgur/ctrlp-extensions.vim](https://github.com/sgur/ctrlp-extensions.vim)

CtrlP の絞り込みの対象を追加できるプラグイン  
以下の機能を追加します。

- コマンドライン履歴
- CtrlP の機能一覧
- yank した履歴

### [rhysd/vim-operator-surround](https://github.com/rhysd/vim-operator-surround)

テキストオブジェクトを指定の囲み文字で囲んだり、囲み文字を削除したり可能になるプラグイン  
vim-surround と似た機能を持つプラグインですが、こちらのほうがカスタマイズ性が高い印象があったので好んで使っています。  
このプラグインで s キーをプレフィックスとして利用しています。  

[kana/vim-operator-user](https://github.com/kana/vim-operator-user) が前提プラグインとして必要になるので、併せてインストールしています。  

### [jiangmiao/auto-pairs](https://github.com/jiangmiao/auto-pairs)

括弧の左側を入力すると自動で閉じてくれるプラグイン  
括弧に限らずクォートも入力してくれます。  
たまに入力補完プラグイン等と干渉して、余計な入力が発生するので削除するかもしれませんが、便利プラグインです。

### [kana/vim-submode](https://github.com/kana/vim-submode)

サブモードを追加できるプラグイン  
なんですが、分かりにくいので thincaさんの解説記事 [submode.vim とその設定例なんかを紹介](https://thinca.hatenablog.com/entry/20130131/1359567419) を読むと良いです。  
上記解説記事にある 「ウィンドウサイズ変更モード」 を作って利用しています。  

### [lambdalisue/gina.vim](https://github.com/lambdalisue/gina.vim)

Vim で利用できる Git クライアントプラグイン  
方向キーを入力すると status, diff, patch, commit がウィンドウを分割して開くように割り当てています。  
方向キーを押すだけで diff を確認したり、 commit 出来たりするのが体験良いです。

### [previm/previm](https://github.com/previm/previm)

Markdown のプレビューができるプラグイン

### [tyru/open-browser.vim](https://github.com/tyru/open-browser.vim)

ブラウザを開くプラグイン  
上記 previm のプレビュー時にブラウザを開くため、選択した範囲のURLをブラウザで開くために使用しています。  
複数選択したURLを一気に開ける機能が便利です。  

### [haya14busa/vim-asterisk](https://github.com/haya14busa/vim-asterisk)

\* での検索時にカーソルを移動しないようにするプラグイン

### [easymotion/vim-easymotion](https://github.com/easymotion/vim-easymotion)

数タイプすれば指定した単語、行へ一気に移動できるプラグイン  
移動が多い時に便利です。

### [miyakogi/seiya.vim](https://github.com/miyakogi/seiya.vim)

ターミナルでVimを開いたときに背景を透過するためのプラグイン  
ターミナルは基本的に背景透過して使っているので使っています。

### [thinca/vim-quickrun](https://github.com/thinca/vim-quickrun)

編集中のプログラムをVimから実行できるプラグイン  
プログラムを編集しつつ実行結果を確認できるのが便利です。

### [mattn/vim-goimports](https://github.com/mattn/vim-goimports)

Go言語で goimport を自動実行して、ソースコードをフォーマットしてくれるプラグイン  
以前はvim-goを使っていましたが、 使っている機能が goimport + LSPでもサポートしている機能のみだったので、  
[作者の方のブログ記事](https://mattn.kaoriya.net/software/vim/20200106103137.htm) を読んで乗り換えました。

### [mattn/sonictemplate-vim](https://github.com/mattn/sonictemplate-vim)

ソースコードのテンプレートを挿入してくれるプラグイン  
markdownのメモ, Makefileの雛形, main関数 等のよく入力するお決まりのパターンをテンプレートとして用意しています。

### [prabirshrestha/vim-lsp](https://github.com/prabirshrestha/vim-lsp)

LSPクライアントプラグイン  
[vim-lsp-settings](https://github.com/mattn/vim-lsp-settings)というプラグインがあり、設定をあまりせずコマンド一つで Language Server をインストールできるので利用しています。

### [prabirshrestha/asyncomplete.vim](https://github.com/prabirshrestha/asyncomplete.vim) [prabirshrestha/async.vim](https://github.com/prabirshrestha/async.vim) [prabirshrestha/asyncomplete-lsp.vim](https://github.com/prabirshrestha/asyncomplete-lsp.vim)

LSPの補完プラグインとその依存プラグイン  

### [neoclide/coc.nvim](https://github.com/neoclide/coc.nvim)

LSPクライアントプラグインその2  
nodeをインストールした環境では vim-lsp ではなく、こちらを使うようにしています。

### [Shougo/neosnippet.vim](https://github.com/Shougo/neosnippet.vim), [Shougo/neosnippet-snippets](https://github.com/Shougo/neosnippet-snippets)

スニペットプラグインとそのスニペット集  
coc.nvim からスニペット候補を出せるようにしています。  

### [basyura/TweetVim](https://github.com/basyura/TweetVim)

Vim から Twitter するためのプラグイン  
以下に依存しているので、一緒に入れています。

- [mattn/webapi-vim](https://github.com/mattn/webapi-vim)
- [basyura/twibill.vim](https://github.com/basyura/twibill.vim)
- [basyura/bitly.vim](https://github.com/basyura/bitly.vim)

## 現状のvimrc

<script src="https://gist.github.com/tkancf/c27e20d75807647d2d298c8b76e23a64.js"></script>


# Visual Studio Codeのリモートコンテナ機能を使ったDenoのFreshフレームワーク開発環境構築

## 概要

Visual Studio Codeのリモートコンテナ機能を使ってDenoのFreshフレームワークを開発する環境を用意する方法です。  
Visual Studio CodeもDenoも何もわからない状態で、準備してたら詰まったので備忘録として残しておきます。

## 事前手順

- Visual Studio Codeをインストール
- [Remote - Containersプラグイン](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)をインストール

## 手順

1. 開発環境にするフォルダを用意
    - フォルダ名は何でもいいと思いますが、今回は `fresh-dev` としました。

- Visual Studio Codeで `Cmd + Shift + p` を入力してコマンドパレットを開く
- `Remote-Containers: Open Folders in Container...` を選択して、先ほど作成したフォルダを選択
- `Show All Definitions...` を選択
- `deno` と入力すると、`Deno` が選択肢に出てくるので、選択
- 大体デフォルトのOSで良いと思うので、 `bullseye (default)` を選択
- しばらく待つと、開発用Dockerコンテナが作成される
- Visual Studio Code内でターミナルを開く(Ctrl + Shift + `)
- ターミナルで下記コマンドを実行する

    ```bash
    deno run -A -r https://fresh.deno.dev ./ --force --twind --vscode
    ```

- `.vscode/settings.json` に `"deno.importMap": "./import_map.json",` を追記
- 一部のimportがエラーになるので、 `Cmd + Shift + p` を入力してコマンドパレットを開き、 `Deno: Cache Dependencies` を実行する
- Visual Studio Codeのターミナルで下記コマンドを実行する

    ```bash
    deno task start
    ```

- http://localhost:8000/ でプレビューが表示できる

## 補足

### Freshのinitコマンドのオプションの意味

#### --force

既存のファイルがあっても、上書きします。  
上書きするのは、テンプレートと同名のファイルがあったときのみなので、 `.devcontainer` フォルダ等が消されたりはしないです。

#### --twind

Twind CSSによるスタイリングを利用したテンプレートを生成します。

#### --vscode

Visual Studio Code向けの設定ファイル ( `.vscode/settings.json` など)を生成します。

## 参考資料

- https://fresh.deno.dev/
- https://github.com/denoland/fresh


# Zedエディタでdenoのスクリプトを書くときの設定

何も設定しないと、Denoの `import` 、`Deno.args` 等でZed上にエラー警告が出るので、解消するための設定

## Deno Extensionsのインストール

ZedのExtensions一覧を`Deno`で検索してInstallするだけ

## 設定ファイルの配置

ZedのLocal Settingsを開いて、下記設定を追加する  
Zedの `Settings` → `Open Local Settings` で設定ファイルは開ける

```json
{
  "languages": {
    "TypeScript": {
      "language_servers": ["deno", "!typescript-language-server", "!vtsls"]
    },
    "TSX": {
      "language_servers": ["deno", "!typescript-language-server", "!vtsls"]
    },
    "JavaScript": {
      "language_servers": ["deno", "!typescript-language-server", "!vtsls"]
    }
  },
  "formatter": "language_server"
}
```

## 再起動？

設定を書くだけだとエラーが消えないかもしれないので、Zedを再起動すると良い

## あとがき

最近、ちょっとしたスクリプトを書くときは [Zed](https://zed.dev/) を使ってて下記イメージで使い分けてる

- Markdownのメモ: Neovim
- 複数ファイルあるぐらいのプログラミング: VSCode
- 1ファイルぐらいのちょっとしたスクリプト: Zed

bashでやるには複雑で、真面目にCLI作るってほどでもない自分用のスクリプトをDenoとdaxで書くみたいな要件とかまさにそれ

Vimモードがかなり良く出来てて、VSCodeより軽いので好んで使ってる。
もうちょっと馴染んだらVSCodeから完全に乗り換えられるかも


# cdコマンドを拡張したzoxideコマンドが便利

## 概要

[zoxide](https://github.com/ajeetdsouza/zoxide)  
GitHubのTrendingか何かを見てて気になったので試しに使って見たところ、気に入って常用しているので紹介します。

READMEに書いてあるとおりcdコマンドを賢くしたようなコマンドで、よく使うディレクトリへの移動が楽になるコマンドです。

> zoxide is a **smarter cd command**, inspired by z and autojump.

[fzf](https://github.com/junegunn/fzf)と組み合わせることで、インタラクティブなディレクトリ移動が可能になります。

![zoxide-tutorial-GIF](https://raw.githubusercontent.com/ajeetdsouza/zoxide/main/contrib/tutorial.webp)

## 導入

私の環境でのインストールは容易でした。

- Apple M1
- macOS 13.3.1(Ventura)
- zsh 5.9 (x86_64-apple-darwin22.0)

bash、zshに限らずPowerShellでも使えるようなので、Windowsユーザーにも優しいのが良いですね。
詳しい手順は公式のREADMEを読めばわかると思いますが、私のやったことだけ以下に参考として書いておきます。

### 私の環境での手順

zoxideのインストール

```bash
brew install zoxide
```

`fzf`も入れたほうが良い

```bash
brew install fzf
```

`.zshrc`へ設定を追記

```zsh
# zoxideがインストールされていたら、zoxideの初期化を行う
if command -v zoxide >/dev/null 2>&1; then
  eval "$(zoxide init --cmd cd zsh)"
fi
```

以上、簡単ですね。

## 設定内容について

上記`.zshrc`へ追記した設定について、デフォルトだとzoxideを利用する際には `cd`のかわりに `z` を利用することになるんですが、私の中で移動 = `cd`が染み付いてしまっていたので、`cd`コマンドを上書きするような設定にしています。 (`--cmd cd`のところ)
現状これで困ってないので、大丈夫だとは思います。

## 一番良く使う機能

`cdi` を実行した際に、使用頻度が高いディレクトリ順で一覧がfzfが開き、選択して移動することができるんですが、これが一番便利で使用頻度高いです。

## まとめ

インタラクティブにディレクトリ移動ができるツールは他にも色々あると思いますが、Windowsでも利用できるものとなると数が少ないので、環境を変えても使える安心感が良いですね。
よかったら試しに使ってみてください。

## 参考資料

- https://github.com/ajeetdsouza/zoxide
- https://github.com/junegunn/fzf


# ブログ

## 技術系

- Vim・Neovim
    - [Vimの設定整理した - 2020年版](blog/vim-configurations-2020.md)
    - [VimのCTRL-K <Space>を理解する](blog/understanding-vim-ctrl-k-space.md)
    - [blink.nvimでobsidian.nvimの補完を利用する方法](blog/20250212090856.md)
    - [snacks.nvimを試したらいい感じ](blog/20250213233832.md)
- Vim以外のエディタ
    - [Zedエディタでdenoのスクリプトを書くときの設定](blog/zed-editor-settings-for-deno.md)
    - [Emacsに入門した 2024年](blog/getting-started-emacs-2024.md)
    - [Visual Studio Codeのリモートコンテナ機能を使ったDenoのFreshフレームワーク開発環境構築](blog/vscode-remote-container-deno-fresh-setup.md)
- Svelte
    - [Sapperで作ったアプリをGitHub ActionsでビルドしてGitHub Pagesで公開する](blog/deploy-sapper-app-with-github-actions-to-pages.md)
    - [Svelteで Document インターフェイスを使いたい時は onMountライフサイクルを使うといい](blog/svelte-document-interface-using-onmount.md)
- ISUCON
    - [ISUCON13に参加しました。最終スコアは8654でした](blog/isucon13.md)
- bash
    - [$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd ) を理解する](blog/understanding-bash-source.md)
- iTerm2
    - [Commandキーをtmuxのプレフィックスキーとして使う方法 on iTerm2](blog/Command-as-tmux-prefix-key.md)
    - [iTerm2でベルの音を止める方法](blog/mute-iterm2-bell.md)
- CloudFlare
    - [CloudFlare PagesでホストしているAstroブログでリダイレクト](blog/setting-up-redirects-astro-cloudflare-pages.md)
- その他ツール
    - [Raycast のクリップボードヒストリーは Command+.で結合できる](blog/raycast-clipboard-history-merge-with-cmd-period.md)
    - [cdコマンドを拡張したzoxideコマンドが便利](blog/zoxide-a-convenient-extension-of-the-cd-command.md)
    - [Gitでマルチバイト文字列がエスケープされる対策](blog/avoid-multibyte-character-escape.md)
- Pulumi
    - [GitHub ActionsでPulumiをCI・CDしてみた](blog/trying-cicd-with-pulumi-using-github-actions.md)
    - [Pulumi+GoでCloudflareのDNS既存リソースを管理してみる](blog/managing-and-importing-existing-cloudflare-dns-resources-pulumi-go.md)

## 作ってみた

- [個人メモ用のサイトを作ってみた](blog/20240609205514.md)
- [ブログをAstroからHonoのSSGに移行しました](blog/blog-migration-astro-to-hono.md)
- [SvelteKitでカードゲームのプロキシメーカーを作りました](blog/created-a-card-game-proxy-maker-with-SvelteKit.md)
- [CloudFlare Workers、Cloudflare D1、HonoでLINE botを作りました](blog/creating-line-bot-with-cloudflare-workers-d1-and-hono.md)
- [ブログ記事一覧ページに、外部サイト記事も表示するようにしてみた](blog/astro-blog-article-index-external-links.md)
- [ブログをAstroへ以降しました](blog/first-post.md)
- [AstroとCloudflare Pagesでブログを作成しました](blog/astro-and-cloudflare-pages-blog-creation.md)
- [Astroのバージョンをv2からv3に上げました](blog/update-astro-v2-to-v3.md)
- [このサイトでllms-full.txtを出力するようにした](blog/20250221222552.md)

## メモ管理・PKM

- [GitHub Mobile + GitHub issueでメモが良い感じ](blog/github-mobile-and-issue-as-memo.md)
- [Obsidianメモのフォルダ分けをやめて全部1フォルダにまとめてみた](blog/flat-obsidian-is-good.md)
- [Self-hosted LiveSyncとFly.ioを使って、Obsidianのメモを無料で同期する](blog/sync-obsidian-notes-free-Self-hosted-LiveSync-flyio.md)

## 読書

- [『SOFT SKILLS ソフトウェア開発者の人生マニュアル』を読み返しました](blog/reading-soft-skills-the-software-developers-life-manual.md)

## 振り返り

- [2022年の振り返り](blog/2022-summary.md)
- [2023年の振り返り](blog/2023-summary.md)
- [2024年の振り返り](blog/20250208234431.md)

## その他

- [tofu65キーボードを買いました](blog/tofu65-keyboard-review.md)
- [過去に別のブログで書いた技術記事まとめ](blog/past-technical-articles-collection.md)

## [全記事一覧](/blog)

## WIP


# HOME

## コンテンツ

- [ブログ](blogs.md)
- [About me](about.md)

## 外部リンク

- GitHub: [@tkancf](https://github.com/tkancf)
- Twitter: [@tkancf](https://x.com/tkancf)
- 雑メモ: [note.tkancf.com](https://note.tkancf.com/)
- Zenn: [@tkancf](https://zenn.dev/tkancf)
- はてなブログ: [@tkancf](https://tkancf.hateblo.jp)
- Qiita: [@tkancf](https://qiita.com/tkancf)