新着情報をトップページに表示する方法、第２弾です。
前回の『HTMLで更新する方法』はこちら↓
下層ページを追加・更新するたびに、
トップページの「更新情報」も書き換えてアップロード、というのは面倒ですよね。
毎回HTMLを手作業で書き換えなくても、ブラウザだけで更新できるようにするには、PHPやCGIといったプログラム（スクリプト）を設置する必要があります。
プログラミングやシステムというと、とても難しいイメージですが、１からwebプログラミングの勉強を始めなくても、CGIやPHPなどのプログラムを、無料で配布して下さっているサイトがたくさんあるので有難く使わせて頂きましょう。
ブログみたいに「お知らせ情報」を更新できるようにする
無料・有料版いろいろなプログラムが配布されていますが、その中でも、一番分かりやすくて使いやいと思ったのがコチラ↓
商用可で、企業・個人関わらず無料で使用することができます。
（著作権表示を削除したい場合は有料）
設置も比較的カンタンなのですが、説明文だけではピンとこない方も多いと思うので、今回はわかりやすい図解をメインに、設置方法と使い方をご紹介していきます。
どんなことができるの？
管理画面に、ユーザIDとパスワードで「ログイン」して、
こんな感じの「投稿欄」に必要事項を書き入れるだけで・・・
「新着情報欄」が自動的に生成されます。
内容によって「カテゴリー分け」など、細かい設定ができる所も便利です。
設置の前に確認しておきたいこと
HTMLと違って、プログラムはそのままパソコン上で動かすことができないので、サーバーに設置して使うことになるのですが、
プログラムを設置する前に「今使っているレンタルサーバーがプログラムに対応しているか」を確認しておく必要があります。
サーバーが対応していなければ、設置や設定の方法が正しくてもプログラムは正常に動きません。
今回ご紹介している新着情報のプログラムが正常に動くのは、以下の動作確認済みレンタルサーバーになります。
」は、設定によっては正常に動かないことがあるようなのでご注意ください。CPI、WebArena、スマイルサーバー、ファーストサーバなどは不具合が報告されているようです。
もし、今お使いのサーバーで試して動かなかった方は、動作確認済みサーバーの無料お試し期間を利用してテストしてみるといいかもしれません。
プログラムを設定してみよう
利用規約を確認して、プログラムをダウンロードしましょう。
→ ダウンロードはこちら
ファイルZIP形式に圧縮されているので、
デスクトップ等に保存したあと解凍（展開）しましょう。
たくさんのファイルが入っていますが、設定が必要なのは１個だけです。
いろいろ設定できますが、まずは「ログイン情報」だけ書き換えてテストしましょう。
※一気にいろいろ触ると、何が原因で動かないのか分からなくなりますので（汗
テキストエディタで、config.phpを開きます。
（文字化けする人は「おすすめテキストエディタ」のページもご参照ください）
「管理画面ログイン情報」と書かれた場所を探し、ログインIDとパスワードを書き換えます。
この時、前後にあるカンマを間違って消したりすると、正常動作しなくなるので注意。
書き換えが終わったら、保存して、ファイルを閉じてＯＫ。
サーバーに設置して、動かしてみよう
今回は、テストのため「さくらのサーバー」へ設置してみます。
FTPソフトを使って、パソコンの中身をサーバーへアップロードしていきます。
フォルダ名が分かりにくいと後が大変なので、今回は「news」というフォルダを作って、その中にプログラムを入れる事にします。
レンタルサーバー側の「news」フォルダを開き、
先程設定したプログラムをすべて、アップロードします。
サーバー側のファイルを右クリックして、それぞれファイルごとに指定された「パーミッション（属性変更）」を設定します。
▼パーミッション変更が必要なのは、次の４か所です。
もし、後からconfig.phpを書き換えたい場合、444だと上書きできなくなることがあります。一時的に「666」にして、変更し終わったら「444」に戻してください。
ここまで終われば、設置完了です。
ブラウザで動作確認してみよう
http://（あなたのサイトのURL）/news/pkobo_news/admin/ を
ブラウザで表示させて、下記の画面が表示されれば成功です。
config.phpに記入した、ユーザーIDとパスワードでログインしてみましょう。
「新規登録」ボタンを押すと、登録画面へ移動します。
必要な項目を入力し「登録」ボタンを押せば、新しいお知らせを追加できます。
- 登録年月日 — 登録日として表示される日付。
- 公開・非公開 — チェックすると公開になります（登録だけで非公開にもできる）
- タイトル — お知らせの見出し部分になります。
- カテゴリ — config.php内で名前変更も可能。
- 直リンクURL — URLを入力すると、タイトルをクリックしたときに詳細ページではなく、指定したURLへ直接移動します。
- 直リンクファイル — ファイルを登録すると、タイトルをクリックしたときに、詳細ページではなく直接「ファイル」が表示されます。
- 本文 — タイトル下の抜粋文として表示されるほか、直リンクを指定しなかった場合には「詳細」として表示させることができます。
- ファイル — 画像を登録すると、サムネイルや詳細ページ内に表示されます。
登録した内容の変更・削除も、管理画面から行うことができます。
実際の表示を確認するには、ブラウザで
http://（あなたのサイトのURL）/news/top-umekomi.php を開いてみて下さい。
先程登録した内容が表示されれば、成功です！
トップページに新着情報を表示させるには？
このままでは「新着情報ページができる」だけで、
トップページに「新着情報が埋め込まれる」という感じにはなりません。
PHPが分かる方は、
トップページをindex.phpにして読み込むのがベストだと思いますが、
PHPが苦手な方や、既存のHTMLの中に、新着情報を追加したい場合は、
「iframeでHTMLに埋め込む」という方法が一番カンタンです。
トップページの中に、下記のタグを追加するだけ。
<iframe src="news/top-umekomi.php" width="700" height="300" frameborder="0" scrolling="auto"></iframe>
これで、上手く表示されない場合は、
top-umekomi.phpへの『パス』が間違っているのかも…
そんな時は、src=”top-umekomi.php“ の部分を、
先ほど表示させた、URLに書き換えると上手くいくかもしれません（？）
<iframe src="http://（あなたのサイトのURL）/news/top-umekomi.php" width="700" height="300" frameborder="0" scrolling="auto"></iframe>
ちなみに、枠のサイズは、
width=横幅、height=縦幅 の数字を変更すれば変えられるので、
デザインに合わせて調整して下さいね。
その他フリーPHPスクリプト配布サイト
■ウェブクローゼット（PHP）
画像のアップロード機能、サムネイル(縮小画像)生成・RSS配信機能付の
新着情報・更新履歴管理ツール。php5で動作確認されてます。
[ ImageInfo 詳細・動作サンプル・ダウンロード]
トップページの埋め込みは、先ほどと同じように「iframe」を使うと簡単です。
※パーミッションって何??という方は、FFFTPの使い方が参考になるかもしれません。
※それぞれのプログラムには使用条件（規約）があります。ダウンロードする前によく読んでくださいね！
デザイン変更・カスタマイズできる？
top-umekomi.php や style.css を編集する事で、デザインなども変える事ができます。
でも、細かい表示の方法やレイアウトの変更はPHPやHTML、CSSが分からないと難しいかもしれません。
※プログラムの配布元に頼めば、有料でカスタマイズしてもらう事も可能です。
HTMLでホームページを作って更新するだけでも大変なのに、新着情報プログラムを設置して、さらにカスタマイズはさすがにハードル高すぎ・・・
ブログと同じ感覚でホームページが簡単に作れる「Wordpress（ワードプレス）」を使えば、記事を更新するだけで、トップページに自動で新着情報を出すこともできますよ。
WordPressなら新着情報もページ更新もカンタン！
新着情報のプログラムは「更新情報部分だけ」ですが、Wordpress（ワードプレス）を使えば、ページの更新もブラウザからできるようになり、しかも、新着情報も自動でトップページに表示できます。
でもワードプレスって設置が難しそうで・・・
初心者向けのレンタルサーバーを使えば、ボタン一つ押すだけでワードプレスが設置できる機能があるから、更新プログラムを設置するよりカンタンかも？
でも、ワードプレスってブログでしょ？
私はホームページが作りたいの！
ホームページ用のテンプレートも多いんですよ！
選ぶだけでプロが作ったようなホームページが作れるんです。
こんなにキレイなページが自分で作れるようになるなんて！
設置もカンタンなら、私もやってみようかな！
初心者でも簡単に新着情報付きのホームページが作れるサービスも、どんどん出てきているので、目的に応じてツールを活用してみるのもいいかもしれません。
初心者向けじゃなくて、自分で思い通りに作りたい！という向上心が高いあなたは、マンツーマンで必要な所をピンポイントで教えてもらえるオンラインスクールを利用するのがおススメです。
最近は、現役エンジニアが個別指導をしてくれる「オンラインのプログラミングスクール」がとても人気があります。
基礎から、Webサイト制作・プログラミング/システム開発を本格的に学ぶことができます。
まずは無料で体験してみて「プログラミング楽しい」と思えた方は、仕事にできる所まで頑張ってみるといいかもしれません。
一度スキルを身に着ければ、できる事が断然広がります。
ぜひチャレンジしてみてくださいね！
