Desk

文字とともに力を表現する装置「パワーキーボード」を作った

これは第三回ウェブメディアびっくりセールにガジェット「パワーキーボード」を出展したレポートです。もう二年前くらいでしょうか、ずいぶんと時間が経ってしまいました。この装置はエディタとセットで、叩いた強さをフォントサイズに適用するものです。GIFをご覧ください。

Powerkeyboard demo

叩いた強さで文字の大きさが変化する

文字入力におけるピアノのような発明、それがパワーキーボード

コンピュータ上の文字は均質的なものが多い中、より豊かなインターネット文化を築くにはより簡単により豊かな入力ができるようになる必要があると考えたのが作るきっかけでした。表現力豊かな入力は、表現の幅を広げて豊かな創作物、ひいては豊かな社会に繋がるはずです。絵文字やスタンプなどは、この豊かな表現を模索する一つの形ではあるでしょうが、それ以前に既存の文字の表現力を高めるべきだろうと僕は考えています。少しわかりづらい例えかもしれませんが、音の強弱で感情を表現できるピアノがチェンバロにとって代わっていたようなことが、入力装置でも起きるはずです。この思想のもとの第一段の作品がパワーキーボードです。

Hiphopdream

文字の大きさ・フォントの自由度だけでも表現力は格段に向上する。ZEEBRA / Street Dreamsのサビ。

WordPress等のCMSやMicrosoft Word等で利用されているWYSIWYGエディタでも文字の装飾こそできますが、細かく調整していくのは相当面倒です。声を大きくしたり小さくしたりするのと同じくらいの感覚で、文字の大きさやフォントなどが変わらないと広く一般的に利用されるようにはなり得ません。

実際に何から始めるかについてはImage Clubのメンバーに意見をもらいながら右往左往しましたが、まずは「打鍵力と文字の大きさ」からやってみようということでパワーキーボードを作ることにしました。正確には、打つ速度によって文字の大きさが変化するLINE風チャットアプリのプロトタイプは勝手に作っていましたのですが、ボツにしました。

迷走していたので、文字がなぜか上に流れて消えていく仕様になっていた。気がつけば無駄にWebsocketを利用して実際に複数人でチャットできる実装になってしまっていた。

バサバサ要件を切り捨てて実装していく

概ねやりたいことは固まり、パワーキーボードはウェブメディアびっくりセールに出すということもあったので、まずは力を表現した文字をHTMLで出力できるような仕組みを考えました。ウェブのライターさんでも、文字の大きさに抑揚をつけた記事を書かれる方がいらっしゃるのですが、その編集作業をだいぶ楽にする可能性を秘めているのです。

いずれはウェブに限らず汎用的なデバイスであって欲しいですが、スキマ時間で活動するイメージクラブなので、ここはわかりやすさと実装コストを優先しました。

パワーを込めて殴られるであろう装置は、USBのフットペダルを改造して作りました。足で利用する想定のデバイスであれば、手で叩いてもそうそう壊れないだろうという安心感もあります。このデバイル部分の実装はほぼあらゆる工作の得意なメンバーの鉄塔さんがやってくれました。見栄えを良くするためにフットペダルの上に3Dプリントでエンターキー風のカバーを作ったのも、鉄塔さんの仕事です。この時点で受け取る側の実装(僕のパート)はほとんどできていなかったのですが、一気にそれっぽくなっています。

Sekkei

高田さんの作った3Dモデル

Real

実際の作品とその中身。フットペダルを改造して作られている

叩いた強さを数値でもらい、それをJavaScriptで受け取り、ブラウザ上でCSSを添加し画面に出す。

シンプルですね。arduinoとReactJSで作っています。

元々は書きながら単語ごとに大きさが変わったりするのが良いかと考えていたのですが、日本語入力では予測変換をかます必要があるため、非常にややこしい実装が必要でした。そこは趣旨と離れる話であると、本質的なユーザー体験を素早く提供することを優先し選択したテキストの大きさを変えるような実装にしました。控えめに言って大きな妥協ですが、かのマークザッカーバーグの名言とされる「Done is better than perfect 」を呪文のように唱えると、不思議と心が軽くなり、自分を赦すことができました。

