[0208] ImageStylerのHTML書き出し

投稿:  著者:  読了時間:22分(本文:約10,600文字)



■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
【日刊・デジタルクリエイターズ】 No.0208 1998/12/18発行
http://www.dgcr.com/      1998/04/13創刊
情報提供・投稿はこちらまで mailto:zacke@ppp.bekkoame.or.jp
登録・解除・変更・FAQはこちら http://www.dgcr.com/regist/index.htm
広告の御相談はこちらまで   mailto:sales@dgcr.com
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

---PR-----------------------------------------------------------------
       ついにインターネットとCD-ROMがドッキング!
インターネット対応CD-ROMシステム 「NetCD Ver.1.5J」リリース!
Flash SWFファイル・QuickTime・QuickTimeVR・GIF・JPEGに対応!
デジタルコンテンツ・インフォメーションに最適です!
販売 NetMedia,Inc. http://www4.osk.3web.ne.jp/~nxs/netmedia
------------------------------------------------------PR--------------

●ImageStylerのススメ No.3「ImageStylerのHTML書き出し」
 ゲスト:土井宏紀

●主要サイト情報
 Sun Microsystems/ Silicon Graphics/ Apple/ Real System/ Strata

●本日キャッチしたコンピュータニュース関連

●セミナー情報
 Windows NT [SOFTIMAGE] 無料体験セミナー開催!

●デジクリClassifieds
「パソコンスクール1時間無料受講券プレゼント」



ImageStylerのススメ No.3「ImageStylerのHTML書き出し」
ゲスト:土井宏紀
----------------------------------------------------------------------
#以下「HTML書き出し」はすべてAuto Layoutによる書き出しをさします。


今までにも述べてきたことですがImageStylerの操作のすべての基本はオブジェ
クトです。HTML書き出しにおいてもオブジェクトが基本単位となっています。

ImageStylerのtableでの出力を便宜的に -別の出力形態としてキャンバス全体
を一枚の画像にしたり、オブジェクトのある部分のみをトリミングして
Illustratorのような書き出しをすることもできますので、それと比較してスラ
イスという言葉で表現することもありますが、実体は少し違うものです。

ImageStylerは基本的にオブジェクトそれぞれを別々の画像にしてオブジェクト
の数だけの画像ファイルを書き出します。ただし、複数のオブジェクトが重な
る場合はまとめて最大領域を囲うような一枚の矩型の画像として書き出します
(下の例1を参照)。スペーサーとtdのwidthとheightで位置を設定することに
なっているので、オブジェクトが配置されていない部分は画像ではなくて空白
です。
これはスライスというよりはレイアウトですよね。

はじめてImageStylerをさわったときはこのレイアウト書き出しのシンプルさに
まずひかれるのではないでしょうか。実際このほうが後からの修正も楽です。

それに加えてImageStylerはスライスをすることもできます。それはrolloverを
設定したとき。ナビゲーションバーのような下地がある場合もJavaScriptアク
ションつきのオブジェクトが2つ以上あればスライスされます。これについては
下の例2を参照(ひとつだったら下地ごとロールオーバーしてしまいますが..)。

ImageStylerはレイアウトをしながら必要に応じてスライス(画像の分割~再構
成)も無駄なく自動でしてくれるのです。つまり、オブジェクトを好きなよう
に配置することが、そのままWebページのレイアウトをしていることになるわけ
です。


-----(等幅フォントでご覧ください)-----

例1:複数のオブジェクトが重なる場合

 ┌───────┐           ┏━━━━━━━┯━━┓
 │ OBJECT 1  │           ┃ OBJECT 1  │  ┃
 │  ┌────┴──┐   →    ┃  ┌────┴──┨
 │  │       │   →    ┃  │       ┃
 └──┤  OBJECT 2 │   →    ┠──┤  OBJECT 2 ┃
    │       │        ┃  │       ┃
    └───────┘        ┗━━┷━━━━━━━┛

この場合、リンクはイメージマップとして書き出されます。


