OmniAICreator/Qiita-1.07M huggingface dataset:
【jQuery】validate.jsを使ってクライアントバリデーションを設定してHTMLで躓いた話

# 結論：input type=numberは電話番号や郵便番号に使ってはいけないよという事。

### やりたい事
- テキストボックスに全角文字、半角英字、「0」で始まる数値を入力できないようにする
- 「0」始まる数値が入力された時はvalidate.jsを使ってフォームを送信できないようにする

### 参考
> input type=”number”の落とし穴 – “number”を使うと先頭の0が認識されない
> https://plustrick.com/input_type_number/
validate.js
> https://validatejs.org/
jQuery Validation 独自のルールを追加する
> https://symfoware.blog.fc2.com/blog-entry-2354.html

### HTML

`input type=text`で全半角英字・全角数字を入力できない関数をJsで作ってみたけど、テンキーで数字が入力できなかったり、tabキーを使えないなど、様々考慮する事があったので、ここは手っ取り早く`input type=number`を使う事にした。

```html
<form id="form">
  <input type=number id="number" name= "number">
  <!-- validate.jsでエラーにかかったらエラーメッセージを表示する -->
  <p class="number-err-msg"></p>
</form>
```
スピンボタン（右のボタン）を消したければ以下をcssに追加しましょう

```css
<!-- Chrome、Safari -->
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
<!-- Firefox、IE -->
input[type="number"] {
    -moz-appearance:textfield;
}
```

### Js

サーバーバリデーションもかけていますが、クライアントバリデーションもかけます。validate.jsの使い方は割愛します

```js
$.validator.addMethod(onlyHalfnumber, function(value, element) {
    if ( this.optional( element ) ) {
        return true;
    }
        <!-- 先頭が0にマッチする場合 -->
        if (value == /^0/) {
            return false;
        }
        return true;
    }, '先頭が0はダメですっ！！');
}

    $("#form").validate({
        rules: {
            number: {
                onlyHalfNumber: true
            }
        }
    });
```

### これでバリデーション設定完了のはずが...

フォームが送信されて登録されてしまいました。原因が冒頭で書いたinput type=nemberですね。数字の先頭が「0」で始まっていると、「0」の部分は「無し」という認識に変わってしまうようです。

### 結論
input type=numberを使えば、整数以外の入力はできないので便利なのですが、先頭に「0」を付ける場合（電話番号など）`type=text`を大人しく使うか`type=tel`を使うのが良さそうですね。HTMLは悪意があればいくらでも書き換えられるのでサーバーバリデーションを設定するのをお忘れなく

##### 終わり
Volatility Framework チートシート

昨日は泥のように寝てて丸一日無くなってました･････
１日空いてしまいましたが、日課の記事投稿です。

Web関連のネタは普段業務でやってるから、しばらくは記事にする優先順位低めでいいかな･･･？
というわけで、今回はフォレンジックでお馴染みのVolatilityのチートシートを作成してみました。
※当方は普段は脆弱性診断をしているもので、VolatilityはCTFで使用する程度です。おかしな点などありましたら指摘いただけると幸いです。

今回は以下を参考にさせていただきました。

* [volatility-memory-forensics-cheat-sheet.pdf](volatility-memory-forensics-cheat-sheet.pdf)

## Volatility

Volatility Frameworkはメモリイメージを解析するためフレームワーク。
オープンソースでWindows、Linux、Macなど多くのプラットフォームに対応している。

### インストール

以下からダウンロード

* [volatilityfoundation | Releases](https://www.volatilityfoundation.org/releases)

### yarascan プラグイン(ルール)
pipでインストールするだけ。

```ruby:
pip install yara
```

## 基本コマンド

```cmd:
volatility.exe -f [メモリダンプ名] --profile=[プロファイル] [プラグイン]
```

## プラグイン

| プラグイン名 |       オプション   |    用途                        |
|:------------|------------------:|:------------------------------:|
| imageinfo   |                   |対象メモリのプロファイルを推測     |
| hivelist    |                   |レジストリハイブの仮想アドレスを表示|
|hivedump     |–o [仮想アドレス]      |対象ハイブの全キーを表示|
|printkey     |-o [仮想アドレス] –K [対象キー]	|対象キー（相対パス）を表示|
|dumpregistry |-o [仮想アドレス] --dump-dir [出力フォルダ] |対象ハイブをバイナリ出力|
|userassist   |	|ユーザーが起動したアプリの履歴を表示|
|hashdump     |	|ログインユーザーとパスワードハッシュを表示|
|autoruns     |-v	|自動起動するプロセスを表示（要インストール）|
|pslist	      ||起動中のプロセスを表示|
|pstree	      ||起動中のプロセスツリーを表示|
|dlllist      |	|DLLのオフセットを表示|
|netscan      |	|ネットワーク使用中のプロセスを表示|
|malfind      |-p [プロセスID]	|対象プロセスが改変されているかチェック|
|procdump     |-p [プロセスID] --dump-dir [出力フォルダ]|対象プロセスをexeとしてダンプ|
|memdump      |-p [プロセスID] --dump-dir [出力フォルダ]|対象プロセスの使用メモリをダンプ|
|yarascan     |-p [プロセスID] --yara-rules="[文字列]"|指定プロセスのメモリから文字列を検索（要インストール）|
|filescan     ||ファイルのオフセットを表示|
|dumpfiles    |-Q [ファイルのオフセット] -D [出力フォルダ]|対象ファイルをダンプ|
|cmdscan      ||コマンドプロンプトのコマンド履歴を表示|
|consoles     ||コマンドプロンプトの出力履歴を表示|
|shimcache    ||AppCompatCacheをダンプ（具体的にはOSの重要DLLであるkernel32.dllの共有メモリ）|
|clipboard    ||クリップボードを出力|
【初心者でもわかる】インライン要素とブロック要素でそれぞれの中央寄せの方法と、中央寄せする時の考え方の違い

# どうも7noteです。インライン要素とブロック要素では中央寄せの考え方が違うお話。
どうも7noteです。
この記事は以下へ引っ越しました。

https://naruweb.com/coding/center/
AppSheetでログインユーザ毎に表示するレコードを変更する（セキュリティフィルター設定）

# はじめに
学童保育で使う検温結果提出アプリを作る際の要件として、

- 自分の子供の検温結果を入力できる
- 他の子供の結果は見えない

があったので考えた。
社内アプリなど

- 複数人で使って
- 他人に情報を見られたくない

場合は必須設定になるかと思ってメモする。
もっと良い方法があれば教えてもらえると助かります。

# 考え方
1. 検温結果を入力する際に、ログイン時のメールアドレスも自動的に非公開で入力するようにする
2. 入力されたメールアドレスを、対象テーブルのセキュリティフィルタにてフィルタリングする

# 設定方法
①カラムにメールアドレス入力列（メールアドレス）を追加し、以下設定をする。

- 非公開
- 編集不可
- 入力不要
- 初期値は関数で USEREMAIL()

これで入力時に、ログインメールアドレスを勝手に入力してくれる。

![コメント 2020-07-25 001719.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/414625bf-0cc0-905c-ef8b-0382208edcef.png)

②テーブルの SECURITY の Security filter にて、以下設定をする。

- [メールアドレス] = USEREMAIL()

これでログインメールアドレスが、①で追加したメールアドレスと一致したレコードのみを表示する。

![コメント 2020-07-25 001618.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/929ca8cd-1687-dda6-9b17-23dfc177941d.png)

# テスト
2つのログインユーザにて、情報を入力しあい、相手の情報が見えなけければOK

# ＋設定
管理人などのadminユーザのみ、全てのレコードを見たい場合は、
セキュリティフィルタにOR条件を付けてログインメールアドレスを指定すればよいはず。

# 参考ページ
Security Filters: The Essentials
https://help.appsheet.com/en/articles/954497-security-filters-the-essentials


## ノーコード開発もくもく会のおしらせ
毎月1回ぐらい、「Play (No) Codes!」というグループ名でノーコード開発もくもく会をしています。
基本オンライン＋オフラインで実施しているので、よければ参加ください。
https://playnocodes.connpass.com/
Node.jsでGCEのインスタンスを作成・削除する

## 作成

```js
const Compute = require('@google-cloud/compute');
const compute = new Compute();
const option = { .......... };
const zone = compute.zone('asia-northeast1-b');
const [vm, operation] = await zone.createVM(vmName, option);
await operation.promise();
console.log(vmName + ' created!');
```

option の中身はGCPのコンソールでポチポチやった時のパラメータ（下記参照）をコピーして使うと良い

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610207/2d1f1f07-1e87-bacc-05c7-b1574f54ed60.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610207/e915d515-4bf5-b875-07b0-83ed87144154.png)


## 削除

```js
const compute = new Compute();
const zone = compute.zone('asia-northeast1-b');
const vm = await zone.vm(vmName);
const [operation] = await vm.delete();
await operation.promise();
console.log(vmName + ' deleted!');
```
RailsでGoogleMapsAPIを表示・ピン表示まで

#はじめに
過去に自分のポートフォリオでGoogleMapsAPIを利用していましたが、流れを忘れていたのでリマインドです。

#環境

rails 5.2.3
ruby 2.6.3

