jqueryのタブ切り替えについて

jqueryのタブ切り替えについて

jquery初心者です。
某ポータルサイトを運営していて、
今回jqueryを使ってタブ切り替えを作りたいと思っています。
http://www.samuraitype2.com/demo/20090306/index. …
こんな感じのものです。


ホットペッパービューティーのようにタブを押して切り替えたいのですが、（←おそらくPHP）
PHPがよくわからないもので、、


そこで、質問ですが
上のURLのサンプルは少量のテキストのみでしたが、
お店の写真数枚やgoogle map、FLASH動画などの内容で切り替えを行ってく上で
動作に重たさは出るのでしょうか？
ぱっ、ぱっ、と切り替わらず、少々読み込みがかかってしまうのでしょうか？

教えて下さい。


そもそもjquery自体よくわかってはいないのですが、Javascript？
jqueryで色々種類があるんで、どういう意味なんでしょうか？


宜しくお願い致します。

No.5 ベストアンサー 回答者： tracer 回答日時： 2010/09/27 18:51

おっしゃっていることを私がやるとするならば、店舗数が多いのであれば、MySQLなどのデータベースに店舗情報を格納して、PHPで取り出します。

そしてその結果をJavaScriptを使用してタブ形式のコンテンツに仕上げます。

質問者さんの場合、技術的なことよりも先に、まずJavaScriptでできること、PHPでできることを概念的に吸収されることをおすすめします。
また、PHPやJavaScirptを扱うには、HTML&CSSを理解していることが前提となります。

例のコンテンツに対して質問者さんがどこまでコスト(時間)を使えるかにもよりますが、仮に質問者さんのスキルが、HTML&CSSの理解が中途で、その上で、未経験のPHP&JavaScriptを使いたいというものであれば、1、2週間モニタとにらめっこすればできるというものではありません。もちろん人によりますが、2、3ヶ月の学習期間は覚悟する必要があると思います。

あまりコストを割きたくないのであれば、どこかのテンプレートをそのまま使うという選択になると思います。もちろんこの場合、コストを使わない分、多くを求めることはできません。

この回答へのお礼

ありがとうございます。
その後、私も友人に聞いたりし、なんとなく意味がわかってきました。

カテゴリーページはMySQLのデータベースで条件抽出を行い作りたいと思います。（いわゆるこれがPHP+MySQLですかね？）

あとはタブですが、これはページを分けた方がいいのか、javascriptで同一ページ内で作るか、、
ホットペッパービューティーはどうやらPerlで作ってるっぽいですね。

狙いとしては、重くなく、さくさく切り替えができ、
且つ、SEOに強く、更新しやすいページにしたいと思っています。


ページを分けると
・更新しにくい
・内容が分担されてしまうからSEOに弱くなる

javascriptで同一ページで作ると
・更新しやすい
・SEOに強い
・ただし情報量が多いので最初の読み込みが遅くなる？

僕のイメージではこういう感じです。
最適な方法は何なんでしょうか

またタブで分けても内容がかぶって載ってる箇所っていうのは
PHP等で同期できるものなのでしょうか？
それともホットペッパービューティーは各箇所を修正しているのでしょうか？

今の段階ではまずはPHPの基礎から勉強していきたいと思っています。

お礼日時：2010/09/28 09:34

No.6 回答者： tracer 回答日時： 2010/09/28 19:33

ひとことで言ってしまえば、最適な方法、つまり正解なんてものはありません。

やりかたは十人十色ひとそれぞれです。ただ、文中のおそらくの誤解を指摘するならばSEOの箇所でしょうか。javascript(Ajax)で読み込みんだ情報は現段階でSEO効果は皆無です。また、情報量によってはページを分けたほうがSEO効果が高い場合もあります。

とはいえ、高い志をお持ちのようですね。
未経験の分野に足を踏み入れるのですから、今後疑問は絶えないでしょう。個人的には、WEB技術を学ぶのに一番必要な能力は検索力だと思っています。仮にお近くにWEB技術に詳しい人がいたとしても、疑問の都度質問していてはラチがあきません。また、OKWaveなどのサービスによる他力ではどうにもならないことがほとんどでしょう。

正直、すでに知っている人からすれば、質問者さんの文面はつっこみどころが満載です。ただ、そのひとつひとつをすべて訂正して回答することなんていうこともできません。たとえば、今回の質問は非常に広範囲で、jQuery、javascript、php、perl、mySQL、SEO。全部知らないのだから全部知りたいのでしょうが、とても効率が悪いと思います。まず、自分の質問したいことが何かを理解して、的を絞って質問をすることで、より質の高い回答が得られると思いますよ。

No.4 回答者： tracer 回答日時： 2010/09/27 09:49

> jqueryは軽いんですね。

> ちなみにPHPと比べるとどっちがいいのでしょうか？
> また、作りやすさ、ページの完成度でいうとどちらでしょうか？

ホームページ制作の技術として学ぶのはどれがいい？という質問でしょうか。
JavaScriptとjQueryとPHPは、それぞれ同列の関係ではなく、比較の対象にはなりえません。
そして、正確に答えれば答えるほど難解な回答になってしまいそうです。

「jqvascriptと比較してjQueryが軽い。」というのは誤った発想です。
jQueryをはじめとしたjavaScriptライブラリとは、つまりjavascriptをより簡単に記述するためのものです。

