SSブログ

すごいぞ FreeHand:HTMLパブリッシュ [FreeHandで行こう!]

【 FreeHandで行こう!】その62 <すごいぞ FreeHand:HTMLパブリッシュ>

***

このシリーズでは、FreeHand のデザインツールとしての優位性を紹介しています。
FreeHand の情報を求めている方や、Illustrator ユーザーの方にも、お役に立てれば幸いです。

今シリーズは、 「すごいぞ FreeHand」と題してざっくばらんに話を進めています。
初めてお越しの方は、FreeHand をご理解頂くために 総集編か カテゴリーTOP もご覧頂ければ幸いです。

     → FreeHand _総集編はこちら    → FreeHand _カテゴリーTOPはこちら

***


すごいぞ FreeHand シリーズ第4弾。(→ 第1弾第2弾第3弾 はこちら)
今回のお題は「HTMLパブリッシュ! by FreeHand」です。


FreeHand からの HTMLパブリッシュについては、以前に何度か書いたことがありました。 →123
恐らく、FreeHand の HTMLパブリッシュ機能を実務に使われている方は極めて少数派と思われますし、実際バグも多く残ったままになっている、最新のフォーマットではない、、、など、あまり強くお勧め出来るものではないのですが、上手く使えば強力な武器になると確信するところもありますので、今回弊社2014年版 WEBサイト作成を例にして解説したいと思います。



その前に、現在の弊社 WEBサイトをご覧下さい。正月にアップした時より、機能面も充実してきました。
ASPECT_HP_201403.jpg
実装機能:
●マウスで、スマホ風に画面ドラッグ、またはクリックで横方向にページ単位スクロール。
●ダブルクリック拡大表示機能も装備。(対応はブラウザによります)
●各コンテンツ1P目のダブルクリックに限り、フレーム解除+フルスクリーン拡大表示。(同上)
●キーボードの矢印 key(←、→)で、高速ページ間移動。↑キーはコンテンツ切替。
●ウインドウ下のメニューからも、連続クリックのページ送りが可能。

上記は独自機能として Javascript で実装させたもののため、FreeHand のHTMLパブリッシュ機能とは直接関係ないものですが、Javascript と連携させる方法なども、併せて解説してみたいと思います。


まず、FreeHand のHTMLパブリッシュ機能を利用する最大のメリットは、考えながら制作しているデザイン段階のデータを、そのままコーディングされた状態に書き出し出来るという事にあります。
(相互リンクを伴うサイト全体構成までもを一気に書き出し出来るのです)


通常、コーディングされたHTMLデータを得ようとすると、デザインパーツを作成し、画像に書き出し、CSSでデザインを固めて行くという手順を踏む必要があり、デザインを試行錯誤しながら一連の作業を続けるという同時進行は出来ません。
その為、デザイン提案の段階ではコーディングまで作り込む事は現実的で無く、デザイン画像という形でプレゼンするということになりますが、これでは、リンクも張れない、動く部分も作れないということになってしまいます。(口頭での説明か、別サンプルでの説明になってしまいます)

FreeHand のHTMLパブリッシュ機能を利用すれば、デザインデータがそのままオブジェクト単位にレイヤー分けされ、リンクや引数、CSS記述を生かしたまま Dreamweaver で編集可能な HTMLデータとして出力されます。Dreamweaver 上で Javascript を組み込む等すれば、実際のサイトと同レベルのものが短時間で出来上がってしまうという離れ業をやってのけてくれるのです。

実際、弊社2014年版サイトでは、Javascript の開発には多くの時間を割きましたが、コンテンツそのものは短期決戦で制作完了する事が出来ました。
デザインを作りながら、同時に動きのチェックも出来るため、動きを伴うインターフェースデザインの開発には大変有効と確信するところです。


それでは、実際の FreeHand のコンテンツデータをご覧下さい。
FH_HTML_2014.jpg
1P当たりのサイズを 1000 × 650px として横に10Pで 10000 × 650px の横長コンテンツ。
7P分(都合70Pのデータということになります)プラス Site Map(目次)ページの合計71Pデータです。


HTML パブリッシュの設定は以下のようにします。
FH_HTML_SetUp.jpg
レイアウトは「レイヤーで配置」を選びます。(テーブルだと、適当に分割されたスライス画像になります)
ベクターアート、画像とも PNG形式がおすすめです。PNG形式の詳細設定は PNG書き出し設定に準じます。
背景透明にする為に 32ビット、アルファチャンネルを含むを選択してください。解像度は別の解像度を選択してあっても72dpiに書き出されます。
PNG以外の形式の選択も出来ますが、JPG は背景透明に設定出来ませんし、品質設定が選択出来ないバグもあるため、お勧め出来ません。
SWFは良い感じにパブリッシュ出来ますが、近年のブラウザはSWF形式と相性が良くないため、やはりお勧め出来ません。

