OmniAICreator/Qiita-1.07M huggingface dataset:
マウスポインターをコライダー内部に閉じ込める方法

コライダー判定のPhysics.Raycastは”コライダー内部にある”という判定はしてくれますが、コライダーから見て外部のどこにあるのか？という判定はしてくれません。なのでコライダー内部にマウスポインターを留めたいというときにはちょっと工夫が必要です。

まず、平面(Plane)とRayとの交差する点を取得するコードを組みます
(~~これもなぜかUnityに標準で備わっていない~~)
Planeで交差点を取得するには

```C#
    //Planeで取得
    public static Vector3 CrossPointOnPlane(Plane plane, Ray ray)
    {
        float enter = 0.0f;
        plane.Raycast(ray, out enter);

        return ray.GetPoint(enter);
    }
```

平面と交差する点を求められない訳がないとは思いましたが、直接取得する関数がないだけでした

```C#:CrossPointOnPlane

    //平面上の点PlanePointと法線PlaneNormalで取得
    public static Vector3 CrossPointOnPlane(Vector3 PlaneNormal, Vector3 PlanePoint, Ray ray, float distance = 1000.0f)
    {
        Vector3 result = Vector3.zero;

        Vector3 v1 = ray.origin - PlanePoint;
        Vector3 v2 = ray.origin + (ray.direction * distance) - PlanePoint;

        float d1 = Mathf.Abs(Vector3.Dot(v1, PlaneNormal));
        float d2 = Mathf.Abs(Vector3.Dot(v2, PlaneNormal));

        float denom = d1 + d2;
  
        if (denom > 0)
        {
            result = ray.GetPoint(distance / denom * d1);
        }
        return result;
    }

```

これを利用して

```C#:pointerPositionInClosedCollider
    public Vector3 pointerPositionInClosedCollider(Camera camera, Collider collider, Vector3 normal)
    {
        Vector3 pointerPosition = Vector3.zero;

        Ray ray = camera.ScreenPointToRay(Input.mousePosition);
        RaycastHit hit;
        bool isInCollider = Physics.Raycast(ray, out hit, 100);
        if (isInCollider)
        {
            pointerPosition = hit.point;
        }
        else
        {
            Vector3 CrossRayPointOnPlane = Calc.CrossPointOnPlane(normal, collider.transform.position, ray, 100.0f);
            pointerPosition = collider.ClosestPoint(CrossRayPointOnPlane);
        }

        return pointerPosition ;
    }

```


カメラとコライダーとのRayとRaycastHitをとり、コライダー範囲内にカーソルがある場合はRaycastHit.pointを返し、そうでない場合はコライダーを中心とした任意の法線を持つ平面にしたがってコライダー内部にぴったり張り付いて動くポインターが出来上がります。
Visual Studio Code の Remote Containers でNodeの仮装環境を作成する

# 概要

Visual Studio Code (以下、VSCode）の Remote ContainersでNodeコンテナを作成し、仮装環境で開発する。

## 環境

本記事を記載時点でのバージョン等を記載する

* macOS Big Sur 11.2.1
* VSCode 1.53
* Remote - Containers v0.158.0

## 手順

1. Nodeを使用するフォルダを作成
2. VSCodeの```New Window```で新しいWindowを開く
3. ```Open folder```で作成したフォルダを開く
4. コンテナ設定ファイルを作成する
    4. 左下のRemote Containerのボタン(><が重なったようなマーク)をクリック
    5. コマンドパレットが開くので、```Remote-Containers: Add Development Container Configuration Files...```を選択
    6. ```Node.js```を選択
    7. バージョンを選択（この記事では```14```を選択)
8. コンテナ仮装環境を開く
    8.  左下のRemote Containerのボタン(><が重なったようなマーク)をクリック
    9.  ```Remote-Containers: Reopen in Container```をクリック
10.  以上で開発環境の準備が整いました
10.  終了する場合
    11.  左下のRemote Containerのマークをクリック
    12.  ```Close Remote Connectionを選択

## 参考） Docker-compose.ymlで設定する場合

docker-compose

```.devcontainer/devcontainer.json
{
	"name": "Node-test",
	"dockerComposeFile": "docker-compose.yml",
	"service": "app",
	"workspaceFolder": "/dir",
	"settings": { 
		"terminal.integrated.shell.linux": "/bin/zsh"
	},

	"extensions": [
		"dbaeumer.vscode-eslint"
	],
	"remoteUser": "node"
}

```

```.devcontainer/docker-compose.yml
version: '3'

services:
  app:
    build: 
      context: .
      dockerfile: Dockerfile
    command: sleep infinity
    volumes:
      - ..:/dir
```

```.devcontainer/Dockerfile
ARG VARIANT="14"
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
CMD [ "sleep", "infinity" ] 
```
Laravel7でsweetalert2を使ってダイアログを表示する

##【開発環境】
Windows 10 HOME

Laravel Framework 7.25.0
PHP 7.4.7

##【目次】

|  | 　　項目　　　　　|
|:----:|:-------------|
| - | [はじめに](#はじめに) |
| - | [使い方](#使い方) |
| - | [この辺を参考に](#この辺を参考に) |


#はじめに

Laravel7でsweatalert2を使ってダイアログを表示してみてみた。


#使い方
CDNを設定する。
(ファイルをダウンロードする方でもお好みで)

```php:qiita.blade.php
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.15.4/sweetalert2.css"  />
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.15.4/sweetalert2.js"></script>

```

HTMLのボタン部分。

```php:qiita.blade.php
<input type="image" class="delete" id="delete" src="{{ asset('img/delete.png')}}" alt="削除する">
```

Javascriptの処理の部分。

```php:qiita.blade.php

<script>
$('#delete').on('click', function(e) {
    e.preventDefault();
    var form = $('form');
	
	swal.fire({
        title: "本当に削除しますか?"
        ,icon: "warning"
        ,showCancelButton: true
        ,confirmButtonColor: "#DD6B55"
        ,confirmButtonText: "削除します!"
		,position : 'center'
		,closeOnConfirm: false
		,allowEscapeKey: true //Escボタン
		,allowOutsideClick : true //枠外クリック
		,showCloseButton : true   //閉じるボタン

	}).then(function(result) { //←この行の記述を修正した結果改善された

		if (result.value) {

			form.submit();

			Swal.fire({
				position: 'center',
				icon: 'success',
				title: 'Successfully Deleted!',
				showConfirmButton: false,
				timer: 2500
			})
		}
	});
});
</script>

