Today: Yesterday: Total: Online:
カテゴリー
その他
  • RSS1.0
  • RSS2.0
  • atom0.3
  • valid XHTML1.0
  • valid CSS2
  • Credit
RSSリーダーで購読する | この日記のはてなブックマーク数 | プロフィール
コメントが一番多い記事(233コメント):人の心理の裏をかくホームページ集客術:リピータになってもらうためには
ツイートが一番多い記事(94ツイート):ちょっと待て!twitterやfacebookに子供の写真を掲載する親達への警告
いいねが一番多い記事(574いいね):facebookスパムに要注意。なりすましの見分け方とアカウント乗っ取りの手口(2013年度版)

カテゴリー » Web/ミディリン December 06, 2005

新HP「写真投稿美術館(仮名)」テスト公開 ID:1133847595


新HP「写真投稿美術館(仮名)」テスト公開しました。
名前の通り、「写真の投稿ページ」ですが非常にシンプルなページです。


ちなみに名前は「写真 投稿」と「写真 美術」
という検索回数が比較的多いので、
じゃぁ名前くっつちゃえという安易な考えです(笑)


●案は3年くらい前から


写真投稿ページを作るという案は3年くらい前からありました。
最初、他の方に作成依頼をしていたのですが、結局作成する目処がたたなかったようなので
自分で作成するしかないかなと思っていたのですが
私自身、既存サイトの運営や別サイトのたちあげなど、
時間的な問題などからなかなか実行にうつせず
今日まで伸びてしまいました。


システムを作るとなると、ただのホームページを作るより
遥かに時間がかかるのですよね。


(下記の話は、多少専門的な話も入ってしまい、
前回、前々回のホームページ心理学のお話より少々難しいお話が入ってしまうところがあり申し訳ないのですが、 ご了承くださいね)


●何故Webのシステムを作ると時間がかかるか?


皆さんがホームページを作るとき、
どういうふうに自分の文章をページに掲載するでしょう?


一般の作り方であれば


(1)メモ帳などのテキストエディタや
ホームページビルダーなどのHP製作ソフトでHTMLを作りFTPでサーバーにアップ
(2)企業などから提供されているブログにログインして書いたテキストを投稿


この2種類ですよね。


ホームページを公開する場所というのは
自分のパソコンとは別にある「サーバー」というところに
ファイルをあげて、見せる必要があるわけですね。
(この辺りの仕組みは以前私が書いた
 初心者向けのホームページ作成講座
 「第20話 ついにHP完成! FTPソフトでアップロードでホームページ公開!
 に図解で説明してあるのでそちらを参照にしてみてくださいね)


(1)の場合は、自分のパソコン上のファイルをFTPでサーバーにあげて公開、
(2)の場合は企業のサーバーにブラウザ(インターネットエクスプローラなど)から直接アクセスして
企業が作ったプログラムを通して、画面上からサーバーにデータを更新する
という形になるわけです。
((2)のイメージについては、
ホームページ講座「第30話 CGI編1 CGIとは?
のイメージ図を見ていただけると、理解しやすいかも?)

Webシステムを作るということは、ブラウザから入力したものを
サーバー上へ反映させることですから
(2)のブログをイメージしていただけるとわかりやすいと思います。


「投稿ページを作る」ということは、
この「ブログのプログラムを書くところに相当」するわけですね。


システムを作るにはCGIなり、PHPなりJavaなり
何でも良いのですが、サーバー上で動かすプログラムを書き、
それをHTMLで表示するという仕組みが必要ということです。



●投稿システム(ウェブシステム)の基本的な流れは「検索・登録・修正・削除」の4つ


今回、mixiの私が運営している「人に見てもらうホームページ」というコミュニティで
「データベースを使わない投稿システム」
というお題で、
まったく投稿システムを作ったことがないという方のために
参考になるように、この記事を書いているので、
投稿システムに必要な流れを簡単に説明いたします。


ブログなり、日記なりブラウザ上で更新している方には
イメージがつきやすやいと思うのですが
日々の日記(ブログ)の記事を投稿するには
初回時の記事の「登録」
間違ってしまったときや、記事が古くなったときに書きなおすための「修正」
記事を消す「削除」
ファイルや記事が増えてしまったため、記事が見つかりやすくなるような「検索」
これらの基本機能が必要です。


