サイト上部にヘッダ、サイト左側にサイドメニューを用意し、ヘッダやメニューのリンクをクリックすることで、サイト全体ではなくコンテンツ部分のみ更新するようなものを実現しようと思っています。
下記サイトの様なものが理想です。
http://www.hcii.cmu.edu/
http://www.connect-tech.co.jp/products/index.html
frameタグ、PHPやWordpressを使用せずに実装したいと考えています。
実現する方法があれば教えてください。
No.4
508
34
18pt
私ならば、id:asuka645 さんと同じように、Javascript のinnerHTML で実装します。
一時期、職場を管理しているサーバの仕様がPHPやcgi等のスクリプトを実装できなかった時期に、
innerHTMLで実装したことがあります。但し、PHP等で通信ができないため、
あまり実装する必要性を見出せませんでした。ただソースコードが見えにくくなるだけでした。
javascriptのみのAjaxで実装する方法は、ちょっと私には実装方法が不明です。
Ajaxの主たる部分である、XMLHttpRequestは、セキュリティを担保するため、
クロスドメイン制限がかかっているはずです。
他には、JSONを使う方法もあります。
私は、ちょっとしかJSONを扱ったことがありませんので、
詳しくは説明できませんが、
http://shokai.org/blog/archives/993
等が参考になるかと思います。
また、さらにこれもやったことがないので、紹介のみですが、
HTML5+CSS3で実装することもできそうです。
今後はHTML5が一般的になると思うので、勉強のために、実装するのも良いかも知れません。
http://www.publickey1.jp/blog/09/webhtml5css3javascript_20.html
ただし、HTML5は、
http://www.publickey1.jp/blog/10/_46html5.html
にもあるように、Internet Explorerが未だ対応していないので、
人によっては正常に表示されない可能性があります。
そこで、対応していないブラウザの時は、別の手段で実装するという
面倒な作業が待っています。
どれにするかはいろいろな手段がありますが、
どれにしようと考える時が一番わくわくしますね。
頑張ってくださいね。
No.2
49732154
19pt
理想としてあげてもらったサイトでは、メニューをクリックしたときにコンテンツだけじゃなくて、
ページ全体を読み直しているけど。
メニューの位置をカチっと決めてあげれば、メニューを書きなおしているように見えない（ことが多い）、ということじゃない？
サイトのレスポンスが速かったのでコンテンツ部分だけ変更しているように見えたのですが、やはりページ全体の読み直しだったのですか。サイト全体の書き直しが必要になるので、できれば避けたいところです。
No.4
50834
ここでベストアンサー
18pt
私ならば、id:asuka645 さんと同じように、Javascript のinnerHTML で実装します。
一時期、職場を管理しているサーバの仕様がPHPやcgi等のスクリプトを実装できなかった時期に、
innerHTMLで実装したことがあります。但し、PHP等で通信ができないため、
あまり実装する必要性を見出せませんでした。ただソースコードが見えにくくなるだけでした。
javascriptのみのAjaxで実装する方法は、ちょっと私には実装方法が不明です。
Ajaxの主たる部分である、XMLHttpRequestは、セキュリティを担保するため、
クロスドメイン制限がかかっているはずです。
他には、JSONを使う方法もあります。
私は、ちょっとしかJSONを扱ったことがありませんので、
詳しくは説明できませんが、
http://shokai.org/blog/archives/993
等が参考になるかと思います。
また、さらにこれもやったことがないので、紹介のみですが、
HTML5+CSS3で実装することもできそうです。
今後はHTML5が一般的になると思うので、勉強のために、実装するのも良いかも知れません。
http://www.publickey1.jp/blog/09/webhtml5css3javascript_20.html
ただし、HTML5は、
http://www.publickey1.jp/blog/10/_46html5.html
にもあるように、Internet Explorerが未だ対応していないので、
人によっては正常に表示されない可能性があります。
そこで、対応していないブラウザの時は、別の手段で実装するという
面倒な作業が待っています。
どれにするかはいろいろな手段がありますが、
どれにしようと考える時が一番わくわくしますね。
頑張ってくださいね。
ありがとうございます。参考にさせていただきます。調査して実装するまで時間がかかるので今は何とも言えませんが、がんばってみます。
No.5
40148
18pt
＞サイト全体ではなくコンテンツ部分のみ更新するようなものを実現しようと思っています
そう見えるだけで、実際にはページ全部書き換わってるんです。
http://www.css-designsample.com/csslayout/float-2column.html
ここにある、
◦2カラム固定幅のCSSサンプルソース
◦3カラム固定幅のCSSサンプルソース
をローカルでもよいので試してみれば、確認できると思います。
ちなみに、質問文の２つのサイトも部分書き換えでなくて
すべて書き換わってます。
ヘッダーと左サイドバーが書きまわってないように見えるだけなんです。
サイト内のページ全て手動で書き換えなければなりませんね。なんかいい着地点があればいいんですけど。
No.6
114287
18pt
prototype.jsで外部htmlファイルを読み込む
http://sevenstyleweb.com/blog/2008/05/prototypejshtml.html
この方法で実現可能です。
回答であがっている他のも同様ですが、
javascriptで実装する方式（Ajaxも含む）では、Googleとかの検索エンジンに
その部分が認識されませんので（単なるJavascriptと認識される）、
かなり、SEOとしては不利になります。
だから、あまりそんなことをする人はいません。
11
11
2
ありがとうございます。参考にさせていただきます。調査して実装するまで時間がかかるので今は何とも言えませんが、がんばってみます。