ピヨピヨのホームページはこのようにつくっている！

製作し使用しているソフト
Ａｄｏｂｅ　ＧｏＬｉｖｅ６．０　（アドビゴーライブ）ホームページをつくるソフト
Ａｄｏｂｅ　ＬｉｖｅＭｏｔｈｉｏｎ２．０　（アドビライブモーション）ＳＷＦムービーを製作　トップの画面のバスの窓、開く部分のうごくどうさを作成。はっきり言って機能が難しい。参考書も多分出版されているもの全部あるが、それをマスターしても使用方法はまだある。
Ａｄｏｂｅ　Ｐｈｏｔｏｓｈｏｐ　Ｅｌｅｍｅｎｔｓ２．０　（アドビフォトショップエレメンツ）以前は１を使用　アップした。これで全ての画像の加工をします。ポスターや葉書もこれで作るよ。
ＯｆｆｉｃｅＸＰ　Ｗｏｒｄ　会報はこれでつくります。そのまま文章をコピーすることもしばしば。
パソコン　ヨドバシカメラのオリジナル・i-Friend 52YB　形はかわいいし、マルチカードリーダーで、いろいろな種類のメモリが入るので便利。ＴＶが見れるのでパソコンをしながらちょい見ができるからこれまた便利。
ＯＳ　WindowsXP　98ＳＥを使っていたから、はじめＸＰはどこに何があるかわからず大変だった。でも、マイピクチャの機能など、使ってみると便利は便利。でも、いまだにシステムはどこ？プリンタはどこ？なんて探すことも。
ＣＰＵ　Ｐｅｎｔｉｕｍ4　セレロンを使っていた後だとこの処理速度の速いこと。手放せないっす。
デジカメ　Ｃａｎｏｎ　ＰｏｗｅｒＳｈｏｔＡ10　おじいちゃん私物を私のものにしてしまった。すごーくきれいには取れないけど、パソコンに使用する分には充分。
上記のもので製作しています。

どんなデザインにするか

一番時間がかかった部分です。２週間くらい考えてました。

	スケッチブックにいろいろ書く。 イメージはクレヨン画 背景はクレヨンで動物を書いた背景を作ろうとした。スキャナーで読み込ませるとやたらに重い（画像の重さが）背景になるので断念。 ＴＯＰの画面はバスからみんながのぞいている姿を考える。 ＴＯＰは伝言板とみんながのる画面を載せようと思うが、そうすると全体のバランスが悪くなるし、印刷したときＡ４におさまらなければいけないのでバス１本で考える。
	ＴＯＹ　ＳＴＯＲＹのウッディ。息子がはまり１日に何度も見るので私の頭もＴＯＹ　ＳＴＯＲＹになってきた・・。 めちゃめちゃクレヨンは息子。私が書くとまねしたがる。
	ついにイメージが出来上がり。このときはまだ、ドアが開く設定を考えていませんでした。 伝言板は車の下の予定でした。

イメージがクレヨンだったのでスキャナーで読み込ませ上の画像をそのまま使おうとしてもスキャナーが鮮明すぎて、グロくなるので、画像を作ることに決定。

デザインを考える２

	これが、上の絵をパソコンで作ったもの。 車の光や車体、文字の影は、フォトショップＥＬの機能を利用。ボタンひとつで影がつく優れもの。 これに窓を６つ、つけたけどこれがＴＯＰの画面だとどうも間が抜けていて、とりあえずピヨピヨの文字を小さくする。 もっと間が抜けてしまい私は気力が無くなる。
	気力がなくなったときは他人のホームページを見るにつきる。 とはいえ日本のホームページはアニメがすごかったりしない限りは、似たり寄ったり。または、ホームページ製作ソフトで、格好よく作っている。同じスタイルのホームページ見るとがっくり・・ ＧｏＬｉｖｅには簡易的にできる機能はないし、他人が作ったフリー素材を使いすぎるのもサークルのホームページだからオリジナリティーが無い。と勝手に思い込んでいるので 海外のホームページを見るのだ・・。ヤフーキッズの海外版でkids baby game　toyなど英語がわからないが適当に入れてリンクしまくると日本とは違った感じのページがたくさん見られる。しかも表の使い方など日本ではあまり使用されていない製作の仕方がわかり、勉強にもなる。
文字が上にうごくＪＡＶＡを伝言板にする。	今回はとあるホームページで文字が上にスクロールするＪＡＶＡを発見。 日本のＪＡＶＡを教えてくれるサイトで調べたけど、なーんか違うのばかり。そこでソースを勝手にいただいてしまいました。（ごめんなさい） ソースを盗むなんて犯罪？と思いましたが、みんなやっているし、これも検索で調べたけど法的に問題ないそうですのでまあいいか。と。
残るは大きな画像。	バスのどこに大きな画像を入れればいいのかなー。と思い、ライブモーションの機能で以前にクリックしたら他の画像の扉が開き、イラストが見えるというのを勉強したのを思い出す。 でもこのとき使用した画像は１つで今回のように１０近くの種類の画像を開くようにすればいいのか全くわからない。でもこれできまり。

本格的に製作

ホームページいっぱいにひろがる車の画像。結構重いんだよね。そこでばらしました。きれいにカットします。

