2011年07月

マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。

jQueryでドロップダウンメニューを手作りするを理解する入門。

今日ちょっとつまったので調べながら解決した。

まずこちらをの記事をご覧あれ。

jQueryで作る多階層ドロップダウンメニュー
http://ascii.jp/elem/000/000/475/475908/ 


cssまわりは、はしょります。
jquery部分の記述を見ると、こうなっている

$(function(){
    $("ul.sub").hide();
    $("ul.menu li").hover(function(){
            $("ul:not(:animated)",this).slideDown("fast")
        },
        function(){
            $("ul",this).slideUp("fast");
    })
}) 


jqueryの基礎を一応勉強した僕ですが、これでなぜうまくいくのかいまいちわからなかったので
調べながら理解したので説明。


まず1行目。
 
   $("ul.sub").hide();

ここはわかりやすい。
<ul class="sub">を初期値で隠しておくということ。
jQueryではよくあるやり方っすね。


次に2行目からの構造の部分

   $("ul.menu li").hover(function(){
            ホニャララ
        },
        function(){
            プギャー
    })

.hover()については、元記事でも説明しているけど、
マウスが乗ったときには「ホニャララ」を実行して、マウスが降りたときには「プギャー」を実行するという構文。

「ドットホバー命令カンマ命令」と口にだして覚えておこう。

実際のもので説明すると、

<ul class="menu">の子要素である<li>にマウスが乗ったときに「ホニャララ」が実行されて、<li>からマウスが外れると「プギャー」が実行される。


さて、次が一番の難関。ホニャララに相当する部分。

$("ul:not(:animated)",this).slideDown("fast")


ここには、3つくらいの要素がぎゅっとつまっている。

一番シンプルな部分を抜き出すと

$("ul").slideDown("fast")

 という部分が見えてくる。

これは、あらかじめdisplay:hiddenなどで見えなくしていた<ul>を出現させる、
速いスピードでスライドの動きをさせながら出現させる。

という意味だよね。

slideDown("fast")とかはとくに気にする必要はなくて、
とにかく、隠れてた<ul>というタグを出現させる、ということ。その”スライドさせる”、とか”速く”とか、エフェクト部分はおまけみたいなもんだ。 
 
そしてこの基本の出現の処理に、ひとつの追加命令を入れる。

$("ul",this).slideDown("fast")

"ul"の次にカンマthisが入った。


thisというのはjQueryの命令文の中で発動条件となったcssが入ってくる。
今回の事例で言うと、↓この部分

$(function(){
    $("ul.sub").hide();
    $("ul.menu li").hover(function(){
            $("ul:not(:animated)",this).slideDown("fast")
        },
        function(){
            $("ul",this).slideUp("fast");
    })
}) 

じゃぁこの"ul",thisというのがどういう意味かというと、調べたところ

「thisの子要素であるul」という意味らしい。

thisは「ul.menu li」のことであったから、

書き換えると

$("ul.menu li ul").sildeDown("fast")


と同じ意味になる。


言葉で説明すると、

<ul class="menu">の子要素の<li>にマウスを乗せると、さらにその<li>の子要素の<ul>が速いスピードでスライドしながら出現する> 

という意味になりますよ。

そしてあの難しい1文に入っていた3つめの要素が

not(:animated)

の部分。

これがなくても動くは動く。でもどんな問題が起きるかというと、

マウスを載せたり降ろしたりを素早く繰り返してみると、その回数繰り返したぶんだけ、表示したり非表示になったりが後を追うようになんどもなんどもくり返してしまう。

ちょっと言葉じゃわかりにくいので、not(:animated)をはずして試してみるといい。

not(:animated)を入れると、同じようにマウスをのせたり降ろしたりを繰り返しても、処理は繰り返されない。

not(:animated)とは、

「アニメーションしてる最中のものに対しては、ホニャララを実行しないよ」
という意味になる。

なので、動いてる最中のものにマウスを乗せても、命令は実行しません。
動くのがとまってから実行しますよ、と。

だから、処理は1度しか行われずに、すっきりする。

これで、一番難しい部分の

$("ul:not(:animated)",this).slideDown("fast")

が理解できる。


ここで最後の疑問。


<li>にマウスを乗せたら、その子要素の<ul>が表示されるのはわかったYO。
でも、その<ul>にマウスを移動させても開き続けているのはなぜ?


これは、まぁ、<li>の子要素である<ul>に移動しても、まだ<li>にマウスが乗っているのと同じ意味だから。

というシンプルな回答になってしまうんだけど、元記事で注意としてさらりと書かれているのは、

mouseover()とmouseout() を併用して、今回のhover()と同じことをやろうとしてもうまくいかないよ、ということ。