```

画面を見てみると
無事にダイアログが表示されました。

![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/669259/0fdfef11-ead1-00da-3add-469c22086a93.png)



#この辺を参考に

[【使い方】 JS Sweet Alert 2](https://lmn-blog.com/sweet_alert2/)

[SweetAlert2のパラメータ（引数）の使い方まとめ | 使えるキー情報の使用頻度順一覧](https://keizokuma.com/sweetalert-keys-main/)
【Docker + mysql】データベースへの接続ができない

#打ったコマンド

```
$ docker-compose run --rm web rails db:create
```

#エラーの原因は？
環境構築の際にエラー発生。

↓発生したエラー

```
Access denied for user 'root'@'172.28.0.4' (using password: YES)
Couldn't create 'app_development' database. Please check your configuration.
rails aborted!
Mysql2::Error::ConnectionError: Access denied for user 'root'@'172.28.0.4' (using password: YES)
```

**既存のボリュームに対してmysqlコンテナを開始したため、Mysqlが、既存のデータベース、ユーザー、パスワードなど参照したためと思われます。**

Docker Desktopで確認してみてください。既存のボリュームが多数あると思います。

そこで、インスタンスを初期化。つまり既存のボリュームを削除します。

#解決方法
dockerコンテナのボリュームを消去。
その後、バックグラウンドでイメージの構築〜コンテナの構築・起動を行う

```
$ docker-compose down --volumes
$ docker-compose up -d --build
```

#参考
[docker + mysql が接続できない... Access denied for user 'homestead'@'172.20.0.1' (using password: YES)](https://qiita.com/fumi_042/items/7d1c14e335ab1c226e0f)
のび太：Githubの間違ったブランチにpushしちゃったよ～！

のび太：助けてよドラえも～ん！

ドラえもん：どうしたんだいのび太くん

のび太：ローカルの変更をpushする前に，pushしたいブランチをチェックアウトするのを忘れててそのまま間違ったブランチにpushしちゃったんだよ～！

ドラえもん：やれやれまったく君はおっちょこちょいなんだから。
ドラえもん：そういう時は`git revert`と`git cherry-pick`を使ってあげれば良いんだ。
ドラえもん：僕が横で見ててあげるからやってごらんよ。

のび太：どうやるの？

---

ドラえもん：まずは`git revert`と`git cherry-pick`がそれぞれ何をするのか確認しておこう。[この記事](https://qiita.com/chihiro/items/2fa827d0eac98109e7ee)に`git revert`がよく説明されているよ。

>既存のコミットを取り消すためのコマンドです。
「取り消したいコミットを打ち消すようなコミットを新しく作成する」という処理によって、既存のコミットを取り消します。
出典：https://qiita.com/chihiro/items/2fa827d0eac98109e7ee

のび太：なるほど！**直前のコミット履歴を消さずに**新しく打ち消しコミットを作って直前のコミットを取り消すことができるのか！

ドラえもん：そう！吸収が速いじゃないかのび太くん，本当にのび太くんかい？

---

ドラえもん：それから[これ](https://qiita.com/ta__ho/items/8204a22a53b02ee0817e)が`git cherry-pick`の説明だよ！

>他ブランチの特定コミットのみを反映されることができるコマンドです。(ママ)
出典：https://qiita.com/ta__ho/items/8204a22a53b02ee0817e

のび太：なるほど，これはそのまんまだね。
のび太：でもさドラえもん，「ちぇりーぴっく」って何？

ドラえもん：「ちぇりーぴっく」っていうのは日本語で「つまみ食い」って意味だよ。他のブランチから好きなコミットだけを「つまみ食い」して持ってくるからぴったりの名前だね。

---

のび太：`git revert`と`git cherry-pick`が何なのかは分かったよ

ドラえもん：それじゃあ間違ったブランチにpushしてしまったコミットを正しいブランチにpushし直していこうか。まずは`git revert`から。

ドラえもん：その前に今いるブランチが間違ってpushしてしまったブランチかどうかを確認しよう。
のび太：うん。さっき間違ってpushしちゃったブランチにいるよ。

ドラえもん：よし，そしたら`git log`で間違ってpushしたコミットの"コミットID"をコピペしよう。

のび太：よしよし...ねぇ，`git log`ってどうやって終わるの？

ドラえもん：`Q`で終えられるよ。
そして`git revert コミットID`からの`git push origin HEAD`だ！

ドラえもん：ここまででファイルの内容は間違いコミットの直前のコミットに戻っているはずだよ。

のび太：本当だ！オッケードラえもん，次は？

ドラえもん：そしたら，本来pushしたかったブランチをチェックアウトしよう。

ドラえもん：そして，`git cherry-pick 間違いコミットのID`からの`git push origin HEAD`だ！

のび太：あ！本当だドラえもん，こっちにコミットしたかった内容がちゃんとpushできてるよ！

ドラえもん：おめでとうのび太くん！

---

...いかがでしたでしょうか。のび太ができすぎる気もしますがまとめると，

|手順|やること・達成内容|
|:-----|-----:|
|1|今いるブランチが間違いコミットをしてしまったブランチかどうか確認|
|2|もし別ブランチにいた場合は1のブランチをチェックアウトする|
|3|`git log`で間違いコミットのコミットIDをコピペする
|4|`git revert 3のコミットID`して`git push origin HEAD`する|
|5|間違いコミットの取り消しに成功！|
|6|本来pushしたかったブランチをチェックアウト|
|7|`git cherry-pick 3のコミットID` して`git push origin HEAD`|
|8|本来のブランチにコミットをpushできた！|

となります。今回自分がはまったことを記事にしておりますので，なかなか自分視点で分かりづらいところがあったかもしれません。間違いなどの指摘も大歓迎ですし，コメントなども頂けると嬉しいです。
IAM ユーザーとしてサインインができない

IAMユーザー作成後ログインできないという問題に直面しましたが、下記画像赤枠部分にアカウントIDではなくEメールアドレスを誤って入力していたのが原因でした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630191/66132bc8-3a0b-56eb-43e1-2d5e34d1e357.png)

アカウントIDはルートユーザーでログインし、右上にあるアカウント名でマウスオーバーすると確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630191/2b5d38b5-5383-9ba2-2b75-aba6e3ace74a.png)

<h1>感想</h1>
無料枠なくなったので作り直してますが何も覚えてないものですね。
heroku mysql へ接続

# 表題の通りです、`heroku`で`mysql`へ接続してDBを操作します。

## 参考ページ
下記ページを参考にしました。
このページが消えてしまうと参考にできないので、私のメモとしてここに記載しておきます。
http://j-caw.co.jp/blog/?p=1276

感謝です🙏🏿

`heroku CLI`をインストールします。

```bash
brew tap heroku/brew && brew install heroku
```

herokuプロジェクトのルートしレクトりーで下記を実行します。

```bash
heroku config
```

もしくわ

```bash
heroku config -a # アプリの名前
```

でheroku アプリの様々な情報を取得できます。

mysql接続に必要な情報は下記項目になります。

`CLEARDB_DATABASE_URL`

上記項目はユーザー名や、パスワードなどが記載されております。

```bash
CLEARDB_DATABASE_URL:     mysql://UUUUUUUUUUU:PPPPPPP@us-cdbr-east-02.cleardb.net/heroku_DDDDDDDDDDD?reconnect=true
```

上記のような感じです。

この情報でログインまでできます。
下記にログイン方法を記載します。

```bash
mysql -u UUUUUUUUUUU -p -h us-cdbr-east-02.cleardb.net heroku_DDDDDDDDDDD
Enter password: PPPPPPP
```

M1 macがリリースされてから、`mariadb`を用いる人もいるかと思います。
`mariadb`の場合この方法では`DB`に接続できませんので、下記の方法で行ってください

```bash
mysql -h us-cdbr-east-02.cleardb.net -u UUUUUUUUUUU -p
```

となります。
Excel VBA セル範囲を表にする

はじめまして。自分がプログラミングをしていて詰まった所を書いていきます。
今回詰まったのはVBAでセル範囲を表にする方法です。セル範囲はA3からC6とします。
(この記事はExcel 2019を元にして書いています。)

```vb
Sub table()
    ActiveSheet.ListObjects.Add(xlSrcRange, Range("A3:C6"), , xlYes).Name = "テーブル1"
End sub
```
セル範囲を表にするには必ずActiveSheet(あるいはWorkSheets(1)など)が必要なようです。
【初心者向け】結局どのデバイスがどのブラウザに対応しているかわからん人へ。フォントメーカーを紹介

# どうも7noteです。フォント素人へ、この便利ツールよ届け！

フォントって本当にたくさん種類がありますよね。明朝体からゴシックや英数専用のフォントなど様々あります。



前置きはおいといて、**デバイスごとにどのフォントが使えるのか簡単に知る方法、知りたくありませんか？**

今回は私がフォント選びでよく使う**フォントツールをご紹介**

## フォント選びが簡単「フォントファミリーメーカー byサルワカ」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/ea9759b5-4307-6842-8479-7b4b365dd379.png)
リンク： https://saruwakakun.com/font-family

何がすごいかというと

- **windows mac ios のデフォルトフォントが何かわかる**
- **直感的なUIで簡単にオリジナルフォントファミリーが作れる**


いや、ほんとにこれめっちゃ便利ですよ。

### 使い方

**「優先させたいフォントから順番に下の黒いボックスにドロップするだけ。」**

たとえばヒラギノ優先で作りたいのであればこんな感じ。
最後に游明朝を入れてwindowsにも対応させる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/b0c5718b-6775-cf1f-b983-b49697f49bbd.png)

あとは最後に一番下のところをダブルクリックでコピー完了！
以下のようなテキストをコピーできます。

```
font-family: 'ヒラギノ角ゴシック','Hiragino Sans','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ヒラギノ角ゴ StdN','Hiragino Kaku Gothic StdN',YuGothic,'Yu Gothic', 
sans-serif;
```

##まとめ

フォント選びって結構重要です。フォントによっては文字サイズが変わってデザインが変わって時にはコーディングの仕方も変えないといけない場合もありますからね。

あと、アンドロイドがないのは端末によって入っているフォントが違うためです！
便利なのでぜひ使ってみてくださいね。


[Font-familyメーカー：フォント種類一覧からサクッと指定](https://saruwakakun.com/font-family)



#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
Pythonでウィンドウのタイトルから爆速で位置を取得【Windows】

# なぜ書いたか

Pythonでマウスクリックしたい！アプリが起動しているのか？起動しているならどこにあるのか？
[PyAutoGUI](https://pyautogui.readthedocs.io/en/latest/)や、[PyWinAuto](https://pywinauto.readthedocs.io/en/latest/)、 [Windows App Driver](https://github.com/microsoft/WinAppDriver)など試したが、どれも欠点が目立ち上手くいきませんでした。

個人的に最適と思った答えを見つけたので、幸せを共有しようと思いました。
みんなで自動化してサボりましょう。

# 既存ライブラリの未熟なところ

これらの欠点から、基本的にはPyAutoGUIを使い、できない部分のウィンドウ操作系は独自実装として補う使い方にしました。
独自実装した部分はそのうちプルリクしようと思っています。

- [PyAutoGUI](https://pyautogui.readthedocs.io/en/latest/) / [Sikulix](https://github.com/RaiMan/SikuliX1) / [Lackey](https://github.com/glitchassassin/lackey)
 - ウィンドウ操作系は[ロードマップ](https://pyautogui.readthedocs.io/en/latest/roadmap.html)に開発中と書いてあたったりする
 - コンセプトが**画像認識**なので広範囲から探すと遅い
- [PyWinAuto](https://pywinauto.readthedocs.io/en/latest/)
 - [HowTo](https://pywinauto.readthedocs.io/en/latest/HowTo.html)に掲載されているアプリケーションの起動方法で起動できないものがある。
 - 結局Pythonからcmdコマンドを使う羽目に。
- [Windows App Driver](https://github.com/microsoft/WinAppDriver)
 - **判断が遅い**。
 - Xpathで探したりして、とにかく遅い。大規模なERP系アプリケーションのXpathとか、めっちゃ遅い。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/134703/40c48e22-0fb5-110a-3c94-d4fda1dcb255.png)



# あらすじ

Python で Windows API を使って、ウィンドウの位置を返す関数を作りました。
ウィンドウのタイトルを基にして、Top・Left・Bottom・Rightの数値を取れます。
数値は画面の左上隅を原点とした正の数です。

# コード

いきなりコードです。

```py
import ctypes
from ctypes.wintypes import HWND, DWORD, RECT

