『2012年のHTML5、CSS3、JavaScriptはこうなる〜実際のサービス事例で考えるHTML5の近未来』に参加してきた #html5semi

勉強会 HTML5 CSS3 Javascript


(写真：神保町駅改札前)

HTML5関連ネタはやろうやろうと思いつつ個人的にはリーチ出来てない分野でして、ちょっくら拝見してきました。ちなみに上記の募集サイト、凄い人気で200人の定員に一時は倍の400人が登録すると言う事態に。HTML5人気は凄いですね〜。

開催開場は株式会社オプト１F大会議室＠神保町。この日は朝から雪が降るなどして天候が崩れていましたが、夕方〜開催の頃には問題無く止んでおりました。しかし外は寒かった！(>_<)

入場時の状況で5分程遅れて本編スタート。以下メモです。

基調講演：HTML5最新動向


【講演概要】
HTML5関連の動きは現在非常に早く、最新動向を追いかけているだけでも大変です。
FullScreen API、Web Intents、Web RTC、Page Visibilityなどなど、大小様々な仕様が日々提案、公開されています。
この講演では、そうした最新動向をコンパクトにまとめてご紹介し、今後のWebの未来を占うための材料を提供したいと思います。

この基調講演に関しては、下記イベントでの内容の手直し版的な内容とのこと。時期的にもそこまで開きは無いので、このセッションはその時の資料＆動画を貼ることで割愛したいと思います。

※今回用に手直しされたVer。併せてUPしておきます。

第1部　HTML5で実現する「世界で一番のマンガ投稿＆共有サイト」

  • 大谷 恭仁（おおたに やすひと）氏【スパイシーソフト株式会社　アプリ＆マンガゲット事業部　マンガ★ゲット 運営プロデューサー】


【講演概要】
「世界で一番のマンガ投稿＆共有サイト」を実現するため、なぜマンガ★ゲットはHTML5を採用したのか？
今後の野望を交えてお話いたします。
  • 自己紹介
    • 立ち位置：運営プロデューサー／ディレクター
    • バックグラウンド：前職：スクエニに居た。ゲームに関係した業務に従事。※出版には関連無し
  • そもそもマンガゲットってどんなサービス？
    • Webマンガの投稿共有サイト。
    • 無料で編集・配信/無料で読める
      • マンガ★ゲット
      • ガラケー・パソコン・スマートフォンなど、全てのデバイスで読める（世界初）
      • マンガの編集はコマ割エディタで行う
      • コマで見せていくスタイルなので視点移動が少なく読みやすい。
      • ページモードもある：好みで変更可能（作家によるモード指定もあったりする）
  • もうちょっと深い話
    • 日米それぞれの漫画を取り巻く環境
      • (例)スーパーマン：1938年原作、70年後、映画化。
    • (Q).強大なコンテンツを擁するアメリカのコミック市場は？
      • (A).160億円。凄い少ない。日本は5000億円。
      • なぜか？
        • ビジネスとしての生産性＝集中投資
    • インターネット上にプラットフォームを作る。→実現を目指すのがこのシステム。
  • 漫画雑誌だけでは採算が取れない。
    • 投資：漫画雑誌
    • 儲ける：コミカライズ、アニメ等
      • このループが漫画の儲け方。
    • 単行本市場は10年でだいたい横ばい。
    • 漫画雑誌は10年で下がり気味。
      • 1.作家を育てる場所ｇはなくなる
      • 2.マンガ好きを増やす場所が無くなる
      • →漫画界の危機。
    • 電子コミック：儲ける部分でしか有効ではない。
    • 漫画雑誌に相当するインフラが必要。
  • 機能
    • ユーザの声からの学び
    • 作家同士でせっさたくま
    • 自分でも掛けそう、かきたい。
    • 無名漫画でも口コミで広がる
    • システムの現状
      • 4300作家
      • 38000漫画。
      • 890000ユーザ
      • 1億閲覧を最近突破。
  • HTML5導入の経緯
    • 2010春：すべてのデバイスで提供したい。（それまではガラケーのみ対応）
    • まず対応したい
    • 対応方法のチョイス
      • →普通に考えたらHTML5でしょ！
    • 開発スタート
      • しかし甘くは無かった
      • 罠１：Android OS 2.1
        • Canvasにバグがあった（結果何だか小さく見えてしまう）
      • 罠２：Android端末の性能差
        • 創成期の一部の端末。最近のからすると、ちょっと遅い。
        • コマのスクロールがびっくりするくらい遅い
        • →個別チューニングで対応し、手間が掛かった。
      • 罠３：IEはcanvas未対応
        • IEはそれでも人気。
        • 漫画ゲットユーザ間でも一番人気。
        • もちろん個別対応した。
      • ※色々あったが、コアなソースの部分はソースで1つで済んだ。
      • リーダのコアな部分を作る
        • →コンテナ側を工夫して様々なデバイスに対応
      • そこまで複雑な仕組みのシステムではない。
    • HTML5についてのまとめ
      • プリミティブな機能のみ必要な場合は横展開しやすく使い勝手が良い
      • 実機による検証が必要。
      • 新しい仲間（エンジニア）を探しているよ！
  • 現在、それなりに盛り上がっている原因の分析
    • みんな漫画を読みたかったし、描いて誰かに読んで欲しかった。
      • 需要、ニーズが多くあった。
      • コマ割り画像でガラケーでも読み易かった。
      • 閲覧数が高くなり、レビューが増え、漫画を描きたくなる。
      • 投稿・閲覧が盛り上がった。
    • 園芸のプロセスと比較してみる
      • 土を耕す(システムを準備する)
      • 種をまく(ユーザを連れてくる)
      • 手入れをする(サービスを運営する)
    • どうやってユーザを連れてきたのか？(投稿サービスなので、初期の投稿メンバー＆コンテンツ確保が絶対に必要。)
      • 始めの9か月、マンガ作家の登録数が多かった
      • Web上で招待メール送付
        • ターゲット：一次創作主体の同人作家
      • 専門学校の授業で取り上げてもらったり、プレゼンに伺った(マンパワーで実践)
        • ターゲット：まんがかのタマゴ
      • 気を付けていた事：【信頼の醸成】
        • もらって嬉しい招待メール：漫画を読んで、感想を添えて。
        • 弊社でコマ割：アナログ主体の作家さんにはとっつきづらいウェブサービス→原稿を送ってもらって弊社で対応。
      • 開始直後の手厚い問い合わせ対応
  • 前職：FF11のコミュニティ運営が専門。
    • コミュニティ運営とは：リテンション
    • コミュニティの三角形
      • (1).三角形の頂点に立つひとのクローズアップ
        • ゲームで言えば、コミュニティサイトのオーナー、ハイレベルなプレイヤー
        • 光を当てる。みんなのあこがれの存在を作る
      • (2).三角形の最下部のユーザの育成
        • ゲームで言えば初心者、まんがで言えば新規加入者
        • 原因を突き止め、とにかくやめさせない。→三角形がどんどん大きくなる。
      • (3).新たな三角形が醸成されるようなイベント企画などを打つ
  • まとめ
    • 今後の話
      • 予告１：漫画を1ソースで全言語・世界配信。
      • 予告２：出版社はやはり必要。大事な機能を持っている。→リアルなビジネスにつながっていきますよ...との事

