OmniAICreator/Qiita-1.07M huggingface dataset:
新しくRuby on Railsでアプリ作成したらMySQL2周りでエラった時の解消方法


#第１のエラー

まずは、

```
rails new app_name -d mysql
```

でDBをMySQLに指定してアプリを作成した。

で、

```
rake db:create
```

したら以下のエラー出た。

```
Specified 'mysql2' for database adapter, but the gem is not loaded. Add `gem 'mysql2'` to your Gemfile (and ensure its version is at the minimum required by ActiveRecord).
```

いやいや、`Gemfile`にちゃんと`gem 'mysql2'`って書いてますから。

#第１のエラー解決法

いろいろ調べたらバージョンを0.3.20にすれば良いという人がいたのでそうしてみた。

```
gem 'mysql2', '~> 0.3.20'
```

で再度

```
bundle install
rake db:create
```

したらエラーが変わった。

#第２のエラー

次はこんなエラー出た。

```
#<Mysql2::Error: Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)>
```

MySQLサーバー立ち上がってないのかな？と推測した。

#第２のエラー解決法

```
mysql.server start
```

ってやったら無事 `rake db:create` できた。
MariaDB(MySQL) パスワードリセット

# MySQL

### セーフモードでの起動

```bash
service mysqld stop
→プログラムの停止

mysqld_safe --skip-grant-tables &
→セーフモードでの起動

mysql -u root
→rootでログイン（パスワードなし）
```

### rootのパスワードをクリア

```bash
use mysql;
→mysqlデータベースを選択

update user set password=PASSWORD("") where User='root';
→rootアカウント全てのパスワードを空に設定

flush privileges;
→権限設定の反映

quit
→ログアウト

service mysqld stop
→プログラム（セーフモード）の停止
Shutting down MySQL..151204 14:21:44 mysqld_safe mysqld from pid file /var/run/mysqld/mysqld.pid ended
 SUCCESS!

service mysqld start
→プログラム（通常モード）の起動
```

# rootパスワードの設定

```bash
/usr/local/mysql/bin/mysql -u root -p
→パスワードなしでログインできること
```

```
再設定手順
```


# 参考

http://liginc.co.jp/web/programming/mysql/87393
pip install でUnicodeDecodeError が発生した際の対処（日本語を含むパスで）

## 背景

ユーザ名で日本語を設定しているWindows環境で 

```
pip install <Library名>
```

 を実行した際，pythonのsite-packagesに含まれる ntpath.pyでUnicodeDecodeErrorが発生しました．
（原因はどうやら appdata フォルダにファイルを書き込む際，日本語が含まれるとエンコードに失敗することのようです）

