  |
１年に１回くらい趣味で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マジオススメです！
自分も取れる時間は少ないなりに、楽しみながら少しずつ進歩していきたいと思います。
SUGEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE 俺プログラム書いて15年食ってる者ですがJavaScriptはさっぱりなので、教えていただきたい とりあえずエントリ保存して10回読みます、ソースも100...
ふっかつのじゅもんを入力したいな。 てーてーてれーれてれーれてれてれてーれれー♪
とりあえず、メッセージウィンドウ送りの下三角とエンターキーを$.clickと$.keyupでフックするんだ。 それで使いやすくなると思われ。
サイトを作った者です。 アドバイス、ありがとうございます！ ＞とりあえず、メッセージウィンドウ送りの下三角とエンターキーを$.clickと$.keyupでフックするんだ。 ＞それで使いやす...
http://anond.hatelabo.jp/20110502041801 http://ul7.dip.jp/dq4/ 自宅サーバで動かしてるんですが、あさって、17日の午前10時くらいまで起動しときます。 もし需要があるようなら、なるべくずっと起動さ...
この日記はanond:20110516001129へのトラックバックです。 ドラゴンクエスト4のゲームブックWebアプリを作った者です。 需要があったようなので動かし続けることにしました。 URLはこちら↓ h...
著作者から著作物の利用許諾はちゃんともらってるの？
お金持ちに大量に触れて気づいた8の共通点 http://anond.hatelabo.jp/20110825105018 3317users 生活・人生 2011/08/25 --------------------- 自分でWEBサービスを作りたいと思っている人へ http://anond.hatelabo.jp/201...
こりゃひでえ
このリストはどうやて作ってるんだろう？ きれいに整理されているから似たようなものを作ってみたいんだけど……
anond:20120303220901を見て何となく調べてみたくなった。デイリーのホットエントリに入っているものだけだから抜けがあると思う。 482あとで 【永久保存版】「お金がもらえる・戻ってくる...
いいね
いいね
なんで2回書くねん なんで2回書くねん
順位 総合 タイトル ブクマ数 日付 カテゴリ 1 (5) ずぼらな俺が4年間の一人暮らしでたどり着いた部屋作り＆暮らし方 3797users 2011/08/28 生活・人生 2 (6) お金...
順位 総合 タイトル ブクマ数 日付 カテゴリ 1 (5) ずぼらな俺が4年間の一人暮らしでたどり着いた部屋作り＆暮らし方 3797users 2011/08/28 生活・人生 2 (6) お金...
1
