たまにはアイデアソンもお酒の席で(居酒屋ソン)

  

ふと居酒屋で楽しく飲んでいた時のことから、雑記。

大阪で開催されたあるIoTをテーマにしたイベントにパネラーとして参加したときに、隣で話をされていたウェアラブル界で著名な塚本先生が「アイデアソンやるんですか?だったらぶっ飛んだものを考えた方がいいですよ。もう大抵のアイデアは出尽くされてますから(省略)」とお話ししてました。

大体2日間にまたいでハッカソンをやるケースって、初日はアイデアソン的な時間を取ることになるんですが、いつも真面目な空気感がこういったぶっ飛んだというか、いい意味でバカになれないとか、そういう気もしてます。ましてや初対面の人とチームを組むことが多い中ちょっとしたアイスブレイクではなかなか打ち解けられないことも。

(「初日はアイデアソン」って書きましたが、最近ではアイデアソンだけで完結するイベントはIT系に限らずあるそうです。)

美味しいものも食べられて、ちょっとお酒が入るとあの「会議室的なカタい感じ」から開放される感じがいい。

会話がだんだん膨らんで無茶苦茶な意見が出て時々誇張されていつのまにか「いやー実現不可能だろそれ?」「面白いなーソレ」と笑いながら結局収拾もつかないアイデアになるとかが実は一番楽しいし、なんかこう、気持ち的につっかえが取れるというか、みんなが「やらされてる感」じゃなくなることが本当はアイデアソンって大事だと思います。

「実現不可能だろ?」って言われるくらいが俄然燃えてくるMっ気のあるエンジニアだって周りにいるように思えるし。
あるエンジニアが言ってましたが、技術は後で何とかなるかもよ、って。

ハッカソンって一般的には期限が決まっているので、それに間に合わせるのもアリですが、そこがゴールになるよりも、後日また引き続き作り続けたいと思えるようなアイデアの具現化に対する取り組みもまたアリではないか?なんて考えてしまう。
もちろん発表時間に間に合わせて賞を取ったあとにまた後日集まってもっと良くしよう、というやり方もあるが、やっぱりタイムリミットに合わせたハッカソンって、何かしら縛りに合わせてしまうから、経験上そこからスケールしないことがほとんどだった。
時間的な制約がない方が、個人的には最近面白いと感じる。

半年や一年くらい練って完成させるとなるとよほどパワーを使うので、そんなことは大抵土日イベントでは成立しない。
以前、主催者側から、「このハードとこのAPIを使ってください」と縛りのあるハッカソンに参加したけれど、最初から縛りから逸脱したことをする方が、主催者側からすると残念だけど、参加者側によってはその方が楽しいかもしれないな、と。
イベントとして考えると成立しにくい、でもそういう楽しさを求めて参加したい人もいるように思える。
なんと呼ぶべきか。
居酒屋ソン?酒ッカソン(さっかそん)?流行りそうにはないな。。

あと、飲めない人はどうするか?雰囲気を楽しんでもらうか…。

最近ハードまで学習し始めるソフトウェア学科の学生さん達

今、僕は大学のある学科のソフトウェア分野で指導を行っています。ソフトウェアといっても、最近変わってきたなぁー、と感じることを書いてみました。(あくまで個人的に思うことです)

元々はこの学科は組み込み技術という分野でソフトウェアとハードウェアのコースがあって、つい近年まではパチンコなどで使われる液晶グラフィックの分野(ソフト)から、それを制御する基盤など(ハード)を学習する学生さんがいたようです。

開発環境も独自のものがあったりする中、それを変えてソフトウェアはWeb標準技術、まあ、いわばHTML5に切り替えたのが数年前ということ。

では、ソフトウェアコースの学生はWebアプリを作るのかというと、最近のカリキュラムではそれに加えハードウェアの実習が入ってきてます。ハードウェアといってもArduinoを始めとした小型コンピュータです。
今期のソフトウェアコースの実習ではこのEdison for Arduinoという、インテル製の小型コンピュータで、Web制作している人なら馴染みのJavaScriptでもプログラミングできます。 (正直、導入が難しいという印象がありました、人によりますが…)

  
自分でもある程度やってみました。

