よりぶろ

アプリのUIとかについて書いてく予定

Sketch 3 Advent Calendar 2014 7日目 〜ショートカットを楽に使いこなすために電子工作をしよう〜

この記事はSketch 3 Advent Calendar 2014に参加しています。

 

7日目担当です。

 

Sketch 3の魅力はさまざまありますが、その1つに「プラグインの豊富さ」があるのではないでしょうか。

有志による活動は活発で、月イチくらいでコンスタントに新しいものが世に出ているのではと思います。しかも便利なものがたくさんあるから、ついつい全部入れちゃったりとか、しちゃうんですよね。

…で、ぶっちゃけそうなるとショートカット探すのめんどうくさくなりません?キーボードショートカットも長ったらしいものがあるし…

もちろんショートカットを自分でいじればそれは1つの解決方法なのですが、今後便利なプラグインが増えてきた場合、果たして割り当てられるのか and 覚えられるのか?という問題が出てくると思います。

 

というわけで今回は、ちょっと趣向を変えた解決方法を書きたいと思います。

 

何を使うか

Arduinoを使います!

f:id:ryo_pan:20141207021901p:plain

ハルロックおもしろいのでおすすめです。

 

今回は

Arduino Leonardo

Arduino Leonardo(+Headers)

Arduino Leonardo(+Headers)

 

 

・ブレッドボード

 

 ・ジャンプワイヤ

 

・抵抗 

抵抗キット1/4W (20種計500本入り)

抵抗キット1/4W (20種計500本入り)

 

 

・スイッチ類

個人的にはこれが使いやすかった。


ミヤマ DS-660R-C(W) プッシュSW(モーメンタリ2P・基板用小型・白)

 

をレゴブロック感覚でくっつけて作ります。

もうちょい詳しく説明すると、Arduinoというのはいわゆるマイコンで、オープンソースハードウェアと呼ばれています。用途に合わせて色んな種類のArduinoが出ているんですが、今回使うLeonardoはマウスやキーボードといった入力機器の代わりになるのが特徴です。

そしてArduinoには自分で考えたプログラムを書き込むことができます。つまり…

 

Arduino Leonardoに繋がっているボタンAを押したら『⌘ + Shift + A + 5 + Y』を入力させる

 

という感じで、1つのボタンに複雑なキーボードショートカットを割り当てればいちいちキーボードの上で変な指使いをしなくても済む!というわけです。

え?他にもっとスマートな解決方法がある?(∩゚д゚)アーアーきこえなーい

 

ここまで書いて皆さん気付かれたかもしれませんが、別にこれはSketch専用の何か、というわけではありません。もちろんPhotoshopIllustratorにも使える手段ですし、Officeのマクロを実行したり自動的に図形を描いたり、いろいろ使えます。

電子工作楽しいので、ぜひSketch以外にもご活用頂ければと思います。

 

回路図

をちゃんと書けるほど僕は精通しているわけではないので「とりあえず今はこの構成でうまく動いている」図になります。

f:id:ryo_pan:20141207020139p:plain

サンプルなのでボタンは3つ程度にしています。ね、簡単でしょ?

 

プログラムを書き込む

プログラム難しいんじゃないの?と思われるかもしれませんがそんなことはありません。

なぜならExampleページに書いてあるものの応用だけで済んでいるからです!いやー便利な世の中だ。

プログラムを書くにはIDEが必要なので、公式サイトからDLをしてください

 

書き込むプログラムは以下。たぶんコピペでいけます。

========================================

//端子番号
const int buttonPin0 = 0;
const int buttonPin1 = 1;
const int buttonPin2 = 2;
const int buttonPin3 = 3;
const int buttonPin4 = 4;
const int buttonPin5 = 5;
const int buttonPin6 = 6;

//前回のボタンの状態
int previousButtonState0 = LOW;
int previousButtonState1 = LOW;
int previousButtonState2 = LOW;
int previousButtonState3 = LOW;
int previousButtonState4 = LOW;
int previousButtonState5 = LOW;
int previousButtonState6 = LOW;

//キーボード割り当て
char cmd = KEY_LEFT_GUI;
char alt = KEY_LEFT_ALT;
char shift = KEY_LEFT_SHIFT;
char ctrl = KEY_LEFT_CTRL;
char enter = KEY_RETURN;
char up = KEY_UP_ARROW;
char down = KEY_DOWN_ARROW;
char left = KEY_LEFT_ARROW;
char right = KEY_RIGHT_ARROW;
char tab = KEY_TAB;

 

