meemospad ブラウザにローカル保存できるメモアプリ
meemospadを作りました
MeemosPadというWebサービスを作りました。
動く様子はこんな感じです。
メモを作り、暗号化をして復号化します。
これは何か
メモができるWebアプリです。
さらに、メモ本文の暗号化とメモの送受信ができます。
ブラウザのURL欄にmeemospad.hone-choko.comと入力し、表示するだけでメモができます。
他の端末に共有をしたい場合は送信・受信で他の端末(PC,スマホ)に送ります。
保存をしたい場合はダウンロードしてください。
Evernoteみたいなメモ用アプリのクローンと考えてもらっていいですが、クローンと考えると機能は落ちます。
ただ、Evernoteなどには無い利点が何個かあります。
インストールの必要が無い
ネットワークに接続が出来ればインストール無しで使用可能です。 Windows/Mac/Linux/iOS/Androidなどで使用可能です。
ログインの必要が無い
どこかのサーバーにログインする必要はありません。 ブラウザを立ち上げるだけです。
データ通信を行わないのでデータ漏洩の危険が少ない
データ通信は読み込み時の初回のみなのでデータ通信量はおそらく1MB程度になります。 ユーザデータはブラウザに保存されます。 また、GoogleAnalyticsのようなトラッキングは行っていないので、データの盗み見をされる危険性は低いと思います。
メモのダウンロード・アップロードができる
ブラウザへの保存が怖いのであればメモをダウンロードしておくことも可能です。
暗号化しておける
さらにメモは公開鍵暗号で暗号化しておけます。
作った理由
理由1 サーバー代を払いたくない
数年前にyourdeviceというスマートフォンの端末情報を取得できるウェブアプリを作りました。
当時の私にはバックエンド側の処理を作る技術とAWSやGCPにバックエンドサーバー用のインスタンスの代金を払う余裕がなかったのでフロントエンドだけで完結するように作りました。
公開から5年以上経ち、バックエンドの処理はなんとか書けるようになりましたが、バックエンドのサーバー代を払う金銭的余裕はいまだありません。
GCPやAWSの無料枠でなんとかサーバーを動かすことはできるのですが、バックエンドサーバーを無料で動かす処理が複雑になり、放っておくと有料枠に食い込んでどうしよう！みたいになるのが目に見えているのでバックエンドサーバーでの運用はしないことにしました。
なので、このアプリもyourdeviceと同様にフロントだけで動きます。
バックエンドサーバーを持たないので、サーバー側のDBにアカウントが作られるということはありません。
といいつつ実はこのアプリのデータ送受信機能用にバックエンドでサーバー(piping-server)が動いてはいます。
なお、その送受信用バックエンドはクラウドサービスの無料枠内で動かしているので止まる可能性もあります。
理由2 サーバーに縛られないクライアントだけのサービス
以前メモ用アプリとしてwri.peを使っていたのですがサービス終了してしまいました。
その後Evernoteを使っていたのですが無料プランだと複数デバイスでのログインに制限がかかるようになったので昨年あたりにバイバイしました。
wri.peは無料のサービスでしたがサーバの運用をやめてしまえばサービス終了となります。
Evernoteは有料サービスのため、Evernoteの人気が落ちていくにしたがって無料で使うにはキツくなっていきました。
wri.peみたいなアプリを自分で作ろうと考えていたのですが、その場合LinuxをAWSのEC2などで動かし、そこでRailsとDBを動かす必要がありました。
その場合AWSやGCPとかでインスタンスを立ち上げる必要があり、その場合ギリギリ無料枠では運用できないことがわかっていました。
また、firebaseなどを使ってLinuxやRails無しで、なんとか構成を作ることも考えましたがそこまで頑張りたくないのでその構成はあきらめました。
自宅にサーバーを作りそこで運用することも考えたのですが、その場合サーバーの死活監視をする必要がありまあめんどくさいです。
なのでそれに縛られないメモ用アプリを作ったのです。
理由3 クライアントだけでログインなしでデータ保持
理由2とかぶりますが、バックエンドにRailsなどのサーバーを置かずに、フロントエンドのHTMLとJSとブラウザAPIだけでデータを保持できるサービスを作りたいという気持ちがずっとありました。
アカウントやログインがないけどもデータの保持ができてしまうサービスを作りたかったのです。
実はこのアプリはログイン機能を持たせられるのですが、ただそれはログインというよりは鍵を開けて入っていくという感じなのでアカウントに対してログインするとはちょっと違う感じです。
ログインではなくアンロックです。
このアプリはデータをブラウザのプロファイル領域に保存します、ですのでプロファイルごとに保存領域が違うということになります。
一つのプロファイルごとにmeemospad.hone-choko.com用の保存領域が使用できます、だからプライベートモードなどでmeemospadを使って保存をしてもプライベートウィンドウを閉じるとデータは無くなります。
例えばある端末（PCとかスマホとか）のブラウザAにプロファイルが3つ、ブラウザBにプロファイルが2つある場合その端末には5つのmeemospad.hone-choko.com用の保存領域が存在できることになります。
理由4 piping-serverを使いたかった
このアプリはデータの送受信ができるのですが、その機能はpiping-serverを使って実装しています。
piping-serverが出てきた時に私は衝撃を受けました、これでデータの送受信ができてしまうのかと。
piping-server側はクライアント同士のリクエストを一瞬つなげるだけで他は何もしていないというシンプルな構成が美しいと思いました。
私もそんなアプリを作れたらと思っていたのですが、結局「そんなアプリ」を使ったこんなWebアプリが出来上がりました。
meemospadの仕組み
meemospad.hone-choko.comをブラウザで表示すると、まず初期HTMLを読み込みます。
この時点ではブラウザはhtmlとcssしか読み込みんでいません。
loadボタンを押すとメインとなるjsファイルを読み込み、処理がはじまります。
容量的にはメインとなるjsファイルが500kb前後で、htmlとcssを合わせても1MB以内です。
基本的にはDLするのはこれだけです、これ以降は通信はしません。 （メモや鍵の送受信をする場合は別）
テキスト情報やログイン用の情報はブラウザのIndexedDBに保存します。
サーバーと通信はしません。
IndexedDBはブラウザ > プロファイル > ドメインごとに持つものなので、同じブラウザでも違うプロファイルでmeemospad.hone-choko.comを表示した場合、プロファイルAで保存した情報はプロファイルBでは見られません。
また、ログイン用のパスワードを設定できるので、同じブラウザ、同じプロファイルでmeemospad.hone-choko.comを見てもパスワードを知らなければ中身は見られないようにできます。
さらに、メモの情報は鍵を使って暗号化できます、パスフレーズを使った暗号化もできますのでパスフレーズをつけた鍵を作ってそれで暗号化しておけば端末のセキュリティを突破されてもメモの中身を見ることは難しくなっています。
また、GAなどのトラッキングJSは読み込んでいない上、サーバーとの通信は行わないので、アプリ側によるデータの盗み見もしませんというか盗み見ができないようになっています。
なお、IndexedDBのデータはブラウザがアンインストールされるか、ユーザーデータ領域が削除されるなどすると消えます。
そのためにメモのダウンロード機能と、送受信機能があります。
ダウンロード機能はそのままです、選択したメモや鍵をダウンロードできます。
ブラウザに保存するのが不安であれば、保存してくださいということです。
JSONでダウンロードします。
逆にアップロード機能もあります、ダウンロードしたJSONを他の端末でアップロードすればそのまま使えます。
送信機能はpiping-serverを使ってデータを送受信します。
送信側と受信側で同じキー（合言葉）をセットして送信すると受信側に届きます。
もちろん、キーを知っている第三者にデータを盗まれる危険性はあります、それが怖いのであれば鍵を使って暗号化して送受信してください。復号化のために送信先に鍵を事前か事後に送っておく必要があります。
誰かに見られるのが怖いという場合は、meemospad上でメモを暗号化し、暗号化に使った鍵もDLして、meemospad上のメモと鍵を消しておくという運用でしょうか。
meemospadの使い方
メモの作成と保存
まず、初期ページmeemospad.hone-choko.comを読み込みます。
その状態だとただのHtmlなのでloadボタンを押します。
初回はメモが1個、鍵が1個登録されています。
メモを追加するにはメモが選択されていたら（リストが灰色なっている）のクリックして選択を解除します、 上部のプラスボタンでメモが追加されます。
メモは名前、タグ、本文が設定できます。
放っておくと保存をしますが、マニュアルで保存する場合は右下の保存ボタンを押します。
リストは最新のものが一番上に表示されます。
暗号化と復号化
鍵が存在しているとメモの暗号化ができます。
復号する場合も暗号化と同じです、鍵を選んで復号します。 鍵が違う、またパスフレーズがある場合にパスフレーズが合致しない場合はエラーとなります。
鍵の作成は鍵をクリックし、鍵の名前と必要であればパスフレーズを入力して生成します。
送信と受信
メモの送受信はメモを選択状態にして送信ボタンを押します。 キーが表示されるので、そのキーを受信する側に何らかの方法で伝えます。 自身のブラウザやデバイス間で送受信するのであればキーを記憶しておいてください。
受信はメモを選択していない状態にして受信ボタンを押します。 こちらでもキーが表示されるので送信側のキーに入力しなおします。
その後送信側で送信ボタンを押し、受信側で受信ボタンを押すとメモが送信され、受信されます。
キーは送受信側が揃っていればいいので、受信側に合わせてもいいし送信側に合わせてもいいです。 入力もできるので好きなキーに書き換えてもOKです。
さらに送信と受信はどちらが先に開始しても問題ないです。送信ボタン、受信ボタンを押す順番はどちらが先でもOKです。ただ、タイムアウトしてしまうのでどちらかが送信または受信を押したら、1分以内に受信または送信を済ませる必要があります。
なお、この送受信はpiping-serverを使っているので、同時刻に同じキーで受信や送信をしているユーザーがいた場合にはそちら側にデータが行ってしまったり、逆にこちら側に意図しないデータが飛んでくる場合があります。
通信経路をちゃんと確保して送受信するシステムではないということを把握しておいてください。
送信と受信は前後できるので、「受信待ち」にしてから送信した方が少し安全です。
ダウンロードをすれば、メモをJSONとして端末に保存できます。ダウンロードしたJSONはメモとしてアップロードできます。
ダウンロードしたJSONをメールで送信し、メールを受け取った側でmeemospad.hone-choko.comを開きメモとしてアップロードができるということです。
送受信を使わずにコピーを作りたいのであればこの方法を使ってください。
また、鍵もメモ同様に送受信とダウンロード・アップロードができます。
なお、アップロードという単語を使っていますがアップロードされるのはブラウザのプロファイル領域（IndexedDB）なのでサーバーなどにアップロードされるわけではありません。
設定でできること
画面に左下のギアアイコンで設定画面が開きます。
パスワードログインの設定、アプリの日本語/英語表示の切り替え、エディタの文字の大きさと色、自動セーブの可否と自動セーブする場合の間隔の設定ができます。
届け出について
基本的にキーを知っている同士（同じ人、同じ端末の違うブラウザでもいい）が同じタイミングで送信と受信をする必要があるので、不特定多数との通信はできないという認識ですが、一応日本の総務省の電気通信事業の届け出は出してます。
書類を用意して、送るだけでしたが、結構面倒でした。
何かあった時にできるかぎり不利にならないための保険で出しましたが、サイト名を書くところもなく、何かあった時の保険になるのかはよくわかりません。
今後
現状では画像は扱えませんが、扱えるようにするかもしれません。
また編集機能はCodeMirrorを使用しているのですが、現状ではCodeMirrorの検索機能がそのまま出てくるのでなんとかしたいと思っています。
また、データの一括送信/一括ダウンロードや、同期機能も付けられないか考えています。