Webページを作って動的なページを動かすところまでは完全にソフト部分だけど、WebページのUI(ボタンやスライダー)を操作して、マイコンにつながれたLEDやサーボを動かすところまでの流れを学習する、といったソフトウェア学科のカリキュラムは今、もしくはこれから広く導入されることが増えるんだろうなと感じます。
僕らがこの仕事を始めた時のWebページやソフトウェアという考えとは違うソフトウェアの概念を持った若い世代の人たちがどんどん現れてくるのかな?と。
そうなるとハードウェア学科は?
個人的に触れてみた感想ですが、、
昨年度の発表会に参加した時に見たものは、画像解析の分野だけでも自作アルゴリズム、クロマキーでキレイに合成したり、麻雀牌の判別ロジックまでを自作したりする学生さんがいました。
今世に出ているライブラリよりもっと精度の良いものを作るのだと熱気ムンムンといった感じです。
おそらく彼らがハードウェアの基礎をつくり、ソフトウェア学科はその基礎をソースコードでもっとカジュアルで便利なものにしていくことになるのかな?とも考えてしまう。
JavaScriptで動かすマイコン、Tesselは面白いコンセプトで、配線の知識がなくてもまずはWebアプリとハード部分、例えば照度センサで明るさをCanvasやSVGにビジュアル化するまでのハードルを下げてくれています。ハードウェアエンジニアの恩恵と言ったところだろうかと感じます。

部屋の明るさを取ってCanvasに描画するまでを試してみました。ハードウェアエンジニアの恩恵を受けている気がします。

そういえばこないだ小学生の甥っ子がRaspberry Piを使っていました。小学生。。
 

学校も学生さんも変わりつつあるな、と感じる今日この頃。

やってみてわかった自分にとっての3Dプリンタの理想と現実

  

「3Dプリンタ」で画像検索すると夢のようなモノが作れると期待が膨らむ。

3Dプリンタにも種類がいろいろあって、最もポビュラーで低価格なのが、「熱溶融積層造形」と呼ばれるシリコンなどを溶かして細かく積み上げて形状を仕上げるもの。

なので、球体のような曲面を3Dモデリングソフトなどで作ったデータを「熱溶融積層造形」仕様のプリンタで作ると、触り心地はツルツルにはならない。プラモデルのようなツルツルの触り心地のモノが作れるというわけではなく、それをやりたければもっと別の種類の、おそらく高価な3Dプリンタのほうがいい結果になるかもしれない。

  
上の写真ではわかりにくいかもしれないけど、このような曲面は「段々の跡」が若干目立つ。

もしも拡大して見れるとしたら、段々畑のマインクラフトみたい。(言い過ぎか…)

なので、そういった夢を捨てて、外観ではなく、「機構」や「プロトタイプ」を作ることにした。

  
例えばサーボにとり受けるカム、歯車、あるいはその駆動部分をオリジナルで制作するときに3Dプリンタは威力を発揮するのでは?と、そう思った。

ちょっと地味かもしれないが、部品を作り、まずは動かしてみる。それがいかに大事なものかを感じることがある。

そして、なるべく早くラフなものを作って動かしてみることが大切かと。

3Dプリンタで製品化とか考えている人はまず、ラフなものを何度も試行錯誤するサイクルを繰り返すと考えたほうがいいかもね。

【告知】

2015年7月24日に大阪でIoTイベントにパネラーとして出演します、WebデザイナーにとってのIoTについて話す予定。https://www.facebook.com/events/1001199586565469/

イベントなどで、Webな人たちもIoT(WoT)に関心を寄せている人が多くなってきているようだな、と感じる今日この頃。

iPhone実機にアプリインストール失敗のときに

adhock.jpg

ipaファイルをiTunesからiPhone実機に転送するときに、実機でアラートが出て「○○のインストールに失敗しました」と言われて何度も試してだめ。
アドホックする場合のプロビジョニングプロファイルは、Provisioning > Distributionで登録してダウンロードすること。
たったこんだけのことでも初心者は大変なんです。
自分メモです。

様々な人間模様を後部座席に乗せて走る大阪のタクシー運ちゃん、今日もゆく

room.jpg

6/29と30のセミナーに両日登壇させてもらうため大阪に滞在し、6/30にマンションを解約して東京都民になります。

