SSブログ

FreeHand _HTML編 [FreeHandで行こう!]

FreeHandで行こう!】その15(使い方-HTML編)です。
                → FreeHand _INDEX(目次)はこちら

今回は、FreeHand のマルチページを活用した HTMLパブリッシュと、ネガティブな話になりますが、あえて、いくつかのバグ報告もしたいと考えています。


HTML.jpg

■今回の作例も現役の弊社ホームページで、こちらはHTML】編です。(FLASH編からリンクしています)
制作方法は、前回のFLASHサイト構築法と同様ですが、当HTMLサイトではインラインフレームの横スクロール形式としている為、ページ形状が横長に細長くなっています。FreeHand のマルチページは、ページサイズフリーで、ページごとにサイズを変える等も自由に出来ます。(このサイトではページサイズはほぼ統一していますが、通常の縦スクロールでは、ページごとのサイズフリーは大変役に立ちます)
ナビゲーションパレットのページ間リンクのボタンには、JavaScript用の変数を記述しています。(リンク設定は FLASH編とは異なります)

***

今回で FreeHand の連載も15回目になりますが、ずっと、FreeHand の優れた点をクローズアップしてきました。FreeHand のことをよくご存知なかった方には、連載の中で紹介してきた事項のどれもが、他のソフトには無い、新しい発見だったのではないでしょうか。

今回の HTMLパブリッシュ機能も、一気にサイト構築まで可能な素晴らしいものなのですが、同時にいくつかのバグ報告もする必要があります。
これを機に、実際に FreeHand を使用していくにあたって認識しておくべき【バグ】についても、あわせて取り上げていきたいと思います。


■HTMLパブリッシュ

まず、HTMLパブリッシュです。
マルチページのページ間リンクを維持して、HTML形式でサイト全体が一気に出力されます。
レイアウトは、テーブル、又はレイヤーを選択でき、ファイル内のCSS記述で制御されます。
デフォルトは、ベクターオブジェクトがSWFに、画像はJPEGで、レイヤーにてレイアウトされます。TEXTは、テキストボックス単位でレイヤーに記述されます。(TEXTは、グループ化するとオブジェクト扱いになります)

HTML パブリッシュ機能は、Ver.7 時代に INSTA_HTML(インスタント?)と言う拡張機能で登場しました。
いきなり出始めから完成度が高く、当時すでに 外部CSSファイル記述形式を採用、レイヤーレイアウトと合わせ、DTPレベルのデザインを、正確にHTMLパブリッシュしてみせました。
オブジェクト単位で、画像ファイルの書き出し形式・ファイル名の指定が出来るなど、設定の自由度も充分に確保されていましたが、当時のブラウザ(IE4、NN4)が、スタイルシートにうまく対応出来なかったため、レイヤー+CSSの組み合わせ仕様は、広く普及させるには早すぎた導入だったようです。(1998年当時、10年前の話です)

結局、FreeHand の HTMLパブリッシュ機能は、Ver.9へのバージョンアップ時に、より簡便、簡易なものに仕様ダウンされました。(他にも事情はあったようですが、Ver.9では、HTMLではなく FLASH対応がメインになったことも要因です)
結果として、オブジェクト単位の書き出し形式・ファイル名の指定は出来なくなり、BGファイルなども指定できなくなりました。デフォルトがSWFのエンベッド仕様となり、さらには、Ver.8時代には無かった多くのバグも新しく発生。悪くなった使い勝手、不具合はそのまま改善されること無く MX バージョンまで繰り越されたのです。よって、MXに搭載されているHTMLパブリッシュ機能は、およそ10年前の簡易仕様版のままで、バグも多く、あまりお薦めできないものとなってしまいました。

と言うような事情があり、こちらの連載でも紹介せずにきたのですが、今回、後述のバグ報告に乗じて、一応、機能紹介もしておこうと考えたわけです。 何度も紹介してきましたように、FreeHand 最大の武器でもあるマルチページと組み合わせ、ページ間リンクを保ったままサイト全体を書き出せると言う機能は、たいへん有用なもので、バグを承知の上でうまく使えば、役立つ機能であることは間違いありません。

では、もう少し詳しく説明しましょう。
「デフォルトがSWFのエンベッド仕様となった」は、リンクボタンやベクターオブジェクトをひとつのSWFにすれば、データも軽く出来、記述も簡素化され、当時では良いことずくめとの判断が働いたのかもしれませんが、今日的な SEO 対策の観点から言えば、検索に引っかかりにくくなるという問題点が指摘されます。さらには、WIN_XPの後期に採用された、エンベッドファイルの非アクティブ化(クリックするまでアクティブにならない仕様)の影響をもろに受けてしまうという(FreeHand MXリリース以降に採用された仕様のため致し方ないですが)問題点も顕在化しました。

もちろん、デフォルトから設定を変更し、GIFやJPEGを指定すれば通常のHTMLと同じ構造で書き出しも可能ですが、画質の設定などにバグがあり気をつけて使用しなければなりません。

GIFを指定した場合:デフォルトのGIFは、背景透明になりますが、透明に対してのアンチエイリアス処理にバグがあり、画像をきれいに書き出せない場合があります。そのような場合は、GIFの書き出し設定から、背景透明のチェックを外して使用してください。

JPEGを指定した場合:JPEGには、画質設定のパラメータがありますが、このバージョンのバグで、うまく機能していません。若干荒れた画像に書き出される場合があります。

PNGを指定した場合:PNGは、背景透明に指定出来、品質も高いため思い通りの仕上がりになりますが、如何せん ブラウザ側に背景透明PNGに対応していないバージョンが存在するなど、新しい仕様の泣き所が出てしまいます。(追記:確か、IE6以降のバージョンで背景透明PNGに対応したと思いますので、現在ではPNG使用で問題無いと考えます)

また、「オブジェクト単位の書き出し形式・ファイル名の指定は出来なくなり」では、ファイル名が自動で付与されるまま変更出来なくなってしまった為、レイアウト変更のたびに、同じオブジェクトであっても違うファイル名に書き変わってしまう可能性があるなど、サイト管理上の問題も発生するようになってしまいました。実務で使用する場合は、それらの管理も考慮する必要があります。


HTMLソースに関するバグ:
HTMLソースは、すべてのオブジェクトをレイヤーにレイアウトするタイプ(デフォルト)で、重なりオブジェクトも再編集できる高度なものですが、スタイルシート部分に ローカライズミスによる記述上のバグがあります。
例えば
.untitled2 {font-family:Osaka, MS ゴシック, sans-serif; font-style:normal; font-weight:normal; font-size:13px; line-height:19px; }

という記述では、書体名 MS ゴシックは "MS ゴシック" と「” ”」でくくる必要があります。
英語等のシングルバイト文字ではその必要はないのですが、2バイト文字である日本語では「” ”」でくくらなければブラウザによってはエラーが出、レイアウトが崩れてしまいます。(ちなみに、MACでは大丈夫なのですが..)
ローカライズ担当者のうっかりミスでしょう。この記述ミスは、Dreamweaver で一括置換できますので、認識さえしていれば対応可です。ちなみに、MS ゴシックはデフォルトですので、必ず記述されます。それ以外の日本語フォントを指定した場合は、ちゃんと「” ”」でくくってくれるのですが、…

 追記:近年の新しいブラウザでは、「" "」でくくっていなくてもエラーは出なくなって来たようです。


また、なぜかソースは改行されずに書き出されてしまい(これもVer.9からです)読めたものではありません。(解読防止には良いかも)ただ、これも Dreamweaver で修正できる為、対応可です。(「ソースフォーマットの適用」を実行してください。)

