の作業記録
h-noteの作成
- 作業記録の共有
- Textbox+horizonnote
- 『ライフハックの道具箱』+指示の反映
- うちあわせCastの確認→実施
7:00
おはようございます。本日は昨日プロトタイプを作った、横に並ぶノートを作ってみます。
Textbox:
安直な名前ですが、横に並ぶノートは「horizonnote」と名付けました。
で、一応新しいものがどんどん右に追加されるようにしました。
問題はスクロールです。普通にdivを並べてスクロールさせるのか、それとも一定個数だけ表示しておいて、何かしらの操作でその表示を切り替えるのか、という点。
保存データがテキストだけで、そこからJavaScriptでdivを生成するならば後者のやり方が取れます。その場合、仕組みは非常にややこしくなりますが、ページのすべての要素にイベントを設定する、みたいな大掛かりな処理が不要になるので、要素が増えたときに重たくならない、というメリットがありそうです。
さて、どうするか。
単純スクロール方式とちがって、描写方式だと循環できるのが一番のポイントでしょう。一番最後まで言ったら最初に戻る、ということができる。これはデジタルっぽくて魅力的です。
単純なスクロールではこれが実現できません。最後までスクロールした後に、ボタンを押せば冒頭に戻る、ということはできますが、それは循環とは異なるものです。
＊ ＊ ＊
描写方式だと、「一気のスクロール」ができませんね。たとえば、2/3くらいをぎゅっと移動するのは、専用のUIを作らないと難しそうです。
＊ ＊ ＊
とりあえず、+ボタンにクリックイベントを設定して、新しいdivを生成することができるようになりました。
＊ ＊ ＊
さらにheaderをクリックしたら中身が保存できるようになりました。
ここまでは簡単です。
＊ ＊ ＊
現状はdivでやっていますが、これをul/liでやることを考えたいです。あるいは、divでやるなら自由配置を可能にする何かを考えてもいいかもしれません。
順番の入れ替えは、特に必要性は高くないですが、代わりに削除ボタンが欲しいですね。あとナンバリング。ナンバリングはafterで疑似的に作りますか。
＊ ＊ ＊
noteのdivに「data-num」という属性を付け、そこに番号を振り、cssのafterで、「content: attr(data-num)」を指定することでnumberを表現します。
あとは削除ボタン。noteの中にウィンドウっぽく削除ボタンをつけてもいいですが、divの中身がややこしくなるのが問題です。ダブルクリックで削除するのが一つの手。
あとは、+ボタンの下に削除ボタンを付けるのが一手。
＊ ＊ ＊
+ボタンの下に−ボタンをつけました。それを押せば右側のdivが消える格好です。
これで基本的な機能は実装できました。しばらく使ってみましょう。
＊ ＊ ＊
朝からだいぶ疲れましたが、ずっと気になっていた機能を実装できたので満足です。
9:00
『ライフハックの道具箱』:
メールで頂いた修正を反映するのと、もらった画像を差し込む作業をしましょう。これで原稿はかなり進みました。
＊ ＊ ＊
画像ダグの修正は、正規表現の置換で一発でした（さすがに強力）。
つづいて頂いた画像をリネームして配置します。
＊ ＊ ＊
だいたいできました。作業はまだまだ山盛りです。