Aggregator

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

2010年5月29日、ベルサール新宿で開催したDreamweaver Town Meeting in Tokyoのフォローアップとして、千貫 りこさん（KICKS Web）の『ソースコードをキレイにする』のメッセージとムービーをシェアします。

• ムービー（YouTube）

本イベントに参加されたみなさま、長時間お疲れさまでした。他のスピーカーが工夫を凝らした内容で勝負する中、かなりベーシックな「検索・置換」機能を紹介させていただきました。

Webオーサリングソフトならではの、強力な検索機能を積極的に使っていただければいいな、と思っています。

さて、アンケートで「fontタグを削除したら、そこに設定されていた装飾も消えてしまう」とのご指摘がありました。

今回はデモということでざっくり削除してしまいましたが、たしかに実務の現場であれをやってしまうと乱暴すぎますね。言葉足らずで申し訳ありません。

私が現場で対応するときには「なぜ文字色を変えるのか」をまず考えて、強調のためなら「em」や「strong」に置き換えます。

その上でCSS（style属性）で文字色を指定する...といった感じで作業を進めると思います。

最後に宣伝です！ロクナナワークショップにてXHTML+CSSの入門＆中級講座を開講中です。毎回ワイワイ楽しくマジメに盛り上がっておりますので、ぜひいらしてください。洋服姿でお待ちしております（笑）。http://67.org/ws/workshop/css.html

2010年5月29日、ベルサール新宿で開催したDreamweaver Town Meeting in Tokyoのフォローアップとして、たにぐち まことさん（エイチツーオー・スペース）の『5分で作る WordPressテーマ』の補足（ムービーあり）をシェアします。

• Dreamweaver Town Meeting in Tokyo ご来場ありがとうございました！ - h2ospace - builder by ZDNet Japan

2010年5月29日、ベルサール新宿で開催したDreamweaver Town Meeting in Tokyoのフォローアップとして、石嶋 未来さん（ウープスデザイン）の『DreamweaverでPhotoshop & Fireworksとさらに連携する!』のスライドと補足資料をシェアします。

• スライド

スマートオブジェクト機能とFireworksでのhtml,css書き出しを上手く利用すると完全分業の環境でもスムーズに作業をする事ができます。ぜひぜひ利用してみてください。

ブログに補足を追加しました。

2010年5月29日、ベルサール新宿で開催したDreamweaver Town Meeting in Tokyoのフォローアップとして、伊原 力也さん（ビジネス・アーキテクツ）の『実装、運用、プロトタイピングにも！Dreamweaverテンプレート徹底活用術』のメッセージをシェアします。

ご参加いただいた皆様、おつかれさまでした！ シンプルかつ奥が深いDWテンプレート、使いこなせば色々なところに活用できるチャンスがあると思います。見たままに編集できるというのは、Web制作に慣れていない人にもWeb制作に参加してもらえるということですし、慣れている人でもより直感的に作業が行えるということでもあります。このことをヒントに、ぜひあなたなりの活用法を見出して頂ければ幸いです。

• サッポロビールにおけるテンプレート活用事例｜デベロッパーセンター
• Dreamweaverのテンプレート機能関係の参考サイト
• テンプレート機能を使ってみよう パート1：「編集可能領域」と「オプション領域」の使い方｜デベロッパーセンター
• テンプレート機能を使ってみよう　パート2：コピペで利用できる、複雑なテンプレート式のサンプル｜デベロッパーセンター