この記事は ACCESS Advent Calendar 2015 16日目の記事です。
概要
js/nodeをほぼ触ったことがない人がリモートワークでAndroidガラホ（feature phone）をテストするために STF を改造する話です。
具体的には、ガラホに特徴的な物理キー（十字キーの左右に4つくらいついてるメニューボタンとか何だとか）を入力できるように、STFのUIに追加します。
環境
- MacbookPro (OSX 10.9.5/10.10.5)
- homebrew, ADB, npm インストール済み
- USBハブ, USB-microUSBケーブル
- Android端末
準備
Github のRequirementsを見て、
brew install rethinkdb graphicsmagick zeromq protobuf yasm pkg-config
する。
標準のSTFを使いたいだけなら
npm install -g stf
でOK。
今回はボタンを追加したかったので、git cloneした。
改造
ここに追加することにする。
ボタンを増やしたときに見た目がイマイチとかは考慮しない。
編集するのは以下のファイル。
- res/app/control-panes/advanced/input/input.jade
- res/common/lang/translations/stf.ja.json
input.jade
(前略)
button(tooltip='{{ "F2" | translate }}', ng-click='press("f2")').btn.btn-primary.btn-xs
i.fa SK2
(後略)
tooltip
ボタンにカーソルを乗せたときに出てくる吹き出しに何を出すか。translateは後述のjsonに日本語用語を登録しておくと言語設定によって切り替える…とかだと思われる。
なので | translate 部分はなくてもOK。
ng-click='press()'
ボタンをクリックしたときに何をするかを書くところ（…多分）。
http://developer.android.com/reference/android/view/KeyEvent.html これでKeyCodeを確認して、KEYCODE_HOGEだったら"hoge"と指定する。
※ npm install した後なら /node_modules/adbkit/lib/adb/keycode.js があって、ずらっとKeyCodeが書いてあるのだが、もしかするとここに記載があるものしか使えないのかもしれない。
i.fa
ボタンの見た目を指定するところ。アイコン（favicon？）がある場合は i.fa.fa-camera とかなってたけど、文字列でもいけるようなのでそうしました。
D-Pad
master では 2015/12現在、D-Padのボタン（上記画像の水色のボタン群）が非表示になっている。
//h6 D-pad
//table.special-keys-dpad-buttons
ここの"//"を削除すると表示されるようになる。
stf.ja.json
(前略) "F2":"えふつー", (後略)
前述のtooltipで英語/日本語を切り替えたいときにjsonに追加する。
（今回はあまり必要なかったですね）
改行がないため、originで更新された時にコンフリクトする。どうしてもという時以外はいじらないほうがいいかも。
ビルド
Github README Buildingを見ながら
npm install
npm link
これだけ。
※自分の場合npmとnodeの相性が悪かったのか（バージョンは古くなかったのだが…）、一度失敗してnpm/nodeを再インストールしたりした。
起動
Github README Runningを見ながら
手元で試すなら端末をつないだ状態で
rethinkdb
stf local #別タブ（別ウィンドウ）で実行
ブラウザから http://localhost:7100 にアクセスすればOK。
他のPCからも使えるようにするのは
stf local --public-ip <your_internal_network_ip_here>
ですが、これは環境によりそうなので省略。
（OSXだったら[System Preferences]>[Sharing]>[Computer Name]とか？）
終わりに・感想
こんな感じになります。
適当な改造だったけど動いてよかったです！（多分よくない）
心残り
- 実は簡単にボタンを足せるかもしれない
- もうちょっと見た目をどうにかしたい
明日は @kumabook さんの「簡単なEmacs拡張を作ってみたよ」です！