Dreamweaver Town Meeting in Tokyo参加メモ。

火曜／金曜担当なのに、更新が遅れ気味な@cremaです（申し訳ありません......）。

今日は、2010年5月29日に開催されたDreamweaverの祭典「Dreamweaver Town Meeting in Tokyo」に参加した際の実況ツイートまとめを、ほぼ編集なしで投稿しておきます。

読みにくいと思いますが、恐れ入ります＞＜　でも参考になる部分もあるかと存じますので！

• #dwtokyo にきました。http://cssnite.jp/dtm/tokyo/ posted at 15:21:16
• #dwtokyo はじまりましたー！ posted at 15:43:51
• #dwtokyo 最初のセッションはbAの伊原力也さんによる「実装、運用、プロトタイピングにも！Dreamweaverテンプレート徹底活用術」です。 posted at 15:48:28
• #dtmtokyo #dwtokyo サッポロビールの実例 posted at 15:50:49
• #dtmtokyo #dwtokyo リピート領域を使った定型的な内容の繰り返しの話。リピート領域の上下を入れ替えられる話。その時重視する内容に応じて、コンテンツの順序を入れ替える話。 posted at 15:55:38
• #dtmtokyo #dwtokyo リピート領域の中で条件によるオプションが使えないので、リピート領域の中にリピート領域を入れ子にすることにより、表示非表示を切り替える。 posted at 15:56:59
• #dtmtokyo #dwtokyo サッポロさんのサイトは、DWテンプレートの集大成。「テンプレートのプロパティ」の値をひとつ設定することにより、ページのいろいろな箇所に反映させる作りにしている。運用するお客様の使い易さを考えたテンプレートになっている。 posted at 16:01:15
• #dtmtokyo #dwtokyo template BeginIfClause cond="_document['05xxxxxx]" xxxxの中書き取れなかった。すべての選択項目をこの部分に入れておいて、運用で迷わせないようにしている。 posted at 16:04:16
• @JazzyM_yuka 楽しみにしていまーす！後ほど！ posted at 16:05:31
• #dtmtokyo #dwtokyo 私10周年イベント大遅刻していって聞けなかったのを、いま思い出した！二年前！ posted at 16:07:15
• #dtmtokyo #dwtokyo DW三種の神器。編集可能領域。リピート領域→入れ子・順番を返す。テンプレートオプション→値の反映・条件分岐。値をidやclassインクルードするものの名前など、色々枠にとらわれず、活用できる。 posted at 16:12:25
• #dwtokyo DWTを使う勘どころ。サイト構造にあわせたツール選定。入力テンプレートとしては最強。サイトのテンプレートを全部DW化？DWが苦手な部分は、サイトの構造を管理する仕組みが無い。自動生成がニガテ。ナビ・パンくず・関連情報・サイトマップ等。 posted at 16:17:31
• #dwtokyo そうするとCMSと比べてどうなの？入力編集はDWで。構造の管理はWPとかMTですればいいのでは？（面白くなってきた......） posted at 16:18:40
• #dwtokyo DWTがベース、CMSでパーツを作る。CMSで作ったパーツをDWのテンプレートでSSIを使って読み込む。 posted at 16:23:30
• #dwtokyo 逆に、CMSがベース、DWTでパーツの場合。CMSでサイト構造を作り、DWでパーツを作る。DWのライブビューでは入れ子のSSIは表示されないので注意。 posted at 16:25:51
• #dwtokyo DWTとコントリビュートでリンク構造がある状態の仕様（プロトタイプ）を全部作ってしまう。オンラインでクライアントチェック。NOTEITというCGI付箋でコメントを入れて貰う。（これ、やってみたい！） posted at 16:34:26
• #dwtokyo あーーー、伊原さんのセッション面白かった！！頭柔軟なの素敵でございます！！！誰かこういうの好きな人を探して、一緒にこういう仕事をしたいな！ posted at 16:36:22
• #dwtokyo 鷹野さんと神森さんの漫談開始。 posted at 16:37:03
• #dwtokyo DW CS5では、サイト定義が変わった。ひとつのサイトに対して、複数のリモートサーバを定義できる。複数の確認環境やステージング環境を設定しておいて、配信先を自由に変えられる。 posted at 16:41:07
• #dwtokyo DWでFTPをする人が少なかったのが、この変更で多くなるかも？ posted at 16:41:59
• #dwtokyo 悲しいお知らせが！DW CS5では、バリデート機能が使えなくなった！UIは残っているのに！！（なぜだー！！！） posted at 16:43:37
• #dwtokyo それを解決するアイディア。FirefoxにWeb Developerをインストール。DW CS5のブラウザプレビューでFirefoxを設定しておく。チェックしたいページをFxでプレビュー。そのページを、Web Developerでチェック。 posted at 16:45:52
• #dwtokyo バリデート用にCS4を残しておくというのも手。 posted at 16:46:13
• #dwtokyo ライブビューの話。新ライブビューで助かったこと。納品後、全ファイルを顧客が持っていて、自分たちがファイルを持っていない状況で急な修正が必要になった。インスペクトモード（FireBug的なもの）で、公開されたサイトをチェックし、CSSのおかしいところを発見。 posted at 16:50:39
• #dwtokyo Adobe BrowserLab http://bit.ly/aE17eu のお話。CS5では、ローカルファイルをBrowserLabでチェックできるようになった。 posted at 16:53:47
• #dwtokyo DWのSubversionのお話。どんなに便利なツールがあっても、緊張感をもって仕事をするのを忘れないように！ posted at 16:58:06
• #dwtokyo Dreamweaverの新機能をいじる勉強会リターンズがあるそうです。6月以降どこかの日の19:00スタートで開催予定。場所未定。（行きたい！） posted at 16:59:36
• #dwtokyo H2Oスペースたにぐちさんのお話。iPhone site extension for DW CS4/5。View Portの設定。CSSで-webkit-text-size-adjust:none;にしないと横位置にしたときに文字サイズが大きくなってしまう。 posted at 17:03:21
• #dwtokyo iPhones Human Interface Guidelines for Web Applicationsがあるので、色々なサイトのiPhone版のデザインが似通ったものになっている。 posted at 17:04:37
• #dwtokyo Safari Web Content Guideの話。 posted at 17:05:56
• #dwtokyo iPhone site extension for DW CS4/5を導入すると、iPhone用のテンプレートやView Port、iPhoneアイコンなどを簡単に追加することができる。 posted at 17:09:30
• #dwtokyo bit.ly/iphonedw で無料配布中！素晴らしいですね！ posted at 17:11:14
• #dwtokyo 使ってみての感想は #iphone_dw までお寄せください、とのこと。たにぐちさんは、何もかも完璧ですねーー＞＜ posted at 17:12:35
• #dwtokyo わーわーわー！アキラさん登場です＞＜ Dreamweaver HTML5 Packのお話。 posted at 17:13:54
• #dwtokyo コードヒント対応。HTML5の新要素をコードヒントで使うことができるようになった。CSSのプロパティも-mozや-webkitなどが一覧できる。 posted at 17:16:09
• #dwtokyo ドラえもんキタ！http://bit.ly/9fl0Bt をデザインビューで見たとき、HTML5 packを入れておくと、ほぼSafari並になる！ posted at 17:18:06
• #dwtokyo プレビューでiPhoneやPCサイトを一気に閲覧できるところ、ちょっと見逃した＞＜ posted at 17:22:18
• #dwtokyo 速攻でHTML5 pack入れよっと。 posted at 17:23:48
• 休憩時間なので、横目で #wcYokohama2 見る。もうほんとに、なんで同じ日なのだ＞＜ posted at 17:26:07
• @hjfuji ですよねぇ＞＜ ほんと悩みどころです。 posted at 17:30:30
• でも面白いのは、こっちの人は向こうを気にしてるひとが多いけど、向こうの人はこっちのことなんて全然気にしてないってことだなwww posted at 17:31:18
• #dwtokyo 大喜利のお時間がやってきました！お一人目は、茂木葉子さん。DWの左側にあるコーディングツールバーのカスタマイズ。toolbars.xmlで非表示にしたいツールバーをコメントアウトする。 posted at 17:45:20
• #dwtokyo お二人目は、森和恵さん。Movable Typeとの連携。（おぉ！） posted at 17:51:23
• #dwtokyo 7分間って、お話する方は大変だと思うけど、聞く方には丁度いいなぁ。 posted at 17:52:44
• #dwtokyo ライブビューで見ると、MTタグをデザイン内で見ることができる。DWでMTテンプレートを作成するときのコツ。<mt:BlogURL />を使わないで、サイトルートからのパスで記述すること。 posted at 17:57:09
• #dwtokyo DWで編集したテンプレートファイルを「ファイルへのリンク」に記述してMT内に読み込み。複数のMTテンプレート内で共通の部分は、DWのライブラリで共通化する。MTテンプレートをライブラリ化する際にはデリミタを入れた<mt:xxxxx>の形式で書かないとエラーに。 posted at 17:59:58
• #dwtokyo お次は、千貫りこさんの「ソースコードをキレイにする」。（ここまで三人、講師をなさっている女性が連続。皆さんお話が上手です！） posted at 18:02:10
• #dwtokyo クライアントから支給された古いソースコードなどで非推奨要素が含まれている場合、コマンドメニュー→HTML→クリーンアップ→特定のタグで、消したいタグを指定。複数のタグを指定する場合は、半角アケを入れる。 posted at 18:04:30
• #dwtokyo <th><p></p></th>という条件の時だけ、<p>を除去する。検索置換で、条件を指定。「タグ内部」の部分で<th>を指定する。 posted at 18:06:09
• #dwtokyo img要素にaltをつける。検索＞特定のタグでimgを指定、「属性なし」の条件を足し、アクションでaltの追加を指定。（これは、いまやってる案件で、速攻で使えるなっと。） posted at 18:08:39
• #dwtokyo ページ全体のタグを削除するときは、コマンド＞HTMLのクリーンアップ。特定の条件に当てはまるときは、検索置換。正規表現も活かして。 posted at 18:10:18
• #dwtokyo 4人目は、H2Oスペースのたにぐちまことさん。WPのテーマをDWで編集する話。include("../../../wp-config.php")（?。後で要確認）を入れることによって、ライブビューで見ることができる。 posted at 18:13:42
• #dwtokyo たにぐちさんのお話をじっくり聞いてしまったので、メモとれなかったっす＞＜ 後で公開されたら、じっくりWPいじろう！ posted at 18:20:08
• #dwtokyo 次は、まめこ！画像の書き出し連携のお話。 posted at 18:21:08
• #dwtokyo DWでpsdを挿入。そのpsdは、「サイト」内のフォルダに置いておく必要がある。挿入するときに、画像の書き出しの設定をする。オリジナルのpsdを編集すると、スマートオブジェクト機能により、編集後の画像が自動で書き出される。Fwの場合は、コピー＆ペーストで対応。 posted at 18:26:35
• #dwtokyo Fwでスライスをきり、HTMLを書き出すお話。テキストが画像でなく、テキストとして書き出される。 posted at 18:27:59
• #dwtokyo 次は、Yahoo!のトップページをコーディングしている岡部和昌さんによる、Dreamweaver x Zen-coding。これ聞きたかった！ posted at 18:29:55
• #dwtokyo html:4t,html4s,html5などと入力してCtrl+コロンで、変換。div.box*3で、.boxのdivが3つできる。div#nav$$$*5でidに連番がふられる。 posted at 18:34:18
• #dwtokyo あれ、DWのZen-Codingって、拡張機能でしたっけ？（よく分かってない） posted at 18:36:38
• 大喜利前半戦終了！スピーカー6人の方々の記念撮影。 #dwtokyo http://yfrog.com/582wjj posted at 18:42:02
• 
• #dwtokyo 休憩時間。そろそろ脳みそパンパンになってくる。後半も集中するぜ！ posted at 18:43:23
• @yunod 具合良くなりますように！暖かくしていてね！ posted at 18:44:02
• 7分間って、テンポが良くていいですよね！ RT @deniyung: みなさん小気味いい RT @crema: #dwtokyo 7分間って、お話する方は大変だと思うけど、聞く方には丁度いいなぁ。 posted at 18:45:02
• @niida_haruhiko あら、にいださんはWebの人なのですか！今日はすごく勉強になっていますー。 posted at 18:45:39
• #dwtokyo 大喜利後半戦開始。國分亨さんによる「スペシャルコードヒント」。CodeHints.xmlをバックアップして、編集。使用頻度の低いプロパティを削除する。widows:などで検索し、二ヶ所ヒットした下のほうをコメントアウト。 posted at 18:55:35
• #dwtokyo オンラインで配布されているCodeHints.xml（カワチさん、アキラさん、BUNさん達が配布している）を使ってみるのもいいですよ、とのこと。 posted at 18:59:23
• #dwtokyo FW派全盛みたいですが、私はPhotoshop派ですー＞＜ posted at 19:00:38
• #dwtokyo アキラさんのマシントラブルにつき、ネコゼさんにスイッチしました。「デザインビューと上手にお付き合いする方法」。 posted at 19:02:06
• #dwtokyo デザインビュー最大の問題は、clearfixの表示がニガテなこと。CS5でも治っていません。clearfix以外の方法でfloatを解除するという手段でもいいが、デザインビューのためにCSSを変えるのは本末転倒かも。 posted at 19:05:34
• #dwtokyo そこで、デザインタイムスタイルシートを使う。というのもあり。そこまでしてデザインビューを使うのは、高速コーディングのため。デザインビューからキーボードショートカットを使って、見出しに変換したりできる。 posted at 19:08:02
• #dwtokyo izuizuさんがいい事言った。「Zen-codingは、箱から作る。デザインビューは原稿ありき。物により使い分けるとよい。」 posted at 19:10:33
• #dwtokyo アキラさんのマシン復活。「HTML5機能拡張」のお話。HTML5タグやCSS3などの、3つのイブラリ拡張機能。 本家のHTML5 Packにはないセレクタのコードヒントも出せます。 posted at 19:13:12
• おぉ、それ知りたいですー！ RT @kzms2: ちなみに原稿ありきの書き方もあります！デザインビューとは性質が違いますがっ #dwtokyo posted at 19:14:13
• @haruka マジらしいですよ＞＜ 悲しすぎですね。。。 posted at 19:14:54
• #dwtokyo アキラさん、頑張ってー！！！！ posted at 19:15:23
• #dwtokyo アキラさんは、ずーっとずーっとこれを頑張って作って公開してくださっているのが、本当に素晴らしい。頭が下がります！！！ ありがたく使わせていただきます。 posted at 19:18:52
• ありがとうございます！やってみます！RT @kzms2: Ctrl+hを上手く使うといけます！是非機会があれば＞＜ RT @crema: おぉ、それ知りたいですー！ RT @kzms2: ちなみに原稿ありきの書き方もあります！デザインビューとは性質が違いますがっ #dwtokyo posted at 19:19:54
• #dwtokyo 次は、湯口りささんによる、「Fireworks用CSS Sprite拡張機能」のお話。CSS Spriteをするときに欠かせない、要素ひとつひとつのwidthとheightを書き出してくれるっぽい？ posted at 19:23:41
• #dwtokyo 以前イラレでプレゼンしたら「初めて見ましたw」って言われたけど、湯口さんのFWプレゼンも初めて見ましたお！w posted at 19:25:45
• #dwtokyo お次は、渕上伸吾さんによる「Dreamweaverの拡張機能をつくる」。このプレゼンのために、初めて拡張機能を作られたそうです。閉じタグの直前で実行すると、自動でそのタグのコメント<!-- /#mainContent -->とかを入れてくれるのでございます。 posted at 19:31:39
• #dwtokyo 拡張機能は、HTMLファイル＋mxiファイルで出来ている。HTMLファイルの中に、JavaScriptで処理の詳細が記述されている。Extension Managerでmxpファイルを作成する。 posted at 19:35:53
• #dwtokyo 拡張機能のリロードは、挿入パネルのところでできる（Ctrl＋クリックとか？聞き逃しました！）。この閉じタグコメント自動挿入拡張機能は、絶対流行ると思います！！ posted at 19:38:03
• #dwtokyo カヤックさんでは、マークアップエンジニアさんを絶賛募集中だそうです。（現在MEは4人だとのこと！） posted at 19:39:11
• #dwtokyo 最後は、香川県からいらした山田恵理子さんの「MS OfficeからのデータコンバートTIPS」です。（うどん画像が美味しそう。。） posted at 19:40:46
• #dwtokyo Excelで作った価格表を、テーブルとしてDWに貼付け。（設定が必要なのですが、見逃しました＞＜） posted at 19:43:04
• #dwtokyo 環境設定＞コピーペースト＞構造つきxxxを選べばいいのね。 posted at 19:44:35
• #dwtokyo ExcelとWordで入力したデータを効率良くDWに持っていくと、クライアントさんとの連携が本当に楽になりますよね。雛形をこちらで作っておいて、クライアントさんにお渡しすればいいのですね！やってみよう。 posted at 19:46:26
• #dwtokyo 山田さんの声がすごーーく可愛くて、萌えました＞＜ posted at 19:47:05
• どもです！＆お疲れ様でした！！ RT @necoze: ここですね！http://bit.ly/bpyNeV RT @crema: #dwtokyo 環境設定＞コピーペースト＞構造つきxxxを選べばいいのね。 posted at 19:48:01
• #dwtokyo 先ほど終了して、新宿駅で一息ついてます。濃密な時間でしたね！皆様ありがとうございました！！ posted at 20:28:22
• @seltzer お疲れ様でしたー！！今日のたにぐちさん、輝いていましたね！ posted at 20:54:05