OmniAICreator/Qiita-1.07M huggingface dataset:
【020_ラマヌジャン】コマ大数学科

# 【020_ラマヌジャン】コマ大数学科

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017176/da2c5188-77b0-8a80-bc22-e9bccb4e91e4.png)

```latex
   \begin{tikzpicture}[xscale=0.6,yscale=0.6]
% 家の作成
      \foreach \x in {1,2,...,8}
    {  \draw (2*\x,0)--++(0,0.7)--++(-0.2,0)--++(0.7,0.5)--++(0.7,-0.5)--++(-0.2,0)--++(0,-0.7)--++(-1,0)--cycle;
% 家の番号表示
    \node at (2*\x+0.5,0.5)[font=\Large]{\x};
    }

  \end{tikzpicture}
  \begin{tikzpicture}[xscale=0.6,yscale=0.6]
    \foreach \x in {1,2,...,5}
  {  \filldraw [fill=yellow!30!white](2*\x,0)--++(0,0.7)--++(-0.2,0)--++(0.7,0.5)--++(0.7,-0.5)--++(-0.2,0)--++(0,-0.7)--++(-1,0)--cycle;
    \node at (2*\x+0.5,0.5)[font=\Large]{\x};
  }
  \foreach \x in {7,8}
  {  \filldraw [fill=green!30!white](2*\x,0)--++(0,0.7)--++(-0.2,0)--++(0.7,0.5)--++(0.7,-0.5)--++(-0.2,0)--++(0,-0.7)--++(-1,0)--cycle;
    \node at (2*\x+0.5,0.5)[font=\Large]{\x};
  }
  \filldraw [fill=red!50!white](12,0)--++(0,0.7)--++(-0.2,0)--++(0.7,0.5)--++(0.7,-0.5)--++(-0.2,0)--++(0,-0.7)--++(-1,0)--cycle;
  \node at (12.5,0.5)[font=\Large]{6};
  \end{tikzpicture}

  \begin{tikzpicture}[xscale=0.3,yscale=0.3]
    \foreach \x in {1,2,...,25}
  {  \draw (2*\x,0)--++(0,0.7)--++(-0.2,0)--++(0.7,0.5)--++(0.7,-0.5)--++(-0.2,0)--++(0,-0.7)--++(-1,0)--cycle;
    \node at (2*\x+0.5,0.5)[below=3,font=\small]{\x};
  }

  \end{tikzpicture}

```
Alexa連携の共用買いものリストアプリをGlideAppで作ってみる

# 背景
- 毎週土日にお買い物をする
- 買いものリストはAlexaから入れている
- Alexaは私のアカウント、買い物は夫がする

# 課題
- 夫がチェックリストとしてAlexaアプリを使えない
    - Alexa（Amazon）アカウントを供用したくない（買い物ばれる）
    - 現在は、私がLINEで「Alexaのリストをシェア」して、テキストで夫に届く
    - 買ったものをチェックできず、買い忘れが発生する※いい頭の体操になるようで、忘れられたことは今のところない
- 買い物時のチェックがリアルタイムでない。
    - 夫が買ってきてくれたものを確認しつつ、私がAlexaの買い物リストにチェックを入れる（ラグがある）
    - 時々忘れて次の週もリストとして残る
    
# 使うもの
- Alexa
    - デフォルトの買い物リストを使う
- IFTTT
    - Alexa shopping list to GoogleSpreadsheet
- GAS
    - Alexaから追加の買い物が通知されたら、GlideApp用のシートに転記する（５分おきの定期実行）
    - GlideApp用の買い物リストでチェックがついたものをクリアする（1日1回）
- GlideApp（https://www.glideapps.com/）
    - SpreadSheetのリストを表示、チェックを入れる機能

# できたもの
## SpreadSheet
- AlexaShoppingList
  ![スクリーンショット 2021-01-21 22.35.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74969/e556f3bc-d40c-c667-033f-0b70f34b6c06.png)

- ShoppingList(Glideから参照）
    ![スクリーンショット 2021-01-21 22.36.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74969/cba28c71-a8bc-6595-fe33-338b46c989a2.png)

- Setting
    ![スクリーンショット 2021-01-21 22.36.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74969/813b2564-8377-5578-1a3a-a99c5bd588ae.png)


## GAS
- 行インデックスと列インデックスが1からなのが面倒臭い、、、ヘッダ行もあるし

```js:
var spreadsheets = SpreadsheetApp.openById(spreadSheetId);
//A2にAlexaの行数（次に差し込まれる場所）、B2にGlideApp用リスト行数（次に差し込まれる場所）
var settings_spreadsheet = spreadsheets.getSheetByName("Setting");
var alexa_spreadsheet = spreadsheets.getSheetByName("AlexaShoppingList");
var shopppinglist_spreadsheet = spreadsheets.getSheetByName("ShoppingList");

//Alexaから追加の買い物が通知されたら、GlideApp用のシートに転記する（５分おきの定期実行）
function copyAlexa2List(){

  //二次元配列に
  var alexa_data = alexa_spreadsheet.getRange(1,1,alexa_spreadsheet.getLastRow(),3).getValues();

  alexa_start_cell = settings_spreadsheet.getRange(2,1).getValue()
  shoppinglist_start_cell = settings_spreadsheet.getRange(2,2).getValue()
  var i = -1
  for (var j = alexa_start_cell; j<=alexa_spreadsheet.getLastRow() ; j++){
    shopppinglist_spreadsheet.getRange(shoppinglist_start_cell + i + 1,1).setValue(alexa_data[alexa_start_cell + i][2])
    i++;
  }
  settings_spreadsheet.getRange(2,1).setValue(alexa_start_cell + i + 1)
  settings_spreadsheet.getRange(2,2).setValue(shoppinglist_start_cell + i + 1)
}

//GlideApp用の買い物リストでチェックがついたものをクリアする（1日1回）
function delShoppingList(){
  var data = []
  for (var j = 2; j<=shopppinglist_spreadsheet.getLastRow() ; j++){
    if (!shopppinglist_spreadsheet.getRange(j,2).getValue()){
      data.push(shopppinglist_spreadsheet.getRange(j,1).getValue());
    }
    shopppinglist_spreadsheet.getRange(j,1).setValue("")
    shopppinglist_spreadsheet.getRange(j,2).setValue("")
  }
  for (var i = 0; i<data.length; i++){
    shopppinglist_spreadsheet.getRange(i+2,1).setValue(data[i]);
  }
  settings_spreadsheet.getRange(2,2).setValue(data.length + 2)
}
```
## GlideApp
- リストの表示画面を「チェック」にする
- Detailを出すアクションをNoneにする

<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74969/164c2e96-69f0-1ed6-6e5a-9bb71bebe6bb.png">

# 最後に
- SpreadSheetの方をマスタにすることになったので、Alexaの買い物リストがメンテされずにゴミだらけになるのが目に見える
- GlideAppべんりすぎる
slickを用いた画像スライド

# [概要]
1.結論
2.なぜslickを使うのか
3.完成形
4.どのように使うのか
5.ここから学んだこと

# 1.結論
slickの公式サイトからダウンロードして実装する

# 2.なぜslickを使うのか
簡単に実装できるからです。具体的にいうと公式サイトからファイルをダウンロードをして、必要なものを自分のフォルダの中に挿入して、あとは公式のところから載っているものから自分が使用たいデザインを選んで、実装していくだけだからです。

# 3.完成形

![d98aa278e3b051dd8838dcc30161447f.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1043387/44b35fd5-258c-5b4f-4acd-8d0ea41e6c31.gif)


4.どのように使うのか
1)まず表示させたいビューファイルに画像をいくつか記述します。

  ```html:index.html.erb
    <div class="slider"> 
      <div><%= image_tag 'S__19701764.jpg' %></div>
      <div><%= image_tag 'S__19701765.jpg' %></div>
      <div><%= image_tag 'S__19701762.jpg' %></div>
    </div>
  ```
2)次にslickの公式サイトに飛び（https://kenwheeler.github.io/slick/）get it nowのボタンを押してDownload Nowのボタンを押してダウンロードする。

![414a731f179e11742d52ccd935624bc2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1043387/c1906696-2896-911c-9eec-320a2932c059.gif)

3)ダウンロードしたファイルを解凍し、ファイルを自分のフォルダに追加する。
ダウンロードして解凍したファイルを開きslickのファイルを開く。
その中のファイルのajax-loader.gif, fonts, slick-theme.css, slick.css を自分のアプリのCSSファイルに挿入

[![Image from Gyazo](https://i.gyazo.com/e567015668db8edd085f2a047bd97c76.png)](https://gyazo.com/e567015668db8edd085f2a047bd97c76)

4)jsフォルダに上記の画像のslick.jsを追加

5)application.html.erbに追加したファイルを記述
一番上にあるajax.googleapis.comはJQueryの読み込みをしている。

   ```html:application.html.erb
    <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
    </head>
  ```