第2部　スマホブラウザゲームのクオリティアップにHTML5あり！

【講演概要】
弊社で開発するアクションゲーム、MMOストラテジーなどのブラウザゲームを事例に、
HTML5とその周辺技術を使うことでよりクオリティを高める方法についてお話いたします。
  • HTML5とその優位性
    • ゲームと言うフィールドで、フィーチャーフォンで成功したゲームをスマホに。
    • 機能特徴の違い(表参照)：決定キーのあるなしは結構重要。
    • ブラウザベースのもの・アプリベースのもの（比較）
      • 開発のしやすさがある(ブラウザ)。それ以外はネイティブの方が使いやすい。
      • SpeedやUIをHTML5で埋める。
    • HTML5：
      • Canvasを筆頭に馴染みのあるAPIを利用
    • マルチデバイス：OS、ブラウザに依存しない。でもやっぱり個別対応は必要
    • 開発スピード：一般的なWeb技術
    • ネイティブ非依存：自由度が高い。
  • WebSocketの活用例
  • Local Cacheの活用例
    • コンテンツリッチだけと通信回線そのまま
    • クライアントサイドでロジック組みやすい
    • オフラインで動かしたい
    • Application Cashe
    • Web Storage
    • Web Database
    • jquery mobile/ jQTouch

後半はDemoを交えつつの諸解説･･･という流れだったのですが、会場がネット回線利用出来ずという状態でまさかの全編口頭説明。色々観てみたかったのでこれには残念。

第3部　JavaScriptエンジニア向け！スマートフォンで動くブラウザゲームの作り方

  • 吾郷協（あごう きょう）氏【面白法人カヤック　技術部】

【講演概要】
Android, iOSの標準ブラウザ上で動くゲーム開発を通じて得た知見を元に、
開発を進める上でのワークフロー、独自に開発したフレームワーク、使用した外部ライブラリ、
はまりどころなどをJavaScriptエンジニア向けに紹介します。

こちらも基調講演同様、大分駆け足での解説となったセッションでした。スライド資料が既に上がっているため大枠のメモだけ残し、その他についてはスライド資料参照という形を取ろうと思います。(詳細な対応方法等が満載ですし)

アジャイルな見積りと計画づくり ~価値あるソフトウェアを育てる概念と技法~

アジャイルな見積りと計画づくり ~価値あるソフトウェアを育てる概念と技法~

    • チケット管理はJserがオススメ
      • 理由：
        • Jserはプロジェクトの最初より後半が忙しい
        • チケットがjserへ一番最後に亘ってくる
        • サーバサイドとマークアップの繋ぎ込みが多い
    • ワークフロー
      • タスクリストを作る
        • SpereadSheetsを元にリストを作成
        • アジャイルな見積もり的な分割、作成方法で
      • 全員で見積もり
        • 見積もりポーカーを採用
        • 見積もり時間は全て加算して計算
        • 作業人数によって優先度を決める
        • チケット化に必要な簡単な設計を行う
      • エンジニアがチケット化
        • 一番重要度の高いタスクのみチケットを切る
        • 見積もり時に優先度、実装に必要な情報を記述
        • チケット完了後の対応も書く
      • 適宜アップデート(1日1回)
      • ※エンジニアが主導出来、簡単に導入出来る事を主眼に置いている。
  • 実装詳細編
    • ※非常に詳細かつメモが取り切れなかったのでスライド資料を御参照ください。(^_^;)


終了予定時刻を20分程過ぎ、全てのセッション終了。そのままの流れで懇親会へと続いて行きましたが、懇親会には参加せずそのまま帰宅。

HTML5・スマホ界隈は現在多いに賑わっておりますがまだまだこれからの部分が多く、各種デバイス対応等の苦労も(かつての各種ブラウザ対応のように)解決し切れていない状態であるのだな〜と実感。こういった問題とはITで物づくりをして行く以上、付き合って行かざるを得ない問題なのですかねやはり...(苦笑)

とは言えこの辺りの技術・分野は今後必ず大きい位置を占める事になるでしょうから、引き続きウォッチして行きたいと思います。やはり何かテーマを持って実際に作るのが早いよな〜。テーマ何が良いかな？ちょっと考えておこう。

その他関連：