OmniAICreator/Qiita-1.07M huggingface dataset:
CMD.exeのコマンドラインにPowerShellのスクリプト貼り付け、ファイルとフォルダのリストを作らせる

#Cmd.Exeからのファイル管理は貧弱
もちろんDirからCSVファイルを作ることができますが、パワーシェルのような立派なものができません。どうしたらよいのでしょうか。
それはCMD.exeを起動してコマンドラインからパワーシェルを実行してしまえばよいのです。
CMD.exeを起動します。
まず条件を確認します。

##条件
 - いまからリストを作るふぉるだはC:\hoge\hogeの配下のフォルダのリストです。
 - これをE:\test.csvに作成します。***既存のファイルは削除して作ります。***
 - この時の区切り文字はセミコロンです。
 - このため、直接CSVを開くのではなくExcelを起動し、開くからフォルダを選び、テキスト形式にしてファイルを選択しウィザードに従ってファイルを開きます。
 - この時に区切り文字としてセミコロンを選択します。
 - 文字コードはutf-8です
 - スクリプトが単純だと決めごとはこのように文章で書かないと大変ですね．．．

#スクリプト

```ps1
powershell -command "set-executionpolicy remotesigned -s process -f;cd "'C:\hoge\hoge'";get-childitem -force -recurse | select-object Directory,Fullname,Attributes,BaseName,ExtentionName,CreationTime,LastWriteTime,IsreadOnly,Length | Export-Csv ""E:\test.csv"" -Force -delimiter "";"" -encoding ""utf8"" -notypeinformation;"""
```

　これをいったんメモ帳などにコピーし、希望する条件を確認して整え、マウスの右クリックでコマンドラインに張り付けます。（Cmd.exeのコピーはなぜ右クリックなんでしょうね）
長いことは長いのですが、慣れると実に簡単にパワーシェルの機能を使うことできてしまいます。
　パワーシェルはロックがかかっており、通常は使えません。また全く使えない場合も会社によってはあるでしょう。
　しかし、-S[cope] Process -F[orce] が一つのポイントでこれでパワーシェルの機能がこのプロセスだけ使えるようになります。全く使えない場合もあるかもしれませんが、その場合は*あきらめて転職しましょう。*しかし使えれば一気にパワーシェルの世界が広がるわけです。
deck.glを試す

UberがオープンソースとしてリリースしているWebGLベースのマップビジュアライズエンジンを試してみました。

以下がソースのサイトですが、しっかりと、Examplesなどもあり、開発者にやさしいサイトになっています。
https://uber.github.io/deck.gl/

![image.png](https://qiita-image-store.s3.amazonaws.com/0/146939/aa848026-bfa1-ced4-c548-2c7600db354d.png)

# deck.glをインストール

node.js / npm がインストールされていればすぐにできます。
lumaという同じくWebGLベースのレンダリングエンジンをインストールする必要があります。

```
npm install deck.gl luma.gl
```

エラーが出るので、react もインストールしておいた方がよいようです。

# deck.glを実行

上記のgithubからexampleを入手し、exapmpleフォルダにて

```
npm install
```

とインストールを行い

```
npm start
```

で実行できます。localhostで立ち上がります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/146939/c4763b26-e752-3a34-3c39-8cd2b546ee2b.png)


Windowsでも特に大丈夫でした.
Mapboxのアクセストークンがないと地図が表示されませんので、予め取得が必要です。

# パフォーマンステスト

スキャッタプロットを何十万点もやるテストが用意されています。1M pointsならロードからブラウズまで非常に高速です。10Mですとローディングに時間がかかりますが、レンダリングはなめらかです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/146939/50024687-6537-883f-b6f3-d18044bf53fb.png)
Jquery UI を利用した 対象との交換型並び替え

Jquery UI の　sortable()はなんかレスポンスがよくないのと、
少し調べて交換型のソートがないので、作りました。

ドロップした位置の要素をドラッグした要素のいちに移動、
つまり入替えを行うソートです。