ちなみに、DOCTYPE は、HTML 4 になります。(HTML4 は、現状で最も普及しているバージョンと考えられますので、1世代前のフォーマットとはいえ、まだまだ大丈夫でしょう。)
ただ、1行目に DOCTYPE 宣言の記述がありません(10数年前の仕様ですから)ので、4.01の記述を追加すると良いでしょう。記述が無いと Javascript の動作に影響が出る場合があるようです。



また、リンクパレットはこんな感じです。
FH_Link.jpg

onmouseUp="Cancel=1 等は、マウスアップ時にスクロールをキャンセルする為の引数記述です。
メール送信は、mailto: を記述すれば使えます。(最下段参照)


FreeHand から HTMLパブリッシュを行うと、僅か1〜2分でパブリッシュ完了。HTML・CSSコードの作成と、全ての画像データが72dpiに整えられて書き出されます。(外部画像データとして配置されたものは、倍率やトリミングが変更されていなければそのまま利用されます)



制作にあたっては、以下の点も参考にしてください。(順不同)

●パブリッシュデータは改行無しで文字詰め表示されているため、Dreamweaver のコマンドメニュー
 「ソースフォーマットの適用」を適用して編集しやすいように変換します。

●パブリッシュデータは基本的に左寄りに表示されます。大外枠の div style="position:static;" を
 "position:relative;" に変更し、centerタグを追加すればセンター表示するようになります。

●文字の行間指定は「=、+、%」と3種あるうちの「+」を使用してください。行間の再現性が高まります。

●フォントは、指定のものに加えて一般的な MSP、osaka が追加されますが、昨今のフォントも追加すると
 良いでしょう。私はメイリオとヒラギノを加えるようにしています。

●テキストも、画像も、グループ化(単独でも)するとベクターアート扱いになります。

●CSSは ページ毎に head に記述されるタイプですが、全ページを統一すれば、外部ファイル化が便利です。
 CSS記述を統一するには、全ての書式を含むテキストブロック(全角スペースに指定すれば良いでしょう)
 を各ページの最深部分に置いておきます。
 その後、Javascript や メタタグの追加なども含めて、Dreamweaver で head 部分を一括差替えします。

●カラーマネジメントは、「なし」を選択するとカラー表示領域が最大となり発色が良くなります。

●単位は「ピクセル」を選択します。(ドキュメント左下のポップアップメニューより)
 自動的に カーソル移動距離、グリッド(吸着)もピクセル単位になり、イラレで言うところの
「ピクセルグリッドに整合」(ピクセルにスナップ)状態になりますが、残念な事に Mac OS10.4 以降
 グリッドが機能しなくなってしまった(OS非対応、Windows は未確認)ため、無用なアンチエイリアスが
 掛からないようにするためには数値ウインドウで整数値を再入力することが必要になる場合が有ります。

●読み込みは下のレイヤーから優先されます。先に表示させたいものを下のレイヤーに移動させます。

●自動生成される画像は下から順に番号で管理されるため、上下関係を変更するとファイル名も変わります。
 キャッシュを読んだ場合、違う画像が表示される可能性があるため更新時には注意が必要です。

●自動番号名ファイルによる上記問題を回避するには、固有ファイル名の画像を配置するようにします。
 (自動生成された画像のファイル名を固有名に変更して再配置すれば良いでしょう)

●配置ファイルでも、サイズを変更したりグループ化すると自動生成画像として書き出されます。

●マスク内の画像が正しく表示されない場合は、マスクをグループ化して自動生成画像にします。

●埋め込み画像が上手く表示出来ない場合も、グループ化して自動生成する事で回避出来ます。
 ブラウザから直接ドロップしたような画像も、グループ化しておけば確実に書き出されます。

●Flash を表示させるには swfファイルを画像同様に配置することで可能ですが、セキュリティ強化された
 ブラウザに対応させる為には Dreamweaver側でエンベッド対策させるのが安全でしょう。
 プレゼン使用目的であればなんら問題ありませんが。



FreeHand の HTMLパブリッシュ機能は、Ver.7(1997)に実装され、若干の改良と機能簡略化が行われた Ver.9 以降は、バグ修正も行われないまま放置されて開発が終了してしまいましたが、開発当時の最先端の機能と使いやすいインターフェースが搭載されていた為、今でも上手く使いこなせば、見劣りせずに使用することが出来るものとなっています。(HTMLバージョンは、1997年に策定された当時最新の HTML4.0です。)

なにより、試行錯誤しながら制作している「生」のデザインデータが、一気に複数ページのサイトとして、ページ間リンクや引数まで伴って、そのままコーディングされた状態でパブリッシュされるという点が、代え難いメリットと確信出来るハズです。