大阪では色んな人にお世話になったり、だまされたり、と、人間的に大きな経験ってやつをさせてもらいました。
大阪で最後に笑ってしまった話をふたつほど。
私はスーパー銭湯にいくのが好きです、週に1回は行っています。
29日の夜、セミナーが終わったあとに行くと決めていたスーパー銭湯へ行こうとタクシーを捕まえ、運ちゃんとの会話。
私:「鶴橋の先にパチンコ123があってその先にあるスーパー銭湯まで」
運ちゃん:「はいはい…あ?風呂行くんかぃな」
私:(ええやろ別に、プライベートやんか)
私:「運転手さん、大阪って最近寒くなかったですか?」
運ちゃん:「そうやなあ、そういえばそうやったなあ、お兄ちゃんたちどこの人なん?」
私:「いや、今まで大阪に住んでたんですけど仕事で東京に転勤なんですよ、ここちょっとだけ留守にしてて」
運ちゃん:「おおお!!!ホンマか!?東京か?どこに住むん?」
私:「東中野です」
運ちゃん:「ああ…知らんな」
私:(ズルっ)
運ちゃん:「それは東京のどの辺なんかい?」
私:「新宿から2駅目なんですよ」
運ちゃん:「ああ…わからんなあ」
私:(笑…だったら聞くなよ)
運ちゃん:「いや、銀座の近くとか六本木の近くとかって言ってくれたらわかるねんけどなあ〜」
私:「東京で他に知っているとこ、ありますか?」
運ちゃん:「知らんな」(私:多分説明しても分からんだろうなあ)
〜 鶴橋駅前渋滞中 〜
運ちゃん:「ちっ!あ〜おっちゃんもうこんな渋滞待ってられへん!割増代で運賃見たる(値引く)から遠回りさせてな」
(お、おいおい〜ハンドルをぐるぐる…客に了解を得る前に運ちゃん勝手に進路変更!)
〜 それから運ちゃんと世間話、この運ちゃん、どうやら一度夜逃げをしたことがあるらしい 〜
この人みたいに長い人生における苦い経験をされると、時として他人の気持ちくらい簡単に見透かすことなんて簡単なのかもしれません。
確かにそのまま客の言う通り決められた道を無難に渋滞を待ち続けるのではなく、こうしたら結果を得られるだろう、と客を自らリードするくらいの度量と判断力が結果的に仕事の質を上げるんだ、と。
これは私達の仕事でも同じで、クライアントが赤が好きだから赤に従うんじゃなくて、自分の答えが結果的に幸せだということを理解させる行動をとるべきで、理由なく従うだけならプロの仕事とは言えないわけです。
もちろんさじ加減も必要で、経験が浅いと時として望まない結果を客に与えてしまうだろう。
でもこんなブレない生き方ってありだね。
次の日もタクシーに乗った。
今度は朝のさわやかな天気の下、運ちゃんは多分60代くらいの男性。
運ちゃん:「このあたりは色んな人が乗ってくるんですけどね」(場所は大阪ミナミ)
運ちゃん:「私ね、こないだ乗車された女性のお客さんに口説かれたんですよ、でもね、お年が90歳くらいの女性だったんですよ。」
私:「…そ、それはまたお元気ですね(まさか、アンタ…)」
運ちゃん:「男性がいないとダメらしいんです、最近長年連れ添った旦那さんが亡くなられたというのですよ。」
運ちゃん:「でも、嬉しいですよ、それでも女性に好かれるなんて。」
私:「そうですね、わかります(で、どうしたん、そのあと)」
運ちゃん:「さすがに私もお断りしましたよ、やはり相手を本当に好きでないと愛するというのは難しいことなんです」
私:(断ったか…)
運ちゃん:「私ね、酸いも甘いも知り尽くした人が好きなんですよ、そんな人にね裸のままエプロン姿がですねえ…」
私:「そ、それは男性としてまあ、分からなくもないですね」(コラああああーーーーーっ!)
自分をコレでもか?とさらけ出す気性というか。
特にこんな街では、タクシーの運ちゃんとは人間のどこまでも非常識な素っ裸の内面を後部座席に乗せて走る職業。
いろんな人間を見てるだろうなあ、私が触れてきた色んな人間以上に多彩な趣味趣向や人生観などを持った人たちを。
だから運ちゃんって少々のことでは動じないもんなんですね、そんな身の上話も平気で話す大阪の運ちゃん。
本当に人に自分を知ってもらうということは、どれだけさらけ出せるかということだろうが、大抵の人は初対面だと格好付けてしまう。
どう捉えられるかは別として、さらけ出すとはっきりした自分が相手に映るかも。
やはりそんな風に映ってしまいがちな大阪の街や人、結構好きです。
10年間どうもありがとう、またちょくちょく遊びに(仕事に)いきます。