書き出し設定時のウインドウにも軽微なバグが潜んでいます。本来、ブラウザを指定すると、ファイル書き出し後、プレビューされるのですが、うまく機能しない場合が多い。また、指定ページのみの書き出しを指定しても、全ページ書き出してしまう。。。などです。(汗;)
決して、致命的なバグではありませんが、このような不具合が散見されることで、FreeHand の信頼性を損ねているのも、また事実ですね。残念です。 この連載では、今回、あえてバグを紹介していきます。ちゃんと認識さえしておけば、そんなことどうでも良いぐらい、遥かに大きなメリットを享受できるわけですから。落とし穴の場所は知っておくにこしたことはありません。


■バグ報告

それでは、私が認識しているバグを報告いたします。(順不同)(Ver.10は未確認)

・「内部にペースト」を含むオブジェクトと、その下に隠れたオブジェクトがグループになっている場合、下に隠れたオブジェクトに対する探りながらのダイレクト選択が出来ない(このような条件の場合のみ下に隠れたものが探れなくなった)(MXバージョンのみのバグ)

・「グリッドに吸着」を設定してある場合、移動してから複製を複数回実行した場合、複製先の座標軸がずれていく場合がある(MXバージョンのみのバグ:一時的に設定を解除すれば回避可)

・テキスト変形で、縦比率、横比率、ベースラインの3つの設定を同時に変更した場合、PSプリンタ出力で、指定した文字の直後の文字が、ベースラインがずれた状態で出力される。(モニタ表示は正常。PS処理のみに問題発生)

・オブジェクトパレットの「グループとして変形」チェックが入ったオブジェクトを変形後ダイレクト選択した場合、オブジェクトパレットの表示と実際の寸法が整合しない。(これはバグではなく仕様なのですが、寸法参照時に問題あり)

・四角属性、円属性を生かしたまま別のオブジェクトとグループ化したもの(またはグループの中に「グループとして変形」チェックの入ったものが含まれている場合)を何度も変形・移動すると、座標に狂いが発生する場合がある。(まれな現象ですが、そのような場合は、属性を解除(またはチェックを外す)すれば回避できます)

・Fireworks へのコピーペースト時、オブジェクトに対して勝手にボカシが設定される場合がある。(FreeHandの広大なドキュメント領域(6m×6m)が、Fireworksの処理領域を超えていることで起こる現象です。FreeHandのページの場所を左下側に移動させてからコピーペーストすれば回避できます)

・Flashへ画像のコピーペーストが出来ない場合がある。(これもバグではなく内部処理の問題。FreeHand の画像内部処理はDTP対応の TIFFベースで、FLASHは TIFF非対応です。このような場合は、両対応の Fireworksを経由すれば対応できます。(Fireworks の内部処理はPINGベース)なお、配置画像が JPEG等の場合は問題なくコピーペーストできます)
(他にも、仕様差でラスターエフェクトはコピー出来ませんが、Fireworks を経由すれば、多くの場合コピー出来ます)

・Distiller で書き出したPDFや、Illustrator で開いた EPSにグラデーションが含まれている場合、グラデーション部分に櫛状の隙間が出来る場合がある。(ADOBE製品との相性問題のようです。商業印刷へのEPS出稿では問題ありません)

・マルチ属性に対する属性のコピーが出来ない場合がある(MXバージョンのみ)

・オブジェクトに ActionScript を記述する際、塗りが設定されていないパスは、リンク設定は出来ても実際にはマウスに反応しません。同様の理由で、塗りが設定されていないクリッピングパスもマウスに反応しません。また塗りが設定されていないクリッピングパスは、内部の写真を表示出来ない場合もあるため、適当な色でパスを塗って下さい。稀に、塗りだけではマウスに反応しない場合もありますので、そのような場合は、線にも属性を設定してみて下さい。
また、マスターページからページにリンクを張ると、稀にリンクしない場合もあるようですので、そのような場合はリンクを設定してからマスターページにコピーしてみて下さい。(メモリーの状態などによる再現性の低い不安定なバグのようです。再起動や、新規ファイルで回避出来る場合もあります)

