OmniAICreator/Qiita-1.07M huggingface dataset:
Rails gem bcryptの導入

# Userモデルを作る
Database設計

|意味|Column|Type|Options|
|:-:|:----:|:---:|:-----:|
|名前|name|string|null: false|
|メールアドレス|email|string|null: false, unique: true|
|パスワード|password_digest|string|null: false|

__userモデルを作成する__

```:ターミナル
$ rails g model user name:string email:string password_digest:string
      invoke  active_record
      create    db/migrate/xxxxxxxxxxxx_create_users.rb
      create    app/models/user.rb
```
# migrationファイルの編集
```ruby:db/migrate/xxxxxxxxx_create_users.rb
class CreateUsers < ActiveRecord::Migration[5.2]
  def change
    create_table :users do |t|
      t.string :name, null: false
      t.string :email, null: false
      t.string :password_digest, null: false

      t.timestamps
      t.index :email, unique: true
    end
  end
end
```
編集が完了したら```rails db:migrate```をすること。
# コンソールからUserモデルのオブジェクトを作ってみる
```ruby:ターミナル
$ rails c
Running via Spring preloader in process 3745
Loading development environment (Rails 5.2.3)
[1] pry(main)> user = User.create(name: "匿名", email: "user@example.com", password_digest: "digest"[1] pry(main)> user = User.create(name: "匿名", email: "user@example.com", password_digest: "digest")
   (0.2ms)  BEGIN
  User Create (25.6ms)  INSERT INTO "users" ("name", "email", "password_digest", "created_at", "updated_at") VALUES ($1, $2, $3, $4, $5) RETURNING "id"  [["name", "匿名"], ["email", "user@example.com"], ["password_digest", "digest"], ["created_at", "2019-11-13 06:37:41.060780"], ["updated_at", "2019-11-13 06:37:41.060780"]]
   (12.2ms)  COMMIT
=> #<User:0x00007face35fd128
 id: 1,
 name: "匿名",
 email: "user@example.com",
 password_digest: "digest",
 created_at: Wed, 13 Nov 2019 06:37:41 UTC +00:00,
 updated_at: Wed, 13 Nov 2019 06:37:41 UTC +00:00>
[2] pry(main)> user.password_digest
=> "digest"
[3] pry(main)> 
```
上記のようにきちんと保存できてたらOK。
# パスワードを受け付けてdigestを保存する
gemのbcryptを導入

```ruby:Gemfile
# 〜省略〜
gem 'bcrypt', '~> 3.1.7' # コメントアウトを解除
# 〜省略〜
```
```bundle install```をする。
これでbcryptがインストールできたので、Userモデル内でhas_secure_passwordが使える。
# User.rbの編集
```ruby:user.rb
class User < ApplicationRecord
  has_secure_password
end
```
上記のように```has_secure_password```を記述するとデータベースには対応しない属性が２つ追加される。
１つ目は```password```であり、２つ目は```password_confirmation```である。
#### 再度コンソールでUserオブジェクトを作り、確認してみる
```ruby:ターミナル
$ rails c
Running via Spring preloader in process 4214
Loading development environment (Rails 5.2.3)
[1] pry(main)> User.new(name: 'ユーザー', email: 'sample@example.com', password: 'password', password_confirmation: 'password').save
```
無事に登録できたら、password_digest属性にどのような値が入っているか確認してみる。

```ruby:ターミナル
> user.password_digest
=> "$2a$12$LLD1gCo75.pc3//VwSXECe7lLJJsIuMsT0SKFozfCxVMtW8ogaZ.a"
```
上記のようになればきちんとハッシュ化されていることになる。
```has_secure_password```は、パスワードのハッシュ化だけではなく、認証のための機能も追加してくれる。
Djangoで DEBUG = False にした時にstaticファイル(CSS, JS, img)が読み込まれない問題を解決する。

HerokuやGAE(Google App Engine)などのサーバでデバッグモードをFalseにすると、いままで開発用に Django が提供していた static ファイルが提供されなくなりCSSやJS、imgなどが表示できなくなってしまうことがあります。

そこで、Google Cloud Storageに static ファイルをアップロードすることによりこの問題を解決することができますので、その方法を解説したいと思います。

> Django Strage (Google Cloud Storage) 公式ドキュメント
> https://django-storages.readthedocs.io/en/latest/backends/gcloud.html


# Django Strage のインストール
Django で Google Cloud Strage を扱うための Django ライブラリ、 `Django Strage (Google Cloud Storage)` をpipでインストールします。

```:bash
$ pip install django-storages[google]
```

