（本HPの技術ポイント）
ここでは、本HPで使用したテクニックについて説明します。猫とは関係ないので興味のある人だけ読んでください。
- [トップページ]
- アニーメーションにはFlashを使用。イラストはIllustratorを使用して作成。右向きと左向きで模様が違ったり、ちょっと凝ってみました。
一定時間での写真の入れ替わりにはJavascriptを使用。実際はFlashを使用した方が簡単ですが、Javascriptを使用してこのようにフェードイン・アウトで画像が入れ替わるサンプルが無かったので練習を兼ねて作ってみました。フェードイン・アウトには当初rico1.0ライブラリーを使用しましたが、IE6で表示が出来ないなど不具合があり、Spry Effectに変更しましたがやはり表示されません。今のところ原因不明。 - [うちの子紹介・ニャンコんちの仕様]
- 写真にカーソルを持ってくると写真が拡大するテクニックには、Javascriptを使用せずCSSのみで実現しています。
- [うちの子写真館]
- 画像ファイル名、撮影日、コメントをxmlファイルにして、このxmlファイルを読み込んで表示させています。xmlファイルの読み込みにはJavascriptのSpryライブラリーを使用しています。
- 2009年1月～6月についてはFlashによるスライドショーで表示させています。
- 2009年7月～12月についてはJavaScriptライブラリーのLightboxを使用しました。ただ使用するのではなく、プリントボタン追加やNext･Prev表示をイメージ外に常に表示させるなどかなりプログラムを改良しました。
- [よその子写真館]
- ここでは、xmlファイルをFlashを用いて読み込んで表示させています。ハヤシカオル氏のPhoto-Gllareyを参考にさせてもらいました。ただこのサンプルではxmlファイルの画像ファイル名や日付などは全て同じタグの属性として記入されていてその属性を取り出していますが、本HPでは「うちの子写真館」のxmlファイルの形式にあわせるため、画像ファイル名や日付、コメントは全てそれぞれ違うタグとして、その要素内容を取り出すようにプログラムを変更しました。
- [猫本紹介]
- 各本の説明は、JavaScriptのjQueryライブラリーのツールチップを使用しています。各本の説明は、個別のhtmlファイルを読み込んでツールチップとして表示するようにしています。よってもしJavaScriptがオフになっていても、著書名をクリックすると個別のhtmlファイルが開くので説明文を読むことができます。
- *本HPで現在わかっている不具合*
-
・（うちの子写真館）がopera（オペラ）では正しく表示されない。他のブラウザでは問題なく表示されます。
・IE6以下では、正しく表示されないページがある。（「トップページ」の写真が表示されない。「うちの子紹介」「にゃんこんちの仕様」の写真の拡大が出来ない。「うちの子写真館」のサムネイルの表示が乱れる等）
更新記録
- 2010年2月26日：「うちの子写真館」に2009年7月～12月の写真をアップ JavaScriptリブラリーのLightboxを使用。プリント機能追加など大幅に改良した。
- 2009年7月16日：「うちの子写真館」に2009年1月～6月の写真をアップ Flashでスライドショーを制作
- 2008年9月22日：ナビゲーションをCSSのみからtableレイアウトとjQueryのロールオーバーに変更、SEOのため
- 2008年8月25日：IE6での表示の不具合を一部修正（メインページ、ニャンコんちの仕様など）
- 2008年8月17日：猫本のページをアップ
- 2008年8月１日：ホームページアップ
