新ＨＰ「写真投稿美術館（仮名）」テスト公開

新ＨＰ「写真投稿美術館（仮名）」テスト公開しました。
名前の通り、「写真の投稿ページ」ですが非常にシンプルなページです。
ちなみに名前は「写真 投稿」と「写真 美術」
という検索回数が比較的多いので、
じゃぁ名前くっつちゃえという安易な考えです（笑）
●案は３年くらい前から
写真投稿ページを作るという案は３年くらい前からありました。
最初、他の方に作成依頼をしていたのですが、結局作成する目処がたたなかったようなので
自分で作成するしかないかなと思っていたのですが
私自身、既存サイトの運営や別サイトのたちあげなど、
時間的な問題などからなかなか実行にうつせず
今日まで伸びてしまいました。
システムを作るとなると、ただのホームページを作るより
遥かに時間がかかるのですよね。
（下記の話は、多少専門的な話も入ってしまい、
前回、前々回のホームページ心理学のお話より少々難しいお話が入ってしまうところがあり申し訳ないのですが、 ご了承くださいね）
●何故Webのシステムを作ると時間がかかるか？
皆さんがホームページを作るとき、
どういうふうに自分の文章をページに掲載するでしょう？
一般の作り方であれば
（１）メモ帳などのテキストエディタや
ホームページビルダーなどのＨＰ製作ソフトでＨＴＭＬを作りＦＴＰでサーバーにアップ
（２）企業などから提供されているブログにログインして書いたテキストを投稿
この２種類ですよね。
ホームページを公開する場所というのは
自分のパソコンとは別にある「サーバー」というところに
ファイルをあげて、見せる必要があるわけですね。
（この辺りの仕組みは以前私が書いた
　初心者向けのホームページ作成講座
　「第２０話　ついにＨＰ完成！　ＦＴＰソフトでアップロードでホームページ公開！」
　に図解で説明してあるのでそちらを参照にしてみてくださいね）
（１）の場合は、自分のパソコン上のファイルをＦＴＰでサーバーにあげて公開、
（２）の場合は企業のサーバーにブラウザ（インターネットエクスプローラなど）から直接アクセスして
企業が作ったプログラムを通して、画面上からサーバーにデータを更新する
という形になるわけです。
（（２）のイメージについては、
ホームページ講座「第３０話　ＣＧＩ編１　ＣＧＩとは？」
のイメージ図を見ていただけると、理解しやすいかも？）
Webシステムを作るということは、ブラウザから入力したものを
サーバー上へ反映させることですから
（２）のブログをイメージしていただけるとわかりやすいと思います。
「投稿ページを作る」ということは、
この「ブログのプログラムを書くところに相当」するわけですね。
システムを作るにはCGIなり、PHPなりJavaなり
何でも良いのですが、サーバー上で動かすプログラムを書き、
それをHTMLで表示するという仕組みが必要ということです。
●投稿システム（ウェブシステム）の基本的な流れは「検索・登録・修正・削除」の４つ
今回、mixiの私が運営している「人に見てもらうホームページ」というコミュニティで
「データベースを使わない投稿システム」
というお題で、
まったく投稿システムを作ったことがないという方のために
参考になるように、この記事を書いているので、
投稿システムに必要な流れを簡単に説明いたします。
ブログなり、日記なりブラウザ上で更新している方には
イメージがつきやすやいと思うのですが
日々の日記（ブログ）の記事を投稿するには
初回時の記事の「登録」
間違ってしまったときや、記事が古くなったときに書きなおすための「修正」
記事を消す「削除」
ファイルや記事が増えてしまったため、記事が見つかりやすくなるような「検索」
これらの基本機能が必要です。
ブログのシステムに限らず、ウェブのシステムなら
ほとんどがこの４つを組み込む、それがシステムの基本となります。
●投稿システム（ウェブシステム）で一番作るのが簡単なのは「検索」「登録」
ウェブシステムを作るのに、もっとも簡単なのは「検索」でしょう。
複雑な検索方式とデータを持っていると
（例えば、データベースのテーブルが複数あって、
いろいろなテーブルからデータを引っ張ってきて検索するときなど）
検索が一番簡単であるとは言いきれないのですが、
中に入るデータさえあれば、読者さんがいくらデータを検索をしようとも、
中身のデータが変わるわけではないので
検索の方法と、表示方法、この２つだけが苦労するだけなので
比較的システムを作るのに容易です。
以前公開した「温泉宿施設予約検索」は、
検索＋口コミ機能が付加されているので、「登録」機能も若干入っていますが
登録もただデータを追加するだけなので比較的楽な部類に入ります。
（ただし、「登録」には空文字の場合や、変な文字が入ったときは
　登録を拒否するエラーチェック機能を付加する必要があります。
　エラーチェック機能の種類を増やすとそれだけ大変になります）
●投稿システム（ウェブシステム）で作るで大変なのが「修正」
ウェブシステムを作るので、もっとも大変なのは「修正」でしょう。
登録されたデータを「修正」する場合、
データを「検索」して、そのデータを「修正」するか
データを「検索」して、そのデータを「削除」、その後「登録」
という流れになります。
それなので、「検索」などの機能ができないと、「修正」も行えないわけです。
データを「修正」する際にもっとも厄介なのが
「同時アクセスによる修正」です。
例を挙げてみましょう。
Ａさんという人が夕方６時１０分にアクセスして、データを修正しようとしました。
次にＢさんという人は夕方６時１２分にアクセスをして同じデータを修正しようとしました。
データには、
「ボク達はドラクエが好きです」
という文章が入っているとします。
この間、二人はバコバコとパソコンのキーボードをたたいているわけです。
Ｂさんの方が修正が早く終わり、６時１４分に修正をしました。
「ボク達はファイナルファンタジーが好きです」
というふうに修正をしました。
すると、元のデータが修正されるわけですね。
ここで、Ａさんの画面には
「ボク達はドラクエが好きです」
と、まだＢさんが修正する前の画面が表示されて
そのデータに修正をかけているわけですよね？
次にＡさんが６時１６分に修正が終わりました。
「ボク達はマリオブラザーズが好きです」
というふうに変えようとします。
画面はＢさんが修正する前のデータが表示されており
そのデータに修正をかけちゃうことになります。
すると・・・・当然前に修正したＢさんのデータが消えて、
Ａさんだけの修正になってしまうわけですね。
Ａさんはこれで良いですが、Ｂさんが再度修正したデータを見ると
「俺の修正したデータが消えている！！！
　このシステム、どないなってるの！！！」
っと、せっかく修正したのにダマされた気分になるわけです。

