2015年4月
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30    
無料ブログはココログ

« 2014年6月 | トップページ | 2014年8月 »

2014年7月の1件の記事

2014年7月30日 (水)

欲しくて作った - 「ペン周りまとめて設定シール 」

欲しくて作ったシリーズ - 「ペン周りまとめて設定シール」

MOON で、ちょっとまともにメモを取ろうとすると、ペンの太さを変えたり、flat ペンと、normal ペンを切り替えたりしたくなってきます。shi3z 社長謹製の手書きで太さを変えるシールとか、他の方が作ったペン色変更シールもありますし、MOONBlock でシールを作ればなんとでも設定できるのですが、MOONBlock で作ったシールだと、1 設定 1 シールで、あれこれ設定の組み合わせを変えるには複数のシールを使いまわさないといけないのも負担です。また、そもそも、シールを選んで張り付けてから、改めてタップするのが(私には)面倒です。どうも、貼ったらすぐ動いてくれるシールが欲しいんですね、私。

ということで、欲しかったので作りました。お絵描きするわけではないので、ペン色の変更は必ずしも必要ないのですが、せっかくなのでペン色も変更できる、複数の設定を interactive にまとめて設定できるシールを作りました。

Download : 「ペン周りまとめて設定シール」

尚、色選択の場面で表示される、「ペン色パレット-HEXタイプ」は、オリジナル作者の @inaber_gadget さんの許可をいただいた上で、再利用しやすいように改造して組み込ませていただきました。この場を借りてお礼申し上げます。おかげでカッコいい画面になりました。

使い方

