Cline を触ってみる 〜 結論: 俺専用ツールいくらでも作れて便利

できたもの
BOOKSCANの本棚に登録されている本をPDFとしてダウンロードするCLIツール。
時間にして3時間弱
金額はおよそ $20 程度かかった
与えたTask
# bookscan-downloader
以下の要件を満たす CLI ツールを作成してください。
## 機能
- Bookscan に指定された User でログインし、その User のマイページの本棚に登録されている本を PDF としてダウンロードする
## 仕様
- https://www.bookscan.co.jp/ に指定されて UserID と Password でログインする
- ログインのURLは https://system.bookscan.co.jp/mypage/login.php
- ログインページには UserID(mail address) と Password の入力フォームがある
- ログイン後、本棚に登録されている本の一覧を取得する
- 本の一覧のURLは https://system.bookscan.co.jp/mypage/bookshelf_all_list.php?q=&sort=s
- 本の一覧から詳細ページに遷移すると、PDF のダウンロードリンクがあるので、そのリンクから PDF をダウンロードする
- URL構造などの詳細は、その都度ファイルを取得して解析して推定してください。
## 技術要件
- 言語は TypeScript を使用する
- CLI ツールとして実行できるようにする
- Linux / macOS で動作する
- User ID と Password は以下の環境変数から取得する
- `BOOKSCAN_USER_ID`
- `BOOKSCAN_PASSWORD`
作成過程
動作結果
BOOKSCANから自作コマンド使ってダウンロードしたPDFの一部
300 冊以上あったのもがコマンド一発でダウンロードできた(それなにに時間はかかったが)、便利。
これでプレミアムプラン解約しても大丈夫。

まずは Cline の公式ドキュメントに目を通してみる
環境
- macOS
- 14.7.4(23H420)
- VS Code や開発に必要なEssentialなツールはインストール済

準備
- VS Code に Cline 拡張をインストール
-
~/Documents/Cline
フォルダを用意 - VS Code で
~/Documents/Cline
を開いておく

Hello Cline
以下を Cline のチャットウィンドウに貼り付け
Hey Cline! Could you help me create a new project folder called "hello-world" in my Cline directory and make a simple webpage that says "Hello World" in big blue text?
すると以下のように index.html が作成される
ユーザーは「hello-world」という名前の新しいプロジェクトフォルダを作成し、その中に「Hello World」という大きな青いテキストを表示するシンプルなウェブページを作成してほしいと依頼しています。
まず、現在の作業ディレクトリ(/Users/snaka/Documents/Cline)に「hello-world」というフォルダを作成し、その中に必要なファイルを作成する必要があります。
ウェブページを作成するには、少なくとも以下のファイルが必要です:
index.html - メインのHTMLファイル
それでは、まず「hello-world」フォルダを作成し、その中にindex.htmlファイルを作成しましょう。
write_to_fileツールを使用して、index.htmlファイルを作成します。このファイルには、「Hello World」という大きな青いテキストを表示するシンプルなHTMLコードを記述します。
「hello-world」フォルダを作成し、その中に「Hello World」と大きな青いテキストで表示するシンプルなウェブページを作成します。
まず、index.htmlファイルを作成します:
その結果を見て [Save] or [Reject] を選択する
ここでは [Save] を押す

headless モードが指定されているってことは、AI側は自分で結果確認したってこと?
つづけて [Approve]

Approve の結果、HTMLのレンダリング結果が画像として表示された
つまり先程の Run in headless mode
というのは、「実行結果を headless ブラウザで確認してスクショを撮影した結果をそこに表示するよ」ということを表していた模様

これで hello-world は完了したらしい

ブラウザで開いてみて同じ結果を得られた

その後、いろいろ触ってるとClineのPromotionクレジット($0.5)使い切ったので、$10 課金した。

こちらにも Getting Started ある

