タグ: AI

投稿日:

20250222 Cline+Claudeやってみた

昨日は国外出張から戻った友人の無事を祝って御徒町で飲んでいた。飲みはとても楽しかったのだが寒さと胃腸の弱さ（普段は全く自覚しないが飲み屋でだけ覿面に弱くなる）ゆえに酷い胃もたれを起こしてしまい、帰って苦しんで寝ていた。寝るタイミングを逃し、寝ないまま今日に突入。午前に用事を済ませ、昼はもつ煮屋で食べてきた。スタミナもつ煮ってなんだろう、大きいのかな？と思ったらニンニクモリモリで、なるほど写真じゃわからんかった！！となった。

mizchi氏の魂がまた震えているらしいのでとりあえず真似してCline+Claudeを導入してみた。Clineは任意のLLMのサポートを得ながらvscodeを自動操作するvscode拡張で、単なるコード生成を超えてシェルやpuppeteerまで操作して勝手に動作確認までやり始める。マジですごい。ClineのバックエンドになるLLMは幅広く選べるのだが、おすすめはClaudeらしい（ローカルollamaは遅すぎて無理だった。GitHub CopilotはVS Code LM APIという仕組みを通じて使えるのだが、トークンが激増するらしくすぐrate limitになった）。Claudeを使いたいときはClaudeに直接金を払ってもいいし、OpenRouterというサービスを使ってもいい。OpenRouterは様々な商用LLMを統一的なインターフェースでアクセスできるように集約したもので、ここにお金を入れておくと使ったLLMに使った分だけ支払われる。若干手数料は乗るのだが、AIアシスト開発はいろいろなモデルを試す段階だと思うので便利。Claudeとdeepseekを比べてみたけどやっぱりClaudeの方が強かった。

とりあえず20ドル入れていろいろ遊んでみたのだが、使い方によって課金額が結構違う。コンテキストをリセットしないまま長話をするとトークンが嵩んで高くつくようだ。その辺りに少し慣れた状態で、日々の日記のアレを生成するサービスを作らせてみた。20コミット1000行分くらいのちょっとしたもので3~4ドルくらいかな。Claudeとの1回の応答で0.02ドルくらい。

https://chao7150.github.io/discipline/

（以下はサンプルです）

項目 内容 得点
起床 7:30 100
散歩 実施・ゴミ拾いあり・犬0匹（） 100
朝食 三色食品群のうち0色カバー 0
体操 実施 100
労働 passion: 0点, discipline: 0点（） 0
ジム 有酸素+筋トレ 100
勉強会 実施 100
個人開発 実施 100
総合 1日の総合評価 59

Claudeはとても賢い。曖昧な自然言語で指示を出してもかなり正確に意図を読み取ってくれるという点で対人間インターフェースは非常に優秀。知識も豊富でライブラリの使い方とかもよく知っている。コードの整理・美学みたいなものは弱く、場当たり的な構造を作りがちに見える（まあ1つずつ指示を受けながら作っていくという条件なら人間でもそうなるかもね）。Claudeを活用してある程度まで野放図に成長してしまったアプリケーションに、後から人間の開発者が複雑な機能を追加するとなると辛いだろうな。

これ仕事で使えるようになったら俺の仕事何が残るんだろう。大きいアプリケーションを作ろうとなったらやっぱり人間エンジニアが整理しないと破綻するのかなあ。なんかそれも希望的観測のように思える。非エンジニアが直接プロンプトを叩いて（しかも何回細かい修正指示を出しても不満を言わない）かなりの精度のものが作れるだろうし、そんな時代にコードを美しく整理するということに意味があるんだろうか。衝撃的な体験だった。

投稿日:

20250212 反動

今朝は起きたときから喉以外は快調。昨日までとの差が自分ではっきりと感じられ、気分もウキウキだった。

一応仕事は午前休にして買い物・掃除をした。ウキウキだったので昼食はさぼてんのロース弁当にした（肉に特殊なブランド名が付いているとき、正しく読めているか不安になって結局さn…ロース弁当でｯ…！ってなっちゃうよね）。

労働（短）、夕食は新しい豆苗を購入してサラダを作った。栽培も新シーズン開始。

