はじめに
この文書は、くるのはるみ様 作成の「画面に日付を入れるシール」を私用に改変した際の覚書です。
くるのはるみ様には、改変と覚書の公開をお許しいただいたことを感謝いたします。
序章「それでも少々長くなりますからそのおつもりで」
普段のメモはtraveler's noteで、PoIC風の形式を採用してます。つまり、PoICマークと秒単位のタイムスタンプ必須。zaurus SL C-100では、EBT Light。ファイル管理は自動的にタイムスタンプ（そして、すばらしき双方向リンクシステム）。やっぱり、メモに日付は必須だね。あとから検索するにも便利だし…
でも、手書き文字はブレる。eMは、拾ってくれる範囲広いんだけど、all or nothingな場合も多くて、せめてタイムスタンプは、ブレないようにしたい。あ～あ。勝手に日時をファイル名にしてくれて検索できればなぁ～。っと、この調子では、blogが数メートルの長さになってしまうので、大幅に割愛。
くるのはるみ様が作成公開してくださった日付シール。詳細は上記リンクをごらんいただくとして、簡単に特徴をまとめると、こんな感じ。
- 日付をいれるとすぐに剥がれるタイプ（頁にシールが残らない）
- 日付は、画面右上隅に 2013-10-7 というように表記される。
- 表記された日付は、ペンで書いたのと同じ（消しゴムで消える）
- 背景色が黒でも白でも見えるよう、日付を少しずらして黒と白とで書いてある。
さっそくダウンロードをして、どうやって、そんな魔法のようなことを実現しているのか、勉強することにしました。
私的改変の目標
2013年10月6日14時5分20秒の場合の表記を 2013-10-6 から 20131006-140520 にすること。
コードを読む
さっそく、zipファイルを解凍して、プログラム本体が書いてあるという、hack.jsを裏紙に印刷して読んでみる？ いきなりものすごい数字の羅列が……… 気絶ー蘇生
My Codex Leicester様の、enchantMOONプログラミング入門 01を、読んで帰ってくる。この数字たちは、ペンで書いた線の座標位置と筆圧なんだそうだ。０からーまでの筆跡なんだなぁ。そういえば、くるのはるみ様が説明なさっていたっけ。
まず、ひたすら読みやすくて小さな数字を書いて、使えそうな数字がかけたらそのページのinfo.jsonから、strokesデータを抜き出してきては座標を平行移動して使いやすい座標セットを得るところから始まります。
これだったんですね。strokesデータってのが筆跡でしょう。それが書いてあるファイル名がinfo.jsonなんだねきっと。これは書いたままじゃなくて、何らかの基準で整えてあるとのこと。いまはよし。第一段落の要点はクリアっと。ちなみに、そのあとの流れを読んでおきますと、
①日付文字列を分解して、②１文字ずつstrokesデータに翻訳していって、③最期にpaperJSONにconcatしてるだけです。（中略）④（画面反転していても日付が見えるように）座標を少しだけずらして白と黒で線を２本ずつ引くようにしてみました。
（番号はこちらで勝手にふりました）
③はいかにも、ラスボスって感じで皆目見当がつきませんが、最後の仕上げってことですよね。④なんてどうやってやるんだろう。
でもまずはコードの第二段落
function strokes_for_figure( fig, base_x, base_y, pen_col )の巻にいきましょう！
あ、数字羅列の前にね、「巻頭の辞」みたいな部分があったけど、そこはなんとなく内容なさそうだからとばしてます。（importJS云々って部分ね。）
さて、プログラムについては、うんとまえに、ｃ言語の入門書を買ったことがある程度で、実作経験０。うろ覚えの記憶のなかから、この冒頭の文は、この段落のタイトルだということがわかる。段落は関数とかメソッドとか呼ぶものらしい。何かを成し遂げるための指示文書だな。最初の数行で登場人物（変数）紹介を済ませて、登場人物をどの役者が演じるのかを下読みしてから（代入というやつだ）いよいよ本文へ。
Figure_strokes[ fig ]. lengthと同じ回数、｛｝内の処理を行うこと！ はぁ。でその処理とは………爆 （その２へ続ける）