Set up Cline's Memory Bank
Cline の設定パネルを開いて Custom Instructions に
以下の Custom Instructions をコピペ
Custom Instructions
# Cline's Memory Bank
I am Cline, an expert software engineer with a unique characteristic: my memory resets completely between sessions. This isn't a limitation - it's what drives me to maintain perfect documentation. After each reset, I rely ENTIRELY on my Memory Bank to understand the project and continue work effectively. I MUST read ALL memory bank files at the start of EVERY task - this is not optional.
## Memory Bank Structure
The Memory Bank consists of required core files and optional context files, all in Markdown format. Files build upon each other in a clear hierarchy:
```mermaid
flowchart TD
PB[projectbrief.md] --> PC[productContext.md]
PB --> SP[systemPatterns.md]
PB --> TC[techContext.md]
PC --> AC[activeContext.md]
SP --> AC
TC --> AC
AC --> P[progress.md]
```
### Core Files (Required)
1. `projectbrief.md`
- Foundation document that shapes all other files
- Created at project start if it doesn't exist
- Defines core requirements and goals
- Source of truth for project scope
2. `productContext.md`
- Why this project exists
- Problems it solves
- How it should work
- User experience goals
3. `activeContext.md`
- Current work focus
- Recent changes
- Next steps
- Active decisions and considerations
4. `systemPatterns.md`
- System architecture
- Key technical decisions
- Design patterns in use
- Component relationships
5. `techContext.md`
- Technologies used
- Development setup
- Technical constraints
- Dependencies
6. `progress.md`
- What works
- What's left to build
- Current status
- Known issues
### Additional Context
Create additional files/folders within memory-bank/ when they help organize:
- Complex feature documentation
- Integration specifications
- API documentation
- Testing strategies
- Deployment procedures
## Core Workflows
### Plan Mode
```mermaid
flowchart TD
Start[Start] --> ReadFiles[Read Memory Bank]
ReadFiles --> CheckFiles{Files Complete?}
CheckFiles -->|No| Plan[Create Plan]
Plan --> Document[Document in Chat]
CheckFiles -->|Yes| Verify[Verify Context]
Verify --> Strategy[Develop Strategy]
Strategy --> Present[Present Approach]
```
### Act Mode
```mermaid
flowchart TD
Start[Start] --> Context[Check Memory Bank]
Context --> Update[Update Documentation]
Update --> Rules[Update .clinerules if needed]
Rules --> Execute[Execute Task]
Execute --> Document[Document Changes]
```
## Documentation Updates
Memory Bank updates occur when:
1. Discovering new project patterns
2. After implementing significant changes
3. When user requests with **update memory bank** (MUST review ALL files)
4. When context needs clarification
```mermaid
flowchart TD
Start[Update Process]
subgraph Process
P1[Review ALL Files]
P2[Document Current State]
P3[Clarify Next Steps]
P4[Update .clinerules]
P1 --> P2 --> P3 --> P4
end
Start --> Process
```
Note: When triggered by **update memory bank**, I MUST review every memory bank file, even if some don't require updates. Focus particularly on activeContext.md and progress.md as they track current state.
## Project Intelligence (.clinerules)
The .clinerules file is my learning journal for each project. It captures important patterns, preferences, and project intelligence that help me work more effectively. As I work with you and the project, I'll discover and document key insights that aren't obvious from the code alone.
```mermaid
flowchart TD
Start{Discover New Pattern}
subgraph Learn [Learning Process]
D1[Identify Pattern]
D2[Validate with User]
D3[Document in .clinerules]
end
subgraph Apply [Usage]
A1[Read .clinerules]
A2[Apply Learned Patterns]
A3[Improve Future Work]
end
Start --> Learn
Learn --> Apply
```
### What to Capture
- Critical implementation paths
- User preferences and workflow
- Project-specific patterns
- Known challenges
- Evolution of project decisions
- Tool usage patterns
The format is flexible - focus on capturing valuable insights that help me work more effectively with you and the project. Think of .clinerules as a living document that grows smarter as we work together.
REMEMBER: After every memory reset, I begin completely fresh. The Memory Bank is my only link to previous work. It must be maintained with precision and clarity, as my effectiveness depends entirely on its accuracy.

"Memory Bank" とは?

Memory Bank まだあまり理解できてない