def GetWindowRectFromName(TargetWindowTitle:str)-> tuple:
    TargetWindowHandle = ctypes.windll.user32.FindWindowW(0, TargetWindowTitle)
    Rectangle = ctypes.wintypes.RECT()
    ctypes.windll.user32.GetWindowRect(TargetWindowHandle, ctypes.pointer(Rectangle))
    return (Rectangle.left, Rectangle.top, Rectangle.right, Rectangle.bottom)

if __name__ == "__main__":
    print(GetWindowRectFromName('CALC'))
    pass
```

# 動作

引数は、日本語でも何でもいいですが、ウィンドウのタイトルがそのまんま入ります。

[FindWindowW](https://docs.microsoft.com/ja-jp/windows/win32/api/winuser/nf-winuser-findwindoww) を使って、ウィンドウハンドルを取得します。

次に、このハンドルが示すウィンドウから [GetWindowRect](https://docs.microsoft.com/ja-jp/windows/win32/api/winuser/nf-winuser-getwindowrect) で [RECT 構造体](https://docs.microsoft.com/ja-jp/windows/win32/api/windef/ns-windef-rect)に位置を取得します。

このRECTの中身でタプルを再構築したものを戻り値として返します。

※サンプルコードでは`CALC`を引数に入れていますが、日本語環境では`電卓`と入れるとOKです。

# 環境

Python 3.8.2 | packaged by conda-forge | (default, Apr 24 2020, 07:34:03) [MSC v.1916 64 bit (AMD64)] on win32 Windows 10 Pro 1909

# 参考

https://stackoverflow.com/questions/7142342/get-window-position-size-with-python/62770532

# まとめ

ネイティブな関数をラップしているだけなので爆速。

**Excelsior!**
【Pytorch】RuntimeError: CUDA error: an illegal memory access was encountered

<h1>errorの内容</h1>
pytorchでCrossEntropyLossをlossの計算に使った場合errorが出る。

```
RuntimeError: CUDA error: an illegal memory access was encountered
```

<h1>原因</h1>
pytorchのimplementationミスだそうです。
labelが[0 ~ NUM_CLASS-1]の範囲を超える事によるerror
今回はクラスに分類されない物体を255と設定していたのでエラーとなりました。

<h1>解決策</h1>
・labelを[0 ~ NUM_CLASS-1]の中で設定する

or

・pytorch 1.5.1以上にupdateする


<h1>参考文献</h1>
https://discuss.pytorch.org/t/i-get-runtimeerror-cuda-error-an-illegal-memory-access-was-encountered/88118
Ruby on Railsが生まれた背景について学んだこと

# 調べた経緯
Ruby on Railsを一通り勉強した後で、Railsがどのような点で優れているのかを知りたくなり、生まれた背景について調べてみました。Railsがより好きになりました。まだまだ未熟ですので、誤りなどありましたら教えていただければ幸いです^ ^

# Railsが誕生する前の時代
Rails誕生前の時代、SOAの考え方が主流で、サービス間の連携にはSOAPやXMLを用いており、自由に様々な製品を結合してシステムを組み立てることができた。

* SOA (Service Oriented Arthitechture)　アプリケーションの機能を独立したサービスとして部品化し、それらを必要に応じて組み合わせていくことにより新たなアプリケーションを構築する考え方。サービス間の連携にはSOAPやXMLといった標準化されたデータ形式やプロトコルが用いられ、特定のソフトウェア実行基盤に縛られることなく自由に様々な製品を結合して情報システムを組み立てられる。

* SOAP (Simple Object Access Protocol) 異なるコンピュータ上で動作するプログラム同士がネットワークを通じてメッセージを伝え合い、連携して動作するための通信プロトコルの一つ。複雑な入力や出力があるサービス向け。

* XML (Extensible Markup Language)　拡張可能なマークアップ言語。SGMLの拡張性とHTMLの軽さを取り入れて発展させたのがXML。

しかし、その自由度の高さゆえに設定が多く、単純なアプリ開発にも膨大なコンフィグレーションとマッピングを必要とした。

# Railsの誕生
設定が多かったこの時代へのアンチテーゼとして、RailsはCoC（Convention over Configuration)（設定よりも規約）の理念を採用し、railsの決めた規約上で開発するのであれば開発スピードを段違いに向上させることに成功した。（DHHのブログを15分で作る）

また、Railsの工夫点として次のものが挙げられる。

- SOAPではなくRESTfulな設計を採用した。リクエストにはあらかじめ定められたHTTPメソッドを採用した。レスポンスについてもタグの名前を自由に決めることができたXMLと比較して、シンプルな形式のJSONを扱えるようにした。

- DRY（Don't Repeat Yourself）の概念を採用し、同じような記述は一つにまとめられる設計を採用した。

- 動的型付け言語であるrubyを採用することによって、あらかじめ型を設定する必要をなくした。

- MVCアーキテクチャに基づいた設計とすることで、リクエストに対して、Action ControllerとActive RecordとAction viewが自動的に処理をするため、設定を減らした。

このように開発スピードを重視した規約優先のRailsの開発によって、自由が高いが複雑な設定を要した疎結合の時代から自由度は低いが設定がシンプルな密結合主流の時代へと変わっていった。

# 参考にした記事
https://www.publickey1.jp/blog/18/2018.html

# 感想
時代の流れを変えたRailsはシンプルにかっこいいなと思いました！これから学習する他の言語やフレームワークについても生まれた時代背景を調べながら学習して、その技術の強みを見出していきたいと思います。
Unityで物体を動かす方法

<h5>１，transform.positionを使う。</h5>

```
//始めの位置を指定する。
this.gameObject.transform.position = new Vector3(0f, 0f, 0f);
```
<b>またUpdateメソッド内で少しづつ位置を変えることで移動させられる。</b>
:writing_hand:：Vector3は構造体(値型)であるので、現在の値を代入したposをもう一度transform.positionに渡す必要がある。

```
void Update()
{
    //現在の位置を取得
    Vector3 pos = this.gameObject.transform.position;
    //現在の位置からx方向に1移動する
    this.gameObject.transform.position = new Vector3(pos.x + 1, pos.y, pos.z);
}
```
<b>2.transform.Translateを使う。

```
void Update()
    {
        // 毎秒その物体のZ軸方向に＋１進む
        transform.Translate(Vector3.forward * Time.deltaTime);
        // 毎秒ワールドのX軸方向に＋１進む
        transform.Translate(Time.deltaTime, 0f, 0f, Space.World);
    }
