DWのライブラリとjQuery

Posted on by yanagisawa

jQuery入門のチュートリアルページでは、左にあるサブメニューが非常に長くなりそうな
予感なので、修正が楽なようにdream weaverのライブラリを使うことにしました。
チュートリアルのページ
　
でもライブラリはページごとに個別の設定ができないので、現在表示しているページの
修飾ができません…。なので、jQueryを利用して指定したメニューだけを修飾する
ようにしました。
　
仕組みはシンプルです。まずメニュー毎に文字をspanタグで囲みidを付けます。
そしてjQueryでライブラリの外にあるdiv(idはsidemenu)に設定した変数volの値を
取得し、その値と同じidのメニューを操作するようにしました。
　
最初はjavaScriptでURLからファイル名を取得し、それを利用する方法にするつもりだったの
ですが、index.htmlの扱いやサイドメニューのないページもあるので、現在の方法にしました。
　
今回のポイントとなるjQueryのメソッドはwrapとunwrappです。これらを利用すると、
指定したタグを新たに別のタグで囲んだり、またタグを外すことができます。
　
まずは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文によって処理されないように
なっています。
　
とりあえずサイトの枠組みが完成したので、あとはチマチマとブログの記事を移行していこう
と思います。でも、結構行き当たりばったりで記事を書いてきたので、推敲に時間を取られ
そうな予感がします…。
　
モチベーションも上がりにくいですが、勢いでドメインを取ってしまったので
頑張ろうと思います。
　
　
　

コードを読みやすく修飾（成功例）

Posted on by yanagisawa

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

コードを読みやすく修飾（失敗例）

Posted on by yanagisawa

技術系のサイトでプログラムのコードがきれいに修飾されているのをよく見かけます。
色々調べてみると、googleのprettify.jsやwordpress用のsyntaxhighlighterが
有名なようです。
参考：google検索「prettify.js」
参考：google検索「syntaxhighlighter」
　
新しく作成したサイトでは、これらを試そうと思ったのですが、やめました..。
説明したコード「だけ」を修飾するようにしないと、説明しにくくなるので。
　
ということでｊQueryを利用して、着色機能を省いた最低限の修飾と行番号を表示するような
プログラムを作成する事にしました。サクッと作成できたので、
とりあえず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のテンプレート

Posted on by yanagisawa

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

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

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

Posted on by yanagisawa

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

safariのアップデート？

Posted on by yanagisawa


　
Macではたまにアプリのアップデートが掛かるけれど、何が変わったかよく分からない
ことが多いです。今回のsafariが変わったのもアップデートのためなのかな？
　
何が変わったかというと、ソースを表示するときのウインドウがいろいろ高機能に
なりました（上記キャプチャの下半分）。javaScriptのデバッガなんかも付いているみたい。
　
　
　

jQueryでセンタリング

Posted on by yanagisawa

いろいろな企業のサイトのソースを眺めていたら、CENTER ELEMENT PLUGINなる
プラグインが気になったのでメモ。このプラグインを利用すれば簡単に要素を
センタリングすることができます。左右中央はcssで簡単にできますが、
上下中央はいろいろ大変なようなので、これに頼ってしまうのも良いかもしれません。
スマートフォン（iOS,Android）でも動作します。　
CENTER ELEMENT PLUGINのダウンロードページ
　
　

・最小設定のセンタリング

利用方法は非常にシンプルで以下の様に設定するだけです。セレクタでセンタリングしたい
要素を設定し、それに対してcenterメソッドを利用するだけです。センタリングは
要素の親要素に対して行われます。以下のサンプルではbodyが親要素になっています。
センタリングのサンプル01

$("#testBox").center();

　
　

・上下（左右）のみのセンタリング

このプラグインは引数を設定することで、上下中央や左右中央のみにセンタリングすることが
できます。引数は以下の様にオブジェクトを作成し、それにプロパティを追加する形で設定
することに注意してください。以下のサンプルではhorizontal（水平方向）のプロパティを
falseにしているので、上下方向のみセンタリングされます。
他に設定できるプロパティはvertical（垂直方向）です。
上下のみのセンタリングサンプル

var argObj = new Object();
argObj.horizontal = false;
$("#testBox").center(argObj);

ネット上のサンプルでは以下の様に（）内に無名Objectで設定されていることが多いです。

$("element").center({horizontal:false})

おしまい