自宅のネット回線について進展があった。マンションには光が来ているが僕の部屋は配管の問題でそれを使えない件、管理会社に相談してみたらとりあえず大家と相談してくれるらしい。僕も多少金出してもいいと言っておいた（なぜならこんな悲しい部屋は世界から消滅すべきなので）。

鼻うがいの上達を感じる。よく「アー」と発声すると説明されるが、正確には鼻と口に同時に息を流しマイクラの村人のような声を出すと口に液が流れやすい（口に液が流れると奥まで洗浄できるらしい）。

以下、chaoGPTとChatGPTの会話記録。なんか急に早口で喋りだして、怖い。

マインクラフトの村人の声に近い？

おお、それは めちゃくちゃ近い！ 😂🎮

マインクラフトの村人（Villager）の「ンゥー」「ア゛ン？」みたいな声 は、鼻に抜ける「ア」にかなり近い発音になっています！

村人の声は、口を軽く開けながら鼻に抜けるように「ア゛ン」「ンゥー」と発音 すると似た感じになりますね。

  • 「ンゥー」 → 鼻母音＋ちょっとこもった響き
  • 「ア゛ン？」 → 少し濁った「ア」に鼻の響きを足した感じ

試しに 鼻にかかる感じで「んあ〜？」「んゥ〜？」って言ってみると、村人感が増します🤣

投稿日:

リストのツールチップをgridで作る/ローカルLLM環境構築

リストのツールチップをgridで作る

リストの項目をクリックすることで詳細情報が展開されるタイプのUI（これツールチップって言うんか…？）。

  • その項目の近くに表示されてほしい
  • 詳細情報が表示されることでリストの配置が乱れてほしくない

という前提を置くと、position: absolteで配置するのがシンプルだろう。しかしabsoluteによる配置物はレスポンシブ化が難しい。詳細情報のwidthを固定すると画面の横幅が狭いとき小さくなってくれずにはみ出すし、逆に親であるリストに合わせて100%とするとリストの大きさを先に確定させる必要があり、リストの隣にも表示物があるので不都合だった。

いろいろ考慮した結果gridで詳細情報表示領域を確保してやるのがいい感じだった。まず4行のgridを作る（画像では5行あるがここでは関係ない目的で1つ多い。気にしないで）。詳細情報を表示する前の各項目は3行だけ利用する（grid-column: span 3;）。

■■■□
■■■□
■■■□
■■■□
■■■□

そしてある項目の詳細情報を表示するときは、HTMLでその項目の直後に1行n列（図ではn=3）の要素を置く（grid-column-start: 4; grid-row: span 3; 4行目に3列分使って要素を配置する）。


■■■□
■■■□
■■■▤ <選択
■■■▤
■■■▤

cssは本当に難しい。各要素の大きさがどこで決まっているのかわからない、ググったときに情報の質がピンキリ、プログラミングよりも1つの問題に対して様々な解決法があり良くない意味での創意工夫の余地が大きい。さらに個人開発で言うと終わりがない。いつまでも触れてしまう。僕はあまり考え過ぎたくなくてGoogle検索をひたすらパクるという方針でやっているのだが、Google検索のUIも少しずつ変化しているのでな…。

ローカルLLM環境構築

AI系の開発をやってみたいけどOpenAIに金払いたくないのでローカルマシンでLLMを動かすというのにチャレンジしていた。動かす事自体はそう難しくなくollama（LLM界のdocker cliみたいなやつ）を入れて、huggingface（LLM界のdockerhubみたいなやつ）からpullしてきてrunすれば済む。そこにwebuiをつけたりAPIアクセスしたりweb検索エンジンと連携させたり…みたいな細かい手間もあるが別にAIだから難しいということはない。

難しかったのは個人所有程度のマシンでLLMを動かしても速度も質も全然ダメというところだ。browser-useでURLを指定してこれを開けと指示するだけでもCPU100%で30分間かかってまだ終わらない。こういうのをやってみるとChatGPTがいかにものすごいか（LLMを実用レベルにするためにどれだけの半導体と電力をつぎ込んでいるのか）というのがわかる。

また今アツい分野であるだけに技術の進み方も速く、今日入れてみたパッケージが今日の更新で壊れてて3時間前にissueが立ってリアルタイムで解決法が共有されているという光景を目にした。不安定ではあるがダイナミックな活力がある（他分野から見るとwebフロントもこう見えるんだろうか、最近はさすがにすこし落ち着いていると思うが）。