しかし業務となると固定IPでないとNGな場合もあります。
サブ回線にまで固定IPを取得しているというケースはさすがに稀かも？
私はメインの光では取得していますが、サブのdocomoでは未取得。

まあ外出時に固定IP必須の業務発生なんてレアケースはほぼないし、そんな時はがんばって職場に戻ればいいと考えてましたが、そうもいかない状況が訪れそうなわけです…。

そこで、Macの「画面共有」を使って外部からリモートでMacを操作できるようにしてみましたので記録に残しておきます。

ここではあえて、WindowsからMacをリモート操作する方法について記述します。
（Mac→MacやWindows→Windowsならもっと簡単と思われます）

操作される側：Mac （snow leopard）
操作する側：Windows 7 – Real VNC
ルータ：XXX（Mac:有線 / Win:無線（無線Hubを介して））

※これは場合によってはセキュリティ上非常に危険な状態になる可能性があります。
全て自己責任でお願いします。わからない事を自分で調べる事ができない方にはオススメできません。

1. LAN構築にDHCPを使っている場合、固定にする。

ルータのDHCPの設定で開始IPを 192.168.1.4〜などとして、
Macのシステム環境設定＞ネットワーク＞有効な接続のIPv4の構成を手入力にして
IPアドレスを192.168.1.3などとする。

2. 画面共有をONに。

システム環境設定＞共有＞画面共有 を『入』にします。
［コンピュータ設定］をクリックし、「VNC使用者が画面を操作することを許可」にチェックし、パスワードを設定。（※PCの操作が可能になるパスなので要注意！）
これでMac側の操作は終了。

※この操作でファイアウォールの例外に画面共有が自動で登録されます。
※iAntiVirusのProtect my Macは ON のままで大丈夫でした。

3. WindowsにReal VNCを導入

Real VNCのダウンロードはここから
サーバは不要なのでビューワのみインストール。
起動後、サーバに 192.168.1.3（1. で設定したMacのローカルIP）と入力し、
オプションのカラーレベルを「フル」に変更（Macの画面共有はフル以外で接続できない）し［OK］。
2で設定したパスワードを入力すると、Macの画面が表示される。

これでローカルLAN環境での画面共有ができるようになりました。

次に、インターネット側からのアクセスを許可する設定について。
※固定IPを取得するか、ダイナミックDNSのようなサービスを利用する必要があります。

4. ルータの設定（VNC用）

静的IPマスカレードの設定

VNCアプリからの通信を自動でMacへ

プロトコル：TCP / ポート：5900 → 192.168.1.3

IPv4パケットフィルタリングの設定

VNCアプリからの受信を許可

種別：通過 / プロトコル：TCP / 宛先ポート：5900

以上で、VNC関連の設定は完了です。
MacのあるLAN環境の外部のネット環境に接続し（同じLAN環境ではエラーになります）、
Real VNCのサーバに固定グローバルIPを指定し、Macの画面共有に接続します。

5. Wake On Lan の導入

スリープ状態のMacを外出先からスリープ解除できるようにします。
ルータが非対応の場合できません。

WindowsにWake up On Lan Toolをインストール

リモートホスト名：My Mac （適当に）
ポート番号：7779（※1）（適当に他とかぶらない値で）
IPアドレス：固定グローバルIP
サブネットマスク：255.255.255.255
MACアドレス：MacのイーサネットのMACアドレス

静的IPマスカレードの設定

WOLアプリからの通信を自動でMacへ

プロトコル：UDP / ポート：7779（※1の値） → 192.168.1.3

IPv4パケットフィルタリングの設定

WOLアプリからの受信を許可

種別：通過 / プロトコル：UDP / 宛先ポート：7779

WAN→LAN中継設定（うちのルータではこれでWOLを実現）

中継機能：ON / UDPポート番号：7779（デフォルト）（上２つの値はこれに合わせた）

以上で、WOL関連の設定は完了です。
MacのあるLAN環境の外部のネット環境に接続し（同じLAN環境ではエラーになります）、
Wake up On Lan ToolでMacをWake up!します。

これで全ての準備が完了しました。

実際にdocomoのAPモードON！、 WindowsノートをAPモードに接続！
WOLでMacを叩き起こし、VNCで接続！！！
Macの広大なデスクトップをフルカラーで転送するため携帯回線では正直つらいですが、ともかく「できる」ようになりました。

※iPhone用のVNC / WOL アプリもあります。

