リンク集作成アプリ「localportal」の紹介
この投稿は「作ったアプリ自慢！ Advent Calendar 2016」の23日目の記事です。
はじめに
紹介するのは、手軽に，検索しやすい形でリンクを登録できるアプリ「localportal」です。
「localportal」という名前は「HTML5のlocalstorageを使っている」＋「個人用portalの役割を担っている」というところから名付けました。
まだまだプロトタイプレベルですが、最低限の機能は実装したつもりで、個人では職場で使い始めています。
利用技術
Ver0.0.5時点の利用技術は次の通りです。
- bootstrap v3.3.7
- AngularJS v1.5.9
- ngStorage v0.3.10
- cmEditableText
AngularJS2がリリースされていますが、将来的に 別のAngular1のアプリをメンテする可能性があるので、勉強のためあえてAngularJS1を使いました。
機能の紹介
使用中の画面を見てもらうのがはやいと思うので、メインの機能である「リンクの登録」、「タグ検索」、「タグ追加」をGIF画像で紹介します。（画像はVer0.0.4時点）
【デモ１】リンクの登録
localportalは、ブラウザからリンクを登録することができます。
デモ１では、AngularJS公式サイトのAPIドキュメントページをリンクとして登録しています。
その際、登録名は「Angular APIドキュメント」、タグは「angularjs,api,docs」で登録しています。
今回のリンクは公式サイトなので、「official」のタグがあった方が後で検索しやすいですが、ここでは設定しておりません。この後のデモ３で設定します。
【デモ２】タグ検索
localportalは、タグを指定してリンクを絞り込むことができます。
デモ２では、リンクを「angularjs」、「event」、「doorkeeper」と絞り込み、Doorkeeperの「Angular Japan User Group」のページを開いています。
【デモ３】タグ追加
localportalは、登録済みリンクのタグを更新することができます。
デモ３では、「リンクの登録」で登録したAngularJS公式サイトのAPIドキュメントページを「official」というタグで絞り込もうとしたところ、「official」がタグとして設定されておらず検索できなかったことから、登録済みのリンクに対して「official」のタグを追加してから検索をし直すというシナリオを実行しています。
その他の機能はREADMEの「Usage」をご覧ください。
開発の動機
デモではWebサイト（URL表記のリンク）を登録・検索していたのですが、localportalを開発した一番の動機は、ファイルサーバのパス（UNC表記のリンク）を手軽に，検索しやすい形で登録できるアプリが欲しかったからです。
なぜURL表記のリンクではなくUNC表記のリンクかというと、仕事では日々メールやIRCでたくさんのファイルサーバのパスが送られてくるのに、この管理を効率化する仕組みがないと思ったからです。（一方のURL表記のリンクについては、会社自体がポータルサイトを持っていたり、ブラウザが頻繁に使うサイトを覚えておいてくれたりするので、UNC表記のリンクに比べるとアクセスの効率化はできていることが多いと思っています。）
ここから、「従来のファイルサーバのパスの管理方法と問題」と「localportalでの解決策」を紹介します。
従来のファイルサーバのパスの管理方法と問題
従来のファイルサーバのパスの管理方法は、次の３通りに分類できると思っています。
- ショートカット格納用フォルダを作って、そこでショートカットを階層構造で管理する
- テキストもしくはHTMLで簡単なリンク集を作成して管理する
- 浅い階層だけショートカットで管理していて、メールに記載のパスを開くときはメールクライアントの検索機能やGoogle Desktopの機能で検索する
1, 2の管理方法だと、リンクを階層構造で管理するので、階層構造を綺麗に保つための管理コストがかかるという点が問題となり、3の管理方法だと、メール全体が検索範囲になるので、ノイズが入ってしまって検索効率が悪いという点が問題になります。
localportalでの解決策
localportalは、タグ付け機能により、従来のファイルサーバのパスの管理方法の問題を解決しています。（しているつもりです。）
| 従来の問題 | localportalでの解決策 |
|---|---|
| 階層構造で管理すると管理コストがかかる | タグ機能により階層構造なしで効率的な管理ができる |
| メール検索だと検索範囲が広いのでノイズが入って検索効率が悪い | 検索範囲をタグに限定しているので検索効率が高い |
タグ付け機能自体は、最近のWebサービスだとよくある機能だと思うのですが、この機能をlocalstorageと組み合わせて、ブラウザ上でリンクの管理が完結するSPAという形にまとめてあるところは、このアプリのユニークなところかなと思っています。
おわりに
現状の実装はプロトタイプレベルで、まだまだ改善の余地がありますが、利用技術に挙げた技術や先人のノウハウのおかげで、自分が欲しいと思っていたアプリを作ることができてよかったです。
今後は利用技術の深堀やテストの仕方を学んで、アプリのユーザビリティを高めていきたいと思っています。
それでは、よいお年を。
