jQueryサイトを少しすすめました

先週はjQueryのサイトをあまり進めることができなかったので、土日に頑張ってみました。
チュートリアルのイベント部分を3/4くらい仕上げました。
jQueryは1.7からonが登場し、これまでのbindやlive,delegateは必要なくなるのですが
機能を説明するにあたり、これらの歴史についても触れた方が良さそうだったので紹介しています。
 
書いているうちに名前空間の説明が必要になったりで、タイトルに掲げた
「デザイナーにも分かりやすい」というサブタイトルが少々不安になってきました…。
 
まぁ、とりあえずは各ページを埋めていくことを優先して、あとで推敲していこうと思います。
 
 
 

DWのライブラリとjQuery

jQuery入門のチュートリアルページでは、左にあるサブメニューが非常に長くなりそうな
予感なので、修正が楽なようにdream weaverのライブラリを使うことにしました。
チュートリアルのページ
 
でもライブラリはページごとに個別の設定ができないので、現在表示しているページの
修飾ができません…。なので、jQueryを利用して指定したメニューだけを修飾する
ようにしました。
 
仕組みはシンプルです。まずメニュー毎に文字をspanタグで囲みidを付けます。
そしてjQueryでライブラリの外にあるdiv(idはsidemenu)に設定した変数volの値を
取得し、その値と同じidのメニューを操作するようにしました。
 
最初はjavaScriptでURLからファイル名を取得し、それを利用する方法にするつもりだったの
ですが、index.htmlの扱いやサイドメニューのないページもあるので、現在の方法にしました。
 
今回のポイントとなるjQueryのメソッドはwrapunwrappです。これらを利用すると、
指定したタグを新たに別のタグで囲んだり、またタグを外すことができます。
 
まずはunwrapメソッドを利用して、指定されたspanメニューの外側にあるaタグを
外しています。現在表示しているページですからリンクする必要はないのです。

var str = $("#sideMenu").attr("vol");
if (str != undefined && str !="") {
 $("#" + str).unwrap();
 $("#" + str).wrap("<span class='select'></span>");
}

 
続いて、wrapメソッドを利用して、タグをselectのクラスを付けたspanタグで囲むことで
メニューを修飾しています。構文的に注意しないといけないのは以下の様に終了タグも
セットで設定することです。

var str = $("#sideMenu").attr("vol");
if (str != undefined && str !="") {
 $("#" + str).unwrap();
 $("#" + str).wrap("<span class='select'></span>");
}

 
もしsideMenuに変数が設定されていない場合は、最初のif文によって処理されないように
なっています。
 
とりあえずサイトの枠組みが完成したので、あとはチマチマとブログの記事を移行していこう
と思います。でも、結構行き当たりばったりで記事を書いてきたので、推敲に時間を取られ
そうな予感がします…。
 
モチベーションも上がりにくいですが、勢いでドメインを取ってしまったので
頑張ろうと思います。
 
 
 

コードを読みやすく修飾(成功例)

きのう失敗したコードを読みやすくするjQueryの修正が完了しました。
上書き修正したので、ファイルは昨日と同じ以下のアドレスのmodPrecodeです。
common.js
 
対応方法としては、sizeメソッドで調べた要素の数だけfor文でまわして、
eq(i)メソッドを利用して、各preごとに処理していく方法を取りました。
 
またcss3の:nth-childに対応していないIE7などでも、行の背景色を交互に変えられるように
偶数行と奇数行に個別のクラスを割り当てるようにしました。
次回はcommon.jsにある、もう1つのfunction「setSideMenu」について説明しようと思います。
 
おしまい
 
 
 

コードを読みやすく修飾(失敗例)

技術系のサイトでプログラムのコードがきれいに修飾されているのをよく見かけます。
色々調べてみると、googleのprettify.jsやwordpress用のsyntaxhighlighterが
有名なようです。
参考:google検索「prettify.js」
参考:google検索「syntaxhighlighter」
 
新しく作成したサイトでは、これらを試そうと思ったのですが、やめました..。
説明したコード「だけ」を修飾するようにしないと、説明しにくくなるので。
 
ということでjQueryを利用して、着色機能を省いた最低限の修飾と行番号を表示するような
プログラムを作成する事にしました。サクッと作成できたので、
とりあえずjquerystudyのTOPページに組み込んでみました。
 