#今回すること
・現在地情報から経度緯度を取得しマーカーを表示する。
・取得した一覧情報をjson形式に変え、マーカーとして地図上に配置。
・地図の表示

###表示させるコントローラー作成、今回アクション名はsearchで。

```ruby:spaces_controller.rb
  def search
    @spaces = Space.all
  end
```

###モデルの作成、住所を入力後緯度経度を自動取得させる。

```ruby:space.rb
class Space < ApplicationRecord
  geocoded_by :address
  after_validation :geocode, if: :address_changed?
end
```

```ruby:schema.rb
create_table "spaces", force: :cascade do |t|
    t.string "address"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.float "latitude"
    t.float "longitude"
end
```


###MAPを表示させるscript

```javascript:javascript
  function initMap() 
    //マップを表示させる箇所
    var target = document.getElementById('gmap');
    //マップ表示
    var map = new google.maps.Map(document.getElementById('gmap'), {
      center: {lat: 35.681167, lng: 139.767052},//中心点設定
      zoom: 8//mapの拡大率設定
    });

    //現在地マーカーの作成
    //現在地取得できない場合
    if(!navigator.geolocation){
      infoWindow.setPosition(map.getCenter());
      infoWindow.setContent('Geolocation に対応していません。');
      infoWindow.open(map);
    }

    navigator.geolocation.getCurrentPosition(function(position) {
      //現在地の軽度緯度取得
      var pos = { lat: position.coords.latitude, lng: position.coords.longitude };
      var mark = new google.maps.Marker({
        //ドロップダウンアニメーションの設定
        animation: google.maps.Animation.DROP,
        position: pos,
        map: map,
        // 現在地ピンのアイコン作成。今回デフォルトのデザインは複数のマーカーに使用するので変更。
        icon: {
          fillColor: "rgb(48, 255, 176)",
          fillOpacity: 1.0,
          path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
          scale: 4,
          strokeColor: "green",
          strokeWeight: 1.0
        }
      });
    }, function() {
      infoWindow.setPosition(map.getCenter());
      infoWindow.setContent('Error: Geolocation が無効です。');
      infoWindow.open(map);
    });
    //複数マーカー
    //一覧のデータをjson形式に
    var spaces = #{raw @spaces.to_json};
    var marker = [];
    var info;
    for(var i = 0; i < spaces.length; ++i) {
      //一覧から一つずつ経度緯度の情報を取り出してマーカー作成
      spot = new google.maps.LatLng({lat: spaces[i].latitude, lng: spaces[i].longitude});
      marker[i] = new google.maps.Marker({
        position: spot,
        map: map,
      	animation: google.maps.Animation.DROP
      });
      markerEvent(i);
    }
    //複数マーカーのhover時イベント
    function markerEvent(i) {
      marker[i].addListener('mouseover', function() {
        var target = $('#' + (i + 1));
        $(".highlight").removeClass("highlight");
        target.addClass("highlight");
        var position = target.offset().top - 280;
        $('body,html').animate({scrollTop:position}, 400, 'swing');
      });
    }
    //-------------------------------------------------------------
  }


script src="https://maps.googleapis.com/maps/api/js?key=#{ENV[""]}&callback=initMap" async defer
```
今回はテンプレートエンジンをslimにしてその中に直接書いているのでデータの変数格納のあたりが通常と違っているので注意。
gemのgeocoderを使用すると名前から経度と緯度を取得するのが非常に楽ですが、精度が悪く、番地単位まで表示してくれないので今回はGoogle Geocodingを使用しています。
超初心者向けGitHubの使い方（チーム開発）

自分自身が、GitHubの初心者なので
Rubyチーム開発の手順として、忘備録としてまとめます。
GitHubのアカウントを持っていて、GitHub Desktopもダウンロードしている
ことを前提としています。
もし、何か間違っていることがあれば教えていただきたいです。


最初に、アプリの雛形を作成します（デプロイする人が作成をします）。



ターミナル

```
% rails _6.0.0_ new アプリ名 -d mysql　　　　# mysqlデータベースでの開発
```

config/database.yml

```ruby:

default: &default
  adapter: mysql2
  encoding: utf8   # encodingを変更。
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password:
  socket: /tmp/mysql.sock
```
ターミナル

```terminal
% rails db:create  # データベースを作成
```


これで、アプリの雛形が完成しました。

ここからは、GitHUbにデータを紐付ける作業をしていきます。
以下の手順で作業していきます。

①GItHub Desktop から 先ほど作成したアプリのローカルリポジトリを作成。
　左上の「Current Repository」→「Add」→「Add Existing Repository」を選択
②ターミナルから該当ディレクトリへ行き、「git init」コマンドを実行。
　これをすることで、該当アプリがgit管理下に置くことができる。
③ターミナルより以下コマンドを入力

```
git add 該当アプリ.rb
```
このコマンドを入力することで、インデックスに追加されることになリます。
念の為以下コマンドを入力

```
% git status
On branch master   # git statusをすると、以下文が出たら、全てインデックスに移動済
No commits yet
Changes to be committed:
    (use "git rm --cached <file>..." to unstage)
        new file: 該当ファイル.rb
Untracked files:
    (use "git add <file>..." to include in what will be committed)
        site/
```


④GItHub Desktop から git-app のローカルリポジトリを作成。
　左上の「Current Repository」→「Add」→「Add Existing Repository」を選択。
　chooseから該当アプリを選択、「Add Repository」をクリック。
⑤ローカルリポジトリにある全てのファイルを選択してコミットする。
　その際のコミットメッセージは、なんでも良いが、迷うのであれば「Initial commit」とする。
⑥リモートリポジトリと結びつける。
　GitHubDesktopより[Publish repository]ボタンをクリックすると 
　GitHub のリモートリポジトリが作成される。
⑦ここで リモートのGitHub のトップページに移動。
　GitHub の Your repositories の欄に 該当アプリ があれば成功。


＝＝＝＝＝＝＝＝＝＝＝
ここまでで、アプリの雛形とGitHubへの紐付けが終了です。
次に、チームで開発するために、別のメンバーが作成していくを書いていきます。



①別のメンバーは該当アプリをフォークして、クローンをする。
　GitHub（リモート）の該当アプリのページへ飛び、URLをコピー。
　右上にあるforkボタンを押す。→フォークされる。

　ターミナルでcloneしたいフォルダまで行き、以下のコマンドを実行。

```
git clone　コピーしたアプリのURL 　　→クローンされる。
```

　これで、アプリがクローンされる。


②コミットをする。
　クローンした後、空のコミットをする。
　しかし空のコミットは、GitHubデスクトップからコミットできないので
　ターミナルから以下のコマンドを入力してコミットをする。

````
git commit -m 'initial commit'
````

必ず最初にコミットをしなければいけない訳ではないが、
この後、プルリクエストを出すにはコミットをしておかなければならない。
プルリクエストも別に出さなくても良いが、プルリクエストを出すことによって
別のチーム開発者に、今ここを実装しているといったアピールができるので
コンフリクトを減らすことができる。
つまり、コンフリクトを減らしたい→その為にプルリクエストを出しておきたい→その為に最初に
コミットを出しておく。

③コミットをしたら、GitHubDesktopから、マスターブランチから新しくトピックブランチを切り
　プルリクエストを出す。ブランチ名はこれから実装するであろう内容にする。
　タイトルにWIP（作業中）をつける。
　WHAT WHY で書くとわかりやすい。（マークダウンで書くのが望ましい）
　プルリクエストを出すことで、他のメンバーに自分が実装している場所をアピールすることができる。
　マスターブランチでプルリクエストを出さないように注意。

④ トピックブランチから、開発を開始する。

⑤完成したら、GitHubデスクトップより、コミットをする。

⑥他のチームメンバーにLGTMをもらったら、WIPの記述をなくす。
　もしくは、プルリクエストをクローズする。リモートの下の方にボタンがある。

⑦プッシュする。

⑧アプリ開発者（デプロイする人）にマージしてもらう。
　マージしたら、プルリクが溜まらないようにデリートするのがおすすめ。

⑨ローカルリポジトリにプルしたいので、
　GitHubデスクトップのブランチをマスターブランチに変更して、プルをおす。
　こうすることで、最新版のデータを吸い上げることができる。

⑩ローカルリポジトリが最新のデータになったので
　再度、トピックブランチを切って、次の開発を進めていく。


＝＝＝＝＝＝＝
GitHubは、最初はなかなか慣れない人が多いと聞きました。
順を追って確認しながら進めていくのがおすすめです。
みなさん、一緒に頑張りましょう！
【Qiita】よく忘れてしまう機能のメモ

Qiitaに投稿する時の「これってどうすればいいんだっけ？」といった時のためのメモ。