```
<b>3.AddForceを使う</b>
:writing_hand:FixedUpdateは物理量の計算をするときに用いる。
デフォルトでForceMode.Forceとなるので省略できる。

```
    void FixedUpdate()
    {
        rb.AddForce(0f,2f,0f,ForceMode.Force);
    }
}
```
| ForceMode | 詳細 | 
|:-----------|------:|
| Force       | 一定に力を加え続ける。質量は考慮される        | 
| Acceleration     | 加速され続ける。　質量は無視される。      | 
| Impulse    | 瞬間に力を加える（爆発のような）質量は考慮される。        | 
| VelocityChange        | 瞬間にその速度になるように力を加える。質量は無視される。| 

<b>4.MovePositionを使う</b>
MovePositionはRigidbodiがKinematicでも働き滑らかに動く。
Dynamicの時は滑らかよりtransform.position = new posに近くなるので注意

```
//rb はRigidbodyの型でRigidbodyをGetComponentしている
rb.MovePosition(transform.position + Vector3.forward * Time.deltaTime);
```
急に移動して衝突判定をすり抜けたくない時に滑らかに動くので役に立つ。
AutoLayoutで詰まったときの対処法

まずはTopの制約を確認

たまに制約がおかしいなんて思うことがあります。

そこで問題なかったらtrailing 

次にleading

こんな感じで調べていくと割と原因を特定しやすいです。

参考までに

もし結合試験などで部分的に配置がおかしいなんて場合は

正しいviewと比較をしながら進めるとより解決できます
rails Basic認証導入

# はじめに
個人でアプリケーション開発を行った時の必要最低限の認証機能を実装しました。
今回はその機能を簡単に実装できるように記載しました。

### 実行環境
pc: macOS Catalina
shell: zsh
rails: 6.0.0
ruby: 2.7.2

# Basic認証とは？
Basic認証は、アプリケーションを使用できるユーザーを限定することです。

HTTP通信の規格に備え付けられているユーザー認証の仕組みのことをいいます。
サーバーとの通信が可能なユーザーとパスワードをあらかじめ設定し、それに一致したユーザーのみが、アプリケーションを利用できることです。

アプリケーションを本番環境を整えると、全世界誰でもアクセスができる状態になります。
その為ユーザーに制限をかけることで、ユーザー名・パスワードを知っている人のみ使用ができます。

# 導入方法
Basic認証はGemやAPIを使用しないで簡単に実装することが可能になります。
詳しくは以下になります。
１、app/controllers/application_controller.rbにauthenticate_or_request_with_http_basicメソッドを記述する。
２、開発環境に環境変数を設定する
以上

本番環境の場合は
３、本番環境の環境変数を設定する
## Basic認証導入
まずは、Basic認証を使用できるように以下のコードを記述します。

```ruby:application_controller.rb
class ApplicationController < ActionController::Base
    before_action :basic_auth

    private
    def basic_auth
      authenticate_or_request_with_http_basic do |username, password|
        username == ENV['BASIC_AUTH_USER'] && password == ENV['BASIC_AUTH_PASSWORD']
      end
    end
end
```

## 環境変数の設定
次に、開発環境の環境変数を設定します。
ターミナルの以下の順番で処理を実行してください。

```
1: vim ~/.zshrc
2: インザートモードで以下を記述します。
   export BASIC_AUTH_USER='ユーザー名'
   export BASIC_AUTH_PASSWORD='パスワード'
3: escキー
4: :wq
5: Enterキー
6: source ~/.zshrc
```
これで環境変数の設定が完了しました。

## 本番環境で設定する場合（Heroku）
以下のコマンドをターミナルで実行してください。

```
# 以下で本番環境の環境変数設定ができます
heroku config:set BASIC_AUTH_USER="ユーザー名"
heroku config:set BASIC_AUTH_PASSWORD="パスワード"

# 正しく設定できているか確認できるコマンドは以下です
heroku config
```

# 解説
なぜ、application_controllerに実装するのか？
application_controllerはコントローラーの共通になるからです。
application_controllerに実装することで全てのコントローラーにBasic認証を要求することができます。
そして、before_actionを設定することでログイン前に実行できるようになります。

```ruby:application_controller.rb
class ApplicationController < ActionController::Base
    before_action :basic_auth
    #　before_actionを使用することで優先して処理をできるようにしています。

    private
    def basic_auth
      authenticate_or_request_with_http_basic do |username, password|
        username == ENV['BASIC_AUTH_USER'] && password == ENV['BASIC_AUTH_PASSWORD']
      end
    end
　　# ENV['BASIC_AUTH_USER'] && password == ENV['BASIC_AUTH_PASSWORD']は環境変数から設定した
　　# ユーザー名・パスワードを呼び出すためのコードになります。
end
```

# まとめ
Basic認証は少ないコードで実装ができ便利ですが、安全性に関しては高い訳ではありません。
HTTP通信で定義されている為、ユーザー名・パスワードがそのまま漏洩するリスクもあります。
それに誰でも簡易に実装できるがために、オリジナルアプリに導入してもスコアがもらえることは無いでしょう。
ログアウト機能という概念が無いため、より性能を高めるためには複数のサーバーをまたいだ認証なため実装が困難になります。
そのため、画期的とは言えないでしょう。
IntelliJ IDEAの設定のgit管理

# キーマップ
https://www.jetbrains.com/help/idea/configuring-keyboard-and-mouse-shortcuts.html#custom_keymap_location のパスにxmlを作り、これを管理すれば良い。

## Linux
### 1. Keymap設定を作る
* File > Settings > Keymap
  * ベースにしたい設定を選んでDuplicate

### 2. 保存
OK を押して IntelliJ IDEA を停止すると、 `~/.config/JetBrains/IntelliJIdea[version]/keymaps/[name].xml` に設定が作られるので、これを管理下に置いた後、起動などすると良い。
思考： Disentangle Latent Representation of VAE

刚刚读完Toward Controlled Generation of Text这篇paper，然后花了两个小时一直在思考： 这个模型跟GAN的区别到底在哪里？为什么GAN如日中天，VAE还经久不衰？难道只要加入一个中间embedding z，就能算是VAE么？最重要的是，从GAN的角度来思考，能不能对模型的本质达到更深的理解？

![Screenshot from 2021-02-24 15-33-59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227568/413f5d94-f4b7-2961-a84c-0aaa17749ae4.png)

如上图所示，虽然比起2015年bowman的论文，确实算的上是一个不错的进展，但是，我们都知道图像到NLP领域就是降维打击——从论文引用数就能看出端倪，这样的成果实在不能说是惊人。

![Screenshot from 2021-02-24 15-38-42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227568/a2b30feb-7321-a8ff-d964-15c23acf4c80.png)

这是模型的结构。我们能看到潜在空间处多了一个c，然后还多了个Discriminators——注意这里的复数。

两个小时思考的结果是，一个简单的架构如下图——可行性未知，反正一定已经被人实验过了，只是我还没找到论文罢了。

![Screenshot from 2021-02-24 15-47-53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227568/803b91c6-29a4-25a2-38ec-afcddbeceefb.png)

难道不行吗？？？？？？？？？ 我决定实验一下，冲冲冲。
referencesで外部キー設定をしたら、ActiveRecord::MismatchedForeignKeyで詰まった時の解決法(Rails)

## 環境
Rails6, 
MySQL

## 状況
マイグレーションファイルを書き、マイグレートすると、以下のようなエラー文が表示されました。

```
Caused by:
ActiveRecord::MismatchedForeignKey: Column `food_id` on table `orders` does not match column `id` on `foods`, which has type `bigint(20)`. To resolve this issue, change the type of the `food_id` column on `orders` to be :bigint. (For example `t.bigint :food_id`)

```

要するに、参照されるカラムの型と、参照する側のカラムの型が一致しないので、外部キー設定ができないと表示されています。

## 解決した方法

エラー文から、原因はカラムの型と思いましたが、マイグレーションファイルを作成した順番が原因でした。
簡略化したコードで説明します。
temporary_ordersと、ordersという二つのテーブルがあり、
それぞれ、以下のマイグレーションファイルになっていました。(テーブル名は今回のエラーに関連しません。)


```ruby:migrate/20210223101010_create_temporary_orders.rb
class CreateTemporaryOrders < ActiveRecord::Migration[6.0]
  def change
    create_table :temporary_orders do |t|
      t.references :order, foreign_key: true
    end
  end
end

```

```ruby:migrate/20210223113122_create_orders.rb
class CreateOrders < ActiveRecord::Migration[6.0]
  def change
    create_table :orders do |t|
      t.integer :price, null: false
    end
  end
end

