「不満」カテゴリーアーカイブ

花子は、Web制作に役立てるか(第2回)

前回の「第1回」の記事では、グラフィックソフトでウェブ対応の画像を作成するときに一般的に期待するところを説明しましたが、今回は花子にフォーカスを当てることにします。

しかしその前に、ピクセルというものについて、復習という意味で少し基礎知識を説明したいと思います。(すでに理解されている方は飛ばしてください・・・。)

■ピクセルとは?RGBとは?

ウェブ(俗に言う「ホームページ作成」)の世界において標準の表示単位とは、ピクセル(pixel)のことです。「ピクセル」という言葉になじみがない人はそれなりに存在すると思いますが、言い換えれば画面の小さい点の事です。どの画面もそうですが、顕微鏡か虫眼鏡で見てみると、その映像全体は無数の小さな点で構成されていることがわかります。

RGB twitter closeup
Courtesy of Alberto Roura via Creative Commons license

実は、ここでいう一つ一つの「ピクセル」は、3つの別々の色(赤・緑・青、つまり三原色の red, green, blueで「RGB」と呼ぶ)で構成されていることがこの画像でよくわかります。それぞれ赤・緑・青の光加減によって、何千万のうちのどれか1つだけの色を表示することができます。これはちょっとした目の錯覚でもありますが、通常の人間の視力ではその小さいRGBの点をあわせて1つの色として認識します。この合わさったものがピクセル(またはドット)と言います。 上記の説明からいうと、ホームページ用の素材(イラスト、動画など)を作成する時には、センチメートルとかインチではなく、ピクセルで考える必要があります。もちろん、印刷物を作るときは、cmやmmでいいのですが、紙と画面とは全く違う性質を持っているため、寸法単位も異なります。

■「ピクセル」の大きさは、どの画面でも一緒?

ここからが重要なポイントですが、画面でいう「ピクセル」は、すべての画面で一定の大きさという訳ではありません。

例えば、高さ100ピクセル×横幅100ピクセルの画像を画面に表示したところ、画面の解像度(dpiすなわち1インチあたりのドット数)と画面自体の大きさ(一般的なネットブックは8インチ~12インチ、ノート型パソコンは13インチ~17インチ、モニターは18インチ~30インチ)によって、ピクセルの実寸が変わります。(ウィキペディアの記事が参考になります。)

100x100px test

ちょっとした実験ですが、左の画像を定規で測ってみるとどういった寸法になるのでしょうか。

当方のパソコンの画面(17インチ)では、高さ18.5mm×幅18.5mmです。しかし、画面の解像度を低くしてみると、同じ画像が高さ21.5mm×幅21.5mmになり、大きく見えます。また20インチのモニターでは、幅が25.5mmです。ここでわかることは、「ピクセル」というものは、画面の仕様と解像度によって違って見えており、物理的にはあまり正確な寸法単位ではないことです。

つまり、ピクセル(画面仕様)と、mmまたはcm(印刷物仕様)というのは、まったく別物です。印刷物を作るには、ページのサイズ(例:A4,B5など)を意識してページレイアウトを組みます。またウェブページを作るときは画面の大きさ(ユーザによって千差万別)を想定して、それに見合ったサイズで画像を作成するのが一般的です。

■ピクセル・cm/mm、両方を扱えるグラフィックソフトとは?

第1回の記事でも説明しましたが、今の時代はグラフィックソフトで画像を作成するときに、ウェブ対応が期待されます。画面(パソコン、スマートホーン、iPadなどを含める)で見る場合が多くなってきているのではないかと思います。

その中、描画した画像を画面仕様(ピクセル単位)に出力することができるソフトは、ほとんどどのメーカーのものはできます(実力の差はありますが)。例えば、ドローソフトの内、花子、マイクロストビジオ、アドビイラストレーター、コーレルドロー、またOpenOfficeのDrawとInkscapeなど、GIF・JPEG・PNGといったウェブ仕様の画像の出力が可能であり、出力寸法をピクセルで指定することもできます。

しかし、問題は作成するときの寸法単位です。

最終的にピクセルで書き出したいのなら、ピクセルの単位で作業したい・・・と思います。

簡単に言うと、花子は、残念ながらスケールはピクセル単位で表示できません。そのため、作成途中で画像が実際に画面でどう表示されるのか、正確なピクセル単位で作業することに難があります。

でも、実は・・・。

■花子でピクセル単位の作業がしたい!ときに使う3つの小技

花子は主に簡易印刷物に対応したソフトですが、やはりドローの世界で作っておいて、アイコンやボタンなどの絵コンテンツも利用しながらウェブ用の素材を作ることには花子を使えばいろいろなメリットがあります。