ABC2012 Springに登壇します

abc2012_demo.jpg
↑こんなデモをやろうとおもって練習中…
国内最大規模のAndroidの祭典「Android Bazaar and Conference 2012 Spring」に登壇させていただくことになりました。

http://www.android-group.jp/conference/abc2012s/

場所は東京大学!本郷キャンパスです。
そんなとこに入れるなんて一生ないだろうと思ってた…^^
僕のテーマは、最近デザインワークでよく考えさせられる「コーポレートアイデンティティ」というか「ブランディング」に大事なロゴについて。
とくにWebデザイナーがあんまり意識しにくい作り方の部分を実演させてもらおうかな?と。
論理的な話ではなく、実際どういうツールを使って作っているの?
というテーマで、実演をします!!
使うツールはデザイナーによって異なります。
僕は今回、デザインテイストに応じて、Illustratorその他、ほかにLightwaveというグラフックツールにて紹介をさせてもらおうと考えています。
講演時間は13時。C会場(工学部新2号館 241教室)という場所です。
タイムテーブル
会場地図
参加費無料とのことらしいです、まだ予定が空いている方はぜひどうぞ。

CSS3ジェネレータ「Grad3」を3.24に公開

grad3.png

(画像は開発中のものです)
去年の1月あたりに、CSS3のグラデーションを生成するサービス「Grad2」を作ったんですが、色々考えて後継バージョンをリリースすることにしました。
2012年3月24日に「Grad3」をリリースします。
主な追加機能としては、
  • 円形グラデーション
  • サンプルボタンを色相で検索できる新しいユーザインターフェイス
  • アイコンセットやbackground-imageパターンを商用利用可で提供
  • グラデーションだけではなくfont-sizeやcolorなどのプロパティのコードも出力
といったものです。
基本的ポリシーとしては「低機能で使いやすい」を考えてます。
世の中にはもっと高機能なCSS3ジェネレータもあるけど、高機能がゆえにちょっと使いにくい、と思える部分もあって、
自分で使ってみて「こういうの欲しい」というものにしました。
基本的にはGrad2の縦グラデーションしか出力できなかったのにちょっと毛が生えたぐらいで、
「低機能で使いやすい」をそのままコンセプトにしてます。
Fireworksでは「Adobe Fireworks CSS3 Mobile Pack」と言われるものがあるそうですが、
僕らPhotoshopユーザは何か別のツールで作ってたりするんですね、少なくとも僕の場合は。
そんな理由もあってPhotoshopユーザは特に、もし気に入っていただけたらぜひ使ってください。
ちなみに今回のロゴではカメレオンで作ってみました、もちろん僕薫製の3Dモデルでこしらえてます。

Grad3のロゴ

リリースしたらまたお知らせしますね、よろしくお願いします。

HTML5でつくるカメラ&落書きアプリ(中国GTUGハッカソンで発表)

operaTop.jpg

先週、岡山で開催された中国GTUGのハッカソンイベントに参加して、優勝いただきました!

デザインは@tommmmyとフロントが僕の2人で頑張ってみました。
ちなみにGTUGというのは、『Google Technology User Groups』の頭文字で「ジータグ」と読むそうです。
知り合いの方がいらっしゃるということが参加したキッカケでした。
作ったのはHTML5で作るカメラアプリ。動画に撮ってみました。すいません!横です!!

