WCAN 2009 Autumn レポート| SESSION-1: 80カ国に広がる世界スタンダード iPhoneが生み出したモバイルWebの世界

WCAN

林 信行さん

日本でも累計出荷台数200万台突破と言われるiPhoneだが、世界では80カ国で3000万台以上が売れている。
iPhoneアプリ開発ビジネスは「21世紀のゴールドラッシュ」と呼ばれひと月で5000万円を売り上げるiPhone長者を次々と生み出している。

一方、iPhoneのWeb機能も注目に値する。実はiPhoneと同じブラウザ技術がAndroidやPalm Preといった他社の次世代スマートフォンにも採用され、次世代Webのデファクト・スタンダードとなっているからだ。iPhoneのWebを知ることは、モバイルWebの未来を知ることにもつながる。

所感

  • 21世紀のゴールドラッシュ楽しみだな、ん？真っ最中だって？備えあれば憂いなし。
  • Analyticsを使って、改善ループをしよう。あとユーザテストで遊びたいなぁ。
  • 最近つくるFlashのUIには必ずAnalyticsを入れるようにしてます。後でデータ見るのがおんもしろい。


以下、SESSION-1のレポートなり。

iPhoneの世界、国内の市場

世界、国内のiPhone市場、アプリの現状を各ソースを元に説明いただきました。
んま〜今、SoftBankのケータイの中でもiPhoneが一番安いしょぅ。

web2.0 in your pocket.

林さんの言葉ですが、ぃぇあ、そういう時代だね！
余談だけど、Sonyのポケットに入るパソコンあったじゃん、あんな感じでポケットに入れている人を見たことないけど、iPhoneをポケット入れた方がかっちょいいよね。

iPhoneアプリはゲームタイトルが熱い！

iPhoneのアプリは1日500本以上出ている。
マイナースポーツをゲームにしちゃうなど、幅広いジャンルで扱っていますし、直接Downloadだからカートリッジレスにもなり流通が早い。あと、俺が思うに、デベロッパーの数がPSPやDSの比じゃないと思います。

iPhoneのゲームタイトル比較
  • iPhone: 21178本／全体: 75000本 → 28.2%
  • PSP: 607本
  • DS: 3680数

このデータ。たしか2009年の7月の時点だったはず。
iPhoneアプリ多すぎ、ワカメすぎ、人生があと何回あっても足りないぜ！

iPhoneのweb的アプローチ

Flash CS5 の話

iPhoneアプリをFlash CS5でいけるぜ！の話ね。
Adobe TVの50分くらいの公演の映像を見ると良いゎ。

AdobeTV で Max 2009の動画
iPhoneとwebkit最適化

あと、うぉ！すげぇと思ったのがwebページをiPhone最適化するとアクセスが2倍に増え、webページをAppで閲覧可能にするとアクセスが10倍に増えたらすぃ。10倍ってなんだそりゃぁー！たぶん、増えたアクセスはセッションが増えてUUはそれほど変わってないのかな？（記憶あやふゃ）UUだったら驚きだ。個人的に、このブログや他のサイトもwebkit最適化やろうと思う。

動画が参考になるなり。全部見たら1日終わると思うけど。
モバイルアプリをwebkitに最適化していく方法とかね。

iPhoneとhtml5

webkitの話とつながるところがあるけど、html5 + CSS3 + Javascriptは今後楽しくなりそうだ！
あと、html5 + Javascript + SQLliteでGPSレコーターになるってので俺は驚いた。クチがあんぐりら。
いかにhtml5とCS5とJavascriptでiPhoneアプリをつくれるか？なんてのも紹介いただいた。

iPhoneと広告

iPhoneの広告（webページ、アプリ）は日本ではadmobが成功をしているよね。
iPhoneのユーザは広告のクリック率が多い。俺は手が震えてクリックしちゃうけどね。

iPhoneアプリ成功方法

iPhoneアプリで1ヶ月5000万円稼いだEthan Nicholas氏の場合、ABテストをがしがしやってる。何度も改善サイクルすることで、クリエイティブに進化していく。

