OmniAICreator/Qiita-1.07M huggingface dataset:
djangoのよく使うコマンド　まとめ(初学者)

## はじめに
自分自身djangoに取り掛かるに当たって必要なコマンドを調べたのでここにまとめます。

##コマンド
以下 Mac os/Linuxでのコマンドになります。
アプリケーションの作成

```
python manage.py startapp sample
```
サーバーの立ち上げ

```
python manage.py runserver
```

仮想環境の立ち上げ　有効化

```
python3 -m venv env
source env/bin/activate
```

migrationファイルの作成

```
python manage.py makemigrations
```

DB migrationの実行

```
python manage.py migrate
```

データベースの管理者ユーザーを作成

```
python manage.py createsuperuser
```

## おわりに
上記がよく使うコマンドになります。参考になれば幸いです。
PRML 演習問題  5.20（基本）

## はじめに
本記事は, 機械学習の教科書の決定版ともいえる, **Christopher Bishop先生**による[**『Pattern Recognition and Machine Learning （パターン認識と機械学習）』**](https://www.microsoft.com/en-us/research/people/cmbishop/prml-book/), 通称**PRMLの演習問題の解答**を記したものです. これは, [**生物測定学研究室**](https://www.ut-biomet.org/)の輪読会でPRMLを取り扱っており, その勉強の一環として演習問題を解いたときのもので, **匿名の有志の学生による解答をこちらのアカウントから代わりに投稿**させていただいています.　（なお一部数式の表現などを修正してあります.）


## 問題
> <b>5.20（基本）</b> 出力ユニットは $K$ 個でその活性関数はソフトマックス関数, 誤差関数は交差エントロピーであるネットワークについて, 二乗和誤差関数の場合の結果 $(5.84)$ に対応する, ネットワークのヘッセ行列の外積による近似式を導け.

## 参考
「出力ユニットはK個でその活性関数はソフトマックス関数,誤差関数は交差エントロピーであるネットワーク」とは、簡単に言えばクラス分類を行うネットワークである。このネットワークについての誤差関数の微分 $\nabla E(\mathbf w)$ については、

```math
\begin {align*}
{\nabla}_{\mathbf{w}_j} E(\mathbf w) = \sum_{n=1}^N (y_{nj} - t_{nj}) \mathbf\phi_n
\tag{4.109改変}
\end {align*}
```

であることが知られている。更に、ソフトマックス関数の場合、

```math
\begin {align*}
\frac{\partial y_k}{\partial a_j} = y_k(I_{kj} - y_j)
\tag{4.106}
\end {align*}
```

である。
また、本文の内容より、

```math
\mathbf{b}_n　{\equiv}\nabla{y_n} = \nabla{a_n}
```

であり、

```math
\mathbf{\phi}_n = \frac{\partial a_n}{\partial \mathbf{w}} = \mathbf{b}_n
```

である。

## 解法
そのまま $(4.109)$ をさらに微分して、$(5.83)$ のようにヘッセ行列を求めて、その第1項を取り出す。

```math
\nabla \nabla E = \sum_{n=1}^N\{ \sum_{j=1}^N y_n(I_{nj} - y_{nj}) \}\nabla{y_n}(\nabla{y_n})^{\rm{T}}+\sum_{n=1}^N (y_{nj} - t_{nj}) \nabla\nabla{y_n}
```

よって、ここの第1項を取り出すと、

```math
\begin {align*}
\mathbf{H} \simeq \sum_{j=1}^N y_n(I_{nj} - y_{nj}) \mathbf{b}_n {\mathbf{b}_n}^{\rm{T}}
\tag{5.85に似た式}
\end {align*}
```
■

## 参考
http://sioramen.sub.jp/prml_wiki/lib/exe/fetch.php/wiki/ensyu5.20.pdf 答えの検算として見ました。
PRML 演習問題 5.6（基本）

## はじめに
本記事は, 機械学習の教科書の決定版ともいえる, **Christopher Bishop先生**による[**『Pattern Recognition and Machine Learning （パターン認識と機械学習）』**](https://www.microsoft.com/en-us/research/people/cmbishop/prml-book/), 通称**PRMLの演習問題の解答**を記したものです. これは, [**生物測定学研究室**](https://www.ut-biomet.org/)の輪読会でPRMLを取り扱っており, その勉強の一環として演習問題を解いたときのもので, **匿名の有志の学生による解答をこちらのアカウントから代わりに投稿**させていただいています.　（なお一部数式の表現などを修正してあります.）


## 問題
> <b>5.6</b> ロジスティックシグモイド活性化関数を持つ出力ユニットの活性 $a_k$ に関する誤差関数 $(5.21)$ の微分は, $(5.18)$ を満たすことを示せ.

## この問題の意義
ロジスティックシグモイドの活性化関数を持つ場合でも、誤差関数の微分をすると二乗和誤差関数と同じ誤差を求めることになるということを示す。

## この問題で出てくる式
念のためまず、交差エントロピー誤差関数 $(5.21)$ の式を書く。

```math
\begin {align*}
E(\mathbf{w}) = -\sum_{n=1}^N\{t_n\ln{y_n}+(1 - {t_n})\ln(1 - y_n)\}
\tag{5.21}
\end {align*}
```

そして、この関数の微分によって求めたい式は、

```math
\begin {align*}
\frac{\partial E}{\partial a_k} = y_k - t_k
\tag{5.18}
\end {align*}
```

である。
今回は、活性がロジスティックシグモイド関数のため、

```math
\begin {align*}
y = \sigma(a) \equiv \frac{1}{1 + \exp(-a)}
\tag{5.19}
\end {align*}
```

であり、$y$ の $a_k$ による微分は $(4.88)$ より

```math
\frac{\partial y}{\partial a_k} = \frac{\partial \sigma}{\partial a_k} = \sigma(1 - \sigma) = y_k(1-y_k)
```

となる。

## 解法
微分の計算です。

```math
\begin {align*}
\frac{\partial E}{\partial a_k} &= -t_n\frac{(y_k)'}{y_k} + (1 - t_k)\frac{(y_k)'}{1-y_k} \\
&= -t_k \frac{y_k(1 - y_k)}{y_k} + (1-t_k)\frac{y_k (1-y_k)}{(1-y_k)} \\
&= -t_k +t_k y_k + y_k -t_k y_k\\
&= y_k - t_k
\end {align*}
```

■
なでしこ３のみを使って、脳トレゲームを作るよ！

　お祭りだから、参加しちゃうよ！
　だって、なでしこさんも１５周年祭り中ですもの。

　というわけで、どんどんゲシュタルト崩壊していく漢字間違い探しゲーム。
![kanji.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561177/e37b0d29-b9fe-09ea-dfbe-cb8fccc50d35.jpeg)
　こんなの。
　脳トレに良いかもしれないが、単に脳が疲労するだけかも知れない。
　一応、一つ一つ文字を追って、探すことに熱中するのではなく、なるべく視点を動かさずに、視野を広げて画面全体を見て、ぱっぱっと見つけるようにするとよいそうですよ。

# まずは、問題作成から

　似たような漢字を、集めまくりますよ～！

## 配列

　集めたものを、配列にしておきます。

```
問題＝[["大","犬","太"],["犬","尤"],["天","夭"],["千","干"],["人","入"],["日","曰"],["因","困"],["井","丼"],
["王","玉","生","主"],["吉","舌","告"],["末","未","朱"],["矢","失","朱"],["己","巳","已"],["成","戌","戊"],
["休","体"],["ぬ","め"],["ね","わ"],["る","ろ"],["る","ゐ"],["織","職","識"],["輸","輪"],["輸","諭","愉"],
["内","肉"],["味","昧"],["裕","祐"],["崇","祟"],["栽","裁"],["微","徴"],["綱","網"],["杏","否","盃","杳"],
["持","待","侍"],["瓜","爪"],["推","稚","椎"],["苦","苫"],["萩","荻"],["芽","茅"],["第","弟"],["季","李"],
["園","圓","圍"],["晴","睛"],["到","致"],["斤","斥"],["酒","洒"],["治","冶"],["減","滅"],["釣","鈎","鉤"]]
```

　なでしこ１では、改行の入った文章を直でふつーに配列として扱えましたが、なでしこ３の配列は、こんな感じ。書くのめんどい；
　もちろん、ｖ１のように書いて、CSV取得や区切るを使って配列にするのも可能ですが、こういうデータだと何気に行数ばかり使っちゃって、結局見やすくもないですからねｗ

## 乱数

　ゲームと言えば乱数、的な？
　乱数で、問題配列の何番目のデータを問題にするか決めて、答え（まちがい）をどこに表示するかも決める。
　配列シャッフルも、ゲーム的だよね。重複させずに順番だけぐちゃぐちゃにする。
　問題のデータの順番を入れ替えて、０番をメインの文字、１番を間違いの文字ってことにする。

```
答＝０。総数＝８。　//答は正解(まちがい)の位置。総数は表示する文字数。
●問題作成
　ｒ＝問題の要素数の乱数。
　答＝総数の乱数。
　問題[ｒ]を配列シャッフル。
　（総数)回
　　　もし、(回数-1)＝答ならば、問題[ｒ][１]を表示。
　　　違えば、問題[ｒ][０]を表示。
　ここまで。
ここまで。

問題作成。答を表示。　//動作確認。
```
　問題出来ました！
　いまさらですけど、正解が間違いって、分かりづらすぎるヽ（；´Д｀）ノ


# 画面に描画する

　取りあえず動作確認で表示しただけだった部分を書き換えて、らしい感じにする。
　DOMを使うとか、他にも手立てはあると思いますが、今回はキャンバスを使うことにします。

## canvas
　簡易エディタでは、予めキャンバスが用意されており、すぐに描画命令を使うことができます。

## 描画

　キャンバスに「文字描画」していきます。
　文字描画の基準となる座標は、左下（正確には、アルファベットのベースライン）なので、注意が必要です。

```
答＝０。横数＝８。縦数＝４。総数＝横数＊縦数。
文字サイズ＝36。
「bold {文字サイズ}px sans-serif」に描画フォント設定。
#～～～中略～～～～～～～
　変数 x＝0。変数 y＝0。
　(総数)回
　　　x＝（(回数-1）％横数）＊文字サイズ。
　　　y＝（（(回数-1)／横数）を切捨）＊文字サイズ＋文字サイズ。
　　　もし、(回数-1)＝答ならば、[x,y]へ問題[ｒ][１]を文字描画。
　　　違えば、[x,y]へ問題[ｒ][０]を文字描画。
　　　x＝x＋文字サイズ。
　ここまで。
```

　らしくなってきました。よきよき♪


# イベントを付ける

　マウスでクリック（またはタッチ）したら、正解とか不正解とか出て欲しい。
　ていうか、出てこそのゲームでしょっていう。

```
　答ｘ＝（答％横数）＊文字サイズ。
　答ｙ＝（（答／横数）を切捨）＊文字サイズ。

```
　答えの座標を記録しておく。

## マウス押した時

　クリックした時は、押して、離した時に発動するのと、そのせいでマウスの座標が取れない仕様だから、こうゆう時は「押した時」を使う。

```
描画中キャンバスをマウス押した時には、
　　もし、（マウスX＞答ｘ）かつ（マウスY＞答ｙ）かつ（マウスX＜(答ｘ＋文字サイズ)）かつ（マウスY＜(答ｙ＋文字サイズ)）ならば、正解処理。
ここまで。
```

## タッチした時

　マウス押した時でスマホも反応するけど、ブラウザによっては不都合があるかも知れないし、念のためタッチのイベントも併記。（「マウス移動した時」などは使えない）

```
描画中キャンバスをタッチした時には、
　　もし、（タッチX＞答ｘ）かつ（タッチY＞答ｙ）かつ（タッチX＜(答ｘ＋文字サイズ)）かつ（タッチY＜(答ｙ＋文字サイズ)）ならば、正解処理。
ここまで。
```

## 正解したら最初に戻る。

　エンドレスですｗ

```
●正解処理
　　「当たりです！」と言う。
　　[0,0,310,150]を描画クリア。
　　問題作成。
ここまで。
```

# 動作確認
> https://n3s.nadesi.com/id.php?267

#つづく・・・かも？
　どうせなら、簡易エディタで動かすだけじゃなく、もっとかっこよく、ぽい感じにしたいですよねぇ～？
　もっとも、そもそものゲーム内容がこんだけなのと、見た目をどうにかしようとすると、どんどんHTMLやCSSの領分になって、なでしこ３のみ・・・じゃなくなってしまうかなという。
MC Historianのデータをオープンクエリを使ってPower BI Desktopで表示する

[MC Historianのデータをクエリで取得する](https://qiita.com/moritakuya/items/268148ad3ef3aea3e16f)(https://qiita.com/moritakuya/items/268148ad3ef3aea3e16f) の続きになります。

MC Historianのデータは前段の記事にてオープンクエリを使用することでアクセスできることを紹介したが、Power BI Desktopからも同じようにアクセスできるみたいなのでやってみた。これでロギングはMC Historianで、可視化はPower BI Desktopで、みたいな幅のある選択が可能に。

MC Historianの設定は[前段の記事](https://qiita.com/moritakuya/items/268148ad3ef3aea3e16f)を参照。

# Power BI Desktopのインストール
Power BI DesktopはMicrosoft Storeから取得できる。特に悩むこともなくインストールできると思う。
![powerbi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504156/a9c7ac4f-0a1b-d59b-5e3a-ed8f6d187825.png)

# Power BI DesktopでMC Historianのデータを表示してみる
PowerBIを起動したら、メニューから「SQLServer」を選択する。
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504156/93660444-0986-4e4c-0eba-1c2b1029c652.png)

以下のような画面が出るので、サーバーとDB、クエリを入力する。
※ここで使用しているサーバー、DB、クエリについては、[前段の記事](https://qiita.com/moritakuya/items/268148ad3ef3aea3e16f)を参照。
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504156/c8f6ecfb-d9be-8a29-8f67-a558118b209c.png)

OKボタンを押すと、データのプレビューが表示されるので、問題なければ「読み込み」ボタンを押す。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504156/827a97f9-2c6b-932e-8ddb-11cbaac3798e.png)

すると、画面右側の「フィールド」ペインに「クエリ1」なるものが出来上がる。
読み込んだデータをテーブルで表示してみる。
「視覚化」ペインから「テーブル」を選択後、「フィールド」ペインで表示したい項目にチェックを入れる。
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504156/d04ac898-9bae-bad3-3ae4-86fde58367af.png)

取り込めました。
Cloud9でLaravelの開発環境を構築する方法

![laravel.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/92f16de5-2a8f-a5ca-c79d-566182bb3a24.jpeg)

####AWSマネジメントコンソールからCloud9を選択

![img1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/6ac0dfa7-3cbe-0022-13ab-40aec0ef0858.png)

####Create environmentを選択

![img2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/12154b31-1862-ee6c-71a0-23b67a4d3f43.png)

####プロジェクト名を入力し、Next stepを選択
ここではlaravel_projectとします。

![img3.png](https://qiita-imag![img5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/66339957-32b0-3046-60d8-62d931d6248f.png)
e-store.s3.ap-northeast-1.amazonaws.com/0/665011/3ae5c63f-1130-babc-164a-cadb93b77ecb.png)

####特にこだわりがなければデフォルトのままNext stepを選択

![img4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/2b7237c4-8319-a152-4c23-9368b3ec4223.png)

####設定に変更がなければCreate environmentを選択

すると画面が切り替わってCloud9が起動しますので、操作できるようになるまでしばらく待ちます。

![img5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/97be3f5d-40ab-55ce-6929-502fa35f5766.png)

####PHPをアップデート

```
$ sudo yum -y update
$ sudo yum -y install http://rpms.famillecollet.com/enterprise/remi-release-6.rpm
$ sudo yum -y install php73 php73-mbstring php73-pdo php73-mysqlnd // PHP7.3をインストール
$ sudo unlink /usr/bin/php // リンクがPHP5.6に貼られているので解除
$ sudo ln -s /etc/alternatives/php7 /usr/bin/php // リンクをPHP7.3に張り替え
$ php -v
```

バージョンを確認して下記のように表示されればリンク設定まで完了です。

```
PHP 7.3.17 (cli) (built: May  7 2020 21:04:09) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.3.17, Copyright (c) 1998-2018 Zend Technologies
```

####Composerをインストール

ComposerはPHPのライブラリ管理ツールです。RubyでいうところのGemに該当します。

```
$ curl -sS https://getcomposer.org/installer | php // composer.pharが自動で生成される
$ sudo mv composer.phar /usr/local/bin/composer //　composer.pharを移動させる
```

Composerが正常にインストールされたか、下記のコマンドにて確認します。

```
$ composer
```

「Composer」という文字の、大きなアスキーアートが表示されれば完了です。

####スワップファイルを作成

現時点でLaravelプロジェクトを作成しようとすると、メモリ不足で失敗します。そこでスワップファイルを作成します。

```
$ sudo /bin/dd if=/dev/zero of=/var/swap.1 bs=1M count=1024
$ sudo /sbin/mkswap /var/swap.1
$ sudo /sbin/swapon /var/swap.1
```

####Laravelプロジェクトを作成

```
$ composer create-project laravel/laravel ./myapp --prefer-dist
```

ディレクトリ内にmyappが作成されます。

####Laravelサーバの起動

```
$ cd myapp
$ php artisan serve --port=8080
```

上記のコマンドを実行後、次のように表示されれば起動は完了です。

```
$ Laravel development server started: http://127.0.0.1:8080
```

Cloud9画面上のメニューのPreviewを押し、「Preview Running Application」を実行すると下の画面のように表示されます。

![img6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/992107e1-7462-5937-9649-244a0ae88d36.png)

無事Cloud9にLaravelを導入することができました。
背景画像を左右反転させたい。 transform: scale() ;を使おう

フロント実装の練習アウトプット。

まずはこんな画面を作ってみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629333/2a8d3878-cd43-7686-876d-977eab0c0aba.png)