・TEXTを含むグループオブジェクトに ActionScript を記述した場合、テキスト部分をクリックすると、記述されたスクリプトと違う動作をする場合がある。(違うページにリンクするとか..)そのような場合は、TEXTをアウトライン化すれば回避出来ます。

・SWF書き出し設定ウインドウで、ページが指定できない場合がある(そのような場合は、tabキーでフォーカスすれば入力できます)

・ツールパレットが表示出来なくなるとか、原因不明の不具合が頻発する場合は、初期設定書類にダメージのある可能性があります。OSXの場合、ユーザーライブラリの、Application Support>Macromedia>FreeHand MX>11>Japanese>Settings ホルダを一時的にはずせば、インストール直後のデフォルト状態で立ち上がります。(FreeHandを終了させてからホルダを移動させる)具合が悪くなった場合はお試し下さい。(他の環境をそのまま移植する場合にもフォルダやファイルの入替えで対応出来ます)

・保存ダイヤログボックスで選択できる「FreeHand テンプレート」と「編集可能 EPS」保存にはバグがありますが対策可能です。「テンプレートの作成」は普通にファイル保存し、MAC_OS の「情報を見る」ウインドウを表示させ「ひな形」をチェックすればテンプレートファイルになります。「編集可能 EPS」で保存したファイルは、再保存すると開かなくなってしまいますが、メニューの「書き出し..」から「EPS書き出し」を選択し、「設定」で「FreeHand ドキュメントを含む」にチェックして書き出した EPSファイルなら問題なくいつでも再編集できます。こんなバグは、MX以前には無かったんですけどねぇ...

***

以上、いずれも軽微なバグだと思います。気をつけたいのは、3つ目の、PS処理の場合のTEXT変形のバグ。これは画面表示では解らない為、落とし穴として気を付ける必要があります。(3つの変形を同時にすることは少ないですが、例えば、累乗などの表記をする場合などです。そのような場合は、縦横比率は100%のまま級数で小さくしてベースラインを変更すれば問題は発生しません。)

他にも、パソコンの体調不良時や、メモリ配分が圧迫された場合など不具合を発生する場合がありますが、再現性の低いものですし、どんなソフトでも発生する可能性のある問題ですので割愛します。
(思い出したバグ、または新たに確認出来たバグがあれば、追記します)


以上、今回は、あえて FreeHand の汚点としての、バグの報告をしました。
あえてバグ報告した訳は、ぜひとも、本気で FreeHand に接してほしいからに他ありません。
少し注意して使用すれば良いだけの話です。いくつかのバグに ほんの少し目をつむれば、はるかに大きなメリットを享受出来るようになるでしょう。是非 FreeHand を楽しんで下さい。

この連載が、FreeHand の情報を求めている方のお役に立てれば幸いです。



次回は、とりあえずの一区切りとして FreeHand 総集編です。 続きます。



***

※文中、キーボードの、コマンド、option、comtrol 表記は、MACのものです。WINの場合は表記が異なりますので推察して下さい。マウスクリックも、2ボタンの場合 操作が変わるようです






***

シリーズを続けています。 初めてお越しの方は、総集編か、カテゴリーTOPからご覧下さい。
   →総集編 では、FreeHand の真の実力をご覧頂けます。
   →続・総集編 は、総集編の続編です。総集編と合わせてご覧下さい。
   →FreeHand _カテゴリーTOP はこちら
   →FreeHand_使い方 TOP はこちら
   →FreeHand_INDEX はこちら
   →付録編 では、ざっくばらんな情報をご覧いただけます。
   →Tips編 小ネタ集です。
   →FreeHand VS CS4 では、最新版の Illustrator CS4 と比較しています。どうよ。
   →FreeHand VS CS5 では、最新版の Illustrator CS5 と比較しています。どうよ。どうよ。
   →FreeHand_入門編 Illustrator の作業が、FreeHand ではこんな感じ。
   →FreeHand_番外編 実践的に使える裏技テクニックほか、様々な情報を提供しています。

***



   →FreeHand カテゴリー 一覧はこちら