##動作
[デモ](https://ryosukemori.github.io/demo-exchangetype-sortable/)

##実装

```html:html
<ul class="sortable">
    <li style="background:#e53935">Red</li>
    <li style="background:#43A047">Green</li>
    <li style="background:#1E88E5">Blue</li>
    <li style="background:#FDD835">Yellow</li>
    <li style="background:#8E24AA">Purple</li>
    <li style="background:#D84315">Orange</li>
    <li style="background:#37474F">Gray</li>
</ul>
```

```js:exchangeSortable
$(function(){

    //ドラッグ中のオブジェクト情報
    var $dragObj;
    var $prevObj;
    var $dragDefPosition;
    var $revert = true;

    $('.sortable li').draggable({
        containment: 'ul.sortable',
        scroll: false,
        opacity: 0.8,
        zIndex: 10,
        revertDuration: 500,
        start: function(){
            //ドラッグ開始時に座標保存
            $dragObj = $(this);
            $dragDefPosition = $(this).position();
            $prevObj = $(this).prev();
            $revert = true;
        },
        revert: function(){
            //droppableの後に実行されるので、droppable()内でfalseにして無効化
            return $revert;
        },

    });

    $('.sortable li').droppable({
        drop: function( event, ui ){

            //ドラッグ無効
            $('.sortable li').draggable('disable');

            $revert = false;
            $dropObj = $(this);

            $dropPosition = $dropObj.position();

            $dragObj.animate({
                top: $dropPosition.top - $dragDefPosition.top,
                left: $dropPosition.left - $dragDefPosition.left,
            },'fast'
            ,function(){

                $dropObj.animate({
                    top: $dragDefPosition.top - $dropPosition.top,
                    left: $dragDefPosition.left - $dropPosition.left,
                },'200'
                ,function(){

                    //ドロップした要素の手前にドラッグ要素を移動
                    $dropObj.before($dragObj);
                    $dragObj.css({'top':0,'left':0});

                    //ドラッグ要素の元位置にドロップ要素を移動
                    if( $prevObj.length != 0){
                    $prevObj.after($dropObj);
                    }
                    else{
                        $('ul.sortable').prepend($dropObj);
                    }
                    $dropObj.css({'top':0,'left':0});
                    

                    //ドラッグ有効
                    $('.sortable li').draggable('enable');

                });
            });
        },
    });
});
```

##参考
[jQuery UI の draggable とdropppable でドラッグ吸着](https://qiita.com/tsunet111/items/911b72e0fb140969190c)
[Survey] Kaggle - Santander 1位解法まとめ

Kaggle - Santander Product Recommendation[^1]の1位解法[^2]の調査記事です．

Title: #1 solution
Author: idle_speculation
Kaggle Discussion: https://www.kaggle.com/c/santander-product-recommendation/discussion/26809

## 開発環境

- i7-5820K
- GTX-970
- 64GB RAM

## 特徴量

- 製品のlag, 製品登場から期間，製品の平均，最後の製品購入からの時間など
- 製品以外でのlagや変更(segmento, ind_actividad_cliente, cod_prov, indrel_1mes, tiprel_1mes)
- 個別のモデルに対しては悪影響が出るけど，アンサンブルには役立つ特徴量: canal_entrada, segmento, cod_prov

## モデル

- 12個のニューラルネット
- 8個のGBMモデル

### GBMモデル

- 16種類の製品を対象とした17クラスの多項式モデル(フォーラムと若干異なる)
- 17番目のクラスは残り8つの製品の一つを追加するか否かを意味
- 様々な製品の追加は異なる目標での重複業を追加することによって行う??
- 重複行は相互の追加された製品の数で重み付け
- LightGBMだと高速なので良かった．
- 期間や特徴量の組み合わせによってモデル間に差を作った．

### NNモデル

- 製品の追加よりむしろ，対象の月に製品が存在することを見つけることが目的．(新製品であることか顧客が持ち去ったことの両方の意味あり)
- どちらかというと多クラス分類問題．
- 全てのネットワーク構造は同一.(512個のノードからなる隠れそう，16個の出力層)
- Kerasで実装．

## 後処理

- 各サブモデルは2015年6月,2015年12月,2016年6月で評価
- 特徴量fecha_datoは1〜18からなる数値情報として盛り込んでいる．
- テストデータでの特徴量fecha_datoの修正は異なる月でスコアをつけることに影響している???

- 各モデルの2016年6月のスコアはrecaスコアを除いて保持されていて，2015年6月のスコアで置換
- ccoスコアも同様に2015年12月のスコアで置換

- サブモデルのスコアは前月に顧客が商品を買った場合は0に設定.
- 個別の製品スコアはpublic LBを用いて算出(単一の商品のみ提出することで算出)

- 最後はleaderboardの結果によって各モデルの重みを算出し，各モデルのアンサンブルを行った．

## 備考

- 最長モデルの学習時間は約10時間
- 前処理を全てRで行ったのでRAMが最大のボトルネックとなっていた

## References

[^1]: Kaggle, [Santander Product Recommendation](https://www.kaggle.com/c/santander-product-recommendation).
[^2]: idle_speculation, [#1 solution](https://www.kaggle.com/c/santander-product-recommendation/discussion/26835).
macOS Tips

# ショートカット
## スクリーンショット
- 画面全体 : Command + Shift + 3
- 選択部分 : Command + Shift + 4
- 選択したウィンドウ : Command + Shift + 4 + Space

## Macで最前列のアプリを終了させる
```command + option + shift + esc ```
を3秒以上ずっと押す。そうすると最前列のアプリを強制終了。

# コマンド
## Mac ターミナルから画像の一括リサイズ
``` sips -Z 80 *.jpg ```

- -Zはアスペクト比を保持するオプション
- 80はサイズ。縦幅か横幅の大きい方を指定サイズに合わせる

## Mac ターミナルからプリントキューを削除
``` lprm - ```
Swift4にあげたらNSExpressionのCustom Functionが動かなくなった

Swift4にあげたら、NSExpressionのCustom Functionがunrecognized selector sent to instanceになって動かなくなったのでメモ。

#NSExpressionのCustom Functionについて
NSExpressionでは以下のように文字列を計算できます。

```swift
let exp = NSExpression(format: "FUNCTION((10.0*pi*t), \'cos\')*FUNCTION((0.1*pi*t), \'cos\')")
let elements = ["pi" : Double.pi, "t" : 1.0]
exp.expressionValue(with: elements, context: nil) as? Double //0.951056516295154
```

このFUNCTION()で囲まれているところがCustom Functionになります。
以下のようにNSNumberを拡張してCustom Functionを作れます。(以下はSwift3でのコード)

```swift
public extension NSNumber{
    func tan() -> NSNumber{
        return NSNumber(value: Darwin.tan(self.doubleValue))
    }

    func sin() -> NSNumber{
        return NSNumber(value: Darwin.sin(self.doubleValue))
    }

    func cos() -> NSNumber{
        return NSNumber(value: Darwin.cos(self.doubleValue))
    }

    func atan() -> NSNumber{
        return NSNumber(value: Darwin.atan(self.doubleValue))
    }

    func square() -> NSNumber{
        return NSNumber(value: self.doubleValue * self.doubleValue)
    }
}
```

#発生した問題
先にあげた例のような式だと、

```
Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[__NSCFNumber cos]: unrecognized selector sent to instance
```
と出てcosという関数がないと実行時エラーが出ます。

#解決方法
NSNumberのextensionの前に`@objc`を入れるだけ。

```swift
@objc
public extension NSNumber{

    ・・・
```

selector周りでobjcをつけないといけないことは知ってましたが、まさかここまで飛び火するとは。Objective-Cはあまり知らないんですよね。

もしかしたら、この先動かないところが出た時、NSが付いていたらこれと同じような方法で解決できるかもしれません。

終わり
Firebase Cloud Messaging でバックグラウンドでも処理する

Firebase Cloud Messaging で通知を受信して、独自の通知表示を行いたい場合、`FirebaseMessagingService#onMessageReceived` がアプリがバックグラウンド時には呼び出されないことで困ります。

`FirebaseMessagingService#handleIntent` をオーバーライドすれば、フォアグラウンド・バックグラウンドに関わらず、処理を記述することができます。

```java
public class YourMessagingService extends FirebaseMessagingService {
	@Override
	public void onMessageReceived(RemoteMessage remoteMessage) {
		// handleIntentをオーバーライドしているので呼び出されない
	}

	@Override
	public void handleIntent(Intent intent) {
		// intentからデータを取得して使う
		final String body = intent.getStringExtra("gcm.notification.body");

		// your code here
		final NotificationCompat.Builder builder = new NotificationCompat.Builder(getApplicationContext());
		builder.setSmallIcon(R.mipmap.appicon);
		builder.setContentText(R.mipmap.appicon);
		...
	}
}
```

`super.handleIntent` を呼び出すと、Firebaseの標準動作である「バックグラウンドの場合はシステムトレイに入る」が実行されるので、自前で通知を組み立てる場合は呼び出さないこと。

----

Firebase SDK を 11.6.0 にすると `FirebaseMessagingService#handleIntent` が final になるので、上記のコードはコンパイルできません。11.4.2 では大丈夫です。

そもそもバックグラウンドにいる場合にメッセージをハンドリングできないという仕様が謎ですが…… SDK がオープンソースになったら final を外す Pull Request を送りたいと思います。
メモ: Visual Studio 6.0 (Visual C++)

## プロジェクトを開く

* 拡張子`.dsw`のものがプロジェクトファイル。(`.sln`ではない)

## インクルードPATHの追加方法

* 参考: https://msdn.microsoft.com/ja-jp/library/cc351684.aspx
* ツール -> オプション -> ディレクトリ

![](https://i-msdn.sec.s-msft.com/dynimg/IC147659.jpg)

ライブラリもここで追加できる。


## ビルド失敗したらクリーンしてみる

* 昔の情報が残っていたりするので試してみるとビルド通ったりする。


## iphlpapi.h が無い

* 
昔のSDKらしい。入手方法はようわからん。(mingwに入っているのを使う？)

* [Windows® Server 2003 SP1 Platform SDK Full Download ](https://www.microsoft.com/en-us/download/confirmation.aspx?id=12261)を使えば良い。
    * 他バージョン[Windows SDK/Platform SDK の バージョン と ダウンロードURL | tech@winginfo](https://techwing.wordpress.com/2010/11/23/windows-sdkplatform-sdk-%E3%81%AE-%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3-%E3%81%A8-%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89url/)


![スクリーンショット 2019-09-11 9.41.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/2923dee6-5815-0fab-e7ee-e245979189c3.png)
react-railsで最新Reactバージョンにする

https://github.com/reactjs/react-rails

デフォルトの設定だとReactのバージョンが全然最新じゃない。
https://github.com/reactjs/react-rails/blob/master/VERSIONS.md

1. 下記からreactとreact-domのファイルをダウンロード(npmで生成しても良い)
 - https://unpkg.com/react@latest/umd/react.production.min.js
 - https://unpkg.com/react-dom@latest/umd/react-dom.production.min.js

2. app/assets/javascriptsに上記のファイルを置く
3. application.jsを書き換える
```//= require ./react
//= require ./react-dom
//= require react_ujs
```

以上です。
反復法で2次方程式を解く

反復法の素晴らしさを示そう
2次方程式を解く場合、普通は解の公式に数値を代入して解くだろう。

```math
ax^2 + bx + c = 0\\
\Leftrightarrow
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
```

他にも、ニュートン法で解く場合は微分をしなければならない。
微分も解の公式も覚えられない人にお薦めの方法がある
方程式の両辺にxを足し

```math
ax^2 + bx + c = 0\\
\Leftrightarrow
x = ax^2 + (1+b)x + c
```

左辺のxをyに置き換える

```math
x = ax^2 + (1+b)x + c\\
\Leftrightarrow
y = ax^2 + (1+b)x + c
```

x = yとなる数値を探せば良い
xに適当な数字を入れよう。
その結果を元に次のxを決めてやれば良い。

```math
\begin{align}
y &= ax_{current}^2 + (1+b)x_{current} + c\\
x_{next} &= (1+w)x_{current} - wy
\end{align}
```

wは重み、この計算を適当な数回せば求める答えが手に入る

```c
#include <stdio.h>

int main()
{
    int i;
    double a,b,c,v,w,x,y;
    a = 1.0;
    b = 2.0;
    c = 1.0;
    w = 0.1;
    
    x = 0;
    y = a*x*x + (b+1.0)*x + c;
    x = (1.0 + w) * x - w * y;
    v = (y - x)*(y - x);
    for(i=0;i<1000;i++) {
        y = a*x*x + (b+1.0)*x + c;
        if(v < (y - x)*(y - x)) {
            w = -w;
        }
        x = (1.0 + w) * x - w * y;
    }
    
    y = a*x*x + b*x + c;
    printf("答え:%f\n誤差:%f\n",x,y);
    
    return 0;
}
```

実数解が存在するなら誤差は小さな範囲で収まる
実数解が1つだけいるならこの方法が使える
wを大きくしすぎると発散する
そして反復回数を増やせば増やすほど精度が上がる

2次方程式の場合は解の公式が覚えられない人にしかメリットが無いが、
反復法には直接計算出来ない解の公式が無いものでも計算できるメリットがある
【GoogleAppsScript】スプレッドシート操作(セルへのデータ書き込み偏)

Google Apps Script からスプレッドシートを操作する方法です。
今回は、スプレッドシートにデータを書き込みます。

Google Apps Script からスプレッドシートを操作する基本的な方法(シートの取得等)は[こちら](https://qiita.com/chihiro/items/3e1d17b78676c6a39d24)をご覧ください。


#指定したセルの値を変更する
```js
var spreadsheet = SpreadsheetApp.openById('id');
var sheet = spreadsheet.getSheetByName('sheet_name');
sheet.getRange("H1").setValue("test");
```



#指定した範囲のセルの値を変更する
```js
var values = [
    [ "apple", "banana", "lemon" ],
    [ "red", "yellow", "yellow" ]
];
sheet.getRange("B2:D3").setValues(values);
```

※sheetは取得済みとします。


#指定したセルを塗りつぶす
```js
sheet.getRange("H1").setBackground('#FF0000');
```



#指定したセルの文字色を変更する
```js
sheet.getRange("H1").setFontColor('#FF0000');
```



#指定したセルのフォントサイズを変更する
```js
sheet.getRange("H1").setFontSize(50);
```

#指定したセルのフォントを変更する
```js
sheet.getRange("H1").setFontFamily('Arial');
```

#指定したセルの字体を変更する(italic or normal)
```js
sheet.getRange("H1").setFontStyle('italic');
//斜体にする

or

sheet.getRange("H1").setFontStyle('normal');
//元に戻す
```

#指定したセルの字体を変更する(bold or normal)
```js
sheet.getRange("H1").setFontWeight('bold');
//太字にする

or

sheet.getRange("H1").setFontWeight('normal');
//元に戻す
```

#指定したセルに関数を指定する
```js
sheet.getRange("H1").setFormula('=SUM(I1:I3)');
```

このほかにも、上記の処理を複数のセルに対して行なったり、セルに枠線を付けることもできます。
参考：[Range](https://developers.google.com/apps-script/reference/spreadsheet/range)
PonyでFizzBuzzが動かなかった話

久しぶりにPonyに触れようと思い(あまり知られていない言語なので、[公式サイト](https://www.ponylang.org)を御覧ください。) FizzBuzzを書こうと試みました。そうしたところチュートリアルの[Case Function](https://tutorial.ponylang.org/pattern-matching/case-functions.html)(パターンマッチ)の章にて発見しました。~~これを実行したところ何と実行時エラーを吐いてしまいました・・・。~~ Pony 0.19.3で動作するようになりました！ @matsu_chara さんありがとうございます！

```scala
use "collections"

class FizzBuzz
  // case functions for FizzBuzz
  fun _fizz_buzz(_, 0, 0): String => "FizzBuzz"
  fun _fizz_buzz(_, 0, b: U64): String => "Fizz"
  fun _fizz_buzz(_, f: U64, 0): String => "Buzz"
  fun _fizz_buzz(x: U64, _, _): String => x.string()

  // parameters are different, return types are different
  fun fizz_buzz(x: U64): String ? =>
    _fizz_buzz(x, x % 3, x % 5) as String
  fun fizz_buzz(x: Range[U64]): Array[String] ? =>
    let acc = Array[String]
    for z in x do
      acc.push(fizz_buzz(z)? as String)
    end

actor Main
  new create(env: Env) =>
    try
      for x in Range[U64](1, 101) do
        env.out.print(FizzBuzz.fizz_buzz(x)? as String)
      end
      let lines = FizzBuzz.fizz_buzz(Range[U64](1, 101))? as Array[String]
      // env.out.print("\n".join(lines))
      // 以下のように修正。
      env.out.print("\n".join(lines.values())
    end
```

実行したい方は[こちら](https://playground.ponylang.org/?gist=161419ec79600459c42eb9dd6199fac2)

エラーおきたよ　とだけ [Issue](https://github.com/ponylang/ponyc/issues/2249) を立てました。

動かないので解説しても魅力が半減なので雑に今回のFizzBuzzの特徴を列挙すると、

- for-inとRange
- Haskell風の関数によるパターンマッチ
- キャストでのエラー可能性の明記
- Pythonライクな文字列Join

と言った感じになりました。

早く動くようになるといいですね。
Xcode 9 SimulatorでOpen GLが遅すぎるのを何とかする


# 11/10 追記

Xcode 9.1で修正されました :clap: 
よかった :clap: 

# Motivation
Xcode 9付属のシミュレータでOpenGLを動かすと信じられないぐらい遅くて、まともに動作確認できません。

なんとかできないかと思っていたら次のツイートを発見

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">I have a working fix for Xcode 9&#39;s major iOS Simulator 3D perf issues (MapKit, etc): you need to swap in OpenGLES.framework from Xcode 9b3 <a href="https://t.co/BrQ0QPIQEs">pic.twitter.com/BrQ0QPIQEs</a></p>&mdash; Steve T-S (@stroughtonsmith) <a href="https://twitter.com/stroughtonsmith/status/910203896332783616">2017年9月19日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

# すること

つまり

`/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/Library/CoreSimulator/Profiles/Runtimes/iOS.simruntime/Contents/Resources/RuntimeRoot/System/Library/Frameworks/OpenGLES.framework`

を別のframeworkに置き換えればよさそう

# frameworkを引っ張ってくる

古いXcode入ってればそこから引っ張ってくれば良いと思います。

ないときは危険は認識しつつこの辺から・・・

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">Here&#39;s the file uploaded if you still need it (from Xcode 9 Beta 3): <a href="https://t.co/JJ0hoLRbk4">https://t.co/JJ0hoLRbk4</a></p>&mdash; Stephen Silber (@stephensilber) <a href="https://twitter.com/stephensilber/status/910697293464133632">2017年9月21日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

※Appleが提供しているものではないので、改変されている可能性もあります。自己責任で。

# 終わりに



少し早くなった。
もともと実機では遅くないので、（パス的に影響ないとは思うけれど）リリースとかでは戻したほうが無難かも。
とりあえず9.1出てほしい。
[AWS] ドキュメントルートを変更する

## 概要
AWSのEC2でドキュメントルートを変更する方法です。

## 変更ファイル
EC2では下記のファイルに指定が入っています。

```
/etc/httpd/conf/httpd.conf
```


# 変更方法

EC2にログインした状態で下記のコマンドを実行します。


```
$ sudo vi /etc/httpd/conf/httpd.conf

```

vimモードに変更し、ファイルを290行目付近の記述を下記のように変更します。

### 変更前

```
DocumentRoot "/var/www/html"
```

### 変更後

```
DocumentRoot "/var/www/html/app/webroot"
```

### 変なファイルが生成された時は
下記のコマンドで削除します。

```
$ sudo rm /etc/httpd/confd/httpd.conf.swp
```


# 最後
Apacheを再起動すれば反映されます。



## おそらく役立つ情報 
痒いところに手が届くかもしれない記事を書いています。
フォローしてくれるとやる気になります！

- Qiita　プログラミングに関する情報はこちら
http://qiita.com/nadonado


- Twitter　日々のつぶやきはこちら
https://twitter.com/hironado
node.jsのインストール方法

node.jsについて勉強してみたいと思いnode.jsを入れてみました。
環境構築で詰まってしまうのは嫌なので、メモがわりに書きました。
# 対象読者
・node.jsを始めたい人

# node.jsとは
Node.jsとは、JavaScript でプログラミングすることのできる、サーバーサイド向けのプラットフォームのことです。
ざっと理解したい人は
[Node.js を5分で大雑把に理解する](https://qiita.com/hshimo/items/1ecb7ed1b567aacbe559)

# インストール方法
1. バージョン管理ツールのインストール（nodebrew）
2. nodebrewを用いてnode.jsをインストール

# nodebrewのインストール

バージョン管理するツールです。
homebrewのnode.js版だと思っていいと思います。

では nodebrew をインストールするため、以下のコマンドを実行してください。

```
curl -L git.io/nodebrew | perl - setup
```

次にパスを通しましょう

そのまま、 パスを通す設定を行います。
以下のコマンドを実行します。

```
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.profile
```

.profile というファイルに追記することで、設定を編集しています。

.profile は、シェルの起動時に自動的に実行されるシェルスクリプトファイルのことです。

### 確認
下記のコマンドを実行して確認しておきましょう

```
nodebrew
```

下のように表示されれば成功です！

```
nodebrew 0.9.7
Usage:
nodebrew help                         Show this message
nodebrew install <version>            Download and install a <version> (compile from source)
nodebrew install-binary <version>     Download and install a <version> (binary file)
```

# Node.jsをインストール

ではnodebrewを使ってnode.jsをインストールしましょう。
下記コマンドを実行してください。
バージョンは適宜決めてください。
最新でいい場合は、latestのままで結構です。

```
nodebrew install-binary latest
```
### node.jsのバージョンを確認する方法

下記のコマンド入力

```
nodebrew list
```

このように表示される

```
v6.11.1
v6.10.1
current: v6.11.1
```

使用したいバージョンがあれば、

```
homebrew use v6.10.1
```

のように指定してあげる。
ちなみに今使っているバージョンは、current: に表示されているバージョン。


# node.jsのバージョンの確認方法
下記のコマンドを入力

```
node -v
```
バージョンがかえってくる。

```
v6.11.1
```
Arduino Leonardoのリセット

Arduino Leonardoにマウス制御のスケッチを書き込んでリセットするのに苦労したのでメモ

リセットボタンを二度押しすると、
LEDが点滅している数秒間マウスの制御が解除される。
その間にリセット用のスケッチを書き込む。
**注) リセット用のスケッチを書き込んでいる間に点滅が終わってしまうので、
スケッチを書き込む瞬間までリセットボタンを二度押しし続ける**

書き込む空のスケッチはこんな感じ。

```c++:blank.ino
void setup(){}void loop(){}
```

![a000057_front.jpg](https://qiita-image-store.s3.amazonaws.com/0/80816/a9e364fb-675c-4c75-ec86-55f663395bdb.jpeg)
Chrome OS と Firefox OS のアプリと Manifest

Chrome OS と Firefox OS では、セキュリティ的に問題があるかも知れない API にアクセスするためには、開発者は Manifest というファイルの permissions という項目に使う API を列挙しないといけない。permission の書式は似ているようで結構違うのでメモする。

## Chrome OS

アプリには以下のような種類がある。現在 PC の Chrome でも Packaged apps の実行が可能だが、廃止になる予定。もしかして Chrome OS でもそのうち Packaged app が廃止されて特権 API が必要なアプリは Android に統一されるのでは? という気もする。

* Android アプリ
* [Packaged apps](https://developer.chrome.com/apps/about_apps)
* [Hosted apps](https://developer.chrome.com/webstore/get_started_simple)

### Permission の書き方

manifest.json 内に以下のように、権限リストを書く。

```
"permissions": [
  "serial",
  "storage",
  "videoCapture"
],
```

権限の書き方に以下のようなバリエーションがある。

* `"fileSystem"` - 文字列をひとつだけ指定
* `{ "fileSystem": ["write"] }` - 追加オプションをオブジェクト値として書く

### geolocation の例

* Manifest permission:
    * この API を使いたい場合、manifest.webapp に `"permission": { "geolocation" }` が必要。
* API name:
    * [navigator.geolocation](https://dev.w3.org/geo/api/spec-source.html)
    * permission name と　API 名に関連はないようだ。

### 参考

* [Chrome JavaScript APIs](https://developer.chrome.com/apps/api_index)
* [Chrome Extensions APIs](https://developer.chrome.com/extensions/api_index)
* [Chrome Declare Permissions](https://developer.chrome.com/apps/declare_permissions)
* [Chrome Manifest File Format](https://developer.chrome.com/apps/manifest)

## Firefox OS

アプリには以下のような種類がある。

* hosted: Web サーバに置かれるアプリ
* packaged: ダウンロードして使うアプリ
    * web: 承認されていないアプリ
    * privileged: Firefox Marketplace が承認されたアプリ
    * certified: OEM やキャリアが承認したアプリ

### Permission の書き方

manifest.webapp 内に以下のように、description や access を書く。

```
"permissions": {
  "contacts": {
    "description": "Required for autocompletion in the share screen",
    "access": "readcreate"
    },
  "alarms": {
    "description": "Required to schedule notifications"
  }
}
```

### geolocation の例

* Manifest permission:
    * geolocation
    * この API を使いたい場合、manifest.webapp に `"permission": { "geolocation" : ... }` が必要。
* API name:
    * [Geolocation](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation)
    * Manifest permission と API Name の名前の付け方に強制ルールは無いようだ。
* Minimum app type required:
    * hosted
* access property: none
    * ファイルアクセス等の API では、readonly など細かいパーミッションを選べる。
* Default granted: Prompt
    * hosted type でも使える API はたいてい Prompt となっている。
    * Prompt の出し方は API によって異なる。
        * geolocation では getCurrentPosition() の際ブラウザが勝手に Prompt を出す。
        * Notification API では Notification.requestPermission() で明示的に Prompt を出す。
            * 多分 Notification API は使う前に承認が欲しいから?

### 参考

* [Firefox OS App permissions](https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Firefox_OS_apps/App_permissions)
* [Firefox OS App manifest](https://developer.mozilla.org/en-US/docs/Archive/B2G_OS/Firefox_OS_apps/Building_apps_for_Firefox_OS/Manifest)

## Web App Manifest

目的は似ているがフォーマットはかなり違う。例えば、icons の指定方法が全然違う。また、permission の指定は無いので、Chrome App や Firefox App の Manifest を置き換える意図は無いようだ。

何故か sevice_worker が指定出来るようになっている所が面白い。経緯については https://github.com/w3c/manifest/issues/161 に記録が残っている。

* [Web App Manifest](https://w3c.github.io/manifest/)
SmartGit > Add Branchしたつもりが、Add Tagだった時にAdd Branchだったことにする手順 (コミットをpush済)

```txt:動作環境
Windows 7 Pro (32bit)
SmartGit Version 17.0.4 #10132
```

Branchを切ったつもりが、Tag追加になってしまっていた場合の対処。
masterでコミットをPush済みの場合。

### 注意事項

<font color=red>!!!注意!!! 方法を間違うとコミット内容が消えるかもしれない。テストリポジトリで動作を理解した上で、注意して実施すること。</font>

### 対処

以下の方法で対処した。

1. masterにおいて、Branchを切り始めたいコミット(Add Tagしたコミット)でCheckout
    - Don't create local branch (just work read-only)
2. Branchを切る (例: feature/170925/useXXX)
    - Add Branch
3. BranchをCheckout
4. Branchに対してmasterをマージ
     - Fast-Forward
     - 理由: masterのコミットをBranchに持ってくるため
5. BranchのマージコミットをPush
6. masterをCheckout
7. Branchを切りたかったコミットまでReset
     - Hard (Set the Index and working tree to the state of the selected commit)を選択
8. masterに対して手順2で切ったBranchをマージ
     - Create Marge-Commit (**Fast-Forwardマージでない方**)
     - 理由: マージ内容を見やすくするためFast-Forwardとしない
9. masterのマージコミットをPush
10. 間違ってつけたTagを削除
 (feature/170925/useXXX)

### より良い対処

間違ってTag追加とした時点で気づくことが大切。
(二回間違った自分に対して)。
[深圳]China Unicom 128K三合一成品卡・使い方(1)

# AGENDA

0.はじめに
1.Web登録の前に
2.Web登録
3.WeChatでのチャージ
4.今後

# 0.はじめに

今回の深圳旅行で、China Unicomの「128K三合一成品卡」というSIMを購入しました。
日本人だけで深圳のChina Unicomショップに行ったのですが、登録処理後はSIMカードを渡されただけで、説明書などもなく、SMSは使えてはいるものの、よくわかりません。

SIMカードに書かれている [www.10010.com](http://www.10010.com)も良く判らないし・・・
![20170925_063450760_iOS.jpg](http://qiita-image-store.s3.amazonaws.com/0/79389/65497e7f-92f1-4d45-7554-65ff37ead420.jpeg)


日本に戻って、中国人の同僚の助けを借りて、Web登録まで出来ましたので、その方法を共有します。
ただ、ちょっと難易度が高いので、中国語が分かる方と一緒に作業されることをオススメします:sweat:

なお、このSIMカードちょっと特殊なようで、中国人の同僚からは「ちゃんと使い方を調べた方が良い」とアドバイスされました。うぅ〜ん・・・

詳しい方、ぜひコメント・アドバイスよろしくお願いします！！

# 1.Web登録の前に

Web登録中にSMSで認証コードがきますので、購入したSIMを入れた携帯電話を起動しておいて、SMSが受信できるように準備しておいてください。

# 2.Web登録

##(1)登録処理開始

[www.10010.com](http://www.10010.com/bj/)にアクセスして「我的联通」から登録開始します。
<img width="1440" alt="SS 2017-09-25 15.25.59.JPG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/dc259333-e5b3-6be4-fafe-dbe16d389768.jpeg">

##(2)初期パスワードは電話番号の下６桁

電話番号と初期パスワード、表示された文字列を入力します。
初期パスワードは、電話番号の下６桁です。

<img width="536" alt="SS 2017-09-25 8.29.30.JPG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/835b4a34-927a-bbe1-81c2-ca0a47a05305.jpeg">

##(3)パスワード変更手続き開始

パスワード変更処理に入ります。「4.成功」までうまく行きますように・・・「下一歩」が「NEXT」です。
<img width="1160" alt="SS 2017-09-25 8.30.05.JPG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/69bda49f-debc-0458-6169-932fe22567db.jpeg">

##(4)証明書番号はパスポートの下６桁

次の画面で登録に使用したパスポートの下６桁を入れます。
<img width="695" alt="SS 2017-09-25 8.32.11.JPG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/accaecd2-8bc9-3c7c-a980-a20af64a7470.jpeg">

##(5)携帯でSMS

その後に同じ画面の「获取随机码」を押します。
すると、携帯に認証番号がSMSで送られてきますので、それを「获取随机码」の左欄に入力して「下一歩」押します。
![20170925_070945622_iOS.jpg](http://qiita-image-store.s3.amazonaws.com/0/79389/a394de89-dda0-9e07-c24a-50ec781f291b.jpeg)


##(6)新しいパスワードを数字６桁で指定

新しいパスワードを数字６桁で設定します。
<img width="1028" alt="SS 2017-09-25 8.32.51.JPG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/363b6f5b-c434-c289-dc33-3c413629730f.jpeg">

##(7)成功

成功しました！
<img width="1020" alt="SS 2017-09-25 8.35.58.JPG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/55962f3e-e12a-e9db-12d7-b5c6ec19a2cc.jpeg">

##(8)新しいパスワードでログイン

頭の画面に戻って、電話番号と新しいパスワードでログインできるか確認します。

<img width="1191" alt="SS 2017-09-25 8.38.25.JPG" src="http://qiita-image-store.s3.amazonaws.com/0/79389/8a4a9ac7-9984-6c55-33b6-ef81c67784e7.jpeg">

# 3.WeChatでのチャージ

同僚曰く、チャージはWechatから簡単にできるとのことです。（まだ試してません）

例の画面の「Mobile Top Up」
<img width="375" alt="20170925_071447000_iOS.png" src="http://qiita-image-store.s3.amazonaws.com/0/79389/92f10abb-f418-3d3a-6cc7-e0a222d1b445.png">

ここに電話番号入れてチャージ金額選ぶだけらしい。
<img width="375" alt="20170925_071457000_iOS.png" src="http://qiita-image-store.s3.amazonaws.com/0/79389/c2cd2de6-d903-8fac-41e2-3651924878af.png">


4.今後

多忙な同僚に、仕事の合間に助けてもらったので、まだまだ詳しい内容がわかっていません。
例えば、同僚曰く「これってインターネットが従量課金っぽいけど、データパックとか追加できるんじゃないですかねー。WeChatでできるかも」とか。

今回、「使い方（１）」としていますので、追加情報あれば（２）を描きたいと思っています。
Rails + Chrome headless + Capybara + Circle CI でテスト環境を構築してみた

# 題名通り作ってみたのでざっくり共有
---
- rails headless capybaraをforkする
 - https://github.com/drivy/rails-headless-capybara
 

### 次にcircle ciを導入
 - https://circleci.com/
 - 右上の Go to app　を選択

![image.png](https://qiita-image-store.s3.amazonaws.com/0/195259/0837cb94-0e77-740f-7b50-d2fe34e88c35.png)

---

 - 左側のサイドバーのProjectsを選択
 - `rails headless capybara`　の `Setup Project`を選択
 
 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/195259/cb8a5606-7991-6589-c7d0-596d38ead114.png)

---

 - 以下の画面に変化します。僕はLinux、2.0,rubyを選択していきました。
 
<img width="1435" alt="スクリーンショット 2017-09-25 15.34.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/195259/220c4e7c-e82c-1954-9bfb-3b40cae1fbae.png">

---

- 同画面を下の方にスクロールしていくと「Next Steps」が出てくるので手順通りに進めていきます。

<img width="1432" alt="スクリーンショット 2017-09-25 15.36.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/195259/dc9e7c5b-cb4f-ad7b-272a-4c2311117b00.png">

---

## Next Steps
---
1 まずは

```
mkdir .circleci
touch .circleci/config.yaml
```
でフォルダとファイルを作成します

---

2 『Copy to clipboard』でコピー
3 適当にブランチを切って、コピーしたものを `config.yaml`に貼り付ける
4 そのブランチを保存してプッシュします
5 『Start building』を選択します

---

こんな感じの画面が出れば成功
![image.png](https://qiita-image-store.s3.amazonaws.com/0/195259/f2a66e36-9672-7f4c-645f-6f66ffd843fd.png)

---

## `config.yaml`の設定
プッシュしたコミット見ると「❌」ついてるのでエラー内容をみて見る！

```
rake aborted!
Don't know how to build task 'db:create' (see --tasks)
```
`db:create` 今回必要なかった〜と思い、 `config.yaml` の中の `rake タスク`を削除します

---

次にもう一回プッシュするとまた「❌」...

```
#!/bin/bash -eo pipefail
mkdir /tmp/test-results
TEST_FILES="$(circleci tests glob "spec/**/*_spec.rb" | circleci tests split --split-by=timings)"

bundle exec rspec --format progress \
                --format RspecJunitFormatter \
                --out /tmp/test-results/rspec.xml \
                --format progress \
                "${TEST_FILES}"
Requested historical based timing, but they are not present.  Falling back to name based sorting
bundler: command not found: rspec
Install missing gem executables with `bundle instal
```
---

今度は必要じゃない `rspec`の設定でエラーが出てるので、 `config.yaml`で

```
- run:
     name: run tests
     command: |
```
以下の設定を全て削除します！
そうすると、今度はテスト自体が走らないので

```
 - run:
     name: run tests
     command: |
      rails test test
```
`rails test test`を追加

---

これで今一度push!

```
#!/bin/bash -eo pipefail
rails test test
Run options: --seed 13377

# Running:

Puma starting in single mode...
* Version 3.9.1 (ruby 2.4.1-p111), codename: Private Caller
* Min threads: 0, max threads: 1
* Environment: test
* Listening on tcp://0.0.0.0:40662
Use Ctrl-C to stop
.

Finished in 1.557777s, 0.6419 runs/s, 0.6419 assertions/s.
1 runs, 1 assertions, 0 failures, 0 errors, 0 skips
```

いぇ〜〜い成功✌️

---

*補足

```ruby:home_test.rb
find('.foo').triger('click')
```
ここでエラーでる人は

```ruby:home_test.rb
find('.foo').click
```
に変更してくださいね！
Laravel に Middleware を追加する

#Laravel に Middleware を追加する

###1. app/Http/Middleware に追加する。

```
$ php artisan make:middleware Hogehoge
```

###2. app/Http/Middleware/Hogehoge.php の中身を書く。

処理は public function handle() 内、

```
return $next($request);
```
の前に書く。

Controller に値を渡す時などは Request にマージすることで実装する。

``` php:app/Http/Middleware/Hogehoge.php
class CustomerAuth
{
    public function handle($request, Closure $next)
    {
        $hoge = 'hoge';

        // Request に混ぜて Controller へ送る
        $request->merge([
            'hoge' => $hoge,
        ]);

       return $next($request);
    }
}
```

Controller 側では、Request $request['hoge'] に格納されています。

###3. app/Http/Kernel.php に追記する。

``` php:app/Http/Kernel.php
    protected $routeMiddleware = [
        ...,
        'hogehoge' => \App\Http\Middleware\Hogehoge::class,
    ];
```

###4. Controller に適用する

例えばHogeController ならその __construct に書く。

``` php:app/Http/Controller/HogeController.php
    class adminController extends Controller {
        public function __construct()
        {
            $this->middleware('hogehoge');
        }

        public function view(){
            return view('view');
        }
    }
```

以上です。
normalizeはバーテックスシェーダのあとで

謎解きはディナーのあとで
みたいなタイトルを目指しました。

HTML5カンファレンスでShaderの話をさせてもらう機会をいただきまして、
その時にDEMOをするのにShdr Editorというオンラインエディタを使いました。
http://shdr.bkcore.com/

控え室でWebGLな人たちと話をしていた時、DEMOの様子を少し見せたところ、
@kyasbal_1994 に、「`normalize` はフラグメントシェーダでした方がいいよ」と教えてもらった。

Shdrのデフォルトコードにそれは含まれている

```glsl
precision highp float;
attribute vec3 position;
attribute vec3 normal;
uniform mat3 normalMatrix;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
varying vec3 fNormal;
varying vec3 fPosition;

void main()
{
  fNormal = normalize(normalMatrix * normal); // <-- ここ
  vec4 pos = modelViewMatrix * vec4(position, 1.0);
  fPosition = pos.xyz;
  gl_Position = projectionMatrix * pos;
}
```

ぜったいにバーテックスシェーダで `normalize` してはいけないということではなくて、
`varying` でフラグメントジェーダに渡す前に `normalize` しても線形補間されたあとのベクトルの長さは `1.0` ではなくなっているということでして。

たしかに、 `normalize` されたベクトルの `length` で色を指定してみると真っ白になるはずがそうはならない。

```glsl
precision highp float;
uniform float time;
uniform vec2 resolution;
varying vec3 fPosition;
varying vec3 fNormal;

void main()
{
//  vec3 normal = normalize(fNormal);// <-- これだと真っ白になる
  vec3 normal = fNormal;
  gl_FragColor = vec4(length(normal));
}
```

実際の例はこちら
https://goo.gl/RsdhSN

数値的には微妙な差でも色々重ねがけしていくと問題になることがあるらしい。
iOS11からViewの一部だけを角丸にすることが簡単になった

Viewの一部を角丸にする方法がiOS11から簡単になってた

# 実装方法
例えばViewの右上と左下だけ角丸にしたい場合

## iOS10系以前

これまでは、角丸のPathが指定されている`CAShapeLayer`を作成し、それを角丸にしたいViewのマスクレイヤーに指定していた。

```swift
let redView = UIView(frame: CGRect(origin: .zero, size: CGSize(width: 100, height: 100)))
redView.center = view.center
redView.backgroundColor = .red
view.addSubview(redView)

//右上と左下を角丸にする設定
let path = UIBezierPath(roundedRect: redView.bounds, byRoundingCorners: [.bottomLeft, .topRight], cornerRadii: CGSize(width: 15, height: 15))
let mask = CAShapeLayer()
mask.path = path.cgPath
redView.layer.mask = mask
```

<img width="375" alt="Simulator Screen Shot - iPhone 7 - 2017-09-25 at 14.48.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/27785/56751e29-d28b-269c-9861-2405361307b7.png">


## iOS11から

Viewの全ての角を丸くしたい時と同様にCALayerの`cornerRadius`を指定すると共に、iOS11からCALayerに`maskedCorners`というプロパティが生えており、そこに角丸にしたい位置のオプション情報を指定するだけ。


```swift
let blueView = UIView(frame: CGRect(origin: .zero, size: CGSize(width: 100, height: 100)))
blueView.center = view.center
blueView.backgroundColor = .blue
view.addSubview(blueView)

//右上と左下を角丸にする設定
blueView.layer.cornerRadius = 15
blueView.layer.maskedCorners = [.layerMinXMaxYCorner, .layerMaxXMinYCorner]
```

<img width="375" alt="Simulator Screen Shot - iPhone 7 - 2017-09-25 at 14.59.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/27785/6bbb2d10-5373-b4d2-6430-4db2601a6c15.png">


この`maskedCorners`プロパティは`OptionSet`プロトコルに準拠した`CACornerMask`という構造体です

```CACornerMask.swift

public struct CACornerMask : OptionSet {

    public init(rawValue: UInt)

    
    public static var layerMinXMinYCorner: CACornerMask { get }

    public static var layerMaxXMinYCorner: CACornerMask { get }

    public static var layerMinXMaxYCorner: CACornerMask { get }

    public static var layerMaxXMaxYCorner: CACornerMask { get }
}

```

| プロパティ | 角丸になる場所 |
|:-----------:|:------------:|
| layerMinXMinYCorner    | 左上 |
| layerMaxXMinYCorner    | 右上 |
| layerMinXMaxYCorner    | 左下 |
| layerMaxXMaxYCorner    | 右下 |
EC2 の Laravel に Imagick をインストールする

# 環境を確認します

### スーパーユーザーにて行います

```
$ sudo su -
```

###【 Fileinfo Extension 】

```
# php -r 'phpinfo();' > /var/www/laravel/info.log
```
結果が
    fileinfo support => enabled
    version => 1.0.5
ならデフォルトでOK

###【 GD Library 】

```
# php -r 'var_dump(gd_info());'
```
結果が
array(**){
    ["GD VERSION"] => string(26) "bundled ..."
ならデフォルトでOK

【 Imagic 】

```
# php -r 'print_r(imagic::getVersion());'
```

結果が
    ["ver"] => ～～～
    でなければ、Imagick のインストールへ

#Imagick をインストールします

###1. Memcached (yum)

```
# yum install -y memcached memcached-devel
```

###2. php-pear (yum)

```
# yum install -y php-pear
```

##3. php56-devel (yum)

```
# yum install -y php56-devel
```

###4. memcache (pecl)

```
# yum install -y memcache
```

###5. Image Magick (yum)

```
# yum install -y ImageMagick*
```

###6. Imagick (pecl)

```
# pecl install imagick
```
※ please provide the prefix of imagemagick installation と出たらエンター

###7. php.ini 修正
ファイルの最後に1行追加

```
extension = imagick.so
```


# intervention/image をインストールします

```
$ cd laravel
$ composer require intervention/image
```
これでエラー出たら SWAP ファイルを作る

##【 SWAP ファイルを作る 】

```
$ sudo su -
# dd if=/dev/zero of=/swapfile1 bs=1M count=512
```

```
> 512+0 records in
  512+0 records out
  536870912 bytes (537 MB) copied, 5.74393 s, 93.5 MB/s
```

```
# ll /swapfile1
```

```
> -rw-r--r-- 1 root root 536870912 Mar  3 00:52 /swapfile1
```

```
# chmod 600 /swapfile1
# mkswap /swapfile1
```

```
> Setting up swapspace version 1, size = 524284 KiB
  no label, UUID=0cf6e114-a01e-45e5-94f6-7c9adf75f5f2
```

```
# swapon /swapfile1
```

```
# swapon -s
```

```
> Filename                                Type            Size    Used    Priority
  /swapfile1                              file    524284  0       -1
```

```
# free
```

```
>              total       used       free     shared    buffers     cached
  Mem:       1020188     626832     393356          0       8272     556020
  -/+ buffers/cache:      62540     957648
  Swap:       524284          0     524284
```

```
# grep Swap /proc/meminfo
```

```
> SwapCached:            0 kB
  SwapTotal:        524284 kB
  SwapFree:         524284 kB
```

### スワップファイルを無効化して Swap 領域のサイズを元に戻す

```
# swapoff /swapfile1
# rm -f /swapfile1
```


以上となります。
Laravel環境でオリジナル関数クラスをファサードとして登録する

#1. Facadeファイル群を作ります。
【階層】
laravel/
　└app/
　　└MyFacades/
　　　└Hoge/
　　　　└Hoge.php
　　　　　Facades/
　　　　　　└Hoge.php

``` php:app/MyFacades/Hoge/Hoge.php
namespace Hoge;
class Hoge {
    public static function fuga() {
    }
}
```

``` php:app/MyFacades/Hoge/Facades/Hoge.php
namespace Hoge\Facades;
class HogeFacade extends Facade {
    protected static function getFacadeAccessor() {
        return 'hoge';
    }
}
```
※関数は ```app/MyFacades/Hoge/Hoge.php``` のクラス内に static で書いていきます。

#2. 独自 Facade 追加用のサービスプロバイダーを作ります。

```
$ php artisan make:provider MyFacadeServiceProvider
```

#3. ファサードのネームスペースを登録する
```public function boot()``` はさわらずそのまま。
```public function register()``` に追記します。

``` php:laravel/app/providers/MyFacadeServiceProvider.php
    public function register() {
        $this->app->bind('hoge', function($app) {
                return new \Hoge\HogeFacade;
            }
        );
    }
```

#4. laravel/composer.json の autoload->files に追加

``` json:laravel/composer.json
{
    "autoload": {
        "files": [
            "app/MyFacades/Hoge/Hoge.php"
        ]
    },
    ...
```

#5. composer.json を適用

```
$ composer dump-autoload
```

#6. laravel/config/app.php に provider とエイリアス（名前空間）を登録

``` php:config/app.php
return [
    ...
    'providers' => [
        ...
        App\Providers\MyFacadeServiceProvider::class,
        ...
    ],

    'aliases' => [
        ...
        'Func' => Hoge\Hoge::class,
        ...
    ],
    ...
```

#7. サーバーのパーミッションを変更しておく

```
$ chmod 777 bootstrap/cache/services.php
```

以上で、``` \Func::fuga();``` でどこからでも関数が使えるようになります！
CKRecordZoneのCustomZoneはなぜあるの？

![スクリーンショット 2017-09-25 14.30.57.png](https://qiita-image-store.s3.amazonaws.com/0/114709/b63bf564-56a5-10d3-6c37-e754b5a185f5.png)
利用画像はWWDC2016の[What's new in CloudKit](https://developer.apple.com/videos/play/wwdc2016/226/
)のスライドからキャプチャしたものを利用

# 動機
アプリケーションごとのコンテナ → わかる。
用途別のデータベース → わかる。
レコード →　わかる。
レコードをまとめるレコードゾーン → ?????

# Apple Documentより
>ゾーンは、データをどのように整理するかの重要な部分です。Public、PrivateおよびSharedのデータベースには、単一のDefaultゾーンがあります。Privateデータベースでは、CKRecordZoneオブジェクトを使用して、必要に応じて追加のカスタムゾーンを作成できます。カスタムゾーンを使用して、関連するレコードのグループをPrivateデータベースに配置してカプセル化します。**カスタムゾーンは、複数のレコードを1つのアトミックトランザクションとして書き込む機能など、他の機能もサポートしています。**

# Customゾーンが必要な理由まとめ

 - CKRecordZoneでは複数のRecordを**まとめて一つの単位**として扱える。
 - Privateデータベースでは、Customゾーンを作成することによりRecordZone内のRecordに対して、**バッチ処理を行える**便利な機能がサポートされている。
 - RecordZoneへの変更購読機能が、Customゾーンしか使えない。
ionicでcordova環境かどうか判別する方法

```typescript
import { Platform } from 'ionic-angular';

class Example {
  constructor( public platform: Platform ) {

    if (this.platform.is("cordova")) {
      // cordova環境
    } else {
      // 非Cordova環境
    }

  }
}
```

ionic-nativeモジュールを使うかどうかの判別によく使うのでメモ
VNect: Real-time 3D Human Pose Estimation with a Single RGB Camera 少しわかった(2017/09/25)



姿勢推定の論文は単純な回帰で行うものからHeapMapを使ってやるものへと進化していった*1

上記のタイトルの論文はHeapMapを用いたものである*2

姿勢推定を行うためのデータセットは主に以下の３つの機関から配布されていてよく使用されている
・FLIC
・MPII
・Human3.6

タイトルの論文では下の二つが使われている。しかしながらいずれもヒートマップに関する情報は含まれておらず、おそらく自分でヒートマップ情報を生成する必要がある。

### HeatMap

HeatMap ベースの方法は2014年Tompsonによって考案された*3
http://www.cims.nyu.edu/~tompson/others/joint-training-convolutional.pdf
私の理解が正しければ簡単に言うとこの方法は通常のフィルターで、任意の体位らしき場所を推定した後その連結した体位と一緒にＮＮに突っ込むことで正しく位置を推定するというものである。
初めはこの方法で自分でHeatMapに関するデータセットを作るのかとも思っていた。

しかし少し前の論文、
Towards 3D Human Pose Estimation in the Wild: a Weakly-supervised Approach*5
のgithubリポジトリ
https://github.com/xingyizhou/pose-hg-3d
を見るとdrawGaussianという関数で自分でガウシアンのヒートマップを任意の分散で生成している。
おそらくタイトルの論文もこの方法で通常のヒートマップのGround Truthを作るのだと思われる。いずれもどの方法でもこれは自分で適当に作ればよい。



### Location Map
これはすごく理解するのに時間がかかった。
まず本論文のキーポイントは

・2Dのデータセット3Dのデータセットをうまく組み合わせて3Dの推定の精度を上げる
・リアルタイムで実行できるようにする

の二つである。複雑なNNを通してHeatMapおよびXYZのLocationMapの４チャネル分を出力するという方法をとるのは以上の二つを実現したいからに他ならない。
一番理解するのに時間がかかったのはLocationMapのGroundTruthの作り方である。
<img width="142" alt="1aa2f196c8f6f75ecc844d03336baa83.png" src="https://qiita-image-store.s3.amazonaws.com/0/155797/985bcd93-9a1c-ed64-d81b-6961f0221b3d.png">

図１ Fig3　切り取り引用
前までなぜXYZがこのような出力になって、図１で示している①領域があるのかずっと理解不能だった。しかし二つのキーポイントと、本論(1)のLoss関数を理解すれば簡単な話だった。
理解するために以下の二つを覚えておきたい

・HeatMapは2Dのデータセットから作るということ
・LocationMapはHeatMapの頂点座標の部分が3Dのデータセットと一致するようにすること

初めはGroundTruth と　CNNからの出力はほぼ同じなのかと思っていて①で示した領域のGroundTruthはどうやって生成するのかずっと不明であった。
しかしLoss関数

```math 
Loss(x_j) =||H^{GT}_j ⊙ (X_j − X^{GT}_j
)∥ \hspace{15pt}  (1)
```

はHeatMapとのHadamardProductのおかげで (1) は ① で示した領域を０にする。したがって ① 以外の領域はどうなっててもよく最適化に関与しないことがわかる。①以外の領域はdrawGaussianのように適当にやればいい。また、LocationMapはGaussianである必要はない。
おそらくいろいろな位置にあるデータセットでやっているうちに図１のような出力になるのではないかと思われる。


#今後
pytorchで完全なる実装をし以下のOSSでipadアプリを作る。https://blog.prismalabs.ai/diy-prisma-app-with-coreml-6b4994cc99e1


#　参考文献
[1] DeepPose: Human Pose Estimation via Deep Neural Networks
https://arxiv.org/pdf/1312.4659.pdf (回帰を使った方法)

[2] VNect: Real-time 3D Human Pose Estimation with a Single RGB Camera (タイトルの論文)
http://gvv.mpi-inf.mpg.de/projects/VNect/content/VNect_SIGGRAPH2017.pdf

[3]Joint Training of a Convolutional Network and a
Graphical Model for Human Pose Estimation (HeatMapベースの原点) 
http://www.cims.nyu.edu/~tompson/others/joint-training-convolutional.pdf

[4]Towards 3D Human Pose Estimation in the Wild: a Weakly-supervised Approach
https://arxiv.org/abs/1704.02447
JSONの構文チェックや編集にはVisual Studio Codeが便利

# この記事の経緯
JSONの構文チェックやフォーマットをしたくて、「JSON エディタ」でググったりしたんだけど、オンラインのものでサイズ制限があったり、ビューワー特化で編集性に欠けていたり、いまいちだった。
なんか使い勝手の良いJSONエディタないかなーと思ったら[Visual Studio Code](https://code.visualstudio.com/download)がいた。

# 便利だったところ
## 構文エラーがわかりやすい
![image.png](https://qiita-image-store.s3.amazonaws.com/0/158439/abc0d5e4-5399-d67a-a319-ce8c536aa339.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/158439/42f3ef9a-1e53-679a-b1cb-2f30dd1b49e7.png)

## 自動フォーマットも手軽
### `Alt` + `Shift` + `F`で手軽にフォーマット
![image.png](https://qiita-image-store.s3.amazonaws.com/0/158439/703d0594-b5cc-2301-d8f3-0c03a01b9ec9.png)
↓
![image.png](https://qiita-image-store.s3.amazonaws.com/0/158439/dff047b5-cbed-68ef-be8c-e559c77f7e53.png)

JSONはVisual Studio Codeで扱おう。
ぼくのさいきょうの開発環境／composer で入れてったメモ

# phpoffice/phpexcel

## 得られる能力：PHPでエクセルファイルを扱えるようになれます

### インストール

```
$ php-7.0 ~/bin/composer require "phpoffice/phpexcel"
$ php-7.0 ~/bin/composer dump-autoload
```

### 使い方
config/app.php に登録 => しない

``` php
$Excel = new Excel();
$filepath = 'masters.xlsx';
$datas = $Excel->getExcelData($filepath);
```

``` php:app/Model/Excel.php
class Excel {
    function __construct(){
        $vendor = dirname(dirname(__DIR__)).'/vendor/phpoffice/phpexcel/';
        require_once($vendor.'/Classes/PHPExcel.php');
        require_once($vendor.'/Classes/PHPExcel/IOFactory.php');
    }
    // エクセルを連想配列に変換
    public function getExcelData($filepath){
        ...
    }
}
```
みたいな。

### 拡張子によるバージョン違い
    'xls'  => 'Excel5'
    'xlsx' => 'Excel2007'


# intervention/Image

## 得られる能力：簡単に画像のリサイズ他編集ができるようになれます

多分 Imagick が必要です。
CPI はデフォで入ってるみたいです。（検証してませんすみません）
　⇒ [EC2 の Laravel に Imagick をインストールする](https://qiita.com/atto/items/f347e294130cf2c4b335)


### インストール

```
$ php-7.0 ~/bin/composer require "intervention/image"
$ php-7.0 ~/bin/composer dump-autoload
```

### 使い方
config/app.php に登録 => する

``` php:config/app.php
    'providers' => [
        ...
        'Intervention\Image\ImageServiceProvider',
        ...

    'aliases' => [
        ...
        'Image' => 'Intervention\Image\Facades\Image',
        ...
```

``` php
class Hoge {
    function Fuga ($from_fullpath, $to_fullpath) {
        $image = \Image::make($from_fullpath);
        $image->resize(320, null, function($constraint){
            $constraint->aspectRatio();
        });
        $image->orientate();

        $image->save($to_fullpath);
    }
}
```
みたいな。



# tecnick.com/tcpdf

## 得られる能力：簡単に PDF ファイルが作れるようになれます

### インストール

　[ 【参考】 Laravel5.1でbladeテンプレートを用いてPDFを作る](https://qiita.com/mu_sette/items/1346bb47ec19fac266b3) に非常に多く助けて頂きました。

```
$ php-7.0 ~/bin/composer require "tecnick.com/tcpdf"
$ php-7.0 ~/bin/composer dump-autoload
```

### 使い方
config/app.php に登録 => しない

``` php
use TCPDF;

class Hoge {
    function makeODF(){
        $pdf = new TCPDF();
        //プリントヘッダー非表示
        $pdf->setPrintHeader( false );
        //フォント名,フォントスタイル（空文字でレギュラー）,フォントサイズ
        $pdf->setFont('ipaexg','',14);
        //ページを追加
        $pdf->addPage();
        //viewから起こす（table で組む）
        $pdf->writeHTML(
            view('pdf.view', compact('customer', 'data', 'facility_names', 'bathings', 'templates'))->render()
        );

        //第一引数はファイル名、第二引数で挙動を指定（D=ダウンロード）
        /**
         * $pdf->output('hoge' . '.pdf', 'I');
         * I: ブラウザに出力する(既定)、保存時のファイル名が$nameで指定した名前になる。
         * D: ブラウザで(強制的に)ダウンロードする。
         * F: ローカルファイルとして保存する。
         * S: PDFドキュメントの内容を文字列として出力する。
         */
        $pdf->output($dirs['fullpath'].'/'.$filename, 'F');
        $pdf->output($filename, 'D');
    }
}
```
みたいな。
Backlog APIをcurlで

BacklogをPythonとかでAPI使ってごにょごにょやるときに、ちょっと調べたくなる内容をメモ。

## 課題一覧取得
[参照先]
https://developer.nulab-inc.com/ja/docs/backlog/api/2/get-issue-list/
`$ curl -X GET https://xxxxx.backlog.jp/api/v2/issues?apiKey=[API Key] -u ユーザー名:パスワード | jq`

## ユーザー一覧取得
[参照先]
https://developer.nulab-inc.com/ja/docs/backlog/api/2/get-user-list/
`curl -X GET https://xxxxx.backlog.jp/api/v2/users?apiKey=[API Key] -u ユーザー名:パスワード | jq`

## プロジェクト情報の取得
[参照先]
https://developer.nulab-inc.com/ja/docs/backlog/api/2/get-project/
`curl -X GET https://xxxxx.backlog.jp/api/v2/projects/[ProjectKey or ProjectId]?apiKey=[API Key] -u ユーザー名:パスワード | jq`

## プロジェクトユーザー一覧の取得
[参照先]
https://developer.nulab-inc.com/ja/docs/backlog/api/2/get-project-user-list/
`curl -X GET https://xxxxx.backlog.jp/api/v2/projects/[ProjectKey or ProjectId]/users?apiKey=[API Key] -u ユーザー名:パスワード | jq`
ROCm + amdgpu-pro 環境で VEGA GPU で OpenCL を使う(2017/09/25 時点不安定)

ROCm https://github.com/RadeonOpenCompute/ROCm と amdgpu-pro ドライバを両方インストールしている場合,
VEGA GPU で OpenCL を使うには, ROCm の方を見るようにしないとダメでした.

CPU: Ryzen5 1600
Mobo: B350
OS: Ubuntu 16.04.3
Kernel: 4.11(ROCm kernel)
GPU: VEGA 56 (PCI-Gen3 スロット. Gen2 だとそもそも ROCm が動かない)
ROCm: 1.6.148
amdgpu-pro: 17.30


## ROCm とは?

グラフィックスだけでなく, Compute に特化したソフトウェアスタックのようです.
CUDA + ヘテロジニアス計算環境のスタックみたいな感じでしょうか.
レイトレーシング, 機械学習, マイニングするなら ROCm のほうがフィットしそうですね!

## 仮定

ROCm 環境で OpenCL runtime パッケージを入れておく.
amdgpu-pro パッケージも別途入れておく.
ubuntu の opencl-icd パッケージあたりはインストールしない(インストールされていれば消しておく)

## 背景

ROCm の OpenCL は developer preview のようなので, amdgpu-pro ドライバも入れて, amdgpu-pro の OpenCL を使おうとしましたが, RX 470 などの Polaris では `clinfo` でデバイス認識しますが, VEGA では認識されず(`/opt/amdgpu-pro/bin/clinfo` はクラッシュし, apt で入る `clinfo` では VEGA GPU が認識されない)困っていました.

## 解決

`LD_LIBRARY_PATH` で `/opt/rocm/opencl/lib/x86_64` の `libOpenCL.so` を見るように設定すると OpenCL プログラムが動きました.

VEGA では, ROCm + amdgpu-pro 環境だと, ROCm のほうを使わないとダメでした.

## 問題点

ただし, ROCm の OpenCL だと性能があまりでなかったり, amdgpu-pro OpenCL でも Blender の OpenCL kernel がコンパイルできなかったりと, いろいろ issue が上がっています.

https://github.com/RadeonOpenCompute/ROCm/issues
https://community.amd.com/thread/220517

xmr-stak-amd も VEGA ではコンパイルに失敗します.

https://github.com/RadeonOpenCompute/ROCm/issues/128

ROCm. amdgpu-pro 共に時期アップデートではコンパイラやドライバなどいろいろ改善されるようですが, VEGA + OpenCL はしばらくは熟成待ちですね.

(2017 年 12 月 26 日追記: ROCm 1.7 でそれなりに改善されて, xmr-stak がコンパイルできるようになりました)

## TODO

amdgpu-pro だけの環境で VEGA で amdgpu-pro の OpenCL が動くか確認する.
CloudKitの基本構成

#CloudKitの基本
・アプリケーションごとに**コンテナ**があり、その中に**Public/Private/Sharedの３つのデータベース**がある。
![スクリーンショット 2017-09-25 14.30.16.png](https://qiita-image-store.s3.amazonaws.com/0/114709/e0c22532-c8b3-77da-c9a1-986245d076d0.png)

・Appleでの利用例は以下の画像。WWDCのアプリではmBaaSとしてCloudKitのPublicデータベースを利用している。Privateデータベースは、個人的な情報をiCloudに置くために。メモアプリなどでは、Sharedデータベースが使われており、共同編集などの機能が実現されている。(自分以外とのRecordの共有)
![スクリーンショット 2017-09-25 14.31.22.png](https://qiita-image-store.s3.amazonaws.com/0/114709/a90c0b01-aafa-6414-06df-3863217d719d.png)

・各データベースには**ゾーン**が存在し、その中に**レコード**を保存する。
![スクリーンショット 2017-09-25 14.30.50.png](https://qiita-image-store.s3.amazonaws.com/0/114709/23ef7891-6df3-d94d-47d6-bceae9452683.png)

・PublicはDefaultゾーンのみ。PrivateはDefaultゾーンとCustomゾーン。SharedはSharedゾーンを持っている。
![スクリーンショット 2017-09-25 14.30.57.png](https://qiita-image-store.s3.amazonaws.com/0/114709/18dc185a-ef84-1802-1cfe-b46c87a33bb9.png)

#参照
利用画像はWWDC2016の[What's new in CloudKit](https://developer.apple.com/videos/play/wwdc2016/226/
)のスライドからキャプチャしたものを利用
ファイルアップロードテスト	


csvアップロードのテストで、バリデーション周りでコケた。
以下、回避方法。

```fileupload.php

/** @test */
function CSVでアップロードできる
{
	// 一番最後の引数をtrueにしないと、validation fileがエラーになる
	$this->json(route('csv.upload'), [
		'csv' => new UploadedFile($path, 'category.csv' , null, null, null, true)
	])
}

```