OmniAICreator/Qiita-1.07M huggingface dataset:
複数のファイル名の頭を指定した文字数分だけ一括削除する

すんごい大量のファイルの、名前を、頭から指定した文字数だけ削除したい

##たいしたことない特徴
・大量のファイルが入っている親のフォルダを.py内で指定
・ターミナルで実行
・何ファイルあっても大丈夫

##注意！！必ず守ってください
変更したいファイルでやる前に、どうでもいいファイルでテストしてみるか、ファイルを複製しておいてくださいね。消しちゃいけない文字まで消した時にもし後戻りできないと悲惨なのと、責任は負えません。

##ファイルの場所
``'/Users/hogehoge/test_folder/'``
この「folder」の下に以下のような名前の大量のファイルがあると仮定します

消したい文字fileA.txt
消したい文字fileB.txt
消したい文字fileC.txt
消したい文字fileD.txt
（以下大量）

**期待する結果**
fileA.txt
fileB.txt
fileC.txt
fileD.txt
（以下大量）

##変えるところ
以下のコードの
``path1``と、``new_name``の中身です


##コード

```test.py
import glob
import os
 
path1 = '/Users/hogehoge/test_folder/'
path2 = path1 + '*'

flist = glob.glob(path2)

i = 1
# ファイル名を一括で変更する
for file in flist:
    print('ファイル名:',file)
    onlyfile = os.path.split(file)[1]
    #以下の[0:]の数字を消したい文字数に変更してください
    #「消したい文字fileA.txt」の場合→[6:]
    new_name = onlyfile[0:]
    os.rename(file, path1 + new_name)
    i+=1
 
```
__init__.py を作るのが地味に面倒なのでショートカット作った

小ネタです。

Python でパッケージ切るのに毎回 `__init__.py` を touch するわけですが、 `__init__.py` って微妙にタイプしづらくて面倒くさくないですか？面倒くさいですよね...？まれに `touch __init.py` ってタイプしてしまって「ああ、もう」みたいな気持ちになった人、私だけじゃないはず。。。


ということでシェルから叩けるようにしてみました。ソースはこちら。

https://gist.github.com/hassaku63/956daea19d7542dbd82246ffdeaac2d1

```zsh

# 
# 引用: https://gist.github.com/hassaku63/956daea19d7542dbd82246ffdeaac2d1
# 

function make-pypkg-dir () {
    curdir=$(pwd);
    created_dir=$(dirname $1)/$(basename $1);
    mkdir $1 \
        && touch ${created_dir}/__init__.py \
        && echo "${created_dir}/__init__.py is created."
}
```

.bashrc もしくは .zshrc に入れて使っています。

> make-pypkg-dir path/to/package/dir/

のように使用します。function はシェルの補完が効くので、多少タイプは楽になりました。でもPython公式でなんかしら対応するツールがあるならそっちに乗り換えたい。

シェルに明るくないため、エラーハンドリングは現状適当です。シェルの rc に置いとくのも正解なのかどうかよくわかってない。 コマンドとしてきちんとしたものが作れたなら `/usr/local/bin` など、ユーザー空間でパスが通ってる場所に置いとくとかの方が正解のような気もしますが、あくまでちょっとしたショートカットでしかないので現状の rc で定義ベタ書きで使うのでもええかな、、という気もします。

シェル芸人の先生から more better なアプローチがあればフィードバックいただけたら嬉しいです
【PHP Apache】ソースコードが表示される

LAMP環境構築の際、Apacheによりブラウザにindex.phpを表示させようとすると、ソースコードが表示されたので解決した方法をメモ。

下記ファイルをエディタで編集。

```


sudo vi /etc/apache2/httpd.conf

```


