<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>tech.kayac.com - KAYAC engineers&apos; blog</title>
    <link rel="alternate" type="text/html" href="http://tech.kayac.com/" />
    <link rel="self" type="application/atom+xml" href="http://tech.kayac.com/atom.xml" />
    <id>tag:tech.kayac.com,2010-04-29:/2</id>
    <updated>2012-02-06T03:27:57Z</updated>
    
    <generator uri="http://www.sixapart.com/movabletype/">Movable Type 5.01</generator>

<entry>
    <title>[javascript] initTouchEventにおけるAndroidとiOSの引数違い</title>
    <link rel="alternate" type="text/html" href="http://tech.kayac.com/archive/javascript_inittouchevent.html" />
    <id>tag:tech.kayac.com,2012:/2.211</id>

    <published>2012-02-06T02:35:07Z</published>
    <updated>2012-02-06T03:27:57Z</updated>

    <summary>こんにちは。毎日欠かさずAndroidと心で対話をおこなうHTMLファイ部の高橋です。入社4週目にしての初投稿です。 UIのタッチ操作が絡むJSのテストで、タッチイベントを生成する際のハマりどころをエントリします。 きっかけ 先日、JsTestDriverでタッチイベントの生成をした際、Androi...</summary>
    <author>
        <name>takahashi-kei</name>
        
    </author>
    
    <category term="android" label="Android" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ios" label="iOS" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="javascript" label="javascript" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://tech.kayac.com/">
        <![CDATA[<p>こんにちは。毎日欠かさずAndroidと心で対話をおこなうHTMLファイ部の高橋です。入社4週目にしての初投稿です。
UIのタッチ操作が絡むJSのテストで、タッチイベントを生成する際のハマりどころをエントリします。</p>

<h3>きっかけ</h3>

<p>先日、JsTestDriverでタッチイベントの生成をした際、Androidだけイベントが生成されず何のエラーも出ないという事象が発生。</p>

<p>その答えは「selenium」の中にありました。</p>

<p><a href="http://code.google.com/p/selenium/source/browse/trunk/javascript/atoms/events.js#443">events.js#443 | selenium</a></p>

<pre><code>// Android's initTouchEvent method is not compliant with the W3C spec.

// Android's initTouchEvent method is not compliant with the W3C spec.

// Android's initTouchEvent method is not compliant with the W3C spec.　だと？(大事なことなので)
</code></pre>

<p>さらに selenium のコードを追ってみると</p>

<pre><code>// Native touch api supported starting in version 4.0 (Ice Cream Sandwich).
</code></pre>

<p>の表記があり、selenium の中では、4.0(ICS)以下の場合 initMouseEvent でイベントの初期化を行い、そのイベントオブジェクトに対して touches, targetTouches などのプロパティを追加してイベントを生成しているようです。
(ツッコみどころがありすぎる)</p>

<p>今回は、試しに上記 events.js 443行以下のイベント生成方法で検証を行ったところ、Android2.1以上(1系は検証していません)ではイベントが生成されたので、その結果をまとめたいと思います。</p>

<h3>initTouchEvent 仕様</h3>

<p>Android, iOSにおけるinitTouchEventの仕様を書き出してみました。</p>

<pre><code>// iOS initTouchEvent
// via. TouchEvent Class Reference | Safari Development Library
// https://developer.apple.com/library/safari/#documentation/UserExperience/Reference/TouchEventClassReference/TouchEvent/TouchEvent.html
    event.initTouchEvent(
            type,
            canBubble,
            cancelable,
            view,
            detail,
            screenX,
            screenY,
            clientX,
            clientY,
            ctrlKey,
            altKey,
            shiftKey,
            metaKey,
            touches,
            targetTouches,
            changedTouches,
            scale,
            rotation
    );


// Android initTouchEvent
// via. events.js | selenium
// http://code.google.com/p/selenium/source/browse/trunk/javascript/atoms/events.js#443
    event.initTouchEvent(
            touches,
            targetTouches,
            changedTouches,
            eventType,
            view,
            screenX,
            screenY,
            clientX,
            clientY,
            ctrlKey,
            altKey,
            shiftKey,
            metaKey
    );
</code></pre>

<p>すごく、引数多いです…。</p>

<p>見てのとおり、AndroidにはcanBubble, cancelable, detail, scale, rotationの5個が存在せず、順番も違うため、生成の際は切り分けてあげる必要があります。</p>

<h3>サンプルコード</h3>

<p><script type="text/javascript" src="http://jsdo.it/blogparts/p3Mf/js"></script><p class="ttlBpJsdoit" style="width: 600px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/keeeeei/p3Mf" title="[TEST] createTouchEvent ">[TEST] createTouchEvent  - jsdo.it - share JavaScript, HTML5 and CSS</a></p></p>

<p>(Android, iOSでアクセスすると動作確認ができます >> <a href="http://jsrun.it/keeeeei/p3Mf">http://jsrun.it/keeeeei/p3Mf</a> )</p>

<p>このように簡単なラッパーを作ってあげると、すごく便利にタッチイベントを生成することができますね！</p>

<p><a href="http://www.kayac.com/recruit/career">KAYACでは、数多の引数を操り、心でTouchEventを生成する技術者を募集しています！</a></p>
]]>
        

    </content>
</entry>

<entry>
    <title>libcurlを Android アプリからつかう方法 (ついでにopensslも)</title>
    <link rel="alternate" type="text/html" href="http://tech.kayac.com/archive/using_libcurl_in_android.html" />
    <id>tag:tech.kayac.com,2011:/2.209</id>

    <published>2011-12-17T04:06:00Z</published>
    <updated>2011-12-17T07:01:15Z</updated>

    <summary>この記事は「Android Advent Calendar 2011 」の裏エントリとして書いています。 17日の表のエントリは@out_of_kayaさんの「見せてもらおうGNのフェイスアンロックの性能とやらを！ - だらだらいこうぜ」 前の日の記事は同僚の@9reによる「Support Pack...</summary>
    <author>
        <name>kameda-kyosuke</name>
        
    </author>
    
    <category term="adventcalendar" label="AdventCalendar" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="adventcalendar2011" label="AdventCalendar2011" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="android" label="Android" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="androidmk" label="Android.mk" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="c" label="c" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="crypto" label="crypto" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="curl" label="curl" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ios" label="iOS" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="iphone" label="iPhone" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="jni" label="JNI" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ndk" label="ndk" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="openssl" label="openssl" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://tech.kayac.com/">
        <![CDATA[<p>この記事は「<a href="http://androidadvent.blogspot.com/2011/11/android-advent-calendar-2011_21.html">Android Advent Calendar 2011</a> 」の裏エントリとして書いています。</p>

<p>17日の表のエントリは<a href="http://twitter.com/#!/out_of_kaya"><code>@out_of_kaya</code></a>さんの「<a href="http://d.hatena.ne.jp/out-of-kaya/20111216/1324047962">見せてもらおうGNのフェイスアンロックの性能とやらを！ - だらだらいこうぜ</a>」
前の日の記事は同僚の<a href="http://twitter.com/#!/9re">@9re</a>による「<a href="http://level0.kayac.com/#!2011/12/mapview_and_support_package.php">Support PackageとMapView _level0 Kayac Interactive Designer's Blog</a>」</p>

<p>最近は時間を見つけて<code>C</code>で<code>http server</code>を書いている<a href="http://www.kayac.com/team/kameda-kyosuke">亀田</a>（<a href="http://twitter.com/Gemmbu">@Gemmbu</a>）です。</p>

<p>今回のネタは簡単にいうと<a href="http://tech.kayac.com/archive/using-libcurl-in-iphone.html">libcurlをiPhoneアプリからつかう方法 (ついでにopensslも)</a>の Android 版です。</p>

<h3>背景</h3>

<p>Android/iOS の開発をしていると同じ機能をそれぞれ <code>Java</code>/<code>Objective-C</code> で開発することになります。
たいていの場合どちらかで作成したものを移植するのですがテストの手間を考えると頭が痛くなります。</p>

<p>マルチプラットフォーム開発ツールではちょっと力が足りないと感じる場面があったり、開発ツールを学ぶ時間確保するところから始めなければなりません。</p>

<p>それならいっそ、両環境で共通に使える<code>C</code>のライブラリでやるのがいいんじゃないでしょうか？</p>

<h3>前提</h3>

<p>以後の作業はすべて OSX 10.6 上で行っています。
途中Android のソースをコンパイルします。そのため <code>xcode</code>は3系である必要があります。</p>

<p>... 早く<code>xcode</code>4系に対応してくれないと、<code>Lion</code> にいけなくて<code>iCloud</code>が使えないよ >&lt;</p>

<h3>openssl のビルド</h3>

<p><code>openssl</code>は普通のライブラリの流儀にそっていなくてビルドするのはちょっと大変です。
しかしながら、 Android のソースの<code>external</code>に含まれています。これを利用することにしましょう。</p>

<p><code>android open source project</code>の[以下のページ]（http://source.android.com/source/downloading.html)の手順にしたがってソースを取得しましょう。
結構時間がかかるので気軽に待ちましょう。</p>

<p>ここからは取得したソースのルートを</p>

<pre><code>&lt;ANDROID_SRC_ROOT&gt;
</code></pre>

<p>として話をすすめます。</p>

<p>さあビルドを...の前に openssl と crypto が静的ライブラリを出力するように<code>&lt;ANDROID_SRC_ROOT&gt;/external/openssl/Android.mk</code> に下記を追記しましょう。</p>

<pre><code># for libcrypto.a
include $(CLEAR_VARS)
LOCAL_SRC_FILES:=
LOCAL_C_INCLUDES:=
LOCAL_WHOLE_STATIC_LIBRARIES += libcrypto_static
LOCAL_MODULE:= libcrypto
include $(BUILD_STATIC_LIBRARY)

# for libssl.a
include $(CLEAR_VARS)
LOCAL_SRC_FILES:=
LOCAL_C_INCLUDES:=
LOCAL_WHOLE_STATIC_LIBRARIES += libcrypto_static libssl_static
LOCAL_MODULE:= libssl
include $(BUILD_STATIC_LIBRARY)
</code></pre>

<p>これで準備ができました。
<code>android open source project</code>の<a href="http://source.android.com/source/building.html">以下のページ</a>の手順に従いビルドを実行してください。</p>

<p>正しくビルドが完了すると以下のファイルが生成されているはずです。</p>

<ul>
<li><code>&lt;ANDROID_SRC_ROOT&gt;/out/target/product/generic/obj/STATIC_LIBRARIES/libcrypto_intermediates/libcrypto.a</code></li>
<li><code>&lt;ANDROID_SRC_ROOT&gt;/out/target/product/generic/obj/STATIC_LIBRARIES/libssl_intermediates/libssl.a</code></li>
</ul>

<h3><code>Android</code>プロジェクトの作成</h3>

<p><code>eclipse</code>等から<code>Android</code>プロジェクトを作成します。
ここからは作成したプロジェクトのルートを</p>

<pre><code>&lt;PROJECT_ROOT&gt;
</code></pre>

<p>として話をすすめます。</p>

<p>次に以下フォルダ/ファイルを作成し、<code>jni</code>を利用する準備をします。</p>

<ul>
<li><code>&lt;PROJECT_ROOT&gt;/jni</code>を作成します。</li>
<li><code>&lt;PROJECT_ROOT&gt;/jni/Application.mk</code>を作成します。</li>
<li><code>&lt;PROJECT_ROOT&gt;/jni/Android.mk</code>を作成します。</li>
</ul>

<p><code>Application.mk</code>の内容は以下となります</p>

<pre><code>APP_MODULES := \
libcurl

# APP_OPTIM := release
APP_OPTIM := debug
</code></pre>

<p><code>Android.mk</code>の内容は以下となります</p>

<pre><code>include $(call all-subdir-makefiles)
</code></pre>

<h3>libcurl のビルド</h3>

<p>次に目的の<code>libcurl</code>をビルドします
<a href="http://curl.haxx.se/download.html">ダウンロードページ</a>から最新のソースを取得します。</p>

<p><code>&lt;PROJECT_ROOT&gt;/jni/curl-*.**.*</code>以下に展開し、以下のようなスクリプトを作成し叩きます。
<code>NDK_ROOT</code>は<a href="http://developer.android.com/sdk/ndk/index.html">以下から取得</a>し展開したディレクトリを指定します。
<code>ANDROID_SRC_ROOT</code>は<code>&lt;ANDROID_SRC_ROOT&gt;</code>を指定します。</p>

<pre><code>#!/bin/sh

NDK_ROOT=/path/to/your/ndk/root
NDK_VER=8
ANDROID_SRC_ROOT=/path/to/your/android/src/root

PATH=$NDK_ROOT/toolchains/arm-linux-androideabi-4.4.3/prebuilt/darwin-x86/bin:$PATH

./configure \
--with-ssl \
--disable-ftp \
--disable-file \
--disable-ldap \
--disable-ldaps \
--disable-rtsp \
--disable-proxy \
--disable-dict \
--disable-telnet \
--disable-tftp \
--disable-pop3 \
--disable-imap \
--disable-smtp \
--disable-gopher \
--build=`./config.guess` \
--target=arm-eabi \
--host=arm-eabi \
LD=arm-linux-androideabi-ld \
AR=arm-linux-androideabi-ar \
AS=arm-linux-androideabi-as \
NM=arm-linux-androideabi-nm \
RANLIB=arm-linux-androideabi-ranlib \
SIZE=arm-linux-androideabi-size \
STRIP=arm-linux-androideabi-strip \
CC=arm-linux-androideabi-gcc \
CXX=arm-linux-androideabi-g++ \
OBJDUMP=arm-linux-androideabi-objdump \
CPPFLAGS="-I$NDK_ROOT/platforms/android-$NDK_VER/arch-arm/usr/include/ -I$ANDROID_SRC_ROOT/external/openssl/include/" \
CFLAGS="-nostdlib" \
LDFLAGS="-Wl,-rpath-link=$NDK_ROOT/platforms/android-$NDK_VER/arch-arm/usr/lib/ -L$NDK_ROOT/platforms/android-$NDK_VER/arch-arm/usr/lib/ -L$ANDROID_SRC_ROOT/out/target/product/generic/obj/STATIC_LIBRARIES/libssl_intermediates/ -L$ANDROID_SRC_ROOT/out/target/product/generic/obj/STATIC_LIBRARIES/libcrypto_intermediates/" \
LIBS="-lc -lz"
</code></pre>

<p>以下の文言が出力されているのを確認してください。</p>

<pre><code>SSL support:     enabled (OpenSSL)
</code></pre>

<p>次は<code>&lt;PROJECT_ROOT&gt;/jni/curl-*.**.*/Android.mk</code>の修正です。</p>

<p><code>curl</code>には既にビルドするための<code>Android.mk</code>が用意されているのですが<code>SSL</code>に対応していません。
そこで以下の設定を追加します。ヘッダファイルの検索先に<code>openssl</code>を追加します。</p>

<pre><code>LOCAL_C_INCLUDES += $(LOCAL_PATH)/include/ \
/path/to/your/android/src/root/external/openssl/include/
</code></pre>

<p>また、実行ファイルは必要ないため</p>

<pre><code># Build the curl binary
</code></pre>

<p>以下を削除します。</p>

<p>ターミナルから<code>&lt;PROJECT_ROOT&gt;/jni/</code>に移動し、以下のコマンドを実行してください。</p>

<pre><code>$ ndk-build
</code></pre>

<p>以下の文言が出力されていれば正しく作成されています。</p>

<pre><code>StaticLibrary  : libcurl.a
</code></pre>

<h3>libcurl を実際に使用する</h3>

<p>あとは普通の<code>JNI</code>プログラムと同様に<code>Java</code>との連携部分を <code>C</code>でごりごり書いていくだけです。</p>

<p>そのため<code>&lt;PROJECT_ROOT&gt;/jni/external/lib</code>を作成し、<code>libssl.a</code>および<code>libcrypto.a</code>をコピーしたうえで、
libcurl とリンクさせるために以下のような<code>Android.mk</code>を書く必要があります。</p>

<pre><code>LOCAL_PATH := $(call my-dir)

include $(CLEAR_VARS)
LOCAL_MODULE := libhttpclient

LOCAL_LDLIBS := -lz
LOCAL_LDLIBS += -Lexternal/lib/ -lcrypto -lssl

LOCAL_STATIC_LIBRARIES := \
libcurl

LOCAL_C_INCLUDES := \
$(LOCAL_PATH)/../curl-*.**.*/include \
/path/to/your/android/src/root/external/openssl/include/

LOCAL_SRC_FILES :=  \
com_kayac_curltest_HttpClient.c

include $(BUILD_SHARED_LIBRARY)
</code></pre>

<h3>まとめ</h3>

<p>以上のような方法で、<code>curl</code>および<code>openssl</code>がAndroidアプリから利用できるようになります。</p>

<p>このようにビルドさえ出来てしまえば既存のライブラリをそのまま使用できるのは<code>JNI</code>のメリットと言えるでしょう。 特にこのような枯れたライブラリの再発明を<code>Java</code>でやる必要はありません。どんどん車輪を使って効率の良い開発をしていきましょう。</p>

<p><a href="http://www.kayac.com/recruit/career">カヤックではスマフォやるならCだよねって開発者を求めています！</a></p>
]]>
        

    </content>
</entry>

<entry>
    <title>Ark is alive! ~ Ark Advent Calendar 2011始めました</title>
    <link rel="alternate" type="text/html" href="http://tech.kayac.com/archive/ark_is_alive_ark_advent_calendar_2011.html" />
    <id>tag:tech.kayac.com,2011:/2.208</id>

    <published>2011-12-01T03:56:48Z</published>
    <updated>2011-12-01T07:19:05Z</updated>

    <summary>こんにちは。松木(@songmu)です。入社して早くも1年が経とうとしていますが初投稿です。 空前の技術系Advent Calendarブームですが、タイトルの通りArk Advent Calendar 2011を開始いたします。 以下のページで更新していきます。 http://tech.kayac...</summary>
    <author>
        <name>matsuki-masayuki</name>
        
    </author>
    
    
    <content type="html" xml:lang="ja" xml:base="http://tech.kayac.com/">
        <![CDATA[<p>こんにちは。<a href="http://www.kayac.com/team/matsuki-masayuki">松木</a>(<a href="http://twitter.com/songmu">@songmu</a>)です。入社して早くも1年が経とうとしていますが初投稿です。</p>

<p>空前の技術系Advent Calendarブームですが、タイトルの通りArk Advent Calendar 2011を開始いたします。
以下のページで更新していきます。</p>

<p><a href="http://tech.kayac.com/ark-advent-calendar-2011/">http://tech.kayac.com/ark-advent-calendar-2011/</a></p>

<p>1日から24日まで毎日更新していきますのでよろしくお願いいたします。</p>

<h3>Arkとは？</h3>

<p>Arkについて簡単に説明しておくと、弊社村瀬が開発したPerlのWebアプリケーションフレームワークです。2009年に公開され、その後バージョンアップを繰り返し現在にいたっております。</p>

<p>ただ、Web上に公開されている情報が古いものが多いままになってしまっているので、ドキュメント類を刷新しているところです。まずは手始めに2009年にも実施されたArk Advent Calenderをリライトすることにしました。</p>

<p>Perl界隈ではArkの生存を疑う声もありましたが、カヤック社内ではバリバリ使われております。特に去年からソーシャルゲームの開発にもArkを活用しており、大規模で複雑なアプリケーションにも対応できることが実証されております。</p>

<p>この機会にArkを覚えてみてはいかがでしょうか？</p>

<p><a href="http://www.kayac.com/recruit/career">カヤックではArkで開発してみたい、もしくはArk以上のフレームワークを開発してやるぜ、という意気込みのエンジニアを募集しています！</a></p>
]]>
        

    </content>
</entry>

<entry>
    <title>jQueryのCSSセレクタAPIを高速に扱う方法</title>
    <link rel="alternate" type="text/html" href="http://tech.kayac.com/archive/jquery-selector-api-tuneup.html" />
    <id>tag:tech.kayac.com,2011:/2.207</id>

    <published>2011-12-01T02:19:17Z</published>
    <updated>2011-12-01T03:01:12Z</updated>

    <summary>最近Androidとの抗争が激化しているago（@kyo_ago）です。 jQueryはCSSセレクタを多用する特徴がありますが、jQuery内では実行ブラウザやCSSセレクタの記述によって呼び出されるブラウザAPIが変わり、それによって実行速度にも影響が出ます。 この記事では「セレクタAPIとはな...</summary>
    <author>
        <name>kyo_ago</name>
        
    </author>
    
    <category term="adventcalendar" label="AdventCalendar" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="adventcalendar2011" label="AdventCalendar2011" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="javascript" label="javascript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="jquery" label="jquery" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="tips" label="tips" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://tech.kayac.com/">
        <![CDATA[<p>最近Androidとの抗争が激化している<a href="http://www.kayac.com/member/ago">ago</a>（<a href="http://twitter.com/kyo_ago">@kyo_ago</a>）です。</p>

<p>jQueryはCSSセレクタを多用する特徴がありますが、jQuery内では実行ブラウザやCSSセレクタの記述によって呼び出されるブラウザAPIが変わり、それによって実行速度にも影響が出ます。</p>

<p>この記事では「セレクタAPIとはなにか」、「CSSセレクタの記述によって呼び出されるセレクタAPIの種類」、「高速なセレクタAPIを使用するための方法」、「高速なセレクタAPIが使われるかどうか確認する方法」などを紹介したいと思います。</p>

<p>（※この記事は<a href="http://atnd.org/events/21977">JavaScript Advent Calendar 2011 (フレームワークコース) : ATND</a>の1日目の記事です）</p>

<h3>セレクタAPIとはなにか</h3>

<p>セレクタAPIとは「#hoge .huga」のようなCSSセレクタから、DOM上に存在する要素を取得するためのAPIです。</p>

<p>jQueryではセレクタAPIは本体に統合されているため普段意識することは少ないかもしれませんが、CSSセレクタから要素を取得する場合はすべてこのセレクタAPIを経由して要素を取得します。</p>

<p>例えば以下のようなコードの場合、最大で4回セレクタAPIが呼び出されます。</p>

<pre><code>$('#hoge') // 1
    .find('.huga') // 2
    .find('div') // 3
    .find('[rel="hoge"]') // 4
;
</code></pre>

<h3>CSSセレクタの記述によって呼び出されるAPIの種類</h3>

<p>jQueryのCSSセレクタ処理は大きく分けてブラウザネイティブAPIを使う場合と、JavaScriptで記述されたSizzleを使用する場合に分けられます。</p>

<p>querySelectorAllが使えるブラウザ（Chrome 1, Firefox 3.5, IE8, Safari 3.5, Opera 10、それぞれこれ以降のバージョン）では渡された引数が文字列かつセレクタとして認識できる形式の場合以下のような優先度で処理を行います。</p>

<ol>
<li>#idや.class等の簡単な記述は専用の高速なAPIを使用</li>
<li>(1)以外でquerySelectorAllで解釈してエラーにならない場合その結果を使用</li>
<li>(2)でエラーになる記述はSizzleを使用（非標準の記述が入っているなどの場合）</li>
</ol>

<p>これはquerySelectorAllが使えるブラウザの例ですが、querySelectorAllが使えないブラウザでは2の処理がなくなり#idの場合とSizzleの場合にわかれます。</p>

<h4>querySelectorAllとは</h4>

<p>querySelectorAllとはブラウザ内蔵のCSSセレクタAPIで、jQueryのfindのように第一引数にCSSセレクタを渡すことでCSSセレクタに一致する要素を配列で返します。</p>

<pre><code>// 「#hoge .huga」に一致する要素の配列
document.querySelectorAll('#hoge .huga');
</code></pre>

<p>これはjQuery内部でも使われており、複雑な記述のCSSセレクタは主にこのAPIで処理されます。</p>

<h4>querySelectorAllで解釈できない記述</h4>

<p>jQueryはCSSセレクタとして通常ブラウザが解釈できるCSSセレクタの他に、以下のようなjQueryが独自にサポートするCSSセレクタの記述を持ちます。</p>

<pre><code>:animated, [name!="value"], :button,
:checkbox, :contains(), :eq(), :even,
:file, :first, :gt(), :has(), :header,
:hidden, :image, :input, :last, :lt(),
:odd, :parent, :password, :radio, :reset,
:selected, :submit, :text, :visible
</code></pre>

<p>これに関してはquerySelectorAllが解釈できないため、たとえquerySelectorAllが使用できるブラウザであっても必ずjQuery内部のSizzleを使用して解釈されます。</p>

<h4>Sizzleとは</h4>

<p>SizzleとはもともとquerySelectorAllがサポートされないブラウザ用にjQuery内部で使用されていたセレクタAPIを切り出したもので、CSSセレクタを受け取ってそれに一致する要素を返すライブラリです。</p>

<p>実際には高速化等の目的で他にもいろいろなコードが入っていますが、簡単に言うとgetElementsByTagName('*')で取得した要素一つ一つに対して、指定されたCSSセレクタに一致するかをJavaScriptで確認し、一致したものを配列にして返すようになっています。</p>

<p>このように内部がJavaScriptで記述されているため、独自の記述等をサポートすることが可能ですが、ブラウザネイティブのAPIに比べて速度的に遅くなるという問題があります。</p>

<h3>高速なセレクタAPIを使用するための方法</h3>

<p>ここまでセレクタAPIの内部実装に関して紹介してきましたが、ここからはそれを踏まえてjQueryがより高速なAPIを使用できる使い方を紹介します。</p>

<h4>高速なセレクタと低速なセレクタでAPIの実行を分ける</h4>

<p>jQueryの各APIは引数として渡されたCSSセレクタ全体がquerySelectorAllで実行可能かどうか判定してquerySelectorAllを使うかSizzleを使うかの分岐を行うので、渡されたCSSセレクタのうち一箇所でもカスタムセレクタが含まれていると全体をSizzleで評価します。</p>

<p>このため、CSSセレクタのうち一部分だけカスタムセレクタを使用する場合、その部分のみAPIを変えて検索することで高速化することが可能です。</p>

<pre><code>// カスタムセレクタが含まれるため、全体がSizzleで評価される 
$('#hoge .huga:checked');

// ここはdocument.querySelectorAllで実行される
$('#hoge .huga')
    // ここはSizzleで評価される
    .filter(':checked');
</code></pre>

<p>また、querySelectorAllが使えない環境も考慮すると、以下のようにidとclassを分けることで高速化する場合もあります。 <br />
（ただ、APIを分けすぎるとAPI呼び出し自体のコストやコードの可読性にも影響するため、やりすぎると逆効果になる場合もあります）</p>

<pre><code>// これはdocument.getElementByIdで評価される
$('#hoge')
    // これはブラウザによってはSizzleで評価される
    .find('.huga');
</code></pre>

<h3>ショートカットを活用する</h3>

<p>jQueryは基本的にquerySelectorAllを使用して要素を取得しますが、一部の記述にはより高速なAPIを使用して要素を取得します。</p>

<p>具体的には$('#hoge')や$('.huga')だけの場合はquerySelectorAllではなく、それぞれより高速なgetElementById、getElementsByClassNameを使用するようになっています。</p>

<p>このうち、getElementByIdはjQueryでサポートしている全ブラウザで使用可能なため$('#hoge')形式の場合は常にgetElementByIdが使用されますが、getElementsByClassNameは使用できるブラウザが少ないため、あくまでもquerySelectorAllが使用できる場合のみの高速な代替としてのみ使用されます。</p>

<p>このため、以下のような高速化が可能になります。</p>

<pre><code>// document.querySelectorAllで解釈される（低速）
$('div#hoge');
// document.getElementByIdで解釈される（高速）
$('#hoge');

// document.querySelectorAllで解釈される（低速）
$('div.huga');
// document.getElementsByClassNameで解釈される（高速）
$('.huga');
</code></pre>

<p><script type="text/javascript" src="http://jsdo.it/blogparts/oTns/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/kyo_ago/oTns" title="jQueryセレクタAPIのベンチマーク">jQueryセレクタAPIのベンチマーク - jsdo.it - share JavaScript, HTML5 and CSS</a></p></p>

<p>ただし、後者のclass名で指定する例に関して、IE6,7などのgetElementsByClassNameが使用できない環境でSizzleを使用して解釈するため以下のように高速な場合と低速な場合が逆転します。</p>

<pre><code>// document.getElementsByTagName('div')後、クラスの比較を行う（高速）
$('div.huga');
// document.getElementsByTagName('*')後、クラスの比較を行う（低速）
$('.huga');
</code></pre>

<h2>高速なセレクタAPIが使われるかどうか確認する</h2>

<p>「あるCSSセレクタがどの程度の速度で実行されるか」は、実行されるブラウザ、実際のDOM環境等によって左右されるため一概に判断はできません。</p>

<p>ただ、基本的にSizzleはquerySelectorAllより遅いため、「あるCSSセレクタがSizzleを使って解釈されるか否か」は速度に関する一つの指標となります。</p>

<p>「あるCSSセレクタがSizzleを使って解釈されるか否か」はquerySelectorAllを使って解釈できるかどうか（エラーが出るかどうか）で判断できるため、「querySelectorAllではエラーになるけど、jQuery()に渡すと結果が返ってくる」CSSセレクタはSizzleで解釈されていると判断できます。</p>

<pre><code>// jQueryのカスタムセレクタなのでエラー 
document.querySelectorAll(':input');
// jQueryでは解釈できるためSizzleが使用されている 
$(':input');
</code></pre>

<p>この方法でSizzleが使用される範囲を限定していくことで、querySelectorAllを活用しつつ、jQueryカスタムセレクタの柔軟な記述も行うことができます。</p>

<p><a href="http://www.kayac.com/recruit/career">カヤックではAndroidと戦う技術者も募集しています！</a></p>
]]>
        

    </content>
</entry>

<entry>
    <title>JavaScriptによるcross domain &amp; streamingなAPIアクセスの方法色々 - Nakamap APIの場合 -</title>
    <link rel="alternate" type="text/html" href="http://tech.kayac.com/archive/nakamap_api_js.html" />
    <id>tag:tech.kayac.com,2011:/2.206</id>

    <published>2011-11-10T01:21:51Z</published>
    <updated>2011-11-14T02:35:44Z</updated>

    <summary><![CDATA[こんにちは。すぎゃーん(@sugyan)です。 先日、Nakamap APIを公開しましたが、今回はそれをJavaScriptから使うためのライブラリを用意してみましたので紹介させていただきます。 使い方 &lt;script type="text/javascript" src="http://d...]]></summary>
    <author>
        <name>sugyan</name>
        <uri>http://d.hatena.ne.jp/sugyan/</uri>
    </author>
    
    <category term="javascript" label="javascript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="nakamap" label="nakamap" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://tech.kayac.com/">
        <![CDATA[<p>こんにちは。<a href="http://www.kayac.com/team/sugi-yoshihiro">すぎゃーん</a>(<a href="http://twitter.com/#!/sugyan">@sugyan</a>)です。</p>

<p>先日、<a href="http://tech.kayac.com/archive/nakamap_api.html">Nakamap APIを公開しました</a>が、今回はそれをJavaScriptから使うためのライブラリを用意してみましたので紹介させていただきます。</p>

<h2>使い方</h2>

<pre><code>&lt;script type="text/javascript" src="http://developer.nakamap.com/js/nakamap.js"&gt;&lt;/script&gt;
</code></pre>

<p>とscriptを読み込むことで使用できます。
access_tokenが既に取得できていれば、</p>

<pre><code>var client = new Nakamap.Client({ token: '*********' });
/* REST API */
client.get('/me', function (result) {
    console.log(result);
});
/* Streaming API */
client.listen('/group/' + group_id, function (data) {
    console.log(data);
});
</code></pre>

<p>のような形でREST APIへのアクセス、Streaming APIからの受信ができます。</p>

<p>access_tokenは<a href="https://github.com/nakamap/apidocs/wiki/Authentication">OAuth認証</a>で取得しますが、<a href="https://dev.twitter.com/docs/anywhere/welcome">Twitter @anywhere</a>を参考に、access_tokenを意識せずに認証とAPIアクセスを行うインタフェースも用意しました。</p>

<pre><code>&lt;script type="text/javascript"&gt;
  Nakamap.anywhere({
      id: '********************'
  }, function (n) {
      if (n.isConnected()) {
          n.get('/me', function (result) {
              console.log(result);
          });
      } else {
          n('#nakamap').connectButton({
              scope: ['read_basic'],
              authComplete: function () {
                  n.get('/me', function (result) {
                      console.log(result);
                  });
              }
          });
      }
  });
&lt;/script&gt;
&lt;div id="nakamap"&gt;&lt;/div&gt;
</code></pre>

<p>必要なのは<a href="http://developer.nakamap.com/">開発者サイト</a>でアプリ登録した際に発行されるclient_idのみです。
ここで登録したドメインと同一ドメイン上であれば動作します。
指定した要素にconnectButtonメソッドを呼ぶことで認証ダイアログをpopupさせるボタンが表示され、認証が完了すればその場でAPIへのアクセスが可能になります。</p>

<h2>デモ</h2>

<p><a href="http://jsdo.it/">jsdo.it</a>にてデモアプリを公開しています。JavaScriptのみで動く、Nakamapのチャットアプリです。
<script type="text/javascript" src="http://jsdo.it/blogparts/7vQW/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/sugyan/nakamap" title="Nakamap App">Nakamap App - jsdo.it - share JavaScript, HTML5 and CSS</a></p></p>

<h2>動作原理</h2>

<p>Nakamap APIのエンドポイントのドメインは<code>"https://thanks.nakamap.com"</code>となっており、JavaScriptからのアクセスは基本的にクロスドメインの通信をすることになります。
<a href="http://www.w3.org/TR/XMLHttpRequest2/">XMLHttpRequest Level 2</a>であれば<code>Access-Control-Allow-Origin</code>ヘッダを指定することでクロスドメインの通信が可能になるので、Chrome, Firefox, Safariなどのブラウザではこれを使用します。</p>

<p>一方、Internet Explorerでは<a href="http://msdn.microsoft.com/en-us/library/cc288060%28v=vs.85%29.aspx">XDomainRequest</a>を使用することで同様にクロスドメイン通信が可能ですが、こちらはhttp/httpsの壁が越えられないなどの制約もあり、IE8以降を対象に<code>window.postMessage</code>を使ったAPIアクセスを行うようにしています。
具体的には、<code>https://thanks.nakamap.com/</code>上にレシーバとなるページを用意し、iframeでそのページを読み込み、<code>window.postMessage</code>を使ってリクエストとレスポンスをJSONでシリアライズした文字列を使ってやりとりする、という方法です。
レシーバのページからのAPIアクセスは同一ドメインからのアクセスになるため、通常のXMLHttpRequestで取得できます。
<code>window.postMessage</code>ではiframeの親と子の間でメッセージをやり取りできます。これを使って別ドメインからのリクエストをここで中継して代わりに行い、結果を返す、ということでInternet Explorerでもクロスドメインのリクエストを実現させます。</p>

<p>また、Streaming APIの受信ですが、XMLHttpRequest Level 2では<code>multipart/mixed</code>なレスポンスを受ける<a href="https://gist.github.com/286747">mxhr.js</a>というライブラリがありますのでこれを使わせていただいています。
Internet ExplorerのXMLHttpRequestではレスポンスを途中まで受け取って処理する、ということができませんが、XDomainRequestが近い機能を持っています。
ただし、最初の数百バイトは受け取っても<code>onprogress</code>イベントは発火されない仕様のようで、最初にダミーデータとして数百バイトのデータを返すようにしました(<a href="http://blogs.msdn.com/b/ieinternals/archive/2010/04/06/comet-streaming-in-internet-explorer-with-xmlhttprequest-and-xdomainrequest.aspx">XDomainRequest with "prelude"</a>として紹介されています)。
これを使うことで、IE8以上の環境でもStreaming APIからのデータを受信できるようにしています。</p>

<h2>まとめ</h2>

<p>JavaScriptは様々な環境での動作を考慮しないといけないので大変ですね。。
たくさん躓いて色々と勉強になりました。</p>

<p>&nbsp;</p>

<p><a href="http://www.kayac.com/recruit/career">カヤックではNakamapとJavaScriptが大好きな技術者も募集しています！</a></p>
]]>
        

    </content>
</entry>

<entry>
    <title>10/15 面白法人カヤック主催「スマートフォンアプリワークショップ　”twitterアプリ改造大会！”」のご案内</title>
    <link rel="alternate" type="text/html" href="http://tech.kayac.com/archive/1015_twitter.html" />
    <id>tag:tech.kayac.com,2011:/2.205</id>

    <published>2011-10-12T05:54:58Z</published>
    <updated>2011-10-12T06:05:33Z</updated>

    <summary>10/15 開催！！ まだお申し込み受け付けております。みなさまのご参加お待ちしております！ イベントの詳細 面白法人カヤックでは、定番のtwitterアプリをiPhone・Androidの両方で改造しながら学ぶワークショップイベントを開催します。 当日は、その場でチームを編成し、twitterアプ...</summary>
    <author>
        <name>kameda-kyosuke</name>
        
    </author>
    
    <category term="android" label="android" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="iphone" label="iphone" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://tech.kayac.com/">
        <![CDATA[<p>10/15 開催！！
まだお申し込み受け付けております。みなさまのご参加お待ちしております！</p>

<h2>イベントの詳細</h2>

<p>面白法人カヤックでは、定番のtwitterアプリをiPhone・Androidの両方で改造しながら学ぶワークショップイベントを開催します。</p>

<p>当日は、その場でチームを編成し、twitterアプリを課題に応じてオリジナルにアレンジ・改造していきます。
課題は、当日その場で発表！
限られた時間の中でコードを書き、最後にチームごとに制作物を発表する対抗戦です。
スマフォ開発初心者の方でもまずは挑戦したいという気持ちさえあれば当日お楽しみいただけるかと思います。
※参加資格のご確認をお願いします。</p>

<p>チーム編成はご参加の方のご希望に応じ、iPhone開発チーム、Android開発チームをそれぞれ3?4名のチームにわかれての開発となる予定です。</p>

<p>制作を開始する前には、アプリ制作に従事している弊社社員から、
課題の開発についてのワンポイントアドバイスなどを30分程で、解説をさせていただきます。</p>

<p>また、当日は日々スマートフォンアプリ開発を行っているカヤックのプログラマもチームの一員として参加させていただきます！</p>

<p>業務ではなかなか取り組めないテーマを、いつもとは違うメンバーで開発できる楽しい場にできればと考えております。奮ってご参加ください。</p>

<h2>日時</h2>

<ul>
<li>10/15（土）10:00-18:00 <br />
※ご希望の方のみ：18:00-19:30で懇親会を予定しております。 <br />
※受付は9:40から開始いたします。  </li>
<li>10:00-10:30　課題発表・チーム分け・ワンポイントアドバイス</li>
<li>10:30-17:00　チーム毎にアイデア出し・開発　※こちらの時間内にチーム毎にお昼休憩は自由にとっていただきます。</li>
<li>17:00-18:00　各チームの発表</li>
<li>18:00-19:30　懇親会　※参加はご希望の方のみ</li>
</ul>

<h2>参加対象</h2>

<ul>
<li>実機に転送できることが本ワークショップの対象となります。</li>
<li>勉強会の特性上、今回はエンジニアの方限定とさせていただきます。ご了承ください！</li>
</ul>

<h2>ご参加にあたっての注意点</h2>

<ul>
<li>開発環境の構築サポートは行いません。ワークショップ当日までに予め開発環境の構築をお願い致します。</li>
<li>当日、検証端末の貸し出しは行いません。</li>
<li>昼食はこちらでご用意致しません。予めご了承ください。</li>
<li>ワークショップ終了後、懇親会を予定しております。参加費は2000円となります。ご都合よろしい方はぜひふるってご参加ください。</li>
</ul>

<h2>会場側の備品</h2>

<ul>
<li>ネット環境</li>
<li>電源タップ</li>
</ul>

<h2>場所：カヤック　恵比寿支社</h2>

<p><a href="http://www.kayac.com/company/map#ebisu">http://www.kayac.com/company/map#ebisu</a></p>

<h2>定員：25名</h2>

<p>※会場の都合で、応募多数の場合は、参加者を制限させて頂く場合がございます。以下のフォームより、お申込みください。 <br />
<a href="http://p.tl/cu5f">http://p.tl/cu5f</a></p>
]]>
        

    </content>
</entry>

<entry>
    <title>カヤック流ソーシャルアプリの作り方 インフラ編</title>
    <link rel="alternate" type="text/html" href="http://tech.kayac.com/archive/post_1.html" />
    <id>tag:tech.kayac.com,2011:/2.204</id>

    <published>2011-10-07T10:10:43Z</published>
    <updated>2011-10-07T10:37:39Z</updated>

    <summary>入社4年目にもなってtech.kayac初登場のせいです。 ブログ書けプレッシャーにとうとう屈する時がきました。 これで夢にkyo_agoが出てうなされなくてすみます。(彼はtech.kayacの尻たたき担当でした) 先々月「ぼくらの甲子園!熱闘編」というゲームをモバゲー内にてリリースしました。 こ...</summary>
    <author>
        <name>sei</name>
        
    </author>
    
    
    <content type="html" xml:lang="ja" xml:base="http://tech.kayac.com/">
        <![CDATA[<p>入社4年目にもなってtech.kayac初登場の<a href="http://www.kayac.com/member/sei">せい</a>です。</p>

<p>ブログ書けプレッシャーにとうとう屈する時がきました。
これで夢に<a href="http://www.kayac.com/member/ago">kyo_ago</a>が出てうなされなくてすみます。(彼はtech.kayacの尻たたき担当でした)</p>

<p>先々月「<a href="http://www.kayac.com/service/socialgame/796">ぼくらの甲子園!熱闘編</a>」というゲームをモバゲー内にてリリースしました。
これは去年リリースした「<a href="http://www.kayac.com/service/socialgame/676">ぼくらの甲子園!</a>」の続編です。
モバゲーユーザの方、是非遊んでみてください。</p>

<p>今回はこの「ぼくらの甲子園!熱闘編」がどういうインフラ構成になってるか紹介したいと思います。</p>

<p>注)
題名に「カヤック流」とはつけましたが、カヤックでは多様性を善としている風潮があり、
ゲームによってインフラの構成が違うどころか、利用しているプログラミング言語すら違います。
なので全てのゲームがこのような構成になってるわけではありません。</p>

<h2>前提</h2>

<p>今回のインフラ構成を決めるに至って考慮した点は「ラクに構築できるSPOFのない構成」です。</p>

<p>ソーシャルアプリはいまや群雄割拠の時代です。
どんなに面白いゲームを作ってもトラブルによりサービスが停止してしまったら、
ユーザーは不安を感じ、他のゲームに移ってしまいます。
反面、サーバーのハードウェア障害は避けられない運命にあるのでSPOFのない構成は必須です。</p>

<p>しかし、SPOFのない構成というと障害時の切り替えの仕組みを自動化するなど手間がかかるイメージがあります。
開発期間も潤沢にあるわけではないので、構築にそれほど時間も割けません。
そのため、できるだけラクに構築できてSPOFがない構成というのが理想でした。</p>

<p>また、ソーシャルアプリは、ヒットすれば膨大なリクエストがサーバーに押し寄せ、
逆に想定よりも格段にアクセス量が少なくなることもあります。
そのため、スケールアップ・ダウンが容易にとれることはもちろん必要です。</p>

<h2>全体</h2>

<p><img alt="Untitled.png" src="/2011/10/07/network/Untitled.png" width="567" height="575" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" /></p>

<p>上図がインフラ構成図になります。各サーバーで利用しているミドルウェアは下記になります。</p>

<ul>
<li>Webサーバー              - nginx</li>
<li>アプリケーションサーバー - Starman</li>
<li>キャッシュサーバー       - memcached</li>
<li>セッションストレージ ー  - Kyoto Tycoon</li>
<li>DBサーバー               - MySQL</li>
</ul>

<p>基本的にどのサーバーも冗長構成をとっていますが、
キャッシュサーバに関しては今回のゲームがキャッシュをそれほど活用しておらず、
キャッシュが仮になくても動作に支障がでないため、冗長構成はとってません。</p>

<h2>アプリケーションサーバーでhaproxyを使う</h2>

<p>アプリケーションからはDB・キャッシュ・セッションストレージへとそれぞれのサーバーへアクセスしますが、
このアクセス先をどう管理するかが問題になります。</p>

<p>アクセス先決め打ちでアクセスするとそのサーバーがダウンしたときに当然障害になります。</p>

<p>各サーバーの間にLVSなどロードバランサー用のサーバーを用意するという方法もありますが、
ロードバランサー自体を冗長化させる必要があり、その切替にも手間がかかります。</p>

<p>あとはクライアントライブラリに負荷分散機能が備わっていれば別ですが、
なかなか要件を満たすライブラリはなく、自作する必要があります。</p>

<p>そこで今回は<a href="http://haproxy.1wt.eu/">haproxy</a>を各アプリケーションサーバー全てにインストールし、
アプリケーションサーバーから各サーバーへのアクセスは全てhaproxyを経由するようにしました。</p>

<p>haproxyの設定は以下のようになります。</p>

<pre><code>listen mysql-master
        bind 127.0.0.1:3306
        mode tcp
        option mysql-check user haproxy
        server master k2-db01:3306 check

listen mysql-slave
        bind 127.0.0.1:3307
        mode tcp
        option mysql-check user haproxy
        balance roundrobin
        server slave0 k2-db02:3306 check
        server slave1 k2-db03:3306 check
        ....

listen kyototycoon
bind 127.0.0.1:11222
mode tcp
server master k2-cache02:11222 check
server backup k2-cache03:11222 check backup
</code></pre>

<p>これで各アプリケーションサーバーからはlocalhostの3306ポートがDBのmaster、
3307ポートがDBのslaveとして利用できるので、アプリケーションにはアクセス先を決め打ちにすることができます。</p>

<h2>DBサーバーを1台余計に用意する</h2>

<p>DBサーバーはよくあるmaster/slave構成です。</p>

<p>insert/updateはmaster、selectはslaveへアクセスしますが、
slaveへのアクセスは各アプリケーションサーバーのhaproxyを経由して分散されます。</p>

<p>仮にslaveがダウンした場合はそれをhaproxyが検知してそれ以外のslaveでサービスを継続します。
そのため、仮に1台ダウンして他のサーバーだけでサービスを続行しても、
支障が出ない程度にあらかじめスケーリングしておくことが必要です。</p>

<p>また、アプリケーションサーバーからアクセスがないslaveサーバーを一つさらに余計に用意しています。
これは主にはデイリーのバックアップ用途、スレーブ増設の際のコピー元になるためですが、
データの詳細な調査が必要になった際にSQLを手動実行出来る環境にも利用できます。</p>

<p>手動でSQLを発行して調査を行う際は重いクエリーを発行してしまうことが往々にして有ります。
それをサービスに影響なく実行するためにあらかじめ用意していると安心です。</p>

<p>参考:
<a href="http://d.hatena.ne.jp/sfujiwara/20110621/1308625519">MySQLで参照の負荷分散を行うslaveは3台から構成するのがよいのでは</a></p>

<h2>セッションストレージにKyoto Tycoon</h2>

<p>当初はセッションデータを保持するためにキャッシュサーバーと同居して、memcachedを使うことを考えていましたが、
memcachedでは他のデータの容量次第でセッションデータがロストする可能性があります。
またレプリケーション機能が標準ではないため、冗長構成が取りにくいという欠点があります。</p>

<p>いつ消えてもサービスに影響がないキャッシュデータであればこれでも問題ないのですが、
セッションデータのロストはサービスの致命的な障害にはならないものの、
ユーザの利便性を大きく損なう可能性があるため、セッションストレージは<a href="http://fallabs.com/kyototycoon/">Kyoto Tyconn</a>を利用しました。</p>

<p>他のKVSではなく、Kyoto Tycoonを採用した理由は主に以下です。</p>

<p>・Memcachedプロトコルをサポートしてること
・デュアルマスター構成が取れること</p>

<p>内部的な事情を言うと、当初memcachedを使うことを想定していたので、
memcached用のクライアントライブラリで開発をしていました。
そのためmemcachedプロトコルを使えるのは助かりました。</p>

<p>また、Kyoto Tycoonはデュアルマスタ構成が可能なので冗長化が容易です。
セッションストレージもDBのslave同様、各アプリケーションサーバーからhaproxyを経由してアクセスされるので、
仮に一方のサーバーがダウンしたとしても、もう一方のサーバーを利用してサービスを継続することができます。</p>

<p>Kyoto Tycoonの起動オプションはは下記のように設定してます。</p>

<pre><code>ktserver -plsv /usr/local/libexec/ktplugservmemc.so \
    -plex 'opts=f#port=11222' -ulog /var/lib/kyototycoon/master1-ulog -sid 1 -mhost k2-cache03 \
    -rts /var/lib/kyototycoon/master1.rts \
    '/var/lib/kyototycoon/master1.kch#opts=l#bnum=8000000#msiz=5g#dfunit=8'
</code></pre>

<h2>最後に</h2>

<p>以上で、ひと通りのサーバーに対して冗長構成がとれていますが、ひとつだけ冗長構成が取れてないサーバーがあります。</p>

<p>DBサーバーのmasterです。</p>

<p>DBサーバーの冗長化はまだこれといった解決策を見いだせていませんが、
仮に障害が起きた場合はslaveを昇格するなどの対応をとることにしています。
下記のようなツールの開発が行われていますので、要チェックです。</p>

<p><a href="http://yoshinorimatsunobu.blogspot.com/2011/07/announcing-mysql-mha-mysql-master-high.html">Announcing MySQL-MHA: "MySQL Master High Availability manager and tools"</a></p>

<p>また、実を言うと以上の構成は弊社の「こえ部」のインフラにインスパイア(!)されたものです。</p>

<p>そのインフラの立役者の<a href="http://www.kayac.com/team/fujiwara-shunichiro">fujiwara</a>がYAPC::Asiaに登壇してそのサービスの裏側についてお話しします。</p>

<p><a href="http://yapcasia.org/2011/talk/41">Perlで構築された中規模サイトのDC引っ越し記録</a></p>

<p>興味のある方は是非足をお運びください！</p>

<p><a href="http://www.kayac.com/recruit/career">カヤックではfujiwaraと呑みたい技術者を大募集しています！</a></p>
]]>
        

    </content>
</entry>

<entry>
    <title>安全なバッチ処理の作り方</title>
    <link rel="alternate" type="text/html" href="http://tech.kayac.com/archive/safty-batch-introduction.html" />
    <id>tag:tech.kayac.com,2011:/2.203</id>

    <published>2011-10-05T02:00:00Z</published>
    <updated>2011-10-05T02:08:35Z</updated>

    <summary>このまえ登り坂の途中でロードバイクのタイヤが破裂しました。ながたです。 今回はバッチ処理について書いてみようと思います。 バッチ処理？ Webサービスの処理開始条件は、大まかに次の2つに分けることができます。 ユーザーのアクションに起因するもの ユーザーのアクションに起因しないもの このうち後者の処...</summary>
    <author>
        <name>nagata-hiroaki</name>
        <uri>http://d.hatena.ne.jp/handlename</uri>
    </author>
    
    
    <content type="html" xml:lang="ja" xml:base="http://tech.kayac.com/">
        <![CDATA[<p>このまえ登り坂の途中でロードバイクのタイヤが破裂しました。<a href="http://www.kayac.com/team/nagata-hiroaki">ながた</a>です。
今回はバッチ処理について書いてみようと思います。</p>

<h2>バッチ処理？</h2>

<p>Webサービスの処理開始条件は、大まかに次の2つに分けることができます。</p>

<ul>
<li>ユーザーのアクションに起因するもの</li>
<li>ユーザーのアクションに起因しないもの</li>
</ul>

<p>このうち後者の処理をバッチ処理が担当することになります。</p>

<p>バッチ処理の担当分はさらに、</p>

<ul>
<li>特定の条件（時間やサービスの状態）で実行するもの</li>
<li>手動で実行するもの</li>
</ul>

<p>の2つに分けられます。
今回はこの「手動で実行するもの」について書きたいと思います。</p>

<h2>バッチを手動実行するのはどんなとき？</h2>

<p>バッチ処理を手動で実行するのは、十中八九イレギュラーな状況が発生したときです。
ルーチンワークや実行の条件が決まっているものは何らかの方法で自動化できるはずです。</p>

<p>そしてイレギュラーな状況のほとんどは不具合が発生したとき。
つまり <em>重ねてミスができない状況</em> です。</p>

<p>ミスができない状況で、できるだけミスの発生を抑えるバッチ処理の
（主にヒューマンエラーを防ぐための）ノウハウを紹介していきます。</p>

<h2>本番と同じ環境でテストする</h2>

<p>大前提です。</p>

<p>「開発環境ではうまくいったんだけど･･･」なんていいわけは通用しません。
<em>必ず</em> 開発環境で本番と同じ環境を再現してテストしましょう。</p>

<h2>バッチ実行前にデータのバックアップをとる</h2>

<p>処理に間違いがあってもすぐに復元できるよう、
処理の実行で書き換えられる可能性があるデータはバックアップをとっておきましょう。</p>

<h2>バッチファイルに処理の本体を書かない</h2>

<p>これはテストをしやすくするための手段です。</p>

<p>バッチファイルに直接処理を書くと、テストが非常にやりにくくなります。
よほど単純な処理でない限り、モデルに移して（できれば既存の処理を再利用して）
テストしやすい構成にしましょう。</p>

<h2>コマンドライン引数はわかりやすく</h2>

<p>バッチ処理にコマンドラインから引数を渡すときは、
よりわかりやすい名前付きの引数を使うようにしましょう。</p>

<pre><code>$ perl bat.pl 10 1 "test"
</code></pre>

<p>↓</p>

<pre><code>$ perl send_message.pl --target=10 --category=1 --message="test"
</code></pre>

<h2>デフォルトはdry-run</h2>

<p><em>「うっかり実行しちゃった（ﾃﾍ」</em> なんてことがあっても焦らないように、
何も指定しなければ dry-run（実行はするがデータは書き換えない）になるようにしましょう。</p>

<p><em>dry-run</em></p>

<pre><code>$ perl send_message.pl --target=10 --category=1 --message="wryyy!!"
</code></pre>

<p><em>実際に実行</em></p>

<p>--prod を付けなければ実行されないようにしておく。</p>

<pre><code>$ perl send_message.pl --target=10 --category=1 --message="wryyy!!" --prod
</code></pre>

<h2>実行前に確認ダイアログを出す</h2>

<p>これもうっかり対策。
実際に処理を行う前に、どのような処理が行われるか表示して、
問題があればそこで中断できるようにしましょう。</p>

<pre><code>$ perl send_message.pl --target=10 --category=1 --message="wryyy!!" --prod
send message # 処理の内容を表示
target  : 10
category: 1
message : wryyy!!

continue? [y/N] # ここでnとすれば中断できるようにする
</code></pre>

<p>実行前に処理の内容を確認できるだけで、安心感が段違いです。</p>

<h2>実行に必要な条件を組み込んでおく</h2>

<p>状態によっては実行してはいけない処理がある場合は、
その状態の判断をバッチに組み込んでおきましょう。
<em>「実行するときに気をつけていれば大丈夫！」</em> なんて思っていると後で泣くことになります。</p>

<ul>
<li>二重実行するとまずい処理</li>
<li>特定の時間に実行するとまずい処理</li>
<li>逆に、特定の時間以外に実行したくない処理</li>
</ul>

<p>など、条件を洗い出しておきましょう。</p>

<h2>ログを残す</h2>

<p>バッチ処理でデータを変更したら、その内容をログとして残すようにしましょう。
標準出力をファイルに書き出してもいいですし、
バッチ内でファイルに書き出す仕組みを入れてもいいでしょう。</p>

<p>標準出力をログとして利用する場合は tee を使うといいでしょう。
標準出力・ファイル両方に出力されるので、状況確認しつつログを残すことができます。</p>

<pre><code>$ perl send_message.pl --target=10 --category=1 --message="wryyy!!" --prod | tee send_message.log
</code></pre>

<p>ログを残すことには、おもに以下の2つの理由があります。</p>

<ul>
<li>あとで処理の内容が間違っているとわかったときに、データの復元ができるようにする</li>
<li>途中でバッチ処理が停止したときに、途中からやり直せるようにする</li>
</ul>

<p>もちろん後者は、途中で処理が止まる→途中から再実行 ができるように、
以下のようにつくっておく必要があります。</p>

<ul>
<li>一部分だけ完了しても問題がない</li>
<li>途中から再実行するためのオプションを付ける、あるいは処理状況を見て自動で中断箇所から再開するようにする</li>
<li>再実行してもすでに完了している処理・再実行時に行われる処理に影響がない</li>
</ul>

<p>処理が完了している部分としていない部分が混在するとまずい場合は、
すべての処理が完了するまでデータを書き換えないようにしておきましょう。
このあたりは場合によりけりです。</p>

<h2>実行状況の表示</h2>

<p>バッチ処理の実行状況を出力するようにしておくと、</p>

<ul>
<li>実際に処理が行われているのか</li>
<li>どこまで処理が終わっているのか</li>
</ul>

<p>がわかって安心できます。</p>

<h2>バッチの完了を通知する</h2>

<p>バッチ処理の間、常に張り付いているわけにはいかない。
でも処理が終わったらすぐに確認したい･･･。</p>

<p>というときはバッチ完了時にメールやIMで通知するようにしておきましょう。</p>

<p>バッチ処理の終了時刻が予想できるなら、
終了よりも少し前に通知を送るようにするとタイムロスを防げます。</p>

<p>手動バッチに限らず、
何かしらイレギュラーな状態（自動バッチが途中で止まった、データの処理数が想定より少ない、etc）
になったら通知するようにしておくと、トラブルに迅速に対応できるようになります。</p>

<h2>ネットワーク切断対策</h2>

<p>サーバー上で長時間走らせるバッチの場合、
うっかり途中でネットワークが切断したりすると泣きをみることになります。</p>

<p><a href="http://www.gnu.org/s/screen/">screen</a> や <a href="http://tmux.sourceforge.net/">tmux</a> 上で実行したり、
nohup を付けて実行するなどの対策をとっておきましょう。</p>

<h2>おわり</h2>

<p>今回あげたものは、ちょっと手間をかければすぐに実行できるものばかりです。
保険の宣伝に出てきそうな <em>少しの投資で大きな安心</em> という言葉がそのまま当てはまります。</p>

<p>以上、batノウハウでした。</p>

<p><a href="http://www.kayac.com/recruit/career">カヤックでは自動化が得意な技術者も募集しています！</a></p>
]]>
        

    </content>
</entry>

<entry>
    <title>HTML5とか勉強会とMozilla勉強会で話してきました</title>
    <link rel="alternate" type="text/html" href="http://tech.kayac.com/archive/html5j-modest-slide.html" />
    <id>tag:tech.kayac.com,2011:/2.202</id>

    <published>2011-10-04T13:22:20Z</published>
    <updated>2011-10-04T13:47:26Z</updated>

    <summary>Mac Book AirにWindows7を入れて常用しています。ago（@kyo_ago）です。 先週、HTML5とか勉強会、Mozilla勉強会と発表を行って来たので、その時使った資料を紹介したいと思います。 HTML5とか勉強会 HTML5とか勉強会ではJSクイズゲームの作り方（HTML5実力...</summary>
    <author>
        <name>kyo_ago</name>
        
    </author>
    
    <category term="events" label="events" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="javascript" label="javascript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="slide" label="slide" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://tech.kayac.com/">
        <![CDATA[<p>Mac Book AirにWindows7を入れて常用しています。<a href="http://www.kayac.com/member/ago">ago</a>（<a href="http://twitter.com/kyo_ago">@kyo_ago</a>）です。</p>

<p>先週、HTML5とか勉強会、Mozilla勉強会と発表を行って来たので、その時使った資料を紹介したいと思います。</p>

<h3><a href="http://atnd.org/events/20007">HTML5とか勉強会</a></h3>

<p><a href="http://atnd.org/events/20007">HTML5とか勉強会</a>では<a href="http://0-9.sakura.ne.jp/pub/lt/html5j/start.html">JSクイズゲームの作り方（HTML5実力テストの紹介）</a>と題して15分の発表を行いました。 <br />
（ただ、最後は結構時間が余ってしまいました。。。）</p>

<p>ちなみに<a href="http://0-9.sakura.ne.jp/pub/lt/html5j/start.html">JSクイズゲームの作り方（HTML5実力テストの紹介）</a>では<a href="http://jsdo.it/event/html5cat/2011/summer/">HTML5実力テスト</a>開始1週間時点での平均点を紹介しています。 <br />
（<a href="http://jsdo.it/event/html5cat/2011/summer/">HTML5実力テスト</a>に関してすでにご存じの方は10Pくらいまで飛ばしてご覧ください）</p>

<h3><a href="https://dev.mozilla.jp/events/workshop11/">Mozilla 勉強会＠東京 6th</a></h3>

<p><a href="https://dev.mozilla.jp/events/workshop11/">Mozilla 勉強会＠東京 6th</a>では<a href="http://0-9.sakura.ne.jp/pub/lt/modest/start.html">jQueryで破棄されたrequestAnimationFrameとJSでのアニメーション実装で注意すること</a>と題して5分の発表を行いました。</p>

<p><a href="http://0-9.sakura.ne.jp/pub/lt/modest/start.html">jQueryで破棄されたrequestAnimationFrameとJSでのアニメーション実装で注意すること</a>ではjQuery 1.6.0で採用されたrequestAnimationFrameがjQuery 1.6.3, jQuery 1.7b1で削除された経緯と、requestAnimationFrame自体の使用法を紹介しています。</p>

<p><a href="http://www.kayac.com/recruit/career">カヤックでは勉強会に積極的な技術者も募集しています！</a></p>
]]>
        

    </content>
</entry>

<entry>
    <title>Nakamap APIを公開しました！</title>
    <link rel="alternate" type="text/html" href="http://tech.kayac.com/archive/nakamap_api.html" />
    <id>tag:tech.kayac.com,2011:/2.201</id>

    <published>2011-09-15T10:29:00Z</published>
    <updated>2011-09-15T11:10:58Z</updated>

    <summary>ももいろクローバーZに夢中な、すぎゃーん(＠sugyan)です。こんにちは。 みなさん、ナカマップ 使っていただいていますでしょうか？ ナカマップは昨年冬にスマートフォン向けアプリとして公開され多くの方々に利用していただいておりますが、今回このナカマップを多くのプラットフォームから利用できるようにす...</summary>
    <author>
        <name>sugyan</name>
        <uri>http://d.hatena.ne.jp/sugyan/</uri>
    </author>
    
    <category term="api" label="api" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="nakamap" label="nakamap" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://tech.kayac.com/">
        <![CDATA[<p><a href="http://www.momoclo.net/">ももいろクローバーZ</a>に夢中な、<a href="http://www.kayac.com/team/sugi-yoshihiro">すぎゃーん</a>(<a href="http://twitter.com/#!/sugyan">＠sugyan</a>)です。こんにちは。</p>

<p>みなさん、<a href="http://nakamap.com/">ナカマップ</a> 使っていただいていますでしょうか？<br>
ナカマップは昨年冬にスマートフォン向けアプリとして公開され多くの方々に利用していただいておりますが、今回このナカマップを多くのプラットフォームから利用できるようにするためのAPIを公開しました。ナカマップにユーザ登録されている方であれば誰でも簡単にNakamapアプリケーションを作成し、公開できるようになります。</p>

<p>開発者サイトはこちら<br>
<a href="http://developer.nakamap.com/">http://developer.nakamap.com/</a></p>

<p>基本的にスマートフォンアプリで出来ることが、ほぼすべてこのAPI経由で操作できるようになります。</p>

<ul>
<li>自分のグループの一覧や、グループのチャット内容、友達の情報の取得、更新</li>
<li>位置情報の更新、取得</li>
<li>リアルタイムな更新情報(Streaming API)</li>
</ul>

<p>などなど、、詳しくはドキュメントを用意していますのでそちらをご覧ください。<br>
<a href="https://github.com/nakamap/apidocs/wiki">Nakamap API Docs</a><br>
サンプルコードなども順次載せていく予定です。</p>

<p>APIの認証はOAuth2の仕様に沿って実装していますので、他のOAuth2のAPIを触ったことのある方であれば簡単に使いこなせると思います。</p>

<p>Nakamap APIは<a href="http://ma7.mashupaward.jp/">Mashup Awards 7 (#MA7)</a>に、API提供元として登録させていただきました。
昨日の<a href="http://mashupawards.tumblr.com/post/10229632104/2011-9-14-ma7-mashup-caravan-in-tokyo-vol-1">#MA7 Mashup Caravan in Tokyo Vol.1</a>でもNakamap APIについてお話させていただきました。
(資料も<a href="http://jsdo.it">jsdo.it</a>にUPしてあります。 -> <a href="http://jsdo.it/sugyan/nakamap-api/fullscreen">About Nakamap API</a>)</p>

<p>グループチャット機能や、位置情報を使ったリアルタイムなアプリケーションなど、使い方次第で色々と面白いものが出来ると思います。是非お気軽に使ってみて、何か新しいNakamapアプリケーションを作ってみてください！</p>

<p><br></p>

<p><a href="http://www.kayac.com/recruit/career">カヤックではももクロとAPIが大好きな技術者も募集しています！</a></p>
]]>
        

    </content>
</entry>

<entry>
    <title>jsdo.itでHTML5実力テストを公開しました</title>
    <link rel="alternate" type="text/html" href="http://tech.kayac.com/archive/jsdoit-html5cat-2011-summer.html" />
    <id>tag:tech.kayac.com,2011:/2.200</id>

    <published>2011-09-08T08:45:57Z</published>
    <updated>2011-09-08T09:54:18Z</updated>

    <summary>なめこ栽培中のago（@kyo_ago）です。 弊社が運営しているjsdo.itにて、この度HTML5実力テストを公開したのでご紹介します。 HTML5実力テストでは、HTML5関連の問題をJavaScriptコース、HTML/CSSコースに分けて受けることができます。 今回わたしはJavaScri...</summary>
    <author>
        <name>kyo_ago</name>
        
    </author>
    
    
    <content type="html" xml:lang="ja" xml:base="http://tech.kayac.com/">
        <![CDATA[<p><a href="http://beeworksgames.com/~osawaritantei/saibai/">なめこ栽培中</a>の<a href="http://www.kayac.com/member/ago">ago</a>（<a href="http://twitter.com/kyo_ago">@kyo_ago</a>）です。</p>

<p>弊社が運営している<a href="http://jsdo.it/">jsdo.it</a>にて、この度<a href="http://jsdo.it/event/html5cat/2011/summer/">HTML5実力テスト</a>を公開したのでご紹介します。</p>

<p><img src="http://jsdo.it/img/event/html5cat/2011/summer/ttl_html5cat_01.png"></p>

<p><a href="http://jsdo.it/event/html5cat/2011/summer/">HTML5実力テスト</a>では、HTML5関連の問題をJavaScriptコース、HTML/CSSコースに分けて受けることができます。</p>

<p><img src="http://jsdo.it/img/event/html5cat/2011/summer/img_result_01.png"></p>

<p>今回わたしはJavaScriptコースの問題作成を担当したので、HTML/CSSコースを受けてみましたが56点でした。</p>

<p>何回受けても大丈夫なのでぜひ満点を目指してみてください。</p>

<p>テストの結果はjsdo.itのユーザページへ<a href="http://jsdo.it/kyo_ago">badges</a>として表示されます。</p>

<p><a href="http://www.kayac.com/recruit/career">カヤックでは高得点な技術者も募集しています！</a></p>
]]>
        

    </content>
</entry>

<entry>
    <title>emacsのヘルプを引こう！</title>
    <link rel="alternate" type="text/html" href="http://tech.kayac.com/archive/read-emacs-help.html" />
    <id>tag:tech.kayac.com,2011:/2.199</id>

    <published>2011-08-28T02:46:52Z</published>
    <updated>2011-08-28T05:50:57Z</updated>

    <summary>こんにちは。バランスボールがいす代わりのnagata(@handlename)です。 emacs、使いこなせてますか？ キーバインドも、カーソル移動と終了までは覚えたものの、 結局普通のテキストエディタとして使っていたりしないでしょうか？ それはひじょーーーーーーーーにもったいない！ とはいえ、いき...</summary>
    <author>
        <name>nagata-hiroaki</name>
        <uri>http://d.hatena.ne.jp/handlename</uri>
    </author>
    
    
    <content type="html" xml:lang="ja" xml:base="http://tech.kayac.com/">
        <![CDATA[<p>こんにちは。バランスボールがいす代わりの<a href="http://www.kayac.com/team/nagata-hiroaki">nagata</a>(@handlename)です。</p>

<p>emacs、使いこなせてますか？
キーバインドも、カーソル移動と終了までは覚えたものの、
結局普通のテキストエディタとして使っていたりしないでしょうか？</p>

<p>それはひじょーーーーーーーーにもったいない！</p>

<p>とはいえ、いきなりいろいろ拡張elispを入れるのは腰が重いかと思います。
と、いうわけで、とりあえずヘルプを引けるようになってみてみませんか？</p>

<h2>キーバインドを調べる</h2>

<pre><code>M-x describe-bindings
</code></pre>

<p>または、</p>

<pre><code>f1 b
</code></pre>

<p>現在のモードで使えるキーバインドの一覧を表示します。
なれないうちは常に開いておいて、
モード名で検索したりするといいでしょう。</p>

<p>その行でenterを押すと詳細なヘルプを表示します。</p>

<h2>関数の役割を調べる</h2>

<pre><code>M-x describe-function [関数名]
</code></pre>

<p>または、</p>

<pre><code>f1 f [関数名]
</code></pre>

<p>関数のヘルプを表示します。
ネットで探してきて.emacsに貼り付けたはいいものの、
それがなにをするのかわからないときに使うといいでしょう。</p>

<h2>変数の役割を調べる</h2>

<pre><code>M-x describe-variable [変数名]
</code></pre>

<p>または、</p>

<pre><code>f1 v [変数名]
</code></pre>

<p>変数のヘルプを表示します。
関数のヘルプと同じく、何に使うのか調べるときに使うといいでしょう。</p>

<p>ちなみに、リストの先頭にあるのが関数で、そのほかが変数と考えてOKです。</p>

<pre><code>([関数] [変数1] [変数2])
</code></pre>

<h2>infoを引く</h2>

<pre><code>M-x info-emacs-manual
</code></pre>

<p>emacsのマニュアルです。
emacsを使う上で必要なことはほぼすべてここに書いてあります。</p>

<p>日本語がいい！という方はこのあたりをチェック。</p>

<ul>
<li><a href="http://www.bookshelf.jp/">Emacs 電子書棚</a></li>
</ul>

<h2>チュートリアル</h2>

<p>ヘルプとはちょっと違いますが、emacsにはチュートリアルが用意されています。</p>

<pre><code>M-x help-with-tutorial
</code></pre>

<p>一通りの操作が覚えられるので、一度目を通しておくといいでしょう。</p>

<h2>anything</h2>

<p>これまたヘルプとは違いますが、anythingという有名な拡張elispがあります。</p>

<ul>
<li><a href="http://www.emacswiki.org/emacs/Anything">Anything - EmacsWiki</a></li>
<li><a href="http://d.hatena.ne.jp/rubikitch/20100718/anything">anything導入のeverything 〜3分で使えるanything.el〜</a></li>
</ul>

<p>抽象的な言い方をすると、
anythingを使うといままで隙間から一部分しかのぞけなかったものが、
窓からのぞくことができるようになります。</p>

<p>上記のページを参考にanythingを入れたら、.emacsに次のように書いてみましょう。</p>

<pre><code>(require 'anything-config)
(define-key global-map (kbd "M-x")
  (lambda ()
    "Execute emacs commands in anything"
    (interactive)
    (anything '(anything-c-source-emacs-commands))))
</code></pre>

<p>M-xとしたときに新しいバッファが開いて、
入力した文字列に部分一致する関数を一覧表示してくれます。</p>

<p>たとえば文字のサイズを変更したいときは、
とりあえず関係しそうな「font」だとか「scale」だとかを入力してみると、</p>

<pre><code>text-scale-increase
text-scale-decrease
</code></pre>

<p>というそれらしいものがすぐに見つけられます。</p>

<p>あるいは先に挙げた3つの関数
(describe-bindings、describe-function、describe-variable)
から推測して、「describe」と入力してみれば、
これら以外のヘルプやリファレンスが多数用意されていることがわかるはずです。</p>

<p>このようにうろおぼえだったり全然知らなかったりする機能を探したいとき、
anythingのインターフェイスは非常に強力です。</p>

<h2>おわり</h2>

<p>ヘルプを引いて快適emacs生活！</p>

<p>便利な機能を知らないがゆえに使わないのはもったいないので、
ぜひぜひヘルプを引きまくって効率アップを図ってみてください。</p>

<p><a href="http://www.kayac.com/recruit/career">カヤックではあわよくば必要な機能を自分でつくっちゃう技術者も募集しています！</a></p>
]]>
        

    </content>
</entry>

<entry>
    <title>技術者の集まるコミュニティ「jsdo.it」「wonderfl」のmeetup開催決定！</title>
    <link rel="alternate" type="text/html" href="http://tech.kayac.com/archive/jsdoit-wonderfl-meetup.html" />
    <id>tag:tech.kayac.com,2011:/2.198</id>

    <published>2011-08-25T02:11:02Z</published>
    <updated>2011-08-25T02:45:32Z</updated>

    <summary> JavaScript、HTML5、CSS 共有コミュニティ「jsdo.it - share JavaScript, HTML5 and CSS -（以下「jsdo.it」）」、世界一のFlashクリエイターコミュニティ「wonderfl build flash online（以下「wonderfl...</summary>
    <author>
        <name>nagata-hiroaki</name>
        <uri>http://d.hatena.ne.jp/handlename</uri>
    </author>
    
    <category term="jsdoit" label="jsdo.it" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="wonderfl" label="wonderfl" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://tech.kayac.com/">
        <![CDATA[<p>
JavaScript、HTML5、CSS 共有コミュニティ「jsdo.it - share JavaScript, HTML5 and CSS -（以下「jsdo.it」）」、世界一のFlashクリエイターコミュニティ「wonderfl build flash online（以下「wonderfl」）」のmeetup開催決定です！
</p>

<p>
昨年に引き続き、第2回の開催となります。
両サイトの制作メンバーと、サービスを利用されている皆様との交流会です。
</p>

<p>
ざっくり言うと、JavaScriptやFlashを通してみんなで集まって飲みたい！という会です。
また、サービスへのご意見、ご要望などみなさまの生の声をお聞かせ下さい。
</p>

<p>
お気軽にご参加くださいませ。
</p>

<table>
<tr><th>日時</th><td>2011/08/27 20:00 〜 23:00</td></tr>
<tr><th>場所</th><td>どんぶりカフェ bowls （神奈川県鎌倉市小町2-14-7）</td></tr>
<tr><th>申し込み</th><td><a href="http://atnd.org/events/19032" target="_blank">http://atnd.org/events/19032</a></td></tr>
<tr><th>予算</th><td>お一人様 4000円 （コース料理＆飲み放題）</td></tr>
<tr><th>無線LAN</th><td><a href="http://p.tl/k4Jk" target="_blank">http://p.tl/k4Jk</a></td></tr>
</table>

<p>
貸切となりますので、できるだけキャンセルはされないよう、お気をつけください。
</p>

<ul>
<li><a href="http://jsdo.it" target="_blank">jsdo.it - share JavaScript, HTML5 and CSS</a></li>
<li><a href="http://wonderfl.net" target="_blank">wonderfl build flash online</a></li>
</ul>
]]>
        

    </content>
</entry>

<entry>
    <title>カヤック仙台支社クローズだよ！エンジニア全員集合！</title>
    <link rel="alternate" type="text/html" href="http://tech.kayac.com/archive/sendai-event.html" />
    <id>tag:tech.kayac.com,2011:/2.197</id>

    <published>2011-08-18T02:06:43Z</published>
    <updated>2011-08-18T02:17:21Z</updated>

    <summary> 技術部ブログ 宣伝記事担当（仮）のnagataです。 前回の京都イベントに続き、 仙台でイベントを開くことになりました！ 今回はこの仙台イベントのご案内です。 面白法人カヤック主催　仙台のみなさまへ感謝の気持ちをこめて 『カヤック仙台支社クローズだよ！エンジニア全員集合！』 東北地方のWebクリエ...</summary>
    <author>
        <name>nagata-hiroaki</name>
        <uri>http://d.hatena.ne.jp/handlename</uri>
    </author>
    
    <category term="c" label="c" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="event" label="event" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="gcd" label="gcd" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="motion" label="motion" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://tech.kayac.com/">
        <![CDATA[<p>
技術部ブログ 宣伝記事担当（仮）のnagataです。
</p>

<p>
前回の<a href="http://tech.kayac.com/archive/kansai-study-session.html" target="_blank">京都イベント</a>に続き、
仙台でイベントを開くことになりました！
</p>

<p>
今回はこの仙台イベントのご案内です。
</p>

<hr />

<h1>
面白法人カヤック主催　仙台のみなさまへ感謝の気持ちをこめて<br />
『カヤック仙台支社クローズだよ！エンジニア全員集合！』
</h1>

<p>
東北地方のWebクリエイターの皆さんと一緒にWeb・スマートフォン・モバイルのコンテンツを開発をおこなってきた
3ヶ月限定の旅する支社「カヤック仙台支社」も今月で終了を迎えることとなりました。
</p>

<p>
最後に仙台のみなさまと何ができるのか。
みなさんと楽しくWebの世界でのモノづくりを語り合う時間をご一緒できればと思い、エンジニア交流会を開催させていただくことにしました！
</p>

<p>
当日は、鎌倉本社で日々開発に勤しむエンジニア2名が仙台支社に合流！
皆様と、これまで培ってきた技術・経験を互いに交換させて頂ければと思っております。
</p>

<p>
仙台のエンジニアのみなさん、全員集合！
みなさまのお越しを心よりお待ちしております。
</p>

<ul>
<li><a href="http://p.tl/yZel" target="_blank">仙台支社概要</a></li>
<li><a href="http://ameblo.jp/kayacsendai" target="_blank">仙台支社長 野崎のブログ</a></li>
</ul>

<h2>日時</h2>

<p>
8/21（日）13:00〜15:30
</p>

<table>
<tr><td>13:00〜14:00</td><td>勉強会</td></tr>
<tr><td>14:00〜15:30</td><td>交流会</td></tr>
</table>

<h2>勉強会詳細</h2>

<h3>技術+α！モーションでユーザーの心を動かすテクニック</h3>

<p>
発表者: <a href="http://www.kayac.com/team/shimada" target="_blank">嶋田俊宏</a>
</p>

<p>
技術者にもデザインへの理解が求められる今、"感情"や"雰囲気"など見えない物を"動き"によって伝える技術を紹介します。
"アニメーション"とはまた違う"モーション"テクニック。
絵心が無い人ほどオススメです！
</p>

<h3>CプログラマーのためのGCDを使ったお手軽iPhoneアプリプログラミング』</h3>

<p>
発表者: <a href="http://www.kayac.com/team/murase" target="_blank">村瀬大輔</a>（<a href="http://twitter.com/#!/typester" target="_blank">@typester</a>）
</p>

<p>
GCD を使った iOS アプリケーションの作り方の基本から、
実際に libcurl、libev などの既存の C ライブラリを GCD と組み合わせた実践的な例を通して、
Cプログラマーが GCD を使用することでいかに楽に開発できるかを紹介します！
</p>

<h2>場所</h2>

<p>
カヤック仙台支社<br />
宮城県仙台市宮城野区榴岡3-10-7 サンライン第66ビル8階C号室（<a href="http://p.tl/zYFT" target="_blank">地図</a>）
</p>

<h2>定員</h2>

<p>
30名
</p>

<p>
※会場の都合で、応募多数の場合は、参加者を制限させていただく場合がございます。
</p>

<h2>申し込み方法</h2>

<p>
<a href="http://p.tl/n7MG" target="_blank">申し込みフォーム</a>より、お申込みください。
</p>

<p>
※担当より、開催前に確定のご連絡をいたします。
</p>

<h2>お問い合わせ先</h2>

<p>
カヤック ギブ＆ギ部 <a mailto="event2011@ml.kayac.com">event2011@ml.kayac.com</a><br />
※メールの件名に<strong>【仙台支社勉強会お問い合わせ】</strong>と明記ください。
</p>

<p>
お知り合いの方とご一緒に参加も大歓迎です！
みなさまのご参加、心よりお待ちしております。
</p>

<hr />

<p>
仙台の皆様のご参加をお待ちしています！
</p>

<p>
<a href="http://www.kayac.com/recruit/career" target="_blank">カヤックではCプログラマーからモーションクリエイターまで、様々な「つくるひと」を募集中です！ </a>
</p>
]]>
        

    </content>
</entry>

<entry>
    <title>Google Mapのデザインを変更する方法（StyledMapの使い方）</title>
    <link rel="alternate" type="text/html" href="http://tech.kayac.com/archive/Google-Maps-API-Styled-Map-Wizard-StyledMapType.html" />
    <id>tag:tech.kayac.com,2011:/2.196</id>

    <published>2011-08-01T02:44:56Z</published>
    <updated>2011-08-01T02:50:38Z</updated>

    <summary>豚を丸焼きにするイベントで日焼けしました。ago（@kyo_ago）です。 すでにだいぶ時間がたってますが、7/7に弊社コーポレートサイトのリニューアルを行いました。 その際会社までの道順を紹介するページでGoogle Mapのデザインを変更したのでその方法をご紹介したいと思います。 StyledM...</summary>
    <author>
        <name>kyo_ago</name>
        
    </author>
    
    <category term="googlemapapi" label="googleMapAPI" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://tech.kayac.com/">
        <![CDATA[<p>豚を丸焼きにするイベントで日焼けしました。<a href="http://www.kayac.com/member/ago">ago</a>（<a href="http://twitter.com/kyo_ago">@kyo_ago</a>）です。</p>

<p>すでにだいぶ時間がたってますが、7/7に<a href="http://www.kayac.com/">弊社コーポレートサイト</a>のリニューアルを行いました。</p>

<p>その際<a href="http://www.kayac.com/company/map">会社までの道順を紹介するページ</a>でGoogle Mapのデザインを変更したのでその方法をご紹介したいと思います。</p>

<h3>StyledMapType</h3>

<p>Google Map Ver3以降は<a href="http://code.google.com/intl/ja/apis/maps/documentation/javascript/maptypes.html#StyledMaps">StyledMapType</a>というAPIが追加されており、この<a href="http://code.google.com/intl/ja/apis/maps/documentation/javascript/maptypes.html#StyledMaps">StyledMapType</a>を使うことで地図上の指定された要素に対して独自の色情報を設定することができます。</p>

<iframe src="http://code.google.com/intl/ja/apis/maps/documentation/javascript/examples/maptype-styled-simple.html" width="100%" height="200"></iframe>

<h3>色の変更方法</h3>

<p>色を変更するには<a href="http://code.google.com/intl/ja/apis/maps/documentation/javascript/maptypes.html#StyledMaps">StyledMapType</a> API経由で以下のようにJavaScriptのObjectを渡すことで実現できます。</p>

<pre><code>var styles = [
    {
        // 色を変更する対象の指定（document参照） 
        featureType: "road.local",
        // 色を変更するクラスの指定（document参照） 
        elementType: "geometry",
        // 色の指定 
        stylers: [ { hue: "#00ff00" } ]
    }
];
var colorName = 'MyColor';
var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(40.6743890, -73.9455),
    mapTypeControlOptions: {
        mapTypeIds: [colorName, google.maps.MapTypeId.ROADMAP]
    }
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.mapTypes.set(colorName, new google.maps.StyledMapType(styles, { name: colorName }));
map.setMapTypeId(colorName);
</code></pre>

<p>基本的には上記のコードをのようにObjectを設定しますが、コードを変更しながらの調整は大変なので<a href="http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html">Google Maps API Styled Map Wizard</a>も用意されています。</p>

<p>ただ、<a href="http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html">Google Maps API Styled Map Wizard</a>では「色の直接指定ができない」、「対象要素の指定が英語なのでわかりにくい」、「各種値を直接変更できない」などの問題があったので、jsdo.it上で各種値を直接変更できるコードを作成しました。</p>

<p><script type="text/javascript" src="http://jsdo.it/blogparts/n17c/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/kyo_ago/n17c" title="Google Maps API Styled Map Wizard（改）">Google Maps API Styled Map Wizard（改） - jsdo.it - share JavaScript, HTML5 and CSS</a></p></p>

<p>html5 formを使用しているため、Firefox5だとスライドバーが表示されません。  (Chromeで御覧ください)</p>

<p>Google Mapの色を変えたい場合使ってみてください。</p>

<p><a href="http://www.kayac.com/recruit/career">カヤックでは車輪を磨くのが好きな技術者も募集しています！</a></p>
]]>
        

    </content>
</entry>

</feed>

