MediaQuery まとめ - IT戦記
Media Query とは CSS3 から導入される Media Type を大幅に拡張する仕様です。 そもそも Media Type とは Media Type とは CSS 2 系に元々ある仕様で CSS を適用するメディア（パソコンの画面、テレビ、プリンタ用紙など）を指定するときに使います。 以下の例だと、 media 属性の中に記述されている all や screen や print が Media Type です。 <link rel="stylesheet" type="text/css" href="共通の.css" media="all" /> <link rel="stylesheet" type="text/css" href="パソコンの画面の.css" media="screen" /> <link rel="stylesheet" type="text/css"
サイボウズで学んだこと - IT戦記
はじめに 2010 年 9 月 15 日を持ちまして、サイボウズ・ラボを退職いたしたました。 報告も兼ねて、久しぶりにブログを書いてみたいと思います。 （写真はゆうすけべーさんです） この会社に入って、たくさんの学びと思い出がありました。 その一つ一つをまとめていければ、素晴らしい記事になるのかもしれませんが、僕は文章が苦手です。 ですので、うまく退職のエントリを書き上げることができません。 言葉にできない。そんな感じです。 なので、このエントリはサイボウズ・ラボやサイボウズ本社の仲間たちへのありがとうの気持ちをこめて、自分らしく最後まで JavaScript のことを書きたいと思います。 サイボウズでの最後の仕事 僕にとって、サイボウズでの最後の仕事は「JavaScript で新しいユーザーインタフェースを作ること」でした。 そして、その中で始めて複数人による大規模な JavaScrip
getComputedStyle について調べてたら深みにハマったのでメモ - IT戦記
getComputedStyle とは！？ ある要素にどんなスタイルが当たっているかを計算してくれる。便利な関数。 使いかたはめっちゃ簡単！ var style = getComputedStyle(element, ''); alert(style.fontSize); // 14px alert(style.color); // rgb(0, 0, 0) ちなみに第二引数は疑似要素の style を取りたい場合に使います。通常は空文字列でいい。 でも、 getComputedStyle はこのままでは IE, Safari では動かない。 Safari では window(グローバル領域) に getComputedStyle は定義されてなくて、 document.defaultView だけに getComputedStyle が定義されている。 ちなみに、 Firefox, Op
はじめての mixi アプリ - IT戦記
IE ではたぶん動きません。 友達一覧取得 <?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="simple mixi Appli"> <Require feature="opensocial-0.8"/> </ModulePrefs> <Content type="html"> <
はてなブックマークのコンテンツの JavaScript を高速化する - IT戦記
はじめに 「新はてなブックマーク」になったということで、とっても便利になったのですが、ブックマーク一覧ページ*1が若干 JavaScript に時間が掛かっているみたいです。 というわけで 調査してみたいと思います。調査して、改善できそうなところは後で纏めて「はてなアイデア」にでも登録しようと思います。 この日記は調査しながら、過程を書いていくつもりです。 準備 まずは、人のサイトの JavaScript を書き換えて試してみるための環境を作ります。 作業用ディレクトリを作る とりあえず、ホームに HatenaJS というディレクトリを作ります。 $ mkdir HatenaJS $ cd HatenaJS CocProxy をダウンロードしてくる 以下から CocProxy というツールをダウンロードしてきます。 http://coderepos.org/share/wiki/CocPr
onclick 属性問題について - IT戦記
本気でやるならonclick属性は避けてライブラリを活用すべき - 帰ってきたHolyGrailとHoryGrailの区別がつかない日記 に関して この先、 HTML に onclick と書いても石を投げられないように書いておく＞＜ 僕も onclick 属性がダメだと思っていた時代もありました。でも、今は時々使うなあ。 （あ、でも、 HTML と JS で分業している場合は、使わないほうがいいよね＾＾；そこだけは言っておく。） JavaScript 入門の記事を書くときに onclick 属性がダメだとしたら、いろいろ本質的でないことを説明しなきゃいけない。 現状では onclick 属性が、もっとも簡単に HTML にイベントをマッピングできる方法だから、そんなに目くじらたてなくてもいいんじゃないかなあ？ たとえば 以下は、クリック時に href に GET を送るための oncli
Re: 一晩で覚えるjQueryの逆引き基礎サンプル7つ*ホームページを作る人のネタ帳 - IT戦記
最後の解決法を悩んでるようなので、僕の回答。 入力補助の情報は HTML より、 JavaScript で持ったほうがいいかもしれません var data = { title1: ["hoge", "fuga", "piyo"], title2: ["hoge", "fuga", "piyo"], title3: ["hoge", "fuga", "piyo"] }; $(function(){ $("div.hoge > div.menu > a").click(function () { var d = data[this.title]; $('div.hoge > input').each(function(i) { $(this).val(d[i]) }); return false; }); }); でも、↑これだと、クリック時に毎回 input を探すので、パフォーマンスを気に
要素をキャッシュして $ 関数をちょっと高速化 - IT戦記
prototype.js の $ 関数で あっちこっちで、$、$、ってやるとその都度ノード探索発生してうざいので ↓prototype.js 1.5 の $ 関数 function $() { var results = [], element; for (var i = 0; i < arguments.length; i++) { element = arguments[i]; if (typeof element == 'string') element = document.getElementById(element); results.push(Element.extend(element)); } return results.length < 2 ? results[0] : results; } キャッシュしてみますた。 でも、IDがダイナミックに変更される場合(あんまな
JavaScript 第5版 を読んでみたよ - IT戦記
今日の朝 オライリー・ジャパンから「サイ本最新作」こと「JavaScript 第5版」が送られてきてたのでガーっと読んでみたよ。弾さんより早く書評を書こうと必死だったのは内緒だよ。 JavaScript 第5版 作者: David Flanagan,村上列出版社/メーカー: オライリー・ジャパン発売日: 2007/08/14メディア: 大型本購入: 52人 クリック: 1,011回この商品を含むブログ (271件) を見る 感想 本書は JavaScript を学ぶうえでは、少しだけ難しい本だと思います。しかし、同時に「JavaScript を学ぶための善意の嘘」がほとんど書かれていない本でもあります。ひととおり読んでみたのですが、文法（字句〜スコープチェーン、プロトタイプ）から JavaScript のコアオブジェクト、 DOM の操作、 CSS の操作、 SVG、 VML、 canva
JavaScript で簡単にスタックトレースを取るテクニック
Firebug を使うと console.trace(); これだけでスタックトレースを取ることが出来ます。 でも、 XUL の開発とか、人のブラウザで Firebug が入ってない時とかは出来ないので、 そういう時は、 alert(Error().stack); これだけで出来ます。まあ Firefox only ですが。
社外勉強会の資料 (JavaScript 依存解決手法) - IT戦記
モバイルファクトリー様と弊社との勉強会がありました。 残念ながら身内に不幸があって、出席できなかったのですが。 id:ZIGOROuさんに代打で発表してもらいました。ありがとうございます。 資料を公開します http://usrb.in/svn/amachang/presentation/20061116/Resolve_dependency_of_JavaScript.ppt 内容は JavaScript の依存解決方法をいろいろ試したときのバッドノウハウ集です。
Class::Data::Accessor と Class::Data::Inheritable の違い - IT戦記
Catalyst のソースを読んでいると Class::Data::Accessor と Class:Data::Inheritable が出てくる。つかわれかたは、ほとんど同じに見えるので、ちょっとソースを読んでみた。 読んでみると Class::Data::Accessor のほうは、オブジェクトメソッドとして呼ばれたときに、オブジェクトのデータにアクセスする。 こんな感じ。 use strict; use warnings; use base qw/Class::Data::Accessor Class::Data::Inheritable/; main->mk_classaccessor('hoge'); # Class::Data::Accessor main->mk_classdata('fuga'); # Class::Data::Inheritable main->hoge
IT戦記 - JavaScript を学ぶ際に一番重要なのに、誤解されがちな setTimeout 系の概念
おそらく、JavaScript を使いこなす肝は setInterval、setTimeout、イベントによる関数の実行を理解することだと思う 例えば 次のコードの結果を考えたとき document.write("hoge\n"); setTimeout(function(){ document.write("fuga\n") }, 1000); document.write("piyo\n");普通に JavaScript を使いこなしてる人なら、hoge → piyo と表示して、 1 秒後に fuga が表示されるな。って思うはずなんです。 でも、 JavaScript を始めたばっかりの人の中には、 hoge と表示したあと 1 秒後に fuga → piyo と表示するな。って思ってる人が非常に多い。(経験的に) 何故か？ たぶん、どのサイトの setTimeout の説明を見て
FireBug と benchmark.js を使って稼働中のサービスの JavaScript パフォーマンスをチェックする - IT戦記
まずはこれを見てください。 http://sample.ecmascript.jp/bench.htm このような感じで FireBug のコンソールを表示させて 適当なサーバにある benchmark.js を読み込んで benchmark.at('firebug')({ 'テスト１': function() { ... } }); って感じで、どんなサイトでもパフォーマンスを計ることが出来ます。 何が嬉しいのか いちいちサービスの JavaScript を書き換えて計測する必要がない。 思いついたときに、パフォーマンスチェックができる。 FireBug を入れていない、または Firefox 以外でパフォーマンスを計りたい場合 URL 欄に javascript:(function(){var s=document.createElement('script');document.bo
IT戦記 - ベンチマークツール公開
最近 またしても、JavaScript のベンチマークを取らなければならない仕事が来たので、 ツールをキレイにしました。 それを公開します。(ダウンロードは一番下にあります。) 使い方 script タグで benchmark.js を読み込んで、以下のように連想配列の関数群を渡すだけです。 benchmark({ 'ほげほげの計測': function() { ...... }, 'ふがふがの処理の計測': function() { ...... } }); 結果は以下のように表示されます。 *** ほげほげの計測 *** result : 0.0011[ms] *** ふがふがの処理の計測 *** result : 0.111[ms] 表示された秒数は 関数の中身を一回だけ実行する時間です。 関数呼び出しのコストは差し引かれています。 また、FireBug を使っている場合は benc
JavaScript のデバッグ方法 - IT戦記
みなさんはどんな環境で JavaScript のデバッグを行っていますか？ 僕は以下のようなものを使っています。 Venkman JavaScript Debugger(Firefox) Microsoft Script Editor(Internet Explorer) DOM Inspector(Firefox) Web Developer(Firefox) Developer Toolbar(Internet Explorer) 最近は便利なツールが増えたものですね。 しかし、このような便利なツールが増えてもやっぱり alert 使いたい場面って出てきます。たとえば、 Opera での確認、ルートが複雑すぎて alert とか使ったほうが楽な場合などです。 とはいえ、 alert は何かと使いにくいので、僕は以下のように簡易ロガーを作って開発しています。使ってみるとかなり便利です。
IT戦記 - 複雑で重くなった JavaScript を超高速化する方法。
以下のスクリプトを他のすべてのスクリプトよりも前に読み込む。 var nativeSetInterval = window.setInterval; _setInterval = {}; window.setInterval = function(process, delay) { var entry; if(typeof process == 'string') { entry = new _setInterval.Entry(function(){eval(process);}, delay); } else if(typeof process == 'function') { entry = new _setInterval.Entry(process, delay); } else { throw Error('第一引数が不正です。'); } var id = _setInterv
Script.aculo.us 1.5 の Autocompleter を Opera、Netscape に対応させて、日本語入力にも対応させて、ちょっとだけ高速化する方法 - IT戦記
このコードを Script.aculo.us を読み込んだ後に読み込む。 // Script.aculo.us 拡張 Object.extend(Autocompleter.Base.prototype, { // for Opera ___pressReturn : false, // for Opera & Japanese // もとのコンストラクタを退避させる ___grandBaseInitialize: Autocompleter.Base.prototype.baseInitialize, // for Opera & Japanese baseInitialize: function() { // もとのコンストラクタを呼び出す this.___grandBaseInitialize.apply(this, $A(arguments)); // for Japanese /
prototype.js 1.4rc4 Part.3 - IT戦記
なんか、この前書いてたやつが文字制限で書ききれなかったので三部構成にしてみました。 これが第三部。 第一部：http://d.hatena.ne.jp/amachang/20051123/1132584098 第二部：http://d.hatena.ne.jp/amachang/20051124/1132584232 注：引数に要素の id 属性値を指定する関数及びコンストラクタは要素オブジェクトそのものを入れても同じ動作です。 Ajax Ajax.activeRequestCount <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"><head><title>Test</title><script type="text/jav
prototype.js の document.getElementsByClassName は重い - IT戦記
JavaScript でオブジェクトを作って、関連する HTML 上の要素にアタッチするような手法がよく用いられていますが。 その際にどのような方法で要素を取得していますか？ 僕は prototype.js の document.getElementsByClassName を使ってクラスを抽出してアタッチしています。 しかし、このメソッドはかなり重い。。。 ためしに、以下のような id ベースで複数の要素を抽出するメソッドを作ってベンチマークをとってみました。 document.getElementsByIdPrefix = function(idPrefix) { var children = []; idPrefix += '_'; for(var i = 0; true;i ++) { var child = document.getElementById(idPrefix + i
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
