テクニカルなセミナーでテクニカルじゃないことを話します

画像:セミナー告知サイトのスクリーンショット

日本Webデザイナーズ協会株式会社インヴォーグが主催するセミナーに登壇することになりました。

開催は2/2(土)に大阪、2/23(土)に東京です。
無料なので空いてる方はぜひどうぞ、詳細はこちら!
ちなみにインヴォーグは私がテクニカルアドバイザーでありCTOとして就任しているWeb制作会社です。
主にチームのワークフロー改善や技術研究などで参加しています。
私のセッションタイトルは「HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道」と題しました。
これだけWebブラウザでできることが増える中で、エンジニアではなくデザイナーがどう考えて技術と向き合っていくべきか?について、テクニカルアドバイザーとして逆に学んだことを交えてお話ししたいと思います。
対象は学生さん、Webデザイナーさん、非エンジニアの方でWeb制作に関わる方という割と入門的なレベルで、テクニカルな知識はなく、HTML5などについてあまりよくわからないという方に来ていただけたらと思います。
あと、別セッションのFlashデベロッパの荒井さんとAdobe AIRでつくった海遊館アプリ「Ikesu」の苦労話についてもちょっとお話するかもしれません。(これは時間があればです)
というわけで結局セミナー告知になってしまいますが、以下のような内容をキーノートにしたいと考えています、ご参考にまで。

デザイナーとHTML5技術の向き合い方

HTML5は従来のHTMLとくらべてよりアプリのようなことができると言われていますが、そういうと「どうせJavaScriptとかエンジニア向けのスキルが要るんでしょ?」と思われるんですが、そうではありません。
このセッションがこれからの案件で関わることになるだろうブラウザの新しいHTML5という技術をどう使い、ユーザに届けるデザインを考えるか?
というテーマでプログラミングスキルがない方に参考になればと思います。
実際にあった「比較的簡単」なHTML5案件を経験に、カタチを変えて紹介していきたいと思います。

デザイナーの定義を考え直そう

コーディングスキルや支援ツール、CSSプリプロセッサによる効率化やグラフィック制作のためのアプリケーションスキルは私は大事だと考えています。
今の制作現場がどうしてもそのあたりを強調し必要としているように思えますので、やはりこれからデザイナーを目指す方はそういった方向ばかり向きがちなのですが、カタチの見えない「ユーザ行動のデザイン」をどう考えるか?について、あるサンプルを用いて考えてもらおうと思います。
実はデザイナーとして第一に必要なスキルなんだということで。

無駄な時間ばかり過ぎる社内勉強会の参考になれば

制作会社のアドバイザーをやっているとこういうシーンを見かけます。
言語の違うディレクターやデザイナーやエンジニアがそれぞれの言語で社内勉強会をやってナレッジを共有しようとしていますが、これはほとんど意味がありません。
あるエンジニアがソースコードを見せて仕様の解説をデザイナーの前でやったり、あるデザイナーが海外のデザインの流行を紹介するがそのメリットに触れないということは、ちょっとした知識の仕入れにはなるかもしれませんが、それだけでは費用対効果を理由に社内勉強会は持続できないところが多いようです。
なぜか?という理由を考えればわかります。
目的はチームの強化なのに、強化しないことに時間と労力を使う意味がないからです。
なのでこのセッションでは「ブラウザにこんな機能が付くとして、どんなWebサイトを提案しますか?」といった考えで色々な立場の人が意見を出し合うという方法を制作現場に提案したいと思います。

JavaScriptはデザインによる解決法のひとつ

「デザインとは見た目ではなく、設計だ」と言う人が増えてますが、私はJavaScriptの実装というのはユーザ行動をデザインするうえでの解決方法の一つ、つまりこれもデザインと考えています。
ユーザの欲求に対しインターフェイスはデータを提供します。
視覚的にわかりやすいレイアウトにするデザインの解決法があるとしたら、制御(JavaScript)によるデザインの解決方法もあります。
ではデザイナーはJavaScriptを覚えるべきか?と聞かれます。
しかし「デザイナーが何を目指すか?」が重要なので、そういう意味でのスキルは必須ではないと考えています。
チームで作り上げられるため、その目的に見合い、デザイナー自身が無理のないスキルアップを目指すということはエンジニアのマネをするのではなくエンジニアと協業できるスキルを覚えるということが特にこれからは大事と考えています。
と、色々書きましたが興味ある方はどなたでもどうぞ!