# 索引
[画像](#画像)
[リンク](#リンク)
[折りたたみ](#折りたたみ)

# 画像
## 画像の大きさ調整
```
<img width="表示幅" alt="ファイル名" src="URL">
```

## 画像に枠線をつける
```
|画像の情報
|:-:|
```
上下に空行が必要。

# リンク
## ページ内リンク(索引等)
この記事の索引も同じ書き方をしています。
【参考】
[【ページ内リンク】markdownとQiitaの書き方の違い (アンカーリンク設定時の注意)](https://qiita.com/yuta-38/items/87ae7e08abd3e9483e87)

```
[表示するテキスト](#リンク先の見出しのテキスト)
```
例えば、このページの「リンク」というページ内リンクは`[リンク](#リンク)`となっています。

ただし、ページ内リンクを設ける場合は、いくつか注意点があります。
また、Qiitaとマークダウンでページ内リンクの書き方のルールに違いがあるようです。
### 1. リンクの対象はあくまで見出しになっているもののみ
* ただのテキストに対してのリンクを貼ることはできません。
* この記事の場合、`# 索引`、`# 画像`、`## ページ内リンク(索引等)`のように`#`で見出しになっているものだけがリンクの対象となります。

### 2. ()内の`#`はどの見出しでも1つ
[画像の大きさ調整](#画像の大きさ調整)という場合(見出しの記述「## 画像の大きさ調整」)は、
`[画像の大きさ調整](#画像の大きさ調整)`となっています。

### 3. 使えない記号、書き方がある
#### 3-1. ()は省略
[ページ内リンク(索引等)](#ページ内リンク索引等)という場合は、
`[ページ内リンク(索引等)](#ページ内リンク索引等)`となっています。

#### 3-2. 半角記号・全角記号・スペース
* 半角記号と全角記号は基本的に削除
 * **ですが**、「ハイフン(-)」と「アンダーバー(_)」については半角・全角問わずそのままです。
* スペース
 * 半角スペース：「ハイフン(-)」に変換
 * 全角スペース：削除 

[3-2. 半角記号・全角記号・スペース](#3-2-半角記号全角記号スペース)という場合(見出しの記述「#### 3-2. 半角記号・全角記号・スペース」)は、
`[3-2. 半角記号・全角記号・スペース](#3-2-半角記号全角記号スペース)`となっています。

* 解説すると・・・
 * 3-2の後の「ドット(.)」は省略
 * ドットと「半角記号・・・」の間の半角スペースは「ハイフン(-)」に変換
 * 「半角記号」、「全角記号」、「スペース」の間の「・」は省略

### 4. アルファベット
* 大文字アルファベット：半角・全角問わず小文字アルファベットに変換
* 小文字アルファベット：半角・全角問わずそのまま

# 折りたたみ
```html
<details><summary>折りたたみ</summary>
中身の表示
</details>
```
<details><summary>折りたたみ</summary>
中身の表示
</details>

折りたたみの中でもマークダウンは使えます(ただし、一部非対応)
【参考】
[Qiitaのdetails,summary要素とMarkdownの相性調査](https://qiita.com/khsk/items/a002630c034c98edc9d5)

* 折りたたみ内でマークダウンを使用する場合

```html
<details><summary>折りたたみ</summary><div>
中身の表示
</div></details>
```
`<div></div>`で囲う
この場合は、`<div>`の下と`</div>`の上にそれぞれ空行が必要。
pythonテクニック csvやexcelデータの読み込み read_csv/sas7bdat/connect

# pythonによるcsv/excel/sasデータの読み込みとデータベースの接続方法

csvの読み込みならread_csv
excelの読み込みならread_excel
SASデータセットの読み込みならsas7bdatやpandasのread_sas
DBへの接続ならsqlite3.connectなど

# 準備

```py
import pandas as pd
import dask
import dask.dataframe as dd
from dask.delayed import delayed
import sqlite3
from sas7bdat import SAS7BDAT
```

# csvの読み込み read_csv

```py
Data = pd.read_csv( "パス/ファイル名.csv" )
Data = dd.read_csv( "パス/ファイル名.csv" ).compute()
```

Daskの方が処理速度はやいので、大容量データの場合はDaskの方がいいかも

列名や型を指定する場合(データの1行目に列名あるならheader = 0で1行目無視)

```py
FilePass = "パス/ファイル名.csv"
FilePass = "./data/test.csv"
name1 = "列名1", "列名2" , "列名3" , ...
type1 = { "列名1":"str" , "列名2":"int" , "列名3":"float" , ... }
Data = dd.read_csv( FilePass, encoding = "cp932", header = 0 ,names = ( name1 ), dtype = type1 ).compute()
```

<img width="104" alt="test_csv.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/564185/56568929-3489-531f-bad5-eda5f07cb351.png">

<img width="714" alt="yomikomi.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/564185/ee29af1c-8467-e2c5-5647-69f17fabe9a0.png">


# excelの読み込み read_excel

```py
Data = pd.read_excel( "パス/ファイル名.xlsx" ,sheet_name = "シート名" )
```

csvと同様、列名の指定なども可

Daskにread_excelなかったが、無理やりやるなら

```py
aaaaa = dask.delayed(pd.read_excel)( "パス/ファイル名.xlsx" ,sheet_name = "シート名" )
Data = dd.from_delayed( aaaaa ).compute()
```

# SASデータセットの読み込み sas7bdat/read_sas


```py
# sas7bdat
Data = SAS7BDAT( "パス/ファイル名.sas7bdat" , encoding = "cp932" ).to_data_frame()
```

```py
# pandasで読み込む場合(日本語入ってると、エラーにはならないが正しく読み込めない)
Data = pd.read_sas( "パス/ファイル名.sas7bdat" , format = "sas7bdat" )
```

https://qiita.com/saspy/items/2b5aeef91e87cac503e2

# DB接続(SQLite3)

```py
# データベース接続
conn = sqlite3.connect( "パス/db名.db" )
```

```py
# データベース閉じる
conn.close()
```


https://pandas.pydata.org/docs/user_guide/io.html#csv-text-files
https://pandas.pydata.org/docs/user_guide/io.html#excel-files
https://examples.dask.org/dataframes/01-data-access.html
https://docs.python.org/ja/3/library/sqlite3.html
プログラマーの心得 五箇条

簡単にまとめました。

#1.「どうして？」を口癖にする

- 物を見るときに「どうして？」と考える癖をつけて、次にそれを実現する方法を考える

- 例えば、「ガステーブルのつまみをひねったら、どうして炎がでるのか」、「テレビのリモコンを操作すると、どうしてチャンネルが変わるのか」などを考えたら、次にその仕組みを詳しく箇条書きにしてみる。 

#2.紙とペンを持ち歩く

- 紙に書いた方が自分の考えをまとめることができる。

#3.ポイントをはっきりさせる

- 良いプログラムとは「ユーザーが望んだ結果をきちんと返してくれるプログラム」である。

- あれこれと欲張らずに本当に必要なことが、間違いなく実行できるプログラムを書くことを心がける。


#4.プログラムの先にいる人の顔を思い浮かべる

- 使う人の顔を思い浮かべながら、ユーザビリティを考えたプログラムを作成するとよい。


#5.人の意見に耳を傾ける

- 第三者の意見には、自分では気付けないものがあるので、柔軟に取り入れてプログラムを作り直すようにする。

参考：『これからはじめるプログラミング基礎の基礎』
VisualStudioからAzureへWebアプリケーションを発行(デプロイ)する【簡易版】

#ちょっと作ったWebアプリをすぐ試したい
GitHubとか使ってCI/CDが主流ではあるんだけど、そんな大それたものではなくVisualStudioでチョロっと作ったWebアプリをAzureに上げげてみたい、と思ったものの、手順がすぐ出てこなかったのでメモがてら記事にすることにしました。

#前提
多分メニューの「ヘルプ」→「製品の登録」からAzureにデプロイ可能な権限がついた個人アカウントを追加しておく必要があると思います。
(無い状態ではやってないので、アカウント登録がない場合どうなるかは不明。手順のどこかのタイミングで聞かれるかも？)
![製品の登録.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65842/edf9fa13-98c4-11e9-d0a1-9e148daff111.png)
![アカウント追加済み状態.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65842/b36fe081-b8dd-30c1-0d36-0f3c6be99a98.png)

#手順①：発行の開始
以下のいずれか。

  - メニューの「ビルド」の「 ”プロジェクト名” の発行」
![メニューの「ビルド」の「 ”プロジェクト名” の発行」.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65842/36005f83-0ee2-125c-de62-034b687a655d.png)

  - ソリューションエクスプローラーのプロジェクトを右クリック→「発行」
![ソリューションエクスプローラーのプロジェクトを右クリック→「発行」.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65842/127f6552-ffa6-f060-8430-e0ab02057289.png)

#手順②：開始をクリック
![開始をクリック.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65842/ef493e66-bf31-4f8f-3e69-1484d2e5db6e.png)

#手順③：Azure Webアプリを作成or選択
この場で作る場合は「新規作成」。作ってあるものを使う場合は「既存のものを選択」。
![Azure Webアプリを作成or選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65842/179df454-7868-60aa-53fa-dddc383c9d0a.png)

#手順④-1：新規作成の場合
適宜選択して作成。
![新規作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65842/dde1446f-10ca-aeeb-8ca4-248c25ce53af.png)

#手順④-2：既存のものを選択
以下のようにAzure portalで作ってた場合、対象を選択してOK。
![azure_portal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65842/9ba4c08e-0c75-2ffc-bcde-cbbef626adfc.png)
![選択してOK.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65842/18f2ed98-07ce-aa52-6726-24b22cf33642.png)

#手順⑤：発行
発行をクリックすると後は色々自動的にやってくれます。
![発行をクリック.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65842/136a52da-aa51-b03f-da8f-fdb4c8e502e6.png)
pleasanter+PostgreSQL+SSL+docker な構成を作ってみた

# 概要

- pleasanter、docker、PostgreSQL、SSLの環境を作りました。
- gitsを駆使したのでほぼコピペでpleasanterが動くようになりました。
- SSLにも対応しているので、インターネットに置いてお試しとして使う事が出来ると思います。

# 作ったもの 

[pleasanter-docker-PostgreSQL](https://github.com/yamada28go/pleasanter-docker-PostgreSQL/tree/ssl)

# 使い方
## ドメイン
SSLを使う場合、 ドメイン取得が必須となります。
適当なドメインを用意しまょう!

## aws ec2セットアップ (必要な人だけ)

今回はec2を使いました。
実際の所は、dockerが動けば何でもよいと思います。
ただし、メモリが1Gくらい必要でスワップが無い状態だとうまく起動させることが出来ませんでした。
(aws EC2 t2-nanoのデフォルトだとスワップが無い。)

以下shellで順次設定していきます。

[gits shell  swap 有効化](https://gist.github.com/yamada28go/f68f0e3f943dc6960e61997673f06300)

次に、amazon linuxを入れた直後だとdockerが使えないため、
以下shellで有効化します。

[gits shell  amazon linux docker有効化](https://gist.github.com/yamada28go/e9f0cac820b523060d7d6a386d3f36c9)

## pleasanter準備

いよいよ本題です。
pleasanterの準備を行います。
gitリポジトリをクローンして良いパスに移動して以下コマンドを実行してください。

[gits shell  pleasanter準備](https://gist.github.com/yamada28go/a28cd66733f6196d3ca08d40080335dd)

なお、sslが不要な方はコマンドの中で実施している「git checkout ssl」を外して下さい。

## ドメイン設定

sslを使う方はドメインを設定してください。
gitで落ちてきた設定ファイルの中から、
以下ファイルの★の部分を変更します。

```docker-compose.yml
~　抜粋 ~
  # 通信を暗号化
  https-portal:
    image: steveltn/https-portal:1
    ports:
      - '80:80'
      - '443:443'
    links:
      - pleasanter-web
    restart: always
    environment:
      DOMAINS: 'wordpress.example.com -> http://pleasanter-web' ←　★1
      # 本番モードへ切り替え
      # STAGE: 'production' ←　★2
      # 証明書を強制的に再取得する
      # FORCE_RENEW: 'true'
~　抜粋 ~
```

| ★    |       意味 |    
|:-----------------|:------------------|
| ★1             |              wordpress.example.comをご自分のドメイン名に置き換えてください。 |   
| ★2          |            コメントを外すとLet's Encrypt から発行された証明書を使います。コメント付きだとオレオレ証明書で動きます。 |      

## 起動

普通に起動してください。

```
docker-compose up　-d
```

指定されたドメインにアクセスするとユーザーは初期設定となっているので、
以下アカウント情報でログインしてください。

    user: Administrator
    pass: pleasanter

# よく考えたら...

正規版pleasanterの小規模プランだと1000円/月との事です。
aws EC2 t2-nanoでも月1000円くらいかかるので、
pleasanterの開発に貢献する意味でも正規版を買うようにしましょう!

[料金プラン](https://pleasanter.net/Home/Price)

# 続き

自動バックアップ機構を追加した記事です。

[pleasanter+PostgreSQL+SSL+dockerで自動バックアップを作ってみた](https://qiita.com/yamada28go/items/4e1200ef22daf4e056d7)

# 参考

[Pleasanterをサクッと起動できるcompose](https://qiita.com/coleyon/items/8ca7830cdb0515f370de)
[https-portalを使ってみて、個人的にぶつかりそうな壁の解決方法](https://qiita.com/github0013@github/items/71c44d7bf4faf63c1956)
[docker で全自動 Let's encrypt](https://qiita.com/kuboon/items/f424b84c718619460c6f)
SQL操作で改行を挿入する

##はじめに
SQL操作する時に文言や数字を挿入することはよくあると思いますが、改行のある文章を挿入したいと困ったことはありませんか。
今回はSQL操作で改行を挿入する方法をまとめます。

##SQL操作で改行を挿入する

SQLで改行したい時 `|| CHR(13) ||`を用いる。



```pgsql:例(PostgreSQL)
('改行' || CHR(13) ||  'テスト')
```

が

```pgsql
改行
テスト
```

になります。

##おわりに
ツールを使ってデータを挿入することもできますが、まとめてデータを挿入したい時はSQLを実行した方が早いのでSQLの小技を使いましょう。
【JavaScript入門】モーダルウィンドウ

## はじめに
Webサイトを作成する際、
・ボタン、画像を押したときにポップアップする小ウィンドウを設置したい
と思うことあると思います。
今回は、そんな機能についてご紹介します。

## 手順①　表示・非表示機能をつくる
まずは、モーダルウィンドウの根幹となる表示・非表示の機能を作ります。

```html:html_javascript
<form>
  <input type="button" id="openBtn" value="モーダル">
</form>

<!-- モーダルウィンドウで表示する部分 -->
<div id="modal" class="modal">
  <div class="modal_content">
    <h1>Hello</h1>
    <input type="button" id="closeBtn" value="閉じる">
  </div>
</div>
    
<!-- モーダルウィンドウ -->
<script>
  var openBtn = document.getElementById('openBtn');
  var closeBtn = document.getElementById('closeBtn');
  var modal = document.getElementById('modal');
      
  // 表示（openBtnというidのボタンがクリックされたら、display:blockになる）
  openBtn.addEventListener('click', function(){
      modal.style.display = 'block';
  })

  // 非表示（closeBtnというidのボタンがクリックされたら、display:noneになる）
  closeBtn.addEventListener('click', function(){
      modal.style.display = 'none';
  })
</script>
```

```css:css
/* ボタンがクリックされたときに表示したいので、displayはnoneに設定 */
.modal{
    display: none;
}
```
これでは、まだウィンドウとして形になっていないので、CSSにいくつか追記する必要があります。

## 手順②　CSSでデザインする
次に、見栄えの良いモーダルウィンドウになるようCSSを書いていきます。

```css:css
.modal{
  display: none;
  background: rgba(0,0,0,0.5);
  /* モーダルウィンドウの位置固定 */
  position: fixed;
  /* 背景色を画面いっぱいにする */
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;  
}

.modal_content{
  background: #fff;
  width: 500px;
  /* モーダルウィンドウを画面真ん中に表示 */
  margin: 25% auto;
}
```
これで一通りは完成ですが、最後にひと工夫入れます。

## 手順③　背景色をクリックで非表示
最後に、背景をクリックしたときも閉じれるようにしていきます。

```javascript:javascript
// 背景クリックで非表示（modalというidの部分がクリックされたら、display:noneになる）
addEventListener('click', function(close_bg){
  if(close_bg.target === modal){
    modal.style.display = 'none';
  }
})
```
以上でモーダルウィンドウの実装は完了です。

あとは、ご自身でCSSを触ることでバリエーションができると思います。

## 参考
[Event.target](https://developer.mozilla.org/ja/docs/Web/API/Event/target)
[javascriptでモーダルウィンドウ](https://qiita.com/sibakenY/items/2615eed5603980ae4425)
本格四脚ロボットをつくろう　1.ロボットの仕様を考える

##ロボットの構造
ここ数年前までの四足歩行ロボットは一脚につき、2軸の計8軸ロボットがメジャーでしたが、最近になっては12軸がほとんどです。もちろんここでも12軸ロボットを対象とします。

簡略図を以下に記します。
<img width="600" alt="quadruped robot diagrams" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492804/ea8be612-c183-405a-78ca-63856e1d4420.png">
他の四脚ロボと同じです。

しかし、１２軸型の四脚ロボットでは大きく分けて２つのタイプがあります。
１つはA.下腿の可動範囲に**制限があるタイプ**と、B.可動範囲が**無制限なタイプ**です。
BostonDynamicsのSpotはAのタイプに分類されます。また、Anybotics社のAnymalはBのタイプに分類されます。
<img width="600" alt="boston dynamics spotmini" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492804/5c139833-6448-6877-1bbd-b5f4698bc3b5.png">
*Boston Dynamics SpotMini*

<img width="600" alt="Anymal" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492804/648485c7-42b2-ded9-506b-3b824fc54935.png">
*Anybotics Anymal*

Aタイプのメリットは、大腿部と下腿部が同一直線上にあるので構造が簡単という点です。
まぁ見た目もBタイプよりスマートですよね。
Bタイプのメリットは、可動制限がないため実現可能な動作が前者と比較して多いです。また、ロボットが暴走した場合でもロボットが損傷するリスクが小さいです。

拡張性が広いという点で本プロジェクトではBタイプの四脚ロボを開発していこうと思います。


##使用するもの
####モータ  :　**X8318s**
モータはブラシレスモータを使用したいと思います。理由は高出力で省スペース軽量という点です。
ほとんどの有名な四脚ロボはBLDCを使用してるかと思います。このBLDCを選定します。
調べた中でコスパが最強だと思います。12個もモータを使用するのでコスパはかなり重要な項目です、、、。
ただ、これほど大きいモータをつけるとなるとかなりの量のバッテリーを積まなければならなくなるので難点ですね…。
まぁ、現段階ではバッテリーに関しては考えないことにします。

<img width="500" alt="motor" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492804/85b9cff3-27a2-96c7-26e7-ef224deb9cab.png">
https://www.alibaba.com/product-detail/X8318S-Electric-Brushless-Motor-For-RC_60743175936.html


このモータを利用する場合、減速機は必須なので減速機を自作しなければなりません。
ハードウェアにあまり時間をかけたくない場合は多少値段は張りますが減速機つきのBLDCを利用してもよいかと思います。
最近だとCheetah miniのモータの模倣品がかなり流通してます。
<img width="500" alt="cheetah mini motor" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492804/7c8755c5-2b87-6461-bb71-b80b53bafeff.png">
https://ja.aliexpress.com/item/4000109816211.html

####モータドライバ　：　**ODRIVE v3.6**
BLDCのドライバーとしていちばん有名なのがODRIV。かなり高価ですが開発者も多く扱いやすそうなのでこれを選定します。
ひとつのドライバで2つのモータが制御できるので計6つ必要ですね。
<img width="500" alt="odrive" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492804/2a33caa2-cd6a-69e6-cb64-7b8c515d9233.png">
https://odriverobotics.com/shop/odrive-v36




そのほか、カメラやライダーなども搭載したいですが最初はシンプルから進めていこうと思います。
都度必要を感じたときにハードウェアのアップグレードを行いたいと思います。

次回は、減速機の設計について投稿します。
hyperscript（h()）の使い方(ブラウザで利用する手順)



hyperscript(h()でDOM生成)をブラウザから利用するサンプルです。


利用イメージ

~~~javascript
    root.appendChild(
        h("ul", {}, 
            [h("li", "list1"),h("li", "list2"),h("li", "list3")]
        )
    );
~~~

## 準備
~~~
npm init
npm install hyperscript
npm install -D http-server
~~~
http-serverは動作確認用のhttpサーバです。


## サンプルの内容
1. ブラウザで利用可能とするため、jsファイル内でhyperscriptを読み込み、エクスポートします。
2. Browserifyでバンドルを行います。ブラウザからCommonJSモジュール形式のhyperscriptを呼び出すために必要です。
3. ブラウザからバンドル済みのjsファイルを読み込み、DOMの生成を行います。



## 実装の概要

### 1. jsファイルでhyperscriptを読み込みエクスポートする。


ブラウザが利用するjsファイル(main.js)

~~~javascript
var h = require('hyperscript');

module.exports = {
    createSampleDom: ()=>{
        return h("div", {style:{color:"blue"}}, h("span", {}, "春はあけぼの"));
    },
    h: h,   // h()自体をエクスポート。ブラウザ側で直接利用できる。
}
~~~
hyperscriptとバンドルするためcommonjs形式(module.exports)でエクスポートを行います。

### 2. Browserifyでバンドルを行う
1. バンドルしたモジュール公開するため「-r」(--requireオプション)をつける。
2. モジュール名の指定(:app)を行う。(デフォルトのモジュール名が変なため)

~~~
    browserify -r ./main.js:app > app.js
~~~
:app がモジュール名指定　(require('app')でロードできる)

### 3. ブラウザ側で公開したメソッドを読み込み、実行してDOMに追加する。

~~~html
    <script src=./app.js></script> 
    <script>
        window.onload = function() {
            var appModule = require('app');        
            const root = document.getElementById("rootNode")
            
            // modele.export されたfunctionを呼び出し、DOMを生成する。
            const node = appModule.creatoSampleDom();
            root.appendChild(node);

            // moduleで公開したh()を呼び出す。
            const h = appModule.h; //exportしたfunctionを変数に設定
            root.appendChild(
                h("ul", {}, 
                    [h("li", "list1"),h("li", "list2"),h("li", "list3")]
                )
            );
       }
~~~

***
## ビルドと実行について
package.jsonの"scripts"に、下記を追加。

    "build": "browserify -r ./main.js:app > app.js",`
    "serve": "http-server",`

- ビルドと実行
    - npm run build
    - npm run serve
VPSでWordPressの個人ブログを開設するまでの道(2)

# はじめに

前回はブログの開設方法について記事にしました。
前回の記事：[VPSでWordPressの個人ブログを開設するまでの道(1)](https://qiita.com/tomluck/items/2a04bb427acea2b8e0c6)

無料ブログを開設する以外の場合、家を建てる場合に例えて3つのものが必要と言われています。

1. 土地に相当するサーバの検討
2. 住所に相当するドメイン名取得の検討
3. 家に相当するCMS(Content Management System)の検討

今回は、それぞれをどのように選定するかということを記事にします。

# 1.サーバの検討
前回の記事でVPSを使うことにしたので、提供している業者を選定します。

Webで調べてみると次の3社が人気があるようなので、その中で選定することにしました。

- Conoha VPS
- さくらのVPS
- KAGOYA CLOUD

この中で、Conoha VPSを選定することにしました。
理由は、次の通りです。

- 利用者数No.1：使っている人が多いということは、それだけ満足度も高そう。
- KUSANAGI(チューンアップしたWordpress環境)が使える：Wordpressで作るなら高速な方が良い
- OSや開発環境のテンプレートが豊富：ブログ以外にも何かやろうとしたら簡単にできる環境がそろっている
- 初期費用や最低利用期間の設定がない

# 2.ドメイン名取得の検討
自分が取得したいドメイン名がすでに他の人に登録されていた場合、新たに取得することはできません。

## ドメイン名の取得について
一般的にトップレベルドメインは.comが一番人気で、可能であれば.comのドメインを取るのが望ましいです。
ただし、私が希望するドメインは.comが他の人に取られていたので、.netドメインで取得することにしました。

ドメイン名は1年ごとに更新があり、取得が安くても更新が高い場合はトータルで高くつくこともあり、
取得代よりも更新代を気にしたほうが良いです。

## ドメイン名取得業者の選定
ドメイン名取得の業者はたくさんありますが、.netドメインで更新代が一番安いのは、サーバで選定したConohaでした。
お名前.comやほかの業者は投稿時点(2020年7月)で1500円近くかかるのですが、Conohaだと1300円弱でした。
サーバと同じ業者だと支払いなども一か所で済み都合が良さそうなので、Conohaでドメインを取得することにしました。

# 3. CMSの検討
基本的にWordPress一択のようなので、Wordpressを使うことにしました。
ただし、WordPressをよりチューンナップしたKUSANAGIという環境があるらしいので、それを使います。

# おわりに
今回はブログ開設に必要な3つの項目についての検討と選定結果について記事を書きました。
お役に立つ人がいれば幸いです。
Google翻訳APIをPythonで実行する

#概要
論文を翻訳して読むのに、ブラウザ上でちまちまGoogle翻訳にコピペしていたのだが、いい加減面倒になった。そこでテキストファイルに書かれた英文を読みとり、翻訳結果を出力するPythonスクリプトを書いてみようと思った。

翻訳はGoogleAPIを使おうと思って事例を調べた所、[Google翻訳APIを無料で作る方法](https://qiita.com/satto_sann/items/be4177360a0bc3691fdf)という記事があったので、試してみた時のメモ


#元記事からのAPI変更点
元記事はGetでAPIを叩いていたが、大量の文章を投げる場合の文字列制限が気になったので、以下の通りPostでもアクセスできるようにした。

```javascript
function doGet(e) {
  return doPost(e);
}

function doPost(e) {
    // リクエストパラメータを取得する
    var p = e.parameter;
    // LanguageAppクラスを用いて翻訳を実行
    var translatedText = LanguageApp.translate(p.text, p.source, p.target);
    // var translatedText = LanguageApp.translate("a", "en", "ja");
    // レスポンスボディの作成
    var body;
    if (translatedText) {
        body = {
          code: 200,
          text: translatedText
        };
    } else {
        body = {
          code: 400,
          text: "Bad Request"
        };
    }
    // レスポンスの作成
    var response = ContentService.createTextOutput();
    // Mime TypeをJSONに設定
    response.setMimeType(ContentService.MimeType.JSON);
    // JSONテキストをセットする
    response.setContent(JSON.stringify(body));

    return response;
}
```

#Pythonコード
api_urlには、上で作成したAPIのURLを指定してください。また、"Authorization"ヘッダーには、後述の「ハマったところ」で記載しているアクセストークンを指定してください。URLとアクセストークンのところは、念のため*で隠してます。

```translate.py
import argparse
import requests
import pprint

def main():

    api_url = "https://script.google.com/macros/s/****************************************/exec"
    headers = {"Authorization": "Bearer ya29.***************************************************************************************************************"}

    parser = argparse.ArgumentParser()
    parser.add_argument("-input", type=str, required=True)
    args = parser.parse_args()

    input = ""
    with open(args.input, 'r',encoding="utf-8") as f:
        for line in f:
            print(line)
            line = line.strip()
            input += line

    params = {
        'text': "\"" + input + "\"",
        'source': 'en',
        'target': 'ja'
    }

    r_post = requests.post(api_url, headers=headers, data=params)
    print(r_post.text)


if __name__ == "__main__":
    main()
```

#使い方
## 1.テキストファイルに文章を入力
```input.txt
hello
```

## 2.コマンド実行
```
$ python translate.py -input input.txt
```

## 3.コンソールに結果出力
以下のような形でコンソールに出力結果が得られる。

```
{"code":200,"text":"こんにちわ"}
```

#ハマったところ
## 認証エラーが発生
元記事の通りにやったところ、認証エラーが発生した。結論としては、[[Google Apps Script]認証が必要なウェブアプリケーションを外部から実行する](https://www.ka-net.org/blog/?p=12258)の通り、リクエストヘッダにアクセストークンを設定したところうまくいった。特定のユーザに限定して公開した訳ではなかったのだが。。。

## 追加したdoPost関数が認識されない
APIにdoGet関数を作成・公開し、その後にdoPost関数を追加しAPIを叩いたところ、```スクリプト関数が見つかりません: doPost```と怒られしばし悩んだ。結論としては、API公開時にAPIのバージョンを上げないと新しい関数が認識されないようだ。


# おわりに
- かなりの長文を食わせて見たが、途中までしか日本語が生成されていなかった。API側に文字制限があるのかもしれない。その場合は、センテンスが途中で途切れないよう注意しつつ、文章量を適当な長さに分割してAPIを複数回実行する等の対策が必要となる。
- 次回はPDFからテキストを抽出するコマンドも作成してみる。最終的にはボタン一発でPDFから翻訳テキストを生成するGUIを作成したい。

#2020/7/25 追記(重要)
-　認証エラーについては、公開時に、「全ユーザ」ではなく、「Anyone Even Anonymouse」を指定すれば、アクセストークン等気にしなくてもよい。
（当然だわな）。しっかし、クソむずいぜ。AWSとかGoogleとか。
Kotlinの拡張関数をわざわざ使う理由

Kotlinの拡張関数、便利ですよね。

その「便利」の意味するところは、「自身の手を入れられない箇所（ビルトインだったりサードパーティだったりのfinal class）への唯一のアプローチである」という側面が強いかと思いますが、それ以外にも便利な点があります。

それが「特定の型パラメーターのときのみ使用できる関数（メソッド）の定義」です。

## toMapメソッドの例

KotlinにはtoMapメソッドがあります。List\<Pair\<K, V>>に対してtoMapメソッドを呼ぶと、Map\<K, V>に変換してくれるやつですね[^1]。

このメソッド、List\<T>（Tは非Pair\<K, V>）に対して呼ぶとどうなると思いますか？答えは「呼べない」、もっと言うと「コンパイルエラーになる」です。

実際IntelliJ IDEAでは候補にすら出ません。

![スクリーンショット 2020-07-24 20.03.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6934/d4c85c0f-bf6e-7e23-92e5-c2562fbbb504.png)

この挙動は定義にミソがあります。バージョン1.3.72における定義は[Maps.kt](https://github.com/JetBrains/kotlin/blob/v1.3.72/libraries/stdlib/src/kotlin/collections/Maps.kt#L540-L549)に記述の通りです。シグネチャだけ抜粋したのは以下。

```kotlin
public fun <K, V> Iterable<Pair<K, V>>.toMap(): Map<K, V> {
    // ...
}
```

なるほど。この定義だと、toMapメソッドのレシーバーはただIterableならOKというわけではなく、Iterable\<Pair\<K, V>>である必要があります。これでList\<T>では使えず、List\<Pair\<K, V>>なら使えるわけですね。

拡張関数のシンタックスを使うことで、あたかも「クラスの型パラメーターが特定の型のとき」という条件を指定できます。反対に、このシンタックスを使わないとこの指定は出来ません[^2]。

同一モジュールで自身の手を入れられる場合においても、わざわざ拡張関数で定義しているケースをちょいちょい見掛けて気にはなっていたのですが、これが理由のひとつかなあと思います。

## ScalaのtoMapメソッド

Scalaでも同様にtoMapメソッドがあります。Kotlinと同様、Iterableの取る型パラメータがTuple2[K, V]のときのみ使用できます。

しかし、Kotlinとはアプローチが異なります。以下がtoMapメソッドの定義。

```scala
trait IterableOnceOps[+A, +CC[_], +C] extends Any { this: IterableOnce[A] =>
  // ...

  def toMap[K, V](implicit ev: A <:< (K, V)): immutable.Map[K, V] =
    // ...
}
```

Iterableではなく、IterableOnceOpsだったり、まあいろいろ差異はあるのですが、それは設計の差というだけなので、目を瞑りましょう。重要なのは拡張関数ではなく、普通のメソッドとして定義しているところです。

しかし、Kotlinでは見掛けない`(implicit ev: A <:< (K, V))`という記述があります。これが「型パラメーターAがTuple2[K, V]またはTuple2[K, V]のサブタイプでなければいけない」という制約になります。よって、Kotlinと同様にそれ以外の型パラメーターのときに呼び出すコードを書こうものなら、ちゃんとコンパイルエラーになります[^3]。

この方法、[Generalized type constraints](https://apiumhub.com/tech-blog-barcelona/scala-generics-generalized-type-constraints/)と言います。言っていることは単純なんですが、Scalaのシンタックスと絡んだりして実現方法がちょっと複雑かな〜と思います。興味のある方はひもといてみると面白いかも。

## Kotlinは拡張関数でGeneralized type constraintsを実現しているのか

ScalaにはGeneralized type constraintsなんて名前が付いているんですよね。ちょっと発音しづらいけど、なんか格好良いですよね。つい使いたくなっちゃう？ちょっとちょっと、"クセ"出てるよ〜。わかるけど〜。じゃあ明日から「Kotlinは拡張関数でGeneralized type constraintsを実現している」と言っちゃおうか。

これはちょっと疑問に思う。

Generalized type constraintsの`A <:< B`は、「AがBまたはBのサブクラスのとき」という条件だが、実は`A =:= B`もあり、これは「AがBのとき」という条件になる。この条件は**型パラメーターAの変性とは無関係**である。

しかし、Kotlinの場合、型パラメーターの変性によって左右されてしまう。toMapメソッドの場合はIterableの型パラメーターが共変であるout Tなので、あたかも「型パラメーターTがPair\<K, V>またはPair\<K, V>のサブクラスのとき」のように振る舞えたが、これはたまたまと言って良いと思う。

よって、「Kotlinは拡張関数でGeneralized type constraintsを実現している」は違うと思う。

まあでもあれだな！実際にこの差で困ったことはないし、気にするほどではないと思う。さっき偉そうに「Tは共変だから〜」とか言ったけど、不変でも`fun <K, V, P : Pair<K, V>> Iterable<P>.toMap(): Map<K, V>`で可能なはずだし[^4]！不可能なのは`=:=`を実現したいのに共変のときとかかな……。

とりあえず、Generalized type constraintsではないが、「特定の型パラメーターのときのみ使用できる」というのを実現しているとは言える、が持論。

## まとめ

Kotlinでわざわざ拡張関数を使うのは、「特定の型パラメーターのときのみ使用できる」というのを実現するため。ScalaのGeneralized type constraintsと同一の仕組みではないが、同じ目的をほぼ実現できている。

[^1]: 正確にはListではなくIterable
[^2]: たぶん。他に指定方法があるなら教えてほしい……。私はちょっと分かんなかった
[^3]: ちなみにIntelliJ IDEAなどで候補としては現れる。ここがKotlinとScalaの（実現方法による）違い
[^4]: ただしPairはdata classなので継承不可能。なのであまり意味のない定義
Bắc Ninh 365 | Thông tin sản phẩm & dịch vụ tại Bắc Ninh

Bắc Ninh 365 là một website giới thiệu các dịch vụ & sản phẩm tại Bắc Ninh khách quan và chân thực nhất. Một cổng thông tin ưa thích của người dân Bắc Ninh https://sites.google.com/view/bacninh365/
BluetoothゲームコントローラーをIoTボタンとして使う。

出退勤で打刻するためにAmazon Dash Buttonを使っていたのですが、電池交換に失敗して壊してしまったので、代替として、[MOCUTE-039](https://www.amazon.co.jp/dp/B07KSC2DFV)という手のひらサイズのBluetoothゲームコントローラーを使うことにしました。ちなみにDash Buttonは2個持っていたのですが、どちらも電池交換に失敗して壊しました。つらい。

連携先にRaspberry Pi 3を使います。私が使っているのはRaspberry Pi 3 Model B Rev 1.2で、OSはRaspbian Busterです。

## Bluetoothペアリング

### 事前作業
ペアリングには`bluetoothctl`を使いますが、`bluetoothctl` でスキャンするとどのMACアドレスがMOCUTE-039なのかわからないため、適当なスマホ端末でペアリングしてMACアドレスを調べてから作業を実施しました。

```
[NEW] Device 16:01:xx... 16-01-xxx... # デバイス名がわからないのであらかじめMACアドレスを調べておく
```

### ペアリング作業

```bash
$ sudo apt install bluetooth

$ sudo hciconfig hci0 down
$ sudo hciconfig hci0 up

$ sudo bluetoothctl
[bluetooth]# power on
[bluetooth]# pair 16:01:xx...
Attempting to pair with 16:01:xx...
# 略
Pairing successful
[bluetooth]# trust 16:01:xx...
Changing 16:01:xx... trust succeeded
[bluetooth]# connect 16:01:xx...
Attempting to connect to 16:01:xx...
# 略
Connection successful
[MOCUTE-039_A32-B6FA]# quit
```

## キー押下のイベントがどこに記録されているか探す
`/dev/input/event*`のどれかにキー押下のイベントが記録されているので、`hexdump /dev/input/event1,2,3`しながらキーを押下して探します。私の環境ではevent2でした。

## python-evdevのインストール
押したキーによって実行するスクリプトを変えたいので、python-evdevをインストールします。
[Introduction — Python\-evdev](https://python-evdev.readthedocs.io/en/latest/)

Python3.7.3を使ったのでpip3でインストールしました。Python2.7でも動くと思います。

```bash
$ sudo pip3 install evdev
```

## evdevのQuickStartで動作確認する

[Quick Start — Python\-evdev](https://python-evdev.readthedocs.io/en/latest/usage.html#reading-events-from-a-device) のコードをそのままコピーして動作確認します。

```python
#!/usr/bin/python3

import evdev

devices = [evdev.InputDevice(fn) for fn in evdev.list_devices()]
for device in devices:
        print(device.path, device.name, device.phys)

device = evdev.InputDevice('/dev/input/event2')
print(device)
for event in device.read_loop():
        if event.type == evdev.ecodes.EV_KEY:
                print(evdev.util.categorize(event))
```

```
## 実行結果
/dev/input/event3 MOCUTE-039_A32-B6FA b8:27:...
/dev/input/event2 MOCUTE-039_A32-B6FA Consumer Control b8:27:...
/dev/input/event1 MOCUTE-039_A32-B6FA Keyboard b8:27:...
/dev/input/event0 MOCUTE-039_A32-B6FA Mouse b8:27:...
device /dev/input/event2, name "MOCUTE-039_A32-B6FA Consumer Control", phys "b8:27:..."
key event at 1595599952.585498, 139 (KEY_MENU), down
key event at 1595599952.792990, 139 (KEY_MENU), up
key event at 1595599971.126813, 158 (KEY_BACK), down
key event at 1595599971.284303, 158 (KEY_BACK), up
```
どのイベントがどのファイルに記録されるかわかるようになっています。キーイベントも取得できました。

## キーごとに実行したいスクリプトを割り当てる

キー番号さえわかればあとはどうとでもなるため、実行したいスクリプトを割り当てます。今回は`KEY_MENU`のボタンがupしたときにシェルスクリプトが実行されるようにしました。
`/home/pi/date.sh`はdateをechoしているだけです。

```python
#!/usr/bin/python3

import evdev
import os

device = evdev.InputDevice('/dev/input/event2')
print(device)
for event in device.read_loop():
    if event.type == evdev.ecodes.EV_KEY:
        if event.code == 139 and event.value == 1:
             os.system('/home/pi/date.sh >> result.txt')
```

```
## 実行結果
$ cat result.txt
Fri 24 Jul 22:05:49 JST 2020
Fri 24 Jul 22:05:50 JST 2020
```

## 感想
Python-evdev便利でいいですね。Amazon Dash Buttonと違ってボタンが複数あるので、ボタンさえ覚えておけば複数処理ができて楽しそうです。
Jupyter Notebook で Table of Contents(目次)アドオンを導入する方法

Python初心者です。

Jupyter Notebookに目次機能があることを知ったものの、導入につかえてしまったので、メモとして導入方法を記します。


# 本稿を読んでできるようになること
- Table of Contentsという、Jupyter Notebookにおける非常に有用なアドオンを使用できるようになる
    - 直訳すると「目次」。マークダウンのhタグに応じた見出しを自動生成してくれる機能。




# 利用開始手順

## 1.インストール

Jupyter Notebook上でターミナルを起動し、以下を実行する[^nbextensions] [^nbextensions-configurator]。



```
# a. Table of Contents等をおさめたアドオン群をインストールする
pip install jupyter_contrib_nbextensions

# b. aを設定画面で表示させるためのCSSファイル・jsファイルをインストールする
jupyter contrib nbextension install --user


# c. Jupyter Notebookのアドオン管理用のライブラリをインストールする
pip install jupyter_nbextensions_configurator

# d.cを有効化する
jupyter nbextensions_configurator enable --user


```
## 設定&使用

- Jupyter Notebookを終了し、再起動。画面上部から「Nbextensions」が選択できるようになっているのでクリックし、「Table of Contents(2)」の脇にチェックをつける。
- 画面下部にTable of Contents(2)の設定画面が表示されるので自由に設定する。
    - 「Automatically number notebook's sections」にチェックをつけておくと、マークダウンのhタグに自動的に数字を付けてくれます。おすすめです。
- Notebookをつくり、画面上部の三本線アイコンをクリックすることで目次を表示可能となる。


# まとめ
- Jupyter Notebookでアドオンを使用できるようになるまでをシンプルにまとめた記事が、日本語では書かれていないように感じたのでまとめてみました。(記事自体はあったのですが筆者環境でエラーが止まりませんでした...)
- Table of Contents以外にも多数のアドオンがあるようなので、機会があれば有用なアドオン群をまとめて列挙できればと思います


ご覧くださりありがとうございました。

(以上)



[^nbextensions]: Jupyter notebook extensions(https://github.com/ipython-contrib/jupyter_contrib_nbextensions)

[^nbextensions-configurator]:  Jupyter Nbextensions Configurator (https://github.com/Jupyter-contrib/jupyter_nbextensions_configurator)
Swiftで指定した桁数のランダムな文字列を生成

備忘録:book:
ユニークなIDを生成したいときなどに

```Swift
func generator(_ length: Int) -> String {
    let letters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"
    var randomString = ""
    for _ in 0 ..< length {
        randomString += String(letters.randomElement()!)
    }
    return randomString
}
```
Eclipseのタブ切り替えのショートカット

#目的
矢印のところをサクサクっと切り替えたいんや...
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/0220b422-c9a0-17c1-0120-04ddbfe772d9.png)


#やり方
Eclipseのタブ切り替えのショートカットはデフォルトで「Ctrl+F6」に設定されています。
しかし、このショートカットキーはブラウザなどの一般的なタブ切り替えのショートカットキーの「Ctrl + Tab」と異なるため非常に使いにくいです。
なので、使いやすいように変更します。

Eclipseの「ウィンドウ-設定」を開きます
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/2ed7f8ac-a35b-0099-adc4-f41a78f123e3.png)

「一般-キー」を選択します。
右の画面の検索で「次のエディタ」と入力し、「コマンドのコピー」ボタンを押下します。
「バンディング」で「Ctrl + Tab」を押下して「適用して閉じる」を押下すれば完了です。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538462/18b22846-c79f-cdc3-604e-b5540c8c4d3e.png)


#エピローグ
これでタブ切り替えがサクサクできるようになりました。
Javascript find()関数とfindIndex()関数の使い方　（走り書き）

#findとfindIndexの使い方

参考記事
https://ginpen.com/2018/12/04/array-find/

##find（配列内の指定した数値や文字を取得）
```javascript

const a = 'blue'
const ary = ['red', 'green','blues', 'blue', 'yellow', 'white','blue-bird']

// aと同じ要素があれば、抜き出します。
const result = ary.find(item => item === a)
console.log(result)
// result = 'blue'
```

##findIndex(配列のインデックス（何番目か）を取得）

```javascript

const ar = ['red', 'green','blues', 'blue', 'yellow', 'white','blue-bird']
const index = ar.findIndex(item =>item === 'red')//配列の0番から始まって何番目にあるかを抽出。見つからないと−1を返す
console.log(index)//結果：0(red以外を検索していたら、green:1, blues:2, blue:3 ,,,)

```
Xcode11でerror: invalid object 100644 が出たとき

#状況
いつも通りcommitしようとしたらこのようなエラーが出た
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/24d1fc23-7136-b313-97cb-e92652fbc9d5.png)

#やったこと
###①ググった
「error: invalid object 100644」でググったところ、この記事がヒットした
https://stackoverflow.com/questions/33053917/xcode-7-created-new-branch-commit-fails

質問者の方はいろんなサイトにこの質問を投げかけたけど有効な回答は得られたなったみたい
だけど、ローカルのXcodeプロジェクトを削除した後に最新のリポジトリを複製して、変更点だけをまた書き換えたらいけたらしい

###②やってみる
プロジェクトが消滅するのを予防するために圧縮しておきます
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3534303137382f32353738653133662d386664622d666633332d663239382d3634666136613366353336302e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/540178/6ff74839-9b44-9a80-79d1-da8c272d0161.png)

複製しました

いろいろ変更しました

で、全て置き換えました

###③いけた
いけました


##最後に
最後の方めっちゃ雑になっちゃってすいません
出すかどうか迷ったんですけど、記事が圧倒的に少なかったので一応あげておきます
参考になったら幸いです

##環境
Xcode11.6（11E708）
Python でクラス作成してダックタイピングしてみた

#人間クラスと継承、車のクラスで判定

ダックテストというものがあるらしい。Wikipedia様の情報によりますと
"If it walks like a duck and quacks like a duck, it must be a duck"
「もしもそれがアヒルのように歩き、アヒルのように鳴くのなら、それはアヒルに違いない」
という考え方のようです。ここから来たのがダックタイピング。

ダックタイピングは例えばRubyだとこんな感じとなります。
##Ruby でのダックタイピング

```Ruby:sampleRuby.rb
# テスト
def test(foo)
   puts foo.sound
end
 
# アヒルの鳴き声
 class Duck
   def sound
     'quack'
   end
 end
 # 猫の鳴き声
 class Cat
   def sound
     'myaa'
   end
 end
 # 実行
 test(Duck.new)
 test(Cat.new)
```
出力は

```Ruby:
# 出力結果
quack
myaa
```
要するに、クラスが別であっても同じ名前のメソッドを使用することができ、異なるオブジェクトで同じ操作を切り替えて使うことができるというもののようです。

例えば、人間クラスを若者と大人が継承して、それを車クラスで判定して、ドライバーの資格があるかどうか判定をするとします。
例えば以下のようなサンプルコードはどうでしょう。Pythonです。
##Python でのダックタイピング

```Python:samplePython.py
#
# 人間のクラス
#  2020.07.24 ProOJI
#
class Person(object):
	"""年齢メソッド"""
	def __init__(self, age=1):
		self.age = age
	"""ドライバー資格メソッド"""
	def drive(self):
		if self.age >= 18:
			print('You can drive!')
			print("Because You're {} years old.".format(self.age))
		else:
			raise Exception('Sorry...you cannot drive.')
# 若者のクラス
class Young(Person):
	def __init__(self, age=12):
		if age < 18:
			super().__init__(age)
		else:
			raise ValueError
# 大人のクラス
class Adult(Person):
	def __init__(self, age=18):
		if age >= 18:
			super().__init__(age)
		else:
			raise ValueError
#
# 自動車クラス
#  ドライバー資格の判定
class Car(object):
	def __init__(self, model=None):
		self.model = model
	def ride(self, person):
		person.drive()

# 若者_インスタンスの生成（１３歳）
young = Young(13)
# 大人_インスタンスの生成（４６歳）
adult = Adult(46)
```
```Python:
# 自動車_インスタンスの生成_１
car = Car()
# 若者の判定　１３歳
car.ride(young)
# 出力結果
# Exception: Sorry...you cannot drive.
```
```Python:
# 自動車_インスタンスの生成_２
car = Car()
# 若者の判定　４６歳
car.ride(adult)
# 出力結果
# You can drive!
# Because You're 46 years old.
```
#まとめ
プログラミングにはポリモーフィズムという概念があり、日本語では多態性・多様性など言われます。これはオブジェクト指向の概念の一つです。
クラスの型が別であっても同じ名前のメソッドがあればそれを使用することができ、異なるオブジェクトで同じ操作を切り替えて使うことができます。
このようなコードをダックタイピング（duck typing）と言うことがわかりました。
documentオブジェクトによるHTMLを取得するメソッド

今回はjsのdocumentオブジェクトのDOMを取得するメソッドを学んだので３種類まとめたいと思います。

1. document.getElementByIdメソッド；
2. document.getElementsByClassNameメソッド;
3. document.querySelectorメソッド;

##document.getElementByIdメソッドとは

引数にidを指定することでdomから特定のHTML要素を取得するメソッド一つです。

```javascript

document.getElementById("id名");
```

上記のように書くことでマッチするidを持つHTMLの要素を取得します。


##document.getElementsByClassNameメソッドとは

引数にclass名を指定することで同じclassの要素を取得できるメソッドです。

```javascript

document.getElementsByClassName("クラス名");
```

ここで一つ気をつけなければいけないのがgetElementByIdと違いclassは複数存在する可能性があるので**getelements**と複数系にしなければなりません。

##document.querySelectorAllメソッドとは

引数にselectorを指定することで指定した要素を全て取得するメソッドです。

```javascript

document.querySelector("セレクタ名");
```
一方、**querySelector**というメソッドを用いれば、HTML上から引数で指定したセレクタに合致する要素のうち一番最初に見つかった要素1つを取得することもできます。


セレクターでクラス取得するのもgetElementsByClassNameでクラス取得するのも同じじゃねえか！！と思ったんですがquerySelectorALLは**NodeList**というオブジェクトが返り値となってgetElementsByClassNameは**HTMLCollection**が返り値となっている点が違うようです。

HTMLCollectionオブジェクトだと配列になっておらずforeachメソッドを使えないとか。。。

Nodelistオブジェクトは配列になっているためfor eachメソッドも使えるようですね。

オブジェクトを配列の形にできるメソッドもありますがまたまとめます。
Docker Desktop をWSL2で利用する。

# Docker Desktop をWSL2で使う


## インストール
[こちら](https://www.docker.com/products/docker-desktop)からダウンロードしてきます。

ダウンロードしたファイルを実行すると、以下のような画面が表示されるので、そのままOKを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132118/8bf12e50-ba10-c044-ce08-f7968ccf4c06.png)

こんな感じの画面でインストールが行われる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132118/1867e99e-8e54-d1a8-8a10-642341b1902a.png)

インストールが終わると、こんな画面が表示される。「Close and restart」を押下すると再起動されてインストールが完了する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132118/ab185299-a258-a3ae-b3ff-f461417ab9fb.png)

再起動が終わるとこんな画面が表示されるので「start」を選択する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132118/00f16110-dc9e-a8f2-6bd3-e3bea3cce6f8.png)

チュートリアルが始まるので適当にスキップします。

## WSL2のUbuntuでDockerを使えるようにする

設定画面を表示して、以下の通り、WSL2のUbuntuでDockerを利用できるようにする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132118/f63bb20b-7bab-0a30-8efc-6ef3daaeb741.png)

# Ubuntu側で確認する
wsl2のターミナルを起動して、「docker」コマンドを実行

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132118/87d88dba-97cf-170f-61c2-31c30b1030b0.png)

無事認識されました。
【AWS-SAA】選択肢でたまに出題されるAWSサービス

#はじめに
教材ではあまり触れられないが、問題集などの選択肢でたまに出題されるサービスについて備忘録を兼ねて、AWSのサイトの内容を中心に簡単にまとめていきたい。(たまに出題されると思ったのは私の主観での判断なので、その点ご了承ください。)

#サービス一覧
<h2>API Gateway</h2>
簡単にAPIの作成、公開、保守、モニタリング、保護を行えるフルマネーフド型サービス。トラフィック管理、CORS サポート、認可とアクセスコントロール、スロットリング、モニタリング、API バージョン管理など、最大数十万規模の同時 API コールの受け入れと処理に伴うすべてのタスクを取り扱う。
<h2>Athena</h2>
Amazon S3 内のデータを標準SQLを使用して簡単に分析するサービス。即時にデータのクエリを実行し、数秒で結果取得。料金は実行したクエリに対してのみ。
<h2>Cognito</h2>
ウェブアプリケーションおよびモバイルアプリに簡単にユーザーのサインアップ/サインインおよびアクセスコントロールの機能を追加できる。Facebook、Google、AmazonなどのソーシャルIDプロバイダー、およびSAML2.0によるエンタープライズIDプロバイダーを使用したサインインが可能。
<h2>Shield</h2>
マネージド型の分散サービス妨害 (DDoS) に対する保護サービス。AWS で実行しているアプリケーションを保護する。
<h2>AWS SDK</h2>
AWSサービスをプログラムから操作できるサービス。各サービスで提供されているAPIをwrapしたもの。
※SDKとは、あるシステムに対応したソフトウェアを開発するために必要なプログラムや文書などをひとまとめにしたパッケージのこと。

#参考
[API Gateway]
(https://aws.amazon.com/jp/api-gateway/)
[Athena]
(https://aws.amazon.com/jp/athena/?whats-new-cards.sort-by=item.additionalFields.postDateTime&whats-new-cards.sort-order=desc)
[Cognito](https://aws.amazon.com/jp/cognito/)
[Shield](https://aws.amazon.com/jp/shield/)
[AWS SDK](https://qiita.com/garakutayama/items/0768bc6135ec0683df67)
[SDK](http://e-words.jp/w/SDK.html)
git tagをすべて削除する

以下を実行するとローカル・リモートすべてのタグを削除する

```bash
#Delete local tags.
git tag -d $(git tag -l)
#Fetch remote tags.
git fetch
#Delete remote tags.
git push origin --delete $(git tag -l) # Pushing once should be faster than multiple times
#Delete local tags.
git tag -d $(git tag -l)
```
Source: https://gist.github.com/okunishinishi/9424779
[laravel] UserモデルをModelsディレクトリに移動

laravel 7.19.1でのやり方です

参考にした記事
[【Laravel】モデルのディレクトリ構成変更についてのメモ](https://qiita.com/vrvr/items/4755e758f5d4b2e07579)

参考にさせていただいた内容とほぼ同じですが、バージョンから変更ファイルに多少違いがありましたのでメモ程度ですが紹介します

# 準備

### 1.認証を追加
*リファレンスから

```
$ composer require laravel/ui

$ php artisan ui vue --auth
```

### 2.ディレクトリを作成

```
$ mkdir Models
```

### 3.User.phpを移動

```
$ mv User.php Models
```

# ファイルの修正

```User.php
namespace App;
↓変更
namespace App\Models;
```

```RegisterController.php
use App\User;
↓変更
use App\Models\User;
```

```auth.php
     'providers' => [
         'users' => [
             'driver' => 'eloquent',
             'model' => App\User::class,
　　　　　　　　↓変更
             'model' => App\Models\User::class,
         ],

```

```UserFactory.php
use App\User;
↓変更
use App\Models\User;
```

でいけると思います！