こんにちは。すぎゃーん(@sugyan)です。 先日、Nakamap APIを公開しましたが、今回はそれをJavaScriptから使うためのライブラリを用意してみましたので紹介させていただきます。 使い方 <script type="text/javascript"http://developer.nakamap.com/js/nakamap.js"></script> とscriptを読み込むことで使用できます。 access_tokenが既に取得できていれば、 var client = new Nakamap.Client({ token: '*********' }); /* REST API */ client.get('/me', function (result) { console.log(result); }); /* Streaming API */ client.lis

入社4年目にもなってtech.kayac初登場のせいです。 ブログ書けプレッシャーにとうとう屈する時がきました。 これで夢にkyo_agoが出てうなされなくてすみます。(彼はtech.kayacの尻たたき担当でした) 先々月「ぼくらの甲子園!熱闘編」というゲームをモバゲー内にてリリースしました。 これは去年リリースした「ぼくらの甲子園!」の続編です。 モバゲーユーザの方、是非遊んでみてください。 今回はこの「ぼくらの甲子園!熱闘編」がどういうインフラ構成になってるか紹介したいと思います。 注) 題名に「カヤック流」とはつけましたが、カヤックでは多様性を善としている風潮があり、 ゲームによってインフラの構成が違うどころか、利用しているプログラミング言語すら違います。 なので全てのゲームがこのような構成になってるわけではありません。 前提 今回のインフラ構成を決めるに至って考慮した点は「ラクに

Mac Book AirにWindows7を入れて常用しています。ago（@kyo_ago）です。 先週、HTML5とか勉強会、Mozilla勉強会と発表を行って来たので、その時使った資料を紹介したいと思います。 HTML5とか勉強会 HTML5とか勉強会ではJSクイズゲームの作り方（HTML5実力テストの紹介）と題して15分の発表を行いました。 （ただ、最後は結構時間が余ってしまいました。。。） ちなみにJSクイズゲームの作り方（HTML5実力テストの紹介）ではHTML5実力テスト開始1週間時点での平均点を紹介しています。 （HTML5実力テストに関してすでにご存じの方は10Pくらいまで飛ばしてご覧ください） Mozilla 勉強会＠東京 6th Mozilla 勉強会＠東京 6thではjQueryで破棄されたrequestAnimationFrameとJSでのアニメーション実装で注意す

※この記事はnginxの現時点での最新stable 0.8.54を使っています。 2回目の投稿になります、sugyanです こんにちは。 最近、jsdo.itでちょっとしたAPIを作ってみているのですが、連続で大量のリクエストが来るのはちょっと困るので、防御策としてnginxのリクエスト制御モジュール"HttpLimitReqModule"を導入してみることにしました。 http://wiki.nginx.org/HttpLimitReqModule 何も設定しない場合 まずは普通のnginx設定でhttpサーバを立ち上げて、動かしてみます。 worker_processes 1; error_log logs/error.log info; events { worker_connections 256; } http { log_format test '$remote_addr -

こんにちは。 カヤック自転車部盛り上げ担当でおなじみのaragaです。 自転車好きの方は是非一緒にヤビツ峠を登りましょう 今回は、いつか公開しようと２年間暖め続けていた、携帯サービスのFlashLite動的生成についてお話しします。 携帯サービスのFlash合成技術は、スマートフォンブームの普及により、この先の寿命は長くない技術かもしれません。しかし、モバゲーやGREEのガラケーソーシャルゲームの人気により現在進行形では最も熱い分野とも言えます。 今回はPHPライブラリの公開と、動的生成でできることの紹介をさせていただきます。 もし、携帯コンテンツのFlashで技術的に諦めて困っている人がいたら、少しでも参考になれば幸いです。 その前に､全ての機能を説明する為に、今回サンプルとして使用したサービスを簡単に紹介させてください。 ポケットフレンズコンチ 愛をモチーフにした可愛いペットのきせかえ

