人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

【jQuery】データベース風な使い方を教えて下さい。

作品一覧のギャラリーページのようなものを制作しています。
サムネイルをクリックすると詳細が出る。よくある感じです。
PHPのデータベースを使えば可能だとは思うのですが、今回myAdmin等を使うことが出来ない環境のため、JSで出来ないかと考えております。
が、そのような使いかたをしたことがなく、、、時間もあまりないことからご相談です。
静的ページを20、30と作るのは大変なので・・・。助けていただけると嬉しいです。

やりたいこと
index.html
< a href="gallery.html?id=1">画像1</a>
< a href="gallery.html?id=2">画像2</a>
続く

gallery.html
上記画像1のリンクをクリックした場合
< img src="images/1/1.jpg">
< p>ここに1の説明文が入ります</p>

上記画像2のリンクをクリックした場合
< img src="images/2/2.jpg">
< p>ここに2の説明文が入ります</p>

のようなページを作りたいのですが、、、、
よろしくお願い致します。

●質問者: 匿名質問者
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● 匿名回答1号

各画像は実際に別ページにする必要ありますか?
パッと思いついたというかjqueryで画像表示系のプラグインで、

  1. サムネイル付き
  2. キャプションや長めの説明などにも対応
  3. ハッシュ(#)使ったリンクにも対応

といったのを使えば良いんじゃないかと思いました。
とりあえずググったところだと
http://fotorama.io/
https://narugaro.wordpress.com/2013/12/10/%E3%82%B5%E3%83%A0%E3%83%8D%E3%82%A4%E3%83%AB%E4%BB%98%E3%81%8Djquery%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BCfotorama%E3%80%81%E7%94%BB%E5%83%8F%E3%81%AB%E3%83%AA%E3%83%B3%E3%82%AF%E5%85%88/
とか。

あとは、ローカルでphpなりで作ってhtmlをファイルを書きださせるとか、wgetでクロールするとかで静的ページ化するとか。

あとメンテナンスは?
それ考えるとローカルでphpってわけにはいかない(でもwshなら?)けど、
jqueryだとタグ書いていくことになりそう。
探せばjsonで別ファイルとか可能なのもあるかもしれませんが。


匿名質問者さんのコメント
ご回答有難うございます。 作りたいものは、画像の一覧があり、それをクリックすると詳細ページに飛ぶ。 詳細ページには、画像やら説明文やら色々書くページです。 URLのaタグに何らかのハッシュ等を持たせて、それにより飛び先のページの中身を差し替えたいという内容です。 なので、別ページに飛ばす必要が今回の場合あります。 仰るとおりjQueryでタグを書いている必要があるのだろうと思っているのですが、その記述がいまいちよくわかっていないので、その方法を伺いたく質問をさせて頂いておりました。

2 ● 匿名回答2号

> 今回myAdmin等を使うことが出来ない環境
MySQL が使えないという意味ですよね?
態々面倒な事をしないで素直にデータベースを使っては?
MySQLが使えなくても、よほど古いサーバなければ SQLite が使えるはずです。


匿名質問者さんのコメント
ご回答有難うございます。 仰るとおりMySQLが使えない環境です。 そのため、jQueryとAjax(なんとなくしかわからないのですが・・)を使って、ページを更新させることは出来ないかと思っていたのですが(自分の勉強含め) SQLiteについてもちょっと確認して見ます。 ありがとうございました。

匿名回答2号さんのコメント
もう少し考えてみると「DB要らなくね?」って感じが... > URLのaタグに何らかのハッシュ等を持たせて、それにより飛び先のページの中身を差し替えたいという内容です。 どこかに画像ファイルはまとめて置いてあるものと思われます。 そこからファイル名を取得するのは簡単ですよね? __glob() が使えます。 __再帰的にやる必要があるかも知れませんが... ならば一覧ページ側の a タグは生成できると思います。 __ < a href="gallery.php?id=○○○">画像△△ 個別ページ側(gallery.php)は、受け取った id から画像ファイル名を生成して print '< img src="images/'.$section.'/'.$imageFilename.'">'; とでもして画像部分を出力。 説明文は、画像ファイル名と拡張子だけ異なるファイルに書いておくなど関連付けさえ決めておけば file_get_contents() で内容を取得するのは簡単でしょう。 そうしておいて print '< p>'.$msg.'< /p>'; のように説明文部を出力。 なんだか無理やり感がするので、DBでやった方が楽でしょうね。 どちらにしろ gallery.php で全て生成できるので JavaScript で書く必然性を感じません。 強いて使うなら一覧ページで使えなくはないでしょうが、Ajax でリクエストを投げる先でやる処理を最初からやるだけですし...

3 ● 匿名回答1号

わざわざ別ページに飛ばなきゃならない理由はなんなんでしょ。
色々が本当に色々なんですかね。それでも探せばそれなりなプラグインはありそうですが。

楽なのは既存のプラグインに合わせてしまうことなんですけど、詳細に作り込みたいなら自作でしょうか。
しかし、それはそれで手間かかるけど。

二つのページでデータ共有するなら元データはjsonがいいでしょう。
http://www.webopixel.net/javascript/91.html
http://www.jquerybyexample.net/2013/04/how-to-display-load-images-from-json-file-jquery.html

これ参考に例えば
json

[
 [ "foo.jpg", "foo", "this is foo", "2/19", "abc" ],
 [ "bar.jpg", "bar", "hoge", "2/20", "def" ]
]

一覧

$(document).ready(function () {
 var jsonURL = "productList.json";
 $.getJSON(jsonURL, function (json) {
 var imgList= "";
 $.each(json, function (i, v) {
 imgList += '<a href="gallery.html#'+i+'"><img src="' + v[0] + '" alt="' + v[1] + '"></a>';
 });
 $('#dvProdList').append(imgList);
 });
});

画像

$(document).ready(function () {
 var jsonURL = "productList.json";
 $.getJSON(jsonURL, function (json) {
 var data = json[location.hash];
 var id_list = [ "title", "desc", "date", "etc" ];
 $('#img').attr('src', data.shift());
 $.each(id_list, function (i, v) {
 $('#'+v).text(data[i]);
 });
 });
});

こんなのでどうだろ?分かります?
jsonのデータ形式は単なる配列形式にしたけど、メンテ考えると連想配列の方がやっぱりわかりやすいのかな?


4 ● 匿名回答2号

必要性を感じませんが、どうしても JavaScript でやりたいのならこんな感じ。

list.php

<?php
echo <<<EOL
<a href="detail.php?id=01"><img src="hogehoge.jpg"></a>
<a href="detail.php?id=02"><img src="hugahuga.jpg"></a>
EOL;

list.jp

var data = {
 "01":{"id":01, "text01":"説明テキスト1-01", "text02":"説明テキスト1-02", "img":"http://0123.jpg"},
 "02":{"id":02, "text01":"説明テキスト2-01", "text02":"説明テキスト2-02", "img":"http://0000.jpg"}
};

$(function(){
 $("#text01").append("<p>"+data[i].text01+"</p>");
 $("#text02").append("<p>"+data[i].text02+"</p>");
 $("#image").append('<img src="'+data[i].img+'">');
});

detail.php

<?php
if (isset($_GET['id'])) {
$i = preg_replace('/[^0-9]/', '', $_GET['id']);
} else {
$i = 0;
}
?>
...
<script>var i = "<?= $i ?>";</script>
<script src="list.js"></script>

<div id="text01"></div>
<div id="image"></div>
<div id="text02"></div>


でも、以下の様にしたら JavaScript は要らない。
detail.php

<?php
$data = array(
 "01"=>array("id"=>"01", "text01"=>"説明テキスト1-01", "text02"=>"説明テキスト1-02", "img"=>"http://example.com/img/0123.jpg"),
 "02"=>array("id"=>"02", "text01"=>"説明テキスト2-01", "text02"=>"説明テキスト2-02", "img"=>"http://example.com/img/4567.jpg"),
);
?>
...
<?php if (isset($data[$i])):?>
<div><?= '<p>', $data[$i]['text01'], '</p>'; ?></div>
<div><?= '<img src="', $data[$i]['text01'], '" />'; ?></div>
<div><?= '<p>', $data[$i]['text02'], '</p>'; ?></div>
<?php endif;?>

匿名回答2号さんのコメント
$data の定義部分を外部ファイルにして、include してやるのも可。 外部に出すついでに、XML で書いてやれば多少読みやすいかも。 (もちろん detail.php でパースする必要はあるけれど) 外部ファイルにするのとDBに入れておいて読み出して使うのは本質的には同じ事だと思います。 今時 PHP5.3未満を使っているとは考え難いので、SQLite は多分使えると思います。 Windows だと自前でコンパイルする必要があると本家のマニュアルにあるけど、全く手に入らない訳じゃないし... 当初の予定通り、DBを使うのがあるべき姿だと思うけど?

匿名質問者さんのコメント
ありがとうございます。特にJSというこだわりは正直無いです。 PHPよりはJSのほうが使えるからそっちでできるかな程度です。 頂いたコード、まさに自分のやりたいことにドンピシャな感じです。 こちらで試してみたいと思います。 ご丁寧に回答頂きましてありがとうございます。

匿名回答2号さんのコメント
> 頂いたコード グローバル変数で表示すべきものを決めている点でナシだと思うので、PHPオンリーの方だと思います。 ならば、PHP でDBを操作するのはそんな難しくないですからDB化した方が良いと思います。 $data を前件直接書くってのもメインテナンス性が悪すぎるでしょうから。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