いつきの技的日記 RSSフィード Twitter

2010-03-12

html5勉強会in福井まとめ記事

3月12日にめがね会館で開催

f:id:itsuki_kosen:20100312210137j:image:w500

↑当日の様子

3月12日 福井県鯖江市めがね会館で開催.

とりあえずまとめ速報.

レイアウト調整とか写真とか文章添削とかあとでします.

  • 3月20日 写真つけました!

jig.jp 福野さんミニセッション - いつきの技的日記

HTML5勉強会まとめ "HTML5を書いて動かすよ" @rch850 - いつきの技的日記

ぎゅ〜と濃縮,HTML5. - いつきの技的日記

jig.jp 福野さんミニセッション

f:id:itsuki_kosen:20100312203823j:image:right:w400

  • HTML5美しい!
  • すっきり!
  • 位置ズレなし
  • CSSがちゃんとしてる
  • IEもほぼOK
 

スマートフォンアプリ作ろう!

対応状況

iPhone...大体ok

android1.X...大体だめ…

android2.X...大体ok!

HT03とかXperiaは1.X...

nexus one買おう!

HTML5Flashを殺さないよ!きっとおそらくたぶん.

jig.jp W3Cに加入予定!!!

HTML5アイデアソン

わたしはHTML5で〜〜を作る!

出た案

f:id:itsuki_kosen:20100312205822j:image:w300:right

most good idea...デザイン用RADツール

カップヌードルとHTML5本贈呈!!

f:id:itsuki_kosen:20100312210605j:image:w400

f:id:itsuki_kosen:20100312211519j:image:w400

HTML5勉強会まとめ "HTML5を書いて動かすよ" @rch850

りちゃさんの発表のまとめ

f:id:itsuki_kosen:20100312193338j:image:w400

HMTL5は幅広い!

  • タグ

canvas video audio...

webサイトアプリも!

どのブラウザで作るか
  • 向いてるタグとか

Opera → Form

FireFox → GeoLocation, FileAPI

googleChrome → Video

Safari

IE → (笑)


フォーム使いたいならOpera

見栄えを素敵にするならFireFox

FireFoxなら大体おk.

新しい機能はChromeの方が早く対応するかも.

iPhonesafariでもhtml5が割と動く.

html5アプリ作るオーサリングツールがあるとかなんとか.

Geolocationはどうやって位置情報とってるん?

実装C++

findmebyip.com

http://www.findmebyip.com/

見てるブラウザhtml5,css3の対応確認できるよ.

f:id:itsuki_kosen:20100312204124p:image

こんな感じに表示.ex) MacOSX FireFox3.5の場合.

デモ

  • HTML 5 Demos and Examples

http://html5demos.com/

http://www.w3.org/2010/Talks/0119-next-web-plh/

いっぱいデモあるんで,これみたら大体把握できる..かも

html5スマートフォンアプリ開発

Titanium Mobileでおk

参考:@ITの連載 http://www.atmarkit.co.jp/fwcr/design/index/index_titanium.html

iPhoneとかAndroidで動くよ


まとめ

iPhoneアプリhtml5でつくれるよ!便利っ!

ぎゅ〜と濃縮,HTML5.

3月12日 福井県鯖江市めがね会館で開催されたHTML5勉強会にて.

また,3月20日 福井県福井市AOSSAで開催されたWCAFセミナーにて.

自己紹介

f:id:itsuki_kosen:20100312181402j:image:right:w400

fitea fxug HTML5hit (北陸でHTML5勉強しよう) などコミュニティに所属.

what's html5

web技術からアプリケーションプラットフォームへ.

canvasとaudioをつかってwebアプリ制作できるよ

デモ

sketpad? (ペイントアプリ)

Mozilla Bespin...ブラウザ上でエディタ.

chrome://newtab

HTML5に興味を持ったのは?

RIA(Flex,Silverright)に興味有りなため.

HTML5の可能性を知ってもらう.興味を持ってもらう.

アジェンダ

概要 構文 追加 リファレンス など

今html4なう.

