<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">

  <title><![CDATA[ぽっちぽちにしてやんよ]]></title>
  <link href="http://pchw.github.io/atom.xml" rel="self"/>
  <link href="http://pchw.github.io/"/>
  <updated>2014-07-09T23:33:55+00:00</updated>
  <id>http://pchw.github.io/</id>
  <author>
    <name><![CDATA[pchw]]></name>
    
  </author>
  <generator uri="http://octopress.org/">Octopress</generator>

  
  <entry>
    <title type="html"><![CDATA[VoiceText Web APIのNode.jsライブラリ作った]]></title>
    <link href="http://pchw.github.io/blog/2014/07/10/voicetext/"/>
    <updated>2014-07-10T09:00:00+00:00</updated>
    <id>http://pchw.github.io/blog/2014/07/10/voicetext</id>
    <content type="html"><![CDATA[<p>GitHub: <a href="https://github.com/pchw/node-voicetext">https://github.com/pchw/node-voicetext</a></p>

<p>npm: <a href="https://www.npmjs.org/package/voicetext">https://www.npmjs.org/package/voicetext</a></p>

<h1>前説</h1>

<p>HOYAの<a href="https://cloud.voicetext.jp/webapi">VoiceText Web API</a>というのが公開されていたのでNode.jsから叩くライブラリを作った．</p>

<p>VoiceText Web API(β版)は<a href="http://dic.nicovideo.jp/a/%E3%82%B7%E3%83%A7%E3%82%A6%E5%90%9B">ショウ君</a>で有名な<a href="http://voicetext.jp/">VoiceText</a>がスタンドアロンのソフトじゃなくてWebで公開されたやつ．</p>

<p>しかも今のところ無償で利用出来る．</p>

<p>Voice Text Web API自体はHTTPSのPOSTでデータを投げつけたらwavファイルを送り返してくるゴキゲンなやつ．</p>

<h1>はじめにやること</h1>

<p>VoiceText Web APIを使うには，まず利用登録が必要．
<a href="https://cloud.voicetext.jp/webapi/api_keys/new">利用登録画面</a> から<code>名前``メールアドレス</code>などその他入れて登録すればすぐAPIキーが書かれたメールが来る．</p>

<h1>Node.jsからVoiceText Web APIを使う</h1>

<p>おもむろにnpm installする</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ npm install voicetext</span></code></pre></td></tr></table></div></figure>


<p><code>require('voicetext')</code>したらVoiceTextクラスが返ってくるからnewしつつAPIキーをブチ込む</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>VoiceText = require('voicetext');
</span><span class='line'>voice = new VoiceText('APIキーをここにコピペする');</span></code></pre></td></tr></table></div></figure>


<p>あとは色々パラメータをいじりつつメソッドチェーンして<code>speak</code>する．
基本的にメソッドは<a href="https://cloud.voicetext.jp/webapi/docs/api">公式ドキュメント</a>のパラメータに合わせるようにした．</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>voice
</span><span class='line'>.speaker(voice.SPEAKER.HIKARI)
</span><span class='line'>.emotion(voice.EMOTION.HAPPINESS)
</span><span class='line'>.emotion_level(voice.EMOTION_LEVEL.HIGH)
</span><span class='line'>.pitch(200)
</span><span class='line'>.speed(400)
</span><span class='line'>.volume(200)
</span><span class='line'>.speak('きょうもいちにちがんばるぞい', function(e, buf){
</span><span class='line'>})</span></code></pre></td></tr></table></div></figure>


<p>コールバックの第二引数にwavが詰まったBufferインスタンスが返ってくるので，
<code>fs.writeFile</code>とかしてwavに書き出せばもうすぐに再生できる形だ！</p>

<p>たぶん<a href="https://github.com/TooTallNate/node-wav">node-wav</a>とか使ったらそのまま再生出来るかも．</p>

<p>というわけでNode.js版のVoiceTextライブラリのリポジトリは<a href="https://github.com/pchw/node-voicetext">https://github.com/pchw/node-voicetext</a></p>

<p>chatopsなところはBOTとかに喋らせるといいんじゃないかな．</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[[Synth] ルーティングを増やしてみる]]></title>
    <link href="http://pchw.github.io/blog/2014/07/04/synth-routing/"/>
    <updated>2014-07-04T10:00:00+00:00</updated>
    <id>http://pchw.github.io/blog/2014/07/04/synth-routing</id>
    <content type="html"><![CDATA[<h1>前説</h1>

<p><a href="http://pchw.github.io/blog/2014/06/28/synth-with-vuejs/">前回</a>でAngularだけではなく自分の好きなクライアントサイドMVCフレームワークが使えるようになったところで，
次はサーバサイドでAPIの追加が必要になってくる頃合いなのでその辺りを触ってみる．</p>

<p><a href="http://synthjs.com">synth</a>は初回にも少し触れたが，<code>back/resources</code>以下がURLにマッピングされている感じになっている．
そのため，<code>back/resources</code>以下にディレクトリを掘って，その中のファイルに<code>exports.XXXXX</code>的なのを書いておけば，
そのままURLのルーティングに反映される．</p>

<p>実際の手順を追ってみる．</p>

<h1>backend側の改修</h1>

<p><code>back/resources</code> にディレクトリ追加する．</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ synth install -b bluebird
</span><span class='line'>$ mkdir back/resources/messages
</span><span class='line'>$ cat back/resources/messages/filename_you_want.coffee
</span><span class='line'>Promise = require 'bluebird'
</span><span class='line'>sample = -&gt;
</span><span class='line'>  new Promise (resolve)-&gt;
</span><span class='line'>    setTimeout -&gt;
</span><span class='line'>      resolve 'something'
</span><span class='line'>    , 3000
</span><span class='line'>
</span><span class='line'>exports.getIndex = (req, res)-&gt;
</span><span class='line'>  sample()
</span><span class='line'>  .then (d)-&gt;
</span><span class='line'>    something: d</span></code></pre></td></tr></table></div></figure>


<p>synthは<code>back/resources</code>内の<code>.js</code>または<code>.coffee</code>のファイルの<code>exports</code>を見るため，
ファイル名はなんでもいい，
分かりやすいのを付けるのがいいらしい．</p>

<p>サーバサイドはPromiseを返さないといけないらしいので，<a href="https://github.com/petkaantonov/bluebird">bluebird</a>を使ってPromiseを返してる．</p>

<h1>プリロードテンプレートの改修</h1>

<p><code>front/html</code>内もbackend側に合わせて変える必要がある．
（<code>preloadHTML</code>が必要な場合）</p>

<p><code>front/html</code>内は<code>back/resources</code>内と良く似ているが，ディレクトリに入れるファイル名は規則がある．
<code>exports.getIndex</code>とかだと<code>getIndex.jade</code>または<code>getIndex.html</code>というファイル名にする必要がある．
backend側のAPIと合わせなければいけない．</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ cat front/html/messages/getIndex.jade
</span><span class='line'>h2 Messages
</span><span class='line'>p </span></code></pre></td></tr></table></div></figure>


<h1>frontend側の改修</h1>

<p>今frontend側にはroutingを入れてなかったので，<code>/messages</code>にアクセスしてもVue側でエラーになる．
<code>v-view</code>と<code>Vue.component</code>を使ってルーティングするロジックを入れる．</p>

<p>まずは<code>index.jade</code>の方に<code>v-view</code>を</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ cat front/index.jade
</span><span class='line'>doctype html
</span><span class='line'>html
</span><span class='line'>  head
</span><span class='line'>    meta(charset='utf-8')
</span><span class='line'>    meta(http-equiv='X-UA-Compatible', content='IE=edge,chrome=1')
</span><span class='line'>    meta(name='viewport', content='width=device-width, initial-scale=1.0')
</span><span class='line'>    title= appName
</span><span class='line'>
</span><span class='line'>    for cssFile in cssFiles
</span><span class='line'>      link(rel="stylesheet", href=cssFile)
</span><span class='line'>
</span><span class='line'>    // Preloaded Data
</span><span class='line'>    script.
</span><span class='line'>      window.preloadedData = !{data};
</span><span class='line'>    for jsFile in jsFiles
</span><span class='line'>      script(src=jsFile)
</span><span class='line'>  body
</span><span class='line'>    h1= appName
</span><span class='line'>
</span><span class='line'>    div#content
</span><span class='line'>      div(v-view="currentView")
</span><span class='line'>
</span><span class='line'>    if preloadHTML
</span><span class='line'>      script.template(type="v-template", id="template")
</span><span class='line'>        != preloadHTML</span></code></pre></td></tr></table></div></figure>


<p>次に<code>front-app.coffee</code>の方にURLによって<code>v-view</code>の<code>currentView</code>をcomponentで置換するように書く．</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
<span class='line-number'>36</span>
<span class='line-number'>37</span>
<span class='line-number'>38</span>
<span class='line-number'>39</span>
<span class='line-number'>40</span>
<span class='line-number'>41</span>
<span class='line-number'>42</span>
<span class='line-number'>43</span>
<span class='line-number'>44</span>
<span class='line-number'>45</span>
<span class='line-number'>46</span>
<span class='line-number'>47</span>
<span class='line-number'>48</span>
<span class='line-number'>49</span>
<span class='line-number'>50</span>
<span class='line-number'>51</span>
<span class='line-number'>52</span>
<span class='line-number'>53</span>
<span class='line-number'>54</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ cat front/js/front-app.coffee
</span><span class='line'>$ -&gt;
</span><span class='line'>
</span><span class='line'>  routes = ['tweets', 'messages']
</span><span class='line'>
</span><span class='line'>  getRoute = -&gt;
</span><span class='line'>    path = location.hash.replace(/^#!\?/, '') or 'tweets'
</span><span class='line'>    if routes.indexOf(path) &gt; -1 then path else 'tweets'
</span><span class='line'>    
</span><span class='line'>  Vue.filter "formatDate", (v) -&gt;
</span><span class='line'>    v.replace /T|Z/g, " "
</span><span class='line'>
</span><span class='line'>  Vue.component 'tweets',
</span><span class='line'>    template: '#template'
</span><span class='line'>    created: -&gt;
</span><span class='line'>      @$data.newTweet = "write some tweet."
</span><span class='line'>      if typeof window.preloadedData isnt "undefined"
</span><span class='line'>        @$data = window.preloadedData
</span><span class='line'>        window.preloadedData = null
</span><span class='line'>      else
</span><span class='line'>        $.ajax
</span><span class='line'>          url: "/api/tweets"
</span><span class='line'>          success: (data) =&gt;
</span><span class='line'>            @$data.tweets = data?.tweets
</span><span class='line'>    methods:
</span><span class='line'>      publish: -&gt;
</span><span class='line'>        $.ajax
</span><span class='line'>          type: "POST"
</span><span class='line'>          url: "/api/tweets"
</span><span class='line'>          data:
</span><span class='line'>            content: @$data.newTweet
</span><span class='line'>
</span><span class='line'>          dataType: "json"
</span><span class='line'>          success: (tweet) =&gt;
</span><span class='line'>            @$data.tweets.unshift tweet
</span><span class='line'>            @$data.newTweet = ""
</span><span class='line'>
</span><span class='line'>    Vue.component 'messages',
</span><span class='line'>      template: '#template'
</span><span class='line'>      created: -&gt;
</span><span class='line'>        if typeof window.preloadedData isnt "undefined"
</span><span class='line'>          @$data = window.preloadedData
</span><span class='line'>          window.preloadedData = null
</span><span class='line'>        else
</span><span class='line'>          $.ajax
</span><span class='line'>            url: "/api/messages"
</span><span class='line'>            success: (data) =&gt;
</span><span class='line'>              @$data.something = data?.something
</span><span class='line'>
</span><span class='line'>  app = new Vue
</span><span class='line'>    el: "#content"
</span><span class='line'>    data:
</span><span class='line'>      currentView: do getRoute
</span><span class='line'>      routes: routes</span></code></pre></td></tr></table></div></figure>


<h1>アクセスしてみる</h1>

<p>http://localhost:5000/messages で <code>something</code>的な文字が出るページが表示されて，
http://localhost:5000/tweets で今までのTweets一覧が出るページが表示されるようになる</p>

<h1>まとめ</h1>

<ul>
<li>synthでルーティングを追加してみた</li>
<li>back/resource以下にディレクトリを増やしてファイルを突っ込むだけ</li>
<li>後から見た時にURLとディレクトリ構造が一致しているので分かりやすい</li>
<li>front側もプリロードのテンプレートがfront/html以下に同じディレクトリ構造があるので分かりやすい</li>
</ul>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[[Synth] SynthとVue.jsを組み合わせてみた]]></title>
    <link href="http://pchw.github.io/blog/2014/06/28/synth-with-vuejs/"/>
    <updated>2014-06-28T16:00:00+00:00</updated>
    <id>http://pchw.github.io/blog/2014/06/28/synth-with-vuejs</id>
    <content type="html"><![CDATA[<p><a href="http://pchw.github.io/blog/2014/06/27/synth/">前回</a>紹介したAPI-firstなフレームワーク<a href="http://synthjs.com">Synth</a>と<a href="http://vuejs.org">Vue.js</a>を組み合わせて使ってみる．</p>

<p>Synthの<code>$ synth new my_app</code>で生成されるコードは<a href="">Angular.js</a>を使うようになっている．
Angular.js派ではないのでVue.js版に書き換えてみる．
ついでに<a href="http://coffeescript.org">coffee-script</a>派なので，coffee-scriptで動くようにする．</p>

<p>ここまでのコードは<a href="http://pchw.github.io/blog/2014/06/27/synth/">前回</a>参照．Synth公式の<a href="http://www.synthjs.com/tutorial/">チュートリアル</a>を済ませた時点のコードです．</p>

<h1>モジュールの準備</h1>

<h2>Vue.jsインストール</h2>

<p>まず，Vue.jsを使うため，インストールする．</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ synth install -f vue
</span><span class='line'>$ synth install -f jquery</span></code></pre></td></tr></table></div></figure>


<h2>Angularのアンインストール</h2>

<p>Angularは使わないので抜く．<code>$ synth uninstall -f angular</code>とやりたいが，未実装っぽい．
あと<code>$ synth install -f</code>時に<code>.bower.json</code>に<code>main</code>キーがないと<code>front/js/jsFiles</code>に記載されないっぽい</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ cd front
</span><span class='line'>$ bower uninstall angular
</span><span class='line'>$ bower uninstall angular-route</span></code></pre></td></tr></table></div></figure>


<p><code>front/bower.json</code> からも消しておく．</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ cat front/bower.json
</span><span class='line'>{
</span><span class='line'>  "name": "my_app",
</span><span class='line'>  "private": true,
</span><span class='line'>  "dependencies": {
</span><span class='line'>    "vue": "~0.10.5",
</span><span class='line'>    "jquery": "~2.1.1"
</span><span class='line'>  }
</span><span class='line'>}</span></code></pre></td></tr></table></div></figure>


<p><code>front/js/jsFiles</code>から不要になったファイルを削除する</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ cat front/js/jsFiles 
</span><span class='line'>../bower_components/jquery/dist/jquery.js
</span><span class='line'>../bower_components/vue/dist/vue.js
</span><span class='line'>front-app.js</span></code></pre></td></tr></table></div></figure>


<h1>テンプレートの修正</h1>

<p>DirectivesをAngular用からVue用に書き換える．
dateの<code>medium</code>はVueでは無いので後で<code>formatDate</code>を定義することにする．</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ cat front/html/tweets/getIndex.jade
</span><span class='line'>textarea(v-text="newTweet")
</span><span class='line'>button(v-on="click: publish()", v-attr="disabled: newTweet.length == 0") Publish
</span><span class='line'>ul.tweet-timeline
</span><span class='line'>  li.tweet(v-repeat="tweet : tweets")
</span><span class='line'>    .content 
</span><span class='line'>    .date </span></code></pre></td></tr></table></div></figure>


<p><code>front/index.jade</code> もVue用に色々修正</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>doctype html
</span><span class='line'>html
</span><span class='line'>  head
</span><span class='line'>    meta(charset='utf-8')
</span><span class='line'>    meta(http-equiv='X-UA-Compatible', content='IE=edge,chrome=1')
</span><span class='line'>    meta(name='viewport', content='width=device-width, initial-scale=1.0')
</span><span class='line'>    title= appName
</span><span class='line'>
</span><span class='line'>    for cssFile in cssFiles
</span><span class='line'>      link(rel="stylesheet", href=cssFile)
</span><span class='line'>
</span><span class='line'>    // Preloaded Data
</span><span class='line'>    script.
</span><span class='line'>      window.preloadedData = !{data};
</span><span class='line'>    for jsFile in jsFiles
</span><span class='line'>      script(src=jsFile)
</span><span class='line'>  body
</span><span class='line'>    h1= appName
</span><span class='line'>
</span><span class='line'>    div#content
</span><span class='line'>
</span><span class='line'>    if preloadHTML
</span><span class='line'>      script.template(type="v-template", id="template")
</span><span class='line'>        != preloadHTML</span></code></pre></td></tr></table></div></figure>


<h2>分からなかった点</h2>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>script(type="text/ng-template", id="#{preloadHTMLPath}")</span></code></pre></td></tr></table></div></figure>


<p>とかなっててngRouteの<code>templateUrl</code>らへんでバインドしてた方法のVue版が分からなかったから普通にid指定にしてしまった．</p>

<h1>Vueのバインディングとcoffee-script化</h1>

<p><code>front/front-app.js</code>を消して<code>front/front-app.coffee</code>にしてVue版にする</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ -&gt;
</span><span class='line'>  Vue.filter "formatDate", (v) -&gt;
</span><span class='line'>    v.replace /T|Z/g, " "
</span><span class='line'>
</span><span class='line'>  content = new Vue
</span><span class='line'>    el: "#content"
</span><span class='line'>    template: "#template"
</span><span class='line'>    data:
</span><span class='line'>      newTweet: "write some tweet."
</span><span class='line'>
</span><span class='line'>    created: -&gt;
</span><span class='line'>      if typeof window.preloadedData isnt "undefined"
</span><span class='line'>        @$data = window.preloadedData
</span><span class='line'>        window.preloadedData = null
</span><span class='line'>      else
</span><span class='line'>        $.ajax
</span><span class='line'>          url: "/api/tweets"
</span><span class='line'>          success: (data) =&gt;
</span><span class='line'>            @$data.tweets = data?.tweets
</span><span class='line'>
</span><span class='line'>
</span><span class='line'>    methods:
</span><span class='line'>      publish: -&gt;
</span><span class='line'>        $.ajax
</span><span class='line'>          type: "POST"
</span><span class='line'>          url: "/api/tweets"
</span><span class='line'>          data:
</span><span class='line'>            content: @$data.newTweet
</span><span class='line'>
</span><span class='line'>          dataType: "json"
</span><span class='line'>          success: (tweet) =&gt;
</span><span class='line'>            @$data.tweets.unshift tweet
</span><span class='line'>            @$data.newTweet = ""</span></code></pre></td></tr></table></div></figure>


<p>合わせて<code>front/js/jsFiles</code>も書き換え</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ cat front/js/jsFiles 
</span><span class='line'>../bower_components/jquery/dist/jquery.js
</span><span class='line'>../bower_components/vue/dist/vue.js
</span><span class='line'>front-app.coffee</span></code></pre></td></tr></table></div></figure>


<p><img src="https://cloud.githubusercontent.com/assets/1183484/3419737/e84b3ec4-fe76-11e3-8d09-132d59ed6c48.png" alt="image" />
これでめでたくTweetが表示されて，投稿できるようになった．</p>

<h1>まとめ</h1>

<ul>
<li>synthのAngularで動いてたのをVue版に書き直してみた</li>
<li>そんなに変更は難しくなかった．これから新しいクライアントサイドのライブラリが出てきてもサッと変えてテスト出来そう．</li>
<li>よく考えたら当たり前だけどbackend側全然いじってない</li>
<li>API増やしたり，色々するとまたbackend側のディレクトリ構成とかfrontのhtml以下のディレクトリ構成とかハマるポイントが有るけどそれは次の話にする．</li>
</ul>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[[Synth] Synthを試してみた]]></title>
    <link href="http://pchw.github.io/blog/2014/06/27/synth/"/>
    <updated>2014-06-27T07:00:00+00:00</updated>
    <id>http://pchw.github.io/blog/2014/06/27/synth</id>
    <content type="html"><![CDATA[<p><img src="https://cloud.githubusercontent.com/assets/1183484/3405341/2b8563a0-fd7c-11e3-8782-4eb6dbd4a420.png" alt="synth" /></p>

<h1>tl;dr</h1>

<ul>
<li>SynthっていうAPI-firstなWebフレームワークがある</li>
<li>Turoialを回してみた</li>
<li>RESTfullなAPIとディレクトリ構造，exportsのI/Fを合わせる規約で見通し良い</li>
<li>プリロードの仕組みで初めからレンダリングできるよ！</li>
<li>まだ超beta．</li>
</ul>


<h1>前説</h1>

<p><a href="http://www.synthjs.com/">Synth</a> はNode.js製のAPI-firstなWebフレームワーク．
<code>back/resources</code>ディレクトリに.js/.coffeeを配置して，<code>exports.get = ...</code>とか<code>exports.getIndex =</code>とか<code>exports.&lt;method&gt;&lt;optional: ActionName&gt;</code>な形で書いておくと，<code>myapp/back/resources/memoes</code>が<code>GET /api/memoes</code>とかに答えてくれる．</p>

<p>ひとまず，<a href="http://www.synthjs.com/tutorial/">Tutorial</a> を回して，Angular以外を使う道を探ろう．</p>

<p>あと超betaらしいから地雷踏む勇気が無い人はProductionに使えない．</p>

<h1>インストールとセットアップ</h1>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ npm install -g synth
</span><span class='line'>$ $ synth new my_app
</span><span class='line'>Successfully created a new synth app in my_app</span></code></pre></td></tr></table></div></figure>


<h2>ディレクトリ構造</h2>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ cd my_app
</span><span class='line'>$ ls
</span><span class='line'>back       front      synth.json
</span><span class='line'>$ ls front/
</span><span class='line'>bower.json css        html       images     index.jade js         misc
</span><span class='line'>$ ls back/
</span><span class='line'>back-app.js       generateTweets.js package.json      resources</span></code></pre></td></tr></table></div></figure>


<p>こんな感じになっている．</p>

<p><strong>front</strong>はクライアントサイドのやつが詰まってる．
<strong>back</strong>はサーバサイドのやつが詰まってる．</p>

<p><code>synth new</code>はTwitterクローンが生成されるみたい．</p>

<h2>パッケージインストール</h2>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ synth install -b
</span><span class='line'>$ synth install -f</span></code></pre></td></tr></table></div></figure>


<p>でそれぞれfrontの<code>bower install</code>とbackの<code>npm install</code>が走る．</p>

<h2>起動</h2>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ synth server -p 5000
</span><span class='line'>synth (in development mode) is now listening on port 5000</span></code></pre></td></tr></table></div></figure>


<p>http://localhost:5000 にアクセスすると表示される．
<code>Synth App</code>とか出て何も表示されない．Tweetを生成してあげないといけないらしい．</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ node back/generateTweets.js</span></code></pre></td></tr></table></div></figure>


<p>そしてリロードするとTweetが出た．</p>

<h2>処理の追加</h2>

<p>このままだとただのTweet表示君なので，Tweetする機能を付ける．</p>

<h3>backend側</h3>

<p><code>back/resources/tweets/</code>に<code>.js</code>ファイルを置いて<code>exports.post = ...</code>を書けばいい．</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ touch back/resources/tweets/createTweets.js</span></code></pre></td></tr></table></div></figure>




<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ cat back/resources/tweets/createTweets.js 
</span><span class='line'>  exports.post = function(req, res) {
</span><span class='line'>    if (!req.body.content) {
</span><span class='line'>      throw 422;
</span><span class='line'>    }
</span><span class='line'>    return req.db.collection('tweets').insert({
</span><span class='line'>      content: req.body.content.slice(0, 140),
</span><span class='line'>      created_at: new Date
</span><span class='line'>    });
</span><span class='line'>  };</span></code></pre></td></tr></table></div></figure>


<p>ちなみに<code>back/resources/tweets/createTweets.coffee</code>を置いたら読んでくれなかった．
きっと全部<code>.coffee</code>にしないとダメ．とりあえず先に行く．</p>

<h3>frontend側</h3>

<p><code>/front/js/controllers/tweets.js</code> に処理を追記．</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ cat front/js/controllers/tweets.js 
</span><span class='line'>angular.module('my_app')
</span><span class='line'>.controller('tweetsController', function ($scope, $http, data) {
</span><span class='line'>  $scope.tweets = data.tweets;
</span><span class='line'>  $scope.publish = function () {
</span><span class='line'>    $http.post('/api/tweets', { content: $scope.newTweet })
</span><span class='line'>    .success(function (tweet) {
</span><span class='line'>      $scope.tweets.unshift(tweet);
</span><span class='line'>    });
</span><span class='line'>    $scope.newTweet = '';
</span><span class='line'>  };</span></code></pre></td></tr></table></div></figure>


<p>こうする．</p>

<p>HTMLの方もボタンを付けたり，textareaを付けたりしないといけない．</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ cat front/html/tweets/getIndex.jade
</span><span class='line'>textarea(ng-model="newTweet")
</span><span class='line'>button(ng-click="publish()", ng-disabled="newTweet.length == 0") Publish
</span><span class='line'>ul.tweet-timeline
</span><span class='line'>  li.tweet(ng-repeat="tweet in tweets")
</span><span class='line'>    .content 
</span><span class='line'>    .date </span></code></pre></td></tr></table></div></figure>


<p>こうする．</p>

<h3>確認</h3>

<p>もう一度 http://localhost:5000 にアクセスすれば，textareaとpublishボタンがある．
hogeとか書いてpublishすればめでたくTweetが追加される．</p>

<h2>Preload</h2>

<p><a href="http://www.synthjs.com/">Synth</a>の強みとしてプリロードの機能があるらしい．
backend側でpromiseで返せば，front側で初めからデータを持った状態でレンダリング出来る．
<a href="https://github.com/rendrjs/rendr">rendr</a> みたいなものか．</p>

<p><code>front/index.jade</code>を確認してみると，</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>// Preloaded Data
</span><span class='line'>script.
</span><span class='line'>  var preloadedData = !{data};</span></code></pre></td></tr></table></div></figure>


<p>とか</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>if preloadHTML
</span><span class='line'>  script(type="text/ng-template", id="#{preloadHTMLPath}")
</span><span class='line'>    != preloadHTML</span></code></pre></td></tr></table></div></figure>


<p>ここらへんがプリロードの鍵らしい．</p>

<p><a href="https://github.com/JonAbrams/synth/blob/7085c027881fbc8dcfba2f539508fb82df0a833d/lib/frontendRenderer.js#L26">ソース</a> を覗いてみると，</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>var renderData = {
</span><span class='line'>  appName: req.appName || 'Synth App',
</span><span class='line'>  jsFiles: assets.jsFiles,
</span><span class='line'>  cssFiles: assets.cssFiles,
</span><span class='line'>  data: prepareData(preload.data),
</span><span class='line'>  preloadHTML: preload.html,
</span><span class='line'>  preloadHTMLPath: htmlPath
</span><span class='line'>};
</span><span class='line'>for (var key in res.renderData) {
</span><span class='line'>  renderData[key] = res.renderData[key];
</span><span class='line'>}</span></code></pre></td></tr></table></div></figure>


<p>がres.renderに渡ってるっぽい．</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>exports.get = function(req, res) {
</span><span class='line'>  :
</span><span class='line'>  res.renderData[hoge] = 'fuga'
</span><span class='line'>  :
</span><span class='line'>}</span></code></pre></td></tr></table></div></figure>


<p>とかbackend側でやってあげれば，front側にデータを渡せそう．</p>

<h2>Angular以外で使ってみる</h2>

<p>時間が来たから，また夜にでも続き書く．</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[coffee-scriptでpower-assertを使ったテストを書く]]></title>
    <link href="http://pchw.github.io/blog/2014/06/11/power-assert/"/>
    <updated>2014-06-11T00:20:00+00:00</updated>
    <id>http://pchw.github.io/blog/2014/06/11/power-assert</id>
    <content type="html"><![CDATA[<h2>tl;dr</h2>

<ol>
<li>@t_wadaさん神</li>
<li>coffee-scriptで<a href="https://github.com/twada/power-assert">power-assert</a>使うときは<a href="https://github.com/twada/espower-coffee">espower-coffee</a>を使おう</li>
</ol>


<h2>あらすじ</h2>

<p>ちょっと前に話題になっていた<a href="https://github.com/twada/power-assert">power-assert</a>を使ってみようとしました．</p>

<p>こんな感じのを用意しました．</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>assert = require 'power-assert'
</span><span class='line'>
</span><span class='line'>describe 'array', -&gt;
</span><span class='line'>  beforeEach -&gt;
</span><span class='line'>    @arr = [1,2,3]
</span><span class='line'>  describe '#indexOf()', -&gt;
</span><span class='line'>    it 'should return index when the value is present', -&gt;
</span><span class='line'>      zero = 0
</span><span class='line'>      two = 2
</span><span class='line'>      assert(@arr.indexOf(zero) is two)</span></code></pre></td></tr></table></div></figure>


<p>んで</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ mocha --require intelli-espower-loader test/power-assert.coffee</span></code></pre></td></tr></table></div></figure>


<p>みたいに実行したら</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>  array
</span><span class='line'>    #indexOf()
</span><span class='line'>      1) should return index when the value is present
</span><span class='line'>
</span><span class='line'>
</span><span class='line'>  0 passing (4ms)
</span><span class='line'>  1 failing
</span><span class='line'>
</span><span class='line'>  1) array #indexOf() should return index when the value is present:
</span><span class='line'>     AssertionError: false == true</span></code></pre></td></tr></table></div></figure>


<p>あれ，，，ログがショボい，，，</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>  array
</span><span class='line'>    #indexOf()
</span><span class='line'>      1) should return index when the value is present
</span><span class='line'>
</span><span class='line'>
</span><span class='line'>  0 passing (10ms)
</span><span class='line'>  1 failing
</span><span class='line'>
</span><span class='line'>  1) array #indexOf() should return index when the value is present:
</span><span class='line'>     AssertionError: # /Users/pochi/Documents/development/(snip)/test/power-assert.js:16
</span><span class='line'>
</span><span class='line'>assert(this.arr.indexOf(zero) === two)
</span><span class='line'>            |   |       |     |   |   
</span><span class='line'>            |   |       |     |   2   
</span><span class='line'>            |   -1      0     false   
</span><span class='line'>            [1,2,3]                   
</span><span class='line'>
</span><span class='line'>[number] two
</span><span class='line'>=&gt; 2
</span><span class='line'>[number] this.arr.indexOf(zero)
</span><span class='line'>=&gt; -1
</span></code></pre></td></tr></table></div></figure>


<p>こんな感じのを期待したのに！！</p>

<blockquote class="twitter-tweet" lang="en"><p>power-assert使ってみたのに思ったように出力でない．「AssertionError: false == true」って出てしまった</p>&mdash; ぽち＠ (@pchw) <a href="https://twitter.com/pchw/statuses/475911097069744130">June 9, 2014</a></blockquote>


<script async src="http://pchw.github.io//platform.twitter.com/widgets.js" charset="utf-8"></script>


<p>とか言ってたら<a href="https://twitter.com/yosuke_furukawa">@yosuke_furukawa</a>が色々助言をくれて，こうなって</p>

<blockquote class="twitter-tweet" data-conversation="none" lang="en"><p><a href="https://twitter.com/pchw">@pchw</a> intelli-espower-loaderへのpull request案件な気がしてきましたね。 <a href="https://t.co/F5tHM0NDqh">https://t.co/F5tHM0NDqh</a></p>&mdash; Yosuke FURUKAWA (@yosuke_furukawa) <a href="https://twitter.com/yosuke_furukawa/statuses/475914266860482560">June 9, 2014</a></blockquote>


<script async src="http://pchw.github.io//platform.twitter.com/widgets.js" charset="utf-8"></script>


<p>さらに中をみていくと</p>

<blockquote class="twitter-tweet" lang="en"><p>いや待てよこれ*.coffeeにしてもならないぞ，，，espower-loaderの中の方まで見ていかないと</p>&mdash; ぽち＠ (@pchw) <a href="https://twitter.com/pchw/statuses/475914928562266112">June 9, 2014</a></blockquote>


<script async src="http://pchw.github.io//platform.twitter.com/widgets.js" charset="utf-8"></script>


<p>さらに色々調べてたら数カ月前の@mizchiの発言が</p>

<blockquote class="twitter-tweet" lang="en"><p>昨日power-asset 使おうとしてみたけど coffeeと espower が上手く動かんかった</p>&mdash; 俺は平気だよ (@mizchi) <a href="https://twitter.com/mizchi/statuses/468274394368708608">May 19, 2014</a></blockquote>


<script async src="http://pchw.github.io//platform.twitter.com/widgets.js" charset="utf-8"></script>


<p>という感じで動作しない感じでした．</p>

<p>TypeScriptでの前例があるように</p>

<blockquote class="twitter-tweet" data-conversation="none" lang="en"><p><a href="https://twitter.com/pchw">@pchw</a> なるほど。。vvakameさんがtypescriptでどうやってやってんだろーと思って中身見たらgrunt-espower使ってたのでそういうことですね。 <a href="https://t.co/mFYljl9QRw">https://t.co/mFYljl9QRw</a></p>&mdash; Yosuke FURUKAWA (@yosuke_furukawa) <a href="https://twitter.com/yosuke_furukawa/statuses/475915916807376896">June 9, 2014</a></blockquote>


<script async src="http://pchw.github.io//platform.twitter.com/widgets.js" charset="utf-8"></script>


<p>のようにgruntを使ってjsにコンパイルしてそれを食わせるという方法しか無いように思えた時に @t_wada 降臨．</p>

<blockquote class="twitter-tweet" data-conversation="none" lang="en"><p><a href="https://twitter.com/pchw">@pchw</a> <a href="https://twitter.com/yosuke_furukawa">@yosuke_furukawa</a> 反応遅れてすみません。 CoffeeScript で power-assert 使いたい人意外といらっしゃるみたいですね……Node のローダーではちょっと向かい風ですが、手を考えます <a href="https://t.co/P1WY2nV1fz">https://t.co/P1WY2nV1fz</a></p>&mdash; Takuto Wada (@t_wada) <a href="https://twitter.com/t_wada/statuses/475935334874636288">June 9, 2014</a></blockquote>


<script async src="http://pchw.github.io//platform.twitter.com/widgets.js" charset="utf-8"></script>


<p>そしてその翌日</p>

<blockquote class="twitter-tweet" data-conversation="none" lang="en"><p><a href="https://twitter.com/pchw">@pchw</a> <a href="https://twitter.com/yosuke_furukawa">@yosuke_furukawa</a> espower-coffee を作ってみたので試してみてください <a href="https://t.co/U8NM7Eji9k">https://t.co/U8NM7Eji9k</a></p>&mdash; Takuto Wada (@t_wada) <a href="https://twitter.com/t_wada/statuses/476235243221835776">June 10, 2014</a></blockquote>


<script async src="http://pchw.github.io//platform.twitter.com/widgets.js" charset="utf-8"></script>


<p><a href="https://github.com/twada/espower-coffee">espower-coffee</a> が公開されてました！</p>

<h2>使い方</h2>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ npm install espower-coffee --save-dev
</span><span class='line'>$ mocha --require 'espower-coffee/guess' test/**/*.coffee</span></code></pre></td></tr></table></div></figure>


<p><code>grunt-mocha-test</code>を使っているなら</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>mochaTest:
</span><span class='line'>    options:
</span><span class='line'>      reporter: 'spec'
</span><span class='line'>      require: 'espower-coffee/guess'
</span><span class='line'>      colors: true
</span><span class='line'>      timeout: 10000
</span><span class='line'>    src: [
</span><span class='line'>      'test/power-assert.coffee'
</span><span class='line'>      ] </span></code></pre></td></tr></table></div></figure>


<p>こんな感じ．<code>compilers: 'coffee:coffee-script'</code>は要らないみたいです．</p>

<p>すると</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>  array
</span><span class='line'>    #indexOf()
</span><span class='line'>      1) should return index when the value is present
</span><span class='line'> 
</span><span class='line'> 
</span><span class='line'>  0 passing (10ms)
</span><span class='line'>  1 failing
</span><span class='line'> 
</span><span class='line'>  1) array #indexOf() should return index when the value is present:
</span><span class='line'>     AssertionError: # /Users/pochi/Documents/development/(snip)/test/power-assert.coffee:15
</span><span class='line'> 
</span><span class='line'>assert(this.arr.indexOf(zero) === two)
</span><span class='line'>            |   |       |     |   |   
</span><span class='line'>            |   |       |     |   2   
</span><span class='line'>            |   -1      0     false   
</span><span class='line'>            [1,2,3]                   
</span><span class='line'> 
</span><span class='line'>[number] two
</span><span class='line'>=&gt; 2
</span><span class='line'>[number] this.arr.indexOf(zero)
</span><span class='line'>=&gt; -1</span></code></pre></td></tr></table></div></figure>


<p>こんなのが得られて，coffee-scriptでpower-assertが使えました！</p>

<p>ちなみに他のファイルとかは<a href="https://gist.github.com/pchw/3fbed13bd69fb31faca6">こんな感じ</a>でやりました．</p>

<h2>注意点</h2>

<ul>
<li>coffee-scriptは1.7.1以上を要求します</li>
<li>coffee-errorsなどを併用するとショボいログに戻ります</li>
<li>AssertionErrorの行数が実際の.coffeeの行数ではありません．（多段SourceMap対応するまでは仕様とのこと）</li>
</ul>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Backbone.jsでView.renderを書く場合のセオリー]]></title>
    <link href="http://pchw.github.io/blog/2013/12/04/backbone-view/"/>
    <updated>2013-12-04T05:26:00+00:00</updated>
    <id>http://pchw.github.io/blog/2013/12/04/backbone-view</id>
    <content type="html"><![CDATA[<p>こんにちは、ぽちです．
みなさんBackbone.js使ってますか？Marionetteですか？Chaplinですか？それともngが付いちゃうアレですか？</p>

<p>さて今日は、Backbone.jsのお話です．</p>

<p>タイトルは「Backbone.jsでrenderした時に空divを無くす方法」とかにしようと思ったのですが，なんだかそれに限らない気もしたのでブチあげました．</p>

<h2>時間がない人へのまとめ</h2>

<p>忙しい人のために，一言でまとめるとこうです．</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>Class HogeView extends Backbone.View
</span><span class='line'>  initialize: -&gt;
</span><span class='line'>    @listenTo @model, ‘change’, render
</span><span class='line'>    do @render
</span><span class='line'>  render:-&gt;
</span><span class='line'>    $oldel = @$el
</span><span class='line'>    $newel = $(&lt;render HTML by template engine&gt;)
</span><span class='line'>    @setElement $newel
</span><span class='line'>    $oldel.replaceWith $newel</span></code></pre></td></tr></table></div></figure>


<p>次の段落からは簡単な形から流れに沿って最終系になるように説明していきます．</p>

<h2>ベーシックなよくある書き方</h2>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>class HogeView extends Backbone.View
</span><span class='line'>  el: '.hoge'
</span><span class='line'>  initialize: -&gt;
</span><span class='line'>    do @render
</span><span class='line'>  render:-&gt;
</span><span class='line'>    @$el.html ich.hoge_tmpl()
</span><span class='line'>
</span><span class='line'>&lt;hoge.jade&gt;
</span><span class='line'>.hoge
</span><span class='line'>script#hoge_tmpl(type="text/html")
</span><span class='line'>  p this is hoge</span></code></pre></td></tr></table></div></figure>


<p>よくあるのだと、こういう書き方しますよね．
この場合、elを指定しているので、既に存在する要素にViewを紐付けています．</p>

<p><em>ここで使っているテンプレートエンジンは<a href="http://icanhazjs.com/">ICanHaz.js</a>です．</em></p>

<h2>要素を作成する場合</h2>

<p>次は，既存のの要素ではなく，あるボタンをクリックして
要素を作成するケースを考えてみてください．
クリック時に始めてclassがnewされ，それによってDOMに追加されるケースです．</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>Class HogeView extends Backbone.View
</span><span class='line'>  initialize: -&gt;
</span><span class='line'>    do render
</span><span class='line'>  render:-&gt;
</span><span class='line'>    @$el.html(&lt;HTML rendering by template engine&gt;)
</span><span class='line'>
</span><span class='line'>Class ButtonView extends Backbone.View
</span><span class='line'>  el: '.add-btn'
</span><span class='line'>  events:
</span><span class='line'>    ‘click': 'append'
</span><span class='line'>  append:-&gt;
</span><span class='line'>    v = new HogeView()
</span><span class='line'>    @$el.append(v.el)
</span><span class='line'>
</span><span class='line'>&lt;hoge.jade&gt;
</span><span class='line'>a.add-btn add
</span><span class='line'>script#hoge_tmpl(type="text/html")
</span><span class='line'>  .hoge
</span><span class='line'>    p this is hoge </span></code></pre></td></tr></table></div></figure>


<p>こんな感じですかね．</p>

<p>ここで問題が．
Hogeviewにはelを指定していないので，new時にデフォルトで新しい空divがelになります．
そのあと，renderで.htmlするので空divの中にテンプレートの内容が入ったものがelになります．</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;div&gt;
</span><span class='line'>  &lt;div class=“hoge”&gt;
</span><span class='line'>    &lt;p&gt;this is hoge&lt;/p&gt;
</span><span class='line'>  &lt;/div&gt;
</span><span class='line'>&lt;/div&gt;</span></code></pre></td></tr></table></div></figure>


<h2>className/tagNameの導入？</h2>

<p>これを回避するには，<code>className</code>や<code>tagName</code>といったpropertyを使うのが一つの方法です．</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>class HogeView extends Backbone.View
</span><span class='line'>  className: '.hoge'
</span><span class='line'>  initialize: -&gt;
</span><span class='line'>    do @render
</span><span class='line'>  render:-&gt;
</span><span class='line'>    @$el.html ich.hoge_tmpl()
</span><span class='line'>
</span><span class='line'>class ButtonView extends Backbone.View
</span><span class='line'>  el: '.add-btn'
</span><span class='line'>  events:
</span><span class='line'>    'click': 'append'
</span><span class='line'>  append:-&gt;
</span><span class='line'>    v = new HogeView()
</span><span class='line'>    @$el.append v.el
</span><span class='line'>
</span><span class='line'>&lt;hoge.jade&gt;
</span><span class='line'>a.add-btn add
</span><span class='line'>script#hoge_tmpl(type="text/html")
</span><span class='line'>    p this is hoge </span></code></pre></td></tr></table></div></figure>


<p>ただし，<code>className</code>を用いるためにテンプレートの一番親の要素(<code>.hoge</code>)をHogeViewに持ってきたため見通しが悪い．</p>

<h2>setElementを使う</h2>

<p>そこで<code>setElement</code>を使います．</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>class HogeView extends Backbone.View
</span><span class='line'>  initialize: -&gt;
</span><span class='line'>    do @render
</span><span class='line'>  render:-&gt;
</span><span class='line'>    @setElement ich.hoge_tmpl()
</span><span class='line'>
</span><span class='line'>class ButtonView extends Backbone.View
</span><span class='line'>  el: '.add-btn'
</span><span class='line'>  events:
</span><span class='line'>    'click': 'append'
</span><span class='line'>  append:-&gt;
</span><span class='line'>    v = new HogeView()
</span><span class='line'>    @$el.append v.el
</span><span class='line'>
</span><span class='line'>&lt;hoge.jade&gt;
</span><span class='line'>a.add-btn add
</span><span class='line'>script#hoge_tmpl(type="text/html")
</span><span class='line'>  .hoge
</span><span class='line'>    p this is hoge </span></code></pre></td></tr></table></div></figure>


<p>とすると空divに挟まずに設定できます．</p>

<h2>Modelの更新をトリガーにViewを更新する場合</h2>

<p>この方法でも，以下のケースのように一度<code>setElement</code>をしたものを更に<code>setElement</code>で置き換えるようなコードでは正しく動作しません．</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>class HogeModel extends Backbone.Model
</span><span class='line'>  defaults:
</span><span class='line'>    index: 0
</span><span class='line'>  initialize: -&gt;
</span><span class='line'>    @listenTo Backbone, 'inc', @inc
</span><span class='line'>  inc: -&gt;
</span><span class='line'>    i = @get 'index'
</span><span class='line'>    @set 'index', i+1
</span><span class='line'>class HogeView extends Backbone.View
</span><span class='line'>  initialize: -&gt;
</span><span class='line'>    @index = 0
</span><span class='line'>    @listenTo @model, 'change', @render
</span><span class='line'>    do @render
</span><span class='line'>  render:-&gt;
</span><span class='line'>    @setElement ich.hoge_tmpl
</span><span class='line'>      index: @index++
</span><span class='line'>
</span><span class='line'>class ButtonView extends Backbone.View
</span><span class='line'>  el: '.add-btn'
</span><span class='line'>  events:
</span><span class='line'>    'click': 'render'
</span><span class='line'>  initialize: -&gt;
</span><span class='line'>    v = new HogeView
</span><span class='line'>      model: new HogeModel()
</span><span class='line'>    @$el.append v.el
</span><span class='line'>  render:-&gt;
</span><span class='line'>    Backbone.trigger 'inc'
</span><span class='line'>
</span><span class='line'>&lt;hoge.jade&gt;
</span><span class='line'>script#hoge-tmpl(type=“text/html“)
</span><span class='line'>  .hoge
</span><span class='line'>    p this is hoge</span></code></pre></td></tr></table></div></figure>


<h2>最終系</h2>

<p>これを解決するにはこのようにしてあげれば良いです．</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>class HogeModel extends Backbone.Model
</span><span class='line'>  defaults:
</span><span class='line'>    index: 0
</span><span class='line'>  initialize: -&gt;
</span><span class='line'>    @listenTo Backbone, 'inc', @inc
</span><span class='line'>  inc: -&gt;
</span><span class='line'>    i = @get 'index'
</span><span class='line'>    @set 'index', i+1
</span><span class='line'>class HogeView extends Backbone.View
</span><span class='line'>  initialize: -&gt;
</span><span class='line'>    @index = 0
</span><span class='line'>    @listenTo @model, 'change', @render
</span><span class='line'>    do @render
</span><span class='line'>  render:-&gt;
</span><span class='line'>    $oldel = @$el
</span><span class='line'>    $newel = ich.hoge_tmpl
</span><span class='line'>      index: @index++
</span><span class='line'>    @setElement $newel
</span><span class='line'>    $oldel.replaceWith $newel
</span><span class='line'>
</span><span class='line'>class ButtonView extends Backbone.View
</span><span class='line'>  el: '.add-btn'
</span><span class='line'>  events:
</span><span class='line'>    'click': 'render'
</span><span class='line'>  initialize: -&gt;
</span><span class='line'>    v = new HogeView
</span><span class='line'>      model: new HogeModel()
</span><span class='line'>    @$el.append v.el
</span><span class='line'>  render:-&gt;
</span><span class='line'>    Backbone.trigger 'inc'
</span><span class='line'>
</span><span class='line'>&lt;hoge.jade&gt;
</span><span class='line'>script#hoge-tmpl(type=“text/html“)
</span><span class='line'>  .hoge
</span><span class='line'>    p this is hoge</span></code></pre></td></tr></table></div></figure>


<h2>Conclusion</h2>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>Class HogeView extends Backbone.View
</span><span class='line'>  initialize: -&gt;
</span><span class='line'>    @listenTo @model, ‘change’, render
</span><span class='line'>    do @render
</span><span class='line'>  render:-&gt;
</span><span class='line'>    $oldel = @$el
</span><span class='line'>    $newel = $(&lt;render HTML by template engine&gt;)
</span><span class='line'>    @setElement $newel
</span><span class='line'>    $oldel.replaceWith $newel</span></code></pre></td></tr></table></div></figure>


<p>のようにすることで，テンプレートの構造そのままをViewに適用することが出来て，正しく表示も更新されます．</p>

<h2>refs</h2>

<p><a href="http://stackoverflow.com/questions/11594961/backbone-not-this-el-wrapping">http://stackoverflow.com/questions/11594961/backbone-not-this-el-wrapping</a></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Githubの二段階認証を設定しよう]]></title>
    <link href="http://pchw.github.io/blog/2013/11/22/github-two-factor-auth/"/>
    <updated>2013-11-22T11:13:00+00:00</updated>
    <id>http://pchw.github.io/blog/2013/11/22/github-two-factor-auth</id>
    <content type="html"><![CDATA[<p>Githubがログインアタック受けたみたいですね．<a href="https://github.com/blog/1698-weak-passwords-brute-forced">Weak passwords brute forced</a>
そんなときにハラハラしないために2段階認証（two-factor authentication）を入れましょう．</p>

<p>Githubにログインして右上の工具マーク（Account Setting）から設定画面に行きます．
<img src="https://f.cloud.github.com/assets/1183484/1597813/a4207532-531a-11e3-9d50-bf483cdbdf8e.png" alt="2013-11-22 10 56 33" /></p>

<p><code>Account Settings</code> を選んで，<code>Two-factor authentication</code>の<code>Set up two-factor authentication</code>を選択します．
<img src="https://f.cloud.github.com/assets/1183484/1597826/d2c7f22a-531a-11e3-9ede-143c4dc9cc88.png" alt="2013-11-22 10 56 47" /></p>

<p>SMSかアプリか選べと言われるので<code>Set up using app</code>を選びます．
<img src="https://f.cloud.github.com/assets/1183484/1597829/e5300aa6-531a-11e3-8e56-fcf313c4f7ef.png" alt="2013-11-22 10 57 09" /></p>

<p>すると，右側にQRコードが表示された画面になるので，<a href="https://itunes.apple.com/jp/app/google-authenticator/id388497605">Google Authenticator</a> でQRコードを読み込ませます．
すぐに6桁のコードが表示されるので，<code>2. Enter the 6-digit code that the application generates</code>に入力して<code>Enable</code>します．
<img src="https://f.cloud.github.com/assets/1183484/1597842/32d6a058-531b-11e3-99ac-de54e9e0c108.png" alt="2013-11-22 10 57 21" /></p>

<p>これで2段階認証の設定が完了です！</p>

<p>エジプトからのアクセスでファラオに呪いをかけられる心配しなくてよくなりましたね！</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[MongoDBのShellを使いやすくする方法]]></title>
    <link href="http://pchw.github.io/blog/2013/11/12/mongodb-shell/"/>
    <updated>2013-11-12T07:49:00+00:00</updated>
    <id>http://pchw.github.io/blog/2013/11/12/mongodb-shell</id>
    <content type="html"><![CDATA[<p>最近DBは<a href="http://www.mongodb.org/">MongoDB</a>しか使ってないぽちです，おはようございます！</p>

<p>Node.js + MongoDBの組み合わせで使うことがほとんどなので，スクリプトからは<a href="http://mongoosejs.com/">mongoose</a>を使うのですが，ちょっとDBの中身を確認したりするのでmongodbのshellを使うことも多いです．</p>

<p>普段mongooseを使っていると，mongodbのshellが貧弱で困ることがあります．</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&gt; db.users.findOne({_id:"&lt;存在するObjectId&gt;"})
</span><span class='line'>null</span></code></pre></td></tr></table></div></figure>


<p>みたいな．</p>

<p>正しくはこう書かねばなりません．</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&gt; db.users.findOne({_id:ObjectId("&lt;存在するObjectId&gt;")})
</span><span class='line'>{
</span><span class='line'>  "_id":ObjectId("&lt;存在するObjectId&gt;")
</span><span class='line'>  :
</span><span class='line'>}</span></code></pre></td></tr></table></div></figure>


<p>めんどくさい！<code>ObjectId</code>と毎回タイプするのがめんどくさい！</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&gt; db.users.findOneById("&lt;存在するObjectId&gt;")</span></code></pre></td></tr></table></div></figure>


<p>と書ければ楽だなーと思って探したら，</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&gt; DBCollection.prototype.findOneById = function(id){return this.findOne({_id:ObjectId(id)});};</span></code></pre></td></tr></table></div></figure>


<p>とかやってあげると</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>db.users.findOneById("&lt;存在するObjectId&gt;")
</span><span class='line'>{
</span><span class='line'>  "_id":ObjectId("&lt;存在するObjectId&gt;")
</span><span class='line'>  :
</span><span class='line'>}</span></code></pre></td></tr></table></div></figure>


<p>楽ちんだ！</p>

<p><code>findOneById</code>とか長い！</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&gt; DBCollection.prototype.findOneById = DBCollection.prototype.fbi = function(id){return this.findOne({_id:ObjectId(id)});};
</span><span class='line'>db.users.fbi("&lt;存在するObjectId&gt;")
</span><span class='line'>{
</span><span class='line'>  "_id":ObjectId("&lt;存在するObjectId&gt;")
</span><span class='line'>  :
</span><span class='line'>}</span></code></pre></td></tr></table></div></figure>


<p>楽ちんだ！！！！さすがFBI！！！連邦捜査局！！！</p>

<p>はい，でもこれを毎回打つのが超めんどくさい．</p>

<p>そういう時は，<code>~/.mongorc.js</code>を配置しましょう．</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ echo "DBCollection.prototype.findOneById = DBCollection.prototype.fbi = function(id){return this.findOne({_id:ObjectId(id)});};" &gt; ~/.mongorc.js
</span><span class='line'>$ mongo hoge
</span><span class='line'>&gt; db.users.fbi("&lt;存在するObjectId&gt;")
</span><span class='line'>{
</span><span class='line'>  "_id":ObjectId("&lt;存在するObjectId&gt;")
</span><span class='line'>  :
</span><span class='line'>}</span></code></pre></td></tr></table></div></figure>


<p>楽ちん！</p>

<p>上では<code>findOneById</code>だけですが，どんどん追加できるので，決まったaggregateがあるならパラメータを渡す簡単構文でaggregateしたりmongooseでいう<code>populate</code>的な動作も出来ると思います．</p>

<p><a href="https://github.com/skratchdot/mesh">mesh</a>というmongo shellに色々ライブラリを読み込んでくれるのもあるのですが，欲しいのがなかったので自分で作って公開するといいよ！</p>

<h2>まとめ</h2>

<ul>
<li><code>~/.mongorc.js</code>にmongo shellを拡張するスクリプトを置くと便利！</li>
</ul>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Backbone.jsのイベントをデバッグ出力するやつをモジュール化した]]></title>
    <link href="http://pchw.github.io/blog/2013/11/11/backbone-event-logger/"/>
    <updated>2013-11-11T09:10:00+00:00</updated>
    <id>http://pchw.github.io/blog/2013/11/11/backbone-event-logger</id>
    <content type="html"><![CDATA[<p>土日で艦これイベント海域E-4をなんとか突破したぽちです，おはようございます．</p>

<p>今日は島風轟沈の日らしいですね．</p>

<p>ktty1220 さんの<a href="http://qiita.com/ktty1220/items/f1bb5b4eb48839de8394">Backbone.jsで全イベントをconsoleに出力するデバッグ用スクリプト</a></p>

<p>が便利だったので使ってたのですが，
毎回<code>backbone.debug.js</code>をプロジェクトにコピーして回るのが大変だったので
bowerでサクッとインストール出来るようにしてみました．</p>

<p><a href="https://github.com/pchw/backbone-event-logger">backbone-event-logger</a></p>

<h3>使い方</h3>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ bower install backbone-event-logger</span></code></pre></td></tr></table></div></figure>


<p>でインストールされます．</p>

<p>あとは</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;script src="http://pchw.github.io/bower_components/backbone/backbone-min.js"&gt;&lt;/script&gt;
</span><span class='line'>&lt;script src="http://pchw.github.io/bower_components/backbone-event-logger/backbone-event-logger.min.js"&gt;&lt;/script&gt;</span></code></pre></td></tr></table></div></figure>


<p>みたいに読みこめば，ガンガンログが出ます．</p>

<h3>オリジナルとの違い</h3>

<p>オリジナルと変更した部分としては</p>

<ul>
<li><code>Backbone[&lt;ModelとかRouterとか&gt;]::initialize</code>で自動的にログ出力を有効化</li>
<li>デフォルトで<code>@constructor.name</code>をログに出すようにした</li>
<li>coffee化</li>
<li>名前を<code>.debug</code>から<code>.event-logger</code>へ（デバッグっていうよりロガーだなと思ったので）</li>
<li>AMD/RequireJSでも読み込めるようにしてみた（けど試してない）</li>
</ul>


<h3>こんな感じで出ます</h3>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>23:04:42 Model:ContentModel  remove [&gt; [ContentModel, Contents, Object]</span></code></pre></td></tr></table></div></figure>


<p><code>ContentModel</code> って書いてる部分が<code>@constructor.name</code>で出してるところ．</p>

<h3>イマイチなところ</h3>

<p>オリジナルにあったスタイルの変更等は<code>bower install</code>した後に
<code>bower_components</code>内を変更しないといけなくて，悩んでいるところ．
（自動適用にしたので外部から設定する口を用意してもイマイチかなと）</p>

<p>ところで<code>bower install</code>した時って<code>backbone-event-logger.min.js</code>や<code>backbone-event-logger.js</code>
以外のファイルは配置されるべきなんだろうか？ルールがわからない．
（backbone.jsのbowerも配置されてた）</p>

<h3>まとめ</h3>

<ul>
<li>便利な<a href="http://qiita.com/ktty1220/items/f1bb5b4eb48839de8394">Backbone.jsで全イベントをconsoleに出力するデバッグ用スクリプト</a> をモジュール化した</li>
<li>自動読み込みや名前の表示などオリジナル版をちょっとカスタムしてる</li>
<li>PR/forkどうぞ <a href="https://github.com/pchw/backbone-event-logger">backbone-event-logger</a></li>
</ul>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[iOS7のパララックス効果で左右に動く壁紙を自作する]]></title>
    <link href="http://pchw.github.io/blog/2013/09/21/pararaxwallpaper/"/>
    <updated>2013-09-21T01:20:00+00:00</updated>
    <id>http://pchw.github.io/blog/2013/09/21/pararaxwallpaper</id>
    <content type="html"><![CDATA[<p>iPhone 5s/5cを買うのを諦めたぽちです，こんばんは！</p>

<p>そんなわけでとっととiPhone4SにiOS7をいれて使ってます．</p>

<p>今まで使ってた壁紙が使えなくなって悲しみの極みですが，
嘆いていても仕方がないので，新しく作るしかないです．</p>

<p>iOS7からは左右に振ると壁紙が左右にキモい動きをする機能が入ってるっぽいです．
検索したらキモい動きを切る方法ばっかり出てきたので，作り方を書いておくです．</p>

<p>実は超カンタンで，</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>iPad 2 and iPad mini: 1,424 x 1,424
</span><span class='line'>iPad 3 and iPad 4: 2,448 x 2,448
</span><span class='line'>iPhone 4S: 1,360 x 1,040
</span><span class='line'>iPhone 5: 1,536 x 1,040</span></code></pre></td></tr></table></div></figure>


<p>のサイズで作ればいいだけでした．</p>

<p>この機能の呼び名がパララックス効果壁紙（parallax effect wallpapers）とか
ダイナミック壁紙（dynamic wallpapers）とか色々言われてるっぽいですけど，どれが一般的な呼び名なんでしょうね．</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[hubでpull-requestした後に自動でgithub上のPullRequestをブラウザで開く方法]]></title>
    <link href="http://pchw.github.io/blog/2013/07/12/hub/"/>
    <updated>2013-07-12T18:50:00+00:00</updated>
    <id>http://pchw.github.io/blog/2013/07/12/hub</id>
    <content type="html"><![CDATA[<p>GitHubを使って開発していると，PullRequestをブラウザでぽちぽちやるのは凄くダルいです．特に<a href="http://scottchacon.com/2011/08/31/github-flow.html">Github Flow</a> だとぽこぽこPullRequest投げまくるので毎回ブラウザ開いてPullRequest投げるのが凄くダルい．</p>

<p>そこでコマンドラインからPullRequestを送れる<a href="http://defunkt.io/hub/">hub</a> を使います．</p>

<p><code>hub</code>コマンドは便利なんだけど，<code>hub pull-request</code>するとデフォルトでPullRequestされたGitHubのPullRequestのURL（<code>https://github.com/pchw/fontawesome/pull/1</code> みたいなの）をTerminalに出力するだけです．</p>

<p>チームでやってると，PullRequest送ったあとにちょっとコメントしたりするのがあったりして，いちいちTerminalからコピペしてブラウザに貼り付けるのがダルいです．</p>

<p>そこでhubにPullRequest後に勝手にブラウザで今作ったGitHubのPullRequestのURLを開くオプションを追加しようとちょっとPullRequestを<a href="https://github.com/github/hub/pull/344">送ってみたら</a></p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>open `git pull-request`</span></code></pre></td></tr></table></div></figure>


<p>ってやればいいじゃんって教えてもらいました．</p>

<p>便利だからみんな使うといいと思うよ．</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Sublime Text2で1行が80文字以内かわかりやすくする方法]]></title>
    <link href="http://pchw.github.io/blog/2013/07/12/sublimetext2/"/>
    <updated>2013-07-12T07:20:00+00:00</updated>
    <id>http://pchw.github.io/blog/2013/07/12/sublimetext2</id>
    <content type="html"><![CDATA[<p>別に80文字以上でもいいじゃんとか思っていたんですが，
GitHubでレビューする時に文字数が多いと横スクロールしにくくてやりにくいので．</p>

<p>Preferences > Settings - User を開いて（または<code>Cmd+,</code>）</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>"rulers":
</span><span class='line'>  [
</span><span class='line'>    80,
</span><span class='line'>    120
</span><span class='line'>  ],</span></code></pre></td></tr></table></div></figure>


<p>を追加して保存すれば80行目と120行目に線が表示されるようになります．</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[OctopressとTravis CIを連携させてBlog生成を自動にする]]></title>
    <link href="http://pchw.github.io/blog/2013/06/27/octopress-travis/"/>
    <updated>2013-06-27T10:00:00+00:00</updated>
    <id>http://pchw.github.io/blog/2013/06/27/octopress-travis</id>
    <content type="html"><![CDATA[<h1>Octopressってめんどくさいよね</h1>

<p>Octopressはmarkdownでブログ書けて，見た目も良い感じで導入した当初はすげーテンションがあがって記事を書きまくってたのですが，<code>rake generete</code>とかするのが超めんどくさい．さらにちゃんとセットアップしてるマシンでやらないとrubyのバージョン違いでなんかエラー出たりして超めんどくさいので，最近記事かくのがおっくうでした．</p>

<p>そこで，Travis CIとOctopressをforkしてるリポジトリを連携させることでそういう煩わしさを減らしてブログを書けることが判明しました！色々ハマりどころがあって1日ぐらいかかったので解説記事を書くよ！</p>

<p>ちなみに，TravisCIと連携させてgenerateするようにしておけば，<a href="http://prose.io/">Prose.io</a>（github連携のWebエディタ）を使ったりするとOctopressでgenerate出来ない環境とかでもブログが書ける！
<a href="https://itunes.apple.com/jp/app/gitmongo/id593450102">GitMongo</a>使ったりすれば，iPad/iPhoneからOctopressでブログが書ける！</p>

<p>というわけで手順解説です．</p>

<h1>OctopressとTravisを連携させる</h1>

<p>今回の構成はこんな感じ
<img src="http://pchw.github.io/images/octopress-travis.png" alt="octopress-travis" /></p>

<p>作業は全部↑で言うOctopress(forked)に対して行います．</p>

<p>下に書く<code>.travis.yml</code>のREPOで指定している所が配置するリポジトリです．（上図のGitHub Pagesと書いてるところ）</p>

<p>まず，Travis CIと連携するための<code>.travis.yml</code>をプロジェクトのrootに置きます．</p>

<h2>.travis.yml</h2>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>---
</span><span class='line'>language: ruby
</span><span class='line'>rvm:
</span><span class='line'>- 1.9.3
</span><span class='line'>before_script:
</span><span class='line'>- git config --global user.name "ユーザ名(via TravisCI)"
</span><span class='line'>- git config --global user.email "メールアドレス"
</span><span class='line'>- git remote set-url origin $REPO.git
</span><span class='line'>- if [ -z "$id_rsa_{1..32}" ]; then echo 'No $id_rsa_{1..32} found !' ; exit 1; fi
</span><span class='line'>- echo -n $id_rsa_{1..32} &gt;&gt; ~/.ssh/travis_rsa_64
</span><span class='line'>- base64 --decode --ignore-garbage ~/.ssh/travis_rsa_64 &gt; ~/.ssh/id_rsa
</span><span class='line'>- chmod 600 ~/.ssh/id_rsa
</span><span class='line'>- echo -e "Host github.com\n\tStrictHostKeyChecking no\n" &gt;&gt; ~/.ssh/config
</span><span class='line'>- rake setup_github_pages[$REPO]
</span><span class='line'>script:
</span><span class='line'>- rake generate
</span><span class='line'>after_script:
</span><span class='line'>- rake deploy
</span><span class='line'>env:
</span><span class='line'>  global:
</span><span class='line'>  - REPO="git@github.com:ユーザ名/GitHubページを配置するリポジトリ.git"</span></code></pre></td></tr></table></div></figure>


<h2>Travis CI用の鍵作成</h2>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class=''><span class='line'># 鍵生成
</span><span class='line'># passphraseは空で．
</span><span class='line'>ssh-keygen -t rsa -C "&lt;メールアドレス&gt;" -f ~/.ssh/travis_rsa
</span><span class='line'>
</span><span class='line'># クリップボードに公開鍵をコピー
</span><span class='line'>cat ~/.ssh/travis_rsa.pub | pbcopy
</span><span class='line'>
</span><span class='line'>
</span><span class='line'># SSH鍵設定ページを開いてAdd SSH keyする
</span><span class='line'>open  https://github.com/&lt;GitHubアカウント名&gt;/&lt;Octopress用リポジトリ名&gt;/settings/keys</span></code></pre></td></tr></table></div></figure>


<p>ブラウザが開くので，Add SSH Keyボタンを押して追加します．</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
</pre></td><td class='code'><pre><code class=''><span class='line'># 元からOS Xに入っているbase64コマンドだと --wrap=0オプションが使えないのでbase64コマンドをインストール
</span><span class='line'>brew install base64
</span><span class='line'>
</span><span class='line'># 鍵をbase64化
</span><span class='line'># brewのバージョンなどによってinstallされるPathは異なることがある
</span><span class='line'>/usr/local/Cellar/base64/1.5/bin/base64 --wrap=0 ~/.ssh/travis_rsa &gt; ~/.ssh/travis_rsa_64
</span><span class='line'>
</span><span class='line'>
</span><span class='line'># travisコマンドをインストール
</span><span class='line'>brew install travis
</span><span class='line'>
</span><span class='line'># travis encryptが100文字までしか受け付けないので，100文字ごとにtravis encryptに渡す
</span><span class='line'>--addで.travis.ymlに自動追記してくれる
</span><span class='line'>bash &lt;(cat ~/.ssh/travis_rsa_64 | perl -pe 's/(.{100})/$1\n/g' | nl | perl -pe 's/\s*(\d+)\s*(.*)/travis encrypt -r &lt;GitHubアカウント名&gt;\/&lt;Octopress用リポジトリ名&gt; id_rsa_$1="$2" --add env.global/')
</span><span class='line'> 
</span><span class='line'># id_rsa_Xが何個あるかをカウント
</span><span class='line'>cat ~/.ssh/travis_rsa_64 | perl -pe 's/(.{100})/$1\n/g' | nl | tail</span></code></pre></td></tr></table></div></figure>


<h2>.travis.ymlの書き換え</h2>

<p><code>$id_rsa_{1..32}</code> みたいに書いている場所は↑の<code>id_rsa_Xが何個あるかをカウント</code>の部分でカウントした数にします．</p>

<p>僕の場合は<code>32</code>でした．</p>

<h2>リポジトリにpushする</h2>

<p><code>$ git push remote source</code></p>

<h2>Travis CI側の設定</h2>

<p><a href="https://travis-ci.org/profile">https://travis-ci.org/profile</a> からリポジトリの所をonにする．</p>

<p>https://github.com/ユーザ名/リポジトリ名/settings/hooks#travis_minibucket
からtravisのhookが設定されているので，TestHookを押す．</p>

<p><a href="https://travis-ci.org/">https://travis-ci.org/</a>にアクセスするとなんかビルドが始まって勝手に更新される！</p>

<h1>ハマりどころ</h1>

<h2>Enter passphrase for key &#8216;/home/travis/.ssh/id_rsa&#8217;: とか出やがって止まる</h2>

<ol>
<li>travis encryptに指定するユーザ名，リポジトリ名をミスってる</li>
<li>id_rsa_Xの番号をミスってる（ちゃんとid_rsaXの数分Secureの行数分指定しているか）</li>
<li>鍵生成でミスってる（passpraseをemptyに）</li>
</ol>


<h2>base64コマンドがbase64: unrecognized option `&#8211;wrap=0&#8217;とか吐く</h2>

<p><code>brew install base64</code>して入ったbase64で実行する．
<code>/usr/bin/base64</code> を使うと<code>--wrap</code>オプションが無い．</p>

<h1>参考資料</h1>

<ul>
<li><a href="http://www.harimenon.com/blog/2013/01/27/auto-deploying-to-my-octopress-blog/">Auto-deploying to My Octopress Blog With Travis-CI</a></li>
<li><a href="http://darvin.github.io/2013/01/13/Prose_Octopress_TravisIO/">Prose.io + Octopress + Travis-CI + GitHub Pages = ♥</a></li>
<li><a href="https://gist.github.com/lukewpatterson/4242707">https://gist.github.com/lukewpatterson/4242707</a></li>
<li><a href="https://gist.github.com/douglasduteil/5525750">https://gist.github.com/douglasduteil/5525750</a></li>
<li><a href="https://gist.github.com/wakefield/5519563">https://gist.github.com/wakefield/5519563</a></li>
</ul>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[チュートリアルを実現するjQueryプラグイン達]]></title>
    <link href="http://pchw.github.io/blog/2013/04/07/highlight-lib/"/>
    <updated>2013-04-07T17:14:00+00:00</updated>
    <id>http://pchw.github.io/blog/2013/04/07/highlight-lib</id>
    <content type="html"><![CDATA[<p>最近チュートリアルを実現したり，特定の要素をハイライトしたり，用途的に似たようなライブラリがぽこぽこ出てきてどれがいいのか試したのでまとめてみる．</p>

<h1>Chardin</h1>

<p><img src="http://pchw.github.io/images/chardin.png" alt="chardin" /></p>

<!--more-->


<p>http://heelhook.github.com/chardin.js/</p>

<p>Apache License v2.0</p>

<h2>概要</h2>

<p>一度に複数の要素に対して，説明を書ける．</p>

<p>ステップで実行などはないが，completion handlerで再度実行すればできる．</p>

<p>Gmailの新機能で使われたチュートリアル風味．</p>

<p>実現方法はbody直下に黒半透明オーバーレイ要素を重ね，その後ろに説明用のレイヤーを追加する．ハイライトする要素をオーバーレイより大きいz-indexを追加し，上に持ってくる．</p>

<p>ハイライトする要素にz-indexがinline styleで付いていると隠れてしまう．</p>

<h2>導入方法</h2>

<p>css追加</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;head&gt;
</span><span class='line'>  :
</span><span class='line'>  &lt;link href="http://pchw.github.io/stylesheets/chardinjs.css" rel="stylesheet" /&gt;
</span><span class='line'>  :
</span><span class='line'>&lt;/head&gt;</span></code></pre></td></tr></table></div></figure>


<p>js追加</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;script type="text/javascript" src="chardinjs.min.js"&gt;&lt;/script&gt;</span></code></pre></td></tr></table></div></figure>


<p><code>data-intro</code>をハイライトする要素の属性に追加．
<code>data-position</code>に<code>left</code>・<code>top</code>・<code>right</code>・<code>bottom</code>のどれかを指定（説明文が出る位置）</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;h1 data-step="1" data-intro="Hello all! :) This project's called Intro.js." class=""&gt;Intro&lt;span style="font-weight: normal;"&gt;.js&lt;/span&gt;&lt;/h1&gt;</span></code></pre></td></tr></table></div></figure>


<p>ロード時に実行</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;script type="text/javascript"&gt;
</span><span class='line'>  $(function(){
</span><span class='line'>    $('body').chardinJs('start');
</span><span class='line'>  })
</span><span class='line'>&lt;/script&gt;</span></code></pre></td></tr></table></div></figure>


<p>ハイライト開始時と終了時のイベントを受け取れる</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;script type="text/javascript"&gt;
</span><span class='line'>  $(function(){
</span><span class='line'>    $('body').on('chardinJs:stop', function() {
</span><span class='line'>      // 完了時の処理
</span><span class='line'>    });
</span><span class='line'>    $('body').chardinJs('start');
</span><span class='line'>  })
</span><span class='line'>&lt;/script&gt;</span></code></pre></td></tr></table></div></figure>


<h1>jQuery Highlighter</h1>

<p><img src="http://pchw.github.io/images/jhighlighter.png" alt="jhighlighter" /></p>

<p>http://www.dailymarkup.com/</p>

<p>MIT</p>

<h2>概要</h2>

<p>白いBoxshadowをつけてて、要素が光ってるようなハイライトができてかっこいい。</p>

<p>ハイライトしたい要素をcloneして、オーバーレイの上にコピペして実現．</p>

<p>指定した要素だけをcloneして，上に重ねるため，cssの書き方によっては（親要素を指定しているなど）デザインが崩れる．</p>

<p>アルファ版らしく，本番運用非推奨．</p>

<h2>導入方法</h2>

<p>css追加</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;head&gt;
</span><span class='line'>  :
</span><span class='line'>  &lt;link href="http://pchw.github.io/stylesheets/jquery.highlighter.css" rel="stylesheet" type="text/css"/&gt; 
</span><span class='line'>  :
</span><span class='line'>&lt;/head&gt;</span></code></pre></td></tr></table></div></figure>


<p>js追加</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;script type="text/javascript" src="http://pchw.github.io/js/jquery.highlighter.js"&gt;&lt;/script&gt; </span></code></pre></td></tr></table></div></figure>


<p>コントローラにハイライトしたい要素のid（ここでは<code>menu</code>）を指定し，relにハイライト時に表示されるメッセージを指定する</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;div id="menu"&gt;ハイライトしたい要素&lt;div/&gt;
</span><span class='line'>:
</span><span class='line'>&lt;a href="javascript:void(0);" title="menu" class="jhighlight" rel="&lt;h1&gt;HTML Markup for the Description&lt;/h1&gt;"&gt;1&lt;/a&gt; </span></code></pre></td></tr></table></div></figure>


<p>ロード時に実行</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;script type="text/javascript"&gt;
</span><span class='line'>  $(function(){
</span><span class='line'>    $('.jhighlight').jhighlight(); 
</span><span class='line'>  })
</span><span class='line'>&lt;/script&gt;</span></code></pre></td></tr></table></div></figure>


<h1>jquery-tutor</h1>

<p><img src="http://pchw.github.io/images/jquery-tutor.png" alt="jquery-tutor" /></p>

<p>https://github.com/crocos/jquery-tutor</p>

<p>3-clause BSD license</p>

<h2>概要</h2>

<p>ステップ1、ステップ2のように流れに沿って要素をハイライトしたり，jsの処理を順次実行出来る．</p>

<p>実現方法は要素の周りに太い半透明borderを重ねて実現．</p>

<p>borderで実現しているのが影響してか見た目が良くない．</p>

<h2>導入方法</h2>

<p>css追加</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;head&gt;
</span><span class='line'>  :
</span><span class='line'>  &lt;link rel="stylesheet" type="text/css" href="http://pchw.github.io/stylesheets/jquery.tutor.min.css"&gt;
</span><span class='line'>  :
</span><span class='line'>&lt;/head&gt;</span></code></pre></td></tr></table></div></figure>


<p>js追加</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;script src="http://pchw.github.io/js/jquery.tutor.min.js"&gt;&lt;/script&gt;</span></code></pre></td></tr></table></div></figure>


<p>stepsの配列に順次ハイライトしたい要素とメッセージのオブジェクト(target, message)やjsのfunctionをそのまま入れたりしていく．
deferredを使うと非同期実行などもできる．</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;script type="text/javascript"&gt;
</span><span class='line'>  $(function(){
</span><span class='line'>    $.tutor({
</span><span class='line'>      steps:[
</span><span class='line'>      {
</span><span class='line'>        target: '.selector',
</span><span class='line'>        message: 'Step 1: Push the button.'
</span><span class='line'>      },
</span><span class='line'>      function() {
</span><span class='line'>        alert('Step 2: Click "OK"');
</span><span class='line'>      },
</span><span class='line'>      function(dfd) {
</span><span class='line'>        // async callback
</span><span class='line'>        setTimeout(function() {
</span><span class='line'>          alert('Step 3: Hi.')
</span><span class='line'>        }, 1500);
</span><span class='line'>
</span><span class='line'>        return dfd.promise();
</span><span class='line'>      },
</span><span class='line'>      function() {
</span><span class='line'>        // `$.ajax` returns *Deferred Object*.
</span><span class='line'>        return $.ajax({
</span><span class='line'>          // ...
</span><span class='line'>        });
</span><span class='line'>      },
</span><span class='line'>      {
</span><span class='line'>        target: '.selector',
</span><span class='line'>        message: 'That\'s all. Enjoy!'
</span><span class='line'>      }
</span><span class='line'>    ]
</span><span class='line'>    });
</span><span class='line'>  })
</span><span class='line'>&lt;/script&gt;</span></code></pre></td></tr></table></div></figure>


<h1>Introjs</h1>

<p><img src="http://pchw.github.io/images/introjs.png" alt="introjs" /></p>

<p>http://usablica.github.io/intro.js/</p>

<p>MIT</p>

<h2>概要</h2>

<p>角丸四角でハイライトされて，ステップ数のバッヂや次のステップへ進む，前のステップへ戻るボタンなどが表示されて親切な感じ</p>

<p>黒半透明のオーバーレイ要素を対象要素の後ろにz-index高めで追加して対象の要素に<code>.introjs-showElement</code>を付けてz-indexをオーバーレイ要素より高めてハイライトする形式．
inline styleでz-indexを追加していると後ろに隠れてしまってハイライト要素が見えないという状態になる．
画面端の要素をハイライトすると，バッヂが隠れてしまったりもする．</p>

<h2>導入方法</h2>

<p>css追加</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;head&gt;
</span><span class='line'>  :
</span><span class='line'>  &lt;link href="http://pchw.github.io/stylesheets/introjs.min.css" rel="stylesheet" /&gt;
</span><span class='line'>  :
</span><span class='line'>&lt;/head&gt;</span></code></pre></td></tr></table></div></figure>


<p>js追加</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;script type="text/javascript" src="http://pchw.github.io/js/intro.min.js"&gt;&lt;/script&gt;</span></code></pre></td></tr></table></div></figure>


<p><code>data-step</code>と<code>data-intro</code>をハイライトする要素の属性に追加．
<code>data-position</code>は指定したければ指定する．</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;h1 data-step="1" data-intro="Hello all! :) This project's called Intro.js." class=""&gt;Intro&lt;span style="font-weight: normal;"&gt;.js&lt;/span&gt;&lt;/h1&gt;</span></code></pre></td></tr></table></div></figure>


<p>ロード時に実行</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;script type="text/javascript"&gt;
</span><span class='line'>  $(function(){
</span><span class='line'>    introJs().start();
</span><span class='line'>  })
</span><span class='line'>&lt;/script&gt;</span></code></pre></td></tr></table></div></figure>


<p>ステップ移行時や完了，離脱時のcallbackを設定できる．</p>

<h1>まとめ</h1>

<p>見た目的にはchardinやintro.jsが良い感じ．</p>

<p>チュートリアル的に使うならintro.jsかな．</p>

<p>1枚画面でさっと機能を提示したいだけならchardinが良いのではないか．</p>

<p>この種のライブラリは複雑な構成（z-indexをjsでinline styleとして書き換えたり，absoluteやfixedで配置をダイナミックにしているなど）を取ってると微妙に要素が隠れたり，ハイライトがずれたりするので注意が必要．</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[[RubyMotion] motion-fontawesomeっていうgems作りました]]></title>
    <link href="http://pchw.github.io/blog/2012/08/06/fontawesome/"/>
    <updated>2012-08-06T01:09:00+00:00</updated>
    <id>http://pchw.github.io/blog/2012/08/06/fontawesome</id>
    <content type="html"><![CDATA[<p>1ヶ月ぶりの記事になってしまった！お久しぶりです．</p>

<p>motion-fontawesomeというgemsを作ったので宣伝がてらエントリー書きます！</p>

<h2>Retina環境の増加</h2>

<p>Retina iPhone/iPadはかなり普及したんじゃないでしょうか？
ちょっと何か作るのにTabBarやToolbarのアイコンをいちいち探すのが面倒で，GlyphiconsのFREEを使っていたりしたんですが，非Retinaで荒いし他のアイコンを探そうとすると種類が少なかったり，Retinaじゃなかったりで面倒くさいことこの上ないです．
（そもそも無料で探してるのが悪かったりするんですけど）</p>

<p>そこで<a href="http://fortawesome.github.com/Font-Awesome/">FontAwesome</a>というWebfontを使うと便利です．</p>

<h2>FontAwesomeとは</h2>

<p>元々はTwitter Bootstrapで使えるようにデザインされたアイコンフォント集です．</p>

<p>フォントなので拡大縮小しても荒くならないため，Retinaでも例え超Retina的なのが出てきても対応できますし，色んなサイズが必要になる場面でも力を発揮してくれます．</p>

<h2>FontAwesomeをRubyMotionで使おうとすると</h2>

<p>しかし，普通に使おうとすると，色々とやることがあって，</p>

<ul>
<li><code>resources</code>にフォントを追加</li>
<li><code>app.fonts</code>に追加</li>
<li>欲しい記号を出すためのUTF8の文字コードを調べないといけない</li>
<li>chr(Encoding::UTF_8)とか使って文字コードから文字へ変換してやらないといけない</li>
</ul>


<p>みたいなことをやらないといけないわけです．</p>

<h2>motion-fontawesomeを作りました</h2>

<p>そんな面倒なことやってられないので，上記のことを簡単にしてくれるgemsを作りました．</p>

<p>使い方は，</p>

<h3>Rakefileでrequire</h3>

<pre><code>require 'rubygems'
require 'motion-fontawesome'
</code></pre>

<h3>使う</h3>

<pre><code>label = UILabel.alloc.initWithFrame([[0, 0],[200, 200]])
label.text = FontAwesome.icon(key)
label.font = FontAwesome.fontWithSize(200.0)
</code></pre>

<h3>アイコンが出る！</h3>

<p><img src="http://pchw.github.io/images/fontawesome.png" alt="simulator" /></p>

<p>これだけです！上のスクリーンショットを見てもらってもわかると思いますけど，こんなに大きくしても綺麗です．</p>

<p><code>FontAwesome.icon()</code>に指定する文字列は<a href="http://fortawesome.github.com/Font-Awesome/#all-icons">ここ</a>から選んで，<code>icon-</code>を取ったものを指定してください．</p>

<p>（<code>icon-camera</code>だったら<code>camera</code>だけで良いです．）</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[RubyMotion 1.15のすげえアップデート]]></title>
    <link href="http://pchw.github.io/blog/2012/07/06/1-dot-15/"/>
    <updated>2012-07-06T10:23:00+00:00</updated>
    <id>http://pchw.github.io/blog/2012/07/06/1-dot-15</id>
    <content type="html"><![CDATA[<p>RubyMotion 1.15ですごいアップデートが来るよってlrzさんが言ってました．</p>

<blockquote class="twitter-tweet" lang="ja"><p>Integrating a super cool new feature in RubyMotion. Will ship next week.</p>&mdash; Laurent Sansonettiさん (@lrz) <a href="https://twitter.com/lrz/status/218664619009519617" data-datetime="2012-06-29T11:18:02+00:00">6月 29, 2012</a></blockquote>


<script src="http://pchw.github.io//platform.twitter.com/widgets.js" charset="utf-8"></script>


<p>それが今日来たのですが，スーパークールなニューフィーチャーはTestFrameworkに関するものでした．</p>

<p>今までRubyMotionはbaconを使ったTestFrameworkが使われていて，
<code>rake spec</code>とするとSimulatorが実行されメソッドを呼んで値を検証してという形でした．</p>

<p>今回のアップデートでは，指でタップしたりDeviceイベント（画面を回転させたり）といったこともテストで出来るようになりました．</p>

<p>ObjC + XcodeだとjsでUIAutomationのテストを行うらしいんですが（やったことない），その機能がRubyMotionのbaconに統合された感じです．</p>

<pre><code>describe "The Timer view controller" do
  tests TimerController

  it "start a timer" do
    tap 'Start'
    controller.timer.isValid.should == true
  end
end
</code></pre>

<p>とすれば，<code>Start</code>というLabelのついてるButtonをタップしてcontrollerのtimerを検証してます．</p>

<p>実際にVideoを見てもらうのが早いと思います．Viewがガンガン動いて面白いです．</p>

<iframe src="http://player.vimeo.com/video/45193144" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>


<p>公式Blogの情報は<a href="http://blog.rubymotion.com/post/26489000626/functional-view-and-controller-testing-with-rubymotion">こちら</a></p>

<p>ドキュメントは<a href="http://www.rubymotion.com/developer-center/articles/testing/#_views_and_controllers_testing">こちら</a></p>

<p>7/22(日)に行われる<a href="http://connpass.com/event/665/">第一回RubyMotion勉強会</a>での発表ネタは今回のアップデートのテストに関することにしようと思います．
あと５人ぐらい空きがあるようですね．</p>

<p>修正： 第一回RubyMotion勉強会は <strong> 7/22（日）</strong> でした．</p>

<p>他のアップデートは↓のような感じです．</p>

<h2>更新履歴（訳）</h2>

<ul>
<li>UIAutomationの機能を使えるTestが書けるようになったし，jsじゃなくてpure Rubyで書ける．</li>
<li>spec/helpersの中のファイルが<code>rake spec</code>で使われるようになったよ</li>
<li><code>rake spec</code>にfileオプションが追加されて，テストする対象が選べるようになったよ．</li>
<li><code>RUBYMOTION_ENV</code>で実行時にtestなのかdevelopmentなのかreleaseなのかを判別出来る様になった．</li>
<li>rake staticが追加されてuniversal statc libraryを作れるようになった．</li>
<li>weak frameworkのサポート(app.weak_freameworks &lt;&lt; &#8216;Twitter&#8217;とかする)</li>
<li>symlinkのファイルがresourceディレクトリに入っていた場合にコピーされてたのを修正．</li>
</ul>


<h2>更新履歴（原文）</h2>

<pre><code>= RubyMotion 1.15 =

  * Improved the spec framework to leverage UIAutomation's functionality. This
    lets you write functional tests on views and controllers by using the same
    event generators, but in pure Ruby (and not Javascript).
    Check http://www.rubymotion.com/developer-center/articles/testing for more
    information about the new API. Feature contributed by Eloy Duran.
  * Introduced spec helpers. `rake spec' will now honor the files inside the
    `spec/helpers' directory (if it exists) and compile them before the spec
    files.
  * Introduced the `files' option to `rake spec', which can be used to filter
    the spec files that should be run. Filters can be either the basename of
    a spec file or its full path, and are separated by a comma.
    Example: rake spec files=main_spec,kvo_spec,spec/foo_spec.rb 
  * Introduced the RUBYMOTION_ENV constant in the runtime which can have one of
    the following string values: 'test', 'development' and 'release'.
  * Introduced the `rake static' task which creates a universal static library
    containing the project's object files and the RubyMotion runtime, which is
    suitable for inclusion in Objective-C/Xcode projects. 
  * Introduced weak frameworks support. The `app.weak_frameworks' setting can
    be set to an array of framework names, similar to how `app.frameworks'
    works (ex. app.weak_frameworks += ['Twitter']). Patch by Satoshi Ebisawa.
  * Fixed a bug in the build system where  files within symlinks inside of the
    resources directory would not be copied. Patch by Nick Quaranto.
</code></pre>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[[RubyMotion] Nitronを使ってOutletやActionっぽいことできるよ]]></title>
    <link href="http://pchw.github.io/blog/2012/06/26/nitron/"/>
    <updated>2012-06-26T00:10:00+00:00</updated>
    <id>http://pchw.github.io/blog/2012/06/26/nitron</id>
    <content type="html"><![CDATA[<p>前に<a href="http://pchw.github.com/blog/2012/05/22/storyboard/">Storyboardを使ってRubyMotionで開発する方法</a>とか<a href="http://pchw.github.com/blog/2012/05/22/ib/">[RubyMotion] InterfaceBuilderと合わせて使って楽をしよう</a>いう記事を書いたのですが，IdentifierとかTagを使ったりでちょっと面倒くさかったり，コントロールが増えてくるとTag番号がどのコントロールかわからなくなったりで煩雑でした．</p>

<p>そこで，Nitronというライブラリを使って普通のXcode+ObjCで言うIBOutletとかIBAction的なことを簡単にやりましょうという記事です．</p>

<p><a href="https://github.com/mattgreen/nitron">Nitron</a></p>

<p>公式のgithub内のWikiに<a href="https://github.com/mattgreen/nitron/wiki/Tutorial">チュートリアル</a>がありますが，ModelやNitronのViewControllerとかの説明やCoreData周りなどにも言及していてOutlet的なところだけやりたい人にはちょっと大掛かりです．</p>

<p>そのため，今回は本当にOutletやAction周りだけを使いたい人向けのシンプルコースです．</p>

<h2>Nitroのインストール</h2>

<pre><code>$ gem install nitron
</code></pre>

<p>なにはともあれgemインストール．</p>

<h2>プロジェクトの作成</h2>

<pre><code>$ motion create simplenitro
</code></pre>

<h2>app_delegate.rb の削除</h2>

<p>Nitronはapp_delegateに書いてあるようなのがライブラリ内部で勝手にやってくれます．
app_delegate.rbがあると，そちらが優先されてしまい，何も画面に出なくてハマるのでサクッと削除しておきます．</p>

<pre><code>$ rm app/app_delegate.rb
</code></pre>

<h2>Rakefile</h2>

<pre><code>$ cat Rakefile
# -*- coding: utf-8 -*-
$:.unshift("/Library/RubyMotion/lib")
require 'motion/project'
require 'rubygems'
require 'nitron'

Motion::Project::App.setup do |app|
  # Use `rake config' to see complete project settings.
  app.name = 'simplenitro'
end
</code></pre>

<p><code>require 'rubygems'</code>と<code>require 'nitron'</code>を追加するだけですね．
公式だと，Bundlerを使う方法が紹介されてます．</p>

<h2>storyboardの追加</h2>

<p>公式では，普通にXcodeのプロジェクトを作ってますが，要らないファイルが死ぬほど付いてくるので，単にXcodeを立ちあげてstoryboardファイルだけ追加しましょう．</p>

<p><code>File&gt;New&gt;File</code>で<code>iOS&gt;User Interface&gt;Storyboard</code>を選べばよいです．</p>

<p><img src="http://pchw.github.io/images/nitron_storyboard.png" alt="new Storyboard" /></p>

<p>名前は<code>MainStoryboard.storyboard</code>にして，<code>./resources</code>に作成します．</p>

<h2>UINavigationControllerとUIViewControllerの追加</h2>

<p>こうやって作ったStoryboardには何も置かれていないので，<code>UINavigationController</code>を置きます．</p>

<p><img src="http://pchw.github.io/images/nitron_navigation.png" alt="navigation" /></p>

<p>不要な<code>UITableViewController</code>がくっついて来るので<code>delete</code>ボタンで消します．</p>

<p><code>UIViewController</code>をD&amp;Dして置きます．</p>

<p><code>UINavigationController</code>を選択してUtility View（右側のペイン）の一番右のタブを選んで<code>RelationShip</code>の所から引っ張って，追加した<code>UIViewController</code>に繋ぎます．</p>

<p><img src="http://pchw.github.io/images/nitron_rvc.png" alt="root view controller" /></p>

<p><code>UIViewController</code>を選択して，Utility Viewの左から３番目のタブを選んで，Classを<code>RootViewController</code>とかにしておきます．</p>

<h2>UITextFieldとUIButtonの追加</h2>

<p>そのままでは何もないので，入力欄とボタンを追加します．</p>

<p><img src="http://pchw.github.io/images/nitron_control.png" alt="control" /></p>

<p>UITextFieldを選択して，Utility Viewの左から３番目のタブを選んで，
<code>User Defined Runtime Attributes</code>のところの + を選択して</p>

<ul>
<li>KeyPath: outlet</li>
<li>Type: String</li>
<li>Value: randomText</li>
</ul>


<p>とします．</p>

<p><img src="http://pchw.github.io/images/nitron_outlet.png" alt="outlet" /></p>

<p>同様にUIButtonの方も</p>

<ul>
<li>KeyPath: outlet</li>
<li>Type: String</li>
<li>Value: random</li>
</ul>


<p>としておきます．</p>

<p>この時点でstoryboardの操作は終わりなので保存して閉じます．</p>

<h2>RootViewControllerの追加</h2>

<p><code>root_view_controller.rb</code>を追加して，RootViewControllerクラスを作成します．</p>

<pre><code>class RootViewController &lt; Nitron::ViewController
    on :random do
        randomText.text = @seed.sample
    end
end

class RootViewController
    def viewDidLoad
        super
        @seed = ["hoge", "fuga", "moge", "foo", "bar"]
    end 
end
</code></pre>

<p>先ほどoutletで指定したrandomが<code>on :random ブロック</code>という形でイベントを受けれます．</p>

<p>また，先ほどoutletでしていた<code>randomText</code>という名前でUITextFieldへのアクセスが可能になりますので，textにランダムで選んだ文字列を入れてみます．</p>

<h2>実行</h2>

<pre><code>$ rake
</code></pre>

<p>これで，シミュレータが立ち上がり，Buttonを押した時にランダムで文字が変わります．</p>

<h2>まとめ</h2>

<p>Nitronを使うことで，storyboardとRubyMotionとの連携が更に高まり開発効率が上がります．
特に軽いプロトタイプやモックなどはStoryboardでサッと作れるので，それに簡単にRubyMotionで動作を付けれれば素早い開発が可能なのではないでしょうか！</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[RubyMotionでUIViewを継承したViewを作る！]]></title>
    <link href="http://pchw.github.io/blog/2012/06/25/inheritance/"/>
    <updated>2012-06-25T11:34:00+00:00</updated>
    <id>http://pchw.github.io/blog/2012/06/25/inheritance</id>
    <content type="html"><![CDATA[<p>アプリを作っていると独自UIViewを作りたいことが多々あります．</p>

<p>ObjCなら</p>

<pre><code>self = [super initWithFrame:frame];
if (self) {
    // 初期化処理
}
return self;
</code></pre>

<p>という感じのをinitWithFrameに書いて<code>//初期化処理</code>の部分にその独自クラスで持ってるものを初期化したりします．</p>

<p>RubyMotionに簡単に翻訳すると，</p>

<pre><code>class AwesomeView &lt; UIView
    def initWithFrame(frame)
        self = super.initWithFrame(frame)
        if self
            # 初期化処理
        end

        self
    end
end
</code></pre>

<p>と書きたいですが，これはダメダメでエラーになります．（selfを書き換えれないとか，initWithFrameがループして落ちるとか，，，）</p>

<p>RubyMotionでは</p>

<pre><code>class AwesomeView &lt; UIView
    def initWithFrame(frame)
        if super(frame)
            # 初期化処理
        end

        self
    end
end
</code></pre>

<p>とするのが正しそうです．
（おいおいそれイケてねーよっていう指摘があったら是非教えてください！！！）</p>

<p>あとは，AwesomeなViewを実装してくだけです．</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[[RubyMotion] NanoStoreを使ってデータを格納しよう！]]></title>
    <link href="http://pchw.github.io/blog/2012/06/21/nanostore/"/>
    <updated>2012-06-21T09:28:00+00:00</updated>
    <id>http://pchw.github.io/blog/2012/06/21/nanostore</id>
    <content type="html"><![CDATA[<p>今日はRubyMotionでちょっとしたデータの保存がしたくなったときに使えるNanoStoreのWrapperを紹介します．</p>

<p><a href="https://github.com/siuying/NanoStoreInMotion">NanoStoreInMotion</a></p>

<p>NanoStoreというのは，sqliteを保存先としてスキーマレスなKeyValueStoreを実現するものらしいです．NanoStoreInMotionはそれをRubyMotionから使えるようにするWrapperです．</p>

<h2>インストール</h2>

<p>まずcocoapodsを入れます</p>

<pre><code>$ gem install motion-cocoapods
$ pod setup
</code></pre>

<p>NanoStoreInMotionを入れます．</p>

<pre><code>$ gem isntall nano-store
</code></pre>

<p>プロジェクトを作って，Rakefileを編集します．</p>

<pre><code>$ motion create nanostoretest
$ cat Rakefile
# -*- coding: utf-8 -*-
$:.unshift("/Library/RubyMotion/lib")
require 'motion/project'
require 'rubygems'
require 'motion-cocoapods'
require 'nano-store'

Motion::Project::App.setup do |app|
  # Use `rake config' to see complete project settings.
  app.name = 'nanotest'
  app.pods do
    dependency 'NanoStore', '~&gt; 2.1.4'
  end
end
</code></pre>

<h2>使ってみる</h2>

<h3>前処理</h3>

<p>まず，NanoStoreの保存先を決めてインスタンス化します．</p>

<pre><code>NanoStore.shared_store = NanoStore.store(:file, App.documents_path + '/store.db')
</code></pre>

<p><code>App.documents_path</code>というのは，BubbleWrapの便利Methodで，
<code>/Users/xxxxxx/Library/Application Support/iPhone Simulator/5.1/Applications/EDC08B50-2004-42D9-8B67-2E290EF55CFF/Documents</code>みたいなアプリ毎の保存場所を返してくれます．
中身の実装的には<code>NSSearchPathForDirectoriesInDomains</code>でNSDocumentDirectoryを返してるだけです．</p>

<pre><code>NanoStore.shared_store = NanoStore.store(:memory)
</code></pre>

<p>とすることで，ファイルに保存するのではなく，オンメモリでDbを使うこともできます．</p>

<h3>Model定義</h3>

<p>次に，保存するModelを定義します．</p>

<p>Modelを定義するには<code>NanoStore::Model</code>を継承したクラスを定義すれば良いです．</p>

<pre><code>class Label &lt; NanoStore::Model
  attribute :text
  attribute :x
  attribute :y
  attribute :height
  attribute :width
end
</code></pre>

<p>保存するフィールドは<code>attribute &lt;シンボル名&gt;</code>で定義できます．
上記の例では，text, x, y, height, width というフィールド（というかKey）が定義されます．</p>

<p>★ <code>attribute :key</code>は自動的に付与されるので，<code>:key</code>は書いてはいけません．（書いてもエラーにはならないが，実際に使うときに予期せぬ動作になります．なりました．）</p>

<p>NanoStore はNSDataも入れれるようですが，インデックスが効かないようです．</p>

<h3>データ投入</h3>

<p>先ほど定義したModelクラスのnewメソッドを呼んでsaveすれば良いです．</p>

<pre><code>label = Label.new(
    :text=&gt;"test",
    :x =&gt; 100,
    :y =&gt; 200,
    :height =&gt; 50,
    :width =&gt; 250)
label.save
</code></pre>

<p>この時点で保存されて，検索などが出来るようになります．</p>

<h3>検索</h3>

<p>検索も先ほど定義したModelクラスを通じて行います．</p>

<pre><code># もうひとつLabelを追加しておく
hogeLabel = Label.new(
    :text=&gt;"test1",
    :x =&gt; 50,
    :y =&gt; 400,
    :height =&gt; 100,
    :width =&gt; 50)
hogeLabel.save

allLabels = label.all
# =&gt; [#&lt;Label:0x8e622e0&gt;, #&lt;Label:0x8e62720&gt;]
</code></pre>

<p>条件を指定して検索は</p>

<pre><code>Label.find(:text=&gt;"test")
# =&gt; [#&lt;Label:0x8e622e0&gt;]
</code></pre>

<p>とすればできるので，あとは<code>.each</code>とかユニークなKeyで検索するなら<code>.first</code>
とかすれば目当てのものが手に入ります．</p>

<pre><code>Label.find(:x =&gt; { NSFGreaterThan =&gt; 10 }).each do |lbl|
    p lbl.text
end
# =&gt; "test1"
# =&gt; "test"
</code></pre>

<h3>アップデート</h3>

<p>更新処理は，上記の検索で得られたもののプロパティを編集して再度saveを呼べば良いです．</p>

<pre><code>update = Label.find(:text=&gt;"test").first
update.text = "test2"
update.save

Label.all.each do |lbl|
    p lbl.text
end
# =&gt; "test2"
# =&gt; "test1"
</code></pre>

<h3>削除</h3>

<p>削除処理は，同じく上記の検索で得られたものの<code>delete</code>を呼べば，削除できます．</p>

<pre><code>del = Label.find(:text=&gt;"test1").first
del.delete

Label.all.each do |lbl|
    p lbl.text
end
# =&gt; "test2"
</code></pre>

<p>全部削除したい場合は，</p>

<pre><code>Label.delete
</code></pre>

<p>とすれば，全部消えます．</p>

<pre><code>Label.delete(:text=&gt;"test1")
</code></pre>

<p>のように条件をつければ，条件にヒットしたものを一気に削除できます．</p>

<h2>保存されるデータ</h2>

<p>さて，実際に保存されているデータはどうなっているのでしょうか？</p>

<p><code>NanoStore.store</code>時に<code>:file</code>を指定した場合は指定したPathにsqliteのデータベースファイルが生成されています．
その中をsqlite3コマンドかなんかで見ていけば保存されている形を見ることができます．</p>

<pre><code>$ sqlite3 store.db
sqlite&gt; .tables
NSFKeys    NSFValues
</code></pre>

<p>どうやら<code>NSFKeys</code>と<code>NSFValues</code>というテーブルが存在するようです．</p>

<h3>NSFKeys</h3>

<pre><code>$sqlite&gt; select * from NSFkeys;
ROWID|NSFKey|NSFPlist|NSFCalendarDate|NSFObjectClass
</code></pre>

<ul>
<li>ROWIDはautonumber</li>
<li>NSFKeyはオブジェクトごとに異なるID</li>
<li>NSFPlistはオブジェクトのattributeと値をplist形式で表したもの</li>
<li>NSFCalendarDateは更新日かな？</li>
<li>NSFObjectClass はNanoStore::Modelを継承したクラス名</li>
</ul>


<h3>NSFValues</h3>

<pre><code>sqlite &gt; select * from NSFValues;
ROWID|NSFKey|NSFAttribute|NSFValue|NSFDatatype
</code></pre>

<ul>
<li>ROWIDはautonumber</li>
<li>NSFKeyはNSFKeysテーブルのNSFKey（外部キー）</li>
<li>NSAttributeはattributeで定義したシンボル名</li>
<li>NSFValueは実際に入っている値</li>
<li>NSFDatatypeは型．TEXTとかREALとか</li>
</ul>


<p>NSFValuesの方にModelクラスの違い関係なくattribute名と値が入っています．
クラス名とかの情報はNSFKeysの方に入っていますね．</p>

<h2>まとめ</h2>

<p>NanoStoreInMotionはデータを保存，検索，削除などが簡単なステップで出来て，ちょっとしたデータの取り扱いに役立つと思います．
<code>:memory</code>を使うことで，Web APIからデータをごっそり取ってきてさっとフィルタリングするような用途にも簡単に使えそうです．</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[RubyMotion 1.13が早くもリリース]]></title>
    <link href="http://pchw.github.io/blog/2012/06/20/1-dot-13/"/>
    <updated>2012-06-20T00:52:00+00:00</updated>
    <id>http://pchw.github.io/blog/2012/06/20/1-dot-13</id>
    <content type="html"><![CDATA[<p>早くもRubyMotion 1.13が出てます．バグ修正が主です．</p>

<h2>更新内容</h2>

<pre><code>= RubyMotion 1.13 =

  * Fixed a regression in `rake simulator' introduced by the last update.
    Also, the environment variable used to set the SDK target is renamed to
    `target' (ex. rake target=4.3).
  * Fixed a bug in the build system where certain .rb files would be rebuilt
    every time `rake build' was executed, because the object directory was not
    touched.
  * Fixed a bug in the build system where the RUBYOPT variable would not be
    cleared when calling the gen_bridge_metadata tool, which would cause some
    issues later on. Patch by Satoshi Ebisawa.
</code></pre>

<h2>更新内容（訳）</h2>

<ul>
<li>前回のアップデートで書いてたrake simulatorのエンバグ修正．rake target=4.3みたいに指定するようになった．</li>
<li>オブジェクトディレクトリが更新されなかったからrake buildが実行された時に毎回.rbファイルをリビルドするようにビルドシステムを修正</li>
<li>RUBYOPT変数がgen_bridge_metadataを呼ぶときにクリアされない問題を修正．</li>
</ul>

]]></content>
  </entry>
  
</feed>
