OmniAICreator/Qiita-1.07M huggingface dataset:
【Swift】「検索履歴」を実装する方法

しゅんやと申します。

シンプルなタイトルですが、意外と投稿してる人少ないんじゃね？と思って投稿してみることにしました(多分ぼくの検索力が弱いだけ)

ではまあ、軽くやっていきしょう！

<h1>
①ではまず、これを準備しましょう
</h1>

![Qiita1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1106647/0b486aae-1732-fb26-9d20-673bb285b910.jpeg)


↑これです

そう、「SearchBar」です。

<h1>
②Viewの設定</h1>
んでまあ、その下にでも良いので「TableView」を設置してください。

それから、検索履歴を表示するためのUILabelもセル上に設置してください。(タグもつけておいてください)
![Qiita投稿画像2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1106647/588d44a2-1739-0c4e-ebe7-a65ce8e65e06.png)
↑こんな感じ
<h1>
③では、コードへGo!</h1>

ではコードに移りましょう

まずこれらを書いてください(子クラス名はSearchViewControllerにしてます)⏬

![Qiita投稿画像3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1106647/1c4c0106-85dd-5d43-e93d-017291930639.png)

SearchBarとTableViewはStoryBoardで繋いでます。
また、前者のデリゲート(delegate)と後者のデータソース(dataSource)も忘れずに記述してください。

検索履歴達がどんどん入ってくる配列も宣言しておきましょう。

次に、SearchBarについての設定をしていきます。⏬

![Qiita投稿画像4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1106647/94534a36-4809-7431-2e54-da7fa6a8c074.png)
(わかりやすいようにextensionに書いてます)※extensionは「拡張」という意味です。

まあやってることは単純で、検索されたら反映して、キャンセルされたら戻るという感じです。

注目して欲しい事といえば、①検索された文を、グローバル変数として宣言したString型の配列にappend(追加)しているところ、②検索が行われた時にもTableViewをリロードしているところです。(ViewWillAppearでもリロードしている)

そして最後に、TableViewの設定です。⏬
![Qiita投稿画像5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1106647/96415b5c-cbfa-84e8-d7e9-40e123b58479.png)

セルの数は、「検索履歴の数」です。
あと、コードにも書いてますが、セルにIDを登録するのを忘れないでください。（タグも忘れずに）

セルの高さは自由に設定してください。

はい、ということでお疲れ様でした。一応これだけで実装できます。


あ、「セルを消したい！」という人は、この二つのメソッドも追加してください⏬
![Qiita投稿画像6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1106647/401b7c31-fac3-e968-8de3-9181eff921ee.png)

<h1>④最後に</h1>
ここまで見ていただきありがとうございます。

Swift独学歴1年にも満たない駆け出し小鹿プログラマー(?)なので、こんな簡単な方法でしか実装できないですが、どうか温かい目でみてください🥺

この記事を見て気づいた人も多いと思いますが、やり方がまだ全然分かってないが故に、画像の文章をコピー出来ないようになってます、、、。本当にすみませんでした、、、。やり方が分かり次第変更します、、、🙏

あ、「UserDefaultsとかFirebaseに保存する方法とかも知りたい！」という方がもしいれば、またその方法を追記していきたいと思います！！

では！
Blender 2.93でpythonのパッケージを追加する方法

# Blender備忘録
忘れやすい自分が、同じことを何度も延々調べなおすのを少しでも避けるために書いたメモです。
誤りがあればコメントください。

## Blender 2.93でpythonのパッケージを追加する
###前提
* 正しいやり方かどうかはわかりませんが、とりあえずpandasをインストールして、Blenderのpythonコンソールから「import pandas as pd」ができるようになっています。
* Windows 10で実施した内容であり、Mac OSに関しては調べていません。
* Blenderのpythonが下記ディレクトリにインストールされているものとします。（デフォルトです）

```
C:\Program Files\Blender Foundation\Blender 2.93\2.93\python\bin\python.exe
```

### 手順
- コマンドプロンプトを**管理者**で起動
- pythonのあるフォルダへ移動

```
cd "C:\Program Files\Blender Foundation\Blender 2.93\2.93\python\bin"
```

- 以下のコマンドでパッケージをインストール

```
.\python -m pip install パッケージ名 -t "C:\Program Files\Blender Foundation\Blender 2.93\2.93\python\lib\site-packages"
```

- Blenderを起動し、pythonコンソールでimportできるか確認


### 注意

