はてブのCSSをカスタマイズしてみた その２ - てっく煮ブログ
はてなブックマークが新しいデザインは気に入っていたのですが、メリハリのきいた色使いに少し飽きてきたので、シンプルなものに変えてみました。こんな感じです。 b:id:nitoyon自分が一番知りたいのは「ページのタイトル」だったので、そこを目立たせる感じで配置してみました。その他のこだわりを4箇所ほど紹介します。1. favicon の位置はてなブックマークがリニューアルしてから favicon が表示されるようになりました。これをどう扱うかが悩ましかったのですが、タイトルの横に付けてみました。デフォルトのデザインのちょっとうるさい印象も緩和できたのではないかと思います。アイコンを左に出すアイディアは tumblr のデフォルトのデザインから拝借しました。全体的に tumblr っぽく仕上げてます。 .2. ブックマーク数は digg 風にブックマーク数と B! のリンクを digg みたい
jQuery と object タグの怪 - てっく煮ブログ
JavaScriptSilverlightコンテンツを埋め込むｊQueryプラグイン - Programmable Life で困ってたので一緒に悩んでみた。でも何故かIEでは動かない。誰か動くようにしてけれ！Silverlightコンテンツを埋め込むｊQueryプラグイン - Programmable Lifeobject を作れていない？手元に環境を作って動かしてみると、 に を追加するところで JavaScript エラーが出る。状況を切り分けるために、 を追加する部分をコメントアウトしてみた。IE DOM Explorer で眺めてみると DIV タグが追加されている。どうやら var obj = $('').attr({ ... }); のところで object タグが作られていないようだ。jQuery でよく見る現象だ。こういうときは閉じ括弧を入れてあげると大抵うまくいく。
JavaScriptでかんたんHTAアプリに挑戦 - てっく煮ブログ
JavaScriptこんにちは！ みなさんガジェットつくってますか！ なんだか最近、色々な種類があるみたいですね！ Yahooナントカとか、Googleガジェットとか、Adobe AIRとか、シルバーナントカとか、あとWindowsサイドバーだとか、Operaナントカとか…。こういうガジェット的な、ちょっとしたデスクトップ用のツールって、 どうやってつくるのかなーなんて思って、ちょっと調べてみました！そしたら意外と簡単だった…！ これならぼくにも作れそう！！ってことで、ちょっとメモしておきますね！ どれにしようかな…！つくるのが簡単なことWinで動いたらいいや使う人がインストールしやすそうなのがいいこんな感じで考えていくと… Googleガジェット か AIR なのかなー、って思ったんだけど、プラグインとかインストールはめんどくさいから、なにもせずに使えるものがいいよね！だから HTA（H
jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ
JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを５つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){
jQuery の配列系のメソッドをメモ - てっく煮ブログ
JavaScriptjQuery は機能が豊富なので、しばらく使わないと忘れてしまう。ここでは、jQuery と配列の関係に絞って目的別に逆引きできるようにしておく。配列から jQuery オブジェクトを作成$ 関数に渡せばOK $([1,2,3]) NodeList のような配列っぽいものを渡しても解釈してくれる。 $(document.getElementsByTagName("div")) // $("div") と同じ ※内部的には setArray メソッドが呼ばれてるが、外から使うことは稀。jQuery を配列のように扱う要素数を取得するlength プロパティを使えばOK。 $("div").length // document.getElementsByTagName("div").length と同じ jQuery のメソッドを使って操作する限りは、適切に length
幕末古写真化ブックマークレットを公開しました - てっく煮ブログ
ページの画像を全て幕末古写真化できるようにしました。以下の JavaScript をコピーしてアドレスバーに入力して実行してください。 javascript:(function(d){if(typeof Bakumatsu != "undefined"){Bakumatsu.convert(d.getElementsByTagName('img'));}else{s=d.createElement('script');s.type='text/javascript';s.src='http://tech.nitoyon.com/bakumatsu/allbakumatsu.js';d.body.appendChild(s);}})(document); （例）このブログ （例）twitter ニュースサイトの写真を幕末古写真化しても面白いかもしれませんね。どうぞご利用ください。ソースコード
jQuery の bind, unbind の裏側 - てっく煮ブログ
javascriptjQuery のソースを呼んでいて、イベント登録のところが複雑だったので備忘録として記しておく。バージョンは 1.2.1。そもそもの目的DOM 標準の removeEventListener は、element と type(click, submit, blur など) と listener の３つを指定する必要がある。 element.removeEventListener(click, listener, false); jQuery ではイベント解除に unbind という便利な関数が用意されている。element, type, listener を指定して解除する（通常の removeEventListener と同じ）element, type を指定して全てのイベントハンドラを解除するelement から全てのイベントを解除する例えば、 $("#foo")
論理演算子（&& と ||）を応用する - てっく煮ブログ
javascript, asjQuery のソースコードを見ていて面白いのがあった。 function add(a, b){ addImpl(b && a, b || a); } function addImpl(a, b){ // ... } 理解するためには、論理演算子を詳しく理解する必要がある。論理演算子詳細JavaScript（というか ECMAScript）の論理演算子は、評価結果が true/false で返される訳ではなく、結果が確定した時点で評価した値が返される。まずは、|| を試してみよう。 alert(2 || 0); // 2 alert(2 || 3); // 2 alert({} || null) // [object Object] alert(0 || 3); // 3 alert(0 || 0); // 0 alert(0 || undefined); //
jQuery で JSONP ２通り - てっく煮ブログ
JavaScriptjQuery を使って JSONP でリクエストする方法を２通り紹介するよ。その１: $("")createElement を $() を使って実装。 $("") .attr('type', 'text/javascript') .attr('src', "http://www.example.com/jsonp.cgi?param1=value1&callback=myCallback") .appendTo($("head")); function myCallback(json){ // ロード完了時にここが呼ばれる } http://www.example.com/jsonp.cgi?param1=value1&callback=myCallback にリクエストがいく。callback のところは、サービスによって指定の仕方が違うかもね。その２: $.ajax
サイトの最新被ブックマークを livedoor Reader で読むための Pipes - てっく煮ブログ
それPiはてなブックマーク経由でもらうコメントが気になるので、livedoor Reader にhttp://b.hatena.ne.jp/bookmarklist?mode=rss&url=[自分のサイトのURL]を登録してます。この RSS は、サイト全体の新着ブックマークが入っているので大変重宝してるのですが、 にページの要約が入ってるのがうれしくない。自分のサイトなんだから要約はなくても分かるし、むしろ、ないほうが見やすい。そこで、「それ Pipes でできるよ」。どーーーーん。ページの要約を消してスリムになりました。さらに、ブックマークした人のアイコンを付け足して、はてブっぽい雰囲気を演出。ご利用はこちらから：http://pipes.yahoo.com/pipes/pipe.info?_id=0olatt_u2xGUHo7_qGIyXQ仕組み入力された URL に http:/
はてな記法ワープロ
*はてな記法JavaScript はてな記法ワープロは JavaScript ならではの利点を生かしたダイナミックなワープロです。 試しに色々入力してみてください。即座に出力画面が反映されます((Windows 版 IE6 および Firefox 1.0 でのみ確認しています))。 はてな記法の変換は <a href="http://search.cpan.org/dist/Text-Hatena/">Text::Hatena</a> を JavaScript に移植した "text-hatena.js" を活用しています。 **変更履歴 |*2005/12/1|ソース機能追加 (HTMLソースを表示できます)| |*2005/11/21|はてな記法ワープロ完成| |*2005/11/13|text-hatena.js 移植開始|
text-hatena.js 公開 [tech.nitoyon.com]
本家 Text::Hatena で HTML::Parser を用いている部分は実装できていません。 URL の自動リンクや HTML のエスケープなどは実装できていません。 Cookie を利用するようなサイトに text-hatena.js を利用するのはお勧めできません。 ライセンスは Text::Hatena と同等とします。 技術的なアレコレ Perl と JavaScript って意外と似てるよね、というところから出発しました。特に、Text::Hatena のソースコードはそのまま JavaScript に置き換えられるぐらいに洗練されたコードです。例えば、Hatena.pm の一部に次のようなソースがあるのですが sub parse { my $self = shift; my $text = shift or return; $self->{context} = Text
![text-hatena.js 公開 [tech.nitoyon.com]](https://cdn-ak-scissors.b.st-hatena.com/image/square/95abde13f7ed41248843e654a2f2ddcde8983db4/height=288;version=1;width=512/http%3A%2F%2Ftech.nitoyon.com%2Fapple-touch-icon-114x114.png){kind=icon}
画像をかっこよく浮かす方法
画像をきれいに見せるためのテクニックとして、影をつける手法が有用だ。プロが作るようなサイトを見ていても、影をつけてかっこよく見せている例をよく見受けられる。もはやデザインの王道テクニックといっていいだろう。とはいえ、いちいち影をつける加工をするのは面倒だし、画像編集環境が十分にない人もいるだろう。そこで画像に動的に影をつける手法を紹介する。 (追記 2013/09/18 ) CSS3 の box-shadow や text-shadow を使えば、ここに書いてあるテクニックは不要となります* 画像に影をつける サンプルは こちら にあるので確認してみてください。 まずは画像を div タグで囲います。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