HTMLコード

````html
<div class="backImage">
    <div class="header">
      <div class="title">PG-hummingBird</div>
      <ul class="topList">
        <li class="btn"><a href="#">menu</a></li>
        <li class="btn"><a href="#">contact</a></li>
        <li class="btn"><a href="#">about me</a></li>
      </ul>
    </div>
    <div class="text">
      テキスト部分省略
    </div>
    <ul class="underList">
      <li class="btnBtm"><a href="#">Programing Journal</a></li>
      <li class="btnBtm"><a href="#">Desk Top Music Journal</a></li>
      <li class="btnBtm"><a href="#">Life Style Journal</a></li>
    </ul>
  </div>
````

cssバックイメージのクラスと設定(一部抜粋)

````css
.backImage{
  　width: 100vw;
    height: 1000px;
    background-image: url("hogehogehoge");
}
````

ブログのトップページを想定した画面です。
個人的には画像を反転させて、テキストを右にずらしたい・・・・・・。
調べたところ、こんなコードがあるらしい。

````css
.class{
transform: scale(水平軸,垂直軸);
}
******
scale(1, 1);
この状態がデフォルト。変化はありません。

scale(1, -1)
これで上下反転

scale(-1, 1)
これで左右反転。今回のお目当て。

scale(-1, -1)
これで上下左右反転。もう何がなんだか・・・。
````

