メリークリスま〜ス！（そろそろいいだろ）

勢いで「1円にもならない無駄な技術」という謎のAdvent Calendarに登録してしまいましたので、3つほど「入力を面白く拡張」（するかも？）というテーマで小ネタを紹介してお茶を濁そうと思います。

さて！今回紹介させていただくのは下記の３つです。

【初級編】必携！「延長ケーブル付きスイッチ」のつくりかた
【中級編】爽快！「連射機能つきテキスト入力フォーム」のつくりかた
【上級編】押してほんわか「やわらかいぼたん」のつくりかた

それでは始めます！

1.【初級編】必携！「延長ケーブル付きスイッチ」のつくりかた

モチベーション

あれですよ。押したいところにスイッチがないとイラッ！と来ますよね？
ユーザーとはワガママなもので、本来押すべきところを押さなかったのは、自分のせいなのに、すぐに

なぜスイッチは、決まった場所についているのか！？

なんて考えてしまうんですよ。酷い人になると。

ツキユビしちまったぞ！ゴゥラァ！

なんて因縁をつけられかねません。

これからのUI設計は、こうした乱暴者のニーズにも応えなければならないんですね。

そこで今回は、

スイッチをもっと自由に！

という目標達成のため、簡単に実践できる「延長ケーブル付きスイッチ」を作ってみたいと思います。

うぉを！カッコイイ！！！（強引）
早速作ってみましょう！！

用意するもの

完成品見れば材料がすぐ判る！
というのが本品の特徴なのですが、いちおう書いておきます。

ユニバーサル基板（ちっちゃくて安いので良い）
タクトスイッチ（じゃなくてもいい。スイッチならなんでもいいけど基板に刺さるヤツを選ぼう）
ビニールで覆われた電線（2本まとまったヤツ。なんて言うの？コレ。無かったら2本まとまってなくても良い）
ピンヘッダかソケットか。つなげるものによって選んでね！

予想通り！
これに、あとはハンダゴテとハンダ少々。
電線なんて歯で噛み切れるぜ！
という男前の人以外は、ニッパとかペンチなどを一応用意しましょう。

つくりかた

こんな簡単そうなモノでも、これを完成させるには、電気的な知識が必要ですよ！

というわけで、念のため回路図を参考にしてくださいね。
（万が一出来なかったときのショック大きいですよw）

とはいえ、正直、もう、どう作っても完成しそうなので、あまり詳細な手順は書きません。

基板のうえにスイッチを刺す
刺したスイッチの足に、銅線の皮をむいて、ハンダゴテでひっつける
反対側の銅線の皮もむいて、ハンダゴテでヘッダピンorソケットとひっつける

これで完成！簡単でしたね！

使い方

こういった単純なモノは、使い方を考えるのが楽しいのですが、さすがにそれではあんまりなので、一例を書いておきます。

今回、写真のものは、端子側をピンソケットで作りました。
これに刺さるのはピンヘッダです。

というわけで、GPIOがピンヘッダになっている
Raspberry Piが良いのではないでしょうか。

RPi.GPIO.setupメソッドについてもう少し (まめりうむさん)

を参考に使ってみてください〜。

ブレッドボードで組むより直接刺さるので便利ですよ〜！
スイッチだけですけどw

2.【中級編】爽快！「連射機能つきテキスト入力フォーム」のつくりかた

さて、1つ目がなぜか工作ネタだったので、2つ目はプログラムネタです！

モチベーション

Webサイトのテキスト入力フォームってつまんないですよね。。。

たぶん、通販で名前や住所、カードナンバーなど、大事な情報を入力させられるからですね。
あと、アンケートサイトでチェックボックスのページが続いたあと、真っ白で大きなテキスト入力フォームで「ご意見を書いてください（必須）」とか書かれてると、それだけでやめたくなりますよね。

まぁ、テキスト入力フォームってそういうイメージがあるわけです。超ネガティブなね。
とにかく面倒！

