OmniAICreator/Qiita-1.07M huggingface dataset:
Microsoft Emotion APIをJavaからイメージデータを直接送信して呼び出す。

#Emotion API って？
Microsoft Azure CognitiveServicesの一つで、写真などの人の顔から感情を読み取ってくれます。
詳しくは[こちら](https://azure.microsoft.com/ja-jp/services/cognitive-services/emotion/)
2017/6/24現在、ある程度無料で使うことができます。
#何故、Javaか？
特に理由はありません。
公式にJavaでのサンプル実装があるのですが、画像を上げたURLを送るものしかなかったので画像を直接送る方式の実装を試してみた。

#環境
Java：1.8.0_131
Emotion Api : 1.0

#手順
##サブスクリプションの登録

サブスクリプションを登録する。
[公式サイト](https://azure.microsoft.com/ja-jp/services/cognitive-services/emotion/)の「試用版」というタグから作成を押すと登録可能、32桁のキーが払い出されるので保存しておく。

##pom.xmlへ依存の追加
以下を追加する。

```xml:pom.xml
<dependency>
  <groupId>org.apache.httpcomponents</groupId>
  <artifactId>httpclient</artifactId>
  <version>4.5.3</version>
</dependency>
```

##EmotionApiClientの作成
ほぼサンプルソース通りだが、以下の通り実装した。メソッドの引数はイメージファイルのバイト配列。結果はJSONのまま呼び出し側に返す。

```java:EmotionApiClient.java
import java.net.URI;

import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.client.utils.URIBuilder;
import org.apache.http.entity.ByteArrayEntity;
import org.apache.http.impl.client.HttpClientBuilder;
import org.apache.http.util.EntityUtils;

public class EmotionApiClient {

	private final String KEY = "上で発行した32桁のキー";

	String postApi(byte[] image) {
        HttpClient httpClient = HttpClientBuilder.create().build();


        try
        {
            URIBuilder uriBuilder = new URIBuilder("https://westus.api.cognitive.microsoft.com/emotion/v1.0/recognize");

            URI uri = uriBuilder.build();
            HttpPost request = new HttpPost(uri);

            request.setHeader("Content-Type", "application/octet-stream");
            request.setHeader("Ocp-Apim-Subscription-Key", KEY);

            ByteArrayEntity reqEntity = new ByteArrayEntity(image);
            request.setEntity(reqEntity);

            HttpResponse response = httpClient.execute(request);

            //ステータスの確認はした方がいい。
            HttpEntity entity = response.getEntity();

            if (entity != null)
            {
            	return EntityUtils.toString(entity);
            }
        }
        catch (Exception e)
        {
            System.out.println(e.getMessage());
        }

		return "";
	}
 }

```


#終わりに
想像以上に簡単に実装できました。明るいところや暗いところでどの程度認識できるのかを今後試していきたいと思います。
[Swift] 重ねたUINavigationControllerの下の画面を透過する

#[Swift] 重ねたUINavigationControllerの下の画面を透過する
StoryBord:
**　storyboard → Navigation Controller → Attributes → View Controller　**
**　Presentation : Over Current context　**

```
<navigationController modalPresentationStyle="overCurrentContext"...
```

Source:

```
override func viewDidLoad() {
    super.viewDidLoad()
    view.backgroundColor = UIColor.clear
}
```
seabornで個別に作成したAxesオブジェクトを使う

matplotlibをラップしたseabornですが、`seaborn.distplot` などの描画関数はmatplotlibのインポート時にグローバルに作成するAxesオブジェクトをデフォルトで参照します。

以下のようにaxキーワード引数に個別作成したAxesオブジェクトを渡すことで、こちらを参照するようになります。

```python:
import matplotlib.pyplot as plt
import seaborn as sns

fig = plt.figure()
ax1 = fig.add_subplot(1, 1, 1) # 明示的にAxesを作成する
sns.distplot(data, ax=ax1) # ax1を参照するようにする
```

ちなみに、デフォルトの動作は以下と等価です。`plt.gca()`は、（現在アクティブな）グローバルに参照されるAxesオブジェクトを返します。

```
sns.distplot(data, ax=plt.gca())
```
【Electron連載】第１回 準備編ーアプリインストール

[↑【Electron連載（目次）】Electronでアプリ完成までのメモ](http://qiita.com/nullpointer_t/items/f74edc1f59cac42946ba)

ほな、開発環境を構築するで～。

# Nodist & Node.js インストール

https://github.com/marcelklehr/nodist/

まずはNode.jsのバージョン切り替えができるNodistのインストールな。
最新のExeファイルをダウンロードしてダブルクリックでインストール開始や。
とくになにも気にせえへんと次へでインストール完了や。
使い方はこっちを参考にしてや。
[node.js インストール備忘録（windows7）](http://qiita.com/yokoh9/items/20d6bdc6030a3a861189)

# Git for windows

https://git-for-windows.github.io/

ソース管理はGitHub使うさかい、Gitは必要や。
それにGitBashも使えるようになるから一石二鳥やで。

# ConEmu

https://conemu.github.io/

やっぱ、Win標準のCMD.EXEでは物足れへんわ。
タブ表示、GitBashも使えて超便利。

# WinMerge

http://www.geocities.co.jp/SiliconValley-SanJose/8165/winmerge.html

Windowsでは超定番の差分確認ツールや。
.gitconfigを設定して連携するようにするで。

# Visual Studio Code

https://code.visualstudio.com/

コードエディタは今回はVSCodeを使うで。
デバッグ環境も整てやりたいわ。

# 次回

＞ [第２回　準備編－Node.jsパッケージインストール](http://qiita.com/nullpointer_t/items/3ce8c4b60d3c163ee8e8)
chainer.functions.relu に 絶対cuDNNを使わせる方法メモ

# はじめに

Qiita初投稿です。

本記事ではタイトルの件について書きますが、chainer は、そうまでしなくても使うべきところでは cuDNN を使い、使わなくてもいいところでは使わない設計になっているような気がしています。なので、本記事は、単にデフォルトOFFの箇所でも cuDNN を使わせてみたかった、単にQiitaに投稿してみたかった、というモチベーションで書かれたモノと思っていただいてかまいません。

実行環境は、Windows10, Python 3.5, Chainer 2.0, CuPy 1.0, CUDA 8.0, cuDNN 5.1 です。

# 動機： ReLU 等活性化関数は cuDNN を使わないようだ。使わせたい！

[ReLU](https://docs.chainer.org/en/stable/_modules/chainer/functions/activation/relu.html?highlight=should_use_cudnn) 等の実装では、cuDNN 有効な chainer 環境でもデフォルトでは cuDNN 関数を使わないようです。
内部的には、should_use_cudnn('==always') を参照し、Trueの時だけ cuDNN を使用し、Falseの時には cupy 側の実装を実行するようです。この設定値を True にする方法が、ぱっとググってもわからなかったので試して確認しました。
その方法をメモしておきます。

# 結論: chainer.using_config('use_cudnn', 'always') を使う

以下のようなコードで設定できました。

```py3
import chainer
import chainer.functions as F
import cupy
import time

x = chainer.Variable(cupy.arange(-10., 10., 0.01))

with chainer.using_config('use_cudnn', 'always'):
    y = F.relu(x)

```

# 使わせてみた結果： 実行時間に大きな差は見受けられない

手元のマシンで確認しました。

|  マシン構成            |        |
|:-----------------|------------------:|
| CPU             |              Intel Core i7-4790S CPU @ 3.20GHz|
| Memory             |              16GB|
| GPU           |            NVIDIA GeForce GTX 970|
| GPU VRAM             |              4GB|
| GPU driver version         |       382.05     |

|  ソフトウェア構成            |        |
|:-----------------|------------------:|
| OS             |              Windows 10 Pro |
| Python               |              3.5.3 |
| Chainer           |             2.0.0 |
| CuPy           |             1.0.0.1 |
| CUDA           |             8.0 |
| cuDNN           |             5.1 |



以下のコードを実行して実行時間を測定・比較しました。

chainer.using_config('use_cudnn', c) を設定する箇所で、強制的に cuDNN を使わせたい場合に `c='always'`, そうでないときは `c='auto'` としました。この辺の設定は、[chainerソース](https://docs.chainer.org/en/stable/_modules/chainer.html) を見て、あてずっぽうで設定しています。 

```py3
cond = ['always', 'auto']
func = [F.relu, F.tanh, F.elu]
for f in func:
    print('{}:'.format(f.__name__))
    for c in cond:
        with chainer.using_config('use_cudnn', c):
            s = time.time()
            for i in range(100):
                y = F.relu(x)
            e = time.time()
            
            should = chainer.should_use_cudnn('==always')
            print('\tc={:6}, should={:5}: time = {:.3f} sec.'.format(c, str(should), e-s))
```

結果は以下が出ましたが、何度か実行すると傾向含め変動したので、当てになりません。
ただ、大きな差が無いことは確かなようなので、デフォルトOFFなのも納得といったところ。

```
relu:
	c=always, should=True : time = 0.017 sec.
	c=auto  , should=False: time = 0.014 sec.
tanh:
	c=always, should=True : time = 0.015 sec.
	c=auto  , should=False: time = 0.013 sec.
elu:
	c=always, should=True : time = 0.014 sec.
	c=auto  , should=False: time = 0.013 sec.
```

動かせたので良しとします。
以上。
選択された合計数量　備忘録

リストビューのチェックボックスにチェックが入ったものを
ボタン押下後、トーストに表示するという処理の作成

画像表示はいったんお休み。笑



```java
private ArrayList<QuantityInfo> list = new ArrayList<>();
```

```java
    private void selectList() {
        int sum = 0;

        for (QuantityInfo info : list) {
            // チェックボックスにチェックが入っている場合
            if (info.isSelected()) {
                // 数量を加算する
                sum += info.quantity;
            }
        }
        // トーストに結果表示
        String viewQuantity = String.valueOf(sum);
        Toast.makeText(MainActivity.this, viewQuantity, Toast.LENGTH_SHORT).show();
    }
```

時間がかかってしまったのは、リストビュー押下の処理なのか
チェックボックス押下の処理なのか頭の中で混乱してしまった事。

ビューのポジション云々はまったく関係のない話で、思ったよりも単純な処理だった。

拡張for文の使い方は慣れが必要だが、頭の中では理解出来ているかな…
まだ理解できていないこと

##PHPプログラミング初心者として雑記
学べば学ぶほど解らない関数や解らない単語が沢山出てくる。プログラミングの勉強は非常に楽しい。あんなことがしたい、こんなことがしたいと思ったことが出来た時、それがベテランの人や中級、上級の人から見て些細なことだとしても形になる、思った通りに動くと小さいながらも達成感が得られるからだ。会社のサービス立ち上げの為に勉強しているのだが素人集団(当初はHTMLすら理解してない)が集まった状態からのスタートなので、かなり時間が過ぎてしまっている。

CodeCampというWeb学習サイトの教科書を見て勉強しているのだが進めば進むほど(というかほぼ終えて)3,000円～5,000円の書籍を何冊か購入して読みながら勉強した方が遥かに安上がりだったんじゃなかろうかと思えてくる。ちなみに自分は教科書を読んで進めただけでCodeCampの講師には一切お世話になってない。読んでみたい書籍は何冊か候補があるが買うところまで行ってないのが現状。

...PHPをCodeCampで勉強し始めて4ヶ月以上経ってた...勉強始めてから2週間くらいで自分と同等かそれ以上のレベルに達してる人のブログとか見かけるけど自分の習得スピードめちゃくちゃ遅いな...

##これってなんぞや？
1．オブジェクト指向

オブジェクト指向ってなあに？色々、自分なりに調べてみたけどいまいち理解できなかった。ふわぁーっとしたイメージは解るんだけどそのコードの記述方法がよく解らない。これからWebアプリやWebサービスの開発担当が主になって行くのでオブジェクト指向の考え方については理解を深めて行かなければと初心者ながら思ってます。よく自動車で例えられるけども正直解らん。

2．フレームワーク

フレームワークはある程度理解してるつもり。初心者の勝手なイメージで言うと「便利な関数が予め準備されている外部ファイル」というイメージ。(違うと思うけど初心者のイメージなので許して！)
使えるようになれば便利なんだろうなぁっていうイメージはある。色々な種類のフレームワークがあるのは知ってるけど日本で流行ってるのはCakePHPなのね。他のフレームワークが日本であまり受け入れられなかったのはなんでだろう？

###自分なりのこの記事のまとめ
知らない関数があったり、知らない言葉や知らない概念があったり、理解しなければこの先、プロのプログラマとして失格じゃねーかっていうことが山ほどある。疑問に思ったらすぐ調べる、調べられないなら調べたい候補としてメモる。他にもインジェクション対策やディレクトリトラバーサルなどのセキュリティ関連への理解も深めなければならないと思ってます。習得スピードは遅いかもしれないけど1つ1つ、目の前のやれることをこなして行って1つ1つ、理解を深めて行きたいと思ってます。
完全な自分のためのメモ

# 概要
[エンジニアイベント](https://techplay.jp/community/%E5%B0%8F%E6%A9%8B%20%E4%BF%8A%E4%BB%8B)をやる時に毎回設定するSlackコマンドまとめ。。。
自動化したい。。。


# 羅列

```
/remind {channel} to "@group :shuzo: もくもく開始までにやることを宣言しましょう :shuzo:
:fire::shuzo:  みんなもっと熱くなれ :shuzo: :fire:
　
以下のテンプレがオススメ
【今日やること】例:hogeします:fire:
【困ってること(任意)】例:hogeのセットアップでつまづきそう助けて" on {20yymmdd} at 1245
```

```
/remind #mqmq_20170625 to "@group 懇親会開始までに、成果報告をして爽やかな気分で乾杯しましょう :shuzo: :beers:  
引き続きもくもく続けるのもありだよ :o: " on {20yymmdd} at 1630
```
【しずおかアプリ部】活動ログ　第40回

![しずおかアプリ部2.jpg](https://qiita-image-store.s3.amazonaws.com/0/88105/ee800648-fa25-1829-20c3-bad9c2055d35.jpeg)

##■公式サイト##
[http://monolizm.com/shizuoka-app](http://monolizm.com/shizuoka-app)
「Slack」も利用しています。 shizuapp で検索し、ご参加ください。

##■タイトル##
第４０回


##■開催日##
２０１７年６月２４日（土）　１６：００～１８：００


##■参加者##
８名


##■活動内容（概要）##
・最近の話題の技術ニュース、告知
・部員さんプレゼン「Fusion360　実践・解説」
・菅原プレゼン「Unityはじめるよ　～シェーダーをいじってみよう～」
・TEA BREAK　



##■活動内容（詳細）##

【実演・プレゼン】

**・最近の話題の技術ニュース、告知**
　　・WWDCの話
　　・デジゲー博
　　・XboxOneX

<hr>


**・部員さんプレゼン「Fusion360　実践・解説」**

　　　■Fusion360の実践・解説
　　　　フリーCADソフト「Fusion360」の使い方を日本語チュートリアルを見ながら進めた。
　　　　今回が最終回。

　　　　材質の設定を行い、最終的な見た目を作り上げた。
　　　　材質を設定することで、質量も自動計算される。（面積なども自動計算）
　　　　熱伝導シミュレーションや、材質の強さのシミュレーションも行えるとのこと。

　　　　最終レンダリングを行い、製品化時のイメージを見ることもできる。
　　　　サーバーでレンダリングする方法と、ローカルでレンダリングする方法がある。

　　　　CAD以外の3Dソフトで作ったデータもクラウド上からは読み込むことができる。



　　![無題(1).png](https://qiita-image-store.s3.amazonaws.com/0/88105/147087f1-5d9c-7a74-0ec4-e00afd335da1.png)
[Fusio360の日本語チュートリアルはこちらから](http://www.myautodesk.jp/jeff/material.html)


<hr>


**・菅原プレゼン「Unityはじめるよ　～シェーダーをいじってみる～」**
　　　カスタムシェーダーを作れるように、シェーダについて勉強しました。

　　　・Standard Surface Shaderを使えばライティングの計算をUnityに任せられる
　　　・Unlit Shader は高度な知識が必要だが自由度が高い

　　　今回はStandard Surface Shaderを自作することに。
　　　デフォルトで作られるシェーダーは勉強には難しいので、
　　　一旦中身を全部消し、カラーだけ変更できるシェーダーに変更。

　　　そのシェーダーを元に、次は透過対応シェーダーに拡張。
　　　最後は、さらにテクスチャが扱えるようにシェーダーを拡張。

　　　<img width="1164" alt="スクリーンショット 2017-06-24 20.12.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/88105/cb797533-9d3f-ae85-91a1-6913ed832c5e.png">

　　　覚えることは多いが、自分が希望する表現ができるように勉強を続けたい。

　　　　[第40回_プレゼン資料(～シェーダーをいじってみる～).pdf](http://monolizm.com/sab/pdf/第40回_プレゼン資料(～シェーダーをいじってみる～).pdf)　
[プロジェクト一式](http://monolizm.com/sab/src/shader.zip)



<hr>





**・TEA BREAK**
　　　・部員さんがBlenderで作った女の子モデルを見せてもらった。
　　　　　今後のアプリ部で詳細をプレゼン予定！
【Electron連載（目次）】Electronでアプリ完成までのメモ

よっしゃ！Electronでアプリの完成まで頑張るで。
何のアプリを作るかわナイショやけどな。

#開発環境&バージョン

* OS => Windows10 64bit
* lang => TypeScript @2.3.4
* Editor => Visual Studio Code @1.13.1

#連載

##準備編

###[第１回　準備編－アプリインストール](http://qiita.com/nullpointer_t/items/432069e6b3ee3a2560f4)

###[第２回　準備編－Node.jsパッケージインストール](http://qiita.com/nullpointer_t/items/3ce8c4b60d3c163ee8e8)

###[第３回　準備編－VSCodeでデバッグ準備](http://qiita.com/nullpointer_t/items/c93700f4eb349a1f1844)

##基本編
###[第４回　基本編－メイン／レンダラープロセスの話](http://qiita.com/nullpointer_t/items/83cc14225b677f0d72fa)

###[第５回　基本編－ウィンドウを作って表示](http://qiita.com/nullpointer_t/items/0131109fa49185a34fa4)

###第６回　基本編－ダイアログ表示

###第７回　基本編－メニュー作成

###第８回　基本編－ショートカット登録

###第９回　基本編－クリップボード操作
iPad Pro Smart Keyboard で自動大文字入力をキャンセルする

### 問題
iPad Pro で Smart Keyboard を使って英語入力すると、
最初の文字が勝手に大文字になる。

### 環境
- モデル：iPad Pro (9.7-inch)
- バージョン：10.3.2

### 解決方法

Smart Keyboard もしくは外部キーボードで自動大文字入力をするには、
設定＞一般＞キーボード＞ハードウェアキーボード＞
「自動大文字入力」をオフにする。

ちなみに、ソフトウェアキーボードの自動大文字入力オフは
設定＞一般＞キーボード＞
「自動大文字入力」をオフにする。
mysqlがどうしても起動しない

# 事象

mysql使って作業している最中、Macが突然シャットダウン。

### スタートできない
```
$ mysql.server start
Starting MySQL
.. ERROR! The server quit without updating PID file (/usr/local/var/mysql/XXXXXXXX.local.pid).
```
のエラーが出るようになってしまった。
PIDファイルをチェックしてみると

```
$ ls -la /usr/local/var/mysql/XXXXXXXX.local.pid
ls: /usr/local/var/mysql/XXXXXXXX.local.pid: No such file or directory
```
ファイルが存在しなかった。これは困る

### stopもできない
ちなみにstopはstopでこれもできなくなってしまっている

```
$ mysql.server stop
 ERROR! MySQL server PID file could not be found!
```

### セーフ起動もできない
```
$ mysqld_safe
2017-06-24T08:14:13.6NZ mysqld_safe Logging to '/usr/local/var/mysql/XXXXXX.local.err'.
2017-06-24T08:14:13.6NZ mysqld_safe Starting mysqld daemon with databases from /usr/local/var/mysql
2017-06-24T08:14:14.6NZ mysqld_safe mysqld from pid file /usr/local/var/mysql/XXXXXXX.local.pid ended
```
と出て、結局何も起きない

PIDファイルを自分で作って、chmodやchownも試したが、実行結果は変わらず
```
$ sudo chown _mysql:_mysql /usr/local/var/mysql/XXXXXX.local.pid
```
所有権を変えたり、chmodで誰でも書き込めるようにしたり、sudoからmysqlを立ち上げたりとしたけど何をしても変わらず。


### Macを再起動してもダメ

### しょうがないので再インストール

DBの中身はたいしたことないので、まずアンインストール

```
$ brew uninstall mysql
```
ここで気づいたのが、アンインストールした時
/usr/local/bin/mysql
はなくなるが、
/usr/local/var/mysql
の方はそのまま残っている。

ひとまずそのまま再インストール

```
$ brew install mysql
```
すると…

```
$ mysql.server start
Starting MySQL
.. ERROR! The server quit without updating PID file (/usr/local/var/mysql/XXXXXXXX.local.pid).
```
また同じだ！何も変わってない

### /usr/local/var/mysql も削除

仕方ない、こちらも削除。DBの実体なんかも含まれているが、丸っと削除（データが無くなると困る場合は、DBと同名のファイルを退避させるなど）

```
$ sudo rm -rf /usr/local/var/mysql
$ brew uninstall mysql
$ brew install mysql
```
で、試してみると…

```
mysql.server start
Starting MySQL
 SUCCESS! 
```

無事動いた！
AngularのXSRFStrategyを実装する

#概要
AngularでCSRF(XSRF)対策でXSRFStrategyを使おうとしてなかなか上手くいかなかったので、その時のポイントをメモしときます。
サーバ側の実装はPHPで書きますが、他の言語でも共通していると思います。

##環境
Angular @4.0.0
CakePHP @2.7.X(多分)

#そもそもAngularでcsrfを実装する場合
Angularでcsrf対策をするには、サーバ側の協力が必要です。
むしろ、最小限の対策の場合はサーバ側だけの実装となります。
理由はAngularではデフォルトでcsrf用トークンを受けてサーバに送り返してくれる為です。

#ポイント
1. **(クライアントとサーバのオリジンが違う場合)**クロスオリジンの許可
2. サーバ側でcookieにトークンを書き込み。<br>
ただし、クライアント側でトークンを読めるように設定
3. サーバ側で特殊ヘッダを許可
4. **(任意)** フロント側でトークン受け渡し用のキーを変える

## １.**(クライアントとサーバのオリジンが違う場合)**クロスオリジンの許可
※サーバとクライアントが同じオリジンの場合は無視して下さい。
というか、これが無いとそもそもの通信が出来ないはずです。

```
//【フロント側】
// オプションで{withCredentials: true}を設定します。
 this.http.post(reqUrl,data,{withCredentials: true})
```

```
//【サーバ側】
// とりあえず、どこのアクセスも受け付けてしまう設定です。
// アクセス元が限られる場合はそのアクセス元を指定すれば良いはずですが、全てOKの"*"ではダメでした。
$this->response->header("Access-Control-Allow-Origin", $_SERVER['HTTP_ORIGIN'] . "");
$this->response->header('Access-Control-Allow-Credentials', "true");
```


## ２. サーバ側でcookieにトークンを書き込み

```
// サーバ側でトークンを設定。
// 第4引数で、cookieを読み込めるパスをルートに設定(クッキーをdomain 配下の全てで有効にする)
setcookie("XSRF-TOKEN", $token, 0, "/");	
```
angularでデフォルトのcsrf用キーでクッキーにトークンを書き込みます。
この時、普通に書き込むとフロント側で読めないはずなので、cookieの対象パスをルートに設定する。
※フロント側のjsで`document.cookie`で読めるように設定してあればOK。
　開発者ツールじゃないと読めないようであればNG。

## ３.サーバ側で特殊ヘッダを許可

```
// angularがcsrf対策に送ってくるヘッダーを許可	
$this->response->header('Access-Control-Allow-Headers', "X-XSRF-TOKEN");
```
2.の設定により、Angular側からhttpモジュールを使ってリクエストを投げると勝手にリクエストヘッダに"X-XSRF-TOKEN"を追加してリクエストを送ってきます。
サーバ側ではこれを許可しないとヘッダーを受け取れません。

_**[ポイント]**_ 
この時フロントからのリクエストは以下の2段階で投げられる。
(どの環境も同じかは分からないが)
　1回目："X-XSRF-TOKEN"**無し**のリクエスト。
　（許可されてないから送れないみたい）
　2回目："X-XSRF-TOKEN"**有り**のリクエスト。

なので、サーバ側では"X-XSRF-TOKEN"が無ければ処理を終わらせましょう。
ただし、エラーコードで返してしまうと、2回目のリクエストが来なかったです。

```
// トークンが無ければ処理を返す
if(!$this->request->header("X-XSRF-TOKEN"))return;
```
あとは、2回目のリクエストでトークンを取得し、前にサーバで設定したトークンと一致するか確認しましょう。

### 以上で基本的にはおしまいです！！

## ４．**(任意)** フロント側でトークン受け渡し用のキーを変える
おまけですが、app.module.tsで以下の定義を追加すると、各種キー値は変えられる。

```
// ワンタイム用のキーを変更(cookieで受け取る名前,ヘッダーで送り返す名前)
export function getXSRF() {
    return new CookieXSRFStrategy('cookie-name', 'token-header-name');
}
```
```
// XSRFStrategyで使うキーの変更
// 変更用のfunctionは上で定義したものとなる。
providers: [{ provide: XSRFStrategy, useFactory: getXSRF }] 
```

以上、丸一日くらいこれに悩みましたorz
Vimのキーマップに適したキー

# はじめに
この記事はderisさんの「[vimでキーマッピングする際に考えたほうがいいこと](http://deris.hatenablog.jp/entry/2013/05/02/192415)」やKoRoNさんの「[スパルタンVim 5.0](https://www.kaoriya.net/blog/2016/09/15/)」等の影響を強く受けています
素晴らしい記事なので是非一読をおすすめします

## 関連のヘルプの引き方
この記事は大体ここに書いてある事をまとめただけ

**全コマンド一覧**
`:help index.txt`
**マッピングについて**
`:help map.txt`
**キーの名前の対応表**
`:help key-notation`
**マップコマンドとモードの対応表**
`:help map-overview`

# ノーマルモード
## 機能が被っているキー
片方をマッピングして潰しても問題ないキー

key       | 備考
---       | ---
`<BS>`    | `h`と同じ<br>`<C-H>`とは別にマップ可能
`<C-H>`   | `h`と同じ<br>`<BS>`とは別にマップ可能
`<C-J>`   | `j`と同じ
`<C-N>`   | `j`と同じ
`<C-P>`   | `k`と同じ
`<Space>` | `l`と同じ
`+`       | `<CR>`と同じ

## 代用可能なキー
2キー以内で代用可能、{count}の操作も変わらないキー

key    | 代用キー | 備考
---    | ---      | ---
`C`    | `c$`     | `$`押しづらい マッピングは非推奨
`D`    | `d$`     | `$`押しづらい マッピングは非推奨
`S`    | `cc`     |
`X`    | `dh`     |
`Y`    | `yy`     |
`s`    | `cl`     |
`x`    | `dl`     |

他にも `<CR>` は `j^`、 `-` は`k^` で代用可能
ただしオペレータと組み合わせた場合に動作が変わってしまう

## 未使用キー

key     | 備考
---     | ---
`<C-@>` |
`<C-K>` |
`<ESC>` |
`<C-_>` | 押すキーは`<C-->`(?)
`\`     | デフォルトの`<Leader>`

## 機能が似ているキー

key     | 似ているキー
---     | ---
`'`     | `` ` ``
`` ` `` | `'`
`0`     | `^`
`_`     | `<CR>`


## プレフィックス系
組み合わせが空いているキーがある

key     | 備考
---     | ---
`<C-W>` | ウィンドウコマンド
`<C-\>` | ほぼ未使用
`'`     | カーソルの移動
`Z`     |
`[`     |
`]`     |
`` ` `` | カーソル移動
`g`     |
`m`     | マーク
`q`     | マクロ
`z`     |


# 同一キー
マッピングすると同一のキーとして扱われるので注意が必要なキー

key | key
--- | ---
`<Tab>` | `<C-I>`
`<CL>`  | `<C-M>`
`<ESC>` | `<C-[>`


# 個人的おすすめ設定
## `Y`でカーソル位置から行末までヤンクする
`C`,`D`は`c$`,`d$`と等しいのに対して`Y`はなぜか`yy`となっている

```vim
nnoremap Y y$
```

## `x`,`X`でカーソル文字を削除する際レジスタを汚さない
ビジュアルモードで選択すればヤンクしない`d`として使用できる

```vim
nnoremap x "_x
vnoremap x "_x
nnoremap X "_X
vnoremap X "_X
```

## `s`,`S`でカーソル文字を削除する際レジスタを汚さない設定
ビジュアルモードで選択すればヤンクしない`c`として使用できる

```vim
nnoremap s "_s
vnoremap s "_s
nnoremap S "_S
vnoremap S "_S
```


## `<C-p>`,`<C-n>`でコマンドラインモードで入力したパターンに一致する履歴を補完する

```vim
cnoremap <C-p> <Up>
cnoremap <C-n> <Down>
```

# さいごに
とりあえずノーマルモードの思いつくキーを書いてみました
間違いやその他おすすめのキーなどあればコメントお願いします
キャッシュをいい感じに分散して期限切れを軽減するgemを作った

# 導入

初めてgem (millas)を作って公開しました。
そのgemを紹介したいと思います。
[gemはこちら](https://rubygems.org/gems/millas)

`millas` はその存在を意識することなく、cacheを分散し、有効期限にグラデーションをつけることでキャッシュ切れを軽減することができます。

# 由来

gemの名前は `millas` です。
Millasはフランスのランド地方の伝統的なお菓子のことで、日本では「魔法のケーキ」として人気に火がつきました。
生地は1つなのに、1度焼くだけで3層になるという、フォトジェニックなケーキです。

<img src="https://qiita-image-store.s3.amazonaws.com/0/83509/5efcf14d-10cb-2b2e-8648-c21fe3bb1ae4.png" width="250px">

# 動機

私は現在[dely](http://www.dely.jp)に所属するソフトウェアエンジニアで、主にサーバーサイドを担当しています。
delyでは「70億人に1日3回の幸せを届ける」をミッションに[kurashiru (クラシル)](https://www.kurashiru.com/)というレシピ動画サービスを運営しています。クラシルはローンチから1年とまだ若いサービスですが、[TVCM](https://www.youtube.com/watch?v=2Y1mBDHcuhQ)を打ったり、急激に伸びているサービスです。

クラシルは一部CGM機能もあるのですが、主にレシピ動画**メディア**であるため、同じページ、つまり同じリクエストに多くのユーザーからアクセスがあります。
その度にDBにアクセスが走ると、DBに負荷がかかりすぎるため、頻度が高いレシポンスはキャッシュに載せています。

このキャッシュには次の問題がありました。

- レスポンスをキャッシュしたいけど、そんなに長くキャッシュできない
- TVCMなど急激なアクセスがある時に、主要なキャッシュの有効期限が切れるとまずい
- リクエストの頻度に偏りがあるため、キャッシュをある程度分散させたい

それらを詳しく要素分解したいと思います。

### キャッシュを頻度高く更新したい

クラシルでは月に1,000本以上のレシピ動画が公開されています。
そのため、新着や検索結果を頻度高く更新したいという要望がありました。
しかし、DBへの負荷を考えれば有効期限が長ければ長いほど良いわけで、トレードオフの関係にありました。
その場合、バッチなどで意図的にキャッシュを更新したいと当初考えていましたが、キーの一覧を取得することが困難であったり、アクションを追加する毎に想定されるキーを登録することは業務上困難なため、その方法を取ることはできません。

### 急激なアクセス時にキャッシュ切れちゃう問題

上記の理由からクラシルのキャッシュはそんなに長くキャッシュしていません。
そうすると、TVCMなど急激なアクセスが長時間ある時に、例えば新着のキャッシュが切れてしまったら、再度キャッシュに載せる数100msの時間に行われた同アクセスは全て、キャッシュをすり抜けて、DBへ処理が流れてしまいます。
小さなことかも知れませんが、キャッシュ切れが重なると死活問題に繋がります。
また、**僕は怯えながら土日を過ごしたくありません。**

### キャッシュ偏っちゃう問題

複数ノードでクラスターを形成しているMemcachedなどのキャッシュサーバーに、`dalli` などでキャッシュを載せる場合、通常、アプリケーション側はどのノードにキャッシュを載せるかを意識することはありません。
`dalli` のコードを読むとキャッシュキーに一意にノードを決定していることがわかります。
そのため、リクエストが多いキーが載っているノードのI/Oやコネクション数に偏りが生じてしまうという問題があり、これはスケールアウトすることができません。対処としてはサーバータイプを上げるなど方法はありますが、いつか限界がきます。
そのため、取れる方法としてはキャッシュをできるだけ分散させて配置することですが、それでも**上記のキャッシュ切れの問題を解決することはできません。**

どのノードにキャッシュが載っているのかをアプリケーション側から知る方法は以下の通りです。

```
ActiveSupport::Cache::DalliStore.new.instance_variable_get("@data").send(:ring).server_for_key(ここにキー).hostname
```

# 良い感じキャッシュにする方法

解決したい問題は以下です。

**良い感じにキャッシュを分散させたいけど、キャッシュ切れも防ぎたいし、できるだけ楽をしたい**

Millasは上記の問題を丸っと解決してくれると考えています。
その概念を図にすると以下の通りです。

### 分散

<img src="https://qiita-image-store.s3.amazonaws.com/0/83509/83792fdc-e38c-9568-6e0d-f10830c0d885.jpeg" width="500px">

### 有効期限のグラデーション

<img src="https://qiita-image-store.s3.amazonaws.com/0/83509/e9930915-3b98-4ff1-2422-92f29b15dd37.png" width="500px">

要は語尾にランダムな数字をつけることで、キャッシュを分散することができ、有効期限にグラデーションをつけることでキャッシュ切れのリスクを最小限にし、切れたアクセスが他のキャッシュを上書きすることで、該当する全てのキャッシュを更新することができます。

**※ 注意点**
分散させるということは、クラスター全体のキャッシュ量が単純にn倍になるということです。
そのため、クラスターを形成するノード単位でメモリやCPUのチューニングをする必要があります。
また、分散数が多すぎるとwrite処理の時に書き込みが重くなり、アプリケーションサーバーの負荷に繋がります。

具体的な使い方などは[GitHub](https://github.com/okutaku0507/millas)をご覧いただければと思います。

# gemとして公開した理由

このキャッシュ機構をgemとして公開することにしたのは、僕自身gemを作って公開したことがないことが、喉に刺さった魚の骨としてずっといたためというのが大きいです。
幸いにも、Millasはとてもシンプルな仕組みであるため、gemに落としやすく、公開までにそんなに時間もかからないと思ったからです。
この仕組み自体、世界のどこかでやってたり、あるいは日本でもすでにgemがあるかも知れません。
探したのですが、同じことをしているgemや記事が見当たらなかったため、公開にいたりました。
すでにある場合その作者の方はご一報いただければと思います。
僕自身、初めてgemを公開したので、お作法などは他のgemを探り探り参考にさせていただきました。不足している点や間違いなどはどこでも良いので指摘していただけると幸いです。
ROSで使えるLidarまとめ

###目的
ROSで使えるLidarをまとめておく。
LidarSLAMのまとめは[こちら](http://qiita.com/nnn112358/items/814c0fb0d2075eb71da0)

###List
[Slamtec RPLIDAR](https://www.slamtec.com/en/Lidar) (RPLIDAR 360° ・RPLIDAR A2 )
・rplidar_ros：https://github.com/robopeak/rplidar_ros
Slamtecは中国メーカー

[Scanse Sweep](http://scanse.io/)
・Sweep-ros：https://github.com/scanse/sweep-ros
ScanseはKickStarter

[北陽電機　測域センサ](https://www.hokuyo-aut.co.jp/search/index.php?cate01=1) (URG-04LX-UG01・UTM-30LX・UST-10/20LN)
hokuyo_node：http://wiki.ros.org/hokuyo_node
urg_node：http://wiki.ros.org/urg_node
北陽電機は日本メーカー

[SICK 2D-LiDARセンサ](https://www.sick.com/jp/ja/product-portfolio/detection-and-ranging-solutions/2d-lidar-sensors/c/g91900)
・LMS1xx_ROS：http://wiki.ros.org/LMS1xx
・sick_ldmrs_laser:https://github.com/SICKAG/sick_ldmrs_laser
SICKはドイツメーカー

[Neato XV-11](https://www.neatorobotics.com/ja/robot-vacuum/xv/xv-11/)
掃除機Neato XV-11についているセンサを改造して使う:
http://meetjanez.splet.arnes.si/2015/08/22/neato-xv-11-to-ros-slam/
【使えなくなりました💧】stylishでcssを弄るとき、background-imageをどこから拾うか

# 追記
キモの拡張機能が使えなくなったので、この記事の内容はおそらく再現しないです


【注意】素人が書いた記事です。玄人はブラウザバックしてください()。

ブラウザはchrome

#問題提起
background-imageにローカルファイルを使おうとするとエラーがでる

```css:background-img
#hoge{background-image:url("file:///C:/Users/Name/miku.png");}
```
で
`Not allowed to load local resource`

なにやら、ローカルのファイルにアクセスできるとやばいそうなので仕方ない
でも、しょうがないからって

```css:background-img
/* twitter@nounoknown様の素敵なミク */
#hoge{background-image:url("https://pbs.twimg.com/media/CuaLbugUsAAz0ql.jpg:large");}
```

毎回こんな感じで外から拾ってくる（←☆）のは、ページの表示速度的にも、データ通信量的にも頭悪い、と思っていた

##誤解
☆は、別に問題なかった
[教えて!goo 同じ画像　複数回使用](https://oshiete.goo.ne.jp/qa/6775003.html)

つまり、何度も同じurlから同じ画像を拾ってくるというアホをしないよう、ブラウザが勝手に一度拾った画像をローカルに保存していて
css中に見覚えのあるurlが出てきたら、ローカルの画像を参照するのだそう

##検証
1. stylishで、任意のQiitaページに背景画像を挿入するスタイルを作る。
このとき、背景画像をあとでアクセスできなくするため自分のブログなり（githubがよいかと）にアップロードしたものを指定する

2. 適当なQiitaページにアクセスして、背景が変わったことを確認し、自分のブログから背景に指定した画像を完全に消去する

3. PCを再起動して、閲覧したことのないQiitaページを見に行く

4. （画像は削除したはずなのに）ちゃんと背景が変わる（変わった）


#それでも

それでも最初の一回も自分のローカルに保存している、ちょー大事な画像を使いたい、ていう人は、ローカルサーバーを立てるといける
[開発用ローカルサーバを立ち上げる方法](
http://qiita.com/higuma/items/b23ca9d96dac49999ab9)

python3使うなら

```python:http
$ cd ~
$ python -m http.server
```

とした後、~/Desktop/に背景としたい画像があるなら

```css:background-img
#hoge{background-image:url("http://127.0.0.1:8000/Desktop/miku.png");}
```

#蛇足
Qiitaの背景を変える

```css:qiita
body{background-image: url("https://pbs.twimg.com/media/CuaLbugUsAAz0ql.jpg:large");background-size:auto;background-repeat:no-repeat;background-attachment:fixed;background-position:bottom;}
.container{background-color:rgba(255,255,255,0.6);}
```

![qiita22.PNG](https://qiita-image-store.s3.amazonaws.com/0/188173/9d89bbd5-9e2a-7f4b-c1e2-be88477649b9.png)


このミクさん（東京アクアリウム）の画像のおすすめソース

- 絵師ご本人様のツイッター  
https://pbs.twimg.com/media/CuaLbugUsAAz0ql.jpg:large
- youtubeのサムネ  
http://img.youtube.com/vi/WQSex83Lpbo/maxresdefault.jpg
- Chromeのテーマ[Hatsune miku tokyo aquarium](https://chrome.google.com/webstore/detail/hatsune-miku-tokyo-aquari/gmifaoeifkcepokhkammgkcpehlkfpnd)をダウンロードし、その中身を漁る（こんな感じのところ）  
`C:\Users\Name\AppData\Local\Google\Chrome\User Data\Profile 2\Extensions\gmifaoeifkcepokhkammgkcpehlkfpnd\1_0\images`


#リンク
- 素敵なミクさん  
https://twitter.com/nounoknown
- 開発用ローカルサーバを立ち上げる方法  
http://qiita.com/higuma/items/b23ca9d96dac49999ab9

#ヒトリゴト
読んでくださってありがとうございますっっ

```math
\def\textlarge#1{%
  {\rm\Large #1}
}
\def\textsmall#1{%
  {\rm\scriptsize #1}
}
```

（精一杯小声で）
　　$\textsmall{い　い　ね　く　だ　さ　い　！}$
ISC-dhcpd+vyosでDHCPサービスを使う覚書

# 一言
- vyosでdhcp-relayする時はdhcp-serverが繋がっているセグメントもインターフェイスに追加する
- dhcpd.confにshared-network hogehogeの記述は__必要なし__


```conf[dhcpd.conf]
# IP address lease time
# default: 10 minute
# max    : 2 hours
default-lease-time 3600;
max-lease-time 7200;

# Use this to enble / disable dynamic dns updates globally.
ddns-update-style none;

# If this DHCP server is the official DHCP server for the local
# network, the authoritative directive should be uncommented.
authoritative;


option time-offset              32400; # JST+9h(=9*60*60)


#shared-network Client-Network { # コメントアウトでおｋだった・・・
  subnet 192.168.100.0 netmask 255.255.255.0 {
    option routers                 192.168.100.254;
    range 192.168.100.1 192.168.100.200;
  }
  subnet 192.168.200.0 netmask 255.255.255.0 {
    option routers                  192.168.200.254;
    range 192.168.200.1 192.168.200.200;
  }


  subnet 192.168.250.0 netmask 255.255.255.0 {
    option routers                  192.168.200.254;
    range 192.168.250.1 192.168.250.200;
  }

#}
```

```[vyos.boot.config]
interfaces {
    ethernet eth0 {
        address 192.168.11.111/24
        description OUTSIDE
    }
    # DHCPで管理したいセグメント
    ethernet eth1 {
        address 192.168.100.254/24
        description VLAN100
    }
    # DHCPで管理したいセグメント
    ethernet eth2 {
        address 192.168.200.254/24
        description VLAN200
    }
    # DHCPサーバーが有るセグメント
    ethernet eth3 {
        address 192.168.250.254/24
        description INTERNAL
    }
service {
    dhcp-relay {
        interface eth1 
        interface eth2 
        interface eth3 # 本来は必要ないらしい
        # dhcp-relay-agent packetが来たときは捨てる
        relay-options {
            relay-agents-packets discard
        }
        server 192.168.250.253
    }
}
```

# 参考
- https://wiki.vyos.net/wiki/User_Guide
- [サーバーがダウンしてて見られないのでgoogleのキャッシュ](https://webcache.googleusercontent.com/search?q=cache:4ToiFT7MzF0J:https://wiki.vyos.net/wiki/User_Guide+&cd=1&hl=ja&ct=clnk&gl=jp)
GoogleAppEngine (Flexible Environment) にImageMagick v7系をインストールする

## これはなにか？

[こちらの記事]([http://qiita.com/kyo_nanba/items/ffe7499e25a3c5a92dbf])でCircleCIにImageMagick v7系をインストールしたのですが、アプリを動かすGoogleAppEngineにも同様にインストールする必要がありました。

GoogleAppEngineで動かすのはrailsアプリケーションであるため[Flexible environment](https://cloud.google.com/appengine/docs/flexible/)、よってdockerfileに処理を記述することでImageMagick v7系をインストールすることができます。

というわけでの手順です。

## dockerfileの内容

```dockerfile
RUN apt-get update && apt-get install -y wget

RUN apt-get remove -y imagemagick && \
    wget http://www.imagemagick.org/download/ImageMagick.tar.gz && \
    tar -xvf ImageMagick.tar.gz && \
    cd ImageMagick-7.* && ./configure && make && make install && \
    ldconfig /usr/local/lib
```

基本的に[circle.ymlに書いた内容](http://qiita.com/kyo_nanba/items/ffe7499e25a3c5a92dbf#%E3%81%98%E3%82%83%E3%81%82%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E3%81%8B%E3%82%89%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B%E3%81%8B)と同じなのですが、 `wget` が無かったのでインストールしたりとか（ `curl` ならあったかもですが未確認）、 `sudo` を使わないようにしたりと一部変更箇所があります。

基本的にGoogleAppEngineで画像処理を行う場合は[Images API](https://cloud.google.com/appengine/docs/standard/python/images/)を使うのが王道（standard environmentではそうするしかなかった？）のようなのですが、色々な事情でアプリケーションサーバにImageMagickをインストールしなければならない人の一助になれば。
Bluemix のコマンドラインインターフェース

Bluemix のコマンドラインインターフェースには、 bx と cf の　２つがあります。
https://console.bluemix.net/docs/cli/reference/bluemix_cli/bx_cli.html#bluemix_cli

bx (bluemix)
Arch Linux へのインストール方法

```bash
yaourt -Sb bluemix-cli
```

バージョンの確認

```bash
bx --version
```

使い方
ソースを編集して、アップロードする場合

```bash
bx api https://api.ng.bluemix.net
bx login -u user@example.ne.jp -p password -o example -s us
bx app push
```

cf (cloudfoundry)
Arch Linux へのインストール方法

```bash
yaourt -Sb cloudfoundry-cli
```

Ubuntu 17.04 へのインストール方法

```bash
wget -q -O - https://packages.cloudfoundry.org/debian/cli.cloudfoundry.org.key | sudo apt-key add -
echo "deb http://packages.cloudfoundry.org/debian stable main" | sudo tee /etc/apt/sources.list.d/cloudfoundry-cli.list
sudo apt update
sudo apt install cf-cli
```

バージョンの確認

```bash
cf --version
```

使い方
ソースを編集して、アップロードする場合

```bash
cf api https://api.ng.bluemix.net
cf login -u user@example.ne.jp -p password -o example -s us
cf push
```

cf の　参考情報
https://github.com/cloudfoundry/cli

ソースコードのダウンロードは、
Bluemix の　Web コンソールで、アプリを作成して、
右下の　有効化をクリックします。

![bluemix_download.png](https://qiita-image-store.s3.amazonaws.com/0/179446/44288688-c617-e8a7-61a4-8892c5da3e72.png)

そして、Continuous Delivery ツールチェーン　で作成をクリックします。

![bluemix_download2.png](https://qiita-image-store.s3.amazonaws.com/0/179446/2bec055e-5523-1f16-5eaa-45772fa081f0.png)

次に、CODE の　Git をクリックします。

![bluemix_download3.png](https://qiita-image-store.s3.amazonaws.com/0/179446/47774368-e8b3-9e64-f672-9057d5e84cbe.png)
[Swift] Segueの画面遷移でUITableViewの選択されたCellを取得する

#[Swift] Segueの画面遷移でUITableViewの選択されたCellを取得する
```
class myController: UITableViewController {
    var objects = [myModel]()
    
    override func prepare(for segue: UIStoryboardSegue, sender: Any!) {
        if segue.identifier == "toNextController" {
            if let indexPath = tableView.indexPath(for: sender as! UITableViewCell) {
                let object = objects[indexPath.row]
            }
        }
    }
}
```
Dockerを起動させる手順

Docker環境を構築とローカル環境でConcrete5を動かすのと他の人と共有できるまでの手順を記載する。

#構築環境
- macOS 10.12.4
- Docker version 17.03
- docker-compose version 1.11.2

#Docker環境を構築
まずは以下のリンクの「Setup」からDockerをインストール
[Get Started](https://docs.docker.com/docker-for-mac/install/#download-docker-for-mac)
「Stable channel（安定版）」をインストール。
ターミナルで以下のコマンドを実行してバージョンが表示されればインスール完了です。

```
docker --version
```
↓

```
Docker version 17.03.1-ce, build c6d412e
```

#dockerの起動
###コンテナの一覧表示（コンテナ名を確認）
```
docker ps -a
```
「NAMES」の部分がコンテナ名
「PORTS」が空欄の場合は、起動していない状態

| CONTAINER ID| …| NAMES|
|:-----------------|------------------:|:------------------:|
| xxxx             |  … |ここに記載コンテナ名|
| xxxx           　　　　| 　　… |ここに記載コンテナ名|


###コンテナの起動
```
docker start <コンテナID or コンテナ名>
docker start dockerc501_web_1 dockerc501_db_1 db
```
※エラー文
「Error: failed to start containers:xxxxxxxxxx」が表示されたときはもう一度
「docker start xxxxxxxxxx」と入力。
起動を確認したら、「[http://localhost/](http://localhost/)」にアクセス

###コンテナの停止
```
docker stop <コンテナID or コンテナ名>
```

###コンテナを削除する
```
docker rm <コンテナID or コンテナ名>
```




参照：
[やってみよう！DockerでWordPress構築～httpd/mysql設定と外部アクセスまで | GMOクラウドアカデミー](https://academy.gmocloud.com/advance/20160118/1557)
[Dockerのすべてが5分でわかるまとめ!(コマンド一覧付き) - paiza開発日誌](http://paiza.hatenablog.com/entry/docker_intro)
[やってみよう！DockerでWordPress構築～httpd/mysql設定と外部アクセスまで | GMOクラウドアカデミー](https://academy.gmocloud.com/advance/20160118/1557)
[chriswayg/concrete5.7 - Docker Hub](https://hub.docker.com/r/chriswayg/concrete5.7/)
[chriswayg](https://github.com/chriswayg/concrete5.7)
CSSやJSの読み方次第でgetComputedStyle()で想定通りのスタイルの値が取れないことがある

以下のような挙動があって混乱したのでメモ。

# ファイル構成

```html:index.html
<link rel="stylesheet" href="main.css">
<script src="main.js" async></script>
```

```css:main.css
@import url("external.css");

html {
  font-size: 62.5%;
}
```

```css:external.css
/* empty file */
```

```js:main.js
console.log(getComputedStyle(document.body).fontSize)

setTimeout(function () {
  console.log(getComputedStyle(document.body).fontSize)
}, 500)
```

# コンソールへの出力結果

## 想定した出力

```
10px
10px
```

## 実際の出力

```
16px
10px
```

## つまり…

最初の`console.log()`時に以下のスタイルが未適用の状態になっているっぽい。

```css
html {
  font-size: 62.5%;
}
```

# 回避方法

**追記：実際には回避できてないかもしれないので↓のコメントも参照。**

## 1. `@import`を使わず`link`タグで読み込む

```diff:index.html
+<link rel="stylesheet" href="external.css">
 <link rel="stylesheet" href="main.css">
 <script src="main.js" async></script>
```

```diff:main.css
-@import url("external.css");
-
 html {
   font-size: 62.5%;
 }
```

## 2. `link`タグを使わず`style`でHTML内に直接書く

```diff:index.html
+<style>
+@import url("external.css");
+
+html {
+  font-size: 62.5%;
+}
+</style>
 <script src="main.js" async></script>
```

```diff:main.css
-@import url("external.css");
-
-html {
-  font-size: 62.5%;
-}
```

## 3. `script`タグの`async`属性を使わずコード内で`DOMContentLoaded`イベントを待つ

```diff:index.html
 <link rel="stylesheet" href="main.css">
-<script src="main.js" async></script>
+<script src="main.js"></script>
```

```diff:main.js
+document.addEventListener('DOMContentLoaded', function () {
+
 console.log(getComputedStyle(document.body).fontSize)
 
 setTimeout(function () {
   console.log(getComputedStyle(document.body).fontSize)
 }, 500)
+
+})
```

- diffを見やすくするためインデントは省略。

## 4. `script`タグ内にJSを書く

```diff:index.html
 <link rel="stylesheet" href="main.css">
-<script src="main.js" async></script>
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+  console.log(getComputedStyle(document.body).fontSize)
+
+  setTimeout(function () {
+    console.log(getComputedStyle(document.body).fontSize)
+  }, 500)
+})
+</script>
```

```diff:main.js
-console.log(getComputedStyle(document.body).fontSize)
-
-setTimeout(function () {
-  console.log(getComputedStyle(document.body).fontSize)
-}, 500)
```

- 以下のように`body`後に`script`を配置して`DOMContentLoaded`を使わない形も可。

```diff:index.html
 <link rel="stylesheet" href="main.css">
-<script src="main.js" async></script>
+<body></body>
+<script>
+console.log(getComputedStyle(document.body).fontSize)
+
+setTimeout(function () {
+  console.log(getComputedStyle(document.body).fontSize)
+}, 500)
+</script>
```

## 5. 何もしない`script`タグを挿入する

```diff:index.html
 <link rel="stylesheet" href="main.css">
+<script> </script>
 <script src="main.js" async></script>
```

- `<script></script>`ではダメで、スペースを入れる必要がある。

## 6. `@import`を後ろに持ってくる

```diff:main.css
-@import url("external.css");
-
 html {
   font-size: 62.5%;
 }
+
+@import url("external.css");
```

- 当然これによって評価順序が変わるので注意。

# 感想

難しいなぁ。なんかバグっぽいと思ったけど、Chrome、Firefox、Safariで同じ挙動だったので、おそらく仕様で決まっているのかも。
ECS Scheduled Tasksによるタスクの定期実行

# 概要

ECSでサービスを立ち上げる場合、定期実行したいタスクをどのように実行するか問題になることがあります。
今まであまり良い方法が浮かばず、Lambdaのイベントスケジューラでタスクを起動してたんですが、ジョブ単位に起動スクリプト書かなきゃいけないしイマイチでした。

が、最近たまたまECSのコンソールを眺めてたところ、クラスタ画面に「Scheduled Tasks」なる機能が追加されてました 。誰も話題にしてないので今さら気づいた。

<img width="684" alt="スクリーンショット_2017-06-24_16_44_33.png" src="https://qiita-image-store.s3.amazonaws.com/0/27454/fa6c3349-0f9e-430d-560c-3ca9d18454b2.png">

# 使い方

実行したいコマンドを定義したタスクと、Cron形式で実行間隔を指定するだけ。

<img width="832" alt="スクリーンショット_2017-06-24_16_51_18.png" src="https://qiita-image-store.s3.amazonaws.com/0/27454/4f15eef4-d2b5-2d15-2173-e1cec245aa2d.png">

上記設定の場合、毎分 `sandbox-development:142` のタスクを実行してくれる。
これでLambdaから開放された！
【Ruby on Rails】 whereを使って条件指定した値の中身を取得できない時

知ってる人にとっては当たり前のことかもしれないですが、
少しハマったので、僕と同じ初心者の人で、今後同じことで困ってる人を助けたい！！
ので、書き残しておきます！



# やりたいこと
projectsコントローラで、projectのidが1のものを、whereメソッドを使って取得

```ruby
def show
  @project = Project.where(id: 1)
end
```

viewでその@projectのidを表示させる。(hamlで書いてます)

```ruby
 .contents
   = @project.id
```
これではできなかったんです。

これができると信じきっていたので、時間がかかってしまいました。

今までwhereメソッドで取得していたのは複数の値でして、eachを回して配列から取り出していたので、

それと同じ感覚でできると思っていました。

# 解決方法

```ruby
def show
  @project = Project.where(id: 1).first
end
```

.firstをつけます！！！

whereで条件指定して持ってきた値は、そのままビューでは使えないみたいです。
なので.firstをつけて最初の値を取得して、それを@projetとしてあげれば、
ビューの方で、@project.idとした時に1と出てきます！

.firstをつけないでターミナルで@projectの中身を見てみると、


![スクリーンショット 2017-06-24 16.52.11.png](https://qiita-image-store.s3.amazonaws.com/0/179221/29df0ae5-400b-ea39-b52b-0556feea0442.png)

よくみると　

=> [中身]

[]で囲まれてる！

.firstをつけると、

![スクリーンショット 2017-06-24 16.54.24.png](https://qiita-image-store.s3.amazonaws.com/0/179221/0d0eb79f-59f1-bed6-d4a6-8d2485ebfa52.png)

=> 中身

[]がない！

whereで取得した値は配列に入っているということなんでしょうか・・・

そのあたりはまた詳しく調べていこうと思います！

whereで取得した値が一つしかない場合は、気をつけてください。

以上です！

また一つ勉強になりました！

何か間違いや不適切な箇所などがあればコメントまでお願いします！
PowerShell でファイル選択ダイアログを利用する

[ブログからの転載](http://1bed.allright.life/?p=2533)

意外と使い勝手が良さそうなのがこの方法だと思う。

## 画像ファイルを1つ選択選択させる

```powershell
[void][System.Reflection.Assembly]::LoadWithPartialName("System.windows.forms")

$dialog = New-Object System.Windows.Forms.OpenFileDialog
$dialog.Filter = "画像ファイル(*.PNG;*.JPG;*.GIF)|*.PNG;*.JPG;*.JPEG;*.GIF"
$dialog.InitialDirectory = "C:\"
$dialog.Title = "ファイルを選択してください"
# 複数選択を許可したい時は Multiselect を設定する
$dialog.Multiselect = $true

# ダイアログを表示
if($dialog.ShowDialog() -eq [System.Windows.Forms.DialogResult]::OK){
    # 複数選択を許可している時は $dialog.FileNames を利用する
    Write-Output ($dialog.FileName + " が選択されました。")
}
```

## CSV ファイルを選択する

こういうパターンあるかな？と思う。
普段はタスクスケジューラーでキックしているけど、失敗したら手動で動かすとか。

```powershell
Param(
  [Parameter()]
  [String] $FilePath
)

# $FilePath が設定されていない、又はファイルが存在しない
if([string]::IsNullOrEmpty($FilePath) -Or (Test-Path -LiteralPath $FilePath -PathType Leaf) -eq $false) {
    [void][System.Reflection.Assembly]::LoadWithPartialName("System.windows.forms")    
    $dialog = New-Object System.Windows.Forms.OpenFileDialog
    $dialog.Filter = "CSV ファイル(*.CSV)|*.CSV"
    $dialog.InitialDirectory = "C:\"
    $dialog.Title = "ファイルを選択してください"

    # キャンセルを押された時は処理を止める
    if($dialog.ShowDialog() -eq [System.Windows.Forms.DialogResult]::NG){
        exit 1
    }

    # 選択したファイルパスを $FilePath に設定
    $FilePath = $dialog.FileName
}

# ここから下で $FilePath をいい感じで処理する
Write-Output $FilePath
```
[Swift] UserDefaultsに自作クラスのArrayを保存する

#[Swift] UserDefaultsに自作クラスのArrayを保存する
```
class myClass: NSObject, NSCoding {
    var date: Date = Date()
    
    required init?(coder aDecoder: NSCoder) {
        date = aDecoder.decodeObject(forKey: "date") as! Date
    }
    
    func encode(with aCoder: NSCoder) {
        aCoder.encode(date, forKey: "date")
    }
}

var myClasses: Array<myClass> = []

//取得
let data = UserDefaults.standard.data(forKey: "array")
if data != nil {
    myClasses = NSKeyedUnarchiver.unarchiveObject(with: data!) as! Array<myClass>
}

//保存
let alarmsData = NSKeyedArchiver.archivedData(withRootObject: myClasses)
UserDefaults.standard.set(myClasses, forKey: "array")
UserDefaults.standard.synchronize()
```
hash.exceptの引数をシンボルで指定したら動いてくれなかった


表題の通りです。

```ruby
# user
#  - first_name
#  - last_name
#  - age
#  - email

user.attributes.except(:age,:email)
```

上記のように、削除したいキーをシンボルで指定したところ、
Hashには全てのキーが含まれたままでした。
## attributesはキーを文字列として返すらしい
Stack Overflowで調べてみたところ、
[全く同じ問題](https://stackoverflow.com/questions/11983092/hash-except-doesnt-work-with-symbol-keys)で躓いている人がいました。

ActiveRecordのattributesは、
キーをシンボルではなく文字列で返すとのこと。
ｿｳﾀﾞｯﾀﾉｶ------!

ということで、下記のように修正すると、
Hashから指定したキーが削除されました！

```ruby
user.attributes.except('age','email')
```
よかったよかった:innocent:
【herokuコマンド】アプリ名変更

herokuに作成したアプリの名前を変更する方法です。

方法は2つあります。
1. Herokeのサイトから変更する
2. CLI(コマンド)で変更する

1の方法の場合は、サイトからアプリ名を変更した後に、ローカルのgitのリモート設定も変更する必要があります。
2の場合は、gitのリモート設定も自動的に行われます。
今回は2のコマンドを紹介します。

以下のコマンドを実行します。

```
$ heroku apps:rename newname
```
上記のコマンドを実行することで、アプリ名が`newname`に変更されます。
gitのリモート設定も自動的に更新されます。
Vueのiviewかなりいい

Vueをベースにしたiview(iview ui)はかなりいいようですが何方が使っているのでしょうか？
[本系のリンク](https://www.iviewui.com/)
そのまま使うのもよしVueの使い方、コンポーネントの作り方に見本になります。
FlexCHOPを動かす

Vincent Houze氏がTouchDesigner上で流体シミュレーションを動作させたサンプルをgithubに上げてくれました。
といってもこのサンプル、そのままで動くわけではなく、dllを自分でbuildする必要があります。
自分でやったbuild手順を上げておきます。
デザイナにはちょっと大変なので、誰かにbuildしてもらってdllを貰うと良いかも。

# ビルド・動作環境
* Windows 10 64bit
* Razer Blade
* Geforce 1060

# 必要なソフト
* Visual Studio Express 2015(2017 Communityでもいけるかも)
* TouchDesigner 099　CommercialもしくはPRO(Cpp CHOPは有料版でしか動かない)

# 手順
## 1. Visual StudioとTouchDesignerのインストール
説明省略。

## 2. CUDA Toolkitをインストール
CUDA 8.0をインストールします。
https://developer.nvidia.com/cuda-downloads

## 3. githubからプロジェクトをダウンロード
githubからdownload zipして解凍します。
https://github.com/vinz9/FlexCHOP

## 4. Flexのプロジェクトをダウンロード
NVIDIA Flexをダウンロードして解凍。
先ほどのgithubからダウンロードして展開したプロジェクトのREADME.mdとか置いてるフォルダにflexフォルダを持っていきます。
https://developer.nvidia.com/gameworksdownload

## 6. ビルド
x64、Releaseでbuild。
Releaseフォルダができてるので、flexフォルダ内の3つのdll（NvFlexDeviceRelease_x64.dll, NvFlexExtReleaseCUDA_x64.dll, NvFlexReleaseCUDA_x64.dll）をRelaseフォルダにコピーします。

Visual Studio 2017などCUDA 8.0propsがないよ、と言われるかもしれません。
その時は、C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\IDE\VC\VCTargets\BuildCustomizations に、 C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v8.0\extras\visual_studio_integration\MSBuildExtensions 以下のファイルをまるっとコピーしてあげると動くかもしれません。

## 7. TouchDesignerのプロジェクトを起動
CHOPフォルダのdemo.toeを起動します。
これでperformモードにしてrボタンを押すと水がドバドバ出るはず！！
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/152718/5115ae6f-d54c-3d12-648d-c0c83cb6b36a.png)
gulpのお勉強1


タスクランナーは消耗するという噂も聞くけど、ちょっとした開発のツールとしてつかう。

## 非同期タスク

promissとかspawnとか、、サーバーを再起動してからクライアントでapiをたたくてきなタスクを作りたい。

node.jsのchild_processのexecとexecFileとspawnの違い - SundayHacking
http://www.axlight.com/mt/sundayhacking/2014/03/nodejschild-processexecexecfilespawn.html

Run-sequence (Programming) Questions & Answers - TechQA
http://techqa.info/programming/tag/run-sequence

The Complete-Ish Guide to Upgrading to Gulp 4 | Joe Zim's JavaScript Corner
https://www.joezimjs.com/javascript/complete-guide-upgrading-gulp-4/

https://github.com/gulpjs/gulp/issues/526

どうやらexecとかは非同期らしい。。

Child Process | Node.js v8.1.2 Documentation
https://nodejs.org/api/child_process.html

node.js の execSync の戻り値で stderr を受け取る方法 - スタック・オーバーフロー
https://ja.stackoverflow.com/questions/28527/node-js-%E3%81%AE-execsync-%E3%81%AE%E6%88%BB%E3%82%8A%E5%80%A4%E3%81%A7-stderr-%E3%82%92%E5%8F%97%E3%81%91%E5%8F%96%E3%82%8B%E6%96%B9%E6%B3%95

	trueコマンドで失敗がないようにするとか、あえてエラーを返すためにfalseしたり、エラーをいれかえて取得したりと。

サーバーが起動してから少しwaitをつけないとダメかも。。

よくわからないがひとまず。。

```node
go = gulpgo.run("./main.go", [], {cwd: __dirname, stdio: 'inherit'});
return ps('sleep 3');

```

### options.stdio

パラメータを渡して、I/Oをパイプしたりできるっぽい。（いまいちわかってない。）
サーバープロセスを立ち上げたら細かい出力がでなかったが、これを設定すると逐次表示されるようになる。

Child Process | Node.js v8.1.3 Documentation
https://nodejs.org/api/child_process.html#child_process_options_stdio

自信ないが、、
pipeだと、実行結果にオブジェクトで返すのかな。
ignoreが破棄で、inheritは逐次出力。
ipcがメッセージングのチャンネルみたいなのを作ってくれる。
オブジェクトを渡すとストリームもできるらしい、、ipcとどう違うの？？
整数だとinherit的な出力の入れ替え、nullとかはignoreと同じ。
うーん、オプションを自力で増やして、fd3,fd4をつければ、ipcを使いつつ通常の出力リダイレクトも使える？？
円が点滅するローディングイメージを作る

ローディングイメージに横並びの円が徐々に点滅する方法です。

# ソースコード
## 円を作る
htmlとcss（sass）で円を作ります。

```circle.html
<ul>
    <li class="circle-1"></li>
    <li class="circle-2"></li>
    <li class="circle-3"></li>
    <li class="circle-4"></li>
    <li class="circle-5"></li>
</ul>
```

```circle.sass
ul
  text-align: center
  li
    background-color: green
    border-radius: 50%
    display: inline-block
    margin: 5px
    width: 15px
    height: 15px

```

## jqueryを書く
jsに下記の記述をしてオブジェクトの点滅します。円のフェードイン、フェードアウト、インターバルが1秒（1000ミリ秒）の設定です。

```blink.js
$(function () {

    var fadeoutTimer = 1000; // フェードアウト
    var fadeinTimer = 1000;  // フェードイン
    var interval = 1000;  // インターバル

    setTimeout(function () {
        $('.circle-1').fadeOut(fadeoutTimer, function () {
            $(this).fadeIn(fadeinTimer)
        });
    }, 0);
    setTimeout(function () {
        $('.circle-2').fadeOut(fadeoutTimer, function () {
            $(this).fadeIn(fadeinTimer)
        });
    }, interval*1);
    setTimeout(function () {
        $('.circle-3').fadeOut(fadeoutTimer, function () {
            $(this).fadeIn(fadeinTimer)
        });
    }, interval*2);
    setTimeout(function () {
        $('.circle-4').fadeOut(fadeoutTimer, function () {
            $(this).fadeIn(fadeinTimer)
        });
    }, interval*3);
    setTimeout(function () {
        $('.circle-5').fadeOut(fadeoutTimer, function () {
            $(this).fadeIn(fadeinTimer)
        });
    }, interval*4);

    setInterval(function () {
        setTimeout(function () {
            $('.circle-1').fadeOut(fadeoutTimer, function () {
                $(this).fadeIn(fadeinTimer)
            });
        }, 0);
        setTimeout(function () {
            $('.circle-2').fadeOut(fadeoutTimer, function () {
                $(this).fadeIn(fadeinTimer)
            });
        }, interval*1);
        setTimeout(function () {
            $('.circle-3').fadeOut(fadeoutTimer, function () {
                $(this).fadeIn(fadeinTimer)
            });
        }, interval*2);
        setTimeout(function () {
            $('.circle-4').fadeOut(fadeoutTimer, function () {
                $(this).fadeIn(fadeinTimer)
            });
        }, interval*3);
        setTimeout(function () {
            $('.circle-5').fadeOut(fadeoutTimer, function () {
                $(this).fadeIn(fadeinTimer)
            });
        }, interval*4);
    }, interval*5);
});
```
これでローディングイメージができます。


# 解説

## プロパティ

|プロパティ  |説明  |
|---|---|
|setTimeout  |設定した時間後に、イベントを発生させる  |
|setInterval  |設定した時間ごとに、イベントを繰り返す  |
|fadeIn  |フェードイン  |
|fadeOut  |フェードアウト  |
2017年06月時点のUnity 2D Experimental Preview



　この文章は、2017年6月時点のExperimental PreviewとTileMapEditorについての情報まとめです。

　Unity 2D Experimental Previewのフォーラムの「[Update - April 2017](https://forum.unity3d.com/threads/update-april-2017.467306/)」投稿をはじめとした、公式フォーラムの情報をもとにしています。

　Unity 2D Experimental Previewは、

* 2Dゲーム向けの実験的な新機能を試すことができるUnityの早期アクセスバージョン
* Pro/Plusユーザーに限らず誰でも試せる
* [フォーラム](https://forum.unity3d.com/forums/2d-experimental-preview.104/)からUnityエディタをダウンロードして試す
* Unityのメインストリームとは独立してアップロード
* あくまでExperimental Preview。バージョンアップで破壊的な変更がどんどん入る

　というものです。

　2016年4月の[Unite 2016 Tokyo](http://japan.unity3d.com/unite/unite2016/)で2D Experimental Previewを行うアナウンスがあり、2016年5月にフォーラムが立ち上がりました。立ち上がりから1年経過した2D Experimental Previewですが、多くの機能がUnityのメインストリームにすでに取り込まれています。

　Unity 5.6では、次の機能が加わりました。

* 9-Slice
* Sorting Groups
* Axis Distance Sort
* Outline Editor + Tessellation options
* CompositeCollider2D
* Edge Radius for BoxCollider2D and EdgeCollider2D
* Physics2D Contacts API

　Unity 2017.1 betaでは、次の機能が加わりました。

* Sprite Masking
* Sprite Atlas
* 2DPhysics - Simulation

　さらに素敵な機能も開発中なようです。例えば、

* Tilemap : これは、Unity 2017.2を目標に開発中なようです
* SmartSprite : 現在開発中で、いくつかの問題を解決し、数ヶ月後にExperimental Previewとして公開を目指しているようです。
* 2D Character Animation : 活発に開発しているようですが、まだ時間がかかるようです。


　2017年4月に公開された2D Experimental Previewの[Release 4](https://forum.unity3d.com/threads/2d-experimental-preview-release-4.469914/)は、主にTilemapにフォーカスを当てたアップデートで、2017.1 betaを基にしたバージョンです。毎回毎回、Tilemap関連はがっつり破壊的な変更が入るのですが、今回もたくさん改善・変更が入っていますね。

　さて、いつもシンプルなサンプルプロジェクトだけがリリースのたびに公開されていましたが、今回はそれに加えて、かなりがっつりとしたサンプルプロジェクト「RoboDash」が公開されました。Scripted TileとBrushについて興味がある方はぜひ一度、プロジェクトを開いてコードを見てみることをお勧めします。


　私は、2D Experimental Previewの中でも特にTilemapの機能をずっと楽しみにしていました。TilemapはUnity 2017.1では、公開されないようなので少し残念ですが、Unity 2017.2を目標に開発している、というのを聞けてほっとしています。（今までずっと未定だったので。。。）さて、Tilemapをはじめ2D Experimental Previewの機能が気になる人は、ぜひ公式フォーラムでフィードバックをしましょう
Tweepy を使ってツイートしてみる

#環境
* MacOS Sierra(10.12.5)
* Python 3.6.1

#Tweepyをインストール

```
$ sudo pip3 install tweepy
```
上記のコマンドをターミナルで実行

#コード
```python3:Tweepy.py
import tweepy

CONSUMER_KEY = 'XXXXXXXXXXXXXXXXXXX'
CONSUMER_SECRET = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
auth = tweepy.OAuthHandler(CONSUMER_KEY, CONSUMER_SECRET)
ACCESS_TOKEN = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
ACCESS_SECRET = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
auth.set_access_token(ACCESS_TOKEN, ACCESS_SECRET)

api = tweepy.API(auth)

api.update_status("tweepyでHello World\n#tweepy")
print('Done!')

```
'XXXXXXXXXXXXXXXX'にはTwitterApplication各Keyを入力
[Keyの取得はここから](https://syncer.jp/Web/API/Twitter/REST_API/)

#実行&実行結果
```
$ python3 tweepy.py
```
上記のコマンドを実行

結果はこんな感じ
<img width="384" alt="スクリーンショット 2017-06-24 15.37.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/166626/3bb0a5a1-3a07-7294-22ca-bf5ae80f654a.png">