【IoT】ガラケー的ブラインドタッチでtwitterでつぶやけるようにしてみた。【MESH】
流行ってますね、IoT。
IoT関連の製品も最近たくさんでてますね。
色々なアイデアや記事を見るうちに、私もIoT的な何かを作りたくなりまして。
Amazon Dash Buttonをハックして遊んでいたのですが(こちら参照)、物足りなくなったので、SONYのMESHというデバイスを使って、twitterへブラインドタッチで文字入力・投稿までできるようにしてみました。
1)やりたいこと
スマホって本当に便利ですよね。
なんでもすぐに調べられるし、便利なアプリは沢山あるし、フリック入力は快適だし。
そんな便利なスマホでも、一つだけガラケーに劣っている部分があると思いません?
それは、物理キーがないからブラインドタッチができないこと。
ガラケーのボタン押す感じって、
授業中に机の下で、隣の席のやつにぽちぽちメール打ったりとか、
テレビ見ながら手癖でほぼ画面見ずに携帯ゲームやったりとか、
何とも言えない良さがあったと思いません?
でも、そのためにガラホにしようとも思えないんですよ。
画面小さいし、アプリも限られてるし。
そこで、スマホでもガラケー的なブラインド入力ができるデバイスを作ってみることに。
こんな感じのことがやりたい。
堂々とスマホを取り出すのは憚られる状況でも、ポケットの中でボタンをぽちぽちして、周りの人に気づかれないようにツイート出来たら、素敵じゃないです?
2)MESHとは
上のイメージにも写っているボタンですが、MESHという、
専用のスマホ用のアプリが用意されていて、タグ同士をつなぐだけでプログラム書かなくても簡単にIoT的なことができるし、自分でプログラム書いて、タグからの入力処理/出力処理を色々カスタマイズすることもできます。
詳細は公式サイトへ。
LEDタグやら動きタグなど、色々な種類のタグがありますが、
今回使ったのは「ボタンタグ」1個だけです。
デバイスのサイズはAmazon Dash Buttonより一回り小さいくらい。
縦が10円玉2つ分、横が10円玉1つ分です。(重ねてみたらピタリでした。
3)作った構成とプログラム
こんな感じの構成にしました。
左側の「MESH」と書いたグレーバックのところは、MESHのアプリ画面です。
(文字は編集)
MESHアプリとSDKを使って作成しました。言語はJavaScriptです。
右側、heroku上の「Tweetアプリ」はJavaで、tweet4jというラッパを使いました。
もっともっと簡単な構成で実現できるんだろうな・・・という感じがプンプンしますが、なんかこうなりました。
3-1)入力部分の設計
ここが肝ですね。
なんせ押すボタンが1個しかないので、これでどうやって文字を打つか。
まずMESHボタンタグでの入力を考える前に、ガラケーの入力方法を整理します。
ガラケーで「お」と入力したい場合は「1」キーを5回押しますね。
「あ」⇛「い」⇛「う」⇛「え」⇛「お」と。
同様に「く」が打ちたければ「2」キーを3回、「ん」なら「0」を3回ですね。
また、文字を打っている途中で「右キーを押す」または「別の入力キーを押す」または「一定の時間入力なし」なんかで入力位置が次の文字位置へ進む仕様でしたね。懐かしい。
つまり、
・子音方向 ⇛押すボタンの種類で決める。
・母音方向 ⇛ボタンを連続で押した回数で選ぶ。
・入力位置移動 ⇛「右キーを押す」「別の入力キーを押す」「未入力で時間経過」
というのが基本ルールですね。
MESHでも基本はこれと同じ方法で入力したい。という思想です。
都合よく、MESHのボタンタグは3種類の入力を受け付けられます。
①1回押し②2回連続押し③長押し
の3つ。
これをそれぞれ割り当てることにしました。
・子音方向 ⇛1回押し
・母音方向 ⇛2回連続押し
・入力位置移動 ⇛長押し
※ちなみに「ぽちぽち」と間を空けずに押すと「2回連続」、
「ぽち(うん)ぽち」と1秒弱くらいの間隔を空けて押すと「1回押し」×2
と認識されます。
上記を実装するために、まず50音と配列内のインデックスの対応表を作成しました。
配列のインデックスを「1回押す」「2回連続押す」ことで縦横に動かすことにします。
右下の小さい数字が一次元配列内のインデックスです。
・初期値は0
・1回押すとインデックス+1
・2回連続押すとインデックス+10
を基本ルールとして、擬似的に二次元配列的に動かしています。
「も」と打つときは、
「1回押し×5回(5)」+「2回連続×6回(60)」と押してもいいし、
「1回押し×65回(65)」と押してもいいと。
※書いてて思いましたが、二次元配列そのものを使ったほうが断然
わかりやすかったですね。。なんで作ってるときに考えられなかったのか。
二次元だと「左」と「下」にしか進めないけど、一次元だと「左上」にも進める
というのが一応一次元配列で書く利点でしょうか。
普通の50音表は性質上横長になりますが、正方形に近いほうがボタンを押す
総回数を抑えられるので、濁音などは下側に配置しました。
グレーアウトしたのは未使用欄で、xを入れてます。
ちなみに、
・打てる文字種はひらがなのみ。
・文字削除はできない。
・入力位置を前に戻すことはできない。
作りとなってます。仕様です。
※気合があれば、このあたりもできなくはなさそうなので、
その内気が向いたら実装するかもしれません。
3-2)入力部分の実装
さて実装です。
MESHにはSDKが用意されていて、ブラウザ上でSDKを使ってタグを作成できます。
基本はJavaScriptです。
公式のリファレンスが充実してるので、それを見ながらちょいちょい書きました。リファレンスは日本語もあるのがありがたいです。
入力用としては作ったタグは関数1つだけです。
その中に下記の入力/出力/変数を定義します。
・Input Connectorを3つ。
・Output Connectorを1つ。
・Functionの設定パラメータとしてpropertiesに4つの変数。
※本当は動きとしては4つも設定する必要ないです。この方がやりやすかったので。
そして、中身のプログラムを書いていきます。
MESHには4種類のメソッドがあります。
メソッド 概要 Initialize Functionの初期化時に呼ばれます。
内部変数の確保やスケジューラーの設定といった、初期化処理が必要な場合に実装します。Receive 入力コネクタからメッセージを受け取った際に呼ばれます。入力コネクタが複数あり、どれから受け取ったか区別したい場合に実装します。 Execute Function実行時に呼ばれます。
通常、手続きはこのメソッドに記述します。Result Executeメソッドが完了し、出力コネクタから次のタグにメッセージを送信する際に呼ばれます。
出力コネクタが複数あり、どのコネクタからメッセージを出力するかを選びたい場合に実装します。
デフォルトでは全ての出力コネクタから出力されます。※公式リファレンスより
今回は
・Receive
・Execute
の2つを書きます。
・Recieve
この中で、入力内容によって配列内のインデックスと、文字送りのフラグを操作します。
if ( index == 0 ) { //1番目のコネクタから入力 properties.Num += 1; //配列内インデックス+1 properties.Mojiokuri =0; //文字送りフラグリセット } if ( index == 1 ) { //2番目のコネクタから入力 if(properties.Num==0){ properties.Num += 11; //初回だけ「か」へいくために配列内インデックス+11 }else{ properties.Num += 10; //配列内インデックス+10 } properties.Mojiokuri =0; //文字送りフラグリセット } if ( index == 2) { //3番目のコネクタから入力 properties.Mojiokuri += 1; //文字送りフラグ+1 }
・Execute
ここに本文を書いていきます。
ここまでで決めた文字入力に加えて、「ツイートする」ために次のタグへデータを渡す処理が必要ですが、ボタンタグの3種類の入力は使い切ってしまったので「ツイートする」用に割り当てる入力がありません。
そこで、Executeの中で「2回連続文字送り(=長押し)を受け取るとツイートする」ように書きました。
var msgVal = {}; //受け渡し用の変数。 log("文字数=="+properties.Mojisu); //現在の文字数 if(properties.Mojiokuri >= 2 || properties.Mojisu>= 129){ //2連続長押しor文字数目一杯になったらツイートする properties.Mojiokuri = 0; //文字送りのカウントをリセット log("tweetに進む"); msgVal.Text = properties.Text; //受け渡し用に編集中のテキストを1回別の変数に格納 properties.Text =""; //編集中のテキストを次回に向けてリセット properties.Mojisu=0; //カウンタを初期化 return { messageValues : msgVal, //データを渡す resultType : "continue", //次のメソッド(ここでは次のタグ)を呼ぶ } } else if(properties.Num >=100){ //定義範囲を超えていたら文字の配列内のインデックスを初期化 properties.Num =0; log("定義範囲を超えたので先頭に戻る"); return { resultType : "stop" } //文字入力の途中なので、処理ここまで } //次に入力する文字を選択 else if(properties.Num != 0){ //配列インデックスが0じゃなければ、文字入力に進む。 var array = ['x','あ','い','う','え','お','ぁ','ぃ','ぅ','ぇ','ぉ','か','き','く','け','こ','が','ぎ','ぐ','げ','ご','さ','し','す','せ','そ','ざ','じ','ず','ぜ','ぞ', 'た','ち','つ','て','と','だ','ぢ','づ','で','ど','な','に','ぬ','ね','の','?','!','っ',';','ー','は','ひ','ふ','へ','ほ','ば','び','ぶ','べ','ぼ','ま','み','む','め','も', 'ぱ','ぴ','ぷ','ぺ','ぽ','や','「','ゆ','」','よ','ゃ','x','ゅ','x','ょ','ら','り','る','れ','ろ','1','2','3','4','5','わ','を','ん','、','。','6','7','8','9','x']; //配列元データ var value = array[properties.Num]; //インデックスの位置の文字を引っ張る。 log( "[" + properties.Num + "]番目の文字は「" +value+"」です。" ); if(properties.Mojiokuri == 1){ //文字送りフラグが1の時、一文字すすめる。 properties.Text = properties.Text + value; log( "properties.Textの値は「" +properties.Text+"」です。" ); log( "一文字進めました。" ); properties.Num =0; //一文字進んだら配列内のkeyを初期化 properties.Mojisu++; //一文字進んだので文字数カウンタプラス } return { resultType : "stop" } //文字入力の途中なので、処理はここまで }
文字数制限を129文字で指定してるのは、後で付与するハッシュタグが11文字あるから、ハッシュタグ込みで140文字ということで。
3-3)受渡部分
本当は自分で書く必要ないんじゃないかと思ってた(今でも半分思ってる)部分です。
ツイッターに投稿するタグはもともとあるし、IFTTTにもツイッター連携のレシピはあるのですが、自由な文字入力を受けて、それをツイッターに投稿する方法がどうしてもわからず、自分で作りました。
しかも、私がJavaScriptを使いこなせないので、自作のタグから直接ツイッターに投稿する方法もわからず、一回heroku上のJavaアプリにpostして、そこから投稿するという二度手間なつくり。。
ということで、受渡部分はデータを横流しするだけです。
ほんの10行程度のプログラムなので、入力部分と合わせてもよかったんですけど、わけてつくりました。
・Execute
var data = { "name" : messageValues.Text //変数名「name」に「messageValues.Text」を入れる。 }; log("「"+messageValues.Text+"」とつぶやきました。"); ajax({ url : "https://むにゃむにゃ", //heroku上のアプリのアドレス type : "post", //postかget data : data //受け渡すデータ } );
3-4)出力部分
受け取った文字にハッシュタグをつけて、Twitterの認証+投稿する部分ですね。
twitter4jというやつを使うと、超簡単にできました。
こちらを参考にさせていただきました。
ほぼそのまんまなので、コードは割愛。
twitter Developerに登録して、Access Tokenなどを取得する必要がありますが、本当に10分くらいで出来ました。
で、作ったアプリをherokuにデプロイすれば完成!
4)完成品
こういうことです。
頭のなかで50音対応表を思い浮かべながら打ちます。
「もぐもぐ」とつぶやくのにかかった時間は「1分2秒」でした。
ちなみにスマホでフリック入力の場合は、アプリ開いてからつぶやくまで「7秒」でした。(入力だけなら3秒)
いや、でもブラインドタッチは時間じゃないから。プライスレスだから。
機能としては以上ですが、一応デバック用にログも吐かせています。
MESHのアプリ上から、確認できます。
ということで、こんな感じでMESHで遊んでみました。
IoT楽しい!
今回はもっとも単純なボタンタグだけなので、他のタグも使ってみたいです。
動きタグ使ってみたいなー。
大分長くなったので、細かい話はまた回を分けて書きたいと思います。
ではまた!