```

今回のエラーに関わる知識として、migrationファイルがマイグレートされる時は、作成された時
間が古いファイル、つまり、ファイル名の先頭の数字が小さいものから、順にマイグレートされます。
例のtemporary_ordersファイルと、ordersファイルを比較すると、temporary_ordersファイルの方が、ファイル名の先頭の数字が小さいことから、先に作成していることが分かります。
なので、マイグレートされる順番は、先にtemporary_ordersファイルで、次にordersファイルです。
ここで、temporary_ordersファイルに以下のコードがあります。

```
t.references :order, foreign_key: true
```
これをみると、temporary_ordersファイルがマイグレートされる時には、ordersファイルはまだ、マイグレートされていないにもかかわらず、ordersテーブルから、外部キーを参照しようとし
ています。これがエラーの原因でした。
つまり、referencesで外部キーを参照し、マイグレートした時、参照元のカラムが存在しないのに、参照しようとしていたことが原因でした。

## まとめ
このエラー文を見ると、カラムの型が原因と思い、カラムの型をtypeで指定したり、migrationファイルのバージョンを変えてみたりしましたが、原因はカラムの型ではありませんでした。
エラー文が必ず、正しい原因を指摘してくれるわけではないことが分かりました。
以上です。

勉強になった記事
https://qiita.com/nkekisasa222/items/84c257fc1a8ae964ddb9
UbuntuでGeForceからのHDMIオーディオ出力が出来なくなった場合の修正方法

## 調査環境

Ubuntu 20.04
nvidia-driver-460
(グラボはNVIDIA GeForce RTX 2060 SUPER + メーカー不明のスピーカー内蔵HDMI接続のモニター)


## 症状

元々正常に動いていたが、気づいたら Digital Output (S/PDIF) しか選べなくなっている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39561/d72946e9-4fb9-e2f8-c6ac-8673523e87b6.png)

## 修正方法

PulseAudioのデーモンをkillすると直るらしい。

```
$ pulseaudio -k
```

設定を見ると復活している。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39561/1b3b8373-6e8c-8c57-a7f8-2b9b1aeba577.png)

## 注意点

たまにUbuntuのアップデートやCUDAドライバのアップグレードによりVIDIAのドライバが使われていない場合があるので、そのときはドライバを再インストールする。

## 参考にしたページ

20200610: Ubuntu 20.04 LTS - ダミー出力になって音が出ない
https://seesaawiki.jp/w/kou1okada/d/20200610%3A%20Ubuntu%2020.04%20LTS%20-%20%A5%C0%A5%DF%A1%BC%BD%D0%CE%CF%A4%CB%A4%CA%A4%C3%A4%C6%B2%BB%A4%AC%BD%D0%A4%CA%A4%A4
nvidia jetsonTX2 のImageファイル、dtbファイルを指定したflash方法

#はじめに
大変大変、何が大変かって、一番大変なのは、nvidia Jetsonの環境を壊してしまったときですよね。
なんとか環境をもとに戻したくても、ほしい情報が殆どない。
それは、各状況においてやるべきことが異なるからでしょう。
というわけで、本日はnvidia JetsonTX2の環境修復の方法をメモがてらアップしておきたいと思います。

#問題
nvidia JetsonTX2で、apt upgrade後に、

- USBキーボードが効かなくなってしまった！
- 接続しているカメラ等のデバイスが見えなくなってしまった！

(通常apt upgradeはインストール済みのパッケージをアップデートするだけなので、このようなことは起こらないらしいですが、Jetpack4.4では不具合があり、今回このような事象が起きたようです。)

#やりたいこと
nvidia JetsonTX2の環境を、自前のカーネル(Imageファイル), デバイスツリーバイナリ(.dtbファイル)を使って初期化(flash)する。

#前提
###準備するべきハードウェア
nvidia JetsonTX2(以後TX2と略す)
host PC: TX2と接続してflashする用
USB cable(microUSB - USB A): host PCとTX2を接続する用

###前提とするソフトウェア
hostPC OS: Ubuntu18.04
Jetpack4.4 on host PC
Image: 自前の使いたいLinux kernel
*.dtb: 自前の使いたいdevice tree binary

#flash方法
- TX2とhost PCをUSBケーブルで直接接続
これをしておかないと、Jetpackのsdkmanagerのインストール時にコケます。

- recovery modeでTX2を起動
TX2の電源ケーブルを接続し、
boot前に、Recovery buttonを長押しし、押している間に
Reset buttonをポチッと押し、
2秒以上経ってから、Recovery buttonを離す
(host PCにて、lsusbコマンドで、新たにNvidia~と出ていれば接続できています)

- [nvidiaのarchiveページ](https://developer.nvidia.com/embedded/jetpack-archive)からJetpackをhost PCにダウンロード(今回は初めにflashしたバージョンが4.4だったので、それを使います)。

- host PCでカーネルを指定してflash

```
sudo ./flash.sh -r -k kernel -K <your Image> jetson-tx2 mmcblk0p1
e.g. sudo ./flash.sh -r -k kernel -K production/Image jetson-tx2 mmcblk0p1
```

- host PCでdtbファイルを指定してもう一度flash 

```
sudo ./flash.sh -r -k kernel-dtb -d <your .dtb> jetson-tx2 mmcblk0p1
e.g. sudo ./flash.sh -r -k kernel-dtb -d production/tegra186-quill-p3310-1000-a00-00.dtb jetson-tx2 mmcblk0p1
```

- host PCでjepack 4.4からCUDA関連ライブラリをインストール

```
sdkmanager
```
でjetpackのsdkmanagerを開き、GUI上で操作する。
このとき、host PCに特にCUDA関連のライブラリを新たにセットアップする必要がなければ、hostPCのチェックボックスを外す。
また、sdkmanager上で必要なjetpackバージョン(今回は4.4)を選択する。

- 必要なライブラリをaptでインストールする

#参考
TX2にUSB有線接続している間に、TX2にsshで入るには

```
ssh nvidia@192.168.55.1
```
と打てばよい。、、、すみません、いつもそれでいいのかは知りません。

#終わりに
できてみれば結局ポイントはflashコマンドのオプション指定だけだったのですが、-d等で指定しているにも関わらず、-kオプションで何を焼きたいか書かなければいけないあたりが、普通のオプションの指定方法に対して、冗長な気がして、わかりにくいですよね。それでハマって数日費やしてしまったので、皆さんが時間を浪費せずにすめば幸いです。
それでは皆様、素敵なjetsonライフをお過ごしください！
laravel formのrouteとactionによる処理の書き方

#はじめに
投稿サイトを作っている最中にrouteとactionの処理が両方書いていたので備忘録として投稿します。投稿フォームに必ず以下の記述が必要になります。

```
<form method="POST" action="{{ route('bulletin-board.destroy', $post) }}">
 ```
action="{{}}"の後ろが人によって様々な書き方があったのでご紹介したいと思います。

#action="{{route}}"の場合
web.phpから参照します

```web.php
Route::resource('bulletin-board', 'PostsController', ['only' => [ 'update','destroy']]);

```

```route.blade.php
//routeのパターン
<form method="POST" action="{{ route('bulletin-board.destroy', $post) }}"> 

```
#書き方
routeと宣言した場合`route('サブディレクトリ.処理(indexやcreate等々)')`


#action="{{action}}"の場合
web.phpとコントローラーを参照

```web.php
Route::resource('bulletin-board', 'PostsController', ['only' => ['edit', 'update','destroy']]);

```

```PostsController.php
 public function edit($id) {

    $post = Post::findOrFail($id);
    return view('bulletin-boards.edit', ['post' => $post]);
    }
```

```action.blade.php
//actionのパターン
<form method="POST" action="{{ action('PostsController@destroy'}}">
```

#書き方
actionと宣言した場合`action="{action('コントローラー名@関数名')}"`

#最後に
どちらも第二引数を渡すことができます。しかし2つには特徴があります
`routeのメリットはRouteファサードを使用して簡単に記述できる`のが特徴になります。
`actionにはURLを参照して遷移する`のが特徴になります。
この様に使い分けて使用するのもアリかもしれません。

#参考文献
[公式 actionによるURL](https://readouble.com/laravel/6.x/ja/urls.html)
[初心者向け Routeの解説](https://techacademy.jp/magazine/18759)
![“スクリーンショット” 2021-02-24 15.04.37.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698439/53f58fb9-1869-3042-d13f-e2fe7d33aa12.jpeg)
![“スクリーンショット” 2021-02-24 15.01.55.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/698439/9c524256-afec-cb58-d0b0-b000d9ca98d9.jpeg)
Java PDF をTIFFに変換

<p><strong>Spire.PDF for Javaを使ってPDF をTIFFに変換することができます。そして、文書の<em>全</em>ページと指定するページだけをTIFFで保存することができます。</strong></p>
<h4><strong>下準備</strong></h4>
<p><strong>1.E-iceblueの公式サイトから<a href="https://www.e-iceblue.com/Download/pdf-for-java.html">Free Spire.PDF for Java</a>無料版をダウンロードしてください。</strong></p>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210224/20210224144116.png" alt="f:id:lendoris:20210224144116p:plain" title="" class="hatena-fotolife" itemprop="image" /><strong> </strong></p>
<p><strong>2.IDEを起動して新規プロジェクトを作成してから、インストールされたファイルにあった相応しいSpire.PDF.jarを参照に追加してください。</strong></p>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210224/20210224144145.png" alt="f:id:lendoris:20210224144145p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
<h4><strong>コード</strong></h4>
```JAVA
import com.spire.compression.TiffCompressionTypes;
import com.spire.pdf.*;