そしてこちらが左右反転結果の画面

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629333/4569ff1f-8184-ea45-eb29-bdd9767c0040.png)


文字も反転してしまったぞ・・・。

テキストやボタンクラスにもtransformを使えばいいのではということで以下を追加。

````css

.header{
  height: 10vh;
  width: 100vw;
  display: flex;
  transform: scale(-1, 1);
}

.text{
  width: 650px;
  transform: scale(-1, 1);
  margin-top: 200px;
  margin-left: 100px;
  text-align: center;
}

.underList{
  width: 100vw;
  list-style: none;
  display: flex;
  margin-top: 200px;
  justify-content: space-around;
  transform: scale(-1, 1);
}

````


結果、、、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/629333/44b56146-edc6-7d0c-8ec2-d38eaa6b2521.png)


思い通りのフロントになりました！！
FormaDesigner 作成手順 アクション設定編　1

#FormaDesigner 作成手順 アクション設定編　

##Formaのアクション設定の手順を紹介　その1

※最新バージョンのものではありませんのでご注意ください
※コラボレーションなど拡張機能はありません。あくまで標準のアクション設定手順となります。

###アクション設定とは

IMが提供するローコード,高速開発サービスのFormaDesignerに搭載されている機能。
UI操作でサーバサイドの接続や、クライアントロジックなどを操作できる。

###発火条件の設定について

クリックをした時や、入力した時など
ユーザの操作を起因としたロジックの発火条件を設定します。

**Forma編集画面の「アクション設定」をクリックしましょう。**

![image (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664173/a45100b0-2578-51c8-182d-4197d6aa6b17.png)



上図が展開されます。
※IM社様が提供するドキュメント(https://www.intra-mart.jp/document/library/bis/public/bis_specification/texts/spec/action_setting.html) より一部抜粋


タブは3つあり
- 初期表示イベント
　→アプリが表示された時に発火するロードイベントを設定します。
　　発火条件は画面のロード固定です。
- アイテムイベント
　→アイテムに何かしらの操作をユーザが加えた時に発火します。
　　発火条件はアイテムにより異なりますが、基本として
　　入力・フォーカスイン・フォーカスアウト・クリックなどが用意されています。
- テーブルイベント
　→グリッドテーブルや明細テーブルにユーザが操作を加えた時に発火します。
　　こちらもアイテムイベント同様、何種類か条件が用意されています。


####初期表示イベント

1）イベントタイプを表示しています
2）インジケータを表示するか決められます。
　　処理が重たい場合によく使われる「ロード中」のグルグルしてるあれです
3）発火条件を満たす操作が行われた時に実行される処理を選択します
4）処理の説明を記述します。処理には直結しないが、可読性向上のために書くべき
5）複数の処理を行う場合、ロジックによっては前処理がエラーとなる場合がある。それを無視して続行するか、ストップするか、スキップするかを選ぶことができます。
6）詳しく設定するための画面を呼び出します
7）発火の追加条件を設定します
8）ロジックを削除します。


####アイテムイベント

![image (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664173/be0f55b7-a8f8-0c75-db64-e5522fd06cc4.png)


1）発火条件と設定先のアイテムを選択します
2)発火条件を設定します
3）処理の説明を記述します。処理には直結しないが、可読性向上のために書くべき
4）詳しく設定するための画面を呼び出します
5）ロジックを削除します。
6）インジケータを表示するか決められます。

|イベント名|概要
|:--|:--|
| フォーカスイン | 入力フィールドをマウスでクリックしたり、ユーザが［TAB］キーまたは[Enter]キーを押してフォーカスを合わせたときに処理を実行します。 |
| クリック | 入力フィールド、ボタン、アイコンをクリックしたとき、処理を実行します。 ただし、フォーカスが当たった状態でのタップ操作時には処理が実行されません。（PC/SP版表示共通） |
| 入力 | 入力フィールドに値を入力してフォーカスが外れた時に処理を実行します。 |
| フォーカスアウト | 他画面アイテムをマウスでクリックしたりユーザが［TAB］キーまたは[Enter]キーを押してフォーカスが外れたときに処理を実行します。 |

####テーブルイベント

![image (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/664173/a0da925c-647e-3791-d7b5-f1f4836f34f2.png)


1）発火条件と設定先のアイテムを選択します
2）どの列に対する処理かを指定します
3)発火条件を設定します
4）処理の説明を記述します。処理には直結しないが、可読性向上のために書くべき
5）詳しく設定するための画面を呼び出します
6）ロジックを削除します。
7）インジケータを表示するか決められます。

####発火条件については以上です
発火条件の設定が終わりましたら、次回は各処理についてまとめていきます
次の記事→ ※執筆中
[UE4] VATをNiagaraで動かす

houdiniから書き出したVATのアニメーションをUE4のNiagaraで再生するのに少し手間取ったので共有します。


VATの基本的な使い方や設定に関してはこの辺りを参照してください
- [Houdini Game Dev Tools：Vertex Animation Texture でPyroFXをUnrealEngineに](https://support.borndigital.co.jp/hc/ja/articles/115004440234-Houdini-Game-Dev-Tools-Vertex-Animation-Texture-%E3%81%A7PyroFX%E3%82%92UnrealEngine%E3%81%AB)
- [【UE4】VATの作り方と使い方 ～VATで桜を咲かせる～](https://note.com/syu_ya23m/n/n3084c636b3d4)
- [Houdiniで作成したエフェクトをUE4で動かす(VertexAnimationTexture)](http://miyahuji111.hatenablog.com/entry/2017/04/13/203202])

(※Houdini18以降、Gamedev ToolsのプラグインはSideFX Labsという名前に変わっているので注意）


Softbody,RigitBodyの場合
-
VATをNiagara上で再生するためにはhoudiniから吐き出されるMaterial Functionを少しだけいじる必要があります。左端にあるTimeという名前のInput DataノードをDynamic Parameterノードに差し替えてNiagaraのタイムライン上で動かせるようにしましょう。
![コメント 2020-07-02 160431.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529920/2939bb23-aa5d-400e-6ac3-21d7fc2901cb.png)



あとはNiagaraの方でDynamic Material Parameterモジュールを追加していい感じに設定すればSoftbodyやRigitbodyのVATに関しては動くはずです。
![コメント 2020-07-02 152145.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529920/d288d812-a2c3-de3e-e335-6c3ede9e805b.png)


 Fluidの場合
-
トポロジーの変わるFluidタイプの場合、上記の設定だけでも動くには動きますがパーティクルが原点からしか発生しなくなります（ここが詰まった）。FluidタイプのVATのMaterial Functionをよく見てみると、ポジションのところでActor Positionが指定されているのでこれをParticle Positionに変更すると想定通り動くようになります。
![コメント 2020-07-02 153342.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/529920/0a7a800c-b145-391c-b808-168f6c92d681.png)



言われてみれば当たり前じゃんって感じですが、SoftbodyやRigitbodyのMaterial Functionにはこのポジション云々の設定自体がごっそり存在しないので気が付くまでに時間がかかりました。。。ご参考までに！
NavigationControllerからモーダル遷移をする時に出たエラーCould not cast value of type..

##遭遇したエラー
`Could not cast value of type..`

##状況
NavigationControllerにTableViewCellを配置し（LINEのイメージ）基本的な遷移(以下①)はTableViewCellを押すことで行っている。
ある時のみ(具体的には開発者によるアカウント削除)にはモーダル遷移(以下②)を行う。

##原因と対処
segue.identifierによる条件分岐ができておらず、②の遷移の時に①で行うときの値遷移の処理がおこなわれ、クラッシュしていた。

```Swift
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "cellSegue" {

        let indexPath = self.roomTableView.indexPathForSelectedRow
        let NextVC = segue.destination as! ChatViewController
        NextVC.roomName = self.joinedRoomName[indexPath!.section]!
        NextVC.roomPassword = self.joinedRoomPassword[indexPath!.section]!
        NextVC.password = "\(joinedRoomName[indexPath!.section]!)\(joinedRoomPassword[indexPath!.section]!)"
        } 
        
    }
```

のように`if segue.identifier == ""`を設定することでクラッシュを防ぐことができた。
MC Historianのデータをクエリで取得する

MC Historianでロギングしたデータは、SQL Serverを経由してオープンクエリを使用することで取得できる。
これでロギングしたデータを集計し放題！！

# Historianタグを作成
まずは、ロギングするサンプルデータを作成。今回は「TestHistorian」フォルダを作成して、その下に「Tag001」タグを作成。データはシミュレーションで乱数を使用し、1秒間隔でロギングする設定。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504156/0ef53190-2f63-0620-1bce-33c758fa72db.png)

# SQL Serverでリンクサーバーを確認
上記にてHistorianタグを登録すると、SQLServerの「リンクサーバー」というところに自動でテーブルが作成される。
「サーバーオブジェクト」→「リンクサーバー」→「HH2」→「!Root」→「作ったフォルダ名が入ったテーブル」にある。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504156/6b926cb9-eb14-484e-9bec-b0def430323d.png)
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504156/e81e4318-c7b7-1a1e-609b-cc4ab14dc249.png)

次に、オープンクエリを発行するためのDBを何でもいいから作成する。「MCUnifiedConfig」があるなら、それでもいいかもしれないが、今回は新規DBとして「MCHistorian」の名前で作成。
※ログインユーザー「MELSOFT_USER」の割り当てを忘れずに。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504156/0827daff-fd39-f230-0ad9-eb57aa70f739.png)

# Workbenchからオープンクエリでデータを取得してみる
Workbenchを開いて、「データ接続」→「Databases」→「SQL接続」の下にDB接続を新規作成する。
今回は「MCHistorian」の名前で先ほど作ったDBに接続する。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504156/15bd65f4-f459-6320-415f-1246b09e4143.png)

「MCHistorian」の下にデータソースを作成。今回は「TestOpenQuery」とした。コマンドは以下。
「select * from openquery(HH2, 'select * from "TestHistorian".RAWDATA')」
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504156/40cc683e-c31b-27a0-d749-c748c2c6a40d.png)