ideas -> build -> code -> measure -> data -> learn -> ideas（繰り返し）

Ethan Nicholas氏について
ARRR!: 5-Step Startup Metrics Model

REFERRALとRetentionのサイクルを円滑に行うことでwebサイトは生きてくる。

参考リンク（※参照元ソースではないよ、備忘録な関連記事リンク）

iPhone市場関連記事
iPhoneユーザ関連記事
iPhoneアプリ関連記事
iPhoneアプリ関連記事

WCAN 2009 Autumn レポート| SESSION-2 : 60分できる！実践 HTML5 & CSS3ウェブサイト

WCAN

菊池 崇さん

HTML5のウェブサイトをいかに、実装できるのか、簡単なステップにそって、jsの実装、reset.cssの作成方法を教えます。また、CSS3を効果的に実装しワークフローを効率アップさせる方法について説明をします。

所感

  • html5の記述は美しく理にかなっている。と思える。
  • webサイト高速化（最適化）を突き詰めていくとおもしろそうだ。


以下、SESSION-2のレポートなり。

日本とhtml5の話

html5が盛んに討論されているのは日本だけで、なんか〜も〜、バズワード化してっぜ！
10月からくるぜ！ってよく聞いたけど、まだまだ作っている最中なので、海外ではそれほど盛んではない。
そもそもw3cがフィードバックほしさに仕組んだ。あ、そーだったのか、やべぇ、知らなかった。

そもそもhtml5誕生した理由: googleのHixie (Ian Hickson)が頑張ってる。

えいえいおー。

そもそもhtml5誕生した理由: XHTML 2.0は2009年に解散

  • 大きくなりすぎた。まったく互換性がなかった。
  • 新しいwebの夢は、XHTML+SVG+SMIL+XFORMとか、やりすぎちゃったぜ。

あ、黒歴史。

そもそもhtml5誕生した理由: ブラウザのパーサ問題。

htmlパーサーとxmlパーサーがあるのは問題ないが、
IE以外のモダンブラウザはhtmlパーサー、xmlパーサー共に処理可能。
しかーし、IEは（IE8ですら）htmlパーサーでしか処理できない。（ある意味、漢、一筋、一途、むしろKY）

だ・か・ら！

<!-- 強制的にhtmlパーサーで処理 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

あー、だから上記の必要なんだ。
俺の中では、おまじないだったもんで、、、スルーしてましたよ。気づけてよかった。
まぁ、焼酎甲類ビッグマンのつくり方知らなくても、まずさは理解できるしなぁ。だいじょうぶしょ。

そもそもhtml5誕生した理由: ブラウザのエラーの扱い問題

ブラウザはエラーをハンドリングすると負担がかかるんです。
たとえちょっとしたエラーでもブラウザはギャース！となるのです。

Markupルールが厳しすぎる！

早い話、ちょっとしたMarkupのミスは許す！ということ。
関係ないけど、ブラウザとサウザーて似てるね。


ちょっとしたミスの例

<img src=hoge.png alt="引かぬ！" />
<img src='hoge.png' alt='媚びぬ！' />
<img src="hoge.png" alt="省みぬ！" >

ダブルクォーテーションがなかったり、シングルクォーテーションだったり、閉じカッコの前にスラッシュがなかったり。でも！もう大丈夫。心の広いhtml5は見逃してくれます。
ちなみに、html5ではimgのaltは必須ではないです。（理由: 単なる模様等の画像にはaltは書けない）


明らかなミスの例

<li><a>お師様・・・</li></a>

タグが逆すぎる。
html5でも、さすがにこれはエラーになります。

html5の基本

DOMを基準にする。

DOMはIE5〜最新IEやモンダンブラウザ全てがサポートしている。
そぅ、html5はdomを重要視している。

html5の追加機能

とりあえず概要のみをチェック。

web workers（またはWeb Worker Threads）

Javascriptでマルチスレッドプログラミングができるようになる。きちんと動くようなら、ユーザサイドの処理がガリガリいけそうね。

web socket

Javascriptから生TCP socketのようなもの使えるようにできるもの？

web storage

