OmniAICreator/Qiita-1.07M huggingface dataset:
rails generateする時sqlite3の指定で躓いた話

## 環境
- cloud9
- Rails 5.2.2

## controllerをgenerateしたかった

controlleを作ろうとrails generate。

```
$ rails generate controller search books
```

いやー、railsはこれがあるから良いですねー。
昔やってたStrutsなんて用意するファイルを全部手で作ってたから効率がぜんぜん違うわー。
さてさて、ズラズラっと出てきたから出来てー…

```
/usr/local/rvm/rubies/ruby-2.4.1/lib/ruby/gems/2.4.0/gems/bundler-1.16.5/lib/bundler/rubygems_integration.rb:408:in `block (2 levels) in replace_gem': Error loading the 'sqlite3' Active Record adapter. Missing a gem it depends on? can't activate sqlite3 (~> 1.3.6), already activated sqlite3-1.4.0. Make sure all dependencies are added to Gemfile. (LoadError)
　　：
　（以下スタックトレース)
　　：
```

**ないじゃん。**
おもくそエラーじゃん。

## 答えはエラーに書いてある

ちゃんとしたフレームワークならちゃんとしたエラー文が出力されるので、まずはエラー文を眺めてみましょう。
すると、最後にこんな記載があるわけですな。

```
Make sure all dependencies are added to Gemfile.
```

英語が得意とは言えない人(=ぼく)でも「dependencies」を「Gemfile」でなんかしなきゃいけないことはなんとなーくわかりますね。
じゃあその直前に何が書いてあるかというと、

```
Missing a gem it depends on? can't activate sqlite3 (~> 1.3.6), already activated sqlite3-1.4.0.
```

ざっくり和訳すると、**「Genfileのsqlite3周りちゃんと見ろ」**。
わざわざバージョン指定まで入ってるので、Gemfileにコピペしときましょう。
現在のsqlite3をコメントアウトして、その下にコピってペーします。

```rails:gemfile
# Use sqlite3 as the database for Active Record
# gem 'sqlite3'
gem 'sqlite3', '~> 1.3.6'
```

保存したのを確認して、rails generateを再実行。

```
$ rails generate controller search books
Running via Spring preloader in process 12947
      create  app/controllers/search_controller.rb
       route  get 'search/books'
      invoke  erb
      create    app/views/search
      create    app/views/search/books.html.erb
      invoke  test_unit
      create    test/controllers/search_controller_test.rb
      invoke  helper
      create    app/helpers/search_helper.rb
      invoke    test_unit
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/search.coffee
      invoke    scss
```

今度はちゃんと動きました。めでたしめでたし。

## 参考資料
[railsでおこったエラーについて](https://teratail.com/questions/172684)
正規表現の先読み／後読みは前方確認／後方確認と変換すると分かりやすい

Ruby の正規表現の先読みと後読み、全然理解できません。

挙動は理解できます。単語の意味が分からないのです。全くピンと来ない。

仕方ないので、できる限り他の日本語に変換して噛み砕いてみようというのがこの記事の趣旨です。多分この手の記事は既出だと思うので、すでに仕様を理解されている方、自分なりに結論が出ている方には必要ないかもしれません。単に単語が分かりにくいだけなので。

## TL;DR

- 先読み … ある位置から先の文字列があるパターンにマッチするか
- 後読み … ある位置より前の文字列があるパターンにマッチするか

言い換えると、**先読み → 前方確認、後読み → 後方確認**していると考えると少しは理解しやすいかもしれません（少なくとも自分は理解しやすいです）。が、しかしこの解釈の仕方は自分にとって重要です。

## 何が問題点か

そもそも読み方は、「先読み（さきよみ）」「後読み（あとよみ）」だと思うんですが、これを初見で聞いて何の話なのかピンと来ませんでした。

- 「先読み（さきよみ）」 … 先を読む？先に読む？
- 「後読み（あとよみ）」 … 後ろを読む？前を読む？後で読む？

先（さき）と後（あと）という読み方だけを見ると、「評価するタイミングのことを言っているのかな？」と思ってしまいます。ですが、ここで言っているのは「ある位置から先か後ろか」ということで、時間の話ではないようです。

**時間の話か、位置の話か**、これがはっきりしない（ように見える）ことが問題のように感じます。

## Ruby の公式ドキュメントを確認する

> ある位置から続く文字列が ある部分式にマッチするならばその位置にマッチする という正規表現を書くことができます。「ある位置から続く文字列(先読み、lookahead)/ある位置の手前までの文字列(後読み、lookbehind)」 と「マッチする(肯定、positive)/マッチしない(否定、negative)」 の組み合わせで4つのパターンがあります。
https://docs.ruby-lang.org/ja/latest/doc/spec=2fregexp.html


|パターン|名称（日本語）|名称（英語）|
|:---|:---|:---|
|(?=pat)|肯定先読み|positive lookahead|
|(?!pat)|否定先読み|negative lookahead|
|(?<=pat)|肯定後読み|positive lookbehind|
|(?<!pat)|否定後読み|negative lookbehind|

ドキュメントを読むと、英語の表現も含めて位置関係を示していることが分かると思います。

「ある位置から続く文字列」なのか
「ある位置の手前までの文字列」なのか

```ruby
/(?<=<code>).+?(?=<\/code>)/
```
↑の例の場合、\<code>\</code>に挟まれている文字列にマッチします（結構パフォーマンス悪そう…）。\<code>から続くかつ\</code>よりも手前の文字列を見ているっちゅーことですね。時間とかタイミングとか全く関係ないじゃん（いや評価するタイミングとか内部的には色々あるかもしれんけれども）。

## 先読み／後読みは前方確認／後方確認と変換する
まとめると、先（さき）とか後（あと）とか言っていますが、文字列の位置関係の話なので、なにか空間的な何かを感じる単語の方がしっくり来るのではないかと思います（諸説あり）。
もし、「なんだかな〜しっくりこねえなあ〜」と阿藤快状態になっている方いましたらご参考にしていただければ幸いです。
ちなみに[「こんどこそわかる(肯|否)定(先|後)読み」](https://qiita.com/tohta/items/2ba7ecde5636b38ef1f6)という記事はとても参考になったので、ぜひ合わせて読んでみていただければと思います。
ansibleのgcpモジュールを使ったインスタンスの起動

GCPを使うようになって、コンソールから起動するのが面倒&自分でAPIいじるのも面倒なのでansibleにやっていただく。


### 認証用のjsonファイルを作成する

#### GCPコンソールから IAMと管理-> サービスアカウント -> サービスアカウントを作成　をクリック
<a data-flickr-embed="true"  href="https://www.flickr.com/photos/kyagyao/32372541898/in/album-72157676327477732/" title="スクリーンショット 2018-12-09 23.57.12"><img src="https://farm2.staticflickr.com/1971/32372541898_225685a210_n.jpg" width="500" alt="スクリーンショット 2018-12-09 23.57.12"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>  



#### サービスアカウントの権限を設定する。(今回はCompute 管理者ですが適宜変更してください)
<a data-flickr-embed="true"  href="https://www.flickr.com/photos/kyagyao/31305856447/in/album-72157676327477732/" title="スクリーンショット 2018-12-09 23.57.32"><img src="https://farm2.staticflickr.com/1916/31305856447_196cf50284_n.jpg" width="500" alt="スクリーンショット 2018-12-09 23.57.32"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>  



#### キーの作成をする
<a data-flickr-embed="true"  href="https://www.flickr.com/photos/kyagyao/31305856367/in/album-72157676327477732/" title="スクリーンショット 2018-12-09 23.58.01"><img src="https://farm5.staticflickr.com/4909/31305856367_8730de8cd7_n.jpg" width="500"  alt="スクリーンショット 2018-12-09 23.58.01"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>  

キーを作成したときにダウンロードされるjsonファイルと、
サービスアカウントのページから参照できるデータはあとで使います。


### ansibleでGCPを起動するplaybookを書く

```
- name: GCP test from ansible
  connection: localhost
  vars:
    service_account_email: "ansible-test@**********.iam.gserviceaccount.com"
    credentials_file: "PATH-TO-JSON.json"
    project_id: "PROJECT NAME"
  tasks:
    - name: test
      local_action:
        module: gce
        instance_names: test
        zone: asia-northeast1-b
        state: started
        service_account_email: "{{ service_account_email }}"
        credentials_file: "{{ credentials_file }}"
        project_id: "{{ project_id }}"

```

presentをstartedにすると停止していたインスタンスが起動して、stoppedにすると起動->停止となります。
他にもディスクサイズとかを指定できたりするので、結構便利。  
service_account_email, credentials_fileにサービスアカウントの情報をいれて、projectidに立ち上げたいインスタンスのあるプロジェクトIDを入れます。

あとは実行すれば終わり。


- [gce - create or terminate GCE instances](https://docs.ansible.com/ansible/latest/modules/gce_module.html#gce-module)  
- [Google Cloud Platform Guide](https://docs.ansible.com/ansible/latest/scenario_guides/guide_gce.html)
ベクトルタイル生産 320neo の整備延期と、320 での試作記録

osmium と Tippecanoe をパイプでつないで planet.osm.pbf からベクトルタイルを生産する、[前回の記事](https://qiita.com/hfu/items/e3a1e9510c0a80df173f)の続きです。

# 320neo　の整備延期
前回の記事では、osmium export と Tippecanoe をパイプでつなぐプログラムである [produce-320](https://github.com/hfu/produce-320) を試作しましたが、osmium-tool の理論上は、osmium extract と osmium export をパイプでつなぐことも可能であるように思えました。

そこで、produce-320 の new extract option として、osmium extract と osmium export、modify.js と Tippecanoe を全部パイプでつなぐ [produce-320neo](https://github.com/hfu/produce-320neo) の試作を試みました。

結果としては、osmium extract にパイプ経由でデータを入れた場合、入れるデータの形式が pbf であった場合、opl であった場合の両方において、osmium extract が、入力の形式を判別できないというエラーを出して正常に機能しないという現象に当たりましたので、320neo を現時点でうまく動かすことはできていません。

当面、320 のままで運用実績を積みたいと思います。320 の特性については、次の通りであると考えています。

- 320neo　の試作の際に実感したことであるが、osmium extract が出力を始めてるタイミングはプログラム実行時間の中でもかなり遅いので、neo オプションをとるメリットは、実はそれほど大きくないようである。
- osmium export および Tippecanoe の処理時間と比べて、osmium extract に要する時間は長いので、extract した osm.pbf をファイルとして出しておく 320 のやり方には、modify.js の変更などによるベクトルタイル再生産で手戻りを小さくできる利点がある。

# produce-320　が生産するファイルの諸元
produce-320 でのベクトルタイル生産が一通りできましたので、その入出力の諸元をメモしておきます。

- 大元のソースデータである planet-19128.osm.pbf のサイズは 44GB　であった。
- そこから produce-320 の作業領域を切り出したファイルである 320.osm.pbf のサイズは 5.3GB　であった。
- 上記の　320.osm.pbf を材料として produce-320 を実行したところ、生産された pbf ファイルの総計は 5.1GB、mbtiles ファイルの総計は 8.3GB であった。
- 生産された z=5 タイル範囲を単位とするモジュール pbf ファイルのうち、最大は  6-31-24.osm.pbf であり、そのサイズは 248MB であった。
- 生産された z=5 タイル範囲を単位とするモジュール mbtiles ファイルのうち、最大は、同じく 6-31-24.mbtiles であり、そのサイズは 404MB であった。
- 最小のモジュールは、データが全く含まれないモジュールであり、pbf は 73B、mbtiles は 24KB であった。

これまでの試作とくらべて、320 からは Tippecanoe の --clip-bounding-box　オプションを使用しています。どうも、最近追加されたオプションのようです。これを使うことにより、モジュール範囲外にタイルが生産されることを防ぐことができました。これまでは、自前でタイル範囲との intersection をとるコストを回避するため、余計なタイルがモジュールに混ざってくることを許容していました。

今回の試作の結果は https://hfu.github.io/tapioca-six/ に反映済みですが、タイルが抜けることも、ビクトリア湖が消滅するようなこともなく、問題なくタイルが生産されているようです。他方で、mbtiles ファイルのサイズは、数割減少しているように思います。--clip-bounding-box　　の恩恵を享受できることが確認できたと感じています。

# 320 が assembly で運用可能であることの確認
今回の試作では、それぞれ thanks および assembly と名付けた[複数の計算機環境](https://qiita.com/hfu/items/bbdf8ca13a1c1374e5a5)を使っています。

osmium extract の計算負荷が大きいことから、しばらく thanks でテストをしていましたが、本来ベクトルタイル生産は assembly のような機械でも行われるべきと考えているので、thanks での動作確認後、assembly でも運用できることを確認しています。

thanks では 2並列で実行しましたが、assembly では１並列で実行するほうが安心感があります。その1並列での処理時間レコードの最初の方を例示すると、次のとおりです。

- 6-22-25 19:26 (19分26秒)
- 6-22-26 19:13
- 6-22-27 19:34
- 6-22-28 18:17
- 6-22-29 18:26
- 6-22-30 18:07

thanks では同じような処理に7分程度でしたので、２倍強の時間はかかりますが、安定的に運用できているように見えます。

なお、上記の数値をとっているモジュールは、いずれもデータが存在しないモジュールです、空読みでこのくらいの時間がかかる、ということになります。
【VBA】フォルダ内のファイル一覧を再帰的に取得してExcelに作成する。

#VBAでフォルダ内のファイルリストを作成する。（サブフォルダを含めて再帰的に）

D:\Hoge\hogeフォルダ内をサブフォルダを含めてすべてのファイルを取得し、
マクロブック内の結果シートにファイルリストを作りたい、と思ったことがありました。その時のメモです。

# はじめに。下記を参考にしました。
再帰処理に関しては下記を見た方がいいです。

- moug
>https://www.moug.net/tech/exvba/0060088.html
- Office TANAKA
>http://officetanaka.net/excel/vba/tips/tips95.htm



# やることは以下の2つです。

- Dir関数でフォルダ内の全部ファイルを取得する。
- FileSystemObjectでサブフォルダをすべて取得する。


```VB:
Dim cnt As Long

'Main procedure
Sub Create_BookList_From_Folder()
    Dim MyPath As String
    Dim stKekka As Worksheet
    Set stKekka = ThisWorkbook.Worksheets("結果")
    MyPath = "D:\Hoge\hoge"
    cnt = 1
	with stKekka
		.Cells.ClearContents
		.Cells(1, 1).Value = "FullName"
		.Cells(1, 2).Value = "FolderName"
		.Cells(1, 3).Value = "FileName"    
	End With
	Call Create_BookList_From_Folder2(MyPath)
End Sub
```

```vb:上記から呼ばれるprocedure
Sub Create_BookList_From_Folder2(MyPath As String)
    Dim buf As String
    Dim stKekka As Worksheet
    Set stKekka = ThisWorkbook.Worksheets("結果")

    'ファイルの処理
    buf = Dir(MyPath & "\" & "*.*")
    Do While buf <> ""
        If Not (MyPath & "\" & buf) Like "*.pdf" Then
            cnt = cnt + 1
            with stKekka
                .Cells(cnt, 1).Value = MyPath & "\" & buf
                .Cells(cnt, 2).Value = MyPath
                .Cells(cnt, 3).Value = buf
            End With
        End If
        buf = Dir()
    Loop

    'サブフォルダの数だけ自分自身を呼び出す。
    With CreateObject("Scripting.FileSystemObject")
        For Each f In .GetFolder(MyPath).SubFolders
            Call Create_BookList_From_Folder2(f.Path)
        Next f
    End With
End Sub
```

#Dir関数だけでやる場合

Dir関数でも第2引数にVbdirectory定数を渡せば、サブフォルダを含めて取得することができるらしい。その場合、Getattr関数でディレクトリかどうかを判定する。

```VB:Dir
Sub Dirでサブフォルダ再帰的処理()
    Dim buf As String
    buf = Dir("*.*", vbDirectory)
    Do While buf <> ""
        If GetAttr(buf) = vbDirectory Then
              'フォルダだったらここにサブフォルダを処理する関数を作って呼び出す。

        ElseIf GetAttr(buf) = vbNormal Then
              '通常ファイルに対する処理
        End If
        buf = Dir()
    Loop
End Sub
```
ChildViewControllerのSafeAreaが正しくない場合がある

特定の条件下においてChildViewControllerのSafeAreaが正しい値に設定されない場合があり、レイアウトが崩れることがあったので記録しておきます。

## 発生した際の前提条件

### 環境
- Xcode10.1 
- iPhoneXシュミレータ(iOS12.1)

### Viewヒエラルキー
- UIViewController
    - UICollectionView
        - UICollectionViewCell
            - UIViewController
![qiita-safearea.png](https://qiita-image-store.s3.amazonaws.com/0/151036/1081c119-ec10-3c5b-72ee-eb5641eaecbf.png)


## 事象
上記Viewヒエラルキーにおいて、UICollectionViewCell内のChildViewControllerにSafeAreaが正しくない値が設定されることがありました。
初回に画面内に表示されるセルのChildViewControllerにおいては正しい値が設定されており、画面外のセルのChildViewControllerには正しくない以下の値が設定されていました。
```▿ UIEdgeInsets
  - top : 0.0
  - left : 0.0
  - bottom : 0.0
  - right : 0.0
```

頻度は毎回必ず。
親のUICollectionViewCellのSafeAreaまでは正しい値。


## ワークアラウンド
親のViewから正しいSafeAreaを受け渡し、愚直に各Viewのレイアウトに反映させる方法をとりました。
SafeArea関連のAPIを調べてみましたがsetterが存在するのは`-[UIViewController additionalSafeAreaInsets]`だけのようでSafeAreaを上書きする用途だと少し扱いづらいですね。

何か他に良い方法があれば教えて欲しいです。
Expressで作ったアプリをAWS Lambdaで動かすまで

## 概要

- 最近expressで作ったアプリをLambdaで動かすことが多いので手順をメモしておくもの

## 手順

### Expressアプリの作成

- 雛形の作成

```zsh
mkdir express-sample
cd express-sample
yarn init -y
yarn add express
touch index.js
```

- index.jsを最小限作る

```js:index.js
const express = require('express');
const app = express();

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept',
  );
  next();
});

