6 年間の起業を終えて - IT戦記
スマートニュースの社員になりました 皆様、お久しぶりです！約 7 年振りにこのブログを書いています。 元気にしてましたか？僕は元気です。 実はこの 6 年間 id:mizzusano とカクテル株式会社という会社をやっておりまして、先日のプレスリリースにもあったようにこの度会社ごとスマートニュースにジョインすることになりました。 UUUM に遊びに（？）行ってはしゃぐ僕と id:mizzusano そこで今日は振り返りも兼ねて、以下の 3 点について、この 6 年間考えていたことを書いて見たいと思います。 事業アイデアより大切なこと 起業家が健康的に働く方法 プログラマーが起業するということ 少しでもこれから起業したい人のお役に立てればと思っております。 事業アイデアより大切なこと 6 年間の事業を振り返えると失敗の連続でした。その中で、事業そのもののアイデアより共に起業するメンバーが大切
Facebook 向けウェブサービスは IE6 に対応すべきか ( 2011年12月の Facebook のブラウザシェア ) - IT戦記
はじめに みなさん、お元気ですか＞＜リリースも終わって、一息ついたあまちゃんです！ ヽ(´ー｀)ノわー さて今日は、最近「お花サプライズ！」というサービスをリリースしたのですが、そのときにちょっと面白いデータを見つけたのでそのいきさつも含めて紹介したいと思います。 （今日のテーマはこの円グラフ） フェイスブック系のサービスはどのブラウザに対応すれば良い？ よく、ウェブサービスを開発するときの悩みとして「古いブラウザでのデザインをどのくらいケアするか？」というものがあります。 「お花サプライズ！」でも、割と短い期間で実装することを目標としていたり、本番の HTML を書いた経験があまりないメンバーが多くいたことで「IE6 や IE7 への対応が鬼門なんじゃないか？」という心配が常にありました。 そこでよぎる甘い誘惑 このご時世、 IE6 とか IE7 に特別対応する必要なんてないんじゃね？
はてなブックマークのコンテンツの JavaScript を高速化する - IT戦記
はじめに 「新はてなブックマーク」になったということで、とっても便利になったのですが、ブックマーク一覧ページ*1が若干 JavaScript に時間が掛かっているみたいです。 というわけで 調査してみたいと思います。調査して、改善できそうなところは後で纏めて「はてなアイデア」にでも登録しようと思います。 この日記は調査しながら、過程を書いていくつもりです。 準備 まずは、人のサイトの JavaScript を書き換えて試してみるための環境を作ります。 作業用ディレクトリを作る とりあえず、ホームに HatenaJS というディレクトリを作ります。 $ mkdir HatenaJS $ cd HatenaJS CocProxy をダウンロードしてくる 以下から CocProxy というツールをダウンロードしてきます。 http://coderepos.org/share/wiki/CocPr
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
みなさん、こんにちは お元気ですか？僕は元気です。 さて 最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー？？とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す
フェイスブックが面白い - IT戦記
フェイスブック楽しい！ はじめに みなさんこんにちは！フェイスブックしてますか？ ゆうすけべーが書いているように、最近本当にフェイスブックがおもしろいなーと感じます。 ゆーすけべー日記 というわけで、一人で使っていたときから人が増えてきたときまでの雰囲気を思い出しつつ、僕が感じているフェイスブックのおもしろさ、特徴、楽しみ方などを紹介していけたらと思います。 ちょっと長くなっちゃいますけど、よろしくお願いします！ フェイスブックの一番の面白さは「速さ」 僕が感じているフェイスブックの良さは、一言で言ってしまえば「コミュニケーションの速さ」なんだと思います。 速さと言っても、システム的な速さだけではなくって「コミュニケーション」の速さです。 フェイスブックの「コミュニケーションの速さ」は主に以下の３点にあると思っています。 「左下」の通知が素早い 書き込むより早く「いいね！」が伝わる 「一緒
サイボウズで学んだこと - IT戦記
はじめに 2010 年 9 月 15 日を持ちまして、サイボウズ・ラボを退職いたしたました。 報告も兼ねて、久しぶりにブログを書いてみたいと思います。 （写真はゆうすけべーさんです） この会社に入って、たくさんの学びと思い出がありました。 その一つ一つをまとめていければ、素晴らしい記事になるのかもしれませんが、僕は文章が苦手です。 ですので、うまく退職のエントリを書き上げることができません。 言葉にできない。そんな感じです。 なので、このエントリはサイボウズ・ラボやサイボウズ本社の仲間たちへのありがとうの気持ちをこめて、自分らしく最後まで JavaScript のことを書きたいと思います。 サイボウズでの最後の仕事 僕にとって、サイボウズでの最後の仕事は「JavaScript で新しいユーザーインタフェースを作ること」でした。 そして、その中で始めて複数人による大規模な JavaScrip
IE で、透明なオーバーレイ要素に mouseover 、 mouseout イベントが発生しない - IT戦記
はじめに IE では透明なオーバーレイ要素のマウスイベントのハンドリングがおかしい たとえば 以下のページで表示されている要素には透明な div がオーバーレイされています。そして、その要素に mouseover が発生すると背景を青くしています。 試してみてください。 IE では、想定の挙動ができていないことが分かると思います。 http://amachang.sakura.ne.jp/misc/mouseoutover/ ソースコードは以下。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> <style> p { border: solid 10px gray; background: pink; padding: 10px; margin: 10px; line-height: 2; }
要素が 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
JavaScript OOP におけるクラス定義方法 - IT戦記
クラスを定義する方法です。考え付くだけでも、これだけたくさんの方法があります。やっぱり、 JavaScript って柔軟であり複雑な言語ですね。 ちなみに、以下のすべての例はこのクラスを定義しています。 ちなみに、僕は一番下の書き方ですね。 皆さんはどのようにプログラミングしていますか？ プロトタイプを使わない。クロージャを使う。 // プロトタイプを使わない。 // クロージャを使う。 function Item(price) { this.showPrice = function() { alert(price); }; } プロトタイプを使わない。クロージャを使わない。 // プロトタイプを使わない。 // クロージャを使わない。 function Item(price) { this.price = price; this.showPrice = function() { aler
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
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
IT戦記 - JavaScript を学ぶ際に一番重要なのに、誤解されがちな setTimeout 系の概念
おそらく、JavaScript を使いこなす肝は setInterval、setTimeout、イベントによる関数の実行を理解することだと思う 例えば 次のコードの結果を考えたとき document.write("hoge\n"); setTimeout(function(){ document.write("fuga\n") }, 1000); document.write("piyo\n");普通に JavaScript を使いこなしてる人なら、hoge → piyo と表示して、 1 秒後に fuga が表示されるな。って思うはずなんです。 でも、 JavaScript を始めたばっかりの人の中には、 hoge と表示したあと 1 秒後に fuga → piyo と表示するな。って思ってる人が非常に多い。(経験的に) 何故か？ たぶん、どのサイトの setTimeout の説明を見て
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
Windows の基本的なコマンド集 - IT戦記
まずは、コマンドプロンプトの基本的な部分を使えるようにならないと。。ということで nul ファイル Unix の /dev/null のようなもの サイレントにコマンドを実行 > verbose-command > nul 空のファイルを作る > type nul > hoge.txtこーんな感じでコピーができる 環境変数 PATH 、 PATHEXT PATH という環境変数にディレクトリを登録しておくと、そのディレクトリ内の実行ファイル（環境変数 PATHEXT で指定された拡張子を持ったファイル）がファイル名だけで実行できるようになります。 PATHEXT に .TXT を指定してみる 以下のようにすると .txt に関連付けられたアプリケーション（メモ帳）で、 hoge.txt が起動する。 > type nul > hoge.txt > set PATHEXT = .TXT >
JavaScript 内で無圧縮 ZIP を作って Data URI を生成するライブラリを作りました - IT戦記
ちょっと思うところあって JavaScript 内で、複数のファイル情報を作って Zip で固めて、 Data URI を生成するライブラリを作ってみました。 ソースは以下の zip.js です。 http://svn.coderepos.org/share/lang/javascript/Zip/ 使うには 以下の base64.js が必要です。 http://svn.coderepos.org/share/lang/javascript/Base64/trunk/ この base64.js は弾さんが作ったものです。 今回 Zip で使うように、ちょっとチューニングさせていただきました。 こんなことができます // zip オブジェクトを作る var zip = new Zip; // 文字列をファイルとして追加する zip.addString('Hello, world!!', '
C++ のコードを Flash Player で動かす！ Alchemy を速攻試してみる。 - IT戦記
はじめに Adobe から C/C++ で書いたコードを Flash や AIR で動かす Alchemy というものがリリースされましたね！ Alchemy - Adobe Labs これはすごい！ということで、少し試してみたいと思います。 その様子をリアルタイムに書いていきます。ちゃんと出来るかな 環境 OS は Mac OS X で gcc 、 java は入っているものとします。 ホームディレクトリ（/Users/amachang）に AlchemyTest というディレクトリを作って作業します。 インストール まずは、いろいろインストールします。 Flash Player 10 Debugger Version Adobe Flash Player - Debug Downloads ここからダウンロードしてきて、普通にインストールします。 Flex SDK 以下から Flex
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 この関数の中では、到着した文字の文字コードを解
Safari4 と IE8 で実装された DOM Storage とは何か - IT戦記
はじめに 皆様 JavaScript のスピード競争が激化し、 ECMAScript 3.1 の仕様の策定が進むなど、激動の JavaScript 時代をいかがお過ごしでしょうか。 さて今日は、今、ちまたで大ブレイクの兆しを見せている DOM Storage という仕様を紹介したいと思います。 DOM Storage とは何か まず、 DOM Storage とはどんなものなのでしょうか。 とても簡単に言ってしまえば、とてもたくさんのデータが保存できてサーバーに自動で送られない Cookie みたいなものです。 さらに、 Cookie とは違って JavaScript からとても扱い易く作られています。 では、この DOMStorage の具体的なソースコードを見てみましょう。 <!DOCTYPE html> <html> <head><title>DOMStorage の使い方</tit
次の JavaScript の仕様はこうなる！ ECMAScript 3.0 から 3.1 への変更点まとめ - IT戦記
はじめに JavaScript の標準仕様である ECMAScript 3rd Edition (ECMAScript 3.0) が 9 年ぶりにバージョンアップしようとしています。 実は、これまでも様々なバージョンアップの案が上がっては消え、また上がっては消えていました。 しかし、今回のバージョンアップには今までと違う点が一つだけあります。 それは、現時点での主要な ECMAScript インタプリタ（JavaScript の実行エンジン）を作っている全団体（以下を参照）がこの仕様に同意したことです。 Mozilla (Firefox) Apple (Safari) Microsoft (Internet Explorer) Opera (Opera) Adobe (Flash) Yahoo (Yahoo Widget) Google この同意は JavaScript のこれからを大きく
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IE9 できる／できない系 - IT戦記