イベント当日。追い詰められて1万円のマウスパッドを買う

当日は開場1時間前くらいに到着し、準備をしていました。順調に準備が進んでいるかと思いきや、大きな問題に直面しました。どうしてそうなったか理由は忘れましたが、Image Clubのテーブルには「ブラジルにつながっている穴」で大量に購入し余っていた人工芝を敷いていたのです。

Event

イベントの様子。image clubでは3つの作品を展示していた。一番左の半妖怪が筆者。

そのため、事実上テーブルの上でマウスが使えなくなっていました。人工芝が敷いてあるとピースフルな雰囲気になり見栄えはいいのですが、マウスを使って操作する想定だったパワーキーボードには致命的な環境です。

人工芝を敷かないということも考えましたが、せっかくの平和な雰囲気をなくし、殺伐とさせるわけにはいきません(よりによって会場の正面入口入ってすぐの一番目立つ場所でした!)。この未曾有のピンチに、鉄塔さんが急ぎマウスパッドを調達するために会場付近のお店を探し回ってくれました。

結果、近くの蔦屋に一つだけマウスパッドが売っていたという奇跡が起きたのですが、その唯一のマウスパッドが約一万円もするという信じ難い奇跡が重なりました。 百均のマウスパッドを普段使っていた自分からすると、100倍の値段のマウスパッドを買うことは簡単な決断ではありません。しかしながら、迫る開場時間のプレッシャーには勝てるはずもなく、何度も「本当に大丈夫なんですか?」と確認されながらも、購入してもらいました。

Beautiful mousepad

異次元の美しさを誇るマウスパッド。画像は公式ページのスクショ(http://avanwood.storio.co.jp/product/mousepad.html)

普段トラックボールを利用しているため、マウスは利用しておらず欲しい人がいれば譲ります。優雅な曲線と木のぬくもりのある弾力であなたの生産性をサポートしてくれます。

そんなこんなで開場し、いろいろな方に使ってもらいましたが、ほとんどの方がパンチングマシーンと勘違いされているようでした。「これ強く叩いても大丈夫なんですか?」と聞かれ、思い切り叩いて「痛ってー!」となるパターンが何回かありました。イベントでちょっと触ることしかできないという都合上、「これによって表現が、、、!」という話をしてもピンときてもらえなかったのは仕方がないのかもしれませんが、もしかすると 皆できることなら大きな文字を残したいという原始的な欲求を抱えているのかもしれません。

Event2

イベント当日の様子。叩いて文字が大きくなったところ。

ウェブメディアびっくりセール最強のパワー

パンチングマシーンと化したパワーキーボードですが、当日一番力を込めて叩いていたのは若い女性の方で、文字は「彼氏欲しい」でした。屈強なおじさんよりも強い力が込められていたので、覚悟が違ったと思っています。手が痛くなさそうだったのを見ると、格闘技でもやっている方だったのでしょうか。おしとやかな女性のほうがモテそうだと思われるかもしれませんが、冷静に考えてみてください。 見知らぬ人の展示している見知らぬガジェットを、机ごと破壊するんじゃないかくらいの力で思いきり殴れる女性も十分魅力的ではないでしょうか。 今となっては顔も覚えていませんが、素敵な出会いがあることを願っています。

おわり

本来の意図が伝わってなさそうな感もあったパワーキーボードですが、けっこうな数の人がパワーキーボードを叩いてくれて、

「もう少し柔らかい素材にしたほうが手が痛くない」

「おもしろい!」

「打ちながら大きさ変わったほうが良い」

「これは商品化すれば売れる」

「へぇ」

などいろんな感想をもらいました。総じてイベントに出してよかったと思いました。

僕が実現したいのは「より豊かな入力装置」なので、完成形からはほど遠くまだまだこれからやらなければいけないことがたくさんあります。これからも暇な時に何か作っていきます。