まずシールを貼ると、その場ですぐ起動します。貼りつけてからタップするまで私が待てないからです(^^;

Screenshot_20140730215942

「実行」に関するボタンが、画面上下に 3 つあります。一番上のボタンは実行せずに終了します。入力内容を設定に反映せずにキャンセルしたい場合、或いは、シールを起動したれど、すぐに設定変更する必要はなく、シールを貼るだけでよい場合に使います。(後者だと、結局素直にシール台帳から貼りつけた場合と同じことになります。人によっては却って2度手間だと感じるかも)

画面下の 2 つのボタンはどちらも入力内容を設定に反映させます。違いは、左下のものだと設定反映を実行した上で、シールを直ぐ剥がしてしまうのに対し、右したのシールだと、実行・終了してもシールがページ上に残ることです。一度設定すればよい場合は左下、ページに書き込む間に何度か設定を切り替えて使いたい場合は右下、という風に使い分けて下さい。

flat pen モードと、ペンポインタの表示・非表示の切り替えは check box になっています。タップで切り替えます。

ペン色の選択は radio button になっています。どれか一つをタップすると、選択が切り替わります。普通、radio button は丸にするものですが、今の MOON の Canvas に丸を描くときれいにならないので、とりあえず四角にしています。将来的には丸に直したいです。
check box も radio button も指でタップすればよいのですが、ちょっと細かいので、ペン先でのタッチも効くように作ってあります。

Screenshot_20140730220040

色選択の radio button では、'other' を選ぶと、右端の色タイル部分の縞模様が消えます。縞模様のない状態で色タイル部分をタップすると、@inaber_gadget さんからお借りした色選択画面が開いて画面タップで色を選べます。この画面でも、ペン先でのタッチが有効です。色を選んで [OK] ボタンをタップすれば決定です。ここで選んだ色が、各モードのペン色に設定されます。

Screenshot_20140730220125Screenshot_20140730220131

ペンの太さを入力する部分が 2 箇所あります。現在の画面での太さと、デフォルトペンの太さです。

解説部分で後述しますが、ここはちょっと工夫して作った部分です。ペンの手書きで入力できます。好きな字を書いて、暫く入力しないでいると、フォントに変換されます。

Screenshot_20140730220444Screenshot_20140730220541

少々残念なのが、現在の MOONPhase の API だと、手書き入力の文字認識の際に、文字の種類を限定することができず、数字のみとして解釈、とか、アルファベットのみとして解釈、といった動作が実現できません。そのため、数値を入力したいのに、結構文字として誤認識されてしまいます。ここはひとつご容赦下さい。

Screenshot_20140730220556

誤認識されたら、正しく認識されるまで、諦めずに何度も入力して下さい。(^^;
フォントの上から手書きすれば、入力が更新されます。

フォントが表示されたままだと手書き入力しにくい、という場合は、一旦表示を消去できます。手書き入力領域いっぱいに、横棒をび~っと引いて下さい。領域がからっぽになります。

Screenshot_20140730221521Screenshot_20140730220753

この消去動作には少しだけ解説が必要です。本当は、入力領域の左外側から右外側まで、またぐ形で横棒を引いて消去、という UI にしたかったのです。しかし、入力領域の外側から引き始める線のイベントを拾うことができませんでした。妥協案として、入力領域の左側 1/4 から右端まで、或いは右側 1/4 から左端まで(左利きだとこうなりますよね)一本横棒を引くと、消去動作とみなすようにしました。

Screenshot_20140730221733

シールの起動時には、現在の設定内容を読み込んで、それを画面表示に反映してあります。上記のような操作で、変更したい処を操作して下さい。実行ボタンをタップすると(ここはペンでのタッチを殺してあります)起動時から変更されている部分のみ設定されます。

設定条件の依存関係として、白背景あるいは黒背景のデフォルトペン色、デフォルトペンの太さを変更すると、(それが現在の画面の背景色と同じなら)現在のペン色、ペンの太さも自動的に同じ値に設定されます。一方、現在のペン色、ペンの太さを変更しても、デフォルトペンの設定には影響しません。

自分で作ってみてなんですが、そこそこ使いやすいと思います。

解説 & 言い訳

色選択画面は、 Skylabβ から @inaber_gadget さんの「ペン色パレット-HEXタイプ」を download して改造しました。(参考ページ)

方法は、正に、以前の記事 - 「MOON で使い回しの効く GUI の作り方?」 で書いたまんまです。core.onload = function(){}; の中から、scene 単位で切り抜いて、interface を整えただけです。先に考察済ませておいて正解でした。

今回、このプログラムの為だけに lib/MOONwidget.enchant.js を書きました。はっきり言って「車輪の再発明」なことこの上ないです。しかも、このプログラムでしか使ってないので、interface 周りの汎用性が全然ありません。あちこち使いまわして鍛えれば、いつかは汎用ライブラリに出世できるかもしれませんが。

でも、check box や radio button はともかく、手書き入力できる MW_PenInputBox はちょっといいのができたなと思っています。Sprite と同じように scene に貼りつけるだけで手書き入力できるし、'change' event を受け取ったら value プロパティで認識済み文字列を引き出すことができます。横に一本取り消し線を描いてフォントを消去という UI も是非実装したかったので、まあまあうまくいって納得です。

これで、MOON.recognizeStrokes() が、MOON. penPrompt() みたいに入力文字の種類を限定できるようならもっと有用性が上がるのですが。MOONPhase ver.3.0.0 以降で API を提供して欲しいですね。

手を出さなかったこと

ここまで作ったので、デフォルトの背景色変更機能もつけようかな、と考えたのですが、

  • そろそろ画面が狭くなってきた
  • 背景色が「白」「黒」だけなら簡単なのですが、それ以外の色を設定するときに、デフォルトのペン色などをどうするべきか、考えがまとまらなかった

などの理由で手を出していません。自分で使っていて、こういう機能が欲しくなってきたら実装するでしょう。

作ってみてわかったこと

面白いことに、「現在のペンの太さ」には、小数点以下まで設定できるのに、「白・黒拝啓の時のデフォルトペンの太さ」は整数値しか設定できないことが分かりました。デフォルトペンに少数点以下までの数値を設定してシールを実行し、もう一度シールを起動すると、設定されている値を読み込んで画面に表示するのですが、きれいに値が切り捨てられています。何か意味があるんでしょうかね。

« 2014年6月 | トップページ | 2014年8月 »