WHAT WGが策定しているgetUserMediaというメソッドを使って、ブラウザから、カメラやマイクにアクセスするというもの。
現在はAndroid用Opera Mobileの中でもちょっと特殊な(?)OperaだけがこのgetUserMediaをサポートしています。
これが実用化されたら、僕らデザイナーでもカメラ系のアプリがHTML5ベースで作れるようになるんじゃ?
と思ったりしました。
さて、この日のテーマは「HTML5」であることが条件。
ちなみにこういった技術を知ったキッカケはこのサイトです。
Androidスマートフォンを持っている人はブラウザでアクセスして、この試験中とも思えるOpera Mobileをダウンロードしてください。
  • android_1.png
  • android_3.png
  • android_5.png

サイトにアクセスして、画面をちょっと下にスクロールすると「Android Build」というリンクがすぐ見つかるはずです。
これをタップするだけでダウンロードが始まります。
ダウンロードが終わったら、上図右のようにアイコンをホームの画面にでも配置しておきましょう。
Operaのアイコンに「LAB」と書いてあるのがそれです。

その「LAB」と書いているOperaを起動して、ハッカソンで作ったやつのアドレスにアクセスしてください。
http://ecoloniq.jp/opera_de_camera/
※ハッカソンの制限時間の関係上ちょっとした不具合があります、そのときは更新をタップしてください(ちゃんと作りたいなあ…)

カメラの映像をブラウザに映す

カメラの画像をブラウザに映すのだけはとても簡単です。


<video autoplay>


// jQueryを読み込んでいます
$(function (){
 var video = $("video").get(0);
 if(navigator.getUserMedia) {
  navigator.getUserMedia('video', successCallback);
  function successCallback( stream ) {
   video.src = stream;
  }
 }
})

なんとこれだけ!これでカメラからの映像がライブストリーミングされています。びっくり。

撮った静止画をcanvas要素に描画する

opera_camera_elem.png

で、これを「カシャっ」と撮りたいので、ここでcanvas要素の登場です。
canvasタグをまずは2枚用意して重ねました。(「枚」って変ですね)

1枚はカメラで撮影した静止画像を描画するたものもの。
もう1枚はユーザにお絵かき(落書き)してもらうための空白のもの。

つまり、仕上がりを2つのレイヤーを用意しています、position: absoluteで重ねます。

タッチイベントで画像をcanvasに描画する

最初に落書きするブラシを選択しますが、その要素はimg要素ですからcanvas要素に直接描画できます。
canvasへの描画ってimg要素かvideo要素かcanvas要素の3要素だけは、ビットマップをcanvas要素に「コピー」出来るのです。

このコードは、canvas内の描画領域(コンテキストという)に、img要素を貼付けます。
座標も指定できますので、指でタップした場所にimg要素をcanvas要素に表示することが出来るわけです。


canvas要素の描画領域.drawImage(img要素, x座標, y座標);

本当は、ブラシサイズや色まで決めたり出来たらもっと良かったのですが、なんせ僕の知識レベルなので、touchmoveしている最中にdrawImageしてブラシ画像をcanvasに配置するところで、精一杯でした。

シャッターで絞るアニメーションは、canvasで円をクリッピングマスク

↓↓↓ 撮影ボタンをクリックorタップしてみてください

canvas要素内には画像をクリッピングマスクするclipメソッドがありますので。シャッターの画像をアニメーションする円でマスクしました。
もうちょっと早くしても良かったかな?

シャッター音はAudio要素

「カシャ」という音がなくって、その場では違う音を入れたんですが、音の再生はとても簡単です。
今回は、JavaScript内でAudioを生成して、鳴らしたいタイミングでplayメソッドを使ったので、実際の音関連のコードは3行くらいしか書いていません。


var audio = new Audio();
audio.src = "sound/shutter_sound.mp3";

//シャッターボタンが押されたタイミングでplayメソッドを呼ぶ
audio.play();

他にも色々やりたいことがありました。

  • 消しゴムツールを用意
  • 落書きした画像を保存させる
  • ブラシの向きや大きさをランダムに

などなど。。

HTML5というキーワードに大した意味はなく、やれることを実感することに意味がある

ついでに、最近『HTML5』というキーワードについて思うことをちょこっと書きます…

もっと経験を積んでいるプログラマーだったらもっと高機能なものを短時間で作れると思います。
僕はユーザインターフェースのデザインの勉強をしているし、見た目を華やかにするビジュアルデザインを得意とするデザイナーですが、開発に関してはやりたいことはアタマの中にあっても実力が伴いません。。

