2011-05-02

Webサイト制作】独学素人jQueryで、ドラクエ画面を作ってみた

こんなサイトを作ってみました

 オッス、オラ日曜ネット大工

 1年に1回くらい趣味webサイトを作ったりする独学素人ノンプログラマーです

 仕事はIT系にかすりもしないけど、たまサイトが作りたくなるんです

 htmlCSSも知識不足ですが、作成ソフトに頼ればなんとかなります

 そんなレベルで無謀にも「JavaScriptも使いたいな」とか思ったりするわけですよ。

 で、たまに「簡単にわかJavaScript入門」なんてサイトや記事がありますよね。

 ああいうのを書いてくださる人に、ちょっと言いたい。

 あの、独学素人ノンプログラマーの俺をなめてませんか?

 あなた方の想像を絶するほどに、俺のIT系理解能力ゴミクズですよ!

 「簡単に分かる入門」にさえ入門できません助けて先生

 と、鼻水をたらしながら泣き出すような底辺レベルスキルしかないザコであります自分は。

 ですが、jQuery出会い、見よう見まねと思いつきで作ったら、こんなんできました

ドラゴンクエスト・ロトシリーズのストーリーまとめ

 jQueryってやつを使えば、ド素人にもこんなものが作れるんですね。

 超簡単で超便利! 作ってめっちゃ感動した

 そんな感動を伝えるため、このサイトの中身を説明してみます

 あと自分の個人的な超自己満足! いやっほぅ!

 なお、素人なんで専門的な解説は他にお任せします。

 用語とかあんまり使わずに、中高生でも読めるレベルで語ります

 (小学生はがんばれ! めっちゃがんばれ!)

 web制作にくわしくない方にも「どうなってるのか?」って雰囲気は伝わるかと思います。

 技術はないけど、人とは違ったwebサイトを作りたいって方、jQueryジオススメです

 きちんと勉強されてる方からすれば失笑ものの内容かもしれませんが、ご容赦を。

 よくある「入門」すら難しく感じる自分のような方々に届けるつもりで書きます

 くわしい方は、間違いなどがあれば温かくご指摘いただければ幸いです

 あと、「知識不足人間はこんな思考をしてるのか」という参考になればうれしいです

 前置きが長くなりましたが、それではサイトで使用したつのjQueryを説明します。

1・パッケージ画像が拡大されて表示されるとこ

 jQueryには「プラグイン」ってのがあります

 プログラマーさんたちが作った高性能なjQueryコードなんですが、このプラグインってのが超便利なんです

 使い方は、すでに作られているコードコピーして、ちょっとのアレンジするだけ!

 自分ゼロから作れなくてもOKなんです

 昔、jQueryの知識がほぼゼロだったころ、このプラグインを知りました

 で、俺も「カッコいいプラグインが使いてええ!」と考えて試しに使ってみたわけです

 けどまあ、プロが作ったコードを、知識ほぼゼロで動かそうなんて甘すぎですよね。

 でも、あんまり深く考えずに、貼りつけて動かしてみたところ――

 あっけないほど簡単に動きました

 それがサイト内の、パッケージ画像マウスを合わせると大きくなる部分です

 みなさま、マウスを合わせて動くか確かめてみてくださいませ。

 きれいな動きしてるだろ? ほぼコピペなんだぜ、それ。

 プラグイン「Bubbleup」

 紹介記事1 マウスオーバーを気持ち良くするjQueryプラグイン「Bubbleup」 | Web活メモ帳

 紹介記事2 JavaScript + Ajax 実践サンプル集 - jQueryのbubbleupプラグインでアイコンを拡大する

 配布元(英語BubbleUp jQuery Plugin to Spice Up Your Menu | AEXT.NET MAGAZINE

 ネット上にはこういうのがいっぱいあるんで、ぜひいろいろ眺めてくださいませ。

 とりあえず、プラグインまとめサイトを置いておきますね。

jQuery 469 プラグイン:skuare.net

 こういうの眺めても、「どうせこんなの使えないし」と思えますよね。

 でも、「これがコピペで使えるのか!」と思えば楽しくなってきません?

 このプラグインってのを使いこなすには、htmlCSSの知識が必要です

 ですが逆に言えば、それと切り貼りアレンジだけで、高性能のjQueryが使えるわけです。最高ですぜ。

2・最初の消える画面

 プラグインを貼ってカッコよく動いたんで、

「やっぱ俺天才だな、自作も楽勝じゃね?」

 と考え、最初に作った自作jQuery部分が、サイトの表紙です

 世の中には、JavaScriptを有効にしていない人がいます。

 たとえば、決して私ではありませんが、エロサイトで出る変な広告表示をさけるため、それを切っている人もいます。

 で、頻繁にエロサイトに通いすぎて、切ったままなのを忘れて普段のサイトを巡ると、たまに表示がおかしくなる。

 あれは実に面倒らしいですね。噂で聞きました

 で、そんな人のために「JavaScriptを有効にしてください」と書いた表紙をつけたわけです

 ですが、jQueryはまだよく分かってなかったんで、「入門」のサイトを眺めてました

 で、いくつか読んでみても、やっぱりすぐには分からん……。

 でもね、そういうとこには、「練習用サンプル」ってのがあるんですよね。

 練習台で「ボタンクリックすると画像が非表示になる」みたいなのがあったんで――

 それをほぼコピペしました。ふひひ。

 みなさま、いかがでしょ?

 サイトjQueryは、「画像クリックすると画像が非表示になる」とアレンジしています。

 最初に現れる画像クリックすると、画像が消えて下の画面が現れましたでしょうか?

JavaScriptを切っていると動きませんのでご注意を)

 この表紙は1枚の大きなjpg画像で、それをクリックすると消えるようになってます

 よく分からんまま見よう見まねで貼りつけて動かしただけなんですが、こ、こいつ、動きます

 なんつーか、簡単すぎる。マジでjQuery万歳三唱です

