Aggregator

2011年6月18日、ベルサール神田で開催したCSS Nite LP, Disk 16「スマートフォン特集（2）Android編」のフォローアップとして、あんざい ゆきさん（uPhyca）の『Android OSと現状のデバイス総まとめ』のスライド、音声を公開します。

• スライド（PDF、63ページ、7.7MB）
• 音声（MP3、44:52）

メッセージ

「Android OSと現状のデバイス総まとめ」を担当したあんざいです。Android の知識がまったくない方には概要がわかるように、すでに Android アプリや Android 向けの web 制作などに関わっている方には復習になるように心がけました。Android に対してすでに深く関わっている方には物足りなかったかもしれません。

杉本さんが紹介されていた Android Bazaar and Conference 2011 Summer というイベント（7月17日に開催予定）では、中級者向けのトラックもあります。私もタブレット向けのバージョンである Android 3.0, 3.1 について紹介するセッションに出る予定です。より詳しい／高度な内容を知りたい方の参考になれば幸いです。

Android Bazaar and Conference 2011 Summer

アンケートでいただいたお問い合わせに答えたいと思います。

■ Android Screen Monitor

セッション中に Android 端末の画面を表示するのに使っていたソフトウェアです。

Android 端末を PC に接続して、端末の画面を PC の画面上に表示することができます。Java で書かれているため Windows, Mac, Linux で動作します。

■ Suica の履歴を読むアプリ「Suica Reader」

セッション中でデモを行ったアプリです。

Android 2.3 から対応された NFC (Near Field Communication) を使ってSuica や Pasmo の履歴を見れるアプリです。NFC をサポートしている Android 端末 でのみ使用できます。現状ではSamsung の Nexus S という端末が NFC をサポートしています。

■ Android OS の分布

セッションでは、分かりやすくするために、比率の小さい OS のバージョンをまとめてグラフにしていました（例えば、Android 1.5 と Android 1.6 を合わせて 4% など）。より詳細な分布は Android Developers のサイトにあります。

また、画面サイズと解像度の分布も同じサイトで報告されています。

2011年6月18日、ベルサール神田で開催したCSS Nite LP, Disk 16「スマートフォン特集（2）Android編」のフォローアップとして、華井 雅俊さんの『切っても切り離せないAndroidアプリとクラウドとの連携』のスライド、音声を公開します。

• スライド（PDF、25ページ、2.1MB）
• 音声（MP3、26:19）

2011年6月18日、ベルサール神田で開催したCSS Nite LP, Disk 16「スマートフォン特集（2）Android編」のフォローアップとして、杉本 札彦さん（ブリリアントサービス）の『Android技術者とのデザイナーとのハッピーな出会い』のスライド、音声を公開します。

• スライド（PDF、42ページ、1.4MB）
• 音声（MP3、34:47）

メッセージ

Androidの影響で、確実にWeb業界も変わります。ブラウザによるサイトではなくアプリケーションである必要があります。カッコいいアプリケーションを作る必要がありAndroidはそれが可能です。Web業界もAndroidプログラマと手を組んでカッコいいアプリをつくりましょう！

ブリリアントサービスはアプリケーションデザイナを正社員で募集しています。アプリケーションデザイナは、現在Webデザインをされている方から応募を募りたいと思います。興味のある方は是非応募してください。sugimoto@brilliantservice.co.jpまで、お待ちしております。

2011年6月18日、ベルサール神田で開催したCSS Nite LP, Disk 16「スマートフォン特集（2）Android編」のフォローアップとして、岡田 昇三さん（hi-posi）の『そうだったのか！AIR for Android』のスライド、音声を公開します。

• スライド
• 音声（MP3、40:34）

メッセージ

「そうだったのか！AIR for Android」を担当した岡田です。

「Flashで簡単にアプリが作れるよ！」という事をアピールしたかったのですが、当日は信じられないくらいトラブルが重なり「Flashだめじゃん！」みたいに思われたかもしれませんが、、、たまたまです！本当に簡単に作れるんですよ！信じて下さい。涙

公開版のスライドには時間的にお見せする事ができたなかったウェブサイト等をスライド中のリンクに仕込みましたので、是非ご覧ください。画面右をクリックすると進む、左クリックで戻るです。