プレゼンまでに時間が限られていても、完成に近い形のコーディング済みデータでデザイン確認出来るというメリットは、FreeHand が WEB用デザインツールとしても、類い稀な優位性を有していると痛感出来る部分だと思います。
勿論、プレゼン用途に限らず、弊社サイトのように実使用運用も問題ありません。
ALT属性ぐらいは追加記述しておいた方が良さそうですけれども...。



追記:
弊社サイトでは、テキストや画像が選択出来なくしてあるため、1枚の画像になっているのか? との問い合わせをいただきましたが、勿論画像にしてあるのではありません。
ドラッグによるスクロールを行う場合、選択されてしまうとスクロール操作が出来なくなる為、Javascript で選択出来ない仕様としています。テキストもそのまま生きていますので、検索などにも有効に機能します。



追記:
弊社サイトは、PC表示時には iframe にコンテンツを表示し、iPad、iPhone、android などデバイス機器には直接コンテンツ表示を行い表示領域を調整します。アクティブではありませんが、パッシブなレスポンシブ対応を実現しています。


↓ iPhone での表示(天地固定:横スクロール。 横位置時も天地固定になります。)
iPhone_Response.png

↓ iPad での表示(横位置表示では 1ページを最適表示。横スクロール。 縦位置時も天地固定になります。)
iPad_Response.png

android デバイスは多様性があるため、機種により表示が異なる場合があると思われます。



追記:おまけ機能
おまけ機能として、iframe 内に外部サイトを読み込ませる機能があります。(参照サイト用に使用)
当初、Yahoo サイトを読み込ませるデモンストレーションアドレスをこちらで公開しておりましたが、
著作権がらみや悪意ある使用も想定されるとのことで、Yahoo が禁止対策を実施したことに合わせ
アドレスを削除しました。(2014.10)



***


シリーズを続けています。初めてお越しの方は、総集編か、カテゴリーTOP(旧い順)からご覧下さい。
  →総集編 では、FreeHand の真の実力をご覧頂けます。
  →続・総集編 は、総集編の続編です。総集編と合わせてご覧下さい。
  →FreeHand_使い方 DTP編、FLASH編など含め、全10編。
  →FreeHand_INDEX はこちら
  →付録編 では、ざっくばらんな情報をご覧いただけます。諸々入れて全10編。
  →Tips編 1分で出来る小ネタ集など。全5編。
  →FreeHand VS CS4 では、最新版の Illustrator CS4 と比較しています。どうよ。
  →FreeHand VS CS5 では、最新版の Illustrator CS5 と比較しています。どうよ。どうよ。
  →FreeHand_入門編 Illustrator の作業が、FreeHand ではこんな感じ。全10編。
  →FreeHand_番外編 実践的に使える裏技テクニックほか、様々な情報を提供。諸々10数編。
  →すごいぞ FreeHand 編 今なお圧倒的な生産性の高さを誇る FreeHand の底力をご覧頂けます。
  →FreeHand VS Illustrator 初期バージョンから最新バージョンまで、ガチンコ比較してみました。

  → FreeHand インストール アクチベーションサーバ廃止に伴い、シリアルナンバーが公開されました。

  → FreeHand 関連 画像検索(一覧表示) 画像からリンクをたぐっていただけます。


***




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








 
nice!(0)  コメント(6)  トラックバック(1) 
共通テーマ:パソコン・インターネット

nice! 0

コメント 6

温故知新x燈台下暗

「美しい 表組」と画像検索していました。、
"タブ設定による表組の例”の図から、ページを開いてみたところ、
=====================
 すごいぞFreehand
---------------------------
FreeHand。何もかも懐かしい。。。
なに!?2014の記事!?64bit番?
と読ませていただいたら。。。10分後。
=====================
 『すごいぞ!FreeHand!』(見事に感染w)
---------------------------
最近は、企画書・マニュアル・WEBとか仕事は『全部』です。

いかに、長いものには巻かれろと、MSオフィス・Adobeに
渋々と追随してはきたものの、ワークフローは破綻状態。
MSのリボンw・Adobeはライセンスが7,000⇔1,000叩き売りとか
意味不明。脱MS・脱Adobeは死活です。

自分はStudioMX正規ユーザです(たしかWPD800番台)。
ってことは11.01でしょうか?倉庫を探してきます。

illustrator⇔inDesign(マニュアル・パンフ)
⇔FireWorks(Webカンプ)が、ワンストップで
現役実務で実用ですか?助かる。ものすごく助かる!

まぁ、xhtml・css周りはもともと変化が激しいですから、
出力後でも出力前(ActionScriptやプラグイン)で
どうにでもなります。

さよならAdobe・MS!
おかえりなさいMacromedia!

ありがとうございましたm(_ _)m

by 温故知新x燈台下暗 (2014-02-24 10:47) 

