タグ

ブックマーク / amachang.hatenablog.com (17)

  • Facebook 向けウェブサービスは IE6 に対応すべきか ( 2011年12月の Facebook のブラウザシェア ) - IT戦記

    はじめに みなさん、お元気ですか><リリースも終わって、一息ついたあまちゃんです! ヽ(´ー`)ノわー さて今日は、最近「お花サプライズ!」というサービスをリリースしたのですが、そのときにちょっと面白いデータを見つけたのでそのいきさつも含めて紹介したいと思います。 (今日のテーマはこの円グラフ) フェイスブック系のサービスはどのブラウザに対応すれば良い? よく、ウェブサービスを開発するときの悩みとして「古いブラウザでのデザインをどのくらいケアするか?」というものがあります。 「お花サプライズ!」でも、割と短い期間で実装することを目標としていたり、番の HTML を書いた経験があまりないメンバーが多くいたことで「IE6 や IE7 への対応が鬼門なんじゃないか?」という心配が常にありました。 そこでよぎる甘い誘惑 このご時世、 IE6 とか IE7 に特別対応する必要なんてないんじゃね?

    Facebook 向けウェブサービスは IE6 に対応すべきか ( 2011年12月の Facebook のブラウザシェア ) - IT戦記
  • Macbook (with Snow Leopard) 買った後にやったことまとめ - IT戦記

    購入編 会社にて amachang「秋だけに akky ですね。Macbook が欲しくなってきました」 akky(苦笑) amachang「新しい Macbook が欲しくなってきました」 akky(苦笑) amachang「買って来まーす」 akky(苦笑) Apple Store 銀座にて amachang「Macbook Pro の 13 inch のやつください」 店員「はい。 2 種類ありますが」 amachang「高いほうのやつください」 店員「キーボードは JIS と US どちらにいたすますか」 amachang「US ください」 店員「こちらでよろしいですか?」 amachang「JIS よりキー少ないのですね」 店員「はい。英数キー、かなキーなどがありません」 amachang「えっ」 店員「えっ」 amachang「JIS ください」 店員「かしこまりました」 am

    Macbook (with Snow Leopard) 買った後にやったことまとめ - IT戦記
  • はじめての 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"> <![CDATA[ <script type="text/javacript"> var req = opensocial.newDataRequest(); req.add(req.newFetchPeopleRequest(opensocial.newIdSpec({ userId: 'OWNER', groupId: 'FRIENDS' }), { max: 1000 }), 'friends'); req.send(fu

    はじめての mixi アプリ - IT戦記
  • デフォルトのはてなスター強制置換えグリモンを書きました。

    トラックバックに気が付いた! ということで、 id:amachang さんあたりがグリモンを作ってくれるハズ。他力願でごめんなさい! 色覚異常によるカラースターの色の見え方 - no.10 という訳で書いてみた こんなのが こんな感じになります ソースコード // ==UserScript== // @name Replace star // @namespace http://d.hatena.ne.jp/amachang/ // @include http://* // ==/UserScript== (function() { translate(document.body); document.addEventListener('DOMNodeInserted', function(e) { translate(e.target); }, false); document.add

    デフォルトのはてなスター強制置換えグリモンを書きました。
  • クリックジャッキングの本質的な解決策 - IT戦記

    誰か書いてそうだけど、気にせずに投下 現実的な解決策ではなくて、質的な解決策 クリックジャッキングはそもそも CSS の問題なので CSS の枠組みで解決すればいい。 CSS での解決策 具体的には、以下のルールをユーザースタイルシートに追加すればいい。 * { opacity: 1 !important } CSS2, CSS2.1, CSS3 では、ユーザースタイルシートの !important な宣言は他のどの宣言よりも優先されるはずなので、ちゃんと仕様を満たしているブラウザを使っていれば問題ないはず。 (IE の場合は、 opacity じゃなくて filter を。。というか、オプションで何か filter とか無効に出来た気がするけど、忘れた><) ユーザースタイルシートは、 IE, Firefox, Opera, Safari ほとんどのブラウザで使うことができる。 あと、

    クリックジャッキングの本質的な解決策 - IT戦記
  • Windows IME に関する発見 - IT戦記

    はじめに Windows IME って「半角/全角」で ON OFF をトグルさせるじゃないですか。 あれって不便ですよね。理由としては 今 ON か OFF かを自分で覚えなきゃいけない キーが遠い などです。 で、発見した Shift+「無変換」で OFF。 「カタカナ/ひらがな」で ON。 が出来ることを知った。 このキーを覚えておけば、今 ON でも OFF でも一発で自分の好きな状態に出来るので、便利。

    Windows IME に関する発見 - IT戦記
  • ステップ・バイ・ステップで Pathtraq の API を使ってみよう - IT戦記

    はじめに 「このサイトの人気ページを見たい!」 「このページに、皆いったいどうやって来てるんだろう?」 「このページを見たあとは、どこを見に行ってるんだろう?」 そんなこと思ったことありませんか? Pathtraq API を使うことで、そんな情報をあなたのソフトウェア、ウェブアプリケーションに組込めるようになりました!やった! でも、難しいんでしょ><? 違うよ。全然違うよ。超簡単だよ。 というわけで、今日は JavaScript から Pathtraq API を使ってみましょう! Step 1 Pathtraq API を目で見てみよう! やり方は、簡単です。 http://api.pathtraq.com/pages?url=**ここに調べたい URL** とやるだけです。 試しに、このブログを見てみましょう。 RSS が出力されました。 これは、 IT 戦記内で最近人気のページを

    ステップ・バイ・ステップで Pathtraq の API を使ってみよう - IT戦記
  • ブラウザでお絵描きプログラミング! Processing.js 登場! - IT戦記

    はじめに 今日、 jQuery の作者として有名な John Resig さんが Processing.js という JavaScript のライブラリを公開しました。 John Resig - Processing.js このライブラリを使うと、比較的簡単に以下のようなグラフィックスやアニメーションを書くことができるようになります。 というわけで、公開されたばかりのこのライブラリを簡単な使い方から詳しい使い方までとことん掘り下げてみたいと思います。 Processing.js 概要 まず、 Processing.js とは何かという話をします。 Processing.js とは、ブラウザで Processing というプログラミング言語を実行する JavaScript のライブラリです。 では、 Processing とはどのようなプログラミング言語なのでしょうか。 Processing

    ブラウザでお絵描きプログラミング! Processing.js 登場! - IT戦記
  • CSS の「値」とは何か - IT戦記

    この前 以下のようなエントリを書きました CSS の名前の整理 - IT戦記 今回は CSS における この「value(値)」という言葉の意味、そして曖昧さについて書きたいと思います。 6 つの値 CSS において「値」は曖昧な言葉です。 なので、「値」という言葉を使って CSS の説明をするのは非常に効率が悪かったりします。 たとえば、「ここの値って、 hogehoge の意味の値?」「いやいや、ここの fugafuga の意味の値が piyopiyo なんだよ」というように、まったく無駄な会話が繰り広げられるわけです。 ですので、今日からはちゃんと CSS の「値」をちゃんと説明できるように、「値」に以下の 5 つの名前を付けましょう。 Declared values Cascaded values Specified values Computed values Used valu

    CSS の「値」とは何か - IT戦記
  • 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

    JavaScript-XPath をリリースしました!さあ、あなたも XPath を使おう!(解説付き) - IT戦記
  • IT戦記 - 一行で IE の JavaScript を高速化する方法

    以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -

    IT戦記 - 一行で IE の JavaScript を高速化する方法
    mathatelle
    mathatelle 2007/10/11
    こういう発見はすごいな〜。すごすぎ。これをいかせるのは、どれくらいの規模のサイトなんだろ。というところが気になった。
  • document.title の罠 - IT戦記

    このエントリは一部間違っています。 こちらで訂正いたしました。 http://d.hatena.ne.jp/amachang/20070523/1179928332 いや大したことじゃないんですけど かなりハマったのでメモしときます。 通常ページのタイトルは以下で取れる var title = document.title; alert(title); // タイトルを表示 しかし、コンテンツ内に <div id="title"></div> のように id が title のものがあると var title = document.title; alert(title); // [object HTMLDivElement] となってしまう。 これでかなりはまった まとめ 不特定のページから title を取るような場合は多少めんどくさいけど document.getElementsByT

    document.title の罠 - IT戦記
    mathatelle
    mathatelle 2007/05/23
    id="title"は控える
  • 社内の勉強会をやって、一番うれしいこと - IT戦記

    以下のエントリーがすごく嬉しかった id:yupug:20070413:1176472206 今まで社内勉強会を開いてもこういう反応が返ってきたことは無かった。 今までの社内勉強会の反応 勉強会が終わって「どうだった?理解できた?」と聞いたときの反応がほとんど、これ。 「いやー。レベルが高くてついていけなったっす。」 へりくだる必要なんてないんだよ! 勉強会で「レベルが高くて」なんて言われても全然嬉しくないよ。 それなんて日文化?って感じだよ。 理解するための勉強会だよね?別にただの「イベントのり」じゃないよ。 まず、質問してよ! 分からないなら質問して! あとで、僕のところに来て個人的に質問するんじゃなくて。 いや、それならまだマシなほう。 「あ、ここは僕どうせわかんないし」とか思うんじゃなくて。 質問して! みんなの前で質問して! 勉強会は、みんなの「分からない」を共有する場でもある

    社内の勉強会をやって、一番うれしいこと - IT戦記
  • IT戦記 - CSS の勉強会をしました

    2007 CSS Study Meeting http://artcode.g.hatena.ne.jp/keyword/2007%20CSS%20Study%20Meeting 発表をしましたので資料を置いておきます。 http://usrb.in/amachang/static/cssstudy/200701/ Firefox で動きます。IE でもぎりぎりうごきます。あ、でも、横長な表示域じゃないと崩れる可能性大です。 左右キーで操作してください。また、ソースは実行できるようになってるので、実際に実行しながら読んでいっていただけるとうれしいです。 他に事前に CSS のセレクタのバグリストとプロパティ一覧を作りました。 プロパティ一覧は element.style に辞書アタックを掛けて各種ブラウザから抽出したプロパティです。 http://usrb.in/amachang/stat

    IT戦記 - CSS の勉強会をしました
  • 勉強が出来ない奴はプログラマになれ!(バカだからできる勉強法) - IT戦記

    どのくらいの人がこのブログを読んでいるか分かりませんが、 もし、勉強が出来ない人が周りにいたら、このブログを紹介してあげてください。 ふと 勉強が出来ない人は、プログラマになったほうがいいと思った。 僕はというと 自分でも驚くくらい勉強というものが出来ない。ものごとを知らない。 はっきり言ってバカなのである。 たとえば、 大学行ってない。 株式公開と上場の違いを知らなくて、一同ぽかーん。 つい最近まで、サイバーエージェントを知らなかった。(技術者には必要ない) 英語が一切読めない。 宮崎料理「冷や汁」を「冷や飯」だと思ってた。 基的に会議とかでよく出る英語、「さじぇっしょん」とか、「あさいん」とか、「ぶらんでぃんぐ」とか、「うぇぶつーぽいんとおー」とか、よく分からん。 人力(じんりき)検索を入力(にゅうりょく)検索だと思っていた たぶん、まだまだあるけど、自分がバカだから気がつかないんだ

    勉強が出来ない奴はプログラマになれ!(バカだからできる勉強法) - IT戦記
  • IT戦記 - Prototype.js を使った JavaScript OOP 講座 #02

    社内の勉強会の資料をここに公開していきます。社内の人も社外の人も読んでください。 ※ターゲットは JavaScript は書いたことない、オブジェクト指向言語プログラマ。 ※信念は「教わるのではなく、必死に着いていきませう」 今週はかなりハードボイルドで全身タイツのような忙しさなので、みんなが春を分けて楽しんでいたり、香港に行って楽しんでいる間にせこせこ資料を作っています。 はぁ。 Section 00 Prototype.js の前に JavaScript と DOM とイベントの概要 HTML は読み込まれた後、すべての情報が JavaScript のオブジェクトに変換される。 イメージ的にはこんな感じ <html> <head> <title>タイトル</title> </head> <body> : : </body> </html>↓↓↓ var document = { doc

    IT戦記 - Prototype.js を使った JavaScript OOP 講座 #02
  • 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()

    Prototype.js を使った JavaScript OOP 講座 #01
  • 1