CSS Nite in OSAKA, Vol.32に出演しました(補足記事)

cnio32photo.jpg
撮影:岡田陽一さん(ふわっと)

8/18に大阪のリクルートエージェントさんの会議室で開催されたCSS Nite in OSAKAでちょっとデモをしました。

参加された方、どうも長時間お疲れさまでした。
HTML5やWeb標準技術に対するこれからの心づもりの話だったんですが、最後のデモはFlashからAIRアプリという手段もあるとアイデアも含めてデモを行いました。
File APIを使ってドラッグアンドドロップを実現することを前提にデザインを考えるのもいいですね。
位置情報は誤差があるにせよ、案件次第ではスマートフォンサイトから実践できます。
Firefox for Androidの最新版ならAndroid 2.xでも、ブラウザで写真が撮れます。
さらにAndroid 4.xでは標準ブラウザ(Chromeと「ブラウザ」両方)でもう写真が撮れますので数年後にはAndroid対応のWebサイトに撮影ボタンが付くかもしれませんね、場合によりますので全てというわけにはいきませんが。
まとめとして、
HTML5は本当にクロスプラットフォームでクロスブラウザを実現するにはもっと時間がかかるけど、スマートフォンなど幅広く標準ブラウザが実装している機能は使うことも検討したうえでデザイン設計を心がけるがいいですね、という内容がひとつ。
もうひとつ、Flashはもっと強力なレンダリングの可能性が高い開発環境なので、表示にパフォーマンスが求められる3Dゲームなどに活躍の場が広がるのと、ネイティブアプリ開発の期待も持てますので以下のようなことが言えると考えられます。

スマートフォンでの3DレンダリングにはFlash/AIRの選択肢も

penguin.JPG
もしもスマートフォンのブラウザ上で、プロダクトとなる3Dモデルをグリグリ回しながら見てもらうようなビューワーをつくるには最新のブラウザでもさすがに厳しい状況です。
そういった場合はネイティブアプリ化を提案するという手もあります。
参加された方にはスクリーンでしっかり見れなかったと思うので動画にしました。

Air for Android , 3DModel DEMO from Hideki Akiba on Vimeo.

