知的生産ツールの三要件
さて、Webブラウザで使える知的生産ツールを作っちゃうぜ、という話なのですが、それらのツールに必要なことってなんでしょうか。三つあります。
1.テキスト入力
これはまあ、いうまでもありませんね。メモツールや文章作成ツールなら必須ですし、それ以外のツールでも入力できないなら「知的生産」は結構難しいでしょう。
HTMLの要素なら<textarea>がユーザーの入力を支援してくれます。JavaScriptなら、promptを使うこともできますね。
window.prompt("ユーザー名を入力してください", "");が、それはそれとしてHTML5では、「contenteditable」という属性が使えます。これを指定すると、その中の要素をユーザーが自由に書き換えられちゃうのです。
<body contenteditable="true"></body>
としてやれば、そのページ全体が、
<div contenteditable="true"></div>
とすれば、そのdivがまるでtextareaのように自由に書き換えられます。でもって、リッチテキストも扱えます。
この属性のおかげで表現力あるユーザーの入力が可能となりました。
2.要素の操作
もう一つ、「知的生産」に置いて大切なのが操作です。
どうせなら、アウトライナーや付箋のように要素を移動させたいですよね。というか、そのような記録の操作を通して、概念操作を代替させることが知的生産ツールの役割でもあります。そうしたものが一切必要なければ普通のエディタで十分でしょう。
そうした操作に関しては、JavaScriptが使えるのですが、その中でもjQueryライブラリがとんでもなく役立ちます。リアルな開発の現場では色々力不足もあるのかもしれませんが、自分で使うツールならまったく問題ありません。
導入も簡単ですし、すでに使いこなされているのでネットでもたくさん情報が見つかります。初心者にはありがたい環境です。
また、jQueryのプラグインであるjQuery-uiというのがあって、これがドラッグでの移動などの「いかにも知的生産ツールで行いたい動作」を実現してくれます。
この二つを入れておけば、なんとなくいい感じのツールがつくれるぜぃ、という優れものです。
3.保存
上記の入力と操作ができるのはよいのですが、そうしたものが保存できないと知的生産ツールとしては力不足です。なにせ脳内で対応できないからそういうツールを使っているのであって、次の日アクセスしたらすっかりデータが消えていました、というのでは継続的な知的生産工程には役立ちません。
で、データの保存のためにはファイルの入出力が必要なのですが、私はその辺を全然わかっていないので、ツールづくりは諦めていました。知識がない、というのは限界を設定することでもあります。
しかし、localStorageがすべてを変えてくれました。仕組みの説明はここでは割愛しますが、.txtとかそういうファイルを作ることなく変更データを保存できてしまうのです。感覚的には変数にデータを放り込むような感覚でOKです。
localStorage.setItem('キー', '値');JavaScriptで上記のように書けば、ページを表示しているブラウザ君がそのデータを保存してくれます。やや大きいデータを扱えるcookieみたいなものです。
このlocalStorageが使えるようになったおかげで、簡易の知的生産ツールが簡単に実装できるようになりました。「ブラウザごと」にデータが保存されるのでクラウド的ではありませんが、それでも作るコストを考えれば十分高機能と言えるでしょう。
三種の神器を携えて
ユーザーが入力し、操作し、そしてそれを保存する。これができればツールが作れます。
それぞれの解説については、それを使うときに実際にぶつかる課題を解決する際にでも書いてみましょう。
とりあえずは、実践です。
この記事が気に入ったらサポートをしてみませんか？