ただ、花子はちょっとした工夫(小技)が必要です。

  1. 100%のズーム率での作業に徹底すること。花子は、表示を100%ズームにしておくと、図面を画面の解像度で表示されます。そのため、画像は見た目どおり、すでに画面表示仕様、つまりピクセル等倍となります。  

    もうひとつの実験ですが、花子の新規図面を作って(Ctrl+N)、上記のテスト画像(100px×100px)を読み込みましょう。→(ファイル―挿入読込―重ね合せ) そして、その同じ画像を別ウィンドウで、エクスプローラから開きます。

    100px comparison

    花子に挿入した画像と、元のPNGファイルは画面で見るサイズがぴったりと合っていることがわかります。(ただし、100%ズームのときのみ)

  2. カスタムのスケールを使用すること。花子の「スケール」(ルーラー)は、単位オプションが限られている。そのため、サイズが正確なピクセル単位の定規を花子の図面に挿入し、それを背景ページに挿入して作業をしておくとよいでしょう。

    (イメージを背景ページに入れる方法は少しわかりにくいので、下記の画像を 参照してください。)

    Insert in haikei

    一応、900px × 700pxの定規を作ってみました。ダウンロードして使用していただけます。

    なお、花子に画像を挿入するときに、「イメージ枠のサイズ指定」のダイアログが出ることがあります。必ず「キャンセル」をクリックして貼り付けましょう。  

    あと、この小技を使うときは花子自体のスケールを隠しておくとわかりやすい。 CTRL + (マイナス)、あるいはスケールの上に右クリックして「スケール」をクリックすれば非表示になります。もっとシンプルな画面で作業したいときは表示メニューの「マージンの表示」のチェックを外せば、こんな画面になります。

    Hanakoforweb screen sample

  3. スクリーンショットをとって花子以外でウェブ素材を個別に書き出すこと。これは少々厳しい条件のように聞こえるが、花子の画像出力機能には次の難があります。 

    ① 白いふち(余白)が一緒に出力されてしまい、図形のもともとのサイズは保持されない。
    ②「Web画像の切り出し」の機能を使って「ドロップシャドウ」などの図形効果が出力できない。
    ③ 透過色が設定できない。
    ④ JPEGの圧縮設定は4段階(最高・高・中・低)しかない。

    なお、これらの制限と不具合があっても、またプロ級の精度を求めないのなら、花子の標準搭載の画像出力機能を使ってもよいでしょう。

    スクリーンショットのツールは、Windows標準搭載のPrint Screen機能(解説)をつかってとることもできますし、市販の「SnagIt」のようなちょっとオシャレなツールでも花子の画面のスクリーンショットをとり、必要に応じて加工し、PNGやJPEGなどの形式で簡単に保存できます。 

    あと、花子の図面にある複数の画像を一気にウェブ仕様で個別のファイルに書き出したいときに、花子の図面のスクリーンショットを取ったあとに、結果ファイルをAdobe Fireworksでスライスをつくり出力してもよいでしょう。ただFireworksは現状価格で4万円もするため(動作もお値段も、やはり重い…)、もっとお手頃なAlternativeRealities社のWeb Slicer(USD$14.99、シェアウェア)でも十分に(そして安価に)対応できます。(なお、スライスの作成は本格的にウェブ制作に取り掛かりたい人のためのテーマなので、後日の記事で紹介したいと思います。)

何はともかく、花子(+市販ツール)はピクセル単位の画像作成には制限付きでそれなりに対応できることがわかりました。工夫(そして多少の苦労)が必要な部分、うまくやれば1~2万円くらいの範囲内で花子を中心としたWeb制作環境が揃えるのは、お財布にやさしい。

 

ペンツールと「交点で塗りつぶす」でLive Paintの効果を

写真などをなぞってイラストを作成するには、花子はすでに「プレーン」(レイヤー)をロックしてその上に軌跡を描いたり、また花子フォトレタッチで「トーンカーブ調整」で元写真をなぞりやすくするために全体のバランスを変えたりすることができる。手間がかかることも多いは、少し頭を捻れば何とかできる。

layer-lock-trace-example 元写真とトレースの結果を別々のプレーンにした作業例

hpt-tone-curve-example 花子フォトレタッチの「トーンカーブ調整」コマンドで写真の全体の色合いを白くした例

しかし、いったんなぞったものを花子で色塗りするには、必ずしもうまくいくとは限らない。

<課題①>線と線が交差せず、図形として認識されない

line-doesnt-touch 花子だけでなく、他のベクトル系ドローソフトは原則的に塗りつぶしできる図形として、切れ目のないひと続きのパス(線分)のみに限るのだ。つまり、どこかでパスが切れていたりすると、一つの図形として見なされなくなり、塗りつぶしできない。