行が交互に着色され行番号が追加されていますが、ソースコードを確認すると<pre>で
設定してあるだけです。preタグでは、どんなにcssを駆使しても行番号を表示することは
できないので、jQueryを利用して<ol>タグを組み込むようにしました。
※行番号を<ol>で表示するとコピペの際に行番号がコピーされないので都合が良いのです。
 
要は以下の様に変換するようにしているのです。変換後は改行やタブは削除されているの
ですが、以下の例では読みやすくするために改行とタブを入れています。

<pre class="preCode">
これは1行目です。
<strong>これは2行目です。</strong>
これは3行目です。
これは4行目です。
これは5行目です。
これは6行目です。
</pre>

 ↓
変換
 ↓

<pre class="preCode">
 <ol>
  <li>これは1行目です。</li>
  <li><strong>これは2行目です。</strong></li>
  <li>これは3行目です。</li>
  <li>これは4行目です。</li>
  <li>これは5行目です。</li>
  <li>これは6行目です。</li>
 </ol>
</pre>

 
olやliにはcommon.cssの最後の部分で設定しているので、修飾されて表示されるのです。
で実際にolやliを追加しているのはcommon.jsの関数modPreCodeで行っています。
 
ここでページ内にpreの要素があったら、その内容を改行コードで分割(split)して、
それぞれをliタグで挟んでいきます。ポイントなのはsplitの引数です。ここでは改行で分割するのですが
改行コードはmac/win/unixでそれぞれことなります。なので、その改行コードでも対応できるように
正規表現の|(or演算子)を利用しているのです。
 
これで完成!と思ったら、ページに複数のpreタグがある場合は機能しませんでした。
以下のチュートリアルのページではpreタグの内容が全て同じになってしまっています。
→チュートリアルのページ
 
これはセレクタの指定でprecodeのクラス指定しかしていないため、複数あった場合は最初の
precodeのクラスを拾ってしまうためです。ですので明日はこれを修正して、precodeが複数あっても
正常に機能するようにしたいと思います。
 
おしまい
 
 

dreamweaverのテンプレート

ドメインが無事取れたので、jQueryのサイトをアップしてみました(全くの未完成)。
しかしドメインも安くなりましたね。
http://www.jquerystudy.info/
 
今回初めてdreamweaverのテンプレートでグローバルメニューを作成してみました。
なかなか高機能なのですが、いかんせんテンプレートのコードが長くなりすぎます…。
※ちなみにdesigndrillのサイトはjavascriptで対処していたりします。
 
テンプレートに関して、以下の2つのサイトを参考にしました。
→adobeデベロッパーセンターの案
→制作会社パンセの中の人の案

adobe案だと分かりやすいけれど、テンプレートのコードが非常に長くなります。なにより
パラメータの数もメニューの数だけ必要になるのが頂けません。
パンセ案だと1つのパラメータだけで済みますし、コードの長さも少しは短くなります。
 
でもね、これから作成するjQueryサイトのチュートリアルはサブメニューが非常に多くなるため
パンセさんの案でもしんどい予感…。jQueryに頼ってしまうかも。
 
 
 

jQueryのサイトを作成しようと決心したのです。

昨年の9月より少しずつjQueryの学習過程をこのブログで紹介してきました。
しかし先月、いざ仕事でjQueryを使うとなったときに細かいところを忘れまくりだったのです…
で、細かいところをブログの記事を振り返って思い出そうとしたときに、
なんとこのブログの利用しにくいことか!
 
カテゴリがjQuery,studyの項目は90以上もあるので、順々に探していくことの非効率さ
といったらありません…。ということでjQueryのサイトを作成し、
そこにブログの記事をきれいにまとめようと思います
 
連休の後半に少しサイトの構成を考えて骨格のhtmlは組んだので、明日には少しお見せできる
と思います。
 
 
 
雑記:ちょっと嬉しかった。
jQueryでボタンをクリックするとイベントが2回発生してしまう問題に遭遇したのです。
で、これはイベントフローの問題かな?と思ってgoogleでjQueryとイベントフローで検索
したら、このブログが1番目に表示されました!ちょっと嬉しかったです。
google検索:jquery イベントフロー
 
ちなみに問題の原因は、jQueryでなくタグがおかしな事になっていたことが理由でした…。