第8回WordBench京都勉強会に参加して with はんなりカフェ


看板
今日は、はんなりカフェお披露目の日。ゆるゆるカフェ♪の考え方を取り入れつつ、どのような感じになるか楽しみで参加しました。また今回はGoogle Developer User Group 京都(以下、GDG)との共催ということで、Google Appsを中心にGoogleの技術をいろいろ使っている人間なので、HTML5は素人ですが、活動には非常に興味をもっています。今回は規模も大きいということで、京都リサーチパークで開催されました。ここは何か忘れましたが、何回かイベントで訪れたことがありました。

プログラム

  1. 10:30 — 12:30   はんなりカフェ 〜 HTML5とWordPressなお話の会♪
  2. 14:00 — 18:00  GDG京都 HTML5とWordPress勉強会 FEAT.WordBench京都 2012年度 第8回勉強会
  3. 18:30 — 懇親会

はんなりカフェ(第1回の様子

午前のはんなりカフェ成果物(模造紙)を見る人達

午前のはんなりカフェ成果物(模造紙)を見る午後セッショの人たち

ワールド・カフェとアンカンファレンスを融合したような手法を用いるゆるゆるカフェ♪の考え方に共感したWordBench京都の主格メンバー(matsudaさんと瀬戸さん)で立ち上げられました。WordBench京都では、第3回勉強会でワールド・カフェを開催されていて、こんなにきっちりとまとめられているので、そういったことをする下地は育っていたのかなーと思います。手法についてですが、私の主観では下記のような感じかなと思っています。

  • ワールド・カフェ:設定したテーマに沿って参加者同士がフラットに話し合う
  • アンカンファレンス:参加者が出しあったテーマを元にフラットに話し合う
  • ゆるゆるカフェ:「セルフ・ブランディング」を先に見据えた「感じる力」を伸ばすことを主眼において、参加者が出しあったテーマを元に、フラットに話し合う

はんなりカフェはそれらを参考に、京都らしい場の和ませ方、進行の仕方を模索していくんじゃないかなーと勝手に思っています。実際に体験した体験談は、別途ブログを書いていますので、そちらを参考にしてください。

HTML5とWordPress勉強会

GDG京都およびWordBench京都、京都リサーチパークのそれぞれの紹介が冒頭あった。
京都リサーチパーク紹介は、支援しているGDG京都開催ということで、場所を提供していただいたからという経緯のようです。それから下記が話されましたが、そのときのメモをそれぞれ載せておきます。

  1. 15:00〜 「そろそろはじめるHTML5 ご一緒にWordPressはいかがですか?」 @matsudasu
  2. 16:00〜 「CSS3の話」 @tomokoNeko
  3. 17:00〜 「WordPressの話(仮)」 @as_chachamaru
  4. 18:30〜  懇親会

1. 「そろそろはじめるHTML5 ご一緒にWordPressはいかがですか?」 @matsudasu

会場風景

冒頭、W3C HTML5 Logo にあるそれぞれのロゴについて、「アプリケーション」「デザイン」「マークアップ」の3つのカテゴリーについて簡単な説明をされ、今回は「マークアップ」ついての説明をされた。

  • いつから使える?(今から! 2009年のGoogle I/O)
  • モダンブラウザへの切り替え
  • スマートフォンの普及
  • 勧告は2014年予定
    • 皆が使い始め、問題が修正されていき、もう大丈夫ということになったら勧告されるという流れ
    • 大きくは変わらないでしょう(そうでなければ、すでに使っている人たちへの影響が大きすぎる)

HTML5は書き方が非常にシンプルになった。

新要素

  • header, footer, section, article, aside, nav, hgroup
  • canvas, video, audio, source
  • figure, figcaption

など

廃止された要素

  • frame, font, big, center, blink, s, u

ウェブデザイナーは利用していないと思うが、筆者のような一般ユーザは、fontやcenterはよく使う。
centerはCSSで中央にいかないブラウザ対策のために埋め込んでいるだけで、単体で利用しているわけではない。fontは文字サイズを変更するのに以前つかっていて、そのままにしているサイトは結構ある。

意味・使い方が変わった要素

下記が紹介された。

  • a
    • ページ内リンク指定ができなくなった(<a name=”hogehoge”> → <span id=”hogehoge”>へ変更)
  • address
    • そのページに関連する情報という意味へ変更
  • small
    • 細目という意味(著作権情報などが追加するため?)
  • b
    • 重要じゃないけど、少し見た目を変える(太文字にならない)
  • i
    • 注釈や本タイトルで斜体が必要な場合に使われる(斜体にはならない)
  • hr
    • 文章の切れ目という意味が追加
  • dl
    • dfnタグとともに意味が増えた?

古いブラウザ対応

  1. html5shiv.js
  2. modernizr.js
    • HTML5 / CSS3に対応しているかどうかを調べるツール
  3. polifill
  4. 諦めも肝心
    対応している場合には綺麗に、それ以外は出来る範囲で諦めるという考え。たとえばボタンの四隅の丸み(簡単に丸みを出せない古いブラウザへは、四角いボタンでいいじゃないかという感じ)などが例である。

    • プログレッシブ・エンハンスメント
    • グレイスフル・デグラデーション
  5. フォールバック
    • linear-gradient:非対応なら文字も含めて出てこない場合がある
      backgroud-colorも併用しよう・・・とか

これからのブラウザ対応

  • ベンダープレフィックス
    • どこかに識別タグを入れておいて、そのサイトの対応ブラウザを知るとか。しかし将来的にそういった機能は無視される可能性もあるので注意が必要。
    • input type=”number” などを使うと、iOSでは入力時に数字入力画面が出てくれる等。しかし、iOS5から先頭の0が消えたりする・・・しかしまぁそれはAppleの問題ではなくて、type=”number”の仕様に書いてあった・・(このような事に注意が必要)
  • セマンティックスウェブ
    • アクセシビリティ、デザインの自由度、SEO、メンテナンス性があがる・・・これってHTML5だからというのではなく、いまのウェブデザイン・レイアウトの流れ。

こういうのはWordPressなどCMSを使えば、一から理解する必要もなく新技術を使えて、セマンティックスウェブでもあるため、便利。完全にデザイン・レイアウト、コンテンツ、技術を分けて管理できることが特徴。

2.「CSS3の話」 @tomokoNeko

Web CreatorsやWeb Designing で執筆業もしている方。

スマートフォンのポイント

  • iOSとAndroidは結構違うので注意が必要。
  • マウスオーバーがない
  • バージョン問題
    • iOSは比較的古い機種でも最新版にできるが、Androidは古いバージョンが使われていることが多い(2.x系)。バージョンアップも発売時からされない場合がある。
    • つまり、最先端なプロパティは使わないほうがいい。セレクタは使える

セレクタ

CSS3.0には便利な様々な利用方法があり、面白いですね。下記は少しメモった内容です。

  • 偶数、奇数、末尾ならという条件がCSSに用意されているので便利
  • しましま模様
    • li:nth-child(odd){ background-color: #F1F1F1; }
  • border-radius(角丸)
  • background-size:Retinaディスプレイ対応ができる

AMPPSを利用したWindows/Mac間の開発環境構築

AMPPSについてはMacのシンボリックリンクのところで、MySQLデータ参照ができずに止まってしまっているとのこと。これは後日試してみたい。

3.「WordPressの話(仮)」 @as_chachamaru

  1. インストールとアップグレードは簡単!
  2. テーマの着せ替え
  3. 必要な機能はプラグインで

発表風景

インストール

プレゼン資料でWordPressの導入方法の説明。

WordPressをダウンロードし、そのまま公開されているところにアップロード、アップロード先にアクセスして指示に従うだけ。

  1. 自分でインストール
  2. WordPressサポートしているホスティングサーバを利用
    WordPressのダウンロードやアップロード等が不要。
  3. すでにWordPressを用意しているWordPress.comを使う(ユーザ登録のみで基本無料、ただしプラグインなどは導入できないなど制限あり)

テーマの着せ替え

ブログメインのTwenty Eleven、しかし次期WordPres 3.5に搭載されるTwenty Twelveからは、現在の新しい考えを採り入れているとのこと(聞きそびれた・・・)

Theme-Check(プラグイン)によるテーマの信頼性のチェック

必要な機能はプラグインで

アップグレード

ボタン一つでアップグレードされる。簡単なのだ!
ただし、動作しなくなるプラグイン(新バージョンに非対応)やテーマもあるので、そのあたりは先に調べておく必要がある。

懇親会

結構なボリューム

結構なボリューム。スルメの天ぷら?が結構おいしかった

懇親会では、Google I/Oの話、ユビキタス社会とセキュリティ、コンピュータウィルスの脅威とUSBメモリ等外部メディアに対する防衛方法などHTML5やWordPressとまた趣のちがった話も盛り上がりました。もちろん、WordPressが何故広く使われているのか、HTML5関連の話も花を咲かせたことでしょう。

私自身、さすがに懇親会でそこまでウォッチしてませんでしたが、録音して書き起こししたら面白いかもしれないなとは思いました(やりませんが)。懇親会の風景写真については参加メンバーのOKが出たら載せたいと思います〜。ということでOKがでたので載せます〜。

第8回WordBench京都勉強会・親睦会

第8回WordBench京都勉強会・親睦会

2012年9月1日 木谷公哉(kimipooh)
2012年9月16日 公開

広告

第8回WordBench京都勉強会に参加して with はんなりカフェ」への1件のフィードバック

  1. ピンバック: KOF2012に参加して(初日11/9編) « Kimiya Kitaniの徒然なるブログ

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中