OmniAICreator/Qiita-1.07M huggingface dataset:
PHPでQRコードを作ってみた

今回は動的にサイトのURLを作成したかったので、PHPでQRコードを作成したみました。

結論から言いますと、全く難しくないです！！

読み取りもしっかりと行えます！

なので、肩の力を抜いてご覧ください。

それでは説明していきます！

まずはQRコードを作成するためのライブラリをダウンロードしてください。


```
compose require endroid/qr-code
```

後は下記の記述を参考にQRコードを作成します。

今回はコントローラーでQRコードを作成します。

```
<?php

namespace App\Http\Controllers;

use App\Models\Qr;
use Illuminate\Http\Request;
use Endroid\QrCode\Color\Color;
use Endroid\QrCode\Encoding\Encoding;
use Endroid\QrCode\ErrorCorrectionLevel\ErrorCorrectionLevelLow;
use Endroid\QrCode\QrCode;
use Endroid\QrCode\RoundBlockSizeMode\RoundBlockSizeModeMargin;
use Endroid\QrCode\Writer\PngWriter;

class QrCodeController extends Controller
{
    public function generate(Request $request) {
        $writer = new PngWriter();

        $origin_URL = 'https://www.example.com';

        // Create QR code
        $qrCode = QrCode::create($origin_URL)
            ->setEncoding(new Encoding('UTF-8'))
            ->setErrorCorrectionLevel(new ErrorCorrectionLevelLow())
            ->setSize(300)
            ->setMargin(10)
            ->setRoundBlockSizeMode(new RoundBlockSizeModeMargin())
            ->setForegroundColor(new Color(0, 0, 0))
            ->setBackgroundColor(new Color(255, 255, 255));

        // QRコードの出力
        $result = $writer->write($qrCode);
        header('Content-Type: '.$result->getMimeType());
        echo $result->getString();


        // // QRコードの画像ファイルを保存
        // $result->saveToFile(__DIR__.'/qrcode.png');

        // // QRコードのURL
        // $dataUri = $result->getDataUri();
    }
}

```

このようにしてQRコードを作成することができます！

実際にコントローラーを適用しているURLに移動すると下記のように表示されます。

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954754/68b7f255-33d7-bdac-fcc1-f070918dd285.png)

めちゃめちゃ簡単！

以上、「PHPでQRコードを作ってみた」でした！

Thank you for reading
MacのターミナルでExcelのプロセスを探す方法

# 環境

- Mac OS Catalina バージョン 10.15.7
- Microsoft Excel for Mac バージョン 16.46

# 探し方

ターミナルで以下のコマンドを放つ
``ps -efa | grep "Microsoft Excel"``

返ってきたPID（左から２番目、``awk '{print $2}'``とかをパイプで付ければすぐとれる）で``kill -9 [PID]``すれば殺せる。
【AWS】 Amazon CloudFront簡単まとめ（CDNの説明付き）

Amazon CloudFront
---
AWSのサービスの一つで、静的、動的なウェブコンテンツ（データ、動画、アプリケーションなど）の配信を高速化する、安全性の高さが魅力のサービスです。
有名なサービスですと、Amazon primeやHuluにも使用されています。
<br>

メリット
---
#####● 安全性が高い
HTTPS接続などフィールドレベルの暗号化ができ、機密データのセキュリティ強化ができます。

　　　　
#####● コストの削減
無料枠が設けられているほか、利用した分の料金のみが課せられるため余分な費用はかからない。
つまり、最低料金や一定額の料金のお支払いがありません。

　　
#####● 可用性の向上
DDoS対策やトラフィックの分散という点からサービスの可用性を向上させています。


※ ``DDoS（Distributed Denial of Service）``
　特定のネットワークやWebサービスを、意図的に利用できないようにする攻撃行為です。

※ ``トラフィック``
　通信回線やネットワーク上で送受信される信号、データ、その量や密度のことを指します。

※ ``可用性``
　一定時間のうち、システムを稼働可能な割合(%)を意味する「稼働率」で表現されます。

　　
#####● 高速な配信（低レイテンシー） / サーバの負荷軽減
CDNが組み込まれているため、ウェブコンテンツの高速な配信やサーバーの負荷軽減に繋がります。
エッジサーバを活用することで、HTTPリクエスト時に毎回サイトの作成元まで辿る必要が無くなるため、低レイテンシーでの素早いレスポンスができます。
この詳細については、次の題目で取り上げます。

※ ``レイテンシー``
　要求を出してから実際にデータが送られてくるまでに生じる、通信の遅延時間
<br>

</font>
CDN（Content Delivery Network）
---
ファイルをダウンロード配信するための技術です。
アクセス元から距離的に一番近い場所にあるサーバーを自動で選択し、コンテンツをダウンロードさせるということです。

（用語）
``オリジン（オリジンサーバ）``
　元のデータが入っているサーバを指します。

``エッジ（エッジサーバ）``
　データを代わりに配信してくれるサーバを指します。
　※ キャッシュサーバと呼ぶこともあるそうです。

``キャッシュ``
　（下図のストレージ部分に）Webサイトのコンテンツを保存することを指します。

 
<img width="700px" alt="[CDN.png]" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/942338/e1298c9f-87cc-0b07-ea57-36e031d2fa50.png">

####それでは、このCDNがどうしてメリットに繋がるのか考えてみます。

例えば、あるサイトを全世界に向けて公開していたとき、作成元（オリジン）が日本であるとします。この時同じ日本国内から閲覧されるのと、海外から閲覧されるのでは物理的な距離の違いから、通信によるレイテンシーが異なります。つまり、同じ日本国内から閲覧をするよりも、距離の離れた海外から閲覧をする方がレイテンシーが高く（遅延時間が長く）なります。

#####これを解決するのが、CDNの仕組みです。
1つ目のメリットは、``レイテンシーの軽減``です。
閲覧者（デバイス）とサイト（ネットワーク）の間にエッジサーバというものを設けます。
エッジには、初回は何もデータが入っていない状態です。しかし、初回にオリジンからデータを取得した際に、そのデータがエッジに保存されるようになっており、2回目以降は毎回オリジンからデータを取得する必要がなくなります。ただし、エッジ（ストレージ）にデータがあれば、その中から取得しますが、2回目以降の通信でも保存されていないデータであれば、オリジンから取得します。つまり、遠く離れたオリジンからデータを取得するよりも、世界各地にある距離の近いエッジ（ストレージ）からデータを取得するので、``レイテンシーの軽減``に繋がるという訳です。


　　
2つ目のメリットは、``負荷分散``です。
上記での説明内容と重複しますが、サイトの閲覧者全員がオリジンからデータを取得していた場合、アクセスが集中してしまいます。しかし、それぞれの閲覧者が一番近いエッジを活用することにより、オリジンへのアクセス集中を防ぐことができるため、システムの負荷分散へと繋がります。
結果的に、安定したサービスを供給することが可能となります。
<br>

終わり
---
CloudFrontについてのまとめを書くつもりが、CDNについての説明が長くなってしまいました...
普段利用しているネットの裏側が少し理解できて、個人的には興味が深まりました！
今回の記事は以上となります。
最後までご覧いただきまして、ありがとうございます。
また、もし内容に誤りなどがございましたら、ご指摘いただけますと幸いです。
Dockerで作成したLaravelで「bash: composer: command not found」と出たときの対処法

Dockerって環境構築が簡単に行えてすごく便利ですよね。

特にデータベースとかわざわざインストールしなくてもできてしまいますもんね。

そんなDockerで``composer``を使ってあるものをインストールしようとしたのですが、下記のようなエラーが起きました。

```
bash: composer: command not found
```

Dockerのコンテナ外では``composer``コマンドを打てるのですが、コンテナ内では打てませんでした。

結論から言いますと、Dockerのイメージをビルドするときにcomposerをインストールすれば解決します。

Dockerのphpを構築する``Dockerfile``で以下の記述を加えて下さい。

```
ENV COMPOSER_ALLOW_SUPERUSER 1
ENV COMPOSER_HOME /composer
ENV PATH $PATH:/composer/vendor/bin

RUN php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" \
  && php composer-setup.php \
  && php -r "unlink('composer-setup.php');" \
  && mv composer.phar /usr/local/bin/composer
```

一応僕の``Dockerfile``のコードを載せておきますね。