クッキー以外でブラウザ側に蓄積する仕組み。UXの向上に役立つとか。非常に大量のデータを蓄積できるらしい。

geolocation API

緯度経度のあれっしょ？

  • web database

ん、web storageと一緒に考えられていたらしいが、切り離されたんか。W3Cの中では答え出るかな、そろそろ。[

html5の記述例: DOCTYPE

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

はい、毎回コピペです。

html5
<!DOCTYPE html>

あら、スッキリ！でも、本当は すら取ってしまおうとしたらしいが、、、
がないとIEが各互換モードというへんちくりんなことになるらしい。本当、IEには楽しませてもらうぜ。

html5の記述例: section要素の記述例と説明

html5はDOMを重要視しているので、必ず見出しをつける（sectioning）こと！
初めてしったんだけど、h1は1回でなくてもいいんだね。全部h1でMarkupしたらSPAMかぃ？

article要素
<article>
    <header>
        <h1>焼酎甲類ビッグマン</h1>
    </header>
    <p>リッター400円の定番のうまさ！</p>
    <footer>お酒は二十歳になってから。ビッグマンはアル中になってから。</footer>
</article>

feedのようにひと括りで意味がわかるものは、articleで囲える。
ポイントとして、articleの中でもheaderやfooterを記述できる。俺の解釈でもちっちゃなwebページなイメージ。

small要素
<footer>
    <small>
        &copy; hogehogehoge.
    </small>
</footer>

copyrightにどうぞ。

html5 検証ツール

validator.nu

mozillaと同じレンダリングエンジン搭載

ブラウザの html5 実装状況

  • 対応: safari、chrom、ff、opera
  • 未対応: IE（対応方法は下記参照）
IEにhtml5の新要素を適応する方法

Remy Sharp氏が公開したhtml5.jsを読み込む

<!--[if let IE 8]-->
<script src="html5.js" type="text/javascript"></script>
<!--[endif]-->

CSS3

今から実践のときらしい。CSS3はプログラム的に楽できるから楽しいよね。
CSS3と併せて、Javascriptの勉強しまっしょい。

templete layout moduleの実勢デモ見た。

CSS3より前はレイアウトプロパティがなかったから、floatとかでやってるもん。

webサイトの高速化（最適化）

  • インラインイメージをやろう！
  • OOCSSでCSSを減らそう！
  • CSS Spritいいんでない。

ちなみに菊池さんのwebサイトでは0.4ms以内に表示されるように実験と検証を繰り返しMarkupしてある。

速度は品質

高速化されていない場合、直帰ユーザ率が増えてくる。そうすると、損失が発生する。これは危険だ。
菊池さんは日々、実験して、調査してを繰り返して独自で高速化の理論をつくりあげ、立証している。


そうか、jscsscompのようなもの使って、httpリクエストを1回で済ませれれば、すぐに高速化につながりそうね。この辺りのライブラリ等は調べておこう！

高速化におけるFlashについて

Flashに関してはキャッシュさせるしかない。もちろんhttpリクエストは1回で済ますように。
ECサイト等、直接損失に繋がるwebサイトではFlashは厳しいかもね。（そもそも設置しないか

参考リンク

菊池さんとえいば、俺が最近よんだ記事はこれだゎ。
スマートフォンを持ち始めてからwebページ最適化に興味しんしん。

WCAN 2009 Autumn レポート| SESSION-3: Webディレクターとしての経験密度とWebブランディング

WCAN

名村 晋治さん

「コミュニケーション力」「営業力」「人前でうまくしゃべれない」「モチベーションが上がらない」etc・・・・。

Webサイトの制作におけるディレクションについては、常々迷う事がついて回ると思います。名村もいつも迷っています（笑）それはどれだけ経験を積んだとしても、ついて回ります。しかしそれをカバー出来るのは恐らく「経験」。しかし経験は時間に対して同等に増えるものではなく、その時々の考え方、受け止め方によって密度が全くに変わってきます。

ディレクションをする上での経験の密度をあげる為のマインドセットと、それを持った上でのディレクターとしての自立と自律について話をさせていただければと思います。その上で、サイト規模に関係ないツールとしてのWebブランディングをお話させていただきたいと思います。

所感

  • 経験を自分の血肉に「意識して」。このフレーズが好き！なんでも栄養じゃ。
  • 2年以上前に名村さんのSESSIONを受講したときにくらべ、わかる！テンポいいなぁ〜。
  • 名村さんの数々のテクニックを技を俺の型にはめ込むにはまず何をすればということから考えはじめる時期かもしれない。
  • 頭の中身のアウトプットという点では、ここ4年間、毎日、日記を書いている。キモィくらいに。
    • 最近は仕事、健康、目玉、酒などの項目に評価をする項目も追加された。
    • ただただ書いてるので見直すことはあんまりない。けど見直すと笑える。


以下、SESSION-3のレポートなり。
あぁ〜あるあるある、や、ナルホド。と思ったことをズザーと書いときます。
自分のための備忘録すぎる。これらの文章が俺の脳みそにハイってしまった情報が、また俺の脳みそからアウトプットされてしまった文章のため、解釈がおかしかったり、一部はしょってますがご了承ください。

解決方法に真剣に考えましょう。

クライアントがなかなか決定させてくれない。

担当の方も会社という組織の人間だ。担当者の上司がOK!といえるような（上に通しやすい）資料を作りましょう。

デザインを決定してくれない。

「このデザインどうですか？」加え、
「あとX回お出しできますがぁー」とか、制限を設けたり。

人前でうまくしゃべれない。

家族、友達など練習の場はいっぱいあるはず。何もクライアントだけが相手ではない。
台本をつくる。テレアポがうまい人は台本をもっている。

解決方法の発想

名村さんの様々な解決方法はどのようにして、生まれるのか？
経験。Σ(ロ;)のゎ！


といっても、プロセスは存在する。

経験を結び付けていく考え方

情報と経験を結びつける。形にする。ただの思い出で終わらせない。

経験を結びつけるのは「習慣」
    • 自転車の走る仕組みを知ってるのと、自転車に乗れるのは別の話。
経験を結びつければ加速する。

常識からはじめ、あらゆる知識を知っておくべき、法律も。
あれれ、なんか耳がいてぇ。

情報に変える習慣をつける

これ覚えてる！なぜ*5のだね。
1日10分でいいから、ナンにでも疑問に思え。
5感で得たものを情報に、脳に届けよう。記録しよう。

経験を情報に変換する。〜思い出だけで終わらせないために〜

5回のなぜ？を習慣化。

おういえ！

物事の存在理由の言語化
  • 人間の作ったものには意味がある。けっして正解ではなくても意味がある。
  • 人の話もまたしかり。話を聞いていると同時進行で意味をまとめていく。

俺、、インテル入ってない。。。orz

考える習慣がもたらす未来
  • 慣れはいずれ、答えを出せるようになってくる。
  • 経験から組み合わせの正解率が圧倒的に高くなっていく。
名村さんも山ほど失敗しています！
  • でも失敗したら報告は早く。
  • 失敗をいっぱいしようぜ。

誰かの結婚の格言を思い出すな、なんだっけ。

だからその分、山ほど「考え」ます
  • あの失敗はなぜ、、何が足りなかったのか、一個ずつノートに書いてつぶして言った。

俺、これやったことあるが、実行中に失敗に気づいた、でその失敗がなぜ、、とか考えてたら寝てた。

視覚化

言葉を文字に落とすことの重要性ブログや日報、evernoteとかね。
俺、頭に何か入れとくのが苦手なので、何でもメモするクセがあるんだが、
メモしたことすら忘れるから、しょーもないね。
でも最近はメモしたことをGoogleカレンダーにメモしてアラームで知らせる方法をとってます。周りくど！

evernote

俺はクラウドで使ってますかな。

ブランディング化

なぜブランディング化か
  • 迷ったときの最後の指針にしたい。営業ツール。
  • webは、サービスを訴求しないといけない。ロゴの訴求は意味なし。
  • webブランディングはwebだけでは成り立たない。インターネットで謳っていることがリアルでは当然あってこそ。
  • 基本は「お礼」