ブログのシステムに限らず、ウェブのシステムなら
ほとんどがこの4つを組み込む、それがシステムの基本となります。


●投稿システム(ウェブシステム)で一番作るのが簡単なのは「検索」「登録」


ウェブシステムを作るのに、もっとも簡単なのは「検索」でしょう。
複雑な検索方式とデータを持っていると
(例えば、データベースのテーブルが複数あって、
いろいろなテーブルからデータを引っ張ってきて検索するときなど)
検索が一番簡単であるとは言いきれないのですが、
中に入るデータさえあれば、読者さんがいくらデータを検索をしようとも、
中身のデータが変わるわけではないので
検索の方法と、表示方法、この2つだけが苦労するだけなので
比較的システムを作るのに容易です。


以前公開した「温泉宿施設予約検索」は、
検索+口コミ機能が付加されているので、「登録」機能も若干入っていますが
登録もただデータを追加するだけなので比較的楽な部類に入ります。
(ただし、「登録」には空文字の場合や、変な文字が入ったときは
 登録を拒否するエラーチェック機能を付加する必要があります。
 エラーチェック機能の種類を増やすとそれだけ大変になります)


●投稿システム(ウェブシステム)で作るで大変なのが「修正」


ウェブシステムを作るので、もっとも大変なのは「修正」でしょう。
登録されたデータを「修正」する場合、
データを「検索」して、そのデータを「修正」するか
データを「検索」して、そのデータを「削除」、その後「登録」
という流れになります。
それなので、「検索」などの機能ができないと、「修正」も行えないわけです。


データを「修正」する際にもっとも厄介なのが
「同時アクセスによる修正」です。


例を挙げてみましょう。
Aさんという人が夕方6時10分にアクセスして、データを修正しようとしました。
次にBさんという人は夕方6時12分にアクセスをして同じデータを修正しようとしました。


データには、
「ボク達はドラクエが好きです」
という文章が入っているとします。


この間、二人はバコバコとパソコンのキーボードをたたいているわけです。


Bさんの方が修正が早く終わり、6時14分に修正をしました。
「ボク達はファイナルファンタジーが好きです」
というふうに修正をしました。
すると、元のデータが修正されるわけですね。


ここで、Aさんの画面には
「ボク達はドラクエが好きです」
と、まだBさんが修正する前の画面が表示されて
そのデータに修正をかけているわけですよね?


次にAさんが6時16分に修正が終わりました。
「ボク達はマリオブラザーズが好きです」
というふうに変えようとします。


画面はBさんが修正する前のデータが表示されており
そのデータに修正をかけちゃうことになります。


すると・・・・当然前に修正したBさんのデータが消えて、
Aさんだけの修正になってしまうわけですね。
Aさんはこれで良いですが、Bさんが再度修正したデータを見ると
「俺の修正したデータが消えている!!!
 このシステム、どないなってるの!!!」
っと、せっかく修正したのにダマされた気分になるわけです。



対応策としては1つは、Aさんがアクセスしている間は
他の人(この場合Bさん)は修正できないような仕組みを作る方法があります。
具体的にはデータにロックをかけて、Bさんが更新できないようにします。


もう1つの方法としてはデータに更新日を値として持たせ、
修正するときに、更新日が一致するかを調べます。



これも例を挙げたほうがわかりやすいでしょう。


先程、Aさん、Bさんが修正しようとしたデータに
「更新日」という項目も設けます。
このデータが過去に修正された(もしくは登録された)日は
同じ日の夕方4時に行われたとします。


データとしては、
「ボク達はドラクエが好きです/更新日:2005.12.6 16:00」
という形にしましょうか。


ここで、さっきと同様
Aという人が夕方6時10分にアクセスして、データを修正、
次にBという人は夕方6時12分にアクセスをして同じデータを修正しようとします。
この時、データの更新日は「夕方4時」なわけで、
その値を覚えておきます。


Bさんが夕方夕方6時14分に更新します。
「ボク達はドラクエが好きです/更新日:2005.12.6 16:00」
更新をする前にデータの過去の更新日を見ると、
誰も更新していないのですからまだ「夕方4時」ですね?


自分が修正しようとしたとき、アクセスしたときの更新日「夕方4時」
と今のデータの更新日は「夕方4時」が一致するので
更新OK!
更新をかけます。


