[Reactのチュートリアル](https://facebook.github.io/react/docs/tutorial.html)を触ったのですが、バックエンドがないとPOSTできないのでつまらない。ExpressとMongoDBを追加して動くようにしてみました。

タスクランナーは普段はGruntなのですがGulpを使ってみました。
Livereloadの代わりにBrowserSyncを導入してみました。

[https://github.com/110chang/react-express-mongodb](https://github.com/110chang/react-express-mongodb)

<div class="content-holder">
  <figure>
    <a data-flickr-embed="true"  href="https://www.flickr.com/photos/20720251@N04/23489376709/in/dateposted-public/" title="fig-react-express-mongodb"><img src="https://farm1.staticflickr.com/638/23489376709_6c64d3d934_z.jpg" width="640" height="300" alt="fig-react-express-mongodb"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
  </figure>
</div>



```bash
$ node -v # v0.12.0
```

# Reactのチュートリアルに必要なパッケージ

- react
- rect-dom
- jQuery（ajax用）

```js
// main.js
var React = require('react');
var ReactDOM = require('react-dom');
var $ = require('jquery');

//...以降、チュートリアルのコード
```

チュートリアルではajaxのためにjQueryを使っていますが、superagentでもいいとおもいます。

# JSXをGulpでコンパイルするのに必要なパッケージ

- gulp
- browserify
- baberify
- babel-preset-react
- vinyl-source-stream

```js
// gulpfile.js
var gulp = require("gulp");
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var babelify = require('babelify');

//...

gulp.task('concat', function() {
  browserify({
    entries: ['path/to/main.js'],
    debug : !gulp.env.production
  }).transform(babelify, { presets: ["react"] })
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest("./public"));
});

//...

```

babel-preset-reactは`require`しませんがコンパイルの時に必要です。

vinyl-source-streamは、NodeのStreamをGulpで扱えるStreamに変換してくれるものらしい。Streamはデータをpipeでつないで処理できるようにするインターフェースということのようです。

Lintは、[SublimeLinter-eslint](https://github.com/roadhump/SublimeLinter-eslint)を入れました。

# バックエンドに必要なパッケージ

- mongo
- express
- body-parser（POSTを受け取る際に必要）

bodyParserはdeprecatedうんぬんの情報が錯綜していて苦労した。
今のところ以下のように使う模様。(2015/12/20現在)

```js
// app.js
var express = require('express');
var parser = require('body-parser');

var app = express();
var server = http.createServer(app);

//×app.use(parser());
app.use(parser.urlencoded({extended: true}));
app.use(parser.json());

//...
```

via [ExpressでPOSTを処理するメモ](http://qiita.com/K_ichi/items/c70bf4b08467717460d5)

CRUDは「[Node.js+Express+MongoDBでWeb APIをつくる](http://qiita.com/itagakishintaro/items/a1519998a91061cbfb1e)」に掲載されているものを使わせていただきました。

# その他のタスク用

- gulp-live-server（expressを起動するため）
- gulp-sass
- browser-sync（ブラウザ確認用）

BrowserSyncをプロキシで使いました。`proxy`と`files`と`port`を指定する。

```js
// gulpfile.js
var browsersync = require('browser-sync');

//...

browsersync.init({
  proxy: 'http://localhost:XXXX/',//expressのローカルアドレス
  files: ['./public/**/*.*'],//watch対象
  port: 3333,//出力先
  open: false,//鬱陶しいのでブラウザを開くのを止める
});

//...
```

BrowserSyncはローカルネットで表示されているページを全て同期できるのですごく便利そう。[GhostLabが要らない子に…](http://110chang.com/diary/diy-device-lab/)

via [gulp + node + express で BrowserSync 使おう。](http://mid0111.hatenablog.com/entry/2015/08/19/200657)

Reactのチュートリアル+Express+MongoDB

<div class="content-holder">
  <figure>
    <a href="https://cssnowflakes.herokuapp.com/" title="CSSnowflakes by YUJI ITOH, on Flickr"><img src="https://farm1.staticflickr.com/422/19333023969_7147a0bbe2.jpg" width="500" height="326" alt="CSSnowflakes"></a>
    <figcaption>CSSnowflakes</figcaption>
  </figure>
</div>

* [CSSnowflakes](https://cssnowflakes.herokuapp.com/)

※Android未対応、IE未確認

フォームにどこかのURLを入れてプレイボタンを押すと、サイトを取得して[Yahoo!の日本語形態素解析API](http://developer.yahoo.co.jp/webapi/jlp/ma/v1/parse.html)に渡し、その結果を雪のように降らせます。ただし、形態素解析は100KBの制限があります。




# ペルソナ4 ダンシングオールナイト

<div class="content-put-right">
  <iframe src="http://rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=110changcom-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=ss_til&asins=B00T5VRSXC" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
</div>

話は変わって。

いままで音ゲーというのは買ったことがなかったのですが、ペルソナ4 ダンシングオールナイト（以下P4D）、曲がかっこよすぎて思わず買ってしまいました。


一応、ALL NIGHT（最高難易度）の半分ぐらいまではクリア（BRILLIANT）して、あとALL NIGHTを頑張るかHARD/NORMALでパーフェクト（KING CRAZY）を取っていくかといったところです。まあ、集中力なくてパーフェクトはなかなか取れないです。1個だけ落とした時の悔しさといったら！

そんな、P4Dの曲の中に「SNOWFLAKES」という曲があります。

これは原作の追加要素の3学期で聞けるBGMです。

* [SNOWFLAKES(NARASAKI Remix)｜P4D - ペルソナ4 ダンシング・オールナイト - 公式サイト](http://p-atlus.jp/p4d/music/music12.html)

この「SNOWFLAKES」のPVで、歌詞が雪みたいに降ってくる表現を、CSS Animationを使って真似してみました。記憶では全体が雪エフェクトだと思っていたのですが、確認してみると最後のところだけですね。


# はじめてのRubyアプリケーション

いつか自力でバックエンドからアプリを書いてみたいと思っていたのですが、今回、実現することができました。まあ、自力といっても検索首っ引きですけども。

言語はRubyで、フレームワークにSinatraを使い、Herokuにデプロイしました。

テンプレートはSlim、スタイルはSASS(Compass)、今回はJavaScriptのモジュール管理をRequireJSではなくBrowserifyにしてみました。

Herokuにデプロイしたはいいものの、ちょっと遅すぎるので、HTML・CSS・JSのuglifyを行いました。一応、許容範囲かな・・

本格的なRubyのアプリはともかく、JSONを返すアプリを作ってそれをAjaxで利用する方法は、私でも応用が効きそうです。


# CSS Animation関連


## ぼかしエフェクト

単純に`text-shadow`を入れるだけでいいと思っていたけど、いまひとつ。
テキストそのものを消すといい感じ。

```sass
color: transparent
text-shadow: 0 0 x white // xを変化させる 
```


## CSS Animationをランダムに適用する

通常、CSS Animationはスタイルに定義して、クラスを付け外しすることで実行するほうがスマートですが、ランダムにCSS Animationを生成するには、スクリプトなどでkeyframeとアニメーション定義クラスを書いたスタイルを動的にDOMに貼り付ける必要があります。昔書いて放置してたアニメーション互換プラグインが役に立った。

[jQuery.CSS3animate](https://github.com/110chang/css3animate)

また、GPUを使わせると効率が良いらしい

```js
left: x, top: y // use CPU
transform: 'translate(x, y)' // use GPU
```

`transform`だとAndroidが盛大にバグるけど仕方ないね。


# いろいろよくわかってない

よくわかっていないけど、なんとなく使っているもの。


## rack

rackはサーバーとアプリケーション間のインターフェースとかなんとか。config.ruはrackの設定ファイル。確かに、参考サイトを当たっているとWEBrickとかSinatraだとthinを使えとかあるから、いろいろなサーバーの使い勝手を統一するもの、という理解でいいのでしょうかね。


## foreman

なぜこれを使っているのかいまいち思い出せない。Ruby製のタスク管理ツールみたいなもの？　Herokuインストール時に自動的に入るみたいなのでHerokuが使っているのか。起動コマンドが

```bash
foreman start
```

と簡単になるので結果オーライ。なお、IPでアクセスしたいのでProcfileにオプション追記。`-o 0.0.0.0`で、同じネット内からアクセスできる。gruntのタスクも起動できる。何者・・

```bash
web: bundle exec rackup config.ru -p $PORT -o 0.0.0.0
grunt: grunt
```

ウェブサイトのテキストを雪のように降らすウェブアプリCSSnowflakes

案件で[Knockout.js](http://knockoutjs.com/)を触って感触が良かったので何か公開できるものを考えました。

以前、東京メトロAPIのアプリコンテストに応募して残念ながら落選したのですが、API自体はありがたいことに継続して運用されているので、現在地や出先の住所から一番近い東京メトロの出入口を検索するアプリを作ることにしました。

[Dokokara.info どこから（東京メトロの駅に）入るのが近いかわかるアプリ](http://dokokara.info/)

<div class="content-holder">
  <figure>
    <a href="https://www.flickr.com/photos/20720251@N04/17711890779" title="dokokara.info by YUJI ITOH, on Flickr"><img src="https://c2.staticflickr.com/6/5443/17711890779_6f618819e6_n.jpg" width="180" height="320" alt="dokokara.info"></a>
    <figcaption>イントロダクション</figcaption>
  </figure>
  <figure>
    <a href="https://www.flickr.com/photos/20720251@N04/17898694711" title="dokokara.info - find exit of Tokyo Metro by YUJI ITOH, on Flickr"><img src="https://c2.staticflickr.com/6/5467/17898694711_a8a6714596_n.jpg" width="180" height="320" alt="dokokara.info - find exit of Tokyo Metro"></a>
    <figcaption>出入口検索</figcaption>
  </figure>
  <figure>
   <a href="https://www.flickr.com/photos/20720251@N04/17275754304" title="dokokara.info - find route by YUJI ITOH, on Flickr"><img src="https://c1.staticflickr.com/9/8806/17275754304_3ec5744a23_n.jpg" width="180" height="320" alt="dokokara.info - find route"></a>
    <figcaption>ルート検索</figcaption>
  </figure>
</div>



<div class="content-holder">
  <figure>
   <a href="https://www.flickr.com/photos/20720251@N04/17710748328" title="dokokara.info PC by YUJI ITOH, on Flickr"><img src="https://c2.staticflickr.com/6/5336/17710748328_784d9f44c0.jpg" width="500" height="375" alt="dokokara.info PC"></a>
    <figcaption>PC版</figcaption>
  </figure>
</div>

# 使用API

- 東京メトロAPI
- Google Maps API
- Google Geocoding API（住所⇄緯度経度検索）
- Google Directions API（ルート検索）

# 機能

- Geolocation APIで現在地を取得して東京メトロの出入口を検索
- 住所から東京メトロの出入口を検索
- 住所入力時に随時緯度経度検索を行い、候補を表示
- 検索結果のマップ表示
- マップ表示で徒歩ルート検索

Knockout.jsのおかげで入出力まわりはかなり楽に書けました。

Geocoding APIは絞り込みが弱いと複数の検索結果を吐くので、どうやって選択させるかという問題が発生したのですが、よくある候補表示などもわりと簡単に実現できました。全部自分で書こうとしたら大変なことになるでしょう。

Knockout.jsと東京メトロAPIで出入口検索アプリを作りました

# 昨年までの状況

昨年（つまり今回の確定申告）まではやよいの青色申告のWindows版ソフトを使っていました。ただ、ソフトの操作性はいまいちで、記帳自体はGoogle スプレッドシートに入力し、確定申告するときに、それをインポートして申告書類の生成ツールとして使っていました。

その[やよいの青色申告がオンライン化](http://www.yayoi-kk.co.jp/products/aoiro_ol/)しまして、初年度無料ですし使うつもりでいました。確定申告の提出準備も終わり、一応、他の選択肢も見ておこうと思って、よく話題にのぼる[freee](http://www.freee.co.jp/)を試してみたのです。ちょっと試したかっただけなのですが…



# [freee](http://www.freee.co.jp/) sugeee!!!

- 銀行口座と直接連携可
- [Misoca](http://www.misoca.jp/)と連携可
- CSVでの明細取り込み
- アプリから経費申請
- OCRで読み込み

今更かもしれないですが、もうね、感動しました。

銀行連携、カード明細取り込み、[Misoca](http://www.misoca.jp/)の請求書送信でほとんどの入力作業をカバーできる。あとは細かい現金の経費とかあるけど、それもアプリやOCRを使えば簡単に取り込める。

請求書作成も[freee](http://www.freee.co.jp/)でできるのですが、指先ひとつで郵送できる[Misoca](http://www.misoca.jp/)がとても気に入っているので、[Misoca](http://www.misoca.jp/)でやりたいのです。

## 銀行口座との連携

銀行へのアクセスを渡すのはちょっとこわいですが、銀行口座の明細取り込みがないとfreeeを使う意味がないですね。

## CSVから明細取り込み

CSVの明細取り込みは対応形式のほかに、それなりに整った形式であればその場でカスタマイズして取り込める。この辺がすごく丁寧にできています。

私の場合、カードの明細はCSVをダウンロードしてちょっと加工しないといけない。対応カードなら銀行口座同様連携できます。

## アプリ

アプリから経費申請ができるのが面白い。電車代とかとりあえずアプリで入れといて後で自分で経費承認するだけで登録できる。

関係ないですが、Pasmoの履歴から取り込みできないかと思ってサイト見たらマイページなくなってました。セキュリティ方面から叩かれてたもんな…

## OCR

領収書も写真撮って追加しておいてあとで取引に変換する。読み込み精度は完璧ではないが、とりあえず取り込んでおけば、あとで気づいたときにちょっと修正するだけで登録できる。

今のところ、電子的保存はスキャナ以外認められていないみたいなので、紙は保存しています。

## 「自動で経理」

この仕組みが一番キラーなんじゃないかと思うのですが、「自動で経理」というメニューがあり、ここで連携機能で取り込んだの未登録の明細を順番に登録していくことができる。

「自動で経理」の名のごとく、明細から勘定科目などが自動で判断され入力されているのでそれを確認・修正し登録すればよい。

ものによるけどフィルターで「自動化」すれば登録作業すら必要なくなる。たぶん。

銀行やカードと同期して明細をポチポチするだけの簡単なお仕事です。

## 消し込み（っていうのかな？）

取引には決済ステータスがあり、銀行口座の明細を「自動で経理」で登録する時に、未決済の取引（売り掛けとか）を消し込みできる。どの明細で消し込むかも自動で判断してるみたい。修正も簡単にできる。

レポートもなにげにすごい。

画面のほとんどがなにげにretina仕様。

あまりによく出来ていて、いろいろ触ってたら夜中になってた。
いままでのは一体なんだったんだ…

今年度の確定申告を終えるまでに落とし穴がないとは言えませんが、悪い評判も聞きませんし、まさに「選ばない理由がない」です。


# [やよいの青色申告オンライン](http://www.yayoi-kk.co.jp/products/aoiro_ol/)

- 銀行口座とは他の提携ソフトやアプリを通して連携
- [Misoca](http://www.misoca.jp/)と連携可
- CSVの明細取り込みはなさげ

満を持してオンライン化！なのですが、[freee](http://www.freee.co.jp/)を見た後では、だいぶ水をあけられた感あります。今年1月にWindows版ソフトからのインポートにも対応と、頑張ってはいるのですが。

会計ソフトでは先行してるはずの弥生がなんで銀行口座を直接ごにょごにょできないのか。大人の事情でしょうか…？

インターフェースもソフトよりはましだけど、よくも悪くもソフト版を継承している感じ。外部連携関連のインターフェースが特にわかりにくかった。

今年から記帳→確定申告をウェブで完結させたい

あけましておめでとうございます。
2015年も、よろしくおねがいします。

遊びで、JavaScriptの物理エンジン[Matter.js](http://brm.io/matter-js/)を使って羊を降らせてみました。

<div class="content-holder">
  <figure>
    <a href="http://110chang.com/newyear2015" title="A Happy New Year 2015!"><img src="https://farm8.staticflickr.com/7497/16015296788_8bf291735a_z.jpg" width="640" height="417" alt="A Happy New Year 2015!  110chang.com"></a>
  </figure>
</div>




物理エンジンで有名なものにBox2dのJavaScript版、[Box2dWeb](https://code.google.com/p/box2dweb/)があります。

Box2dWebはシミュレーションとデバッグビューアーは提供されますが、表現は他のライブラリを使うか自力で実装しなければなりません。

一応、さわってはみたものの今回はパスしました。

# Matter.js

[Matter.js](http://brm.io/matter-js/)はα版なのでプロダクションには使わないほうがいい、とのことですが、

* 同一エンジン上でシミュレーションも表現もできる
* マウスの扱いが楽（3行）
* ドキュメントが整理されている

ので、ちょっとしたことならMatter.jsの方が断然簡単と思います。buggyなところはあります。

* 凹多角形がマウスに反応しない
* ときどき物体がすり抜ける

SoftBodyの振る舞いが気に入ったので、羊のテクスチャを貼って使いました。羊に見えるかどうかは、どうでしょうね。。

[http://brm.io/matter-js-demo/#softBody](http://brm.io/matter-js-demo/#softBody)

文字はIllustratorでSVGを書き出して`polygon`要素のプロパティを引っこ抜いて整形しました。おそらく曲線は使えないので直線で近似する必要があります。

ドキュメントが整理されてるとはいえ英語なので、ソースとドキュメントとにらめっこで結構大変でした。

# 書き方が独特

JavaScriptならではというか、一見クラスっぽく見えるものは全て静的メソッド（的なもの）を持っていて、インスタンス（的なもの）はメソッドを持たずプロパティだけを保持しています。

```js
Matter.Body.rotate(body, ...)
```

静的メソッドにオブジェクトを渡して仕事をしてもらう、という書き方になっています。タイプが多くなりがちですし、気になる人は気になるかもしれません。

Archive for 2015

Reactのチュートリアル+Express+MongoDB

ウェブサイトのテキストを雪のように降らすウェブアプリCSSnowflakes

Knockout.jsと東京メトロAPIで出入口検索アプリを作りました

今年から記帳→確定申告をウェブで完結させたい

昨年までの状況

物理エンジンは電気羊の夢を見るか？