例2:2つ以上JavaScriptアクション(ロールオーバー)を含む場合

 ┌───────────┐      ┏━━━━━━━━━━━┓
 │   OBJECT 1    │      ┃1           ┃
 │ ┌───────┐ │  →   ┣━┳━━━━━━━┳━┫
 │ │ rollover 1 │ │  →   ┃2 ┃rollover 1  ┃3 ┃
 │ └───────┘ │      ┣━┻━━━━━━━┻━┫
 │           │      ┃4           ┃
 │ ┌───────┐ │  →   ┣━┳━━━━━━━┳━┫
 │ │ rollover 2 │ │  →   ┃5 ┃rollover 2  ┃6 ┃
 │ └───────┘ │      ┣━┻━━━━━━━┻━┫
 │           │      ┃7           ┃
 └───────────┘      ┗━━━━━━━━━━━┛

この場合は1-7の画像とrollover部分を構成したtableをネストして書き出します。

----------------------------------------


さて、ここまででImageStylerのHTML書き出しについておおざっぱに書きましたが、
だいたいのイメージは湧いたでしょうか。

ただ、実際のところレイアウトソフトのように使おうとしてまずネックになる
のが「テキストエリア」。せっかくレイアウトをHTMLに書き出せるのだからテ
キストも入力できたら...と考えるのは自然だと思います。でも
ImageStylerはあくまでグラフィックソフト。HTMLテキストをそのまま表示させ
ることはできないのが現状です。

これ、なんとかならないかなぁ、ということで編み出したのが最後に紹介する
方法。かなりの力ワザなのですが(汗)、この方法ならある程度のテキストの
シミュレーションはImageStylerキャンバス上でできてしまいます。書き出し後
は若干のHTML修正だけですみますし、あとあとレイアウトを変えたくなっても
元ファイルを保存していればImageStylerで修正できるという優れモノ!

ImageStylerはテキストオブジェクトをHTML書き出したらその画像のalt属性に
入力したテキストを書き込みます。これを逆に考えると、書き出されたHTMLの
うちaltの属性値をのこしてimgタグを消去してしまえばよいということになり
ます。具体的にその方法をかいてみました。

1. テキストエリアにしたい部分にダミーの矩型オブジェクトを配置する。

 このときのオブジェクトの色などはなんでもいいです。WebパレットでFile
Nameを"dammy"などとしておくと書き出し後に便利でしょう。少し大きめにつく
るのがコツです。これがテキストエリア(tableのセル)のサイズになります。
テキスト用の場所取りをしておく訳です。

2. 作成したオブジェクトの上にテキストオブジェクトを配置する。

 オブジェクトからはみださないように適当に改行するなどしてサイズをあわ
せるようにします。使うフォントおよびサイズで入力しておきます。あとでス
タイルシートを使わないなら行間は100、トラッキングを0にするのを忘れずに。
 ただし、テキストオブジェクトが2つ以上あるとより前面の入力テキストのみ
しかaltに書き出されませんので注意してください。あくまで仮のテキストなの
でひとつのオブジェクトにすべて書き込んでしまいましょう。

3. Auto Layoutで書き出してimgタグのalt属性テキスト以外を削除

 画像も削除してかまいません。tdのwidthはスペーサーで固定されていますの
でキャンバス上とほぼ同じように表示されるはずです。


ImageStylerは新しいWeb用最終整形(レイアウト)ソフトです。
素材を読み込んで整形、テキストを(仮にですが)打ちこんで、レイアウトを
調整、最終出力するというワークフローはDTPまでも連想させます。Web用とい
う点からいえばGoLiveみたいな発想ですね。
これでグリッド表示機能がついてくれたらすばらしいのですけど...。

HTMLエディタと画像処理ソフトとが統合される日は(それがよいことなのかど
うかは別として)そう遠くないのかもしれません。ImageStylerをみているとそ
んな気がします。


ImageStyler(発売間近!) TRYOUT ダウンロード:
http://www.adobe.co.jp/product/imagestyler/demodnld.html


