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    
無料ブログはココログ

« 欲しくて作った - 「ペン周りまとめて設定シール 」 | トップページ | MOONPhase v.2.10.0 対応 »

2014年8月23日 (土)

作りたくて作ってみた - "NO UI" っぽい(?) 編集シール

javascript や enchant.js の使い方にも多少慣れてきて、最近いろんな UI のシールを作ってみてたのですが、「なんだか "NO UI" から離れていくなー。つまらんなー」と感じていました。

いくつかノウハウを蓄積してきて、改めて考えてみると、"NO UI" っぽいシールが作れそうです。完成しても、独りよがりで実は使い勝手の悪いものになる予感も感じながら、とりあえず、「作りたい」という理由で手を付けてみました。

できあがったもの: 「ストローク編集シール」をダウンロード

使い方

シールを起動させると、入力待ち状態になります。本当に "NO UI" だと、シールが起動したかどうかさえ分からないので、シールの位置で particle が回転・点滅する待ち受け表示を作りました。

Screenshot_20140823095219

入力待ちになったら、編集対象となるストロークを指定します。ペンで、画面にぐるりと囲み線を書いて下さい。少し反応が悪いかもしれませんが、通常のペン入力に近い感覚で線を描けます。

囲み線を書き終わると、ワンテンポ遅れて、コマンド入力欄が表示されます。ここに手書きで編集コマンドを書き込みます。

Screenshot_20140823094805

現在使える編集コマンドは以下のようになります。なお、アルファベットは大文字・小文字を区別せずに受け付けます。

  • "CANCEL" : ( 次の文字列でも受け付けます、以下同様。"キャンセル", "取り消し", "取消", "戻る" )
    • 囲み線入力 ( 編集対象指定 ) を取り消して、最初の待ち受け状態に戻ります。

  • "ERASE" : ( "消去", "消す" )
    • 対象とするストロークを消去します。

  • "COLOR" : ( "色" )
    • 対象とするストロークの色を変更します。

  • "BOLD" : ( "太字", "強調" )
    • 対象とするストロークの線を太くします。

  • "COPY" : ( "コピー" )
    • 対象とするストロークをコピーし、画面の任意の場所にペーストします。

  • "CUT" : ( "カット" )
    • 対象とするストロークをカットし、画面の任意の場所にペーストします。

各コマンドの編集操作の詳細は後述。

ひとつの編集操作を終えると、最初の入力待ち状態に戻ります。引き続き、繰り返して複数の編集操作を行うことができます。

このままだと永遠に入力待ちから抜けられず、終わりのない戦いになります。もちろん、ちゃんと終了する方法はあります。

入力待ち状態で、「回転・点滅待ち受け表示」の中心部をタップすると、システムメニューボタンが表示されます。

Screenshot_20140823095038

  • [EXIT] : シールを終了し、ストローク編集を確定させます

  • [Undo Last One] : 直前一回分の編集操作を取り消します。取り消しは一回分だけで、何回分も繰り返しさかのぼることはできません。

  • [Undo ALL] : シールを実行するまえの状態を保存してあるので、最初から最後までの編集操作を全て取り消すことができます。

各コマンドの編集操作 - 動作の単純な順に

ERASE : 対象のストロークが消えます、それだけ。

BOLD : 対象としたストロークが太くなります。

JSON 形式ストロークデータにおける "width" の値を倍にします。それぞれのストロークの width を倍にするので、対象としたストロークに太さの異なる線が含まれていると、それぞれ違う太さの太い線になります。何度も繰り返すとどんどん太くすることもできます。

Screenshot_20140823095244Screenshot_20140823095252 Screenshot_20140823095321 Screenshot_20140823095346Screenshot_20140823095359

COLOR : 対象としたストロークの色を変えます。

色選択ダイアログで選んだ色に、一括変換します。

Screenshot_20140823095101Screenshot_20140823095210Screenshot_20140823095219_2

CUT/COPY : 対象元のストロークを消去してから操作するか、消去せずに残して操作するか、の違いだけで、基本的には同じように操作します。

コマンド入力欄に CUT, COPY などと記入したあと、ワンテンポ遅れてコマンド入力欄が消えます。この時点で、囲み線で囲んだ範囲のストロークを指でドラッグできるようになります。適切な位置にドラッグできたら、[Paste] ボタンをタップして貼り付けです。張り付けてもすぐ入力待ちモードには復帰しませんので、別の場所にドラッグして、あちこちなんども張り付けることができます。[Cancel to the Top] ボタンをタップすると、最初の入力待ち状態に復帰します。

Screenshot_20140823095428Screenshot_20140823095447

CUT/COPY 編集操作中に、対象ストロークをドラッグせずに、タップだけすると、操作ボタンが [< EXPAAND >] と [> Shrink <] に変わります。またタップすると、[Paste], [Cancel to the Top] に戻ります。

Screenshot_20140823095511

[< EXPAAND >], [> Shrink <] をタップすると操作対象ストロークを拡大/縮小できます。最少でオリジナルの 0.1 倍、最大で 2 倍です。0.1 倍刻みで拡大/縮小します。このボタンを活用すると、サイズを変えてコピペできます。拡大の方はどれほど使うか分かりませんが、縮小を使うと、手書きの難しい小さなサイズの文字を張り込むことができます。

Screenshot_20140823095525Screenshot_20140823095539

弱点

作る前は、どの処理が律速になるのかなと思ってましたが、そもそもの、操作対象ストロークをページデータから切り出す作業が一番重いようです。ページ上の全ストロークデータを一本一本、囲み線の内部か外部か判定するので、ページにストロークが少ないと軽いのですが、たくさん書き込んだページだとすぐ重くなります。MOONPhase ver.2.8.0 以前を思い出しますね。

雑感

去年の夏から MOON に触れ始め、まともに使ったことのなかった javascript を使い始め、最初につくったシールをこのブログに上げた日付が 2013/8/31 でした。それから約一年、さすがに少しは凝ったものも作れるようになったな、という思いと、それでも所詮この程度のパズル規模のものしか書けないな、という限界を感じます。

OS の version up で、また作りたいものが増えていけば楽しいですし、もし今後 mRuby も載ってくるようなら、もともと ruby の方が好きなので、それもそれで楽しみです。

まだ暫くは遊べそうですね。

さて、MOONPhase ver.2.10.0 に update しなければ。

« 欲しくて作った - 「ペン周りまとめて設定シール 」 | トップページ | MOONPhase v.2.10.0 対応 »

enchantMOON」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1527616/57161702

この記事へのトラックバック一覧です: 作りたくて作ってみた - "NO UI" っぽい(?) 編集シール:

« 欲しくて作った - 「ペン周りまとめて設定シール 」 | トップページ | MOONPhase v.2.10.0 対応 »