そうするとBさんのデータが修正され、
更新日が「夕方4時」→「夕方6時14分」になるわけです。


修正された後のデータとしては
「ボク達はファイナルファンタジーが好きです/更新日:2005.12.6 18:14」


そこでさっきと同じように、Aさんは修正飴の画面を開いて
「夕方6時16分」にデータを修正しようとします。


Aさんがアクセスしたときの「更新日」は「夕方4時」でしたよね?
しかし、今の更新日を見ると「夕方6時14分」で、違う!
だから、Aさんの修正ではエラーを出すわけです。
(「他の人がデータを更新したので、再度読みこんで、データを修正してください」
 みたいなエラーメッセージを出す)


Aさんの「修正」は無駄になってしまいますが
次にAさんがリロードをして、読みこめば
アクセスしたときのデータの更新日「夕方6時14分」に変わっているので
「ボク達はファイナルファンタジーが好きです/更新日:2005.12.6 18:14」
これでもう一回修正を行えば、
「ボク達はファイナルファンタジーとマリオブラザーズが好きです/更新日:2005.12.6 ●」
Bさんが修正したものを表示してから、Aさんがデータを修正するので
データが間違って登録されてしまうということがなくなるわけです。


修正の一例を挙げましたが、
他にも、登録時と同じ入力時のエラーチェックをしたりと
「修正」の部分をプログラムで組むのには、面倒くさいわけです。


●投稿システム(ウェブシステム)を一からシステムを作るのは面倒


私達が、仕事など(趣味もそうですが)
ウェブで投稿システムなどを作るときは
上記のように、「登録・修正・削除・検索」を考えた上で
ホームページのデザインや機能を考えていくわけですが
何はともあれ、面倒くさい、複雑、敷居が高くて私にはできない、
そんなことがあるわけです。


例えば、掲示板を設置しようとして
1からプログラムを作ろうとするととても大変です。
たいていはレンタル掲示板を借りるか、
フリーのCG掲示板をダウンロードして使われる方が多いのではないでしょうか。


●写真(イラスト・画像)投稿ページを作るときの、機能と候補プログラム


写真投稿ページを作ることは技術的には私でも可能なのですが
上記のように、システムを作る時間もないので、既存のプログラムを使って、
他の皆さんが投稿して、掲載、しかも修正も削除も読者さんが自分でできるプログラムがないかを調べてみました。


今回は、「写真投稿」という機能だったので、
必要な機能としては、
「ファイルアップロード」や、「不特定多数の読者さんが投稿できる」
「荒らしを防ぐ為に(誰でも投稿できてしまうと困るので)、仮登録機能があり、
管理人が承認したもののみ、掲載できるという仕組み」
ことなどが求められます。



写真投稿ページを作るときに、候補として挙がったのが次のプログラムでした。


(1)Coppermine Photo Gallery
http://coppermine-gallery.net/index.php


元プログラムは英語なのですが、日本語の対応もあります。
無料の写真スクリプトの中では相当凄いスクリプトではないでしょうか。


自分の写真のアルバム管理もできることながら、
他の方(読者さん)にもメールアドレスとパスワードを登録してもらうことにより
IDを発行して、写真の投稿が他の方からもできます。


これは凄い!
一からこのシステムを作るとなると、結構な手間のはずです。
上で書きました「検索・登録・修正・削除」はもちろんできますし
ファイルをアップロードする容量の制限もできるようです。


このプログラムがあれば、自分と読者さんの写真の
投稿ページが本当に手軽にできてしまいます。
(実際に設置して、少しテストをしていました)


また写真以外のファイルも可能のようです。



しかし、今回写真投稿ページを作る際に
このプログラムは使いませんでした。
使うにあたって、2点の問題点があったからです。


1つは、「データベース」が必要なことだったからです。


私がメインで使っているサーバー(このブログもそうです)
さくらインターネットはデータベース(Mysql)が使えるので
このプログラムも設置は可能なのですが、容量が1Gまでしか借りていなかったのですよね。
(他にも3Gプランがあったのですが、当時は1Gあれば充分かと思い1Gで契約してしまいました)


