Zenn
Closed31

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

ピン留めされたアイテム
snakasnaka

できたもの

BOOKSCANの本棚に登録されている本をPDFとしてダウンロードするCLIツール。

https://github.com/snaka/download-bookscan/tree/main

時間にして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 冊以上あったのもがコマンド一発でダウンロードできた(それなにに時間はかかったが)、便利。
これでプレミアムプラン解約しても大丈夫。

snakasnaka

まずは Cline の公式ドキュメントに目を通してみる

https://docs.cline.bot/getting-started/getting-started-new-coders

環境

  • macOS
    • 14.7.4(23H420)
  • VS Code や開発に必要なEssentialなツールはインストール済
snakasnaka

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] を押す

snakasnaka

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

つづけて [Approve]

snakasnaka

Approve の結果、HTMLのレンダリング結果が画像として表示された

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

snakasnaka

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

snakasnaka
snakasnaka

Set up Cline's Memory Bank

https://docs.cline.bot/improving-your-prompting-skills/custom-instructions-library/cline-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.
snakasnaka

.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
snakasnaka
snakasnaka

構造化アプローチ

https://cline.bot/blog/building-advanced-software-with-cline-a-structured-approach

ハイレベルな視点として要件や技術的決定事項をドキュメントとして 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
snakasnaka

Model の選択

https://docs.cline.bot/getting-started/model-selection-guide

Plan / Act のそれぞれのモードごとに利用するモデルが選択できる

Planing

  • DeepSeek R1
  • o3-mini
  • Gemini Flash 2.0

Acting

  • Claude 3.5 Sonnet
  • DeepSeek V3
  • Gemini 1.5 Pro
snakasnaka

Cline の設定で Use different models for Plan and Act modes のチェックを付け

Plan Mode タブで API Provider として Google Gemini を選択
Gemini API Key に上で取得した API Key を貼り付け

computer use がサポートされてないっぽいのは微妙かも?

snakasnaka

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

snakasnaka

なんか作ってみる

与えたタスク

# 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`

実行してもらうとまず最初にこれから作るものの全体像を見せてくれる。これだけでもかしこい。

snakasnaka

あと README.md を作ってもらった

README.md ファイルを用意してください
snakasnaka

まだ動くとは限らない

ここから本番だった

動作確認したら動いてなくて、その結果を Cline が見て修正して、また動作確認して... というのをしばらく繰り返した。

動作確認するごとにクレジットに突っ込んだドルが消えていく... 💸

snakasnaka

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

snakasnaka
このスクラップは1ヶ月前にクローズされました
ログインするとコメントできます