OmniAICreator/Qiita-1.07M huggingface dataset:
SublimeText3（mac）について

# はじめに
* テキストエディタ（SublimeText3）にて、業務などで使っている機能について纏めておく
    * プラグインはあらかじめインストール済み
    * 自分用の備忘録
* SublimeText を使うきっかけ
    * windows → mac に移行する際に、mac 使っているエンジニアのオススメのテキストエディタだったため
    * 業務効率化するため

## ファイルの diff をとる
* 比較したい2つのファイルを1つに纏める（例：test.csv, test2.csv）

<img width="451" alt="スクリーンショット 2020-02-09 0.32.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87218/4c85c7b5-32c7-af87-9411-38b9caf4fc14.png">

* command + shift + p → 「sublimerge: Compare to View..」を入力する
    * 曖昧検索可能なため、「sub」というキーワードでヒットする

<img width="450" alt="スクリーンショット 2020-02-09 0.38.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87218/6184888f-718e-d18a-32e7-0295e0c1d16d.png">

* 差分がわかる

<img width="552" alt="スクリーンショット 2020-02-09 0.39.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87218/2cca92b0-1379-449f-a670-b3ff4bf8976a.png">

## 複数行に対して、前後に一括で文言追加する
### 用途：アップロードするCSVで予め決まっている固定文言を一括で追加したいなど
* command + a で全体を選択する
* command + shift + l で全体後ろのカーソルが点滅する
* 右矢印で後ろの行を一括で文言追加、編集できる

## 複数行をカンマ区切りで1行にまとめる
### 用途：SQLのIN句の値を1行としたいなど
* command + a で全体を選択する
* command + shift + l で全体後ろのカーソルが点滅する（ここまでは先述と同じ）
* 右矢印でクリックして、カンマを入れる
* commnad + j でカンマ区切りで1行にまとまる

## IDE環境となる
* git管理のディレクトリを SublimeText にそのままドラックアンドドロップする
* コミット履歴が確認できる、grepできる
* ファンクションも飛べるなど、PhpStorm や VScode などの同等なIDE環境ができる

## markdown プレビュー機能
### wikiを作成する時に使用
* mdファイルでmarkdown形式で記入
<img width="518" alt="スクリーンショット 2020-02-09 0.18.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87218/6869d168-a98f-371d-4201-f272431b1af8.png">

* command + option + o でブラウザにプレビューを表示
<img width="521" alt="スクリーンショット 2020-02-09 0.18.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87218/27774931-c4f6-240e-eb5c-d795dc11a6bb.png">

# その他
* SQLファイルや、シェルスクリプト、css, js, ソースなど各種ファイルに対して色分けされていて見やすい

<img width="644" alt="スクリーンショット 2020-02-09 0.48.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/87218/6dd24a9b-68ae-eabd-fbe9-58f4675d7f28.png">