妙に慎重にコトを運ばなければならないケースなど、楽しくないケースでばかりで使わされてる印象があります。

せっかくHTML5でフォーム周りの機能を強化しても

もうテキスト入力が出てくるだけでブラウザのWindowを閉じたくなる
結局HTML5もその程度か。Flashの方が良かったぞ！

と、ユーザーさんから意味のわからない因縁をつけられかねません。

HTML5をちゃんと使ってもらうためにも、もっとテキスト入力は爽快でないと！

爽快といえば連射！！！！！！！

というわけで、フォームを爽快に！連射機能をつけましょう！という企画です。

残念ながら

HTML5になっても、

<input type='text' rapidfire='true'>

などというナイスな書き方はサポートされていません。

無いので作ろう！

というわけで、作ってみることにします。

<!DOCTYPE HTML>
<html>
<head>
<title>rapidfire sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="jquery-1.11.0.min.js"></script>
<body>
<div id="inputwrap">
  <input type='text' id="inp">
  <input type="button" id="rap" value="連射なし">
</div>
<div id="disp"></div>
<script>
var rapidfire = false;
$("#inp").keydown(function(ev){
  if(ev.keyCode == 13){
    var text = $(this).val();
    if(!rapidfire){
      $(this).val("");
    }
    if(text){
      // textを使った処理
      $("#disp").prepend("<br>");
      $("#disp").prepend(text);
    }
  }
});

$("#rap").click(function(ev){
  rapidfire = rapidfire ? false : true;
  if(rapidfire){
    $(this).val("連射あり");
  }else{
    $(this).val("連射なし");
  }
});
</script>
</body>
</html>

まぁ、ちょっと手抜きな感じですが、一応できました。
今風に

じゃ、Web Componentsで！

とやれれば良かったのですが、残念ながら、まだ勉強不足ですので、ベタな方法でやらせてもらいました。

Web Components版、誰か教えてくださいね！

解説

今回は、リターンキーを押すと入力した文字列を確定させて何かに利用する、という風にしました。
「連射なし」のときは、1回確定するとテキストボックスの中の文字が消えて、もう一度入力する必要があります。これが連射の無いごく普通のテキスト入力ボックスです。

早速、ボタンを押して「連射あり」にしてみましょう。

リターンキーを押して確定させてもテキストボックスの中の文字が消えなくなります。

そして、

「タターン！！！」とリターンキーを連打してみてください。

どうですか！？

もうリターンキーを1回だけ押すのでは満足できませんよね？
というわけで、

遊べるサンプル

も作りましたので、ぜひリターンキー押しまくってください。

こちらはデフォルトで連射モードです。

上記サンプルの作り方が気になる方は、

簡単アニメーション！Pixi.jsを触ってみる！（6）インタラクションに挑戦！(のつづき)

でも見てくださいな！

※注意！
上記サンプルは調子に乗ってリターンキーを叩きまくるものではあるのですが、やりすぎるとブラウザが落ちます。ええ。ブラウザが落ちるまでやれるというアホアプリです。
ブラウザが落ちたことにより発生したいかなる結果・不具合も保証しませんのでほどほどにね！

3.【上級編】押してほんわか「やわらかいぼたん」のつくりかた

いよいよ最後！
最後は難しいですよ！いろんな意味で！

だって、これ書いてる時点で出来上がってないからね！
作りながら書くからね！

モチベーション

最初にやった「延長ケーブル付きスイッチ」でね、スイッチはどこにでも置けるようになったわけですよ。
スイッチは自由を手に入れた！

これで、ほとんどの人は満足するはずなんですが、

もうね、最近タッチパネルしか触ってないんでね。
固いって、それだけでね、疲れちゃうんだよね。
骨折とかしちゃったらね。
責任とってくれんの？

とか言う人が居るかもしれないわけですよ。

じゃ、柔らかきゃいいんだろ。

ということでね。
さっさと作っちゃいましょう。

集めるもの

まず、下記を集めてくださいね。

