2月 232014
 

(本投稿記事は「XAMPP 1.8.3」をベースにしています)

Xampp_logo自己満足のための「俺流!バラ栽培」は、HTML ファイルを PHP ファイルに分割したことで、とってもメンテナンスがし易くなってきたのですが、そうなると PHP の開発環境が欲しくなる・・・という理由で「XAMPP」を自宅サーバーにインストールは完了しました。(本ブログの投稿記事「XAMPP(ザンプ)で Windows 上にウェブサーバーを構築する:インストール」を参照)

インストールした自宅サーバーと言っても単純にファイルを保存するために利用していますから、通常の PC と何ら変わりはない「Windows 7 マシーン」です。「XAMPP」内の「htdocs」が公開されるウェブサイトになるので、http://localhost/index.htmp も index.php も正常に動作しているようです。

そこで、このディレクトリに同じホームネットワークに接続されている Surface RT から閲覧できるようになるととっても嬉しい!

しかし、どうやら通常のセットアップだけではアクセスできません・・・ネットを検索して・・・以下の公開記事がとっても参考になりました!

上記を参考に「XAMPP」ディレクトリ内にある「httpd.conf」のファイルを編集します!ちょっと難しい感じのファイルですが Windows のアクセサリである「メモ帳」で簡単に編集できますから有難い。「httpd.conf」をオープンして、「ServerName localhost:80」という部分を自宅の「XAMPP」をインストールしている PC の IP アドレスに書き換えます。

「ServerName localhost:80」から「ServerName 192.168.XXX.XXX:80」に変更

「XAMPP」を再起動して、ネットに繋がっている Surface RT から http://192.168.xxx.xxx/index.html を閲覧しようとすると・・・お~見事に閲覧に成功です。

ところが index.php を閲覧しようとすると、以下のようなメッセージが登場しました。

新しいXAMPPのセキュリティコンセプト:
は、要求のディレクトリへのアクセスは、ローカルネットワークから入手可能です。
この設定は、ファイルで設定することができますのhttpd – xampp.conf

そこで、「xampp.conf」の最後の方に以下の記述がありました。

# New XAMPP security concept
#
<LocationMatch "^/(?i:(?:xampp|security|licenses|phpmyadmin|webalizer|server-status|server-info))">
  Require local
  ErrorDocument 403 /error/XAMPP_FORBIDDEN.html.var
</LocationMatch>

上記の「Require local」を適切に書き換えれば良い!取り急ぎ、「Require all granted」って書き換えてみました。セキュリティー上、問題があるかもしれませんが、まずは稼働してくれることが重要なので。

すろと!やりました!!同一のネット上にある Surface RT から見事に閲覧できるようになりました。


2月 222014
 

(本投稿記事は「XAMPP 1.8.3」をベースにしています)

Xampp_logoHTML、CSS を勉強しながら「俺流!バラ栽培」というウェブページを構築中・・・って、単純に自己満足の世界ですが、内容的にはだんだん自己満足が向上してきました。以前更新していたブログ「ばら空間」から内容を移植(コピペですが・・・)しているのですから、当たり前と言えば当たり前。メンテナンスの向上のために HTML を PHP ファイルに変更して・・・って、かなりテクニカル上も自己満足度が向上してきた・・・

しかし、相変わらずテスト環境がありません・・・どういうことかというと「作成したウェブファイルをテストせずにウェブサーバーにアップロードして公開している」ということ。Surface RT で開発しているのですから、贅沢を言ってはいけない、と自分には言い聞かせていたのですが、ページ数が増えてきて「やっぱりテスト環境が欲しいな」と感じてきました。

自作 PC を自宅サーバーとして運用しているのに、ウェブサーバーくらい構築できないの?

きゃぁ~すっかり忘れていました、自宅サーバーがあるのを!現在は、あくまでもファイルサーバーとしての利用に限定していて、Surface RT のファイル保存を回避しているに過ぎないサーバーですが、ハードディスクは 2TB もある・・・

そこで、以前、インストールにトライして失敗した自宅サーバーをウェブサーバーにすることにチャレンジしてみることにしました!

いろいろ調べてみましたが「HTML、CSS、PHP」が動作して、欲を言えば「MySQL」も準備しておきたいし・・・通常は、今と同じように Surface RT からアクセスを可能にしたい・・・ということで、ウェブサーバー用に「ZXAMPP」をインストールすることにしました!

「XAMPP – Wikipedia」によれば、以下の通りです。

