Facebook 向けウェブサービスは IE6 に対応すべきか ( 2011年12月の Facebook のブラウザシェア ) - IT戦記
はじめに みなさん、お元気ですか＞＜リリースも終わって、一息ついたあまちゃんです！ ヽ(´ー｀)ノわー さて今日は、最近「お花サプライズ！」というサービスをリリースしたのですが、そのときにちょっと面白いデータを見つけたのでそのいきさつも含めて紹介したいと思います。 （今日のテーマはこの円グラフ） フェイスブック系のサービスはどのブラウザに対応すれば良い？ よく、ウェブサービスを開発するときの悩みとして「古いブラウザでのデザインをどのくらいケアするか？」というものがあります。 「お花サプライズ！」でも、割と短い期間で実装することを目標としていたり、本番の HTML を書いた経験があまりないメンバーが多くいたことで「IE6 や IE7 への対応が鬼門なんじゃないか？」という心配が常にありました。 そこでよぎる甘い誘惑 このご時世、 IE6 とか IE7 に特別対応する必要なんてないんじゃね？
WebKit サーバーというものを作ってみた - IT戦記
みなさん お久しぶりですヽ(´ー｀)ノ夏休みの宿題終わりました？ 毎日が夏休みの最終日みたいな生活してるあまちゃんです！ さてさて 今日は WebKit サーバーというものを作ってみたので、紹介してみます。 WebKit って何？ WebKit っていうのは Chrome や Safari の中に入ってるブラウザのエンジンのことです！ 実はブラウザっていうのは、エンジン部分と見た目の部分（タブとかボタンとかね）に別れていて、意外と違うブラウザでもエンジン部分は同じものを使ってるってことも多いんですよ(*´ー｀) ブラウザのサーバーってどういうこと？ 要は、サーバーサイドでブラウザを起動して JavaScript を実行したり、 JavaScript が実行されないと読めないページから値を持ってくるのに使ったりしようという魂胆です。 今まではそういうのなかったの？ 実は、今までは JavaS
2010-09-22 - IT戦記
はじめに 今日から、オーマ株式会社の二人目の社員として、オーマ株式会社に入社いたしました。（大事なことなので２回言いました） よろしくお願いいたします。 オーマ株式会社では あのひと検索スパイシー というサイトを作っています。 僕も、これれから SPYSEE の企画、開発、運用、そして、様々なサポート（トイレ掃除とかね！）をやっていこうと思っています。 みなさま、よろしくお願いいたします！ 今日は、僕が「この会社で何をやっていきたいのか」を書いておきたいと思います。 これから何をやっていきたいか 僕がこれから SPYSEE でやっていきたいことは三つあります。 それは、 「運命の出会い」の確率をあげたい！ 人の背景を知ることで、コミュニケーションをもっと楽しくすること アピールが苦手な人（シャイなあんちくしょう）でも損をしない仕組みを作ること です。 これは、あくまでも「今、僕が考えている
サイボウズで学んだこと - IT戦記
はじめに 2010 年 9 月 15 日を持ちまして、サイボウズ・ラボを退職いたしたました。 報告も兼ねて、久しぶりにブログを書いてみたいと思います。 （写真はゆうすけべーさんです） この会社に入って、たくさんの学びと思い出がありました。 その一つ一つをまとめていければ、素晴らしい記事になるのかもしれませんが、僕は文章が苦手です。 ですので、うまく退職のエントリを書き上げることができません。 言葉にできない。そんな感じです。 なので、このエントリはサイボウズ・ラボやサイボウズ本社の仲間たちへのありがとうの気持ちをこめて、自分らしく最後まで JavaScript のことを書きたいと思います。 サイボウズでの最後の仕事 僕にとって、サイボウズでの最後の仕事は「JavaScript で新しいユーザーインタフェースを作ること」でした。 そして、その中で始めて複数人による大規模な JavaScrip
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
hCalendar を使って予定を公開しよう！ - IT戦記
はじめに みなさん、こんばんわ！ さてさて最近のことですが、 Google の検索結果にイベントや予定へのリンクが表示されるようになりましたね！（まだ、英語版だけですけどね＾＾；） ASCII.jp：Google、リッチスニペットでイベントの日時や場所表示に対応 以下のような感じで表示されるみたいです！ ウェブページの中に書かれた「予定」や「イベント」などを Google 先生が理解して表示しているんですね！ この予定やイベントはどうやって探してるの？ Google は hCalendar という形式のデータを読んで、予定やイベントを探しているようです。 というわけで、今日はこの Google が使っている hCalendar というものが「どういうもので」「どうやって活用すればいいか」を実例を交えながら紹介したいと思います。 hCalendar って何？ hCalendar とは「カレン
早速 Go 言語を試してみる！ - IT戦記
はじめに Google から新プログラミング言語 The Go Programming Language が発表されましたね！ というわけで、さっそく試してみたいと思います。 環境は Mac OS X 10.6 インストール さっそくインストール Getting Started - The Go Programming Language を見ながら 環境の準備 ディレクトリを作る amacbook% cd ~ amacbook% mkdir go amacbook% mkdir bin環境変数の設定をする。~/.zshrc に以下を追加 # Go 用 export GOROOT=$HOME/go export GOOS=darwin export GOARCH=amd64 export GOBIN=$HOME/bin export PATH=$GOBIN:$PATH Mercurial を
「ツイート」を「ツイート（笑）」に置換するブックマークレット - IT戦記
【急募】twitterトップページのツイートをツイート（笑）に置換するグリモン notfunc on Twitter: "【急募】twitterトップページのツイートをツイート（笑）に置換するグリモン" というわけで書いてみた javascript:var r=document.evaluate("//text()[contains(., 'ツイート')]", document, null, 7, null);for(var i=0;i<r.snapshotLength;i++)r.snapshotItem(i).nodeValue=r.snapshotItem(i).nodeValue.replace(/ツイート/g, 'ツイート（笑）');void(0); Firefox 系と WebKit 系と Opera 系で動きます。たぶん。 ロケーションバー（URL が書いてあるところ）に貼付
たぶん Flash は無くならない - IT戦記
Flash vs HTML5 という記事をよく見かける OperaのCEO：「HTML 5でFlashは不要になりつつある」 - ZDNet Japan HTML 5はFlashやSilverlightに取って代われるか？ | スラド IT Life is beautiful: 「Flash vs. HTML5」という構図がはっきりと見え始めたぞ、と 楽しいので僕も未来を予想してみる たぶん、 Flash はなくならない。理由は二つ 未来には今では予想できないブームが出現するから Youtube, ニコニコ動画 は無くならないから 未来には今では予想できないブームが出現するから たとえば脳で PC を操作するデバイスが出来たら。 そのデバイスでマウス以上に多彩な操作が、マウスより簡単に出来たら。 そうなると、当然既存の HTML & JavaScript は使いにくいものになる。 ブラウザ
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
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
新はてなブックマーク件数取得 API を使って自分のページに件数を埋め込む最も簡単な方法 - IT戦記
はてなブックマークから新しい件数取得 API が提供されているようです！ (開発者さま向け)はてなブックマーク件数取得APIに新しいAPIを追加 - はてなブックマーク日記 - 機能変更、お知らせなど この API のいいところは JSONP に対応しているところでしょうね！ すばらしい！ というわけで、 HTML だけで、件数を埋め込む例を書いてみたよ！ やり方は簡単 callback パラメータに document.write を指定するだけ！ <script src="http://api.b.st-hatena.com/entry.count?url=http%3A%2F%2Fwww.example.com%2F&callback=document.write"></script>件のブックマークがあります。 あとは、適当にリンクとか張って <a href="http://b.ha
はてブの Web Hook で Twitter を更新する - IT戦記
はてなブックマークの Web Hook というのがリリースされましたね！ (開発者さま向け) はてなブックマーク Web Hook 機能を公開しました - はてなブックマーク日記 - 機能変更、お知らせなど はてなブックマーク Web Hookとは - はてなキーワード これを設定しておくと、自分がはてブしたタイミングではてブ側から CGI 等を叩いてくれます。 CGI から様々なプログラムを起動するようにしておけば、あんなことやこんなことが可能になっちゃいますね＞＜ こ、これはすごい！ ということでさっそく、自分がはてブしたページの URL を Twitter に POST する CGI を書いてみた。 ご自由にお使いください #!/usr/bin/env perl use utf8; use strict; use warnings; use CGI; use Net::Twitter
Firefox 拡張を jQuery で書く！ Jetpack を使ってみた。 - IT戦記
はじめに JavaScript が書ければ、誰でも簡単に Firefox の拡張が書けてしまう。しかも、もれなく jQuery が付いて来る！ というものを Mozilla Labs がリリースしたみたいですね。 https://jetpack.mozillalabs.com/ というわけで 少し触ってみました Jetpack Feature の書き方 Jetpack で書く Firefox 拡張を「Jetpack Feature」といいます。 これは、以下の 2 つのものを用意すれば誰でも簡単に公開することが出来ます。 JavaScript ファイル 公開用 HTML ファイル JavaScript ファイル JavaScript ファイルには、 Jetpack Feature のアプリケーションコードを書きます。 (function() { Jetpack.statusBar.appe
MediaQuery まとめ - IT戦記
Media Query とは CSS3 から導入される Media Type を大幅に拡張する仕様です。 そもそも Media Type とは Media Type とは CSS 2 系に元々ある仕様で CSS を適用するメディア（パソコンの画面、テレビ、プリンタ用紙など）を指定するときに使います。 以下の例だと、 media 属性の中に記述されている all や screen や print が Media Type です。 <link rel="stylesheet" type="text/css" href="共通の.css" media="all" /> <link rel="stylesheet" type="text/css" href="パソコンの画面の.css" media="screen" /> <link rel="stylesheet" type="text/css"
はてなブックマークのコンテンツの JavaScript を高速化する - IT戦記
はじめに 「新はてなブックマーク」になったということで、とっても便利になったのですが、ブックマーク一覧ページ*1が若干 JavaScript に時間が掛かっているみたいです。 というわけで 調査してみたいと思います。調査して、改善できそうなところは後で纏めて「はてなアイデア」にでも登録しようと思います。 この日記は調査しながら、過程を書いていくつもりです。 準備 まずは、人のサイトの JavaScript を書き換えて試してみるための環境を作ります。 作業用ディレクトリを作る とりあえず、ホームに HatenaJS というディレクトリを作ります。 $ mkdir HatenaJS $ cd HatenaJS CocProxy をダウンロードしてくる 以下から CocProxy というツールをダウンロードしてきます。 http://coderepos.org/share/wiki/CocPr
Wordpress って Gears でホントに速くなったの？？ - IT戦記
とりあえず Wordpress のインストール Mac の初期設定を前提に話します あ、僕初めて wordpress インストールする（ & PHP の経験も少ない）のでセオリーと違う可能性大です＞＜ PHP モジュールの読み込み $ sudo vim /etc/apache2/httpd.confApache の設定ファイルに以下の行を追加 LoadModule php5_module libexec/apache2/libphp5.so で適当な場所に wordpress のリポジトリのコードをコピー $ cd ~/Sites $ svn co http://svn.automattic.com/wordpress/trunk/ wordpress A wordpress/wp-pass.php A wordpress/wp-rss.php A wordpress/wp-comment
MacPorts でダウンロード先のミラーが重くて先に進まない場合の対処方法 - IT戦記
（追記）ここで書かれた方法よりも順等な方法があるようです 詳細は以下の記事を見てください。 MacPorts でダウンロード先のミラーが重くて先に進まない場合のまっとうな対処方法 - otsune's SnakeOil - subtech 一般的な MacPorts でのインストール方法 以下のようにしますよね。たとえば mysql5 のインストール。 $ sudo port install mysql5 ---> Fetching mysql5 ---> Attempting to fetch mysql-5.0.51a.tar.gz from http://mysql.mirrors.pair.com/Downloads/MySQL-5.0/Attempting to fetch ... という部分はミラーからダウンロードしてきてるんですが、ここが中々終わらないことってよくありません？
(function(){})() と function(){}() - IT戦記
自分用メモ // JavaScript でクロージャを書くときこう書く事が多い (function() {})() // 何故なら // function() {}() // と書くと // function() {} が式ではなく、文として解釈されてしまうからだ。 // 文として解釈されないためには、文の途中（最初以外）に function と書いてやる必要がある // なので、まず開きカッコを書いてやる。 ( // の後に function() {} // と書いてやると function は式になる ) // 正確には、カッコの対は The Grouping Operator という演算子である。 // カッコ以外にも var a = // のように代入演算子のあとでもいい function() {} // つまり、以下のような記述も可能である。 var b = function()
Firebug に一行追記して右クリックで XPath をコピペ出来るようにする。 - IT戦記
この XPath 使いたい＞＜ って思うことよくありませんか？ サイト見てて、あ、このボタンにグリモンであんな機能やこんな機能付けたい＞＜！って思うこととかありますよね！ そんなときに、いちいち要素の位置とか考えずに右クリックで XPath をコピペできたら嬉しいですよね＞＜ ってことで 作ってみた イメージはこんな感じです。 これをクリックすると、右クリックされた要素の XPath がクリップボードにコピーされます。 この機能を Firebug に実装する手順 1. Firefox のプロファイルディレクトリに行く 環境 プロファイルディレクトリ WinVista C:\Users\[ユーザ名]\AppData\Roaming\Mozilla\Firefox\Profiles\[ランダムな文字].default\ WinXP C:\Documents and Settings\[ユーザ名
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
