[{"data":1,"prerenderedAt":281},["ShallowReactive",2],{"article-2025-cline-guide":3,"articles-[]":136},{"id":4,"title":5,"alt":5,"body":6,"category":119,"cover":120,"createDate":121,"description":122,"extension":123,"homepage":124,"meta":125,"navigation":124,"path":129,"recommend":124,"seo":130,"showCover":124,"slug":131,"stem":132,"tag":133,"updated":121,"__hash__":135},"articles\u002Farticles\u002F2025\u002Fcline-guide.md","Cline やってみた",{"type":7,"value":8,"toc":110},"minimark",[9,13,17,20,24,27,30,33,36,39,50,53,56,63,66,72,75,78,82,85,88,91,95,98,101,104,107],[10,11,12],"h2",{"id":12},"はじめに",[14,15,16],"p",{},"最近、大流行の Cline をやってみました。",[14,18,19],{},"今回は、Cline から Fork した Roo Code ではなく、本家 Cline を試しました。",[10,21,23],{"id":22},"cline-とは","Cline とは",[14,25,26],{},"「Cline」とは、Visual Studio Code（VSCode）で実行される、AI コーディングアシスタントです。Anthropic や Gemini などのモデルを活用し、コードの生成、デバッグ、ターミナル操作、ブラウザ操作などを実行します。",[14,28,29],{},"特にターミナル操作などを自動で実行してどんどんプログラムを作っていくのが特徴です。",[14,31,32],{},"オープンソースのプロジェクトなのでソースコードは公開されています。",[10,34,35],{"id":35},"作ったもの",[14,37,38],{},"架空のエンジニアのポートフォリオサイトを作ってもらいました。以下、Cline に指示した内容です。",[40,41,46],"pre",{"className":42,"code":44,"language":45},[43],"language-text","- 架空のエンジニアのポートフォリオサイト\n- Nuxt + Tailwind を使って作る\n- ダークモードに対応する\n- 作成するサイトは1ページで良い\n","text",[47,48,44],"code",{"__ignoreMap":49},"",[14,51,52],{},"AI のモデルは Claude 3.5 Haiku を使いました。お金は $0.4918 かかりました。",[14,54,55],{},"出来上がったサイトがこちら。",[14,57,58],{},[59,60],"img",{"alt":61,"src":62},"cline-guide_010","https:\u002F\u002Fasset.hirameki.dev\u002Fimg%2Fblog%2Ftech%2Fai%2Fcline-guide%2Fcline-guide_010.webp?alt=media",[14,64,65],{},"ダークモードにも対応しています。",[14,67,68],{},[59,69],{"alt":70,"src":71},"cline-guide_020","https:\u002F\u002Fasset.hirameki.dev\u002Fimg%2Fblog%2Ftech%2Fai%2Fcline-guide%2Fcline-guide_020.webp?alt=media",[14,73,74],{},"1ページのサイトなので、Cline の性能の限界に挑戦したわけではないですが、それなりのものができたともいます。アイコンはよくわかりませんが。笑",[14,76,77],{},"以下、感想を書いていきます。",[10,79,81],{"id":80},"plan-と-act","Plan と Act",[14,83,84],{},"Cline には、Plan と Act という2つのモードがあります。これによって Plan で計画をたててから Act で実装に入るようになっています。",[14,86,87],{},"私は仕事やプログラミングをする時に計画と実行を分けることをかなり意識しています。そうすることで実行するときに余計なことを考えなくなって効率が良くなるからです。",[14,89,90],{},"この Cline の Plan と Act を見た時に「同じだ！」と思いました。人間向けのテクニックが AI にも適用されていて面白かったです。",[10,92,94],{"id":93},"dev-containers-はいいかも","Dev Containers はいいかも",[14,96,97],{},"Cline は自分自身でコマンドを実行できるようになっています。暴走しない可能性がないとは言えません。PC が回復不能な状態になったり、情報漏洩したり。。。AI の暴走なんて映画や小説の話みたいですが、少しずつ現実でもあり得そうな世界になってきていますよね。",[14,99,100],{},"私はこれがイヤで Cline を試すのをためらっていたのですが、ある時 Dev Containers の中で Cline を実行するアイデアが書かれた記事を読みました。これだったらもし、Cline が暴走しても被害がコンテナの中だけで済みそうです。なので Dev Containers を使って今回試してみました。",[14,102,103],{},"実際やってみて、コンテナの中で Cline が実行されているのは安心感がありました。",[10,105,106],{"id":106},"さいごに",[14,108,109],{},"既にいろんな方が書かれていますが、勝手にコードが出来上がって、ターミナルを実行してデバックしていく様は強烈で新鮮でした。次は実際のプロジェクトで使ってみようと思います。",{"title":49,"searchDepth":111,"depth":111,"links":112},2,[113,114,115,116,117,118],{"id":12,"depth":111,"text":12},{"id":22,"depth":111,"text":23},{"id":35,"depth":111,"text":35},{"id":80,"depth":111,"text":81},{"id":93,"depth":111,"text":94},{"id":106,"depth":111,"text":106},"ai","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_text:MPLUS1p-Black.ttf_88_bold:Cline%20やってみた,co_rgb:fff,w_720,c_fit\u002Fv1712091289\u002Fcover_2025_rpwog8.png","2025\u002F04\u002F16","Clineは自分自身でコマンドを実行できるようになっています。暴走しても被害がコンテナの中だけで済むようにDevContainersを使って今回試してみました。","md",true,{"emoji":126,"type":127,"topics":128,"published":124},"🧪","tech",[],"\u002Farticles\u002F2025\u002Fcline-guide",{"title":5,"description":122},"cline-guide","articles\u002F2025\u002Fcline-guide",[134],"AI","VxSJ7m17W7fd8ELfWkV9x3m3uPyPlN0YDXjp59cTvJg",{"items":137,"total":280},[138,148,157,163,171,179,186,195,202,210,220,227,230,240,247,256,266,273],{"_path":139,"title":140,"description":141,"cover":142,"alt":140,"category":143,"categoryBasePath":144,"tags":145,"createDate":146,"homepage":124,"recommend":124,"showCover":124,"lang":147},"\u002Farticles\u002F2026\u002Fmy-app-stack\u002F","2年半のフルプラットフォーム開発について全部書く","2年半前、人生で一番追い詰められたプロジェクトが終わりました。少しだけ時間に余裕ができたので、個人で運用していたWebアプリをリプレイスすることにしました。そしてあれこれ試行錯誤していたら、2年半経っていました。やりたかった事を一通りやり切ることができたので、こだわり部分を紹介します。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_text:MPLUS1p-Black.ttf_72_bold:フルプラットフォーム開発について全部書く,co_rgb:fff,w_720,c_fit\u002Fv1712091289\u002Fogp_my-web-app-stack_ztafxo.webp","other","\u002Farticles\u002Fcategory\u002Fother\u002F",[],"2026\u002F04\u002F08","ja",{"_path":149,"title":150,"description":151,"cover":152,"alt":152,"category":49,"categoryBasePath":153,"tags":154,"createDate":155,"homepage":156,"recommend":156,"showCover":156,"lang":147},"\u002Farticles\u002F2026\u002Fthe-goal\u002F","『ザ・ゴール ― 企業の究極の目的とは何か』を読んだ","「ザ・ゴール ― 企業の究極の目的とは何か」を読みました。",null,"\u002Farticles\u002Fcategory\u002F",[],"2026\u002F02\u002F10",false,{"_path":158,"title":159,"description":160,"cover":152,"alt":152,"category":49,"categoryBasePath":153,"tags":161,"createDate":162,"homepage":156,"recommend":156,"showCover":156,"lang":147},"\u002Farticles\u002F2026\u002Ftidy-first\u002F","『Tidy First? ―個人で実践する経験主義的ソフトウェア設計』を読んだ","「Tidy First? ―個人で実践する経験主義的ソフトウェア設計」を読んだ。",[],"2026\u002F01\u002F31",{"_path":164,"title":165,"description":49,"cover":166,"alt":165,"category":167,"categoryBasePath":168,"tags":169,"createDate":170,"homepage":124,"recommend":124,"showCover":124,"lang":147},"\u002Farticles\u002F2025\u002Fcapacitor\u002F","Vueでスマホアプリ開発【Capacitor】","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_title_cover_001_lu3vq4\u002Fl_title_cover_001_lu3vq4\u002Fl_text:MPLUS1p-Black.ttf_88_bold:Vue.jsで%0Aスマホアプリ%0A開発,co_rgb:374151,w_720,c_fit\u002Fv1712091289\u002Fthumbnail__003_prznvl.webp","vuejs","\u002Farticles\u002Fcategory\u002Fvuejs\u002F",[],"2025\u002F12\u002F27",{"_path":172,"title":173,"description":174,"cover":175,"alt":173,"category":143,"categoryBasePath":144,"tags":176,"createDate":177,"updated":178,"homepage":156,"recommend":156,"showCover":124,"lang":147},"\u002Farticles\u002F2025\u002Fthe-land-of-playful-fellows\u002F","紅白もちのひみつ『めっきらもっきら どおん どん』","奥さんに言われて「はっ」としました。もんもんびゃっこ達は赤いおもちを食べていて、かんたは白いおもち。これはなんらかの意味がこめられてるのでは？と思い考えてみました。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fv1712091289\u002Fthe-land-of-playful-fellows_vgkvsf",[],"2025\u002F12\u002F20","2025\u002F12\u002F22",{"_path":180,"title":181,"description":182,"cover":183,"alt":181,"category":143,"categoryBasePath":144,"tags":184,"createDate":185,"updated":185,"homepage":124,"recommend":124,"showCover":124,"lang":147},"\u002Farticles\u002F2025\u002Fpixel-astrophotography\u002F","星空写真をAndroid Pixelでキレイに撮る","キャンプ場での夜空はやっぱりキレイでした。星がよく見れます。肉眼で見れるこのキレイな星空を写真に残せたら嬉しいなーと思いながら、タイマーが終わるのを待ちます。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_title_cover_001_lu3vq4\u002Fl_title_cover_001_lu3vq4\u002Fl_text:MPLUS1p-Black.ttf_88_bold:星空写真を%0APixelで%0Aキレイに撮る,co_rgb:374151,w_720,c_fit\u002Fv1712091289\u002Fpixel-astrophotography",[],"2025\u002F09\u002F29",{"_path":187,"title":188,"description":189,"cover":190,"alt":188,"category":191,"categoryBasePath":192,"tags":193,"createDate":194,"updated":194,"homepage":124,"recommend":124,"showCover":124,"lang":147},"\u002Farticles\u002F2025\u002Fhosting-storybook\u002F","Storybookのダッシュボードを公開する","以前から Vue の UI ライブラリを Storybook を使って作っていました。その UI ライブラリの Storybook を静的サイトにビルドしてホスティングしてみました。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_text:MPLUS1p-Black.ttf_88_bold:Storybookの%0Aダッシュボードを%0A公開する,co_rgb:fff,w_720,c_fit\u002Fv1712091289\u002Fcover_2025_rpwog8.png","storybook","\u002Farticles\u002Fcategory\u002Fstorybook\u002F",[],"2025\u002F05\u002F28",{"_path":196,"title":197,"description":198,"cover":199,"alt":197,"category":143,"categoryBasePath":144,"tags":200,"createDate":201,"updated":201,"homepage":156,"recommend":156,"showCover":124,"lang":147},"\u002Farticles\u002F2025\u002Fmemo\u002F","メモは脳の排水","紙、デジタルどちらでもなんでもメモに書き出します。書き出すことで考えが整理され、ネタ帳になってくれるので重宝しています。この「脳の排水」という言葉にグッときました。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_text:MPLUS1p-Black.ttf_88_bold:メモは脳の排水,co_rgb:fff,w_720,c_fit\u002Fv1712091289\u002Fcover_2025_rpwog8.png",[],"2025\u002F05\u002F27",{"_path":203,"title":204,"description":205,"cover":206,"alt":204,"category":119,"categoryBasePath":207,"tags":208,"createDate":209,"updated":209,"homepage":124,"recommend":124,"showCover":124,"lang":147},"\u002Farticles\u002F2025\u002Fa2a-guide\u002F","A2A 試してみた","A2AとはAIエージェントとAIエージェントが連携するための規格です。Googleが2025年4月に発表しました。Googleのサンプルコードを動かしてみます。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_text:MPLUS1p-Black.ttf_88_bold:A2A 試してみた,co_rgb:fff,w_720,c_fit\u002Fv1712091289\u002Fcover_2025_rpwog8.png","\u002Farticles\u002Fcategory\u002Fai\u002F",[134],"2025\u002F05\u002F01",{"_path":211,"title":212,"description":213,"cover":214,"alt":212,"category":215,"categoryBasePath":216,"tags":217,"createDate":218,"updated":219,"homepage":124,"recommend":124,"showCover":124,"lang":147},"\u002Farticles\u002F2025\u002Fdify-self-hosted-guide\u002F","Dify をセルフホストで立ち上げる","Dify をセルフホストで立ち上げる機会があったので、手順を紹介します。Dify（ディファイ）は、AIアプリを簡単に開発できるオープンソースのプラットフォームです。クラウド版とセルフホスト版があります。今回は Dify をセルフホストで立ち上げてみます。公式と同じ手順で実行する。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_text:MPLUS1p-Black.ttf_88_bold:Dify を%0Aセルフホストで%0A立ち上げる,co_rgb:fff,w_720,c_fit\u002Fv1712091289\u002Fcover_2025_rpwog8.png","dify","\u002Farticles\u002Fcategory\u002Fdify\u002F",[],"2025\u002F04\u002F29","2025-04-29",{"_path":221,"title":222,"description":223,"cover":224,"alt":222,"category":143,"categoryBasePath":144,"tags":225,"createDate":226,"updated":226,"homepage":156,"recommend":156,"showCover":124,"lang":147},"\u002Farticles\u002F2025\u002Fphysical-bookstore\u002F","リアル書店の選書体験","今回で改めて書店の良さに気付けたのが良かったです。ただ、ネット通販や電子書籍には手軽に買えるなど別の良さがあると思ってます。なのでうまく使い分けていきたいです。","https:\u002F\u002Fasset.hirameki.dev\u002Fimg%2Fblog%2Fjournal%2F2025%2F20250425%2F20250425_010.webp?alt=media",[],"2025\u002F04\u002F25",{"_path":228,"title":5,"description":122,"cover":120,"alt":5,"category":119,"categoryBasePath":207,"tags":229,"createDate":121,"updated":121,"homepage":124,"recommend":124,"showCover":124,"lang":147},"\u002Farticles\u002F2025\u002Fcline-guide\u002F",[134],{"_path":231,"title":232,"description":233,"cover":234,"alt":232,"category":235,"categoryBasePath":236,"tags":237,"createDate":239,"updated":239,"homepage":124,"recommend":156,"showCover":124,"lang":147},"\u002Farticles\u002F2025\u002Fmy-oss-projects\u002F","今まで作った OSS プロジェクト","今まで、いくつか OSS プロジェクトを作ってきたので紹介します。番外編まで含めると全部で5つあります。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_text:MPLUS1p-Black.ttf_88_bold:今まで作った%0AOSS%20プロジェクト,co_rgb:fff,w_720,c_fit\u002Fv1712091289\u002Fcover_2025_rpwog8.png","oss","\u002Farticles\u002Fcategory\u002Foss\u002F",[238],"OSS","2025\u002F04\u002F02",{"_path":241,"title":242,"description":243,"cover":244,"alt":242,"category":143,"categoryBasePath":144,"tags":245,"createDate":246,"updated":246,"homepage":124,"recommend":124,"showCover":124,"lang":147},"\u002Farticles\u002F2025\u002Fbuilt-custom-keyboard\u002F","キーボードを自作した","ずっと興味のあった自作キーボードに挑戦した記録で、遊舎工房でキットやキーキャップを選び、秋葉原で工具を買い、久しぶりのはんだ付けに苦戦しながら完成させました。","https:\u002F\u002Fasset.hirameki.dev\u002Fimg%2Fblog%2Fjournal%2F2025%2F20250309_built-custom-keyboard%2F20250309_built-custom-keyboard_010.webp?alt=media",[],"2025\u002F03\u002F09",{"_path":248,"title":249,"description":250,"cover":251,"alt":249,"category":252,"categoryBasePath":253,"tags":254,"createDate":255,"updated":255,"homepage":124,"recommend":124,"showCover":124,"lang":147},"\u002Farticles\u002F2025\u002Fcloudflare-workers-cache-layer\u002F","Cloudflare Workers でキャッシュ層を作る","画像サーバーの前段に Cloudflare Workers でキャッシュ層を作ったら転送量が大幅に減ったので記録です。やりかたです。1. 以下のコードで Workers を作りカスタムドメインを当てる。2. ソースコードの URL を Workers に割り当てたドメインに変更する。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_text:MPLUS1p-Black.ttf_88_bold:Cloudflare Workers で%0Aキャッシュ層を%0A作る,co_rgb:fff,w_720,c_fit\u002Fv1712091289\u002Fcover_2025_rpwog8.png","web","\u002Farticles\u002Fcategory\u002Fweb\u002F",[],"2025\u002F02\u002F23",{"_path":257,"title":258,"description":259,"cover":260,"alt":258,"category":261,"categoryBasePath":262,"tags":263,"createDate":264,"updated":265,"homepage":124,"recommend":156,"showCover":124,"lang":147},"\u002Farticles\u002F2022\u002Flearn-programming\u002F","プログラミング勉強のコツを調べてみた","エラーに対する態度は3パターンあります。上達が早いのはもちろん3番目のパターンです。事前に知っておくことで、エラーに直面した時に少し落ち着いて対処できそうです。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_title_cover_001_lu3vq4\u002Fl_title_cover_001_lu3vq4\u002Fl_text:MPLUS1p-Black.ttf_88_bold:プログラミング%0A勉強のコツを%0A調べてみた,co_rgb:374151,w_720,c_fit\u002Fv1642574453\u002Falfons-morales-YLSwjSy7stw-unsplash_2_1_xnt6z7.png","programming","\u002Farticles\u002Fcategory\u002Fprogramming\u002F",[],"2022\u002F05\u002F23","2025\u002F02\u002F12",{"_path":267,"title":268,"description":269,"cover":270,"alt":268,"category":143,"categoryBasePath":144,"tags":271,"createDate":272,"updated":272,"homepage":124,"recommend":124,"showCover":124,"lang":147},"\u002Farticles\u002F2025\u002Flearn-9-years\u002F","９年間、毎日プログラミングの勉強をしてる話","仕事から帰ってきて、ご飯食べたりお風呂に入って、一息ついたらパソコンにむかって12時まで作業する。初めはビジネス書とか経済の本を読んだりしてた。それから9年経った。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_title_cover_001_lu3vq4\u002Fl_title_cover_001_lu3vq4\u002Fl_text:MPLUS1p-Black.ttf_88_bold:９年間、毎日%0Aプログラミングの勉強をしてる話,co_rgb:374151,w_720,c_fit\u002Fv1712091289\u002Fthumbnail__001_tdrr4g.webp",[],"2025\u002F02\u002F10",{"_path":274,"title":275,"description":276,"cover":277,"alt":275,"category":143,"categoryBasePath":144,"tags":278,"createDate":279,"updated":279,"homepage":156,"recommend":124,"showCover":124,"lang":147},"\u002Farticles\u002F2021\u002Fstudy-5-years\u002F","5年間ほぼ毎日プログラミングの勉強をするためにやったこと","人生の節目で一時的に勉強してない時期もありました。ですが、それ以外のほとんどの期間で毎日プログラミングを勉強しています。楽しいので、あまり勉強と思っていませんが。","https:\u002F\u002Fimage.hirameki.dev\u002Ftakasqr\u002Fimage\u002Fupload\u002Fl_text:MPLUS1p-Black.ttf_88_bold:5年間ほぼ毎日%0Aプログラミングの%0A勉強をする為に%0Aやったこと,co_rgb:fff,w_720,c_fit\u002Fv1642574453\u002Faaron-burden-QJDzYT_K8Xg-unsplash_1_xaxykh.png",[],"2021\u002F08\u002F01",18,1776498755784]