タグ

ブックマーク / os0x.hatenablog.com (44)

  • git初心者向けのTipsなど - os0x.blog

    gitの基的なcommandしか使ってないって人向けのtips集です。 エイリアスの設定 $ git config --global alias.co "checkout" とすると、 ~/.gitconfig に [alias] co = checkout のように追記されます。 このようにgit configを叩いてもいいですし、~/.gitconfigを直接編集しても大丈夫です。 とりあえず、 [alias] co = checkout # checkout長い… st = status -sb # シンプルなstatus pr = pull --rebase # pull するときにmergeコミットを作らない fo = fetch origin ro = rebase origin # branchでfoしてroすればmasterにrebaseできる rc = rebase -

    git初心者向けのTipsなど - os0x.blog
  • IE8のレンダリングモードと特定文字列によるクラッシュバグ - os0x.blog

    こんにちは、だいぶ久しぶりなブログ更新です。昨日、IE8のおもしろバグを発見してしまったので、さらしものにみなさんと共有したいと思います。 早速今回のバグの再現コードをみてみましょう。 <!DOCTYPE html>ܫ<br>1日 再現ページ たったこれだけです。JavaScriptはおろか、CSSすらありません。ただのHTMLです。これだけでIE8の標準モードのレンダリングが壊れ、強制的に互換モードにフォールバックされます。 さらに次のようにmetaタグ(もしくはレスポンスヘッダ)でX-UA-CompatibleにIE=8やIE=edgeを指定して、標準モードでのレンダリングを強制していた場合はフォールバックが働かないので真っ白なページが表示されてしまいます。 <!DOCTYPE html> <meta http-equiv="X-UA-Compatible" content="IE=8

  • 外部JavaScriptの動的ロード - os0x.blog

    JavaScriptからJavaScriptを読み込むのは、(IEに対応する場合は特に)結構面倒です。 ちょうど昨日公開されたid:amachangのはてブにアクセスチャートを出す Greasemonkeyでは、こんな実装になっていました。 // for IE if (!document.evaluate) { var script = document.createElement('script'); script.src = 'http://svn.coderepos.org/share/lang/javascript/javascript-xpath/trunk/release/javascript-xpath-0.1.11.js'; document.body.appendChild(script); var callee = arguments.callee; var inter

    外部JavaScriptの動的ロード - os0x.blog
  • Google ChromeのJavaScriptデバッガの進化がすごい - os0x.blog

    Chrome版のFirebugことGoogle Chrome Developer Toolsですが、以前gihyoで解説したときよりさらに便利になっているので、少し紹介します(元はWebKitなので、そのうち(近いうちに)Safariでもそれなりに使えるようになるはずです)。 圧縮されたコードの整形 まず、目立つところからいきましょう。ちょうど先日更新されたChromeのdev版(12.0.742.0)に搭載されたばかりの機能で、minifyされているJavaScriptコードを読みやすいように整形して表示してくれるというものです(IE9の開発者ツールにも実装されている機能です)。 例えば、Google Analyticsのコードは圧縮されていて普通は読めません。 しかし、Chromeのデベロッパーツールなら、 このように整形してくれます。 やり方は簡単で、デベロッパーツールのScript

    Google ChromeのJavaScriptデバッガの進化がすごい - os0x.blog
  • MacをJavaScriptの開発環境にするメモ - os0x.blog

    以前は自宅も仕事Windowsメインな環境だったんですが、仕事の方がでMac+英語キーボードな環境になり、ついでなので自宅もそれに合わせることにしました。 環境はMac miniの最新型で一番安いの(6月くらいに購入)とMacbook Airのやっぱり一番安いの(11月に購入)です。両方合わせて15万くらい。お手頃…なのか?どうでもいいけど、mac miniは1.3kgしかなくて、Macbook Airの13インチとほぼ同じ重さだっりします。miniデスネー。 ついでにWindowsのほうは2年半前に買ったCore2duo(Windows7アップグレード済み)で、当時そこそこハイエンドだったやつです(ちょうどMac miniと同じくらいのスペックだけどこいつは一体何kgあるんだろう…)。 以下、Macの開発環境をなるべく最近の流行りを取り入れてレポートします。 ブラウザ さて、マシンのセ

    MacをJavaScriptの開発環境にするメモ - os0x.blog
  • prototype.jsからjQueryに移行するたったひとつの冴えたやりかた - os0x.blog

    どうもこんにちは、os0xです。 実は(Twitterに書いただけで)ブログに書いてなかったのですが、3ヶ月ほど前からクックパッドで働いています*1。なんかもう今更ですよね、すみません。 さてさて、クックパッドですが、つい一昨日までprototype.jsを使っていました。で、昨日jQueryへの移行をリリースしたところだったりします。 というわけで、その辺の話を少し書いてみたいと思います。 そもそも、なんでjQueryに移行するのか まあ、prototype.jsとjQueryどちらを使うかと問われたら、大抵の人はjQueryと答えますよね。確かにjQueryの使いやすさは魅力的です。使いやすいということは、みんなでjQueryを使ってサービスを作ることができます。特定の誰かに依存してボトルネックになったりすることがないなら、それは素晴らしいですね。 しかし、ライブラリを変えるのは簡単な

    prototype.jsからjQueryに移行するたったひとつの冴えたやりかた - os0x.blog
  • 2011年のJavaScriptとかなんとか - os0x.blog

    昨年に続いて、新春特別企画:2011年のJavaScript ─ウェブアプリ全盛の時代へ|gihyo.jp … 技術評論社を書きました。 去年、当たったら(自分が)面白いよねくらいな気持ちで書いた「拡張」とか「サーバーサイドJavaScript」が見事に的中してて驚きました。特にNode.jsブームはすごいですね。 ってわけで今年は、Node.jsのどこが注目されているのかを書きました。あと、それに呼応してBigPipeにも言及。BigPipeはid:brazilが東京に来たときの飲み会で@kzysに教えてもらった。確かにかとーさんはいつも良いネタ持ってる印象があるなあ。 そういえば、今年の後半は色々忙しくてブログにあんまり書いてなかったけど、DeNA Technology Seminar #3 : ATNDJavaScriptの未来みたいな話をしました。この時も@kzysが来ていた。@

    2011年のJavaScriptとかなんとか - os0x.blog
  • JavaScriptのデバッグTips - os0x.blog

    JavaScript Advent Calendar 2010 8日目担当のid:os0xです。 JavaScriptネタは案外範囲が広くて色んなネタがあるので、毎回が楽しみですね。 さて、私はデバッグをネタにしたいと思います。テストではなくデバッグです。誰かが書いたコードをメンテナンスしなきゃー、とか。jQueryプラグイン導入しようとしたけど、なんかうまく動かないーみたいなケースのおはなしです。 JavaScriptのデバッグは大変なので、多くの方が日々苦労されていると思います。なぜJavaScriptのデバッグが大変なのか少し整理してみましょう。 ブラウザ依存 まず、なんといってもJavaScriptはウェブブラウザ上で実行されるので、環境が一定ではありません。特定の環境だけを対象にJavaScriptを書くことは滅多にありません。PC向けではIE、Firefox、Chrome、Sa

    JavaScriptのデバッグTips - os0x.blog
  • IE6,7のためにArray.join("") による文字列連結を使うべき - os0x.blog

    理由がない限り、Array.join("") による文字列連結は使わないほうがいいみたい - latest log の件について。 IE6の+による文字列結合が遅くて、Array.joinで連結するとマシになるよって話を(私が)初めて聞いたのはShibuya.js第1回の id:amachang の発表だったと思います。 Shibuya.js Technical Talk #1 を終えて。 - IT戦記 *1 少なくとも3年以上前のバッドノウハウが未だにIE6のみならず、IE7でも有効という現実に気が遠くなりそうですね。 で、IE6,7は基的なパワー不足で、同じJavaScriptでも他のブラウザより処理が遅いことがほとんどです。遅いブラウザに合わせてチューニングをするほうが一般的なので、特に理由がなければArray.joinを使っておいたほうが無難だと思います。 Array.join

    IE6,7のためにArray.join("") による文字列連結を使うべき - os0x.blog
  • valueOfとtoStringとToPrimitive - os0x.blog

    valueOfとtoStringメソッドの水深43cmぐらいの深さの話 - 三等兵のもう少し深いお話。コメント欄に書こうかとも思ったけど、最近ブログ書いてない気がしたのでちゃんと記事にしてみる。 まずは問題です。次のコードを実行したときにtrueかfalseのどちらがalertされるかそれぞれ当ててみてください。 var date = new Date(); var date_string = date.toString(); var date_value = date.valueOf(); alert(date == date_string); alert(date == date_value); true, true false, false true, false false, true (難しい問題ではないと思いますが、)この問題の答えは最後に。 続いて、もっとシンプルな問題です。

    valueOfとtoStringとToPrimitive - os0x.blog
  • script, styleタグ内のコードの書き方 - os0x.blog

    # 最初にちょっと余談を。Chromium-Extensions-JapanのほうにChrome6 Betaの変更点を書きました。どうぞよろしく。 さて、scriptタグ内をHTMLコメントで括ってからJavaScript書くのって意味あるの? - Togetterの件に関して、関連ネタをいくつか書いておきます。。 まず前提として、scriptタグの中に直にコードを書くというのはできる限り避けたほうが良いです。とはいえ、ちょっとしたコードをいちいち外部ファイルにしていると読み込みのコストも馬鹿にならないので、インラインで書く事もよくあります。なので、以下は主に数行程度のコードをインラインに書く場合の話です。 scriptタグの中に直にコードを書くときはscriptタグに非対応なブラウザのために<!--で始め*1 // -->で閉じるというノウハウは今でも結構使われているみたいです。 しかし

  • HTML5ガイドブック - os0x.blog

    Google API Expertが解説するHTML5ガイドブック 作者: 羽田野太巳,白石俊平,古籏一浩,太田昌吾出版社/メーカー: インプレスジャパン発売日: 2010/09/16メディア: 単行(ソフトカバー)購入: 15人 クリック: 438回この商品を含むブログ (12件) を見る インプレスさんより、Google API Expertが解説する HTML5ガイドブックというが2010/09/16に発売されます。 @futomiさん(Canvas、Drag&drop、FileAPI)、@Shumpeiさん(ApplicationCache、WebSocket、WebWorker)、@openspcさん(Video&Audio、Geolocation)に私(SVGと付録でECMAScript5とCSS3 Transitions)の4人での共著です。 内容はHTML5、というより

    HTML5ガイドブック - os0x.blog
    Layzie
    Layzie 2010/09/06
    この時点での書籍はどうなんだろうか。読んでみたい。
  • ECMAの読み方 - os0x.blog

    # なんかTwitter記法がうまく動いてないんだけど、なにが悪いのかわからない… この前の#orejsや今日の#hatenatechでも話題になっていたECMAの読みについて。*1 @Constellation: ECMAってすぐイーシーエムエーって読んでしまう... #orejs 2010-07-24 20:03:06 via Tween http://twitter.com/Constellation/status/19413623287 @rwest2112: いーしーえむえーっていうのか。。。ずっと絵熊って読んでた。「絵熊では…(キリッ)」なんて。orz (#hatenatech live at URL ) 2010-08-05 11:50:18 via Ustream.TV http://twitter.com/rwest2112/status/20355293935 どっちや

    ECMAの読み方 - os0x.blog
    Layzie
    Layzie 2010/08/22
    そんなエサに釣られなエクマー
  • JavaScript連載12回とデベロッパーツールの特集開始 - os0x.blog

    これでできる! クロスブラウザJavaScript入門の第12回として、XMLHttpRequest入門が、Google Chrome版Firebug:デベロッパーツール取扱説明書として、詳説:デベロッパーツールの使い方が公開されています。 デベロッパーツールというのはWebKitのWebInspectorのことで、FirefoxのFirebugに当たるブラウザベースのデバッグツールです。って、まあこのブログを読んでくださっている方には今更感があるとは思いますが。ただ、Firebugを始めWebInspector、Dragonfly(Opera)、さらにIEの開発者ツールにいたっても、すごい勢いで改良が進められていて、高機能化してきています。もはや、これらのデバッグツールなしでウェブ開発をするなんて考えられないでしょう。同時に使い方がわかり難くなってきている面もあるので、画像大盛りの解説に

    JavaScript連載12回とデベロッパーツールの特集開始 - os0x.blog
  • ブラウザー勉強会でWebKitの拡張について話してきました - os0x.blog

    ブラウザー勉強会というのは、hebikuzureさん主催のウェブブラウザについての勉強会です。「ウェブブラウザについて」と一口にいっても割と範囲が広くて、特に今日の参加者を見ても、ウェブブラウザを実装してる人から、拡張を作ってる人、ウェブサイトを作っている人、企業の社内インフラ管理をしている人、そしてウェブブラウザの利用者とかとか、多種多様なんですよね。そういった色んな立場のウェブブラウザに強い関心のある方が集まった面白い勉強会でした。 で、WebKitの拡張(WebKitの拡張というのは微妙な表現なんだけど、Chromeの拡張とSafariの拡張といちいち書くのも面倒なので…。他に良い名称があれば教えてください…。)についてお話してきたんですが、折角のウェブブラウザ勉強会のなのでWebKitの裏話的なものを取り上げてみました*1。 というわけで、発表資料です。 WebKit拡張教室 at

    ブラウザー勉強会でWebKitの拡張について話してきました - os0x.blog
  • SVGの特集記事 - os0x.blog

    gihyo.jpにて、SVGについての全4回の集中連載を始めました。 特集:スタートアップ SVG|gihyo.jp … 技術評論社 第1回はSVGの基礎知識について。最初なのであまりSVG自体は出てこないですが、そもそもSVGってどうやって扱えばいいのかって話をメインに書きました。 SVGについて勉強初めてから日は浅いのですが、入門的な紹介(特にJavaScriptと絡む部分について)があまり見当たらなかったので自分で書いてみることにしました。 ややネタばらしにはなりますが、参考にしているのはAn SVG Primer for Today's Browsersとid:polynityさんの(PDF)SVG実習マニュアルがメインです。 他には Pike's SVG Tutorial 良くまとまってる。どうでもいいけど、作者は日に留学中(ただ4,5年前の話なので今は違うと思われる)のカナダ

    SVGの特集記事 - os0x.blog
  • オレ標準JavaScript勉強会を開催しました - os0x.blog

    Twitterでこっそりと募集して、オレ標準JavaScript勉強会というイベントを開催しました。 id:edvakfさんが来日されるということで、「会いましょう→何かやりましょう→勉強会とかどうでしょう」というTwitter上の軽いノリで企画され、みんなで短いネタを披露し合う一品持ち寄りの少人数勉強会をやってみよう、ということになりました。で、そのままTwitter上で参加者を呼びかけてみたところ、半日もたたずに15名集まって、しかもそうそうたる顔ぶれに! 当日 色々と反省があったので、少し書き出しておきます。 まず、会場*1には有線LANしかないので、自前のルータで無線LANをやろうとしたんですが、設定がなかなかうまくいかず、だいぶ手間取ってしまいました。やはり、安物のLANは駄目ですね…。大人数で繋ぐと安定しないし、有線をいっぱい用意したほうが良かったです。 で、Ustreamに挑

    オレ標準JavaScript勉強会を開催しました - os0x.blog
  • 連結リスト(LinkedList)のベンチマーク - os0x.blog

    LinkedListは一言で言えば数珠繋ぎになったデータです。定義的には色々種類がありますが、今回は配列の代わりに順番にデータにアクセスする方法として使用します。具体的にはこういうことです。 function linkloop(){ var n = first; do{ // n } while ((n = n.next)) } まず1つ目の要素を処理、1つ目から2つ目を参照して2つ目の要素を処理、とnextで繋がっているだけループが続くという簡単な仕組みです。 clockmakerさんのParticle 3000 - jsdo.it - Share JavaScript, HTML5 and CSSでLinkedListが使われていたのですが、forkする際になんとなくLinkedListを避け(型のないJavaScriptでは配列の方が速そうに思えたので)ました。で、その勘が当に合っ

    連結リスト(LinkedList)のベンチマーク - os0x.blog
  • ECMAScript 5 and Chromium/V8 - os0x.blog

    Page not found | Qt Blogの補足とV8版です。赤くなってるのはChrome5で使えるやつです。 Object.getPrototypeOf WebKit https://bugs.webkit.org/show_bug.cgi?id=28114 Chrome http://codereview.chromium.org/518056 Object.getOwnPropertyDescriptor WebKit https://bugs.webkit.org/show_bug.cgi?id=28724 Chrome http://code.google.com/p/chromium/issues/detail?id=20345 Object.keys WebKit https://bugs.webkit.org/show_bug.cgi?id=29170 Chrome

    ECMAScript 5 and Chromium/V8 - os0x.blog
    Layzie
    Layzie 2010/07/01
    Objectのプロパティ充実と。
  • jsdo.itで遊ぼう! - os0x.blog

    既にご存知の方も多いと思いますが、1週間ほど前にKAYACさんの新サービスjsdo.itがリリースされています。 jsdo.itHTML, CSS, JavaScriptを編集してその場で実行、共有するプログラマ向けコミュニティサイトです。wonderflをご存知の方はそのJavaScript版の一言で十分でしょう。 単にコードを書いて公開するだけでなく、その場で実行したり、favorite に登録したり、forkしたり、コメントを書いたりと、ソーシャルな要素が強いところがポイントです。 とりわけforkが特徴で、公開されているコードをベースにして改良を加えてみたり、パラメータを変えてどうなるのか実験してみたり、といったことが簡単にできます。また、わからないところがあればquestionタグを付けてどこがわからないのか書いておけば、誰かが回答付きでforkしてくれるかもしれません。que

    jsdo.itで遊ぼう! - os0x.blog