はじめに

インターネット通信を経由しない、ローカル環境で管理できるサイト管理アプリ『リンクリスト』を作りました。
インストール不要、Webブラウザで開くだけで利用できます。
Webサーバーも不要です。
サイトのリンクを管理するアプリやサービスはありますが、自分好みのものが欲しくなり作りました。

つくったもの

サイト管理アプリ『リンクリスト』のデモ動画です。検索や絞り込みで表示するサイト情報を絞り込みしている動画になります。

ソースコード

ソースコードを github に格納しました。

ソースコードを全てダウンロードし、index.html をブラウザで開くと使用できます。

使い方

リンクリストの使い方を紹介します。

1.名称

リンクリストの各部名称を紹介します。
リンクリストには、検索欄,大項目欄,カテゴリ欄,サイト情報欄の4つの欄があります。

2.サイト情報欄

サイト情報欄には、サイトのリンクとそのリンクに関する情報を表示します。サイト情報は、パラメータ kana の情報をもとに50音順にソートして表示します。

サイト情報欄に表示する情報は、links_XX.son.jsファイルにJSON形式で記載されています。

JSON形式の情報にあるパラメータnoteの情報は、リンクリストでは複数行のテキスト情報として表示されます。この情報は、ドラッグで枠を拡大することで表示される情報を増やせます。これにより簡易的にIDやパスワードなどの表示/非表示ができます。そのため、オンライン会議で画面共有をした際に、IDやパスワードなど隠したい情報を非表示にできます。

サイト情報欄にはlinks_XX.son.jsファイルに登録された全てのサイト情報が表示されます。そのため、表示される情報が多く、目当てのサイトが見つけにくい場合があります。そのような場合は、次から説明する『キーワード検索』や『絞り込み』を使い、サイト情報欄に表示する情報を減らし、探しやすくします。

3.キーワード検索

検索キーを入力し検索します。リンクリストに登録したサイトに関するほぼ全ての情報が検索範囲になります。

以下はキーワード[ワシントン]で検索した結果です。サイト情報欄 にはキーワードを含むサイト情報のみが表示されます。カテゴリ欄には、キーワードを含むサイト情報のカテゴリ情報のみ表示されます。

全角or半角の空白で複数の検索キーを入力すると、それら複数のキーでAND検索します。ローマ字は大文字小文字を区別しません。以下はキーワード[YAHOO][メモ]の2つの検索キーでAND検索した結果です。

4.links_XX.json.js単位で絞り込み

サイトの情報は、links_01.json.js,links_02.json.js,links_03.json.jsにあり、.jsファイルごとに読み込み範囲を絞り込みできます。

以下は、ローカルファイル(links_03.json.js)のみ読み込んだ結果です。カテゴリ欄とサイト情報欄にはlinks_03.json.jsに登録された情報のみ表示されます。

5.カテゴリで絞り込み

カテゴリ欄に登録されたキーワードで絞り込みができます。
以下は[ニュース] を選択した結果です。

カテゴリ欄もAND検索です。複数のキーワードを選択すると更に絞りこみができます。以下は[ニュース]と[マイクロソフト]の2つを選択した結果です。

6.キーワード検索とカテゴリで絞り込み

キーワード検索とカテゴリを組み合わせての絞り込みも可能です。

参考

サイトリンクを作るにあたり、以下を使用にしました。

さいごに

サイト管理アプリ『リンクリスト』は、使用しながら改善し、ようやく納得する形になりました。しかし、よく使う検索キーワードやカテゴリを表示する機能を実装出来てないので、思いついたら実装しようと思います。