Formula 85

まずは「挿入」バーに新しいタブを追加して、そこに新規機能のボタンを追加していきたいと思います。

Dreamweaver拡張ガイド第7章の「挿入バーオブジェクト」について読むと、「insertbar.xml」というファイルを編集することでボタンを追加できるらしいことが分かります。しかし、「どの」insertbar.xmlファイルを編集するのか、という重要な点を間違えない様にしないとおれの様に時間を無駄にします。詳しくはp.11の「マルチユーザー環境でのDreamweaverのカスタマイズ」に書いてあります。

Windows 2000 および Windows XP プラットフォームでは次の場所を使用します。
hard disk:¥Documents and Settings¥username¥Application Data¥Adobe¥Dreamweaver 9¥Configuration
注意: Windows XP では、このフォルダは非表示のフォルダ内にある場合があります。
Mac OS X プラットフォームでは次の場所を使用します。
hard disk:Users/username/Library/Application Support/Adobe/Dreamweaver 9/Configuration

Dreamweaver拡張ガイド p.11

しかしなぜかおれの環境では「Configuration」フォルダの中に「Objects」フォルダが無い！

仕方がないので勝手に作りました。 「insertbar.xml」はアプリケーションフォルダにあったものを編集しました。

次につまづいたのは、ボタンの表示。この拡張ガイドの手順通りに進めていくと、フォルダ内の「.htm」ファイルを勝手に読み込んでボタンを作ってくれちゃいます。「insertbar.xml」にタグがあると、そのタグで指定されているフォルダの中から.htmファイルを見つけてきて勝手にボタンを作成してくれる模様。これは親切な様に見えますが、ポップアップメニューを作りたい時には非常に迷惑。悩むこと数時間。「.htm」ファイルの1行目に

1

<!-- MENU-LOCATION=NONE -->

と書き込むことでボタンが勝手に作成されなくなりました。

以上で無事にとりあえずDreamweaverにボタンを追加することは可能になりました。

次はこれらをExtensionパッケージとしてまとめる方法を研究したいと思います。これらのファイルをまとめて、簡単に配布できないと意味が無いですからね。

重大なことを確認するのを忘れていました。

まず、Adobe Dreamweaverでの携帯サイト作成に興味を持ったのは、Adobe Device Centralが同梱されるようになったからなのですが、こいつの機能を確認することを忘れていました。

まずは現在のバージョンです。1.1.0(1107)と書いてあります。

こいつで携帯電話の画面で見た様子をプレビュー表示できるというのですが、このプレビュー機能が使い物にならないと話になりません。そこで、次の一行をphpファイルに書き加えてプレビュー表示してみます。

1

echo(@$_SERVER['HTTP_USER_AGENT']);

このプレビュー機能が使っているユーザーエージェントを調べようというわけです。ユーザーエージェントがちゃんとその機種のものになっていなかったらプレビューになりませんからね。

DoCoMo SH903iTVとしてプレビューしたのがこれ。

DoCoMo F903iとしてプレビューしたのがこれ。

ユーザーエージェントが・・・

Mozilla/4.0 (compatible; MSIE 6.0; Mac_PowerPC; ja) Opera 9.20

それってそのままOperaじゃないですか！！どうしよう

さて、それではまずAdobe Dreamweaver CS3拡張ガイドを読んでいこうと思います。

目次は下記のようになっています。

• 第1章: はじめに
• 第2章: Dreamweaver のカスタマイズ
• 第3章: コードビューのカスタマイズ
• 第4章: Dreamweaver の拡張
• 第5章: 拡張機能のユーザーインターフェイス
• 第6章: Dreamweaver ドキュメントオブジェクトモデル
• 第7章: 挿入バーオブジェクト
• 第8章: ブラウザ互換性チェックの問題用 API
• 第9章: コマンド
• 第10章: メニューおよびメニューコマンド
• 第11章: ツールバー
• 第12章: レポート
• 第13章: タグライブラリとタグエディタ
• 第14章: プロパティインスペクタ
• 第15章: フローティングパネル
• 第16章: ビヘイビア
• 第17章: サーバービヘイビア
• 第18章: データソース
• 第19章: サーバーフォーマット
• 第20章: コンポーネント
• 第21章: サーバーモデル
• 第22章: データトランスレータ
• 第23章: C レベル拡張機能
• 第24章: "Shared" フォルダ