左図のように、パスは閉じていないが、それがために塗りつぶしできないというわけではない。むしろこういった場合、線と線(パスとパス)が全く別だという問題があり、一続きの図形として認識されないので、塗りつぶしできないという課題がある。

Illustrator CS2以上の場合、ライブペイント(Live Paint)機能でこのような時でも、ギャップ(隙間)を無視して指定の領域を塗りつぶすことができる。しかし、花子を使っている時に、どうすれば良いのだろう。その答えは、下図のように、(1)線分の端点を最寄りの線分に重ねてから、(2)「図形―交点として塗りつぶす」というコマンドで対応するのだ。

参考「交点で塗りつぶす」の使用例は、この記事で説明している。

<課題②>「交点で塗りつぶす」でエラーが起きる

「図形」メニューの「交点で塗りつぶす」をクリックして図形の輪郭を指定し、最後にダブルクリックして指定の領域が図形化される。・・・これは、あくまで理想の動作だ。実は、この機能は花子12の時代から搭載されており、一向に改良されていないので、制限が多い。例えば、このエラー。

koutendenuritsubushi-error「図形データが大きすぎます」と出るが、これは花子の制限によるエラーだ。

この不可解なエラーを理解するために、正常動作の例を挙げよう。 二つの長方形を描いて(注:必ず塗り設定を「なし」にしておくこと)、交差する領域の輪郭を数回のクリックで指定して、最後にダブルクリック。また、一番最後に塗り設定をすれば、下記のような結果になる。

koutendenuritsubushi 

真ん中の青い領域が図形化された。これは、正常動作だ。

しかし、図形の頂点が多い、あるいは図形が複雑すぎると、花子はエラーを出してしまうようだ。例えば、右図のようなものでエラーが出る。

the-cat-red-blue青色の線で囲まれている領域を、図形として塗りつぶしたいが、エラーが出るので、実行できない。いったい、どうすれば・・・?

幸いなことに、花子2009から「図形加工」機能が加えられたので、少し手助けになりそうだ。

青色の線と、赤色の線を両方選択し、「図形加工」の「分割」を実行。そして、右クリックして「グループグループ解除」をする。

the-cat-headspot結果として、ほら!猫の額が塗りつぶされた。

結論として、 花子の「交点で塗りつぶす」機能は、頂点の少ない図形であれば、ライブペイントみたいなツールとして使える。しかし、上記のような、少しでも複雑な図形は、花子2009の図形加工機能を使ったほうが、賢明。

花子2008の要望を出しました。

数週間にわたって、暇を見つけて花子2008の動作と機能をレビューし、やっと要望書みたいなものができた。下記のURLにて公開したので、ご興味のある方、ぜひご一読を。

PDF要望シート

正式な要望として、本日、ジャストシステムの要望窓口に提出した。

昨年に出した要望、とても全部とは言えないけど、いくつか、ピックアップして花子2008に取り入れてくれたようだ。ジャストシステムはマイクロソフトと違って、まだ柔軟性(?)がありそうなので、とにかく聞いてくれる。

皆さんもぜひ、どんどんと、要望を出してください!

花子の透過画像の表示問題について

文句ばかりでは、良いモノが作れない。

そういう精神で、このブログで作品やテクニックの紹介に集中しており、かなり目につく限りでなければ、製品の使い勝手やトラブルについて、割と不満を控えているほうだと思う。(自分だけがそう思うかもしれないが・・・)

しかし、ツールに欠陥があれば、作品作りに支障がで、それを乗り越えるための時間は、もったいない。

今回の投稿は、特に花子2008から表に出てしまった、透過画像(PNGまたはGIF)の表示問題について、問題提起をし、当方の実験結果を皆さんのために発表したいと思う。また、同内容を、ジャストにも近々報告し、製品の改良をお願いする予定。

もうお気づきの方は居るかもしれないが、どういうトラブルかというと、花子または花子フォトレタッチ3から出力した透過PNG/GIFは、透過部分と表示部分の境界線(ふち)に、白いギザギザがはっきりと見えることだ。

これはなぜ問題かというと、下記の実験サンプルのように、色の付いた図形や背景の上に、その透過画像を置くときに、そのギザギザの輪郭が目立ち、ハロや、オーラみたいな、思わぬものに見えてしまう。

気になさらない方も居るかも分からない。しかし、長年、花子のようなドローソフトに慣れ親しんできた人々には、たまらないものだ。

「花子だけの問題じゃないのでは?」と言われる方に対して、逆に、これは花子特有の問題であることを、下記に証明したい。まず花子2008での結果を見せて、次にいくつかの有名なドローソフトやレタッチソフトの結果を紹介したいと思う。

 

 

 

 

 

 

 

以上、お分かりだったのだろうか。

