OmniAICreator/Qiita-1.07M huggingface dataset:
Rails 6 + MySQL8.0 + Docker 環境でMySQLを日本語化

初学者向けの記事です。
私の備忘録として残します。
##docker-compose.yml上で２つのことをしようとしてハマった
####・「MySQL8.0の認証方法に対応」
####・「MySQLの文字コードを変更」
これを同時にやろうとしてハマりました。

##やりたいこと１ 「MySQLの認証方法変更」
MySQL8.0から

```
command: --default-authentication-plugin=mysql_native_password
```

を追加する必要がありました。

<details><summary>__コード全体を確認 （docker-compose.yml）__</summary><div>

```
version: '3'
services:
    db:
        image: mysql:8.0
        command: --default-authentication-plugin=mysql_native_password
        volumes:
            - ./src/db/mysql_data:/var/lib/mysql
        environment:
            MYSQL_ROOT_PASSWORD: password
    web:
        build: .
        command: bundle exec rails s -p 3000 -b '0.0.0.0'
        volumes:
            - ./src:/app
        ports:
            - "3000:3000"
        depends_on:
            - db
```
</div></details>

##やりたいこと2 MySQLの文字コードをutf8mb4に変えたい

また、dockerでmysqlの文字コードを日本語対応のものに変更しようとすると、次のようなコマンドを打つ必要があるとわかりました。
（imageを引っ張ってくるとデフォルトの文字コードは「latin1」でした）

```
command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
```

で、「commandを２つ書けば良いんだな」と思って調整していたのですが、うまくいきません。
というのも、docker-compose.ymlのcommandは「__１つしか書けない__」からなんですね。

>Run a one-off command on a service

