0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

tokei-api というサイトを VSCode + Cline + Cluade 3.7 を使って Crystal + Koyeb + Neon で作成した話

Last updated at Posted at 2025-03-22

はじめに

2025年に入ってから、AIエージェントの性能が飛躍的に向上しています。アイデアをAIに伝えると、AIがアプリケーションを生成してくれる時代が到来しています。

私はこれまで、仕事半分、趣味半分でプログラミングを嗜んできましたが、Webアプリケーションを作成した経験はありませんでした。Webアプリには、認証・データベース・デプロイなど、多くの技術的関門があり、コマンドラインツールと比較して敷居が高いと感じていました。

しかし、AIエージェントを活用することで、Webアプリを作成することができたので記録を残します。

生成したサイト tokei-api

GitHub: https://github.com/kojix2/tokei-api

image.png

GitHubのリポジトリに貼り付けられるバッジも生成できます:

Lines of Code 
Top Language 
Languages 
Code to Comment

GitHubのリポジトリのコード行数を取得したい

私はGitHubで興味を持ったリポジトリを見つけると、cloneした後に tokei コマンドを実行して、コード行数を確認しています。
これは、そのプロジェクトの規模や複雑さをざっくりと把握するためです。(以下は個人の主観です)

  • 0〜1000行:おそらく単機能のミニツール
  • 2000〜3000行:いくつかの機能を備えた中規模ツール
  • 5000行以上:本格的な構成のあるプロジェクト
  • 10000行以上:大規模なライブラリまたはアプリケーション
  • 20000行以上:多人数開発や業務利用が想定されるシステム

もちろん業務アプリなどでは数十万行以上ということも珍しくないと思いますが、GitHubに公開されるコードは主にライブラリなので、そのようなものは例外的でしょう。

tokei の利用は非常に簡単です:

git clone https://github.com/user_name/repo_name
cd repo_name
tokei

出力は以下のようになります:

===============================================================================
 Language            Files        Lines         Code     Comments       Blanks
===============================================================================
 Crystal                15         1319          966          165          188
 CSS                     1          211          165           11           35
 ...
 Total                  23         2006         1339          334          333
===============================================================================

-f オプションを付けるとファイルごとの行数も表示可能です。

ただし、GitHubでリポジトリを閲覧している最中に、わざわざターミナルに切り替えて clone して tokei を実行するのは手間がかかると感じていました。

tokei-api ウェブサイトの構想と構築

そのため、tokei コマンドをWeb上で実行できるアプリケーションを作成することにしました。対象は公開されているソースコードのみなので、認証も不要で、情報漏えいの懸念もありません。

さらに、GitHubのREADMEに貼り付け可能なバッジのコードを自動生成する機能も加えました。

Koyebへのデプロイ

アプリケーションのホスティングには Koyeb を選びました。
Koyebは無料枠でアプリをデプロイでき、ワシントンD.C.またはフランクフルトのリージョンを選べます。
(有料枠では東京リージョンも選択可能です。)

無料枠では一定時間アクセスがないとスリープしてしまいますが十分許容範囲です。KoyebではGitHubリポジトリを接続することで、自動的にDockerfileをビルドし、アプリを自動デプロイしてくれます。

Neon - サーバレスなPostgreSQL

Koyebの無料枠ではストレージの永続化(volume)は有料となるため、SQLiteなどのファイルベースのDBはデプロイのたびに初期化されてしまいます。そこで、PostgreSQLのサーバレスサービスである Neon を利用しました。

Neonは無料で利用でき、Ohioリージョン(KoyebのワシントンD.C.に近い)を選択しました。無料プランではIP制限などができませんが、今回は公開情報のみを扱うため、問題ありません。

Crystal言語とKemalフレームワーク

Crystal言語をご存じない方も多いかもしれませんが、Rubyに非常に近い文法を持つ静的型付き言語です。
Rubyと比べて実行時性能が高く、特にメモリの限られた環境(無料サーバーなど)でも軽快に動作します。

Webフレームワークには、RubyのSinatraに相当する Kemal を使用しました。

CrystalにはActiveRecordのような本格的なORMが存在しないため、大規模なアプリケーションには向きませんが、AIと協力して小規模なサービスを構築するには十分な選択肢です。

なお、Crystalのコンパイルには一定のメモリが必要ですが、Koyebはビルド処理を別の環境で行うため、無料枠でも問題なく利用できました。

ドメインの取得と設定

ドメインには、お名前.comで取得済みだった kojix2.net を利用しました。
Koyebの管理画面でCNAMEの設定方法が表示されるため、それをもとにお名前.com側でDNSレコードを設定すれば完了です。

HTTPS化も自動的に行われ、Google Trust Services の証明書が適用されました。

※ ちなみに、以前に誤って不要なサーバーを契約していたことに気づきました。お名前.comでは、意図せずサーバーがカートに入ってしまうことがあるようなので、今後の利用には注意しようと思います。

AI利用のコスト

今回はできるだけ無料サービスを活用しましたが、AI自体の利用料金はかなりかかりました。
特にAnthropicの Claude 3.7 Sonnet を中心に利用して、細かな調整を重ねた結果、最終的な費用は1万円近くに達しているはずです。

それでも、Claudeの出力品質は非常に高く、OpenAIと比較するとかなりの差があります。多くの人がClaudeを採用している理由がわかりました。

まとめ

今回、人生で初めてWebアプリケーションを構築し、公開することができました。
所要時間は、初期実装に6時間、微調整などに断続的に4時間程度です。

私のようなWebエンジニアではない人間が、1日パソコンに向かうだけである程度実用性があるWebサービスを形にできるのは、時代の変化を感じます。

一方で、今回は tokei コマンドを実行するだけの単純なサイトですが、もっと本格的なウェブアプリを公開する際には認証やセキュリティの対応について、プロに指南を仰ぎ、しっかりレビューしてもらう必要があると感じました。

Webアプリだけでなく、Androidアプリなどの作成にも挑戦してみたいと思います。AIの進化のスピードについていくのは大変ですが、これからも積極的にチャレンジしていきたいです。

お読みいただきありがとうございます。
良い一日を。

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?