14 years 11ヶ月 ago
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!
14 years 11ヶ月 ago
2010年6月5日、ベルサール九段で開催したCSS Nite LP, Disk 9.2（reprise）のフォローアップとして、小山田 晃浩さん（ピクセルグリッド）、益子 貴寛さん（サイバーガーデン）の『ノリとツッコミで進める HTML5 ライブコーディング』のスライドとメッセージをシェアします。
メッセージ
CSS Nite LP9.2 へのご参加、ありがとうございました。
既存の HTML に比べて、HTML5 には、現時点でもたくさんの要素型やしくみが登場しています。
新しく勉強すべきことが多そうに思えますが、コーダーやマークアップエンジニアなどの肩書きを持つ人は、ひとまず文書構造の考え方、セクション関連要素の使い方から手をつけてみることをおすすめします。
HTML5 はまだ正式な仕様ではないため、実際の案件で使うのは不安だったり、クライアントに提案しづらいと思います。
セッションのなかでお伝えしたとおり、自分の Web サイトで実験してみるのがもっとも現実的な実践のチャンスですし、キャンペーンページなど可能なところに利用して、実践ノウハウを貯めておくのもよい方法です。
また、
、
といった、HTML5 を射程に含めたコーディングを行うのもひとつの方法です。実際に大手案件でも、HTML5 への移行まではできなくても、HTML5 を視野に入れた対応に歩を進めているケースがあります。
LP9.2 では canvas や SVG などもご紹介しました。ほかにもさまざまな API や、これまでの HTML や CSS のスキルだけでは対応できない機能もあります。
フロントエンドの仕事は細分化されていく可能性があるので、自分の得意分野や、興味のあるテクノロジーを見つけて、「○○の専門家になる」という目標を持つとよさそうです。（スキルの全体的な底上げにもつながるので）
アンケートを拝見したところ、わたしたちのセッションにいくつか質問がありました。
ブログ記事としてまとめましたので、あわせてご参照いただければと思います。http://www.yomotsu.net/wp/?p=578
デモ
※ 特殊な設定(*1)
- 手順1. Firefox のアドレスバーに「about:config」と入力
- 手順2.「webgl.enabledforall_sites」の設定を「false」から「true」に変更
この機能はまだ発展段階のため、現在は無効になっています。Webkit での設定はすこしややこしいので割愛します。
※ 特殊な設定(*2)
- 手順1. Firefox のアドレスバーに「about:config」と入力
- 手順2.「html5.enable」の設定を「false」から「true」に変更
この機能は Firefox 4 からデフォルトになります。現在の Firefox では無効になっています。
14 years 11ヶ月 ago
2010年6月5日、ベルサール九段で開催したCSS Nite LP, Disk 9.2（reprise）のフォローアップとして、徳田 和規さん（マインドフリー）の『Coding with jQuery』のスライドとメッセージをシェアします。
メッセージ
当日はご静聴いただきありがとうございました。スライドが少し見にくかったようで、失礼しました。特にソースコードの背景が暗くて見にくかったという声をいくつかいただきました。今後の参考にさせていただきます。ありがとうございます。（写真が見えづらかったのも残念でしたが･･･）
今回お話させていただいた内容として実装面のお話については少し難しかったかもしれません。自分でも作っていて、実装面で難しいところは多々あるのですがこんなUIあったらいいのにと考えるところが大切だと思っています。(大抵のものは既にどこかで公開されていたりしますので実装の参考にもなります)
最初は簡単なところから、少しずつでも始めてみてください！
jQueryで実装できるUIや、基礎の話などgihyo.jpの連載（@h2ham さんとの共著）で書いていますので興味のある方はぜひご覧になってください。
ありがとうございました！
今回紹介したプラグイン
補足
Twitterやアンケートで少し疑問・質問をいただいていましたので補足しておきます。
プラグインメソッド内のjQueryオブジェクトの受け取り
$(this) → this
プラグインメソッド内では、$()は必要ありません。（スライドでは修正しています）
appendを多用してもよいのか
でしゃばらないJavaScriptとしての実装であれば、appendを使うことには問題ありません。ただし、使い過ぎると処理が遅くなったりはしますが、その点ではどのメソッドも同じです。
14 years 11ヶ月 ago
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!
14 years 11ヶ月 ago
14 years 11ヶ月 ago
2010年5月29日、ベルサール新宿で開催したDreamweaver Town Meeting in Tokyoのフォローアップとして、宮内 純人さん（マックグラフィックアーツ）の『デザインビューと上手にお付き合いする方法』のスライドとメッセージをシェアします。
Dreamweaver Town Meeting in Tokyoに参加された皆さん、長丁場、本当にお疲れさまでした！そして、自分の「デザインビュー」についての発表について、お付き合いいただき、ありがとうございました！！
イベントのコンセプトに比べ、少し基本的な内容かなと思っていたのですが、懇親会やアンケートを通じ、「デザインビューを見直した！」「今までソースビューしか使ってなかったけど、これを機に使ってみる！」といったコメントをいただき、大変感激しております。…といいますか、恐縮しております…。
高機能なテキストエディタは数あれど、デザインビューほどの機能を備えたツールは、他にはなかなか無いと思います。自分の発表が少しでも、このデザインビューを活用するキッカケになれば幸いです。
本当にありがとうございました！
14 years 11ヶ月 ago
2010年5月29日、ベルサール新宿で開催したDreamweaver Town Meeting in Tokyoのフォローアップとして、丸山 章さんの『Dreamweaver de HTML5』のスライドとメッセージをシェアします。
Dreamweaver Town Meeting in Tokyoに参加された皆さん、長丁場本当にお疲れ様でした（特にビギナーズからの引き続きの方）。それなりに使ってきた立場から見ても、かなり圧巻なイベントで、皆さんもお腹いっぱいだったと思います。
自分のセッションはトラブルもあって、大喜利のプレゼンにお見苦しい点が多々あり、誠に申し訳ありませんでした。アドリブに強くなるよう頑張ります。
アンケートを拝見していると、HTML5はまだ現場で使っていない方が多く、ピンと来なかった方も多かったようです。個人的な考えでは、HTML5はスマートホン対応ページを制作する現場以外では、確かにしばらくは導入はされないと思われますが、CSS3の方はXHTMLやHTML4との利用も出来ますし、デザイン的な要素でもあるため、割と早い段階で現場に浸透して行くんじゃないかと思っています。
HTML5 Packはプレゼンでも説明しましたように、ライブビューの精度があがりました。イベントの直前に業務でのマークアップに使用しましたが、ライブビューで確認することによって、確実にブラウザでのチェック回数が減りました。ですのでCS5導入予定の方は是非、使用されることをおすすめします。本当はデザインビューで同じくらいの表示が出来れば言うことないんですけどね(笑)。
またセッションではお話ししませんでしたが、HTML5のフォーム関連のレンダリングはまだブラウザレベルでもまだまだなので、同様に対応できていないようです。ただ、HTML5PackはまだAdobe Labsにあってまだプレビュー版のレベルです。正式リリースまではwebkitのアップデートなど、まだいろいろな点で改良がなされることと思います。今後を楽しみにしていただきたいと思います。
自分の機能拡張の方も今後アップデートしていく予定です。特にコードヒントの部分はHTML5 Packに負けない機能にしていきたいと思っています。CS5にも入れることが出来ますので是非、使ってみてください。HTML5 Packを入れてwebkitを導入した後に、自分の機能拡張を入れたらよいかと思います。
余談になりますが、伊原さん他で、Dreamweaverテンプレートのお話がいくつかありました。Dreamweaverテンプレートタグのコードヒントやスニペットが導入される機能拡張も作成しています。
http://dwlog.net/2010/04/dwtemplate-codehint.html
テンプレートの機能にはコードで書かないと使えない強力な機能（テンプレート式やリピート変数など）が多くあります。サンプルコードも入れていますので、理解する上での参考にもなるかと思います。是非使ってみてください。
HTML5 Packの説明で使ったCSS3ドラえもんのサイトです。
14 years 11ヶ月 ago
2010年5月29日、ベルサール新宿で開催したDreamweaver Town Meeting in Tokyoのフォローアップとして、千貫 りこさん（KICKS Web）の『ソースコードをキレイにする』のメッセージとムービーをシェアします。
本イベントに参加されたみなさま、長時間お疲れさまでした。他のスピーカーが工夫を凝らした内容で勝負する中、かなりベーシックな「検索・置換」機能を紹介させていただきました。
Webオーサリングソフトならではの、強力な検索機能を積極的に使っていただければいいな、と思っています。
さて、アンケートで「fontタグを削除したら、そこに設定されていた装飾も消えてしまう」とのご指摘がありました。
今回はデモということでざっくり削除してしまいましたが、たしかに実務の現場であれをやってしまうと乱暴すぎますね。言葉足らずで申し訳ありません。
私が現場で対応するときには「なぜ文字色を変えるのか」をまず考えて、強調のためなら「em」や「strong」に置き換えます。
その上でCSS（style属性）で文字色を指定する...といった感じで作業を進めると思います。
最後に宣伝です！ロクナナワークショップにてXHTML+CSSの入門＆中級講座を開講中です。毎回ワイワイ楽しくマジメに盛り上がっておりますので、ぜひいらしてください。洋服姿でお待ちしております（笑）。http://67.org/ws/workshop/css.html
14 years 11ヶ月 ago
14 years 11ヶ月 ago
2010年5月29日、ベルサール新宿で開催したDreamweaver Town Meeting in Tokyoのフォローアップとして、石嶋 未来さん（ウープスデザイン）の『DreamweaverでPhotoshop & Fireworksとさらに連携する!』のスライドと補足資料をシェアします。
スマートオブジェクト機能とFireworksでのhtml,css書き出しを上手く利用すると完全分業の環境でもスムーズに作業をする事ができます。ぜひぜひ利用してみてください。
ブログに補足を追加しました。
14 years 11ヶ月 ago
2010年5月29日、ベルサール新宿で開催したDreamweaver Town Meeting in Tokyoのフォローアップとして、伊原 力也さん（ビジネス・アーキテクツ）の『実装、運用、プロトタイピングにも！Dreamweaverテンプレート徹底活用術』のメッセージをシェアします。
ご参加いただいた皆様、おつかれさまでした！
シンプルかつ奥が深いDWテンプレート、使いこなせば色々なところに活用できるチャンスがあると思います。見たままに編集できるというのは、Web制作に慣れていない人にもWeb制作に参加してもらえるということですし、慣れている人でもより直感的に作業が行えるということでもあります。このことをヒントに、ぜひあなたなりの活用法を見出して頂ければ幸いです。
14 years 11ヶ月 ago
12月4日、郡山地域テクノポリスものづくりインキュベーションセンター会議室にてCSS Nite in FUKUSHIMA, Vol.4を開催し、40名弱の方にご参加いただきました。
今回はプレゼンテーションをテーマに、グループワークや発表などの演習を多く盛り込みました。
ツイートは下記にまとめました。
14 years 11ヶ月 ago
14 years 11ヶ月 ago
14 years 11ヶ月 ago
2010年12月16日、アップルストア銀座で開催したCSS Nite in Ginza, Vol.55（Shift 4）フォローアップとして、『多次元化するWebと今後のWebデザイン』（長谷川 恭久）のスライドと音声をシェアします。
メッセージ
「多次元化するWebと今後のWebデザイン」という内容で小難しい内容を話した長谷川です。年末のお忙しい中、ご参加ありがとうございました。
技術・デザインをテーマにプレゼンをすることが多いのですが、今回は概念的な話が中心で好き嫌いが分かれた内容だったと思います。たった10分間で話すにはあまりにも大きなトピックでしたが、未来を考えるのであれば、Webによって多次元化した社会環境や人の心理・行動の変化は無視出来ない話題だと考え、紹介しました。
いずれ、サイトという大きな枠をもつことがそれほど重要ではなくなり、情報（データ）のデザインや配信モデルの構築・演出がより注目されることになるでしょう。HTML5やセマンティックデータが話題になったり、ソーシャルメディアの活性化により人々が様々な場所で自由にネットワークを作っているという状況も、その先にはサイトという枠組みの重要性が低下するという仮説の裏付けになります。
スマートフォン向けのサイトも企業によっては、大幅に機能やコンテンツを絞って公開している動きをみても、情報はよりコンパクトでポータブル化しているのが分かります。
技術と社会は相互関係です。今 Web 業界でHTML5やスマートフォンが注目されているのは、社会背景や人の変化が影響しています。そこには単に「話題だから」「たくさん人が使っているから」とは別の理由が存在します。理由を掘り下げることで、さらに技術を利活用できますし、社会や人へ良い変化をもたらすと考えています。
技術と人がこれからさらに良い関係でいられますように。
それでは、よいお年を。来年もよろしくお願いします。
14 years 11ヶ月 ago
14 years 11ヶ月 ago
2010年12月16日、アップルストア銀座で開催したCSS Nite in Ginza, Vol.55（Shift 4）フォローアップとして、『HTML5とCSS3、便利サービス総まくり』（益子貴寛／サイバーガーデン）のスライドと音声をシェアします。
メッセージ
サイバーガーデンの益子貴寛です。
もうホントに、HTML5とCSS3の便利サービスがたくさんあって、しかもほとんどが無料でつかえて、まさに「Web的！」と思う次第です。
Webサイトのつくり方は、レゴブロックのように、目的に合わせていろんなブロックを組み合わせてつくる時代になっています。
なんというんでしょう、プロトタイプくらいはちゃっちゃとつくるというか、アイデアをすぐにカタチにする反射神経がとても大切ですね。
そのためにも、ご紹介したサービスやツールが、みなさんのお役に立てば幸いです。
それでは、よい年末年始を！
14 years 11ヶ月 ago
2010年12月16日、アップルストア銀座で開催したCSS Nite in Ginza, Vol.55（Shift 4）フォローアップとして、『アクセシビリティといえば、JIS 改正だけ？』（植木 真／インフォアクシア）のスライドと音声をシェアします。
メッセージ
インフォアクシアの植木です、Shift 4にご参加いただき、ありがとうございました。
アクセシビリティの今年一番のトピックは、何といってもJIS X 8341-3の改正でした。
ですが、セッションのタイトルどおりで、それ以外にも注目しておきたいトピックが国内外で幾つもあった一年でもありました。その中から主なものをスライドで紹介させていただきましたが、10分はやはりあっという間でしたね...。
来年は、JIS X 8341-3:2010への対応をはじめ、アクセシビリティの分野でもいろいろな "Shift" がありそうでワクワクしています。
またどこかでお会いしましょう！
p.s.
"WCAG" が「ウィーケァグ」である件。
14 years 11ヶ月 ago
14 years 11ヶ月 ago
2010年12月16日、アップルストア銀座で開催したCSS Nite in Ginza, Vol.55（Shift 4）フォローアップとして、『2010年、デザイントレンドゆく年来る年』（原 一浩／エフエックスビイ）のスライドと音声をシェアします。
メッセージ
「2010年、デザイントレンドゆく年来る年」を担当したエフエックスビイ原です。Shift4ご参加ありがとうございました。
一見ゆるやかに変わっているように見える企業サイトも1年前と今とでは随分様相が変わっています。時代時代に応じて提案されるデザインのどこを採用し、どこを変更するか。それは企業に求められている課題に応じて変わっていきます。ですから、2009年のデザインを振り返ってみると、2009年がどんな年だったかよくわかります。
2009年は不況の年だったと思います。当時はそうは思いませんでしたが、今当時のサイトを一斉に見ると、当時あれほどよいと思えたグレーの背景が、暗く感じられます。
Shiftも今年で4年。もしShift10まで進み、Shift1の頃を振り返ったとき、感覚的にとてつもなく遠いところに自分たちが進んでいると感じるでしょう。そんなことを感じた今年のShift4でした。今回は時間もあまりなく、一部を駆け足で紹介したのみでしたが、今年見たサイトを年末年始にでも再度振り返ってみてください。新しい発見があると思いますよ。ではよいお年を！
「CSS」だけでなく、Web制作全般に関するトピックを取り上げるセミナーイベント。都内のほか、大阪、名古屋、青森、福岡、沖縄、秋田、札幌、福井、仙台、福島、広島、新潟、京都でも開催。
Movable Type Pro 4.23-ja
CSS Nite公式サイト フィード を購読
