---

ということで、新シリーズです。jQueryです。


前回までのシリーズで、PHPの基礎知識から、フレームワークを用いたシステム開発までできるようになり、データベース運用の基礎知識を身につけたので、今度はユーザビリティの方に目を向けてみましょう。
ユーザビリティってのは、usabilityですね。use+abilityです。日本語でいうと有用性となります。つまり、便利にしましょう、ってことです。

簡単な例を出せば、ボタンの配置とかですね。コメントを送信しようとしても、ボタンが離れてたら鬱陶しいじゃないですか。
ま、こういうのはCSSとかHTMLレベルでなんとかなるのですが、PHPではできないことというと、動的な表示です。
例えば、フォームに入力した時、簡単なエラーチェックをして、エラーがあればその場で表示、っていうものがあると思います。こういうのすごい便利ですよね。
でも、こういった動的なことは残念ながらPHPでは不可能です。javascriptじゃないと無理です。むしろ、javascriptはそのためにあるっていった方がいいですかね。

javascriptのライブラリがjQueryというものなのですが、javascriptをより簡単に記述するためにjQueryを使いましょう、っていう話です。
フレームワークを用いて開発した経験があれば分かる話だと思うんですがライブラリがあるのとないのでは大違いです。

開発スピードや、バグの量とか。速度は多少落ちますが、速度にこだわるのは必要に迫られてからでいいかと思われます。というか、速度の問題は言語よりシステムの問題がデカいので、フレームワークをとりやめるというより、データベースを分割したりして、システム構造を見直す方向の方が正しかったりすると思うんですけどね。


ということで、そんな便利なjQueryを使って、javascriptをこのサイトにも適用しましょう！！！！



ただ、正直僕はjavascriptを前提としたサイト作りはしてはいけないと思っています。
というのも、javascriptはユーザー側で切ることができるからです。なので、僕は今まで積極的にjavascriptを使おうとはしなかったんですね。なるべく根幹部分はjavascriptは使わない方がいいかなと思われます。javascriptありきで設計していいのは、ゲームぐらいでしょう。

ということで、根幹部分は触りません。あくまでも飾りの部分のみ、jQueryを使ってみることにしましょう。



相変わらず前置きが長くなりましたが、やりましょう。
今回実装するのは、オンマウスによるリンクのポップアップ表示です。昔からうちのサイトを知ってる人はご存知かと思われますが、バグるようになったので取り去ったものです。
今は昔と違って、多少なりともjavascriptの知識はあるので、今回は最初から自力で実装してしまいましょう！！！！





ググったらわかりやすそうなサイトがあったので、引用させていただきます。
jQueryの基本的な文法はこんな感じです。javascriptに似てる感じですかね。とりあえず頭にjQueryってつければ読み込めて$で置き換えが可能で、readyイベントはさらに置き換えが可能というわけですね。
readyイベントはHTMLのデータが揃うまで実行しないってことですので、これでHTMLの下の方にわざわざjavascriptを定義しなくて済みますね！！実はこれが原因でハマったことあります

jQueryの構文の形を見るに、基本的にはオブジェクト指向の言語と一緒って思ったらいいんじゃないかなと思います。javascriptでもほぼ一緒なんですけどね。


さて、jQueryは基本的にHTMLの部品を操作するという目的で使われるんですが、この部品がオブジェクトと呼ばれるものです。このオブジェクトを取得するところから話は始まるわけですね。
そのオブジェクトに対して、いろいろ命令を与えることでいろいろできるって感じです。
詳しくはさっきのサイトで色々書かれてるので、基礎に関してはそちらを参考に。



では、どのように実装できそうか考えてみましょう。


1.特定のclassを持つ文字に対してオンマウスイベントを定義する
2.thisでその要素を受け取り、その要素に対応した文章を読み込む
3.マウスカーソルの位置を取得し、枠を表示させる
4.2で取得した文章を、枠内に表示させる


大体このような流れになるはずです。ここでthisというのが出てきましたが、これに関してはまた後で解説します。僕が現時点でよく分かってないので説明できないんです。


というわけで、作ってみましょう。









しかしうまく作れないので次回。（笑）