【どい ひろのり】 mailto:hironori_doi@geocities.co.jp
ImageStyler担当デジクリワーカー。Illustratorも大好き。最近はPainterと
DHTMLにはまっています。クリスマスソングといえばBonnie Pinkの「オレン
ジ」ははずせないBPフリーク。今年のクリスマス、第一希望はルミナリエ!!

______________________________________________________________________
■主要サイト情報
----------------------------------------------------------------------
Sun Microsystems/ Silicon Graphics/ Apple/ Real System/ Strata
----------------------------------------------------------------------
▽Sun Microsystems
~~~~~~~~~~~~~~~~~~
韓国最大の新聞社・朝鮮日報が21世紀のシステム構築に向けSunを選択。Sunの
スケーラブルで強力なエンタープライズ・クラスタ・ソリューションを採用す
る大手新聞社がさらに増加
http://www.sun.co.jp/Press/flash/1998/flash_news_12.html#28

Sun、Solaris用に最適化したベータ版Java 2プラットフォームをリリース、
ISVのエン タープライズ・クラスJavaアプリケーションを支援
http://www.sun.co.jp/Press/flash/1998/flash_news_12.html#27

Java 3D APIがビジネス・アプリケーションで3Dグラフィックスを実現
http://www.sun.co.jp/Press/flash/1998/flash_news_12.html#26

Sun、Javaプラットフォーム次期バージョンを発表
http://www.sun.co.jp/Press/flash/1998/flash_news_12.html#25

Sun、Java 2プラットフォームの標準エクステンションを発表
http://www.sun.co.jp/Press/flash/1998/flash_news_12.html#24

Sun、Java 2プラットフォーム対応Javaソフトウェア製品のロードマップを公開
http://www.sun.co.jp/Press/flash/1998/flash_news_12.html#23

Sun、Java 2プラットフォームの新ライセンス方式を発表
http://www.sun.co.jp/Press/flash/1998/flash_news_12.html#22

Sun、北米にAuthorized Academic Java Campusプログラムを導入。米国とカナ
ダの大学が初参加
http://www.sun.co.jp/Press/flash/1998/flash_news_12.html#21

SunがLinuxをUltraSPARCシステムに導入
http://www.sun.co.jp/Press/flash/1998/flash_news_12.html#20

Sunが学内管理用ERPで市場をリード。産業ソリューション・プロバイダと協力
し、各国教育機関の教務管理ニーズに対応
http://www.sun.co.jp/Press/flash/1998/flash_news_12.html#19

JMAPI新バージョン開発へ
Javaベース管理サービスを求める業界ニーズに対応
http://www.sun.co.jp/Press/flash/1998/flash_news_12.html#181

SunのJava技術が教育市場で高い評価を獲得
http://www.sun.co.jp/Press/flash/1998/flash_news_12.html#17

Sun、PersonalJavaとEmbeddedJava環境に向けた新ライセンス方式を発表
http://www.sun.co.jp/Press/flash/1998/flash_news_12.html#16

J.D. EdwardsとSunが提携、ネットワーク企業のニーズにこたえるダイナミッ
クなERP ソリューションを推進
http://www.sun.co.jp/Press/flash/1998/flash_news_12.html#15

SunのJavaStationが強力な食品流通ソリューションをバックアップ。
AmeriServeとSun、世界の人気レストランに先進的なJavaベース・ソリューシ
ョンを共同提供
http://www.sun.co.jp/Press/flash/1998/flash_news_12.html#14

エンタープライズJava技術の粋を集めたJava Business Expoを開催
Sun、次世代Java 2プラットフォームとCommunity Source Licenseを発表
http://www.sun.co.jp/Press/flash/1998/flash_news_12.html#13

Sun、Enterprise JavaBeans技術ロードマップを発表
http://www.sun.co.jp/Press/flash/1998/flash_news_12.html#12

新年にはさらに接続性が向上、SunがJavaPC 1.1ソフトウェアを出荷
http://www.sun.co.jp/Press/flash/1998/flash_news_12.html#11

VeonとSun、広帯域ネットワークに向け高度な双方向ビデオ・ソリューション
を提供高速インターネットを通じた娯楽、電子商取引、広告等のサービスに
HyperVideoの普及 を促進
http://www.sun.co.jp/Press/flash/1998/flash_news_12.html#10

