MothNote フォルダベースのノートシステムに時計・天気・カレンダーウィジェットを加えたオールインワンダッシュボード Google Chrome 新しいタブ拡張機能

lunamoth · 2025-09-01T16:42:57+09:00

🦋 MothNote MothNote ノート詳細ページのスクリーンショット MothNote 天気詳細ページのスクリーンショット MothNote lunamoth 4th ブログ紹介記事 MothNote GitHub (GeekNews は画像表示に対応していないようなので、リンクにしています。) MohtNote は、フォルダベースのノートシステムに時計、天気、カレンダーウィジェットを加えた、オールインワンダッシュボード型の Google Chrome 新しいタブ拡張機能です。開発過程 MothNote では、Google Chrome の新しいタブで素早くすぐにノートを書けて、時計・カレンダー・天気・気温なども素早く確認できます。15種類の機能を備えた LunaTools 拡張機能を作ったあと、ふと新しいタブ拡張機能も作ってみたらどうだろうと思い、作り始めました。開発者でもなく、プログラミングもまったく分かりませんが、Google AI Studio（Web）で Google Gemini 2.5 Pro を使って 2025年7月25日に作り始め、38日ほど開発して 2025年9月1日にリリースすることになりました。外部ライブラリを除いたコード行数は 7,385 行です。最もよく見る新しいタブでそのままノートが書けたら便利だと思い、多くのプロジェクト管理ツールで見かける3カラム構造で、まずノートアプリを作り始めました。Solarized Light/Dark テーマ対応を入れ、Tabliss 拡張機能から着想を得て、デジタル時計、アナログ時計、天気、気温を入れ、日記用途のためにカレンダーも追加しました。文章作成アプリでよく実装されるフォーカスモード、Zen モードも入れました。レイアウト設定、エディタのフォント設定、天気の都市設定、データのバックアップ/復元機能にも対応しました。途中でマルチタブ同期機能を対応させていたのですが、オーバーエンジニアリングというものを理解してロールバックしたこともありましたね。「原子的操作」という言葉も、作りながら対応しつつ知ったのを覚えています。以前に作っていた天気詳細ページも組み合わせてみると良さそうだったので入れてみました。Markdown は対応しないつもりでしたが、外部ライブラリの使い方が分かったので Markdown ビューモードに対応しました。（Snakdown を使っていましたが、Marked に変更）フォルダのデフォルト値として、PARA や Bullet Journal で推奨されるフォルダを入れてみました。Todo.txt 的な使い方もできそうです。以前は Simplenote を使っていたのですが、データ移行もできそうだったので Simplenote バックアップ JSON ファイルのデータ移行機能も入れてみました。数日前には、ローカルストレージの 10MB 制限ではなく無制限で使える unlimitedStorage 権限を知って適用もしました。開発過程で思いついたアイデアとしては、タグ、複数階層フォルダ、WYSIWYG エディタ、Wiki 形式リンクの導入、ToDo チェック、Readability.js による本文スクラップ機能、Google Drive 連携などがありました。今後は意味のある機能を中心にアップデートしていくつもりです。バグ修正の過程をかなり長く経て、そこそこ実用的になった気がするのでリリースしてみます。なかなか使えると思います。ぜひ一度使ってみて、機能改善やバグレポートをお願いします。（Bluesky、Twitter、Threads で返信いただけるとありがたいです。）主な機能 (以下の機能説明は MothNote のソースコードを分析して Gemini 2.5 Pro が作成しました。) オールインワンダッシュボード: 新しいタブで必要な情報をひと目で確認できます。時計: 美しいデザインのアナログ時計と、視認性の高いデジタル時計を提供します。詳細な天気情報: ダッシュボードのウィジェットをワンクリックするだけで、天気を深く確認できます。週間予報: 専用ページで週間の最高/最低気温の変化を視覚的なチャートとともにひと目で把握でき、現在の天気に応じて雨や雪が降る美しい背景効果もあわせて提供されます。時間帯別の詳細情報: 特定の日付の予報カードをクリックすると、その日の時間帯別の気温、天気の変化、降水確率を詳細なリストとチャートで表示します。位置設定: 都市名検索はもちろん、緯度と経度を直接入力して、世界中どこでも好きな地域の天気を設定できます。ノート連動カレンダー: ノートが作成された日付は下線で表示され、日付にマウスを重ねるとノートタイトルをプレビューでき、クリックするとその日のすべてのノートをすぐにまとめて確認できます。強力なノートシステム: フォルダベースで考えを体系的に整理し、3ペイン UI で効率よくノートを管理できます。 Markdown 対応: #, *, ** などの簡単な記法で書式付きノートを書き、ボタンを1回クリックするだけで整然とレンダリングされたプレビューに切り替えられます。生産性の高いエディタ: エディタ下部で文字数/単語数/行数、作成日/更新日などの詳細情報をリアルタイムで確認でき、Tab キーでインデント/アウトデントができます。自動保存と手動保存: 入力内容はタイピングを止めると自動保存され、Ctrl+S（Mac: Cmd+S）ショートカットで好きなタイミングで即座に手動保存することもできます。便利機能: タイトルを空欄にすると、本文の1行目が自動でタイトルになります。高い自由度と使いやすさ: 生産性を最大化するさまざまな機能をサポートします。ユーザー設定: ライト/ダークテーマ、エディタのフォント/サイズなどアプリの見た目を好みに合わせて変更でき、すべての設定を初期化することもできます。動的 UI: 設定メニューだけでなく、マウスドラッグでペインや Zen モードの幅を直感的に調整できます。高度なノート管理: ノートの検索（検索語のハイライトを含む）、並べ替え、重要ノートの固定とお気に入り機能を提供します。直感的な移動: ドラッグ＆ドロップでフォルダ順を変えたり、ノートを別フォルダへ簡単に移動できます。（ノートをゴミ箱/お気に入りフォルダへドラッグしてそのまま削除/追加可能）集中のための Zen モード（Zen Mode）: 周辺要素をすべて隠し、ノート作成だけに集中できる環境を提供します。ゴミ箱と復元: 削除された項目はゴミ箱へ移動し、復元時には名前の衝突を自動検出して解決するなど、安全に復元できます。データのバックアップと復元: すべてのデータを1つの JSON ファイルに安全にバックアップして復元できます。Simplenote バックアップファイル（JSON）のインポートに対応しており、既存データを維持したまま新しいフォルダへ安全に追加します。キーボードショートカット: 新しいフォルダ/ノートの作成、名前変更、リスト移動などさまざまな操作をキーボードだけで素早く実行できます。データの安定性と信頼性: ユーザーの大切なデータを安全に保護します。データはウェブブラウザのローカルストレージに保存されます。損失防止の警告: 未保存の変更がある状態でページを閉じようとすると警告ダイアログを表示し、データ損失を防ぎます。緊急復旧機能: ブラウザが異常終了した際、未保存の最後の変更を一時バックアップし、次回起動時に復元するかどうかを確認します。自動データ検査: アプリ起動時にデータ整合性を検査し、問題が見つかれば自動で復旧して安定性を維持します。インストール方法 GitHub ページの Release セクションから最新のリリースファイルを取得し、解凍します。 Chrome ブラウザのアドレスバーに chrome://extensions を入力して管理ページへ移動し、デベロッパーモードを有効にします。パッケージ化されていない拡張機能を読み込むボタンをクリックし、1段階目で解凍したフォルダを選択すればインストール完了です。フォルダを拡張機能の管理ページにドラッグ＆ドロップしても構いません。（参考までに、そのフォルダは削除してはいけません。）更新履歴 2025-09-01 16:15 // 17.58 リリース、初回リリース

