OmniAICreator/Qiita-1.07M huggingface dataset:
Scratchで、Tennis for two を作ってみた

Scratchでの Tennis for two の作り方についてまとめました。

<img width="225" alt="70764041-a841-a9f4-183d-0644c2f88c48.png" src="https://qiita-image-store.s3.amazonaws.com/0/54192/4fbabaf8-eeb6-c1ed-268d-ef8cc95b895a.png">

https://kyorohiro.gitbooks.io/doc_scratch/content/tennis_of_two/index.html

本文では、概要を紹介します。ここでは、工程のみですが、作り方がわかると思います。



### (1) プロジェクトを作る

https://kyorohiro.gitbooks.io/doc_scratch/content/tennis_of_two/create_project/index.html


### (2) ボールを追加(ついか)する
https://kyorohiro.gitbooks.io/doc_scratch/content/tennis_of_two/create_ball/index.html

<img width="300" alt="about_s.png" src="https://qiita-image-store.s3.amazonaws.com/0/54192/66386d98-dd08-60bf-a004-f5de8ba0c510.png">



### (3) 自由落下させる
https://kyorohiro.gitbooks.io/doc_scratch/content/tennis_of_two/free_fall/index.html

![about_s.png](https://qiita-image-store.s3.amazonaws.com/0/54192/14039129-d85c-6ed8-157b-93f8834c5601.png)


### (4) ボールが地面(じめん)を跳(は)ねる機能を追加
https://kyorohiro.gitbooks.io/doc_scratch/content/tennis_of_two/bouncing_ball/index.html

![about_s.png](https://qiita-image-store.s3.amazonaws.com/0/54192/26919bd2-a8d4-00e1-cbf8-8850849e7886.png)


### (5) 左右(さゆう)へも移動(いどう)できるようにする
https://kyorohiro.gitbooks.io/doc_scratch/content/tennis_of_two/right_left/index.html

![about_s.png](https://qiita-image-store.s3.amazonaws.com/0/54192/dc23a098-bcf3-3379-a8f7-fc8d8c42933e.png)


### (6) ボールを打(う)つ
https://kyorohiro.gitbooks.io/doc_scratch/content/tennis_of_two/shot_ball/index.html

![about_s.png](https://qiita-image-store.s3.amazonaws.com/0/54192/57e5a96d-c0aa-183b-eaa2-896a61b72b5a.png)

### (7) Coatを作成(さくせい)する
https://kyorohiro.gitbooks.io/doc_scratch/content/tennis_of_two/create_court/index.html

![about_s.png](https://qiita-image-store.s3.amazonaws.com/0/54192/15cd525f-76d7-6945-5b4b-4021a12e7368.png)


### (8) 完成です。
今は、一人用ですが、対戦ゲームに改造するとかしてみてください。



--------
Kyorohiro Work
http://kyorohiro.strikingly.com/
【Rails】同じレイアウトだけど特定のページだけ背景色を変えたいというときの方法


## はじめに

Railsでフロントの実装をしていて、レイアウトは変わらないものの背景色だけ違うというパターンが出てきました。
あたらしくレイアウトファイルを作るという簡単な方法も思いつきますが、あんまりDRYじゃないなと思い、何かいい方法はないかな〜と調べた結果、考えた選択肢と今回採用した方法を記します。

## 選択肢

考えた選択肢は以下です。

1. content_forを使う
2. Controllerにインスタンス変数を書いてlayoutファイルに渡す
3. 各々Viewファイルの中でdivで新しく囲んでそこでCSS指定
4. あたらしくlayoutファイルを作る

## 結論から

結論から言うと、今回のプロジェクトでは

**2. Controllerにインスタンス変数を書いてlayoutファイルに渡す**

を採用しました。
それではそれぞれの解説です。


## 解説

### 1. content_forを使う

主にレイアウトに複数のコンテンツを設定したいときに使うcontent_forです。

```layoutファイル(slim)
 .l-main-content class="l-main-content--#{yield(:main_content_color)}"

```

※上の場合divにlayout指定していますが実際にはbodyでも可能。状況次第ですね。

```viewファイル
- content_for(:main_content_color, 'white')
```


- メリット

Viewのレイアウトに関することなので、content_forを使って色を変えているということが分かる

- デメリット

そもそも色だけ変えるのにこの使い方であっているのかという懸念。ちょっと仰々しい気がする。

### 2. Controllerにインスタンス変数を書いてlayoutファイルに渡す

これはapplication_controllerなど共通部分に変更したい背景色を書いていこうという方針です。
application_controllerのprivateメソッドで定義しておいてあとは必要箇所でbefore_actionで呼ぶだけです。

```application_controller

private

def set_main_content_bg_white_color
  @main_content_bg_color = Settings.main_content_bg_color.white
end

```

```layout
 .l-main-content class="l-main-content--#{@content_color}"

```

```controller

before_action :hoge

```

- メリット

Controllerに書いてスッキリ
DRYに書けて(・∀・)ｲｲ!!

- デメリット

そもそもControllerに書くべきものなのか？見た目に関することなので1のようにViewで渡したほうがいいのか…？

### 3. 各々Viewファイルの中でdivで新しく囲んでそこでCSS指定

単にViewファイルで

```hoge.html.slim
.gray-container
```

のように書いて対応するだけ。パッとすぐ思いつきそうな方法ですね。
おすすめはしないです。

- メリット

やりやすいくらいか…？敷居は低い。まぁ分かりやすい。

- デメリット

DRYじゃない
レイアウトに関することはレイアウトファイルでやりたい

### 4. あたらしくlayoutファイルを作る

色ごとにlayoutファイルを複数作って、共通部分はパーシャルにして極力DRYにしようぜという方針です。

- メリット

敷居低い。すぐ思いつく。

- デメリット

色が何パターンもあったら、その度に色だけ違うレイアウトファイルが量産される…。

## おわりに

正直1,2で迷った所はあったんですが背景色だけ違う場合にDRYに書くことができました。
今回は採用されませんでしたが、
content_forは例えばこのレイアウトにはタイトルいらないんだけど〜パンくずいらないんだけど〜みたいなレイアウトに差が出てくるときに重宝しますので興味のある方は下記のリンクを読むと参考になるかと思います。

- http://qiita.com/ikkou/items/3e27d7323d0deff20302
- http://stackoverflow.com/questions/11408769/multiple-content-for-for-specifying-classes
- http://qiita.com/awakia/items/3265f91768bcfd582bd7
- http://qiita.com/tomoima525/items/7a2835b711daeeec2803
個人的なRailsアプリケーションの開発スタイルver2015

## バックエンド

### 設定関係

settingslogic使うのやめて、最近のRailsだと標準で使えるconfig.xを使う。

### S3に画像アップロード

carrierwave + fogの構成だとawsのAPI叩くのをfog-awsで独自実装していて、carrierwave-awsだとaws本家が作ってるaws-sdkを使っているので、fog使うよりcarrierwave-awsを使うのがお薦め。

### テスト

* rspec-rails
* factory_girl_rails
* capybara
* poltergeist
* database_rewinder

よく使うのはこの構成。

### DBの不整合を防ぐのにやること

* 外部キー制約
* not null制約
* unique制約

アプリケーションレイヤーのバリデーションだけだと、正しくバリデーションされないケースがあってdbの機能も使ったほうがいい。

http://web.archive.org/web/20130528090635/http://memo.yomukaku.net/entries/187

### 中間テーブルの命名規則

モデル名の複数形_モデル名の複数形

#### 例
userとpostの中間テーブルの場合

```
bundle exec rails g model users_post
```

そうするとdbから見たテーブル名はusers_postsになる。

#### HMBTは使わない

モデルとしてマッピングされていたほうがrails consoleから操作しやすいので

## フロントエンド

### gem

* haml-rails
* scss-lint
* rails-assets-react.js
* rails-assets-flux
* sprockets-es6

### RailsのView

hamlで書く。erbと比べて、hamlだと閉じタグ書かなくて良かったり短く書ける。

### CSS

scssで書く。CIにscss-lintを組み込んでコーデングスタイルだったり重複などのチェックする。
規約はSUIT CSSを使う。

### JavaScript

React + Fluxの構成でES6。

#### jsプレフィックス

JavaScriptから操作するjs-というプレフィックスを付けることでデザインのHTMLの構造が変わった時に壊れないで済む。
Reactを使った場合はstateのデーターを元にVirtual DOMが勝手にレンダリングするので自前でDOM操作をしないといけないケースはあまり無さそう。

#### Coffee Scriptを使い続けるべきか?

ES5の時代は言語的に足りない機能があってCoffee Scriptだとその機能があったので使ってた。
最近ES6が使えるようになってきて、その辺が改善されたのでCoffee Scriptの役目は終えたかなという印象。
ES6はJavaScriptの標準だけど、Coffee Scriptは標準じゃないのは大きいと思う。

## サーバー

### AWS OpsWorks

AWSで提供してるレシピが使えるのは良いところ。

### CircleCI

自前でCIサーバー立てると管理が大変になるので。
HTMLの運用の仕方

HTMLの運用って多くの方がコーディングガイドラインだけでやっているように思えるのですが
気が狂ってるとしか思えないですよね

せめてサイトごとに運用に使える文章定義らしきものがほしいと思ったことはないですか？。
といってもDTDやXML Schemaを書くのは辛いし多くの人が読めるわけでもない。

そこでまず文章定義のおさらいをざっくりと
要素の順序，要素の繰り返しパターン（0,0 or 1, 0または1以上）、要素の中身,要素の属性といったもの定義しています

こういうパターンって図であらわすことができるんです。
なので図を書いていきましょう、ステンシル用意してもいいですし手書きでもいいです。
大抵は手書きで済ましていいと思います。

##HTMLのパターン図（基礎）
まずどのように書くのかHTMLの基礎的なブロック要素のルールを図に表した物を見てみましょう。

![e_html.png](https://qiita-image-store.s3.amazonaws.com/0/10489/2af99342-eab0-04d2-41b5-5044a58f1dfc.png)


html要素がルート要素で間にある→の記号が要素の読まれる順序表しています。
この場合,head要素,body要素が１つ子要素としてありhead→body順で書くと言うことを表しています。

次にhead要素の中身を見てみましょう

![e_head.png](https://qiita-image-store.s3.amazonaws.com/0/10489/0bec5b94-c38e-9e01-5db0-93068ad6e509.png)

「※」は0回以上の繰り返しを表しています。何も記号がないものは1回（必須）と言う意味になります。title要素は必須でその他は任意という意味です。真ん中が黒で塗りつぶされた◎の記号は要素の並び順は関係ないという意味です。

ついでにbody要素の中身も見てみましょう。
root要素の直下の要素のことをトップレベル要素などと言うこともありますが省略機構などを考えればbody要素直下もトップレベル要素と言えますよね。

![e_body.png](https://qiita-image-store.s3.amazonaws.com/0/10489/fadcc2bc-38c7-543e-4fb5-45797edfd075.png)

トップレベル要素としてh1〜h6,p,ul,ol,dl,div,section,article,asideなどが定義されています。順序はありませんね。


## 応用編

レシピを表示するような記事として図のような構造を用意してみました。

![e_article.png](https://qiita-image-store.s3.amazonaws.com/0/10489/f0aa2658-21e4-2760-8bab-6b320e3520c7.png)

レシピは筆者を複数で構成するという想定でarticleとしています。
header,figure,p,sectionと4つの子要素で順序付きで定義されているのがわかります

headerは子要素にh1を持っているのでレシピ名に使えますね。

figureには子要素としてimgを持ちレシピの完成画像などの掲載用として利用します。このfigure要素の横にある「?」記号は0回または1回を表しています。掲載画像がない場合はこのfigure要素は使居ません。

p.descriptionは掲載レピの紹介文となるのでしょう。何も記号がないので必須と言うのがわかりますね。

そしてsection。このsectionはh1が作り方となっているのでレシピの内容を掲載しているのがわかります。

sectionの子要素はh1、div.手順で順序が要素の順序が決まっていることが図からわかります。

div.手順のクラス名の「手順」は本来なら英単語の方がよさそうですが今回はわかりやすく日本語にしておきました。正式なクラス名が決まるまでは仮で日本語で書いておくことがあります。
div.手順の横にある「+」記号は1回以上の繰り返しを表します。
手順が1回以上繰り返されていてその中身は画像とp要素と言うことがわかります。

このような感じで図に書いておくことで構造が正しいか、効率よく処理出来るか？テンプレート化出来るか？属性値などいろいろなことを共有したり検討することが出来ます。
ER図とかと一緒ですね

ちなみに属性は@属性名：属性値といった形で表します。xpath的な表現方法です。
beelineを利用可能な簡易hiveserver2をdockerでさくっと作成してみる

とりあえず試してみたい方は３以降を実施していただければと思います。

# 1. やりたいこと

beelineを触って、hiveクエリの練習をしたいと考えていました。

ただ、docker hubを漁ってみたけれども、お手軽そうなものが見当たらなかったので、下記の方のblog等を参考にdockerのイメージを作成してみました。

* [HiverServer2セットアップしJDBC経由でHiveQLを実行する](hive-server2 Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/zookeeper/KeeperException)

# 2. hiveを実行可能なイメージを作成

以下のDockerfileをご覧いただければと思います。

* [Dockerfile](https://github.com/letusfly85/docker-hiveserver2/blob/master/docker/Dockerfile)

ハマったポイントがあり、簡易ながらも共有します。

1. `apt-get install  hive-server2  zookeeper`をしても、/usr/lib/hive/lib/zookeeper.jarが生成されない。（正確には存在しないsymlinkが生成される。。）で、hive-server2を起動するとClassNotFoundExceptionが発生しました。。私は、jaistからバイナリ配布のzookeeper-3.4.6のtar.gzをダウンロードしてそこからjarを取得しました。
2. `apt-get install zookeeper-server`がこける。[cdhさんのチュートリアル](http://www.cloudera.com/content/www/en-us/documentation/enterprise/latest/topics/cdh_ig_zookeeper_package_install.html)が間違っているような気がしました。。
3. `hive-site.xml`で、`hive.support.concurrency`のtrue/falseでクエリ実行速度がだいぶ違う。ここはお試しいただければと。（現在、内部動作等については確認中です）

# 3. docker-composeを利用して、コンテナを起動する

以下にdocker-composeを格納しました。

* [docker-compose.yml](https://github.com/letusfly85/docker-hiveserver2/blob/master/docker-compose/docker-compose.yml)

起動方法は、ymlファイルの存在するディレクトリに移動して、

```bash
docker-compose -f docker-compose.yml up -d
```

となります。

# 4. docker execを利用してコンテナに入り、beelineを試してみる

* docker exec でコンテナにはいる（コンテナ名は事前にお調べください）

```
docker exec -it ${container_name} /bin/bash
```

* beelineコンソールに入る

```bash
beeline
```

* localhostのhiveに接続して、テーブル作成、テーブル一覧表示を実行する

```sql
!connect jdbc:hive2://localhost:10000 hive hive org.apache.hive.jdbc.HiveDriver

-- dummy table作成し、１レコード追加
create table dual (dummy string);
insert into table dual select count(*) from dual;

-- sample table作成し、データ登録が実施できるか確認してみる
create table sample (key string);
insert into sample select key from sample;

show tables;
```

* 一部の標準出力結果など

```sql
0: jdbc:hive2://localhost:10000> show tables;
+-----------+--+
| tab_name  |
+-----------+--+
| dual      |
| sample    |
+-----------+--+

0: jdbc:hive2://localhost:10000> select * from sample;
+-------------+--+
| sample.key  |
+-------------+--+
| 1           |
+-------------+--+
1 row selected (0.06 seconds)

```

ちょっと不明点が多いので、休日中に調べつつ、hive自体のクエリキャッチアップも進めていくことにします。
ReactでFirebase paasを利用　(とりあえず動く編)

#0) 概要
## 目的
今流行りの([まだまだ怖い..](http://qiita.com/icoxfog417/items/5d79b3336226aa51e30d))React.jsを使ってES6を2015年秋に学ぶにあたり、サーバーへの永続化含め、一通り動く環境をお気軽に得ておくTips。
> ハマるところがなければ、nodeのインストールからはじめても概ね1時間以内。

## 前提
node 4.2.1 & npm 2.14.7

> 付記:windowsユーザーでchoco install nodeしている人は、必ずchoco uninstallしておくこと。でないと、npmがアップデートされない場合が...

## 使わせてもらうソース
https://github.com/slwen/reactfire-todo

>”Todo application built with React and Firebase, written in ES6.”とのこと。内部的に、[reactfire](https://github.com/firebase/reactfire)を使っている。



#1) Firebaseアカウントの準備

##Firebaseとは ?
: 出典:[Firebaseを使った Androidアプリ開発](http://www.slideshare.net/fumihikoshiroyama/gdg-tokyo-firebase-android)
``` • リアルタイム同期型クラウドデータベース
 • JSONストア型NoSQL
 • データの柔軟なセキュリティアクセス制限
 • オフラインサポート
 • Twitter, Facebook, GitHub, Google などのアカウ ント認証と容易な連携
```


## Firebaseにサインアップ

Firebase社は、Googleに買収されているため、Googleアカウントでサインアップすることとした。

## Create New App
アプリ名を(App Name)に入力した後、Create New Appボタンを押す。
アプリ名がXXXXXの場合、アプリデータへのエントリポイントは以下となる。
https://XXXXX.firebaseio.com/

#2) [reactfire-todo](https://github.com/slwen/reactfire-todo)。

## インストールと実行
指示に従い、コマンドラインで以下をタイプ。
```git clone https://github.com/slwen/reactfire-todo.git
cd reactfire-todo
npm run setup
```

> （付記）Node4.2.1初期インストール時の環境で不足していたinflight lru-cache sibmundを、npmから追加でインストールしたところ動作した。 

インストールに成功すると、nodeがローカルで立ち上がる。以下にアクセスするとtodoアプリが動作する。
 http://localhost:3000/

## 自分のfirebeseアプリへの書き込みに切り替える。
指示に従い、以下のjsファイル
./src/lib/fb.js
の、const rootUrl = 'URL名';
のところを、const rootUrl = 'https://XXXXX.firebaseio.com/';
といった具合に書き換える(XXXXXのところは、先ほどCreateしたアプリ名)。

改めて、
npm run setup
を実行すると、以後の実行では、ToDoの入力結果が自分のfirebaseアプリへと書き込まれる。
これは、自前のreactアプリを作る雛形として活用できる。



#3 今後について
以上、react&ES6用の環境を、あくまで、お遊び用として構築。

とはいえ、
 [静的Webホスティングの Divshot が Firebase に合流](http://toka-xel.hatenablog.com/entry/2015/10/14/112149)
という、かなり気になるエントリーも。すなわち、GoogleがDivshot社を買収したことで、今後、firebaseのホスティング機能が強化されるとのこと。
Divshotのサイトを見るにサイトが閉じる12月までにこのあたりの具体的なアナウンスが出るものと期待される:
https://divshot.com/

今後、react(reactnative)アプリのホスティング先の有力候補になる可能性も含め、年末に改めてウォッチしてみたい。
UITabBarControllerをコードから使ってみる


## UITabBarController
タブを押すとページを切り替えられるUIです。

プロジェクト作成時にtabbed Applicationを選択してもよいのですが、途中で仕様変更があった時などには対処できません。

以下、SingleViewApplicationから作った場合でも実装できる、tabBarControllerを利用したコードです。

![Simulator Screen Shot 2015.11.03 1.02.37.png](https://qiita-image-store.s3.amazonaws.com/0/77778/f798cbae-6a72-c030-71ef-7f380c10f96e.png "Simulator Screen Shot 2015.11.03 1.02.37.png")

## 確認環境
Xcode 7.1(swift2)
iOS 9.1(Simulator)

## コード

git -> https://github.com/ha1fha1f/tabViewSample


```swift:MainTabController.swift
import UIKit

class MainTabController: UITabBarController {

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        
        var viewControllers: [UIViewController] = []
        
        let firstViewController = FirstViewController()
        firstViewController.tabBarItem = UITabBarItem(tabBarSystemItem: UITabBarSystemItem.MostRecent, tag: 1)
        viewControllers.append(firstViewController)
        
        let secondViewController = SecondViewController()
        secondViewController.tabBarItem = UITabBarItem(tabBarSystemItem: UITabBarSystemItem.MostViewed, tag: 2)
        viewControllers.append(secondViewController)
        
        let thirdViewController = ThirdViewController()
        thirdViewController.tabBarItem = UITabBarItem(tabBarSystemItem: UITabBarSystemItem.Contacts, tag: 3)
        viewControllers.append(thirdViewController)
        
        self.setViewControllers(viewControllers, animated: false)
        
        
        // なぜか0だけだと選択されないので1にしてから0に
        self.selectedIndex = 1
        self.selectedIndex = 0
    }
}
```

ここでインスタンスを生成しているFirstViewController、SecondViewController、ThirdViewControllerは任意です。
利用したいViewControllerのインスタンスを設定してください。

タブの数なども自動的に変更してくれるので、

1. 必要なインスタンスをすべて生成
2. 各インスタンスのtabBarItemを設定
3. viewControllerのインスタンスのArrayを作る
4. self.setViewControllersに渡す

だけでokです。

UIViewControllerを継承するときのように書けばよいです。だいたいおなじメソッドを持っているので。

storyboardでinitialViewControllerをMainTabControllerにすれば操作は完了です。

### 仕組み
自動的に、UITabBarControllerの上のレイヤーにcontentView、更にその上のレイヤーにtabBarをのせてくれています。

### tabBarItem
システムで定義されているものを使っています。画像を用いることもできます。


### 初期選択
self.selectedIndex
に値をセットすると、そのアイテムをコードから選択させることができます。

ここでは1をセットするとそのままセットされるのですが、0だけだとbarItemが青くならないので、一度1にしてから0にしています（原因わかる方いれば教えて下さい）
swingの中にprocessingを埋め込む

#まえがき
ずっとProcessingにcomponentが貼り付けられない(理由は後述)ことを嘆いていましたが、

<blockquote class="twitter-tweet" lang="ja"><p lang="ja" dir="ltr">逆に考えるんだ、processingの中にswingが埋め込めないならswingの中にprocessingを埋め込めばいいじゃないかと</p>&mdash; hotman (@hotman09317382) <a href="https://twitter.com/hotman09317382/status/660754409681326080">2015, 11月 1</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
気づいたら一瞬~~(2日)~~でした。

#注意
swingベースのソフト開発を想定しているのでprocessingIEDで動かすためのコードではありません。
javaのIDEに
[EclipseでProcessingを動かす](http://d.hatena.ne.jp/white_wheels/20100331/p2)
等を参考にしてprocessingのライブラリをインポートしておいて下さい。

#コード

```java:Window.java
import java.awt.Canvas;
import java.awt.Graphics2D;
import javax.swing.*;
import processing.core.PApplet;
import processing.core.PSurface;


public class Window{
  Graphics2D g2;
  public static void main(String[] args){
    Window window=new Window();
  }
  Window(){
    JFrame frame =new JFrame();
    frame.setSize(400,400);
    PApplet second=new Applet(frame);
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.setVisible(true);
  }

public class Applet extends PApplet {
  JFrame frame;
  Applet(JFrame frame) {
    super();
    //this.frame=frame;
    try {
      java.lang.reflect.Method handleSettingsMethod =
        this.getClass().getSuperclass().getDeclaredMethod("handleSettings", null);
      handleSettingsMethod.setAccessible(true);
      handleSettingsMethod.invoke(this, null);
      } catch (Exception ex) {
        ex.printStackTrace();
      }
    
      PSurface surface = super.initSurface();
      Canvas canvas=(Canvas)surface.getNative();
      surface.placeWindow(new int[]{0, 0}, new int[]{0, 0});
      frame.add(canvas);
      frame.add(new JButton());
      //this.showSurface();
      this.startSurface();
    }
  
    public void settings(){
      size(300, 300);
    }
    public void setup(){
      background(0, 0, 0);
      smooth();
      strokeWeight(5);
    }
    public void draw(){
      noStroke();
      fill(0,10);
      rect(0,0,width,height);
      stroke(255);
      if (mousePressed) {
        line(mouseX,mouseY,pmouseX,pmouseY);
      }
    }
  }
}
```

#追記
###PApplet.main(new String[] {"クラス名"});を使わなかった理由
showSurface();が呼ばれると、setupでsetVisible(false);を呼ぶとしても一瞬はprocessingのwindowが表示されてしまうからです。

###Processing3にcomponentが貼り付けられない理由
processing3は描画にcanvasを使っています。~~そのcanvasの仕様として上に重なって表示されるコンポーネントは描画されないっからぽい(?)~~swingです。

#参考
[Processing 3.0 beta で複数ウィンドウ](http://3846masa.blog.jp/archives/1038375725.html)
[eclipseでprocessingを動かす](http://d.hatena.ne.jp/white_wheels/20100331/p2)
Node.jsでStreaming APIを使用したJSONの書き出し

## はじめに

本記事は，TwitterのStreaming APIを使用して，特定のワードが含まれたツイートを取得し，JSONで書き出すことを目的としています．
node.jsを用いてStreaming APIを利用したツイートの取得，`.json`形式で保存というところまでを行います．

## 使用モジュール
- [fs](https://nodejs.org/api/fs.html)
- [twit](https://github.com/ttezel/twit)

## Twitter APIについて
ツイートを取得するためにTwitter APIを利用するにあたって，大きく分けて二種類のAPIがあります．
一つはREST APIで，もう一つはStreaming APIです．  

**REST API** [https://dev.twitter.com/rest/public](https://dev.twitter.com/rest/public)
**Streaming API** [https://dev.twitter.com/streaming/overview](https://dev.twitter.com/streaming/overview)  

REST APIが，こちらからリクエストを送ったタイミングで結果を返してくれるのに対して，Streaming APIは一度接続を行った後は，ほぼリアルタイムで結果を返し続けるAPIになっています．
また，REST APIは15分間のリクエスト数に制限(指定ツイートの取得は180回/15分)があるのに対し，Streaming APIは流れてくるツイートを無制限に取得し続けます．  

今回は一定時間，特定のハッシュタグが含まれたツイートを取得し続けたかったため，Streaming APIを使用することにしました．

## アプリケーションキーの取得
Streaming APIを使用するには，Twitterでアプリケーションの登録と，アクセストークンの発行をする必要があります．
登録手順はこちらがわかりやすいと思うので，参考にしてみてください．

**Twitter APIの使い方まとめ** https://syncer.jp/twitter-api-matome

## 実装

サンプルコードは以下です．  

```js:stream.js
var twit = require('twit');
var fs = require('fs');
var file = 'twitter.json';
var tweet= new twit({
  consumer_key: 'TWITTER_CONSUMER_KEY',
  consumer_secret: 'TWITTER_CONSUMER_SECRET',
  access_token: 'OAUTH_TOKEN',
  access_token_secret: 'OAUTH_SECRET'
});

var getStream = tweet.stream('statuses/filter', {track: '#NowPlaying'});
getStream.on('tweet', function(tw) {
  fs.writeFile(file, JSON.stringify(tw), null, null);
  fs.readFile(file, 'utf8', function (err, tw) {
    console.log(JSON.stringify(tw));
  });
});
```
<br>

```
node stream.js
```
で起動し，更新があるたびにツイートを取得し続けます．

本サンプルでは，`#NowPlaying`が含まれるツイートを取得しています．
Streaming APIで取得してきたツイートは，もともとJSON形式で返されるため，それをそのまま`twitter.json`というファイルに`fs`を使って保存するという形で，JSONの書き出しとしました．

また，JSONとして保存されるのは1ツイートのみなので，更新されるたびにJSONの内容は置き換わるため，取得してきたツイートをすべて保存しておくには，別途データベースに格納するなどの方法が必要となります．

## おわりに
今回，特定のハッシュタグを含んだツイートをリアルタイムに取得し，それをopenFrameworksにJSON形式で受け渡すということで，以上の実装を行いました．
Streaming APIで取得されるものにはツイート内容，プロフィールやアイコンだけでなく，位置情報なども含まれるようなので，フィルタリングして特定の情報だけを保存しておくといったことも可能です．

ご意見などお待ちしております．

2015.11.3
stackを使ってhaskellで最小のWeb Applicationしてみる


HaskellでWeb Applicationをはじめてみたいと思う。
調べてみると、Rubyのrackのようなものとしてwaiがある。
[stack](https://github.com/commercialhaskell/stack)を使って最小のサンプルをつくってみる。

stackは別途インストールして欲しい。Mac OSXなら

```
$ brew install haskell-stack
```

でインストールできる。他の環境は[こちらで確認してください。](https://github.com/commercialhaskell/stack)

はじめに、プロジェクトをつくります。名前は wai-sampleとしました。

```
$ stack new wai-sample simple
$ cd wai-spmale
```

wai-sampleディレクトリが生成されます。
プログラムは`wai-sample/src`に書いていくことになります。

利用するライブラリを追加してあげる必要があります。waiとwarpとhttp-typeを使うので、`wai-sample.cabal`に追加します。

```wai-sample.cabal
  build-depends:       base >= 4.7 && < 5
    , warp, wai, http-types
```
となるように、以下のコマンドを実行します。

```
$ echo "    , wai, warp, http-types" >> wai-sample.cabal
```

"Hello wai"と出力するウェブサーバをつくってみます。
とある事情で環境変数PORTでポートを切り替えられるようにしています。

```Main.hs
{-# LANGUAGE OverloadedStrings #-}
module Main where

import Network.Wai (responseLBS, Application)
import Network.HTTP.Types (status200)
import Network.Wai.Handler.Warp (run, Port)
import System.Environment (getEnvironment)
import Data.List (lookup)
import Data.Maybe

main :: IO ()
main = do
  port <- getPort
  putStr "start Server: http://localhost:"
  print port
  run port helloApp

helloApp :: Application
helloApp req respond = respond $ responseLBS status200 [] "Hello wai"

getPort :: IO Port
getPort = getEnvironment >>= return . port
  where
    port = fromMaybe defaultPort . fmap read . lookup "PORT"

defaultPort :: Port
defaultPort = 3000
```

記述ができたら、コンパイルして実行してみましょう。

```
$ stack build
$ stack exec wai-sample
```

`stack build`でビルドできて、execにプロジェクト名で実行できます。

http://localhost:3000 にアクセスすれば, 「Hello wai」と表示されます。
とても簡単です。

ソースコード: https://github.com/eiel/wai-sample
Docke Image: https://hub.docker.com/r/eiel/wai-sample/

## もっと詳しく

Haskell三大Webアプリケーションフレームワークは

* yesod
* snap
* HappStack

らしいです。今回利用しているのはwaiを採用しているのはyesodのみ。
yesodはいろいろ便利ですがハードルが少し高いように思います。
waiに対応しているウェブサーバの、warpが良さそうなので、waiを使うことにしました。
waiに対応しているフレームワークでyesod以外には[scotty](http://hackage.haskell.org/)、 [spock](https://www.spock.li/)などがあり、yesodよりは入門しやすいです。
今回はフレームワークを使わないサンプルを用意しました。

プロジェクトを作成するのに使用した newサブコマンドですが、第2引数(全体でみると第3引数)はテンプレート名です。

```
stack new wai-sample simple
```

であればsimpleというtemplateを利用しています。
templateの一覧は

```
stack templates
```

で確認できます。

# 参考文献

* [Web/Frameworks - HaskellWiki](https://wiki.haskell.org/Web/Frameworks)
* [warpではじめる最小ウェブアプリケーション - Qiita](http://qiita.com/asukamirai/items/ec268ea0e037ecf964fe)
* [HaskellでWebAppの開発に必要なN個のこと - maoeのブログ](http://maoe.hatenadiary.jp/entry/2013/09/10/182914)
* [Network.Wai.Handler.Warp](https://hackage.haskell.org/package/warp-3.1.8/docs/Network-Wai-Handler-Warp.html)
* [Network.Wai](https://hackage.haskell.org/package/wai-3.0.4.0/docs/Network-Wai.html)
TypeScriptについてのいくつかのnote

TypeScriptを使って気づいた点、調べてもあまり情報が出てこなかった点をまとめます。
初心者なので、おかしい点があれば指摘をお願いします。

使用したバージョンは 1.6.2 です。

# 演算子による暗黙の型変換は警告されない場合がある

通常、TypeScriptでは異なる型同士の演算はエラーになります。

```ts
const one:number[] = [1];
const two:number = 2;
const three:boolean = false;

console.log(one + two); // error TS2365: Operator '+' cannot be applied to types 'number[]' and 'number'.
console.log(two + three); // error TS2365: Operator '+' cannot be applied to types 'number' and 'boolean'.
```

しかし、一部の演算による型変換はエラーになりませんし、警告もされません。以下のコードはコンパイルを通ります。

```ts
const one:string = '1';
const two:number = 2;
const three:boolean = false;

console.log(one + two + three); // -> '12false'
console.log(!!one); // -> true
console.log(+one); // -> 1
```

# Rest Parameters で渡した引数は型推論されない

以下のコードはコンパイルが通ります。

```ts
function sum(...numbers:number[]):number {
	return numbers.reduce((previous, current) => {
		return previous + current;
	}, 0);
}

function sumTwo(A, B):number {
	return sum(A, B);
}

console.log(sumTwo('1', '2')); // -> '012'
```

`sumTwo`から`sum`に渡した引数が型推論されず、`any`型で通ってしまうからです。コンパイルオプションに`noImplicitAny`を加えると警告されます。

## その他の型推論されない例

ML系の型推論に慣れていると忘れがちですが、以下のような例はすべて型推論されません。

```ts
let hoge; // any
hoge = 'fuga';

// 追記: v2.1.1で型推論されるようになりました。
```

```ts
function hoge(num /*any*/):number {
	return num;
}
```

```ts
((hoge /*any*/) => {
	console.log(hoge);
})('string')

// 追記: v2.0.9で型推論されるようになりました。
```

# 連想配列として宣言した変数には、[]でしかアクセスできない

JavaScriptでは、以下のコードは完全に等価です。

```js
hash['key'] = 334;
hash.key = 334;
```

一方TypeScriptでは、`Object`を連想配列として使用するために、以下のような宣言が認められています。

```ts
const hash:{[id:string]:number} = Object.create(null);
```

このように宣言した連想配列は、[]でしかアクセスできなくなります。つまり、JavaScriptで等価だったコードは等しくなくなります。

```ts
hash['key'] = 334;
hash.key = 334; // error TS2339: Property 'key' does not exist on type '{ [id: string]: number; }'.
```
Matz講演・言語デザイナーが見る未来レポート(dots2周年パーティー）

#なにこの記事
10月30日に某渋谷で行われたdots２周年パーティーでのMatzの講演内容をレポート……レポート？したもの。むしろメモを簡単に要約したといった表現の方が正しそう。

未来はこんな技術が来る！みたいな話よりというよりは、言語開発者なMatzさんから見た、未来の予想するときの考え方であったり重要な能力についての示唆という面が強かったように思う。

#免責事項
メモはしてたので話の大筋は思い出せるがうろ覚えで描いているところも多い。
なんかそんなアトモスフィアだったんだぐらいの気持ちで読んでくれるとうれしい。
　
#テクノロジーの変化の話
今回の話は平たく言うと言語デザイナーがどういう風に未来を見ているかという話

#結論
##未来がわかる人はいないが、予測することはできる
おそらくだが、未来は過去から現在に向かって起きている変化の延長線上にあると考えて間違いない。
現在起きている変化の方向性と、全く異なる向きにテクノロジーが変化するということはありえないだろう。
では、その変化の方向性とは何か？
大きくハードウェアとソフトウェアで大別すると以下のようなことがある。

##ムーアの法則によるハードウェアのスペックの爆発的な進化
ex. 世界には５台計算機があれば世界中の計算需要を満たせるといわれていた
　→実際には去年のコンピュータの出荷台数１０億台(注：講演でも適当な数値と言われていたが、実際には2015年時点でPC・タブレットとスマホ合わせて年間17億ちょっとのようだ)

ex.パソコンのメモリは640kbで十分(1980年代)
　→現在のPCのメモリはギガ単位

半導体集積度が２年で２倍、性能は18ヶ月で２倍になるような世界。
２０年前の１部屋分のスパコンの４倍の性能がiphone6といったらわかりやすいだろうか。

未来もおおよそこの流れの延長線上にあると考えると、

- 超低価格コンピュータが
- 超大量につくられ
- それが超高速ネットワークでたくさんのコンピュータとつながっている

そんな世界になっているはず。

２０年前と現時点に比較で、
クロック数１５０倍
メモリ２０００倍
HD　３２００倍
コア(CPU)数４倍

こういう変化が未来まで進むと・・・という風に思考を進めていくとよい。


##ハードウェアの進化でソフトウェアの進化が加速する
ハードウェアの進化に伴いソフトウェアもそれに合わせて進化していく。
FORTRANから始まって、LISP COBOL C Smalltalk Erlang Java JavaScript PHP Rubyなどを軽く紹介していく。

その上で言語の進化とは「できなかったことができるようになる」ようなことだ、とのこと。
ここでいう「できなかったことができるようになる」というのは、仕様上不可能だったことが可能になる、ということではなく、人間の脳に負担が大きすぎて仕様上可能でも実現は不可能だったことが可能になることを指す。

例えば、アセンブラだけでアルゴリズムを組んでTwitterを作ることは理論上可能かもしれないが、人間の脳がボトルネックになって到底不可能である、ということ。

これを別の言葉で言い換えると、プログラムをより抽象的かつ簡潔に書けるようにすることで、環境に適応しやすくするという流れがソフトウェアの進化の方向性として存在する。

##未来へのキーワード
コンピュータの未来を表す言葉として、いろいろな単語が現れている。
これらの言葉はまだ言葉の定義がはっきりと定まっていない、いわゆるバズワードだがどうしてそういう言葉が注目を浴びるようになってきているのか、これからそうしたバズワードで表現されるような内容が課題やチャレンジであると思っている人がいるよという風に捉えて本質を理解することができれば、有効に扱うことができる。


##その他
今後もいろいろ新しい技術がでてくる。
そうした新技術を身につける力はエンジニアには大事。
ただし、新技術なんてものは（みんな知らないので）親切に教えてもらえない
なので、新技術を習得するために求められる力とは

- 調べる力（≒ググり力）
- 調べたことを理解する力

また、未来を予測する上で重要な要素は世界観。
世界観とはコンピュータのビックピクチャというか大枠がわかっているということ。
こういう課題が起きてきて、こういうソリューションが必要だとか考えられる。
大枠を把握していると新しい技術が大きなジグソーパズルのどこにはまるかが理解できるようになる。

なので、どんどん変わるもの（新しい技術要素とか）より変わらないものの方が大事。

- コンピュータサイエンス
- アルゴリズムとか
- アーキテクチャとか
- 基本プロトコルとか
- 人間の特質

そういったことを学んだ方がいい。

##最後に
 あなたが作っているものはあなたのアプリ専用のDSLを作ることだ。
 言語をデザインするという考えでソフトウェア開発に当たるといいと思うよ!
Innovation Culture 创新文化


##### Michael Eagleton

<img src="https://mmbiz.qlogo.cn/mmbiz/wfudO17oBgBqHy8yfnicicbkqlJYVuhmr0lCZyH5BZfMK2IHD8Cl5ibAGSPE6W5FPeJbkM8e6z5KOP0ZPia4hkoWQQ/0" />

Michael Eagleton是IAOIP美国创新专业协会核心专家、中国创新研究所总经理

### 犯错是很重要的文化

- 犯错能够发现惊喜
- 犯错是创新的土壤
- 促进我们不断拷问自己
- 很多我们认为对的东西可能被时间证明是错的

### 创新的根源在于问问题

- 问题越多离真相越近
- 发现新问题的视角

### 问“为什么”

为什么？为什么不？

你的简单的问题让不可能变可能

- FARELESS：无惧，不要怕提问题
- HONEST：善意
- TEAM：多样性、差异性、互补性
- REFLECT：让自己获得短暂的放松
项目模板1.0


###### 项目名称释义


## 项目背景

- 项目痛点
- 解决方案
- 预期目标

## 项目一期目标

1. 子项目目标A
* 子项目目标B
* 子项目目标C
* 子项目目标D




## 项目信息

<table width="100%">
    <thead>
        <tr>
            <th colspan="6">项目基本信息</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>项目名称</td>
            <td colspan="5"></td>
        </tr>
        <tr>
            <td>项目经理</td>
            <td colspan="2"></td>
            <td>产品线</td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td>项目成员</td>
            <td colspan="5"></td>
        </tr>
        <tr>
            <td>种子用户</td>
            <td colspan="5"></td>
        </tr>
        <tr>
            <td width="60">项目描述</td>
            <td colspan="5">
<p>1. 描述A</p>
<p>2. 描述B</p>
<p>3. 描述C</p>
<p>4. 描述D</p>
			  </td>
        </tr>
        <tr>
            <td>项目空间</td>
            <td colspan="5">相关链接</td>
        </tr>
        <tr>
            <td rowspan="10">项目计划</td>
            <td width="10%">序号</td>
			  <td>任务名称</td>
			  <td width="16%">开始时间</td>
			  <td width="16%">结束时间</td>
			  <td>相关人员</td>
        </tr>
        <tr>
            <td>1</td>
			  <td>需求、交互评审</td>
			  <td>2015-06-10</td>
			  <td>2015-06-10</td>
			  <td>人员</td>
        </tr>
        <tr>
            <td>2</td>
			  <td>前后台接口设计与确认</td>
			  <td>2015-06-10</td>
			  <td>2015-06-17</td>
			  <td>人员</td>
        </tr>
        <tr>
            <td>3</td>
			  <td>路由器配置功能实现</td>
			  <td>2015-06-17</td>
			  <td>2015-06-24</td>
			  <td>人员</td>
        </tr>
        <tr>
            <td>4</td>
			  <td>独立UI界面模块剥离</td>
			  <td>2015-06-17</td>
			  <td>2015-06-24</td>
			  <td>人员</td>
        </tr>
        <tr>
            <td>5</td>
			  <td>后端接口实现</td>
			  <td>2015-06-17</td>
			  <td>2015-06-30</td>
			  <td>人员</td>
        </tr>
        <tr>
            <td>6</td>
			  <td>mock规则设置与搜索交互等</td>
			  <td>2015-06-29</td>
			  <td>2015-07-10</td>
			  <td>人员</td>
        </tr>
        <tr>
            <td>7</td>
			  <td>代理与UI联调</td>
			  <td>2015-07-11</td>
			  <td>2015-07-15</td>
			  <td>人员</td>
        </tr>
        <tr>
            <td>8</td>
			  <td>数据分析页面实现</td>
			  <td>2015-07-01</td>
			  <td>2015-07-10</td>
			  <td>人员</td>
        </tr>
        <tr>
            <td>9</td>
			  <td>代理数据与后端接口联调</td>
			  <td>2015-07-11</td>
			  <td>2015-07-15</td>
			  <td>人员</td>
        </tr>
    </tbody>
</table>
Swift 文字型に関して



##文字型とは??と疑問を持ったため学習
```
Constant and variable names can contain almost any character, including Unicode characters:
定数と変数名には、Unicodeの文字を含む大抵の文字型を含めることができます。
```


```
Swiftでは、文字列を扱う型「String」、文字を扱う型「Character」が存在する。

let myString: String = "okarin" //変更できない文字列
var myString: String = "daru loved moe!!" //変更できる文字列

let myCharacter: Character = "BBA" // 変更できない文字
var myCharacter: Character = "ABB" // 変更できる文字
```

```
Swiftの文字型には、Character / UnicodeScalar / UInt8 / UInt16 / CChar がある
第一の文字型であるCharacterは他の表現では複数の値になる可能性がある
それぞれの型は暗黙の変換は原則としてできないし、明示的な変換も注意が必要
```

文字を扱うのにも型が複数あるんですね。


参考URL
http://qiita.com/gfx/items/e739b2d38b3a7423a86d
http://www.sololearn.com/Play/Swift　
http://inaka-gurashi.hatenablog.com/entry/%E3%83%87%E3%83%BC%E3%82%BF%E3%82%B5%E3%82%A4%E3%82%A8%E3%83%B3%E3%83%86%E3%82%A3%E3%82%B9%E3%83%88%E3%81%AB%E3%81%AA%E3%82%8B%E3%81%AB%E3%81%AF
VirtualBoxとVagrantを使って開発環境（仮想マシン）の構築

![963dd071-cdbb-35d7-666b-489ac950fbd3.png](https://qiita-image-store.s3.amazonaws.com/0/38342/8eee6ee1-0c32-a1e2-6e32-bcebf7718118.png)


# はじめに
```
個人のローカルPC環境などに、開発環境（仮想マシン）を作ります 

VirtualBox と Vagrant を利用して今までより簡単に、さらに環境を使い捨てしてしながら、常にきれいな環境で開発ができます。
VirtualBox は Oracle 社が提供するフリーの仮想マシンです。
Vagrant は仮想マシン VirtualBox をコマンドラインで簡単に操作できる Ruby のツールです
```

## 構築手順

以下の作業をローカル PC 環境で順に実施してください

### VAGRANT
vagrant をダウンロードしてインストールください
[https://www.vagrantup.com/](https://www.vagrantup.com/)

OSのサポートなどで最新版がインストール出来ない場合は過去バージョンをダウンロードしてください
[https://releases.hashicorp.com/vagrant/](https://releases.hashicorp.com/vagrant/)

### VirtualBox 
virtualbox をダウンロードしてインストールください
[https://www.virtualbox.org/](https://www.virtualbox.org/)

OSのサポートなどで最新版がインストール出来ない場合は過去バージョンをダウンロードしてください
[https://www.virtualbox.org/wiki/Download_Old_Builds](https://www.virtualbox.org/wiki/Download_Old_Builds)

### Vagrantbox

Boxファイルイメージファイルをダウンロードします（15min くらいかかります）
Boxは下記から取得することが出来ます（今回は centos6.4を使用）
http://www.vagrantbox.es/

```
$ vagrant box add {title} {url}
```

```
$ vagrant box add centos64 http://developer.nrel.gov/downloads/vagrant-boxes/CentOS-6.4-x86_64-v20131103.box

```

完了した後、コマンドを叩くと下記のような表示がされればOKです

```
$ vagrant box list
centos64 (virtualbox, 0)
```

### もろもろ設定していきます
Vagrantfile を生成する作業フォルダをつくります（任意のディレクトリでOKです）

```
mkdir workspace
cd workspace
```

Vagrantfile を生成します

```
$ vagrant init centos64
```

Vagrantfileを編集しプライベートネットワークIPを使用できるようにします
29行目付近の "config.vm.network"と書かれたコメントアウトを解除します

```
vi Vagrantfile
```

![スクリーンショット（2015-11-02 23.40.29）.png](https://qiita-image-store.s3.amazonaws.com/0/38342/cda985e5-3e2c-c8b5-5e16-accabbbe800c.png)

サーバーを起動してください

```
vagrant up
```

最後にpingが通るか確認ください。

```
$ ping 192.168.33.10
PING 192.168.33.10 (192.168.33.10): 56 data bytes
64 bytes from 192.168.33.10: icmp_seq=0 ttl=64 time=0.853 ms
64 bytes from 192.168.33.10: icmp_seq=1 ttl=64 time=0.997 ms
```

おつかれさまです。 :kissing_heart: 

## ご参考にさせて頂いたサイト

http://easyramble.com/install-vagrant-virtualbox-on-mac.html
http://qiita.com/IK12_info/items/28ac74bfa92a39e886ef
http://www.unionnet.jp/develop/vagrant-1/
图解设计思考 - 动态动词法


必选

1. 性价比高
- 活动丰富
- 有吸引力
- 可靠的
- 让人意想不到的
- 愉悦的

可选

- 轻松不费力的
- 勤俭的
- 有活力的
- 与众不同的
- 强大的
- 实惠的
- 值得信赖的
- 年轻的
- 时尚的

## 概念分解

什么是动态动词法？

Active Verbs

Alex F. Osborn 脑力激荡法 

1. 选定一个概念
- 将不同动词加诸之上
- 每个动词对应结构性、视觉性变化/变形
[printf]bashでprintfを使う(小数点以下で四捨五入)


```Bash:
read a 
printf '%.3f \n' `echo $a | bc -l `

```

入力された計算式(例えば`-105+50*3/20 + (19^2)/7`みたいな)を計算して小数点以下3桁まで四捨五入して表示したい時のスクリプト。
2015年版Adventarの構成


2015年版Adventarをリリースしたので今年の構成をメモとして残しておく。

http://www.adventar.org/

ちなみにAdventarはソースコード公開したい気持ちもあるんだけど色々めんどいこともあるので二の足を踏んでいる。

## サーバー

言語はRuby。WAFはRails。特に物珍しいものは使ってない。Gemfileはこんな感じ。
https://gist.github.com/hokaccha/6413437122815143f0d0

ホスティングはHeroku。1月〜10月は全然アクセスないので1dynoにしといて、11月と12月だけ2dynoにしてお金払うっていうスタンスだったけど、料金形態変わったのでHobbyプランにした。そこまでアクセスないのでたぶんHobbyで大丈夫だと思うけど厳し書くなったらStandardにあげる。

DBはHeroku PostgresのHobby Planで全然足りてる。あとはNew RelicとPapertrailをFreeで使ってる。Papertrailは11月、12月は全然容量足りないのでとりあえず一番安いプランで課金しといた。あとはAirbrakeとかSentryとかを入れたいと思ってる。

まあサーバーはこんな程度で大したことはしてない。$20/monthぐらいで運用できてるので楽ではある。

## フロント

フロントエンドは今回けっこう構成を変えた。去年まではフレームワークはBackbone.jsで、ライブラリの管理は`vendor/assets/javascripts`にwgetしたやつを置いてAsset pipelineでビルドするっていう温もりのある感じだった。

今年は全部Reactに書き換えて、react-railsのサーバーサイドレンダリングを有効にしてTurbolinksで遷移するようにして、モジュール管理はnpmでやるようにしてビルドはbrowserify-railsとbabelifyでES6な感じで書いた。モダン。

今のところHerokuでreact-railsのサーバーサイドレンダリングは問題ない速度で動いてるけどアクセス増えたらどうなるかな。あと、こんな問題ではまったりもした。

[Herokuでreact-railsのサーバーサイドレンダリングがTimeoutしてハマった話](http://qiita.com/hokaccha/items/fa8bfdd2a97c1b6d662d)

Flux的なのはRedux使おうかと思ってやってみたけど、そんなに複雑なアプリケーションじゃないのでRedux使う方が複雑になりそうだったので、azuさんの[mini-flux](http://azu.github.io/slide/react-meetup/flux.html)的な感じでやった。EventEmitterを継承したStoreとDispatcherを作ってActionを単なる静的な関数を集めたstaticなclassとして定義する程度。このぐらいの小規模なものであれば自分で書いたほうが小回りが効いてよい。

そういうわけで今年もAdventarをよろしくお願いします。
[Android]ActionBarのTitleをJavaから変更する

#なにこれ
IntentからgetExtraしてアクションバーのタイトル変えたいとかあるじゃないですか。
Activity再利用しよう。

#環境
Android Studio 1.4.1
Min SDK Version : API 16 (Android 4.1 (Jelly Bean))
Compile/Target SDK Version : API 23 (Android 6.0 (Marshmallow))
テストした実機 : Xperia Z3 Compact (Android 5.1.1 (Lollipop))

#こうだと思った
```java:Java
// Activity#onCreate
getActionBar().setTitle( "アクションバーのタイトル" );
```
これだと`getActionBar()`でnullなんですよ。

#実はこうでした
```java:Java
// Activity#onCreate
setTitle( "アクションバーのタイトル" );
```

なるほどね。

ちなみに`setContentView()`の後でもOKでした。
chef で undefined method `log_deprecation' エラーの対処

chef 使っててこんなエラーが出たとき。

```
NameError
---------
undefined method `log_deprecation' for class `Class'

Cookbook Trace:
---------------
  /var/chef/cache/cookbooks/compat_resource/files/lib/chef_compat/monkeypatches/chef.rb:6:in `method'
  /var/chef/cache/cookbooks/compat_resource/files/lib/chef_compat/monkeypatches/chef.rb:6:in `log_deprecation'
  /var/chef/cache/cookbooks/owncloud/recipes/default.rb:80:in `block in from_file'
  /var/chef/cache/cookbooks/owncloud/recipes/default.rb:78:in `from_file'

Relevant File Content:
----------------------
/var/chef/cache/cookbooks/compat_resource/files/lib/chef_compat/monkeypatches/chef.rb:

  1:  class Chef
  2:    NOT_PASSED = Object.new if !defined?(NOT_PASSED)
  3:    # Earlier versions of Chef didn't have this message
  4:    module ChefCompatDeprecation
  5:      def log_deprecation(message, location=nil)
  6>>       if superclass.method(:log_deprecation).owner != ChefCompatDeprecation
  7:          if !location
  8:            # Pick the first caller that is *not* part of the Chef or ChefCompat gem,
  9:            # that's the thing the user wrote.
 10:            chef_compat_gem_path = File.expand_path("../../..", __FILE__)
 11:            chef_gem_path = File.expand_path("../..",::Chef::Resource.instance_method(:initialize).source_location[0])
 12:            caller(0..10).each do |c|
 13:              if !c.start_with?(chef_gem_path) && !c.start_with?(chef_compat_gem_path)
 14:                location = c
 15:                break
```

compat_resource の 12.5.11 以上が原因らしい。

なので BerkShelf に `cookbook 'compat_resource', "= 12.5.10"` とか書いて lock ファイル消して再インストールとかすれば OK。

GitHub には metadata.rb に depends 追加とかも書いてる。

https://github.com/chef-cookbooks/compat_resource/issues/7
Ubuntu 15.04以降でiperfをサービスとして設定する

# Unitの設定

```/etc/systemd/system/iperf.service
[Unit]
Description=iperf server
After=syslog.target network.target auditd.service

[Service]
ExecStart=/usr/bin/iperf -s
Restart=always

[Install]
WantedBy=multi-user.target
```

# サービスの有効化

```shell-session
sudo systemctl enable iperf.service
```
python + shapelyを使って東京都内だけに点を生成する


前回の続き
http://qiita.com/motokazu/items/aaa5970ab34044237cc7

前回は特定の地点からの半径で、円を描いてその中に点を生成したが、ある地域だけに生成したいなどなった場合には、円ではだめ。

ということで、[国土数値情報](http://nlftp.mlit.go.jp/ksj/index.html)のShapeファイルを使って東京内に点を生成します。

[ダウンロードページ](http://nlftp.mlit.go.jp/ksj/gmlold/index.html)を開いたら、JPGISを選択して、「行政区域」->「東京」を選択、現状で最新の平成27年を選択。アンケートに記入してダウンロードする。

shapeファイルを[QGIS](http://qgis.org/ja/site/)で開いてみる
![スクリーンショット 2015-11-02 22.02.42.png](https://qiita-image-store.s3.amazonaws.com/0/92491/ee9890c1-abf8-858a-74f5-8db160b619ca.png "スクリーンショット 2015-11-02 22.02.42.png")

東京が表示された！

このshapeファイルを使って、東京に点を打つのである。
処理イメージとしては、
1. 前回のツールで点を打つ
2. shapeファイルを読み込んでおいて shape ファイル内にある点かをチェック
3. shapeファイル内にある点ならOKとする

shapeファイルを読み込んで、使えるようにする
こちらを参考に。
http://stackoverflow.com/questions/7861196/check-if-a-geopoint-with-latitude-and-longitude-is-within-a-shapefile

まずはインストールして使えるように
Shapeファイルの読み込みには fionaを使う

```bash
$ pip install shapely
$ pip install fiona
```

ライブラリを読み込み

```python
# shape
import fiona
from shapely.geometry import Point,asShape
```

shapeファイルを取り出して、Latitude, Longitudeが示す点が shape ファイルにあるかを確認

```python
with fiona.open(shapefile) as fiona_collection:
    shapefile_record = fiona_collection.next()
    shape = asShape(shapefile_record['geometry'])
    
    geolat  = fake.geo_coordinate(center=centerlat , radius=latradius)
    geolong = fake.geo_coordinate(center=centerlong, radius=longradius)
    
    point = Point(geolong, geolat)
        if shape.contains(point):
```


全くcontaints がTrueにならない... と思ったら、shapeファイルが複数のpolygonで構成されている上に、fiona_collection.next() で取ってきているのが1つの区画だけだからだ...きっと

こちらを参考にして、複数のpolygonを融合。助かります！
https://sites.google.com/site/qgisnoiriguchi/vector01/09

QGISを使って結合します。
メニュー「ベクタ」->「空間演算ツール」 -> 「融合」を選択
![スクリーンショット 2015-11-02 22.51.18.png](https://qiita-image-store.s3.amazonaws.com/0/92491/6e68096d-9790-bf3c-9cf8-2d138b888948.png "スクリーンショット 2015-11-02 22.51.18.png")


生成するshapeを選択して、、OK
![スクリーンショット 2015-11-02 22.52.02.png](https://qiita-image-store.s3.amazonaws.com/0/92491/7d2aaa76-ceee-cf94-d16a-b9f9f85bfd46.png "スクリーンショット 2015-11-02 22.52.02.png")


一つなった！
![スクリーンショット 2015-11-02 22.52.53.png](https://qiita-image-store.s3.amazonaws.com/0/92491/92cfb30b-959b-0dbc-a239-3f645fdeb055.png "スクリーンショット 2015-11-02 22.52.53.png")

このshapeファイルを使って点を生成してみる
明らかにcontaintsがTrueになる数が変化した。

最終的なコードはこちら
https://gist.github.com/motokazu/a1cb634aa0d6726039bd

使い方例

```bash
$ python genpointsbygeo.my.py --shapefile Tokyo.shp  --samples 100 --radius 50000
```
Herokuでreact-railsのサーバーサイドレンダリングがTimeoutしてハマった話


react-railsでサーバーサイドレンダリングを有効にしてHerokuにデプロイしたらリクエストがタイムアウトでエラーになるようになった。Rails内でV8動かしてるからさすがにメモリ足りないのかなーと思って2X dynoにしてみたけどダメで、Performance-L dynoっていう14GB RAMの最強のやつ（$500/month）にしたらギリギリ返ってくるようになった。

が、よくよく考えてみるとそんなにメモリ必要なわけないよなーと思って、コード読んだりしてみた結果、browserifyのビルドがリクエスト中に実行されるのが原因だった。

react-railsはサーバーサイドのRednererを`config.react.server_renderer`で入れ替えられるようになっていて、これのデフォルトが`SprocketsRenderer`っていうやつで、こいつはリクエスト時にSprocketsのビルドを実行してサーバーサイドレンダリング用のコードを生成するってやつになっている。

で、今回browserify-railsっていうSprockets内でbrowserifyを実行してビルドするっていうgemを使っていたせいで、リクエスト内でbrowserifyのビルドが走ってTimeoutしていた。

これを解決するのに、こんな感じのRendererを書いた。

```ruby:lib/autoload/server_renderer.rb
class ServerRenderer < React::ServerRendering::ExecJSRenderer
  def initialize(options = {})
    super(options.merge(code: js_code))
  end

  def render(component_name, props, prerender_options)
    if !props.is_a?(String)
      props = props.to_json
    end

    super(component_name, props, render_function: 'renderToString')
  end

  private

  def js_code
    manifest_dir = Rails.application.assets_manifest.dir
    filename = Rails.application.assets_manifest.assets["components.js"]
    filepath = File.join(manifest_dir, filename)
    File.read(filepath)
  end
end
```

これは何をしているかというと、サーバーサイドレンダリング用のJS（`components.js`）をassets:precompileでデプロイ時にビルドしておいて、そのコードをmanifestから探してきてセットしているだけ。

んでproductionではこいつをRendererに指定する。

```ruby:config/initializers/react.rb
if Rails.env.production?
  Rails.configuration.react.server_renderer = ServerRenderer
else
  Rails.configuration.react.server_renderer_options[:files] = ["components.js"]
end
```

これでHerokuのHobbyプランでも全く問題なくサーバーサイドレンダリングが動くようになった。
[Java] カリー化と部分適用


# カリー化

カリー化を調べると、以下のように書いてあります。

>カリー化 (currying, カリー化された=curried) とは、複数の引数をとる関数を、引数が「もとの関数の最初の引数」で戻り値が「もとの関数の残りの引数を取り結果を返す関数」であるような関数にすること（あるいはその関数のこと）である。
>(中略)
>カリー化は部分適用と混同されやすい[1][2]。

wikipedia：[カリー化](https://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%AA%E3%83%BC%E5%8C%96)

つまり、以下の３つの概念（というのかな？）があるわけですよね。

- 部分適用
- 普通の関数をカリー化したもの
- 最初からカリー化された関数として作られたもの

# 準備

ためしに作ってみた。

こんなインタフェースがあるとして…。

```java
import java.util.function.BiFunction;
import java.util.function.Function;

interface F1<T, R> extends Function<T, R> {
	default R x(T t) {
		return apply(t);
	}
}

interface F2<T, U, R> extends BiFunction<T, U, R> {
	/** 部分適用 */
	default F1<U, R> x(T p1) {
		return p2 -> apply(p1, p2);
	}

	/** カーリー化 */
	default F1<T, F1<U, R>> currying() {
		return p1 -> p2 -> apply(p1, p2);
	}
}

interface F3<T, U, V, R> {

	R apply(T t, U u, V v);

	/** 部分適用 (1項目) */
	default F2<U, V, R> x(T p1) {
		return (p2, p3) -> apply(p1, p2, p3);
	}

	/** 部分適用 (2項目) */
	default F1<V, R> x(T p1, U p2) {
		return p3 -> apply(p1, p2, p3);
	}

	/** カーリー化 */
	default F1<T, F1<U, F1<V, R>>> currying() {
		return p1 -> p2 -> p3 -> apply(p1, p2, p3);
	}
}
```

そして、適当な「普通の関数」があるとします。

```java
		// 0. 引数が3つの関数を作る
		F3<String, String, String, String> f = (s, e, v) -> s + v + e;
```

# 部分適用

部分適用とは、以下の 1-1. のような感じ。

```java
		// 1-1. 部分適用する
		F1<String, String> partialFunction = f.x("[", "]");

		// 1-2. 部分適用した関数を使う
		String value1 = partialFunction.x("xyz");
		System.out.println(value1); // "[xyz]"
```

# 普通の関数をカリー化

普通の関数をカリー化するというのは、以下の 2-1. のような感じ。

```java
		// 2-1. 普通の関数をカリー化する
		F1<String, F1<String, F1<String, String>>> curried = f.currying();

		// 2-2. カリー化した関数に部分適用する
		F1<String, String> sandwich1 = curried.x("{").x("}");
        // 2-3. 部分適用した関数をさらに使う
		String value2 = sandwich1.x("abc");
		System.out.println(value2); // "{abc}"
```

# 最初からカリー化されている関数

最初からカリー化されている関数を作るのは、以下の 3-1. のような感じ。

```java
		// 3-1. 最初からカリー化されている関数を作る
		F1<String, F1<String, F1<String, String>>> g = s -> e -> v -> s + v + e;

		// 3-2. カリー化されている関数を使う
		String value3 = g.x("(").x(")").x("123");
		System.out.println(value3); // "(123)"
```
RxSwift の Disposing を理解する

RxSwift のサンプルコードを見ていると 次のようなコードがよく登場します。

```
        textField.rx_text
            .subscribeNext { [weak self] x in
                self?.debug("UITextField text \(x)")
                self?.textField.resignFirstResponder()
            }
            .addDisposableTo(disposeBag)
```

ReactiveCocoa にないメソッドなので 気になって調べました。


# dispose とは

sequence をただちに中断するためのメソッドです。

> https://github.com/ReactiveX/RxSwift/blob/master/Documentation/GettingStarted.md: 

> To cancel production of sequence elements and free resources immediatelly, call dispose on returned subscription.

# 書かないと メモリリークするの？

sequence が Complete もしくは Error を send すると リソースは開放されます。このあたりは ReactiveCocoa と同じですね。

> When sequence sends Complete or Error event all internal resources that compute sequence elements will be freed.

なので 有限時間で完結する sequence は dispose しなくてもリークしないです。もちろん 完結しないと sequence はその間 リソースが確保されます。

> If a sequence terminates in finite time, not calling dispose or not using addDisposableTo(disposeBag) won't cause any permanent resource leaks, but those resources will be used until sequence completes in some way (finishes producing elements or error happens).
> If a sequence doesn't terminate in some way, resources will be allocated permanently unless dispose is being called manually, automatically inside of a disposeBag, scopedDispose, takeUntil or some other way.


というわけで 推奨としては dispose bags を使いましょう。

> we recommend using them in production even though sequence will terminate in finite time.
play2-war-pluginでPlay 2.3.xアプリケーションをAWS Elastic Beanstalkにデプロイする

	
AWS Elastic Beanstalk上にPlay Frameworkのアプリをデプロイする方法として、WARのアーカイブをデプロイする方法があります。ただし、Playは公式にはWARアーカイブをサポートしていないため、サードパーティのプラグイン[play2-war-plugin](https://github.com/play2war/play2-war-plugin)を利用します。

# 前提
* Play Frameworkのバージョン: 2.3.4 （2015年11月1日当時の最新）

# 設定

詳細は以下を参照。
https://github.com/play2war/play2-war-plugin/wiki/Configuration

## plugin.sbt

APP_HOME/project/plugins.sbt にプラグイン設定を追加する。
（注）プラグインのバージョンはPlay Frameworkのバージョンによって変わります。

```
addSbtPlugin("com.github.play2war" % "play2-war-plugin" % "1.4-beta1")
```

## build.sbt

APP_HOME/build.sbt の version 以下に設定を追記する。
（注）Tomcat 8にデプロイ予定のため、サーブレットのバージョンは3.1にしている。

```
version := "1.0-SNAPSHOT"

import com.github.play2war.plugin._

Play2WarPlugin.play2WarSettings

Play2WarKeys.servletVersion := "3.1"
```

# ビルド

以下のコマンドを実行するとwarファイルが作成される。

```
activator war
```

# デプロイ

作成されたwarファイルを Elastic Beanstalkにデプロイする。プラットフォームはTomcatを指定すること。
モデルだけネームスペースをつけずにscaffoldを生成する

管理画面などを自分で作る場合、*admin/blogs_controller.rb*のようなネームスペースのついたコントローラーと、*blog* のようなネームスペースなしのモデルにアクセスするscaffoldを作りたくなります

ありがちな手順は、
```rails generate scaffold blog```
 のようにネームスペースなしでscaffoldを生成したあとで、controllerやviewのファイルを移動して、さらにそれらのファイルがネームスペースなしのモデルを参照するように直していく、というものです

ですが、rails4に搭載されているscaffold_controller generatorを使うと、そんな面倒なことをしなくても最初から適切なscaffoldを生成させることができます

# scaffold_controller

```
$ rails generate scaffold_controller --help
Usage:
  rails generate scaffold_controller NAME [field:type field:type] 
(中略)
Description:
    Stubs out a scaffolded controller, its seven RESTful actions and related
    views. Pass the model name, either CamelCased or under_scored. The
    controller name is retrieved as a pluralized version of the model name.
```

```
(私訳)
7つのRESTful actionと関連するViewを持ったscaffold controllerを生成します。CamelCaseまたはunder_scoredの形でモデル名を渡す事ができます。
controllerの名前は、モデル名に対してpluralized(複数形)されたものが使われます。
```

簡単に言うと、既存のmodelがあるときにそれ以外の部分を作ってくれるscaffold generatorです

# 具体的な手順

　たとえばblogという名前のモデルと、それを参照するadmin/blogs_contoller scaffoldを生成してみます

## modelを生成

```
$ rails generate model Blog title:string status:integer:index content:text
      invoke  active_record
      create    db/migrate/20151102131211_create_blogs.rb
      create    app/models/blog.rb
      invoke    rspec
      create      spec/models/blog_spec.rb
      invoke      factory_girl
      create        spec/factories/blogs.rb
```

## scaffoldを生成

```
$ rails generate scaffold_controller admin/blogs --model-name=blog
      create  app/controllers/admin/blogs_controller.rb
      invoke  haml
      create    app/views/admin/blogs
      create    app/views/admin/blogs/index.html.haml
      create    app/views/admin/blogs/edit.html.haml
      create    app/views/admin/blogs/show.html.haml
      create    app/views/admin/blogs/new.html.haml
      create    app/views/admin/blogs/_form.html.haml
      invoke  rspec
      create    spec/controllers/admin/blogs_controller_spec.rb
      create    spec/routing/admin/blogs_routing_spec.rb
      invoke    rspec
      create      spec/requests/admin/admin_blogs_spec.rb
```

生成されたadmin/blogs_controllerを見ると、ちゃんとネームスペースなしのBlogを参照するように作られています。やったね！

```
class Admin::BlogsController < ApplicationController
  before_action :set_blog, only: [:show, :edit, :update, :destroy]

  # GET /blogs
  # GET /blogs.json
  def index
    @blogs = Blog.all
  end
```