※この記事に関する質問には応えられません。
この情報を元にいかなる損害が出ても当方は責任を持ちません。

※画面共有に限らずMacの「共有」関係は、必要最低限な機能のみを必要な時だけONにすることを推奨します。

※上で設定したルータの静的IPマスカレード、パケットフィルタリングは（以下略）

これ、面倒なんですよね。テーブル使わずにコーディングするの。

display: table-cell

が使えればどんなに楽なことか。
Fack IE!!

Microsoftは 古いIEにはどぎつい警告が1時間に1回自動表示されるようにして欲しい。
（Wordpressの管理画面にIE6でアクセスすると出る真っ赤なアレみたいな）

さて本題。
複数カラムの高さを揃えるJSを使うのも久しぶりなので、もっと便利なJSがないか探してみました。

あったー。

jQuery Auto Height – 複数のカラムの高さを最大値にそろえるjQueryプラグイン | かたつむりくんのWWW.

いつもお世話になってます＞かたつむりくんwww。

このJSの便利なところはこれ。

セレクタで指定した要素を、オプションで渡した数ごとに、その中の最大値にそろえる（1行ごとにそろえられる）

カラムブロックに余計なクラスを設定しなくてもOK！
膨大な数のカラム、複数パターンのデザインのブロックを3カラムごとに高さを揃えたい！なんて場合でもヘッダーに書くJSは1行でいけます。

例えばこんな感じで。

$(‘.boxtype-1,#special-wrap li’).autoHeight({column:3});

LeaveNoticeを参考に、いろいろカスタマイズしています。

• 外部リンクは新ウィンドウ（タブ）で開く
• 同じウィンドウで開くか新ウィンドウで開くか選択できる
• URLは常に表示する
• title属性はある場合だけURL上に表示
• 「この画面を次回移行表示しない」チェックボックスを追加
  （検証用：チェックを解除）

rel=”external” or target=”_blank” or class=”outlink” 属性のあるリンク：
自動で確認画面＋新しいタブ＋クラス「outlink」付与

Yahoo!JAPAN

twitter

Google（タイトル属性無し）

長いURLの省略表示サンプル

※rel=”external” または target=”_blank”と、ヘッダ内に記述する個別フラグ（下記）を同時に設定するのはNG。

個別設定→クラス「time5」のリンク：
自サイト名「サンプルサイト」、5秒後に自動遷移

MSN Japan（5秒後に自動遷移）

jQuery(function(){
jQuery('a.time5').leaveNotice({
siteName:"サンプルサイト",
timeOut:5000 });
});

個別設定→クラス「custom」のリンク：その他オプション

参考：LeaveNotice

jQuery('a.custom').leaveNotice({
siteName:"Labrid WP",
exitMessage:"<h3>Say goodbye to {SITENAME}!</h3><p>Thanks. Shut the door behind you!</p>",
preLinkMessage:"<hr/><p>Have fun at:<br/><strong>{URL}</strong></p><hr/>",
overlayId:"custom-blackout",
messageBoxId:"custom-messageBox",
messageHolderId:"custom-messageHolder",
overlayAlpha:0.6
});

※IE6：×

※IE6での表示に対応しました。

jStyler

cookieにも対応。
文字サイズ変更等に最適！

IE6非対応なのでそれだけ注意。

ノーマルな使い方は上記配布サイトの説明通りにすればOK。

サムネイル方式にするのに少しハマったのでメモ。

サムネイル画像は名前を『元ファイル名_thumb.jpg』として同ディレクトリに配置。

配布のJS/CSSはいじらずそのまま使う。

Header

<script src=”js/jquery.nivo.slider.pack.js” type=”text/javascript”><!–mce:0–></script>
<script type=”text/javascript”><!–mce:1–></script>

BODY

<div id=”slider”>
<img src=”images/pic_01.jpg” />
<img src=”images/pic_02.jpg” />
<img src=”images/pic_03.jpg” />
<img src=”images/pic_04.jpg” />
</div>

CSS （Demoから引用）

#slider {
    position:relative;
    width:600px; /* Change this to your images width */
    height:450px; /* Change this to your images height */
    background: url(images/loader.gif) no-repeat 50% 50%;
		margin-top:30px;
		margin-bottom:160px;
		margin-left:70px;
}

.nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background:url(images/arrows.png) no-repeat;
	text-indent:-9999px;
	border:0;
}
a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
}
a.nivo-prevNav {
	left:15px;
}

