- Googleが検索トラフィックを抑制・平均化しているかも -
Posted on: 海外SEO情報ブログ - SuzukiKenichi.COM
2010年6月5日、ベルサール九段で開催したCSS Nite LP, Disk 9.2（reprise）のフォローアップとして、高津戸 壮さん（ピクセルグリッド）の『CSS3 for tomorrow』のスライドとメッセージをシェアします。
CSS3 FOR TOMORROW -後編：CSSアニメーション-をご拝聴頂き、ありがとうございます。
ご回答頂いたアンケートを拝見するに、JavaScriptが頻繁に出てきていたため、その場で完全に理解できたという実感を持って頂けなかったかもしれないなと少し感じています。
スライドの中で紹介したサンプルでは、:hoverを使って何か変化を起こしているものを多く用意させていただきましたが、実際、CSSアニメーションが利用できるようになった環境を想像してみると、現在FlashやSilverlightが担っている役割をCSS+JavaScriptで行うことが多くなっていきそうです。
そのような状況では、JavaScriptとCSSアニメーションの組み合わせが非常に強力なものとなっていきます。
CSSアニメーションに興味を持って頂けた方は、これと合わせ、JavaScriptが一緒に使えるようになると、できることが一気に増えますので、是非JavaScriptについてもご興味をもって頂ければと存じます。
CSSアニメーションの仕様および、スライドの中で紹介したiPad用widgetが紹介されているURLは以下になります。
2010年6月5日、ベルサール九段で開催したCSS Nite LP, Disk 9.2（reprise）のフォローアップとして、西畑一馬さん（to-R）の『jQueryの基本』のスライドとメッセージをシェアします。
「jQueryの基本」のセッションを担当したトゥーアールの西畑です。
前半のCSS3のセッションやjQueryのセッションに共通して言えることですが、マークアップエンジニアに求められるスキルは大きく変わりつつあります。
従来の静的な絵をHTMLに変換するスキルから、動きを利用して「使いやすさ」や「気持ちよさ」をデザインするスキルが求められるようになってきています。
これはある意味「Webらしさ」を演出できる環境が整いつつあるということです。
ぜひ、表現の一つの手段としてjQueryを学んでいっていただけたらと思います。
アンケートでいただいた質問への回答や、参考サイトなどをブログに書きましたのでそちらも参考にしてただけたらと思います。
最後になりましたが、ご拝聴ありがとうございました。
jQueryを勉強されたい方は、西畑さんの著書をチェックしてみてください。
2010年5月29日、ベルサール新宿で開催したDreamweaver Town Meeting in Tokyoのフォローアップとして、森 和恵さん（r360studio）の『Dreamweaverで管理するMovable Typeテンプレート』のメッセージと補足資料をシェアします。
大喜利2番で[Dreamweaverで管理するMovable Typeテンプレート]を担当の森和恵です。ご静聴ありがとうございました。こちらにフォローページをご準備いたしましたのでご活用ください。
当日のデータに加えて、ロングバージョンとして、詳細な解説の動画も加えて公開しています。※30分近くの動画になっちゃいました。すみません。
「早すぎてわかんなかったよ!!!」という方は、もっとゆっくり説明してますので、どうぞ。
「内容が初級過ぎて、つまんなかったよ!」という方は、共有部分をDwライブラリ化後に更に活用する機能を紹介しました。(<$mt:Include$>とかPHPモジュール化機能)※それも知ってるよ!という方は…力不足ですみません。(汗)
また、何かの機会でお会いできましたら幸いです。これからも、ステキな"Dreamweaverライフ"をお過ごし下さい。
2010年5月29日、ベルサール新宿で開催したDreamweaver Town Meeting in Tokyoのフォローアップとして、國分 亨さん（dreamseeker）の『コードヒントをカスタマイズして、スタイル定義を効率化しよう！』のスライドとメッセージをシェアします。
Dreamweaver Town Meeting in Tokyoに参加いただいたみなさん、長丁場ということもあり、本当にお疲れ様でした！
いつもなら「参加者」な自分。大喜利形式の限られた時間の中で、うまくご説明できたかな？と不安に思いつつ、アンケートでいただいたコメントを見て、泣きそうになりました。はい。少しでもお役に立てたなら、嬉しいです。
セッション内でご覧いただいた通り、コードヒントはシンプルなXMLファイルがベースになっていますので、配布されているCodeHints.xmlを利用しつつ、使いやすいようにカスタマイズしてみてくださいね！
ブログにて、CS4/CS5向けのCodeHints.xmlを公開しました。よかったら、ご確認ください。
2010年5月29日、ベルサール新宿で開催したDreamweaver Town Meeting in Tokyoのフォローアップとして、湯口 りささん（RsStudio）の『Fireworksではじめる快適CSS Spriteライフ』のスライド、補足資料、ムービーをシェアします。
Dreamweaver Town Meeting in Tokyoにご参加いただいたみなさま、お疲れ様でした！
7分にまとめきれず、焦点のぼやけたセッションになってしまいましたが多少でも面倒なCSSスプライトを使ってみよう！という切っ掛けになれば嬉しいです。
セッションで説明できなかった「売り」部分がいっぱいありますので、ダウンロード＆補足動画を見ていただければ幸いです。
CSSスプライトは画像置換のテクニックを使っていることが多く、HTMLやCSSの構造によるSEO的なペナルティやブラウザ対応は使用するCSS依存です。CSS Sprite ExtensionはCSSをテンプレートで制御できるので、目的にあったCSSを探してご利用ください。
2010年5月29日、ベルサール新宿で開催したDreamweaver Town Meeting in Tokyoのフォローアップとして、岡部 和昌さん（ヤフー）の『Dreamweaver x Zen-coding』のスライド、補足、メッセージをシェアします。
7分間という短い時間でしたが、少しでも「Zen-codingをさわってみたい」と思って頂けたら光栄です。もちろん無料ですし、入れておいて損はない拡張機能だと思っております。Dreamweaverの機能と併せることでコーディングの効率が非常に良くなります。
またZen-coding興味がある方は@kzms2（http://twitter.com/kzms2）宛にメッセージなどを送ってもらえれば出来る範囲でお答えなどしたいと思います。Dreamweaver Town Meeting in Tokyoに参加してくださった皆様、ありがとうございました。
岡部和昌さんとこもりまさあきさんの執筆による『HTML＋CSSコーディングが10倍速くなるZen Coding』がインプレスジャパンから2010年12月に刊行されました。
2010年5月29日、ベルサール新宿で開催したDreamweaver Town Meeting in Tokyoのフォローアップとして、山田 恵理子さん（Webridge Kagawa）の『Microsoft OfficeからのデータコンバートTIPS』のスライド、補足、メッセージをシェアします。
Dreamweaver Town Meeting in Tokyoにご参加いただいたみなさん、お疲れ様でした。大人の事情で【ギャル男キャラ】でプロフィールが表に出ることになり、なんだコイツは！と思われたかもしれません。にもかかわらず、温かくご清聴いただいたことに感謝しております。今回作成した拡張機能、ぜひぜひ使ってみてください。気になる点や要望などがありましたら遠慮なくFBくださいませ！本当にありがとうございました！
Dreamweaver Town Meeting in Tokyoに参加いただいた皆さま、お疲れ様でした！
原稿をコーディングするのって、単純作業なのに案外面倒なこと。それをExcelで計算式を作ったり、Wordでのスタイル設定などで少しでも仕組み化することで、作業時間が短縮できて他のクリエイティブな業務の時間を確保できるのではないかな、と思います。
7分という時間の中でうまくお伝えできたかな、と不安でしたが皆さまのアンケートを拝見してホッとしております。本当にありがとうございました！
2010年5月29日、ベルサール新宿で開催したDreamweaver Town Meeting in Tokyoのフォローアップとして、渕上 伸吾さん（カヤック）の『Dreamweaverの拡張機能を作ってみる（入門編）』のスライドとメッセージをシェアします。
Dreamweaver Town Meeting in Tokyoにご参加いただいたみなさん、お疲れ様でした。 大人の事情で【ギャル男キャラ】でプロフィールが表に出ることになり、なんだコイツは！と思われたかもしれません。にもかかわらず、温かくご清聴いただいたことに感謝しております。
今回作成した拡張機能、ぜひぜひ使ってみてください。気になる点や要望などがありましたら遠慮なくFBくださいませ！本当にありがとうございました！
2010年6月5日、ベルサール九段で開催したCSS Nite LP, Disk 9.2（reprise）のフォローアップとして、とみた ちひろさん（Lady Beetle Design）の『HTML5ってなに？CSS3ってなに？』のスライドとメッセージをシェアします。
自作フォントに対してのご感想など、ありがとうございました！ソースなどは少し見えづらかったようで、今後の参考にさせていただきます。
CSS3になっていろいろできるようになりますが、このセッションの内容だけでもだいぶ効率はあがるのではないかと思います。
内容的にはライトなものですが、見て楽しんでもらえていたら何よりです。
フォント作成で使用したツールです。手書き文字をスキャナで読み込み後、1文字ずつコピペ作業。ビットマップをコピーしてOTEdit上にペーストすると、自動的にパス化されるので、その後微調整をしていきます。詳しくはまたブログにアウトプットしていきます。
フォントについては、福田さんのフォローアップとあわせて復習いただくとわかりやすいと思います！
Viva, CSS3!
2010年6月5日、ベルサール九段で開催したCSS Nite LP, Disk 9.2（reprise）のフォローアップとして、福田泰雄さん（AGN）の『CSS3 for tomorrow』のスライドとメッセージをシェアします。
『CSS3 for tomorrow（前編）』ご静聴いただき、ありがとうございました。緊張のため早口になってしまったこと、とても申し訳なく思っています。
さて、ご静聴いただいた方々ではWebフォント（@font-face）に興味を持たれた方が多かったようです。CSS3のなかでもWebフォントは、ライセンスやファイル容量などの問題を残しつつも、既に現実的に使用可能なレベルでサポートされている貴重な機能です。幾つか参考になるリンクを紹介しておきます。
ライセンスの問題をクリアできるWebフォントサービスも順調に増えており、なかでも僕が一番期待している「Font.com Web Fonts」はUnivers、DIN、Helveticaといった有名書体を山のように取り扱い、まだ少ないですが日本語書体もいくつか取り揃えています。実務でも気軽に使用できる環境が着々と整ってきていますね。
また、コピペ可能な通常のテキストであるため、SEO効果もあると期待されています。
CSS3はIEサポートが進んでいないものの、単純なデザイン実装をとても楽にしてくれる便利なものです。現状では実務そのものというより、実務のサポートとして有用な場面が多々あると考えています。今のうちから一度ぜひ遊んでみてください。
Enjoy!
2010年6月5日、ベルサール九段で開催したCSS Nite LP, Disk 9.2（reprise）のフォローアップとして、小山田 晃浩さん（ピクセルグリッド）、益子 貴寛さん（サイバーガーデン）の『ノリとツッコミで進める HTML5 ライブコーディング』のスライドとメッセージをシェアします。
CSS Nite LP9.2 へのご参加、ありがとうございました。
既存の HTML に比べて、HTML5 には、現時点でもたくさんの要素型やしくみが登場しています。
新しく勉強すべきことが多そうに思えますが、コーダーやマークアップエンジニアなどの肩書きを持つ人は、ひとまず文書構造の考え方、セクション関連要素の使い方から手をつけてみることをおすすめします。
HTML5 はまだ正式な仕様ではないため、実際の案件で使うのは不安だったり、クライアントに提案しづらいと思います。
セッションのなかでお伝えしたとおり、自分の Web サイトで実験してみるのがもっとも現実的な実践のチャンスですし、キャンペーンページなど可能なところに利用して、実践ノウハウを貯めておくのもよい方法です。
また、
LP9.2 では canvas や SVG などもご紹介しました。ほかにもさまざまな API や、これまでの HTML や CSS のスキルだけでは対応できない機能もあります。
フロントエンドの仕事は細分化されていく可能性があるので、自分の得意分野や、興味のあるテクノロジーを見つけて、「○○の専門家になる」という目標を持つとよさそうです。（スキルの全体的な底上げにもつながるので）
アンケートを拝見したところ、わたしたちのセッションにいくつか質問がありました。
ブログ記事としてまとめましたので、あわせてご参照いただければと思います。http://www.yomotsu.net/wp/?p=578
この機能はまだ発展段階のため、現在は無効になっています。Webkit での設定はすこしややこしいので割愛します。
この機能は Firefox 4 からデフォルトになります。現在の Firefox では無効になっています。
2010年6月5日、ベルサール九段で開催したCSS Nite LP, Disk 9.2（reprise）のフォローアップとして、徳田 和規さん（マインドフリー）の『Coding with jQuery』のスライドとメッセージをシェアします。
当日はご静聴いただきありがとうございました。スライドが少し見にくかったようで、失礼しました。特にソースコードの背景が暗くて見にくかったという声をいくつかいただきました。今後の参考にさせていただきます。ありがとうございます。（写真が見えづらかったのも残念でしたが･･･）
今回お話させていただいた内容として実装面のお話については少し難しかったかもしれません。自分でも作っていて、実装面で難しいところは多々あるのですがこんなUIあったらいいのにと考えるところが大切だと思っています。(大抵のものは既にどこかで公開されていたりしますので実装の参考にもなります)
最初は簡単なところから、少しずつでも始めてみてください！
jQueryで実装できるUIや、基礎の話などgihyo.jpの連載（@h2ham さんとの共著）で書いていますので興味のある方はぜひご覧になってください。
ありがとうございました！
Twitterやアンケートで少し疑問・質問をいただいていましたので補足しておきます。
$(this) → this
プラグインメソッド内では、$()は必要ありません。（スライドでは修正しています）
でしゃばらないJavaScriptとしての実装であれば、appendを使うことには問題ありません。ただし、使い過ぎると処理が遅くなったりはしますが、その点ではどのメソッドも同じです。
2010年6月5日、ベルサール九段で開催したCSS Nite LP, Disk 9.2（reprise）のフォローアップとして、小久保 浩大郎さん（nodot）の『コーディングコンテストから見えてきた今後の展望』のスライドとメッセージをシェアします。
長丁場イベントの最後のセッションということで、みなさんお疲れのなかご清聴いただきありがとうございました。当初、主催の鷹野さんに「LP9.2でコンテストの解説やってよ」と言われたときはどうしようかと思ったりしたのですが、いざ審査を終えてみると非常に興味深い結果が見え、これをシェアすることこそがコンテストの真の意義だろうと思うに至って当日お話させていただきました。私が感じたところをみなさんを分け合うことが出来たでしょうか。
最後の方で「これから変わってゆくマークアップエンジニアの方向性」みたいなお話をしましたが、実は一つ大切なことをいい忘れていました。スライドや説明では「今のマークアップエンジニアはみんな何か別のものに変わらなければいけない」というようなニュアンスで伝わってしまったかもしれませんが、今の形のマークアップエンジニアはもちろんそれはそれで価値ある仕事に決まってますし、そこのニーズがこれからなくなるわけでもないので、そのまま変わらないという選択肢も当然あると思います。私があそこで言いたかったのは、今広義にマークアップエンジニアとして活動されている方も、それぞれの持ち味を活かしてより専門性を持った職種に発展してくことも可能ではないか、また必要ではないか、ということでした。
人の得意分野もニーズも様々ですから、それぞれが最も力を発揮できる形を作っていけるのが仕事をお願いする側設ける側も幸せになれるんじゃないかな、と思います。
【エディタについて】
Twitterやアンケートを見ると、セッションの内容より使っていたエディタの方がみんな興味があるんじゃないか、という感じでしたが(笑)。あれはKomodo Edit というエディタです。
Active Perl などでおなじみの Active State 社が開発している Komodo IDEという統合開発環境のフリー版となっています。IDE譲りの構文解析に基づく補完機能や、対応言語の多さ、また Mozilla の XULで出来たソフトということで、Linux, Mac, Windowsと、どのプラットフォームでも動くのが特徴です。またプラグインによる機能強化も可能で、このへんがおすすめです。
それでは! Enjoy happy coding!