# Google Cloud Platform で認証情報の取得
Google Cloud Platform から、 Cloud Strageの認証情報の登録と、認証情報の記載された JSON ファイルを取得します。
## サービスアカウントの取得
Googleスタートガイド (https://cloud.google.com/docs/authentication/getting-started) から取得できます。

手順1
Googleスタートガイド (https://cloud.google.com/docs/authentication/getting-started) のリンクから、「[サービスアカウントキーの作成]ページに移動」を選択
<img width="1440" alt="手順1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397410/7fbf38bb-0e3c-bfbb-9487-ef80dfcb36f0.png">

手順2
新しいサービスアカウントを作成で、サービスアカウント名を入力。
<img width="1440" alt="GCS2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397410/4d3c9fb2-f7b1-65bb-c5f9-2abe4e89f6f3.png">
その後、役割から「ストレージ」 -> 「ストレージ管理者」を選択。
キーのタイプがJSONになっていることを確認して、「作成」ボタンを押下してください。
<img width="1440" alt="GCS3" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397410/46f7d91f-d7ed-e452-9667-93573515ac82.png">
そうすると、JSONファイルがダウンロードされます。
<img width="1440" alt="GCS4" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397410/807f579e-4043-7553-795c-06e4d5189044.png">

**ダウンロードしたJSONファイルは、Djangoプロジェクトのルートディレクトリに配置してください。**

# Google Cloud Strageのバケットの作成
Cloud Strageの単位をバケットといいます（データを入れるバケツみたいな意味）
これを作成して、データを収納します。

Google Cloud Console (Cloud Strage)
https://console.cloud.google.com/storage/browser

上記URLからアクセスすると、以下のような作成画面に遷移すると思うので、新規バケットを作成します。
<img width="1440" alt="作成画面.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397410/24277ea6-59f3-7345-1e53-00e50605bc8f.png">

完了すると以下のような画面になります。
<img width="1440" alt="作成完了.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/397410/e07d9094-3392-5254-a3c0-e01be11950ac.png">

これで、Google Cloud Platform console での設定は完了です。

# Djangoでの設定
### settings.pyに設定の追加
settings.pyファイルでデフォルトのストレージとバケット名を設定します。

```python:settings.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_STORAGE = 'storages.backends.gcloud.GoogleCloudStorage'
DEFAULT_FILE_STORAGE = 'storages.backends.gcloud.GoogleCloudStorage'
GS_BUCKET_NAME = '[YOUR_BUCKET_NAME_GOES_HERE]'

from google.oauth2 import service_account

GS_CREDENTIALS = service_account.Credentials.from_service_account_file(
    os.path.join(BASE_DIR, '[YOUR_AUTHENTICATON_KEY_FILE_NAME].json'),
)
```
以上で設定は完了です。

あとは以下のコマンドを実行しましょう。

```bash:bash
$ python manage.py collectstatic
```

そして設定の変更をサーバにデプロイすると正常に機能するはずです。

お疲れ様でした。
Linux の curl コマンドで OPTION のリクエストを送るには curl -X OPTIONS <URL> ( #Linux )

例

```
$ curl -v -X OPTIONS http://example.com

*   Trying 93.184.216.34...
* TCP_NODELAY set
* Connected to example.com (93.184.216.34) port 80 (#0)
> OPTIONS / HTTP/1.1
> Host: example.com
> User-Agent: curl/7.64.1
> Accept: */*
>
< HTTP/1.1 200 OK
< Allow: OPTIONS, GET, HEAD, POST
< Cache-Control: max-age=604800
< Content-Type: text/html; charset=UTF-8
< Date: Wed, 13 Nov 2019 00:11:50 GMT
< Expires: Wed, 20 Nov 2019 00:11:50 GMT
< Server: EOS (vny006/0453)
< Content-Length: 0
<
* Connection #0 to host example.com left intact
* Closing connection 0
```

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2714








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
bootstrap グリットの合計を12にしても縦積みになってしまう

# bootstrapを使って横並びにしたいけどならない


```html:index.html.erb
<div class="body">
    <div class="container">
	    <div class="row">

		    <div class="col-xs-3">
				色々中身が書いてある、、、
            </div>
             <div class="col-xs-9">
				色々中身が書いてある、、、
            </div>

		</div>
	</div>
</div>
```

######別に変な所はない気がするな〜

.col-xs-3 + .col-xs-9 でグリットが12になるので、グリットの指定も間違ってない

#####原因不明！

一応グリッドをもっとちっちゃい数にしてみようと思いました。

```html:index.html.erb
<div class="body">
    <div class="container">
	    <div class="row">

		    <div class="col-xs-3">
				色々中身が書いてある、、、
            </div>
             <div class="col-xs-３">
				色々中身が書いてある、、、
            </div>

		</div>
	</div>
</div>
```

どっちも`.col-xs-3`にして合計6グリットになるようにしてみました(適当)

######そしたら横並びになった！！！！！！

不思議


##rowの入れ子というものを見つける。

デザインはあんまり重視していないので横並びになったから別にいいかなーって感じもするけど
やっぱりなんか合計12にならないと気持ち悪いぞ〜

だから色々探してて見つけたのが、


https://ultimasystem.jp/blog/bootstrap3/1433/

この記事！とても参考になったよ〜！

この記事によると、***rowの入れ子***というものができるらしい。


####rowの入れ子とは

例えばこんな感じ

```html:index.html.erb
<div class="body">
    <div class="container">
	    <div class="row">
　　　　　　　 <div class="col-xs-10">
                 <div class="row">

		            <div class="col-xs-10">
				       色々中身が書いてある、、、
                    </div>
                     <div class="col-xs-2">
				       色々中身が書いてある、、、
                    </div>

                </div>
            </div>
		</div>
	</div>
</div>
```

.rowの中に.colを書いて、さらに.rowを書いて、.colをかく、、、

つまり、１２カラムの中に10カラムあって
さらに１０カラムを１２カラムと考えて10カラムと2カラムがあるって事になる、、、
難しい、、、、


だから今回の問題は、全部足して12カラムなのに縦積みになってしまうってことだから、
col-xs-1２って親カラムを指定してあげたら、合計12で横並びになるんじゃないかなー




```html:index.html.erb
<div class="body">
    <div class="container">
	    <div class="row">
　　　　　　　 <div class="col-xs-12">
                 <div class="row">

		            <div class="col-xs-10">
				       色々中身が書いてある、、、
                    </div>
                     <div class="col-xs-2">
				       色々中身が書いてある、、、
                    </div>

                </div>
            </div>
		</div>
	</div>
</div>
```


これでなった、、、、！


意味わからない
不思議なこともあるんだね〜

ちなみにこのページに影響を及ぼしそうなapplication.htmlで.col使ったりはしてない
oneWEXの操作メモ_ランカー⑵

#はじめに

前回、oneWEXのランカーの概略と操作方法に関する記事[(oneWEXの操作メモ_ランカー⑴)](https://qiita.com/sawa7/items/3cd3463dfe22e3a703b0)を書きました。

今回は、ランカー操作時の考慮点をお伝えします。

#ランカー操作時の考慮点

####機械学習において有効なデータとは
・トレーニングデータは「矛盾のない」正解データでないといけません
極端な例では、もしトレーニングデータ中のすべての文書で、内容が同じにも関わらず、正解データが異なる場合、エラーになりトレーニングできません
・クエリー文書は教師データと類似したデータ構造を持たなければなりません

####ランカーモデルにおける上位K位とは
以下は、Admin Consoleのランカー管理画面です。
ランカーモデルに現れる上位K位の意味を説明します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529440/2c24748f-90f1-e4d5-54c2-7d849f415ffc.png)


・上位K位とは、ランカーが正解類似文書を検索する精度を評価する数字であり、ランキング結果の中で、テストクエリーに対する正解類似文書が上位K位以内に少なくとも１つ以上含まれる確率です
・医療カルテデータを例に、上位K位の求め方をご説明します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529440/a71b494a-bfa2-e8e8-e8a4-10d4f707e4d0.png)


上位1位の値は、1/3=0.33
（３つのテストケースのうち、上位１位以内に正解類似文書が含まれるのは、テストケースBの１つのため）

上位3位の値は、2/3=0.66
（３つのテストケースのうち、上位3位以内に正解類似文書が含まれるのは、テストケースAとBの2つのため）

上位5位の値は、3/3=1.0
（３つのテストケースのうち、上位5位以内に正解類似文書が含まれるのは、テストケースAとBとCの３つのため）

上位10位の値は、3/3=1.0
（３つのテストケースのうち、上位10位以内に正解類似文書が含まれるのは、テストケースAとBとCの３つのため）

####ランカー作成における注意点⑴
・ランカー精度向上時、新旧の教師データ間で重複を含むデータを入れてはいけません
テスト・データセットは変更されない（1度目にインポートした教師データからテストクエリーが作られ、以後固定される）ため、重複するデータ値を持つ教師データを追加した場合、必ず上位に正解文書がランキングされ、正しく上位K位が算出されません

下の例は、誤って新旧の教師データ間で重複を含むデータをインポートした場合です。
（1度目に240件、2度目に2400件(一度目の240件と重複するデータを含む)の教師データを追加）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529440/180b0db6-62a0-8cda-9b6c-212e5fe9dc40.png)

####ランカー作成における注意点⑵
学習リソースの作成に失敗する場合、「詳細の表示」から学習エラーの詳細を確認します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529440/1b27394c-3f80-55b0-a407-7b9360b5ea3b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529440/276e5ce0-7377-d684-98df-5e7cab0b8276.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529440/7fa4af8d-9021-7cbb-7289-40ee86aa34f8.png)

####ランカー作成における注意点⑶
コレクション作成完了後に、適用するコレクション・テンプレートやランカーの変更はできません

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529440/aeca7c6b-d3f5-3e64-2fed-18ca2b0aee41.png)

分類器とランカー両方を適用したコレクションを作成する場合、まずランカーをコレクションに適用し、その後コレクション管理画面で分類器を追加します。追加後はコレクションで索引の再作成を行います
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529440/789bb916-e8b7-6c8d-6bf1-3fd28b6f8f3d.png)

####ランカー作成における注意点⑷
ランカーを適用していないコレクションでも類似文書検索は可能です。
ただしランカーがない場合は、すべてのフィールドが等しく扱われてランキングのスコアが決まります。
ランカーがある場合は、機械学習結果によって得られたフィールドの重み付けを加味してスコアが決まります。
Terraform を 0.12 に移行する大まかな流れ

# Deprecating Terraform 0.11 Support in Terraform Providers
Terraform 0.11 向けの Provider がサポート切れになるみたい。

> During the upcoming months, we will begin deprecating support for Terraform 0.11 in new releases of Terraform providers we officially maintain, beginning with the AWS, AzureRM, Google, and Kubernetes Terraform providers.
https://www.hashicorp.com/blog/deprecating-terraform-0-11-support-in-terraform-providers/


# 移行の流れ
とりあえず流れだけ。

