• HOME
  • >
  • WEB作成
  • >
  • 「ヘッダーやフッターを共有する」から始まる長い話
  • 「ヘッダーやフッターを共有する」から始まる長い話

    ホームページを作り始めた当初、フォトショップやイラストレータの練習になるだろうと「 ダウンロード(素材) 」ページを作りました。でも使い勝手の良い、汎用性のある素材を作るのって、本当に難しいですね。早い段階で投げ出してしまいました。
    それで、私の素材ページは、貧弱な素材をわずか置いたまま、その存在を忘れられたページになってしまいました。

    しかし、初心忘るべからず、です。
    ここらで素材ページのレイアウトなどを変えてみて、気分も新たに素材を作り直そう、とやる気を起こしたのが2ヶ月前のこと。

    素材ページのレイアウトについては、

    • 今後メニュー項目が増えたり減ったりするかもしれないので、メニューバーは共有ページにしたい。
    • ページ数も多くなるので、ナビゲーションバーのあるヘッダーも共有したい。

    という条件の下、これまでフレームを使って構成していたのですが、フレームはできるだけ使わない方が良いと聞きます。
    何か別の方法はないかと娘に聞くと、ヘッダーやフッターを共有するには、PHPを使えば簡単だということ。「具体的にはどうやるの?」とさらに聞くと「詳しくはネットで検索!」とお馴染みの返事なので、検索しました。

    共通ファイルをPHPで共有する

    ヘッダーやフッターなど繰り返し使われる部分を共有する方法は、いくつかあるようですが”共通ファイルをPHPで共有する”に絞って検索すると、丁寧に解説してくれているサイトがたくさんありました。身内より頼りになるGoogle先生です。
    その中から以下のサイトを参考にしました。

    • 「フレームの代わりにPHPを使う」
    • 「phpでヘッダーやフッターを共通化する」

    PHPのようなプログラミング言語は、専門知識がなければ扱えないものだと思っていたのですが、これが驚くほど簡単なのです。
    通常通りのhtmlファイルを作成し、共有したい部分、例えばヘッダー部分やフッター部分ののソースを抜き出して、それぞれheader.html、footer.htmlとして保存します。(ファイルの名前は任意で。ファイルの種類も何でもいいそうです。)
    一方、共有部分を削除したhtmlファイルの方は、拡張子をPHPに変えます。そして

    • ヘッダー部分には
      <?php require(“header.php”); ?>と記述。

    <?php require(“header.html”); ?>と記述。

    • フッター部分には
      <?php require(“footer.php”); ?>と 記述。

    <?php require(“footer.html”); ?>と 記述。

    ※すみません。読み込むファイル名を間違えて記述していました。6月2日訂正致しました。なお、記述は半角英文字、半角記号に読み替えてください。
    (記述内容については「外部ファイル読み込み」を参考にしました。)

    たったこれだけです。
    ヘッダーとフッター、メニュー項目部分などを外部ファイルにして、全ページに読み込ませました。なんて、簡単!と喜んだのもつかの間。やはり100%都合のいいものなんて世の中にはありえないのですね。PHPはサーバー側で動作するものだということをすっかり忘れていました。私の場合、レンタルサーバーにアップしなければ、動作やレイアウトの確認ができないのでした。
    レンタルサーバーにアップしなくても、レイアウトだけならドリームウィバーのデザイン画面で多少確認できますが、やはりブラウザでプレビューしてリンクやスクリプトの動作確認をしたいものです。でもちょっとした変更をするたびに、いちいちレンタルサーバーにアップするのは結構ストレスになります。そればかりでなく、レイアウトが崩れたページをwebに公開してしまうこともよくあることです。
    自分のPC上でテストしてからアップしたい。それには自分のPCをサーバーにしてしまうと良い、とGoogle先生はささやくのです。

    ソフト開発をするわけでもないのに、果たしてそこまでする必要があるのか?と自分自身に問うてみると、「やってみたい」と好奇心が答えるので、思い切ってPCをサーバーにするソフトを導入することにしました。サーバーについて、たいした知識もないままに。

    XAMPPをインストール

    XAMPP とは、Apache 、MySQL、PHP、phpMyAdmin、Perl、等サーバー環境に必要なソフトがパックになっているフリーソフトだそうです。
    それぞれのサイトから個別にインストールするのもOKだそうですが、とりあえず幕の内弁当みたいなXAMPPでひとまとめにインストールすることにしました。
    「自分のPCをサーバーにするのは、思っているほど難しいものではありません」とGoogle先生は言います。ところが、これが私には結構大変でした。
    ここから長い話になりますので、XAMPPに興味のある方だけ続けてお読み下さい。

    XAMPPのver,1.7.3をインストール

    XAMPPは「apachefriends.org」(日本語解説サイト)でダウンロードできます。
    「XAMPP Windows版 1.7.3〔ベーシックパッケージ〕自己解凍型のRARアーカイブ 」をダウンロードしました。
    まず始めに、ホームページのデータのバックアップをとり、ダウンロードサイトの図解入り解説に従ってインストール。
    インストール後に http://localhost/ にアクセスすると、ローカルホストの画面が表示され、インストールが成功したことを日本語で確認できます。
    ver,1.7.3はデフォルトでCドライブのルート上に保存されます。
    ホームページデータの保存場所は、C:\xampp\htdocsの中です。
    私はC:\xampp\htdocsの中にMysite(仮名です)という名前のフォルダを置き、その中に作成中の3つの異なるドメインのサイトのフォルダをコピーして入れました。
    ここまでは何とかスムーズに進みました。それがドリームウィバーの「テストサーバー」の設定でつまずいてしまいました。
    こんなところでつまずくものなのか?と思いつつも、「リモートのテストサーバー」の意味が分らない。分らないまま場当たり的に設定を変えて試行錯誤してみるけど、ブラウザでプレビューをすると、「ファイルが見つかりません」のエラーページが出てくるばかり。
    自力での設定は諦めて、サーバーに詳しいHuman先生の手を借りて設定をしていただきました。

    Dreamweaver のテストサーバーの設定

    先生の設定は以下の通り

    • サイトの名前 (C:\xampp\htdocsに作成する任意のフォルダの名前):Mysite
    • サーバーテクノロジーの利用:利用する。 PHP MySQL
      作業ファイルの操作方法:ローカルで編集し、リモートのテストサーバーにアップデート
    • ネットワーク上のファイルの場所:C:\xampp\htdocs\Mysite\
    • 自分のサイトのルートの参照に使用するURL:http://localhost/

    上記の設定でローカルでプレビューさせることができるようになり、ようやく一安心。その後、セキュリティの設定などをしました。
    設定後しばらく使ってみてやっと、「ローカルで編集し、リモートのテストサーバーにアップデート」というのは、編集したホームページデータのコピーがC:\xampp\htdocsの中に作成されることだと気づきました。
    私の場合は最終的にはレンタルサーバーにデータをアップするので、自分のサーバーにアップする必要はない気がする。確信はないけど、設定を変えてもいいような気がする。
    というわけで、Dreamweaver のサイト定義を以下のように変更しました。

    • サイトの名前 C:\xampp\htdocsに作成する任意のフォルダの名前:Mysite
    • サーバーテクノロジーの利用:利用する。 PHP MySQL
    • 作業ファイルの操作方法:ローカルネットワークを使用して、リモートのテストサーバ上で直接編集
    • ネットワーク上のファイルの場所:C:\xampp\htdocs\Mysite\
    • 自分のサイトのルートの参照に使用するURL:http://localhost/ Mysite/

    ※ドリームウィバーのサイト設定をしたら必ず設定ファイルのバックアップをとっておきましょう。

    XAMPPについての覚書

    以上のように、知識もないのに好奇心が先走り、行き当たりばったり的に導入したXAMPPです。今のところ問題なく作動していますので、現段階で理解できたこと、覚えておきたいことを記録しておきます。

    セキュリティについて

    1.アクセス制限用のhtaccessファイルを作成してC:\xampp\htdocs\xamppに設置。
    htaccessファイルの作成方法は、「XAMPPのインストール」を参考にさせていただきました。
    ※最初、作成したhtaccessを設置したところ、ローカルホストのセキュリティ画面(http://localhost/security/)の日本語表示ができなくなってしまい慌てました。「XAMPP の設定」というサイトに、「.htaccess は、必ず Shift_JIS で保存します」と書いてあったので、TeraPadで文字コードを Shift_JIS に指定して保存しなおし、xamppを再起動すると、日本語が表示されるようになりました。
    2.アクセス制限をするとパスワード等の設定を完了するまではhttp://localhost/にアクセスしてもサーバーエラーになります。なのでhttp://localhost/security/にアクセスしてセキュリティ画面を表示します。
    3.セキュリティ画面に書かれてあるurl、http://localhost/security/xamppsecurity.php をクリックすると「MySQLのセキュリティコンソール & XAMPPのディレクトリ制御」画面が表示されます。ここでパスワード等を設定します。

    「MySQLのセキュリティコンソール & XAMPPのディレクトリ制御」の設定

    • MySQL SuperUser::root
    • MySQLのPW :パスワードを設定:(任意のパスワード)
    • PhpMyAdminを検出しました。: http cookie は、( httpを選択)
    • File: C:\xampp\security\security\mysqlrootpasswd.txt にチェック
    • パスワードを変更しましたをクリック
    • XAMPPのディレクトリ制御 :(.htaccess)
    • ユーザ: ディレクトリ用のユーザ名を設定:(任意の名前)
    • パスワード: ディレクトリ用のパスワードを設定:(任意のパスワード)
    • File: C:\xampp\security\security\xamppdirpasswd.txt にチェック
    • 安全なxamppデレクトリィを作成してくださいをクリック

    4.XAMPPを再起動させてから http://localhost/ にアクセスするとユーザー認証画面が出ますので、上記設定したユーザー名とパスワードをいれます。Phpmyadminの認証画面ではユーザー名にrootと入れ、設定したパスワードを入れます。

    cgiプログラムをローカルでプレビュー、動作させるには

    cgiプログラムの1行目、ペールへのパスを自分のPCのサーバーのペールまでのパスに書き直します。
    私の場合は #!/xampp/perl/bin/perl
    ※もちろん、レンタルサーバーにアップするcgiプログラムには、レンタルサーバーの指定するパスを書くこと。

    cgiのプログラムのローカルアドレスは

    例えばC:\xampp\htdocsにmysiteというフォルダを作ってその中にhomeというサイトフォルダを入れたとします。example.cgiというブログソフトを呼び出す場合は

    http://localhost/ mysite/home/blog/ example.cgi となります。

    • mysite:htdocsに作成したフォルダ名
    • home:自分のホームページフォルダ名
    • blog :example.cgiを格納しているフォルダ名
    • example.cgi:cgiの名前

    データベースを使わないようなphp(このブログの始めに書いたような、htmlファイルにphpスクリプトを記述しただけのphpファイルなども)なら、これもドリームウィバーのF12でプレビュー、動作確認できます。

    データベースを必要とするようなphpプログラムをローカルで動作させるには、PhpMyAdminに新規のデータベースを作成する必要があります。
    既にレンタルサーバーにデータベースを作成済みの場合は、既存のデーターベースをエクスポートして、XAMPPのphpMyAdminにインポートする方法を「Joomla!」というサイトで解説してくれています。

    その後、phpプログラムのConfig Fileのデータベースの設定部分を、ローカルホストに合わせて書きなおします。※もちろん、レンタルサーバーにアップするphpプログラムには、レンタルサーバーに合わせてデータベースの設定をすること。

    以上はサーバーを公開しない、phpやcgiを自分のpcでテストしたいだけ、という私レベルの設定です。
    私のやり方だと、cgiのペールパスやphpのデータベースの設定など、一つ一つのファイルごとに設定しなければならないので、その都度手間がかかります。
    もっと知識があれば、手間を省く設定などもできるだろうと思いますが、今のところ私はこれでイッパイイッパイです。

    XAMPPを導入した結果、ssi、php、cgiなどを使用したページのレイアウト変更やスクリプトの確認などを気軽にテストしてからwebに公開できるので、とても楽になりました。
    私のPCは、自分でプログラムを作成したり、自宅サーバーでホームページを公開したり、なんてこともできる環境になりました。あと必要なのはやる気と知識だけのようです。

    それにしても私の初心はどこへ行ったのか。
    素材作りを始めるつもりが、どんどん道がそれていき、森に迷い込んで別の出口に出てきてしまった感じです。
    またしてもWEB素材を作るという意欲は失せてしまいました。
    しかし、WEB上には素晴らしいフリー素材を、個人個人が持ち寄って共有提供しているサイトがたくさんあるので、そちらを利用した方がよさそうです。
    以前にも書きましたが、「designwalker」では海外の素材サイトをたくさん紹介してくれています。今年に入ってからずっと更新がされていなかったので気になっていたのですが、先月からまた活動を始められたようでほっとしました。とても頼りになるお薦めのサイトです。

    以下は、今回勝手に参考にさせていただいたサイトです。ありがとうございました。
    「フレームの代わりにPHPを使う」
    「phpでヘッダーやフッターを共通化する」
    「ソフィのPHP入門―外部ファイル読み込み」
    「XAMPP の設定」
    「XAMPPのインストール」
    「Joomla!」

    コメントはこちらから

    お名前は必須項目です。

    CAPTCHA


    画像を添付できます(JPEGだけ)

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください