OmniAICreator/Qiita-1.07M huggingface dataset:
ロールオーバーで画像切り替え レスポンシブイメージ編

## レスポンシブイメージとは
[2016年11月から勧告となったHTML5.1](https://www.w3.org/TR/2016/REC-html51-20161101/changes.html)の大きな変更点として`<picture>`要素とsrcset属性[^1]によるレスポンシブイメージ (responsive images) [^2]の採用がありました。
レスポンシブイメージを利用すればJSやCSSを使わずにブラウザの幅やピクセル密度(Retinaなど)に応じて、異なる画像を読み込む事ができます。
レスポンシブイメージ自体についての詳説は下記をご参照ください。

- [srcset属性について](https://qiita.com/C058/items/643a9ff2d23dfe3a0b37)
- [レスポンシブイメージで画像の表示を最適化 〜CSSもJSもいらないHTML 5.1の新機能 - ICS MEDIA](https://ics.media/entry/13324)
- [srcset と sizes](https://terkel.github.io/srcset-sizes/)
- [レスポンシブイメージのネイティブサポート](https://www.html5rocks.com/ja/tutorials/responsive/picture-element/)

### 例
`<img>`要素をこんな風に書くと

```html

<img src="lighthouse-160.jpg" alt="灯台"
     sizes="80vw"
     srcset="lighthouse-160.jpg 160w, 
             lighthouse-320.jpg 320w,        
             lighthouse-640.jpg 640w,
             lighthouse-1280.jpg 1280w">

```
こんな風に画像の出し分けが出来てとても便利です。
![lighthouse-example-img.png](https://qiita-image-store.s3.amazonaws.com/0/119598/01603794-87ed-63c7-fcb3-cfbe4844469a.png)
> [レスポンシブイメージのネイティブサポート](https://www.html5rocks.com/ja/tutorials/responsive/picture-element/)より

## 困ったこと
さて、私も早速srcset属性[^1]を使ってこれは便利だと喜んでいたのですが、ある日デザイナーさんにレスポンシブイメージに対して「ロールオーバー[^3]で画像を別な画像に切り替えて欲しい」と言われて困ってしまいました。
よく紹介されている画像切り替え手法はどれもレスポンシブイメージとしっくりこない感じがしたんですよね。

### よく使われる画像切り替え方法

1. CSSスプライトを作りbackground-positionを切替える
2. CSSでbackground-imageを切替える
3. CSSでマウスオーバー時`<img>`要素非表示を指定
4. `<img>`要素にonmouseout属性, onmouseover属性を記述
5. Javascriptで`<img>`要素のsrc属性を書き換える

よく使われるロールオーバー[^3]画像切り替え方法には上記がありますが、1.はアイコンセットなどでは有効な手法だが、大きな画像には向いていない。2.と3.は事前にロールオーバー用の画像を読み込ませるので、余分な画像を事前ロードさせない（から表示の高速化にも役立つ）というレスポンシブイメージの理念と対立しちゃってる感がある。
5.もHTMLだけで実現できるというメリットが薄くなる感じがするので微妙。…というわけで**4. `<img>`要素にonmouseout属性, onmouseover属性を記述**が一番相性が良さそうだと思いました。

# 本題
## onmouseout属性, onmouseover属性でsrcset属性に指定した画像を切り替える
というわけで実装します。

```html
<a href=""> 
<img 
src="/img/sample.png"
srcset="/sample@2x.png 2x, /img/sample.png 1x"
onmouseover="this.setAttribute('srcset','/img/sample_hover@2x.png 2x, /img/sample_hover.png 1x');"
onmouseout="this.setAttribute('srcset','/img/sample@2x.png 2x, /img/sample.png 1x');"
alt="サンプル画像">
</a>

```
上記のように書けばレスポンシブイメージでも画像切り替えが出来ました！

なお従来は

```html
<a href=""> 
<img 
src="/img/sample.png"
onmouseover="this.src='/img/sample_hover.png'" 
onmouseout="this.src='/img/sample.png'"
alt="サンプル画像">
</a>
```
のように書けばOKだったので難しくなってはいますね。日々精進！す。

[^1]: 読み方は「ソースセット」。
[^2]: レスポンシブデザイン (RWD) はまた[別物](https://alistapart.com/article/responsive-web-design/)です。ややこしいですね。
[^3]: ロールオーバー　(roll-over)、マウスオーバー　(mouseover)、ホバー　(hover)…全部ほぼ同じ意味です。ややこしい。
[Python]Windows10にTensorflow-GPU+Kerasをインストールする[2017/10/5]

windows10のTensorflow-gpuのインストールにかなり苦戦したのでここにインストール手順を記します。

#参考サイト
[WindowによりTensorflowとChainerの環境構築with CUDA(GPUあり)](https://qiita.com/tenten1010/items/4958e16e04082e59a857)
[Windows10上にCUDAをインストールしてサンプルプログラムを動かしてみる](http://chie8842.hatenablog.com/entry/2017/03/22/233627)
[Installing TensorFlow on Windows](https://www.tensorflow.org/install/install_windows)

#実行環境
Windows10 
Anaconda 3-4.4.0
python 3.6.2
Tensorflow-gpu 1.3.0
CUDA v8.0
cuDNN 6
Visual Studio 2015 community

#Visual Studio 2015のインストール
https://my.visualstudio.com/downloads
からVisual Studio 2015 Community版をダウンロードする。適宜ユーザー登録等すること。
![ダウンロード (3).png](https://qiita-image-store.s3.amazonaws.com/0/184737/d120d652-6ec4-a9ce-0098-40adb66bd3cd.png)

Visual C++にチェックを入れ、インストール実行。
![visual.png](https://qiita-image-store.s3.amazonaws.com/0/184737/fdc019cc-a8cf-3f3f-9983-b9aebf018fc4.png)

#CUDAのインストール
https://developer.nvidia.com/cuda-toolkit-archive
からCUDA Toolkit 8.0 GA2を選択し、ダウンロード画面へ。
![ダウンロード.png](https://qiita-image-store.s3.amazonaws.com/0/184737/fde2a282-add8-f331-3b82-47068391161e.png)

インストールタイプにnetworkとlocalを選択できるが、通常はnetwork版を使用。下の確認作業でうまくいかなければlocal版をインストールしてください。（私はlocal版でうまくいきました)
![ダウンロード (1).png](https://qiita-image-store.s3.amazonaws.com/0/184737/d4d15b3b-1a4b-9a61-f664-0c0d49482ee7.png)


インストールには何もいじらず推奨設定のまま実行してください。
![w_cuda80_inst1.jpg](https://qiita-image-store.s3.amazonaws.com/0/184737/736e1717-1483-6251-8ede-c011a11e89b0.jpeg)

#cuDNNのインストール
https://developer.nvidia.com/rdp/cudnn-download
でユーザー登録を行い、Download cuDNN v6.0 (April 27, 2017), for CUDA 8.0を選択し、zipファイルをダウンロードする。
![ダウンロード (2).png](https://qiita-image-store.s3.amazonaws.com/0/184737/d5d7db18-8870-d31b-8326-b2a484a86492.png)

zipファイルを解凍すると、cuda/bin,include,libフォルダが展開されるため、任意のディレクトリに設置しPATHを通すか、先にインストールしたCUDAディレクトリ`C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v8.0`の同名フォルダへそれぞれ上書きコピーする。

#GPU実行環境確認
これまでで、GPU実行環境が正常にインストールされたか調べるため、コマンドプロンプトを起動し
`nvcc`
コマンドを実行する。
`nvcc fatal   : No input files specified; use option --help for more information`
が表示されれば正常にインストールが完了している。
`nvcc`を認識できなければどこかでインストールが失敗しているため、はじめから環境構築をやりなおして下さい。

#Tensorflow-gpu、scipy、Kerasのインストール
Anacondaは既にインストール済みとします。
コマンドプロンプトを起動し
`conda create -n tensorflow python=3.6.2`
で仮想環境[tensorflow]を作成。
`activate tensorflow`
で仮想環境に入り、
```pip install tensorflow-gpu
conda install scipy
pip install keras```
を順次実行。ここまででエラーがでなければうまくいくはず。

最後にpythonの対話モードに入り、`import keras`で
`Using TensorFlow backend.`と表示されればインストール成功。

#終わり
以上で環境構築は終了です。
お疲れさまでした。

#追記
Anaconda3-5.0verではscipyのリソースが変わったのかうまくいかないことを確認しました。
grepで特定のディレクトリ以外を再帰的に処理する

grepで文字列の検索をしてた時にいらないディレクトリ配下の結果まで出てきてたのでメモ

## 手順

以下が文法
`grep オプション 検索したい文字列 対象とするパス --exclude-dir=対象外としたいディレクトリ or ファイルのパス`

では以下のようなディレクトリ構成のディレクトリがあったとして例。

```
sample
- hoge1/hoge.txt
- hoge2/hoge.txt
- hoge3/hoge.txt
- col1/hoge.txt
- col2/hoge.txt
- col3/hoge.txt
- poge/hoge.txt

// 各hoge.txt内に以下が記述されているとして
Linux

```


以上の場合で文字列「Linux」が含まれるディレクトリを探したい。ただしcol1~3のディレクトリ配下は検索対象外とする場合

```
// -lrオプションで「Linux」という文字列をルート以下全て検索対象とし、col1~3のディレクトリ以下は検索対象で検索
$ grep　-lr Linux ./* --exclude-dir=./col*
```
Node-RED で値を簡単に表示する

Node-REDヘデータをリアルタイムに飛ばし、受け取ったデータをいろいろ加工したりどこかへ転送したりする際、データがちゃんと受け取られているかを確認するために`debug`ノードにデータを入力することが多いかと思います。

ですが、デバッグのタブってどんどんデータがたまっていくので、今の値だけを見たい（リアルタイムに受信できているかを確認したい）時って、見づらくありませんか？
私は見づらいです。

なので、ある入力データの値を表示するだけの`function`ノードを作ってみました。

```js:funciton_node
node.status({text:"" + msg.payload.path.to.value});
return;
```
コードはこれだけです。

この`function`ノードに下記JSONデータが入力してみます。

```json:input.json
{
  "path": {
    "to": {
      "value": 77
    }
  }
}
```

ノードの表示が下記のようになります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/90361/e1243853-3d14-2b9d-f61b-270c94ea71c1.png)

本当は、テキスト（「some value」のところ）を変えたかったんですけど、どなたかご存知ではないですか？
(初心者向け)Swift3.0で初アプリ - iPhoneからNode-REDヘアクセス

Swift3.0を使って簡単なiPhoneアプリを作ってみます
[(初心者向け)Swift3.0で初アプリ - 外部ライブラリを使ってみる - CocoaPods, Carthage](https://qiita.com/egplnt/items/8099fa3c6dfd1db785a9)でAlamoFireを使えるようにしました
[(初心者向け)Swift3.0で初アプリ - iPhoneからMacbookへアクセス](https://qiita.com/egplnt/items/8099fa3c6dfd1db785a9)でiPhoneからMacbookへアクセスできるようにしました
次は、iPhoneから自分のMacbookで稼働しているNode-REDへアクセスできるようにします

#1. Node-REDを動かしておきます
- 自分のMacbookでNode-REDを起動しておきます。Node-REDを未インストールのかたはこちらをご参照ください → [Node-REDをインストールする](https://qiita.com/egplnt/items/cf79f49660f2df1c54cc)
- MacbookのFirefoxで`http://localhost:1880`を開きます

<img width="980" alt="スクリーンショット 2017-10-05 11.30.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/1f4039ac-cd83-29d7-c3ba-8ad77bc37ad3.png">



#2. フローを用意します
- 下記のフローをコピペします。Node-REDでのフローのコピペの手順はこちら → [Node-RED - フローをコピーする方法](https://qiita.com/egplnt/items/00bbda990c5babaeaa86)

```
[{"id":"9b870ffa.731eb8","type":"http in","z":"a10ea29a.e50e7","name":"","url":"/test10","method":"get","upload":false,"swaggerDoc":"","x":130,"y":60,"wires":[["cdbab1fe.9ce738","4ac383a.04b44fc"]]},{"id":"68c15cd3.abb544","type":"http response","z":"a10ea29a.e50e7","name":"","statusCode":"","headers":{},"x":570,"y":60,"wires":[]},{"id":"cdbab1fe.9ce738","type":"template","z":"a10ea29a.e50e7","name":"htmlを返す","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n    <body>\n        <h1>\n        祝！開通！！\n        </h1>\n    </body>\n</html>","output":"str","x":370,"y":60,"wires":[["68c15cd3.abb544"]]},{"id":"4ac383a.04b44fc","type":"debug","z":"a10ea29a.e50e7","name":"","active":true,"console":"false","complete":"false","x":310,"y":120,"wires":[]}]
```
<img width="864" alt="スクリーンショット 2017-10-05 12.22.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/2d2f415c-6acc-6482-6a11-9a9071244a1d.png">



#3. ローカルからアクセスして確認します
- Macbookのブラウザから下記をアクセスし、画面が表示されることを確認します

```
http://localhost:1880/test10
```
<img width="363" alt="スクリーンショット 2017-10-05 12.30.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/125842/66aa6ee4-bcdc-f421-bd49-ac9b43021cae.png">

- localhostの指定は、`127.0.0.1`でも構いません


#3. iPhoneからアクセスしてみます
- iPhoneのブラウザからアクセスしてみます

```
http://（ネットワーク名).local:1880/test10
```
もしくは

```
http://192.168.2.1:1880/test10
```
<img width="375" alt="IMG_0556.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/125842/d7e4300d-a2e6-ed0a-593d-ab361bc0d386.jpeg">



- 「祝！開通！！」が表示されれば開通です
[RxSwift] zipをconcurrencyに動作させてみる

RxSwiftにてzipを使うときに、Concurrencyに実行したい場合があります。
この時にどのようにsubscribeを行うべきなのかを考える材料として幾つかパターンを作ってみました。

前提として、zipするObservableを`.subscribeOn(何か)` する必要があります。

## CurrentThreadScheduler

<img width="1072" alt="Screen Shot 2017-10-05 at 11.59.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/8358/c602b780-fdab-20d1-d161-d882245073a6.png">

## SerialDispatchQueueScheduler

<img width="1072" alt="Screen Shot 2017-10-05 at 12.03.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/8358/0f6940b1-fe5f-8583-c718-de1a97ad6fe3.png">

## OperationQueueScheduler

<img width="1072" alt="Screen Shot 2017-10-05 at 11.58.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/8358/c9c3478d-0cdd-2adf-a94c-813dd7b6bacf.png">

## ConcurrentQueueScheduler

<img width="1072" alt="Screen Shot 2017-10-05 at 11.57.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/8358/f821913b-9c96-bd68-b7b9-df783c60317b.png">
2017-10-05 Python2 > regex | slice > AAA_20170228_030000_BBB.png というstringから 2017/02/28 03:00:00 というstringリストの取得 > 使わないグループは()をはずしていい | re.search() | join()+for | re.sub()での文字置換

```txt:動作環境
Xeon E5-2620 v4 (8コア) x 2
32GB RAM
CentOS 6.8 (64bit)
openmpi-1.8.x86_64 とその-devel
mpich.x86_64 3.1-5.el6とその-devel
gcc version 4.4.7 (とgfortran)
NCAR Command Language Version 6.3.0
WRF v3.7.1を使用。
Python 2.6.6 (r266:84292, Aug 18 2016, 15:13:37) 
Python 3.6.0 on virtualenv
GNU bash, version 4.1.2(1)-release (x86_64-redhat-linux-gnu)
```

前回の学習:
[@shiracamus さんのコメント](https://qiita.com/7of9/items/e01bee918f5f68878012#comment-1487bd8fd1032e1b7869)にてre.match()の方法を教えていただきました。

現在のreパッケージ使用のレベル: スライムにぼこられる程度


### 処理内容

- 入力: AAA_20170228_030000_BBB.png
- 出力(リスト): 
    - 2017/02/28
    - 03:00:00

### code

https://ideone.com/gske3H

```test_get_datetimelabel_171005.py
from __future__ import absolute_import
from __future__ import division
from __future__ import print_function
import re
import sys
import subprocess as sb
from datetime import datetime, timedelta

# on Python 2.6.6
# coding rule: PEP8


def get_filename_yyyymmddhhnn_regex(filename):
    # input(filename): e.g. AAA_20170228_030000_BBB.png
    #
    date_time = re.match(r'(.*_)(\d{8}_\d{6})(_.*)', filename).group(2)
    wrkgrp = re.match(r'(\d{4})(\d{2})(\d{2})', date_time).group
    #adate = wrkgrp(1) + "/" + wrkgrp(2) + "/" + wrkgrp(3)
    adate = "/".join([wrkgrp(1), wrkgrp(2), wrkgrp(3)])
    wrkgrp = re.match(r'(.*_)(\d{2})(\d{2})(\d{2})', date_time).group
    atime = wrkgrp(2) + ":" + wrkgrp(3) + ":" + wrkgrp(4)
    return adate, atime


def get_filename_yyyymmddhhnn_slice(filename):
    # input(filename): e.g. AAA_20170228_030000_BBB.png
    #
    DAY, TIME = [2, 3]
    grp = re.match(r'(.*_)(\d{8}_)(\d{6})(_.*)', filename).group

    wrk = grp(DAY)
    adate = "%s/%s/%s" % (wrk[:4], wrk[4:6], wrk[6:8])

    wrk = grp(TIME)
    atime = "%s:%s:%s" % (wrk[:2], wrk[2:4], wrk[4:6])
    return adate, atime

SRC = "AAA_20170228_030000_BBB.png"

res = get_filename_yyyymmddhhnn_regex(SRC)
print(" ".join(res))

res = get_filename_yyyymmddhhnn_slice(SRC)
print(" ".join(res))

```

```txt:run
2017/02/28 03:00:00
2017/02/28 03:00:00
```

### 備考

get_filename_yyyymmddhhnn_regex()
はadate代入部分やatime代入部分が読みにくい。

get_filename_yyyymmddhhnn_slice()
は読みやすくはあるが、位置指定は間違いやすいかもしれない。

### 教えていただいた事項

@shiracamus さんの[コメント](https://qiita.com/7of9/items/ab2ecf9697ae6d64b25e\#comment-d2328e30050c64149716)にて色々な実装方法を教えていただきました。

情報感謝です。

実際に使いながら身に付けていきたいと思います。
D3使用技巧

#合并数组，排序数组
```
    var result2=[{Date: "2017-09-27 22:03:00", Open: "111", High: "1111", Low: "1111"},{Date: "2017-09-27 22:02:00", Open: "27510", High: "27510", Low: "27504"}];
    var result=[{Date: "2017-09-27 23:03:00", Open: "111", High: "1111", Low: "1111"},{Date: "2017-09-27 23:02:00", Open: "27510", High: "27510", Low: "27504"}];
	var t=new Array();
	t.push(result);
	t.push(result2);
	var result=d3.merge(t);
	var nest=d3.nest().key(function(d){return d.Date}).sortKeys(d3.ascending).entries(result);
	var r=new Array();
	for(var i=0;i<nest.length;i++)
	{
	r.push(nest[i].values[0]);
	}
	console.log(r);
```
GASが動いていないぞ

# GASが動いていない？
昨日(2017/10/04)から今日(2017/10/05)まで,GASのAPIの一部が動いていないようだ。

追記:今日の昼飯後(2017/10/05 13:00ぐらい)に見ますと,　回復してました.
  　 Google先生ありがとうございます.


```js:sample.gs
DriveApp.getFolderById("フォルダーのID")　// こちら動かない.
DriveApp.getFileById("ファイルのID")      // こちらは動く.

var files = DriveApp.getFolders()        // こちはは動く.

while(files.hasNext()){                  // hasNext()が動いていない
  Logger.log("HOGE!!")
}

```

# 原因は？
プログラムのミスというよりは, APIが提供できていないミスのようです。
[Google  Analytics](http://did2memo.net/2014/05/16/google-analytics-server-no-response/)でも,　同様のエラーがあるみたい.

こんなケース初めてなので,　驚いております.


[StackOverFlow](https://stackoverflow.com/questions/18429232/failed-to-load-resource-when-using-realtime-api)では, "... and you can ignore the error."　というアドバイス.
"可能なら無視しろ" ,可能なら....   

# 起動時間の最大値を超えました
というエラーが出力される.
6分を超える処理は自動的に処理が中断される設計になっている.
今回はあきらかにAPIが動いていないので,
"APIが提供されていません."というエラーメッセージが適切な気がします.


# 6分も手持ちぶたさは嫌だ!
エラーが帰ってくるまで, 何もしないのはナンセンス!
そうとはいっても, 今回のケースではtry~catchで処理を中断することもできません.
GASにはLinuxのkillコマンドに相当するものもなさそうです.

アナログにファイルを一旦消して,　再度起動すれば処理が中断されていました.

結局のところ, Google先生が直してくれるまで待つしかないようですね.
iOS11で食らった新リジェクト２つ

OSのバージョンアップのたびにリジェクト項目が追加されるAppStoreの審査ですが、さっそくiOS11から追加されたであろう項目に２つもひっかかりました。

## 1.iTunes File Sharingは特に理由がなければオフにすべし

特に明確な理由なくオンになっているとレビューで「これ、何に使ってるの？」と聞かれます。明確な理由があればそれを正直に答えると通るかもしれませんが、少なくともいちどMetadata Rejected状態にはなります。

## 2.カメラロールへの保存を行う場合、Privacy - Photo Library Additions Usage Description (NSPhotoLibraryAddUsageDescription) が必須

前はPrivacy - Photo Library Usage Description (NSPhotoLibraryUsageDescription) だけ設定すればカメラロールの読み出し・保存の両方に対応できたのですが、iOS11からは保存する場合にNSPhotoLibraryAddUsageDescriptionの指定が必須になりました。
ちなみに、正確にはNSPhotoLibraryAddUsageDescriptionの未指定に対してリジェクト判定が下されるのではなくて、これが未指定だとiOS11端末でクラッシュするので "あなたのAppはクラッシュします" という内容でリジェクトされます。何のエラーでクラッシュしたのか言ってくれない（＝先方では分からない）ので、わりと焦ります。
もっともこれは、きちんとiOS11端末でテストすれば防げるので・・・まあ、気をつけましょうね。
アルゴリズムイントロダクション 練習問題1.2

#本記事の概要
[概要はこちら](https://qiita.com/miumiu0917/items/4073be8aaba2eea58c33)

第一回の記事を参照ください。
さっそく回答していきます。
（第一回の記事でも申し上げましたが、私の回答は正解ではないですし、間違ってる可能性大！です。）

#練習問題1.2
紙で計算したりする問題増えてきましたね！
プログラムも書いて回答していきます。

##1.2-1
*アプリケーション層でアルゴリズムが必要になる応用の例を挙げ、必要とされるアルゴリズムの機能を議論せよ。*

書籍では地図アプリの最短経路探索を紹介されていましたね。

**回答**
例えばオセロのゲームアプリを例に挙げてみます。
専門家ではないので、予想になりますが、
盤面の評価関数に基づき、n手先までの盤面を評価し、最も有利な手を選択するという手法を用いると思います。
n手先まで予想する場合、およそnの累乗のような形で実現し得る盤面が存在します。
（序盤や終盤はおける場所が限られているので底は小さいが、中盤は底が大きな値を取る。）
もちろんなるべく先の手順まで読んだほうが強くなりそうなので、nは大きな値を取りたいですが、
計算時間が増え過ぎるのはユーザー体験として良くないでしょう。
探索のアルゴリズムを効率的にすることにより、限られたリソースで最も良い手を選択することができると思います。（小並感）

##1.2-1
*同じ計算機上で挿入ソートとマージソートの実現を比較する。サイズ$n$の入力に対し、挿入ソートの実行には$8n^2$ステップかかり、一方、マージソートの実行には$64n\log_2 n$ステップかかるとする。挿入ソートがマージソートに優る$n$の値を調べよ。*

**回答**
これ普通に高校数学で方程式解けるんでしたっけ？(汗)
まあ、サイズを整数として扱えば計算していけばわかります。
調べよとのことなのでpythonに調べてもらいました。

```python:1.2-2.py
# -*- coding: utf-8 -*-
import math
import numpy as np
from matplotlib import pyplot


def main():
  x = np.linspace(1, 100, 100)
  y1 = 8 * (x ** 2)
  y2 = 64 * x * np.log2(x)
  pyplot.plot(x, y1, label="insertion sort")
  pyplot.plot(x, y2, label="merge sort")
  pyplot.legend()
  pyplot.xlabel("X-axis")
  pyplot.ylabel("Y-axis")
  filename = "1.2-2.png"
  pyplot.savefig(filename)


if __name__ == '__main__':
  main()
```

![1.2-2.png](https://qiita-image-store.s3.amazonaws.com/0/183295/6e3e6242-1d02-cdb5-a4b7-dd6b210874f4.png)

およそ43くらいですかね。
$n$はサイズなので整数として扱います。43前後の整数をいくつか実際に計算して調べましょう。
対話モードで検証します。compare関数で計算時間の小さい方のアルゴリズムを出力します。

```
>>> def insertion(x):
...     return 8 * (x ** 2)
...
>>> import numpy as np
>>> def merge(x):
...     return 64 * x * np.log2(x)
...
>>> def compare(x):
...     return 'merge' if merge(x) < insertion(x) else 'insertion'
...
>>> compare(42)
'insertion'
>>> compare(43)
'insertion'
>>> compare(44)
'merge'
>>> compare(45)
'merge'
```

上記の通り、サイズ43までは挿入ソートが優り、サイズ44以上はマージソートに軍配があがります。


##1.2-3
*同じ計算機上で、実行時間が$100n^2$のアルゴリズムが、実行時間が$2^n$のアルゴリズムより高速に実行できる最小の$n$の値を調べよ。*

**回答**

```python:1.2-3.py
# -*- coding: utf-8 -*-
import math
import numpy as np
from matplotlib import pyplot


def main():
  x = np.linspace(1, 100, 100)
  y1 = 100 * (x ** 2)
  y2 = np.power(2, x)
  pyplot.plot(x, y1, label="100n^2")
  pyplot.plot(x, y2, label="2^n")
  pyplot.legend()
  pyplot.xlabel("X-axis")
  pyplot.ylabel("Y-axis")
  pyplot.yscale("log") 
  filename = "1.2-3.png"
  pyplot.savefig(filename)


if __name__ == '__main__':
  main()
```

![1.2-3.png](https://qiita-image-store.s3.amazonaws.com/0/183295/2dd1b01f-d08f-aa3c-4bcd-41c04af98618.png)


y軸は対数目盛です。

だいたい13～14くらいかな。
これも調べてみましょう。

```scheme:1.2-3.sch
(define (min_n n)
    (if (< (y1 n) (y2 n))
        (- n 1)
        (min_n (+ n 1))))

(define (y1 n)
    (* 100 (expt n 2)))

(define (y2 n)
    (expt 2 n))

(print (min_n 1))
```

```
>14
```

唐突のscheme。
$2^n$の方が大きくなったときの一個前のnを返却するmin_n関数により14と求められました。
めでたしめでたし。

#次回
今回は超かんたんなプログラムだけど色々計算できて楽しかったです。
もうちょっと紙で計算してみればよかったのかな。
MITの教科書ということですが、MITの学生はどうしてるのかな。。

次回は章末問題やっていきますか！！
Railsマイグレーションのindex、foreign_keyの設定

migrationファイルを書いていて、index,foreign_keyの設定の仕方でハマったので、調べたことを共有できればと思います

## インデックス（index）
### インデックスの追加（add_index）
#### 基本的な書き方
```ruby
# add_index :対象のテーブル名, インデックス対象のカラム名    
  add_index :company, :company_name
```
#### 複合インデックスの場合
```ruby
# add_index :対象のテーブル名, インデックス対象のカラム名  
  add_index :company, [:company_code, :compnay_name]
```

#### オプション
  1. 別名をつける場合
  
```ruby
# add_index :対象のテーブル名, インデックス対象のカラム名, :name インデックスの別名    
  add_index :company, :company_name, name: :hogehuga_fk
```

### インデックスの削除（remove_index）
```ruby
# remove_index :対象のテーブル名, インデックス名  
  remove_index :company, name: :company_name_fk
```


## 外部キー（foreign_key）
### 外部キーの追加（add_foreign_key）
#### 基本的な書き方
```ruby
# add_foreign_key :対象のテーブル, :指定先のテーブル  
  add_foreign_key :companies, :accounts
```

#### 複合外部キーの場合
対応していなさそうなので、SQL書いて頑張るしかなさそうです…

```ruby
execute <<-SQL.gsub(/^\s+/, '')
  ALTER TABLE companies
  ADD company_type VARCHAR(255) NOT NULL DEFAULT 'Alliance',
  ADD CONSTRAINT companies_fk
  FOREIGN KEY (companies_division_id, company_type, company_id)
  REFERENCES company_divisions (id, company_type, company_id);
  SQL
```

#### オプション
  1. カラムの指定  

```ruby
# add_foreign_key :対象のテーブル, :指定先のテーブル, :column :対象のカラム名  
  add_foreign_key :companies, :accounts, column: :hoge_id
```  
  2. 別名をつける場合  

```ruby
 # add_foreign_key :対象のテーブル, :指定先のテーブル, name: :foreign_keyの別名  
   add_foreign_key :companies, :accounts,  name: :huga_id
```  

### 外部キーの削除（remove_foreign_key）
```ruby
# remove_foreign_key :対象のテーブル, :指定先のテーブル  
  remove_foreign_key :companies, :accounts
```
外部のSQL Serverに接続できないときの備忘録

#はじめに
この記事は外部からSQL Serverに接続しようとして失敗したときに、確認したことを備忘録としてまとめたものです。
環境はWindows7です

#そもそもpingが通らない
1. Windowsファイアウォール を開く
2. 詳細設定 を選択
3. 受信の規則 を選択
4. ファイルとプリンターの共有（エコー要求）を有効にする

#TCP/IPの設定
1. SQL Server構成マネージャー を開く
2. SQL Serverネットワークの構成 の SQLEXPRESSのプロトコル を選択
3. プロトコル名 TCP/IP の状態を有効にする
4. TCP/IPのプロパティ を開く
5. IPアドレスタブ の IPAll を以下の設定にする
    - TCPポート:1433(開放するポート番号)
    - TCP動的ポート：空欄

#ファイアウォールのポート設定
1. Windowsファイアウォール を開く
2. 詳細設定 を選択
3. 受信の規則 を選択
4. 新しい規則… を選択
5. 「規則の種類」：ポート を選択して次へ
6. 「プロトコルおよびポート」：TCP を選択、特定のローカルポートに1433（開放するポート番号）を入力して次へ
7. 「操作」：接続を許可する を選択して次へ
8. 「プロファイル」：必要な規則にチェックを付けて次へ（今回はドメイン・プライベート・パブリックの全てにチェック）
9. 「名前」：名前欄は適当に入力して完了押下
macOS+iTerm2+tmuxな環境でクリップボードを扱う(2017)


## 環境

* macOS 10.12.6 (Sierra)
* iTerm2 3.1.2
* tmux 2.5
* vim 8.0 (Homebrewでインストール `vim --version` で `+clipboard` となっているのを確認)

## iTerm2 の設定

Preferences を開き、 [General] タブの "Applications in terminal may access clipboard" のチェックをつける

![スクリーンショット 2017-10-05 11.31.02.png](https://qiita-image-store.s3.amazonaws.com/0/8219/fc3012e4-61c0-610f-ca5a-c0fe50ce7569.png "スクリーンショット 2017-10-05 11.31.02.png")


## reattach-to-user-namespace のインストール

tmux の中からクリップボードにアクセスするため、 

```bash
$ brew install reattach-to-user-namespace
```

## tmux の設定

`~/.tmux.conf` に以下の行を追加

```~/.tmux.conf
set-option -g default-command "reattach-to-user-namespace -l bash"
```

## vim の設定

`~/.vimrc`に以下の行を追加

```~/.vimrc
set clipboard=unnamed
```
LaradockのMySQLにSequel Proでアクセスできない

Sequel ProでLaradockのMySQLにアクセスしようとすると、
ホストへの接続はできるのだが、DBにアクセスしようとするとエラーになってしまうケースの話。

結論から言うとLaradockデフォルトのMySQLバージョンが原因だった。

下記にもあるようにLaradockのMySQLのバージョンはデフォルトだと8.0になっている。
http://laradock.io/documentation/#change-the-mysql-version

しかし下記のissueにもあるように、Sequel Proの最新バージョン(1.1.2)では8.0に対応していない。
https://github.com/sequelpro/sequelpro/issues/2699
(1.2から対応予定とのこと)

laradockの.envでMySQLのVERSIONを変更し、Dockerを再構築することでSequel Proでアクセスできるようになった。
```MYSQL_VERSION=5.7```
InstagramAPIから返ってくるエラーまとめ


## はじめに

InstagramのAPIを使用していると、
様々なエラーが返ってくるのでここにその内容をまとめておきます。
ちなみにエラーで返ってくるJSONは整形してます。

## ユーザー系

対象PATH: https://api.instagram.com/v1/users/{user-id}/?access_token=ACCESS-TOKEN
ドキュメント: https://www.instagram.com/developer/endpoints/users/#get_users


対象ユーザーの情報を使用したアクセストークンで参照できない時のエラー

### JSON

```
{
    "meta": {
        "code": 400,
        "error_type": "APINotAllowedError",
        "error_message": "you cannot view this resource"
    }
}
```

対象ユーザーが既に存在しない場合のエラー

### JSON

```
{
    "meta": {
        "code": 400,
        "error_type": "APINotFoundError",
        "error_message": "this user does not exist"
    }
}
```

## タグ系

対象PATH: https://api.instagram.com/v1/tags/{tag-name}?access_token=ACCESS-TOKEN
ドキュメント: https://www.instagram.com/developer/endpoints/tags/#get_tags_response

検索できないハッシュタグを叩こうとしたときに返ってくるエラー

- logodesign
- lolita
- footfetish
- like
- hentai
- booty
- thighs
- sexi
- seduction
- girlsofinstagram
- popular

など(2017/10/05)

### JSON

```
{
    "meta": {
        "code": 400,
        "error_type": "APINotAllowedError",
        "error_message": "This tag cannot be viewed"
    }
}
```


ちなみにこれらのタグはInstagramで検索しようとしてもエラーになる。

https://www.instagram.com/explore/tags/like/


![スクリーンショット 2017-10-05 11.19.00.png](https://qiita-image-store.s3.amazonaws.com/0/45536/78dea467-5657-0e79-4bb1-837542b89fe8.png "スクリーンショット 2017-10-05 11.19.00.png")


#### 検索できないハッシュタグについて

下記の記事におそらくタグが検索できないのは下記の理由からではないかという内容のものがあったので引用します。

https://gizmodo.com/10-normal-hashtags-that-instagram-bans-for-some-weird-r-1204373680

> Instagram is pretty strict when it comes to "violent, nude, partially nude, discriminatory, unlawful, infringing, hateful, pornographic or sexually suggestive" posts and is fairly clear in its Community Guidelines about what's right and what's not right.


Instagramは、「暴力的、ヌード、部分的にヌード、差別的、違法、侵害的、憎悪、嫌悪感、性的嗜好性」の投稿についてはかなり厳しい


> “We’ve stopped serving feeds (both in app and API) for some tags that were too generic and didn’t provide enough end-user value.”


「タグがあまりにも一般的でエンドユーザーの価値が十分でないタグについては、フィードの配信を停止しました（アプリとAPIの両方）。

ちなみにここで禁止されてるタグをおおよそ把握できるそうです。

http://thedatapack.com/banned-hashtags-instagram/

## 共通系


1時間あたりの使用制限を超えたときに返ってくるエラー

### JSON

```
{
    "error_type": "OAuthRateLimitException",
    "code": 429,
    "error_message": "You have exceeded the maximum number of requests per hour. You have performed a total of 5058 requests in the last hour. Our general maximum limit is set at 5000 requests per hour."
}
```

トークンが無効なときに返ってくるエラー

### JSON

```
{
    "meta": {
        "code": 400,
        "error_type": "OAuthAccessTokenException",
        "error_message": "The access_token provided is invalid."
    }
}
```

アプリがバンされたときに返ってくるエラー

### JSON

```
{
    "error_type": "OAuthException",
    "code": 400,
    "error_message": "Client Disabled"
}
```
若干まどろっこしい方法でWindows Subsystem For Linuxのターミナルログ（Transcript）を取る

若干まどろっこしいです。
（記事作成時点のWSLではscriptコマンドが使えないため…。）

# 1. PowerShellを起動する。
起動します。

# 2. 以下コマンドでbashを起動する。
```PowerShell
Start-Transcript; bash; Stop-Transcript
```

# 以上。
以上です。
AWS Powershell で MFA必須のAssumeRoleを使う

いまどき、AssumeRoleにMFA必須は当然ですよね。
awscliがMFA対応しているのは有名ですが、AWS PowershellもMFA対応していました。

プロファイルを保存してデフォルト設定します。

```Powershell
Set-AWSCredential -StoreAs Default -AccessKey <アクセスキー> -SecretKey <シークレットキー>
Set-AWSCredential -StoreAs AdminRole -SourceProfile Default -RoleArn <RoleARN> -MfaSerial <MFASerial>
Initialize-AWSDefaultConfiguration -ProfileName AdminRole -Region ap-northeast-1
```

この状態で `Get-EC2Instance` とか実行するとMFA Codeを求められるので入力してください。
保存したプロファイルは毎回入力する必要はありません。
プロファイル名やリージョンは好きなものを指定してください。
アクセスキー、シークレットキー、RoleARN、MFASerialはIAMから指定された値です。
有効期間(1時間?)を過ぎるか、プロセス終了まで有効です。
子プロセスには引き継がれるようですが、兄弟プロセスには引き継がれないようです。
VSCodeの統合シェルでもOKでした。

ただし、PowerShell ISEだとMFA Codeを入力する間もなくエラーになりました。
試行錯誤したところ、下記のようにすれば大丈夫なようです。

```Powershell
$targetrole = Get-AWSCredential -ProfileName AdminRole
$role = Use-STSRole -RoleArn $targetrole.RoleArn -RoleSessionName $targetrole.RoleSessionName -ProfileName Default -SerialNumber $targetrole.Options.MfaSerialNumber -TokenCode (Read-Host "MFA Code")
Get-EC2Instance -Credential $role.Credentials
```

取得したクレデンシャルをデフォルト指定する方法をご存知の方は教えてください。
Jupyter notebookでpandasのDataFrameを綺麗に表示させる方法

```py3
df = pd.DataFrame(array_like)
df
```

と基本はcell末尾に記述すればいいが、

- 同cell内で2つ以上表示させたい
- `if __name__ == "__main__"`　や `for`　内で表示させたい

などの理由で上記の表示方法が使えないときがある。
print文だときれいに表示されない。

そのときに以下の方法が役立つ。

(2018/5/25 更新)

`IPython.display` だと毎回、記述しなければいけないが、 以下のものを最初に1度実行すれば、 表示したい変数を書くだけで表示されるようになる。

```py3
from IPython.core.interactiveshell import InteractiveShell
InteractiveShell.ast_node_interactivity = "all"
```

なお、 jupyte_notebook_config.py に、デフォルトで設定する方法があるらしく、 この記述すら、毎回書かなくて済むらしい。

以下、 display を用いた方法。毎回、記述する必要がある。

```py3
from IPython.display import display
display(df)
```

~~使い方はprint文と同じようにdisplayの引数に渡すだけ。~~

~~なお、display文を含むスクリプトをコマンドラインから実行してもエラーは出ない模様。（おそらくprint文として扱われる）~~

ipynbを保存すると対応するpyスクリプトを自動で生成してくれる方法があるのだが（ググってください）、上記の方法を組み合わせればipynbをモジュールやコマンドラインツールとして再利用しやすく、かつjupyter内ではきれいに表示するという使い方ができる。
シンボリックリンクの設定方法

## はじめに

毎回シンボリックリンクのはりかた忘れて→検索みたいな流れになってていい加減まとめておく。
シンボリックリンクとは[こちら](http://e-words.jp/w/%E3%82%B7%E3%83%B3%E3%83%9C%E3%83%AA%E3%83%83%E3%82%AF%E3%83%AA%E3%83%B3%E3%82%AF.html)を参照ください。

## 手順

以下が基本的なシンボリックリンクのはりかた

```
$ ln -sf 現在存在しているファイルまでのパス リンクさせたい場所
```

`dotfiles`などの時の例

`/Users/username/dotfiles/vim/.vimrc`のような感じであった時に、vimの設定を反映させるためにルートディレクトリに`.vimrc`のシンボリックリンクをはりたいとする。
その場合以下のようにします

```
$ ln -sf ~/dotfiles/vim/.vimrc ~/.vimrc
```

### リンクを解除したい時

```
$ unlink シンボリックリンクのパス

// 上記例だと
$ unlink ~/.vimrc
```
xcodebuild コマンドで.appが作られるパスを取る

# xcodebuild コマンドで.appが作られるパスを取る

xcodebuildコマンドには `-showBuildSettings` というオプションがあります。
ビルド時の環境変数が出力されます。

```sh
xcodebuild -workspace myproject.xcworkspace -scheme MyApp -showBuildSettings
```

ここからパスだけ取り出すには次のように

```
xcodebuild -workspace myproject.xcworkspace -scheme MyApp -showBuildSettings | grep -m 1 "CONFIGURATION_BUILD_DIR" | grep -oEi "\/.*"
```

# 参考

https://stackoverflow.com/questions/13805378/determine-xcode-derived-data-location-from-command-line
【PHP】忘れてしまう日付の比較関連【個人メモ】

### はじめに
これは個人的なメモです。
毎回調べながら書いているのでいっそのこと・・・調べていることを書いておこうという話。
日付の比較には個人的にDateTimeクラスを使用している。
### DateTime とは？
```
DateTime クラス 
(PHP 5 >= 5.2.0, PHP 7)
日付と時刻をあらわします。
```
[PHP DateTime](http://php.net/manual/ja/class.datetime.php)
### 文字列の時でも大丈夫か？
大丈夫！

```
$sample = array(
        'date_sample1'  => '20170101',
        'date_sample2'  => '20180101'
    );
    

$date_1 = new Datetime($sample['date_sample1']);
$date_2 = new Datetime($sample['date_sample2']);
print_r($date_1);
print_r($date_2);
```
以下は結果

```
DateTime Object
(
    [date] => 2017-01-01 00:00:00.000000
    [timezone_type] => 3
    [timezone] => UTC
)
DateTime Object
(
    [date] => 2018-01-01 00:00:00.000000
    [timezone_type] => 3
    [timezone] => UTC
)
```

### 比較は関数使え

```
// 比較
$diff = $date_1->diff($date_2);
print_r($diff);
```
結果

```
DateInterval Object
(
    [y] => 1
    [m] => 0
    [d] => 0
    [h] => 0
    [i] => 0
    [s] => 0
    [weekday] => 0
    [weekday_behavior] => 0
    [first_last_day_of] => 0
    [invert] => 0
    [days] => 365
    [special_type] => 0
    [special_amount] => 0
    [have_weekday_relative] => 0
    [have_special_relative] => 0
)
```

#### diff で比較した際、差分の日付の取得の仕方
```
$diff = $date_1->diff($date_2)->format('%R%a');
```
`%R%a` を使用すると、正負の値が取得できる。

```
$diff = intval($date_1->diff($date_s)->format('%R%a'));
```
で取得する際に、`intval` でint型にすればなおさら取得しやすい！

### 比較はIF文でも可能
```
// if 文での比較
if($date_1 > $date_2) {
    print('date_1の方が大きい');
}
else {
    print('date_2の方が大きい');
}
```
結果

```
date_2の方が大きい
```
Firefox 57のデスクトップアイコンを追加する

爆速なFirefox57をubuntuにインストしたのですが、起動アイコンが無かったので作成しました

以下のpathに `firefox.desktop` を追加する。
＄HOME/.local/share/applications

以下 firefox.desktop の中身。

```
[Desktop Entry]
Type=Application
Exec=/opt/firefox/firefox
Name=Firefox
Terminal=false
```
シェル | for 文を文字列で回す時はクォートしない

# クォートした場合

文字列全体が1要素として扱われてしまう。

```bash
for text in 'a b c'; do
  echo $text
done
```

```
a b c
```

# クォートしない場合

スペース区切りで各要素が扱われる。

```bash
for text in a b c; do
  echo $text
done
```

```
a
b
c
```

# クォートで分割する場合

```bash
for text in 'a b' 'c'; do
  echo $text
done
```

```
a b
c
```

# 環境

- GNU bash, version 4.4.0(1)-release (x86_64-apple-darwin15.6.0)








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Promiseの（bluebridの）配列系ループの時間計測メモ

##概要
Promiseの（bluebridの）配列系ループの時間計測メモ

```js:promise_looptest.js
const Promise = require('bluebird');

const array = [];
for(let i = 0; i < 10000000; ++i){
    array.push(i);
}

console.time('map');
let count = 0;
return Promise.map(array, (a) => {
    ++count;
    return a;
})
.then(() => {
    console.timeEnd('map');
    console.log(count);
    count = 0;
    console.time('each');
    return Promise.each(array, (a) => {
        ++count;
        return a;
    });
})
.then(() => {
    console.timeEnd('each');
    console.log(count);
    count = 0;
    console.time('reduce');
    return Promise.reduce(array, (promise, a) => {
        ++count;
        return a;
    }, 0);
})
.then(() => {
    console.timeEnd('reduce');
    console.log(count);
    count = 0;
    console.time('all');
    return Promise.all(array.map((a) => {
        ++count;
        return a;
    }))
})
.then(() => {
    console.timeEnd('all');
    console.log(count);
})
```
###結果
```
map: 1300.333ms
10000000
each: 1641.458ms
10000000
reduce: 1466.863ms
10000000
all: 5150.526ms
10000000
```

mapが微妙に早い。
誤差のようなきもするけど、何回かしてみてもmapが
一番早い。

別の角度から

```js:promise_looptest2.js
const Promise = require('bluebird');

const array = [];
for(let i = 0; i < 10000000; ++i){
    array.push(i);
}

console.time('map');
let count = 0;
return Promise.map(array, (a) => {
    return Promise.resolve()
    .then(() => {
        ++count;
        return a;
    });
})
.then(() => {
    console.timeEnd('map');
    console.log(count);
    count = 0;
    console.time('each');
    return Promise.each(array, (a) => {
        return Promise.resolve()
        .then(() => {
            ++count;
            return a;
        });
    });
})
.then(() => {
    console.timeEnd('each');
    console.log(count);
    count = 0;
    console.time('reduce');
    return Promise.reduce(array, (promise, a) => {
        return Promise.resolve()
        .then(() => {
            ++count;
            return a;
        });
    }, 0);
})
.then(() => {
    console.timeEnd('reduce');
    console.log(count);
    count = 0;
    console.time('all');
    return Promise.all(array.map((a) => {
        return Promise.resolve()
        .then(() => {
            ++count;
            return a;
        });
    }))
})
.then(() => {
    console.timeEnd('all');
    console.log(count);
})
```

とPromiseを返すようにしてみる。

###結果
mapでout of memory

```
<--- Last few GCs --->

   14801 ms: Mark-sweep 1401.0 (1440.9) -> 1401.0 (1440.9) MB, 1042.0 / 0.0 ms (+ 0.7 ms in 2 steps since start of marking, biggest step 0.6 ms) [allocation failure] [scavenge might not succeed].
   16553 ms: Mark-sweep 1401.0 (1440.9) -> 1401.0 (1440.9) MB, 1751.2 / 0.0 ms [allocation failure] [scavenge might not succeed].


<--- JS stacktrace --->
Cannot get stack trace in GC.
FATAL ERROR: MarkCompactCollector: semi-space copy, fallback in old gen Allocation failed - JavaScript heap out of memory
```

###現時点での結果
何がダメでout of memoryかの原因は調査予定。
挙動を見ていた感じだと
全部のPromiseを展開するまでmapはまっているように見えた。
なぜ待つのかを調査してみたい。
Android(java)のスレッド処理の覚え書き

# はじめに
Androidの実装においてスレッド処理の方法が沢山あるので調べてみました。
それぞれの概念を簡単にまとめました。

# ThreadとRunnnableの違い
TheadとRunnableはJavaが提供する機能  
スレッドで動作するメソッドを作るには_スレッド化したいクラスにThreadクラスを継承させる_必要がある。  

しかし既に他のクラスを継承しているクラスがあった場合はTheadクラスを継承できない。
なので代わりにRunnableをimplementsして使う。  

# Handler(とLooper)
Handler(とLooper)はAndroidが提供するスレッド間のやり取りを行う機能(スレッド機能ではない)
AndroidのUIはメインスレッド以外のスレッドからアクセスされると例外が発生して落ちる。
別スレッドからメインスレッドへの橋渡しをするためにHandlerを使用する事が出来る。

別スレッドから別スレッドに橋渡しをするためにはHandlerに加えてLooperが必要になる。  
メインスレッドに橋渡しするのにLooperは必要ない、何故ならメインスレッドは既に内部でLooperを持っているため。  
![android-thread-looper-handler.png](https://qiita-image-store.s3.amazonaws.com/0/112253/89b4b060-9aae-a7a3-50e6-3c43ece30e18.png)

# HandlerTask
HandlerTaskはAndroidが提供する機能、JavaのTheadを拡張したクラス。
生成時にLooperを自動的に用意してくれる。
Handlerを使ってスレッド間でデータのやり取りが出来る様になる。

# AsyncTask
AsyncTaskはAndroidが提供する機能
別タスクでUIに対する処理を行うことができる。
最大の特徴は「非同期処理中であってもメインスレッドでの処理が可能」なところ(Handlerを使わなくてよいという事)
但し短い時間で完了する処理しか使えない。


参照： [Androidのバックグラウンドを使いこなす Thread, Looper, Handler][1]

[1]: https://academy.realm.io/jp/posts/android-thread-looper-handler/
STM32F103 + Arduino_STM32 で Sleep

stm32sleep ライブラリを使います。

https://github.com/chacal/stm32sleep

# インストール

Latest commit f672b16  on 20 Apr 2016

を使いました。

ダウンロード　or Clone して、Arduino フォルダの libraries の中に stm32sleep というフォルダを作り展開します。

# 使いかた

## タイマーで復帰する

github にあるサンプルプログラムを動かすと、stop ないし standby に入って、タイマーで 5 秒で復帰するようになります。

しかしながらサンプルは最低限の記述なので、外部から動いているのだか動いてないのだかあまり良くわかりません。

RobotDyn STM32 Dev.Board ( ≒ BluePill ≒ Maple Mini ) を使って、もうちょっとわかりやすいプログラムに直しました。

```

#include <STM32Sleep.h>
#include <RTClock.h>

RTClock rt(RTCSEL_LSE);
long int alarmDelay = 5;
int i;
#define LED  PC13

void setup() {
  Serial.begin(9600);
  delay(100);
  // We have just started or woken up from sleep! System clock is set to 72MHz HSE.
  pinMode(LED,OUTPUT);
  for ( i=0;i<10;i++){
  digitalWrite(LED,HIGH);
  delay(100);
  digitalWrite(LED,LOW);
  delay(100);
  }
  Serial.println("start ...");
  delay(100);  
  sleepAndWakeUp(STANDBY, &rt, alarmDelay);  
  Serial.println("Never came here");
}

void loop() { 
  
  // Never came here!
  Serial.println("looping");
  delay(100);  
}  


```

シリアルで状況を送ってますが、 PA9/PA10 ピンにUSBシリアルアダプタをつなげ、それで書込／通信をしています。
オンボードのUSBを使った場合はどうなるかは未検証です。

## 外部からの信号で復帰する

```

#include <STM32Sleep.h>
#include <RTClock.h>

// #include <series/rcc.h>

// RTClock rt(RTCSEL_LSE);
// long int alarmDelay = 5;
int i;
#define LED  PC13
#define BOARD_BUTTON_PIN PB9

void setup() {
  Serial.begin(9600);
  delay(100);
  // We have just started or woken up from sleep! System clock is set to 72MHz HSE.
  pinMode(LED,OUTPUT);
  pinMode(BOARD_BUTTON_PIN, INPUT_PULLUP);
  for ( i=0;i<5;i++){
    digitalWrite(LED,HIGH);
    delay(40);
    digitalWrite(LED,LOW);
    delay(40);
  }
  Serial.println("start ...");
  attachInterrupt(BOARD_BUTTON_PIN, action, CHANGE);
  delay(100);  
  Serial.println("Never came here");
}

void loop() { 
//  sleepAndWakeUp(STANDBY, &rt, alarmDelay);  
  goToSleep(STANDBY);
  switchToPLLwithHSE(RCC_PLLMUL_9);
  delay(100);  
  Serial.println("looping");
  for ( i=0;i<5;i++){
    digitalWrite(LED,HIGH);
    delay(40);
    digitalWrite(LED,LOW);
    delay(40);
  }
  delay(60);  
}  
  
void action()
{
}

```

  switchToPLLwithHSE(RCC_PLLMUL_9);

が無いと、復帰後の動作がナメクジのように遅くなります。そこでこれを使うとクロックが復帰できるはずですが・・・

クロックがやっぱり遅いです。

調べてみると、STM32Sleep.cpp の中に書かれているコードが間違っていたみたいなので、

```

  rcc_clk_init(RCC_CLKSRC_PLL, RCC_PLLSRC_HSE, RCC_PLLMUL_2);

```

を

```

  rcc_clk_init(RCC_CLKSRC_PLL, RCC_PLLSRC_HSE, pllMultiplier);

```

に直すとうまくいきました。



# 参考資料

- このライブラリの他にもこんなのもみつけましたが、まだ試していません；
https://gist.github.com/tomtor/3dff8dd2f2514912aacbab1b1652be76

- libmapleのrccについてのドキュメントはこちら
http://docs.leaflabs.com/static.leaflabs.com/pub/leaflabs/maple-docs/0.0.12/libmaple/api/rcc.html
Ruby の TracePoint を使ってメソッドやブロックの戻り値をチェックする

TracePoint では Ruby の処理におけるいろいろな イベント を受け取ることが出来ます。

### 取得できるイベント一覧

|     イベント   |      説明               |
|:--------------|:-----------------------|
| :line         |          式の評価         |
| :class        | クラス定義、特異クラス定義、モジュール定義への突入|
| :end          | クラス定義、特異クラス定義、モジュール定義の終了|
| :call         | Ruby で記述されたメソッドの呼び出し|
| :return       | Ruby で記述されたメソッド呼び出しからのリターン|
| :c_call       | Cで記述されたメソッドの呼び出し |
| :c_return     | Cで記述されたメソッド呼び出しからのリターン |
| :raise        |     例外の発生        |
| :b_call       |     ブロックの開始   |
| :b_return     |    ブロックの終了    |
| :thread_begin |    スレッドの開始    |
| :thread_end   |    スレッドの終了    |
| :fiber_switch | ファイバーの切り替え |

このイベントの中で以下の3つは `return_value` で戻り値を取得することが出来ます。（他のイベントで呼び出すと例外が発生します）

* `return`
* `c_return`
* `b_return`

サンプルコードとしてはこんな感じです。（ `c_return` はちょっと扱いにくいので省略してます ）

```rb
TracePoint.trace(:return, :b_return) do |tp|
  p [tp.event, tp.return_value]
end

def say
  'hi'
end

say
(-> { 'piyo' }).call
```

実行結果

```
[:return, "hi"]
[:b_return, "piyo"]
```

# 追記

もう少しまとめたものを書きました。

[Ruby の TracePoint について調べてみた](https://qiita.com/siman/items/9426ff6c113247088f7e)

## 参考サイト

https://docs.ruby-lang.org/ja/latest/class/TracePoint.html
Circle CIを使ってGoogle Apps Scriptをデプロイする

# 背景
職場や趣味でGoogle Apps Scriptを使って開発をしています。
[Apps Script による高度な開発プロセス](https://developers-jp.googleblog.com/2016/01/apps-script.html)という記事を見て、試してみたいなと思いつつもタイミングがなくズルズルと時間だけが過ぎていましたが、コードを共有する機会があり、どうせならGit管理してみよう、自動でデプロイしてみたいとチャレンジしてみました。

# ディレクトリ構造

```
.
┣━ .gitignore
┃
┣━ .circleci
┃     ┗ config.yml
┗━ src
      ┗ code.js
```

※ `.gapps`及び `gapps.config.json` は認証情報を含むため、 `.gitignore` に追加し、Git管理に含めません

# Circle CIの設定

## Environment Variablesの設定

- 該当のProject > Project settings > Environment Variables に `.gapps`及び `gapps.config.json` の内容を入力します。

<img width="923" alt="スクリーンショット 2017-10-05 9.11.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/53215/51e1d62d-fa96-cc5e-0c05-cab8119fde3d.png">

## 設定ファイルの作成
各設定項目は、[公式ドキュメント](https://circleci.com/docs/2.0/configuration-reference/)を参照してください。

```yaml:config.yml
version: 2
jobs:
  build:
    docker:
      - image: circleci/node:7.10.0

    branches:
      only:
        - master

    steps:
      - checkout
      - run:
          name: get package list
          command: sudo apt-get update
      - run:
          name: install gapps
          command: sudo npm install -g node-google-apps-script
      - run:
          name: create ".gapps"
          command: echo ${GAPPS_AUTH} > ~/.gapps
      - run:
          name: create "gapps.config.json"
          command: echo ${GAPPS_CONFIG} > gapps.config.json
      - deploy:
          name: deploy master to Google Apps Script
          command: gapps upload
```

## 設定ファイルのデバッグ
- Circle CIはローカル環境で動かすことができるので、効率的にデバッグ出来ます。
    - 詳細については[公式ドキュメント](https://circleci.com/docs/2.0/local-jobs/)を参照してください。

```
$ circleci config validate -c .circleci/config.yml 
  config file is valid

$ circleci build
====>> Spin up Environment
・・・
====>> Checkout code
・・・
====>> get package list
・・・
====>> install gapps
・・・
====>> create ".gapps"
・・・
====>> create "gapps.config.json"
・・・
====>> deploy master to Google Apps Script
gapps upload
Pushing back up to Google Drive...
The latest files were successfully uploaded to your Apps Script project.
Success!
```

# 参考
Circle CI以外のツールを使う場合はこちらが参考になると思います

## bitbucket pipelines
[Google App ScriptへCI経由でデプロイする](https://qiita.com/abeyuya/items/f97f4d6870ebb154b553)

## GitLab CI
[GitLab CIを使ってGoogle Apps Scriptを自動デプロイ](https://qiita.com/kterada0509/items/b242cf5d11bbd8dabb47)
MicrosoftActionPackSubscription(MAPS) のVisualStudioProfessionalの利用規約の落とし穴メモ

MAPSのVisualStudioの利用条件について調べていたのでメモついでに投稿しておきます。

#MicrosoftActionPackSubscription とは
マイクロソフトの製品を開発目的で安価に使用できるサービスで、具体的には[MAPSの概要](https://partner.microsoft.com/ja-jp/membership/action-pack)にて、次の様に書かれています。

##クラウド ビジネスを前進させるアクション パック

アクションパックを購入し、クラウド特典を活用すると、ネットワークメンバー1よりおよそ2倍のクラウドビジネスを扱うことができます。年間42,000円の年会費で、マイクロソフトの充実した特典を活用し、貴社のビジネスをスピードアップしてください その他の特典:
世界的な開発者ツールを使用して、iOS、アンドロイド、Linux、および Windows のお客様のアプリケーションおよびソリューションの作成が可能

- Windows 10 Enterprise(アップグレード) のライセンス、3 つの Visual Studio Professional ライセンス、追加コストのかからない Visual Studio チームのサービス アカウントの提供
- Office 365 (E3) が最大10シート、さらに5シートのEnterprise Mobility SuiteとMicrosoft Dynamics CRM Online Professional2の社内使用ライセンスの利用 
- マイクロソフト Azure クレジット月額 100 ドルを受け取る

##安価で色々と使えるので便利！

Visual Studio Professional のライセンスなんて有難いと思うかもしれませんが、ライセンスはどうなっているのでしょうか？見てみます。

#MAPSにて提供されているVisualStudioProfessional のライセンスの扱い

[Visual StudioとMSDNのライセンス ホワイトペーパー ](https://www.microsoft.com/ja-jp/download/details.aspx?id=13350)
のP13 にて、次の様に表記されています。

##マイクロソフト パートナー ネットワーク (MPN) を通した Visual Studio サブスクリプション 

マイクロソフト パートナー ネットワークを通じて提供される Visual Studio サブスクリプションは、コンサルティン グ サービス、パッケージ アプリケーションの特定顧客へのカスタマイズ、特定顧客のカスタム アプリケーションの 構築など、報酬として直接的な売上を創出する活動に使うことはできません。 
例: ある外部の受託業者が、顧客企業の開発チームで一時的に作業に加わることになっています。その外部の受託 業者は Visual Studio Enterprise with MSDN をマイクロソフト パートナー ネットワークの特典として所有していま す。Visual Studio サブスクリプションは MPN 特典として取得したためコンサルティング サービスに利用できず、 次のいずれかの対応が必要です。 

- 受託業者が Visual Studio サブスクリプションをこのサービス提供のために購入します。 
- 顧客企業の開発チームが購入した Visual Studio サブスクリプションのうち、予備の (割り当てられていない) サブスクリプション (使用予定のソフトウェアを含む十分なレベルのサブスクリプション) の 1 つを、契約の期 間中だけ受託業者に割り当てます

##つまりどういうこと？

自社で製品を出す場合は使うことができるが、例えばA社から請け負った開発とかでは特定顧客のアプリケーションの開発として扱われる為、使えないということです。下請けには厳しい。（パートナーネットワーク経由で、問い合わせました。）

#で、何が言いたかったの？

結構ライセンスとか意識してないかもしれませんが、突っ込まれるとあかん場合があるので、ライセンスに関してはちゃんと資料読んでおきましょうって話です。

#他の方法

会社設立して5年以内であれば[Microsoft BizSpark](https://www.microsoft.com/ja-jp/startups/bizSpark.aspx) という手もあるよね？とか。

以上。あんまライセンス周り読み切れてないところもあるかもしれないので、突っ込み等ありましたらどしどし。

#関連した話
- [Visual Studio Communityを受託開発で使うのは要注意](https://qiita.com/unarist/items/62340fdc9ee813c125b1)
- [VIsual Studio Communityの利用条件など](https://qiita.com/matarillo/items/07005cc401ed793cb358)
- [無償とは限らないソフトウェア](https://qiita.com/raccy/items/c1e19ed7b88a78b24852)
MacbookPro2016を修理した

2ヶ月目の所感は[こちら](https://qiita.com/SYABU555/items/a19b9788df2905455268)
今回は晴れて入院を果たしたMacbookProの感想をば。

# スペック

とりあえず基本情報のシェア

* Macbook Pro 2016
* 15inch
* 2.7 GHz Intel Core i7 (Quad core)
* 16GB Memory
* 512GB SSD
* Intel HD Graphics 530 1536 MB
* USキーボード
* 整備済み品

# 修理結果
## 日数
5日でかえってきました。

## 変わったとこ
キーボード取り替えだったからか、デザインが多少変わってました。
Afterのが好き。

Before
![20170929_213205.jpg](https://qiita-image-store.s3.amazonaws.com/0/85214/f5f989ab-c8ef-6aea-e6ae-f562fb2cd83d.jpeg)
After
![Screen Shot 2017-10-09 at 19.00.29.png](https://qiita-image-store.s3.amazonaws.com/0/85214/a78c4e9f-a21a-5dcf-9c8c-696501635afe.png)



# 修理経緯

## なぜ

一部のキーボードの押した感じがなくなったから。
私の場合はカーソルキーの左から始まり、
「あれ？なんかおかしいな」と思っているうちに
カーソルキーの上下キーに感染し、？キーまで拡大したところで修理を決断。

タイプ感がないというだけで効いていたのですが、
左キーの効きが怪しくなったのが一番大きいかも。

ネット検索すると、同じ症状の人が結構いらっしゃるようです。

## Genius BarはGeniusなのか

**わかりません。**
ただ、対応についてはExcellentでした。

初めての利用だったわけです。
予約が必要と公式HPにありましたが、不要でした。
ただ予約ない場合はその場で予約が必要で、２時間ほど待ちました。
長いようですが、そこらへんブラついてたら大丈夫でした。

対応は以下。計20分くらいだったかな？

1. キーボードをまず掃除するとのこと（その場で）
2. その後、キーボード外して掃除してみるとのこと（その場で）
3. それでもダメなら、修理にだす手続きをする
4. 晴れて入院（キーボードとバッテリーの交換だそう）

MacbookProは自力での解体は難しいので、
その場で掃除をまずしてもらえるのは有難かったです。

## 修理期間

土日も含んで３～５日、というのがアナウンスでした。
実際はまだ受け取ってないのでわかりません。

## 代替え機はなし

毎日仕事に使っていたMacですが、
Appleから代替え機は用意してもらえません。

そのため自分でサブPCを引っ張り出す必要があります。
土日を含んだ３～５日とはいえ、少々辛いものがありますね。

## 料金

普通にやると計５万ちょいみたいですが、
AppleCate+に入っていたのが効いているのか、
購入から１年未満なのか効いてるのか、無料でした。

# 総評

いろいろすっとばして総評を。
これからMacbookPro2016を購入される方の参考になれば。

* やっぱりキーボードのタイプ感は最高
* んでもって早い！サクサクだ！！
* そしてタッチバーは不要
* 充電がUSB Type-Cは良い
* 周辺機器をそろえる必要あるが、使い始めるとType-Cは便利
* 電池持ちも悪い
* 購入して半年でキーボード故障ってどうなの（そしてわりと有名っぽい）
* あと左右の吸気口に埃がたまりやすいので、わりと掃除が必要そう

いまサブPCからいろいろしているわけですが、
Windowsというのもあり、不便が目立つ。
ぐおーー早く退院してくれーー
jsdoでMK-80 その6

#概要
jsdoでMK-80やってみた。
ハンドアセンブルを説明してみる。

#準備する物
インテル8080命令セット
https://qiita.com/ohisama@github/items/c66231c3367227b31cbc
インテル8080命令コード表
https://qiita.com/ohisama@github/items/d59fa40ded943fe67f7e
鉛筆、メモ紙

#お題
LEDに00000000と表示する。

#作成するプログラム
口で言うと

```
アキュムレータに0を転送して、83ｆ4番地から83ｆ7番地にセーブして、LED表示サブルーチンを呼ぶ。停止。
```

#アセンブラで書くと

```
アキュムレータに0を転送して、

MVI A, 00H

83ｆ4番地から83ｆ7番地にセーブして、

STA 83F4H
STA 83F5H
STA 83F6H
STA 83F7H

LED表示サブルーチンを呼ぶ。

CALL LEDSEGDISP

停止。

HLT

```

#バイナリーにしてみる。
コード表から拾います。
コードの番地を加算します。

```
8200  3E 00
8202  32 F4 83  ; 番地は、2バイトで順番が逆
8205  32 F5 83
8208  32 F6 83
820B  32 F7 83
820E  CD C0 01　　；LED表示サブルーチンは、01ｃ0番地から
8211  76
```

#打ち込み
このページを開きます。
http://jsdo.it/ohisama1/0CJb

```
8 2 0 0 adrset 
3 E writeinc 0 0  writeinc
3 2 writeinc F 4 writeinc 8 3 writeinc 
3 2 writeinc F 5 writeinc 8 3 writeinc 
3 2 writeinc F 6 writeinc 8 3 writeinc 
3 2 writeinc F 7 writeinc 8 3 writeinc 
C D writeinc C 0 writeinc 0 1 writeinc 
7 6 writeinc 

```

#実行

```
8 2 0 0 adrset run
```

以上
楽天のショップ内検索窓

文字コードはEUC-JP（それ以外のコードにすると検索結果が文字化けします）

オリジナルボタンなどを使わないときは、下記のデフォルトボタンの時を使用

```html:html
<form method="get" action="http://esearch.rakuten.co.jp/rms/sd/esearch/vc" target="_top"　accept-charset="euc-jp">
<input type="hidden" name="sv" value="6">
<input type="hidden" name="sid" value="●店舗ID●">
<input type="hidden" name="su" value="●店舗URL●">
<input type="hidden" name="sn" value="ショップ名称">
<input type="text" name="sitem" class="formtext">
<input type="hidden" name="f" value="A">

<!--▽画像ボタンの時-->
<p class="search-btn"><input type="image" alt="検索" width="30" height="25" src="img/header_btn_search.jpg" /></p>

<!--▽デフォルトボタンの時-->
<!--<input type="submit" value="検索" onclick="document.charset='EUC-JP'; document.rakutenSubmit.submit();" />-->
</form>
```
楽天メイン幅を固定する方法

デザイン設定 → 共通説明文（大）に下記ソースを記載
（楽天のスペーサーを利用）

例：800px幅で固定させたい場合

```html:html
<img src="http://www.rakuten.co.jp/com/img/home/t.gif" border="0" width="800" height="1">
```