(github.com/lunamoth)

5 ポイント投稿者 lunamoth 2025-09-01 | 3件のコメント | WhatsAppで共有

🦋 MothNote

(GeekNews は画像表示に対応していないようなので、リンクにしています。)

MohtNote は、フォルダベースのノートシステムに時計、天気、カレンダーウィジェットを加えた、オールインワンダッシュボード型の Google Chrome 新しいタブ拡張機能です。

開発過程

MothNote では、Google Chrome の新しいタブで素早くすぐにノートを書けて、時計・カレンダー・天気・気温なども素早く確認できます。15種類の機能を備えた LunaTools 拡張機能を作ったあと、ふと新しいタブ拡張機能も作ってみたらどうだろうと思い、作り始めました。

開発者でもなく、プログラミングもまったく分かりませんが、Google AI Studio（Web）で Google Gemini 2.5 Pro を使って 2025年7月25日に作り始め、38日ほど開発して 2025年9月1日にリリースすることになりました。外部ライブラリを除いたコード行数は 7,385 行です。

最もよく見る新しいタブでそのままノートが書けたら便利だと思い、多くのプロジェクト管理ツールで見かける3カラム構造で、まずノートアプリを作り始めました。Solarized Light/Dark テーマ対応を入れ、Tabliss 拡張機能から着想を得て、デジタル時計、アナログ時計、天気、気温を入れ、日記用途のためにカレンダーも追加しました。

