おあそび ぷろぐらみんぐ 日記

プログラミング初心者のおあそびと勉強の記録です。

【IoT】ガラケー的ブラインドタッチでtwitterでつぶやけるようにしてみた。【MESH】

流行ってますね、IoT。

IoT関連の製品も最近たくさんでてますね。

色々なアイデアや記事を見るうちに、私もIoT的な何かを作りたくなりまして。

Amazon Dash Buttonをハックして遊んでいたのですが(こちら参照)、物足りなくなったので、SONYのMESHというデバイスを使って、twitterへブラインドタッチで文字入力・投稿までできるようにしてみました。

 

 

1)やりたいこと

スマホって本当に便利ですよね。

なんでもすぐに調べられるし、便利なアプリは沢山あるし、フリック入力は快適だし。

そんな便利なスマホでも、一つだけガラケーに劣っている部分があると思いません?

それは、物理キーがないからブラインドタッチができないこと。

 

ガラケーのボタン押す感じって、

授業中に机の下で、隣の席のやつにぽちぽちメール打ったりとか、

テレビ見ながら手癖でほぼ画面見ずに携帯ゲームやったりとか、

何とも言えない良さがあったと思いません?

 

でも、そのためにガラホにしようとも思えないんですよ。

画面小さいし、アプリも限られてるし。

そこで、スマホでもガラケー的なブラインド入力ができるデバイスを作ってみることに。

 

こんな感じのことがやりたい。

f:id:beethovenmendelssohn:20170504022727j:plain

堂々とスマホを取り出すのは憚られる状況でも、ポケットの中でボタンをぽちぽちして、周りの人に気づかれないようにツイート出来たら、素敵じゃないです?

 

2)MESHとは

上のイメージにも写っているボタンですが、MESHという、

SONYからでてる、簡単に使えるIoTデバイスです。

 

スマホとMESHはBluetoothで接続。

専用のスマホ用のアプリが用意されていて、タグ同士をつなぐだけでプログラム書かなくても簡単にIoT的なことができるし、自分でプログラム書いて、タグからの入力処理/出力処理を色々カスタマイズすることもできます。

詳細は公式サイトへ。

 

LEDタグやら動きタグなど、色々な種類のタグがありますが、

今回使ったのは「ボタンタグ」1個だけです。

 

バイスのサイズはAmazon Dash Buttonより一回り小さいくらい。

縦が10円玉2つ分、横が10円玉1つ分です。(重ねてみたらピタリでした。

f:id:beethovenmendelssohn:20170504023633p:plain

 

3)作った構成とプログラム

こんな感じの構成にしました。

f:id:beethovenmendelssohn:20170504023750p:plain

左側の「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音と配列内のインデックスの対応表を作成しました。

f:id:beethovenmendelssohn:20170504072255p:plain

配列のインデックスを「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つも設定する必要ないです。この方がやりやすかったので。

f:id:beethovenmendelssohn:20170504040955p:plain

 

そして、中身のプログラムを書いていきます。

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というやつを使うと、超簡単にできました。

 

こちらを参考にさせていただきました。

masatoshitada.hatenadiary.jp

 

ほぼそのまんまなので、コードは割愛。

twitter Developerに登録して、Access Tokenなどを取得する必要がありますが、本当に10分くらいで出来ました。

で、作ったアプリをherokuにデプロイすれば完成!

 

4)完成品

こういうことです。

f:id:beethovenmendelssohn:20170504053349p:plain

頭のなかで50音対応表を思い浮かべながら打ちます。

 「もぐもぐ」とつぶやくのにかかった時間は「1分2秒」でした。

ちなみにスマホフリック入力の場合は、アプリ開いてからつぶやくまで「7秒」でした。(入力だけなら3秒)

いや、でもブラインドタッチは時間じゃないから。プライスレスだから。 

 

機能としては以上ですが、一応デバック用にログも吐かせています。

MESHのアプリ上から、確認できます。

f:id:beethovenmendelssohn:20170504060940p:plain

  

ということで、こんな感じでMESHで遊んでみました。

IoT楽しい!

今回はもっとも単純なボタンタグだけなので、他のタグも使ってみたいです。

動きタグ使ってみたいなー。

 

大分長くなったので、細かい話はまた回を分けて書きたいと思います。

ではまた!