0.12 への移行の流れは [公式ドキュメント](https://www.terraform.io/upgrade-guides/0-12.html) にある。
以下の流れで行う。

- 念のためアップグレード前に、 tf ファイルおよび state ファイルはバックアップする。
- 0.11.14 へアップグレードする。
- 0.11 で `terraform init` 〜 `terraform apply` まで行って差分なくす。
- 0.11 で `terraform 0.12checklist` を実行し、出力されたメッセージに従って tf ファイルを修正する。
- 0.12 のリリースにアップグレードする。
- `terraform init` および `terraform 0.12upgrade` を実行する。
- `TF-UPGRADE-TODO` コメント部分の設定について確認、必要に応じて修正する。
- `terraform validate` や `terraform plan` で確認し、構文エラーが無いことを確認する。

tfenv でバージョン管理できるけど、最近は docker-compose で管理するようにしてて良い感じ。
[tfenvでTerraformのバージョン管理をする](https://qiita.com/kamatama_41/items/ba59a070d8389aab7694)
[Docker-ComposeでTerraformを使う](https://qiita.com/m0559reen/items/1e433ff9e6f6229c3291)

移行自体やってみると、そんなに難しくないハズ。
`terraform 0.12upgrade` コマンドで `TF-UPGRADE-TODO` のコメントが入るので、だいぶ助かる。
jQueryでシンプルなオリジナルのボードゲームを作れるwebアプリを作る


##前置き

１ヶ月前にプログラミングを学び初めて１ヶ月経ってので備忘録として作ったwebサービスを公開してみようと思います。
制作期間は４日くらい、主にjQueryを使用しました。

##デモ
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">プログラミングを勉強したのでボードゲームを作れるwebアプリを作りました<br>好きな大きさのボードと駒を作成し自由に動かせるようにしています <a href="https://t.co/vWH4YWX6ZQ">pic.twitter.com/vWH4YWX6ZQ</a></p>&mdash; こーや東風 (@KoyaTongPoo) <a href="https://twitter.com/KoyaTongPoo/status/1194502924828700673?ref_src=twsrc%5Etfw">November 13, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

##仕様について
シンプルに「background-color」「border-radius: 50%;」で駒を作成し
文字の色と大きさを決めて書き込めるようにしています。
ダブルクリックすると作成した裏面に切り替わります。
jQuery uiを入れればドラッグ＆ドロップはできるのでそれをマス目にハマるようにしています。


```javascript:index.html
function drag() {
  // 駒をdrag可能にしてテーブルにくっつける
  $(".drag").draggable({ 
     snap: ".kuttuku"        
   });
  };
```
あとはlocalStorageにJSONを使って駒のデータを保存できる仕様にしています。

```javascript:index.html
function komaImg(basyo,num,color,name,) {
    let getId = $(this).attr('id');
    basyo = "#k"+getId;
    bcolor = $(".b"+getId).val();
    name = $("#n"+getId).val();
    fontsize = $("#f"+getId).val();
    color = $(".c"+getId).val();
            $(basyo).html('<div class="hukusei" id="id'+getId+'"style="background-color:'+bcolor+'" >'+name+'</div>');
            $(basyo).css("font-size",fontsize+"px");
            $(basyo).css("color",'"'+color+'"');
            let n = [];
            n.push(name,bcolor,fontsize,color);
      localStorage.setItem(getId,JSON.stringify(n));

        };
```
わかりにくくて恐縮ですが、駒作成のテーブルにそれぞれidとclassを振り分けて
クリックした駒作成ボタンのidを拾い、そこから色やフォントサイズを振り分けています。

##作成してみて
つまずいたポイントとしては、動的に生成した要素のクリックイベントが動かない問題でした。
もし同じように困っている方がいらっしゃれば、とりあえず生成する関数の内部にconsole.logを入れてみれば解決していくと思います。

あとは今後の課題としてiOSで動作させた時にタッチが反応しないケースがあり、どうやらdiv要素で囲っていた事が原因のようでしたので、　　　　　　　　　∫
こういったアプリを作ってみたい方は初めからスマホやタブレットで動かすことを意識してタグ付けした方がいいかと思います。
管理者権限VisualStudioでD&D機能を持つアプリをデバッグすると上手く動かないケース

## 事の発端
ドラッグ&ドロップでファイルパスを取得する機能を持つアプリをC#で作りたいと考え
Csharperにはお馴染みの[DOBONさんの記事](https://dobon.net/vb/dotnet/control/draganddrop.html)を参考にプログラムを作成する。

WindowsFormsにおけるD&Dの動きの流れとしては

1. **AllowDrop**をTrueにしたコントロール上に何らかのオブジェクトがドラッグされるとまず
2. **DragEnter**なるイベントが発生する。そこでD&Dを許可する事で、Dropされた際に
3. **DragDrop**イベントが発生するのでその中で渡されたファイルパスをどうにかするというもの。

事前に**DragEnter**イベント内でD&Dを許可しないと、後続の**DragDrop**イベントが発生しない、というのが初めてD&D機能を扱う自分にとっては新鮮でした。

ででで、VisualStudioで実際に作ったアプリをデバッグしてファイルをD&Dしてみると
**DragEnterイベントが発生しない！**

## リリースビルドしたアプリではDragEnterイベントが発生した
デバッグで起動したアプリにD&Dしてもイベントが発生しないので色々調べると
管理者権限云々が関係あるという記述を見つける。
自分はVisualStudioを管理者権限で起動していたので、Debugでも管理者で起動されてるのでは？と考え
一旦リリースしてアプリを**通常起動**してD&Dしてみると**イベントが発生した**
そしてそのアプリを**管理者権限**で実行してD&Dしてみると**イベントが発生しなかった**

## とりあえず解決
管理者権限で起動したアプリケーションでD&Dを行うのは、どうもややこしい制約があるそうです
UACやら管理者権限やらは詳しく無いので別途検索して頂くのが良いかと思います。

とりあえず解決策としてVisualStudioを通常起動する事で、デバッグ時にD&Dを有効にする事が出来ました。
やはりVisualStudioを管理者権限で起動すると、Debugも管理者扱いになる模様です。

初歩的過ぎる内容かもしれませんが、ハマって1時間くらい浪費したので
誰かのお役に立てれば幸いです。
Goのpackageを作ろうとしたらgo.modの作り方で困った件

# おことわり
とても恥ずかしいミスだったのですが、即解決のダイレクトな記事がなかったので残しておきます。

# 結論
packageのルートディレクトリ(ex. my_package)で、`GO111MODULE="on"`になるようにしてから

```
go mod init my_package
```
を実行する。(そもそもアンダースコア使っていいのか、、、?)

ルートディレクトリ内で、ルートディレクトリ自身の名前を指定することがパッと思いつかなかった。
あと`touch`とかで自分で勝手に作っちゃダメ！(やってしまった)

# 状況
- アプリケーション(=main.goがある)リポジトリばかり触っていた
- フレームワークのプロジェクトgenerateコマンドがgo.modを勝手に作ってくれてた

今までこんな状況だったので、いざ自分がpackageを０から作るとなった時に、
pacakge内で`go test`ひいては`go get`を実行できなかった。

# ちなみに
よそのパッケージからgo getしようと思ったら、
go.modの1行目には

```
module github.com/{Githubのorganization名orアカウント名}/my_package
```
という風に書き変えなければならない。
初期状態だと

```
module my_package
```
のはずだが、
この状態のまま他所からmy_packageをgo getしようとすると

```
$ go get -u "github.com/{Githubのorganization名orアカウント名}/my_package"
go: finding github.com/{Githubのorganization名orアカウント名}/my_package latest
go: downloading github.com/{Githubのorganization名orアカウント名}/my_package v0.0.0-{略}
go: extracting github.com/{Githubのorganization名orアカウント名}/my_package v0.0.0-{略}
go get: github.com/{Githubのorganization名orアカウント名}/my_package@v0.0.0-{略}: parsing go.mod:
        module declares its path as: my_package
                but was required as: github.com/{Githubのorganization名orアカウント名}/my_package
```
という感じで怒られる。

# 参考
[GoのWiki](https://github.com/golang/go/wiki/Modules#why-does-installing-a-tool-via-go-get-fail-with-error-cannot-find-main-module)
デザインで「簡単」な印象を与える方法まとめ

##【簡単】ってなによ
「簡単5分レシピ」　「かんたん〇〇使い方」、"簡単"という言葉はいろんな場所でみかけることが多いと思います。

>簡単：取扱いが容易く、手数がかからないこと。

この言葉がつくとモノの敷居がぐっと下がる印象があります。
言葉とアウトプットを紐づけるにはどうしたらいいのか？
デザイナーは無意識下でやっている人も多いとは思いますが、今回は私が考える【簡単】
という単語にフォーカスしてとてもざっくりではありますがデザインの考え方をまとめました。

---

###【目次】
⓪意図がよくわからないデザインをしてみる
①構成から考える
②タイポグラフィから考える
③色から考える
④ビジュアルから考える
⑤結びに

---

###⓪意図がよくわからないデザインをしてみる
これをみて皆さんはR&Dグループに興味を持ちますか？今日の夕ご飯の気分と、
そのへんのカラーコードをぶち込んで適当に作りました。~~とても控えめで美味しそうなデザインですね~~
![わからない-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532344/334acdab-ad67-8f16-e230-b2d8560814a9.png)
受け手に弊社のR&Dグループを身近に感じて簡単に理解してもらうためのデザインを要素分解しながら考えてみます。

---

###①構成から考える
**なぜ簡単なのか、必要としている情報に簡潔にたどり着ける構成が一番大切です。**
なので文言のチョイスにも気を配る必要があると思います。
上記のキャッチフレーズだと「5分で理解ができる」ことや、料理レシピでいうと「フライパンしか使わない」からetc、なぜ簡単なのかがアピールしたいポイントを文字やビジュアルで一番先に目に入るように伝える必要があります。


---

###②タイポグラフィから考える
タイポグラフィ、つまりテキストデザインですね。フォントやサイズ、色や太さから成り立っています。
結論から申し上げると太字のはっきり見える文字を主軸にしたデザインが一番簡単な印象を与えられると思います。なぜなのか？![フォント-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532344/441c7ddd-790c-1181-a50c-815f03baf872.png)

**何が簡単なのか（今回の場合だと5分でわかること）を受け手に一番素早く説明するツールとして視覚情報に残りやすいサイズ、太さのフォントが向いています。**
上記の画像だと３番目のゴシック体でもW1の細さまでいくとぱっと見の印象として意図が伝わりにくくなるんじゃないかなあと思います。また明朝体はデザイン次第ですが簡単より優雅な印象を与えることから敷居が高く感じてしまうこともあります。

---

###③色から考える
これは国や人種によって受け手の印象が異なるのですが今回は日本でのお話をさせてください。

色には３大要素があります（明暗・彩度・色相）
彩度が高い→快活、活発なイメージ　彩度が低い→おとなしいイメージ　etc.
明度が明るい→軽やか、爽やかなイメージ　明度が暗い→重たい印象　etc.

**・・・とかなんとかよく色の話であると思いますが面倒臭い説明は横に置いてつまり発信したい情報をはっきりと見せる色を選択すると意図が伝わりやすく理解のしやすさに繋がるのでわかりやすい印象を与えられます。**

![彩度-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532344/56ef5abf-d6c5-365e-03f2-9acdda8b8008.png)

同じ青でも明度と彩度を操作するだけで印象が変わることがわかると思います。一番上の明度だけ高くした青はとても視認性が落ちますね。文字には向いていないことがわかります。下の３つは視認性は高いですが、
**簡単な印象を与えるという着眼点からみると受け手が情報を受け取った時にやってみたくなる、詳しく知りたくなる、私でもできるとポジティブな印象になる明るい色、連想されるものから壁を作らない、彩度がある程度高く、明度によって視認性を調節された色を選ぶのがポイントかなあと思っています。**
青は例で出しただけなので青色がベストってわけではないです。どの色相でも同じことが言えると思います。

---

###④ビジュアルから考える
**伝えたいことと繋がりがあること！**
これに尽きます。綺麗だから、余白が空いたからと言って内容と全くリンクしていないビジュアルを置くと受け手は混乱します。またネガティブな印象を与える重たいビジュアルよりも明るいビジュアルの方がやってみたい！ワクワクの気持ちを湧かせます。
![わかる-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532344/29ef5e0e-0989-e43f-0893-29adfd4b14c7.png)
タイポグラフィだけでも充分伝わる場合ビジュアルを無理に使わない勇気を持つこともイイかもしれません。

---

###結びに
おこがましい話を沢山しました。すみませんぺこり。
今回は「簡単」というキーワードに絞ってデザインについて考えてみました。ゲシュタルト崩壊させてしまったらすみません。上記４つだけでは伝えきれないことがたくさんありますが、どの要素が欠けても受け手に伝えたいことは伝わらないと思います。
伝えたいことはなんだろうと考えた時作り手の意図を言語化できるヒントになれば幸いです。
**※ここに書いてあることが正解なわけではありません。なぜこのデザインにしたのか私目線で説明しやすくなる目的で書いたものなのでアウトプット自体は読んでくださった皆様と一緒に探していければ嬉しいです。**
[ Android ] パーミッション設定

Androidのパーミッション設定について記す。

##パーミッションとは
例えば、Android 上でインターネットに接続するためには、そのためのパーミッションを必要とする。
この時AndroidManifest.xmlに以下のような内容を記述する。

~~~xml
<uses-permission android:name="android.permission.INTERNET" />
~~~

これがパーミッションである。

##種類
パーミッションには様々な種類がある。
上記のNETWORK ネットワーク通信に関するものを始め、PERSONAL_INFO 個人情報、DEVELOPMENT_TOOLS 開発ツール、MESSAGES 送受信したメッセージなど多岐に渡る。
これらを指定したい場合は、上記の追加した記述でINTERNETという部分を変えればよいだけである。
以下に一例を示す。

・ネットワーク通信
**ACCESS_NETWORK_STATE**：ネットワーク状態の表示を許可する。
**ACCESS_WIFI_STATE** 　：Wi-Fi状態に関する情報の表示を許可する。

・個人情報
**READ_CONTACTS**：端末に保存したアドレスデータの読み取りを許可する。
**WRITE_CONTACTS** 　：端末に保存したアドレスデータの変更を許可する。

・開発ツール
**SET_DEBUG_APP**：別のアプリケーションをデバッグモードにすることを許可する。
**SET_PROCESS_LIMIT** 　：実行するプロセス数の上限の制御を許可する。

・送受信したメッセージ
**RECEIVE_SMS**：SMSメッセージの受信と処理を許可する。
**READ_SMS** 　：携帯電話やSIMカードに保存したSMSメッセージの読み取りを許可する。


以下のサイトがとても参考になった。
http://pentan.info/android/app/permission_list.html

##まとめ
パーミッションはAndroidでインターネットに接続したいとき、忘れやすいので覚えておくと役に立つであろう。
以上。
tfsecを使ってterraformで書かれたコードに危険な箇所がないかチェックする

## 概要

tfsecは静的解析で潜在的なセキュリティリスクをチェックします。自動的にある程度の問題を見つけてくれるのでやっておきましょう。


## 実行環境

* macOS

## インストール

```bash
brew tap liamg/tfsec
brew install liamg/tfsec/tfsec
```

## macOS以外へのインストール

https://github.com/liamg/tfsec/releases リリースページからバイナリをダウンロードしてきましょう。

## 実行

```bash
tfsec .
```

## チェック出力例

<img width="902" alt="screenshot.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7565/a60cfccd-15ce-c8db-16f6-9215e8349a19.png">

## githubレポジトリ

https://github.com/liamg/tfsec
Web Speech API Speech Recognition で数値の認識を統一する

# 概要
https://qiita.com/hmmrjn/items/4b77a86030ed0071f548
こちらの記事などを参考に音声認識アプリケーションを作っていました。
「10キロ」「20キロ」など数値を入力する際に、数字と漢数字が混ざって扱いづらいのでどうにかしたい。

# 再現手順
1. 以下のデモサイトにアクセス
  - https://www.google.com/intl/ja/chrome/demos/speech.html
2. 日本語を選択して、「10キロ、20キロ、30キロ、…」としゃべっていく。
3. テキスト化された内容を確認すると数字と漢数字が混じっている
  - 60 と 70 が割と怪しい
  - 六十キロ 七十キロ
  - まとめてしゃべると補正するようだが単体だとダメ

# 解決方法
- SpeechGrammar を設定してあげる
  - https://developer.mozilla.org/ja/docs/Web/API/SpeechGrammar
- `JIS ja` を指定する必要あり

```javascript
      // 日本語の数字を単語として登録する
      const grammar =
        '#JSGF V1.0 JIS ja; grammar numbers; public <numbers> = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 ;'
      const SpeechGrammarList =
        window.webkitSpeechGrammarList || window.SpeechGrammarList
      const speechRecognitionList = new SpeechGrammarList()
      speechRecognitionList.addFromString(grammar, 1)
      recognition.grammars = speechRecognitionList
```
- 受け取れるテキストが数字になる
- (とりあえず動いたのでオッケーとする)

# 動作確認サンプルコード
- Nuxt.js Vuetify 環境のサンプルコード

```vue:recognition-test.vue
<template>
  <v-row justify="center">
    <v-col sm="12" md="11" lg="9" xl="6">
      <v-sheet class="pa-3">
        <h1 id="hoge">音声認識テスト</h1>
        <v-row align="center" justify="center" class="mt-2 mb-10 px-2">
          <v-btn
            outlined
            :disabled="disabled"
            color="iconcolor"
            rounded
            block
            @click="start"
            >{{ text }}</v-btn
          >
        </v-row>
        <v-sheet elevation="6">
          <v-list light>
            <v-list-item>
              <v-list-item-content
                >※ここに認識した音声が表示されます</v-list-item-content
              >
            </v-list-item>
            <v-list-item v-for="(log, i) in logs" :key="i">
              <v-list-item-content>{{ log }}</v-list-item-content>
            </v-list-item>
          </v-list>
        </v-sheet>
      </v-sheet>
    </v-col>
  </v-row>
</template>

<script>
export default {
  data() {
    return {
      text: '音声認識スタート',
      disabled: false,
      logs: []
    }
  },
  methods: {
    start() {
      const SpeechRecognition =
        window.webkitSpeechRecognition || window.SpeechRecognition
      const recognition = new SpeechRecognition()
      recognition.continuous = true

      // 日本語の数字を単語として登録する
      const grammar =
        '#JSGF V1.0 JIS ja; grammar numbers; public <numbers> = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100 ;'
      const SpeechGrammarList =
        window.webkitSpeechGrammarList || window.SpeechGrammarList
      const speechRecognitionList = new SpeechGrammarList()
      speechRecognitionList.addFromString(grammar, 1)
      recognition.grammars = speechRecognitionList

      recognition.onresult = (event) => {
        const inputMessage =
          event.results[event.results.length - 1][0].transcript
        this.logs.push(inputMessage)
      }
      recognition.onend = (event) => {
        // 一定時間入力が無いと終了するので継続する
        recognition.start()
      }

      recognition.start()

      this.text = '何かしゃべってください!'
      this.disabled = true
    }
  }
}
</script>
```
プログラミングを始めて1ヶ月で作ったウェブアプリ

#1. プログラミングを学びはじめて1ヶ月が経ちました...
はじめまして。はじめてQiitaに投稿します。

現在、全くの未経験からプログラミングを学習しており、
タイトルの通り学習を始めて１ヶ月が経ったので
備忘録的に作ったものや参考になった記事などアップしていきたいと思います。
#2. 1ヶ月の成果:天気APIを使用したコーディネート提案アプリ
【アプリの概要】
気象状況に応じた参考のコーディネート画像やおすすめのアイテムを提示してくれるアプリ
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510320/3259736d-d167-bc0b-91cc-e081911f623e.gif" width="400px" height="auto">

【制作期間】
1週間

【使用したAPI】
OpenWeatherMap(Current weather data、5 day / 3 hour forecast)
https://openweathermap.org/

【実装した機能とこだわりポイント】
・現在地を取得してその地域の天気を表示し、その結果に応じた参考コーディネート画像やコメントの表示
・現在地以外の天気も確認できる機能
・OpenWeatherrMapAPI既存の天気アイコンが気に食わなかったのでそこを変えた
・1対1のチャットシステム
(FirebaseのRealtimeDatabaseとGoogle認証を使用してっぽいものを作りました)

画像やコメントの表示は、ifでひたすら条件分岐させるというかなりのアナログ設計ですが、
作りたい！と思ったものを形にできるようになったのは、この１ヶ月の成果かなと思ってます。

#3. 加えたかった機能や改善点
本当はもっとやりたいことがあったのですが、技術と時間が伴わず形にすることができませんでした。
さらに...改善点に関してはQiitaに記事を上げる前に改善しろよって感じだと思いますが
あくまで備忘録なので、そのまま書かせていただきます。

【加えたかった機能】
・1対1のチャットシステムをちゃんと実装させたい
・自分が持っている洋服を登録する機能
・ニュースAPIを使ったニュースページ

【改善点】
・画像の読み込みがとても遅い
・スマホで見ると時刻の表示がNaNになる
#4. 参考にした記事
・OpenWeatherrMap関連
https://qiita.com/mikan3rd/items/a5bc87a2242e67cf17a4
https://qiita.com/gurany_tou/items/483bcc3ec9bb3fdd8efa
PHP CS Fixer を VS Codeで動かす（macos）

PHP CS Fixer は、PHPのコードをいい感じで整形してくれるツール。
細かいスペースとかをコードレビューで直すのはあんまり意味ない気がするので、ツールに整形してもらって勝手に直してもらおう！
（Composerでグローバルにインストールする方法にしました！）

## Composerをインストール

ここを見てインストール
https://getcomposer.org/download/

composerでコマンドをglobalインストールした時にパスが通るように設定する。


```
# bashの場合、多分これを ~/.bash_profile に書く 
export PATH="$PATH:$HOME/.composer/vendor/bin"

# fish shellの場合、↓これを ~/.config/fish/config.fish に書く
set -x PATH ~/.composer/vendor/bin $PATH
```


## PHP CS Fixer をインストール

```shell-session
$ composer global require friendsofphp/php-cs-fixer
```

## VSCodeの php-cs-fixer Extensionを入れる

↓ `php cs fixer` で検索して、一番上にくるやつをインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10609/6f6176b4-6a7d-91db-863f-f61ae995914e.png)


## 保存したタイミングで整形するように設定

`⌘+ ,` を押して、設定画面を出し、 `php cs fixer onsave` で検索して表示される、「PHP-cs-fixer: Onsave」 の「Execute PHP CS Fixer on save」にチェックを入れる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10609/a3ebeeef-f61d-798c-1e9f-7234c1ff0a18.png)

できた！

![](http://g.recordit.co/k9nmxSEi2t.gif)
【Rails】Ruby on Railsで時間を15分単位で丸める、区切る【初心者メモ】

# rounding gemを使う

```ruby:Gemfile
gem 'rounding'
```
```
bundle install
```

```
Time.current
# => Wed, 13 Nov 2019 15:31:30 JST +09:00

Time.current.floor_to(15.minutes)
# => Wed, 13 Nov 2019 15:30:00 JST +09:00
```
floor_to無し
Wed, 13 Nov 2019 <font color="red">15:31:30</font> JST +09:00

floor_to有り
Wed, 13 Nov 2019 <font color="red">15:30:00</font> JST +09:00

00分、15分、30分、45分で区切られて、はみ出した分は切り捨てられる。
上記は31分30秒の30分以降が切り捨てられて、30分00秒になる。


15.minutesの部分を変えれば、好きな時間単位で丸められる。
例えば、10.minutesにすれば10分区切りにできる
【Python中級者への道】pipでパッケージを一括インストールする


# まとめへのリンク

https://qiita.com/ganariya/items/fb3f38c2f4a35d1ee2e8

# はじめに

Pythonの勉強をするために、[acopy](https://github.com/rhgrant10/acopy)という群知能ライブラリを写経していました。

acopyでは、多くのPythonの面白い文法・イディオムが使われており、その中でも便利だなぁというのをまとめています。


今回は、Pythonのパッケージの一括インストール・書き出しについてです。

# pip

pipは、Pythonの公式パッケージマネージャーです。
サードパーティ製のライブラリのインストールを、pipのみで簡単に行うことができます。

古めの言語は、このライブラリのインストールが非常に面倒だったりするため
Pythonのpip
Nodejsのnpm
など、パッケージマネージャーがあると非常に便利ですね。

# パッケージの読み込み

pipを利用することで

```
pip install ライブラリ名
```
という形で、ライブラリをインストールできます。

ただ、例えばGitで他の方が書いたレポジトリを使用したい時
インストールするべきライブラリが山程必要な場合があります。

そこで、`requirements.txt`という
使用するライブラリのバージョン名とその名前を書き出したテキストファイルを読み込み事で
一括でインストールすることができます。

```requirements.txt
alabaster==0.7.12
Babel==2.7.0
beautifulsoup4==4.8.1
boto==2.49.0
boto3==1.10.1
```

上記のような中身になっています。


requirements.txtの存在するディレクトリで

```
pip install -r requirements.txt
```

としてあげればよいです。


# パッケージの書き出し

パッケージの読み込みをしたあとは、パッケージの書き出し
つまり、プロジェクトで使用するパッケージをすべて洗い出して、他の環境でもすぐにインストールできるようにさせる　ことが可能です。

```
pip freeze
```

というコマンドを打つと

```
alabaster==0.7.12
Babel==2.7.0
beautifulsoup4==4.8.1
boto==2.49.0
boto3==1.10.1
botocore==1.13.1
cachetools==3.1.1
```

上記のように、ターミナルに、ライブラリ名とバージョンが表示されます。

よって、あとはこれをパイプでファイルに出力させてやればよいです。

```
pip freeze > requirements.txt
```

このrequirements.txtをGitHubのリポジトリに入れてあげれば
より簡単にパッケージをインストールすることができて、嬉しさです。


# 最後に

パッケージの一括インストールを見てきました。

pipenvを使用すると、どうやら自動でrequirements.txtにあたる
パッケージをまとめたファイルが作成されるようです。
非常に楽っぽいので、触ってみようと思います。

# 参考文献

- [Python, pipでrequirements.txtを使ってパッケージ一括インストール](https://note.nkmk.me/python-pip-install-requirements/)
【機械学習】社内輪講 Week11 〜写真OCR〜

## はじめに

[スタンフォード大学 Andrew Ng氏による機械学習の講義動画](https://www.coursera.org/learn/machine-learning)を各週社内メンバーで持ち回りで受講し、学んだことを発表、Qiitaで共有しています。  
その最終回が今回の記事です。

社内輪講をやるにあたっての記事です。  
[【機械学習】社内輪講はじめました](https://qiita.com/aoki-k/items/a25fe5e9d504f90f72f3)

第十回の講義が以下の記事
[【機械学習】社内輪講 Week10 〜大量のデータセットの扱い〜](https://qiita.com/i-chida/items/98ea71559f2f138d0cd5)

## 本講義の導入
最近では、スマートフォンなどで、手軽に写真を取れるようになり、みなさんのスマートフォンの中にも、大量の写真データがあると思います。
そんな写真データを手作業でラベリングしていくとなると、膨大な時間がかかり、現実的ではないですよね。
今回は、写真データを用いて、写真の中にあるテキストをどう認識させていくかについて学んでいきます。

### 写真OCR
下記のような写真を読み込んだ時に、赤枠で囲んだ部分の文字を認識させなければなりません。
![図1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469340/a8c20cfb-2a22-a462-3d00-92d3052f736e.jpeg)

人間の目では、パッと見でわかるのですが、（それも今までの経験で学習しているからですが、）
コンピュータで処理するためには、パイプラインと呼ばれる、工程をいくつかに分解して段階的に、文字認識を行っていきます(下図)。

![図1 (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469340/da6717cc-2407-c18c-19b6-7254e64bf1d8.png)

#### 1. 文字検出
文字検出するために、教師あり学習を用います。
文字を含んだ画像を$y=1$とし、文字を含んでいない画像を$y=0$として、学習させていきます。

![図1 (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469340/fff6410e-1fc9-d3cf-cc7c-e51a9cdfa468.png)

#### 2. 文字分割
文字分割も同じく、教師あり学習を用います。
今回は、文字と文字の間に境界があり、分割されている画像を$y=1$とし、文字単体であったり、何も写ってない画像を$y=0$として学習させます。
![図1 (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469340/86d57d3f-f8c1-10d4-1238-bdf91ebf92af.png)

#### 3. 文字分類

文字分類に関しては、今まで学習した、ロジスティック回帰やサポートベクターマシンなどを用いて分類します。
分類する時は、アルファベットは26文字のみなので、良いですが、日本語は、ひらがな・カタカナ・漢字、、、と膨大な組み合わせがあるので、それに伴い、学習データも大量に必要になってきます。

そこで、データを集める方法はというと、
- クラウドソーシングなどを活用
- 人工データを作成

などがあり、今回は、人工データ生成の方法をお伝えいたします。

### 人工データ生成
例えば、下記のような実際のデータがあった時に、データを増やしたい場合は、まずは文字+背景画像を組み合わせて生成します。
![図1 (9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469340/0cc47be0-8c7b-b70f-6e48-4e2f4b3d40ad.png)
その際に、フォントや背景を変化させることでバリエーションが増えます。

そしてさらに、生成した画像に対して、アフィン変換(回転、引き伸ばし、歪み)をして、画像を実際のデータっぽくします。
どれだけ実際のデータに近づけることができるかで、認識精度にも影響を与えます。
実際に試してみましたが、これはちょっとアーティスティックな作業になります。

こうして組み合わせを変えることで、人工的に膨大な数のデータを生成することができます。

### 天井分析

機械学習は1回実装したら終わりという訳ではなく、精度を改善していく必要があります。
しかし、闇雲に改善していては、時間と人手がかかりすぎてしまいます。
そこで登場するのが、この天井分析。
先ほど紹介したパイプラインにおいて、どこを改善すると効果的に精度を高めることができるかを分析する手法です。

例えば、1度実装してみた結果、全体の精度が72%だとします。

![図1 (11).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469340/fc700c3b-118c-1173-2710-813275aedf98.png)

もっと精度をよくしたい、でもどこから手をつけようかと考えますよね。
では、次に、文字検出を飛ばして、手作業にて100%文字検出されたデータを文字分割に入力として与えます。
そうすると、精度は88%に向上。16%上がったことになります。

次に、手作業にて文字分割まで行い、100%文字が分割された状態のデータを文字分類に入力として与えます。
そうすると、精度は89%まで向上。1%だけ上がったことになります。

最後は全て手作業ですると、もちろん精度は100%になります。
文字分割においては11%向上することが見込まれます。

![図1 (13).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469340/a832d1c4-4ed3-2cd0-fec5-384d43c54d72.png)

以上の結果を踏まえ、1番改善すべきポイントは16%改善の余地がある文字検出のアルゴリズム、2番目は10%改善の余地がある文字分類ということがわかります。

以上で、Week11 写真OCRについて終了です。
社内でのAndrew Ng教授による機械学習の輪講もこれにて終了です。
ここまでお疲れ様でした！

次回の輪講も乞うご期待！
PodのTimeZoneを設定を設定する EKS


KubernetesのTimezoneがdefault UTCになっている為、これを変更したい。
コンテナのenvにTZ:Asia/Tokyoを設定すればいいらしい。

```
      containers:
        env:
          - name: TZ
            value: Asia/Tokyo
```

まとめてやる方法もあるみたいだが、EKSではPodPresetが利用できないため、この設定ができなかった。
[KubernetesのPodのタイムゾーンをまとめて設定](https://qiita.com/ussvgr/items/0190bab3cc7d16c0116c)

対応に関しては下記
参考:[PodPreset is not yet available on EKS](https://github.com/awsdocs/amazon-eks-user-guide/pull/59)
参考:[対応しているアドミッションコントローラーの一覧](https://docs.aws.amazon.com/ja_jp/eks/latest/userguide/platform-versions.html)
docker-compose build が重い、イメージサイズが大きすぎるのって .dockerignore で解決できる？ #docker #rails

# .dockeriignore

噂に聞いた話レベルだが、本当に効果があった。

.docker-compse.yml と同じディレクトリに .dockerignore を設置して、不必要なディレクトリを無視してやる。

```
/log
/vender
```

まだ概要把握中。

# 別の方法？

logディレクトリなどをマウントしない方法もあるみたいだけど、これだとマウントされなくなってしまうしな。

[docker-composeを爆速にする - Qiita](https://qiita.com/shotat/items/57d049793605ffc20135)

>Rails開発等でdocker-composeを使うと非常に遅い場合があります（特にDocker For Mac）。
docker-compose時に余計なファイルをマウントしてしまってるのが原因らしいので、.git, log, tmp, vendor >などのホストからマウントする必要のないディレクトリを別のvolumeでマウントを上書きしてしまえば解消されます。

```yml
version: '3'
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile.dev
    environment:
      RAILS_POSTGRES_HOST: db
    ports:
      - "3000:3000"
    volumes:
      - .:/app:cached
      - bundle:/usr/local/bundle:cached
      # 1. exclude volumes
      - /app/vendor
      - /app/tmp
      - /app/log
      - /app/.git
...
```

# 関連

[Dockerfile リファレンス — Docker-docs-ja 17.06.Beta ドキュメント](http://docs.docker.jp/engine/reference/builder.html#dockerignore-file)

[docker-compose build too slow (not response) · Issue #6409 · docker/compose](https://github.com/docker/compose/issues/6409)

[.dockerignore アンチパターン - Qiita](https://qiita.com/munisystem/items/b0f08b28e8cc26132212)

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2713








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
#Ruby or #Rails で Date の月同士を比較計算したいのだが？

愚直に頑張るしかないのかもしれない。

```
(date2.year * 12 + date2.month) - (date1.year * 12 + date1.month)
```

[Find number of months between two Dates in Ruby on Rails - Stack Overflow](https://stackoverflow.com/questions/9428605/find-number-of-months-between-two-dates-in-ruby-on-rails)


# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2712








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
SQL Server データベース読み書きパフォーマンスチェック（Disk I/O)とパフォーマンス向上施策

#意外に重要・・・ディスクパフォーマンス

とある保守環境でレガシーなサーバーを利用しており、 ~~CPU, メモリに問題ありません、ハードウェアに問題ありませんと「協力会社」の方が報告してきたなかで誰も気にしていなかった(何か遅いと言えばCPU, メモリばかり考えますよね？)~~ディスクパフォーマンスを調査した事例。OSレベルのパフォーマンスカウンターでもわかるが最終のSQL Server再起動時から（再起動でリセットはかかる）SQLで取れるログがいくつかあり下記がSQLの例。影響しているデータファイル（file_idで）とファイル読み書きの良し悪しがわかる。

読み書き応答速度チェック

```
SELECT DB_NAME(database_id) AS [ﾃﾞｰﾀﾍﾞｰｽ名] , file_id , CAST(( io_stall_read_ms + io_stall_write_ms ) / ( 1.0 + num_of_reads + num_of_writes) AS NUMERIC(10,1)) AS [平均読書ストールミリ秒] , CAST(io_stall_read_ms / ( 1.0 + num_of_reads ) AS NUMERIC(10, 1)) AS [平均読取ストールミリ秒] , CAST(io_stall_write_ms / ( 1.0 + num_of_writes ) AS NUMERIC(10, 1)) AS [平均書込ストールミリ秒] ,　io_stall_read_ms , num_of_reads , io_stall_write_ms , num_of_writes , io_stall_read_ms + io_stall_write_ms AS [io_stalls] , num_of_reads + num_of_writes AS [total_io] FROM sys.dm_io_virtual_file_stats(NULL, NULL) ORDER BY [平均読書ストールミリ秒] DESC ;
```

file_id特定後ファイル名を特定

```
SELECT FILE_NAME(xxxx) AS 'File Name xxxx',FILE_NAME(yyyy) AS 'File Name yyyy';
```
肌感覚で大した仕組みでないデータベースで30〜50ミリ秒を上回っていたらかなり注意。最近はSSDやクラウドで速いことが多いがオンプレで特に速度が遅いSATAやSASでもRAID 10になっていないようなRAIDの組み方ではパフォーマンスが出ずシステムレスポンスが遅いという話になる。下図は実例だが、書き込みで3,000 ms 近い遅延や読み込みで200ms近い状態もある。書き込みが遅い場合、データ検証チェックをDBレイヤーで行わずアプリロジックに入れてしまう方が良い（というかそうしておいた方が拡張性、保守性が高い）。インデックスが多いと遅延につながる。同様に読み込みが遅い場合はインデックスが適切でないケースがある。ロジック見直しでなんとかなるのであれば良いが、サーバーに格納されているデータファイル全体的に天文学的に遅い数値（特に下図のようなパターン）が出ている場合はもはやインデックス云々というよりハード的な問題とほぼ断定できる。

![截屏2019-11-1314.58.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518389/5d5d924a-3beb-b318-a4b7-e6801fc3ca8c.png)
Laravelを複数ドメインで使ってみた

~~サービス中にURLが長くなってしまう部分があって、これを短縮URLで解決しよう...という~~とある事情で`hogehoge.com`で稼働していLaravelシステムに`fuga.jp`でアクセスする必要が出たので、そのときの技術メモ

**環境**

- Laravel 5.8
- PHP 7.2
- MacOSローカル

## 実装
ドメインを識別するミドルウェアをたてて、それをRouteGroupに読み込ませるイメージ。

> **【補足】**
> 最初、[この辺](https://stackoverflow.com/questions/18603330/can-i-group-multiple-domains-in-a-routing-group-in-laravel)とか見て`Route::domain()`で実装していたんですが、`route()`と`url()`で返ってくるURLが揃わず挙動がおかしかったので断念。


### １．`config/app.php`でドメイン名を定義

```php
...
'test_domain' => env('TEST_DOMAIN', 'hogehoge.local'),
'short_test_domain' => env('SHORT_TEST_DOMAIN', 'fuga.local'),
'production_domain' => env('PROD_DOMAIN', 'hogehoge.com'),
'short_domain' => env('SHORT_DOMAIN', 'fuga.jp'),
...
```

### ２．２つのMiddlewareを用意

これは`hogehoge.com`用

```app/Http/Middleware/OnlyMainDomain.php
<?php

namespace App\Http\Middleware;

use Closure;

class OnlyMainDomain
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        if (
            config('app.short_test_domain') === request()->getHost() ||
            config('app.short_domain') === request()->getHost()
        ) {
            return \abort(403);
        }

        return $next($request);
    }
}

```

これは`fuga.jp`用

```app/Http/Middleware/OnlyShortDomain.php
<?php

namespace App\Http\Middleware;

use Closure;

class OnlyShortDomain
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        if (
            config('app.test_domain') === request()->getHost() ||
            config('app.production_domain') === request()->getHost()
        ) {
            return \abort(403);
        }

        return $next($request);
    }
}

```

Middlewareを登録します。

```app/Http/Kernel.php
    /**
     * The application's route middleware.
     *
     * These middleware may be assigned to groups or used individually.
     *
     * @var array
     */
    protected $routeMiddleware = [
        ...
        'domain.short' => \App\Http\Middleware\OnlyShortDomain::class,
        'domain.main' => \App\Http\Middleware\OnlyMainDomain::class,
        ...
    ];
```

### ３．ルーティングでMiddlewareを実装

```routes/web.php
Route::group(['middleware' => ['domain.main']], function () {
    Route::get('/', function () {
        return view('index');
    });
});

Route::group(['middleware' => ['domain.short'], 'namespace' => 'Short'], function () {
    Route::get('/s/{key}', 'MainController@index');
});
```

## どうなるか
これで、互いの領分を超えたルートへアクセスすると403を返すようになりました。

## 欠点
- 2つのドメインで同じルートを利用できない  
  `hogehoge.com/aaa/bbb`には`MainController@hoge`、`fuga.jp/aaa/bbb`には`MainController@fuga`みたいなのはできない。

## まとめ
こんな行き当たりばったりの構築はやめて、ちゃんと設計したい。
TelloにUDPでデータ送信に便利

UDPなど通信を送信テストに便利
TCP,SSLもOK

今回はTelloEDUのWifiアクセス化を設定するのに利用
NodeREDなどでもできるようでしたがコマンド単品の送信ならこれが楽でした

###Packet Sender

https://packetsender.com/download

![無題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/ba9a9ac3-f34b-a153-225f-5f0a7a9f0d62.png)


Telloに送信するデータの場合このような感じの入力

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/9c90d7fb-a5da-97a6-1783-74f1710370c6.png)


```
command
192.168.10.1
8889
UDP


ap SSID PASS
192.168.10.1
8889
UDP
```
[ansible-playbook]task単位ではなく、play単位に環境変数を設定する

考えたらわかる事だったのですが、ちょっと迷ってしまったのでメモ。

普通にtask単位での環境変数は environmentで可能です

```roles/create-hoge-jobs/tasks/main.yml
- name: get hoge list
  shell: hoge list
  register: hoge_list
  environment: 
    HOGE_URL: "hogehoge.com"
    HOGE_USER: "hoge"
    HOGE_PASSWORD: "password"
```

これで hoge のコマンド実行時に設定した環境変数が渡されます。

追加でまたhogeコマンドのtaskを追加したいとします。fugaユーザがいなかったら追加するタスクです。
そこにも環境変数が欲しい場合、毎回書くとこんな感じになって、コマンド増えるたびに追記が必要でちょっとしんどいですね。

```roles/create-hoge-jobs/tasks/main.yml
- name: get hoge list
  shell: hoge list
  register: hoge_list
  environment: 
    HOGE_URL: "hogehoge.com"
    HOGE_USER: "hoge"
    HOGE_PASSWORD: "password"

- name: create fuga user
  shell: hoge create fuga
  when: "hoge_list.stdout_lines | intersect('fuga') | length == 0"
  environment: 
    HOGE_URL: "hogehoge.com"
    HOGE_USER: "hoge"
    HOGE_PASSWORD: "password"
```

このような、hoge コマンドで共通に使うような環境変数を逃すやり方として、有名なのが `.bashrc` `.bash_profire` に記述してあげる方法です。
echoで書いてあげれば可能なのですが、実行シェルの関係だったり読み込みタイミングだったり色々と面倒です。
https://qiita.com/FGtatsuro/items/2366c93131c47aef8dfe

あくまで、このplaybookを実行中だけ共通の環境変数を持ちたいならplayに書いてあげるのが楽だと思います。

```create_hoge_jobs.yml
- hosts: hoge_ip
  environment:
    HOGE_URL: "hogehoge.com"
    HOGE_USER: "hoge"
    HOGE_PASSWORD: "password"
  serial: 1
  become: yes
  become_user: root
  roles:
    - create-hoge-jobs
```

これでtasksの記述が簡略化できます。taskには、あくまでそのタスクにだけ使うような物のみ記述してあげるのが良さそうです。

```roles/create-hoge-jobs/tasks/main.yml
- name: get hoge list
  shell: hoge list
  register: hoge_list

- name: create fuga user
  shell: hoge create fuga
  when: "hoge_list.stdout_lines | intersect('fuga') | length == 0"
```

実行確認

```shell
$ hoge list | jq .
{
  "stdout_lines": [
    "hoge", 
    "piyo"
  ]
}

$ ansible-playbook -i 127.0.0.1, create_hoge_jobs.yml 

PLAY [create_hoge_jobs] ***************************************************************************************************************************************************************

TASK [get hoge list] ****************************************************************************************************************************************************************
changed: [127.0.0.1]

TASK [create fuga user] ****************************************************************************************************************************************************************
ok: [127.0.0.1]

PLAY RECAP ****************************************************************************************************************************************************************************
127.0.0.1               : ok=1    changed=1    unreachable=0    failed=0

$ hoge list | jq .
{
  "stdout_lines": [
    "hoge", 
    "piyo", 
    "fuga"
  ]
}
```

hoge追加のtaskも通ってますね。両方通っているので、環境変数がうまく渡っています。
new Vue(App) と new Vue({ render: h => h(App) }) の違い

結論を先に書きますと、

- `new Vue(App)` は、ルートのVueインスタンスになる。
- `new Vue({ render: h => h(App) })` では、`{ render: h => h(App) }` を元にルートのVueインスタンスが作られ、Appを元にその子が作られる。
- Vueアプリケーションのオプション（上のAppが指しているObject）には、コンポーネントかどうかという違いはない。親アプリケーションにもコンポーネントにもなれる。

## 実験

コンポーネントChildと親アプリケーションのParentを作ります。Vueが内部的に使っている`_uid`を表示します。

```vue:child.vue
<template>
  <div>
    <p>Child, {{message}}<br>this: {{_uid}}, $parent: {{$parent && $parent._uid}}, $root: {{$root._uid}}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String, default: 'default'
    }
  }
}
</script>
```

```vue:parent.vue
<template>
  <div>
    <p>Parent<br>this: {{_uid}}, $parent: {{$parent && $parent._uid}}, $root: {{$root._uid}}</p>
    <child message="hello, world"></child>
  </div>
</template>

<script>
import Child from './child';

export default {
  components: { 'child': Child }
}
</script>
```

ふつうに親アプリケーションを作った場合。

```javascript:application.js
import Parent from '../parent';

document.addEventListener('DOMContentLoaded', () => {
  new Vue(Parent).$mount('#app');
});
```

Parentがルートになり、Childが子になります。

```text:結果
Parent
this: 0, $parent: , $root: 0

Child, hello, world
this: 1, $parent: 0, $root: 0
```

Childを親アプリケーションにした場合。

```javascript:application.js
import Child from '../child';

document.addEventListener('DOMContentLoaded', () => {
  new Vue(Child).$mount('#app');
});
```

Childがルートになります。

```text:結果
Child, default
this: 0, $parent: , $root: 0
```

`new Vue({ render: h => h(Child) })` として、さらにpropsを指定した場合。

```javascript:application.js
import Child from '../child';

document.addEventListener('DOMContentLoaded', () => {
  new Vue({
    render: h => h(Child, { props: { message: 'hello, world' } })
  }).$mount('#app');
});
```

_uidが0のVueインスタンスが作られ、Childがその子供になります。propsに指定したデータが渡ります。

```text:結果
Child, hello, world
this: 1, $parent: 0, $root: 0
```

感想：[Vue.jsのガイド](https://vuejs.org/v2/guide/)ってVue.jsの基本的な作りが分かりにくいよね。
Git-flow（ギットフロー）について

# Git-flow（ギットフロー）について

今後開発を行っていく上で、主に扱っていくことになる
Git-flow について以下にまとめております。

## Git-flow とは

**「安全なブランチモデル」** として
Vincent Driessen 氏によって考案されたブランチモデル（ブランチ戦略）のこと。

具体的なイメージとしては、以下の図になります。
![about_gitflow_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/9419163e-d7d5-15a9-604d-ecc20296ded3.png)

## ブランチ

まずは図にあった各ブランチの役割を紹介します。

### master

**「本番環境」** のこと。

基本的にタグをつけることにより、バージョンの管理も行っていく。

<font color="red">**※権限で管理者以外がマージおよびコミットを行えないようにしておくことが通例である。**</font>

### develop

**「開発環境」** のこと。

主に、
**master** からブランチを切り、
**feature** で完成させた機能をマージしていくブランチ。

### feature

**「機能開発環境」** のこと。

主に、
**develop** からブランチを切り、機能を開発していくブランチ。

機能ごとにブランチを切るため、膨大なブランチが存在することになる。
そのため、**機能が明示的にわかるブランチ名** でブランチを切っていく。

また、ブランチを切る際に、**「/」（スラッシュ）** を使用することで
ブランチに階層構造を持たせることができる。

```txt:例1
aaa/bbb     aaaの中にbbbを作成
aaa/ccc     aaaの中にcccを作成
```

例 1 の場合、以下の図のような階層構造になる。
![about_gitflow_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/70d03243-9ad9-ba29-7e3d-37386b2ac2c1.png)

```txt:例2
aaa/bbb/ccc     aaaの中のbbbの中にbbbを作成
aaa/bbb         ERROR
```

例 2 の場合、以下の図のような構造になり、
**同名となってしまうため作成できない。**
![about_gitflow_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/fbd375ba-626e-b413-a592-297eb258e0b0.png)

<font color="red">※aaa/bbb/ccc の bbb は**ディレクトリ**、aaa/bbb の bbb は**ファイル**を表す。</font>

### release

**「リリース調整環境」** のこと。

主に、
**develop** からブランチを切り、調整を行うためのブランチ。

リリースするとしても、機能の開発が進むため
**どこまでの機能を搭載するのか** をブランチを切ることでハッキリさせてから調整を行う。

### hotfixes

**「緊急性の高いバグフィックス環境」** のこと。

主に、
**「master」** からブランチを切り、
現在発生しているバグフィックスを行うブランチ。

このブランチが動くということは、とても危険な状況のため、
動かすことがないように気を付けたい。

<font color="red">※develop も master からのブランチなので、同様のバグが発生していると予想される。
そのため、**master と develop の両方に**マージが必要なので注意する。</font>

## コミット時のルール

コミットする際に、内容がわかりやすいように以下のルールに則ってコメントを残していく。

### prefix（プレフィックス）

接頭辞のことで、頭につける言葉のこと。

```txt
feat:       仕様や機能の追加、修正
fix:        バグ、不具合修正
refactor:   コードの機能を変更しないリファクタリング、パフォーマンス改善修正
style:      コードの意味に影響を与えない変更(コメント追加、修正やコードのフォーマットなど)
test:       テストコードの追加や変更
docs:       コードを変更しない、文書のみの修正
```

### コメントの内容

主に、
一行目にプレフィックス付きのタイトルを、
二行目は改行のみ、
三行目に変更の内容を具体的に記載する。

```
feat:ユーザのログイン機能追加

ユーザのログイン機能、ユーザ認証の機能を追加しました。
```

## マージ

ブランチを切ったブランチでマージを行う。
例：develop で feature をマージする。

マージのコミットを残します。
![about_gitflow_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/898d2ba7-319c-b5bd-dbb1-3e698fc64745.png)
![about_gitflow_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/c1d38fb4-4dd9-2cdb-ca60-61ec8e4c4752.png)

### fast-forward マージ

マージする際に、ブランチが切られた時点から
<font color="red">**以降のコミットがない状態**</font>であれば、fast-forward マージが行われる。
この場合、コミットは行われない。
![about_gitflow_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/db6bc700-9f30-9ed0-c7d9-394ad6dd80e9.png)
![about_gitflow_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/525820/466a26f6-f2e9-b7e2-0c37-e241a6794f2c.png)

### feature ブランチのマージ

feature ブランチは、膨大になってしまうため、
マージを行い、<font color="red">**リモートに反映させた上で**</font>ブランチを削除する。
これにより、feature ブランチが乱雑になるのを防ぎます。

そのため、ブランチが master と develop だけになるということもあります。

以上です。
cloud-initに日本語が含まれるとインスタンスが正常に起動しない

# 概要

AWSが提供するECSのAMIバージョン`ami-06c98c6fe6f20c437` (2.0.20191031 x86_64 ECS HVM GP2)、`ami-0064e711cbc7a825e` (2.0.20191024.3 x86_64 HVM gp2) において、cloud-initスクリプト内に日本語が含まれるとインスタンスが正常に起動しない不具合が見つかってます。
再現の検証は行ってませんが、最新の`Amazon Linux 2 AMI`イメージでも同様の現象が発生するとAWSより回答が得られました。

# 現象

AWSのリソースはTerraformで管理しており、スケールアウト時は常に最新のイメージを取得する仕組みを作ってました。

```

data "aws_ami" "this" {
  most_recent = true

  filter {
    name   = "architecture"
    values = ["x86_64"]
  }

  filter {
    name   = "name"
    values = ["amzn2-ami-ecs-hvm-*"]
  }

  owners = ["amazon"]
}
```

先日スケールアウトを実施したところ、AMIが`ami-06c98c6fe6f20c437` (2.0.20191031 x86_64 ECS HVM GP2) に更新されていたのですが、このバージョンを利用するとコンテナインスタンスにSSHで接続できない、ECSクラスタに正しくマッピングされず、defaultクラスタが作成されるといった障害が起きました。

原因を調べたところ、userdata経由でcloud-initを実行していたのですが、スクリプト内に日本語が含まれると正しくインスタンスが起動しない問題と判明。
システムログでも対象AMIでエンコーディングに関するエラーが出ていました。

```
UnicodeEncodeError: 'ascii' codec can't encode characters in position 429-431: ordinal not in range(128)
```

問題のcloud-init。

```cloud-init.cfg
#cloud-config
repo_update: true
...
# 日本語のコメントがあるとインスタンスが正常に起動しない
```

ちなみにシステムログはマネージメントコンソールだとEC2の`Instance Settings`から確認することができます。

![Screen Shot 2019-11-13 at 13.49.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27454/66bc5815-b7a0-e788-16d0-ff81cae2a3c0.png)

サポートに問い合わせたところ、`Amazon ECS-optimized AMI`、`Amazon Linux 2 AMI`のいずれも同様の現象が再現され、cloud-initの挙動に関する不具合と回答を得られました。
AMIが改修されるまでの間は、一時的な回避策として日本語のコメントを外すか、不具合の起きない`ami-057631c6a4834e06d`(2.0.20191014 x86_64 ECS HVM GP2)を利用するのが良さそうです。