  |
はてなキーワード: マウスオーバーとは
1〜2年前くらいからにわかに増えてきたマウスオーバーすると動画再生する広告が増えた。
個人的にはWebページの広告というのはそのサーバなり記事のクオリティを担保するための収入目的で設置されているものなので、Adblockなどを導入することには反対だったのだが、この度いい加減頭にきてAdblockのアドオンを入れた。
・ニコニコ動画のログインページで不意に大音量で再生される広告動画
・打ち合わせ中にサンプルサイトとして見せていたら突如大音量で再生される広告動画
こいつらは即刻滅びて欲しい。逆に、FacebookのTLに流れてくる動画広告なんかは音声が自動再生されないので別に気にならない。
更新。
だったので、一応、これで不満が解消できたかなあと思っている。
今回は慣れてきたからか、それほど苦戦しなかった。
backgroundページからcontents_scriptへメッセージ送る方法を知らなくて
色々勘違いして少し手間取ったぐらいかな。
https://github.com/aoi-tomoyuki/compact_na_masuda
追記
ページ内にある同じURLをマウスオーバーすると、一番最初に表示された位置にポップアップされることに今気づいた。
なおします。
追記:23:14
なおした。
はてブのカテゴリ別ページとかでもたまに出るけど、Google AdSense のうち表題のような広告。レイクのやつとか。
広告エリアにマウスカーソルが乗ると、3秒のカウントダウン後に広告となる YouTube 埋め込み動画の広告が再生される。
自宅じゃ非表示にしてるからいいんだけど職場の PC はそうはいかないんだよ。
何度か意図せず動画が再生されて不快な思いをしたし、最近はマウスオーバーで動作してカウントダウンが動き出す度イラッとしながら F5 で更新する。
本当に理解しかねるんだけど、こういうの作ってる人って自分がインターネットしてる時に意図せず動画が始まったりしても鬱陶しくないの？
以前こんな話もあったけど……
今回はそれとは別、Flare0n という作者のChrome拡張機能について。以下の拡張機能を使ってる人は注意。
――他にもあるかも。
色々なサイトやブログなどが商品を紹介する際にAmazonアソシエイト（アフィリエイト）を利用している。
自分は気になった書籍などを紹介してくれた記事からは、お礼代わりにそのリンクからAmazonへ飛んでいる。
そういったAmazonのページURLには「○○-22」というアソシエイトID文字列が付加されており、もちろん各サイトによりこのIDが違ってくる。
しかし、上記作者の拡張機能を入れて（有効にした状態で）Chromeブラウザを使用していると、そういったAmazonリンクURL内のアソシエイトIDがすべて「webkit-chrome-22」に書き換えられてしまう。
つまりAmazonリンクを貼った側ではなく、いつの間にかこの拡張機能の作者（と思われるアカウント）側にアフィリエイト収益が入るように、勝手に変更されてしまう。
調べてみると、他にも気づいている人がいる模様。また、Firefoxの拡張機能でも同じIDに書き換えられるものがあるらしい。
Mozilla Firefox 拡張機能スレッド Part78
485 : 名無しさん@お腹いっぱい。[sage] : 2013/09/11(水) 10:49:50.10
「Google Translator Tooltip Expanded」
http://note.chiebukuro.yahoo.co.jp/detail/n192625
486 : 名無しさん@お腹いっぱい。[sage] : 2013/09/11(水) 10:54:58.29
Google Translator Tooltip Expanded (マウスオーバー翻訳) for Greasemonkey
http://userscripts.org/scripts/show/173851
487 : 名無しさん@お腹いっぱい。[sage] : 2013/09/11(水) 11:08:25.00
それアドオン版(＞＞485)のほうは＞＞486を勝手にいじって、
amazonのリンクをアフィリンクに書き換えるアレなやつだよ
うまく書き換えができてないことが多いのかamazonのリンクがおかしくなって気づいたわ
492 : 名無しさん@お腹いっぱい。[sage] : 2013/09/11(水) 12:15:18.62
xpiの中身とuser scriptとでは、コードほとんど同じで、どっちもamazon link書き換え
してるとこあるけど、アフィではなさそうだ
493 : 名無しさん@お腹いっぱい。[sage] : 2013/09/11(水) 12:40:31.48
いや書き換えてるよ
userscript版はコードを1行にして分かりにくくしてるけどアドオン版は自動コンパイルだから綺麗に見える
....
if (b.href.match("zon.co.jp")) {
if (b.href.match("-22")) {
this.href = this.href.replace(/&tag=.*-22/, "&tag=firefox_latest-22").
こんな感じ
494 : 名無しさん@お腹いっぱい。[sage] : 2013/09/11(水) 12:49:32.33
firefox_latest-22とwebkit-chrome-22ってアフィなのか
だったらすまん、xpiもuser scriptも両方書き換えてるね
495 : 名無しさん@お腹いっぱい。[sage] : 2013/09/11(水) 12:50:30.92
497 : 名無しさん@お腹いっぱい。[sage] : 2013/09/11(水) 13:03:04.23
確か国別の識別子みたいなもんで日本のだろ
498 : 名無しさん@お腹いっぱい。[sage] : 2013/09/11(水) 13:05:44.43
http://userscripts.org/scripts/show/150664
↑これにアフィ加えたのが＞＞486＞＞485
500 : 名無しさん@お腹いっぱい。[sage] : 2013/09/11(水) 14:20:26.20
うげげ。ホントだ、すまん。zon.co.jpで隠してたのか('A`)
firefox_latest-22ってバージョン情報かと軽くスルーしてしまった
尼に通報するは
503 : 名無しさん@お腹いっぱい。[sage] : 2013/09/11(水) 15:16:14.91
2ch嫌儲 まとめ@ ウィキ - amazon用通報テンプレ
http://www6.atwiki.jp/kenmo/pages/83.html
https://affiliate.amazon.co.jp/gp/associates/contact/
・要ログイン(捨てID可)、件名は「アソシエイト・プログラムへのご意見・ご要望」にしておく
・アソシエイトID アフィリンクURLから○○-22で終わるものを探す
＞＞498の本家をパクり(アマゾン規約、知的財産権の侵害)＞＞485-486で「webkit-chrome-22」「firefox_latest-22」という2つのアフィリエイトIDを付加して書き換え、御社への正常なアクセスを阻害している、と通報しといた
Mozilla Firefox 拡張機能スレッド Part80
939 : 名無しさん@お腹いっぱい。[sage] : 2014/01/06(月) 06:44:53.52
950 : 名無しさん@お腹いっぱい。[sage] : 2014/01/07(火) 13:04:41.47
＞＞939
去年一昨年くらいに急増した、というかメジャー表面化した事例なんだが
長年多くの人間から愛用されてきたアドオンが乗っ取られることが結構あるんだよ
アドオン開発者の開発が滞ったり、あるいはほぼ開発しつくしてVerアップメンテくらいしかなくなってるものとか
そんな放置されかけてたところをFirefox本体のアップデートで使用不可能になったものとか
まあそんなディスコンしかけてたものが突然復活したりフォークして開発再開されたなと思ったら
中身にいろんな追跡関係のコード仕込まれたりマルウェア化されたりね
開発者アカウントを確認すると嘘くさいコピペプロフィールだったり
もともとの開発者からどういう経緯でアカウント譲渡されたのかわからんが全く別人化してたり
たいていはAMOが審査とかで弾いてくれると思ってガード下がってるとは思うけれど
951 : 名無しさん@お腹いっぱい。[sage] : 2014/01/07(火) 13:26:36.07
2013年度総括おすすめにFasterfox LiteやAutoCopyすすめてる人とかまだいるし
いくら現状ではスパイウェア部分取り除かれたとはいえ、また信用して使いたいと思うのかな
953 : 名無しさん@お腹いっぱい。[sage] : 2014/01/07(火) 13:59:01.98
WIPS.com とか ppclick(EmmaSawyersも同一人物?)あたりは話題になったよな
マルウェア注入とか、まじ勘弁してくれ
956 : 名無しさん@お腹いっぱい。[sage] : 2014/01/07(火) 16:32:34.73
Scriptにもあるぞ
http://www.logsoku.com/r/software/1374211502/481-
むかし下手に紹介してみたらそれはアフィ入りできっちり通報しといたんだが(尼だけ)、
んー軽く見たら楽天アフィの書き換え+複数尼アフィIDの書き換えへとパワーアップしてやがるな
961 : 名無しさん@お腹いっぱい。[sage] : 2014/01/07(火) 19:38:07.09
＞＞956
お同士よ
俺も通報したら尼消えてDropbox紹介リンクとヤフー楽天になっててワロタw
965 : 名無しさん@お腹いっぱい。[sage] : 2014/01/07(火) 21:47:13.25
＞＞956＞＞961
尻尾掴んだかな。webkit-chrome-22でぐぐってこれ見つけた
http://b.hatena.ne.jp/YawChang/20131020
http://archive.is/MvRyY (糞アフィ作者だから魚拓)
YouTube ダウンロード・自動画質設定 - YouTubeをワンクリックでダウンロードできます。
Text Link Plus - リンク化されていないURLをリンク化する (h抜きやドメインのみにも対応)
ニコニコ動画 盛り上がりチェッカー - 再生画面の下にコメント密度を表示
Wikipedia ポップアップ検索 - 画面右上にWikipedia検索パネルを追加
パスワードを表示【マウスオーバー】 - マウスオーバーでパスワードの******の内容を表示
2ch Reader Plus【軽量】 - シンプルな2chブラウザ機能と、DAT落ちスレの自動復活機能を追加します。
このリンクを経由して購入すると、作者に協力できます。などとのたまいながら勝手に仕込むww
https://chrome.google.com/webstore/detail/ejdgfnjgcnlijkefghkklkdfdongggid/reviews (全ての言語を選択すると)
全てのウェブページのamazonへのリンクに'webkit-chrome-22'という作者のものと思われるアフィリエイトコードがついていたのでびっくりしました。勝手に書換えてるんですね。
966 : 名無しさん@お腹いっぱい。[sage] : 2014/01/07(火) 21:59:28.00
＞＞965
http://blog.livedoor.jp/kamekameboy/archives/12795981.html
パクリ元のAuto HD For YouTubeをスパイウェア扱いにして自分のを宣伝してる
http://chiebukuro.yahoo.co.jp/my/myspace_note.php?writer=pasenave&flg=1
http://chiebukuro.yahoo.co.jp/my/myspace_note.php?writer=ankhd4455
967 : 名無しさん@お腹いっぱい。[sage] : 2014/01/07(火) 22:22:58.00
YouTube ダウンロードと、2ch Reader Plus【軽量】という同一作者のアプリからwebkit-chrome-22に書き換えられるという苦情があるから間違いないだろう
2ch Reader Plus【軽量】についてにはここでも。
https://twitter.com/piwahup/status/413269595034624000
ﾌﾑﾌﾑ。ID書き換えはアマゾンアソシエイトプログラム参加条件の25番めに違反すんだなw
https://affiliate.amazon.co.jp/gp/associates/promo/participationrequirements?ie=UTF8
25. 乙は、本プログラムに参加するいずれのサイトのトラフィックを(ユーザのコンピュータにインストールされたソフトウェア経由を含めて)妨害またはリダイレクトしようとしたり、他のサイトから紹介料を流用しようとしないものとします。
ちなみに「このリンクを経由して購入すると、作者に協力できます」からaguseかまして尼へ飛んでみたらmaftrackingー66465-22(-は検索避け)が付与されたからこれが本アフィ垢かな?
さらにちなみに、Google Translator Tooltipの文字コードをデコードしてみたら
headerー_logo-22
footerー_logo-22
cartー_logo-22
全部ーは検索避け。これらのアフィIDもまだ暴かれてなかったからぐぐられたら簡単に見つかっちまうw どうやら2ちゃん見てるようだし。
968 : 名無しさん@お腹いっぱい。[sage] : 2014/01/07(火) 22:34:30.05
＞＞966
うおww ひでえw
Google Translator Tooltipﾊﾟｸﾘ版のソース見て、特定サイトへのリンクで発生する問題の回避(笑)～//endまでを
コピってここに貼り付けるとある程度デコードされるから参考にして通報してみて。
パッと見ソース見えないとこに大量に隠されてるww
http://www.ahref.org/app/mozicode/index_2.html
最初の段落が楽天のアフィID書き換えで、次の段落が尼ID書き換え
969 : 名無しさん@お腹いっぱい。 : 2014/01/07(火) 22:37:29.66
＞＞965-967
GJ乙。
しかしこれは酷いな。久しぶりに虫唾が走ったわ。
971 : 名無しさん@お腹いっぱい。[sage] : 2014/01/07(火) 23:59:48.30
＞＞969
ここみたい
Amazon アソシエイトお問い合わせフォーム
https://affiliate.amazon.co.jp/gp/associates/contact/send.html
972 : 名無しさん@お腹いっぱい。[sage] : 2014/01/08(水) 00:19:31.54
＞＞966
2013/08/2720:20:21 DOMNodeInsertedを、MutationObserverで書き換えようと...
2013/08/2408:59:42 Javascriptで、URLを置き換えたあとでそれにrel="norefe...
2013/08/2121:13:54 Greasemonkeyスクリプトの書き方についての質問です。ht...
2013/08/0321:32:42 リンククリック時に処理を中断させ、そのURLを書き換え...
2013/07/1810:44:21 以下のスクリプトが部分的にしか動作しません。何が問題...
2013/07/1417:41:59 Javascriptの書き方についてhttp://www.programming-mag...
2013/07/1202:14:03 【500枚】GreasemonkeyのスクリプトにおけるURL置き換え...
公開してるの全部パクリだな
どうにかならないかな、こういうの。
http://anond.hatelabo.jp/20140201015142 とかの対処 via https://twitter.com/polygon_planet/status/429753156231114752
再生した瞬間PCが重くなりますよね？レスポンスが低下しますよね？
いきなり音がでちゃいますよね？
そういった一方的な押し付けを、クリック等の決定動作でPC操作者が
最終決定するのならともかく、ふとした拍子に動画再生が始まってしまうっていう。。。
最近何につけてもゴリ押しがきつい世の中ですよね。ゴーリキのゴリ押しとか。
PC上（ほぼネット上）はゴリ押しの世間から逃れられるほっと一息の時間帯なのに、
いきなりゴリ押し動画を見ることを強制されて、それを消すのに手間がかかる
なんて犯罪だと思いませんか？
そうなんです。
そのコンビニ店長騒動の中でも注目を集めたのがid:ketudanさんのこの記事。
それって悪い事だったのか？
が、この記事の内容と今回の話とは全く関係ないｗ
しかし、この記事をきっかけにして自分はid:ketudanという人に興味を持った。
そして、過去のエントリやブックマークをいくつか掘り下げて読んでみた。
その中でも一際目立っていたのが、レッドスターが4つもついたこのブックマーク。
俺が慎太郎よりはてなで慎太郎に粘着してるオトモダチの方により反吐が出るのはここ。同じく思い上がったマヌケでも、前者は「愚民は死ね」という苛立ちを隠さない。後者は隠せてるつもりで「弱者救済」とかほざく。
“慎太郎に粘着してるオトモダチ”とやらについては知らないので、｢ふーん｣て感じ。
コメントよりも誰がレッドスターを4つもつけたのかについての興味が勝って、すぐにスターをマウスオーバーした。
つけた人は全てid:comzooさん。（たまにカラースターをばらまいてる人だったかな）
だが、IDよりも添えられたコメントに釘付けになってしまった。
“ketudan”
“愚民”
“隠さない“
うん、まあ……ぶつ切りのスターコメントだし、色々解釈できるとは思うけど、
さすがにこれはマズいんでないかい？
自分が完全放置系研究室に所属していた時に知っておくと、もう少し楽だったろうなぁと思うツールを単に列挙
よって内容に偏りあり。
タカラがリアルタイムPCRでのプライマーの設計指針を書いてくれている。
通常のPCRでも基本的にこれに従えばOK
http://catalog.takara-bio.co.jp/product/basic_info.asp?unitid=U100004425
http://www.sigma-genosys.com/calc/DNACalc.asp
Primerの長さ、分子量、Tm、GC含量、2次構造の作りやすさ、Primer Dimerの有無などを複数のサンプルに対して計算してくれる。
＊異なるPrimer間でのDimer形成に関してのデータは無い
知らないタンパク質が出てきた
○UniProt
タンパク質についてのデータが簡単に手に入る。知らないタンパク質名があったら取り敢えずココで検索
・糖鎖付加部位
・S-Sの部位
・報告されている変異の場所
・関連性の高い論文へのリンク などなど多数の基本情報が記されている
http://web.expasy.org/compute_pi/
使用頻度は低いけれど、無いと困るソフト
○Translate tool
http://web.expasy.org/translate/
コドンのフレームがズレていても、逆向きの配列でも全てのパターンで翻訳してくれる。(フレームのズレ3種×向き2種＝Total6パターン)
表示も3文字表記と1文字表記があり、翻訳後のコピ-&ペーストに便利
○Vector Database
https://www.lablife.org/g?a=vdb
配列とマップも表示され、新しいベクターを作製する場合何かと便利
○ClustalW2 - Multiple Sequence Alignment
http://www.ebi.ac.uk/Tools/msa/clustalw2/
系統樹を描いてくれるソフト。ホモログなんかを比較する時にも便利。
http://www.youtube.com/watch?v=r2cG1SzDdBA
YouTubeでもある通り、ホームページ内でも系統樹を見る事が出来ますが、オフラインでデータを見たい場合は
TreeView Xを使えばできます。
http://darwin.zoology.gla.ac.uk/~rpage/treeviewx/download.html
マウスオーバーで単語の意味が表示される。ライフサイエンスに特化しているのためマニアックな単語もいける。
ライフサイエンス辞書ツールのようにマウスオーバーではないが、検索ボックスにコピー&ペーストしなくても検索が可能なので、とても楽。
ライフサイエンスに特化していないが、かなり広い範囲の単語が登録されているのほとんどの単語、述語の意味が分かる。
○検索
http://lsd.pharm.kyoto-u.ac.jp/ja/service/weblsd/conc.html?c
上記したライフサイエンス辞書ツールを開発しているホームページ
単語にたいしての共起表現を検索してくれる。分からない単語の訳の予想や、論文を描く時の助詞を検討する時に便利
とりあえずの便利ツールでした。
今までCrCh2という拡張を使用。これはマウスオーバーでレス抽出ポップアップ機能がなくてかなり不便だった。
Firefoxのアドオンのchaikaみたいなライトユーザー向け２ちゃんねる閲覧の拡張機能を探していた。
2ch browser userscriptを入れてみた。OSがMacの場合、2ch browser userscriptがおすすめ。
もちろん画像URLのサムネポップ表示機能有り。ID、レス番をマウスオーバーでレス抽出機能有り。
WindowsだとNullpo 2ch ReaderがFirefoxのアドオンのchaikaに一番近くて使いやすいと思う。
今までAdBlockという拡張を使用。これは表示が崩れて読めないサイトがたまにある。
例えばYouTubeを見るとレイアウトが一部崩れて表示が読めない部分があった。
今回Adblock Plus for Google Chrome(Beta)を入れたらYouTubeの画面もちゃんと補正されて全部読める。
ただし、Adblock Plus for Google Chrome(Beta)はデフォルト設定のままでは、Japanese向けの広告をブロックしないので、設定でオプションにJapanese向けのリストを追加したほうがよい。
Japanese向けのリストのURLはググればすぐ出てくる。URLをコピペしたのをリストにブチ込むだけでいいので超簡単。
１年に１回くらい趣味でwebサイトを作ったりする独学素人ノンプログラマーです。
仕事はＩＴ系にかすりもしないけど、たまにサイトが作りたくなるんです。
htmlもCSSも知識不足ですが、作成ソフトに頼ればなんとかなります。
そんなレベルで無謀にも「JavaScriptも使いたいな」とか思ったりするわけですよ。
で、たまに「簡単にわかるJavaScript入門」なんてサイトや記事がありますよね。
ああいうのを書いてくださる人に、ちょっと言いたい。
あなた方の想像を絶するほどに、俺のＩＴ系理解能力はゴミクズですよ！
「簡単に分かる入門」にさえ入門できません助けて先生！
と、鼻水をたらしながら泣き出すような底辺レベルのスキルしかないザコであります自分は。
ですが、jQueryと出会い、見よう見まねと思いつきで作ったら、こんなんできました。
jQueryってやつを使えば、ド素人にもこんなものが作れるんですね。
用語とかあんまり使わずに、中高生でも読めるレベルで語ります。
web制作にくわしくない方にも「どうなってるのか？」って雰囲気は伝わるかと思います。
技術はないけど、人とは違ったwebサイトを作りたいって方、jQueryマジオススメです！
きちんと勉強されてる方からすれば失笑ものの内容かもしれませんが、ご容赦を。
よくある「入門」すら難しく感じる自分のような方々に届けるつもりで書きます。
くわしい方は、間違いなどがあれば温かくご指摘いただければ幸いです。
あと、「知識不足の人間はこんな思考をしてるのか」という参考になればうれしいです。
前置きが長くなりましたが、それではサイトで使用した４つのjQueryを説明します。
プログラマーさんたちが作った高性能なjQueryのコードなんですが、このプラグインってのが超便利なんです。
使い方は、すでに作られているコードをコピーして、ちょっとのアレンジするだけ！
昔、jQueryの知識がほぼゼロだったころ、このプラグインを知りました。
で、俺も「カッコいいプラグインが使いてええ！」と考えて試しに使ってみたわけです。
けどまあ、プロが作ったコードを、知識ほぼゼロで動かそうなんて甘すぎですよね。
でも、あんまり深く考えずに、貼りつけて動かしてみたところ――
あっけないほど簡単に動きました。
それがサイト内の、パッケージ画像にマウスを合わせると大きくなる部分です。
プラグイン「Bubbleup」
紹介記事１ マウスオーバーを気持ち良くするjQueryプラグイン「Bubbleup」 | Web活メモ帳
紹介記事２ JavaScript + Ajax 実践サンプル集 - jQueryのbubbleupプラグインでアイコンを拡大する
配布元（英語）BubbleUp jQuery Plugin to Spice Up Your Menu | AEXT.NET MAGAZINE
ネット上にはこういうのがいっぱいあるんで、ぜひいろいろ眺めてくださいませ。
こういうの眺めても、「どうせこんなの使えないし」と思えますよね。
でも、「これがコピペで使えるのか！」と思えば楽しくなってきません？
このプラグインってのを使いこなすには、htmlとCSSの知識が必要です。
ですが逆に言えば、それと切り貼りアレンジだけで、高性能のjQueryが使えるわけです。最高ですぜ。
プラグインを貼ってカッコよく動いたんで、
と考え、最初に作った自作のjQuery部分が、サイトの表紙です。
世の中には、JavaScriptを有効にしていない人がいます。
たとえば、決して私ではありませんが、エロサイトで出る変な広告表示をさけるため、それを切っている人もいます。
で、頻繁にエロサイトに通いすぎて、切ったままなのを忘れて普段のサイトを巡ると、たまに表示がおかしくなる。
で、そんな人のために「JavaScriptを有効にしてください」と書いた表紙をつけたわけです。
ですが、jQueryはまだよく分かってなかったんで、「入門」のサイトを眺めてました。
で、いくつか読んでみても、やっぱりすぐには分からん……。
でもね、そういうとこには、「練習用サンプル」ってのがあるんですよね。
練習台で「ボタンをクリックすると画像が非表示になる」みたいなのがあったんで――
みなさま、いかがでしょ？
サイトのjQueryは、「画像をクリックすると画像が非表示になる」とアレンジしています。
最初に現れる画像をクリックすると、画像が消えて下の画面が現れましたでしょうか？
（JavaScriptを切っていると動きませんのでご注意を）
この表紙は１枚の大きなjpg画像で、それをクリックすると消えるようになってます。
よく分からんまま見よう見まねで貼りつけて動かしただけなんですが、こ、こいつ、動きます！
・５分ほどのスライド。最初見たときは知識不足で理解不能だった。
・初心者の神・西畑一馬様の入門講座。jQueryの雰囲気が分かる！
なお、「はじめてのjQuery」を見たのが、このドラクエサイトを作るきっかけでした。
黒い画面に浮かぶスライドを見て、「ドラクエの画面っぽい」とひらめいたのです。
いろんなjQueryのサイトを見てパクれる……いや、参考になるのを探すのは面白いかと思います。
うちのサイトを見て、「懐かしのゲームブック風サイトを作りたい！」とかひらめいてください。
個人的に楽しみたいので、ホントぜひどうか誰かひらめいてください！
で、簡単に動くのを見て、jQueryのすごさを改めて思い知り、きちんと勉強しようと考えました。
そこで助けられたのが、jQuery初心者の救世主「西畑一馬」さんの記事です。
なお、本格的に勉強しようという人は、入門の「速習講座」より、
ASCII.jp：Web制作の現場で使えるjQuery UIデザイン入門
これも同じく西畑さんの記事なのですが、こちらは量が膨大にあります。
速習講座では軽く流された部分も、一個ずつ丁寧に解説されています。
というか、西畑さんは本を書いてはるので、それを買いましょう（布教）。
ここは入門によく書かれる「アコーディオンパネル」をアレンジして作りました。
アコーディオンのように開いたり閉じたりするアニメーションでの演出です。
jQueryは、簡単にいろんなアニメーション効果がつきます。これが楽しんです。
そこから３種類を紹介すると、
自分のサイトの「すすむ」「もどる」で使っているのは、スライドアニメーションです。
＜「すすむ」の仕組み＞
「すすむ」を押すと、表示部分が上に隠れて消え、次が表示されます。
という変な動きをしています。
たぶんもっと簡単な処理ができると思うんですが、自力で考えてやるとこんな感じになりました。
＜「もどる」の仕組み＞
こっちは簡単。
クリックしたら、表示部分の前の部分がスライドして現れるだけです。
けど、ちょっと苦戦して勉強するところがあるのもまたよいです。
htmlとかCSSとかからすると、jQueryはなんか信じられないくらい大量のことができます！
たぶん、jQueryの元になってるJavaScriptがすごいんでしょうね。
わずかに勉強して改めて、使いこなしているプログラマーのすごさを思い知りました。
で、順調に進んでいたサイト作成の最後で壁になったのが、こいつです。
１つめの、「マウスを合わせたときの動作」は「hover」というものを使っています。
なんか難しいのが出てきましたが、実はこれも入門講座の例をパ、参考にしました。
上で挙げた、「はじめてのjQuery」に出てきた「hover」の使い方の例です。コピー万歳。
でも、いきなり「hover」とか言われても意味が分からん人も多いですよね。
なので、どんな感じで動いているか、「ふーん」とイメージだけ見ておいてください。
ということをやっています。
（なお、パッケージ画像をクリックしたときも同じ移動を使っています）
処理の内容としては、たとえば「ドラクエ１・１話」の項目に飛ぶ場合、
（実際に見えるのは、２のスライドして出てくるところだけ）
が、なぜかここでエラーが。
「ドラクエ１・１話」に飛んだ後、「すすむ」がうまく使えない……。
まるで「次が存在しない」みたいに進まなくなってしまうんです。
ぶっちゃけると、ここは今でも原因が分かりません。
で、理屈が分からないから、思いつく方法を手当たり次第試してみました。
その中で成功したのが、「次が存在しないなら存在させてしまえ」というものです。
何を言っているか分からないと思いますが、大丈夫、俺も分かりません。
いちおう処理としては、
1・「ドラクエ１・１話」の前の部分すべてをスライドさせて消す。
1.5・「ドラクエ１・１話」の後ろの部分すべてをスライドさせて出す。
（実際に見えるのは、２のスライドして出てくるところだけ）
と、１．５を入れたものです。
自分でもなんで成功したのかはよく分かりませんが、きちんと表示はされています。
よく分からないなりにも動いてしまったのは、きっとjQueryのパワーだと勝手に納得しておきます。
（ここはきちんと知識のある人に見せるのが恥ずかしい内容ですね。変なコードですみません）
つまるところもありましたが、以上がjQueryでの処理です。
たまの休日に作成する趣味レベルのサイトとして、自分でもすごく満足です！
jQueryは何がすごいかって、これ、めっちゃ楽しいんですよ。
・プラグインをコピペするだけで見違えるように、サイトが動く。
・ちょっと表現を覚えるだけで、表現にアニメーションが加わる。
・さらに研究すればするほど、いろんなことができるようになる。
今までJavaScriptとか、独学素人なんで、なかなか勉強する気が出ませんでした。
しかも、「関数や引数がどうたらで、まずは足し算をアラート表示」とか、あまりやる気が出ません。
でも、jQueryは勉強の成果がすぐにめっちゃ分かりやすく出ます。
たぶん、自分にとって一番効果が大きかったのは、簡単さよりも便利さよりも、「やる気が出る」ってことでした。
それは「すすむ」の部分。
「最後のページで『すすむ』をクリックすると、始めに戻る」という機能です。
ここは、jQuery独自の機能を使ったわけではありません。
JavaScriptの「if構文」を勉強して作りました。
jQueryもJavaScriptの一種なんで、こういう構文が使えるんですよね。
どんな感じの処理かを説明すると、
という、単純なものです。
単純だけど、初めてのJavaScriptの構文で、自分には大きな一歩です。
今まで進むことができなかった、本当に大きな一歩を、自然と踏み出せていたのです。
届けたいので、もう一度書きます。
今はまだ技術はないけど、魅力あるwebを作る力を身につけたい方、jQueryマジオススメです！
自分も取れる時間は少ないなりに、楽しみながら少しずつ進歩していきたいと思います。
ページ下のリンクより「翻訳サイト／オンライン辞書 Translation / Online Dictionary」へ
（語学学習サイト個人的リンクメモ / Lists of Language Learning Links）