マンガ名刺を心待ちにしている nagata (@handlename) です。 今回は IRC proxy の tiarra を SSL で使う方法を紹介したいと思います。 tiarra って？ サーバーに常駐するIRCクライアント兼サーバー、とでも言えばいいのでしょうか。 IRC使う人にとっては割と常識っぽいアプリケーションみたいです（ぼくは最近知りました）。 通常IRCは接続している間の発言しか見ることができません。 が、サーバーにクライアントを常駐させ、 そのクライアントに対してローカルのクライアントを接続することによって、 ローカルなクライアントから接続していない状態の発言も拾うことができるようになります。 SSL 接続したい！ 便利な tiarra なのですが、いまのところ SSL 接続をサポートしていません。 SSL で接続できないと・・・ IRC の発言は平文でやりとりされる

弁当生活始めました。agoです。 以前のjavascriptの開発はサーバサイドと同じPGが開発することが多く、機能をファイル単位で分割してそのページで必要なファイルのみを読み込むと言うことが行われていました。 ただ、最近はサーバサイドとクライアントサイドの分業が進んだことや表示速度の兼ね合いもあり、単一ファイルに全体を記述しサーバサイドでは全ページでその一ファイルのみを読み込むような形になることが多いです。 単一ファイルの利点としてはサーバサイドの実装に依存せずに任意の機能を追加できることがありますが、欠点として機能毎の切り分けが難しくなると言う点があります。 jQueryを使用して$('.selector')で切り出す方法もありますが、マークアップの全体像を正確に把握できていないと不要なページで間違って実行されてしまう危険性もあります。 そこで、以下のようなJSを先に読み込み、各URL

