OmniAICreator/Qiita-1.07M huggingface dataset:
51歳からのプログラミング　備忘　吹き出し的なもの

吹き出し的なもの（以下、吹き出しという）を作ってみた。

入力欄を空欄で入力した時に、
吹き出しで「未入力です」ってアナウンスが
フェードインして入る、って感じで。

・　吹き出しを、cssで用意
・　吹き出しのcssは、\<input　の後の　\<span　に設定
・　吹き出しのcssは、最初は非表示にしとく(display:none)
・　吹き出したいときに、表示する（ここでは、submit時）

そんな感じで作れそうだったので作った。
<br>

表示位置の設定と、フェードインアウト,
入力時には非表示状態、をコードしてるので、
ちょっと長いのが残念。
<br>

完成コードはこれ
でも、吹き出しをフェードアウトさせるところが気に入らない。いつか直そう。

```html
//------- jquery ----------
<script>
  $(function(){
    var position,width;
    var $form=$('form');
    var $inp =$('input[name="inp"]');
    var $sp  =$('span[name="sp"]');

    $form.submit(function(){
      if(!$inp.val()){
        position=$inp.offset();
        width   =$inp.width();
        $sp.text('未入力です');
        $sp.css('display','inline');
        $sp.offset({top :(position.top-1),
                    left:(position.left+width+10),
                  });
        $sp.hide().fadeIn(100);
        return false;
      }
    });

    $inp.on('keypress',function(){
      $sp.fadeOut(100);
    });
  });
</script>
//----------------------------


//---------- css -------------
<style>
  .tip    {display:none;
           color:white;
           background:blue;
           border-radius:5px;
           }
</style>
//----------------------------


//--------- html -------------
<form action="test" method="post">
  {{csrf_field()}}　// これはlaravel仕様です
  <input name="inp">
　<span name="sp" class="tip"></span>
</form>
```

コードを打つだけで楽しい。
心が躍るような楽しさ。
こんな楽しいことがあったんだ。
Swiftのプロトコルってなに？

# この記事は何？
Swiftプログラミングにおけるプロトコルについて基本の部分を調べました。