個人的にはAIRコンテンツは、Flash部分でゲーム、ブラウザ部分では会員登録、OAuth認証等、切り分けすればかなりできる範囲が広がると思っております。

今後はクライアントや自社制作でも、そんなに多くの予算をかける事は難しくなってくると思います。しかしマルチスクリーン/マルチデバイス対応は必須となってきており、その中でFlashの汎用性、さらにHTMLも使えるという「AIR」という選択肢も頭の片隅に入れておいていただければと思います。

ともあれ、Flash CS5.5で簡単にアプリにトライしてみてください！簡単ですので！

2011年6月18日、ベルサール神田で開催したCSS Nite LP, Disk 16「スマートフォン特集（2）Android編」のフォローアップとして、石野 和明さん（ライブドア）の『iPhone・AndroidアプリのUI・挙動はどこが違う？』のスライド、音声を公開します。

• スライド
• 音声（MP3、39:40）

メッセージ

LP16ご参加いただいた皆さま、ありがとうございました。

『アプリのUI・挙動はどこが違う? 』担当しましたライブドアの石野です。Android特有の概念・機能について、なるべく実際にどう実装されたかにフォーカスしてご紹介しようと努めました。アンケート拝見させていただきましたが、「アプリの話だったけどWedでも活用できそう」や「インテント便利そう」というお声をいただき嬉しく思います。

セッションに対しての補足を少々。後半Androidタブレットのお話を取り上げさせていただきましたが、あくまで事例紹介でしたので、全コンテンツが表示方法を変える必要があるものではありません。GALAXY TabとOptimusPadでは搭載されているOSも違いますし、実装方法は異なってまいります。Webサイトにおいても、・タブレットに対してはスマホ版を見せるのか ・タブレット向けレイアウトを採用するのか・PC版をそのまま見せるのか議論ある部分ですし（恐らく大半はPC版でしょう）、コンテンツごとに慎重に検討されることをオススメします。

また、最後ご紹介もさせていただきましたが『livedoor ディレクターブログ スマートフォン集中講座』、興味わいた方はぜひご覧ください。

2011年6月18日、ベルサール神田で開催したCSS Nite LP, Disk 16「スマートフォン特集（2）Android編」のフォローアップとして、執行 大介さん（BBmedia）の『Android向けサイトのはまりポイントと脱出法』のスライド、音声を公開します。

• スライド（PDF、44ページ、3.0MB）
• 音声（MP3、39:21）

メッセージ

この度はCSS Nite LP16にご参加いただき、ありがとうございました。

「実例からみるAndroid向けサイトのはまりポイントと脱出法」ということでお話させていただきましたが、数多くあるAndroid対応のはまりポイントのなかでも、現時点で実装時に最もはまるであろうポイントに厳選してお話ししました。

実装に携わっている方のなかには、すでにご存じの方もいらしたかもしれませんが、少しでもお役に立てれば幸いです。

セッション中にTwitterでご質問いただいた内容に　お答えします。

●Droidフォントの代わりにCSSのWeb Fonts（@face-font）は使えないか？

Android2.2のNexus oneとGalaxy Tabで調べた結果Web Fontsは使えないようです。

将来のAndroidでは使えるようになると良いのですが、その際はスマートフォンの通信速度を考え、必要な文字だけを含んだフォントファイルを作成するなどの工夫が必要になってくるかと思います。（※フォントの扱いはライセンスに注意してください）

2011年6月18日、ベルサール神田で開催したCSS Nite LP, Disk 16「スマートフォン特集（2）Android編」のフォローアップとして、高津戸 壮さん（ピクセルグリッド）の『Android向けサイト制作のあれこれ：viewportについて』のスライド、音声を公開します。

• スライド（※2011年6月現在、Safariでのみ正常に閲覧できます）
• 音声（MP3、46:01）

メッセージ

LP16にご参加いただき、ありがとうございました。

私のセッションは、viewportについてという、まぁかなり地味な内容でしたが、スマートフォン向けのサイト制作に携わっている方にとっては必須とも言える内容です。今後スマートフォンサイトを制作する方、現在制作を行っている方には、是非復習し、ご理解いただければ幸いです。

