index.xml

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>Catatsu Tech Blog</title>
    <link>https://catatsu.github.io/</link>
    <description>Recent content on Catatsu Tech Blog</description>
    <generator>Hugo -- gohugo.io</generator>
    <language>en-us</language>
    <copyright>Code released under the Apache 2.0 license.</copyright>
    <lastBuildDate>Mon, 24 Oct 2016 11:45:17 +0900</lastBuildDate>
    <atom:link href="https://catatsu.github.io/index.xml" rel="self" type="application/rss+xml" />
    
    <item>
      <title>LINE Notifyが楽しそうだったので試してみた</title>
      <link>https://catatsu.github.io/2016/10/24/line-notify</link>
      <pubDate>Mon, 24 Oct 2016 11:45:17 +0900</pubDate>
      
      <guid>https://catatsu.github.io/2016/10/24/line-notify</guid>
      <description>

&lt;p&gt;どうも僕(&lt;a href=&#34;https://github.com/nabeen&#34;&gt;@nabeen&lt;/a&gt;)です。&lt;/p&gt;

&lt;p&gt;皆さん、LINE使ってますか？使ってますね？&lt;/p&gt;

&lt;p&gt;イマドキ、連絡は絶対メールで！なんて古風なやり方を続けている方はIT界隈にはいないと思いますが、色んな通知を色んなサービスで受けるのはちょっとつらたん。。そこで、通知関連をLINEにまとめられると色々便利ですよね（多分）。&lt;/p&gt;

&lt;p&gt;ただし、用法用量は守ってご利用ください（個人的に業務連絡をLINEでやるのは反対派です）。&lt;/p&gt;

&lt;h2 id=&#34;手順&#34;&gt;手順&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;アクセストークンの発行&lt;/li&gt;
&lt;li&gt;&lt;code&gt;Authorization: Bearer&lt;/code&gt;に発行したトークンを入れてmessageをPOST&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;これだけ。簡単。&lt;/p&gt;

&lt;h2 id=&#34;なにわともあれトークン発行&#34;&gt;なにわともあれトークン発行&lt;/h2&gt;

&lt;p&gt;まずは登録してアクセストークンを発行しましょう。&lt;/p&gt;

&lt;p&gt;&lt;a href=&#34;https://notify-bot.line.me/ja/&#34;&gt;https://notify-bot.line.me/ja/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;ポチポチするだけです。&lt;/p&gt;

&lt;h2 id=&#34;curlでpostしてみる&#34;&gt;curlでPOSTしてみる&lt;/h2&gt;

&lt;pre&gt;&lt;code&gt;curl -X POST -H &#39;Authorization: Bearer &amp;lt;token&amp;gt;&#39; -F &#39;message=&amp;lt;message&amp;gt;&#39; https://notify-api.line.me/api/notify
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;通知が届きましたね。&lt;/p&gt;

&lt;p&gt;こちらからは以上です。&lt;/p&gt;

&lt;p&gt;参考：
&lt;a href=&#34;http://qiita.com/okunoryo/items/88c002d74ab173706c93&#34;&gt;LINE Notifyをとりあえず使ってみる&lt;/a&gt;&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>PHP界隈で一番ナウい（けど遅い）という噂のLaravelをサクッと触ってなんとなく理解する</title>
      <link>https://catatsu.github.io/2016/10/03/hello-laravel</link>
      <pubDate>Mon, 03 Oct 2016 20:51:42 +0900</pubDate>
      
      <guid>https://catatsu.github.io/2016/10/03/hello-laravel</guid>
      <description>

&lt;p&gt;どうも僕(&lt;a href=&#34;https://github.com/nabeen&#34;&gt;@nabeen&lt;/a&gt;)です。&lt;/p&gt;

&lt;p&gt;RubyにはRailsというRubyのフレームワークといえばコレ！みたいなものがあるんですが、残念ながらPHP界隈にはRailsに該当するようなフレームワークはありません。&lt;/p&gt;

&lt;p&gt;そんな中、個人的に一番ナウいと思っているPHPフレームワークLaravelに触れるべく、サンプルアプリを通してその使いやすさを実感してみようと思います！&lt;/p&gt;

&lt;h2 id=&#34;開発環境構築&#34;&gt;開発環境構築&lt;/h2&gt;

&lt;p&gt;ナウいフレームワークだけあって、Laravelは&lt;code&gt;composer&lt;/code&gt;で入れる、また、&lt;code&gt;vagrant&lt;/code&gt;も標準で準備されています。最高！最高！ふぅうううーーーーーー！！&lt;/p&gt;

&lt;pre&gt;&lt;code class=&#34;language-bash&#34;&gt;$ composer require laravel/homestead
&lt;/code&gt;&lt;/pre&gt;

&lt;pre&gt;&lt;code class=&#34;language-bash&#34;&gt;$ php vendor/bin/homestead make
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;ここまでやれば&lt;code&gt;vagrant up&lt;/code&gt;までたどり着きます。マジかよ楽かよ。&lt;/p&gt;

&lt;pre&gt;&lt;code class=&#34;language-bash&#34;&gt;$ vagrant up
&lt;/code&gt;&lt;/pre&gt;

&lt;pre&gt;&lt;code class=&#34;language-bash&#34;&gt;$ vagrant ssh
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;あとはアプリをサクッと作るぜ！&lt;/p&gt;

&lt;pre&gt;&lt;code class=&#34;language-bash&#34;&gt;$ composer create-project laravel/laravel --prefer-dist laravel-apps
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;とここまで来て気づいたんですが、プロジェクト配下でアプリを作ってしまったので階層がちょっと気持ち悪い感じになってしまいました。&lt;/p&gt;

&lt;p&gt;のでちょっと変えて、こんな感じに。&lt;code&gt;vagrant&lt;/code&gt;関連はvagrant配下に押しやっています。ちょっとスッキリ。&lt;/p&gt;

&lt;pre&gt;&lt;code class=&#34;language-bash&#34;&gt;$ tree -L 1 ./
./
├── app
├── artisan
├── bootstrap
├── composer.json
├── composer.lock
├── config
├── database
├── gulpfile.js
├── package.json
├── phpunit.xml
├── public
├── readme.md
├── resources
├── routes
├── server.php
├── storage
├── tests
├── vagrant
└── vendor
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;あとはブラウザから&lt;code&gt;http://192.168.10.10/&lt;/code&gt;を叩けば、デフォルトページが出ていますね！ね？え？出るよね？&lt;/p&gt;

&lt;h2 id=&#34;チュートリアル&#34;&gt;チュートリアル&lt;/h2&gt;

&lt;p&gt;公式にはチュートリアル的なものがなかったので、&lt;a href=&#34;http://qiita.com/fumiyasac@github/items/78a335880f7abb1de8bf&#34;&gt;こちら&lt;/a&gt;のチュートリアル的なのを参考に、Laravelっていきます。&lt;/p&gt;

&lt;p&gt;やることはリンク先にある通りなので爆、ポイントをかいつまんで説明します。&lt;/p&gt;

&lt;p&gt;マイグレーションファイルを作るコマンドは以下。中身は完全Skeletonなので、自分でガリガリ書いていきましょう。書くべし書くべし！&lt;/p&gt;

&lt;pre&gt;&lt;code class=&#34;language-bash&#34;&gt;$ php artisan make:migration create_topics_table
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;マイグレーションの適用もちゃんとコマンドで。&lt;/p&gt;

&lt;pre&gt;&lt;code class=&#34;language-bash&#34;&gt;$ php artisan migrate
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;戻したければロールバックもできる。ロールバックは、「前回適用したもの」がロールバックされるようだ（※一気に幾つかマイグレーションしたら一気にいくつかロールバックされる）。&lt;/p&gt;

&lt;pre&gt;&lt;code class=&#34;language-bash&#34;&gt;$ php artisan migrate:rollback
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;モデルもジェネレータで生成できる。&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;$ php artisan make:model Topic
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;ときたら当然コントローラーもジェネレータで生成できます。&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;$ php artisan make:controller TopicsController
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;でもこれ、ホント単一ファイル(テストもないしViewもない)しか生成してくれないので、そんなに使い勝手は良くないかも。。コレくらいだったら&lt;code&gt;cp&lt;/code&gt;でコピーしちゃった方がいいかもしんない。&lt;/p&gt;

&lt;p&gt;まぁそれは置いといて、&lt;code&gt;rails c&lt;/code&gt;的なあれもあります。&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;$ php artisan tinker
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;ルーティングは前のバージョンとは変わっていて、&lt;code&gt;routes/web.php&lt;/code&gt;で定義されてるっぽい。設定されているルーティングを見るにはこのコマンド。&lt;code&gt;resource&lt;/code&gt;でRESTfulなURIも生成できる！Railsライクですね。&lt;/p&gt;

&lt;pre&gt;&lt;code class=&#34;language-bash&#34;&gt;$ php artisan route:list
+--------+----------+--------------------+------+----------------------------------------------+--------------+
| Domain | Method   | URI                | Name | Action                                       | Middleware   |
+--------+----------+--------------------+------+----------------------------------------------+--------------+
|        | GET|HEAD | /                  |      | App\Http\Controllers\TopicsController@index  | web          |
|        | GET|HEAD | api/user           |      | Closure                                      | api,auth:api |
|        | GET|HEAD | topics/add         |      | App\Http\Controllers\TopicsController@add    | web          |
|        | POST     | topics/create      |      | App\Http\Controllers\TopicsController@create | web          |
|        | POST     | topics/delete      |      | App\Http\Controllers\TopicsController@delete | web          |
|        | GET|HEAD | topics/edit/{id}   |      | App\Http\Controllers\TopicsController@edit   | web          |
|        | POST     | topics/update/{id} |      | App\Http\Controllers\TopicsController@update | web          |
|        | GET|HEAD | topics/{id}        |      | App\Http\Controllers\TopicsController@show   | web          |
+--------+----------+--------------------+------+----------------------------------------------+--------------+
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;とまぁこんな感じで←え、なんとなくざっくり理解できました。&lt;/p&gt;

&lt;p&gt;ここまでのソースは&lt;a href=&#34;https://github.com/nabeen/laravel_apps/tree/hello-laravel&#34;&gt;Github&lt;/a&gt;にあげているので、ご自由にどうぞ。&lt;/p&gt;

&lt;h2 id=&#34;ちょっと気に食わないところ&#34;&gt;ちょっと気に食わないところ&lt;/h2&gt;

&lt;p&gt;箇条書きでいきます。&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;ControllerがHttp配下にあるのが慣れない&lt;/li&gt;
&lt;li&gt;ModelがApp直下にあるのはどうなの？&lt;/li&gt;
&lt;li&gt;ルーティングファイルの名前が&lt;code&gt;web.php&lt;/code&gt;だと？&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;まだ殆どLaravelのメリットは感じられていませんが、とりあえず慣れ親しんだ感じのフォルダ構成から結構逸脱してるなぁという印象。まぁこういうのは慣れだし、そこまで障害にはならないんですが（自分好みの定義にも変えられるんだろうけど、なるべくデフォルトから逸脱したくはない）。&lt;/p&gt;

&lt;h2 id=&#34;おわりに&#34;&gt;おわりに&lt;/h2&gt;

&lt;p&gt;なんか全然Laravelの機能が把握できなかった気がするけど、触りとしてはこんなもんでいいですかね？&lt;/p&gt;

&lt;p&gt;次回はソーシャルログイン辺りを実装していきます。&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>LAMPエンジニアがSwiftを始めた時に必ずぶち当たるであろう壁について簡単に説明する</title>
      <link>https://catatsu.github.io/2016/09/29/hello-swift</link>
      <pubDate>Thu, 29 Sep 2016 20:55:14 +0900</pubDate>
      
      <guid>https://catatsu.github.io/2016/09/29/hello-swift</guid>
      <description>

&lt;p&gt;どうも僕(&lt;a href=&#34;https://github.com/nabeen&#34;&gt;@nabeen&lt;/a&gt;)です。&lt;/p&gt;

&lt;p&gt;ペーペーエンジニアの僕ですが、今までは基本的にPHPでお仕事してきました。でもとあるプロジェクトでいきなりSwiftで書かれたプロダクトを引き継ぐことに、、、！今日はそんな僕が最初に躓いた（今でも躓いている）ことについてお話させていただきます。&lt;/p&gt;

&lt;h2 id=&#34;大前提&#34;&gt;大前提&lt;/h2&gt;

&lt;p&gt;チュートリアルから始めて新規開発とかだとまた違うんでしょうけど、「既存のプロダクト」を「SwiftのSも知らないLAMPエンジニア」が引き継いだ、というちょっと変わった状況であることを念頭に置いておいてください。&lt;/p&gt;

&lt;p&gt;ちなみに、Objective-Cも書いたことはありません。&lt;/p&gt;

&lt;h2 id=&#34;viewの作り方がわからんよ&#34;&gt;Viewの作り方がわからんよ&lt;/h2&gt;

&lt;p&gt;現時点の結論：Storyboardで全体の画面遷移を定義して、細かい部品をxibで作る&lt;/p&gt;

&lt;p&gt;我々LAMPエンジニアは、Viewと言えばHTMLです。CSSです。JSです。&lt;strong&gt;でもSwift（というかネイティブ）は違うんだってね！&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;基本的にはGUIで作り込んでいくことになります。GUIでなんとかコンポーネントをドラッグ&amp;amp;ドロップして、GUIでサイズ指定して、GUIで位置指定して、GUIでごにょごにょ。この辺はコード的にはXMLで定義されてるんですけど、なんだか「見えない部分でやってる感」がすごい。&lt;/p&gt;

&lt;p&gt;なんか昔Dreamweaverのビジュアルエディタで位置調整してた時を少し思い出したよ。&lt;/p&gt;

&lt;h2 id=&#34;view作ってたらconstraintsがーーって怒られるよ&#34;&gt;View作ってたらConstraintsがーーって怒られるよ&lt;/h2&gt;

&lt;p&gt;現時点の結論：きちんと制約をつけましょう&lt;/p&gt;

&lt;p&gt;Xcodeは結構頭がいいので、「なんかこれどこに配置するのかあやふやじゃね？」って時に、ちゃんと僕を怒ってくれます。赤で怒られるから、結構強めに怒ってるのかな。&lt;/p&gt;

&lt;p&gt;でも悪いのはConstraintsをきちんと設定していない僕なので、今ではむしろ感謝しています！Xcodeありがとう！&lt;/p&gt;

&lt;h2 id=&#34;xib表示しただけでなんかdiff出るんだけど&#34;&gt;xib表示しただけでなんかdiff出るんだけど？&lt;/h2&gt;

&lt;p&gt;現時点の結論：自分が「意図的に変更した」部分以外はrevertする&lt;/p&gt;

&lt;p&gt;なんかXMLにOXのシステムバージョンを持っていて、更新されてるとdiffが出てしまう。これはマジでうざい。システム情報なんて持たないで欲しい。ファック！ファック！！ファック！！！&lt;/p&gt;

&lt;p&gt;社内のメンターに聞いたところ、「そういうもん」らしい。まじかよ。マゾかよ。&lt;/p&gt;

&lt;h2 id=&#34;とか-とかあるけど-あれなんなん&#34;&gt;?とか!とかあるけど、あれなんなん?&lt;/h2&gt;

&lt;p&gt;現時点の結論：とりあえず&lt;a href=&#34;http://qiita.com/maiki055/items/b24378a3707bd35a31a8&#34;&gt;ここ&lt;/a&gt;読んどけばいい&lt;/p&gt;

&lt;p&gt;オプショナル型っていうらしい。いわゆるヌルポ（この前覚えた言葉）を防いでくれるために使われるやつで、世界各国のSwiftエンジニアが便利便利と阿吽絶叫しているようだけど、他の言語にはない概念なので( ﾟдﾟ)ﾎﾟｶｰﾝとしていた。&lt;/p&gt;

&lt;p&gt;でも上記の記事を読んでおけば、( ﾟдﾟ)ﾎﾟｶｰﾝから(&lt;em&gt;´﹃｀&lt;/em&gt;)ﾀﾞﾗｰくらいにはなると思う。&lt;/p&gt;

&lt;h2 id=&#34;delegateってなんだよファックかよ&#34;&gt;delegateってなんだよファックかよ&lt;/h2&gt;

&lt;p&gt;現時点の結論：自分で使える気がしない&lt;/p&gt;

&lt;p&gt;delegateはprotcolとセットで出てきて、「何かの処理を依頼する」時に使われるもの、らしい。という概念自体は&lt;a href=&#34;http://qiita.com/mochizukikotaro/items/a5bc60d92aa2d6fe52ca&#34;&gt;このへん&lt;/a&gt;とか読めばわかるんだけど、なんか現実的なユースケースがよくわからない。&lt;/p&gt;

&lt;p&gt;ごめん。&lt;/p&gt;

&lt;h2 id=&#34;viewのviewdidloadとかっていつ呼ばれんの&#34;&gt;ViewのviewDidloadとかっていつ呼ばれんの？&lt;/h2&gt;

&lt;p&gt;現時点の結論：ライフサイクルはわかったけどいつ何の処理を書けばいいのやら&lt;/p&gt;

&lt;p&gt;例えば僕がやっているプロジェクトだと、ViewControllerでこういうのが結構呼ばれている。&lt;/p&gt;

&lt;pre&gt;&lt;code class=&#34;language-swift&#34;&gt;override func viewDidLoad() {
    super.viewDidLoad()
	
	//ごにょごにょ
}
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;上記から察するに、「親クラスのアクションを上書きしてるんだな」「親クラスのアクションも呼び出すんだな」ってことはわかるんだけど、じゃあこれいつ呼ばれんの、と。調べてみると&lt;a href=&#34;http://qiita.com/mo_to_44/items/0ca628b4cc74c8c5599d&#34;&gt;ライフサイクル&lt;/a&gt;がちゃんとあって、呼び出し順があるようだ（当然か）。jQueryの&lt;code&gt;$(document).ready&lt;/code&gt;みたいなもんね。&lt;/p&gt;

&lt;p&gt;でもこのライフサイクルがあるのはいいけど、どこになんの処理を書くのがベストプラクティスなんですか？&lt;/p&gt;

&lt;h2 id=&#34;デフォルトで組み込まれているクラス群-関数群がわからない&#34;&gt;デフォルトで組み込まれているクラス群、関数群がわからない&lt;/h2&gt;

&lt;p&gt;現時点の結論：覚えるしか無い&lt;/p&gt;

&lt;p&gt;Javaもそうなんだけど、「やたらと長い名前の標準関数」みたいなのが、Swiftにもあります。んで、そもそもどんなクラス、関数があるのかってのは、もう覚えるしかない。覚える以外の方法があったら教えて欲しい。&lt;/p&gt;

&lt;h2 id=&#34;observerにobservable&#34;&gt;ObserverにObservable&lt;/h2&gt;

&lt;p&gt;現時点の結論：僕にはまだ早かった&lt;/p&gt;

&lt;p&gt;いわゆるReactiveプログラミングの概念。監視対象を決めて、それが変わったらあれもこれもそれも自動で変えてねっていうような感じの仕組み？かな？&lt;/p&gt;

&lt;p&gt;わかってる人風に言うと、&lt;strong&gt;Reactiveを使えば簡単に状態管理を制御できます。&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Swiftうんぬんというよりも、Reactiveプログラミングに触れたことがない僕はまだまだ理解に及んでいません。&lt;/p&gt;

&lt;p&gt;ううっ。&lt;/p&gt;

&lt;h2 id=&#34;おまけ-感想&#34;&gt;おまけ：感想&lt;/h2&gt;

&lt;p&gt;基本的にはViewを作るだけなのに、なんでこんなに知らない技術が出てくるんだ！&lt;/p&gt;

&lt;p&gt;プロダクトの特性上、ネイティブでロジックをガリガリ書くってことはなく、APIのレスポンスで何をどう表示するかってのがメインになります。要はViewをいい感じにするだけ、処理はAPI。でもでもでもでもなんだか難しい！&lt;/p&gt;

&lt;p&gt;そもそもコンパイラ型言語っぽい書き方にまだ慣れてない。&lt;/p&gt;

&lt;h2 id=&#34;おわりに&#34;&gt;おわりに&lt;/h2&gt;

&lt;p&gt;とりあえず今日からiOSエンジニアって名乗っておきますね(&lt;em&gt;´﹃｀&lt;/em&gt;)&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>ReactNativeの開発環境構築</title>
      <link>https://catatsu.github.io/2016/09/27/react-native-tutorial</link>
      <pubDate>Tue, 27 Sep 2016 23:35:00 +0900</pubDate>
      
      <guid>https://catatsu.github.io/2016/09/27/react-native-tutorial</guid>
      <description>

&lt;p&gt;どうも僕(&lt;a href=&#34;https://github.com/matumotto&#34;&gt;@matumotto&lt;/a&gt;)です。
ReactNativeを久しぶりに覗いたらバージョンがめっちゃあがってたので、1からやりなおしていきます。&lt;/p&gt;

&lt;p&gt;※OS X環境想定&lt;br /&gt;
node: 4.2.2,
react: 15.3.2,
react-native: 0.34.0&lt;/p&gt;

&lt;hr /&gt;

&lt;h2 id=&#34;reactnativeでhelloworldまでやってみる&#34;&gt;ReactNativeでHelloWorldまでやってみる&lt;/h2&gt;

&lt;hr /&gt;

&lt;h3 id=&#34;環境準備&#34;&gt;環境準備&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;まずnode.jsとwatchmanをインストール&lt;/li&gt;
&lt;/ul&gt;

&lt;pre&gt;&lt;code class=&#34;language-bash&#34;&gt;brew install node
brew install watchman
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;※watchmanは推奨。Facebook製のファイル監視ツール。&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;npmでReactNativeのコマンドツールをインストール&lt;/li&gt;
&lt;/ul&gt;

&lt;pre&gt;&lt;code class=&#34;language-bash&#34;&gt;npm install -g react-native-cli
&lt;/code&gt;&lt;/pre&gt;

&lt;hr /&gt;

&lt;h3 id=&#34;プロジェクト作成-ビルド&#34;&gt;プロジェクト作成〜ビルド&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;まずはプロジェクトを作成する&lt;/li&gt;
&lt;/ul&gt;

&lt;pre&gt;&lt;code class=&#34;language-bash&#34;&gt;react-native init TestProject
&lt;/code&gt;&lt;/pre&gt;

&lt;ul&gt;
&lt;li&gt;移動&lt;/li&gt;
&lt;/ul&gt;

&lt;pre&gt;&lt;code class=&#34;language-bash&#34;&gt; cd TestProject
&lt;/code&gt;&lt;/pre&gt;

&lt;ul&gt;
&lt;li&gt;Android用にビルドして実行
※事前にエミュレータを立ち上げておいてください(もしくは実機接続)&lt;/li&gt;
&lt;/ul&gt;

&lt;pre&gt;&lt;code&gt; #実機でやる場合のみ必須
 adb reverse tcp:8081 tcp:8081
 react-native run-android
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;※ iOSの場合は &lt;code&gt;run-ios&lt;/code&gt; になります。&lt;/p&gt;

&lt;hr /&gt;

&lt;h3 id=&#34;アプリが立ち上がった&#34;&gt;アプリが立ち上がった！&lt;/h3&gt;

&lt;p&gt;すこし文言を替えてみます！&lt;br&gt;
 起動したままで、プロジェクト内にある&amp;rdquo;index.android.js&amp;rdquo;を変更してみましょう！&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;文言を変更する&lt;/li&gt;
&lt;/ul&gt;

&lt;pre&gt;&lt;code class=&#34;language-bash&#34;&gt; sed -i &#39;&#39; &#39;s/Welcome to React Native!/Hello React!/g&#39; index.android.js
&lt;/code&gt;&lt;/pre&gt;

&lt;hr /&gt;

&lt;h3 id=&#34;変更をアプリに反映&#34;&gt;変更をアプリに反映&lt;/h3&gt;

&lt;p&gt;アプリのメニューからReloadを選択するとテキストが更新されます。&lt;br&gt;
Hello React! やったね！&lt;/p&gt;

&lt;p&gt;おしまい。&lt;/p&gt;

&lt;p&gt;つぎは何かモノを作っていきます。&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>Rails5で爆速チャットアプリを作ってみた</title>
      <link>https://catatsu.github.io/2016/09/27/rails5-chat-app</link>
      <pubDate>Tue, 27 Sep 2016 23:09:27 +0900</pubDate>
      
      <guid>https://catatsu.github.io/2016/09/27/rails5-chat-app</guid>
      <description>

&lt;p&gt;どうも僕(&lt;a href=&#34;https://github.com/nabeen&#34;&gt;@nabeen&lt;/a&gt;)です。&lt;/p&gt;

&lt;p&gt;Rails5では、コアを構成するライブラリにAction Cableが追加されました。これを使うと、Web Socketを使ったリアルタイムなチャットアプリケーションが簡単に作れるらしい、、！？&lt;/p&gt;

&lt;p&gt;※本記事は&lt;a href=&#34;http://gihyo.jp/magazine/wdpress/archive/2016/vol93&#34;&gt;WEB+DB PRESS Vol.93&lt;/a&gt;の内容を一部改変したものになります。&lt;/p&gt;

&lt;h2 id=&#34;前準備&#34;&gt;前準備&lt;/h2&gt;

&lt;p&gt;まずはローカルにプロジェクト用のディレクトリを掘る。&lt;/p&gt;

&lt;pre&gt;&lt;code class=&#34;language-bash&#34;&gt;$ mkdir trailen
$ cd trailen
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;んでgit管理下にして、&lt;code&gt;README.md&lt;/code&gt;を追加しておきます。&lt;/p&gt;

&lt;pre&gt;&lt;code class=&#34;language-bash&#34;&gt;$ git init
$ touch README.md
$ echo &amp;quot;trailen&amp;quot; &amp;gt;&amp;gt; README.md
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;&lt;code&gt;.gitignore&lt;/code&gt;は&lt;code&gt;gibo&lt;/code&gt;で作るのがトレンドだと信じているので、giboを使って生成しようそうしよう。&lt;/p&gt;

&lt;pre&gt;&lt;code class=&#34;language-bash&#34;&gt;$ touch .gitignore
$ gibo OSX Ruby Rails Vagrant JetBrains &amp;gt;&amp;gt; .gitignore
&lt;/code&gt;&lt;/pre&gt;

&lt;h2 id=&#34;開発環境構築&#34;&gt;開発環境構築&lt;/h2&gt;

&lt;p&gt;僕は&lt;a href=&#34;https://github.com/rails/rails-dev-box#whats-in-the-box&#34;&gt;rails-dev-box&lt;/a&gt;をベースにちょこっとカスタマイズして使いました。基本、cloneして来るだけで使えるのでここでは詳細は割愛。&lt;/p&gt;

&lt;p&gt;後は簡単ですね。&lt;/p&gt;

&lt;pre&gt;&lt;code class=&#34;language-bash&#34;&gt;$ vagrant up
$ vagrant ssh
&lt;/code&gt;&lt;/pre&gt;

&lt;h2 id=&#34;railsのインストール&#34;&gt;Railsのインストール&lt;/h2&gt;

&lt;p&gt;グローバルに&lt;code&gt;rails&lt;/code&gt;をインストールします。&lt;/p&gt;

&lt;pre&gt;&lt;code class=&#34;language-bash&#34;&gt;$ sudo gem install rails
$ rails -v
Rails 5.0.0.1
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;最新版ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!&lt;/p&gt;

&lt;h2 id=&#34;新規アプリの作成&#34;&gt;新規アプリの作成&lt;/h2&gt;

&lt;p&gt;テストなし、DBをmysqlで作成します。完全に僕の好みです。テストはRspec使いたいんでね（この記事では書きません）。&lt;/p&gt;

&lt;pre&gt;&lt;code class=&#34;language-bash&#34;&gt;$ rails new trailen -T -d mysql
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;DBは作ってくれないので、ここは手動で。&lt;/p&gt;

&lt;pre&gt;&lt;code class=&#34;language-sql&#34;&gt;mysql&amp;gt; create database trailen_development;
Query OK, 1 row affected (0.00 sec)
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;ここまで来ればサーバー起動でデフォルト画面が表示されます（DBのパスワードとかはちゃんと設定してね）。rails5になってデフォルト画面変わっていることに少しの感動を覚える僕。&lt;/p&gt;

&lt;pre&gt;&lt;code class=&#34;language-bash&#34;&gt;$ rails s -b 0.0.0.0 -p 8888
&lt;/code&gt;&lt;/pre&gt;

&lt;h2 id=&#34;コントローラーの作成&#34;&gt;コントローラーの作成&lt;/h2&gt;

&lt;p&gt;長い前準備が終わり、ようやく本命のチャットアプリに着手します。ジェネレータでチャット表示用のコントローラーを作成します。&lt;/p&gt;

&lt;pre&gt;&lt;code class=&#34;language-bash&#34;&gt;$ ./bin/rails g controller rooms show
&lt;/code&gt;&lt;/pre&gt;

&lt;h2 id=&#34;モデルの作成&#34;&gt;モデルの作成&lt;/h2&gt;

&lt;p&gt;次は当然モデルですね。メッセージ保存用。&lt;/p&gt;

&lt;pre&gt;&lt;code class=&#34;language-bash&#34;&gt;$ ./bin/rails g model message content:text
$ ./bin/rails db:migrate
&lt;/code&gt;&lt;/pre&gt;

&lt;h2 id=&#34;ビューの作成&#34;&gt;ビューの作成&lt;/h2&gt;

&lt;p&gt;本体と、&lt;/p&gt;

&lt;pre&gt;&lt;code class=&#34;language-haml&#34;&gt;&amp;lt;h1&amp;gt;Chat room&amp;lt;/h1&amp;gt;

&amp;lt;div id=&amp;quot;messages&amp;quot;&amp;gt;
  &amp;lt;%= render @messages %&amp;gt;
&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;パーシャル。&lt;/p&gt;

&lt;pre&gt;&lt;code class=&#34;language-haml&#34;&gt;&amp;lt;div class=&amp;quot;message&amp;quot;&amp;gt;
  &amp;lt;p&amp;gt;&amp;lt;%= message.content%&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;h2 id=&#34;チャネルの作成&#34;&gt;チャネルの作成&lt;/h2&gt;

&lt;p&gt;んで、これまたジェネレータでチャンネルを作っていきます。&lt;/p&gt;

&lt;pre&gt;&lt;code class=&#34;language-bash&#34;&gt;$ ./bin/rails g channel room speak
Running via Spring preloader in process 11323
      create  app/channels/room_channel.rb
   identical  app/assets/javascripts/cable.js
      create  app/assets/javascripts/channels/room.coffee
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;&lt;code&gt;app/channels/room_channel.rb&lt;/code&gt;と&lt;code&gt;app/assets/javascripts/channels/room.coffee&lt;/code&gt;が作成されました（ナニコレ）。前者がサーバーサイドの処理、後者がフロント側の処理を担当するっぽい。&lt;/p&gt;

&lt;p&gt;んで、ここまでくればWebSocketのコネクションが貼れるはずだったんだけど、ここでエラーが発生します。どうやら許可されていないホストらしい。わざわざ許可せないかんのか。&lt;/p&gt;

&lt;pre&gt;&lt;code class=&#34;language-bash&#34;&gt;Started GET &amp;quot;/cable&amp;quot; for 192.168.33.1 at 2016-09-27 12:40:45 +0000
Cannot render console from 192.168.33.1! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Started GET &amp;quot;/cable/&amp;quot; [WebSocket] for 192.168.33.1 at 2016-09-27 12:40:45 +0000
Request origin not allowed: http://192.168.33.33:8888
Failed to upgrade to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket)
Finished &amp;quot;/cable/&amp;quot; [WebSocket] for 192.168.33.1 at 2016-09-27 12:40:45 +0000
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;先人によると、設定を追加してあげないといけないようで、&lt;/p&gt;

&lt;p&gt;参考：&lt;a href=&#34;http://morizyun.github.io/blog/action-cable-introduction-reading/&#34;&gt;Action CableのREADMEを読んでみた！&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;僕の環境だと、以下の設定を&lt;code&gt;config/environments/development.rb&lt;/code&gt;に追記してあげました。ここは人それぞれだと思うので、自信の環境に合うように設定してください。&lt;/p&gt;

&lt;pre&gt;&lt;code class=&#34;language-ruby&#34;&gt;config.action_cable.allowed_request_origins = [&#39;http://localhost:8888&#39;]
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;追記して再起動したらOKになりました。うん、いいね順調順調。&lt;/p&gt;

&lt;pre&gt;&lt;code class=&#34;language-bash&#34;&gt;Finished &amp;quot;/cable/&amp;quot; [WebSocket] for 10.0.2.2 at 2016-09-27 12:43:43 +0000
Started GET &amp;quot;/cable&amp;quot; for 10.0.2.2 at 2016-09-27 12:43:43 +0000
Cannot render console from 10.0.2.2! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Started GET &amp;quot;/cable/&amp;quot; [WebSocket] for 10.0.2.2 at 2016-09-27 12:43:43 +0000
Successfully upgraded to WebSocket (REQUEST_METHOD: GET, HTTP_CONNECTION: Upgrade, HTTP_UPGRADE: websocket)
RoomChannel is transmitting the subscription confirmation
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;あとはもうガーッとコーディングしていけば完成！DBに突っ込んだりイベント発火させたりわちゃわちゃわちゃわちゃ必要だもんね。ガーッと書きましょう。ガーッと。&lt;/p&gt;

&lt;p&gt;で、この時点のコードを見たい方は&lt;a href=&#34;https://github.com/nabeen/trailen/tree/chat-app-base&#34;&gt;Github&lt;/a&gt;に乗せていますので、そちらをご参照あれ（書く気力がなくなった）。
もちろん本番で運用する場合はもっと設定が必要ですが、とりあえずサクッと作れそうだなという感触は得られましたね。&lt;/p&gt;

&lt;h2 id=&#34;おわりに&#34;&gt;おわりに&lt;/h2&gt;

&lt;p&gt;今回はサクッと作るところまでで終わったけど、最終的にはあれやこれやしてメインのWEBアプリのサブ機能的な位置づけでひっそり存在するくらいにはしていきたいという願望。&lt;/p&gt;

&lt;p&gt;ぼくはれいるずとおともだちになるんだ！&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>【イベントレポート】HackerTackleに参加してきた #hackt</title>
      <link>https://catatsu.github.io/2016/09/26/hackertackle</link>
      <pubDate>Mon, 26 Sep 2016 21:09:27 +0900</pubDate>
      
      <guid>https://catatsu.github.io/2016/09/26/hackertackle</guid>
      <description>

&lt;p&gt;どうも僕(&lt;a href=&#34;https://github.com/nabeen&#34;&gt;@nabeen&lt;/a&gt;)です。&lt;/p&gt;

&lt;p&gt;今更感が半端ないですが、先日開催された&lt;a href=&#34;https://hackertackle.github.io/&#34;&gt;HackerTackle&lt;/a&gt;に参加してきたので、そのイベントレポートをば！もう一ヶ月近く前の話だから、半分以上忘れてしまったいるッ！&lt;/p&gt;

&lt;h2 id=&#34;セッション一覧&#34;&gt;セッション一覧&lt;/h2&gt;

&lt;p&gt;&lt;a href=&#34;https://hackertackle.github.io/&#34;&gt;公式&lt;/a&gt;をご参考あれ。&lt;/p&gt;

&lt;p&gt;べ、別に書くのが面倒くさいわけじゃないからねっ！&lt;/p&gt;

&lt;h2 id=&#34;セッション詳細&#34;&gt;セッション詳細&lt;/h2&gt;

&lt;p&gt;では僕が聞いたセッションと感想をバババーっと見ていきましょうー。さっきも言ったけど、もう半分以上は記憶がない。やっぱりこういうのは頭が新鮮なうちに書くべきやなーと改めて思いますた。&lt;/p&gt;

&lt;h3 id=&#34;vr-ar-mr-ってなんだっけ-unityで作ってみる&#34;&gt;VR？AR？MR？ってなんだっけ？Unityで作ってみる&lt;/h3&gt;

&lt;p&gt;Vuforiaを使えばUnityで超簡単にAR出来ちゃうぜ！って話。&lt;/p&gt;

&lt;p&gt;何を隠そう、僕はこのセッションに触発されてUnityでARを始めました！いいよーいいよーARいいよー。AR/VR/MRは、これまでとは一線を画すようなUXが提供できるので、今後もどんどん伸びていく分野だと個人的には思っています。&lt;/p&gt;

&lt;p&gt;んで、今日時点で企業として本格的にAR/VR/MRに取り組んでいるところはまだ多くはない印象。ってことは、今から始めればアーリーアダプタになれますぜ、兄さん。&lt;/p&gt;

&lt;p&gt;発表資料：&lt;a href=&#34;http://kzonag.hatenablog.com/entry/2016/09/12/231614&#34;&gt;Hacker Tackle 2016でVR/AR/MRの話をしてきました&lt;/a&gt;&lt;/p&gt;

&lt;h3 id=&#34;スマートフォン体験を一歩先へ-プログレッシブウェブアプリの作り方&#34;&gt;スマートフォン体験を一歩先へ プログレッシブウェブアプリの作り方&lt;/h3&gt;

&lt;p&gt;一言で言えば、「ネイティブアプリ要らなくね？」って話です。&lt;/p&gt;

&lt;p&gt;プログレッシブウェブアプリで出来ることは以下。&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;ホームアイコン&lt;/li&gt;
&lt;li&gt;スプラッシュ画面&lt;/li&gt;
&lt;li&gt;全画面&lt;/li&gt;
&lt;li&gt;オフライン対応&lt;/li&gt;
&lt;li&gt;Push通知（ただしAndroidに限る）&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;僕「やべぇ、ネイティブで欲しい機能全部あるやん。」&lt;/p&gt;

&lt;p&gt;ソシャゲなんかはネイティブでゴリゴリやらないといけない部分があったりするけど、ツール系だったりEC系だったり、WEBベースのものに関してはこれからこういう流れが加速していくかも？特に僕が担当しているサービスなんかまさにこれ（って言ってメンバーに話したら全く乗り気じゃなかった罠。&lt;/p&gt;

&lt;p&gt;発表資料：&lt;a href=&#34;https://docs.google.com/presentation/d/1wYHzG3uezJz2LBEWleVBpw8oYT_to7YowwP7PW2gkuI/pub?start=false&amp;amp;loop=false&amp;amp;delayms=3000&amp;amp;slide=id.gf39949af9_0_0&#34;&gt;プログレッシブウェブアプリの作り方&lt;/a&gt;&lt;/p&gt;

&lt;h3 id=&#34;今日からkotlinでandroid開発を始められるようになる話&#34;&gt;今日からKotlinでAndroid開発を始められるようになる話&lt;/h3&gt;

&lt;p&gt;KotlinならJavaより簡潔に記述できまっせーって話。&lt;/p&gt;

&lt;p&gt;ただ悲しきかな、Javaをやったことが無い僕は、話の半分以上わかりませんでしたとさ。&lt;/p&gt;

&lt;p&gt;確かにKotlinの方が短く直感的に書けることはわかる。でも、やっぱりこういうのは予備知識があった上で聞かないとって感じですね。予習しとけばよかったでござる。&lt;/p&gt;

&lt;p&gt;発表資料：見つからない&amp;hellip;けど、たろうさんの&lt;a href=&#34;https://speakerdeck.com/ntaro&#34;&gt;他の発表資料&lt;/a&gt;を見つけた&lt;/p&gt;

&lt;h3 id=&#34;ハッカーの思考でqolを向上させよう&#34;&gt;ハッカーの思考でQoLを向上させよう！&lt;/h3&gt;

&lt;p&gt;すみません、マインスイーパーが高速でクリアされていく様しか覚えていませんww&lt;/p&gt;

&lt;p&gt;あとはKinectセンサーでリアルタイムで3Dモデルに踊らせたりとか、あーこういうことも出来るのかーっていう部分が多かったです。ただ、このセッションを聞いてQoLが向上するかどうかは定かではありません。&lt;/p&gt;

&lt;p&gt;Kinectセンサーは、ARアプリと組み合わせるといい感じになりそう！&lt;/p&gt;

&lt;p&gt;発表資料：見つからない&amp;hellip;&lt;/p&gt;

&lt;h3 id=&#34;俺が考えた最強のreactiveインターフェイス&#34;&gt;俺が考えた最強のReactiveインターフェイス&lt;/h3&gt;

&lt;p&gt;はい、Reactiveのりの字も知らない僕が通りますよっと。&lt;/p&gt;

&lt;p&gt;内容自体は、「Reactiveをやってれば困るであろう」部分にフォーカスした内容でした。ただReactiveを知らない僕にとってはそのユースケースは全くピンとこず。でも若干Reactiveプログラミングってどんなもんなのかっていう知識は身につきました。&lt;/p&gt;

&lt;p&gt;後で調べたんだけど、各言語でReactive向けのライブラリが結構あるみたいですね（RxJSとか）。そもそも僕、SwiftはHello World程度なので、他の言語で始めるのがベストプラクティスだと思った。最近はJS気になってるから、JSで始めてみよう！そうだそうしよう！&lt;/p&gt;

&lt;p&gt;発表資料：見つからない&amp;hellip;&lt;/p&gt;

&lt;h3 id=&#34;ブロックチェーンでフィンテックするビジネスに可能性を感じている皆様へ&#34;&gt;ブロックチェーンでフィンテックするビジネスに可能性を感じている皆様へ&lt;/h3&gt;

&lt;p&gt;ブロックチェーンの概念的な部分の話。&lt;/p&gt;

&lt;p&gt;ぶっちゃけ全くわからんかったです。。。だいがくのせんせいのおはなしむずかしい。&lt;/p&gt;

&lt;p&gt;発表資料：見つからない&amp;hellip;&lt;/p&gt;

&lt;h2 id=&#34;おわりに&#34;&gt;おわりに&lt;/h2&gt;

&lt;p&gt;次のイベントは&lt;a href=&#34;http://event.shoeisha.jp/devsumi/20160929/&#34;&gt;デブサミ&lt;/a&gt;です！行けるかどうかはわからんけども。もし知ってる人に会ったら大きい声でこんにちはって言いますね！&lt;/p&gt;
</description>
    </item>
    
    <item>
      <title>Catatsuの技術ブログ始めました！</title>
      <link>https://catatsu.github.io/2016/09/23/initial-commit</link>
      <pubDate>Fri, 23 Sep 2016 20:22:41 +0900</pubDate>
      
      <guid>https://catatsu.github.io/2016/09/23/initial-commit</guid>
      <description>

&lt;p&gt;どうも僕(&lt;a href=&#34;https://github.com/nabeen&#34;&gt;@nabeen&lt;/a&gt;)です。&lt;/p&gt;

&lt;p&gt;有志でやってる&lt;a href=&#34;https://github.com/Catatsu&#34;&gt;Catatsu&lt;/a&gt;というプロジェクトがあるんですが、せっかくなのでってことでプロジェクト用のブログを立ち上げることにしました！エンジニア的にはアウトプットした方がいいしね？？&lt;/p&gt;

&lt;h2 id=&#34;どこで書くかを決める&#34;&gt;どこで書くかを決める&lt;/h2&gt;

&lt;p&gt;金無し職無しスキル無しの僕らはそんなに高望みはしません。&lt;strong&gt;無料で使えるものを最大限に活用します。&lt;/strong&gt;Tech Blogってこともあり、以下の点に重きを置いて選定しました。&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Markdownで書けること&lt;/li&gt;
&lt;li&gt;一生涯無料で利用できること&lt;/li&gt;
&lt;li&gt;ギークな感じのするもの ← これ重要&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;もうここまでくれば決まったようなもの。Hugoを使って、Werckerでbuild、deployするのがベストプラクティスだと信じ、この構成で作りました。&lt;/p&gt;

&lt;h2 id=&#34;構成&#34;&gt;構成&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href=&#34;https://github.com/Catatsu/catatsu.github.io&#34;&gt;catatsu.github.io&lt;/a&gt;：Github Pagesホスティング用&lt;/li&gt;
&lt;li&gt;&lt;a href=&#34;https://github.com/Catatsu/catatsu.blog&#34;&gt;catatsu.blog&lt;/a&gt;：Hugo管理用&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;同じリポジトリだとなんだか面倒くさそうな匂いがプンプンしたので、サクッと作れて単純明快ということでホスティング用リポジトリと管理用リポジトリで分けています。&lt;/p&gt;

&lt;h2 id=&#34;記事作成手順&#34;&gt;記事作成手順&lt;/h2&gt;

&lt;p&gt;デフォルトだとちょっと扱いづらいので、shellを叩いて記事を作成するようにしてあります。&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;$ sh create.sh hello-world
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;参考：&lt;a href=&#34;http://blog.sgr-ksmt.org/2016/02/05/hugo_new_post/&#34;&gt;&amp;lsquo;hugo new&amp;rsquo;を便利にするスクリプト&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;あとは記事を書いてpushするだけで公開されます。楽ちん。&lt;/p&gt;

&lt;h2 id=&#34;werckerの設定&#34;&gt;Werckerの設定&lt;/h2&gt;

&lt;p&gt;Werckerでハマったので、そこだけ記載しておきます。全て公式が古いのが悪いです。僕は悪くありません。ハマった時間を返して(ry&lt;/p&gt;

&lt;p&gt;&lt;code&gt;wercker.yml&lt;/code&gt;はこんな感じで設定しましょう。&lt;/p&gt;

&lt;pre&gt;&lt;code class=&#34;language-yml&#34;&gt;box: debian
build:
  steps:
    - arjen/hugo-build@1.12.0:
      flags: --buildDrafts=false
      theme: startbootstrap-clean-blog
deploy:
  steps:
    - install-packages:
        packages: git ssh-client
    - leipert/git-push:
        gh_oauth: $GIT_TOKEN
        basedir: public
        repo: Catatsu/catatsu.github.io
        branch: master
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;参考：&lt;a href=&#34;https://blog.nabetama.com/post/2016-05-12-30/&#34;&gt;Hugo, github pages, werckerで自動デプロイ 2016/05/12版&lt;/a&gt;&lt;/p&gt;

&lt;h2 id=&#34;おわりに&#34;&gt;おわりに&lt;/h2&gt;

&lt;p&gt;GithubPages × Hugo × Werckerでサクッとブログを立ち上げられるってのは非常に便利ですね。日本中全ての会社でサクッとツルッとブログを立ち上げるといいですよ。&lt;/p&gt;

&lt;p&gt;さて、次は&lt;a href=&#34;https://github.com/matumotto&#34;&gt;@matumotto&lt;/a&gt;がいい感じにデザインを整えてくれるはずなので、次回も乞うご期待！&lt;/p&gt;
</description>
    </item>
    
  </channel>
</rss>