テープ。幅広の推奨
消しゴム
ピンヘッダ
ビニールで覆われた電線（1.【初級編】で使ったやつと同じので良い）
銅板（薄くて小さいので良い。ホームセンターで一番安いの探そう）
電卓（壊します。安いの。でも、できるだけ大きいのがオススメ！）

じゃ、作ってみましょう。

つくりかた

回路図的には、「延長ケーブル付きスイッチ」と同じなんで省略します。
今回は、作り方メインで。

今回はArduinoに刺したいので、ピンヘッダの方を使います。
同じじゃ面白くないですからね。

というわけで、最初にピンヘッダと電線をハンダづけします。

ヘタですね。でも、動けばいいのですw

次に、銅板を小さく2つ切り出します。1cm×1.5mm くらいのを2つ。
薄い銅板は、はさみで切れます。
これに、さっきの銅線の反対側をハンダ付けします。

次に、消しごムに、この銅板部分をテープで止めます。
銅板の中央部分は8mmくらい何も貼らないで出すようにして、銅板の端と反対側の銅線側をテープで止めます。

次に電卓をバラして、ボタンの裏のシリコンシートをボタン1個分だけ四角く切り取ります。
（シリコンシート以外の部品は使いません。私は豪快に破棄！w）

これは、買う電卓により大きさがかなり変わります。
今回、大きな電卓をおすすめしたのには訳があり、小さな電卓だとシリコンシートの変わりに、電卓のキートップの裏に直接黒い電気を通すゴムがひっついているものもあります。
それでも、いいといえばいいのですが、黒いゴムの部分が小さいと、位置決めがその分難しくなります。
できるだけ大きなモノの方が使いやすいです。

※下のシートはキートップと一体型の電卓。小型の電卓にはこのタイプが多い。電卓を買うとき、ボタンがゴムのものは要注意。キートップがプラスチックタイプのものだと一体型じゃない可能性が高い。

というわけで、シリコンシートを切り出したものを、さきほどの消しゴムのうえに（2つの銅板のテープで貼ってない表に出ている部分にシリコンシートの黒い部分が「ブリッジする」ように）置きます。
そして、セロテープでシリコンシートの平べったい部分をとめます。（ゴムのキートップの部分には巻かない。シリコンは接着しにくいので、セロテープで消しゴムに「挟み込む」ようにして固定）

うまくいくと、完成です！

おつかれさまでした！

使ってみよう！

ようやく出来たので、使ってみます。
Arduinoで使ってみることにします。

Arduinoには下記スケッチを書き込みます。

switch.ino

void setup() {
  pinMode(8,INPUT_PULLUP);
  pinMode(13,OUTPUT);
}

int oldValue = HIGH;

void loop() {
  int value = digitalRead(8);
  if(value != oldValue){
    if(value == LOW){
      digitalWrite(13,HIGH);
    }else{
      digitalWrite(13,LOW);
    }
  }
  oldValue = value;  
  delay(100);
}

「やわらかいぼたん」は、Arduinoと写真のように繋ぎます。

ボタンの端子の一方を Arduinoの8番PINへ
ボタンの端子のもう一方をArduinoのGNDへ
LEDの+側を Ardionoの13番PINへ
LEDの-側を ArduinoのGNDへ ※本当は抵抗入れた方が良い

やわらかいので、上にモノを載せてもこの通り！

また来年お会いしましょ〜！

それでは、みなさん、よいクリスマ〜すを！

【1円にもならない無駄な技術】「入力を面白く拡張！」する3つの小技

1.【初級編】必携！「延長ケーブル付きスイッチ」のつくりかた

モチベーション

用意するもの

つくりかた

使い方

2.【中級編】爽快！「連射機能つきテキスト入力フォーム」のつくりかた

モチベーション

残念ながら

無いので作ろう！

解説

3.【上級編】押してほんわか「やわらかいぼたん」のつくりかた

モチベーション

集めるもの

つくりかた

使ってみよう！

また来年お会いしましょ〜！