gridstroke

gridstroke は，手書きストロークの入力に基づいてグリッドレイアウトを生成し，組版作業を支援する Web アプリケーションです．

情報処理学会インタラクション 2023 インタラクティブ発表（デモ）
「グリッドレイアウトに基づく組版作業を支援する手書きストロークを入力としたインタフェースの開発」
和田 優斗，志築 文太郎（筑波大）（予稿・ポスター）

demo1-2x.mp4

特徴

本ソフトウェアは，以下の特徴を備えたインタフェースを用いて組版作業を行います．

• 手書きで描画されたストロークから構成されるラフスケッチを用いてグリッドレイアウトを生成する
• ラフスケッチは，ペンの種類やストロークの形状で区別される
• レイアウト，テキスト，スタイルはそれぞれ分離して管理される
• レイアウトとテキスト・スタイルを関連付けるには，特定の色によって識別されるペンを用いてマーキングする
• 段落スタイル・文字スタイルはドラッグ操作によって WYSIWYG に調節可能

使用方法

https://inaniwaudon.github.io/gridstroke/ からインタフェースを体験することができます．

ローカルで起動するには以下の手順を踏みます．現在，PDF 出力機能は無効になっています．

git clone https://github.com/inaniwaudon/gridstroke
cd gridstroke
yarn
yarn start  # localhost:8080 で起動

操作手法

複数のペンを用いてストロークを描くことで，レイアウトの決定やテキストの流し込み，スタイルの付与等の操作を行います．
詳しくは，description.pdf をご覧ください．

ツール

以下のペンおよびツールが存在します．

• ペンツール：ストロークを描画します
  • レイアウト（黒）：グリッドの生成
  • テキスト（緑）：テキストの流し込み
  • スタイル（ピンク）：スタイルの割り当て
  • 制約（青）：制約の付与
  • メモ（オレンジ）：メモ書き
• 移動ツール：ストロークを移動します
• 削除ツール：ストロークを削除します

キーボードショートカット

以下のキーボードショートカットを使用できます．これらの操作は，Ctrl + クリックで表示されるパイメニューから実行することもできます．

キー	機能
Enter	ストローク／レイアウトの切り替え
Ctrl + S	一時保存
Ctrl + Z	元に戻す（undo）
Ctrl + Shift + Z	やり直す（redo）
A／S	ツールを左／右に移動
W／S	ツールを上／下に移動
Esc	テキスト編集モードを解除