2012年03月

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

子要素に特定のタグがある場合のみ実行する、jQueryのhas()メソッドが便利

たとえば、

divのなかにaタグがあるときだけ、divをマウスオーバーしたときに
背景が変わるようにする、とか

そういうときに使えるのがhas()メソッド

たとえば、divをマウスオーバーできるようにするには、
こんな感じになるよね。

$('.box').hover(
function(){
$(this).css({'background-color' : '#ddd'});
}, function(){
$(this).css({'background-color' : '#fff'});
}
);

<div class="box">
をマウスオーバーしたときに背景色をddd(グレー)にして、
マウスをはずしたら、fff(白)にする。

これを、has()を使うと、こうなる


$('.box').has('a').hover(
function(){
$(this).css({'background-color' : '#ddd'});
}, function(){
$(this).css({'background-color' : '#fff'});
}
); 
 
has('a')が入ったことによって、
全部の<div class="box">をマウスオーバーできるようにするんじゃなくて、
divの中に aタグがあった場合だけマウスオーバーできるようになる。


これはいろいろなところで大活躍しそう。

ちなみに、検索してたときは、
「jQuery if has」とかで探してた。条件分岐かなと思ってたから、
でもhasだけでいいんだな。

ちなみにjQuery1.4以降のメソッドだそうです

WEBまわりの知識をものすごいスピードで蓄えていく方法

僕は仕事でWEB制作をやっています。

守備範囲は、

・WEBディレクション
・Information Architect
・HTML+CSSマークアップ
・javascriptちょっと
・phpちょっと
・Movabletype

のあたりです。

デザインもプログラミングも、本職の人ほどにはできない僕が
書く内容じゃないですが、

WEB/ITまわりの知識を急速に取り込んでいく効果的な方法について書きます。



■準備

技術書のたぐいも、結構ペラペラめくったりしてきましたが、
原則としては、自分で実際に作る・触る、をしてみないと
全然わかんないままです。


なので、自分で触って見るようにする準備は大事です。


XAMPP
http://www.apachefriends.org/jp/xampp-windows.html

をインストールして、ローカルでサーバー環境を動かせるように
しておきましょう。

よくわからなくても、サイトのとおり、やるだけです。


XAMPPを入れると、phpでのプログラミング練習や
MySQLでのデータベース作りの練習などができるので、
良いです。


とはいえ念のため安めのレンタルサーバーなんかも
借りておいたほうがいいです。


そのほうが、いろいろテストできるし、
サーバーを借りるっていうのはどういうことなのかが
わかるためです。



そこまでが準備。


高速に知識を取り込む方法とは、


次のサイクルを、毎日やることです。


■WEBまわりの知識レベルが高速で成長する修行



①毎日はてぶのIT・コンピューターのホットエントリーになった記事を全部読む。

はてぶのIT・コンピューターのホットエントリーには、毎日、さまざまな分野の
記事があがってきます。

それをかたっぱしから全部読みます。

興味関心のある読み物だけ読むのはNGです。

あからさまに自分では理解出来ない様なコアなタイトルの記事も読みます。

理解出来ないことばかりですが、とにかく字面をおいます。



②知らなかった単語をかたっぱしからぐぐって調べていく。

とは検索で、単語をかたっぱしからぐぐって調べていきます。
英語の単語を覚えるような要領で。

ただし、多くのIT系の単語は、その意味の説明に、また専門用語が使われていたり、
抽象的で概念的な表現が使われていたりして、

全然わからないことがほとんどです。

それでもかまわないので、調べてもわからないやつは、放っておきます。

数個でも、「あ、そういうやつね」って理解できた気になれるものがあればOKです。

ほかは、まだ自分が出会う単語じゃなかったってことでさっぱりあきらめて次にいきましょう。



③自分の環境で試せるものは、とりあえず、試してみる。

phpの書き方に関する記事であれば、とりあえず、同じように書いてみて、XAMPPなどを使って、動かしてみましょう。

jsのTipsに関する記事であれば、とりあえず、同じように書いてみて、動かしてみましょう。

意味がわからなくても、コピペしないで、手打ちでやってみることが大事です。

漢字が読めないのに、論語の模写をしてるような感覚で。



この①〜③を毎日やってると、少しずつわかる単語が増えていきます。

自分で試してみて、なんとなくこういうことかな?と感触をつかむようなことも多い。