```
FROM php:7.4-fpm-buster
COPY ./backend /work
COPY ./docker/php/php.ini /usr/local/etc/php/php.ini
LABEL maintainer="ucan-lab <info@u-can.tech>"

SHELL ["/bin/bash", "-oeux", "pipefail", "-c"]

# tinker(psysh)
ARG PSYSH_DIR=/usr/local/share/psysh
ARG PSYSH_PHP_MANUAL=$PSYSH_DIR/php_manual.sqlite
ARG PHP_MANUAL_URL=http://psysh.org/manual/ja/php_manual.sqlite

# timezone
ARG TZ=Asia/Tokyo

# composer
ENV COMPOSER_ALLOW_SUPERUSER 1
ENV COMPOSER_HOME /composer
ENV PATH $PATH:/composer/vendor/bin

RUN apt-get update && \
  apt-get -y install git unzip libzip-dev libicu-dev libonig-dev libjpeg-dev libpng-dev libfreetype6-dev && \
  apt-get clean && \
  rm -rf /var/lib/apt/lists/* && \
  docker-php-ext-install intl pdo_mysql zip bcmath && \
  docker-php-ext-configure gd --with-freetype=/usr/include/ --with-jpeg=/usr/include/ && \
  docker-php-ext-install gd

# Install Composer
RUN php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" \
  && php composer-setup.php \
  && php -r "unlink('composer-setup.php');" \
  && mv composer.phar /usr/local/bin/composer

# Install Node.js
RUN curl -sL https://deb.nodesource.com/setup_6.x | bash - \
    && apt-get update \
    && apt-get install -y nodejs

RUN cp /usr/share/zoneinfo/Asia/Tokyo /etc/localtime
RUN apt-get install -y cron
```

こんな感じでコンテナ内に入り、``composer -V``と打ちバージョンが返ってくれば成功です。

以上、「Dockerで作成したLaravelで「bash: composer: command not found」と出たときの対処法」でした！

Thank you for reading
[Oracle Cloud] 落とし穴。予約済みのprivateIPについて (主にDBCS)

#はじめに
OCIに限らず、システム設計をする上でIPアドレスの割り振り設計は重要です
特にcloud等のサービスを使用する場合は、
制約がないか、つまりはサービスとして予約アドレスが存在しないかを確認する必要があります
本書ではOCIにおける予約アドレスの情報を整理します

#VCN仕様
https://speakerdeck.com/ocise/ociji-shu-zi-liao-jia-xiang-kuraudonetutowaku-vcn-gai-yao
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567355/752e8ffd-9318-c572-fd14-4992c3757f0e.png)
ここでのポイントは、

- VCNのサイズは、/30 ～ /16
- VCNで利用不可なのは、
  + 169.254.0.0/16
  + __192.168.16.16/28 ※これが重要、詳細後述__

続いてサブネット、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/567355/62f6dc0b-022a-0e04-2b90-50da5662d4e6.png)
ここでのポイント、

- IPアドレスのうち、最初の2つと最後の一つは予約済みで使用不可
  + 10.0.0.0/24の場合は、
    * 10.0.0.0
    * __10.0.0.1__
    * 10.0.0.255

~~頭とおしりはネットワークアドレス、ブロードキャストアドレスなので、
予約アドレスというよりは当たり前なのでは...と思いますが、~~
大事なのは最初から二番目（ネットワークアドレスを除けば先頭）が利用不可ということです
因みに二番目のアドレスはGWに使われています

# DBCS仕様
さて、本題はここからです
結論としては既に上記にて触れましたが、
__192.168.16.16/28__
という極めて利用シーンの多そうなアドレス帯が使用できないということです

...ところが実機を確認すると
アドレスのレンジが上記と若干異なります
実際にDBCSのインスタンスにsshログインし、
ifconfigを打ってみます

```
[opc@dbhp1128 ~]$ ifconfig -a
ens3: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 9000
        inet 10.50.0.2  netmask 255.255.255.0  broadcast 10.50.0.255
        ether 02:00:17:00:12:7f  txqueuelen 1000  (Ethernet)
        RX packets 886788979  bytes 1232258229040 (1.1 TiB)
        RX errors 0  dropped 0  overruns 0  frame 0
        TX packets 1137775390  bytes 3280516030839 (2.9 TiB)
        TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0

ens4: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 9000
        inet 192.168.16.18  netmask 255.255.255.0  broadcast 192.168.16.255
        ether 02:00:17:00:12:81  txqueuelen 1000  (Ethernet)
        RX packets 0  bytes 0 (0.0 B)
        RX errors 0  dropped 0  overruns 0  frame 0
        TX packets 8078  bytes 1913720 (1.8 MiB)
        TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0

lo: flags=73<UP,LOOPBACK,RUNNING>  mtu 65536
        inet 127.0.0.1  netmask 255.0.0.0
        loop  txqueuelen 0  (Local Loopback)
        RX packets 111933085  bytes 562376766864 (523.7 GiB)
        RX errors 0  dropped 0  overruns 0  frame 0
        TX packets 111933085  bytes 562376766864 (523.7 GiB)
        TX errors 0  dropped 0 overruns 0  carrier 0  collisions 0

[opc@dbhp1128 ~]$
```

10.50.0.2 
は通常通りアサインしたアドレス、
...で、問題なのは、
192.168.16.18
ネットマスクが、
255.255.255.0
となっています
__/24 になっている!!???__

因みにルートテーブルは下記の通り、

```
[opc@dbhp1128 ~]$ netstat -rn
Kernel IP routing table
Destination     Gateway         Genmask         Flags   MSS Window  irtt Iface
0.0.0.0         10.50.0.1       0.0.0.0         UG        0 0          0 ens3
10.50.0.0       0.0.0.0         255.255.255.0   U         0 0          0 ens3
169.254.0.0     0.0.0.0         255.255.0.0     U         0 0          0 ens3
192.168.16.0    0.0.0.0         255.255.255.0   U         0 0          0 ens4
[opc@dbhp1128 ~]$
```

```
[opc@dbhp1128 ~]$ cat /etc/redhat-release
Red Hat Enterprise Linux Server release 7.5 (Maipo)
[opc@dbhp1128 ~]$
```

やはり見間違いではなく、/24
しかも 192.168.16.0/24 なんてメジャーなレンジ、
Oracle Cloud内に限らず、
例えばVPN越しに接続したオンプレ環境と
バッティングする可能性は大いにあると言えます

ありがとうございました
Nginx で phpMyAdmin の URLを変更する方法

Nginx で動いているサーバーで、

https://example.com/phpmyadmin
で phpMyAdmin にアクセスできる時に、
https://example.com/secret
で phpMyAdmin にアクセスできるようにする方法です。

https://example.com/phpmyadmin の設定ファイル

```text
        location  ^~ /phpmyadmin {
                root /usr/share;
                index index.html index.htm index.php;

                location ~ \.php$ {
                        include snippets/fastcgi-php.conf;
                        fastcgi_pass unix:/run/php/php7.4-fpm.sock;
                        }
                }
```

https://example.com/secret の設定ファイル

```text
        location /secret {
                alias /usr/share/phpmyadmin;
                index index.html index.htm index.php;

                location ~ \.php$ {
                        include snippets/fastcgi-php.conf;
                        fastcgi_pass unix:/run/php/php7.4-fpm.sock;
                        fastcgi_param SCRIPT_FILENAME $request_filename;
                        }
                }
```
svn のタイムアウト時間（http-timeout）を指定してもなぜか反映されない症状

# 概要

環境

* windows 10
* svn version 1.14.1
* TortoiseSVN 1.14.1, Build 29085

# 症状

デフォルトだとSVNは1時間でタイムアウトしてしまう。
現在のプロジェクトだと足りないので時間を伸ばすことにする。

* 右クリックメニュー
* → TortoiseSVN
* → 設定
* → 「全般」タブ
* → 「Subversionの設定ファイル」の「編集」
* → 開いたテキストに追加

```
[global]
http-timeout = 36000
```

36,000秒（10時間）に変更するも1時間でタイムアウトしてしまう。


# 解決法

Subversionの設定ファイルがあるフォルダを開く。
デフォルトだとここ。
`C:\Users\username\AppData\Roaming\Subversion`

`servers`ファイルを開いて、設定を記入。

```
[global]
http-timeout = 36000
```

ちゃんと反映された！
wget web clone 便利オプション

ただのメモです。DL時サイトに迷惑がかからないように絶対にwaitを入れましょう。
説明用に簡単にコメントを入れてあります。

```
wget -w 3 --random-wait \ DL-wait 絶対必須
	 -e robots=off \ -e robots=off
	 -t 2 \ リトライ回数の上限を指定 (0 は無制限).
	 -nc \ 存在しているファイルをダウンロードで上書きしない
	 -c \ 部分的にダウンロードしたファイルの続きから始める
	 --show-progress \ どのモードでも進捗バーを表示する
	 -T 2 \ 全てのタイムアウトを SECONDS 秒に設定す
	 --http-user=USER \ http ユーザ名として USER を使う
	 --http-password=PASS \ http パスワードとして PASS を使う
	 -E \ HTML/CSS 文書は適切な拡張子で保存する
	 -r \ 再帰ダウンロードを行う
	 -l 2 \ 再帰時の階層の最大の深さを NUMBER に設定する (0 で無制限)
	 -k \ HTML や CSS 中のリンクをローカルを指すように変更する
	 -K \ リンク変換前のファイルを .orig として保存する
	 -p \ HTML を表示するのに必要な全ての画像等も取得する
	 -D \ ダウンロードするドメインをコンマ区切りで指定する
	 -H \ 再帰中に別のホストもダウンロード対象にする
	 WEB-URL
```

