archive-com.com » COM » N » NITOYON.COM

Total: 757

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".
  • タグ「はてブ年鑑」の記事一覧 - てっく煮ブログ
    はてブ年鑑2009年3月分 更新 2009年04月02日 はてブ年鑑 はてブ年鑑2009年2月分 2009年03月02日 はてブ年鑑 はてブ年鑑2009年1月分うp と jQuery remove の高速化話 2009年02月02日 はてブ年鑑 jQuery JavaScript はてブ年鑑 2008年分 2009年01月06日 はてブ年鑑 はてブ年鑑 2008年12月前半分 アップ 2008年12月17日 はてブ年鑑 はてブ年鑑をリリースしました 2008年12月10日 作った はてブ年鑑 タグ一覧に戻る About Profile nitoyon にとよん 京都のベンチャー会社勤務 プログラマ たまに趣味でデザイン 詳細 Subscribe twitter

    Original URL path: http://tech.nitoyon.com/ja/blog/tags/hatebu-nenkan/ (2016-02-13)
    Open archived version from archive


  • JavaScriptでかんたんHTAアプリに挑戦 - てっく煮ブログ
    ウイルスでも何でも好きなものがバンバンつくれます やったね つくるための準備 Windowsでのやりかたです Macとか他のへんなOS使ってるひとはあきらめてください 準備といっても HTA は IE5 以降についてくる から何もしなくてオッケーだよ IE4を使ってるひとは日常生活に支障がでてると思うので いますぐIE7をインストールするといいと思うよ よし つくろう まず作業用フォルダをつくる ぼくはいつも C home にガラクタファイルを溜め込んでいってるので C home HTA test1 ってフォルダを作ってみました はい 今回つくるやつは test1 っていうHTAアプリです 作業用フォルダに必要なファイルを用意する AIR だと3つぐらいのファイルを用意しなきゃいけないみたいだけど HTA は1つのファイルでじゅうぶん 作業用フォルダの中に新しく test1 hta ってファイルを作ってね 中身は html head title てすと title script function start load var xhr new ActiveXObject Msxml2 XMLHTTP xhr onreadystatechange function if xhr readyState 4 xhr status 200 view xhr xhr open get http b hatena ne jp hotentry xhr send null function view xhr document getElementById main value xhr responseText script style body background 000 main width 100 height 200px color red font size 12px style head body textarea id main こんにちはこんにちは textarea input type button value ひみつボタン onclick start load body html これをコピペでオッケー ただし 文字コードは Shift JIS で保存してね 別の文字コードで保存したいばあいは meta タグを書いてね 実行しよう エクスプローラを起動して 作業フォルダに移動 さっき作ったやつをダブルクリックで実行 できた やった なんかうごいた ひみつボタン押したら はてなブックマークのソースコードが表示されたよー 改造しよう HTA の html とか JavaScript は IE と同じやつが使われてるらしいですよ てことは 普段ホームページ作りの時に あぁこれFirefoxだと使えないからなぁ なんて諦めていたやつが色々つかえるかもしれないですね ActiveX とか expression とか なんかそういうの あと prototype js とか jQuery みたいな便利ライブラリも普通に使えるよ やった すごい べんり だけどHTAのちょっとまずいところ Windows 限定 Windows 以外のひとにも使ってもらいたいときは HTA はあきらめたほうがよいだろうね cookieがIEと共通 たとえ 標準のブラウザ をFirefoxに設定していたとしても cookieはIEのものをつかっちゃう つまり IEでhatenaにログインしていたら HTAでもhatenaにログイン済み その状態で HTAから IE以外の 標準のブラウザでリンクを開こうとすると ログインしていない状態でリンクが開かれちゃう 参考になるページ 公式のページに公開ファイルの作り方とか色々書いてあるよ HTA Developers Center 入門ドキュメントが日本語で書いてあるよ Hey Scripting Guy HTML アプリケーション HTA かんたんなQ Aだよ ファイルを開いたり保存したりする方法も

    Original URL path: http://tech.nitoyon.com/ja/blog/2009/01/19/hta/ (2016-02-13)
    Open archived version from archive

  • jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ
    main をクラスではなく id に変更します 例題 3 body script src jquery js script script function main css color red ココ script div id main div body jQuery は セレクタに id が指定されていた場合には 再帰的に探索せずに getElementById を利用します そのため 全ノードを列挙するのに比べ 格段に高速に処理できます 4 途中までの結果を再利用する 改善前 body script src jquery js script script function main div entry css main div entry div body ココ css script div id main div class entry div class header div div class body div div div class entry div class header div div class body div div div body どこが問題か ここまで読んでこれば既にお分かりかもしれません main div entry A main div entry div body B B のセレクタでは main を探す その子孫から div entry を列挙する その子孫から div body を列挙する という処理を行います このうちの 1 と 2 は A と全く同じ処理です A で求めた結果を再利用すれば処理速度は向上するはずです 改善方法 キャッシュ作戦です A で列挙されたタグを変数に格納 var entries main div entry css の第2引数に A の結果を渡す div body entries css 関数の第2引数には探す基点を指定することができます A の結果に含まれる要素の子孫から div body を探してくれます find メソッドを使ってもよいでしょう var entries main div entry css entries find div body css おっと ここまでくればメソッドチェーンができそうですね main div entry css find div body css 応用例 div head も探したい場合にはどうすればよいでしょう はい こうすればよいですね var entries main div entry css entries find div body css entries find div head css こいつもメソッドチェーンしてしまいましょう end を使えば find で探す前の状態に戻すことができます main div entry css find div body main div entry div body になる css end main div entry に戻る find div head main div entry div head になる css end ここまで来るとアクロバティックですが 一番最初のコードより高速なのは間違いありません 5 子供セレクタ を使うと速くなることがある 改善前 例題 5 body script src jquery js script script function main div entry css ココ script div id main div class entry div class header div div class body div div div class entry div class header div div class body div div div body どこが問題なのか main div entry は main のあとに子孫セレクタ スペース があります つまり main ノードの下の全ての div ノードから entry クラスを探し出します main div entry の背後では次のような処理が実行されています セレクタで選択した結果を格納する配列 var ret main

    Original URL path: http://tech.nitoyon.com/ja/blog/2008/12/11/jquery-fast-css/ (2016-02-13)
    Open archived version from archive

  • タグ「CSS」の記事一覧 - てっく煮ブログ
    size adjust none を絶対に設定してはいけない理由 2013年02月14日 CSS HTML5 iPhone ブログのデザインを新しくしてみた 2012年03月13日 てっく煮 CSS Web デザイン はてブのCSSをカスタマイズしてみた その2 2009年02月26日 CSS jQuery を高速に使う CSS セレクタの書き方 2008年12月11日 jQuery JavaScript CSS CSS をリニューアルするときに参考にしたいページ 2007年03月05日 CSS 新デザイン移行計画 2007年02月11日 てっく煮 CSS はてブのCSSをカスタマイズしてみた 2007年01月25日 はてな CSS タグ一覧に戻る About

    Original URL path: http://tech.nitoyon.com/ja/blog/tags/css/ (2016-02-13)
    Open archived version from archive

  • jQuery の配列系のメソッドをメモしとこ - てっく煮ブログ
    0 と同じ eq を使うと 特定のインデックスの要素のみを含む jQuery オブジェクトが返ってくる div eq 0 document getElementsByTagName div 0 または div first と同じ jQuery オブジェクトから配列を作成 jQuery オブジェクトは配列のように扱えるんだけど Array の全てのメソッドが使えるわけではない 生の配列を取得するには get を使う div get reverse div 配列の一覧を逆順にした配列 reverse したあとにさらに jQuery オブジェクトにするには 冒頭に紹介したように に入れる div get reverse get の内部では makeArray this が実行されている makeArray は配列のようなもの NodeList や arguments jQuery オブジェクトなど を配列に変換するとき便利だ Array prototype slice call array like という技もあるんだけど IE7 でエラーになることがある each map filter 中身について処理を行うには each を使う 第一引数がインデックス 第二引数が要素 div each function i elem elem className foo i 以下のコードと同じ var elems document getElementsByTagName div for var i 0 i elems length i elems i className foo i this が第二引数にバインドされているので引数なしで this を使って要素にアクセスするとスマート div each function this className foo div attr className foo と同じ 配列の要素を置き換えるには map が使える div map function return this className class1 class2 クラス名一覧を含む jQuery オブジェクト 要素を絞り込むには filter が使える 関数を呼び出した結果が true のものだけに絞り込む select みたいなもん div filter function return this className foo div foo と同じ 第一引数にはインデックス番号が渡る div filter function i return i 2 0 div even と同じ filter には CSS セレクタも使える div filter foo map と filter をした後に end を呼ぶと 元の jQuery オブジェクトに戻る div filter foo style display none end filter bar style display block end 以下の処理と同じ div foo style display none div bar style display none end は

    Original URL path: http://tech.nitoyon.com/ja/blog/2008/11/21/jquery-array/ (2016-02-13)
    Open archived version from archive

  • JavaScriptで正規表現を使わずにグローバルな文字列置換 - てっく煮ブログ
    reg new RegExp before replace g g return str replace reg after myReplaceGlobal foo bar A fooAbarA ドット 以外にも対応しなきゃいけないし 将来的に JavaScript の正規表現が拡張されたときの対応が大変 可能な限り避けたい方法 追記 コメント欄で教えてもらいました replace 0 9A Za z g 1 でエスケープできるとのこと while 泥臭い方法 正規表現を使わず 文字列の replace を使う 1回しか置換してくれないので while で値が変わらなくなるまで回す function myReplaceGlobal str before after while str str replace before after str str replace before after return str myReplaceGlobal foo bar A fooAbarA split join 1行で書けて ちょっとかっこいい function

    Original URL path: http://tech.nitoyon.com/ja/blog/2008/09/17/js-global-replace/ (2016-02-13)
    Open archived version from archive

  • 具体例で説明するデザインパターン - てっく煮ブログ
    からコピーすることでインスタンス生成する clone といったほうがイメージが近いかもしれない function prototypeGoF proto var obj for var name in proto obj name proto name return obj var base prop foo var a prototypeGoF base 複製されている a prop foo 原型 base を変更しても a の値は変わらない base prop bar a prop foo それに対して JavaScript の prototype では prototype オブジェクトが参照として渡される あとから prototype を変更しても反映される function A A prototype prop foo var a new A a prop foo A prototype prop bar a prop bar まとめ 原型からオブジェクトを作る JavaScript の言語仕様に取り込まれているけど Prototype パターンがコピーなのに対して JavaScript の prototype は参照渡しなので注意してね Singleton ざっくり説明 オブジェクト指向でグローバル変数っぽいものを実現したいときに使う 具体例 JavaScript ではグローバル空間汚染できまくりなので いまさら例える必要はないんじゃないかな とはいえ Singleton にはインスタンスが1つしかないことを保証する という意味合いもある これを JavaScript で実現するには次のようにするのが定石になっている function window function 無名関数で隠して グローバル領域に書き込んでる JavaScript のいくつかのライブラリで実際に使われている手法 まとめ グローバル変数を使いにくい or 使えない言語でグローバル変数を実現するためのもの Adapter ざっくり説明 クラスのインターフェースを変える 別名 Wrapper 具体例 IE では addEventListener がなくて困るので定義してあげる if window addEventListener window addEventListener function type fn attachEvent on type function fn call this window event Element prototype addEventListener window addEventListener これで IE でも addEventListener が使えるようになった ただ デザインパターンの流儀では サブクラスを定義して元のクラスを隠蔽するのが基本 ここでは JavaScript 流のやり方で 直接インターフェースを変えてるので Adapter パターンと言い切るのは少し苦しいかもしれない まとめ クラスのインターフェースを変えるときに使う 既存のオブジェクトを変更できないときに使う JavaScript はビルトインのオブジェクトも変更できちゃうので 直接的に書いちゃうよね Composite ざっくり説明 階層構造を表現するためのオブジェクト構造 具体例 DOM ノード addChild removeChild などのメソッドで追加 削除できる childNodes プロパティで子ノードを参照する parentNode プロパティもあるね まとめ 階層構造を表現する DOM ノードは Composite パターン使ってるね 階層構造だもんね Chain Of Responsibility ざっくり説明 要求を表すオブジェクトが順番に伝わっていく仕組み オブジェクトがチェーン状に伝わっていき それぞれの責任範囲で実装を行える 具体例 DOM イベントでは イベントオブジェクトが対象のオブジェクトから親ノードへ順番に伝わっていく 例えば この例では div タグでクリックされると イベントが div タグに到達して div clicked と表示される そのあと body タグにイベントが到達し body clicked と表示される div と body でそれぞれ独立に同じイベントを処理できるようになっている body div id example example div script var div document getElementById example div addEventListener click function event alert div clicked false document body addEventListener click function alert body clicked false script body もう一例挙げておこう プロトタイプチェーンという言葉にもあるとおり prototype は Chain Of Responsibility パターンだ 例えば arr という配列に対して arr myProperty を参照すると a myProperty Array prototype myProperty Object prototype myProperty の順番に myProperty プロパティを探す まとめ 順番に情報が伝わっていく DOM イベントのバブリングフェーズでは イベントオブジェクトが順番に伝わっていく プロトタイプチェーンもそう Iterator ざっくり説明 オブジェクトを順番にアクセスするための方法を提供する 具体例 JavaScript ではあんまりイテレータは使わないんだけど DOM ノードをイテレータ的に使ってみよう var p document body firstChild while p myFunc p p p nextSibling nextSibling は同じ階層の次の要素を取得するプロパティ nextSibling を使えば ノード自身をイテレータのように扱える 実際

    Original URL path: http://tech.nitoyon.com/ja/blog/2008/08/25/design-pattern-js/ (2016-02-13)
    Open archived version from archive

  • WSHでDOM (Shibuya.js in Kyoto) - てっく煮ブログ
    無料版なので 一部漢字が使えずに文章の変更を余儀なくされましたが おかげで小学生にも読める分かりやすい資料になりました ソースコード http coderepos org share browser lang cplusplus dom4winui trunk src プレゼン 全画面で見る http tech nitoyon com misc shibuya js kyoto Slide swf ソース http tech nitoyon com misc shibuya js kyoto Slide as 中身一式 http tech nitoyon com misc shibuya js kyoto Slide zip Tweet 2008年07月20日 編集履歴 JavaScript 発表資料 WSH 勉強会 Google Tech Talk Kyoto に行ってきた Fleverlight Flex Silverlight 勉強会が開催されるよ Please enable JavaScript to view the

    Original URL path: http://tech.nitoyon.com/ja/blog/2008/07/20/wsh-dom/ (2016-02-13)
    Open archived version from archive



  •