写真って結構容量かかりますし、
既に他に数サイトをさくらインターネット上で運営していて、さらにこれから容量も増えるので
写真ページをこのさくらインターネットで掲載するのは、将来容量が不安だということがあり、
読者さんに貸して頂いている、別のサーバーに設置することにました。
(2006.2.24:現在は別サーバーに写真投稿美術館を設置しています)


読者さんにお借りしているサーバーはCGIとPHPは使えるのですが、データベースが使えないため、
この(1)Coppermine Photo Galleryは見送りました。
(登録情報は、さくらのデータベースを使って、写真のファイルは読者さんのページに置くよう、
さくらインターネットのシェルスクリプトを使って別サーバー(読者さんのサーバー)にFTPログインして
遠隔操作する、ちょっとアクロバティックなプログラムを少し書いていたのですが
どう考えても、一からプログラムを考えるより複雑になってしまいそうだったので、断念しました)


もう1つ、見送った理由として、「写真投稿の見せ方の問題」がありました。
実際に上記プログラムをダウンロードして設置していただくとわかるのですが、
Coppermine Photo Galleryの場合は、
投稿者ごとにIDがふられるため、
管理アルバムが、投稿者ごとに作成されているのですね。


読者さんが、写真を閲覧するときって
「読者ごと」に写真を閲覧することってあまりないと思うのですよね。


例えば、「花の写真」が見てみたいとか、
「雪の写真」が見てみたいとか
種類ごとに見ることが多いかなと思うのです。


音楽の投稿ページとかでも同様のことだと、思うのですが
自分が知りたい「音楽や写真」があるかという形で調べることが多いため、
「読者ごと」のカテゴリわけでの表示はしたくなかったからです。


カスタマイズの仕方によって、読者ごとのカテゴリをはずす方法はあるのかもしれないのですが
私にはわからなかったので、このプログラムは見送りました。


(2)PhotoPost
http://www.photopost.com/


これも英語のページなのですが、実際に設置した画面がクリックできるようになっているので
イメージは一目瞭然だと思います。
これもすばらしいスクリプトですね。
国内では、それほどメジャーなプログラムではないようですが
海外のページで結構使われているようです。


ただし、有料プログラムで
PhotoPost PHP Proの場合は129ドルと書かれていました。
今日のドル相場が1ドル120円程度でしたから15480円程度でしょうか。
それほど、高い値段ではないですね。


ただ、こちらもシステム的にデータベース(Mysql)が必要なようなので
見送りました。


(3)yomi search
http://yomi.pekori.to/yomi-search.shtml


こののスクリプトか!
とわかる方もいらっしゃるとは思うのですが
自動リンク集などに使われる「yomi search」というプログラムがあります。


ホームページの検索ページを設置したり、
自分のページを宣伝して、yomi search系のサーチエンジンに登録している方も
多いのではないでしょうか。


yomi searchは、元々ホームページの登録をするものなので
ファイルをアップロードする機能はないものの、
データベースを使わない(ファイル単位で管理している)こと、
また、登録・修正・削除・検索機能が実装されているところ、
仮登録機能もあることから、
アップロードをする機能をつければ、どうにかなるんじゃないのかと思い、
プログラムを少し改造してみました。


●改造したところは主に


(1)画像アップロード機能
(2)氏名、パスワード、URLクッキー保存
(3)検索結果の出力
(4)ホームページ重複登録OK
(5)ページ自動生成
(6)自動サムネイル機能


(1)画像アップロード機能


yomi searchの場合、バナーを登録することができますが、
自分のサーバーにアップしてあるバナーのURLを指定するだけで
ファイルをアップロードする機能がありません。


そのため、バナーURL指定のところを改造して
写真を選択してファイルがアップロードできるようにしました。


アップロードのプログラムはネットを探せば
Perl(CGI)もPHPもたくさんサンプルがあるので、
作るのには困りませんね。


jpg、gif、pngの3つしかアップロード許可していませんが
アップロードの許可を変えれば、フラッシュなどの動画や
音楽ファイルのmid、mp3などもアップロード可能です。


このアップロード機能さえ、実装できれば
他のいろいろな投稿ページにも応用できるでしょう。


(2)氏名、パスワード、URLクッキー保存
yomi searchは自動リンク集のため、
1つの自分のホームページを登録することを目的に作られています。