6)最後に最初のビューファイルに記述した画像の記述の下にjavaScritを記述
この記述は自分がデザインしたい記述をそのままコピーして記述する。私はこのデザインをしたかったのでこの記述をコピーしました！！

[![Image from Gyazo](https://i.gyazo.com/feb2c43cd33e9ed7e22f06854999b39d.png)](https://gyazo.com/feb2c43cd33e9ed7e22f06854999b39d)

```html:index.html.erb   

    <div class="slider"> 
      <div><%= image_tag 'S__19701764.jpg' %></div>
      <div><%= image_tag 'S__19701765.jpg' %></div>
      <div><%= image_tag 'S__19701762.jpg' %></div>
    </div>
     <script>
      $('.slider').slick({
      autoplay:true,
      autoplaySpeed:3000,
      dots:true,
    });
  ```
7)完成！！
これだけで3のような完成形が作られます！！
私はindex.html.erbに記述しましたが、application.html.erbや他のhtmlファイルに記述することもできます。

# 5.ここから学んだこと
最初はうまく写真が反映されなかったりjsが動いてなかったりして苦労しましたが、しっかりと検証ツールを使いどこが間違っているのかを確認することができました！！slick自体の導入はシンプルで簡単なので是非試してみてください！！
　このほかにもたくさんのデザインと自分の記述次第で好きなようにアレンジできるので試してみてください！！
【015_ビュフォンの針】コマ大数学科

#【015_ビュフォンの針】コマ大数学科

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1017176/33afa25d-59f5-3fb1-3b9d-d96187d107d6.png)

```latex
\begin{tikzpicture}
\fill [orange!90!black] (-0.2,-0.2) rectangle (4.2,4.2);
% 縦の線
  \foreach \x in {0,2,4}
  {\draw [very thick](\x,-0.2) -- (\x,4.2);
  \draw (\x,-0.2) -- (\x,-1.2);
  }
% 距離をとる
  \draw [<->](0,-0.5)--(2,-0.5);
  \draw [<->](2,-0.5)--(4,-0.5);
  \node at (1,-0.8) {10cm};
  \node at (3,-0.8) {10cm};
  
% 横の線
  \foreach \x in {0,2,4}
  {\draw (-0.2,\x) -- (4.2,\x);
  \draw (4.2,\x)--(5,\x);
  }
% 距離をとる
  \draw [<->](4.5,0)--(4.5,2);
  \draw [<->](4.5,2)--(4.5,4);
  \node at (5,1) {10cm};
  \node at (5,3) {10cm};
  
% コイン
  \filldraw [fill=yellow!20!white] (1.3,1) circle (0.3) node [font=\tiny]{コイン};
  \draw (1,0.3)--(1,1);
  \draw (1.6,0.3)--(1.6,1);
  \draw [<->](1,0.5)--(1.6,0.5);
  \node at (1.3,0.5)[below,font=\tiny]{3cm};
\end{tikzpicture}

```
Java の UUID は素晴らしい！

ユニークのキーを生成したいと思って、この記事を見つけました。

https://qiita.com/kawasima/items/6b0f47a60c9cb5ffb5c4

まさにこの記事の通りです。素晴らしい。

結論から言うと、UUID version4 が良さそうです。
UUID 以前から知ってましたが、バージョンまであるのは知りませんでした。

じゅあ、どうやってバージョンを調べるの？と調べたら、この記事

http://xawa99.blogspot.com/2013/07/UUID-Version.html

xxxxxxxx-xxxx-<font color="Red"><strong>V</strong></font>xxx-xxxx-xxxxxxxxxxxx
なるほど！

Java 8 で検証してみました。

```java
import java.util.UUID;

public class App {
    public static void main(String[] args) {
        for (int i = 0; i < 10; i++) {
            UUID uuid = UUID.randomUUID();
            System.out.println(uuid);
        }
    }
}
```
結果

```text
3e817ae3-c770-4e43-afc3-4076e7bf1917
8622a167-d6e0-49db-bf7c-879251d7706d
89edf330-7421-4c71-8066-ced5d3d6669e
8a63ab75-de69-45c2-ab7c-9fd788e21a2d
40fd3de0-b8f6-43a5-bdcb-a6dcb44cabf9
f1be93b0-93e4-44f9-bbec-867502e6c9d9
c26ed1d8-2b79-4dbf-b088-ee7e80752018
5591cacd-3d02-4397-908b-37cedab6f760
8fde8770-7776-4171-9b9f-22fde1db5ab5
3c0b6030-64e4-4c73-a1d7-f56eaa6ecfa0
```

java 8 は既にバージョン４ですね！

以上！
ウェ～イなPrintScreenを実現してくれる画面キャプチャソフト『Lightshot』

#PrintScreen押すだけでこう！

Lightshotを使ってる様子だよ。
![t3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/fa00f058-4cb5-97ca-5533-a8cfab52c926.gif)

↓保存された画像。
![Screenshot_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/5a6ac919-9a15-3c95-2cb7-4f5e55d2aaf8.jpeg)

* トリミング
* 枠線
* 矢印
* 文字

画像にちょっと載せたいことをサクッとできる。
ファイル出力せずにクリップボードに保存もできるので、エクセルやTwitterに即貼り付けなんかもOK！

これはとってもウェ～イですね。

#インストール方法

[公式サイトさん](https://app.prntscr.com/en/index.html) へ行ってココ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/0bc1c62e-f59e-fb12-fc74-a0fee2fe93bd.png)

ダウンロードしたexeを起動して使用許諾なんかを確認しつつ進めれば割とすんなりインストール可です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/1c160749-1141-6d7c-14f8-f75b8d8f3deb.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/13a6a817-7783-2cd1-e3fd-d4eb219a9747.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/c921f1de-c1ee-df5a-09af-8e98bf6abdf9.png)

#描画系のモードからトリミングモードへ戻りたい時

Lightshotは正直説明不要なくらい分かりやすいです。（まあ使えば分かる！）

でも、ちょっと使い方に戸惑う場面があった。
それは矢印挿入とかの描画系のモードにした後、再度トリミングモードに戻りたい時。
```Esc``` 押せば戻ります。ただそれだけ…。

#蛇足

誤解を招かないように丁寧に文章をひねり出すより、スクショ撮ってペタッ！した方がちゃんと伝わることって結構あります。

#バージョン
Windows10 Pro バージョン20H2 OSビルド19042.746
Lightshot 5.5.0.7
#Rails redirect_toではhttpリクエストをgetからdeleteに変更できない！？

#Rails redirect_toではhttpリクエストをgetからdeleteに変更できない！？
rails 5.2.2 
を使ってます。

今回はユーザーの退会ボタンを押したら退会処理がなされてかつ、ログアウトされ、ログイン画面に飛ばすような設計にしてそれを実装しようとしていたのですが、そこで問題が発生しました！！

それは退会処理後のログアウトを呼び出そうとして
redirect_to user_sessions_path
を実行したところ、「httpリクエストがgetですよ」とのことでdeleteに修正しようとしたが
残念
redirect_to user_sessions_path, method: :delete
ではできなかった
これ以上解決方法が浮かばなかったのでいろいろ調べたところ
deleteになってしまった場合はstatusコードを編集することでgetにできるらしいが
getからdeleteは無理なようだ・・・
postは指定できないことは知っていたがまだredirect_toに弊害があったとは・・・

皆さんもきおつけてくださいね
僕はこれに2時間近く囚われてしまい悔しいです笑笑
Azure VMにリモアクするためのjump server（bastion）を作ってみた

#はじめに
　Azureに立てたVMにリモアクする際には、大体の場合global IPアドレスを宛先にしたリモートデスクトップ接続をすると思いますが、DataBaseなどglobal IPアドレスを振りたくない、Internetに口を開けたくないようなものもあるはずです。
　そのような場合に、Internetに口を開けずに接続を可能にする方法が、Azure Bastion（jump server）を使用するものです。

