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 -
君は3つのリロードを知っているか？ - os0x.blog
はい、今さら聞けないウェブ開発者の基礎知識のお時間です。 ブラウザには3つの読み込みモードがあることはご存知ですか？ 2つくらいはわかるけど、3つ目が出てこないって方は少なくないかもしれません。 リロード 一番オーソドックスなのがブラウザのリロードボタンを押したときの挙動ですね。普通ですね。 スーパーリロード ブラウザによっては、スーパーリロードという機能を備えています。IEの場合Ctrl+F5(Ctrl+更新ボタン)、Firefoxの場合Ctrl+F5(Shift+更新ボタン)、Chromeの場合Shift+更新ボタン(Ctrl+Shift+R)などでスーパーリロードを呼び出すことができます。スーパーですね。 ページ遷移(リフレッシュ) 3つ目はちょっと良い名前が思いつかないのですが、リロードではなく、通常の画面遷移での読み込みのことです。アドレスバーにフォーカスしてenterするといっ
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
prototype.jsからjQueryに移行するたったひとつの冴えたやりかた - os0x.blog
どうもこんにちは、os0xです。 実は(Twitterに書いただけで)ブログに書いてなかったのですが、3ヶ月ほど前からクックパッドで働いています*1。なんかもう今更ですよね、すみません。 さてさて、クックパッドですが、つい一昨日までprototype.jsを使っていました。で、昨日jQueryへの移行をリリースしたところだったりします。 というわけで、その辺の話を少し書いてみたいと思います。 そもそも、なんでjQueryに移行するのか まあ、prototype.jsとjQueryどちらを使うかと問われたら、大抵の人はjQueryと答えますよね。確かにjQueryの使いやすさは魅力的です。使いやすいということは、みんなでjQueryを使ってサービスを作ることができます。特定の誰かに依存してボトルネックになったりすることがないなら、それは素晴らしいですね。 しかし、ライブラリを変えるのは簡単な
2011年のJavaScriptとかなんとか - os0x.blog
昨年に続いて、新春特別企画：2011年のJavaScript ─ウェブアプリ全盛の時代へ｜gihyo.jp … 技術評論社を書きました。 去年、当たったら(自分が)面白いよねくらいな気持ちで書いた「拡張」とか「サーバーサイドJavaScript」が見事に的中してて驚きました。特にNode.jsブームはすごいですね。 ってわけで今年は、Node.jsのどこが注目されているのかを書きました。あと、それに呼応してBigPipeにも言及。BigPipeはid:brazilが東京に来たときの飲み会で@kzysに教えてもらった。確かにかとーさんはいつも良いネタ持ってる印象があるなあ。 そういえば、今年の後半は色々忙しくてブログにあんまり書いてなかったけど、DeNA Technology Seminar #3 : ATNDでJavaScriptの未来みたいな話をしました。この時も@kzysが来ていた。@
JavaScriptのデバッグTips - os0x.blog
JavaScript Advent Calendar 2010 8日目担当のid:os0xです。 JavaScriptネタは案外範囲が広くて色んなネタがあるので、毎回が楽しみですね。 さて、私はデバッグをネタにしたいと思います。テストではなくデバッグです。誰かが書いたコードをメンテナンスしなきゃー、とか。jQueryプラグイン導入しようとしたけど、なんかうまく動かないーみたいなケースのおはなしです。 JavaScriptのデバッグは大変なので、多くの方が日々苦労されていると思います。なぜJavaScriptのデバッグが大変なのか少し整理してみましょう。 ブラウザ依存 まず、なんといってもJavaScriptはウェブブラウザ上で実行されるので、環境が一定ではありません。特定の環境だけを対象にJavaScriptを書くことは滅多にありません。PC向けではIE、Firefox、Chrome、Sa
リアルタイムWebハッカソンに参加してきた - os0x.blog
node.jsでWebSocket動かして遊ぼうという素敵なイベント、リアルタイムWebハッカソン : ATNDに参加してきました。 まず、なんといってもめそさんが準備した資料が素晴らしく、大変勉強になりました。資料はリアルタイムWebハッカソンでハンズオンしてきました - 自分の感受性くらいから。node.jsの環境構築から具体的なサンプルの作り方までわかりやすくまとまっています。 で、タイトルのとおりハッカソンなので、上記資料にざっくり目を通してから@yoshikawa_tさんとなにか作ってみようかという話になりました。 ただ、いいアイディアが思い浮かばず、「ゲームとか」と考えたところでという、こちらもnode.js+WebSocket(Socket.IO)で動いているデモアプリを思い出しました。このSwarmationは、右側でお題が与えられて、そのお題の形になるようにマス目を塗り潰
AutoPagerizeで継ぎ足された部分に自分のスクリプトを適用する方法あれこれ - os0x.blog
以前からある手法から順番に見ていきます。 ページの高さの監視 setIntervalでページの高さを監視して、増えていたらAutoPagerizeが動いたとみなして処理を行う var THRESHOLD = 300; var _height = window.innerHeight; setInterval(function(){ if (window.innerHeight - _height > THRESHOLD) { // 処理 } _height = window.innerHeight; }, 300); メリット AutoPagerizeだけでなく、はてなダイアリー・ブックマーク、Twitterなどでのサイト側でのページの継ぎ足しにも対応できる デメリット THRESHOLDをいくつにするかなど、一概に決められない。タイマーをたくさん回すと重くなる。Floatしている要素を継
JavaScriptの勉強会資料 - os0x.blog
JavaScript社内勉強会｜渋谷ではたらくベンチャーCTOのブログ 実践JavaScript - Event編 - 株式会社ALBERT 勉強会資料 月一で講師をしている、社内向けJavaScript勉強会の資料です。 初回はEvent周りの一般的な話(実際、割と良く目にするネタばかりだと思います)だったので、(かなり整形して)資料を公開しました。2回目は内輪ネタだったので、公開はなしです。次回(もう来週)はprototypeとか、thisの話とかにしようと思います。こちらは公開予定です。 資料は取説 正規表現をベースに、HTML5を意識してみたり、CSSでHTMLタグの可視化 - 0xFFしてみたりといった感じです。pタグが少しうるさい感じはしますが、割と綺麗な資料になったかなーと思います(まだしっくりしない部分はありますが、細部にこだわってもキリがないので)。 さて、資料作りをしな
AutoPagerizeの動作の流れ - os0x.blog
AutoPagerize くらいは - twwp宛て。 本家swdyh版について(oAutoPagerizeも主な流れは同じだけど)、ざっくりと処理の流れを(細かいところやメインでない部分は省いています)。 ページの読み込み→Greasemonkey起動(この辺は省略)、AutoPagerize起動 SITEINFOの読み込み SITEINFOの期限が切れていた場合、wedataから最新を取得 URLにマッチするSITEINFOがあるかチェック、なければ終了 SITEINFOのXPathが機能しているかチェック、XPathで要素を取れなかったら終了 初期化処理 次のページのURL取得 差込位置の決定、insertBeforeか、pageElementの最後の次の要素 右上アイコン・ヘルプの設置 スクロール監視の開始 読み込み開始位置の決定(どこまでスクロールしたら次のページを読み込むかは、
JavaScriptは悪くない - os0x.blog
JavaScript の不思議な面白さ - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第二回 - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第三回 - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第四回 - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第五回 - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 第六回 - Yahoo! JAPAN Tech Blog JavaScript の不思議な面白さ - 最終回 - Yahoo! JAPAN Tech Blog のシリーズがJavaScriptの面白さよりも、暗黒面ばかり伝えてしまっている印象で、連載モノだか
外部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をこれから勉強しようと思っている人へ(jQueryよりprototype.jsを薦める理由) - os0x.blog
JavaScriptは手軽で、実用的なプログラミング言語 どのくらい手軽かといえばJavaScriptを始めるのに(HTMLとCSSは出来た方が良いけど)予備知識はほとんど必要なくて、ブラウザとエディタさえあればすぐにJavaScriptを動かすことができる(FirefoxにFirebugを入れればコンソールでその場実行できるのでエディタも(リロードも)不要)。 その上実用性も十分で、最近のウェブサービスのバックエンドはPerlやPHP、JavaにRuby、Pythonなどなど様々だけど、フロントエンドは必ずといっていいほどJavaScriptが使われている(FlashもあるけどフルFlashサイトでない限りJavaScriptも使われているし、そもそもFlashを表示するのにJavaScriptが使われていたり)。とにかくJavaScriptが必要とされる場面はすごく多い。 と、こんな理
サーバーサイド技術を使わないクロスドメイン通信補足 - os0x.blog
クロスドメイン通信方法のまとめ - nopnopの日記の補足です。 ブックマークコメントでちょろっと書いたけど、nopnopさんが書いている以外の方法としてwindowのname属性を使う方法とHTML5のpostMessageがあります。 window.name これは単純な方法(その分、クロスブラウザであり割と古いブラウザでも動作する(追記:)と、思ったけどIEの動作は微妙かもしれない)で、例えばwindow.open('http://example.com/','hogehoge');といったJavaScriptでウィンドウ(タブ)を開くと、hogehogeというウィンドウが開かれます。インラインフレームなどにも同様にwindowにnameをつけることができます。この名前はwindowを作る側が設定することが出来て、作られる側はドメインなどに関係なく設定されたnameを読み取ることが
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