```
-w 3 --random-wait
```
これは絶対に必須です。大量のアクセスはサーバに迷惑をかけてしまうので
-k,-K　このオプションはお好みで使用してください。-Kオプションで.origにした元ファイルと変更後ファイルの入れ替え方法はわかりません。なので-Kはいらないかも。
下記は私が実際に使用しているときのコマンドです。BASIC認証ありの場合こうしてます。

```
wget -w 3 --random-wait  -e robots=off -t 2 -nc -c --show-progress -T 5 --http-user=USER --http-password=PASS [URL] -E -r -l 0 -p -k -H -D ドメイン1,ドメイン２
```

オレオレ認証しているサーバの場合は
```
--no-check-certificate
```
このオプションをつけてくれと表示されました。適宜付け足してください。
no-follow 属性に関しては回避方法がよくわかりません。
robots=offでは意味がないようです。html内リンクにno-follow 属性がある場合はDLできませんでした。
React 入門 (#2) ～Babel＆JSX～

#１，Babelとは
![2021-03-14_14h24_31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/04695def-887c-6ddf-619e-5888d868cf84.png)

ES6以降のスクリプトを、ES2015基準のスクリプトにトランスパイルする機能です。

下記のタグをheadタグに記述すれば準備完了です。

```javascript:index.html
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
```
[Babelリンク](https://babeljs.io/setup#installation)

#２，JSXを使う理由
Reactはマークアップとロジックを両方含む疎結合の「**コンポーネント**」という単位で構成されます。
「**コンポーネント**」は、次回説明します。
そこで活躍するのが、**JSX**（「**JavaScript XML**」の略）です。
Reactのコンポーネント内で、マークアップ言語を記述するためのXML風の構文です。

#３、ソースコードを記述
前回からの続きになります。
まず、**index.html**の準備です。
![code6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/7b67fe8c-05ec-4831-dd61-ce6a43d64e9d.png)

index.jsに移動して記述します。
![code7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/ee70edbb-cddd-820d-456e-23b93c6ac0bc.png)

**toUpperCase()**は、すべて大文字にするメソッドです。

#４，ブラウザ表示
![2021-03-14_21h51_55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654025/b6d83228-de69-463e-9ea8-8dd7f8a9285b.png)
リストが登場していますね。

#次回は、
コンポーネントについて扱っていきます。
[次回はここへ](https://qiita.com/iwasaki-hub/items/ef4e41f9f862a10c4c93)
Strong Parameters

#はじめに

Strong Parametersに少しつまずいたので、今後のためにメモ。

Strong Parametersとは、リクエストパラメータを受け取る際に、想定通りのパラメータかをチェックするもの。

```rb
params.require(:user).permit(:name, :email)
```
このように使われます。

#意味合い


```rb
params.require(:user)
```
この部分で、受け取るパラメータを指定し、

```rb
.permit(:name, :email)
```
この部分で、パラメータから取り出しを許可するカラムを指定しています。


#まとめ
上述の例では、Userモデルから取り出せるのは、名前とメールアドレスということになり、それ以外は取り出せないようにすることで、セキュリティを担保しています。

想定外の属性を、登録・更新させたくない場合に使用します。
React入門　環境構築（for mac）(nodebrew)


まず、Homebrewをインストールします。
Homebrew公式サイト[https://brew.sh/index_ja]

```:公式から引用
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
$ brew -v
#バージョンが出ればインストールできています。
```

Homebrewを使って、nodebrewをインストール

```
$ brew install nodebrew
$ nodebrew -v
#バージョンが出ればインストールできています。
```

```
$ nodebrew install-binary stable 
```
`stable`は安定バージョンです。
`latest`は最新バージョンです。
今回は安定バージョンを使用しています。

```
$ nodebrew ls
v14.16.0

current: v14.16.0
``` 
`current:` は使用しているバージョンです

```
$ nodebrew use （バージョン）
```
`nodebrew ls`実行し、反映されていたら大丈夫です。

`$ vi ~/.bash_profile`でしたの行を追加

```
export PATH=$HOME/.nodebrew/current/bin:$PATH
```

`$ node -v`と`$ npm -v`でバージョンが出たら完了です。

```
$ npx create-react-app ファイル名
$ cd ファイル名
$ yarn start #起動コマンド
```
これで開発環境完成です。
「x分前にコミット」されたような最新pandocを，Windows 10に，万難を排して入れる！

# YAMLキー`nocite`が，`--biblatex`・`--natbib`オプションと一緒には使えない？

ことの発端は，とある書類の作成用に，要旨付き参考文献表PDFを作ろうと思ったことである。pandoc markdownを使ってそうした文献表PDFを生成するには，YAMLセクションの`nocite`キーに，書誌情報ファイル（私の場合は`.bib`ファイル）のキーを`@` mentionしていく。詳しいやり方は，[pandocのMANUAL該当箇所](https://pandoc.org/MANUAL.html#including-uncited-items-in-the-bibliography)を読まれたい。

しかし，現在の安定版のpandocでは，PDF生成時にbiblatexあるいはnatbibで文献を処理させるように設定すると，せっかくYAMLに書いた`nocite`が無視されてしまう。しかし，文献の体裁は，どうしてもbiblatexで処理しないと提出に値するものにならない（[こんな仕上がり](https://tex.stackexchange.com/q/587237/169454)にしたい）。そのため，[3年以上前に他の方が始めたもののほとんど放置状態にあったissue](https://github.com/jgm/pandoc/issues/4585)に重ねて，biblatexあるいはnatbibを使っていても`nocite`が正しく使えるようにしてほしいとお願いした。すると，作者が[早速対応してくださった](https://github.com/jgm/pandoc/commit/3622097da360ab83112eb26b4f6231488d747a95)。

# さて，最新ほやほやpandocをインストールするにはどうすればいいの？

まずは，pandocの[MANUALの該当ページ](https://pandoc.org/installing.html#getting-the-pandoc-source-code)を見る。今回は，任意のディレクトリに，`git clone`でソースをダウンロードした。

```bash
git clone https://github.com/jgm/pandoc
cd pandoc
```

問題はここからである。[stackというプログラムでpandocをインストールせよ](https://pandoc.org/installing.html#quick-stack-method)とのことなので，[Windows 64bit版のインストーラ](https://get.haskellstack.org/stable/windows-x86_64-installer.exe)でstackをインストールしてから，Command PromptなりWindows PowerShellなりで，下記を実行する。

```bash
stack setup
stack install
```

作業は順調に進むかに見えた。しかし，暗雲は立ち込めるものである。x509-validationというプログラム（なんですか，これ？）のインストールのところで，インストールが止まってしまう。エラーメッセージは`<stderr>: commitAndReleaseBuffer: invalid argument (invalid character)`。`stderr`...$\text{Standard Error}$ですかっ？！Rは動かしてませんよ！統計（まだ）かけてません！初めて見るえらあめっせーじなので，***無視して***再度`stack install`を叩く（普通無視しないと思います。良識のある読者諸賢は，検索なさるべきです）。すると，1回目の`stack install`でインストールされていなかったプログラムが，するするとインストールされる。1度目のときは`Progress: x/129`くらいあったものが，2度・3度と繰り返していくうちに`Progress: x/6`にまで減った（ええ，それくらいエラーメッセージを無視し続けたということですよ）。しかし，ついに`Progress`の数は，6から減らなくなった。エラーメッセージは変わらない：`<stderr>: commitAndReleaseBuffer: invalid argument (invalid character)`...

# WindowsのCommand Prompt/Windows PowerShellの文字コードを変えれば，インストールは無事終了

`<stderr>: commitAndReleaseBuffer: invalid argument (invalid character)`で検索すると，[WindowsのCommand Promptの文字コードを一時的に変えればインストールできる](https://haskell.jp/blog/posts/2017/windows-gotchas.html)という記事を見つけた。紹介されている方法は，Windows PowerShellでも出来る。実に簡単で

```bash
chcp 65001
```

これだけである。反応は特になし。強いて言えば，画面の文字が小さくなった。このコマンドを打ってから，再度`stack install`を叩く。これで，出来立てのpandocのインストールは済んだ。最後に，

```bash
chcp 932
```

として，[WindowsのCommand Prompt/Windows PowerShellの文字コードを戻す](https://haskell.jp/blog/posts/2017/windows-gotchas.html)のが良いようだ。

# インストールは落着したが

これで難関は突破した。あとは日ごろの不勉強を取り返して論文を読み，例の書類を期限内に提出するだけである汗

まだまだ，紆余曲折に終わりはない。
CentOS で SSD を追加する。

## SSDとは
HDDに代わる高速なストレージです。
連続読み込みや書き出しも速いのですが、IOPSがずば抜けて高いことが特徴です。

## 今回使用するSSD：NVMe SSD
PCI接続のSSDです。従来のSATA接続に比べて高速です。

## マウント手順
1. ディスクを確認する。
2. fdiskでパーティションテーブルとパーティションを作る
3. xfsでフォーマットする。
4. マウントの設定を行う

rootで作業してください（sudoを付ける）。また、気を付けて作業してください。最悪の場合ディスクが吹っ飛びます。

### 1. ディスクの確認
```sh
cd /dev
ls nvme*
nvme0 nvme0n1
```
nvme0n1がディスクになりますね。

### 2. パーティション作成
詳しくはヘルプを参考にしてください。

```sh
fdisk /dev/nvme0n1
g
n
p
あとはデフォルトのままで作成しました。（全ディスク容量を使うようになっているハズ）
```
### 3. xfsでフォーマット
```sh
mkfs -t xfs /dev/nvme0n1p1
```

### 4. マウント
設定を/etc/fstabの末尾に追加します。

```
/dev/nvme0n1p1 /tmp    xfs    defaults    0 0
```
再起動でもいいですが、したくない場合は以下のコマンドで今すぐマウントしましょう。（サーバは起動が遅い）

```
mount -a
```

あとは、適当にベンチ取ってみて、ちゃんと性能が出ているかを確認したら終了です。
Ubuntu20.04デスクトップ を使って開発してみたい

## はじめに…
初めての投稿です。おかしなところあるかもしれませんが、ご容赦ください。
間違っている情報は教えていただけると嬉しいです。

## やりたい事
iPad のRDPアプリ(M社製)を使ってUbuntuへログイン
Eclipse開いてJava開発をしながらスタバでドヤってみたい

## やった事
通常通りVirualBoxにUbuntu20.04デスクトップ を構築
UbuntuのIP固定(CentOSばかりやってたからUbuntuの変更方法新鮮でした。)
コンフィグ作成(ファイル名はたぶん何でも良い)
[参考にさせていただいた記事](https://qiita.com/zen3/items/757f96cbe522a9ad397d)

```yaml:/etc/netplan/99_config.yaml
network:
  version: 2
  renderer: networkd
  ethernets:
    デバイス名:
      dhcp4: false
      dhcp6: false
      addresses: [設定したいIP/24]
      gateway4: 自宅のGateWay
      nameservers:
        addresses: [192.168.1.1, 8.8.8.8]
```
そしてネットワーク設定の反映
この時点でコンソールからではなく、ターミナルソフトからsshで操作を行っている場合にはじかれるのでご注意を(設定したIPアドレスで再ログインしてください。)

```
sudo netplan apply
```

## xrdpとGNOEMデスクトップのインストール
以下でxrdpとgnomeをインストール(デスクトップ版はもうデフォルトで入っていたりしますが、なぜかM社製のアプリからログインしようとすると真っ暗で全く動かないため入れてます。わかる方いたら教えて欲しいです…)

```
sudo apt install ubuntu-gnome-desktop xrdp
```

このあとはsystemctlコマンドで永続化したりとかしますがこの辺りは環境によるかもしれません。(私の環境ではインストール後は勝手に永続化されてました。)

## Eclipse環境の用意
[参考にさせていただいた記事](http://serverarekore.blogspot.com/2020/04/ubuntu-desktop-2004eclipse-2020-03.html)
まずJavaをインストールします。

```
sudo apt install -y openjdk-11-jdk
```

インストール終わったら、

```shell:2021年3月現在
cd /適当なディレクトリ

sudo wget http://ftp.jaist.ac.jp/pub/eclipse/technology/epp/downloads/release/2020-03/R/eclipse-java-2020-03-R-linux-gtk-x86_64.tar.gz

sudo tar xvfz eclipse-java-2020-03-R-linux-gtk-x86_64.tar.gz

cat << EOF | sudo tee /usr/share/applications/eclipse.desktop
#!/usr/bin/env xdg-open
[Desktop Entry]
Version=1.0
Type=Application
Terminal=false
Exec=/適当なディレクトリ/eclipse/eclipse
Name=eclipse
Categories=Development;
Icon=/適当なディレクトリ/eclipse/icon.xpm
EOF
```

Java入れて、eclipseダウンロードして、アプリケーション設定をしただけの簡単な作業です。これで、リモデしたあとアプリケーションにeclipseがあれば成功です。


## ログイン後にこんなんでた…
[参考にさせていただいたURL](http://aimingoff.way-nifty.com/blog/2017/06/xrdp-4be6.html)

カラーマネジメントが云々かんぬん…
ただ私の環境だと、参考情報記載のようにキャンセルができずログアウトかシャットダウンしかできなかったので、とりあえず情報を参考にしルールファイルを作成しサーバ再起動。

でなくなったからOKなのかな？とりあえずはこれで運用していきます。

## 参考にさせていただいた情報
[IPアドレスの固定設定](https://qiita.com/zen3/items/757f96cbe522a9ad397d)
[Ubuntu Eclipseの設定](http://serverarekore.blogspot.com/2020/04/ubuntu-desktop-2004eclipse-2020-03.html)
[カラープロファイル](http://aimingoff.way-nifty.com/blog/2017/06/xrdp-4be6.html)
Phalcon4にバージョンアップしたあとにDBの更新系が動かなくなったら

過去にPhalcon4にバージョンアップしたときにModel周りの更新がうまく行かなくなったことがありました。
この問題に当たってから時間が経ってしまったので実際の動作を忘れてしまいましたがこの辺気にすると良いよ程度で書いておきます。

# 概要

Phalconを4にバージョンアップした。
参照系は動くけど、更新がなんかされない。saveメソッドはtrueが返ってくる。

# 対応１ - ModelのkeepSnapshotsまたはuseDynamicUpdateを有効にする。

Phalcon3系まではModelのデータを取得したあとに何かデータが更新されれば、過去のデータと照らし合わせて更新されるような形が取られてました。

しかし4系からはkeepSnapshotsというオプションを有効にしないと過去のスナップショットが保持されず、更新がされません。

```php
class User extends Model
{
    public function initialize()
    {
        $this->keepSnapshots(true);
    }
}
```

`useDynamicUpdate`でもこの`keepSnapshots`のオプションは有効になるので、以前のバージョンから`useDynamicUpdate`を利用している場合は影響はないでしょう。

# 対応２ - リレーションのreusableオプションを有効にする

リレーション先のデータを更新しようとする際にはreusableオプションを有効にしてないとデータの更新がされません。

```php
$this->hasMany('id', UserPost::class, 'user_id', [
  'alias' => 'posts',
  'reusable'   => true, // ←これ
]);
```

ついでに、`resusable`を有効にしてないと毎回リレーション先データを取ってきてしまうのでデフォルトで有効にしておいてほしいですね。。。

また、3系では以下のようにデータが更新できました。

```php
$user = User::find(1);
$user->userCard->token = $token;
$user->save();
```

しかし、4.0や4.1.0では更新されません。
この件に関しては以下のissueを立てました。
内部のコードを見るとわかりますが、リレーション先がdirtyかどうかをチェックしてないようです。

https://github.com/phalcon/cphalcon/issues/15148
n進数〜2,8,10,16進数〜

n進数とはなにか！
いくつになったら数字が上がりますよ！の合図です👍

n進数にはいくつか種類があります。

#①２進数
ここで表されるのは、０か１です。これを機械では最小単位の１ビットと言います。
0,1となったら、桁が上がります。
0▶1▶10▶11▶１00▶101▶110▶111▶1000▶1001▶1010▶1111と続いていきます👌
基本的に0か1で桁が上がっていきます👍

#②８進数
0から７まで来たら桁が上がります。
0▶1▶2▶3▶4▶5▶６▶７▶１０▶１１▶１２▶１３▶１４▶１５▶１６▶１７▶２０のように続いていきます。

#③16進数
こちらは
0から9から９以降の２桁がないためローマ字を挟んでFから桁が上がります。
(0-F)▶（10-1F）▶（20-F2）となります👍


またこれらには基本となる数があり、２進数なら２、８進数なら８、１６進数なら１６がそれぞれ基数となります。
それぞれ、その数字を基数として倍に増えていきます。
２進数:１▶２▶４▶６▶８▶10
8進数：1▶8▶64▶512▶4096▶32768
10進数：１▶10▶100▶1000▶10000
16進数：1▶16▶256▶4096▶65536
となります👍
Vim Adventures攻略法 レベル3

## レベル3のポイント
[Vim Adventures](https://vim-adventures.com/)のレベル3では`B`モーション、`x`と`X`コマンドを入手します。`X`コマンドは`x`コマンドを入手すると使えるようになっています。vimのカーソル移動の流儀と一文字の削除に慣れることが学習目的です。

| キー | 効果 |
|:-:|---|
| B | カーソル位置より前にあるWORD(*)の先頭にカーソルを移動する |
| x | カーソル位置の一文字を削除する |
| X | カーソル位置の左となりの一文字を削除する |
(*) WORDとは空白で区切られる文字列のことで記号類も含めて連続した文字列を1つもの見なします。小文字の`w`、`e`、`b`が扱うwordも文字列なのですが、文字・数字・下線(_)を1つの連続した文字列と見なし、下線以外の記号類は連続していても別の文字列として扱う点が違います。下記の囲みを見ると違いが分かりやすいかと。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696922/7246a706-1988-7bb8-8d78-dc6dd0793643.png)

## レベル3開始時点で使えるようになっているキー 
下記キーボードはマップの好きな場所で`:keyboard`と入力すると表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696922/3f68534c-d59e-ddd3-63be-83f0b9ced23b.png)


## レベル3の攻略手順
`B`キーは周りに何も障害物もなく簡単に入手できます。赤枠赤字のセルの文字は削除したいようですが、まだ`X`や`x`コマンドがないので先に進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696922/c1c04062-dab2-27d1-b896-59698bd0c771.png)

一番下の行に`x`コマンドが見えています。文字列が不連続で、所々、文字列の先頭や末尾に岩があるので、`w`と`e`モーションを上手く使いながら`x`コマンドのあるところまで移動します。画面右上に秒数が出ていますが、 制限時間の30秒をカウントダウンしています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696922/ca8c8b54-fcad-f5b7-4c76-12fa96031b16.png)

無事`x`コマンドを入手できて、制限時間の30秒のカウントダウンが終わると黒い帽子のキャラクターの手前のセルに戻されるので、赤枠赤字のセルの文字を削除します。全て削除が終わるとレベル1で素通りしてきた宝箱の鍵とピンクの髪のキャラが出現します。宝箱を開けて戻ってきて欲しいと言われるので宝箱に向かいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696922/3ea6dabf-9050-17c8-5dd4-5248237b1dd3.png)

レベル1の宝箱の位置まで戻ると、`!`のセルで`B`モーションを使って`WORDS`の先頭`W`まで移動し、宝箱を開けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696922/f8b46907-7c14-9a25-f044-88b37ee1918c.png)

宝箱を開けると中身はロウソクで、周囲が真っ暗になってしまいます。`e`モーションを使って岩の障害物を越え、先ほど進んだ場所まで戻ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696922/f2bb9c8c-dee9-5e3e-eda6-0a964dae5ddb.png)

元来た場所まで戻ると青い髪のキャラがいるので、そのセルに到着するとレベル3がクリアです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696922/3a87aecb-2a77-9019-9fbb-783422da0da4.png)

[目次へ](https://qiita.com/mailstop/items/284f2a1300369b693f45)
[レベル2へ](https://qiita.com/mailstop/items/427e249feb8c51d4dff2)
[レベル4へ](https://qiita.com/mailstop/items/45ba38707f1baf164c6f)
【AWS】GPUインスタンスを利用するためには

## 背景

AWS EC2インスタンスを起動するのは、チュートリアルや当サイトの記事、ブログ等々で簡単に行なえます。
しかし、GPUインスタンスクラスはデフォルトでは起動できないようになっており、そのために躓きました。
その際の対処について、ここに記しておきます。

先人たちの知恵をお借りするなどして解決できたことを、この場をお借りして感謝するとともに、大変恐縮ですが**自分のメモ**として、こちらへまとめておきます。

## 環境

(本番)
- AWS EC2 (Amazon Linux 2)
- Putty 0.74- AWS EC2 (Amazon Linux 2)


# 1.現象 
GPUインスタンス（g4dn.xlarge など）が起動できない。

> G4dn インスタンスは、機械学習推論やグラフィックを大量に使用するワークロードを高速化するために設計されています。


# 2.原因
マネジメントコンソールの EC2 において、画面左のサイドメニュー[制限]で確認できる「All G instances のオンデマンドを実行中」の "現在の制限" 欄が **0 vCPU** となっているため。


# 3.対処

この "現在の制限" を **0→n** へ変更する申請を行ないます。
　

画面左のサイドメニューより、[制限]をクリックします。

画面上部の検索窓に「G」と入力し検索すると、以下のように対象がある程度絞られます。

![AWS_EC2_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/902793/25291e2a-8b2b-a446-b364-225a41f14477.png)

　

このうち、「All G instances のオンデマンドを実行中」を見付けて、ラジオボタンをONします。
画面右上の[制限緩和のリクエスト]ボタンをクリックします。

画面が遷移し、英語の画面が表示されます。

![AWS_EC2_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/902793/009f7554-9235-9b12-b3c3-a275a79e09cd.png)

　

画面上部、中央の「Service limit inclease」のラジオボタンがONとなっていること、Case Detail欄で「EC2インスタンス」が選択されていることを確認し、画面下部の「Requests」欄へスクロールします。

※このとき、画面右上のリージョン名は「グローバル」となっていますが、間違いではありません。（「グローバル」から変更できません。）

![AWS_EC2_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/902793/b396abcc-4b2e-5fc7-2b82-2f562427c25c.png)

　

requests欄は、以下の設定とします。

**リージョン名**：　プルダウンから「アジアパシフィック（東京）」を選択

**プライマリインスタンスタイプ**：　プルダウンから「All G instances」（GPUを利用できるインスタンスタイプ）を選択します。

**New limit value**：　任意　　※当記事での説明では「8」とします。

　

画面最下部までスクロールし、[Submit]ボタンをクリックします。

※「Case description」欄は未記入で問題ありません。

![AWS_EC2_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/902793/b087e480-7df1-2df3-3568-468120d8ccc9.png)


AWS側で受け付けたことを示すメールが届きます。

![AWS_EC2_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/902793/2878f4e4-31dc-f647-1939-e070f7d26505.png)


・1通目：
『内部レビューして承認するまで待ってて～』
というような内容。

![AWS_EC2_07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/902793/fb193011-e317-2bb2-2d1e-58a9d32e98e4.png)

・2通目：
『内部レビューして承認されたから、制限解除したよ～』
『30分ほどで使えるようになるからねぇ～』
というような内容。

私のケースでは、この２通のメールの間は約10分でした！
そして、使えるようになるまで30分とありますため、おやつ🍰＆飲み物☕で、しばし休憩しましょう。

　
あとは、いつも通りの手順で、[インスタンスの起動]からインスタンスを起動するだけです。

途中で、"Gクラス" を選択することをお忘れなく。



---
#### (編集後記)

どのクラスのインスタンスも即座に起動できるものと思っていましたが、制限がかかっているとは露知らず。
この制限に気付くまでに思わぬ時間を費やしてしまいました。

制限緩和の申請から実際に利用可能（インスタンス起動可能）となるまでは、申請のタイミングや申請の混み具体で多少変動するかと思います。
利用したいときにすぐに利用可能とならない場合が考えられますので、利用が想定された場合はお早めに申請しておくことをオススメいたします。


皆様のご参考になれば幸いです。
【Ruby】ARC114 A問題 解法メモ

AtcoderRegularContest114のA問題の解法メモです。

自分のようなこれからエンジニアになる人間でも納得できる簡単な考え方がひらめいたので残します。

公式の解説のように全探索しました。
50までの素数[2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47]15コを掛け合わせて作れる整数2**15コのうち、すべてのXiが最小公約数1にならない値の最小値が答えになります。

```ruby

# ARC114
# A
require 'prime'
N = gets.to_i
X = gets.split.map &:to_i

# 50までの数字のうち素数のみをprimeに格納（全部で15コ）
prime = []
Prime.each(50){|i| prime<<i}

# 上記15コの素数のうち、掛け合わせて作れるすべての値をpprimeに格納
pprime = []
1.upto(15) do |i|
  combi = prime.combination(i).to_a
  combi.each do |j|
    pprime << j.inject(:*)
  end
end
pprime.sort!

# pprimeに格納されている整数のうち、Xすべてと最小公約数が1にならない最小値がanswer
ans = 0
pprime.each do |i|
  if X.all?{|e| e.gcd(i) != 1}
    ans = i
    break
  end
end

puts ans
```
AWSのcloud9で「rails test:integration」ができない問題の対処

初歩的な問題だとは思いますが、備忘録として、
また、同じところで躓くどなたかのお役に立てればと思って書いていきます。

・　状況
⇒　rails on tutorial 5章 5.3.3 リスト5-33にてcloud9
   を用いての、統合テストとして、rails test:integrationを実行。
   しかし、"assert_template has been extracted to a gem. To continue using it, add `gem 'rails-controller-testing'` to your Gemfile." のエラーメッセージが登場。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1040076/6fd4e011-0692-dae3-910c-8da69d8ad04e.png)


・　対処方法
1. sample_appのGemfileを開く
２. エラーメッセージの記載の通り、gem 'rails-controller-testing'　を書き加える
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1040076/2c8b62e8-4bff-deb1-81c7-90a76d16f8d4.png)

３. bundle installをする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1040076/51305326-960b-afa1-6668-3e9b92fc4659.png)

4. rails test:integrationをする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1040076/eebd5255-18ba-b0b7-a7cd-ad581891971e.png)

以上になります。ありがとうございます。
【初心者必見】zsh環境でaliasを導入する

# aliasとは
>
エイリアス 【 alias 】
偽名、別名、通称などの意味を持つ英単語。 ITの分野では、ファイルなどの実体を 別の名前で参照するためのシンボル といった意味で使われることが多い。

`git push origin master`などよく使うコマンドに`gpom`のような短縮コマンドを登録すること！
タイポが減ってめっちゃ便利機能！


#1 google chromeのURL欄に`~/`を入力
![スクリーンショット 2021-03-15 12.28.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/750557/e2ef9e69-e398-e399-596b-c669693c2175.png)



ホームディレクトリの一覧から、`.zshrc`を探し、テキストエディタで開く。（google chromeのディレクトリをテキストエディタにドラックすれば、簡単に.zshrcを編集することができます！）

#２.zshrcを編集する
今回はrailsでよく使うコマンドのエイリアスを作成する

```
# Rails Command
alias rs='rails s'
alias rs4='rails s -p 4000'
alias rc='rails c'
alias cre='rake db:create'
alias mig='rake db:migrate'
alias rol='rake db:rollback'
alias seed='rake db:seed'
alias drop='rake db:drop'
alias rr='rake routes'
alias be='bundle exec'
alias bi='bundle install'

```

これで、ローカル環境のターミナル上で`rs`と打てば、`rails s`が実行される！！
JIRA ストーリ自動作成

MacOS上でJIRAからボタンでストーリ作成　　issue 作成したので、
ちょこちょこ詰まったとこを中心にメモります。

## 実現すること
- Mac上でJIRAより、issue=ストーリ作成ができること　ConfuluenceからJIRA課題を起票する。


## 動作環境について

- macOS Mojave 
- FireFox　　Chromeだとできないおそらく社内設定のため


１．さっそくJIRAConfuluenceより作成ボタンおす。
２．｛｝と入力しその間に以下を入力。
３．お終い。

テスト方法
ボタンを押す。反応しない場合は、htmlがおかしいため削除しつつ最低限の実装しつつたしかめながら行う。

```terminal:JIRA

<div style="margin-top:1.0rem; margin-bottom:2.0rem;">
  <a id="create-jira" class="create-jira external-link"
      style="margin:0;" href="#" rel="nofollow" target="_blank">
    <button id="request-btn-group"
        class="aui-button aui-button-primary">ストーリ作成ボタン！</button></a>
</div>
<script type="text/javascript">
(function() {
  // url
  // [準備] > [URL] の手順で取得した URL を設定します。
  var baseUrl = 'http://XXXXXXXXXX/CreateIssueDetails!init.jspa';

  // project・・変数を自分で確認し設定すること仮XXXX
  var project = '?pid=XXXX';

  // issue・・変数を自分で確認し設定すること仮XXXX
  var issue = '&issuetype=XXXX';

  // priority
  var priority = '&priority=3';

  // duedate
  // この例では起票日から7日後をデフォルトの期限としています。
   //  var duedate = '&duedate=';
    // var dt = new Date();
    // dt.setDate(dt.getDate() + 7);
    // duedate += (dt.getFullYear() + '/' + (dt.getMonth() + 1) + '/' + dt.getDate());

  // desc
  // 改行コードも encodeURIComponent で囲えばデフォルト値に含めることができます。★★★
  //var desc = '&description=' +'メモ' + encodeURIComponent('T/O') ;
//  var desc = '&description=' + encodeURIComponent('改行の文字コードは\nです');

var desc = '&description=' + encodeURIComponent('＜ユーザストーリ＞ \n【その仕事のユーザー】として、\n【そのタスクの内容】したい\n なぜなら、【そのタスクをする理由】からだ\n');

  // summary
  // 要約はわざと空にしてあります。
  // 要約を空にしておくことで、課題作成時に入力不足エラーが発生し、
  // すでに入力された他の値をテンプレートとして利用できます。
  var summary = '&summary=';

  // assignee
  // デフォルトの担当者を設定したい場合は、encodeURIComponent でユーザーIDを囲って指定。
  var assignee = '&assignee='+encodeURIComponent('admin');;

  // reporter
  // Confluence を使用していて、ユーザーが JIRA と一元管理されている場合のみ使用可能。
  var username = $('#user-menu-link').data('username');
  var reporter = '&reporter=' + encodeURIComponent(username);

  // link
  $('.create-jira').attr('href', baseUrl + project + issue + priority + summary + assignee + reporter + desc);
})();
</script>
```

### 以上（執筆３０分）
n乗の相加平均≧相乗平均を「視覚的に」理解する。

#はじめに
ヨビノリさんの[「相加相乗平均の関係」を視覚的に理解する！](https://youtu.be/bzkmtsC1cuE)という動画が人気みたいなので僕も別のを考えてみました。
#相加平均≧相乗平均とは？
任意の非負の実数$V_1,V_2$に対して
$$
\frac{V_1+V_2}{2} \geq \sqrt{V_1V_2}, (1)
$$
が必ず成り立つという不思議な定理です。
#数学的な説明
簡単です。$V_1,V_2 \geq 0$なので、(1)式の両辺は非負です。従って、両辺を二乗しても大小関係は変わりませんから、両辺を２乗して
$$
\frac{\left (V_1+V_2 \right)^2}{4} \geq V_1V_2
$$
を得ますが、これを計算して整理すると
$$
(V_1-V_2)^2 \geq 0
$$
という必ず成立する式になるので、(1)式は必ず成り立つことが分かります。
#視覚的な説明
![相加平均.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199087/85a60639-cb3b-8732-1cc5-ece3a8ccef2b.jpeg)
まず任意の非負の実数$C\geq0$に対して、
$$
V_1 + V_2 = 2C
$$
というグラフを描きます（図の赤い直線）。次に
$$
V_1V_2=C^2
$$
というグラフを描きます（図の青い曲線）。この２つの曲線は$V_1=V_2=C$のところで接します。なぜなら
$$
\frac{C+C}{2} = C = \sqrt{C^2}
$$
だからです。次に$V_1'\neq V_2', V_1' + V_2'=2C$である$V'_1,V'_2$を考えます。また$\sqrt{V_1'V_2''}=C$になるような$V_2''$を考えます。明らかに$V_2''>V_2'$なので$\sqrt{V_1'V_2''} \geq \sqrt{V_1'V_2'}$なので
$$
C= \frac{V_1' +V_2'}{2} = \sqrt{V_1'V_2''} \geq \sqrt{V_1'V_2'}
$$
だということが分かります。これで相加平均≧相乗平均が説明できました。
#3乗の場合
この視覚的な説明のよいところは簡単にn乗の場合に拡張できることです。$n=3$の場合を考えてみましょう。
![相加平均2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199087/47952a7e-b1f8-d865-0590-97a59f49acb3.jpeg)
$V_1+V_2+V_3=3C$が赤い四角で囲まれた平面、$V_1V_2V_3=C^3$が青い曲線で囲まれた曲面です。両者が接するのは$V_1=V_2=V_3=C$です（緑の点）。「青い曲線で囲まれた曲面」は「赤い四角で囲まれた平面」よりも「手前」（座標原点が無い側の空間）に属しています。これさえ解ればあとは全く同じ議論が使えます。
$V_1'+V_2'+V_3'=3C$になる$V_1',V_2',V_3'$に対し$V_1'V_2'V_3''=C^3$となるような$V_3''$を考えたら、$(V_1',V_2',V_3'')$は$(V_1',V_2',V_3')$より「手前」にあるので$V_3''>V_3'$でなくてはなりません。従って
$$
C = \frac{V_1'+V_2'+V_3'}{3} = \left (V_1' V_2' V_3'' \right) ^{1/3} \geq \left (V_1' V_2' V_3' \right) ^{1/3}
$$
となって$n=3$の時の相加平均≧相乗平均が証明出来ました。

#n乗の場合
$n\geq4$については絵を描くことはできませんが、一般に
「**$\sum_{i=1}^n V_i = nC$という超平面Aと$\prod_{i=1}^n V_i =C^n$という超曲面Bは$V_i=C$で接する**」
という事実と
「**超曲面B上の点は超平面A上の点より必ず原点から遠い位置にある**」
という事実さえ認識できれば、
$$
nC = \sum_{i=1}^n V'_i 
$$

および
$$
C^n＝\left (\prod_{i=1}^{n-1} V_i' \right) V_n''
$$
であれば
$$
V_n'' \geq V_n'
$$
となるので
$$
C= \frac{\sum_i V_i'}{n} = \left \[ \left( \prod_{i=1}^{n-1} V_i' \right)V_n'' \right \]^\frac{1}{n} \geq  \left \[  \left (\prod_{i=1}^n V_i'\right) \right \]^\frac{1}{n}
$$
であることが言えて$n$乗の時の相加平均≧相乗平均が「視覚的に」説明できます。
#おわりに
n乗の場合の相加平均≧相乗平均を「視覚的に」説明してみました。
[Unity]ECS(0.17.0) 子の要素に指定のIComponentData（それ以外も可能）が含まれているか 

Unity v.2020.2
Entity v.0.17.0

なんやかんや新しくなったら検索阻害防止のため、予告なく削除します。

＜重要＞
・PrefabのGameobjectからEntityへ変換されると
　ChidとかLinkedEntityGroupが勝手につけられて関連性が持たれるようです。

デバッグ機能で確認。（公式ドキュメントとか知りませんが動きます）
EntityManagerの拡張メソッドにしました。

こんなやり方で取れるよっていう参考程度に。
（どうせみんないなくなる）

例えばEntityのLODのマテリアルをまとめて変更したいときとか。

コードは以下の通りです。

```EntityManagerExtends.cs

    using Unity.Entities;
    public static class EntityManagerExtends
    {
        public static Entity FindChild<T>(this in EntityManager manager, in Entity t)
        {
            if (!manager.HasComponent<LinkedEntityGroup>(t)) return Entity.Null;
            foreach (var linkentity in manager.GetBuffer<LinkedEntityGroup>(t))
                if (manager.HasComponent<T>(linkentity.Value)) return linkentity.Value;
            return Entity.Null;
        }
        public static Entity[] FindChildAll<T>(this in EntityManager manager, in Entity t)
        {
            using (var entites = new Unity.Collections.NativeList<Entity>(Unity.Collections.Allocator.Temp))
            {
                if (!manager.HasComponent<LinkedEntityGroup>(t)) return new Entity[0];
                var linkGroupList = manager.GetBuffer<LinkedEntityGroup>(t);
                foreach (var linkentity in linkGroupList) if (manager.HasComponent<T>(linkentity.Value)) entites.Add(linkentity.Value);
                return entites.ToArray();
            }
        }
    }

```

```HowToUse.cs
 var entities = EntityManager.FindChildAll<Unity.Rendering.RenderMesh>(targetEntity);
 if (entities.Length > 0) Debug.Log("Hit!");
 else Debug.Log("Nothing");
```
rails6でのjQueryの導入について

rails5とrails6では、jQueryの導入の仕方が違うらしく
苦戦したので、rails6での導入手順を記録に残したいと思います。

そもそも、jqueryはJavaScriptを簡易的に記述できるライブラリです。
rails5では、jquery-railsというGemを利用して導入しました。

### バージョン
・Ruby 2.6.5
・Rails 6.0.0

### jQueryをインストール

```
% yarn add jquery
```
今回は、Webpackerで管理します。
管理する際はyarnコマンドを使用してインストールします。
コンパイルする方法はいろいろあるそうですが、Webpackerを使用するのが簡単とのことで
この方法を行いました。

### 設定ファイルを書き換え

webpackの設定ファイルで、jQueryを管理下に追加するための記述をします。


config/webpack/environment.js

```js
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
  })
)

module.exports = environment
```

### jQueryを呼び出し
application.jsでjQueryを呼び出す記述を加えます。


app/javascript/packs/application.js

```js
// 省略

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require('jquery')

// 省略
```
これで導入は完了です。
Docker環境構築後にVS Codeで「The git repository at 'Appディレクトリ' has too many active changes, only a subset of Git features will be enabled.」に見舞われる

# 環境
Ruby on Rails 6.0.3
ruby 2.6.3
MacOS Catalina 10.15.7

# 困ったこと
ローカルでVS CodeでDockerのコンテナ作りをしていたら、VS CodeのメニューバーのSource Control（編集したファイルの変更前後を表示してくれるナイスなやつ）が`5k+`になって、そのうちgitが壊れました。

それからというもの画面右下に下記メッセージが表示されるようになりました。

The git repository at 'Appディレクトリ' has too many active changes, only a subset of Git features will be enabled.

（意訳：gitリポジトリの変更が多すぎるから、一部のgit機能しか使えなくなってるよ。）

![スクリーンショット 2021-03-15 11.03.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645077/cc9aac82-fae0-570e-dbf7-7d789faa3c10.png)

そして、左のメニューバーの編集したファイルの差異を示してくれる箇所が時計マークでワークしなくなり、左下にgitのブランチ名を表示してくれなくなりました。。。VS codeを再起動しても変わらずです。

![スクリーンショット 2021-03-15 11.54.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645077/05d3fdc9-c7f2-0cb0-045d-791e6cef3b2a.png)

実はこの問題に見舞われるのは2度目なのですが、1度目どう解決したかメモしておらず（[LaravelのプロジェクトをGitHubにアップするのに試行錯誤した話](https://qiita.com/kakudaisuke/items/80d3f9736c6f8b6a5e94#2-1-vscode%E3%81%A7%E3%81%AE%E5%A4%B1%E6%95%97)）、ネットにもあまり情報がなく困り果てており、もうこのアプリではVS Codeのこの機能は諦めて全てターミナルでgit statusして凌ぐか...と思っていた矢先、弊社の最強先輩陣が助けてくれました。

# 解決
**vendor/bundleを.gitignoreに含めてコミットしたら直りました！**

このディレクトリはbundleをinstallする場所。
Dockerの環境構築した時に、5k以上のファイルがここにインストールされてしまったのかなと推察しております。

too many changes（変更が多すぎる）ということで怒られているので、.gitignoreが適切に設定されているかを疑うのがいいのかもしれません。

先輩方（@yuuu @yuka）の方向に足を向けて寝られません。
動画下の余白を消したい！

#症状
videoタグで動画を表示する時に、
動画の下に余白が生まれることがあります。

「そんな余白を消したい！！」

という時の対処法です。


##対処法
1. videoタグの親要素に`line-height: 100%;`を指定
2. videoタグの親要素に`display:flex;`、`align-items: end;`を指定

1の方法は下記の記事から引用させていただきました。
・[動画に謎の余白やマージン！削除する方法（HTML / CSS）](https://daryoshi.com/blog_post_0000178.html)
こちらの方法で問題なければバンザイです。
2へ進む必要はありません。

ただ、私の場合、
こちらの方法でも多少余白が少なくなったのですが、
少しだけ余白が残ってしまいました。

そこで、2の方法を試してみました。
すると、余白がきれいに無くなりました。

よかった。


備忘録なので簡単にしか説明していませんが、お困りのかたのお力になれれば！
以上です。
コマンドPythonでMicrosoft Storeが開くのを止める

# あらすじ

WindowsのCLIで`Python`コマンドを実行すると出現する`Microsoft Store`。そしてオススメされるストアアプリのPython。

miniconda3のユーザーには不要なのですが、どうやってこれを無効にするのか、ずっと疑問でした。Pathを直接編集する方法も[あります](https://qiita.com/Chu-son/items/2f2e5e5a64243845b777)。しかし、Chocolateyを利用してminicondaを入れている私にとって、それはナンセンス。もっといい方法が公式で紹介されていました。

そう、`Python on Miniconda on Chocolatey on Windows`な人のためのベストプラクティスです。（※たぶんそれ以外にも使えます。conda自体が邪道なので、pipenv向けに書いた方がよかったかも。蛇道？）

# やりかた

1. `Win`キーを押す。
2. `Manage app execution aliases`と入力（日本語の場合は`アプリ実行エイリアス`）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134703/5dee2179-4bc9-9459-ffb9-76afe7fb2878.png)

1. `Open`します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134703/46f4ef88-57ec-ea21-1854-5922734893c8.png)

1. `App Installer`をOFFにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134703/512674b0-46b7-d931-b42c-2bce2ce371a3.png)


# 参考

https://docs.microsoft.com/en-us/windows/python/faqs# 参考

**Excelsior!**
Dockerとdocker-composeを使ったRails APIモードの環境構築

Dockerとdocker-composeを使い、Rails6をAPIモードで動かす環境を構築しました。最後に動作確認もしています。

<br>

### 前提
Docker & docker-composeをインストール済み

### 動作環境
- macOS Catalina 10.15.7
- Ruby 2.7.1
- Ruby on Rails 6.0.3
- Docker 20.10.2
- docker-compose 1.27.4

<br>

ディレクトリを作成します。

```
mkdir rails_api_docker
cd rails_api_docker
```

<br>

GemfileとDockerfileを作成します。

```ruby:Gemfile
source 'https://rubygems.org'

gem 'rails', '6.0.3'
```

```dockerfile:Dockerfile
FROM ruby:2.7.1-alpine3.11

ENV BUNDLER_VERSION=2.1.4

WORKDIR /usr/src/app

COPY Gemfile .
COPY Gemfile.lock .

RUN apk update && \
    apk add --no-cache \
    shared-mime-info \
    linux-headers \
    libxml2-dev \
    curl-dev \
    make \
    gcc \
    libc-dev \
    g++ \
    sqlite-dev \
    tzdata && \
    gem install bundler && \
    bundle install

COPY . .

EXPOSE 3000
```

インストールするbundlerのバージョンを指定するために`ENV`で環境変数を定義しています。

<br>

Dockerfileを元にDockerイメージを作成します。

```
docker build -t rails_api:6.0.3 .
```

<br>

作成したイメージからコンテナを起動し、Railsアプリケーションを作成します。

```
docker run --rm -v $(pwd):/usr/src/app -w /usr/src/app rails_api:6.0.3 rails new . --skip-keeps -M -C -S -J -B
```

| オプション | 説明 |
|:-:|:-:|
| --skip-keeps | .keepファイルを作成しない|
| -M | Action Mailer, Action Mailbox, Action Text関連のファイルを作成しない |
| -C | Action Cable関連のファイルを作成しない  |
| -S | Sprockets, Spring, listenを使用しない  |
| -J | JavaScript, turbolinksを使用しない  |
| -B | bundle installを実行しない  |

<br>

`docker-compose.yml`を作成します。

```yml:docker-compose.yml
version: '3'
services: 
  api:
    build: .
    ports: 
      - '3000:3000'
    volumes: 
      - .:/usr/src/app
    tty: true
    command: ["rails", "server", "-b", "0.0.0.0"]
```

<br>

docker-composeでコンテナを起動します。

```
docker-compose up
```

<br>

`localhost:3000`にアクセスします。起動画面が表示されれば成功です。
![スクリーンショット 2021-03-15 11.06.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1016415/8e04d3a2-d6b4-1833-20e7-fe4c5d1d36f0.png)

<br>

### APIの動作確認

起動中のコンテナにログインします。

```
docker-compose exec api sh
```

<br>

今回は簡単にするため`scaffold`を使ってcontrollerとmodelを作成します。

```
rails g scaffold User name:string
```

<br>

`/db/seeds.rb`に以下を追記してテストデータを作成します。

```ruby:seeds.rb
User.create name: "Euclid"
```

<br>

DBを初期化し、テストデータを反映させます。

```
rails db:create
rails db:migrate
rails db:seed
```

<br>

`/app/controllers/users_controller.rb`のindexアクションを以下に変更します。

```ruby:users_controller.rb
def index
  @users = User.all
  render json: @users
end
```

`localhost:3000/users`にアクセスして以下が表示されれば成功です。

![スクリーンショット 2021-03-15 11.32.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1016415/d4059023-5263-4bcf-8dd9-79184a82bc34.png)

<br>

読んでいただきありがとうございました！ご指摘やご意見などありましたらコメントしていただけると嬉しいです🐳
プログラミングソースのいいコメント記入例、悪い記入例

プログラミングのコーディングの際、いいコメント例と悪いコメント例をあげます。

いいコメント例

![いい例.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1055346/bafc41ec-7c35-969f-b8ca-ae0ef820e28e.jpeg)

悪いコメント例

![悪い例.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1055346/9175a697-d445-840b-6075-4952c072a797.jpeg)


悪い例は
①いつ新規作成し
②いつ修整したのか
③修整した部分が分からない

しかもコメント欄に「多分」って書いてあるのは1番よくない例です。
業務でプログラムを作成していらっしゃる方は絶対に悪い例をしないようにしてください。
[rust]Tupleでmatchできるの便利

rust勉強中のメモ。`Tuple`に対して`match`できる。

以下はサンプルコード。いわゆるFizzBuzz。

```rust:FizzBuzz
fn main() {
    for n in 1..=30 {
        let str_n = n.to_string();
        let fb = match (n % 3, n % 5) {
            (0, 0) => "FizzBuzz",
            (0, _) => "Fizz",
            (_, 0) => "Buzz",
            _ => &str_n,
        };

        println!("{}", fb);
    }
}
```

FizzBuzzの出力は次の4通りになる。

- 3で割り切れる、かつ、5で割り切れる - FizzBuzz
- 3で割り切れるが、5では割り切れない - Fizz
- 5で割り切れるが、3では割り切れない - Buzz
- 3でも5でも割り切れない - 該当する数値

3でも5でも割り切れるパターンを`mod15==0`で判定してもいいのだけれど、`(mod3, mod5)`のタプルをパターンマッチすることで、コードを自然言語に近づける形で表現できました。

データベースのレコードなど、複数の項目に対するパターンマッチなどに使いやすそうで、rustいいですね。
Pythonプラクティス： シーザー暗号

#背景
Pythonで練習して見る。FizzBuzzやれればいいという人もいるが何かないかと思って
提案します。
#仕様
##前提知識
シーザー暗号を使う。以下Wikipediaによる説明
シーザー暗号は単一換字式暗号の一種であり、平文の各文字を辞書順で3文字分シフトして（ずらして）暗号文とする暗号である。古代ローマの軍事的指導者ガイウス・ユリウス・カエサル（英語読みでシーザー）が使用したことから、この名称がついた。
##内容
・ファイルから単語を取得してKeyに辞書型として設定する。Valueは一律 "None"
・辞書内の単語とシーザー暗号のペアがあるものを見つける。見つけた場合は書き出す。
アウトプットイメージ：IBM 1 HAL
##実装準備
実装する前に下記のコードは大いに流用して良いとする。

```py

from __future__ import print_function, division


def rotate_letter(letter, n):
    """Rotates a letter by n places.  Does not change other chars.
    letter: single-letter string
    n: int
    Returns: single-letter string
    """
    if letter.isupper():
        start = ord('A')
    elif letter.islower():
        start = ord('a')
    else:
        return letter

    c = ord(letter) - start
    i = (c + n) % 26 + start
    return chr(i)


def rotate_word(word, n):
    """Rotates a word by n places.
    word: string
    n: integer
    Returns: string
    """
    res = ''
    for letter in word:
        res += rotate_letter(letter, n)
    return res


if __name__ == '__main__':
    print(rotate_word('cheer', 7))
    print(rotate_word('melon', -10))
    print(rotate_word('sleep', 9))

def make_word_dict():
    """Read the words in words.txt and return a dictionary
    that contains the words as keys"""
    d = dict()
    fin = open('words.txt')
    for line in fin:
        word = line.strip().lower()
        d[word] = None
    return d
```
##実装例
```py
def rotate_word(word, n):
    """Rotates a word by n places.
    word: string
    n: integer
    Returns: string
    """
    res = ''
    for letter in word:
        res += rotate_letter(letter, n)
    return res

def rotate_letter(letter, n):
    """Rotates a letter by n places.  Does not change other chars.
    letter: single-letter string
    n: int
    Returns: single-letter string
    """
    if letter.isupper():
        start = ord('A')
    elif letter.islower():
        start = ord('a')
    else:
        return letter

    c = ord(letter) - start
    i = (c + n) % 26 + start
    return chr(i)


def make_word_dict():
    """Read the words in words.txt and return a dictionary
    that contains the words as keys"""
    d = dict()
    fin = open('words.txt')
    for line in fin:
        word = line.strip().lower()
        d[word] = None

    return d

def rotate_pair():

    dList= make_word_dict()
    for c in dList:
        for i in range(1, 14):
            if rotate_word(c, i) in dList:
                print(c,i,rotate_word(c, i))
    return list

if __name__ == '__main__':
        rotate_pair()

```
##追加エクササイズ
辞書型からリスト型に変更して見る。

```py
def make_word_dict():
    """Read the words in words.txt and return a dictionary
    that contains the words as keys"""
    sampleList = []
    fin = open('words.txt')
    for line in fin:
        word = line.strip().lower()
        sampleList.append(word)

    return sampleList
```
##著作権関係
Allen Downey氏作のコードを多いに参考にしました。
"""This module contains a code example related to
Think Python, 2nd Edition
by Allen Downey
http://thinkpython2.com
Copyright 2015 Allen Downey
License: http://creativecommons.org/licenses/by/4.0/
[React] warning React Hook useEffect contains a call to 'hogehoge'. Without a list of dependencies, this can lead to an infinite chain of updates. 

##ReactでuseEffectを使用

該当コード

```
import React, { useEffect, useState } from "react";
import ButtonBase from "@material-ui/core/ButtonBase";

const HomeContentCard = ({ genre }) => {
  const [genreTitle, setGenreTitle] = useState("");
  const [genreImg, setgenreImg] = useState("");

  useEffect(() => {
    setGenreTitle(genre.title);
    setgenreImg(genre.img);
  }, []);

  return (
    <>
      <ButtonBase className="home-content-card">
        <div
          className="home-content-card-img"
          style={{
            backgroundImage: `url(${genreImg})`,
          }}
        >
          <h5>{genreTitle}</h5>
        </div>
      </ButtonBase>
    </>
  );
};

```

###そうすると下記のようなエラーが発生

```
Line 8:3:   React Hook useEffect contains a call to 'setGenreTitle'. Without a list of dependencies, this can lead to an infinite chain of updates. To fix this, pass [genre.title, genre.img] as a second argument to the useEffect Hook  react-hooks/exhaustive-deps
```

###翻訳すると

```
React Hook useEffectには、「setGenreTitle」への呼び出しが含まれています。
依存関係のリストがないと、これは更新の無限の連鎖につながる可能性があります。
これを修正するには、useEffectフックの2番目の引数として[genre.title、genre.img]を渡します。
```


###このエラーの通り、useEffectの2番目の引数にgenre.titleとgenre.imgを記述

```
useEffect(() => {
    setGenreTitle(genre.title);
    setgenreImg(genre.img);
  }, [genre.img, genre.title]);
```



###エラー解消。　オールクリア!!!

```
Compiled successfully!
```