画像加工、地図とカウンタ
画像加工、地図とカウンタ等、知っておけば便利な事項についてまとめました。
画像加工
ビルダー上で、ホームページに使う画像の編集作業は可能ですが、画像編集専用ソフトがあるとさらに多くの編集と加工ができて便利です。極端なことをいうと「表現の幅」が広がります。
「JTrim」は、高機能で使いやすいレタッチソフトです。 手持ちの画像ファイルを、簡単な操作で加工 / 修正できます。フリーウエアです。自己責任でインストールしてお使いください。
画像加工の必要性
デジカメはメガピクセル機の時代となり、画質を優先するとファイル容量が10MBを超えます。大きなサイズの画像を貼付けしたホームページは,、読み込みに時間がかかり、見てくれる人にストレスを与えます。またサイト容量が大きいと、サイト編集時に動作が重くなったり、アップロードに時間がかかります。50MB以内でページ数は100ページ以内のサイト構成が推奨されている所以です。
いっぽう、多くのホームページ公開サービスには、容量に制限があります。プロバイダによっては100MBを超える容量を無料で提供したり、料金を追加すれば容量を増やせたりできるようですが、一般的には5MB～５0MBが多いです。無用に大きなサイトは、コンテンツに、しわ寄せされます。
ホームページはモニターの解像度で横幅(width)が制限されます。今日ではXGA(1024x768)以上が主流です。ホームページの横幅は、横スクロールバーが出ない800～950ピクセルが適当と考えられます。サイドバーがあればそのホームページで使用する写真サイズは640x480ピクセル以内がいいでしょう。効果的なトリミングや、圧縮（リサイズ）をしてファイル容量を減らしましょう。
※５KMacが出たようにモニタは毎年進歩し、スタンダードな横幅も時代と共に変化していきます
ビルダーで写真や画像を編集する
ビルダーの編集画面に挿入機能で写真を画像を取り込みます。取り込んだ画像上で右クリック（ショートカットメニュー）し、[デジカメ写真の編集]や[画像を編集]を選択すると各種の編集作業が行えます。ここできるのは、[画像の大きさの調整」、「画像の編集」、「画像の効果」、「画像の切り取り」、画像の調整等」です。
◎画像の大きさ調整
左の[ナビメニュー]から[写真や画像の挿入]→[デジカメ写真]を選択もしくはメニューバーから[写真の挿入]を行うと、写真挿入ウイザードが表示されます。デジカメ写真の大きさを調整して取り込めます。サイズ指定は実サイズ、大（横幅を480px）、中（横幅を320px）、小（横幅を160px） 、任意から選択可能です。 写真を主に扱うサイトなら「大」以上を、後は用途に応じてでしょうか？
◎画像を編集
デジカメ写真を挿入しても、カメラによる画像の構図方法に満足できない場合は不要部分をトリミングして構図を改善したり、特定の要素を大きく見せることができます。ここでは「画像の編集」ダイアログから「切り抜き」をしてみましょう。
取り込んだ画像上で右クリック（ショートカットメニュー）し、[画像を編集]を選択、「画像の編集」ダイアログを表示させます。「切り抜き」を実行します。同様に取り込んだ写真や画像を選択状態にすると、かんたんナビバー（下）から［画像の調整］ボタン→［画像の編集］を選択しても同様です。
JTrimで写真（画像）を編集する
かんたんな画像編集はビルダーでも可能ですが、画像編集ソフトを使うと、画像の編集や効果を加える等の複数の作業が一度にできます。JTrim(ジェイトリム)はデジカメ写真を手軽に編集できるフォトレタッチソフトです。画像のサイズ変更や切り抜きといった基本的な編集から、合成などの複雑な加工まで、かんたんな操作でできます。
※事前に写真や画像を準備しておくメリットは大きいと考えています
作者様のサイト（WoodyBellJTrim）からプログラムファイルをダウンロードできます。なにができるのか？は、画像加工支援サイト「Enjoy JTrim 」を見てください。驚くほど多機能です。
◎切り抜き
デジカメ写真の不要部分をトリミングすると構図を改善したり、シーンの特定要素を意図的に拡大して見せることができます。[メニューバー」→[イメージ]→[切り抜き]をクリックします。慣れてくれば、座標指定切り抜きと併用すると便利です。
座標指定切り取りの座標１は左上の座標（「ｘ：」は左からの、「ｙ：」上からのそれぞれの距離）を、座標２は右下の座標（同様です）を表します。例えば【座標1】x：0、y：0 /座標2はx：400、y：300 と入力すれば、縦横比が「４：３」の選択枠が作れます。。そのままの縦横比で選択枠を移動したり、縦横比固定のまま、選択枠の拡大・縮小できます。
◎リサイズ
画像サイズを用途に合わせ、縮小します。 [メニューバー]→[イメージ]→[リサイズ]をクリックします。「サイズ」か、「比率」を指定して実行します。縦横の比率の変更も可能です。写真をサムネイル表示し、選択すると別枠で写真が開くようにすると、かなり大きな写真が使用できます。
◎ イラストや写真など、画像の好きな部分を透明にして合成する
JTrimはGIF(PIG)画像の単一色またはそれに極めて近い色を対象に透明化ができます。JPEGやBMPでは透過の指定できないので、GIFやPNG形式で保存し直します。メニューバーから、[イメージ]→[]透過色設定で透 過したい色をスポイトでとります。同じくイメージメニュー→「透過状態を表示」設定にすると透過部分が市松模様で表示されます。
秋の青空の写真は同じような青色に見えても微妙に色合いが違います。同じ色で塗りつぶすといった、事前の背景処理をするときれいに透過処理ができます。
※JTrimの塗りつぶしは、ダイヤログから許容範囲や不透明度を指定して塗りつぶしできます
ホームページで使われる画像形式は、「JPEG・GIF・PNG」の3形式他があります。使い分けます。
-
JPEG:24ビット（1670万色）まで扱かえる圧縮画像形式で色調変化に対応できる。写真など
-
GIF:8ビット（256色）までの色を扱かえる圧縮画像形式で透過画像やアニメーションに利用
-
PNG:フルカラーと8bit対応の特許フリーの画像形式で透過色を指定可。画質を落とせない時
JTrimでは、透過GIF(PNG)の「合成貼り付け」できないので ペイント上で貼り付けてください。 ペイントで背景を透明にする方法については、121wareのQ&A番号：013731 をごらんください。
※イラストはかわいいフリー素材集「いらすとや」からダウンロードさせていただきました
-
背景となる画像（下ではお年寄りの食事風景）画像）をペイントで開いておきます。
-
JTrimで透過した画像（下では時計画像）を開き、メニューバーの[編集]→[コピー]を選択
-
ペイントの「ホーム」タブから、「クリップボード」グループの[貼り付け]をクリックします。透過画像が貼り付けます。張り付いた画像（時計）の大きさと位置を調整します。
-
ペイントの「選択」の「▼」をクリックして、表示された一覧から「透明の選択」をクリックすると選択した範囲の背景が透明になり、下側の写真が透けて表示されます。
◎画像の連結と合成貼り付け
複数の写真を、1つのファイルにまとめることを、Jtrimでは画像連結と言います。オークションサイトなど、商品紹介画像枚数が制限（三枚か？）されている場合は、有効な表現方法です。メニューバーの、[編集]→[連結]を選択すると連結の詳細設定ウインドウが表れます。下図のように田型に４枚画像を合成する場合、[連結]は連結 方向は「上」、「下」、「右」、｢左 」なので最後の画像は連結できません。最後は[合成貼り付け]します。画像間のスペース量を指定してデザインを工夫できます。
◎画像に文字を入れてみよう
画像や無地のバナーに文字を入れてみましょう。ポスターやチラシ作りにも文字入れは有効です。Jtrimを使用すると文字色、背景色、枠線色、フォントなどを自由に設定して、写真や画像の好きな場所に挿入することができます。文字入れはペイントでも可能ですが、Jtrimの方がきめ細いです。
メニューバーの、[編集]→[連結]を選択し、文字入れダイヤログを表示させます。多くの場合、「不透明率度」は右側（100）で使用だと思いますが、20～25程度にするとウオーターマーク（すかし）になり、「不透明率度」が左側（0）に近づくほど 文字が見えなくなります。文字入れの際に「アンチエイリアス」にチェックが入っていると、 スムーズな表現と言うより、文字が滲んでしまうときがあります。そんなときは、文字入れダイヤログの下にある「アンチエイリアス」のチェックを外してみましょう。
◎モザイクを入れてみよう
ネット社会では個人情報の保護に留意する必要があります。WEB上、どうしても隠さないといけない部分はモザイク加工します。顔とかナンバープレイトとか、個人を特定できないようにしましょう。
顔の部分を左クリックで矩形選択します。 メニューバーの、[編集]→[連結]を選択し、文字入れダイヤログを表示します。モザイクの大きさを指定できます。 部分選択をしないと画像全体にモザイクが付されます。
地図を貼り付けるには
お店や会社の場所を載せるときに住所と一緒に地図を載せておくと親切です。ビルダーのナビメニューから、「Googleマップ」と「Yahoo!ロコ地図」を選択すると、挿入ダイアログに従って簡単にホームページに挿入できます。個人的にはロコ地図が好きですが、Yafoo!の場合、アプリケーションIDを取得する必要があり、個人のホームページではまだしも会社や学校で使うのは躊躇します。
Googleマップ/お台場
Yahoo!ロコ地図/お台場（スクリーンショット）
※１つのページに複数の地図は挿入できません
カウンタの設置
Web ページが参照された回数を保存しておいて、自動的に増加させるプログラムに「アクセス・カウンタ」があります。「アクセス・カウンタ」は一般に「Perl」「PHP」「Java」と呼ばれるプログラム言語で作成されており、プログラムの中でも難しいもののひとつとされています。
一般的には無料のレンタルサービスで提供されている「アクセス・カウンタ」を利用します。タグを貼るだけなので簡単に設置できます。多くの方がサービスを提供されていますが、登録不要のカウンタは突然サービスの提供が止まることもあります。デザインとともに利用規約を読んで検討が必要です。利用者登録が可能なら、大手のカウンタサービスが利用できます。