OmniAICreator/Qiita-1.07M huggingface dataset:
PHP 基本文法まとめ 前編

##PHP基本文法
PHPの基本文法を前編と後編に分けてご紹介します。

前半：`変数`・`定数`・`関数`・`演算子`・`配列`・`連想配列`
後半：`if文`・`while文`・`for文`・`foreach文`

##変数
```
$変数名 = 整数;
$number = 10;
$name = '佐藤'; //文字列の場合は''(シングルクォーテーション)で囲む。
```
・`変数` = 箱のようなもので、$変数に`整数を一時的に格納する`ことができる。
・`$(ドルマーク)`に続けて`変数名`を付ける。
・変数名は`文字`、または `_(アンダースコア)`で始める。
・`大文字と小文字は区別される`。

##定数
```
 define('USER_NAME', 'user name');
 const USER_NAME = 'user name';
```

・`定数` = 変数とは違い、`一度定義した定数の値を変更することができない`。
・定義方法は、`define(‘定数名’,‘定数の値’)`もしくは、`const ‘定数名’=‘定数の値’` 
・定数名は`大文字`と`_`の組み合わせのみ。

##演算子
```
echo 1 + 1; // 足し算
echo 6 - 3; // 引き算
echo 3 * 4; // 掛け算
echo 8 / 2; // 割り算
echo 7 % 2; // 割り算の余り

//比較演算子
== 等しい
=== 等しい（厳密）
!=  異なる
!== 異なる（厳密）
<> 異なる（!= と同じ）
>  大きい
>=  以上
<  小さい
<= 以下

//論理演算子
&& ~ かつ ~ （AND）
|| ~ または ~ (OR)
!  ~でない
```

##配列
```
$fruits = ['apple', 'orange', 'pineapple'];
$fruits = array('apple', 'orange', 'pineapple');

//添字は0からスタート
echo $変数名[添字];
echo $fruits[0]; // apple
echo $fruits[1]; // orange
echo $fruits[2]; // pineapple
```

・`配列` = `複数の値を管理する`。`array()`で値を定義。

##連想配列
```
$juice = array(
  'orange' => 'orange juice',
  'apple'  => 'apple juice',
  'grape'  => 'grape juice',
  'banana' => 'banana juice'
);
 
echo $変数名['キー名'];
echo $juice['orange']; //orange juiceを表示。
echo $juice['apple'];  //apple juiceを表示。
echo $juice['grape'];  //grape juiceを表示。
echo $juice['banana']; //banana juiceを表示。


//count($変数名)で配列の中身の数を表示させることもできる。
$fruits = array('apple', 'banana', 'lemon');
echo count($fruits);　//countは要素の数を返す。この場合は3。
```
連想配列 = `添字の代わりに自分で要素に名前を付けて`アクセスする。
          要素の名前を`key(キー）`という。

##関数
```
function 関数名 () 
{
  　//処理内容
}
関数名(); //関数を使う。


function myName() {
    $name = “佐藤”;
    echo “私の名前は” . $name . “です。<br>”;
}
function myName() // 「私の名前は佐藤です。」 が表示される。

↓ 引数を使った場合

function myName($name) {
    echo “私の名前は” . $name . “です。<br>”;
}
function myName("佐藤") // 「私の名前は佐藤です。」 が表示される。

```

`関数` =  `何らかに処理をまとめておく`ことで、好きな時に`関数として呼び出せる`。
        　　　　 `同じようなコードを何度も書かないで済む`。
`引数` = `関数を引き出すときに渡す値`。



