個人用URL管理アプリ

Posted at 2026-01-24

概要

自分のお気に入りのページのリンクを一覧表示・管理できるアプリを作ってみた。

手軽にリンクを整理・追加できるツールが欲しい。
Safariなどのブラウザにあるブックマーク機能では少し使いづらい。

Google Apps Script(GAS)

アプリにアクセスすると、テキスト形式で保存されたリンクを表示する
アプリからの操作で保存してある情報の追加等が簡単に行える

今回はリンク等のデータをGoogleドライブに保存していく
GASのライブラリを利用してドライブ上のファイルからデータを読み取れるように実装
※ファイルのIDはスクリプトプロパティに保存することで、トラブル等で変更になった際にも書き換えが容易になる

JSONで保存されたテキストをJavaScriptで扱える辞書のような形式に変換しておく

HTMLのdialog要素を使用し、シンプルなオリジナルのダイアログを作成してみた
・「名前」欄メイン画面にサイトの画像と共に表示されているタイトルが表示される
・「サイト」欄それぞれの項目に対応するURLが表示される

テキストボックスの内容を変更した場合、「決定」ボタンでダイアログを閉じて記録された内容を更新する（Googleドライブの保存先にも反映される）

メイン	ダイアログ

データが読み込まれた（アプリ起動時に実行）際、HTML側でデータに応じた数の要素を動的に作成する

※forルーブで処理を実装した後、一時変数の扱いで少々困った。letで変数を再定義することで、ループごとに固有の値で参照することに成功。

項目の追加・削除が行えるように改良していく
・メイン画面の一番下の入力欄から、任意のURLを追加
・メニューの「削除」から、登録済みの値と画面上の要素が削除される

小さめのダイアログを追加することで、選択中の要素の「編集」「削除」をボタン操作で明確に分けた

※キーと値のデータを関連付けて登録していく（辞書のような形式）方法では、キーの順番が変わってしまう可能性がある。
そこでそれぞれを通常の配列に含めることで、順番を維持しながら扱う方式に変更（値の取得、追加、削除用の関数を作成した）

今回は個人用のツールとして開発したので、このバージョンの配布予定はありません。