また、PHPとJavascriptは根本的に目的が異なります。
特定の機能に対してどちらを使ったほうがいいか、という選択はありますが、基本的に求めるものが違うので、どちらがよいという比較はできません。たとえるなら、「家を建てたいんだけど、大工さんと左官屋さんとどっちがいい？」というような質問です。その答えは、どちらも必要だということです。

jQueryとjavascriptの違い、javascriptとphpの違いは、Googleなどで調べれば簡単に見つかる情報だと思いますよ。

この回答へのお礼

ありがとうございます。
正直できればphpで作りたいです。
タブAのある部分がタブBの内容と共通している箇所があり、タブAの箇所を修正するとタブBの箇所も修正されている。
という感じにしたいのです。

また、何十件とあるお店ページを
カテゴリー毎にページをわけるとして、
カテゴリーAの一覧ページとカテゴリーBの一覧ページに共通しているお店Zがあるとして
一覧ページのお店Zの修正をした時にいちいちAとBの一覧ページを修正するのが面倒です。（4つ5つかぶってるお店があるならなおさら）
ここも同じようにひとつ修正すると他のページも修正がかかるようにしたいです。
こういうのをデータベース？っていうんですかね。

これもPHPならできるんですよね？
まったくの初心者がここまでできるのでしょうか
PHP入門サイトを色々見てますが、
プログラムがどうのこうので、まったくやり方に検討がつきません。

お礼日時：2010/09/27 11:17

No.3 回答者： tracer 回答日時： 2010/09/26 05:03

jQueryはjavascriptによって書かれたライブラリなので、jQueryはjavascriptです。

といってもわかりづらいですよね。javascriptによって書かれたライブラリはたくさんありますが、基本的にJavascriptは1種類しかないと思ってよいと思います。(もちろん厳密には1種類ではないですが。)

たとえば、日本語にも略語というものがあります。
安保理とか芸大、ゼネコン、セクハラなどなど。全部略語ですね。で、この略語は何語かというと日本語です。つまりJqueryとJavaScriptの関係は、略語と日本語の関係に似ていると思います。

さて、本題ですが。
javascriptは基本的にHTMLやCSSを操作しているだけなので、HTML&CSSをご存知であれば、そんなに難しいことはないと思います。たとえばタブの実装は、単純にCSSのdisplayを切り替えているだけです。なので、displayを切り替えるだけなら動作は軽いものです。

ただし、表示したい内容が外部サイト(Google、YouTube)から読み込むタイプのものであれば、切り替えるのに時間がかかるというよりは、表示されるまでに読み込む時間は必要ですね。素早く切り替えをさせるにはあらかじめ表示させたいコンテンツを読み込んでおく必要があるわけですが、ここからは本題とずれちゃいますね。

この回答へのお礼

jqueryは軽いんですね。
ちなみにPHPと比べるとどっちがいいのでしょうか？
また、作りやすさ、ページの完成度でいうとどちらでしょうか？

お礼日時：2010/09/27 09:12

No.2 回答者： yyr446 回答日時： 2010/09/13 19:22

jqueryはjavascriptをさらに簡単にしたものなのですね。

ていうことは普通のjavascriptより動作は軽かったりするのでしょうか？

初心者が作ると、jqueryの方が速い（軽い）場合が多い、
プロが作るとjqueryより早い（軽い）ソースを作れる。

この回答へのお礼

ありがとうございます。
jqueryの事がわかってきました。

お礼日時：2010/09/27 09:10

No.1 回答者： yyr446 回答日時： 2010/09/10 10:11

ホットペッパービューティーが何者なのか知らないですが、

おそらくPHPでタブ切り替えなんてまどろっこしい事してないと
思います。javascriptを使えない端末の事を考慮してるなら別ですが．．

タブメニューは、javascriptで簡単に作れます。（CSSだけでも可能かも．．）

javascriptは、HTMLの要素や、その表示属性を変更するための、プログラム
コードと思って下さい。
jQueryは、よく使われるようなjavascriptのプログラムコードを、さらに
簡便にかけるように工夫された、拡張命令を提供するプログラムと思いましょう。

さらに、タブメニュー等は需要が多いので、いろいろな方が、さらに簡単に
使えるよう、jQueryを使ってタブメニューを実現する仕組みを提供しています。
その一つが、ご提示されているサイトの「jQuery Accessible Tabs」ですね。
こおいったのを、ライブラリーとか呼ばれる事が多いです。
　タブメニューのライブラリーは他にもたくさんあります。jQueryベースの
物じゃないのもあります。


http://flowplayer.org/tools/demos/tabs/index.html
http://jqueryui.com/demos/tabs/


「お店の写真数枚やgoogle map、FLASH動画などの内容で切り替えを行ってく上で
動作に重たさは出るのでしょうか？」

ページに表示するコンテンツの量が多くなると表示に時間がかかるので、
当然、最初にロードする時、重くなります。タブメニューの場合最初に
全メニューがロードされて、アクチブでないタブの中身が非表示になって
いるだけなので、切り替えはスムーズだと思います。
　最初にロードを軽くするには、AJAXを使って、非表示のコンテンツを
非同期にロードさせるという方法もあります。

この回答へのお礼

非常に分かりいやすい説明ありがとうございます。

なんとなく、つかめてきました。
とりあえず、タブメニューのライブラリーを参考に一度作ってみたいと思います。

つまりjqueryはjavascriptをさらに簡単にしたものなのですね。ていうことは普通のjavascriptより動作は軽かったりするのでしょうか？

お礼日時：2010/09/10 17:02