hover()の場合は、子要素に移動しても新たに処理はスタートしないから、ずっとマウスオーバーしている状態とみなされる。

<li>からその子要素である<ul>にマウスを移動しても、<li>に乗ったままなので、ひらきっぱなしですよー、という状態になる。

一方、mouserover()とmouseout()併用の場合は、子要素に移動したときに、新たな処理の始まりだと認識する。

だから、<li>にマウスオーバーして子要素の<ul>が開いた後、その<ul>にマウスを移動させると、<ul>が一度パッと消えて、もう一度開くような動きをしてしまう。slideDownが再度始まっちゃうってことだね。


なので、ドロップダウンメニューを作るときは.hover()でつくろうね、という結論であった。




MT5エラー対処

'Daily'はアーカイブタイプとして登録されていません

というエラーが再構築中にでた。

このエラーは初めてだったので、困った。

ググっていても何も出てこない。


20分ほどうなって、あぁ、Dailyって日付アーカイブのことか、と。


んで、解決したのでメモ

■解決法

①アーカイブテンプレートの「ブログ記事リスト」を新規作成

②中身は使わないのでタイトルを「日別記事リスト」とでもしておく(なんでもいい)

③一度保存

④テンプレートの設定で、
 新しいアーカイブマッピングの作成→種類を日別にする

⑤再構築


OK!


とはいえ、普通にMT使ってる人はこんなエラー出ないと思いますが、

万が一同じエラー出た人のためにメモを残しておきます。


MTの「supportディレクトリに書き込みできません」エラーを解決

お客さんから依頼された仕事でMT5をインストールしたときに
次のようなエラーが出た。

supportディレクトリに書き込みできません。
/home/user/public_html/mt/mt-static/support/uploadsにディレクトリを作成して、ウェブサーバーから書き込みできるパーミッションを与えてください。

SSHでサーバー構築されてたものだったから、

ターミナルでSSHでログインして、パーミッションを変更したら解決。
メモ。

# chmod 777 /var/www/user/public_html/admin/mt-static/support/uploads





「シェル(shell)とはなんだ」から始める。

サーバー構築の勉強を超初心者から始めてる。

んで、まずまっさきに出てくる「シェル」という言葉。
この時点でわかんなかったので調べてみた。

LinuxなどのUNIX系のコンピューターで、
命令を実行するためのツールを「シェル」と呼ぶ。

シェルでは、今のパソコンみたいにアイコンをクリックしたりして操作せず、
ひたすらテキストで命令を打ち込んでコンピューターを操作していく。

(マウスとかでクリックするだけでコンピューターを操作できる
 今のパソコンみたいなシステムのことをGUIという。グイと覚える。
 UNIXみたいな文字を打ち込んで操作する昔っぽいシステムをCUIという。
 クイと覚える。)

僕は大学のときにコンピューターの授業でUNIXの操作みたいなことを
やったけど、全然わからないし、何の役にもたたないと思って、
超おざなりにしていた。 

このシェルっていうのにも歴史があって、
2つの会社がBシェル、Cシェルというのを開発して、それぞれ
世の中に浸透していたらしい。

今で言うブラウザ戦争みたいなもんかと推測する。

そんで、Bシェルの流れを汲むのが
bashというシェル。

僕が、今渡されたIDでsshでサーバーにログインしてみると、
bashという文字が出てくる。

bash-3.2$ 

という風に。

なるほど、これはシェルの種類のことを言っているのだね。

sudoに-sオプションをつける

仕事ではまったことのメモ

su root でroot権限になろうとすると、
パスワードが違いますと出る。

管理者に聞くと、sudo -s で入ってくれと言われる。

sudoとはなんぞやと調べてみると、
どうやら、一時的に他の管理権限で命令を実行するために使うコマンドのようだ。

なので一回一回 「sudo コマンド」 という風に実行していくんだけど、
-sオプションをつけることで、「対話式シェル」が起動する。 


対話式シェルってなに?と調べてみるとよくわからない。

よくわからないけど、ようするにsudo -sで入ることで、
ずっと、root権限状態でいろいろできるらしい。

suとの違いが全然わからないけど、
とりあえず入れたのでメモ。

わかるようになったら、戻ってきてこの記事は書き換えます。

役立たずですいません。
記事検索


手ぶらで通話 - bluetoothヘッドセット

1時間1円で暖かい。電気毛布。

夏のPC仕事のおともに冷えピタ。クールヘッドで脳のスピードがあがります。

お仕事のご依頼・お問い合わせはこちら

コーディングのお仕事が得意です。

info(あっと)tacshock.com
タグクラウド
QRコード
QRコード
  • ライブドアブログ