最近では、メモをクラウド上に保存しておくのが当たり前になってきました。
Dropboxの登場で、今までローカルに置いていたファイルが簡単にクラウド上に同期できるようになりました。 どんなファイルでもDropboxに入れておけば、どこにいても取り出すことができます。
iPhoneやiPadとの相性も抜群で、Dropboxにあるファイルを外出先でダウンロードしたり、編集したりできるのも大きなメリットです。
筆者もWordやExcelなどオフィスで利用するファイルから、PDFや画像ファイルなど様々なファイルをDropboxに入れています。 ただし、どんなファイルでも容量を気にせずに入れておくわけにはいかないので、よく使うファイルに絞って入れるようにしています。
そんな中、唯一Dropboxにたくさん入れているものがあります。それはメモとして書いているテキストファイルです。 テキストファイルであれば、どこにいても自由に編集でき、それほど容量もくわないのでメモとして残しておくには便利です。
しかし、せっかく書き溜めたメモも、あとで有効に活用できなければ無駄になってしまいます。
そこで今回は、このDropboxに書き溜めたメモを活用するために、一瞬でブラウザ上で確認できるようにする方法をご紹介します。
メモを書き溜めるのに最適なツール
DropboxをインストールしているPCの場合は、テキストエディタで作成したメモをDropboxのフォルダに保存しておくだけで問題ありません。
勤務先などDropboxがインストールできない環境の場合は、Chromeのウェブアプリ「SourceKit」を使ってDropboxの中にあるテキストファイルを編集します。 （SourceKitとDropboxの使い方はこちらにまとめています。）
外出先では、iPhoneとiPadのアプリからDropboxにアクセスしてテキストファイルを編集します。 Dropboxと連携できてメモが書きやすいものとして、「Nocs」がおすすめです。
「Nocs」は、iPhoneとiPadの両方に対応したテキストエディタで、Dropboxの中にあるテキストファイルを直接編集することができます。これだけであれば、他にも同様のアプリはたくさんあります。
Nocs特有の素敵な機能があります。それは、Markdownが使えることです。 筆者の場合、メモは共通してMarkdown記法で書くようにしているので、Markdownで書かれたテキストがプレビューできるのはものすごくうれしい機能です。
「Nocs」は有料アプリなので、特にMarkdownのプレビューは必要ないという方は、無料アプリの「PlainText」がよいでしょう。 「PlainText」でも同様にDropboxの中のテキストが編集できます。シンプルなインターフェースで使い勝手も良いアプリです。
このようなツールを使いつつ、Dropboxにメモを書き溜めていきます。
書き溜めたメモを活用する
わざわざブラウザで見れるようにするのには、理由があります。
1つ1つのメモは、一見独立しているように感じますが、溜まってくると実はメモ同士が関連してきます。 それぞれのメモが関連している場合、HTMLであればリンクを張ればよいのですが、ただのテキストファイルなのでそうはいきません。 関連しているメモ同士がリンクできる仕組みを導入すればブラウザで順番に見ていくことができます。
前置きが少々長くなってしまいましたが、そこで利用する仕組みが「Invisible.js」です。 「Invisible.js」は、JavaScriptで作られたドキュメントフレームワークで、テキスト形式のドキュメントファイルを整形してブラウザで見れるようにしてくれます。
このフレームワークは筆者がオープンソースとして公開しているので、どなたでもご自由にお使いいただけます。
ドキュメントフレームワークの導入
「Invisible.js」の導入は簡単です、こちらのダウンロードページから、invisible-js-1.0.1.zip invisible-js-1.0.2.zipをダウンロードします。（1.0.2で配布しやすいようなディレクトリ構成に変更しました）
解凍した後に、invisibleフォルダの中にある下記のファイル一式をDropboxのルートフォルダ（Windowsの場合は、My Documentsの下のMy Dropboxフォルダー）にコピーします。
- viewer.html
- viewer.css
- default.txt
- libフォルダ
ブラウザにviewer.htmlにドラッグしてください。下記のようなページが表示されると思います。 （InternetExplorerの場合、ローカルファイルをブラウザで開くとセキュリティの警告がでるので許可してください。Chromeの場合、デフォルトではローカルファイルでAjaxが使えないので起動オプションに-allow-file-access-from-filesを加えてください。）
最初にアクセスした段階ではdefault.txtの中身が表示されています。
default.txtは下記のようなMarkdown記法で書かれた内容になっています。
## Hello world! [Hello Link](#hellolink.txt)
Hello Link の部分がファイルへのリンク（アンカーリンク）を表しています。
ブラウザで「Hello Link」をクリックしてみてください。
./hellolink.txt (404 error)と表示されます。 これは、リンク先のテキストファイルが無いため開けないという意味です。
テキストエディタを使って下記の内容でhellolink.txtを作成してみてください。
## Hello Link Page Hey! Hey! Hey!
ブラウザをリロードすると、今度は正しく表示されたと思います。
このようにメモの中にアンカーリンクを書いておくだけで、ファイルとファイルを簡単につなげることができます。
例えば、Dropboxの中にある「/PlainText/Memo/readme.txt」をブラウザで確認したい場合は、 viewer.html#PlainText/Memo/readme.txt にアクセスすると直接、そのメモを見ることができます。
テキストファイルがDropboxの中にあるとiPhoneやiPadで編集でき、その結果はすぐに反映されてブラウザで確認できます。
メモをWebに公開する
Dropboxでは、Publicフォルダの下のファイルは公開用URLが割り当てられます。
先程と同様に「Invisible.js」のファイル一式を、Publicフォルダの下の置いておきます。 viewer.htmlの公開URLを確認し、そのアドレスでメモが簡単に公開できます。
テンプレートとなっているviewer.htmlとviewer.cssを変更すれば、デザインを加えることもできます。 工夫をすればブログのように情報を発信することもできると思います。
どこでも編集できて簡単に公開できるメモ環境が「Dropbox」と「Invisible.js」で作ることができました。
是非、試してみてください。
「Invisible.js」については、前回の記事で詳しく紹介していますので、そちらもあわせてご覧ください。
【コーディングスピードが一気に加速するHTMLエディタ】 コーディングしながらリアルタイムに結果を確認することができるブラウザ上で動作するHTMLエディタです。とても便利なので是非チェックしてみてください。 HTML5、CSS3、JavaScriptがリアルタイム編集できる！軽量HTMLエディタ「Liveweave」