XAMPP(ザンプ)とは、ウェブアプリケーションの実行に必要なフリーソフトウェアをパッケージとしてまとめたもので、apachefriends.org から提供されている。主として開発用あるいは学習用ではあるが、イントラネットなどにおいて実運用環境として使われることもある。

正に私のような素人にもってこいのアプリケーションではないですか!更に・・・

Apache(Webサーバ)、MySQL(SQLデータベースサーバ)と Web プログラミング言語である PHP や同目的で使われるPerlの4つの主要ソフトウェアと phpMyAdmin などの管理ツール、さらに SQLite など、いくつかの補助的なソフトウェアとライブラリモジュールが含まれている。

簡単なサーバーとしての運用を考えていますから、相当の覚悟を決めて「XAMPP」のインストールを開始。まずは「XAMPP Installers and Downloads for Apache Friends」から「XAMPP」を自宅サーバーへダウンロード。

えっ、あれっ!?ってくらい簡単にインストーーる完了。良いのか、こんな簡単で・・・というくらい簡単に完了しました。ちょっと良いのかね、こんなに簡単で。ただ、インストールは簡単だったけど動かないんじゃないの・・・

まずは、インストールした「XAMPP」のディレクトリーから「XAMPP Control Panel」を起動します。設定画面のようなものが表示されるので、まずは、apache と MySQL のスタートボタンをクリック。すると以下の様に何やら起動している感じ。

20140223_xampp_start

更に上記の状態で、Internet Explorer で「http://localhost/」へアクセスすると、以下のようなウェブページが表示されました!

20140223_xampp_start2

素晴らしい!とっても簡単に起動し出しました。いろいろと設定が必要なのでしょうけど、まずは初期の設定(インストール)はできたようです。自宅サーバーを公開することは考えていませんから、これだけでも十分なんでしょうけど、何せサーバーの外、私の場合は、Surface RT でアクセスできるようにしたいのですが・・・それには、もうちょっと時間が掛かりそうです。


2月 192014
 

WordPress であれば、投稿記事の「最終更新日」を表示する方法は知っているのですが、PHP ではどうやって表示するんでしょう・・・これもネットに多くの情報がありますが、本サイトでは「PHP で WEB 作成:最終更新日を表示」を参考にしました。

ちょっと引用しておきましょう。

最終更新日を表示するには、filemtime という関数を使用します。 関数 filemtime は、ファイルの更新日時を返す関数です。 この関数と、日時を表示する関数 date を組み合わせることで、ファイルの更新日時を表示させることができます。

そしてそのコードは以下の通りです。

<?php
$last_modified = filemtime("index.php") ; 
  print "最終更新日は";
  print date("Y/m/d", $last_modified); 
  print "です。";
?>

上記を参考に実際には以下のコードを「俺流!バラ栽培」のページに挿入しました。

<?php
  clearstatcache (); // キャッシュをクリアする
  $Last_Updated = filemtime ('index.php');
  echo "(最終更新日:".date("Y年m月d日", $Last_Updated ).")";
?>

filemtime 関数はキャッシュに情報を保持するそうで、最新情報を得るためには clearstatcache でキャッシュをクリアにする必要があるそうです。なるほどね~

また、最終更新日を表示するために getlastmod 関数もあるようですが、コードを挿入したファイルの最終更新日のみの表示(ファイルを指定することができない)ということと、どうやら apache の設定等が関係するらしいので、こちらは採用を見送りました。getlastmod に関しては、「PHP: getlastmod – Manual」が参照できます。


2月 182014
 

(本投稿記事の内容はセキュリティーの観点から課題があるかもしれません・・・それを踏まえてご理解下さいませ)

ウェブサイトの構築を猛勉強中!?ですが、なんとか形になってきました。どれ位のスキルになったかというと・・・ちょっとお恥ずかしいですが本ブログのサブサイトである「俺流!バラ栽培」で確認できます。何だこの程度かよ、と言われそうですが・・・

さて、最初は全てのファイルを「HTML」で作成していたのですが、時間と共にやりたいことが増えてきて、特にメニューなんかは新しいページを加える毎に全てのファイルを更新しなければならない・・・こんなことを繰り返していたら、最終的にはめんどくさくなって止めてしまう。

そこで、早い段階で「各 HTML ページに共通している部分を PHP で外部ファイルにする」という方法をとろうと決断しました!即ち、全ての「HTML」に含めたいメニューのような部分を個別に外部ファイルとする・・・ウェブを公開しているサーバーにもよりますが、PHP が利用できるサーバーであれば、どこでもできるのではないでしょうかね!?

