オブジェクト指向っぽい話が分かるかもしれないJavaScript講座 その2 | Takazudo Clipping*
自分なんぞがオブジェクト指向とはなんぞと語るなんておこがましく、「オブジェクトっぽい話」でいいかなーと思っていたのですが、ブックマークするときに「オブジェクト」でタグ付けてる人がいたので、これはいかんと思い、こっそりタイトルを直しました。 2回目の今回は、複数のインスタンスをまとめて操作する方法について書きます。 まんじゅうマネージャー 前回、クラス作ってインスタンスを作ると便利だというところで終わりましたが、便利な点としてはまず、「複数のインスタンスをまとめて操作したり、作ったりできることができる」という点があります。どういうことかというと、とりあえず、以下のサンプルを見てみてください。 まんじゅうマネージャーサンプル まんじゅうを一気に作ったり、隠したりすることができます。 これで賞味期限が切れたりしても大丈夫なはずです。 この機能を作れと言われたら、前回の知識だけは結構厳しいのではな
オブジェクト指向っぽい話が分かるかもしれないJavaScript講座 その1 | Takazudo Clipping*
自分はスーパーJavaScripterでこんなすげーのが5行で書けちゃう。やばいだろ！とかいうのでは全然無いですが、オブジェクト指向っぽい話が最近分かってきたつもりで、それでやっときゃ問題無いってことを思い始めているので、なんかそんな話を書いていきます。 こんな短く書くテクニックがあるぜ！ var hoge = hage ? huga : hoga; とか書けちゃうんだぜ！とかより、長くていいから分かりやすく拡張しやすいようにするにはどうするのかとか、そういう話ができればなーと思います。内容的には全くもって新しくも何とも無いですが。jQuery使ってやる前提です。 まんじゅう製造スクリプト 今日はまんじゅうを5個作ります。なんと、まんじゅうは、クリックすると隠れます。 まんじゅうサンプル var Manju = function(){ this.elem; this.hidden = fa
コーダーが気にしちゃうことバトン | Takazudo Clipping*
前回のエントリをバトンにしない？と言われたので、答えられそうな話題にしぼってバトンってことにしてみました。 エディタは何使ってますか？ 高さ揃えるとか、なりで広がるとかいうところに関してtableを使いますか？JavaScriptを使いますか？ ブラウザごとのCSSバグ対処方法はどうしてますか？ 画像置換についてどう思いますか？ 印刷についてどうしてますか？ スクリーンリーダーにて確認などはしますか？ IE7のズーム機能について、対応させていますか？ JavaScriptライブラリのライセンスについてクライアントに説明しますか？ JavaScriptのフレームワークを使いますか？使っている場合は何を使っていますか？ CSSやJavaScriptの圧縮をしていますか？ コーディングにかける時間はどのくらいでしょうか？ あなたのコーディングのこだわりはコレ！みたいなものがあれば。 「コーディン
マークアップな人たち（じゃなくてもいいけど）の忘年会 -2008年 | Takazudo Clipping*
あらたさんが大阪から出張で来る！ってんでみんなで集まって飲みました。 最初は僕とあらたさんとhamashunさんだけの予定だったんですが、もっと呼んでみる？ってなことで8人にも！以下面々。 Archiva TRANS Takazudo Clipping* coliss CSS HappyLife ヨモツネット hamashun.com vantguarde 僕は、聞きたいことリストを事前にせこせこ用意していたので持っていき、これどう？→わーわーおしゃべりって感じでした。以下が僕が用意していったリストです。飲み会やブログのネタにどうぞ？ 右に画像左にその他モジュールについてどう思うか。やっぱtableにする？もしくはtable嫌だからそもそもそういうモジュールは用意しない？ Web標準に準拠、アクセシビリティに準拠と銘打ってHTMLを書くとき、tableをつかわないといけないことはないの？
inline-blockはもう使える（だいたい） | Takazudo Clipping*
inline-blockとは、まさに、その名の通り、インライン要素とブロック要素の中間的なdisplayプロパティの値です。display:inline-blockが指定された要素は、文中にブロック要素をボコっと突っ込んだような形で描画されます。前後で改行されないブロック要素のような存在です。Firefox3で正式にサポートされたみたいです。使用に関して問題となるのは、これに対応していないIE7,IE6とFirefox2なのですが、どうにか頑張ると、ほぼ同様の効果を得ることができます。最近使う機会があったので、ソース解説と併せて紹介します。 まず、inline-blockは、以下のような点が便利です。 幅や高さを持てる インライン要素ではwidth,height,縦方向のmargin,paddingが無視されますが、inline-blockだとこれが可能になります。 連続するブロック要素を
サイトタイプ別class名管理方法 | Takazudo Clipping*
PHP/CSS書いてて、最近思ったことと、自分CSSデザインパターン解説。class名のつけ方の続き的内容。 オブジェクト指向を勉強してるとこ 最近、XSLTでCMS作る！って思っていろいろPHP書いてます。それで、すっごいclassが増えまくってしまって、継承とかいうものがある！ということで使ってみたら、すっきり。ほほーこれは便利だ！と思いきや、またしてもごちゃごちゃ。どこをどうしたらいいのやら。どーしたもんかと思ってネットをうろうろ見てたら、どうやら、デザインパターンってのを覚えた方がよさそうだということに気づき、この本を買いました。 これがすごい良かったです。継承とかinterfaceとか、こういうためにあったんだ！というのを学びました。すべてをまだ理解できてないけど、大きいものには大きいものの作り方があるんだ！と。結果総作りなおしｗｗｗ CSSのデザインパターン？ そんでCSSの話
水平スライダー with jQuery | Takazudo Clipping*
こんにちは。 こちらのスライダー、とても役立ちました！ ところで私はｊQuery初心者なのですが、このスライダーを一画像ごとのスライドではなく、１ページのスライドにするにはどうしたらよろしいでしょうか。 また、ページを表示するには（1／5）どうしたらよろしいでしょうか。 お時間がありましたら教えてください。 よろしくお願いいたします。 appleleleさん、はじめまして、Takazudoです。 このスライダーは、完全固定のモノをつらつら動かすだけなので、文書の塊ごとでスライドさせるには、結構いじくらねばならんですね。このJSでやっていることは、 左ボタン：端のハコをanimationでwidth0にちぢめる 右ボタン：端のハコをanimationでwidth150pxにのばす そんで、延々ループするのは、アニメーションがおわったら、消えてるやつを後ろに持って行ったり、前
Firefoxの印刷と闘う その2 | Takazudo Clipping*
このブログのアクセス解析を見ると、キーワード「firefox 印刷」で検索してこのエントリに飛んでくる人がかなりいます。やっぱりみんな困っているんだなぁと。Firefoxの印刷はかなりやっかいで、完全FIXは無理かもしれないという結論に自分の中でも解決していたのですが、最近この方法をやっていて、普通に印刷できてます。 display:tableで印刷対応 まずは、普通にfloat:left left leftで左に詰めたレイアウト。 floatによる3カラムレイアウトのサンプル（印刷対応無） <div id="all"> <div id="header">header</div> <div id="body"> <div id="localNav">localNav</div> <div id="main">main</div> <div id="relatedNav">relatedNa
XSLTで検索クエリ持ち回り | Takazudo Clipping*
google miniのXSLTをいじっていて色々楽しかった。 google miniを案件で使っていて、XSLTを初めて仕事で書いた。google miniは、吐き出されたXMLにXSLTをかけて、ページを表示させていて、このXSLTをカスタマイズすることで、思い通りのページにできる。 このデフォルトXSLTがよくできていて、すごい色々勉強になった。たとえばこんなこと。 Takazudo bookmark は、一応、初めて頑張ってXML→XSLTするんだーと意気込んで作りました。そのなかで、ページ送り部等のURLを作るために、各ページへのリンクURLを入れたXMLをPHPで作ってからXSLTしていた。 <pagination> <item> <text>1</text> <url>index.php?itemPP=24&page=1</url> </item> <item> <tex
印刷のことを常に考え、要所要所でボーダーを使うべし | Takazudo Clipping*
印刷って大事なんじゃないですかっていうエントリです。 背景で画像敷いたり、背景色で塗りつぶしたり、複雑なデザインの箱を組む時でも、できるだけボーダーを設定した方が、印刷時に奇麗に見えることがあります。たとえばこんなデザイン。 基本例 背景画像を印刷する設定して、インク代を浪費する人はまれなので、ほとんどの人は、CSSにて指定された背景画像や背景色を出しません。その結果、なんか見出しなんだか何なんだかよく分からんよねという感じに。 まぁ、ある程度はしょうがないんですが、グラデーションの端にborderをつけておくことで、ちょっとだけ分かりやすくすることができる。borderつけてHTML組んだサンプルと、その印刷イメージです。 HTML組んだサンプル(HTML) どうでしょうこれ。なんかすごい微妙な例で申し訳ないんですが、2番目のやつとか、むしろイラネーと自分で思ってしまったんですが、こんな
HTMLの提案書を書こう | Takazudo Clipping*
HTMLなんかどこに頼んだってかわんねーよ！というわけじゃない。 ちょっと前に、会社がコンペに参加するとかでHTMLの提案書を書いた。要件は、もう設計とか完了していて、ワイヤーフレームとかチャートとか用意しちゃっている気合いの入ったクライアントで、デザインとCMSに組み込むためのHTMLテンプレート（とガイドライン）を作ってーというもので、自分が書いたのはHTMLのところ。 まー、最初は自分が全体書いてて、ユーザーありきで設計してデザインしてコーディングしてってやってるんですーという、ワークフローな感じのことを書いたのだけれども、社内のWeb仙人に駄目だしされ、もっと特化したものを書け！大体、デザイン以降が要件なんだから、前半まったく意味ねーよ！ってことで自分の書いたものはフルボツになり、自分はHTMLのとこだっけ書くことになりました。 しかしまぁ、前からこんな、HTMLで何がいいわけ？み
IE6でposition:fixedの真似ごと | Takazudo Clipping*
下にメニュー固定で出したい。 しかしIE6だとposition:fixedできないので、下メニュー以外のコンテンツをdivで囲って、html,body,そのdivにheight:100%で、viewportの高さ100%にあわせ、overflow-y:scrollをそのdivにつけて、html,bodyのoverflow-y:hiddenで本来のスクロールバーを出さない。 bottom:0にするときには表示領域の高さが奇数の時、bottom:0pxが1pxずれるのを注意。 奇数bottomバグ - IE6 <body> <div class="main">main</div> <div class="bottom">bottom</div> </body> html,body{ height:100%; } html{ overflow-y:scroll; } div.main{ col
設計者とデザイナーとコーダーと高品質なサイト | Takazudo Clipping*
最近、会社の中で、サイト制作の際、デザイン・HTMLに行くまでにどういう資料を作ればいいんだろうプロジェクトみたいのをやっておりまして、はじめは、ページの構成、こー言う風に考えていますという、ページの内容を説明する資料のフォーマットを考えていたんですが、どうにもそこだけでは足りないような感じに思えてきて、どうしたもんかなーと思って色々見ていたところ、インフォメーションアーキテクチャってのが、まさにその答えでした。今まで制作の中で悶々としていたことが、かなーりすっきり理解できた。誰がいつ何をしないといけないのかが。 なんとなくうだうだ情報設計みたいな話 インフォメーションアーキテクチャについての細かい説明は、勉強中なのでこのエントリ内では詳しく書きませんが、サイト制作には、大まかに、次のようなフローがある。一応ここでは、サーバーサイド技術を含まない、コーポレートサイトみたいなものだと仮定して
がっかりIE8。しかし… | Takazudo Clipping*
IEBlogにて、IE8は超いけてます。CSS2.1とかかなり完璧ですからかなりいけてます。という告知の後、でもその最強なレンダリングモード使いたければmetaタグに超標準モードにしますって入れてくれなきゃダメなことにする。普通のモードだと、今までのIEとの互換性を確保した標準モードにしますよという告知がありました。 IE8の新しい標準モードとモードスイッチ | Web標準Blog | ミツエーリンクス つまり、「互換モード」「標準モード」「超標準モード」の3つがあるということになります。Webやってる者にとっては、やっとやってくれたか！IE最高！と思わせつつ、ハァ？なんなのそのmetaタグ。意味分らん。やっぱりがっかりIEだよ！というのが9割方の感想で、その旨が延々IEBlogにコメントされてるわけですが、常に最高シェアを保ち続けるIEだからこそ、しょうがないのかもと思わざるを得ないかも
IE7のズーム機能でバグる - hasLayoutとは | Takazudo Clipping*
IE7のズーム機能を使うと、ラジオボタンやチェックボックス、文中に入れた画像がおかしくなります。こんな風に。 <input type="radio" />ウェブ全体から検索 <input type="checkbox" />日本語のページを検索 <img src="/clip/cmn/img/entry-bg-01.gif" />オマケ IE7のズームで崩れるサンプル これを直す方法。 IE6までは、問題のある要素にheight:0を指定するという、holly hackと呼ばれるバグ対処方法で、数々の問題のあるバグが解決されてきました。IE7になっても、コレに変わり、min-height:0を指定すれば直るじゃん！と思ってました。 しかし、その方法でもこれは直らない・・・。他のズーム機能のあるブラウザではこんなこと起こらないのに、どうすればいいか到底見当もつかない・・・ひどすぎるIE7・・
XHTMLについてぶつくさ | Takazudo Clipping*
XHTML 2.0の目的と今後のXHTML | Web標準Blog | ミツエーリンクス 読んで、なんか、現段階で、リニューアルとかでサイトXHTMLにしたってやっぱあんまり意味無いよなーとか思った。 仕事ででかいサイトのリニューアルとかするときも、ディレクターに、XHTMLにすると何がいいのって言われるけど、どうも技術っぽい話しかできなくて、ふーんそうなんだ程度にしか受け止めてもらえん。というか、たぶん自分としても、なんか新しいし、これからどんどんXHTML化してくるから、HTML4.01なんて時代遅れですよ！とか思っちゃってるだけで、周りから見たら、ふーん、コーダーってよくわからんけど謎の信仰みたいのあるよなみたいに思われてるかも知らん。非難されるかもしれんけど、やっぱしXHTMLにしても、実益ナシと思う。ていうか、今まで山のようにHTMLコーディングしてきたけど、XHTMLにして得し
XHTMLにXSLTをかけて別のHTMLを作るときに失敗する | Takazudo Clipping*
XSLTでもつまづいたらメモ。 用語の使い方とか所々ちがうかも。 XHTMLをXMLとして使い、XSLTをつかってこんなのをやろうとした。 見出しとPとdiv.section-lvxのXHTMLサンプル この、見出しと段落がいっぱいあるXHTMLに対し、XSLTをかけて、見出しをリストツリーにしようとした。そんで、こんなXSLTを書いた。 ダメXSLT 結果はこんなの。何も表示されん。 ダメXSLTをかけようとしたXHTML だめだった理由は、XHTMLの各要素は、html要素で、xmlns="http://www.w3.org/1999/xhtml"と、xhtmlの名前空間を指定しているため、XPathで<xsl:apply-templates select="html/body" />と指定するだけではだめらしい。具体的には、こんな感じになってるの <xsl:stylesheet ve
XSLTを勉強してみる | Takazudo Clipping*
24シーズン6の最終3巻がレンタル開始されたのに全部借りられてたのでXSLTを勉強中。結構おもしろいー。section+hの真似風。（FirefoxでどばっとCtrl+Aでテキスト選択して右クリック→選択した部分のソースを表示 でXSLT適用後のソース表示） XML XSLT CSS XSLTが書ければ、自分モジュールでXML/XSLTのセット作って、いつも場合によってXSLTとCSSだけ書き換えて、必要が出たらモジュール足すってやりかたでどんどんライブラリ化していけるのかなと思った。 webmasterworld.com - XML and SEO.. XML+XSLTってSEOにどうなのよというスレッドで、 クローラはXMLがXSLTによって変換されたHTMLを読むわけではないから、どうなんだろダメっぽくない？とあるけど、おれはSEOの会社に勤めてるけど、パーサーかけるのは全然大変じゃ
何で見出しレベルを飛ばしちゃいけないの？ | Takazudo Clipping*
見出しレベルって飛ばしていいと思うんだけれども。 いいというのは、文章の内容的に考えたら、飛んでるのは自然で、色んなアクセシビリティガイドラインでAAAとかとりたいなら飛ばさないでいくしかないと思った。ちなみに、明確な答えは無い（と思う）。 文章的に自然というのはどういう意味かというと、 見出しには、上から考える見出しと、下から発生する見出しがあると思うんですよ。「レベル見出し」と、「汎用見出し」みたいなものが。 自分が良く出会うのは、こんなの これ（右図）の、「注意」って、h2なんでしょうか？ でも「パグ」と「ゴールデンレトリーバー」より明らかに重要度低い。「写真」も同じ。こーいうのって、h1の見出しの下が分かれる場合はh2で、その下で別れる場合はh3で･･･って言う考えとは、逆の考えで、 注意 - 犬が嫌いな人は帰ってください 写真 - 犬の写真 っていうコンテンツの塊だけで考
class名のつけ方 | Takazudo Clipping*
デカいサイトでのclass名のつけ方って、すごい難しいと思う。 だけど、CSSいじったりし始めたりした人は、その、すごい難しいってことに気付かないと思う。 別にCSSだけの話じゃなくて、プログラム書くときの関数名とか構造も同じだと思うんだけれど。 ベストなclass名のつけ方は、完全にサイトの構造を把握してないと無理だと思う。 そして、そのサイトに要素が追加されたときにも柔軟に対応できるルールを持ったclass名のネーミングルールが必要だ。 破綻が起きて、CSSが混沌になってしまわないように。 今自分がこれがイケテルーと思うのは、こんなかんじ。 まず、ページで使われる要素を、モジュール化する。 （みんなやっていることだとは思うが） このモジュールの中で使われるclass名は放っておくとして、この、モジュール単位のクラス名が超重要。具体的には、見出しとかリストとか、ナビのリス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
