⭐ GitHubで公開中！スターお願いします ⭐
最近話題のClaude Codeを使って、なんとWebページ上でメモを取れるブックマークレットを作ってみました！
想像以上に簡単で、しかもかなり実用的なものができあがったので、その体験をシェアしたいと思います。
💡 このプロジェクトが役に立ったら、ぜひGitHubでスターをお願いします！
何を作ったのか
Claude Codeで作ったのは、URL Note Takerというブックマークレットです。
🚀 GitHubからコードをダウンロードして今すぐ使えます！
主な機能：
- 任意のWebページ上でメモを取る
- メモはページのURLと紐づけて保存
- 日付・時刻の自動記録
- モダンなPreactベースのUI
- ブラウザのローカルストレージに保存
📦 ワンクリックインストール → main.user.js
技術スタック
作成したブックマークレットの技術構成：
- JavaScript ES6+ - メイン言語
- Preact - UIフレームワーク（CDN経由）
- HTM - JSXライクなテンプレート
- Lodash - ユーティリティライブラリ
- Day.js - 日付フォーマット
- Tampermonkey/Greasemonkey - ユーザースクリプト実行環境
Claude Codeで開発した感想
良かった点
-
コンテキストの理解が素晴らしい
- 一度プロジェクトの概要を説明すると、その後の修正依頼も的確に理解してくれる
- 既存のコード構造を崩さずに機能追加してくれる
-
現代的なベストプラクティスを自然に適用
- ES6+の記法を積極的に使用
- モジュラーな設計
- 適切なエラーハンドリング
-
テストとデバッグのサポート
- 複数ブラウザでのテスト方法を提案
- デバッグ用のconsole.logも適切に配置
改善点・注意点
-
依存関係の管理
- CDN経由で外部ライブラリを読み込むため、オフライン環境では動作しない
- バージョン固定の重要性
-
ブラウザ互換性
- 古いブラウザでの動作確認が必要
- ユーザースクリプトマネージャーの違いによる挙動差
コード例
以下は、メモを保存する部分のコードです：
const storage = {
async save(url, note) {
const notes = await this.getAll();
const timestamp = new Date().toISOString();
if (!notes[url]) {
notes[url] = [];
}
notes[url].push({
content: note,
timestamp: timestamp,
id: Date.now()
});
return new Promise((resolve) => {
GM_setValue('notes', JSON.stringify(notes));
resolve();
});
},
async getAll() {
return new Promise((resolve) => {
const notes = GM_getValue('notes', '{}');
resolve(JSON.parse(notes));
});
}
};
実際の使用場面
このブックマークレットは以下のような場面で活用できます：
-
調べ物の際のメモ取り
- 記事やドキュメントを読みながら重要なポイントを記録
- 後で同じページを見返した時にメモが表示される
-
学習記録
- オンライン教材で学んだ内容をメモ
- 疑問点や理解したポイントを記録
-
ブックマーク以上の情報管理
- 単なるブックマークではなく、なぜそのページを保存したかも記録
- 後から見返した時に理由が分かる
開発で学んだこと
1. ユーザースクリプトの可能性
ブックマークレットやユーザースクリプトは、既存のWebサイトを自分好みにカスタマイズする強力な手段です。
今回作ったようなメモ機能以外にも：
- UI/UXの改善
- 足りない機能の追加
- データの自動収集・整理
- アクセシビリティの向上
など、様々な用途に活用できます。
2. モダンなJavaScriptの活用
ES6+の機能を使うことで、より読みやすく保守しやすいコードが書けます：
// 分割代入とデフォルト引数
const { title = 'Untitled', url = window.location.href } = pageInfo;
// async/await でのPromise処理
const notes = await storage.getAll();
// テンプレートリテラル
const formattedDate = `${dayjs(timestamp).format('YYYY-MM-DD HH:mm')}`;
3. CDNを活用した軽量開発
外部ライブラリをCDN経由で読み込むことで：
- ビルドプロセスが不要
- 依存関係の管理が簡単
- デプロイが楽
🎉 今すぐ使ってみよう！
**🚀 GitHub リポジトリ**で全コードを公開中！
🌟 コミュニティに参加しよう！ 🌟
無料でできるサポート：
- ⭐ GitHubでスター - 一番簡単な応援方法！
- 🍴 フォーク&シェア - 他の人にも教えてあげて
- 🐦 SNSでシェア -
#URLNoteTaker#ClaudeCode - 📝 記事を書く - あなたの体験をシェア
開発に参加：
- 🐛 バグ報告 - Issues
- 💡 機能提案 - Discussions
- 🔧 コード貢献 - プルリクエスト歓迎！
- 📖 ドキュメント改善 - みんなで良くしていこう
📥 すぐに試せます：
- ワンクリックインストール
- Tampermonkey/Greasemonkeyが自動で開きます
- インストール後、任意のページでメモを開始！
💝 寄付で応援：
- 💖 GitHub Sponsors
- ☕ Ko-fi Monthly Support
- 🌟 選ばれしアーリーアダプター - 期間限定特典層
- 🎯 早期サポーター特典 - より高位のベネフィットへの優先アクセス権
まとめ
Claude Codeを使って、思っていた以上に実用的なブックマークレットを作ることができました。
特に印象的だったのは：
- コンテキストの理解力の高さ
- モダンなJavaScriptの知識
- 実用的な提案力
今後やってみたいこと：
- Chrome拡張機能版の作成
- データのエクスポート・インポート機能
- 他のユーザーとのメモ共有機能
皆さんも、Claude Codeで何か作ってみてはいかがでしょうか？
思っているよりも簡単に、実用的なツールが作れるかもしれません！
🔗 プロジェクトに参加・貢献したい方はGitHubをチェック！
参考リンク
参考文献（関連記事）
Claude Code・生成AI開発関連
- Claude 3.5 Sonnetでエージェンティックコーディング：VSCodeとの連携がもたらす未来
- Claude 3.5の使い方と最新のAI性能
- Claude 3.7 Sonnetを使ったら半日でアプリ開発&リリースできた話
ユーザースクリプト・ブックマークレット開発
- Tampermonkeyとは
- UserScriptで楽しくJavaScriptを覚えよう
- 【Tampermonkey】特定サイトのショートカットキーを無効化/任意のスクリプト実行を行う方法
- AtCoder Easy Test を支える技術
Preact・フロントエンド開発
オープンソース・GitHub活用
Web開発・生産性向上
ブックマークレット・JavaScript実践開発
- Bookmarkletを作ろう(準備編）
- ブックマークレットでブラウザに便利機能を追加してみよう
- JavaScriptの勉強用にBookmarkletの作成を勧めてみた話
- ブックマークレットを作るときのTips
ローカルストレージ・データ永続化
- localStorageを使ってブラウザにデータを保存する
- 【JavaScript・localStorage】Webアプリ個人開発で体得したlocalStorageの使い方
- リロードしてもデータを保持するためには「localStorage」
CDN・ライブラリ配信とモダンJS
- 結局ライブラリはCDNから読み込むのとnpm installして自前配信のどっちが良いのか？
- 自作JavaScriptライブラリを公開できるCDNサービス
- 700個以上のJavaScriptライブラリを配信する「cdnjs」
個人開発・プロダクトマーケティング
- 個人開発で（お金をかけずに）お金を稼ぐためのポイント
- 【2024最新版】個人開発で成功した 12 人のプロダクトとアドバイスを総まとめ
- 個人開発で初月MAU20,000を達成した企画/実装/広報ノウハウ
Web Components・カスタム要素
💫 最後まで読んでいただき、ありがとうございました！
🚀 忘れずにアクション：
- ⭐ GitHubでスター
- 🔄 この記事をシェア（LGTM・フォロー歓迎！）
- 💬 コメントで感想をシェア
- 🤝 プロジェクトにコントリビュート
一緒にOSSコミュニティを盛り上げていきましょう！ 🌟