aspect

温故知新x燈台下暗様 コメントありがとうございます(^^)

開発終了から10年、確かに懐かしのアプリですね。
ところがどっこい、最新のイラレCC よりも、まだまだ優れているのが真実です。
なぜなら、最新の イラレCC の目指しているのが FreeHand そのものだから
なんですよ。
詳しくは当ブログ FreeHand VS Illustrator(2013-06-24の記事)をご覧
頂ければご理解頂けると思います。

お持ちの Studio MX には、ひょっとしたら FreeHand 10 が入っているかも
しれません。
(途中でバージョンが変わりました。10はバグが多いためお勧め出来ません)

また、FreeHand MX が入っていたとしても、最終版にアップデートした方が
良いですから当ブログ「緊急情報。FreeHand のアクチベーションについて」
(2013-03-03の記事)をご覧頂いて、アップデータでインストールしてください。
アップデータのシリアルナンバーは CS2 同様に公開されています。
アップデータは「試用版」リンクからダウンロード出来ます。


「ワンストップで現役実務で実用です!」
多人数で作業分担する制作フローなら、複数アプリを使うのが普通かもしれませんが、
FreeHand は、本当にワンストップでほとんどのデザイン業務を完結出来ます。
効率の高さにきっと驚かれることでしょう。


Illustrator の操作に馴れたユーザーには、最初は違和感を感じるかもしれませんが、
自然で合理的な操作感に、使えば使うほど納得される事になると思います。
まずそのハードルまでは頑張ってお付き合い下さい。
「FreeHand ユーザーのこだわり」(2011-10-30記事)もご覧下さい。
操作等に不明点があれば、メール頂ければお応え致します。

FreeHand を是非ものにしてください。

by aspect (2014-02-24 12:04) 

温故知新x燈台下暗

ASPECT様こんにちは。

FreehandMX2004におけるActionScriptやXtrasの情報って
どこかにまとまっておりますでしょうか?よろしくお願いいたします。

by 温故知新x燈台下暗 (2014-03-10 15:10) 

aspect

温故知新x燈台下暗 様
コメントとメールありがとうございます。
後ほどメールにて回答させていただきますが、取り急ぎ下記ご参照下さい。

ActionScript に関しては【FreeHand _FLASH編】
http://aspect.blog.so-net.ne.jp/2008-05-06

FreeHand の ActionScript は、Flash ActionScript(AS2)そのものなので、
Flash と組み合わせて本気で使いこなすためには AS2 記述の知識が必要になりますが、
FreeHand のナビゲーションパレットの設定だけでも、
簡単なものなら作成出来ると思います。(ページ間リンク、外部リンク程度ですが)
ちなみに、Illustrator の Action はバッチ処理ですから、全然意味合いの違うものですね。


Xtras に関しては、【FreeFreeHand】サイトの当該リンクをご案内します。
http://www.freehandforum.org/downloads-FreeHand-plugins-xtras.html

マルチページ向けの自動ノンブル Xtra や、パスの Smooth 化Xtra などは有効です。
VS Illustrator の記事中にも書いていますが、ADOBE との間で色々あったようで
MXバージョンでは Xtra の仕様が変わり、旧い Xtra は読込めなくなってしまいました。
かつては、Kai PowerTools なども FreeHand にバンドルされていたんですけどねぇ。

それでは、後ほどメール致します。

by aspect (2014-03-10 16:18) 

温故知新x燈台下暗

メールも返信を頂きました。
二度手間になってしましました。すみません。

ライブ感のある再利用可能なワークフロー(レスポンシブ?)を
構築したいです
=================================
ブレーンストーミング⇒アウトライン⇒XHTML構造
⇔イメージ・インターフェース⇔CMSドキュメント化etc
------------------------------------------
取りあえずXHTML+CSS3で書出しとか、
既存のサイトを再読み込み!とかしたいです。

試行錯誤してみます。
ありがとうございました。

by 温故知新x燈台下暗 (2014-03-11 10:41) 

aspect

ワンソースマルチパブリッシュを実現する FreeHand ドキュメントは、
ある意味レスポンシブなワークフローだと思います。
====================================
マルチページDTP ⇔ HTMLサイト構築 ⇔ Flash リッチコンテンツ
====================================
というような、ワンソースでの作り方が可能です。

英語版なら、これに加えてリンク付きのマルチページPDFも書き出し可能なのですが
日本語版はローカライズ未対応なので実現しませんでした。(無念)

記事中に書いたように、試作・アウトラインの段階から
動作シミュレーションしながら制作出来るというのも
「ライブ感ある」試行錯誤には最適かと思います。

CMS との相性などについては、当方まだ未確認なので、
面白い使い方など出来ましたら是非お教え下さい。
by aspect (2014-03-11 12:26) 

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 1