app.get('/', (req, res) => {
  res.send('Hello');
});

const port = '8080';
app.listen(port, () => {
  console.log(`app start listening on port ${port}`);
});
```

- 起動して動作確認

```zsh
node index.js
open http://localhost:8080
```

- ブラウザに`Hello`が表示されればOK

### Lambdaへデプロイ

- ServerlessFrameworkの準備

```zsh
touch serverless.yml
yarn add serverless-http
```

- sreverless.ymlに設定を記載

```yml:serverless.yml
service: express-sample
provider:
  name: aws
  runtime: nodejs8.10
  region: ap-northeast-1
functions:
  app:
    handler: index.handler
    events:
      - http: ANY /
      - http: 'ANY {proxy+}'
```

- index.jsを修正
    - 一行目と最終行を追加

```js:index.js
const serverless = require('serverless-http'); // <- 追加
const express = require('express');
const app = express();

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header(
    'Access-Control-Allow-Headers',
    'Origin, X-Requested-With, Content-Type, Accept',
  );
  next();
});

app.get('/', (req, res) => {
  res.send('Hello');
});

const port = '8080';
app.listen(port, () => {
  console.log(`app start listening on port ${port}`);
});

module.exports.handler = serverless(app);  // <- 追加
```

- awsのkey情報を設定していることを確認

```zsh
cat ~/.aws/credentials
[default]
aws_access_key_id = xxxxxxxxxxxxxx
aws_secret_access_key = xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
output = json
region = ap-northeast-1
```

- 以下のコマンドでデプロイ
    - このコマンドだけでエンドポイント生成やS3へのバックアップ等々全部やってくれる！超便利！

```zsh
npx serverless deploy
```

- 以下のようなログが表示される
    - endpointsのURLにアクセスしてHelloが返ればOK

```
Serverless: Packaging service...
Serverless: Excluding development dependencies...
Serverless: Uploading CloudFormation file to S3...
Serverless: Uploading artifacts...
Serverless: Uploading service express-sample.zip file to S3 (663.48 KB)...
Serverless: Validating template...
Serverless: Updating Stack...
Serverless: Checking Stack update progress...
..........
Serverless: Stack update finished...
Service Information
service: express-sample
stage: dev
region: ap-northeast-1
stack: express-sample-dev
resources: 11
api keys:
  None
endpoints:
  ANY - https://la0umc61i3.execute-api.ap-northeast-1.amazonaws.com/dev
  ANY - https://la0umc61i3.execute-api.ap-northeast-1.amazonaws.com/dev/{proxy+}
functions:
  app: express-sample-dev-app
layers:
  None
```

### 開発サイクル

- ※もっといいやりかたあれば教えて下さい
- ローカルでの開発は`node index.js`で起動できるのでそれで進める
- Lambdaへのデプロイは`npx serverless deploy`すればLambdaへ反映される

### アプリの削除

- 不要なアプリは以下のコマンドで削除できる
    - AWSコンソールから手動で消すとゴミが残ってややこしくなるので注意

```zsh
npx serverless remove
```
Google App Script をgitで管理する

### claspを導入する
[ここの手順](https://qiita.com/qwq00/items/2264ffee87664e75318c "ここの手順")でインストール済み。
隠しファイル・隠しフォルダの表示切り替えは[shift + command + .]でできる。

### Google Apps Script API の有効化
https://script.google.com/home/usersettings
上記にアクセスして、Google Apps Script API をオンにする。
これでアカウントのGASプロジェクトをclaspで操作できるようになる。

### claspにログイン

```
clasp login
```

ターミナルで上記を実行すると、ブラウザが立ち上がるのでGoogleアカウントにログインする。

### プロジェクトをローカル上にcloneする
ターミナルでクローンするディレクトリに移動して、下記のコマンドを実行する。

```
clasp clone [スクリプトID]
```

スクリプトIDはファイル→プロジェクトのプロパティで確認できる。
念の為、ターミナルにコマンドを打ち込むときにスクリプトIDに[]は必要ない。

### gitリポジトリの用意
好きな名前で準備する。

### ターミナルからgitへpushする

```
git config --global user.name xxxxx
git config --global user.email xxxxx@example.com
git init
git add .
git commit -m 'First Commit'
git remote add origin https://github.com/xxxxx/xxxxx.git
git push -u origin master
```

-u オプションをつけることで、以後は`git push`でoriginをmasterにpushできる。

### コードの変更をGASプロジェクトへ反映する
.clasp.json がある場所で以下を行う。

```
clasp push
```

これでローカルファイルをGASプロジェクトへアップロードしてくれる。
Dockerコンテナ上でfirebase loginする方法

Dockerコンテナ上でfirebase loginしたときに迷ったところをメモ。

コンテナを起動して表示されたURLからGoogleログインしてアクセス許可すると、
「 http://localhost:9005/?state=... 」にリダイレクトされる。
ローカルでfirebaseが動いているわけじゃないからアクセスできない。

```bash
# コンテナを起動して
docker container run -it firebase bash

# firebase loginしてみる
firebase login
? Allow Firebase to collect anonymous CLI usage and error reporting information? No

Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/auth?...

Waiting for authentication...

# 上記URLからGoogleログインしてアクセス許可するとlocalhost:9005にリダイレクトされる。。
```

こういう場合はコンテナ側のポート9005を公開してあげれば大丈夫。

```bash
docker container run -it -p 9005:9005 firebase bash
```
claspの導入(Mac)

### claspの導入理由
Google Apps Scriptのソース管理をgitで行いたい。
好きなエディタで開発したい。
以上。

###  Homebrewの導入
公式サイト : https://brew.sh/index_ja

```
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

上記のコードをターミナルで実行する。
終了したら、無事インストールができたのかバージョンを確認する。

```
git --version
```

余談
私はここでエラーが出てgitをインストールできなかったが、MacのOSをバージョンアップすると上手くいった。

### node.jsのインストール
Homebrewでnodebrewをインストールする。

```
brew install nodebrew
nodebrew -v
nodebrew setup
nodebrew install-binary latest
```

余談
nodebrew setup をせずに最新版のnode.jsをインストールしようとしたら失敗したので、setup大事。忘れずに実行する。

```
nodebrew list
```

上記のコマンドでインストール済みバージョンが分かる。
下のcurrentは使用中のバージョン。私の場合はnoneだった。
なので使用するバージョンを指定する。

```
nodebrew use v11.9.0
nodebrew list
```

再び使用可能なバージョンを確認すると、currentが指定したバージョンになっているはず。
次に実行パスを通す。

```
echo "export PATH=\$xxxxx/.nodebrew/current/bin:\$PATH" >> ~/.bashrc
```

xxxxxの部分は人による。
深く考えずにnodebrewのインストール時に表示されたパスを貼り付ければOK。
(下記の表示があったはず)

```
========================================
Export a path to nodebrew:

export PATH=$xxxxx/.nodebrew/current/bin:$PATH
========================================
```

.bash_profileで.bashrcの設定が読み込まれるようにする。
そして、.bash_profileの編集はviで行うと思うので以下を参考に。

```
cd
ls -a
vi ~/.bash_profile
```

ホームディレクトリへ移動し、.bash_profileを開く。ない場合は作る。

```
if [ -f ~/.bashrc ] ; then
. ~/.bashrc
fi
```

iでINSERTモードに変更し、上記の設定を書き込む。
escキーでコマンドモードに変更。
:wで上書き保存。
:qでvi終了。
設定を反映させるためにターミナルを終了する。

```
node -v
npm -v
```

これでバージョンが表示されればOK!

余談
このあとviコマンドが使えなくなったので、設定を編集しにいきました。

```
/usr/bin/vi ~/.bash_profile
```

.bash_profileに以下を記載

```
export PATH=/bin:/sbin:/usr/bin:/usr/sbin:/usr/local/bin
```

再び設定を反映させるためにターミナルを終了。
これでコマンドが使用できるようになったが、今度はnodeのバージョンが表示されず。
以下を実行して、ようやく完了。困っちゃうね。

```
source .bashrc
```

### claspのインストール

```
npm i @google/clasp -g
```