icoxfog417さんの[pipでUnicodeDecodeErrorが発生した際の対処法](http://qiita.com/icoxfog417/items/94f1dd61d02e59a5c1ec)という投稿を参考にさせていただき，日本語でない管理者アカウントを新規作成して pip install を実行したところ，うまくいきました．

しかし，できれば日本語のアカウントのまま pip install したかったため，以下の修正を加えました．

C:/Python27/Lib/site-packages 内に sitecustomize.py という名のファイルを作成して

```py
import sys
sys.setdefaultencoding("cp932") # デフォルトのエンコーディングをshift-jisに変更
```
というコードを追記します．コマンドプロンプトを再起動して，pip install を実行するとうまくいきました．

### 参考
http://bugs.python.org/issue9291#msg206938
どうやら他言語のユーザでも問題が生じているようです．
templateを使う時にコケた話

### はじめに
この記事は[初心者C++アドベントカレンダー](http://www.adventar.org/calendars/922)10日目の記事です。

### 注意
この記事に書かれているのは、テンプレートのコードを書く時ではなく、**使う**時に気をつけることです。
というか、そもそも人によっては注意しなくてもひっかからなかったりします。

### 書いたコード
```cpp:swap.cpp
template <class T>
void swap(T& a, T& b)
{
    T tmp = a;
    a = b;
    b = tmp;
}
```
```cpp:swap.hpp
template <class T>
void swap(T& a, T& b);
```
```cpp:main.cpp
#include <iostream>
#include "swap.hpp"

int main()
{
    int a, b;

    std::cin >> a >> b;
    swap(a, b);
    std::cout << a << " " << b << std::endl;

    return 0;
}
```

### 使ったコマンドと結果
`$ g++ -c swap.cpp`
`$ g++ -c main.cpp`
ここまではちゃんとできた。
`$ g++ main.o swap.o`

```
main.o:main.cpp:(.text+0x41): undefined reference to 'void swap<int>(int&, int&)'
main.o:main.cpp:(.text+0x41): relocation truncated to fit: R_X86_64_PC32 against undefined symbol `void swap<int>(int&, int&)'
collect2: error: ld returned 1 exit status
```
は？？？？

### エラーの原因
`$ g++ -c swap.cpp`
これだった。
テンプレートは**宣言や定義だけじゃなくて実体も含めてオブジェクトファイルを作らないといけない**から、`main.cpp`に`swap.cpp`の中身を突っ込む必要がある。
調べたら、ヘッダーの中で更に隠しヘッダーをインクルードすることで実装を隠すテクニックがあるんだとか。
こんな感じになるのかな？

```cpp:swap.hpp
template <class T>
void swap(T& a, T& b);

#include "swap_implement.hpp"
```

```cpp:swap_implement.hpp
template <class T>
void swap(T& a, T& b)
{
    T tmp = a;
    a = b;
    b = tmp;
}
```

特殊化とかすれば大丈夫なんだろうか…
CS-Cart: PHPフックで呼び出される優先度を指定する

CS-CartにはPHPフックという機構があり、アドオンからコアの振る舞いを変更することができる。フックポイントにアドオンのコールバックを登録しておくと、そのコールバックが呼び出される。

```php
fn_register_hooks(
    'update_product_pre',
    'update_product_post',
);
```

1つのフックポイントを複数のアドオンで共有するわけだが、コールバックには呼び出される順番がある。上記のように、フックポイントへの登録だけの場合、暗黙的にアドオンのpriorityがコールバック実行の優先度になる。アドオンのpriorityはaddon.xmlで宣言したものだ。


場合によっては、他のアドオンよりも先に(あるいは最後に)コールバックを実行してほしいことがある。そうした場合には、フックポイント名とpriorityのタプルを`fn_register_hooks`に渡すことで、コールバックの優先度を明示することができる。

```php
fn_register_hooks(
    ['update_product_pre', '1'],
    ['update_product_post', '9999999']
);
```
在 Swift 幫 UITableView 或 UICollectionView 註冊 cell class

在 Objective-C 的時代，如果要幫 `UITableView` 或 `UICollectionView` 註冊一個 cell 來用，需要寫像這樣的東西：

``` objc
[self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:"UniqueCellIdentifier"];

// 或是

[self.collectionView registerClass:[UICollectionViewCell class] forCellReuseIdentifier:"UniqueCellIdentifier"];
```

# In Swift

來到 Swift 之後，我直覺的寫了像這樣的東西，結果是無法使用的：

``` swift
self.tableView.registerClass(UITableViewCell.class, forCellWithReuseIdentifier: "UniqueCellIdentifier")
```

這時候 Xcode 即時除錯的編輯器對這一行就有些微詞了：

``` txt
Consecutive statements on a line must separated by ';'
Expected ',' separator
Expected ')' in expression list
Cannot invoke 'registerClass' with no arguments
Expected identifier in class declaration
Expected member name following '.'
Expected expression in list of expressions
```

一看起來有點像是 Xcode 看到不懂的東西就開始胡言亂語。不過也有點像是碰到 `class` 這個關鍵字就開始噴出相對應有可能的錯誤出來，不過這串錯誤對當前的使用方式卻是一點關係也沒有。

## 於是就問了一下 Google 大神，就發現

把 `UITableViewCell.class` 換成

``` swift
UITableViewCell.self
```

這樣子，就可以了。

雖然語意上長得有點奇怪，但是這樣就可以 run 起來了

## 最後，組合起來

``` swift
self.tableView.registerClass(UITableViewCell.self, forCellWithReuseIdentifier: "UniqueCellIdentifier")

// 或是

self.collectionView.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: "UniqueCellIdentifier")
```

這樣， Xcode 的編輯器就不再抱怨，按下 `command` + `R` 也 build 的起來了 :tada: 

# 參考

- http://stackoverflow.com/a/24110916/1583560
新卒研修で作ったアプリケーションをNode.jsで書き直していく話(序章)

# はじめに
この記事は株式会社アイスタイルアドベントカレンダーの11日目の記事です。

2日目に「[複数の言語を同時に触ることになった俺は](http://qiita.com/ktarow/items/b5f33c573873e6829b0e)」という記事を書いた@ktarowが再度お送りします。

今回のタイトルは__「新卒研修で作ったアプリケーションをNode.jsで書き直していく話(序章)」__です。

言語選びは慎重に！と先日の記事内で言っておきながらと思うかもしれませんが、__完全に個人的な趣味__として書き直すので、そのへんはあしからず。

とりあえず次章から弊社の新卒研修について説明していきたいと思います。

# 新卒研修について
私は、株式会社アイスタイルに新卒として入社しました。(ただいま新卒2年目です！)
おそらくどの企業でもあるともいますが、弊社にも新卒研修があります。

私達が配属される技術開発部では、毎年、座学や複数あるチームでのOJTを行いながら、__同期とともにWebアプリケーションの開発__を行います。

私の代は、私を含め2名の新卒エンジニアが入社しているの2人でのチーム開発になりました。
(ちなみに、今年は初の新卒デザイナーが採用されたので、3人でアプリケーションの開発を行っていました！)

新卒研修では、このWebアプリケーションを開発するための基本的な知識を身につけていきます。

# 開発するWebアプリケーションについて
開発するWebアプリケーションは、基本的に__今ある社内での課題を解決する__という目的にそって企画や設計、開発を行います。
また、開発はスクラムを用い、教わりながらバックログを作成したり、短いスプリントを回していきます。
(この辺の詳しい内容は社内のスクラムマスターである、@trtrakiさんがアドベントカレンダーに書いてくれると思います。)

さて、そんななか私たちが選定した課題はというと・・・

__コーヒーの注文・発注・引換管理をWebで簡単に行えるようにしたい！__

というものです。

# 社内のコーヒー事情について
弊社には、ネス○フェアンバサダーを担っている社員が在籍しているため、毎月定期的にコーヒーのカプセルの注文を行うことができます。

注文したカプセルは、バリスタマシーンでいつでも利用でき、美味しいコーヒーがいつでも飲めるようになっています。(バリスタマシーンも提供してくれています。便利！)

![IMG_4486.JPG](https://qiita-image-store.s3.amazonaws.com/0/23741/8fe5706d-059f-ffe6-b514-ff5799adc7c0.jpeg)


また、コーヒー以外にもお茶や紅茶なども注文することができます。

これらのカプセルの注文や発注、引換は私が入社した時点では、すべて__社内の共通フォルダ内のエクセルファイル__で管理されていたため、非常に不便でした。

# 技術選定と仕様について
開発は下記のような構成で行いました。

|       |構成   |
|:-----:|-----|
|言語    |PHP (5.4)|
|WAF |CakePHP (2.x}|
|DB  |MySQL (5.x)  |
|OS  |CentOS 6.4   |

特にこれといってこだわりをもった技術選定は行っていません。
(あのころの私は無知だった…)

また、仕様は下記の通り。

|機能|詳細|
|:-----------:|---|
|新規登録機能|ユーザーの新規登録|
|マイページ|発注、購入履歴を確認できるページ|
|注文機能|カプセルの注文機能。定期便と臨時便があります。(値段が違います！)|
|管理者機能|アンバサダーの方が、商品追加、商品引換、発注処理を置こうためのページ。アンバサダーのフラグをもったユーザーがマイページ内から利用します。|

そんなこんなで、約2ヶ月間かけて作成したアプリが以下になります！！！(一部抜粋)

![cd8e8ac1446735c4202c0d6857049940.png](https://qiita-image-store.s3.amazonaws.com/0/23741/360cfdcd-b026-bbb8-1561-7a050488605d.png)

![c81284a11f924219f91e6d4edc14cd39.png](https://qiita-image-store.s3.amazonaws.com/0/23741/de4177e6-71ca-24ea-daa7-265c458117ee.png)

※デザインは、デザイナーの先輩の力をお借りしました。

# 課題
こういった経緯で開発されたアプリケーションですが、約1年たった今、以下のような課題か浮上しました。

1. __リリースされてから一度もメンテナンスされていない__
2. __一度も利用されることのない機能があり、今後も利用されることはない(臨時便注文機能)__
3. __管理機能を別に分けたい__
4. __新規登録時のパスワードの暗号化アルゴリズムがSHA-1__
5. __紅茶とコーヒーが区別されてない__
6. __発注の際のバッチが手動起動__
7. __テストがない__

ざっと5分間考えただけでも、これだけの課題が・・・
ひどい・・・

# フルスクラッチで書き直す決意
前置きが長かったですが、ここからが本題です(しかもまとめです)。

こちらのWebアプリケーションを今この瞬間から__Node.jsで書き直していきます。__
なぜNode.jsで書き直すのかというと・・・

__Node.js(JavaScript)が久々に書きたかったから__

です。
2日目に言語選定の記事をあげましたが、完全に__趣味コード__であり許可も取得済みなので書きたい言語で書きます。

こちらの進捗については、アドベントカレンダー22日目の「新卒研修で作ったアプリケーションをNode.jsで書き直していく話(最終章)」で発表したいと思います。

Githubのリポジトリはこちら → [ktarow/es2015-app](https://github.com/ktarow/es2015-app)
※アプリ開発終了後リポジトリ名を変更します。

というわけで、主に新卒研修の内容でしたが、これにて今回の記事の締めとさせていただきます！

明日は@nakahararuuさんの「Twitter Bootstrap Tips (Mixin編)」です。
Macでキー入力表示付きのanigifを作成する

Vimのプラグイン紹介などでキー入力を表示しているanigifのスクリーンショットがあるので、作り方を調べてみました。
必要なツールは２つ。
まずキー入力を表示するための
[KeyCast](https://github.com/cho45/KeyCast)

github上でdmgが配布されているので、それをダウンロードしてくれば使えます。
起動すると画面の左下の方に初期メッセージが表示されます。
それをドラッグしてどこに表示するかを決めればOK。
こんな感じのが表示されると思います。
![init_keycast.png](https://qiita-image-store.s3.amazonaws.com/0/1653/b36d4523-b9a9-e2b9-1c4e-197f120c09c1.png "init_keycast.png")

あとはキー入力がそのまま表示されます。
menubarにkeycastのメニューも表示されるので、そこからclearを選ぶと表示されている内容が消去されます。
![keycast_menu.png](https://qiita-image-store.s3.amazonaws.com/0/1653/89d64a2a-a6da-88c1-4f6f-d95a45b66748.png "keycast_menu.png")

次にanigif撮影用の
[LICEcap](http://www.cockos.com/licecap/)
です。
こちらもdmgをダウンロードしてきてインストールするだけです。
起動すると枠が出てくるので、撮影したい場所に配置してrecordを押すと録画されます。やめるときはstop、一時停止もできるようです。
このアプリだとマウスボタンを押したのもキャプチャできるようですが試してはいません。
![licecap.png](https://qiita-image-store.s3.amazonaws.com/0/1653/a410df63-9ba1-7e68-d716-152a943224cd.png "licecap.png")

比較的簡単にキー入力表示をしたanigifが作れたので、何かを紹介するときには使ってみようと思います。
![anigif](http://hinagishi.net/anigif.gif)
Slack (for Windows) でChromeのデベロッパーツールを出す方法

# 背景
いつからだったかChromeのデベロッパーツールが`Ctrl`+`Shift`+`i`を入力しても出なくなってしまった．
でもたまにデバッグしたい時があるので，Chromeデベロッパーツールを出す方法を調べた．

# 結論
## 方法1
Slackの入っているパス(`%LOCALAPPDATA%\slack\app-[version]`)を`%LOCALAPPDATA%\slack\slack-build`という名前にリネームする．
多分コピーしたほうが良いと思う．
一度終了し，`slack-build`の方の`slack.exe`を起動すると，メニューバーの`View`→`Developer`→`Toggle Developer Tools`から表示できる．

## 方法2
コマンドライン引数に`--dev`を付けて起動する．
Windowsのショートカットで起動している場合は，リンク先の末尾に` --dev`を追加すれば良い．
こちらの場合，通常起動で使用していたアカウント情報は引き継がれないので，新しくログインする必要がある．
アカウント情報が削除されるわけではなく，--devを消せば今まで通り使える．また，--devを付けてログインした情報も残っているので，場合によっては切り替えて使える気もする．

# その他情報
コマンドライン引数は他に
`--tests`
`--livereload`
`--log-file`
`--spec-path`
`--startup`
`--resource-path`
があった．
`--resource-path`はapp.asarを展開した先のディレクトリも指定できるのでデバッグに便利．ちなみにこれを指定した場合devModeになる．
MariaDB(MySQL)の基本的なユーザー系コマンド

自分でもよく見ていた記事なので、使いやすくなるようにツール作ってみました。
http://tsunagi.uhoniceguys.com/mysql-command-generator/
ご自由にお使いください。

# ユーザー作成・権限確認・削除
* ユーザー一覧

```
SELECT user,host FROM mysql.user;
```

* フルコントロール権限のユーザー作成

```
GRANT ALL PRIVILEGES ON `dbname`.* TO 'username'@'hostname'  IDENTIFIED BY 'password';
```

* テーブル操作のみの権限のユーザー作成

```
GRANT select,update,insert,delete ON `dbname`.* TO 'username'@'hostname'  IDENTIFIED BY 'password';
```

* パスワード変更

```
SET PASSWORD FOR 'username'@'hostname'=password('password');
```

* 権限の確認

```
SHOW GRANTS FOR ''@'hostname';
```

* ユーザ削除

```
drop user 'username'@'%';
```
ScrollViewと Swipe Gesture Recognizer が両方動くようにする方法

ScrollView上で Swipe Gesture Recognizerが動かなくてハマったので、解決方法をメモします。

#前提：
・iOS9.2, Xcode 7.1.1 環境です。
・Swipe Gesture Recognizerの設置はStoryboardを使って次のように行いました。
　1. StoryBoardで View Controller のViewの中にScrollViewを設置。
　2. ScrollViewの中にViewを設置。=> ContentViewと命名。
　3. ContentView に、Swipe Gesture Recognizerを設置。

---
#解決方法：

##1. Storyboardで ViewController.h にScrollViewのIBOutletを定義する

StoryboardでScrollViewを選択し、Controllキーを押しながらViewController.h にドラッグして、mySctollViewと命名。

```
ViewController.h:
@property (weak, nonatomic) IBOutlet UIScrollView *myScrollView;

```


##2. ViewController.h にDelegateの定義を追加する

２つ書く。
・UIScrollViewDelegate
・UIGestureRecognizerDelegate
 

```
@interface SettingViewController : UIViewController <UIScrollViewDelegate, UIGestureRecognizerDelegate>

```

##3. ViewController.m のviewDidLoadに delegate宣言を１行追加する
 

```
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    // Scroll View setting
    self.myScrollView.delegate = self; // <= ★★★ ここ ★★★

```

##4. ViewController.m に以下のメソッドを追加する

```
-(BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer{
    return YES;
}
```
---
これで ScrollView内の Pan Gesture Recognizerと Swipe Gesture Recognizer の両方が動くようになりました。

参考にしたサイトはこちらです。ありがとうございます。
http://d.hatena.ne.jp/Mitsuyoshi/20131118/1384753107
http://stackoverflow.com/questions/23841045/how-to-have-a-uiscrollview-scroll-and-have-a-gesture-recognizer
http://stackoverflow.com/questions/6425785/uigesturerecognizer-over-uiscrollview
CreateJS  Bitmapクラスで画像描画→ボタンクリックでTween


ご縁がありCreateJS勉強中。

下記、gifのように
丸を描画して、それをクリックすると
イカ画像がTweenするコードです。

Bitmapクラス、Tweenの扱いの参考メモです。


![ikagif.gif](https://qiita-image-store.s3.amazonaws.com/0/76843/3b9bc809-ef8f-f7a4-db87-c6c4ae1bc0a4.gif)




```html:sample
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>イカがTween</title>
</head>
<body>

    <canvas id="canvas" width="1920" height="1140" style="background:aqua;"></canvas>
    <script src="https://code.createjs.com/createjs-2015.05.21.min.js"></script>

    <script type="text/javascript">

        document.addEventListener('DOMContentLoaded', function(){
            create();
        }, false);

        function create(){

            // stage生成
            var stageElm = document.querySelector('#canvas');
            var stage = new createjs.Stage(stageElm);
            // フレームレート設定
            createjs.Ticker.setFPS(30);
            // 1フレームごとに実行
            createjs.Ticker.addEventListener('tick', function(){
                stage.update();
            });


            // Bitmapクラスを使ってイカ画像をステージに表示する
            var ika = new createjs.Bitmap('ika.gif');
            //イカ画像の位置を設定
            ika.set({x:100, y:100});
            // スケールも変更できるみたいす
            ika.scaleX = 0.5;
            ika.scaleY = 0.5;
            // イカ画像をステージに追加
            stage.addChild(ika);


            // イカ動かすようのボタン描画
            var graphic = new createjs.Graphics();
            graphic.beginFill('deeppink') // 色
            .drawCircle(50, 50, 30); // 円の位置とサイズ (x1,y1,size)
            var btnShape = new createjs.Shape(graphic);
            stage.addChild(btnShape);


            // ボタンにmousedownイベント
            btnShape.addEventListener('mousedown', function(evt){
                ikaTween();
            });

            // イカのtween
            function ikaTween(){
                 createjs.Tween.get(ika).to({x: 500, scaleX: 1, scaleY: 1}, 1000)
                                        .to({x: 100, scaleX: 2, scaleY: 2}, 1000)
                                        .to({x: 100, scaleX: 0.5, scaleY: 0.5}, 1000)
                                        .to({alpha: 0}, 500)
                                        .to({alpha: 1}, 500);
            }

        }
    </script>
</body>
</html>
```
phpでDBから取り出したJson文字列のJson_decodeに失敗する。。

#phpでDBから取り出したJson文字列のJson_decodeに失敗する。。

環境ではなく、ケース依存のようだ。
とあるControllerを経由したときだけ、json_decodeできないケースが発生する。
以下を確認しつつ、頭をひねる。
0. 文字列的には何の問題もなさそうだ。単なるString.
1. UTF-8でエンコードされてるようだ。BOMもなし。
2. null文字でも間に入ってるのか？charの除去、詰めなおしも効果なし。
3. json_last_error()で帰ってくるのはJSON_ERROR_SYNTAX。4てやつ。
4. なんだこりゃ？

#サニタイズされてました。

結論から言うと以下のアンサーで直りました。
http://stackoverflow.com/questions/24144159/json-decode-returns-json-error-syntax-in-opencart

```lang:php
$rules = str_replace('&quot;', '"', $rules);
```

ブラウザ上でprint_r()やらDebug::dump()やらしてて見分けられるの・・か？
ソースで見ても`"`が`&quot;`になる訳でもないようだし。。
MpressionのUzukiを使ってみた


# はじめに
Uzukiは、温度センサー、近接照度UV、三軸加速度センサーがセットになったシールドです。
[Arduino UNO](https://www.arduino.cc/en/Main/ArduinoBoardUno)や[KONASHI](http://www.ux-xu.com/product/konashi)と接続できるため、配線が不要です。

詳細はこちら => [Uzuki-IoT Sensor Shield for Konashi & Arduino](http://www.m-pression.com/ja/solutions/boards/uzuki-shield)

![IMG_4121.jpg](https://qiita-image-store.s3.amazonaws.com/0/2432/343a799f-192c-a086-1ada-7a83074d1772.jpeg "IMG_4121.jpg")


# 購入
マクニカオンラインストアから購入できます。
[Uzuki - IoT Sensor Shield for Konashi & Arduino MP-UZK001B](https://store.macnica.co.jp/products/mpression_mp-uzk001b)
価格は1,980円です。

# 検証環境
## OS
Yosemite 10.10.5

## Arduino IDE
Arudino 1.6.5

## ボード
Arduino UNO

# ドキュメント

Arduino/konashiとの接続する方法は以下のドキュメントが参考になります。
[Uzuki Getting Started](http://www.m-pression.com/ja/c/document_library/get_file?uuid=541bcf44-3d0a-4e92-ab21-a5828d6ac638&groupId=10157)

注意点：
出荷時では、Arduinoはkonashi用になっています。
Arduinoで使うためには、ジャンパーピンを入れ替えてください

# ArduinoでUzukiを使う

## si7013ライブラリのインストール


### 保存先の確認
Arduino > Preferences

スケッチブックの保存場所(例): `/Users/saicologic/Documents/Arduino`

ユーザー用のライブラリーフォルダーに移動
※好きなフォルダーの場所を指定する。librariesがなければフォルダーを作成する


例： 

```
$ cd /Users/saicologic/Documents/Arduino/libraries
```



### si7013_Arduino_Libをインストールする
温湿度センサーサンプル（Uzuki_Si7013)を使うために必要です。

```
$ git clone git@github.com:JoeSc/si7013_Arduino_Lib.git
```

### Adafruit_SI1145_Libraryをインストールする
近接照度UVインデックスセンササンプル（Uzuki_Si1145）を使うために必要です。

```
$ git clone git@github.com:adafruit/Adafruit_SI1145_Library.git
```

# サンプルを使う

お好きなところのディレクトリーに移動。インストールしたライブラリーの場所とは別でもOKです。

```
$ cd /Users/saicologic/Documents/Arduino
```

## 温湿度センサ

```
$ git clone git@github.com:mpression/Uzuki_Si7013.git
$ cd Uzuki_Si7013
$ open ./Uzuki_Si7013.ino
```

ビルド&コンパイル

### シリアルコンソールの結果

9600bps

```
Humidity = 40.53
Temperature From Humidity Reading = 23.23
Temperature = 23.25
```

## 近接照度UVインデックスセンサ

```
$ git clone git@github.com:mpression/Uzuki_Si1145.git
$ cd Uzuki_Si1145
$ open ./Uzuki_Si1145.ino
```

ビルド&コンパイル

### シリアルコンソールの結果

9600bps

```
Adafruit SI1145 test
OK!
===================
Vis: 262
IR: 260
UV: 0.03
```

## ３軸加速度センサ

```
$ git clone git@github.com:mpression/Uzuki_ADXL345.git
$ cd Uzuki_ADXL345
$ open ./Uzuki_ADXL345.ino 
```

ビルド&コンパイル

### シリアルコンソールの結果

57600bps

```
x: : 126
x: 1 y: -2 z: 125
x: 1 y: -3 z: 126
initx: 1 y: -2 z: 126
x: 8 y: -47 z: 126
x: -59 y: 1 z: 93
x: -116 y: 10 z: 42
```
R Markdownで直接Wordドキュメント生成

## この記事の目的
私が大好きなRMarkdownについて、Tipsを集中的に連載しようという思いつきの企画です。あと自分の中で進めている別企画のメモという位置づけでもあります。なので**大した中身はありません**。

### R Markdownとは
Markdown記法をベースに、チャンクという形でRのコードを記述して評価・出力することができるものです。RStudioのクイックリファレンスでは以下のように説明してあります:

> R Markdown is an easy-to-write plain text format for creating dynamic documents and reports. 

## 「.docxで出せ」って言われました
R Markdownを使えば、非常に効率的にRの出力を含めたhtmlドキュメントを作成できます。でも自分の周りでは「htmlがドキュメント? 何いってんの? さっさとWordで渡しなさい」とよく言われます。

ではせっかくRで作成した結果をいちいちWordなどに出力するとなると、もう大変です。手作業による面倒さやコピペ汚染から免れられません。

こんなときは、Rmdから直接.docxを出力するのを試してみてください。[^1]

[^1]: docなんて現時点ではありえません。認めません。

## output: word_document
以下のようにすれば、出力はdocxファイル形式で出力されます:

```
---
title: "hoge"
output: word_document
---
```

そうです、`output: word_document`とするだけで、自動的にdocx形式で出力してくれるようになります。これはデフォルトのRmdをまず一度やってみて、その出来上がりを確認してみてください。

## 設定
結構色々設定できます。まず使えるオプションについては、以下のページをご覧ください:

- [R Markdown Reference Guide(pdf)](http://www.rstudio.com/wp-content/uploads/2015/03/rmarkdown-reference.pdf)

docxはcssを設定しても反映されません。このへんが厄介ですが、すでに設定をしたdocxファイルを参照して当てることができます:

```
---
title: "Habits"
output:
  word_document:
    reference_docx: mystyles.docx
---
```

このように`reference_docx: `でスタイルを参照させたいファイルを指定してください。なおこの書式スタイルを一から作っていくのはかなり大変ですので、以下の手順をオススメします:

1. とりあえずRmdをdocxで出力
2. そのdocxを開、スタイルを編集
3. docxを名前を付けて保存し、`reference_docx: `で指定する

なお、ここでいうスタイルとは、Wordの[ホーム]タブにある「スタイル」グループが指すものです。大丈夫ですよね。。[^2]

[^2]: もしこの意味がわからないのでしがら、まずはそこから調べてください。

この他にもいろいろできます。詳しくは以下のリンク先を参照してください:

- [Word Documents](http://rmarkdown.rstudio.com/word_document_format.html)

Enjoy!
Windows の Emacs で Myrica フォント(等幅)を使う

# 動機

Windows 標準フォントの `Consolas` だと、Markdown で表を書くとき、半角・全角がきれいに揃わなかった。

![consolas.png](https://qiita-image-store.s3.amazonaws.com/0/104952/29af33f6-2839-39a7-7986-a01610b44749.png)

# 解決

[Myrica](http://myrica.estable.jp/) を使ってみた。フォントのインストールは [Microsoft 公式](http://windows.microsoft.com/ja-jp/windows7/install-or-delete-fonts) を参照。

↓の設定を追加。

```el
(add-to-list 'default-frame-alist '(font . "Myrica M"))
```

こんな感じになりました。

![myrica.png](https://qiita-image-store.s3.amazonaws.com/0/104952/1d149ab4-2f91-8f1b-8c5c-910877d3c780.png)
Packageの使い方

x10にはJavaと同様にpackageという「複数のクラスをまとめたもの」を扱う仕組みがある。
C++のnamespace、RubyのModuleのようなもの。

以下のようにpackage [package名]; と書くことにより、このクラスがどのpackageに属するか宣言する。
packageがない場合は、デフォルトパッケージ（無名パッケージ）に属することになる。

例えば、Package01という自前のpackageの中にクラスを作りたい場合は、ファイルの配置を以下のようにする。

```
├── Main.x10
├── Package01
│   ├── MyClass1.x10
│   └── MyClass2.x10
├── Package02
│   └── MyClass2.x10
```

```x10:Main.x10
import Package01.MyClass1;        // importすると、そのクラスをパッケージ指定なしで参照できる

class Main {

  public static def main(args: Rail[String]) {
    MyClass1.hello();             // Package01.MyClass1 と書く必要がない
  }
}
```

```x10:MyClass1.x10
package Package01;                // このクラスがどのpackageに属するか宣言する

public class MyClass1 {           // "public"を指定する必要がある。
                                  // 指定しないと同一のpackageのクラスからのみ参照できるクラスになる。(package-private)
  public static def hello() {
    MyClass2.hello();             // 同一のPackageに存在するクラスは、package名を指定しなくても良い
    Package02.MyClass2.hello();   // 他のpackageのクラスは、full class nameで指定する必要がある。
  }
}
```

```x10:Package01/MyClass2.x10
package Package01;
import x10.io.Console;

public class MyClass2 {

  public static def hello() {
    Console.OUT.println("Hello from Package01");
  }
}
```

```x10:Package02/MyClass2.x10
package Package02;
import x10.io.Console;

public class MyClass2 {

  public static def hello() {
    Console.OUT.println("Hello from Package02");
  }
}
```

コンパイルと実行結果は以下のとおり

```shell-session
$ x10c++ Main.x10
$ ./a.out
Hello from Package01
Hello from Package02
```

もしもクラス指定にpublicをつけ忘れると以下のようなエラーが出る。

```shell-session
/.../Main.x10:1: Class is not accessible.
     	 Class: Package01.MyClass1
/.../Main.x10:6: Could not find MyClass1
/../Main.x10:6: No valid method call found for call in given type.
     	 Call: hello()
     	 Type: MyClass1
3 errors.
```
bundleコマンドのジェネレータでgemを作った際のファイル追加で気をつけること

掲題の通りで、bundlerのジェネレータで作成した雛形をベースにgemの開発を行っていました。自前のクラスを追加して（下記の`client.rb`）動かそうとしましたが、規則を守っているのになぜか読み込まれない、という状況でハマっていました。

```
.
└── test_gem
    ├── Gemfile
    ├── Gemfile.lock
    ├── README.md
    ├── Rakefile
    ├── bin
    │   ├── console
    │   └── setup
    ├── test_gem-0.1.0.gem
    ├── test_gem.gemspec
    ├── lib
    │   ├── test_gem
    │   │   ├── client.rb # 読み込まれない
    │   │   ├── config.rb
    │   │   └── version.rb
    │   └── test_gem.rb
    └── spec
        ├── test_gem_spec.rb
        └── spec_helper.rb
```

以下の`gemspec`ファイルを眺めていると、

```rb:test_gem.gemspec
# coding: utf-8
lib = File.expand_path('../lib', __FILE__)
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
require 'test_gem/version'

Gem::Specification.new do |spec|
  spec.name          = "test_gem"
  spec.version       = TestGem::VERSION
  spec.authors       = ["Yuichi MINOWA @Unicast Inc."]
  spec.email         = ["yuichi.minowa@u-cast.com"]

  spec.summary       = %q{get properties data from XXX}
  spec.description   = %q{get properties data through XXX Search API}
  spec.homepage      = "http://www.unicast.ne.jp/"

  # Prevent pushing this gem to RubyGems.org by setting 'allowed_push_host', or
  # delete this section to allow pushing this gem to any host.
  #if spec.respond_to?(:metadata)
  #  spec.metadata['allowed_push_host'] = "TODO: Set to 'http://mygemserver.com'"
  #else
  #  raise "RubyGems 2.0 or newer is required to protect against public gem pushes."
  #end

  spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
  spec.bindir        = "exe"
  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
  spec.require_paths = ["lib"]

  spec.add_development_dependency "bundler", "~> 1.10"
  spec.add_development_dependency "rake", "~> 10.0"
  spec.add_development_dependency "rspec"

  spec.add_development_dependency 'activesupport'
end
```

`spec.files`の記述が目に止まりました（以下）。この設定だと、gitの管理下になっていないとNGですね。この設定を変えるか、`client.rb`をリポジトリに追加すれば解決しますね。

```rb
spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
```
windowsのコマンドプロンプトでpidを指定してプロセスをkill

つかうときにかぎって忘れているのでメモ

taskkillを使う

`taskkill /PID <pid> `

強制終了なら /Fを追加

http://qiita.com/tomato360/items/22585cff8745fa61d187
Android×ibeaconをやろうとして、最初からつまづいた




## Gradleにライブラリを追加できない

こことかを見ると
http://dev.classmethod.jp/smartphone/android-beacon-library-introduction-1/
beaconのライブラリを追加すればいいんだと思って、早速APPのbuild.gradleに追記したものの、ビルドエラー　"Could not resolve 'org.altbeacon:android-beacon-library:2+@aar'"

結局、何回やってもできなかったので、以下を参考にしてImportしました。
http://qiita.com/rokihiro@github/items/686cd80f83bc5a7d8987

1.ここからAndroidBeaconLibraryを掻っ攫って、Importウィザードで選択。
http://altbeacon.github.io/android-beacon-library/download.html
2.File→ProjectStructureでAppのDependenciesタブを選択。
3.プラス（+）ボタンを押して、3番のModuleDependencyを選択
4.1でインポートしたAndroidBeaconLibraryを選択して終了。
5.ビルドします。

この方法でライブラリを読み込むことができたのですが、なんで一番上の方法→　build.gradleに
    
    dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'org.altbeacon:android-beacon-library:2+@aar'
    }

を追記するやつでうまくいかないのかわからないです。誰か知っていたら教えてください。
Watson NLCとR&Rを使って自動でナレッジ蓄積し質問応答するSlack botを作成してみた【Watson日本語版ハッカソン最優秀賞】

# はじめに
IBMとソフトバンクの共催でWatson日本語版ハッカソンが2015年12月5日-6日で開催されました。
[・Watson日本語版ハッカソン](http://watson-hack.strikingly.com/)


私も本ハッカソンに参戦し、開発したアプリが無事決勝戦に進出しました！
　→(12/17更新)：優勝しました！

あまり多くの情報はまだ公開できませんが、
Watson NLCとR&R活用に関して具体的な例としてご参考ください。

※ Watson NLCとWatson R&Rについては下記記事がよくまとまっていたので合わせてご参照ください
[・BluemixのNatural Language Classifierで文章を分類してみる(日本語)](http://qiita.com/VegaSato/items/24e5196f9466f9d361fc)
[・BluemixのRetrieve&Rankによる質問応答システムを試してみた)](http://qiita.com/VegaSato/items/6d2d03d6a8b42adcf87e)

# 心優しい人工bot　〜喧嘩の仲裁/ナレッジの自動蓄積/日本語で質問応答〜
■コンセプト
拡大するビジネスチャットを組織で活用する際に起こるトラブルをWatsonで解決する

■トラブル
・質問が無視されてイラつく
・質問に回答できる人間が属人化し回答遅延が起きることがある
・同じ質問を何度もしてしまいウザがられる。けど過去の回答を探すのは一苦労

■ソリューション
・ビジネスチャットの代表格「Slack」を活用　※他のチャットツールへの拡張も可能
・SlackにWatson botを追加
・組織内のチャットが荒れるとbotが喧嘩の仲裁をする（形態素解析と感情分析）
・botに質問を投げると回答が返ってくる（Watson NLCとWatson R&R）
・botが知らないナレッジの場合は人に回答を促し、人が回答すると自動でナレッジを蓄積する
・ナレッジ蓄積後NLCとR&Rを定期的にトレーニングすることで自動応答精度が向上させる

# 実装方法
## ・Node-REDでメインの処理を作成
ハッカソンなのでスピード重視でNode-REDを利用しました。
事業化する際は考慮しないといけないことが増えるので、アーキテクチャは再度検討することになるかもしれません。

・Node-RED Libraryから必要なノードを追加する
　[- Node-RED Library](http://flows.nodered.org/)
　　→Slackノード、DBノード(MySQL,PostgresDBなど)
　　　※ Bluemixで作成したNode-REDへのノード追加手順は下記を参考ください。
　　　　[- BluemixのNode-REDパレットにノードを追加する](http://qiita.com/KenichiSekine/items/b2877c90f59774a27827)

・Node-REDのフローを作成する
実際はもっと複雑ですが簡略すると大体こんな感じ。（まだ複雑ですかね？）
![151210-0002.gif](https://qiita-image-store.s3.amazonaws.com/0/90622/072fdd16-a1ab-79e5-222f-d40583079f99.gif)

これ以外にも回答登録機能、フィードバック反映機能、メールでの質問応答機能、トレーニング実行機能、感情解析機能などを実装しました。
細かい解説は割愛させてもらいますが、SlackからのメッセージをNLC及びR&RのREST API用に整形し、http requestすることで、結果を取得することができます。

NLCに関しては下記記事にNode-REDへの自作NLCノード追加の方法について解説されていました。
NLCノードを追加すれば、http requestではなくNLCノードを使って簡単に実装ができるようになります。
[Node-REDにNatural Language Classifierノードを追加する](http://qiita.com/blackaplysia/items/79e278c10d7c07e294b9)

## ・ユーザー質問時の処理
![151217-0001.png](https://qiita-image-store.s3.amazonaws.com/0/90622/f134b582-7028-b293-204d-e981723b5294.png)


Watson NLCで質問のカテゴリーを特定し、カテゴリー別のナレッジをWatson R&Rで用意することで、質問に対する回答精度を向上させるアーキテクチャを組んでいます。
勘のいい方は気づくと思いますが、ユーザーからの質問カテゴリーの種類は膨大になることが予測されます。
カテゴリーの種類が増えた際はNLCを多段構成にしたり、R&R側のナレッジを複数のNLCで共有するなど、NLCとR&Rの連携アーキテクチャはここまでシンプルにはいきません。
しかし、NLCやR&Rを無闇に増やすとナレッジ管理コストやトレーニング回数の増大などで必要なコストも増えることになりますので、最適な構成パターンについては引き続き検証を進めたいと思います。

## ・ユーザー回答時の処理
![151217-0003.png](https://qiita-image-store.s3.amazonaws.com/0/90622/85e4d1fb-06e3-088e-fbff-d6a410ab85bd.png)


Watson NLCで未学習ナレッジだった場合やR&Rで確信度の低い回答だった場合は、ユーザーに回答を促します。Watsonが分からないことを人間がフォローすることで自然とWatsonにナレッジが溜まる仕組みです。
蓄積した回答ナレッジは、NLC及びR&Rトレーニング用のCSVファイルとJSONファイルに変換出力し、定期的にアップロードすることで使えば使うほどWatsonのナレッジが増え、回答できることが増えていきます。

NLC及びR&Rはトレーニング1回あたりに対して課金されるため、トレーニング頻度を1日1回に抑えて費用拡大の対策をしています。リアルタイムに学習させられるかどうかはWatsonの金額感との兼ね合いになりそうです。

# おわりに
2日間のハッカソンでしたが、BluemixとWatsonをフル活用することでここくらいまでは実装することができます。まさにクラウドパワー。
本アプリケーションはまだまだ拡張できることが盛りだくさんなので、事業化も本気で考えつつ実装を進めてみますかね。
Watsonのトレーニングを人手をかけて賢くすることは可能ですし簡単ですが、育てるのに人手が掛かりすぎるのも本末転倒なので、APIとプログラミングで自動学習範囲を増やしていくやり方をこれからも模索してみます。

(12/17更新)
Watson日本語版ハッカソンで最優秀賞をいただけて資金を得ることができました。
本格化に向けて動き出しますかね…。荒削りな部分を直さないとだ。
ROMAのroutingに関して

ROMAのroutingに関しての説明です
![704c063c-ccdc-a425-b9f6-bfe84f8a1aad.png](https://qiita-image-store.s3.amazonaws.com/0/103558/44c93721-d4e7-8c30-a2bb-dd0c9600d95e.png)

# routinファイル
## routingファイルとは
- ROMAのクラスター構成を記述した設定ファイル
- これをもとにデータの分散などを行う

## routingファイル作成

```bash
$ mkroute [options] [nodeIDs]
Ex.) mkroute 192.168.33.11_10001 192.168.33.11_10002 192.168.33.12_10001 192.168.33.12_10002
```
- mkrouteコマンドでroutingファイルが作成されます

## routingファイル構成
- routingファイルの内容は各ファイルで全て同じ内容になっています
- ROMAが起動するときに指定したaddressとport No.のファイル名のroutignファイルを読み込みます

```rb:routing_file
--- !ruby/object:Roma::Routing::RoutingData
dgst_bits: 32 # 2**32 = 4294967296
div_bits: 9 # 2**9 = 512
rn: 2 # redundancy
nodes:
- 192.168.33.11_10001
- 192.168.33.11_10002
- 192.168.33.12_10001
- 192.168.33.12_10002
v_idx:
  0:
  - 192.168.33.11_10001
  - 192.168.33.12_10001
  8388608:
  - 192.168.33.12_10002
  - 192.168.33.11_10001
  16777216:
  - 192.168.33.12_10001
  - 192.168.33.11_10002
  .
  .
  .
v_clk:
  0: 0
  8388608: 0
  16777216: 0
  .
  .
  .
```
- dgts_bits
  - データ分散の際に使用するROMAのHash tableをいくつに分散するかの設定  
  (データ振り分けの際に2^^32個分の空間がある)
  - 実際の値は2**(設定した数)
  - デフォルト値は32(4294967296)

- div_bits
  - vnodesの数を示す  
  (dgst_bitsで用意した2^^32の空間をこのvnodesの個数に振り分ける)
  - 実際の値は2**(設定した数)
  - デフォルト値は9(512)

- rn
  - 冗長度を表す
  - デフォルト値は2

- v_idx
  - それぞれのvnodesの担当nodeを示す
  - 上の行からprimary, secondary1, secondary2・・・となる
  - 同serverのインスタンスが同じvnodesにアサインされることはない  
  (--duplicate_in_hostオプションを使えば可能)

- v_clk
  - vnodes毎の追記回数を示す
  - 初期値は0
 
## 現在のrouting情報の取得
routingdumpコマンドで取得することができます
`> routingdump [yaml|json|yamlbytes|bin]`


# routing情報の更新
- instanceが追加されたり落ちたりすると、それに合わせてroutingの情報がupdateされます
  - 以前紹介したjoinやrecover、data lost時のauto_assignなど
  - http://qiita.com/hiroaki-iwase/items/a2558eb1b7b44977ec5f
  - http://qiita.com/hiroaki-iwase/items/087c1b4d0dd3e6882001
  - http://qiita.com/hiroaki-iwase/items/1e1185e09c3614f5ad74
- 新しいrouting情報は、routingディレクトリに差分情報として保存されます

## 例
- 'localhost_10001', 'localhost_10002', 'localhost_10003'で構築しているクラスターで'localhost_10003'が落ちた場合

```bash:routingディレクトリ
$ ls -l
total 124
-rw-r--r-- 1 root root 25471 Dec 10 03:07 localhost_10001.route   # 初期ファイル
-rw-r--r-- 1 root root 19453 Dec 10 05:31 localhost_10001.route.1 # 差分ファイル1(10001)
-rw-r--r-- 1 root root 25471 Dec 10 03:07 localhost_10002.route   # 初期ファイル
-rw-r--r-- 1 root root 19453 Dec 10 05:31 localhost_10002.route.1 # 差分ファイル1(10002)
-rw-r--r-- 1 root root 25471 Dec 10 03:07 localhost_10003.route   # 初期ファイル
-rw-r--r-- 1 root root     0 Dec 10 03:07 localhost_10003.route.1
```
- 差分ファイルはファイル名の末尾に.(数字)が追加されたファイルです
  - 今回はlocalhost_10003は落ちたインスタンスなので差分ファイルは0bytes
  - localhost_10001とlocalhost10002はroutingのupdateが起きたので差分ファイルに変更情報が保存されています
- 差分が増えていくにつれ、'.1', '.2'と増えていきます
React.jsとReduxによる快適なElectron開発環境をつくる


## はじめに

だいぶ前から, Node.jsやHTML5などのWeb技術だけでデスクトップアプリが作れるらしい, ということでElectronでなにか作りたいなと思ってました.

サンプルとしてノートブックアプリを作成したので, その構成について書きます.

最近流行りのES6やReact.js, FluxフレームワークとしてReduxを盛り込んだ構成で結構大掛かりそうに見えるのですが, 構築してみると意外にシンプルで使いやすい形になったかなと思います.

Github上のレポジトリはこちらです.

https://github.com/junishitsuka/flasher-desktop


## ディレクトリ構成

下図はアプリケーションのディレクトリ構成です.

![スクリーンショット 2015-12-10 1.19.22.png](https://qiita-image-store.s3.amazonaws.com/0/42441/42bb9a89-2c9a-0130-8581-b3e282926967.png "スクリーンショット 2015-12-10 1.19.22.png")

アプリケーションの基礎となる`index.html`と`index.js`はドキュメントにあるチュートリアルとほぼ同じです.

https://github.com/atom/electron/blob/master/docs/tutorial/quick-start.md

gulpによって, `app/js/src/bundle.js`をコンパイルして`app/js/dst/bundle.js`に出力しているので, それを`index.html`の下部で読み込んでいます.

```index.html
<script>
window.onload = function() {
    require("./js/dst/bundle.js")
}
</script>
```


## アプリケーションのビルド

ビルドツールにはgulpを使用していて, 主なプラグインは以下の通りです.

watchifyによる差分コンパイルが速くて, 変更を検知して自動でコンパイルしてくれるのでめっちゃ便利です.

* browserify
* watchify
	* ファイルの変更を検知して差分コンパイルを行えるようになる
	* ビルドの速度も上がるので開発効率も上がる
* babelify
	* ES6をES5にトランスパイルする
* gulp-load-plugins

## React.jsとRedux

Facebookが開発して話題になったReact.jsですが, サンプルを動かすくらいしかしていなかったので, これを気に導入してみました.

React.jsについての説明は以下の記事がとても参考になりました.

http://qiita.com/koba04/items/4d13caf5ab4507974bf0

React.jsってフレームワークだよね, ならそれだけ入れればいいんじゃないのと思っていたのですが, React.jsはコンポーネント（Viewの部分）しか提供してくれません.

そこでフレームワークのようにデータやイベントの流れを規定したアーキテクチャーがFluxです.

以下の記事でReact.jsとFluxの関係が詳しく書かれています.

http://qiita.com/koba04/items/b32ba449d753fdb2b597

そして最後に, Fluxの実装で一番実用的で流行しているフレームワークがReduxになります.

Reduxはサンプルが豊富なので公式レポジトリのサンプルが非常に参考になりました.

https://github.com/rackt/redux

## 困っていたこと・困っていること

### デザインを整えたい（解決）

今回は

* 必要最低限のデザイン
* JSを含まないもの

というものが望ましかったので, pure.cssを採用しました.

レイアウトも豊富でシンプルでキレイなデザインなので気に入ってます.

デスクトップっぽいUIがいいなら以下の記事にあるPhotonKitというものがおすすめです.

http://www.softantenna.com/wp/software/photon/

### tmuxで動かしたElectronがキーボード入力を受け付けない（解決）

Qiitaで投稿されていました.

これに関しては原因がtmuxだ, ということを特定するまでが時間がかかりました.

http://qiita.com/itkrt2y/items/dee87c406617d1bd45a6

### コンパイルされたJSファイルが大きすぎてElectronさんに怒られる（未解決）

あまりいい方法が思い浮かびませんでした.

地道にいらない`node_modules`とかを削っていくとかでしょうか...

## 終わりに

今まで自分はデスクトップアプリとは無縁だと思っていましたが, Electronのおかげでこんなに簡単にデスクトップアプリを作成することができました.

JavaScriptを多用することになるので, 最近流行りのES6やReactやAngularなどいろいろな技術を試せるので新しい技術やJSが好きという人にはぜひ触ってみて欲しいです.

明日は[@unok](http://qiita.com/unok)さんです.
Elastic BeanstlkにComposerで入れたツールにパスを通す(Drush)

Elastic Beanstlk を最近使い始めました。設定はできるだけコード化しておきたい。

```
$ eb --version
EB CLI 3.6.1 (Python 2.7.1)
```

```
$ tree -L 2 -a
.
├── .ebextensions
│   ├── ec2-phpini.config
│   ├── ec2.config
│   ├── elb.config
│   ├── environment.config
│   └── rds.config
├── .elasticbeanstalk
│   └── config.yml
├── .gitignore
├── composer.json
├── composer.lock
└── drupal(本体中身省略)
```

Drush自体はComposer経由でインストールする。`composer.lock`を含めてデプロイすれば自動的に`/var/www/html`の`vendor`以下にインストールされる。

`composer.json` はプロジェクトルートに配置し、ドキュメントルートはdrupalを置いたディレクトリに変更した。

```composer.json
{
    "name": "snize/プロジェクト名",
    "require": {
        "drush/drush": "8.0.*"
    },
    "authors": [
        {
            "name": "snize",
            "email": "メールアドレス"
        }
    ],
    "minimum-stability": "stable"
}
```
`eb deploy`でアップロードされ、`.ebextensions`以下の設定ファイルが読み込まれ環境が更新される。ここまでは良いのだが、実際にDrushを利用するためにはPATHを通す必要がある。`eb ssh`でログインして設定する方法もあるのだけども、環境ごとにその作業しなければならないしそんなことはしたくない。

## 解決策

以下の設定ファイルを用意した。

```.ebextensions/ec2.config
container_commands:
  02-set_path:
    command: echo 'export PATH=/var/www/html/vendor/bin:$PATH' >> /home/ec2-user/.bash_profile
    cwd: /home/ec2-user
    test: test ! -f .semaphore
  99-signal-startup-complete:
    command: touch .semaphore
    cwd: /home/ec2-user
```

以上

### ハマりポイントは2つ（以下おまけ）

#### ec2-userで環境変数をexportできない

```
container_commands:
  02-set_path:
    command: export PATH=/var/www/html/vendor/bin:$PATH
```

最初に思いついたのがこれで、楽勝と思ってたけどいくらやってもパスが通せない。考えてみれば簡単で、デプロイ時のユーザは`root`で実行されたのだから、`ec2-user`で環境変数が変更されないのは当たり前。

#### .bash_profileが徐々に太る

`ec2-user`の環境変数をデプロイ時に直接設定できないから、.bash_profileを修正することにしたわけだけど`eb deploy`のたびに一行づつパスが追加されていくことに気づいた。問題ないといえば問題ないんだけど...
そこでワークアラウンドではあるけど、フラグを立てる方法を見つけたので採用した。

[configuration - Where to put Elastic Beanstalk config commands that are only run once on spin-up? - Stack Overflow](http://stackoverflow.com/questions/16827417/where-to-put-elastic-beanstalk-config-commands-that-are-only-run-once-on-spin-up/16846429#16846429)
> Commands can be run conditionally using the test: modifier. You specify a test to be done. If the test returns 0, the command is run, otherwise it is not.
>
> If the last command in your config file touches a file, and the commands above that you only want to run once check for the existence of that file, then those commands will only run the first time.

> ```
commands:
  01-do-always:
    command: run_my_script
  02-do-on-boot:
    command: script_to_run_once
    test: test ! -f .semaphore
  99-signal-startup-complete:
    command: touch .semaphore
```

[Linux サーバーでのソフトウェアのカスタマイズ - Elastic Beanstalk](http://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/customize-containers-ec2.html)

> test
> オプション。Elastic Beanstalk が command キーに含まれるコマンド（bash スクリプトなど）を処理するために、値 true （終了コード 0）を返す必要があるコマンドです。

`.semaphore` ファイルが存在すれば `.bash_profile`への書き込みのコマンドは実行されない
コンテンツルートのViewは全然ルートじゃない話


## 概要
Androidアプリの開発をはじめたばかりの人にサラッと読んでもらいたい読み物です。

Design Support LibraryのSnackbarを使う際、引数にコンテンツルートを指定することがあるので振り返りに書いてみました。

## 実演
### 簡単なサンプルを実装
以下のような『Hello World!』を出力するだけのActivityを作成します。
今回のサンプルは __AppCompatActivity__ を継承しています。

```SampleActivity.java
public class SampleActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        AppCompatTextView textView = new AppCompatTextView(getApplicationContext());
        textView.setText("Hello World!");
        textView.setGravity(Gravity.CENTER);
        setContentView(textView, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
    }
}
```

### dumpsysしてみる
SampleActivityをAndroid 5.1の端末（Nexus 5）で開いている状態で ```$adb shell dumpsys activity top``` のコマンドを実行してみると以下のView階層が出力されます。
これが実際に作られているViewです。

```
com.android.internal.policy.impl.PhoneWindow$DecorView{3f91dc03 V.E..... ... 0,0-1080,1920}
  android.widget.LinearLayout{2f75c780 V.E..... ... 0,0-1080,1776}
    android.view.ViewStub{24ef21b9 G.E..... ... 0,0-0,0 #1020373}
    android.widget.FrameLayout{242de9fe V.E..... ... 0,75-1080,1776}
      android.support.v7.internal.widget.FitWindowsLinearLayout{1d4c355f V.E..... ... 0,0-1080,1701 #7f0e006e app:id/action_bar_root}
        android.support.v7.internal.widget.ViewStubCompat{182fdbac G.E..... ... 0,0-0,0 #7f0e006f app:id/action_mode_bar_stub}
        android.support.v7.internal.widget.ContentFrameLayout{34572075 V.E..... ... 0,0-1080,1701 #1020002 android:id/content}
          android.support.v7.widget.AppCompatTextView{247aa80a V.ED.... ... 0,0-1080,1701}
  android.view.View{2928c87b V.ED.... ... 0,0-1080,75 #102002f android:id/statusBarBackground}
  android.view.View{3d950698 V.ED.... ... 0,1776-1080,1920 #1020030 android:id/navigationBarBackground}
```

__ContentFrameLayout__ がコンテンツルートにあたるViewですが、見ての通りに全然ルートじゃありません。

### もしコンテンツルートにアクセスしたいなら
以下のように実体化するのが一番に手っ取り早い方法です。

```
ViewGroup contentsRoot = (ViewGroup) findViewById(android.R.id.content);
```

## 最後に
今回はAndroid 5.1の端末（Nexus 5）でAppCompatActivityを継承したActivityを開いている状態でdumpsysを行いましたが、OSのバージョンやActivityの種類で異なる形のView階層ができあがるのでいろいろと試してみると面白いですよ。
Nginx で Basic 認証


### パッケージインストール

htpasswd コマンドを利用するため、下記のパッケージをインストール。

#### Debian 系

```
$ sudo apt-get install apache2-utils
```

#### Red Hat 系

```
$ sudo yum install httpd-tools
```

### .htpasswd ファイルの作成

ユーザ名とパスワードを追加。

```
$ sudo htpasswd -c /etc/nginx/.htpasswd username
New password: password
Re-type new password: password
Adding password for user username
```

### nginxの設定ファイルの追記

.htpasswd ファイルを読み込み、Basic 認証を適用。

```
$vim /etc/nginx/nginx.conf
…
server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html index.htm;

    location / {
        auth_basic "Restricted";                   # 認証時に表示されるメッセージ
        auth_basic_user_file /etc/nginx/.htpasswd; # .htpasswdファイルのパス
    }
}
…
```

### 再起動

```
sudo service nginx restart
```
Windows の Emacs で rgrep を使えるようにする

`find` コマンドと `grep` コマンドがインストールされていることが前提。
ただし、Windows 標準の `find` が使われないように工夫する。

↓は [Git for Windows](https://git-for-windows.github.io/) を使った例。

```el
(setq find-program "\"C:\\Program Files\\Git\\usr\\bin\\find.exe\""
      grep-program "\"C:\\Program Files\\Git\\usr\\bin\\grep.exe\""
      null-device "/dev/null")
```

※参考 [EmacsWiki](http://emacswiki.org/emacs/GrepMode)

ちなみに `diff` の場合はこちら。

```el
(setq diff-command "\"C:\\Program Files\\Git\\usr\\bin\\diff.exe\"")
```
閉じたネットワークでNTPで時刻同期する

インターネットに接続していない環境で、NTPで時刻同期する場合、

親玉のサーバは、自分のローカルの時刻と同期し、

子分たちは、親玉の言いなりになります。


## 親分の設定

``` :/etc/ntp.conf
# 子分たちがアクセスするネットワークからの時刻同期は許可
restrict 192.168.1.0 mask 255.255.255.0 nomodify notrap

# 親分は自分のローカルタイムを参照
server  127.127.1.0 prefer
fudge   127.127.1.0 stratum 10
```

ntpdを再起動して、時刻同期できていることを確認。

```
# ntpq -p
     remote           refid      st t when poll reach   delay   offset  jitter
==============================================================================
*LOCAL(0)        .LOCL.          10 l   35   64  377    0.000    0.000   0.000
```


## 子分たちの設定

``` :/etc/ntp.conf
# 親分に時刻同期
server 192.168.1.1 prefer
```

ntpdを再起動。

あまりに子分の素行が悪ければ、手動で時刻同期。 `ntpdate –u 192.168.1.1`

時刻同期できていることを確認

```
# ntpq -p
     remote           refid      st t when poll reach   delay   offset  jitter
==============================================================================
*oyabun        LOCAL(0)        11 u   36   64  377    0.123    0.529   0.129
```
IT DARTのロゴはなぜ緑色(ではない)か

まずこちらを読むにあたって、IT DARTとはなにかということを知りたい方はこちらから概要をお読みいただければ。
[IT DART](http://itdart.org/)
##災害現場の色
IT DARTのロゴを作るにあたってまず参考に見ていたのが、国境なき医師団のロゴでした。分野は違えど災害現場に入って現地のサポートをしていくという姿勢が参考になると考えたのです。
参考:[国境なき医師団](http://www.msf.or.jp/), [赤十字](http://www.jrc.or.jp/)

他にも赤十字や救急・消防。一様に赤い色をしています。有名なレスキューのオレンジ服も赤系統。緊迫感、血、火、情熱、警告。赤い色にはそんなイメージが有ります。先ほど姿勢が参考になるというように書きましたが、達成するべき目標はIT DARTとそれらでは大きく違います。

私たちは結果としてその助けにはなったとしても、命を救えません。

そういった組織が災害現場に入って同じような赤い色を掲げることは、一刻を争う中で少しでも混乱を生じさせてしまうかもしれない。それだけは絶対に避けるべきだと考えました。

自分達の姿勢、好みや理念などよりも、まずは現場の相対的なデザインをするべきだと強く思ったからです。

![itdart_logo.png](https://qiita-image-store.s3.amazonaws.com/0/103745/49550047-f61c-493a-aab7-96505205d1af.png)

## 緑色
赤の反対色は緑色です。自然、青信号、平和などのイメージがあると思います。

また我々ソフトウェア開発・デザインの分野において、カラーリングに慣例的なメンタルモデルが存在します。
・青 => 通常とは違うよ (例:リンク)
・緑 => 成功したよ (例:成功のチェックマーク)
・黄 => 注意してね (赤とは重要性を分ける)
・赤 => だめだぞ失敗だぞっ (例:いつも消えないレッドバー)

正直なところIT分野のサポートをする側が「警告やエラー出まくりだとなんかちょっとな」と安直に思ったということもここに隠さずに書いておきます(笑)。

レッドバーはデスマの時だけにするとしましょう。

## そこで改めて気づく情報としての色

ここまで相対的なカラーリングを意識してロゴを作成するということは初めてに近く、色の持っている情報の多さに改めて気づかられたわけです。

そこでIT DARTのカラーリングにバリエーションを持たせることで、災害現場での活動中において対外的に私達の状況を伝えられないかと考えました。

![colors.png](https://qiita-image-store.s3.amazonaws.com/0/103745/70a25eb7-aa37-f182-29b3-6bf99ca57e59.png)

まずカラーの使い方はまだ議論されていないことを明確にしておきますが、製作者の意図としては、災害現場向けには常に緑色を使用して、現地でのカラーイメージは緑色としておくべきだとはおもいます。

このカラーバリエーションは外からのサポートをしてくれる人たちのために、例えばサイトや通信手段(Slacなんかをテストしてますが)のロゴの色が変わっていたりすると、文字を読まなくても何か重要なことがあると気づくことが、同じ色の場合と比べて高いと思います。

## 形
画像がでてしまっているので、話が前後してしまうようにみえるかもしれませんが、ここまで考える中でまだ形は存在していませんでした。

以下、レシピ。

1. カラーバリエーションのアイディアが出てきたところで、信号機のように丸いものが必要だと考え、まず丸を置きます。
2. 視認性が大事なロゴなので、あまり奇抜なフォントはおかず、スタンダードなゴシックにします。
3. 情報を扱うよということで、(1)で作った丸を中心に電波っぽいのをつけます。
4. 何かを救うのではなく、整理する・直すということを伝えたいので、(1)のなかに置いたITをスパナとTレンチにします。

というように、デザインにおいてすべてそのバックヤードを掘り下げて自問自答しながら考えていくと、自ずとあるべき姿が見えてくる。そんな貴重な体験をさせていただいたのです。

## 最後に 雑記
知らない人も多いかと思うのですが、僕はイタリアで絵画修復を学んでいました。それはどうでもいいのですが、その中で僕は歴史の中で移り変わる描画材料の歴史も当然学びます。

今の時代というのは、過去稀に見るほどに、人間が「色」を簡単にコントロールできる時代です。画材だけでなく、DTP、LEDなど。これほど色を簡単に操ってきた人類は過去にはいませんでした。

そんな中で「色」というものが持つ可能性を、これまでの概念よりもっと広げられる時期にきているのではないかと思っています。

というわけで。

清水 俊之介
AndroidStudioでパッケージ名を変更

Refactor→Renameだと、com.example.androidのandroidしか修正できない。
ディレクトリ名を直接修正するしかないのか・・と思ったが、Refactor→Move（Move Package）やると行けた。

※FloatingActionButtonのlayout_behaviorとかはリファクタリングされなかったので、元のパッケージ名でGrepした方がよいです。
Flycheck の設定をディレクトリによって変える方法

対象ディレクトリに `.dir-locals.el` ファイルを置く。↓は [JSHint](http://jshint.com/) と [JSCS](http://jscs.info/) チェックを無効にする例。

```el
((js-mode (flycheck-disabled-checkers javascript-jshint javascript-jscs)))
```

ファイルを直接編集するだけでなく、Emacs関数を使っても追加できる。

```
M-x add-dir-local-variable RET js-mode RET flycheck-disabled-checkers RET javascript-jshint RET
```

参考：
- [Flycheck公式マニュアル](http://www.flycheck.org/en/latest/user/syntax-checkers.html#variable-flycheck-disabled-checkers)
- [Emacs公式マニュアル](https://www.gnu.org/software/emacs/manual/html_node/emacs/Directory-Variables.html)
- [Directory Variables - EmacsWiki](https://www.emacswiki.org/emacs/DirectoryVariables)
私ってMVNOにしたほうがいいの? 

# 背景
よく 「私(俺)って MVNO にしたほうがいいの?　どれくらい安くなるの?」という質問を受けます。実際私も MVNO 契約していますが、この MVNO にしたほうがいいのかどうか、という点を簡単に判断できるスゴロクと、新規に SIM フリー端末購入して MVNO 利用する場合の費用の見積もり方法についてまとめてみたいと思います。

# MVNO にしたほうがいいのかどうかスゴロク

下記の図面は、前提として、ドコモ・au・ソフトバンクのスマートフォンを1台で運用していることを想定しています。カケホーダイはドコモでの名称ですが、各キャリアのいわゆる話したい放題プランとみなしてください。

## カケホーダイプランの契約が必須な契約の場合
最近契約した、または、機種変に際して携帯ショップなどでカケホーダイプラン加入するように変更してしまった場合などは、下記のチャートを参照してください。

![Untitled.png](https://qiita-image-store.s3.amazonaws.com/0/103124/d498dfbc-4a88-ddf9-4cf8-e3791369fcc7.png)

### 月々の通話料金の目安方法
下記の方程式でどれくらいの話すと、パケットパック契約したほうがよいのか判断できます。

左辺がキャリアでパケットパック契約する前提。右辺が MVNO で契約した式。MVNO の場合は 20 円/30秒の通話料金と、音声通話オプション費用(700円)がかかることが多い。

```math
2700 = 40x + 700
```

両辺を整理して x について解くと損益分岐する通話分数が 50 分であることがわかる。

```math
x = 50
```

## 以前から契約しているなどでカケホーダイプランの契約をしていない場合

5000 〜 5700 円程度のパケット定額 + 基本使用料 + 従量課金の電話料金といったようなプランにはいっている人が対象です。
前提として、月々の通話料金が長い場合は、カケホーダイプランを契約されたほうが支払いが安くなる場合があるので、注意してください。(例えばデータ通信は 3G/月程度で、通話が数時間あるケースなどはカケホーダイがお得かと思います。)
端的に言うと、この場合はどこにいっても MVNO のほうが中長期的にお得です。どういったプランに加入するかは、月々のパケット使用量がキーになってくるかとおもいます。

![Untitled (1).png](https://qiita-image-store.s3.amazonaws.com/0/103124/a45737cf-dbe7-9928-3942-8d016268f67b.png)

上記の図面で (2) のほうに着地した場合ですが、__10G まで使える 3260 円のファミリープラン(IIJ mio)相当に契約するとお得です。__10G 以降のデータ量の追加料金もキャリアの場合は 2G ごとに 2500 円追加料金がかかりますが、MVNO の場合は 2G ごとに 2000 円程度です。

# 機種代金とか下取りとかどう考えればよいのでしょうか?

これまではミクロ的な視点で月料金ベースでみてきましたが、通話が多い人以外は MVNO のほうがお得という話でした。
しかし、機種変更もあわせて検討している場合はどうなのでしょうか?　機種変更の時期になると、下取りキャンペーンみたいなものがあったり、通話料から割引キャンペーンがあったりしますので、悩ましいですね。分析するにもドコモの場合と、au / softbank の場合で考え方が違います。

- ドコモ
  - 手元の端末で MVNO 事業者の SIM が利用できる
- au
  - 手元の端末で MVNO 事業者の SIM が利用できるが、MVNO 事業者の数に制限がある
- softbank
  - 別途 SIM フリー端末の購入が必要。(あるいはドコモ端末の中古という手もあるといえばある)

## ドコモの場合
今手元の端末に MVNO の会社の SIM カードをそのままさせますので、端末は変更せずにそのまま SIM カードを差し込むのが一番コスト効率が良いです。新規に SIM フリー端末を使う場合はこの後のセクションを参考してください。

## au / softbank で新規 SIM フリー端末を購入する場合

__コツとしては、2年間の総支出で考えることです。__

もし新規に SIM フリー端末を購入する場合、キャリア契約のまま新機種に機種変してしまった場合との比較をしたくなるかとおもいます。

多くの場合2年縛り契約になっているかとおもいますので、下記の方程式を考えて見てください。左辺が MVNO にした場合で、右辺がキャリアの場合のコストと利益です。

```math
MVNO に MNP した場合の 2 年間総支出 = キャリア契約の場合の 2 年間の総支出 - インセンティブ(下取 + キャンペーン)による 2 年間の割引 + 利益
```

- MVNO にした場合の 2年間の総支出の見積例
  - 解約料 (9500)
  - MNP 転出料 (2000)
  - SIM フリー端末代金
  - MVNO 24 ヶ月利用料 (例: 2300*24)

- キャリアの場合の 2年間の総支出の見積もり例
  - 月料金 (例: 旧プランの場合 6948 * 24 。新プランの場合 (2700 + 3500)*24 )

- キャリアで機種変する場合のインセンティブ
  - 機種下取り代金 (機種にもよるが 1-3万くらい)
  - キャンペーン (月々のデータ通信量から割引される場合はその額 * 24)

## 所感

ドコモの方は手元の端末を利用しつづけて SIM カードを変えることが一番よいかと思います。新規に SIM フリー端末を購入する場合、手元の端末がかなり古くなってきていて下取りの金額が微妙だったり、機種変更キャンペーンがそこまで魅力的な割引でない場合は、SIM フリー端末を購入して、MVNO にしてしまってもよいのではないでしょうか。

気をつけるケースとしては、手元の端末がかなり新しい場合や2年ごとに機種変している場合は2年間の総支出の差が 1-2万程度に収まるので、キャリアのままにしておいてもそこまで損とはいえません。さらに旧プランでバケットをちょうど 3-7G 使うような場合に関してはほとんど差がないかもしれません。
Rails | ActiveDecorator を View 以外で使う方法 ( Rspec テストなど )

.name が普通のメソッド。
.decorated_name がデコレートされたメソッドだとした場合。

当たり前だが .name は普通に使える。

```rb:models/test.rb
ExampleClass.first.name

# => 'John'
```

しかしデコレートされたメソッドは、View 以外では使えない。

```rb:models/test.rb
ExampleClass.first.decorated_name

# => NoMethodError: undefined method `decorated_method'
```

それならば。
ActiveDecorator のデコレーターメソッドに、インスタンス本体を渡してしまおう。

```rb:models/test.rb
ActiveDecorator::Decorator.instance.decorate(ExampleClass.first).decorated_name

# => '*J*o*h*n*'
```

これでOK。



<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# メンター受付


https://menta.work/user/5694

<!-- Update From Qiita API -->
Twitter APIのキー取得における電話番号認証時にエラーが出る件

##事象

[Twitter Apps](https://apps.twitter.com/app/~)
![Capture 2015-12-06 13.01.44.png](https://qiita-image-store.s3.amazonaws.com/0/65994/555b6966-7246-7da8-9f77-c34c7404ba84.png)

~~~
Error
You must add your mobile phone to your Twitter profile before creating an application. Please read https://support.twitter.com/articles/110250-adding-your-mobile-number-to-your-account-via-web for more information.
~~~

電話番号認証しないといけないんですね。
はい、わかりました。と素直に認証しても失敗の嵐...

##解決
スマホのブラウザ（Safari）でTwitterにログインし、電話番号認証したら成功。