#slider .nivo-controlNav {
	position:absolute;
	bottom:-70px;
}
#slider .nivo-controlNav a {
	display:inline !important; /* Unhide the thumbnails */
}
#slider .nivo-controlNav img {
	display:inline !important; /* Unhide the thumbnails */
	margin-right:10px;
}

.nivoSlider {
	-moz-box-shadow:0px 0px 5px #333;
	-webkit-box-shadow:0px 0px 5px #333;
	box-shadow:0px 0px 5px #333;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	display:none;
}
.nivoSlider a {
	border:0;
	display:block;
}

.nivo-directionNav a {
	display:block;
	width:30px;
	height:30px;
	background:url(images/arrows.png) no-repeat;
	text-indent:-9999px;
	border:0;
}
a.nivo-nextNav {
	background-position:-30px 0;
	right:15px;
}
a.nivo-prevNav {
	left:15px;
}

#slider {
	margin-bottom:110px;
}
#slider .nivo-controlNav {
	position:absolute;
	bottom:-70px;
}
#slider .nivo-controlNav a {
    display:inline;
}
#slider .nivo-controlNav img {
	display:inline;
	position:relative;
	margin-right:10px;
	-moz-box-shadow:0px 0px 5px #333;
	-webkit-box-shadow:0px 0px 5px #333;
	box-shadow:0px 0px 5px #333;
}
#slider .nivo-controlNav a.active img {
    border:1px solid #000;
}

/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
	clear:both;
}

.pointer {
	cursor:pointer;
}

/* Sharper Thumbnails */
img {
	-ms-interpolation-mode:bicubic;
}

WordPress 3.0〜 の新しい機能としてカスタムヘッダーという機能がある。
これは以下のような機能をもったもの。

• 管理画面で全ページ共通で表示されるヘッダーイメージを選択できる
• 固定ページ、投稿ページごとに投稿画面からヘッダーイメージをアップできる

しかし、これではカテゴリー一覧や検索関連では個別設定できないので、この機能を使って「タイトル画像」を各ページにセットする、という使い方はできない。

そこで、一つのテンプレートファイル（header.php）をカスタマイズして、以下のような仕様のヘッダーイメージを全ページに設定する方法を考えてみた。

• トップページには大きめのメインビジュアル画像
• カテゴリー一覧・個別投稿ページではカテゴリータイトル画像
• 固定ページには個別のタイトル画像

条件分岐は、いつもの if 文で。

トップページにメインビジュアル画像

普通に固定で。

<img src=”<?php bloginfo( ‘template_url’ ); ?>/images/main.jpg” alt=”" />

もしくはカスタムヘッダーを使う。（管理画面から差替え可能）

<img src=”<?php header_image(); ?>” width=”<?php echo HEADER_IMAGE_WIDTH; ?>” height=”<?php echo HEADER_IMAGE_HEIGHT; ?>” alt=”" />

カテゴリー一覧・個別投稿ページではカテゴリータイトル画像

カテゴリースラッグを抜き出して画像ファイル名を
｛カテゴリースラッグ｝_ttl.jpg
としてテンプレートの画像ディレクトリに用意。
これを以下のように読み出す。

<?php $cat = get_the_category(); $cat = $cat[0]; {
echo ‘<img src=”‘ . get_bloginfo(“template_url”) . ‘/images/’ . $cat->category_nicename . ‘_ttl.jpg” alt=”‘ . $cat->cat_name . ‘” />’;
} ?>

固定ページには個別のタイトル画像

カスタムフィールドを使い 「ttl」のような key に セットした値を使って
｛カスタムフィールド：ttlの値｝_ttl.jpg
という名前の画像ファイルをテンプレートの画像ディレクトリに用意。
これを以下のように読み出す。

<img src=”<?php bloginfo( ‘template_url’ ); ?>/images/<?php echo get_post_meta($post->ID,’ttl’,true); ?>_ttl.jpg” alt=”<?php the_title(); ?>” />

全ページ・全カテゴリ分のテンプレートファイルを個別に用意するのに比べればかなり楽にタイトル画像を実現できたかと思います

• 最終変更日が○年○月○日以降のデータのみ抽出
• ディレクトリ構造は維持
• 空ディレクトリや_notes/.mno（Dreamweaverが出力するデータ）等の不要データは削除

Automatorとは？