セッションの中でお伝えしきれなかった点について、いくつか補足させて頂きます。

■高解像度のデバイスについて

セッション終了時に鷹野さんよりご質問いただいた、iPhoneは640pxの解像度なのではないか？という点ですが、これについては、Androidの最近の端末にも同様、320px以上の解像度を持つ端末が多く存在します。しかし、そのような端末につきましても、ブラウザのdevice-widthは、デフォルトで320pxになるように調節されます。

これが、viewportを理解する上で非常に難解な部分なのですが、スマートフォンにおいて、1pxは1pxではないのです。iPhone, IS03などの解像度640×?のデバイスは、2pxを使ってブラウザ上の1pxを描画します。また最近のAndroid端末（Xperia Arc等）は、解像度480×?ですが、この場合、1.5pxを使って1pxを描画します。

なぜこのようになっているのでしょうか？それは、端末の解像度にぴったり合わせていると、とてつもなくサイトが小さく見えてしまうためです。このような問題を解決するため、スマートフォンは、1pxの密度というものが設定されています。ややこしい話ですが、このおかげで、スマートフォン向けサイトでは、常に320pxをベースに作ることで、クロスデバイスの問題を解決しています。これは、アプリでも同じような仕組みになっているようです。

※ちなみに、タブレットの場合はこれとは別扱いで、device-widthはもっと広くなります

スライドを見直し、是非、ご自身の制作に活かしていただければと思います。

2011年6月18日、ベルサール神田で開催したCSS Nite LP, Disk 16「スマートフォン特集（2）Android編」のフォローアップとして、たにぐち まことさん（H2O Space.）の『Androidサイト制作に jQuery Mobileを活用しよう』のスライド、音声を公開します。

• スライド（PDF、40ページ、3.9MB）
• 音声（MP3、37:04）

メッセージ

「Androidサイト制作に jQuery Mobileを活用しよう」を担当した、たにぐちまことです。jQuery Moibleは、非常に注目度が高い代わりに、その名前からちょっと難しそうというイメージを持たれている方も少なくありません。私のセッションで、少しでも親しみを持って、触ってみようかなと思っていただけたら光栄です。

一点訂正です。

●訂正： Sencha touchは無料です

セッション中「Sencha touchは基本有償です」と紹介しましたが、完全無料で利用いただけるようになっていました。最新の情報を追えておらず、大変失礼いたしました。

また、アンケートで頂いた質問に回答します。

●jQuery Mobileのバグなどについても触れて欲しい

こちら、jQuery Mobileにはご指摘のとおり、現在数多くのバグがあります。目立ったところでは、

• 2ページ目に行ったときに「Back」ボタンが表示されるが、一度戻ってもう一度2ページ目に行くと押されたときの状態のままになる（テーマaなら、本来黒いボタンなのに青いボタンのまま）
• 2ページ目の状態で画面を再読込すると、Backボタンが消えてしまう・ボタンを「li」要素の中に作った状態で、別のページに遷移して戻ってくると表示が崩れる

などなど、数えきれません。jQuery Mobileは、あくまでも「アルファ版」という開発中のプロダクトです。今後、徐々に改善されていくと思いますので、気長に待つとともに発見したら積極的にコミュニティなどに報告してあげるとよいでしょう。

また、実用に使うにはまだ時期が早いですし、今後仕様などが大きく変わることも予想されますので、まずは研究目的で利用して、使い捨てのプロダクトに役立てていくとよいでしょう。

ぜひ、楽しんで使ってみてください。

メッセージ（追記）

セッション中、アイコンの一覧をお見せするために利用したサイトは、現在私が作っている jQuery Mobileのリファレンスサイトの作りかけのものでした。まだ、一般公開しておりませんが、ご参加者の皆様に仮状態で公開します。

jQuery Mobile demo

ちなみに、本日 jQuery Mobileのベータ版が公開されました。リリース文はこちら。

日本語で紹介記事を書いてみましたので、英語が苦手な方はこちらもどうぞ

すでに、セッションでご紹介した内容とずれてしまった部分もありますが、その分どんどん進化を続けていますので、ぜひこまめにバージョンをチェックしながら学習を進めてみてください。

本年もよろしくお願いいたします。

