OmniAICreator/Qiita-1.07M huggingface dataset:
Webサイトで縦書きする方法

明けましておめでとうございます。
今年も、備忘記録をたくさん残していこうと思います。

年末に私の身に起きたことをお話ししましょう。。。

縦書きのデザインのコーディングをしていました。

```html
<div class="vertical">
    <p>明けましておめでとうございます<span class="pun">。</span></p>
</div>
```

```css
.vertical{
    writing-mode: tb-rl;
    writing-mode: vertical-rl;
    -moz-writing-mode: vertical-rl;
    -o-writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;

    font-size: 18px;
    line-height: 40px;
}
```

もちろん、Firefoxでは未サポートなので、ユーザーエージェントで判定してCSSを追記していた。

```js
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('firefox') != -1){
    $('.vertical').addClass('ff');
}
```

```css
.ff p{
    float: right;
    width: 18px;
    padding: 0 11px;
    line-height: 1.05;
    word-wrap:break-word;
    direction:ltr;
}
/* 、,。 */
.ff .pun{
    display:block;
    width:0.4em;
    line-height:0.1em !Important;
    margin-bottom:0.9em;
    margin-left:0.6em !Important;
}
/* ー */
.ff .angle{
    display:block;
    -moz-transform:matrix(0, 1, 1, 0, 0, 0);
    transform:matrix(0, 1, 1, 0, 0, 0);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1, mirror=1);
}
/* 「,」,A,B,C */
.ff .par {
    display:block;
    -moz-transform:rotate(90deg);
    transform:rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
/* ぁ,ぃ,ぅ */
.ff .small{
    display:block;
    line-height:0.75em !Important;
    margin-bottom:0.3em;
    margin-left:0.11em !Important;
}
/* A,B,C */
.ff .alp{
    line-height: 0.7;
}
```