public class PDFtoTiff {
    public static void main(String[] args) {
        //PDFをロードします。
        PdfDocument pdf=new PdfDocument();
        pdf.loadFromFile("test.pdf");

        //全ページをTiffで保存します。
        pdf.saveToTiff("ToTiff.tiff");

        //指定するページをTiffで保存します（2ページ目から3ページ目まで）
        pdf.saveToTiff("ToTiff2.tiff",1,2, TiffCompressionTypes.DEFAULT);
    }
```
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210224/20210224145317.png" alt="f:id:lendoris:20210224145317p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
<p><strong> </strong></p>
<p><strong> </strong></p>
Java PDF をイメージで保存

<p><strong>　　　　　　</strong></p>
<p><strong>今回はJavaでPDF をイメージで保存する方法を紹介します。Spire.PDF for Javaを使ってJpeg, Jpg, Png, Bmp, Tiff, Gif, EMFといった形式に変換することができます。今日はPNGを例にあげて説明しましょう。</strong></p>
<h4><strong>下準備</strong></h4>
<p><strong>1.E-iceblueの公式サイトから<a href="https://www.e-iceblue.com/Download/pdf-for-java.html">Free Spire.PDF for Java</a>無料版をダウンロードしてください。</strong></p>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210224/20210224144116.png" alt="f:id:lendoris:20210224144116p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
<p><strong>2.IDEを起動して新規プロジェクトを作成してから、インストールされたファイルにあった相応しいSpire.PDF.jarを参照に追加してください。</strong></p>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210224/20210224144145.png" alt="f:id:lendoris:20210224144145p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210224/20210224144222.png" alt="f:id:lendoris:20210224144222p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
```JAVA
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import com.spire.pdf.PdfDocument;
import javax.imageio.ImageIO;

public class toImage {

        public static void main(String[] args) throws IOException {
          
            PdfDocument doc = new PdfDocument();
            doc.loadFromFile("Sample.pdf");

            //PDFをイメージで保存します。
            BufferedImage image;
            for (int i = 0; i < doc.getPages().getCount(); i++) {
                image = doc.saveAsImage(i);
                File file = new File( String.format("ToImage-img-%d.png", i));
                ImageIO.write(image, "PNG", file);
            }

            doc.close();
        }
}
```
<h4><strong> 実行結果</strong></h4>
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/lendoris/20210224/20210224144357.png" alt="f:id:lendoris:20210224144357p:plain" title="" class="hatena-fotolife" itemprop="image" /></p>
<p><strong><br /> </strong></p>
<p><strong> </strong></p>
【エラー】Parameter index out of range

## エラー
DAO,Beans,Servletを作成し、JSPを表示しようとしたところ、JSPが表示されなかった。コンソールを確認したところ下記のエラーを発見:eyes:

```
Parameter index out of range (4 > number of parameters, which is 3).
```

## 原因
パラメーターが4つあるのに、`?`が3つしかなかった:sweat_drops:

```
String sql = "INSERT INTO questions (question_id, answer, created_at, updated_at) values (?,?,?)";
```

## まとめ
パラメーターと`?`は同じ数用意しよう:point_up:

記事が少なくて時間を浪費してしまったので備忘録。こんなミスするの私くらいだろう。

## 引用
[java.sql.SQLException: Parameter index out of range (2 > number of parameters, which is 0)
](https://stackoverflow.com/questions/16196670/java-sql-sqlexception-parameter-index-out-of-range-2-number-of-parameters-w/16196755)
CodePipelineとCodeCommitをクロスアカウントで実行する環境を一撃でデプロイしてみた

### 経緯
CodeCommitを一つのAWSアカウントに集め、CI/CDは各システム毎のAWSアカウントのCodePipelineで実施したいという声を複数いただき、毎度手作業で構築していたのだが、その繰り返し作業についムシャクシャしてしまい一撃でデプロイ出来るTerraformコードを書いてしまった。

今回は**「必要最小権限」**に拘って何度も試行錯誤をして出来た成果物になる。
特にクロスアカウント、IAM、リソースポリシーが多数登場するのもあり、**「今回は時間がないから権限を緩く作って、後で時間が出来た時にちゃんとしよう」**という人を今までたくさん見てきた。

断言しよう。
**そんなぬるいこと言ってるヤツにちゃんとする時間など一生来ない**のだ！

そして、**今ちゃんとしてないから未来にも時間がない**のだ

今これを作る時、つまり**これを見ている時が一番時間がある時**なのだ！

CodePipelineはAWSの権限周りの知識ゼロで普通にググるだけではしっかりと作るのは非常に難しい。

前置きが長くなったが、以下のことをやるだけでクロスアカウントCodePipelineのHello Worldが完成する。

これを使ってあとは自身でカスタマイズしてほしい。健闘を祈る。

### 今回作る環境
![スクリーンショット 2021-02-24 14.20.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155341/94fd0ae8-25d1-d199-1289-95c0ebe84f9f.png)

### 成果物
こちらを見てください
[GitHub](https://github.com/yuukiyo/cross-account-codecommit-codepipeline)

### 使い方
##### 1. aws.tfの書き換え
READMEの通りなのだが、aws.tfの中のIAMロールを書き換えるだけで良い

```
> vim aws.tf
provider "aws" {
  alias = "account-a"
  assume_role {
    role_arn = "xxx"  // ←ここにCodeCommitを作りたいAWSアカウントに対してのAssumeRoleできるIAMロールのARN
  }
}

provider "aws" {
  alias = "account-b"
  assume_role {
    role_arn = "xxx"  // ←ここにCodePipelineを作りたいAWSアカウントに対してのAssumeRoleできるIAMロールのARN
  }
}
...
```

##### 2. terraform apply実行
```
terraform apply
```

### まとめ
Terraformではなくて、手作業で作りたい人もこれを見れば、何を作る必要があるのか、どんな権限が必要なのか？
というのを知るヒントにはなると思う。
これだけだと情報が足りないという場合はコメントいただけますと追記しようと思いますので、気軽にお願いします！
dockerからmysqlに接続できない【ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2)】

dockerを利用していて、mysqlに接続したかったのですが、下記のエラーに悩まされていました。

```console
$ mysql -u root -p
Enter password:
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2)
```

## 試したこと
※以下に記載している`#で始まるコマンドは全てコンテナ内で実行しているもの`です。いかに`docker-compose.yml`を記載しておきます。

```docker-compose.yml
version: '3'
services:
  node:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./:/usr/src/app
    command: sh -c "npm run dev"
    ports:
      - '3000:3000'
  db:
    image: mysql:latest
    restart: always
    hostname: my-mysql
    env_file:
      - .env
    environment:
      MYSQL_USER: sample_user
      MYSQL_PASSWORD: password
      MYSQL_DATABASE: sample_db
      MYSQL_ROOT_PASSWORD: password
    ports:
      - 3306:3306
    expose:
      - '3306'
    volumes:
      - ./db/mysql_init:/docker-entrypoint-initdb.d
      - ./db/mysql_data:/var/lib/mysql
    tty: true
```
上記のymlファイルをもとにimageをビルドし、コンテナを起動してコンテナに入ります。

```console

$ docker-compose build

$ docker-compose up -d

$ docker-compose exec db sh
```


