画面上で利用するソフトキーボードとして、HYBRID W-ZERO3愛用者に絶大な人気を誇っているのが「FingerKeyboard」である。そのソフトキーボードのHYBRID W-ZERO3用スキンを制作した「まつぁーん」氏が語る、スキン開発の舞台裏とは？
FingerKeyBoardのスキンを作ろうと思ったきっかけ
FigngerKeyboard。2月28日の記事でも紹介し、読者からも大きな反響がありました
はじめまして、まつぁーんと申します。HYBRID W-ZERO3用FIngerKeyBoardのスキンを作って公開しております。このたび、ウィルコムファンサイトでスキンを紹介させて頂けることになり、僭越ながら私の制作したスキンを紹介させて頂きたいと思います。
私は「W-ZERO3[es]」から「Advanced/W-ZERO3[es]」、そして「WILLCOM 03」とQWERTYキーボードが付いているスマートフォンを使ってきました。
HYBRID W-ZERO3はQWERTYキーボードが付いていないことから躊躇していましたが、3G回線が使えたり、画面が大きいといった魅力から機種変更しました。
最初はワンタッチ変換が付いているので何とかなるだろうと考えていたのですが、やはりQWERTYキーボードの入力速度には敵いませんでした。
さらにデフォルトのソフトキーボードは、キーが小さすぎて逆に入力速度が落ちてしまう。もう少しキーが大きくて指でタッチできたらいいのに……。そんなことを考えていたときに出会ったのが、FingerKeyBoardでした。
これだ！ と思って使ってみたものの、海外製のソフトだけあって日本語入力がうまくいきません。キーも小さくて押しづらいし、ここは自分が使いやすいように作ってみよう！ と考えたのが、スキン制作を始めたきっかけです。
ブログでのスキン公開
最初はとある掲示板でスキンを公開していたのですが、ブログでまとめてみたら？と言われたのがきっかけで、ブログなんて立ち上げたことの無かった私がせこせこ調べて立ち上げてみました。
思っていた以上に皆様からの反応があり、さらに応援まで頂きました。自分が使いやすいのはもちろん、より皆様に喜んでもらえるようなスキンを作ろうと思い、現在のスキン開発に至ります。
現行版のスキンをいくつか紹介したいと思います。
WILLCOM03風スキン
ついこの間までWILLCOM03を使っていたこともあり、まず手はじめにと作ったスキンです。
Willcom 03風スキン
Willcom 03風スキンの縦画面
画像はFingerKeyBoardにデフォルトで入っていたものを拝借し、画像サイズをキーサイズに合わせて作り直しています。WILLCOM03のキーボード配列になるべく近くなるように配置、アレンジしました。4列にする必要があったのですが、キーボードの画面の占有率を考えると1列あたりの縦幅が小さくなってしまいました。
Willcom 03風スキンの赤バージョン
ちなみにこのスキンには赤バージョンもあります。
指の腹でタッチ（を目指した）スキン
略して「指タッチスキン」などと呼んでおりますが、WILLCOM03風スキンで問題だったキー幅が狭いことから起こる誤入力をなんとかなくせないだろうかと考えて作ったスキンです。
指の腹での入力を目指した指タッチスキン
指タッチスキンの縦画面
WILLCOM03風スキンでは、デフォルトの画像を流用していましたので、今回は自作しようとキーボードのボタンっぽい画像を制作しました。
カーソルキーを排除してみては？ というコメントを頂いたのがヒントになり、カーソルキーをXcrawlキーにおまかせすることで、コンパクトかつ、キー1つあたりの幅を大きくすることができました。
ただ、Xcrawlキーでは、Shift押し＋方向キーで範囲選択ができないことが後日頂いたコメントで発覚し、Ctrlショートカットにて範囲選択ができる方向キーで対応しました。
スキンを作っていきながら、だんだんFingerKeyBoardのスクリプト記述にも慣れてきまして、使用してくださる方々の温かいコメントで徐々に使いやすくバージョンアップしていきました。
この時、問題になっていた事としてメニューバー（画面下の方に「あ」が表示されている黒い部分）がキーボードで隠れてしまうというのがありました。
「あ」が見えないので現状の入力モードが分からないのと、メニューボタンをタッチできなかったのです。一応、スキンファイルの一部の数字を変更する事で表示する事は可能だったのですが、メニューバーの分だけキーボードが上に表示されてしまい、キーボードの画面占有率が増すのと、下段のキーを押した時にメニューボタンを押してしまうことが多々あったので、出さない状態を標準としていました。
「q」キーを長押しするとメニューが表示される
メニューボタンに関しましては、Ctrlのショートカットに「F1」「F2」キーを作ることで、メニューボタンを押したことになるような工夫をしています。
また次に紹介するスキンを作っているときに、メニューバーのON、OFFができるコマンドがあることが発覚し、この問題をちょっと強引ですが解決しています。具体的には、キーボードにメニューバーがかぶさる感じでメニューバーのON、OFFができます。ON状態で「E／J」「文字」を押せば入力モードを確認できるようになりました。
指タッチスキン 日本語入力特化版
先に紹介した指タッチスキンは、横画面は良かったのですが、縦画面にQWERTYキーを詰め込むには指タッチでは厳しいサイズになっておりました。
そんな中、QWERTY配列はあきらめて、日本語を入力するのに特化した独自の配列を考えようと思って作ったのが「指タッチスキン 日本語入力特化版」です。
指タッチスキン 日本語入力特化版
巷ではやはり片手キーボードの研究は進んでいて、使用頻度の高いキー、低いキーの使用率までも調べられていたりしています。すごいなぁとこのあたりの情報を参考にしながら夜な夜な考えました。
私はローマ字打ちに慣れている事もあり、基本はローマ字打ちができるもので、かつ日本語の母音、子音、濁点子音が感覚的に分かる配置、そして使用率が高い物は近く、低いものは遠くといった要素を考えながら制作しました。
ちょっとカラフルなのですが、母音、子音、濁点子音、システムキーをカテゴリごとに色分けする事で、入力時の視認性を高めています。
最初はキーの場所に戸惑うのですが、慣れてくると結構早打ちできるようになります。
ちなみに、横画面のキーボードは、先述した指タッチスキンと同じ物になります。
指タッチスキン QWERTY版 Ver.2
やはりQWERTYキーボードの需要を感じ、縦画面の配列をもう少し何とかできないかと考えて作ったスキンが、「指タッチスキン QWERTY版」になります。
改良を加えた指タッチスキン QWERTY版 Ver.2
指タッチスキン QWERTY版 Ver.2の縦画面
個人的には、キーの段ごとに横にずれる配置が大事だと思っておりまして、QWERTY配列のものはこの点にこだわってきました。今回もなるべくキー幅を大きくしながらも、段毎に位置をずらす設計を試行錯誤しました。「P」と「L」キーを一段ずつ下に下げ、「BS」キーをスペースの横（誤入力防止のため）に配置する事で、爪タッチだったQWERTYキーボードが、なんとか指の腹でもタッチできるものになりました。
「P」と「L」の入力頻度はそんなに高くないかと思いますので、一段ずつずれていてもさほど支障は無いように感じています。
指タッチスキンの前バージョンとの比較。配列が見直されているのが分かる
こちらは指タッチスキンとの比較になります。左が指タッチスキン、右がVer.2です。キーの幅は1列目と2列目は1.16倍、3列目は1.25倍アップさせています。
WキーとZキーの大きなの違い。上段が前バージョン、下段が最新版のVer.2
以上が制作してきたスキンになります。
皆様のお言葉に支えられながら、なんとかここまで形にしてこられたと思います。
これからも、ぼちぼちと制作を続けていければと思いますので、応援よろしくお願い致します。
スキンのインストール方法
最後に、スキンのインストール方法に関して説明させて頂きます。
全然難しいことはありません。スキンデータをダウンロードしてFingerKeyBoardのSkinsフォルダ内に上書きコピーするだけです。
(1) エクスプローラーから「Program Files」－「FingerKeyb」－「Skins」と進み、ダウンロードしたスキンデータのReadme以外のファイルを上書きコピーします。ファイルのコピーは、MicroSDカード経由でも、ActiveSync経由でも構いません。
(2) FingerKeyBoardのアプリケーションを起動します。
(3) Mainタブの一番上にある「Color Scheme」をスキンに合わせたものに切り替えます。どれに切り替えるかは、ReadMeに記載しているのでそちらをご覧ください。たとえば、WILLCOM03風スキンですと「BlackBlue」、指タッチスキンですと「FingerTouch」としています（BlackBlueはデフォルトの状態で入っているColor Schemeになります。Skin-00-scheme-BlackBlue.txtというファイルは消さないでください）。
(4) 次に、その下に表示されているスキンから、使用するスキンのみにチェックマークをし、使用しないスキンのチェックマークを外します。これは、スキンによってキーボードのサイズが異なり、誤動作を起こすためです。
(5) 最後に右上の「OK」を押せば、セットアップ完了です。メニューバーの「あ」や「_A」を押せばキーボードが起動します。
スキンはこちらのブログで公開しています。
この記事を読まれて、このスキン使ってみたいなとか、こんなスキンあったら便利なのになどがありましたらぜひアクセスしてください。
どうもありがとうございました。
