OmniAICreator/Qiita-1.07M huggingface dataset:
JavaScriptで文字列を結合してURLを作成する方法

　以下のように書くみたいです。
　[30 seconds of code](https://30secondsofcode.org/)より引用。

```javascript
const URLJoin = (...args) =>
  args
    .join('/')
    .replace(/[\/]+/g, '/')
    .replace(/^(.+):\//, '$1://')
    .replace(/^file:/, 'file:/')
    .replace(/\/(\?|&|#[^!])/g, '$1')
    .replace(/\?/g, '&')
    .replace('&', '?');

URLJoin('http://www.google.com', 'a', '/b/cd', '?foo=123', '?bar=foo'); // 'http://www.google.com/a/b/cd?foo=123&bar=foo'
```

　基本的にはString.joinで結合するだけですが、記号等を置換して不正にならないようにしているようです。最初の記号だけ残すように工夫しているところがハックのポイントなんだと思います。
JavaScriptで深い比較を行う方法

　プリミティブなもの同士の比較になるようにオブジェクト（もしくは配列）のプロパティを再帰しながら、たどればいいようです。

　以下は[30 seconds of code](https://30secondsofcode.org/)より引用。

```javascript
const equals = (a, b) => {
  if (a === b) return true;
  if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
  if (!a || !b || (typeof a != 'object' && typeof b !== 'object')) return a === b;
  if (a === null || a === undefined || b === null || b === undefined) return false;
  if (a.prototype !== b.prototype) return false;
  let keys = Object.keys(a);
  if (keys.length !== Object.keys(b).length) return false;
  return keys.every(k => equals(a[k], b[k]));
};

equals({ a: [2, { e: 3 }], b: [4], c: 'foo' }, { a: [2, { e: 3 }], b: [4], c: 'foo' }); // true
```

　日付が特別扱いされているので、そういう意味では状況によっては改良が必要かもしれないですね。

　あとは、Object.keysを使って配列とオブジェクトを同じふうに扱っているのが興味深いと思いました。

## 追記
　コメントでこのままでは正しく動かないケースが多いと、ご指摘いただきました。
　そのため、実際にこのまま使うということは避けたほうがいいと思います。

　うまくいくためにはどうすればいいか修正を検討してみます。

## 追記2
　原因を調査してみました。

　prototypeによる問題が多いので、そこらへんを厳密に比較すれば対応できそうな感じはします。
　あとは配列とオブジェクト、文字の同一視を利用して不正ができるみたいです。

　頑張れば、対応できそうではあるので、もし対応すれば追記します。

```javascript
// elementはprototypeではなく、__proto__で型の判定をしないといけない
// prototypeの比較の際に両方を見る必要がある？
equals(document.createElement('a'), {});  // true

// 自分の環境では再現しなかった
equals({prototype: NaN, a:2}, {prototype:1, a:3}); // true

// オブジェクトと配列を同一視しているため
// 後半部で型を厳密にチェックしたうえで、再帰が必要
equals({0:1}, [1]); // true

// NaNは同士の比較はfalseになるため
// Number.isNaNを使って、厳密に判定する必要がある
equals(NaN, NaN);   // false

// MapはIterater経由でしか、値を取得できないため
equals(new Map([['a', 1]]), new Map([['b', 1]]))

// 厳密には不明
// instanceofで日付型と判定されるのに、日付が入っていないオブジェクトを渡しているため？
// しかし、判定方法がわからない
equals(Object.create(Date.prototype), Object.create(Date.prototype)); 

// 数値・真偽値は__proto__で判定が必要
console.log(equals(1, {}));           // true
console.log(equals(true, {}));        // true

// 配列と文字列は同じアクセス方法でアクセスできるため
console.log(equals('a', {0: 'a'})); //true

// Symbolも__proto__で判定が必要
console.log(equals(Symbol('a'), {})); // true
```
## 追記3

　型の判定を追加すれば、多くのケースでうまくいきました。あとは、NaN対応も入れました。

　DateをObject.createで作ったケースと、Mapのケースは特別扱いしないとうまくいかないので、対応していないです。

　そもそも同値性をどう定義するのかは場合によって違うので、どちらにせよこのまま使うというのは考えづらいので、そこだけ直して終わりにします。

```javascript
const equals = (a, b) => {
  if (a === b) return true;
  // NaNのケースに対応
  if (Number.isNaN(a) && Number.isNaN(b)) return true;
  if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
  if (!a || !b || (typeof a != 'object' && typeof b !== 'object')) return a === b;
  if (a === null || a === undefined || b === null || b === undefined) return false;
  if (a.prototype !== b.prototype) return false;
  // prototypeを取得して型を比較
  // __proto__は公式準拠ではないらしいので不使用
  if (Object.getPrototypeOf(a) !== Object.getPrototypeOf(b)) return false;
  let keys = Object.keys(a);
  if (keys.length !== Object.keys(b).length) return false;
  return keys.every(k => equals(a[k], b[k]));
};
```
AWSとAzureとGCPを比較してみる - FaaS編

FaaSについてAWSとAzureとGCPを比較してみました。
(2018.08.05修正)


# 1. FaaS比較表

| | AWS              |Azure              | GCP                |
|:-------------------|:-------------------|:-------------------|:-------------------|
||Lambda|Functions|Cloud Functions|
|言語|Python,<br/>node.js,<br/>java,<br/>C#(.NET Core),<br/>go|ランタイムバージョン1.X <br/>C#, <br/> JavaScript, <br/> F#, <br/> Python[^1], <br/> PHP[^1], <br/> TypeScript[^1], <br/> バッチ (.cmd、.bat)[^1], <br/> Bash[^1], <br/> PowerShell[^1]<hr/><br/>ランタイムバージョン2.X<br/>C#[^2], <br/> JavaScript[^2], <br/> F#[^2], <br/> Java[^2]|Python, <br/> node.js|
|最大実行時間|5分|10分 (従量課金プラン)<br/>無制限 (App Serviceプラン)|9分|
|直接HTTPアクセスを受け付けるか|受け付けない(API Gatewayと連携必要)|受け付ける|受け付ける|


# 2. 対応言語の比較
言語の種類は試験段階とプレビューを含めればAzureが一番多いのですが、正式リリースされたものに限定すればAWSの方が種類が多いです。
一方GCPのCloud Functionsが正式リリースされました。これから対応言語も増えていくでしょうか。

AzureはBashにも対応しているのが特徴です。運用系のシェルスクリプトをFaaS化すれば、スクリプト用のサーバが不要になりますね。

# 3. 最大実行時間
最大実行時間はAzureの10分(要host.jsonのfunctionTimeoutプロパティ変更)、GCPの9分に対しAWS Lamdbaは5分と約半分です。実際にAWS Lambdaを利用していると5分の壁を結構感じます。この点は他クラウドが羨ましいですね。
2017年のRe:InventでAWSは[Fargate](https://aws.amazon.com/jp/fargate/)というコンテナのサービスをリリースしましたが、このサービスがlambdaが5分以上実行できないことに対するAWSからの回答のように感じます。

# 4. 直接HTTPアクセスを受け付けるか
AWS lambdaだけ直接HTTPアクセスを受け付けることができません。HTTPアクセスを受け付けるには、API Gatewayと連携する必要がありますが、多機能な分やや設定が面倒な印象です。(但しAPI経由でLambdaを起動することは可能)

## まとめ
AWS Lambdaのリリース後、Azure・GCP・Bluemix(現IBM Cloud)は超特急で追従しました。AWS LambdaがIT業界に与えたインパクトはとても大きかったと思います。
現在は「FaaS無ければばクラウドにあらず」といったところでしょうか。

また、AWS GreengrassやAzure IoT Edgeというエッジにデプロイするサービスも出ています。
将来AWS LambdaがiPhoneやApple Watchにデプロイできるようにならないかなーと妄想中です。

[^1]: 試験段階
[^2]: プレビュー
JavaScriptで整数を安全な範囲で扱う

　Number.MAX_SAFE_INTEGER、Number.MIN_SAFE_INTEGERを使えば、精度が保証される範囲の整数値を取得できるのでそれを使います。

　以下は、[30 seconds of code](https://30secondsofcode.org/)より引用です。

```javascript
const toSafeInteger = num =>
  Math.round(Math.max(Math.min(num, Number.MAX_SAFE_INTEGER), Number.MIN_SAFE_INTEGER));

toSafeInteger('3.2'); // 3
toSafeInteger(Infinity); // 9007199254740991
```
{}（ブレース）を使わずにアロー関数で副作用を扱う方法

　デバッグ時のみ、ログ出力したい場合などに用います。returnを書かなくて済むので、修正が少しだけ簡単になります。
　また、reduceで配列やオブジェクトを変更しながら、ループする場合などにも使用できます。

```javascript
// かっこ（）で囲んで、カンマでそのままの値を返す
[1, 2, 3, 4].filter(v => (console.log(v), v % 2 === 0)); //1 2 3 4
[1, 2, 3, 4].reduce((a, v) => (a[v] = v, a), {}); // {"1":1,"2":2,"3":3,"4":4} 
```
旅行情報サイトをスクレイピングし、地図上にプロットする

## 目的　
今回は、スクレイピングの練習のために旅行情報が載っている[RETRIP](https://retrip.jp/)の注目のまとめにある記事を一つ一つ探り、位置情報と場所の名前を取得し、地図上にプロットすることで取り上げられるスポットの地理的偏りなどがあるのかどうかを可視化したいと思います。

##スクレイピング 
まずは、[BeautifulSoup](https://www.crummy.com/software/BeautifulSoup/bs4/doc/)を用いて情報を取得します

```python3

from bs4 import BeautifulSoup
import requests
import re
import time
#urlを指定
url = 'https://retrip.jp/'

#情報を取得します

r = requests.get('https://retrip.jp/')
soup = BeautifulSoup(r.content, 'html.parser')

#1面から見るべきurlをリストにまとめる

urls = [url + i.get('href') for i in soup.find_all('a', href=re.compile('^/articles/')) ]

shop_place_dic = {}

for url1 in urls:
   #入ったurlの中にさらにページ分けされているので何ページあるか確認
    r1 = requests.get(url1)
    soup1 = BeautifulSoup(r1.content, 'html.parser')
    
    add_urls = []
    for i in soup1.find_all('a', class_='page'):
        add_urls.append(i.get('href'))
    
    urls2 = [url1]

　　#ページ全て回れるようにリスト作成

    for i in add_urls:
        urls2.append(url1 + i)
        
    for url2 in urls2:

        #攻撃にならないようにsleepしつつ取得しましょう

        time.sleep(1)
        r2 = requests.get(url2)
        soup2 = BeautifulSoup(r2.content, 'html.parser')

        for j in soup2.article.find_all('div', class_='expSpotContent'):
            shop_place_dic[j.a.text] = j.li.text

```

さあ、これで辞書型のキーに名前、バリューに場所が入った結構な長さの辞書が得られます。
注目のまとめは640ページ分ありますが今回は１ページ分にしておきます。

##プロット　

さて、得られた位置情報をもとに地図にプロットするために[Google Maps API](https://developers.google.com/maps/documentation/geocoding/start)を用いてジオコード化します。
そして、それをもとに[foilum](https://github.com/python-visualization/folium)を用いれば簡単にプロットできます。

```python3

import requests
import json
import folium
from time import sleep

wait_time = 0.3 # (sec)

#key以下に自分のAPI Idを入れましょう

address_url = 'https://maps.googleapis.com/maps/api/geocode/json?address='
key_url = '&key="""YOUR API IDs"""'
headers = {'content-type': 'application/json'}

#適当に初期設定

map1 = folium.Map(location=[ 35.9586186, 139.4288445], 
                      zoom_start=6)

coordinates = {}

#前で作った辞書からすべてをジオコード化します

for k, v in shop_place_dic.items():
    v = v.strip()
    url = address_url + v + key_url
    r = requests.get(url, headers=headers)
    data = r.json()
    if 'results' in data and len(data['results']) > 0 and 'formatted_address' in data['results'][0]:
        coordinates[k] = [data['results'][0]['geometry']['location']['lat'],
            data['results'][0]['geometry']['location']['lng']]
    else: continue

　　#APIの使用制限があるのでsleepしつつ

    sleep(wait_time)

    #これで地図にマーキング

    folium.Marker(coordinates[k], 
                  popup = k).add_to(map1)

#保存
    
map1.save('./map.html')
```

このように地図上に全てプロットすることができました。
(見にくくてすいません)
ちなみに、ピンをクリックすると、場所の名称が出て来るようにしてあります。
![スクリーンショット (4).png](https://qiita-image-store.s3.amazonaws.com/0/203921/37041f5b-d54f-2637-287e-21d265f8580c.png)


##課題

コードが汚いですよね。なにか工夫できる点を探したい。

[こちら](https://qiita.com/momota10/items/3b878f01d489a32e40c3)を参考にすればもっとおもしろい地図データを書けそう

<追記>
スポットの種類による、ピンの色わけ、クリックする事によるurlへのジャンプが実装可能であるようだ。
webpackでgithub pagesをdeployする際のハマりどころ(vue.js)

## 対象
jsプロジェクト自体を
```$ vue init webpack my-project```のようにcliでwebpack利用で生成し、
すぐに
- ```yarn run dev```
- ```yarn run build```
などの開発が進められる状態。
つまりwebpackほぼ触らずに開発始めた方向けです。

## github pagesとは
サーバー用意しなくても公開できるページです。便利ー。
公開方法については[公式](https://pages.github.com/)よくできているので一読おすすめ。

### 公開方法

公開ページをgh-pagesブランチにpushが一番楽そうです。
> 参考
> [npm run deploy で GitHub Pages にお手軽デプロイ](https://qiita.com/star__hoshi/items/490959aee12dbf528f7c)

masterブランチに```docs```フォルダ作ってcommit荒らすのも辛いですしね。

### 手順

```bash
# gh-pagesインストール
$ yarn add -D gh-pages
```

package.jsonを下記変更。

```javascript
"scripts": {
    ..
    // "build": "node build/build.js",
    "build": "node build/build.js && gh-pages -d dist/",
    ..
  }
```

実行

```bash
# build & deploy
$ yarn run build
```

これで```gh-pages``` ブランチが生成され
settingページにてgithub pagesのsource targetがgh-pages branch選択になり、
github pagesが公開されます。
(もしくは```gh-pages```ブランチの選択が可能になります。)

![スクリーンショット 2018-01-17 2.10.35.png](https://qiita-image-store.s3.amazonaws.com/0/12153/f2430387-0ef5-fc4e-5d47-cba3cf00507b.png)

公開完了です。

# ハマりどころ

## 404ページ

うまくdeployが反映されてないようです。

下記参考に、blanchの削除やらで対応が可能です。
[How to fix page 404 on Github Page?
](https://stackoverflow.com/questions/11577147/how-to-fix-page-404-on-github-page)

```bash
# 1. I deleted the gh-pages branch on github
$ git push origin --delete gh-pages

# 2. I deleted the gh-pages branch on local
$ git branch -D gh-pages

# 3. I reinitialized git
$ git init
..

# 追記: 再デプロイ
$ yarn run deploy
```
これでhtmlまでは表示されてほしい。

## css & js リンクエラー
![スクリーンショット 2018-01-17 2.47.11.png](https://qiita-image-store.s3.amazonaws.com/0/12153/507dd026-8f47-51d4-1138-9efba4fa9713.png)

html自体は表示されているものの、css & jsのリンクが正しくない状況になっています。

なお、gh-pagesブランチに書き出される```dist/```配下のファイル構成は

<img width="569" alt="スクリーンショット 2018-01-17 2.34.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/12153/04964e23-da6e-7105-6410-3fbb3bd5b105.png">
になっています。

## 原因

自分はgithub pagesのprojectページを作成する際に遭遇しました。
サーバ上のroot dirが```https://USER_NAME.github.io/```となっているので

```html
<script type="text/javascript" src="/static/js/manifest.389f1daa6b4c0a2dd1d0.js"></script>
```
と指定しても、```https://USER_NAME.github.io/static/js/xxx```を読み込みに行ってまい、うまくいかない状態です。

## 解決方法
config/index.js あたりのbuild設定を調整しましょう。

```javascript
module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    // assetsPublicPath: '/',
    assetsPublicPath: '',
    productionSourceMap: true,
...
```
上記のように```assetsPublicPath: '',```に変更で

```html
<script type="text/javascript" src="/static/js/manifest.389f1daa6b4c0a2dd1d0.js"></script>
↓
<script type="text/javascript" src="static/js/manifest.389f1daa6b4c0a2dd1d0.js"></script>
```
に変更され、正しく取得できます。

理屈的には```assetsPublicPath: '/PROJECT_NAME/',```でもいいのですが、使い回せないので却下としました。

## おわり
github pagesはしばらくアクセスしないと404ページになるという噂があったり、deployがうまくいかなかったりするのですが、それを差し引いても便利なのでハマりどころ抑えていきましょう。

次は、
[vue-routerのgithub-pages用設定](https://qiita.com/uriuriuriu/items/dc5ece0189c518c2e046)
Amane Kisora-chan と Zombie のモデルに他から持ってきたアニメーションをつけて動かす

Asset にあるフリーな 3D Model に他のアセットのアニメーションを流し込んで遊ぼうとした時にちょっと引っかかったことがあったので書く。

## 結論から
モデルのデータやアニメーションのデータの Animation Type を Humanoid にする必要があった。

## 使用したアセット
"Unity-chan!" Model
https://www.assetstore.unity3d.com/jp/#!/content/18705

Taichi Character Pack
https://www.assetstore.unity3d.com/jp/#!/content/15667

Amane Kisora-chan(FREE ver)
https://www.assetstore.unity3d.com/jp/#!/content/70581

Zombie
https://www.assetstore.unity3d.com/jp/#!/content/30232

## やったこと

### Unity-chan のモデルに別のアセットのアニメーションをつける
「Taichi Character Pack」から「forward_20」と「punch_22」を取り出して、AnimationController を作成しUnity-chanにつける。

作った AnimationController は次の感じ。

![animation_controller.png](https://qiita-image-store.s3.amazonaws.com/0/110527/bf056e35-78f9-624c-47c7-c49512fc659f.png)

<br>
特に問題なく動いた。

![humanoid-test1.gif](https://qiita-image-store.s3.amazonaws.com/0/110527/2ad2298e-46e6-4f58-a7f4-763ebf359fed.gif)

### Amane Kisora-chan と Zombie にアニメーションをつける
同じ手順で Amane Kisora-chan と Zombie のモデルに作成したAnimationControllerファイルをつけてみたが次の結果になった。
(「Assets -> SapphiArt -> SapphiArtchan -> Obj -> SapphiArtchan」と「Assets -> Zombie -> Model -> z@walk」を使用)
![humanoid-test2.gif](https://qiita-image-store.s3.amazonaws.com/0/110527/0bd02a1c-0ff6-8971-fd71-2fbe0c9a8e2e.gif)
Unity-chanしか動いていない。
動いていない二人のモデルにフォーカスしてAnimationウィンドウをみてみると、次のように大量にMissingになっていた。

<img src="https://qiita-image-store.s3.amazonaws.com/0/110527/6dd72d02-4856-467e-bd9e-c7c784abb958.png" width=300px height=250px>

Humanoidなアニメーションの設定が正しくされていない様子。
元のFBXファイルの設定を見に行く。

<img src="https://qiita-image-store.s3.amazonaws.com/0/110527/5ef59aef-f951-1fc5-8da8-2c54f579f00e.png" width=580px height=140px >

AnimationType が Generic だったからうまくいかなかったのか。
<img src="https://qiita-image-store.s3.amazonaws.com/0/110527/f28e9eb8-ac54-2938-3b87-a5ba6c1ca895.png" width=580px height=100px >

AnimationType を Humanoid に変更して Apply した。すると、使っている Avatar を選択した時に「Configure Avatar」のボタンがでてきて押すとHumanoidの設定がみれるようにもなった。

<img src="https://qiita-image-store.s3.amazonaws.com/0/110527/b9a02ed3-c59d-027b-b469-7fbc9b37692f.png" width=450px height=90px>

<img src="https://qiita-image-store.s3.amazonaws.com/0/110527/155a1189-3637-3791-8b57-aa30ad361aac.png" width=570px height=557px>

Applyした後は、Animationウィンドウで出ていた Missing が消えたので、動かしてみる。

<img src="https://qiita-image-store.s3.amazonaws.com/0/110527/c6ee2faf-1c72-58ab-f2cc-88694383b21f.png" width=300px height=250px>

![humanoid-test3.gif](https://qiita-image-store.s3.amazonaws.com/0/110527/aa7b869c-06c2-9559-b753-2cb6519704ae.gif)

無事に動いた。Unity-chan が特に気にせず動いていたのは Humanoid 設定がされていたからだった。

AnimationType の設定がちゃんとされていないアセットは多いだろうし設定されているか毎回チェック必要そう。
Finderで選択したExcelファイルをまとめて開くサービス

##Finderで複数選択したExcelファイルが開けない？
複数選択して、コマンド＋O！
ところが、開けるファイルは一つだけ………

てっきり私の環境だけなのかと思ってたけど、他の環境でもみられるようなので、スクリプト書いてみました。

##ソースコード
```AppleScript

tell application "Finder" to set fileList to selection as alias list

if fileList is not "" then
	tell application "Microsoft Excel"
		repeat with aFile in fileList
			open aFile
		end repeat
	end tell
end if

```

AppleScriptはこんな感じでしょうか？

## Automator
![スクリーンショット 2018-01-17 1.52.32.png](https://qiita-image-store.s3.amazonaws.com/0/7001/1128f04f-48eb-967e-1a8b-d1ee857da2fe.png)
新規からサービスを選択します。


![スクリーンショット 2018-01-17 1.48.43.png](https://qiita-image-store.s3.amazonaws.com/0/7001/bfd24acf-fc8a-6a54-83e2-90a3b64315b1.png)

**AppleScriptを実行**を選択し、上記コードをペースト  
※**検索対象**は**Finder.app**を選択することで、Finderのサーピスメニューにのみ表示されます。
適宜名前を付けて保存します。
（保存先：/Users/[username]/Library/Services/openExcelFile.workflow）  


##サービス
![スクリーンショット 2018-01-17 1.58.36.png](https://qiita-image-store.s3.amazonaws.com/0/7001/87bef8a2-70eb-f3f5-077c-4221de157b5f.png)
`システム環境設定 ＞ キーボード ＞ ショートカット`
サービスに、先ほど保存したファイル名を選択して任意のショートカットを設定します。

###注意
これでFinderで選択した複数ファイルを開くことができます。
ただ、ファイルの判定をしていませんのでExcelファイル以外も開いてしまいます。
（てっきりExcelで開こうとしてエラーになるかと思ったんですが、それぞれに関連付けされたアプリケーションで開かれるようです。）
How to Use ImageJ-MATLAB

Even with [the documentation](https://imagej.net/MATLAB_Scripting), it took me quite some time to figure out how to launch **ImageJ-MATLAB** on MATLAB. The bottom line is that the `ImageJ.m` file that is bundled with Fiji is not functional on purpose; you are supposed to update the file through the automatic updater. And the documentation above doesn't mention it!

1. Install [Fiji](https://fiji.sc/)
2. Use MATLAB R2017b or later, which uses JAVA 1.8+ as ImageJ/Fiji does.
  + Use the following command to check the JAVA version of MATLAB
```matlab
version -java
```

3. Executing the following commands

  ```matlab
addpath 'D:\Fiji.app\scripts\' % depends your Fiji installation
ImageJ
  ```

will bring a dialog which prompts you to add an update site `http://sites.imagej.net/MATLAB/`.

1. This means that, following [the instruction of the web page](http://www.imagej.net/How_to_follow_a_3rd_party_update_site), you go to `Fiji > Update...`
2. Once  checking status is done, open `Manage update sites`

3. Tick `ImageJ-MATLAB`

4. And then click  `Apply changes` on ImageJ Updater

5. This will literally update and replace the existing, non-functional ` ImageJ.m` file in the scripts folder with the genuine one.


Now `ImageJ.m` runs in MATLAB

```matlab
>> ImageJ
--------------------------------------------------------------
ImageJ-MATLAB 0.7.2: MATLAB to ImageJ Interface
--------------------------------------------------------------
JVM> Version: 1.8.0_121
JVM> Total amount of memory: 796160 Kb
JVM> Amount of free memory: 295252 Kb

-- Welcome to ImageJ-MATLAB --
ImageJ-MATLAB consists of an extensible set of commands for passing information between ImageJ and MATLAB.
See the individual sections below for a list of available commands.

For more information and examples see:
	http://imagej.net/MATLAB-Scripting

--- MATLAB Command Plugins ---

-- ImageJ MATLAB commands --

Usage: IJM.[command]
	help - prints a brief description of available commands
	getDataset - creates a MATLAB matrix from the active ImageJ image
	getDatasetAs(name) - creates a MATLAB matrix from the active ImageJ image, and assigns it to the specified variable name
	show(name) - takes the MATLAB matrix with the specified name and displays it as an image



--------------------------------------------------------------
Status> ImageJ is running.
--------------------------------------------------------------
log4j:WARN No appenders could be found for logger (loci.formats.ClassList).
log4j:WARN Please initialize the log4j system properly.
```

PS. After this, I extensively edited [the official documentation](https://imagej.net/MATLAB_Scripting), so it should be much easier now.
超便利！CSSだけでInstagramのようなフィルターを画像に追加する方法

# 概要
### 任意の画像に指定のクラスを付与すると、その画像がInstagramのフィルターを適用した状態になります :clap:

## Instagram.cssとは？
> Instagram.css - Pure CSS Instagram filters. You can add all these Instagram-like filters to your photos with using CSS only. Thanks to the CSSgram for inspiration.

**つまり、CSSを使うだけで、Instagramのようなフィルターを画像に追加できるライブラリです**
[CSSgram](https://una.im/CSSgram/) にインスピレーションを受けたらしいです。
正直に書いてあるところが素敵 :relaxed: 笑

## サンプル
### オリジナル
![pexels-photo-287240-1024x767.jpg](https://qiita-image-store.s3.amazonaws.com/0/88460/a39b8028-c7f8-05c1-b5bf-c3a3acb528fc.jpeg)

### Willow
![image.png](https://qiita-image-store.s3.amazonaws.com/0/88460/539eee86-37ea-58bc-c817-d84cb1b27e92.png)

### 1977
![image.png](https://qiita-image-store.s3.amazonaws.com/0/88460/e68ddafc-4020-78f8-ad6e-297866f950bb.png)

### Ginza
![image.png](https://qiita-image-store.s3.amazonaws.com/0/88460/1f30301d-cbb2-fac7-dc93-f8db649f6fb0.png)

### **超便利 :heart_eyes:**

# 準備
1. とりわけ、[instagram.css](https://github.com/picturepan2/instagram.css/blob/master/dist/instagram.css) をダウンロードする
2. 任意のWebサイトまたはWebアプリケーションに [instagram.css](https://github.com/picturepan2/instagram.css/blob/master/dist/instagram.css) を配置する
3. 例えば、`<link rel="stylesheet" href="dist/instagram.css">` のようなタグで、[instagram.css](https://github.com/picturepan2/instagram.css/blob/master/dist/instagram.css) を読み込む

# 実装
1. [DEMOページ](https://picturepan2.github.io/instagram.css/) を参考にフィルターを選ぶ

2. Ginzaを選択した場合は下記のようなコードで適用されます。

```html:index.html
<figure class="filter-ginza">
  <img src="assets/img/instagram.jpg">
</figure>
```

### 要は `<figure>` タグのclass名を `filter-[filter-name]` にするだけ！

### :no_entry_sign: [filter-name] は小文字です！

## フィルターネームとクラス名の一覧
- 1977 `filter-1977`
- Aden `filter-aden`
- Amaro `filter-amaro`
- Ashby `filter-ashby`
- Brannan `filter-brannan`
- Brooklyn `filter-brooklyn`
- Charmes `filter-charmes`
- Clarendon `filter-clarendon`
- Crema `filter-crema`
- Dogpatch `filter-dogpatch`
- Earlybird `filter-earlybird`
- Gingham `filter-gingham`
- Ginza `filter-ginza`
- Hefe `filter-hefe`
- Helena `filter-helena`
- Hudson `filter-hudson`
- Inkwell `filter-inkwell`
- Kelvin `filter-kelvin`
- Kuno `filter-juno`
- Lark `filter-lark`
- Lo-Fi `filter-lofi`
- Ludwig `filter-ludwig`
- Maven `filter-maven`
- Mayfair `filter-mayfair`
- Moon `filter-moon`
- Nashville `filter-nashville`
- Perpetua `filter-perpetua`
- Poprocket `filter-poprocket`
- Reyes `filter-reyes`
- Rise `filter-rise`
- Sierra `filter-sierra`
- Skyline `filter-skyline`
- Slumber `filter-slumber`
- Stinson `filter-stinson`
- Sutro `filter-sutro`
- Toaster `filter-toaster`
- Valencia `filter-valencia`
- Vesper `filter-vesper`
- Walden `filter-walden`
- Willow `filter-willow`
- X-Pro II `filter-xpro-ii`
CodeIgniterのフック(Hook)を一時的に無効にする

CodeIgniterには、フレームワークの機能を変更や拡張をせずに、共通処理などを実装することが可能なフック(Hook)があります。
しかし、特定のリクエストだけ共通処理をしたくない場合があるかもしれません。
そのような場合に、一時的にフック(Hook)を無効にする方法です。

# 概要
- フック(Hook)を一時的に無効にする

# 前提
- CodeIgniter 3.1.6
- PHP 7.2.1

# フック(Hook)を無効にする
フック(Hook)を無効にしたい個所で、Hookクラスのメンバー変数をFALSEにします。
以降のフック(Hook)は実行されなくなります。

```php:application/controllers/Welcome.php
$this->hook->enabled = FALSE;
```

coreのHookクラスでは、初期化時にenabled変数にTRUEをセットします。
Hookがコールされる際は、enabled変数がTRUEかを判定する仕組みとなっているためです。

# 考慮点
仕組み上、enable変数をFALSEにセットした以降しか制御ができません。
具体的には、コントローラーで実装した場合はpost_controller以降のフックポイントだけ、制御ができることになります。
git コマンドメモ

## 1. リポジトリの状態を確認
```
git status
```

## 2. コミット履歴を閲覧
```
git log –n 10
```
※`-n`オプションで履歴の表示数を指定

## 3. コミット名変更
```
git commit --amend -m [修正コミット名]
```

## 3. 直前のコミット操作を取り消す
```
git reset –soft HEAD^
```

## 4. 指定のコミットに戻す
```
git reset --hard [コミットの記号]
```
※7文字の記号みたいなやつ

## 5. 他のブランチで行った変更を取り込む
```
git merge [branch名]
```

## 6. リモートブランチの変更を取り込む
```
git pull
```

## 7. プルリクの取り消し
```
git push --delete origin [branch名]
```
Raspbianに標準搭載されているVimが使いづらいのを直す

※この記事は~~外部サイトのパクリ~~自分用メモです

# Vimが使いづらい
Linux系のOSを入れたらまず最初に初期設定をすると思いますが、Raspbianに最初から搭載されているVimがなぜかメチャクチャ使いづらい。
vimrcを設定してないからというレベルではなく、矢印キーを押したら`ABCD`とか出るし現在の編集モードも出ないしバックスペースは効かないし。
Vimが使えないと何も編集できないので、どうにかして直します。

![amarec(20180117-011311).JPEG](https://qiita-image-store.s3.amazonaws.com/0/213883/0e8e53b7-a63d-8698-1218-a8e8cc109986.jpeg)
何も設定していない状態のVim。矢印を押したら`ABCD`とか出る。

## vimrcの編集
使いづらくてもこの1文だけは書きましょう。Vimを再度呼び出したらいつもの操作に戻ります。

~~~
set nocompatible
~~~

## 何を設定したの？
> ① vi互換モードだった
> どうらや方向キーでABCDが出るのはVimが「vi互換モード」で動いている時のようです（そのモードで必ずそうなるのかは不明）。
> （中略）
> これでVimを起動すると、デフォルトでVimモード（非vi互換モード）になります。

というわけで vi互換モード を切っただけです。

## 参照元　~~パクリ元~~
[Vimで方向キーを押すとABCDが出る問題を直す](http://marupeke296.com/IKDADV_PI_ABCDProb.html)

## 編集後記
これでも使いづらいのは変わらなかったのでVimを再インストールすることにしました。
[RaspberryPi3のセットアップ続き〜VimやNFS設定](https://qiita.com/B73W56H84/items/1d164a3c083872e10ccb)とか参考にすればいいと思います。
Google HomeでiPhoneを探す（twiio不必要ver）

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">Find iPhone via Google Home<a href="https://twitter.com/hashtag/IoT?src=hash&amp;ref_src=twsrc%5Etfw">#IoT</a> <a href="https://twitter.com/hashtag/GoogleHome?src=hash&amp;ref_src=twsrc%5Etfw">#GoogleHome</a> <a href="https://twitter.com/hashtag/RaspberryPi?src=hash&amp;ref_src=twsrc%5Etfw">#RaspberryPi</a> <a href="https://t.co/z4YkmlouJX">https://t.co/z4YkmlouJX</a></p>&mdash; soh satoh (@soh_satoh) <a href="https://twitter.com/soh_satoh/status/953555680673202181?ref_src=twsrc%5Etfw">2018年1月17日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


Google HomeでiPhoneを探すをしてみたかった。
探したところ、マナーモードでも動作するのはこの方法しかない（はず）。

Twiio(有料)が不要なのが一番のメリット。IFTTTとかを通すと少しめんどくさいかも。

## 用意するもの
mitmproxyをインストールしたPC
iOS端末x2

##流れ
**1. mitmproxyでiOSのパケットをキャプチャできるようにする**
インストール方法は、<a href="https://qiita.com/yimajo/items/c67cb711851f747c35e5">iOS実機のSSL通信をプロキシによって傍受したり改ざんする方法</a> を参照。
また、証明書はSafariで <a href="http://mitm.it">mitm.it</a> に飛べばインストール可能です。

**2. mitmproxyを立ち上げ、iOS端末上の「iPhoneを探す」アプリで鳴らしたいデバイスを選択し、「サウンドを再生」をタップ**

**3. /playsound で終わる通信を選択し、自分の好きな形式で保存**
Shift+cで、python code,curlいずれかの方法でコピーします。
今回はcurlを選択。(rを入力)

**4. Terminalにコピペ、テスト**

**5. shファイルにペーストするなりで、IFTTTより実行**

##最後に
IFTTTのWebhookを利用すれば簡単にiPhoneを探すができるかと思います。
Cookieなどの情報が含まれているので、取得した情報が一定期間しか利用できない可能性もあります。（逆にその可能性の方が高い）
ご利用は自己責任でお願いいたします。
JavaScriptで要ログインサイトのデータ収集サービスを作ってみる(part3)

全くのJavaScript初心者から学習してきた流れとか、方法とか色々書きます。
# 作りたい物
ログインが必要なサイトからデータを集めるサービス。

要は、某アーケード音ゲーのスコアツールを作ってみたいということです。
（他スコアツールを参考にしながら作っています。）

# やること
- ログイン状態で、任意のJavaScriptを実行→<a href='https://qiita.com/Teara/items/33dd70984b641661f77b'>part1</a>でやりました
- JavaScriptで欲しいデータのあるHTMLの収集・スコアの抽出→<a href='https://qiita.com/Teara/items/b234ccd5ec581bccc4b5#_reference-2b9cc84078f413b272c4'>part2</a>で途中まで
- 抽出したスコアを何かしらの形式で出力しDL→part4以降で

# データ収集のフロー
今回のHTML収集サイトでは以下の特徴が有りました。

①抽出したい情報のあるHTMLのURLは、取得したいHTMLのリンク元にのみある(ほんとにほしいHTMLのリンクをリンク元より取得する必要がある)
②リンク元のページの最終が明示されていない(何ページ目まで確認すればいいかわからない)



その為、以下の形で取得フローで作りました。

①最終ページの算出
②（①の終了を待ち合わせてから）各ページのHTMLを並列取得し、本当に欲しいデータのURL取得
③(②の処理すべての終了を待ち合わせて)本当に欲しいデータのHTMLを並列取得、スコア抽出
④(③の処理すべての終了を待ち合わせて)抽出データをフォーマットし、DLさせる

上記の処理をするために<a href='https://qiita.com/Teara/items/b234ccd5ec581bccc4b5#_reference-2b9cc84078f413b272c4'>part2</a>のdeferredが有用だったわけです。

続いて欲しいデータのURL・スコアの抽出処理です

# URL・スコア抽出
ずっと言っているとおり、これは簡単です。
HTMLを取得しているので、そのHTMLからclass名、id名を指定して、その要素をデータを抽出することで可能です。（jQueryなら .find('.class')で取得できます）
たとえば、スコアがある箇所が class='score' にあるのであれば、class名：scoreを見つけ、そのテキストを取得するという流れです。（jsやってる人ならよくやることっぽいので、ググると資料がわんさか出てきます）

```javascript:find_target_data.js
$.ajax({
	type: 'GET',
	url: KONAMI_BASE_URL + target_URL
}).done(function(page){
	// HTMLの中から走査する
	var music = ($(page).find('#playdata_music_name').text());
	// 難易度
	var diffli = [];
	// コネクト数
	var connectli = [];
	// スコア
	var scoreli = [];
	// CA回数
	var cali = [];
	// play回数
	var playli = [];

	// 難易度取得
	$(page).find('.difficult').each(function(){
		diffli.push($(this).text());
	});

	// スコア取得
	$(page).find('.score.clearfix').each(function(){
		scoreli.push($(this).find('.value').text());
	});

	// play回数
	$(page).find('.play_count').each(function(){
		playli.push($(this).find('.value').text());
	});

	// コネクト数・CA数
	$(page).find('.clearfix:not(.score)').each(function(){
		if($(this).find('.value_name').text() == 'CONNECT'){
			connectli.push($(this).find('.value').text());
		}else{
			cali.push($(this).find('.value').text());
		}
	});
});
```

ただし、クラス内にスペースを含むクラス（上記ではclass='score clearfix'というクラスがあった ）は.score.clearfixという二つのクラスを持つことになることに注意してください。


あとはDL処理を追加すれば、目的のツールになりそうですね。次回に書きます。
背景画像（background-image）の設置には、background-originも指定するといい

`background-image`で背景画像を表示することがありますが、このとき`background-origin`は使っているでしょうか？

僕はつい最近まで、`padding`が効いている要素に対して配置するときは、paddingの値を変数化して`background-position`で調整していました。
馬鹿みたいに下記のように書いてました…。
こんな便利なプロパティがあったんですね。全然知りませんでした。

```scss
.block {
  $padding: 10px;

  padding: $padding;
  background-image: url("");
  background-repeat: no-repeat;
  background-position: $padding;
}
```

そんなとき、`background-origin`なるものを知ったので、忘備録的な形でまとめておきたいと思います。

## background-originについて

これは、背景配置領域を指定することができます。
上記の例のように、そのまま書くとpaddingの値を無視した形で、paddingの領域から表示されることになります。

指定できる値は、`border-box`, `padding-box`, `content-box`の３つになります。

それぞれについて説明してきたいと思います。
下記のようなボックスモデルがあったとします。

```scss
.block {
  width: px;
  height: px;
  background-color: #f88;
  padding: 15px;
  border: solid 15px #333;
}
```

<img width="152" alt="スクリーンショット 2018-01-17 0.50.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/155990/dc31afbb-a023-57ce-8d9e-24f12e371f92.png">

黒い線がborder、赤がcontentとなっています。
そして、content部分には`padding`が指定されています。

### 普通に画像を設置してみる

通常通り画像を設置してみます。
qiitaのアイコン画像をお借りしました。
`padding: 15px;`を無視してそのまま表示されるので、paddingエリアにめりこんでいます。


```scss
.block {
  // 共通部分は省略


  background-image: url("");
  background-repeat: no-repeat;
}
```

<img width="150" alt="スクリーンショット 2018-01-17 0.52.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/155990/6796b5d8-2d5a-66a2-3d3e-53ede216d768.png">

### background-origin: content-box;を指定してみる

paddingを考慮した位置が基準となり、paddingにもborderにもめりこみません。
サイズ的に中央寄せみたいな感じに見えてしまいますが、中央寄せにはなりません。
中央寄せのときは、普通に`background-position: center;`などで対応してください。

```scss
.block {
  // 共通部分は省略


  background-origin: content-box;
  background-image: url("");
  background-repeat: no-repeat;
}
```

<img width="151" alt="スクリーンショット 2018-01-17 1.02.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/155990/d7ea63db-45eb-1617-9f2e-40581512b20d.png">



### background-origin: border-box;を指定してみる

背景に指定した画像は、ボーダー境界の外側までめり込みます。
少しわかりづらいかもしれませんが、こんな感じになります。

```scss
.block {
  // 共通部分は省略


  background-origin: border-box;
  background-image: url("");
  background-repeat: no-repeat;
}
```

<img width="150" alt="スクリーンショット 2018-01-17 0.57.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/155990/3b06120b-8f5f-8efc-14f3-fb6f82069ad0.png">

### background-origin: padding-box;を指定してみる

指定なしと同じになります。

```scss
.block {
  // 共通部分は省略


  background-origin: padding-box;
  background-image: url("");
  background-repeat: no-repeat;
}
```

<img width="152" alt="スクリーンショット 2018-01-17 0.59.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/155990/8ffbe058-34cb-d04f-d3fa-7034b2bd0fef.png">

## まとめ

以上になります。
大体のブラウザにも対応しているので、とても便利だと思います。
余程古いブラウザや、珍しいブラウザのサポートがない限り問題もなさそうです。
https://caniuse.com/#feat=background-img-opts
Firemacs WebExtension 版は開発中

# これは何?

Firefox の add-on である firemacs を使い続ける方法を紹介したかった。

# 結論

WebExtension 版 firemacs である [FiremacsWE](https://github.com/firemacs/FiremacsWE) は開発中で、まだ動きません。

完成するまでは Firefox ESR に firemacs を install して使いましょう。
WebExtension に詳しい方は、是非開発を手伝ってあげてください。。。

# Firefox ESR + firemacs の入れかた

https://www.mozilla.jp/business/ から Firefox ESR を download & install

add-on から firemacs を install

以上
reboot/shutdown後も設定を維持したい場合はulimit -nではなく/etc/security/limits.confを編集する(「Too many open files」「ファイルを開きすぎています」エラー対策)

RHEL7/CentOS7上で開発や運用をしていると「Too many open files」「ファイルを開きすぎています」といったエラーが出ることがあります。これはファイルディスクリプタの枯渇が原因であり、その上限値を調整することが対策法となります。

さて調査の結果、ファイルディスクリプタの上限値は`ulimit -n`により設定できることが分かったのですが――__`ulimit`による設定は一時的な効力しかなく、`reboot`や`shutdown`をすると、もともとの値に戻ってしまいます。__

```
[root@localhost ~]# ulimit -n
1024
[root@localhost ~]# ulimit -n 4096
[root@localhost ~]# ulimit -n 
4096
[root@localhost ~]# reboot 

=== 再起動後 === 

[root@localhost ~]# ulimit -n
1024
```

`shutdown`/`reboot`後も設定を維持したいという場合`/etc/security/limits.conf `という設定ファイルに以下のような記述をくわえます。

```
* soft nofile 4096
* hard nofile 4096
```

`/etc/security/limits.conf `には詳細な説明と凡例が掲載されているので、説明は割愛します。

```
[root@localhost ~]# vi /etc/security/limits.conf 
[root@localhost ~]# tail -n 5 /etc/security/limits.conf

* soft nofile 4096
* hard nofile 4096

# End of file
[root@localhost ~]# reboot

=== 再起動後 ===

[root@localhost ~]# ulimit -n
4096
```
Hugoの使い方メモ

# 背景

github pagesでなんか静的サイトをホスティングしたいなと思い、Hugoを試したみたのでメモ.
ただのメモ書き

チュートリアル
- https://gohugo.io/getting-started/quick-start/

# 内容

## とりあえず動かす

Install

```shell-session
$ brew install hugo
```

Check

```shell-session
$ hugo version
Hugo Static Site Generator v0.32.4 darwin/amd64 BuildDate: 2018-01-13T15:56:11+09:00
```

project作成

```shell-session
$ hugo new site quickstart
$ cd quickstart
$ git init
$ curl -o .gitignore https://raw.githubusercontent.com/github/gitignore/master/Go.gitignore
$ git add .
$ git commit -m "init"
```

テーマ追加

```shell-session
$ git clone https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
$ echo 'theme = "ananke"' >> config.toml
```

記事追加

```shell-session
$ hugo new posts/my-first-post.md
```

サーバー起動

```shell-session
$ hugo server -D &
$ open http://localhost:1313/
```

![1_480.png](https://qiita-image-store.s3.amazonaws.com/0/15000/cc22f8fe-3820-1e3d-3862-461ee06685c9.png)

## テーマを変える

```shell-session
$ git clone https://github.com/spf13/hyde themes/hyde
$ hugo -t hyde
$ hugo server -D
```

![1_480.png](https://qiita-image-store.s3.amazonaws.com/0/15000/90261337-aac9-78d5-7ab6-cd1afdfabb2c.png)

## テーマを作る

```shell-session
$ hugo new theme sample
$ tree themes                                                                                                        ~/github/mattak/mattak.github.com/quickstart [master|mattak|TakumanoMacBook-Pro.local]
themes
└── sample
    ├── LICENSE.md
    ├── archetypes
    │   └── default.md
    ├── layouts
    │   ├── 404.html
    │   ├── _default
    │   │   ├── list.html
    │   │   └── single.html
    │   ├── index.html
    │   └── partials
    │       ├── footer.html
    │       └── header.html
    ├── static
    │   ├── css
    │   └── js
    └── theme.toml

8 directories, 9 files
```

thema適用してみる

```shell-session
$ hugo new post/my-first-post.md
$ hugo -t sample
```

```shell-session
$ hugo server -t sample
```

このままだとなにも表示されない.

適当にlayoutを当ててみる

```themes/sample/layouts/_default/single.html
{{ partial "header.html" . }}
{{ .Content }}
{{ partial "footer.html" . }}
```

```themes/sample/layouts/partials/header.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>{{ .Title }}</title>
  </head>
  <body>
    <div>header</div>
```

```themes/sample/layouts/partials/footer.html
<footer id="footer">footer</footer>
</body>
</html>
```

draftをfalseにしておく

```content/post/my-first-post.md
---
title: "My First Post"
date: 2018-01-16T23:53:02+09:00
draft: false
---

hello world!!
```

実行

```shell-session
$ hugo server -t sample
```

![1_480.png](https://qiita-image-store.s3.amazonaws.com/0/15000/3caee0bf-8220-e00f-ad4b-f337e0e451f1.png)

できた！ あとはレイアウトの中身を整えていけばどんなサイトでも作れそう
Carrierwaveの画像パスをCallbacksで扱う時はafter_commitを使ったほうが良いかも


正確に言うと **transaction commit後にした方がいいかも**、というお話。

## Callback時のCarrierwaveの画像パス

Carrierwaveは保存する時に一旦キャッシュディレクトリに画像をキャッシュする作りになっている。デフォルトだと`public/uploads/tmp/...`に入る。

ここで気をつけないといけないのが、after_createやafter_updateのcallback内では、@model.hoge_urlは **キャッシュディレクトリ**のパスを返す。

例えば、Callback時に別のサーバなりに画像のファイルパスを送るようなユースケースの場合、誤ってこのキャッシュのURLが送られてしまうことになり、正式なURLを送ることが出来ない。

## 例

```ruby:app/uploaders/image_uploader.rb
class ImageUploader < CarrierWave::Uploader::Base

  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  include CarrierWave::MiniMagick

  # Choose what kind of storage to use for this uploader:
  storage :fog 

  # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  def store_dir
    base_path = "images/#{model.class.to_s.pluralize.underscore}/#{model.id}"
  end

  ... 
  
end
  
```

```ruby:config/initializers/carrierwave.rb
CarrierWave.configure do |config|
  config.fog_credentials = {
    provider: 'AWS',
    aws_access_key_id: ENV['AWS_ACCESS_KEY_ID'],
    aws_secret_access_key: ENV['AWS_SECRET_ACCESS_KEY'],
    region: ENV['AWS_REGION'],
    path_style: true
  }
  config.fog_public = true
  config.fog_directory = ENV['FOG_DIRECTORY']
  config.asset_host = "https://s3-#{ENV['AWS_REGION']}.amazonaws.com/#{ENV['FOG_DIRECTORY']}"
end

```

```ruby:app/models/hoge.rb
class Hoge < ApplicationRecord
  mount_uploader :image, ImageUploader
  after_create :send_image

  private

  def send_image
	# POST to Another Applications etc...
	# self.image_url #=> /public/uploads/tmp/... となってしまう
  end
end

```


## どうすれば良いのか
**after_commit**を使いましょう。

```ruby:app/models/hoge.rb
class Hoge < ApplicationRecord
  mount_uploader :image, ImageUploader
  after_commit :send_image, on: :create

  private

  def send_image
    # POST to Another Applications etc...
    # self.image_url #=> /public/uploads/tmp/... となってしまう
  end
end
```

Railsで画像を扱うときにはCarrierwaveを使う人が多いと思うが、思わぬところではまったのでメモ。
~~トランザクション確定してないくせに別サーバにPOSTしに行くなんてなにを考えて~~


[参考 -StackOverflow](https://stackoverflow.com/questions/39514286/carrierwave-returns-path-of-tmp-file-instead-of-actual-in-a-callback)
ゆうちょ銀行の支店コード一覧獲得スクリプト

https://bank.wnavi.net/branch.php?bank_cd=9900&bank_name=%E3%82%86%E3%81%86%E3%81%A1%E3%82%87

```
document.body.appendChild(function(){
src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js";
sc = document.createElement("script");
sc.type="text/javascript";
sc.src=src;
sc.onload = function() {
/*window.jQuery.noConflict();*/
};
return sc;
}()
);
```

```
const BANK_ID = "";
models = [];
$(".TblBankView").find("tr").each(function(_i, _elm){
  models.push({
    id: BANK_ID,
    code: $($(_elm).find('td')[0]).text(),
    name: $($(_elm).find('td')[1]).text(),
    kana: $($(_elm).find('td')[2]).text()
  });
});
```


```
copy(models);
```
RocksmithとKarabiner-Elements

# RocksmithとKarabiner-Elements

Mac用キー割り当てカスタマイズアプリ「[Karabiner-Elements](https://github.com/tekezo/Karabiner-Elements)」が動いている macOS High Sierra で、UBIのゲーム「[Rocksmith 2014](http://www.ubisoft.co.jp/rocksmith2014/)」を動かすと、何かが干渉するのか、曲の検索やテクニックゲーム(GUITARCADE)でキーボード入力ができないので困ります。特にGUITARCADEはゲームを終了してメニューに戻ることができなくなるので辛いです。

Rocksmithを起動する前にKarabiner-Elementsを終了させておけば問題ないのですが、ついそれを忘れて起動して、「むむむ」ってなるのでカッとなって自動化してみました。

## Hack the Rocksmith 2014 startup script

Rocksmith 2014をSteam経由でインストールしていると、どこかに(ユーザのアプリケーションフォルダですかね?)にロックスミスのアイコンになってるアプリケーションバンドル "Rocksmith 2014 Edition - Remastered.app" があると思います。

<img width="112" alt="rocksmith.png" src="https://qiita-image-store.s3.amazonaws.com/0/49258/55d52324-6ae0-2b24-daca-ddfc079c9723.png">

ターミナル経由でそのバンドルの中のシェルスクリプトをテキストエディタで開きます。

```bash-session
$ cd ~/Applications/
$ vi "Rocksmith 2014 Edition - Remastered.app/Contents/MacOS/run.sh"
```

すると

```bash
#!/bin/bash
# autogenerated file - do not edit

open steam://run/221680
```

みたいな感じになっているので、これを("do not edit"を無視して)

```bash
#!/bin/bash
# autogenerated file - do not edit

/bin/launchctl bootout gui/`id -u`/org.pqrs.karabiner.karabiner_console_user_server
/usr/bin/killall Karabiner-Menu

open steam://run/221680

sleep 10
RUN_CHECK="`dirname "$0"`/run-check.sh"
nohup "$RUN_CHECK" > /dev/null 2>&1 &
```

に修正して保存します。さらに、ゲーム終了のプロセス監視を行うスクリプト(`run-check.sh`)を`run.sh`と同じディレクトリに作ります。

```bash-session
$ vi "Rocksmith 2014 Edition - Remastered.app/Contents/MacOS/run-check.sh"
$ chmod 755 "Rocksmith 2014 Edition - Remastered.app/Contents/MacOS/run-check.sh"
```

`run-check.sh`の内容は、

```bash
#!/bin/bash

while true
do
    alive=`pgrep Rocksmith2014 | wc -l`
    if [ $alive = 0 ]; then
        break
    fi
    sleep 5
done

open /Applications/Karabiner-Elements.app
```

です。

これで、Rocksmithで遊ぶときにこれをダブルクリックして起動するようにすれば(私はDockに入れていつでも遊べるようにしています)、Karabiner-Elementsが終了してからゲームが開始します。そしてゲームを遊び終わってデスクトップに戻ってきたら、Karabiner-Elementsが自動で起動します。

関連情報
- [Karabiner-Elements blocking certain inputs in Rocksmith](https://github.com/tekezo/Karabiner-Elements/issues/673)
- [How can quit KE through hammerspoon or applescript or shell, please?](https://github.com/tekezo/Karabiner-Elements/issues/1001)

以上です。

### 追記: 2018-04-15

最近、macOSかSteamかどちらかが最新に更新されて以降、`open steam://...` が正しく動作しなくなったようです。このため、シェルスクリプトからRocksmithを起動できなくなってしまいました。残念。
Excel沼が避けられない... ペタペタを減らす

##やりたいこと：
####Excelの同じブック内のSheet2からSheet1へ行と列を入れ替えて貼り付ける
形式を選択して貼り付け→値(V)→行/列の入れ替え(E)を自動化
ただただ見栄えのためにペタペタしなければならない方いたら参考にしてください。

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205747/027858d4-2c7b-1538-293b-83e54ed57a00.png)

[形式を選択して貼り付け→値(V)→行/列の入れ替え(E)]をMacro1のサブルーチンにまとめ、exeでセルを指定して呼び出して実行

    'x1..コピー元の開始セル
    'x2..コピー元の終端セル
    'y1..コピー先のセル
    Private Sub Macro1(x1 As String, x2 As String, y1 As String)
    Dim MB As Workbook
    Set MB = ThisWorkbook
    
    MB.Sheets("Sheet2").Select
    MB.Sheets("Sheet2").Range(x1 & ":" & x2).Select
    Selection.Copy
    Sheets("Sheet1").Select
    Range(y1).Select
    Selection.PasteSpecial Paste:=xlPasteValues, Operation:=xlNone, SkipBlanks _
        :=False, Transpose:=True
    Application.CutCopyMode = False
    Range("A1").Select
    MB.Sheets("Sheet2").Select
    MB.Sheets("Sheet2").Range("A1").Select
    End Sub

    Sub exe()
    Application.ScreenUpdating = False
    Application.DisplayAlerts = False

    Dim MB As Workbook
    Set MB = ThisWorkbook
    MB.Sheets("Sheet1").Select
    Range("c2:i10").ClearContents

    Call Macro1("B2", "D8", "C2")
    Call Macro1("B10", "D16", "C5")
    Call Macro1("B18", "D24", "C8")
    End Sub

 選択するべきセルが一定の間隔で指定可能ならforで繰り返し

    Sub exe()
    Application.ScreenUpdating = False
    Application.DisplayAlerts = False

    Dim MB As Workbook
    Set MB = ThisWorkbook

    MB.Sheets("Sheet1").Select
    Range("c2:i10").ClearContents

    Dim b,c,d As Long
    b = 2
    d = 8
    For c = 2 To 8 Step 3
    Call Macro1("B" & b, "D" & d, "C" & c)
    b = b + 8
    d = d + 8
    Next c
    End Sub
銀行の支店コードの獲得スクリプト

http://www.geocities.jp/finance_db/bank/

```
document.body.appendChild(function(){
src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js";
sc = document.createElement("script");
sc.type="text/javascript";
sc.src=src;
sc.onload = function() {
/*window.jQuery.noConflict();*/
};
return sc;
}()
);
```

```
const BANK_ID = "";
models = [];
$(".tbl_det").find("tr").each(function(_i, _elm){
  models.push({
    id: BANK_ID,
    code: $(_elm).find('th').text(),
    name: $($(_elm).find('td')[0]).text(),
    kana: $($(_elm).find('td')[1]).text()
  });
});
```

```
copy(models);
```
[React] Component と PureComponentの違い


# 1. 前書き

React は Component を Update するか決定する過程で、
Component の `shouldComponentUpdate` を実行し、Update する必要があるか判断する。 

Reactは shouldComponentUpdate で 
**true** を返すと **Update する**必要があると判断し、
**false** を返すと **Update をする必要がない**と判断する。

# 2. PureComponentとは

React PureComponent はデフォルトの `shouldComponentUpdate` を変更した `Component` である。 
**浅い比較**(shallow-Equal)によって Update するかしないかを決定する。


* React.PureComponentのイメージ

```js
class PureComponent extends React.Component {
    shouldComponentUpdate(nextProps, nextState) {
        return !(shallowEqual(this.props, nextProps) && shallowEqual(this.state, nextState));
    }
    …
}
```

[本番ソースの該当部分のコード](https://github.com/spicyj/react/blob/aab1fd6e6af43aacb36f2e2006d3fc9245e064ec/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js#L874-L876)


# 3. Component と PureComponentのStateやPropsが変更時の比較図

![Kobito.BIMUZ8.png](https://qiita-image-store.s3.amazonaws.com/0/170309/4202f02b-6029-f650-1545-9bb97e72613d.png "Kobito.BIMUZ8.png")

# Component と PureComponentの使い分け

## (1) 原則
`render`関数を発火させる回数を減らせば減らせるほど、
Reactの性能を発揮することができる。

## (2) 結論

* **props**と **state**が常に変化していれば、PureComponentを使わず、Componentを使うべし。（理由：`shouldComponentUpdate`内の`shallowEqual`も時間かかる）
* **props**と **state**があまり変わらなければ、`PureComponent`を使うべし。 
* **props**と **state**が変わらなければ、どちらでもOK.
* React自体VirtualDOM機構で差分しかrenderされず性能を保証してくれるため、初心者は気にせず`Component`を使用。Bottle Neckになったら、最適化すれば良い。

# 4. 使用例

TODO

# 5. 注意点

* PureComponentを使用する場合、`shouldComponentUpdate`内の比較が **浅い比較(shallow-Equal)** (objectのreferenceしか比較しない)なので、
`setState` の時は **Immutable規則**を守らないとrenderされないtrapにはまる。

 
## Immutable（不変）規則とは

既存のStateやPropsを直接修正するのではなく、
新たにobjectを作った上で変更する。

* 正しい使い方

```js
const props = {
  id: 1,
  list: [1, 2, 3]

}

const nextProps = {
  ...props,
  list: [...props.list, 4]
}
```

* 間違った使い方

```js
const props = {
  id: 1,
  list: [1, 2, 3]
}

const list = props.list; // 変更前のpropsと同じreferenceになるため
list.push(4)

nextProps = {
  ...props,
  list
}
```


# 6. おまけ

* React Lifecycle

![React Lifecycle](https://kunigami.files.wordpress.com/2016/01/react.png)

# 7. 参考

http://mp.weixin.qq.com/s/05SWQW7XeHHsk4QvACiMeA
https://kunigami.blog/2015/04/28/react-js-introduction/
http://jyane.jp/2016/08/12/react-purecomponent.html
[iOS] SwiftからKotlin/Nativeを使う

Kotlin/Native v0.5がreleaseされて、C, Objective-C, SwiftからKotlin/Nativeが使えるようになり、UIをSwiftで書き、logicをKotlinで書くということができるようになったので、サンプルをお試し。

# ドキュメント
Kotlin Blog - Kotlin/Native v0.5 released: calling Kotlin from Swift and C, LLVM 5 and more
https://blog.jetbrains.com/kotlin/2017/12/kotlinnative-v0-5-released-calling-kotlin-from-swift-and-c-llvm-5-and-more/

GitHub - Kotlin/Native
https://github.com/JetBrains/kotlin-native

Programming Guide - Kotlin/Native
https://kotlinlang.org/docs/reference/native-overview.html

# Kotlin/Nativeとは？
- Kotlin/NativeはKotlinのソースコードからネイティブコードを生成するコンパイラ、ランタイムである。
- LLVMのバックエンドを使っているので、Kotlin => bitcode => ネイティブコードへ変換される。(Java VMで動くバイトコードが生成されるわけでは無い。)

# 環境
- JDK 1.8
- Xcode 9.2

# 手順
基本的には、[GitHub](https://github.com/JetBrains/kotlin-native)のREADMEに書かれている手順です。

Kotlin/Nativeのソースを持ってくる。

```bash
git clone https://github.com/JetBrains/kotlin-native.git
```

依存関係のあるものをdownloadする。

```bash
./gradlew dependencies:update
```
## コンパイラとライブラリのビルド
コンパイラとライブラリをビルドするには、以下を実行する。
※時間がかなりかかる（[README.md](https://github.com/JetBrains/kotlin-native/blob/master/README.md)には、MacBook Proで約１時間と書かれている)ので、暫く待つ。

```bash
./gradlew bundle
```

ホストコンパイラとライブラリのみをビルドして時間短縮したい場合には、以下を実行する。

```bash
./gradlew dist distPlatformLibs
```
サンプルを動かす場合には、クロスコンパイラもビルドする必要があるので、以下を実行する。

```bash
./gradlew cross_dist
```


## iOS calculator sampleのビルド

- `samples/calculator/calculator.xcodeproj`をXcodeで開く。

- XcodeのメニューからProduct -> Runで実行する。
 - "Run Script" build phaseで`gredlew`が実行されて、`samples/calculator/src/main/kotlin/org/konan/arithmeticparser/Parser.kt`がコンパイルされて`KotlinArithmeticParser.framework`が生成される。
PowerShellでExcelを開始し、終了する

# 開始
Excelがすでに起動している場合はそのプロセスを使用します。
プロセスにExcelが存在しない場合は、新たに起動します。

```powershell
# プロセス中にExcelが存在するか調べる。
$existsExcel = $false
foreach($process in Get-Process) {
    if ($process.ProcessName -eq "EXCEL") {
        $existsExcel = $true
        Break
    }
}
# Excelプロセスを起動または取得。
$excel = $null
if ($existsExcel) {
    $excel = [System.Runtime.InteropServices.Marshal]::GetActiveObject("Excel.Application")
} else {
    $excel = New-Object -ComObject Excel.Application
}
$excel.Visible = $true
$excel.Workbooks.Add()
```

# 終了
最後にGCを走らせた時点で、プロセスが開放されます。
Quitせずにブックを開きっぱなしにする場合でも、$nullの代入とGCを走らせておきます。
さもないと、Excelの閉じるボタンでアプリケーションを終了した後でも、Excelがプロセスに残り続ける場合があります。

```powershell
$excel.Quit()
$excel = $null
[System.GC]::Collect() # GC実行
```
Python 3：sys.pathとos.pathについて（機械学習，手書き数字認識）

# `sys.path`，`os.path`とは？

###### 機械学習の手書き数字認識という問題で，データセットを呼び出すときに遭遇．

- `sys.path`の中身はリスト
    - **モジュールを検索するパスを示す文字列のリスト**
    - 起動時に初期化された後，リストの先頭（`path[0]`）にはPythonインタプリタを起動したスクリプトのあるディレクトリが挿入される
- `os.path`はモジュールで，中身はパス名を操作する関数などが入っている

## `sys.path`，`os.path`で何ができるのか？

- `sys.path.argv()`：Pythonスクリプトに渡されたコマンドライン引数のリスト
    - `argv[0]`はスクリプトの名前となる

- `sys.path.append()`：`sys.path`に引数内のパスを加える操作を行う
    - `sys.path.append(os.pardir)` ：`os.pardir`は親ディレクトリを表す文字列定数
    - これは，**親ディレクトリのファイルをインポートするための設定**

- `os.path.join()`：引数の複数の値をつなげてパスにする関数

# まとめ：
1. システムパラメータや関数をいじるときに`sys`や`os`モジュールを用いる
2. データセットの呼び出しという今回の目的に限れば，`sys.path.append(os.pardir)`の意味するところは，**「システムに親ディレクトリまでのパスを加える」**といったところか．
Javaのequalsメソッドで例外を回避する使い方

職場でequalsの使い方をなんとなく調べたところ、ワンランク上の使い方を発見しましたので話します。もうすでにこんなこと知ってるよ！という方は温かい目で見てください。そして間違いがあればご指摘お願いします。

#equalsメソッド
equalsメソッドは、Stringクラスの文字列を比較する際によく使用するかと思います。
その際に私は今までこのように呼び出していました。



```java:equals.java
str.equals("hoge");
```



しかし、この呼び出し方だとstrがnullの場合、nullからequalsを呼び出すため***nullPointerExceptionの例外***が発生します。

この例外を回避する方法としてif文でnullチェックをするのもアリですが、少しequalsメソッドを変えるだけで例外を回避できちゃいます。

それがこちらです。



```java:equals.java
"hoge".equals(str);
```


簡単ですね。strと"hoge"を反対にしているだけです。この呼び出し方だとnullPointerExceptionではなくfalseが返ります。よって***nullPointerExceptionの例外***が起こることはありません。


#おまけ
今回紹介したのはStringクラスのequalsメソッドですが、Objectクラスのequalsメソッドもあります。

```java:equals.java
Objects.equals(str1,str2);
```

こちらの説明はまたの機会に。


#最後に
これからはequalsメソッドを使うときは文字列を先にして呼び出したいと思います。