2011年は39回のイベントを通して、のべ4,977人の方にご参加いただきました。中でも、地方版は、熊本、岡山、北九州、徳島で初開催、3年ぶりの福岡をはじめ、18回のイベントを通してのべ1,899人の方にご参加いただきました。

2012年の予定

• CSS Nite back2basic：1-2月の平日の夜、単トピックで行うミニセミナー。
• CSS Nite in Ginza（アップルストア銀座）：奇数月の第3木
• CSS Nite LP：LP21はタイポグラフィ（2月4日）、Web Fonts、LP22はWebデザインで使うPhotoshop（3月24日）

ご連絡

次のようなことなどでお困りの方は、cssnite@gmail.comまで、ご連絡ください。

• 領収書をなくしてしまった
• 返金を希望したが、返金されていない
• 書籍などのプレゼントに当選したが、届いていない

　
　ＤＳＰ／ＲＴＢやオーディエンスデータを使って、広告配信を『枠』から『人』へシフトさせる影響は、ネット広告の最適化に留まりません。広告を打ちながら、調査しているようなものであるこうした手法によって得られるデータは、マスメディアを含めたマーケティング活動全体の最適化に資するものになるということです。従来自社サイトでの観測をもってすることはクルマなどの一部の業種やブランドでは可能でしたが、そうでない広告主企業がほとんどでした。しかし多くの業種でも外部データを用いることや広告反応を手繰り寄せることで、可能になってきています。そうなってくると、ネットに閉じた知見だけではあまり役に立ちません。また『広告』に閉じた知見だけでもあまり役に立ちません。『マーケティング』、『組織人事』、『戦略的ビジネスプロセス』にも通じていないといけない。（今企業が一番必要なのはデジタルマーケティングシフトによる再編のための構想力です。）この事態は広告会社が想定していない。つまりそうした知見や職能が開発されるような組織がないし、そもそもそういう仕事をしていないので、出来る人がほとんどいない。本人の資質でこういう能力が偶然開発されるのも待つしかないのです。当然、何の戦略的意図もなく偶然対応力のある人材がいても会社のなかに引きとどめることは難しいでしょう。

いずれにしても、『「枠」から「人」へ』のパラダイムシフトは、広告を生業にしてきたものには劇的な変化です。「手売り」だから何とかなっていた「中抜き」も当然加速しますし、そもそも広告代理店のメディア部門やメディアプランナーは今後何をするのでしょうか。知見はトレーディングデスクのオペレータに貯まり、広告主は彼らと直接運用方針をやりとりするでしょう。そうでないと競合に負けるからです。
またそれ以上にデジタルが分からない営業フロントラインは今後も存在し得るのでしょうか。マスメディアを含めた施策について、ネットでの全数調査を兼ねた広告出稿分析がその方向性を決めるとすれば、デジタルマーケティングがマーケティング全体の設計にとってコアになるとすれば、従来のデジタル対応できない人材はそもそも広告業界には不適格ということになります。欧米では広告会社の看板をそのままに従業員をリストラしてデジタル対応可能な人員に入れ替えてしまいます。広告主企業も経営トップが若いせいもあるでしょうが、デジタル対応、ソーシャルメディア対応が早く、またマーケターサイドとエージェンシーサイドの人材流動性も高いので、知見の共有が進むということがあります。ペイドメディアを買うことがマーケティング活動のほとんどだった時代は、ペイドメディアの情報を握っている広告会社は、広告主に対して優位なポジションを得ることができましたが、オウンドメディアでは自ら構築運用する広告主には逆立ちしても勝てず、ソーシャルメディアでも運用で顧客との会話スキルが進む広告主には全く敵いません。

