「第17回 HTML5とか勉強会」活動報告

HTML5を用いたサイト開発が、どんどん現実的になっています。マイクロソフトからはIE9が日本でもリリースされ、全ブラウザでHTML5 readyの時代がついにやってきました。

また、5月25日(UTC⁠⁠、ついにHTML5がLast Call(最終草案)を迎えました。今回のLast Callは、HTML5 仕様、すなわち主にマークアップ部分のところを指しており、他の関連仕様(WebStorageやWebSocketなど)は含まれていませんが、大きな一歩であることは間違いありません。

HTML5を用いたサイト開発手法についても、同様のことが言えます。最近では、HTML5対応のオーサリングツールが各社よりリリースされています。これまでは、主にコアな開発者がテキストエディタを用い、開発を行ってきました。しかし、そのままでは裾野は拡がりません。UI開発を支援し、コーディングヒントなどを示してくれる、オーサリングツールが不可欠です。なぜなら、これらのツールを利用することで、ビギナーでも簡単にHTML5を活用したサイトを制作できるようになり、また、プロフェッショナルユーザにとっても業務を効率的に進めることができるため、低コストで良質なサイトを開発することが可能になるからです。

このような流れと、また「みんな、どんなエディタを使っているんだろう?」という興味から、5月24日に開催された今回の勉強会では「HTML5時代のエディタ/オーサリングツール」をテーマとしました(コーディネータは勉強会スタッフの吉川さんです⁠⁠。本稿では、本勉強会の模様をレポートします。

場所は、最近渋谷に移転したmixiさんの会議室を提供いただきました。mixiさんは、サイトの「オレンジ」イメージを薄めるなど、⁠大人な雰囲気」を目指しているとのこと。このため、オフィスもシックな雰囲気となっており、清潔かつ落ち着いた環境の中で勉強会を開催させていただきました。

画像

「Dreamweaver CS5.5」

最初のセッションは、Adobeの太田さんより、Dreamweaver CS5.5について発表いただきました(プレゼン資料はこちらで公開⁠⁠。

モバイルへの対応がとても印象的で、jQuery Mobileの開発支援機能や、CSS3 Media Queriesを用いたときの各デバイスサイズに応じたマルチビューによるUI開発支援機能などが紹介されました(筆者は、PC/モバイル開発を行う際、iOSエミュレータなどを切り替えていますが、これは本当に骨の折れる作業です⁠⁠。

講演の後半では、Dreamweaver以外のツールについても取り上げられました。FlashをSVGに変換してくれるWallabyや、CSS3を用いたアニメーションを簡単に生成するHype(こちらは、Adobeの製品ではありません)などをデモも交えつつ紹介されました。

「VWD と Expression Web 4 で構築する HTML5 と JavaScript」

引き続き、マイクロソフトの物江さんより、Visual Web Developer Expressと、Expression Web 4について、講演いただきました(講演資料は、こちらで公開⁠⁠。

特に、インテリセンス機能が印象的でしたので、こちらについて紹介します。コード補完機能は、IDEの必須機能の一つですが、Visual Web Developerでは、コードを常に解析しながら、補完してくれます。例えば、

for(var i = 0; i < 10; ++i) {
  window.hoge['fuga'+i] = 1;
}

とコーディングすると、これをダイナミックに解析し、それ以降"hoge"と入力すると、"fuga0"~"fuga9"を候補としてポップアップしてくれます。また、Object typeのチェックも同様に行なってくれるため、

x = 1;

の場合は、"x"に対してNumber Objectのプロパティやメソッド候補をポップアップし、

x = "1";

の場合は、String Objectの候補をポップアップしてくれます。

さらに、Expression Web 4では、HTMLが仕様どおり記述されているかチェックしたり、SEOのチェックを行ってくれるなど、サイトの効果を高めるための様々な機能が備わっていることが紹介されました。

「コーディングを3倍早くする! Vim入門 1.2」

休憩時間を挟んだ後、カヤックの比留間さんより Vim についてショートセッションをいただきました。なお、今回の勉強会では最後にGoogle モデレータを利用した投票を行ったのですが、本発表が見事1位を獲得しました(発表資料は、こちらで公開⁠⁠。

Vimは、古くからあるテキストエディタで、CUIを前提としているため、全ての操作をキーボードで行います。このため、操作は独特で習得するのには時間がかかるのですが、一度慣れてしまうと「Vim病」が発症し、Vimから離れられなくなるほど便利なエディタであることを冒頭で述べられました。

プレゼンのほとんどは、Vimを用いたライブコーディングとなっており、ブロック指定により簡単にインデント整形が可能なことや、一括置換・挿入などをブロックレベルで簡単に行えること、コードをテキストオブジェクトと呼ばれるオブジェクト単位で認識しているため、編集作業が非常に簡単に行えることが示されました。また、プラグインを入れることで、より便利となることも紹介されました。

ライトニングトーク

会の最後に5本のライトニングトーク(5分間のショートセッション)が行われました。

「HTML5へぇ~」

大津さんより、アスキーアートとAudio Data APIのコラボレーションWebアプリHTML5 Radioのアーキテクチャについて発表いただきました。

なお、⁠HTML5 Radio」第0回 HTML5プログラミング&クリエイティブ・コンテストのアスキーアート部門で最優秀作品賞を受賞した作品です(講演資料はこちら⁠。

「Zen-Coding Textarea Extension 」

ひらいさんより、<textarea>でZen-codingを利用可能とする、Chrome extensionについて発表いただきました。

なお、Zen-Coding Textarea Extension第0回 HTML5プログラミング&クリエイティブ・コンテストのChrome Extension/Apps部門に応募いただいた作品です(講演資料はこちら⁠。

「秀丸で整形する」

株式会社コネクティの若狭さんより、秀丸の置換機能とマクロ機能を使った Excel ファイルからのJSON作成方法について発表いただきました。

「NetBeans7.0 でHTML5」

GENOVAのYamazakiDaisukeさんより、NetBeansのリファクタリング、補完、リビジョン管理機能などについて発表いただきました。

「Emacs de Javascript Programming」

小保田さんより、Emacsを用い、Javascriptのコーディング→テスト→deployの一連の流れを実現できることを発表いただきました(講演資料は、こちら⁠。

最後に

レポートに対する感想や、勉強会に対する希望・意見・取り上げて欲しいテーマなどありましたら、twitter(@komasshu)までお気軽につぶやいていただければと思います。本勉強会は、毎月第3水曜日または第3木曜日に開催していますので、興味を持たれた方は是非参加ください。ただし、会場や講演者スケジュールの都合などにより、開催日程が前後することがあります。開催のアナウンスはhtml5-developers-jpで行われますので、こちらをご確認ください。来月も開催予定です。お楽しみに。

なお、筆者が管理しています、こちらのサイトEvents in HTML5-jpで開催状況や、過去のアーカイブなども公開しておりますので、是非ご活用いただければ幸いです。

おすすめ記事

記事・ニュース一覧