💎

Github Copilot CLI で Obsidian Markdown ファイルを良い感じの html にする Web アプリ作った

に公開

Claude Code, Codex, Gemini CLI...

あまたの CLI LLM ツールが登場し、竜騰虎闘の戦いを繰り広げている中、彗星のごとくやってきた新参者、「Github Copilot CLI」

copilot-cli-banner
キラン✨って感じのバナー可愛い

Claude Code Max に課金していたこともあったが、いかんせん学生の身分では月100ドルだの200ドルだのは正直ツラすぎる。

じゃあ、無料の Gemini CLI をと思ってそっちも触ったが、どうにも Claude に比べると、モデルの能力が弱いような感覚がある。じゃあ、Codex を触るかというとこちらも200ドルとかいう厳しい価格設定...。こんなん気軽に手出せないンゴねぇ...。

しかーーーし、あきらめることなかれ!!!!!!!!!!!

Github Copilot は学生向けの 「GitHub Student Developer Pack」を出しており、なんと無料で「Github Copilot CLI」が使えるじゃないか!(普段 Copilot 使うくせに CLI のほうも使えるようになってることに全然気づいてなかった)

これは使わざるを得ない。
さすがに使わざるを得ない。

今回はこれ使って普段ちょっと困ってたことを解決するツールを作りました!

触ってみた驚きとともに、どういうツール作ったかの紹介をしていきます!

各社の代表的なモデルが選んで使えるぞ!

Github Copilot なだけあって、GPT5、Claude Sonnet4.5、などいろいろ選べる。いいね!

selectable-models

Codex だったら中身は GPT モデルだろうし、Claude Code なら当然 Claude モデル、みたいな縛りガン無視できるの、外部の立場だからこそやね、と思った。

今回は Claude Sonnet4.5 で動かします。(Twitter 見てると評判が若干微妙っぽい印象を受けるけど、Gemini よりはいうて優秀やろ!の精神)

リクエストの上限結構大きい!!

いうて無料で使わせてもらってる立場なんで、すぐレートリミットに行っちゃうんだろうな~~と思いつつ触ったらびっくり!結構リクエスト送れるぞ!!

どれくらい送れるのかな?と思って調べると、

https://docs.github.com/ja/copilot/get-started/plans#models

多分、student プランは pro プランと同じ?(違ったらすみません!)と思うので、月 300 回 premium リクエスト送れるはず。(≒300回プロンプト送れる)

300 はすぐ使い切っちゃうかな~?と思ったが、今回のツール作るのに消費したのが全体の「15%」程度でした。動かしてた時間でいうと、6時間くらいかな?

limits
↑その後いろいろ動かしてしまったのでなんだかんだ38%くらいまで使用してしまった

なので、毎日ずっとハードに動かし続ける人だと数日で月間上限に達してしまうと思うけど、たまに適当なツールを作りたいとかいうだけなら、十分使用に耐える上限だと思いました!

(毎日ずっとハードに動かす人ならそもそも最初から利用制限のない Codex に課金したほうがいいと思う)

どんなの作ったのか?

それでどんなツールを作ったのかというと、これです!!

https://obsidian-to-html.pages.dev/

obsidian-to-html-screenshot

どういうものかというと、Obsidian 記法で書いた Markdown ファイルを html ファイルに変換するツールです!

そんなのすでにプラグインとかでいっぱいあるだろ、と言われるかもしれないのですが、なんかかゆいところに手が届くものが個人的になくて、自分に一番合ったツールを今回作ったという感じです!

具体的にこのツールのいいところを書くと、

  • マークダウン内で貼ってある画像も一緒に突っ込むと、Base64 形式で html 内に画像を直接埋め込んでくれる
  • 数式をいい感じに表示してくれる
  • コールアウトブロックをいい感じに表示してくれる
  • ブラウザ完結で動くのでどこかに情報をアップロードしてしまう怖さがない
  • web アプリなのでなにかをインストールしたりしなくて良い

という感じです!

実際に、変換するとこんな感じ↓

obsidian-html-sample

結構良くないですか???

これ作った背景

僕はふだん研究室内で輪読などがあると、その資料を Obisidian 使って作っています。(スライドあんまり好きじゃない。ちゃんと文章で資料作ったほうが情報が資料だけで完結するからそっちのが好き)

これを出力するときいつも pdf にしてたのですが、pdf だと望まぬ位置で改ページされたり、表が見切れたり、gif が埋め込まなかったりして、「ぐぬぬ🤨」みたいなこと多くて、これ何とかならんかなとちょい困りしてました。

Obsidian にある html 出力のプラグインとかも使ってみたりしたんですけど、数式がうまいこと表示されなかったり、画像が埋め込まれなかったり、なんか痒いところに手が届かない感じだったんですよね。

こういう個人的な困りごとを解決する「オレオレツール」を作るのが、

†††Vibe Coding の強み†††

なんで、作ってみました。

ローカルホストで僕だけ使えるツールにしても良かったんですけど、Cloudflare Pages 使えば無料でデプロイして公開できるので、公開してみました!

@Obsidianユーザー
ぜひこれ使ってください!!

おまけ

メインのツール部分の作成終わった後に、せっかくなので僕のプロフィールページを Sonnet4.5 の感性にまかせて作ってもらった結果、以下のような感じになりました。

https://obsidian-to-html.pages.dev/profile

profileスクショ

無駄に神々しいですね!

(おわり)

Discussion