せっかくいい機能(イメージ枠の透過部分の保持)が花子2008から搭載となったのに、このようなトラブルがあると、本当に残念に思うよね。値段なりの結果と言われると、痛々しく認めざるを得ないが、ジャストにはそれなりに開発力があるようで、これも、一つの課題として、乗り越えてほしい。

<2008年3月16日追記>
不意に「コメントを受け付けしない」設定にしてしまい、すみませんでした。直しました。コメントがあればどうぞ。
別ブログですが、きっちーさんからこれについてコメントがありましたらのでご覧ください。

http://uu-luckingkch.justblog.jp/ademo/2008/03/post-a455.html

PowerPoint 2007→花子2007、訳あってうまくいかず・・・。

英語のマイクロソフトPowerPointニュースグループでも議論になり始めているのだが、PowerPoint 2007からコピーしたテキストボックスは、ほかのアプリケーション(Word 2007でも!)に貼り付けるときに、テキストボックスとして存在しなくなる、という仕様の問題を抱えているようだ。これは、PowerPointと花子で双方のデータのやりとりを行う方にとっては、かなり痛いことになった。

まず実験をしてみた。

PowerPoint 2007でテキストボックスを作成し、適当に文字列を入力してクリップボードにコピーする。そして花子2007に貼り付けてみたところ、「貼付枠」として貼り付けられ、編集できない。そこで、ジャストシステムに問い合わせしたところ、PowerPoint 2007からWord 2007に同操作を行うときでさえこの結果になってしまうことが明らかとなり、トラブルの原因は花子2007ではなく、そもそもPowerPoint 2007の仕様が変わったため、どのソフトもPowerPoint 2007のテキストボックスをテキストボックスとして扱えなくなったことが判った。

つまり、PowerPoint 2007からのデータを花子2007に貼り付けたり読み込んだりする時に互換性がもううまく行かないのは、ジャストシステムに擦り付けてはならない問題だということが判った。PowerPoint 2007のテキスト描画エンジンは、今回のリリースでかなりの進化を遂げた反面、その代価として花子のような他のソフトとの互換性が大きく損なわれてしまったのだ。

ジャストシステムは花子2007のリリースで、OpenOfficeのオープンソースのアプリケーションとのデータのやりとりを初めて視野に入れた。今回のような、PowerPoint 2007の独自仕様がどういう結果をもたらしたかを見ると、ジャストのその決断は正しかったと思える。

Just Suite 2007、アンインストールが史上最悪?

三日前から、花子2007のカラーパレットがらみのトラブルがあって、「編集」のタブをクリックする度に、アプリケーションが必ずフリーズしてしまう、という問題が発生。

きょう、ジャストシステムのサポートセンターに電話してみたところ、結局原因がわからず、ありとあらゆる手順で診断して動作確認をする羽目になった。いろいろと試した結果、Just Suite 2007をすべてアンインストールするしか手がなくなってしまった。しかし、本製品のアンインストールには、大きな欠点がある。それは、各アプリケーションを個別にアンインストールせざるを得ない構造となっていることだ。

まだアンインストールの作業中だが、これをやって再インストールを行ったからと言って、花子2007がまた正常に動作するという保証がない。最悪なことに、一太郎、花子、三四郎、PDF Editor、ATOK、ShurikenとAgreeをすべて、別々にアンインストールしなければならない。アンインストール作業開始から、すでに1時間が経過。また一太郎、花子、三四郎、ATOKとPDF Editorの後に、それぞれ再起動しなければならず、大変、手間がかかる作業ばかりでなく、MS Officeと比べてこんな大変な目に遭わなきゃいかんのか、Just Suiteを使っている自分が馬鹿らしく感じ始めた。

ちなみに、花子2007のトラブルが起きたOSは、Windows VistaのHome Premiumだ。別のWindows 2000で花子2007を使用しているが、特に問題なく使っている。ジャストに電話したときに対応してくれたサポートの方は、「弊社では、Windows Vistaの動作検証を行いました」とのコメントだったが、「すべての機種で動作確認することはあいにくできません」といった回答だった。それは当然のことだとは思うが、やはりVistaでの動作確認は足りなかったのでは?と思わざるを得ない。

Just Suite 2007のインストールは、たださえ何十分も掛かったのに、アンインストールにはその倍掛かってしまうことには、どうも納得がいかない。このアンインストールが終わり、まず一太郎2007、花子2007とATOK 2007の再インストールに挑戦してみる。今度こそ、うまくいかなかったら、Just Suite 2007のVistaでの使用は残念ながらもう諦める。

言っておくが、ATOKと花子をはじめとするジャストシステムの製品はおおむね好きなのだけど、インストーラーくらいはしっかり開発してから出してほしい。だいたいJust Suite 2007は一ヶ月遅れで市場に出たことが、インストーラーのせいだったので、せめてそれくらいは・・・。