DesignホームデザインjavascriptアーカイブRSS読み終えた書籍はこちら(知り合いの方にはお譲りすることも可能です。)来年春の引っ越しに向けて、自宅に大量にある本を整理しています。以下の本の中で、欲しいものがある“知り合いの方”は、メール、やtwitter、facebookなどを通じて連絡してください。以下に未掲載の物もまだまだたくさんあります。随時挙げていきますので楽しみにしていてください。3日dribbbleのRSSを使ってサイトを作った。TweetdribbbleのRSSを使って、ギャラリーサイトを作りました。レスポンシブデザインに挑戦するのが目的だったので、様々なデバイスに合わせてレイアウトなどを変えるのが特徴です。9日[Node.js]ターミナルで使用コマンドTweet意外に何で終了するのかわからなかったので、メモ。DOMってhtmlばかりを書き書きしてると、直感的に理解した気になってしまうのですが、改めてメモしておきます。Coffee</p></div><!--/#hakashun-->例えば、上記のようなhtml(もちろんタグ内です。)がある場合で考えます。document.getElementById("hakashun");で取得します。document.getElementsByTagName("p");で取得する。document.documentElement;を用いる。Coffee"));//<p>タグに作成したテキストを入れるpDiv.appendChild(starbucks);こうして、色々勉強している訳だが、本当に知らなかったことばかり。Ageの活動が終わって、体系的にやっと勉強できているんだけど、こうした時間も大事にしなくてはと思います。最後にDOMツリーの移動について図を貼り付けておきます。DOM操作はjQueryもあることですし、現実的にこれらを使う機会が多いとは限りませんが、何事も知っているにこしたことはないでしょう。実行したい関数名;request.send(null);}先日のブログで作成したrequestオブジェクトを呼び出し、接続先URLを[url]という名前の変数に格納します。true);「request.open()」は、接続を初期化します。()内には3つの要素が指定されています。:サーバーへのデータ送信方法を指定します。"POST"が他にもあります。url:Webサーバ上で、実行させたいPHPなどのURLを指定します。true:trueが非同期を、falseが同期通信を指定します。実行したい関数名;onreadystatechageメソッドで、実行したい関数を指定するときは、関数名の後ろに()をつけません。onreadystatechageは、リクエストの状態が変更された時にブラウザにそのことを伝え、関数を実行します。request.send(null);}こうすることで、urlにダミーの引数として時刻が付与されるので、毎回違ったURLをリクエストすることが出来ます。初歩的なことですが、こんなやり方もあるようです。200」サーバのリクエスト処理が問題なく完了したときは、サーバから、ステータスコード200が返されます。}}上記のようなコードにすれば、リクエスト処理でエラーが起きているかを警告の有無でしることができる。Rushシリーズを初めて手にしたのですが、面白い!ただし、若干の改訂等あるようで、書籍に記載されたサンプルコードに間違い!?があるので、後でリソースとして活用もするために、ブログに記していきたいと思います。}クロスブラウザ対応のために、try&catchを繰り返したコードを書籍では紹介していました。最近はもっとシンプルな記述が一般的かもしれません。」Tweet作業内容@Anywhereフレームワークで、twitterへ投稿するフォームを自分のサイトに実装するということをしました。・<iframe>で指定したdiv内にJSで流し込まれるのと、外部からの読み込みをハードに行うため、iframe内のコンテンツ表示まで結構時間がかかる。・ツイートを投稿するボタンが「tweet」とデフォルトでなっていて、オリジナルボタンに変えにくい。twitter2011年4月29日jQueryで、div要素を時間差で上から落とす。Tweetついこの間まで、Appleのサイトでナビゲーションがページ表示と時間差で上からストンと落ちてきました。あれと似たような、上からストンと落とす機能で、このようなものを実現するjavascriptを書きました。JQueryと共に読み込ませているスクリプトは、以下に記載しておきます。int=0;/*ページがロードされたら、touyjouファンクションを作動させる。【4】背景画像を常にブラウザサイズぴったりにする。jQueryよりWebサイトの背景に、大きなサイズの画像を使う際ぶちあたるのは、見る人のブラウザサイズによって背景画像の表示されるサイズをコントロールできないということです。この問題に対してjQueryを使って解決方法を紹介していた海外のサイトがあったので、紹介したいと思います。「背景画像を常にブラウザサイズぴったりにする」とは?はじめに、「背景画像を常にブラウザサイズぴったり...」とはどういうことかを見てみましょう。こちらのサイトをご覧ください。リンク先のサイトでは、ブラウザのサイズを変更するとそれに合わせて背景画像の横幅や縦幅が変化します。以下ではここで使われているjsコードを検証します。jsコード、CSSはこのようになっています。}画像のアスペクト比を割り出すのがポイントこの手法でのポイントは、背景に使われている画像のアスペクト比を割り出し、ブラウザサイズのアスペクト比と比較することで条件分岐を行っている点です。それにより、クラス属性を振り分けてwidth:100%を適用するか、height:100%を適用するかをコントロールしています。$bg.height();具体的にjsコードを検証します。冒頭には、ここで使う変数などを設定しています。$(window),は、windowオブジェクトを用いています。windowオブジェクトについては、以前のエントリーで簡単に説明しました。$bgという変数にはhtmlコードにて、つけられたid属性「bg」を、aspectRatioという変数には、id属性bgが付いた画像のアスペクト比を格納しています。}生成した変数を用いて、ここではresizeBgという機能をまとめています。その中に書かれている条件分岐が以下です。△△}翻訳すると、もしブラウザの横幅/縦幅が画像のアスペクト比より小さかったら○○をして、そうでないときは△△をする。○○と△△の仕事について○○は以下のコードになります。$bg.removeClass().addClass('bgheight');以前にも出てきたjQueryのコードが使われています。id属性「bg」が付いた画像のクラス属性を除去し、新たに「bgheight」というクラス属性を付与しています。△△もまったく同じ手法を用いて、「bgwidth」というクラス属性を付与しています。上記に書いたコードを確認してみてください。読解を積み重ねてきたお陰で、僕自身、大分jQueryのコードを理解してきました。})jsコードの最後には、イベントを発生させるタイミングについて記されています。resize(fn)各要素のresizeイベントに関数をbindします。resizeイベントは、windowがサイズ変更された際に呼び出されます。jQueryのイベントは、コールバック関数の最初の引数でjQuery.Eventオブジェクトを受け取ることができます。このオブジェクトを使って、規定のイベント動作のキャンセルや、バブリングの抑制などを行います。jQuery日本語リファレンスより引用ここでは、ブラウザのサイズがユーザーによってリサイズされた時に、resizeBg()という機能を働かせるということが書かれています。.trigger("resize");とは何のため?!最後に、.trigger("resize");と書かれています。この意味についてはっきり判明することができませんでした。いう意味なのでしょうか?もし分かる方がいたら教えていただけたらと思います。なんとも中途半端な形になっていしまいましたが、今日もためになることが多い読解でした。Popupでおしゃれに登場する吹き出しを作る。Popupを使えば、カーソルを合わせると、ポップがフワッと登場する機能を実現できます。今日は、実際にダウンロードするところから、簡単なサンプルを作るところまでをレポートしたいと思います。Popupで、こんなことができます。Popupで何ができるのかを知りたい方は、こちらのサイトをご覧ください。公式のデモページになっています。<div>要素でくくった部分やテキストリンク、画像など様々な要素に対応していることがわかります。Popupをダウンロードします。Popupの最新版は、こちらのページよりダウンロードできます。※画像はクリックして拡大することができます。ページを少し下にスクロールしていくと、上記画像のような箇所があるので、画像内の赤枠部分をクリックしてプラグインをダウンロードしてください。ダウンロードしたファイルの構成は下記画像のようになっています。※画像はクリックして拡大することができます。画像の中で赤線を引いたファイルやフォルダは必須になります。jquerybubblepopup-themeフォルダの中には、ポップに使われる画像が入っています。htmlファイルを使って実装してみる。htmlファイルをコーディングしてプラグインを使ってみます。新たに任意の名前のフォルダ(ここでは「20110409」という名のフォルダ)を制作し、index.htmlファイルを作成。その中に下記の画像のような構成でダウンロードしたファイル達を入れます。※画像はクリックして拡大することができます。作成したindex.htmlファイルには、ひとまず初期状態として以下のスクリプトを記述しました。Popupを使ってみる。type="text/javascript"></script></head><body></body></html>サイトからダウンロードした各ファイルを、しっかり読み込むパスを書くように注意してください。簡単なテキストにポップを登場させることにするでは、先ほど準備したhtmlファイルに記述を加えて、簡単なテキスト上にポップを登場させるようにします。<body>タグ内を以下のようにします。Popupを使ってみる。style="text-align:center;">これは<div>タグ内のテキストです。</p><!--/#test1--></div></body>この記述を加えたファイルをブラウザで開いてみると、下記の画像のようになるはずです。※画像はクリックして拡大することができます。javascriptを記述する先ほどのhtmlのdivタグにカーソルを合わせるとポップが出る仕組みを作るために、残された作業はjavascriptを書くことだけです。これまで記述を加えてきたindex.htmlの</head>直前に、以下のjavascriptを挿入します。type="text/javascript"><!--$(document).ready(function(){//$()の中には、ポップを表示させたい要素のID属性、クラス、タグ名を記述します。$('.button').CreateBubblePopup({//▼上からポップを落とす。'top',//▼要素の真ん中にポップが来るようにする。'center',//▼ポップ内テキストを設定する。/>出てくることに成功しました!!',//▼ポップ内のスタイル属性を設定する。'text-align':'center'},//▼ポップの色を決める。'all-black',//▼jquerybubblepopup-themeフォルダの相対パスを記述する。'images/jquerybubblepopup-theme'});});//--></script>スクリプトのそれぞれの箇所の意味はできるだけ記載したので、参考にしてもらえたらと思います。値を変えれば、簡単にカスタマイズできるので、ぜひチャレンジしてみてください。完成!!この結果できたのが以下のサンプルになります。※画像をクリックするとサンプルページへ移動します。ポップの部品も自作してすぐに導入が可能だと思います。【3】画像をフェードインで読み込ませる|jQueryを読解するTweet画像がふわっとおしゃれに登場するサイトを良く見かけます。今日はそんなことを実現するjQueryのスクリプトを読解してみます。img').hide();.imgBoxとは、予めHTML側に設定したクラス属性です。jQueryを使って、.imgBoxクラスがつけられたタグ内の、<img>タグに、hide()という仕事を付与しています。.hide()各要素のうち、表示状態にあるものを非表示にします。[callback])と同じ動作ですが、アニメーションが無く即座に非表示になります。要素が既に非表示になっている場合は、何も起こりません。jQuery日本語リファレンスより引用つまり、.imgBoxクラスがつけられたタグ内のimg(画像)を非表示にしているのです。int=0;共に初期値を0として、iとintという変数を生成しています。});ここでは、windowオブジェクトが登場します。windowオブジェクトwindowオブジェクトは、JavaScriptのオブジェクト階層の最上位に位置し、画面上に表示されているすべてのオブジェクトの親となるオブジェクトです。});という仕事を付与することでページコンテンツが全てロードされたら△△という仕事を作動するということが書かれています。setInterval("doThis(i)",500);ページコンテンツが全てロードされたら作動させる仕事内容です。setInterval(○○,△△);とは、△△ミリ秒間隔ごとに○○という仕事を実行するという意味で、ここでは、0.5秒でdoThis(i)という仕事を実行するということが書かれています。doThis(i)という仕事については、下記の部分に書かれています。$('img').length;imagesという名前の変数を生成しています。.lengthは以前も出てきましたが、いわゆる...の数を格納させたい時に使うメソッドです。<img>タグの数(=画像の枚数)をimagesという変数に格納しています。setInterval("doThis(i)",500);で設定したintの変数に組まれた仕事を停止するということが書かれています。ここは、もう少し上手く説明できるように僕も理解度を深めなくてはいけませんね。$('img:hidden').eq(0).fadeIn(500);img:hiddenとは、隠されている(非表示状態の)<img>タグを指します。非表示の画像を抽出し、0.5秒のスピードで表示させることを実現しています。i++;そして、最後に、画像を上から(プログラム的な意味で)順番にふわっと表示させるためにi変数の値を処理が終わるごとに増やしていきます。理解度が低いために常にリファレンスなどに立ち返りながらの読解になってしまいました。»HAKASHUNはこれを読んで勉強しました。OpenIDについてこのブログを購読このアーカイブについてこのページには、過去に書かれたブログ記事のうちjavaScriptカテゴリに属しているものが含まれています。次のカテゴリはphpです。最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。