今回は、Word/Excel/PowerPointなど、Microsoft Office書類について取り上げます。 クライアントから原稿が支給される標準的な形式でもあるMicrosoft Office書類とDreamweaverとの連携についてご紹介します。

■ Excelデータ/表の読み込み

Excelデータを読み込めるのはDreamweaverのWindows版のみです。MacintoshではExcelデータの読み込みはサポートされていません。また、Office 2007ではファイルフォーマットが変更され、Excelは「.xlsx」のようになりました。Dreamweaver 8ではWindows版でも「.xlsx」はサポートされません。 Excel以外の汎用的な表データとして、CSV(カンマ区切りテキスト)やTSV(タブ区切りテキスト)がありますが、こちらはWindows/Macintoshともにサポートされています。CSV/TSVはExcelから書き出せるほか、主要なデータベースでは書き出し可能なので、MacユーザーであればTSV(タブ区切りテキスト)を利用するとよいでしょう。 「13,200」のように桁区切りのカンマを付けた状態でデータを 扱っている場合には、「13」と「200」のようにデータが分断されてしまう可能 性があるので、TSVを使うのが無難でしょう。

Excelデータの読み込みは[ファイル] → [読み込み] → [Excelドキュメント]、CSVやTSVは[ファイル] → [読み込み] → [表データ]コマンドで行います。

図版:Excelデータの読み込み

読み込み対象がExcel形式(xls)の場合にはダイアログボックスが表示されずに読み込まれますが、CSVなどの表データの場合にはダイアログボックスが表示されるので、データファイルの参照場所や区切り方法を指定したり、テーブルの幅や余白、ボーダー等について指定してから読み込みを実行します。

図版:表データ読み込み

読み込み対象がExcel形式(xls)の場合にはダイアログボックスが表示されずに読み込まれますが、CSVなどの表データの場合にはダイアログボックスが表示されるので、データファイルの参照場所や区切り方法を指定したり、テーブルの幅や余白、ボーダー等について指定してから読み込みを実行します。

図版:表データ読み込み

CSVやTSVなどの表データには、テーブルやセルの幅/高さなどが含まれていないことから、コードがクリーンな状態で挿入されます。

図版:表データ読み込み

Excelがインストールされている環境なら、Excelを起動してセルをコピーし、Dreamweaverにペーストする方法もオススメです。この場合、必要な領域のみを選択して利用できるので便利です。

図版:Excelを起動してセルをコピー

環境設定で表組みをコピー&ペーストする際の書式の保持方法を「構造と完全な書式(ボールド、イタリック、スタイル付き)」に設定しておけば、Excelでの見た目を保持したままページに貼り付けられます。

図版:表組みをコピー&ペーストする際の書式の保持

ただしこの方法ではDreamweaver側が要素に対してインライン形式のCSSを追加したり、クラス属性を自動的に作成してしまうために、後からソースを再編集しなければならない場合もあります。そのことを考えるとかえって手間が増えてしまうので、あまりオススメしません。

図版:プロパティインスペクタ

というわけで、環境設定ではデフォルトの「構造(段落、リスト、テーブルなど)付きテキスト」のままにしておくとよいですが、それでもテーブルは「手当て」(読み込み後の整形)をする必要があります。それはWindows環境でExcelファイルを読み込んだ場合も同様です。

■読み込んだデータテーブルの整形

●セル高さの削除

読み込んだテーブルセルの高さが設定されたままですと、後ほどフォントサイズを大きく指定した場合に「セルの高さが16ピクセルなのに、文字が18ピクセル」といった矛盾が生じることでレイアウトくずれにつながる可能性があります。

図版:セル高さの削除

テーブル全体を選択して、[行の高さをクリア]ボタンをクリックしてセルの高さをクリアします。

図版:行の高さをクリア

●align属性の削除

セルの要素に対して<td align="right">のように行揃え指定が記述されてしまいます。CSSレイアウトを行っている場合には、検索置換を利用してこの記述を一括削除しましょう。そのうえで後からCSSで再適用するとよいでしょう。

図版:行揃え指定

●列幅

列幅を指定するための<col width="39" /><col width="284" />のようなコードが挿入されてしまいます。こちらも合わせて削除しておきましょう。

■データテーブル活用のテクニック

●テーブルの一発ソート

[コマンド] → [テーブルのソート]を利用すれば、Dreamweaver上で行単位のソート(並び替え)が可能です。ソート条件を2つまで設定できるので、たとえば商品データを、支店名、商品番号の2つの条件で並び替えるといった作業を一瞬で完了できます。

図版:テーブルのソート

レガシーなマークアップでスタイルを整形するなら「テーブルのフォーマット」を使って、1行おきにセルカラーを設定するなどの操作を行うこともできます。

●テーブルの書き出し

集計や関数計算などはDreamweaverで行えません。もしExcelの元データがない場合には、Dreamweaverから[ファイル] → [書き出し] → [テーブル]を利用してテーブルのみをCSVとして書き出す手があります。その上でExcelなどで開き直して活用すると良いでしょう。 ただし、使用している文字コードによっては、そのままExcelで開くと文字化けを起こしてしまうことがあります。そんな時は文字コードを自動変換できるテキストエディタで開いて再保存しましょう。

●テーブル操作のTips

その他、Dreamweaverでデータテーブルを扱うにあたり、覚えておきたい基本操作を紹介します。

・行の挿入
Ctrl+Mキー(command+Mキー)で選択中のセルの上に行が挿入できます。

・行の削除
Ctrl/command+shift+Mキーで選択中のセルの行が削除できます。 行全体を選択してDeleteキーで削除するよりもスピーディです。

・セルのマージ(合体)
合体したいセルを選択してCtrl+Alt+Mキー(command+option+Mキー)でセルをマージできます。日本語入力がオフの状態なら「Mキー」だけでOKです。

■WordドキュメントのスタイルをDreamweaverで自動マークアップ

文字原稿の支給フォーマットとして、一番使われることが多いWordドキュメントですが、原稿入力の段階でひと工夫しておけば、その後のワークフローをぐっと効率化できます。 まずWordで原稿を作成する際のポイントから。箇条書きは、Wordのツールバーの[箇条書き]ボタンを使います。見出しは[スタイル]から「見出し1」「見出し2」などを使って設定しましょう。

図版:Wordで原稿を作成する際のポイント

Wordで該当箇所をコピーし、Dreamweaverでペーストすると「見出し」がh1要素などでマークアップされた状態になる。箇条書きが番号付きリストになってしまうことがありますが、その場合にはプロパティインスペクタで修正しましょう。

図版:Wordで該当箇所をコピーし、Dreamweaverでペースト

■Wordドキュメントの読み込み

Wordドキュメントは、Windows/Macintoshを問わず、[ファイル] → [読み込み] → [Word ドキュメント]コマンドを利用して読み込むことができます。 ファイルを選択後、[フォーマット]を「構造のみ」、「書式付き」などとドキュメント単位で設定することができます。この設定は先にご紹介した環境設定と同様です。

図版:Wordドキュメントの読み込み

Excel同様、「構造(段落、リスト、テーブルなど)付きテキスト」にしておけば、ソースコードを整形する手間が少なく、[コマンド] → [Word HTMLのクリーンアップ]を利用する必要もないので便利です。