いくつかのメタデータを持たせたテキストをカード状に並べる自作ツール。
旧題:Cards.html(仮)
過去のアイデアをランダムで指定枚数ピックアップできるものが欲しくて作った。
ちなみにカードを編集すると編集履歴が全部保存される。
最初期の自作ツールであり実用より「何を作れるのか」という実験として作ったもの。
サンプル
関連記事
新しいスクリーンショット
古いスクリーンショット
動じないために。
いくつかのメタデータを持たせたテキストをカード状に並べる自作ツール。
旧題:Cards.html(仮)
過去のアイデアをランダムで指定枚数ピックアップできるものが欲しくて作った。
ちなみにカードを編集すると編集履歴が全部保存される。
最初期の自作ツールであり実用より「何を作れるのか」という実験として作ったもの。
サンプル
関連記事
新しいスクリーンショット
古いスクリーンショット
Backlinks
他の「のらてつ製デジタルノートツール」カテゴリの語句
簡易ブックマーク管理ツールを作ったことで、CSVファイルから自由にHTML要素を作る術を得ることができました。表のデータにレイアウトやデザインというものを結びつけることができるようになったわけです。
最初はブックマークの整理のことしか考えていませんでしたが、それができるようになってみると、今度は得たものを応用して別の何かを作ってみたくなりました。
この時自分の中に問題意識としてあったのは、せっかく書いたメモがそのまま埋もれて死んでしまっているということです。メモが死蔵される原因のひとつが「テキストの連続の中に混じってしまっている」ことにあり、見た目に存在感を持たせれば見返しやすくなるのではないか、と考えました。
そこで作ったのが、メモをカード風にして並べていくツールです。(なお画像は後述のエディタ版です。)
やがてlocalStorageの使い方とJSONを覚えると、ビューワからエディタへとクラスチェンジしました。ノートのテイキングが可能になったわけです。ようやくNTA-DIY(ノートテイキングアプリケーションのDIY)に至ったということですが、この進歩は劇的です。
localStorageという機能を知る前は、ノートテイキングアプリとして成り立たせるにはどうしたらいいのかいまいち想像できなかったので、こうすればいいのかという感動はかなり大きなものでした。
localStorageなるものは初耳だという方に簡単に説明すると、localStorageというのはWebブラウザの保存領域にデータを文字列で保存する仕組みのことです。ブラウザではセキュリティの問題から直接ローカルファイルを編集することができませんが、ブラウザの中にならデータを置いておけるのです。ただしブラウザに依存するので他の端末からはアクセスできない上、容量には限りがあるので(ブラウザによって異なり、ドメインごとに5~10MB)、万事を解決するものではありません。その問題については後々他のやり方で打破することになります。
さてツールとして成り立たせる術は得ましたが、いきなり実用性のあるツールを作れるはずはないことは解っていたので、実用的なツールを目指しはしながらも「実際役に立つかはさておき、この挙動が実現できるか試したい」というような発想でコーディングしていきました。
そうして作ったものがCard Memoにあります。(スマホからもアクセスはできますがPC用です。)
目的と仕様
自分用のため親切設計にはなっていませんが、データはお使いのブラウザのlocalStorageに保存されるので、実際に使用することができます。なお編集履歴の保存は「必要は多分ないけど思いついたのでやってみた」というタイプの機能です。
CSSをそれなりに整えるとそれなりのものができている感じに見えるかもしれませんが、特に難しいことはしていません(何しろ始めて一ヶ月経っていない初学者です)。技術的にはごくごく初歩的な範囲だけで自分の希望にそれなりに沿うものができることがわかりました。これは驚くべき発見です。
当初は「一年後には何か小さいアプリケーションを作れたらいいな」と思っていたわけですが、そこで思い描いていた「小さいアプリケーション」は開始一ヶ月弱でもう実装可能になってしまいました。最初の予想がちょっと頓珍漢だったとは思いますが、それだけプログラミングというのは高い壁に思えていたのです。
もちろん「良いコード」は全然書けません。エラーが発生しないようにツールの使い方のほうを気をつけるということも多々ありました。重要なのは、「人間の目にはめちゃくちゃでもコンピュータが解釈できれば動く」ということです。力技が許されるならできることはたくさんある、ということをこのツールを作る中で知りました。そうなると、肝になるのはスキルより如何に思いつくかの方です。
なおコードは一年前に書いたものそのままではなく、今現在のスキルで全面リファクタリングしたものです。ゼロから作り直したわけではないので、今作るとしたらそうはしないという処理がちらほら残っていますが、気力が尽きたのでこんなもんでいいだろということにしています。リファクタリングにあたり色々得たこともあるので、格闘した甲斐はありました。コーディングのアイデアがいろいろ生まれたのと、当時の工夫に価値を感じる部分をいくつか発見しました。
例えばattribute欄に文字列で設定というのは、未熟な頃に編み出した「なるべくレベルの低い処理でどうにかしたい」という苦し紛れの策で、今見るととてもダサい感じがします。今ならチェックボックスやカラーピッカーなどを当たり前に設置します。
でも自分しか使わないツールでUI上のそういう「わかりやすさ」が本当に必要なのか、と思えてきました。重要なカードだという設定をするにあたり、この形式なら「!」のたった一文字で済むところが、もしinput要素のデータを個別に扱って「"important": true」とかやったらデータの文字数が何倍にも増えることになるわけです。「重要な内容でピックアップ指定にもしていたけど不要になったのでトラッシュに設定した」というニュアンスが「!PX」だけで済んでしまうのは実に省スペースです。
頑張って作ったこのツールを当時バリバリ使ったかというとそれほどでもないのですが、それなりに面白いツールを作っていたなと思います。
当時は他のツールなどで作成したデータを加工して取り込むというようなことを考えなかったので、ツールを作ったらそのツールのデータというのはツール上でゼロから作っていくものでしたが、今なら過去の記述を整形してガッとインポートするみたいなこともやろうと思えばできるので、大量のメモが入った時の使用感が実際どんなもんかそのうち試してみてもいいかもしれないと思いました。
JavaScriptの勉強を始めておよそ三ヶ月になる(1/27スタート)。この間に自分のデジタルライフは大きく変わっていった。
まずHTML+CSS+JavaScriptの三要素を習得したことによって、ある程度実用的な情報管理ツールを作れるようになった。
現時点で形を成しているツール・サイトが六つある。それらについて書いていくが、ツール名が「~.html」となっているのは「名無し」と同じ意味。
①Bookmarks.html(ブラウザ上)
②Cards.html(ブラウザ上→Electron)
③Outline.html(ブラウザ上→Electron)
④Fusen.html(ブラウザ上→Electron)
⑤のらてつの茶の間(ミニブログサイト)
⑥Plane Outliner(ブラウザ上)
このような感じで、プログラミング経験値ほぼゼロの状態から三ヶ月間であれこれやってきた。今回は作ったものの紹介までにして、次の記事でこの三ヶ月で起きた変化などについて書いていくことにする。