検索
連載

九州で開催された、2つのHTML5のお祭り：UXClip（19）

九州の福岡と宮崎で開催された、HTML5勉強会をレポートする。「small画面でも、BIG画面でも、いま、すぐ使えるレスポンシブ活用術」とは？

Share
Tweet
LINE
Hatena

　2013年2月9日から10日にかけて、九州の福岡と宮崎でHTML5に関する大規模なイベントが2つ開催されました。この2つのイベントをレポートします。

　九州で行うHTML5に関連するイベントとしては、どちらもかなり大規模なものでした。テーマはHTML5となっていますが、HTML5やHTML5に関する技術の裾野はとても広いため、以下のように幅広い内容のセッションがありました。

  • HTML5の仕様についての内容
  • エンジニア向けの技術的な内容
  • HTML5を利用したWeb制作に関する内容
  • レスポンシブWebデザイン
  • HTML5とSEO
  • コミュニーケーション系API
  • HTML5を利用したスマートフォンアプリケーション

　どちらのイベントもエンジニア、デザイナーといった職種にかかわらず、HTML5に興味を持つ多くの方が参加していました。

HTML5 Carnival Fukuoka

　2013年2月9日に九州産業大学で「HTML5 Carnival Fukuoka」が開催されました。「HTML5 Carnival Fukuoka」は3トラックで合計12セッションあり、事前参加希望者が500人を超えました。

　福岡の地元コミュニティ「html5+α@福岡」と、html5jの共催で、このイベントは実現しました。「html5+α@福岡」では定期的に勉強会を開催していましたが、このような規模のイベントを開催するのは初めてだったそうです。

　「HTML5 Carnival Fukuoka」の基調講演で、イベントの責任者である下川北斗氏は、目的の1つとして「イベントを通じて、さまざまな距離を縮め近づけたい。そしてイベント名にカーニバルとあるように、お祭りのように楽しんでほしい」と説明されました。

　html5jの管理人の白石俊平氏からは「今年のhtml5jのテーマは『壁を超える』です。エンジニアとデザイナー、東京と地方といった壁を超えて、どんどん一緒に盛り上げたい」と話されました。

　多くのセッションのうち、Adobe 轟啓介氏の「HTML5のWeb制作を確実に楽にする最新のアドビWeb制作ツール」は人気が高かったです。

　セッションではAdobe Edge Animate、Adobe Edge Code、Adobe Edge Inspect、Adobe Edge Reflowの4つのツールが紹介されました。Adobe Creative Cloud 無償メンバーシップに登録することで、一部の製品で制限がありますが無償ビルドが利用できます。

　Adobe Edge Codeは特に注目を集めていました。Adobe Edge CodeはHTML、CSS、JavaScriptで作られたエディタです。

　ファイルを切り替えずにHTMLの定義やJavaScriptのコードを表示するクイック編集や、CSSを保存する前に確認できるライブプレビューといった機能があります。またAdobe Edge Codeにはオープンソース版のBracketsがあり、こちらは登録などをせずに利用できるそうです。セッション資料はこちらで公開されています。

　また「HTML5 Carnival Fukuoka」では福岡の企業に所属する方のセッションも多く、とても盛り上がっていました。セッションのタイムテーブルや、録画されたビデオは以下のリンクから確認できます。

HTML5 Conference Miyazaki 2013

　2013年2月10日に宮崎産業経営大学で「HTML5 Conference Miyazaki 2013」が開催されました。

　「HTML5 Conference Miyazaki 2013」は2トラックで合計12セッションあり、事前参加希望者は200名を超えていました。こちらは宮崎の地元コミュニティ「IMO」と、html5jの共催で、このイベントは実現しました。

　「IMO」は今回のカンファレンスの開催にあたって、新しく設立されたコミュニティです。今後も勉強会やカンファレンスなどの活動を継続的に続けていくために設立されたそうです。「IMO」はそのまま「いも」と発音します。宮崎は焼酎が有名なこともあり、その原料となる芋をモチーフとしたそうです。

　Opera Softwareのダニエル・デイビス氏の「small画面でも、BIG画面でも、いま、すぐ使えるレスポンシブ活用術」は、福岡と宮崎の両方で講演されましたが、どちらの会場でも多くの人が聴講していました。

　セッションでは、複数の画面サイズに対応させるポイントして、以下の8点が挙げられました。

  1. view portメタタグを使う
  2. メディアクエリを使う
  3. コンテンツをシングルカラムにする
  4. 画像の幅を最大100％にする
  5. 不要なコンテンツを非表示にする(ただし表示できるようにもしておく)
  6. HTML5の機能(フォーム、位置情報、オフラインストレージ)を使う
  7. :hoverのあるところでは :focus も使う
  8. エフェクトはJavaScriptよりCSSを使う

　セッションではPC向けのサイトを、その場でスマートフォンなどの小さい画面に対応させるデモが行われました。セッション資料はこちらで公開されています。

　イベントのクロージングでは、各セッションのスピーカーがそれぞれの感想を述べました。大きく共通していた内容としては「HTML5やHTML5に関連する技術は幅広く、すべてを勉強していくのは難しいが、どのような技術でどのようなことができるのかを知っておくことは重要」でした。

　セッションのタイムテーブルや、録画されたビデオは以下のリンクから確認できます。

まとめ

　福岡、宮崎ともに多くの参加者が来場し、とても盛況でした。セッション内容は多岐に渡り、HTML5を中心とした技術の広がりを実感しました。

　私はhtml5jのスタッフとして同行し、また宮崎ではスピーカーを務めさせていただきました。2つのイベントを通じて、九州の多くの方々と話すことができ、東京と九州という距離や、職種の違いを超えたつながりを作れました。今後もhtml5jのスタッフとして、壁を超えた活動をしたいです。

ひらいさだあき

カカクコム　食べログ本部　エンジニア、html5j スタッフ／HTML5とか勉強会 スタッフ

以前はSIerでJavaを、いまはRubyとRailsで開発しています。HTML5やJavaScriptも楽しいです。sadah、techlog


「UX Clip」バックナンバー

Copyright © ITmedia, Inc. All Rights Reserved.

ページトップに戻る