Local blog for Japanese speaking developers
「Google 日本語入力パタパタバージョン」開発の舞台裏
2013年10月1日火曜日
Posted by
山崎富美 Developer Relations Team
皆様、今年のエイプリルフールで大人気を博した「Google 日本語入力パタパタバージョン」を覚えていらっしゃいますか？
ご存知ない方は、こちらのブログ記事をご覧ください。
「
Google 日本語入力チームからの新しいご提案
」
製品サイト
http://www.google.co.jp/ime/patapata/
こちらからお試し版をご利用頂けます。
http://www.google.co.jp/ime/patapata/message.html
この Google 日本語入力パタパタバージョン開発の裏話を聞くため、開発チームに集まってもらいました。ウェブマスターの小久保浩大郎と三浦健、ソフトウェア エンジニアの椎野裕樹、山口辰久、小松弘幸、マーケティングの虫賀千絵の 6 人です。
Q: Google 日本語入力チームは毎年様々なエイプリルフールネタを仕込んでいますね。まずは、なぜ今年はパタパタバージョンを作ることにしたのか、教えてください。
小松: Google 日本語入力は過去 2 回、エイプリルフールをやってますので、その流れは最初から意識していました。2010 年の
ドラム キーボード
はキーの数が多すぎたので、その反省から 2012 年はキーの数を 1 つにした
モールスバージョン
を開発しました。
山口: モールスバージョンにどんな課題があるのか？ どんな改善ができるだろうか？ と考えたところ......
椎野: 和文モールス符号を全部覚えなければならないのは、明らかな欠点だと気付いたのです！
一同:（コイツ...気付いてなかったのかよ... 最初からわかるだろ！）
小久保: キーの数は 1 つのまま、何も覚えなくても使える入力方法は何だろうと考えたところ、ダーツで入力できないか？というアイディアが出ました。文字を並べた板にダーツを投げるのです。馬鹿馬鹿しいでしょ？
山口: 「投げて当てる」と言えば、宝くじの抽選では番号を書いた回転する円盤に向かって矢を射りますが、同じ方法で日本語を入力できないか？というアイディアが出て...
椎野: 「回転するもの」と言えば、スロットマシンでも入力できそうだ、というアイディアが出たんです。他に似たものとして、歌番組の順位発表で使われる回転表示板、駅の発着案内板が候補に上がり、最終的に「パタパタ」というアイディアに辿り着きました。
初期のデザイン案
Q: 開発はどのように進めたのですか？
小松: 昨年同様に今年も実機（ハードウェア）とウェブ アプリケーション（ソフトウェア）の両方を作るつもりだったので、実機を山口が、ウェブ アプリを椎野が担当して並行して開発を進めました。今年はウェブ デザイナーの小久保もプロジェクトに参加してくれたので、サイト デザインを中心にビジュアル デザイン、UX デザイン全般を一任しました。
小久保: 各自の役割分担が明確でお互いに依存することが少なかったので、並行開発は簡単でした。JavaScript と CSS3 で書かれた体験アプリをウェブサイトに埋め込むのも一日でできました。
山口: 僕の方ではまず、パタパタの表示機構がどういう仕組みか調べるところから始めました。フラップ（パタパタと回転する板）を取り付けたドラムを正確に回転させることで特定の文字を表示するという、意外と単純なものであることがわかりました。ただ、フラップなどの部品を全部手作りするのは難しかったので既製品のパタパタ時計を分解して再利用しました。
使うボタンは 1 つだけというコンセプトからボタンはなるべく大きく、目立つものを選びました。筐体はパタパタに合わせて一昔前の家電やコンピュータを意識したデザインになっています。
モーターを正確に回転させ、また USB キーボードとして動作させるための電子回路部分は自作しました。これは去年のモールス キーの電子回路にモーターを 1 個制御する機能を付け加えたものになっています。
電子回路部分。緑のボタンを押すとモーターが回ります。
ビデオ撮影前に微調整。
椎野: ユーザーが体験できるウェブ アプリについては昨年の実績があったので、パタパタを回転させるアニメーションさえ実装できれば、あとは何とかなると思ってました。アニメーション GIF を使うアイディアもあったのですが、タイミングの制御が難しそうだったので、素直に CSS3 のアニメーション機能を使うことにしました。CSS3 のアニメーション機能は比較的新しい機能で、当時の Chrome、Firefox、Internet Explorer は最新バージョンでしか満足にサポートされていなかったのが最大の欠点ですね。
プログラム コードは昨年のモールスバージョンを大幅に再利用できると思っていたのですが、入力部分の仕様が細かく食い違っているため、予想よりもスクラッチから実装する部分が多かったです。
体験アプリの最初のデモ。CSS3 アニメーションで回るだけの簡単なもの。
小久保: ひとつの画面で多様なステータスを持つアプリ的性格の強いものだったのでそれらの管理と演出に苦労しました。アプリ的ということで、最初はタスク遂行効率を上げるためにユーザーの自由度を上げるモードレスな UI 設計を考えたのですが、今回の要件はシーンの演出・切り替えによってユーザーを誘導する性格の強いものだと気づいたため、シーンごとにユーザーの選択肢を制限したモーダルな設計に変更しました。
またシェアする URL はハッシュにメッセージをそのまま持たせるだけというシンプルすぎる仕様にしました。これは意図的なもので、ハックを簡単にすることで入力が面倒で難しくてもメッセージ表示の演出だけでも楽しんでもらおうと考えました。
Q: 技術的に工夫したところなど、教えてください。
椎野: 強いて言えば、クロス ブラウザ対応のコストを下げるために
Closure Library
を使い、かな漢字変換に
Google Transliteration API
を使ったくらいでしょうか。少人数かつ短期間で開発するために、あまり凝ったことはせずにシンプルな作りにしたのが一番の工夫ですね。
Q: なるほど。では、デザインで工夫したところがあれば、教えてください。
小久保: 現在の仕事ではリアルな物体の写真を扱う機会があまりありません。ましてや何かの模倣というのは普段はしないことなので、ここぞとばかりに楽しんでやりました。本物の駅の表示機は既に大半が LED 表示のものに置き換わっていて、昔のものでも実際には文字単位でパタパタするものはなかったため、空港の発着表示板のデザインを参考にしたりしました。パネル自体のデザインを CSS3 で行うことも考えたのですが、今回はディティールに凝りたかったので画像で作りました。あと駅っぽい背景の写真は実際に晴れの休日を狙って自分で駅に行って写真を撮りました。サイトを公開してすぐにネットで「これは千駄ヶ谷駅の総武線ホームから新宿方向を写したものだな」と見抜かれたので鉄のみなさんはさすがだなと思いました。
Q: 大変だったことはなんですか？
椎野: ウェブ アプリのデモを作って試しに遊んでみると... かなりストレスを感じるんですよね。想像以上に入力しにくいことこの上ない。少しでも入力しやすくするために、細かい仕様については二転三転させています。
小久保: 最初のアイディアは、ボタンを押すと回転し始めて、ボタンを離すと回転が止まり、文字が入力されるというものだったんですが、狙い通りの文字を入力するのが難しすぎて......
椎野: そこで少しわかり難いですが、ボタンを離した瞬間に文字を入力するのではなく、1 秒半ほど遅れて文字が入力されるようにしました。この 1 秒半の間に再びボタンを押した場合は、文字を入力せずにパタパタを回転させ続けます。
小松: 何を言っているのかわかり難いと思いますが、この仕組みがあると「ちょん、ちょん」と短くボタンを押していくことで、パタパタを 1 枚ずつゆっくりと回すことができるようになるんです。この「ちょん、ちょん」入力を使うと、比較的思い通りの入力ができます。
山口: アイディアの面白さと、遊びやすさのバランスをとるのは難しいですねぇ... 去年は入力が難しすぎたので、今年は改善したかったのですが... 今年も結局難しかったですね。（苦笑）
小松: 今年はアイディア出しもたいへん苦労しました。ドラム キーボードからモールスへの流れは、自然で思いつきやすかったんですけどねぇ。
山口: キーの数が少なくて、何も覚えなくても使える、という観点から「毛筆入力」というアイディアもあったんですが、ペン入力と同じで実用的すぎるという欠点（？）からボツになりました。
椎野: 何時間もミーティングルームに篭ってのブレインストーミングは、思い出したくないですね......
Q: 最後の追い込みが大変だったと聞いていますが。。。
椎野: しめきりこわい... こわいよ...。いろいろなことがギリギリでしたが、隠しコマンドは今年も実装しました。山手線やその他いくつかの主要路線の駅名や特急、急行などの列車種別を入力すると駅の発車メロディーが流れたり、ちょっと特別な動きをするんです。一部の方には気付いていただけたようで嬉しい限りです。
三浦: 効果音の作成も苦労しました。やはり、パタパタというからには、音がしっかりパタパタしている必要があります。そこで、パタという音を作るために、いろいろな種類のカードを落としたり、弾いたりして数百種類の音をサンプリングしました。その中でイメージにあったものにフィルターをかけて加工していくという感じですね。1 文字ずつ回す場合と、一斉に回り出す場合ではそれぞれ気持ちいい音となるポイントが少し変わるので、そこも微妙に調整しています。発車メロディーは駅の雑踏を思い出しながら、できるだけ駅の雰囲気が出るように、超適当につくりました。
小久保: こ、こわいよ...。最後の最後で休日なのになぜかオフィスにいた人を捕まえてユーザー テストをしてみたところ、やはり操作方法を理解するのが難しそうだ、という問題が発覚したので急遽ヘルプを実装したりしました。まあそれが必要かもしれないというのはある程度予測はしていましたが、やはり説明なしで理解してもらえるのが理想なのでちょっと悔しいですね。
怖い思いもしたけれど、ローンチできて本当に良かった...
Q: パタパタバージョンを自作してみたいという方のため、基板の回路がオープンソース化されたとのこと。詳細を教えてください。
山口: こちらに、2012 年のモールスバージョンと共にソースコードを公開してあります。
https://code.google.com/p/mozc-morse/
山口: パタパタ装置の設計図も一緒に公開できると良かったのですが、今回撮影用に作った装置には既製品の部品を流用したのでその部分はありません。電子回路部分とファームウェア部分のみ自作したので、この部分を公開しています。ただ、パタパタ装置が用意できない場合でも適当なモーターを用意していただければ写真のようにして使うことができます。
電子回路とステッピングモーターを組み合わせてテストしているところ。
USB ケーブルで Android に接続して入力している。
ステッピングモーターにはパタパタの代わりに円盤を付けている。
Q: パタパタとキー入力はどうやって連動させているのでしょうか？
山口: ドラムを回すために、写真に写っているステッピングモーターを使っています。これは複数のコイルに順次通電することで少しずつ、例えば 1 周の 200 分の 1 ずつ回転させ、正確に止めることのできるモーターです。電子工作の入門書などでよく取り上げられていますので、見たことのある方もおられるかもしれません。プログラムは基準位置からどれだけ回転させたかを常に数えていて、今どの文字が表示されているかを把握しています。ボタンを離してドラムが停止すると、この文字が入力されます。
Q: 実機の開発で苦労したことはなんですか？
山口: ファームウェアを限られた容量に収めるのに苦労しました。開発期間の都合で去年のモールスキーと同じワンチップマイコンを使ったため、ROM の容量が 2,048 byteしかなかったのです。現在実機に載っているプログラムで 2,028 byte あり、ほぼぎりぎりの大きさです。実機をかな入力ではなくローマ字入力にしているのもこれがひとつの理由です。平仮名よりも文字数の少ない英数字にすることで容量を節約しています。
Q: 最後に Google 日本語入力スペシャルバージョンの開発について、今後の展望を教えてください。
小松:
こちらのビデオ
の後半に登場するメガネ バージョンも鋭意開発中です（キリッ）。ただ、早くも大きな課題が見つかっていまして... パタパタの風でドライアイになってしまうんですね。目薬を持ち歩かなくてはならないとなると、せっかくの携帯性が損なわれてしまいます。この部分さえうまく解決できれば、実用化は近いと考えています。
開発中のメガネ バージョン。
小久保: とりあえずあの試作機はとんでもなく重いので、軽量化のうえ年内にはなんとか実用化の目処をつけたいですね、はい。
重いメガネ バージョンを装着中の小久保。本当に重い。とんでもなく重い。
Q: 皆さん、お忙しい中ありがとうございました！
ラベル
.app
1
.dev
1
#DevFest16
1
#DevFest17
1
#DevFest18
1
#DevFest19
1
#hack4jp
3
A/B Testing
1
A4A
4
Accelerator
1
Actions on Google
16
Activation Atlas
1
Addy Osmani
1
ADK
2
AdMob
31
Ads
50
Ads API
43
AdWords API
11
Agency
1
AI
11
AIY
3
AIY Vision Kit
2
ALPN
1
AMP
88
AMP Cache
6
AMP Extension
1
AMP for Email
4
AMP SSR
1
AMP Story
3
AMP Toolbox
1
amp-bind
1
AMPHTML Ads
1
Analytics
9
Andorid
12
Android
348
Android Auto
1
Android Design Support Library
1
Android Developer Story
4
Android Developers
4
Android Enterprise
5
Android Go
1
Android Jetpack
3
Android N
18
Android O
13
Android P
7
Android Pay
1
Android Q
13
Android Security Year in Review
1
Android Studio
38
Android Support Library
6
Android Things
15
Android TV
10
Android Vitals
3
Android Wear
29
androidmarket
3
AndroidX
5
Angular
2
Angular 2
2
AngularJS
2
Anthos
1
AoG
1
API
25
APIExpert
45
apk
2
APM
1
app
3
App Action
1
app engine
23
App Indexing
7
App Invites
6
App Maker
2
AppCompat
2
Apps Script
11
aprilfool
4
AR
2
Architecture Components
7
ARCore
1
ArtTech
1
Associate Android Developer Certificate
1
Audio
7
Auth Code
1
Authentication
8
AuthSub
2
Autofill
1
AutoML
1
Autotrack
2
award
1
Awareness API
1
Beacons
6
Better Ads Standards
1
BigQuery
9
Billing
1
BLE
4
Blink
1
Blockly
1
blogger
1
BodyPix
1
Brillo
1
Brotli
2
Budou
1
Calendar
3
Canvas
1
Cardboard
4
Career
1
Case Study
1
Certificate
2
chrome
135
Chrome Custom Tab
2
Chrome Dev Summit
3
chrome extension
11
Chrome for Android
2
Chrome for iOS
2
Chrome OS
6
Chrome Tech Talk Night
4
Chromebook
4
Chromecast
7
chromewebstore
7
Chromium
5
CLI
1
ClientLogin
3
Closure Compiler
1
Cloud
21
Cloud Firestore
5
Cloud Functions
9
Cloud IoT Device SDK
1
Cloud Next
8
Cloud OnBoard
3
Cloud PubSub
1
Cloud Storage
1
Cloud Study Jams
3
Cloud Summit
1
Cloud Test Lab
2
Cloudflare
1
CNN
1
Coalition for Better Ads
1
CocoaPods
1
code review
1
codejam
5
codelab
4
Colaboratory
1
Community
4
compute engine
3
Context
1
Cookie
2
Coral
2
Crash Reporting
2
Crashlytics
2
Dart
2
DataCenter
1
Daydream
4
Deep Learning
4
Demo Party
1
Design Sprint
3
DesignBytes
1
DevArt
3
DevBytes
6
Developer
14
Developer Console
4
Developer Preview
6
Developer Relations
2
DevFest
9
DevFestX
3
DevOps
1
devtools
4
Dialogflow
1
Differential privacy
1
DirectShare
1
DNS-over-HTTPS
2
Domain
1
Doodle
1
DoubleClick
4
Doze モード
1
drive
2
Dynamic Links
3
EarlGrey
1
Easter Egg
1
ECMAScript 2015
1
Eddystone
4
egypt
1
Encryption
1
English
2
ES2015
1
ES2016
1
ES6
2
ES7
1
Event
1
Featured
2
FIDO
1
Firebase
118
Firebase Admin SDK
6
Firebase Analytics
10
Firebase Auth
4
Firebase Cloud Messaging
10
Firebase Crashlytics
2
Firebase Database
5
Firebase Libraries
1
Firebase Notifications
1
Firebase Performance
3
Firebase Remote Config
5
Flash
1
Flutter
6
font
3
fraud
1
G Suite
19
game
39
Game Developers Conference 2018
1
Game Developers Conference 2019
1
Gboard
1
GCP
13
GCPUG
1
GDD11JP
56
GDD2010JP
23
GDE
2
GDG
19
GDG Cloud
1
Geo
54
Gingerbread
1
GLIDE
5
Gmail
4
Gmail API
2
Go
1
golang
5
goo.gl
1
Google
6
Google Analytics
3
Google API
1
Google Apps
14
Google Apps Script
4
Google Assistant
10
Google Assistant SDK
2
Google Cast
8
Google Cloud
26
Google Cloud INSIDE Digital
1
Google Cloud INSIDE Games & Apps
6
Google Cloud INSIDE Retail
1
Google Cloud Messaging
11
Google Cloud Platform
11
Google Code-in
1
Google Developer Experts
2
Google Developers Academy
1
Google Developers live
5
Google Developers Summit
2
Google Drive
6
Google Earth
1
Google Fit
2
Google for Mobile
2
Google for Startups
1
Google for Work
1
Google I/O
17
Google Impact Challenge
1
Google Maps
62
Google Maps Platform
21
Google ML Summit
1
Google Pay
2
Google Photo
1
Google Play
110
Google Play Console
9
Google Play Game Services
9
Google Play Instant
1
Google Play Services
23
Google Plus
14
Google Search
7
Google Sheets API
3
Google Sign-In
12
Google Slides API
5
Google Summer of Code
1
Google Tag Manager
1
Google Trust Services
1
Google マップ
4
Google+
2
Googleapps
10
GoogleGames
1
GoogleI/O
28
GoogleLabs
1
GooglePlay
1
GoogleTV
1
Gradle
1
gRPC
2
GTUG
5
GWT
2
hack4jp
2
hackathon
7
Hangouts Chat
2
Hosting
3
HTML5
17
HTML5Rocks
1
HTTP/2
5
HTTPS
13
I/O Extended
4
ID Token
1
Identity
15
Identity Toolkit
1
IGF2010
1
Ignite
4
IME
11
Indie Game
1
Indie Games Festival
1
Indie Games Festival 2018
2
Indie Games Festival 2019
12
Indie Games Festival 2020
1
Inevitable ja Night
27
Instagram
1
Instant Apps
6
intern
2
Invites
1
IO19
3
iOS
20
IoT
6
IPv6
1
Issue Tracker
2
Japanese Input
1
JavaScript
10
Jetpack
1
K-12
1
Key Transparency
1
Knowledge Graph
1
Kotlin
10
Kubernetes
2
l10n
8
LaunchPad
2
Lighthouse
1
LINE
1
Local AI
1
Lollipop
10
Machine Learning
22
Maker Faire Tokyo
1
Marshmallow
10
Material
1
Material Design
30
MDL
1
MDN
1
metrics
1
MIDI
2
ML Kit
11
Mobile
14
Mobile Bootcamp
4
Mobile Sites certification
1
Mobile Vision
4
mod_pagespeed
1
monetize
3
Mozc
15
Music
1
NativeDriver
2
NativeScript
1
NBU
1
ndk
3
Nearby
5
Next Extended
1
Next Tokyo
3
Nexus
2
Nexus S
1
NFC
1
Node.js
3
Noto CJK
1
NPAPI
2
NPN
1
oauth
11
OpenAI
1
opencensus
1
OpenGL
4
OpenID
3
OpenID Connect
4
OpenSocial
1
opensource
18
OpenTitan
1
Optimization
1
Payment
4
PEM
33
People API
2
Performance
13
Performance budget
1
PersonFinder
1
Physical Web
3
Pi
1
Place Picker
1
Play Billing Library
2
Player Analytics
4
Playtime 2017
1
Policy
4
Polymer
7
privacy
5
Progressive Web Apps
14
project hosting
1
Promise
1
Promo code
1
Protocol Buffers
1
PRPL
1
publicdata
1
Push API
1
Push Notification
3
PWA
3
Python
2
QUIC
1
QWIKLABS
3
RAIL
1
React
1
React Native
2
Realtime Database
9
Recap Live Japan 2019
3
reCaptcha
1
Redux
1
Remote Config
3
Remote Display API
1
Resonance Audio
1
Rewarded Video Ads
2
Runtime Permission
1
Safe Browsing
2
Sample Code
2
Santa Tracker
1
schema.org
1
secur
1
security
57
Service Worker
4
SHA-1
1
sketchup
1
SmartLock for Passwords
4
social
4
Social Good
1
Social Media
1
software development
1
SPDY
3
speak2tweet
1
Spreadsheet
3
SSR
1
startup
5
Storage
2
story
1
streetview
3
Study Jams
7
Swift
2
SwiftShader
1
Symantec
1
Task
4
Team Drive
1
techtalk
12
TensorFlow
27
TensorFlow Federated
1
TensorFlow Lite
4
TensorFlow Object Detection API
1
TensorFlow Probability
2
TensorFlow.js
1
test
4
Test Lab
6
TFX
1
ToS
1
trace
1
Transliteration
1
Twitter
1
Udacity
20
Unity
3
UX
4
V8
2
VP9
1
VR
11
Vulkan
2
Watch Face
2
wave
2
Wear OS
2
Weave
1
Web
30
Web Animations
1
Web Components
6
Web Manifest
1
Web Packaging
3
WebAssembly
4
WebGL
1
WebMusic
5
WebView
1
Women Techmakers Scholars Program
1
WTM
5
Xcode
1
YouTube
17
YouTube API
1
インタビュー
1
コードサンプル
1
プライバシー
1
機械学習
2
言論の自由
1
節電
3
東日本大震災
9
日本語入力
41
ブログ アーカイブ
2020
1
2019
12
11
10
9
8
7
6
5
4
3
2
1
2018
12
11
10
9
8
7
6
5
4
3
2
1
2017
12
11
10
9
8
7
6
5
4
3
2
1
2016
12
11
10
9
8
7
6
5
4
3
2
1
2015
12
11
10
9
8
7
6
5
4
3
2
2014
12
11
10
9
8
7
6
5
4
3
2
1
2013
12
11
10
9
8
7
6
5
4
3
2
1
2012
12
11
10
9
8
7
6
5
4
3
2
1
2011
12
11
10
9
8
7
6
5
4
3
2
1
2010
12
11
Feed
Follow @googledevjp
"プロダクトに関するご意見は
プロダクトフォーラム
にお願いします"
