FUKUOKAに参加してきた。キリンブログ福岡在住のウェブ制作がんばるおじさんが少ない語彙力で更新するブログ。FUKUOKAに参加してきた。FUKUOKAのレポート記事です。CARNIVALが九州産業大学にて開催されたので参加してきました。参加人数500人近くなってる。すごっ!でっかいイベントとは聞いていたのですが、これだけの規模になるとは開発者、デザイナーのみなさんのHTML5に対する関心の強さを感じます。なんてこった、ありがたいありがたい。運営者のみなさんやスピーカーのみなさん、スタッフのみなさんに足を向けて眠れません。ことで行ってきましたHTML5カーニボゥ!会場の九州産業大学がある駅です。博多から東側って実は来るの初めてでした。(北九州は行ったことあるけど。)おお!カーニボー開催中!広々として素敵なキャンパスですねー。天気もいいし気持ちいいなー。と結構歩きましたが、やっと会場に到着!すでに最初のセッションが始まっているので早速なかに入ってみると、すごい人だ!240人も入る教室がほぼ満席!WEB制作者って多いんだなーと勝手に圧倒されました。どれも魅力的なセッションなので毎回どこの教室に行こうか迷いましたが僕が参加したセッションについてまとめておきます。白石俊平さんオフラインWEBとは?例えば地下鉄でWEBアプリケーションを立ち上げてて、電波が途切れても使える、電波が復活すれば作成中のデータが引き継がれる。そんな便利な機能のこと。去年モバイルファーストがバズワードになったけどそろそろオフラインファーストってコンセプトが注目されるのでは?オフラインWEBのメリットはオフラインでも使えること、そしてサーバーアクセスをしないのでスピードが早い。MobileのAPIドキュメントとかはオフラインWEB対応になっててサクサク動く。storeのトップ50に入るアプリケーションの多くはなんらかの場面でオフライン機能を実装している。適材適所があるのでコンテンツやサービスの内容によってうまく使うことが大事。読み物コンテンツやメディアは、データ量が多くなるし、ユーザーの行動を追うトラッキングなどがオンラインじゃないと有効にならないためにオフラインWEBには向いていない。向いているのは編集を目的にするWEBアプリケーションとか。Slidesなんかはオフライン機能を持っていて、オフライン時に編集した内容はオンラインになったときにその場で送信されるようになっている。HTML5はこうしたオフラインWEBを実現するAPIを持っていて主なものは以下の4つ。APIそれぞれの機能や具体的な使い方はUstreamで確認してみてください。オフライン機能を持つWEBアプリケーションは、オンラインを前提としたWEBアプリケーションとは大きく作り方が異なるので、これからの時代は「オフライン機能があることを前提」にしたオフラインファーストの考え方が大事になってくる。おおくぼひろあきさんFlashとActionScript制作に携わってきたおおくぼさんに、そのノウハウを活かしたJavaScriptでのコンテンツ制作について話していただきました。FlashじゃなくてHTML5でビュンビュン動くサイトを作ってと言われたらどうするのか?のっけから身も蓋もなくてふいたwでもそれってじつはこういうことなんです。確かにFlashのようなアニメーションを実現しているのはHTML5の機能だと勘違いされる場面も多いと思います。HTML5には確かにCanvasという機能がありますが、流行りのパララックスサイトやHTMLの要素を動かして魅せるサイトとして注目されるWebサイトはJavaScriptによって実現されているものが多いはずです。JavaScriptを使ってDOMを操作するなら、HTML規格は必ずしもHTML5である必要はないんですよ、ということでした。無用のトラブルを避けるためにも文字コードはUTF-8がいいですよ、と。absoluteを設定する。absoluteをあんまり使うとレイアウト作るにもJavaScript使う苦労がある。IE6~8はCSS3使えないし、Polyfillなライブラリ使っても結局JavaScriptが衝突したりと大変なこともある。多くの現場をこなしてきたことで見えてくるノウハウや注意点がものすごくためになりました。最後に「これは本質的だなー」と思ったのが、JavaScriptで実現するアニメーションについては、起点と終点の内容をHTMLとCSSで表すことができなければいけない。動こうが基本となるのはやっぱりHTMLとCSSでしっかり書けているかということなのです。セッションに関する補足(?)もブログにまとめいただいています。イナヅマTVログちなみにこのブログにたまーに貼ってあるアフィリエイトリンクをクリックすると何かいいことがあったり、アフィリエイトリンクをクリックすると何かいいことがあるそうです。大事なことなので2回言いました。おおくぼさんがしきりにそう言っていました。セッションのあとは「JavaScript頑張ろう!」と思える内容でした。勉強会@福岡で聴けるようなので参加したいなと思います。ダニエル・デイビスさんダニエルさんのこのセッションもめちゃくちゃわかりやすくて目から鱗が落ちまくりでした!まずは下記のような概略的なレスポンシブウェブデザインの話しから。・ECサイトをレスポンシブデザインにしたらコンバージョン率や注文数、売上げが増えた。・モバイルユーザーは必ずしも電波状況が悪いところや移動中とは限らない。・コンテンツの縮小を図るより、表示の最適化を考えるべき。この後に、既存のWEBサイトをRWDにするためのライブコーディングが実際に行われたんですが、このわかりやすいことなんの!説明や考え方も非常にシンプルで、すでにあるWEBサイトにモバイルデバイス用のレイアウトも加えるときのポイントというか勘所というかとにかく「ああ、こうやればいいんだ!」という手順がすんなりと頭に入ってきました。RWD気になってるけどまだ手をつけられないでいる。思ってる人はぜひダニエルさんのUstreamを見て欲しいです。APIなど通信系のAPIについて小松さんのお話を聞きました。カエルの着ぐるみを着て異端な空気をプンプン醸し出しておりましたが、内容はいたって真面目な内容でした。いまとなってはあのお姿を写真におさめていなかったことだけが悔やまれます。ああほんとうに惜しいことを致し候。Ustreamからのキャプチャ画像を貼っておきます。セッション内容は各プロトコルについての説明から始まり、WebSocketの特徴、WebOSの説明へ展開していきます。技術的な説明にはなかなかついていけなかったんですが、PCでもうひとつのデバイスのミュージックプレイヤーを操作したり、スマートフォンでPCのアプリケーションを立ち上げたりというデモを実際に目の前で見せてもらって、これらのAPIを使ってどのようなことが出来るのか?という部分はイメージを持つことができました。・IPアドレスに依存した通信システムをつくるのはよしましょう。Violationsを前提にして物事を考える。HTML5の機能によってネットワークの形も大きく変わっていきます。デバイスの連携が実現することによって離れた場所にあるコンピュータを遠隔操作したり、私たちの暮らしも変わってくるでしょう。同時にセキュリティやプライバシーの面でクリアすべき点も考えていかなければならないということですね。FUKUOKAにて僕が聴いたセッションでしたが、どれもまさに変化するWEB技術の最前線を走っている方たちのお話しで、HTML5の様々な側面について理解を深めることができました。会場にはたくさんの方たちが集まっていましたが、こんなに多くの人が自発的な学習をするような業界ってあまりないんじゃないかなと思います。それもやはり、ものづくりが好きという気持ちの表れで、すごく素敵なイベントだったなと思います。最後に今回のイベント運営の方々、スタッフの皆さん、スピーカーの皆さん、このようなイベントを開いてくれて本当にありがとうございました。Fukuokaに参加してきた。Fukuoka」に参加してきました。nrjlogセッションUstream、資料まとめさて、長いレポートになりましたが読んでくれてありがとうございます。以下は今回開かれたセッションのUstreamと資料を見つかった分だけまとめておきますのでぜひ役立ててください。漏れている資料があればリンクさせていただきますのでTwitterなどでお知らせください。