対応策としては１つは、Ａさんがアクセスしている間は
他の人（この場合Ｂさん）は修正できないような仕組みを作る方法があります。
具体的にはデータにロックをかけて、Ｂさんが更新できないようにします。
もう１つの方法としてはデータに更新日を値として持たせ、
修正するときに、更新日が一致するかを調べます。

これも例を挙げたほうがわかりやすいでしょう。
先程、Ａさん、Ｂさんが修正しようとしたデータに
「更新日」という項目も設けます。
このデータが過去に修正された（もしくは登録された）日は
同じ日の夕方４時に行われたとします。
データとしては、
「ボク達はドラクエが好きです／更新日：2005.12.6 16:00」
という形にしましょうか。
ここで、さっきと同様
Ａという人が夕方６時１０分にアクセスして、データを修正、
次にＢという人は夕方６時１２分にアクセスをして同じデータを修正しようとします。
この時、データの更新日は「夕方４時」なわけで、
その値を覚えておきます。
Ｂさんが夕方夕方６時１４分に更新します。
「ボク達はドラクエが好きです／更新日：2005.12.6 16:00」
更新をする前にデータの過去の更新日を見ると、
誰も更新していないのですからまだ「夕方４時」ですね？
自分が修正しようとしたとき、アクセスしたときの更新日「夕方４時」
と今のデータの更新日は「夕方４時」が一致するので
更新ＯＫ！
更新をかけます。
そうするとＢさんのデータが修正され、
更新日が「夕方４時」→「夕方６時１４分」になるわけです。
修正された後のデータとしては
「ボク達はファイナルファンタジーが好きです／更新日：2005.12.6 18:14」
そこでさっきと同じように、Ａさんは修正飴の画面を開いて
「夕方６時１６分」にデータを修正しようとします。
Ａさんがアクセスしたときの「更新日」は「夕方４時」でしたよね？
しかし、今の更新日を見ると「夕方６時１４分」で、違う！
だから、Ａさんの修正ではエラーを出すわけです。
（「他の人がデータを更新したので、再度読みこんで、データを修正してください」
　みたいなエラーメッセージを出す）
Ａさんの「修正」は無駄になってしまいますが
次にＡさんがリロードをして、読みこめば
アクセスしたときのデータの更新日「夕方６時１４分」に変わっているので
「ボク達はファイナルファンタジーが好きです／更新日：2005.12.6 18:14」
これでもう一回修正を行えば、
「ボク達はファイナルファンタジーとマリオブラザーズが好きです／更新日：2005.12.6 ●」
Ｂさんが修正したものを表示してから、Ａさんがデータを修正するので
データが間違って登録されてしまうということがなくなるわけです。
修正の一例を挙げましたが、
他にも、登録時と同じ入力時のエラーチェックをしたりと
「修正」の部分をプログラムで組むのには、面倒くさいわけです。
●投稿システム（ウェブシステム）を一からシステムを作るのは面倒
私達が、仕事など（趣味もそうですが）
ウェブで投稿システムなどを作るときは
上記のように、「登録・修正・削除・検索」を考えた上で
ホームページのデザインや機能を考えていくわけですが
何はともあれ、面倒くさい、複雑、敷居が高くて私にはできない、
そんなことがあるわけです。
例えば、掲示板を設置しようとして
１からプログラムを作ろうとするととても大変です。
たいていはレンタル掲示板を借りるか、
フリーのＣＧ掲示板をダウンロードして使われる方が多いのではないでしょうか。
●写真（イラスト・画像）投稿ページを作るときの、機能と候補プログラム
写真投稿ページを作ることは技術的には私でも可能なのですが
上記のように、システムを作る時間もないので、既存のプログラムを使って、
他の皆さんが投稿して、掲載、しかも修正も削除も読者さんが自分でできるプログラムがないかを調べてみました。
今回は、「写真投稿」という機能だったので、
必要な機能としては、
「ファイルアップロード」や、「不特定多数の読者さんが投稿できる」
「荒らしを防ぐ為に（誰でも投稿できてしまうと困るので）、仮登録機能があり、
管理人が承認したもののみ、掲載できるという仕組み」
ことなどが求められます。
写真投稿ページを作るときに、候補として挙がったのが次のプログラムでした。
（１）Coppermine Photo Gallery
http://coppermine-gallery.net/index.php
元プログラムは英語なのですが、日本語の対応もあります。
無料の写真スクリプトの中では相当凄いスクリプトではないでしょうか。
自分の写真のアルバム管理もできることながら、
他の方（読者さん）にもメールアドレスとパスワードを登録してもらうことにより
IDを発行して、写真の投稿が他の方からもできます。
これは凄い！
一からこのシステムを作るとなると、結構な手間のはずです。
上で書きました「検索・登録・修正・削除」はもちろんできますし
ファイルをアップロードする容量の制限もできるようです。
このプログラムがあれば、自分と読者さんの写真の
投稿ページが本当に手軽にできてしまいます。
（実際に設置して、少しテストをしていました）
また写真以外のファイルも可能のようです。
しかし、今回写真投稿ページを作る際に
このプログラムは使いませんでした。
使うにあたって、２点の問題点があったからです。
１つは、「データベース」が必要なことだったからです。
私がメインで使っているサーバー（このブログもそうです）
さくらインターネットはデータベース（Mysql）が使えるので
このプログラムも設置は可能なのですが、容量が１Ｇまでしか借りていなかったのですよね。
（他にも３Ｇプランがあったのですが、当時は１Ｇあれば充分かと思い１Ｇで契約してしまいました）
写真って結構容量かかりますし、
既に他に数サイトをさくらインターネット上で運営していて、さらにこれから容量も増えるので
写真ページをこのさくらインターネットで掲載するのは、将来容量が不安だということがあり、
読者さんに貸して頂いている、別のサーバーに設置することにました。
（2006.2.24：現在は別サーバーに写真投稿美術館を設置しています）
読者さんにお借りしているサーバーはCGIとPHPは使えるのですが、データベースが使えないため、
この（１）Coppermine Photo Galleryは見送りました。
（登録情報は、さくらのデータベースを使って、写真のファイルは読者さんのページに置くよう、
さくらインターネットのシェルスクリプトを使って別サーバー（読者さんのサーバー）にFTPログインして
遠隔操作する、ちょっとアクロバティックなプログラムを少し書いていたのですが
どう考えても、一からプログラムを考えるより複雑になってしまいそうだったので、断念しました）
もう１つ、見送った理由として、「写真投稿の見せ方の問題」がありました。
実際に上記プログラムをダウンロードして設置していただくとわかるのですが、
Coppermine Photo Galleryの場合は、
投稿者ごとにIDがふられるため、
管理アルバムが、投稿者ごとに作成されているのですね。
読者さんが、写真を閲覧するときって
「読者ごと」に写真を閲覧することってあまりないと思うのですよね。
例えば、「花の写真」が見てみたいとか、
「雪の写真」が見てみたいとか
種類ごとに見ることが多いかなと思うのです。
音楽の投稿ページとかでも同様のことだと、思うのですが
自分が知りたい「音楽や写真」があるかという形で調べることが多いため、
「読者ごと」のカテゴリわけでの表示はしたくなかったからです。
カスタマイズの仕方によって、読者ごとのカテゴリをはずす方法はあるのかもしれないのですが
私にはわからなかったので、このプログラムは見送りました。
（２）PhotoPost
http://www.photopost.com/
これも英語のページなのですが、実際に設置した画面がクリックできるようになっているので
イメージは一目瞭然だと思います。
これもすばらしいスクリプトですね。
国内では、それほどメジャーなプログラムではないようですが
海外のページで結構使われているようです。
ただし、有料プログラムで
PhotoPost PHP Proの場合は129ドルと書かれていました。
今日のドル相場が1ドル120円程度でしたから15480円程度でしょうか。
それほど、高い値段ではないですね。
ただ、こちらもシステム的にデータベース（Mysql）が必要なようなので
見送りました。
（３）yomi search
http://yomi.pekori.to/yomi-search.shtml
こののスクリプトか！
とわかる方もいらっしゃるとは思うのですが
自動リンク集などに使われる「yomi search」というプログラムがあります。
ホームページの検索ページを設置したり、
自分のページを宣伝して、yomi search系のサーチエンジンに登録している方も
多いのではないでしょうか。
yomi searchは、元々ホームページの登録をするものなので
ファイルをアップロードする機能はないものの、
データベースを使わない（ファイル単位で管理している）こと、
また、登録・修正・削除・検索機能が実装されているところ、
仮登録機能もあることから、
アップロードをする機能をつければ、どうにかなるんじゃないのかと思い、
プログラムを少し改造してみました。
●改造したところは主に
（１）画像アップロード機能
（２）氏名、パスワード、ＵＲＬクッキー保存
（３）検索結果の出力
（４）ホームページ重複登録ＯＫ
（５）ページ自動生成
（６）自動サムネイル機能
（１）画像アップロード機能
yomi searchの場合、バナーを登録することができますが、
自分のサーバーにアップしてあるバナーのURLを指定するだけで
ファイルをアップロードする機能がありません。
そのため、バナーURL指定のところを改造して
写真を選択してファイルがアップロードできるようにしました。
アップロードのプログラムはネットを探せば
Perl（ＣＧＩ)もPHPもたくさんサンプルがあるので、
作るのには困りませんね。
jpg、gif、pngの３つしかアップロード許可していませんが
アップロードの許可を変えれば、フラッシュなどの動画や
音楽ファイルのmid、mp3などもアップロード可能です。
このアップロード機能さえ、実装できれば
他のいろいろな投稿ページにも応用できるでしょう。
（２）氏名、パスワード、ＵＲＬクッキー保存
yomi searchは自動リンク集のため、
１つの自分のホームページを登録することを目的に作られています。
しかし、１枚の写真、１投稿（１登録）と考えると
写真を投稿する度に名前やメールアドレス、
パスワード、自分のホームページURLなどを何度も入力するのは手間です。
そこで２度目以降の入力は、Javascript機能のクッキー保存を使って
読みこみボタンを押すと、名前などの入力を省く機能を追加しました。
また、（４）ホームページ重複登録ＯＫ
で、同様にyomi searchは１登録１ホームページしか登録できなかったので
重複のホームページが登録できるようにしました。
（３）検索結果の出力
これはレイアウト上の問題ですね。
写真２枚を１行と表示するように少し改造しています。
（５）ページ自動生成
これが、少しミソです。
「ページ自動生成」とは
１つの画像を投稿すると、それに伴って
ＨＴＭＬ（このシステムはＰＨＰ）を同時に生成し、
１画像（写真）＝１ＨＴＭＬ（１ＰＨＰ）を作っています。
サムネイルをクリックすると、それぞれ拡大写真が表示されるわけですが
この機能は本来、「まったくいらないもの」です。
普通なら、サムネイルをクリックしたら、
直接拡大画像をクリックすればよいわけですから、
あえて、無駄に画像を貼りつけたＨＴＭＬ（ＰＨＰ）などを作っても
無駄以外の何者でもありません。
これは少し専門的な話になって申し訳ないのですが
SEO（検索エンジン上位表示）を意識してやっているものです。
検索エンジン（yahooや、google、MSNなど）で検索したときに
上位に表示されたときの条件の１つで
ページ数と、自分の際とにどれだけリンクが貼られているか、ということが
重要になってきます。
１つの写真で１つのＨＴＭＬを構成して、
ページを生成することにより、ページ数を増やすことができます。
例えば、写真が１００枚あって、
サムネイルから、拡大写真にリンクを直接貼っていたら、
ＨＴＭＬの数は１枚だけです。
しかし、サムネイルからＨＴＭＬ（ＰＨＰ）にリンクを貼って
そのＨＴＭＬに画像を表示させれば、
１００枚画像があると、１００個のＨＴＭＬ（ＰＨＰ）と元ＨＴＭＬ１つ
計１０１枚になります。
それぞれのＨＴＭＬでは、投稿者さんがホームページを持っていてリンクを
貼っている場合、
１０１件のページから、読者さんのＨＰにリンクが貼られるわけです。
写真を投稿した数だけ、自分のホームページにリンクが貼られるので
下手に自動リンク集を複数登録するより、効果があります。
写真を投稿して下さった読者さんには恩返しとして
メリットを受けられる仕組みをつくるため、このようなシステムにしました。
誰もが、自分のホームページを見てもらえる機会があったら、嬉しいでしょう？
（６）の自動サムネイル機能、
これは、検索結果に元画像を掲載すると、
とんでもなく大きい画像が羅列されて、見難くなるため
PHPを使って自動的にサムネイルを生成するようなスクリプトを使いました。
他にも細々と裏で実装をはしているのですが、大まかな改造はこんなところで、
yomi searchを使った投稿システムが、写真投稿美術館になります。
（尚、レイアウトはWinのIEとOperaでしか確認していないので、他のブラウザやOSで見ると乱れている可能性があります）
これなら、一から「検索・登録・修正・削除」のシステムを作るより、敷居が低いですし
写真以外に、音楽も動画も可能なので
（ある程度プログラムをいじらないといけないですが、それは勉強だと思って）
時間もかなり短縮できるのではないでしょうか。
趣味で投稿ページをこれから作りたいけれど、作り方に検討がつかないという方への参考になれば幸いです。