2011年9月17日、ベルサール神保町で開催したCSS Nite LP, Disk 18「その先にあるjQuery」のフォローアップとして、西畑 一馬さんの『jQuery高速化』のスライド、音声を公開します。
「jQuery高速化のセッション」を担当したトゥーアールの西畑です。
当日は色々とお話ししましたが、私は基本の「ベンチマーク」が一番重要だと考えています。こういった書き方のほうが速い/遅いというテクニックはどれぐらい効果があるかというのが明確でないことが多いですが、これは効果が利用箇所やデバイス・ブラウザによって千差万別なためです。ぜひベンチマークを利用して効率よく高速化を行ってみてください。
また、ブログにもフォローアップを行ないましたので、こちらも参考にしてください。
最後になりましたが、ご清聴いただきありがとうございました！
2011年9月17日、ベルサール神保町で開催したCSS Nite LP, Disk 18「その先にあるjQuery」のフォローアップとして、徳田 和規さん（ピクセルグリッド）の『Rich JavaScript Application』のスライド、音声を公開します。
当日はありがとうございました。短い時間の中にできるだけ詰め込んだため急ぎ気味に進行してしまいました。。
Rich JavaScript Applicationの前編ということで機能を小分けして紹介しましたがjQueryの先にあるのはパフォーマンスや考え方など詰まるところJavaScriptやDOMです。
JavaScript、DOMの仕組みを理解しつつ使えるところはjQueryを効率よく使って西畑さんのセッションでもあった通りパフォーマンスも考えて作っていくというのが目標かなと思います。
ありがとうございました！
2011年9月17日、ベルサール神保町で開催したCSS Nite LP, Disk 18「その先にあるjQuery」のフォローアップとして、高津戸 壮さん（ピクセルグリッド）の『Rich JavaScript Application』のスライド、音声を公開します。
長時間のセッションでしたが、ご清聴いただき、ありがとうございました！
本日私がお話させていただいた内容は、あまりネットや書籍上でも、見かけることが少ないないようなのではないかと思います。というのも、このような設計方法というのは、実際のところ、まだコレといった方法が確立されておらず、どこも試行錯誤しながら行なっていることではないかと思われるためです。今日のセッションは、私がいくつか似たような案件をこなしたりなんなりした結果、今、自分はこう考えて書いているという内容を発表させて頂きました。
jQueryはDOM周りの操作に長けていますが、大きなものを作るときの枠組みとなる思想といったものは含まれていません。そもそも、セッション内で紹介したjQuery Templates、Deferred、Modelといったものは、ちょっとしたUIを作るためには、特別必要ではない物だったりすらします。
jQueryではない、サーバー側との連携まで考慮された、別の思想で作られたJavaScriptライブラリも多く存在しますが、それらは逆に、機能が多すぎて利用するための学習コストが高かったり、試してみたものの、jQueryほどの柔軟性が無いために、なかなか実務では使いづらいものであったりします。
こういった状況の中で、うまいこと思い通りにWebアプリを作る方法の１つとして、「jQueryで作ったものの組み合わせ＋ちょっと気の利いた仕組み」が、なかなかに使いやすいものではないかなと個人的に考えています。
本日の内容をもっと突っ込んで知りたいという方は、スライド内に散りばめたサンプルやリンクを当たってみて、よりjQueryについて突っ込んで学習されることをお勧めしたいと思います。特に、個人的には、セッション内で紹介した、jQuery UI Widgetを業務で利用することが多いので、前はHTMLばかりだったけど、最近はかなりjQueryを書いてると言う方に対して、結構オススメです。
そこまで突っ込んでJavaScriptを書いていないので、本日の内容は、ちょっと難し過ぎたかもという方も多いのではないかと思います。でも、これからどんどん学習を続けていき、こういったWebアプリを作りたいと考えている場合、とりあえずは、自分で、jQueryのプラグイン形式でコードが書けるようになるところに達するのが、まずひとつのステップになるのではないかと考えています。
その場合、ちょっと宣伝になってはしまいますが、私がいま執筆している書籍が10月発売予定となっておりますので、こちらの方もチェックしていただけると幸いです。
2011年9月17日、ベルサール神保町で開催したCSS Nite LP, Disk 18「その先にあるjQuery」のフォローアップ（スライド、音声、終了直後のメッセージ）を公開します。
撮影：飯田昌之
2011年9月17日、ベルサール神保町で開催したCSS Nite LP, Disk 17「HTML5による電子書籍」のフォローアップ（スライド、音声、終了直後のメッセージ）を公開します。
撮影：飯田昌之
2011年5月14日、ベルサール九段で開催したCSS Nite LP, Disk 15「ソーシャルメディア特集」のフォローアップとして、 江尻 俊章さん（環）の『実際にいわき市現地に行って支援してきましたレポート』のスライド、音声を公開します。
環の江尻です。参加者の皆様、黙祷してくださってありがとうございます。昨日は近所の自衛隊のご家族と遊んでました。被災地救助に行ったお父さんは今日帰ってくる予定。久しぶりの家族団らんでしょうね。感謝です。
5月30日に「福島県を応援する会」がありますhttp://www.fujita-kanko.co.jp/news/furusato-event/02.html福島の酒蔵自慢のお酒飲み放題、福島の郷土料理食べ放題で5000円です
5月24日発売Web Site Expert36号に私の書いた記事がのる予定ですいわき市支援について今回割愛した話もありますので、発売されたらぜひご一読ください
7月7日は夜明け市場オープン予定日です。当日は観光バスをチャーターして、いわき市に行こうと思います。「いわきにご飯食べに行ってもいいかも」と思う方はFacebook「がんばっぺいわき隊GIT7」で案内しますので「いいね！」よろしくお願いします（笑）
日本ウェブデザイナーズ協会(JWDA)では被災地のウェブ業界採用支援、仕事支援を継続して行って行く予定です。会員の人材会社がスカイプ面接で人材紹介をするプロジェクトを進めています。正式に決まったら告知します。http://www.jwda.jp/
JWDAでは、ウェブ解析を体系的に学べる講座を開催しています。無料で受けられるオープンセミナーもありますので、ご都合のよい日程でご参加ください。
お話を聞いていただき、ありがとうございました。
2011年5月14日、ベルサール九段で開催したCSS Nite LP, Disk 15「ソーシャルメディア特集」のフォローアップとして、安川洋さん（アユダンテ）の『企業におけるTwitter活用』のスライド、音声を公開します。
2011年5月14日、ベルサール九段で開催したCSS Nite LP, Disk 15「ソーシャルメディア特集」のフォローアップとして、益子貴寛さん（サイバーガーデン）、國分 亨さん（dreamseeker）、原 一宣。さん（Gazi工房）の『3.11を通して考えるソーシャルメディアの功罪』のスライド、音声を公開します。
サイバーガーデンの益子です。
東日本大震災を通じて、Webに関わる者として、なにができるのかをずっと考えてきました。
まだまだ肩に力が入ったままの、ゴツゴツとした言葉しか出てこないまま、いろんな思いを抱えて話した次第です。
アンケートをひとつひとつ、とてもありがたく読みました。
なんとかわたしたちの思いを伝えられたのではと、少しだけ肩の力を抜くことができそうです。
dreamseeker 國分です。
今回の震災を通して（多少の弊害を感じつつも）Twitterを中心とするソーシャルメディアに助けられた点が多くありました。
このような災害は、二度と起こらないことが理想とはいえ。どう活用すれば有効なツールになりえるかをみなさんにも考えていただけるキッカケになれたなら、嬉しいです。
Gazi工房 原です。
今回の震災、我々にとって多く考えることがありました。そして何よりも、考えるだけでは無く、行動する大切さを教えられました。
おそらく、参加されたみなさんも、似たような思いを共有されていたと思います。そして、何をすれば良いのか？悩まれたことでしょう。
ソーシャルメディアの先には、かならず人が存在します。その部分を忘れず、制作者、情報の発信者としてどうあるべきか、國分さん同様、考えるキッカケになれたら幸いです。
2011年5月24日発売予定、技術評論社の隔月刊誌『Web Site Expert』36号の連載「中小企業が『勝つ』ためのWeb制作と運営ノウハウ」は、「第27回 緊急時・災害時に強いWebサイトを考える」というテーマです。
堀内敬子さん執筆、益子貴寛監修で、足かけ5年以上つづいている連載です。
今後のWebサイト運営の一助になればと思いますので、発売されたらぜひお手にとってみてください。
2011年5月14日、ベルサール九段で開催したCSS Nite LP, Disk 15「ソーシャルメディア特集」のフォローアップとして、岩上安身さん、川井 拓也さん（ヒマナイヌ）さんの『ライブジャーナリズムの夜明け〜報道Ustの可能性と今後の課題』のスライド、音声を公開します。
セッションの一部のUSTREAMの録画を公開しています。
2011年6月18日、ベルサール神田で開催したCSS Nite LP, Disk 16「スマートフォン特集（2）Android編」のフォローアップとして、あんざい ゆきさん（uPhyca）の『Android OSと現状のデバイス総まとめ』のスライド、音声を公開します。
「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 端末の画面を表示するのに使っていたソフトウェアです。
Android 端末を PC に接続して、端末の画面を PC の画面上に表示することができます。Java で書かれているため Windows, Mac, Linux で動作します。
Android 2.3 から対応された NFC (Near Field Communication) を使ってSuica や Pasmo の履歴を見れるアプリです。NFC をサポートしている Android 端末 でのみ使用できます。現状ではSamsung の Nexus S という端末が NFC をサポートしています。
セッションでは、分かりやすくするために、比率の小さい OS のバージョンをまとめてグラフにしていました（例えば、Android 1.5 と Android 1.6 を合わせて 4% など）。より詳細な分布は Android Developers のサイトにあります。
また、画面サイズと解像度の分布も同じサイトで報告されています。
2011年6月18日、ベルサール神田で開催したCSS Nite LP, Disk 16「スマートフォン特集（2）Android編」のフォローアップとして、華井 雅俊さんの『切っても切り離せないAndroidアプリとクラウドとの連携』のスライド、音声を公開します。
2011年6月18日、ベルサール神田で開催したCSS Nite LP, Disk 16「スマートフォン特集（2）Android編」のフォローアップとして、杉本 札彦さん（ブリリアントサービス）の『Android技術者とのデザイナーとのハッピーな出会い』のスライド、音声を公開します。
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』のスライド、音声を公開します。
「そうだったのか！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・挙動はどこが違う？』のスライド、音声を公開します。
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向けサイトのはまりポイントと脱出法』のスライド、音声を公開します。
この度はCSS Nite LP16にご参加いただき、ありがとうございました。
「実例からみるAndroid向けサイトのはまりポイントと脱出法」ということでお話させていただきましたが、数多くあるAndroid対応のはまりポイントのなかでも、現時点で実装時に最もはまるであろうポイントに厳選してお話ししました。
実装に携わっている方のなかには、すでにご存じの方もいらしたかもしれませんが、少しでもお役に立てれば幸いです。
セッション中にTwitterでご質問いただいた内容に お答えします。
Android2.2のNexus oneとGalaxy Tabで調べた結果Web Fontsは使えないようです。
将来のAndroidでは使えるようになると良いのですが、その際はスマートフォンの通信速度を考え、必要な文字だけを含んだフォントファイルを作成するなどの工夫が必要になってくるかと思います。（※フォントの扱いはライセンスに注意してください）
2011年6月18日、ベルサール神田で開催したCSS Nite LP, Disk 16「スマートフォン特集（2）Android編」のフォローアップとして、高津戸 壮さん（ピクセルグリッド）の『Android向けサイト制作のあれこれ：viewportについて』のスライド、音声を公開します。
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を活用しよう』のスライド、音声を公開します。
「Androidサイト制作に jQuery Mobileを活用しよう」を担当した、たにぐちまことです。jQuery Moibleは、非常に注目度が高い代わりに、その名前からちょっと難しそうというイメージを持たれている方も少なくありません。私のセッションで、少しでも親しみを持って、触ってみようかなと思っていただけたら光栄です。
一点訂正です。
●訂正： Sencha touchは無料です
セッション中「Sencha touchは基本有償です」と紹介しましたが、完全無料で利用いただけるようになっていました。最新の情報を追えておらず、大変失礼いたしました。
また、アンケートで頂いた質問に回答します。
●jQuery Mobileのバグなどについても触れて欲しい
こちら、jQuery Mobileにはご指摘のとおり、現在数多くのバグがあります。目立ったところでは、
などなど、数えきれません。jQuery Mobileは、あくまでも「アルファ版」という開発中のプロダクトです。今後、徐々に改善されていくと思いますので、気長に待つとともに発見したら積極的にコミュニティなどに報告してあげるとよいでしょう。
また、実用に使うにはまだ時期が早いですし、今後仕様などが大きく変わることも予想されますので、まずは研究目的で利用して、使い捨てのプロダクトに役立てていくとよいでしょう。
ぜひ、楽しんで使ってみてください。
セッション中、アイコンの一覧をお見せするために利用したサイトは、現在私が作っている jQuery Mobileのリファレンスサイトの作りかけのものでした。まだ、一般公開しておりませんが、ご参加者の皆様に仮状態で公開します。
ちなみに、本日 jQuery Mobileのベータ版が公開されました。リリース文はこちら。
日本語で紹介記事を書いてみましたので、英語が苦手な方はこちらもどうぞ
すでに、セッションでご紹介した内容とずれてしまった部分もありますが、その分どんどん進化を続けていますので、ぜひこまめにバージョンをチェックしながら学習を進めてみてください。
本年もよろしくお願いいたします。
2011年は39回のイベントを通して、のべ4,977人の方にご参加いただきました。中でも、地方版は、熊本、岡山、北九州、徳島で初開催、3年ぶりの福岡をはじめ、18回のイベントを通してのべ1,899人の方にご参加いただきました。
次のようなことなどでお困りの方は、cssnite@gmail.comまで、ご連絡ください。
2011年6月18日、ベルサール神田で開催したCSS Nite LP, Disk 16「スマートフォン特集（2）Android編」のフォローアップ（スライド、音声、終了直後のメッセージ）を公開します。
撮影：飯田昌之
2011年5月14日、ベルサール九段で開催したCSS Nite LP, Disk 15「ソーシャルメディア特集」のフォローアップ（スライド、音声、終了直後のメッセージ）を公開します。
撮影：飯田昌之