無事に対応ブラウザ全てを確認し、帰宅。
次の日、Σ(＝д＝ﾉ)ﾉ
く、崩れておる・・・(Firefox)
しかも、見たことない崩れ方 ((((((゜ロ゜;)

要素の検証いじっても全然解決せず…

```js
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('firefox') != -1){
    //$('.vertical').addClass('ff');
}
```

こうしてみた。

縦書きで表示された。

(´・ω・｀)

(´・ω・｀)(´・ω・｀)

(´・ω・｀)(´・ω・｀)(´・ω・｀)

(´；ω；｀)(´；ω；｀)(´；ω；｀)(´；ω；｀)

｡･ﾟﾟ '゜(*/□＼*) '゜ﾟﾟ･｡

ナンテコッタ・・・


と、いうことで、Firefoxで縦書きサポートされたみたいです＼(^o^)／

今年もどうぞ、よろしくお願いいたします！
数学ガールをプログラミング（第1章のはじめ）

#数学ガール　著：結城浩
とうとうこの本を買ってしまった。
[数学ガール　Amazon](http://www.amazon.co.jp/数学ガール-数学ガールシリーズ-1-結城-浩/dp/4797341378)

高校1年の春、入学式の後、「僕」は一人の少女に出会う。少女・ミルカは挨拶の代わりに数列を唱え、「僕」はその数列の続きで返答した。1年後、4月の終わりに「僕」はもう一人の少女に校門で手紙を渡される。高校に入学して間もない少女・テトラの書いたその手紙の中身は、「僕」に数学を教えてもらいたいという内容のものだった。(wiki引用）

###感想として
第３章までだけど、**面白い**・・・。ぶっちゃけ数学苦手な人でも読みやすいと思う。
特に私は主人公である「僕」は「展開が好き」というところが面白い。
あと個人的にはミルカさんにいじめられ・・・（省略）

んで読むだけじゃもったいないので出てきた面白い問題や、知識をプログラミングを用いたり書いていきたいと思います。
気をつけてはいますが、**ネタバレ**の可能性があるので一回読んでから以下を読んでもらえると幸いです。

* * *

では第1章から

#[第1章] **数列とパターン** のさわり
ここでは色々な数列が出てきます。
####数列１
```
1 1 2 3 ・・・
```
ではこれをRubyで書くと？

```ruby:sequence1.rb
def sequence1(x)
        ans=[]
        i=1
        j=1
        ans<< i
        ans<< j
        for k in 0..x do
                hoge=j
                j=i+j
                i=hoge
                ans=ans<<j
        end
        return ans
end
```

汚いのはご愛嬌で
もうなんの数列かわかりますよね！！素数が好きな方は発狂しそうな数列です。
では次
####数列2
```
1 4 27 256 ・・・
```
これもまたrubyで

```ruby:sequence2.rb
def sequence2(x)
        ans=[]
        (1..x).each do |num|
                ans << num**num
        end
        return ans
end
```
実は初めてeach文を使ってみた・・・割と簡単に書けますね。

#最後に
こんな感じでこれから本に沿って簡単なプログラミングしていこうと思います。
もし「こっちの方がかっこよくかけるよーーー！」とかありましたらお願いします！
Rails2.x系で"Couldn't create database for 〜 (if you set the charset manually, 〜)" って言われる


rake db:create したとき、上記のエラーメッセージが出ていろいろ調べた結果、このメッセージは rake task の中で create database に失敗したときに無条件に表示されているものであり charset は全然関係無かった。



実際のエラーの内容を調べてみると、自分の場合、mysql.sock が見つからないというエラーだったので、database.yaml に以下の様に sock ファイルの場所を指定することで解決。

```dataabse.yaml
	socket: /var/lib/mysql/mysql.sock
```

エラーの調査方法は、以下のようにrailsのrake taskに手を加えて本来のエラー内容を表示させた。

```ruby:.rbenv/versions/1.8.7-p375/lib/ruby/gems/1.8/gems/rails-2.1.0/lib/tasks/databases.rake
def create_database(config)
	:
	begin
	  ActiveRecord::Base.establish_connection(config.merge('database' => nil))
	  ActiveRecord::Base.connection.create_database(config['database'], :charset => (config['charset'] || @charset), :collation => (config['collation'] || @collation))
	  ActiveRecord::Base.establish_connection(config)
	rescue => err
      $stderr.puts err.inspect  # <== この行を追加して本来のエラーを調査
      $stderr.puts "Couldn't create database for #{config.inspect}, charset: #{config['charset'] || @charset}, collation: #{config['collation'] || @collation} (if you set the charset manually, make sure you have a matching collation)"
```
PhpStormでSetterを作るならFluent settersに毎回チェックを入れよう

# <i class="fa fa-cubes"></i> 概要

PHPStormでsetterを自動生成するときに、Intention Actionから**Add fluent setter**を選ぶと、`return $this`を追加してくれます。
~~ただし、すべてのプロパティから一括で作ることはできません。
また、スクラッチプラグインのスクラッチファイル内では使用できないようです。~~
通常のGenarateからのSetter生成では`return $this`を追加してくれないと思っていましたが、チェックボックスを選択することで、**Fluent setter**で一括生成できます。[^3]
ただし、選択状態は記憶してくれないようですので、毎回チェックする必要があります。

***

# <i class="fa fa-code"></i> Setter追加方法

ここにクラスがあるじゃろ？

![クラス.JPG](https://qiita-image-store.s3.amazonaws.com/0/62354/a34e4dae-f0d2-674c-9c3d-5a4bf7b3ebb7.jpeg)

## GenerateからのFluent setterの場合


※右クリックからまたは**Alt + Insert**(Windows)[^2]

これを

![クラスgenesele.jpg](https://qiita-image-store.s3.amazonaws.com/0/62354/35b7ca23-ebfa-2f7c-fe32-fb5e2d2baba8.jpeg)

こうして…

![クラスgenesele3.jpg](https://qiita-image-store.s3.amazonaws.com/0/62354/0b2df3a3-3ff0-963f-ce87-5d359c7bce0a.jpeg)

こうじゃ

![クラスgenecom2.jpg](https://qiita-image-store.s3.amazonaws.com/0/62354/1cbf847b-09d6-5e97-6934-71982fda7753.jpeg)

記事を書いたからチェックボックスに気づけたということで…
見落としている機能も多いので、PhpStom記事、増えよ！[^4]

***

**以下チェックボックスの存在に気づいていなかったときの比較(蛇足)**

## Generateの場合

※右クリックからまたは**Alt + Insert**(Windows)[^2]

これを

![クラスgenesele.jpg](https://qiita-image-store.s3.amazonaws.com/0/62354/35b7ca23-ebfa-2f7c-fe32-fb5e2d2baba8.jpeg)

こうして…

![クラスgenesele2.jpg](https://qiita-image-store.s3.amazonaws.com/0/62354/01cc3325-43d3-4f54-e3a0-d4c84e87b049.jpeg)

こうじゃ

![クラスgenecom.jpg](https://qiita-image-store.s3.amazonaws.com/0/62354/e383633f-d342-4d3e-9073-fc5ee5938d7d.jpeg)

すべてのプロパティのSetterを一括で作れることと、
getterも同時に作れることが利点じゃ。

## Intention Actionの場合

※対象を選択して電球アイコンまたは**Alt + Enter**(Windows)

これをこうして…[^1]

![クラスflusel.jpg](https://qiita-image-store.s3.amazonaws.com/0/62354/1a58972a-ba27-dc8d-f1ec-1cc3ee7904e9.jpeg)

こうじゃ

![クラスflucom.jpg](https://qiita-image-store.s3.amazonaws.com/0/62354/810c1439-3acc-4b04-88f1-1220cbf92b67.jpeg)

`$this`を`return`してくれることと、
`PHPDoc`の`@return`も書いてくれることが利点じゃ。
反対に、一括で作れないことと、Getterを同時に作れないことが欠点じゃ。



[^1]: getter setter はGenerateと同じです。
[^2]: メニューバーのCodeからでも選択できます。
[^3]: 投稿後に気づいて書き直し
[^4]: 一昨年はあったのに去年はAdvent Calendarなかったんですよね。
JAVA Innnerクラス 練習問題P167

▪️練習問題 
練習5-2

▪️StrongBox.java

```java
public class StrongBox<E> {
	private KeyType KeyType;
	private E item;
	private long count;

	public StrongBox(KeyType key) {
		this.KeyType = key;

	}

	public void put(E i) {
		this.item = i;
	}

	public E get() {
		this.count++;
		switch (this.KeyType) {
		case PADLOCK:
			if (count < 1024)
				return null;
			break;

		case BUTTON:
			if (count < 10000)
				return null;
			break;

		case DIAL:
			if (count < 30000)
				return null;
			break;

		case FINGER:
			if (count < 1000000)
				return null;
			break;
		}
		this.count = 0;
		return this.item;
	}
}
```

▪️KeyType.java

```java
enum KeyType {
	PADLOCK, BUTTON, DIAL, FINGER
}
```
配列を優先度順に表示


要素をランダムに一覧表示、かつそれぞれに優先度を持たせたい場合。
これでどうだろうか？

## Code

**code**

```php:kobito.php

<?php

  // 確率を持つ要素を用意
  $arr = array(
    array(
        "val" => "90%の優先度",
        "per" => 90
      ),
    array(
        "val" => "70%の優先度",
        "per" => 70
      ),
    array(
        "val" => "50%の優先度",
        "per" => 50
      ),
    array(
        "val" => "30%の優先度",
        "per" => 30
      ),
    array(
        "val" => "10%の優先度",
        "per" => 10
      )

    );


  // rand()で使う最大値を用意
  $max = 0;
  foreach ($arr as $key => $value) {
    $max += $value['per'];
  }

  $len = count($arr);
  for ($i=0; $i < $len; $i++) {

    // 指定範囲からランダムにターゲットとなる数値を取得
     $tar = rand(1, $max);

     foreach ($arr as $key => $value) {

        if($tar <= $value['per']){
          // 優先度が数値より高ければ表示。
          echo '<li>'. $value['val'] . '</li>';

          // 要素を配列から削除
          unset($arr[$key]);

          // 最大値を再調整
          $max -= $value['per'];
          break;
        }else{

          // ターゲットとなる数値を調整
          $tar -= $value['per'];
        }
     }

  }


```
Andyでapkファイルを取り出す

#Androidエミュレータ「Andy」でgoogle playにしか公開されていないアプリのapkを抜き出す方法

・Andyを起動してgoogle playでアプリをインストール
・ESファイルエクスプローラでアプリをバックアップ
・/sdcard/backups/appsにapkファイルが保存される
・さらにESファイルエクスプローラを使って、
　/Shared/Andy/Backup辺りにコピー
・するとwindows上のユーザフォルダのAndy\Backupにapkファイルが現れる。
X.X.X.X | FAILED => failed to transfer file to の解決


## はじめに
- VMにAnsibleで環境構築しようと思ったら、エラーが出た。
- 合計1時間くらい格闘（ちょっと勘違いしていたのもあり）して、解決したのでメモ

## エラー

```
$ ansible -i .ansible/hosts -u hogehoge machines -m command -a "uptime" -vvvv
<snip>
<X.X.X.X> PUT /var/folders/sq/4z9p9_lj6pv0dy28dmg4lch00000gn/T/tmpA6scow TO /home/hogehoge/.ansible/tmp/ansible-tmp-1451955543.98-160272147550416/command
X.X.X.X | FAILED => failed to transfer file to /home/hogehoge/.ansible/tmp/ansible-tmp-1451955543.98-160272147550416/command:

Connection closed
```

## 原因
- はじめは、SSH周りの設定ミスかと思って、鍵とか、IPアドレスとか、ユーザ名とか基本的なところはチェック。しても解決しない。
- ちょっとまじめに検索したら、[stackoverflow](http://stackoverflow.com/questions/23899028/ansible-failed-to-transfer-file-to)を発見。
- ssh_configの設定で、sftpが無効になってる場合のエラーの様子。この前立てたVMはデフォルトで有効になっていたのに、今回のVMは無効になってた模様。。これは気づきにくい。。

## 対処
- stackoverflowのとおり、ansible.cfgで、sftpではなく、scpを利用するように編集して、再実行して成功した。

```
$ vi .ansible.cfg
<snip>
[ssh_connection]
scp_if_ssh=True

$ ansible -i .ansible/hosts -u hogehoge machines -m command -a "uptime" -vvvv
```

## おわりに
- ansibleはなぜかハマりやすいな…
AngularJSでフリック検知

AngularJSでのフリック検知には、ngTouchというものが使えるようです。
[AngularJS: API: ngTouch](https://docs.angularjs.org/api/ngTouch)

# 導入
まずはライブラリを読み込みます。
今回はGoogleCDNを使います。
バージョン番号のところはAngularJS本体と同じにするといいようです。

```index.html
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-touch.js"></script>

```

# 読み込み
module関数にパラメータとして**ngTouch**を指定します。

```sample.js
angular.module('sample', ['ngTouch']);
```

# フリックを検知したい要素に適用
画像をフリック可能にする場合なら、こんな感じに**ng-swipe-left**と**ng-swipe-right**を設定します。

```index.html
<body ng-app="sample" ng-controller="SampleController">
  <img ng-src="{{imgsrc}}" ng-swipe-left="swipeLeft()" ng-swipe-right="swipeRight()"/>
</body>
```

# イベント処理
あとはJS側で指定した関数を用意しておけばハンドリングできます。

```sample.js
function controller($scope){
  $scope.imgsrc = 'img/hoge.png';
  $scope.swipeLeft = function(){
    $scope.imgsrc = 'img/left.png';
  };
  $scope.swipeRight = function(){
    $scope.imgsrc = 'img/right.png';
  };
}

angular.module('sample').controller('SampleController'['$scope',controller]);
```

大変ラクチンでありがたいですね。
PCでもクリックしながらヒュッやると一応認識されるみたいです。
今回は1.X系で試してみました。2.X系では試してないです(そもそも2.X系を触ってなry
リファレンスにも無いのが気になるところです。
【JQuery】チェックボックスをラジオボタン風に実装する

# チェックボックスをラジオボタン風に実装する

*よく忘れてしまうので、メモ程度に書いているのでご了承ください。*

## チェックボックスをラジオボタン風に実装する意味ってあるの？

*よくディレクタなどにラジオボタンの機能でチェックボックスを作って欲しいと言われるが、
本当に必要なのでしょうか？
ディレクタいわく、１つだけチェックを入れさせたいが取り外しもさせたい。だそうです。*


*なので実装してみました。*

```lang:html
<ul class="js-checkbox-radio">
<li><label><input type="checkbox" class="hogehoge" value="1"><span>1</span></label></li>
<li><label><input type="checkbox" class="hogehoge" value="2"><span>2</span></label></li>
<li><label><input type="checkbox" class="hogehoge" value="3"><span>3</span></label></li>
</ul>
```

```lang:jQuery
$('.js-checkbox-radio').on('click','.hogehoge',function() {
  if ($(this).prop('checked')){
    $(this).parents('.js-checkbox-radio').find('.hogehoge').prop('checked', false);
    $(this).prop('checked', true);
  }
});
```

*この機能を複数箇所に入れる事を前提に書いてますので、もっと省略出来ると思いますがあしからず。*
PHPのserialize / unserializeをブラウザで表示するフォーム

serializeされている配列の文字列をunserializeして配列に戻し、それを編集してまたserialize、というのを簡単にやりたかったので、フォームを作ってボタンを押すと表示されるようなものを作ってみました。(配列を想定してますが、配列じゃなくても大丈夫なはず。)

**★入力した値を`eval()`しているので、コピーして使う場合はローカルで個人利用してください★
★このまま公開すると危険です★**

```php
<?php
$array = $serialized = '';
if (isset($_REQUEST['btn'])) {
    if ($_REQUEST['btn'] == 'unserialize') {
        $array = unserialize($_REQUEST['input']);
    }
    if ($_REQUEST['btn'] == 'serialize') {
        eval('$array = ' . $_REQUEST['array'] . ';');
        $serialized = serialize($array);
    }
    $array = var_export($array, true);
}
?>
<form method="POST">
<textarea name="input" rows="20" cols="80" onclick="this.focus();this.select()"><?php echo htmlspecialchars($_REQUEST['input']); ?></textarea>
<div style="margin-bottom:20px"><input type="submit" name="btn" value="unserialize"></div>

<textarea name="array" rows="40" cols="80"><?php echo htmlspecialchars($array); ?></textarea>
<div><input type="submit" name="btn" value="serialize"></div>
</form>

<textarea rows="20" cols="80" onclick="this.focus();this.select()"><?php echo htmlspecialchars($serialized); ?></textarea>
```

1つ目のtextareaにserializeされた文字列を入力し、『unserialize』ボタンを押すと、unserializeされたものが2つ目のtextareaに表示されます。
2つ目のtextareaで編集し、『serialize』ボタンを押すと、3つ目のtextareaにserializeされたものが表示されます。

`var_dump()`はよく使いますが、`var_export()`は初めて知りました。
[PHPマニュアル：var_export](http://php.net/manual/ja/function.var-export.php)

ちなみに、[エンコードマニアックス](http://encodemaniax.com/)というページもあります。
[java]JAXPのDocument文字列出力

JAXPのDOMオブジェクトを文字列出力したい場合

```
// ドキュメントビルダーファクトリを生成
DocumentBuilderFactory dbfactory = DocumentBuilderFactory.newInstance();
// ドキュメントビルダーを生成
DocumentBuilder builder = dbfactory.newDocumentBuilder();
// パースを実行してDocumentオブジェクトを取得
Document document = builder.parse(new BufferedInputStream(new FileInputStream("test.xml")));
// ルート要素になっている子ノードを取得
Element root = document.getDocumentElement();

// DOMオブジェクトを文字列として出力したい
System.out.println(document.toString());
```
これだとnullが出力されてしまいます。

```
// ドキュメントビルダーファクトリを生成
DocumentBuilderFactory dbfactory = DocumentBuilderFactory.newInstance();
// ドキュメントビルダーを生成
DocumentBuilder builder = dbfactory.newDocumentBuilder();
// パースを実行してDocumentオブジェクトを取得
Document document = builder.parse(new BufferedInputStream(new FileInputStream("test.xml")));
// ルート要素になっている子ノードを取得
Element root = document.getDocumentElement();

// DOMオブジェクトを文字列として出力
StringWriter stringWriter = new StringWriter();
TransformerFactory transformerFactory = TransformerFactory.newInstance();
Transformer transformer = transformerFactory.newTransformer();
transformer.transform(new DOMSource(document), new StreamResult(stringWriter));
String xml = stringWriter.toString();
System.out.println(xml);
```
文字列出力する場合はこのように記述します。

にしてもdocument.toString()で
DOMオブジェクトの中身が文字列出力されるよう実装されててもいい気がするんですがなぜ標準で実装されてないんでしょう

誰か理由がわかる方教えてください。
[java]プログラムからPKCS12ファイルの生成


PKCS12ファイルはjavaプログラムでは生成できないので外部プロセスのopensslを利用します。
プロセスを実行した後パスフレーズを求められます。

```
String processStr = "openssl pkcs12 -export -inkey greenwich.key -in greenwich.crt -out greenwich.p12";
Process process = r.exec(processStr);

Thread.sleep(1000); // 1秒待ってから処理しよう

PrintStream out = new PrintStream(process.getOutputStream()); 

String password = "greenwich"; // パスフレーズ
out.println(password); 
out.flush();

Thread.sleep(1000); // 1秒待ってから処理しよう
out.println(password); // 再入力パスフレーズ
out.flush();

out.close();

boolean ret = process.waitFor(10, TimeUnit.MINUTES);
process.destroy();
```
※linux環境でのコマンド
こんな感じでパスフレーズを入力し証明書と秘密鍵からPKCS12ファイルを生成します。
Product for Google IoT Solutions - Firebaseとraspberry piをリアルタイムで通信してみる

# 概要

* [Product for Google IoT Solutions - Firebaseを触ってみた](http://qiita.com/alingogo/items/ee3daebc6078dc6d8956) に、Firebaseを利用して、クライアント（ブラウザ）とサービス(firebase)の間に、リアルタイムで通信してみました。
* 今回は、IoTを考えて、デバイス(例：raspberry pi+switch button) <-> サービス <-> クライアント(例：ブラウザ)の構成で、リアルタイム通信を行います。
* 具体的は、switchボタンを押して、ブラウザは、ボタンのon/offを検知できることです。

### システム構成
![無題の図形描画.png](https://qiita-image-store.s3.amazonaws.com/0/13451/1935f25c-7200-6969-056e-07115094a0e3.png)


* switchボタンを、raspberry piと接続して、ボタンを押す時に、raspberry piから検知できます。（具体的なやり方は、後に説明します。）
* raspberry piは、ネットワーク経由して、firebaseサーバーと接続します。
* ブラウザも、ネットワーク経由して、firebaseサーバーと接続します。



# Firebaseサーバーとクライアント(ブラウザ)
* FirebaseはJavaScriptライブラリを提供しており、それを使うとブラウザに対してリアルタイムにイベント通知することができます。
    * [Firebase SDKでリアルタイム通信のために、データのwriteとread](http://qiita.com/alingogo/items/ee3daebc6078dc6d8956#firebase-sdk%E3%81%A7%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%BF%E3%82%A4%E3%83%A0%E9%80%9A%E4%BF%A1%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AB%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AEwrite%E3%81%A8read) を参照してください。
* 今回は[Codepen](http://codepen.io/)というブラウザ上のアプリを試作できるサービスでFirebaseを使ってみます。 


# raspberry pi
![aa](https://dl.dropboxusercontent.com/s/nvy30concw7u08v/%E5%86%99%E7%9C%9F%202015-12-29%2018%2029%2028%20copy.png?dl=0)


### OS構成

```
pi@raspberrypi:~ $ uname -a
Linux raspberrypi 4.1.13-v7+ #826 SMP PREEMPT Fri Nov 13 20:19:03 GMT 2015 armv7l GNU/Linux

pi@raspberrypi:~ $ cat /etc/debian_version
8.0
```


### switchボタン接続
* 実物
![ボード接続](https://dl.dropboxusercontent.com/s/1pegu6umw1qxjns/%E5%86%99%E7%9C%9F%202015-12-29%2018%2029%2019.jpg?dl=0)

* 平面図
![raspberrypi-typeb.png](https://qiita-image-store.s3.amazonaws.com/0/13451/cfdd37d2-3cc5-b282-c0f5-1a6a90aa65f5.png)
 * GPIO-18番(pin: 12番)は、switchボタンと接続します。
 * GND(pin: 6番)は、switchボタンと接続します。

### nodejsとnpm

* nodejsバージョン
    * 5.3.0
* npmパッケージ
    * [firebase](https://www.npmjs.com/package/firebase) : 2.3.2
    * [pi-gpio](https://www.npmjs.com/package/pi-gpio) : 0.0.8 - Raspberry PiのGPIOへアクセスするためのライブラリ 

# 実装

```
var gpio = require('pi-gpio');
var Firebase = require('firebase');

var pin = 12;
var host = "<firebase APP URL>";
var myFirebaseRef = new Firebase(host);

gpio.open(pin, "input", function(err) {
    intervalId = setInterval( function(){
        gpio.read(pin, function(err, v) {
            if ( v == 1 ) {
                myFirebaseRef.set({'title': 'button off'});
                console.log('button off');
            } else {
                myFirebaseRef.set({'title': 'button on'});
                console.log('button on');
            };
        });
    }, 100);
});
```

### 説明
* raspberry piと接続しているPIN12番（GPIO 18番）です。
* 0.1秒に、1回に12番のpinから、データを読み込みます。
* 1の場合は、switchボタンがoffです。
    * firebaseのtitle値を、'button off'に設定します。
* 0の場合は、switchボタンが押されて、onに表示されます。
    * firebaseのtitle値を、'button on'に設定します。


# デモ
![demo](https://dl.dropboxusercontent.com/s/ugsf8xrfb00glhk/ezgif-1036545514.gif?dl=0)
CloudAtCostにdebian9をインストール

* Ubuntu16.04のインストールに挑戦していたが無理だったため、debian9を入れることにした。

## 参考

* [CloudAtCostにArchLinuxをインストール - Qiita](http://qiita.com/tukiyo3/items/dc45b15e6155fc2f4cf5)


## インストール

* http://cdimage.debian.org/cdimage/unofficial/non-free/cd-including-firmware/
* VirtualBox5.0.12で実施した
* DISKを1GBで準備
* DISK容量が足りないため、インストール時、`標準ファイルシステム`パッケージのチェックを外す。

## 圧縮

```bash:圧縮
dd if=/dev/sda | gzip -c > stretch.dump.gz
```

## リストア

```bash:40分ほどかかる
gzip -dc < stretch.dump.gz | dd of=/dev/sda
```

## /dev/sda1の拡張

```bash:
fdisk /dev/sda
d 1 n p 1 Enter Enter Enter w
reboot

resize2fs /dev/sda1
```

```bash:
# df -h 
ファイルシス   サイズ  使用  残り 使用% マウント位置
udev              10M     0   10M    0% /dev
tmpfs             99M  2.9M   96M    3% /run
/dev/sda1        9.9G  817M  8.7G    9% /
tmpfs            247M     0  247M    0% /dev/shm
tmpfs            5.0M     0  5.0M    0% /run/lock
tmpfs            247M     0  247M    0% /sys/fs/cgroup
```

## sources.list

```diff:/etc/apt/sources.list
- deb http://ftp.jp.debian.org/debian/ stretch main non-free contrib
+ deb http://ftp.debian.org/debian/ stretch main non-free contrib
  deb http://security.debian.org/ stretch/updates main non-free contrib
```

## ファイアウォール(ufw)

```bash:
apt-get install -y ufw
sed -i 's/IPV6=yes/IPV6=no/g' /etc/default/ufw
```

```bash:設定
ufw default deny
ufw allow 22
ufw enable
```

```bash:確認
ufw status verbose
systemctl status ufw
```

## dockerのインストール

* [Installation on Debian](https://docs.docker.com/engine/installation/debian/#debian-wheezy-stable-7-x-64-bit)

```bash:
apt-key adv --keyserver hkp://p80.pool.sks-keyservers.net:80 \
  --recv-keys 58118E89F3A912897C070ADBF76221572C52609D
echo "deb http://apt.dockerproject.org/repo debian-stretch main" > /etc/apt/sources.list.d/docker.list
apt-get update
apt-get install -y docker-engine
```
Windows7のIE11でエンタープライズモードを使えるようにする方法


簡単にIE11のメニューかインターネットオプションで設定できるかと思ったら違ってたのでまとめておきます。

# 1.ローカルグループポリシーエディターを開く
スタートメニューの検索から”gpedit.msc”を検索する。
![スクリーンショット 2016-01-05 7.01.06.png](https://qiita-image-store.s3.amazonaws.com/0/9845/42544513-6a26-78db-c22b-8adcb1e4b976.png "スクリーンショット 2016-01-05 7.01.06.png")

# 2.エンタープライズモードを有効にする
”コンピュータの構成” か "ユーザの構成"で
「管理用テンプレート」→「Windowsコンポーネント」→「Internet Exploer」をひらき、「[ツール]メニューからエンタープライズモードを有効にして使用できるようにする」をダブルクリック。
![スクリーンショット 2016-01-05 7.00.37.png](https://qiita-image-store.s3.amazonaws.com/0/9845/3409446e-2f80-d2c5-f5c2-5e3629bbaaa1.png "スクリーンショット 2016-01-05 7.00.37.png")

「有効」を選んで「OK」
![スクリーンショット 2016-01-05 7.06.45.png](https://qiita-image-store.s3.amazonaws.com/0/9845/0404ff3b-e426-439f-42ad-0032df200916.png "スクリーンショット 2016-01-05 7.06.45.png")

# 3.IE11でエンタープライズモード有効
ツールメニューに「エンタープライズモード」が追加されてるので、エンタープライズモードで表示したいサイトでONに。
![toolbar.png](https://qiita-image-store.s3.amazonaws.com/0/9845/823ff66a-ed4e-7bbc-553f-a9b57ade0e8c.png "toolbar.png")

エンタープライズモード中はアドレスバーにエンタープライズモードであることが表示されます。
![epmode.png](https://qiita-image-store.s3.amazonaws.com/0/9845/e971f947-3702-7de2-b583-f433642ff0da.png "epmode.png")
SENSOR01 > 連続試験 (160105) > 開始 > グラフリンク追加

http://qiita.com/7of9/items/3ad16549017f289fa925
のシステムでの連続試験を開始した。

### 状況

- フォトトランジスタを蛍光灯に向けている
  - 蛍光灯点灯時 : 200程度
  - 蛍光灯消灯時 : 2程度
- ESP-WROOM-02には中古のCR-123A使用
  - 新品での試験は今後行う
- RPi2はOAタップからUSB変換で電源供給
- 3秒ごとにRPi2からESP-WROOM-02へUDPでデータ要求する
- RPi2は300個のデータが取れた時点でplotlyへ送る

~~本当は太陽の光を取り込みたい。そのほうが時間変化があり面白いので。~~

### 結果

https://plot.ly/284/~7of9/

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/3c7cc5a4-c246-5e98-121e-74565ed96b03.png)

7時30分から部屋の電気を消した。

カーテン越しに太陽の光が入ったようでADの値に変化が見られた。

期せずして太陽の光の取り込みを間接的にできたようだ。


### エラーで終了

15時頃にデータがアップロードされなくなっていた。

以下のエラーがRPi2側で出ていた。

```txt
2 298
2 299
2 300
Traceback (most recent call last):
  File "160104-plotlyADvalue.py", line 57, in <module>
    res = plotly_plot(xlist, ylist, 300, graphTitle, filename)
  File "160104-plotlyADvalue.py", line 27, in plotly_plot
    ,privacy='public')
  File "/usr/local/lib/python2.7/dist-packages/plotly/plotly/plotly.py", line 241, in plot
    res = _send_to_plotly(figure, **plot_options)
  File "/usr/local/lib/python2.7/dist-packages/plotly/plotly/plotly.py", line 1400, in _send_to_plotly
    r.raise_for_status()
  File "/usr/lib/python2.7/dist-packages/requests/models.py", line 825, in raise_for_status
    raise HTTPError(http_error_msg, response=self)
requests.exceptions.HTTPError: 502 Server Error: Bad Gateway
```

サーバーがおかしくなった時のエラー処理は今後。
arduino / ESP-8266 > Link > youtube: スケッチとスケッチフォルダについて > 要点の抜粋

ESP-8266(EPS-WROOM-02)の実装をしている中でSketchを使っているが、フォルダが自動生成される点についてよくわからなかった。

以下の説明動画を見つけた。
https://www.youtube.com/watch?v=xM7AK7R51zQ&index=54&list=PL_MJualihC5B5F2l_OOia2ew9rL66a_vV

要点

- inoファイルをIDEで作成時、同じ名前のフォルダが自動生成され、その下にinoファイルが置かれる
- フォルダとinoファイルが同じ名前でないとIDEがうまく動かない
- フォルダはメニューの [File]-[Sketchbook]で選択できるようになる
- フォルダに入っていない単独のinoファイルをそのまま使うとうまく動作しない
- フォルダに入っていない単独のinoファイルを開くと、フォルダ自動生成の確認ダイアログが表示される
- タブを作成すると、[タブ名].inoファイルがフォルダ以下に置かれる. (例: `Sketch_Awesome/New_Tab.ino`)
【UE4】PS3コントローラー対応表


PS3コントローラーでいろいろやってみたくなったけど対応表みたいなの見つからなかったのでなんとなく。
PS3コントローラーはXInput Wrapper for DS3でうごかしてます。

---
ゲームパッドAボタン：X
ゲームパッドBボタン：○
ゲームパッドXボタン：□
ゲームパッドYボタン：△

ゲームパッド特別仕様の左：SELECT
ゲームパッド特別仕様の右：START


ゲームパッド右ショルダー：R1
ゲームパッド右トリガー：R2

ゲームパッド左ショルダー：L1
ゲームパッド左トリガー：L2

こんな感じ。
![90836717140ca920a721d8fc08163147.png](https://qiita-image-store.s3.amazonaws.com/0/102588/ef30879a-934f-c97e-bb79-cf2439a8cf35.png)


↓は未検証
![13113771f0b51f9582813188a653e6ab.png](https://qiita-image-store.s3.amazonaws.com/0/102588/ddd0d947-3d78-91a5-a29c-5064db7fdc3b.png)
URLのパラメータによって要素のスタイルを変更する方法

jsでやるほどでもないし、cssで出来ないかな〜と調べていたらtargetという擬似クラスが存在するらしい。
よくページ内リンクで使われるあれ「 URL#section1 」 みたいなやつです。
ただしくはパラメータではなく、フラグメント識別子という名称で特定の要素に対して操作を行いたい場合に使用するとのこと
http://d.hatena.ne.jp/keyword/%A5%D5%A5%E9%A5%B0%A5%E1%A5%F3%A5%C8%BC%B1%CA%CC%BB%D2

このtarget擬似クラスを使用してスタイルを書いてみる

```html:sample.html
<html>
<head></head>
<body>
  <div class="box" id="box1"></div>
  <div class="box" id="box2"></div>
</body>
</html>
```

```css:sample.css
.box {
  width: 100px;
  height: 100px;
  margin: 10px;
}
/* box1のid */
.box:target{
  background-color: red;
}
/* notは引数に指定されたid or class以外 */
.box:not(:target){
  background-color: blue;
}
```
sample.html#box1 にアクセスした場合
![スクリーンショット 2016-01-05 4.34.47.png](https://qiita-image-store.s3.amazonaws.com/0/35451/14dbf468-2f63-d8fc-eb02-0b216526ebcf.png)

sample.html#box2 にアクセスした場合

![スクリーンショット 2016-01-05 4.35.01.png](https://qiita-image-store.s3.amazonaws.com/0/35451/cba054b8-ddd3-285b-5b76-9ecec1691a9b.png)
はじめての Arduino ライブラリ

## 概要
Arduino ライブラリを自作する

## はじめに
Arduino IDE で開発していますが、ソースファイルひとつだと、コード量が増えてくると大変です。
そこで、よくできた自慢の関数は、ライブラリとして切り出して、再利用しましょう。

## ライブラリを「使う」
ライブラリを「作る」前に、まず、有名なライブラリを「使う」ことから始めましょう。
ここでは、<a href="https://github.com/PaulStoffregen/Time.git" target="_blank">Time ライブラリ</a>を例にします。

1. git コマンドは、インストールされてますか？
2. clone します<br>
```
$ git clone https://github.com/PaulStoffregen/Time.git
```
3. clone したディレクトリをまるごと、zip します<br>
(この時のディレクトリ名が、インポート時のライブラリ名になります。)<br>
```
$ zip -r Time.zip Time
```
4. zipファイルを、IDE にインポートします。
(スケッチ-ライブラリをインクルード-.zip形式のライブラリをインストール)
![スクリーンショット 2016-01-05 3.17.36.png](https://qiita-image-store.s3.amazonaws.com/0/69410/d8c3053f-e6b2-b2b2-5adb-751ce21b7861.png)
これで使えるようになりました。<br>

5. インクルードして使います。
(スケッチ-ライブラリをインクルード-Time)
![スクリーンショット 2016-01-05 1.39.57.png](https://qiita-image-store.s3.amazonaws.com/0/69410/98074c74-e196-3e4a-e023-433e9957eba2.png)
6. これで、```now();``` 等の関数が使えます。
  (ヘッダ・ファイルをインクルードするだけで (リンクしないで) 使えるのは違和感がありますが、IDE側で便利にしてくれているのだと思います)
![スクリーンショット 2016-01-05 2.39.01.png](https://qiita-image-store.s3.amazonaws.com/0/69410/5de90c98-af87-beea-eacb-ea8738ebd978.png)

## ライブラリを「作る」
では、実際に作ってみましょう。
ライブラリには、```.h```(ヘッダ・ファイル) と```.cpp```(ソース・ファイル) が必要です。

1. IDEの右端にある▼ボタンを押すと、タブ(ファイル) が追加できます。<br>
  ここでは、例として、```NTP.h```と```NTP.cpp```を追加します。
![スクリーンショット 2016-01-05 1.58.40.png](https://qiita-image-store.s3.amazonaws.com/0/69410/9bb84c32-7717-83e4-b760-dc91147dcce5.png)
2. それぞれ、コードを書いていきます。
![スクリーンショット 2016-01-05 2.11.13.png](https://qiita-image-store.s3.amazonaws.com/0/69410/f2f1efa4-c9e1-32c7-31a0-c7d551c321ba.png)

 - NTP.h

```cpp
#ifndef _NTP_h
#define _NTP_h

int ntpdate();

#endif
```

 - NTP.cpp

```cpp
#include "NTP.h"

int ntpdate()
{
  return 0;
}
```

- sketch_xxx.ino
   - ```include```は、```NTP.h```がソース・ファイルと同じディレクトリにあれば```""```で囲みます。<br>
 (ソース・ファイルからの相対を意味する。)

```cpp
#include "NTP.h" // " " で囲む

void setup() {
  // put your setup code here, to run once:
}

void loop() {
  // put your main code here, to run repeatedly:
  ntpdate();
}
```


3. コンパイル&実機で実行して、うまくいくようなら、ソースを完成させましょう。
4. ```NTP.h```と```NTP.cpp```を、新しいディレクトリを作成して、そこに移動します。<br>そのディレクトリごと zip してインポートすれば、ライブラリとして「使う」ことができるようになります。
5. ライブラリとして使う際は、```include```は```<>```で囲むようにします。

```cpp
#include <NTP.h> // < > で囲む

void setup() {
  // put your setup code here, to run once:
}

void loop() {
  // put your main code here, to run repeatedly:
  ntpdate();
}
```

6. Github で公開すれば、さらにみんなハッピーに。

## ライブラリはどこにあるか？
Macの場合

インストールされたライブラリは、以下にあります。
(実は、ここに直接ディレクトリをコピーしてもよい)

```
~/Documents/Arduino/libraries/
```

ちなみに、システムで用意されているライブラリは、以下にあるようです。

```
/Applications/Arduino 2.app/Contents/Java/libraries/
```

## まとめ
Arduino ライブラリを自作しました。
ファイルを分割すれば、すっきりして見通しが立ちやすくなります。

現在、例で出てきた NTP(時刻同期)ライブラリを、鋭意作成中です。うまく出来たら公開したいと思います。

おぃそこまちがっとるよ！て箇所は、ぜひ教えて下さい！
flask-mailでさくらサーバーからメールを送ってみた

#なにをやったか？
PythonのフレームワークFlaskのExtentionであるflask-mailを使って，さくらサーバーからメールを送ってみた．
#環境(ローカル)
Python 3.4.2
Flask==0.10.1
Flask-Mail==0.9.1
そしてさくらのレンタルサーバースタンダードプランのメールサーバ

# コードと補足
import する

```py:script.py
from flask_mail import Mail, Message
```

次に，もともとあったconfigをupdateする形で，以下のものを追加した．

```py:script.py
app.config.update(
    MAIL_SERVER='[ドメイン名].sakura.ne.jp',
    MAIL_PORT=587,
    MAIL_USE_TLS=True,
    MAIL_USERNAME = 'USERNAME',
    MAIL_PASSWORD = 'PASSWORD'
    )
```

USERNAMEには，
[さくらのコントロールパネルで作った時に付ける名前]@[ドメイン名].sakura.ne.jp
PASSWORDには，さくらのコントロールパネルで作ったときのもの
をそれぞれ使用した．

あとは，公式サイト通りにやればできた．
https://pythonhosted.org/Flask-Mail/
stackとghc-modを一緒に使う時の手順

一緒に使う事に何も難しい部分はありませんが、後で忘れた時の為にメモ

## stackのインストール

https://github.com/commercialhaskell/stack/releases からDLして適当にインストール、またはインストール済みのstackで`stack upgrade`して更新。

この記事ではstackのバージョンは1.0.0以降を想定しています。

## ghc-modのインストール

### LTS-3系を使用する場合

~/.stack/global-project/stack.yamlまたは~/.stack/global/stack.yamlに次の記述を追加します。

````
extra-deps:
  - ghc-mod-5.5.0.0
  - cabal-helper-0.6.3.1
````

書いたら`stack install ghc-mod cabal-helper`でインストールします。

### LTS-4系を使用する場合

`stack install ghc-mod`でインストールします。
ghc-modは5.4.0.0、cabal-helperは0.6.3.0がインストールされます。

ghc-mod-5.5.0.0/cabal-helper-0.6.3.1をインストールする場合はLTS-3系を使用する場合と同じ設定をします。

### LTS-5系を使用する場合

`stack install ghc-mod`でインストールします。
ghc-modは5.5.0.0、cabal-helperは0.6.3.1がインストールされます。

## cabal-installをインストール

※ghc-mod-5.5.0.0/cabal-helper-0.6.3.1の場合はこの作業は不要です。

cabal-helperがcabalコマンドを使うので`stack install cabal-install`でインストールします。
インストール出来たら`stack exec cabal update`しておきます。

## cabal-helper-wrapperコマンドの初回のCabalのインストールを手動で実行
※ このステップは必須ではありません。
※ cabal-helper-0.6.3.1以降はならこのステップは省いても問題ないと思います(0.6.3.0だけ何か遅かった)。

cabal-helper-wrapperコマンドは初回実行時にCabalライブラリをcabal-helper用に~/.ghc-mod/cabal-helperにインストールします。

エディタのプラグインからghc-modを呼んだ時にこれが起こるときっとイライラすると思うので、先に適当な.hsファイルに対してghc-mod checkを行ってcabal-helper-wrapperにCabalをインストールさせます。

## 準備完了

これでghc-modが使えるようになっていると思います。
go 1.6でhttp.Clientが自動的にhttp/2を使わないようにする方法

(この記事は投稿時点でのgotip版に基づいています。go 1.6リリース時には変更される可能性があります)

Go 1.6では、通常のhttp.Clientを使ってhttpsリクエストを行うと、自動的にhttp2にアップグレードされます。大変便利ですが、検証時など、これを無効にしたいこともあります。そんなときは、次のいずれかの方法を使ってアップグレードを抑止することができます。

## 環境変数GODEBUGを使う
``GODEBUG=h2client=0``

## http.TransportのTLSNextProtoを非nilにする
```go
        // TLSNextProto specifies how the Transport switches to an
        // alternate protocol (such as HTTP/2) after a TLS NPN/ALPN
        // protocol negotiation.  If Transport dials an TLS connection
        // with a non-empty protocol name and TLSNextProto contains a
        // map entry for that key (such as "h2"), then the func is
        // called with the request's authority (such as "example.com"
        // or "example.com:1234") and the TLS connection. The function
        // must return a RoundTripper that then handles the request.
        // If TLSNextProto is nil, HTTP/2 support is enabled automatically.
        TLSNextProto map[string]func(authority string, c *tls.Conn) RoundTripper
```

```go
http.DefaultTransport.(*http.Transport).TLSNextProto = map[string]func(authority string, c *tls.Conn) http.RoundTripper{}
```

以上です。
スマートフォン発売から現在の宣伝ワードの推移を調べてみた

スマートフォンが普及した現在と、するまでの宣伝ワードの変化を調べてみます。
上からsmartphone真ん中がiPhone,一番下がandroidのワードをNgram Viewerで調べました。androidはロボットの方も出てきたので比較に使えませんが参考までに載せときます。smartphoneもiPhoneも1995年くらいから伸びてきたのですね。
iPhoneは1999年くらいですね


![hikaku.jpg](https://qiita-image-store.s3.amazonaws.com/0/33329/7a4431bb-3232-3a52-8fb7-d8789e8f4a69.jpeg)

Youtube ∋ スマートフォン　CM
まずはAndroidから
スマートフォンっていうと世間ではAndroidなんですね。初めて知りました。

#まずAndroid初期の頃　２０１１年ごろ〜

嵐 CM au スマートフォン まとめ30本
https://www.youtube.com/watch?v=L3LN8JqCySY

抽出ワード
・仕事のメールをフルキーボードで打てる
・漫画も読めるLismoBook
・遊ぼう音声Google検索
・３D動画対応
・Googleplay（カフェの場所が知りたい）
・GoogleEarth
・対衝撃・防塵・防水
・facebookプリインストール
・skype au
・google 翻訳
・テンキー搭載スマートフォン
・デコレーションメール対応
・らくがきライブ
・ウィジェット
・google latitude(居場所を共有)
・おサイフケータイ対応

技術的なものや、単なるアプリの紹介が多く見られる。自分探しのような表現はない。
またiPhoneとの比較もなく、Androidというキーワードを覚えてもらうようなブランド力を伸ばす広告が多く見られる。

![スクリーンショット 2016-01-05 0.48.51.png](https://qiita-image-store.s3.amazonaws.com/0/33329/2518a0a2-11cc-b167-eeaf-61cdaf0f20b8.png)
<img width="850" alt="スクリーンショット 2016-01-05 0.49.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/33329/eccbd4e4-0202-9929-71b4-f188d211ff2d.png">
※よく見ると今のGoogle音声検索のようにJustに東京スカイツリーの高さを表示してません
結構実用的な宣伝の表現が多いですね。

#iPhoneのCM
Youtube ∋　iPhone Cm
iPhone CM(1)
https://www.youtube.com/watch?v=LbINejBRmg8
iPhone CM(2)
https://www.youtube.com/watch?v=av_otY3cqTs

ワードはあまりなく、音楽を聴けること、写真が見れること、電話ができること,safariでインターネットできる事をお勧めしてます。

#現在　2014~2015

Android: じぶんをおもいきり
https://www.youtube.com/watch?v=FSLjqXJ1do4

Android: 一生分の写真
https://www.youtube.com/watch?v=c4ja9CzRiCw

Android: 声で自由に
https://www.youtube.com/watch?v=BbgWwrvup80

Android: どこまでも音楽
https://www.youtube.com/watch?v=AYpW_5kcuLE

KDDI au 桃太郎 CM集（29連続） 17:30
https://www.youtube.com/playlist?list=PLIvK0JXVaPzgC34k7MqBBBByBUp78tT6b

 ソフトバンク CM 白戸家「初夢」篇（30秒
https://www.youtube.com/watch?v=u4N3sgfy9qQ

<img width="864" alt="スクリーンショット 2016-01-05 1.53.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/33329/fad13f9b-2076-bc38-86db-edf3603140e8.png">
![スクリーンショット 2016-01-05 1.55.44.png](https://qiita-image-store.s3.amazonaws.com/0/33329/53b305e8-fd45-3127-32ea-f8398594572b.png)

##Android
抽出ワード
・じぶんらしく
・他とは違う。（iPhoneとは？）
・一生分の写真
・写真を美しく撮れる
・音声認識
自分探し系のワードや表現が多く見られる。
技術系の表現は少なめ。昔と変化がない。スマートフォンとは関係なような広告が多い。
一言で言うとネタ切れという感じ。

iPhone 6S x SmarTone 2015 Free Screen Replacement CM [HD]
https://www.youtube.com/watch?v=h53uhYwu6OA

 iPhone 6s – Flip a coin 
https://www.youtube.com/watch?v=RAK-X4qt7_E

##iPhone
抽出ワード
・siriの宣伝
・hey siri
・３DTouch
画面の美しさや動画像を高画質で撮れることをおすすめしています。
また自分探し系の動画もあります。

#まとめ
・Androidは昔のiPhoneのようなCMになりつつある。
・初期のAndroidは技術よりの宣伝が多かった。
・現在のAndroidは自分探し系の表現になった。また昔からわかりやすい技術的進歩を宣伝できていない。
・iPhoneはデザインの美しさ、技術的特徴をうまく表現できていた（いる）
・iPhoneは自分探し系の宣伝が多い
・iPhoneは3DTouchやデザインの変化をうまく宣伝できている

結果からするとAndroidはもっと自分探しの宣伝を減らして、技術的特徴の広告を増やすとバランスがとれると感じた。またAndroidはiPhoneを追っているというのは広告から見ても当てはまるように感じた。ソフトもハードもどちらも作っているのはAppleなのでその強みも反映できているように感じた。AndroidはデバイスごとにことなるCMの為、売り文句をうまく表現することが難しいというのもあると思う。

またこの調査は短時間の個人によるもので、正しさは保証できません。
Android Studio 2.0 Previewでbuild.gradleにPlugin is too oldエラーが発生

突然エラーが出て、IDEの補完でも修正されず困った。
調べた結果、リモートの最新のバージョンをうまく取れてない模様。
2.0が安定したらなくなることを祈ります。

## 環境

- Android Studio 2.0 Preview
- Mac OS 10.10.5

## build.gradleの設定

```groovy:app/build.gradle
buildscript {
  repositories {
    jcenter()
  }
  dependencies {
    classpath 'com.android.tools.build:gradle:2.0.0-alpha1'
  }
}
```

```groovy:build.gradle
buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:2.0.0-alpha1'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}
```

## エラーメッセージ

```
Error:(10, 0) Plugin is too old, please update to a more recent version, or set ANDROID_DAILY_OVERRIDE environment variable to "xxxx"
```

## 対策

### 1. gradleのバージョンをあげる

- appディレクトリ内のbuild.gradle内の `buildscript > dependencies > classpath` のgradleのバージョンを `2.0.0-alpha1` から `2.0.0-alpha3` に変更
- プロジェクト直下のbuild.gradle内の `buildscript > dependencies > classpath` のgradleのバージョンを `2.0.0-alpha1` から `2.0.0-alpha3` に変更


```groovy:app/build.gradle
buildscript {
  repositories {
    jcenter()
  }
  dependencies {
    classpath 'com.android.tools.build:gradle:2.0.0-alpha3'
  }
}
```

```groovy:build.gradle
buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:2.0.0-alpha3'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}
```

### 2. Clean Project

Android Studioのメニューバーから、 `Build > Clean Project` を実行。
無事ビルドに成功。安心安心。
SlackのWebhook URL取得手順

SlackのWebhook URLを取得するまでの手順を示す。


# 最終的にやりたいこと
ChatにWebサービスの結果を通知するChatOps的なことをしたい。
通知先のChatツールとしてSlackを使用する。
[Slack: Be less busy](https://slack.com/)
どのWebサービスを使うにしても、連携用にSlackのWebhook URLは必要になりそうなので、まずはWebhook URLを取得するまでの手順をまとめてみる。

## 選定理由
Slackを選んだ理由は、利用しようとしている色々なWebサービスにSlack向けのIntegrationが用意されおり、勢いがあるそうなので。以下Slackについて:

- [今最も勢いのあるチャットサービス「Slack」とは | TechStars Blog](https://techstars.jp/blog/slack-wis/)
- [チャットツール「Slack」を導入しました！なかなか便利なSlash Commandsについても。](http://maplesystems.co.jp/blog/all/business/10430.html)
- [slackとgithubを連携させる - 初心者開発メモ！](http://ryouzis.hatenablog.com/entry/2015/08/14/190349)


# Slack登録
[Slack](https://slack.com/)にユーザ登録してチームを作成する。
登録完了するとデフォルトのChat部屋が作成される。


# Webhook URL取得
Chat部屋が作成されたら、以下URLにアクセスする。

https://slack.com/services/new/incoming-webhook

通知先チャンネル(ここではデフォルトで作成される`#general`チャンネル)を
選択し、`Add Incoming WebHooks integration`を押す。

![webhooks_01.png](https://qiita-image-store.s3.amazonaws.com/0/107537/bb61596e-43cf-1df8-6c07-b871ce51f29c.png)

設定画面に遷移する。
`Descriptive Label`とか`Customize Name`を変更した場合は`Save Settings`を押す。
今回は変更しない。

![webhook_02.png](https://qiita-image-store.s3.amazonaws.com/0/107537/17e9c342-ae80-dead-8264-7281392559ae.png)

 `Webhook URL` の `Copy URL` を選択すると
クリップボードにWebhook URLがコピーされる。
(グレーアウトしている箇所にもテキストでURLが表示されます)

![webhooks_03.png](https://qiita-image-store.s3.amazonaws.com/0/107537/eca1d6ea-9b50-5044-186d-a9a0dc0c32ee.png)


# 登録済みのIncoming WebHooks一覧
https://slack.com/apps/A0F7XDUAZ-incoming-webhooks
から閲覧ができる。


# おまけ: Slackクライアント
SlackはWebブラウザ以外にも専用アプリからアクセスすることもできる。
[Download Apps | Slack](https://slack.com/downloads)
行に対するアノテーションを扱うデータフォーマットが欲しい

どういうことかというと、行に対して1対1でアノテーションや情報を表示するためのデータフォーマットが欲しい。

![annotation](https://monosnap.com/file/YanHBAVT33wdDM2eUF0SxsArPf3fM9.png)

[Docco](http://jashkenas.github.io/docco/ "Docco")とかみたいなソースとアノテーションを横に並べるようなUIとかを作りたい時に、それの元データをどう持つかと色々考えてた。

- http://documentcloud.github.io/backbone/docs/backbone.html

コードカバレッジが近そうと思って色々調べたけど、コードカバレッジにはカウントだけを扱っていてアノテーションを持たないフォーマットが殆どだった。

- [Linux Test Project - Coverage » lcov](http://ltp.sourceforge.net/coverage/lcov/geninfo.1.php)

gcov/lcov

- [istanbul/coverage.json.md at master · gotwarlost/istanbul](https://github.com/gotwarlost/istanbul/blob/master/coverage.json.md "istanbul/coverage.json.md at master · gotwarlost/istanbul")

JavaScriptのコードカバレッジツールであるistanbulは式レベルのコードカバレッジを出すので行レベルじゃない[coverage.json](https://github.com/gotwarlost/istanbul/blob/master/coverage.json.md "coverage.json")という形式をもってた。

- [Source Map Revision 3 Proposal - Google ドキュメント](https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit "Source Map Revision 3 Proposal - Google ドキュメント")
- [SourceMap - Source Map Revision 3 Proposal (Ver. November 18, 2013) 抄訳メモとリンク - Qiita](http://qiita.com/kozy4324/items/1a0f5c1269eafdebd3f8 "SourceMap - Source Map Revision 3 Proposal (Ver. November 18, 2013) 抄訳メモとリンク - Qiita")

Source Mapは原理的に可能な気がするけど、実装したい事に対してあまりにも複雑な仕様となってる感じがする(元々の用途が違う)

[Codecov](https://codecov.io/ "Codecov - Code Coverage")独自のフォーマットである[Codecov JSON](https://gist.github.com/codecov-io/96e1addb96856a9034c2 "Codecov JSON example")が目的と同じものを持ってる。

```json
{
  "coverage": {
    "path/to/file.py": [null, 1, 0, null, true, 0, 0, 1, 1],
    "path/to/other.py": [null, 0, 1, 1, "1/3", null]
  },
  "messages": {
    "path/to/other.py": {
      "1": "custom message for line 1"
    }
  }
}
```

けど、このサービスに依存したいわけでもないので、こういうフォーマットの仕様が欲しいと思ったけど見つからない。

フォーマットがあればそれに対応したツールとか作って回しやすいので欲しいという話。

```json
{
  "coverage": {
    "path/to/file.py": [
       "message",
       null,
       "1"
    ]
  }
}
```

や

```json
{
  "coverage": {
    "path/to/file.py": {
       "1": "message",
       "2-5": "messages"
    }
  }
}
```

みたいな感じでJSONとかで、シンプルなフォーマットがあればよかった気がする。
ほんとにないのかなー
VyOSでL2TP Over IPsecによるVPNサーバ構築

#ログイン
ユーザ名、パスワードともに「vyos」
#ネットワークの設定
```
$ configure
# set interfaces ethernet eth0 address [IPADDRESS]/[MASK]
# set system gateway-address [GATEWAY ADDRESS]
# set system name-server [NAME SERVER ADDRESS]
# set system time-zone Asia/Tokyo
# delete system ntp server
# set system ntp server ntp.jst.mfeed.ad.jp
# set service ssh
# commit
# save
# exit
```
#疎通確認
```
$ ping 8.8.8.8
```
#ユーザ作成
```
$ configure
# set system login user [USERNAME]
# set system login user [USERNAME] authentication plaintext-password [PASSWORD]
# commit
# save
# exit
```
#初期ユーザ削除
```
$ configure
# delete system login user vyos
# commit
# save
# exit
```
#公開鍵認証の設定
```
$ ssh-keygen
$ cat ~/.ssh/id_rsa.pub
$ cat ~/.ssh/id_rsa
$ configure
# set system login user [USERNAME] authentication public-keys [USERNAME]@[HOSTNAME] type ssh-rsa
# set system login user [USERNAME] authentication public-keys [USERNAME]@[HOSTNAME] key [PUBKEY]
# set service ssh disable-password-authentication
# commit
# save
# exit
```
#IPsecの設定
```
$ configure
# set vpn ipsec ipsec-interfaces interface eth0
# set vpn ipsec nat-traversal enable
# set vpn ipsec nat-networks allowed-network 0.0.0.0/0
# commit
# save
```
#L2TPの設定
```
# set vpn l2tp remote-access outside-address [IPADDRESS]
# set vpn l2tp remote-access outside-nexthop [GATEWAY ADDRESS]
# set vpn l2tp remote-access client-ip-pool start 192.168.110.1
# set vpn l2tp remote-access client-ip-pool stop 192.168.110.100
# set vpn l2tp remote-access dns-servers server-1 8.8.8.8
# set vpn l2tp remote-access dns-servers server-2 8.8.4.4
# set vpn l2tp remote-access ipsec-settings authentication mode pre-shared-secret
# set vpn l2tp remote-access ipsec-settings authentication pre-shared-secret [SHARED SECRET]
# set vpn l2tp remote-access authentication mode local
# set vpn l2tp remote-access authentication local-users username [USERNAME] password [PASSWORD]
# commit
# save
```
#NAT設定
```
# set nat source rule 999 outbound-interface eth0
# set nat source rule 999 translation address masquerade
# commit
# save
# exit
```
#運用中に使うかもなコマンド
###クライアント側IPアドレス固定
```
set vpn l2tp remote-access authentication local-users username TESTUSER static-ip 192.168.1.105
```
###ユーザ無効化
```
set vpn l2tp remote-access authentication local-users username TESTUSER disable
```

#参考
[さくらのVPSでVyattaを使ったVPNトンネルの構築](http://blog.d6rkaiz.com/archives/2013/09/07/configure-personal-vpn-tunnel-in-vyatta-with-sakura-vps/)
[さくらのVPSにVyOSをインストールする](http://kentai-shiroma.blogspot.jp/2014/06/vpsvyos.html)
[VyOSでIPSec VPNの設定](http://qiita.com/khayama/items/c63d4d5f02abdf348889)
Rails 4系からRails 5.0.0.beta1にアップデートした時に引っかかったこと

自分が趣味で開発している[KPTBoard](https://github.com/f96q/kptboard)をRailsの4系からRailsの5.0.0.beta1にアップデートした時に引っかかった点で他のアプリでもアップデートする時にありそうなことを書きます。

## deviseとcapybaraはgithubのmasterブランチから取得しないと動かなかった

```rb
gem 'devise', github: 'plataformatec/devise'
gem 'capybara', github: 'jnicklas/capybara'
```

## belongs_toで指定しているものは、必須になる

### 例

```rb
class Label < ActiveRecord::Base
  belongs_to :user
end
```

で

```rb
validates :user
```

とかしてなくても必須になるようです。必須じゃない場合はoptionalで設定します。

```rb
class Label < ActiveRecord::Base
  belongs_to :user, optional: true
end
```

## 作業コミット

https://github.com/f96q/kptboard/commit/f30cd0a4d23eff3f1da04cc517b47bf3da7c0f41
複数のDBに対するマイグレーションのあれこれ

railsで複数のデータベースを使いたい時がある。
そんな時は[@eagletmt](https://twitter.com/eagletmt)さんが作成した[switch_point](https://github.com/eagletmt/switch_point)を使うと良い感じになれる。
使い方などは[GitHubのドキュメント](https://github.com/eagletmt/switch_point)を見れば何も困らない。

**本題はこっから**
例えばメインをmysqlにして2つ目をpostgresqlなどにした場合にpostgresql側のマイグレーションどうしようってなる。
ちなみにdatabase.ymlはこんな感じ

```database.yml
・・・
development_postgresql:
  adapter: postgresql
  host: localhost
  database: hogehoge
  username: postgres
  password: 
  pool: 5
  timeout: 5000
```

## **シンプルなパターン**
どちらもスキーマが一緒でmigrationの設定などを共有して使用する時

### 完成系

```sh
$ RAILS_ENV=development_postgresql rake db:create
$ RAILS_ENV=development_postgresql rake db:migrate
```

### 解説
* `rake db:create`を定義している所を見てみる[`ActiveRecord::Tasks::DatabaseTasks.create_current`](https://github.com/rails/rails/blob/master/activerecord/lib/active_record/railties/databases.rake#L16)ってのを呼んでるっぽい
* `ActiveRecord::Tasks::DatabaseTasks.create_current`の呼び出し元は[ここ](https://github.com/rails/rails/blob/master/activerecord/lib/active_record/tasks/database_tasks.rb#L106)
* そして一番のポイントとなるのが[ここ](https://github.com/rails/rails/blob/master/activerecord/lib/active_record/tasks/database_tasks.rb#L261)
  * ここで`RAILS_ENV`に応じたdatabase.ymlの設定を呼んでるっぽい


## **ちょっとややこしいパターン**
ことなるスキーマでマイグレーションファイルも違うのを使用したい時など
ちょっとややこしいことをする時はtaskを書いてあげる。

### 完成系

```psql.rake
namespace :psql do
  DEFAULT_DB_CONF = 'development_postgresql'
  DEFAULT_ENV = 'development'

  task :load_config do
    db_conf = ENV['PSQL_DB_CONF'] ||= DEFAULT_DB_CONF
    env = ENV['RAILS_ENV'] ||= DEFAULT_ENV
    ActiveRecord::Base.configurations = {env => ActiveRecord::Base.configurations[db_conf]}
    
    # migrationを変えたいときはこれに代入する。 default: [db/migrate]
    # ActiveRecord::Migrator.migrations_paths = ["#{Rails.root}/db/hoge_migrate"]
  end

  # データベース作成
  task create_db: :load_config do
    ActiveRecord::Tasks::DatabaseTasks.create_current
  end

  # マイグレーション
  task migrate: [:environment, :load_config] do
    ActiveRecord::Tasks::DatabaseTasks.migrate
  end

end
```

### 解説
参考にするのは`rake db:create`などを呼び出した時に呼ばれる[databases.rake](https://github.com/rails/rails/blob/master/activerecord/lib/active_record/railties/databases.rake)
メインは`load_config`タスク。
動きとしては`db_conf`にdatabase.ymlのどの設定を取り出すかを指定。
後はRAILS_ENVに応じて設定が読まれるのでdatabase.ymlのhashをRAILS_ENVに応じて作成して`ActiveRecord::Base.configurations`にいれるだけ。

よく「rails 複数のDB migrate」と検索すると`Rails.application.config.paths`にschemaの場所とかdatabase.ymlの場所を指定してるけど、今回switch_pointで１つのdatabase.ymlにいれているので、ymlファイルをわけたくなかったため、こんな実装になっている。

最適な解ではないかもしれないけど。。。

## **やってみて**
とりあえずドキュメント読めばなんとかなる。
ただとりあえずなのでRails Wayに乗れていない感があるのでもっとスマートなやり方があったら教えてほしい
[iOS] ターゲットごとに Asset Catalog( .xcassets) を切り替えたい場合

※下記のTipsは `CocoaPods` を使用している前提です。

App Icon や Launch Imageは簡単にターゲット毎に反映できますが、
`.xcassets` 内の画像はうまく反映されないことがあります。

その際の対処方法について

## 開発環境

```
Xcode 7.2
Swift 2.0
CocoaPods 0.39.0
```

## Tips

1 ) 分岐用に `xcassets` を複数作成


```text:一例
image.xcassets //=> 本番用
image_dev.xcassets //=> dev用

※一部の画像だけを分岐させたい場合は共通画像用の「xcassets」も作成するなど
プロジェクト毎にカスタマイズを
```

2) Target Memebershipを分岐

**image.xcassets**
![c734dedd54f0a3965affea1a077eaa05.png](https://qiita-image-store.s3.amazonaws.com/0/30253/b6113605-bd77-7341-cf54-8e7312ce7419.png)

**image_dev.xcassets**
![82b75a5ee57dd7953e10107c65df17c5.png](https://qiita-image-store.s3.amazonaws.com/0/30253/1af8efb8-f647-6eff-2118-2b782bc6464a.png)


3) Podfile内に下記を追記して、 `pod install`

```rb:Podfile 
post_install do |installer|
    installer.pods_project.targets.each do |target|
      folder_path = "Pods/Target\\ Support\\ Files/Pods/Pods"
      %x~ if [ ! -f #{folder_path}-resources.sh.bak ]; then cp #{folder_path}-resources.sh #{folder_path}-resources.sh.bak; fi ~

      %x~ sed '/WRAPPER_EXTENSION/,/fi\\n/d' #{folder_path}-resources.sh > #{folder_path}-resources.sh.temp ~
      %x~ sed '/*.xcassets)/,/;;/d' #{folder_path}-resources.sh.temp > #{folder_path}-resources.sh ~
      %x~ rm #{folder_path}-resources.sh.temp ~
    end
end

```

以上です。これでターゲット毎に`.xcassets` 内の画像が反映されます。

##  Pod install時にやってること
**Pods > Targets Support Files > Pods > Pods-resources.sh**の
下記の箇所が削除されます(コメントアウトしてるところ）
![Screen_Shot_2015-12-04_at_2_31_53_PM.png](https://qiita-image-store.s3.amazonaws.com/0/30253/05412d22-92e8-a734-cad0-5b10b812b379.png)