Lightbox風モーダルウィンドウの作り方

jQuery

今回はjQueryで「モーダルウィンドウ」を作成する方法を解説します。モーダルウィンドウとは、表示中に他のウィンドウの操作を受け付けないウィンドウのことで、Webサイトにおいては一般的に、半透明のレイヤーを重ねてWebページを暗くした上に表示するウィ…

2010-09-29

多階層ドロップダウンメニュー

jQuery

これは使いそうだよなぁ〜！では早速コードを！ちなみにここに記載されているCSSコードをそのまま使用してもダメだったので注意。かなり悩んでしまった。。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> </meta></meta></meta></head></html>

2010-09-28

透過PNGのロールオーバーを作る（IE6対応）

jQuery

これはなんかヤダなぁ。。以前書いたエントリでも、「スターハック」とかゆーIE用のCSSの記述について少し触れたエントリ書いたけど、今回のなんて完全に「ブラウザ」を判別して分岐することでクロスブラウザ対応してるんだもの。if文使って。もし、実際の…

2010-09-28

ロールオーバー（プリロード対応版）

jQuery

ロールオーバーて意味がわからんかった。「画像にマウスカーソルを重ねたときに自動的に別の画像に表示を切り替える効果」だって。今回はメニューバーに見立てたタグ群にこのロールオーバーを実装してみるらしい。 <html> <head> <style> li{ display:inline; /* 横に一列に並</style></head></html>…

2010-09-26

オリジナルツールチップの作成

jQuery

今度はツールチップ（何かにマウスオーバーしたときにその説明をマウス付近にポップアップ表示するヤツ）を作成する。ツールチップ自体は、title属性やimg要素のalt属性にテキストを記述すれば表示されるが、表示のデザインや挙動がブラウザーによって違う上…

2010-09-26

タブパネルを作る

jQuery

お次はタブパネルを作るチュートリアル。さぁ、サクサクいこう。 <html> <head> <style> #container{ width:500px; margin:50px auto; } ul.tab{ padding:0; } ul.tab li{ list-style-type:none; width:100px; height:40px; float:left; } ul.tab li a{ outline:none; /* 下部に</head></html>…

2010-09-23

アコーディオンパネルUIの自作

jQuery

続いてアコーディオンパネルUIを自作してみる。まずは基本的な動作の部分から。 <html> <head> <style> dl{ width:800px; } dt{ line-height:35px; font-size:large; text-indent:3em; font-weight:bold; color:white; height:35px; background:url("http://editors.ascii.jp/m-</head></html>…

2010-09-22

画像ギャラリーの製作

jQuery

今度は実際に使える（？）アプリケーションを作ってみる。今までまとめてきたjQueryのトピックを使って画面遷移しない画像ギャラリーアプリケーションを製作していく。概要としては、左側にサムネイルのリストを表示し、そこで選択した画像を、右側のメイン…

2010-09-21

CSS3のセレクターで作るストライプテーブル

jQuery

隔行、隔列で異なる背景色を持たせるテーブル（ストライプテーブル）を作ってみる回。ストライプテーブルを作る場合、CSS2の機能だけでは苦労していたらしいが、CSS3の機能を使うとすんごい簡単にできるそうな。過去のエントリで試行錯誤してそれっぽいの…

2010-09-20

アニメーションエフェクト

jQuery

SICPの方、かなり切りが悪いけどここで久々にjQueryに復帰。（理由は秘密。）さて、第１１はアニメーションについて。いろいろ出てきますね〜。メソッド概要アニメーションの仕方 show([スピード[, コールバック関数]]) ○スピード："slow"|"norma"|"fast…

2010-09-18

scheme の hashtable について

Scheme Gauche

「データ主導化」のセクションに入ってからの傾向として「実験」をしていない。何故かというと、このテーマを扱う上で肝となる手続きである get 手続きと put 手続きの実装が具体的に定義されてなくて、実行のしようにも不可能だから。この傾向はまずい。。…

2010-09-10

FetchImi

会社でインターネッツをするときはFirefoxを使っている。英語の記事を読んだりする時、マウスオーバー辞書をよく使うんだが、いろいろ試した結果、FetchImiというプラグインが一番使いやすいと思った。んが、このFetchImi、Firefox 3.6 からインストールで…

2010-09-07

SICP 問題 2.74（実際に存在しそうなシステムでデータ主導プログラミング）

Scheme SICP

問題アキナイ有限責任会社（Insatiable Enterprises, Inc）は全世界に存在する多数の独立事業所を持つ超分散型の多国籍企業である。この会社の計算機システムは、全体のネットワークがどの利用者にも一つの計算機と見えるような、賢いネットワークインター…

2010-09-05

SICP 問題 2.73（記号微分のデータ主導化）

Scheme SICP

問題 2.3.2節で記号微分を行うプログラムを述べた。 (define (deriv exp var) (cond ((number? exp) 0) ((variable? exp ) (if (same-variable? exp var) 1 0)) ((sum? exp) (make-sum (deriv (addend exp) var) (deriv (augend exp) var))) ((product? exp)…

2010-09-04

SICP §2.4（データ主導プログラミングと加法性　その３[データ主導プログラミングと加法性]）

Scheme SICP

前エントリで紹介した手法は、 ①汎用インタフェース手続きは全ての実装レベルの手続きを知らなければならず、 ②しかもその実装レベルの手続きが増減した場合、その都度汎用インタフェース手続きの修正が必要というかなり困った手法だ。（汎用インタフェース…

2010-09-03

SICP §2.4（抽象データの多重表現　その２[タグつきデータ]）

Scheme SICP

前エントリでは、複素数を直交座標形式と極座標形式の２種の表現で表してみた。が、この２種は一つのシステム内で混在させることはできない。なぜなら、ある複素数オブジェクトを渡されたとしてもそれがどちらの概念で生成された複素数オブジェクトなのか判…

2010-09-02

SICP §2.4（抽象データの多重表現　その１[複素数の表現]）

Scheme SICP

いつもセクションの情報をまとめるときは、全体をざっと読んでからまとめ方の方向性何かを決めているんだけど、今回はちょっと長くて全部読んでない。でもとりあえずまとめられそうなのでアウトプットしちゃおうと思う。最初は「複素数」を題材にして、「…

2010-09-01

SICP 問題 2.72（特殊なケースの探査ステップ数を求める）

Scheme SICP

問題問題 2.68 で設計した符号化手続きを考える。記号を符号化するのに必要なステップ数の増加の程度は何か。各節で記号のリストを探索するのに必要なステップ数を忘れないように。この問題に一般的に答えるのは難しい。n 個の記号の相対頻度が問題 2.71 …

2010-08-31

SICP 問題 2.71（数式に従って生成されるシンボルと頻度のペアでHuffman木を生成）

Scheme SICP

問題 n 記号のアルファベットの Huffman 木があるとし、記号の相対頻度が、としよう。 n = 5, n = 10 の木を描け。（一般の n の）こういう木で、最高頻度の記号を符号化するのに必要なビット数はいくらか。最低頻度の記号ではどうか。解答まずは入力さ…

2010-08-29

SICP 問題 2.70（記号は、別に文字１コじゃなくてもいいんだぜ。）

Scheme SICP

問題2.70 次の８記号のアルファベットと相対頻度は、1950年代ロックの歌の叙情詩を効率よく符号化するよう設計された。（「アルファベット」の「記号」は必ずしも個々の文字ではないことに注意） A2 BOOM1 GET2 JOB2 NA16 SHA3 YIP9 WAH1 （問題 2.69の）gen…

2010-08-29

大瀬崎でシュノーケリング

雑感

毎年恒例の友人主催のクルージングにうちの奥さんが行けなかったので、二人だけで大瀬崎にシュノーケリングに行った。つっても行ったのは昨日の2010/08/28。備忘録海岸線の道路で大瀬崎の看板が見えたら海の方へ降りていくんだが、途中で右折する箇所があ…

2010-08-25

ジェルマット

雑感

あまりの暑さに夫婦共々ちゃんと睡眠がとれていない。これはマズイということで、二人で整体に行く車の中で対策を練る。エアコン買うか、ジェルマット買うかという２本に絞られたが、とにかく背中が暑いんじゃヴォケ！という理由で、ジェルマットの購入…

2010-08-25

SICP 問題 2.69（Huffman木の生成）

Scheme SICP

問題次の手続きは引数として記号と頻度の対のリストをとり、（どの記号も一つの対以外には現れない。）Huffmanアルゴリズムに従い、Huffman木を生成する。 (define (generate-huffman-tree pairs) (successive-merge (make-leaf-set pairs))) make-leaf-set…

2010-08-22

SICP 問題 2.68（語頭符号の符号化処理）

Scheme SICP

なんでうまくいかねーのかさっぱりわからねぇ。。（※2010/08/24追記：アホだった。。エラー情報をよく見れ！！）問題 encode 手続は引数として通信文と木をとり、符号化された通信文のビットのリストを作る。 (define (encode message tree) (if (null? me…

2010-08-21

SICP 問題2.67（語頭符号の復号化処理）

Scheme SICP

お〜っし、久々の問題ゾーンです。問題符号化木と例題の通信文を定義する。 (define sample-tree (make-code-tree (make-leaf 'A 4) (make-code-tree (make-leaf 'B 2) (make-code-tree (make-leaf 'D 1) (make-leaf 'C 1))))) (define sample-message '(0…

2010-08-21

SICP §2.3.4（Haffman 符号化木　その５　[重み付き要素の集合]）

Scheme SICP

う〜ん、このセクション何を言いたいのかいまいち確信が持てない。。とりあえずコードを写経してコメントを付加していってみよう。 (define (adjoin-set x set) (cond (;母体となるリストが空なら新規生成する。 (null? set) (list x)) (;「挿入したい枝の…

2010-08-21

SICP §2.3.4（Haffman 符号化木　その４　[復号化手続き]）

Scheme SICP

昨日は会社のキックオフ会で帰宅が遅くなってしまったのでアップできなんだ。。では前エントリを元に、「語頭符号」のコードをどうやって「復号化」するかを考えていこう。 (define (decode bits tree) (define (decode-1 bits current-branch) (if (null? b…