さて、上記のエラーメッセージで検索すると[こちらの記事](https://qiita.com/hondy12345/items/d32ed749fb49e9da7de6)が出てきたので、ここで記載されている内容を参考に試してみました。

### STEP1 `touch /tmp/mysql.sock`
エラーメッセージをみる限り、`mysqld.sock`が無いために接続できていないのでは(?)と思い、以下のコマンドを実行してファイルを作成しました。

```console
# touch /tmp/mysql.sock
```
### STEP2 ファイルの作成後、mysqlを再起動

```console
# mysql restart
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2)
```
同じエラーが。。。

そこで、一旦dockerとmysqlについて調べていると以下の記事を発見しました。
[docker-composeでMySQLに接続する](https://qiita.com/M_Nagata/items/120831bb4e4a3deace13)

## 成功した方法

記事を参考に、試します。

### STEP1 envコマンドでipアドレスを調べる
どうやらipアドレスを指定することでmysqlに接続できそうだということがわかったので、下記コマンドを実行

```console
# env
DATABASE_URL=mysql://root:password@localhost:3306/mydb
HOSTNAME=my-mysql
MYSQL_MAJOR=8.0
HOME=/root
MYSQL_ROOT_PASSWORD=password
TERM=xterm
MYSQL_PASSWORD=password
PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
MYSQL_VERSION=8.0.19-1debian10
MYSQL_USER=sample_user
GOSU_VERSION=1.7
PWD=/
MYSQL_DATABASE=sample_db
```
下記コマンドでipアドレスを表示します。

```console
# hostname -i
172.27.0.3
```

### STEP2 mysqlに接続

```console
# mysql -h 172.27.0.3 -P 3306 -u root -p
Enter password: 
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 10
Server version: 8.0.19 MySQL Community Server - GPL

Copyright (c) 2000, 2020, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>
```

### できた!!!✨
デシジョンテーブルテスト

# デシジョンテーブルテスト

デシジョンテーブルはシステムが実装しなければならない複雑なビジネスルールを記録するために用いられます。またテストケースを作成するサインの指針としても役立つ。

デシジョンテーブルはテスト担当者の個人的な道具箱には欠かせない重要なツールです。

## デシジョンテーブルの一般的な形

|    |  ルール１  | ルール2 | ルール3 | ルール4 | ルール5 | ..... | ルールn |
| ---- | ---- | ----| ---- | ----| ---- | ----| ---- |
|  **条件**  |    |
|  条件1  |    |
|  条件2  |    |
| ...  |    |
|  条件m  |    |
| ---- | ---- | ----| ---- | ----| ---- | ----| ---- |
|  **アクション**  |    |
|  アクション1  |    |
|  アクション2  |    |
|  ...  |    |
|  アクションp  |    |

- 条件1から条件mまでは様々な入力条件。
- アクション1からアクションpまでは入力条件のさまざまな組み合わせで決定されるアクション。
- 各ルールは条件の一意な組み合わせを定義しており、その組み合わせが満たされると、結果としてルールに関連付けられたアクションが実行される。

分かりにくいと思うので、具体例で説明しようと思う。

ある自動車会社がドライバーが既婚の人や優秀な人には保険料を割り引きする場合を考える。

|    |  ルール１  | ルール2 | ルール3 | ルール4 |
| ---- | ---- | ----| ---- | ----|
|  **条件**  |    |
|  優秀な学生 |  Yes  | Yes | No | No|
|  既婚  |  Yes  | No| Yes |No|
| ---- | ---- | ----| ---- | ----| ---- | ----| ---- |
|  **アクション**  |    |
|  割引額（ドル） |  60  |  25  |  50  | 0   |


すべての顧客はこの４パターンに属し、それぞれのパターンに応じてアクションが異なる。
例えば、優秀な学生ではあるが、既婚ではない場合(Yes, No)は、割引額が25ドルになる。

このように複雑なパターンを場合分けすることで簡潔に記録することができる。

条件が二つの場合は簡潔になることができるかもしれないが、もっと大きな条件になった場合は、どのようにすればいいだろうか。すべての任意の値が意味を持たない場合は、DC(Don't care)を使うことで簡潔に表記することができる。

例えば、A,B,Cの値をもらって返答をするシステムを考慮するときのルールとして、

- Aがある条件を満たさないとき、BやCの値に関わらず、エラーを返す。

などの、「任意の値以外が含まれていない時点で以下を考慮しない」場合、セルにDCを書くとテスト量を格段に減らせる
javaScript 時間の取得、設定、変更についてまとめてみた

javaScriptで時間を扱う方法についてまとめていこうと思います。

#取得方法

現在時間を取得したい時は new Date()を使います。


```main.js
let d = new Date();
console.log(d) // Tue Feb 23 2021 21:56:22 GMT+0900 (日本標準時)
```

さらにgetTime()を使うと基準時間からの経過ミリ秒で時間を取得できます。

```main.js
let d = new Date();
console.log(d.getTime()) // 1614085014353
```

###基準時間とは
協定世界時(UTC)1970年1月1日00:00:00からの経過時間を表すDateオブジェクトのミリ秒単位

そしてnew Date()は現在時刻だけではなく日付を指定することも可能

例　new Date(2012,4,3) → 2012-5-3 00:00:00.000
　　new Date(2021,1,11,11,30,10)　→　2021-2-11 11:30:10.000

<font color="Red">*月は0~11の範囲で指定　1月→0　　5月→4</font>

##日付情報の取得

```main.js
let date = new Date(2021, 1, 11,11,30,10,776); //2021-2-11- 11:30:10.776を作成
date.getFullYear(); //2021 (年)
date.getMonth(); // 1 (月)
date.getDate(); // 11 (日)
date.getDay(); // 4 (曜)
date.getHours(); // 11 (時)
date.getMinutes(); // 30 (分)
date.getSeconds(); // 10 (秒)
date.getMilliseconds(); // 776 (ミリ秒)
```

<font color="Red">*getDay()は曜日
日曜日は(0) ~ 土曜日は(6)で表示される</font>

##時間の設定,変更

```main.js
let date = new Date();
date.setFullYear(2021);
date.setMonth(1);
date.setDate(11);
date.setHours(11);
date.setMinutes(30);
date.setSeconds(10);

console.log(date); // Thu Feb 11 2021 11:30:10 GMT+0900 (日本標準時)

//あとから変更も可能
date.setDate(20);
date.setHours(8);
console.log(date); // Sat Feb 20 2021 08:30:10 GMT+0900 (日本標準時)
```

###YYYY/MM/DD HH:MM:SS 形式に変換


```main.js
let date = new Date(2010, 2, 11, 11, 24, 30, 776);

console.log(date); // Thu Mar 11 2010 11:24:30 GMT+0900 (日本標準時)
var d1 = date.getFullYear() + '/' + ('0' + (date.getMonth() + 1)).slice(-2) + '/' +('0' + date.getDate()).slice(-2) + ' ' +  ('0' + date.getHours()).slice(-2) + ':' + ('0' + date.getMinutes()).slice(-2) + ':' + ('0' + date.getSeconds()).slice(-2) + '.' + date.getMilliseconds();
console.log(d1); // 2010/03/11 11:24:30.776
```

###経過時間の計算

```main.js
let date1 = new Date(); //現在時刻 今回は2021/2/24 14:10:00.00
let date2 = new Date(2021, 0, 21,11,30,10); // 元の時間
let date3 = date1.getTime() - date2.getTime(); // 経過時間をミリ秒で取得
console.log(date3) // 2946590000

let sec = Math.floor(date3 / 1000 % 60);
let min = Math.floor(date3 / 1000 / 60 % 60);
let hour = Math.floor(date3 / 1000 / 60 / 60 % 24);
let day = Math.floor(date3 / 1000 / 60 / 60 / 24);

console.log(day); // 34
console.log(hour); // 2
console.log(min); // 29
console.log(sec); // 50
```

経過時間は　34日2時間29分50秒
【Laravel】php artisan db:seedが通らない時の対処

## 環境
PHP 7.3.8
Laravel 6.20.16
Docker 19.03.8

## Target class [...] does not exist.というエラー
Docker環境でlaravelクイズアプリを作成中、
サンプルで問題とカテゴリーデータをシーダーでデータベースに入れようとした時に怒られた話。

```
php artisan db:seed
```
上記コマンドを実行した際に下記エラーが発生。

```
   Illuminate\Contracts\Container\BindingResolutionException  : Target class [CategoryTableSeeder] does not exist.

  at /var/www/html/app/vendor/laravel/framework/src/Illuminate/Container/Container.php:805
    801| 
    802|         try {
    803|             $reflector = new ReflectionClass($concrete);
    804|         } catch (ReflectionException $e) {
  > 805|             throw new BindingResolutionException("Target class [$concrete] does not exist.", 0, $e);
    806|         }
    807| 
    808|         // If the type is not instantiable, the developer is attempting to resolve
    809|         // an abstract type such as an Interface or Abstract Class and there is

  Exception trace:

  1   ReflectionException::("Class CategoryTableSeeder does not exist")
      /var/www/html/app/vendor/laravel/framework/src/Illuminate/Container/Container.php:803

  2   ReflectionClass::__construct("CategoryTableSeeder")
      /var/www/html/app/vendor/laravel/framework/src/Illuminate/Container/Container.php:803

  Please use the argument -v to see more details.
```

結論から申し上げると、次のコマンドで解決した。

```
composer dump-autoload
```
ググると早々にそれっぽい記事は沢山出ていくるわけなんですが、
Docker環境で検証している時に`dump-autoload`してもダメじゃねーかと言う事があったんですよ。
でもそれって`dump-autoload`を実行してから`Generating optimized autoload files`と表示された後に待ちきれずに`command+C`してて、ちゃんと実行出来てなかっただけと言うオチ。

Dockerだからか、結構実行終わるまで時間がかかるみたいで、最後まで待たないといけなかったと言う悲しい話。

```
root@:/var/www/html/app# composer dump-autoload
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
Discovered Package: facade/ignition
Discovered Package: fideloper/proxy
Discovered Package: laravel/tinker
Discovered Package: nesbot/carbon
Discovered Package: nunomaduro/collision
Package manifest generated successfully.
Generated optimized autoload files containing 4259 classes
```
最後まで見届けてから、`db:seed`する事で無事にseederを実行する事が出来ました。

```
root@:/var/www/html/app# php artisan db:seed
Seeding: CategoryTableSeeder
Seeded:  CategoryTableSeeder (0 seconds)
Seeding: QuizTableSeeder
Seeded:  QuizTableSeeder (0 seconds)
Database seeding completed successfully.
```
C言語の型に設計上の欠陥を見つけた

## はじめに

落ち着いて次のプログラムを見てほしい。

```c
#include <stdio.h>

#define PRINT_TYPE(e)\
	printf("typeof " #e " is ");\
	printf(_Generic((e),\
		char:		"char\n",\
		char*:		"char*\n",\
		int:		"int\n",\
		int*:		"int*\n",\
		double:		"double\n",\
		double*:	"double*\n",\
		default:	"unknown\n"));

int main() {
	char* a, b; // 注目するのはこの行です。bの型は何だろう？
	PRINT_TYPE(a);
	PRINT_TYPE(b);
}
```

型判定のために見慣れないマクロ`PRINT_TYPE`があるが流してほしい。型判定のために使ってみただけだ。

本題だが`char* a, b;`の行に注目してほしい。`b`の型は何だろう？大事なことなので二度言った。

`b`の型は`char*`であるべきだ。

しかし、`b`の型は`char`になってしまう。



`typeof`で`a`の型を調べたら`char*`だった。

```c
int main() {
	char* a;
	typeof(a) c; //typeofで調べたaとcの型はchar*
}
```



`typeof`で型を調べたら`char*`になることから、昔から`a`の型は`char*`と認識されていた。

`typeof`キーワードはGNUコンパイラの独自拡張であるが、`typeof`はいつ導入されたのだろうか？

`GCC`をダウンロードできるミラーサイトを調べたところ、`gcc-1.21`にあって`gcc-0.9`にないことから、`typeof`がリリース日の1988年5月1日までに導入されていたことがわかった。1988年の時点ですでに`b`の型は`char*`と認識されていた。

C言語は1972年デニス・リッチーがベル研究所で開発した。

JavaScriptやCの成功を考えると、後方互換性は大事なんだなと思いました。多少欠陥があっても言語設計を直さないほうがいい。

## まとめ

`char* a, b;`における`b`の型に疑問を覚えた。気づけたのはJavaScriptからTypeScriptへと学習を進め型の大切さを認識したためかもしれないと思った。

`b`の型は`char`ではなく`char*`であるべきだ。

型設計に欠陥があると言えるが、直さないほうがいい。後方互換性が大事なので。
Laravel7でパッケージ「Intervention Image」を使って画像を加工する

##【開発環境】
Windows 10 HOME

Laravel Framework 7.25.0
PHP 7.4.7
Intervention Image 2.5
##【目次】

|  | 　　項目　　　　　|
|:----:|:-------------|
| - | [はじめに](#はじめに) |
| - | [使い方](#使い方) |
| - | [インストールが上手くいかなかった時は](#インストールが上手くいかなかった時は) |
| - | [最後に](#最後に) |




#はじめに

Laravel7でパッケージ「Intervention Image」を使って画像を加工みてみた。


#使い方
パッケージ「Intervention Image」をインストール。
対象のプロジェクト下でLaravelなので以下のようにcomposerで簡単にインストールできる。

```
composer require intervention/image
```

パッケージのダウンロード後に、サービスプロバイダの設定「config/app.php」に追加してLaravelに追記する。

```
	'providers' => [
、、、
		Intervention\Image\ImageServiceProvider::class,
	],
、、、
	'aliases' => [
、、、
		'InterventionImage' => Intervention\Image\Facades\Image::class,
	],
```

設定のキャッシュをクリアして設定はこれで終了。

```
php artisan config:clear
```

Laravelのコントローラでは
こんな感じで処理。

```php

		$this->validate($request, [
			'file'=> [
				//必須
				'required',
				//アップロードされたファイル
				'file',
				//画像ファイル
				'image',
				//MIMEタイプを指定
				'mimes:jpeg,png',
			]
		]);

		if ($request->file('file')->isValid([])) {
				
			//ファイルアップロード処理
			$file = $request->file('file');
			//$name = $file->getClientOriginalName(); //元のファイル名のまま
			$name = Str::random(40).'.'.$file->getClientOriginalExtension(); //ランダムで40文字
			// 画像を横幅300px・縦幅アスペクト比維持の自動サイズへリサイズして保存先へ格納
			$tmpPath = public_path('storage/') . $name;
			$image = Image::make($file)
			->resize(200, null, function ($constraint) {
			$constraint->aspectRatio();
			})
			->save($tmpPath);


```



#インストールが上手くいかなかった時は

こんなエラーが出たら、
メモリオーバーするしてるよっていうエラーです。

```
PHP Fatal error:  Allowed memory size of 2097152 bytes exhausted (tried to allocate xxxxxxxxxx bytes) in Unknown on line 0
```

解決策を検索すると「swapメモリの割当を増やしてから実行」という方法が出てくるが、設定などを変更せずに手っ取り早く済ませたい時はこれ。

```
COMPOSER_MEMORY_LIMIT=-1 composer  require intervention/image
```

#この辺を参考

[composer updateでmemoryが足りない場合の対応方法 その2](https://polidog.jp/2018/12/14/composer/)

[composer update でメモリオーバーする場合の対策](https://nekorokkekun.hatenablog.com/entry/2019/07/13/223834)

#最後に

画像の処理は結構厄介なので
こういうツールがあるのはありがたいので
積極的に使っていきたいと思います。
【図解あり】Rails6でFont Awesomeを用いてSNSアイコンを表示させる

Rails6でアプリケーションにFont Awesomeを導入した際の手順をまとめてみました。
超初心者向けです。

#####前回:  [Rails6にBootstrapを導入してトップページを作成する](https://qiita.com/mitaninjin/items/93553535483919d17a81)の続きになります。

https://qiita.com/mitaninjin/items/93553535483919d17a81

#####完成形![icon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1140333/e5894271-1768-5666-e476-32d5213a1179.png)

##Font Awesomeの導入
```:コンソール
yarn add @fortawesome/fontawesome-free
```
Font Awesomeを読み込ませる

```javascript:app/javascript/packs/application.js
import 'bootstrap';
import '@fortawesome/fontawesome-free/js/all'; //追加
import '../stylesheets/application';
```

```scss:app/javascript/stylesheets/application.scss
@import '~bootstrap/scss/bootstrap';
@import '~@fortawesome/fontawesome-free/scss/fontawesome'; //追加
```

導入完了

##Font Awesomeの表示
[Font Awesomeの公式ページ](https://fontawesome.com/)から任意のアイコンのコードをコピペする
![ti.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1140333/02a04a5e-6e30-cb98-5875-fc19665e89a6.gif)

```ruby:index.html.erb
<i class="fab fa-twitter-square"></i>
```
![ttttt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1140333/ac60096f-1e5f-ea9f-b64e-690116747c37.png)

表示されましたがこれでは小さいです。
なのでサイズを調整します。

#####以下のコードをclass名に追記
| コード | サイズ |
|------|------|
|fa-lg | 1.3倍 |
|fa-2x | 2倍　 |
|fa-3x | 3倍　 |
|fa-4x | 4倍　 |

```ruby:index.html.erb
<i class="fab fa-twitter-square fa-2x"></i>
```



サイズが大きくなりました。
この要領で記述していきます。

```ruby:index.html.erb
<div class="icons">
  <div class="icon">
    <%= link_to "#" do %>
      <span class="icon-twitter"><i class="fab fa-twitter-square fa-2x"></i></span>
      <span class="icon-name">Twitter</span>
    <% end %>
  </div>
  <div class="icon">
    <%= link_to "#" do %>
      <span class="icon-insta"><i class="fab fa-instagram-square fa-2x"></i></span>
      <span class="icon-name">Instagram</span>
    <% end %>
  </div>
  <div class="icon">
    <%= link_to "#" do %>
      <span class="icon-face"><i class="fab fa-facebook-square fa-2x"></i></span>
      <span class="icon-name">Facebook</span>
    <% end %>
  </div>
  <div class="icon"> 
    <%= link_to "#" do %>
      <span class="icon-line"><i class="fab fa-line fa-2x"></i></span>
      <span class="icon-name">Line</span>
    <% end %>
  </div>
</div>
```

CSSをあてていきます。アイコンのカラーは[こちらのサイト](https://ayaito.net/webtips/color_code/3907/)を参考にしております。

```:ターミナル
touch app/javascript/stylesheets/index.scss
```

```scss:app/javascript/stylesheets/application.scss
@import '~bootstrap/scss/bootstrap';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import './index.scss';　// 追記
```

```scss:app/javascript/stylesheets/index.scss
.icons{
  padding: 10px;
}

.icon{
  margin-bottom: 5px;
  :hover {
    text-decoration: none;
  }
}

.icon-name{
  font-size: 20px;
}

.icon-twitter{
  color: #55acee;
}

.icon-insta{
  color:#f77737;
}

.icon-face{
  color: #315096;
}

.icon-line{
  color: #00c300;
}
```
完成です。
![icon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1140333/e5894271-1768-5666-e476-32d5213a1179.png)