文章作成アプリでよく実装されるフォーカスモード、Zen モードも入れました。レイアウト設定、エディタのフォント設定、天気の都市設定、データのバックアップ/復元機能にも対応しました。

途中でマルチタブ同期機能を対応させていたのですが、オーバーエンジニアリングというものを理解してロールバックしたこともありましたね。「原子的操作」という言葉も、作りながら対応しつつ知ったのを覚えています。

以前に作っていた天気詳細ページも組み合わせてみると良さそうだったので入れてみました。Markdown は対応しないつもりでしたが、外部ライブラリの使い方が分かったので Markdown ビューモードに対応しました。（Snakdown を使っていましたが、Marked に変更）

フォルダのデフォルト値として、PARA や Bullet Journal で推奨されるフォルダを入れてみました。Todo.txt 的な使い方もできそうです。

以前は Simplenote を使っていたのですが、データ移行もできそうだったので Simplenote バックアップ JSON ファイルのデータ移行機能も入れてみました。数日前には、ローカルストレージの 10MB 制限ではなく無制限で使える unlimitedStorage 権限を知って適用もしました。

開発過程で思いついたアイデアとしては、タグ、複数階層フォルダ、WYSIWYG エディタ、Wiki 形式リンクの導入、ToDo チェック、Readability.js による本文スクラップ機能、Google Drive 連携などがありました。今後は意味のある機能を中心にアップデートしていくつもりです。

バグ修正の過程をかなり長く経て、そこそこ実用的になった気がするのでリリースしてみます。なかなか使えると思います。ぜひ一度使ってみて、機能改善やバグレポートをお願いします。（Bluesky、Twitter、Threads で返信いただけるとありがたいです。）

主な機能

(以下の機能説明は MothNote のソースコードを分析して Gemini 2.5 Pro が作成しました。)

オールインワンダッシュボード: 新しいタブで必要な情報をひと目で確認できます。
- 時計: 美しいデザインのアナログ時計と、視認性の高いデジタル時計を提供します。
- 詳細な天気情報: ダッシュボードのウィジェットをワンクリックするだけで、天気を深く確認できます。
  - 週間予報: 専用ページで週間の最高/最低気温の変化を視覚的なチャートとともにひと目で把握でき、現在の天気に応じて雨や雪が降る美しい背景効果もあわせて提供されます。
  - 時間帯別の詳細情報: 特定の日付の予報カードをクリックすると、その日の時間帯別の気温、天気の変化、降水確率を詳細なリストとチャートで表示します。
  - 位置設定: 都市名検索はもちろん、緯度と経度を直接入力して、世界中どこでも好きな地域の天気を設定できます。
