zenith: 2006年6月アーカイブ

トヨタ自動車の CF に使われているあの曲は何?

Sarah Brightman"A Question Of Honour" (視聴可) という曲。最近になってようやく教えてもらった。力強い進行に聴いていると元気が出てくる。

こういう曲調は大好きで、映画 THE ROCK"Rock House Jail" (視聴可、要 RealPlayer) や Avalon"Log in" (視聴可) などを通勤時に聴いていた。するとどうだろう、頂が薄い課長はミッチ・ビレジに見えてくるし、社員食堂の料理長の背後に立つと訳の分からない関節技で打ちのめされるんじゃないだろうか?と想像して楽しくなったり、終電を待っていたら乳母車が転げ落ちてきてヤクザが打ち合いを始めて収拾が付かなくなったのでエピソードを0から始めて都合的な伏線を張り直してしまいそれに怒ったかどうかは知らないがシルベスタ・スタローンはビバリー・ヒルズ・コップの主役を蹴ってまで生タマゴを飲んで苦難に打ち勝つ道を選んだ(誰だ、ラジー賞なんて言った奴は)。最後の聖戦を最期にハリソン・フォードは転がり来る岩から逃げる事はしなくなったが今度は無実の罪で負われる身となり結局は逃げてばかりだ。心機一転追跡する者をやってみたが残念ながらそれは成功したとは言えない結果に終わってしまったが、日本マーケティング戦略ではストーリーに若いカップルとそこにラブが無ければ絵に描いたピロシキであるという偉大なウォルト家の考えはあながち間違ってはいないのかも知れない。だがそのせいで1941年12月と2000年が複雑に入り混じった真珠湾が作られてしまい、円谷映画の特撮シーンの撮影現場を写した写真がなぜか当時の貴重な資料として参考にされ池の中でフンドシ一丁で船遊びする謎の日本人が出てきてしまった。悲劇の巨大客船は大西洋へともう一度沈められてしまったが、それに味をしめたのか今度は海の神の名前を持つ船がCGでリメイクされやっぱりまた沈められるそうだ(名前はなんて言ったっけ、そう少林ポセイドンだ)。沈んだり浮上したり深く静かに潜行せよと言った次の日にレッドオクトーバーを追えという上部の命令に飽き飽きしたかはやっぱり分からないが、オーソン・ウェルズは市民権なんかどうでもよくなりコードネーム・JAL という戦略に占領されてしまったハワイ諸島を手放した。そうして産まれたのが NEO 東京でありバビロン・プロジェクトであり、押井守は犬と鳥と九〇式とコマツの二式(「キューマルシキとコマツのニシキ と読んで欲しい)を出せれば満足するのだが東京湾の干潟に生きている物達にとってはただただ嵐が通りすぎるのを待つ可哀想なストーリーなのだ。もしも映画にするなら『嵐の夜に』なんてどうだろう。主役はトビハゼとアサリだ。そんな風にあれこれ考える力が湧いてくるから音楽って不思議。音楽は心のペースメーカーだ。

現在の状態

UL, OL 要素は入れ子にする事が出来ます。この時、項目数や入れ子が多くになるにつれて、項目同士の親子・兄弟関係が見辛くなるかもしれません。
fig1.png

親兄弟関係を表す線を入れる

そこで、項目同士の関係を表すを入れます。線の表現は CSS でやりたいと思います。その為にルートとなるリスト要素に treeView というクラス名を付け、各リストの最後の LI 要素にも last というクラス名を割り振ります。
fig2.png

<ul class="treeView">
  <li>2005年
    <ul>
      <li>9月</li>
      <li>10月</li>
      <li>11月</li>
      <li class="last">12月</li>
    </ul>
  </li>
  <li class="last">2006年
    <ul>
      <li>1月</li>
      <li>2月</li>
      <li>3月</li>
      <li>4月
        <ul>
          <li>1日</li>
          <li>3日</li>
          <li>4日</li>
          <li>20日</li>
          <li class="last">28日</li>
        </ul>
      </li>
      <li>5月</li>
      <li class="last">6月</li>
    </ul>
  </li>
</ul>

適用する CSS は以下の通りです。

.treeView
{
  background-color: white;
  
  font-family: "ヒラギノ角ゴ Pro W3", Osaka, Tahoma, Verdana, "MS UI Gothic", "MS Pゴシック", sans-serif;
  font-size: small;
  color: black;
}

.treeView,
.treeView ul,
.treeView ol
{
  margin: 0 0 0 20px;
  padding: 0;

  background-image: url("line_vertical.png");
  background-repeat: repeat-y;
}

.treeView li
{
  margin: 0;
  padding: 0;
  
  background-image: url("line_diverge.png");
  background-repeat: no-repeat;

  text-indent: 20px;
  line-height: 160%;

  list-style-type: none;
  list-style-position: outside;
}

.treeView li.last
{
  background-color: white;
  background-image: url("line_terminal.png");
}

項目最後の要素にクラス名を振るのが大変

更新が多い部分で用いる場合、クラス名を手作業で振り直すのはかなりの作業量です。許されるなら JavaScript でクラス名を割り振ります。

function setTreeViewStyle(list)
{
  list.className = "treeView";
  
  setTreeViewItemStyle(list);
}

function setTreeViewItemStyle(list)
{
  var items = list.childNodes;
  var marked = false;
  
  for (var i = items.length - 1; i >= 0; i--)
  {
    var element = items[i];
    
    if (element.tagName && element.tagName.toLowerCase() == "li")
    {
      if (!marked)
      {
        element.className = "last";
        marked = true;
      }

      var subItems = element.childNodes;
      
      for (var j = subItems.length - 1; j >= 0; j--)
      {
        var element = subItems[j];
        
        if (element.tagName)
        {
          switch (element.tagName.toLowerCase())
          {
            case "ul":
            case "ol":
              setTreeViewItemStyle(element);
              
              break;
          }
        }
      }
    }
  }
}

実際に利用する場合は以下のようにします。

<body onload="setTreeViewStyle(document.getElementById('tree'));">
  <ul id="tree">
    <li>2005年
    <ul>
      <li>9月</li>
      <li>10月</li>
      ...後略