void setup() {
pinMode(buttonPin0, INPUT);
pinMode(buttonPin1, INPUT);
pinMode(buttonPin2, INPUT);
pinMode(buttonPin3, INPUT);
pinMode(buttonPin4, INPUT);
pinMode(buttonPin5, INPUT);
pinMode(buttonPin6, INPUT);
Keyboard.begin();
}

 

void loop() {
int buttonState0 = digitalRead(buttonPin0);
int buttonState1 = digitalRead(buttonPin1);
int buttonState2 = digitalRead(buttonPin2);
int buttonState3 = digitalRead(buttonPin3);
int buttonState4 = digitalRead(buttonPin4);
int buttonState5 = digitalRead(buttonPin5);
int buttonState6 = digitalRead(buttonPin6);

//1つ目のボタンを押したら100px上に移動
if ( (buttonState0 != previousButtonState0)
&& (buttonState0 == HIGH)) {
Keyboard.press(alt);
Keyboard.press(shift);
Keyboard.press(up);
delay(100);
Keyboard.releaseAll();
}

//2つ目のボタンを押したら100px下に移動
if ( (buttonState1 != previousButtonState1)
&& (buttonState1 == HIGH)) {
Keyboard.press(alt);
Keyboard.press(shift);
Keyboard.press(down);
delay(100);
Keyboard.releaseAll();
}

//3つ目のボタンを押したら100px左に移動
if ( (buttonState2 != previousButtonState2)
&& (buttonState2 == HIGH)) {
Keyboard.press(alt);
Keyboard.press(shift);
Keyboard.press(left);
delay(100);
Keyboard.releaseAll();
}

//4つ目のボタンを押したら100px右に移動
if ( (buttonState3 != previousButtonState3)
&& (buttonState3 == HIGH)) {
Keyboard.press(alt);
Keyboard.press(shift);
Keyboard.press(right);
delay(100);
Keyboard.releaseAll();
}

//5つ目のボタンを押したらリネーム
if ( (buttonState4 != previousButtonState4)
&& (buttonState4 == HIGH)) {
Keyboard.press(ctrl);
Keyboard.press(cmd);
Keyboard.press('r');
delay(100);
Keyboard.releaseAll();
}

//6つ目のボタンを押したら5個複製
if ( (buttonState5 != previousButtonState5)
&& (buttonState5 == HIGH)) {
Keyboard.press(ctrl);
Keyboard.press(cmd);
Keyboard.press(shift);
Keyboard.press(down);
Keyboard.releaseAll();
Keyboard.press('5');
Keyboard.press(tab);
Keyboard.releaseAll();
}

//7つ目のボタンを押したらSketch Notebook発動
if ( (buttonState6 != previousButtonState6)
&& (buttonState6 == HIGH)) {
Keyboard.press(cmd);
Keyboard.press(alt);
Keyboard.press(ctrl);
Keyboard.press('9');
delay(100);
Keyboard.releaseAll();
}


previousButtonState0 = buttonState0;
previousButtonState1 = buttonState1;
previousButtonState2 = buttonState2;
previousButtonState3 = buttonState3;
previousButtonState4 = buttonState4;
previousButtonState5 = buttonState5;
previousButtonState6 = buttonState6;
delay(10);
}

========================================

もっとスマートな書き方がある?アーアー(以下略

 

ちなみにプログラムを書き込む前に、アップロード先のArduinoの種類を指定しておかなければならないので、

ツール > マイコンボード > Arduino Leonardo を選択

ツール > シリアルポート > /dev/cu.usbmodemfa131

にするのを忘れないように。シリアルポートこれで合ってたっけ……

 

上記のプログラムでは、僕がよく使う

・Sketch Commandsに入ってるPosition

・Renamit

・Duplicator

・Sketch Notebook

が起動できるようにしています。

 

結果

こんな感じに動きます。

 

Sketch 3 Advent Calendar 2014用

 

ウゴイタァァァァァァ!!!!!

これさえあれば、手の届くところに置いておいて、必要になったらポチッと押すだけでOK!煩わしいショートカットもナシ!

ちゃんとした箱に収めるなら基板買って半田付けして〜とかになりますが、とりあえずはブレッドボード上でも大丈夫です。

もちろんスイッチ以外にも、例えばロータリーエンコーダなんかを繋げて制御すれば「時計回りに回すと選択したオブジェクトが100pxずつ上に移動して、反時計回りだと100pxずつ下に移動する」なんてこともできると思います。まだ自分も試行錯誤中なので、興味のある方は調べてみてはいかがでしょうか。

 

ちなみに今回の記事で一番の収穫は

猫の隣で電子工作をしてはいけない

です。

 

明日12月8日は shinya deguchi さんです!!