読者です 読者をやめる 読者になる 読者になる

CodeIQ Blog

自分の実力を知りたいITエンジニア向けの、実務スキル評価サービス「CodeIQ(コードアイキュー)」の公式ブログです。

増井雄一郎さんが人気記事を解説!HTML5/Webエキスパートたちに学んでつながる「HTML5 Experts Night」 #html5 #html5exp #wri.pe

CodeIQ中の人、babaQです。

国内外で活躍する40名以上のWeb技術専門家が執筆する
日本初のHTML5技術専門サイト「HTML5 Experts.jp」。

そのHTML5 Experts.jp主催のオフラインイベント「HTML5 Experts Night #1
が8月23日、メディアテクノロジーラボ(MTL)で開催されました。

今回はHTML5 Experts.jp編集部の仲裕介さんに
イベントの模様を伝えていただきます!

************************************************

◆エキスパートと学べる!触れ合える!HTML5 Experts Night

HTML5 Experts Nightは、ちょっと大人な雰囲気の
メディアテクノロジーラボで開催されました。

よくあるIT系勉強会の雰囲気ではなく、
おしゃれなパーティーという感じの雰囲気でした。

f:id:codeiq:20130905034110j:plain

会場でひときわ目を引いたのはやはりマンガテレビ。
WebRTCやCanvas、WebSpeech APIやWebSocketなど、HTML5技術を
ふんだんに盛り込んだ技術の無駄遣い的なWebアプリです。

f:id:codeiq:20130905023328j:plain

Webアプリの技術的な解説は
リアルタイムにライブ映像をマンガ化!『マンガテレビ』アーキテクチャ編
をご覧下さい。

今回は映像のミキサーやなどを駆使して、
かなり本格的なセッティングを行いました。
ビールを飲みながら、イベント開始直前まで入念な調整が続きます(笑)。

f:id:codeiq:20130905023814j:plain

さて、イベントの開始は白石編集長の乾杯から!

イベントの総合司会を務めた白石さんは、
堅苦しくなくリラックスした雰囲気のイベントにしたいと語り、
参加者にもその想いは伝わったようです。

乾杯の挨拶とともに、参加者も乾杯

f:id:codeiq:20130905024352j:plain

エキスパートの方々と一般参加の方々区別なく一つのテーブルを囲みます。

さあ、めくるめWEB技術の世界へ!

乾杯に続き、白石さんからはHTML5 Experts.jpのエキスパートと
本イベントの目的について、説明がありました。

f:id:codeiq:20130905025505j:plain

HTML5 Experts.jpには、40名以上の業界のエキスパートたちが
名前を連ねていますが、エキスパートとなる条件は以下の二つ。

・Web技術に関して、たしかな技術力を持っていること・たしかな技術力を持つ事が、多くの人々に知られていること

イベントでは、エキスパートたちと参加者にどんどん交流してもらい、
エキスパートたちからさまざまなことを「学び」
エキスパートと「つながり」
そしてみんなで「盛り上がる」という3つの目的を達成することで、
日本にもっと「エキスパートを増やしていきたい!」
と、白石さんはアツく語りました。

f:id:codeiq:20130905024801j:plain

◆エキスパート対談──増井雄一郎さんと編集部大津谷さん

最初の企画は、HTML5 Experts.jpのエキスパートである
増井雄一郎さんと、HTML5 Experts.jp編集部大津谷さんとの対談イベントです。

増井さんは「wri.peで学ぶ、イマドキのWebアプリの作りかた」という記事で、
7月の月間PV(ページビュー)1位を獲得しました。

この対談では、記事のメインテーマである「wri.pe」の開発に関することから、
増井さんのプライベートに関わることまで、いろいろなお話が飛び出しました。
(写真向かって左が編集部の大津谷さん、右がエキスパートの増井さんです)

f:id:codeiq:20130905030359j:plain

増井さんは2002年に「PukiWiki」を開発、2008年に渡米し、
アメリカでiPhoneアプリ開発のベンチャー企業を立ち上げました。

その後、「Titanium Mobile」のエバンジェリストも務められ、
現在はFrogApps inc.とToreta, Inc.というベンチャー企業でCTOを務めるなど、
多種多様な経験をされています。

対談の中で出た面白いキーワードをいくつか紹介します。

・人から「やってはダメ」と言われない限りは何でもやる

増井さんいわく、自分は他人から反対されなければ、
自分のやりたいことはなんでもチャレンジする性格だと話していました。

wri.peを開発したのもそのような思いからだそうです。
もちろん後から外部にダメ出しされることも多々あるようですが…

・英語が話せなくても海外で働ける

エンジニア同士の付き合いであれば英語で議論ができなくても、
プロトタイプを作ってこちらの思いを伝えることができる、と増井さんは述べました。

1日でプロトタイプを作ってみせることもあるそうで、
そこまでの体力技術力が要求されるわけですから、
ある意味、英語を話すより高度なことをやっているかもしれません…

さらに、大津谷さんから増井さんに質問が投げかけられました。
そのいくつかを紹介したいと思います。