コマンドテストしてみる。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504156/7714f35c-3751-c217-8703-f9c123374f3d.png)

無事とれました。あとは、GridWorXで表示するなりなんなり。
【comandLine】　一言で　コマンドライン　各種コマンド　ターミナル

##【ゴール】
mac terminalにおけるコマンドラインの理解

##【メリット】
■　作業効率UP


##【環境】
■ Mac OS catalina
■terminal

##【その前に...】


■**カレントディレクトリ　 = 今作業しているところ**

■**コード内「~~~~~」はユーザによって表示が異る**

■**以下のディレクトリ構造と仮定します。**

```hoge:hoge.terminal
Desktop
 - work
   - practice
     -index.html  
```

##【コード】

##pwd
**カレントディレクトリを確認**

```
~~~~~~:~~~~~$ pwd
/Users/~~~~~~
```

##ls
**カレントディレクトリ内のファイルを確認**

```
~~~~~~:~~~~~$ ls
Desktop
```

##cd
**移動**

```
~~~~~~~:~~~~~$ cd Desktop/practice
~~~~~~~:practice ~~~~$ cd index.html 
~~~~~~~:index.html ~~~~~$
```

##cd ..
**一個前のディレクトリに移動**

```
~~~~~~~:index.html ~~~~~$ cd ..
~~~~~~~:practice ~~~~$
```

##mkdir
**カレントディレクトリに新規フォルダを作成**

```
~~~~~~~:practice ~~~~$ mkdir challenge
```

##touch
**カレントディレクトリに新規ファイルを作成**

```
~~~~~~~:practice ~~~~$ cd challenge
~~~~~~~:challenge~~~~$ touch geho.html
```

##mv 
**ファイルやフォルダを任意の場所に移動**

```
~~~~~~~:challenge~~~~$ mv cahllenge practice
```

##mv 
**ファイルやディレクトリの名前を変更**

```
~~~~~~~:parctice~~~~$ cd challenge
~~~~~~~:challenge~~~~$ mv geho.html hoge.html
```

##rm 
**ファイルを削除**

```
~~~~~~~:challenge~~~~$ rm hoge.html
```

## rm -rf　
**フォルダを削除**

```
~~~~~~~:challenge~~~~$ cd ..
~~~~~~~:challenge~~~~$ rm -rf challenge
```

以上、最終的に
最初と同じディレクトリ構造になっている。


##【合わせて読みたい】
■ 【Javascript】 メソッド　まとめ　基礎基本コード　メモ
https://qiita.com/tanaka-yu3/items/2438798d159fa402b1d5

■ 【Rails new】Ruby on rails アプリケーション作成
https://qiita.com/tanaka-yu3/items/3fe1ed2852c6513d3583

■ 【メソッド集】　rails メソッド　まとめ　基礎　随時追加
https://qiita.com/tanaka-yu3/items/89abad875187494bec53
【Rails】Font Awesomeの使い方

## はじめに
Webページを見ると歯車やゴミ箱などいろんなアイコンが使われています。
自前ではなかなかアイコンを作れませんが、Web上にはさまざまなアイコンを無料で用意してくれている便利なサイトがあります。

今回はFont Awesomeを使ってアイコンを表示させる方法を書いてみようと思います。
htmlとhamlで使い方が若干異なるのでそれぞれ説明します。
ちなみにFont Awesomeの読み方は"フォントオーサム"です。アウェサムとか言わないようにしましょう笑