下記コメントアウト(#)を外す。


```

#LoadModule php7_module libexec/apache2/libphp7.so
↓
LoadModule php7_module libexec/apache2/libphp7.so

```

無事PHPとしてブラウザ表示成功。
備忘録　jQuery 　function(){}が関数だという事を学んだ

#function(){}は関数

```javascript:script.js
$function(){
  $('button').click(function(){
   $(this).hide();
  )};
)};
   ```


clickメソッドの処理の中に、さらにhideメソッドの処理を行うために、
_関数のfunction(){}_がclickメソッドの引数として用いられている。
Chrome、Edgeのブラウザポリシー設定があった (レジストリ値)

## クライアント証明書を自動的に選択する

サイトから証明書をリクエストされた場合に、どのサイトであればクライアント証明書を自動的に選択するかを
レジストリに URL パターンのjsonで指定できます。


### Chrome

* [公式ページ](https://cloud.google.com/docs/chrome-enterprise/policies/?policy=AutoSelectCertificateForUrls)

レジストリ

```vb
SOFTWARE\Policies\Google\Chrome\AutoSelectCertificateForUrls
```

### Edge

* [公式ページ(日本語)](https://docs.microsoft.com/ja-jp/deployedge/microsoft-edge-policies#autoselectcertificateforurls)
* [公式ページ(英語)](https://docs.microsoft.com/en-us/deployedge/microsoft-edge-policies#autoselectcertificateforurls)

```vb
SOFTWARE\Policies\Microsoft\Edge\AutoSelectCertificateForUrls
```

### 全てのページに対して自動で選択させる

* [How do I setup AutoCertificateSelectForUrls in the registry to avoid the certificate popup - Microsoft Tech Community](https://techcommunity.microsoft.com/t5/enterprise/how-do-i-setup-autocertificateselectforurls-in-the-registry-to/m-p/1149019)

> HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Edge\AutoSelectCertificateForUrls

```json
"1"="{\"pattern\":\"https://*\",\"filter\":{}}"
```


## その他気になる設定値

* TLSCipherSuiteDenyList
* InternetExplorerIntegrationLevel
    * NeedIE
* InternetExplorerIntegrationLocalFileExtensionAllowList
* BuiltinCertificateVerifierEnabled
    * ※ これは macのみ。
* EnableSha1ForLocalAnchors
    * このポリシーは、2021 年半ばにリリースされる Microsoft Edge 92 で削除されます。

レジストリ設定例 (有効かどうかは確認できなかった。)
![policy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/76d9212d-cd27-4ffb-b78a-4119fa31f34a.png)

----

以下メモ

## ChromeとEdgeの微妙な違い

* EdgeのほうがChromeよりも初期のセキュリティ設定が高い？
* [@SECLEVEL=0](https://www.openssl.org/docs/man1.1.1/man3/SSL_CTX_set_security_level.html)   
    * Chrome : nginxでclient_verification:onで`@SECLEVEL=0`を用いている場合でもアクセスできる。
    * Edge : `@SECLEVEL=0`を用いてもアクセスできない。

### IE11 (win10)

* TLS1.0、TLS1.1の使用をON、それ以外をOFFの場合アクセスができた。

![IE.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/b36ee4a2-d71c-f57e-2d1e-e12cab986b89.png)


### Firefox

* Firefox 49からは一部サポート
* Firefox 68からESRバージョンではデフォルトで有効。それ以外は無効。
* about:config で設定変えられる。


```sh:
security.enterprise_roots.enabled=true
```
「大学入学共通テスト2021数学ⅠA第1問 配点30 」（2次方程式） をsympyでやってみたい(途中)

内包表記を使えば、もっと短くなると思います。アドバイスをお願いします。
（ka_SI+1）でいいですか？

(問題2021数学ⅠA第1問 配点30)<東進

https://www.toshin.com/kyotsutest/data/285/sugaku-1a.pdf#page=5

https://izu-mix.com/math/?p=3518


```python
# 数学Ⅰ第1問
from sympy import *
from sympy.ntheory.primetest import is_square
var('x a b c D ka_A ka_I ka_U ka_E ka_OKA ka_KI ka_SI ka_SU')
# [1](1)
y=expand(2 * x ** 2 + (4*c-3) * x + (2*c**2-c-11))
ans=factor(y.subs([(c,1)]))
print('#ア・イ・ウ    #',ans)

# [1](2)
ans=solve(factor(y.subs([(c,2)])))
print('#エ・オ・カ・キ#',ans)
if ans[0] <  ans[1]:
   a=ans[1]
else:
   a=ans[0]
print('#ク・ケ・コ・サ#',simplify(5/a))
ka_SI=floor(simplify(5/a))
print('#シ　　　　　　#',ka_SI)

# [1](3)
my_det=simplify(y.coeff(x ** 1)**2-4*y.coeff(x ** 2)*Poly(y, x).coeff_monomial(1))
Ka_SU = 0
for i in range(1, ka_SI+1):
   if is_square(my_det.subs(c,i)):
      Ka_SU=Ka_SU+1
print('#ス　　　　　　#',Ka_SU)

#ア・イ・ウ    # (x - 2)*(2*x + 5)
#エ・オ・カ・キ# [-5/4 + sqrt(65)/4, -sqrt(65)/4 - 5/4]
#ク・ケ・コ・サ# 5/2 + sqrt(65)/2
#シ　　　　　　# 6
#ス　　　　　　# 3
```

# 参考

https://ja.stackoverflow.com/questions/33677/sympy%e3%81%aecoeff%e3%81%ae%e4%bd%bf%e3%81%84%e6%96%b9%e3%82%92%e6%95%99%e3%81%88%e3%81%a6%e4%b8%8b%e3%81%95%e3%81%84

https://ja.stackoverflow.com/questions/73537/%e5%b9%b3%e6%96%b9%e6%95%b0%e3%81%ae%e5%88%a4%e5%ae%9a%e3%82%92-sympy%e3%81%ae%e7%b4%a0%e5%9b%a0%e6%95%b0%e5%88%86%e8%a7%a3factorint%e3%81%a7%e3%81%a7%e3%81%8d%e3%81%be%e3%81%99%e3%81%8b
Photoshop Script(JSX)を使ってレイヤーごとに保存する

##はじめに
普段photoshopを使用している中で「レイヤーごとに書き出し」が不便だと思ったので、勉強がてらPhotoshop Scriptを書いてみました。
既存の素晴らしいものがあるとは思いますが、個人的に必要最低限のシンプルなものがほしかったので簡潔なものになってます。
備忘録的位置づけで簡単な説明を添えてこちらにおいておきます。

##機能＆操作
・常に表示させたいレイヤーはロックしておく(背景や上に乗せるロゴなど共通のもの)
・ロックされているレイヤーは無視して、順番にレイヤーを書き出していく



##コード全文
```javascript

const saveFolderPath = Folder.selectDialog("フォルダを選択してください");

function divideVisibleBylocked(){
    for (i=0; i < activeDocument.layers.length; i++){
        var activeLayer = activeDocument.layers[i]
        if(activeLayer.allLocked == true){
            activeLayer.visible = true;
        }else{
            activeLayer.visible = false;
        }
    }
}

function allLayerSave(){
    for (i=0; i < activeDocument.layers.length; i++){
        var activeLayer = activeDocument.layers[i]
        if(activeLayer.allLocked == false){
            var layerName = activeLayer.name;
            var fileName = layerName + ".jpg";
            var filePath = saveFolderPath+ "/" + fileName;
            activeLayer.visible = true;
            saveJpegImage(filePath);
            activeLayer.visible = false;
        }
    }
}

divideVisibleBylocked()
allLayerSave()


// --------------------------------------------
function saveJpegImage(filePath){
    fileObj = new File(filePath);
    jpegOpt = new JPEGSaveOptions();
    jpegOpt.embedColorProfile = true;
    jpegOpt.quality = 12;
    jpegOpt.formatOptions = FormatOptions.PROGRESSIVE;
    jpegOpt.scans = 3;
    jpegOpt.matte = MatteType.NONE;
    activeDocument.saveAs(fileObj, jpegOpt, true, Extension.LOWERCASE);
}
```

###保存先指定
```javascript
const saveFolderPath = Folder.selectDialog("フォルダを選択してください");
```
###ロックされているレイヤーはすべて表示、されてないレイヤーはすべて非表示に
```javascript
function divideVisibleBylocked(){
    for (i=0; i < activeDocument.layers.length; i++){
        var activeLayer = activeDocument.layers[i]
        if(activeLayer.allLocked == true){
            activeLayer.visible = true;
        }else{
            activeLayer.visible = false;
        }
    }
}
```
###ロックされているレイヤ以外を1つずつ表示して書き出し
```javascript
function allLayerSave(){
    for (i=0; i < activeDocument.layers.length; i++){
        var activeLayer = activeDocument.layers[i]
        if(activeLayer.allLocked == false){
            var layerName = activeLayer.name;
            var fileName = layerName + ".jpg";
            var filePath = saveFolderPath+ "/" + fileName;
            activeLayer.visible = true;
            saveJpegImage(filePath);
            activeLayer.visible = false;
        }
    }
}
```
###jpgでの書き出し
```javascript
function saveJpegImage(filePath){
    fileObj = new File(filePath);
    jpegOpt = new JPEGSaveOptions();
    jpegOpt.embedColorProfile = true;
    jpegOpt.quality = 12;
    jpegOpt.formatOptions = FormatOptions.PROGRESSIVE;
    jpegOpt.scans = 3;
    jpegOpt.matte = MatteType.NONE;
    activeDocument.saveAs(fileObj, jpegOpt, true, Extension.LOWERCASE);
}
```
小ネタ：スプレッドシートでセルの中身が同じだった場合の条件付き書式

### こういう一覧があったときに

![スクリーンショット 2021-01-25 19.32.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59081/83ddba5b-34da-4f00-019a-3aefb0b643f3.png)

### こうしたい

![スクリーンショット 2021-01-25 19.33.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59081/4759a566-47f0-c232-3fd7-a52809b9937e.png)

### こうする

![スクリーンショット 2021-01-25 19.34.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59081/4ec0d47a-98ce-da09-f4f9-3241a50038d9.png)

```
=INDIRECT(ADDRESS(ROW(),COLUMN()))=INDIRECT(ADDRESS(ROW()-1,COLUMN()))
```

### メリット

* 冗長な文字列が消えて綺麗になる
* フィルタをかけたとき、空行ではなくなるのでちゃんとフィルタに引っかかってくれるようになる
GitHubエコシステムを活用してスライドシステムを作ったよ

# こんなスライドをGitHubPagesで簡単に公開できるヤバイやつを作りました。

![preview.gif](https://raw.githubusercontent.com/mikkame/reveal-pon/gh-pages/preview.gif)

# [https://github.com/mikkame/reveal-pon](https://github.com/mikkame/reveal-pon) お試しはこちら

# GitHubエコシステム？

**GitHubエコシステム**という言葉があるのかはさておき
このプロジェクトではGitHubの下記の機能を使用しています。

- GitHub Repository
  - ソース管理
- GitHub Actions
  - スライドのジェネレート
  - OGP画像(gif)の作成
- GitHub Pages
  - 静的サイトホスティング

# 使い方

**reveal-pon**は**GitHub Template Repository** として提供しています。
**fork**とは違い新しいリポジトリ名を付けたり、複数個コピーしたりできます。

1. [https://github.com/mikkame/reveal-pon](https://github.com/mikkame/reveal-pon) にアクセス！
2. **Use this template** をクリック！
3. お好きな名前を入力
4. Settings > GitHub Pages > SourceからGitHubPagesを有効化
5. src/slide.md を編集して
6. コミット＆プッシュ！
7. しばらくすると公開されます。


# どうやってつくったか

[https://github.com/mikkame/reveal-pon](https://github.com/mikkame/reveal-pon) でソースコードを公開しています。
興味がある人は**スター**してから読んでみてくださいね！
100行も書いてないので、さらっと理解できるはずです！


# あとがき

ほとんどOSSの組み合わせです。オリジナリティは殆どありません。
ソースをみてもらうとわかると思うのですが
webpackでejsをhtml化して、reveal.jsにスライドを実行させるだけです。
OGP画像はpuppeteerで取得、gifencoderでアニGIF化しています。
RESTとかREST APIとか【ざっくりまとめ】

Web技術の勉強会の機会を頂き、私自身RESTというものについてあまり知らなかったので、
基本的な概念を簡単にまとめてみたいと思います。(初学者向けの内容です)

#まずRESTを理解する
「REST」とはシンプルなWebシステムの**設計思想**のこと。
　**RE**presentational **S**tate **T**ransferの略。
（リプレゼンテーショナル ステイト トランスファー）

- Representational：具象化された
- State：状態
- Transfer：転送

つまり**「具体的に状態を定義した情報のやり取り」**のような意味合い。(ざっくりと)

そして<font color=#33A300>**「RESTの原則」**</font>というものがあり、これを満たすものを**「RESTfulなシステム」**という。


##RESTの4原則
RESTの原則は次の4つで、
HTTPを設計した中心人物(Roy Fielding氏)が2000年に提唱したもの。
　①統一インターフェース
　②アドレス可能性
　③接続性
　④ステートレス性


##①統一インターフェース
**あらかじめ定義・共有された方法**でやり取りされること。
Webの場合「GET、POST、PUT、DELETEのHTTPメソッドでやりとりするよ～」とか
データのやり取りは軽量なJSON形式が多い。(XML等もある)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675596/faab7da4-21f3-b0b5-ccfa-86456ebb0f33.png)

##②アドレス可能性
**全ての情報が一意なURI**（識別子）を持っている。
提供する情報をURIで表現することができる。
**URI**は**U**niformed **R**esource **I**dentifierの略で、Webの場合は通常**URL**で与えられる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675596/3ff5cdbd-f375-cf64-c731-9ceac38fe12a.png)

##③接続性
やりとりされる**情報にはハイパーリンクを含める**ことができる。
１つのリンクから別の情報にリンク(接続)することができる。
RESTfulなシステム同士なら**円滑に情報連携**を行える。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675596/45e66e4b-380e-7e58-61d3-7f0e5c392488.png)

##④ステートレス性
ステートとは「状態」のこと。レスなので「状態がない」ということ。
つまりRESTでは「**やりとりが１回ごとに完結する**」という意味。
前のやり取りの結果に影響を受けないのでシンプルな設計にできる。
→セッション管理が不要とか

###図にするとこんな感じ..
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675596/082040ba-b2a8-bde7-c93b-14106adb5c48.png)
　①HTTP通信でやりとりする →統一インターフェース
　②このURLの情報ください →アドレス可能性
　③リンクを含んだページをあげるよ →接続性
　④さっきの情報をくださいと言われてもわからない →ステートレス性

##じゃあRest APIって？
まず**API**とは**A**pplication **P**rograming **I**nterfaceのこと。
　→要するに**プログラム情報をやり取りする蛇口**のようなもの。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675596/d2cf2e4f-ccae-6185-834c-2616a1b6af8e.png)

そして`REST API`とは先ほどの<font color=#33A300>**RESTの4原則に則ったAPI**</font>のこと。

補足メモ：
`RESTful API`と`REST API`は呼び方の違いで意味はほぼ同じ。
またWeb分野では単に`Web API`と呼ぶこともある。

###APIを使うイメージ
・天気予報サイトの外部APIを使う例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/675596/f3fb2fec-90b8-3709-b573-1ce10cf0583d.png)
・中央のポータルサイトがYahoo!のトップページ、ユーザーは住んでいる地域を登録している。
・この地域情報を天気予報のAPIサーバーに渡して、その地域の天気の情報を検索して返してくれる。
・スマホアプリなども登録情報から同様に活用される。
というイメージ。

###ちなみに他には..？
REST以外のものとしては、
2000年代初頭まではXML-RPCやSOAPが使われていた。
しかしXMLに限定していたり仕様が複雑だったりで、広く普及するには至らなかった。
　→現在ではSOAPに代わりRESTが中心になっている

##まとめ
・RESTは<font color=#33A300>**RESTの4原則**</font>に沿ったシンプルな設計思想のこと。
　　①統一インターフェース
　　②アドレス可能性
　　③接続性
　　④ステートレス性
　の4つ。
・これらに沿ったシステムを「**RESTfulなシステム**」という。
・`REST API`と`RESTful API`は呼び方の違い。
・`REST`はRPCやSOAPと違って「標準化」ではないが、現代の主流の**設計思想**である。

##参考文献
「イラスト図解式 この一冊で全部わかるWeb技術の基本」小林 恭平 
https://www.amazon.co.jp/dp/4797388811/ref=cm_sw_r_tw_dp_A2PdGb31RS2Z1
<br>
以上、簡単ではありますが、最後までお読み頂きありがとうございました(^_^)
【Qiita投稿方法（小学生でも分かる解説）】

#ユーザ登録方法
Qiitaは見るだけなら、登録も必要ない。
けど、投稿するには登録が必要になる。

|Qiita  |ユーザ登録  |
|---|---|---|
|投稿する  |必要  |
|見るだけ  |不必要  |

、、、おそらくバレている。。
そう、↑表の作り方知ったから使いたかっただけ。

さて、Qiitaの登録の仕方は簡単。

次の４つのうち、どれかを選べ。

・GitHubアカウント連携
・Twitterアカウント連携
・Googleアカウント連携
・Qiita用アカウントを作成して登録（名前、メルアド、パスワード）

![https___qiita-image-store.s3.amazonaws.com_0_297123_2a346a14-4337-5e12-4d35-e0e74466dec4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679667/fe55da7a-6410-2107-b718-133149e1049a.png)

登録できたら、次は早速投稿方法！

#投稿方法

なんで、Twitterやインスタは気軽に投稿できるのに、
Qiitaやブログは恐れ多いんだろう。。
多分、一番の理由は長文で書かないといけないという思い込み、、かな？

そんなことより、投稿方法は下記の通り。

![スクリーンショット 2021-01-25 18.24.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679667/8cdb5e7c-2260-7b47-f085-15df784e23d6.png)


・右上の「投稿する」をクリック
・「記事」をクリック

そしたら、こんなページになる。

![スクリーンショット 2021-01-25 18.27.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679667/b6e9c084-fd5b-ef4a-05df-616bef7617d1.png)


色（カラー）に分けて解説していく。
####■左上の赤（タイトル）
タイトルを書く。
**ポイント：ひと目で惹かれるようなのがいいね！**

####■左上の緑（タグ）
タグを書く。（最大５個）
タグっていうのは、「検索されたときに、引っかかるようにするやつ」
例えば、「Ruby」についての投稿だったら、タグに「Ruby」を入れておけば、「Ruby」で検索されたときに出てくるようになる。
**ポイント：できるだけ多くつけとく！**

####■左の青（本文）
本文を書く。
本文はさすがに説明の必要ない？
**ポイント：単調にならないようにする！（文字変えたり画像入れたり、いろいろやる）**

####■真ん中本文の中の小さい黄色（画像・絵文字・お助け）
[画像・絵文字・お助け]の団子三兄弟。🍡

・画像：画像を貼り付ける
・絵文字：絵文字を貼り付ける
・お助け：おしゃれにするためのヒーロー「Markdown記法 チートシート」というページが開く

**ポイント：それぞれちょいちょい使う！**

####■右のピンク（プレビュー）
本文を書くと、その見た目が表示される。
誤字脱字やエラーに気付きやすくて、めちゃくちゃありがたい。。

**ポイント：他人の投稿を見るかのように、読む側の目線で読む！**

####■右下の紫（投稿する/下書き保存する）
投稿する。もしくは、下書き保存する。
**ポイント：フルパワーでクリックする！　※壊れても責任は負いかねます**

　　
以上、Qiitaの投稿方法。
１画面でいろんな機能が使えるように収まっているから、使いやすい！

もっとシャレた技は次回以降解説していくので、Wait for a minutes！
ちなみに、この投稿も初投稿日に書いているので、この程度だったら１日でできるんだって。
BERTで行う文章分類 PART1（環境構築編）

# 実行環境
OS:macOS 10.15.7
開発環境:Nova(Python対応テキストエディタならOK)
パッケージのinstall:Anaconda 4.9.2
Python:3.8.3

# 必要なパッケージ
Pytorchやnltkなどはインストールが必要なので、pipやcondaなどで適宜インストールしてください。
**ここでは、以下のライブラリがインストールされているとして話を進めていきます。**

```Python
import torch
import torch.utils.data
import torch.nn as nn
import numpy as np
import random
import torch.nn.functional as F
from sklearn.model_selection import train_test_split
import pickle
import math
import transformers
from transformers import AutoTokenizer, AutoModel, AutoModelForMaskedLM, BertJapaneseTokenizer
import re
import requests
import unicodedata
import nltk
from nltk.corpus import wordnet
from bs4 import BeautifulSoup
```

# お問い合わせ
内容に関する質問は

mailto:deepblack.inc@gmail.com

までお願いします。
Linuxでウェブカメラの仮想背景を設定するデーモンを書いた

Zoomを始め各種のビデオ会議アプリでは、人物を背景から切り抜いて仮想背景と合成する機能がついていることが多いです。しかし、私の知る限りどのサービスでもLinux版のクライアントソフトではその仮想背景機能がなぜか削られています。ということで、何百番煎じかわからないんですが、仮想背景を合成した動画を返す仮想カメラを作るプログラムを作りました。

## やっていること

今までのやり方と同じで、[Bodypix](https://blog.tensorflow.org/2019/11/updated-bodypix-2.html)というニューラルネットワークによる人物認識法を使って人物を背景から切り出し、合成した結果をv4l2loopbackモジュールを使って出力しています。[これ](https://github.com/fangfufu/Linux-Fake-Background-Webcam)の丸パクリです。じゃあなんでわざわざまた作ったんだって感じですが、今までのやり方では必ず背景合成プログラムを手動で起動するか、常に起動しっぱなしにして常にニューラルネットワークを計算しっぱなしにする必要がありました。いちいちコマンドを叩くのはどうもなんかめんどくさいですが起動しっぱだとエコじゃないし生のカメラ出力が使えなくなってしまうということで、なんかちょっと微妙な感じがします。そこで、`inotify`を使って、仮想デバイスが開かれたときだけ推論をするようなプログラムを書き、これをsystemdでデーモン化してみました。キャラクタデバイスを`inotify`できるのかどうか若干心配でしたが、今の所ちゃんと動いてるっぽいです。（まあ、もしかしたらすでに誰かがやってるかもしれませんが。。）

## ソース

[ここ](https://github.com/hajifkd/virtcam)。インストール方法もそちらで。

## デモ

仮想カメラ`/dev/video2`を`ffplay`で再生してみました。自分の画像を載せたくなかったのでスマホの画面に人の写真を載せて認識させてみました。（人物のチョイスには特に他意はありません。単にニュースサイトの一番上にいただけです）

![virtcam_test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102161/41380d88-017c-698f-b345-e2a792ab721e.png)
【ShellScript】zshで連想配列を利用した際に引っかかったこと

## 環境
- mac OS Catalina version 10.15.7
- zsh 5.7.1 (x86_64-apple-darwin19.0)

## 目的
- zsh で連想配列を利用したかったが、色々と引っかかってしまったのでメモ


## １: bash と zsh で記法が異なることをそもそも知らなかった

### bash

```shell

declare -A members
```

### zsh

```shell
local -A members
typeset -A members
typeset -g -A members
```

## 2: インタプリタの設定を間違えていた（最初の行の「おまじない」）
- 最初の行の「おまじない」をとりあえずでコピペしていた
    - 自分の環境だと `bin/sh` は bash を指していたため正常に動作せず

### 間違い

```shell
#!/bin/sh
```

### 正解
```shell
#!/bin/zsh
```

## 3: キーの配列を取り出せるものと勘違い

以下のコマンドでそれぞれ結果が異なる

```shell
#!/bin/zsh

local -A members

members[member1]="田中"
members[member2]="鈴木"
members[member3]="佐藤"

keys=${(k)members}

# member1 member2 member3
for key in $keys
do
    echo "$key"
done

# member1
# member2
# member3
for key in ${(k)members}
do
    echo "$key"
done
```

### 4: キーの配列が追加順序通り取り出せるものと勘違い

- キー配列の順序は連想配列に追加した順序ではない

```shell
#!/bin/zsh

local -A members

members[tanaka]="田中"
members[suzuki]="鈴木"
members[satou]="佐藤"

# satou
# tanaka
# suzuki
for key in ${(k)members}
do
    echo "$key"
done
```
静的htmlをwordpress化する方法

<h1>静的htmlをwordpress化する方法※編集中</h1>

<h2>固定ページ</h2>

<h2>phpファイルの記載内容</h2>
<?php get_header(); ?>
		<!--header-->
～中略､ここにhtmlを記載する～

<?php get_footer(); ?>

<h2>ドメイン直下</h2>
wp-content/themes/使用しているテーマ/index.php

<h2>ショートコードを埋め込みたい</h2>
■元ファイル(固定ページや投稿)
[ショートコード]

■方法
○○.phpに以下記載
<?php echo do_shortcode( '[ショートコード]' ); ?>
Elastic Beanstalk で python の Django アプリケーションをデプロイする方法

## はじめに

以下に公式の開発者ガイドがありますが、こちらはEB CLIを使用した方法です。
Elastic Beanstalk の管理画面からアプリケーションをアップロードしたかったのですが、何点かハマりどころがあったので、まとめて記録として残します。

公式の開発者ガイド
[Elastic Beanstalk への Django アプリケーションのデプロイ](https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/create-deploy-python-django.html)

## Beanstalk 管理画面からアプリケーションを作成

管理画面からアプリケーションを作成します。

![beanstalk1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283051/b4afb8a9-62b7-cbbf-e812-6e4514f22a08.png)

アプリケーション名を入力します。

![beanstalk2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283051/5308bb0b-901a-c8fa-6821-aec8571fbc8b.png)

プラットフォームにpythonを選択します。
アプリケーションコードの部分は、ここでは一旦サンプルアプリケーションを選んで進みます。

![beanstalk3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283051/baee8eeb-169f-54dc-bfa2-f39419699fd4.png)

作成されました。

![beanstalk4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283051/c01a0768-9c37-77c5-d7f6-0a080f39a47f.png)

サンプルアプリケーションが確認できます。

## アプリケーションの準備

Djangoのアプリケーションに以下のファイルの追加が必要です。

### django.configの追加

プロジェクトフォルダの直下に.ebextensions/django.config を作成します。

```
option_settings:
  aws:elasticbeanstalk:container:python:
    WSGIPath: testpj.wsgi:application
```
testpjの部分はプロジェクトの名前に適宜変更します。

### requirements.txt の追加

下記コマンドを実行して、requirements.txtを作成します。
> $ pip freeze

## プログラムのアップロード

プログラムをアップロードする時はzipファイルをアップロードします。
ここで注意が必要ですが、**親ディレクトリは含めてはいけません。**
下記ように最上位のディレクトリを除き、zipファイルを作成してアップロードします。

またvenvディレクトリは不要なので削除します。

![beanstalk5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283051/290903bb-f869-89f7-491f-3ace18fff21e.png)

親ディレクトリも含めてアップロードした場合、ヘルスの部分に「Following services are not running: web.」というエラーがでていましたが、原因がわからずハマりました。

## まとめ
ハマりどころがいくつかありましたが、一度わかってしまえば簡単です。
どなたかの参考になりますように。
git addとcommit、pushの関係をわかりやすく説明する【Gitコマンド解説①】

以下のGitコマンド、よく出てきますよね。

```
$ git add 
$ git commit 
$ git push
```
このコマンドを打つことで、ソースコードを書き換えてGithubを更新してくれる。プロフィールに草が生えるからうれしい。今日のプログラミングはおしまい。

しかしここで、**「git addとcommitの関係は？ git pushってどういう意味？」**と聞かれると、すらすらと答えられない人も多いのではないでしょうか。草が生えて喜んでるのにそんなこと聞くなよ、と。プログラミングを始めたころは、私もなんとなくこのコマンドを使っていました。


今日は、git addとcommit、pushの関係をわかりやすく解説していこうと思います。


##リモートリポジトリとローカルリポジトリって？

Gitコマンドを理解するためには、まず**「リモートリポジトリローカルリポジトリの関係」**を理解する必要があります。

リポジトリとは、ファイルやディレクトリの履歴を管理する場所のことです。

自分のパソコン内でバージョン管理するために作成したリポジトリを**ローカルリポジトリ**といいます。**リモートリポジトリ**はネット(主にGithub)にファイルをアップロードした状態でファイル管理するものです。

[![Image from Gyazo](https://i.gyazo.com/e16d11bd866d300ed92a4e248fc9a5df.png)](https://gyazo.com/e16d11bd866d300ed92a4e248fc9a5df)
画像引用:https://backlog.com/ja/git-tutorial/intro/02/

チーム開発の場合、個人が**ローカルリポジトリ**で開発を進めて、**リモートリポジトリ**で開発したコードを共有する、という流れです。リモートリポジトリはネット上でファイルが共有されているので、**プルリクエスト**という、自分のソースコードに対するレビューをもらったりして、開発を進めていきます。

図にあるように、**ローカルリポジトリの内容をリモートリポジトリに送信（アップロード）すること**を**「push」**と呼びます。

```
$ git push
```

これでgit pushの意味が分かりましたね。


##git add とgit commitのちがいとは？
git addとcommitはローカルリポジトリ内で使用するコマンドです。

ソースコードを書き換える流れを、図に表すと以下のようになります。

[![Image from Gyazo](https://i.gyazo.com/24e34a4bf3c3b1e6a76b8644d1dce686.png)](https://gyazo.com/24e34a4bf3c3b1e6a76b8644d1dce686)
画像引用:https://backlog.com/ja/git-tutorial/intro/04/

ワークツリーとは、実際に作業している場所(ディレクトリ)のことを指します。ここでああでもあい、こうでもないと試行錯誤して開発を進めるわけですね。

そのあとソースコードが完成したら、リポジトリに更新する必要があります。このソースコードの更新作業を**「commit」**と呼びます。

ここでワークツリーとリポジトリの間には、インデックスというスペースがあります。これはコミットするファイルを準備するところです。ワークツリーからインデックスに登録することを**「add」**と呼びます。

※ちなみに、なんでインデックスが必要なの？いきなりワークツリーからリポジトリにコミットで良くない？と思った方もおられるかもしれません。

インデックスの役割としては、変更点をいきなりコミットすると更新されてほしくない箇所も更新する恐れがあるからです。色々変更を加えたけど、ファイルAとBを変更したとき、Aだけコミットしたいことがあります。インデックスにAだけを登録することで、変更して欲しいファイルだけコミットすることができるんですね。

コミットに含めたい変更を選別する作業を行うのがインデックスの役割です。


これで、git add とgit commitの違いがわかったかと思います。このあとpushコマンドを使って、ローカルリポジトリの内容をリモートリポジトリに送信（アップロード）する流れになります。


##まとめ
git addとcommit、pushの関係をまとめると

```

１.git addコマンドで、インデックスにコミットしたいファイルを登録する。
2.git commitコマンドで、インデックスにあるファイルを更新する。
3.git pushコマンドで、ローカルリポジトリの内容をリモートリポジトリに送信する
```

この3つを押さえておきましょう。

そのほかにもpull、fetch、mergeコマンドなど、良く出てくるGitコマンドがあるのですが、それは次回の記事で解説したいと思います。<br><br>

追記:【Gitコマンド解説②】はこちら↓↓↓
[git fetchとmerge、pullの関係をわかりやすく説明する【Gitコマンド解説②】](https://qiita.com/atsushi101011/items/078d736c1a4d26491682)<br><br><br>




この記事の説明がわかりやすかった！ここ間違ってるよ！次こんな記事を書いて欲しい！などあればコメント、DMよろしくお願いします。LGTMもぜひ。


Twitterもやってますので、フォローしていただけたらうれしいです。
卓球、心理学、哲学、Webサービス、好きな音楽、カメラ、登山、ランニング、読んだ本などなんでもつぶやいてます。

[https://twitter.com/atsushi101011]
気になるMicrosoftPowerAutomateテンプレート備忘録

#Microsoft Power Automateいいよね
いいよね。
どんなテンプレートがあるんだろうと思ったので気になるものをメモメモ。

#メモ
・上司からメールを受信したらプッシュ通知を受け取る
　Office365outlook + Office 365ユーザおよびNotifications
  ⇒「〇〇からメールを受信したら」をトリガーにできるのが気になる。

・ブログの更新情報を受け取る
　RSS + Notifications
　⇒RSS周りで情報収集できるの便利そう

・Power BIデータドリブンアラートでフローをトリガーする
　Power BI + Custom action
　⇒Power BI周りもCustom action周りも良くわからん過ぎて気になった

・1時間office 365カレンダーが表示されないようにする
　モバイルのFlowボタン＋Office 365 outlook
　⇒Flowボタンが気になったのと、outlookのカレンダーいじくれるのが気になる。

・RSSフィードが公開されたときにTeamsにメッセージを投稿する
　RSS + Microsoft Teams
　⇒RSS周りで情報収集できるの便利そう

・今後の予定表イベントの一覧を電子メールで自分に送る
　Office 365 outlook+MSN天気+Office365ユーザ
　⇒なんかに使えそう

・Convert an Excel spreadsheet in OneDrive to PDF and add a text watermark
　OneDrive for Business + PDF Blocks
　⇒シンプルすげえ

・会議への遅刻について同僚に通知する
　モバイルのFlowボタン+ Office 365 Outlook + 承認 + Notifications
　⇒急にシチュエーションが具体的で好き

・新しいツイートが指定したハッシュタグと一致した時Teamsに投稿する
　twitter + Microsoft Teams
　⇒これも情報源として優秀そう。

・YammerへのRSSフィードニュース
　RSS + Yammer
　⇒RSS周り(略

・SlackチャネルでInstagramの通知を受け取る
　Instagram + Slack
　⇒いやもうMicrosoftさん関係ないですやんこんなことできるのね

・感情分析を使用してツイートを処理する
　Twitter + SQL Server+テキスト分析
　⇒感情分析できるのすごい。SQLでDBにデータ入れてから分析かな？

・ツイートをヒンディー語に変換してSlackに投稿する
　Twitter + Microsoft Translator及びSlack
　⇒いやなんでヒンディー語よ。英語も勿論できるらしいから使用用途は広そう。

・同僚に病気で休むことをメールで送り、Outlook.comカレンダーをブロックする
　モバイルのFlowボタン+ Outlook.com + Notifications
　⇒急に具体的シリーズ2。カレンダーのブロックができる方が気になる。

・キャンセルされたイベントについてプッシュ通知を受け取る
　Outlook + Notifications
　⇒これ地味便利そう

・Send an email about the agenda for an upcoming Office 365 Outlook event
　Outlookのみ
　⇒便利そう。便利そうだけどどこが便利になるか次第。

・学生が小テストを完了したらOutlookで通知を受け取る
　Microsoft Forms + Office 365ユーザー + Outlook
　⇒拡張の余地ありそう！

・ツイートの感情分析を実行して結果をPower BIデータセットにプッシュする
　Twitter + テキスト分析 + Power BI
　⇒Twitterで継続的にデータ集めするなら便利かも

#さいごに
　どれかハンズオンしてみるか
chrome で二本指での戻る、進むスワイプを行わないようにする(mac、2021年)


## はじめに
Webブラウジングしてると、タッチパッドの2本指スワイプで、横スクロールしようとしたのに戻る・進むになっちゃうことってありますよね。

以前まではchrome://flagsを開いて設定できていたようですが、仕様が変わったようで設定項目の"Overscroll history navigation on Touchpad"がないようです。
参考:[Chromeで2本指スワイプの戻る・進むを無効にする(Win/Mac共通)](https://qiita.com/the_red/items/e1c3504fdd55e98a7dd3)


## 解決方法

ターミナルで以下を実行するだけ。
たぶんソフトを再度立ち上げなくても反映されているはず。

```
defaults write com.google.Chrome AppleEnableSwipeNavigateWithScrolls -bool FALSE
```

## まとめ

間違ってスクロールしちゃうってことは人によっては結構あるのではないでしょうか?
webブラジングしてるとたまに戻っちゃってストレスだったので、これを実行してからは悩まされなくなりました。
めでたし、めでたし。
オブジェクトのテクスチャを送信して、画像として保存する

Unityでホワイトボードのようなもの作ってた時に使ってた。

###大まかな流れ
1.対象のGameObjectを取得。
2.保存したいTextureを取得。
3.取得したTextureをバイト配列に変換。
4.サーバ上のphpに送信する。
5.phpで受信したバイト配列を画像に戻して保存する。
→受信側のphpは以前書いた記事そのまんまなので以下参照
<a href="https://qiita.com/nazo_no_otoko/items/eae339499ab519990629">pythonで画像を送信、phpで保存する</a>
以上。

###全体のソースコード
```SendPic.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using System;
using System.Security.Cryptography;
using System.Security.Cryptography.X509Certificates;
using UnityEngine.Networking;

public class SavePic : MonoBehaviour
{
    Texture2D texture;
    byte[] picData;

    public void SendPic()
    {
	//1.対象のGameObjectを取得。
	//Find()だったり、FindGameObjectWithTagだったり、インスペクターから直接指定したりなどなど
        GameObject _wb = GameObject.FindGameObjectWithTag("Whiteboard");

	//2.保存したいTextureをGameObjectから取得し、
	//3.取得したTextureをバイト配列に変換。
        texture = (Texture2D)_wb.GetComponent<Renderer>().material.mainTexture;

	//SendDataを呼び出す(コルーチンというらしい)
        StartCoroutine(SendData(picData));
    }
    IEnumerator SendData(byte[] postData)
    {
	//4.サーバ上のphpに送信する
        String url = "https://hagehoge/pic_save.php";//httpにandroid端末から送る場合はパーミッション関連で何か必要だったような･･･
        var request = new UnityWebRequest(url, "POST");
        request.uploadHandler = (UploadHandler)new UploadHandlerRaw(postData);
        request.downloadHandler = (DownloadHandler)new DownloadHandlerBuffer();
        request.SetRequestHeader("Content-Type", "image/png");

        yield return request.Send();
    }
}
```

####実際やるとどんな感じなの
お絵かきして送信する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580375/7f17d3a8-2288-9336-abbb-3732a334a758.png)
↓
WinSCP(FTPツール)で見てみるとこんな感じ。ちょっと細くなってるのは落書きに使ったPlaneは1.5倍に引き伸ばされてたため。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/580375/da6daf0e-e706-9ad8-f8ef-2bb602d60c89.png)

###参考
・Photon Unity Networking 2 (PUN2) のRPCとRaiseEventを使ってテクスチャデータを送信する
https://nabla-tech-lab.hatenablog.com/entry/2019/05/15/180000
PythonでMatplotlibを利用したグラフの描画サンプル

生成したランダムな時系列データをプロットするサンプル。
実行すると以下のようにウィンドウが立ち上がり、グラフが描画されます。

```python
>>> import random
>>> import matplotlib.pyplot as plt
>>> 
>>> y = [ random.random() * 100 for i in range(100) ]
>>> t = [ i in range(100) ]
>>> 
>>> plt.plot(t, y)
[<matplotlib.lines.Line2D object at 0x14b096730>]
>>> plt.show()
```

![スクリーンショット 2021-01-24 21.47.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/802246/8f5872e9-613d-ff2f-55b1-555ed5ad6f8c.png)
「ValueError: Graph disconnected」Inputレイヤーの扱いミス

多次元の数値から連続値を予測するNNを実装。
データの形を正すために、poolingやreshapeを使用していたらValueError...。

```terminal:エラー文
ValueError: Graph disconnected: cannot obtain value for tensor Tensor("input_state:0", shape=(?, 10, 22), dtype=float32) at layer "attention_vec". 

The following previous layers were accessed without issue: []
```
```text:google翻訳
ValueError：グラフが切断されました：レイヤー "attention_vec"でテンソルTensor（ "input_state：0"、shape =（?, 10、22）、dtype = float32）の値を取得できません。

次の前のレイヤーは問題なくアクセスされました：[]
```

[同じようなエラーに関する質問](https://teratail.com/questions/198443)を発見。
> KerasのModelクラスは入力にあたる部分をInputレイヤーで定義したものを使う必要があるようです。

とあり、
`l_input = Input(~~~)`
と定義しておいて
その下3行も`l_input = ...`とInputレイヤーの上書きをしていたことが原因でした。

```python:改善後のコード
    def attn_block(self,inputs):
        ・
        ・
        ・
        return output_attention_mul

    def build_network(self):
        nb_dense_1 = self.dim_state * 10
        nb_dense_3 = self.dim_action * 10
        nb_dense_2 = int(np.sqrt(nb_dense_1 *
                                 nb_dense_3))

        l_input = Input(shape=(self.time_steps, self.dim_state,),
                        name='input_state')
        l = GlobalAveragePooling1D()(l_input)
        l = Reshape((22,1))(l)
        x = self.attn_block(l)
        l_cnn_1 = Conv1D(filters=16,kernel_size=2,
                          activation='tanh',
                          name='hidden_1')(x)
        l_cnn_2 = Conv1D(filters=16,kernel_size=2,#16,(2,2),#padding='same',
                          activation='tanh',
                          name='hidden_2')(l_cnn_1)
        l_dense_3 = Dense(nb_dense_3,
                          activation='tanh',
                          name='hidden_3')(l_cnn_2)
        l_dense_3 = Flatten()(l_dense_3)
        l_mu = Dense(self.dim_action,
                     activation='tanh',
                     name='mu')(l_dense_3)
        l_log_var = Dense(self.dim_action,
                          activation='tanh',
                          name='log_var')(l_dense_3)

        self.model = Model(inputs=[l_input],
                           outputs=[l_mu, l_log_var])
        self.model.summary()
```
【GitHub】Projects 基本的な使い方

#はじめに
この記事では、GitHubのProjects機能の基本的な使い方についてまとめました。
⚠️当方初学のため認識違いがある可能性大です
誤りを見つけた際はコメントにて指摘していただけると幸いです🙇‍♀️🙇‍♂️


#参考
この記事は、以下の記事を参考にして作成しました。

 - [開発者のスケジュール管理に超便利、GitHub Issues、Label、Milestone、Projects使いこなし術](https://www.atmarkit.co.jp/ait/articles/1704/28/news032.html
)

 - [GitHubの新機能「Projects」を使ってタスク管理してみた](https://blog.teratail.com/entry/github-projects)


#Projects とは
カンバン方式のタスク管理機能。
カラムを自由に作成でき、各に新規カードの作成、Issueの表示、pull Requestの表示なども自由に行える。
Projectsを使用してタスクの管理を行えば、「今どのようなタスクが進行しているのか」「そのタスクが今どのような状態にあるのか」などを一目で把握することができる。


#基本的な使い方
新規リポジトリを作成し、リポジトリのページの「Projects」タブをクリック。
その後、緑色の「Create a project」をクリック。

![スクリーンショット 2021-01-25 17.27.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/790168/e9dfdf29-9a3f-e286-be7a-fd7616ae1fc5.png)


プロジェクト作成ページが表示される。
Nameにプロジェクトの名前をDescriptionにプロジェクトの説明を記入し、「Save project」をクリック。

![スクリーンショット 2021-01-25 17.28.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/790168/57a538e6-115e-3653-6e77-c85faca7b6b2.png)


プロジェクト作成が完了すると、今回作成したプロジェクトのページが表示される。

![スクリーンショット 2021-01-25 17.28.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/790168/0f298d40-7ed0-be39-3cd4-d2250434f040.png)


緑色の「Add a column」をクリックしカラムを追加する。
「column name」にカラム名を入力し、「Create column」をクリック。

![スクリーンショット 2021-01-25 17.29.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/790168/9382457d-a3f4-bcd9-f2bd-2635d691dfbf.png)


以下のように新しいカラムが作成される。

![スクリーンショット 2021-01-25 17.29.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/790168/96799c4c-b65c-4c7c-7c1b-cb4fd6e17b15.png)


「＋ Add column」からもう一つカラムを作成する。
その後、はじめに作ったカラムのカラム名の隣の「＋」をクリック。
表示されたテキストボックスにタスクの内容を記入し「Add」をクリックしカードを追加する。

![スクリーンショット 2021-01-25 17.30.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/790168/cae04345-44e7-656c-17f8-3256705852ac.png)


カード（タスク）が追加された。

![スクリーンショット 2021-01-25 17.30.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/790168/c0eb2860-00d5-57b5-b367-4891d76905c5.png)


追加したカードを後に追加した別のカラムにドラッグ&ドロップすることでカード（タスク）のステータスを更新できる。

![スクリーンショット 2021-01-25 17.31.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/790168/b68a99e9-0c1e-ea6c-5f45-9b55e32443cf.png)


また、一つのカラム内にカードが複数ある場合、カラム内でドラッグ&ドロップすることでカードの順番を入れ替えることができる。
Octave: 制御文



* for

```matlab
>> for i = 1 : 10,
>   i
> end;
i = 1
i = 2
i = 3
i = 4
i = 5
i = 6
i = 7
i = 8
i = 9
i = 10

>> for i = 0 : 10 i ** 2 end;
ans = 0
ans = 1
ans = 4
ans = 9
ans = 16
ans = 25
ans = 36
ans = 49
ans = 64
ans = 81
ans = 100

>> for i = 1 : 10 arr(i) = i ** 2; end;
>> arr
arr =

     1     4     9    16    25    36    49    64    81   100

>>
```

* foreach

```matlab
>> range = 1 : 10
range =

    1    2    3    4    5    6    7    8    9   10

>> for i = range i end
i = 1
i = 2
i = 3
i = 4
i = 5
i = 6
i = 7
i = 8
i = 9
i = 10
>>
```

* while

```matlab
>> i = 0;
>> while i < 5 i, i++ end
i = 0
ans = 0
i = 1
ans = 1
i = 2
ans = 2
i = 3
ans = 3
i = 4
ans = 4
>>
```

* if

```matlab
>> i = 0;
>> while true,
>   if i > 2,
>     break
>   end
>   i++
> end
ans = 0
ans = 1
ans = 2
>>
```

* else, elseif

```matlab
>> for i = 1 : 20, if mod(i, 15) == 0 "fizzbuzz", elseif mod(i, 3) == 0 "fizz", elseif mod(i, 5) == 0 "buzz", else i, i++; end; end;
i = 1
i = 2
ans = fizz
i = 4
ans = buzz
ans = fizz
i = 7
i = 8
ans = fizz
ans = buzz
i = 11
ans = fizz
i = 13
i = 14
ans = fizzbuzz
i = 16
i = 17
ans = fizz
i = 19
ans = buzz
```

* モジュール

```matlab
$  cat cube.m
function y = cube(x)
y = x ^ 3;

>> ls
cube.m
>> a = cube(3);
>> a
a = 27
>>
```

* 複数の戻り値を持つモジュール

```matlab
$ cat multi.m

function [square, cube] = multi(x)

square = x ^ 2;
cube = x ^ 3;

>> ls
cube.m	multi.m
>> [a, b] = multi(3)
a = 9
b = 27
>>
```

* ベクトル化

```matlab
>> th = [1; 2; 3; 4; 5]
th =

   1
   2
   3
   4
   5

>> x = [10; 20; 30; 40; 50]
x =

   10
   20
   30
   40
   50

>> p = 0; for j = 1 : 5, p += th(j) * x(j); end; p
p = 550
>> th' * x
ans = 550
>> th * x
error: operator *: nonconformant arguments (op1 is 5x1, op2 is 5x1)
```
Ubuntu 21.04 daily-live

# daily-live

* [Ubuntu 21.04](http://ftp.jaist.ac.jp/pub/Linux/ubuntu-cdimage/ubuntu/daily-live/current//)
* [Xubuntu 21.04](http://ftp.jaist.ac.jp/pub/Linux/ubuntu-cdimage/xubuntu/daily-live/current//)

## docker

```sh
docker pull ubuntu:21.04
```
macbookで英語，日本語の入力変換ができなくなりました

###問題点
option + shift + z で日本語入力に変えられるはずなのですが，"¸"という文字が打たれて日本語変換できなくなりました．また，option + shift + s を押すと"Í"という文字が打たれました．

###解決策
touch barにControl Stripを表示させ，入力変換できるようにすると，なぜかoption + shift + z/s で入力変換できるように直りました．touch barにControl Stripを表示させるのは，システム環境設定からキーボードの設定を開くと実行できます．

macOS Big Sur(ver 11.1)
【ShellScript】zshでカスタムコマンドを追加する

## 環境
- mac OS Catalina version 10.15.7
- zsh 5.7.1 (x86_64-apple-darwin19.0)

## 目的
- どこからでも呼び出せるカスタムコマンドを作成

```
% aaa
Hello, World!
```

## 実装
- `~/commands` に **拡張子のない** シェルスクリプトを作成する

```
% mkdir ~/commands
% touch ~/commands/aaa
```

- `aaa` を開き以下の通り編集

```
#!/bin/zsh

echo "Hello, World!"
```

- `~/commands` にパスを通す

```
% open ~/.zshrc
```

```shell:zshrc
# 以下を追加
export PATH=$PATH:~/commands
```

- パスの変更を適応

```
% source ~/.zshrc
```

- コマンドに対して権限を付与

```
% chmod 777 ~/commands/aaa
```

- 確認

```
% aaa
Hello, World!
```

## 権限の付与について
- chmod でファイルに対して権限を付与
- 今回は今後の拡張を考えて読み込み・書き込み・実行権限を与えている
- 詳しくは [chmod コマンド](https://qiita.com/ntkgcj/items/6450e25c5564ccaa1b95)
Codeigniterを使ってレスポンスで画像を返す

サーバ側で何かしらの処理を実行し、その結果に基づいてクライアント側に画像を返したい場合、Codeigniterに用意されている<a href="https://codeigniter.jp/user_guide/3/libraries/output.html">出力クラス</a>を使うと便利です。
※画像以外にも任意のファイル形式を返す場合に有効です

imgタグのsrc属性に直接URLを指定したり、JavaScriptのImageクラスを動的に生成したりするときに使用することで、画像を簡単に表示することができます。
画像のURLのみを返すような処理であれば、画像そのものを返してしまった方が実装コストが低くて済むと思います。

### コントローラーのサンプル
※画像（$file_path）は適当に用意してパスを合わせてください。

```Image_responder.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Image_responder extends CI_Controller {

	public function get_image()
	{
		$file_path = '/work/sample.png';
		$this->output
		->set_content_type('jpeg')
		->set_output(file_get_contents($file_path));
	}
}
```

### HTMLのサンプル
※URLの部分は環境に合わせてください

````TEST.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Codeigniter Test</title>
    <style>
        #request {
            display: block;
            padding: 10px;
            margin: auto;
            margin-top: 10px;
        }
        #results {
            display: flex;
            justify-content: center;
            background-color: rgba(0,0,0,.5);
            margin-top: 10px;
            min-height: 64px;
        }
        #results > img {
            width: 64px;
            box-sizing: border-box;
            padding: 5px;
        }
    </style>

    <script type="text/javascript">

        function getImage() {
            const img = new Image();
            img.onload = function (e) {
                document.getElementById('results').appendChild(img);
            };
            img.src = 'http://xxxxx.yyyy.zzz/index.php/Image_responder/get_image';
        }
    </script>

  </head>
  <body>
      <input type="button" value="request" id="request" onclick="getImage();">
      <div id="results"></div>
  </body>
</html>
```

### 実行結果イメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613298/4f8bfb10-edf5-dff0-2d35-0f7a85f86cb0.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613298/7fd38977-d6d2-18ae-0f79-b9dc45b638f1.png)
v-slotの値で変数を使って動的に扱う方法


# v-slotとは

[スロット — Vue\.js](https://jp.vuejs.org/v2/guide/components-slots.html)


# やりたいこと

`v-slot`の値を動的に扱いたい。

例えばVuetifyのDataTableで `v-slot`を使うサンプルで、

[Data table component — Vuetify](https://vuetifyjs.com/en/components/data-tables/#item)


```vue
<template v-slot:item.calories="{ item }">
  <v-chip
    :color="getColor(item.calories)"
    dark
  >
    {{ item.calories }}
  </v-chip>
</template>
```

`item.calories` を動的にしたい場合です。


# やり方

[スロット — Vue\.js](https://jp.vuejs.org/v2/guide/components-slots.html#%E5%8B%95%E7%9A%84%E3%81%AA%E3%82%B9%E3%83%AD%E3%83%83%E3%83%88%E5%90%8D)

vueの2.6.0から対応されていて、 `[]` で値を囲めば良いです。

先の例だと、

```vue
<template v-slot:[`item.${someVar}`]="{ item }">
  <v-chip
    :color="getColor(item.calories)"
    dark
  >
    {{ item.calories }}
  </v-chip>
</template>
```
という事です。

他にも `v-for`と組み合わせて

```vue
<template v-for="one in array" v-slot:[`item.${one}`]="{ value }">
  {{ value.hoge }}
</template>
```

というのもできます。tableの列が増減するようなパターンで使えます。
bulletml.jsの研究 その2

# 概要

bulletml.jsの研究です。
sandbox作ってみた。

# 写真

![無題.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/56cf3eaa-9ad9-45ed-c3d1-738a86527d6a.jpeg)


# 参考にしたページ

http://www.asahi-net.or.jp/~cs8k-cyu/bulletml/


# サンプルコード


```
<bulletml xmlns="http://www.asahi-net.or.jp/~cs8k-cyu/bulletml">
  <action label="top">
    <repeat>
      <times>100</times>
      <action>
        <fire>
          <direction type="sequence">23</direction>
          <bullet/>
        </fire>
        <wait>1</wait>
      </action>
    </repeat>
  </action>
</bulletml>
```

# 説明

action要素がちょっと複雑になってます。

まず最初のアクションはrepeatです。 
repeatアクションは、あるアクションを複数回繰り返すときに使います。 
繰り返し回数はrepeat要素の中のtimes要素で、繰り返すアクションはaction要素で 指定します。 この例では繰り返し回数は100回、繰り返すアクションは fireアクションとwaitアクションです。

fireアクションでは先ほどはなかったdirection要素が加わっています。 direction要素は弾を撃つ方向を指定します。 direction要素にはtypeが指定できます。typeは以下の3種類があります。

aim - 自機を狙った方向
absolute - 自機に関係ない絶対方向（上が0度で時計回り）
sequence - 直前に撃った方向との相対方向
この場合はsequenceですので、直前に撃った方向との相対方向を指定しています。 単位は度です。この場合は直前から23度ずれた方向に弾を撃ちます。

つぎのwaitアクションは、一定時間待つアクションです。 単位はフレームで、1フレームは約1/60秒です。

ここまでが繰り返すアクションです。これで
直前から23度ずれた方向に弾を撃ち
1フレーム待つ
という動作を100回繰り返す動作が定義できました。 

動かしてみると、ある場所からくるくる回転しながら弾をばらまく、 いわゆる回転砲台ができました。

# 成果物

https://embed.plnkr.co/plunk/doB3y1BsIPOx4faD


以上。
HTML/CSS復習③

<a href="https://qiita.com/SOH_engineer/items/cc53c161465195074e6e">HTML/CSS復習②</a>からの続きです。

<h1>floatの解除</h1>

通常、親要素の高さは子要素を包む高さになる。
しかし、子要素が全てfloatの時には、親要素の高さは0になる。
子要素が全てfloatでも親要素が高さを持つように設定する
float: leftは、

```CSS:CSSファイル
clear: left;
```

で解除できる。

htmlファイルには、CSSを適用する(clear: left)ための空のタグを用意する。

```html:htmlファイル
<div class="clear"></div> #空のタグ
```

```CSS:CSSファイル
.clear {
       clear: left;
}
以上のように設定すると、floatを解除できる。
```

<h1>max-widthの設定</h1>

巨大なサイズの画面の時、要素の幅が広がりすぎないように、max-widthを指定する。

```CSS:CSSファイル
.container {
           max-width: 〇〇px; #画面幅の上限を指定
           width: 100%; その上限内で幅を最大まで広げる
}
```

<h1>要素の表示/非表示</h1>

```CSS:CSSファイル
display: none; #要素を非表示にする
display: block; #非表示にした要素を表示する
```

<h1>display: flex</h1>

```CSS:CSSファイル
display: flex; #指定した要素の子要素が横並びになる
```

<h1>flexbox</h1>

```CSS:CSSファイル
flex: auto; #指定した要素の幅を親要素に合わせて伸縮させることができる
flex-wrap: wrap; #子要素のサイズに応じて折り返すことができる
flex-direction: column; #子要素を上から下に並べる
```

<h1>faviconの設定</h1>

favicon・・・ページタイトルのアイコン

```html:htmlファイル
<head>
.
.
<link rel="icon" href="ファイルの場所">
.
.
</head>
```

<h1>文書の説明の記述</h1>

インターネットに公開した時に検索エンジンが説明用の文章として使うための文書を記述する

```html:htmlファイル
<head>
.
.
<meta name="description" content="サイトの説明">
.
.
</head>
```

<h1>sectionタグ</h1>
sectionタグは汎用的に使えるタグである。

<h1>リンクを同じタグではなく、別のタグに開きたい時</h1>
aタグ内に target="_blank"を記述する

<h1>MDNのサイト</h1>

MDNのサイトではHTMLの仕様を確認することができる

<h1>デフォルトの余白を確認する</h1>

Chromeのデベロッパーツールからボックスモデルを調べることで確認できる

<h1>CSS 半角空白と>の違い</h1>

```CSS:CSSファイル
.works h1 {
          #worksクラス内の全てのh1にCSSが適用される
}

.works > h1 {
            #worksクラス内の直下の階層のh1にのみCSSは適用される
}
```

<h5>HTML/CSS復習以上</h5>
HTML/CSS復習②

<a href="https://qiita.com/SOH_engineer/items/723d838911b7af4cc539">HTML/CSS復習①</a>からの続きです。

<h1>アニメーションを付ける</h1>

```CSS:CSSファイル
transition: 変化の対象(allだと全てのプロパティを指定) 変化の時間(例： 1s = 1秒);
```

hoverと組み合わせて使うことが多い

```CSS:CSSファイル
#変化の対象となるところにカーソルを乗せると背景が1秒間赤色に変化する
div {
   transition: 変化の対象(allだと全てのプロパティを指定) 変化の時間(例： 1s = 1秒);
}
div: hover {
          background-color:red;
}
```

<h1>行間の指定</h1>

```CSS:CSSファイル
line-height: 〇〇px;
```

<h1>position: absolute</h1>

```CSS:CSSファイル
position: absolute; #要素同士を重ねて表示できる
```

```CSS:CSSファイル 
#サイト全体の左上部分を基準に、top, left, right, bottomで位置を指定できる
position: absolute;
top: 〇〇px;
left: 〇〇px;
```

基準としたい親要素に

```CSS:CSSファイル
position: relative;
```
と指定すると、その要素の左上部分が基準となる
(デフォルトはブラウザ全体の左上部分が基準となる)

<h1>ボックスに影を付ける</h1>

```CSS:CSSファイル
box-shadow: 〇〇px(水平方向) 〇〇px(垂直方向) 影の色;
```

<h1>cursorプロパティ</h1>

```CSS:CSSファイル
cursor: カーソルの形; #マウスのカーソルが要素に乗った時、カーソルの形を変える
```

<h1>active</h1>

```CSS:CSSファイル
div: active {
            background-color: red;  #セレクタにactiveを用いると、要素がクリックされている間のCSSを適用できる
}
```

<h1>CSSの打ち消し</h1>

```CSS:CSSファイル 
.btn-active {
            box-shadow: none; #影を消すことができる
}
```

<h1>ボタンをへこませる</h1>

```CSS:CSSファイル 
.btn: active {
             position: relative;
             top: 6px;
             box-shadow: none;
}
```

<h1>ヘッダーを画面上に固定する</h1>

```CSS:CSSファイル
#top, left, right, bottom で位置を指定する
position: fixed;
top: 〇〇px;
left: 〇〇px;
right: 〇〇px;
bottom: 〇〇px;
```

<h1>要素の重なり順を指定する</h1>

z-indexプロパティを用いる
整数で指定する。値が大きいほど、上に表示される
*必ず、positionプロパティと併用しないといけない

<h1>メディアクエリ</h1>
メディアクエリ・・・ ブラウザの画面サイズに応じたCSSスタイルを設定する

```CSS:メディアクエリ用のCSSファイル
@media(条件: 例えばmax-width: 1000px, min-width: 670px など) {
#ここに、その画面サイズに適用したいCSSを記述する
}
```

<h1>ブレイクポイント</h1>
スマートフォン・・・ 670px以下
タブレット・・・ 671px ~ 1000px
PC・・・　1001px以上

<h1>box-sizing</h1>

```CSS:CSSファイル 
box-sizing: border-box; #要素の幅(width)の合計にpadding, borderが含まれるように指定される
```

<h1>全要素にCSSを適用する</h1>

```CSS:CSSファイル
* {
  box-sizing: border-box; # *(アスタリスク)に対して指定すると全要素にCSSを適用できる
}
```

<h1>レスポンシブデザインの適用準備</h1>
＜head＞タグ内にviewportを設定する

```html:htmlファイル
<head>
.
.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
.
.
</head>
```

<h1>メディアクエリ用のCSSファイルを用意する</h1>
メディアクエリ用のCSSファイルを用意する(responsive.css)

```html:htmlファイル
<head>
.
.
<link rel="stylesheet" href="responsive.css"> #viewportよりも下の行に記述することに注意
.
.
</head>
```

<h5>続きは<a href="https://qiita.com/SOH_engineer/items/feb34ce52ee9c967ada6">HTML/CSS復習③</a>へ</h5>
HTML/CSS復習①

ポートフォリオ作成に向けて、1月中に基礎学習を終わらせます。
まずは、2日ほどで、HTML/CSSの復習をProgate、ドットインストールを用いて行っていきます。
なお、記述する内容は自分は忘れがちな所、苦手な所です。
自分用の備忘録的に投稿していくので(箇条書きで)、読みづらいor間違えていることを書いている可能性もあるので、
悪しからず。
(できるだけ他の方が見てもためになれば良いなとは思って投稿しますが・・・)
箇条書きで書いたことに関して、新たな発見、学び、気づき等あれば、
それぞれ個々に詳細を記述していこうと思います。

<h1>フォントの種類を変える</h1>

```CSS:CSSファイル
font-family: フォント名;
```

フォント名を変えることができる。
フォント名にスペースがある場合はダブルクォーテーションで囲む必要がある。

<h1>＜head＞要素の中に記載する主な内容</h1>

```HTML:htmlファイル
<head>
<meta charset="UTF-8"> #文字コード
<title>ページタイトル</title> #ページタイトル
<link rel ="stylesheet" href="stylesheet.css"> #CSSの読み込み
</head>
```

<h1>リストのマークをなくす</h1>

```CSS:CSSファイル
li {
    list-style: none;
}
```

<h1>要素を左から横並びにする</h1>

```CSS:CSSファイル
float: left;
```

<h1>ブロック要素とインライン要素の違い</h1>

ブロック要素は、改行される要素であり、親要素の幅一杯に広がる要素である。
(例)div, h1, p

インライン要素は、改行されない要素である。
(例)span, a

<h1>要素にボーダー(枠線)を付ける</h1>

```CSS:CSSファイル
border: 線の太さ 線の種類 線の色; #要素が枠線で囲まれる
border-bottom: 線の太さ 線の種類 線の色; #下部に枠線が付く
```

<h1>ボックスモデル</h1>

内側からcontent→padding→border→margin
margin, paddingはよくごっちゃになる・・・

<h1>input, textarea</h1>

＜input＞要素・・・ 1行のテキスト入力(終了タグ不要)
＜textarea＞要素・・・ 複数行のテキスト入力

```CSS:htmlファイル
<input type="submit"> #送信ボタン(日本語でデフォルトでボタンに表示されるテキストは「送信」)
<input type="submit" value="保存"> #valueを指定するとボタンに表示されるテキストを変更できる
```

<h1>複数のセレクタに同じCSSを適用する</h1>

```CSS:CSSファイル
#セレクタをコンマで区切る
h1, p {
      color: ##ff0000;
}
```

<h1>背景画像を指定する</h1>

```CSS:CSSファイル
div {
    background-image: url(画像のURL);
    background-size: cover; ←#背景画像の表示範囲を1枚の画像で埋め尽くす記述
}
```

<h1>要素を透化する(透明にする)</h1>

```CSS:CSSファイル
opacity: 数値(0.0~1.0);
```

<h1>文字の間隔の指定</h1>

```CSS:CSSファイル
letter-spacing: 〇〇px;
```

<h1>ブロック要素、インライン要素、インラインブロック要素</h1>


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954989/630ca5fa-ccf7-43f2-226a-2881322e22c8.png)

<h1>displayプロパティ</h1>

```CSS:CSSファイル
display: block; #ブロック要素に指定できる
display: inline-block; #インラインブロック要素に指定できる
display: inline; #インライン要素に指定できる
```

<h1>複数クラスの指定</h1>

```html:htmlファイル
<div class="クラス名1 クラス名2"> #クラス名を半角スペースで区切って指定する
```

<h1>hover</h1>
hover・・・ カーソルが乗った時の状態

```CSS:CSSファイル
h1: hover {
          background-color: red; #h1要素にカーソルを乗せた時に背景が赤色になる
}
```

<h1>border-radius</h1>

```CSS:CSSファイル
border-radius: 〇〇px; #数値が大きいほど、角は丸くなる
```

<h1>中央寄せについて(margin: 0 auto と text-align: center の使い分け)</h1>

```CSS:CSSファイル
margin: 0 auto; #ブロック要素を中央に配置できる

text-align: center; #テキスト等のインライン要素やインラインブロック要素を中央に配置できる
```

<h1>Font Awesome(アイコンの使用)</h1>

①htmlファイルのheadタグ内にFont AwesomeのCSSファイルを読み込むための記述を書く
②spanタグに[faクラス]と [fa-アイコン名 クラス]を指定する





<h5>続きは<a href="https://qiita.com/SOH_engineer/items/cc53c161465195074e6e">HTML/CSS復習②</a>へ</h5>
ハイフンなしの郵便番号フォームを作成する時の入力タイプはどれにするか

# 概要

ハイフンなしの郵便番号フォームを作成する時に、入力タイプはどれにすれば良いんだっけ?
と思ったので各タイプの挙動をまとめてみました。

# 試した機器・ブラウザ

* iPhoneXR
 * Safari
* MacOS
 * Edge, Chrome, Safari

# textタイプ

## メリット

* pattern属性を使えば、数字のみ許可することは出来る
* telやnumberのデメリットがない

## デメリット

* 数字以外が入力できる
* スマートフォンで見ると、入力パッドの初期表示はかな入力が開く
 * 入力する際、入力パッドの変更が必要になる

# telタイプ

## メリット

* スマートフォンで見ると、入力パッドの初期表示は電話番号用が開く

## デメリット

* 郵便番号にtelを使うのは意味的におかしい

# numberタイプ

## メリット

* スマートフォンで見ると、入力パッドの初期表示は数字入力用が開く

## デメリット

* MacOSで見ると、スピン表示がある
 * 郵便番号はカウントアップ・ダウンするものではない
 * cssで消せなくもないが、標準から外れる事はやりたくはない


# まとめ

挙動を見た限りでは、

* スマホ向けサイトであればnumberでも良さそう
* PCの利用を考えるとスピン表示があるのは違和感しかないのでtextタイプが良さそう

他サイトを見てみると、textタイプを使ったフォームしか見ないのでtextで統一した方が良さそうです。
(zipcodeタイプがあれば悩む事はないんですけどね...)
Docker開発環境

#はじめに
現在開発中のアプリにDockerを導入したのでアウトプットします。

#環境
Ruby on Rails '6.0.0'
Ruby '2.6.5'
MySQL '5.6.47'


#  Dockerfile
開発中アプリのルートディレクトリにDockerfileを作成します。


```ruby:Dockerfile
FROM ruby:2.6.5

RUN apt-get update -qq && \
    apt-get install -y build-essential \
                       libpq-dev \
                       nodejs

RUN mkdir /アプリ名
WORKDIR /アプリ名

ADD ./Gemfile /アプリ名/Gemfile
ADD ./Gemfile.lock /live_search/Gemfile.lock

RUN gem install bundler
RUN bundle install
ADD . /アプリ名
```

# docker-compose.yml

```ruby:docker-compose.yml
version: '3'
services:
  db:
    image: mysql:5.6.47
    environment:
      MYSQL_ROOT_PASSWORD: 'password'
    ports:
      - "4306:3306"
    volumes:
      - ./db/mysql-data:/var/lib/mysql

  web:
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/アプリ名
    ports:
      - "3000:3000"
    depends_on:
      - db
```

# entrypoint.sh
```ruby:entrypoint.sh
set -e

rm -f /myapp/tmp/pids/server.pid

exec "$@"
```

# database.yml
```ruby:database.yml
default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: password
  host: db
  socket: /tmp/mysql.sock
```
password: password
  host: db
を追加

# コンテナを作成
```ruby:ターミナル
% docker-compose build
```

# DB作成、migrationの実行
```ruby:ターミナル
% docker-compose run web bundle exec rake db:create
% docker-compose run web bundle exec rake db:migrate
```

# コンテナを起動
```ruby:ターミナル
% docker-compose up 
```