Suche senden
Hochladen
POSとステートマシン_エンジニア勉強会20131127
•
0 gefällt mir
•
803 views
エンジニア勉強会 エスキュービズム
Folgen
11月27日開催のエスキュービズムエンジニア勉強会資料です。
Weniger lesen
Mehr lesen
Melden
Teilen
Melden
Teilen
1 von 20
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
POSのご紹介
POSのご紹介
Takashi Kaneko
de:code 2015
de:code 2015
エンジニア勉強会 エスキュービズム
【エンジニア勉強会】品質ってなんなのさ
【エンジニア勉強会】品質ってなんなのさ
エンジニア勉強会 エスキュービズム
Developer Summit 2016 参加してきました。
Developer Summit 2016 参加してきました。
エンジニア勉強会 エスキュービズム
iOS開発豆知識_エスキュービズム勉強会20141006
iOS開発豆知識_エスキュービズム勉強会20141006
エンジニア勉強会 エスキュービズム
エンジニア勉強会_DECIDE
エンジニア勉強会_DECIDE
エンジニア勉強会 エスキュービズム
【エンジニア勉強会】MicrosoftAzure.
【エンジニア勉強会】MicrosoftAzure.
エンジニア勉強会 エスキュービズム
エンジニア勉強会_Node.js
エンジニア勉強会_Node.js
エンジニア勉強会 エスキュービズム
Empfohlen
POSのご紹介
POSのご紹介
Takashi Kaneko
de:code 2015
de:code 2015
エンジニア勉強会 エスキュービズム
【エンジニア勉強会】品質ってなんなのさ
【エンジニア勉強会】品質ってなんなのさ
エンジニア勉強会 エスキュービズム
Developer Summit 2016 参加してきました。
Developer Summit 2016 参加してきました。
エンジニア勉強会 エスキュービズム
iOS開発豆知識_エスキュービズム勉強会20141006
iOS開発豆知識_エスキュービズム勉強会20141006
エンジニア勉強会 エスキュービズム
エンジニア勉強会_DECIDE
エンジニア勉強会_DECIDE
エンジニア勉強会 エスキュービズム
【エンジニア勉強会】MicrosoftAzure.
【エンジニア勉強会】MicrosoftAzure.
エンジニア勉強会 エスキュービズム
エンジニア勉強会_Node.js
エンジニア勉強会_Node.js
エンジニア勉強会 エスキュービズム
Windows ideの遷移
Windows ideの遷移
エンジニア勉強会 エスキュービズム
ウェアラブルコンピューターが変える小売のミライ_エンジニア勉強会20140425
ウェアラブルコンピューターが変える小売のミライ_エンジニア勉強会20140425
エンジニア勉強会 エスキュービズム
様々なEntry system,register system エンジニア勉強会20140108
様々なEntry system,register system エンジニア勉強会20140108
エンジニア勉強会 エスキュービズム
Visual studio2015と
Visual studio2015と
エンジニア勉強会 エスキュービズム
iOSとwin8_エンジニア勉強会20131106
iOSとwin8_エンジニア勉強会20131106
エンジニア勉強会 エスキュービズム
Yii c orange エンジニア勉強会20140129
Yii c orange エンジニア勉強会20140129
エンジニア勉強会 エスキュービズム
暗号理論_エンジニア勉強会20140509
暗号理論_エンジニア勉強会20140509
エンジニア勉強会 エスキュービズム
Sensu graphite_エンジニア勉強会20140205
Sensu graphite_エンジニア勉強会20140205
エンジニア勉強会 エスキュービズム
メモリ管理の話_エスキュービズム勉強会20140926
メモリ管理の話_エスキュービズム勉強会20140926
エンジニア勉強会 エスキュービズム
Azure container service上でコンテナベースでオートスケールの検証をしてみた
Azure container service上でコンテナベースでオートスケールの検証をしてみた
エンジニア勉強会 エスキュービズム
Kinect
Kinect
エンジニア勉強会 エスキュービズム
IoTで何をやったか
IoTで何をやったか
エンジニア勉強会 エスキュービズム
ほんのりTDD
ほんのりTDD
エンジニア勉強会 エスキュービズム
事故らないためのUnix(linux)オペレーション エスキュービズム勉強会0711
事故らないためのUnix(linux)オペレーション エスキュービズム勉強会0711
エンジニア勉強会 エスキュービズム
Winストアアプリでble接続
Winストアアプリでble接続
エンジニア勉強会 エスキュービズム
Rubyのクラスとメソッド_エスキュービズム勉強会0530
Rubyのクラスとメソッド_エスキュービズム勉強会0530
エンジニア勉強会 エスキュービズム
レイアウトについて
レイアウトについて
エンジニア勉強会 エスキュービズム
AzureのIaaSとかの話
AzureのIaaSとかの話
エンジニア勉強会 エスキュービズム
【エンジニア勉強会】PMやってみた
【エンジニア勉強会】PMやってみた
エンジニア勉強会 エスキュービズム
Dockerを社内で使うために
Dockerを社内で使うために
エンジニア勉強会 エスキュービズム
エスキュービズム新技術発表資料
エスキュービズム新技術発表資料
エンジニア勉強会 エスキュービズム
小売りにおけるAIの可能性
小売りにおけるAIの可能性
エンジニア勉強会 エスキュービズム
Weitere ähnliche Inhalte
Andere mochten auch
Windows ideの遷移
Windows ideの遷移
エンジニア勉強会 エスキュービズム
ウェアラブルコンピューターが変える小売のミライ_エンジニア勉強会20140425
ウェアラブルコンピューターが変える小売のミライ_エンジニア勉強会20140425
エンジニア勉強会 エスキュービズム
様々なEntry system,register system エンジニア勉強会20140108
様々なEntry system,register system エンジニア勉強会20140108
エンジニア勉強会 エスキュービズム
Visual studio2015と
Visual studio2015と
エンジニア勉強会 エスキュービズム
iOSとwin8_エンジニア勉強会20131106
iOSとwin8_エンジニア勉強会20131106
エンジニア勉強会 エスキュービズム
Yii c orange エンジニア勉強会20140129
Yii c orange エンジニア勉強会20140129
エンジニア勉強会 エスキュービズム
暗号理論_エンジニア勉強会20140509
暗号理論_エンジニア勉強会20140509
エンジニア勉強会 エスキュービズム
Sensu graphite_エンジニア勉強会20140205
Sensu graphite_エンジニア勉強会20140205
エンジニア勉強会 エスキュービズム
メモリ管理の話_エスキュービズム勉強会20140926
メモリ管理の話_エスキュービズム勉強会20140926
エンジニア勉強会 エスキュービズム
Azure container service上でコンテナベースでオートスケールの検証をしてみた
Azure container service上でコンテナベースでオートスケールの検証をしてみた
エンジニア勉強会 エスキュービズム
Kinect
Kinect
エンジニア勉強会 エスキュービズム
IoTで何をやったか
IoTで何をやったか
エンジニア勉強会 エスキュービズム
ほんのりTDD
ほんのりTDD
エンジニア勉強会 エスキュービズム
事故らないためのUnix(linux)オペレーション エスキュービズム勉強会0711
事故らないためのUnix(linux)オペレーション エスキュービズム勉強会0711
エンジニア勉強会 エスキュービズム
Winストアアプリでble接続
Winストアアプリでble接続
エンジニア勉強会 エスキュービズム
Rubyのクラスとメソッド_エスキュービズム勉強会0530
Rubyのクラスとメソッド_エスキュービズム勉強会0530
エンジニア勉強会 エスキュービズム
レイアウトについて
レイアウトについて
エンジニア勉強会 エスキュービズム
AzureのIaaSとかの話
AzureのIaaSとかの話
エンジニア勉強会 エスキュービズム
【エンジニア勉強会】PMやってみた
【エンジニア勉強会】PMやってみた
エンジニア勉強会 エスキュービズム
Dockerを社内で使うために
Dockerを社内で使うために
エンジニア勉強会 エスキュービズム
Andere mochten auch
(20)
Windows ideの遷移
Windows ideの遷移
ウェアラブルコンピューターが変える小売のミライ_エンジニア勉強会20140425
ウェアラブルコンピューターが変える小売のミライ_エンジニア勉強会20140425
様々なEntry system,register system エンジニア勉強会20140108
様々なEntry system,register system エンジニア勉強会20140108
Visual studio2015と
Visual studio2015と
iOSとwin8_エンジニア勉強会20131106
iOSとwin8_エンジニア勉強会20131106
Yii c orange エンジニア勉強会20140129
Yii c orange エンジニア勉強会20140129
暗号理論_エンジニア勉強会20140509
暗号理論_エンジニア勉強会20140509
Sensu graphite_エンジニア勉強会20140205
Sensu graphite_エンジニア勉強会20140205
メモリ管理の話_エスキュービズム勉強会20140926
メモリ管理の話_エスキュービズム勉強会20140926
Azure container service上でコンテナベースでオートスケールの検証をしてみた
Azure container service上でコンテナベースでオートスケールの検証をしてみた
Kinect
Kinect
IoTで何をやったか
IoTで何をやったか
ほんのりTDD
ほんのりTDD
事故らないためのUnix(linux)オペレーション エスキュービズム勉強会0711
事故らないためのUnix(linux)オペレーション エスキュービズム勉強会0711
Winストアアプリでble接続
Winストアアプリでble接続
Rubyのクラスとメソッド_エスキュービズム勉強会0530
Rubyのクラスとメソッド_エスキュービズム勉強会0530
レイアウトについて
レイアウトについて
AzureのIaaSとかの話
AzureのIaaSとかの話
【エンジニア勉強会】PMやってみた
【エンジニア勉強会】PMやってみた
Dockerを社内で使うために
Dockerを社内で使うために
Mehr von エンジニア勉強会 エスキュービズム
エスキュービズム新技術発表資料
エスキュービズム新技術発表資料
エンジニア勉強会 エスキュービズム
小売りにおけるAIの可能性
小売りにおけるAIの可能性
エンジニア勉強会 エスキュービズム
React Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリング
エンジニア勉強会 エスキュービズム
はじめての品質
はじめての品質
エンジニア勉強会 エスキュービズム
Go言語によるWebアプリケーション開発
Go言語によるWebアプリケーション開発
エンジニア勉強会 エスキュービズム
機械学習ライブラリ : TensorFlow
機械学習ライブラリ : TensorFlow
エンジニア勉強会 エスキュービズム
2016 新人研修 基本技術講座 (1)
2016 新人研修 基本技術講座 (1)
エンジニア勉強会 エスキュービズム
Dockerを用いたマイクロサービスについて
Dockerを用いたマイクロサービスについて
エンジニア勉強会 エスキュービズム
VRのコンテンツ
VRのコンテンツ
エンジニア勉強会 エスキュービズム
Azureで動いている機械学習のいろいろについて
Azureで動いている機械学習のいろいろについて
エンジニア勉強会 エスキュービズム
アルゴリズムとデータ構造(初歩)
アルゴリズムとデータ構造(初歩)
エンジニア勉強会 エスキュービズム
何故エンジニアはテストをしないのか
何故エンジニアはテストをしないのか
エンジニア勉強会 エスキュービズム
IoTのIを考えてみる話
IoTのIを考えてみる話
エンジニア勉強会 エスキュービズム
Riot.jsに触れてみた話
Riot.jsに触れてみた話
エンジニア勉強会 エスキュービズム
Go言語オーバービュー201507
Go言語オーバービュー201507
エンジニア勉強会 エスキュービズム
理想のWEB開発
理想のWEB開発
エンジニア勉強会 エスキュービズム
マイコンとIoT
マイコンとIoT
エンジニア勉強会 エスキュービズム
質問応答システム
質問応答システム
エンジニア勉強会 エスキュービズム
エンジニア勉強会20140424
エンジニア勉強会20140424
エンジニア勉強会 エスキュービズム
Mehr von エンジニア勉強会 エスキュービズム
(19)
エスキュービズム新技術発表資料
エスキュービズム新技術発表資料
小売りにおけるAIの可能性
小売りにおけるAIの可能性
React Redux Redux-Saga + サーバサイドレンダリング
React Redux Redux-Saga + サーバサイドレンダリング
はじめての品質
はじめての品質
Go言語によるWebアプリケーション開発
Go言語によるWebアプリケーション開発
機械学習ライブラリ : TensorFlow
機械学習ライブラリ : TensorFlow
2016 新人研修 基本技術講座 (1)
2016 新人研修 基本技術講座 (1)
Dockerを用いたマイクロサービスについて
Dockerを用いたマイクロサービスについて
VRのコンテンツ
VRのコンテンツ
Azureで動いている機械学習のいろいろについて
Azureで動いている機械学習のいろいろについて
アルゴリズムとデータ構造(初歩)
アルゴリズムとデータ構造(初歩)
何故エンジニアはテストをしないのか
何故エンジニアはテストをしないのか
IoTのIを考えてみる話
IoTのIを考えてみる話
Riot.jsに触れてみた話
Riot.jsに触れてみた話
Go言語オーバービュー201507
Go言語オーバービュー201507
理想のWEB開発
理想のWEB開発
マイコンとIoT
マイコンとIoT
質問応答システム
質問応答システム
エンジニア勉強会20140424
エンジニア勉強会20140424
POSとステートマシン_エンジニア勉強会20131127
1.
POSとステートマシン Windowsストアアプリとデバイスの連携
2.
ステートマシンとは? ● 状態と遷移のモデル (今回扱うのは言うまでもなく有限ですが) ● ステートマシンは状態遷移図で表現できる ●
最近は(とある界隈で)FPGAとか流行っていて たまに耳にすることもありますね
3.
POSを例にした状態遷移 POSのページ遷移を 状態遷移図として(すごく簡単に) 表現するとこんな感じ 客層選択ボタン /会計ボタン 新規会計ボタン メイン ページ 会計 ページ 戻るボタン 完了ボタン 精算 ページ 戻るボタン 会計 ページ
4.
POSとデバイスと状態遷移(予習) ←状態遷移がややこしくなる http://en.wikipedia.org/wiki/File:Barcode-scanner.jpg POS ←Windows版POSは USBで色々繋げられる ←状態遷移が とてつもなくややこしくなる
5.
たとえば 「会計画面に遷移したら、 (POSの「読み取り開始」ボタンを押さずに) いきなりバーコードを読みたい」 という要求 いままでは「読み取り開始」ボタンを押して、 ユーザがPOSの状態を明示的に 「バーコード読み取りモード」に遷移させてた (↑今日の発表内容で改修済み)
6.
「会計画面に遷移したら、 いきなりバーコードを読みたい」 Windowsストアアプリでは、 Window全体へのキー入力 (CoreWindowのKeyDownイベント) をハンドリングすれば、 アプリ起動直後でのバーコード読み取りも ハンドリングできる
7.
「会計画面に遷移したら、 いきなりバーコードを読みたい」 (逆に言えば) Window全体へのキー入力はすべて CoreWindowのKeyDownイベント によってハンドリングされてしまう
8.
POSとデバイスと状態遷移(復習) ←状態遷移がややこしくなる http://en.wikipedia.org/wiki/File:Barcode-scanner.jpg POS ←状態遷移が とてつもなくややこしくなる (キー入力によるモード切り替え等々・・・)
9.
デバイスからの入力例 バーコードリーダーからのバーコード入力 「4560292290245n」 ハードキーからの商品の数量変更を行う入力 ハードキーで「数量変更キー('Q'とする)」入力 ハードキーで「1」入力 ハードキーで「0」入力 ハードキーで「確定('Enter'とする)」入力
10.
デバイスからのPOSへの入力例 「4560292290245n」 POS CoreWindow 「Q10n」 http://en.wikipedia.org/wiki/File:Barcode-scanner.jpg
11.
デバイスからのPOSへの入力例 本当はこんな感じ・・・ 「4」「5」「6」「0」「2」 「9」「2」「2」「9」「0」 「2」「4」「5」「n」 CoreWindow 「Q」「1」「0」「n」 http://en.wikipedia.org/wiki/File:Barcode-scanner.jpg POS 「まとまった文字列ではなく」 文字入力のために押される「キー」が (VirtualKeyとして)入力されてくる
12.
バーコードリーダーの入力も ハードキーの入力も アプリからは「キーボード入力」にしか 見えない ● アプリのユーザは別々のデバイスを操作してい るのに、アプリからは同じ入力にしか見えない ● 入力に応じてアプリの状態を変更させ、 特定の状態で入力をハンドリングすれば 解決できる
13.
「CoreWindowへの入力」と 「POSアプリの現在の状態」で ステートマシンを組む (この場合、「出力」は「POSの挙動」・・・?)
14.
数量入力 初期状態 初期状態 'n'入力 数字キー 数量変更キー Escキー 数量入力中 数量確定 C(クリア)キー 商品数量変更処理 (内部処理) 規定桁を 超える入力 数値入力 'n'入力 バーコード 読み取り中 バーコード検索 (内部処理) バーコード 確定
15.
「」 「5」「0」 「」 数量入力 初期状態 Escキー 「」 'n'入力 数字キー 数量変更キー 初期状態 「5」「0」 「0」 数量入力中 数量確定 C(クリア)キー 商品数量変更処理 (内部処理) 規定桁を 超える入力 バーコード検索 (内部処理) 数値入力 実際には状態に応じて 'n'入力 バッファ(キュー)を切り替え、 バーコード バーコード 読み取り中 確定 バッファの状態に応じた処理 「4」「9」・・・ (上記によるバッファのクリア と状態遷移も存在)
16.
実際にはキーの個数(0~9などの数字キーを除く)だけ 前ページの状態遷移図が縦に(とても)長くなります 具体的には キーボードとバーコードリーダー対応前の コードは500行程度だったんですが、 対応後は2000行を超えて現在も増加中・・・ 状態遷移図を書いたら コードを自動生成して欲しいデース!
17.
加えて 「商品選択状態」で「割引」が押された場合には「単品割引」 「商品未選択状態」で「割引」が押された場合には「全体割引」 といった状態に遷移させる必要もあります (商品選択はアプリのUIをタッチして選択するので、 前々ページのCoreWindowベース状態遷移図の 「外の世界」の状態が・・・)
18.
更に加えて たとえば'%'という文字列を含むQRコードを バーコードリーダーから読み取ると、 アプリからは'%'の該当箇所で 「Shift」と「5」が順番に入力されてくる・・・ お察し下さい http://en.wikipedia.org/wiki/File:QWERTY_keyboard.jpg
19.
まとめ1 日頃使い慣れているボタン操作だと ユーザの操作が制限できて (=状態遷移図の枝刈りができて)、 かつ「キーボードのAキー」という入力ではなく 「Aという独立したボタン」として入力できるので とても素晴らしいですね (訳:アプリのボタン以外からの操作は大変ですね)
20.
まとめ2 「アプリのデザイン」という枠組みでは 「UIの振る舞い」が意識せずとも込みになっている (経験的にそんな気がするというだけですが) 「デバイス」が絡んだ「アプリのデザイン」では 「UIの振る舞い」が「デバイスの操作」に依存するので 上記を加味した統合的なデザインが必要 (=「画面デザイン」じゃ対応しきれない)
Jetzt herunterladen