Sun、バンガロールにエンジニアリング・センターを設立
http://www.sun.co.jp/Press/flash/1998/flash_news_12.html#9

Sunのチーフ・サイエンティストにBill Joy氏
http://www.sun.co.jp/Press/flash/1998/flash_news_12.html#8

SunのStrategic Sales担当バイスプレジデントにJoseph Roebuck氏、Computer
Systems Worldwide Sales担当バイスプレジデントにFrank Pinto氏
http://www.sun.co.jp/Press/flash/1998/flash_news_12.html#7

※上記サンのプレス・リリースは、すべて米国発表の邦訳版
 原文は http://www.sun.com/smi/Press/

▽Silicon Graphics
~~~~~~~~~~~~~~~~~~
1600SW フラットパネル・モニターと OpenGL Volumizer が 米Computer
Graphics World Magazine 誌の イノベーション賞を受賞
http://www.sgi.com/newsroom/press_releases/1998/december/cgw-awards.html

▼Apple
~~~~~~~
「Apple DVD Software Update 1.1」を公開した。
http://til.info.apple.com/swupdates.nsf/artnum/n11176

Apple Developer Connection年末年始休業のお知らせ。
http://developer.apple.co.jp/programs/holidays.html

▼Real System
~~~~~~~~~~~~~
アメリカのイラク攻撃の「ライブ」ページを設置。
http://www.real.com/realguide/special/iraq/

「Real Life」コンテストの勝者を発表
http://www.real.com/reallife/

月刊「RealNews」を,12月20日に創刊するとアナウンス。
http://www.jp.real.com/mailinglist/

▼Strata
~~~~~~~~
STRATA VIDEOShop 4.5は来年1月、小売価格:28,000円
http://www.strata3d.co.jp/

【▽担当 山口 壮/ えむ】 mailto:PXX06120@nifty.ne.jp
http://member.nifty.ne.jp/yamaguchi/

【▼担当 love miku】 mailto:ki-masui@jade.dti.ne.jp
http://www.jade.dti.ne.jp/~ki-masui/
来年度、100万円までパソコン等の情報通信機器を購入した場合、その全額を費
用として計上できる税制が適用されることになった。
郵政省のSOHO、電子商取引支援税制の創設
http://www.mpt.go.jp/pressrelease/japanese/new/981216j501.html

______________________________________________________________________
■本日キャッチしたコンピュータニュース関連
----------------------------------------------------------------------
【ソフト関連】
●Mac用 URL Manager Pro 2.5
英語版
http://www.url-manager.com/
日本語版
http://www.bridge1.com/
*Bookmark管理

●Mac用 Jterm3モデムデータ(98.12.15版)
http://www.iijnet.or.jp/matsumoto/
*まつもと、通信ソフト Jterm3

●Mac/win用 NEC、AtermIT75シリーズ,IT60/D,RS10用ファームウェア等アップ
デート
http://aterm.cplaza.ne.jp/verup/
*「IT75シリーズ用ファームウェア Ver1.01」「同らくらくユーティリティ
(Win95/Win98/NT4.0版)Ver1.00」
「IT60/D用ファームウェア Ver1.01」「同USBドライバアップデートVer1.10」
「IT60らくらくユーティリティ(Win95/Win98/NT4.0版)Ver1.00」
「RS10用 ファームウェア Ver1.02」「同らくらくバージョンアップ Ver1.01
(Win)」「同らくらくバージョンアップ Ver1.00(Mac)」「同らくらくウィザード
(Win95/Win98版)Ver1.00」

●Win用 EmTerm 95 v3.33
http://www.nifty.ne.jp/forum/femsoft/
*通信ソフト

●Win用 AtFAX 1.5
http://www.mediaten.com/
*ファックス送信ソフト

【強力!べんりDesse -Mac/Win最新ソフト情報と役立つリンク集-】
mailto:joy@osk.3web.ne.jp
http://www2.osk.3web.ne.jp/~joy/benridesse/

