画像のスライサーとWYSIWYGエディター

滋賀県大津市葛川細川町のかやぶき屋根貸別荘「すずめのおやど」の英語ページは全部画像で作られていた。ここのオーナーとは40数年来の友人である。先日、札幌の我が家で15年振りの再会となった。その中で、検索の為にはテキスト化が必要である事を説明し、私が作ることにした。そこで先ず、考え付くのはFireWorksで画像を分割して、HTMLを出力したあと、Dreamweaverやホームページビルダーなどのエディターでテキスト部分を編集すればできると言うこと。これは出来たのであるが、これをフリーソフトを使ってできないか考えて見た。

先ずは画像を分割するスライサーがないといけない。すると、SplitImageと言う海外のフリーソフトが見つかった。このソフトは設定を変えるとhtml出力もしてくれるから、仕様に合っている。さて、次はHTMLエディターである。これなら、ワードでも出来るはずと思い、やって見たが、分割した画像との間に隙間ができた。それを直すのは可能だがかなり面倒。だからワードを諦め、別なエディターを探した。検索で最初に出て来たのは、昔ながらのエディター。これらはもう使いたくない。更に検索を進めると、Microsoft Expression Web4と言うのが、最近開発を止め、フリーとなったことが分かった。Windows98時代にはFrontpageと言うのがあった。Microsoft Expression Webはその後継ソフトということだ。これは誠に好都合。探して見た甲斐があった。前置きはこれくらいにして、早速やって見よう。

Splitimageを起動したら、ファイルのPreferencesで「Generate HTML Table code imageas」にチェックを入れておくと、画像分割後、Generate Images...で画像と共にHTMLファイルも出力される。画像の分割は矢印のアイコンで出来る。ポイントは選択している画像の部分を2分割するということ。最初に何分割するかを決定し、順次、縦や横の線を使って、分割して行けばよい。なお、縦のアイコンをクリックすると横線が、横のアイコンをクリックすると縦線がでる。こんな風にして出来たのが右の画像。(画像をクリックで大きな画像。但し、下の部分がモニター画面に入らなくカットされています。)
 
分割が終わったら、「File/Generate Images...」で出力するファイル名(filename.html)を入れて「保存」。これで出来たのはこのHTMLファイル(splitimage.html)。
次はこのファイルをMicrosoft Expression Web4で読み込んで、文字にしたい所の画像を削除すればいい(必要に応じてセルの結合)。
「書式設定/新規スタイル」で、セレクターをtable、fontを20px、line-heightを26px、text-alignをcenterにしてやると、結合したセル内に程よくおさまった。


こんな感じでやれば他もできる。
その他、グラフィックやビデオ関連のソフトもフリーになっているので、使わない手は無いと言うことで、下記の全部をインストールした。
※ダウンロード
SplitImage(v1.5.2 available in Downloads から)
Microsoft Expression Web4(Detailsの・Japaneseをクリックしてダウンロード)
その他、Microsoft Expression Design 4 (Free Version) Microsoft Expression Encoder 4 with Service Pack 2 (SP2) も無料でダウンロードできる。