[参考文献](https://docs.docker.com/compose/)

##思いついた解決策１（失敗）：１つの長いcommandにする

下記リンクを参考に長い１つのcommandを作ろうと思いましたが失敗しました。
もう少し粘れば行ける気がするのですが、そもそも長いコマンドはあまり美しくないかも・・・と思って解決策２を試したところ、すんなり解決しました。

[参考リンク]
(https://sleepless-se.net/2018/06/02/dockercomposecommand%E3%82%92%E8%A4%87%E6%95%B0%E8%A1%8C%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/)

##思いついた解決策２（成功）：localのmy.cnfをmysqlのdbコンテナにコピーする

まずlocalの適当な場所にmy.cnfを作ります。
そこにdbコンテナのmy.cnfをコピーして、先ほどコマンドでやりたかったことを追記します。
![スクリーンショット 2021-05-09 16.11.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/579927/78d4028c-546c-aa23-17bb-1a228884bc50.png)

そしてdocker-compose.ymlを編集
１、commandを削除（全てmy.cnfに書いたので）
２、volumesに下記の一行追記

```
- ./src/db/my.cnf:/etc/mysql/my.cnf
```

<details><summary>__コード全体を確認 （docker-compose.yml）__</summary><div>

```
version: '3'
services:
    db:
        image: mysql:8.0
        volumes:
            - ./src/db/mysql_data:/var/lib/mysql
            - ./src/db/my.cnf:/etc/mysql/my.cnf
        environment:
            MYSQL_ROOT_PASSWORD: password
    web:
        build: .
        command: bundle exec rails s -p 3000 -b '0.0.0.0'
        volumes:
            - ./src:/app
        ports:
            - "3000:3000"
        depends_on:
            - db
```
</div></details>

##おわり

これで無事文字コードの置き換えとMySQL8.0の認証を同時に行うことができました。
Rails 6 + MySQL8.0 + Dockerで開発をすれば誰でもこの状況になる気がするので、みなさん普通に解決してるんですよね。
私は１時間以上かかりました。

これからも精進します。
何か間違いがあればご指摘いただけますと幸いです。


##備考

docker-compose.ymlを書き換えた時はdocker-compose downとupだけで動作確認できます。
私はよくわからなくて途中まで毎回buildしていました。
コーディング/プログラミング環境のフォント

エディターでデフォルトのフォントのままコーディング/プログラミングしていませんか？
よもや、`MS ゴシック`や`Consolas`を使い続けて．．．

等幅(固定幅)フォントが最適ですが、日本語も含めた最良なフォントって少ないです。
ぜひフォントを変えて、快適なコーディング/プログラミング環境をつくってみましょう。

|名前|デザイン|VS Code表示例||
|:--|:--|:--|:--|
|Source Han Code JP （源ノ角ゴシック）|Adobe|![Source Han Code JP.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399204/37f3e655-c746-ee94-5a07-ab1f57942693.png)|:point_up: 筆者常用|
|udev-gothic||![スクリーンショット 2022-03-26 174128.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399204/301f555e-7eca-3cd8-6fe8-d75a7e796827.png)||
|Cascadia Code|Microsoft|![Cascadia Code.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399204/051f11da-7f7e-5bc1-a522-45f8efba57a0.png)|注：日本語なし、フォールバックにより`Meiryo (メイリオ)`の例|
|IBM Plex|IBM|![ibmplexjp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399204/6001b48b-752b-89a1-f786-8413f7b06572.png)|注：日本語なし、フォールバックにより`IBM Plex Sans JP`の例   他に、`PlemolJP`|

### Source Han Code JP （源ノ角ゴシック） by Adobe

https://github.com/adobe-fonts/source-han-code-jp#source-han-code-jp

### udev-gothic

https://github.com/yuru7/udev-gothic

### Cascadia Code by Microsoft

https://github.com/microsoft/cascadia-code#readme

合字(ligatures)が含まれるため
![Cascadia Code ligature off.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399204/fc7fe591-dcfe-7847-dafd-e459a71eb018.png)
が
![Cascadia Code ligature on.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399204/9754bfdd-a0f2-0452-4e2e-c913d3a2f154.png)
になり、数学表記に近づきます。

VS Codeの場合、設定で切り替えられます。
`"editor.fontLigatures": true/false`

参考：https://docs.microsoft.com/ja-jp/windows/terminal/cascadia-code

### IBM Plex by IBM

https://github.com/IBM/plex/tree/v6.0.0
Docke Desktop for WindowsでVHDの保存先を変更する

# はじめに

新しくPCを買い替えたので、Dockerを学習しようと思い、Docke Desktop for Windowsをインストールしてみました。

Dockerのイメージやコンテナは、Cドライブの「`%LOCALAPPDATA%\Docker\wsl\data\`」に保存されており
今後の学習次第ではCドライブを圧迫しそうなので、Dドライブの任意のフォルダへ変更してみようと思います。
なお、コマンドはすべてPowerShell上で実行しています。

# 環境

私が実施したDockerのバージョンです。

<details><summary>Dockerのバージョン</summary><div>

```
PS C:\Users\xxx> docker version
Client:
 Cloud integration: 1.0.14
 Version:           20.10.6
 API version:       1.41
 Go version:        go1.16.3
 Git commit:        370c289
 Built:             Fri Apr  9 22:49:36 2021
 OS/Arch:           windows/amd64
 Context:           default
 Experimental:      true

Server: Docker Engine - Community
 Engine:
  Version:          20.10.6
  API version:      1.41 (minimum version 1.12)
  Go version:       go1.13.15
  Git commit:       8728dd2
  Built:            Fri Apr  9 22:44:56 2021
  OS/Arch:          linux/amd64
  Experimental:     false
 containerd:
  Version:          1.4.4
  GitCommit:        05f951a3781f4f2c1911b05e61c160e9c30eaa8e
 runc:
  Version:          1.0.0-rc93
  GitCommit:        12644e614e25b05da6fd08a38ffa0cfe1903fdec
 docker-init:
  Version:          0.19.0
  GitCommit:        de40ad0
```
</div></details>

<details><summary>Docker Composeのバージョン</summary><div>

```
PS C:\Users\xxx> docker-compose version
docker-compose version 1.29.1, build c34c88b2
docker-py version: 5.0.0
CPython version: 3.9.0
OpenSSL version: OpenSSL 1.1.1g  21 Apr 2020
```
</div></details>

# 手順

- wslの停止

```
C:\Users\xxx> wsl --shutdown
```

- 停止していることの確認

Stoppedになっていることを確認します。
数秒かかるようなので、何回か実行すれば、そのうちStoppedに変わってます。

```
C:\Users\xxx> wsl -l -v
  NAME                   STATE           VERSION
* Ubuntu                 Stopped         2
  docker-desktop         Stopped         2
  docker-desktop-data    Stopped         2
```

- エクスポート先のフォルダを作成

今回はDドライブの「docker」フォルダをエクスポート先にしました。

```
C:\Users\xxx> mkdir d:docker
```

- ディストリビューションをtarファイルにエクスポート

`wsl --export <Distro> <FileName>`

```
C:\Users\xxx> wsl --export docker-desktop-data  D:\docker\docker-desktop-data.tar
```

- ディストリビューションの登録を解除

これを実行すると、`%LOCALAPPDATA%\Docker\wsl\data\`から`ext4.vhdx`が削除されます。

```
C:\Users\xxx>  wsl --unregister docker-desktop-data
登録を解除しています...
```

- ディストリビューションが削除されたことを確認

`docker-desktop-data`が消えています。

```
C:\Users\xxx> wsl -l -v
  NAME                   STATE           VERSION
* Ubuntu                 Stopped         2
  docker-desktop         Stopped         2
```

- ディストリビューションのインポート

`wsl --import <Distro> <InstallLocation> <FileName>`

```
C:\Users\xxx> wsl --import docker-desktop-data D:\docker D:\docker\docker-desktop-data.tar
```

- ディストリビューションが登録されたことを確認

`docker-desktop-data`が増えています。

```
C:\Users\xxx> wsl -l -v
  NAME                   STATE           VERSION
* Ubuntu                 Stopped         2
  docker-desktop         Stopped         2
  docker-desktop-data    Stopped         2
```

- Docker Desktopの起動

- docker-desktop-data.tarの削除

# 参考

[Windows Subsystem for Linux を管理するための引数](https://docs.microsoft.com/ja-jp/windows/wsl/reference#arguments-for-managing-windows-subsystem-for-linux)
paddingではなくmarginを使用した方がいい理由

## どうしてこんな議題を？
HTMLをコーディングしている最中に要素同士の間の距離を設定するときには`margin`や`padding`を設定します


`margin`と`padding`の設定では ある程度同じような効果が得られるので どちらを使うべきか迷う方もいらっしゃるのではないでしょうか？

プロジェクト内での指針を決めたり 技術指導をする際に 「結局どっちを使ったらいいですか？」 という質問に返答できるように 本記事で回答します

## 結論
**要素同士の間の距離は 基本的に`margin`で設定してください**

## 理由
完璧な設計書を元にコーディングができることは ほぼないからです

Webサイトを作成するにあたって 画面設計書・ワイヤーフレーム・既存サイトなどを基にコーディングをはじめますが 9割以上の確率で仕様の未定義や変更に直面します

フロントエンドの実装は柔軟に対応できるように進める必要があります


### `margin`と`padding`のおさらい

- `padding`
親要素が基準となり 子要素のサイズが小さくなるなどの影響を受ける場合があります

- `margin`
子要素が基準となり 親要素のサイズが大きくなるなどの影響を受ける場合があります

![paddingではなくmarginを使用した方がいい理由.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/345860/c3db96a6-1676-ebb0-66ad-d0281f152cba.jpeg)
> 画像引用元:https://ikumen-sim.net/margin-padding

### そもそも
Webページの最優先事項は 情報(文字や画像など)を 利用者にわかりやすく提供することです

### 故に
子要素のサイズは文字や画像サイズを基に設定しているはずなので
親要素か子要素のサイズを変更しないといけない場合は 親要素を変更させるべきなのです

## とはいえ
`padding`には複数の子要素との間の距離を一度に設定できるというメリットがあります

## 終わりに
状況によって最適な答えは違うと思いますので 特に制約がないときの指標にしてください
Laravelを調べる：Docker起動編

# Laravelを調べる： Docker起動編

2021/05/09 : ただいま編集中です!

## 環境


|Name           |Version                     |
|---------------|----------------------------|
|OS             |macOS Catalina (ver 10.15.7)|
|docker desktop | version 3.2.2              |


## 準備

Docker Desktopがインストールされていれば、以下のコマンドで使い始めることが可能。（簡単！）

```bash
# mysql、pgsql、mariadb、redis、memcached、meilisearch、selenium、mailhog
# default : mysql、redis、meilisearch、mailhog、selenium
$ curl -s "https://laravel.build/example-app?with=mysql,redis" | bash
$ cd example-app
$ ./vendor/bin/sail up
```


## sailコマンドでの実行/停止

### 実行

```bash
# フォアグラウンドで実行
$ ./vendor/bin/sail up
#
# バックグラウンドで実行
$ ./vendor/bin/sail up -d
```

### 停止

```bash
$ ./vendor/bin/sail down
```

## 動作確認

`./vendor/bin/sail up` を実行した状態で http://localhost/ にアクセスするとLaravelのページが表示される。




## 展開されたファイル

mysql等の設定は`./.env`に含まれている。

* `./.env`

```bash
$ cat .env
APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:+...
APP_DEBUG=true
APP_URL=http://example-app.test

LOG_CHANNEL=stack
LOG_LEVEL=debug

DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=example_app
DB_USERNAME=sail
DB_PASSWORD=password
.
.
.
```



展開されたファイルのうち、頻繁に使うと思われるディレクトリ (app, config, database, routes) の内容をリストアップしておく。

すでに app/Models/User.php と 2014_10_12_000000_create_users_table.php がある点に注意。
このままmidgrateするとデフォルトの状態でUserテーブルが作られる。

```bash
 % tree app
app
├── Console
│   └── Kernel.php
├── Exceptions
│   └── Handler.php
├── Http
│   ├── Controllers
│   │   └── Controller.php
│   ├── Kernel.php
│   └── Middleware
│       ├── Authenticate.php
│       ├── EncryptCookies.php
│       ├── PreventRequestsDuringMaintenance.php
│       ├── RedirectIfAuthenticated.php
│       ├── TrimStrings.php
│       ├── TrustHosts.php
│       ├── TrustProxies.php
│       └── VerifyCsrfToken.php
├── Models
│   └── User.php
└── Providers
    ├── AppServiceProvider.php
    ├── AuthServiceProvider.php
    ├── BroadcastServiceProvider.php
    ├── EventServiceProvider.php
    └── RouteServiceProvider.php

% tree config
config
├── app.php
├── auth.php
├── broadcasting.php
├── cache.php
├── cors.php
├── database.php
├── filesystems.php
├── hashing.php
├── logging.php
├── mail.php
├── queue.php
├── services.php
├── session.php
└── view.php

% tree database
database
├── factories
│   └── UserFactory.php
├── migrations
│   ├── 2014_10_12_000000_create_users_table.php
│   ├── 2014_10_12_100000_create_password_resets_table.php
│   └── 2019_08_19_000000_create_failed_jobs_table.php
└── seeders
    └── DatabaseSeeder.php

% tree routes
routes
├── api.php
├── channels.php
├── console.php
└── web.php
```

## 起動してからsailコマンドでできること

### シェルを起動

```bash
$ ./vendor/bin/sail shell
```


### mysqlにログイン

```bash
$ ./vendor/bin/sail mysql
```

## 参考

[Laravelとの出会い](https://readouble.com/laravel/8.x/ja/installation.html)
【migrationエラー】RuntimeException : Changing columns for table...の解決法

<h1>エラー文</h1> 

```
RuntimeException  : Changing columns for table "(テーブル名)" requires Doctrine DBAL; install "doctrine/dbal".

```

<h1>原因</h1> 

このようなエラーはnull設定などでカラム削除時に起きてしまうものだと思われます。
Laravelの公式にも書いてありますが、
カラムを削除する際はマイグレーションする前に「composer.json」ファイルにとある依存パッケージを追加する必要があるとのことです。
追加して更新するだけなので、軽く以下にまとめます。


<h1>解決法</h1> 

エラー文通り以下の作業を行います。
<h2>①　「composer.json」ファイルにdoctrine/dbalを追加</h2>




```php:composer.json
{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The Laravel Framework.",
    "keywords": [
        "framework",
        "laravel"
    ],
    "license": "MIT",
    "require": {
        "php": "^7.1.3",
        "fideloper/proxy": "^4.0",
        "laravel/framework": "5.8.*",
        "laravel/tinker": "^1.0",
        "doctrine/dbal": "v2.4.2"     <-これ
    },
    "require-dev": {

         ---以下省略---
```

あとはcomposerをアップデートするだけ。

```
composer update
```

以上で正常にマイグレーションできるかと思います。
一応自分用メモのつもりですが、何かの参考になれば幸いです！


<h1>参考にしたサイト</h1>
•　 [composer =laravelに依存関係をインストール](https://www.it-swarm-ja.com/ja/php/composer-laravel%e3%81%ab%e4%be%9d%e5%ad%98%e9%96%a2%e4%bf%82%e3%82%92%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88%e3%83%bc%e3%83%ab%ef%bc%88doctrine-dbal%ef%bc%89/1045021324/)
•　 [Laravel 5.8 データベース：マイグレーション](https://readouble.com/laravel/5.8/ja/migrations.html)
<button>でhref=が使えない！？？【解決】

<h2>はじめに</h2>

こんにちは、超初学者のなかむーです。
スクールで学んだ知識や経験などを記事を通してアウトプットしています。
今回は「buttonタグにリンク移動できるのか？」というタイトルですが、
結論から言うと<a>Yes</a>です！

<h2>< a > と href="#" </h2>
<b>a タグ</b>では以下のようにすることで遷移できる。

```php
<a href="signup">新規登録</a>
```
"/signup"でも遷移できます。

<h2>< button > と href="#"</h2>
<b>buttonタグ</b>では以下のようにすることで遷移できる。

```php
<button onclick=location.href="signup">新規登録</button>
```

onclick=location.を後ろに合体させるだけですね！
そして、これはJavaScriptで使われているものらしいですね。
aタグでは <b>href属性</b>（HTML）
buttonタグでは <b>onclick属性</b>（JavaScript）
フォームの中でリンク移動が可能になるので、便利だなぁと感じました。🌝

![スクリーンショット 2021-04-28 13.39.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1178769/b8689949-0d9c-1099-2361-4d94ae0e5ff5.png)
引用 ： [HTMLでbuttonタグを使ってリンクを貼る方法を現役エンジニアが解説【初心者向け】](https://techacademy.jp/magazine/24552)

ちなみに
<b>href</b> は「エイチレフ」と読むみたいです。
恥ずかしながら、この課題に出会うまで知りませんでした...笑
<br>
至って簡単で単純ですぐ終わってしまいますが、実際に使用したところです！何かの参考になれば幸いです。🙇‍♂️

```php

<div class="row justify-content-center mt-5">
    <div class="col-4 text-center">
        <h3>まだアカウントを<br>お持ちでない方はこちら</h3>
        <button type="button" class="btn btn-primary mt-5" onclick=location.href="signup" style="width:120px;height:50px">新規登録</button>
    </div>
    
    <div class="col-4 text-center">
        <h3>すでにアカウントを<br>お持ちの方はこちら</h3>
        <button type="button" class="btn btn-primary mt-5" onclick=location.href="login" style="width:120px;height:50px">ログイン</button>
    </div>
</div>

```

<h2>参考文献</h2>
•　 [HTMLでbuttonタグを使ってリンクを貼る方法を現役エンジニアが解説【初心者向け】](https://techacademy.jp/magazine/24552)
MySQLのDB確認・作成コマンド【一覧】

mysqlに関するコマンドを毎度のこと調べてたので、『mysqlならここからコピペや！！』って感じで、自分用に見やすくまとめてみました。
要するに“コピペ用”です😎

<h1>MySQL接続コマンド</h1>
🟩 MySQLのサービスに入る

```
mysql -u root -p
```
🟩 入れなかった場合

```
//mysqlの起動
sudo service mysqld start

//MySQLの再起動
sudo service mysqld restart

//MySQLの確認
sudo service mysqld status

//MySQLの停止
sudo service mysqld stop
```

<h1>MySQLデータベースの作成 ・ 削除</h1>
🟧 <b>データベース</b>の作成と削除

```
//データベースの作成
create database データベース名;

//データベースの削除
drop database データベース名;
```

🟧 <b>その他</b>の作成と削除

```
//テーブルの作成
create table テーブル名(カラム名 データ型, カラム名 データ型);

//テーブルの削除
drop from テーブル名;

//データの削除
delete from テーブル名;
```
<b>（注意）</b>
<b>ハイフン（ - ）</b>が入るものは作れない。
<b>アンダーバー（ _ ）</b>ならOK。

<h1>MySQLデータベース確認</h1>
🟦 <b>データベース名</b>一覧表示（テーブルも同様）

```
show databases;
```
🟦 現在のデータベース表示

```
select database();
```
🟦 データベース内の<b>テーブル</b>一覧表示

```
show tables from データベース名;
```
🟦 データベース内の<b>カラム</b>一覧表示

```
show columns from テーブル名 from データベース名;
```

<h1>MySQL格納データ確認</h1>
🟫 データベースに接続する

```
use データベース名;
```

🟫 格納データを表示する

```
select * from テーブル名;
```


<br>
自分用にまとめたものですが、何かの役に立てば幸いです！😆
【Android】UNITテスト集

サーバーサイドのバックエンドでも Java, Kotlin での実装はされている。
しかし、Android は OS 特有の機能が多いのでバックエンドの Java, Kotlin にはない実装をすることもある。
Android で重要になりそうな UNITテスト（テスト自動化）のまとめを作ってみた（今後も更新予定）

# ウィジェット
https://qiita.com/HanaleiMoon/items/4a912edf77cd009aadcb

# SDKバージョン
https://qiita.com/HanaleiMoon/items/2484db9fe85db5379167

# MVVM
https://qiita.com/HanaleiMoon/items/375e42a9fc5e635d02c9

# 最後に
機能の実装だけではなく、テストをしっかり書くことも重要！
【SPA】Nuxt.js,TypeScript,AWS,graphQLで作るインスタクローンアプリ

# 目次
1. 作品リンク
1. 作成目的
1. 使用技術
1. アプリの使い方

# 1.作品リンク
amplifyにてホスティングしました。
https://master.d2qrnepigha0wa.amplifyapp.com/
# 2.作成目的
- 学習のアウトプット
- ポートフォリオとしての使用

# 3.使用技術

#### フロントエンド
- HTML/CSS
- TypeScript
- Nuxt.js（SPAモード）
- Vuetify（UIフレームワーク）
- ESLint/Prettier（コード解析ツール）

#### バックエンド・インフラ
- Amplify(インフラ構築)
- GraphQL(API呼び出し)
- AppSync(API管理)
- DynamoDB(データベース)
- S3(画像ストレージ)
- Cognito(ユーザー認証)
- GitHub(バージョン管理)

#### インフラ構成図
![スクリーンショット 2021-05-08 16.09.50.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610135/46ae08c2-7ce5-8ae6-6376-e017d634a94e.jpeg)

#### ER図
![スクリーンショット 2021-05-08 16.14.46.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610135/8db58d05-c110-3316-1654-20fdaf0745ab.jpeg)


# 4.アプリの使い方

| 機能名 | 説明 | 
| :-- | :-- |
| ユーザー機能 | 新規登録・メールアドレスによる確認・登録内容変更・アイコン登録・ログイン・ログアウト・ゲストユーザー |
| 投稿機能 | 投稿、編集、削除、画像複数枚登録 | 
| コメント機能 | 投稿に対してコメント投稿 | 
| いいね機能| 投稿をいいねできる | 

### ①ユーザー機能
#### 登録・編集
ユーザー名・メールアドレス・パスワードでアカウントを作成します。
同時にアイコンの登録も可能です。
パスワードとメールアドレスはcognitoのユーザープールにて管理され、データベースに保存されません。

登録の際に入力いただいたメールアドレスに、確認コードを送信し、
確認が完了すると機能をお使いいただけます。
（ここで確認しなかった場合、ログインの際に確認機能を挟むようになっています。）
会員登録
![会員登録.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610135/80a94815-174d-c520-e494-f5077aa6750c.gif)
ログイン
![ログイン.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610135/9c237567-c152-7f70-56e2-09a6671ee77d.gif)

ゲストユーザーでのログインも用意しました。
![ゲスト.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610135/06c4606e-0cd7-1f10-7136-bb2db9a13ad5.gif)





#### ゲストユーザー
ログイン画面・アカウントの新規登録画面に、ゲストログインのボタンを配置し、気楽に使用できるようにしました。

### ②.投稿機能
投稿の作成、削除は即時に反映されます。
![投稿作成.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610135/23b84d6f-278f-85ee-38b6-ac3ea511388f.gif)
![削除.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610135/f17a49ce-1c6b-a242-dd38-ce356bdd9205.gif)
画像は最低１枚は登録必須になります。
登録枚数の制限はありません。


### ③.いいね機能

投稿に対し、いいねできます。自分がいいねしている場合は、いいねを外すことももちろん可能です。
![いいね.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610135/41155dd1-fd1f-5be6-6d81-a58adb4a7e68.gif)


### ④.コメント機能

投稿詳細ダイアログから、投稿に対してコメントできます。

![コメント.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610135/aa59fd21-e0a4-c230-38d9-efb874f45764.gif)
laravelで短いUUIDをprimaryキーとして設定する。

## ライブラリインストール。下記の二つ。

```
composer require goldspecdigital/laravel-eloquent-uuid　//これはバージョンによって変える。
composer require pascaldevink/shortuuid
```

## マイグレーションの変更

```php:usersテーブルのマイグレーション
//$table->id();
$table->uuid('id')->primary();
```

## モデルファイルの継承元の変更

Userモデルは下記のように。

```php:User.php
//use Illuminate\Foundation\Auth\User as Authenticatable;
use GoldSpecDigital\LaravelEloquentUUID\Foundation\Auth\User as Authenticatable;
```

それ以外は下記のように変更。

```php:Userモデル以外。
use GoldSpecDigital\LaravelEloquentUUID\Database\Eloquent\Model;
```

ちなみに下記が便利コマンド。

```:これでUUID用のモデルが作られる。
php artisan uuid:make:model [モデル名]
```

下記のように書けば作成時にuuidが設定される。

```php:コントローラー
use GoldSpecDigital\LaravelEloquentUUID\Database\Eloquent\Model;
use Illuminate\Support\Str;
use PascalDeVink\ShortUuid\ShortUuid;

 public function __construct(array $attributes = [])
    {
        parent::__construct($attributes);

        // newした時に自動的にuuidを設定する。
        $uuid4 = Str::uuid();
        $shortuuid = new ShortUuid();
        $su_string = $shortuuid->encode($uuid4);

        $this->attributes['id'] = $su_string;
    }
```
LeetCodeWeekly240 C 1856. Maximum Subarray Min-Product ヒストグラム内の最大長方形の変形

https://leetcode.com/contest/weekly-contest-240/problems/maximum-subarray-min-product/

# 題意

- 配列の連続した部分列の和 $ \times$ その区間の最小値　の最大値を求めよ
 
例: $[2,3,3,1,2]$の場合、[3,3]は和6 $times$ min3で18が答えとなる

# こう考えた
ヒストグラムの最大長方形問題に帰着できます。次に図を示します。
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30938/5836dd89-ccd7-03ab-caab-20bc4bc0c86a.png width=70%> 
上の絵が$[2,3,3]$を選択したとき。下の絵が$[3,3]$を選んだ時です。

ある要素$x$があった時、和がとられることを考えると、長さ$1$の長方形が$x$あると考えてよいです。

# 実装
さて、要素の数が十分に小さければ、図のようなヒストグラムを実際に配列としてつくって計算しても良いですが、大きい数だと配列が作れません。そのため、区間の和を$O(N)$で求められるように累積和を作ります。

ヒストグラムの最大化の面積を求める際、通常は

- ある部分の高さ $ \times $ 区間のindexの差
を取りますが、今回は、

- ある部分の高さ $ \times $ 区間のindexの間の累積和
を使います。

```Python
############################################
from collections import deque
from typing import Deque
from typing import List, Tuple
from pprint import pprint


class Rect:
    def __init__(self, height, pos):
        self.height = height
        self.pos = pos
def solve(h: [int]):
    # 拾い物 の　ヒストグラム最大化 ライブラリ
    stack: Deque[Rect] = deque()
    histogram = h + [0]
    max_area = 0

    # ここに累積和を足す
    import itertools
    def createSDAT(l):
        return list(itertools.accumulate(itertools.chain([0], l)))
    sdat = createSDAT(h)
    squery = lambda a, b: sdat[b] - sdat[a]  # query [a, b)

    for idx, height in enumerate(histogram):
        if not stack or stack[-1].height < height:
            stack.append(Rect(height=height, pos=idx))
        elif stack[-1].height > height:
            top = Rect(height=0, pos=0)
            while stack and stack[-1].height > height:
                top = stack.pop()
                # ここは通常、今の位置 - heightのposだが、ここを、その間のブロックの和にする
                #max_area = max(max_area, (idx - top.pos) * top.height)
                max_area = max(max_area, squery(top.pos, idx) * top.height)
            stack.append(Rect(height=height, pos=top.pos))
    return max_area
############################################
class Solution:
    def maxSumMinProduct(self, nums: List[int]) -> int:
        res = solve(nums) % (10**9+7)
        return (res)
```
https://leetcode.com/submissions/detail/490718390/
pandas.DataFrameのマルチラベルを簡単にバイナライズする方法

# はじめに
機械学習をしていると、付与ラベルをone-hotベクトルに変換する必要がよく発生するのですが、`pandas`の`DataFrame`と`scikit-learn`の`MultiLabelBinarizer`を使えば簡単に変換できることを知りました。備忘録として記事にします。

# 変換対象のデータ

以下の表データが格納されたcsvファイル（`sample.csv`）をone-hotベクトルとしてバイナライズすることを目指します。<strong>ラベルデータは、セミコロンがデリミターとして格納されていることを想定します。</strong>

| text | labels |
|:-:|:-:|
| あいうえお | ひらがな |
| カキクケコ | カタカナ |
| ドラえもん | カタカナ;ひらがな |

バイナライズ後のデータは以下の通りです。`labels`列のデータはリスト形式になっているので、簡単に機械学習器のターゲット変数に入力することが可能になります。

| text | labels |
|:-:|:-:|
| あいうえお | [1, 0] |
| カキクケコ | [0, 1] |
| ドラえもん | [1, 1] |

数行でマルチバイナライズされたone-hotベクトル列を作成することができました。

# ラベルデータのリスト化

リスト化はPythonの標準機能である`split`を使えば簡単にできます。

```python:
>>> df = pd.read_csv('sample.csv')
>>> df
    text     labels
0  あいうえお       ひらがな
1  カキクケコ       カタカナ
2  さしスセソ  ひらがな;カタカナ
>>>
>>> df['labels'] = df['labels'].apply(lambda x: x.split(';'))
>>> df
    text        labels
0  あいうえお        [ひらがな]
1  カキクケコ        [カタカナ]
2  さしスセソ  [ひらがな, カタカナ]
```

この時点で`labels`列に格納されているのは文字列ではなく配列になっています。

# マルチバイナライズ化

マルチバイナライズは、`scikit-learn`の`MultiLabelBinarizer`というクラスを使って行います。ラベルのリストは`mlb.classes_`という変数で確認することができます。

```python
>>> from sklearn.preprocessing import MultiLabelBinarizer
>>>
>>> mlb = MultiLabelBinarizer()
>>>
>>> mlb.fit_transform(df['labels'])
array([[1, 0],
       [0, 1],
       [1, 1]])
>>> mlb.classes_
array(['ひらがな', 'カタカナ'], dtype=object)
```

# Pandasに再格納

`zip`と`list`を使えば、`pandas.DataFrame`に再格納が可能です。

```python
>>> df = pd.DataFrame(list(zip(df['text'], mlb.fit_transform(df['labels']))))
>>> df.columns = ['text', 'labels']
>>> df
    text  labels
0  あいうえお  [1, 0]
1  カキクケコ  [0, 1]
2  さしスセソ  [1, 1]
```

# 参考文献
- [sklearn.preprocessing.MultiLabelBinarizer](https://scikit-learn.org/stable/modules/generated/sklearn.preprocessing.MultiLabelBinarizer.html)
Railsサーバー起動時にLoadErrorが発生した

いつも通り何気なくrails sでサーバー起動しようとした際、なぜかいきなりLoadErrorが表示されました。

色々なサイトを見ていると、pumaの再インストールやバージョンの書き換えなどで解決しているものもありましたが、私の場合は該当しませんでした。
とは言ってもとても簡単にエラー解決できたので、備忘録として残しておきます。

結論、 ApplicationsControllerがおかしくなっていたので、そこを修正すればきちんと起動するようになりました。

エラー内容を確認すると、「Unable to autoload constant ApplicationsController ~」となっていたので、 ApplicationControllerを一度確認しました。

すると一度目では発見できなかったのですが、よく見てみるとclass以降の表記が変わっていました。

```ruby:application_controller.rb
class ApplicationsController < ActionController::Base　
略
end
```
正しくは、

```ruby:application_controller.rb
#ApplicationsControllerのsを削除
class ApplicationController < ActionController::Base　
略
end
```

この修正によってきちんと起動できるようになりました。

なぜ書き変わっていたのかは不明のため、原因が分かる方いらっしゃれば教えていただきたいです。。。
【Unity/ShaderGraph】テクスチャをプロジェクタのように投影する(備忘録)

この記事にあるシェーダーをURPに移植した話です。

https://light11.hatenadiary.com/entry/2020/02/22/181705

移植後の動作
![ezgif.com-gif-maker__3_.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1317891/49c5c488-b430-e06a-f601-a7d2806ee5e4.gif)

データ

https://1drv.ms/u/s!Aut71f_-JhpUkoMzvd291b-uzSnKXw?e=go3gap

シェーダーそのものを編集して対応させる方法もあるとは思うのですが
自分はシェーダー言語がわからないので、ShaderGraphで再現します。
#スクリプト
スクリプト部分はそのまま使えそうです。
以下のパラメーターをシェーダーに送っています。
"_ProjectorMatrixVP"…VP行列(プロジェクション行列)
"_ProjectorTexture"…テクスチャ
"_ProjectorPos"…カメラの位置
#シェーダー
Unlitマスターをベースに再現していきますが
マスターの機能ですでに実行されているところと、
再現しなければいけないところを切り分けました。
![図2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1317891/ca2fdfd5-51c8-8ce2-333e-3b09e2a851eb.png)
元のコードの”unity_ObjectToWorld”は、”v.vertex”(オブジェクトスペースのポジション)をワールドスペースに変換するらしい。
ので、あらかじめグラフ側でワールドポジションを準備します。
①と②をなぜ別に処理しているのかはわかりません。
①部分はCPUで、②部分はGPUで処理されている？のかもしれないです。
今回は①②両方カスタムファンクションで行います。

完成したグラフは↓です
③の部分はもっといい書き方ありそう。
![図3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1317891/b2901597-1ecc-dbc9-3819-fca366287464.png)
![図4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1317891/49c4240f-3b12-0fbe-5e56-aae7455d95b0.png)


カスタムファンクションのコード

```ruby:VPtransform.hlsl
void VPtransform_float
(float3 _position,
	float4x4 _ProjectorMatrixVP,
    out float4 _projectorSpacePos,
    out float2 UV)
{
        float4 vertex;
        float4 projectorSpacePos;
        float3 worldPos;
        float3 worldNormal;

#if SHADERGRAPH_PREVIEW
        _projectorSpacePos= float4 (1, 1, 1, 1);
        UV = float2(1, 1);
#else
    projectorSpacePos = mul(_ProjectorMatrixVP, _position);
    projectorSpacePos = ComputeScreenPos(projectorSpacePos);
    projectorSpacePos.xyz /= projectorSpacePos.w;
    float2 uv = float2(projectorSpacePos.x, projectorSpacePos.y);
    _projectorSpacePos = projectorSpacePos;
    UV = uv;
#endif
}

```
OOUI（オブジェクト指向UI）デザインとは

## OOUIとは
- Object-Oriented-User-Interface
- 物・道具（名詞）を選んでからそれを使って、それに対して何かをする（動詞）という「人間の現実世界における自然な考え方・概念」と近い。

## OOUIで設計するポイント
1. オブジェクトの抽出
    1. 抽出した**名詞**を整理（粒度や名称を揃える）
    1. 名詞の関係性をつなげ、必要なオブジェクトを特定する
    1. オブジェクト、プロパティ、アクションに分けて整理する
1. ビューとナビゲーションの検討
1. アクションの検討

## OOUIで設計するメリット
- ユーザーにとってのメリット
    - 操作の自由度が高い
    - 楽しさ・学習意欲につながる
-　開発側にとってのメリット
    - フロントエンドとバックエンドの連携もスムーズになる
 -　開発側にとってのメリット
    - フロントエンドとバックエンドの連携もスムーズになる

## V.S. タスク指向UI
- オブジェクト指向UIーータスクが顕在化した状態
- タスク指向UIーータスクが潜在化した状態
    - オブジェクトが単一な場合
    - ユーザーの行動が決まってない場合

#### 参考資料
1. [最近噂のOOUI、オブジェクトベースのUIとは何だ!?](https://www.cresco.co.jp/blog/entry/10582/)
1. [OOUI(オブジェクト指向UI)とは？デザイナーなら知っておきたいメリットや設計方法まで解説](https://nijibox.jp/blog/ooui/)
1. [オブジェクト指向UI（OOUI）デザインと、タスク指向UIをかけ合わせたデザインの最適解｜セブンデックス](https://sevendex.com/post/3676/)
PhpStromで、リモートブランチとローカルブランチの差分を確認する。

Git -> Fetchを選択。

これでリモートのMasterブランチの最新情報を取得する。

もちろん、Fetchしてもローカルのmasterブランチには影響ないのでご安心。

![12.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99731/26be1eab-f5a8-b346-d2a6-8572125a2283.jpeg)

では、リモートのMasterブランチはどこに反映されたのか見ていこう。

ブランチ一覧からRemote/originに最新情報が反映されている。

![github_test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99731/3f1c0d39-112d-0e3e-4243-49baf7a4ec44.png)

ローカルブランチのMasterブランチにチェックアウトしてから

Remote/origin/masterを選択して右クリックから

Compare is currentを選択すると

リモートブランチにはあって、ローカルブランチにないものがわかる。

Show diff with Working treeを選択すると

双方の変更の差分が表示されます。
エクセルのデザイン性のある、表・グラフ

エクセルのデザイン性のある、表・グラフを作る
参考になるサイトをメモ


https://tsutawarudesign.com/miyasuku1.html

![スクリーンショット 2021-05-09 15.44.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050099/8c943a89-7fd2-1305-acca-47d389f4a88c.png)


https://forest.watch.impress.co.jp/docs/serial/exceltips/1301173.html

![スクリーンショット 2021-05-09 15.45.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1050099/d7d22664-a55c-9dfa-f220-ffdbd6983ce5.png)
マイコンを作る with RISC-V(１日目)

# はじめに
![RISC-V.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641105/40a69d00-764b-7ff7-83a7-46c411ad08d3.png)
この記事では、話題のRISC-VというISA(Instruction Set Architecture)を用いてマイコンを作っていきます。
本記事では完成したプログラムを乗せるだけではなく、初学者の筆者が試行錯誤しながら実装する過程をメインに書いていきます。なので間違いは優しく指摘してくれるとありがたいです。


# 開発にあたって
## 開発動機
私が通っている某工業大学ではプログラミング創造演習という、自由に課題を設定することができる授業があり、なんと６単位ももらえるらしい！そして手元にはArty-S7-50というFPGAがある。
どうしてCPUを作らないことができようか、いやできない！


## 開発手法
私は半導体製造装置を持っていないので、CPUをシリコンから作ることはできません。なので、FPGA(Field Programable Gate Array)という自由に回路を構成することができるICを用いてマイコンを作っていきます。

開発環境は手持ちのFPGAボード(Arty S7-50)に合わせてViviadoを利用していきます。
![S__4464642.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641105/7da3413b-61d6-5216-771d-78ae38da4e9b.jpeg)

# 知識
##CPUについて

[「CPUの創りかた」]
(https://www.amazon.co.jp/dp/B08639XM13/ref=cm_sw_r_tw_dp_FHZJ9EBBGFHT7M7PAB0R)
[「コンピューターの構成と設計」](https://www.amazon.co.jp/dp/4822298426/ref=cm_sw_r_tw_dp_DQCK90F75SS2G1FKVFG3)

　最初に紹介するのは「CPUの創りかた」です。
　4bitのCPUを実際に組み立てながらCPUの基本的な構造や仕組みを理解することができます。
また、とてもソフトな書き方や内容なので着実に進められます。次に紹介する書籍を読み始める前に読破しておくとスムーズに理解を深めることができると思います。

　次に紹介するのは「コンピューターの構造と設計」です。通称「パタヘネ」本。CPUアーキテクチャに関する最も有名な教科書で、上下２巻から構成されています。価格は結構高くて、新品を買うと１万円ぐらいします。
　内容は、パイプライン処理やMIPS32実装を上で、下ではキャッシュやマルチコア、GPUの解説があり、有名書の名に恥じない重厚長大な構成です。

##その他の書籍
他には開発言語Verilogに関してはトラ技
の[「わかる VerilogHDL入門」](https://www.amazon.co.jp/dp/4789837564/ref=cm_sw_r_tw_dp_5YK2P0J6J6S498DTG4ZH)
そしてRISC-Vについては[RISC-V原典](https://www.amazon.co.jp/dp/4822292819/ref=cm_sw_r_tw_dp_VX47VYR7WYC8Y3M54WZS)を参照を参照します。

#次回
次回はCPUについて実際に設計を行っていきます。
【要注意】node.jsでActive directoryライブラリによるAD検索結果をテキストとして利用出来ない

## やりたいこと
PromiseオブジェクトをStringに変換して再利用したいのです。再利用の目的はHTMLやMarkDownのテキストの中に埋め込んで使うことです。

しかし、わたしは実力不足でこれができずに、貴重な時間を無駄にしてしまいました（ ;  ; ）

## 困ったこと
PromiseオブジェクトをStringに変換出来ません。必ず`Converting Object Promise to String in Javascript`エラーが発生します

```JavaScript:Activedirectoryライブラリ利用
const ActiveDirectory = require( 'activedirectory' )
const AD = {
  config : {
      url         : 'LDAP://hogehoge.ad.foo.baa.jp'
    , baseDN      : 'dc=ad,dc=foo,dc=baa,dc=jp'
    , username    : process.env.ADUSER
    , password    : process.env.ADPASSWORD
    , secure      : true
    , timeLimit   : 3000
    , attributes  : { user:[ 'sAMAccountName', 'displayName', 'department', 'mail' ] }
  }
  ,
  query : '(mail={{mailAddress}})'
}
function getDepartmentFromAD(mailAddress){
  return new Promise((resolve,reject) => {
    ad.find(AD.query.replace('{{mailAddress}}',mailAddress), (err, results) => {
      if ((err) || (! results)) { console.log('ERROR : ' + JSON.stringify(err)); return }
      resolve( results.users[0].department ) 
    })
  })
}
function getIdNameMarkdownFromDepartment(department){
  return new Promise((resolve,reject) => {
    resolve(department.replace(' ','|') + '|' + '|')
  })
}
const createBelongsIdName = async  function( kind, mailAddress, markdownList ) {
  try {
    if( kind == INFO.account.kind.employees ) {
      getDepartmentFromAD(mailAddress).then(getIdNameMarkdownFromDepartment).then((idNameMarkdown)=>{
        setTimeout(()=>{markdownList += idNameMarkdown},INFO.timeOut)
      })
    } else {
      markdownList += '-|' + '-|'
    }
  } catch( err ) {
    console.error( 'createBelongsIdName() : ' + err )
    return null;
  }
  return markdownList
}
```

## エラーの発生箇所

```Javascript:返されたPromiseオブジェクトをString型の変数markdownListに格納
markdownList += idNameMarkdown
```

## エラーの内容
String型の`markdownList`にPromiseオブジェクト型の`idNameMarkdown`代入できないと言うエラーが出ます。色々試行錯誤しましたが、Promiseオブジェクト型をString型に型変換することはできないようです。

GitHubなどに公開されている多くのコードが`console.log()`メソッドでPrpmiseオブジェクトが返した値をコンソールに表示するだけです。わたしがしたいのはPromiseオブジェクトをString型に型変換して再利用することです。

## わたしの解決策（逃げ）
node.jsを使うのを諦めて、PythonのActivedirectoryライブラリを利用しました。上記のPromise問題は起こらず、すんなり解決しました。しかし、あくまでもこれは代替手段の逃げです。個人的にはかなりモヤモヤしています。

## お願い
どなたか良い解決策をご存知ないでしょうか？
【初心者向け】Access-Control-Allow-Originの使い方と気をつけるべきポイント


## どういうケースで使うのか？

**フロントエンドから呼び出されるAPIを作る時に、レスポンスヘッダーに追加する。**

Reactなどのブラウザ上のスクリプトから、別のオリジン（httpsスキーム + ドメイン + ポート）のAPIへアクセスすることは、ブラウザが禁止している。

レスポンスヘッダーに `Access-Control-Allow-Origin` を指定することで、アクセスが可能になる。


## 指定する値の種類


アクセスを許可するオリジンを、`https://example.com`のみに指定。

```
Access-Control-Allow-Origin: https://example.com
```

どのオリジンからも叩けるように指定する（オープンなAPI等）

```
 'Access-Control-Allow-Origin': '*',
```
 

## 気をつけるべきポイント

別のオリジンからのアクセスを禁止しているのはブラウザなので、ターミナルなどからのアクセスは、`Access-Control-Allow-Origin` では制限できない。

例えば、curl で叩かれるとアクセスできてしまう。

```
curl your-api.com
```

ブラウザはリクエストヘッダーの`Origin`の値と、レスポンスヘッダーの`Access-Control-Allow-Origin`の値でアクセスの許可を判定しています。

## 参考
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
閑古錐：awk で CSV ファイルのデータをテンプレートに埋め込んで行毎に出力する（基本編）

## はじめに
CSVファイルのデータからSQL文を生成したり、Scriptを生成したくなることがあります。
そんな時、私は生成したい文のひな型を用意して、awkでデータを読み込みながら、ひな型に埋め込んだ記号と置き換えて出力する、ということで、欲しいSQL文やScriptを生成しています。

## データファイル
データはカンマ区切りで、1行目にカラム名称を記載する。
2行目以降はデータ。

```TEXT:data.txt
id,name,birthday,gender
1,test1,2000/1/1,0
2,test2,2001/3/1,1
```
## テンプレート
ひな型をtemplate.txtに格納しておく。
ひな型で、データと置き換える箇所は、{カラム名}という書式にする。

```SQL:template.txt
insert into users(id,name,birthday,gender)
 values({id},'{name}','{birthday}',{gender});
```

## awkスクリプト
テンプレートは、あらかじめコマンドラインで変数templateに格納しておく。
データの1行目はカラム名なので、これをMAPに保存しておく。
カラム数をMAXNFに記録する。MAXNFよりカラム数が多い場合に置きかえ処理をおこなう。(データがない行は処理しない)
テンプレートにある{カラム名}(`"{"MAP[i]"}"`)をカラムのデータ(`$i`)で置き換える。

```awk:conv.awk.txt
## データファイルの1行目のカラム名を保存する
NR==1{
  for(i=1;i<=NF;i++) {
    MAP[i]=$i;
  }
  MAXNF=NF
}
## データファイルの2行目以降のデータ処理
NR>1{
  t=template ## テンプレートはコマンドラインで予め変数に格納しておく
  if(MAXNF<=NF) {
    for(i=1;i<=MAXNF;i++) {
      ## テンプレートを置き換える
      gsub("{"MAP[i]"}",$i,t);
    }
    ## テンプレート置き換え後の値を出力する
    print t;
  }
}
```
## 実行と結果

| 引数 | 意味 |
|:-|:-|
| -F, | カンマ区切りであることを指定する |
| -v template="$(cat template.txt)" | テンプレートを変数templateに格納する |
| -f conv.awk.txt | awkスクリプトファイルを読み込む |

```bash
$ awk -F, -v template="$(cat template.txt)" -f conv.awk.txt data.txt
insert into users(id,name,birthday,gender)
 values(1,'test1','2000/1/1',0);
insert into users(id,name,birthday,gender)
 values(2,'test2','2001/3/1',1);
```
ORACLEのクエリのDATE型に任意の日本語の書式を含める場合：”で囲む

## やりたいこと
例えば Oracleの **TO_CHAR()** 関数でDATE型の値を任意の日本語の書式、例えば **YY年MM月** などに変換したいです。

## 方法
場合には以下のように任意の日本語の書式部分の **年** と **月** を **"** で囲みます

```SQL:NG：エラーになります
TO_CHAR(HOGE_DATE, 'YY年MM月DD日')
```

```SQL:OK
TO_CHAR(HOGE_DATE, 'YY"年"MM"月"DD"日"')
```

もしも任意の書式を使っていなければエラーにはなりません

```SQL:OK
TO_CHAR(HOGE_DATE, 'YY-MM-DD')
```
PhpStromでrebaseする。

RebaseはMergeに似てる。

「masterブランチ」から「featureブランチ」を作成して新しい機能を実装する。

featureブランチには、①add_button、②add_textfieldという２つのコミットがある。

![7.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99731/de2b6864-ac0a-da10-7c83-54cafe8b080d.jpeg)

masterブランチに2つのコミットを移動させたい。

「master」ブランチにrebaseしてあげればいい。

「master」ブランチをチェックアウトして Git -> Rebaseを選択

![8.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99731/9909a4a9-542c-bb94-f6ce-e12ca899e202.jpeg)


![10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99731/72027b77-7c56-7277-bef9-0192ef012a45.jpeg)


![11.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99731/ab9c0450-5cec-92e6-c0c5-e3880209d8fc.jpeg)

マージよりもコミットの履歴がきれいになる。
【Ruby】String#tr メソッドについて覚え書き

# String#tr メソッド
## 文字列に含まれる文字の置き換えができる
```ruby
puts "abcabc".tr("a", "z") 
# =>"zbczbc"
```

## 検索する文字は範囲指定もできる
```ruby
puts "abc".tr('a-z', 'A-Z')  
# => "ABC"

# シーザー暗号（アルファベットを3文字分ずらす）の解読
puts "ORYV".tr("A-Z", "D-ZA-C") 
# => "RUBY"

# 任意の文字数分ずらしたい場合
chars = [*"A".."Z"]
keyword = "RUBY"
encrypted_keyword = keyword.tr(chars.join, chars.rotate(-5).join)
# Array#rotateで任意の分だけ文字をずらせる。
puts encrypted_keyword
# => "MPWT"
```

参照
https://docs.ruby-lang.org/ja/2.6.0/method/String/i/tr.html
https://docs.ruby-lang.org/ja/2.6.0/method/Array/i/rotate.html
https://docs.ruby-lang.org/ja/latest/method/Array/i/join.html
https://qiita.com/ya-maruchoba/items/9e26c971fbaffb77c7d2
WordPressの投稿者情報をget_the_author_meta()関数で取得する

WordPressの投稿者情報を取得するためには

```php
<?php get_the_author_meta( $field, $user_id ); ?>
```

で取得できる． $fieldは必須引数で$user_idはオプショナル．$user_idが指定されない場合，現在のユーザーが取得される．

## $field

$fieldは管理画面が日本語なので指定方法がわからかった. $fieldは下記で指定する

```
ID
user_nickname       | ニックネーム
user_email          | メール
user_url            | サイト
user_description    | プロフィール情報
user_firstname      | 名
user_lastname       | 性
```


## 参考にしたサイト

https://wp-kama.com/function/get_the_author_meta
超初心者が気を付ける読みやすいコーディング

こちらを読みました。
[超初心者が気を付けたいプログラムコードの書き方 : 読みやすいコーディングのために心がける７つのこと](https://www.amazon.co.jp/%E8%B6%85%E5%88%9D%E5%BF%83%E8%80%85%E3%81%8C%E6%B0%97%E3%82%92%E4%BB%98%E3%81%91%E3%81%9F%E3%81%84%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E6%9B%B8%E3%81%8D%E6%96%B9-%E8%AA%AD%E3%81%BF%E3%82%84%E3%81%99%E3%81%84%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AB%E5%BF%83%E3%81%8C%E3%81%91%E3%82%8B%EF%BC%97%E3%81%A4%E3%81%AE%E3%81%93%E3%81%A8-%E5%B1%B1%E6%9C%A8-%E3%82%AB%E3%82%BA-ebook/dp/B084VLYT3K)

### 分かりやすい名前を付ける

- 名前から連想しやすいルールで付ける
    - is ~
    - Can~
    - Exists(存在するか？)
    - should~
- 名前付けサイトを使う　[https://codic.jp/](https://codic.jp/)
- 名前から処理が分かるように情報を入れる  
例）printPersonより、printNameの方が情報がある  


### コメント

- 明らかにわかることを書かない
- 逆に何かわからないものは書いた方がいい
 - そもそもわからないものを作らない方がいいけど。

### ネストを浅くする

- まとめられる条件はまとめる
- 最初の条件で一致した場合すぐ抜けるなら、一番最後にreturnするのではなく、最初の条件の時点でreturnする。
    - continueやbreak等も使う。
    - このように以降の処理に進む必要のない条件を先に判定するものを「ブロック節（ガード節）という。
- メソッド化する

### スコープ

- 一部でしか使わない変数は最初に定義せず、スコープ内で定義する。

### メソッド化

- 同じ処理をするならメソッド化する
- 長すぎ注意。40行以内にできるだけ納める。
- 長すぎた場合は一部外に出す。

### コーディング規約を守る

- キャメルケース、パスカルケース、スネークケース…
    - メソッドと変数で違うとかもある。
- 全員が守ることによって一貫性を持たせる。
フォールバックコンテンツ


<slot></slot>の中身で表示されるものがない場合には以下のように表示されます

```vuejs
<slot>デフォルトのコンテンツ</slot>
```

![20210509-151027.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/65a063fb-4151-528a-edfd-620db0e43e43.png)
Python Streamlitで任意の書式を設定したい場合：write()関数でunsafe_allow_html引数をTrueとする

## はじめに
　SteamlitはPythonによるデータの分析結果を爆速で見える化・共有化するのに便利です。しかし、便利さゆえにかゆいところに手が届かない点が見えかくれする場合も少なくありません。

## やりたいこと
　例えば、わたしの場合、「エラーメッセージを表示させるために目立たせたないな」とか「ここの表示はインタラクティブに変わるので色を変えたいな」とかの贅沢な欲求が芽生えました。

## 方法
　公式のAPIドキュメントをあさったのですがなかなか見つけれない中、とある英語のブログにて解決策を提示して下さっている方がいました。

　結論は至って簡単です。

　**write()** 関数に引数 **unsafe_allow_html** を追加し、**True** にしてあげるだけです。

　これで、表示したい部分にHTMLタグを指定するとタグのプロパティで設定した表示方法がそのまま画面に反映されます。

## コード例
```Python:任意の書式を設定したい場合の書き方
streamlit.write(<TAG style="hoge:bar">ホゲホゲ</TAG>, unsafe_allow_html=True)
```
　Pandas🐼のDataframeの中身が無い場合のエラーメッセージを装飾する場合はこんな感じになります。

```Python:実装例
import streamlit as st
import pandas as pd
def check_df(df):
  if df.empty:
    st.write('<span style="color:red;background:pink">該当するデータがありません・・・・</span>',
              unsafe_allow_html=True)
    return False
  else:
    return True
```

## 結果
上記のコード実行した例を以下に示します。少し派手ですが、標準のStreamlitの画面には無いような文字色とか文字背景色を実現できています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/124810/335eef2d-ec5f-3d26-310e-645f3547ef99.png)
親コンポーネントから子コンポーネントへhtmlごと送る



```vuejs:App.vue
<template>
<div>
  <LikeHeader>
    <h1>トータルのいいね数</h1>
    <h2>{{ number }}</h2>
  </LikeHeader>
  <LikeNumber v-bind:total-number="number" @my-click = "incrementNumber">></LikeNumber>
  <LikeNumber v-bind:total-number="number"></LikeNumber>
</div>
</template>

<script>
import LikeHeader from "./components/LikeHeader.vue";

export default {
  data() {
    return {
    number: 14
    };
  },
  components: {
    LikeHeader
  },
  methods: {
    incrementNumber(value) {
      this.number = value
    }
  }
};
</script>

<style scoped>
  div {
    border: 1px solid blue;
  }
</style>
```


```vuejs:LikeHeader.vue
<template>
 <div>
   <slot></slot>
 </div>
</template>
```

（親コンポーネント）子コンポーネントタグの中にHTMLごと入れてしまう
（子コンポーネント）<slot>タグで受ける
相対的リスク回避度の推定

株式投資をする投資家にとってのリスク回避度の測定方法の一つをこの記事で紹介します。

#相対的リスク回避度とは
>相対的リスク回避度 （Coefficient of Relative Risk Aversion）とは、資産の変動率をリスクの大きさと捉え、投資家がどれだけリスクをとることを避けたいと考えているかを示した数値
*(引用元 : [ファイナンス用語集](https://glossary.mizuho-sc.com/faq/show/1871?site_domain=default))*

相対的リスク回避度は次の式で示されます。

$$\lambda(x) = - \frac{x u^{\prime\prime}(x)}{u^{\prime}(x)}$$

~記号の説明~
$x$: 資産
$\lambda(x)$: 相対的リスク回避度
$u(x)$: 投資家の効用関数

#相対的リスク回避度の推定
相対的リスク回避度を求めるには上記の定義から、投資家の効用関数が必要となりますが、効用関数を推定することが困難です。
そこで以下のように定式化することで、相対的リスク回避度の推定をすることがあります。

$$ \lambda = \frac{\mu_{risk} - r_f}{\alpha\sigma_{risk}^{2}} $$

~記号の説明~
$\lambda$: 相対的リスク回避度
$\mu_{risk}$: 危険資産全体の期待リターン
$\sigma_{risk}$: 危険資産全体のリターンの標準偏差
$r_f$: リスクフリーレート
$\alpha$: 危険資産保有割合

危険資産全体のリターンの期待値・標準偏差は以下の通りです。
$$ \mu_{risk} = \sum_{i=1}^{n}w_i\mu_i $$

$$\sigma_{risk} = \sqrt{\sum_{i=1}^{n}\sum_{j=1}^{n}w_i w_j\sigma_i\sigma_j}$$

$$ \sum_{i=1}^{n}w_i = 1 $$

~記号の説明~
$\mu_{k}$: 銘柄 $k$ の期待リターン
$\sigma_{k}$: 銘柄 $k$ のリターンの標準偏差
$ｗ_k$: 銘柄 $k$ への投資割合

#導出方法
相対的リスク回避度 $\lambda$ 推定式の導出方法を説明します。

##導出方法①
確実等価額 $\hat{X}$ は以下の式で定義される。
$$u(\hat{X}) = E(u(X))\tag{1}$$

$u(X)$ を$\mu_x$ の周りでテーラー展開し3次以降の項を無視すると、
$$u(X) \approx u(\mu_X) + u^{\prime}(\mu_X)(X - \mu_X) + \frac{1}{2}u^{\prime\prime}(\mu_X)(X - \mu_X)^2 $$
となり、両辺の期待値をとると確率変数は$X$のみであることから
$$E(u(X)) \approx u(\mu_X) + u^{\prime}(\mu_X)E(X - \mu_X) + \frac{1}{2}u^{\prime\prime}(\mu_X)E[(X - \mu_X)^2] $$
$$\approx u(\mu_X) + \frac{1}{2}u^{\prime\prime}(\mu_X)\sigma_X^2\tag{2}$$
$u(\hat{X})$ についても同様にテーラー展開し2次以降の項を無視すると、
$$u(\hat{X}) \approx u(\mu_X) + u^{\prime}(\mu_X)(\hat{X} - \mu_X)\tag{3}$$
(1)式より(2),(3)式の右辺はそれぞれ等しくなることから、$\hat{X}$について整理すると、
$$\hat{X} \approx \mu_X + \frac{1}{2}\frac{u^{\prime\prime}(\mu_X)}{u^{\prime}(\mu_X)}\sigma_X^2\tag{4}$$
$$\Longleftrightarrow\hat{X} \approx \mu_X - \frac{1}{2}\frac{\lambda}{\mu_X}\sigma_X^2\tag{4}$$

初期資産を$X_0$(定数), 収益率を$R$（確率変数）とすると、
$$X = (1 + R)X_0$$
(4)式に代入すると、
$$\hat{X} \approx E((1 + R)X_0) - \frac{1}{2}\frac{\lambda}{\mu_X}V((1 + R)X_0)$$
$$ \approx X_0E(R) + X_0 - \frac{1}{2}\frac{\lambda}{\mu_X}X_0^2V(R)$$
$$ \approx X_0E(R) + X_0 - \frac{1}{2}\lambda X_0V(R)\tag{5}$$
($\mu_X \fallingdotseq X_0$とした)

今回、危険資産の保有割合・リターンをそれぞれ $\alpha$, $R_{risk}$ とし、リスクフリーレートを$r_f$とすると、(5)式より
$$\hat{X} \approx X_0 \bigl((1 - \alpha)r_f + \alpha E(R_{risk})\bigl) + X_0 - \frac{1}{2}\lambda X_0V(\alpha R_{risk})$$
$$\approx X_0 \bigl((1 - \alpha)r_f + \alpha \mu_{risk} + 1 - \frac{1}{2}\alpha ^2\lambda \sigma_{risk}^2\bigl)$$
投資家は確実等価額を最大化すべく$\alpha$を決定し、投資を行うことが合理的であるため、
$$\frac{\partial \hat{X}}{\partial \alpha} = X_0 \bigl((\mu_{risk} - r_f) - \alpha \lambda \sigma_{risk}^2 \bigl) $$
この値が0の時に、投資家の確実等価額が最大となる。

この時の$\lambda$は

$$ \lambda = \frac{\mu_{risk} - r_f}{\alpha\sigma_{risk}^{2}} $$

##導出方法②
以下の記事に、別の導出方法(**ブラウン運動**を用いた導出)が記載されています。

- [相対的危険回避度の測定](https://www5.cao.go.jp/j-j/wp/wp-je99/wp-je99-s0091.html)

##応用
以下にこの測定方法を採用した、ポートフォリオ分析の記事を載せているので是非読んでみてください。

https://qiita.com/opuoth/items/493bf2b4b65493dfb53d
リリースにかかわる環境と作業と自動化CI/CD/CDP

#リリースにかかわる環境と作業と自動化

コンテナに切り替えて、効果が高くなる事例としてリリースの自動化作業である。
CI/CD/CDP　環境を作成して、生産性が高い環境をつくっていこう

まずは『CI/CD/CDP』の違いを、明確にしていこう


## 概要図
![リリース作業の流れ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590346/356f39a8-3d20-b3cd-a625-e1f56293ba5f.png)

## 単語
* リリースにかかわる4環境環境
    * 開発/ビルド環境
    * 開発テスト環境
    * ステージング環境
    * 本番環境

* 　自動化
    * 　自動パッケージング/イメージ
    * 　1 継続的インテグレーション（CI)
    * 　2 継続的デリバリー(CD)
    * 　3 継続的デプロイメント(CDP)


## 1 継続的インテグレーション（CI）
ソフトウェア開発のプロセスを自動化することで開発者がソースコードをコミットし、共有しているリポジトリにマージされることでビルドとテストが自動的に実行される手法

* CIに大事なことは
    * コンパイルやイメージ化の作業を自動でできるようにすること、テストを自動化すること
* 環境
    * スタブ等を用意して、内部結合試験まで作成
* メリット
    * バグが早期に発見できる
    * テスト、デモ、リリースの目的で「現在の」ビルドを常に利用可能にする
    * 単体テストが失敗した場合やバグが発生した場合に戻す場合は、少数の変更のみ
    * 更新が自動化でキル

## 2 継続的デリバリー（CD)
いつでも確実にソフトウェアをリリースできる状態にする。デリバリーの側面を自動化するアプローチ

* CDに大事なことは
    * テストの自動化
* 環境
    * サービスバーチャライゼーションもしくは、外部用結合検証環境を利用できるようにする
* メリット
    * ソフトウェアの配信の効率が上がる
    * 開発者の生産性を向上
    * バグを短時間で発見して対処できる
    * 更新を迅速に配信できる


## 3 継続的デプロイメント（CDP)
継続的デリバリーと継続的デプロイは密接に関連する概念で同一にされる場合もあります。商用環境にいきなりリリースする自動化の最終型になります。

* メリット
    * 商用を運用した状態でのリリースという、複雑化されて不明確になる個所を明確にできる。
* 難度
    * コンテナ環境やマイクロサービス環境でないと導入が難しい


##　自動化するためにはテストも自動化
いろんなテストがあるが、それぞれの箇所で必要なテストを設定することが大事です。


# 一回だけのでリリースならコンテナ使わなくていい！！
コンテナ開発環境が整ってない場合、コンテナを使わなくてよい。
よくあるパターンでwordpressを商用リリースする場合は、開発環境もステージング環境もない場合、そこにコンテナ化するメリットはないです。！！

#最後に
開発環境もステージング環境も本番環境もつくらないといけない、何度も作り直さないといけない場合は、手動でやっている余裕はないです。そこを考えたコンテナ開発環境です。段階的に自動パッケージング、CI、CD、CDP　を導入して継続的開発環境を作ってください。
docker環境構築 mecab && python3 on ubuntu20.04

mecabの辞書はipadicです。

### File構成

dir/
  ├ Dockerfile
  ├ docker-compose.yml
  └ requirements.txt

### Dockerfile

```Dockerfile
FROM ubuntu:20.04
USER root

RUN apt update
RUN apt install -y python3-pip
RUN apt -y install  build-essential libssl-dev libffi-dev python3-dev
RUN apt -y install mecab libmecab-dev mecab-utils mecab-ipadic mecab-ipadic-utf8 python3-mecab
RUN apt -y install locales && \
    localedef -f UTF-8 -i ja_JP ja_JP.UTF-8
ENV LANG ja_JP.UTF-8
ENV LANGUAGE ja_JP:ja
ENV LC_ALL ja_JP.UTF-8
ENV TZ JST-9
ENV TERM xterm

ADD requirements.txt .

RUN apt-get install -y vim less
RUN apt-get install -y libhdf5-dev
RUN pip3 install --upgrade pip
RUN pip install --upgrade setuptools
RUN pip install -r requirements.txt

```

### requirements.txt
mecab-python
unidic-lite //なくても動く

### references

Python 3をインストールしUbuntu 20.04サーバーにプログラミング環境を設定する方法
(https://www.digitalocean.com/community/tutorials/how-to-install-python-3-and-set-up-a-programming-environment-on-an-ubuntu-20-04-server-ja)

【Python】形態素解析エンジン MeCabの使い方
(https://hibiki-press.tech/python/mecab/5153)

MeCab のインストール（Ubuntu 上）
(https://www.kkaneko.jp/tools/ubuntu/ubuntu_mecab.html)
mysqlでテーブルを作成

個人的な忘備録。

## 環境
windows
mySQL 8.0.15
mySQL Workbench 8.0

## 手順
### スキーマ作成

赤枠をクリックしてスキーマを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551636/5d321329-9f54-6a58-1e7e-2e14016da26d.png)

「test」でそのままapply
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551636/ba8d2954-65c2-0a34-8511-defaa01822fd.png)


### スキーマ接続
mySQL commandline Cliantを起動しtestスキーマに繋げるため以下コマンド

```
use test;
```

### テーブル作成
適当に以下を作成

```
mysql> create table list(
    -> id int,
    -> name varchar(200)
    -> );
```

作成できた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551636/33ac1f47-8f92-0cd3-bfed-77eb2fc7a176.png)
Juliaでログをxtermに出す

## 目的

マルチプロセスのコードをデバッグするためには、ログをそれぞれ別の場所に出すようにしないと大変。個別のファイルに書くようにして、別の窓で`tail -f`とかすればいいわけなのだけど、毎回やるのはかなり煩雑。なので自動的にウィンドウをオープンしてその中にログを書くようにしたい。

## 方法
やることは非常に単純で、ログをテンポラリファイルに書き出すようにしておいて、`xterm`の中でそのファイルに`tail -f`をすればいい。MacユーザなのでTerminalを使えればもっと良かったのだけど、制御する方法がわからなかったので、xtermを使う。macでxtermを使うにはXquatzが必要だが、brewで簡単に入る。

## 実装
`AbstractLogger`のサブタイプを作る。この際に`ConsoleLogger`を継承する。継承には[この記事](https://qiita.com/hidemotoNakada/items/65b9190362f0796c1b5a)に書いたように`MacroTools`の`@forward`を用いた。

ここで一つ問題が。`ConsoleLogger`は書き出したあとにstreamをフラッシュしない。通常は`stderr`に書き出していて、`stderr`が自動的にフラッシュするので問題ないようなのだが、自動フラッシュになっていないストリームだと、リアルタイムに書き出されないので困る。ということで`handle_message`メソッドだけはオーバライドしている。と言っても、`ConsoleLogger`の`handle_message`を呼出したあとで、streamを不ファッシュしているだけ。


``` Julia
module XtermLogging
export XtermLogger

import MacroTools
import Logging
import Dates

function timed_metafmt(level, _module, group, id, file, line)
    color, prefix, suffix = 
      Logging.default_metafmt(level, _module, group, id, file, line)
    timestamp = Dates.now()
    prefix2 = "$timestamp : $prefix"
    return color, prefix2, suffix
end

struct XtermLogger <: Base.CoreLogging.AbstractLogger
    sl::Logging.ConsoleLogger
    filename
    proc::Base.Process
end

function XtermLogger(title, level=Logging.Info;
                    display=":0",
                    meta_formatter=timed_metafmt, show_limited=true,
                    right_justify=0)
    tmpfile, stream = Base.Filesystem.mktemp()
    xterm = "/usr/local/bin/xterm"
    proc = open(`$xterm -display $display -title $title -e tail -f $tmpfile`)
    XtermLogger(Logging.ConsoleLogger(stream, level;
                    meta_formatter=meta_formatter, 
                    show_limited=show_limited,
                    right_justify=right_justify),
                tmpfile, proc)
end

@MacroTools.forward XtermLogger.sl Base.CoreLogging.shouldlog, 
                                Base.CoreLogging.min_enabled_level, 
                                Base.CoreLogging.catch_exceptions

function Base.CoreLogging.handle_message(logger::XtermLogger, level, message, _module, group, id,
    filepath, line; maxlog=nothing, kwargs...)
    Base.CoreLogging.handle_message(logger.sl, level, message, _module, group, id, filepath, line; maxlog, kwargs...)
    flush(logger.sl.stream)
end

end
```

デフォルトで時刻を表示する`timed_metafmt`を用いるようにしている。このあたりの詳細は[この記事](https://qiita.com/hidemotoNakada/items/a03467bf0d48f650352e)に書いてある。

## 使い方
`XtermLogging`と`Logging`を`using`でインポートする。

``` Julia
push!(LOAD_PATH, pwd())
using XtermLogging
using Logging
```
`XtermLogger`を作る。引数はウィンドウのタイトル。

``` Julia
xlogger = XtermLogger("test0")
```

つくったLoggerは普通のLoggerとして使える。

``` Julia
with_logger(xlogger) do 
    @error("test $i")    
end
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412142/e8d0fc5b-4bd7-0907-538c-9291ce09ac6e.png)