🖼 グリフを鑑賞する
技術書典に出す本のために文字について調べていたらいつのまにか、グリフを鑑賞するアプリを作っていた。柿(かき)と杮(こけら)のような見比べると楽しい文字が次々と表示される。
✨鑑賞場所
ソースコード: https://github.com/mzp/moji/
🖼おすすめの文字
由来が同じ文字
ギリシャ文字を元にラテン文字やキリル文字が作られた、みたいな由来により形状が似ている文字。別の文字と言うのかよくわからないが、Unicodeのコードポイントが別なので別の文字だということにした。
絵文字にもヒエログリフにもブタがいる、みたいな発見もあっておもしろい。 2000年くらいかけてブタがかわいくなった。
形が似ている漢字
柿(かき)と杮(こけら)のように形が似ている漢字。 部首や画数がそろっているせいか、Unicodeのコードポイントが連続していることが多い。
同じ漢字を重ねる漢字
木と林と森のようなやつ。 猋はイヌがいっぱいでかわいい。
女を重ねたやつはあまりいい意味でなくて政治的に正しい文字なのか不安になる。
パーツが同じ漢字
世界の文字の図典 普及版では異字として分類されているが、異字の意味も書いてないし、含と吟の関係について説明した他の資料も見つからないので、「パーツが同じ」というふんわりとした言い方にしている。
パズルみたいで楽しい。
🐾経緯
入力メソッドの説明で「アルファベットを入力するために入力メソッドは不要であるが...」と書いていたら、「そもそもアルファベットとはなんだろう。漢字とはなんだろう?」という疑問が生じたので、文字に関する本を何冊か購入した。
世界の文字と記号の大図鑑にはUnicode 6.0に収録された全グリフが載っていて、眺めているだけで楽しい。
このような感じでコード順にグリフが淡々と掲載されている。
ときおり似た文字をタイポグラフィ的に紹介しているページがある。 このページが内容も興味深いし、見た目も美しくてよい。
このページが気にいりすぎたので真似した画像をSketchで作って壁紙にするなどして楽しんでいた。
だんだんと数が増えてきて毎回Sketchで画像を作るのも大変だし、だらだらと眺めたいなという気持ちになったのでWebアプリケーションにした。前々から気になってたCSS-in-JSを使ったりはしているが、そこまで特別なことはしていない。
📌様子
入力メソッドのこと調べてたら「言語とは？文字とは？？」という気持ちになったので、いろんな文字が載った本を買ってしまった pic.twitter.com/lEObqLuBVZ
— mzp (@mzp) 2018年2月23日
いいページでてきた pic.twitter.com/8XKbQBxY7e
— mzp (@mzp) 2018年2月23日
似た文字を集める遊び、たのしくなってきた pic.twitter.com/L2N9JGT6SR
— mzp (@mzp) 2018年2月26日
漢字がだんだんと文字ではなく記号として認識されるようになってきた
— mzp (@mzp) 2018年3月7日
📚技術書典
4月22日に開催される技術書典4に出て、入力メソッドの作り方を説明した本を頒布する。
📌サークルスペース
い-15に配置された。 知見がなくて分からないけど、入口に近くていい場所な気がする。
初参加かつ一人は怖かったので、友人の黒曜さんの隣りにしてもらった。
技術書典4の配置が決まった ◎貴サークル「黒曜堂」は、 い-16 に配置されました。
— 黒曜@技術書典4 い-16 (@kokuyouwind) 2018年3月1日
お手伝いをするのでお隣さんです https://t.co/oxzO8EjlI9
— 黒曜@技術書典4 い-16 (@kokuyouwind) 2018年3月1日
📖入力メソッド解説本
過去のブログ記事をまとめなおして、macOSの入力メソッドを作る方法を説明する本にした。 漢字変換については日本語入力を支える技術がすでにあるので、キー入力を受けとって、アプリケーションにテキストを渡す方法に絞っている。
後半はXcodeに同梱されているヘッダファイルにあるコメントから再構築した内容や、独自に解析した結果に基づいているので、ほかの場所には記載されていない内容になっていると思う。
🎨挿絵
などの理由があり、サークルカットや文中の図は自分で描いた。
手元にiPadProとApplePencilがあったので、ProcreateにProcreateで使えるイラストや漫画向け網点ブラシなどのブラシを追加して描いた。
イラスト、なんとかして「味がある」「色がついてる」「何が描いてあるかは分かる」くらいの評価は獲得していきたい。
— mzp (@mzp) 2018年1月25日
📝執筆環境
Re:VIEW を利用している。
セクションタイトルのデザインを変更したくなったので、どんどんLaTeX固有の設定が増えている。 epub版とかも生成するつもりだが、そこまで楽にはならなさそう。
レポジトリ管理はKeybase.ioのgitレポジトリ機能を使っている。 githubがだめというよりKeybaseを試してみたかった気持ちが強い。end-to-endで暗号化されてるのは心強い。
🚀進捗
温泉に行ったときにがっと修正するつもりだったが、温泉が快適すぎて何もしなかった。 帰ってきてから、がんばった。
文書の修正はおおむねできたので、あとは画像の白黒化やページ数の調整、表紙を描くなどの本としての完成度をあげる作業が残っている。 あとサークルスペースの準備も残っている。
☕️旅行とコーヒー
出張や旅行で家を離れたときも朝コーヒーを飲みたい。 できれば外出せずに飲みたい。という気持ちが高まったので、コーヒーをいれる器具を持ち運ぶようにした。
👜中身
5000円くらいで揃えた。
- HARIO セラミックコーヒーミル スリム
- HARIO V60 ドリッパー
- ペーパーフィルター 数枚
- 袋止めクリップ
- ジップロック複数
HARIOのミルが小型でよかったのでドリッパーなどもHARIOで揃えた。
マグカップはホテルについてることが多いのでいれていない。豆は現地調達するか、ジップロックにいれて持参する。
機内持ち込みが禁止されているものは含まれていないので飛行機に持ち込めるはずだが、試していない。預け入れはできた。 
☕️利用の様子
出張でビジネスホテルに泊まったときの様子。 電気ケトルもマグカップもあって便利。
島根に泊まったときの様子。温泉宿にケトルはないので、急須でがんばる。
マグカップもないのでコンビニで紙コップを買った。
朝コーヒーを飲んでも、喫茶店には行く。
🎯今後の課題
- 旅行先で自家焙煎の店を見つけて、そこで豆を買う、というのをやってみたい
- 電気ポットしかないこともあるので、簡易ケトルみたいなものがあるといい
🛒 類似商品
ブルーボトル TRAVEL KITシリーズ。専用バッグにはいっててめっちゃ格好いいが、2万円以上する。 PVもよい。
Handpresso Outdoor Espresso Set。これも専用バッグにはいってて格好いい。 日本から買えるのかよく分からなかったのと、エスプレッソよりドリップコーヒーがいいなと思ったのでやめた。
Cafflano Klassic。一個でミルとドリッパーとカップがついてる。わがんせ Coffee Maestroとかコンセプトを真似したような商品もある。
Tetra Drip。折り畳みできるドリッパー。クラウドファンディングで作ってたらしい(携帯性、使いやすさ、美味しさを追求したコーヒードリッパー作り)。 でもミルが場所とるしな、と思ってやめた。
♨️温泉ワークという可能性
玉造温泉に滞在しながら勤務した。 よい体験だった。
🏢温泉ワークの可能性
オフィスには長時間座るのに適した椅子がある。 疲れにくいとされている分割式のキーボードもある。 休憩を取るためのスペースもある。
しかし疲労回復や気分転換という点では温泉のほうが優れているのではないか。温泉が近くにあるオフィスは、十分に整備されたオフィスと同じくらいよいものではないか。という仮説があったので、3日ほど温泉宿から勤務してみた。
♨️玉造温泉
滞在先は玉造温泉とした。 平安時代から名泉と呼ばれいた点と、松江にあるサテライト・オフィスからそれほど離れていない点がよかった。
平日の滞在だったせいか、一泊6000円程度のわりに広い部屋を借りれた。
✨よかった点
温泉宿
毎朝と毎晩に温泉にはいれるのはよい体験だった。 疲れも残りづらかった気がする。朝温泉にはいれると思うと朝起きるモチベーションもあがってよかった。
部屋に作業スペースがあってよかった。 この旅館特有のスペースにはよさがある。
温泉街
宿のまわりは温泉街になってて雰囲気がよかった。 その様子をみながら出社するのは楽しかった。
雪
滞在期間中は常に大雪だった。 狙ったわけではないが、毎日雪見露天風呂ができてよかった。
温泉宿からサテライトオフィスまでの移動は徒歩と電車を使った。雪道は歩き慣れていないので楽しかった。
🙈見落していた点
冬は雪が降るので飛行機は飛ばないことがある、ということを完全に見落していた。行きも帰りも飛行機が飛ばず、JRで移動した。
🚀今後の課題
今回はサテライトオフィスに出社した。 次は温泉宿から出ることなく勤務するのを試してみたい。 ミーティングの合間などに温泉に入れるのは効果的な気がする。 ただ、温泉宿にはテーブルや椅子がないのがネックになる気がする。
他の温泉でも同程度の体験が得られるか確認したい。 今回は宿の品質が高かったので、他の宿でも再現性があるか確認する必要がある。
🌨富山
BuriKaigi 2018に参加するため富山に行った。
🎤BuriKaigi
BuriKaigiでの発表は日本語入力の落とし穴に書いた。 寒ブリ合唱団とブリ会議が同じ施設を利用しておもしろかった。
発表後の懇親会で大量のぶりを食べたり、温泉にはいったりしてよい体験だった。 露天風呂から雪が見えたのもよかった。
🚌高速バス
移動にはきときとライナーを使った。雪の影響で多少遅れたが、おおむね問題なかった。
🐾観光
富山駅
路面電車が通ってて楽しい。路線図を雑に把握したまま乗ったら、目的地と逆方向に着いた。
高岡駅
雪がすごすぎて観光は断念した。ゆるゆりの舞台でも見ようかと思っていたが、駅の外を歩くのは無理だった。
駅の待ち合いスペースで、日本語入力の落とし穴を書いていた。
🍽寿司・ブラックラーメン
富山に来たし、ということでブラックラーメンを食べた。味が濃いのでごはんと一緒に食べろというアドバイスを貰ったので従った。
水道水が推されてた。BuriKaigiの懇親会で「水飲みたいんですが...」と聞いたら「水道水飲め」を言われた謎が溶けた。
寿司。うまい。
🐟日本語入力の落とし穴 #burikaigi
BuriKaigi2018で発表した。 入力メソッドについてのテキストを書いてる途中なので、それを流用する目論見だったが、まったく別のものになった。
🎤原稿
あいさつ
このセッションはJava+αだと聞いてるので、+α部分の寛容さに賭けて日本語入力の話をする。
日本語を受け取るアプリケーションがおちいりがちな落とし穴についての話をするので、テキスト入力を受けつけるアプリケーションを作るときとかに役に立つと嬉しく思う。
会社の紹介
ボクはMisocaという請求書を管理するWebサービスを作っている会社に勤めている。
日本語入力の重要性
Misocaの開発には、様々なサービス・ソフトウェアを使っている。Ruby、RailsやSlack、Githubなどは使っている会社も多いと思う。
この図には記載されていないが日本語入力の使用頻度も極めて高い。
アンケート
さて、ここでちょっとアンケートを取りたいと思う。使っている日本語入力を教えてほしい。
(補足)1〜3は同数くらい、その他は2人くらいSKKユーザーが居た。
SKK
ボクは「その他」に属するSKKという日本語入力を使っている。
ニコニコ大百科の記事が詳しいので引用します。「この慣れると他のが使えなくなる」「様々なプラットフォームに移植されている」が特徴的である。
移植作業はボクも行なっており、Mac版のAquaSKKは180+スター、iOS版のFlickSKKは3000個くらいインストールされてるので、需要はそれなりにある。
日本語入力の特殊性
作っていてつくづく感じるが日本語入力は特殊なソフトウェアである。
- すべてのキー入力を受け取る。 パスワード入力欄を含めてすべてのキー入力を取得できる。
- メインウインドウのような固有のウインドウは持たないがアプリケーションと強調して画面表示を行なう。デーモンに近いソフトウェアである。
- 日本では圧倒的なシェアを誇る。
日本語以外の入力方法
では日本語以外の入力方法を紹介する。 このために、5ヶ国語くらいで「こんにちは」と書けるようになった。
キーボードによる入力
英語は専用のキーボードがあるので、入力メソッドが必要ない。 その他にも( ﾟдﾟ)の口でおなじみのキリル文字が入力できるキーボードもある。
韓国語入力メソッド
韓国語やヒンディー語でも入力メソッドが用いられるが、これも日本語入力とはちょっと違う。
例えば、韓国語の表記に使われるハングルは、複数の字母の組み合わせで文字を構成する。例えば아というハングルは、ㅇとㅏという2つの記号の組み合わせで構成する。
それぞれが字母がキーと対応している。ㅇはDキーとㅏはKキーに対応しているので、DKと打つことで아が入力できる。
注目すべきは日本語入力における「変換候補の表示」に相当する動作がない点である。文字の数が漢字に比べて圧倒的に少ないのが原因だと推察している。
中国語入力メソッド
中国語入力は日本語入力と類似点が多い。
中国語の入力にもいくつかの種類があるが、ピンイン入力を取り上げる。この入力方式では、ni-haoといれたのち、スペースをおして漢字を選択することで入力する。
顔文字がでてくるのがかわいい。
発音記号の入力、候補の選択という流れは日本語入力と類似している。
漢字入力の特殊性
なので
- 発音記号を入力する
- 候補を表示して、そこから入力する文字も選択する
という二段階の変換は漢字を持つ日本語・中国語のための仕組みであると言える。歴史的には韓国語・ベトナム語も漢字を持つが、現代では日常的には使われていないため入力メソッドではサポートされていない。
(補足)懇親会でトンパ文字の話はしたが、こちらは入力メソッドをもたないため今回の対象外である。
つらい話
このように日本語入力は特殊な存在であるため、日本語入力と相性がよくないアプリケーションが存在する。 そのようなアプリケーションを作ってしまわないために、つらかった話を紹介する。
日本語入力の仕組み
最初に日本語入力の基本的な仕組みについて説明する。これはmacOSの例だが、おそらく他のプラットフォームでもそれほど大きな違いはないはずである。
日本語入力は、キーボード入力とアプリケーションの間に入りテキストを変換する。
そして日本語入力は「漢字変換エンジン」と「入力メソッド用API」の2つで構成されている。 「漢字変換エンジン」は入力されたひながななどを漢字に変換するエンジンである。これは、「日本語入力を支える技術」で詳しく解説さている。
「入力メソッド用API」は漢字変換エンジンとアプリケーションをつなぐためのAPIである。 これを使うことで、アプリケーションに渡されたキー入力をうけとり、なんらかの形で漢字に変換した上で、アプリケーションに返すことができる。
平和な世界の崩壊
この仕組みにより、キーを押すとその文字が入力される素朴で穏かな世界が失なわれる。
具体的には
- 「確定する前の文字列」という概念が導入される。
- 「入力メソッド用のキー」という概念が導入される。
といった変化がある
未確定文字列の導入による問題
入力メソッドにより「確定する前の文字列」という概念が導入される。 これは、下線つきで表示されることが多い。 入力されてるとも入力されてないとも言えない微妙な存在である。
Ulysses IIIの実例
Ulysses IIIで起きた問題について説明する。
Ulysses IIIにはMarkdownの文法をハイライトする機能がある。 例えば ** で囲まれてる部分がボールドになる。
しかし、この機能は未確定文字列に対しても有効なので、未確定文字に * が含まれていると、それ以降の文字がボールドに変換される。 さらにその副作用で、未確定文字が確定されてしまう。
余談ですが、これはバグレポメールを送ったら「…よくわかんないんだが、押したキーに対応した文字が入力されないんだったら、君たちはどうやってアルファベットを入力するんだ?」という返事が返ってきて大変だった。
VisualStudioCodeの実例
次はVisualStudioCodeの実例を紹介する。 すでに修正ずみだが、初期のバージョンは未確定文字列のハンドリングがうまくいっておらず、未確定文字列が消失していた。つまり事実上、日本語の入力ができなかった。
バグレポートを送るために、メニューから "report issue" を選択したら、メーラーが起動してびっくりした。 さらに、メールを送ったら、エラーメールが返ってきてさらにびっくりした。 「How to fix」のとこに受信するグループの管理者にインスタンメッセンジャーか電話をして許可を貰えとか書いてあって無茶すぎると思った。
宛先がmonacotoolsになってて、「なぜモナコ????」と不思議だったが、これはVisualStudioCodeのエンジンの開発コードらしい。
ちなみに2～3週間後に「バグレポありがとう。韓国語の入力メソッドでも同様の問題がレポートされてたので、修正したよ」って返ってきた。よかった。
PowerPointの実例
続いてパワーポイントの実例について紹介する。
日本語は未確定文字列を経由して入力されることが多い。
しかし、入力メソッドの仕様上、この流れは必須ではなく、直接確定文字列を挿入しても問題ない。例えばaを押すと確定文字としての「あ」が挿入される入力メソッドは仕様に対して妥当である。 事実、SKKはそれを行なっている。
しかしパワーポイントは未確定文字列を経由せずにテキストを挿入すると取りこぼしが発生する。 たぶん、未確定文字列をいれたあと確定するという流れを仮定した処理が入っているのだと思う。
パワーポイントでは必ず未確定文字列をいれたのちに確定文字列をいれることで回避している。
「入力メソッド用キー」による問題
「A」キーが打たれたら「あ」になる、「半角・全角」キーが押されたらIMEの状態がかわる、「Ctrl-S」はIMEが処理しないので自前で処理する、といったように入力メソッドと協調してキー入力の扱いを決める必要がある。
iTerm2の実例
iTerm2という端末エミュレータにおける例を紹介する。
これのキー入力時の処理は以下のようになっている。
- キー入力のイベントハンドラが起動する
- 入力メソッドにキー入力イベントを渡す
- 入力メソッドがテキスト入力をした場合は、なにもしない
- 入力メソッドがテキスト入力をしなかった場合は、独自に処理をする
一見問題なさそうだが、実は4に問題がある。 テキスト入力がないと、入力メソッドが処理していないは等価ではない。
たとえば「かな」キーを押したときの処理を考えてみる。
まずは入力メソッドが受け取り、入力モードが変更される。テキスト入力が発生しないため、その後iTerm2が処理する。しかしかなキーには機能が割り当てられていないため、なにも起きない。
次にかなキーではなくLキーで、入力モードが切りかわる入力メソッドを考えてみる。SKKがそれに該当する。
同じく入力メソッドが最初に受け取り、入力モードが変更される。テキスト入力が発生しないためiTerm2は処理する。そしてLが入力される。
1度しか入力していないのに、入力メソッドとiTerm2の二重でキー処理されてしまう。 これはSKK界隈で「Lを押したらLが入力された」問題として知られている。
正しく処理するにはテキスト入力が発生したかどうかではなく、入力メソッドがイベントを処理したかどうかで分岐する必要がある。
余談ですが、このパッチの説明は大変だった。
キー入力のイベントハンドラが激戦区で
- Ctrl-Cのような割り込みキーの処理をしたい
- ドイツ語のようなアクセント記号つきの文字をいれたい
- 日中韓の入力メソッドに対応したい
のように、さまざまな要求に対応するために変更が繰替えされていた。blameするとすごいことになっている。
また、入力メソッドの処理のドキュメントがあまりなくて、なぜこの処理が正しいのかを説明するが難しかった。文書の解釈についてディスカッシャンすることが多かった。
今は、パッチがマージされたので「Lを押したらLが入力されてしまう」問題は解決している。
InteliJ IDEAの実例
JetBrains社のIDEにも同様の問題がある。 コードは公開されてないので原因はわからないですが、おそらく原因も同様だと思う。
レポートはあげてあり、人もAssignされているが、ここ2年ほど動きがない。
ので、回避策が必要である。
先程の処理の流れをみてみると、4に行くと問題のある動きが生じる。 なので、常にテキストが入力されるようにすれば、この問題を回避できる。
そのためにNUL文字(\0)を使う。 これは通常のテキストエリアにいれる文字としては不正なのでIDEが無視する。 しかしテキストは入力されていると認識されるので4に行くことはない。
これ、AquaSKKではかなり前から利用されている回避策である。
Qt5の実例
Qtも同様の問題がある。
作るときの苦労
最後に、作るときの苦労の話も少し紹介する。
資料不足
macOSの入力メソッド作るためのライブラリはInputMethodKitという名前で用意されている。しかし、InputMethodKitのドキュメントはほとんどない。
例えば、Qiitaで検索しても0件である。
存在する資料
Appleのドキュメントも特に説明が記載されていない。
参考になるのはヘッダファイルにコメントや、公式サイトから消えたミラーのWebArchiveが文書などである。
孤独
ドキュメントが少ないのと関連するが、弄ってる人はほとんどいない。
動かないメソッド
一部のメソッドがうまく動作しない。
これは変換候補を選択するためのメソッドをディスアセンブルしたコードだが、スタックにpushしてpopしているだけで何もしていない。
radarにレポートしたら「既知のバグ(duplicated)」と帰ってきた。直してほしい。
まとめ
最後にまとめる。
- 日本語入力は特殊なソフトウェアなので落とし穴がある -「未確定文字列」「入力メソッド用のキー」が特につらい
- みんな入力メソッドで遊ぼう
🎍正月休み
🍛ファイナルカツカレー
めしにしましょう 4巻に影響されて、@keita44_f4家でファイナルカレー会をした。
新年にファイナルになったのが気にいってる。
ストロングゼロを飲んだせいか、最初と最後の写真しか残ってない。 記憶もそんなに残っていない。
🤖Android開発
新年なので、Android開発の勉強を始めた。Android端末を使ったことがないのでだいぶ苦労してる。一昨日、日本語入力の方法を覚えた。
KotlinスタートブックとAndroid開発の教科書を読んだ。 Material Designのガイドラインも目を通した。
題材はMastodonクライアントにした(http://github.com/mzp/android-playground)。 それなりに形になってきたと思う。
作りはじめた直後
今
🎨UIトレース
TwitterのUIトレースをして気がついた事｜Masaki｜note でUIトレースという言葉を知ったので、やってみた。 UIデザインができるようになりたい。
学んだこと * TwitterのUIをトレースしながら研究しよう！（初心者向け） - NOGA BLOGを見ながら、おおまなか流れを覚えた。 * SF Pro DisplayとTextの使い分けがあることを知った: https://qiita.com/motokiee/items/e16d93ef78ff5e0ffbac
気付いたこと
- 名前と時刻をMIDDLE DOTで区切られている。 境目を分かりやすくするためかな?
- 左のアラインはちゃんとそろってる。 右はそうでもない。

