OmniAICreator/Qiita-1.07M huggingface dataset:
【vte.cx入門】11.AngularJSによるデータリソースの操作

今回まで主にjQueryでの開発手順を説明してきましたが、vte.cxは様々なJavaScript用のライブラリで開発できます。

今回はその一つであるAngularJSによるデータリソースの操作について説明したいと思います。

# はじめに
この記事はAngularJSでの開発経験があることを前提に書いています。
まだAngularJSで開発を行ったことがない場合は、基礎的なことを学んだ上で読むことをお勧めしています。

# AngularJSのajax通信($httpサービス)

AngularJSのajax通信でリソースデータにアクセスできます。
[$http](http://js.studio-kingdom.com/angularjs/ng_service/$http)サービスを使用します。

## GETリクエスト
```lang:GET
$http({
      method: 'GET',
      url: url
}).then(function(res){
   // 取得成功
   // res.data.feed　でfeedデータ取得
}, function(res){
   // 取得失敗
});
```

## POSTリクエスト
```lang:POST
$http({
      method: 'POST',
      url: url,
      data: JSON.stringify(reqdata)
}).then(function(res){
   // 登録成功
   // res.data.feed　でfeedデータ取得
}, function(res){
   // 登録失敗
});
```

## PUTリクエスト
```lang:PUT
$http({
      method: 'PUT',
      url: url,
      data: JSON.stringify(reqdata)
}).then(function(res){
   // 更新成功
   // res.data.feed　でfeedデータ取得
}, function(res){
   // 更新失敗
});
```

## DELETEリクエスト
```lang:GET
$http({
      method: 'DELETE',
      url: url
}).then(function(res){
   // 取得成功
   // res.data.feed　でfeedデータ取得
}, function(res){
   // 取得失敗
});
```

# $scopeで双方向データバインディングを行う
\$httpで受け取ったデータを$scopeに定義することで双方向データバインディングを行うことができます。

```lang:javascript
$scope.data.feed = {};
$http({
      method: 'GET',
      url: url
}).then(function(res){
   // 取得成功
   // $scopeに格納
   $scope.data.feed = res.data.feed;
}, function(res){
   // 取得失敗
});
```

```lang:html
<div>{{data.feed.entry[0].title}}</div>
```

# ng-modelでリクエストデータを構築する
POSTやPUTをする際に、feed形式のリクエストデータが必要になります。
それをng-modelを使用し構築することで、ソースを簡略化できます。

```lang:html
<input type="text" ng-model="entry.title" value="hoge" />
<input type="text" ng-model="entry.subtitle" value="foo" />
<input type="text" ng-model="entry.summary" value="bar" />
```

```lang:javascript
$scope.entry = {};
$scope.data = {};

$scope.data.feed.entry = [];
$scope.data.feed.entry[0] = $scope.entry;

console.log($scope.data.feed.entry[0].title);     ←   hoge
console.log($scope.data.feed.entry[0].subtitle);  ←   foo
console.log($scope.data.feed.entry[0].summary);   ←   bar
```

こうすることで`ng-model="entry.title"`などの値が変化したとしても、リアルタイムで`$scope.data.feed.entry`に値が格納されるためHTMLを編集するだけでデータの構築を行うことができます。

# 終わりに
vte.cxのリソースデータはJSONで扱うため、AngularJSの特徴である双方向データバインディングと非常に相性が良いです。
他のjavascriptフレームワークでもajax通信ができるライブラリであればvte.cxは対応できるはずです。
いろいろなフレームワークでアプリ開発を行ってみてください。
Android 開発はじめました - けどちょっと躓いた

![adventcalender12.png](https://qiita-image-store.s3.amazonaws.com/0/67480/869aedb3-3785-a49e-3903-a27d4576936e.png)

## 　
この記事は Goodpatch Advent Calendar 2015 12日目の投稿です。
昨日は@aoshi さんによる「[GitHubとSlackとの連携に便利なHubotプラグインを2つ紹介します](http://deepblue-will.hatenablog.com/entry/github-slack-hubot-plugin "GitHubとSlackとの連携に便利なHubotプラグインを2つ紹介します")」でした。

## 自己紹介 と Android エンジニアになった理由
はじめまして、Goodpatchでエンジニアをやっている @hayato-kです。
Javaエンジニアをそれなりにやっていた私ですが、現在弊社ではAndroidエンジニアが不足しており、Javaをやっていたことからちょっとやってみようかということではじめてみました。
実際なってみて数ヶ月、ちょっと躓いた箇所がありましたのでその部分についてお話ししようかと思います。

## 躓いた箇所 
地図で現在地をGPSから取得し現在地へ移動するという処理を作っていた時のお話しになります。
現在の使用している端末で、位置情報が取得できていない状態から現在地の位置情報を取得できるように切り替えた時に現在地の取得がすぐにとれず現在地情報をGPSから取得するまで少し時間がかかってしまう所です。

## 使っていたメソッド
当初の実装では
`getBestProvider`
を使ってさくっと実装していました。
これはこれで楽に実装でき、GPSの取得における細かい設定もできるのでよいのですが、おおざっぱでもよいので、すぐの位置情報を取得したいという今回の場合だと合わなかった感じです。

## 他のやりかたを調査
他の方法で、すぐに現在地を取得できる方法がないか調べてみるとGPSから現在地を取得するまでに、端末によっては2、3分かかり、ネットワークから取得するのはそんなに時間がかからないということがわかりました。

ちなみに私が検証した端末は SOL22 の Android OS 4.2.2です 

## やってみる
調査した結果より、現在地を取得する方法を最初はネットワークで取得し、GPSで取得できるようであればGPSに切り替えて取得するというコードを実装しました。

```java

    private String selectProvider() {
        String provider = "";
        LocationManager locationManager = (LocationManager) getSystemService(this.LOCATION_SERVICE);

        // ネットワーク取得
        if(locationManager.isProviderEnabled(LocationManager.NETWORK_PROVIDER)) {
            Location locationNetwork = locationManager.getLastKnownLocation(LocationManager.NETWORK_PROVIDER);
            if (locationNetwork != null) {
                provider = LocationManager.NETWORK_PROVIDER;
            }
        }

        // GPS取得
        if(locationManager.isProviderEnabled(LocationManager.GPS_PROVIDER)) {
            Location locationGPS = locationManager.getLastKnownLocation(LocationManager.GPS_PROVIDER);
            if(locationGPS != null){
                provider = LocationManager.GPS_PROVIDER;
            }
        }
        return provider;
    }
```

こんな感じですね。
ネットワークで取得、GPSで取得をそれぞれ行い精度の高いものを返します。
(もう少し条件文を減らしたいな・・・)

## 最後に
躓いたとっても解決できたので、個人的にはよかったです。
Android開発はJavaをやっていると内部コードはすんなり理解でき、やりやすいものなのでJavaのサーバーサイドを開発していて、Android開発をしていないという人は（している人も）是非やってみてください。

##　
次回はGoodpatchのエンジニア @tanishi による 「Stripe」についてのお話しです。
それでは@tanishi さんよろしくです。
モバイルアプリ分析サービスのpostback連携とTreasure Data

#モバイルアプリ分析サービスのpostback連携とは
モバイルアプリ分析サービスは、モバイルアプリの広告効果やユーザ行動データ分析をサポートするプラットサービスで、現在これらのサービスを提供しているプレーヤーは国内海外含めて数多く存在しています。
メジャーなモバイルアプリ分析サービスとしては以下のようなものがあります。最近ではadjustやAppsFlyerなどの海外サービスを利用するケースが国内でも増えているようです。

* [Adjust](https://www.adjust.com/)
* [AppsFlyer](https://www.appsflyer.com/)
* [TUNE](http://www.tune.com/)
* [KOCHAVA](https://www.kochava.com/)
* 

基本的には、各種イベントを定義してモバイルアプリ内に埋め込み、ユーザ行動をトラッキングし、データを収集、分析する仕組みになっていますが、この収集データを他の連携サービスへも転送する仕組みをpostbackと言っています。
モバイルアプリ分析サービス上で、さまざまな分析やレポーティングができるのに、そもそもなぜ、postbackして他サービスにデータを転送し連携する必要があるのかというと、複数のサービスからのデータソースを横断してユーザ行動分析したり、より柔軟な角度での分析、ユーザのセグメンテーションを作成したり、といったニーズがあるからです。

### インテグレーション型postback連携
インテグレーション型postback連携は、モバイルアプリ分析サービス上の管理画面から連携先サービスを選択し、簡単に設定することができます。各社ともパートナープログラムを提供しており、様々なサービスと容易なpostback連携を実現しています。

* [Adjust: Integrated partners](https://www.adjust.com/integrated_partners/)
* [AppsFlyer: Partners](https://www.appsflyer.com/partners/)
* [TUNE: Integrated Technology Partners](http://help.tune.com/marketing-console/integrated-technology-partners/)
* [KOCHAVA: Network & Publisher Integrations](https://www.kochava.com/kochava-difference/network-publisher-integrations/)

### カスタムURL型postback連携
カスタムURL型postback連携は、連携サービス側がpostback用のエンドポイントURLを準備し、それをモバイルアプリ分析サービスのイベントに登録することで、postbackすることができます。エンドポイントURLにpostbackしたいデータ項目を柔軟に設定できる点がメリットですが、個別でpostback URL(エンドポイント+取得データ)を設定する必要があります。

* [Adjust: Working with Callbacks](https://docs.adjust.com/en/callbacks/)
* [AppsFlyer: Push APIs](https://support.appsflyer.com/entries/23657913-Push-APIs-Real-Time-Installation-Conversion-Notification-APIs)
* [TUNE: Adding a Postback URL for a Non-Integrated Partner](http://help.tune.com/marketing-console/setting-up-postback-urls-2/#adding-a-postback-url-for-a-non-integrated-partner)
* [KOCHAVA: Create a Custom Postback](http://support.kochava.com/support/solutions/articles/1000185429-create-a-custom-postback)

#Treasure Dataへのpostback連携のニーズ
連携先としてTreasure Dataを選択すれば、さまざまなソースからのデータを大量に格納することができ、そして、その大量データを横断的に、馴染みのあるSQLを使って、柔軟にデータ分析することができます。


# AdjustとTreasure Dataのpostback連携
今回は、adjustからTreasure Dataへの、インテグレーション型postback連携をするため、設定を紹介します。
カスタムURL型postback連携の設定については、[こちら](http://qiita.com/toru-takahashi/items/5b870d3615348ce020b3)の記事で詳細に紹介されていますので、ご参考ください。


## 追記
(20161122)Adjustの管理画面が新しくなり、本記事で記載していた手順は古くなったため、削除しました。
新UIベースの手順については、下記Treasure Dataのドキュメントをご参考ください。
[Raw-Data Access to Adjust Events](https://docs.treasuredata.com/articles/adjust)


#まとめ
モバイルアプリ分析サービスが提供しているpostback連携を利用し、モバイルアプリのユーザ行動データをTreasure Dataに格納する方法について紹介しました。
Treasure Dataに格納したデータをどのようにSQLで分析するのか、またそこから先、分析したデータの結果を他のサービスにどのように渡し連携するのか(DSPや広告配信など)、については、また別途エントリを書きたいと思います（今月のAdventで他のメンバーが書いてくれるかもしれません）。
esaのChrome Extensionを書いてみた

[esa Advent Calendar 2015 - Qiita](http://qiita.com/advent-calendar/2015/esa)の12日目の記事です。
前回は[@tbpgr](http://qiita.com/tbpgr)さんの[回転esa](http://qiita.com/tbpgr/items/7a80ae9ee18c550876e5)でした。

こんにちは :smile:
esa.io便利ですよね! アイコンかわいいですよね! → "(\( ⁰⊖⁰)/)"
普段会社では、Confluenceを使用しているのでが、個人ではメモ書き用に使用させてもらってます。

また、中の人の[@fukayatsu](http://qiita.com/fukayatsu)さん、[@ken_c_lo](http://qiita.com/ken_c_lo)さんの発表資料を見て

- [合宿/ハッカーズチャンプルー/esa.ioの作り方 - esa-pages.io](https://esa-pages.io/p/sharing/3/posts/97/b827dc4345acdc1dae32-slides.html#/45)
- [diary/2015/08/21/YAPC::Asia 2015でesaについて発表してきました #yapcasia #yapcasiaA - docs.esa.io](https://docs.esa.io/posts/134)

> やれることをやる
> 毎日がドッグフーディング/心からのドッグフーディング

などモチベーション維持の姿勢や、ポリシーがｶｯｺｲｲなと思い、
サービスだけではなく、とても刺激になっています。

そんなｽﾃｷなesaなのですが、、
一貫したデザイン、markdownの入力、リアルタイムプレビュー等不満は無いのですが、
フォームの入力欄がもう少し横に長いといいのにな-
出来たら何か書いている際はプレビューを隠せたらいいのにな-
と思っていました。。

そこで、今回プレビューをトグルするためのボタンをChrome Extensionとして作成しました。[^1]
(おまけでフォーム入力欄とプレビューの左右切り替え用ボタンも設置しています) ← 使うかな?
[^1]: chrome拡張作成したこと無かったので勉強したい + ES2015を書きたいというモチベーションもあったので

### トグルボタン
<img width="990" alt="esa-toggle-off.png" src="https://qiita-image-store.s3.amazonaws.com/0/9303/191c2e50-2c56-7ba1-dbc9-42536217a89f.png">

プレビューを閉じる
<img width="1004" alt="esa-toggle-on.png" src="https://qiita-image-store.s3.amazonaws.com/0/9303/ac86aca9-e253-90bf-96cf-77d75737cdc8.png">

### 左右反転
<img width="1002" alt="esa-swap.png" src="https://qiita-image-store.s3.amazonaws.com/0/9303/5791ec18-9155-9f5f-a0a8-f572ff77c010.png">


という感じで無理矢理トグル用・左右反転用のボタンをヘッダ部に突っ込み、表示/非表示を切り替えられるようにしました。

まだ、storeに公開は出来ていないのですが、GitHubからソースを落としてきてアドオンに追加することで使用可能です。[^2]
[^2]: icon画像など準備できたら公開する予定です

これだけの最低限の機能しか実装していないのですが、トグル用のキーボードショートカットもあると便利だなと考えているので気が向いたら作ります。
コードはGithubに公開しているので興味のある方は見てみてください!
[to4iki/esa.ExpandinizR](https://github.com/to4iki/esa.ExpandinizR)

### まとめ
Chrome Extension意外と簡単に作れた
esaｽﾃｷ"(\( ⁰⊖⁰)/)"
Mathematicaで星形を書くよ☆

[昨日の記事](http://qiita.com/butchi_y/items/a4a7e992870d75e5ee7a)でも星形を描きましたが、あれは正確には五芒星です。

今回描きたいのは、中が空っぽな星形（☆）です。
「五光星」とか「五稜星」とか言うんですかね？（要出典）

昔、博士コース時代の研究で星形の10頂点が必要だったので導出しました。

```mathematica
(-1)^Range[0, 4, 4/5]
ListPlot[{Re[#], Im[#]} & /@ %, Joined -> True, AspectRatio -> Automatic]
```

![star_5-points.png](https://qiita-image-store.s3.amazonaws.com/0/6117/f6db2a46-d8b6-8eab-955a-3c99f2e8cbc9.png)

これが昨日書いた五芒星です。

中の抜けた星形にするには輪郭をなぞるように描けばいいのですが、そのためには5つの交点の座標を求める必要があります。

以下の図を用いて求め方を軽く説明します。

![star_geometty.png](https://qiita-image-store.s3.amazonaws.com/0/6117/b25c949b-24fe-0354-6555-b683a91e502a.png)

三角形OABは直角二等辺三角形です。

この3角形は正5角形の$\frac1{10}$ピースなので、

$\angle BOA = 36^\circ$

となります。

また、点$A$は点$B$の$x$軸での射影のため、

$|OA| = |OB| \cos(36^\circ)$

となります。

よって

$|OB| = \frac{|OA|}{\cos(36^\circ)}$ (式1)

となります。

点$A$は最初の正5角形の3番目および4番目の点と同じ$x$座標なので、

```mathematica
Re[(-1)^Range[0, 4, 4/5]][[3]]
```

→ $\frac{\sqrt5 - 1}4$

となります。

(式1)に代入して、

```mathematica
1/Cos[Pi/5]*(Sqrt[5] - 1)/4 // FullSimplify
```

→ $\frac{3 - \sqrt5}2$

が小さい5角形の外接円の半径となります。

プロットするとぴったり合いますね。

```mathematica
(-1)^Range[0, 4, 4/5];
Show[
  ListPlot[{Re[#], Im[#]} & /@ %, Joined -> True, AspectRatio -> Automatic],
  Graphics[Circle[{0, 0}, (3 - Sqrt[5])/2]]
]
```

![star_with_circle.png](https://qiita-image-store.s3.amazonaws.com/0/6117/6b973c50-e420-683c-cfb1-bf6ae260b402.png)

外側の5角形は

```mathematica
(-1)^((2 Range[0, 8, 2])/10)
ListPlot[{Re[#], Im[#]} & /@ %, Joined -> True, 
 AspectRatio -> Automatic]
```

![pentaline_larger.png](https://qiita-image-store.s3.amazonaws.com/0/6117/dc3ffa4d-9d3f-c067-06fd-a30b2fa6fe09.png)

内側の5角形は

```mathematica
(3 - Sqrt[5])/2 (-1)^((2 Range[1, 10, 2])/10);
ListPlot[{Re[#], Im[#]} & /@ %, Joined -> True, 
 AspectRatio -> Automatic]
```

![pentaline_smaller.png](https://qiita-image-store.s3.amazonaws.com/0/6117/6f35f7c0-a8a3-e361-b897-a32f6f2d8470.png)

交互になぞれば

```mathematica
Riffle[
  (-1)^((2 Range[0, 8, 2])/10),
  (3 - Sqrt[5])/2 (-1)^((2 Range[1, 10, 2])/10)
];
ListPlot[{Re[#], Im[#]} & /@ %, Joined -> True, AspectRatio -> Automatic]
```

![star_polyline.png](https://qiita-image-store.s3.amazonaws.com/0/6117/35614507-90f1-c0cc-d1fb-813ef660bed0.png)


これを$xy$軸逆転して、``Graphics``で星っぽく描画します。

```mathematica
Graphics[{EdgeForm[Thick], Yellow, 
  Polygon[{Im[#], Re[#]} & /@ Riffle[
    (-1)^((2 Range[0, 8, 2])/10),
    (3 - Sqrt[5])/2 (-1)^((2 Range[1, 10, 2])/10)
  ]]
}]
```

![star.png](https://qiita-image-store.s3.amazonaws.com/0/6117/996826ec-b337-029d-f7d7-912e006d4cb0.png)

完成です！

今日知った関数ですが、新機能 [RegionUnion](http://reference.wolfram.com/language/ref/RegionUnion.html) で同じようなことができるかもしれません。
知っておきたいデザインパターン 3.ファサードパターン

こんにちは、@Im0_3です。LIGアドベントカレンダーの12日目です！

前回、前々回に引き続きデザインパターンについてです。

過去の記事はこちらからご覧ください。
[知っておきたいデザインパターン 1.モジュールパターン](http://qiita.com/Im0_3/items/3d46f900aa4d4c5c3cde)
[知っておきたいデザインパターン 2.シングルトンパターン](http://qiita.com/Im0_3/items/0543c9145666d49f36d8)

# ファサードパターンとは
ファサードとは建築物の正面部分のことをいいます。入り口、玄関を想像してください。建物の中は表から見ただけではわからない、複雑な構造になっています。このパターンは様々な振る舞いを一つの入り口としてまとめたパターンのことを指します。

# ライブラリはファサードパターンの宝庫

ファサードパターンはjQueryやUnderscore.jsのようなJavaScriptライブラリでよく使われています。ライブラリの便利なメソッドたちは、内部では様々な処理をしてくれているのです。ですが私たちがライブラリを使う際にはそこを意識せずに使うことができます。複雑な機能を意識せずにひとつにまとまるがファサードパターンのメリットといえるでしょう。

例として[YOU MIGHT NOT NEED JQUERY](http://youmightnotneedjquery.com/)のAdd Classのコードを見てみましょう。

#### jQuery

```js
$(el).addClass(className);
```
↓
#### vanilla.js

```js
if (el.classList) {
  el.classList.add(className);
} else {
  el.className += ' ' + className;
}
```

jQueryのaddClassメソッドでは[vanilla.js](http://vanilla-js.com/)で書くとこのようのな処理をしています。（*機能的に同じということです、実際のコードではありません）
これはIE8,IE9ではclassListをサポートしていないため、どちらでも対応できるように機能をまとめてaddClassメソッドとして提供しているのでこのようなコードになっています。

こうすることで私たちはブラウザの対応状況を考えずにjQueryをすることができるのです。

# 実践ファサードパターン
では他のパターンを見てみましょう。
O'Reillyの[JavaScriptデザインパターン](https://www.oreilly.co.jp/books/9784873116181/)で紹介されている例です。

```
var module = (function() {
	var _private = {
	    i: 5,
	    get: function() {
	        console.log( "current value" + this.i);
	    },
	    set: function( val ) {
	        this.i = val;
	    },
	    run: function() {
	        console.log("running");
	    },
	    jump: function() {
	        console.log("jumping");
	    }
	};
	
	//ファサードパターンで機能を一つにまとめて公開している
	return {
	    facade: function( args ){
	        _private.set(args.val);
	        _private.get();
	        if(args.run){
	            _private.run();
	        }
	    };
	}
}());
```

ファサードパターンは単独である必要はなく、他のパターンと組み合わせて使うことができます。
この例ではモジュールパターンと組み合わせて使用しています。

プライベートな値にアクセスする方法としてファサードパターンで機能をまとめてパブリックに公開をしています。

このように必要な機能をまとめてあげることで、モジュールを利用する側は中の機能を考えずに、利用することができるのです。

# ファサードパターンを使う際の注意

ファサードパターンは複雑なものを完結に利用できるというメリットがある一方、それによって実装を抽象化されるため暗黙のコストがかかるというデメリットがあります。
内部でどんな動きをしているのか、コストに見合う価値があるのかを判断して設計する必要があるので注意して使いましょう。
Delphi 10 Seattle で Windows10スタイルのFMXアプリを作る

DelphiXE8ではすでにEDNに以下の記事[Windows 10アプリをRAD Studio XE8と新しいFireMonkeyスタイルを使って構築する ](http://edn.embarcadero.com/jp/article/44472)があるのですが，この記事を参考にDelphi 10 Seattleでやってみたいと思います。

1) フォームデザイナの上部にあるマスタビューを選択して、TStyleBookコンポーネントをフォームに追加します。
2) マスタビュー上で、ツールバーの スタイル ドロップダウンメニューからWindowsをマスタスタイルとして選択します。
3) StyleBookコンポーネントをダブルクリックで開いてWindows 10スタイルを読み込みます。カスタムスタイルを使うには、マスタビューも含めて各ビューでスタイルが必要になります。
4) フォーム上のStyleBookプロパティをStyleBook1に設定します。
5) 作成したWindowsのビューに切り替え、それぞれのビューでTStyleBookコンポーネントをダブルクリックし、StyleBookにカスタムWindows 10スタイルを読み込んで，「適用して閉じる」ボタンをクリックしてフォームデザイナに戻ります。
6) すると編集フォームにもスタイルが適用されていることがわかります。
7) 単一アプリの複数のフォームに同一のフォームを適用したいときには，メインフォームにTStyleBookを張り，スタイルを適用して，各ビューのTStyleBook.UseStyleManager を Trueに設定するとできます。TStyleBookはメインフォームだけあればよいようです。ただし，編集時に最初のフォーム以外はスタイルが適用されませんので，スペースのない場合などには苦労するでしょう。できれば改善してほしい点です。

* XE8でWindows10スタイルにしたアプリをDelphi 10 Seattleで編集する場合には，タブなどデザインが全く違うものや，余白のサイズを大きくとる必要があるものがあるので，以前のスタイルを捨て，ビューも一から作り直した方が速いように思いました。

* フォームの編集時は，どのビューでフォームを編集しているかを意識する必要があります。実行時に表示されるビューでないビューを編集しても実行時に反映されません。

* Embarcaderoから提供されている10種類のスタイルが提供されています。
[ID: 30354, FireMonkey Premium Styles Pack for RAD Studio 10 Seattle](http://cc.embarcadero.com/Item/30354)をダウンロードして，使うのも面白いかもしれません。

ところで，XE8のWindows10スタイルのフォームをDelphi 10 Seattleに更新した際に，不具合にぶつかってしまいました。それはTTabControlをFormに配置し，TTabItem上にコントロールを配置してAnchorsにakRightやakBottomを設定すると，画面からはみ出すという問題です。
これはTTabItemにTLayoutを配置してAlignにalClientを設定し，その配下にコントロールを移動することで回避できます。この問題はDelphi 10 Seattle Update 1でも修正されていません。不具合修正を中心に更新をするというお話をデベロッパーキャンプで聞きました。この問題は既に，[RSP-11721](https://quality.embarcadero.com/browse/RSP-11721)，[RSP-11895](https://quality.embarcadero.com/browse/RSP-11895)にレポートされていて，現在は[RSP-11895](https://quality.embarcadero.com/browse/RSP-11895)に統合されており，優先度は中となっています。近いうちには解決されることを期待しています。

※不具合のレポート確認についてHosokawaさんにご指摘いただきました。ありがとうございました。OwlさんにTwitterでJIRAの情報を教えていただきました。感謝です。
Vueのインスタンスを構築中、不格好になる問題をもう少し考える

## Vueのインスタンス構築中は不格好

HTMLにおけるViewを管理するライブラリではよく言われることだけれども、
VueのElement構築中、不格好になってしまう状態がコンマ数秒ある。
その解決法が結構皆色々あるようなので、自分の解決法を書いてみる。

## VueのComponent生成順序

こんなコードを全てのComponentに書いてみると判るのですが

``` js:index.js
ready: function() { console.log('global-compo1 is ready'); }
```

Vueの親インスタンスのreadyは全てのComponentがreadyとなってからです。
Comopnentの構築はDOMに書いてある上から順。

``` html:index.html
<body id="app">
  <compo2></compo2>
  <compo1></compo1>
  <compo3></compo3>
</body>
```

``` sh:console.log
compo2 is ready
compo1 is ready
compo3 is ready
app is ready
```

## 準備中のHTMLを非表示にしてると後で不便

Vueの構築中はまだElementにデータが入っていなくて、スタイルしか反映されていない状態がコンマ数秒続くのは不格好。
なのでこんなコードが推奨されているのだけれども

``` html:index.html
<body id="#app" v-show="show"></body>
```

``` js:index.js
new Vue({
  el: '#app',
  data: {
    show: false
  },
  ready: function() {
    this.$data.show = true;
  }
});
```

この方法だと対処がざっくりすぎて、以下の場合は他の方法に書き換えることになる。

1. Component内のElement位置・サイズを使ってあれこれしたいが、構築完了まで非表示なので数値が取れない
2. 最初にXHRでデータを取ってきて、データを反映するまでの途中の状態を見せたくない

## 非表示にはせず、フタを被せる

どこのフレームワークでも同じ感じのことをやると思うけど、[1]を達成するには、フタで隠すことになる。

``` js:index.js
Vue.Component('huta', {
  data: function() {
    return {
      show: true
    }
  },
  events: {
    'all:isReady': function() {
      this.$data.show = false;
    }
  }
});
```

## XHR待ちの場合

そして、[2]を達成するには、$dataでフラグを待機する。

``` js:index.js
new Vue({
  el: '#app',
  data: {
    isReady: {
      root: false
      compo1: false
      compo2: false
    }
  },
  events: {
    'isReady': function(component_name) {
      this.$data[component_name] = true;
      if (! _.includes(this.$data.isReady, false)) {
        this.$broadcast('all:isReady');
      }
    }
  },
  ready: function() {
    this.$emit('isReady', 'root');
  }
```

本当はcomponentの準備ができたかどうか、手動で発行したいんだけども、
フラグを手動で管理するような実装になってしまうのがもやっとする。
GitHub で2つのコミット間の修正を見る + 支援スクリプト書いた

GitHub で2つのコミット間の修正を見たいときは、以下のようなリクエストをすれば良い

`https://github.com/php/php-src/compare/04e3d82b5597630cc0a4ccdbafb75a4750c6506e...18b97c94b278ce72f54f949bbdba74bf41da8cf9`

`https://リポジトリURL/compare/[Start]...[End]`

コミットID・ブランチ名・タグ名 だけではなく、日付で指定することもできる

12/1 から 12/7 までの、コミット一覧と差分を見たい場合はIDの代わりに `ブランチ名@{YYYY-MM-DD}` を指定することができる。

`https://github.com/php/php-src/compare/master@{2015-12-01}...master@{2015-12-07}`


# 支援スクリプト

業務中に、ここと、ここの間、なにがあったっけ?という事があった。しかし、GitHubのコミットログ上には2つのコミット間を指定して比較するような便利ボタンがない。ということで作りました。

![demo.gif](https://qiita-image-store.s3.amazonaws.com/0/61997/27975373-0ca2-d4b0-1b64-5f757c77afcd.gif)

https://gist.github.com/kawahara/ab8ca5ab11ff84840ffd

Chrome + [Tampermonkey](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo) で動作確認済み。
ページ遷移したりとかしても、ちゃんと動作します。たぶん。

# 参考にした記事

- https://help.github.com/articles/comparing-commits-across-time/
他DBを使っているRailsでPostgreSQLデータを扱う



環境構築たまにしかやらないので、忘れる＆
PostgreSQL 過去にチラッとしか触ったことないで
時間かかってしまったので、メモ


### 今回の前置き

環境
・プロジェクトで使っているのは、mysql、mongo
・Vagrant CentOS

やりたいこと
・PostgreSQLデータを一時的にいれて、Rails内で扱いたい
・今はとにかくローカルのみで扱う前提
・既にRailsが動く環境下で一時的なブランチで作業

※ 記憶を辿って書いたので、手順一部抜けてたらごめんなさい。

## PostgreSQLデータを環境に用意

```
$ sudo yum install wget

$ wget http://yum.postgresql.org/9.3/redhat/rhel-6-x86_64/pgdg-centos93-9.3-1.noarch.rpm
$ sudo rpm -ivh pgdg-centos93-9.3-1.noarch.rpm

$ sudo yum install postgresql93
$ sudo yum install postgresql93-devel
$ sudo yum install postgresql93-server

$ sudo service postgresql-9.3 initdb
$ sudo /etc/rc.d/init.d/postgresql-9.3 start

$ su - postgres
$ passwd postgres

$ vi /var/lib/pgsql/9.3/data/postgresql.conf
  listen_addresses = '*'   # what IP address(es) to listen on;
$ vi /var/lib/pgsql/9.3/data/pg_hba.conf
local    all             all                   md5 # 追記

$ create database database_name;
$ psql database_name < dump.sql

$ sudo /etc/rc.d/init.d/postgresql-9.3 restart
```


※参考
VagrantのCentOSでPostgreSQLをRailsで使えるようにする - Qiita
http://qiita.com/ueki05/items/66597d40ee3914559655

PostgreSQL でパスワード認証を使う 
http://net-newbie.com/postgres/password.html#h3_3

PostgreSQLの使い方 
 http://www.dbonline.jp/postgresql/


## Rails側からアクセス

Gemfile

```.ruby
  gem 'pg'

```


```
$ bundle install
```

エラー

```
(省略)
checking for pg_config... no
No pg_config... trying anyway. If building fails, please try again with
--with-pg-config=/path/to/pg_config
checking for libpq-fe.h... no
Can't find the 'libpq-fe.h header
*** extconf.rb failed ***
(省略)
```

になるので

```
$ yum list available | grep postgres
$ sudo yum install postgresql-devel.x86_64
$ bundle install
```

※参考
[*Rails*] 開発環境用DBをSQLite3からPostgreSQLに変更する　 - Qiita 
 http://qiita.com/cigalecigales/items/a12a780d300cca0844bd


database.yml

```.yml
psql_development:
  adapter: "postgresql"
  encoding: "utf8"
  username: "postgres"
  password: "postgres"
  host: "127.0.0.1"
  database: "hoge_development"
  pool: 5
```


Model
複数のDBを使っているので`establish_connection `で明示的に指定

```.rb
class Client < ActiveRecord::Base
  establish_connection :psql_development
  self.table_name = "company"
end
```


```
$ bundle exec rails c
pry> Client.last
```


エラー

```
PG::ConnectionBad: FATAL:  password authentication failed for user "postgres"`
```
とかにぶつかるので 

```
$ su postgres
$ vi /var/lib/pgsql/9.3/data/pg_hba.conf
 local    all             postgres                                ident 
$ psql
 ALTER USER postgres PASSWORD 'postgres';
```

参考
http://stackoverflow.com/questions/7695962/postgresql-password-authentication-failed-for-user-postgres



```
$ bundle exec rails c
pry> Client.last
=> #<Client … # ヽ(´∀`｡)ﾉﾟ.:｡+ﾟとれた
```
2.1. 点を描く

3Dの基本的な知識を理解したくて、『３次元CGの基礎と応用［新訂版］（ http://goo.gl/GKoQ4y ）』という書籍を購入しました。薄くて読みやすそうな本なのですがサンプルソースがないので、勉強がてらサンプルを作りながら読み進めようと思います。誰でもすぐに追試ができるよう、HTML + Javascriptでサンプルを作っていきます。

完全なサンプルはこちら
https://github.com/nakaken0629/3dstudy

# 2.1. 点を描く

この節では、ラスターグラフィックスで点を描く話です。フレームバッファをHTML5のCanvasを使って実現しています。ただし1dot = 2pxとすることで少し見やすくなるようにしています。

![session2_1.png](https://qiita-image-store.s3.amazonaws.com/0/75307/f99f0aad-429e-9c93-0d47-29d23f6fcd6e.png)

## サンプルコード

```js:session2_1.htmlより
/* 共通処理 */

var canvas;
var ctx;

window.onload = function() {
    canvas = document.getElementById("myCanvas");
    ctx = canvas.getContext("2d");
    main();
};

var createRgb = function(red, green, blue) {
    return "#"
        + ("0" + red.toString(16)).substr(-2)
        + ("0" + green.toString(16)).substr(-2)
        + ("0" + blue.toString(16)).substr(-2)
    ;
};

var getRandomInt = function(min, max) {
      return Math.floor( Math.random() * (max - min + 1) ) + min;
};

/* 個別処理 */

var main = function() {
    for(var i = 0; i < 100; i++) {
        x = getRandomInt(0, 319);
        y = getRandomInt(0, 199);
        red = getRandomInt(0, 255);
        green = getRandomInt(0, 255);
        blue = getRandomInt(0, 255);
        pset(x, y, createRgb(red, green, blue));
    }
}

var pset = function(x, y, rgb) {
    /* 1pxでは見づらいため、2pxとしている */
    ctx.fillStyle = rgb;
    ctx.fillRect(x * 2, y * 2, 2, 2);
};
```
underscoreコードリーディング（every）





underscoreに詳しくないので、勉強半分でソースコードを読む。



##利用するバージョン
[underscore.js(v1.8.3)](https://github.com/jashkenas/underscore/tree/1.8.3)


##everyとは


###[underscorejs.orgのevery](http://underscorejs.org/#every)

こんな説明。
>####_.every(list, [predicate], [context]) Alias: all 
>Returns true if all of the values in the list pass the predicate truth test.


```javascript
_.every([true, 1, null, 'yes'], _.identity);
=> false
```

------------- 
_.allもエイリアスが張られている

listのすべての値がpassしたらtrueを返す


###[underscore.every](https://github.com/jashkenas/underscore/blob/1.8.3/underscore.js#L239)

コード的にはこのあたり。

```javascript
  // Determine whether all of the elements match a truth test.
  // Aliased as `all`.
  _.every = _.all = function(obj, predicate, context) {
    predicate = cb(predicate, context);
    var keys = !isArrayLike(obj) && _.keys(obj),
        length = (keys || obj).length;
    for (var index = 0; index < length; index++) {
      var currentKey = keys ? keys[index] : index;
      if (!predicate(obj[currentKey], currentKey, obj)) return false;
    }
    return true;
  };
```

predicateは必須ではないが
・cbはfunctionがきていたらそのままpredicateを返すので変わらず

keyはobjがArrayじゃなければ_.keysを用いてobjのkeyのarrayにする
lengthはkeysがあればkeys.length,なければobj.length(どちらもArray.length)

あとはスタンダードにarray/objectの中身を走査して、obj[currentKey]とcurrentKeyを使ってpredicate内での条件に一致しなかった場合にはfalse,何事もなく通った場合はtrueを返す
ベンチマークをとる

こんばんは :whale2: 

[Perl 6 Advent Calendar 2015](http://qiita.com/advent-calendar/2015/perl6)の11日目です。(あとで書き直したい :cry: )

Perl6の処理のベンチマークを取るには`Bench`モジュールを使います。

## .timethis

1つの処理。

```pl
use v6;
use Bench;

my $繰り返し回数 = 1 #`(回) ;
my $bench = Bench.new;

$bench.timethis(
  $繰り返し回数,
  sub{ sleep 0.05; },
  title => 'hoge',
);
```

```bash:結果
      hoge: 0.0505 wallclock secs @ 19.8048/s (n=1)
		(warning: too few iterations for a reliable count)
```


## .timethese

2つ(以上)の処理。

```pl
use v6;
use Bench;

my $繰り返し回数 = 1 #`(回) ;
my $bench = Bench.new;

$bench.timethese(
  $繰り返し回数,
  {
    first  => sub { sleep .05; },
    second => sub { sleep .005; },
  }
);
```

```bash:結果
Benchmark:
Timing 1 iterations of first, second...
     first: 0.0553 wallclock secs @ 18.0730/s (n=1)
		(warning: too few iterations for a reliable count)
    second: 0.0063 wallclock secs @ 157.8728/s (n=1)
		(warning: too few iterations for a reliable count)
```


## .cmpthese

2つ(以上)の処理を比較して表を出力してくれます。

```pl
use v6;
use Bench;

my $繰り返し回数 = 1 #`(回) ;
my $bench = Bench.new;

$bench.cmpthese(
  $繰り返し回数,
  {
  :first( sub { sleep .05; } ),
  :second( sub { sleep .005; } ),
});
```

```bash:結果
Benchmark:
Timing 1 iterations of first, second...
     first: 0.0525 wallclock secs @ 19.0299/s (n=1)
		(warning: too few iterations for a reliable count)
    second: 0.0060 wallclock secs @ 167.6427/s (n=1)
		(warning: too few iterations for a reliable count)
O--------O--------O-------O--------O
|        | Rate   | first | second |
O========O========O=======O========O
| first  | 19.0/s | --    | -89%   |
| second | 168/s  | 781%  | --     |
------------------------------------
```

## 参考と参照

* [tony-o/perl6-bench](https://github.com/tony-o/perl6-bench)
UbuntuマシンにMosquittoを入れてみる

UbuntuマシンにMosquittoを入れてみる。


```
$ sudo apt-get install mosquitto
$ sudo apt-get install mosquitto-clients 

```


おもむろに起動すると怒られる。
```
$ mosquitto
1449462980: mosquitto version 1.4.3 (build date Wed, 19 Aug 2015 10:31:10 +0100) starting
1449462980: Using default config.
1449462980: Opening ipv4 listen socket on port 1883.
1449462980: Error: Address already in use
```

[こちらの記事](http://stackoverflow.com/questions/30184664/how-to-test-mqtt-server-in-ubuntu)によると、mosquittoをインストールしたときに既に起動しているとのこと。かわりに*mosquitto_sub -t '$SYS/#' -v*で状態を確かめてみろ、と書いてある。

```
$mosquitto_sub -t '$SYS/#' -v

$SYS/broker/version mosquitto version 1.4.3
$SYS/broker/timestamp Wed, 19 Aug 2015 10:31:10 +0100
$SYS/broker/uptime 946 seconds
$SYS/broker/clients/total 0
$SYS/broker/clients/inactive 0
$SYS/broker/clients/disconnected 0
$SYS/broker/clients/active 0
$SYS/broker/clients/connected 0
$SYS/broker/clients/expired 0
```

動いているようだ。
<input type="number">のスピンボタン（右のボタン）を消す方法

この右にあるボタンです。これを削除する方法。
![SideButton_Spin.png](https://qiita-image-store.s3.amazonaws.com/0/20888/ee74d17b-2429-f0b5-ad3c-15385035718f.png)

# Chrome、Safari
```
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
```

# Firefox、IE
```
input[type="number"] {
    -moz-appearance:textfield;
}
```
Smalltalkをもっと短く伝えるであろういくつかの方法

# はじめに
[Smalltalkを短く伝える方法](http://qiita.com/newapplesho/items/b1b634a47837e5f16061)という記事を見て、自分だったらこうかなと思ったことを記事にしてみました。なんか老害な感じもします。

なお処理系には[Pharo Smalltalk](http://pharo.org/)を使います。

# 1から10までの和を出してみる

以前いろいろな言語で流行っていたみたいですが、Smalltalkでは普通にこうですね。

```Smalltalk
(1 to: 10) sum
```

「1から10までを足す」がそのまま表現されていると思います。

"Inspect it" (Alt or Cmd + i)で確認すると当然ながら55です。
![55.png](https://qiita-image-store.s3.amazonaws.com/0/61787/afa3a33b-73cd-2d4f-c854-78deb1a04850.png)

# あるオブジェクトを参照している他のオブジェクトの配列を得る

いわゆる逆参照というやつです。

```Smalltalk
yourObject pointersTo
```

で得られます。

では、「なにか適当なウィンドウを取り出し、それを参照しているオブジェクトの配列をインスペクト」してみましょう。

書き下すとこんな感じです(元の日本語より短いですが)。

```Smalltalk
NautilusWindow someInstance pointersTo inspect
```

"Do it" (Alt or Cmd + d)でドカーンとインスペクタが開きます。
![inspectInvertRefs.png](https://qiita-image-store.s3.amazonaws.com/0/61787/36263473-faa8-36da-9719-5b3de9870a8b.png)

あるクラスの何か適当なインスタンスを得るには`#someInstance`を使うのですね。

では調子に乗って、現在実行中のプログラムで、もっとも人気のあるMorphインスタンスを見つけてみましょう。ちなみにMorphとは画面に表示されているもろもろのオブジェクト(ウィンドウやボタン、ラベルなど)のことを指します。

`#pointersTo`を送った結果の配列のサイズがもっとも大きいやつが、もっとも人気のある(参照されている)オブジェクトということなので、以下のようになるでしょう。

```Smalltalk
[(Morph allSubInstances detectMax: [:each | each pointersTo size]) inspect] fork
```

`Morph allSubInstances`で、Morphの(サブクラス群も含めた)すべてのインスタンスが得られます。
`#detectMax:`で、引数ブロックの評価結果が最大のものを取り出すことができます。

5000以上ものMorphがうごめいている中、その逆参照を求めるというのは、実はかなり重たい処理になるので、さらに全体をブロックで囲って`fork`しています。こうすると別のスレッドで動いてくれるので、その間に他のことができて便利です。

...ご飯食べてきました :rice: 。インスペクタが開いています。

優勝は`MorphTreeMorph`さんだったようです。名前からしてヤバそうです。
![morphTreeMorph1.png](https://qiita-image-store.s3.amazonaws.com/0/61787/5f1740a4-f1b3-3812-8890-c86b98218035.png)

インスペクタ下部のペインで実際の逆参照の数を表示させてみましょう。"Print it"(Alt or Cmd + p)します。

```smalltalk
self pointersTo size
```
891と出ました。ちょっとどうかしています。
![891.png](https://qiita-image-store.s3.amazonaws.com/0/61787/866caf55-01b4-aaf6-d2ef-74f758e21125.png)


# あるディレクトリ下のファイルでサイズが最も大きいものを拡張子別に集計してCSVとして書き出す

「メタメタしているのはわかったけれど実用性皆無」というツッコミを受け、実用的なものも書いてみます。

```smalltalk
FileStream newFileNamed: '../sizes.csv' do: [:str |
	((('.' asFileReference allChildren groupedBy: [:each | each extension]) collect: [:files | files detectMax: [:each | each size]]) values sort: [:a :b |a size >= b size]) do: [:file |
		str nextPutAll: (', ' join: {file size. file extension. file fullName}); lf.
	]
]
```

「カレントディレクトリ('.')以下のすべてのファイル群に対して、拡張子ごとにグルーピングして、サイズが最大のものについて、降順に並べた上で、"{サイズ}, {拡張子}, {パス名}"のフォーマットで、親ディレクトリの'size.csv'というファイルに書き込む」という処理です。

一回も代入を使わず、すべてメッセージ送信でまとめているところがエレガントな感じです。

できあがったsizes.csvを開くと以下のようになっていました。やはりExcelは便利ですね。

![csv3.png](https://qiita-image-store.s3.amazonaws.com/0/61787/fc5a0a1d-8100-2e65-29d2-41c7852c2b15.png)

ということで普段の仕事でもSmalltalkを使ってみても良いのではないでしょうか。最近周りにSmalltalker、じわじわと増えてきています。
調べるほどではないけど、聞くに聞けない、インターネットとWebの海図(きほんのき)


#根本を知ってる知らないで、理解と表現が変わる#


この海図シリーズは英語で言う**"アルファベット"**みたいなものです。

本当にきほんのきほんのき、ですが、そこを頭文字に単語が形成され、文法、文章となるように、**インターネットとWebにおける全てのこと**の頭文字のようなものです。
目印をしっかり把握して、広大だけども楽しい海原をスイスイっと航海していきましょう。



##WebブラウザでWebページが表示される仕組み##


WebのコンテンツはWebサーバに置かれています。
置かれたコンテンツのデータをダウンロードして、ユーザーに表示する機能をもつのが**Webブラウザ**です。

コンテンツはHTMLという書式のデータで構成されています。これに画像をはめ込んだり、レイアウトを適用したりすることによって、最終的なWebページが表示されます。

Webブラウザには、ブラウザの内部でプログラムを実行する機能もあります。この機能を使うと、キーボード操作やマウス操作などによって動くWebページを構成できます。

1つのWebページは主に4つの要素で構成されています。必須なのは1.のHTMLのみで、それ以外はオプションみたいなものです。

1.**HTML**・・・Webコンテンツが記述されています
2.画像や動画など・・・1.に差し込まれる画像や動画です
3.**CSS**・・・1.のタイトルや見出し、本文、画像などをどのようにレイアウトするのかを指示します
4.**JavaScript**・・・Webブラウザの内部で実行されるプログラムです

[補足]
・クライアント・・・情報を取得する端末のこと
・サーバ・・・Webサイトを提供するインターネットに接続されたPCのこと
・URL・・・Webサイトの住所みたいなもの。接続方法を示すプロトコル「http、セキュリティ的に暗号化されているものがhttps」、
サーバの名前「www.◯◯.co.jp」、場所を特定するパス「index.html」で構成されています
・静的ページ・・・リクエストに対して毎回同じページで表示するもの
・動的ページ・・・ユーザーの入力や現在の状態をみてコンテンツを生成し、内容を変化して表示するもの(ここにWebプログラミングを使う)
・レンダリング・・・ブラウザによってHTMLが解釈、整形されること

を踏まえて、

**1.Webにアクセスして、ページを表示する**
**2.入力フォームなどからのデータ入力**
**3.プログラムの実行機能**

がWebブラウザの役割となります。


##WebサーバからWebブラウザにコンテンツが届くまで##


1.**IPアドレス**・・・インターネットに接続されているクライアントやサーバにはIPアドレスと呼ばれる値が割り当てられており、この値が通信先を示すものとなります

2.**DNSサーバ**・・・URL内のサーバを示す部分をアクセスする際にIPアドレスに変換するときに使われるサーバ

3.**Webサーバソフト**・・・クライアントからの要求にデータを返すソフト。代表的なソフトは「Apache(アパッチ)」

4.**TCP、UDP、ポート**・・・Webサーバソフトにあるデータの出入り口


##Webプログラムがコンテンツを作る仕組み##


Webプログラムは、ブラウザ上で実行される「クライアントサイド」とWebサーバ上で実行される「サーバサイド」に分かれます

1.**サーバサイドのプログラム**・・・WebサーバではPHPやPerl、Ruby、Javaなどの各種プログラミング言語で記述したプログラムを実行できます。
プログラムは、クライアントからの要求があったときに実行され、その実行結果が返されます。

2.**クライアントサイドのプログラム**・・・Webブラウザ上では、JavaScriptなどで記述したプログラムを実行できます。「ボタンがクリックされた」「マウスが動かされた」などのタイミングでアニメーションなどを働かせることができます。クライアントサイドのプログラムは「Ajax」と呼ばれる仕組みを使ってサーバサイドのプログラムと通信することもできます。

3.**入力フォーム**・・・テキスト入力や、チェックボックス、ラジオボタン、選択肢などの入力欄が提供されており、フォームにつけたボタンをクリックすると、サーバに送信されます。

4.**データベース**・・・サーバ上で、データを保存する場所として使われ、複雑な条件で抽出して条件に合致したものだけを取り出せます。

**[覚えておきたいHTML要素としての入力フォーム例]**＊注　タグ省略

・input type="text" / 一行入力

・input type="password" / 入力した文字が隠れる

・input type="checkbox","radio" / 複数選択、単一選択

・select,option~ / プルダウンリスト、リストボックス

・textarea / 複数行のテキスト入力

・input type="file" / フィアル送信

・input type="botton" / 汎用的なボタン


***


といった感じになります。さらーーっとでしたが基本的な目印となりますので、理解しておきましょう。

では、また次の航海で。
RailsでReact開発環境を作る。

備忘録。
*****

## Gem
- react-rails
- browserify-rails

## npm_modules
- browserify
- browserify_incremental
- babelify
- babel-preset-es2015
- babel-preset-react
- babel-preset-stage-2
- react
- react-dom
- react-redux
- redux
- redux-thunk

以上をGemfile及びpackage.jsonでインストールする。

## .babelrc
.babelrcに以下を記述

```.babelrc
{
	"presets": ["ec2015", "stage-2", "react"]
}
```

## config/application.rb

```
config.browserify_rails.commandline_options = '-t babelify --extension=.jsx'
```

続いてreactをインストールする。
rails g react:install


### components.js

```
window.React = require('react');
window.ReactDOM = require('react-dom');
window.Hello = require('./components/hello');  //Reactコンポーネント
```

こうするとnpmから入れたreactをヘルパーでよびだせる。

*****

参考URL
http://qiita.com/suzan2go/items/24ef3320e04b8a84597f
http://qiita.com/imaimiami/items/f5362099533aefcdd2b4
http://qiita.com/kozo002/items/a276569e85395fce801e
ESP8266 > 回路図2 > FTDI232のVCCは接続しない / TX, RX接続のシリーズ抵抗


ESP8266とのシリアル通信が失敗する理由の調査中。

他の人の回路を見ている。

http://music-device.com/web/2015/07/25/esp8266-circuits/

1. こちらではFTDI232のVCCをESP8266のVCCと接続した(かつESP8266のVCCに別の電池をつないだ)のは間違いだったか?
2. TXとRXの接続にシリーズで100Ωの抵抗を入れている。この理由は不明。

<hr>

http://doc.switch-science.com/schematic/ESP-WROOM-02_devboad/ESP_WROOM_02_FTDI.pdf

上記においてもTXとRXの間に470Ωの抵抗を入れている。

回路の勉強を再度しないといけない。

<hr>
TX, RXのシリーズ抵抗について以下に記載あり。

http://electronics.stackexchange.com/questions/15635/resistors-in-series-with-tx-and-rx

Leon Hellerの回答

> One of them is there to prevent damage that could occur if the AVR has RxD programmed as an output, pins on both devices could be damaged if that happened as AVR pins can source and sink quite a lot of current. I don't think that the other resistor is necessary.
Shinyでタグを直接埋め込んで書いてしまいたい時のめも（R）

# 行儀悪く書いてやるぜヒャッハー

これ、前に色々試してあんまりうまくいかなかったので。こうすればよかったのかー。。。

```r:ui.R
library(shiny)
shinyUI(fluidPage(
  uiOutput("test")
))
```

```r:server.R
library(shiny)
shinyServer(function(input, output, session) {
  output$test <- renderText({
  "<div style='font-size:90pt;'>test?</div><script>alert('test!')</script>"
  })
})
```

これでちゃんとJavaScriptも動くという。
前にやったときは、なぜ上手くいかなかったんだろう。

![test_1.PNG](https://qiita-image-store.s3.amazonaws.com/0/94255/66b33e9f-a1bd-6049-6940-088405ec63d6.png)
EC2とApacheでSSL通信（RapidSSL）を行う

#SSL暗号化通信を行うまでのサーバ設定

HTTPではセキュリティに問題があるということで，今回は初めてSSL暗号化通信の設定を行ってみたいと思います．

##SSL通信とは？

まずSSL通信を使うと嬉しいこと．

- やりとりされるデータを**暗号化**できる

- Webサイトの運営者が本物であるか**認証**できる

アクセス先が安全なWebサイトであることを保証してくれるものと考えるとわかりやすい．
SSL通信で行われている「共通鍵暗号方式」や「公開鍵暗号方式」などの詳しい仕組みの解説は他を参考にしていただくとして，
ここではサーバ上での設定方法について調べた結果をまとめていきます．
（参考）[SSLとは？仕組みから、共有・独自SSLの違い、証明書についてが分かるまとめ](http://viral-community.com/blog/ssl-summary-1510/)

##サーバ上の設定詳細

開発環境

- EC2（Amazon Linux AMI）

- Apache2.2.31

（参考）[さくらのVPS（CentOS 5.5）に RapidSSL をインストールするまでのメモ](http://dounokouno.com/2011/04/07/%E3%81%95%E3%81%8F%E3%82%89%E3%81%AEvps%EF%BC%88centos-5-5%EF%BC%89%E3%81%AB-rapidssl-%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B%E3%81%BE%E3%81%A7%E3%81%AE/)

SSL通信を実現するためにはOpenSSLというライブラリを使います．
EC2にはデフォルトでインストールされていると思いますが念のためコマンドで確認

```bash
$ rpm -q openssl
```

ApacheをSSLに対応させるためのモジュールをインストール

```bash
$ yum -y install mod_ssl
```

秘密鍵を作成．これを使って暗号化して送られてきたデータを複合化します．
RapidSSLの認証書が2048bitなので2048を指定する．

```bash
$ cd /etc/pki/tls/private/
$ openssl genrsa -des3 -out keyname.key 2048
```

秘密鍵からCSRを生成する．
CSRファイルとは，SSL通信に利用する公開鍵暗号系の公開鍵に，コモンネームなどの情報を付加したものです．
これが認証局に提出する署名リクエスト（Certificate Signing Request）となります．

```bash
$ openssl req -new -key server.key -out csrname.csr
```

CSRをRapid-SSL.jpに送信して、証明書発行を申し込む．
そして受け取った認証用ファイルを，申請対象のFQDN（コモンネーム）配下に置くことで
認証局がファイルを確認して証明書を発行します．
（参考）[ファイル認証について](https://valuessl.net/sslwords/domain_fileauth.html)

メール認証後，サーバ証明書が送られてくるのでCRTファイルとしてサーバにあげます．

```bash
# crtファイルを作成してコピー
$ cd /etc/pki/tls/certs/
$ touch crtname.crt
$ vim crtname.crt
```

サーバ証明書はセキュリティ上の理由等により複数階層による認証を行っているため，
[ここ](https://www.geotrust.co.jp/resources/repository/intermediate.html)から中間CA証明書をダウンロードしてサーバにあげます，

```bash
# 中間CA証明書の中身をコピー
$ cd /etc/pki/tls/certs/
$ touch rapidssl-chain.crt
$ vim rapidssl-chain.crt
```

ここから，バーチャルホストを設定していない場合はssl.confを直接編集します．

```bash:ssl.conf
$ vim /etc/httpd/conf.d/ssl.conf
SSLCertificateFile /etc/pki/tls/certs/crtname.crt
SSLCertificateKeyFile /etc/pki/tls/private/keyname.key
DocumentRoot "/var/www/html"
ServerName www.example.com:443
```

バーチャルホストを設定している場合はその設定ファイルを編集します．

```bash:virtualhost.conf
$ vim /etc/httpd/conf.d/virtualhost.conf
NameVirtualhost *:443
<VirtualHost *:443>
    ServerName www.example.com
    DocumentRoot /path/to/documentroot

    SSLEngine on
    SSLCertificateFile /etc/pki/tls/certs/crtname.crt
    SSLCertificateKeyFile /etc/pki/tls/private/keyname.key
    SSLCertificateChainFile /etc/pki/tls/certs/rapidssl-chain.crt

    ErrorLog logs/ssl.error.log
    CustomLog logs/ssl.access.log combined env=!no_log
</VirtualHost>
```

Apacheのconfigファイルを編集したのでhttpdを再起動．

```bash
$ service httpd restart
```

以上で快適なSSL通信ライフを送れるはず！
あとは，HTTPからHTTPSへのリダイレクトの設定などをするといいかも．
https通信をSwift 2.1でおこなうときの選択肢

#Swift 2.1でHttps通信をやりたいと思った時の選択方法

```
*共通のコード (viewdidLoadの中とかに書く)*

 var url: NSURL = NSURL(string: https:どっかのURL)!
 var request: NSURLRequest = NSURLRequest(URL: url)

----あとはここに書いていきます-----

```

## NSURLConnection.sendAsynchronousRequest

**一応ですがこれはdeprecatedされてるみたいです**

```
viewDidLoad(){

・・・・・・・
NSURLConnection.sendAsynchronousRequest(request, queue:NSOperationQueue.mainQueue(), completionHandler: self.getHttp)

} //メソッドの終わり

func getHttp(res: NSURLResponse?, data:NSData?, error: NSError?){
     let response: NSString = NSString(data: data!, encoding: NSUTF8StringEncoding)!
     print(response)
}
```

参考：[Swift-http通信処理](http://qiita.com/Pebbles/items/44541363f934bcb1a9bd)

## NSURLSession

```
viewDidLoad(){
・・・・・
   session = NSURLSession.shardSession()
   let task = session.dataTaskWithRequest(request, completionHandler: { data,response, error -> Void in
 print(response)
})

   task.resume()

}

```

参考 : [sendAsynchronousRequest was deprecated in iOS 9, How to alter code to fix](http://stackoverflow.com/questions/30935304/sendasynchronousrequest-was-deprecated-in-ios-9-how-to-alter-code-to-fix)


####とりあえずこれだけ書けばなんとかなるかなと

中身の説明が全くないので追記していきます。

あと詳しい方おられたらコメント、お願いします。
PyCharm環境設定メモ

* 「とりあえずこれ設定しときゃOK」な自分用メモです
* 随時編集します

## メニューバー > Preference

### Editor
#### General
* Appearance
 * Show line numbers -> ON
 * Show method separators -> ON
 * Show whitespaces -> ON

#### Colors & Fonts
* Scheme: [Darcula]

#### Code Style
* Default Optoins > Right margin (columns): 120 -> 80

#### File and Code Templates
* Files 
 * Python Script

```
#!/usr/bin/env python
# -*- coding: utf-8 -*-
```
operator overrideの使われ具合


どこかでoperator overloadは必要最低限に留めたほうがいいと書いてあるのを見たことがあります。
(C++の話をしているブログだったと記憶しています)
自分の中のイメージでもDart界隈にはあまりoperator overrideを使ってる人はいない印象があります。
実際有名Dartプロジェクトではどの程度使われているのか簡単に調べてみました。

#調査方法
Githubから有名なDartプロジェクトをcloneしてきてoverrideを使っている箇所をカウントする

#結果
##redstone.dart

|演算子|回数|
|:--|--:|
|[ ]|1|
|[ ]=|1|
|==|2|

ちなみに[ ]の使い方ですが大文字でも小文字でもデータを取り出せるよう、こんなコードでした。

```dart
List<String> operator [](String name) => _headers[name.toLowerCase()];
```

##dart-samples
|演算子|回数|
|:--|--:|
|/|1|
|*|1|
|+|1|
|-|1|
|-expr|1|
|[ ]|1|
|[ ]=|1|
ベクトル同士の計算を一通り用意していました。

##angular.dart
|演算子|回数|
|:--|--:|
|[ ]|18|
|[ ]=|10|
|==|6|
[ ]演算子のoverrideを多用していました。

##three.dart
|演算子|回数|
|:--|--:|
|[ ]=|3|
|[ ]|4|
|==|1|
3Dのライブラリということでもっとたくさん出てきそうだったのですが、
ほとんど使っていませんでした。

#感想
[　]のoverrideは積極的に使っていこうと思います。
それ以外の演算子のoverrideはあまり使わないのが普通なのかなと思いました。
そもそもDartが標準のベクトル型を用意すればこの機能自体をなくせるのではとも思いました。
wow.jsとanimate.cssのほわほわぽよ～んするやつを自作


wow.jsとanimate.cssでよくある順番にほわほわぽよ～んするやつを作ってみる。wow.jsは便利だがソースが長くなるので。

## javascript

jsはクラス[animated]の要素に上から順番に[animation-順番]の連番クラスを付加する。

```javascript
//ほわほわぽよ～んjs
$('.animated').each(function(i){
  var linkBase = $(this).attr('class');
  $(this).attr('class',linkBase + ' animation-' + (i+1));
});
```

## CSS
CSSはキーフレームでCSS3 Animationを作り、SASSのfor文を使ってクラス[animation-連番]にanimation-delayだけ少しずつずらした記述を書く。

```scss
//ほわほわぽよ～んcss
@for $i from 1 through 24 {
  .animation-#{$i} {
    animation-delay:#{($i * 0.2) + 0.3}s;
  }
}
@keyframes animated {
  from {
    opacity: 0;
    transform: translate3d(0, 40%, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.animated {
  animation-duration: 0.6s;
  animation-name: animated;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
  opacity: 0;
}
```

## Demo
http://codepen.io/hanuman6/pen/KVpjjO

ほわほわぽよ～ん、しました。

## 課題
ほわほわぽよ～ん要素が画面に表示されたタイミングで、ほわほわぽよ～ん要素をanimationさせたい。
Rmfprでの入出力

#はじめに
Ｒ言語を使ってJPL(ジェット推進研究所)の天体暦DE405/DE430のパラメータ[ftp://ssd.jpl.nasa.gov/pub/eph/planets/ascii/de405/ascp2000.405]
を使用して計算しようとしてますが、18桁の精度が必要です。
精度の扱いがよく分からないため、調べた結果のメモになります。

#mpfrの仕様
Ｒのコマンドプロンプトから「mpfr」と入力します。

> mpfr
function (x, precBits, base = 10, rnd.mode = c("N", "D", "U", "Z", "A"))

baseの意味がよく分からない。
rnd.modeは「丸めモード」か？

#10進18桁を保障するには
19桁目で丸めるとして、
     log 2^64  = 19.2
2進64bitあればよいということになります。
確認してみます。
> Const("pi", 64)
1 'mpfr' number of precision  64   bits 
[1] 3.14159265358979323851

**3.14159 26535 89793 238**51
238まで正しいので1桁＋小数点以下18桁の計19桁の精度があることが分かります。

#DE405/DE430の数値を読み込む
実際には'0.245153650000000000D+07'といった倍精度指数表記なので、一工夫が必要です。

> mpfr('0.113078768223014772D+08',64)
 mpfr("0.113078768223014772D+08", 64) でエラー: 
  str2mpfr1_list(x, *): x[1] cannot be made into MPFR

エラーになります。

'D'を'E'に置き換えます。置換にはsub()/gsub()/chartr()がありますが、chartr()を使ってみます。

> mpfr(chartr('D','E','0.113078768223014772D+08'),64)
1 'mpfr' number of precision  64   bits 
[1] 11307876.8223014772002

大丈夫そうです。

scanを使ってファイルから読み込みます。全て文字列として読み込むためにwhat=''を指定します。

> val <- mpfr(chartr('D','E',scan('/proj/R/ascp2000.405',what='')),64)
Read 234038 items
> val[1:2]
2 'mpfr' numbers of precision  64   bits 
[1]    1 1018
> val[3:8]
6 'mpfr' numbers of precision  64   bits 
[1]               2451536.5               2451568.5 -33800878.7742210924989
[4]  11307876.8223014772002  397860.220581820933006 -25563.1650982068168005
> 

読み込むことが出来ました。実際の値は以下です。

 1 1018
  0.245153650000000000D+07  0.245156850000000000D+07 -0.338008787742210925D+08
  0.113078768223014772D+08  0.397860220581820933D+06 -0.255631650982068168D+05  

#10進18桁で出力する。
formatMpfr()を使う。
> formatMpfr( val[6], digits=18 )
[1] "11307876.8223014772"

指数表示にする。

> formatMpfr( val[6], digits=18, scientific=TRUE )
[1] "1.13078768223014772e7"

> formatMpfr( val[3:8], digits=18, scientific=TRUE )
[1] "1.13078768223014772e7"

> formatMpfr( val[3:8], digits=18, scientific=TRUE )
[1] "2.45153650000000000e6"  "2.45156850000000000e6"  "-3.38008787742210925e7"
[4] "1.13078768223014772e7"  "3.97860220581820933e5"  "-2.55631650982068168e4"

これでなんとかなったか。
実際の値は以下（再掲）
  0.245153650000000000D+07  0.245156850000000000D+07 -0.338008787742210925D+08
  0.113078768223014772D+08  0.397860220581820933D+06 -0.255631650982068168D+05
Swiftで文字列の前後の不要なスペース・改行を取り除く

### 前後の全角スペースと改行を取り除く

```swift:
string.stringByTrimmingCharactersInSet(NSCharacterSet.whitespaceAndNewlineCharacterSet())
```

### 前後の全角スペースを取り除く

```swift:
string.stringByTrimmingCharactersInSet(NSCharacterSet.whitespaceCharacterSet())
```

### 前後の改行を取り除く

```swift:
string.stringByTrimmingCharactersInSet(NSCharacterSet.newlineCharacterSet())
```
iOSの設定の保存方法

アプリの設定を保存するデザインパターンみたいなやつって、調べてもあんまり情報が無いですよね。
自分がやっているパターンが正解だとは思わないのですが、とりあえず書き留めて見ようと思います。

もし、もっと良い実装方法があればコメントや新規エントリで教えてください！

#設定の管理において特筆しておくこと
* 永続性が無くてはならない
* 同じような処理は統一した方が良い。
* UITableView等で簡単に設定画面が作れるようにしておきたい。
* その設定にどのような機能がついているのか分かりやすいようにしたい
* 初期値が設定したい

#実装

```swift

class GlobalConfig: NSObject {
    //configs
    var loadCount = IntegerConfig()
    var configs:[BaseConfig] = []
    
    //initializer
    static let instance = GlobalConfig()
    override init() {
        super.init()
        setup()
    }
    
    func setup(){
        //設定の設定を書いておく
        loadCount.title = "読み込み数"
        loadCount.defaultValue = 200
        loadCount.detail = "一回あたりのソース読み込み数"
        //全データにアクセスしやすいようにまとめる
        configs = [loadCount]
    }
}

```

GlobalConfigを作り、シングルトンにすることで`GlobalConig.instance`でいつも同じインスタンスを参照出来るようにします。
setup内で設定のタイトルや初期値を決定します。
例としてloadCountという設定を追加しました。
これで`GlobalConfig.instance.loadCount.value = 100`のように使うことができ、どの設定に代入しているのかわかりやすくなります。
またconfigsにまとめておくことで、UITableView等で列挙した時にindexPath.rowでアクセスしやすくします。

```swift
class BaseConfig: NSObject {
    var ud = NSUserDefaults.standardUserDefaults()
    var identifier:String{
        //identifireを優先するが、無い場合はタイトルで代用する
        guard self.identifier != "" else { return title }
        return self.identifier
    }
    var title:String = ""
    var detail:String = ""
}
class IntegerConfig: BaseConfig {
    var defaultValue:Int?
    var value:Int?{
        set(val) {
            ud.setInteger(val ?? 0, forKey: identifier)
            ud.synchronize()
        }
        get{
            return ud.integerForKey(identifier)
        }
    }
}
```
基本的な管理はNSUserDefaultを利用します。
titleをキーにしますが、identifierを指定することで同じタイトルの設定を作る事もできます。


String型の場合は

```swift

class StringConfig: BaseConfig {
    var defaultValue:String?
    var value:String?{
        set(val) {
            ud.setObject(val, forKey: identifier)
            ud.synchronize()
        }
        get{
            return ud.objectForKey(identifier) as? String
        }
    }
}
```

などをどんどん作っていけばOKです。

#UITableViewで使う場合

`GlobalConfig.instance.configs.count`
でセル数を決定します。

cell生成のタイミングで
`GlobalConfig.instance.configs[indexPath.row]`
で設定を読みだして、config.titleでタイトルを表示します。
detail等も表示しておくと尚良です。

読み出しは
` "\(GlobalConfig.instance.loadCount.value)件"`
のようにして使います。

保存は
`GlobalConfig.instance.loadCount = 100`
のようにすればその場で永続化されます。


いじょ
ゲームを開発するチームをプロダクトオーナーとして運営する上で気をつけたこと

いつもの「業務外で作ったゲームの話」です。
業務内での話は地味だったり外に出せなかったりするのでこういう話ばかりで申し訳ないです。

ゲームを開発するチームをプロダクトオーナーとして運営する上で気をつけたことをつらつらと書きます。
概ね原則的には３つです。「仲間への信頼」「自分への監視」「金銭的な問題」

# 仲間を信頼せよ
## 権限の委任
基本的に「明確なビジョンの提示」の「担当者、現場リーダーへの大きな裁量」の組み合わせによるゆるく手綱を握って馬に任せる方式にしました。
野中郁次郎先生の著作にある形式で、開発スピードが上がっても上は判断量の多さでパンクせず、下は待ちが少なく市場に対して主導権を握りながら機動的に高速で製品をリリースすることができます。
当然人事や育成の手間はかかりますが、途中離脱がない限りコストはペイできます。

## 仲間への信頼を声に出す
「あなたは間違っていない」
「あなたのおかげです」
「あなたならできます」
日本人は褒めないので褒められ慣れていませんが、上記の言葉を仲間にかけ続けます。すると開発効率はあがり、作業時間は増え、忠誠心と帰属心を持つようになる、積極的に行動を起こすようになるのでおすすめです。
これは宗教が信者を勧誘する手段でもありますが、合理的な理由があります(ひどい話だ)。これをチームメンバーの活用方向にいかしました。

# 自分を信頼するな
## 画餅は裏切る、数字が監視する
「アイディア」「計画」は画餅です。それも現実歪曲フィールドの中で作られた画餅です。
正しいかもわからない情報をもとに不確実な仮説の上に乗った、うまくいくかわからないアクションの計画です。
ですので、どこに「未知の情報」があるか、情報は誤っていないか、仮説は狂っていないか、アプローチは間違っていないか、そういった疑念が常に付きまといます。
会議室で懸念を潰していては市場に乗り遅れます。しかし多額のコストをつぎ込んで、致命傷になった後で気づいては手遅れです。
ですので、懸念はKPIなど指標監視で対応します。
自分が考えたアイディアだからこそ、長い時間かけて練りこんだ計画だからこそ自分に甘くなり、正常バイアスがかかります。
しかし、現実にはこれらは裏切ります。ですので、そういうときこそ客観的な数値での監視が必要になります。

# 外注管理、費用管理の原則
企業ではなく個人で頼んだゆえの苦労です。
企業の看板を使えず、企業の資本体力を頼れず、相手の裏切りへの抑止力を使えません。
そこで行った各種防止策です。

## 外注は最高の仕事をしてくれる人間を選んだ
自分がよく知っていて、著作のファンなどの理由でイラストやシナリオの外注相手を選びました。
依頼書の前半には自分が相手のファンであること、相手を自分の作品に選抜した理由、あなたしかいないと恃む理由を書き連ねました。
すると相手もOne of Themではない指名ですので、概ね高確率で依頼を受けてくれます。
また、納品物の質も上がりがちです。
「クリエイター」を自称する人間には、リスペクトを前面に押し出すとお互いにとって良い結果が生まれやすいです。

## 「固定費」を低く抑えること
固定費といっても家賃などではありません。
たとえば、あるゲームで豪華な音楽とキャラのフルボイスがあったとして次回作でそれが付いていなかったらどう思うでしょう？
プレイヤーは「ショボくなった」と思うでしょう。最初からなければそうは思わないのに、です。
つまりユーザーの高くなった期待値に合わせるために「音楽」「ボイス」の確保が必須になり、制作費が高騰しはじめます。
音楽の他にも美麗なイラスト、美少女を描けるイラストレーター、多彩なバリエーションのグラフィック。
これらは、競合作品に対して差別化を図る上で安易に使いやすいカードです
ところが切ったが最後、開発/運営費はサービスをクローズするその日まで一気に跳ね上がります。

ですので、ゲームでは制作費高騰につながるアクションは常に慎重に考え、システムによるゲーム性向上などでプロダクト価値をあげようとしました。

## 代替案
外注の方は逃げます。
もっと言うなら「仲間」と信じた人間も倒れますし、自分ですら倒れたり事故にあったりすれば戦力に計上できなくなります。
そういうときの「こいつが倒れたら新作リリースは諦める」というリストを用意し、それを最小化します。
さらに外注については「もしこの人が何一つ使える納品物を残さず逃げた場合、どうするか？」というプランは常に念頭にありました。
プロダクト価値はあった場合より低下するものの、リリースそのものは不可能にならない「代替案」の用意は常に用意されていました。
また、代替案の用意が困難な場合は多額の報酬やスケジュール上の余裕などでリスク対策しました。
このあたりの考え方はリスク処理の専門知識を持ったメンバーがチーム内にいたことも大きかったです。

以上です。
参考になりましたでしょうか。

基本的にはゴーイングコンサーン、つまり開発を続けるために、途中でゲームオーバーにならないようにしながらレベルを上げ続けることを意識し続けました。
また、一番大事なのはヒットを出すこと、そして１つのアクションとヒットの距離を縮めることです。
ヒットは全てをカバーしてくれるので、あとはヒットをどう掴みやすくするかが大事になります。
Railsのremote: trueしたformのsubmitを止める方法

小技が必要だったので、備忘録としてメモします。

# `ajax:beforeSend`を使います

```sample.html.erb
<%= form_tag(
      some_path,
      method: :post,
      remote: true,
      id: 'sample-remote-true-form'
    ) do %>
  <%= text_field_tag 'keyword' %>
  <%= submit_tag '送信' %>
<% end %>
```

この例では`keyword`が空だったらsubmitを止めます

```sample.js
$(document).on('ajax:beforeSend', 'form#sample-remote-true-form', function() {
  if ( ! $(this).find('input[name="keyword"]').val().length > 0 ) {
    return false
  }

})
```

この情報が誰かのお役に立てば幸いです。

# 参考
http://stackoverflow.com/questions/15292270/rails-link-to-remote