2010年4月17日、ベルサール神田で開催したCSS Nite LP, Disk 9「Coder's Higher」のフォローアップとして、『ノリとツッコミで進める HTML5 ライブコーディング』（小山田 晃浩さん／ピクセルグリッド、益子 貴寛さん／サイバーガーデン）セッションのスライドと音声をシェアします。
2010年4月17日、ベルサール神田で開催したCSS Nite LP, Disk 9「Coder's Higher」のフォローアップとして、『CSS3 for tomorrow [ver.LP9]』（福田泰雄さん／AGN、高津戸 壮さん／ピクセルグリッド）セッションのスライドと音声をシェアします。
拙いセッションでしたが、ご静聴のほど、ありがとうございました！お聴き頂いた1人1人の皆様がCSS3を使用してみよう、と考えるきっかけになってくれれば、とても嬉しく思います。
さて、CSS3の先進的な機能は、残念ながらInternet Explorerではほぼ利用できません。そのことから「まだ早い《「実務では使用できない《と感じてしまわれた方が、やはり多いように考えます。ただし、当日にも言及させて頂いたように、要は使い方ということです。
CSS3を利用することで特に素晴らしいところは、「開発速度の向上《です。角丸や影の実装など、特に時間が掛かるところをCSS任せにすることで、劇的に素早く作り上げることが可能になります。
・出先や打ち合わせにて、プロトタイプを制作してコミュニケーションの一助とする・自社サービス等で、アイディアを素早く形にする・紊期の短縮オプションとして提示してみる
...などなど、練りに練った制作物のディテールよりも、とにかく速さが求められる事例は、いくらでもあります。ここで積極的に提案してみることで、全体的な生産性を大きく上げることができるでしょう。
IEという単体のブラウザを気にして尻込みせず、使える場面はいくらでもある、ということに目を向けて頂けると、これからのWeb制作がとても楽しくなるかと思います。
Enjoy!
ご清聴のほど、ありがとうございました。CSSアニメーションはまだWorking Draftであり、ブラウザの実装もこれからです。おそらく、講演にこられた方は、日常業務の中で使うことはまだ無いな。と思われた方が多かったと存じます。私自身もそう感じますが、私見として、HTML5やCSS3は、これまでのように、単純な受託⇒コーディングというフローとは、別のところから使われだすものと考えています。
対応するブラウザが、広く一般に普及するには、まだ年月が必要でしょう。なので、「IE6をもターゲットにしたサイト作り」は、今後も確実に必要になるはずです。それを安直に無視してしまってよいというのは、制作者の傲慢でしかありません。ですが、ブラウザが限定された環境下では、現段階でも、何の問題も無く、利用することが可能です。今回とりあげたCSSアニメーションは、webkitの実装が最も進んでいます。とすれば、以下のような環境下では、何の問題も無く利用することが可能です。 * Airアプリケーション（HTML+CSS+JavaScriptが利用可能。webkitベース。） * iPhone用サイト（ブラウザはSafari） * android用サイト（ブラウザはChromeベース） * iPhone用アプリケーション（HTML+CSS+JavaScriptを利用できるフレームワークが存在する） * android用アプリケーション（HTML+CSS+JavaScriptで利用できるAPIが存在する） * Google Chromeの拡張機能（HTML+CSS+JavaScriptで記述する） これらを見て、あぁ、私とは関係のない話だなと思われる方もいるかもしれません。そして、HTML5やCSS3が普及したら、覚えないといけないことが増えるな、と。ですが、そんな心配をする必要はありません。なぜなら、ユーザーがいる限り、「IE6をもターゲットにしたサイト作り」は、確実に今後とも必要だからです。その土台に置いては、CSS3を使う理由など、全くありません。こちらからそういうことができるという提案をしなければ、そういったことを求められることは稀ではないでしょうか。特にweb業界に身を置かないクライアントからの依頼であればなおさらです。サイトを作ってほしいと依頼されるだけなのですから。
ですが、こう考えてみてはどうでしょうか。HTML5+CSS3を使えば、より価値のあるモノを提供できるようになると。「制作の単価が下がってきている」という現実は、web業界に身を置く者として、共通の認識であると私自身は考えています。「この状況を打破できるのがHTML5+CSS3である！」でしょうか？HTML5もCSS3も、単なる道具にすぎません。新しい道具が使えるようになってきているというだけの話です。ですが、このような技術がどんどん利用できるようになってきている今という時は、一つのチャンスが訪れている時期ではないでしょうか。どういった価値のあるモノが提供できるのか。これは、HTML5+CSS3で何ができるのかを知る者にしか提案できないことです。
話が広がりすぎましたが、是非CSS3に興味を持ち、試してみて頂けたら幸いです。
※Google chromeでのみ閲覧可能です
2010年4月17日、ベルサール神田で開催したCSS Nite LP, Disk 9「Coder's Higher」のフォローアップとして、『実例に学ぶ！コーディングから参加するUI設計』（長谷川 広武さん／24-7）セッションのスライドと音声をシェアします。
当日はご清聴いただきまして、誠にありがとうございました。今回は失敗談を中心にUI実装時に気を付けることや、ちょっとした工夫の例をご紹介しました。ご意見の中でご指摘もあったのですが、本来であれば、デザインの段階から実装方法やその仕様を（どのタイミングで動作し、どの様な動きをするのか）決めておく必要があります。早期の段階で決めておくことで、その実装についてを、自作するのか、何かプラグインを使うのか、どのような動作をするのか、バグはでないのか・・・などの確認をする時間をとることができます。
「使い易くするために考えることは当たり前のこと《と、すでに様々な工夫もされている方もいるようですが、「ユーザー視点にたって考えずに実装していた《というデザイナー・コーダーもまだまだいるようです。自分もJavaScriptを取り入れる前までは同じで、実装段階に「できる・できない《ばかりでしか考えておりませんでした。しかし、大切なのは、以下にサイトを使うユーザーの立場で考えられるかです。「ちょっとした優しさ・配慮《に心掛けてユーザーにとって使いやすいサイトにできるようにしていきましょう。
タブコンテンツ下にボタンをつけた工夫をご紹介しましたが、その工夫により、コンテンツ下のボタンをどれだけの人がクリックして利用するようになったのかという質問があがっておりました。しかし、残念ながら私の方で実数ご用意できておりません。この件につきましては、必ず入れておいた方がいいということではなく、「縦長になった時にできるちょっとした工夫の一つ《というくらいで今は留めておいていください。
今回お見せした工夫例で、デモをお見せできなかったものがいくつかありました。それらの「実装方法を知りたい！《というご意見もいただきましたので、後々、私のブログにて取り上げていこうと思います。
参照リンク
2010年4月17日、ベルサール神田で開催したCSS Nite LP, Disk 9「Coder's Higher」のフォローアップとして、『Coding with jQuery』（徳田 和規さん／マインドフリー）セッションのスライドと音声をシェアします。
基礎からちょっと難しい内容までを駆け足でお話したので特にソースコード解説部分で、理解できなかった方もいると思いますがセッションを聞いて、少しでも「jQueryに触れてみよう《「自分で何かつくってみよう《と思っていただけたのなら、幸いです。
で、ぜひ、思った止まりじゃなくて、実際に何か書いてみてください。
初めて触る人は今回紹介した「$('div').slideDown();《1行でもいいと思うんです。その1行から何かが生まれて、さらに先に進むことができれば。
慣れてきた人は、UIについて考えてみましょう。私と長谷川さんの連載や、紹介した西畑さんのドーナツ本にはアイデアがたくさん詰まっています。
今回のセッションではjQueryに焦点をあてていてCSSにはふれませんでしたが高津戸さん・福田さんのセッションで見たようなCSS3でのUI実装と組み合わせられれば可能性はまだまだ無限にあると思います。
コーダー・マークアップエンジニアの役割的なものもありますがせっかくフロントエンドに立っているのですからJavaScript難しい、で諦めずに、jQueryを通してもっともっとふれてみてください。私自身そうだったように、Coding with jQueryで新しいきっかけが掴めるかも知れません。
ありがとうございました。
ちなみに補足しておくとたぬきは本当はチワワですよ？まさか本当のたぬきじゃないですよ。一応念のために…笑
各サンプルにはセッションでは使わなかったサンプルも含めリンクを貼っています。（見やすさを考えてキャプチャにしたものがいくつかありますので）また各章で利用した自作プラグインのリンクを貼っておきます。
2010年4月17日、ベルサール神田で開催したCSS Nite LP, Disk 9「Coder's Higher」のフォローアップとして、『XHTML&CSS超高速コーディング術 LIVE!』（大藤 幹さん＋大杉 充さん／スキルパートナーズ）セッションのスライドと音声をシェアします。
HTML5、CSS3などとこれから大きく変わりつつあるウェブ業界ですが、このような大きな変化は今後も何度も訪れるはずです。
そのような動きに対して、しっかりと取り組んでいくことも非常に重要である一方で、そのような変化にふりまわされて現在の仕事に影響が出てしまうのも困りものです。
何が重要で、何を優先すべきなのか？ そんなことに悩んでしまいがちな方には、しつこいようですが『7つの習慣』をお勧めします！ けっこう耳が痛い内容が多いのですが、1回だけではなく、3?4回くらい読むと、共感できる部分が身についてきますよ（自己啓発系の本が好きでない方、何度も紹介してスミマセンです）。
2010年4月17日、ベルサール神田で開催したCSS Nite LP, Disk 9「Coder's Higher」のフォローアップとして、『マークアップエンジニアのキャリアパス』（森田 雄さん）セッションのスライドと音声をシェアします。
2010年7月22日、アップルストア銀座 3Fシアターで開催したCSS Nite in Ginza, Vol.50のフォローアップとして、「a-blog cms」を開発されている山本かずみち（アップルップル）さんのセッションのスライドとメッセージをシェアします。
a-blog cms は、Web制作者向けのツールなので、基本的にはHTML+CSSが書ける人向けとなっております。管理ページを含めたサイト全体をお客様向けにカスタマイズしたいという、そんな方に是非使って頂きたいと思っております。
1周年記念パックというお得なライセンスを今なら購入できるのですが、ほとんど時間がありません。twitterを利用して、以下のように私に連絡を下さい。今月中であれば、1周年記念パック＋αを提供致します「@kazumich #cssniteginza50 に参加しました。 #ablogcms 買います！」
また、もっとしっかり a-blog cms について聞きたいという方は、是非オンラインセミナーに参加下さい。参加される方のブラウザ上に、スライドや、私のデスクトップを表示させ、音声で紹介させて頂いております。
デモをした時に使った Mac OS X への簡単インストール版は、以下のURLでダウンロード＆説明があります。
カスタムフィールドについて、使った事がある人が少なかったので、以下のデモをした方がよかったかもしれません。こちらもご覧になってみて下さい。
2010年7月22日、アップルストア銀座 3Fシアターで開催したCSS Nite in Ginza, Vol.50のフォローアップとして、「Jimdo」をリリースされているKDDI Webコミュニケーションズの高畑哲平さんさんのセッションのスライドとメッセージをシェアします。
CSS Nite in Ginza Vol.50にご参加頂いた皆様、Jimdo Japanの高畑です。
a-blog cms、tsumiki2.0とは少々毛並みの異なるサービスとしてご認識いただけたかと思います。 Jimdoはエンドユーザーが知識がなければないほど力を発揮するサービスですので、是非ご活用ください。
プレゼンテーション内でご紹介したテンプレート作成ですが、Page Partnerという名前でプログラムを用意しております。アフィリエイトと連結することも可能です。ちょっとした小遣い稼ぎに良いかもしれません。
また、昨日デモで紹介したテンプレートは、Jimdoを使ってビジネスをされているデザイナーの方のサイトです。 マニュアルやテンプレートも数多く記載されていますので、併せてご活用ください。
その他質問等ありましたら、twitterでご質問いただいても構いません。お気軽にお問い合わせください。
2010年7月15日、アップルストア銀座 3Fシアターで開催したCSS Nite in Ginza, Vol.49のフォローアップとして、バシャログ。で公開されたフォローアップと音声をシェアします。
なお、CSS Selector Generator | CSS のセレクタ一覧を一発で自動生成！のサービスもはじまっています。