W3CWHATWG

HTML5とWebApplications 1.0(WHATWGでつくてた)

HTML5と関連仕様 (Webworkers Web storage websocket webSQL...)

マークアアプとAPIの使用

革新より発展を優先する.

HMLT5の仕様策定スタンス

HTML5でどうなる?

マークアップはよりセマンティックに

Webアプリはよりリッチに.

XHTMLが消えちゃう!?云々の説明comic

“Misunderstanding Markup” 日本語訳

web技術のこれから

CSS3 HTML5 JavaScript

  • CSS3 見栄え
  • HTML5 Webデータ構造を表現.
  • JS 各種API拡張.

html5構文とか

doctypeがシンプルに

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

これが

<!DOCTYPE html>

これに

  • 追加要素

section article header footer aside nav canvas audio

  • 削除要素

applet font frame strike/s tt

CSSでできるものは削除 //boldにする

div idで無理矢理してたのをsectionタグでわかりやすく(headerとかarticleとか)

IE対応例

IE用にJSで対応するコードがある

とりあえず面倒い.

52Framework Template ← 定型IE対応用テンプレートあるんで使用すれば楽かも.

入力サポート
  • データの種類

email url date password tel number range

<input name="pass" type="password">

↑タグで指定.わかりやすい

web Forms2.0 test (http://higeorange.com/tmp/testWebForms20.html) //demo

カレンダーとか,正規表現で色々やってくれたり.JS使わなくてすむ

よく騒がれるタグ

jsで描画する.canvasはあくまで領域指定.

基本的に2Dのみ3D一部対応operaとか

グラフィクス グラフ デモ アニメーション

http://www.benjoffe.com/code/demos/canvascape/

canvasで作ってます↑

IE用のライブラリとかある → 一部扱えるように

explorerCanvas ←これ.(IE対応)

  • videoタグ

f:id:itsuki_kosen:20100312184050j:image:w400

W3Cはタグの規定のみ

コーデック/コンテナは規定してない

src属性に動画ファイルのパスを指定.

ブラウザ前にサポートフォーマットが違う.→複数のフォーマットを指定しておくのが有効. //統一しろし.

http://www.youtube.com/html5

JS API拡張.アプリケーション向けの話.

  • Application きゃっしゅ

オフラインアプリケーションを実現するAPI

  • Geolocation API 位置情報 

対応してるのはFFとかくろむ.  スマートフォンブラウザでも対応してたり

ブラウザ経由で位置情報を取得.

ウィンドウ毎のデータを保持するストレージ

  • web sql detabase

ローカルデータベースを扱うAPI

SQLを使い,データベースにアクセス

  • WebSockets

リアルタイムデータ通信

サーバサイドと双方向通信を実現するAPI

サーバサイドと双方向通信を実現するプロトコル

  • ?(聞き逃した><)

ブラウザ上でファイル操作するAPI

ファイル読み込みの制約 → ユーザーアクションが必用

ブラウザ対応を調べる為に...

  • When can I use...

http://a.deveria.com/caniuse/

html5以外もCSS3の対応とかも見れる

  • HTML5 Demos and Examples

http://html5demos.com/

  • Modernizr

http://www.modernizr.com/

HTML5Flashと私

Flexアプリ開発やってるよ

FxUGで活動

巷のFlash悲観論

Player ? CS ?

オーサリングツールとしてのこって,JSとかHTML5に書き換えら得れればおk

まとめ

勧告はだいぶ先.

使える部分から部分適用

iPhone/Androidでは結構イケる

IE以外では結構イケる

HTML5はデザイナ/開発者にとって魅力的.

これまでのWeb制約が変わります.

Webサイトとかアプリとか作りたくない人は,Chrome Extensionsで便利なツール作ればいいじゃん!

お勧めツール

HTML5で書いてあるかどうかわかる.


宣伝

HTML5-FIT 北陸でHTML5の普及とかをがんばるコミュニティ

f:id:itsuki_kosen:20100312191927j:image:w400

発表資料

upされたようなので.

Connection: close