In My Circle

せんがんが、よしなしごとをつづります。

CSS Nite in SENDAI, Vol.5

「CSS Nite in SENDAI, Vol.5」に参加されたみなさま、長時間お疲れさまでした。 今回の私のセッションでは、さまざまなデータ形式で支給された原稿を、Dreamweaverでいかに効率的に間違いなく利用するか……にスポットをあて てお送りしました。
スライドおよびセッション中のデモでわかりづらかった(と思われる)部分のフォローアップです。

正規表現について

今回は、自分自身の業務の中で出番が多い(というか、これしか使わない 笑)「.+?」をご紹介しました。「.+」は、改行以外の一文字以上にマッチする正規表現です。最後に「?」をつけることでマッチする範囲が限定されるので、使いやすくなります。
なお、正規表現を使うときには「正規表現を使用」チェックボックス(下図赤枠内)にチェックを忘れずに!

上記のような検索条件を定義すると、内容はもちろん属性のあり・なしにかかわらずstrong要素を検索できます。たとえば、上記検索条件では以下の文字列がすべてマッチします。

  • <strong>class属性あり</strong>
  • <strong>class属性なし</class><strong>
  • <span>内側に別の要素あり</span></strong>

特定の箇所にあるli要素だけをマッチさせたい場合には、あらかじめ任意の(マッチさせたい)ソースの範囲を選択しておきます。その上で、 「検索および置換」ダイアログの「検索対象」のプルダウンメニューを「選択したテキスト」にすれば、それ以外の場所のli要素は無視されます。

検索条件(クエリー)の保存

「検索および置換」ダイアログの右側に、フロッピーアイコン(下図赤枠内)が表示されています。このアイコンをクリックすると、現在設定し ている検索条件を保存することができます。ファイル名をつけて任意の場所に保存しておくことができるので、よく使う検索条件をどこかのフォルダで管理して おくと便利ですね。保存したクエリーの呼び出しは、フロッピーアイコンの右側にあるフォルダアイコン(?)をクリックして行います。

Excelを支給されたら…

デモで使用したサンプルデータをダウンロードできます。

  • template.html:加工前テンプレート、Excel上で完成したソースの貼りつけ先
  • SAMPLE.XLS:表データ
  1. テンプレートをつくる

    最初に、1データ分のみの「完成形のHTML」(template.html)をつくります。できあがったら、Excelであつかいやす いように加工しましょう。各要素の内容や属性値など、実際にはどんな文字列が入るか分からない部分を削除し、続けてインデントと改行を削除します。最後に コード内のダブルクォーテーション(”)ひとつを、「検索・置換」機能を使ってふたつ(””)にします。

    <加工前(例)>
    <dl>
    <dt>12</dt>
    <dd><img src="images/UMCK-1347.jpg" alt="12"></dd>
    <dd>UMCK-1347</dd>
    <dd>3,000円</dd>
    </dl>
    <加工後(例)>
    <dl><dt></dt><dd class=""cover""><img src=""images/.jpg"" alt=""""></dd><ddris""></dd><dd class=""price""></dd></dl>
  2. 計算式をつくる

    加工済みのコードをExcelの任意のセルに貼りつけたら、Excel計算式としてあつかえるようにするため、全体を「=”」と「”」で囲みます。

  3. セルの値を代入する

    HTMLコード上の、セルの値を代入したい位置にカーソルを置いて「”&&”」と記述します。ふたつの「&」の 間にカーソルを置き、代入したい値が入っているセルをクリックします。すると、「B2」(B列の2行目)のように、セルの位置を示す文字列が自動的に記述 されます。

    他の部分にも、それぞれ適切なセルの値が代入されるようにしていきます。今回のサンプルでは、最終的にこのような計算式ができあがりました。

    ="<dl><dt>"&B2&"</dt><dd class=""cover""><img src=""images/"&A2&".jpg"" alt="""&B2&"""></dd><dd class=""ris"">"&A2&"</dd><dd class=""price"">"&TEXT(C2,"#,###")&"</dd></dl>"

    最終行に記述されている「TEXT(C2,”#,###”)」は「TEXT関数」です。TEXT関数を使うと、文字列に書式を設定できます。ここでは数字を三桁区切りで表示するために使用しています。

  4. 計算式をコピーする

    計算式が記述されているセルの右下にカーソルを合わせると、カーソルの形状が「+」になります。この状態でドラッグすると計算式が自動的にコピーされます。このやり方で複製すると、計算式の中のセル番号が行(列)に合わせて変更されるので大変便利です。
    (9/24追記)計算式が記述されているセルの右下をダブルクリックした場合も、同じように複製できます。

    計算式が記述されたセルを選択してコピー、Dreamweaverのコードビュー上でペーストすれば、完成です。

カテゴリ:In My Circle, 話した Posted by 千貫りこ on 2010年9月18日