Direct Manipulationに、パーサコンビネータでジェスチャーを実装した話
by Nobkz
@Nobkz
- はなだ のぶかず
- 株式会社Groovenauts Rockstar Engineer
- Scala/Shen/Rust/Erlangなど
- ボードゲーム/デジタルゲーム/ika2
- もともと音響屋
- 音響プログラミング言語を作成したりしてた
この登壇について
- この登壇はDirect ManipulationのScala実装に関する登壇です。
- パーサコンビネータが中心になります
- ジェスチャーが楽しく実装できるようになるといいな!?
Direct Manipulation[Shneiderman, 1983]
Shneidermanによって提唱された対象が直感的、身体的に操作でき、すぐに結果がフィードバックされるインタラクションのスタイル
DMである例、そうでない例
Visual Programming Language
- FLOWer
- Viscuit
DM + Code & Code + DM
- Sketch-n-Sketch
- SigHex
ジェスチャーについて
ジェスチャーの重要性
- ボタンを減らす
- うまくインタラクションデザインすると使いやすくなる
- タッチUIではホントに重要
- Direct Manipulationに貢献する
ジェスチャーの欠点
- デザインが難しい
- 実装が難しい
- 見えづらいので、デバッグしにくい
ジェスチャーの種類
- タップ、 ダブルタップ
- ピンチイン、 ピンチアウト
- フリック
- ホールド
- etc ...
ジェスチャーの可能性
- タップとダブルタップ、フリック、ホルード、スクロール
- ピンチとスクロール
- どう区別するか?
イベントを見わける
- 複数の可能性をチェックする
- DFA (決定性有限オートマトン)
- NFA (非決定性有限オートマトン)
- パーサの文字列の解釈とジェスチャーのイベント解釈は似ている
- パーサコンビネータで楽に書けるのでは?
パーサコンビネータ
パーサ同士を組み合わせて新しいパーサをつくる技法。
パーサ
Parser
"(10 20 30)"
List(10,20,30)
入力文字列
出力データ
Scalaで書くと...
abstract class Parser[+A] extends
(String => A)
Parser
Parser
"(10 20 30) (.... "
List(10,20,30)
+
"(..."
入力文字列
出力データ
+
続きの文字列
Scalaで書くと...
abstract class Parser[+A] extends
(String => (A, String))
エラーが出るかもしれない
"(10, 20, "
Error!!!
Parser
"(10 20 30) (.... "
List(10,20,30)
+
"(..."
Scalaで書くと
abstract class Parser[+A] extends String => Result[A]
abstract class Result[+A]
case class Success[+A](item:A,next:String) extends Result[A]
case class Error(msg:String) extends Result[Nothing]パーサのmap
"(10, 20, "
Error!!!
Parser
"(10 20 30) (.... "
List(10,20,30)
+
"(..."
sum
60
f
パーサのmap
"(10, 20, "
Error!!!
Parser
"(10 20 30) (.... "
List(10,20,30)
+
"(..."
sum
60
+
"(.."
f
パーサのmap
Parser
sum
f
map
=
New Parser!!
Scalaで書くと...
abstract class Parser[+A] extends (String => Result[A]) { p =>
def map[B](f: A => B) : Parser[B] = new Parser[B]{
def apply(input: Text) : Result[B] =
p(input) match {
case Success(a, next) => Success(f(a), next)
case Error(msg) => Error(msg)
}
}
}
parserA map (x => x + 1)
パーサのflatMap
Parser
flatMap
f
A
Parser
パーサのflatMap
Parser1
List(10,20,30)
+
"(..."
f
Parser2
Scalaで書くと...
abstract class Parser[+A] extends (String => Result[A]) { p =>
def flatMap[B](f: A => Parser[B]) : Parser[B] = new Parser[B]{
def apply(input: Text) : Result[B] =
p(input) match {
case Success(a, next) =>
val newParser = f(a)
newParser(next)
case Error(msg) => Error(msg)
}
}
}
パーサを逐次的に組み合わせる
Parser1
"(10 20 30)
concat (.... "
List(10,20,30)
+
"concat (..."
Parser2
"concat (..."
Concat
+
"(..."
Parser
"(10 20 30)
concat (.... "
List(10,20,30)
+
"concat (..."
Concat
+
"(..."
パーサを組み合わせる
Parser
(List(10,20,30)
+
Concat)
+
"(..."
Scalaで書くと..?
abstract class Parser[+A] extends (String => Result[+A]) { p1 =>
def ~[B](p2: Parser[B]) : Parser = new Parser[(A,B)] {
val apply(input: String) => Result[(A,B)] = {
val p3 =
for{ a <- p1
b <- p2
} yield (a,b)
p3(input)
}
}
}足し算のパーサ
case class Add(x: Double, y: Double)
val double : Parser[Double] = ...
val plus : Parser[String] = ....
val add : Parser[Add] = (double ~ plus ~ double) map { ((x, _), y) => Add(x,y) }
ジェスチャーとパーサ
Parser
"(10 20 30)"
List(10,20,30)
入力文字列
出力データ
ジェスチャーとパーサ
Parser
List(10,20,30)
Seq[A]
出力データ
出力列
ジェスチャーとパーサ
Parser
MoveUp
Seq[(Double,
Double)]
出力データ
出力列
Scalaで書くと
abstract class Parser[Input,+T] extends (Input=>Result[Input, T])
abstract class Result[Input, +T]
case class Success[Input, +T] (t: T, input: Input) extends Result[Input, +T]
case class Error[Input](msg: String) extends Result[Input, Nothing]
case class Vector2(x:Double, y:Double)
class Gesture[+T] extends Parser[Vector2, T]ジェスチャーを定義してみよう
- まずは、Inputの型の定義
- 出力する型の定義
- scala-parser-combinatorsを利用
入力シーケンスの要素の定義
case class Vector2(x: Double, y: Double) {
def +(o: Vector2) = Vector2(x + o.x, y + o.y)
def -(o: Vector2) = Vector2(x - o.x, y - o.y)
def *(f: Double) = Vector2(x * f, y * f)
def *(o: Vector2) = x * o.x + y * o.y
def /(f: Double) = this * (1 / f)
def magnitude = math.sqrt(x * x + y * y)
def normalize = this / magnitude
def angle = math.atan2(y, x)
}scala-parser-combinatorsのParserの定義
trait Parser {
type Elem
type Input = Reader[Elem]
...
abstract class Parser[+T] extends (Input => ParseResult[T])
....
}scala-parser-combinatorsのReader, Positionの定義
abstract class Reader[+T] {
def atEnd: Boolean
def first: T
def pos: Position
def rest: Reader[T]
....
}
trait Position {
def line: Int
def column: Int
....
}GestureReader,GesturePositionの定義
class GestureReader( val data: List[Vector2], override val offset: Int ) extends Reader[Vector2] {
def this( data: List[Vector2] ) = this( data, 0 )
class GesturePosition( val offset: Int ) extends Position
{
override val line = 1
override def column = offset + 1
override def lineContents: String = ""
}
override def atEnd = offset >= (data.length - 1)
override def first = data( offset )
override def pos = new GesturePosition( offset )
override def rest = new GestureReader( data, offset + 1 )
}Gestureの出力の型を定義
object Gesture{
trait Atom {
val pos : Vector2
}
object Atom {
case class Idle(pos:Vector2) extends Atom
case class Up(startPos:Vector2, pos:Vector2) extends Atom
case class Down (startPos:Vector2, pos:Vector2) extends Atom
case class Left (startPos:Vector2, pos:Vector2) extends Atom
case class Right (startPos:Vector2, pos:Vector2) extends Atom
}
}
case class Gesture(last:Gesture.Atom, history:List[Gesture.Atom])ジェスチャー履歴の更新
case class Gesture(last:Gesture.Atom, history:List[Gesture.Atom])- Gesture型には、historyがある
- Atomをパースするたびに,histroyを更新する。
(currentGesture:Gesture)=>(atom:Atom)=>Gesture
ジェスチャーの実装
val pos : Parser[Vector2] = elem("POS", e => true)
def gesture(g:Gesture) : Parser[Gesture] =
atom(g).flatMap(gesture) | atom(g)
def atom(g:Gesture) = up(g) | down(g) | left(g) | right(g) | idle
def idle(g:Gesture) : Parser[Gesture] =
(pos ^^ { p => (p,g)}).filter { ... }
def move(g:Gesture) : Parser[Move] = { .. }
def up(g:Gesture) : Parser[Gesture] = ...
def down(g:Gesture) : Parser[Gesture] = ..
def left(g:Gesture) : Parser[Gesture] = ...
def right(g:Gesture): Parser[Gesture] = ...さらに高度なジェスチャーへ
- up, down, left rightのみで構成している
- historyを更にパースする
- 時間管理
- タップとダブルタップの解釈
- 複数の指の解釈
ジェスチャーと
パーサコンビネータ再考
- なにかに似ている..?
- MVCのC
- Rx系との比較(時間がなさそう)