それは、また似たようなことがはてぶの記事で上がってきたときに、また試してみると、
より理解がふかまるので、1発で完璧にしようとしなくてもOKです。


 
 ■dotinstallはおすすめ、なんだな

dotinstallっていう初心者向けのプログラミング動画講座があります。

これは空き時間で全講座をやっとくと良いと思います。

1つの授業は長くて3分。

短いと1分ちょっとです。

僕は通勤電車に30分ほど乗っていますが、 その間にも、
5、6個くらいは動画をみて、授業を進めることができあす。

1日10分で3つやる、でもOK。
大人の進研ゼミです。 

ひととおり、やりきると、はてぶのITのホットエントリーの記事内容が
圧倒的にわかるようになっていると思います。





これらを毎日コツコツとやることで、

同業のライバル達よりも、ぶっちぎりのスピードで、成長していける。


はず。

jqueryでtoggleを使ってクリックするたびに画像を切り替える

ボタンを押すと、ボックスが開閉して、
しかもボタンの画像が変わるっていうのを作りたくて、jqueryで以下のように作りました。


js
$(".hogehoge").toggle(
function() {
$(this).attr('src', 'images/bbb.png');
$(".hogehoge2").css("display","block"); 
},
function() {
$(this).attr('src', 'images/aaa.png');
$(".hogehoge2").css("display","none"); 
}
);

html
<img src="images/aaa.png" class="hogehoge">
<div class="hogehoge2">
ここにいろいろ書いておく
</div>
 
ボタンとなるaaa.pngにclass="hogehoge"をつけておきます。

js側では、hogehogeをクリックするたびに処理を交互に行うように
toggle()を使う。

 クリックすると、
 class="hogehoge"のついたボタン画像を切り替えつつ、同時に
class="hogehoge2"のdivをオープンにする。

(あらかじめ、hogehoge2はdisplay:noneにしておくこともわすれずに)

 

自分の判断軸

はてぶでホットエントリーしていたこの記事

この発想がすごい!次世代表現のヒントがいっぱいのWebサイトまとめ5つ

http://w3q.jp/t/1585 



発想は確かにすごいのかもしれない。
技術的な意味では。


ただ、僕にはおもしろさが全然わからない、というか、
どんなメッセージを伝えたいのかもわからないし、
突飛である、ということ以外は、、、。

きっと芸術・アートとして素晴らしいんだろうと思う。

僕は、芸術・アートの分野の感性があまりよくわかってないので、汲み取れないのかもしれない。。


こういうサイトを創っている人をdisるつもりはまったくない。
僕よりはるかに企画力も技術力もある。
新しい発想をもって、クリエイトできる人は尊敬する。

(じゃぁわざわざ、こんなネガティブなことをブログに書いてどうすんの)


実は、広告や、クロスメディアでのインタラクティブなキャンペーンの事例とか見ても、
同じようなことをよく思うんだ。

新しい試みで、何万人の人が訪れました。
っていう企画者のインタビューなどを雑誌で読んで、

いいなー、僕もこんなふうにインタビューされたいぜ、

なんて思いながらも、

この企画っておもしろいのかな・・。

って疑問に思っちゃう自分がいる。

これ、僕だったら参加しそうにないけど・・。とか。

でも、何万人もの人が参加して実績をあげてるんだし、有名なクリエイターが手がけてるんだから
おもしろいに違いない!

って思い込もうとする自分もいる。


でもやっぱり、それも良くないんじゃないかと。

自分の感性を信じないことには、ポジショニングできない。

みんなが、すごい!おもしろい!って絶賛するものでも、
自分がおもしろくなかったら、おもしろくないって、ちゃんと判断しないといけないなと思う。

んで、もちろん、ちゃんと自分も、
「僕は、こういうのがおもしろいと思う」

ってのを発信しないといけないよね。

windowsのエクセルでF2キーで出来た、「セルの中を選択」をmacでやる方法

winのエクセルでは、F2を押せば、セルの中味が選択され、
編集モードになることができた。


エクセルをよく使う人ならば、多用していたショートカットキーだと思う。

これが、macのエクセルでは使えない。

macでは、セルの中味を選択するには、

「control + u」

を使いますよ。



でも本当いうと、F2でやって欲しいよね。

controlとか普段つかわないキーを使わせないで欲しい。
多用するんだから。
記事検索

リモキュー

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

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

https://twitter.com/tacshock
タグクラウド
QRコード
QRコード
  • ライブドアブログ