Q.アプリケーションキャッシュをwri.peは使っているが、
Safariでキャッシュをクリアできなくなる問題がある。何か対策をしているのか?

「OSが直してくれるのを待つ」というスタンスなので、何も対応していない。
ビジネスとして開発するなら問題があるかも。

Q.いろいろなプログラム言語を使っているがどの言語が好き?

CやPHP、Rubyなどいろいろな言語を使っているが、母国語はRubyだと思っている。

Q.HTML5 Experts.jpで書いてみたい記事は?

wri.peの次のバージョンで手書きをサポートする予定。
ラインのスムージングやCanvasの利用方法などを
改めて記事として書ければと考えている。

来場者からも質問が寄せられました。

Q.渡米時にAppleやMicrosoft、Googleにいこうと思わなかったのか?

それらの企業の研究所の幹部クラスになるのなら面白そうだが、
エンジニアとして働くだけではあまり面白そうだとは思わない。
そう歯に衣着せぬ受け答えに、会場にいたいわゆる某社の“中の人”から
思いもよらぬ反応があり、会場が笑いに包まれました。

◆エキスパート執筆書籍をかけて、プレゼント抽選会

歓談タイム中に「開発者のためのChromeガイドブック」のプレゼントを
かけたじゃんけん大会が開催されました。

書籍には著者のエキスパート、小松健作さん、吉川徹さん、えーじさんの
生サイン入りというからこれはレアもの。

最後は見事当選されたお二方と一緒に記念撮影で締めくくりました。
おめでとうございます!

f:id:codeiq:20130905031806j:plain

◆HTML5 Experts.jpロゴコンテストの公開コードレビュー

HTML5 Experts.jpでは、ロゴコンテストを8月5日~8月15日に開催しました。
その応募作品を会場でエキスパートにソースコードリーディング&レビュー
してもらおうというのがこの企画。

レビュアーはエキスパートの小山田晃浩さん、進行はエキスパートの小松健作さんです。

f:id:codeiq:20130905032935j:plain

ちなみに今回は8作品がレビュー対象だったのですが、
この企画に割り当てられた時間はたった15分。

1作品2分少々で、次から次へとものすごいスピードでリーディングを進めていきます。
さすがエキスパートです。レビューの結果を簡単にまとめていきます。

現在、HTML5 Experts.jpではコンテストの結果発表も行われているので、
ぜひ、チェックしてみてください!

~レビュー作品とコメントまとめ~

<1作品目>
http://jsdo.it/platism/xkQYH 作者:platism氏
f:id:codeiq:20130905040439j:plain
<小山田さんコメント>
「CSSアニメーション。border-raduisを使って、丸が四角にアニメーションしている」

<2作品目>
http://jsdo.it/mermaid1112/logocontest-robot 作者:mermaid1112氏
f:id:codeiq:20130905040514j:plain
<小山田さん>
「これもCSSアニメーション。小さいdivをたくさんうまく使っている」
<小松さん>
「canvasは使ってないんですね。こういうのもCSSアニメーションでできるんですね」

<3作品目>
http://jsdo.it/shirayuki/1NEK 作者:shirayuki氏
f:id:codeiq:20130905041024j:plain
<小松さん>
「蝶々がひらひらするのはどうやってるんですか?」
<小山田さん>
「そこまで見てなかったんですが、(コードを見て)CSSアニメーションのskewを使ってますね」

<4作品目>
http://jsdo.it/kingpanda/enUm 作者:kingpanda氏
f:id:codeiq:20130905040606j:plain
<小松さん>
「日本の日の出みたいな感じ」
<小山田さん>
「これもCSSアニメーションですね」

<5作品目>
http://jsdo.it/sapphire_al2o3/u4ed 作者:sapphire_al2氏
f:id:codeiq:20130905040856j:plain
<小山田さん>
「(一般的には)three.jsを使うことが多いのですが、これはWebGLのコードを直に書いています」
<小松さん>
「僕も、three.jsを使わないと書けないです」
<小山田さん>
「お手本的なきれいなコードですね」

<6作品目 http://jsdo.it/cx20/9lUe 作者:cx20氏
f:id:codeiq:20130905040632j:plain
<小山田さん>
「手前のアニメーションはサンプルコードそのままです。
 その背景でWebGLを動かしているんですね。ぜひコードを見てみたいと思います」
(会場からどよめきが。ソースコードにテキストアートのようにロゴが書かれている)
<小山田さん>
「これを読み込んでアニメーションさせてるんですね」

<7作品目>
http://jsdo.it/Xpressive_Team/p1Mj 作者:Xpressive_Te氏
f:id:codeiq:20130905041159j:plain
<小松さん>
「折り紙をモチーフにしていますね。ものすごい量のCSS」
<小山田さん>
「これも小さいdivをたくさん使っています。すごい、CSS職人ですね」

<8作品目>
http://jsdo.it/xicolo/peA7 作者:xicolo氏
f:id:codeiq:20130905041304j:plain
<小山田さん>
「シンプルですが、慣性を使ったアニメーションですね」
<小松さん>
「慣性アニメーションにはライブラリとかあるんですか?」
<小山田さん>
「特にライブラリはないが、keyframesを利用しているようですね」

