「DeNA × 面白法人カヤック × クリーク・アンド・リバー社 セミナー」に登壇することになりました。
はじめまして。 このブログで書くのは初めてのME課の比留間(@edo_m18)です。
今回は9/23に開催される「DeNA × 面白法人カヤック × クリーク・アンド・リバー社 セミナー」で、 自分のセッションのプロローグを書きたいと思います。 セッションのタイトルは「もしも、マークアップエンジニアがひとりでWebサイトをつくるとしたら ～HTML5でつくるWebアプリ～」です。
話の内容は、最近なにかと目にする「HTML5」について。
その中でも関連API(JavaScript)を使ったwebアプリについて話したいと思っています。
HTML5になることで、今まではサーバを介してしかできなかったこと、そもそもブラウザ上では実現不可能だったことが実現できるようになります。
これを利用して、マークアップエンジニア(だけ)でも作れる、ちょっとしたwebアプリを紹介しながら、HTML5の可能性について話そうと思います。
HTML5ってなにがすごいの？
さて、みなさんはHTML5をご存知ですか？
最近はweb系の記事を見ているとよく目にするようになってきました。
とはいえ、中には「なにがそんなにすごいの？」という人もいるでしょう。
そもそも、タグがバージョンアップしたって対して意味ないじゃん、みたいに思う人もいるかもしれません。
しかし、現在のHTML5は、ただのタグの定義だけにとどまりません。
記事などで「HTML5」と言う場合には、大体の場合において"HTML5とその関連API(アプリケーションプログラムインターフェイス)、場合によってはCSS3やSVGなどの仕様をまとめて"そう呼んでいることがほとんどでしょう。
つまり、webプラットフォームとして格段に表現力を増した技術仕様をまとめて「HTML5」と呼んでいるわけです。
HTML5(や関連API)を使ったデモ
簡単なデモを見てみましょう。
例えば、canvas。ピクセル操作ができる新しい要素です。
Flashであったようなお絵かきソフトなんかも実装できてしまいます。
これの面白い利用例を見てみましょう。
これらはcanvasで作られています。
クリックすると散らばる断片や、映画館の演出など、Flashを使っているかのような演出が確認できます。
CSS3を使ったデモ
さらに表現つながりでCSS3も見てみましょう。
CSS3というと、角丸やグラデーション、半透明といったグラフィカルな部分に目が行きがちですが、それ以外にもたくさんのすばらしいプロパティが定義されています。
例えばこんな例。⇒Adobe社が提供する、HTML5/CSS3特設サイトです。
こちらの案件は自分が制作を担当しました。
一見すると、今までのサイトと大きく違うところは見あたりません。
しかし、WebKit系ブラウザ(SafariやGoogle Chrome)やFirefox、Opera、そして先日公開されたばかりのIE9βでこのサイトを表示してブラウザの幅を拡大・縮小してみると、ブラウザの表示領域に応じてコンテンツのレイアウトが変わるのが分かると思います。
PCで見たキャプチャ
iPadで見たキャプチャ
iPhoneで見たキャプチャ
こうした一連の技術を、マークアップエンジニアはもちろん、デザイナー(やその他の職能)の方でも知っておくことで、格段に表現の幅が広がります。
スケーラブルな画像、インタラクションを持ったAPI、表現力を増したCSS3。
"webでできること"を把握しておくことは、デザインする上で必ずプラスになります。
とある記事に、それをうまく例えた言葉が載っていたので引用したいと思います。
指揮者がオーケストラの楽器の素質を理解していなければいけないのと同じように、デザイナーはウェブの言語を理解しておく必要があるのだ。
出典：なぜデザイナーが HTML5 に関心を持つべきなのか - HTML5.jp
これはデザイナーに限ったことではありませんが、webに携わる以上、webでできることを把握・追っていくことはとても大事なことです。ぜひ、この機会にHTML5に触れてそのすごさを体験してみてください。
作ったwebアプリを先行公開
また、このセミナーのために「マークアップエンジニアが作るwebアプリ」と題して、サーバを使わなくてもできるwebアプリを作成しました。
ToDo管理アプリ - jsdo.it - share JavaScript, HTML5 and CSS
↑赤い「Play」ボタンを押すと、ToDoリストアプリが表示されます。
作成したアプリはToDo管理アプリです。 完全にオレオレ仕様ですが、個人的に自分の見積もった時間と、実作業時間を計りたい、という思惑があったので、最初に見積もり時間を記入し、そこからカウントダウンしていく、という仕様にしました。
このアプリはHTML5の機能を使って作成しています。
(セミナーではこのアプリの作り方もご紹介します)
今後はこうした関連APIなどを利用したサービスも増えていくでしょう。
そうしたサービスが増えてきたとき、マークアップエンジニアはマークアップだけではなく、自分自身である程度プログラムを組めることが求められることも出てくると思います。
今回紹介したアプリのように「自分向け」ということであればセキュリティや動作テストなどもそこまで必要ありません。
ちょっとだけ楽をするために、こうしたツールを自作してみることはとても勉強になると思います。
今回作成したアプリは、jsdo.it上で公開しています。
jsdo.itでは「Fork」という機能を使って、公開されているスクリプトをコピーし、自分の好きなように編集することができます。
この指定を変更したらどうなるのかな？というのを想像しながら変化していくプログラムを見るのはきっと楽しいと思います。まだプログラムを体験したことがない人もぜひ、興味を持ってJavaScriptに挑戦してみてください。
↓セミナーに興味がある方はこちらをチェック！
カヤックのMEに興味ある？
そして今カヤックではHTML5に興味のあるマークアップエンジニアを絶賛募集中です！