参考元はこちら
(https://creive.me/archives/8719/#PHP)
(https://techacademy.jp/magazine/4925)
Laravel 6から7に上げたらメールが送信できなくなった

#なにがおこったか
Laravel6からLaravel7にあげたらメール送信でエラー履くようになった

#原因

![スクリーンショット 2020-11-12 0.57.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/174757/386de239-a405-4885-216c-8fb708d08f50.png)

この説明を見て、一応置き換えるかと思って、7の`mail.php`に置き換えました。
それだけで行けるかなと思っていましたが、7からenvの`MAIL_DRIVER`が`MAIL_MAILER`に書き換わっていました。

```:.env
MAIL_MAILER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS=null
MAIL_FROM_NAME="${APP_NAME}"
```
rbenv とRubyのバージョンが違って対処した方法

最近プログラミングを始めたばかりの私ですがRubyを新しいものにアップデートしようとして困った点と解決した方法を記しておきたいと思います。

環境はMacBookPro OS Catalina。
Rubyの元々入っていたバージョンは2.6.3で2.7.2にアップデートを試みた時でした。

Rubyのアップデートコマンドから2.7.2をインストールしたはずでrbenvから

```
rbenv version
```

と入れてバージョンを見ると、

```
2.7.2 (set by /Users/○○○(ユーザー名)/.ruby-version) 
```

と出るのですが、

```
ruby -v
```

入れると、

```
ruby 2.6.3p62
```

の文字が、、、。


いろいろなサイトを見ると

which ruby
rbenv global 2.7.2

などと入れても一向に変わらず。同じように困っている人の記事から打ち込んでみるとターミナルを開いている間は一時的に直っても閉じて再びバージョンを確認すると2.6.3に戻っている、、、。


そんな時に役立ったのがこちらのコードでした。




```
echo 'eval "$(rbenv init -)"' >>  ~/.zshrc
```

からの

```
source ~/.zshrc
```

からの

```
rbenv global 2.7.2
```


と入れてみました。
確認してみると、

```
ruby 2.7.2p137
```

の文字が！

恐る恐るターミナルを閉じて再度開いて

```
ruby -v
```

と入れてみると

```
ruby 2.7.2p137
```

の文字が出ました！同じ現象でお困りの方はぜひ試してみて下さい。


参考:
Progate: [ "Rubyの開発環境を用意しよう！"](https://prog-8.com/docs/ruby-env )

Progateさんのこちらのコードを参考に解決させていただきました。
【Rails】Googleアナリティクスを導入する方法【簡単】

今回開発し、リリース間近のWebサービスでデータ収集するために、Googleアナリティスクスを導入したのでその方法を紹介します。
google-analytics-railsというgemがありそちらを使う方法もあるのですが、githubで見てみると2017年の10月あたりで更新が止まっており（一応先月にReadmeは更新されてた）、不安だったので今回はgem無しで導入しました。

【前提条件】
・Googleアナリティクスに登録していること。（登録方法は[こちら](https://blog.siteanatomy.com/register-google-analytics/)）

#導入方法
Googleアナリティクス用の部分テンプレートを用意し、headタグで読み込むだけです。

```haml:layauts/_google_analytics.html.haml
%script{async: "", src: "https://www.googletagmanager.com/gtag/js?id=トラッキングID"}
:javascript
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'トラッキングID');
  if (#{raw current_user.to_json}) {
    gtag('set', {'user_id': #{raw current_user.to_json}.id});
  }
```

```haml:application.html.haml
!!!
%html
  %head
    %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
    - if Rails.env.production?
      = render 'layouts/google_analytics'
```

ここでポイントになるのが、最後のif 文で、これはログインしている場合はcurrent_userをjsonに変換してデータを渡して上げているという点です。
また、エスケープ処理を回避させるために```ActionView::Helpers::OutputSafetyHelper```のrawメソッドを使っています。html_safeでも同じことができますが、nilだった場合に例外が発生してしまうのでrawメソッドが推奨されているようです。（[Railsガイド](https://guides.rubyonrails.org/active_support_core_extensions.html#output-safety)を見てみると、```To insert something verbatim use the raw helper rather tha calling html_safe:```とあります。)

# 参考
https://qiita.com/t1gert1ger/items/b9a197e2d85050b9d7d6

# 最後まで読んでいただきありがとうございます！
日々学んだことをアウトプットしてます！何かのお役に立てれば幸いです。ご指摘などあればコメントいただけますと幸いです。
WSL2がネットワークに接続できない時の対処法

ホストのWindowsでは問題なくネットワークに繋がっているのに、WSL2を起動してもネットワークに接続できないことがあります。

そのたびに色々検索することになるので、ここに備忘録として記します。

## 環境

・WSL2: Ubuntu 20.04 LTS
・OS: Windows 10 Home Insider Preview
　・バージョン: 2004
　・OSビルド: 20197.1000

## WSL2がネットワークに繋がらない時の対処法
結論としては、Powershellを管理者権限で実行し、以下のコマンドを順に実行します。
・LxssManagerの再起動

```bash
Restart-Service LxssManager
```

・Host Network Serviceの再起動

```bash
Stop-Service -name "hns" 
Start-Service -name "hns"
```

・Hyper-Vアダプタの再起動

```bash
Get-NetAdapter -IncludeHidden | Where-Object `
    {$_.InterfaceDescription.StartsWith('Hyper-V Virtual Switch Extension Adapter')} `
    | Disable-NetAdapter -Confirm:$False
Get-NetAdapter -IncludeHidden | Where-Object `
    {$_.InterfaceDescription.StartsWith('Hyper-V Virtual Switch Extension Adapter')} `
    | Enable-NetAdapter -Confirm:$False
```

再起動は不要です。WSLで通信ができるようになっているはずです。

原因は分からないのですが、WSLが再起動するたびに内部のIPアドレスが変わることが関係してそうです。

何か分ったことがあれば追記したいと思います。

## 参考
https://github.com/microsoft/WSL/issues/5805
バッチファイルの置き場所を WSL2 経由でマウントして Docker コンテナを起動する方法

# これは何?

バッチファイルをダブルクリックして、Docker for Windows で起動する際に、そのバッチファイルの場所を WSL2 ボリュームとしてマウントする方法を提案します。

# 想定読者

- WSL2 版 docker を導入している人
- docker 起動時に volume をマウントしたときに、性能が悪いと警告された人
- docker 起動するときにいちいち wsl を起動するのが面倒くさい人

# 結論

バッチファイル名のコンテナイメージを起動する例を示します。バッチファイル名を変えると、起動するコンテナイメージが変わります。

```batch:buildpack-deps.bat
@setlocal
@set "WORK=/root/workspace"

@cd /d "%~dp0"
@set "IMG=%~n0"

@if "%~0" == "%~f0" set "pause_if_error=@if errorlevel 1 pause"

@for %%i in ( "%CD%" ) do @set "WSL2CD=%%~di"
@for %%i in (a b c d e f g h i j k l m n o p q r s t u v w x y z) do @call set "WSL2CD=%%WSL2CD:%%~i=%%~i%%"
@for %%i in ( "%CD%" ) do @call set "WSL2CD=%%WSL2CD:~0,-1%%%%~pnxi"
@set "WSL2CD=/mnt/%WSL2CD:\=/%"

wsl -e docker run -it --rm -w "%WORK%" -v "%WSL2CD%:%WORK%" %IMG% %*
%pause_if_error%
@exit /b %errorlevel%

```

マウントポイントは `@set "WORK=/root/workspace"` に直書きなので、適宜書き換えてください。
image を固定する場合、 `@set "IMG=%~n0"` を書き換えてください。
wsl の distro を指定していませんので、指定したい方は適当に wsl の option を追加してください。

# 確認環境

Windows10 1909
Docker version 19.03.13, build 4484c46d9d

# 解説

docker を起動する際、 wsl コマンドを経由します。
ボリュームは wsl 上の path を指定します。
`WSL2CD` の操作をごにょごにょやっているのは、 windows path から WSL のパスに変換する処理です。

これで、警告が消えてスッキリ!

# 参考

- [コマンドプロンプト（cmd.exe）私的メモ](https://qiita.com/q1701/items/d81e51a64f41ca841da6)
Oculus Quest2 Unity開発でつまづいたとこ

# はじめに
Oculus Quest2を買いました。

![quest2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526299/15cbf274-0a2a-be0d-f026-8546106ebabd.jpeg)

早速Unityでなんぞ作ろうと思ったのですがセットアップでちょくちょく躓いてしまいました。のでその解決法を共有したいと思います。詳細な手順というよりかはTips的な記事です。

# Quest2とスマホアプリがペアリングできない
スマホアプリ側でFacebookアカウントを通すことが出来たらスマホアプリとQuest2をペアリングする必要があります。この時スマホアプリ側でQuest2が見つからないという問題がありました。

## 解決法
私はiPhoneを使用しているのですが、アプリのアクセシビリティ設定でOculusアプリのBluetoothアクセス許可がオフになっていました。「設定」画面の下の方に各アプリの設定があるのでそこからOculusアプリのBluetoothアクセス許可をオンにしたら直りました。Quest関係ねーじゃん。

# UnityでビルドしたアプリがQuest2で動かない
大体の手順は[こちら](https://framesynthesis.jp/tech/unity/oculusquest/)が非常に参考になります。こちらのページを元に進めれば大体OKです。しかしビルドして転送するところまではできたのですが、Quest2上でアプリが実行されると真っ暗で何も見えない状態になってしまいました。

## 解決法
「Oculus XR Plugin」パッケージのバージョンが低かったのが原因でした。上記のページにも書いてあるのですが、このパッケージはバージョンが1.4.0以降でないと動かないのですが、PackageManagerから入れる際のデフォルトのバージョンが1.3.4になっていました。プルダウンを開くと1.5.0が出てくるのでこちらを入れましょう。普通逆じゃない？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526299/713f015a-2131-24ca-a253-3f3131ed7104.png)

# Unityエディタで再生できない
Quest2をLinkケーブルで繋ぐとPCヘッドセット(通常のRift)として使えるので、ビルドせずともQuest2上でシーンを再生できます。できませんでした。

## 解決法
### 1.Oculusアプリを入れる
Quest2をPCヘッドセットとして使用するのはOculus Linkという機能によって実現されるのですが、この機能を使用するためにはOculusアプリをPCに入れる必要があります。[こちら](https://www.oculus.com/setup/?locale=ja_JP)からアプリを入れましょう。アプリがインストールされたらLink機能を使うことが出来ます。Link接続をするかどうか尋ねるポップアップがQuest2上で表示されるのでそこからLink接続をすることができます。ポップアップが出てきない、もしくは間違って消してしまった場合はQuest2ホームの設定画面から接続することが出来ます。Link接続がされるとQuest2のホームではなくRiftのホームが表示され、バーチャルデスクトップ等の機能を使うことが出来ます。ブラインドタッチに自信のある方はバーチャルデスクトップで開発をすると被ったり外したりする手間が無くなるので便利だと思います。目が死にますが。

Oculusアプリのバージョンは最新にしておきましょう。「ライブラリ」→「アップデート」からアップデートすることが出来ます。また、「設定」→「一般」から提供元不明のアプリを実行できるようにしておきましょう。これは不要なのかもしれませんが、私は「ベータ」の公開テストチャンネルもオンにしました。

### 2.再起動
Quest2とPCを再起動しましょう。以上でエディタからQuest2の再生ができるはずです。
Python + Tornado で湯婆婆を実装してみる

# はじめに

原作者様: [Javaで湯婆婆を実装してみる - Qiita](https://qiita.com/Nemesis/items/c7192a7c510788d2cba2)
色々な言語での実装: [【毎日自動更新】湯婆婆 LGTMランキング！ - Qiita](https://qiita.com/torifukukaiou/items/c8361231cdc56e493245)

この「令和のHello World!」もプログラミング言語単体だと出尽くし感があるので、今度はWebアプリケーションフレームワークを使ってブラウザで動くデモを作ってみます。
今回は Python 3 + Tornado の組み合わせで作ります。

[Tornado Web Server — Tornado 6.1 documentation](https://www.tornadoweb.org/en/stable/)

# 検証環境

- Windows 10 Home 2004 
- Cygwin
- Python 3.6.10
- Tornado 6.1

## 事前準備

Tornadoをインストールしておいてください。

```
$ pip3 install tornado
```

# コード

```python:yubaba.py
import random
import tornado.ioloop
import tornado.web
import tornado.template

class MainHandler(tornado.web.RequestHandler):
    _template = tornado.template.Template("""<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Yubaba</title>
</head>
<body>
  <p>契約書だよ。そこに名前を書きな。</p>
  <form action="/" method="POST">
    <input name="name" size="30" value="{{name}}">
    <input type="submit" value="送信">
  </form>
{% if name != "" %}
  <p>
    フン。{{name}}というのかい。贅沢な名だねぇ。<br>
    今からお前の名前は{{newName}}だ。いいかい、{{newName}}だよ。分かったら返事をするんだ、{{newName}}!!
  </p>
{% end %}
</body>
</html>
""")

    def get(self):
        self.set_header("Content-Type", "text/html")
        self.write(self._template.generate(name=""))

    def post(self):
        name = self.get_body_argument("name")
        newName = random.choice(name)
        self.set_header("Content-Type", "text/html")
        self.write(self._template.generate(name=name, newName=newName))
    
if __name__ == "__main__":
    app = tornado.web.Application([
        (r"/", MainHandler),
    ])
    app.listen(8888)
    tornado.ioloop.IOLoop.current().start()
```

- HTMLフォームと湯婆婆のメッセージを書いたHTMLをテンプレートとして用意しておきます。
- HTTPのGETメソッドとPOSTメソッドを実装します。
    - GETのときは最初のセリフとHTMLフォームだけを出力します。
    - POSTのときは↑に加えて、指定された名前から1文字ランダムに選んで新しい名前を作り、発表します。

# 動作例

```
$ python3 yubaba.py
```

ターミナルには何も出ませんが、これでWebサーバが起動して8888番ポートで待ち受けるので、ブラウザで ``http://localhost:8888/`` にアクセスします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204084/fe454217-5a1b-93c2-6535-42f62223b5e5.png)
名前を入れて「送信」を押すと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204084/27681f93-4e8a-cc27-1620-d4c53e81324c.png)
こうなります。

Python 3.3以降であれば「𠮷田」さんにも問題なく対応します。
関連: [\[Python\] うちの湯婆婆が「𠮷田」さんに対応しているか知りたい - Qiita](https://qiita.com/everylittle/items/c91aa71b4bc1aa8519a2)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204084/2e6fb48b-9d5e-14bd-cfc0-90aaa7347d58.png)
## お約束

名前を何も書かずに送信すると落ちます。
もはや伝統芸

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204084/18a69467-2559-e609-22f4-85c6c819cf35.png)
このときのターミナルの様子がこちら。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204084/6b4e6508-a97a-f93c-9ef8-4daa09438dc5.png)
【Ruby】gsubメソッドとsubメソッドの使い方

#はじめに
Ruby学習用にアプトプットさせていただきます。
今回は「gsubメソッド」と「subメソッド」を用いた文字の置換え方法をご紹介します。

#gsubメソッド
gsubメソッドを使用することで、マッチした部分を全て置換えることができます。

```
n = gets ←（今回はgetsにtest-testと入力してみた）
m = n.gsub("test","hoge")
=> hoge-hoge（test-testがhoge-hogeに置換わった）
```

#subメソッド
subメソッドを使用することで、最初にマッチした部分のみ置換えることができます。

```
n = gets ←（今回はgetsにtest-testと入力してみた）
m = n.sub("test","hoge")
=> hoge-test（test-testがhoge-testに置換わった）
```

#【応用】gsubメソッドでマッチした部分をすべて置換て複数のパターンを置換

```
s = gets ← （今回はgetsにPAIZAと入力）
n = s.gsub(/A|E|G|I|O|S|Z/,"A" => 4,"E" => 3,"G"=>6,"I"=>1,"O"=>0,"S"=>5,"Z"=>2)
>> P4124
```

第一引数でマッチした正規表現に該当した部分を第二引数で置換えている

#応用まとめ

正規表現を使わない場合

```
文字列.gsub(置換したい文字列, 置換後の文字列)
>> 置換え後の文字列
```

正規表現を使う場合

```
文字列.gsub(/正規表現/, 正規表現に該当した箇所を置換した後の文字列)
>> 正規表現に該当した箇所を置換した後の文字列
```
【Paiza】全くの未経験からたった業務経験3カ月でDランク→Cランクが解けるようになったお話

最近までCランク解けないマンだったのですが、
ふと正答率70~80%くらいの問題を解いたらスルスルと解けてしましましたww

なんでかなーと分析して
プログラムを組む上の参考になればと思います。
また自分がどういう考え方で組めるようになったかも備忘録も兼ねてます。


#ゴールから逆算してロジックを組めるようになった。
以前は、先頭からあれ用意して、これも必要、…と先頭から順番に解いていましたが、Cランクがするっと解けるようになった時は以下の感じで考えてました。

>「ゴールがこれだから、その１つ前の処理はこれ必要だな。」
と足りないパーツを埋めていく感じ。

最終的な出力から逆算するのが私に向いていただけかもしてませんが、ゴールから逆算して考えるとパズルみたいに面白く解けましたmm
これは業務経験の中でたくさん学びます。


#日本語で処理を書いてから実装するようになった
ゴールから逆算するのと併用して、
以下の手順で組んだらするっと解けました。

>❶ゴールを把握
❷日本語でこんなことが必要と処理の最後から辿る
❸if(定数が1だったら) みたいな「こんなメソッドがあったらいいな、変数があったらいいな」と願望で書く
❹定義していってググったり、変数をいじってみたりする
❺解ける！

大枠を把握
ー＞日本語でどんなことするか小さく分解して考える
ー＞あるかわかんないけど、こんな判定、メソッドあったらいいなーで部分的にコーディングする
ー＞わからなきゃググる（大体したいことが明確なのでググるのも楽ちん）

って感じかもしれません。


#単純にメソッド、ライブラリの知識が増えた
文法ができることは前提で、他にもこんな便利なライブラリがあるんだぁと知っておくだけで記憶に引っかかりやすくなります。

今思えば、最初何にもわかんなくて死にそうでしたが、
そういえば以前こんなメソッドあったな。こういう処理やったな。
Listに詰め替える必要があるんだな。とかパターンとして思いつくようになります。

ここは反省として、経験者と一緒にやると爆伸びするのではないでしょうか？


では楽しいプログラミングライフを(=ﾟωﾟ)ﾉ
プログラミング素人が100時間かけて自分のサイトを作る話

#プログラミング素人が100時間かけて自分のサイトを作る話
完成サイト(https://orionn0111.github.io/)
１００時間かければいいができるとhtml,scc,javaScriptを使い自分のポートフォリオサイトを作るお話
特に私はcssアニメーションにとても感動し、web上でサクサク動くcssアニメーションが動く物をつくりたいとおもい作成

#ページ遷移時アニメーション
index.jsにて
######
```
$(function () {
    // ハッシュリンク(#)と別ウィンドウでページを開く場合はスルー
    $('a:not([href^="#"]):not([target])').on('click', function (e) {
        e.preventDefault(); // ナビゲートをキャンセル
        url = $(this).attr('href'); // 遷移先のURLを取得
        if (url !== '') {
           //ここにページ遷移時に実行するcssアニメーションを書く
            obj.classList.add('roomout');
            dF.classList.add('doorLeftOut');
            dR.classList.add('doorRightOut');
            moon.classList.add('moonout');
            orionn.classList.add('orionnout');
            kusaA.classList.add('kusaOut1');
            kusaB.classList.add('kusaOut1');
            book.classList.add('bookOut')
            setTimeout(function () {
                window.location = url;  // 1.0秒後に取得したURLに遷移
            }, 1000);
        }
        return false;
    });
});
```
####
このindex.jsでページ遷移時アニメーションを可能にした
#軽くするため
svg画像を用いることで拡大しても綺麗で軽い画像に…
svg画像は座標や色情報などで構成されているため
profile.htmlの中身は画像ではなくsvgとhtml,cssを基本的を使い作りました
検証してないですが多分こっちの方が軽いとおもう

#新聞風ページ
３枚のページで新聞みたいに切り替えができるようにしました
制御はjsで行っておりアニメーションはもちろんcssを使って書きました

#レスポンシブデザイン
スマホ対応なのですがスマホを横に傾けてみるページのようになっています
範囲設定がガバガバなのですぐパットのような中途半端な画面サイズや大きな画面に対してcssが崩れます
対応しようとしたのですが自分より大きな画面に擬似的に表示させる方法が分からなかったので諦めました
composerについて

##composer.jsonとcomposer.lockの関係性
**composer.json**にライブラリが記載し、**comoser install**を行うと、そのライブラリがインストールされる。
その際に、**composer.lock**に、インストールしたライブラリのバージョンが記載される。

もし、**composer.lock** に既にライブラリのバージョン情報がインストール前に記載されていた場合、記載されているバージョンのライブラリがインストールされる。

チーム内でcomposer.lockを共有することで共通のバージョンのライブラリを使用することができる。

##composerの使い方
1: composer.jsonを作成する。

```
composer init
```

2:composer.jsonにインストールするライブラリを記載する。

```
composer require ライブラリ名
#手動で書き込んでもよい。
```

3:インストールする。

```
#composer.json composer.lockに基づいてインストールする。
composer install
```

4:ライブラリを削除する。

```
composer remove ライブラリ名
```
link_toでURIに二つの引数を渡す

#はじめに
　以前に、link_toメソッドのpathの引数について投稿したが、本日、引数を２つ渡す状況があったので、忘れないために、まとめておく。

##link_toメソッドとは
```ruby
<% link_to '表示させる文字', ○○_path %>
```
とすることで、HTMLのaタグのような扱いができる。

##pathに引数が必要な場合

ターミナルでrails routesのURIが、

```bash
/class_rooms/:class_room_id/messages/:id(.:format)
```

「:」と「id」がついてると、そこには引数を渡す必要がある。
`:class_room_id`と`:id`に引数が必要。

##pathに２つの引数を渡す必要がある場合

先の例で、
一つめの`:class_room_id`が必要になっているのは、ルーティングをネストしているため。

```ruby:routes.rb
resources :class_rooms, only: [:index, :new, :create] do
    resources :messages, only: [:index, :create, :destroy]
  end
```

<font color=red>ルーティングをネストした場合は、link_toのpathの引数を二つ指定しなければならない。</font>

```ruby
<%= link_to '表示させる文字', class_room_message_path(@class_room, message) %>
```
指定する順番は、URIにある順番にする。
MS Learn の Microsoft Teams タブ開発でローカルの環境を汚したくないので Docker 使ってみた


**2020/11/22 ファイルを更新してもリビルドされなかったので、対応策を追記。**

Temas の タブ開発っていっても SPFx とそう変わらないと思い試してみました。
いまのところ、普通に MS Learn 進めていけてる気がします。
環境汚したくない方はやってみてください。

## やってたところ 演習 - カスタム Microsoft Teams 個人タブを作成する
> https://docs.microsoft.com/ja-jp/learn/modules/embedded-web-experiences/3-exercise-create-custom-teams-personal-tab

## 手順

以下コマンドを実行して、コンテナを起動します。

```
docker run -it --rm --name {プロジェクト名} -v {マウントしたいディレクトリ}:/usr/app/teamsap -p 3007:3007 okadan/teamsap:2.15.0
```

次に以下コマンドを実行します。

```
yo teams
```

最後に、ファイル更新時にリビルドさせるために、以下を追記します。

```javascript:gulpfile.js　86行目

    // all other watches
    watch(
        config.watches,
        {interval:1000,usePolling:true}, //add
        series('webpack:server')
    );

    watch(
        config.clientWatches,
        {interval:1000,usePolling:true}, //add
        series('webpack:client')
    );
```

続きをどうぞ！

#### 中身

> Dockerfile
> https://github.com/7o83/DockerTeamsap

> Docker Hub
> https://hub.docker.com/r/okadan/teamsap

#### 参考

> https://stackoverrun.com/ja/q/7878511
Internet Explorerはいい加減引退してくれ・・・😠

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72257/51983edd-34fc-ed7b-cde2-4297e0eb4ed9.png)

なら、もっと大々的に公式声明を発表してくれ。

エンタープライズ モードを勘違いして、いまだにIEが現役だと思ってるITに興味の無いお偉いさんたちに、現場は苦しめられているぞ。

エンタープライズ モードや互換モードの存在は、IEの賞味期限切れを周知させるのの弊害になっている。

すべてのレガシーなHTMLドキュメントを無効化させるために、いい加減、すべてのWindowsのエディションでIEを無効化する更新プログラムを配信するんだ。

IE時代の資産(WEBアプリ)はいい加減残っている方がマズイ。。。
Pythonでselenium 要素の存在を判定する方法

Seleniumで存在しない要素を使うと、Message: Unable to locate element:xxx のエラーが起きます。
事前に要素の存在をチェックしておきたいですね。

たまに以下のようなtryで例外処理をする方法をみかけますが、実はlenでも判定することはできます。

```
try:
    driver.find_element_by_id('test').click()
except:
  # 存在しない
```

ポイントはdriver.find_element_by_idの代わり、driver.find_elements_by_idを使います。一見同じように見えますが、前者の場合は要素が存在しない時に異常が発生します。後者なら、要素が存在しなくでも異常が発生しないです。
具体的に以下ように使います。

```
if len(driver.find_elements_by_id('test') > 0) :
    ele = driver.find_element_by_id('test')
　# 存在する時の処理
else:
  # 存在しない時の処理
```
MSYS2 svnでリポジトリを扱う際の注意点

msys2/subversionでリポジトリを扱う際の注意点。

# 動作環境
- Windows 10 Pro 2004
- msys/subversion 1.14.0-2

# svnadminがPermission denied
ローカルリポジトリを作成できない。

## 失敗例

```
$ svnadmin create svnrepo
svnadmin: E000013: Can't open file 'svnrepo/db/revprops/0/0': Permission denied
```

## 成功例
　あらかじめmsys2/Mingw64/Mingw32ターミナルを管理者として起動する。管理者権限があるとプロンプトが "#" に替わり、`svnadmin`でリポジトリを作成できるようになる。
　ちなみに、TortoiseSVNの`svnadmin.exe`ではあらかじめコマンドプロンプトを管理者権限で起動しなくてもリポジトリを作成できる。msys2固有の問題。

```
# svnadmin create svnrepo
```


# svn checkoutに失敗する
（本来は非奨励だが）共有フォルダのリポジトリにアクセスする。

## 失敗例
lsコマンドでフォルダ内を閲覧できるか確認する（この段階では成功）。

```
$ ls //localhost/c$/home/svn/svnrepo
README.txt  conf  db  format  hooks  locks
```

次に、`ls`コマンドを`svn checkout`に置き換えてチェックアウトしようとするが、チェックアウトできない。

```
$ svn co //localhost/c$/home/svn/svnrepo
svn: E205000: Try 'svn help checkout' for more information
svn: E205000: Error parsing arguments
```

`file://`に変更するとメッセージが変わるが、依然としてアクセスできない。

```
$ svn co file://localhost/c$/home/svn/svnrepo
svn: E170013: Unable to connect to a repository at URL 'file://localhost/c$/home/svn/svnrepo'
svn: E180001: Unable to open repository 'file://localhost/c$/home/svn/svnrepo'
```

`$`が悪さをしていると思い、エスケープしてもアクセスできない。

```
$ svn co file://localhost/c\$/home/svn/svnrepo
svn: E170013: Unable to connect to a repository at URL 'file://localhost/c$/home/svn/svnrepo'
svn: E180001: Unable to open repository 'file://localhost/c$/home/svn/svnrepo'
```

## 成功例
`$`を削除するとアクセスできた。エラーの真因は不明。

```
$ svn co file://localhost/c/home/svn/svnrepo
Checked out revision 0.
```
環境設定

\![Mac OS X-10.15.7](<https://img.shields.io/badge/MacOSX-10.15.7-brightgreen>) \![ruby-2.7.1p83](<https://img.shields.io/badge/ruby-2.7.1p83-brightgreen>) 


# 環境設定


## 自分の環境

-   **OS:** macOS Catalina version 10.15.7
-   **Ruby:** 2.7.1
-   **Shell:** fish
-   **Editor:** neovim


## とりあえず

基本的なやつは[講義ページ]を参照


## vimmer向け


### Orgmode

-   [vim-orgmode](https://github.com/jceb/vim-orgmode)をインストール
-   方法は各々のプラグインマネージャのやり方で
-   主なキーバインド<https://github.com/jceb/vim-orgmode/blob/master/doc/orgguide.txt>
-   Macユーザは `let g:org_export_emacs="/usr/local/bin/emacs"` を設定しないとエクスポート時にエラーが出る


### Ruby

-   coc.nvimユーザは[coc-solargraph](https://github.com/neoclide/coc-solargraph)が使える
    -   `rbenv exec gem install solargraph`
    -   `:CocInstall coc-solargraph`
    -   自分の環境ではCOCがうまくsolargraphを起動できないようだったので使用しない
-   かんたんな解析，フォーマットがしたいだけなら[vim-rubocop](https://github.com/ngmy/vim-rubocop)を使う
    -   `rbenv exec gem install rubocop`
    -   vim-rubocopは各々のプラグインマネージャのやり方で
    -   `:Rubocop` でlinting
    -   `:Rubocop -A` でauto-correct
    -   `:Rubocop -a` でsafe auto-correct


# NOTE

講義はこれで問題ないかと．ガッツリRubyで開発するならもうちょっとちゃんと環境整えたらいいと思う.



------
 - **source** ~/multiscalesim_toku/grad_members_20f/members/lynd2299/mss_env.org
自分用Memory-mapped I/Oに関するメモ

## 1
CPUとメモリは直列でつながっているイメージ.

![untitled@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141711/3c024572-37a9-4900-8732-0373f3f910e7.png)

## 2

この信号が流れている部分を他にも長しはじめた。
その構造をメモリバスと言う.
つまり、直列回路が並列回路になった. (ハードウェアの実装レベルになると様々な最適化があるので深くは追わない

![untitled@2x (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141711/8f7608a6-bd29-fdfd-d6e0-9449cabe7e47.png)

## 3

ソフトウェアでメモリに書き込んでいると思っても実メモリに書き込まれているとは限らない. (実メモリに割り当てられているメモリのオフセットがある. このオフセットのズレはハードウェアレベルで計算されるから定数倍. ブロックはそんなに細かく沢山には分けられないらしい.
メモリ空間とIO空間があるけど、最近はこのメモリバスを使う.

![untitled@2x (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141711/bc16fd19-4afd-16df-e4ea-bdb957b24fc1.png)
WordPressでアップロードサイズの上限を変更する方法

## ワードプレスでは初期設定で、2500ピクセル以上の画像はアップできないようになっています。

それを解決する方法。

```
@ini_set( 'upload_max_size' , '30M' );
@ini_set( 'post_max_size', '30M');
@ini_set( 'max_execution_time', '300' );
```

![dwdq.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135794/d43c3cb0-e135-5af4-082e-a0bb7fc49b82.png)

管理画面から行う方法を紹介します。

もし、これでできない場合は、下記の参考を見てみてください、他のやり方も書いてあります。

https://fox-wp.com/wordpress-upload-filesize/
Arduino IDE で Studuino を 使えるようにするまで (メモ)

>00. [はじめに公式サイトへ]
>01. [Macの場合]
>02. [Winの場合]
[はじめに公式サイトへ]:https://qiita.com/NNNGriziMan/items/43fd5cd454ce1176bc69#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB%E5%85%AC%E5%BC%8F%E3%82%B5%E3%82%A4%E3%83%88%E3%81%B8
[Macの場合]:https://qiita.com/NNNGriziMan/items/43fd5cd454ce1176bc69#mac%E3%81%AE%E5%A0%B4%E5%90%88
[Winの場合]:https://qiita.com/NNNGriziMan/items/43fd5cd454ce1176bc69#win%E3%81%AE%E5%A0%B4%E5%90%88

あまりStuduinoについての資料がなかったのでメモがてら備忘録として残しておきます.
#はじめに公式サイトへ
https://www.artec-kk.co.jp/studuino/ja/
![スクリーンショット 2020-11-11 22.03.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363815/247f9435-42a4-cc1e-aaf6-06031eb8735e.png)
ArduinoIDEご利用の方をクリック
ハードウェア設定ファイル-->ArduinoIDE 1.6.x/1.8.x用ダウンロードをクリック
![スクリーンショット 2020-11-11 22.09.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363815/07335424-6cda-b87f-8993-8854eddbf42d.png)
![スクリーンショット 2020-11-11 22.11.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363815/e5688049-9eac-503d-857b-9dca4925a162.png)
ダウンロードしたものを解答すると
![スクリーンショット 2020-11-11 22.26.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363815/e0cdc326-4fda-9595-0a9f-10d44a1d4187.png)
あとは説明書-->Arduino環境設定手順のPDFに従い適宜書き換えてくだい。
https://www.artec-kk.co.jp/studuino/docs/jp/Arduino_environment_setup.pdf
![スクリーンショット 2020-11-11 22.27.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363815/8ac7c6db-9af0-f371-ca07-1316f62de94c.png)

#Macの場合
展開後フォルダの中にあるstuduinoフォルダごと
`open /Applications/Arduino.app/Contents/Java/hardware`
にコピーし、展開後フォルダの中にある bootloadHID フォルダごと 
`open /Applications/Arduino.app/Contents/Java/hardware/tools`
toolsの中にコピーし完成です。
Macのターミナルで 一発で開けると思います。
 ![スクリーンショット 2020-11-11 22.31.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363815/03291562-9910-c5af-bc3d-9cf4cb3cf77c.png)

あとは一旦ArduinoIDEを終了し、起動-->ツール-->ボード-->Studuino Boardsで選択してあげればOKです。お疲れさまでした。
![スクリーンショット 2020-11-11 22.42.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363815/6d39e3bd-3e34-f7b1-1326-7a2f1ec42e52.png)

#Winの場合
後日書きます
【webpack】ビルド前にrimrafで出力先ディレクトリをキレイにする

webpackでビルドされるファイルを管理する上で、
出力先のディレクトリを一旦キレイにしてからビルドする方法を学んだので備忘録。

結論、rimrafをnpmでインストールしてUNIXコマンド rm -rfを使えるようにします。

## 導入
npmもしくはyarnでパッケージをインストールします。

```
npm add rimraf --dev  
```
参考：[rimraf - npm](https://www.npmjs.com/package/rimraf)

## 実践的な使い方
開発と本番でビルドの設定を変えるのが一般的かと思いますので、
package.jsonでscriptsコマンドを定義するとこんな感じかなと思います。

```package.json
"scripts": {
    "cleanup": "npx rimraf ./public", // public配下をキレイにします
    "dev": "npm run cleanup && npx webpack --config ./webpack.dev.js",
    "build": "npm run cleanup && npx webpack --config ./webpack.prod.js"
  },
```

npm run devをした後に
![スクリーンショット 2020-11-11 22.46.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531606/2758b20a-81b5-cf8a-aebe-de40fb44fa04.png)

npm run buildを実行すると
![スクリーンショット 2020-11-11 22.47.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531606/eca0e6f1-31c9-345b-9e81-f15e329166aa.png)

初期化されたpublicに新しいチャンクが生成されていますね。
React Nativeをはじめる(環境構築)

# はじめに
React Nativeを用いて作ってみたいネイティブアプリケーションができた為、まずはセットアップの備忘録としてこの記事を残します。
ちなみにReact Nativeとは、Cross-Platformに対応している（iOS、Android、Web etc...）に対応したアプリケーションを開発することができます。
[参照 : React Native](https://reactnative.dev/)


## 実行環境
macOS Catalina: 10.15.4
node: v12.18.3
react-native-cli: 2.0.1
watchman: 4.9.0

### 環境構築
brewを使用し、NodeとWatchmanをインストールします。

Nodeはいいとして、Watchmanとは、**FaceBook推奨のファイル変更管理ツールです**
[参照: Watchman公式](https://facebook.github.io/watchman/)

```
brew install node
brew install watchman
```

また、CocoaPodsをインストールすると便利なのでinstallしていきます。
CocoaPodsとは、**ライブラリ管理ツールです。**

[参照: CocoaPods説明](https://qiita.com/satoken0417/items/479bcdf91cff2634ffb1)

```
sudo gem install cocoapods
```

### プロジェクト作成
iOSシミュレータを起動します。

```
open -a Simulator
```
iOSシミュレータの起動が確認できたら、いったん閉じ、
次はアプリケーションを作成し、iOSで起動します。

```
react-native init Test(プロジェクトの名前)
cd Test
react-native run-ios
```
実行後、下記のようにアプリケーションが立ち上がります。
![スクリーンショット 2020-11-11 22.44.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/9eed222b-d0cf-7fdd-878c-1f424694cfab.png)

### ディレクトリの構成
こちら[参照: React公式Doc](https://ja.reactjs.org/docs/faq-structure.html)を参考にし、
下記にディレクトリ構成例を記載します。
今回は、ファイルタイプ別にグループ化する方法を採用します。

```
api/
  APIUtils.js
  APIUtils.test.js
  ProfileAPI.js
  UserAPI.js
components/
  Avatar.js
  Avatar.css
  Feed.js
  Feed.css
  FeedStory.js
  FeedStory.test.js
  Profile.js
  ProfileHeader.js
  ProfileHeader.css
```

#　おわり
次回は、実際に作成したアプリケーションとコードを記事にしていこうと思います。
JavaplayfreamworkとMysql の接続ができない（未解決）

##実装したいこと##

Java環境構築中の初心者なのですが詰まり中
MysqlのデータベースとPlayfreamworkの接続がうまく出来ず困っているところ。
引き続き格闘


環境
MacOs catalina
Java15
sbt 1.4.1
scala 2.13.3
mysql5.6.47

##コード##
```build.sbt
name := """play-scala-seed"""
organization := "com.example"

version := "1.0-SNAPSHOT"

lazy val root = (project in file(".")).enablePlugins(PlayScala)

scalaVersion := "2.13.3"

libraryDependencies += guice
libraryDependencies += "org.scalatestplus.play" %% "scalatestplus-play" % "5.0.0" % Test
libraryDependencies += jdbc
libraryDependencies += "mysql" % "mysql-connector-java" % "5.6.47"
```

```application.conf
db.default.driver=com.mysql.jdbc.Driver
db.default.url="jdbc:mysql://localhost/play-scala-seed"
db.default.username=username
db.default.password="password"
```

![cc24312cfd74592e63d368f1a742ef48.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/653208/7004d672-fd4d-8431-5701-b9d77c037136.jpeg)
【お遊び用】湯婆婆をLINE Bot にしてみる（Python）

## はじめに
@NemesisさんのJavaで湯婆婆を実装してみるを見て、自分の名前を入れて湯婆婆に遊ばれてみたいと思った方もいるでは？？と思いBot化しました。
以下の**QRコードからBotの友達追加が可能**です。
ぜひ、遊んでみてください。

エンジニア界隈でこんなこと流行ってるよって、世間にも知らせたいのでぜひLGMTをよろしくお願いします。



![Screen Shot 2020-11-11 at 22.17.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303882/72042c5a-9fe5-2103-7211-f38f53d4aa03.png)

##　実装について

言語はPythonを使用しました。
「**"契約書だよ。そこに名前を書きな。"**」を発動するにはユーザーからのリクエストが必要なのは少し困りましたが、めんどくさいので「**働かせて**」くらいの言葉を言えば反応するようにしました。

基本的には、文字削りのところのみ遊んでみてください。

## コード

```python:main.py
from flask import Flask, request, abort
import random

from linebot import (
    LineBotApi, WebhookHandler
)
from linebot.exceptions import (
    InvalidSignatureError
)

from linebot.models import (
    MessageEvent, TextMessage, TextSendMessage)
import os

app = Flask(__name__)

YOUR_CHANNEL_ACCESS_TOKEN = 'XXXXXXXXXXX'
YOUR_CHANNEL_SECRET = 'XXXXXXXXXXX'

line_bot_api = LineBotApi(YOUR_CHANNEL_ACCESS_TOKEN)
handler = WebhookHandler(YOUR_CHANNEL_SECRET)


@app.route("/callback", methods=['POST'])
def callback():

    signature = request.headers['X-Line-Signature']
    body = request.get_data(as_text=True)
    app.logger.info("Request body: " + body)

    try:
        handler.handle(body, signature)
    except InvalidSignatureError:
        abort(400)
    return 'OK'


@handler.add(MessageEvent, message=TextMessage)
def handle_message(event):
    word = event.message.text
    if '働かせて' in word:
        reply_word = "契約書だよ。そこに名前を書きな。"
    else:
        newName = random.choice(word)
        reply_word = f"フン。{word}というのかい。贅沢な名だねぇ。 今からお前の名前は{newName}だ。いいかい、{newName}だよ。分かったら返事をするんだ、{newName}!!"

    line_bot_api.reply_message(
        event.reply_token,
        TextSendMessage(text=reply_word))


if __name__ == "__main__":
    port = int(os.getenv("PORT", 5000))
    app.run(host="0.0.0.0", port=port)

```

## 実行結果
良い感じに切り出してくれてますね。

![Screen Shot 2020-11-11 at 22.34.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303882/40b74cd1-e45f-25a8-7f3d-36c0f005cb00.png)


## 感想

**空文字が送ることができないが故にお決まりのエラーが吐けないのは勘弁してください。**

なぜ一文字切り出しが流行っているのか謎。
ランダムで文字数も切り出したい。

LINE botは便利すぎるので、もっと機能知りたい。

以上。
![Screen Shot 2020-11-11 at 22.17.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303882/72042c5a-9fe5-2103-7211-f38f53d4aa03.png)
SECCON CTF 2020 Write Up

SECCON CTF 2020のWrite Upを書いていきます。

今年はオンライン完結での開催、そして今回も1人チームで参戦しました。
以前、[SECCON Beginners CTF 2020 Write Up](https://qiita.com/LOGE/items/3174535a141403a1deab)でも記載してましたが、ようやく少しずつBeginnersの問題が解け始めたレベルです。

今回はWELCOME問題程度しか解けておらず、解答まであと一歩という状態のものが多かったです････練度が足りないなぁ････
上記の理由で、恥ずかしいので結果のハードコピーの貼り付けは止めときます。
(ユーザ名/チーム名は、Beginnersと同じです)

復習も兼ねて、解けたらその問題のWrite Upも少しずつ載せていこうと思います。
(ゆっくり復習中。)
以下、参考になりそうなWrite Up
・[SECCON 2020 CTF writeup](https://zenn.dev/kurenaif/articles/276fe988e2dd8c3f97d4)：動画で説明してて頭に入りやすい
・[Beginner's Capsule [SECCON 2020 Online CTF] - はまやんはまやんはまやん](https://www.hamayanhamayan.com/entry/2020/10/11/171248)

## WEB

### Beginner's Capsule

>Beginner's Capsule
>warmup
>Genre: Web+Misc
>https://beginners-capsule.chal.seccon.jp/
>beginners_capsule.tar.gz

とりあえずBurp通してみたけど、特に通信は発生していない様子。
では、ソースコードを見てみよう。

単純に、console.log(eval('_flag.get(flag)'));したのが答えじゃないの？？？
ってずっと頭抱え続けてた････
「UTF-8」「utf8」「utf8mb4」は何が違うの



##疑問
本記事の発端となったのは、『mysqlを扱う際に「utf8mb4」と「utf8」を使い分ける必要があるのはなぜか』という疑問です。

『ユーティーエフエイト』は、いくら素人でも少しは知っています。
一方で、「utf8mb4」は何それ美味しいのってなりました。名前を見る限り、『ユーティーエフエイト』の親戚っぽいな、程度です。

この時点で私は勘違いしているのですが、素人でも知っていると豪語した『ユーティーエフエイト』は「UTF-8」のことであり、「utf8」とは別物だそうです。
一瞬で墓穴を掘って埋まりました。

その辺りを含めて、「UTF-8」「utf8」「utf8mb4」の違いをメモしておこうと思います。

##「UTF-8」「utf-8」「utf-8mb4」の違い
まずは、簡単に図にまとめてみました。

| 文字コード | 特徴 |
|:-------|:-------------------------------------------------|
|UTF-8   |１文字を１〜４バイトで表現する|
|utf8   |mysqlにおけるUTF-8。１文字を１〜３バイトで表現する|
|utf8mb4   |mysqlにおけるUTF-8。１文字を１〜４バイトで表現する|

( ^ω^ ){「UTF-8」と「utf8」って同じじゃないんかーい
素人、無事死亡。

mysqlには、その歴史から「utf8」と「utf8mb4」という２種類の「UTF-8」が存在するようです。
「UTF-8」と「utf8」が同一であると勘違いしたままmysqlを使用すると、DBから文字を取り出したときに文字化けなどの問題が発生するようですね。

##参考
* https://yokonoji.work/utf-8mb4
* https://tmtms.hatenablog.com/entry/2016/09/06/mysql-utf8

##過去の関連記事
* [文字コードについて](https://qiita.com/hozumi_engineer/items/f441d58f0f343623a919)
文字コードについて

##もくじ
* 文字コードって何
* コンピュータにおける文字コードの役割
* 文字コードの種類による違いと文字化け

自分用のメモ書きです。

##文字コードって何
文字を表すコードのこと。
本来数値でない情報を数値で表したもの。

ex）
あ　ー　１
い　ー　２

##コンピュータにおける文字コードの役割
コンピュータは数字（２進数）しか理解できないため、文字を数字に置き換える必要がある。
そこで、文字をどの数字に置き換えるのかというルールが必要となる。
そのルールが文字コード。

##文字コードの種類による違いと文字化け

文字コードの種類が異なれば，同じ文字を表す文字コードが異なる。

ex)
《UTF-8》
あ　ー　01
い　ー　02
（割愛）
こ　ー　10

《JISコード》
あ　ー　10
い　ー　20


このコードの振り方の違いが、文字化けの原因です。

ex)
あ→[JISコードでエンコード]→10→[UTF-8でデコード]→こ



##参考
* https://xtech.nikkei.com/it/members/ITPro/ITBASIC/20010620/1/
* https://ferret-plus.com/7006
HTTPメソッド、ステータスコードについて

<h1>HTTPメソッドとは</h1>

クライアントがWebサーバーに対して、要求する処理のこと

種類としては、HEAD,GET,POST, PUT, DELETE, CONNECT, OPTIONS, TRACEがありますが、主にGET,POSTがよく使われるメソッドになります。<br>
GETとPOSTについてはそれぞれ解説します。


<h2>①GETについて</h2>

HTMLファイルや画像といったデータを取得する際に使用。
URLで指定したファイルの送信を要求するため、送信したデータが、Webブラウザー上の閲覧に残る。



<h2>②POSTについて</h2>

パスワード、ログインメールアドレスのようなデータを転送する際に使用する。
Webブラウザー上にデータが履歴として残らないため、機密情報等を送る場合にはPOSTメソッドが使用される。


<h1>ステータスコード</h1>

HTTPリクエストに対するHTTPレスポンスの処理結果を表すもの。

ステータスコードは３桁の数字で表記され、１００番台・2００番台・3００番台・4００番台・5００番台の５つに分類されている


100番台　⇨　HTTPリクエストが処理中


200番台　⇨　HTTPリクエストが正常に処理された状態


100番台　⇨　HTTPリクエストについて、ブラウザー側で追加処理が必要


100番台　⇨　Webブラウザー側のエラー


100番台　⇨　Webサーバー側のエラー
Linuxコマンドについて　超基本編

今回は基本的なLinuxコマンドについてまとめていこうと思います

対象読者はプログラミング初学者です
是非、Linuxコマンドに苦手意識のある方は参考にしてください

#前提知識

#ディレクトリについて

* ディレクトリ　・・・　フォルダのことです

* ルートディレクトリ　・・・　階層構造の一番上にあるディレクトリのことです

* カレントディレクトリ　・・・　現在作業中となるディレクトリのことです

* ホームディレクトリ　・・・　新規にターミナルを立ち上げた場合に作業中となるディレクトリのことです

# パスについて

ディレクトリやファイルの所在を示す文字列のことです
ディレクトリは階層ごとに/(スラッシュ)で区切ります

* 絶対パス　・・・　ルートディレクトリから指定するパスです　絶対パスで指定するときにはパスの一番最初に/を指定します

* 相対パス　・・・　カレントディレクトリから指定するパスです　絶対パスで指定するときにはパスの一番最初に/を指定してはいけません

#Linuxコマンド一覧

#pwd　コマンド
カレントディレクトリのパスを表示するコマンドです

```
pwd #カレントディレクトリのパスを表示するコマンドです
```

#ls コマンド
ディレクトリやファイルの一覧を表示するコマンドです

```
ls #ディレクトリやファイルの一覧を表示するコマンドです
```

#cd コマンド　
カレントディレクトリを移動するときのコマンドです
また、cdだけ入力し実行した場合は、ホームディレクトリに移動します

```
cd 【移動したいディレクトリ】
```

#まとめ

今回はこれだけは覚えて欲しいというものだけに厳選して紹介しました
これ以外にもLinuxコマンドは複数あります。少しずつ覚えていってLinuxを使いこなしてください。
golangで配列(struct)をjsonへ変換する


### jsonパッケージを使う

```
import "encoding/json"
```

### 変換する
jsonパッケージの引数に配列を指定してあげれば変換してくれる

```go

data, _ := json.Marshal(m)
```

### 例えばKubernetesのPod一覧をjsonに変換するもの
```go
package main

import (
    "context"
    "encoding/json"
    "fmt"
    metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
    "k8s.io/client-go/kubernetes"
    "k8s.io/client-go/tools/clientcmd"
    "log"
    "os"
    "path/filepath"
)

func main() {
    // Kubeconfigのファイルパスを指定
    kubeconfig := filepath.Join(os.Getenv("HOME"), ".kube", "config")
    config, err := clientcmd.BuildConfigFromFlags("", kubeconfig)
    if err != nil {
        log.Fatal(err)
    }

    // Kubeconfigを読み込む
    clientset, err := kubernetes.NewForConfig(config)
    if err != nil {
        log.Fatal(err)
    }

    // Pod一覧を呼び出す
    namespace := "default"
    pods, err := clientset.CoreV1().Pods(namespace).List(context.TODO(), metav1.ListOptions{})
    if err != nil {
        log.Fatalln("failed to get pods:", err)
    }

    m := map[string]string{}

    // print pods
    // pods.Items: []v1.Pod
    for _, pod := range pods.Items {
        m[pod.Name] = string(pod.Status.Phase)
    }

    data, _ := json.Marshal(m)
    fmt.Printf(string(data))
}
```

実行結果

```json

{
	"external-dns-547f4784f7-852zf": "Running",
	"nginx-deployment-574b87c764-8vwdz": "Running",
	"nginx-deployment-574b87c764-dnr6m": "Running",
	"v01-app-54fc4b5d44-k5zfp": "Running",
	"v01-db-5b756dc6b-57grv": "Running"
}
```

## marshalとunmarshal
marshalは元帥？という意味？黒ひげ？

### marshal
- structをjsonに変換するときに使う

### unmarshal
- ネットワーク越しに受け取ったjsonのbyte配列をjsonへ変換するときに使う
    - たぶんレスポンスヘッダーとかそのあたりをうまいこと取り除いてくれるんだと思う
マルチスケールシミュレーション特論7

\![Mac OS X-10.15.7](<https://img.shields.io/badge/MacOSX-10.15.7-brightgreen>) \![ruby-2.7.1p83](<https://img.shields.io/badge/ruby-2.7.1p83-brightgreen>) 


# if-elsif-else-end


## 講義ページリンク

[チャート式ruby-III(if, case, array, each by leap year)](https://qiita.com/daddygongon/items/a550bde1ed6bff5217d8)


## 内容

Rubyにおける条件分岐の書き方


## 課題

入力された整数がうるう年かどうか表示するプログラムの作成


## 解答例

```ruby
def leap?(year)
  (year % 400).zero? || !(year % 100).zero? && (year % 4).zero?
end

year = ARGV[0].to_i
p year
p leap?(year)
```

出力

    > ruby check_leap_year.rb 2004
    2004
    true
    
    > ruby check_leap_year.rb 1999
    1999
    false
    
    > ruby check_leap_year.rb 1900
    1900
    false
    
    > ruby check_leap_year.rb 2000
    2000
    true


# NOTE

-   上記のコードはRubocopでフォーマッティングした
    -   LSPを使っているならRuby用のSolargraphというのがあるが，自分の環境(neovim + coc.nvim + coc-solargraph)では動作が不安定だったため見送り
    -   Vimにはvim-rubocopというプラグインがあったので，本講義の課題のコードの解析ぐらいの用途ならこれで十分
    -   ちなみに，ファイル保存時に自動でフォーマットするには，.vimrcに`autocmd BufWritePost *.rb :RuboCop -A`と記述すればよい(いるのか知らんがvimmer only)
-   Rubocop基準では上記のようなフォーマットが望ましいようだ
    -   booleanを返すメソッドには `return` を書かない
    -   `==0` じゃなく `.zero?` でゼロ判定
    -   細かいことは[スタイルシート](https://rubystyle.guide/)参照
-   あとorgファイルで `#+include:` でインクルードしたソースコードにシンタックスが適用されない(なんで?)



------
 - **source** ~/multiscalesim_toku/grad_members_20f/members/lynd2299/mss7.org
Firebase

##Firebaseとは？
Googleから提供するバックエンドシステム。
各種認証（GoogleログインやTwitterログインなど）・データベースシステム・ホスティング・クラウドストレージなどの機能を提供してくれる。

##Firebaseを使うと、何がいい？
バックエンド機能を直接構築すると、ものすごく時間がかかってしまう。Firebaseはそのバックエンド機能をすでに用意しておいたシステムで、バックエンド機能を構築する時間を節約できる。

##Firebaseの弱点は？
バックエンド機能を構築する時間を節約できるが、その代わりに直接構築した時の頂点を持たないことが逆に弱点になる。Firebaseを経由するため、バックエンドのカスタマイズするのに制約が発生し、コントロールを持つことも当然できない。

##Firebaseの代替剤は？
AWSから提供する[ Emplify ](https://aws.amazon.com/ko/amplify/)がある。

##参考
[参考１](https://nomadcoders.co/nwitter/)
Windows10の標準機能で画像をPDFに変換するんだぞう（余計なソフトは入れない）

#こんな方へ
* 時々しかやらない処理の為に余計なソフトを入れたくないぞい。
* どっかのWebサイトに画像アップロードしてPDF変換とかはちょっと無理。（機密情報的な意味で）
* 宗教上の理由で余計なソフトをインストールできない。

#Microsoft Print to PDF君
この子に印刷指示を投げるとPDF化してくれるん。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/69f073b1-e906-c15f-2e73-2e0736301a41.png)
**印刷指示を投げる** ということはつまり、画像に限らず各種アプリケーションの印刷先プリンターをこの子に指定すればPDF化ができるということ。

印刷系の動作確認のスタブとしてもちょっと使えるかな…。


#Microsoft Print to PDF お払い箱にしちゃったんだけど！！
『なんぞこれ？……いらね！』でプリンタ一覧から削除しちゃった人へ捧ぐ。
ここどす。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/5a3b4573-2c5c-1a4f-d063-8183ab7c1944.png)
コントロールパネル ⇒ プログラム ⇒ プログラムと機能 ⇒ Windowsの機能の有効化または無効化
Windows PDF 印刷


#さあ画像をPDFに
画像上で右クリック ⇒ 印刷。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/ca5dd9cd-514b-be9e-7bc7-1233589fc7cc.png)
あとはプリンターをMicrosoft Print to PDFに指定して印刷指示飛ばせば『どこに保存する？』って聞いてくるから、好きにやればよろし！

#バージョン
Windows10 Pro バージョン1909 OSビルド18363.1198
Windows10のライブラリから3D-Objectsをレジストリ編集で削除する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/461050/a8fff97c-a3ad-3103-50ae-64c6d36a7de1.png)


恐らくレジストリで消すのが一番手っ取り早い気がします。

以下の２つのレジストリを削除

```del-3d.reg
[-HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\MyComputer\NameSpace\{0DB7E03F-FC29-4DC6-9020-FF41B59E513A}]
[-HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Windows\CurrentVersion\Explorer\MyComputer\NameSpace\{0DB7E03F-FC29-4DC6-9020-FF41B59E513A}]
```

戻したいときは上記を追加すると復活します。
~~無いと思いますが~~
Apache Benchを使ってみる

## Apache Benchとは

Apacheの同梱されている性能テストツール
abとも呼ばれています。

特徴は単一・同一のリクエストを指定したリクエスト分生成します。
webサーバの性能テストで使われます。

シナリオベースでのアプリケーションテストを行うことについては向いていません。
あくまでシンプルな性能テストツールと思ってもらえればと思います。

## Apache Benchのインストール

Apache Benchはapacheを入れることで使うことが出来ます。
以下どちらかインストールしてください

- httpdのインストール

```
yum install httpd
```

- Apache Benchのみ

これ入れるとhttpd入れなくてもApacheBench使えます。

```
yum install apr-util
```

## Apache Benchの使い方

### 実行

- 実行コマンド

```
ab -n [リクエストの総数] -c [コネクション数(並列実行数)] [URL]
```

- 実際のコマンド

```
ab -n 500 -c 100 http://test.com/index.html
```

「100ユーザから500アクセス来る」というテストになります。

- 他のオプション

| オプション | 詳細 |
|---|---|
| -t  | レスポンス待ち時間の指定(/s)  |
| -A [ユーザ名]:[パスワード]  | ベーシック認証の指定  |
| -P [ユーザ名]:[パスワード]  | 認証の必要なプロキシ  |
| -X [プロキシのサーバ名]:[ポート番号]  | プロキシ経由でリクエストする場合の指定  |

### 実行結果確認

- 実行結果

```
$ ab -n 500 -c 100 http://test.com/index.html
This is ApacheBench, Version 2.3 <$Revision: 1430300 $>
Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/
Licensed to The Apache Software Foundation, http://www.apache.org/

Benchmarking test.com (be patient)
Completed 100 requests
Completed 200 requests
Completed 300 requests
Completed 400 requests
Completed 500 requests
Finished 500 requests


Server Software:        Apache/2.4.6
Server Hostname:        test.com
Server Port:            80

Document Path:          /index.html
Document Length:        12 bytes

Concurrency Level:      100
Time taken for tests:   0.265 seconds
Complete requests:      500
Failed requests:        0
Write errors:           0
Total transferred:      135500 bytes
HTML transferred:       6000 bytes
Requests per second:    1884.92 [#/sec] (mean)
Time per request:       53.053 [ms] (mean)
Time per request:       0.531 [ms] (mean, across all concurrent requests)
Transfer rate:          498.84 [Kbytes/sec] received

Connection Times (ms)
              min  mean[+/-sd] median   max
Connect:        0    3   4.9      0      17
Processing:    12   45  13.9     49      71
Waiting:        1   45  13.9     49      71
Total:         15   48  12.2     50      71

Percentage of the requests served within a certain time (ms)
  50%     50
  66%     54
  75%     56
  80%     59
  90%     62
  95%     66
  98%     70
  99%     71
 100%     71 (longest request)
```

- Concurrency Level : 送信リクエスト数
- Time taken for tests : リクエスト完了までの時間
- Complete requests : 総リクエスト数
- Failed requests : 取りこぼしたリクエスト数
- Write errors : 書き込みエラー数
- Requests per second : 1秒あたりに処理されたリクエスト数
- Time per request : 同時実行したリクエストの平均処理時間(mean)
- Time per request : リクエストの平均処理時間(mean, across all concurrent requests)
- Transfer rate : 1秒あたりに受信された容量
- Connection Times (ms) : 下記の最小値、平均、最大値、平均を記載
	- Connect : 接続
	- Processing : 処理
	- Waiting : 待ち時間
	- Total : 集計
- Percentage of the requests served within a certain time (ms) : 処理時間の推移

## 参考

- [Apache Benchでサクッと性能テスト](https://qiita.com/flexfirm/items/ac5a2f53cfa933a37192)
- [【初心者向け】ApacheBench入門](https://dev.classmethod.jp/articles/ab-tutorial/)
- [Apache BenchのTime per requestを調べてみた](https://qiita.com/zaki_taka4/items/702a596ffc501453af29)
- [httpのパフォーマンスをチェックしたい～ApacheBench編～](https://www.itmedia.co.jp/help/tips/linux/l0500.html)
クラスのオブジェクトの属性をfor文で追加する

オブジェクトの属性を複数作りたいときは組み込み関数setattrを使うことができます。
引数は属性の追加先オブジェクト、属性名、値の３つです。

```python
import numpy as np

class Test:
    pass

test = Test()
for i in range(10):
    setattr(test, 'var' + str(i), np.random.randint(10))

print(test.var5)

for name, value in test.__dict__.items():
    print(f'{name} : {value}')

```

```python:出力
2
var0 : 2
var1 : 6
var2 : 2
var3 : 1
var4 : 2
var5 : 2
var6 : 7
var7 : 2
var8 : 7
var9 : 4
```
コーディングに関する基礎知識

## 画像の張り付け方
htmlで書き出すのとcssで書き出す２種類の方法がある

htmlは何かその写真に意味があるもの（ex表やグラフ）
cssは特に意味を持たない時(装飾など)


## 文字を縦横中央にする方法
```
　display: flex;
  justify-content: center;
  align-items: center;
```

## 主要な擬似要素まとめ
```
li:first-child
li:last-child
li:hover
li:nth-child()
```

## boxsizing:border-boxについて
HDF形式でデータの書き込みを行う

#1.この記事は

データ読み取りの高速化のためにHDFフォーマットにてDataFrame型データを保存する方法の紹介です。


#2.内容

保存　　　：store.put( 'h5ファイル中のデータを置く場所' , DataFrame名 )
読み取り　：store( 'h5ファイル中のデータを読み出す場所を指定')


```python:sample.py
import pandas as pd
import numpy as np
DATA_STORE = './data/asset.h5'

dat = [
    ['2019-07-01','9997','740'],
    ['2019-07-02','9997','749'],
    ['2019-07-03','9997','757'],
    ['2019-07-04','9997','769'],
    ['2019-07-05','9997','762'],
    ['2019-07-08','9997','860']
]
df4 = pd.DataFrame(dat,columns=["A","B","C"])
print("df4",df4)

# DATA_STOREに作成したasset.h5ファイルにHDF形式でDataFrame df4を書き込む。
# 書式：store.put( 'h5ファイル中のデータを置く場所' , DataFrame名 )

with pd.HDFStore(DATA_STORE) as store:
   store.put('general/test', df4)

# DATA_STOREに作成したasset.h5ファイルからデータの読み出しを行う。
# 書式：store( 'h5ファイル中のデータを読み出す場所を指定')

with pd.HDFStore(DATA_STORE) as store:
    df5 = store['general/test']    
print(df5)
```
```python:output
df4
            A     B    C
0  2019-07-01  9997  740
1  2019-07-02  9997  749
2  2019-07-03  9997  757
3  2019-07-04  9997  769
4  2019-07-05  9997  762
5  2019-07-08  9997  860

df5
            A     B    C
0  2019-07-01  9997  740
1  2019-07-02  9997  749
2  2019-07-03  9997  757
3  2019-07-04  9997  769
4  2019-07-05  9997  762
5  2019-07-08  9997  860
```
【docker,PHPでPDO→DB接続】

PHPでdockerコンテナ内からPDOで別コンテナにあるDBに接続する方法。
注意点はホスト名をDBのあるコンテナ名にするだけ

userやpasswordはdocker-compose.ymlに従う。

PDO部分

```php
$db = new PDO('mysql:host=docker-practice_mysql_1;dbname=restaurant','root','pass');
```

コンテナ一覧(terminal)

```php
docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
												docker-practice_mysql_1
```
テスト19

```vb

'カレントディレクトリの判定

Sub カレントフォルダの表示()

MsgBox "現在のカレントフォルダは" & vbCrLf & _
    CurDir & vbCrLf & "です。"
    
ThisWorkbook.Sheets("Sheet6").Range("A1").Value = CurDir
    
End Sub


Sub マクロからブックを開く()


'Workbooks.Open "C:\Users\User\Desktop\VBA関連\ExcelVBA\Sample01-1.xlsm"
'ThisWorkbook.Activate　←このやり方ではカレントディレクトリは変わらない

'以下のコードではカレントディレクトリは変わる
OpenFileName = Application.GetOpenFilename(FileFilter:="Excelファイル,*.xlsx")
 
If OpenFileName <> "False" Then
    Workbooks.Open OpenFileName
End If

End Sub

```
git clone時にAuthentication failedが出るとき

Git Labからリポジトリをcloneしようとしてました。
作業環境はmac

ターミナルでgit cloneすると

```terminal
fatal: Authentication failed for 'https://gitlab.com/xxxx/yyyy_zzzzz.git/'
```

と怒られが発生しました。

### 原因：直前にパスワードを変更したため。

普段Gitで管理しているものはアカウントが保存されており、そのまま認証されるようになっている。

前回Authenticationが通ったものを、よかれと思って次回も継続、それで認証してくれようとするので、Authentication failedのエラーが出た模様です。

### 解決策:もう一回git cloneしてユーザー名とパスワードを入力する（だめならさらにもう一回）。

もう一度git cloneすると、アカウントとユーザー名を問われます。

```terminal
Username for 'https://gitlab.com': GitLabアカウント
Password for 'https://xxxx@gitlab.com': GitLabパスワード
```

これでGit Labアカウントが上書きされて、無事cloneできました。
Shell Script 上の for における in の中は一度にすべて評価される

# 背景

以下のようなスクリプトを実行したときに、CMD2 以降はいつ評価されるのかが気になった。

```bash
for a in "$(CMD1)" "$(CMD2)" "$(CMD3)" ...; do
  :
  [ $a = 'foo' ] && break
done
```

仮に一度にすべて評価されるとするならば、特に CMD たちが AWS CLI だったような場合、必要以上にレスポンスに時間がかかったり、クオータ制限に達する可能性がある。CLI の実行は最小限におさえたい。

# 環境

WSL2 + Ubuntu (dash)

```bash
$ dpkg -s dash | grep Version
Version: 0.5.8-2.10
```

# 検証

以下スクリプトを実行。

```bash
for a in "$(echo hello | tee /tmp/hello)" "$(echo hello2 | tee /tmp/hello2)"; do
    [ $a = 'hello' ] && echo 'broke' && break
done
```

broke と表示される前提で、 `/tmp` 配下に hello2 ファイルがあるかどうかを調べる。
もし hello2 ファイルが

- ないならば: 当該ループに入るタイミングで初めて評価される
- あるならば: 初回ループ実行前にすべて評価される

ということがいえる。

# 結果

```bash
$ for a in "$(echo hello | tee /tmp/hello)" "$(echo hello2 | tee /tmp/hello2)"; do
>   [ $a = 'hello' ] && echo 'broke' && break
> done
broke

$ ls /tmp/hello*
/tmp/hello  /tmp/hello2
```

hello2 ファイルが存在した。つまり、ループ開始前に hello および hello2 が評価されていることがわかった。
v-slotを使用してv-selectのテキストをカスタマイズ

##概要
vuetifyのv-selectを使用する際に、item-textに複数の値を表示したいと思った...
そこで、v-slotをしようすれば実現できることがわかったのでここにまとめます。

#####v-slotを使用する
```vuejs:vue
<template>
<v-select
  label='題名'
  v-model='fruit'
  :items='fruits'
  item-value='fruits.id'
  item-text='fruits.name'
  return-object
>
  <!-- 　選択されたテキスト(例: id=1が選択された場合 → りんご / 100が表示される) -->
  <template v-slot:selection = "item">
    {{ item.name }} / {{ item.price }}
  </template>
  <!-- 選択一覧 -->
  <template v-slot:item = "item">
    {{ item.name }} / {{ item.price }}
  </template>
</v-select>
</template>
```

######scriptは下記のように設定されていると想定
```typescript:typescript
<script lang="ts"> 
//インターフェース
export interface FruitInterface{
    id: string;
    name: string;
    price: string;
}

//データ
class Fruit extends Vue{
    private fruits: FruitInterface[] = [
        {
            id: "1",
            name: "りんご",
            price: "100"
        },
        {
            id: "2",
            name: "みかん",
            price: "150"
        }
    ]
}
</script>
```

#####選択された値をchipsで表示したい！
```vuejs:vue
----
  <!-- 選択されたテキスト(例: id=1が選択された場合 → りんご / 100が表示される) -->
  <template v-slot:selection = "item">
    <v-chip>{{ item.name }} / {{ item.price }}</v-chip>
  </template>
----
```
selectionの方に<v-chip>で囲めばchipで出力することができます。