みなさま、御無沙汰しております。
コンピュータの人為的不調によりずっと不通となっていました。
本当にご迷惑お掛けしましたm(_ _)m。

これからも少しずつではありますが、復旧しながら情報を提供させていただき
ます。メールを頂いた方、お返事が遅れてたいへん申し訳ありませんでした。
よろしくお願いいたします。

______________________________________________________________________
■セミナー情報
----------------------------------------------------------------------
Windows NT [SOFTIMAGE] 無料体験セミナー開催!
----------------------------------------------------------------------
以下は主催者案内より抜粋

ドリームキャストの登場で、ますます熱くなっているゲーム業界。ゲーム制作
会社のほとんどが導入している、キャラクター制作に強いハイエンド映像制作
ソフトが、このSOFTIMAGEになります。
デジタルハリウッドでは、SOFTIMAGEを使った魅力的な3DCG映像制作のノウハウ
を学んでいただく、6ヶ月のコースを開講しています。

12月25日のセミナーでは、学校紹介・コース紹介を含め、SOFTIMAGEの体験実習
を特別に無料で行います。実習内容は、クリスマスバージョンで企画しており
ますので、ご期待下さい!

○日時 :12月25日(金)19:00~21:30
○定員 :25名
○会場 :デジタルハリウッド東京校
千代田区神田駿河台2-3 DH2001Bldg
(JR御茶ノ水駅徒歩2分
※総合受付けにお越しください、スタッフが御案内させていただきます。
○参加費 :無料
○お申込方法:事前にメール・電話にてお申し込みください。
・Eメール/dh@dhw.co.jp
・電話/ 03-5281-9221
※タイトルを「SOFTIMAGE体験DC」としてください。
※住所/氏名/年齢/職業/メールアドレス/電話番号をご記載ください。

______________________________________________________________________
■デジクリClassifieds
----------------------------------------------------------------------
●パソコンスクール1時間無料受講券プレゼント

大阪なんばのアプレットパソコンスクールより、デジクリ読者15名に1時間
無料受講券をプレゼントいたします。当スクールは、ビジネスアプリからネッ
トワークまで幅広い勉強できます。もちろん、Win>Macのデータ変換とかわから
ないところだけの持ち込み授業もできます。
ご希望の勉強内容・住所・電話番号・氏名等をご記入の上下記メールアドレス
にてご応募ください。なお、応募多数の際は抽選ニさせていただきます。

応募:(有)アプレット(アプレットパソコンスクール)
   http://www.applet.co.jp/
   担当 山口(tsuyoshi@applet.co.jp)

----------------------------------------------------------------------
「売ります、買います、あげます、ください」などのクリエイターにとって有
益な情報をお待ちしております。zacke@ppp.bekkoame.or.jpまで。
不要になったものが、案外ほかの方には有益なものかもしれませんっ!
企業の方からのモニター情報、プレゼントもお待ちしております。自社製品な
どをアピールしてくださいませ!

なお、このコーナーでの取り引きは個々の読者と直接コンタクトをお取りくだ
さい。編集部ではトラブルの責任を負いません。

______________________________________________________________________
●発行が遅れまして、申し訳ありません。ネットが繋がらなくて、送信できま
せんでした。<濱村>

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
発行   デジタルクリエイターズ
     <http://www.dgcr.com/>

編集長  森川眞行 
     柴田忠男 
     神田敏晶 

情報提供・投稿・プレスリリース・記事・コラムはこちらまで
 担当:濱村和恵
登録・解除・変更・FAQはこちら http://www.dgcr.com/regist/index.htm
広告の御相談はこちらまで   mailto:sales@dgcr.com

★等幅フォントでご覧ください。
★【日刊・デジタルクリエイターズ】は無料です。
 お友達にも是非お奨め下さい (^_^)

★日刊デジクリは、まぐまぐ<http://rap.tegami.com/mag2/>、
Macky!<http://macky.nifty.ne.jp/>で配信しています。

Copyright(C), 1998 デジタルクリエイターズ
許可無く転載することを禁じます。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■