参考：
[claspを使い、Google Apps Scriptプロジェクトをgitでバージョン管理する](https://qiita.com/rf_p/items/7492375ddd684ba734f8)
[GAS のGoogle謹製CLIツール clasp](https://qiita.com/HeRo/items/4e65dcc82783b2766c03)
[Google Apps Scriptの新しい3つの機能 その③ CLI Tool Clasp](https://qiita.com/soundTricker/items/354a993e354016945e44)
[MacでPATHを通す](https://qiita.com/nbkn/items/01a11392921119fa0153)
ベクトルタイル生産試験の機材紹介

私が余暇の時間に行なっているベクトルタイル生産試験の機材のスペックについて、別の記事に分けておいた方が参照しやすいので、こちらの記事で紹介しておきます。

## MacBook Pro 'thanks'
[最近の記事](https://qiita.com/hfu/items/e3a1e9510c0a80df173f)の実験記録でも案内した MacBook Pro で、その諸元は次の通りです。

- 機材: MacBook Pro (13-inch, 2017, Two Thunderbolt 3 ports)
- CPU 2.3GHz Intel Core i5
- メモリ 8GB
- OS macOS Mojave
- ホスト名　thanks

## HP Stream 'assembly'
ベクトルタイルが安価な計算機環境でも生産できること、また、IaaS がよく提供する無料使用レベルの計算機環境でも生産できることを実証する助けとする目的で、次の諸元の計算機も使っています。

- 機材: HP Stream 11 Pro G4 EE
- CPU 1.10GHz Celeron N3350
- メモリ 4GB
- OS Windows 10 Professional (Windows Subsystem for Linux で Ubuntu を使用)
- ホスト名 assembly
ベクトルの微分を紙と鉛筆で計算する


もう何度目になるか分からないが、何度も同じことぐだぐだノートに書いている。ここにメモして、少しでも今後の作業の効率化したいなー、と思い、書きます。

# ベクトルと行列の微分の書き方

- ベクトル

ベクトル $x$ の関数 $f(x)$の傾き(gradient)は、ここでは列ベクトルとして書くことにする。

```math
\frac{d}{d \boldsymbol{x}} f(\boldsymbol{x}) =

\left[\begin{array}{c}
            \frac{\partial f}{\partial x_1}(\boldsymbol{x}) \\
\vdots \\
 \frac{\partial f}{\partial x_N}(\boldsymbol{x})
\end{array}\right] \quad
```

のことである。列ベクトルにするか行ベクトルにするかは、正直どちらもあると思うが、ここではコンテクストから分かるように配慮しつつ、列ベクトルにすることにする。

ベクトルの内積の微分は

```math
 \frac{d}{d \boldsymbol{x}} \boldsymbol{a}^t \boldsymbol{x} = \frac{d}{d \boldsymbol{x}} \boldsymbol{x}^t \boldsymbol{a} = \boldsymbol{a}
```

第i成分を計算してみれば確認できる。

```math
\frac{d}{dx_i} \sum_{n=1}^N a_n x_n = a_i
```

- 行列（2次形式）

行列の部分を以下のように定義する。第(i,j)成分を$\frac{\partial}{\partial a_{ij}}$とする。このとき、

```math
\frac{\partial}{\partial \boldsymbol{A}} \boldsymbol{x}^T \boldsymbol{A} \boldsymbol{y} = \boldsymbol{x} \boldsymbol{y}^T
```

になる。直接計算すれば確認できる。また、転置行列の場合は、

```math
\frac{\partial}{\partial \boldsymbol{A}} \boldsymbol{x}^t \boldsymbol{A}^t \boldsymbol{y} = \boldsymbol{y} \boldsymbol{x}^T
```
となる気がする。

# 計算例

- 最小二乗法の解として平均値を得る
 
観測$\boldsymbol{y}_n=\boldsymbol{x}+\boldsymbol{e}$ ただし$n=1,\cdots,N$とするとき、誤差$\boldsymbol{e}$を最小化する問題を考える。

```math
E(\boldsymbol{x})= \sum_{n=1}^N | \boldsymbol{y}_n - \boldsymbol{x}|^2
```

微分してみる。

```math
\frac{\partial}{\partial b} E(\boldsymbol{x}) = -2\sum_{n=1}^N (\boldsymbol{y}_n - \boldsymbol{x}) = 0
```

これから

```math
\boldsymbol{x} = \frac{1}{N} \sum_{n=1}^N \boldsymbol{y}_n
```
となる。

- 回帰分析（と呼ぶのかな）

ある入力$x_n$と応答$y_n$の組が$N$個与えられたとき、


```math
\boldsymbol{y}_n=\boldsymbol{A}\boldsymbol{x}_n+\boldsymbol{\epsilon}_n
```
として

```math
E(A)=\sum_{n=1}^N |\boldsymbol{y}_n -\boldsymbol{A}\boldsymbol{x}_n|^2
```
を最小化する行列$A$は

```math
\frac{d}{d\boldsymbol{A}} E(A) = \sum_{n=1}^N \left( - (x_n^t y_n)^T - y_n x_n^t +(x_n^T A^t)^t x_n^t + (x_n (Ax_n)^t)^t \right)= O
```

より

```math
\boldsymbol{S}_{xx} = \sum_{n=1}^N \boldsymbol{x}_n \boldsymbol{x}_n^t\\
\boldsymbol{S}_{yx} = \sum_{n=1}^N \boldsymbol{y}_n \boldsymbol{x}_n^t
```
と置くと

```math
\boldsymbol{S}_{yx} = \boldsymbol{S}_{xx} \boldsymbol{A}
```
から

```math
\boldsymbol{A} = \boldsymbol{S}_{xx}^{-1} \boldsymbol{S}_{yx}
```
と得られる気がする。合っているかな。

とりあえずメモだけ残しておく。
JavaScriptの関数定義まとめ

# はじめに
JavaScriptって関数の定義方法が何個もあって、どれが何をしてくれるのかよくわからなくなるのでまとめます。

# 関数定義と呼び出し
よく見る書き方。
関数を一度定義し、使いたい時に呼び出す。
繰り返し・共通で使う処理などをまとめておくときに使う。

```javascript
// 引数なし
function hoge() {
  console.log("hoge");
}

// 引数あり
function fuga(str) {
  console.log(str);
}
```

呼び出し

```javascript
hoge();
// -> "hoge" と出力
fuga(fuga);
// -> "fuga" と出力
```

# 変数代入と無名関数(匿名関数)
定義した関数を変数に代入して呼び出せます

```javascript
const hoge = function hoge() {
  console.log("hoge");
}
hoge();
// -> "hoge" と出力
```

変数に代入するのにわざわざ関数名も書かなくてよくない？
っていうことで省略できます。
これを無名関数(匿名関数)といいます。

```javascript
const hoge = function() {
  console.log("hoge");
}
hoge();
// -> "hoge" と出力
```

# 即時関数
書いたその場で実行される関数。
定義と呼び出しがセットになってるようなもの。
()で囲います。

```javascript
(function hoge() {
  console.log("hoge");
}());
// -> すぐに "hoge" と出力
```

こちらも関数名を省略できます。
引数も指定できます。

```javascript
(function(arg1, arg2) {
  console.log(arg1 + arg2);
}("hoge", "fuga"));
// -> すぐに "hogefuga" と出力
```

# アロー関数
ES6以降に利用可能な **書き方**
記法を変えているだけで、使われ方はこれまでに挙げたものと同じです。
`=>` という矢(アロー)を使って書くのでアロー関数と呼びます。

書き方は以下です。
一行の処理の場合は `{}` を省略できます。
`(引数) => { 処理 }`

`function` など文字を省略できるので書くのが楽ですね！

最後に使い方の例です。
上で挙げた即時関数をアロー関数で書いたもの。

```javascript
((arg1, arg2) => console.log(arg1 + arg2))("hoge", "fuga")
```
ecs & rails & nginx環境 で sitemapを作り、s3にアップし利用する

# やったこと
* sitemapをsitemap_generatorのgemを使って作っていたのだけれども、複数台環境 & ecs導入に伴ってs3上に置き場を変えた

# sitemapの作成
gem sitemap_generatorを利用
https://github.com/kjvarga/sitemap_generator
詳しい記事がqiita上にたくさんあるので割愛

ECS利用にともない、`rake sitemap:refresh`を実行するタスクを新規作成


# sitemapのs3へのアップロード
```
SitemapGenerator::Sitemap.default_host = "https://yourhost.com"
SitemapGenerator::Sitemap.sitemaps_host = "https://your-s3-bucket.s3.amazonaws.com/"
SitemapGenerator::Sitemap.public_path = 'public/'
SitemapGenerator::Sitemap.sitemaps_path = 'sitemaps/'

SitemapGenerator::Sitemap.adapter = SitemapGenerator::S3Adapter.new({
  fog_provider: 'AWS',
  fog_directory: 'your-bucket-name',
  fog_region: '*******',
  aws_access_key_id: '*******',
  aws_secret_access_key: '*******',
})

```

# nginx confの編集
sitemapだけs３だったので、file指定で変更

```
  location ~* ^/sitemap.xml.gz {
       set $s3_bucket        'your-bucket-name.s3.amazonaws.com';
       set $url_full         "sitemaps/sitemap.xml.gz";

       proxy_http_version     1.1;
       proxy_set_header       Host $s3_bucket;
       proxy_set_header       Authorization '';
       proxy_hide_header      x-amz-id-2;
       proxy_hide_header      x-amz-request-id;
       proxy_hide_header      Set-Cookie;
       proxy_ignore_headers   "Set-Cookie";
       proxy_buffering        off;
       proxy_intercept_errors on;

      resolver               10.0.0.2 valid=5s;
      resolver_timeout       3s;

      proxy_pass             http://$s3_bucket/$url_full;
  }

```
【splice】JavaScript 配列の要素に対する操作

# この記事の対象
配列の基礎を知っていて、ES6に触れたことがある人
Webエンジニアに転職して1ヶ月経ち、覚えたことをアウトプット

# spliceとは？
配列のある要素からある要素までを切り取ってくれるメソッドです。

# 基本的な使い方
6つの要素を含む配列を準備します。
配列には各要素(value)に0からのキー(key)が振られているので、そのキーを使って**どこから(第1引数)どこまで(第2引数)を切り取るかを記述**できます。

下の例だとspliceメソッドの第1引数がarr[3]で第2引数がarr[5]になるので、13から15までを切り取ることができます。

```js
let arr = [10, 11, 12, 13, 14, 15];

console.log(arr); //[ 10, 11, 12, 13, 14, 15 ]
console.log(arr.splice(3, 5)); //[ 13, 14, 15 ]

```
ちなみに引数を一つにすると、それ以降すべての要素を切り取ることができます。

```js
let arr = [10, 11, 12, 13, 14, 15];

console.log(arr.splice(1)); //[ 11, 12, 13, 14, 15 ]
```
引数に負の数値を与えると後ろから数えて切り取る事もできます。

```js
let arr = [10, 11, 12, 13, 14, 15];

console.log(arr.splice(-3)); //[ 13, 14, 15 ]
```

```js
let arr = [10, 11, 12, 13, 14, 15];

console.log(arr.splice(-5, 4)); //[ 11, 12, 13, 14 ]
```

# 途中の要素の削除や途中への要素の追加
arr1で用意した配列に対し、spliceメソッドの引数を見るとarr1[1]からarr2[2]までを切り取り、新しい配列がarr2になります。
今回の場合ように第3引数以降も存在する場合は、arr1に配列を返します。

```js
let arr1 = [10, 11, 12];
let arr2 = arr1.splice(1, 2, 9, 15, 24);

console.log(arr1); //[ 10, 9, 15, 24 ]
console.log(arr2); //[ 11, 12 ]
```
VSCodeで c# のバージョンを変える方法

# 使用エディタ
visual studio code

# 問題
`visual studio code`で C#6 のままで作業している場合、
例えば以下のプロパティの get ステートメントはエラーになる。

```.cs:適当なプロパティ例
   public int ID { get => this.id; }
```


```:エラー文
Feature 'expression body property accessor' is not available in C# 6. Please use language version 7.0 or greater. [Assembly-CSharp]
```
要は `language version` というのを 7.0以上にしなさいということのようだ。


※ ちなみに、この記述のドキュメントはこちら
https://docs.microsoft.com/ja-jp/dotnet/csharp/programming-guide/statements-expressions-operators/expression-bodied-members#property-set-statements


# 対応方法
`[プロジェクト名].csproj`の中の ` <LangVersion>6</LangVersion>` を `7` 以上にしてあげればOK。

```
  <PropertyGroup>
    <LangVersion>7</LangVersion>
  </PropertyGroup>
```

これでC#7.0の文を書いてもエラーが出なくなった。
ちなみに `Unity` だと、デフォルトで `Assembly-CSharp.csproj` というファイル名だと思う。
React で型の named import は辞めよう

React コーディング全てではなく、主に SyntheticEvent 型を継承している DOM 周りの型に限っては、named import を避けるべきです。一見エラーにならない様に感じる次のコードですが、onClick にバインディングする行でエラーが発生します。

```tsx
import React from 'react'
import { MouseEvent } from 'react'
type Props = {
  handleClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
}
const Component: React.FC<Props> = props => (
  <div>
    <button onClick={props.handleClick}></button>  // Error
  </div>
)
```

# 型名称の衝突

`React.MouseEvent<T = Element, E = NativeMouseEvent>` と定義元にある様に、Generics 2番目は、Native の Event型を期待しています。例えばブラウザ向けのプロジェクトの場合、それは `lib.dom.d.ts` で global定義されている `MouseEvent` を指します。

そのため、`@types/react` から named import した `MouseEvent` と衝突してしまい、エラーになってしまっていた、という訳です。SyntheticEvent 型を継承している `@types/react` 提供型と、`lib.dom.d.ts` で global定義 されている型はこんなに被っています。

```
x ClipboardEvent
x CompositionEvent
x DragEvent
x PointerEvent
x FocusEvent
FormEvent
InvalidEvent
ChangeEvent
x KeyboardEvent
x MouseEvent
x TouchEvent
x UIEvent
x WheelEvent
x AnimationEvent
x TransitionEvent

```

そのコンテキストで多様し冗長だから、という理由で型を named import すると、無駄に時間を溶かしてしまうかもしれないので注意しましょう。非常にややこしいですね。
VcXsrvが落ちる(PhantomPDFのクラッシュ)

# matplotlibが落ちる!
gnuplotも同様な現象が起きてしまっていました.

## PhantomPDF
私は最近, PDFビューワーとして[PhantomPDF](https://www.microsoft.com/ja-jp/p/foxit-phantompdf/9nd1jwbgzmqf?activetab=pivot:overviewtab)というものを用いていたのですが, たまにクラッシュすることがありました.

## どうやら...
VcXsrvとPhantomPDFが一緒に動くことができていない状況に見えていました.

# 解決方法?
VcXsrv で表示するDisplayの番号を0:0以外にしておくだけで解決しました.
(VcXsrvの設定方法は[以前まとめています](https://qiita.com/ryoi084/items/c4339996c50c0cf39df4))

WSLで教える場所も変えてあげましょう.

```
export DISPLAY="自分で決めた数字":0
```

## 最後に
本当にこれが解決になっているかわかりませんが, リマインダーとして記録しておくことにします.
良く使う、私的な git command のまとめ

# 概要

gitを用いての開発を、個人的にも、複数の会社でも経験してきましたが
そんな中で良く使っているgit commandをケースに合わせて淡々と書いてみようと思います。
(基礎的な物は省略します)


この記事では pushに ``force`` をよく使っているので、一つのブランチを複数人で暖める開発事案には
不適切なことがございます。``force``は用法・用量を守って正しくお使いください。

# 私的なgit command

## branch作成

```console
$ git checkout -b feature/WORK
```

## 空のbranchを作成

変更履歴に含めるのに適さない
画像やドキュメント等を管理したいときに使います。
直接URLでアクセスできるので、README.mdに記載して利用が可能です。

```console
$ git checkout --orphan docks
```

## commitした後に、やっぱりやり直したい
```console
$ git reset --soft HEAD^

# commitを2個やり直したい
$ git reset --soft HEAD^^

# やり直した場合、以前のがpush済みならforceを付ける
$ git push origin feature/WORK -f
```


## 作業branchに基点branchの最新を取り込む
```console
$ git pull
$ git merge develop

# 履歴を綺麗にしたいのなら rebase も有(conflictが発生したら、即終了が良いです。後半で少し触れます)
$ git rebase develop
```


## ↑のbranchの取り込みを無くしたい
今まで開発していて、hardが便利だと思ったケースです。

```console
$ git reset --hard HEAD^

# push済みなら、forceを付ける
$ git push origin feature/WORK -f
```

## 別branchのcommitの一部を取り込みたい
```console
$ git cherry-pick ${COMMIT_ID}
```

## PRのレビューを受け、作業branchから切り替えるとき

### 手元の変更をロストしても良い場合(些細な変更など)

手元に保存されるため、もしもdisk障害など発生した場合はロストする可能性があります。

```console
# 今の変更を保存
$ git stash save

# PRを更新したいbranchに変更
$ git checkout feature/REVIEW

～ ～ ～

# 修正が完了したらbranchを元に戻し、続きを行う。
$ git checkout feature/WORK
$ git stash pop
```

### ロストは絶対に避けたい場合。

#### commit
```console
# 中途半端な状態でもcommitしてpushしてしまう
$ git commit -a -m "stash"
$ git push origin feature/WORK
```

#### feature
```console
# branchを作成
$ git checkout -b feature/WORK_stash
# 今の時点の変更をcommit
$ git commit -a

# push(Remoteに上げるので、ロストする可能性はほぼ無くなる)
$ git push origin feature/WORK_stash

# PRを更新したいbranchに変更
$ git checkout feature/REVIEW

～ ～ ～

# レビューの更新が終わったので、作業branchに戻る
$ git checkout feature/WORK

# stashを取り込む
$ git merge feature/WORK_stash

# 削除
$ git push origin :feature/WORK_stash
```

## force-pushで更新されたbranchを取り込んでしまった場合

Conflictが発生したら、ローカルのbranchから削除し、対象のBranchに切り替えることで解消できます。

```console
# Conflict発生ならmergeを中断
$ git merge --abort

# 更新されていないbranchに変更
$ git checkout master

# 該当するbranchを削除
$ git branch -D feature/WORK

# 該当branchに切り替える
$ git checkout feature/WORK
```

## PRを作る直前にやる事

### Rebase編

履歴を少しでも綺麗にしたいと思うので、とりあえずrebaseをしてみます。
  1* rebaseに失敗すると大変なので、確実に変更を取り込むならmergeが良いです
  2* rebaseに時間が掛かるようなら時間の無駄だと思っているので、mergeして一回でconflictを解消した方が良いです(ステマ) 

```console
$ git pull
$ git rebase develop

# conflictが無く無事にrebaseできたら、force push
$ git push origin feature/WORK -f
```

### Merge編

```console
$ git pull
$ git merge develop

# conflictが無く無事にmergeできたら、普通にpush
$ git push origin feature/WORK
```

# 最後に

まだあったと思うので、思い当たったら追記したいと思います。

# 参考記事

https://qiita.com/nantekkotai/items/2ed17c3d774211d234a4
https://qiita.com/ciloholic/items/769fba1c178a897cf42e
JavaScriptにおけるクラス(es5 vs es6) その１

__es6__における__【classっぽいもの】__の書き方を覚えたので、__es5__の時の書き方と比較しながらアウトプットしたいと思います！


#まずは「es5」で書く！

es5の時には、関数と`prototype`というものを使って表現していたらしいです！

```JavaScript
function Animal(name,size,cry) {
    this.name = name;
    this.size = size;
    this.cry = cry;
}

Animal.prototype.voice = function () {
    console.log(this.cry);
}

var pig = new Animal('ブタ','LL','ぶひ〜');

pig.voice();
//ぶひ〜
```

僕みたいな初心者ですと、`prototype`？？ってなります（泣）

#次に「es6」で書く！！
es6では`class`構文が実装され直感的にわかりやすくなったんじゃないかと思います。

```JavaScript
class Animal{
    constructor (name,size,cry){  //初期化する時のメソッド
        this.name = name;
        this.size = size;
        this.cry = cry;
    }

    voice() {
        console.log(this.cry);
    }
}

const micropig = new Animal('マイクロミニブタ','s','ぶ〜ぶ〜');

micropig.voice();
//ぶ〜ぶ〜
```

`Animal`クラスの中で完結しているのがシンプルで見やすい！

#次回予告
次回は継承の仕方についてまとめます！
Admob on Androidで Ad failed to load : 3と言われるエラー

こんにちは。はにおかさいです。入試がかた付いたので開発にもどりました。
@itsu_dev と私が共同開発している、とあるGooglePlayで公開済みのアプリのバグ修正後、広告がなにも表示されなくなりました。

#症状
Admobにて、静止画の広告、動画配信広告が一切映らなくなるとともに以下のような出力を見受けました。

```:logcat
I/Ads: Use AdRequest.Builder.addTestDevice("何某") to get test ads on this device.
I/Ads: Ad failed to load : 3
D/FA: Logging event (FE): ad_query(_aq), Bundle[{firebase_event_origin(_o)=am, firebase_screen_class(_sc)=MainActivity, firebase_screen_id(_si)=-うんぬん, ad_event_id(_aeid)=-ほじ}]
V/FA: Connecting to remote service
D/FA: Connected to remote service
V/FA: Processing queued up service tasks: 1
V/FA: Inactivity, disconnecting from the service
```

#解決策
Admobの管理パネルにて、GooglePlayとの紐づけを実施。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/245977/ac3e999e-a6d5-9c95-ed5f-c7e44079276a.png)

その後、広告は表示されました。

#Ref
https://stackoverrun.com/ja/q/7302919
Django Webアプリ作成(2) Djangoはじめの一歩

環境
OS : macOS Mojave
Anaconda : python3.6.7
Django==2.1.5

基本としてMacで作成していくので一部ターミナルコマンドなどWindowsでは異なる操作があるかもしれませんが、ご了承ください。
(Windowsではターミナルの代わりにコマンドプロンプトを使用する等)

#ベースディレクトリを作成
djangoアプリを作成するディレクトリ(フォルダ)を作成
今回は"django_work"という名前にする。

```:Terminal
mkdir djangoblog
```
ワーキングディレクトリ("djangoblog")に移動

```:Terminal
cd djangoblog
```

これ以降のTerminalコマンドは、djangoblogディレクトリにいる状態のものとして書いていきます。

#Djangoプロジェクトの作成
Webアプリの大枠を作成
ここからはDjangoのインストールした仮想環境に入り実行

```:Terminal
django-admin startproject config .
```
上のコードで "config"は設定ディレクトリ(設定関連のファイルの入ったディレクトリ)の名前、"."はカレントディレクトリにプロジェクトを作成することを意味する。
現在のプロジェクトの階層構造は、

```
djangoblog　　　　　　　　　　　　　　　　　　　　　　　　　　　　　#ベースディレクトリ
├── config                                                #設定ディレクトリ
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── manage.py
```
さらに、テンプレート(htmlファイル)用と静的ファイル(CSSファイルや画像など)用のディレクトリを作成しておく。

```:Terminal
mkdir templates
mkdir static
```
これらは、今はあまり深く考えなくて良い

#設定ファイルの編集(config/settings.py)
ここからは少し基本的な設定の変更・追加を行う。
はじめに言語とタイムゾーンを日本仕様に変更する。
config/settings.pyの以下のように修正する。

```python:config/settings.py
LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'
```
さらに先ほど作成したtemplateディレクトリの設定を行う。
以下のように修正

```python:config/settings.py
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
```

さらに、staticディレクトリについても設定する。
以下のように追加・修正する。

```python:config/settings.py
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
PROJECT_NAME = os.path.basename(BASE_DIR)
]
:
:
:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
```

#開発サーバの起動
開発サーバを起動してここまでを確認する
・開発サーバの起動

```:Terminal
python manage.py runserver
```
正常に起動したらブラウザを開いて、

```
http://127.0.0.1.8000/
```
にアクセスしてみましょう。
画面が表示されれば成功です。
次回から本格的なWebアプリの作成に取り組みたいと思います。

**参考**
[Macのターミナルコマンド](https://qiita.com/yuta_rug/items/5db9d63f42ca31d1e3ed)
VagrantとVirtualboxでどうしても502 Bad Gatwayが出続ける

# 502 Bad Gatewayが何故か出続ける時にやること

注意: 
そこそこ時間の掛かる作業です。
また、502はサーバーレスポンスの問題であるため全く異なった問題で合った場合設定ファイルを書き換るだけになってしまう可能性があります。

[参考記事](https://laracasts.com/discuss/channels/general-discussion/502-bad-gateway-after-vagrant-update)

```
$ cd ~/Homestead && git pull && vagrant destroy && vagrant box update && vagrant up
```

### まとめ

1. `cd ~/Homestead`でhomesteadのディレクトリまで移動します。
※`~`ユーザーhome以下に無い時はここを自由に変えてください。

2. `git pull`でリモートから最新の情報を取得します。

3. `vagrant destroy`で既存のvagrantファイルを削除
※おそらくVagrantファイルが古かったりするために起きていた問題のため。

4. `vagrant box update`でboxファイルを最新のものにアップデートします。

5. `vagrant up`！！

私はこの方法で502とLaravel-debugerが正常に動作しない問題を解決する事ができました。
あなたも使ってみたくなる！ いろんな言語のかっこいい書き方まとめ

いろんな言語で、思わず「かっこいい！」「使ってみたい！」と思ってしまう書き方をまとめました。


# Swift

## Optional と if

Swift といえば `Optional` ですよね。

if文と合わせて書くと気持ちいいことこの上ない `Optional` ですよね

``` swift
// specialObject.value が Optional 型だったとすると
if let value = specialObject.value {
  // nilじゃないときの処理
  ...
}
```

かっこいい！！

- 変数定義
- nilかどうかのif
- 代入された変数にはOptionalが取れる

という３つの挙動を同時にやってて、しかもそれをここまであっさりと書いてしまう鬼畜ぶり。思わず惚れちゃいそうになりますよね。

## Enum と switch

Swift といえば `Enum` のことも忘れてはいけません。

例えば `Enum` を下記のように定義しているとします。

``` swift
enum Result<Value> {
    case success(Value)
    case failure(Error)
}
```

例えばこのクラスを返すメソッドがあるとすると、こんな書き方ができます。

``` swift
load { result in
    switch result {
    case .success(let data):
        // 成功時の処理
    case .failure(let error):
        // 失敗時の処理
    }
}
```

`result` の　`Enum` の値を `switch` 文で分岐しつつ、どの値かによって返ってくるデータを変数に入れるという、なぜかわからないがすごいことをしている気分になれる書き方ですね。

これを使いこなせたら、気持ちいいでしょうね！

> 参考URL：https://www.swiftbysundell.com/posts/the-power-of-result-types-in-swift

# Python

Python といえばリスト内包表記でしょう。

他の言語でいういわゆる `map` 関数のような動作を `for` 文でやるという奇想天外な発想。

``` python
[ i*2 for i in nums ]
```

`for` 文の両側に カッコを付けると `map` みたいに動くんですね。

さすがPython! おれたちにできない事を平然とやってのけるッ！
そこにシビれる!あこがれるゥ！！

しかもこれ、 if 文がつけれちゃいます。

``` python
[ i*2 for i in nums if i % 2 == 0]
```

みたいな。

なにこの書き方。天才かよ。

さらに

``` python
[ i*2 if i % 2 == 1 else i*3 for i in nums ]
```

`else` までつけれちゃいました。

鬼か。1行で書かないと死ぬ病気か。

Python には、 `map` や `reduce` なんて使わず何がなんでも `for` 文でやってしまいたいという「スゴ味」があるッ！

どうですか？　書きたくてうずうずしてきましたね。

# Javascript

Javascript からは、`ES6` で導入された書き方でかっこいいものを紹介します。

まずは `Shorthand property names` ですね。

``` javascript
// すでに変数 a, b が定義されているとする
{ a, b }
// => { a: a, b: b } と同義
```

変数がすでに定義されていると `key` を省略できるんですね。
スマートですよね。効率化したいという精神がにじみ出てます。

あと、変数への分割代入も捨てがたいです。

``` javascript
// obj = { a: 'are', b: 'boa', c: 'core' } とする
let { a, b } = obj;
```

最初見たときは、何してんだこれ、って思いましたが、慣れると気持ちいいんですよね。
書きながら フフッ とニヤけてしまうこと受け合いです。

# Ruby

Rubyは構文ではなく、メソッドです。残念ながら構文としてはそれほどかっこいい構文が思いつきませんでした。

## tap

Ruby で大好きなメソッドです。 `tap` メソッドは、実行したオブジェクトをリターンしつつ、そのオブジェクトを `yield` するというメソッドです。
理解するまでは、「ん？　よくわからんからもう一度説明して」を無限ループしてしまうメソッドですね。

例えば、このように使います。

``` ruby
# どこかのメソッド内での文
return params.tap { |p| p.test = 'aaa' if p.a.nil? }
```

params を返しつつ、 params の内容を更新しているというものです。
このやったった感、たまりませんね。

## then

RubyKaigi2018 ではこのネーミングをつけたMatzへのバッシングが多かった `then` です。

`then` は実行したオブジェクトを `yield` しつつ、 ブロックの返り値を返します。
これを使うと気持ちよく chain ができます。

``` ruby
1.then { |x| x + 1 }.then { |y| y + 1 }
=> 3
```

こんな具合にどんどん連鎖できるわけですね。
メソッド `chain` ってやるだけでなんかできるエンジニア感が出て俺スゲーって謎の優越感に浸れるんですよ。
正直たまらん



# 終わりに

どうでしたか？

いろんな言語を書きたくなりましたよね。
次の機会に他の言語のかっこいい書き方も紹介していきたいと思います。

また、俺はこんなかっこいい書き方知ってるぜ！という方々、 **ぜひコメント欄で暴れていただきたい** 。
リダイレクトについて[備忘録]

##301リダイレクト
- Moved Permanetly
    - 永久的にリダイレクトする

##302リダイレクト
- Found
    - 一時的なリダイレクト

##PHPコードでのリダイレクト設定
- header関数を使用。第三引数にステータスを指定。
    - 参考：[PHPの「正しい」リダイレクト方法と、HTTPステータスコード](http://www-creators.com/archives/1012)

##CakePHPでのリダイレクト設定
- routes->redirect()で設定
    - 第一引数に[リダイレクト対象URL]
    - 第二引数に[リダイレクト先URL]
    - 第三引数に[ステータスコード指定]
        - 参考：[cakephp3のroutes.php設定](https://teratail.com/questions/61292)

##Google Chromeの301リダイレクトキャッシュのクリア方法
- Developer toolで更新ボタン長押し
- 「キャッシュの削除とハード読み込み」を実行
    - 参考：[Chrome で 301 リダイレクトが解除できないときの対処方法](https://gotohayato.com/content/100)
    - 参考：[Chrome のDNSキャッシュをクリアする方法](http://www-creators.com/archives/1335)

##まとめ
端的にいうと、301と302リダイレクトの違いは**期間**です

「今後変更する可能性はないか？」の問いに**Yes**で回答できない場合、302で良いと思います。

301でのリダイレクト設定をすると、例えばChromeの場合、**301リダイレクトのキャッシュを保持する仕様がある**ため、意図しない動作を引き起こす可能性が十分考えられるからです。

##おまけ
Twitterやってます！外部のエンジニアの方ともどんどん繋がりたいと考えていますので、是非フォローして頂ければと思います！[@Tatsuo96](https://twitter.com/Tatsuo96)
ブログ始めました！
https://note.mu/tatsuo_iriyama
mordredで記述子が3次元座標を必要とするかどうかを取得

# 背景
フリーの記述子計算ソフトmordredにおいて、3次元座標がないと計算ができない記述子もあり、3次元座標あり/なしでその記述子を計算するかどうかを切り分けたい。

# 環境
- Windows10
- Anaconda
- python3.X
- mordred 1.1.1

# やり方
以下の通り、記述子オブジェクトのrequire_3Dメソッドで取得可能

```
from rdkit import Chem
from mordred import Calculator, descriptors

calc = Calculator(descriptors, ignore_3D=False)

for i, desc in enumerate(calc.descriptors):
　　print(desc.require_3D)
```
Spring BatchをOracleで連続Job実行するとORA-08177

# 現象
以下のコードのように、ほとんど間を空けずにjobをlaunchする。

```java
ExecutorService s = Executors.newFixedThreadPool(2);

long time1 = new Date().getTime();
long time2 = time1 + 111111000;
s.execute(() -> doBatch(time1));
s.execute(() -> doBatch(time2));

void doBatch(long t) {
    Map<String, JobParameter> p = new HashMap<String, JobParameter>();
    p.put("a", new JobParameter(new Date(t)));
    JobParameters jobParameters = new JobParameters(p);
    l.run(job, jobParameters)
```

これを実行すると、以下のようなエラーになる。

```java
Exception in thread "pool-1-thread-1" org.springframework.dao.CannotSerializeTransactionException: PreparedStatementCallback; SQL [INSERT into BATCH_JOB_INSTANCE(JOB_INSTANCE_ID, JOB_NAME, JOB_KEY, VERSION) values (?, ?, ?, ?)]; ORA-08177: このトランザクションのアクセスをシリアル化できません
; nested exception is java.sql.SQLException: ORA-08177: このトランザクションのアクセスをシリアル化できません

	at org.springframework.jdbc.support.SQLErrorCodeSQLExceptionTranslator.doTranslate(SQLErrorCodeSQLExceptionTranslator.java:270)
	at org.springframework.jdbc.support.AbstractFallbackSQLExceptionTranslator.translate(AbstractFallbackSQLExceptionTranslator.java:72)
	at org.springframework.jdbc.core.JdbcTemplate.translateException(JdbcTemplate.java:1444)
	at org.springframework.jdbc.core.JdbcTemplate.execute(JdbcTemplate.java:632)
```

これの原因は [Spring Batch ORA-08177: can't serialize access for this transaction when running single job, SERIALIZED isolation level](https://stackoverflow.com/questions/22364432/spring-batch-ora-08177-cant-serialize-access-for-this-transaction-when-running) とかに書いてある。

# 解決策

というわけで```IsolationLevel```を<code>READ_UNCOMMITTED</code>に変えてしまえばよい。

```java
@Configuration
@EnableBatchProcessing
public class BatchConfiguration1 extends DefaultBatchConfigurer {
    @Autowired
    DataSource configDataSource;

    @Autowired
    PlatformTransactionManager configTxManager;

    @Override
    protected JobRepository createJobRepository() throws Exception {
        JobRepositoryFactoryBean factoryBean = new JobRepositoryFactoryBean();
        factoryBean.setDataSource(configDataSource);
        factoryBean.setTransactionManager(configTxManager);
        factoryBean.setIsolationLevelForCreate("ISOLATION_READ_COMMITTED");
        factoryBean.setTablePrefix("BATCH_");
        try {
            factoryBean.afterPropertiesSet();
            return factoryBean.getObject();
        } catch (Exception e) {
            throw new BatchConfigurationException(e);
        }
    }
```
tSNEでMNISTを軽やかに鮮やかにマッピングしていく

# はじめに：やりたいこと

今回やりたかったことは次の通りです．

<b>二次元マッピング!可視化！！</b>

~~というのも，学会への投稿が差し迫っており，実験が上手くいっていなあばばばっばばばばばばｂ~~

色々あって**多次元情報の二次元マッピング**に用事ができたので，やってみようかと思いまして．
この辺，あんまり詳しくないのでおかしなところはご指摘いただけるとありがたいです．

# やったこと

1. Random Projectionを試してみる：M次元の行列に，ランダムに生成したN次元の行列をあてて次元削減
    1. GaussianRandomProjection：ガウシアン分布に従ったコンポーネントからN次元行列を生成
    2. SparseRandomProjection：スパースなN次元行列を生成
2. tSNEを試してみる：理論はまだ読んでません

# 実装

何はともあれ，調べてコピペしてみました．

## 環境
- Google Colaboratory
- Python3
- ハードウェアアクセラレータ：GPU（意味ない）
 
## ソースコード

ソースコードは次の通りで，Colaboratoryにそのまま張り付ければ動きます．

```digit_visualization.py
#matplotlib inline
from sklearn import random_projection
from sklearn.manifold import TSNE
import numpy as np
import matplotlib.pyplot as plt
from sklearn import datasets

digits = datasets.load_digits()

X_TSNEprojected = TSNE(n_components=2, random_state=0).fit_transform(digits.data)
X_Gprojected    = random_projection.GaussianRandomProjection(n_components=2).fit_transform(digits.data)
X_Sprojected    = random_projection.SparseRandomProjection(n_components=2).fit_transform(digits.data)

plt.scatter(X_TSNEprojected[:,0], X_TSNEprojected[:,1], c=digits.target,alpha=0.5, cmap='rainbow')
plt.colorbar()
plt.show()
plt.scatter(X_Gprojected[:, 0], X_Gprojected[:, 1], c=digits.target, cmap='rainbow')
plt.colorbar()
plt.show()
plt.scatter(X_Sprojected[:, 0], X_Sprojected[:, 1], c=digits.target, cmap='rainbow')
plt.colorbar()
plt.show()

```


# 結果

実行結果です．

## tSNE

鮮やかでとても見やすいです．
クラス毎に場所が結構きれいに分かれています．
alpha値を0.5に設定したので，すこしモヤモヤしていますね．

![tSNE.png](https://qiita-image-store.s3.amazonaws.com/0/165289/aa9e2e61-ff4b-f85d-299e-320514a55ee0.png)

## GaussianRandomProjection

結構重なっています．

![gaussian.png](https://qiita-image-store.s3.amazonaws.com/0/165289/eb303dd6-01cd-0b5b-a19a-52eedb13e16a.png)

## SparseRandomProjection

Gaussian同様，結構重なっています．

![sparse.png](https://qiita-image-store.s3.amazonaws.com/0/165289/be6c30fa-eb5e-2d2b-b3f9-de3e48ac2be3.png)

# おわりに：考察

今回のポイントは何より~~鮮やかに~~可視化できたところでしょう！
はじめはカラーコードとかわからなくて，
グレーの味気ない出力でした．こんな感じです．

![gray.png](https://qiita-image-store.s3.amazonaws.com/0/165289/c2ad63f8-2b43-2bf6-ffea-1397abab22f2.png)

これは**つまらない**と思ってカラーコードとか調べてみました．
で，scatterの引数：cは色の種類を指定できるので，クラス数から配色してくれて，
cmapでカラーコード指定できると分かったのでやってみました．
また，alpha値(ドットの透かし度合い)を薄くして，
分布をわかりやすくしてみました(密集していると色濃くなる)．
うん，研究に活きそうです．

# お世話になった記事たち

- [高次元データの次元削減および2次元プロット手法](https://qiita.com/TomHortons/items/2064870af3f3f7f2b209)  
  スタートラインはこの記事．コードも参考にさせていただきました．
- [scikit-learnでt-SNE散布図を描いてみる](http://inaz2.hatenablog.com/entry/2017/01/24/211331)  
  sklearnのt-SNEメソッドの使い方，手書き数字データセットの読込はこの記事から．
- [【Python】matplotlibによるグラフ描画時のColormapのカスタマイズ](https://qiita.com/kenmatsu4/items/fe8a2f1c34c8d5676df8)  
  この記事を読んでカラーマップの指定に気付いた．
-  [matplotlib で散布図 (Scatter plot) を描く](https://pythondatascience.plavox.info/matplotlib/%E6%95%A3%E5%B8%83%E5%9B%B3)  
   scatterのリファレンス代わりに．
- [matplotlibの２次元マップで色を指定する](https://qiita.com/termoshtt/items/1b7f975e076a04c10b03)  
  この記事を読んでやっとmatplotlibのcolorのリファレンスに．笑
- [color example code: colormaps_reference.py](https://matplotlib.org/examples/color/colormaps_reference.html)  
  matplotlibのカラーコードのリファレンス．6個のカラーブロックがありますが，今回は一番下のブロックのrainbowを採用．
mordredで1分子1記述子の計算を行う

#背景
フリーの化合物の記述子計算ソフトであるmordredにおいて、1分子毎、1記述子毎に記述子計算を行いたいが、github上に用意されているマニュアルにはあまり詳しい情報がなかった

#環境
- Windows 10
- Anaconda
- Python 3.X
- mordred 1.1.1

#やりかた

まずは、`calc = Calculator(descriptors, ignore_3D=False)`をやると、用意されているすべての記述子オブジェクトが`calc.descriptors`で取得できる。
ソースをハックすればわかるのだが、記述子オブジェクトの`__str__()`メソッドで記述子の名前が取得できるのでそれをキーとし、値を記述子オブジェクトとするdictionaryを作成する。


```py
from rdkit import Chem
from mordred import Calculator, descriptors

descs = {}
calc = Calculator(descriptors, ignore_3D=False)
for i, desc in enumerate(calc.descriptors):
   descs[desc.__str__()] = desc
```


後は、計算したい記述の名前を指定して記述子オブジェクトを取得し、計算したいmolオブジェクトを指定するだけ。

```
mol = Chem.MolFromSmiles("CCCC")
result = descs["GATS6i"](mol)
```

ここまで扱えるとかなりシステムに自由自在に組み込めそう。
MacでKafkaのローカル稼働環境を作ります

# Kafkaのインストール
Kafkaの最新版をダウンロードします。
Kafkaの本体をダウンロードする時には、wgetコマンドを使ったことがあります。wgetの使い方については、僕の　[Macでwgetコマンド を使ってみるメモ](https://qiita.com/gakuseikai/items/73e200bc431bdbc34536)をご参照ください。


```bash
$ cd /usr/local/opt 
$ wget http://ftp.riken.jp/net/apache/kafka/2.1.0/kafka_2.12-2.1.0.tgz
$ tar -zxf kafka_2.12-2.1.0.tgz
ln -s kafka_2.12-2.1.0 kafka 
```
kafka_2.12-2.1.0.tgz中の「1.12」は、Scalaのバージョンに指しています。Scalaをセットアップしたい場合は、合わせるバージョンを選べた方が良いと思います。
「2.1.0」は、Kafka自分自身のバージョンです。

# ZooKeeperのインスタンス取得
Kafkaは、ZooKeeperを使います。Kafkaにパッケージ化されているスクリプトを使ってZooKeeperのインスタンスを取得します。

```bash
$ cd kafka
$ bin/zookeeper-server-start.sh config/zookeeper.properties
[2019-02-11 10:33:36,916] INFO Server environment:user.dir=/usr/local/opt/kafka_2.12-2.1.0 (org.apache.zookeeper.server.ZooKeeperServer)
[2019-02-11 10:33:36,944] INFO tickTime set to 3000 (org.apache.zookeeper.server.ZooKeeperServer)
[2019-02-11 10:33:36,944] INFO minSessionTimeout set to -1 (org.apache.zookeeper.server.ZooKeeperServer)
[2019-02-11 10:33:36,944] INFO maxSessionTimeout set to -1 (org.apache.zookeeper.server.ZooKeeperServer)
[2019-02-11 10:33:36,981] INFO Using org.apache.zookeeper.server.NIOServerCnxnFactory as server connection factory (org.apache.zookeeper.server.ServerCnxnFactory)
[2019-02-11 10:33:37,021] INFO binding to port 0.0.0.0/0.0.0.0:2181 (org.apache.zookeeper.server.NIOServerCnxnFactory)
```

# Kafkaサーバーの起動
Kafkaサーバーを起動します。

```bash
$ bin/kafka-server-start.sh config/server.properties
[2019-02-11 10:38:54,256] INFO [SocketServer brokerId=0] Started processors for 1 acceptors (kafka.network.SocketServer)
[2019-02-11 10:38:54,287] INFO Kafka version : 2.1.0 (org.apache.kafka.common.utils.AppInfoParser)
[2019-02-11 10:38:54,288] INFO Kafka commitId : 809be928f1ae004e (org.apache.kafka.common.utils.AppInfoParser)
[2019-02-11 10:38:54,290] INFO [KafkaServer id=0] started (kafka.server.KafkaServer)
```

# トピックの作成、確認
1つのパーティション(partitions)と1つのレプリカ(replication)だけを持つ"test"という名前のトピックを作成しましょう。

```bash
$ bin/kafka-topics.sh --create --zookeeper localhost:2181 --replication-factor 1 --partitions 1 --topic test01
Created topic "test01".
```
list トピックコマンドを実行して、作成されていたトピックを確認してみましょう。

```bash
$ bin/kafka-topics.sh --list --zookeeper localhost:2181
test01
```

# プロデューサーでメッセージを送信
Kafkaは、物理のファイル或いは標準入力から受取ったメッセージを、Kafkaクラスタに送信するコマンドライン クライアントが付属しています。デフォルトで各行は別個のメッセージとして送信されています。
プロデューサを実行して、次に、コマンドラインにメッセージをコンソールに入力します。

```bash
$ bin/kafka-console-producer.sh --broker-list localhost:9092 --topic test01
>hello kafka!
```
# コンシューマーでメッセージを受信
Kafkaはメッセージを標準出力に出力するコマンドラインコンシューマも持ちます。

```bash
$ bin/kafka-console-consumer.sh --bootstrap-server localhost:9092 --topic test01 --from-beginning
hello kafka!
```