- ベストアンサー
そのページ内のある箇所のコンテンツだけを変える
すいません。質問させていただきます。 上記にも書きましたが 「そのページ内のある箇所のコンテンツだけを変える」 詳しくは、そのページで写真が並んである箇所があり、 1｜2｜3｜4… と番号を振り、番号を押すとその写真のコンテンツ部分だけが更新？変わっていくようにしたいんです。 調べていてAJAXやPHPでできるということまでは理解できたのですが、 まったくわからないのが、その変わるコンテンツはどこに記述すればよいのでしょうか？？ やっぱり、そこの部分だけのHTMLを組まなくてはいけないのでしょうか？ AJAXもPHPも初心者ですが、ご教授お願いします。
- mayama27
- お礼率87% (7/8)
- PHP
- 回答数8
- ありがとう数10
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
com.bydust.ajaxを使ってmayama27が希望している表示を実現する方法を以下にまとめまてみます。 用意するファイルは以下の6個。全て文字コードはUTF-8で統一すること。今回は説明を簡単にするために、全て同一ディレクトリ内にあるものとする。 com.bydust.ajax.js --- (1) com.bydust.array.js --- (2) main.js --- (3) gallery001.html --- (4) gallery002.html --- (5) gallery003.html --- (6) (1)と(2)は下記ページからダウンロードできます。 http://www.bydust.com/examples/com.bydust.ajax/download.php (3)を作る。内容は下記の通り。 ------------------------------------------------ window.onload = function() { var refreshed_content = Array('!content','sidebar'); bda.loadText = '<span id="loading">Loading content, please wait ...</span>'; bda.calculateText = '<span id="loading">Preloading images, parsing content ...</span>'; bda.errorText = '<h1>The page could not be loaded</h1><p>If you keep getting this the server can be down or somethings wrong with your connection.'; bda.imagesNotLoadedText = '<span id="loading">Some images could not be loaded.<br/>The page will display without these images.</span>', // debug mode //bda.debugMode = 'list'; bda.start(refreshed_content); } ------------------------------------------------ (4)を作る。内容は下記の通り。 ------------------------------------------------ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Gallery001</title> <script type="text/javascript" src="com.bydust.ajax.js"></script> <script type="text/javascript" src="com.bydust.array.js"></script> <script type="text/javascript" src="main.js"></script> </head> <body> <div id="page"> <div id="content"> <!-- begin content --> このページは [gallery001] です。 <!-- end content --> </div> <div id="sidebar"> <!-- begin sidebar --> <ul> <li><a href="gallery001.html">Gallery001</a></li> <li><a href="gallery002.html">Gallery002</a></li> <li><a href="gallery003.html">Gallery003</a></li> </ul> <!-- end sidebar --> </div> </div> </body> </html> ------------------------------------------------ ファイル(4)を複製して(5)と(6)を作成し、ファイル(5)内の【このページは [gallery001] です。】部分を【このページは [gallery002] です。】に変更。更にtitle部分も【gallery002】に変更して保存。 同様にして、ファイル(6)内の【このページは [gallery001] です。】部分を【このページは [gallery003] です。】に変更、title部分も【gallery003】に変更して保存。 以上の作業が完了したら gallery001.html をブラウザで開いて確認。 各ギャラリーへのリンクをクリックすれば<!-- begin content -->と<!-- end content -->で挟まれた部分だけが動的に書き換えられるはずです。 読み込み中であることを示す画像（クルクル回るやつ）を表示したい場合には、上に示したURLからサンプルファイルをダウンロードしてください。画像も入ってますし、使い方に関しては同梱されているCSSファイルを見れば一目瞭然です。
その他の回答 (7)
- hide1978
- ベストアンサー率42% (32/75)
乗りかかった船ということで確認してみました。答えは「lightbox.jsとcom.bydust.ajaxの共存は可能」です。私の環境では正常に使用できています。 lightboxで表示しようとしている画像が別窓で開くということなので、タグの記述ミスがないか確認してみてください。例えば <a href="images/image-1.jpg" rel="lightbox"> とすべきところを <a href="images/image-1.jpg" rel="lightbox> <- rel属性の最後にダブルクォーテーションが抜けている とミスるだけでlightboxは正常に動きません。
- hide1978
- ベストアンサー率42% (32/75)
> 書いてある通りにデモ版として作ってみたんですが、全ページに言え > ることですが、リンクをクリックすると下のエラー文が出てきてしま > います。 自分が書いた回答を見ながら、書いている手順に沿ってやってみましたがエラーは出ませんでした。ブラウザが原因かな？と思ってFirefox3・IE8・GoogleChrome・Safari3・Lunascape5で確認しましたが、いずれのブラウザでもエラーは出ませんでした。 もう一度、手順を確認してやってみてください。それでも解決しない場合には、申し訳ないですが私にはお手上げです。
お礼
毎度、回答ありがとうございます。 遅くなってしまってすいません。 できました！ただ単にアップロードしないでプレビューで仕上がりを見てたので結果が表示されなかっただけみたいです。 そして、作ってるサイトに反映させたのですが、またもや問題がありまして… 何度も本当に申し訳ないのですが、簡潔に言うと 「lightboxを使ってるコンテンツにこのAjaxのシステムは使えないのでしょうか？」 というのも、自分が作ってるサイトで部分だけをこのAjaxシステムを応用して動的に変えることに成功しました。 しかし、その変わるコンテンツの中の写真にligthboxの効果がなくなってしまいました。 普通に別窓で表示されるだけになってしまいました。 この２つのシステムを同時使用というのは無理なのでしょうか？＞＜
- hide1978
- ベストアンサー率42% (32/75)
一部訂正。 com.bydust.ajaxを使ってmayama27が希望している表示を実現する ↓↓↓ com.bydust.ajaxを使ってmayama27さんが希望している表示を実現する 呼捨てにしちゃって申し訳ない。orz
お礼
いえいえwとんでもないです。 早速の回答ありがとうございます。 書いてある通りにデモ版として作ってみたんですが、全ページに言えることですが、リンクをクリックすると下のエラー文が出てきてしまいます。 動的にはなっているのですが… 「The page could not be loaded If you keep getting this the server can be down or somethings wrong with your connection.」 何かが足りないのでしょうか？？ それさえわかれば、作ってるサイトのほうに応用できそうなんですが… もう一度お願いします。＞＜すいません
- koke29
- ベストアンサー率58% (114/196)
index自体がプログラムで、URLの切り替えによって読む画像とかを判別 してると思うので、HTML部分の記述は1P目も2P目も同じだと思いますよ <img src="この中を変数で扱っているんだと思います"> URLを見ればわかるように前半部分は1P目も2P目も同じで、後半部分が ページ送りみたいな引数がついてますよね あそこの数値で読み込む画像を指定しているのだと思います 凄く単純なサンプルだと if($page==1){$img = "aa.gif";} if($page==2){$img = "bb.gif";} としておくと、$pageが1の時はaa.gifを表示する みたいなことです
お礼
回答ありがとうございます。 それと、一番重要なことを付け忘れてました。 http://www.blog.tsuchiyama.info/2008/11/ajax.html こちらのサイトで紹介されているAJAXのライブラリ？を使って実現したいんです。 この技術を使った上で参考にしているサイトのようにできませんか？すいません でも、問題の点は変わりませんが…
補足
URLミスってますね。 http://www.blog.tsuchiyama.info/2008/11/ajax.html こちらが正しいです。 よろしくお願いします。
- hide1978
- ベストアンサー率42% (32/75)
> 右上に「1｜2」とあり、番号押すと写真ギャラリーだけが次ページに > 行くってな感じになってます。 > ここをCGIではなくAJAXやPHPでできるんじゃないか？と調べていて思 > いまして このサイトは写真ギャラリーだけが次ページに移動する形にはなっていませんね。[2]をクリックした際にはページ全体をcgiで書き換えています。使用している言語は判りませんが、おそらくPerlか何かでプログラムを書いて制御しているんだと思います。 このサイトの場合は、ベースとなるHTMLをテンプレートで用意しておいて、画像のサムネイルと付随する説明文の部分だけをプログラムで動的に書き換える仕組みだと思います。 これと同じ様な仕組みを自分で作るとなると、PHPやPerl等のプログラミングに関する知識が必要となります。また、動的に書き換える部分（今回はサムネイル画像や付随する説明文）のデータをどこに保存しておくのかという問題もあります。MySQLやPostgreSQL等のデータベースに保存するのが一般的ですが、CSV形式でファイルに保存しておくことも可能です。 > 自分の憶測なのですが… > AJAXやPHPが自動で生成してくれるのか？PHPのプログラム内に変わっ > た時の写真ギャラリー部分のHTMLを記述させておいて、2番を押した > らそのHTML部分を呼び出す仕様にしているのか？ 処理的には「PHP等のプログラムが自動で生成してくれる」が正解ではありますが、自動で生成してくれるプログラムを自分で書く必要があります。そのプログラム内に写真ギャラリーのHTML部分を書く事も可能ではありますが、普通は別の場所（データだけを記述したファイルやデータベースを利用）からデータを読み込んで、プログラム側で動的にHTMLを生成します。
お礼
回答ありがとうございます。 それと、一番重要なことを付け忘れてました。 http://www.blog.tsuchiyama.info/2008/11/ajax.html こちらのサイトで紹介されているAJAXのライブラリ？を使って実現したいんです。 この技術を使った上で参考にしているサイトのようにできませんか？すいません でも、問題の点は変わりませんが… ＞プログラム側で動的にHTMLを生成します。 特にそれなんです！そこがまったくイメージできないんです。 そこの点も詳しくお願いできませんか？＞＜
- yambejp
- ベストアンサー率51% (3827/7415)
ajaxいらなくないですか？ 見る限りたんにjavascriptで、imgのsrcを入れ替えてやるだけですね
お礼
早速の回答ありがとうございます！ 説明不足ですいません。 URL載せて大丈夫なのかと思いましたが… http://www.kamiyad.jp/works/index.cgi ↑こちらのサイトさんの感じが理想なのですが、 右上に「1｜2」とあり、番号押すと写真ギャラリーだけが次ページに行くってな感じになってます。 ここをCGIではなくAJAXやPHPでできるんじゃないか？と調べていて思いまして投稿した次第なのですが そこで問題なのが、1番のページから2番を押したときに変わった写真ギャラリーのHTMLはどこに記述すればいいのでしょうか？というのが最大の疑問です。 自分の憶測なのですが… AJAXやPHPが自動で生成してくれるのか？PHPのプログラム内に変わった時の写真ギャラリー部分のHTMLを記述させておいて、2番を押したらそのHTML部分を呼び出す仕様にしているのか？ 因みに参考にしているサイトさんは違いますが、 自分が今作ってるサイトは写真をクリックした時はlightboxを使用しています。 もう一度、お力添えをお願いします。すいません！
- hide1978
- ベストアンサー率42% (32/75)
最近は優秀なAjaxライブラリが豊富なので、私ならAjaxで実現します。 個人的にオススメなのは「JonDesign’s SmoothGallery」(参考URLの1番目)です。HTMLでサムネイルを表示させておいて、それを画面遷移なしで順番に表示するだけなら「Lightbox2.0」(参考URLの2番目)なんかを使っても良いかもしれません。 Googleで「Ajax フォトギャラリー」をキーワードにして検索すると多くの情報が手に入りますので、ご自身のサイトに合ったものを探すのも楽しいと思いますよ。
お礼
早速の回答ありがとうございます！ 説明不足ですいません。 URL載せて大丈夫なのかと思いましたが… http://www.kamiyad.jp/works/index.cgi ↑こちらのサイトさんの感じが理想なのですが、 右上に「1｜2」とあり、番号押すと写真ギャラリーだけが次ページに行くってな感じになってます。 ここをCGIではなくAJAXやPHPでできるんじゃないか？と調べていて思いまして投稿した次第なのですが そこで問題なのが、1番のページから2番を押したときに変わった写真ギャラリーのHTMLはどこに記述すればいいのでしょうか？というのが最大の疑問です。 自分の憶測なのですが… AJAXやPHPが自動で生成してくれるのか？PHPのプログラム内に変わった時の写真ギャラリー部分のHTMLを記述させておいて、2番を押したらそのHTML部分を呼び出す仕様にしているのか？ 因みに参考にしているサイトさんは違いますが、 自分が今作ってるサイトは写真をクリックした時はlightboxを使用しています。 もう一度、お力添えをお願いします。すいません！
関連するQ&A
- 階層の少ないページ作り
最近PHPにて、ホームページのヘッダーとかのテンプレート等作成している初心者です。 ●●.php?mode=○○ こういう感じのアドレスを最近良く見かけ、一つのファイルから呼び出しているように思うのですが、分りません。 友人に聞くところによると、●●.phpを指定しつつ変数を与えてるとかって言ってましたが、何分入りたてなので理解ができませんでした。 一つのファイルで、上記のようなURLでのリンクのページ等を作りたいと思ってます。 今まではHTMLのみで各コンテンツごとにフォルダを作ってましたので、こういうのが出来たら管理しやすいかと思いましたので宜しくお願い致します。
- ベストアンサー
- PHP
- ウエブページにssiで挿入されるコンテンツの更新を「ブラウザに対してこのページの送信が行われる期間以外」に行う方法
一部のコンテンツがssiで挿入されるウエブページを生成する場合、 「ブラウザに対してこのウエブページの送信が行われている期間を避けて、上記コンテンツを更新する」には、 phpやjavascriptでどのような処理をすればよいか教えて下さい。 なお、ブラウザに対する送信は、コンテンツの更新の前と後との何れで行われても結構です。 以上、よろしくお願い致します。
- ベストアンサー
- PHP
- データベースにアクセスするWebページ
どちらに質問してよいかわからずこちらに質問させていただきます。 私が担当しているのは、既に公開されているWebページの変更です。 写真や文字列など、変更があるたびにHTMLファイルを開いて 手作業で更新作業をしているところに、データベースにアクセスして データベースの情報を表示するように変更することになりました。（←ここが私の担当です） ※既存のWebページは私が制作したものではありません。 「困っているのは既存のWebページへの実装方法」で、 既に試した方法は １． データベースの情報を表示する箇所を、まるまる 別HTMLで作成し、JavaScriptでajax通信にて動的に項目を作成するページをつくって IFRAMEにて既存のページに埋め込む方法をしてみました。 見事動作したのですがこれには問題点がありました。 それは私が実装したIFRAMEの中のHTMLは、JavaScriptが読めない人には 扱えないということでした。 また、JavaScriptだけでなく、CSSも既存ページに合わせて作り直す必要もあり、 他のページに同じようにデータベースの内容を表示して！と言われたら大変な手間がかかります。 ２． 既存のHTMLファイルにオリジナルのスクリプトを埋め込む方法。 たとえば<span>#todays_news;</span>のような感じです。 この方法で記述して、http://xxx.jp/解析.php?url=HTMLファイル にアクセスすると解析.phpがオリジナルスクリプトの埋め込まれたHTMLファイル内の スクリプトを、データベースから取得したデータに置き換えて出力します。 これの問題点は サイトのindexからリンクをクリックしてもらえれば解析.phpを通して データベースの内容で置き換えたページが出力されますが、 直接、HTMLファイルへアクセスされるとオリジナルスクリプトが丸見えになってしまいます。 またSEO対策で不利になるのではと考えています。 そこで、データベースの内容を変更すると、すべてのHTMLファイルを解析.phpに通して出力してしまおう、という考えです。しかしこれだとデータベースの内容を変更するたびすべてのHTMLを書き換えることになり、なんとも効率的ではない気がするのです。 データベースの内容を表示するのに、 HTMLをロードしてからJavaScriptにて動的にコンテンツを生成するのか、 なにかしらの方法で、データベースの内容を反映させたHTMLファイル（静的）を置くのか はたまた、違う方法なのか、 とーっても悩んでおります；；；；；；；； 職場にはJavaScriptやPHP,MySQL等を理解しているものはおらず、 だれにも聞けなくてここで質問させていただきました。 どうかアドバイスお願いいたします＞＜。
- ベストアンサー
- その他([技術者向] コンピューター)
- フルＦＬＡＳＨでコンテンツの切り替え
こんにちは。 flash初心者で、勉強用のサイトをオールflashで作成しているところです。 今まで、ＨＴＭＬの中に小さなflashムービーを貼り付けたサイトなどは作ったことがあるのですが、オールflashでのサイト作りを勉強していて疑問があります。 http://townwork.net/h/contents/joboob/index.html 上記のサイトのように、コンテンツがきりかわってもＵＲＬが同じものは「サイト全体が１つのswfで作成されている」ということですよね？ それでは、http://www.jillstuart-beauty.com 上記のサイトのようにそれぞれのコンテンツに個別のＵＲＬがあるものはどのように作成しているのでしょうか？各ページのソースを見ても、全く同じ記述になっており、それぞれに別のswfが貼り付けられているわけではないということまではわかったのですが、その仕組みがわかりません。 コンテンツ間の移動にも再度ページが読み込まれることなくムービーが動いています。これはどうやっているのでしょうか？ 教えてください。お願いいたします。
- ベストアンサー
- その他（インターネット・Webサービス）
- javascriptファイルの運用
お世話になります。 PHP + HTML + javascript(Ajax）で開発しております。 javascriptは外部ファイルにしておりますが HTMLページのダウンロードをユーザーにされると javascriptの内容が分かってしまいます。 ただのHTMLの操作だけだったら構わないのですが ajaxから登録、更新、削除などしておりますので、PHPにどういうパラメータを渡して 、、、という情報が丸見えになるのですが、 こういう場合、皆様はどのように運用しているものなのでしょうか？ ご教授宜しくお願い致します。
- ベストアンサー
- JavaScript
- 投稿されたコンテンツをページの情報として表記する
このサイトや投稿サイトのように投稿されたコンテンツをページの情報として表記するためにはphpなどサーバサイドの言語でHTMLを生成するしかないのでしょうか？ できればJSで行いたかったのですが、その場合Nodejsをサーバサイドの言語として選択してphpなどは使わないしかないでしょうか？
- ベストアンサー
- JavaScript
- １ページ内のコンテンツをタブメニューで切り替えたい。
こんばんは、以下のURLを参考に１ページ内のコンテンツを切り替えようと試行錯誤したのですが、メニューをdivでくくってしているため、どのように記述したらよいかわからず困っています。 参考URL http://builder.japan.zdnet.com/news/story/0,3800079086,20387833,00.htm 左のメニューで右のメインコンテンツのレイヤーを切り替えられたいと思い作ったページです。実際に表示したい部分はコメントアウトしています。 floatでは、z-indexが使えないので無理やり、positionでレイアウトしていますが、よろしくおねがいします。 http://study.vs.land.to/index.html
- ベストアンサー
- HTML
- php ログインID別 ページ表示
お世話になっております。 PHP初心者です。 どなたかおわかりの方がいらっしゃいましたら、ご教授お願いいたします。 http://oshiete1.goo.ne.jp/qa5743557.html を拝見させていただいたのですが、上記のURLの記述にてログインIDによるページを変更するのはどうしたらよろしいのでしょうか? 例↓ NO1 ID:abc PW:1234 name:山田 NO2 ID:def PW:5678 name:佐藤 とDBに登録していたとします。 両方のIDとPWでログインしたときはmember.phpが表示される。 ここでIDによってmember.phpに表示されるリンクがかわる。 NO1でログインした場合member.phpにはcontents.phpあてのリンクが表示されている。 NO2でログインした場合はmemebr.phpにはcontents.phpとcontents2.phpあてのリンクが表示されるようにするにはどうしたらよろしいでしょうか? 上記のURLを参考にしたいので宜しくお願いいたします。
- ベストアンサー
- PHP
- Javascriptで表示のページをPHPで読む
Javascriptを使って表示されているウェブのコンテンツをPHPで読み込む方法について教えてください。 HTMLで作られている場合は「file_get_contents」でHTMLソースを取得できますが、Javascriptを使って表示されたページのソースを読み込むにはどのようにしたらよいのでしょうか。 読み込みたいページは下記のような構造になっています。 <html> <head> </head> <body> <h2>タイトル</h2> //ここのコンテンツ部分がJavascriptをONにしないと見えない。 </body> </html>
- ベストアンサー
- PHP
お礼
返事とても遅くなってしまってすいませんでした！ 乗船して頂いたこと深く感謝します。 公式の？ページからlightboxをダウンロードしたものを使用した結果、なんとか共存させることに成功しました！ 多少の問題はあるんですが…；； 何から何までありがとうございました！