お待たせしました！こどもWEBカルタの第三弾「うみ・そら」のいきもの編を追加しました。
「くだもの・やさい」や「どうぶつ・こんちゅう」に比べ、普段、接する機会の少ないので、わが子もすぐには答えられず、いい勉強道具になります。(￣ー+￣)
第三弾のサイトはこちらからいけます。（下段メニューで各ページへは移動できます。）
例によって、ここからは制作過程のお話です。
今回はHeader.phpへの分割とWEBフォントの導入がメインの勉強・挑戦になりました。
ちなみに当初予定していたメニューの導入は今回はパスしました。
メニューっていっても３つしかないので、レイアウト的にむしろボタン３つ並べた方がスッキリでしたので。
Header.phpの導入
いざ、Header.phpを準備するにあたり、いくつかの問題がありました。
まずは「シャッフルボタン」です。
今までは、各ページへのリンクを貼っているだけで簡単だったのですが、Header.phpへと統一化するにあたり
どのページでも適用できるコードへと変換する必要がありました。
参考にしたのはこちらのサイト
PHPで現在アクセスされているページのURLを取得する
そして実装したのは以下のコードで、PHP文で現在のページを取得することにしました。
<a href=<?php print("http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]);?> class="button">シャッフル</a>
$_SERVER[“REQUEST_URI”]だけだとホスト情報が取得できずにうまくいきませんでした。テスト環境と本番環境のどちらでも機能できるので上記の記述にしています。
つぎに「CSSの切り替え」です。
こちらは超苦戦しました。まずは二つの「くだもの・やさい」、「どうぶつ・こんちゅう」の切り替えがうまくいくかを何度もテストしました。
CSS切替で調べると、JS使ってスイッチで現在のページを変えたりするのは多かったのですが、今回やろうとしているHeader.php内で、現在のページを判読して、あてるCSSを切り替えるというものが簡単そうで、なかなかいい情報が見つかりませんでした。
最終的にこちらの記事の方法を基本路線として進めました。
iPhone用にCSS/PHP/JavascriptでCSSを切り替える基本的な方法
これはUserAgenetを判読してスタイルシートを切り替えるという方法で、判読するものを現在のページのURLにすれば良いはずだと思ってやってみましたが、一向に判読できず。
苦悶している中、こんな記事に出会いました。
【第６回】PHPで文字列比較する時に「==」は使ってはいけません。
PHPで文字列比較する際は「===」になるんですね。
ちなみにこのときの苦戦を通じてデバッグ方法も確立しました。
<?php if($_SERVER['PHP_SELF'] === "/karuta/index.php"){ ?>
<a href="<a?php echo ($_SERVER['PHP_SELF']);?>">true</a>
<a?php }else{ ?>
<a href="<a?php echo $_SERVER['PHP_SELF']; ?>">false</a>
<a?php } ?>
if文が正なのか偽なのかを判定しておけば、条件が機能しているかどうかわかります。
ここでは先に紹介した$_SERVER[“REQUEST_URI”]ではなく$_SERVER[‘PHP_SELF’]を使用してます。
またprintではなくechoを使用していますが、いずれも違いを理解するいい機会になりました。こちらの記事が非常にわかりやすく解説されています。
PHPのechoとprintの違い
$_SERVER[]: PHP_SELFとREQUEST_URIとSCRIPT_NAMEと(改)
あと、$_SERVER[‘PHP_SELF’]をフォームで使用する場合はセキュリティ的にも危ないので注意が必要です。
$_SERVER[‘PHP_SELF’]は危険？
今回は最終的に3つのページを切り替える必要があったので以下のようなコードになりました。
<?php if($_SERVER["PHP_SELF"] === "/karuta/index.php"){ ?>
<?php }elseif($_SERVER["PHP_SELF"] === "/karuta/doubutsu.php"){ ?>
<?php }else{ ?>
<?php } ?>
これだと実はheader.phpに直接アクセスすると「うみ・そら」のCSSが適用されてしまうんですけどね。
随分長くなってきましたがHeader.phpでの苦労はこれでおしまい。
ロゴを画像として用意していた場合は、同じ要領でPHP文で切り替える必要があるのですが今回はその必要をなくすためにWEBフォントを導入しました。
Webフォントの導入
以前、このブログでGoogle Web Fontsを使用して@importで読み込んで利用したことがありましたが、今回は日本語のWEBフォントになるので、サーバーにアップするアプローチを取る必要があります。
お世話になったWEBフォント「フロップデザインフォント」
参考にしたのはこちらの記事です。
フリーのフォント「フロップデザインフォント」をWebFontにして使ってみた！
ちなみにWEBフォントってブラウザによって対応していないケースもあるので複数用意する必要があるのです。
意外と多い!? Web フォントに対応していない環境 ～2012 年の Web フォント事情
対応Webブラウザ
素材集め
これまで主に「フリー 写真 素材」とかで検索していたのですが、写真の縦横比がまちまちで困っていました。
しかしこちらのサイトのように壁紙用のフリー素材の場合、この問題が一度に解決するので非常に助かりました。
Birds Desktop photo Free collection.
あと動画素材について、これは子供と一緒に地道に見ていくしかないのですが、ハイクオリティなもので「堀場製作所チャンネル」や、「NHKクリエイティブライブラリ」さんにはお世話になりました。動物にもよるのですが、サメとか怖い動画が多くて結構困りました。対象が1-3歳くらいの言葉を覚えていくお子様なので、あえて動物の捕食シーンとかは避けています。
以上、長々と書くことになりましたが、勉強したこともログに残しておけば、また立ち返れるかと思って、割と細かくかいています。
それでは、第４弾をお楽しみに。
[ad]