こんにちは、みのり（@minori_aimama）です。本業・育児の合間にAI×ブログ副業に挑戦中です。
今回は副業の本筋とは少し違う話です。Claude Codeを使い始めて1週間、コードも読めない私がAndroidアプリを一から作ってしまいました。
AIコーディング初心者・・・というか全くの未経験です。
発案から3時間で納得できるアプリが完成。実際にできあがったAPKファイルも公開しているので、使ってみたい方はどうぞ🫠
作ったもの
WebClipper for Android — ChromeなどでWebページを「共有」すると、Obsidianで閲覧できるMarkdownファイルとして自動保存するアプリです。最大3つまでテンプレートを登録できます。
作ろうと思ったきっかけは、Chrome拡張機能のObsidian Web ClipperをAndroidでも使いたいと思ったこと。調べると「別のブラウザをインストールする必要がある」という方法しか出てこなくて、不便だなと思っていました。
そこでClaude Codeに「こういうの作れる？」と相談したのが始まりです。
要件を整理する
最初に投げたのは、こんなざっくりした指示でした。
Obsidian Web Clipperの簡易的なAndroidアプリって作れる？ブラウザの共有からアプリを選んで、ページの内容をマークダウンでローカルに保存するアプリ。テンプレートにプロパティを設定して保存先もテンプレートごとに紐付けたい
そしてClaude Codeが要件として整理してくれたのがこちらです。
基本動作
- Chromeの共有からURLを受け取る
- URLにアクセスしてHTMLを取得
- MarkdownにしてObsidian Vaultに保存
テンプレート機能
- テンプレートを複数登録・管理
- 使える変数：
{{title}}{{url}}{{date}}{{content}} - フロントマターの構造を自由に組める
- テンプレートごとに保存先フォルダを紐づけ
クリップ時の操作
- 共有後にテンプレートを選ぶ画面が出る
- 選んだら即保存
設定
- テンプレートのCRUD（作成・編集・削除）
- 保存先フォルダの登録
「他に欲しい機能ある？」と聞いてくれたので更にやりとりして、実装に進みました。
開発の流れ
STEP 1｜環境を整える
まずAndroid Studio（Androidアプリの開発ツール）をインストール。分からないところはスクショを送って聞きながら進めました。
それからAndroid実機でUSBデバッグを有効化。スマホにアプリを直接インストールして試すために必要な設定です。この辺りは自分でやる必要がありました。
STEP 2｜骨格を作る
整理した要件をもとに、ゼロから実装してもらいました。私の希望どおり、共有からURLを受け取る仕組み・テンプレートの編集・保存先の紐づけ・HTMLからMarkdownへの変換、このあたりが最初のプロトタイプに揃っていました。
発案からプロトタイプ完成まで1時間ほど。Android実機でクリップ→Obsidianで閲覧できることも確認。プロパティもしっかり入っていました。
STEP 3｜細かい改善を重ねる
とりあえず動くものができたので、使いながら気になったところを直していきました。ここに2時間ほどかかりました。
- UI：アプリ名の統一、タイトルバー追加、ステータスバーとのかぶり修正
- テンプレート：最大3スロット・ドラッグ並び替え・初期テンプレート作成
- テンプレート編集画面：Obsidian Web Clipperに近いUIへ調整
- 保存：ファイル名重複で自動連番、200バイト超で自動カット、プログレス表示
- アイコン：黒背景にObsidianっぽい紫のクリップマーク
- 不具合修正
STEP 4｜APKを作成
Android Studioのメニューから「Generate Signed App Bundle / APK」を実行して、APKファイルを生成しました。ストア公開はしないけれど、ファイルがあれば自分のスマホにインストールし直せます。
やってみてわかったこと
まずびっくりしたのは、AIコーディング初心者でもコードを一切見ずに「こうしたい」「こんな機能がほしい」とチャット指示するだけで実装が進んだこと。「なんかおかしい」「動作が重くなった」と伝えるだけで原因を調べて直してくれました。エラーが出たときもスクショを送ると原因を特定して自分で直してくれたので、詰まった感覚はほとんどなかったです。
一番面白かったのは、思いついた改善案をその場で伝えると数分後には自分のスマホで試せることでした。自分専用のツールを少しずつ育てていく感覚があって、気づけば3時間夢中になっていました。
少し手間だったのは、アイコンのサイズ調整（大きすぎ→小さすぎ→ちょうどいい）と、進捗バーを追加したら重くなった→修正、という往復が1回あったところです。環境構築も自分でやる必要があります。
Claude Codeからは「指示が具体的」と評価されました。UI/UXの感覚があるらしい🫠
まとめ
ハードルが高いと思っていたアプリ開発ですが、発案から1時間で実機動作まで到達→ブラッシュアップ2時間で納得のいくものが完成しました。
しかもコードは1行も書かず、AIと会話していただけです。
自分が欲しいと思ったものを、自分で作って、自分で使える。それだけで十分な体験でした。
Claude Codeに作ってもらったAPKファイルも置いておきます。私の環境では問題なく動作していますが、ご利用は自己責任で🫠
このアプリでできること
- ChromeなどでWebページを共有 → Markdown（.mdファイル）としてローカルに保存
- 最大3個のテンプレートごとに保存先フォルダ・プロパティをカスタマイズ
- 使える変数：
{{title}}{{url}}{{date}}{{datetime}}{{content}} - プロパティの型：TEXT / LIST / NUMBER / CHECKBOX / DATE / DATETIME
- LIST型は
,区切りで入力すると複数登録可能 - ファイル名重複時は自動で連番（タイトル (2).md 形式）
- ファイル名は記事タイトル（日本語約60文字で…に変換）
- 動作環境：Android 8.0以上
