WCAN 2009 Autumn レポート| SESSION-1: 80カ国に広がる世界スタンダード iPhoneが生み出したモバイルWebの世界
林 信行さん
日本でも累計出荷台数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のレポートなり。
web2.0 in your pocket.
林さんの言葉ですが、ぃぇあ、そういう時代だね!
余談だけど、Sonyのポケットに入るパソコンあったじゃん、あんな感じでポケットに入れている人を見たことないけど、iPhoneをポケット入れた方がかっちょいいよね。
iPhoneアプリはゲームタイトルが熱い!
iPhoneのアプリは1日500本以上出ている。
マイナースポーツをゲームにしちゃうなど、幅広いジャンルで扱っていますし、直接Downloadだからカートリッジレスにもなり流通が早い。あと、俺が思うに、デベロッパーの数がPSPやDSの比じゃないと思います。
iPhoneのweb的アプローチ
Flash CS5 の話
AdobeTV で Max 2009の動画
- デザイン: Adobe MAX 2019
- 開発: Adobe MAX 2019
- 構想: Adobe MAX 2019
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アプリで1ヶ月5000万円稼いだEthan Nicholas氏の場合、ABテストをがしがしやってる。何度も改善サイクルすることで、クリエイティブに進化していく。
ideas -> build -> code -> measure -> data -> learn -> ideas(繰り返し)
Ethan Nicholas氏について
ARRR!: 5-Step Startup Metrics Model
REFERRALとRetentionのサイクルを円滑に行うことでwebサイトは生きてくる。
WCAN 2009 Autumn レポート| SESSION-2 : 60分できる!実践 HTML5 & CSS3ウェブサイト
菊池 崇さん
- website: http://east08.webdirections.org/
- etc: http://east.webdirections.org/blog/recre-html5-loading/
HTML5のウェブサイトをいかに、実装できるのか、簡単なステップにそって、jsの実装、reset.cssの作成方法を教えます。また、CSS3を効果的に実装しワークフローを効率アップさせる方法について説明をします。
日本とhtml5の話
html5が盛んに討論されているのは日本だけで、なんか〜も〜、バズワード化してっぜ!
10月からくるぜ!ってよく聞いたけど、まだまだ作っている最中なので、海外ではそれほど盛んではない。
そもそもw3cがフィードバックほしさに仕組んだ。あ、そーだったのか、やべぇ、知らなかった。
そもそも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の追加機能
とりあえず概要のみをチェック。
web workers(またはWeb Worker Threads)
Javascriptでマルチスレッドプログラミングができるようになる。きちんと動くようなら、ユーザサイドの処理がガリガリいけそうね。
web socket
Javascriptから生TCP socketのようなもの使えるようにできるもの?
web storage
クッキー以外でブラウザ側に蓄積する仕組み。UXの向上に役立つとか。非常に大量のデータを蓄積できるらしい。
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の記述例: 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> © hogehogehoge. </small> </footer>
copyrightにどうぞ。
html5 検証ツール
ブラウザの html5 実装状況
CSS3
今から実践のときらしい。CSS3はプログラム的に楽できるから楽しいよね。
CSS3と併せて、Javascriptの勉強しまっしょい。
templete layout moduleの実勢デモ見た。
CSS3より前はレイアウトプロパティがなかったから、floatとかでやってるもん。
webサイトの高速化(最適化)
ちなみに菊池さんのwebサイトでは0.4ms以内に表示されるように実験と検証を繰り返しMarkupしてある。
参考リンク
菊池さんとえいば、俺が最近よんだ記事はこれだゎ。
スマートフォンを持ち始めてからwebページ最適化に興味しんしん。
WCAN 2009 Autumn レポート| SESSION-3: Webディレクターとしての経験密度とWebブランディング
名村 晋治さん
「コミュニケーション力」「営業力」「人前でうまくしゃべれない」「モチベーションが上がらない」etc・・・・。
Webサイトの制作におけるディレクションについては、常々迷う事がついて回ると思います。名村もいつも迷っています(笑)それはどれだけ経験を積んだとしても、ついて回ります。しかしそれをカバー出来るのは恐らく「経験」。しかし経験は時間に対して同等に増えるものではなく、その時々の考え方、受け止め方によって密度が全くに変わってきます。
ディレクションをする上での経験の密度をあげる為のマインドセットと、それを持った上でのディレクターとしての自立と自律について話をさせていただければと思います。その上で、サイト規模に関係ないツールとしてのWebブランディングをお話させていただきたいと思います。
所感
- 経験を自分の血肉に「意識して」。このフレーズが好き!なんでも栄養じゃ。
- 2年以上前に名村さんのSESSIONを受講したときにくらべ、わかる!テンポいいなぁ〜。
- 名村さんの数々のテクニックを技を俺の型にはめ込むにはまず何をすればということから考えはじめる時期かもしれない。
- 頭の中身のアウトプットという点では、ここ4年間、毎日、日記を書いている。キモィくらいに。
- 最近は仕事、健康、目玉、酒などの項目に評価をする項目も追加された。
- ただただ書いてるので見直すことはあんまりない。けど見直すと笑える。
以下、SESSION-3のレポートなり。
あぁ〜あるあるある、や、ナルホド。と思ったことをズザーと書いときます。
自分のための備忘録すぎる。これらの文章が俺の脳みそにハイってしまった情報が、また俺の脳みそからアウトプットされてしまった文章のため、解釈がおかしかったり、一部はしょってますがご了承ください。
解決方法に真剣に考えましょう。
クライアントがなかなか決定させてくれない。
担当の方も会社という組織の人間だ。担当者の上司がOK!といえるような(上に通しやすい)資料を作りましょう。
デザインを決定してくれない。
「このデザインどうですか?」加え、
「あとX回お出しできますがぁー」とか、制限を設けたり。
人前でうまくしゃべれない。
家族、友達など練習の場はいっぱいあるはず。何もクライアントだけが相手ではない。
台本をつくる。テレアポがうまい人は台本をもっている。
解決方法の発想
名村さんの様々な解決方法はどのようにして、生まれるのか?
経験。Σ(ロ;)のゎ!
といっても、プロセスは存在する。
経験を結び付けていく考え方
情報と経験を結びつける。形にする。ただの思い出で終わらせない。
経験を結びつけるのは「習慣」
-
- 自転車の走る仕組みを知ってるのと、自転車に乗れるのは別の話。
経験を結びつければ加速する。
常識からはじめ、あらゆる知識を知っておくべき、法律も。
あれれ、なんか耳がいてぇ。
情報に変える習慣をつける
これ覚えてる!なぜ*5のだね。
1日10分でいいから、ナンにでも疑問に思え。
5感で得たものを情報に、脳に届けよう。記録しよう。
経験を情報に変換する。〜思い出だけで終わらせないために〜
5回のなぜ?を習慣化。
おういえ!
考える習慣がもたらす未来
- 慣れはいずれ、答えを出せるようになってくる。
- 経験から組み合わせの正解率が圧倒的に高くなっていく。
名村さんも山ほど失敗しています!
- でも失敗したら報告は早く。
- 失敗をいっぱいしようぜ。
誰かの結婚の格言を思い出すな、なんだっけ。
だからその分、山ほど「考え」ます
- あの失敗はなぜ、、何が足りなかったのか、一個ずつノートに書いてつぶして言った。
俺、これやったことあるが、実行中に失敗に気づいた、でその失敗がなぜ、、とか考えてたら寝てた。
視覚化
言葉を文字に落とすことの重要性ブログや日報、evernoteとかね。
俺、頭に何か入れとくのが苦手なので、何でもメモするクセがあるんだが、
メモしたことすら忘れるから、しょーもないね。
でも最近はメモしたことをGoogleカレンダーにメモしてアラームで知らせる方法をとってます。周りくど!