最近味付けたまご作りにこってます。ago（@kyo_ago）です。 先日mixiアプリで使用しているGoogle AnalyticsのPVを別の計測数と比較する機会があり、その際Google Analytics側の数字が非常に小さく出ていることに気づきました。 そこで調査したところ、IEはドメインが違うクッキーを送らない仕様があり、そのためmixiアプリでは以下のような方法ではIEユーザのPVをカウントできないようです。 <Module> <ModulePrefs author_email="ago@kayac.com"> <Require feature="analytics" /> </ModulePrefs> <Content type="html"><![CDATA[ <script type="text/javascript"> _IG_Analytics('<ID>', '<仮

羊毛布団を洗濯機にかけられないことを知りました。ago（@kyo_ago）です。 意外と知られていない機能が多い！？Firebugの使い方を見て、プログラマ向けも欲しくなったので書いてみました。 1. ショートカット一覧 以下のページでFirebugのショートカット一覧が公開されています。 http://getfirebug.com/wiki/index.php/Keyboard_and_Mouse_Shortcuts 取り合えず以下の二つだけでも覚えておくと効率的かもしれません。 F12でFirebugの有効、無効の切り替え 広いコマンドラインモード時にCtrl+Enterでコードを実行 また、以下のメニューからショートカットの変更も行えるので、他の拡張等とショートカットがかぶった場合でも別のキーで使用することが出来ます。 2. Firefox本体のツールバーに「要素を調査」ボタン Fi

週末はオレ標準JavaScript勉強会のUstreamを眺めてました。ago（@kyo_ago）です。 以前jQuery使いが陥りやすい罠の中で「4 何でも一行で書こうとする」という点を上げたのですが、以下のようなmethodを定義することでmethod chainのデバッグが楽になるので紹介したいと思います。 $.fn.p = function (id) { var arg = [this]; if (id) arg.unshift(id); if (!window.console) return this; var c = window.console || { 'log' : function () {} }; (c.debug || c.log).apply(c, arg); return this; }; 具体的な使い方ですが、以下のように確認したいmethodの後に.p()を

はじめまして。新入りのnagataです。 入社式で自転車乗ってた野郎です。 先輩方から「ブログ、書いてね！」とのお達しがあったので、 日報で書いたらウケがよさげだったcanvasのことについて書いてみようと思います。 ※各種サンプルはMac上のSafari4.05、Firefox3.6.3、Chrome5.0で動作を確認しています。 canvasってなんぞ？ 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル（かつ動的な）表現が行えるわけです。 とりあえずつかってみる 早速何か描いてみましょう。 こういうことは実践あるのみです。 処理にはJavascriptを使います。 canvasに描画を行うときは、canvas要素からcontextを取得して、

週末料理をしていて足を切ってしまいました。agoです。 以前Perlは書いていたんですが、その頃以下の記事を読んで非常に感銘を受けました。 Perlプログラマのレベル10 - Perlプログラミング救命病棟より - naoyaのはてなダイアリー 当時あまりコミュニティとのつきあいがなかったので、「自分のスキルの絶対位置」、「次のレベルへ行くために必要なもの」を知ることで非常に安心感を感じた記憶があります。 いま確認したところ、「JavaScriptプログラマのレベル10」はないようなので書いてみました。 Perlプログラマ Schemeプログラマ Rubyプログラマ （本家に直接リンクできるURLが無かったため、参照ページへリンクしています） haskellプログラマ 堕落したCプログラマ HTML知識レベル プログラマレベル 企業法務 JavaScriptの業務スキルレベル　判別表　（５

夏休みはタイ古式マッサージセミナーに参加してきました。agoです。 先週日曜日若手IT勉強会に参加させていただき、jQueryのコードリーディングを行ってきました。 そこでjQueryのコードを読むときの基礎知識に関して簡単にまとめてみたいと思います。 1 変数の複数同時宣言と代入 まず、JSでは変数の宣言は以下のような形式で行います。 var hoge; この場合は単一の変数の宣言ですが、以下のような記述を行うと複数の変数を同時に宣言することが可能です。 var hoge, huga; また、変数宣言と同時に値の代入を行うことも可能で、その場合以下のような記述になります。 var hoge = 'test'; さらに複数の変数宣言と、値の代入は同時に行うことが可能で、その場合以下のような記述になります。 var hoge = 'test1', huga = 'test2'; jQuery

outputz でいまだに1位になれたことがない村瀬です。 社内で開発をスムーズにするための tips 集を紹介したので、まとめておきます。 記事ではデモができないので便利さが伝わらない物も多いですが参考になれば幸いです。 screenとかzshとか便利だよ！と言う話は社内ではさんざんしているのでありません。 また、OSX 限定の内容もあります。 でははじめましょう。 keychain keychain と言っても OSX の KeyChain ではなく、コマンドラインのツールです。 これは ssh-agent をより便利にするためのラッパーです。これを使用すると ssh の秘密鍵のパスワードを一度入力するとあとはパスワードなしで ssh 接続できるようになります。 「同じこと二回も言わせんな！」といつも切れているような人は導入すると良いでしょう。 使い方は $ keychain ~/.s

会社から駅まで2分を切れるようになりました。agoです。 先日社内で行った勉強会の資料を公開したいと思います。 Prototyperに贈るjQuerystからの手紙 内容は以下の通りです。 Prototype.jsとjQueryの差異 jQueryの考え方 よりよいjQueryの使い方 カヤックでは勉強会に参加経験の豊富な技術者を募集しています！ （2009-05-14 肝心の資料のURLが間違っていました。申し訳ありません）

社内で唯一（？）の8 tab派。agoです。 suzunari.js、sisso.jsと、最近いくつかJSのライブラリを公開する機会があったので、そのとき使ったライブラリを作るときに便利なコードを紹介したいと思います。 1 script tagからのパラメータ読み込み 外部からの指定によりライブラリ内の動作が変わる場合、script tagから値を指定できると設定のための記述要素を減らすことができます。 （ファイル名を静的に指定している理由に関しては「最後のscript tagの取得方法」をご覧ください） <script type="text/javascript"http://example.com/path/script_file_name.js#param1=value1&param2=value2"></script> var param = (function (file_nam

DAHONのBoardwalkを修理しようとしておもいっきり壊してしまいました。agoです。 普段はjQueryをメインで使用しているのですが、使っていていくつか注意すべき点があったのでまとめてみました。 （一部jQueryではなく、DOMの仕様上の制限も含まれています） 1 $().filterにstring以外のものを渡すとエラー 1.4系では修正されていました $().findや$().notは大丈夫ですが、$().filterの場合引数にjQuery objectや配列、html elementなどを渡すとエラーになります。 （たとえばjQuery objectを渡した場合、Firefoxでは「TypeError: t.substring is not a function」というエラーが発生します） 確認する ちなみに、$().findや$().notはstring以外も渡せるた