• バスの天井部分
• 窓と開く扉
• バスの後部部分
• バスのそこの部分

これを表に埋めます。表のセルは右に３、縦３で、１行目と３行目は横のセル同士を結合。セルの高さ間隔は0に。

問題は２列目。真ん中に文字が動くＪＡＶＡを入れるとバスの後部が飛び出したり、バランスが悪くなり、窓の部分やバスの後部を徐々にカットする、やたらな手間がかかりましたが最後はすっきりおさまるので、これで決定に。ＪＡＶＡのソースでサイズを変えると動作がおかしくなる。これにはすごく悩んだ。

このときはまだ、形ができているだけで、、窓の部分、空などはできていません。

難しかったＪＡＶＡ

ＪＡＶＡをいただいたものの、ソースが全部外国語で（当たり前だが）これのどの部分が不要か、必要か分ける作業に１週間もかかってしまいました。今でも不要な箇所があるかもしれません。プログラムできる人が見れば笑ってしまうかも？製作者もわかるかも知れません。すみません。
表示されている文字部分の入力・画像を入れたり、リンクをはったり、無事動いたときは超感動。

窓の部分の製作　（専門的に記載しますのでまともに読まなくてＯＫです）
↓次へ飛ぶ　（ライブモーションできる人はぜひ試してみてね）

天井とバスの底部分

作ってあまりにもあっさりしすぎているので空と地面を付け加えました。バスもグレーで少し汚してみました。

天井はＧＩＦバス底はＪＰＧで・・・（これは画像の種類のお話）
天井　ＧＩＦは色数が設定できます。色数を制限することにより画像が軽くなるから。
バスの底　色を減らすと全然違うイラストになり、かといって色数を多くするとＧＩＦのほうが重くなるからＪＰＥＧで。
でも違いははっきりわかります。

ＧＩＦを使った天井　空がだんだん白くなるときに水色が１３色とはっきり白く変わっている。
ＪＰＧを使った底　　緑がだんだん白くなるとき滑らかなに白く変わっている。

これがＧＩＦとＪＰＥＧの差です。見る人全てがＡＤＳＬならＪＰＥＧの高画質も可能ですがまだまだ遅い環境の方も多いのでこのように作っています。

ちなみにこのホームページの全ての画像画素数を３０以下にしているのではっきり言ってきれいな写真はありません。デジカメでもパソコンのせいでもありません。わざとです。

最後にＴＯＰページに表を作り、画像、窓の部分、ＪＡＶＡをいれてバスのできあがり！

背景を作る

背景の正体はタイルです。 右の画像を背景に設定するときれいに敷き詰められて背景となります。 １つの絵で画面を動かさないようにする方法もあります。 この画像を使ったページを探してね。他のページの背景もこういったものを使っています。 背景も極力画像の重さを抑えたいのでＧＩＦ、ＪＰＥＧを使い分けています。 作るテクとして、文字が上からかかれるので目立つ背景を作らないことかな 音符はフォトショップのスタンプ機能のようなものを利用。

ＪＡＶＡの打ち込み

上のほうでもたびたびＪＡＶＡが登場。私のいっているＪＡＶＡは正式にはJavaSpriptという。
名前の由来はコーヒーのジャバから？らしい。
ＴＯＰ画面でどんなＪＡＶＡを使っているかというと

1. 年月日
2. 曜日
3. 休日（これは祭日しか出てこない、見れたらラッキー）
4. 時刻
5. お気に入りに追加
6. 時間ごとのメッセージ（あ、この部分今のせていません）
7. 文字が動く
8. アイコンの表示

です。これらのＪＡＶＡは本を見て作成。でもせっかく本を買っても使用したいと思うのは１,２個だったりする。しかも１字も間違えずにうたなければ動かない。ＪＡＶＡをたくさんのせているホームページからいただくと打ち込みが入らずに楽。でも速度や表示方法を変えたりするので細かい説明がない分やっぱり大変かな？

ＣＧＩ

ＴＯＰページではアクセスカウンタがそう。このホームページのプロバイダはカウンタと時刻しかない。（東京電話ＰＯＩＮＴ）しかもカウンタの種類もたいして無い。

ＣＧＩは他にアンケートのフォームがあったり、伝言板などもある。ＤＩＯＮは多い。

フリーＣＧＩというのもある。ただ、プロバイダーによっては使用不可。サーバーが壊れたり動作が不安定になったりするらしい。

ページごとレンタルのＣＧＩもある。たいてい画面の右下に製作者や入手先がのっている。

ＣＧＩもＪＡＶＡやＨＴＭＬのように基礎知識がないと難しい。専門用語でパーミッションとか。何だそれは？となる。私も良くわからない。説明どおりにするだけ。

とりあえずアクセスカウンタのみがこのホームページのＣＧＩです。

アクセスカウンタはあらかじめ増やしておくこともできる。このホームページは０からスタートだからみんな見てくれてありがとう！

おまけ

ソースを盗む・ＨＴＭＬは何？と多分知らない方多いはず。
表示方法はインターネットエクスプローラーで表示→ソース　　をクリック

やたら＜＞で囲まれた英字が出てきます。これがホームページの正体。画像は画像を表示しろという命令のＨＴＭＬが組み込まれています。

これはメモ帳で表示されています。