#Azure Bastionとは
　ぶっちゃけ[こちら](https://docs.microsoft.com/ja-jp/azure/bastion/bastion-overview)のサイトを読んで[こちら](https://docs.microsoft.com/ja-jp/azure/bastion/quickstart-host-portal)の手順に則れば簡単に使用できるので、以下の記事を読む必要はありません。。
　が、この記事の一番の読者は私なので気にせず書き連ねます。
##メリット
　・VMにglobal IPを割り当てずともブラウザからリモアクできる。
　・そのVMを踏み台にして、DBなど外界（Internet）と完全に隔絶させたいVMにアクセスできる。
##特徴
　・VMなどのアプライアンス単位ではなく、VNET単位でデプロイする。「AzureBastionSubnet」というsubnet上のVMにデプロイされたVMのすべてが対象。


#使用したリソース（と名前）
・VM2台（subnetAvm, subnetBvm）
　＊OSやスペックは何でも。個人的な簡単のためWindows Server 2016 DataCenter
・VNET（forFW-vnet）
・Azure Bastion（forFW-vnet-bastion）

#全体構成
　こんな感じ。ユーザがchromeとかからAzure portalにアクセスし、portalからAzure Bastionにアクセスする。そして、Bastionから本命のsubnetAvmにリモートデスクトップアクセス。
![overview.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469705/0ea5c0d7-0f5c-adae-d29f-127d490078ec.png)

#VNETの作成
　こんな感じで全体のセグメントを切って、subnetに分割します。AzureFirewallSubnetは気にしないで。
　AzureBastionSubnetは、この時点では作成していません。要はsubnetAとsubnetBだけ作っておけばOK。
![VNET_subnet.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469705/eeceb1cc-044c-7bde-c01b-a9cf71a4bf65.png)

#リモアクしたい本命のVMの作成
　こんな感じで作ります。VMにはsubnetBを適用します。
![subnetBvm_overview.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469705/690862e9-28d8-8973-b1d4-d03658081ea6.png)

#Azure Bastionの作成
##VMの作成
　こんな感じで作ります。VMそのものには、subnetAを適用します。
![sunbetAvm_overview.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469705/101e9c80-d052-9dea-1cdf-1d895a205a7b.png)
##Bastionでの接続
![bastion_1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469705/65acc269-032d-97c4-bacf-ccd0d5577b61.png)
　Bastionに適用するsubnetの名前はAzureBastionSubnet。これを新規に作成します。サブネット長は少なくとも/27で。
##結果
　こんな感じの画面から、ユーザ名/パスワードを入力します。
![bastion_result.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469705/1ba47bae-e35f-3b8a-cda8-1841d8809290.png)
　接続したらこんな感じ。使っている母体のPCのブラウザから、VMにアクセスできていることが確認できます。
![bastion_result2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469705/c1a652f0-693b-1e05-063d-81984ae3e3a2.png)
　Bastionから本命VMにリモアク成功。
![bastion_result3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469705/a19ad2b3-3596-941b-7263-67ff3997b483.png)

#ちなみに
BastionのNICにあたっているNSGにRDPのInboundをpermitする設定がなかったら、リモアクはできないのでご注意ください。
##超絶ちなみに
「bastion」の意味は、「要塞」「防御のかなめ」。発音は「バスション」。

#まとめ
　ということで、Azure Bastion（通称jump server）を作成し、InternetにVMを晒すことなくアクセスすることが可能になりました。まさに防御の要って感じですね。
おしまい。

#参考資料
[Azure Bastion とは](https://docs.microsoft.com/ja-jp/azure/bastion/bastion-overview)
[クイックスタート: ブラウザーを使用してプライベート IP アドレスで VM に安全に接続する](https://docs.microsoft.com/ja-jp/azure/bastion/quickstart-host-portal)
Next.jsの環境構築とメリット

# 参考
vercel社が提供するNext.js公式チュートリアル引用でございます。まるパクリです。
また、YouTubeで発信されている[トラハックさん](https://www.youtube.com/channel/UC-bOAxx-YOsviSmqh8COR0w)の動画がNext.jsを学習する上でめちゃくちゃ分かりやすかったです!!
誠に勝手ながら紹介させていただきました。

## Next.jsで環境構築を行うメリット
1.Babel+Webpackの複雑な環境設定が不要
2.Code Splittingのような最適化設定が不要
3.パフォーマンスやSEOのためのpre-render設定が不要
4.Renderingのタイミングを選択できる(CSR,SSR,SSG)
5.サーバーサイドの処理（api）を簡単に実装できる


## Next.js環境構築
※注意 
- Windowsの方はUnixコマンドを使えるgit bashを用いてください。
- nodeが入っている前提です

```
$ npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
```

succesfully!でプロジェクトができたら、
```
$ cd nextjs-blog(プロジェクト名)
```

```
$ npm run dev
```
ローカルサーバーを立ち上げ 
http://localhost:3000/
を開く

# 終わりに
Next.jsのコミュニティは活発でアップデートも盛んなところが面白い！！:relaxed:
Git 【ブランチとマージの操作】

#はじめに
学習用のメモになります。

#1.ブランチ

##ブランチを新規作成
```
git branch <ブランチ名>
git branch feature
```
このコマンドはブランチを作成するだけでブランチの切り替えまでは行わないよ。

＊HEAD：今いるブランチを示している。
##ブランチを切り替える

```
git checkout <既存ブランチ名>
git checkout feature

#ブランチの新規作成して切り替える
git checkout -b <新しいブランチ名>
```
-bオプションをつけると、ブランチの作成と切り替えを一度にしてくれます。
ブランチを利用することで分岐して作業ができます。

##ブランチの一覧を表示
```
git branch

#全てのブランチを表示する
git branch -a
```

##ブランチの変更・削除する

```
#変更する
git branch -m <ブランチ名>
git branch -m new_branch
```
自分が今作業しているブランチの名前を変更するよ

```
#削除する
git branch -d <ブランチ名>
git branch -d feature

##強制削除する
git branch -D <ブランチ名>
```
masterにマージされていない変更が残っている場合削除しない。

##ブランチを利用した開発の流れ
masterブランチをリリース用ブランチに、開発はトピックブランチを作成して進めるのが基本。


#2.マージ
マージとは、他の人の変更内容を取り込む作業のこと

```
git merge <ブランチ名>
git merge <リモート名/ブランチ名>
git merge origin/master
```
作業中のブランチにマージします。

##マージの種類
###1.Fast Foward
早送りになるマージ
ブランチが枝分かれしてなかったときはブランチのポインタを前に進めるだけ

###2.Auto Merge
基本的なマージ
枝分かれして開発していた場合、マージコミットという新しいコミットを作る。
これによって変更履歴を統合する。


#3.コンフリクト
コンフリクトはどういった時に起こるのかいうと、同じファイルの同じ行に対して異なる編集を行った時に起こります。

##コンフリクトの解決の仕方
```
#具体例（コンフリクトしたファイル）
<h1>Gitチュートリアル</h1>
<<<<<<<HERD
<p>git addについて学ぼう</p>
=======
<p>git commitを知ろう</p>
>>>>>>>feature
```
<<HERD~==:HEADの変更分
==~>>feature:featureの変更分

```
#解決したファイル
<h1>Gitチュートリアル</h1>
<p>git addについて学ぼう</p>
<p>git commitを知ろう</p>
```

①ファイルの内容を書き換える
②「<<」　「==」　「>>」の記述を削除する
③再度`git add`→`gitcommit`をする

##コンフリクトを起こさない方法（防止策）
・複数人で同じファイルを変更しない
・pullやmergeする前に変更中の状態をなくしておく(commitやstashをしておく)
・pullするときは、pullするブランチに移動してからpullする
Railsで並び替え機能を実装する

##自己紹介
初めてQiitaに記事を投稿します。
9月から独学でプログラミング学習を開始し、
11月からスクールを使って学習しています。
現在はポートフォリオの作成中です。
知識を定着させるために、学びをアウトプットします。
また、これから学び始める方の参考になることを願っています。
***
##開発環境
- Ruby 3.0
- Ruby on Rails 6.0.3.4

#並び替え機能を実装する

現在、映画情報を保存するための```Movie```というテーブルがあるとします。
まずは```Movie```モデルを編集します。

```rb
class Movie < ApplicationRecord

  scope :sort_movies, -> (sort) { order(sort[:sort]) }
  scope :sort_list, -> {
    {
      "並び替え" => "",
      "作成の古い順" => "updated_at ASC"
      "作成の新しい順" => "updated_at DESC"
    }
  }
```
情報を取得し並び替える為の```:sort_movies```と、
並び替える方法を指定する```:sort_list```を追加しました
これらを使って、
```app/controllers/movies_controller```の```index```を編集します。

```rb
class MoviesController < ApplicationController
  def index
    if sort_params.present?
      @movies = Movie.sort_movies(sort_params)
    else
      @movies = Movie.all
    end
    @sort_list = Movie.sort_list
  end


  private
    def sort_params
      params.permit(:sort)
    end
```
ここではif文を用いて、並び替えを行った時と行わなかった時を場合分けしています。
```@sort_list```はビューの並び替え項目で使用します。
また、並び替えの情報は```sort_params```というメソッドを通して受け取っています。
最後に、```app/views/movies/index.html.erb```に並び替えを追加します。

```erb
<%= form_with movies_path, method: :get do |f| %>
  <% if @sorted.present? %>
    <%= f.select :sort, @sort_list, selected: @sorted, onChange: "javascript: this.form.submit();" %>
  <% else %>
    <%= f.select :sort, @sort_list, {}, onChange: "javascript: this.form.submit();" %>
  <% end %>
<% end %>
```
javascriptを使用し、
並び替え項目```@sort_list```を選択した時に、
並び替える情報が```:sort```に送られるようになっています。

---
その他、必要に応じて、並び替えたい項目は
```:sort_list```に追加することで使用できます。


```vb
  "表示される名前" => "並び替えに使うカラム 並び順の指定"
```
##(追記: 2021/2/7)
上記の方法では**セキュリティの問題**がありました。
下記を参考に修正して下さい。
>Railsの並び替え機能のセキュリティを改善する。
https://qiita.com/KON-ch/items/a22863d269503261fbb7

以上で並び替え機能の実装は終了です。
[react]reactプロジェクトを作成、コンポーネント呼び出し

# Reactを学びたい
React開発の初期構築手順、コンポーネント呼び出しの仕方の学習を記録します。自宅で学習したことの個人用メモ程度ですが、参考になる方がいらっしゃれば嬉しいです。環境はMacです。

# 作成しましょう
nodeはインストール済みです。
コマンドは以下の通り。

```bash:プロジェクト作成
npx create-react-app my-app
```
※ちなみに一度以下エラーになったんですが、大文字のアプリケーション名は使用できないようですね。なんでだろう・・・
> * name can no longer contain capital letters


とりあえず作成できました。サーバを動かすとローカル起動ができて画面が見られます。

``` bash:サーバ起動
npm start
```

![スクリーンショット 2021-01-16 15.39.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504218/de5f5146-15f4-0d50-d1db-ad9bc70102e4.png)


# いろいろいじってみる
標準のApp.jsを以下のように変えてみました。

```js:App.js
import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';

import PageOne from './pages/Pageone';

const PageTwo = () => {
  return (
    <div>
      PageTwo
      <Link to="/">
        <button>
          show PageOne when you click this!!
        </button>
      </Link>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <BrowserRouter>
        <div>
          <Route path="/" exact component={PageOne} />
          <Route path="/pagetwo"  component={PageTwo} />
        </div>
      </BrowserRouter>
    </div>
  );
};

export default App;

```
ここでは`router`とコンポーネントの呼び出しを書いてみてます。
参考にさせていただいたページ→[React Routerでのページ遷移を簡単に説明](https://qiita.com/kuropp/items/0490c26f85bcdd181cb1)

あとせっかくなのでコンポーネントを分割してみました。
PageOneというコンポーネント（ページ？）をpagesというフォルダに別出ししています。

中身はこんな感じ。

``` js:PageOne.js
import React from 'react';
import { Link } from 'react-router-dom';

import Aisatsu from '../components/Aisatsu';

const PageOne = () => {
    
    return (
      <div>
        <Aisatsu greet="こんにちは！" />
        PageOne
        <Link to="/pagetwo">
          <button>
            show PageTwo when you click this!!
          </button>
        </Link>
      </div>
    );  
  }


  export default PageOne;
```

`export default`というのが、コンポーネントを呼び出すためには必要らしいです。
また、Aisatsuというコンポーネントを呼んでいます。
Aisatsuはこちら。

``` js:Aisatsu.js

import React, { Component } from 'react';

class Aisatsu extends React.Component {
    render() {
      return (
        <h1>{this.props.greet}</h1>
      );
    }
  }

export default Aisatsu;

```

propsの使い方などもなんとなくわかりました。

ちなみに画面はこんな感じ。
![スクリーンショット 2021-01-16 17.59.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504218/2f621a11-0eb5-2180-efc2-ef423dce2332.png)


とりあえずは勉強あるのみということで・・・。
引き続き作っていきます。
【Spring】@SessionAttributesでセッションオブジェクトでオブジェクトを持ち回りたいのに・・・

###No primary or single public constructor found for interface java.util.List
このエラーに５時間位かかりましたね。意味わからんかったー
結局セッションオブジェクトの扱い方がわかっていなくて、コントローラーのメソッドの引数に@ModelAttributeなしで`List<Integer> ListInt,`みたいに渡してて、これがアカン買ったようです。

###大まかなイメージ
1. セッションに置きたい名前を準備
2. その名前にオブジェクトを結びつける
3. model.addAttributeでセッションに保存する
4. メソッドの引数に@ModelAttributeをつけてセッションから取得


###実装する場所
####コントローラーの上に

```java
@SessionAttributes( value="〇〇")
```
`〇〇`にはオブジェクトの名前（属性名）


####コントローラーの中の一番上に@ModelAttributeでオブジェクトを準備

```java

@ModelAttribute( value = "〇〇" )
public △△型 setUp〇〇(){
 return new △△();
}
```

セッションのコンストラクタ？
これで、〇〇という名前の△△型のオブジェクトが準備される


####メソッドの引数に@ModelAttributeでセッションから取得

```java
public method(
 @ModelAttribute("〇〇") △△型 〇〇,
 Model model
){
```
modelも必要でした

###メソッド内で

```java
model.addAttribute("〇〇", 〇〇)
```
ここでセッションの中の"〇〇"という名前でオブジェクトを保存することができます


###別のコントローラーでは@ModelAttribute無しでも持ち回れたんだけど・・・

基本がわかっていないからこういうことになるんですけど、まだまだ駆け出しなのでうまく行ったものを正解だと思って同じようにやってるんだけど、ちょっと変わってくるとエラーが出て「さっきはできてたやん！！」って叫びたくなりませんか？？！！

まあ勉強にはなるんですけど、、、、
(UE4)夕暮れっぽい色味を作りたい

○今回の議題
DirectionalLightとSkyLightの使い方。
___
ボール転がしゲーム制作中。
ステージ以外、空も地面も何も見えないこの景色。
![スクリーンショット 2021-01-21 20.29.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939279/e7d0792c-e734-db15-d077-7b3bda8a47b1.png)
流石に味気ないので、もう少し見栄えを考える。
（というかライティングとかを何も考えてなかった。）
___
なんとなく、"場所は屋外で空に浮いているイメージ（マリオサンシャインのパチンコステージみたいな）"があったので、「夕暮れ時にポツンと浮かんでたりしたらかっこ良さそう」と思い、光の加減で表現できないか試すことにした。
##DirectionalLight
とりあえずDirectionalLightを入れて色を付けてみた。

![スクリーンショット 2021-01-21 20.31.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939279/f03615d3-e929-2870-966a-0ac78497df1c.png)
**影が濃すぎる。**
デフォルト10luxで照らされると、一方向からの光が強すぎてどうしても陰影が目立ちすぎてしまう。
もう少し広くやんわり影響する光が欲しい。
##SkyLight
ネットの情報を頼りに、次に使ったのがSkyLight。
これはレベル全体を照らしてくれるライトで、あるのとないのでは大違いらしい。

早速設定してみた。
![スクリーンショット 2021-01-21 20.32.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939279/b38694d3-44f3-648c-bf6d-e3b8d2b6c735.png)
確かにめちゃくちゃ変わる。
陰影のコントラストが薄まって、全体的に柔らかい印象になった。

ただこれだと柔らかすぎて、夕暮れ時の赤く焦がれる様な雰囲気が足りないので、少し色や明るさを調整する。
![スクリーンショット 2021-01-21 20.32.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939279/5d3492eb-dfb4-9087-8d2a-5b30d724e034.png)
・CubemapResolution…処理された最上部のキューブマップMIPの最大解像度。値は2の累乗で設定可能。
・SkyDistanceThreshold…スカイライトからオブジェクトまでの距離。いじった限り0か1かで変化した。
・IntensityScale…スケーリングの強度
![スクリーンショット 2021-01-21 20.32.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939279/577e13a8-da45-7178-81fb-caede326c1e2.png)
結果こうなりました。大分夕暮れっぽくなった様な。
___
最初↓
![スクリーンショット 2021-01-21 20.29.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939279/0dcf96db-d4a8-74c1-4b82-22eadd97b67b.png)
結果↓
![スクリーンショット 2021-01-21 20.32.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939279/abbe4940-85cd-ab06-6318-1b02e9b2eddb.png)

見栄え的には大きく変わった。
当たり前だけど、やっぱりライティングってめちゃくちゃ大事だってことが改めてわかりました。

でも「夕暮れ時にポツンと浮かんでいる」ようには全く見えないので、まだ検討が必要。

##メモ
UE4で扱うライトには、大きく分けて直接光と間接光がある。
・直接光…物体に直接あたってるライト
・間接光…他の物体にあたって反射した結果のライト
UWFフィルターの有効か無効かだけを抽出してコマンドプロンプトから知る方法

Windows 10 IoT LTSB とかに付いてくる書き込みフィルター、いわゆる書き込み保護のコマンドについて。

**統合書き込みフィルター処理 (UWF) 機能 | Microsoft Docs**
https://docs.microsoft.com/ja-jp/windows-hardware/customize/enterprise/unified-write-filter

**uwfmgr.exe | Microsoft Docs**
https://docs.microsoft.com/ja-jp/windows-hardware/customize/enterprise/uwfmgrexe

`uwfmgr get-config`の表示が長ったらしく、フィルタの有効か無効かだけをコマンドプロンプトから知る方法。
なんと、`uwfmgr get-config | find "状態"`とかってやると、なんとパイプを通る時に文字化けするという謎仕様。
PowerShellを使って文字コードを変えようにも、そもそもパイプ通る時に「標準出力が文字化け」してる感じなので、「Out-File -Encoding default」とかでも無理でどうしようもない。

解決方法は以下。
PowerShellから、WMIオブジェクトのプロパティを見ればいいらしい。

```check_uwf_filter.bat
@echo off
::管理者権限のチェック
openfiles >nul 2>&1
if errorlevel 1 (
    echo "管理者権限で実行してください。"
    pause
    exit
)

::WMIオブジェクトの「UWF_Filter」のプロパティを確認する
powershell $COMPUTER = \"localhost\";^
$NAMESPACE = \"root\standardcimv2\embedded\";^
$objUWFInstance = Get-WmiObject -Namespace $NAMESPACE -Class UWF_Filter;^
if($objUWFInstance.CurrentEnabled) { ^
    $CurrentStatus = \"有効\";^
} else { ^
    $CurrentStatus = \"無効\";^
} ^
if($objUWFInstance.NextEnabled) { ^
    $NextStatus = \"有効\";^
} else { ^
    $NextStatus = \"無効\";^
} ^
echo \"ライトプロテクト状態\";^
echo \"　現在　　　: $CurrentStatus\";^
echo \"　次回起動時: $NextStatus\";

::表示残すため一時停止
pause

```

はぁ、めでたしめでたし。しかし糞仕様過ぎないか・・・。
![check.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364698/e0139a15-9fa8-2cfa-8677-64fd1a06f171.png)


##参考サイト

**VBSにてUWFの有効状態を確認できない**
https://social.technet.microsoft.com/Forums/ie/ja-JP/d4ac515a-c547-4a69-97da-3bbd8042c214/vbsuwf?forum=win10itprogeneralJP
jsとhtmlでメモ化を実践

お世話になっている本
[もっとプログラマ脳を鍛える数学パズル(増井 敏克 (著))](https://www.amazon.co.jp/%E3%82%82%E3%81%A3%E3%81%A8%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E8%84%B3%E3%82%92%E9%8D%9B%E3%81%88%E3%82%8B%E6%95%B0%E5%AD%A6%E3%83%91%E3%82%BA%E3%83%AB-%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0%E3%81%8C%E8%84%B3%E3%81%AB%E3%81%97%E3%81%BF%E8%BE%BC%E3%82%8070%E5%95%8F-%E5%A2%97%E4%BA%95-%E6%95%8F%E5%85%8B/dp/4798153613)
です。ありがとうございます。

今回はその中の序章、メモ化を利用して席に座れる人数のMax値と人数を入力すると席に座る人が2人以上である座り方の組み合わせの数を教えてくれるwebアプリを作りました。
大人数で行ったときに便利ですね。(便利ではない)

```
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>sample1</title>
</head>
<body>
  <form id="form1" action="#">
    <p>人数</p>
    <input type="text" id="input_message" value="">
    <p>テーブルmax</p>
    <input type="text" id="input_message2" value="">
    <input type="button" onclick="func1()" value="送信">
  </form>
  <div id="output_message"></div>
  <script language="javascript" type="text/javascript">
  function func1() {
    
    var N = document.getElementById("input_message").value;
    input = check(N,2);
    document.getElementById("output_message").innerHTML = input;
    //input = String(check(N,2,M));
  }


  var memo = {};
  function check(remain,pre){
    var M = document.getElementById("input_message2").value;
    //console.log("remain,pre:"+ remain,pre);
    if(memo[[remain,pre]]) return memo[[remain,pre]];

    if(remain < 0) return 0;
    if(remain == 0) return 1;
      
    var cnt = 0;
    for(var i =pre; i <= M; i++){
          cnt += check(remain -i,i);
          //console.log("cnt"+ cnt);
        }

    return memo[[remain,pre]] = cnt;
}
    func1();
  </script>
</body>
</html>
```

jsはしっかりと勉強したことはなかったのですが、変数の宣言とかがないのは楽だけどfunc1()みたいに言わないと実行しないことにずっと気づけなかったりしたのがちょっと大変だった。
メモ化っていうのは、実行時間を早めたり無駄を省くみたいでいろいろいじくりながら理解できた？
まあでもめちゃくちゃ回帰しててイメージとしては、組み合わせを調べるためにツリーを全部書いてるような気分。
もう一つ二重配列で考えるのがあってそっちの方が感覚的にはわかりやすかった。

あとはhtmlとくっつけるのが意外と大変。web系はあんまり興味なかったから。でも調べながらなんとかできて先人様様ありがとうございます。という感じです。
PokéAPIで取得できる値の紹介（タイプ編）

はじめまして、佐藤です。
ポケモンだいすきエンジニアです。

[公式ドキュメント](https://pokeapi.co/docs/v2)を参考にPokéAPIを利用して取得できる値の紹介をしたいと思います。
今回は「タイプ」編となります。（ポケモンに関する用語を多少知っていないと意味がわからないかもしれません）

# PokéAPIとは（ざっくり）
莫大なポケモンの情報を取得することができるRESTful-APIです。
https://pokeapi.co/

# 値の取得方法
情報を取得するだけであれば非常に簡単です。
情報が知りたいタイプに合わせて以下のURLを実行すれば、
そのタイプに関連する情報がJSON形式で表示されたページにアクセスできます。

```URL
https://pokeapi.co/api/v2/type/{id or name}/
```

idとnameはそれぞれ以下のように対応しています。
たとえば、でんきタイプの情報が知りたい場合は以下のどちらかのリンクからアクセスすることができます。
https://pokeapi.co/api/v2/type/13/
https://pokeapi.co/api/v2/type/electric/

| id | name | タイプ名 |
|:-:|:-:|:-:|
|1|normal|ノーマル|
|2|fighting|かくとう|
|3|flying|ひこう|
|4|poison|どく|
|5|ground|じめん|
|6|rock|いわ|
|7|bug|むし|
|8|ghost|ゴースト|
|9|steel|はがね|
|10|fire|ほのお|
|11|water|みず|
|12|grass|くさ|
|13|electric|でんき|
|14|psychic|エスパー|
|15|ice|こおり|
|16|dragon|ドラゴン|
|17|dark|あく|
|18|fairy|フェアリー|

# 取得できる値
[じめんタイプ](https://pokeapi.co/api/v2/type/5)を例に取得できる値を見てみます。

## id
PokéAPIにおける識別子
`"id":5`

## name
PokéAPIにおける名称
`"name":"ground"`

## damage_relations
タイプ相性の詳細
`{"damage_relations":"no_damage_to":[{"name":"flying"...}`

### no_damage_to
攻撃側で効果がない（無効）タイプ
`"no_damage_to":[{"name":"flying","url":"https://pokeapi.co/api/v2/type/3/"}]`

### half_damage_to
攻撃側で効果がいまひとつ（半減）になるタイプ
`"half_damage_to":[{"name":"bug","url":"https://pokeapi.co/api/v2/type/7/"},...]`

### double_damage_to
攻撃側で効果が抜群（2倍）になるタイプ
`"double_damage_to":[{"name":"poison","url":"https://pokeapi.co/api/v2/type/4/"},...]`

### no_damage_from
防御側で効果がない（無効）タイプ
`"no_damage_from":[{"name":"electric","url":"https://pokeapi.co/api/v2/type/13/"}]`

### half_damage_from
防御側で効果がいまひとつ（半減）になるタイプ
`"half_damage_from":[{"name":"poison","url":"https://pokeapi.co/api/v2/type/4/"},...]`

### double_damage_from
防御側で効果が抜群（2倍）になるタイプ
`"double_damage_from":[{"name":"water","url":"https://pokeapi.co/api/v2/type/11/"},...]`

## game_indices
そのタイプに関連する世代情報のリスト
`"game_indices":[{"game_index":4,"generation":{"name":"generation-i","url":"https://pokeapi.co/api/v2/generation/1/"}},...]`

## generation
そのタイプが初めて登場した世代
`"generation":{"name":"generation-i","url":"https://pokeapi.co/api/v2/generation/1/"}`

## move_damage_class
わざにおける分類（ダメージなし（変化）/物理/特殊 の3種類）
この場合は第3世代までにおける物理/特殊区分と考えて良い[^1]

[^1]: 第4世代以降はわざごとに物理/特殊がわかれているが、第3世代まではタイプごとに物理/特殊がわかれていた
`"move_damage_class":{"name":"physical","url":"https://pokeapi.co/api/v2/move-damage-class/2/"}`

## names
各言語での名称のリスト
`"names":[{"language":{"name":"ja-Hrkt","url":"https://pokeapi.co/api/v2/language/1/"},"name":"じめん"},...]`

## pokemon
そのタイプをもつポケモンのリスト
`"pokemon":[{"pokemon":{"name":"sandshrew","url":"https://pokeapi.co/api/v2/pokemon/27/"},"slot":1},...]`

## moves
そのタイプのわざのリスト
`"moves":[{"name":"sand-attack","url":"https://pokeapi.co/api/v2/move/28/"},...]`

# あとがき
PokéAPIを使う際の参考になれば幸いです。

今回、はじめてQiita記事を書きました。
今後もPokéAPIやポケモンの話やその他技術について書いていきたいと思います。
iPhoneの壁紙に飽きたので、毎日いいカンジの壁紙を設定してほしい

:::note
2021/11/23 流石に内容が薄かったので追記・編集しました。
:::
---
iPhoneを使い始めてしばらく経ちましたが、壁紙を見飽きてしまいました。
毎日ちがう壁紙を設定したい！しかも自動で変更してほしい！探すのも面倒なので、いいカンジの壁紙を見繕って来てほしい！

そんなワガママを叶える夢のような（？）**ショートカット**作りました。

##いいカンジの壁紙を探す
日替わりで、いいカンジの壁紙となる画像データを手に入れなければなりません。
今回、パッと思いついたのは**[Bing](https://www.bing.com)**とWindowsスポットライトでした。
（WindowsスポットライトはWindowsのロック画面のバックグラウンド画像を日替わりで表示する機能です）

今回は、**Bing**を使うことにしました。
毎日いい感じに変わり、PC/スマホ用の壁紙データも用意されていました。（Bingトップページにダウンロードするリンクがあります）
WindowsスポットライトもAPIがあると思うのですが、探すのが面倒だったのと、スマホ用にトリミングされたデータがあるのか不明だったためです。

##ショートカットを作る
ショートカットアプリを使用して、壁紙を変更するショートカットを作りましょう。
今回、ショートカットアプリを使ってみて、想像以上に色々なことができる事がわかり、可能性を感じました。

ショートカットのフローとしては

0. Bingから画像データを取得する
0. 壁紙を変更する

の２ステップで、とても簡単・・・だと思っていました。

###BingのAPIから画像データを取得する
Bingの日替わり画像のAPIから**json**データとして画像データのURLや情報を取得することができました。
https://www.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1&mkt=ja-JP

取得したjsonデータの**urlbase**の値、**images**コレクションの最初の値を使用すると、画像データのURLを構築できそうです。

0. Web > Webリクエスト > URL　を使いAPIにGETリクエスト
0. スクリプティング > 辞書 > リストから選択 を使い、**urlbase**　の値を取得
0. スクリプティング > 辞書 > リストから項目を取得 を使い、上のデータから**images**の値を取得
0. スクリプティング > 辞書 > リストから選択 を使い、上のデータの最初の項目を取得
0. 書類 > テキスト編集 > テキストを結合　を使い、https://bing.com と**urlbase**、**images**の値を結合します
0. Web > Webリクエスト > URL　を使い結合したテキスト（URL）の内容を取得

ここまでで、やっと画像データが取得できました。
デバッグには、書類 > プレビュー >　結果を表示＆クイックルックが便利でした。

###壁紙を変更する
画像が手に入ればあとは簡単、壁紙を変更するだけです。
壁紙を変更する処理は、ある程度新しいiOSでないと使用できないようです。（14以上？）

0. スクリプティング > システム >　壁紙を設定 を使い、取得した画像に壁紙を変更します。

###オートメーションで実行する
あとは、**オートメーション**タブから、作成したショートカットを実行するだけです。
好きなタイミングで実行しましょう。

##最終的にこうなりました

|![IMG_0664.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35312/9a673deb-25b0-4a9d-49f1-278697f77bda.png)|![IMG_0665.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35312/66568e05-cf64-2f42-1241-74c0b57995da.png)|
|:-:|:-:|

##作成したショートカットを共有します
作成したショートカットの共有リンクを掲載しておきます。
手作りするのもめんどくさい！という方はご利用ください。
https://www.icloud.com/shortcuts/b7e93e431f084f85a6030f6f59d09700

今回はBingを使いましたが、いい感じの画像をゲットできるAPIなどがあれば、お好みで上記ショートカットをカスタマイズすると良いと思います。
今回、APIを叩いてjsonからデータを取得したりしていますが、そこまでできれるのであれば何とでもなると感じられるのではないでしょうか。
閲覧用の固めで美しいゴシック体フォントをWindowsで用意する方法

#経緯
Richtyを知ってから、フォント沼にハマり、エディタでは白源に落ち着き、使っていました。

**【文字幅 半角3:全角5 も追加】Ricty を神フォントだと崇める僕が、フリーライセンスのプログラミングフォント「白源」を作った話 - Qiita**
https://qiita.com/tawara_/items/374f3ca0a386fab8b305

Webブラウザ（Chrome)でも綺麗なフォントで見たいな。でも白源に設定したら全角スペースとか見えるのダサいなーと思って色々調べてみたところ・・・。
白源の元になったのは、源柔ゴシックだと分かり、これを入れるとなかなか良い！

**源柔ゴシック (げんじゅうゴシック) | 自家製フォント工房**
http://jikasei.me/font/genjyuu/

ただ、源柔ゴシック (ウェイト：Normal) だと、仕事中に眺めるには少し柔らかすぎ、もう少し硬いイメージのフォントがいいなぁと思っていると、源柔ゴシックも源真ゴシックを柔らかくした物という事が判明し、これだ！と思いました。

**源真ゴシック (げんしんゴシック) | 自家製フォント工房**
http://jikasei.me/font/genshin/

ただ、これを入れて Chrome に設定すると、Windowsがおバカなのか、アンチエイリアスが汚く文字が潰れたりします。

>表示サンプル 源真ゴシック
>![genshin_default.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364698/9f0fa710-9b69-f3d0-d180-d7c168bf6454.png)


そこで、見つけたのがこちら。

**(M+とか)ブラウザ, VSCodeで表示が汚くなるフォントを救え！【シェルスクで自動化編】 - Qiita**
https://qiita.com/AumyF/items/4f625ebd47603efaac7a

どうやら源真ゴシックは、同じ作者なのにヒンティング情報が良くないみたいで、ヒンティング情報を削除したフォントにすると綺麗になります。
結果はこちら。

>表示サンプル 源真ゴシック ヒンティング削除版
>![genshin_nohinted.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364698/0b26332d-11b5-6f4f-a35f-86eb7669fe60.png)

あぁ素晴らしいですね・・・。


#源真ゴシックからヒンティング情報を削除したフォントを生成する方法

WSLさえ入れていれば思ったほど面倒じゃなかったので、やってみてください。

######１．源真ゴシックをダウンロードしてデスクトップにフォルダ作って解凍

**源真ゴシック (げんしんゴシック) | 自家製フォント工房**
http://jikasei.me/font/genshin/

######２．WindowsにWSLをインストール
インストール方法はインターネット上で多数見つかると思うので、調べてみてください。

######３．WSLに必要な物をインストール

```WSL.
sudo apt install ttfautohint woff2
```

######３．ヒンティング情報をフォントファイルから削除し再生成

下記スクリプトを作成し、先ほど解凍したデスクトップ内の源信ゴシックのフォルダに入れる。
※ スクリプトの改行コードは「LF」で保存してください。「CRLF」で保存すると実行時に「～^M」なんとかってエラーが出ます。

```unhint.sh
#! /bin/bash
for file in $1*.ttf
do
    ttfautohint -dF " Unhinted" "$file" "unhinted-${file}"
    woff2_compress "unhinted-${file}"
done
```

あとは、WSL上で実行するだけ。
スクリプトと同じフォルダ内の全.ttfファイルから、ヒンティング情報が削除され、「unhinted-*」というフォントが生成されます。

```WSL.
cd /mnt/c/Users/[ユーザ名]/Desktop/[源真フォントのフォルダ]/
./unhint.sh
```

これで、フォルダ内に、「unhinted-*」という名前のフォントが生成されているので、お好みのウェイトの物をインストールしてください。
個人的には、「unhinted-GenShinGothic-Normal.ttf」が良かったです。
KotlinでMapとListをfor文で操作しよう！


### Key:Valueが1:1のMapをListにする

```Kotlin:
  // 1:1
  val map = mapOf("key1" to "val1", "key2" to "val2", "key3" to "val3")
  // mapのすべてのvalueが格納される
  val valueList = ArrayList(map.values)
  var list: MutableList<String>
  list = ArrayList()
  list.addAll(valueList)
```
### 1:1のMapを条件分岐でListに格納する

```Kotlin:
  val map = mapOf("key1" to "val1", "key2" to "val2", "key3" to "val3")
  val valueList = ArrayList(map.values)

  // key1のvalueがarray変数に格納される("val1")
  var araay = map.get("key1").toString()
  // itemは0からはじまる
  for (item in valueList.indices){
      // val1がvalueListにある場合はListに追加
      if (araay.contains(valueList[item])){
          list.add(valueList[item])
      }
  }
```

### Mapのvalueを配列にしてネストさせる(1:n)

```Kotlin:
  // 1:n
  val mapArray = mapOf("keyX" to arrayOf("valA","valB", "valC").map { num -> num },
                       "keyY" to arrayOf("valD","valE").map { num -> num })
  val valueArrayList = ArrayList(mapArray.values)
```

### 1:nのMapを条件分岐でListに格納する

```Kotlin:
  // 1:n
  val mapArray = mapOf("keyX" to arrayOf("valA","valB", "valC").map { num -> num },
                       "keyY" to arrayOf("valD","valE").map { num -> num })
  val valueArrayList = ArrayList(mapArray.values)

  var araay = mapArray.get("keyX").toString()
  for (item in valueArrayList.indices) {
      // ネストしている配列の要素数だけループする
      for (i in valueArrayList[item].indices) {
          if (araay.contains(valueArrayList[item].get(i))) {
             list.add(valueArrayList[item].get(i))
          }
      }
  }
```
ubuntu20.04LTSへのROS2 Foxyのインストール

(2021/08/01更新)
ubuntu20.04LTSにROS2 Foxyをインストールしたので手順をメモしました。
基本的には公式のインストールガイド通り
https://index.ros.org/doc/ros2/Installation/Foxy/Linux-Install-Debians/

自分の場合、すでにROS Noeticが入っていたので.bashrcの以下をコメントアウトしました。

```bash
# source /opt/ros/noetic/setup.bash
# source ~/catkin_ws/devel/setup.bash
```

変更した設定を反映

```bash
$ source ~/.bashrc
```



# APTリポジトリの追加
```bash
$ sudo apt update && sudo apt install curl gnupg2 lsb-release
$ sudo curl -sSL https://raw.githubusercontent.com/ros/rosdistro/master/ros.key  -o /usr/share/keyrings/ros-archive-keyring.gpg

$ echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/ros-archive-keyring.gpg] http://packages.ros.org/ros2/ubuntu $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/ros2.list > /dev/null
```

# インストール
```bash
$ sudo apt update
$ sudo apt install ros-foxy-desktop
```

# 環境設定
```bash
$ echo "source /opt/ros/foxy/setup.bash" >> ~/.bashrc
$ source ~/.bashrc
```

# colcon build インストール
```bash
$ sudo apt install python3-colcon-common-extensions
```
# ROS2 コマンド自動補完のインストール

```bash
$ sudo apt install python3-argcomplete
```

colcon build インストール時に入っていれば不要

# ワークスペースの作成

```bash
$ mkdir -p ~/ros2_ws/src
$ cd ros2_ws/
$ colcon build
```


# 動作確認

ターミナルを開いて以下を実行

```bash
$ ros2 run demo_nodes_cpp talker
```
別のターミナルで以下を実行

```bash
$ ros2 run demo_nodes_py listener
```

以下のようにメッセージが出ていれば成功

```bash
$ ros2 run demo_nodes_cpp talker
[INFO] [1611230592.489680360] [talker]: Publishing: 'Hello World: 1'
[INFO] [1611230593.490090831] [talker]: Publishing: 'Hello World: 2'
[INFO] [1611230594.490166446] [talker]: Publishing: 'Hello World: 3'
```

```bash
ros2 run demo_nodes_py listener
[INFO] [1611230787.236789185] [listener]: I heard: [Hello World: 3]
[INFO] [1611230788.215690250] [listener]: I heard: [Hello World: 4]
[INFO] [1611230789.215362123] [listener]: I heard: [Hello World: 5]
```


# 参考
Ubuntu LinuxでROS 2のインストール
https://gbiggs.github.io/rosjp_ros2_intro/computer_prep_linux.html

Ubuntu 18.04にROS2 Dashingをインストール
https://qiita.com/k-koh/items/838c70004119c329c617
homebrewでwgetを導入時にエラー

###環境
- MacOS Catalina
- Homebrew 2.7.5


###内容
Homebrewでwgetをインストールしたが

```
$ brew install wget
```

下記を実行したら

```
$ brew link wget
```

下記エラーが発生

 
```
Error: Could not symlink share/locale/af/LC_MESSAGES/wget-gnulib.mo
/usr/local/share/locale/af/LC_MESSAGES is not writable.
```

###解決方法
所有者を変えたらうまく行った。

```
sudo chown -R `whoami`:admin /usr/local/opt
sudo chown -R `whoami`:admin /usr/local/share
```
corrs について　猿でもわかる

バックエンド側でnode,expressを触っている人向け


CORRS とは、API通信で値(param)など、バックエンド側のデータを表示させるために
バックエンド側で設定するための物です。


なので、今回は設定方法だけ記載します。

これを書いておけばHTTP通信は正常に行われます。

バックエンド側に
app.use((req, res, next) => {
    // res.header("Access-Control-Allow-Origin", "http://localhost:4200");
    res.header("Access-Control-Allow-Origin", req.headers.origin);
    res.header("Access-Control-Allow-Headers", "Origin, Authorization, Accept, Content-Type");
    // res.header("Access-Control-Allow-Headers", "*");
    res.header('Access-Control-Allow-Credentials', "true");

    // OPTIONSリクエスト(プリフライトリクエスト)への応答
    // 参考: https://developer.mozilla.org/ja/docs/Web/HTTP/CORS#preflighted_requests
    if (req.method == "OPTIONS") {
        res.send(200);
    } else {
        next();
    }
});


今回はAngularを使っている方向けです。

指摘がありましたら、コメント等お願いします。
Apache2.4 権限周りの初期設定

# 概要
LAMP学習中の環境エラー対処の備忘録です。
せっかくなので qiita にします。
ポリシーとして解決しなかったことは書きません。
随時更新。

# 環境
awsです。

```sh:
$ whoami
root
$ cat /etc/os-release 
NAME="Red Hat Enterprise Linux"
VERSION="8.3 (Ootpa)"
```

# Apache エラー： 403 Forbidden

apache ユーザに権限を渡す必要がある。
ファイルだけでなくディレクトリにも権限付与するのを忘れずに。

```sh
$ chmod -R 775 /var/www
# ↓この辺の権限を全部かえる
   /var/www
         \_html
            \_*.html
             _*.php
```

# phpエラー: Warning: fopen(XXX.txt):
`failed to open stream: Permission denied in /var/www/html/XXX.php on line XXX` ていうエラー（正確には警告）
selinuxが有効になっているのが原因だった。
ファイルやディレクトリの権限をいじっても無理

```sh
# 有効を解除する（Permissiveにする）
$ setenforce 0

# 再起動したときの自動有効化を停止する
$ sed "s/SELINUX=enabled/SELINUX=disabled/g" /etc/selinux/config
```

`setenforce`をやらないで、`sed`＋再起動でも良い。
ATS(Arrival Timestamp)つきトランスポートストリーム(Timestamped Transport Stream)の仕組み

# はじめに
ATS (Arrival Timestamp) つきのトランスポートストリーム (TTS : Timestamped Transport Stream) は一般的に広く用いられているのですが、日本語で適切な説明があまりなさそうだったので記事にしました。

# トランスポートストリーム録画の課題
デジタル放送で使われるトランスポートストリーム (TS : Transport Stream) は、

* 受信に必要な付加情報 (PSI/SI etc.)
* 複数チャンネル分のビデオ & オーディオストリーム
* TSの転送レートを固定に保つためのヌルパケット (何も情報を持たないパケット)
などから成り立っています。

放送受信時はこれで問題ない（これが望ましい）のですが、記録媒体に録画する場合、不要な付加情報やチャンネル、ヌルパケットなどで記憶容量を無駄に消費してしまいます。
とはいえ、単純に、不要なTSパケットを破棄して録画するだけでは、再生時にTSの転送レートを一定に保つことができず、ビデオ & オーディオのバッファオーバーフロー/アンダーフローの原因となります。（下図 参照）
その課題解決のために、ATSつきのトランスポートストリームの仕組みが考えられました。

# ATS (Arrival Timestamp) を使った再生の仕組み
通常のTSパケットは1パケット188byteのサイズですが、ATSつきのTSパケットは先頭に4byteの拡張ヘッダがついた、計192ByteのTSパケットになります。

拡張ヘッダ 4byte (32bit) の内訳は以下の通りです。

* MSB 2bit (bit31-30) : コピー許可の情報
* LSB 30bit (bit29-0) : 時刻情報 (ATS : Arrival Timestamp)

ATSは27MHzでカウントアップされるカウンタであり、0x3FFFFFFFを超えると0にラップアラウンドします。

ATSに対応したデコーダは、通常のTS再生器 (demuxer) の前段に、27MHzの時計と比較器が追加されています。
デコード時は、デコーダの時計とATSとの値が比較されて、時刻が一致したときに、TSパケット188byte分が後段のTS再生器に送られます。デコーダの時計の値とATSの値が一致しない場合は、時計がATSの値に一致するまで、TSパケットは比較器のところで留め置かれます。
このような比較的簡単な仕組みで、可変レートから固定レートへの変換を実現しています。（下図 参照）

![tts.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125043/1fe1e123-0067-4e68-283c-8b3d912a7681.png "TTSの再生")

# ATSつきTSのファイル拡張子
.m2tsが使われることが多いですが、.mtsや.ttsが使われることもあります。

#サンプルプログラム
各TSパケットのATSを抽出して、その値と1つ前のATSとの差分を表示するプログラムです。

```c:log_ats.c
/*
 * log_ats.c:
 * pick up ATS (Arrival Time Stamp) and calculate the difference between the previous arrival time stamp.
 *
 * Input : TS-stream with ATS (4byte) ahead of each TSP (188byte).
 * Output: TS packet number, ATS value, difference between the previous ATS
 */
#include <stdio.h>
#include <stdlib.h>

#define ATS_SZ	4
#define TSP_SZ	188
#define ATS_MAX 0x3fffffff
#define warn(msg) fprintf(stderr, msg, tsp_count)
#define GET_ATS(p) (((unsigned long)p[0] & 0x3f)<<24 | (unsigned long)p[1]<<16 | (unsigned long)p[2]<<8 | (unsigned long)p[3])

int main()
{
  unsigned char buf[ATS_SZ + TSP_SZ];
  unsigned char *tsp = buf + ATS_SZ;
  unsigned long ats_diff;
  unsigned long prev_ats, ats;
  int tsp_count = 0;

  while (1 == fread(buf, ATS_SZ + TSP_SZ, 1, stdin)) {
    tsp_count++;

    if ((int)*tsp != 0x47) {
      warn("not 0x47 @%d\n");
      // exit (EXIT_FAILURE);
    }
    ats = GET_ATS(buf);
    if (tsp_count == 1) {
      printf("%lu,---\n",ats);
    } else {
      ats_diff = (prev_ats > ats) ? (ats + ATS_MAX - prev_ats) : (ats - prev_ats);
      printf("%lu,%lu\n",ats,ats_diff);
    }
    prev_ats = ats;
  }
  return 0;
}
```

# 参考リンク
* 英語のwikiが一番詳しいです。
    * https://en.wikipedia.org/wiki/.m2ts

* MPEG2システム一般の説明（TTSの話もあります）。
    * https://ja.wikipedia.org/wiki/MPEG-2%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0
macでファイルの文字コードを確認する方法

## コマンド
ターミナルから簡単にできました。

```
$file --mime hoge.csv 
hoge.csv: application/x-dosexec; charset=unknown-8bit
```

charset=unknown-8bitは、Shift-JISのこと。
unknownって、、さすがmac

## ちなみに
`application/x-dosexec` の部分について。
純粋なcsvなら `text/csv` になるはずだが、exeファイルの返り値になってしまっている。
PHP7以上で作られたファイルはこうなってしまうことがあるらしい。。
また詳しく調べてみよう。

### 参考
ファイルの種類を表す情報のことを、マイムタイプという
https://wa3.i-3-i.info/word15786.html
【初心者でもわかる】CSSだけでステップフローを作る

# どうも7noteです。シンプルなステップフローの作り方

申し込みフォームなどではEFO（フォームの最適化）の観点からステップフローをつけるのが一般的です。
ステップフローは「入力 > 確認 > 完了」とステップが分かれていて現在がどのステップかを表すやつのことです。

CSSだけで作ってきます。

![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/d472de74-0717-9a71-abb3-d90394777eb6.png)


## ステップフローの作り方

入力、確認、完了でそれぞれ別ページを想定しています。
それぞれのページにあった`<li>`にクラス`current`をつけます。

````index.html
<ul class="flow">
  <li class="current">入力</li>
  <li>確認</li>
  <li>完了</li>
</ul>
```

```style.css
.flow {
  width: calc(100% - 30px); /* ステップフロー全体の横幅を指定 */
  display: flex;            /* flexboxで横並びにする */
  justify-content: space-between; /* 横並びにしたものを等間隔で並べる */
}

.flow li {
	
  color: #333;        /* 文字色を黒に指定 */
  font-size: 11px;    /* 文字サイズを指定 */
  width: calc(100% / 3); /* 横幅を三等分した1つの大きさに指定 */
  background: #eee;   /* 背景色をグレーに指定 */
  line-height: 50px;  /* 行間(高さの代わり)を指定 */
  text-align: center; /* 文字を中央寄せにする */
  position: relative; /* 基準位置とする */
}

.flow li:not(:first-child):not(:last-child) { 
  padding: 0 0 0 10px;  /* 最初と最後以外には左に適度な余白を指定 */
}

.flow li::before,
.flow li::after {
  content: "";  /* 疑似要素では必須 */
  width: 0;     /* 横幅を0に指定 */
  height: 0;　　/* 高さを0に指定 */
  display: block;  /* ブロック要素にする */
  position: absolute; /* 相対位置に指定 */
}

.flow li::before {
  border: solid 32px transparent;     /* 32pxのborderを指定 */
  border-right: solid 13px transparent;  /* 幅を合わせるため右線は13pxにする */
  border-left: solid 13px #FFF;          /* 白い三角形を作成して▷の形で上に重ねて削り取る */
  top: -7px;  /* 重ねる位置(縦軸)を調整 */
  left: 0;    /* 重ねる位置(横軸)を調整 */
  z-index: 1; /* 重なり順を指定 */
}

.flow li::after {
  border: solid 25px transparent;  /* 25pxのborderを指定 */
  border-left: solid 10px #EDEDED; /* 左のborderで背景色と同じ▶の部分を作成する */
  border-right: solid 10px transparent; /* 幅を合わせるために右線は10pxにする */
  top: 0;       /* 重ねる位置(縦軸)を調整 */
  right: -20px; /* 重ねる位置(横軸)を調整 */
  z-index: 2;   /* 重なり順の優先度を他よりも上げる */
}

.flow li:first-child::before,
.flow li:last-child::after {
  content: none;  /* 最初のliの左と最後のliの右は作らない */
}

/* 以下.currentだけ色を変えるCSS */

.flow li.current {
  color: #FFF;
  background: #FCC;
}

.flow li.current::after {
  border-left: solid 10px #FCC;
}
```

## 解説

手順としては以下のようなイメージで作って行きます。

①　liの箱を3つ作成して、flexboxで横並びにする
②　わかりやすいように文字色や背景色を入れて、大きさを整える。
③　before、afterの疑似要素両方を作成
④　beforeでborderを使い右向きの白い三角形▷を作って配置。
⑤　afterでborderを使い右向きの背景色と同じ三角形▶を作る。
⑥　currentがついている場合、背景色とafterの三角形▶の色を変える

このような手順で作っていくと作りやすいと思います。

私的ポイントは、`.flow li:not(:first-child):not(:last-child)`でpaddingを左に10pxとっているところです。
これがないと、左の白三角形で削られている分文字が左に寄っているように見えてしまうので微調整を入れています。

## まとめ

1から作成すると結構時間がかかってしまうので、コピペで作れるよう用意しておいたり、よく使うサイトをブックマークするなどしておくと時短になっていいですね！

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
Pythonデフォルトの文字コードの指定

１．デフォルトの文字コード指定
１－１．`path to python/Lib/site-packages` でsitecustomize.pyを作成

```
~/path to python/Lib/site-packages
$ touch sitecustomize.py
```

１－２．下記コードを記載
文字コードは、[公式サイト](https://docs.python.org/ja/2.7/library/codecs.html#standard-encodings)を参考にする。

```python:sitecustomize.py
import sys
sys.setdefaultencoding('utf-8')
```
C#でAtCoder Beginners Selection（ABC087B - Coins）

####準備
[C#でAtCoderデビューのための準備]
(https://qiita.com/azumabashi/items/7aa9e4b77c10970cc30a)
のあとで AtCoder Beginners Selection　をやってみました。

####問題文
ABC087B - Coins
[https://atcoder.jp/contests/abs/tasks/abc087_b]
(https://atcoder.jp/contests/abs/tasks/abc087_b)

####提出結果

```
using System;
 
class Program
{
	static void Main(string[] args)
	{
		int a = int.Parse(Console.ReadLine());
		int b = int.Parse(Console.ReadLine());
		int c = int.Parse(Console.ReadLine());
		int x = int.Parse(Console.ReadLine());
 
		int choices = 0;
		for (int i = 0; i < a + 1; i++)
        {
			for (int j = 0; j < b + 1; j++)
            {
				for (int k = 0; k < c + 1; k++)
                {
					if (((i * 500) + (j * 100) + (k * 50)) == x)
                    {
						choices++;
                    }
                }
 
			}
 
		}
		Console.WriteLine($"{choices}");
	}
}
```

####テスト実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/0a59510e-bd41-11e0-3fb3-afdb688cb9be.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/27fb684c-7904-dbbc-9682-32cc7feb237b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225878/cb88448e-79ec-5b6b-cda7-272e0f5fa9f5.png)