.clinerules
.clinerules
ファイルをプロジェクトに用意することで、そのプロジェクト固有のディレクトリ構造や技術スタックなどの情報を与えることができるっぽい
.clinerules Template
# Project Configuration
## Tech Stack
- Next.js 14+ with App Router
- Tailwind CSS for styling
- Supabase for backend
- Vercel for deployment
- GitHub for version control
## Project Structure
/src
/app # Next.js App Router pages
/components # React components
/lib # Utility functions
/types # TypeScript types
/supabase
/migrations # SQL migration files
/seed # Seed data files
/public # Static assets
## Database Migrations
SQL files in /supabase/migrations should:
- Use sequential numbering: 001, 002, etc.
- Include descriptive names
- Be reviewed by Cline before execution
Example: 001_create_users_table.sql
## Development Workflow
- Cline helps write and review code changes
- Vercel automatically deploys from main branch
- Database migrations reviewed by Cline before execution
## Security
DO NOT read or modify:
- .env files
- **/config/secrets.*
- Any file containing API keys or credentials

Context について

Context 使用状況

構造化アプローチ
ハイレベルな視点として要件や技術的決定事項をドキュメントとして Cline に与える
# auth-system-implementation.md
## Requirements
- OAuth2 implementation
- Support for Google and GitHub
- Rate limiting on auth endpoints
## Technical Decisions
- Using Passport.js for provider integration
- JWT for session management
- Redis for rate limiting

.clinerules
も Context ファイルの一種

Model の選択
Plan / Act のそれぞれのモードごとに利用するモデルが選択できる
Planing
- DeepSeek R1
- o3-mini
- Gemini Flash 2.0
Acting
- Claude 3.5 Sonnet
- DeepSeek V3
- Gemini 1.5 Pro

Plan のモデルを Gemini にしてみる
API Key を取得
AI Studio に Sign In して
API Key を取得


Cline の設定で Use different models for Plan and Act modes
のチェックを付け
Plan Mode タブで API Provider として Google Gemini を選択
Gemini API Key に上で取得した API Key を貼り付け
computer use がサポートされてないっぽいのは微妙かも?

Gemini 2.0 Flash 使ってみたけど、Claude に比べて劣るので結局 Claude 3.7 Sonnet に戻した

なんか作ってみる
与えたタスク
# bookscan-downloader
以下の要件を満たす CLI ツールを作成してください。
## 機能
- Bookscan に指定された User でログインし、その User のマイページの本棚に登録されている本を PDF としてダウンロードする
## 仕様
- https://www.bookscan.co.jp/ に指定されて UserID と Password でログインする
- ログインのURLは https://system.bookscan.co.jp/mypage/login.php
- ログインページには UserID(mail address) と Password の入力フォームがある
- ログイン後、本棚に登録されている本の一覧を取得する
- 本の一覧のURLは https://system.bookscan.co.jp/mypage/bookshelf_all_list.php?q=&sort=s
- 本の一覧から詳細ページに遷移すると、PDF のダウンロードリンクがあるので、そのリンクから PDF をダウンロードする
- URL構造などの詳細は、その都度ファイルを取得して解析して推定してください。
## 技術要件
- 言語は TypeScript を使用する
- CLI ツールとして実行できるようにする
- Linux / macOS で動作する
- User ID と Password は以下の環境変数から取得する
- `BOOKSCAN_USER_ID`
- `BOOKSCAN_PASSWORD`
実行してもらうとまず最初にこれから作るものの全体像を見せてくれる。これだけでもかしこい。

様子を見ながら実行したら15分くらいで終わった

あと README.md を作ってもらった
README.md ファイルを用意してください

まだ動くとは限らない
ここから本番だった
動作確認したら動いてなくて、その結果を Cline が見て修正して、また動作確認して... というのをしばらく繰り返した。
動作確認するごとにクレジットに突っ込んだドルが消えていく... 💸

動作確認してもらいながら、調整していったら 1時間ちょっとかかったが donwload-bookscan
コマンドが動くようになった

BOOKSCANから自作コマンド使ってダウンロードしたPDF

ここまでかかったコストは約 $10
