1つのHTMLファイルで簡易なバージョン管理ができるブラウザアプリを作ってみた。

10年ぶりにJavaScriptをさわってみたら知らないことがたくさんあったので、勉強がてらにちょっとブラウザアプリを作ってみました。

アプリの概要

ブラウザだけで動く1つのHTMLファイル(filepot.html)による簡易バージョン管理アプリです。
Gitなどのバージョン管理システムを使えない(環境にいる)人向けをイメージしてみました。

特徴

• 新しめのブラウザがあれば動きます。他にインストールが必要なものはありません。
• 外部とのやり取りはしないため、インターネットにつながっていない環境でも使用可能です。

ダウンロード

こちらからfilepot.htmlをダウンロードしてください。
※ソースコードはGitHubに置いてます。

使い方

ファイルの登録

1. ブラウザでfilepot.htmlを開きます。

2. バージョン管理したいファイルをドラッグ＆ドロップします。するとドロップしたファイルの一覧が下に表示されます。
   

3. この時点ではまだ保存されていないため、保存をクリックします。クリックするとfilepot.htmlのダウンロードが始まるので上書き保存するか別名で保存してください。
   

本当はfilepot.htmlが自分自身を上書き保存できればいいのですが、たいていのブラウザのセキュリティポリシーではJavaScriptからローカルにファイルを保存するのは難しいようなのでダウンロードという形式にしています。

登録したファイルを更新したり新しいファイルを追加したい場合は上記保存によってダウンロードしたfilepot.htmlを開いて同じ操作をします。

##登録したファイルの取得

登録しているファイルを取得する方法は2つあります。

特定のバージョンのファイルを1つ取得する

1つめの方法はファイル名のリンクのクリックです。クリックするとそのリンクの左側に記載されているバージョンでのファイルをダウンロードできます。

ある登録時点のファイルをまとめて取得する。

2つめの方法はまとめてダウンロードのリンクのクリックです。こちらはファイルを登録した単位でその時点で登録されている最新ファイル一式をダウンロードできます。

見た目はダウンロードなのでインターネット経由でサーバーからダウンロードしているように見えますが、JavaScriptでファイルを返しているだけなのでインターネットにアクセスしているわけではありません。

登録のやり直し

「1つ戻す」をクリックすると一番最新の登録を削除します。

登録されているものがなくなるまで削除できます。

削除すると元には戻せないので保存する前に実施する場合は注意してください。

コメントを書く

コメントアイコンをクリックするとコメント入力ダイアログが表示されコメントを書くことができます。コメントはファイル単位で書くことができます。

フィルター

フィルターアイコンをクリックすると、クリックしたファイル(とそのコメント)だけが画面に表示されます。特定のファイルの履歴を見たいときに便利です。

ブラウザのエラーなどで保存ができない場合

ブラウザの制限もあり、filepot.htmlのファイルサイズが大きくなると保存できなくなることがあります。その場合はハサミのアイコンをクリックすると最新版のみを含んだfilepot.htmlをして継続することができます。

基本的な使い方はこんな感じです。