OmniAICreator/Qiita-1.07M huggingface dataset:
NightmareでIKEAの在庫をチェックする

## 目的
IKEAの欲しい商品が、いつも在庫がなく、
関東の複数店舗の在庫をWEBでちまちまとチェックしていたので、
nightmareを使ってスクレイピングしてみました。

## スクレイピングのコード

IKEAのページは商品毎にURLが分かれているので、商品番号はURLの最後の番号のようです。
店舗に関しては、プルダウンメニューの値が店舗番号のようです。

```javascript
const Nightmare = require('nightmare');
const productURL ='http://www.ikea.com/jp/ja/catalog/products/';
const productnumber ='30339293'; //商品番号
const storenumbers = [447,448,887,359]; //Tokyo-bay,港北,新三郷,立川


Nightmare.action('selectDropdown', function (selector, option, done) {
    this.evaluate_now(function(selector, option) {
        let elements = document.querySelectorAll(selector);
        let event = document.createEvent( "MouseEvents" );

        for(let element of elements){
            if(element.getAttribute('data-value') === option.toString()){
                element.selected = true;
                event.initEvent("click", false, true);
                element.dispatchEvent(event);
                break;
            }
        }
    }, done, selector, option)
})

for(let storenumber of storenumbers){
    const nightmare = Nightmare({ show: false });
    nightmare
    .goto(productURL+ productnumber)
    .wait('#ikeaStoreNumber1')
    .selectDropdown('#ikeaStoreSelectDiv ul li',storenumber)
    .wait(() => {
        return document.querySelector('#stockInfoDiv').style.overflow === 'visible';
    })
    .evaluate(() => {
        let options = document.querySelectorAll("#ikeaStoreSelectDiv ul li");
        for(var option of options){
            if(option.selected){
                break;
            }
        };

        return {
            name: option.children[0].innerText,
            number: option.getAttribute('data-value'),
            info: document.querySelector('span#stockInfo').innerHTML,
        };
    })
    .end()
    .then((result) => {
        console.log(result.name + '(' + result.number + '):' + result.info);
    })
    .catch((error) => {
        console.error('Search failed:', error);
    });
}
```

## 実行結果

実行すると、以下のような感じで表示されます。

```zsh
$ node app.js
港北(448):在庫がありません：
Tokyo-Bay(447):選択した店舗には在庫があります。
立川(359):在庫がありません：
新三郷(887):選択した店舗には在庫があります。
✨  Done in 8.22s.
```

## 感想

Nightmare初めて使ったけれど、READMEを見ながら書くと、思ってたより簡単にできました。

(2017/06/15:追記)
06/14にIKEAのページにレイアウト変更(dropdownとOKボタン押下からbootstrapのdropdownに変わった)があったので、コードを一部修正しました。
カスタムアクションを作らないと、データが取得できないように思えたので、
公式のREADMEなどを見ながら、ざっくり作ってみたのですが、
自分の知識が足らず時間がかかってしまいました。
Pythonのインタラクティブモードを拡張する

#pythonstartupの作成

- .pythonstartupを作って$HOMEに置く

```
# -*- encoding: utf-8 -*-
# Python startup file
import readline
import rlcompleter
import atexit
import os
# tab complete
readline.parse_and_bind('tab: complete')
# history file
histfile = os.path.join(os.environ['HOME'], '.pythonhistory')
try:
    readline.read_history_file(histfile)
except IOError:
    pass
atexit.register(readline.write_history_file, histfile)
del os, histfile, readline, rlcompleter, atexit
```

#Pathの設定


* .zshrcに以下を追加する


```
export PYTHONSTARTUP=~/.pythonstartup
```

* zshrcの再読込

```
source ~/.zshrc
```
合成関数の微分と連鎖律について

参考：[ゼロから作るDeep Learning(p130)](https://www.amazon.co.jp/%E3%82%BC%E3%83%AD%E3%81%8B%E3%82%89%E4%BD%9C%E3%82%8BDeep-Learning-%E2%80%95Python%E3%81%A7%E5%AD%A6%E3%81%B6%E3%83%87%E3%82%A3%E3%83%BC%E3%83%97%E3%83%A9%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0%E3%81%AE%E7%90%86%E8%AB%96%E3%81%A8%E5%AE%9F%E8%A3%85-%E6%96%8E%E8%97%A4-%E5%BA%B7%E6%AF%85/dp/4873117585)

ディープラーニングでは勾配降下法によってパラメータを更新する。
そのとき数値微分によって勾配の計算ができる。
しかし、時間がかかるので、誤差逆伝播法というものが使われる。

誤差逆伝播法を理解する上で合成関数の微分と連鎖律を理解する必要がある。
以下に、それぞれの説明をしていく。

## 合成関数
合成関数とは複数の関数によって構成される関数のことである。以下のような式が例になる。

```math
z=t^2 \\
t=x+y \\
```

連鎖律とは合成関数の微分についての性質である。以下のように定義される。（これを連鎖律の原理と言う。）

```
ある関数が合成関数で表される場合、
その合成関数の微分は、
合成関数を更生するそれぞれの関数の微分の席によって表すことができる。
```

これを式で表すと以下のようになる。

```math
\frac{dz}{dx} = \frac{dz}{dt}\frac{dt}{dx}
```

## 計算してみる。
以下を「連鎖律の原理」を用いて計算していく。

```math
z=t^2 \\
t=x+y \\
このときの、\frac{dz}{dx}を求める。
```

このz, tを微分する。

```math
\frac{dz}{dt}=2t (tに関するzの微分) \\
\frac{dt}{dx}=1 (xに関するtの微分) \\
```

微分したものを代入する。

```math
「連鎖律の原理」より
\frac{dz}{dx}= \frac{dz}{dt}\frac{dt}{dx}と言える。代入すると、 \\
\begin{align}
\frac{dz}{dx} &= \frac{dz}{dt}\frac{dt}{dx} \\
&= 2t * 1\\
&= 2t
\end{align}
```

よって、t=x+yなので、以下が答えになる。

```math
\frac{dz}{dx} = 2(x+y)
```

##おまけ

>\`\`\`math
の
```

qiitaの数式モード(texモード？)のときの「の」がやけにおそろ恐ろしい。

```math
の
```
指定のNode以下の全ての子Nodeを考慮した（mergeした）サイズ（boundingBox）を取得

cocos2d-x v 3.15

```cpp
// 孫
auto myGrandChild = Sprite::create(...);
myGrandChild->setPosition(...);

// 子
auto myChild = Sprite::create(...);
myChild->setPosition(...);
myChild->addChild(myGrandChild);

// 親
auto myNode = Node::create();
myNode.addChild(myChild);


// 子、孫も含めたサイズを取得したい
myNode.getContentSize(); // 常に Size(0, 0)

auto boundingBox = utils::getCascadeBoundingBox(myNode); // myNode以下の全てのNodeを合わせたboundingBoxを取得
boundingBox.size; // ↑のサイズを取得
```

NodeのgetContentSize()が常に0というのが若干罠っぽい　（理屈上は正しいのかもしれないが）
NEMブロックチェーンの履歴をさかのぼって検索し、JavaScriptで表示する。

NEM APIでは一度のAPIアクセスで最大25件しか履歴を検索することができません。
おそらくスーパーノードへの負荷を軽減するためだと思われます。
そのため、入出金履歴など25件検索したあと、さらに過去に遡って履歴を検索したい場合は再度APIにアクセスする必要があります。

具体的には入出金履歴などで取得できるmeta情報にid属性があるので、次にアクセスする時にその値を指定してあげることで、そのidよりも以前の入出金履歴を25件取得することができます。
追記：hash値でもさかのぼることができます(&hash= 指定)。idはノードごとに異なる値が割り当てられますが、meta->hash->data で取得できる値は全てのノードで共通ですので、用途によってはこちらの方がよいかもしれません。


```js:fetch_transaction

var LAST_ID;
var ACCOUNT_TRANSFERS  = "http://" + target_ip + "/account/transfers/all?address=";
$.ajax({url: ACCOUNT_TRANSFERS + address ,type: 'GET'}).done(function(res){parse_transfers(res)});

$('#transfers_more').click(function(){
	$.ajax({url: ACCOUNT_TRANSFERS + address + "&id=" + LAST_ID,type: 'GET'}).done(function(res){parse_transfers(res)});
	return false;
})

var parse_transfers = function(result){

	var dataArray = result.data;
	dataArray.forEach(function(val){
		var meta = val.meta;
		LAST_ID = meta.id;
		var tran = val.transaction;

		$( "#transfers tbody" ).append( "<tr>" +
			"<td class='text-right'>" + tran.amount + "</td>" +
			"</tr>" );
		}
	});
}
```

htmlは以下のような感じです。

```html:transfer_list
<div class="transfers col-sm-4">
	<h2>入出金履歴</h2>
	<table id="transfers">
		<thead>
		<tr>
			<th>金額</th>
		</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
<dl>
	<dd><a id="transfers_more" href="javascript:void(0)" >さらに読み込む</a></dd>
</dl>
</div>

```

このような構成を取ることで、最初に25件を表示し、それ以降は”さらに読み込む”リンクをクリックすることで表示されるようになります。

具体的に動くプログラムはXEMBookに実装しているのでそちらのソースをご参考ください。

http://xembook.net?address=NBZNQL-2JDWTG-UAW237-PXV4SS-XSPORY-43GUSW-GSB7

"address=" の後ろを各自のアドレスで指定してやることで、そのアカウントの履歴を参照することができます。またハーベストも同様に過去を遡ることができます。
init の名は。

# 前書き（という名の無駄話
タイトル結構悩んだ。ぶっちゃけシンプルにまとめられそうなタイトル思いつかなかったのでネタに走ろうと思った。そして「init の形」とどっち選ぶか悩んだけど最終的に「ネタのわかりやすさ」と「やってることのわかりづらさ」でこっちの名前にしました。反省はしていない。

# 本編
とあることやろうとしてて、「そういえば `init` って名前の `static func` 作ったらどうなるんだろ？」っと思って、こんな闇深いソースを作ってみたら意外とちゃんと（？）動いた。

```swift
extension Int {
	static func `init`(float: Float) -> Float {
		return float
	}
}

let float = Int(float: 3.14)
print(float) // 3.14
```

やろうとしてること読んでわかるよね？`Int` の `extension` で `init` って名前の返り値が `Float` の `static func` 作って、それをそのまま `Int()` といういかにも `Int` のイニシャライザーを呼んでる形の呼び出しを書いたらちゃんと `Float` で生成されたという黒魔術。「ちゃんと」っていうとなんか変だけど。ちなみに今日[ツイッター](https://twitter.com/lovee/status/874193657670148097)で呟いたら思ったより拡散されて多分みんなも闇だと感じてるんじゃないかと。なるほど `init` って名前の `static func` 作っちゃうとそれが「イニシャライザー」（？）として使えるんだね。

# 一応説明
いかにも闇深そうなコードを面白半分で紹介しましたが、もちろん本来の意図はこんな闇深いことをやりたかったわけではありません。きちんとした理由があるのです。

最近[この記事](http://tech.vasily.jp/entry/swift_modern_extensions)に刺激されて、確かに衝突するのも回避したいし何よりこの書き方がとても好きで自作のフレームワークにもこういう書き方に対応したいなぁと思いつつ、[Eltaso](https://github.com/el-hoshino/Eltaso/tree/feature/Swift_4.0) の修正にかかってるのですが、もともと作ってた `CGPoint(point: CGFloat)` のイニシャライザーがどうすればいいんだろ、自分自身の型とは違う型のイニシャライザーって作れないのかな？まあ最悪作れなくても `.init(point: CGFloat)` で書ければいいかな、ってノリでとりあえず `static func init` を作ってみたらそれがちゃんとうまく行ったんですね。そこでふっと思ったんですよ。じゃあ `(point: CGFloat)` って使えないのかな？って。そしたら Playground で書いてみたら動いた。

ちなみに今改造中のコードはこんな感じです：

```swift
public protocol EltasoCompatible {
	associatedtype Eltaso
	var eltaso: EltasoContainer<Self> { get }
}

extension EltasoCompatible {
	public var eltaso: EltasoContainer<Self> {
		return EltasoContainer(body: self)
	}
}

public struct EltasoContainer<Containee> {
	public let body: Containee
}

extension CGPoint: EltasoCompatible {
	public typealias Eltaso = EltasoContainer<CGPoint>
}

extension EltasoContainer where Containee == CGPoint {
	
	public static func `init`(point: CGFloat) -> CGPoint {
		return CGPoint(x: point, y: point)
	}
	
}

let point = CGPoint.Eltaso.init(point: 3.14)
print(point) //(3.14, 3.14)
```

ね？綺麗でしょ？（自画自賛
公式ドキュメントで新しい技術を習得する方法

### 公式ドキュメントで新しい技術を習得する方法


何かの技術を新たに学ぶ時、特に最新の技術を学ぶ場合や日本でのユーザーが少ない技術の場合、その技術に関する書籍や記事がまだ存在しなかったり、少なかったりすることがある。その場合、公式ドキュメントを読む必要がある。

また、そうでなくても、なるべく一次ソースである公式のドキュメントを読みたい。

関連記事
[新人プログラマのうちに身に付けたい習慣、考え方（この半年で学んだことと反省） - Qiita](http://qiita.com/Sekky0905/items/095b45c46a80e933509c)

現在勤めている会社で扱っている技術柄、また会社の先輩から公式のドキュメントを読むことを強く勧められていたり、自分自身が新しいもの好きなため、これまで公式ドキュメントで新しい技術を習得する機会が多々あった。その中で、確立してきた方法を記述したい。

## 英語に慣れておく
新しい技術だと日本語の公式ドキュメントが存在していないかったり、一部しか日本語化されていないことも多い。その場合、英語で公式ドキュメントを読む必要がある。最初は、英語で読むのはしんどいかもしれないが、辞書を使いながら読んでいけば、いずれ慣れる。

## 1回2回さらっと読む。
まずは、1回2回さらっと読む。(英語の場合は辞書を使いながらでも)
その際、細かいところは気にしなくても良い。全体を軽く理解するという感じだ。

## 日本語の周辺情報を探す
冒頭で以下のように記述したが、何かしら日本語で情報が存在していることもある。

>  何かの技術を新たに学ぶ時、特に最新の技術を学ぶ時や日本でのユーザーが少ない技術の場合、その技術に関する書籍や記事がまだ存在しなかったり、少なかったりすることがある。

日本語の情報が存在する場合、理解の補助として周辺の情報を日本語で読んでおくのは有効な手立てである。

## サンプルコードをコピペしてIDEにはる、もしくは写経する
ドキュメントには、サンプルコードが記述されていることが多いと思う。
そのサンプルコードをコピペする。この際、使用するのはできるだけリッチなIDEが良いと思う。( Javaだったら、[IntelliJ IDEA](https://www.jetbrains.com/idea/) 、Goだったら [Gogland](https://www.jetbrains.com/go/) など)

時間があるなら、サンプルコードを写経するほうが、より理解が進むかもしれない。

## コピペしたサンプルコードを解読する
コピペしたサンプルコードを解読していく。
具体的には、1行ずつ何の処理を行っているか、全てコメントでコード内に記述していく。
また、IDEのジャンプ機能を使用して、コード中に使用されているメソッドまでジャンプしてそのメソッドのコード内のドキュメント(Javaだったら、JavaDoc、Goだったら、GoDocなど)を読む。余裕があれば、メソッドのコード自体を読む。

## コードを動く形にしてみる
サンプルコードには、コードの一部のみが記述されていて、そのままでは動かないものも多い。そこで、動くように自分で足りない部分を記述してみる。

## コードを改造して、自分なりのコードを書いてみる
サンプルコードが動くようになったら、今度は自分で考えて、その技術を使用して、何らかの小さなコードを書いて遊んでみる。

## もう1、2回ドキュメント全体を読む
今度は、詳細な部分までしっかり理解しながら読む。すでにコード内のドキュメントを読んだり、処理をコメントにしたりしているので、ドキュメントがすんなり頭の中に入ってくる。
この際に日本語でメモを取っておく。

## ブログやQiitaの記事にする。
先ほど、ドキュメントを読んだ際に書いておいたメモや、自分で書いたコード(詳細な処理のコメントが載っているはずである。)をまとめて、それをブログやQiitaなどの記事としてアウトプットする。
これには、3つのいいことがあると考えている。

1. アウトプットすることで、理解が明確になる
=> 他人に見られる記事を書くので、曖昧な理解だとボコボコにされる可能性がある。
よって、ちゃんとした理解をするようになるはず。

2. 見返しやすい
=> たくさん勉強していると、前に習得した技術の詳細を忘れることがある。その際にあらかじめ自分が記述した分かりやすい記事があれば、それを見返して思い出すのに時間があまりかからないはずだ。

3. 他人からの評価を得やすい
=> ちょっと打算的な話になるが、ある技術に関してのちゃんとした記事を書いていれば、その技術に関しての知識がある人だと他人から思われるはずだ。例えば社内で、自分が習得した新しい技術を使ったプロジェクトにアサインされたいと思った時に、その記事はPMに対するアピールの材料になるかもしれない。

## 実際の例
以下に自分が上記の方法を通して記述したQiitaの記事を貼っておく。
! 英語だけのドキュメントもあるが、日本語のドキュメントが混在しているものもある。

[GoでBigQueryクライアントを実装してBigQueryからデータを取得する - Qiita](http://qiita.com/Sekky0905/items/fd6ff9113d301aaa9e1d)
[Go言語でSendGrid Web API v3を使って、メールを送信する - Qiita](http://qiita.com/Sekky0905/items/7f7285d0a2b3e5f21e57)
[【自然言語処理】Google Natural Language API Client LibrariesをGoで実装してみる - Qiita](http://qiita.com/Sekky0905/items/0a07ac74518b26816e04)
[Angular4(Angular2~)のユニットテスト【Angularのユニットテストの基本とComponentの簡単なテスト編】 - Qiita](http://qiita.com/Sekky0905/items/13e71fce4f0a3cffbc09)


関連記事
[新人プログラマのうちに身に付けたい習慣、考え方（この半年で学んだことと反省） - Qiita](http://qiita.com/Sekky0905/items/095b45c46a80e933509c)
[難しいと感じる技術本を読む時に自分がやっていること - Qiita](http://qiita.com/Sekky0905/items/9db448b31aeee9863917)

※ ブログでも同一の投稿を行っている<br>
[公式ドキュメントで新しい技術を習得する方法](http://www.sekky0905.com/entry/2017/06/13/%E5%85%AC%E5%BC%8F%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%81%A7%E6%96%B0%E3%81%97%E3%81%84%E6%8A%80%E8%A1%93%E3%82%92%E7%BF%92%E5%BE%97%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95)
Anko で Custom View

[Anko](https://github.com/Kotlin/anko/wiki/Anko-Layouts) で Custom View を作る方法です．
端的にいうと，`AnkoContext.createDelegate` を使います．
Anko のバージョンは 0.10.1 です．

サンプルコード

UI側

```kotlin
class SampleUI : AnkoComponent<SampleView> {
    companion object {
        val textId = View.generateViewId()
    }

    override fun createView(ui: AnkoContext<SampleView>): View = with(ui) {
        verticalView {
            textView {
                id = textViewId
            }
        }
    }
}
```

View 側

```kotlin
class SampleView(context : Context) : LinearLayout(context) {
  val textView : TextView

  init {
    val view = SampleUI.createView(AnkoContext.createDelegate(context))
    textView = view.find(SampleUI.textId)
  }
}
```

View を作りさえしたら，あとはいつもの Android と同じです．

メジャーリリースがくるころには，ドキュメントが整備されてこのあたりもわかりやすくなるのでしょう．
RubymineとMacのRetinaディスプレイでエディタが重くなる症状を改善する

RubyMineもPhpStormも、家のiMacで使うと、なんだかエディタが重たい、という症状に悩まされていました。
最初は低解像度で使うことでごまかしていたのですが、根本的な解決にはならず、画面のスクロールの際には、やっぱり少しストレスを感じました。

会社で使用しているiMacでは同様の症状は出ていないので、Retinaディスプレイだと出るのかな、という感じでした。

そして、色々調べた結果。
以下の二つの記事を参考にして、IDEで使用されるJDKを変更することで症状は改善しました。

https://intellij-support.jetbrains.com/hc/en-us/articles/206544879-Selecting-the-JDK-version-the-IDE-will-run-under
https://blog.jetbrains.com/idea/2015/05/intellij-idea-14-1-4-eap-141-1192-is-available/

その手順を記載しておきます。


### 現在のJREのバージョンを確認する
メニューの
Rubymine => Abount Rubymineから確認できます。

<img width="647" alt="現在のバージョン.png" src="https://qiita-image-store.s3.amazonaws.com/0/79673/a1201cf0-aa19-8444-2e43-5588318aa10a.png">


### find actionを開く
プロジェクトを開いて、Help => find actionを選択します。

<img width="347" alt="findaction.png" src="https://qiita-image-store.s3.amazonaws.com/0/79673/e44c35a0-abe5-710a-7e52-1ab019fa2877.png">

### Switch IDE boot JDKを開く
find actionの検索窓に、switchと打ち込んで、[Switch IDE boot JDK...]を選択します。

<img width="409" alt="switchidebootjdk.png" src="https://qiita-image-store.s3.amazonaws.com/0/79673/ce3b211f-0659-88d8-b369-1d2472b58a3f.png">


### ブートに使用するJDKをバンドル以前のJDKにする
Select Boot JDKから、[bundled]と記載されたバージョン以前のバージョンを選択します。
Macにインストール済みのものが出てくるはずですが、筆者の環境では1.6は出てきませんでした。
1.6のディレクトリを選択しても、使用できないようでした。

<img width="347" alt="selectbootjdk.png" src="https://qiita-image-store.s3.amazonaws.com/0/79673/741cfca9-60cd-2c31-1284-edbebb1a163d.png">


再度 About Rubymineを確認して、JREのバージョンが変わっていれば変更されています。

<img width="636" alt="スクリーンショット 2017-06-13 0.31.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/79673/86241550-1dee-7b16-b562-779e7f61433a.png">

少し、フォントなどの見え方が違いますが、背に腹は変えられないので、速度優先で使いたいと思います。
高解像度でもほぼ問題なく使用できる状態に戻りました。

#### 補足

以下のIssueには、JDK1.6だと平気だと記載されていたので、本当は1.6も試したかったのですが、何か別の手順が必要か、サポートされていないかのどちらかだと思います。
https://youtrack.jetbrains.com/issue/IDEA-146555

ちなみに、plistを編集する方法だと、1.6*を指定しても、「1.8以上が必要です」と怒られて、JVMを変更できませんでした。
最近の変更なんですかね。
SCSSコンパイル時の圧縮は必要か？

SCSS + Compass 環境でSCSSコンパイルするときに、少しでもファイルサイズを減らしてパフォーマンスを向上させたいときに「compressed」を指定すると思います。

この指定は、CSSファイルへ出力するときに全ての改行コードが取り除かれて1行にまとめられます。


**例）config.rbファイル上の output_style の指定**

```rb
# You can select your preferred output style here (:expanded, :nested, :compact
# or :compressed).
output_style = :compressed
```

**例）:compressed指定時、改行が除去されて吐き出されたCSSファイル**

![el-portal_styles_2nd_css_-_campus-portal_jp_-____Documents_website_production_campus-portal_jp_vagrant_dev_.png](https://qiita-image-store.s3.amazonaws.com/0/39468/c025baf3-0c0c-0fc5-94c4-f657140d6d71.png)


しかし、改行コードを除去したとしても元のファイルサイズと比べてせいぜい10%程度しか小さくなりません。これだとパフォーマンスへの影響は微々たるものです。


##CSSファイルが圧縮されているときの問題点

それだけなら何も問題はないのですが、1行に全てのCSSコードがつまっており差分が抽出しずらい状態のために、Gitマージするときに必ずと言って良いほどコンフリクトが発生してしまいます。
その都度、SCSSコンパイルし直してから改めてGitマージするという作業を行うことになってしまいます。

頻発するGitコンフリクトを避けるためには :compressed ではなく :expanded または :nested を指定しておくと良いでしょう。

```rb
output_style = :expanded   #:expanded or :nested
```


##CSSファイルの圧縮はgzipが効果的

それでもファイルサイズは少しでも小さくしたいということであれば、gzip圧縮したほうが効果的です。70〜80%程度まで小さくなると言われています。

gzip圧縮を行うには、Apacheのmod_deflateモジュールを利用したり、Drupalを使っている場合はコントリビュートモジュール「[Advanced CSS/JS Aggregation](https://www.drupal.org/project/advagg)」などを導入するのがいいと思います。
<br>

####**（補足）Drupal - Advanced CSS/JS Aggregationモジュール**

Advanced CSS/JS Aggregationモジュールを使った場合、gzip圧縮されたファイルは sites/default/files/css/ に出力されてそのファイルがブラウザへ出力されることになります。Drupalキャッシュクリアが実行されるまではそのファイルが使われ続けます。

つまり、元のcssファイルが圧縮されるわけではないので、Gitマージしたときに発生するコンフリクト問題は回避することができます。
SCSS + Compassのファイル圧縮をオフにした上で、Advanced CSS/JS Aggregationモジュールのキャッシュ機能を利用すれば運用も楽になるはずです。
Herokuのチュートリアルでgit push heroku masterできずに困る

`git clone https://github.com/heroku/node-js-getting-started.git`
`heroku create`
チュートリアルに従い、サンプルコードを落として、heroku用のgitリポジトリを作るまではよかった。

#課題
`git push herou master`
に失敗する。

#理由
gitリポジトリへの認証情報がわからない。
（heroku loginのユーザパスではない）

#解決
表示されるエラーメッセージに従い、[ドキュメント](https://devcenter.heroku.com/articles/git#http-git-authentication)を確認した。

ユーザ名:なし、パスワード:HerokuのAPI Key
だそうな。
herokuにログインして、AccountページでAPI keyを確認して手打ちしたら、pushできた。

#調査
普通にチュートリアルの手順で進んでいれば`heroku create`で_netrcが作られて、それを使って認証を通してくれると思ったんだけど、`git push heroku master`のたびにパスワードを~~毎回~~訊かれる。
（git、node、CLIを再インストールした。そしたら、**毎回**は訊かれなくなった。勘違いだったのか、gitのインストールオプションでなんちゃらcredintialを有効にしたことがよかったのか・・・？）

以下、自動認証できないのか？ということを調査したメモ。
とくに成果なし。

1. _netrcの存在確認
    * あった
    * passwordに書いてある値と、API Keyが違う
* API Keyで上書きして`git push heroku master`
    * 失敗した
    * [よくよく読んでみると](https://devcenter.heroku.com/articles/git#creating-a-heroku-remote)_netrcは、API Keyを取ってくるための認証情報とのこと。
なので「password != API Key」は正常。
* curlの疎通確認（API Keyは、curlを使って取ってくるようだ）
    * そんなコマンドは見つからないと。
    * が、curlにパスを通してもダメ。
* チュートリアルを読みながらいろいろ試す
    * [ここ](https://devcenter.heroku.com/articles/authentication)のコマンドは全部パスした。
Go言語で標準入力

Go言語で標準入力

一回だけ受け取る↓

```go
package main
import (
   "fmt"
   "os"
   "bufio"
)

func main() {
  stdin := bufio.NewScanner(os.Stdin)
  stdin.Scan()
  text := stdin.Text()
}
```
↓永久に受け取り続ける

```go
package main
import (
   "fmt"
   "os"
   "bufio"
)

func main() {
  stdin := bufio.NewScanner(os.Stdin)
  for stdin.Scan(){
    text := stdin.Text()

  }
}
```
ちなみにRubyならこう

```Ruby
gets()
```
HTML5+javascriptを使ってブラウザでEPUB３を作成する

# 漫画用EPUB3の作成
漫画向けのEPUB３作成サイトをjavascriptで作ったときの必要になったものについて。
https://github.com/kyukyunyorituryo/FixedEpub3JS

#EPUBパッケージング
EPUBはXMLやXHTML、CSSファイルをZIPで圧縮したものと説明することが多い。ただし、単純に圧縮しただけでは、EPUB validationで警告が出る。

## JSZIPでmimetypeを指定して圧縮
JSZIPでは、フォルダの構造を決めてファイルを圧縮ができる。ここでは例として[デジタルコミック協議会](http://www.digital-comic.jp/press_release_DCA_EPUB3.pdf)のEPUB３のファイル構造を作成する。
JSZIP.jsとFileSaver.jsが必要になる。

```js:

var zip = new JSZip();
zip.file("mimetype", "application/epub+zip");
var meta = zip.folder("META-INF");
meta.file("container.xml", containerXML);
var item = zip.folder("item");
item.file("standard.opf", standardOPFS);
item.file("nav.xhtml", navigation);
item.file("toc.ncx", ncx);
var img = zip.folder("item/image");
var style = zip.folder("item/style");
style.file("fixed-layout-jp.css",layout)
var xhtml = zip.folder("item/xhtml");
xhtml.file("p-cover.xhtml",coverxhtml);
for (j = 0; j < imgFO.length; j++){
xhtml.file("p-"+ ('0000' + (j+1) ).slice( -3 )+".xhtml", pages[j]);
}
img.file("cover."+coverFO.ext, coverFO.data.split('base64,')[1], {base64: true});
for (j = 0; j < imgFO.length; j++){
img.file("i-"+ ('0000' + (j+1) ).slice( -3 )+"."+imgFO[j].ext, imgFO[j].data.split('base64,')[1], {base64: true});
}
zip.generateAsync({type:"blob"})
.then(function(content) {
// see FileSaver.js
saveAs(content, $("#title").val()+".epub");
});
  });
});

```
# HTML5で画像の読み込み
　HTML5ではFileAPIによるファイルの読み込むことができる。
https://www.html5rocks.com/ja/tutorials/file/dndfiles/
fileapiで読み込んだ画像ファイルをJSZIPでパッケージングする。

# テンプレート
[デジタルコミック協議会](http://www.digital-comic.jp/press_release_DCA_EPUB3.pdf)のPDFファイルからテンプレートを作成する。CSSは[電書協](http://ebpaj.jp/counsel/guide)の表示確認用サンプルファイルのfixed-layout-jp.cssを利用している。

# XMLをパースして編集
ナビゲーション文書

```html:navigation.xhtml

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="ja">
<head>
<meta charset="UTF-8" />
<title>タイトル</title>
</head>
<body>
<nav epub:type="toc" id="toc">
<h1>Navigation</h1>
<ol>
<li><a href="xhtml/p-cover.xhtml">表紙</a></li>
<li><a href="xhtml/p-001.xhtml">１ページ</a></li>
</ol>
</nav>
</body>
</html>
```
navigation.xhtmlのタイトル、表紙、１ページの部分を書き換えるには、IDが指定されていないのでgetElementByIdではアクセスできない。querySelectorを使って細かく指定していく。

```js:
var navigationXml = (new DOMParser()).parseFromString(navigation, 'text/xml');
navigationXml.querySelector("title").textContent=$("#title").val();
navigationXml.querySelectorAll("li")[0].childNodes[0].textContent=$("#covertext").val();
navigationXml.querySelectorAll("li")[1].childNodes[0].textContent=$("#navtext1").val();
```

# UUIDと日時
EPUBでは固有のUUIDがつけるので、UUIDをgenerateするUUID.jsを利用する。作成日時も必要で時間をISO時間に変換している。

```js:
//UUID宣言
//uuid ver.4
var objV4 = UUID.genV4();
//ファイルID、uuid
standardOPFxml.getElementById('unique-id').textContent=objV4.urn;
//日時
var today = new Date();
standardOPFxml.querySelector("meta[property='dcterms:modified']").textContent=today.toISOString().slice(0,19)+"Z";
```
Google Chart API でQRコードを生成する

よく使うのでメモ:writing_hand_tone2:

#QRコード生成URL
https://chart.apis.google.com/chart?chs=200x200&cht=qr&chl= {{URL}}

##SAMPLE
http://qiita.com/panappe
<img src="https://chart.apis.google.com/chart?chs=200x200&cht=qr&chl=http://qiita.com/panappe">
KB2144950 の対策にはcloudvm-ram-sizeコマンドを使う

vCenter Server Appliance 6.0を使用していると簡単に発生するKB2144950の現象。

対処として
`cloudvm-ram-size -C <XXX> vsphere-client`
のコマンドを使用してvsphere-clientサービスのヒープサイズの上限を大きくすると書いてあるが、どのくらいの値を設定すべきかの基準となる情報が書かれていなくて困る。

そんなときには、"cloudvm-ram-size -S"コマンドを使用すると現在のヒープサイズ(CurrentMB)やこれまでの最大ヒープサイズ(MaxMB)が確認できるので、これを参考に設定すべき値を検討することができる。

``` cloudvm-ram-size
# cloudvm-ram-size -S | grep -e Service-Name -e vsphere-client
Service-Name            AllocatedMB     MaxMB CurrentMB  Curr-RSS    Cache  MapFiles   MemoryLimit
vsphere-client                  853      1046      1045       752      293         0 8796093022207

※このコマンド例はVCSA6.5で実行していますが、VCSA6.0でも同じような結果が出ます。
```

また、このコマンドは10分に1回自動的に実行されており、その結果は/storage/log/vmware/cloudvm/cloudvm-ram-size-outputから参照できる。

```/storage/log/vmware/cloudvm/cloudvm-ram-size-output
========== Start of cloudvm ram size dump at Mon Jun 12 14:30:01 UTC 2017 ==========

/usr/sbin/cloudvm-ram-size -S
Service-Name            AllocatedMB     MaxMB CurrentMB  Curr-RSS    Cache  MapFiles   MemoryLimit
・・・中略・・・
vsphere-client                  853      1046      1045       752      293         0 8796093022207

※こちらもVCSA6.5の例ですがVCSA6.0でも同じような結果が出ます。
```

■参考■
[vCenter Server 6.0: vmware-dataservice-sca and vsphere-client status change from green to yellow](https://virtualnomadblog.com/2016/10/17/vcenter-server-6-0-vmware-dataservice-sca-and-vsphere-client-status-change-from-green-to-yellow/)
[Dynamic memory resizing for vCenter Server 6.0](http://www.virtuallyghetto.com/2015/02/dynamic-memory-resizing-for-vcenter-server-6-0.html)

    -
【Unity】マルチパスシェーダーのやり方(フラグメントシェーダーの場合)

マルチパスシェーダーは、複数の描画結果を使って、最終的に作りたい出力結果を導き出すのに便利です。やろうと思えば、1パスでも行けるのですが。。。
例えば、1パス目で、キーボードの入力情報を持つテクスチャを生成し、2パス目で、1パス目の描画結果を元に、何かの最終出力を出すなどです。
以下は、フラグメントシェーダーを使ったやり方になります。


```
Shader "Custom/TestMultiShader"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
	}
	SubShader
	{
		Tags { "RenderType"="Opaque" }
		LOD 100

		// 1パス目
		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			#pragma multi_compile_fog
			
			#include "UnityCG.cginc"

			struct appdata
			{
				float4 vertex : POSITION;
				float2 uv : TEXCOORD0;
			};

			struct v2f
			{
				float2 uv : TEXCOORD0;
				UNITY_FOG_COORDS(1)
				float4 vertex : SV_POSITION;
			};

			sampler2D _MainTex;
			float4 _MainTex_ST;
			
			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				UNITY_TRANSFER_FOG(o,o.vertex);
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				fixed4 col = tex2D(_MainTex, i.uv);
				col.r = 0.5;
				UNITY_APPLY_FOG(i.fogCoord, col);
				return col;
			}
			ENDCG
		}

		// 1パス目の描画結果をテクスチャとして渡す
		GrabPass{}

		// 2パス目の最終出力
		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			#pragma multi_compile_fog
			
			#include "UnityCG.cginc"

			struct appdata
			{
				float4 vertex : POSITION;
				float2 uv : TEXCOORD0;
			};

			struct v2f
			{
				float2 uv : TEXCOORD0;
				UNITY_FOG_COORDS(1)
				float4 vertex : SV_POSITION;
			};

			sampler2D _GrabTexture;
			float4 _GrabTexture_ST;
			
			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _GrabTexture);
				UNITY_TRANSFER_FOG(o,o.vertex);
				return o;
			}
			
			fixed4 frag (v2f i) : SV_Target
			{
				i.uv.x += sin(i.uv.y*_Time.w)*0.1;
				fixed4 col = tex2D(_GrabTexture, i.uv);
				UNITY_APPLY_FOG(i.fogCoord, col);
				return col;
			}
			ENDCG
		}
	}
}
```

1パス目で、テクスチャの色味を変えて、2パス目で、1パス目の描画結果に対して、sin関数で、uv座標を、y軸に向かって、揺らしています。
「GrabPass{}」というのを使うと、1パス目の結果を2パス目に、渡すことができます。2パス目の描画結果は、_GrabTextureに格納され、このテクスチャを使って、最終目的の表示に、調整していくだけです。
※「GrabPass」を記述しなかった場合は、最後に記載されている、2パス目のシェーダーが適用されます。

コード例だと、少しごちゃごちゃしてますが、簡単には、以下のような感じです。

```
Pass{1パス目のシェーダーの記述} // 1パス目
GrabPass{} // 1パスの結果を渡す
Pass{2パス目のシェーダーの記述} // 2パス目
```
Developer Preview版でのAndroidバージョン確認


Developer Preview版を触って自分みたいにビックリしないためにメモを残します。

Androidのバージョンを確認する際は

```java
        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.O){
            ・・・
        }
```

みたいに、SDK_INT の値を比較するのが一般的です。
しかし、Developer Preview版のAndroidでは、一時的にこの方法が適用できない期間があります。

## Developer Preview版 と Build.VERSION の関係

今回のAndroid Oでは、DPのリリース別に以下の値でした。

| API | DP2 | DP3 |
|:--|---|---|
| Build.VERSION.SDK_INT | 25 | 26 |
| Build.VERSION.CODENAME | "O" | "REL" |
| Build.VERSION_CODES.O | 10000 | 26 |

DP2時点でSDK_INTの値がNougat時のままである事に注意してください。CODENAMEの値もドキュメントにあるような"REL"でなく"O"となっています。

これは不具合ではなく、新規のAPI仕様等がまだFixされていない場合の、典型的な振る舞いになります。とのことです。
(https://issuetracker.google.com/issues/36973990#comment2)

Android OではDP3にてAPIがFinal宣言されました。このバージョンからは、一般的なSDK_INTによる比較でAndroidバージョンが判別可能です。


## 不安定時期のAndroidバージョン確認
さて、DP2のような不安定時期のAndroidバージョン確認は、どうすれば良いかというと、サポートライブラリで提供される `BuildCompat.isAtLeastO()` が、そこそこに有用です。

DP2時点で提供されていた `com.android.support:support-v4:26.0.0-beta1` では、このメソッドの実装が CODENAMEの比較に基づく実装になっており、Android OのAPIレベルである事が判別できます。

```java
    public static boolean isAtLeastO() {
        return !"REL".equals(VERSION.CODENAME)
                && ("O".equals(VERSION.CODENAME) || VERSION.CODENAME.startsWith("OMR"));
    }
```


なおDP3時点で提供された `com.android.support:support-v4:26.0.0-beta2` では、このメソッドの実装は 一般的なSDK_INTの比較に基づく実装になっており、かつ Deprecatedになりました。なんとも忙しいメソッドですね。

## ちょっとした注意事項

使用しているROMと、サポートライブラリのバージョンの組み合わせは注意が必要です。自分は動かしてないですが、DP3の値と、上記で紹介したbeta1時のisAtLeastO()の実装の組み合わせでは、期待する結果(true)にならないのが予想できます。

isAtLeastO()のメソッドは、サポートライブラリ(β版に限定されるかと思いますが)の中でも、バージョン別の処理を行うために使用されるため、isAtLeastO()の判定結果が正しくないと、サポートライブラリのAPIも正しく動作しない場合がでてきます。

アプリに組み込んだサポートライブラリのバージョンが、正しく動作するバージョンとなっているか、要所要所で気にしておくと良いかと思います。

最後に、バージョンの現状値をログ出力するコード例を紹介します。

```java
    void checkVersions() {
        Log.d(TAG, "checkVersions: ");
        Log.d(TAG, "checkVersions: " + "Build.VERSION.SDK_INT=" + Build.VERSION.SDK_INT);
        Log.d(TAG, "checkVersions: " + "Build.VERSION.PREVIEW_SDK_INT=" + Build.VERSION.PREVIEW_SDK_INT);
        Log.d(TAG, "checkVersions: " + "Build.VERSION.CODENAME=" + Build.VERSION.CODENAME);
        Log.d(TAG, "checkVersions: " + "Build.VERSION_CODES.O=" + Build.VERSION_CODES.O);
        Log.d(TAG, "checkVersions: " + "getApplicationInfo().targetSdkVersion=" + getApplicationInfo().targetSdkVersion);
        Log.d(TAG, "checkVersions: " + "BuildCompat.isAtLeastO()=" + BuildCompat.isAtLeastO());
        Log.d(TAG, "checkVersions: " + "BuildCompat.isAtLeastOMR1()=" + BuildCompat.isAtLeastOMR1());
    }
```
Laravel-Socialite でソーシャルログイン機能を実装する

# ソーシャルログイン機能を実装する

まずは、環境をインストール

```
composer create-project --prefer-dist laravel/laravel rose "5.4.*"
composer require laravel/socialite
```

## Sqlite 設定

```
touch database/database.sqlite
```

## 設定ファイル編集

vi .env

```
DB_CONNECTION=sqlite
#DB_HOST=127.0.0.1
#DB_PORT=3306
#DB_DATABASE=homestead
#DB_USERNAME=homestead
#DB_PASSWORD=secret

GITHUB_CLIENT_ID=0000000000000000
GITHUB_CLIENT_SECRET=000000000000000000000000
GITHUB_REDIRECT=http://127.0.0.1:8000/auth/github/callback
```

## ソーシャルログイン設定

vi config/app.php 

```
'providers' => [
        /*
         * Package Service Providers...
         */
        Laravel\Socialite\SocialiteServiceProvider::class,

'aliases' => [
    'Socialite' => Laravel\Socialite\Facades\Socialite::class,
```

vi config/services.php 

```
    'github' => [
        'client_id' => 'your-github-app-id',
        'client_secret' => 'your-github-app-secret',
        'redirect' => 'http://your-callback-url',
    ],
```

Value値は、以下ページの Oauth applications リンクから設定を行う

![スクリーンショット 2017-06-12 23.22.39.png](https://qiita-image-store.s3.amazonaws.com/0/151710/b54dc08d-1f35-ba52-cc66-0fe00e97df5b.png)

vi app/Http/Controllers/Auth/AuthController.php

```
<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Socialite;

class AuthController extends Controller
{
    /**
     * Redirect the user to the GitHub authentication page.
     *
     * @return Response
     */
    public function redirectToProvider()
    {
        return Socialite::driver('github')->redirect();
    }

    /**
     * Obtain the user information from GitHub.
     *
     * @return Response
     */
    public function handleProviderCallback()
    {
        $user = Socialite::driver('github')->user();

        // $user->token;
    }
}
```

vi routes/web.php 

```
Route::get('auth/github', 'Auth\AuthController@redirectToProvider');
Route::get('auth/github/callback', 'Auth\AuthController@handleProviderCallback');

```

## Login Page Setting.

```
php artisan vendor:publish
php artisan make:auth
```

## Server Start

```
php artisan serve
```

以下URLにアクセスすると、Githubの認証画面が表示されるはず。

http://127.0.0.1:8000/auth/github
[WIP]Laravel 5.3の外部キー制約でエラーになって困った話し

本記事はまだ書きなぐり段階のものです。
***あとで清書する…予定。***

## ```php artisan migrate```が失敗する

```
[Illuminate\Database\QueryException]
  SQLSTATE[HY000]: General error: 1215 Cannot add foreign key constraint (SQL: alter table `children_table` add constraint `children_parent_id_foreign` foreign
  key (`parent_id`) references `parent_table` (`id`) on delete cascade)
```

## 概要:
エラー内容でいろいろと調べたがどうにもよくわからない。
タイプミスをしているわけではないし、外部キー制約は順番が重要だということだったのできちんと親テーブル(parent_table)が生成されたあとで実行しているのに何故だろうか？と考えて煮詰まってしまいお手上げだ〜！ということで質問を投げてみたところ、
とある方が「型情報などを完全にあわせないとエラーになる」と教えてもらった。

## 原因:
元々、型情報がBigIntegerで定義したいところがintegerになっていたのであとでまとめて修正しようと思っていたのだがこれが原因だったようだ。
migrationファイルを本来想定している型情報に合致するよう修正を実装。

今回は```create_children_table.php```内ではparent_idをBigIntegerで定義していたが実際の```create_parent_table.php```ではIntegerだったのでIntegerになるようchildrenテーブルの型情報を変更。
これだけだとまだ情報が抜け落ちていて```increments()```は自動で```UNSIGNED```を付与するのでそれを追加する。

この状態で```php artisan migrate:rollback```を実行し、先程失敗したmigrateをロールバックしmigrate成功時点の状態まで巻き戻す。
なおこの際にchildrenテーブルは生成自体には成功している(外部キー制約だけが付与されていない状態で作成されている)ためDROP TABLEで削除しておかないと「すでに作成済みだ」と怒られる。
(個人的には外部キー制約でエラー出たならテーブルの作成も失敗してほしい、何故テーブルだけ作成されるのだろう？)

あとは```php artisan migrate```を実行すれば成功する。

## よっしゃ！完了だ！！！

と思ったがロールバックがきちんと出来ているか？が確認出来ていなかったため実行したところ↓のようなエラーが出た。

```
[Illuminate\Database\QueryException]
  SQLSTATE[23000]: Integrity constraint violation: 1217 Cannot delete or update a parent row: a foreign key constraint fails (SQL: drop table if exists `parent_tables`)

```

エラー内容みればわかるが外部キー制約があるから更新も削除もできないよ！とある。
はてな？何故だろうと思ってmigrationファイルを確認したところ```down()```の実装に問題がああった。

```down.php
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('parent_table');
        Schema::dropIfExists('children_table');
    }
```

先に親テーブルを削除しようとしているために子テーブルの外部キー制約に引っかかっている状態だなとわかったので「子テーブル削除→親テーブル削除」の順番になるよう修正。
これでロールバックが可能になった。

```php artisan refresh```を実行したところ問題なく再生成された。
今度こそ完了した！という結末になる。

## まとめ

しかしLaravelのmigrateはエラー内容がわかりにくいなあという印象だ。
5.4ではこのあたりのエラー情報は改善されているんだろうか？
もしくはもっと別の方法で具体的にコードのココが間違っている！と教えてくれると助かるのになあ。
ログみろって話なんだろうけどもスキーマビルダーのコードに問題があるんだからそこを表示してほしいな。


## 参考サイト
- [php artisan migrateのエラー確認方法](http://lionsage.hatenablog.com/entry/2017/02/02/002928)
- [laravel5.3にてmigrateができない](https://teratail.com/questions/58801)
- [[Laravel]はじめてのマイグレーション](http://atuweb.net/201611_laravel-migration-1ststep/)
- [laravelでのmigrate順について(リレーションを使う時の注意点)](http://www.messiahworks.com/archives/10086)
- [How to implement partition in laravel database migration](http://stackoverflow.com/questions/39629347/how-to-implement-partition-in-laravel-database-migration)
Boto3を使ってAMIのNameのリスト一覧を取得してみた


Boto3を利用してAMIの一覧をリストで取得する処理を作成しました。
Owner_idにユーザのOwnerIDを入れると動きます。

リストの使い方などなんとなく覚えてきました。
for文で必要なところを抜き出してますが、もっと素敵があるとうれしいなと思います。

AWSのLambdaバージョンにすれば環境変数でOwnerIDも指定出来るのでGitで公開しやすいのですが・・・


```py

# -*- coding: utf-8 -*-

# import
import boto3
from boto3.session import Session
from datetime import date, datetime, timedelta

ec2 = boto3.client('ec2')
list_ami = []
Owner_id = "ここにIDをいれる"

# def
def get_list_ami():
  response = ec2.describe_images(
    Owners = [Owner_id]
  )
  for list_id in response['Images']:
    list_ami.append(list_id['Name'])
  return list_ami

# Main
if __name__ == "__main__":
  get_list_ami()
  print list_ami
```

https://github.com/handa3/study/blob/master/aws/ec2/get_list_ami.py
Atom, VSCodeで別ファイルを開く時、今のファイルを開いたまま残す

## マウス操作
- ツリービュー（エクスプローラ）上のファイルをダブルクリック
- 残したいファイルのタブ上で右クリックして
  * `Keep Pending Tab`を選択（Atom）
  * `Keep Open`を選択（VSCode）

## キーボード操作
- `Command Palette`から`Keep Pending Tab`を選択（Atom）
- `Cmd+k Enter`（VSCode）

## タブ上のファイル名の書体
この操作をするとAtom, VSCodeともに、タブ上のファイル名の書体が *斜体* から 立体 になる。
iOSアプリエンジニアによるiOS/Androidプロジェクト構成比較

最近、iOS・Androidの継続的デリバリーのお仕事やったりしてるんですが、Androidわからなさすぎてつらいので、
iOSプロジェクトとの違い含めて一旦まとめてみました。
(どちらもSampleCompanyのSampleAppという形になっています)

## iOSプロジェクトの構成
### 基本的なファイル
#### 設定ファイル
- SampleApp.xcodeproj
- SampleApp/Info.plist

#### ソースコード
- SampleApp/
- SampleApp/AppDelegate.swift
- SampleApp/ViewController.swift
- SampleApp/Main.storyboard
- SampleAppTests/

#### 解説
`SampleApp.xcodeproj`はプロジェクトに関する全ての設定を定義したファイル。
`Info.plist`はアプリに関する設定(アプリ名やアプリのバージョン、カメラや位置情報にアクセスできるか等)を定義したファイル。
`SampleApp`はアプリケーションコードを格納するためのディレクトリ。
`AppDelegate.swift`はiOSアプリのエントリーポイントとなるファイル。iOSアプリ全体のライフサイクル管理等も担当している。
`ViewController.swift`はMVCにおけるVCの役割を果たすファイル。
`Main.storyboard`はアプリのUIや画面間の遷移を定義するためのファイル。
`SampleAppTests`はテストターゲットに関連したファイル(テストコード等)を格納するためのディレクトリ。

### CocoaPodsを利用する場合に追加
- Podfile
- Podfile.lock
- Pods/
- SampleApp.xcworkspace

#### 解説
CocoaPodsはRubyで記述されたCocoa用の依存関係管理システム。
`Podfile`に使いたいライブラリを記述し、`pod install`を実行することで
インストールされたバージョンを記述した`Podfile.lock`、
実際のライブラリのソースコードを含む`Pods`ディレクトリ、
アプリのプロジェクトとPodsプロジェクトを管理するための`xcworkspace`ファイルが生成される。

### Carthageを利用する場合に追加
- Cartfile
- Cartfile.resolved
- Carthage/

#### 解説
CarthageはSwiftで記述されたCocoa用の依存関係管理システム。
`Cartfile`に使いたいライブラリを記述し、`carthage bootstrap`を実行することで
インストールされたバージョンを記述した`Cartfile.resolved`、
ソースコードやビルドされたframeworkを含む`Carthage`ディレクトリが生成される。

## Androidプロジェクトの構成
### 基本的なファイル
#### 設定ファイル
- app/src/main/AndroidManifest.xml

#### ソースコード
- app/
- app/src/main/java/samplecompany/sampleapp/MainActivity.java
- app/src/main/res/layout/activity_main.xml

#### 解説
`AndroidManifest.xml`はアプリに関する設定(アプリ名やアプリのバージョン、パーミッション等)を定義したファイル。iOSプロジェクトにおける`Info.plist`に対応するファイルっぽい。
`app`内にはAndroidアプリに関するファイルが格納される。
`app/build.gradle`は`Podfile`や`Cartfile`のように、ライブラリを管理するためのファイル。
`MainActivity.java`はAndroidアプリのエントリーポイントとなるファイル。
`activity_main.xml`はレイアウトを定義するためのファイル。iOSプロジェクトにおける`.Storyboard`に対応するファイルっぽい。

### 自動生成されるもの
- build/

#### 解説
ビルド結果として生成されるファイルがこの中に格納される。

### gradle
- app/build.gradle
- build.gradle
- gradle.properties
- gradle/
- gradlew
- gradlew.bat
- settings.gradle

Gradleは、Ant、Mavenに次ぐAndroid向けのビルドシステム。
`app/build.gradle`にはアプリモジュールに対する設定を、
`build.gradle`には、アプリモジュール含め全てのモジュールに対して適用する設定を記述する。
pluginの設定や、ライブラリの依存関係は、`app/build.gradle`に記述する。
`gradle.properties`には、Gradleデーモンの最大ヒープサイズなどのgradle自体の設定を記述する。
`gradlew`はLinux/macOS向け、`gradlew.bat`はWindows向けのgradleのラッパーコマンド。
`settings.gradle`にはアプリのビルドで含める必要のあるモジュールを記述する。

## まとめ
iOSアプリをメインに開発しているので、gradle周りの設定がまだ難しいですが、
ざっくりとした対応は把握できたと思います。

## 参考
- [プロジェクトの概要 - Android Developers](https://developer.android.com/studio/projects/index.html)
- [アプリ マニフェスト - Android Developers](https://developer.android.com/guide/topics/manifest/manifest-intro.html)
rubyのキーワード引数のあるメソッドをYardで書く方法

## 内容

意外とググっても出なかったのでメモ。

rubyのキーワード引数（keyword parameters）があるメソッドのパラメータドキュメントをYardで書く場合どうするか。

## 答え

rubyでよく使われるHashをオプションとして引数に渡す場合、下記のように `@option` が使われるが、

```
# @param [Hash] opts the options to create a message with.
# @option opts [String] :subject The subject
# @option opts [String] :from ('nobody') From address
# @option opts [String] :to Recipient email
# @option opts [String] :body ('') The email's body
def send_email(opts = {}) end
```

キーワード引数の場合は、普通に `@param` を利用するのが正解のようだ。

https://www.rubydoc.info/gems/yard/file/docs/Tags.md#option

> Note: For keyword parameters, use @param, not @option.

なので、下記のようになる。

```
# @param　subject [String] The subject
# @param from [String] ('nobody') From address
# @param to [String] Recipient email
# @param body [String] ('') The email's body
def send_email(subject: nil, from: nil, to: nil, body: nil) end
```
TortoiseGitではNo Fast Forwardはチェックしておきたい

GitHubやGitLabのマージボタンに頼っていて、マージの際のログを上手く操作できなかったのでメモ
TortoiseGitで手動マージする際に目的とするコミットログにならなかったので調べてみました。

マージするブランチの関係（developにfeatures/Aをマージしたい）

```
develop
●
↓
features/A
●→〇→◎→■
```

目標とするdevelopのログ

```
merge branch develop into features/A
■のコミットログ
◎のコミットログ
〇のコミットログ
```

何も考えずTortoiseGitでマージしたところ
developのログは

```
■のコミットログ
◎のコミットログ
〇のコミットログ
```

となり、developに直接コミットしたようなログになってしまった。
これだとdevelopにfeatures/Aをマージしたという事が分からなくなってしまい使い物にならない

調べたところ、ベースとしたブランチが育っていない状態で、ベースのブランチから育てたブランチをマージすると、このようにベースとしたブランチに直接コミットしたようなログになってしまうらしい（fast-forwardマージ）

TortoiseGitのマージオプションにNo Fast Forwardがあるのでこれをチェックしてマージを行うとdevelopのログは

```
merge branch develop into features/A
■のコミットログ
◎のコミットログ
〇のコミットログ
```

というように目的のコミットになりました。



---
developにorigin/features/Aをマージするとremote-trackingというのが付いた
リモートブランチをマージするとこうなるらしい。

```
merge remote-tracking branch develop into origin/features/A
■のコミットログ
◎のコミットログ
〇のコミットログ
```
springでパスに対応するハンドラが無い時に例外をスローさせてキャッチする

spring-mvcでサーブレットマッピングに対応するパスが無い場合はログに以下のようなwarningが出る。この場合にspring側で例外をスローさせて、それを捕捉する。これにより（web.xmlではなくspringを使用した）404のハンドリングを行う。

```
[org.springframework.web.servlet.PageNotFound] (default task-2) No mapping found for HTTP request with URI [/xxxx] in DispatcherServlet with name 'dispatcher'
```

# 環境

* WildFly 10.1.0.Final
* org.springframework 4.3.8.RELEASE

# コード

```java
import org.springframework.web.context.WebApplicationContext;
import org.springframework.web.servlet.DispatcherServlet;
import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;

public class WebMVCApplicationInitializer extends AbstractAnnotationConfigDispatcherServletInitializer {

	@Override
	protected Class<?>[] getRootConfigClasses() {
		Class<?>[] configurations = {AppConfiguration.class};
		return configurations;
	}

	@Override
	protected Class<?>[] getServletConfigClasses() {
		Class<?>[] configs = {};
		return configs;
	}

	@Override
	protected String[] getServletMappings() {
		String[] mappings = {"/"};
		return mappings;
	}

	@Override
	protected DispatcherServlet createDispatcherServlet(WebApplicationContext servletAppContext) {
		DispatcherServlet dispatcherServlet = (DispatcherServlet)super.createDispatcherServlet(servletAppContext);
		dispatcherServlet.setThrowExceptionIfNoHandlerFound(true);
		return dispatcherServlet;
	}
}
```

setThrowExceptionIfNoHandlerFoundにtrueを設定することで、リクエストに対応するハンドラが見当たらない場合に例外がスローされるようになる。

```java
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.RestControllerAdvice;
import org.springframework.web.servlet.NoHandlerFoundException;

@RestControllerAdvice
public class NoHandlerFoundControllerAdvice {
    @ExceptionHandler(NoHandlerFoundException.class)
    public ResponseEntity<String> handleNoHandlerFoundException(NoHandlerFoundException ex) {
    	return new ResponseEntity<>("not found", HttpStatus.NOT_FOUND);
    }
}
```

複数コントローラー間で共通な例外処理を記述するためにControllerAdvice（かControllerAdvice）を付与するクラスを作る。springはパスに対応するハンドラが無いとNoHandlerFoundExceptionをスローするようにさっき設定したので、これをExceptionHandlerに指定する。

# 情報源

* [404 error redirect in Spring with java config - Stack Overflow](https://stackoverflow.com/questions/23574869/404-error-redirect-in-spring-with-java-config)
`rake db:seed`の処理の流れを追った


## 概要

表題の通り。

### 経緯

Railsアプリで開発時に初期投入する処理を`db/seeds.rb`に書いていた。その際、特定の環境下以外では動作しないように以下のように早期returnする処理を書いていたが、`return`だと動かないし`exit`だと正常な処理終了フローに乗らずに収まりが悪かったので、そもそものタスクの定義箇所から処理を追ってみた。

```ruby:seeds.rb
if !Rails.env.development?
  p "Nothing to do."
  exit
end  
```

## 流れ

### 1. activerecord内にある`railties/databases.rake`

`db:seed`タスクは以下の箇所にて定義されている。
https://github.com/rails/rails/blob/5-1-stable/activerecord/lib/active_record/railties/databases.rake

railties内の`tasks/engine.rake`にも`app:db:seed`が定義されているが、これは別物かな...？


### 2. `ActiveRecord::Tasks::DatabaseTasks.load_seed`

この`module DatabaseTasks`内に定義された`seed_loader.load_seed`をcallしているが、`seed_loader`とは何か。
https://github.com/rails/rails/blob/5-1-stable/activerecord/lib/active_record/tasks/database_tasks.rb#L268-L276


`seed_loader`はfunctionとしてmodule内に定義されている。
インスタンス変数である`@seed_loader`に値をcacheしながら、`Rails.application`を返却している。
https://github.com/rails/rails/blob/5-1-stable/activerecord/lib/active_record/tasks/database_tasks.rb#L102-L104

要は`seed_loader.load_seed`は`Rails.application.load_seed`を指している。

### 3. `Rails.engine.load_seed`

`Rails.application`は`Rails.engine`をextendsしています。`Rails.application.load_seed`の実体は`Rails.engine`に定義された`Rails.engine.load_seed`である。
https://github.com/rails/rails/blob/5-1-stable/railties/lib/rails/engine.rb#L543-L550

このfunctionの中で、一番近しい`db/seeds.rb`のpathを解決して`Kernel.load`でそのファイルを読み込んでいる。

### 4. `Kernel.load`

第一引数の`file`に入力されたpathに沿って、ファイルを読み込むbuilt-in function。
https://docs.ruby-lang.org/ja/latest/method/Kernel/m/load.html

#### `Kernel.load`で読み込んだスクリプトで早期returnするには？

結局これはよくわかんなかった...
loadするRubyスクリプトにblockを用意して、その中に処理を定義していくしかない...？（あんまりよくわかってない）

## おわりに

結局[これ](http://d.hatena.ne.jp/seinzumtode/20150715/1436962405)でやりたいことは実現してしまいました:stuck_out_tongue_winking_eye: 

## 参考

- [module function Kernel\.\#load \(Ruby 2\.4\.0\)](https://docs.ruby-lang.org/ja/latest/method/Kernel/m/load.html)
- [環境にあわせてrake db:seedを実行する \- how to code something](http://d.hatena.ne.jp/seinzumtode/20150715/1436962405)
Java初心者向け: List,Map,Iterator/配列...どうやって変換すればいいの？

Javaでプログラミングする際、研修でも研修以外でも
List,Mapなどはよく(たまにSet,Iteratorなど)登場すると思います。

が、久しぶりに変換するものは
「あれ？これどうやって変換するんだっけ」となることもあるはずなので

# 1.とりあえず早見表

クラス名があるものはstaticメソッド、メソッド名のみのものはインスタンスメソッド

|＼変換先<br>変換元＼|List・Setなど(Collection)|Map|Iterator|Stream|配列
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
List/Setなど<br />(Collection)|コンストラクタ|-|iterator()|stream()|toAttay()
Map|entrySet(), keySet(), values()|コンストラクタ|(Setを経由する)|(Setを経由する)|(Setを経由する)
Stream|Collect()|Collect()|iterator()|中間操作全般|toArray()
配列|(Listのみ)<br />*Arrays.asList()*※|-|(Listを経由する)|*Steam.of()*|*Arrays.copyOfRange()*
※java9以降は*List.of()*, *Set.of()*

# 2.大事なところだけ解説
### ・Collection(List/Setなど)→Collection(List/Setなど)

Javaの組み込みCollectionクラス(ArrayList,HashSet,ArrayDequeなど)は
コンストラクタにCollectionを入れるものがあります。
MapはCollectionではありませんが、Map→Mapも同様のことができます。

```Collection.java
 //Setを事前に用意する
 Set<String> ESet = Set.of("list","set","deque");
 //SetをListに!
 List<String> EList = new ArrayList(Eset);
```
※null許容のクラス→不許容のクラスに変換する場合などは例外に注意！

### ・Map→Collection,Iterator
Key一覧だけほしい場合はkeySet,中身だけほしい場合はvalues()とします。
for文で両方使用する処理をしたい場合はentrySet()

```Map.java
 //Mapを事前に用意する
 Map<String,Collection<String>> EMap = new HashMap<>();
 EMap.put("list",List.of("list"));
 EMap.put("set",Set.of("set"));

 //MapをSetに!
 Set<String> ESet = EMap.keySet();
 //SetをIteratorに！
 ESet.iterator();

 //つなげてMap→Iteratorも可
 EMap.keySet().iterator();
```
### ・List→配列への変換
```List.java
 List<String> EList = List.of("list","set","deque");
 String[] EArray = EList.toArray(new String[0]);
```
※引数に配列を入れないと Object[] になってしまうので注意！

# 3.やや時間のある人向け：特殊なCollectionに変換したい...Streamを使って変換

Streamからはcollect()を使用することでCollectionにすることができます。
(配列やMapなど、Collection以外にすることも可能)
特に、Collectors.toCollectionを利用することでほとんどあらゆるCollectionを簡単に作成できます。

### ・組込Collectorを使った変換
```Set.java
 List<String> EList = List.of("list","set","deque");
 //Setに変換する
 Set<String> ESet = EList.stream().collect(Collectors.toSet());
```

注意：**Collectors.toSet(),Collectors.toList()は変更可能か不可能かも保証されていないので注意！**<br>(例：toListは現状ArrayListだが、いきなり変更不可能なListにされる可能性あり)

```Map.java
 List<Integer> EList = List.of(1,2,3);
 //リストの要素をkeyに、文字列化したものをvalueに設定するMapに変換する
 Map<Integer,String> EMap = EList.stream().collect(Collectors.toMap(Function.identity(), String::valueOf));
```
### ・Collectors.toCollectionを使った変換
```LinkedList.java
 List<Integer> EList = List.of(1,2,3);
 //Listの実装クラスを指定したい場合などは、toCollectionを使う
 LinkedList<Integer> EList = EList.stream().collect(Collectors.toCollection(LinkedList::new));
```
jupyter notebookでpythonとJavaScriptの連携

# はじめに

jupyter notebookでpythonだけでもデータ解析から可視化まで一連の流れが可能ですが、[D3.js](https://d3js.org/)の高い表現力とインタラクティブ性をみてしまうと、可視化はJavaScriptでというケースも多くなるのではないでしょうか。そこで、データはpythonで用意してJavaScriptに引き渡す方法を紹介したいと思います。

以下の説明では[py_d3](https://github.com/ResidentMario/py_d3)というjupyter notebook上でD3.jsのコードを実行、表示するパッケージを利用しますが、D3.jsに限らず任意のJavaScriptが実行可能です。[^1]

# py_d3のセットアップ

```shell-session
pip install py_d3
```

でインストールできます。機能を利用するにはnotebookの先頭などで以下のように記述します。

```py3
%load_ext py_d3
```

その上でセルの先頭で `%%d3`と記述するとそのセル中のコードはHTMLとJavaScriptとして解釈されます。

詳しくは[こちらの記事](http://qiita.com/RyotaKatoh/items/5c0c23c3b8a2a6ad280a)などを参考にしてください。 [^2]

# 前準備

連携はIPython.display.HTMLパッケージの機能を使いますがそのままでは使いにくいので、以下のJavaScriptの関数を定義してラッピングして使うことにします。```%load_ext py_d3```の直後のセルなどで実行してください。snippetsなどに登録しておくのがいいです。

```html
%%d3
<script>
function pyexec(command) {
    return new Promise(res => {
        IPython.notebook.kernel.execute(command,
            {iopub: {
                output: 
                    out => res(JSON.parse(eval(out.content.data["text/plain"])))
            }}, 
            {silent: false});
    });
}
</script>
```

# 連携

実行するpythonのコードを文字列にして上記のpyexec関数に渡します。python側ではjson形式で値をもどすようにしてください。

たとえばpython側で以下のように関数を定義しておきます。

```py3
import json
import numpy as np
def get_data(count):
    return json.dumps((np.random.rand(count)*10).tolist())
```

JavaScript側は以下のように記述します。pyexecのあとのthenの中でデータを受け取ってから行う処理を記述します。今回はD3.jsのチュートリアルにのっていたシンプルなサンプルを実行しています。

```py3
%%d3
<g></g>
<style>
element {
    height: 25px;
}
div.bar {
    display: inline-block;
    width: 20px;
    height: 75px;
    margin-right: 2px;
    background-color: teal;
}
</style>

<script>
pyexec("get_data(7)")
.then(dataset => {
    d3.select("g").selectAll("div")
    .data(dataset)
    .enter()
    .append("div")
    .attr("class", "bar")
    .style("height", function(d) {
        let barHeight = d * 5;
        return barHeight + "px";
    });
});
</script>
```
すると以下のようなグラフがnotebook上に描画されます。

![スクリーンショット 2017-06-12 18.46.40.png](https://qiita-image-store.s3.amazonaws.com/0/10742/0d88e519-0133-49a5-6f19-5e9c3bf0b5e3.png)

今回作成したnotebookを公開しておきます→ http://nbviewer.jupyter.org/gist/ssugiyama/29b586b25dc63730eb67ee6c1daefac8 

# 参考

- [Jupyter Notebook x d3.jsでリッチなデータビジュアライゼーション](http://qiita.com/RyotaKatoh/items/5c0c23c3b8a2a6ad280a)
- [Jupyterノートブック上でJavaScriptからカーネルのコードを実行する方法](http://enakai00.hatenablog.com/entry/2016/12/10/141301)

# 脚注

[^1]: py_d3を使わず標準のIPython.display.HTMLパッケージだけでも連携可能ですが、JavaScriptとHTMLのコードを文字列の中に書く必要があり、エスケープなどが面倒なので、セルの中に直接JavaScriptとHTMLが書けるpy_d3を推奨します。

[^2]: ただし、py_d3のロードの方法はこの記事の記述から変更されており `%load_ext py_d3`を使うようにしてください。
Visual Studio CodeでTeX

素晴らしい[extension](https://marketplace.visualstudio.com/items?itemName=James-Yu.latex-workshop)に感謝

前提条件: MacTeX等をインストール済で，`latexmk --help`コマンドがターミナルから打てること．

英語のみであればそのままでも良いが，日本語用にuplatexを使っている場合は以下のようにvscodeの設定を上書きする．これは英語の場合tex->pdfのところが，日本ではtex->dvi->pdfという方式が主流のため．


```
"latex-workshop.latex.toolchain": [
    {
        "command": "latexmk",
        "args": [
            "-latex=uplatex", 
            "-synctex=1",
            "-interaction=nonstopmode",
            "-file-line-error",
            "-pdfdvi",
            "%DOC%"
        ]
    }
]
```

加えて，latexmkがdvipdfmxを扱えるように，`~/.latexmkrc`に以下の記述を行う．

```~/.latexmkrc
#!/usr/bin/env perl
$dvipdf = 'dvipdfmx %O -o %D %S';
```

これによってvscodeでtexが書けるようになる．pdfの表示もvscode内で完結でき，更新すると自動で再コンパイルしてくれる．補完も非常に高性能．

### 追記
vscode関連のバグによって`\b`(backspace)の文字コードが入り込んでしまい，コンパイルに失敗するようになることがある．対症療法としては制御文字をvscodeで表示する設定にすれば気づくことが可能．