はてなブックマーク

軽めのjQuery Advent Calendar 2012の６日目の記事です。画面下から「ニョキっ」と出現させる、エフェクト付きの表示について簡単に。 先日、いつもSaCSSでお世話になっているアミバ様…にjQueryを使って、画面下から「ニョキッ」と出現させるようなエフェクトをやるにはどうしたらいいか？と質問をされました。 jQueryにはエフェクト付きで表示・非表示を切り替えるメソッドが用意されていますが、今回はslideUp・slideDownを使います。

今年度に入ってからとある仕事に関わっている関係で、周りがほぼプログラマーさんという環境にいます。プログラマーさんと仕事をしていると、あの黒い画面で作業をしている人が多いので、自分もチャレンジしなければなーと思い、使い始めています。 仕事環境が変わったこともあって、全然ブログにできていませんでしたが、徐々に今後に活かせるようにとメモ。 ターミナル 僕は普段Macを使っているのですが、黒い画面はさっぱりさっぱりー・・・とりあえずMacでコマンドを打つ時に使うソフトがターミナルを使うということだけは把握していました。Windowsならコマンドプロンプトなのかなーとか思っていたら、いろいろ機能が足りないとからしく、周りのWinユーザーのプログラマさんたちが使っているのはPoderosaとのこと。…Macの話に戻って、ターミナルを使えばコマンド入力での操作可能なのでこれを利用。 しかし、そのまま使う