自分が主に使った入門用サイトの紹介>

 はじめてのjQuery

 ・5分ほどのスライド最初見たときは知識不足で理解不能だった。

 ASCII.jp:40分で覚える!jQuery速習講座

 ・初心者の神・西畑一馬様の入門講座。jQueryの雰囲気が分かる!

 なお、「はじめてのjQuery」を見たのが、このドラクエサイトを作るきっかけでした

 黒い画面に浮かぶスライドを見て、「ドラクエの画面っぽい」とひらめいたのです

 いろんなjQueryサイトを見てパクれる……いや、参考になるのを探すのは面白いかと思います。

 うちのサイトを見て、「懐かしのゲームブックサイトを作りたい!」とかひらめいてください。

 個人的に楽しみたいので、ホントぜひどうか誰かひらめいてください!

 で、簡単に動くのを見て、jQueryのすごさを改めて思い知り、きちんと勉強しようと考えました

 そこで助けられたのが、jQuery初心者救世主西畑一馬」さんの記事です

 それを見ながらようやくjQuery勉強を始めたのです

 なお、本格的に勉強しようという人は、入門の「速習講座」より、

 ASCII.jp:Web制作の現場で使えるjQuery UIデザイン入門

 という記事がオススメです

 これも同じく西畑さんの記事なのですが、こちらは量が膨大にあります

 速習講座では軽く流された部分も、一個ずつ丁寧に解説されています。

 本気でやる気に火がついた方にはこちらがオススメです

 というか、西畑さんは本を書いてはるので、それを買いましょう(布教)。

 サイト作成ではホンマに助けていただきました……!

3・「すすむ」と「もどる」

 勉強しながら、コピペでなく試行錯誤で作ったのがこれです

 ここは入門によく書かれる「アコーディオンパネル」をアレンジして作りました

 アコーディオンのように開いたり閉じたりするアニメーションでの演出です

 jQueryは、簡単にいろんなアニメーション効果がつきます。これが楽しんです

 そこから3種類を紹介すると、

 どうですか? なんかおもしろそうじゃないですか?

 自分サイトの「すすむ」「もどる」で使っているのは、スライドアニメーションです

<「すすむ」の仕組み>

 「すすむ」を押すと、表示部分が上に隠れて消え、次が表示されます

 あんま気にしなくていいんですが、処理を細かく言うと、

  1. 最初は一番目だけが表示部分
  2. クリックで、表示部分の次の二番目も表示
  3. 直後に一番目を上にスライドして消すことで、二番目がスライドして現れる

 という変な動きをしています。

 たぶんもっと簡単な処理ができると思うんですが、自力で考えてやるとこんな感じになりました

<「もどる」の仕組み>

 こっちは簡単。

 クリックしたら、表示部分の前の部分スライドして現れるだけです

 正直この「すすむ」には苦戦しました……。

 けど、ちょっと苦戦して勉強するところがあるのもまたよいです

 勉強したおかげで、jQuery能力がちょっと見えました

 htmlとかCSSとかからすると、jQueryはなんか信じられないくらい大量のことができます

 たぶん、jQueryの元になってるJavaScriptがすごいんでしょうね。

 わずかに勉強して改めて、使いこなしているプログラマーのすごさを思い知りました

