OmniAICreator/Qiita-1.07M huggingface dataset:
if文なしでじゃんけん

[[PHP]じゃんけんプログラム - Qiita](https://qiita.com/ri_/items/5c73dca33cc8401c2600)を読んで、自分ならどうするか考えてみた。

## 解答

複雑に考えればいくらでも複雑にできるけれども、とりあえずこのくらいにした。

```php
<?php

const WIN_LOSE_TABLE = [
    'グー' => ['チョキ' => 1, 'パー' => -1],
    'チョキ' => ['パー' => 1, 'グー' => -1],
    'パー' => ['グー' => 1, 'チョキ' => -1],
];

$printer = fn(string $my_hand, string $your_hand, int $result): string =>
    sprintf("[%s vs %s] %s", $my_hand, $your_hand,
        match ($result) {
            -1 => 'あなたの負け',
            0 => 'あいこ',
            1 => 'あなたの勝ち',
        }
    );

foreach (['グー', 'チョキ', 'パー'] as $my_hand) {
    foreach (['グー', 'チョキ', 'パー'] as $your_hand) {
        echo battle($my_hand, $your_hand, $printer), PHP_EOL;
    }
}

/**
 * 尋常に勝負
 */
function battle(string $my_hand, string $your_hand, Closure $printer): string
{
    return $printer($my_hand, $your_hand, WIN_LOSE_TABLE[$my_hand][$your_hand] ?? 0);
}
```

大事なのは`const WIN_LOSE_TABLE`と、それを取り出すところで`WIN_LOSE_TABLE[$my_hand][$your_hand] ?? 0`してるところ。`match ($result)`のところは勝ち・負け・あいこの状態を文字列に変換してるだけ。


## これだけだと見映えがしないので

絵文字を使いましょう

```php
<?php

namespace Janken;

use Closure;

const WIN_LOSE_TABLE = [
    'グー' => ['チョキ' => 1, 'パー' => -1],
    'チョキ' => ['パー' => 1, 'グー' => -1],
    'パー' => ['グー' => 1, 'チョキ' => -1],
];

const EMOJI_TABLE = [
    'グー' => '✊',
    'チョキ' => '✌',
    'パー' => '🖐',
];

$printer = fn(string $my_hand, string $your_hand, int $result): string =>
    sprintf("[%s vs %s] %s",
        EMOJI_TABLE[$my_hand],
        EMOJI_TABLE[$your_hand],
        match ($result) {
            -1 => 'あなたの負け',
            0 => 'あいこ',
            1 => 'あなたの勝ち',
        }
    );

foreach (['グー', 'チョキ', 'パー'] as $my_hand) {
    foreach (['グー', 'チョキ', 'パー'] as $your_hand) {
        echo battle($my_hand, $your_hand, $printer), PHP_EOL;
    }
}

function battle(string $my_hand, string $your_hand, Closure $printer): string
{
    return $printer($my_hand, $your_hand, WIN_LOSE_TABLE[$my_hand][$your_hand] ?? 0);
}
```

動作確認: https://3v4l.org/MFqsQ

![スクリーンショット 2021-02-25 1.27.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4121/d1b3d2cb-5db4-25ed-939f-4f563b712503.png)

やりましたね！
【Spring Boot】 海外Teck系YouTuberを真似てみた！ReactJS＋SpringBoot Full Stack Application

#１，はじめに
>この記事は、**海外Teck系YouTuberの動画**を参考に、同じプロジェクトを作成してみたものになります！
簡単にですが、動画を通して学べた技術や知識をまとめました！

#２，学んだこと
主に、
>①　**Axios HTTP Library**を導入して、<font color="Blue" >**React**</font>と<font color="Green">**SpringBoot**</font>を連携させる。
②　**Postman**を使ってRESTApiの動作を確認する。

その他にも、**npm**を使って**router**や**axios**のインストール方法も学べました！

ゴール:triangular_flag_on_post:が見えているので、モチベーションにもなって効率良く学習が進めれました！
真似るだけでも、様々な技術の習得に繋がったのでぜひ、ぜひトライしてみてください！

完成したものは、下記に載せています:rainbow:

#３，参考動画

<iframe width="100%" height="450" src="https://www.youtube.com/embed/videoseries?list=PLGRDMO4rOGcNLnW1L2vgsExTBg-VPoZHr&amp;showinfo=0" frameborder="1" allowfullscreen></iframe>
URL: https://youtube.com/playlist?list=PLGRDMO4rOGcNLnW1L2vgsExTBg-VPoZHr

#４，Tools and Technologies
**【フロントエンド】**
>:star: React
:star: Modern JavaScript(ES6)
:star: NodeJS and NPM
:star: VS Code IDE
:star: Create React App CLI
:star: BootStrap 4.5 and Axios HTTP Library

**【バックエンド】**
>:star: Spring Boot 2+
:star: SpringData JPA(Hibernate)
:star: Maven 3.2+
:star: JDK 1.8
:star: Tomcat 8.5+
:star: MySQL Database

#５，完成:tada:
約５時間ぐらいかけて完成することができました:star:
![2021-02-24_23h58_37.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/75041f15-81a1-57d3-5f36-3d610dfee0d2.gif)

#補足
Postmanを使うと、

ネットワーク経由で外部のサーバーにアクセスし、必要な情報を取得することができます！

URL: [Postman](https://www.postman.com/ "postman")
![2021-02-25_00h30_34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/eafa63fd-9fe8-8a23-7fc4-ce719203dd40.png)
使用 wor2vec 加強搜尋體驗

藝人在發行專輯會有多種名稱，我們可以稱為別名，那麼是否能搜尋藝人的專輯資料時，
同時找出別名發行的專輯和其它相關的專輯。

#agenda
1. Download ja-wikepeda 語料
2. Preprocess ja-wikiepeda 語料
3. Use gensim generate word2vec model
4. Final

# Download ja-wikepeda 語料

```bash
wget https://dumps.wikimedia.org/jawiki/latest/jawiki-latest-pages-articles.xml.bz2
```

# Preprocess ja-wikiepeda 語料

## WikiCorpus 

```python

from gensim.corpora import WikiCorpus

corpus = WikiCorpus('./jawiki-latest-pages-articles.xml.bz2', lemmatize=False, dictionary={})
with open('./ja-wiki-raw') as output:
    for text in corpus.get_texts():
        output.write(' '.join(text) + '\n')
```

## Mecab + mecab-ipadic-neologd

```bash
mecab -d /usr/lib/x86_64-linux-gnu/mecab/dic/mecab-ipadic-neologd  -Owakati jawiki-raw -o ja-wiki-token -b 1000000000
```

# Use gensim generate word2vec model

```python
from gensim.models import word2vec
import logging

logging.basicConfig(format='%(asctime)s : %(levelname)s : %(message)s', level=logging.INFO)

source = "./ja-wiki-token"
vector_size = 200
min_count = 10
window_size = 5
workers = 3

sentences = word2vec.LineSentence(source)
model = word2vec.Word2Vec(sentences, size=vector_size, min_count=min_count, window=window_size, workers=workers)
model.wv.save_word2vec_format('./ja-wiki-model.vec.pt', binary=True)
```

# Final

1. 計算`澤野弘之`跟 `nzk` 的相關度
2. 列出`澤野弘之` 相關詞

```python
from gensim.models import KeyedVectors

word_vectors = KeyedVectors.load_word2vec_format('./ja-wiki-model.vec.pt', binary=True)

similarity = word_vectors.similarity('澤野弘之', 'nzk')

print(similarity)

data = word_vectors.most_similar('澤野弘之')

for word in data:
    print(word)
```
```bash
0.7995355
('nzk', 0.7995355129241943)
('梶浦由記', 0.79180908203125)
('tielle', 0.7494333982467651)
('gemie', 0.7381956577301025)
('小林未郁', 0.7224546074867249)
('yamanaiame', 0.7218720316886902)
('和田貴史', 0.711627721786499)
('caldito', 0.7096607685089111)
('blackschleger', 0.7088098526000977)
('cyua', 0.7018069624900818)

```

將 `most_similar` 的字串放入 elasticseach MultiMatch query 並且根據相關性 boost score。
Drupalで既存のサービスを上書きする

## Drupalのサービスとは

Drupalではカスタマイズ性を確保するためにD8から「サービス」という仕組み導入しています。
サービスはざっくりいうと、任意のクラスにサービス名という「名札」を付け、クラス名で直接呼び出すのを防ぐ仕組みです。

例えばDrupalのコアには`Drupal\Core\Language\LanguageManager`というクラスがあります。

このクラスを呼び出すには通常のPHPのやり方だと

```php
use Drupal\Core\Language\LanguageManager;
$language_manager = new LanguageManager();
```
と書く必要がありますが、このクラスは`/core/core.services.yml`で

```yml

language_manager:
    class: Drupal\Core\Language\LanguageManager
    arguments: ['@language.default']
```
のようにサービスとして登録されているので、

```php
\Drupal::service('language_manager')
```
という風に呼び出すこともできます。コアやコントリビュートモジュールではほとんどの場合後者が使用されています。


## サービスのメリット
これにはどのようなメリットがあるのでしょうか。

例えば、Drupalサイト開発中に`LanguageManager`内の処理を一部だけ変更する必要が出てきたとします。
もし、コアやコントリビュートモジュールで`LanguageManager`を直接呼び出していた場合、処理を変更するのは困難になります。
単純な方法としては

- `LanguageManager`クラスそのものを上書きする
- `LanguageManager`に修正を加えた`MyLanguageManager`を作り、呼び出し側でそちらを呼び出すように変更する

等があると思いますが、どちらにしてもコアやコントリビュートの一部に手を加えないといけません。画像は後者の方法で書き換える場合のイメージです。（白がカスタムモジュール、青はコアかコントリビュート。）コアやコントリビュートをがっつり書き換えてしまってますね。
![スクリーンショット 2021-02-24 23.28.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/9c71276b-e33e-f504-b17b-3f00e0848395.png)

逆にコアやコントリビュートモジュールのすべてが`language_manager`サービスを介して`LanguageManager`を呼び出していた場合、`ServiceProvider`というクラスを書くことで`language_manager`の紐付け対象を`MyLanguageManager`に差し替えることができます。こちらはすべてカスタムコードで完結していますね。

![スクリーンショット 2021-02-25 0.59.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253501/919cbba5-be65-2173-835e-141a541a9e32.png)


つまりサービス = **クラスそのものやクラスの呼び出し元を修正することなくオーバーライドできるようにする仕組み**ということですね。

開発中に修正したいコアやコントリビュートのコードが出てきた場合は、まずはその箇所がサービスとして登録されているかどうかを確認するのがおすすめです。（登録されてたらラッキー！）

## サービスを上書きする方法

先程説明したように、サービスを上書きするには

- `MyLanguageManager`
- `MyModuleServiceProvider`
 
という2つのクラスを書く必要があります。

### MyLanguageManager

こちらは既存クラスを上書きするためのクラスです。

- クラス名は適当でOK
- ディレクトリも多分適当でいい（既存クラスのディレクトリを真似られる場合はその方がベター）

```php

namespace Drupal\my_module;

use Drupal\Core\Language\LanguageManager;

class MyLanguageManager extends LanguageManager {

  // 上書きしたいメソッドだけ上書き.
  function getCurrentLanguage($type = LanguageInterface::TYPE_INTERFACE) {
    // 処理
  }

}
```
### MyModuleServiceProvider

こちらはサービスクラスの切り替えを指示するためのクラスです。

- クラス名は`[モジュール名]ServiceProvider`の形式にする
- ディレクトリは`my_module/src/MyModuleServiceProvider.php`
- `ServiceProviderBase`を継承する

```php
namespace Drupal\my_module;

use Drupal\Core\DependencyInjection\ContainerBuilder;
use Drupal\Core\DependencyInjection\ServiceProviderBase;

/**
 * Language Managerクラスのサービスを上書きする.
 */
class MyModuleServiceProvider extends ServiceProviderBase {

  /**
   * {@inheritdoc}
   */
  public function alter(ContainerBuilder $container) {
    if ($container->hasDefinition('language_manager')) {
      $definition = $container->getDefinition('language_manager');
      $definition->setClass('Drupal\my_module\MyLanguageManager')
    }
  }
}
```
元のサービスは

```yml
arguments: ['@language.default']
```
の部分で`language.default`という他のサービスを引数にしてますが、そちらは何も明示しなくても勝手に引き継がれるようです。

というわけで、Drupalの既存のサービスを上書きする方法でした。

参考: https://www.drupal.org/docs/drupal-apis/services-and-dependency-injection/altering-existing-services-providing-dynamic
Puppeteerでドラッグ&ドロップ

#はじめに
最近、フロントテストに[Puppeteer](https://pptr.dev/)というライブラリを用いているのですが、ドラッグ・ドロップの動作においてかなり苦戦をしたので、これ以上犠牲者を増やさないために（）、ここに解決策を共有したいと思います。
#Puppeteerでドラッグ&ドロップができない！
「Puppeteer drag drop」というように検索をかけると、大体下記のようなコードが出てきます。

```Javascript
    await page.mouse.move(x1, y1);
    await page.mouse.down();
    await page.mouse.move(x2, y2);
    await page.mouse.up();
```
座標(x1, y1)にカーソルを合わせ、掴む→(x2, y2)に移動し離すという意味のコードです。

しかしこれ...

**動作しません!!!!!**

正確に言うと、一瞬だけ対象物が動くんですけど、(x2, y2)まで移動してくれないんですよね...
調べてみると、このことに関して困っている方が、国内外問わず結構いました。

>await page.mouse.up();
>この処理がうまく動作していないのが原因だと思っているが、どうなんだろう。
>処理自体にエラーはなく、nodeも正常に終了しています。
>しかし私の環境ではテスト終了後、エディタにカーソルをもっていくと常に何かをドラッグしている挙動が発生します。

([Puppeteerで困っていること](https://qiita.com/ryosomiya/items/8d8bb96f08ce8eb8d5aa)より引用)

#解決策
解決策は、「**mouse.moveにoptionsとしてstepsを適切に設定してあげる**」です。
[公式ドキュメント](https://pptr.dev/#?product=Puppeteer&version=v7.1.0&show=api-mousemovex-y-options)には
>steps \<number> defaults to 1. Sends intermediate mousemove events.

と書かれています。
今回はこのstepsを20と設定します。
すなわち、先ほどのコードを

```Javascript
    await page.mouse.move(x1, y1);
    await page.mouse.down();
    await page.mouse.move(x2, y2,{steps: 20});//ここにoptionsとして{steps: 20}を追加した。
    await page.mouse.up();
```
のように書き換えると、期待通り動作します。

#参考
・上記に引用として示したもの
・[How to simulate Drag-Drop action in pupeteer
](https://stackoverflow.com/questions/55848831/how-to-simulate-drag-drop-action-in-pupeteer)
AndroidStudio 「Image Asset」の使い方

#Image Assetの使い方について
###Image Assetは、Androidアプリを開発する上で、簡単にデバイス上に表示するアイコンを作成できるAndroidStudioの機能です。
使い方についてまとめてみました。

まず、Image Assetのウインドウの立ち上げですが、プロジェクトウインドウ上で右クリックします。
メニューの「New」をポイントして、その中から「Image Asset」を選びます。
![スクリーンショット 2021-02-24 22.46.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794916/183f8276-2cbf-6532-d620-0c1b99cc319e.png)

そうすると、「Configure Image Asset」と書かれたImage Assetのウインドウが立ち上がります。
![スクリーンショット 2021-02-24 22.53.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794916/a350c21e-488d-a714-481c-2c08a5ea2af9.png)

主に操作するところは①「Foreground Layer」タブと、②「Background Layer」タブのところです。

①「Foreground Layer」タブではアイコンの前面部分の設定をします。
「Asset Type」のラジオボタンがImageの状態で、「Path」の右端に表示されているフォルダのアイコンをクリックすると、PC上に保存されている画像ファイルを選択できるので、画像を選びます。（前面の画像なので背景部分が透過されているPNG画像を選ぶと良いと思います）
![2021-02-25_00.15.09_Image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794916/d653386d-a906-00e7-2e77-3f271d40071e.png)


画像が表示されましたが、アイコンの画像サイズが大きすぎるので、「Resize」のツマミを操作して丁度良い大きさに変更します。
![2021-02-25_00.15.33_Image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794916/b5663147-958a-285b-0d44-6f406be1e46a.png)


補足ですが、「Asset Type」のClip ArtとTextは設定してもなぜか実際の端末では画像として認識されないので、使いません。

②「Background Layer」タブではアイコンの背面部分の設定をします。
「Asset Type」のラジオボタンがColorの状態で、Color横の色の付いた長方形をクリックすると「Select Color」ダイアログが表示されるので、背景にしたい色を指定してChooseをクリックします。
![スクリーンショット 2021-02-24 23.20.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794916/febaed6f-13fa-980d-c4c9-bfeb37c9d87a.png)
![スクリーンショット 2021-02-24 23.25.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794916/c19a7999-592b-dfeb-017c-63c4904111d9.png)
![スクリーンショット 2021-02-24 23.25.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794916/7faaad93-366f-ba42-e6e7-4314fe11fca2.png)

「Asset Type」のラジオボタンがImageの場合は「Foreground Layer」のときと同じで、「Path」の右端に表示されているフォルダのアイコンをクリックすると、PC上に保存されている画像ファイルを選択できるので、画像を選びます。
![2021-02-25_00.15.52_Image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794916/1f1e9e67-b4b7-55d5-c404-0e46cb0eb187.png)


「Resize」のツマミを操作することでいずれの場合も画像サイズを調整できるので、必要に応じてサイズを変更します。

前面の画像と背面の画像を設定し終わったら、「Configure Image Asset」ウインドウ右下の「Next」ボタンをクリックします。
「Confirm Icon Path」ウインドウが表示されますが、「Finish」をクリックするとアイコンの設定が完了します。
![スクリーンショット 2021-02-24 23.27.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794916/2f3c99b5-c95a-c7f6-9c13-82b7533c38ad.png)

実際の端末でのアイコンの状態です。
![Screenshot_20210224-232837.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/794916/5cfb6e26-4d94-5c17-f7b2-cbd4940ddc33.png)

「Image Asset」でアイコンを作成すると、いろいろな端末に応じた複数のアイコンサイズをまとめて作成できるので、便利ですね。
シェル変数と環境変数の違い（bash）

## 概要

シェル変数と環境変数について調べる機会があったので、
備忘録兼誰かの役に立てばと思い書きました。

## 環境変数

環境変数は、例えば「PATHを通す」のPATHがその一例です。
他にも

```
$ cd
```

で移動する先はHOMEという名前で環境変数として保存されていたりします。
そのようなもともと用意されている環境変数の他に、自分でも環境変数を設定することができます。

環境変数は以下のコマンドで確認することができます。

```
$ export
```

また、```$環境変数```とすればその値を取り出すこともできます。
試しに以下のようにコマンドを打てば、cd の行き先が表示されます。

```
$ echo $HOME
```


環境変数の追加は、例えば以下のように行うことができます。

```
export a=b
```

このコマンドを実行したあとに```export```を実行すれば、aが環境変数として登録されていることが確認できるはずです。


※あとでコマンドはまとめてご紹介します。


## シェル変数

同じ「変数」という字がついていますが、シェル変数は環境変数とは別物です。

例えばシェル変数は以下のように定義できます。

```
b=c
```

環境変数のときと同様に```$b```でその中身をとりだすことができるので

```
echo $b
```

とすれば、cと出力されます。
しかし、環境変数ではないので、```export```を実行してもその一覧にbはいません。

## 環境変数とシェル変数の違い

では、環境変数とシェル変数は何が違うのかというと、スコープが違います。
（他にもあるかもしれませんが、とりあえず目についたものはこれだけでした）
具体的には、以下のような違いがあります。

環境変数：基本的に、親プロセスから子プロセスに引き継がれる。
シェル変数：基本的に、親プロセスから子プロセスには引き継がれない。

これは例えば以下のように確認できます。

```
$ c=shell_var
$ export d=env_var
bash
bash$ echo $c
bash$ echo $d
env_var
bash$ exit
exit
$ echo $c
shell_var
$ echo $d
env_var
```

ここではまず、シェル変数としてc、環境変数としてdを定義しています。
そのあと、bashをひらいて、その中でcとdの値を表示しようとすると、dの方は表示ができます。
次にexitコマンドでひらいたbashを閉じて元の場所に戻ってからcとdを表示すると、どちらも表示することができます。

このように、スコープが違うことが、性質として１つの違う点になります。


## コマンド

性質としての違いは述べましたが、もちろん使用するコマンドも違っているので、最後にそのご紹介をします。

### 環境変数の確認

環境変数は以下の２つのコマンドどちらでも確認ができます。

```
$ export
$ env
```

しかし、envでは値を入れていない環境変数は表示されません。

### 環境変数とシェル変数の確認

以下の２つのコマンドは、環境変数もシェル変数もすべて表示されます。

```
$ set
$ declare
```

#### 環境変数の定義

```
$ export a=b
```

以下のようにすると、aがすでにシェル変数の場合そのまま環境変数として定義でき、
もしそうでないなら、値は入れずに変数の定義だけ行うこともできます。

```
$ export a
```


### シェル変数の定義

```
$ a=b
$ declare a=b
```

以下のようにすれば、値は入れずに変数の定義だけ行うこともできます。

```
$ declare a
```

### 環境変数とシェル変数の値の表示

```
$ echo $a
```

また、以下のようにしても、環境変数の値を表示することができます。

```
$ printenv a
```

### 環境変数とシェル変数の削除

```
$ unset a
```

## 参考

- https://www.webzoit.net/hp/it/internet/homepage/env/cs/server/os/type/unix/linux/shell/kind/sh_bash/environment/
- https://qiita.com/kure/items/f76d8242b97280a247a1
- https://qiita.com/angel_p_57/items/480e3fd4552e52199835
- https://qiita.com/viola/items/606816827e2e62995194
- https://www.atmarkit.co.jp/ait/articles/1801/12/news015.html
エクセルトップ

# ■エクセル
## 通常関数
https://qiita.com/ogawa-to/items/b95defcc90a425fd427b
## ピボットテーブル
https://qiita.com/ogawa-to/items/9e216ad4dcf9276594d6


# ■VBA
## 基礎構文 
https://qiita.com/ogawa-to/items/534644d902ea921c4891

## セル
#### 操作 
https://qiita.com/ogawa-to/items/ef1b1b72e731581790bb
#### 書式設定
https://qiita.com/ogawa-to/items/b49b867bc1b511430d3a

## 関数
#### VBA 関数
https://qiita.com/ogawa-to/items/a2a8ea68b16208c5b43e
#### Windows API
https://qiita.com/ogawa-to/items/72239baf1dc94736734a

## デバッグ技術
https://qiita.com/ogawa-to/items/0fa2248c59d79c2e4f0b
## VBA固有オブジェクト
https://qiita.com/ogawa-to/items/414b0e99d62874e26561
## 図形(Shape)
https://qiita.com/ogawa-to/items/70a9085a7de4ccb7fd69
### テーブル
https://qiita.com/ogawa-to/items/3c05ab197af1cc1b948f
### オートフィルター
https://qiita.com/ogawa-to/items/daf5b79e28f99a825cc4
### ソート
https://qiita.com/ogawa-to/items/044c9883c180b8acf214

### 正規表現
https://qiita.com/ogawa-to/items/be3022591e3fb06b437f

# スキルアップ編
## VBA100本ノック
### 1 ~ 10問
https://qiita.com/ogawa-to/items/66c2bae3fc24886e9b23
### 11 ~ 20問
### 21 ~ 30問
### 31 ~ 40問
### 41 ~ 50問
### 51 ~ 60問
### 61 ~ 70問
### 71 ~ 80問
### 81 ~ 90問
### 91 ~ 100問
【エクセル】デバッグ技術

## ステップ実行
| コマンド | 動作 |
|:--|:--|
| F8  | 1行ずつ実行, メソッド呼び出しがある場合、<b>その内部へ潜る。</b>  |
| F8 + Shift  | 1行ずつ実行,メソッド呼び出しがある場合、<b>その内部はスキップする。</b>  |
| F8 + Ctrl + Shift  | 現在いるメソッドを抜け、呼び出し元メソッドの次の行から実行する。  |

## Debugオブジェクト
| メソッド | 動作 |
|:--|:--|
| Debug.Print  | イミディエイトウィンドウにログを出力できる。  |
| Debug.Assert (式) | 式がFalseの場合、ブレイクポイントを置かずとも該当行で中断される。  |
Alpine Linux で Noto Sans JP フォントを使う

Docker 環境で Alpine Linux の chromium を headless を使うとき、デフォルトでは日本語非対応の `Open Sans` フォントが使われてしまうため、日本語が豆腐になります。そこで Noto Sans CJK JP フォントをインストールすることで、日本語が正しく表示されるようになります。

```sh
# Chromium
apk add chromium

# Noto Sans
curl -o /tmp/NotoSansCJKjp-hinted.zip https://noto-website-2.storage.googleapis.com/pkgs/NotoSansCJKjp-hinted.zip
unzip -o -d /usr/share/fonts/noto /tmp/NotoSansCJKjp-hinted.zip

# Noto Serif
curl -o /tmp/NotoSerifCJKjp-hinted.zip https://noto-website-2.storage.googleapis.com/pkgs/NotoSerifCJKjp-hinted.zip
unzip -o -d /usr/share/fonts/noto /tmp/NotoSerifCJKjp-hinted.zip

# デフォルトだと root 以外がフォントを読めない
chmod 644 /usr/share/fonts/noto/*.otf

# 後述の設定ファイル
cp local.conf /etc/fonts/local.conf

# キャッシュ更新
fc-cache -fv

# 確認
fc-match "sans-serif"
fc-match "serif"
```

設定ファイル `local.conf`

```xml
<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
    <alias>
        <family>serif</family>
        <prefer>
            <family>Noto Serif CJK JP</family>
        </prefer>
    </alias>
    <alias>
        <family>sans-serif</family>
        <prefer>
            <family>Noto Sans CJK JP</family>
        </prefer>
    </alias>
</fontconfig>
```

`/etc/fonts/fonts.conf` → `/etc/fonts/conf.d/51-local.conf` → `/etc/fonts/local.conf` という経路で上記の XML ファイルが読み込まれるようだ。
WindowsでHomebrewを使いたい

## 概要
WindowsでHomebrewを使いたい。そこで、環境構築方法を調べてみました。

## 手順① : WSL・Linuxディストリビューションのインストール
HomebrewをWindowsで使うにはWSL(Windows Subsystem for Linux)が必要だそうなので、まずはそれをインストールします。  

1. Windowsのスタートメニューから「設定」→「アプリ」→画面右上の「プログラムと機能」の順でクリック。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556651/c33cdbb0-0fd0-cc5a-8b44-2009cf264b4a.png)

2. 「Windowsの機能の有効化または無効化」をクリック。
![キャプチャ2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556651/c7a764df-43dc-48b6-7a15-fbdafff4660e.png)  

3. 「Linux用Windowsサブシステム」にチェックを入れ、OKをクリック。
![キャプチャ3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556651/d43a9f8f-5dd9-06ed-b5cc-39d43b5a453f.png)

4. 再起動が必要なため、再起動する。
![キャプチャ4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556651/4c12418b-d0f9-ea5a-0ea5-2574ff18a376.png)

5. 再起動が完了したら、Microsoft StoreアプリよりWSL用にLinuxディストリビューション(今回はUbuntu)をインストールする。
![キャプ5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556651/b43ef93f-cf76-90b0-a51a-bd30100a4138.png)  

WSLとLinuxディストリビューションのインストールが完了したため、手順②に続きます。  

## 手順② : Linuxディストリビューション(Ubuntu)の初期設定  
次はUbuntuの初期設定をします。

1. 先ほどインストールしたUbuntuを起動する(処理が走るため数分待機)。
![キャプチャ7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556651/83b29e27-2168-e39e-495d-929eedd185a5.png)


2. 初回起動時は初期設定が必要なため、任意のユーザー名とパスワードを入力(パスワード入力は確認もあるため2回)し、設定する。
![キャプチャ9.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556651/a2998e4f-fc25-cd0a-71c6-4492b4d69e30.png)

これでUbuntuの初期設定は完了です。手順③に続きます。  

## 手順③ : Homebrewのインストール  

いよいよHomebrewのインストールです。

1. [Homebrewのサイト](https://brew.sh/index_ja)より、インストールするためのスクリプトをコピーし、Ubuntu上で実行する。途中でパスワードを聞かれるため、先ほどの初期設定で設定したパスワードを入力する。  

2. 途中で以下のような文章が表示されるため、リターンキーを押す。インストールが開始される。

    ```console
    Press RETURN to continue or any other key to abort  
    ```  

3. PATH環境変数への追加のため、以下のスクリプトを実行する。
    
    ```console
    test -d ~/.linuxbrew && eval $(~/.linuxbrew/bin/brew shellenv)
    test -d /home/linuxbrew/.linuxbrew && eval 
    $(/home/linuxbrew/.linuxbrew/bin/brew shellenv)
    test -r ~/.bash_profile && echo "eval \$($(brew --prefix)/bin/brew 
    shellenv)" >>~/.bash_profile
    echo "eval \$($(brew --prefix)/bin/brew shellenv)" >>~/.profile
   ```

4. 完了したら、以下のスクリプトを実行する。パッケージのインストールが行われる。  

    ```console
    brew install hello  
    ```

## 完了  

環境構築が完了しました！
CSSで文字に角度と奥行きをつける記述

最近、cssのレイアウト崩れに悩まされている毎日。
新しいcssやjQueryを見つけては、スゲーって興奮しています。
色んな実装を試してみたい今日この頃。

とりあえず、備忘録書いていきます。

　　

#文字を傾ける

```
.item {
 transform: rotate(-２０deg);
}
```

と記述します。
この場合、文字が **半時計** に回転します。
マイナスを取ると普通の **時計周り** に回転します。
　　



　
この**transformプロパティ**には色々な使い方があるみたいです。


他には

#奥行きを出す

```
.item {
 transform: perspective(150px) rotateX(45deg);
}
```
　　
この**perspective**と言うのが　**視点**　と言う意味で
もう一つの**rotate**と言うのが **回転** と言う意味になります。
最後に**X(エックス)軸**に回転と言うことで奥行きができます。
　　
　

数値を変えればまた違った角度になったりするので、
使う機会があれば追加実装してみたいと思います。
proxy環境からFlightRadar24へのフィード

#FlightRadar24
飛行機の位置情報を表示してくれる便利なサービス[FlightRadar24](https://www.flightradar24.com/)ですが、自分で飛行機からの電波を受信してサーバへフィードすると、サブスクリプションのプランがbusinessへアップグレードされます。

ラズパイとUSBチューナがあれば、手軽にフィード環境が構築できるのですが、ネットワークがproxy経由での接続だと若干調整が必要だったので、まとめてみます。

## Rapsberry Pi OSへのインストール
Raspberry Pi OSをインストールしておきます。特にGUIの環境は必要ないので、Raspberry Pi OS Lite版をインストールしました。
raspi-configでproxyの設定をした後、インストール用のスクリプトをダウンロードします。

### インストール用スクリプトの準備
```
wget https://repo-feed.flightradar24.com/install_fr24_rpi.sh
```

通常の環境だとスクリプトを実行すればよいのですが、proxy配下ではスクリプトを実行すると、apt-keyコマンドの実行でエラーになります。そこで、install_fr24_rpi.sh中のapt-keyにオプションを設定します。

```
pt-key adv --recv-key --keyserver pool.sks-keyservers.net ${KEY_ID} || \
     apt-key adv --recv-key --keyserver pgp.mit.edu ${KEY_ID}
```
を

```
apt-key adv --recv-key --keyserver pool.sks-keyservers.net --keyserver-options h
ttp-proxy=http://myproxy:port ${KEY_ID} || \
     apt-key adv --recv-key --keyserver pgp.mit.edu  --keyserver-options http-pr
oxy=http://myproxy:port ${KEY_ID}
```

に書き換えて実行します。これでfeedに必要なファイルがインストールされます。

### ユニットファイルの修正
/etc/systemd/system/fr24feed.serviceの[Service]に

```
Environment="http_proxy=http://myproxy:port"
Environment="https_proxy=http://myproxy:port"
```
を追加する。修正後には

```
systemctl daemon-reload
systemctl restart fr24feed
```
を実行。

### Firewallの修正
flightradar24のサーバとはUDP:8099で通信しているので、Firewallで許可する。



# 参考
* [ラズパイでflightradar24にFeed提供](https://qiita.com/mumian1014/items/f07f1146ad0c19548ab6)
XMC10をLinuxマシンに仕立てる（2021年版）

キーボードはその特殊な折りたたみ式というギミックのおかげでまあまあ使えるのだが、メモリーやドライブ容量があまりに少なくてWindows 10の更新もままならなくなったキングジムの「XMC10（PORTABOOK）」。ほとんど寝かしていたので断捨離してもよかったのだが、Linuxを入れればまだ使えるのではないかという思いがムクムクと湧いてきてしまったので悪あがきしてみることにした。

## 事前準備

#### ディストリビューションを選ぶ

まず最初にディストリビューションを選ぶ。情報を収集したところ、一部キーボードが入力できなくなるといった症状があることがわかった。対策はどれもDebianベースで進められているので、普通に考えればDebain系ということになる。

懐かしのRedHat系（2000年頃は使っていた）というのも考えたが、それほどLinuxに慣れていない身で情報の少ないディストリビューションに手を出すのもアレだし、最近はRaspberry Piを使う機会も少なからずあるのでDebianベースの方がまだ少しは慣れているだろう。情報量が多いのはデスクトップ系だとやはりUbuntuなので、Ubuntu系列で検討した。）

とはいえXMC10のグラフィックスやCPUパワーは今となってはかなり非力なので、フルなUbuntuではなくLubuntuやXubuntuといった軽量フレーバーを使うことを考えた。

#### バージョンを選択する

次にXMC10に入れるLinuxのバージョン。すでにXMC10を使い続けようというモチベーションのある人はもうそんなにいないのか、情報がそこそこネットに転がっているのは18.04LTSくらいで、20.04LTSの情報はほとんどない。ただまあ、入れるだけならなんとでもなるだろうと思って、LTSでは最新（2021年2月公開）の20.04.2でまずは試してみることにした。

## 行動開始

#### インストールを繰り返す

最初に起動してみたのはKubuntu 20.04.2。しかし何も考えずにUSBイメージを起動してみると、画面が真っ白になってしまった。しばらく見ていると、まだら模様がだんだんと表示され、それがまたゆっくりと消えていくという妙な症状である。放置しているうちに画面が消えたが、キーボードを押すと再び画面が真っ白になったので画面制御はしているような印象だ。

次にXubuntu 20.04.2のインストールイメージをUSBから起動。今度は「with Safe Graphics」を選択する。そうするとちゃんと画面が表示されてLinuxが起動した。ここでインストールしてみたが、まあ当然だろうがうまくいかない。KubuntuをUSBで起動したときと同じような症状で動かなかった。

本来はここでコンソールに切り替わるかとかセーフモード的な起動ができるのかを試すべきだったのかもしれないが、やらなかったので検証としては不満が残る結果となった。とはいえ、わざわざ動いている環境を動かない環境に戻すというのは利用者の選択肢としてはありえないかなぁというのが本音だ。

#### 20.04.1なら動くのでは？

明らかにグラフィックス系のせいでうまく動いていないので、おそらくはカーネルに問題がある。調べてみると20.04.2はカーネルのバージョンが5.6に上がっている。一方20.04.1まではカーネルのバージョンは5.4。

実はz80oolongさんが[公開](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwil8Pin0ILvAhXbA4gKHdmpA7UQFjAHegQICBAD&url=https%3A%2F%2Fgithub.com%2Fz80oolong%2Flinux-kernel-mainline%2Freleases&usg=AOvVaw07qTKHgngK1qZUWj8Bryk-)されているパッチ済みのカーネルは5.4系列だ。具体的には5.4.2までパッチ済みのカーネルを公開されている。以上を鑑みるとこういうことになる。20.04.1を入れれば動くし、カーネルのビルドとかしなくても「\」「|」「_」といったプログラミングやUNIXコマンドには必須なキーも使えるようになりそうだ。

## Xubuntu 20.04.1をインストール

というわけでXubuntu 20.04.1をインストールした。

インストール手順などについては記すまでもないので略す。カーネルのバージョンは5.4Genericだったので（確か）5.4.0ベースのパッチを入れた。具体的にはコンソールを起動し、以下の3つのファイルをインストール。

```
dpkg ｰi linux-headers-5.4.0-xmc10-001+_20200106_amd64.deb
dpkg -i linux-image-5.4.0-xmc10-001+_20200106_amd64.deb
dpkg -i linux-source-5.4.0-xmc10-001+_20200106_all.deb
```

これでキーボードの問題は解消し、Linux端末としてXMC10が復活した。その後パッケージの更新をして20.04.2相当になったが、カーネルは更新されないので問題なく使えている。しかし考えてみたら新しい方がよかったので、5.4.2版を入れたほうがよかったかもしれない。

#### その後の20.04.2

USBブートで20.04.2を起動して表示ができない状態にしておき、CTRL-ALT-F1などを押してコンソールに切り替えようとしたが切り替えられなかった。となると20.04.2を入れておいて、後からカーネルを入れ替えるという作戦は成り立たないかもしれない。
Oracleでヒント句をつける手順

ヒント句をつけたい、概要をざっくりと知りたいときに読める簡単な説明と手順を書きました。

##パフォーマンスチューニングとは

大量のデータを保持するシステムでは、バッチOR画面処理の中で使用しているSQLレスポンスが遅くなってしまい、バッチが終了しないOR画面上でボタン押下してもその後の結果が返ってこないということがあります。
こういった場合に限らず、パフォーマンスの悪いSQL（なかなか返ってこないSQL）のパフォーマンスを改善してあげることをパフォーマンスチューニングといいます。

今回はヒント句を追加してパフォーマンス改善しようというコンセプトで進めますが、パフォーマンスが悪化してしまった（OR元から悪い）場合の対処方法はヒント句をつけるだけではありませんので、そちらご了承ください。

##ヒント句とは

上記でヒント句をつける対応を取るとお話ししましたが。そもそもヒント句とは？というところです。
ヒント句とはOracleのオプティマイザが実行計画を作成する際にどのINDEXを使うか、結合しているテーブルをどういった順番で結合するかといった要素を指定してあげるものです。

ヒント句による指定しない場合（通常のSQLのまま）、Oracleが統計情報を元に最適な実行計画を選択してくれます。
しかし、複雑なSQL文となると突然古い統計情報を参照したり、新しい統計情報を参照してみたりと実行計画がぶれてしまうことがあります。
なので、決まってパフォーマンスが良い実行計画を参照するようにOracleに対して「この実行計画を選んでね」と指定してあげるのがヒント句です（実際にはヒント句を指定することで決まったINDEX・決まった表の結合順序等にすることで実行計画を固定してあげる）。

##手順

OracleDBおけるパフォーマンスチューニングは以下の手順で実施します。
1. 実行計画の取得
2. SQLが遅い原因分析
3. SQLにヒント句をつける

###実行計画の取得

実行計画を取得する方法は複数ありますが、私はSQLDeveloperでしか実行したことないので今回はそちらについて書きます。簡単です。explain pla forを用いた方法です。

```
explain plan for
SQL文をそのまま書く
/
SELECT * FROM TABLE(DBMS_XPLAN.DISPLAY())
/
```

↑を実行すると実行計画が返されます。

```
PLAN_TABLE_OUTPUT
SQL_ID XXXXXXXXXXXXX
--------------------
SQL文
Plan hash value: XXXXXXXXX

------------------------------------------------------------------------------------------------------
| Id  | Operation                            | Name          | Rows  | Bytes | Cost (%CPU)| Time     |
------------------------------------------------------------------------------------------------------
|   0 | SELECT STATEMENT                     |               |       |       |     1 (100)|          |
|   1 |  INLIST ITERATOR                     |               |       |       |            |          |
|   2 |   TABLE ACCESS BY INDEX ROWID BATCHED| XXXXXX |     1 |    50 |     1   (0)| 00:00:01 |
|   3 |    INDEX RANGE SCAN                  | XXXXXXX       |     2 |       |     1   (0)| 00:00:01 |
------------------------------------------------------------------------------------------------------
```
SQLIDとは1つのSQL文に対して振られるIDで、SQL文のうちどこか少しでも変わるとまた違うIDが振られます。
同じSQL文は何回実行しても同じSQLIDが振られます。
plan hash valueとは、実行計画に対して振られる値です。1つのSQLIDに対して複数のplan hash valueが存在することもあります。

次に実行計画を元にSQLがどうして遅いかを見ていきます。

###SQLが遅い原因分析

取得した実行計画を元にSQLがどうして遅くなったのかを見てあげます。
遅くなった原因は場合によって違いますが、2つ例を挙げてみます。

・表の結合順番が良くない
データ量の大きい表から先に結合してしまうと、テーブル全てをスキャンするのに時間を要してしまう
・INDEXを使用できていない
結果が早くなるINDEXが存在しているものの、そのINDEXを使用してあげられていない

###ヒント句の付け方

SQLが遅い原因を分析できたら、原因に対応したヒント句をつけます。

【書き方】
select /*+ LEADING (T1 T2) */* from テーブル名;

とういうようにSELECT句の後に、/*+ ヒント句*/を入れてあげます。
ヒント句の箇所は都度適したものを入れます。複数入れることも可能です。

ざっくりとした手順はこれだけです。簡単で、なんかちょっと可愛いですよね。以上です。ありがとうございました。
DOM要素をjQueryオブジェクトとして使いたい

jQueryオブジェクトをfor ofで回すと、1つ1つの要素がDOMとなってしまう
jQueryオブジェクトとして使いたい場合どうするかを記していく。

先に答えを書いておくと、$()のカッコ内にDOM要素を入れるだけ

```js
$(DOM要素)
```

## 実際にやってみた

例を上げると、こういう場合

```html
<div class="hoge">デルピエロ</div>
<div class="hoge">トッティ</div>
<div class="hoge">カモラネージ</div>
```

```js
let hoges = $('.hoge');
for (let hoge of hoges) {
	// hogeがjQuery要素ではなく、DOM要素となっている
}
```
hoge(hogesの各要素)をjQueryとして扱いたい場合どうすればよいか

## これでよい

```js
for (let hoge of hoges) {
	console.log($(hoge).text);
}
```
GitHub PagesでMarkdownの<details>内要素がパースされない

## 全て

- [Collapsible markdown inside `<details><summary>...</summary></details>` fails to render - GitHub Help / GitHub Pages - GitHub Support Community](https://github.community/t/10489)

- [Markdown Options | Jekyll • Simple, blog-aware, static sites](https://jekyllrb.com/docs/configuration/markdown/)

## 問題

GitHub Pagesを作成する際, [Jekyll](http://jekyllrb-ja.github.io/)によるMarkdownからのHTMLページ生成を行ったが`<details>`内要素がパースされなかった.


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278919/15fba167-9263-e7f3-0cb7-89c10283837e.png)

## なぜ

JekyllではHTML生成に[kramdown](https://github.com/gettalong/kramdown)が使われているが, 標準で`parse_block_html`が`false`になっているためパースされないのであった.

```md
<details><summary>test</summary>
```ruby
p "hello"
\```
</details>
```
(注: `\`はエスケープの為入れています.)

## 解決

ページ生成時のrootディレクトリに作成した`_config.yml`に

```yml:_config.yml
markdown: CommonMarkGhPages
```

を追記して解決.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278919/8debaa5e-6ba6-78e6-4b05-0da52155bcd2.png)

## 注意

```yml:_config.yml
markdown: kramdown
kramdown:
  parse_block_html: true
```

と記述すると, 1ページ内に複数`<details>`が存在した場合, バグる.

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278919/1cec7536-9770-9552-7888-1d43af902fe3.png)
そうだ、SQLの勉強をしよう18

#はじめに
Railsでマイグレーションファイルに記述していたことと似た内容でした。

##制約
テーブルを作成するときに、制約を指定することで、列ごとに入れることができる値に制約をかけることができます。

```sql:記述場所
CREATE TABLE テーブル名(
列名 型　制約の指定
)
```

制約の指定の種類をいつくか紹介します。

###NOT NULL制約
DEFAULTと一緒にを指定しておくことで、INSERT文で何も値を入力していなくてもエラーにならなくなります。

###UNIQUE制約
重複した値が入らないようにする。
###CHECK制約
```sql:例
CHECK(収入額 >= 0)
```
負の数が入らないようにする。
ビットとバイト

##ビットとバイト##
**・ビット（bit)**・・・情報の最小単位。表記はb 1ビットでは２通りの情報を持つ。

**バイト（bite)**・・・基本的にパソコンはこの単位を使用する。**1バイト＝８ビット**
・１バイト＝２５６通り（２^8)の情報を持つ。

○何故バイトで情報を表示するのか
ビットで表現してしまうとデータの表記が非常に長くなるので、パソコンは８ビットを一纏めにしたバイトを使用するのがデータ量の基本単位に。

##データの補助単位##

**・大きい単位**

1000bit=1KB(キロバイト）

1000KB＝１MB（メガバイト）

1000MB＝１GB（ギガバイト）

1000GB＝１TB（テラバイト）

大きい方から順に
**タ（T)イガ（G)ーマ（M)スク（K)**

**・小さい単位**

m（ミリ）＝10^-3

μ（マイクロ）＝10^-6

n（ナノ）＝10^-9

p（ピコ）＝10^-12

大きい方から順に
**ミ（m）クロ（μ）な（n）ピーコ（p）**

##参考文献##
キミタ式基本情報技術者　P104〜P107
他で使用予定のないメソッドをprivate extensionにして分ける

リファクタリングの一環で使えそうなことを、メモがてら残します。

### 例

```swift
let alertVC = UIAlertController(title: "select cell", message: "\(user["name"] as! String) \n \(user["atName"] as! String)", preferredStyle: .alert)
    alertVC.addAction(UIAlertAction(title: "OK", style: .default, handler: nil))
    self.present(alertVC, animated: true, completion: nil)
```
#### 問題点
- 他で使用予定が無いのに呼び出し可能
- 色々な条件でアラートを出したい場合、汎用性が無い


### private extensionにして分ける

```swift
private extension ViewController {
  //アラートを出す処理
  func showAlert(user: UserModel) { // UserModelというモデルがあると仮定
    let alertVC = UIAlertController(title: "select cell", message: user.alertText, preferredStyle: .alert)
    alertVC.addAction(UIAlertAction(title: "OK", style: .default, handler: nil))
    self.present(alertVC, animated: true, completion: nil)
  }
}
```

- private extensionにすれば、中の記述は全てprivate
- showAlert(user: user) のような形で呼び出し可能で、汎用性が増す
Visual Studio Codeのキャプション バーを表示する

# お前Windowsアプリケーションだろ？
一介のエディタごときが普通のユーティリティの分際で、OSの ``Look and Feel`` は守ったらどうだ。


# settings
* [ ``ファイル`` ] > [ ``ユーザー設定`` ] > [ ``設定`` ]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72257/07cf3bb1-5059-36e3-7e5b-ded6c4997dc7.png)
* [ ``ウィンドウ`` ] > [ ``Title Bar Style`` ]  
 『**native**』に変更
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72257/23e1544b-b5d9-b648-2ee7-85e281839857.png)

# before 👎🤬
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72257/7b62f190-812b-2dbb-ce0b-ea18ca36e97b.png)

# after 👍😄
これでこそWindows！
まぁClassicこそが至上ではあるものの、``キャプション バー`` にモノを配置する糞UIに比べたら断然まし。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72257/41c70ac4-a460-83f7-d2a0-b82751ed264a.png)


# (補足) 何故OSの ``Look and Feel`` を変えるのがNGか
* ``UWP`` の ``Look and Feel`` は糞(大前提) (UXが糞)
* 迂闊に変えるとOS共通の利便性は大抵損なわれる
   * 一例
      1. Photoshop (2018, 2020, 2021) は似非キャプションバー付近で右クリックによるコンテキスト メニューが出ない。
      2. Photoshop (2018, 2020, 2021) はウィンドウ上端でウィンドウ サイズを変えられない。
      3. Photoshop (2018, 2020, 2021) はウィンドウ上端で、最大化 ⇔ 最小化 が効かない。
      4. x-applはAeroSnapが効かない
      5. Google ChromeはTABとキャプション バーがコンフリクトしてウィンドウの操作性が低い  
         (firefoxなども同様)
      6. Micfosoft OfficeはGUIがめちゃくちゃすぎる。  
         (MDIでもSDIでもなく、ツッコミどころが多すぎて吐き気がする。)
* WindowsはこれまでWin32の、``アプリケーション アイコン`` + ``キャプション バー`` の ``Look and Feel`` にこそ魅力がある。それが維持できないなら、そもそもこのOSを使う意味がない。

しっかりしてくれよMicrosoft...
仏教に目覚めたキリストみたいなトンチンカンな行動は辞めてくれ。。。

# 関連記事
* [Visual Studio 2019のキャプション バーを表示する](https://qiita.com/libraplanet/items/2a47c0102aee86b68cb4)
今さら聞けないjQueryの書き出し

## まえがき
私はバックエンドエンジニアなので、フロント周りを書く時いつも書き出しを忘れてしまいます。
備忘録も兼ねて、Qiita初投稿にjQueryの初学者が疑問に思う部分について書きました。

## 基本的な書き方
```
$(function(){
    // ここに処理を書く
    console.log('Hello!');
});
```
## 正式な書き方

```
$(document).ready(function(){
    // ここに処理を書く
    console.log('Hello!');
});
```
## このように記述する理由
HTMLの読み込みが全て完了するのを待つために、readyメソッドを使用し、この外枠を記述する必要があります。そして、読み込みが完了すると、jQueryが正常に動作するようになります。

初学者の方は、おまじないだと思って記述をしていることが多いと思いますが、実はこんな理由があるのです。上記の書き方がメジャーになっているので、無理にreadyメソッドを使用して記述する必要はありません。省略系で十分です。
どのコンテナオーケストレーションが楽できる（種類編）　ネコンテナ2回

# コンテナオーケストレーションの選択
コンテナオーケストレーションというのは『コンテナを運用する基盤』です、コンテナだけでは箱の状況だけで何もできないため何らかのコンテナオーケストレーションを使うべきです。

コンテナオーケストレーションで主にできること
- アプリケーションの展開、
- スケーリング
- 管理

コンテナのオーケストレーションは数種類ありますが、一般的に覚えるのは下記3つ

## 覚えるコンテナオーケストレーション
1. Openshift
2. kubernetes
3. コンテナオーケストレーションなし

「なし」というのは学術的にはおかしいですが、実務的にはオーケストレーションを選択するとしたら上記3つから選択しましょう。

コンテナオーケストレーションといわれても専門家ならまだしも素人には何をいっているかわからないと思います。
そのため,イメージ重視で表を作成します。

|項番と間隔|パソコンでいうと|コンテナオーケストレーション|
| ---| --- | --- |
|１.使いづらい|OSインストール前のBIOS|コンテナオーケストレーションなし|
|２.玄人は使う|CLI(dos窓）|Kubernetes|
|３.これがいい|GUI|Openshift| 

左から順に表示して１BIOSに近いもの、２CLI操作画面、３GUI画面
![CPイメージ画像.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590346/5b55a82a-716f-7d33-5a7b-0ac0b585f4c8.png)

使う側からすれば、基本的にはGUI画面がいいです。
今現状のコンテナを始めたいという人の説明は１のコンテナプラットフォームなしの画面上で話をしているから、本当に、本当に、わかりにくい状態にあります。なるべく早くGUI画面のレベルから話がしたいです。

# 覚える必要がないもの
『docker swarm』もうほとんど使われないので、覚えないでください。docker composeとも違います。

## 1. Openshift
Openshiftは、Kubernetesにいろいろコンテナ開発におけるメリットを享受すること仕組みが追加されたものです。Openshift4はとても機能が豊富で使いやすいです。しかし2021年2月現在の問題点があるため使用されない傾向になっています。kuberetesに対して2割ぐらいの使用率です。

- 2021年2月時点問題点
  - 参考にするドキュメントが少ない。
  - Openshift3と情報が混ざってしまって、間違った方向に到達してしまう。
  - 最低環境を構成するのが難しいため、初期学習までたどり着けない。
  - 学習コストとランニングコストを考えた時に、ランニングコストしか考えない管理者の甘え。
     - Openshiftはkubernetesと違い運用コストが発生します。Openshiftはkubernetes（サーバ運用費）＋ライセンス費用が必要になります。
     - チーム等のグループで考えればKubernetesよりOpenshiftのほうが学習コストは低いです。
 
![コスト非.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590346/c80e8ffb-74c0-b7a4-8929-11c160ae2fa2.png)

## 2. kubernetes
コンテナオーケストレーションのデファクトスタンダードになります。略称はk8sになります。いろいろ学習方法はありますが、開発側はとても学習コストが高いです。運用側もクラウドのマネージドサービスを使わない場合は学習コストが高いです。minikubeを使えば、簡単に環境を触ることができることが利点です。

## 3. コンテナオーケストレーションなし
コンテナ使う人のほとんどが最初に触れるのがこれになります。

 - docker run
 - docker-compose
 - aws fargate
 - Cloud run

いろんなことが起きた時に手動対応をしないといけないことが多い状態です。最初はここから始めたいという人が多いです。ランニングコストは低く学習コストも低いですが、最終的なコンテナが受けるいろいろなメリットは少ない状態です。

# 最後に
人それぞれで楽なものは違います。私は楽がしたい、楽して成果を出してお金が欲しい。

- 非技術者の管理者が楽できるのは、コンテナオーケストレーションなし
- 運用者が楽できるのは、クラウドのマネージドコンテナオーケストレーション
- 開発者が楽できるのは、Openshift4
- 誰も幸せにならないのが、一度だけの開発でコンテナを導入すること
Sassの機能でネストが最初に紹介されるけどあまり使わない方が良いと思う

## はじめに

Sassの紹介って大抵最初の方に「**セレクターをネストして書けるので見通しが良くなる！コード量が減る！**」といった記述があるような気がします。
ですが、自分はネストして書かない方が良いと思っているため、理由とともに記事にしました。

## この記事で分かること

- クラス名を`&`でつないでネストして書くデメリット
    - 検索しづらい
- タグやクラス名をネストして書くデメリット
    - トランスパイルされた後の名前が分かりづらい
    - 詳細度が上がる


なお、プロパティのネストについてはこの記事では語りません。

## クラス名を`&`でつないでネストして書くデメリット

- 検索しづらい

シンプルながら、この点が大きなデメリットだと感じています。

説明の分かりやすさを重視して、以下のルールでコーディングをしている設定とします。

1. [MindBEMding](https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)の則ってクラス名をつけている
1. Block要素をルートにして、ElementやModifierは`&`でつないでネストする
1. ElementやModifierの数に制限は設けない

### 検索しづらい

以下のようなコードがあったとします。

```html
<div class="card">
  <img class="card__image" src="./image.jpg" alt=""/>
  <div class="card__body">
    <p class="card__body__title">カードのタイトル</p>
    <p class="card__body__description">カードの内容の説明文。</p>
  </div>
</div>
```

今回はカードのタイトルのスタイルを変えたくなりました。
そのため`.card__body__title`で検索してみたのですが、どこにも見当たりません。

何故か？scssファイルではこのように記述されていたからです。

```scss
.card {
  // なにかしらのスタイル
  &__image {
    // なにかしらのスタイル
  }
  &__body {
    // なにかしらのスタイル
    &__title {
      // なにかしらのスタイル
    }
    &__description {
      // なにかしらのスタイル
    }
  }
}
```

これじゃあヒットしませんよね。

かといって`.card`で検索するとそれはそれで大変です。
やたらめったら検索に引っかかってしまうのが想像つくことでしょう。

地味ですが結構なストレスを感じます。

## タグやクラス名をネストして書くデメリット

- トランスパイルされた後の名前が分かりづらい
- 詳細度が上がる

上記2つをデメリットとして挙げます。

### トランスパイルされた後の名前が分かりづらい

ネストが1回か2回ならともかく、かなり深くネストされたコードも見たことがあります。
また、`&`があったりなかったりが混ざると読み解くのがしんどくなります。

まずは以下を見てください。

```scss:some.scss
.block {
  &__element1 {
    element2 {
        &--modifier {
            color: blue;
        }
    }
  }
}
```

これがトランスパイルされると、こうです。

```css:some.css
.block__element1 element2--modifier {
  color: blue;
}
```

読めるには読めるんですが、不必要に脳みそを稼働をさせている気がします。

### 詳細度が上がる

SassのTips記事みたいなタイトルなのにCSS設計の話に片足を突っ込んでしまったかもしれません。

そもそもクラスにせよタグにせよ、ネストして書くと詳細度が上がります。
CSSが何故かおかしくなる原因のうち8割は「楽して書こうとして詳細度を上げてしまい、他の要素に影響を及ぼしていた。」です。 [^1]

詳細度は上げないに越したことはありません。
たしかにネストして書けば**今日のタイプ数**は減りますが、**来月修正する際のタイプ数**は増えます。

[^1]: n=1、私調べです。

## まとめ

- クラス名を`&`でつないでネストすると検索しづらくなり、**後から大変になりがち**
- タグやクラス名をネストすると、トランスパイル結果が見えづらくなるわ詳細度が上がるわで、**後から大変になりがち**
LilyGO T-Camera without HME280

[TTGO T-Camera ESP32 WROVER & PSRAM Camera Module ESP32-WROVER-B OV2640 Camera Module 0.96 OLED](https://www.amazon.co.jp/dp/B07PPR8Z2S)(HME280が実装されてると思い込んでた)を使うために
https://github.com/LilyGO/esp32-camera-bme280
をクローンし、ビルドしようとすると
HME280とcameraとで sensor_t というtypedefの構造体名がカブってビルドエラーになりました。
camera側を sensor_t→sensor_cam_t に置換して対応しました。

が、もっとスマートなやりかたがあるような。。。

手順は後日　記載します。
↓
↓
↓
以下、2021/02/25 17:00過ぎの追記

https://lang-ship.com/blog/work/ttgo-t-camera/#toc1
にスマートなやりかたが記載されてました。

```
#define sensor_t    sensor_t_
#include <Adafruit_BME280.h>
#undef sensor_t
```

さっすがー。

…と、基板をよく見ると、自分のT-CameraにはHME280は実装されてませんでした。シルクが印刷してあるだけ。。。ちゃんちゃんっ


次に、HME280を無効にしてビルドを通し、書き込むとOLEDに

```
Camera init Fail
```

のようなエラーが表示されました。
esp32-camera-bme280.ino 164行目付近を↓以下のように修正することでエラーを回避し、映像がWiFi経由で表示されるようになりました。

●変更前

```
config.frame_size = FRAMESIZE_UXGA;
config.jpeg_quality = 10;
config.fb_count = 2;
```

●変更後

```
config.frame_size = FRAMESIZE_SVGA;
config.jpeg_quality = 12;
config.fb_count = 1;
```
【Solidus】  入れ子構造の商品カテゴリー(taxon)を取得し、Awesome Nested Setのメソッドを使用する

#はじめに
Solidusで追加機能実装をする際、商品カテゴリーで採用されている入れ子構造を把握する必要があったため、紹介します。
入れ子構造は、ツリー構造をもとに設計されおり、ツリー(木)やルート(根)、リーフ(葉),ノード(節)などの言葉が出てきます。
<br>

#到達点
以下の2点を達成します

・solidusの商品カテゴリーで採用されている入れ子構造を理解する

・Gem　Awesome Nested Setで使用できるメソッドを理解する
<br>

#商品カテゴリーで採用されている入れ子構造
今回、商品カテゴリーは以下の通りです

```
Category
|--Bags
|--Mugs
|--Clothing
    |--Shirts
    |--T-Shirts

Brand
|--Chanel
|--Vuitton
```
一つ一つのツリーをSpree::Taxonomyモデルとし、
今回は、Category(taxonomy.id=1)とBrand(taxonomy.id=2)が該当します。
rootとも表現できます。

各ツリーのノードをSpree::Taxonモデルとし、
今回は、Category、Brandを含めそれ以下全てが該当します。
    
<br>
#Awesome Nested Setで使用できるメソッド
Soidusでは、Railsのカテゴリを階層で管理してくれるGem　Awesome Nested Set を実装しております。
追加実装で使用したメソッドを紹介します。

```erb


root:ツリートップ
 Spree::Taxon.roots
→ Category,Brand を取得


leaf:末端
 Category.leaves
→ Bags,Mugs,Shirts,T-Shirts　を取得　*Clothingは末端ではない


child:直近の子ノード
 Category.children
→ Bags,Mugs,Clothing  を取得        *Shirts,T-Shirtsは孫ノード


parent:直近の親ノード
 Bags.parent
→ Category を取得 

```
他にも以下のサイトで使用できるメソッドを確認できます。
https://github.com/collectiveidea/awesome_nested_set/wiki/Awesome-nested-set-cheat-sheet

#参考文献
[SQLアンチパターン](https://www.amazon.co.jp/SQL%E3%82%A2%E3%83%B3%E3%83%81%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3-Bill-Karwin/dp/4873115892) 
[SolidusでECサイトを作る際の方法と考え方](https://qiita.com/yuskamiya/items/32f383cb8d18ceb751d7)
swift カメラアプリ

■カメラアプリを作ります。

画面には
imageView
カメラ起動ボタン
share機能ボタン
で作ります。

始めに必要なデリゲートを書きます。

UINavigationControllerDelegate


UIImagePickerControllerDelegate
カメラアプリに必要
画像を取得する事ができます。

![スクリーンショット 2021-02-24 21.36.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/da1a0f74-d8dc-ca02-a461-eba07e8aa89c.png)



■カメラが使えるかどうかif文で判断する。

//カメラが使えるか
UIImageContoroller.isSourceTypeAvailabel(.camera)
これをif文で使う。

![スクリーンショット 2021-02-24 22.10.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/6aa0934b-4c6f-e9e8-ed6c-b652b97ef81b.png)



♪クラスのインスタンス化

```
 let imagePicker = UIImagePickerController()
```


♪写真の取得先を指定します。　

```
 imagePicker.sourceTyoe = .camera
```


♪デリゲートメソッドの通知先は自分でっせ

```
 imagePicker.delegate = self
```
♪カメラを表示

```
 present(imagePicker, animated:true, completion:nil)
```



■写真を撮り終えたら

デリゲートメソッド発動
didFinishがあれば対外何々が終わったら発動

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]){}

![スクリーンショット 2021-02-24 22.13.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/d3f44fd7-83da-35eb-b2da-7c49c0901639.png)


♪撮影した画像をpictureImageに渡す。

info[UIImagePickerController.InfoKey.originalImage]　画像を保存

as?UIImage　渡す先がimageなのでキャストして画像に変換

```
pictureImage.image = info[UIImagePickerController.InfoKey.originalImage] as!UIImage
```


♪カメラを閉じる

```
dismiss(animated: true, completion: nil)
```


■SNSにシェアボタン

撮った画像をSNSなどにシェアできるようにします。
UIActivityViewController()を使う

![スクリーンショット 2021-02-24 22.35.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/a323913f-da81-2713-4416-8443a9cc85b7.png)




♪imageをアンラップしている。　写真撮る前はnilになるので

```
if let ssImage = pictureImage.image{
```

♪配列化している。
本来は画像以外のデータもいれる。

```
let ssItems = [ssImage]
```

♪インスタンス化

```
let controller = UIActivityViewContoller(activityItems: ssItems,applicationActivities: nil)
```


♪ipadでアプリが落ちないよう

```
controller.popoverPresentationControleer?.sourceView = view
```

♪シェア画面表示

```
present(controller,animated:true, completion: nil)
```

全体画像

![スクリーンショット 2021-02-24 22.39.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/4ce8b1a9-f507-8fc7-3eae-f036c9526b95.png)

![スクリーンショット 2021-02-24 22.39.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/132d71b0-4a7f-04af-fea0-f431f41b88e9.png)

以上簡単にはなりますが初学者のアウトプットでした。
AlexaにWindows PCの電源を切ってもらおうと思ったらすごく苦労した話

__[こちらにSSHで電源コントロールする記事書きました](https://qiita.com/nlr_cmsp/items/9a451239dbe4cda99bcf)__

Alexa経由でIoTしたい人多いですよね。というかそれがほとんどですよね。俺もそうなので、Nature Remoを使って照明や空調のコントロールをしているんですが、どうせならPCの電源もAlexaでコントロールしたい。というか出来たらカッコいい！という事で何の知識もないのにチャレンジしました。1年前くらいに。今更だけど、案外苦労したので備忘録として残しておきます。

AlexaでPCの電源をコントロールする際、PCに電源が入ってない状態でAlexa経由でPCの電源を入れる場合、他のデバイスからWake on Lanを叩けないといけない訳で、この時点でラズパイの導入は確定な訳です。という訳でラズパイやそれに準じた何かを準備するのは前提です。

まずラズパイがAlexaのボイスコマンドを処理できるようにNode-REDをインストールします。[この辺](https://nodered.jp/docs/getting-started/raspberrypi)読みながらやりました。詳しくは覚えてません。
ですがこれだけだとAlexaからラズパイにボイスコマンドを送れないので、[Node-RED Alexa Home Skill Bridge](https://alexa-node-red.bm.hardill.me.uk/)を導入して、PCをオンオフ出来るデバイスとして登録します。あとAlexaアプリのNode-REDスキルを有効にします。詳しくは調べてください。
![alexa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533021/855b7dcc-0ad8-80af-d55f-653e5ec0e0da.png)

その後、Node-REDでAlexaにPCの電源をオンする時とオフにする時、それぞれの設定をします。
![名称未設定 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533021/9cda7185-3e2c-c2a7-877f-c998d436209b.png)

こんな感じです。
オンにした時はWoLを叩けばいいだけなんですが、問題はオフにするとき。脳内ではラズパイからWindowsにSSHログインしてShutdownコマンド実行すりゃ余裕やろ！くらいに思ってたんですが、これが全く上手くいかないので知識がないなりに考えました。考えたのが上の画像のオフにする際のアクションです。

Alexa→Node-RED→Pushbulletにシャットダウン用メッセージ送信→EventGhostでシャットダウン実行という非常に面倒くさい手順ですが、これで上手くいきました。PushbulletとEventGhostの連携の方法は色んな所で他の方が詳しく説明されているので省きます。

とりあえず、ラズパイからSSHでWindowsにログインしてShutdownコマンド実行できるで！って方がいたらご一報いただけると嬉しいです。Windows全然わからん。
SELinux有効化時のSSHポート変更

何度やっても覚えられずにググっているので覚書。

## SELinuxの設定を変更する

SELinuxのポリシーを変更するにはsemanageコマンドを使用します。
これはデフォルトでインストールされていない場合があるので、以下コマンドで導入します。

```sh
$ sudo yum install -y policycoreutils-python
```
導入した後、以下コマンドでTCPの22222番をssh_portに許可

```sh
$ sudo semanage port -a -t ssh_port_t -p tcp 22222
```
TCP の22222番が追加されたことを確認します

```sh
$ sudo semanage port -l| grep ssh
ssh_port_t                     tcp      22222, 22
```
確認できたら、以下コマンドでSELinuxを再起動します

```sh
$ systemctl restart sshd
```
以上です。

###参考文献
http://lovepeers.org/2014/11/21/centos7-sshd/
【Rails】既存のテーブルに関連付けを追加するには？

##解決したい問題

ユーザーと投稿を関連付けをしたく、postsテーブルにuser_idカラムを追加した。
しかし、別に新たなマイグレーションを実行するたびに、なぜかschema上で、user_idカラムが消えてしまう。

##最初は関連付けに関してあまり考えず進めていた

```db/migrate/20201115015429_add_user_id_to_posts.rb
class AddUserIdToPosts < ActiveRecord::Migration[6.0]
  def change
    def change
      add_column :posts, :user_id ,:integer
    end
  end
end
```

```app/models/post.rb
class Post < ApplicationRecord
  belongs_to :user

<!---some long code--!>
```

```app/models/user.rb
class User < ApplicationRecord
  has_many :posts

<!---some long code--!>
```

postsテーブルにuser_idカラムは追加しており、postモデルに`belongs_to :user`、
userモデルに`has_many :posts`の追加はしてある。

##`belongs_to :user`この宣言は、postsテーブル上の対応する外部キーカラムと整合している必要がある！
具体的にはどうするのか？

Railsガイドに下記の説明の記載を発見。

>カラムの種類としてreferences (belongs_to も可) を指定することができます。たとえば次のようになります。

>`$ rails generate migration AddUserRefToProducts user:references`

>上を実行すると以下が生成されます。
>
    class AddUserRefToProducts < ActiveRecord::Migration[5.0]
       def change
         add_reference :products, :user, foreign_key: true
       end
    end
>このマイグレーションを実行すると、user_idが作成され、適切なインデックスが追加されます。

`reference`カラムと`foreign_key`外部キーを追加することにより、postsテーブルに`user_id`が追加され、usersテーブルの`id`とつながる。

##既存のマイグレーションを書き換えてみる！

はじめにpostsテーブルを作った時のマイグレーションを修正してみた。

```db/migrate/20201111030002_create_posts.rb
class CreatePosts < ActiveRecord::Migration[6.0]
  def change
    create_table :posts do |t|
      t.string :title
      t.text :content
      t.datetime :start_time
      + t.references :user, foreign_key: true
      t.timestamps
    end
  end
end
```

何も起こらず、これではダメなよう...

##`add_reference`でやってみる

上記にあったように新しくマイグレーションを作成する。

```db/migrate/20210217101831_add_user_to_posts.rb
class AddUserToPosts < ActiveRecord::Migration[6.0]
  def change
    add_reference :posts, :user, foreign_key: true
  end
end
```

```db/schema.rb
ActiveRecord::Schema.define(version: 2021_02_17_101831) do

  enable_extension "plpgsql"

  create_table "posts", force: :cascade do |t|
    t.string "title"
    t.text "content"
    t.datetime "start_time"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
    + t.bigint "user_id"
    + t.index ["user_id"], name: "index_posts_on_user_id"
  end

  create_table "users", force: :cascade do |t|
    t.string "name"
    t.string "email"

  <!--some long code--!>
  
  end

  + add_foreign_key "posts", "users"
end
```

`+ t.bigint "user_id"`
`+ t.index ["user_id"], name: "index_posts_on_user_id"`
`+ add_foreign_key "posts", "users"`

マイグレーションを行なうと上記の3行が追記され、`user_id`も適応されている！
新たなマイグレーションで`user_id`が消えることもなくなった。