◆エキスパートも一般参加者も楽しいLTタイム

LTタイムでは5タイトルの発表が行われました。
スケジュールの関係で一人5分が持ち時間で、
5分を1秒でも過ぎたらその時点でやめというガチなルールです。

<エントリーNo.1>
株式会社ニューフォリア取締役で、エキスパートでもある羽田野太巳さんf:id:codeiq:20130905033724j:plain
ニューフォリアが最近サービス開始したアプリ開発支援サービス
アプリカン」の紹介をされました。名前の由来はアプリの缶だそうです。
好きなエディタでコードを書き、HTML・JavaScript・CSSをZIPして
サイトにアップロードすると、iOSアプリとAndroidアプリをビルドしてくれます。
アプリの実行ができるだけでなく、デバッグツールも付いていて、
AppStoreに申請しなくても、アプリのコンテンツを入れ替えることができます。

<エントリーNo.2>
@ogaogaさんf:id:codeiq:20130905033732j:plain
@ogaogaさんはTwitterでエントリーをいただいた方で、
勤務先である楽天のHTML5の取り組みついてプレゼンしました。
「普段は英語ですが、今日は大事な話なので日本語で話します」
と前置きしたように、HTMLサイトのDocTypeに関して、
楽天はHTML5準拠してるが競合A社はHTML4準拠であることなど
面白い小ネタねた満載でした。
楽天ではWebサイト、モバイル向けサイト、koboなどでHTML5の
技術を活用しており、意外と頑張っているとのこと。
また、10月26日に楽天テクノロジーカンファレンスを開催するそうです。
「飲食も無料だからぜひ来てね!」という言葉で、残念ながらタイムオーバー。

<エントリーNo.3>
@can_i_do_webさん(写真左)と、@nakajmg さん(写真右)f:id:codeiq:20130905035230j:plain
お二人はエキスパートではありませんが、
HTML5業界では結構有名人ではないでしょうか。
今回はHTML5 Experts.jpを盛り上げるアイデアとして、
エキスパートスタンプラリー!という企画を持ってきてくれました。
エキスパートスタンプラリーは、実際に出会ったエキスパートから
秘密のパスワードをゲット。
スタンプラリーサイトから入力することで、そのエキスパートに関する
スタンプをゲットするという単純だけど面白いサービス。
エキスパートと直接親交を深めることに、一役買ってくれそうなサービスです。
「HTML5 Experts.jp関係者の皆さま、アイデア買い取りの相談を待っています!」
という最後の一言で、会場内をわかせていました。

<エントリーNo.4> 
白石俊平編集長f:id:codeiq:20130905035238j:plain
白石さんは「Leap Motion & Arduino で念力者気分を味わおう」というタイトルで、
今話題のLeap MotionとArduinoや、Webの連携について実例を紹介しました。
「指1本」でLEDが1つ点く、「指が2本、3本、4本、5本」でLEDが
1つずつ点灯してくというもの。
ほかにも、スワイプ、円を描くジェスチャーなどの動きも認識し、
LEDの点灯パターンを変更できるとのこと。
また、今回のデモではNode.jsでArduinoを自由に操作できるjohnny-fiveという
ライブラリを利用しているという説明がありました。
最後に、今後も面白いモノを作っていきたいと意気込みを語りました。

<エントリーNo.5>
小山田晃浩さんf:id:codeiq:20130905035245j:plain
ラストは、またまた小山田さんの登場です!
最近、自身のブログにCanvasのブレンドモードについての記事を書いたら
反響が大きかったそうで、今回LTとして発表してくださいました。
これまでCSSで何かと何かを重ねる際は、透明度を調整するしか
できなかったけど、Canvasが登場し、アルファブレンド(透明度で重ねること)
以外の手法もとれるようになったそうです。
特定のピクセルの中に4つの値を加算したり、乗算したりできるとのこと。
しかし、CanvasはCPU処理で速度が遅いため、
GPUを使えるWebGLを使う方法もあるのだとか。
最後に、アルファブレンドも面白いが、
ブレンドモードはもっと味のある表現ができるので
いろいろと試してみてほしい、と締めくくりました。
LTという短い時間でのお話でしたが、実践的でためになる内容だったと思います。

◆終わりに

本イベントの一般募集は30名と限られた人数だったため、
すぐに定員オーバーとなってしまい、
キャンセル待ちが50人前後発生するような盛況ぶりでした。

今回は、参加したくても参加できなかった方に向けて
イベントの内容を詳しく伝えるつもりで、レポートを書かせていただきました。

次回は10月に開催が予定されているため、興味がある方はぜひ、
HTML5 Experts.jpをチェックしてみてください!

※本記事は
イベント生中継!! HTML5 Experts Night#1をライブライティングしちゃいます
をもとに内容を加筆したものです。


エンジニアのための新しい転職活動!CodeIQのウチに来ない?の特集ページを見る