レポート

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

この記事を読むのに必要な時間:およそ 2 分

続・Twitter Bootstrap入門

通常セッション最後として,槙俊明さんによるTwitter Bootstrapについて講演いただきました。

画像

Twitter Bootstrapは,前セッションでも少し触れたTwitter社が提供するCSSフレームワークです。容易に見た目の良いページを作ることができるため,デザインが得意でないエンジニアなどがよく用いているようです。見た目が良いだけではなく,IE7から対応していたり,レスポンスが良かったり,ドキュメントが多く存在するというのもこのBootstrapの優れている点だそうです。

使い方は,一部コンポーネントを除いて,本家からダウンロードしてきたCSSを適応するだけで利用可能になります。CSSのみで利用できるコンポーネントは以下になります。これらのコンポーネントは要素に対象のクラスを指定するだけで適用されます。括弧内は利用するクラスの名前で,アスタリスクになっているところは,それぞれ色指定です。primary, info, success, warning, dangerがあります。

  • レイアウト(container, container-fluid)
  • グリッド(row - span1~12)
  • ナビゲーション(navbar - navbar-inner - nav)
  • 通知(alert + alert-* )
  • ボタン(btn + btn-*)
  • ラベル(label + label-*)
  • フォーム(form-horizontal)
  • テーブル(table + table-border, table-striped, table-condensed)
  • タブ(nav + nav-tabs, nav-pills + nav-stacked)
  • パン屑リスト(breadcrumb)
  • ページング(pagenation)
  • ページャー(pager)
  • プログレスバー(progress + progress-info + progress-striped + active)
  • miscellaneous(well)

他にもJavaScriptを利用したパーツもあり,そちらはjQueryも必要になるそうです。JavaScriptを利用することで使えるようになるパーツは以下のものになります。

  • モーダル
  • ドロップダウン
  • タブ
  • ツールチップ
  • ポップオーバー
  • アラートの閉じるボタン
  • ボタンのトグル
  • collapse

このBootstrapは,容易に利用できるという点が,どのサイトも同じに見えるという弊害を生んでいるそうです。それらを解決するには,CSSを変更して色やサイズを変更する必要があります。そこで変更を支援するサイトを利用することで,容易に他のサイトとの違いをつけることができるようになるそうです。

また,このようなTwitter Bootstrap利用を支援するサイトは他にも多く存在し,使いづらいformパーツを簡単にするツールもあります。こちらは槙さんご本人が公開しています。JSONデータから必要なformを作成するツールだそうです。リンクはこちらです。

講演内では各パーツについての詳細や,支援サイトも紹介されていますので,是非">講演資料や講演動画をご覧ください。

オレオレ拡張はやめて,マイクロデータを使っていきましょう

ここからは,懇親会中のセッションになります。

マイクロデータについて,Grow! Inc.竹野淳さんにLTしていただきました。予定に無かった急遽飛び込みでのLTになります。

画像

内容は,ソーシャルボタンをどのように設置するかのお話です。facebookや,Twitterはdivタグにdata-*要素を利用して,ページのタイトルやURLを指定することで,どこのサイトをシェアしたり,Likeしたりするのかをサービス側が検知します。

しかし,これよりマイクロデータ使った方式の方が良いのでは?という提案です。理由は,マイクロデータならGoogleの検索対象に入っていますし,同じく入っているOpen Graphだと1ページに1つしか情報が入れられないが,マイクロデータなら複数入れられるとのことです。

詳しくは,講演資料をご覧ください。

HTML5クイズ!解説

最後に,今年2月に開催されたデブサミ2012にてhtml5j.orgブースで展示していました,HTML5クイズについて,html5j.orgメンバーの吉川徹さんに講演いただきました。

画像

内容は,クイズの解説とクイズを一般公開したという発表が主なものでした。一般公開されましたので,是非一度クイズに参加してみてください。クイズが終わってから,講演資料をご覧になるほうが楽しめると思います。

講演資料はこちらになります。

最後に

レポートに対する感想や,勉強会に対する希望・意見・取り上げて欲しいテーマなどありましたら,twitter(@yutaro_i)までお気軽につぶやいていただければと思います。

本勉強会は,毎月第3水曜日または第3木曜日に開催していますので,興味を持たれた方は是非参加ください。ただし,会場や講演者スケジュールの都合などにより,開催日程が前後することがあります。開催のアナウンスはhtml5j.orgのMLで行われますので,こちらをご確認ください。また,コミュニティサイトhtml5j.orgも公開していますので,是非こちらもご確認ください。

著者プロフィール

井原雄太郎(いはらゆうたろう)

「HTML5とか勉強会」のスタッフ,主に雑用とたまにレポート記事を担当。Web系男子を目指す1987年生まれ。主に使う言語はJavaとJavaScript。

twitter:@yutaro_i