この記事は 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

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

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拡張を作ってみたよ」です！