14 years 6ヶ月 ago
14 years 6ヶ月 ago
14 years 6ヶ月 ago
2011年2月5日、ベルサール九段で開催したCSS Nite LP, Disk 13 reprise「スマートフォン特集（1）iPhone/iPad編」のフォローアップとして、高津戸 壮さん（ピクセルグリッド）の『iPhone/iPadサイト制作でハマらないために』のスライドと音声をシェアします。
CSS Nite LP, Disk 13 repriseは、2011年1月22日に開催したCSS Nite LP, Disk 13「スマートフォン特集（1）iPhone/iPad編」の再演版です。
続編のLP16：Android編を6月18日に開催します。
メッセージ
長時間のセミナーでしたが、ご清聴のほど、ありがとうございました。
私のセッション、「iPhone/iPadサイト制作でハマらないために」について、フォローアップさせていただきます。
■CPI x CSS Nite「After Dark」
講演中にお話した、CPI x CSS Nite「After Dark」のUstream録画は以下にあります。こちら、ご興味のある方はご参照いただければと存じます。
■Androidについて
今回は、iPhoneにフォーカスした特集だったのですが、アンケート内でAndroidについても知りたいという感想を持たれた方が多いようでした。弊社で経験したAndroid案件は数少ないのですが、Androidに関して、私が感じているCSS・JSでUIを実装する際の所感を共有させていただきます。
※確実に正確な情報と保証できるものではないため、あくまで参考程度にお考えください
まず、Androidは、バージョンによって大きく性能が異なります。JSを書く際、問題になったのはバージョン2.1以下のAndroidです。この環境において、iPhone向けに書いていたJSが動作せず、アニメーション付のUI実装を断念した経験があります。バージョン2.2以降であれば、むしろiPhoneよりも高速にJSが動作する程に感じられ、PC向けに書いているのと同じ感覚でUI実装が行えました。※端末により差はあるものと思います。
2011年2月現在、出回っているAndroid端末には、まだまだ2.1が多いのが現状です。なので、iPhone以上にアニメーションを駆使したUI実装は厳しいのが現状と言えます。もしそういったものを実装するのであれば、バージョンで分岐し、実現可能なものだけを2.1以下に見せるなど、プログレッシブエンハンスメントという考え方がより重要なものとなります。
ほか、Androidにはエミュレーターが用意されているのですが、これを利用したとしても、JavaScriptのエラーコンソールを出すのは追加でプラグインを入れたりしなければならず、敷居の高いものになっています。また、meta viewporの指定がうまくきかなかったりと、iPhoneに比べると、もっと開発のし辛い環境であると言えると思います。
ということで、Androidに関しましても、私のセッションであったように、PCと比べると、やはりガラケーに近い感覚で、慎重に、ミニマルに設計する必要があるものと考えています。
以上、ご参考になれば幸いです。
14 years 6ヶ月 ago
2011年2月5日、ベルサール九段で開催したCSS Nite LP, Disk 13 reprise「スマートフォン特集（1）iPhone/iPad編」のフォローアップとして、小山田 晃浩さん（ピクセルグリッド）の『iPhone/iPadサイト制作でのCSS設計とデザイン最適化事例』のスライドと音声をシェアします。
CSS Nite LP, Disk 13 repriseは、2011年1月22日に開催したCSS Nite LP, Disk 13「スマートフォン特集（1）iPhone/iPad編」の再演版です。
続編のLP16：Android編を6月18日に開催します。
メッセージ
ご参加頂いた皆様、長時間のセッションお疲れさまでした。
私のセッションでは、これからモバイル端末への対応を行おうと考えている方に向けてメディアクエリーについてをお伝えいたしました。
メディアクエリーは多くの人にとって馴染みがあるCSSの記法でそのまま利用することができます。また、特別な開発環境が必要というわけでもありません。
特に、スライド31ページ目以降でご紹介した3つの@media規則の使い方を復習し、ぜひ実験や利用をしてみてください！
なお、Media Queriesは数あるCSS3の機能の中でもかなり安定状態にある草案で、近いうちに行われるであろうCSS2.1勧告の後、CSS3 Media Queriesについても正式に勧告になると予測されます。
また、メディアクエリーについてセッション内では、特にiPhoneやiPadなどの小さい画面への応用を紹介いたしましたが、今後登場するであろう、テレビ画面やその他のデバイスへの応用へも期待できます。特に今すぐ使うという予定はなくても、知識として実際に試しておくといいでしょう。
■transform:scale()ではなく、zoomを利用する理由
セッション中にタイムラインで「なぜtransform:scale()ではなく、zoomを使うのか」といったような内容が流れていました。transformはzoomと同じく拡大縮小表示は可能なのですが、transformを利用したとしても、変形前の領域は維持され、隙間があいてしまったり、重なってしまったりしまったりしてしまいます。
簡単なdemoを用意してみましたのでその違いをお試しください（※Google Chrome、Safariでのみ動作します）。
14 years 6ヶ月 ago
2011年2月5日、ベルサール九段で開催したCSS Nite LP, Disk 13 reprise「スマートフォン特集（1）iPhone/iPad編」のフォローアップとして、たにぐちまことさん（H2O Space.）の『ライブコーディングで学ぶ、iPhoneサイト制作のキホン』のスライドと音声をシェアします。
CSS Nite LP, Disk 13 repriseは、2011年1月22日に開催したCSS Nite LP, Disk 13「スマートフォン特集（1）iPhone/iPad編」の再演版です。
続編のLP16：Android編を6月18日に開催します。
メッセージ
みなさん、長丁場お疲れさまでした！非常に濃い6時間を過ごすことができましたね。
さて、私のセッションでは「Windowsの場合はどうしたらよいのだろう？」というご質問をいただいておりましたので、ご回答差し上げます。
Windowsでは、セッション中で紹介した「iOSシミュレータ」および「Pastebot」を利用することができません。そのため、若干作業はやりにくくなってしまいます。
●Safariを利用する
Windows版Safariは、Mobile Safariとほぼ同じレンダリング能力を持っていますので、これで表示確認をします。ただし、一部 CSS3のサポート状況などが異なっているため、実機での確認は必須です。http://www.apple.com/jp/safari/download/
●Adobe Dreamweaver CS5 のマルチスクリーンプレビュー
Dreamweaver CS5には、「マルチスクリーンプレビュー」という複数デバイス向けの表示を確認する機能があります。これを利用すれば、横320pxや 480pxといった幅での表示を簡単に確認することができます。
●実機での確認には、Gmailの下書きなどを使う
実機で確認する際、URLを打ち込むのが面倒なとき、Gmailのユーザーでしたら「下書き」を利用することができます。
Gmailで新しいメールを作成して、下書きとして保存します。これを、iPhone側のメールソフトで Gmailアカウントを同期し、「Drafts」フォルダを見るとメールが同期されるので、そのURLをクリックするという方法です。（この時、Gmailにアクセスして下書きを見てしまうと編集モードになってしまうので、iPhone付属のメールソフトで閲覧する必要があります）
その他、DropboxやEvernoteなどインターネット経由で情報が共有できるソフトであれば、同じようなことができるでしょう。
14 years 6ヶ月 ago
2011年2月5日、ベルサール九段で開催したCSS Nite LP, Disk 13 reprise「スマートフォン特集（1）iPhone/iPad編」のフォローアップとして、益子貴寛さん（サイバーガーデン）の『iPhone/iPadサイト制作でHTML5活用』のスライドと音声をシェアします。
CSS Nite LP, Disk 13 repriseは、2011年1月22日に開催したCSS Nite LP, Disk 13「スマートフォン特集（1）iPhone/iPad編」の再演版です。
続編のLP16：Android編を6月18日に開催します。
メッセージ
アンケートで、セッション間の「つながり感」や「一体感」がよかった、という声をたくさんいただけて、とてもうれしかったです！
デバイス（ユーザーエージェント）振り分けについてフォローします。
JavaScript、PHP、.htaccessのうち、ふつうは.htaccessをつかう、と覚えておいてください。（編集権限があれば「httpd.conf」でも可）
ただし、
- サーバ管理上、.htaccessの編集権限が与えられていない・開発段階で、ローカル環境をサーバ化していない（XAMMP、MAMPなどで）
といった場合には、Javascriptをつかうとよいでしょう。PHPをつかっているのであれば、もちろんPHPでもよいです。
ほか、自動的に振り分けずに、iPhoneからのアクセスに対しては、「iPhone用サイトが利用できますが、移動しますか？」などのメッセージをポップアップで表示したり、ページのなかに目立つように書いておく方法もあります。
サイトのつくりやユーザーニーズによっては、自動的に振り分けないほうがよい場合もありますので、ユーザー目線で適切な方法を選んでいただけたらと思います。
では、「鉄は熱いうちに打て」で、心がホットなうちにiPhone/iPad用サイト制作をはじめてみましょう！
14 years 6ヶ月 ago
2011年2月5日、ベルサール九段で開催したCSS Nite LP, Disk 13 reprise「スマートフォン特集（1）iPhone/iPad編」のフォローアップとして、谷 拓樹さんの『スマートフォン時代のWeb制作』のスライドと音声をシェアします。
CSS Nite LP, Disk 13 repriseは、2011年1月22日に開催したCSS Nite LP, Disk 13「スマートフォン特集（1）iPhone/iPad編」の再演版です。
続編のLP16：Android編を6月18日に開催します。
メッセージ
みなさま長い時間おつかれさまでした。最初のセッションということで導入となるお話をさせていただきましたが好評もいただき、みなさまにお伝えできたようで良かったです。
アンケートやTwitterにて「Androidだとどうなるの？」という話もよく見かけましたが今回の特集であるiPhone/iPadとは確かに違う部分があります。各機種搭載しているAndroid OSのバージョンにバラつきがあったり、デバイスによって違うということもあります。
Android対応については５月のLP15で、ということになりますがやはりそれ以前に重要なところが、Mobile First、モバイルデザインということになります。カバーしたい範囲が大きいほど、なかなか容易ではないと思われるかもしれませんがサイト設計をするときに、頭の中に少しモバイルを置いておくだけでもアウトプットする内容の質が変わります。
私自身もまだまだ勉強しないことが多いですがただただ苦しい課題と捉えず、面白みを感じて進んでいきましょう。
14 years 6ヶ月 ago
2011年1月22日、ベルサール九段で開催したCSS Nite LP, Disk 13「スマートフォン特集（1）iPhone/iPad編」のフォローアップとして、たにぐち まことさん（H2O Space.）の『ライブコーディングで学ぶ、iPhoneサイト制作のキホン』のスライドと音声をシェアします。
たにぐちさんは著書『iPhone+Android スマートフォンサイト制作入門』が好評です。LP13とは分野違いですが、『よくわかるPHPの教科書』も売れているようです。
メッセージ
皆さん、長丁場のセミナーお疲れさまでした。
私自身、スマートフォントはなんぞやから、アプリの話まで、幅広い知識を一日で濃密に吸収できた一日になりました。iPhone/iPadは未来を感じる面白いデバイスなので、Androidと合わせて成長を見守りながら、楽しんでいけたらと思います。
さて、私のセッションの最後で紹介した「おみやげ」を改めてご紹介します。以下のサイトにアクセスしていただくと、コード集やリンク集を見ることができます。今後も、気がついたものからアップしていきますので、RSSでチェックしていただいたり、Evernoteユーザーの方は取り込んでご利用ください。
14 years 6ヶ月 ago
2011年1月22日、ベルサール九段で開催したCSS Nite LP, Disk 13「スマートフォン特集（1）iPhone/iPad編」のフォローアップとして、谷 拓樹さんの『スマートフォン時代のWeb制作』のスライドと音声をシェアします。
谷さんは著書『HTML5＋CSS3で作る 魅せるiPhoneサイト』が非常に好評です。
メッセージ
Twitterにて「スマートフォンで、どのくらいウェブブラウズに使っているのか」というつぶやきがありましたので参考になりそうな関連資料となるページを紹介しておきます。
記事中段：スマートフォンの使い方（日経BPコンサルティング）
こちらで参照できるものは1年前の調査のものになりますがその前後の類似調査をみても、概ねウェブブラウジングをメインに使っている方が3分の2近くのようです。
もちろん細かい属性でわけると誤差はあるかとおもいますがウェブブラウズするという前提で、ユーザーが増えていると考えて良さそうです。
14 years 6ヶ月 ago
2011年1月22日、ベルサール九段で開催したCSS Nite LP, Disk 13「スマートフォン特集（1）iPhone/iPad編」のフォローアップとして、高津戸 壮さん（ピクセルグリッド）の『iPhone/iPadサイト制作でハマらないために』のスライドと音声をシェアします。
メッセージ
私のセッション、「iPhone/iPadサイト制作でハマらないために」内で、講演内容について何点か補足します。
- -webkit-transform:translate3d(0,0,0)を付ければいいのか、付けない方がいいのか
- 使った分だけメモリを食うようなので、アニメーションを使った時、チラつく問題が発生した場合に、アニメーションをさせる要素以下の要素全てにかけると良いかと思います。
- -webkit-transformはどのくらいまで許容されるのか
- 以下のページで検証結果が公開されています（英語）http://cubiq.org/testing-memory-usage-on-mobile-safari
14 years 6ヶ月 ago
2011年1月22日、ベルサール九段で開催したCSS Nite LP, Disk 13「スマートフォン特集（1）iPhone/iPad編」のフォローアップとして、益子 貴寛さん（サイバーガーデン）の『iPhone/iPadサイト制作でHTML5フォーム活用＋α』のスライドと音声をシェアします。
メッセージ
6時間超のセミナーにも関わらず、最初から最後まで、みなさんの熱意がひしひしと伝わってきて、とてもうれしかったです。
一点、終了後の質問に回答します。
iPhone/iPadは、インラインフレームのスクロール表現に対応していないのに、Googleマップをインラインフレームで読み込む意味、についてです。
これは、あくまでスクロールを前提にせず、つまり、画像を埋め込むように、ということになります。（元のマップとインラインフレームのサイズをまったく同じにする）
スライドにも、このような説明を少し追加しました。
HTML5フォームのテストページとアクセスマップのファイルを、スライドと一緒に差し上げますので、ぜひいろいろと試してみてください。
14 years 6ヶ月 ago
2011年6月24日（金）に「
Yahoo!リスティング広告セミナー」を沖縄で開催する運びとなりました。
検索連動型広告「スポンサードサーチ(R)」、興味関心連動型広告「インタレストマッチ(R)」の導入を検討されている方、またはすでに導入しているが具体的にどのように運用をすれば良いか知りたい、と思っていらっしゃる広告主を対象にリスティング広告の活用方法をわかりやすく紹介しますので、お近くにお住まいの方はぜひご参加ください。
本セミナーでは、インターネットユーザーが検索したキーワードと関連性の高い広告を掲載する検索連動型広告「スポンサードサーチ」を中心に、サービスの活用方法や成功事例の紹介など、すぐにでも役立つ情報をお伝えします。また、インターネットユーザーの興味や関心に連動して最適な広告を掲載する興味関心連動型広告「インタレストマッチ」の概要や、ご自身で、あるいは代理店経由で利用される場合の導入方法について詳しく解説します。
なお、本セミナーでは無料の個別相談会を実施します。ご自身での運用にお困りの方など、ご希望の方はぜひこの機会にご相談ください。
■概要
※競合他社様のご参加はお断りしております。
※お申し込みが多数の場合は抽選となる場合がございます。
※お申し込みは1社につき2名様までとなります。また、2名でお申し込みの場合は、1名様ずつお申し込み手続きを行ってください。
14 years 6ヶ月 ago
2011/6/1のThe Pew Research Center's Internet & American Life Projectのレポートから。
http://www.pewinternet.org/Reports/2011/Twitter-Update-2011.aspx
http://www.pewinternet.org/Reports/2011/Twitter-Update-2011/Main-Report.aspx
関連リンク：
Twitter利用、リンクありが14.9％、画像リンクありは1.25％
米Twitter利用者、2011年に2,000万人を超える
世界のネットユーザのTwitter.com利用率、オランダが22.3％でトップ、日本は20.0％
Hiromi.Ibukuro@gmail.com (衣袋 宏美（いぶくろ ひろみ）)
14 years 6ヶ月 ago
Net Applicationsのブラウザシェアから。http://marketshare.hitslink.com/browser-market-share.aspx?qprid=3
http://marketshare.hitslink.com/browser-market-share.aspx?qprid=1
Chromeは続伸して12.52％。Safariも7.28％に上昇。IE8.0は31.28％と続落、IE6.0も10.36％にダウン。
関連リンク：
ChromeとSafariがシェアを上げる、2011年4月の世界のブラウザ（Net Applications）
IE8のシェアが35％の壁を超えられず、2011年3月の世界のブラウザ（Net Applications）
Chromeのシェアが10.93％に、2011年2月の世界のブラウザ（Net Applications
Hiromi.Ibukuro@gmail.com (衣袋 宏美（いぶくろ ひろみ）)
14 years 6ヶ月 ago
Net Applicationsのデータから。
http://marketshare.hitslink.com/os-market-share.aspx?qprid=11
Windows 7のシェアは25.89％に上昇。Windows XPは52.41%と続落。
関連リンク：
2011/4世界のWindows 7のシェア、25％突破（Net Applications）
2011/3世界のWindows Vistaのシェア、もうすぐ10％割れに（Net Applications）
2011/2世界のWindows 7のシェアは23.08％に（Net Applications）
2011/1世界のWindows 7のシェアが22.3％に続伸（Net Applications）
2010/12世界のWindows 7のシェアが2割突破（Net Applications）
世界の
Hiromi.Ibukuro@gmail.com (衣袋 宏美（いぶくろ ひろみ）)
14 years 6ヶ月 ago
株式会社ジェイアール東日本企画は、映画「奇跡」の公開に合わせ、山手線の車内を映画一色にした「シアタートレイン（ADトレイン）」の運行を開始した。展開期間は201…
14 years 6ヶ月 ago
株式会社東北新社は5月31日、役員体制を変更し、取締役、監査役および執行役員の候補者を決議した。
経営における意思決定の更なる迅速化を図り、業務執行の強化並び…
14 years 6ヶ月 ago
2011/6/2 sysomos Blog
http://blog.sysomos.com/2011/06/02/how-people-currently-share-pictures-on-twitter/
画像リンクの場合、ホスティングはtwitpicが45.7％を占める。
Hiromi.Ibukuro@gmail.com (衣袋 宏美（いぶくろ ひろみ）)
14 years 6ヶ月 ago
株式会社電通が震災後に立ち上げた社内・グループ横断プロジェクト「NEXT STAGE PROJECT」は5月31日、「生活者意識定点観測調査」の結果を公表した。…
14 years 6ヶ月 ago
2011/6/2 comScore Data Mine
http://www.comscoredatamine.com/2011/06/men-more-difficult-to-persuade-with-advertising-than-women/
Hiromi.Ibukuro@gmail.com (衣袋 宏美（いぶくろ ひろみ）)
