2008/01/15
【DreamweaverではじめるWeb標準】第116号［101］Spryフレームワークの実装（10）
□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ □□□ DreamweaverではじめるWeb標準 □□□ □□ 〜XHTMLとCSSで構築するWebサイト〜 □□□ □□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□ 第116号 発行日：2008年1月15日火 ほぼ週刊（目標） 発行：鷹野雅弘（株式会社スイッチ） --------------------------------------------------------------- このメルマガでは、Dreamweaverを使って、 Web標準に準拠したサイトを構築するワークフローや Tips、書籍、セミナー、有用サイトなどをご紹介しています。 Web制作の現場の方だけでなく、企業内のWeb担当の方も、 Web標準について興味があるという方に、 理解を深めていただく助けになれば幸いです。 ┼────────────────────────── 目次 ──────────────────────────┼ ├ ムービーで学ぶWeb標準［101］Spryフレームワークの実装（10） ├ クリッピング ├ イベント情報：Web Barbarians Conference 2008 ├ 書籍紹介：「Web標準テキストシリーズ」 ├ イベント情報：Dreamweaver10周年記念イベント（再掲） ├ セミナー情報：CSS Nite in Ginza, Vol.21（再掲） ├ イベントカレンダー ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ムービーで学ぶWeb標準［101］Spryフレームワークの実装（10） ──────────────────────────────────── 今回から、XML連携によるソート可能なテーブルについて紹介します。 操作手順のムービーはこちらです。 http://202.164.255.128/dwstd/dw101.html ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ● XMLファイルを準備する ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ サイトの中にXMLファイルを準備します。 今回は「data」フォルダ内に「cssniteList.xml」を用意しました。 （CSS Niteの過去の出演者、トピックなどをまとめたものです） このファイルの構造を確認しておきましょう。 XML宣言に続いて、dataroot要素があります。 dataroot要素内には、LIST要素があり、 さらに、Vol、開催日、トピック、スピーカーがあります。 1つのイベントごとに、LISTが対応しており、それぞれのLISTに、 「Vol」、「開催日」、「トピック」、「スピーカー」などの要素が用意されています。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ● XMLファイルを関連づける ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ 新規HTMLファイルを作成し、このファイルにXMLファイルを関連付けます。 ［挿入］バーの［Spry］タブの一番左側の［Spry XMLデータセット］をクリックします。 ［Spry XMLデータセット］ダイアログボックスが開いたら、 ［参照］ボタンをクリックして、「cssniteList.xml」を選択します。 ［スキーマを取得］ボタンをクリックすると、XMLファイルの構造を読み込み、 ［行エレメント］内に表示されます。 ［行エレメント］の「LIST」をクリックすると、 ［データセット列］に「Vol」、「開催日」、「トピック」、「スピーカー」が表示されます。 必要に応じて、データタイプを変更します。 ここまででXMLファイルを関連づけは終了です。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ● Spryテーブルの挿入 ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ ［挿入］バーの［Spry］タブの［Spryテーブル］をクリックします。 ［Spryテーブルの挿入］ダイアログボックスが開いたら、 ソートしたい列ごとに、［ヘッダがクリックされたときに列をソート］にチェックをつけます。 OKをクリックすると、［Spry領域を追加しますか？］のメッセージが表示されるので、 ［はい］をクリックします。 ファイルを保存して、ブラウザプレビューしてみましょう。 （テーブルのボーダーなどをつけておいた方がわかりやすいかもしれません） XMLファイルから読み込まれた情報がテーブルに表示されます。 1行目の項目名をクリックすると、ソート（並び替え）が実行されます。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ クリッピング ──────────────────────────────────── CBCNET - 土日 Flash のススメ(3)：ブログで紹介したくなるサイトとは？ http://www.cbc-net.com/article/2008/01/trick7_03.php → trick 7の寺井さんによるコラム。紹介されているサイトも要チェックです。 CMS比較マンガ〜外注A氏とCMS活用Bさんのちがい http://www.i-tasu.co.jp/cms-illust/ → こういうコンテンツの作り込みっていいですね。 thumbalizr - a website thumbnail creator http://www.thumbalizr.com/ → サイトのサムネールを作ってくれるサービス アドビの新しいインタフェイスデザインツール Thermo：デモムービー http://wiredvision.jp/blog/compiler/200801/20080111122704.html → MAX Jpanaでもお披露目があったThermoに関する紹介ムービー。 リキッド・レイアウトでチェックボックスを綺麗に並べる - WebOS Goodies http://webos-goodies.jp/archives/51275332.html → いろいろなアプローチで解説されています Dreamweaver Tools for Kuler 1.0.0 http://tinyurl.com/2ze37n → DreamweaverでKuler<http://kuler.adobe.com/>を使うための拡張機能（Free） Nitram+Nunca › リアル・グラデーションの作法 http://nitram-nunca.com/jp/2008/01/06/real-gradient-color/ → 「現実指向のグラデーションとは、実際のところ、光のコーディネーションの話なんだ」 R25.jp http://r25.jp/ → リニューアルされ、すべての記事がWebで読めるように。R25くんも動きます。 Lucky bag::blog: 長い子孫セレクタをインデントする http://www.lucky-bag.com/archives/2008/01/indent-descendant-selector.html → なるほど、たしかに読みやすい。 第9回 より見てもらえるようにユーザーを“そそる”、ワンランク上の画面構成のコツ http://web-tan.forum.impressrd.jp/e/2008/01/07/2186 → 「ファーストビューだけでは抱えきれない情報を、いかにユーザーに訴求するか」 東芝のチャンス - 池田信夫 blog http://blog.goo.ne.jp/ikedanobuo/e/15bc8f4cd446cecbc9623a16f8e33901 → 『電波利権』と併せて読むのがオススメ。 jQueryでブロック要素の高さを揃えてみる http://www.akatsukinishisu.net/itazuragaki/js/i20070801.html → 少し古い記事ではありますが... jQueryでもできるんですね。 VMware Fusion Macworld 開催記念キャンペーン http://www.act2.com/products/fusion/ → Parallelsと同様、Mac上でWindowsをブートするソリューション。 1月27日まで、通常12,800円のところ、8,800円で提供されるようです。 -------------------------------------- Open Tech Press | ブラウザ：IE7が多数派に、IE6と逆転 世界シェア http://opentechpress.jp/news/article.pl?sid=08/01/07/109209 → やっとこさ、IE7がIE6を上回ったそうです。 IE7.js登場 - IEのCSS/HTML非準拠はこれで対応 http://journal.mycom.co.jp/news/2008/01/08/039/index.html → IEの動作をW3C標準仕様へ準拠させるためのライブラリ。リンクで使えるというのがすごいです。 ie7-js - Google Code http://code.google.com/p/ie7-js/ → こちらが配布元。 -------------------------------------- ＜MT系＞ tagAssistプラグイン - MTのエントリーをちょっと便利にしちゃうの｜CSS HappyLife http://css-happylife.com/log/movabletype-plugin/000330.shtml → すっごく便利。というか逆になかったのが不思議。4.1には非対応。 カスタムフィールドを使用する | Movable Type 4 ドキュメント http://www.movabletype.jp/documentation/designer/customfields/index.html → MT4.1ではカスタムフィールドが標準機能になります。 MovableTypeプラグイン アーカイブ http://junnama.alfasado.net/online/movabletype_plugins/index.html → エントリーの「複製」、QuickEdit、Jaccessibilityあたりに興味を持ちました。 -------------------------------------- ＜オンラインサービス系＞ オンライン上で市販アプリ並みに動くWebサービスのまとめ | 秒刊SUNDAY | 個人ニュースは秒刊から http://www.yukawanet.com/sunday/2008/01/web.html → 知らないのがたくさんありました。 新しいオンラインサービスを発見するのに参考になるサイト - sta la sta http://d.hatena.ne.jp/starocker/20080110/p1 → こちらは紹介しているサイト MoMB | The Museum of Modern Betas http://momb.socio-kybernetics.net/ → 言うまでもなく、MoMAを意識したネーミング MOONGIFT: あいつを削除！「PhotoWipe」:オープンソースを毎日紹介 http://www.moongift.jp/2008/01/photowipe/ → 切り口が...ですが、使いどころありそうです。 -------------------------------------- ＜おもしろ系＞ 新しい髪形に挑戦しよう！ヘアースタイル・ジェネレーター - DesignWalker http://www.designwalker.com/2008/01/hairstyle.html → いろいろあるんですね.... 第23回 仕事はホウレンソウよりもチンゲンサイよりもカブトムシよりも｜空に木を加える http://ameblo.jp/kaku-shohyo/entry-10063160906.html → サイトのコンセプトもぶっ飛んでいますが「カブトムシ」「ワシントン」...知らなかった。 Appleブランディングをパロったハム屋のサイト http://exo.jp/keypersonq/2008/01/apple_1.html → Guided Tourまでありますよ〜 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ イベント情報：Web Barbarians Conference 2008 ──────────────────────────────────── 福岡で働くWebの人々、PHP in Fukuoka、福岡Webデザイナーズ Fukuoka Perl Mongers、Producers & Directors. Fukuokaなど 福岡では、たくさんコミュニティが発足しているようです。 それらのコミュニティのためのコミュニティ 「福岡で働くWebの人々（FWW）」が主催するイベントが開催されます。 ◇イベント名：Web Barbarians Conference 2008 ◇日時：1月26日(土) 13:00〜20:00 ◇場所：イムズホール（福岡） ◇参加費：2000円 ◇定員：200名 ◇主催：福岡で働くWebの人々（FWW） ◇詳細：http://wbc2008.fww.cc/ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 書籍紹介：「Web標準テキストシリーズ」 ──────────────────────────────────── Web標準テキストシリーズとして、 「HTML/XHTML」「CSS」「DOM Scripting」が刊行されました。 コンパクトで軽く携帯しやすいのもいいかもしれません。 3冊とも読んでみましたが、「CSS」の著者は、 LuckyBag<http://www.lucky-bag.com/>の福島さんということもあり、 図解が多く、実践的な内容で特にオススメです。 Web標準テキスト(2) CSS (Web標準テキストシリーズ) http://www.amazon.co.jp/exec/obidos/ASIN/4774133272/cssnite-22/ref=nosim ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ イベント情報：Dreamweaver10周年記念イベント（再掲） ──────────────────────────────────── Dreamweaverの10周年記念イベントが開催されます。 10日に夜中に申し込みがスタートしましたので、とり急ぎ、お知らせします。 （早々に埋まってしまうと思われますので、お急ぎください！） ◇イベント名：Adobe Dreamweaver CS3 10 周年記念イベント - 夢を紡ぐ者たちへ - ◇日時：2月20日水 13:00-18:00 ◇場所：THE GRAND HALL（品川） ◇参加費：無料（要事前登録） ◇定員：450名 ◇主催：アドビ システムズ ◇概要： ・基調講演：Dreamweaver 誕生秘話、歴史、現在 ・Dreamweaver 大喜利-：10 名の勇士による華麗なる 実践 Tips 紹介 ・使いこなすと 10 倍仕事が楽になる！Dreamweaver 関連機能 ＋ CS4 SneakPeak ◇詳細・申し込み：http://www.info-event.jp/adobe/dreamweaver/ 申し込みをスタートした11日の夕方に、220名を超えていたとのことですので、 ご興味ある方は、お急ぎいただいた方がよろしいかと思います。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ セミナー情報：CSS Nite in Ginza, Vol.21（再掲） ──────────────────────────────────── アップルストア銀座でのマンスリーCSS Nite（無料版）が、 2008年1-3月に限定復活します。 2008年は、携帯、iPhone/iPod touchなど マルチデバイス対応が求められるようになると思います。 そのてはじめとして1月のテーマは「携帯電話のコーディング事情」。 ◇日時：1月17日木 19時スタート ◇場所：アップルストア銀座 ◇参加費：無料（事前登録不要） ◇定員：84席（立ち見で180名まで） ◇ゲスト：宮永邦彦（アイデアマンズ）、原 一浩（fxb） ◇セッション内容： 「携帯サイトのコーディング事情〜基本編」 ／宮永邦彦（アイデアマンズ株式会社） 携帯によるインターネット人口は7,086万人と、 PC(8,055万人)に迫る数に達しています（平成18年「通信利用動向調査」／総務省）。 また、「mixi」におけるPVは、PCよりも携帯からの方が多いと言われています。 このように今や無視できない携帯サイト制作ですが、 キャリアや発売時期による仕様の複雑さから なかなか最初の一歩を踏み出せないのではないでしょうか。 このセッションでは、携帯サイトのコーディング事情を 短時間でキャッチアップできるように、 マークアップ言語やCSSの現状や、3キャリア対応の要点を解説します。 「携帯用サービスにおける実装とデザインの現実」 ／原 一浩、寺田 学、尾花衣美（空飛ぶ株式会社） 空飛ぶ株式会社の携帯電話向けコミュニティサービスの第1弾として 昨年（2007年）夏にリリースしたサイト「アクビィ」の開発事例を引き合いに出しながら、 PC向けサービスと携帯電話向けサービスの違いを実装面から解説します。 HTML部分の実装、キャリア別の違い、ログインの際に気をつける点、 ユーザーテスト、携帯電話独自の習慣などの話題を取り上げます。 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ イベント・カレンダー ──────────────────────────────────── ◇1月17日 CSS Nite in Ginza, Vol.21 テーマ：携帯電話のコーディング事情 <http://cssnite.jp/ginza/vol21/> ※今週木曜日19時からです。 ◇1月23日 Dreamweaverハンズオンセミナー（m-school） <http://m-school.biz/training/dreamweaver_cs3_template.htm> ◇2月20日 Dreamweaver10周年記念イベント <http://www.info-event.jp/adobe/dreamweaver/> ◇2月21日 CSS Nite in Ginza, Vol.22 <http://cssnite.jp/ginza/vol22/> ◇3月20日 CSS Nite in Ginza, Vol.23 <http://cssnite.jp/ginza/vol23/> ◇4月5日 CSS Nite LP, Disk 5 <http://mt4lp5.cssnite.jp/> ┼────────────────────────── あとがき ─────────────────────────── いよいよ今晩（夜中2時）、Macworld！。 ウルトラ・ポータブルのノートがついに、ついに出るかと期待がふくらみます。 「2008 There's something in the air.」という垂れ幕が用意されているようで、 MacBook Airと呼ばれるのではないか？と憶測が飛び交っています。 http://www.tcp-net.ad.jp/danbo/macworldsf2008/before/index.html もう、ひとつ。 iPhoneの日本語版の発表にも期待したいところです。 ─［発行］───────────────────────────────── 株式会社スイッチ http://swwwitch.com/ 鷹野雅弘 takano @ swwwitch.com 東京都足立区足立4-13-18 #307 ────────────────────────────────────── 現在、4,078名の方にご購読いただいています。ありがとうございます。 お知り合いの方、同僚、クライアント等にご紹介いただければ嬉しいです。 ご自由に転送ください。 こちら↓もよろしくお願いいたします。 ・『Dreamweaverプロフェッショナル・スタイル［CS3対応］』 <http://tinyurl.com/23pe3f> ・『できるクリエーターDreamweaver独習ナビ』 <http://tinyurl.com/ytfnbf> ・『Adobe Dreamweaver CS3 Essential Book』 <http://tinyurl.com/yorh7z> セミナー情報や書籍情報などお持ちの方いらっしゃいましたら、 ご連絡くだされば幸いです。掲載料はいただいていません。 情報商材など、Web系と無関係な広告はお断りしています。 登録・解除・バックナンバーはこちらからです。 http://blog.mag2.com/m/log/0000169311/ Copyright(c） 2008 Swwwitch, Inc. Some rights reserved. 記事が正確であることの保証はありません。 ご紹介するセミナーや書籍、サイトの品質を保証するものではありません。 書名、製品名および会社名は、それぞれ該当する権利者の登録商標または権利です。