いつものように気になるところをざっと読んでから、やりたいことに一番近そうなところを読みたいのですが、カタカナ多すぎ 何が何だかわかりません。思ったよりも時間がかかるかも・・・！

さて、ついにAdobe Dreamweaver CS3 Mac版を手に入れましたので早速インストール、アップデータをかけました。

しかしバージョンは恐らく変わらず、9.0のままです。すみません、アップデート前に確認しなかったので、元のバージョンはわかりません。 ビルド番号は3495になっております。

ちなみにこちらはWindows版ですが、全く同じビルド番号です。

次はExtendScript Toolkit 2をインストールします。これはおれが知らなかっただけだと思いますが、通常はExtendScript Toolkit 2も同時にインストールされているらしいです。おれは気がつかなかったのでわざわざダウンロードしてきて入れてしまいました。

バージョンは2.0.2.77です。

恐らくおれが気づかなかったのは、インストールされる場所が「アプリケーション」フォルダではなく、「ユーティリティ」フォルダ内の「Adobe ユーティリティ」フォルダだったからです。気をつけましょう。

そしてWindows版と同様にDreamweaverで使用するサーバーを設定して準備完了です。

Adobe Dreamweaver CS3のドキュメントもたくさんあるので、これらを参考にして進めていこうと思います。

今日はAdobe Dreamweaver Developer ToolboxのImage Manupilationについて少し試してみましたが、どうやら実はこの機能はユーザーがサイトへ画像をアップロードする時に使う機能みたいです。

ですから、Formで画像ファイルを指定してアップロードする時に画像をリサイズする機能ということですね。携帯ではまだあまり使えそうにありません。もっとも、ドコモの906iシリーズからはFormタグによるファイルのアップロード機能がサポートされているので（auもあったっけ？）、そのうちおれのスキルが上がってくれば使えるかもしれませんが、まずは普通に端末ごとに適正な画像を表示する機能を用意したいところです。

そういえば確認するのを忘れていた（存在自体を全く忘れていた）デザインモードですが、下図のようになっていました。

その状態のコードモードは下図です。

確かにこれだけややこしいコードの状態になってくると、デザインモードで手軽に状態をプレビューできるのは便利かもしれません。しかし携帯でのプレビューにはDevice Centralが使えるところもDreamweaver CS3の売りなので、慣れるまではデザインモードは使いづらいかもしれません。しかしExtentionでデザインモードを制御できるということは新たな発見です。コメントタブみたいなものも表示できるみたいだし。ここら辺も作り込むとなると、結構Extensionの制作も大変かもしれませんね。

ということでAdobe Dreamweaver Developer Toolboxはここら辺で少しお休みして、明日からはExtentionに取りかかりたいと思います。もしも更新がなかったら、疲れきって倒れたか娘をあやしているかHeroes Season 2を観ているか行き詰まって書くことがないかのどれかです。生暖かく見守っていてください。

さてAdobe Dreamweaver Developer Toolboxの続きです。

なんといってもまず最初はChapter 11: Conditional Operationsからいきましょう。携帯用サイトにとってユーザーエージェントによって動きを制御することは必要最低事項です。あわよくばそのほかのことにも使える機能かもしれず、非常に重要な機能だと思われます。

マニュアルによると条件に合致した場合にのみ表示したい部分を選択して、サーバービヘイビア→Developer Toolbox→Conditional Regions→Show If Conditional Regionと選択するようです。

とりあえず適当な文字列を書いてShow If Conditional Regionを選択すると次のようなダイアログボックスが現れます。

マニュアルには、Expression 1に<?php echo $row_rsUsers['level_usr']; ?> 、Expression 2に1と書いてあるので、恐らく何らかの変数を用いて評価できるのだろうと推測。そこでAdvancedタブに移って下記のように書いてみると、何とかうまくいったような気がします。

• Expression

ereg(".*Safari.*", @$_SERVER['HTTP_USER_AGENT'])