今までHTMLとCSSでユーザが触れる側を作ることができた僕らWebデザイナーも、こういったカメラとかタップとかサウンドとかで人を楽しませるアプリケーションに拡張することが出来るんだ。ということに気づきます、HTML5の目的のひとつなんだな、と。

最近HTML5ってキーワードが盛り上がってますね、セミナーとかそれだけで人も集まりやすい。
でも、、
僕が思うのは、そんなトレンドに惑わされているだけで、本質をしっかり理解出来ていない僕達も問題だと思います。
(理解出来てない人が悪いのではなく、発信する側の責任もあると思う)

例えば、お客さんに「ウチはHTML5やCSS3を使ったコーディングが出来ます」とか言ったところで、正直それがどうした!?って感じです。
そこは誰が幸せになるの?という具体的なビジョンが見えてない人ほど、そのキーワードを使いたがっているような今が伺えます。
誰かのためになるHTML5なのか?
ただの営業トークで中身のないHTML5というだけのキーワードなのか?

僕は最近そんな業界への流行りに疑問があって、なにがトレンドなのか?その中身を理解したく、開発者のイベントには積極的にアウェーでも行きたいと思います。
自分がプログラムをまともに書ける、書けないが大事ではなく、ちゃんとデベロッパと意思疎通が出来るデザイナーでないと、良いサービスは作れないと確信してるからです。

正直この程度のアプリでは、まだまだなのは分かっているのだが。。。(エラそうなこと言ってますが勉強中の身です)
少なくともハッカソンに僕のようなデザイナーが参加させてもらってることは決して無駄なことじゃなく、ただ技術の学習でもなく、コミュニケーションの勉強であり、誰かを幸せにする何らかの手段を異業種から学ぶ勉強、ということだと思っています。

ここから先の話はかなりディープな話になるので、別のエントリーに書きたいと思います。

Adobe station5に出ます

ピクチャ 1.png
こんな私ですが、、、

http://station5.jp/seminar/list.html

出演します。なんとAdobeさんのCS5イベント、イン東京、表参道のDTP Booster。
セッション内容ですが、IT CIRCUS 2010でよくやってる内容で、web creators5月号にも執筆した記事でもある、Illustratorについてお話しします。
無数のオブジェクトをちりばめたりして、イラスト作品を作っていく、それをJavaScriptで作っていく。
というお話です。
JavaScriptプログラム未経験者の方が対象となります。
あらかじめどういう事をやるかというと、PDFを見てください、IT CIRCUS 2010 FUKUOKAのスライドを抜粋しました。
illustrator_js.pdf (PDF: 3.5MB)
こんなグラフィックデザインにも。
イラストレータでシンボルを飛び散らせよう!!
nature-0f672952ec6928c53e6a3cde15d43664_h.jpg

こちらが1000枚の花弁を飛び散らせるスクリプトです、くわしくは当日〜!

var page = documents[0];
for (var i = 0; i< 1000 ; i++){
var symbol = page.symbols[0];
var item = page.symbolItems.add(symbol);
item.top = rand(600);
item.left = rand(800);
var scales = rand(100);
item.resize(scales, scales);
item.rotate(rand(360));
}
function rand(num){
return Math.random()*num;
}


一応制作実績ページFlash版仮公開

心斎橋Fan-j Twice「風のオト空のウタ2008、春」

見てやってください、触ってやってください、マウスで動かしてダブルクリックしてみてください。

http://www.akibahideki.com/

なんだかかなり苦労したような・・・

元々プログラミングの訓練をしてきた訳じゃなく、見よう見まねで(誰だってそうかもね)やってみた。

一番つらい所は三角関数でマウスにオブジェクトを向かせるならまだ簡単だけど、3DCGでいうIK(インバースキネマティクス)みたいな動きが出来るまでかなり試行錯誤した事を覚えてる。

確かに僕は元々デザインの仕事ばかりしていたときにプログラミングなんてやらないだろうなって思っていた、でもここ何年か自分の中で絶対必要になってきて、ヘタクソな組み方しか出来なかったけど、そうやってうまくなっていくもんだと、エンジニアさんに言われたもんだ。

とにかくこれからも地道に勉強していこう、そう心に決める今日この頃だったのだ・・・。