> Swiftを基礎から学ぶには
自著、工学社より発売中の「[まるごと分かるSwiftプログラミング](https://amzn.asia/d/7YPWJwl)」をお勧めします。変数、関数、フロー制御構文、データ構造はもちろん、構造体からクロージャ、エクステンション、プロトコル、クロージャまでを基礎からわかりやすく解説しています。

### 実行環境
Xcode10.2.1
Swift5.x

# プロトコル？
### ゴースト・プロトコル
スパイ映画 _Mission: Impossible_ シリーズにはこんなセリフが必ずある。
「例によって君もしくは君のメンバーが捕らえられ、或いは殺されても当局は一切関知しないから、そのつもりで。」
要は「任務を実行した結果、失敗しても知らんぷりするよ」ってこと。
もっと言うと...
「何かあっても知らんぷりするから、そのつもりで実行してね」ってこと。
スパイ活動って大変ですね。
この「知らんぷりする約束」を映画の中で「ゴースト・プロトコル」と呼んでいる。
バレても知らんぷりできるから、スパイ任務ができるんですね。

### Swiftプログラミングでのプロトコル
「あるデータ型オブジェクトが何かを実行するときのルール」と言える。
逆に言うと...
「ルールに従っているから、それできるよ」となる。
あるデータ型がプロトコルに準拠していれば、何かが出来ることが保証されるんですね。

# CustomStringConvertibleプロトコルに準拠する
こんな構造体があったとして

````swift:カスタムのFruit型
struct Fruit {
    var emoji: String
    var name:  String
}
````

`apple` と `banana` オブジェクトを生成して...
コンソール出力する。

````swift:インスタンス化
let apple = Fruit(emoji: "🍎", name: "Apple")
let banana = Fruit(emoji: "🍌", name: "Banana")

print(apple)
print(banana)
````

何が出力されるか。
`🍎`かな？`Apple` かな？
`🍌`かな？`Banana` かな？

````swift:コンソール出力結果
Fruit(emoji: "🍎", name: "Apple")
Fruit(emoji: "🍌", name: "Banana")
````
思ってたのと、違う。
テキトー感がスゴい。（イニシャライザのまんま）

## 出力するルール
`print()`関数を実行したら...
「`description` プロパティを出力する」というルールがある。
これが __CustomStringConvertible__ プロトコル。

## プロトコルに準拠させる
`print()` 関数でイイ感じに出力させるように、`Fruit` 型を `CustomStringConvertible` に準拠させると...

````swift:print()関数でemojiを出力させる
struct Fruit: CustomStringConvertible {
    var emoji: String
    var name:  String
    
    var description: String {
        return "\(self.name) \(self.emoji)"
    }
}
````

`description` は計算プロパティを使って、値を返しています。
コンソール出力すると...

````swift:CustomStringConvertibleなFruit型の出力結果
Apple 🍎
Banana 🍌
````

# いろんなプロトコル
Swiftには標準で、いくつものプロトコルが用意されています。

- `Equatable`
- `Comparable`
- `Codable`
- ...

その型が何かしらプロトコルに準拠していることで動作が保証できるので、プログラムが安全になるという仕組みなんですね。
【GCP】 Dokku をインストールしようとしたら NO_PUBKEY というエラーが出た

// この記事は、 [note](https://note.mu/in_colors_net/n/nd2864d3a5f62) に投稿した記事の再掲です。

「 [Nuxt.jsをDokkuを使ってEC2やGCEへ気軽にデプロイする](https://qiita.com/sho_yamane/items/94d399ae4a461ed68456) 」を参考に
私も GCE で Nuxt.js の SSR をしたくなったので、つまづいたところをメモします。

# GCP ( GCE ) に Dokku をインストールする
まずは `$ ssh` で GCE に接続します

## gcloud を利用する場合

インスタンスの一覧から「**接続＞ gcloud コマンドを表示**」を選択し
表示されるコマンドをシェルにペーストして接続するパターン 



# コンソールページに登録した SSH 公開鍵で接続する場合

シェルで `$ ssh` コマンドを実行するパターン

```bash
$ ssh -i ~/.ssh/id_rsa <user_name>@<外部 IP アドレス>
```

` ~/.ssh/id_rsa.pub `
=> キーペアの秘密鍵を指定します。

` user_name `
=> SSH 公開鍵を コンソールページに登録すると、
「 SSH 認証鍵」の表の左側に表示されます

` 外部 IP アドレス `
=> コンソールページにある「外部 IP 」という数字の羅列を選択します。

# GCE に Dokku をインストールする

[手順通りに](https://qiita.com/sho_yamane/items/94d399ae4a461ed68456#ssh%E3%81%A7%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%97%E3%81%A6dokku%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB) やってみます。

```bash
$ wget https://raw.githubusercontent.com/dokku/dokku/v0.12.4/bootstrap.sh
$ sudo DOKKU_TAG=v0.12.4 bash bootstrap.sh
```

すると下記のエラーが出ました。
公開鍵が登録されていないとかでインストールできない模様。
困る

```bash
W: An error occurred during the signature verification. The repository is not updated and the previous index files will be used. GPG error: https://packagecloud.io/dokku/dokku/ubuntu bionic InRelease: The following signatures couldn't be verified because the public key is not available: NO_PUBKEY xxxxxxxxxxxxxx
W: Failed to fetch https://packagecloud.io/dokku/dokku/ubuntu/dists/bionic/InRelease  The following signatures couldn't be verified because the public key is not available: NO_PUBKEY xxxxxxxxxxxxxx
W: Some index files failed to download. They have been ignored, or old ones used instead.
E: Version '0.14.1' for 'dokku' was not found
```

## キーをダウンロードして登録

下記コマンドをサーバー上で実行する。
Dokku の GPG Key を ` $ wget ` でとってきて、 ` $ apt-key add ` で登録します。

```bash
$ wget -qO - https://packagecloud.io/dokku/dokku/gpgkey | sudo apt-key add -
```

# キーを登録後、Dokku をインストール (再)

```bash
$ sudo DOKKU_TAG=v0.12.4 bash bootstrap.sh
```

これでできた

# 参考
Can not install latest dokku #3397
https://github.com/dokku/dokku/issues/3397

👇 ` dirmngr ` もインストールしてみたけど、必要だったかはわからない…
👇 ( ` $ wget ` してるしたぶん必要なさそう…？ )

gpg: keyserver receive failed: No dirmngr
[https://unix.stackexchange.com/questions...](https://unix.stackexchange.com/questions/401547/gpg-keyserver-receive-failed-no-dirmngr)


# 余談
あとから Dokku に 独自ドメインや SSL を設定するのはどういしたらいいかな〜って調べてたやつの URL のリストです。(今度やる)

Domain Configuration - Dokku
http://dokku.viewdocs.io/dokku/configuration/domains/

Google Cloud Platform (GCP) で独自ドメインを設定する
https://qiita.com/tomy0610/items/adc839be9d100c0daf96
bundle installで /vender/bundle にgemインストールされるのを解除する

# 問題
bundle installすると、/vender/bundle にgemインストールされてしまう。
デフォルトの場所にインストールされるように戻したい。

# 原因
bundle installをいつの間にかパス指定して実行してしまっていた。

```ruby:ターミナル
$ bundle install --path vendor/bundle
```
一度パス指定して実行すると、以降はパス指定しなくても、
そのパスがデフォルトのインストール先になってしまう？

# パス変更方法
ホームディレクトリの
**/.bundle/config** のファイルにパスが書いてあるので、
それを変更 or 削除する。
削除すると何もパス指定されてない状態に戻る。

```ruby:/.bundle/config
BUNDLE_PATH: "vendor/bundle"
```
.bundle は隠しファイルなので、
**shift + command + .(ドット)**
のコマンドで隠しファイルの表示/非表示を切り替えられる。

# 参考
以下の状況で問題が発生：
最初はデフォルト状態でbundle installしていたプロジェクトで、
途中からbundle installするといつの間にか/vender/bundleにインストールされるようになってしまっていた。
GithubDesktopでコミットしようとすると以下エラーが出てコミットできない状態になった。
パス指定を削除することにより解決。
最初からパス指定してプロジェクトを立ち上げている場合は問題ないと思われる。

```ruby:GithubDesktop
commit failed - exit code 1 received github
```
[Windows 10] Git BashでGitHubにSSH接続

何度も引っかかったのでメモ。
# 前提
  - GitHub登録済み
  - Gitインストール済み
  - Git Bash使用（多分コマンドプロンプトとかでもできる）

# 秘密鍵・公開鍵生成
Git Bashを使います。現在地は`~`(`/c/Users/[Username]`)です。以下のコマンドで鍵を生成します。

```shell
ssh-keygen -t rsa -b 4096 -f ~/.ssh/[filename]
```

`[filename]`には`rsa_github`など好きな名前を付けましょう。これで、RSA方式の4096bit長の鍵が生成されました。

# 公開鍵をGitHubに登録する
1. ブラウザを開き、GitHubの`Settings->SSH and GPG keys`に行きます。
2. SSH keysの`New SSH key`をクリックします。
3. `Title`に適当な名前を付けます。 
4. 下の`Key`に公開鍵を貼り付けるのですが、ここでGit Bashの方に戻ります。

Git Bashで`.ssh`フォルダに移動します。

```shell
cd .ssh
```
そこで`ls`すると、`[filename]`と`[filename].pub`の二つのファイルがあると思います。`.pub`有りが公開鍵、`.pub`無しが秘密鍵です。公開鍵の内容をコピーします。`cat`で表示してコピーでもいいですが、以下のコマンドが便利です。

```shell
clip < ~/.ssh/[filename].pub
```
これでクリップボードに公開鍵がコピーされました。そして、ブラウザに戻りましょう。4.で説明した`Key`に公開鍵をペーストします。ペーストしたら、`Add SSH key`で保存します。これで、GitHubでの操作は終わりです。

# SSH接続の設定をする
Git Bashで`.ssh`直下に`config`ファイルを作ります。

```shell
touch config
```
あとはvimなりatomなり好きなもので`config`を編集します。自分はatom使いたいので、

```shell
atom config
```
で、atomで開きます。
vimの場合は，

```shell
vi config
```
編集アプリで以下のように書き込みます。

```config:config
Host github
    HostName github.com
    IdentityFile ~/.ssh/[filename]
    User git
```
左の空白は`tab`です。
さらに、windowsでは`ssh-agent`に`add`する必要があります。`ssh-agent`を起動します。

```shell
ssh-agent bash
```
`ssh-agent`に先ほど生成した秘密鍵を登録します。

```shell
ssh-add ~/.ssh/[filemname]
```
登録できたか確認します。

```shell
ssh-add -l
```
鍵の情報が表示されていればOKです。

# 接続の確認
それでは、接続できるか確認してみましょう。

```shell
ssh -T git@github.com
```
これで、以下のように表示されていれば成功です。

```shell-session
Hi [Username]! You've successfully authenticated, but GitHub does not provide shell access.
```

GitLabでもやることは大体一緒です。`~/.ssh/`のところは，鍵を作りたい好きな場所でよいです。僕はGit Bash起動してすぐの場所がいいので，ここに作りました。
EX407取得したぞい

Ansible Night参加したときにちらっと認定資格の話を聞いて[Red Hat エキスパート試験-Ansible Automation-(EX407)](https://www.redhat.com/ja/services/training/ex407-red-hat-certificate-expertise-ansible-automation)の存在を知ったので、折角だから受けてきました。


# 受験まで

[Red Hatのホームページ](https://www.redhat.com/ja/services/training/ex407-red-hat-certificate-expertise-ansible-automation)から直接申し込みできますが自分は[日本サード・パーティ株式会社](https://edu.jtp.co.jp/opencourse)さん経由で申し込みしました。
今回の受験会場はこちらの会社だったので、後から思えばこの申し込み経路でよかったなと。


# 試験準備

とにかくいろんなトラブルが多発したせいでやってる暇がなかったので、ある意味素のAnsible力を試してきました。
今の仕事ではほとんど使っていないに等しいので経験ベースですが、

* 複数のroleを組み合わせて役割の異なるサーバをAnsibleで管理したことがある
* moduleを自作したことがある
* Directory LayoutによるVariable Precedenceはなんとなく理解している
* Ansible Towerを運用したことはない

という感じの習熟度です。


# 試験の感想

1週間程度とありましたが、当日中に結果がメールできてました。「Your score: 300」とあったので満点のはず。

* 4時間のハンズオン形式
  * 試験で作成したPlaybookなどを実行して管理対象のVMが所定の状態になっているかを確認する形式
  * 管理対象のVMはGUIで起動/停止/初期化ができる（めっちゃ便利だけど、最後に１回初期化した程度）
  * VMの初期化は5分もかからなかった気がするので気軽にTDDできそうだった
* 試験端末は**USキーボード**なので普段日本語キーボード使ってる人は注意
  * ~~ごめんなさい、Enter大きくないとダメな子でごめんなさい~~
  * タイプミスとか記号を探すとか、ホントどうでもいいところで時間かかってました
  * 日本語入力への切り替え方がわからなくて課題に対するFeedbackを英語で書いたり
* Ansibleの機能を一通り使っている必要はありそう
  * 人によっては使わない機能が課題になっている場合があるので、試験の学習ポイントは見ておくべき
  * moduleはcoreだけ使ったことがあれば十分な印象（ansible-docコマンドは使えるので最悪その場で調べられるけど）
  * そういえば`ansible-inventory`がなかった（使えなかった）のがちょっと解せぬ
* Playbookは要件さえ満たせばよかろうの精神
  * 少なくとも「パッケージインストール、config設定、サービス起動」くらいはソラで書けないとお話にならない
  * moduleの指定がある課題もあるので、採点時はPlaybookの内容も見ているかもしれない
  * 冪等性が維持できない（2回目の実行でchanged=0にできない)ような課題もあるし、課題で指示されているところでWARNINGが出るのも気にしてはいけない


# 今後について

これでやっと「Ansible使えます」と言えるようになりました。
ある意味趣味枠なので他のRed Hat系の資格を取るかはこれから考えます。
【GCP】 Mac に gcloud をインストールする

// この記事は、 [note](https://note.mu/in_colors_net/n/n98ef81d6eb46) に投稿した記事の再掲です。

パスが通らなくて困ったのでメモをします。

# ダウンロードとインストールを実行

インストールを実行すると色々聞かれるので、全部 `y` を選択して `Enter` していきます。

```bash
$ curl https://sdk.cloud.google.com | bash
```


# .bash_profile がなんとか言ってるので、これも Enter する

```bash
Enter a path to an rc file to update, or leave blank to use
［/Users/xxxxxxxxx/.bash_profile］:
```

# シェルを再起動する

再起動します

```bash
$ exec -l $SHELL
```

# コマンドの場所を確認する

ふつうならこれでインストールできている（コマンドが見つかる）らしい。
しかし私の環境だと見つからなかったので、パスを通します。

```bash
$ which gcloud
```

# パスを通す

~/.bash_profile に google-cloud-sdk/path.bash.inc までのパスを追加

```bash
$ source /path/to/directory/google-cloud-sdk/path.bash.inc
```

# コマンドの場所を確認する（再）

```bash
$ which gcloud
```

パスを通したら `gcloud` がおりました

```bash
$ which gcloud
/Users/xxxxxxx/google-cloud-sdk/bin/gcloud
```

# 参考
公式ドキュメント
[Cloud SDK のインストール - 対話型インストーラ](https://cloud.google.com/sdk/downloads?hl=JA#interactive)

stack overflow
[-bash: gcloud: command not found on Mac](https://stackoverflow.com/questions/46144267/bash-gcloud-command-not-found-on-mac)
Kibanaの「Data Table」に同一フィールドの集計結果を異なる条件ごとに横一列に並べたい。

# 目的
Kibanaの「Data Table」に同一フィールドの集計結果を異なる条件ごとに横一列に並べたい。

具体的には以下のように、商品ごとに購入回数を表示するテーブルを作りたい


![C7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83335/69f60f05-52db-6c91-7e18-57f2763063ac.png)




# ログの構造
## ユーザーの商品購入を考える
ユーザーがとあるお店で、商品を購入したと想定
東スーパー、西コンビニ、南商店、北デパートと4つのお店が存在し、以下の商品を購入

| 商品名       |       単価 |
|:-----------------|:------------------|
|キノコの山| 120円|
|コアラのマーチ | 92円|
|杉のこ村| 111円|
|たけのこの里|140円|
|ハーゲンダッツ|1000円|

Kibanaでこの商品名ごとに購入回数を表示したい。

ログはjson形式で登録されており以下のような構造になっている。

### ユーザーがお店に行ったら作られるログ

```json
{"user_id": 52, "kind_name": "アクセス", "place": "北デパート", "@timestamp": "2019-06-13T19:55:23+09:00:00"}
```

### ユーザーが購入したら作られるログ

```json
{"user_id": 43, "kind_name": "購入", "price": 140, "place": "南商店", "total_price": 280, "total_price_with_tax": 302.4, "product": "たけのこの里", "p_value": 2, "@timestamp": "2019-06-29T05:42:17+09:00:00"}
```

今回は2019/6/1~2019/6/3までの**"kind_name": "購入"**ログの数を**product**ごとに表示させたい。

# KibanaのData Tableで商品別に購入回数を表示手順

## 集計値を1日ごとにまとめる



![C2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83335/e3b0714d-a6a3-e151-0a0a-5301ebd6d7c4.png)

Bucketsを編集し、Aggregationに*Date Histogram*を選択、
Fieldに*@timestamp*を選択、Intervalに*Daily*選択。


![C3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83335/50931508-a720-3f43-1ae4-ec2d9421ff13.png)



## 購入数を商品ごとに表示させる

### たけのこの里の購入回数を表示

![C4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83335/c1938cc7-bb5a-c54c-b052-01f8937ee169.png)

Metricsに新規Metricを追加。Filtersで絞込条件を指定したいので、Aggregationは
 *Average Bucket*、*Max Bucket*、*Min Bucket*、*Sum Bucket*の中から適当に選択  [^bucket]


![C5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83335/73f6b880-4ea1-d1f4-8cfe-193d485cc7a7.png)

ログの数が1日ごとにカウントされている。

*Date Histogram*で時系列データをグループ化する。
*Daily*で、1日単位でグループ化する。*Hourly*や*Minute*を選択すれば、1時間単位や、1分単位でグループ化できる。

BucketのSub AggregationでFilters選択し、Filter1に選択条件を入れる
たけのこの里の購入数回数を表示させたいので、**product.keyword:たけのこの里**といれて条件を絞る
MetricのAggregationは*Count*を選択
![C6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83335/0f43c7a8-d426-0ea1-fdc2-5951ba1def21.png)

ほかの商品も同じように設定をすれば、商品ごとの購入回数を**Kibana**のData Tableで表示できる

# おわりに
**Add a filter**　でログ全体を絞る方法は知っていたが、項目ごとに絞る方法がよくわからなかったので、今回画像付きで手順を書いてみた。


[^bucket]: *Average Bucket*、*Max Bucket*、*Min Bucket*、*Sum Bucket*は、検索結果を指定した条件に分類し、平均値、最大値、最小値、合計値を取得するが、Filtersで検索条件が1つの場合、結果は１つなので平均値、最大値、最小値、合計値どれをもとめても、同じ値になる。
PHP(Laravel) でエンドポイントをつくって、 Nuxt.js に渡す

// この記事は、 [note](https://note.mu/in_colors_net/n/n6b22ba9c91c3) に投稿した記事の再掲です。

# ディレクトリ構成

Nuxt.js, Laravel 別々にディレクトリを作成し、それぞれ個別のプロジェクトとして扱います

```
- nuxt-project  # Nuxt.js
  - Nuxt のファイルたち

- laravel-project  # Laravel
  - Laravel のファイルたち
```

# Laravel をさわる

はじめに、 Laravel を使ってエンドポイントを作る

## Laravel をインストール

下記のコマンドを実行してインストールができる

```bash
$ cd /your/project/directory
$ composer create-project laravel/laravel <project-name>
```

# パーミッションを変更

インストールしたら、 Laravel の `storage` ディレクトリと `bootstrap/cache` ディレクトリのパーミッションを 777 に変更する

> ディレクトリパーミッション
> Laravelをインストールした後に、多少のパーミッションの設定が必要です。storage 下と bootstrap/cache ディレクトリをWebサーバから書き込み可能にしてください。設定しないとLaravelは正しく実行されません。Homestead仮想マシンを使用する場合は、あらかじめ設定されています。
>
> https://readouble.com/laravel/5.7/ja/installation.html#configuration

# `routes/api.php` にエンドポイントの記述を追加

http://localhost:8000/api でアクセスできるようになる

```php
Route::get('/api', function(){
 $nokura = array(
   [
     'title' => '主役じゃない方の僕ら',
     'story' => 'モブキャラ4人のギャグコメディ'
   ],
   [
     'title' => 'イデアの眷属',
     'story' => 'スーツの人たちがたくさん出てくる'
   ],
 );
 $array = array();
 foreach($nokura as $item) {
     $title = $item['title'];
     $story = $item['story'];
     $arr = array(
       'title' => $title,
       'story' => $story
     );
     array_push($array, $arr);
 }
 return $array;
});
```

# Laravel を起動する

http://localhost:8000/api にエンドポイントができているはず

```bash
$ php artisan serve
```

# 次に、Nuxt.js をさわる

さきほど作った Laravel のエンドポイントから、Nuxt.js を使って情報を取得する

## Nuxt.js をインストール

色々聞かれるので、 `axios` をインストールすると良い

```bash
$ yarn create nuxt-app <my-project>
```

## `axios` を追加

インストール時に追加済なら飛ばします

```bash
$ yarn add -D @nuxtjs/axios
```

## `proxy-module` を追加

```bash
$ yarn add -D @nuxtjs/proxy
```

## `nuxt.config.js` に設定を追加

`/api` でアクセスしたら
開発環境の場合は http://localhost:8000/api
本番環境の場合は https://production-url/api
を表示してね　という設定です

```javascript
module.exports = {
  dev: (process.env.NODE_ENV !== 'production'),
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy',
  ],
  proxy: {
    '/api': (this.dev) ? 'http://localhost:8000' : 'https://production-url'
  },
  axios: {
  },
}
```

## 情報を取得する

Laravel で作成したエンドポイントを `asyncData()` で叩くと
`routes/api.php` に記述した内容が取得できる

```vue:index.vue
<template lang="pug">
div
  pre {{apiPost}}
</template>

<script>
export default {
  async asyncData({ app }) {
    let data = await app.$axios.$get('/api')
    return { apiPost: data }
  },
}
</script>
```

おわり
LaravelでMySQLへのデータ挿入時にエラーが出た場合の対処法

## はじめに

LaravelのSeederでテストデータを入力しようとした際に、次のエラーが発生した。

```sql
SQLSTATE[HY000]: General error: 1364 Field 'カラム名' doesn't have a default value
```

NOT NULLであるフィールドにNULLをInsertした事によりエラーが出たようだ。
今回はこの警告を無効化することで対処する。

## 環境

- Laravel 5.5.45
- MySQL 5.7.26

## 対処法

`config/database.php`の`strict`の値を`false`に設定する。

```database.php
'mysql' => [
    // 略
    // 'strict' => true,
    'strict' => false,
    // 略
],
```

## 原因

`strict`が`true`になっていると、次のように`sql_mode`が設定される。

```sql
mysql> select @@GLOBAL.sql_mode;
 +---------------------------------------------------------------------------------------+
 | @@GLOBAL.sql_mode                                                                     |
 +---------------------------------------------------------------------------------------+
 | STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION |
 +---------------------------------------------------------------------------------------+
 1 row in set (0.00 sec)
```

`sql_mode`に`STRICT_TRANS_TABLES`が設定されていると、無効な値が挿入された場合にエラーを出すようになる。


## 参考

- [【MySQL】Field ‘カラム名’ doesn’t have default value というエラーが出てきたので調べた。ついでにSQLモードについてもまとめてみた。 – sawara.me](https://sawara.me/mysql/1239/)
- [Laravelでgroup byしたら、"~ isn't in GROUP BY (~)"って怒られました - nanisore oishisou](http://arm4.hatenablog.com/entry/2019/01/11/184734)
- [php - Laravel 5.4 field doesn't have a default value - Stack Overflow](https://stackoverflow.com/questions/43186521/laravel-5-4-field-doesnt-have-a-default-value)
Unity Editor拡張　ファイル保存ダイアログメモ

◆下記URLを参照
http://light11.hatenadiary.com/entry/2018/04/19/192748


■拡張子にtxtと書けば、テキスト形式で保存可能

■Assetsのところを未入力にしてもAssetsフォルダ内がデフォルトで表示される。
（Editor拡張の関数だからしょうがないけどここを何とかしたいな、
　Assetsより外に保存したい時は１階層上に上がる操作が必要）
　

```
using UnityEngine;
using UnityEditor;

public class SaveFilePanel : EditorWindow {
    
    private void OnGUI()
    {
        if (GUILayout.Button("保存")) {
            // 保存先のファイルパスを取得する
            var filePath = EditorUtility.SaveFilePanel("題名", "Assets", "保存したいファイル名", "拡張子");
            
            if (!string.IsNullOrEmpty(filePath)) {
                File.WriteAllText(filePath, "12234567890", Encoding.UTF8);
            }
        }
    }
}
```
サーバ起動時にtmuxのセッションでコマンドを実行する方法

# したいこと

tmux(screen系)コマンドを使うことでコマンドを実行しつつ、他の作業を続けることができます。
サーバのメインで実行させたいコマンドをtmuxのセッションで実行しておけば、サーバにsshで入った際に `メインコマンドを止めず` にログ確認などが行えて便利です。

起動コマンドに登録して、サーバを立ち上げればその状態になるようにしたいと思います。


# tmuxで別セッションでコマンドを実行するには

別セションでコマンドを実行するのは、以下の書式です。

```bash:別セッションでコマンド実行

tmux new-session -d '実行したいコマンド'
```

セッションに移動せずにコマンドを実行します。

`tmux a` で、セッションを移動して実行出来ていることを確認しましょう。

なお、`tmux new-session -d 'ls'`のように実行して即終了するコマンドだとセッションが残らないようです。
topコマンドのように動き続けるコマンドで試してください。


# 自動起動へ登録する

 tmuxの動きは判ったので登録します。



```bash:cron登録エディタ
crontab -e
```

cron登録エディタを開き、以下の書式で登録してください。
今回は、起動時に動いてほしいので、 `@reboot` で登録します。

```bash:コマンドを起動時にtmuxセッションで実行するように登録
@reboot (. ~/.profile; tmux new-session -d 'hogeCommand fugaOption')
```

(`'hogeCommand fuga_option'`を任意のコマンドに変更してください）

サーバをrebootすると、tmuxが立ち上がっており、セッションでコマンドも実行されているはずです。

以上です。
スクロール位置取得方法をいい加減忘れないようにメモ

スクロールの位置を取得する方法に毎度混乱していたため、記事としてまとめる。
スクロール位置の取得には3つのメソッドを利用する。

- getBoundingClientRect
- window.innerHeight
- window.pageYOffset

## getBoundingClientRect
getBoundingClientRectはターゲット要素をの位置を
ブラウザの表示領域の左上を(0, 0)として、そこからの相対位置で示される。

```js:js
const target = document.querySelector('el').getBoundingClientRect().top; 
```

上記の場合、要素の上端がブラウザの表示領域の上端にきたときに値が０となる。

## window.innerHeight
window.innerHeightは現在のブラウザの高さを取得する
getBoundingClientRectはブラウザの上端の位置を境界とするため、ブラウザの下端で判断したい場合にこれを利用する


## window.pageYOffset
ブラウザの上端を基準とした縦方向のページのスクロール量を取得する。
getBoundingClientRectで取得した値にこの値を足した値がターゲット要素の絶対位置になる。


## example

```js
//現在のブラウザ表示領域の上端からの相対距離(要素の上部がブラウザの一番上にきたときに0になる)
const relativePositionTop = document.querySelector('el').getBoundingClientRect().top; 


//現在のブラウザ表示領域の下部からの相対距離(要素の下部がブラウザの一番下にきたときに0になる) window.innerHeightはブラウザの画面サイズを取得
const relativePositionBottom = document.querySelector('el').getBoundingClientRect().bottom - window.innerHeight;


//document要素の絶対位置(値は固定) window.pageYOffsetはdocumentの上端からのスクロール量
const absolutePositionTop = document.querySelector('el').getBoundingClientRect().top + window.pageYOffset;
```

![無題のプレゼンテーション.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179423/eb43752d-1c65-c444-41bd-ee72d9efb568.png)
cronがどうやっても動かない時に考えられる原因とその対処法

ちょくちょくcronが動かない場面にぶち当たるので備忘録
※この記事はCentOS6系を想定しています。

## 1. そもそもcronが動いてない
```
service crond status # ステータス確認
service crond start # 起動
```

## 2. run levelが正しくない
```
$ chkconfig --list crond
$ crond           0:off   1:off   2:on    3:on    4:on    5:on    6:off
```
2~5番がONになっていますか？　なっていなかったら

```
$ chkconfig --level 2345 crond on
```
で設定します。

## 3. インストールされたcronの種類がanacronであった
CentOS6系にはデフォルトで`anacron`というcronがインストールされます。
これがどうにも使いづらいので`noanacron`をインストールしましょう。

```
$ yum -y install cronie-noanacron
$ yum remove cronie-anacron
```

## 4.ファイルに実行権限が与えられていない
```
$ ls -l cron.sh
$ -rw-r--r-- 1 dev dev 1  5月 13 15:54 2019 cron.sh

# 権限を付与
$ chmod +x cron.sh
```

## 5.コマンドは絶対パスで指定されているか
```
# 設定されたcron一覧を確認
$ crontab -l 
php test.php
/usr/bin/php /var/www/html/test.php
```

## 6.OSやapacheの時間が日本時間になっていない
以下のコマンドで一発で設定できます。
※開発環境は再起動してください

```
$ cp -f /usr/share/zoneinfo/Japan /etc/localtime
$ sed -ri "s/Etc\/UTC/Asia\/Tokyo/" /etc/sysconfig/clock
```

## 7. cronが日本時間で動いているか確かめる
適当にcronを動かして、ログ`/var/log/cron`を確認します。
ログを見ると実行時間が-9hになっており、日本時間になっていませんでした。

```
$ cp /usr/share/zoneinfo/Asia/Tokyo /etc/localtime
$ service crond restart
$ service rsyslog restart
```
このコマンドでcronの実行時間が直ります。
EC2コンテナクラスターのAuto-Scalingを組んでみた。

#EC2コンテナインスタンスのAutoScalingの構築した。スケールイン時に発生する504へのアプローチ

###問題
EC2でECSクラスターを組んでいましたが、スケールインの時に、EC2コンテナインスタンスにコンテナ(ECSタスク)が稼働しているにも関わらず、EC2が削除されてしますため、504のエラーが発生してしまいます。
###対策案
この問題に対して、ECSコンテナクラスター自身が自身で稼働中のコンテナ数を検出して削除保護を有効/無効に切り替えることで、コンテナが稼働中に削除されることを防ぎます。
###参考リンク
[EC2 Auto-ScalingでECS組んでますか？エラーレート高いですか？救ってあげてもいいですか？](https://developers.cyberagent.co.jp/blog/archives/14664/)
現象も、対策の上記のリンクを同じですので参考にしてください。


[ECS Container Instance scale-in protector](https://gist.github.com/pseudobeer/2d0debe3ffd84d0710b18d2b1b19f94a)
上記のリンクのスクリプトでは、ECSコンテナクラスター自身が、自身で稼働しているコンテナの数を検出し、AutoScalingの削除保護をture/falseにするスクリプトをcronで定期実行します。
めちゃめちゃ初心者の方の手助けになればと思い手順をまとめます。

##動作
1枚目の画像で青く選択されている実行中のタスクが0のインスタンスが2枚目の画像で以下からの保護のタブが空白になっています。
その他のインスタンスは削除保護が有効になっているため、コンテナの稼働中に削除されることはありません。
![clusterautoscaling5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347413/b5d921ee-454a-2782-d9df-274d42231bff.png)
![clusterautoscaling4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/347413/75400461-9476-3786-4204-a3ada33f2f82.png)

##方法
###1,Permissions for EC2 IAM role
EC2にアタッチするRoleに下記の権限を持ったポリシーを作成しアタッチしてください。

```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "autoscaling:DescribeAutoScalingInstances",
                "autoscaling:SetInstanceProtection"
            ],
            "Resource": "*"
        }
    ]
}
```
###2,スクリプトを持ったECSCluster用AMIの作成
(userdataを利用してECSClusterを起動するよりAMIを利用したほうが早いと思っています)
ECSCluster用のAMIを作成するためのECSCluster用のAMI(amzn-ami-2018.03.q-amazon-ecs-optimized - ami-0750ab1027b6314c7)をイメージに起動します

```
!/bin/bash
yum install -y amazon-efs-utils
curl -o /usr/bin/jq -L https://github.com/stedolan/jq/releases/download/jq-1.5/jq-linux64
chmod a+x /usr/bin/jq
curl -o /ecs_instance_scalein_protector.sh  https://gist.githubusercontent.com/pseudobeer/2d0debe3ffd84d0710b18d2b1b19f94a/raw/bace2ac2afefa236ad181f9b5e227f32b5a46046/ecs_instance_scalein_protector.sh
chmod a+x ./ecs_instance_scalein_protector.sh
curl -O https://bootstrap.pypa.io/get-pip.py
python get-pip.py --user
echo 'export PATH=~/.local/bin:$PATH' >> /root/.bash_profile
source /root/.bash_profile
pip install awscli --upgrade --user
echo 'PATH=/root/.local/bin:/usr/bin:/bin' >> cron.conf
echo '*/1 * * * * /ecs_instance_scalein_protector.sh' >> cron.conf
crontab cron.conf
```
userdata内で、
jqコマンドのダウンロード
ecs_instance_scalein_protector.shのダウンロード
aws cliのインストール
cronの設定
EFSのマウントするためにamazon mountヘルパーのインストール
を行っています。

AMIを作成します。

###3,ECSクラスターインスタンスのAutoScalingGroupの作成
ECSクラスターのスタンスの起動時のuserdata

```
#!/bin/bash
echo ECS_CLUSTER=<ClusterName> >> /etc/ecs/ecs.config;echo ECS_BACKEND_HOST= >> /etc/ecs/ecs.config;
mkdir efs
mount -t efs <efsendpoint>:/ efs
```

##まとめ
これでEC2コンテナインスタンスがタスクの稼働中にAutoScalingで削除されることを防げます。
簡単に有効的な解決策が取れました。
タスクの配置戦略をbinpackにしているとなお有効的だと思います。

もう少しAutoScalingのAlarmを調整しようと思います。
[rails] rubocopとは？

# rubocop とは

コーディング規約に準拠してるかチェックするgemです！
簡単に言いますと、インデントやメソッド名、改行などのチェックをしてくれるものです。
今回は、このrubocopさんについてを会社のプロダクトにいれた時（後入れ）のやり方も交えて書きます。

## 流れ

```Gemfile
gem 'rubocop'
gem 'rubocop-rails'
```

- `$bundle install`
- `$rubocop` で実行(たぶんめちゃめちゃ怒られます。。。)
- 怒られた箇所修正！！！

## .rubocop.yml を作成！
プロジェクト直下に「.rubocop.yml」を作成！！

```.rubocop.yml
require:
  - rubocop-rails

Rails:
  Enabled: true

AllCops:
  Exclude:
    - 'db/schema.rb'
    - 'vendor/**/*'

# 日本語でのコメントを許可
AsciiComments:
  Enabled: false
```

このようなrubocop に対して制御するファイルを作成することで、ひとつひとつを修正していける！
(実際はその人や会社によってもっと設定がいることもあります。)

と簡単そうですが、後入れの場合、まぁーめちゃくちゃ怒られます！
そこで、私が実際にやったやり方は、

```
$bundle exec rubocop -R --auto-gen-config --exclude-limit 999999
```

オプションつけてrubocop コマンドを叩くと、「.rubocop_todo.yml」が作られます！！
このファイルは、現コードに対する一時回避の設定をしてくれます！これによって、怒られなくなります。
つまり、このファイルがなくてもエラーが起きないことがゴールです〜

#### このファイルをもとに「.rubocop.yml」を設定していきます！

---

### 実際の流れ
0.はじめに

```.rubocop_todo.yml
inherit_from: .rubocop.yml
```
これを記述して、両方のファイルが参照されるようにしておく！
or
`.rucocop_todo.yml`の内容を`.rubocop.yml`に全コピー

1. copを一個コメントアウト（削除）

2. `$rubocop`何で怒られているかチェック
-> 直したくない（これからもこのcop に対しては無視したい）->3A
-> 直さないといけない->3B

3A. 
例: AsciiCommentsに関しては、全ページで許可したい！

```.rubocop.yml
# cop でどのようなことが怒られたかとか、どうしたいかを明記しておいたほうが良さそう
AsciiComments:
  Enabled: false
```
を追記
もしくは、

```.rubocop.yml
AsciiComments:
  Exclude:
    - 'app/models/hoge.rb'
```
---


3B. 
`$rubocop -a`自動で修正してくれる（これがめちゃ便利）単純にコードミスや可読性の高いコードにも直してくれる！
注：メソッドの名前などは直してくれない！！

ちなみに、私は`$rubocop`回した段階で何で怒られているのかがわからないやつは、とりあえず`$rubocop -a`を叩きました。
それで、diff でみてどう変更されたかを確認してました！！

流れに関してはこんなもんです！ひたすら、怒られているところの確認-> 修正 or 「cop」 無視

## .rubocop.ymlの書き方について

### rubocopの対象から除外するファイル指定

```.rubocop.yml
AllCops:
  Exclude:
    - db/schema.rb
    - 'vendor/**/*'
```

### copの無効化・有効化

```.rubocop.yml
Rails:
  Enabled: true
```

```.rubocop.yml
Lambda:
  Enabled: false
```

基本的には、cop は有効化されているので`Enabled: true`はそこまで使わないかも
`Enabled: false`はcop 自体を無視したいときに使います！

### warning のみを検知
```.rubocop.yml
Bundler/OrderedGems:
  Severity: warning
```

warning レベルから取得


## 自動化
rubocop を最大活用するためには、自動化するしかないと思いまして、CircleCIと連携することにしました！
CircleCIに関しては、ここでは飛ばします笑

```.circleci/config.yml
jobs:
  build:
    steps:
      - run: bundle exec rubocop
```

と設定するだけです！
自動で回してくれます！
github と CircleCI の連携と CircleCI ファイルの中にrubocop のコマンドを設定することでgithub 上で結果を確認できます！

## まとめ
#### そもそも導入した経緯-> レビューする人が忙しい！！細かい修正で何度もやり取りするのが無駄！

- チームみんなのコードで既存のcop の設定とは違う物が来たときなどのメンテナンスは、必要かなと。
- 私自身、プロダクトに導入したばかりで結果がまだわかっていないので、便利なのか、あまり良いかはまだわかっていません（今更ですが）

#### 非常に良かった点
 - まだ、コードを書き始めて長くない私にとって、`$rubocop -a`によって修正されたり、怒られたりすることでコードの違った書き方を勉強するいい機会になった！（実際これが一番でかい）

## 参考
https://qiita.com/kyohei_shimada/items/e739dec967eb5e61721c
https://blog-ja.sideci.com/entry/2015/03/12/160441
MAMPでSSI有効化する方法・インクルードの書き方

## やりたいこと
MAMPでもSSIを有効化させてインクルードファイルを確認したい

## 環境
```
- MAMP
- MacOS
```

## 方法
`MAMP/bin/apache/conf/httpd.conf`
2箇所書き換えます。

### 1箇所目
206行目あたり
OptionsとAllowOverrideを置換

```
Options Indexes FollowSymLinks ExecCGI Includes
AllowOverride All
```

### 2箇所目
515行目あたり
AddTypeとAddOutputFilterを置換

```
AddType text/html .shtml .html
AddOutputFilter INCLUDES .shtml .html
```


## 書き方
よく使われるインクルードの書き方の1つを紹介します。
htmlファイル上に下記を記述するだけです。

```index.html
<!--#include virtual="/{パス(ルート相対パスok)}/header.html"-->
```
もちろんファイル名は任意でokです。拡張子は省略できません。



## あとがき

Apacheかなんかのバージョンによって書き方変わるみたいです。
MAMP上でSSIはきいているのに、描画が崩れるので、どうしたものかと思っていたのですが
2箇所目が若干違いました。

SSI利用していて、ブラウザでの表示が微妙に崩れる(タグが閉じているにもかかわらず要素が中途半端に消えてしまう)という減少が起きた場合はApacheの設定を確認すると良さそうです。
Unity 3Dで視野の辺縁部の影が消える (ハマったこと)

# 前提

- unityで3Dを使用し、カメラを引いて遠くから見ています。

# 現象

- 視野の縁に近付くにつれて、オブジェクトの影が消えてしまいます。

![修正前](https://pbs.twimg.com/media/D1W01JPU8AAzqBD?format=png&name=small)


# 必要だったこと

- `Project Settings > Quality > Shadow Distance`を必要なだけ大きくします。

![修正後](https://pbs.twimg.com/media/D1XElczV4AAKci6?format=jpg&name=small)
Laravelで投稿アプリの機能を作成 ~ログインカスタマイズ編Ⅰ~

# はじめに
【30分クッキング】Laravelで投稿アプリの機能を作成のCRUD編、リレーション編に引き続き、
今回はできる限り工程を取らずに、自分のページに遷移させていく方法を実装いたしましたので
紹介していきたいと思います

#前提
・前回のデータを元に修正していくので、一緒にデータを作りたい方は
下記から見ることをお勧めします
①https://qiita.com/ProgramingDai/items/cf6944f9cd0ac08f4e3e
②https://qiita.com/ProgramingDai/items/249acc8894079ee58268

・今回はできる限り工数を割くため、既存のLoginCotrollerとlogin.blade.phpを利用します

# 実装イメージ

```
{root}/post
↓
未認証
↓
{root}/login
↓
認証後
↓
{root}/post
↓
ログアウト
↓
{root}/login
```

#実装レシピ
1.ログイン後のリダイレクト先変更

```php:/app/Http/Controllers/Auth/LoginController.php
// 中略
// protected $redirectTo = '/home'; // デフォルトリダイレクト先
protected $redirectTo = '/post'; // 変更後リダイレクト先
// 中略
```
2.ログアウト後のリダイレクト先変更
今回はUserController.phpを新たに作成して実装します

` php artisan make:controller UserController `

```php:/app/Http/Controllers/UserController.php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
// 追加
use Illuminate\Support\Facades\Auth;

class UserController extends Controller
{
    // ログアウト遷移先変更
    public function getLogout(Request $request){
        Auth::logout();
        return redirect()->route('login');
    }
}
```

3.ルーティング設定

```php:/routes/web.php
// 中略
Route::get('/logout', 'UserController@getLogout')->name('user.logout');
```

4.ビューの修正
デフォルトでの「login.blade.php」の中身を全て変更していきます。

```html:/resources/views/auth/login.blade.php
@extends('layouts.postapp')

@section('content')
@section('maincopy', 'ログインしてください')

<form method="POST" action="{{ route('login') }}">
    {{ csrf_field() }}
    @if ($errors->has('email'))
        {{ $errors->first('email') }}
    @endif
    <input type="text" class="form" name="email" placeholder="メールアドレス">

    @if ($errors->has('password'))
        {{ $errors->first('password') }}
    @endif
    <input type="password" class="form" name="password" placeholder="パスワード">
    <input type="submit" class="create" value="ログイン">
</form>
@endsection
```

5.新規登録とログアウトリンクの切り分け表示
ログインするためには新規登録画面とログアウトできるリンクが必要です
` @if(Auth::check()) `で現在認証中か否かを判定することができます

このページのどこでもいいので下記コードを追加してください

```html:/resources/views/layouts/postapp.blade.php
@if(Auth::check())
<!--認証中なら-->
<a href="{{ route('user.logout') }}"><img src="{{ asset('img/logout.svg') }}" class="add" alt="ログアウト"></a>
@else
<!--未認証なら-->
<a href="{{route('register')}}"><img src="{{ asset('img/user.svg') }}" class="add" alt="ユーザー登録"></a>
@endif
```
※imgの部分は通常のリンク文字にしてもOKです
※ボタンUIはこちらのサイトから無料でダウンロードしました
https://www.ikonate.com/

# あとがき
こんな感じ自動生成されるをページを利用すれば、遷移を変更していくだけで
オリジナルログイン画面の実装ができます。ログイン周りはこの他にも、「login.blade.php」を使わず
ビュー自体もオリジナルで実装する方法もありますので、興味があれば調べてみてください。
次回はregister（新規登録）周りのカスタマイズを実装していく予定ですので、ぜひ。

Laravelで投稿アプリの機能を作成
~CRUD編~
https://qiita.com/ProgramingDai/items/cf6944f9cd0ac08f4e3e
~リレーション編~
https://qiita.com/ProgramingDai/items/249acc8894079ee58268
~ログインカスタマイズ編Ⅰ~
https://qiita.com/ProgramingDai/items/fee669e5a8cf67f0e38e
~ログインカスタマイズ編Ⅱ~
https://qiita.com/ProgramingDai/items/4fe2e3cc90987356c9c4

参考書籍： PHPフレームワーク Laravel入門
https://blog.hiroyuki90.com/articles/laravel-books/
matplotlibで対数グラフを描くときの目盛り設定

matplotlibで対数軸のグラフを描いているときに困ったことと解決策の記録です．

#困ったこと

matplotlibで対数軸にプロットしたいときには，`ax.set_xscale('log')`と書くと思います．次のコードを実行すると確かに対数軸でプロットされます(下図)．ただし，これではデフォルトで対数軸が$10^n$のかたちで表示されてしまいます．時と場合によっては，1, 10, 100...の方が良いこともあるので困ります．どうしたら変更できるのか調べました．

```python
#coding: utf-8

import sys
import random
import math
import matplotlib.pyplot as plt

x = []
y = []

for i in range(100):
	x.append(10**random.uniform(0,4))
for i in range(len(x)):
	y.append(math.exp(-x[i]/10**2))

fig, ax = plt.subplots()
ax.plot(x, y,'.')
ax.set_xscale('log')
plt.show()
```
![normal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262977/bcaddaac-3dfd-cde9-80af-a50e630ea63f.png)

#解決策1
力技で解決してしまう方法です．目盛りの位置とそれに対応する目盛りの文字列を用意してあげます．面倒くさいですが，手っ取り早いとは思います．

```python
#coding: utf-8

import sys
import random
import math
import matplotlib.pyplot as plt

x = []
y = []

for i in range(100):
	x.append(10**random.uniform(0,4))
for i in range(len(x)):
	y.append(math.exp(-x[i]/10**2))

fig, ax = plt.subplots()
ax.plot(x, y,'.')
ax.set_xscale('log')

############################################
pos = [1, 10, 100, 1000, 10000] 
ticks = ['1', '10', '100', '1000', '10000']
ax.set_xticks(pos)
ax.set_xticklabels(ticks)
############################################

plt.show()
```
![solution1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262977/18ffa293-9043-e0b3-3efb-df0a0a10d48e.png)


#解決策2
なんかよく分からないおまじないを書いたら解決できるやつです．おまじないは2行です．2つ目の`ax.get_xaxis().set_major_formatter(matplotlib.ticker.ScalarFormatter())`は，`ax.set_xscale('log')`の後に書かないと意味ないっぽいです．

```python
import matplotlib.ticker
```

```python
ax.get_xaxis().set_major_formatter(matplotlib.ticker.ScalarFormatter())
```
```python
#coding: utf-8

import sys
import random
import math
import matplotlib.pyplot as plt

##########################################
import matplotlib.ticker
##########################################

x = []
y = []

for i in range(100):
	x.append(10**random.uniform(0,4))
for i in range(len(x)):
	y.append(math.exp(-x[i]/10**2))

fig, ax = plt.subplots()
ax.plot(x, y,'.')
ax.set_xscale('log')

#######################################################################
ax.get_xaxis().set_major_formatter(matplotlib.ticker.ScalarFormatter())
#######################################################################

plt.show()
```
![norma2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262977/1ea486f3-dab2-0c1a-b3cf-a4860534c54d.png)

#参考にさせていただいたページ

-　[matplotlib によるデータ可視化の方法 (2)](https://qiita.com/ynakayama/items/aec4e962d738d24641ee)
-　[stackoverflow](https://stackoverflow.com/questions/14530113/set-ticks-with-logarithmic-scale)
Android Developers Blog 適当意訳 #9 New! Learn How to Build Android Apps with Android Jetpack and Kotlin

# Android Jetpack と Kotlin を使ってのアプリ開発方法を学びましょう！
2019年5月19日

[原文](https://android-developers.googleblog.com/2019/05/new-learn-how-to-build-android-apps.html)
**※英語の勉強と自分用のメモ程度のかなり適当なものです。**

[Developing Android Apps with Kotlin(GoogleとUdacityによる共同制作)](https://www.udacity.com/course/developing-android-apps-with-kotlin--ud9012) は我々の新しい無料の自分のペースで学べるオンラインコースです。
あなたはKotlinでの業界標準のツールとライブラリを使ったAndroidアプリの開発方法を学べます。
Androidアプリ開発の基礎は活発でメンテナンス可能なアプリケーションの土台を提供するアーキテクチャという文脈の中で教えられています。
このコースは、 Room や Work Manager や Navigation component などを使って何故そしてどうやってそれらを使うのかを教えます。
あなたは画像ロードライブライのGlideや通信ライブラリのRetorofitJsonパーサのMoshiなど一般的なタスクをシンプルにする有名なライブラリを使います。
このコースは、コードの記述をより早く簡潔にするためのcoroutinesのような主要なKotlinの機能を教えます。
このコースを通して、火星の写真やトリビアクイズ、睡眠追跡などの楽しくて興味深いアプリを作るでしょう。
このコースは、プログラミング経験があり、Kotolinの基礎がわかっている方を対象にしていますので、Kotlinになじみのない開発者の方は、まずUdacityの [Kotlin Bootcamp course](https://www.udacity.com/course/kotlin-bootcamp-for-programmers--ud9011) を受講する事をおすすめします。
このコースは、 Udacity で無料で受けられます。あなたの好きな時間で好きなペースで受講してください。
https://www.udacity.com/course/ud9012 に我々と一緒にKotlinでのAndroidアプリ開発を学びに来てきてください！
Xcode10.2でシミュレーターを使った際に「/usr/lib/swift/libswiftCore.dylib: mach-o, but not built for iOS simulator」が発生してクラッシュする

## 概要
XcodeでRun Testしたところ、``` Reason: no suitable image found.  Did find:/usr/lib/swift/libswiftCore.dylib: mach-o, but not built for iOS simulator```でランタイムエラーが発生

## ログ
```
Showing All Messages
xctest (14228) encountered an error (Failed to load the test bundle. (Underlying error: The bundle “BallcapTests” couldn’t be loaded because it is damaged or missing necessary resources. The bundle is damaged or missing necessary resources. dlopen_preflight(/Users/ando/Library/Developer/Xcode/DerivedData/Ballcap-fmvoaoxolqhohiethegcuqxocwpu/Build/Products/Debug-iphonesimulator/BallcapTests.xctest/BallcapTests): Library not loaded: @rpath/libswiftCore.dylib
  Referenced from: /Users/ando/Library/Developer/Xcode/DerivedData/Ballcap-fmvoaoxolqhohiethegcuqxocwpu/Build/Products/Debug-iphonesimulator/BallcapTests.xctest/BallcapTests
  Reason: no suitable image found.  Did find:
	/usr/lib/swift/libswiftCore.dylib: mach-o, but not built for iOS simulator))
```

## 環境
Mac 10.14.5（18F132）
Xcode Version 10.2.1 (10E1001)
Simulator iPhoneX iOS12.0 12.1
Swift 5
対象のレポジトリ
https://github.com/1amageek/Ballcap-iOS

## 暫定対応
シミュレーターをiOS12.2にしたら動いた。

## 未検証
/usr/lib/swiftからシミュレーターに補完してあげると動くという情報あり

```
sudo cp -r /usr/lib/swift/*.dylib /Applications/Xcode.app/Contents/Frameworks
sudo touch /Applications/Xcode.app/Contents/Frameworks/.swift-5-staged
```
https://stackoverflow.com/questions/55633946/cant-build-app-because-of-2-paths-for-libswiftcore-dylib

## 関連情報
https://www.reddit.com/r/iOSProgramming/comments/b67fbc/xcode_102_release_builds_frozen/
errnoからお手軽にエラーメッセージを知りたい

それPerlで出来るよ:

```console
% perl -E 'say$!=24' # errno=24 の場合
Too many open files
```

覚えたくない人向けのalias:

```console
% alias errno='perl -E "say\$!=\$ARGV[0]"'
% errno 24
Too many open files
```

便利

## 解説

別途記事を書きました: https://techblog.karupas.org/entry/2019/05/28/085710
興味のある人はどうぞ
「5分で作れる！Glideappsではじめる超簡単PWA」セッションで利用する予定のデモ動画とプレゼン資料

国内最大級の規模を誇るAndroidの19回目の祭典
「Android Bazaar and Conference 2019 Spring (ABC2019Spring)」
https://abc.android-group.jp/2019s/

「5分で作れる！Glideappsではじめる超簡単PWA」セッションで利用したデモ動画です。

５分でGlideの基本的な使い方を説明しています。

https://www.youtube.com/watch?v=vbyd_pEMzJ0
https://youtu.be/vbyd_pEMzJ0

<iframe width="560" height="315" src="https://www.youtube.com/embed/vbyd_pEMzJ0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

こちらはプレゼン資料。
https://www.slideshare.net/kinneko/5-glideapps-pwa

## 関連ドキュメント
・[流行りのGlideでプログレアプリ(PWA)してみた](https://qiita.com/kinneko/items/548597770d93aa17c6cf)
・[プログレアプリGlideappsにchoice機能が追加されたので使ってみました](https://qiita.com/kinneko/items/99a67faa231226335ba6)
・[Glideappにコメント/チャットのメッセージ追加を通知する機能が付いたので試してみた](https://qiita.com/kinneko/items/654c2a1e6e13d9c9592c)
・[Glideappsでfav機能が評価中なので試してみた(リリースされました)](https://qiita.com/kinneko/items/d4fae3ae26d358b130ba)
・[「5分で作れる！Glideappsではじめる超簡単PWA」セッションで利用する予定のデモ動画とプレゼン資料](https://qiita.com/kinneko/items/2d15a7cb87cb17a483a7)
・[Glideで画像アップロードの機能のテストが開始されました](https://qiita.com/kinneko/items/6831572cf3cf12a4a4e3)
・[Glideのリスト表示で地図と連携表示する機能のテストが開始されました](https://qiita.com/kinneko/items/79e84181ab7c0bcef88d)
・[Glideで画面のリロードをさせるための対策](https://qiita.com/kinneko/items/dec896995aca30b91ec6)
JIRA プロジェクトの定義要素の関係

###JIRAのプロジェクトの定義要素の関係

JIRAのプロジェクトの主な定義要素である「課題タイプ」、「ワークフロー」、「画面」、「フィールド」、「優先度」等
※各要素はJIRA管理メニューの『課題』を選択すると左側のペインに表示される

それらの関係をJIRAのドキュメント、[プロジェクトの画面、スキーム、およびフィールド](https://ja.confluence.atlassian.com/adminjiraserver/project-screens-schemes-and-fields-938847220.html)にある図を拝借して関係を整理した。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421908/004864ae-9406-a40b-5393-51b951dc87ea.png)

この関係を理解した上でプロジェクト定義をしていかないと、保守で大変な思いをする。


*JIRA Software 7.12.1を使用。
ユーザー数は300程度。プロジェクト数は20程度*
Unityで加算合成とかしたい

# 前提
- unityでマテリアルとシェーダーの基本的な利用方法はここでは説明しません。
- シェーダーのソースが利用できる必要があります。
- この記事は、執筆時点での私の理解に留まり、必ずしも真実ではありません。

# 目的
- 既存のシェーダーのブレンドモードを変更したい。
    - 例えば、もやっとした画像をPhotoshopの「覆い焼き(リニア)」みたいに被せて、光ってるみたいに見せたい。

# 手っ取り早い解決

- 対象のオブジェクトに割り当てられたマテリアルを確認し、マテリアルが使用しているシェーダーを特定します。
    - 例えば、対象がuGUIのImageでマテリアルが明示されていないなら、`Default UI Material`が割り当てられ、`UI/Default`シェーダーが使われています。
- シェーダーのソースを用意します。
    - ビルトインシェーダーは、公式の「[ダウンロード アーカイブ](https://unity3d.com/jp/get-unity/download/archive)」から入手可能です。
- ソースのファイル名を変更します。
    - 例えば、`UI-Default.shader`を`UI-Default-Add.shader`に変更します。
- ソースをプロジェクトに取り込みます。
- ソースを開いて、冒頭のシェーダー名を変更します。
    - 例えば、以下のように変更します。

```glsl:UI-Default-Add.shader
Shader "UI/Default"
{
```

↓

```glsl:UI-Default-Add.shader
Shader "UI/Add"
{
```

- キーワード`Blend`を探し、後に続くふたつのキーワードを変更します。
    - 例えば、以下のように変更します。

```glsl:UI-Default-Add.shader
Cull Off
Lighting Off
ZWrite Off
ZTest [unity_GUIZTestMode]
Blend SrcAlpha OneMinusSrcAlpha /////// 発見
ColorMask [_ColorMask]
```
↓

```glsl:UI-Default-Add.shader
Cull Off
Lighting Off
ZWrite Off
ZTest [unity_GUIZTestMode]
Blend One One /////// 加算合成
ColorMask [_ColorMask]
```

- 新しいマテリアルを作り、書き換えたシェーダーを割り当てます。
- 対象のオブジェクトに、マテリアルを割り当てます。

以上で、`UI-Default.shader`の加算合成版ができました。

# Blendの引数と効果

|命令|上作用|下作用|効果|意味*|
|:---|:---|:---|:---|:---|
|Blend|SrcAlpha|OneMinusSrcAlpha|アルファブレンド|下画像を上画像の透明度を補うように薄くしたものと上画像をその透明度で薄くしたものを合成|
|Blend|OneMinusDstColor|Zero|反転|上画像に下画像の補色を乗算|
|Blend|One|One|加算 / 覆い焼き(リニア)|下画像に上画像を加算|
|Blend|SrcAlpha|One|加算+アルファ / スクリーン|下画像に上画像を透明度で薄くして加算|
|Blend|OneMinusDstColor|One|スクリーン / 比較(明)|上画像に下画像の補色を乗算した上で下画像を加算|
|Blend|Zero|SrcColor|乗算|下画像に上画像を乗算|

#### *私の理解

`Blend 《第1引数》 《第2引数》`は、「上画像に第1引数を作用させたものと、下画像に第2引数を作用させたものを合成する」というルールを定めるみたいだけど、この「作用」がどういうものかは、フラグメントシェーダーでプログラムされていて、たいていは「乗算」になっているようです。
つまり、多くの場合、`Blend = 上画像 × 第1引数 + 下画像 × 第2引数`となるものと受け取りました。
例えば、単純な乗算なら`Blend = 上画像 × 0 + 下画像 × 上画像`、加算なら、`Blend = 上画像 × 1 + 下画像 × 1`で実現できるわけです。

※私の勝手な解釈ですので、「そうじゃない」とかあれば、是非ご指摘ください。

# 技術情報

|キーワード|値|意味|
|:---|:---|:---|
|Zero|	(0, 0, 0, 0)|0%|
|One|	(1, 1, 1, 1)|100%|
|SrcColor|	(Sr/Kr, Sg/Kg, Sb/Kb, Sa/Ka)|新しい色|
|OneMinusSrcColor|	(1, 1, 1, 1) - (Sr/Kr, Sg/Kg, Sb/Kb, Sa/Ka)|新しい色の補色|
|DstColor|	(Dr/Kr, Dg/Kg, Db/Kb, Da/Ka)|現在の色|
|OneMinusDstColor|	(1, 1, 1, 1) - (Dr/Kr, Dg/Kg, Db/Kb, Da/Ka)|現在の色の補色|
|SrcAlpha|	(Sa/Ka, Sa/Ka, Sa/Ka, Sa/Ka)|新しいα|
|OneMinusSrcAlpha|	(1, 1, 1, 1) - (Sa/Ka, Sa/Ka, Sa/Ka, Sa/Ka)|新しいαの補色|
|DstAlpha|	(Da/Ka, Da/Ka, Da/Ka, Da/Ka)|現在のα|
|OneMinusDstAlpha|	(1, 1, 1, 1) - (Da/Ka, Da/Ka, Da/Ka, Da/Ka)|現在のαの補色|
|SrcAlphaSaturate|	(i, i, i, 1)<br>{i = Min (Sa / Ka, 1 - Da / Ka)}|「新しいα」と「現在のαの補色」の暗い方を不透明にしたもの|
|||
|S (r, g, b, a)|	(0, 0, 0, 0)～(Kr, Kg, Kb, Ka)|新色(絶対値)|
|D (r, g, b, a)|	(0, 0, 0, 0)～(Kr, Kg, Kb, Ka)|現色(絶対値)|

# 参考にしたページ

以下のページを参考にさせていただきました。
どうもありがとうございました。

- [OpenGLの画像合成時のブレンドモードよく使うもの抜粋](http://memo.devjam.net/clip/538)
- [混合処理 - 透過とアルファ値](http://wisdom.sakura.ne.jp/system/opengl/gl17.html)
【TreasureData】URLからの部分抽出(HIVE,Presto)

##はじめに
アクセスログの解析を行う上でURLから一部だけ抽出する処理ががよくあるので、
その場合に利用できるHIVE、Prestoの関数と利用例をまとめてみました

##HIVEとPrestoそれぞれで使える関数
HIVEは、`parse_url`
Prestoは、`url_extract_***`
が関数として用意されている

##HIVE
`parse_url(string urlString, string partToExtract [, string keyToExtract])`

第一引数にURL、第二引数に抽出したい箇所を入力する
第三引数は特定のクエリパラメータだけを抽出したいときに利用する

第二引数に指定できるのは、
`HOST, PATH, QUERY, REF, PROTOCOL, AUTHORITY, FILE, USERINFO`
の8つ

URL：http://user:password@example.com:8888/index.html?query1=aaa&query2=bbb#hash
に対して実行した場合

```sql:hive_sample.sql
SELECT
  t1.URL,
  parse_url(t1.URL,'HOST') as HOST,
  parse_url(t1.URL,'PATH') as PATH,
  parse_url(t1.URL,'QUERY') as QUERY,
  parse_url(t1.URL,'QUERY','query1') as QUERY1,
  parse_url(t1.URL,'REF') as REF,
  parse_url(t1.URL,'PROTOCOL') as PROTOCOL,
  parse_url(t1.URL,'AUTHORITY') as AUTHORITY,
  parse_url(t1.URL,'FILE') as FILE,
  parse_url(t1.URL,'USERINFO') as USERINFO
FROM
  (SELECT 'http://user:password@example.com:8888/index.html?query1=aaa&query2=bbb#hash' as URL) t1
```
↓ 実行結果

|Column|Value|
|:-----|:----|
|URL      |http://user:password@example.com:8888/index.html?query1=aaa&query2=bbb#hash|
|HOST     |example.com| 
|PATH     |/index.html| 
|QUERY    |query1=aaa&query2=bbb| 
|QUERY1   |aaa| 
|REF      |hash| 
|PROTCOL  |http| 
|AUTHORITY|user:password@example.com:8888| 
|FILE     |/index.html?query1=aaa&query2=bbb| 
|USERINFO |user:password| 

##Presto

`url_extract_host(string urlString) `
`url_extract_fragment(url)`
`url_extract_path(url)`
`url_extract_port(url)`
`url_extract_protocol(url)`
`url_extract_query(url)`
`url_extract_parameter(url, name) `

##例えば
###### サイト内検索クエリを抽出したい場合
■HIVE
`parse_url('http://example.com/search?q=book&page=1','QUERY','q')`
→ book
■Presto
`url_extract_parameter('http://example.com/search?q=book&page=1','q')`
→ book

##参考
LanguageManual UDF — Hive Operators and User-Defined Functions (UDFs)
https://cwiki.apache.org/confluence/display/Hive/LanguageManual+UDF

6.18. URL Functions — Presto 0.187 Documentation
https://prestodb.io/docs/current/functions/url.html
【ドラッグ&ドロップめんどくさい】PDFを分割してPNGに変換する

// この記事は、 [note](https://note.mu/in_colors_net/n/n970edf197e5d) に投稿した記事の再掲です。

人からもらったPDFを編集したいときに一度画像にしています
**PDF.pdf** → `pdf_page%d.png` に変換する（ `"%d"` には連番で数字が入る）

# なければインストール

```bash
$ brew install mupdf-tools
```

# PDFを分割してPNGにする

```bash
$ mutool draw -o pdf_page%d.png PDF.pdf
```

# 参考
MuPDF
https://mupdf.com/index.html
Rocket.Chatを1行でAWS上に導入

# Rocket.Chatとは
Lightblue Technologyではこれまで社内のコミュニケーションツールとしてslackを使ってきました。
しかし、インターン生が増えたため、無料枠で使うには限界が来ていました。そこで、有料化を考えたのですが、**1人あたり850円/月**かかるんです。インターン生が多く在籍するLightblue Technologyでは「1人あたり」という課金体系が使いづらいです。

そこで、RocketChatの導入を決めました。RocketChatは、slackのようなチャット機能を有するOSSです。
RocketChatはdockerイメージが提供され、また、様々なPaaSに対応しているため、比較的容易に導入することができます。
<img width="836" alt="スクリーンショット 2019-05-24 15.05.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/370065/ae355894-9fa7-01b7-14bc-d42bb1f24e23.png">


# 導入手順
1. EC2立ち上げ
2. Rocket.Chatインストール
3. Route53、ロードバランサー、AWS Certificate Managerで独自ドメイン化・SSL化

# EC2立ち上げ
Rocket.Chatの[ミニマム要件](https://rocket.chat/docs/installation/minimum-requirements/)を見ると、
>VPS (minimal)
Single core (2 GHz)
1 GB RAM
30 GB of SSD
The above minimal virtual configuration, when not over-provisioned by provider, is ideal for small deployments of up to 200 users, up to 50 concurrently active and minimal level of mixed uploads, sharing, and bot activities.

とあるので、t2.microを選んで、イメージにはUbuntu, 16.04 LTSを選びました。
セキュリティグループでは、設定時にssh用の22番とRocket.Chat用の3000番をあけました。
そして、ElasticIPを設定し、完了です。

# Rocket.Chatインストール
[PaaS Deployments](https://rocket.chat/docs/installation/paas-deployments/)や[docker container](https://rocket.chat/docs/installation/docker-containers/)もあるのですが、ここでは**Rocket.Chatを1行でAWS上に導入**するために、マニュアルインストールにあるUbuntu向けの
[Snaps](https://rocket.chat/docs/installation/manual-installation/ubuntu/snaps/)を用います。すると、
`sudo snap install rocketchat-server`
これだけでインストール終了です。
あとは、
http://[EC2のIPアドレス]:3000
にアクセスするだけでRocket.Chatの設定ウィザードが開きます。ちなみに**最初に開いたユーザが管理者となります。**これは注意が必要です。
他のインストール方法では、事前にホスト先のURL等を設定しますが、これはアクセスした後のRocket.Chatの管理画面から変更可能です。

# 独自ドメイン・SSL化
あとは、Route53、ロードバランサー、AWS Certificate Managerで独自ドメイン・SSL化します。
これをやらなくても、Rocket.Chatは使えますが、警告が出たり、招待メールが迷惑メールに送られたりするので、やったほうがいいです。
僕の場合はこれを機に、お名前.comで管理していたドメインのDNSとドメインをRoute53に移管しました。ドメインの移管は時間がかかるイメージでしたが、10分くらいで反映されていました。基本的にはRoute53の設定ウィザードに従います。

AWS Certificate Managerから**証明書のリクエスト**を行い、DNSをRoute53に変更したので、DNSによる認証を選び、Route53で指定されたCNAMEを編集します。

EC2の設定画面からロードバランサーを設定し、クライアントからのリスナーをTLSプロトコルで443ポートを指定し、証明書にAWS Certificate Managerで取得したSSL証明書を指定します。
そして、ターゲットグループにRocket.ChatをたてたEC2インスタンスを指定し、TCPプロトコルで3000ポートを指定します。



# おわり
以上で、独自ドメイン・SSL化された状態でRocket.Chatが使えます。
t2.microであれば無料枠の範囲だったりするので、かなり安く運用できそうです。
次はRocket.Chatの初期設定のベストプラクティスを書きたいと思います。
初期設定では招待メールが送れなかったり、新規登録が自由にできたりするので。。。
【Photoshopを起動したくない】コマンドプロンプトで画像のサイズと拡張子を変更する

// この記事は、 [note](https://note.mu/in_colors_net/n/n97ebd64ae6ec) に投稿した記事の再掲です。

使わなくて済むのならGUIはなるべく使いたくないかんじです。

縦横比を維持したままサイズを変更する
言わずと知れた `$ sips` で、PNG画像の横幅を810pxに変換する

```bash
$ cd /change/your/dir
$ for f in *.png; do sips --resampleWidth 810 $f --out ${f%}.png; done
```

解像度を72に変更する
引き続き `sips` で、PNG画像の解像度を 72 に変換する

```bash
$ cd /change/your/dir
$ for f in *.png; do sips -s dpiHeight 72 -s dpiWidth 72 $f --out ${f%}.png; done
```

PNG→JPGに変換
言わずと知れたImageMagick

# なければインストールする

```bash
$ brew install imagemagick
```

# PNG→JPG

```bash
$ for f in *.png; do convert $f ${f%.png}.jpg; done
```

# 参考
ImageMagick
https://www.imagemagick.org/script/index.php