この操作によってDreamweaver内に次のコードが挿入されました。

1
2
3
4
5
6
7
8

<?php
// Show IF Conditional agent1
if (ereg(".*Safari.*", @$_SERVER['HTTP_USER_AGENT'])) {
?>
<h1>適当な文字列</h1>
<?php }
// endif Conditional agent1
?>

簡単な理屈ですね。しかし、これができるボタンをダイアログボックス付きでDreamweaver内に設置できるということは、「ここら辺はドコモ端末だけに表示」とかっていう制御するコードを用意するボタンを簡単に設置できるようになるということと同義ではないでしょうか。携帯のユーザーエージェントを判別する正規表現を書くのって結構面倒ではありませんか？キャリア別だけならまだしも、「Flash 2.0サポート端末のみ」とか「入会後2ヶ月以上たったユーザーのみ」とか面倒でしょ？

そして「サーバービヘイビア」タブ内には先ほど設定した「Show If Conditional Region」が残っているので、これをダブルクリックすると、設定を変更することが簡単にできます。当たり前のようだけど、これも良いよね。

これでAdobe Dreamweaver Developer Toolboxが使えないとわかったとしてもDreamweaver APIよりExtensionとして何かしらのツールを作れそうだということがわかってきました。Adobe Dreamweaver Developer ToolboxだってExtensionですからね。

明日は画像の取り扱いについて研究したいと思います。月曜日は無理かな〜

なぜAdobe Dreamweaver Developer Toolboxを必死扱いて勉強しているのかというと、要は簡単に日本の携帯電話用サイトを作成、管理できる環境を作れないものかと模索しているわけです。

1. どうやら多くのPC用サイトはAdobe Dreamweaverを使って作成されているらしい。
2. じゃぁAdobe Dreamweaverを使って携帯用サイトも作れたら楽なんじゃね？

というだけの簡単なことです。もちろん、この段階ではおれも果たしてAdobe Dreamweaver Developer Toolboxが正しいツールなのか見当もついておりません。いつもの通り全くの徒労に終わる可能性もあります。

さて、ここでAdobe Dreamweaver Developer Toolboxのマニュアルを見直すと下記のような構成になっております。

• Chapter 1: Overview
• Chapter 2: Configuring Developer Toolbox
• Chapter 3: Dynamic Forms
• Chapter 4: Validate Form Input
• Chapter 5: Form Controls
• Chapter 6: File Manipulation
• Chapter 7: Image Manipulation
• Chapter 8: Retrieve Dynamic Data
• Chapter 9: Display Dynamic Data
• Chapter 10: User Authentification
• Chapter 11: Conditional Operations
• Chapter 12: Send Mail
• Chapter 13: Reuse Content with server-side includes
• Chapter 14: CSS Skins
• Chapter 15: Export Recordset As XML
• Chapter 16: Custom transactions and triggers
• Chapter 17: Understanding the Transaction Engine

どうでしょうか？Chapter 11: Conditional OperationsとChapter 7: Image Manipulationなんかが特に気になりますよね。携帯用のサイトでとにかく面倒なのは、その雑多なる機種判別のところであって、そこが妙にうまく整理されていれば意外と制作は簡単な気がするのです。そしてこのAdobe Dreamweaver Developer ToolboxはPHP環境を要求しているので、多くの携帯でまだ利用できないクッキーなどに依存しているわけではなく、サーバーサイドで何かやってくれそうな期待を持たせます。GDやImageMagickが動作環境にあったので、Chapter 7: Image Manipulationはサーバーで何かしてくれそうじゃないですか。

また、Chapter 15: Export Recordset As XMLってのもあるので、一度設定した項目を使い回せることを期待しております。つまり、おれが一度設定したものは他の人も使い回せるのではないかと。これは重要なポイントです。一度作ったものを何度も効率よく使えるようにする仕組みがなければそもそもコンピュータを使う意味がありません。

つまり、まだ目次を読んだだけでAdobe Dreamweaverなるものの勉強を進めているわけです。まぁ、期待通りにうまくいかなくてもちょっとはDreamweaverに詳しくなることでしょう。