匿名質問者回答ポイント なしウォッチ

【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>

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

• はてなアカウントでログイン
• 無料ユーザー登録

みんなの回答

• 匿名回答1号2015/02/17 13:53:59

  各画像は実際に別ページにする必要ありますか？
  パッと思いついたというか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で別ファイルとか可能なのもあるかもしれませんが。

  • 

    1件のコメントを見る

  • 匿名質問者 2015/02/17 14:06:17

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

匿名回答2号2015/02/18 00:12:53

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

• 

  2件のコメントを見る

• 匿名質問者 2015/02/18 10:16:45

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

• 匿名回答2号 2015/02/19 01:26:02

  もう少し考えてみると「ＤＢ要らなくね？」って感じが...
  
  > 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>';
  のように説明文部を出力。
  
  
  なんだか無理やり感がするので、ＤＢでやった方が楽でしょうね。
  
  
  どちらにしろ gallery.php で全て生成できるので JavaScript で書く必然性を感じません。
  強いて使うなら一覧ページで使えなくはないでしょうが、Ajax でリクエストを投げる先でやる処理を最初からやるだけですし...

匿名回答1号2015/02/18 21:53:07

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

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

二つのページでデータ共有するなら元データは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のデータ形式は単なる配列形式にしたけど、メンテ考えると連想配列の方がやっぱりわかりやすいのかな？

匿名回答2号2015/02/21 01:07:55

必要性を感じませんが、どうしても 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;?>

• 

  3件のコメントを見る

• 匿名回答2号 2015/02/21 01:39:29

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

• 匿名質問者 2015/02/21 12:49:10

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

• 匿名回答2号 2015/02/23 23:54:08

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

• その他の回答を読む

この質問へのコメント

• 匿名質問者2015/02/20 18:42:29
  皆さん、ありがとうございます。
  頂いた意見を参考に自分なりに色々調査させて頂いております。
  
  JSもPHPもあまり万能に使いこなせるわけではないので、ぼんやりとしかイメージが湧いていないのですが、自分的には以下の様なことをやりたい。
  でも?id別に表示項目を変える方法がよくわからないというのが段々わかってきました。
  
  もしかしたら、考え方が間違っているのかもしれませんし、もっとシンプルな方法もあるのかもしれませんが、もしアドバイス等いただけましたら幸いです。。
  
  よろしくお願い致します。
  
  list.php
  　< a href="detail.php?id01">< img src="hogehoge .jpg"></a>
  　< a href="detail.php?id02">< img src="hugahuga .jpg"></a>
  
  list.js
  var data = [
  {"id":01, "text01":"説明テキスト01", "text02":"説明テキスト02", "img":"http://~.jpg"}
  {"id":02, "text01":"説明テキスト01", "text02":"説明テキスト02", "img":"http://~.jpg"}
  ]
  
  for(var i in data){
  $(".text01").append("<p>"+data[i]text01+"</p>");
  $(".img").append('<img src="'+data[i]img01+'">');
  }
  
  detail.php
  　<div class="text01"></div>
  　<div class="img"></div>

質問の情報

登録日時

2015-02-17 09:43:40

終了日時

2015-02-24 09:45:04

回答条件

1人5回まで

この質問のカテゴリ

• ウェブ制作

この質問に含まれるキーワード

人気の質問

• 【短い間に、、、、】、という意味で、 「いちにち　ふつか　で」「いちにち　ふつか　のうちに」とか言い…匿名質問者221日前
• 皇族数確保の為の有識者会議で、 （A）皇族女子の婚姻後の身分を皇族とすることを認めるという案 （B）養子…匿名質問者11日前
• 公募ガイドや公募ナビのようなサイトをご存じの方、ご教示ください匿名質問者11日前
• 公募ガイドや公募ナビの様な自動で掲載される紹介サイトをご存じの方いらしゃいますか…Aa11311日前
• 垢ぬけたいです。 丸顔ってどうやったら改善しますか？匿名質問者21日前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