* [ショートカットや設定など](https://qiita.com/ponsuke0531/items/781d38b4a7cbc8075ac2)

# さいごに
* ほかにありそうな気がしますが、一旦ここまで
* プラグインもたくさんあり、やりたいことが実現できるエディタであるところは良いところ
pythonで2の平方根を数百万桁計算

pythonで2の平行根を数百万桁計算するプログラムを作成。
計算方法は逆数に対する下記ニュートン反復法を使用。
　反復式 : x = x + x*(1 - x*x/2) / 2
この方式の特徴は多数桁除算が無い。pythonでn桁の計算部分は下記。
def sqrt2(n):
　bit, dec = 40, 12
　d12 = 10000*10000*10000
　x = int( math.sqrt(2)*(1 << bit) )
　while dec <= n:
　　dec = dec << 1
　　d2  = 1 << (2*bit)
　　x0  = (x*x) >> 1
　　x1  = (d2 - x0) >> 1
　　x2  = (x*x1) >> bit
　　x   = (x << bit) + x2 + 1
　　bit = 2*bit
　　d12 = d12*d12
　　x = (x*d12) >> bit
　dec_o = (n // 100)*100
　return x

x=sqrt2(n)の計算結果を10進数に変換するにはformat(x)が必要。
全体のpythonは https://ecc-256.com のpythonプログラム欄に掲載。
sqrt2をダウンロードし、sqrt2.pyと先頭のinportをimportに変更する。
コマンドプロンプトでpython sqrt2.pyと打ち込む。
次に、出力桁数を打ち込む。100万桁なら、1000000

windows10のパソコン(4Ghz)の300万,600万,1200万の計算時間は下記。
  x=sqrt(n) : 6.7, 19.9, 59.7 (s)
  format(x) : 136,  545, 2180 (s)

sqrt(2)の計算より、出力用に10進数変換の方が大幅に時間がかかる。
sqrt(2)は桁数2倍で3倍の時間、10進数変換は4倍の時間がかかる。
計算の乗算はカラツバ法で、変換の乗算は定義式のままが原因。

pythonでも、10進1000桁程度(値は2進のint)で位取りし、高速剰余変換(FMT)を適用すれば高速化可能。1億桁計算し、10進数の文字に変換するまで含めて4Ghzのパソコンで3分以内を目標(2月末)。
エンジニアとしてマインドを高めるのに向いているオススメブログ一覧

※エンジニアとしてマインドを高めるのに向いているオススメブログ一覧



パイザ開発日誌
https://paiza.hatenablog.com/
「IT就職や教育に力を入れているpaizaでは
エンジニアの生き方やマインドも教えています。」



Memoraundumrail
https://memorandumrail.com/
「webエンジニア（たかひろ氏）が主にweb系プログラミングで
初心者でもエンジニアになれる方法をブログで書いています。」



プログラミングライフ
https://programming-life.com/freelance-engineer-half-year/
「現役フリーランスエンジニアが主にweb系プログラミングで
常駐から在宅でスキルを磨いて稼ぐ方法をブログで書いています。」



qwiklabs.com
https://amazon.qwiklabs.com/
「クラウドのトレーニングが出来るサービス。」



qwiklabs.com
https://amazon.qwiklabs.com/
「クラウドのトレーニングが出来るサービス。」



リナックスアカデミー
https://www.linuxacademy.ne.jp/lablog/engineer/105/



サムライエンジニアブログ
https://www.sejuku.net/blog/1240



リスタ
https://re-sta.jp/ability-to-take-action-1075
「エンジニアとは関係ないが、行動力が欲しいのでプラスしてみた。」
fbprophetをインストールする際の注意点

# fbprophetとは
- Facebook社製の時系列解析ツール
- 簡単に時系列解析ができる
- R,Pythonに対応

# インストールする際の注意点
1. windowsの場合C++コンパイラが必要
[公式](https://facebook.github.io/prophet/)にもありますが、anaconda推奨

1. anaconda環境の場合はcondaでインストールする
```conda install -c conda-forge fbprophet```

1. holidays==0.10.1だとエラー ※fbprophet==0.5
holidays==0.9.11にダウングレードしたところ問題なし
ガンタンクをRaspberry Piで動かすことを目指す#5 RaspberryPi設定編

ガンタンクをRaspberry Piで動かすことを目指す
[ガンタンクをRaspberry Piで動かすことを目指す#4 RaspberryPi導入編](https://qiita.com/never_nothing_jp/items/bde1556d3efd2ab47a7a)の続き

今回はRaspberryPiのOS導入後の設定を行う。

#1.raspi-configによる設定
RaspberryPiに電源を接続して起動する。
ユーザIDはpi、パスワードはraspberryでログインできる。
基本的な設定を行う為にraspi-configコマンドを使う。

```
$ export LANG=
$ sudo raspi-config
```

テキスト形式のメニューが立ち上がる。
以下の番号の設定を行う。

```
1. change user password
  ユーザpiのパスワードを変更しておく。
2. Network Option
  2-1. hostname
    ここではホスト名を仮に「guntank.local.example.jp」とする。
  2-2. W-Fi
    JP(JAPAN)を選び、Wi-FiのSSIDとパスワードを入力する。
4. Localization Option
  4-1. Change Locale
    ja_JP.UTF-8 を有効にする。
  4-2. Change Timezone
    Asia → Tokyo を選ぶ。
  4-4. Change wi-fi Country
    JP Japan を選ぶ。
5. Interfacing Option
  F2 → SSH を有効にする。
```

以上の設定が終わればRaspberryPiを再起動する。

```
$ sudo ifconfig
```
でwlan0(無線LAN)に割り当てられたIPアドレスをメモしておく。

#2.SHHによる接続
以上でラズパイにSSHで接続できるようになった。
Windows10パソコンからコマンドプロンプトかCygwinのsshコマンドか、
もしくはPuTTYなどの端末エミュレータでログインする。

```
C:> ssh pi@メモしたIPアドレス
```

#3.その他設定
ユーザを作ったり、必要なパッケージを入れたりする。
##3-1.rootユーザで操作できるようにする
root権限で操作すす必要のあるときは基本的にはsudoコマンドで実行する。
しかし、いちいちsudoコマンドを使うのは面倒だしパイプやリダイレクトを使うときはミスが生じやすい。
ので、rootユーザに直接なれるようにしておく。
rootユーザのパスワードを設定するだけ。

```
$ sudo passwd root
```
パスワードを二回聞いてくるので設定したいパスワードを入力する。

```
$ su -
```
でrootユーザになれる。
.bashrcをいじって好きなaliasなどを設定しておく。
以下は基本、rootユーザで行う。
#3-2.IPアドレスの固定化
無線LAN(wlan0)のIPアドレスを固定化する。
なおここではローカルのDNSサーバーが存在し、すでにホスト名が登録されているものとする。
まず、/etc/network/interfaces を書き換える。
ここでは設定するIPアドレスを192.168.1.150とする。
以下の内容を追加する。

```
(省略)
auto lo
iface lo inet loopback

auto wlan0
allow-hotplug wlan0
iface wlan0 inet static
address 192.168.1.150
network 192.168.1.0
netmask 255.255.255.0
gateway 192.168.1.1
dns-nameservers 192.168.1.1
dns-search local.example.jp
wpa-conf /etc/wpa_supplicant/wpa_supplicant.conf
```

内容は実際のネットワーク環境ににて適度変える。

DNSサーバーがあるのであれば/etc/nsswitch.confも設定する。

```
hosts:          files dns mdns4_minimal [NOTFOUND=return]
```
「dns」を2番目に変更する。

IPv6を無効にしておく。
/etc/sysctl.conf を編集する。
以下の２行を追加する。

```
net.ipv6.conf.all.disable_ipv6 = 1
net.ipv6.conf.default.disable_ipv6 = 1
```

再起動してきちんとIPアドレスが設定したものになっているかを確認する。

#3-3.新しいユーザーの追加
デフォルトのpiユーザのほかに普段使う新しいユーザーを作成する。
ここではガンタンクなので「hayato」とする。

```
# adduser hayato
```

グループを設定する。
/etc/group を編集する。

末尾に:piが付いているグループにすべて
「,hayato」を追加する。
再起動してから新しいユーザでログインする。
.bashrcを編集してプロンプトやaliasを変更する。
以降はroot以外ではこの新しいユーザを使うことにする。

#3-4.パッケージのインストール
普段使うパッケージをいくつかインストールする。
まずはパッケージを最新の状態にしておく。

```
# apt-get update
# apt-get upgrade
```

エディタのvim、時間合わせの為のntp、ソース管理のgit をインストールする。

```
# apt-get install vim ntp git
```

その他に使うパッケージを必要に応じてインストールする。

基本的なOSの設定は以上で終わりとする。


次回はラズパイにモータードライバー基盤とモーター、その他電池などを接続してみる。
【XAMPP】PHPの制作物を任意のディレクトリで作りたい

## 3行で

- `httpd.conf` を開く
- `DocumentRoot` のディレクトリを書き換える
- localhostにアクセス

## 環境

Mac

## なぜ

自分の制作物を `/projects` とかのディレクトリ（フォルダ）にまとめているなどの理由で `/XAMPP/xamppfiles/htdocs` の下にPHPの制作物を入れるのがイヤだなぁという場合。

## `httpd.conf` の中身を書き換える

`/Application/XAMPP/xamppfiles/etc/httpd.conf` を開いて
`DocumentRoot` と書かれた部分を探す。
**230行目あたり**にあります。

```conf
DocumentRoot "/Applications/XAMPP/xamppfiles/htdocs"
```

ここを任意のディレクトリに書き換える。

```conf
DocumentRoot "/Users/antk/projects/"
```

など。
そしたらすぐ下にある

```conf
<Directory "/Applications/XAMPP/xamppfiles/htdocs">
```

こちらも書き換える。

```conf
<Directory "/Users/antk/projects/">
```

これでOKです。

## localhostにアクセスしてみる

`/projects` の下に `/phpapp` という名前のディレクトリを作って `index.php` というページを作った場合
`http://localhost/phpapp/index.php`
ってアクセスすると表示されます。

もし`Objects not found!` と出てくる場合はXAMPPでWeb Serverを `Restart` ってしてあげると出てくるかもです。
【React】 郵便番号から住所を自動入力

こんにちは。
今回は[ajaxzip3](https://github.com/ajaxzip3/ajaxzip3.github.io)を使って、Reactでも簡単に住所の自動入力を実装する方法を紹介します。

#住所自動入力
オンラインショッピングを利用するユーザーの約3分の2が購入を完了する前にカートを離脱していることが明らかとなっています。ECサイトのカート破棄率は平均約70%とされていて、カートの離脱を防ぎ、購入率を上げるためにもEFO（入力フォーム最適化）は重要です。

#使い方
はじめにhtmlファイルのbody内にajaxzip3を読み込みます。

```HTML:index.html
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
```

##関数

AjaxZip3.zip2addr()の引数にinputタグのnameを指定し、郵便番号を入力すると、指定したフォームに対して都道府県、市町村、番地が自動で入力されます。
自動入力ではonChangeが発火しないため、stateが更新されず、フォームからapiにデータを渡す時に空判定されてしまう可能性があります。
そのため、指定したidのフォーム内に入力されている住所をdocument.getElementById('id').valueで取得してsetStateで更新してあげます。

```React:Form.js
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {}
    };
  }

  handleChange = e => {
    const params = this.state.user;
    params[e.target.name] = e.target.value;
    this.setState({ user: params });
  };

  complementAddress = () => {
    const { AjaxZip3 } = window;
    AjaxZip3.zip2addr(
      'postCodeH',
      'postCodeF',
      'address1',
      'address2',
      'address3'
    );
  };

  onBlurZipcode = () => {
    this.setState({
      user: {
        ...this.state.user,
        address1: document.getElementById('address1').value,
        address2: document.getElementById('address2').value,
        address3: document.getElementById('address3').value
      }
    });
  };
  
  render() {
    return(
      <div>下記フォーム</div> 
    )  
  }
}
export default Form;
```

##郵便番号を入力するフォーム

```React
 <input
    name="postCodeH"
    size="3"
    maxLength="3"
    onChange={e => this.handleChange(e)}
/>
-
<input
    name="postCodeF"
    size="4"
    maxLength="4"
    onChange={e => this.handleChange(e)}
    onKeyUp={this.complementAddress}
    onBlur={this.onBlurZipcode}
/>
```

##住所を入力するフォーム

```React
<input
    name="address1"
    id="address1"
    onChange={e => this.handleChange(e)}
/>
<input
    name="address2"
    id="address2"
    onChange={e => this.handleChange(e)}
/>
<input
    name="address3"
    id="address3"
    onChange={e => this.handleChange(e)}
/>
```

###動画をアップロードできないので
<img width="764" alt="スクリーンショット 2020-02-09 23.05.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320179/aeab9353-ab67-9c28-0d09-0d01351a1ac0.png">
郵便番号を入力すると、、、、、
<img width="764" alt="スクリーンショット 2020-02-09 23.06.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320179/bce811e4-75cd-ff91-32d9-62542b6e53ee.png">

とても便利。
ありがとうございました。
Laravel Eloquentの超基本的な使い方

## モデルの取得
### 主キーで取得
```sql

SELECT * FROM users WHERE id = 1 LIMIT 1;
```
:point_down: 

```php
App\User::find(1);
```

### 全件取得

```sql
SELECT * FROM posts WHERE writer_id = 1;
```
:point_down:

```php
App\Post::where('writer_id', 1)->get();
```

### 1件だけ取得
whereの引数を配列にすれば、And検索できる

```sql
SELECT * FROM favorites WHERE user_id = 1 AND post_id = 1 LIMIT 1;
```
:point_down:

```php
App\Favorite::where([
    'user_id' => 1,
    'post_id' => 1,
])->first();
```

### Or検索
And検索は `->where()->where()` のようにメソッドチェーンでも書ける
また、メソッドチェーンは Or検索も表せる

```sql
SELECT * FROM posts WHERE title LIKE '%Lorem' OR title LIKE '%ipsum%';
```

:point_down: 

```php
App\Post::where('title', 'LIKE', '%Lorem')
->orWhere('title', 'LIKE', '%ipsum%')
->get();
```

### 複雑な検索
コールバックを使用すれば複雑な条件も表せる

```sql
SELECT * FROM posts
 WHERE (title LIKE '%Lorem' OR title LIKE '%ipsum%')
  AND (created_at IS NULL OR updated_at IS NULL);
```

:point_down: 

```php
App\Post::where(function ($query) {
    return $query
    ->where('title', 'LIKE', '%Lorem')
    ->orWhere('title', 'LIKE', '%ipsum%');
})
->where(function ($query) {
    return $query
    ->whereNull('created_at')
    ->orWhereNull('updated_at');
})->get();
```

## モデルの作成
```sql

INSERT INTO favorites (user_id, post_id) VALUES (1, 2);
```

```php

App\Favorite::create([
    'user_id' => 1,
    'post_id' => 2,
]);
```

## モデルの更新
```sql

UPDATE posts SET updated_at = NOW();
```
:point_down: 

```php

App\Post::query()->update([
    'updated_at' => \Carbon\Carbon::now(),
]);
```

## モデルの(物理)削除
```sql

DELETE FROM favorites WHERE user_id = 1 AND post_id = 1;
```

```php

App\Favorite::where([
    'user_id' => 1,
    'post_id' => 1,
])->delete();
```



参考ページ
https://readouble.com/laravel/6.x/ja/eloquent.html
https://stackoverflow.com/questions/19325312/how-to-create-multiple-where-clause-query-using-laravel-eloquent
https://stackoverflow.com/questions/15622710/how-to-set-every-row-to-the-same-value-with-laravels-eloquent-fluent
pythonでのGUI作成 tkinter使用して 2

## 概要

[前回の続きです](https://qiita.com/snowp/items/1c15533038b8c4d2447c)
前回とりあえずアプリが起動するところまでは確認できましたが、二重起動の防止などいろいろ足りていない部分を追加してみました


## 必要なもの

* python 3.7.2
* pandas
* numpy

## 公開場所

githubで公開しています。
https://github.com/snowpff14/etcresource/tree/master/pythonGui

## 処理内容

大まかな部分は[前回](https://qiita.com/snowp/items/1c15533038b8c4d2447c)を参照。


* 処理を動かすところをthreadで呼び出していましたが、ロックがなかったので何度でも呼び出せてしまう状態でした。そこで今回はロックを取得して取れなければメッセージを出す形にしています。

```python

    def doExecute(self):
        if self.lock.acquire(blocking=FALSE):
            if messagebox.askokcancel('実行前確認','処理を実行しますか？'):
                self.progressValue=0
                self.progressStatusBar.configure(value=self.progressValue)
                self.progressBar.configure(maximum=10,value=0)
                self.progressBar.start(100)
                th = threading.Thread(target=self._executer)
                th.start()
            else:
                self.lock.release()
        else:
            messagebox.showwarning('エラー','処理実行中です')

```
* 処理の状況をラベル表示する際目立つように太字かつ白背景に赤字に設定しています。
`PL.TLabel`というところは任意に設定できる項目です。こちらを後段のラベルを定義するときに指定しています。

```python
        labelStyle=ttk.Style()
        labelStyle.configure('PL.TLabel',font=('Helvetica',10,'bold'),background='white',foreground='red')
        self.progressMsgBox=ttk.Label(content,textvariable=self.progressMsg,width=70,style='PL.TLabel')
        self.progressMsg.set('処理待機中')
```

* 処理の進捗状況を示すように途中でメッセージを変更してプログレスバーを進めるようにしています。今回は画面の操作起動前と後なのであまり変化はありませんが、複数ステップある場合は都度都度更新を行うことで画面の様子を見ることができます。
以下は呼び出し元から表示するメッセージと進捗状況を受け取っています。

```python

    def progressSequence(self,msg,sequenceValue=0):
        self.progressMsg.set(msg)
        self.progressValue=self.progressValue+sequenceValue
        self.progressStatusBar.configure(value=self.progressValue)

```

* 以下のように画面の要素の `after`メソッドを呼ぶことで処理を呼び出すことができます。処理実行後画面に変化を与えるために表示領域の更新を `root.update_idletasks()`で行っています。

```python
        self.progressMsgBox.after(10,self.progressSequence('処理実行中',sequenceValue=50))
        root.update_idletasks()

```

* プログレスバーは画面の要素を作成するところで指定を行います
    * `indeterminate`は処理が動いていることを示すため常に動いているバー
    * `determinate`は全体の進捗のうちどこまで進んだかを示すのに使用します。
    

```python
        self.progressBar=ttk.Progressbar(content,orient=HORIZONTAL,length=140,mode='indeterminate')
        self.progressBar.configure(maximum=10,value=0)

        self.progressStatusBar=ttk.Progressbar(content,orient=HORIZONTAL,length=140,mode='determinate')
```

* `determinate`のプログレスバーの場合は`value`に値を設定すればその分進みます(最大値100として状況に合わせて設定します)
* `indeterminate`のプログレスバーは`start`で起動、`stop`で停止します
```python
                self.progressValue=0
                self.progressStatusBar.configure(value=self.progressValue)
                self.progressBar.configure(maximum=10,value=0)
                self.progressBar.start(100)
```
* ボタンに設定する関数は引数を渡したいときはlambdaで渡すか、partialを使用します。
    以下は起動前に引数を渡せるようにpartialを使っています。

```python
    def preparation(self,logfilename):
        self._executer=partial(self.execute,logfilename)

```

とりあえず今回はここまで。
もうちょっと何か出来たら続きを作成します。
[Appendix]Realmが実機で動かなくなった！？

#Appendix
本日、Realmを使ってるアプリを実機で起動したら以下のエラーが出ました。
その解決方法をざっと書きます。


```
dyld: Library not loaded: @rpath/Realm.framework/Realm
```

XCode上では「dyld`__abort_with_payload:」から始まるファイルが開かれており、「Thread 1: signal SIGABRT」のメッセージが。

原因は分からずでしたが解決方法は、
1.PodFileを更新
2.pod updateを実行
でした。

pod initによって作られたPodFileの

```:PodFile
  use_frameworks!
```

を

```:PodFile
  # use_frameworks!
  use_modular_headers!
```

に変更して、そのプロジェクトフォルダに対して
pod updateを実行するだけです。
※pod installした時と同じような感じ。

ターミナル見てたらRealmが4.3.1から4.3.2に変わってたから
それでなんか修正が必要になったんですかねー。

PodFileを更新せずにupdateするだけだと、Realmのversionは上がってましたがエラーメッセージは変わらなかったので、PodFileにuse_moduleなんたらっていうのは入れなくちゃいけないみたいです。

こんなんわかるかい・・・
【UiPath】「ファイル名を指定して実行」をWin + R キーを使わずに起動する。

## 概要
UiPathでアプリを起動したりファイルを開いたりする場合に、「ファイル名を指定して実行」を使うことがあります。
Win + R キーで起動するのが一般的ですが、ここではショートカットキーを使わずに起動する方法を紹介します。

## 方法
explorerに「ファイル名を指定して実行」のCLSIDを渡して実行します。
![シーケンス.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578020/687f740d-4de8-cf0b-b0f1-e122de48e7a8.jpeg)
・アクティビティ：<b>StartProcess</b>
・ファイル名：<b>"explorer.exe"</b>
・引数：<b>"Shell:::{2559a1f3-21d7-11d4-bdaf-00c04f60b9f0}"</b>

実行するとWin + R キーを押した時と同じように「ファイル名を指定して実行」が立ち上がります。
後の流れは同じですね。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/578020/129bf74f-31c9-aec4-150b-8a4125179e9b.png)

## 補足
引数に渡しているモノって何なの？という話ですが、
<b>Windowsのアプリが持つ一意の識別子（CLSID）</b>、というモノらしいです。
管理ツールやコントロールパネルなど他のWindowsの機能にもCLSIDが割り当てられているので、
同じようなやり方で呼び出すことが出来ます。

便利な機能ですが、引数だけ見ても何を呼び出してるのかサッパリだと思いますので、
注釈等に書いておくことを強く推奨しておきます。

## 参考記事
* [「ファイル名を指定して実行」を極める](https://qiita.com/sta/items/4b70e6b130a1033dc2c5)

## 動作環境
* UiPath 2019.9.2 Community Edition
* Windows 10 Home 1903
AtCoder Beginner Contest 154 参戦記

# AtCoder Beginner Contest 154 参戦記

## [ABC154A - Remaining Balls](https://atcoder.jp/contests/abc154/tasks/abc154_a)

2分半で突破. 変数が5つもあることに一瞬戸惑ったけど、書くだけだった.

```python
S, T = input().split()
A, B = map(int, input().split())
U = input()

if U == S:
    A -= 1
else:
    B -= 1
print(A, B)
```

## [ABC154B - I miss you...](https://atcoder.jp/contests/abc154/tasks/abc154_b)

1分で突破. 書くだけ.

```python
S = input()

print('x' * len(S))
```

## [ABC154C - Distinct or Not](https://atcoder.jp/contests/abc154/tasks/abc154_c)

2分で突破. 書くだけ. [ABC063B - Varied](https://atcoder.jp/contests/abc063/tasks/abc063_b) を思い出した.

```python
N = int(input())
A = list(map(int, input().split()))

if len(set(A)) == N:
    print('YES')
else:
    print('NO')
```

## [ABC154D - Dice in Line](https://atcoder.jp/contests/abc154/tasks/abc154_d)

10分で突破. リスト p から、平均値のリスト m を作って、幅 K の Sliding Window で最大値を求めるだけ.

```python
N, K = map(int, input().split())
p = list(map(int, input().split()))

m = [(e + 1) / 2 for e in p]

t = sum(m[0:K])
result = t
for i in range(N - K):
    t -= m[i]
    t += m[i + K]
    if t > result:
        result = t
print(result)
```

## [ABC154E - Almost Everywhere Zero](https://atcoder.jp/contests/abc154/tasks/abc154_e)

敗退. 前に解けなくて放置したアレと同じ問題だなあと思ったが、そのときに解いておかなかったのが運の尽きだった…….

追記: 桁DP すれば良いわけですが、リストの次数が上がるととたんに遅くなる Python なので、次元を上げずに変数を分けて書いてみました.

```python
N = input()
K = int(input())

a = 1
b = [0] * (K + 1)
b[0] = 1
b[1] = int(N[0]) - 1

for c in N[1:]:
    t = int(c)
    for i in range(K - 1, -1, -1):
        b[i + 1] += b[i] * 9
    if t != 0:
        if a + 1 <= K:
            b[a + 1] += t - 1
        if a <= K:
            b[a] += 1
        a += 1

if a == K:
    print(b[K] + 1)
else:
    print(b[K])
```
ABC154 解説

[ABC154](https://atcoder.jp/contests/abc154)の解説です。
今回はペナルティも多く、全完するまでに時間もかかり、自分としては反省すべき結果となりました。
では、解説に入ります。

# [A問題](https://atcoder.jp/contests/abc154/tasks/abc154_a)
文字列の一致判定をしましょう。
あまりA問題としては良問ではない気がしました。気のせいかもしれません。

# [B問題](https://atcoder.jp/contests/abc154/tasks/abc154_b)
問題のネタ性がいいですね。
文字列の長ささえわかれば<code>'x'</code>をその個数だけ出力すればいいですが、愚直に文字列を置き換えてもいいです。

# [C問題](https://atcoder.jp/contests/abc154/tasks/abc154_c)
ソートして隣り合った要素を比べるのが楽です。
mapやmultisetなどを使ってもいいです。

# [D問題](https://atcoder.jp/contests/abc154/tasks/abc154_d)
$i$ 番目のサイコロについて出る目の期待値を考えると、$(1+p_i)/2$ です。
これを連続する $k$ 個について求めて和を取ると、その区間での $p_i$ の総和を $s$ として、$(k+s)/2$ が答えになります。区間を一つずつずらしていけば $s$ は $O(1)$ で更新できるので、$O(N)$ でこの問題が解けます。累積和を取っても同様の操作が実現できます。
ところで、オーバーキルですが、Segment Treeを使いたくなりませんでしたか？僕はなりませんでした。

# [E問題](https://atcoder.jp/contests/abc154/tasks/abc154_e)
典型的な桁DPの問題です。
桁DPの解説はこちらの [@drken さんの記事](http://drken1215.hatenablog.com/entry/2019/02/04/013700)へどうぞ。
一瞬オーバーフローが怖くなりますが、桁DPを落ち着いてやればオーバーフローは起こりません。（そもそもサンプルに最大ケースが置いてある）
${\rm dp}[i][j][k]=i$ 桁目までで $j$ 個 $0$ でない数字を含むもの
とし、$k$ で桁あふれを管理すればよいです。
これで $O(\log N)$ となります。

# [F問題](https://atcoder.jp/contests/abc154/tasks/abc154_f)
すべての場所について通り数を求めては間に合いません。
求める領域が長方形になっていることを利用して、長方形を囲んでいる部分の通り数から中の値をまとめて求めることを考えます。
長方形の左と下の部分の通り数をそれぞれ求め、それを動的計画法のイメージでグリッド上に伝播させていき、最終的に長方形の中に何度加算されるか考え、それをまとめて足せばよいです。
対称性から、下の部分に対してのみ考えます。
たとえば、$f(r_1,c_1-1)$ の値の何倍が長方形の中に加算されるか考えると、

```math
{}_{c_2-c_1+1} C_{c_2-c_1},{}_{c_2-c_1+2} C_{c_2-c_1},\cdots{}_{c_2-c_1+1+(r_2-r_1)} C_{c_2-c_1}
```
の総和になります。
同様に、他の場所においてもこのような組み合わせの個数の総和で係数を求めることができるので、計算に無駄がないように順次求めていくと $O(r+c)$ で解くことができます。

# おわりに
少し解説が雑になったかもしれません。ごめんなさい。（こどふぉまで時間がない）
Fのような問題をさっと解ききる力が、必要ですね。
クリーンアーキテクチャ  REP, CCP, CRPを学ぶとSOLIDがアーキテクチャに対しても有効なことがわかる。

## クリーンアーキテクチャ  REP, CCP, CRPを学ぶとSOLIDがアーキテクチャに対しても有効なことがわかる。

クリーンアーキテクチャ第13章を読んでいる。

REP, CCP, CRPについて学んだのでメモ。

SOLIDの教えがそのままアーキテクチャに適用できると知り、記事にまとめる。

SOLIDの内、 SRP, ISPに非常によく似た原則が登場する

[原文に近い表現はこちら](https://qiita.com/NagaokaKenichi/items/65c149ba92580fce5be2)


# TL;DR

```
凝集性(CCP: 似たものは集め、別のものは離す)について

 - REP: 同じ変更理由のものは同じリリースで変更されるようなコンポーネントの切り方に(変更理由は1つだけ:SRP)
 - CRP: コンポーネントは切り離せない単位に限定する(不要な物に依存しない: ISP)
```

## コンポーネント

以下、`コンポーネントはデプロイの単位` だと思って欲しい。

クラスやモジュールをまとめたものである。


## REP, CCP, CRP


これらはコンポーネントの分割や責務の切り分けに関する原則である。

凝集性について述べる以外はSOLIDの内、 SRP, ISPに非常によく似た原則である。



# 凝集性

コンポーネントの凝集性について語られている。

凝集性とは以下のような性質のことである。

```
似たものは集まり、別のものは離れる
```

### 再利用・リリース等価の原則(REP:The Reuse/Release Equivalence Principle)

コンポーネントのリリースに関する規則。

同じ変更理由によって変更されるクラスやモジュールは同じリリースにまとめられるべき。

つまり `変更対象のクラスやモジュールが同じコンポーネント、グループに属しているべき` と説く。


### 閉鎖性共通の原則(CCP:The Common Closure Principle)

つまりは凝集性のこと。

冒頭で説明した凝集性 `似たものは集め、別のものは離す` を示している。

CCPでは、 `同じ変更理由で変更されるクラスやモジュールは同じコンポーネントにあるべき` と説く。

コンポーネント版、SOLIDのSRP。 

`単一責任の原則(SRP: Single Responsibility Principle)` は`クラスの変更理由は1つ(同じアクター<ユーザやプレースホルダー>) であるべき` と説く。

### 全再利用の原則(CRP:The Common Reuse Principle)

ひとつのコンポーネントにまとめるクラスはどれも切り離せないものばかりにする(不要なものに依存しない)。

コンポーネント版、SOLIDのISP。

`インタフェース分離の原則 (ISP: Interface Segregation Principle)` は `使っていないメソッドを持つクラス（インタフェース）に依存しない(不要な物に依存しない)` と説く。

### REP, CCP, CRPを学ぶとSOLIDがアーキテクチャに対しても有効なことがわかる

```
凝集性(CCP: 似たものは集め、別のものは離す)について

 - REP: 同じ変更理由のものは同じリリースで変更されるようなコンポーネントの切り方に(変更理由は1つだけ:SRP)
 - CRP: コンポーネントは切り離せない単位に限定する(不要な物に依存しない: ISP)
```

凝集性についてSOLIDのSRP(CCP), ISP(CRP)を適用するとコンポーネント分割や責務の切り分けに有効であることがわかった。

SOLIDを理解すると2度美味しい。




以上
全国道中風アプリ（仮想リプレース）＋テストコード 12/15分として投稿

こんにちは、コロナです

2020/02/08 記事の構成を記載

# 今回のシステム構成

apiサーバ...道中情報、住所情報、建物情報と道中結果情報を返す
テストコード.apiの側のテストコードを用意する
アプリ側....apiサーバを実行するクライアント(2d系)

主な画面機能メモ
　・道中実行ボタン（道中面と同じダイスを生成して、転がす）
　・道中情報取得api...道中での名前に加えて、郵便局情報を取得する。近くに建物がある場合は、建物情報を取得する

テストコード
    単体テスト
　　　　正常ケース（道中情報が０件と、１件と２件以上）
　　　　異常ケース（エラーが発生した場合に、オブジェクトエラーを取得して返す）

取得元
　・郵便局情報のzip解凍処理（１日１回）
　・道中情報....ファイルからデータを登録する
　・過去の思い出日記...ユーザー情報を保持しておいて、取得する

# 今後の課題
実際の開発と画面レイアウトなど
abc154 参戦レポ

#A
Aにしては若干ややこしい

```python
S, T = input().split()
A, B = map(int, input().split())
U = input()
if U == S:
    print(A - 1, B)
else:
    print(A, B - 1)
```

#B
制約の縛りも特にない。Aより簡単な気がする

```python
S = list(input())
for _ in range(len(S)):
    print("x", end='')
```

#C
Counterはやっぱり強い。YESを小文字で書いてしまい1WA。この手のミスは今後気を付けたい（atcoderさん、できればどっちかに統一して。。。）

```python
from collections import Counter
N = int(input())
A = Counter(map(int, input().split()))
A = A.values()
for a in A:
    if a != 1:
        print("NO")
        exit()
print("YES")
```

#D
期待値の線形性を利用。アルゴリズムは尺取り法の知識が必要。tmp_ansの更新を忘れておりバグ取りに時間がかかった。

```python
N, K = map(int, input().split())
p = list(map(int, input().split()))
Expected_val = []
for val in p:
    sum_val = (val * (val + 1)) // 2
    Expected_val.append(sum_val / val)
# print(Expected_val)

left = 0
right = K

ans = sum(Expected_val[left:right])
tmp_ans = ans
# print(ans)
for i in range(N - K):
    tmp_ans = tmp_ans - Expected_val[left + i] + Expected_val[right + i]
    if tmp_ans > ans:
        ans = tmp_ans
print(ans)

```


#E
桁DP。判別方法は入力のでかすぎる値が合図。前に解いたのが10月だったのでコードを発掘。必要箇所をいじいじし無事AC。これは嬉しい。地球に生まれてよかった。

```python
from functools import lru_cache
N = input()
K = int(input())

## lru_cacheを使ってメモ化
@lru_cache(maxsize=None)
def rec(k,tight,sum_val):
    # 最後まで探索した時、問題条件に応じて1 or 0を返す
    if k == len(N):
        if sum_val == K and sum_val != 0:
            return 1
        else:
            return 0

    # 現在の桁がtightであるか否かで終了する条件を変更する
    x = int(N[k])
    if tight:
        r = x
    else:
        r = 9
    res = 0
    for i in range(r + 1):
        if i == 0:
            res += rec(k + 1 ,tight and i == r, sum_val)
        else:
            res += rec(k + 1, tight and i == r, sum_val + 1)

    return res



print(rec(0 , True , 0))
```

#F
勉強中。けんちょんさんが謎の公式を呟いていたので調査なう。$C(r, r) + C(r+1, r) + ... + C(n, r) = C(n+1, r+1)$
export defaultについて

Vue.jsを扱っていて、export defaultがよくわからなかったので調べてみました。


## 単一ファイルコンポーネント

単一ファイルコンポーネントとは、コンポーネントを構成するtemplate、style、scriptを1つのVueファイルでまとめて管理することを言います。
機能ごとに「HTML」「CSS」と切り出すのではなく、部品ごとに切り出して管理し、それをだし分けることでUIを作成することができます。
単一ファイルコンポーネントの思想で作られたのがVueCLIです。

## 他のコンポーネントで利用できるようにするためには
それでは、単一ファイルコンポーネントの思想で、他のコンポーネントでも利用できるようにするためにはどうすればよいのでしょうか。
それは、 `export default` でメンバーを囲むことで、外部からも参照できるようにします。
単一ファイルコンポーネントでは外部から参照されることが前提の仕組みになるので、基本的にscriptの部分は `export default` で囲むことが前提となります。

```
<script>
export default {
    name: "Header",
    data() {
        return{
            msg2: "はじめまして"
        }
    } 
}
</script>
```

使う側（親となる）コンポーネントでは、インポートした上で、使うコンポーネントをまた `export default` で囲んで templateの中で使えるモジュールとします。

```
<script>
import Header from '@/components/Header.vue'

export default {
  name: 'home',
  components: {
    Header
  }
}

</script>

```

scriptで `export default` で囲んでいるので、テンプレートでは `Header` を使うことが可能となります。

```
<template>
  <div class="home">
    <Header/>
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="こんにちは"/>
    <h1>This is an about page <fa icon="user" /></h1>
  </div>
</template>

```

単一ファイルコンポーネントでは、関連するどちらのvueファイルでも `export default` が必要となります。
libjpeg-turboのインストール

(メモ程度の内容 + プログラミング初心者なので，間違っているかもです...)
##事前準備
###NASMのインストール
https://www.nasm.us/
を開き，BuildsのListを選択，最新版のwin64内のinstallerをダウンロードし実行する．
テスト環境では
nasm-2.14.03rc2-installer-x64.exe
環境変数PATHにNASMをインストールしたパス
```C:\Program Files\NASM```
を追加する．

####1. libjpeg-turboのソースコードをGitHubからダウンロードする
libjpeg-turboはsubmoduleを利用しないので，ZIPで落としてOK
https://github.com/libjpeg-turbo/libjpeg-turbo

####2. CMAKEを立ち上げ，ダウンロードしたlibjpeg-turboのフォルダを選択する．

####3. libjpeg-turboのフォルダにbuildフォルダを作成し，そのフォルダを出力先として指定する．

####4. Configureを押し，VisualStudio2017, 64Bitを生成対象とする．Generate，OpenProjectを順に実行し，VisualStudioを起動させる．
32Bit版も必要なら以降同様の手順でビルドする．

####5. VS上でALL_BUILDのソリューションを右クリックし，ビルドを選択する
   上部タブの「ローカルWindowsデバッガー」で実行すると
   実行に失敗したと表示されるが，無視してOK
   
####6. 作成したbuildのDebugに生成されたバイナリデータや実行ファイルが存在する．
VisualStudio2017 on Windows10でビルドしたバイナリファイルは以下参照．
GETメソッドとPOSTメソッド（自己学習用）

#この前のLTでゴニョゴニョ・・・
初めて社内の勉強会でLT。
x-hackさんで作ったWEB API使ってアプリを作ったのをもとに進めていた途中で・・・

GETとPOSTってどう違うんだっけ

適当にお茶を濁してしまったがこれではいけない。

正直ググったりすればいいのだが、自分で手を動かさないと覚えられない。

#そもそもHTTPってなんだっけ？
⇒WEBページを閲覧するため、WEBサーバと通信を行うプロトコル。
⇒HTMLをやりとりするために定められたプロトコル。
⇒WEBサーバとWEBクライアントが通信するための共通のプロトコル。
⇒ステートレス・プロトコル

FTPは状態を持つプロトコル。HTTPは状態を持たないプロトコル。

#ホームぺージが表示される流れ（今更）

【HTTPリクエスト】
WEBクライアント→→→→→→WEBサーバ（クライアント側がHTMLを要求する）

【HTTPレスポンス】
WEBクライアント←←←←←←WEBサーバ（サーバ側が要求されたHTMLを返す）

#今回はHTTPリクエストについて
この中にGETメソッド、POSTメソッドが含まれる。
レスポンスはおなじみ404とか500とかのやつ。

#GETメソッドとPOSTメソッドの違い

##【GETメソッド】
・送られる情報はURLの後ろに書かれる。？以降がそう。これをクエリ文字列と呼ぶ。
（例）https://qiita.com/search?q=java

URLに表示される故に、パスワードなど重要な情報を送る際は絶対に使ってはいけない。

・サーバから情報を取得してくる時に使用する。
　APIでデータを取得する際に使いますね。

・パラメータの長さに制限がある。つまり、大量のデータは送れない。

・どこからアクセスしても同じ結果が得られる。

##【POSTメソッド】
・送られる情報はメッセージ・ボディに書かれる。

故に、URLに表示されないため第三者に情報が見られる可能性が少ない。
（ただし完璧に安全ではなく、解析されたら見られる）

・サーバへ情報を登録する時に使用する（データベースへの格納など）

・パラメータの長さに制限がない。

・アクセスごとに固有の結果が得られる。



#参考文献・サイト
・https://qiita.com/Sekky0905/items/dff3d0da059d6f5bfabf
・https://itsakura.com/network-http-get-post
・小森 裕介　(2010/4/10)『「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか』技術評論社
・掌田 津耶乃 （2018/8/25）Node.js超入門[第2版] 秀和システム


#最後に
・もっとJS書く。
・環境構築（vagrant）周りの知識も。
「Rustのstrをコピーなしで連結する」のは危険かもしれない

# はじめに
この記事は「[Rustのstrをコピーなしで連結する](https://qiita.com/dalance/items/0455d1935d14fda0a0a4)」の続きです。
前回の記事でstrを連結する関数を提供するクレートとして[str-concat](https://crates.io/crates/str-concat)を紹介しました。
しかしこのstr-concatは2020/02/07にv0.2.0をリリースした上で、過去のバージョンを全て削除しました。これは依存ライブラリが全てコンパイルできなくなるような大変更です。
この記事では、変更の内容とその理由について説明します。

# 変更点
元々str-concatはsafeな関数として提供されていました。
なぜsafeにstrを連結できる（と考えられていた）かは[前回の記事](https://qiita.com/dalance/items/0455d1935d14fda0a0a4)をご覧下さい。

これがv0.2.0ではunsafeとなり、safeに使うためにユーザが満たすべき条件が明示されました。

その条件とは「連結する2つのstrが一度に割り当てられたメモリ領域に属すること」です。

# 何がまずいか
別々に割り当てられたstrがたまたま隣接するケースを考えます。

```rust
let buf1 = [0; 16];
let buf2 = [0; 16];
if let Ok(combined) = concat_slice(&buf1, &buf2) {
    let x = combined[20];
}
```

この`buf1`と`buf2`はスタックに隣接して積まれるのでstr-concatで連結できます。しかし生成されたstrへのアクセス`combined[20]`は未定義動作を踏んでいます。
`combined[20]`は`combined`の先頭アドレスに対し`add(20)`を呼ぶことで行われます。この`add`はunsafeな関数であり、ドキュメントには「以下の条件に違反すると未定義動作となる」と書かれています。

* Both the starting and resulting pointer must be either in bounds or one byte past the end of the same allocated object. Note that in Rust, every (stack-allocated) variable is considered a separate allocated object.

* The computed offset, in bytes, cannot overflow an isize.

* The offset being in bounds cannot rely on "wrapping around" the address space. That is, the infinite-precision sum must fit in a usize.

ここで違反しているのは1つ目の「addの元アドレスと加算後のアドレスが同じ割り当てオブジェクトに属している」です。

実際にLLVMの最適化によって`buf2`が初期化されず`x`に不定な値が入る例が報告されています。


# 正しい使い方

str-concatの関数はunsafeになっただけで使い方は変わりません。
unsafe関数を呼ぶ人が「連結対象の2つが一度に割り当てられたメモリ領域に属すること」を保証する必要がある、ということです。

```rust
fn main() {
    // コンパイルは通るがNG
    let buf1 = [0; 16];
    let buf2 = [0; 16];
    if let Ok(combined) = unsafe { str_concat::concat_slice(&buf1, &buf2) } {
        let x = combined[20];
    }

    // buf1とbuf2はどちらもbufに属するのでOK
    let buf = [0; 32];
    let buf1 = &buf[0..16];
    let buf2 = &buf[16..32];
    if let Ok(combined) = unsafe { str_concat::concat_slice(&buf1, &buf2) } {
        let x = combined[20];
    }
}
```
Goでシグナルを監視する君を書いた

# tl;dt
https://github.com/nozo-moto/signal_kansitai

# 目的
ちょっとした調査、アプリケーションにどんなシグナルが送られてくるか知りたかった

# 方法
Go言語は以下のようにすると作成したgoroutineにシグナルがあるとハンドリングできます。

``` go
c := make(chan os.Signal)
signal.Notify(c)
go func() {
	for {
		s := <-c
		log.Println("signal :", s)
		}
	}
}()
```

よしなにロギング
標準出力とログファイルに書き出したかったので`io.MultiWriter`を利用

``` go
logfile, err := os.OpenFile("./signal.log", os.O_APPEND|os.O_CREATE|os.O_WRONLY, 0666)
if err != nil {
	panic("cannnot create log :" + err.Error())
}
defer logfile.Close()
log.SetOutput(io.MultiWriter(logfile, os.Stdout))
log.SetFlags(log.Ldate | log.Ltime)
```

こんな感じでシグナルをハンドリングして流してくれる

``` sh
% tail -f signal.log
2020/02/09 21:48:01 alive :
2020/02/09 21:49:01 alive :
2020/02/09 21:50:01 alive :
2020/02/09 21:50:33 signal : hangup false
```

SIGTERMが送られてきたら落とすようにしました。60秒に一回生存確認をしています。
また、SIGKILLとかのハンドリングできない系はハンドリングできずに死にます。

# 知見
SIGWINCHというターミナルのWindowサイズの変更のシグナルがあることを知った。
PodmanでKeycloakを起動してみる

# 環境

Fedora CoreOS 31.20200113.3.1
Podman 1.7.0
Podman Compose 0.1.5

# 準備

```
$ sudo sed -i --follow-symlinks 's/SELINUX=enforcing/SELINUX=permissive/g' /etc/sysconfig/selinux
$ sudo reboot
$ sudo rpm-ostree install python3 -r
$ sudo pip3 install podman-compose
$ mkdir -p ~/.local/bin
$ curl -o ~/.local/bin/podman-compose https://raw.githubusercontent.com/containers/podman-compose/devel/podman_compose.py
$ chmod +x ~/.local/bin/podman-compose

$ mkdir data
$ chmod 777 data
```
# ファイル

```docker-compose.yml
version: '3.7'
services:
  mariadb:
      image: mariadb:10.4.12
      restart: always
      volumes:
        - ./data:/var/lib/mysql
      ports:
        - 3306:3306
      environment:
        MYSQL_ROOT_PASSWORD: root
        MYSQL_DATABASE: keycloak
        MYSQL_USER: keycloak
        MYSQL_PASSWORD: password
  keycloak:
      image: jboss/keycloak:8.0.2
      restart: always
      ports:
        - 8080:8080
      environment:
        DB_VENDOR: mariadb
        DB_ADDR: mariadb
        DB_DATABASE: keycloak
        DB_USER: keycloak
        DB_PASSWORD: password
        KEYCLOAK_USER: admin
        KEYCLOAK_PASSWORD: password
      depends_on:
        - mariadb
```

# 実行

```
$ podman-compose up -d
$ podman ps

CONTAINER ID  IMAGE                              COMMAND     CREATED        STATUS            PORTS                   NAMES
9aa7329ab5b3  docker.io/jboss/keycloak:8.0.2     -b 0.0.0.0  2 minutes ago  Up 2 minutes ago  0.0.0.0:3306->3306/tcp  keycloak_keycloak_1
d630bc1c0f7f  docker.io/library/mariadb:10.4.12  mysqld      2 minutes ago  Up 2 minutes ago  0.0.0.0:3306->3306/tcp  keycloak_mariadb_1

$ podman exec -it keycloak_keycloak_1 bash

# Admin CLI コマンドで「SSL required」を「NONE」に変更
# Keycloakのデフォルト設定だと「SSL required」項目により、SSL通信が必須
# HTTP通信で使うために設定を変更
# 管理者ID（ここではadmin）で認証情報を設定する

bash-4.4$ /opt/jboss/keycloak/bin/kcadm.sh config credentials \
--server http://localhost:8080/auth \
--realm master \
--user admin \
--password password

# レルム「master」のSSL requiredを「NONE」に変更
bash-4.4$ /opt/jboss/keycloak/bin/kcadm.sh update realms/master -s sslRequired=NONE

bash-4.4$ exit
```
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208807/5b00dd2b-cfc6-553d-68bf-2e03778838f0.png)
![2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208807/f01814ce-b129-74f0-1cd8-f1f7fa6cb40b.png)
![3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208807/0ed1629c-09a7-d866-f388-a7d39d9242ef.png)
深層学習　まとめ


[万能近似定理の説明]:

物理研究者向けのニューラルネットワーク入門 (基本編)
http://hpc-phys.kek.jp/workshop/workshop191107/tomiya_191107_lecture.pdf

[keras]:

脳死で覚えるkeras入門
https://qiita.com/wataoka/items/5c6766d3e1c674d61425

初心者のための畳み込みニューラルネットワーク（MNISTデータセット + Kerasを使ってCNNを構築）
(画像データの正規化など)
https://www.codexa.net/cnn-mnist-keras-beginner/


[VGG, GoogLeNet, ResNet]:

深層学習論文の読解（VGG）
https://qiita.com/ttomomasa/items/b673a1e0b42a2a14a9d2

畳み込みニューラルネットワークの最新研究動向 (〜2017)
https://qiita.com/yu4u/items/7e93c454c9410c4b5427

Residual Network(ResNet)の理解とチューニングのベストプラクティス
https://deepage.net/deep_learning/2016/11/30/resnet.html

　
[R-CNN, Fast R-CNN, Faster R-CNN]:

最新のRegion CNN(R-CNN)を用いた物体検出入門 ~物体検出とは? R-CNN, Fast R-CNN, Faster R-CNN, Mask R-CNN~
https://qiita.com/arutema47/items/8ff629a1516f7fd485f9

論文紹介: Fast R-CNN&Faster R-CNN
https://www.slideshare.net/takashiabe338/fast-rcnnfaster-rcnn

　
[YOLO]:
【物体検出手法の歴史 : YOLOの紹介】
https://qiita.com/mdo4nt6n/items/68dcda71e90321574a2b

　
[VAE]:
Variational Autoencoder徹底解説
https://qiita.com/kenmatsu4/items/b029d697e9995d93aa24

AutoEncoder, VAE, CVAEの比較　〜なぜVAEは連続的な画像を生成できるのか？〜
（Reparametrization Trickについても記載）
https://qiita.com/kenchin110100/items/7ceb5b8e8b21c551d69a

　
[RNN, LSTM]:

リカレントニューラルネットワークの勾配消失問題対策
（わかりやすい）
https://itisit.hateblo.jp/entry/2019/02/24/%E3%83%AA%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%88%E3%83%8B%E3%83%A5%E3%83%BC%E3%83%A9%E3%83%AB%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%E3%81%AE%E5%8B%BE%E9%85%8D%E6%B6%88%E5%A4%B1%E5%95%8F

時系列データによく使用されるリカレントニューラルネットワークについて
https://kenyu-life.com/2019/03/05/recurrent_neural_network/

RNNとLSTMを理解する
http://sagantaf.hatenablog.com/entry/2019/06/04/225239

RNNの問題点とLSTMについて
https://mrsekut.site/?p=889

(記事作成中)
RaspberryPi4 DDNS編

#はじめに
停電とか起きてもRaspberryPiにドメインアクセスできるようにieServer + systemdで自動化する。

# ieServerの登録
ココらへんを参考に登録する
https://www.akakagemaru.info/port/ieserver.html

# スクリプトの準備
```bash
mkdir ~/ddns
cd ~/ddns
wget http://ieserver.net/ddns-update.txt
mv ddns-update.txt ddns-update.pl
vim ddns-update.pl
```
ddns-update.plは`shift-jis`なのでvimで`:e ++enc=shift-jis`でエンコード指定して開く
以下の設定を自身の登録内容に合わせて設定する

```pl:ddns-update.pl
$ACCOUNT         = "xxxxxxx";     # アカウント(サブドメイン)名設定
$DOMAIN          = "orz.hm";     # ドメイン名設定
$PASSWORD        = "xxxxxxx";     # パスワード設定
```

実行してみて、グローバルIPが表示されればOK

```bash
./ddns-update.pl
cat current_ip
 xxx.xxx.xxx.xxx # 自分のグローバルIP
```

# systemdへの登録
`/etc/systemd/system/ddns.service`を作成

```bash:ddns.service
[Unit]
Description=ddns update script

[Service]
Type=simple
WorkingDirectory=/home/pi/ddns/
ExecStart=/usr/bin/perl /home/pi/ddns/ddns-update.pl

[Install]
WantedBy=multi-user.target
```
`/etc/systemd/system/ddns.timer`を作成

```bash:ddns.timer
[Unit]
Description=ddns update timer

[Timer]
OnCalendar=*-*-* 0,12:00
Unit=ddns.service

[Install]
WantedBy=multi-user.target
```

### 起動許可
```bash
sudo systemctl enable ddns.timer
sudo reboot
# 再起動後
sudo systemctl status ddns.timer
```
指定した時間に`~/ddns/current_ip`が更新されていればOK
確認前に一度削除しておくと良いかも

以上
練習用リポジトリの作り方

#### この記事のきっかけ
実務外の勉強内容をアウトプットしてCTOに見てもらうためgithubに練習用公開リポジトリを作ろうと思い立ちました。


1.ローカルに作業ディレクトリを1つ作成する。（例：practiceディレクトリの中にindex.htmlだけ作る）

2.Github内にローカルと同じ名前のリモートリポジトリを作る

3.ローカルリポジトリとリモートリポジトリを紐付ける


```
3-1. terminalでルートディリクトリまで移動する(例：cd practice)
$ git init

これで、practiceという名前のローカルリポジトリができる


3-2. ルートディリクトリにあるものをインデックスに登録
$ git add .


3-3. インデックスに登録されたことをコミットする
$ git commit -m "first commit"

3-4. githubのリモートリポジトリのURLをコピーしてくる
$ git remote add origin リモートリポジトリのURL

3-5.ローカルリポジトリの内容をリモートリポジトリにpushする
$ git push -u origin master

```

これでできました
たくさんアウトプットしましょう!
SQLのUNIONについて④

前回、型が不一致なケースについて説明し損ねてしまった……。
ということで、今回は型が一致しないケースについて説明しようと思います。
使用するテーブルは以下の二つ。

|INT型| 
|:-----|
|1   |
|2   |
|3   |

|CHAR型| 
|:-----|
|A   |
|B   |
|C   |

これらの二つのテーブルは、列数こそ一致していますが、
それぞれの型が一致していないのでUNIONで統合しようとしてもエラーになってしまいます。
これらのテーブルをどうしても統合したい場合は、どちらかのテーブルの型を修正することになるでしょうか。
今回のケースでは、INT型の方のテーブルを修正することにします。

|CHAR型| 
|:-----|
|1   |
|2   |
|3   |

このように修正したテーブルに対してUNIONを使用すると、以下のようになります。

|CHAR型| 
|:-----|
|1   |
|2   |
|3   |
|A   |
|B   |
|C   |
DJI TelloでOMPLを用いた自律飛行ドローンのナビゲーション - 6.7. point_cloud2から3D octomapの生成

DJI Tello等ドローンの自律飛行を実現するには、3D環境でナビゲーション経路を計画としてOMPL（Open Motion Planning Library）を試してみます。

# 目次
1. [OMPLのインストール](https://qiita.com/k-koh/items/4f7e441d1225e6580f82)
2. [OMPLの基礎](https://qiita.com/k-koh/items/9933cd29599c859cac45)
3. [OMPL.appの入門](https://qiita.com/k-koh/items/fe1f05313045ed729c8b)
4. [OMPLの使用](https://qiita.com/k-koh/items/3a8b372537aa29e17863)
5. DJI Telloの使用
    1. [DJI Telloのフロントカメラのcamera_calibration](https://qiita.com/k-koh/items/094631646931ea5bc2bb)
    2. [Visual SLAM ORB_SLAM2 用のカメラキャリブレーションYamlファイルの作成](https://qiita.com/k-koh/items/b524fc175198e701bdff)
    3. [DJI Telloのカメラ でVisual-SLAMのORB-SLAM2 を動かしてみた](https://qiita.com/k-koh/items/98b5f079f784b22dcd01)
6. navigationスタックの使い方
    1. [Turtlebot3 NavigationをGazebo Simulationで動かしてみた](https://qiita.com/k-koh/items/1a4fbc175ca37be6206b)
    2. [Turtlebot3 Navigationでmap_fileの代わりにSLAMを使用](https://qiita.com/k-koh/items/1ec9097e4afedd0b43ca)
    3. [ARdroneのシミュレーターをGazeboで動かす](https://qiita.com/k-koh/items/feccbaee7c11c43c3ab4)
    4. [AirSimのシミュレーターを動かす](https://qiita.com/k-koh/items/52122fb5e96336ac8d33)
    5. [octomapのインストール](https://qiita.com/k-koh/items/c9a3a87e043934456842)
    6. [単眼カメラでORB_SLAM2から3D point clouodの生成](https://qiita.com/k-koh/items/1e069c9dda43b85e2fa0)
    7. [point_cloud2から3D octomapの生成](https://qiita.com/k-koh/items/01e34f353487eb8a6e26)　← いまココ
7. OMPLで3D 経路計画
    1. [状態空間環境のセットアップ](https://qiita.com/k-koh/items/e19ac08bb0a16975081e)

## 動作環境
- Ubuntu 18.04
- ROS Melodic
- Tello EDU

## point_cloud2から3D octomapの生成

単眼カメラでORB_SLAM2から生成した3D point clouodをoctomap_serverに入力することで3D octomapを生成します。

octomap_serverを起動

```xml
<launch>

<node pkg="octomap_server" type="octomap_server_node" name="octomap_server">
  <param name="resolution" value="0.05" />

  <!-- fixed map frame (set to 'map' if SLAM or localization running) -->
  <param name="frame_id" type="string" value="/odom" />

  <!-- maximum range to integrate (speedup!) -->
  <param name="sensor_model/max_range" value="5.0" />

  <!-- data source to integrate (PointCloud2) -->
  <remap from="/cloud_in" to="/orb/point_cloud2" />
</node>

</launch>
```

![ORB_SLAM2_monocular_octomap-2020-02-09_21.31.20.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/386259/fc6bfdf3-687d-fb0e-f35b-c069f41c6791.gif)

Prev: 6.6. [単眼カメラでORB_SLAM2から3D point clouodの生成](https://qiita.com/k-koh/items/1e069c9dda43b85e2fa0)

Next: 7.1. [状態空間環境のセットアップ](https://qiita.com/k-koh/items/e19ac08bb0a16975081e)
Google SpreadSheetのQueryで常にColN(Col1,Col2...)を使う

# TL;DR
Query関数の第一引数で指定する範囲を`{}`で囲み、クエリ文は `Col1, Col2`で参照する

# Query関数について
GoogleスプレッドシートにはQuery関数があります。
Query関数を使うと計算や集計したいセル範囲をSQL DBのテーブルデータのようにみなし、SQLのようなクエリを発行することができます。

会社の巨大なExcel予算表でよく見かける、大量の集計元データに対し、1対1で対応するセル全てに大量の集計用関数を記述した結果、激重だったり、うっかり一部を書き換えて誤集計して気づかない、といった大変残念な状況を回避できます。
ArrayFormula同様、表計算ソフトを使う人全てが使って欲しい機能です。

# 問題点

select文が使えるクエリ言語ですが、GoogleのドキュメントやWeb記事のサンプルはカラムの指定は「列名(A,B,Cなど)」となっている記事が多いようです。
この列名(A,B,Cなど)を使った場合、元データのセル範囲を別の列範囲(J,K,Lなど)に移動することができません。
うっかり移動するとQuery関数に「#VALUE!」と表示されて悲しい思いをします。

## 悲しい例

↓のような表(A～H列)に対し、FormulaにあるようなQueryがResultセルに記載しているとします。
![sample1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227750/48a4c5bd-2800-b84c-e618-509fec4dc37c.png)

この表を別の列(J～Q列)に移動すると、Query文のセル範囲をJ～Q列に書き換えてもエラーが発生します。
![sample2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227750/7ea49416-7f29-18e9-7f84-54bcdc53cbd6.png)

Query文の列指定がA～C列になっているためですね。
集計元データを移動すると、Query文のセル範囲はきちんと移動先の範囲に変わってくれますが、Query文の中のselect文は残念ながら書き換わりません。
簡単なクエリ文ならちまちま書き換えてもいいですが、SUMやLABELまで使うと面倒くさくてやってられません。
Googleスプレッドシートのドキュメントのサンプルはこの列名を使う方法が書かれています。

## Webの事例

集計元データをうかつに移動することができないと、何かと不便です。
ググったところ、列名ではなくColN(Nは番号でCol1,Col2など)で参照している記事を見つけました。

- Query文を入れ子にする記事
    - 2つ目のQuery文では列名ではなくColN形式で参照
    - 例: `=Query(Query(A1:D7, "select *"), "select Col1,Col2")`
- 複数のセル範囲を結合する記事
    - 結合結果は列名ではなくColNで参照
    - 例: `=Query({範囲1;範囲2}, "select Col1,Col2")`

こんな感じでした。

## 悲しくない例

こんなに長い文章を書いて、かなり疲れて来たので結果です。
単一のセル範囲でも`{}`で囲むことで、列名ではなくColN形式で参照できるようになりました。
集計元データを移動しても、こんな風にエラーにならずに済むようになりました。
![sample3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227750/2adf5e71-f94f-d73d-3de7-641fba0557b3.png)

セル範囲は、もちろん名前付き範囲でも大丈夫でした。
`=Query({範囲1}, "select Col1, Col2")`

# おわりに
列名に対してColNだと、どの列を対象にしているかわかりにくいのが難点といえば難点に思いました。
もしかしたら突然使えなくなるかも知れませんが、自分は列名ではなくColNを使うつもりです。
間違っていたり、もっといい例があったら教えてもらえると嬉しいです。

GASを使ってフィールド名で指定できるようにする高度な方法を編み出していた方もいらっしゃるので、フィールド名を使いたい方はQiitaを探してみるといいと思います。
Gradle超簡単入門

##Gradleは何ですか？
<img width="418" alt="スクリーンショット 2020-02-09 17.54.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457891/9d8a94d1-cd88-42e7-389d-df14c5870b5c.png">

Gradleはオーペンソースの自動化システムビルドツールであり、プロジェクトの設定宣言のMavenが利用されているXMLではなく、Groovyという固用言語(DSL)を利用しています。
世の中に、主なシステムビルドツールはAnt、Maven、Gradleです。簡単に言えば、以下のように各ビルドツールの機能をまとめています。
<img width="576" alt="スクリーンショット 2020-02-09 22.15.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457891/ca2d572d-b0a6-4c29-5df2-d355d1cfddfb.png">


##Gradleプロジェクトの作成
筆者はIntellij IDEAを利用しているので、直接にIntellijからインストールを紹介されていただきます。

STEP１：
Intellijを開き、「Create New Project]をクリックしてください。
<img width="779" alt="スクリーンショット 2020-02-09 15.25.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457891/fcfbf61c-54e5-f581-6b0c-298058043707.png">

STEP２：
Gradleプロジェクトを作成します。
<img width="1210" alt="スクリーンショット 2020-02-09 15.26.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457891/1de6da34-d607-0fae-6193-2006868704df.png">
<img width="1214" alt="スクリーンショット 2020-02-09 15.26.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457891/e77912a9-2b84-9d35-52cd-b8e4952c3e30.png">

STEP3: 
プロジェクトを作成しました。
<img width="1279" alt="スクリーンショット 2020-02-09 15.27.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457891/b4a23e94-4dd0-c763-6cf5-83f390e846a6.png">

##Groovyの紹介
Groovyに興味があるの方は以下の文章をご参考ください。
https://qiita.com/Jenny1025/items/b27b8a90605a7b8e62b0

##build.gradleについて
1.まず、pluginの定義です。

```groovy

plugins {
    id 'java'
    id 'application'
}
```

2.次は依存の紹介です。

```groovy
dependencies {
    testCompile group: 'junit', name: 'junit', version: '4.12'
}
```
3.次に、リポジトリの定義です。

```groovy
repositories {
    mavenCentral()
}
```
Groovy超簡単入門

##Groovyの紹介
Groovyは2003年開発されたJavaプラットフォームで動作する動的プログラミング言語であり、直接スクリプトで実施することを特徴としています。

##Groovyプロジェクト作成

まずは、簡単なJava Beanを作ります。

```java

public class Cat{

    /**The name of the cat*/
    private String name;

    /**The age of the cat*/
    private int age;

    /**Constuct*/
    public Cat(String name, int age) {
        this.name = name;
        this.age = age;
    }

    /**Get the cat name*/
    String getName() {
        return name
    }

    /**Set the cat name*/
    void setName(String name) {
        this.name = name
    }

    /**Get the cat age*/
    int getAge() {
        return age
    }

    /**Get the cat age*/
    void setAge(int age) {
        this.age = age
    }
}
```

##GroovyとJavaの比較
GroovyとJavaを比べると以下の特徴を持っています。

1. 行末のセミコロンは省略できる。
2. returnは省略できる。
3. getter/setterは自動で作られる。
4. `==` によるオブジェクトの比較は、自動的に `equals` による比較となり、null チェックの必要がない。

```groovy

public class Cat {
    private String name  /**The name of the cat*/
    private int age /**The age of the cat*/
    /**Constuct*/
    public Cat(String name, int age) {
        this.name = name
        this.age = age
    }
}

Cat cat = new Cat("wow", 1);
print cat.name;
```

NullPointerException チェック

```groovy
public class Cat {
    private String name  /**The name of the cat*/
    private int age /**The age of the cat*/
    /**Constuct*/
    public Cat(String name, int age) {
        this.name = name
        this.age = age
    }
}

Cat cat = new Cat("wow", 1);
print cat.name;
Cat cat1 = null
print cat == cat1
```

コンパイル成功！

<img width="1188" alt="スクリーンショット 2020-02-09 16.22.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/457891/89bcbb13-3a45-3dfb-26aa-6f6f89dd2834.png">
社内向けのコーディングテストを行なっての感想

##記事の目的
デザインを元にTOPページの作成を行い、その中で調べたことなどを自分のためにアウトプット
その中で何が有益だったか、
今後時短するために活かせそうかについてまとめました。

##CSS設計

命名規則はBEM
Block Element Modifierの略で,
Block => でかい括り
Element => でかい括りの中にいる要素
Modifier => 上記2つの変化球
の3つに分けて考えていくことでCSSを設計･命名していく手法

・BlockとElementの区切りはアンスコ2個（__）
・BlockまたはElementとModifierの区切りはハイフン2個（--）
・ModifierのKeyとValueの区切りはアンスコ1個(_)
人によってここのルールは違ったりします。

・クラスの命名、特にblockに当たる部分をユニークなクラス名に、elementは使い回しで（"〇〇_area" "〇〇_block"など）
コメントアウトで省略されていないクラス名をメモしておくと、後から修正する際にわかりやすい。
・HTMLのデフォルトスタイルを初期化する場合以外で、HTML要素をセレクタに用いない。
・HTMLのタグによるスタイル適用はなるべくしない
・単語の省略はなるべくしない
・基本的にimportant!は使わない
・CSSのセレクタにidは使わない

##sassコンパイル
SCSSを使うことがほぼ必須になっているため、コンパイルする方法を必ず知っておかなければならないと思います。

<b>・gulp</b>
一度定義したタスクやインストールしたプラグインを開発者間で共有でき、チーム内で一定の品質を保った開発ができるようになる
https://ics.media/entry/3290/

<b>・koala</b>
直感的に操作ができるアプリケーションソフト
https://uxmilk.jp/38139

<b>・Live Sass Compiler</b>
VScodeの拡張機能によるコンパイル
ちょっとした開発に便利
https://webdesign-trends.net/entry/9295


##flex
クラス名をBEMに乗っ取って管理できていないと訳が分からなくなる。
flexさせるアイテムはModifierとして扱うか、別のクラス名をつけると扱いやすく修正しやすくなった。
チートシートを見ながら進めるとわかりやすい
https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

<b>order … 順序の指定</b>
display: flex; が指定された要素の中にある子要素（Flexアイテム）に指定するプロパティー。親要素に display: flex; が指定されていないと動作しないので注意。
Flexアイテムに　```order: 2;``` と指定すると、Flexアイテム内で二番目に移動する。

<b>片方可変、片方固定のカラムレイアウト</b>
https://www.nxworld.net/tips/css-variable-width-and-fixed-width-layout.html

##slider
プラグインslickを使った実装。
実装の方法からオプションの設定まで説明している記事が出てくるので、ググる力が大切だと感じました。
「arrows」と「dots」の変更は、オプションでそれぞれにクラスを付与し、CSSで調整
https://webdesignday.jp/inspiration/technique/jquery-js/3847/
https://gimmicklog.com/jquery/549/
https://www.jungleocean.com/programming/190201jquery-slick
https://takblog.site/web/?p=117

##position
```position: absolute;```を使う際に
親要素にpaddingがあった場合は、paddingを含めた大きさが親要素の大きさとなるので注意

##Photoshop文字設定とCSSプロパティの相互関係
忘れがちなので覚えておきたい
https://sole-color-blog.com/blog/31/


##作業スピードを上げるために
<b>VScodeの便利な拡張機能</b>
下記リンクで紹介されている便利な機能使いこなして使いやすくしていきたい
https://qiita.com/sensuikan1973/items/74cf5383c02dbcd82234
https://ics.media/entry/18544/

<b>Clipy</b>
クリップボードにコピーした内容をストックしておけるアプリ
よく使う文章を定型文として保存しておける
https://www.infact1.co.jp/staff_blog/webmarketing/14006/

<b>作業時間を意識する</b>
アプリなど使って作業時間を測って時間を意識する
https://toggl.com/app/timer

よく使うレイアウトなどは、自分の中でテンプレートとして頭の中で準備できているようにしたい

<b>Visual Studio Codeでファイル名の検索</b>
command⌘ + P
今まで知らなくていちいち探していた

<b>ソースマップ</b>
ソースマップがあるとデベロッパーツールでscssの場所が表示されるようになる。
今まではプラグインのインストールが必要だったが
gulp4からソースマップ組み込みサポートが追加。gulp-sourcemapsプラグインはもう必要ない。
https://qiita.com/hibikikudo/items/493fbfbbea183c94b38b
https://magnets.jp/web_design/10404/
fast.aiの参考になるサイト

Colab用のコード
https://github.com/lilacs2039/ColabNotebooks/blob/master/fastai/fastai%E8%AA%AC%E6%98%8E%E7%94%A8%E3%82%B3%E3%83%BC%E3%83%89.ipynb

講義ノート
https://github.com/hiromis/notes

講義ノート２　2018年版もある！
https://github.com/cedrickchee/knowledge/blob/master/courses/fast.ai/deep-learning-part-1/2019-edition/lesson-1-image-recognition.md

kaggleでの参考
https://github.com/fastai/course-v3/blob/89da6fd6e7b9e9848fcae3fe99817368bcfbe237/docs/start_kaggle.md