Aggregator

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ライフ』のスライド、補足資料、ムービーをシェアします。

• スライド替わりの動画
• CSS Sprite Extensionのダウンロード、詳しい使い方。
• 使用サンプルの配布(IE6?、Safari、Firefox3?対応)
• YouTube - RSSTUDIO さんのチャンネル

メッセージ

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』のスライド、補足、メッセージをシェアします。

• ムービー（YouTube）
• スライド（PowerPoint）
• Exceのサンプルファイルl（Excelの計算式は、改行なしで1行でずらずら?っと書きます。）
• Wordのサンプルファイル（スタイルのデザインは、サイトのデザインが決まっていれば見出しの色などをそのサイトに合わせて作成するとよいですね。）

メッセージ

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ってなに？』のスライドとメッセージをシェアします。

• スライド　※Safari、Chromeで最良のパフォーマンスを発揮します。
• 音声（MP3、22:16、21.4MB）

メッセージ

自作フォントに対してのご感想など、ありがとうございました！ソースなどは少し見えづらかったようで、今後の参考にさせていただきます。

CSS3になっていろいろできるようになりますが、このセッションの内容だけでもだいぶ効率はあがるのではないかと思います。

内容的にはライトなものですが、見て楽しんでもらえていたら何よりです。

• ナナホシフォントβ版ダウンロード

フォント作成で使用したツールです。手書き文字をスキャナで読み込み後、1文字ずつコピペ作業。ビットマップをコピーしてOTEdit上にペーストすると、自動的にパス化されるので、その後微調整をしていきます。詳しくはまたブログにアウトプットしていきます。

• OTEdit for Windows
• OTEdit for Mac

フォントについては、福田さんのフォローアップとあわせて復習いただくとわかりやすいと思います！

Viva, CSS3!

2010年6月5日、ベルサール九段で開催したCSS Nite LP, Disk 9.2（reprise）のフォローアップとして、福田泰雄さん（AGN）の『CSS3 for tomorrow』のスライドとメッセージをシェアします。

• スライド（HTML）
• スライド（ZIP）
• 音声（MP3、38:06、36.6MB）

メッセージ

『CSS3 for tomorrow（前編）』ご静聴いただき、ありがとうございました。緊張のため早口になってしまったこと、とても申し訳なく思っています。

さて、ご静聴いただいた方々ではWebフォント（@font-face）に興味を持たれた方が多かったようです。CSS3のなかでもWebフォントは、ライセンスやファイル容量などの問題を残しつつも、既に現実的に使用可能なレベルでサポートされている貴重な機能です。幾つか参考になるリンクを紹介しておきます。

• ウェブで任意の書体を使う方法まとめ
• 安全な@font-faceの書き方(抄訳)
• 海外のウェブフォントサービスまとめ

ライセンスの問題をクリアできるWebフォントサービスも順調に増えており、なかでも僕が一番期待している「Font.com Web Fonts」はUnivers、DIN、Helveticaといった有名書体を山のように取り扱い、まだ少ないですが日本語書体もいくつか取り揃えています。実務でも気軽に使用できる環境が着々と整ってきていますね。

また、コピペ可能な通常のテキストであるため、SEO効果もあると期待されています。

CSS3はIEサポートが進んでいないものの、単純なデザイン実装をとても楽にしてくれる便利なものです。現状では実務そのものというより、実務のサポートとして有用な場面が多々あると考えています。今のうちから一度ぜひ遊んでみてください。

Enjoy!

2010年6月5日、ベルサール九段で開催したCSS Nite LP, Disk 9.2（reprise）のフォローアップとして、小山田 晃浩さん（ピクセルグリッド）、益子 貴寛さん（サイバーガーデン）の『ノリとツッコミで進める HTML5 ライブコーディング』のスライドとメッセージをシェアします。

• スライド（7MB 程あります）
• 音声（MP3、1:08:32、65.8MB）
• ライブコーディング着手前のサンプル（XHTML1）
• ライブコーディング着手後のサンプル（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

デモ

• audio のデモ
• audio + JS のデモ
• ピクセルの操作/解析（Firefox、Webkit、Opera のみ）
• 3D レンダリング（特殊な設定(*1)をした Firefox、Webkit のみ）
• SVG in HTML のデモ（特殊な設定(*2)をした Firefoxx のみ）
• SVG animation の デモ（Webkit のみ。iPhone、iPad も OK）
• MathML in HTML の デモ（特殊な設定(*2)をした Firefox のみ）

※ 特殊な設定(*1)

1. 手順1. Firefox のアドレスバーに「about:config」と入力
2. 手順2.「webgl.enabledforall_sites」の設定を「false」から「true」に変更

この機能はまだ発展段階のため、現在は無効になっています。Webkit での設定はすこしややこしいので割愛します。

※ 特殊な設定(*2)

1. 手順1. Firefox のアドレスバーに「about:config」と入力
2. 手順2.「html5.enable」の設定を「false」から「true」に変更

この機能は Firefox 4 からデフォルトになります。現在の Firefox では無効になっています。

2010年6月5日、ベルサール九段で開催したCSS Nite LP, Disk 9.2（reprise）のフォローアップとして、徳田 和規さん（マインドフリー）の『Coding with jQuery』のスライドとメッセージをシェアします。