AutomatorとはMacに標準装備されている、様々な作業を自動化する事ができるアプリです。
若干動作が不安定ですが、単純なフローなら大きな問題はなさそうです。
「ちょっと手助けしてくれる」くらいの気持ちで付き合うと精神衛生上よさそうです。

ここで作成したフローは、.workflow という拡張子のデータとして保存し、必要に応じて実行することで自動化された作業が始まります。
（他にも「サービス」や「アプリケーション」、「フォルダアクション」等の形式のフローを作成できます）

今回は都合上、フローを以下の I〜IVに分け、別ファイルとして保存・実行することにしました。

I. 納品用データの準備

1. 納品データを含むルートフォルダを選択（選択画面が出る）
2. 1.で選択したフォルダをデスクトップにコピー
3. 2.でコピーしたフォルダ名の末尾に「_sbn」（適当な文字列）をつける

II. 不要データ削除

1. I で用意したフォルダを認識させる
2. 1.のフォルダの内容をサブフォルダも含めて全て取得
3. 以下のフィルタで不要データを抽出
   ・名前（ファイル/フォルダ）に「_bk」が含まれる（バックアップファイル）
   ・名前が「_（アンダーバー）」で始まる（DWが出力する_notes等）
   ・名前が「.DS」で始まる（Macの隠しファイル.DS_Store等。たぶん意味ない）
   ・拡張子が「mno」（DWが出力するデータ）
4. 3.で抽出したデータを別フォルダに移動
   ※「ゴミ箱に入れる」だと失敗することがあるため

III. 差分データの抽出

ディレクトリ構造を維持したまま、指定日以降のデータを抽出することはできないので、
代わりに指定日以前のデータを削除することにします。

1. I. II. で用意したフォルダを認識
2. 1.のフォルダの内容をサブフォルダも含めて全て取得
3. 以下のフィルタで不要データを抽出
   ・最終変更日が「○年○月○日」より前（「ワークフローの実行時にこのアクションを表示」で実行時に日時を指定可）
   ・フォルダ以外（Macではフォルダ自身とフォルダの内容の最終変更日が同期せず（フォルダ内に今日更新したデータが含まれているのに、それを含むフォルダに変更日が10日前なんていうことがある）ので、ここでフォルダ以外を指定しないと最新データがフォルダごと削除される場合がある）
4. 3.で抽出したデータを別フォルダに移動

ここまでのフローで、差分データの抽出は完了です。
※空のディレクトリが大量に残った状態ですが、これは次の圧縮ファイル作成時に、MacWinZipperというアプリが削除してくれます。

ここで処理したフォルダを開き、差分データに間違いがないか確認しておくとよいです。

次に空フォルダや、Mac 特有の隠しファイル（リソースフォーク等）を削除した圧縮ファイルを作成します。

IV. MacWinZipperで圧縮ファイル作成〜メール添付

1. I.〜III.で処理したフォルダを認識
2. MacWinZipperで圧縮
   ※Macのデフォルトの圧縮アプリは、Mac特有のリソースフォークと呼ばれる隠しファイルもそのまま圧縮するため、Windowsで解凍するとそれらがゴミファイルとして出てきます。また日本語が含まれるファイル名が使われている場合、Windowsで解凍すると文字化けしたりデータが壊れたりすることがあります。MacWinZipperはこれらの問題を全て解決してくれる圧縮アプリです。ついでに空フォルダも削除してくれるので、一石二鳥です。さらに圧縮時にパスワードをかけることもできます。
   詳しくは→MacWinZipper
3. 圧縮ファイル作成が完了したことを確認し、確認ウィンドウの「OK」をクリック
   ※この工程をはさむことで、圧縮中に次の工程に移るのを防ぎます。
4. 圧縮元フォルダを削除
5. 新規メール作成画面を立ち上げる
   ※必要に応じて宛先・本文を設定しておくとさらに手間を減らせます。
6. 2.で作成した圧縮ファイルを認識
7. 圧縮ファイルを 5.の新規メールに添付する

メール添付では遅れないような容量になりそうな場合に備えて、Dropbox 経由で送信するようなワークフローも準備しておくとよさそうです。

以上が、今回作成した納品用ワークフローです。

作成方法はスクリーンショットを参考にしてください。

注）ここで紹介した方法でいかなる不具合が発生しても， 当方では責任を負うことができませんので予めご了承ください。

curved-corner – Project Hosting on Google Code