- インストールの仕方については[リンク先](https://blenderartists.org/t/how-do-i-install-scipy-for-blender-2-93-on-windows-10/1309641/5)にて議論されていたのを参考にしました。
- このリンク先では「--no-deps」を指定するように議論がされています。私はBlenderに不具合が出て原因の特定に手間取るのが嫌だったので、あえて指定しませんでした。
- インポートしただけで、正常動作するかは確認していません。pandasをインストールしたところnumpyに関するWARNINGが出ました。「Specify --upgrade to force replacement」とのことでしたが、Blenderの方に不具合が出ては元も子もないので、force replatementはしませんでした。

### 祈り
私の実力でも、「Blender x データ分析」でカッコいい可視化ができますように。
simple BPE 


```python
import re, collections

def get_stats(vocab):
  pairs = collections.defaultdict(int) 
  for word, freq in vocab.items():
    symbols = word.split()
    for i in range(len(symbols)-1):
      pairs[symbols[i],symbols[i+1]] += freq 
  
  return pairs
  
def merge_vocab(pair, v_in):
  v_out = {}
  bigram = re.escape(' '.join(pair))
  p = re.compile(r'(?<!\S)' + bigram + r'(?!\S)') 
  for word in v_in:
    w_out = p.sub(''.join(pair), word)
    v_out[w_out] = v_in[word] 
  return v_out
```


```python

vocab = {'l o w </w>' : 5, 'l o w e r </w>' : 2, 'n e w e s t </w>':6,'w i d e s t </w>':3}
num_merges = 10
for i in range(num_merges):
  print(i)
  pairs = get_stats(vocab)
  best = max(pairs, key=pairs.get) 
  vocab = merge_vocab(best, vocab) 
  print(best)

print(vocab)
```


https://aclanthology.org/P16-1162.pdf
PHPのアクセス修飾子についてのまとめ

#アクセス修飾子の種類と特徴
以下の図はそれぞれのアクセス修飾子を用いた場合、
自クラス・継承クラス（子クラス）・他クラスからアクセスできるかどうかを表したものである。
![スクリーンショット 2021-07-03 19.41.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/916260/c30deaef-0fe8-2f7e-147b-5b8db6ac31fe.png)


#実際にコードを書いてみて検証する
##自クラスからアクセス場合
```php
<?php

class MyClass {
    public $test_01 = "パブリック"; 
    protected $test_02 = "プロテクト"; 
    private $test_03 = "プライベート";
    
    public function echoPublic() {
        echo $this->test_01;
    }
    public function echoProtected() {
        echo $this->test_02;
    }
    public function echoPrivate() {
        echo $this->test_03;
    }
}

$test = new MyClass;

$test->echoPublic();
echo "<br>";
$test->echoProtected();
echo "<br>";
$test->echoPrivate();

```
実行結果

```
パブリック
プロテクト
プライベート
```
→public,protected,privateすべてからアクセスできていることが確認できた

##継承クラスからアクセスする場合
```php
<?php

class MyClass {
    public $test_01 = "パブリック"; 
    protected $test_02 = "プロテクト"; 
    private $test_03 = "プライベート";
    
    public function echoPublic() {
        echo $this->test_01;
    }
    public function echoProtected() {
        echo $this->test_02;
    }
    public function echoPrivate() {
        echo $this->test_03;
    }
}

//継承クラス
class Children extends MyClass {

    public function echoPublic() {
        echo $this->test_01;
    }
    public function echoProtected() {
        echo $this->test_02;
    }
    public function echoPrivate() {
        echo $this->test_03;
    }
}

$test = new Children;

$test->echoPublic();
echo "<br>";
$test->echoProtected();
echo "<br>";
$test->echoPrivate();

```

実行結果

```
パブリック
プロテクト

Notice: Undefined property: Children::$test_03 in /Applications/MAMP/htdocs/practice/access.php on line 28
```

→public,protectedからアクセスできていることが確認でき、privateからはアクセスできずエラーになっていることがわかる

##他クラスからアクセスする場合

```php
<?php

class MyClass {
    public $test_01 = "パブリック"; 
    protected $test_02 = "プロテクト"; 
    private $test_03 = "プライベート";
    
    public function echoPublic() {
        echo $this->test_01;
    }
    public function echoProtected() {
        echo $this->test_02;
    }
    public function echoPrivate() {
        echo $this->test_03;
    }
}

class Other {

    //MyClass内の変数を使えるように、インスタンス化する
    function __construct()
    {
        $this->my_class = new MyClass;
    }
    public function echoPublic() {
        echo $this->my_class->test_01;
    }
    public function echoProtected() {
        echo $this->my_class->test_02;
    }
    public function echoPrivate() {
        echo $this->my_class->test_03;
    }
}

$test = new Other;

$test->echoPublic();
echo "<br>";
$test->echoProtected();
echo "<br>";
$test->echoPrivate();

```
実行結果

```
パブリック

Fatal error: Uncaught Error: Cannot access protected property MyClass::$test_02 in /Applications/MAMP/htdocs/practice/access.php:29 Stack trace: #0
 /Applications/MAMP/htdocs/practice/access.php(40): Other->echoProtected() #1 {main} thrown in /Applications/MAMP/htdocs/laravel_Udemy/access.php on line 29

```
→publicからアクセスできていることが確認でき、protected,privateからはアクセスできずエラーになっていることがわかる
Databricksのテーブルアクセスコントロール

[Table access control \| Databricks on AWS](https://docs.databricks.com/security/access-control/table-acls/index.html) [2021/5/4時点]の翻訳です。

テーブルアクセスコントロールを用いることで、プログラムによってPython、SQLからデータへのアクセスを許可、無効化することができます。

デフォルトでは、クラスターでテーブルアクセスコントロールが有効化されない限り、全てのユーザーはクラスターが管理するテーブルに格納された全てのデータにアクセスできます。テーブルアクセスコントロールが有効化されると、クラスターにおけるデータへのアクセス権を設定することができます。

# 要件

アクセスコントロールを使用するには[Premium plan](https://databricks.com/product/aws-pricing)が必要となります。

本書では以下をカバーしています。

- [Databricksクラスターにおけるテーブルアクセスコントロールの有効化 \- Qiita](https://qiita.com/taka_yayoi/items/a30b474cd07e2ef8a7eb)
- [Databricksにおけるデータオブジェクトのアクセス権管理 \- Qiita](https://qiita.com/taka_yayoi/items/225c4db5dffa51cbbbae)


### Databricks 無料トライアル

[Databricks 無料トライアル](https://databricks.com/jp/try-databricks)
JavaScript select要素で選択された値を取得する

# サンプルhtml

```html
<body>
  <select id="select">
    <option>選択してください</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <div id="selectValue" style="display: inline;"></div>
  <script src="main.js"></script>
</body>
```

# 方法1

イベントオブジェクトを使用して選択された値を取得します。

```main.js
const select = document.getElementById('select');
select.addEventListener('change', (e) => {
  const selectValue = document.getElementById('selectValue');
  selectValue.innerHTML = e.target.value;
});
```

# 方法2

選択されているドロップダウンのテキストを取得します。

```main.js
const select = document.getElementById('select');
select.addEventListener('change', () => {
  const selectValue = document.getElementById('selectValue');
  selectValue.innerHTML = select.value;
});
```

# 方法3

リストと選択されているドロップダウンのインデックスを使用して値を取得します。

```main.js
const select = document.getElementById('select');
select.addEventListener('change', () => {
  const selectValue = document.getElementById('selectValue');
  selectValue.innerHTML = select.options[select.selectedIndex].innerHTML;
});

```

# 動作検証

![2021-07-03_19h42_15.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/621414/7c0d413e-998a-7b5d-048b-5735f42fe8c7.gif)


# 参考記事

https://developer.mozilla.org/ja/docs/Web/HTML/Element/select

https://developer.mozilla.org/ja/docs/Web/HTML/Element/select

https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript
Linux: ECHOコマンドは"2つ"ある

バッチ作成時に遭遇した事象についてメモ。

###### 実施環境：

```Linux:Linux
[testuser@testhost ~]$ uname -a
Linux testhost 4.18.0-147.8.1.el8_1.x86_64 #1 SMP Thu Apr 9 13:49:54 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux
[testuser@testhost ~]$ echo $SHELL
/bin/bash
```

###### バッチ作成時に遭遇した現象

bashのlsコマンドでは、ワイルドカードでファイルを指定した時にヒットするファイルが多すぎると、エラーを起こすことがあります。

```Linux:Linux
[testuser@testhost ~]$ ls *
bash: /usr/bin/ls: Argument list too long
```

ファイルが大量にある場合に対応できる方法はないかと思い調べると、echoコマンドを使うとよいという話を見ました。

```Linux:Linux
[testuser@testhost ~]$ echo *
test0.log test10000.log test10001.log ...
```

さてこれを使用しようと考えバッチを作成するも、試験するとなぜか「Argument list too long」が...

###### 原因

原因は、スクリプト内でechoコマンドを「フルパスで」指定していることでした。

```Linux:Linux
[testuser@testhost ~]$ which echo
/usr/bin/echo
[testuser@testhost ~]$ /usr/bin/echo *
bash: /usr/bin/echo: Argument list too long
```

このように、echoコマンドをフルパスで指定すると、フルパスで指定しない場合と異なる動作をします。
原因をいろいろ調べたのですが、結論から言うとechoコマンドは「2つ」あるようです。

```Linux:Linux
[testuser@testhost ~]$ PATH=
[testuser@testhost ~]$ echo $PATH

[testuser@testhost ~]$ ls *
bash: ls: No such file or directory
```

上の操作では、変数「PATH」の値を空にして、コマンドのパスを辿れなくしています。
そのため、lsコマンドは見つからず、「そんなコマンドはない」とエラーを出しています。
にも関わらず、echoコマンドは通常通り動作しています。
もしこのechoコマンドが「/usr/bin/echo」なら、echoコマンドも見つからないはずです。

実はこのechoコマンドは、exitやlet等と同じ、「bashの組み込みコマンド」です。
bashの内部に存在するコマンドのため、パスが辿れなくても使用できます。
また、/usr/bin/echoのように引数が多すぎてエラーを起こすことも以下の通りありません。

```Linux:Linux
[testuser@testhost ~]$ echo `echo *`
test0.log test10000.log test10001.log ...
```

以上、echoコマンドにまつわるちょっとした話でした。
【Windows】ローカル開発環境からパーミッション755でgit commitする

## 概要
Windows上でgit bashを使って開発している人向け。
パーミッション周りの面倒ごとをコマンド一つで解消したという内容です。

## 直面した問題
業務効率化のためにシェルスクリプトをゴリゴリ書いて、ローカル環境で問題無く動作したのでそのままcommit。しかし、いざ実環境(Linux環境)にデプロイして実行するとコケる、ということがそこそこありました。

なんでやと思ってデプロイしたスクリプトを確認すると、スクリプトのパーミッションが644となっており実行権限が無い状態となっていました。なので、権限が無いのに実行しようとしてたから怒られたというワケです。
Windowsでは`chmod`を使ったとしても、`git add`の時点でパーミッションが644になってしまうようで、そのままcommitしちゃうと先の事象が発生しちゃうというカラクリです。Windowsをメインで使ってると、この辺あまり意識しないで開発進めてしまうので気を付けねば…。

## やったこと
以下のコマンドを実行し、`git add-755`という新たなコマンドを作成しました。

```
git config --global alias.add-755 '!git add $@ && git update-index --add --chmod=+x $@'
```

### このコマンドは何をしているの？
gitにはエイリアス[^1]という機能があり、任意のコマンドを別名で実行できるよう設定することができます。このエイリアスを用いて、パーミッション755の状態で対象ファイルをインデックス領域（`git add`によって、commit対象となるファイルが保存される領域）に保存するコマンドを作成しました[^2]。

### 作成したコマンドの使い方
コマンドに続けて、インデックス領域に上げたいファイルを指定します。

```
git add-755 hoge.sh

// 複数指定も可
git add-755 hoge.sh fuga.sh piyo.xml
```

インデックス領域でパーミッションを確認するコマンドは`git ls-files -s ファイル名`です。`git add`と`git add-755`で対象ファイルのパーミッションが異なっていることを確認できると思います。

```
// デプロイするファイルの作成
$ vi test01.sh

// いつも通りgit addを実行する
$ git add test01.sh

// パーミッションを確認すると、644の状態でインデックス領域に保存されている
$ git ls-files -s test01.sh
100644 e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 0       test01.sh

// 一度unstageしたのち、作成したadd-755を実行
$ git add-755 test01.sh

// 再びパーミッションを確認すると、想定通り755の状態でインデックス領域に保存されている
$ git ls-files -s test01.sh
100755 e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 0       test01.sh
```

## おわりに
パーミッションを755に変更する方法はググれば色々出てくるのですが、一発で変更できない上にコマンドが覚えにくいので、何度も調べたりして手間がかかっていました。エイリアスめちゃくちゃ便利なのでどんどん使っていきたいですね。

[^1]: [Git の基本 - Git エイリアス](https://git-scm.com/book/ja/v2/Git-%E3%81%AE%E5%9F%BA%E6%9C%AC-Git-%E3%82%A8%E3%82%A4%E3%83%AA%E3%82%A2%E3%82%B9#r_git_aliases)
[^2]: エイリアスに設定した元のコマンドについては、https://git-scm.com/docs/git-update-index や [Windowsローカル開発環境からgit commitする時にはパーミッションに気を付けること](https://qiita.com/kakiuchis/items/ae33adb0bbd98d258432) を参考にしました。
「模写」とかの著作権についてちょっと調べてみた

### きっかけ
個人的な学習としてShopifyストアをNext.jsで構築してみたくなり、どうせなら既存のデフォルトテーマ(Debut)を再現したかったことがきっかけです。
最初から「デザインを再現したものって、著作権の都合上どの程度記事として公開して良いんだろうか」と気になっていましたが、とりあえず見切り発車してしまい笑
「まあ大丈夫だよな」「万が一怒られたら取り下げればいいか」なんて思いながら、「そろそろ記事を作成したいなぁ」という段になり、やっぱり気になったので、ちょっと調べてみました。

### 個人的な結論
- まず大事なのは、創作物の著作権が存在するのか、誰に存在するのか、という認識
- 模写自体は、創作的な表現と言えないため、著作物と言えず、著作権法では保護されない。
- 「私的な使用」であれば全く問題ない(著作権法で許されている)
- 記事として「公開」するなどの公共的な利用に関しては、オリジナルの作品の著作権を有する著作者の考え方次第。
- 一般的には、「商用は基本だめ」「公序良俗に反しない範囲であれば許可されることが多い」
- 気になったら著作権を有する著作者(企業や個人)が公表しているガイドラインやサポートに確認してみたらいい

※法律の専門家が下した解釈というわけではなく、あくまで「プログラミングの学習として"模写"して記事として公開してみたいなぁ」と思ったただの一般人の意見として参考にしてください。

### 聞いてみた
「著作権が自分にない」という時点で頭でっかちに「ああ、やっぱりだめなのかな😅」と思ってしまいましたが、[Shopifyの英語チャットサポート](https://help.shopify.com/ja/questions#/contact?english_requested=true)に聞いてみました。
![スクリーンショット 2021-07-03 15.43.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555201/14c31133-242b-570c-dabd-605830c948e5.png)


こちらのチャットサポートでは、添付画像に「最速でご返信します」とありますが、本当に、基本的には質問をリクエストしてから1分くらいで対応が始まります。
[公式](https://help.shopify.com/ja/manual/intro-to-shopify/pricing-plans/plan-features)で有料プランの基本的なサービスとして「24時間体制のライブチャット」という風に説明されていますが、Shopifyストアを持っていなくても(ストアを持っているかを選択する画面がある)普通に問い合わせることができ、ものすごく便利です。
そこで「Store Front APIの勉強として、Debutテーマを再現してみたんだけど、記事として公開してもいいですか？」と聞いてみたところ、「何が問題なの？」「みんなやってるし、それがコミュニティに貢献することなら大歓迎です」と好意的な返信をいただきました笑
(こちらのチャットサポートはチャット終了後にやりとりの内容を入力したメールアドレスに送ってくれますが、Gmailのアカウントの容量がいっぱいになっていて、こちらを受け取ることができませんでした泣)
「専門の部署に問い合わせます」とか日本企業的な対応を予想していたのですが、この辺は、出店者や開発者による優れたエコシステムを構築しているShopifyならではだなぁと感心させらました(そもそも考えすぎ？笑)

### 参考
[著作権法（昭和四十五年法律第四十八号）施行日： 令和三年一月一日（令和二年法律第四十八号による改正）](https://elaws.e-gov.go.jp/document?lawid=345AC0000000048)
[模写に著作権は適用されますか？されるとしたら人工知能で生成された画像の著作権は誰のものですか](https://jp.quora.com/%E6%A8%A1%E5%86%99%E3%81%AB%E8%91%97%E4%BD%9C%E6%A8%A9%E3%81%AF%E9%81%A9%E7%94%A8%E3%81%95%E3%82%8C%E3%81%BE%E3%81%99%E3%81%8B-%E3%81%95%E3%82%8C%E3%82%8B%E3%81%A8%E3%81%97%E3%81%9F%E3%82%89%E4%BA%BA%E5%B7%A5)
>１．模写と著作権について
①模写される対象の絵画等が著作物である場合、模写は著作物の複製となりますので、私的使用など著作権法上許される場合でなければ模写は許されません。保護期間が過ぎていれば大丈夫ですが。
②また、模写自体は、創作的な表現と言えないため、著作物と言えず、著作権法では保護されません。

[絵を模写すると、著作権侵害になるの！？SNS時代に知っておきたいイラスト著作権のこと](絵を模写すると、著作権侵害になるの！？SNS時代に知っておきたいイラスト著作権のこと)
[コードに著作権はある？オリンピック騒動から考える、IT開発のパクリ問題](https://paiza.hatenablog.com/entry/2015/09/29/%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AB%E8%91%97%E4%BD%9C%E6%A8%A9%E3%81%AF%E3%81%82%E3%82%8B%EF%BC%9F%E3%82%AA%E3%83%AA%E3%83%B3%E3%83%94%E3%83%83%E3%82%AF%E9%A8%92%E5%8B%95%E3%81%8B%E3%82%89%E8%80%83)
[[Shopify]サポートへの問い合わせ回答を最速で得る方法](https://ec-penguin.com/blogs/shopify/contacting-to-support)
インスタンス変数・ローカル変数って何？

変数の使い分けができてなかったので、備忘録として！
調べたら難しい書き方されててわかりにくかったので、噛み砕いて書いてます！
間違いなどございましたら、ぜひ教えてください！
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
・ローカル変数

変数名に英数字とか_が使える！
でも先頭の文字は数字にできない！
で、そもそもローカル（地元の〜）っていうくらいやから、使える範囲が限られてる！
アクション内でしか使えない！
viewファイルとかに変数の受け渡しはできません！不器用なんで！

じゃあアクション内で完結する場合は、インスタンス変数じゃなくてローカル変数つこてたらいいのかな？とおもってます。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
・インスタンス変数

変数名の最初に＠がついてるやつ！
クラスから生成されるインスタンスの範囲内で参照できる！
ローカルくんじゃできなかったviewファイルにも受け渡しできるよ〜！
ただ同じクラスから生成されたインスタンスでも、別のインスタンスの変数までは参照できないよ！

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
ややこしい、、、クラス定義式内で定義するクラスインスタンス変数っていのもある。
これはそもそも定義する場所が違うよね！っていう理解でいいんかな？

クラス変数っていう贅沢に＠＠を変数名の先頭につけるやつは、別のインスタンスでも同じクラスから生成されたものであれば、変数が共有できるよね！ぐらいの理解なんで、もっと勉強してきます！
OpenCV CLAHEヒストグラム平坦化


# はじめに

機械学習で人物検出などを実装する時のノウハウとして、以下のようなものがあるかと思います。

* できるだけ正面で
* __できるだけ均一に照らす__

2つ目の明るさについては、ヒストグラム平坦化という画像処理をすることによって改善することができるため、その手法を解説します。

なお、こちらの記事は以下のリンクをなぞっただけのものとなります。必要であれば参考にしてください。。

* ヒストグラム平坦化
    * http://labs.eecs.tottori-u.ac.jp/sd/Member/oyamada/OpenCV/html/py_tutorials/py_imgproc/py_histograms/py_histogram_equalization/py_histogram_equalization.html

# ヒストグラムとは

度数分布（連続する何かを区切ったものに対する個数のバラつき具合）を表現するときに使うグラフのことです。

画像のヒストグラムというと、画素値の分布を表したグラフのことです。


# ヒストグラム平坦化とは

ヒストグラム平坦化とは、下の画像のようにヒストグラムが明るい領域に集中している画素値を全範囲に分布させるための変換のことです。

<img width="600" alt="original" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308256/13d23915-74a4-237b-58be-90674e33954b.png">


# 適用的ヒストグラム平坦化（CLAHE）とは

適用的ヒストグラム平坦化とは、__小さい領域毎にヒストグラム平坦化を適用__していく処理のことです。
具体的には、OpenCVのデフォルトでは __8x8の領域毎にヒストグラム平坦化を適用__ します。

どういった時に適用的ヒストグラム平坦化（CLAHE）を適用するかというと・・・

ヒストグラムに偏りが発生していない画像にヒストグラム平坦化を適用すると、明るくなりすぎたり暗くなりすぎたりして逆効果になってしまう場合があります。


# やってみた


### 元画像

こちらの画像を元として、ヒストグラム平坦化と適用的ヒストグラム平坦化(CLAHE)を適用してみました。

<img width="300" alt="original" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308256/0ec7f463-4cde-9637-4b2f-8724308fa0cb.png">

### ヒストグラム平坦化

顔の部分が明るくなりすぎて、顔検出する時には精度が落ちてしまいます。
これは入力画像のヒストグラムが特定の範囲に偏っていないことが原因のようです。

<img width="300" alt="Histogram Equalization" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308256/05086ea3-3a99-cbae-aea7-691bffe1703c.png">

```python
import numpy as np
import cv2

img = cv2.imread('original.jpg',0)
equ = cv2.equalizeHist(img)
res = np.hstack((img,equ)) #stacking images side-by-side
cv2.imwrite('histogram.png',res)
```

### 適用的ヒストグラム平坦化（CLAHE）

上述したヒストグラム平坦化と比較すると、顔部分の明るさ具合がちょうどよく、顔検出する時にも精度が高くなります。


<img width="300" alt="CLAHE" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/308256/fa1461d0-0b52-39d7-6323-cce9c6d2886a.png">

```python
import numpy as np
import cv2

img = cv2.imread('original.png',0)

# create a CLAHE object (Arguments are optional).
clahe = cv2.createCLAHE(clipLimit=2.0, tileGridSize=(8,8))
cl1 = clahe.apply(img)

cv2.imwrite('clahe_histogram.jpg',cl1)
```


# まとめ

スペックの低いラズパイなどでビデオ映像などリアルタイムで処理したい場合、この処理を実装するとFPSが低くなってしまうというのが難点です。
しかし、時間帯によって明るさが変化する環境では非常に良いソリューションとなります。
使用する状況を加味して実装を検討してみてください。

誤り等があればコメントにてよろしくお願いします。


# 参考

* Histogram equalization
    * https://en.wikipedia.org/wiki/Histogram_equalization

---
### 会社紹介

**株式会社 Mosaica**  
最先端テクノロジーで社会課題を解決し、持続可能な未来を創造する IT カンパニー。
AI ソリューション、クラウド統合、DX 推進、経営コンサルティングなど包括的なサービスでビジネス変革を支援しています。  

詳しくは [公式サイト](https://mosaica.co.jp/) までお気軽にご相談ください。
公式サイト： https://mosaica.co.jp/
制御構文 ― J 言語入門

explicit definition [^1] では、他の言語と似た制御構文を使うことができます。

# control word

制御構文には、`if.` のように最後に `.` がついた単語 (word) を使います。これらの単語を **control word** と呼びます。control word を用いることができるのは、explicit definition の中だけです。他の場所に書くとエラーになります。

```j
   if.
|spelling error
|      if.
|      ^
```

したがって、制御構文は **explicit definition の外では使えません**。

# 構文

それぞれの制御構文の構造を以下に示します。`T` や `B` 等は、ブロック (文の並び) を表しています。ブロックは括弧のような記号ではなく control word で区切られます。

ほとんどが他の言語と似た構造になっているので、さっと目を通すだけでいいです。

## if - elseif - else

条件の後には `do.` を書きます。また、最後は `end.` で終わります。

```j
if. T do. B end.
if. T do. B else. B1 end.

if. T do. B
elseif. T1 do. B1
elseif. T2 do. B2
else. B3
end.
```

`T` の値が 0 のときが false、それ以外は true と見なされます。ただし、値が配列の場合変わった振る舞いをします。

- 空の配列は true
- そうでなければ最初のアトムだけを見る

## select - case - fcase

switch ではなく `select.` です。最初の `T` の後に `do.` が*無い*ことに注意してください。

```j
select. T
case. T1 do. B1
fcase. T2 do. B2
case. T3 do. B3
case. do. B4
end.
```

マッチした `case.` のブロックを実行した後は残りの `case.` は読み飛ばされます。次のブロックにフォールスルーさせるためには、`fcase.` を使います。(上の例では `T2` にマッチした場合 `B2` と `B3` が実行されます。)

`case. do.` は*全て*にマッチするので、デフォルトの処理を書くのに使います。

`-:` に似た方法で比較されるので、配列も普通に使えます。

## while / whilst

`whilst.` は `while.` と似ていますが、最初の `T` の評価をスキップします (do-while 相当)。

```j
while. T do. B end.
whilst. T do. B end.
```

## for / for_*ijk*

`for.` はリストの各要素について `B` を実行します (for each 相当)。要素を変数 `i` で受ける場合は `for_i.` とします。(このとき一緒に、変数 `i_index` に要素のインデックスが入ります。) 変数名は何でも構いません。

```j
for. T do. B end.
for_i. T do. B end.
```

## break / continue / return / throw

```j
break.
continue.
return.
throw.
```

`return.` の構文は**戻り値を伴いません**。返される値は**最後に実行した文の結果**です [^2]。

`throw.` は `uncaught throw.` エラーを発生させます。エラーの種類を指定することは*できません*。

## try - catch - catchd - catcht

```j
try. B
catch. B1
catchd. B2
catcht. B3
end.
```

`catch.` と `catchd.` は、何らかのエラーが発生すると実行されます。`catchd.` は、デバッグ時には無視されます [^3]。`catcht.` は `throw.` によるエラーの場合のみ実行されます。

`throw.` 同様にエラーの種類は指定できません。

## assert

`T` が false (0) の場合に `assertion failure` を発生させます。`if.` とは異なり、配列は全ての要素がチェックされます。

```j
assert. T
```

## goto_*lbl* / label_*lbl*

`goto` から対応する `label` にジャンプする機能です。ラベルの名前は `for_` と同じように書きますが、**変数とラベルは別物**なので名前の衝突を気にする必要はありません。

```j
goto_lbl.
label_lbl.
```

---

\[ 前 : [direct definition](https://qiita.com/unsigned-wrong-wrong-int/items/6214e76feb92d7c2e756) \] \[ [目次](https://qiita.com/unsigned-wrong-wrong-int/items/e15a87999cedfc6b9ced) \] \[ 次 \]

[^1]: 今後、特に断りの無い限り explicit definition は direct definition も暗に含むものとします。
[^2]: つまり `return.` は explicit definition の末尾に到達するのと同じ効果を持ちます。
[^3]: `catch.` するとエラーがリセットされてしまうので、エラーをデバッグしたいときに便利です。
深層学習の高速化

#1. 深層学習の軽量化・高速化技術

深層学習を実際に商用利用しようと思うと、軽量化、高速化をしないと利用できない。
深層学習は、毎年、10倍のいきおいで、モデルの大きさ、データの量が大きくなっている。
しかしこの速度は、HWの性能向上の勢いを追い越してしまっている。
そこで、軽量化、高速化、分散処理化が必要になっている。

+ データ並列化（複数PCで並列処理）
+ モデル並列化（複数コアで並列処理）
+ GPU高速化
+ 量子化
+ 蒸留
+ プルーニング

#2. データ並列化

データ並列には2種類のやり方がある。

+ 同期型
+ 非同期型

同期型は、各子モデルに勾配を計算させて、終わったら、親モデルがまとめて勾配平均をとってパラメータ更新をし、その結果をまた各子モデルに勾配を計算させる。親モデル、子モデルの垂直統合モデルで、完全同期で処理をするやり方である。割と精度が良い結果がでる。

非同期型は、パラメータサーバに、各子モデルが計算した学習済みモデルを保存する。そして、各子モデルが学習するさいには、パラメータサーバにある最新の学習済みモデルを使って学習をする。これを繰り返すやり方である。しかし、タイミングによって、最新学習モデルが次々更新されるとは限らないので、結果が不安定になりやすい。


#3.モデル並列化

大きなNNの場合、モデルをいくつかに分割して、それを各ワーカーで並列処理することが可能である。
そんなことが出来るのか？という気はする。モデルを途中で切ると、入力するデータは？
実際には、途中で枝分かれするようなモデルを並列化することが多い。

しかし、モデル並列をネットワーク上で分散すると、データ統合処理に結局時間がかかるので、1台のPC上での並列となることが多い。

#4. GPU高速化

CPUで処理させずに、GPUで計算させて高速化を図る。
NNの計算は行列演算だらけなので、GPU計算には合っている。

なお、GPU使うにはCUDAを使うことになるが、Tensorflowが勝手に使ってくれる。


#5. 量子化

処理の軽量化の手法の一つとして、量子化がある。
量子化とは、64bit浮動小数点の重みwの情報を、32bit浮動小数点に精度を落とすことで、メモリ使用量、演算負荷の削減を行うことをいう。
単純に情報を保存するメモリ領域が削減され、さらに、計算対象の桁数が減ることで、計算の高速化（計算量の削減）が可能になる。

なお、機械学習で利用するには、16bitで十分であるので、量子化は高速化には十分有効である。

#6. 蒸留

Knowledge Distillation、Hint Training。

処理の軽量化の手法の一つとして、蒸留がある。
蒸留とは、精度の高い複雑で大きなモデル（教師モデル）から、性能の近い軽量で小さいモデル（生徒モデル）を作ることをいう。

生徒モデルを学習するさいに、教師モデル（重み固定）も一緒に学習させて、教師モデルの誤差に合わせるように、生徒モデルの学習をさせる。

#7. プルーニング

モデルの軽量化の手法としてプルーニングがある。
大きなNNが出来たとき、いくつかのニューロンは、何も寄与していない場合がある。この時、この寄与していないニューロンを削減して、パラメータを減らし、モデルの圧縮を行うことを、プルーニングという。

具体的には、重みが0に近い（閾値以下の）ニューロンを削減してしまう。
さらに、一回消すと、出力になにも寄与しないニューロンが出てくるので、これも削減することが可能である。

これで半分以上削減が出来るらしい。
pythonをインストールした時に.profile と.zprofileが見つからないから作った

## 問題
Pythonをmacに入れました。
プロゲート が分かりやすかったです。
https://prog-8.com/docs/python-env

しかし、最後にバージョンが3.7.5になりませんでした。

```
pyenv global 3.7.5
python --version  
→Python 2.7.16
```
。。。？

##調べたら
https://timesaving.hatenablog.com/entry/2021/05/15/150000

```
pyenv init
```

をすると

```
# (The below instructions are intended for common
# shell setups. See the README for more guidance
# if they don't apply and/or don't work for you.)

# Add pyenv executable to PATH and
# enable shims by adding the following
# to ~/.profile and ~/.zprofile:

export PYENV_ROOT="$HOME/.pyenv"
export PATH="$PYENV_ROOT/bin:$PATH"
eval "$(pyenv init --path)"

# Load pyenv into the shell by adding
# the following to ~/.zshrc:

eval "$(pyenv init -)"

# Make sure to restart your entire logon session
# for changes to profile files to take effect.
```

とでますのでそれに従いましたが、
~/.profileと~/.zprofileが見つかりませんでした。

##解決
~の場所でファイルを作り

```
touch .profile
touch .zprofile
```

それを読み込ませる

```
source ~/.profile
source ~/.zprofile
```

すると、成功しました！

```
pyenv global 3.7.5
python --version  
→Python 3.7.5
```
以上です。
Power BIにPDFを取り込む3つの方法

## はじめに
 Power BIにPDFのデータを取り込む方法を大きく3つ紹介します。
尚、関連のMicrosoft Docsはこちらです。

[Power BI Desktop で PDF ファイルに接続する - Power BI | Microsoft Docs](https://docs.microsoft.com/ja-jp/power-bi/connect-data/desktop-connect-pdf)

Power QueryのMで、PDFのページ指定を行う方法も書いてありますね。

```M言語:PDFのページ指定を行う場合
Pdf.Tables(File.Contents("c:\sample.pdf"), [StartPage=10, EndPage=11])
```

### (1) PDFのテーブルを特定して取り込む

例として、[町田市における新型コロナウイルス感染症の状況（7月3日更新）/町田市ホームページ](https://www.city.machida.tokyo.jp/iryo/hokenjo/health_crisis_management/number_of_infected.html)の下部にある、「町田市内の全検査数」を取り込んでみます。
各ページに各月のテーブルがあり、比較的容易な取り込みです。
Power BI Desktopのデータを取得でPDFを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/d0477648-6681-f9e8-a3ef-b2910bf4e73c.png)
ナビゲータのプレビューでも見えているとおり、対象のテーブルを選択してPower Queryに進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/f011962a-3987-0802-614a-2c82180b402f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/54d923c6-cd35-1d34-8350-d20f5557e9ec.png)
適用したステップの最初Sourceに戻り、Tableを選択したり、2つのテーブルに複製して、2021年、2020年をそれぞれつけたあと、クエリの追加をしりゴニョゴニョします。
最終の出来上がりはこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/72d8f348-a9dc-8cc9-9367-a885192854f8.png)
できあがりの[ビジュアルはこちら](https://bit.ly/Machida-COVID19-Status)です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/0643b4e8-aa9a-aebb-1118-dc35b8fd8bd0.png)

### (2) PDFのページを取り込む

 2021/6/30に金融庁から[「金融機関のシステム障害に関する分析」の最新版が公表](https://www.fsa.go.jp/news/r2/20210630/20210630.html)されました。こちらにある、[PDFにある事例](https://www.fsa.go.jp/news/r2/20210630/system_01.pdf)をPower BIレポートしました。このような文章の中のPDFを(1)と同様に開くと、テーブルから思うような結果が得られません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/0d683ef0-e12e-97be-0d37-8b1bbb6f75d7.png)

このような場合、ナビゲーターのテーブルの下にある、ページを参照します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/655c7725-30cb-d58d-079d-51c7eccff1ed.png)

そうすると、取り込みを行いたいページの中のデータが確認できます。
ここからデータを取り込み、Power Query等でかなりゴニョゴニョしたり、データの不備を訂正したりして、目的のデータにできます。

そのようにして作成したのが[こちらのビジュアル](https://bit.ly/fsa-sys202106)です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/bde3ff4d-aa08-47d5-b132-f656c61adbae.png)

### (3) PDFを一度Excelにエクスポートしてから取り込む

 (2)のレポートが完成した後、去年もレポートを作成しており、そしてQiitaを作成していたことを思い出しました。
[金融機関のシステム障害に関する分析Power BIレポート - Qiita](https://qiita.com/ishiayaya/items/900c304c1025827ed10e)

手順を見ると

> Power BIレポート化の手順概要
> Acrobat ProでPDFからExcel形式でエキスポート

そ、そいういえば、最初はそんなことをやっていましたね、、ということで検証で途中までやってみると、、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419691/3a977c11-b905-dda4-dae1-5e786980e10f.png)

同じゴニョゴニョをやるにしても、こちらの方が手間が少なかったですね、きっと。なので、Acrobat等をお使いの方は、一度PDFをExcelに出力してから取り込みをするという方法を、(2)よりもおすすめします。

## おわりに
　今回、金融庁のレポートは、「(2)のPDFのページを取り込む方法」で行いました。取り込んだデータをPower Queryで取り込むものの後半のページの途中でエラーになり詳細を追うことをあきらめ、手直ししました。できあがってから、Qiitaで、昨年の金融庁レポートの取り込むの自分のレポートを見つけ、「(3) PDFを一度Excelにエクスポートしてから取り込む」方法でやっていたことを思い出しました。早く確認すればよかった!!
Googleカレンダーで「予定の時間枠のみを表示（詳細は非表示）」となってうまく共有できない場合は？

# はじめに
googlemeetの1時間制限を取り払うために企業アカウントを取得して、企業アカウントでmeetの予定をgoogleカレンダーで作り、よく使う自分自身の個人アカウントに共有したらなぜか「予定あり」になってしまう。ヘルプを行き来しても解決できなかったのでサポートに電話して解決したのでメモで残す。これやってみるとできないひと結構いるんじゃないの？

:arrow_down:  いや、「予定あり」じゃなにもわかんねーっつのｗ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/e03977c4-632e-b85b-6b86-045fb5cf6e1c.png)


# gmailで企業アカウントを作成する
これはmeetの時間制約を取り払うため（省略）。かんたんだと思うが支払いは発生するぞ

# カレンダーを共有する
企業アカウントでな、「設定と共有」
![Screenshot_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/9e34715c-1605-d119-6c8f-ad5d7c14b936.png)
![Screenshot_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/0369e083-5621-b09d-4d5a-6d001f48fbdb.png)

# 共有失敗例
特定のユーザー（個人アカウントの僕）との共有をすると、なぜか非表示になってしまう。[可哀想に❗](https://twitter.com/onkun_suko?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor)

![Screenshot_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/b06e369d-f7a4-8d85-49d1-b8c4d3518c4a.png)

so sad!:sob:
![Screenshot_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/cd28ba4c-45c6-b08e-20f1-a46251e9eef7.png)

# 設定
企業アカウントで「管理」をクリック
![Screenshot_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/d1308be1-baaf-6241-3cd0-2cf087e94009.png)

「アプリ」をクリック
![Screenshot_6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/533ee4f6-b133-9d2a-be54-5ce27fda93bf.png)

「Google Workspace」をクリック
![Screenshot_7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/11d5e859-b178-2109-ada5-4f384790a460.png)

「カレンダー」をクリック
![Screenshot_8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/6be8052f-dd9c-9d44-6526-d82bc244ef33.png)

「メインカレンダーの外部共有オプション」をクリック
![Screenshot_9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/e41aed47-8557-3dae-1556-56eef9d1fa68.png)

なんとここで制約がかかっている！わかるかーい！:rage:
![Screenshot_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/01a18f3b-dee8-3770-b017-40ca4feb6b23.png)

変更を許可せず公開する
![Screenshot_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/8c735ca4-1358-6834-27e1-3006e671fd59.png)

# 確認
にっこりやで:blush:
![Screenshot_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/89d4ac8d-e447-9755-94a3-91b79c1e3b9f.png)

# ついでに
企業アカウントの「写真」って編集できなくなってね？これは、企業アカウントで例えばメンバー100人のメールを作ったときにいきなりいじれるのを阻止してるんだそうだ。これも「わかるかーい！」ってレベルだよな
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/c6cd4ef7-5981-cc1b-3055-6ccedf091314.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/6ea40476-2f9f-c506-29e5-bd93ccc65e7e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/e881257f-f176-3f3d-b792-1f027bb0e4a3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/a43ec2bf-1b00-f908-deb9-dd31af848bdc.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/a841aa29-78c3-c9cc-91c2-9666e7a06498.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/d1df0f43-759f-4ad3-2541-7d9ebec54ccd.png)
リストのaタグを親要素いっぱいにして上下中央揃えにする方法

## リストのaタグを親要素いっぱいにして上下中央揃えにする方法

####　試したこと

HTML

```
<div class="wrap-contents">
    <ul class="layout div2 nav">
        <li class="layout-item"><a href="/shop/goods/search.aspx?tree=#{category}&stock=1&keyword=#{searchKwd1}&search.x=%8c%9f%8d%f5/">#{buttonText1}</a></li>
        <li class="layout-item"><a href="/shop/goods/search.aspx?tree=#{category}&stock=1&keyword=#{searchKwd2}&search.x=%8c%9f%8d%f5/">#{buttonText2}</a></li>
    </ul>   
</div>
```

CSS

```
.nav{
    width: 100%;
    padding-top:10px;
}

.nav li {
    border: 1px solid #ddd;
    margin-bottom: 5px;
    border-radius: 4px;
    padding: 8px 8px;
}
.nav li a{
    text-decoration: none;
    text-align: center;
    
    // y軸のpaddingをいい感じに入れてもろて縦揃えしようとした
    padding: auto 0;
}
```

####　試行錯誤の結果

HTML

```
<div class="wrap-contents">
    <ul class="layout div2 nav">
        <li class="layout-item"><a href="/shop/goods/search.aspx?tree=#{category}&stock=1&keyword=#{searchKwd1}&search.x=%8c%9f%8d%f5/">#{buttonText1}</a></li>
        <li class="layout-item"><a href="/shop/goods/search.aspx?tree=#{category}&stock=1&keyword=#{searchKwd2}&search.x=%8c%9f%8d%f5/">#{buttonText2}</a></li>
    </ul>   
</div>
```

CSS

```
.nav{
    width: 100%;
    padding-top:10px;
}

.nav li {
    border: 1px solid #ddd;
    margin-bottom: 5px;
    border-radius: 4px;
    padding: 8px 8px;
}
.nav li a{
    text-decoration: none;
    text-align: center;
    
    // 文字折り返し時のタテヨコ中央揃え
    position: relative;
    display: block;
    width: 100%;
    top: 50%;
    transform : translateY(-50%);
}
qiitaの記事で目次を作っても移動できない

## 解決
プレビューでヘッダをホバーして左のアイコンをクリックすると、urlがかわるので、それを使う。
以下は例

```md
## 目次
[これは、まえがき。](#これはまえがき)
[本文！](#本文)
[あとがき（TODO:書く）](#あとがきtodo書く)
```

## 目次
[これは、まえがき。](#これはまえがき)
[本文！](#本文)
[あとがき（TODO:書く）](#あとがきtodo書く)
## これは、まえがき。
t
e
s
t
t
e
s
t
## 本文！
t
e
s
t
t
e
s
t
## あとがき（TODO:書く）
t
e
s
t
t
e
s
t
草野球の出欠確認Webアプリを作ろう！　part.14

これから作っていく簡単なWebアプリの作成メモ（自分の備忘）です。
自分用なのであまり凝りすぎないように書いていきたい。

[<<前回の記事](https://qiita.com/tomodachi_uec/items/67b6718c70e2b5f49387)

##今回やったこと

###ヘッダーデザインの改善

あんまりな見た目のため、ヘッダーの見た目を手早く改善する。

```erb:app/views/layouts/_header.html.erb
<header class="navbar navbar-fixed-top navbar-inverse bg-dark">
  <div class="container">
    <%= link_to "yaQue", root_path, id: "logo", class: "navbar-brand text-light", style: "text-decoration: none" %>
    <nav>
      <div class="dropdown">
        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          menu
        </a>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
          <a class="dropdown-item" href="<%= root_path %>">ホーム</a>
          <a class="dropdown-item" href="<%= schedules_path %>">予定</a>
          <a class="dropdown-item" href="<%= users_path %>">ユーザー</a>
        </div>
      </div>
    </nav>
  </div>
</header>
```

body部分のlayoutについて、`container`クラスを`application.html.erb`のほうに持たせる。

```erb:app/views/layouts/application.html.erb
（略）
<body>
  <%= render 'layouts/header' %>
  <div class="container">
    <%= yield %>
  </div>
</body>
（略）
```

これで以下のような見た目になる。

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534558/c85bd4d4-596a-b39d-a0cc-406d80661c2a.png)

ひとまず満足した。

###フッターの作成

とくにフッターを用意しなければならない機能的要因はないが、見た目が引き締まって見えたらいいな～と思い作成する。

```erb:app/views/layouts/_footer.html.erb
<footer class="footer bg-dark" style="position: absolute; bottom: 0; width: 100%;">
  <nav>
    <li><%= link_to "yaQue", root_path, class: " text-light", style: "text-decoration: none" %></li>
  </nav>
</footer>
```

```erb:app/views/layouts/application.html.erb
<body>
（略）
  <%= render 'layouts/header' %>

  <div class="container">
    <%= yield %>
  </div>

  <%= render 'layouts/footer' %>
</body>
（略）
```

これで以下のような見た目になる。

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/534558/b7220dd4-90c2-972a-38f8-20c78ca39a9b.png)

かなり満足感がある（個人の感想です）。


今回はここまで。
次回はユーザーのログイン機能を実装していきたい。

<!--
[次回の記事>>](https://qiita.com/tomodachi_uec/items/b86a208845198e3c39f5)
-->
Githubで記事を管理（調査編1）

## はじめに

`Qiita` に投稿する記事を `GitHub` で管理するための調査を行いました。本記事はその内容を纏めた記事です。。`Qiita` が提供するサービスでも十分に管理できますが、編集履歴が残らないため安易に更新することができません。安心して執筆するためにも `GitHub` が記事を管理したいと思いました。なお、環境の構築方法ならびに運用・保守方法に関しては別の記事で投稿するつもりです。

## この記事にわかること

`Qiita` 、`GutHub` リポジトリ、個人ブログで紹介している記事の管理方法が分かります。

## 記事一覧

### `Qiita`

1. [`Qiita` の記事を `GitHub` で管理して `TravisCI` 経由で自動投稿する][1]
1. [`Qiita` に投稿する技術記事を `GitHub` で管理する方法][2]
1. [`GitHub` で記事管理、レビューして `CircleCI` 使ってはてなブログへ自動投稿する][3]

### `GitHub` リポジトリ

1. [参考になる `GitHub` リポジトリ][4]

### 個人ブログ

1. [`GitHub` に `push` する際は `Qiita` にも投稿する][5]

## おわりに

`GitHub` で `Qiita` の記事を管理する方法について纏めました。

- `Markdown` を自動で精査するシステムの構築
- `GitHub` で管理する際の `README.md` の書き方

`GitHub` で `Qiita` の記事を管理するには、それなりのコストで運用しなければいけないことが分かりました。今後の課題として取り組んで行きたいと思います。

## 更新履歴

[1]: https://qiita.com/rednes/items/2d76435434ac632fc6d4
[2]: https://qiita.com/noraworld/items/79100783ba95d8c48924
[3]: https://qiita.com/hatappi/items/e81acf14deca34fd1cbe
[4]: https://github.com/dodonki1223/articles
[5]: https://www.inoue-kobo.com/restapi/qiita_posting/index.html
Dockerの導入手順

##概要
軽量な仮想化環境を実現するためのツール。
環境の違いを意識することなく簡単にアプリケーションを導入できる。

##公式サイト
https://www.docker.io/

##Dockerのインストール手順
1.メニューの「Docker Desktop」を選択する。
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665310/80f4a828-e63f-e2ee-e7a6-57b1e720476f.png)

2.「Download for Windows」をクリックする。
![2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665310/82d68f6f-5fef-0053-5f37-322d9a03d2e4.png)

3.ダウンロードしたファイルを実行する。
　WSL2というソフトは必要なのでチェックを入れてOK。
![3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665310/1affe66f-888c-b940-0bbc-fd1ba0237c36.png)

4.インストールが終わったらPCを再起動する。
![4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665310/0675cdcd-0874-f1e6-c991-9768da04dad5.png)

##WSL2のインストール手順
1.https://docs.microsoft.com/ja-jp/windows/wsl/install-win10#step-4---download-the-linux-kernel-update-package
　でパッケージをインストールし、実行する。
![5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665310/a4e3881c-c1fb-8111-2990-535e7c9f99ef.png)

##Dockerの起動
1.コマンドラインで

```
docker run -d -p 80:80 docker/getting-started
```
を入力する。

##Ubuntuのインストール
1.PowerShellを開き

```
wsl --set-default-version 2
```
を実行する。


2.https://aka.ms/wslstore
　からUbuntuをインストールする。
![7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665310/8b1c704c-de26-18e7-aad0-1977357159d1.png)

3.インストールが終わったらUbuntuを起動し、ユーザー名、パスワードを入力する。
![8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665310/962ddb13-7f0e-cf4e-5f32-bb1029c5edaf.png)

##DockerとUbuntuの統合
1.Dockerを右クリックし「Setting」を選択する
![9.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1665310/c5f851a0-a60f-dafe-f9b8-f5e650d4af63.png)

2.「Resources > WSL INTEGRATION」を選択し、「Ubuntu」をONにする。

##VSCodeの設定
1.VSCodeのターミナルを開き、PowerShellをUbuntu変更する。
【1行野郎】Bash ShellScript で URLエンコードとデコードをする


## 概要

ここでの**エンコード**とは以下である.

・引数として「`コマンド`」という文字を渡すと「`%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89`」に変換する.

ここでの**デコード**とは以下である.

・引数として「`%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89`」を渡すと「`コマンド`」という文字に変換する.



## エンコード

実行のために nkf を事前にインストールしておくこと. (未検証だが iconv コマンドではツライはず)

### $HOME/bin/urlenc.sh

```bash
echo "$*" | nkf -WwMQ | sed 's/=$//g' | tr = % | sed -e 's@%2F@/@g' -e 's@%5F@_@g'
```

### 使い方

```bash
$ urlenc.sh コマンド
%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89

```

## デコード

実行のために nkf を事前にインストールしておくこと. (未検証だが iconv コマンドではツライはず)

### $HOME/bin/urldec.sh

```bash
echo "$*" | nkf -w --url-input
```

### 使い方

```
$ ./urldec.sh %E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89 
コマンド
```
US配列ゲーミングキーボードで言語切り替えとIMEオン（Windows10）

## 実現したいこと
US配列ゲーミングキーボードでMacの英数・かなキーのようなものを使いたいので、Windowsの設定とGoogle日本語入力とゲーミングキーボードの設定ツールを使って、どうにかする。


## 前提
ゲーミングキーボードとして、Razer Huntsman Mini を使う。また、Razer Synapse 3・Google 日本語入力・US入力方式のインストールが必要。

他のキーボードでも、Fnキーでキーのレイヤーを変えられる、または自作のものであればキーボードマクロソフトとの組み合わせで実現可能かもしれない。

## 注意
ホットキーの使用時にキーの組み合わせ次第でアプリ側のホットキーが動作する場合がある。

## 入力方式を切り替えるホットキーを設定する

`Win + S`で検索ウィンドウを開き、「キーボードの詳細設定」と検索し設定を開く。
「入力方式の切り替え > 入力言語のホットキー」で入力方式を選択して「キーシーケンスの変更」をする。
下の画像ではUS/Google日本語入力の切り替えを`左Alt + Shift + 9/8`に設定している。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276332/4f5996e2-7f8c-cc81-80f7-29546df24018.png)

## IMEがオフになる問題
たとえば、メモ帳を開くと日本語入力でIMEがオフになってしまう。
これを解決するため、ゲーミングキーボードのソフトなどで、日本語切り替えとIMEオンを同時に実行するマクロを作成し、キーに割り当てる。
Microsoft IMEでは変換キーにIMEオンの割り当てができるが、今回使っている Synapse3 では変換キーの入力がマクロで使えなかったので、Google日本語入力 を使う。
プロパティから、「一般 > キー設定 > キー設定の選択」に移動し、「カスタム」を選択して「編集」する。モードは直接入力、入力キーは任意のキー、コマンドはIMEを有効化にする。
下の画像では `Ctrl + Shift + F8` をIMEオンに設定している。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276332/51d05f96-9aec-b870-1c30-a4b681e9924c.png)![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276332/dec0121f-c38c-e871-a9bf-848d84cebf28.png)


## キーボードにプログラムする

これまでに設定したホットキーをゲーミングキーボードの構成ソフトでキーに割り当てる（日本語入力はマクロを割り当てる）。
`Fn + C`に日本語入力+IMEオンのマクロ(`左Alt + Shift + 8` ->`Ctrl + Shift + F8`)、 `Fn + M`にUS入力`左Alt + Shift + 9`を割り当てる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276332/1fee95cb-348f-7d72-e258-3073419b2068.png)


## ホットキーが効かなくなる問題
ロック画面に移動する（`Win + L`）と、「入力言語のホットキー」のキーシーケンスが変わり、ホットキーが効かなくなる場合がある。
これを解決するには、`Win + S`で検索ウィンドウを開き、「言語の設定」と検索し設定を開く。
「関連設定」の「管理用の言語の設定」を開き、「ようこそ画面と新しいユーザーアカウント」の「設定のコピー」を押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276332/ce131985-fa19-14b5-6114-cdd314393e6b.png)
「現在の設定のコピー先」の各項目にチェックをしてOKを押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276332/df32cead-1e88-12f5-1a17-a9691d3b83cf.png)


## あとがき
これは妄想だが、ハードウェアマクロ対応キーボードで変換・無変換キーの送信ができれば、Microsoft IMEで設定できるので、Google日本語入力をインストールする必要がなくなる。また、マクロソフトを常時稼働させる必要もなくてよさそう。
【Laravelクエリビルダ】idをgroupByし、SUMで集計する方法

この記事ではLaravelのクエリビルダ初級者向けにgroupByとSUMで集計結果を解説していきます。

バージョンは6系です。

ブログで以下のような記事も書いています。

https://www.kamome-susume.com/enginner-job-change-site/

## 取得するデータについて
今回の取得するデータは以下の通りです。

studentsテーブル
![スクリーンショット 2021-07-03 17.35.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1693248/be1e54dd-f12b-b41b-bee4-1b28fa6b0dea.png)

studentsテーブルのpost_idでグループ化し、amountの合算値を取得したいって場合。

同じpost_idをまとめて、amountを合算します。
イメージとしては、以下です。

| post_id | amount |
|:-:|:-:|
| 1  |  1000 |
|  2 |  2000 |
| 3  |  3000 |
| 1  |  5000 |

↓

| post_id | amount |
|:-:|:-:|
| 1  |  6000 |
|  2 |  2000 |
| 3  |  3000 |

SQLで書くと以下のようになります。

```
SELECT
post_id,
SUM(amount) AS total_amount
FROM students
GROUP BY post_id
```

これをクエリビルダにすると以下になります。

```
$result = DB::table('students')
     ->select('post_id')
     ->selectRaw('SUM(amount) AS total_amount')
     ->groupBy('post_id')
     ->get();
```

## コードを解説

`DB::table('students')`は、テーブルを指定。

### selectRaw
`select('post_id')`SELECT文。post_idをセレクトする。

`selectRaw('SUM(amount) AS total_amount')`について。
`selectRaw`とは、`select(DB::raw(...))`の省略形です。
`DB::raw()`とは、SQLを直接使用できるものです。ただ、生のSQLを書くことはセキュリティの面で心配なので、積極的には利用しない方がいいんですよね。
だけど、SUM関数などをクエリビルダで書くときは、`selectRaw`を使う方法しかないですよ。
※もしあればコメントでお知らせください。
`AS total_amount`でtotal_amountというカラム名に変更してます。

### groupBy

`groupBy('post_id')`でpost_idをグループ化してます。
これにより、`post_id`が1,2,3,1→1,2,3になります。

最後に`get()`でデータを取得してます。

中で行っていることとしては、
post_id amount
1 1000
2 2000
3 3000
1 5000

これを
1 6000
2 2000
3 3000

にまとめたって感じですね。

ビューで以下のように書けば、データを取得できます。

```
<table>
    <thead>
      <tr>
        <th>投稿ID</th>
        <th>合計金額</th>
      </tr>
    </thead>
    <tbody>
    @foreach ($result as $val)
      <tr>
        <td>{{ $val->post_id }}</td>
        <td>{{ $val->total_amount }}</td>
      </tr>
    @endforeach
    </tbody>
</table>
```

![スクリーンショット 2021-07-03 17.56.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1693248/ab01fde3-2467-7957-9779-18fa26fbe703.png)

今回はここまでです。
参考になりましたらLGTMや記事のストックをお願いいたします。

ブログで以下のような記事も書いているのでぜひ一読してみてくださいね！

https://www.kamome-susume.com/enginner-job-change-site/
入門『地頭を鍛える』を読んでみた感想１

地頭を付けたく入門『地頭を鍛える』を読みました。途中段階ですがchapter1基本の思考法を押さえるまでを読んで思ったことを記載します。

#1.読んでみた感想
戦略はいかに楽をして目的を達成するか、例えばいかに人気ラーメン店に並ばずに食うかなどそもそも無駄に勝負する必要はなく目的を達成することに注力すれば楽に行動しやすいと感じました。後は、1発で決めようとするのではなく20%の完成度から徐々に仕事をしていくやり方はマコなり社長がよく行っている2割共有と同じようなことを述べていいると感じました。

#2.アクションプラン
・研究職なので実験を行うにしてもなぜやるのかを考える
・自分が何か行動することに理由をつける
・仕事の進め方として方向性を10分で考えて上司にフィードバックを貰う
・自分の1番大事な目的さえ達成してしまえばいいと考えて無駄に勝ち負けに拘らない

#3.さいごに
chapter1を読んで頭の中では一通り理解したつもりですが、実践して使いこなせるかが大事になってくるので自分なりに使いこなせるようになりたいです。
chapter2を読み終えたらまた投稿します。
/etc/sudoers や /etc/sudoers.d/* を編集ミスして sudo ができなくなった場合の復旧方法 [ubuntu]


## 概要

下記のように sudo コマンドが使えなくなり、root権限が得られなくなった場合の復旧方法を記す.
ただし、Ubuntu Desktop をインストールした環境限定である. 
より厳密には pkexec と pkttyagent の両コマンドが使える環境限定である.

**関連 Qiita 記事**
・[sudoコマンドがいきなり使えなくなった！](https://qiita.com/wakki_haya/items/2704da993bf2a2923382)
・[Chefでsudoersをいじったらsudoできなくなったの巻](https://qiita.com/tohta/items/1c37f57b68f85fc12dcc)
・[AnsibleのCopyモジュールでsudoers.d配下にファイル追加をしたらroot権限がお亡くなりになった](https://qiita.com/VTRyo/items/9f587c9d4d3ea95b3df6)



## 詳細

ここでは `/etc/sudoers.d/jenkins` を編集ミスしたことによって、sudo が一切使えなくなった場合と仮定する.

つまり、次の状況からの復旧方法である.
・**`/etc/sudoers.d/jenkins` を削除したいが、sudo ができなくなり困り果てる**


```bash
$ sudo rm -f /etc/sudoers.d/jenkins
>>> /etc/sudoers.d/jenkins: 構文エラー near line 2 <<<
>>> sudo: @ ｏlU 内 2 行付近で構文解析エラーが発生しました
>>> sudo: 有効な sudoers のソースが見つかりません。終了します
>>> sudo: ポリシープラグインを初期化できません
```

## 検証環境

```
Ubuntu 16.04
```

恐らく Ubuntu 18.04 や 20.04 でも問題無い.


## 手順

### 1. 端末(コンソール)を2個起動させる

該当PC にログインした状態の端末 (gnome-terminal や TeraTerm などのコンソール) を **2個起動**させる.
起動させた2個の端末を便宜上「<font color="Red">端末A</font>」「<font color="Blue">端末B</font>」とする.

### 2. 「<font color="Red">端末A</font>」のプロセス番号を確認する

「<font color="Red">端末A</font>」で次のように実行するとプロセス番号が判明する.
ここでは「12345」であった. この番号を控えておく.

```bash
$ echo $$
12345
```

### 2. 「<font color="Blue">端末B</font>」から pkttyagent を使って「<font color="Red">端末A</font>」に接続する

<font color="Red">端末A</font> のプロセス番号「**12345**」を指定して `pkttyagent` というコマンドを実行する

<font color=#aa4444>なお、この時点で pkttyagent が存在しないようであれば、残念ながら本ページの手順では復旧できない💀...スマヌ</font>


```bash
$ pkttyagent -proccess 12345
```

### 3. 「<font color="Red">端末A</font>」で「pkexec rm -f /etc/sudoers.d/jenkins」を実行する

```bash
$ pkexec rm -f /etc/sudoers.d/jenkins
```
すると「<font color="Blue">端末B</font>」に次のような表示がされるので、「jenkins」アカウントのパスワードを入力する

```bash
==== AUTHENTICATING FOR org.freedesktop.policykit.exec ===
`/bin/rm'を管理者として実行するためには認証が必要です
Authenticating as: foo,,, (foo)
Password:
```

その結果、「<font color="Red">端末A</font>」での「pkexec rm -f /etc/sudoers.d/jenkins」に成功する.

### 4. 文法ミスが無い「/etc/sudoers.d/jenkins」を作成する

「<font color="Red">端末A</font>」で以下を実行すれば復旧完了となる.

```bash
$ cat <<EOL | sudo tee /etc/sudoers.d/jenkins
Defaults:jenkins !requiretty
jenkins ALL=(ALL:ALL) ALL
EOL
```

　

以上.

面倒でも /etc/sudoers や /etc/sudoers.d/* を編集する場合は visudo を使うべし. (自戒)


## あとがき

### 事前に policykit-1 をインストールしておく 

最悪の場合に pkexec や pkttyagent が使えるように、次を実行して先の 2つのコマンドを導入しておきましょう. (未検証ですが)

```
$ sudo apt-get install -y policykit-1
```

## 参考記事

https://stackoverflow.com/questions/35224391/how-to-fix-this-sudo-etc-sudoers-is-world-writable/35224732#35224732
GitHubがGitHub Copilotを発表

#GitHub Copilotとは？
GitHubがAIを活用して効率的にコードを書けるようにしたサービスです。
GitHubで公開されている何億行ものコードでトレーニングされたモデルが文字列や関数名、コメントから文脈を把握し、プログラマーがプログラマーが書こうとしているコードを予測して補完することができるようです。
人間よりたくさんのコードを見て学習しているので、プログラマーが書こうとしているコードを予測し、悩む前に実装方法などのサンプルを提示し、大幅な時間短縮が期待されますね。
他にも、提示されたサンプルコードによって自分が知り得なかったコードの書き方などを知ることができるかもしれません。

人間とペアプログラミングするより、GitHub Copilotとペアプログラミングした方が、コーディング速度も上がり、学びもあるので恐ろしい技術ですね。

##対応の言語、エディター
現在、対応している言語はPython、JavaScrip、TypeScript、Ruby、Goの５つで、今後ほぼ全てのものに対応していくようです。

エディターはvisual studio code のみ対応しています。
これはGitHubを買収しているのがMicrosoftで、Microsoftが出しているエディターがvisual studio codeなのでここは仕方ありませんね。

##エンジニアは必要なくなる？
今の情報だけだとエンジニアが不要になることはないと思っています。
GitHub Copilotはあくまで先人達の書いたコードを元にコードを補完してくれるだけであり、１からWEBサイトやサービスができるコードを生産してくれる訳ではないからです。
しかし、全てAIがコードを生産してくれる未来もそう遠くはないのかなと感じます。

AIが足元まできてる感覚ですね。
追いつかれないようにスキルアップあるのみですね！！
WindowsでMacの純正USキーボードを使う簡単な方法

#目標

USキーボードと同じ場所にCommandキーを割り当てること

Commandキー　+　スペースで半角/全角のように入力を切り替えられること


##USキーボードと同じ場所にCommandキーを割り当てる

これをするためには2つやることがあります。

###設定をUSキーボードに変更

具体的なやりかたはこちらの記事を参考にどうぞ
https://enjoypclife.net/windows-10-us-keyboard-layout-japan-tips/

###割当変更ソフトのダウンロード

割り当てるにはkeyswapのソフトをダウンロードします。

ダウンロードと操作方法はこちらを参考にどうぞ
https://yama-ari.net/windows10-key-change/

設定方法はこのように。
![コメント 2021-07-03 173742.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/849608/a7786158-d7de-4f8d-c6d0-cdf781ec0cd5.png)

初期設定はCommandキーがWindowsキーになっているのでそこの割当を変更しましょう。

変更後はPCの再起動は忘れずに。

これで割当は終了です。

###Commandキー+スペースで半角/全角のように入力を切り替える

Commandキー　+　スペースで入力を切り替えるには設定の『キーとタッチのカスタマイズ』まで行きましょう。

行き方はこちらを参考にどうぞ。
https://faq.nec-lavie.jp/qasearch/1007/app/servlet/relatedqa?QID=022112

ここの『Ctrl＋Space』でIME-オン/オフを選びましょう。
![コメント 2021-07-03 175331.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/849608/9e5bde40-57c2-536c-f5f1-d81633f9ab90.png)


これで設定は完了になります。
fizz buzz の i % 15 == 0 を実務で使った話

おそらく初学者の方が一度は思うであろう
Fizz BUss問題の`i % 15 == 0` ってどんな時に使うの？
これを最近実務で使ったので紹介したいと思います

## 使った経緯

GitHubのAPIを使ったバッチ処理を作った際に利用しました。
利用方法としてはレート制限の回避です。
曲解して伝えると、外部APIを使う際に1分間に複数回同じAPIを叩くとエラーが起きます。（実際はかくAPIによって違う）
これを防ぐ際に使用いたしました。

## 解説
説明用に簡単ですが作りました。
octokitというgithubのAPI　gemを使っていますが、今回の本筋ではないため特に説明しません。
詳細はgithubにあげてます
https://github.com/minty1202/qiita-octokit

```ruby
require "bundler/setup"
require 'octokit'

class Search_issue

  def initialize(token)
    @client = Octokit::Client.new(access_token: token)
  end

  def done(repo_name)
    page_num = 1
    i = 1
    api_issues = fetch_issues(repo_name, page_num)
    while api_issues.count % 30 == 0
      sleep 60 if i % 10 == 0
      page_num += 1
      api_issues.concat(fetch_issues(repo_name, page_num))
    end
    puts api_issues
  end

  def fetch_issues(repo_name, page)
    options = {
      state: 'all',
      per_page: 30,
      page: page
    }
    @client.list_issues(repo_name, options)
  end
end
```

これはリポジトリにあるissueを検索するコードです。
注目して欲しいのが

```ruby
while api_issues.count % 30 == 0
```
の部分と

```ruby
sleep 60 if i % 10 == 0
```

それぞれ説明していきます

#### while api_issues.count % 30 == 0

これは検索個数が30こちょっきりだった場合、次の30件を取りに行くために記述してます。
githubのissueはページごとに管理されており、MAX100件一ページになってます。（デフォ30件）
ですのでリポジトリのissueを全て撮りたい場合、今回のコードですと30件以上のissueを取るためには少し工夫が必要です。
while文を使い、持ってきた数が30こ丁度の場合次の30個を拾いに行くようにしています。

#### sleep 60 if i % 10 == 0

API関係をつかうときにこの記述はよくつかうことになるのではないかと思います。
最初にお伝えしたようにAPIにはレート制限がありますgithubですと確か10〜30までレート制限ですので、仮に1リポジトリに1000件のissueがあった場合、この`sleep 60 if i % 10 == 0`がなかったら、300件を撮った時点でエラーが返ってきます。ですので、ループ処理をしている際に10回行うたびに1分の時間を空ける。というのが必要になるのです。

## まとめ

かなりざっとでしたが、こんな感じに使いましたという紹介でした。
他にもつかう機会はあるかもしれないですし、私よりもスマートなレート制限の回避方法はあるかもしれません。
ただ、少しでも今の学習が面白くなればと思って書かせていただきました。