• スライド
• 音声（MP3、53:17、51.2MB）

メッセージ

当日はご静聴いただきありがとうございました。スライドが少し見にくかったようで、失礼しました。特にソースコードの背景が暗くて見にくかったという声をいくつかいただきました。今後の参考にさせていただきます。ありがとうございます。（写真が見えづらかったのも残念でしたが･･･）

今回お話させていただいた内容として実装面のお話については少し難しかったかもしれません。自分でも作っていて、実装面で難しいところは多々あるのですがこんなUIあったらいいのにと考えるところが大切だと思っています。(大抵のものは既にどこかで公開されていたりしますので実装の参考にもなります)

最初は簡単なところから、少しずつでも始めてみてください！

jQueryで実装できるUIや、基礎の話などgihyo.jpの連載（@h2ham さんとの共著）で書いていますので興味のある方はぜひご覧になってください。

ありがとうございました！

今回紹介したプラグイン

• validation
• whatInOut
• jQselectable (UIその1)
• delval (UIその2、プラグイン)

補足

Twitterやアンケートで少し疑問・質問をいただいていましたので補足しておきます。

プラグインメソッド内のjQueryオブジェクトの受け取り

$(this) → this

プラグインメソッド内では、$()は必要ありません。（スライドでは修正しています） 　

appendを多用してもよいのか

でしゃばらないJavaScriptとしての実装であれば、appendを使うことには問題ありません。ただし、使い過ぎると処理が遅くなったりはしますが、その点ではどのメソッドも同じです。

2010年6月5日、ベルサール九段で開催したCSS Nite LP, Disk 9.2（reprise）のフォローアップとして、小久保 浩大郎さん（nodot）の『コーディングコンテストから見えてきた今後の展望』のスライドとメッセージをシェアします。

• スライド
• 音声（MP3、54:33、52.4MB）

メッセージ

長丁場イベントの最後のセッションということで、みなさんお疲れのなかご清聴いただきありがとうございました。当初、主催の鷹野さんに「LP9.2でコンテストの解説やってよ」と言われたときはどうしようかと思ったりしたのですが、いざ審査を終えてみると非常に興味深い結果が見え、これをシェアすることこそがコンテストの真の意義だろうと思うに至って当日お話させていただきました。私が感じたところをみなさんを分け合うことが出来たでしょうか。

最後の方で「これから変わってゆくマークアップエンジニアの方向性」みたいなお話をしましたが、実は一つ大切なことをいい忘れていました。スライドや説明では「今のマークアップエンジニアはみんな何か別のものに変わらなければいけない」というようなニュアンスで伝わってしまったかもしれませんが、今の形のマークアップエンジニアはもちろんそれはそれで価値ある仕事に決まってますし、そこのニーズがこれからなくなるわけでもないので、そのまま変わらないという選択肢も当然あると思います。私があそこで言いたかったのは、今広義にマークアップエンジニアとして活動されている方も、それぞれの持ち味を活かしてより専門性を持った職種に発展してくことも可能ではないか、また必要ではないか、ということでした。

人の得意分野もニーズも様々ですから、それぞれが最も力を発揮できる形を作っていけるのが仕事をお願いする側設ける側も幸せになれるんじゃないかな、と思います。

【エディタについて】

Twitterやアンケートを見ると、セッションの内容より使っていたエディタの方がみんな興味があるんじゃないか、という感じでしたが(笑)。あれはKomodo Edit というエディタです。

Active Perl などでおなじみの Active State 社が開発している Komodo IDEという統合開発環境のフリー版となっています。IDE譲りの構文解析に基づく補完機能や、対応言語の多さ、また Mozilla の XULで出来たソフトということで、Linux, Mac, Windowsと、どのプラットフォームでも動くのが特徴です。またプラグインによる機能強化も可能で、このへんがおすすめです。

• HTML Toolkit
• Zen Coding

それでは! Enjoy happy coding!

2010年5月29日、ベルサール新宿で開催したDreamweaver Town Meeting in Tokyoのフォローアップとして、茂木 葉子さん（Aqua Design Studio）の『コーディングツールバーのカスタマイズ』のスライドをシェアします。

• スライド（PDF、13MB）

2010年5月29日、ベルサール新宿で開催したDreamweaver Town Meeting in Tokyoのフォローアップとして、宮内 純人さん（マックグラフィックアーツ）の『デザインビューと上手にお付き合いする方法』のスライドとメッセージをシェアします。

• スライド（5.3MB）

Dreamweaver Town Meeting in Tokyoに参加された皆さん、長丁場、本当にお疲れさまでした！そして、自分の「デザインビュー」についての発表について、お付き合いいただき、ありがとうございました！！

イベントのコンセプトに比べ、少し基本的な内容かなと思っていたのですが、懇親会やアンケートを通じ、「デザインビューを見直した！」「今までソースビューしか使ってなかったけど、これを機に使ってみる！」といったコメントをいただき、大変感激しております。…といいますか、恐縮しております…。

高機能なテキストエディタは数あれど、デザインビューほどの機能を備えたツールは、他にはなかなか無いと思います。自分の発表が少しでも、このデザインビューを活用するキッカケになれば幸いです。

本当にありがとうございました！

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ドラえもんのサイトです。

• 画像を一切使わずにCSS3だけでドラえもんを描いてみた！ - 裏技shop