4・「もくじ」とかの移動

 で、順調に進んでいたサイト作成最後で壁になったのが、こいつです

 この目次には、2つの仕組みがあります

  1. 「もくじ」にマウスを合わせると、ひょいっと選択画面が現れる仕組み
  2. クリックすると指定の場所へ飛んでいく仕組み

 1つめの、「マウスを合わせたときの動作」は「hover」というものを使っています。

 hoverってのは、「マウスを合わせたとき」ってことです

 なんか難しいのが出てきましたが、実はこれも入門講座の例をパ、参考にしました

 上で挙げた、「はじめてのjQuery」に出てきた「hover」の使い方の例ですコピー万歳

 でも、いきなり「hover」とか言われても意味分からん人も多いですよね。

 なので、どんな感じで動いているか、「ふーん」とイメージだけ見ておいてください。

処理イメージ

  1. 初期状態では選択画面を隠す
  2. 「もくじを hover(カーソルを合わせる)したとき」「選択画面を 表示させる」
  3. (hoverじゃないときは、選択画面を隠す)

 ということをやっています。

 これは簡単な処理した。まあ、ほぼ丸写しですし……。

 で、苦戦したのが、2番目の「クリックして移動」です

(なお、パッケージ画像クリックしたときも同じ移動を使っています)

 処理の内容としては、たとえば「ドラクエ1・1話」の項目に飛ぶ場合

  1. ドラクエ1・1話」の前の部分すべてをスライドさせて消す。
  2. ドラクエ1・1話」の部分スライドさせて出す。

  (実際に見えるのは、2のスライドして出てくるところだけ)

 という処理です

 が、なぜかここでエラーが。

 「ドラクエ1・1話」に飛んだ後、「すすむ」がうまく使えない……。

 まるで「次が存在しない」みたいに進まなくなってしまうんです

 ぶっちゃけると、ここは今でも原因が分かりません。

 で、理屈が分からいから、思いつく方法を手当たり次第試してみました

 その中で成功したのが、「次が存在しないなら存在させてしまえ」というものです

 何を言っているかからないと思いますが、大丈夫、俺も分かりません。

 いちおう処理としては、

 1・「ドラクエ1・1話」の前の部分すべてをスライドさせて消す。

 1.5・「ドラクエ1・1話」の後ろの部分すべてをスライドさせて出す。

 2・最後に「ドラクエ1・1話」の部分スライドさせて出す。

  (実際に見えるのは、2のスライドして出てくるところだけ)

 と、1.5を入れたものです

 自分でもなんで成功したのかはよく分かりませんが、きちんと表示はされています。

 よく分からないなりにも動いてしまったのは、きっとjQueryのパワーだと勝手に納得しておきます

(ここはきちんと知識のある人に見せるのが恥ずかしい内容ですね。変なコードですみません)

最後お話したい、jQueryのすごいパワー

 つまるところもありましたが、以上がjQueryでの処理です

 これで何とかサイトは完成しました

 たま休日作成する趣味レベルサイトとして、自分でもすごく満足です

 で、このサイトを作って気づきました

 jQueryは何がすごいかって、これ、めっちゃ楽しいですよ。

 ・プラグインコピペするだけで見違えるように、サイトが動く。

 ・ちょっと表現を覚えるだけで、表現アニメーションが加わる。

 ・さらに研究すればするほど、いろんなことができるようになる。

 今までJavaScriptとか、独学素人なんで、なかなか勉強する気が出ませんでした

 勉強の大事さは分かるんですが、時間とか取れないです

 しかも、「関数引数がどうたらで、まずは足し算をアラート表示」とか、あまりやる気が出ません。

 でも、jQuery勉強の成果がすぐにめっちゃ分かりやすく出ます

 たぶん、自分にとって一番効果が大きかったのは、簡単さよりも便利さよりも、「やる気が出る」ってことでした

 実は、いったん完成した後、付け加えた機能があります

 それは「すすむ」の部分

 「最後のページで『すすむ』をクリックすると、始めに戻る」という機能です

 ここは、jQuery独自の機能を使ったわけではありません。

 JavaScriptの「if構文」を勉強して作りました

 jQueryJavaScriptの一種なんで、こういう構文が使えるんですよね。

 どんな感じの処理かを説明すると、

  • もし、最後なら最初に戻る。
  • それ以外なら、表示を次に進める

 という、単純なものです

 単純だけど、初めてのJavaScriptの構文で、自分には大きな一歩です

 今まで進むことができなかった、本当に大きな一歩を、自然と踏み出せていたのです

 届けたいので、もう一度書きます

 jQueryめっちゃ楽しいです

 めっちゃ楽しくて、やる気を引き出してくれるんです

 今はま技術はないけど、魅力あるwebを作る力を身につけたい方、jQueryジオススメです

 自分も取れる時間は少ないなりに、楽しみながら少しずつ進歩していきたいと思います。

 このような長い文章をご覧いただき、誠にありがとうございました

トラックバック - http://anond.hatelabo.jp/20110502041801

記事への反応(ブックマークコメント)