日本の広告業界でいえば、もうとっくの昔に変換していなければいけないことや人がいまだに「しがらみ」の状況にあるということがあります。経営が現場で対応していること、もうそこが本丸になっていることについてほとんど分かっていない、理解できないという極めてクリティカルな状況にあります。自動車メーカーのトップが「ハイブリッドカーがどうやって駆動しているか理解していない」なんてことは絶対ありえないのですが、広告業界ではそれがまかり通っているわけです。信じがたいほどに・・・です。
　そうした認識は今年から急激に広がるでしょう。広告主は『広告』が買いたい訳ではありません。マーケティング目標を達成し、ビジネスを成功に導きたいのです。それにこたえるための知見をもった「人」にサポートを依頼したいのです。広告主は広告会社の経営者を面接すべきでしょう。広告会社の経営者は一件この状況を認識しているようなことは言うでしょう。しかし自分でしっかり理解できていない者はすぐ分かります。
だから面談して、変革の時代に経営者に認識や理解のない会社との取引を見直すべきでしょう。経営者に本当の理解のない会社では、たとえ良くできる人材がいても、その人材が実力を発揮できる環境をつくり得ないのです。その意味でも広告会社には経営者の『経営力』が大きく問われる年となるでしょう。そうした広告主の期待に応えることができない広告会社の本格的な解体が急速に始まる年、それが今年2012年といえるでしょう。
景況感でいえば、マーケティング活動への投資は決して少なくないでしょう。それだけにむしろ優勝劣敗が明確になる年になると思われます。

2011年6月18日、ベルサール神田で開催したCSS Nite LP, Disk 16「スマートフォン特集（2）Android編」のフォローアップ（スライド、音声、終了直後のメッセージ）を公開します。

• CSS Nite LP, Disk 16フォローアップ（1）あんざい ゆきさん（uPhyca）
• CSS Nite LP, Disk 16フォローアップ（2）華井 雅俊さん
• CSS Nite LP, Disk 16フォローアップ（4）岡田 昇三さん（hi-posi）
• CSS Nite LP, Disk 16フォローアップ（5）石野和明さん（ライブドア）
• CSS Nite LP, Disk 16フォローアップ（3）杉本 札彦さん（ブリリアントサービス）
• CSS Nite LP, Disk 16フォローアップ（8）たにぐち まことさん（H2O Space.）
• CSS Nite LP, Disk 16フォローアップ（6）執行 大介さん（BBmedia）
• CSS Nite LP, Disk 16フォローアップ（7）高津戸 壮さん（ピクセルグリッド）
• CSS Nite LP, Disk 16「スマートフォン特集（2）Android編」のフォローアップを公開しました

撮影：飯田昌之

2011年5月14日、ベルサール九段で開催したCSS Nite LP, Disk 15「ソーシャルメディア特集」のフォローアップ（スライド、音声、終了直後のメッセージ）を公開します。

• CSS Nite LP, Disk 15フォローアップ（1）安田 英久さん
• CSS Nite LP, Disk 15フォローアップ（2）小野寺 翼さん
• CSS Nite LP, Disk 15フォローアップ（3）井出 一誠さん
• CSS Nite LP, Disk 15フォローアップ（4）加藤 洋さん
• CSS Nite LP, Disk 15フォローアップ（5）西畑 一馬さん
• CSS Nite LP, Disk 15フォローアップ（6）安川洋さん
• CSS Nite LP, Disk 15フォローアップ（7）益子 貴寛さん、國分 亨さん、原 一宣。さん
• CSS Nite LP, Disk 15フォローアップ（8）江尻 俊章さん
• CSS Nite LP, Disk 15フォローアップ（9）岩上安身さん、川井 拓也さん（ヒマナイヌ）

撮影：飯田昌之

2011年5月14日、ベルサール九段で開催したCSS Nite LP, Disk 15「ソーシャルメディア特集」のフォローアップとして、西畑 一馬さん （to-R）の『ソーシャルメディア時代のWeb制作』のスライド、音声を公開します。

• スライド（PDF、108ページ、18.3MB）
• 音声（MP3、41:12、19.8MB）

メッセージ

「ソーシャルメディア時代のWeb制作」のセッションを担当しましたトゥーアールの西畑です。

Twitterでいただいたいくつの質問をフォローアップとしてブログにアップしました。

FacebookやTwitterなどは日々新しい機能がリリースされており私も試行錯誤の毎日です。

みなさんも、新しいテクニックやTIPS、実装方法などを知ったら、blogやTwitter、Facebookを通してどんどん「共有」していきましょう！

すこし宣伝ですがセッション中で紹介した@Anywhereの実装については拙著『jQuery逆引きマニュアル』でも紹介しております。 興味がある方は書店なので手にとっていただけら幸いです。