しかし、1枚の写真、1投稿(1登録)と考えると
写真を投稿する度に名前やメールアドレス、
パスワード、自分のホームページURLなどを何度も入力するのは手間です。
そこで2度目以降の入力は、Javascript機能のクッキー保存を使って
読みこみボタンを押すと、名前などの入力を省く機能を追加しました。


また、(4)ホームページ重複登録OK
で、同様にyomi searchは1登録1ホームページしか登録できなかったので
重複のホームページが登録できるようにしました。


(3)検索結果の出力
これはレイアウト上の問題ですね。
写真2枚を1行と表示するように少し改造しています。


(5)ページ自動生成
これが、少しミソです。
「ページ自動生成」とは
1つの画像を投稿すると、それに伴って
HTML(このシステムはPHP)を同時に生成し、
1画像(写真)=1HTML(1PHP)を作っています。


サムネイルをクリックすると、それぞれ拡大写真が表示されるわけですが
この機能は本来、「まったくいらないもの」です。


普通なら、サムネイルをクリックしたら、
直接拡大画像をクリックすればよいわけですから、
あえて、無駄に画像を貼りつけたHTML(PHP)などを作っても
無駄以外の何者でもありません。


これは少し専門的な話になって申し訳ないのですが
SEO(検索エンジン上位表示)を意識してやっているものです。


検索エンジン(yahooや、google、MSNなど)で検索したときに
上位に表示されたときの条件の1つで
ページ数と、自分の際とにどれだけリンクが貼られているか、ということが
重要になってきます。


1つの写真で1つのHTMLを構成して、
ページを生成することにより、ページ数を増やすことができます。


例えば、写真が100枚あって、
サムネイルから、拡大写真にリンクを直接貼っていたら、
HTMLの数は1枚だけです。


しかし、サムネイルからHTML(PHP)にリンクを貼って
そのHTMLに画像を表示させれば、
100枚画像があると、100個のHTML(PHP)と元HTML1つ
計101枚になります。


それぞれのHTMLでは、投稿者さんがホームページを持っていてリンクを
貼っている場合、
101件のページから、読者さんのHPにリンクが貼られるわけです。


写真を投稿した数だけ、自分のホームページにリンクが貼られるので
下手に自動リンク集を複数登録するより、効果があります。


写真を投稿して下さった読者さんには恩返しとして
メリットを受けられる仕組みをつくるため、このようなシステムにしました。
誰もが、自分のホームページを見てもらえる機会があったら、嬉しいでしょう?


(6)の自動サムネイル機能、
これは、検索結果に元画像を掲載すると、
とんでもなく大きい画像が羅列されて、見難くなるため
PHPを使って自動的にサムネイルを生成するようなスクリプトを使いました。


他にも細々と裏で実装をはしているのですが、大まかな改造はこんなところで、
yomi searchを使った投稿システムが、写真投稿美術館になります。
(尚、レイアウトはWinのIEとOperaでしか確認していないので、他のブラウザやOSで見ると乱れている可能性があります)


これなら、一から「検索・登録・修正・削除」のシステムを作るより、敷居が低いですし
写真以外に、音楽も動画も可能なので
(ある程度プログラムをいじらないといけないですが、それは勉強だと思って)
時間もかなり短縮できるのではないでしょうか。


趣味で投稿ページをこれから作りたいけれど、作り方に検討がつかないという方への参考になれば幸いです。

— posted by midilin @ 02:39PM | Comment (25) | TrackBack (0) 

カテゴリー » モジュール » yomi search December 02, 2005

yomi search 相互リンクをしても、マークがつかないことについて ID:1133486940


相互リンクを含めるマークサイトは
登録者が付加するのでは無く、管理人が付加する仕様になっている。

相互リンクサイトとして登録申請されたサイトでも、登録時そのまま自動的に「相互リンク」のマークがつけられるのではなく、管理人が編集また、仮登録モードでは、登録審査時にマークをつけなければマークは付かない。
http://sumi.cside.com/docys/view.cgi?mode=link&id=161
1 / 2| 次のページ »

— posted by midilin @ 10:29AM

カテゴリー » モジュール » yomi search December 01, 2005

yomi search トップページに新着情報を掲載する方法 ID:1133429719


http://sumi.cside.com/docys/view.cgi?mode=link&id=124
1 / 2| 次のページ »

— posted by midilin @ 06:35PM


カウンター