Facebook 向けウェブサービスは IE6 に対応すべきか ( 2011年12月の Facebook のブラウザシェア ) - IT戦記
はじめに みなさん、お元気ですか＞＜リリースも終わって、一息ついたあまちゃんです！ ヽ(´ー｀)ノわー さて今日は、最近「お花サプライズ！」というサービスをリリースしたのですが、そのときにちょっと面白いデータを見つけたのでそのいきさつも含めて紹介したいと思います。 （今日のテーマはこの円グラフ） フェイスブック系のサービスはどのブラウザに対応すれば良い？ よく、ウェブサービスを開発するときの悩みとして「古いブラウザでのデザインをどのくらいケアするか？」というものがあります。 「お花サプライズ！」でも、割と短い期間で実装することを目標としていたり、本番の HTML を書いた経験があまりないメンバーが多くいたことで「IE6 や IE7 への対応が鬼門なんじゃないか？」という心配が常にありました。 そこでよぎる甘い誘惑 このご時世、 IE6 とか IE7 に特別対応する必要なんてないんじゃね？
サイボウズで学んだこと - IT戦記
はじめに 2010 年 9 月 15 日を持ちまして、サイボウズ・ラボを退職いたしたました。 報告も兼ねて、久しぶりにブログを書いてみたいと思います。 （写真はゆうすけべーさんです） この会社に入って、たくさんの学びと思い出がありました。 その一つ一つをまとめていければ、素晴らしい記事になるのかもしれませんが、僕は文章が苦手です。 ですので、うまく退職のエントリを書き上げることができません。 言葉にできない。そんな感じです。 なので、このエントリはサイボウズ・ラボやサイボウズ本社の仲間たちへのありがとうの気持ちをこめて、自分らしく最後まで JavaScript のことを書きたいと思います。 サイボウズでの最後の仕事 僕にとって、サイボウズでの最後の仕事は「JavaScript で新しいユーザーインタフェースを作ること」でした。 そして、その中で始めて複数人による大規模な JavaScrip
要素が document につながっているかを高速に調べる方法 - IT戦記
とある要素が document につながっているかどうかを調べたい！ とりあえず、ほとんどすべてのブラウザで出来る方法としては、 parentNode で確認することができますね。 function isElementInDocument(node) { do { if (node === document) { return true; } } while (node = node.parentNode) return false; } でも 前の例だとちょっと遅いので contains や、 compareDocumentPosition を使うといいです！ コードにすると以下のような感じ function isElementInDocument(node) { if (document === node) { return true } else if (document.compa
Firefox に outerHTML を実装する - IT戦記
outerHTML について outerHTML とは Mozilla 系のブラウザ以外のすべてのブラウザで使える要素の HTML が文字列として取得できるプロパティです。 alert(document.body.outerHTML); // => body の HTML がすべて見える（例：<body><h1>It works!</h1></body>） というわけで 以下のコードを書いてみました。 if (!('outerHTML' in document.createElement('div'))) { HTMLElement.prototype.__defineGetter__('outerHTML', function() { return this.ownerDocument.createElement('div').appendChild(this.cloneNode(tru
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戦記
はじめに mixi の足あと機能がパワーアップしましたね！ 「足あと」の機能改善においては、ページデザインのリニューアルと同時に、「マイミクシィ」（友人）の表示に加えて、これまで足あとページでは分からなかった「マイミクシィのマイミクシィ」（友人の友人）についても、アイコンが表示されるようになりました。これらの機能改善により、自分のページを訪れたユーザーとのつながりが、今まで以上に分かりやすくなります。 また、新機能「自分の足あと」の提供により、自分が訪問した先(プロフィールや日記など)のユーザーのニックネームを、時系列で最大30件表示いたします。なお、意図しないユーザーのページへ訪問してしまったときのために、相手の足あとページから自分の足あとを削除できる機能*1を追加しています。 株式会社ミクシィ どうやら 自分の足あとを削除できるようになったみたいですね！ ただ この機能、便利なんですけ
XPath に文字列を埋め込むときの注意 - IT戦記
よく、以下のように XPath に文字列を埋め込む事があります document.evaluate('//*[@class="' + text + '"]', document, null, 7, null); まあ、僕もよくこんなコード書くんですけど。 でも、これって text が外部から来るものだったら、意図通りの動作をしないんですよね たとえば、以下のような例です。 var text = '"] | /hoge/fuga/piyo | .["'; document.evaluate('//*[@class="' + text + '"]', document, null, 7, null); というわけで 任意の文字列を XPath の式に変換する JavaScript を書いてみた 以下で試せます http://amachang.sakura.ne.jp/misc/xpath_es
for 文と無名関数のイディオム - IT戦記
id:cho45 がチョロっと書いたコードが話題になっている 冬通りに消え行く制服ガールは✖夢物語にリアルを求めない。 - subtech このような書き方は、自分もたまにする。 というわけで、この書き方をする利点を以下の順に解説して見る。 単純な for 文の問題点 with 文を使った解決方法と、その微妙な問題点 無名関数を使った解決方法 単純な for 文の問題点 まずは、以下の HTML に対して <ul> <li>hoge</li> <li>fuga</li> <li>piyo</li> </ul> 以下の JavaScript を実行して var list = document.querySelectorAll('ul > li'); for (var i = 0, len = list.length; i < len; i++) { var node = list[i]; v
本を検索して yonda4.com に呟きやすくするブックマークレット作りました - IT戦記
はじめに Twitter 経由で、読んだ本を紹介しあえるサイト yonda4.com がリリースされましたね！ twitterで読書記録。読んだ4! このサイトは @yonda4 に本の名前をつぶやくだけで、本の紹介ページが生成されるという「本格書籍紹介サイト」です！ すごいですね！きゃっふきゃふですね！ というわけで このサイトに本を紹介しやすくするために、 twitter のページから本を検索するブックマークレットを作ってみました。 javascript:(function(s){s.src="http://amachang.sakura.ne.jp/misc/amazon/search.js";document.body.appendChild(s)})(document.createElement('script')) twitter のホームに行って、このコードをブラウザのロケー
Prototype.js を使った JavaScript OOP 講座 #03
社内の勉強会の資料をここに公開していきます。社内の人も社外の人も読んでください。 ※ターゲットは JavaScript は書いたことない、オブジェクト指向言語プログラマ。 ※信念は「教わるのではなく、必死に着いていきませう」 前回までの内容で Prototype.js でどのようにプログラムを書いていくか理解できたと思います。 ここからは、関数やクラスを覚えた数だけ Prototype.js を使えるようになると思います。 しかし、それではいつか必ず躓きます。他人の書いた JavaScript を使うためにはそのコードを読める必要があります。 JavaScript は、言語の仕様レベルの部分までかなり書き換えることが出来ます。 そのため、もし、動作がおかしくなった場合に、どこがどう影響したか自分で調べられなければならないのです。 今回は、 Prototype.js を読むために必要な知識を
Prototype.js を使った JavaScript OOP 講座 #01
社内の精鋭エンジニアを中心に定期的に勉強会をすることになった。んで、 JavaScript の講義は僕がやることになった。 資料を社内だけでとどめておくのはもったいないので、ここに公開していきます。社内の人も社外の人も読んでください。 講義の内容は基本的にソース嫁。ソースレビュー形式。 ※ターゲットは JavaScript は書いたことない、オブジェクト指向言語プログラマ。 Section 00 Prototype.js の前に JavaScript のオブジェクトの概要・・・ オブジェクトを作ってみる。 var object = {};オブジェクトにメソッドとかプロパティを追加してみる。 var object = { field: 'IT戦士', method: function() { alert('hello ' + this.field); } }; object.method()
それすぐ実行！JavaScript！ - IT戦記
思った JavaScript はすぐに実行してみましょう！ ブラウザの URL 入力欄に javascript:(function() { /*実行したいコードを書く*/ })()FireBug を使ってる人は、コンソール開いて実行したいコードを書く。 たとえばこんなことができます。 これらの例は僕が日頃使っているものです。 グローバルで使える関数を列挙する(Firefox Only) FireBug用 for(var n in window) if(typeof window[n]=='function')console.log(n); URL用 javascript:(function(){var b='';for(var n in window)if(typeof window[n]=='function')b+=n+"\n";alert(b)})() Object.prototyp
Windows IME に関する発見 - IT戦記
はじめに Windows IME って「半角／全角」で ON OFF をトグルさせるじゃないですか。 あれって不便ですよね。理由としては 今 ON か OFF かを自分で覚えなきゃいけない キーが遠い などです。 で、発見した Shift+「無変換」で OFF。 「カタカナ／ひらがな」で ON。 が出来ることを知った。 このキーを覚えておけば、今 ON でも OFF でも一発で自分の好きな状態に出来るので、便利。
JavaScript-XPath をリリースしました！さあ、あなたも XPath を使おう！（解説付き） - IT戦記
JavaScript-XPath とは JavaScript-XPath は、 DOM 3 XPath を実装していないブラウザに対して、実用的な速度で動作する DOM 3 XPath のエンジンを追加します。 一言で乱暴に言ってしまえば、どのブラウザでも document.evaluate って関数で XPath 使えるようになるよ！ってことです。 以下が公式サイトになります。 http://coderepos.org/share/wiki/JavaScript-XPath DOM 3 XPath ってなんなの！？ めっちゃ簡単（で、ちょっとだけ適当）なDOM 3 XPath の説明をします＞＜。 JavaScript でよく使う document.getElementById や document.getElementsByTagName って関数ありますよね？ DOM 3 XPath
私的 Win32 API メモ - IT戦記
いろいろ勉強した 忘れてしまいそうなので書き下しておく 雰囲気的なこと ウィンドウ 俗にいうウィンドウではなく、 GUI の部品全般（ボタンとか、ツールバー）も含む 俗にいうウィンドウは、フレームとか言う ハンドル ポインタみたいなもん HWND ウィンドウのハンドル DOM でいうと Node みたいなもん LPXXX XXX のポインタって意味 owner と popup 「ポップアップさせたウィンドウ = owner」と「ポップアップしたウィンドウ = popup」 DOM でいうと owner は、 window.opener で popup は、 window.frames って感じ HINSTANCE DLL とか EXE とかひとつと対応してるハンドル アプリケーションの HINSTANCE というと実行されている EXE のハンドル DLL や EXE のメモリ上の位置 H
JavaScript はどのように実行されるか - IT戦記
JavaScript はどのように実行されるか Safari*1 の実装を例に JavaScript はどのようにして実行されているかを書く。自分用のメモ。日本語の出来は気にしない 1. ブラウザを起動して以下のようなページを開いたとする <html> <head> <script> var a = 1; var b = 2; alert(a + b); </script> </head> <body> </body> </html> 2. インターネットからデータが到着する そうすると WebCore::FrameLoader::write という関数に生の文字列が渡される。型は char* だ。 http://trac.webkit.org/browser/trunk/WebCore/loader/FrameLoader.cpp#L990 この関数の中では、到着した文字の文字コードを解
ニコニコ動画のまとめサイトを色々調べてみた - IT戦記
週末といえば だらだら、動画サイトを見て過ごすってことも多いんじゃないでしょうか。 という訳で、 Pathtraq を使って「ニコニコ動画のハブとなっているサイト」を調べてみました。 Pathtraq を使って調べた結果はこちら こうやってみるといろいろなサイトがありますね。 予想外に知らないサイトが多かったので、軽くまとめてみます。 あまり中身は吟味していません。 以下、リンク http://b.hatena.ne.jp/video http://b.hatena.ne.jp/video http://www.nicochart.jp/ http://www.nicochart.jp/ http://nicorankmonth.web.fc2.com/ http://nicorankmonth.web.fc2.com/ このURLのページは表示することが出来ませんでした。 IP分散サーバ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