- ノート連動カレンダー: ノートが作成された日付は下線で表示され、日付にマウスを重ねるとノートタイトルをプレビューでき、クリックするとその日のすべてのノートをすぐにまとめて確認できます。
強力なノートシステム: フォルダベースで考えを体系的に整理し、3ペイン UI で効率よくノートを管理できます。
- Markdown 対応: #, *, ** などの簡単な記法で書式付きノートを書き、ボタンを1回クリックするだけで整然とレンダリングされた プレビュー に切り替えられます。
- 生産性の高いエディタ: エディタ下部で 文字数/単語数/行数、作成日/更新日 などの詳細情報をリアルタイムで確認でき、Tab キーで インデント/アウトデント ができます。
- 自動保存と手動保存: 入力内容はタイピングを止めると自動保存され、Ctrl+S（Mac: Cmd+S）ショートカットで好きなタイミングで即座に手動保存することもできます。
- 便利機能: タイトルを空欄にすると、本文の1行目が自動でタイトルになります。
高い自由度と使いやすさ: 生産性を最大化するさまざまな機能をサポートします。
- ユーザー設定: ライト/ダークテーマ、エディタのフォント/サイズなどアプリの見た目を好みに合わせて変更でき、すべての設定を初期化することもできます。
- 動的 UI: 設定メニューだけでなく、マウスドラッグでペインや Zen モードの幅を直感的に調整できます。
- 高度なノート管理: ノートの検索（検索語のハイライトを含む）、並べ替え、重要ノートの固定と お気に入り 機能を提供します。
- 直感的な移動: ドラッグ＆ドロップでフォルダ順を変えたり、ノートを別フォルダへ簡単に移動できます。（ノートをゴミ箱/お気に入りフォルダへドラッグしてそのまま削除/追加可能）
- 集中のための Zen モード（Zen Mode）: 周辺要素をすべて隠し、ノート作成だけに集中できる環境を提供します。
- ゴミ箱と復元: 削除された項目はゴミ箱へ移動し、復元時には 名前の衝突を自動検出して解決 するなど、安全に復元できます。
- データのバックアップと復元: すべてのデータを1つの JSON ファイルに安全にバックアップして復元できます。Simplenote バックアップファイル（JSON）のインポートに対応しており、既存データを維持したまま新しいフォルダへ安全に追加します。
- キーボードショートカット: 新しいフォルダ/ノートの作成、名前変更、リスト移動などさまざまな操作をキーボードだけで素早く実行できます。
データの安定性と信頼性: ユーザーの大切なデータを安全に保護します。
- データはウェブブラウザのローカルストレージに保存されます。
- 損失防止の警告: 未保存の変更がある状態でページを閉じようとすると警告ダイアログを表示し、データ損失を防ぎます。
- 緊急復旧機能: ブラウザが異常終了した際、未保存の最後の変更を一時バックアップし、次回起動時に復元するかどうかを確認します。
- 自動データ検査: アプリ起動時にデータ整合性を検査し、問題が見つかれば自動で復旧して安定性を維持します。

インストール方法

GitHub ページの Release セクションから最新のリリースファイルを取得し、解凍します。
Chrome ブラウザのアドレスバーに chrome://extensions を入力して管理ページへ移動し、デベロッパーモードを有効にします。
パッケージ化されていない拡張機能を読み込む ボタンをクリックし、1段階目で解凍したフォルダを選択すればインストール完了です。フォルダを拡張機能の管理ページにドラッグ＆ドロップしても構いません。（参考までに、そのフォルダは削除してはいけません。）

更新履歴

2025-09-01 16:15 // 17.58 リリース、初回リリース

3件のコメント

lunamoth 2025-09-01

あっ、最初のスクリーンショットのリンクURLに誤字がありましたね;

https://raw.githubusercontent.com/lunamoth/MothNote/…

です。

xguru 2025-09-01

修正しておきました