匿名質問者
匿名質問者匿名質問者とは「匿名質問」を利用して質問した質問者。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら

【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人5回まで
  • 13歳以上
  • 登録:2015/02/17 09:43:40
  • 終了:2015/02/24 09:45:04

回答(4件)

匿名回答1号 No.1

匿名回答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で別ファイルとか可能なのもあるかもしれませんが。

匿名質問者

ご回答有難うございます。

作りたいものは、画像の一覧があり、それをクリックすると詳細ページに飛ぶ。
詳細ページには、画像やら説明文やら色々書くページです。

URLのaタグに何らかのハッシュ等を持たせて、それにより飛び先のページの中身を差し替えたいという内容です。

なので、別ページに飛ばす必要が今回の場合あります。

仰るとおりjQueryでタグを書いている必要があるのだろうと思っているのですが、その記述がいまいちよくわかっていないので、その方法を伺いたく質問をさせて頂いておりました。

2015/02/17 14:06:17
匿名回答2号 No.2

匿名回答2号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2015/02/18 00:12:53

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

匿名質問者

ご回答有難うございます。
仰るとおりMySQLが使えない環境です。

そのため、jQueryとAjax(なんとなくしかわからないのですが・・)を使って、ページを更新させることは出来ないかと思っていたのですが(自分の勉強含め)

SQLiteについてもちょっと確認して見ます。

ありがとうございました。

2015/02/18 10:16:45
匿名回答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 でリクエストを投げる先でやる処理を最初からやるだけですし...

2015/02/19 01:26:02
匿名回答1号 No.3

匿名回答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号 No.4

匿名回答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;?>
他1件のコメントを見る
匿名質問者

ありがとうございます。特にJSというこだわりは正直無いです。
PHPよりはJSのほうが使えるからそっちでできるかな程度です。

頂いたコード、まさに自分のやりたいことにドンピシャな感じです。

こちらで試してみたいと思います。

ご丁寧に回答頂きましてありがとうございます。

2015/02/21 12:49:10
匿名回答2号

> 頂いたコード
グローバル変数で表示すべきものを決めている点でナシだと思うので、PHPオンリーの方だと思います。

ならば、PHP でDBを操作するのはそんな難しくないですからDB化した方が良いと思います。
$data を前件直接書くってのもメインテナンス性が悪すぎるでしょうから。

2015/02/23 23:54:08
  • 匿名質問者
    匿名質問者 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>

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません