こんにちは、みのり（@minori_aimama）です。本業・育児の合間にAI×ブログ副業に挑戦中です。
今回は副業の本筋とは少し違う話です。Claude Codeを使い始めて1週間、コードも読めない私がAndroidアプリを一から作ってしまいました。
AIコーディング初心者・・・というか全くの未経験です。
発案から3時間で納得できるアプリが完成。実際にできあがったAPKファイルも公開しているので、使ってみたい方はどうぞ🫠
作ったもの
WebClipper for Android — ChromeなどでWebページを「共有」すると、Obsidianで閲覧できるMarkdownファイルとして自動保存するアプリです。最大3つまでテンプレートを登録できます。
Android向けの方法をいくつか調べてみましたが、ブラウザを変更する必要があったり、URLだけを保存して後からPCで処理する運用だったりと、自分の使い方に合うものが見つかりませんでした。
スマホで見つけた記事を、その場でMarkdownにして保存したい。それなら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で閲覧、プロパティの反映まで確認できました。コードは1行も書いていないのに、もう動く。
ここで一気に楽しくなってきました🫠
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ファイルも公開しています。私の環境では問題なく動作していますが、ご利用は自己責任で🫠
