完璧な結婚の挨拶をするために本気で準備をしていたら、いつの間にかマネキンにプロジェクションして仮お義父さんを作っていた話 - KAYAC engineers' blog
こんにちは。カヤックOP事業部デザイナーのちゃんちーです。 ※右です 突然ですが皆さん、人生、やっていますか？ かれこれ社会人5年目になり、 Instagramを開けば結婚、出産、子育て...、 Twitterを開けばご報告、ご報告、ご報告...、 これらを見るたびに、「みんな人生やってるなぁ.......」と思うわけです。 ……さて、そんな人生やっていきを感じる27歳の僕も、 ついに先日付き合っていた彼女と婚約し、 結婚までもうすぐというところまで人生をやっていきしている最中でございます。 ......しかし、そんな中で一つ心配なことがあります.....。 それがこちら…… 親への挨拶が怖い！！！ ……そう、婚約をし、結婚をするには、親へ挨拶をしなければならないのです。 が、人見知りかつ、緊張しいな自分が、 無事に許しをもらうことができるのかどうかが不安で不安でたまりません。 怖くて怖く
Terraform管理されたステージング環境・本番環境の差異を検出したくて頑張っている話 - KAYAC engineers' blog
SREチームの橋本です。今回はステージング環境の運用でありがちな本番との差分に対処する試みを紹介します。 背景 ステージング環境について、例えばIT用語辞典では ステージング環境とは、情報システムやソフトウェアの開発の最終段階で検証用に用意される、実際の運用環境と変わらない環境のこと。 と説明しています。検証用ですから、インフラ面で言っても本番環境となるべく一致した構成であってほしいということになります。 しかし実際にはさまざまな経緯（ステージング環境を後から立てたり！）から、たとえTerraform管理していたとしても差異が発生してしまうことがあります。 こうしたとき、その差異を検出する一つの方法としてはTerraformの.tfファイルを比較することですが、これにもいろいろな書き方がありえます。 例えばaws_db_proxy_endpointはterraform-provider-a
マルチテナントなサービスにおける認証と権限管理 - KAYAC engineers' blog
こんにちは！技術部の小池です。 この記事は Tech Kayac Advent Calendar 15日目の記事です。気付いたらもう12月も半分じゃないですか…もう今年の営業は終わりにしてお酒飲んで年越しを迎えたい気分ですね〜。 今回はマルチテナントなサービスにおける認証と権限管理についてのお話です。 要件 今回お話するサービスはカヤックグループ全体に提供する予定のマルチテナントのサービスです。カヤックの文化を支える 360度フィードバック、スマイル給 などの複数のサービスが協調して動作するというサービス指向的なアーキテクチャで、既存のカヤック社内サービス群のリニューアルプロジェクトでもあります。 カヤックグループ向けに提供するサービスなので、認証をしないことには利用することはできません。また、カヤックの社員が他のグループ会社の情報を見れてしまうというのも困ったことになってしまうので、組織
分散環境でユニークなidを発番するGo製プロダクト「katsubushi」のご紹介 - KAYAC engineers' blog
Lobiチームの長田です。 今回はkatsubushiというアプリケーションを紹介します。 https://github.com/kayac/go-katsubushi katsubushiはid発番を行うアプリケーションです。 水平分割されたデータベースに対してユニークなidを発番するために作られました。 なお、本記事中の「データベース」はMySQLを指します。 katsubushiの特徴 Snowflakeと同様のアルゴリズムでid発番 SnowflakeはTwitter社がかつて公開していたid発番アプリケーションです。 https://github.com/twitter/snowflake/tree/master 既にメンテナンスされておらず、masterブランチにはその旨が書かれたREADMEしか残されていません。 タグが切られているので、ソースコード等はそちらで確認できます。
jQueryのCSSセレクタAPIを高速に扱う方法 - KAYAC engineers' blog
最近Androidとの抗争が激化しているago（@kyo_ago）です。 jQueryはCSSセレクタを多用する特徴がありますが、jQuery内では実行ブラウザやCSSセレクタの記述によって呼び出されるブラウザAPIが変わり、それによって実行速度にも影響が出ます。 この記事では「セレクタAPIとはなにか」、「CSSセレクタの記述によって呼び出されるセレクタAPIの種類」、「高速なセレクタAPIを使用するための方法」、「高速なセレクタAPIが使われるかどうか確認する方法」などを紹介したいと思います。 （※この記事はJavaScript Advent Calendar 2011 (フレームワークコース) : ATNDの1日目の記事です） セレクタAPIとはなにか セレクタAPIとは「#hoge .huga」のようなCSSセレクタから、DOM上に存在する要素を取得するためのAPIです。 jQue
JavaScriptによるcross domain & streamingなAPIアクセスの方法色々 - Nakamap APIの場合 - - KAYAC engineers' blog
こんにちは。すぎゃーん(@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
カヤック流ソーシャルアプリの作り方 インフラ編 - KAYAC engineers' blog
入社4年目にもなってtech.kayac初登場のせいです。 ブログ書けプレッシャーにとうとう屈する時がきました。 これで夢にkyo_agoが出てうなされなくてすみます。(彼はtech.kayacの尻たたき担当でした) 先々月「ぼくらの甲子園!熱闘編」というゲームをモバゲー内にてリリースしました。 これは去年リリースした「ぼくらの甲子園!」の続編です。 モバゲーユーザの方、是非遊んでみてください。 今回はこの「ぼくらの甲子園!熱闘編」がどういうインフラ構成になってるか紹介したいと思います。 注) 題名に「カヤック流」とはつけましたが、カヤックでは多様性を善としている風潮があり、 ゲームによってインフラの構成が違うどころか、利用しているプログラミング言語すら違います。 なので全てのゲームがこのような構成になってるわけではありません。 前提 今回のインフラ構成を決めるに至って考慮した点は「ラクに
nginxのHttpLimitReqModuleを試してみる - KAYAC engineers' blog
※この記事は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 -
今日から始めるCoffeeScript - KAYAC engineers' blog
こんにちは。毎年花粉症になりかけている飯塚です。 最近のNode.jsの普及などによってサーバサイドJavaScript界隈が盛り上がっています。 そんなホットなJavaScriptをラクにかつエレガントに書くためのCoffeeScriptという言語をチュートリアル風に紹介します。 何かしらのライブラリを自分で書く程度にJavaScriptで開発している人は絶対に使ったほうがいいと思います。 JavaScriptを知っていれば1-2時間程度で十分駆使できるようになります。 （2011/6/28：@m_satyr様にご指摘頂いた箇所を修正しました。） 目次 CoffeeScriptとは？ インストール Hello World 構文 関数 変数展開 Objectの生成 ループ 存在チェック ヒアドキュメント thisのバインド クラス 無名関数 {var} Tips ?の使い分け 存在チェック
AmazonのMySQLホスティングサービス RDSの利点と欠点 - KAYAC engineers' blog
こないだ初めてスノボ体験しました。agoです。 弊社ではAmazon Web サービスを利用してmixi、モバゲーアプリを提供していますが、その中でも今日はRDS（MySQLホスティングサービス）の利点と欠点を紹介したいと思います。 利点 設定が容易 my.cnfを設定せずとも各instance classに合わせて各種パフォーマンス項目が設定済みのため、設定を変更せずとも使用開始時からある程度の性能を出すことが可能です。 AWSのSecurity Groupsと連携できる EC2 instanceはサーバ負荷によって台数が増減するため、通常のIP制限では台数を変更するたびに制限するIPを変更する必要があります。 これに関しては通常のEC2 instanceでMySQLサーバを立てるときにも専用のSecurity Groupを用意することで連携は可能ですが、RDSの場合、RDSを使用してい
instagramAPI公開！OAuth触りました - KAYAC engineers' blog
ついに21歳になりました！itaniです。 みなさん！！ つい先日、iPhoneで気軽に写真を共有できるサービス「instagram」のAPIが一般公開されましたね。 というわけで、さっそくOAuthを触ってみたので自分なりにまとめてみました。 なにができるの？ instagramAPIを使えば以下のようなことが簡単にできます。 ユーザー情報を取得 ユーザーの写真を取得 写真に対してコメントやいいねを投稿する フォローしている人、フォローされている人を取得 上で挙げたものはほんの一例です。 まだ調査不足ですが、リアルタイム系のAPIも用意されています。面白そうですよね。 OAuthってなんだ！？ 最近twitterやfacebookでよく聞く『OAuth認証』という言葉。 果たしてこれはなんなのか。お願いしますgoogle先生。 OAuth (オー オース) は、ブレイン・クックとクリス・
jQuery.stopのjumpToEnd引数が便利すぎてやばい（JavaScript Advent Calendar 2010 5日目） - KAYAC engineers' blog
JavaScript Advent Calendar 20105日目のago（@kyo_ago）です。 jQueryのソースを眺めててjQuery.stopに引数があることに気づいたので調べてみました。 まず、簡単なスライドダウンメニューを作ってみたいと思います。 jQuery.stop 1 - jsdo.it - share JavaScript, HTML5 and CSS JS部分は以下の通りです。 $(function () { $('div').hover(function () { $(this).find('ul').slideDown(); }, function () { $(this).find('ul').slideUp(); }); }); 少し触ると分かると思いますが、マウスがmenuから外れた後も何度も.slideDown、.slideUpが実行されるため非常に
vimプラグインでよりよいコーディングを - KAYAC engineers' blog
こりなくvimプラグインの紹介をします。北原（@soh335）です。 たかが、エディタですがプログラムを書く際には一番触っている道具です。イチローも道具は大切にすることが重要と言ってますし、メンテナンスしながら良い状態にしておきたいですね。 今回はvimプラグインの管理、プログラム書く自体には関係ないけど便利なプラグイン、実際にエディタを使っている際に便利なプラグインの紹介をします。 vimプラグインの管理 vim-pathogen http://www.vim.org/scripts/script.php?script_id=2332 vimプラグインは、windows環境はで$HOME/vimfiles/、mac等では$HOME/.vimのディレクトリの下にインストールしていきますが様々なプラグインを一つのディレクトリにいれると のようになり例えばこのプラグインが更新されたのでアップデ
.emacs分割のすゝめ - KAYAC engineers' blog
最近ロードバイクを買いました。nagata（@handlename）です。 前回、安易にも無防備な.emacsを晒したら、我らがtypester先生に 「.emacsに全部書くのは小学生までだよね〜」（大幅に誇張あり） と言われてしまったので、早速.emacsを分割してみたいと思います！ （設定ファイル群をgithubにあげました） なんで分割するの? そもそもなんで分割するんでしょうか? メリットとしては、こんなものがあります。 見通しがよくなる 環境依存の設定を切り分けられる 一部のファイルにエラーがあっても他のファイルの設定は適用される それぞれ個別にbyte compileできる 一部のエラーが全体に影響しないっていうのはいいですね。とっても。 では、実際に分割する方法を見ていきましょう。 分割してみよう 分割した設定ファイルを読み込むために、IMAKADOさん謹製のinit-lo
Firebugの意外と知られていない機能紹介（プログラマ向け） - KAYAC engineers' blog
羊毛布団を洗濯機にかけられないことを知りました。ago（@kyo_ago）です。 意外と知られていない機能が多い！？Firebugの使い方を見て、プログラマ向けも欲しくなったので書いてみました。 1. ショートカット一覧 以下のページでFirebugのショートカット一覧が公開されています。 http://getfirebug.com/wiki/index.php/Keyboard_and_Mouse_Shortcuts 取り合えず以下の二つだけでも覚えておくと効率的かもしれません。 F12でFirebugの有効、無効の切り替え 広いコマンドラインモード時にCtrl+Enterでコードを実行 また、以下のメニューからショートカットの変更も行えるので、他の拡張等とショートカットがかぶった場合でも別のキーで使用することが出来ます。 2. Firefox本体のツールバーに「要素を調査」ボタン Fi
8行でjQueryのデバッグが楽になるjQuery.pの紹介 - KAYAC engineers' blog
週末はオレ標準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()を
DOM Ready前にイベントを設定する方法（jQuery.liveの紹介） - KAYAC engineers' blog
健康診断で身長伸びてました。agoです。 今開発中のサイトで$().liveを中心にした実装を行っているので簡単にまとめてみました。 $().liveって？ jQuery 1.3系からサポートされた、イベントハンドラの設定用methodです。 $().bindとどこが違うの？ $().bindは指定されたhtml elementsに対して直接ブラウザの機能を使ってイベントを設定しますが、$(selector).liveは一旦document objectでイベントをキャッチした後、jQueryが発生元の要素とselectorをつきあわせて一致した場合イベントハンドラを呼び出します。 何がいいの？ 以下のような利点があります。 DOM Readyを待たずにイベントを設定できる。 通常jQueryでは$(function () {});（DOM Ready）内で初期化を行いますが、htmlの量
そこそこ規模が大きくても何とかなるjavascriptの設計（URL dispatcherの薦め） | tech.kayac.com - KAYAC engineers' blog
弁当生活始めました。agoです。 以前のjavascriptの開発はサーバサイドと同じPGが開発することが多く、機能をファイル単位で分割してそのページで必要なファイルのみを読み込むと言うことが行われていました。 ただ、最近はサーバサイドとクライアントサイドの分業が進んだことや表示速度の兼ね合いもあり、単一ファイルに全体を記述しサーバサイドでは全ページでその一ファイルのみを読み込むような形になることが多いです。 単一ファイルの利点としてはサーバサイドの実装に依存せずに任意の機能を追加できることがありますが、欠点として機能毎の切り分けが難しくなると言う点があります。 jQueryを使用して$('.selector')で切り出す方法もありますが、マークアップの全体像を正確に把握できていないと不要なページで間違って実行されてしまう危険性もあります。 そこで、以下のようなJSを先に読み込み、各URL
canvasをバイト単位で修正する方法（ImageDataの使い方） - KAYAC engineers' blog
引っ越ししました。agoです。 思いっきりネタがかぶってますが、あまり気にせずcanvasネタを書いてみたいと思います。 今回はcanvasの中でもImageData関係をまとめて見ました。 ImageDataってなに？ canvas内のバイト列を扱うためのObjectです。 canvas内の各バイト毎に赤、緑、青、透明度の情報を配列として保持しています。 何に使うの？ canvas内をバイト単位で修正したい場合に使います。 canvas内に図形等を書く場合、通常提供されているlineTo等を使用することも出来ますが、こういった抽象メソッドは一回ごとの呼び出しコストが大きいため、細かい単位の操作には向きません。 その点、ImageDataであればバイト単位での操作しかできない代わりに呼び出し毎のコストが小さいため、細かい単位の操作も高速に行うことができます。 ただ、もちろん線を引く、丸を書
canvasでキラキラした背景を作る方法 - KAYAC engineers' blog
tech.kayac.com、ささやかにリニューアルしました！ tech.kayac.comをご覧の皆さん、はじめまして。意匠部ME課のfuchigamiといいます。 どうして技術部ブログに意匠部の野郎が？って感じですが、 技術部ブログのリニューアル記念ということで、ちゃっかりcanvasについて記事を書こうと思います。 最初なので、、、 簡単にぼくの属性を説明すると、html5とか好き、CSS3とか好き、canvasとか興味ある、非モテ、javascriptはjQueryがなんとなくわかる程度、非リア充。こんな感じです。 今回のリニューアルではコーディング全般を担当しました。 特に、プログラミングに関してはド素人だ！ということを強調しておきます。 そんなぼくが、canvasを使ってキラキラした背景を作ってみました 「リニューアルするからには新しいことがやりたいよね。だったらhtml5とc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