このデモはFlashでつくったもので、3DソフトでモデリングされたペンギンをAway3Dというライブラリで読み込み、レンダリングをしています。
Away3D自体がGPUのパワーを使うStage3Dに対応しているので、非常に高速に描画処理されます。
実際フレームレートはほとんど落ちていません。
(ペンギンはこのサイトよりダウンロードしました。http://www.turbosquid.com/3d-models/rigged-penguin-3d-model/431413
「誰に対し何を提供するか」においては、どの技術を使うかは大して意味がなく、そのときそのときで一番適切な技術を使いましょう。
最近もFlashをDisると感じられた記事をどこかで見ましたが、私はどちらも大切な技術として向き合っていきたいと思います。

あのロゴあのパーツ、どんなグラフィックソフトで作ってるんだろう?

abcvideo.png

東京大学で開催された、「ABC2012Spring(Webトラック)」で発表した
「あのロゴあのパーツ、どんなグラフィックソフトで作ってるんだろう?」
の映像です。

実際デザイナーは、どんなツールを使い、どんな考え方を持ってユーザにアプリを提供するのか?
という自分なりの考え方を発表し、後半はWebデザイナーにとってあまり馴染みのない3Dグラフィックのライブデモをやりました。
使ったソフトはLightwave。ドロイドくんをつくるデモです。

HTML5でできるカメラアプリでサーバアップまでやってみる

keyvisual_30.jpeg

来る5/4(金曜)の19時から、ほんっと久しぶりにCSS Nite in OSAKAでお話します。

内容は「HTML5でできるカメラアプリを実際に体験しよう」です。
以前、たった1回のハッカソンでつくったHTML5でつくったOperaブラウザのカメラアプリの記事を書いたんですが…
実は撮影した写真をサーバにアップするというところまでやってみようと思います。
軽く動画を撮ってみました、これをベースに将来できることを考えたいと思います。

これは自作の簡単なテストアプリですが、HTML+CSS+JavaScriptで写真を撮影し、PHPに画像を送信しています。
これをもとに、HTMLベースで将来つくれる動画や音声を扱うWebアプリはどこまで進化して、僕らはどこまでその仕事に関われるんだろう?というテーマに突っ込んで触れていきたいと思います。
WebRTCという仕様があります。
簡単に言うとちょっと語弊があるけど、将来は映像チャットなどをブラウザとHTMLベースでやってしまおうという仕様で、デバイスのカメラやマイクにブラウザがアクセスしてJavaScriptで操作するものです。
スマートフォンの標準ブラウザは、まだこの仕様をサポートしていません。
しかしAndroid版のOpera Mobileとして公開されているブラウザが、この未来の規格を一部実装しています。
Androidをお持ちの方は、当日までに以下のリンクを実機でタップして、本体にダウンロード&インストールしてご来場ください、みなさんで楽しんでみましょう。
( ↓ Androidでアクセス、ダウンロードがはじまります ↓ )
あまりプログラミングよりの話はしませんが、Webディレクターさんやデザイナーさん、フロントエンドの方も是非おこしください!よろしくお願いします。

TwitterのタイムラインをPHPとJSを使ってIllustratorに自動組版のデモ

IMG_1944.jpg
〜DTP Booster 028 @ アップルストア銀座に出演しました〜
もう少しかかるかもしれませんが、Illustratorの書籍を執筆中で、夏の終わりか秋口にリリースされる予定の「Illustrator 10倍ラクする仕事術」の出版記念イベントが東京のアップルストア銀座で開催されたので出演してきました。
アップルストア銀座には2度目の登壇になるんですが、DTP系のイベント出演で東京はAdobeさんのイベントで一度出させていただいたっきり久しぶりだったと思います。
この日、アップルストア銀座3Fシアター会場は超満員!
立ち見(座り見)の方も出たくらいでした、参加された方ありがとうございました。
このイベントで僕は、IllustratorをJavaScriptで自動化するというデモをさせていただきました。
もちろん、書籍にも執筆しているトピックです。
このサンプルは、CSV形式に保存された各社員の名前、肩書き、メール、画像のファイル名を、JavaScriptが読み取り、解析してIllustratorに全社員分の名刺を作成/配置するということを想定したデモです。
この内容は本に載りますのでここでは書きません、ぜひ本を買ってね!
ちょっと面白そうだと思い立って、前日になって考えたネタなのですが、
Twitterにあるハッシュタグ付きでつぶやかれたそのツイートのアイコン画像と本文をIllustratorで名刺にしちゃおうという実験をしようと思いました。
あらかじめFacebookで友達に声をかけて協力してもらったりしましたが、
会場にいた方にもこの実験に参加してもらいました。
結果は見事成功!
ただ、プロセスを言いますと、ローカル内のCSVファイルを読み込むことはできるんですが、
外部ドメインやリモートサーバ上のファイル(http://で始まる)を読んだりするのは色々挑戦してみたんですが、どうしてもエラーが起きて取れません。
なのでこうしました。
1. Mac内でローカルサーバを立てる(今回はMAMP)
2. ローカルサーバ内でPHPを起動、Twitterのタイムラインを取得
3. PHPによりローカル内にTwitterアイコンをダウンロード保存させる
4. PHPによりローカル内にTwitterタイムライン内のデータをjsonファイルとして保存する
5. JavaScriptでjsonをパース、Illustratorに画像と本文を自動配置
これでいけました!
ひとつハマったのが、アイコン画像の破損リンクと拡張子。
どうも間違ったり適当な拡張子をファイル名に付けてしまうと、Illustratorがエラーを吐き出して処理を中断します。
このため、PHP内部で行った対策。
1. 画像サイズが存在しないと判断された場合、処理をスキップする
2. 拡張子はimage_type_to_extension関数で調べて得た本来の拡張子を適用し、jsonにも反映させる
 (これをしないとIllustratorが受け付けない事がある)
さて、JavaScript側ですが、アイコン画像はサイズがバラバラです、大きい方の画像を取得したので。
これをそのままIllustratorに配置するとみっともないので、対策は主に2つあります。
・PHP側で画像の幅を指定して作り直し、保存する
・JavaScript側で、規定の横幅÷画像の幅でそれを拡大縮小させて合わせる、縦にはみ出た部分はクリッピングマスクする
で、後者を選びました。
そのソースがこんな感じです。

var imageFile = File(imagePath);
var imageObj = maskItem.placedItems.add(); // -----(1)
imageObj.file = imageFile; // -----(2)
var scales = 50/imageObj.width; // -----(3)
imageObj.resize(scales*100,scales*100); // -----(4)

上記のスクリプトでいうと、マスクアイテム内に取得した画像を配置します(1)
imageFileに代入された画像のパスを指定してロードします(2)
(3)は画像を50ptの横幅に統一させたいので、まずは50÷画像サイズで拡大縮小率が出ます。
resize()関数を使えば、拡大縮小ツールを使うのと同じです、ただし、100%が原寸として考えるので、100を掛けます。
これによって画像は全て同じ横幅にリサイズされて表示されます。
さてこれだと、正方形なら縦も50ptになるはずなんですが、画像の縦横比もバラバラ。
ここでは正方形のパスをマスクする側として使います。
マスクオブジェクトを最初に用意しておきます。
マスクのgroupItems[0]で、グループ内の重ね順で一番上のグループ化されたオブジェクトを取得できます。
その中ですでにクリッピングマスク処理された四角形を入れておき、この中に画像を配置してマスクさせるという方法です。
さて、セッション中ナマ実演だったので、うまくいくかドキドキでした。
アップルストアの電波を借りたのですが、やっぱりちょっと遅くて、読み込みから処理まで時間がかかりましたが、
何とか成功しました、下図はその結果です。
49人分のTwitter名刺をIllustratorで自動生成しました。
もっと多かったんですが、なぜか最初につぶやいてくれたひと、入ってません、ゴメンナサイ!!
あとPHPの制作は最終的にCarpalの宮澤さんにお願いしました、ありがとう!
セッションで使ったスライドはこちらです。
セッション中で紹介しました、Illustrator用のJavaScriptリファレンスは
で見れます、英語ですが。。。
ライブデモでできたTwitter名刺 ▼
applestore_demo.jpg

「Untitled!!!!!!!!」全額被災地へ募金するセミナー緊急開催します

Untitled!!!!!!!!(アンタイトルド)|関西のWeb/ITコミュニティが結集、集まった義援金は全額被災地へ寄付するイベント、4月3日に開催!

会場には東北地方太平洋沖大地震への募金箱を設置して、集まった義援金は全額募金するイベント、「Untitled!!!!!!!!(アンタイトルド/略称:Un!)」を4月3日(日)に大阪産業創造館で緊急開催します。

結局ひと一人の力って大した事無いって思う中、関西でこれだけの団体やコミュニティがそろって合同でイベントをやるってのはそうそう無いと思う。

僕は今回、実行委員のコアメンバーであり、司会、そして講師として登壇します。

ぶっちゃけこの日僕は金を集める金の亡者にでもなって、参加者や協賛各社がどれだけお金を出す気持ちにさせるか!?に全力を注ぐ、とでも言っておこうかな?
出せる人にはとことん出してもらって全額被災地へお送りしましょう!

そんなわけで参加を募ります!
公式サイト:http://m2.cap-ut.co.jp/un/

で、遠方の方のためにUSTREAM配信を予定しています。
今までウチのイベントでいつもUST中継してくれたスパイソーさんのテクニックは最高なんで、かなり素敵な映像をお送りする事期待大!!

もうすでに、日本マイクロソフトさんが賛同してくれています。
他の企業にも協賛を呼びかけています。
公式サイトにはもうちょっとで協賛のお知らせ欄も掲載するので、経営者の方、是非是非ご確認ください!!

あと、一声ですぐに賛同してくれた、リクリの谷さん、ドットプラス(ex.ドットコーダー)の徳田くんや帆秋くん。
日本Androidの会関西支部長の杉本さん、鳥取在住なのに自腹で来てくれるという丸山さん。
いつも写真を撮ってくれているおかださん、HTML5案件では共に闘った村岡さん。
ありがとうございます、どうかこれからもよろしくお願いします!!

CSS Nite in GINZA, Vol.54に出演しました

101118_0131.jpg

[撮影:飯田昌之](写真は顔出しNGの方のため、お顔にボカシを入れています。)
11月18日にアップルストア銀座で行われましたCSS Nite in GINZA, Vol.54に出演しました。
今回のテーマは僕にとって珍しく、技術系以外の話題でして「これがフリーの生きる道」というタイトルでした。
業界では著名なデザインユニットlinkerさんと共演でした。
ホントに僕でいいのか?と思うくらい、著名な方々なので恐縮です!
僕はフリーを6年、一度挫折しているので、通算するともっとありますが、それくらいなんとかデザインで食べ続けてきました。
このセッションでは、クライアントのトラブルから訴訟、そして最近自分の経験として「合同会社」を設立したので、それって何?と思っている方へ伝えたい事をお話させていただきました。
【スライド・フォローアップ】
linkerさんの方でスライドとアンケート結果を公開しています。
これは事前にアンケートにご協力いただいた一般の方の声があまりにも多くて、全部を紹介する事が出来なかったです、本当にありがとうございます。
そのほか、このページがフォローアップとしてまとまっていると思います。
【合同会社】
時間の関係でもうちょっとお話できたら、と思ったのが会社法。
僕らは大阪で「合同会社かぷっと」という会社を設立しました、立派な法人ですよ!(いや、立派かどうかはちょっと自信無いです…)
平成17年に会社法が改正されて、まずは会社が作りやすくなりました。
資本金が1円からでも会社は作れるんですが、登記にはお金がかかります。
株式会社の場合、定款も認証が必要で、公証役場に持っていくなど手間が発生します。
日本で作られる会社の種類を大きく2分するとこの二つ。
・株式会社
・持分会社
そして、持分会社には「合同会社」「合資会社」「合名会社」と3つに分かれます。
ご存知のとおり、「有限会社」は現在設立できません。
「合資会社」「合名会社」は以前も存在し、当時は商法で定められていましたが、現在は会社法にて定められていて、内容も変わっているということです。
【「合同会社」「合資会社」「合名会社」の違い】
セッション中では以下のことを詳しく話せませんでした。
違いはこんな感じです。

合名会社:全員が無限責任社員
合資会社:無限責任社員と有限責任社員が存在する
合同会社:全員が有限責任
※無限責任社員:出資額を超えて責任を負う
※有限責任社員:出資額の範囲で責任を負う
【フリーランス同士が集まって起業する】
・・・といった事ってフリーの方は一度でも考えたことってないですか?
僕は確かにお金も必要だし大事なんだけど、非クリエイティブな事に手を煩わされることを出来るだけ避けたい、作り手と営業さん、ディレクターさんがバランスよく動いていて、何より自分が投資した金額に関わらず、会社の決定権を全員が平等に持てる合同会社って体系も一度検討していただいたらどうでしょう?
というご提案を含めたメッセージをお送りしました。
【銀座・ロンドン・大阪がつながった夜】
linkerさんのメンバーであるひとり、柳谷真志(@mersy)さんがロンドンに在住していて、僕の会社、合同会社かぷっとのメンバーがビデオ会議中継で出演。
柳谷さんの部屋は白基調でカッコいい部屋でした。
そしてかぷっと、僕の会社。なんと!
101118_0193.jpg
[撮影:飯田昌之]

おい!大阪のかぷっと。
本番中にお好み焼きを焼いて・・・・
誤解されるでしょ?
「大阪の会社は勤務時間にお好み焼きを焼いているらしい」
なんてw
なにはともあれ、1時間以上お話にお付き合いいただいた方、本当にありがとうございました!!

アップルストア銀座のCSS Niteに出演、テーマは「フリーランス」

CSS Nite in Ginza, Vol.54 

ついに今週になりました。東京のCSS Niteに出演するのは初めてです。
CSS Niteという、全国に展開しているWeb系のセミナーイベントがありますが、
初めて東京版に出演する事になります。
CSS Nite in GINZA, Vol.54
出演: linker × 秋葉秀樹
会場:アップルストア銀座
日時:2010年11月18日(木)19時〜20時
参加は無料、どなたでもお申し込み出来ます、お気軽に!
参加が初めての方とかいらっしゃいましたら、こちらを見ていただくと良いでしょう。
で、何をお話させてもらうかというと、「フリーという生き方」というテーマで、
この業界では書籍関連でも活躍されているlinkerさんというデザインユニットの3名の方と、共演させていただきます。
で、僕は6年ほどフリーをやってきたんですが、ついこの間、合同会社を設立しました。
だから「フリーじゃないくせに」と言われそうですが、勘弁してください。。。
話す内容として、
フリーになったキッカケから、協業するときに使うコミュニケーションツール、さらにクライアントがお金を払ってくれないとかトラブった話から裁判、請求書や発注書のこと、といったフリーランスには避けて通れない内容がぎゅっと詰まった1時間です。
僕は特に、自分の会社がなぜ「合同会社」なのか?
メリットは何なのか?そもそも株式会社との違いは何なのか?
について、少し触れていきたいと思います。
「クリエイター同士で起業したい」という場合、是非検討していただきたい「合同会社」、そういった方に聞いていただきたいと思います。
あと、意外と僕らの味方?いや、実は結構厳しい「少額訴訟」。
クライアントがお金を払ってくれない。
そういった時の最終手段として60万円までの額を争う裁判の形態ですが、正直僕らのようなWebデザインの世界では「あまり当てに出来ない(可能性がある)」と考えています。
そのあたりも軽く触れていきたいと思います。
あと、今回linkerさんがフリーの方にアンケートを実施して、160名以上のクリエイターの方が答えてくださったそうです、ありがとうございました!!
アンケート結果や、皆さんの声もまとめて講演でお伝え出来るかと思います。
結構ドロドロした内容もお話するかもしれません。
平日のお忙しい時間となりますが、出来たら銀座でお会いしましょう!!
ではでは!

関西オープンソースフォーラムに出演したよ

daniel.JPG

すごい人の数だった。(写真はOperaのダニエル・デイビスさん)
2010年11月5日〜6日の2日間にわたって、大阪南港ATCで開催された関西オープンソースフォーラム。
僕はなぜか、HTML5のライブコーダーとして出演。

Operaのエバンジェリスト、ダニエル・デイビスさん、Googleの北村英志さんとも仲良くさせていただき、「また今度大阪で!」と伝えておきましたが、果たして伝わっているでしょうか??

さて僕のセッションは簡単ではありますが、HTML5 canvasで作るお絵かきアプリを作ってみました。
本編ではもっと簡単なんですが、ここでは「もうちょっと書いたらこんなのも出来ますよ」という、黒板付き、色をドロップダウンで選べて、線の太さもスライダーで変更出来るアプリのコードを書いておきます。
これが当日来ていただいた方に見てもらった、例のヤツです。

Operaのダニエルさんに教えてもらった大事な事。
JavaScript内にclear()というメソッドを使ったらダメだよ、予約されているから。という事でした。ありがとうございます!!

この画像をクリックしたらデモに飛ぶよ!試してみてね〜。
↓↓↓↓↓

宮崎でしゃべってきたよ(CSS Nite in MIYAZAKI, Vol.1)

スクリーンショット(2010-11-03 16.20.20).png

こないだ宮崎に行ってCSS3などの事を話してきましたよ。

デモも交えてみました。
さて、来てくれた宮崎の人だけでなく、熊本や福岡や鹿児島など、九州から駆けつけてくれた人たち、ほんとにお疲れさまでした!
カタい椅子に座りっぱなしだと疲れますね。
ホント、みなさん熱心。
レポートはくろ。さんという素敵な女性の方で、カメラウーマンも担当されてました。
彼女のブログでレポートされてます。すばらしい!!
↓↓↓

さてさて、フォローアップは実行委員の方から行くでしょうけど、僕がセミナーの始めに、カオにマーカーを付けて東国原知事に変身したFlashのAR版。
FLARToolKitを使って是非みなさんもハナにマーカーをテープで貼付けて変身してください。
※Webカメラが付いている、接続されている環境が必要です。
【手順1】
PDFをダウンロード。→ marker.pdf
プリントアウトするか、スマートフォンのカメラなどでマーカーを撮影。
【手順2】
プリントアウトした場合、うまく切って、セロテープでハナに貼付け(しなくてもいいけど)
こちらのURLに行ってください。
自分の顔を映し出すと、はい、アナタも東さん。
以上です。
また今後もよろしくお願いします!
ありがとうございました!!