## 使いたいアイコンを探す
まずは使用するアイコンを[Font Awesomeのページ](https://fontawesome.com/)から探します。リンクをクリックすると以下のページに飛ぶので、左上の検索フォームに入力して検索してみましょう。
今回はtwitterのアイコンを使ってみようと思います。
<img width="983" alt="1bbda4685e42f62f34173c98419fda33 (1).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/5c9e7608-100d-df12-2e50-a47fa0f8df6b.png">
検索するとこんな感じです。
<img width="1056" alt="1952fc26955f88524c0da3684973e2fd.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/c172ce09-0dd6-5b86-460d-87e2ad201ec8.png">
色が濃く表示されているものが無料で使えるものになります。
アイコンをクリックして詳細ページに飛びます。
<img width="1240" alt="1cc5bfebfb0fb2858124f00e17b3e6aa.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/9e74c4cf-c2b9-2c9e-c12c-128ba77c3dc3.png">
大きなtwitterアイコンの上に`<i class="fab fa-twitter"></i>`と書かれていると思います。これを使って表示させます。

## htmlファイルで使う時
htmlファイルの場合は、headタグの中に以下を記入
`<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css">`
そしてアイコンを使いたいところで`<i class="fab fa-twitter"></i>`とすれば表示されます。

```html
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css"> <!-- 追加 -->
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <a href="https://twitter.com/"> <!-- リンクにしたい時はaタグの中に入れる -->
      <i class="fab fa-twitter"></i>　<!-- Font Awesomeのページで探したものをコピペ -->
    </a>
  </body>
</html>
```
特段難しことはないかと思います。

## hamlファイル（Rails）で使う時

railsにhamlを導入してFont Awesomeを使う時は、少し手順が増えるので順番に説明します。
#### gem導入
まずはgemfileに以下を記述します。

```:Gemfile
gem 'font-awesome-sass'
```
developmentとproduction両方で使いたいので、`group :development do`などの中ではなく、インデントなしで書いておけばよいです。（初期状態のGemfileであれば最終行に書いておけば良いでしょう）
記述したら忘れずにbundle installしておきます。（サーバー立ち上げていたら再起動も忘れずに）

```:ターミナル
$ bundle install
```
#### scssファイル追記
application.scssファイルに以下のように記述します。
（初期状態ではapplication.cssなので拡張子をscssに変えておきます）

```scss:application.scss
@import "font-awesome-sprockets";
@import "font-awesome";
```

#### hamlファイル
hamlファイルでは次のように記述します。

```haml:hamlファイル
= icon("fab", "twitter", class: "twitter-icon")
```
書き方は
`= icon("[分類名]", "[アイコン名]", オプション（class名など）)`となります。
Font Awesomeのサイトからコピーしてきたタグは
`<i class="[分類名] fa-[アイコン名]"></i>`
となっているので、見比べて記述すればOKです。
今回のTwitterの例だと分類名はfab, アイコン名はtwitterです。
（分類名とかアイコン名とかは勝手に名付けました。公式ではないのでご注意ください）
## 最後に
Font Awesomeは無料でいい感じのアイコンが使えて便利なので積極的に使っていきましょう。
有料版ではなくてもたくさん種類があるので、拘らなければ全然困らないはずです。

上述のとおり書けば問題なく使えると思いますが、間違いなどあればコメントで教えてください。

公式リファレンス
https://github.com/FortAwesome/font-awesome-sass
NOTESクライアント　メール通知音の消し方

# はじめに
NOTESクライアントソフトはデフォルトで通知アラート音が鳴る設定があります。

Webミーティングやテレコンとかのときに邪魔になりますので、
消すことをオススメいたします。

こちらの例は「バージョン10.0.1 FP1」になりますが、基本的には同じ設定だと思います。

# アラート音の消し方

NOTESクライアント画面で「Preference」を開きます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239309/d21aa8b9-ea84-126b-f267-4c639e751d02.png" width=50%>

Preferenceの画面で「Mail」の「Sending and Receiving」の画面で、
「Play Sound」のチェックを外せば、音が鳴らなくなります。
<img width="913" alt="スクリーンショット 2020-07-02 16.04.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239309/b1e73dab-2ee0-6ef4-c4aa-0be1c72b8d26.png">

以上です。
音が鳴らない快適なNOTESクライアントライフをお過ごしください！
【コピペOK】hoverしたら動き出すCSSボタンアニメーション４６選

[<img width="660" alt="スクリーンショット 2020-07-02 16.07.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/16b406e0-3d55-c441-9d1c-51dc873b1dad.png">
](https://www.twinzlabo.com)

**コピペだけで作れるボタンアニメーションを４６個**を紹介いたします。

box-shadow, filter, transformなどをふんだんに使っており、transitionで滑らかな動きが表されています

コードには説明もわかりやすく書いてあるのでかなり参考になります

Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています


## CSSボタンアニメーション４６選

### １. transformを使いこなすボタンアニメーション１６選

transformを使ってボタンを変形し、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています

transformを全種類使っていてわかりやすく説明もされているのでかなり重宝します

![css-effect-hover-button-transform-skew.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/b7e16364-df9f-95c5-3e85-2c3d28daffe2.png)



### ２. transitionを使いこなすボタンアニメーション9選

transitionを使ってボタンにアニメーションを効かせおり、WebサイトやWebアプリケーションで使えるボタンエフェクトとなっています

box-shadowやborder-radiusをエフェクトで使用して見た目のデザインもいい感じです

![hover-button-animation-color.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/66cc0873-a5e5-187d-2c4e-7151c8dfa598.png)



### ３. filterが網羅できるCSSボタンアニメーション15選

filterを使ってボタンにエフェクトを効かせおり、特にデザインの見た目をカッコよくしたい場合に非常に使えます

filterエフェクトを全種類使っているので永久保存版としても重宝できそうなまとめ記事になっています

勉強にもフロント開発でも役立つと思います

![hover-button-animation-filter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/c256f0a6-de10-0e95-4443-a8010f39bff6.png)

### ４. scaleでオシャレなCSSボタンアニメーション3選

transform:scaleを使ってボタンにエフェクトを効かせおり、オシャレでかっこいいボタンになっています

ボタンの背景が滑らかにスライドしたり、フワッと出てきたりするのでみているだけで面白いです

![css-animation-button-diagonal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/9b2d5bd2-f185-f8b6-1daa-4e5fd66fc8b1.png)




### ５. ボタンでつくる回転アニメーション9選

transitionを使ってボタンが自然に回転します

ボタンが回転するって純粋に興味ありませんか？

回転扉みたいに動くんです

![hover-animation-button-explain3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/602b2e14-733b-fd07-142f-8be38c6d94f8.png)
【OpenRPAの集中管理サーバー】「OpenFlow」をセットアップしてみる

Qiitaの記事で、[「OpenRPA」](https://openrpa.openrpa.dk/)というオープンソースのソフトウェアがあることを知りました。

+ [【まるでUiPathのオープンソース版!?】OpenRPAをセットアップしてみる](https://qiita.com/RPAbot/items/8aacff9b9e7960b1f656)

公式を見ると、「OpenFlow」というソフトウェアを導入することにより、集中管理も対応しているとのことでした。
日本語の情報は全く見つからなかったので、セットアップだけでもまとめてみよう！ということでの記事です。

# OpenFlowとは

OpenFlowは、OpenRPAの集中管理を行うためのソフトウェアです。
UiPathでいうところのOrchestrator、WinActorでいうところのWinDirectorのようなものですね。
~~（正直いうとインストールしただけで全然触ってないので、何ができるか把握してない）~~
今後、OpenRPA絡みの記事増やしていけたらいいなと思っています。

ちなみに、ネットワーク絡みで同名の技術がありますが、関係ありません。

# まずはOpenRPAのセットアップ

[【まるでUiPathのオープンソース版!?】OpenRPAをセットアップしてみる](https://qiita.com/RPAbot/items/8aacff9b9e7960b1f656)

この記事に従ってインストールしてみましょう。
最新のバージョンだと微妙に画面が違いましたが、特に困ることなく進めるかと思います。

## スタンドアロン（オフライン）で使いたい場合

初回起動時に、demo1.openrpa.dk への登録画面が開きます。
最初にOpenRPAを触ったとき、「え？これインターネットに接続してないと使えないの？？」と思ったのですが、よーく調べてみるとオフラインでも使えました。

OpenRPAの初期インストール状態では、デモ環境（demo1.openrpa.dk）に接続するようになっています。
スタンドアロン（オフライン）で使う場合は、以下のファイルを編集してください。

``` JSON:C&#058;\Users\自分のユーザー\Documents\OpenRPA\settings.json
{
  "wsurl": "",  // wsurlを空白にするとスタンドアロンモード
  // 以下略
}
```

**【注意】OpenRPAがsettings.jsonを勝手に書き換えるので、settings.jsonを修正するときは、OpenRPAを終了させてから修正してください。**

# OpenFlowのセットアップ

GitHubに上がってる[Readme](https://github.com/open-rpa/openflow/blob/master/readme.md)を参考にやっていきます。
Dockerを使うQuick startと、自分でビルドするDeveloper setupがありますが、今回はDockerを使ったQuick startでやります。

## 前提

DockerとDocker Composeを使える状態にしておいてください。

私はDocker for Windowsでやっています。
Docker触ったことないよ！という方は、以下の記事などが参考になるかと思います。

+ [[Docker] Windows 10 Pro 64bit に Docker と Docker Compose をインストールする](https://qiita.com/ksh-fthr/items/6b1242c010fac7395a45)


## インストール

docker-compose.ymlが以下にあるのでダウンロードしてきます。
https://github.com/open-rpa/openflow/blob/master/docker-compose.yml

あとはコマンドプロンプトから

```
docker-compose up -d
```

で。

# OpenRPAの設定

前述したsettings.jsonを編集します。

``` JSON:C&#058;\Users\自分のユーザー\Documents\OpenRPA\settings.json
{
  "wsurl": "ws://localhost.openrpa.dk",
  // 以下略
}
```

``localhost.openrpa.dk``はDNSに登録されていて、``127.0.0.1``が返ってきます。

また、プロトコル部分は``ws://``にしてください。（デフォルトだと``wss://`` になっているかと思います。）
``wss://``は、https（ポート443）なのですが、公開されているdocker-composeだと443が開いていないので、``ws://``（ポート80）で始めるように修正してください。
私はこれで1時間くらいハマってました・・・。

# OpenRPA起動！

こんな登録画面が出てくると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517338/3dc8bc8f-d156-8c86-9e11-fb1d44103ba1.png)

ここで、``email``と``password``を入力して``SIGNIN``を押すと、自動的にadmin権限を持つユーザーとして作成され、OpenRPAが起動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517338/f612ab5e-8824-5644-d660-f7d6c51016a3.png)

ステータスバーに、接続先とユーザー名が出ますね。
これで、自分で立ち上げたOpenFlowに接続された状態になりました。

# おわりに

はい。セットアップしただけで終了です。
ドキュメント類が全くなかったので、ここまでやるだけでもそこそこ時間がかかりました。
今後、OpenFlowで何ができるのか調べてみたいと思います。
画像の上に空白ができた場合の応急処置

#issue

以下のように、chromeでimgタグにmarginをつけてないのにobject-fitプロパティでcoverをつけてる時上部に空白ができてしまうことがある
safariでは上部の空白は無い

![image-space.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214581/a87af317-1b04-d511-4b08-116efffb7a96.png)

![image-iitem.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214581/86bd936b-08d8-13c1-249d-cedccf694b90.png)

#応急処置法
imgタグの親要素に

```css
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 0;
```

imgタグに

```css
grid-row: 1;
grid-column: 1;
```

軽く解説しとくと
display:gridで子要素が親要素の起点の左上に移動するためimgタグの上の空白がなくなる
grid-template-columns: 1frで一列目1が1fr
grid-template-rows: 1fr 0で1行目が１fr2行目が0

chrome環境でデフォルトで2行目のspaceが確保されてしまうので2行目を0指定している
1frは自分で調べてください

grid-rowは子要素であるimgタグを何行分確保するかなので1行分確保している(子要素が一つのため)
grid-columnはimgタグを何列分確保するかのため１列分確保している

以上
頑張ってください
ラジオボタン(選択肢)を作る(xcode)

備忘録として。参考になったとしたら幸いです。


##できるもの
どれか一つだけを選択させたい時。他の選択肢をタップしたらそれまで選択されていたもののチェックが外れるようなものを作りたいなんかに。


<img width="200" alt="IMG_0388.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/8e04c5c8-0ff4-bf06-f164-2e1e992a7953.png">



##使う知識
###isSelected
UIButtonには`isSelected`というBool型のプロパティがあります。(推されているかいないかの状態を表す。)
ボタンを押す時にその`isSelected`を反対にするには@IBActionの中に
`radio1Button.isSelected = !radio1Button.isSelected`とすることで状態を変えることができます。

そして、その時他のボタンが選択されているつまり`isSelected`がtrueならばfalseにすれば良いので

```Swift
if radio2Button.isSelected {
            radio2Button.isSelected = !radio2Button.isSelected
        }
```
のようにします。
`radio2Button.isSelected = false`でもOK
これを選択肢の数だけ行うことでラジオボタンを実装することができます。

###setImage
UIButtonの`setImage`メソッドにはforという引数名があります。
`radio1Button.setImage(uncheckedImage, for: .normal)`
これは上述した`isSelected`と密接に関わっていて、`normal`が選択されていない時、`selected`が選択された時の状態を表します。
なので`setImage`の際にそれぞれの状態に応じた画像を決めることで、視覚的に選択されているのかどうかを表現することができます。
ex)normalにはハート、.selectedには塗りつぶされたハートを設定するなど

```Swift
radio1Button.setImage(uncheckedImage, for: .normal)
radio2Button.setImage(uncheckedImage, for: .normal
```



機能そのものは



##ソースコード
```Swift

override func viewDidLoad() {

        super.viewDidLoad()
radio1Button.setImage(uncheckedImage, for: .normal)
radio2Button.setImage(uncheckedImage, for: .normal


}
@IBAction func radio1Button(_ sender: Any) {
        radio1Button.isSelected = !radio1Button.isSelected
        reportString = "スパム/宣伝目的"
        if radio2Button.isSelected {
            radio2Button.isSelected = !radio2Button.isSelected
        }
        if radio3Button.isSelected {
            radio3Button.isSelected = !radio3Button.isSelected
        }
        if radio4Button.isSelected {
            radio4Button.isSelected = !radio4Button.isSelected
        }
        if radio5Button.isSelected {
            radio5Button.isSelected = !radio5Button.isSelected
        }
        if radio1Button.isSelected || radio2Button.isSelected || radio3Button.isSelected || radio4Button.isSelected || radio5Button.isSelected {
        submitButton.isEnabled = true
            submitButton.setTitleColor(UIColor.black, for: .normal)
        } else {
            submitButton.isEnabled = false
            submitButton.setTitleColor(UIColor.gray, for: .normal)
        }
    }

```
LaravelアプリをHerokuにデプロイする方法

![laravel_heroku.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/3e2e8c4f-1563-28b6-2900-05eb85093e34.png)

[Heroku](https://jp.heroku.com/#)や[Git](https://git-scm.com/)がない方は事前にインストールしておいてください。

###Laravelプロジェクトの作成

```
$ laravel new myapp
```

###Herokuにローカルからログイン

```
$ heroku login
```

###Herokuにリポジトリを作成

```
$ heroku create リポジトリ名 --buildpack heroku/php
```

###LaravelアプリのソースコードをHerokuにプッシュ

```
$ git init
$ heroku git:remote -a リポジトリ名
$ git add .
$ git commit -m "initial commit"
$ git push heroku master
```

###Laravelプロジェクト直下にProcfileを作成

```
$ touch Procfile
$ echo 'web: vendor/bin/heroku-php-apache2 public' >> Procfile
```

###ProcfileをHerokuにプッシュ

```
$ git add .
$ git commit -m "add Procfile"
$ git push heroku master
```

###HerokuにPostgreSQLを導入

```
$ heroku addons:create heroku-postgresql:hobby-dev
```

###データベース接続に必要な情報を確認

```
$ heroku config:get DATABASE_URL // コマンドを実行すると下記のように表示されます
postgres://ユーザー名:パスワード@ホスト名:5432/データベース名
```

###Herokuに設定を追加

```
$ heroku config:set\
DB_CONNECTION=pgsql\
DB_USERNAME=ユーザー名\
DB_PASSWORD=パスワード\
DB_HOST=ホスト\
DB_DATABASE=データベース名\
```

###マイグレーションの実行

```
$ heroku run php artisan migrate
```

###インターネット上で閲覧できるように設定を追加

```
$ heroku config:set DEBUGBAR_ENABLED=true
$ heroku config:set APP_KEY=$(php artisan key:generate --show)
```

###ブラウザで確認

```
$ heroku open
```

ブラウザで何の問題もなく表示されればデプロイ成功です。
データクレンジングからTableauへの可視化まで、ボタン一つ・一気通貫で実施したい

現在のフロー
-

分析結果の成果物をTableauで納品することが多いが、通常は下記フローで実施している。

>①月次や年次等のレポートをcsvやxlsxで受領
↓
②Rやpythonでデータ結合・クレンジング等実施しtsvで出力
↓
③Tableauに読み込ませる


②③については、一度プログラムが完成すれば非エンジニアの人も実行できなくない。
しかしRを見せると、意味不明・英語だらけの画面に抵抗感を感じる人も多い。
だれでも実行できるシステムがないか？という質問に対して、未試行の手法も含め手法とメリデメを備忘しておく。


取り得る手法たち
-
###【Excel VBA】でRやpythonを実行
Excelにパラメータを入力後、実行ボタンを押す。Rが実行されtsvが吐き出される。手動でTableauのデータを更新。
**メリット**：Excelは非エンジニアの人には慣れている。既存のRスクリプトを書き直す必要なし。
**デメリット**：Tableauは手動で更新する必要あり。

###【Alteryx】でRやpythonを実行
Excelにパラメータを入力後、Alteryxで実行ボタンを押す。パラメータを入力したExcelおよび月次レポート等を読込・加工の処理が実行され、Tableau Serverへ自動接続される。
**メリット**：ボタン一つでTableauのデータ更新まで処理が走る。
**デメリット**：AlteryxでRを実行することができる(R toolをインストール必要あり)が、データが重いと上手く実行されない。新たにAlteryxで加工プロセスを構築する必要あり。

###【Shiny】でRを実行 (聞いた話なので未試行)
webアプリケーション上でパラメータを入力後、実行ボタンを押す。Rが実行されtsvが吐き出される。手動でTableauのデータを更新 or web上で別の可視化を実施。
**メリット**：別の可視化を実施する場合は、ボタン一つでデータ更新まで処理が走る。
**デメリット**：UIをかっこよくするには、htmlなど新たな言語を覚える必要あり。

まとめ
-
私の知る限り上記3つを取り得ると考える。個人的にはAlteryxが取っつきやすいのでAlteryxから試したが、Rをそのまま使用できない事象が発生したのでVBAにチャレンジしようか考えている。

情報のアップデートがあれば、また追記する。
FCMでWeb Pushを送信する

FCMにてWeb Pushを送付する機能について
送信側の設定について記事を書かせて頂きます。
受信時に必要なFireBaseへのプロジェクト、アプリの登録などは
以前の記事「[FCMからWeb Pushを受信する](https://qiita.com/nishi-sankosc/items/38eaa16e8732f04b17ac)」を参照してください。

※FCMのPush送信のAPIについて
　記事作成時点で新しいHTTP v1 APIというものが出ているようですが、
　送信の手順が大きく違っているようなので[別の記事](https://qiita.com/nishi-sankosc/private/b9040ee57e6b7223ff21)で記載しています。
　この記事ではFCM HTTP APIでの送信で説明させて頂きます。

##Web Pushの送信

###登録トークンの取得
FCMにてPushを受信する設定をした際に
登録トークンが取得できます。
こちらを利用すると特定のユーザーにWeb Pushを送信できます。

```javascript:登録トークンの取得
const messaging = firebase.messaging();
Notification.requestPermission().then((permission) => {
  if (permission === 'granted') {
    // 通知を許可した場合
    console.log('Notification permission granted.');

    messaging.getToken().then((currentToken) => {
      if (currentToken) {
        // トークン取得成功
        console.log("currentToken:");
        console.log(currentToken);
      } else {
        // トークン取得失敗
      }
    });
  } else {
    // 通知を拒否した場合
    console.log('Unable to get permission to notify.');
  }
});
```

ブラウザの開発ツールのコンソールを確認すると登録トークンが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645739/aec6f8ed-52f8-7803-ee62-cc0291767308.png)
取得された登録トークンは宛先として使います。

###サーバーキーの確認
FCMにてPushを送信する場合にはサーバーキーが必要となります。
そちらを確認します。

Firebaseコンソールにてアプリの設定を確認(歯車マークを選択)すると設定画面に遷移します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645739/9e9ef184-d3e0-31a4-5a1c-b0b6d4c80597.png)

アプリの設定画面が開き、クラウドメッセージングのタブにサーバーキーがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645739/a4f358bf-63a2-61db-6a5b-99c9b846607b.png)
サーバーからWeb Push送信時に必要な情報になります。


###CURLにてFCMに送信
今回はCURLにてFCMにメッセージ送信依頼を作ります。
取得したサーバーキーをヘッダー情報のAuthorizationに設定し
`https://fcm.googleapis.com/fcm/send`にPOSTでアクセスすると
Pushを発行してくれるようです。

```php:push.php
<?php
$json = '{
"notification":{"title": "タイトル","body": "本文"},
"to": "[登録トークン]"
}';

$ch = curl_init();

$headers = array(
    'Content-Type: application/json',
    'Authorization: key=[サーバーキー]'
);

curl_setopt_array($ch, array(
    CURLOPT_URL => 'https://fcm.googleapis.com/fcm/send',
    CURLOPT_HTTPHEADER => $headers,
    CURLOPT_SSL_VERIFYPEER => false,
    CURLOPT_POST => true,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_POSTFIELDS => $json
));

$response = curl_exec($ch);

curl_close($ch);

```
※`[登録トークン]`、`[サーバーキー]`の部分は取得された値と置き換えてください。


作成した`push.php`にアクセスするとFCMに送信依頼が飛び、pushが受信されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/645739/0f5b4333-0558-8328-b78b-e6e7e0b58534.png)

また、`$json`のtoをregistration_idsとして複数デバイスの指定も可能のようです。

```php
$json = '{
"notification":{"title": "タイトル","body": "本文"},
"registration_ids": ["[登録トークン1]","[登録トークン2]"]
}';
```
nginx1.18 + php7.4.5 エラー対処メモ

# 目次
- 前置き
- 環境

#前置き
### **これはあくまで自分用のメモであり、また行う場合は必ずバックアップをとること**


# 環境
- Amazon Linux2
- nginx1.18
    - user nginx
    - group nginx
    - root /home/ec2-user/environment
- php7.4.5

# エラー
## 404
- nginxがnginx.confで設定したroot(ディレクトリ)に対してのパーミッション確認
- /etc/php-fpm.d/www.confをuser:nginx group:nginx にする
    - その後sudo systemctl restart php-fpm でphp-fpmを再起動
- /var/log/php-fpmの所有ユーザーは初期ではapacheになっている
    - chown nginx: php-fpm でnginxに変更する

## 403
- SELinuxの設定
    - 参照記事(https://qiita.com/chi9rin/items/af532d0dd9237cc65741)

###
今日の月齢を絵文字で表示するシェルスクリプト

Unicode絵文字が表示可能なフォントが設定されたターミナル上で実行すると、本日のおおよその月齢を計算して対応する絵文字を出力するシェルスクリプトです。

※2020-7-8 スクリプト修正
0で始まる数字が Bash により8進数とみなされるので、 month と date の頭に `10#`を追加。 

```moonage.sh
#!/bin/bash

year=`date +%Y`
month=`date +%m`
date=`date +%d`

#簡易月齢計算法第１表
array=(0 2 0 2 2 4 5 6 7 8 9 10)

#西暦年数から11を引き、その値を19で割った余りを求め、11を掛ける。この値をaとする。
a=$((($year-11)%19*11))

#月数から、表に従って値を求める。この値をbとする。
b=$((${array[$((10#$month-1))]}))

age=$((($a+$b+10#$date)%30))

if [ "$age" = 0 ] || [ "$age" = 29 ]; then
    echo -n "🌑新月"
elif [ "$age" -ge 1 ] && [ "$age" -le 6 ]; then
    echo -n "🌒三日月"
elif [ "$age" -ge 7 ] && [ "$age" -le 9 ]; then
    echo -n "🌓上弦の月"
elif [ "$age" -ge 10 ] && [ "$age" -le 13 ]; then
    echo -n "🌔十三夜月"
elif [ "$age" -ge 14 ] && [ "$age" -le 15 ]; then
    echo -n "🌕満月"
elif [ "$age" -ge 16 ] && [ "$age" -le 20 ]; then
    echo -n "🌖寝待月"
elif [ "$age" -ge 21 ] && [ "$age" -le 24 ]; then
    echo -n "🌗下弦の月"
elif [ "$age" -ge 25 ] && [ "$age" -le 28 ]; then
    echo -n "🌘二十六夜月"
fi
echo "(月齢:"$age")"
```
実行結果

```
~% chmod +x moonage.sh
~% date
2020年  7月  2日 木曜日 14:47:54 JST
~% ./moonage.sh
🌔十三夜月(月齢:11)
```

参考にしたサイト
 [月齢 - Wikipedia ](https://ja.wikipedia.org/wiki/%E6%9C%88%E9%BD%A2)
 [月齢計算](https://www.keisan-mondai.com/tools/moon.htm)
[Googleカレンダーに月齢を表示する](https://qiita.com/5sick/items/3bef3c03178d8559da43)
RPAの画像マッチングを開発時と異なる端末で実行するための設定

# いきなり本題
開発時と異なる端末で実行する際に、いわゆる**画像マッチング機能が動作しないかも**、とビクビクしてる人の参考になれば幸いです。。

#### 開発環境と実行環境で統一すべき設定項目


**1. Windowsの設定で、解像度を同じにする。
2. Windowsの設定で、デバイスピクセル比を同じにする (← 見落としがち？)
3. (ブラウザ等)アプリケーションの拡大縮小機能がある場合は、その縮尺も同じにする。**

#### デバイスピクセル比の設定画面の例
(Windowsのバージョン等によって、だいぶ変わると思います)
<img width="483" alt="a.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/357536/b25628a1-24e4-5ce4-b429-1f5bc7373ff9.png">

## WinActor(6.2)での確認結果
1のみ相違、2のみ相違と検証したところ、いずれもマッチせず。
両方とも揃えると、マッチしました。

## 補足
色についても、OSの設定で変わるような場合は（Windowsの夜間モードとか）、配慮が必要かもしれません。

※手元に試せる環境が無いので未確認ですが、実験した人がいたら教えてくださいませ。
macOSでスクリーンショットを撮ったときにプレビューを開かないようにする

# 問題
macOSでCommand+Shift+3やCommand+Shift+4でスクリーンショットを撮る際、自動的にプレビュー.appが開かれてしまいます。
開かれるまでに時間がかかりますし、その画像を保存しようとすると、ファイルの名前も改めて入力する必要があります。
これが鬱陶しいと筆者は感じました。
この問題は以前までは起きていませんでしたので、恐らくOSのアップデートで起こった問題なのかなと思います。
問題の様子を下に表示します。
![mac_screenshot_before.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302838/0c70bdf6-d630-f3ec-05d3-40e47d42f8bd.gif)

# 理想
以下の2つの用件を満たしたいです。
- スクリーンショットを撮った後にプレビュー.appを開かないように設定
- ファイルの名前はなんでもいいからとりあえず保存

# 環境
macOS Catalina version 10.15.5

# 解決策
以下の手順です。
1. Command+Shift+5で画面収録を起動
2. 画面下部の[オプション]をクリック
3. 出てきたメニューの[保存先]を変更する。
以上です。

# 結果
ストレスフリーになったさまを下に載せます。
![mac_screenshot_after.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302838/ae199b00-0b0b-74de-7696-363e75d70c19.gif)

# 参考
- "macos screenshot without opening preview application", https://apple.stackexchange.com/questions/395224/macos-screenshot-without-opening-preview-application/395227#395227  
StackExchangeで筆者が質問したものです。
tapufindウイルスの削除 for Mac

#この記事について
この記事はtapufindに感染したMacからtapufindを取り除くことを目的としている。
感染に気づいてググっても、英文であったり古いOSで説明がされている場合が多く、
とても分かりにくいので、日本語で簡潔に纏めようと思った次第である。

#tapufindとは
主にMacに感染するマルウェアの一つで、感染すると検索エンジンがtapufindに設定されたり、
ネットサーフィン中に、ユーザーを不快にさせるポップアップ表示されたりします。

感染経路はフリーのソフトウェアをインストールする際に、
こっそり入れられるパターンが殆どだという。

#削除手順
①　ターミナルを開く
②　'sudo rm -r /Library/LaunchDaemons/tapufind.plist'　と入力
③　管理者パスワードを入力
JavaScript でサーバ上にある画像を zip でまとめてダウンロードする

# 何をしたいの

既存のサイトやウェブアプリ上にある画像を取得してきて zip したい。

# サーバ上にある画像をダウンロードするコード

ここは素直に XMLHttpRequestで取得する。

```javascript
const getImage = (imageUrl) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', imageUrl, true);
    xhr.responseType = "blob";
    xhr.onload = (e) => {
      // 取得した画像データが e.currentTarget.response にある
      resolve(e.currentTarget.response);
    };
    xhr.send();
  });
};
```

# ダウンロードしたものを zip にまとめる

[JSZip](https://stuk.github.io/jszip/) というライブラリを使うと簡単。

```javascript
const generateZip = (images) => {
  return new Promise((resolve, reject) => {
    const zip = new JSZip();
    images.forEach((imageData, i) => {
      zip.file(`image${String(i).padStart(3, '0')}`, imageData);
    });
    zip.generateAsync({ type: "blob" }).then(resolve);
  });
};
```

画像だけまとめているけど、 `zip.file(ファイル名, ファイルの内容)` を使ってテキストファイル等別のファイルも纏められる。

# 組み合わせるとこうなる

```javascript
const imageUrls = [
  'https://chrysanthemum94.example.com/imageA.png',
  'https://chrysanthemum94.example.com/imageB.png',
  'https://chrysanthemum94.example.com/imageC.png',
];
Promise.all(
  imageUrls.map((url) => {return getImage(url);})
).then((blobs) => {
  generateZip(blobs).then((zip) => {
    console.log(URL.createObjectURL(zip))
  });
});
```

# まぁ、でも

一般にこういうのってサーバサイドで生成させる方が簡単な気はする。
静的なサイトなら最初からそういう zip ファイルを提供する方がいいだろうし。
サーバサイドをうんぬんするのが難しい事由がある場合に。
Git入門 - 最速でわかるGitの使い方

![git.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/fb0967e9-dfc1-4a73-54bc-eac66806061f.png)

Gitは事前に何時間も本やサイトの記事を読むよりも、まずは実際に触れてみるのが一番ですので、本記事では具体的な手順を説明します。

#1.Gitとは

Gitは、プログラムソースなどの変更履歴を管理する分散型のバージョン管理システムで、4つの領域に分かれています。

- ワークツリー
- ステージング
- ローカルリポジトリ
- リモートリポジトリ

リモートリポジトリ以外はローカル環境（自分の端末の中）に属しています。
リモートリポジトリは、インターネット上にあるGitHubサービスのリポジトリで、チームで作り上げたコードを格納する場所です。

この説明だけではいまいちピンとこないと思いますので、実際に使ってみましょう。

#2.Gitのインストール

MacOSの場合はデフォルトで入っていますので、何も問題はないかと。
WindowsOSの場合は、[Git for Windows](https://gitforwindows.org/)からダウンロードしてインストールを進めてください。
インストールし終えたら、ターミナルで以下のコマンドを実行します。

```
$ git config --global user.name "ユーザー名"
$ git config --global user.email "メールアドレス"
```

リモートリポジトリを利用するには[GitHub](https://github.co.jp/)のアカウントを作り、サインインする必要がありますので、済ませておいてください。

#3.リモートリポジトリの作成

サインインしたら左上のNewボタンをクリック。
![img1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/2d7fa557-e7c4-a92f-1023-0d95830da68c.png)
リポジトリ名を入力してCreate repositoryをクリック。（インターネット上に公開する場合はPublic、後悔したくない場合はPrivateを選択してください）
![img2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/5e829733-7cc7-5596-9c48-47f519927b70.png)
下の画面のようになったら準備完了です。
![img3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/1da2c919-fa7a-4528-be0f-1519db5c46e7.png)

#4.Gitの操作

好きな場所に練習用のディレクトリを作成します。ターミナルを開き、練習用ディレクトリに移動してもらい、以下のコマンドを入力します。

```
$ echo "# test" >> README.md
```

これでREADME.mdファイルが作成されました。
lsやcatで確認すると、

```
$ ls
README.md
$ cat README.md
# test
```

のように表示されるはずです。これでワークツリーにファイルを用意することができました。

次はターミナルで

```
$ git init
```

を実行します。このコマンドでステージングが準備されたりローカルリポジトリが作成されたりします。

```
$ git add README.md
```

上記のコマンドを実行してもターミナル上では特に変化はありませんが、これでREADME.mdがステージングに追加されます。
ちなみに、今いるディレクトリのファイルをまとめて追加したい場合は、

```
$ git add .
```

と入力します。

次に、README.mdをステージングからローカルリポジトリに追加します。

```
$ git commmit -m "initial commit"
```

""の中には、ファイルにどんな修正を加えたかわかるようにメッセージをつけます。その際、-mを必ずつけてください。

リモートリポジトリにあるURLをコピーします。
![img4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/a00ce7a8-0b28-dc55-f918-a3970bc2c356.png)
次に、以下のコマンドを実行します。

```
$ git remote add origin https://github.com/アカウント名/リモートリポジトリ名.git
```

これでローカルリポジトリとローカルリポジトリを紐づけることができます。設定を確認したい場合は、

```
$ git remote -v
```

を実行してください。

最後にターミナルで、

```
$ git push origin master
```

を実行すれば、リモートリポジトリにREADME.mdがアップロードされます。リモートリポジトリを確認すると、
![img5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665011/641c4746-7b32-0e80-8780-d42aeb67caff.png)
無事ファイルが追加されていることがわかります。
【備忘録】ターミナルのtransコマンドを使う時に、API制限を回避してファイル翻訳を実行させたい

# 【備忘録】ターミナルのtransコマンドを使う時に、API制限を回避してファイル翻訳を実行させたい
[Translate-shellを無限に動かして遊ぶ#API制限の回避](https://qiita.com/eggplants/items/f3de713add0bb4f0548f#api制限の回避)のコマンドを都度都度打ち込んだり、transコマンドをいじるのに抵抗があったので、ファイル化しようとして躓いたところなど。
知ってるかどうかの違いだけど、まとまった情報はなかった。

<details><summary>前提：transコマンドのインストール</summary><div>

transコマンドのインストール自体は[本家](https://www.soimort.org/translate-shell/#installation)の通り。
環境により方法が異なるため、ここでは解説できない。

私の環境（WSL:Ubuntu）だと`#3. From Git`の手順でインストールしている。

``` Terminal.
git clone https://github.com/soimort/translate-shell
cd translate-shell/
make
[sudo] make install
```

参考程度に。

</div></details>

# 実行ファイル（Bash）
``` trans_file.bsh
#!/bin/bash
if [ -z "$BASH_VERSION" ] || [ "${BASH##*/}" != "bash" ]; then
  echo "$0: RETURN: Use bash" >&2
  exit 1
fi

input='出力元のファイル'
output='出力先のファイル'
echo >${output}
while read line; do
  # 英語のファイルを日本語に翻訳したい場合
  echo $line | trans en:ja -b -no-autocorrect | tee -a ${output}
  sleep $[RANDOM%5+5]  # 【※】
done <${input}
```

## ※補足
Bashである必要があるのは`$[RANDOM%5+5]`の部分。
shで書き換えられるならbashである必要はない。

# 参考
- [Translate-shellを無限に動かして遊ぶ](https://qiita.com/eggplants/items/f3de713add0bb4f0548f#api制限の回避)
- [detect bash（bashから実行されているかどうかの判定）](https://qiita.com/ma2saka/items/f975fff5af6d48255e0a)
- [Qiitaでいつも調べちゃうマークダウン（表、折りたたみ）](https://qiita.com/tea4/items/5b430c0ed3da3372166c)
  - 本記事内の折りたたみの書き方

<details><summary>ご協力のお願い</summary><div>
読みやすく、疲れない記事にする努力をしているのですが、Qiitaで表示数(View)は分かっても読了を知る方法がないので、
読了された方はLGTMを押してもらえると「この記事は最後まで読んでもらえたんだな」と判別できて助かります。
お手数をおかけします。
</div></details>