moz-border-radius: 00px;//for Firefox
-webkit-border-radius: 00px;//for Safari and chrome
border-radius: 00px;//CSS3
behavior: url(border-radius.htc);//for IE

※ただし！
上記プロパティを設定したブロックに line-height が設定されていると、
IE6で要素の下端が下に伸びます。
上位要素（body等）に line-height を指定している場合は、
line-height: normal;
を指定してあげればOK。

ウィンドウサイズの変更に合わせて背景画像が伸縮するFLASHムービーを作成してみました。

仕様：
・背景画像は縦横比固定。
・ウィンドウ内に余白が出ない。

という、よくあるナビゲーションボタン用のActionScript(2.0)。

ボタン用ムービークリップを作成し、各フレームを以下のように設定。
フレーム1：初期状態（stop();）
フレーム2：状態1
フレーム3：状態2

ボタンMCに以下のASを記述。

on (rollOver) {
if (_root.iName1 != this) {
this.gotoAndStop(2);
}
}
on (press) {
if (_root.iName1 != this) {
this.gotoAndStop(3);
_root.iName1.gotoAndStop(1);
_root.iName1 = this;
}
}
on (rollOut, dragOut) {
if (_root.iName1 != this) {
this.gotoAndStop(1);
}
}

以上、覚え書き。

それに近い事が実際に起こってしまいました。
幸いプラグインは必要最低限なものだったけど、問題は、私のWindows IE6 環境ではエラーを吐かないこと。
エラーを吐いてくれないことには Try & Error での原因究明もできないのです。

幸いクライアントが同じ業界の方だったので、プラグインのON/OFFをしながら、エラーの状況を見てもらうことにしましたが・・

それにしてもおかしい…読み込んでいる JavaScript は多くないはず。
しかも信頼のおけるJSばかり。

この時点で思い出しました。
Google 関連の JavaScript がなぜか IE6 でエラーを吐く事があるという報告があった事を。

試しに、Google Analytics のコードを削除してエラー状況を電話で確認したところ、これがビンゴ。
まさに Google Analytics が悪さしてました。

いろいろと幸いな状況が続いたのでさっくり解決できましたが、状況によっては、エラーを吐くクライアントのところまで出向いての検証作業などで丸一日程度無駄にしていたかもしれません。

結論：IE6 でスクリプトエラーが出て、他のブラウザ／バージョンでは出ない、という状況ではまず Google 関連から疑うべし。

–（後記）—-

上記エラーの理由：文字コードがUTF-8のページで外部javascript を読込む際にUTF-8を明示的に表記しないと微妙な動作をする。

解決方法：以下のソース部分を変更。

※変更前

document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

※変更後

