OmniAICreator/Qiita-1.07M huggingface dataset:
単純なHTML/CSS/JSをHerokuにデプロイする時つまずいたこと

## Heroku普通に使えね？
何も知らない僕は思うわけです。「このHerokuって奴普通にwebサーバーとして使えるんじゃ...?」
## エラー発生！
残念！ｗ

```terminal
!     No default language could be detected for this app.
HINT: This occurs when Heroku cannot detect the buildpack to use for this application automatically.
See https://devcenter.heroku.com/articles/buildpacks
!     Push failed
```
ぼく「？」
上記はgithubとHerokuを連携した時のエラーログです。
その時のディレクトリ構造は

```
hoge┬index.html
    └README.md
```
~~なんとわかりやすいディレクトリ構造でしょう~~
と、上記のエラーが発生。
## 解決への道
調べた結果、こんなサイトが
[How to Run a Simple HTML/CSS/Javascript Application on Heroku](https://medium.com/@winnieliang/how-to-run-a-simple-html-css-javascript-application-on-heroku-4e664c541b0b)
外人ニキには感謝しかない...
本文の内容は
> シンプルなHTMLとかだと
アプリだと認識されねーよ

みたいな感じです。
## 解決方法
1. composer.jsonを作る。
中身は

```json:composer.json
{}
```

だけでOK
2. index.phpを作る。
中身は

```php:index.php
<?php include_once("index.html"); ?>
```

これでOKなはずです！
改めて外人ニキありがとうございます！
Google CameraのRawをどうにかする話

#GoogleカメラにRAW対応が追加された！

が、どうやったら触れるんだっけ？という方向けの記事。
（お金をかけずに）

本記事は2018/11/4 時点の情報です。
バージョンアップなどにより挙動が変わる可能性があります。

#カメラ側の設定

カメラの「その他」→「設定」→「詳細設定」→「RAW+JPEGの管理」を有効にします。
<img src="https://qiita-image-store.s3.amazonaws.com/0/121950/de5d29b2-1126-182b-2599-ea5912784f77.png" width=30%>  <img src="https://qiita-image-store.s3.amazonaws.com/0/121950/ed55cd77-3f7e-f731-ab35-a38420758f56.png" width=30%>

**注:RAWファイルは/Picture/Raw以下にXXX.dngというファイル名で格納されます。通常の撮影ファイルの格納場所とは異なります。**

#ファイルの現像

上記の/Picture/Raw以下のXXX.dngファイルをWindowsにコピーします。
※ファイル共有などを通してコピーすればよいと思います。

GIMPでファイルを開こうとすると、
<img src="https://qiita-image-store.s3.amazonaws.com/0/121950/5d5dfc60-eb88-df86-4f3f-0c8b2a546e2e.png" width=60%>

残念ながらエラーがでるのでRawTherapeeをインストールします。
以下のページの”Download"から自分の環境にあったファイルをダウンロードしてインストールします。

https://rawtherapee.com/
<img src="https://qiita-image-store.s3.amazonaws.com/0/121950/d4522bcf-8526-8567-e7d5-26989d1789fa.png" width=70%>


無事dngファイルも読み込み、色々な操作は可能なようです。
また、設定を行うことにより、GIMPへの連携も可能となります。

![SnapCrab_NoName_2018-11-4_0-50-50_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/121950/a65e0d4a-8dfc-ee7b-0608-0c12fc9ba901.png)
iPad 11インチの縦横比は139:199、だいたい7:10

#調査
```swift
let n = 1000
for i in 1...n {
	for j in 1...n {
		if 1668.0/Double(i) == 2388.0/Double(j) {
			print(i,j)
		}
	}
}
```

#結果
139 199
278 398
417 597
556 796
695 995
2番目からは1番初めのやつの整数倍ですね。

#検証
1668 ÷ 139 = 12
2388 ÷ 199 = 12
OKですね。

#ざっくりみると
139:199なので、だいたい7:10
7:10に決定した理由ってなんでしょうね。
Node-redのJSonataの事例2 〜条件分岐する検索内容とデフォルト値〜

前回記事：
https://qiita.com/kouichirou/items/5622dcb14ab22441fe27

#第二弾です。

とりあえず細かいことはさておき、今度は
・リストAから変数1で検索したエントリーのBoolean如何で、リストBの検索内容を変数2の値あるいは固定値に切り替える
・さらに、その結果が何もない場合は、デフォルト値まで用意する
という内容です。

###早速コードをば。

```
(
$v := function($a, $b , $LIST1 , $LIST2 ){
   $LIST1[ key1 = $a ].boolean ?
   $LIST2[ key2 = $b ].name:
   $LIST2[ key2 = "*" ].name
}(
   $._hoge,
   $._fuga,
   $globalContext( "TMP" ),
   $.member

);
$v ? $v : "NO_MEMBER_FOUND"

)
```

今回は前回の内容に加えて、三項演算子` ? : `とJSonata内部で変数定義をする内容を使ってます。
三項演算子は2箇所で使ってますが、1箇所目で要件1「リストAから変数1で検索したエントリーのBoolean如何で、リストBの検索内容を変数2の値あるいは固定値に切り替える」を実装し、2箇所目で要件の2つ目であるデフォルト値を実装しました。

こういうのをいちいちJavascriptで書かなくて良いので便利ですねぇ。

#本家ガイド
変数定義：　https://docs.jsonata.org/programming.html#variables
三項演算子：　https://docs.jsonata.org/operators.html#--1



今回はシンプルですがこれで終わりです。ありがとうございました。


#第三弾（いよいよ最後）
https://qiita.com/kouichirou/items/09a57e6b834648e9b470
ローカル開発環境を作る理由とつまづく理由

##ローカル開発環境を作る理由

ローカル開発環境は、WEBアプリケーション、WEBサイトを作りたい人には必須のものです。
WEBアプリケーション、WEBサイトを公開する際、普通はサーバーというものを借りて、サーバーに様々なファイルやデータを保管してそれらを呼び出したりします。
しかし初めからサーバーを借りて作ると、WEB上に公開されたり、サーバー代がかかってしまうので、自分のパソコンに似たようなサーバーがあれば良いですよね？
そして自分のパソコン内のサーバーである程度プログラムを作って、「よし、完成！」と思えば、公開すれば良いのです。
この自分のパソコン内の環境を"ローカル開発環境"と言います。
ローカルと言う名前の通り、自分のパソコン上に仮想の環境を作ります。

##つまずく理由：専門用語がたくさん登場する
「ローカル開発環境を作ればいいんだな。よし調べよう！」
と思い、勉強しているとどうやらターミナル（もしくはコマンドプロンプト）で色々と作業しなくてはならない。

ターミナル（コマンドプロンプト）は初見は”なんかプログラマーが使ってるカッコいいやつ”という印象だが、パソコンの操作をマウスのクリックではなく、コマンド入力するものという認識で大丈夫です。

ターミナルの基本的な操作は知っておいた方が良いでしょう。
pwd　:現在ディレクトリの絶対パス表示
cd   :ホームディレクトリに移動
cd （ディレクトリ名）　:指定したディレクトリへ移動
mkdir （ディレクトリ名）:ディレクトリを作成
rmdir （ディレクトリ名）:空のディレクトリを削除	
mv (ファイル名) (ディレクトリ名) :ファイルをディレクトリへ移動
ls :現在のディレクトリのファイル一覧表示

次にLinuxとかCentOS,Ubuntuなどを聞いて「はあ？」となる人が出てくると思います。
では順を追って説明します。
ローカル開発環境では”仮想マシン”を起動させなければなりません。
我々のパソコンのOSはwindowsやmacOSがほとんどです。
ちなみにOSとは、パソコンを動かす基本となるソフトウェアのこと。
しかし実際にアプリやサイトを公開する時に使うサーバーはほとんどがLinux(リナックス)というOSで動いています。
ですのでmacOSやwindowsでもLinuxの環境で開発するために仮想マシンを立ち上げます。
またLinuxにはたくさんの種類があります。これを選択しないといけません。
またこの種類の形式をディストリビューションと言います。
種類はCentOS,redhat,debian,ubuntuあたりが有名です。

では仮想マシンを作るにはどうすればいいんでしょうか？
仮想マシンを作るソフトウェアをインストールしましょう。
この代表例が[VirtualBox](https://www.virtualbox.org/)です。

しかしこのVirtualBoxの設定が複雑なので、VirtualBoxの設定や操作を楽にするソフトウェアもインストールしてあげましょう。
それが[Vagrant](https://www.vagrantup.com/Vagrant)です。

基本的にはVagrantを操作することで裏でVirtualBoxが機能する仕組みです。

##つまずいた時の対処法
###何がなんだかわからない時
つまずいたらとにかく調べましょう。
自分が理解できてない単語を調べてみる。
「〇〇とは」と調べてみる。
###エラーが出てパニクった時
エラーコードが必ず書かれているはずです。
そのコードを読めばだいたいの原因がわかるはず！
でもエラーコードって英語で書かれているからよくわからないですよね？
ですので**エラーコードをコピーして検索する**という手法はよく使います。
あとは頑張ってエラーメッセージを読むことですね。
いずれはエラーメッセージを読めるようにならないといけないと思うし、英語の勉強だと思って頑張って読みましょう。
あと原因を特定できるようにエラーを吐き出すコードを書いておくのも忘れずに！！
フォルダの区切りについて

任意のフォルダ一覧を取得する際に少し調べたので備忘録として。

# 環境
OS：Windows 10
言語：Python 3.6.5

# フォルダの区切り

Pythonでフォルダを取り扱う場合に、エクスプローラからパスコピーするとバックスラッシュ(\\)で区切った形式でコピーされる。

```python:GetDir_1.py
# エクスプローラからコピーしたパスをそのまま使った場合
path = "C:\hoge\"
dirs = []

for f in os.listdir(path):
    if os.path.isdir(path + f):
        dirs.append(f)

print(dirs)
```

これだと
`SyntaxError: EOL while scanning string literal`
になる。

# 回避策
①フォルダの区切りをスラッシュ(/)に変更する。

```python:GetDir_2.py
# フォルダの区切りを/に変更
path = "C:/hoge/"
dirs = []

for f in os.listdir(path):
    if os.path.isdir(path + f):
        dirs.append(f)

print(dirs)
```

②バックスラッシュを重ねる。

```python:GetDir_3.py
# フォルダの区切りを/に変更
path = "C:\\hoge\\"
dirs = []

for f in os.listdir(path):
    if os.path.isdir(path + f):
        dirs.append(f)

print(dirs)
```

③raw文字列を使う。

```python:GetDir_4.py
# raw文字列を使用
# この場合パスの末尾に「\」は付けれないので注意
path = r"C:\hoge"
dirs = []

for f in os.listdir(path):
    if os.path.isdir(path + f):
        dirs.append(f)

print(dirs)
```
Node-redのJSonataの事例1 〜グローバル変数の検索に別の変数の値を使う〜

#はじめに
Node-redではJSonataが使えます。
これ結構便利なんですが、あまりJSonataの本家サイトのガイド見ても基本的な事しか書いてないので、色々試行錯誤した結果をメモします。
（全三部作です。）

#グローバル変数で、検索時に変数を使いたい時

例えば、Global変数の中に遊園地の一覧が配列で格納されたTMPというJSONがあるとします。

```json
[
  {
    "name":"東京ネズミーパーク",
    "pref":"Chiba",
    "serial":000001
  },
  {
    "name":"ドイツの村",
    "pref":"chiba",
    "serial":000002
  },
  {
    "name":"読み書きランド",
    "pref":"tokyo",
    "serial":000003
  }
]
````
それで、例えばchibaのテーマパークのシリアルを一覧したい場合、JSonata的には

```
$globalContext( "TMP" )[ pref = "chiba"].serial
```

と書けば良いんだけど、この**"chiba"**に当たる箇所に変数を使いたくなっちゃったんです。
だけどどーにもちゃんと動かない。
そこでFunctionを使うと上手く動きます。
（ちなみに今回の例では、別途書く予定の記事の仕込みとして、$joinで一つのテキストに繋げてます。。）

```

$join(function($section , $tmplist ){
   $tmplist[ pref = $pref ].serial
}(
   $._pref,
   $globalContext( "TMP" )     

), " ")
```

###一応解説すると、、

```
function( $a, $b ){
   $a & $b
}( $A, $B )
```

この{}内に処理内容を記述して、後ろの()内に渡したい引数を記載する感じで書けます。

#本家のガイド
https://docs.jsonata.org/programming.html#functions


以上です。ありがとうございました。

#第二弾の記事はこちら
https://qiita.com/kouichirou/items/d58a251eef3e50658f37
Active Recordのhas_and_belongs_to_manyとhas_many :throughについてもくもく考える会その２

### はじめに :tea: :feet: 
こんばんは。
今日ももうこんな時間になってしまいました。 :night_with_stars: :sleeping: 
 `has_many :through` について読むことを目標にしつつ、
Dockerを勉強するために最近本腰を入れて入門したRustで折角だからと小さいソフトウェアを開発していたり(完全に `has_many :through` を読むのに疲れてしまい寄り道していたという反省)、朝測った体重が増加していたことにショックを受けたりと色々あった１日でした。
### よんだ :eyes: (理解したとは言えないのは私の不徳の致すところ
https://github.com/rails/rails/blob/b13a5cb83ea00d6a3d71320fd276ca21049c2544/activerecord/lib/active_record/associations.rb#L1368
### 結果というなの感想ふわっと :eyes: :sunflower:  
- `has_and_belongs_to_many` になかった `through` についてのReflectionを作成している。気合(のようなもの)を入れて読む必要がある。
一つのファイルに複数classを定義しているのを何度か見かけているのだけど自分の現在関わっているrailsプロジェクトではあまり見ない。自分も参加してから覚えている限りそういうファイルを書いたことがない。どういう時に複数クラスを一つのファイルに定義すると効果的なんだろう？

https://github.com/rails/rails/blob/ed1eda271c7ac82ecb7bd94b6fa1b0093e648a3e/activerecord/lib/active_record/reflection.rb#L25

https://github.com/rails/rails/blob/master/activerecord/lib/active_record/reflection.rb#L19
https://github.com/rails/rails/blob/master/activerecord/lib/active_record/reflection.rb#L768

- [delegate](https://github.com/rails/rails/blob/fc5dd0b85189811062c85520fd70de8389b55aeb/activesupport/lib/active_support/core_ext/module/delegation.rb#L154)してる。なんとなく `:through` がやってることに気づいた気がする・・・

https://github.com/rails/rails/blob/master/activerecord/lib/active_record/reflection.rb#L769
https://github.com/rails/rails/blob/fc5dd0b85189811062c85520fd70de8389b55aeb/activesupport/lib/active_support/core_ext/module/delegation.rb#L200

- delegateのtoオプションを読んでいく。
https://github.com/rails/rails/blob/master/activerecord/lib/active_record/reflection.rb#L803

### 力尽きた感ある。_:(´ཀ`」 ∠):_
でもなんとなく `has_and_belongs_to_many` より `:through` の実装は `delegate` してることが主なんだな。
だから、関連を持ったモデルのattributeにアクセスできるのかとふわっとイメージできた。

昨日と今日でふたつの多対多実装を読んでみた。
どちらがどうだという理解までまとめるのいけるのか？と不安になってきた。
明日は別のテーマにして少し軽いものをはさみたい気持ち。。

では良い夜をおやすみなさい。
Happy coding! :sleeping:
`sshpass` で秘密鍵のパスフレーズを自動入力する

**パスフレーズ付きの秘密鍵を必要とする** SSHサーバーの設定で、SSHのログインを `sshpass` を用いて自動化したかったのですが、
単純に `sshpass -f ./key_password ssh <options>` と実行するだけでは、パスフレーズの入力が求められるままでした。

SSH/SCP のログイン自動化に sshpass が便利すぎた - CUBE SUGAR CONTAINER
https://blog.amedama.jp/entry/2017/06/03/131852


## 解決法: パスフレーズ入力のプロンプトを検出できるようにする

今回の原因は、 **パスフレーズ入力を求める表示(プロンプト)が `sshpass` で検出できなかったことです。**
この場合は `-P "Enter passphrase for key"` のオプションをつけましょう。

```bash
$ sshpass -f ./key_password -P "Enter passphrase for key" ssh -o StrictHostKeyChecking=no -i ./id_rsa user@localhost
```

`ssh -o StrictHostKeyChecking=no -i ./id_rsa user@localhost` は `sshpass` を使わない場合と同じSSHのコマンドになります。
`sshpass` が関わる部分はこれよりも前になります。

`-o StrictHostKeyChecking=no` をつけるようにしましょう。


### `-P` オプションについて

`-P` オプションについては `sshpass` の使い方に書いてあります  💡

```bash
$ sshpass
Usage: sshpass [-f|-d|-p|-e] [-hV] command parameters
   -f filename   Take password to use from file
   -d number     Use number as file descriptor for getting password
   -p password   Provide password as argument (security unwise)
   -e            Password is passed as env-var "SSHPASS"
   With no parameters - password will be taken from stdin

   -P prompt     Which string should sshpass search for to detect a password prompt
   -v            Be verbose about what you're doing
   -h            Show help (this screen)
   -V            Print version information
At most one of -f, -d, -p or -e should be used
```

`sshpass` を用いずにSSHでログインすると、秘密鍵のパスフレーズを入力するプロンプトは次のように表示されました。

> Enter passphrase for key './id_rsa':

この表示が `sshpass` で想定されているモノと違うようなので、コレを `-P` オプションでマッチさせると `sshpass` がパスフレーズを入力してくれるようになります 😀
KERASで学習済みのモデルをロードして画像1枚を判別

そこら中に似たようなスクリプトがあると思いますが
忘れないように自分用メモ

#想定のモデル
以前作った[コレ](https://qiita.com/tom_eng_ltd/items/43ce31a01971d0b21ec7)なので、ラベル名は某アニメのキャラクター5名・・・

#確認環境
　python3.6.6
　Tensorflow:1.10.0
　Keras：2.2.2

#スクリプト全体

```python

from keras.models import load_model
import numpy as np
from keras.preprocessing.image import img_to_array, load_img

jpg_name = '識別したい画像ファイル名'
model_file_name='重みモデルのファイル名'

model=load_model('./フォルダ名/' + model_file_name+'.h5')

img_path = ('./フォルダ名/' + jpg_name + '.jpg')
img = img_to_array(load_img(img_path, target_size=(224,224)))
img_nad = img_to_array(img)/255
img_nad = img_nad[None, ...]
    
label=['homura','kyoko','madoka','mami','sayaka']
pred = model.predict(img_nad, batch_size=1, verbose=0)
score = np.max(pred)
pred_label = label[np.argmax(pred[0])]
print('name:',pred_label)
print('score:',score)
```

#解説
一応解説を・・・

#import

```python
from keras.models import load_model
import numpy as np
from keras.preprocessing.image import img_to_array, load_img
```

#データ読込

```python
#ファイル名
jpg_name = '識別したい画像ファイル名'
model_file_name='重みモデルのファイル名'

#学習済みモデルの読込
model=load_model('./フォルダ名/' + model_file_name+'.h5')

#画像の読込
img_path = ('./フォルダ名/' + jpg_name + '.jpg')
img = img_to_array(load_img(img_path, target_size=(224,224)))
#0-1に変換
img_nad = img_to_array(img)/255
#4次元配列に
img_nad = img_nad[None, ...]
```

#判別と表示

```python

#表示したいクラス名（任意設定）
label=['homura','kyoko','madoka','mami','sayaka']
#判別
pred = model.predict(img_nad, batch_size=1, verbose=0)
#判別結果で最も高い数値を抜き出し
score = np.max(pred)
#判別結果の配列から最も高いところを抜きだし、そのクラス名をpred_labelへ
pred_label = label[np.argmax(pred[0])]
#表示
print('name:',pred_label)
print('score:',score)
```
DirectX11のディファードコンテキスト

　DirectX11にはマルチスレッドでコマンドを生成できるディファードコンテキストというものがあるのですが、どうもこれNVIDIA製のGPUでしか使えないようで、AMD、IntelはNGのようです。
　AMD、Intel製の場合、ソフトウェアでエミュレーションするので、メインスレッドでしか使えない即時コンテキストを使う場合よりも結果が悪くなることがあるようです。
　なので、下記のように初期化時にデバイスの情報を取得して、シングルスレッド描画を行う場合とマルチスレッド描画を行う場合とで、処理を分岐させる必要があるようです。

```C++
//デバイスのマルチスレッドサポートの機能を調べる。
m_pd3dDevice->CheckFeatureSupport(
	D3D11_FEATURE_THREADING,
	&m_featureDataThreading,
	sizeof(m_featureDataThreading)
);
		
if (m_featureDataThreading.DriverCommandLists == TRUE) {
	//デバイズがディファードコンテキストに対応しているので
	//ディファードコンテキストを作成。
	m_pd3dDevice->CreateDeferredContext(0, &m_pDeferredDeviceContext);
}
```
ディファードコンテキストってただのコマンドバッファじゃなかったんですね・・・。
【Vue.js入門】v-ifを活用して空配列時にToDoアプリに「Todoはありません」と表示しよう！

# 空配列時にToDoアプリに「Todoはありません」表示する
前回までは[【Vue.js入門】v-bindでclassを操作してToDoアプリの完了状態を管理してみる](https://qiita.com/watuyo_2/items/4f553cd21b8da30138c6)にて構築していました!

今回のサンプルコードは[こちら](https://codepen.io/tsu2626/pen/pQobEW)です!
ToDoアプリ上にToDoが存在しない（空配列時）にはTodoはありません」と表示できるようになります。
![Screen Capture 47.mp4.gif](https://qiita-image-store.s3.amazonaws.com/0/253605/07d0f563-90df-0b69-6e11-c4f91ab0cfba.gif)

#  v-ifディレクティブとは？
何かしらの言語に触れたことのある方なら直感的に使用できると思います。

```html
<li v-if="todos.length">
  処理A
</li>
<li else>
  処理B
</li>
```
上記のコードなら、todos(todo配列)にtodoがあれば**処理A**、todoがなければ**処理B**が実行されるようになります。

# 早速、v-ifを使ってみよう！
上で説明した通り、実装してみましょう。

```html
    <h1>My Todo Lists</h1>
    <ul v-if="todos.length">
　　　　　　　　　　　　//todoが存在したらの処理A↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
      <li v-for="(todo, index) in todos">
        <input type="checkbox" v-model="todo.isDone">
        <span :class ="{done: todo.isDone}"> 
          {{ todo.title }}
        </span>
        <span @click="deleteItem(index)" class="command">[☓]</span>
      </li>
　　　　　　　　　　　　　//todoが存在したらの処理B↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
    </ul>
    <ul v-else>　
　　　　　　　　　　　　//todoが存在しなかったらの処理↓↓↓↓↓↓↓↓
      <li>ToDoはありません</li>
　　　　　　　　　　　　//todoが存在しなかったらの処理↑↑↑↑↑↑↑↑
    </ul>
```
**<li v-for="(todo, index) in todos">**タグ内では、todos(todo配列)にtodoがあれば、[前回](https://qiita.com/watuyo_2/items/4f553cd21b8da30138c6)までに実装した**処理A**が実行され、以下のようにUIに反映されます。
![スクリーンショット 2018-11-03 23.37.44.png](https://qiita-image-store.s3.amazonaws.com/0/253605/c9650ed0-de1e-c077-8e55-13bc16246bb6.png)

**li v-else**では、**!todos.length**すなわちtodoがなければ**処理B**が実行されるようになります。
**todos**が空配列の場合に実行されるので「ToDoはありません」と表示させます。
![スクリーンショット 2018-11-03 23.41.22.png](https://qiita-image-store.s3.amazonaws.com/0/253605/c3bb20cd-2738-5376-106f-975519657084.png)

これで一通り実装できたのできました！
![Screen Capture 47.mp4.gif](https://qiita-image-store.s3.amazonaws.com/0/253605/07d0f563-90df-0b69-6e11-c4f91ab0cfba.gif)

よりToDoリストに近づいてきましたね！！
[サンプルコード](https://codepen.io/tsu2626/pen/pQobEW)もあるので実装してみてください！
次回くらいからドットインストール的にはローカルストレージに入れるはず…（笑）

※2020年1月更新
##MENTAでコードレビューやプログラミング勉強相談を行っています！
お気軽にメッセージを下さい！
[プラン](https://menta.work/plan/1461)はこちらになります！
CarloでNode.jsのツールにGUIをもたせる

先日、GoogleがCarloというライブラリをリリースしました。

https://github.com/GoogleChromeLabs/carlo

少し気になったので、軽くメモを残しておきます。

![f4e15e2e22666a5bb4d1b7b0dd1b596f.png](https://qiita-image-store.s3.amazonaws.com/0/8808/bd297566-c3d7-5617-c205-3f9fc9394b45.png)

## Carlo is 何

CarloはChromiumを画面描画エンジンとして動作するNode.js アプリケーションフレームワークです。
Node.js、ChromiumともにV8が動作するため、JavaScriptのみでデスクトップアプリが作れるよ、というわけです。

公式のサンプルとほぼ一緒ですが、次のようにコードを書くと、index.htmlがデスクトップアプリ風に立ち上がります。

```js
const carlo = require('carlo');

(async () => {
  const app = await carlo.launch();

  // html/CSS/JavaScriptを配置しているフォルダを教える
  app.serveFolder(__dirname);

  // エントリポイントとなるHTMLをopenする
  await app.load('index.html');
})();
```

URL欄を消したり、カメラや通知のアクセスが最初から有効化されるなど、デスクトップアプリとしての最低限部分はCarloが自動でやってくれます。

### Electronとの違い

JavaScriptのデスクトップアプリケーションエンジンという意味で、CarloはElectronやNW.jsと似ています。
これらのフレームワークとCarloの一番の違いは「ローカルにインストールされたChromeが利用されること」です[^no_chrome]。
ElectronもNW.jsも、Node.jsとChromiumをビルドした独自のランタイムを必要とします。これらのランタイムは、アプリケーションにバンドルして配布するのが一般的なため、最終的な配布物のファイルサイズが数百MBがなってしまいます。
Carloはこのような独自のランタイムを必要としません。
ユーザーがインストールしているブラウザをそのまま利用するため、配布サイズを軽くできます。

一方で、ただのシンプルなChromeであるということは、ElectronやNW.jsが独自に拡張している箇所（ネイティブのダイアログやタスクトレイへのアクセス、カスタムURLスキーマの登録など）をCarloがサポートしていくとは考えにくく、これらの機能を期待する場合はCarloよりも他のフレームワークを使った方がよいでしょう。

[^no_chrome]: Chrome/Chromiumがローカルにインストールされていない場合、コンソールにエラーメッセージが寂しく表示されて終了するようです。

### Node.jsをバンドルするかどうか
Carloで開発したアプリケーションのターゲットユーザーがNode.jsをインストールしているケースであれば、要するに開発者ということですが、package.jsonのbinにでも登録しておけば、普通にNPMにpublishするだけで配布完了です。
[Angular Console](https://angularconsole.com/)とか[Vue CLI UI](https://cli.vuejs.org/dev-guide/ui-info.html)のような「開発支援ツールにGUIをつけて提供したい」みたいなケースであれば、Carloは結構向いてそうです。

ブラウザはともかくとして、Node.jsがインストールされていないユーザーに対してはアプリケーションにNode.jsのみバンドルする必要がでてきます。
Calroの開発チーム曰く、 [pkg](https://github.com/zeit/pkg) を利用すればいいんじゃね？とのことなので、Carloとしてのサポートは特になさそう。

### CarloとPuppeteerの関係

Carloは、Node.jsとChromiumとの連携にPuppeteerを使っています。Puppeteerということは[CDP(Chrome DevTool Protocol)](https://chromedevtools.github.io/devtools-protocol/)ですね。
NPMのpuppeteerパッケージは、自動でChromiumのランタイムをpost installで持ってくるので結構重いのですが、この機能をオフにしただけのpuppeteer-coreというパッケージがあり、Carloはこちらを利用しています。
というか、コードを読んでみればわかるとおり、CarloはPuppeteerのラッパーでしかないです。それも相当薄い。
例えば、CarloのAPIとしてNode.js側の関数をChrome側へ公開するための `exposeFunction` とか生えていますが、完全にPuppeteerの同名の関数と一緒です。

```js
  // ブラウザ側のコードでcwdという関数を呼び出すと、こいつが動作する
  await app.exposeFunction('cwd', () => process.cwd());
```

なんなら、 `app.page_` でPuppeteerのPageインスタンスにアクセスできてしまうので[^page]、現状ではCarloのAPIとしては利用できないようなメソッドをサクッと動かすことも簡単にできてしまいます。

[^page]: もちろんプライベートなフィールドなので、完全に自己責任の世界です。

基本的にCarloがやってくれているのは、Node.js + Chrome間でObjectを共有する機能と、`https://domain/<ファイル名>` というURLをhookして `serveFolder` したフォルダ内のファイルを提供する機能くらいです。その気になればPuppeteerだけで書くのも全然イケそう。

### その他

Calroを触ってみてから気づいたのですが、生JavaScriptではなく、トランスパイラ付きでコードを書くのが地味に面倒です。

TypeScriptの型定義が無いとかは別にまぁ良いんですけど、Electronと違ってレンダラ側ではNode.jsが使えないため、 `require` が動作しないんですよね。
一方でNode.jsも必要なので、`--module es2015` というわけにもいかず、UMDにしてみたら依存パッケージ側でtscに怒られ、、といった消耗をしてしまいました。


### まとめ

所感として、ガッツリとしたデスクトップアプリを作るというよりも、CLIとして提供していたようなNode.jsのツールに対して、少しだけGUIを足したい、みたいなケースに一番向いてそうです。

パッと思いついたのは、webpackをローカルで回してstatsを可視化する、とかそういう系統のやつ。

皆さんも思いついたら何か作ってみてはいかがでしょうか。それでは、また。
Nuxt.jsのbundleサイズを55%削減したwebpack周りの小技

Nuxt.jsとLaravelを使って「Devicebook」（[https://devicebook.me](https://devicebook.me/)）というWebサービスを個人開発しています。
今回はNuxt.jsのwebpack周りを改善し、**bundleファイルを151kbから67kb（約55%の削減）にした方法**をご紹介します。

## webpack-bundle-analyzerで分析
Nuxt.jsでは標準でwebpack-bundle-analyzerが組み込まれており、これでbundleされたファイルの中身を分析できます。

```nuxt.config.js
build: {
  analyze: true
}
```

anayzeオプションをtrueにし、Nuxt.jsプロジェクトをビルドしてみましょう。そうすれば以下のような画面が開かれます。

![b863486d03c6e960d8444a9b73e670ed.png](https://qiita-image-store.s3.amazonaws.com/0/109606/74a15516-5b3a-b493-cd5d-006d6cde8392.png)

この画像が改善前のファイルです。これを参考にしながら削れそうな所を探していきます。

## 55%の削減ができた3つのポイント

### 1. lodashのimportを改善する（24kb→5kb）

lodashを`import _ from 'lodash'`のように読み込んでしまうと、全てのlodash関数などがbundleされてしまいます。
それを回避するため、使用する関数のみをimportするように変更します。

```~/utils/my-util.js
// import _ from 'lodash'
import escape from 'lodash/escape'

export default function (string) {
  // ...
  return escape(string)
}
```

これでbundleされるのはescape関数のみとなります。lodashはgzippedのものでも25kbほどあるため、きちんと気をつけておきましょう。

### 2. Vuetifyのa-la-carte（110kb→20kb）
VueのマテリアルUIフレームワークといえば[Vuetify.js](https://vuetifyjs.com/ja/)が人気でわたしもお世話になっています。
しかしそのまま`Vue.use(Vuetify)`のようにしてしまうと、Vuetifyの全てのコンポーネントなどがbundleされてしまいます。

そこでa-la-carte（フランス語で、メニューから選んだ/お好みの料理の、などの意味）にimportする必要があります。
詳細はVuetify.jsのドキュメントに書いてあるのでそちらを参照してください。
https://vuetifyjs.com/ja/guides/a-la-carte

### 3. Vue.jsの Dynamic Import（20kb→5kb）

例えば以下の様に、デバイスによって表示するコンポーネントを切り替えたい時があります。

```MyComponent.vue
<template>
  <div>
    <MobileComponent v-if="$device.isMobile"/>
    <DesktopComponent v-else/>
  </div>
</template>

<script>
import MobileComponent from './MobileComponent'
import DesktopComponent from './DesktopComponent'

export default {
  components: { MobileComponent, DesktopComponent }
}
</script>
```

この時、スマホのユーザーにはMobileComponentしか表示しませんが、DesktopComponentも一緒にbundleされたjsファイルを読み込んでしまいます。

それを回避するため、Vue.jsには[非同期コンポーネント](https://jp.vuejs.org/v2/guide/components-dynamic-async.html#%E9%9D%9E%E5%90%8C%E6%9C%9F%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88)という機能があります。
非同期コンポーネントを利用するためには、以下のように修正します。

```MyComponent.vue
<script>
export default {
  components: {
    MobileComponent: () => import('./MobileComponent'),
    DesktopComponent: () => import('./DesktopComponent')
  }
}
</script>
```

こうすることで、MobileComponentとDesktopComponentが一緒にbundleされることはなく、ユーザーは片方のcomponentファイルを読み込みます。

## 他のよくある改善点
例えばDateTimeライブラリである[moment](https://github.com/moment/moment)はかなりサイズが大きいため、シンプルな時間操作のみを求めているのであれば[Day.js](https://github.com/iamkun/dayjs)という2kbに軽量ライブラリがおすすめです。
またmomentを利用する場合には必要なロケールのみを読み込むなどをして余計なファイルをbundleしないようにしましょう。

それでは、皆さんも良きNuxt.js生活を！
wsl でパスワードを忘れてしまった際の対処


wsl 上の Linux でパスワードを忘れて `sudo hogehoge` などができなくなってしまったので、その対処を行った記録です。

root ユーザーになって強制的にパスワードを変更します。

root になるので、なんらかのミスで sudoers から消してしまった、などという場合にも有効です。

今回は ubuntu 18.04 で実施しましたが、他のディストリビューションでも同様の手順で回復させることができると思います。

# 実施方法の確認

cmd.exe を実行して普通のコマンドプロンプトを開いて、`wsl --help` と入力すると、以下のようなヘルプが出ます。

```
使用法: wsl.exe [option] ...
オプション:
    -d, --distribution <ディストリビューション名>
        指定したディストリビューションを起動します。

    -e, --exec <コマンド ライン>
        指定された Linux コマンドを実行します。残りの引数は
        実行するコマンド ラインとして使用されます。

    -u, --user <ユーザー名>
        指定したユーザーとして実行します。

    --help
        この使用法の情報を表示します。

    --
        引数の解析を停止し、残りの引数を Linux プロセスに渡します。
```

# 実際にやってみる

help の通りに `wsl -u root` を実行すると、

```
root@pc:~#
```

のようにrootユーザーでログインできました。

あとは、普通のrootでの操作と同様、 `passwd username` を実行し、画面に従って新しいパスワードを設定すれば大丈夫でした。
SublimeText3 JSHint設定(MAC)


Sublime TextにJSHint設定備忘録
## JSHint 公式サイト
https://jshint.com/
##JSHintとは
JavaScriptコード解析ツール
##設定環境
- Sublime Text3
- node v10.8.0
- jshint v2.9.6
- Sublime Textパッケージ SublimeLinter
- Sublime Textパッケージ SublimeLinter-jshint

##設定ファイル作成(.jshintrc)
デフォルト設定だとブラウザオブジェクト,console,alertに対してエラー表示がされるため
JSHint用の設定ファイルを作成する。
設定ファイルのOptionにつきましては下記参考記事より内容ご確認頂ければと存じます。

**参考記事**
https://qiita.com/xorphitus/items/f26ec8fbe17c317d3994

作成するファイル名は.jshintrcHOMEディレクトリ直下にファイルを作成

```~/.jshintrc
{
 "browser": true, //ブラウザオブジェクト
 "devel": true, //alert,console
 "jquery": true,//jQueryオブジェクト
 "indent": 1, //インデントサイズ
 "undef": true, //var宣言無し変数禁止
 "unused": true, //変数未使用禁止
 "trailing": true //行末ホワイトスペース禁止
}
```
※上記パスのユーザー名はご自身のユーザー名となります。

## SublimeTextに.jshintrcファイルを設定

SublimeLinter.sublime-settingsファイルの場所はSublimeTextツールバーより下記場所から変更可能
**SublimeText > Preferences > Package Settings > SublimeLinter > Settings**

```SublimeLinter.sublime-settings
{
 "linters": {
  "jshint": {
   "args": ["--config","/Users/ke/.jshintrc"]
  }
 }
}
```
Ruby配列、ハッシュ、シンボルなどまとめ

#配列
配列はブラケット[]を使った配列式で生成する

```ruby.rb

[1,2,3]

```
上記は1,2,3と言う3つの要素が格納された配列オブジェクトを生成

次は文字列、false、nil、数値、配列の5つが要素として格納された配列を生成

```

["abc", false, nil, 4, [1,2,3]]
```

配列はArrayと言うクラスのインスタンスオブジェクトになる。

配列に要素を追加するには<<を用いる。

#ハッシュ
ハッシュは内部的にデータとキーと対応づけて格納しておくデータ構造。
rubyのハッシュはHashクラスで実現される。
ハッシュは波括弧{}を使って生成する。
キーと値の組み合わせを記述する。

```
{ :tokyo => 1234, :miyagi => 5678 }
```

ハッシュのキーにシンボルを使用することも出来る。

色々なハッシュ

文字列をキーにしている

```
{ "miyagi" => 123 }
```

上記と同じ意味でハッシュロケットの代わりにコロンを使用している

```
{ "miyagi": 123 }
```
シンボルをキーにしている

```
{ :miyagi => 123 }
```

上記と同じ意味でコロンを使っている

```
{ miyagi: 123 }
```

数字をキーにしている。

```
{ 1 => 123 }
```

ハッシュに格納されている値を取得したいときはburaketto[]の中にキーを指定する。

```
options = { font_size: 100, color: 'red' }
puts options[:font_size]
#結果 100
```

新たな値を追加したいときや、値を更新したいときは[]=を用いる

```
options = { font_size: 100, color: 'red' }
options[:font_family] = 'Arial'
puts options[:font_family]
#結果 Arial
```

ハッシュ内の全てのキーを得るにはkeys、全ての値を得るにはvaluesを使用する。
またeachを使ってキーとペアの値を順次得ることが出来る。

```
options = { font_size: 100, color: 'red' }
options.each do |key, value|
  puts key
  puts value
end
```
C++ ３次元配列の動的確保

# C++ 動的な３次元配列の利用

３次元配列を動的に確保する方法を記載する。
確保の方法について、混乱したので、自分なりに整理した。

## 確保する３次元配列のイメージ

３次元配列は以下のようなものをイメージする

Z：高さ
X：奥行
Y：横幅

3次元配列

![3次元.PNG](https://qiita-image-store.s3.amazonaws.com/0/181240/3850bbdb-6e78-565b-7d85-ecdce3bfbff8.png)

## メモリ確保

例）string型の以下のサイズの３次元配列を作成する
Z：高さ　5　
X：奥行　4
Y：横幅　6

実装は以下の手順で実施する

1. トリプルポインタでポインタを宣言
2. Z方向にメモリを必要数割り当て　メモリ割り当てイメージ(緑色)
3. Z方向に確保したメモリに対して、X方向にメモリを必要数を割り当て　メモリ割り当てイメージ(青色)
4. X方向に確保したメモリに対して、Y方向にメモリを必要数を割り当て　メモリ割り当てイメージ(黄色)

```C++
    string ***cube = new string**[Z];	// 1,2
    for (int z = 0; z < Z; z++) {
        cube[z] = new string*[X]; // 3
        for (int x = 0; x < X; x++) {
            cube[z][x] = new string[Y]; // 4
        }
    }
```

#### メモリ割り当てイメージ
![メモリ割り当て.PNG](https://qiita-image-store.s3.amazonaws.com/0/181240/cd1d17fe-3845-e792-7667-cc2a32e0152a.png)



## メモリ開放

メモリ確保とは逆の手順で開放する

1. X方向に確保したメモリに割り当てたY方向のメモリを解放
2. Z方向に確保したメモリに割り当てたX方向のメモリを解放
3. Z方向に確保したメモリを解放

```C++
    for(int z = 0; z < Z; z++) {
        for (int x = 0; x < X; x++) {
            delete[] cube[z][x]; // 1
        }
        delete[] cube[z]; // 2
    }
    delete[] cube; // 3
```

## 実装例

```C++
#include <iostream>
#include <string>
#include <sstream>      // std::ostringstream
using namespace std;

int main(void){

    // 3次元配列
	//     Z
	//     |
	//     |
	//     |___________Y
	//    /
	//   /
	//  X

    //
    // 3次元配列のサイズを入力
    //
    string str;

    cout << "?Y >";
    getline(cin, str);
    int Y = stoi(str);

    cout << "?X >";
    getline(cin, str);
    int X = stoi(str);

    cout << "?Z >";
    getline(cin, str);
    int Z = stoi(str);
    
    //
    // 3次元配列の動的確保
    // string型の３次元配列
    //
    string ***cube = new string**[Z];
    for (int z = 0; z < Z; z++) {
        cube[z] = new string*[X];
        for (int x = 0; x < X; x++) {
            cube[z][x] = new string[Y];
        }
    }
    
    //
    // 配列へのアクセス
    //

    // テスト用に適当なデータを設定する
    // (Z,X,Y) の形式で文字列データを設定
    for( int z = 0; z < Z; z++ ){
        for( int x = 0; x < X; x++ ){
            for( int y = 0; y < Y; y++ ){
                cube[z][x][y] = "(" + to_string(z) + "," + to_string(x) + "," + to_string(y) + ")";
            }
        }
    }
    
    // テスト用データの出力
    for( int z = 0; z < Z; z++ ){
        cout << "--- z(" << to_string(z) << ") ---" << endl;
        for( int x = 0; x < X; x++ ){
            for( int y = 0; y < Y; y++ ){
                cout << cube[z][x][y];
                if( y < (Y-1) ){
                    cout << ",";
                }
            }
            cout << endl;
        }
    }

    //
    // ３次元配列の開放
    //
    for(int z = 0; z < Z; z++) {
        for (int x = 0; x < X; x++) {
            delete[] cube[z][x];
        }
        delete[] cube[z];
    }
    delete[] cube;

    return 0;
}
```
入力フォームの値が複数の時のエラーの退避

参加メンバーを追加(複数登録)してあげた際に必須項目未入力で**作成ボタン**を押下した際、バリデーションエラーが、発生して、その後**メンバーを追加せず**に($_REQUESTがない時に)下記のようなエラーが発生した

```
Warning: array_merge(): Argument #2 is not an array Warning: array_merge(): Argument #1 is not an array
```
```
//入力値が複数あることが想定される時は、空の配列をarray_mergeしようとするとエラーが出るので配列にキャストしてあげる
$_SESSION['belong_member'] = array_merge($_SESSION['belong_member'],(array)$_REQUEST['addressId']);
```
WindowsのVSCodeでGit Bashをターミナルに設定する

Windowsでターミナル操作をするとき、コマンドプロンプトよりBashを使えた方が色々なLinuxコマンドが使えて便利だと思います。そこで、WindowsでBashが使えるGit Bashをインストールして、更にVSCodeのターミナルに組み込むことで、Bashを備えたIDEのような開発環境を構築します。

環境

* Windows 7 (SP1) Ultima x64
* VSCode(User Installer) x64 (Ver:1.28.2)

## Gitをダウンロードする

Windows用のGitを次のリンク先よりダウンロードします。

[https://git-scm.com/download/win](https://git-scm.com/download/win)

個人的にインストーラー版ではなくポータブル版の方が好きなので、表示されるインストーラーファイルのダウンロードをキャンセルします。

![git-setup-dl.png](https://qiita-image-store.s3.amazonaws.com/0/299676/a61b3f5a-de29-0b96-52f8-cf559fc19a88.png)

表示されるダウンロードページで赤枠の64bit用GitのPortableをクリックしてダウンロードします。

![git-dlpage.png](https://qiita-image-store.s3.amazonaws.com/0/299676/1ada1df5-00ba-1b3f-a1b8-fa2ba60855d6.png)

![git-portable-dl.png](https://qiita-image-store.s3.amazonaws.com/0/299676/5837315b-08b4-d539-9140-b98533b17d49.png)

ダウンロードしたファイルを実行して、解凍します。

![git-portable-dl.png](https://qiita-image-store.s3.amazonaws.com/0/299676/7663def8-d946-1c4d-a157-0bb07e92d96a.png)

解凍先を指定します。（今回はCドライブに作成したappフォルダに解凍します）

![git-unpack-ok.png](https://qiita-image-store.s3.amazonaws.com/0/299676/a10464f9-66ab-c3d2-9f7e-b55e4e5e1533.png)

解凍されるのを待ちます。

![git-unpack-wait.png](https://qiita-image-store.s3.amazonaws.com/0/299676/ff7ff28c-54a8-8073-6ba0-ee79fa27ba96.png)

暫く待つと解凍完了が終了し、インストールの完了です。

## VSCodeにGit Bashを設定します。

VSCodeの左下のギアアイコンからメニューを開き、設定をクリックしてSettingsを開きます。

![settings.png](https://qiita-image-store.s3.amazonaws.com/0/299676/3f52ffff-5d55-aaba-a708-f7ed5371749e.png)

表示されたSettingsの検索バーにterminal.integrated.shell.windowsを入力し、ターミナル設定をフィルタリング表示させ、設定値にGit Bashまでのパスを入力します。

![vscode-terminal.png](https://qiita-image-store.s3.amazonaws.com/0/299676/bf4ea75a-cf63-d2c7-f1c6-a14d795ed7d0.png)

```text
C:\app\PortableGit\bin\bash.exe
```

最後に、Ctrl+@で開いたターミナルで新しいターミナルを＋アイコンから開くと、新規のターミナルがGit Bashなることを確認できます。

![vscode-bash.png](https://qiita-image-store.s3.amazonaws.com/0/299676/c6df5dd7-d290-7c1e-13f9-022829503663.png)

因みに上図は、pythonの仮想環境を含むプロジェクトフォルダを開いている状態で新規のターミナルを開くと、自動的にアクティベートが実行され、ターミナルも仮想環境envに自動的に入ることができます。

参考： [Pythonで仮想環境virtualenvを作成し、Visual Studio Codeで自動適用する開発環境を構築する](https://qiita.com/psychoroid/items/6646d45d6a019f5cf16f)

## （おまけ）Git Bashの表示を少しカスタマイズする

VSCodeとは別にGit Bashを起動するには、インストール先フォルダ(C:\app\PortableGit)のgit-cmd.exeを実行します。

表示されたターミナルウィンドウで右クリックメニューからOptions...を選択し、項目のLooksのThemeを選択肢から選ぶと、ターミナル文字の色などを変更できます。その他、ウインドウの大きさをはじめとした細かい設定を変更できますので、個人の好みに合わせて調整してください。

因みに個人的には以下の設定にしています。

概要|項目|設定値
---|:--|:-:
テーマ（フォントの色など）| Looks/Theme|flat-ui
ウィンドウ背景の透過率| Looks/Transparency|Low
ウィンドウの表示列数| Window/Colums|90
ウィンドウの表示行数| Window/Rows|30

![git-bash-window.png](https://qiita-image-store.s3.amazonaws.com/0/299676/6a000952-40bb-7601-4818-c3f0ad502ce1.png)

## 参照リンク

* [Git Bashって使ってる？Windowsで動く意外にすごい便利ツール](https://www.sejuku.net/blog/72673)
* [WindowsでGitを始めたらまず確認！Git Bashの設定&ショートカット](https://www.granfairs.com/blog/staff/gitbash-setting-shortcut)
【AWS】 S3とLambdaの連携で気をるけるべき初歩的なこと

## AWS使ってますか？？
　個人でなり、会社でなり、AWSを使用されている人が最近どんどん増えているのではないでしょうか。たくさんの機能を提供してくれているAWSですが、今回は私の体験談からとてつもなく初歩的なS3の仕様に関して紹介したいと思います。これで皆様が私と同じような体験をしなくて済むように願っています。
　この記事はすでに使われておられる方からすれば何を当たり前なことをと思われるかもしれませんが、私はS3にそんな仕様があるとは知らずに無知なまま使ってしまいました。そんなまだ使ったことないけど使ってみようかなって人向けの記事になります。

## 体験談
### 本当にあった怖い話
　趣味でLambdaを使い、一日一回対象のアカウントのtweetを取得して条件を満たせばretweetするTwitterボットを作成したので、せっかくTwitterのいろいろな情報を取得するならその情報を機械学習とかに使いたいと思い、S3に情報を保存するように改修しました。それに加えてS3に最後に取得したtweetのIDを保存しておいて次はそのID以降のtweetだけを取得させるようにもしようとしました。結果、S3側のLambda連携の設定を作り、Lambdaには以下のような実装をほどこしました。

```js
exports.handler = ()=>{
  var bucket = "id"
  gets3(bucket) //s3からIDをとってくる処理を記述した関数
  doAction() // Tweeterに関する実行関数
  puts3(bucket) //s3にあるIDを更新しようとデータを再度登録する関数
}
```

　二日後取れたデータを確認しようとS3を見てみると、そこには目的のデータファイルは存在せず、あるのは大量のログファイルのみ。最初Lambdaの関数のミスを疑ってLambdaを確認してみたのですが、どうもLambdaはうまくいってるっぽい。そこで膨大なS3に残されたログから適当なものの中身を確認してみました。するとなんと一日一回しか実行させないはずのLambdaのgetとputの処理が常時実行されているではありませんか！これはやばいと思って慌ててLambdaを消して請求を確認してももう後の祭り。無意味にgetとpostを繰り返していた結果、最終的に1900ドル強の請求が発生してました......

### 原因は一体...
　今回このような事態を起こしてしまったのは、会社のメールアドレスで登録していて無料枠超えたことに気づかなかったというのもあったのですが、そもそも根本的にS3の仕様を理解していなかったのが原因でした。一体どういうしようかといいますと

>[https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/with-s3-example.html](https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/with-s3-example.html)より引用
>>重要
>>次のチュートリアルでは、ソース用に 1 つとターゲット用に 1 つの 2 つのバケットを使用していることを前提とします。ソースとターゲットに同じバケットを使用する場合、ソースバケットにアップロードされた各サムネイルは、別のオブジェクト作成イベントをトリガーし、これにより Lambda 関数が再び呼び出されて不要な再帰が行われます。(略)

　つまり、あるバケットにデータが登録されるたびにそれに紐づいているS3が実行されてしまうため、一つの関数でそれに紐づけた一つのバケットにデータを登録する実装をしていた関数はS3の仕様に基づき再帰的に登録を繰り返す無限ループに陥ってしまっていたのです。

## どうするべきだったの
### S3とLambdaを正しく連携させる
　先ほどの引用でもあった通り、再帰的に呼ばれないようにバケットを取得用と登録用の二つに分けておくべきでした。それでは目的が達成できないなら、DB関係のサービスとの連携も考えておくべきでした。S3でデータベース的なことができるならそのまま使えばいいじゃんという安易な発想でよく調べもせずに使うものではなかったです。

### サービスに関する知識を持って使おう
　当たりですが、無料枠があるとはいえ枠を超えれば使用料が発生します。まず使いたいサービスの仕様と料金くらいは初めに押さえておきましょう。私のように押さえたつもりにならないよう、公式のドキュメントを確認しながらどのタイミングで何が実行されるのかしっかり把握してから使われることをお勧めします。

## 最後に
　本当にどうしていいのかわからなくなった状況におちいった場合は、すぐにサポートに連絡しましょう。AWSのコンソールの右上のほうにサポートに相談という項目があるはずです。
　私のようなへまをせずに、皆さんは楽しいAWSライフを送ってください！！
HTMLを一部更新した場合にCoffeeScriptが効かない現象

画面の左半分に検索条件を入力し検索を実行、右半分をrenderして検索結果を表示する画面を作成中にぶち当たりました。
結果表示で縦スクロールする場合は、CSSで用意したマークをクリックすることで、CoffeeScriptのclickイベントで画面上部に戻る機能を実装しようとしていました。

[【jQuery】自動スクロールで任意の位置まで移動させるボタンの作り方](https://www.clrmemory.com/web/jquery-autoscroll/)

ここを参考にして

```html:_ajax_partial.html.erb
<div class="move_top"></div>
```


```pages.coffee

$move_top = $('.move_top')
	
$move_top.on 'click', ->
      $('body, html').animate scrollTop: 0, 'slow'
```
と書いた（cssは参考ページのコピペ）。しかし、クリックしてもイベントが起こらないようである・・・

どうやらscriptとhtml.erbは検索条件の方のhtmlを読み込む際に結びつくため、ajax_partial.html.erbを読み込んだ後には、追加したクラス（.move_top）はscript側との結びつきがなく発火しなかったようです。対策は以下を参考に、coffeescriptに書きました。

[後から追加した要素にもイベントを設定させる](https://qiita.com/horikeso/items/5f6863a49e8348f63c4b)


```pages.coffee
  $(document).on 'click','.move_top', ->
      $('body, html').animate scrollTop: 0, 'slow'
```

二つ目の引数には要素の文字列を指定するので、$move_topとしてはいけないことも忘れないように・・・
scikit-image の後に matplotlib を import すると出るエラーとその解決法

# 起こった問題

サーバー等で `matplotlib` を `import` すると以下のようなエラーが出るときがあります。

```
_tkinter.TclError: no display name and no $DISPLAY environment variable
```

これに対処するために、基本的に以下のように ``use(`Agg`)`` を書いて対処します。

```python

import matplotlib as mpl
mpl.use('Agg')
import matplotlib.pyplot as plt
```

しかし、今回は以下のエラーが出てしまいました。

```
The backend was *originally* set to 'TkAgg' by the following code:
    ~~~
    from skimage import io
```

# 理由

どうやら、`scikit-image` （`skimage.io` 限定か？）を `matplotlib` より先に `import` すると、表示の指定先が先に決まってしまうようです。（詳しいことは分かりません…）

# 解決法

`scikit-image` を `matpliotlib` よりも後に `import` する。（出力先の定義）

#### 上手くいく例

```python

import matplotlib as mpl
mpl.use('Agg')
import matplotlib.pyplot as plt

from skimage import io
```

`matplotlob` と `scikit-image` の両方を同時に、そしてサーバーで使用する場合、
`matplotlib` を `import` してから `scikit-image` を `import` して下さい。

#### 失敗する例

```python
from skimage import io

import matplotlib as mpl
mpl.use('Agg')
import matplotlib.pyplot as plt
```

上記のように `scikit-image` を先に `import` するとエラーが出ます。

# 組み合わせまとめ

| パターン | Display | scikit-imageを import | matplot を先にimport | 結果 |
| :---: | :---: | :---: | :---: | :---: |
| A | あり | する/しない | する/しない | ○ |
| B | なし | しない | しない | ○ |
| C | なし | する | しない | ✗ |
| D | なし | する | する | ○ |

パターンAについては詳しく検証したことがないですが、おそらく全て大丈夫でしょう（ダメだったら教えて下さい）。
よってパターンCにハマったときだけこのトラブルが発生するようです。

環境に依存した内容だと思うので、他に似たような情報があればコメントしていただけると嬉しいです。
AnsibleのVaultで暗号化されたファイルの管理


## はじめに
Ansibleで暗号化したい変数をどこのファイルにどうやって管理すればいいか、自分の状況にあわせまとめてみました。

Ansible公式ドキュメントのベストプラクティスにある「Variables and Vaults」をベースにしています。

[Best Practices — Ansible Documentation](https://docs.ansible.com/ansible/latest/user_guide/playbooks_best_practices.html#variables-and-vaults)

## 背景
* ansibleのroleやplaybook(group_varsなど)をgitでソース管理中。
* varsやインベントリに登録しているbecome_passやDB系のパスワードはさすがに平文でgitに上げるのはまずい。
* 少し調べてみるとAnsible-Vaultを使えば暗号化はできることはわかった。
* だけど、今のgit管理上どこのファイルを暗号化かけて管理しようか…という悩み発生。

ということで、Vaultで暗号化されたファイルの管理について、簡単に調べてみました。


## 変更前の構成
ansibleの構成は、以下のようにansibleベストプラクティスに沿ったような構成で、下記のディレクトリ群をgitで管理しています。（正確にはちょっと異なりますが、ベースはほぼ同じ）

```
production                # プロダクション用インベントリ
staging                   # ステージング用インベントリ

group_vars/
   webservers.yml         # webサーバ用vars
   dbservers.yml          # DBサーバ用vars
   production.yml         # プロダクション用vars
   staging.yml            # ステージング用vars
host_vars/
   hostname1.yml          # host別vars host_vars
   hostname2.yml

site.yml                  # マスター playbook
webservers.yml            # webサーバ用のplaybook
dbservers.yml             # dbサーバ用のplaybook

roles/                    # importするrole群を配置
  :
```


## 変更後の構成

★部分が変更した構成

```
production                # プロダクション用インベントリ
staging                   # ステージング用インベントリ
.vaultpass                # ★復号用パスワードファイル

group_vars/
   webservers.yml         # webサーバ用vars
   dbservers.yml          # DBサーバ用vars
  production/             # ★プロダクション用varsディレクトリ
    vars.yml              # ★プロダクション用vars
    vault.yml             # ★プロダクション用vars（暗号化対象）
  staging/                # ★ステージング用varsディレクトリ
    vars.yml              # ★ステージング用vars
    vault.yml             # ★ステージング用vars（暗号化対象）

host_vars/
   hostname1.yml          # host別vars host_vars
   hostname2.yml

site.yml                  # マスター playbook
webservers.yml            # webサーバ用のplaybook
dbservers.yml             # dbサーバ用のplaybook

roles/                    # importするrole群を配置
  :
```

### 説明
group_vars配下にあるファイルはベストプラクティスにあるとおり、以下のように普通のvarsファイルと暗号化されたvaultファイルに分割可能。
```group_vars/group_dir/vars.yml```
```group_vars/group_dir/vault.yml```

group_vars/webservers.ymlなども上記のように分割することは可能だけど、基本暗号化したいファイルはproductionに定義するルールにしたほうが、暗号化するファイルも少なく管理も楽と判断。

あとは、.vaultpassファイルに復号用のパスワードを記載し、基本「vault-password-file」オプションでplaybookの実行を行う。（自動化等を踏まえると「ask-vault-pass」オプションで毎回復号パスを入力するのはナンセンスなので）
ただし、.vaultpassファイルをgit登録してしまったら元も子もないので、gitignoreでちゃんと除外しておくこと。

## 暗号化やplaybook実行コマンド

.vaultpassファイル作成

```
cd {playbook格納ディレクトリ}
echo "{復号パスワード}" > .vaultpass
```

暗号化varsファイルの作成/編集

```
cd {playbook格納ディレクトリ}
ansible-vault create {暗号化varsファイル} --vault-password-file=.vaultpass
ansible-vault edit {暗号化varsファイル} --vault-password-file=.vaultpass
```

playbook実行時のコマンド（例）※

```
cd {playbook格納ディレクトリ}
ansible-playbook -i production site.yml --vault-password-file=.vaultpass
```

※playbook実行時にvault-password-fileオプションをつけるのが、なんとなく微妙なのでansible.cfg(もしくはinventry)にオプションを記載してもOK。

```bash:production
[vars:production]
vault_password_file=.vaultpass
```
```bash:ansible.cfg
[defaults]
vault_password_file=.vaultpass
```

以上です。

---
参考サイト
https://yukidarake.hateblo.jp/entry/2016/04/13/204409
bitsetでオセロ問題を解く

[お題](https://beta.atcoder.jp/contests/abc035/tasks/abc035_c)

# 回答

実はサンプルしか通れてない、、ご指摘希望

```cpp:
// Othello

#include <bits/stdc++.h>
using namespace std;

int main(){
    const int CAP = 200000;
    int N, Q;
    cin >> N >> Q;

    bitset<CAP> row{0};
    for (int i = 0; i<Q; i++){
        int l, r;
        cin >> l >> r;
        bitset<CAP> mask{pow(2, N - (l-1))-1 - (pow(2, N-r)-1)};
        mask <<= (CAP - N);
        row ^= mask;
    }
    cout << row.to_string().substr(0,N) << endl;
}
```

# 感想

1. bitsetはconst intしか初期化できない、無理やりintをconstにキャストする素人発想はダメだった
2. ビット演算はやはり紙で試したほうがいい、脳内演算はバグい
3. substrはiのインデクスからN個のcharを取り出す、pythonなどのiからNまでスラインシングとは違う
SQLで文字列変換

#はじめに
- SQLでよく使われる文字列関数をまとめてみました
- OracleとSQL Serverの対応表も記載しています

#文字列関数集
##文字列を大文字に変換したい
|DBMS|関数|
|:--|:--|
|Oracle|UPPER(文字列)|
|SQL Server|UPPER(文字列)|

|元の文字列|変換後の文字列|
|:--|:--|
|strTest|STRTEST|

##文字列を小文字に変換したい
|DBMS|関数|
|:--|:--|
|Oracle|LOWER(文字列)|
|SQL Server|LOWER(文字列)|

|元の文字列|変換後の文字列|
|:--|:--|
|strTest|strtest|

##単語の先頭文字だけ大文字にしたい
|DBMS|関数|
|:--|:--|
|Oracle|INITCAP(文字列)|
|SQL Server|INITCAP(文字列)|

|元の文字列|変換後の文字列|
|:--|:--|
|test words|Test Words|

単語の区切り：空白、または英数字以外の文字

##特定の桁数にして表示したい
|DBMS|関数|
|:--|:--|
|Oracle|LPAD(文字列, 桁数, 埋め込み文字)|
|SQL Server|FORMAT(値, フォーマット)|

|元の文字列|変換後の文字列<br>例：6桁出力|
|:--|:--|
|24|000024|

```sql:Oracle
--処理対象カラム名：numstr
SELECT LPAD(numstr, 6, '0') FROM test_table;
```

```sql:SQLServer
--処理対象カラム名：numstr
SELECT FORMAT(numstr, '000000') FROM test_table;
```

##複数の文字列を結合して表示したい
|DBMS|関数|
|:--|:--|
|Oracle(パターン1)|文字列1 &#124;&#124; 文字列2|
|Oracle(パターン2)|CONCAT(文字列1, 文字列2)|
|SQL Server|文字列1 + 文字列2|

|文字列1|文字列2|変換後の文字列|
|:--|:--|:--|
|たなか|たろう|たなかたろう|

```sql:Oracle
--処理対象カラム名：str1, str2
SELECT str1 || str2 FROM test_table;       --パターン1
SELECT CONCAT(str1, str2) FROM test_table; --パターン2
```

```sql:SQLServer
--処理対象カラム名：str1, str2
SELECT str1 + str2 FROM test_table;
```

#最後に
今後も追記修正していきます。せめてTRIM関数はまとめておきたいところ。

#参考資料
- [文字列関数 (Transact-SQL)](https://docs.microsoft.com/ja-jp/sql/t-sql/functions/string-functions-transact-sql?view=sql-server-2017)
- [【オラクル認定資格試験対策書】ORACLE MASTER Bronze 12c SQL基礎 (試験番号:1Z0-061)完全詳解+精選問題集(オラクルマスタースタディガイド)](https://www.amazon.co.jp/%E3%80%90%E3%82%AA%E3%83%A9%E3%82%AF%E3%83%AB%E8%AA%8D%E5%AE%9A%E8%B3%87%E6%A0%BC%E8%A9%A6%E9%A8%93%E5%AF%BE%E7%AD%96%E6%9B%B8%E3%80%91ORACLE-MASTER-Bronze-SQL%E5%9F%BA%E7%A4%8E-%E8%A9%A6%E9%A8%93%E7%95%AA%E5%8F%B7/dp/4797375418/)
- [逆引きSQL構文集](http://www.sql-reference.com/)
Pythonでソートアルゴリズムの学習（選択法、挿入法）


# 概要

ソートアルゴリズムをPythonで実装し、実行時間を比較する。今回は選択法と挿入法。


# 結果

実装方法ごとの実行時間の比較。（秒）

|要素数|sorted()|選択法|挿入法|
|:--:|:--:|:--:|:--:|
|100|2e-05|0.000606|0.001208|
|1,000|0.000119|0.038934|0.093773|
|10,000|0.001208|3.76022|9.319597|
|100,000|0.018146|497.49116|974.268513|

計測は１度しかやっていなかったり、手元のノートPCで別の作業をしながら計測しているので、あくまで参考程度で。

# 考察
* 選択法、挿入法は要素数が10倍になると、実行時間はおよそ100倍
* 選択法と比べて挿入法が遅いのは、おそらく実装方法によるもの
* sorted()は高速

# プログラム

```python
def swap(list_, x, y):
    """
    リストの要素を交換するユーティリティメソッド
    引数のリストを直接書き換える

    :param list_: リスト
    :param x: 交換するリストの添字
    :param y: 交換するリストの添字
    """
    list_[y], list_[x] = list_[x], list_[y]


def selection_sort(list_):
    """
    選択法を用いてリストをソートする

    リストの先頭から、最小値を探して先頭と入れ替える
    次は2要素目から最小値を探して、それと2要素目を入れ替える
    これを繰り返す。
    """

    length = len(list_)
    for i in range(length - 1):
        min_ = i
        for j in range(i + 1, length):
            if list_[j] < list_[min_]:
                min_ = j
        swap(list_, i, min_)
    return list_


def insertion_sort(list_):
    """
    挿入法を用いてリストをソートする
    """
    length = len(list_)
    for i in range(length):
        j = i
        # 番兵を使えばj>0のチェックが不要になる
        while (list_[j - 1] > list_[j]) and (j > 0):
            swap(list_, j - 1, j)
            j -= 1
    return list_


def generate_random_list(n):
    import random
    return random.sample(list(range(n)), k=n)


def get_process_time(func, *args, **kwargs):
    from datetime import datetime
    start = datetime.now()
    func(*args, **kwargs)
    return (datetime.now() - start).total_seconds()


def main():
    for length in [10 ** 2, 10 ** 3, 10 ** 4, 10 ** 5]:
        l = generate_random_list(length)
        print((get_process_time(sorted, l[:])))
        print(get_process_time(selection_sort, l[:]))
        print(get_process_time(insertion_sort, l[:]))


if __name__ == '__main__':
    main()

```
next_permutationについて

#0.はじめに
std::next_permutationは順列を生成する...といってもいまいちよくわからなかったので私が理解したことを簡単に整理しました。
#1.そもそも順列とは
順列の定義について確認しましょう。
高校数学Aでは順列を次のように定義しています。

>いくつかのものを順序をつけて並べたものを順列という
異なるn個のものからr個を取り出して一列に並べたものをn個からr個とる順列といいnPrで表す
nPr=n(n-1)(n-2)...(n-r+1)=n!/(n-r)!

例えば,{1,2,3}という要素の順列は
{1,2,3},{1,3,2},{2,1,3},{2,3,1},{3,1,2}{3,2,1}
の6通り。(3!)
{a,b,c,d}から3個を取り出して1列に並べる順列は24通り。(4!/(4-3)!)
また{1,1,2}という要素の順列は
{1,1,2}
{1,2,1}
{2,1,1}
の3通り

この全ての組み合わせをプログラムで生成するのは難しいので
next_permutationを使います。

#2.まずは使ってみる
辞書順なので、例えば{1,3,2}{2,1,3}{1,2,3}とあるとき
{1,2,3}
{1,3,2}
{2,1,3}と並べます。

実はnext_permutationは自動的にこれを行ってくれます(詳しくは後述)
まずはコードを見てみましょう。

```C++
#include<iostream>
#include<algorithm>//next_permutation
using namespace std;

int main(){
    int array[]={1,2,3,4};
    do{
        for(int i=0; i<4; i++){
            cout<<array[i];
            if(i!=3)cout<<" ";
        }
        cout<<endl;
    }while(next_permutation(array,array+4));
    return 0;
}
```
上から見ていきましょう。
next_permutationを使うときはalgorithmヘッダをインクルードしておく必要があります。
array[]には並べ替えたい数列を入れておきます。(後述しますがこの数列は昇順でないと全列挙はしてくれません)
次にdo～while文で、doの中に配列array[]の要素の全列挙、whileにnext_permutation()を使っています。
next_permutation()には配列の範囲を渡します。(sort()と同じように使えます)
まずarray[]の中の文字列を順に全列挙し、next_permutationで並べ替えるということです。
これを実行すると、

```C++
1 2 3 4
1 2 4 3
1 3 2 4
1 3 4 2
//...(順列が生成されるが長いので割愛)
4 3 1 2
4 3 2 1
```
このようになります
まず着目してほしいのは、順列が生成されていく順番です。

#3.next_permutationの仕組みについて
上のコードでは、順列は{1,2,3,4}の次は{1,2,4,3}でした。
これは以前述べているように、辞書順になっています。
{1,2,3,4}の順列は、{1,3,2,4},{2,4,1,3},{4,3,1,2},...とたくさんありますが、これらを全て書いて辞書順に並べたときに、その次に並んでいるものに配列を置き換えています。
つまりnext_permutationのやっていることは、<b>指定された配列(又はコンテナクラス)の順列を全て並べたときに、その配列を辞書順で次のものに置き換える</b>ことです。
ではarray[]に{1,2,3,4}を入れる代わりに{4,3,2,1}を入れるとどうなるでしょうか。
出力はこのようになります。

```C++
4 3 2 1
```
この時、まずdo{}の中のarrayの要素を全列挙して4 3 2 1と出力した後、while()のnext_permutationでは{4,3,2,1}を全列挙した時の辞書順で次にある物に置き換えようとしますが、{4,3,2,1}がその中でも辞書順で一番最後にあるものなのでこれ以上置き換えることは出来ずnext_permutationは-1を返してwhile()ループは終了します。
実はこの時next_permutationは-1を返してから辞書順で最初の配列{1,2,3,4}に置き換えています。
なので組み合わせの総数が分かっていればforループを使い、全ての順列を列挙することも可能です。

また、これはvector等のコンテナクラスを使って書くこともできます。

```C++
#include<iostream>
#include<vector>
#include<algorithm>
using namespace std;

int main(){
    vector<int> v={1,2,3,4};
    do{
        for(int i=0; i<4; i++){
            cout<<v[i];
            if(i!=3)cout<<" ";
        }
        cout<<endl;
    }while(next_permutation(v.begin(),v.end()));
    return 0;
}
```
これでも全く同じことができます。
#4.prev_permutation
prev_permutationを使うとnext_permutationの逆のこと、つまり<b>指定された配列(又はコンテナクラス)の順列を全て並べたときに、その配列を辞書順で前のものに置き換える</b>ことができます。
上でv={4,3,2,1}としてnext_permutationの代わりにprev_permutationを使うと、

```C++
4 3 2 1
4 3 1 2
4 2 3 1
//...(順列が生成されるが長いので割愛)
1 2 4 3
1 2 3 4
```
こうなります。

#5.使い方について
next_permutationは大小関係があれば使えるので文字列も扱うことができます。
入力された文字列の順列を辞書順に並べるプログラムはこのようにして実装することができます。

```C++
#include<iostream>
#include<string>
#include<algorithm>
using namespace std;

int main(){
    string s;
    cin>>s;
    do{
        cout<<s<<endl;
    }while(next_permutation(s.begin(),s.end()));
    return 0;
}
```
最後に計算量について説明します。
要素nの順列はn!通りあるので計算量はO(n!)です。
O(n!)のアルゴリズムはnが10を超えるあたりから間に合わなくなるので工夫が必要です。(工夫の仕方については今回は触れません)

#6.おわりに
備忘録も兼ねて書いたところもあるので間違っているところもあると思います。指摘してもらえると助かります。
nodeをコマンドラインから実行する時にyargsを使い引数を渡すと便利

nodeをコマンドラインから実行する時に引数を渡したい場合には`process.argv`を使えば良い。例えば`node test.js hoge`と実行すると`process.argv[2]`でhogeを取得することができる。

しかし、この方法だとコマンドラインからもソースコードからも引数の意味を理解することが難しくなり、将来的にメンテナンスが難しくなってしまう。ということで何か良いモジュールが無いかと探していたところ、yargvが良さそうだったので使ってみた。

```
npm install yargs --save
```

とかしてインストールして`require('yargs')`をソースコード内に書いてやれば様々な形式の引数が簡単に使えるようになる。コードを見た方が理解が早いと思うので、コードと実行結果を載せておきます。

```
const yargv = require('yargs').argv;
console.log("process.argv[2]:" + process.argv[2]);
console.log("yargv.option:" + yargv.option);
console.log("yargv.x:" + yargv.x);
console.log("yargv.production:" + yargv.production);
console.log("yargv.s:" + yargv.s);
console.log("yargv.i:" + yargv.i);
console.log("yargv.j:" + yargv.j);
```

コードを実行すると下記のように出力される

```
$ node test.js --option=nodebug -x=10 --production -s -ij
process.argv[2]:--option=nodebug
yargv.option:nodebug
yargv.x:10
yargv.production:true
yargv.s:true
yargv.i:true
yargv.j:true
```

より詳しくはgithubにexampleが多く載っているのでそちらを参考に
https://github.com/yargs/yargs/blob/master/docs/examples.md