「HTML」ファイルからメニュー部分を切り取って、「menu.php」というファイルを作成して・・・必要な所に PHP で「include」させれば良い・・・ってことは、ネットで解るのですが、実際にやってみるとなかなか上手くいきませんでした。

Step 1:index.html から index.php とファイル名の拡張子を変更
Step 2:メニュー部分をそのまま切り取り、新たに menu.php ファイルとしてメニュー部分のみを保存。
Step 3:index.php のメニューを挿入したいところにコード「<?php include ("./xxxxx/menu.php") ?>」を挿入。

上記と同じような方法でヘッダー、サイドバー、フッターを我部ファイルにして、挿入したいところに挿入したコードのサンプルが下の通りです。最初は、PHP ファイルは「<?php」で始まって「?>」で終わる、と信じていたので、ファイルの先頭に「<?php」をコーディングして、最後に「?>」をコーディングにしていましたが、これらは必要ないんですよね!これに気が付いて、削除したら機能し出しました!

<?php include ("./xxxxx/header.php") ?>

<title>ウェブページのタイトル</title>
</head>

<body>
<div id="pagebody">
<!--  Header  -->
<div id="header">
<h1>ヘッダー:タイトル</h1>
<p>サブサイト</p>
</div>

<!-- Menu -->
<?php include ("./xxxxx/menu.php") ?>

<!--  Main Contents  -->
<div id="article">

<!-- ここに本文を挿入 -->

</div>

<!-- contents of Sidebar -->
<?php include ("./xxxxx/sidebar.php") ?>

<!-- Contents of Footer-->
<?php include ("./xxxxx/footer.php") ?>

こうしておけば、menu.php を修正すれば、全てのページのメニューが書き換えられる!ウェブサイトのメンテナンスがとっても楽になりますよね!随分と以前に、HTML でウェブサイトを構築して頃に気が付いていれば、もっと長生きできるウェブサイトになっただろうに・・・


2月 172014
 

昨年末(2013年12月)に購入したミラーレス一眼デジタルカメラの影響もあって、本ブログでは結構画像をアップロードしています。単純に撮影した写真をサイズのみ修正して添付していますが、修正した時に画像タイプを選定する必要があるんです。

画像タイプ・・・ウェブにはどんなフォーマットが良いの?

最近では、GIF、JPG、PNG の 3 つ位が一般的なようですが、使い分けが理解できていません・・・そこで、調べてみたので、下記に「HTML クイックリフェレンス:WEB画像について-GIF・JPEG・PNGの特徴」より引用しておきます。

GIF・JPG・PNG の特徴
GIF JPG PNG
GIF (Graphics Interchange Format) は最大8ビット(256色)までの色を扱うことのできる圧縮画像形式です。256色以上必要ないロゴ、リンクボタン、アイコン、アニメ調のイラストなど、 特に単色ベタ面を多く含む平坦な画像に向いています。逆に写真やスケッチなどの多くの色数を必要とする画像には不向きです。 JPEG (Joint Photograph Experts Group) は圧縮画像形式ですが、24ビット(1670万色)まで扱うことができます。 このため、多くの色数を必要とする写真などの表現に向いています。 また、グラデーションのように色調が連続して変化する画像にはJPEGが適しています。 反対にアイコンやアニメ調の平坦なイラストなどをJPEGで保存するとにじんだように汚くなります。PNG(Portable Network Graphic) は「ピング」と読みます。 PNGは、特許使用の解釈に不安のあったGIFに替わるライセンス・フリーの画像形式として開発されました。 PNGには、「フルカラーにも8bitカラーにもすることができる」「圧縮率が高く同じ内容のGIF画像より10%~30%程度ファイルサイズが小さくなる」 「圧縮によってデータが捨てられてしまうことがない可逆圧縮形式を採用している」「複数の透過色を指定できる」「ライセンス問題の不安がない」等の長所があります。

なるほど!上記から、写真には「JPG」が向いていて。通常の画像は「PNG」が良いって結論が良さそうですね!上記の参照サイトには「PNGはW3C(World Wide Web Consortium)が推奨する画像フォーマットです。 最近ではブラウザやグラフィックソフトのサポートも進み、標準的な画像形式になっています。」とありますから、大方、これまでの私のやり方で正しいような気がします。