昨日『jQueryで選択したセレクタをハンドラ内で確認』というエントリーを書いたのですが、これを使えば独自メソッド内でliveのイベントを付けたい時にセレクタを簡単に使えると思ったので、昨日に続きメモエントリー。 .live(function(){})は$(document).on('Event','Selector',function(){}) jQuery 1.7での.live()は.on()に統合されています。同じように書くには、 $(document).on('Event','Selector',function(){ //何か処理 }); この様に書く必要があります。 $.fn.◯◯～のようなプラグインを作成して、プラグイン内部で.live()を使わずに.on()で同様の機能を得るためには、選択しているセレクタを書き入れる必要があります。そのため、利用しているセレクタの文字列が必

$('◯◯')で選択したセレクタの◯◯の部分のみを、$('◯◯').click(function(){});などのハンドラ内で確認したい時、どう書けばいいだ？ってちょっとした疑問に思ったので、確認してみた。そのメモエントリー。 おそらく使うことは少ないと思うけど、セレクタで使ったものだけ確認したいってどうやるんだろう？とかそんな些細な疑問。 きっとjQueryオブジェクトに.selectorとかつけたら見れるだろうか～とか思ってやってみたところ、予想通りとれた。 var $element = $('#demo1 p'); $element.click(function(){ alert($element.selector); }); ハンドラ内といっても、一度その前に変数に格納した要素から.selectorを表示しています。こうしないと動作しない。 $(this)では使えない clickイ

以前、『MAMPを使ってMacのローカルで複数サイトのバーチャルホストを設定する方法』というエントリーを書いたのですが、もっと具体的に書いておいて、今後に活用しようと思ったので改めて、ちょっと内容も加えて書いておきます。 ちなみに今回の内容は、先日行ったSaCSS Weekly の１週目ので行った内容と同じになっております。 今回の設定での各達成目標 バーチャルホスト：http://sacss/ でPC内の特定のディレクトリをルートとして表示する バーチャルホストを複数設定してみる イントラ環境と仮想環境からのアクセスでも特定のディレクトリをルートとして表示する htaccessをバーチャルホスト毎に使えるようにする 今回はより明確に、この４つをそれぞれ達成できるように設定方法についてを書いてきたいと思います。 バーチャルホスト：http://sacss/ でPC内の特定のディレクトリをル

jQueryを使って、ちょっとしたhoverの機能を使いたいときは、.hover()メソッドを使っているのですが、これを.on()（.bind()）で使うのはどうやるんだろう？とかわかるようでわからなかったので、ちょっと調べてみた。 .hover()を利用してみる とりあえず、.hover()の使い方からおさらいしてみたいと思います。 .hover()メソッドは、マウスを乗せた時とはずした時の２つの処理を入れておくことで、実現できます。 $('#demo1 p').hover(function(){ $(this).fadeTo('fast',.3); },function(){ $(this).fadeTo('fast',1); }); マウスを乗せると、少し透明になり、はずすともとに戻るという機能です。 以前は乗せた時とはずした時の２つの処理を入れておかなければエラーだったのですが、現

jQueryとかでCSSのpaddingとかを抜きだした時、 pxやemがついたまま抜きだされてくる。 これをreplace()などで数値だけにして足し算とかをしようとしても、 文字列として扱われてしまうことになる。 つまり、文字を数値へ変換しなければならないのだけど、 JavaScriptでどうやれば数値になるのか知らない。 調べたらたまに使っているeval()を使う事で、 文字を数値として使うことができるらしいので、 メモとしてエントリーしておく。 ※文字列を数値とする場合はevelは利用しないように！！ 本エントリーはJavaScriptを勉強する過程で書いた記事です。文字列を数値に変える場合、本エントリーのようなevelを利用するのではなく、次のエントリー「JavaScript：文字を数値に変換する方法その２」を参照し、parseInt()やparseFloat()を利用するように

Webサイトを制作するときに、いちいちサーバーにアップしてプレビューするのも々どうなので、案件ごとにMAMPでバーチャルホスト設定して、自分のパソコンで確認しやすいようにして作業をしているのですが、みなさんってどうしてます？ ローカル環境でも複数サイトのホストを予め設定しておけば、いろいろと便利なこともあるので、ちょっとご紹介。 追記：2012/12/25 より具体的に「MAMPを使ってローカルで複数サイトのバーチャルホストを設定＆イントラ環境や仮想環境からもそのサイトを確認する設定方法」というエントリーを書きました。 MAMPを使って、ローカルに複数サイトをバーチャルホスト設定して利用するのは、とっても簡単です！自分はMAMP Proは使ったことないので、どうなのかわからないですが、無料版のMAMPでも十分副サイトの管理できるのでそれだけであれば購入の必要はないかと思います。 ちょっとし

いろいろ書くことがあるのですが、まずは書籍レビューから。 10日でおぼえる jQuery 入門教室 jQuery関連の書籍は比較的読んでいて、今回のもそのうちの一冊です。 どんな本か？ 『10日でおぼえる jQuery 入門教室』は10日でおぼえるシリーズのjQuery版。実際に覚える内容を10日分のステップに分けて実演をしつつ習得するという構成になっている。ソースコードなども全ページカラーでの表示になっていて、読みやすい。 プログラマー向けな印象 実際にこの本を読んでみて、デザイナー向けよりはプログラマー向けのjQuery入門の書籍になっているように感じた。１日目の内容がHTMLとCSSについての章になっているのと、後半で出てくる使用例も、デザイナーやコーダーがあつかうWebサイト制作ではそれほど使わないような機能が取り上げられていたりする点からそんな印象でした。 jQueryをまだ使っ

フォントサイズを変える「大・中・小」ボタンを実装する方法 今回も以前にエントリーした内容の変更版。知人に「フォントサイズを変えるボタンを画像にして、アクティブなボタンを保持したい」という要望があったので、もらったソースを元に作ってみた フォントサイズを変える「大・中・小」ボタン実装 CSSや文字だけで実装する場合は、以前の『フォントサイズを変える「大・中・小」ボタンを実装する方』を参照ください。 今回はこの機能に、画像の_onと_offを入れ替えるロールオーバーのスクリプトと、そのアクティブ状態を保持しているものを作成してみます。 ※ロールオーバー部分は知人にもらったコードを改変して利用。出典不明。主な仕様も、前と同じまま。 今回作成したデモ fontsize change - jsdo.it - share JavaScript, HTML5 and CSS 画像の場合の仕様ポイント 今

jQueryを使って入力フォームにサンプル文字を入れておき、フォーカスで消すスクリプト:応用　機能追加編 以前紹介した、入力フォームでプレースホルダーを実現する方法を紹介したのですが、inputのvalue値を元にセレクタの指定をしようとしたところ、うまく動作していないことに今更気づいた。 エントリーを書いた当時は問題なかったから書いていたと思うのですが、今確認しても動かないという・・・とりあえず確認してみることに。 動作していない部分 動作していなかったのは、入力後のボタンを押した後に、何も入力がされていなかった場合に、プレースホルダーとして入れていた文字を消すという部分。 valueが空っぽの時に「キーワードを入力」を表示させておくという例なのですが、その「キーワードを入力」という文字を元にセレクタを指定していたのですが、どうやらこれがうまく動いていない様子。 何が原因か最初分からなか

先週末の6月11日、札幌で開催されたオープンソースカンファレンス2011 Hokkaidoにて、スピーカーとして参加してきました。 よさこいソーラン祭りも札幌で開催されていた日にもかかわらず、600人以上の参加者がOSCにきていたとか。その参加者のうちの120人程の前でjQueryの入門的な話をしてきました。 その際のスライド自体は、都合により公開しませんが、その内容のうち、一部をここで書いておきます。 6割の未経験者 今回のjQuery入門の話をする前に、簡単に挙手にてjQueryの利用状況を聞いてみたのですが、参加した人の6割程はjQueryを今まで使ったことの無い方でした。残りはプラグインなどを使ったことのある位な方が多いようでした。これはちょっとびっくりした位で、もっと使われているものかと思っていたのです。しかし実際の参加者層としては、使ったことの無い方が多いという。 JavaSc

先日より、Twitter公式のフォローボタンがリリースされていましたけど、そのフォローボタンがリリースされたくらいから、ブログに導入をしていたTwitterのボタンが表示されなくなっていました。 しかし、このブログ意外のサイトでは普通に表示されているところが多いし、Google Chromeでみた時は普通に表示されるという状態・・・なぜ！？ もし同様の問題がある人がいるかと思ったので、この問題の解決方法をかいておきます。 問題の原因と対処法 このブログにTwitterの公式ボタンを配置していたのですが、Firefoxでは、なぜか表示されない。Firebugでみてみると、ツイートボタンやフォローボタンで利用されいてる「widget.js」がなにやらエラーになっていた。なぜ！？ 結論から書くと、この今回の問題の原因は、文字コードにあった。このブログはseesaaブログを利用している都合上、文字

JavaScriptとかjQueryとか使っていろいろしてきていたんですが、今一度ちゃんと基礎を勉強＆復習しておかないとやばそう。覚えていないこととか多々あるので、基礎から勉強しなおしてみることにしました。 まずは「return」について。戻り値とか値を返すとかはわかるのですが、どう使うの？使いどころは？どうなるの？いろいろやってみた。 とりあえず、Firebugを使って色々入力してみることにします。 return; //SyntaxError いきなりreturnだけしてもエラーだよということですね。何かに値とか返すよ～って時に使うものとのこと。 それならってことで、関数の中に入れてみた。 function test(){ return; }; test(); //undefined でも、returnだけしても、何も返すものがないので、undefined。 じゃあ、trueってのをいれ

jQuery で要素の CSS のプロパティの値を取得する方法 | ウェブル 内容を見ると、CSS のプロパティの値を取得する方法ってよりも、.toggle()で交互に別なイベント動かしたいよ～！という事らしい。 見てすぐに思わず「できるよ～」というツイートを@soraiyさんにしてしまったのですが、せっかくなので、.toggle()でも十分できることでしたので、ちょっと作ってみた！ .toggle(function(){A},function(){B}) ネタ元のエントリーではクリックイベントで起こる内容を、CSSのプロパティによって交互に切り替えるようなことをしているのですが、クリックしたイベントの内容を交互に切り替えるようにするには、.toggle()を利用します。 単に.toggle()だけだと、表示と非表示を繰り返すイベントなのですが、.toggle(function(){A},

仕事で、JSで計算ってできない？という質問が出てきたので、簡単に「できます！」と答えた。でもよくよく考えると、単純な処理だけで終えるべきか、しっかりつくり込むか考えないと。 とりあえずは単純に作ってみた。 単純に入力した値を足してみる まずはinput要素に入力した文字を単純に「+」で足してみようと思います。 ■コードとデモ jQuery(function($){ $('button','.demo1').click(function(){ //左側inputの入力値を取得（numA） var numA = $('input:eq(0)','.demo1').val(); //右側inputの入力値を取得（numB） var numB = $('input:eq(1)','.demo1').val(); //左＋右の値を出力 $('input:eq(2)','.demo1').val(nu

先日『CSS3のtransitionプロパティでアニメーションを試してみた』をエントリーしましたが、とりあえずは:hoverで動作するものばかりを試作していたのですが、:hover以外はどんなのがあるか？と思い、とりあえず調べてまとめてみた。 E:hover まずは前回同様:hoverから。マウスを要素に乗せることで動作します。 .demo1 div{ width:150px; height:100px; background-color:#0066cc; border:3px solid #ffffff; color:#ffffff; -webkit-border-radius: 5px; -moz-border-radius:5px; border-radius: 5px; -webkit-transition: 1s; -moz-transition: 1s; -o-transiti

このブログでもひっそりと使っているCSSでのanimation。結構今更ですが、これも毎回調べたりしつつ使っているので、勉強したことを書きだしておきます。 今回はその中でもtransitionを使ってアニメーションをみてみようと思います。 webkitとOpera、Firefox4で動作 2011年1月現在、CSS3のアニメーションが動作するのはwebkitのSafariとChrome、それとOperaとFirefox4で動作します（IE未確認）。ただし、それぞれのブラウザでベンダープレフィックス（接頭語）がないと動作しません。 まずはデモを まずは簡単に、ブロックが大きくなるデモから。 ■CSS .demo div{ background-color:#0000ff; width:100px; height:100px; color:#ffffff; /*以下アニメーションの設定（○○は

以前にも、２回程エントリーをだしていたのですが、年末になって、この『リンクのクリック領域をブロック全体にするスクリプト』へのアクセスがちょっと増えていましたので、改めて再度まとめてみようかと思います。 jQuery：リンクのクリック領域をブロック全体にする簡単なスクリプト リンクのクリック領域をブロック全体にするとは？ どういうケースかというと、商品の一覧で、画像をクリックしても、画像下の説明テキストをクリックしても、ひとつのブロック内であれば全体をひとつのリンクとしたい！というような場合に利用します。 HTMLで簡単につくろうとしたら、aタグをブロック全体に付けたらいいのですが、うまく全体にならなかったり、動作がおかしくなったり、なによりマークアップ的にいいのかな？なんて思ったりもするので、あまり利用はしないと思います。ですが、JavaScriptを使えば簡単にこれが実装できるのです！

2010年もあと数日で終わってしまいますね。2011年、Webサイト制作の業界に入って、いろいろな本を読んできましたが、今年は例年よりも読む冊数が減ってしまったような。 そんな読んだ本の中でも、コーダーとして「これは読んでいてよかった！！」と思うものがいろいろありましたので、2010年のまとめとして紹介しておきます。 2010年に読んでためになった書籍 とりあえず、ジャンルとか関係なく紹介します。一部だけ買ったのに読んでないという本と購入予定の本もありますが、年始早々購入予定でもあるので合わせてご紹介。 Web制作の現場で使う jQueryデザイン入門 デザイナーもコーダーも必読のjQueryを導入から利用出来るまでになるための一冊。かなり分かりやすく書かれています！ HTML5＋CSS3で作る 魅せるiPhoneサイト iPhone向けサイトを制作する前の必読本。iPhoneはSafar