document.write(unescape("%3Cscript charset='utf-8' src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

情報ありがとうございました。

ランダム表示スクリプトの入手・アップロード

以下のサイトからスクリプトをダウンロードします。

• A List Apart: Articles: Random Image Rotation

ダウンロード場所が少しわかりづらいですが、後の手順はとても簡単なので、便利なスクリプトを提供してくださっている作者様に感謝の気持ちを持って記事を読み解き、ダウンロードリンクを探しましょう。

次にダウンロードした rotate.txt の拡張子を php に変更します。
サーバ上のテーマファイルのあるディレクトリの “images” フォルダ内にランダム表示用のディレクトリ “random” を作成し、ここに rotate.php を FTP ソフトでアップロードします。

/wp-content/themes/テーマ/images/random/rotate.php

ランダム表示用画像の作成・アップロード

ランダムに表示させたい画像を複数作成し、上記で作成したディレクトリ “random” にアップロードします。
画像名は自由な名前で OK です。

背景画像指定スタイルの変更

テーマのスタイルシートを編集し、背景画像を指定しているスタイルの背景画像ファイルへのパスを rotate.php へのパスに変更します。

変更前

background:url(images/bg_header.jpg) 0 50% no-repeat;

↓
変更後

background:url(images/random/rotate.php) 0 50% no-repeat;

以上で完了です。

尚、一時的に背景画像を固定したいような場合は

background:url(images/random/rotate.php?img=static_image.jpg) 0 50% no-repeat;

とすることで対応できます。

初期状態では、rotate.php を置いたディレクトリ内にある画像をランダム表示しますが、rotate.php 内のパスを変更することで、画像の置き場所を変更する事が可能です。
例えば・・・

変更前

$folder = '.';

↓
変更後

$folder = 'http://labrid.jp/images/random/';

気が利いてますね。

Labrid WP ではとりあえず仕掛けは仕込んだものの、画像が2個しかないので、これから徐々に増やしていく予定です。

かなりしつこく調査してみましたが、現状では共用SSLでのSSL化は無理、という結論。残念。

が、そもそもなぜSSL化が必要か、というと、お問い合わせフォームのようなメールフォームでは通信をSSLを通して暗号化する事が常識になっているからなんですね。
本当は、入力内容をそのままメール送信するフォームでは、SSLは無意味であるにも関わらず。
入力側（ブラウザ?サーバ間）をSSLで暗号化しても、出力側（サーバ→メール送信）が暗号化されていないので、意味は無いんです。
あるとすれば『安心感』。運営側にとってはそれも大事。
だから無意味でも皆コストをかけてSSL化するんですね。

話がそれました。
現状ではどうやら、共有SSLでWordpressの特定ページをSSL化するのは不可能なようなので、Wordpress を導入しようとしていて、SSLを使う予定があるなら、多少高くても独自SSLが使えるサーバを選ぶのが正解のようです。

※管理画面をSSL化するのはセキュリティを高める手段としては有効です。
こちらは Admin-SSL を使えば共有SSLでもSSL化できるようです。
Admin-SSL プラグインについてはまた別の記事にて。

これらはMacからは見えないのですが、Windowsなどからは見えてしまうので、
「Macユーザーがファイルサーバに使うとゴミファイル作られて迷惑」
「MacユーザーにCDRを焼かせるとゴミファイルまで一緒に焼くので迷惑」
などと言われていました。

WEBデータをサーバにアップする際も、FTPソフトによってはこれらリソースフォークを一緒にアップしてしまうため、サーバ領域を圧迫する原因にもなります。

USBメモリタイプのミュージックプレイヤー等の場合、これが原因で正常に動作しない、フリーズするといった現象も発生します。
（私も使っている Juke Tower では、Mac からコピーした場合は、Windows でリソースフォークを消してくれと公式FAQで公言しています。）

リソースフォークの役割や意味はともかくとして、Macユーザー以外にとっては百害あって一理なし。
以下のソフトを導入すると、リソースフォークを外部に作成しないようにできます。

• BlueHarvest

BlueHarvest allows you to keep your disks and servers free of Mac “trails” by:

• Automatically removing DS_Store files.
• Automatically removing resource forks (“dot underscore” files).
• Automatically removing hidden folders such as “.Trashes” from removable disks.
• Providing simple Control-Click Finder based cleaning of disks, folders and Zip archives.

BlueHarvest is fully customizable (via a System Preferences Panel) and is a Universal binary, supporting Intel and PowerPC based Macs. BlueHarvest 2 requires 10.4.x or 10.5 and later.

これを導入するとシステム環境設定に BlueHarvest の項目ができ、リソースフォークの存在を意識する事無く、自動でサーバやUSBメモリにこれらをコピーしないように設定する事ができます。

BlueHarvest 設定画面

日本語版も用意されているので、英語が苦手でも安心です。

経緯は・・・ここでは言いますまい。

そこで、差分ツールの２大巨頭「DF」「WinMerge」でこの要望に応える方法をメモ。

※ググったところ、まさに！というソフトを見つけましたが、動かず。
必要そうなランタイムを入れてみたもののダメ・・・原因をさぐるより他のツールを探したほうが早そうなので放置。

DF.exe

1. 『DF.exe 』に比較したいHTML を D&D。
2. ファイル＞比較結果をファイルに保存・・・結果が保存される（.txt）。
3. 『DF支援』を使って、txt をエクセルデータに変換。自動色付けも可能。
4. 大量のデータ処理時は、『DFの「比較結果をファイルに保存」を自動で実行する』で自動処理させることもできる

※DF.exe の推奨設定

• オプション＞設定＞印刷・保存：「ファイル保存時の一行のバイト数」を200前後に変更

WinMerge

1. 『WinMerge』に比較したいHTML を D&D。
2. ツール＞レポートの生成・・・結果が保存される（.htm）。
3. この結果.htmをエクセルで開き、.xls として保存。

※WinMerge の推奨設定

• 表示＞行番号を表示
• 編集＞設定＞比較
  • 空白：比較を無視する
  • 空行を無視する
  • 改行文字の違いを無視する

もっといい方法があれば、情報提供お願いします！