OmniAICreator/Qiita-1.07M huggingface dataset:
n個のサイコロを振った時の和の確率分布をpythonを使った統計的確率で求める

## [初投稿]
自分の勉強したことを振り返ることがメインの目的です。拙い文章かもしれませんが、よろしくお願いします！
## 概要
n個のサイコロを振った時の和の確率分布を、pythonを使った統計的確率で求める。

## はじめに
確率分布とは、ある操作において起こりうる事象のそれぞれの確率の分布を表現したもので、一般には散布図やヒストグラム形式で表されます。

今回はn個ののサイコロを振るという操作を十分大きな試行回数行うことで、確率を求めていきます。
これは統計的確率、もっとわかりやすくいうと、経験に基づいた確率ですね。
試行回数が多ければ多いほどより正確な確率が求められます。

## 実装コード
実装は、https://note.com/omori55/n/n639148bab42b
を参考（ほぼパクリ）させていただきましたが、使ったライブラリや関数の中身について自分なりに噛み砕いたことを書きます。

```python:qiita.py
import random
import matplotlib.pyplot as plt
n = int(input("幾つのサイコロを振る？"))
m= 500000 # 今回の試行回数
dice=[] # 各和になった回数を格納するリスト

for i in range(5*n+1): # リストdiceを0で初期化
    dice.append(0)

for i in range(m): # 和を求めるという試行をm回繰り返す
    sum =0 # 和を格納する変数
    for j in range(n): # 和を求める
        sum = sum + random.randint(1,6) # 和を求める際にはn個のサイコロの出る目をrandint(1,6)でそれぞれランダムに決定し、加算する
    dice[sum-n] = dice[sum-n]+1

for i in range(5*n+1):  # 結果を出力
    print(i+n, (dice[i])/m)
    plt.bar(i+n, (dice[i])/m)
plt.show()
```
出力の際に使った`plt.bar`はmatplotlibライブラリの機能で、棒グラフを作ります。

`matplotlib.pyplot.bar(left,height)`
leftは各棒の横軸、heightは各棒の縦軸データです。

## 出力結果
今回はn=2としたときの結果です
```結果.py
2 0.027638
3 0.05571
4 0.083218
5 0.111662
6 0.13886
7 0.166864
8 0.14033
9 0.110106
10 0.08325
11 0.055388
12 0.026974
```
![サイコロの和.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629034/ba095943-98b1-4ef6-a2c4-dbc332a51920.png)

n = 2 の場合は，「三角分布」です。

n = 3, 4, ...と増やしていくとだんだん正規分布に近づいていきます。以下は n = 5 の場合です。

![スクリーンショット 2022-04-20 11.38.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2611739/ba38462b-cbe3-bdcd-9e59-ad60cc0b0836.png)
cscの作法 その131

# 概要
cscの作法、調べてみた。
managed directxやってみた。
シェーダー書いてみた。
sin波を表示してみる。

# 参考にしたページ

https://qiita.com/7CIT/items/c131e4be5a47b01c96ac

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/c2c1909a-821c-cc0d-4972-762d1a69bba9.png)


# hlsl


```
struct VS_IN {
	float4 Pos: POSITION;
	float4 color: COLOR;
};
struct VS_OUT {
	float4 Pos: POSITION;
	float4 color: COLOR;
	float2 coord: TEXCOORD;
};
VS_OUT VSmain(VS_IN In) {
	VS_OUT output = (VS_OUT) 0;
	output.Pos = In.Pos;
	output.color = In.color;
	output.coord = In.Pos.xy;
	return output;
}
float plot(float2 p, float v) {
	return smoothstep(v - 0.02, v, p.y) - smoothstep(v, v + 0.02, p.y);
}
float4 PSmain(VS_OUT In): COLOR {
	float4 color = float4(0.0, 0.0, 0.0, 0.0);
	float2 coord = In.coord;
	float l = plot(coord, sin(coord.x * 3.14));
	color = float4(float3(l, l, l), 1.0);
	return color;
}
technique MyTechnique {
	pass MyPass {
		VertexShader = compile vs_3_0 VSmain();
		PixelShader = compile ps_3_0 PSmain();
	}
}


```

以上。
行動のログを取りたい！ ～ 友人と早起きチャレンジ with iOSのショートカット

## はじめに
[前記事](https://qiita.com/Beef/items/b7dad88869999359cb9a)にて、自分の行動を GAS を使って記録するアイデアを述べました。今回は GAS の他に iOS のショートカットを使う方法を検討してみました。全部を一気に書き出すとまとまりがなくなるので、今回はその一部です。ちなみに、現在は [Toggl Track](https://toggl.com/track/) なるアプリと自前で作成した行動記録ファイル、どちらが使い勝手がいいかを検討中です。すでに大概の車輪はできているんですよね。すごい。
### 早起きチャレンジとは
早起きして一日を生産的に使おうと、友人と協力して早起きチャレンジをしています。
規定の時間までに、Slack で起床報告をすれば OK 。忘れれば、Starbucks を相手にプレゼントという企画です。

ただこの「 Slack を立ち上げ、挨拶を入力し、送信する」のが（友人には悪いのですが）手間に感じていました。そこで、iOS のショートカットアプリを利用して上記（＋ α）のショートカットを作ったので書き留めておきます。

### iOS のショートカットとは
厳密には違うと思いますが、Excel におけるマクロのようなものと認識しています。iPhone の マクロです。iPhone からできる作業の多くはショートカットとして登録することができます。例えば、誰かに LINE を送るとか、音楽をかけるとか。マクロなので、柔軟な作業は向いていませんが、例えば定型文を送るとか、プレイリストの音楽をかけるとかは簡単にできます。

## 作ったもの

「予め用意しておいた定型文を、友人のいる Slack のワークスペースの特定のチャンネルに投稿する操作」をするショートカットを作りました。こちらの記事の通りにすると、とても簡単に作成できました。

https://note.com/kokh/n/n7a0f94a13111

そのときの様子はこんな感じ。「おはよう」というショートカットで、Slack に文字（『おはよう！今日も頑張ろう！』）と入力できました。

![あ672108336.271411.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530290/fc2fda60-ca59-7ee1-563a-50fe9c290045.gif)

早起きチャレンジが捗りそうです。ちなみに、Slack だと トークンやら権限やらを指定する必要があります（ここの概念がとっつきにくい）が、LINE でならもっと簡単にできます。


## おまけ

n 番煎じなので詳細は省きますが、他に「自分の現在地を GPS にて取得し、家に到着する時間を家族に LINE で報告する」ショートカットや、「クリップボードの履歴を管理する」ショートカットも作り ~~パクリ~~ ました。興味のある方は、ぜひ参考のリストを覗いてみてください。

## 参考
クリップボード など

https://qiita.com/nognog_nognog/items/3f68c049d7ad7fa26fba

家族にLINE

https://useacc.com/2019/06/15/iphone-shortcut/
Hugo Front Matterの日付をemacsで自動的に更新する

# はじめに

Hugoではmarkdownではなくasciidoctorを利用しています。

編集は主にemacsで行なっているのですが、Front matterの日付を手動で更新するのは忘れることが多かったので、hookを設定して自動的に保存の時に更新するようにしてみました。

## 環境

* Ubuntu 22.04 LTS
* emacs 27.1 (デフォルトのemacs-gtkパッケージを使用)

# 参考文献

* https://masatotoro.github.io/blog/emacs/auto-timestamp.html
* http://ochiailab.blogspot.com/2012/11/time-stamp.html
* https://github.com/sensorflo/adoc-mode/blob/master/adoc-mode.el
* https://github.com/emacs-mirror/emacs/blob/master/lisp/time-stamp.el

# ~/.emacs/init.el の編集

adoc-modeのために、次のようなコードを追加しています。

```emacs-lisp:~/.emacs/init.el
;; asciidoc mode from https://github.com/sensorflo/adoc-mode
(load "~/lib/elisp/markup-faces.el")
(load "~/lib/elisp/adoc-mode.el")
(autoload 'adoc-mode "adoc-mode" nil t)
(add-to-list 'auto-mode-alist '("\\.adoc\\'" . adoc-mode))
;; update timestamp for adoc-mode
(add-hook 'adoc-mode-hook (lambda()
			    (require 'time-stamp)
			    (add-hook 'before-save-hook 'time-stamp)
			    (custom-set-variables
			     '(time-stamp-active t)
			     '(time-stamp-start "date: ") 
			     '(time-stamp-format "%Y-%02m-%02dT%02H:%02M:%02S%:z")
			     '(time-stamp-end "$"))))
```

## emacs 26などの古いemacsを利用している場合

Ubuntu 20.04などの古いemacsのtime-stamp.elではtime-stamp-formatにtimezoneの指定はできないので次のように"+09:00"を文字列として含めていました。

```emacs-lisp:
			     '(time-stamp-format "%04y-%02m-%02dT%02H:%02M:%02S+09:00")
```

# さいごに

emacs 26系列は古くなったので、現在の~/.emacs.d/init.elに書いているtime-stamp-formatに変更しました。
100日後くらいに個人開発するぞ！day002

# 今日はCSSに触れてみた！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2632394/f1d6dc42-f571-97e8-b42e-c9c15b3d1fe4.png)

```
- CSSとは
    - HTMLの要素に対して色・大きさ・配置を指定しページをデザインするための言語
        - 例：HTMLのh1要素の色を赤にする場合
            - h1{color:red;}
    - HTMLとは別のファイルに記述する
    - 変更項目を「プロパティ」、要素名を「セレクタ」と言います
    - プロパティの末尾にコロん(:)を付け、行末にセミコロン(;)を付ける必要がある
    - CSSを書くときもインデント（字下げ）を行う
    - コメントは「/*コメント*/」で囲う
- 文字の色
    - 文字の色はcolorプロパティで変更できる
    - 「color:#ff000;」のように16進数のカラーコードで色を指定する
        - 主要な色であれば「color:red;」のように指定できる
    - 「#dddddd」のように値が連続する場合は「#ddd」と短縮できる
- 文字の大きさ
    - 文字の大きさはfont-sizeプロパティで変更できる
    - font-sizeはpx(ピクセル)という単位を用いて指定する
        - 例：h1の大きさを50pxにする場合
            - h1{font-size:50px;}
- 文字の種類
    - 文字の種類はfont-familyプロパティで変更できる
    - 「font-family:フォント名;」で変更できる
        - 例：h1のフォントをserifにしたい場合
            - h1{font-family:serif;}
    - フォント名にスペースがある場合はダブルクォーテーションで囲む
        - 例：h1のフォントをAvenir Nextにしたい場合
            - h1{font-family:"Avenir Next";}
    - font-familyには様々なフォントを指定できる
        - 「明朝体」：serif,YuMicho
        - 「ゴシック体」：sans-serif,"Lucida Grande"
- 幅と高さ
    - 要素の横幅を変更するにはwidthプロパティを用いる
        - 例：h1の横幅を50pxに変えたい場合
            - h1{width:50px;}
    - 要素の高さを変更するにはheightプロパティを用いる
        - 例：h1の高さを50pxに変えたい場合
            - h1{height:50px;}
- 背景の色
    - 背景の色を変えるにはbackground-colorプロパティを用いる
    - 例：h1の背景色を#ddddddに変えたい場合
        - h1{background-color:#dddddd;}
- 特定のHTML要素を変更したい場合
    - 特定の要素だけCSSを適用するにはHTMLタグをclass名で命名し、「.」を付けて指定する必要がある
        - 例：HTML内の一部のリストだけを指名する場合
            - <ul>
                - <li class="selected">リスト１</li>
                - <li>リスト２</li>
                - <li>リスト３</li>
            - </ul>
        - 例：CSSで命名した要素をclassで指定する場合
            - .selected{color:red;}
    - 複数の要素に同じclassをつけると全てに同じCSSが適用される



```
最近増えてきているプログラミングスクールの形態

最近、プログラミングスクールの形態も増えてきています。

# １．一括支払い（分割制）
これは今までの支払い形態です。銀行振込やカードやローンの分割で料金を支払い受講するタイプです。

# ２．月額（サブスクリプション）
最近、私が目にするようになった支払方法です。カード払いで約3千円くらいで始められるタイプです。

## 受講できる内容に違いはないのか？
詳しくは分かりませんが、大きな違いはないように感じます。

## どのスクールがやっているか？
私が目にしたものでは、侍エンジニア（月額名は侍てらごや）とテックキャンプの二つです。
料金は両社とも約3千円と無理なく始められる金額になっています。

# ３．お勧めする理由
通常の支払いでは期間によって違いはありますが、20万以上出さないと受講できないのがほとんどです。
私は半年で60数万のコースを教育ローンの分割でtechboostのスクールを受講しました。（正直言うと、月額制があればよかったと思います）

貯金に余裕がなかったり、学生の人は月額のほうを選ぶほうが始めやすいかもしれません。

以上が私が目にした最近のスクールの支払方法の変化です。
Google Earth Proのデスクトップショートカットを削除しても復活してくる

なぜに勝手にショートカットを作成するのか？

# 最初の対策

タスクスケジューラーを修正した

- GoogleUpdateTaskMachineCore：無効
- GoogleUpdateTaskMachineUA：無効

Google Chormeとかの更新も無効にできるかと期待していた。自動更新はされないが、アプリを起動すると「更新があります」と通知してくる。

## Chromeの更新対策
アプリを起動したときに「更新があります」の通知がでなくなる。

[【Win10】Chromeの自動更新を停止しバージョン固定する設定](https://milestone-of-se.nesuke.com/sv-basic/windows-basic/disable-chrome-updates/)から引用します。

zipをダウンロード＆展開する
[http://dl.google.com/update2/enterprise/googleupdateadmx.zip](http://dl.google.com/update2/enterprise/googleupdateadmx.zip)

PCの"C:\Windows\PolicyDefinitions"を開く

>『google.admx』『GoogleUpdate.admx』とフォルダ『en-US』を C:\Windows\PolicyDefinitions に Drag & Drop でコピーします。

>Windowsキー + R で『ファイル名を指定して実行』を表示させ、"gpedit.msc" と打ち、Enter を押下します。

>表示されたローカルグループポリシーの設定画面で、『コンピューターの構成』⇒『管理用テンプレート』⇒『Google』⇒『Google Update』⇒『Applications』⇒『Google Chrome』をクリックし、右ペインの『Update policy override』をダブルクリックします。

>Always allow updates はデフォルト設定であり、手動でも自動でも更新を許可する設定です。
>Automatic silent updates only は手動更新は許可せず、自動更新のみを許可します。
>Manual updates only は手動更新のみを許可します。
>Updates disabled は更新をせず、バージョンを固定します。

普段は「Update disable」を選択しておく、更新したいときは「Manual updates only」に戻す。（OSの再起動は不要だけど、ブラウザの再起動で反映される）

# Google Earth Proの更新対策
勝手にデスクトップにショートカットを作成するので、サービスを修正した。

- Goggle Updateサービス(gupdate)：無効　※既定は自動（遅延開始）

ただ、アプリを更新したりすると対策が変わるかもしれない。
【Unity】uGUIイメージをマスクしてジャギーが出たら

この記事で使用したUnityのバージョン2021.3.0f1
Built-inシーン
![01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1772485/f084a573-b35c-e90c-1b43-9bcd67cc9027.jpeg)

uGUIでマスクされたイメージでジャギーが出ることがあります。
これはPlatformがMacなどの高クオリティな環境では起こらず、iOSなどの低クオリティな環境で起こります。
念の為にイメージをマスクする手順を簡単に説明すると

１．透明に白丸などのマスク画像と、マスクを適用する画像を用意し、Texture TypeをSprite (2D and UI)に設定します。
２．HierarchyにUI -> Imageを作成、同時にCanvasも作成されます。
３．これにコンポーネントUI -> Maskを追加。
４．Source Imageにマスク画像を指定。
５．同様にもう一つImageを作成して、マスクを適用する画像を指定。
６．HierarchyでマスクImageにマスクを適用Imageをドロップして、マスクImageの子にします。

この問題はUnityにバグリポートを送ったのですが、次のような回答が得られました。
>Unfortunately, it has been decided that we are will not be fixing this issue due to the following reasons: "Some texture compression will leave artifacts in some pixels. As we are clipping in the shader we clip fragments when alpha is close to 0 (< 1/256 here). There is not much we can do to correct this. Turning off the texture compression or finding a different algorithm is the correct solution."
>
>As a workaround, you can also change the Compression of the problematic Sprites by selecting them in the Project window and changing their compression format in the Texture Import Settings from an ASTC format to a different one.

翻訳すると
>残念ながら、以下の理由により、本問題の修正を行わないことが決定しました。「テクスチャ圧縮により、一部のピクセルにアーティファクトが残ることがあります。シェーダでクリッピングしているため、アルファが0に近い（ここでは1/256未満）ときに断片をクリッピングしています。これを修正するためにできることはあまりありません。テクスチャ圧縮をオフにするか、別のアルゴリズムを見つけることが正しい解決策です。
>
>回避策として、問題のあるスプライトをプロジェクトウィンドウで選択し、テクスチャインポート設定で圧縮形式をASTC形式から別の形式に変更することで、圧縮形式を変更することも可能です。

![03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1772485/97d62827-1dfa-48b7-050c-ed8ec46e915f.jpeg)

マスク画像のインスペクタからCompressionをNoneにするか、FormatをAlpha 8などにすると解決します。
![02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1772485/dac79308-5519-311d-19d3-173f5ef3e1ff.jpeg)
TypeScriptのInterfaceまとめ

## タイプエイリアスの復習
```ts
type Human = {
    name: string;
    age: number;
}

const human: Human = {
    name: "Quill",
    age: 38
}

let developer: Human;
```

## Interfaceの定義
```ts
interface Human {
    name: string;
    age: number;
    greeting(message: string): void;
}

const human: Human = {
    name: "Quill",
    age: 38,
    greeting(message: string) {
        console.log(message);
    }
}

let developer: Human;
```

## Interfaceで関数の型を定義する
```ts
interface addFunc {
    (num: number, num2: number): number;
}
let addFunc: addFunc;
addFunc = (n1: number, n2: number) => {
    return n1 + n2;
}
```
【Javascript】クロージャーってなんぞ？

<h1>クロージャーを学びました！！！</h1>
<h2>ので、簡単に３つのポイントで記事を書きました。</h2>
<div>
<h3>① クロージャーとは？</h3>
関数の中に「<b>関数</b>」とその周囲の「<b>環境</b>」が格納されているもの
<br>(めちゃ簡単に書きました。詳しくはMDNとかにお任せします。。。)

[クロージャとは？](https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures "クロージャ - Javascript|MDN")

</div>
<div>
<h3>② 何に使うの？</h3>
オブジェクトの変数やメソッドを外部から簡単に変更されないようにするためらしい。<br>
（簡単に変更できるとバグや意図せぬ挙動が発生する恐れがある）<br>
<br>Javaでいうとカプセル化の概念に近いのかなぁ？
<br>(別件で調べたらカプセル化を担う機能の一つと書いてました。)
</div>
<h3>③ 使用例</h3>
例えば、消費税率の変化に対応出来るようこんな感じで関数が作れます。

~~~javascript:example1.js
function multiplyTaxRate(taskRate) {
  return function(price) {
    return price *  taskRate;
  };
}

const task2022 = multiplyTaxRate(0.1);
task2022(200); // => 220;
task2022(300); // => 330;

const task2013 = multiplyTaxRate(0.05);
task2013(200); // => 210;
task2013(300); // => 315;
~~~

その年のtask関数だけ使えるようにしてあげれば、
税率を勝手にいじれないようにすることも可能ですね！
Powershellでワンライナー(テキストファイルを指定した行数で分割)

# はじめに
今はバッチで色々スクリプト組んでますが、やりたいことを簡単に実現させたいので(1行で貼りつけるだけで簡単にできるので楽)

# ワンライナー
```powershell:TextFileDivide.ps1
# sample.txtを100行毎に分割
$i=0; Get-Content sample.txt -ReadCount 100 | % { Write-Output $_ | Out-File -Encoding default sample$i.txt  ;$i++ }
```
:::note warn 
注意
分割後のファイルは文字コードを指定しておかないとバッチ実行時にはまることが...(元ファイルがSJISで分割後のUnicode BOM付だったため、予期しない動きになって困った)
:::

# 参考サイト
※関係ないサイトもあるのですが、後で使うことあるかもなので
◆[PowerShell] テキストファイルを指定した行数で分割する
　https://pasomaki.com/powershell-divide-text/
◆コマンドプロンプトから PowerShell を実行する
　https://qiita.com/ww24/items/7d52df13fef5bc54e149
◆PowerShellの引数展開に関する仕様まとめ
　https://qiita.com/nimzo6689/items/166ad623d95f80d9c53b
◆PowerShell でファイル内の文字列をワンライナーで置換する
　https://qiita.com/kaku10/items/7c28fa5ebc829efe301c
◆【Get-Date】PowerShellで現在の日付や時刻を取得する方法とは？フォーマットの変更は？
　https://cheshire-wara.com/powershell/ps-cmdlets/system-service/get-date/
「伝わるデザインの基本」を読んだので、その要点

[伝わるデザインの基本 増補改訂3版 よい資料を作るためのレイアウトのルール | 高橋 佑磨, 片山 なつ |本 | 通販 | Amazon](https://www.amazon.co.jp/gp/product/4297119854/) の読書感想文です。
![](https://images-na.ssl-images-amazon.com/images/I/51j+Ki6l4XL._SX394_BO1,204,203,200_.jpg)
[Designとデザインと設計 - Qiita](https://qiita.com/e99h2121/items/7b352a6bf4acfac8b2fa)

> デザイン（英語: design）とは、審美性を根源にもつ計画的行為の全般を指すものである。意匠。設計。創意工夫。

のデザインの話である。
[伝わるデザイン｜研究発表のユニバーサルデザイン](https://tsutawarudesign.com/)


## 感想

- 無意識で選り好みしている部分を辞典のようにまとめている本。
- 図表が大量で視覚的に分かりやすい。
- お絵かきをしたくなってくるが、描いたあとにチェックリスト的に使うのが便利かもしれない。
- 法則
    - **［法則1］余白を十分にとる**
    - **［法則2］揃えて配置する**
    - **［法則3］グループ化する**
    - **［法則4］強弱をつける**
    - **［法則5］繰り返す**
- Before After 的な成果

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/23c9b9d8-6266-27f9-ddc1-594a6fe3ceec.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/8864ab21-e54d-f413-139c-8a70d988cf06.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93824/a3adc3ad-7fae-be19-f6bf-d5f235bce5f6.png)


## 要点

### 1章　書体と文字の法則
- 1-1 書体の基本知識
- 1-2 個性的な書体は避ける
- 1-3 読ませる文章での書体選び
- 1-4 見せる文章での書体選び
- 1-5 より美しいフォントを選ぶ
- 1-6 判読性の高いフォントを選ぶ
- 1-7 太字と斜体の使い方
- 1-8 おすすめのフォント
- 1-9 欧文フォントの使い方
- 1-10 和文と欧文が混ざる文章
- 1-11 数字の強調
- 1-12 約物の取り扱い
- 1-13 文字は歪めない，飾りすぎない
- チェックポイント
    - 目的に会った書体
        - 長文
        - プレゼン用
        - 英数字

### 第2章　文章と箇条書きの法則
- 2-1 文字の配置（文字組）
    - **禁則処理を使いこなす**
- 2-2 文字の大きさと太さ
- 2-3 行間の調節
    - **0.5～1文字 が適切**
    - 初期設定は欧文用
- 2-4 字間の調節
- 2-5 行頭を左揃えにする
- 2-6 箇条書きの作り方
    - Ctrl+Shift+Enger
- 2-7 小見出しのデザイン
- 2-8 段落間隔で見やすく
- 2-9 改行位置に注意を払う
- 2-10 インデントは本当に必要!?
- 2-11 行長を長くしすぎない
- 2-12 段組で紙面と時間の節約

### 第3章　図とグラフ・表の法則
- 3-1 図解を使ってわかりやすく
- 3-2 「囲み」を使いこなす
- 3-3 角丸四角は慎重に
    - 角丸四角の丸みの修正と統一
- 3-4 オブジェクトの装飾
    - 枠と塗りの両方に色を付けることはしない
- 3-5 矢印の使い方
    - 既存の装飾は派手すぎる
- 3-6 囲みと文字の組み合わせ方
- 3-7 図解を見やすく，美しく
    - **色を増やさない**
- 3-8 画像の基本知識
- 3-9 ラスター画像の扱い方
- 3-10 ベクター画像の構造
- 3-11 図に説明を入れる
- 3-12 数値データの示し方
- 3-13 グラフの作り方
- 3-14 応用的なグラフ
- 3-15 表の作り方
- チェックポイント
    - 図解はできるだけシンプルにする
        - **色は、枠線 と 塗り のどちらか**
        - **影、グラデーション、立体感 は取り除く**
    - 図は見やすく加工する
    - グラフや表は、直感的に理解できるように編集する
        - **ここでもフォント**


### 第4章　レイアウトと配色の法則
- 4-0 レイアウトの目的と5つの法則
    - すべての配置に必然性を
- 4-1 **［法則1］余白を十分にとる**
- 4-2 **［法則2］揃えて配置する**
    - 輪郭、背景を揃える
- 4-3 **［法則3］グループ化する**
- 4-4 **［法則4］強弱をつける**
- 4-5 **［法則5］繰り返す**
- 4-6 情報の構造に即したレイアウト
- 4-7 視線の流れを意識したレイアウト
- 4-8 写真や図の扱い方
- 4-9 余計な要素やノイズを減らす
- 4-10 囲みすぎない，丸めすぎない
- 4-11 配色の基本
- 4-12 色の選び方の基本
- 4-13 色の組み合わせ
- 4-14 文字色と背景色の組み合わせ
- 4-15 色の決め方
- 4-16 色覚バリアフリー
- チェックポイント
    - 余白をとる
    - 揃える
    - グループ化する
    - 強弱をつける
    - ルールを守る

### 第5章　実践
- 5-0 ルールを守り通す
- 5-1 プレゼン用のスライド
- 5-2 企画書や大判の発表資料
- 5-3 文章がメインの書類
- 5-4 掲示物やチラシ


## まとめ

https://twitter.com/h_okumura/status/1425809993161314308?s=20&t=JffDRvyP6A6BIJ9c5IQ2Yw

https://twitter.com/Excel_design_Dr/status/1462254984947396610?s=20&t=a-A5r9lW9vf-4cxr8AXG-A

図表が豊富で辞典的に活用できるのが醍醐味かもしれない。

以上です～
Docker composeでWordpressの開発環境を立てた後にコンテナ側のthemesディレクトリをローカルに反映した後マウントする

※DockerでWPの開発環境を立てた後の話です。
開発環境の立て方は他に分かりやすくまとめている方がいるのでそちらから。
https://qiita.com/nishio0024/items/39e4f8c113b683003948

# Wordpressのコンテナにあるthemesディレクトリをローカルに持ってくる

`
docker cp wordpress_wordpress_1:/var/www/html/wp-content/themes ./
`

# Docker-compose.ymlからマウントするよう追記
before

````
version: '3'

services:
   db:
     image: mysql:5.7
     volumes:
       - db_data:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: somewordpress
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress

   wordpress:
     depends_on:
       - db
     image: wordpress:latest
     ports:
       - "8000:80"
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: wordpress
       WORDPRESS_DB_PASSWORD: wordpress
volumes:
    db_data:
````

After

````
version: '3'

services:
   db:
     platform: linux/x86_64
     image: mysql:5.7
     volumes:
       - db_data:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: G11golden?
       MYSQL_DATABASE: wordpress
       MYSQL_USER: kojikoji
       MYSQL_PASSWORD: G11golden

   wordpress:
     depends_on:
       - db
     image: wordpress:latest
     volumes: 
      - './themes:/var/www/html/wp-content/themes'
     ports:
       - "8000:80"
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: wordpress
       WORDPRESS_DB_PASSWORD: wordpress
volumes:
    db_data:
````

しめに docker-compose up -d
Budibaseでファイルアップロードのサイズ上限を変更してみた

# はじめに

オープンソースでローコードプラットフォームである[Budibase](https://budibase.com/)を検証していますが、ファイルアップロードのサイズ上限が20MBで不便だったので、これを変更できないか試してみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2634234/e1f0b7d7-abe4-3185-f634-49036f2ed8d3.png)

# 手順

> ファイルアップロードのサイズ上限を1GBへ変更。

1. GitHubからBudibaseのコードをダウンロード。

2. `packages\bbui\src\Form\Core\Dropzone.svelte`変更

```javascript
// 変更前
export let fileSizeLimit = BYTES_IN_MB * 20
```

```javascript
// 変更後
export let fileSizeLimit = BYTES_IN_MB * 1000
```

3．`packages\server\src\app.ts`変更

```javascript
// 変更前
app.use(
  koaBody({
    multipart: true,
    formLimit: "10mb",
    jsonLimit: "10mb",
    textLimit: "10mb",
    enableTypes: ["json", "form", "text"],
    parsedMethods: ["POST", "PUT", "PATCH", "DELETE"],
  })
)
```

```javascript
// 変更後
app.use(
  koaBody({
    multipart: true,
    formLimit: "1gb",
    jsonLimit: "10mb",
    textLimit: "10mb",
    enableTypes: ["json", "form", "text"],
    parsedMethods: ["POST", "PUT", "PATCH", "DELETE"],
    formidable: {
      maxFileSize: "1gb"
    }
  })
)
```

4.ビルドを実行
```
yarn build
```

# 確認

ローカルで512MBのファイルを作成しアップロードを実施。ファイルの作り方は[How to create large dummy file](https://www.windows-commandline.com/how-to-create-large-dummy-file/)を参考。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2634234/99d21e15-384b-13aa-df2a-de18f5b6f321.png)
sklearnからのfetch_mldataを使ったMNISTデータの読み込みエラー

画像分類の入門であるMNISTに取り組んだとき一番最初に対処したエラーです。
参考書見ながら勉強しているとバージョンによるエラーがよくあるので、このあたりのアップデート情報には敏感にならないといけないなぁ


# 環境
google colaboratory
Python 3.7.13
sklearn 1.0.2


# エラー内容
```python:fetch_mldata
from sklearn.datasets import fetch_mldata

mnist = fetch_mldata("mnist original", datahome=".")

X = mnist["data"].astype("float32")
y = mnist["data"].astype(int)


# エラーコード----------------------------------------------------------------------------
ImportError                               Traceback (most recent call last)
----> 1 from sklearn.datasets import fetch_mldata
      2 
      3 mnist = fetch_mldata("mnist original", datahome=".")
      4 
      5 mnist_X = mnist["data"].astype("float32")

ImportError: cannot import name 'fetch_mldata' from 'sklearn.datasets' (/usr/local/lib/python3.7/dist-packages/sklearn/datasets/__init__.py)
```
fetch_midata自体がもう古いっぽい
MNISTは有名なので他にいくらでも方法はありますが、とりあえずこの方法で読み込む場合の修正は以下のとおり


# 修正後コード
```python:fetch_openml
from sklearn.datasets import fetch_openml

mnist_X, mnist_y = fetch_openml("mnist_784", version=1, return_X_y=True)

X = mnist_X.astype("float32")
y = mnist_y.astype(int)
```
「return_X_y=True」で訓練データとラベルデータを別々に分けて出力するように指定している。
これがないと一緒くたになって出力される。
中身はunit8型になっているようなので、取り出し後に型の変更をしておくこと。
【Laravel】特殊な条件で並び替えしたクエリを実行する方法

# 概要

`$ids`の順番通りにクエリの結果を並び替えて取得したかったが少し詰まったのでやり方を紹介する

## 元々の処理

```php
$ids = [3, 2, 4];

$users = User::query()
    ->whereIn('id', $ids)
    ->pluck('name', 'id')
    ->toArray();
```

## 期待する結果

```php
[
    3 => "hoge",
    2 => "fuga",
    4 => "hogehoge",
];
```

# やり方

SQLの`FIELD` 関数を利用して任意の並び順を指定します


https://www.jaga.biz/mysql/field/

```php

$ids = [3, 2, 4];
$sortIds = implode(', ', $ids);

$contents = TrainingContent::query()
    ->whereIn('id', $contentIds)
    ->orderByRaw("FIELD(id, $sortOption)")
    ->pluck('title', 'id')
    ->toArray();
```
【メモ】PHPのuse関連について学ぶ

phpで外部ファイルを使用する方法は2種類ある。(require,includeでrequireの方がよく見かけるし、更に言うとrequire_onceの方がよく見かける。)
使用する外部ファイルの中でどの機能を使用するかを指定できるのがuse。

# require
ファイルの読み込みに使う。
`require "ファイルのパス";`と`require("ファイルのパス");`どっちでもいい。
requireで指定するのはphpファイルそのもの。
`require "lib/test2.php";`
再読込みが行われて、変数などが再定義されると困る場合は、require_onceを使う。要するに安全だからという理由でよく使われているよ。
ファイルが読み込めないとエラーになる。

# include
ファイルの読み込みに使う。
>includeは、指定したファイルを読み込むという点では、requireと同じ。ファイルが読み込めなかった場合は、警告を出すのみで、処理は継続する。include_onceを使用すると、既に読み込まれている場合は再読込みを行わない。用途はrequire_onceと同じ。
https://sussan-po.com/2017/08/25/php-use-require-include/

# 名前空間
同一ファイル名の衝突回避のために使う。イメージとしては名前を長くして被らないようにするイメージ。
namespace 名前空間名{}で囲うように定義したほうが分かりやすいのでよい。
namespace 名前空間名{}を使う場合、名前空間の外に命令文を記述することはできないので注意。

PHPでは名前空間がメソッド呼び出し等で重複した場合`japan\sato\japan\sato\getGreeting()`を呼び出していると認識されエラーになってしまう。C#では省略できますと言われるだけだったから注意。
ただし`echo \japan\sato\getGreeting();`のようにjapanの前に\が付くと相対的ではなくフルパスのようになるため名前空間で自動で前方を補われることはなく、エラーにもならない。
まあ基本的にそんな風に記述することはないと思うが一応メモ
```php
<?php
namespace japan\sato;

require_once 'sato.php';
　#これはエラーになる
echo japan\sato\getGreeting();
　#これはエラーにならない
echo \japan\sato\getGreeting();
```

もし名前空間を定義しないとグローバル名前空間に属すことになるが、
グローバル名前空間であっても同じ名前空間に同じ名前のクラス名、関数などを定義することができない点は変わらない。

# use
使用する名前空間やクラスや関数を指定するときに使うもの。
名前空間のおかげで同じ名前のファイルや関数が区別できるようになり便利になった。だが名前空間の分クラス名が長くなったともいえる。毎度呼び出しで記述する文字数が増えてそれは面倒だ。。それを解決してくれるのがuse。useを使って名前空間を省略したりできる。
あくまでも使うファイルがある状態でさらに、使用する名前空間やクラスや関数を指定するときに使うものなのでrequireで使用するファイルを読み込む処理は必要である。
以下のパターンが一番使いそう。requireで使用するファイルを読み込むこと。
```
require "ファイル名"
use 名前空間 as エイリアス
```

名前空間までしか指定しないなら使いやすいのはエイリアスパターンだと思う(まだエアプ)
`use asia\japan\kanto as area;`
area\○○で使う。useを使ったからと言って完全に省略はできない。

`use asia\japan\kanto`ではkanto\○○で使う。こっちはインポートパターンらしいが、クラスや関数を使用するといったエイリアスを使うと逆に混乱しそうなパターンで使うものだろう。名前空間までの指定であればエイリアスに軍配が上がると思われる(まだまだエアプ)

useで楽に使用するクラスや関数を指定することも可能。関数やクラスをまとめてインポート。
```php
use asia\japan\kanto\tokyo\{
    pref, bird, flower
};
```
他にもuseで指定できるものはある。

useで関数を指定する
`use function 完全修飾形式の関数名;`

useで定数を指定する
`use const 完全修飾形式の定数名;`


# 個人メモ
phpではC#で「.」で区切っていたものが「\」で区切られている。

PHPで定数を定義するにはconstとdefine関数を使う2種類の方法があり、define関数は名前空間の影響を受けない。具体的にはよくわからないのがLaravelのデフォルトで作成されるファイルで使っていたのでそのソースを解読するときに調べる。


参考資料
https://qiita.com/7968/items/1e5c61128fa495358c1f
https://remotestance.com/blog/3064/
https://techacademy.jp/magazine/12283
https://sussan-po.com/2017/08/25/php-use-require-include/
Lenovo P11 の物理キーボードで半角/全角キーを使用する方法

Xiaoxin PadとLenovo P11とNEC Lavie T11シリーズは同じもの。
なので、Xiaoxin PadにもNEC版の専用キーボードが使えるが、デフォルトの設定のままでは日本語配列として認識されない。かつ、認識させても半角/全角キーが使えるようにならなかったので、解決策をメモ。

参考
https://www.google.com/amp/s/daily-gadget.net/2021/03/20/post-31752/%3famp=1
ここにしたがって、まずはAndroidの「設定」→「システム」→「言語と入力」→「物理キーボード」→「物理キーボード」とタップして、「Lenovo ~」を選択。

これでキーボードが日本語配列として認識される。
が、このままだと半角/全角キーが効かない。

次に、半角/全角キーを使用するため、入力方法をGboardから別のものに変更する。
NEC版のLavie T11とかに入っているのはおそらくこれ。
https://iwnn-ime.jp.uptodown.com/android/download

他にも、ATOKとかもいけるらしい。しめじとかも行けるかもだけど未検証。
何かしらIMEをインストールしたら、
「設定」→「システム」→「言語と入力」→「仮想キーボード」→「キーボードを管理」から、インストールしたIMEを有効化する。
その後、
「設定」→「システム」→「言語と入力」→「デフォルトの入力方法」
をインストールしたIMEに変更する。
% python したら command not found を突きつけられました

いつもどおりMacでpython使おうとしたところ。
```
% python
zsh: command not found: python
```
いやそんなばかな。タイポしたのかなと、何度か試したけれどもみつからない。
```
% which python
python not found
```
PATH以下にないの?昨日まで使えてたが!!

find とか $PATH 確認したりあれこれしたが python でタブ補完したところ python3 がでてきた。なんでこんなことになってんだろ。

以下にハッキリ書いてありました。
https://developer.apple.com/documentation/macos-release-notes/macos-12_3-release-notes
```
Python
Deprecations
Python 2.7 was removed from macOS in this update. Developers should use Python 3 or an alternative language instead. (39795874)
```
> 今回のアップデートでPython2.7をmacOSから削除したぞ。おまえらは python3 か他の言語を代わりに使うべきなんだよ。

あらあ、そうなのね。他の記事でも散々話題になってました。ぼくのアンテナ感度が低かっただけでした。
python3 コマンドはあったので安心。少しびっくりしただけでした。
【VSCode】cmd + nで名前付きファイルを作成する

## はじめに
MacのVSCodeでは`cmd + n`で新規ファイル作成ができます。
しかし、デフォルトでは以下のように無名のファイルが作成されます。

![スクリーンショット 2022-04-20 0.12.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/b9777aae-cf94-f13c-4638-cc8eeab0deee.png)


そこで、`cmd + n`で名前をつけて新規ファイル作成ができないか調べました。
結果、`keybindings.json`を編集することで設定が可能でしたので設定方法を以下に記載します。

## 設定方法

### `keybindings.json`を開く
`cmd + sft + p`でコマンドパレットを表示します。
`Preferences: Open Keyboard Shortcuts (JSON)`と入力し、`keybindings.json`を開きます。

![スクリーンショット 2022-04-20 1.03.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/f47f6f9e-7cba-2442-a769-5f6b9f956de1.png)


### `keybindings.json`に設定を書く
`keybindings.json`に以下のように記述します。

```keybindings.json
[
  {
    "key": "cmd+n",
    "command": "explorer.newFile",
  },
  {
    "key": "ctrl+n",
    "command": "explorer.newFolder",
  }
]
```

すると`cmd + n`でエクスプローラーに新規ファイルが作成されるようになります。
また、`ctrl + n`を入力すると新規フォルダを作成できるようにも設定しました。
実際には以下のようになります。

`cmd + n`を入力
![スクリーンショット 2022-04-20 1.16.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/b29769eb-d4f8-aa7a-1f2e-671780c6b634.png)


`ctrl + n`を入力
![スクリーンショット 2022-04-20 1.15.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/30ff3278-ecbf-776d-3b24-0f6bdb6e9d5f.png)



## `when`を追加で設定する
`keybindings.json`に`when`を記述することで、キーバインドを有効にするタイミングを設定できます。
以下のように記述するとフォーカスがエクスプローラーにあるときのみキーバインドが有効になります。

```keybindings.json
[
  {
    "key": "cmd+n",
    "command": "explorer.newFile",
    "when": "explorerViewletFocus"
  },
  {
    "key": "ctrl+n",
    "command": "explorer.newFolder",
    "when": "explorerViewletFocus"
  }
]
```
今更ながらGoogleデータポータルを使ってみた


初めてのQiita記事投稿です :tada:
記念すべき初回投稿は「データポータル」について。

# はじめに

サイト上のデータを自動集計しつつ、イケてる感じに可視化したく、
長年触れてこなかったデータポータル（旧: DataStudio）というBIツールを使ってみました。

# データポータルとは
<img width="700" alt="datasource_select_0" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554608/b85359b1-7977-f80b-8399-8333bbf7c381.png">

データポータルはGoogleが提供している無料のBIツールです。
様々なデータソースからレポートを作成したり、ダッシュボードにまとめてデータを可視化できます。
また、複数人で同時に同じレポートを閲覧・編集することもできるので、データ分析の効率化を図ることができます。

引用：[Googleデータポータルとは？機能・メリット・注意点・導入方法まで解説！](https://liskul.com/data-portal-72700)

# さっそく作ってみる

### 0. アウトプットイメージを考える

▼ 今回可視化したいデータのイメージ
- 月間ユーザー数の推移を表示したい
- グラフ形式は折れ線で、緑っぽい色味のグラフを所望

### 1. 新規レポートを作成する

テンプレもたくさんありますが、空のレポートで作成してみます。

<img width="700" alt="datasource_select_1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554608/47fecb38-bec0-d28e-005f-09889e90fd63.png">

### 2. データソースを選択する

データポータルでは様々なデータソースを扱えます。
（Googleアナリティクス、Google広告、スプレッドシート、BigQuery等）

今回はGoogleアナリティクスのデータを使ってみます。

<img width="700" alt="datasource_select_2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554608/46996da5-f700-d0b9-a794-47a2346306c0.png">


### 3. レポートを作成する

今回はグラフを作りたいので `グラフを追加` から折れ線グラフを選択します。
<img width="700" alt="datasource_select_3" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554608/ede98ce1-beb4-c9ab-ba56-5723d99a274e.png">


グラフを追加すると、画面右側で指標・ディメンション・期間などが選択できます。
今回は月間のユーザー数の推移を見たいので `ディメンション：月（年間）` `指標：ユーザー` を選択します。

<img width="500" alt="datasource_select_4" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554608/9bd30f84-0e92-fdfa-fe5a-d0d233382f5d.png">


### 4. 可視化する

こんな感じでグラフになりました！
<img width="700" alt="datasource_select_5" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554608/69099660-adae-32de-2753-5ea7919e0965.jpeg">

### 5. グラフスタイルを調整する

画面右側の `スタイル` からグラフの見え方を調整できるので、好きに調整します。


<img width="500" alt="datasource_select_5" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554608/6f61108d-b790-476c-6bd9-7641065c5dc5.png">


▼できることはざっとこんな感じ

- 系列の詳細設定（色味、太さ、データラベルの有無など）
- 軸の詳細設定（表示幅、書式など）
- グラフの背景色の設定
- グリッドの設定（グリッド有無、グリッド線の色味など）
- 文字の設定（フォント、サイズなど）
　

グラフ設定を色々いじってみました。

<img width="700" alt="datasource_select_6" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554608/c9d53f3f-a901-787a-3a75-0fe632419f99.png">


おぉ～～、結構自由度高い。
レポートにはテキストボックスや図形も挿入できるので、そのまま資料などにも使用できそうです。

# まとめ

- 個人的にはかなり使いやすいと感じました
    - UIも直感的で使いやすい、Googleプロダクトを日々触っている人なら尚更
- 自動集計ができるだけでなく、グラフのカスタマイズ性が高い点が最高
- 定点観測したいサイトデータは全てこれでよいのでは？ ＃極論

一から作るのが面倒な方向けには、
下記のようにサービス毎にテンプレートが用意されているのでおススメです！

▼テンプレート（一部抜粋）
<img width="700" alt="datasource_select_7" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/554608/09e4d303-4db4-7d3d-8235-cbefe495571e.png">
Play+Slick個人的つまづき集

何かと日本語記事の少ないPlay Framework。その中で自分が詰まったけど解決したことをまとめてみました。随時更新していきます。

## build.stbを再読み込みした時に「reason: not ok build status: Error (BuildMessages(Vector(),Vector(),Vector(),Vector(),Error))」というエラーが発生した。
設定→ビルド→ビルドツール→sbtの中にある「プロジェクトの再ロード」をチェック。
【高速なnumpy】WindowsでJAXを使おう【Python】

この記事ではJust-In-Timeコンパイルにより高速計算を実現するライブラリ**JAX**を**Windows**に導入する手順を説明します。
JITコンパイル、JAXの説明はしません。
【参考】[https://github.com/cloudhan/jax-windows-builder](https://github.com/cloudhan/jax-windows-builder)

## 1. jaxlibのwhlファイルをダウンロードする
[https://whls.blob.core.windows.net/unstable/index.html](https://whls.blob.core.windows.net/unstable/index.html)から自分の環境にあったjaxlibのwhlファイルをダウンロードします。
`該当ファイルがどれかわからない！という方は次のコードを実行することでCPU/cuda、jaxlibのバージョン、cp等を確認してください。`
```Python
pip3 debug --verbose 
```
## 2. whlファイルをインストールする
ダウンロードしたwhlファイルのパスをコピーしpip installします。
※Windowsではshift+右クリックでパスのコピーを選択できる。
```Python
pip install "C:\Users\~~~~~.whl"
```
## 3. jaxをpip installする
状況に応じてjax[gpu]やバージョンの指定が必要です。[詳しくは](https://zenn.dev/exyrias/articles/f21b628a7b4fa9)

```Python
pip install jax
```
## 4. jaxをimportする
```Python
import jax 
```

実際には`import jax.numpy as np`や`jnp`と使うことが多いと思いますが、np.randomのようにnumpy同様に使えない処理もあります。

今後に期待しましょう！
非同期タスク（複数）を同期的に実行

こんにちは。
非同期タスク（複数）を、同期的に（順に）実行させました。すなわち、

* 非同期タスク関数を、```new Promise()```を戻り値とする形に仕立て、
* その実行完了（```resolve()``` が返される）を待った後に（=```await```）、次（の行）の関数が実行されます[^1]。

[^1]: 同期的実行は不要な場合には```Promise.all()```を用いることができます。複数の関数の指定順序順通りの実行結果配列を得られます。

#### 実行例およびソース
下記の```waitTimes = [600, 400, 200]``` で与えた順序に従って同期的実行します。

<img width="280px" alt="image" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54617/ba14ae67-fb5a-4476-f8b8-50ea3342b78c.jpeg">

```promise.html
<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8>
</head>
<body>
  <div id='debug' style='padding:4px;background-color:#fffc;position:absolute;left:0;top:0;color:#0af;font-family:courier;font-size:12px;user-select:none'></div>
</body>
<script>
const strArrayDebug = [];
const waitTimes = [600, 400, 200];

(async () => {
  for (const waitTime of waitTimes) {
    await funcWait(waitTime);
    showDebugPush(`waited for ${waitTime}ms. (later)`);
  }
  showDebugPush("done.");
})();

function funcWait(waitTime) {
  const func_wait = (resolve) => {
    setTimeout(() => {
      resolve();
      showDebugPush(`waited for ${waitTime}ms. (earlier)`);
    }, waitTime);
  };
  return new Promise(func_wait);
}

function showDebugPush(str) {
  strArrayDebug.push(str);
  document.getElementById("debug").innerText = strArrayDebug.join("\n");
}
</script>
</html>
```
ssh receive packet: type 51というerrorが出たとき

`ssh hostname -vvv`で`ssh receive packet: type 51`というエラーが出たとき、サーバーの認証が失敗している。ログを詳しく見るため設定変更する。

#### 1. LogLevelをINFOからDEBUGに変更
```
sudo vi /etc/ssh/sshd_config
```
```config:/etc/ssh/sshd_config
LogLevel DEBUG
```
#### 2. SSHデーモンを再起動
```
sudo systemctl restart sshd
```
#### 3. エラーメッセージを確認
```
tail -l /var/log/auth.log
```
NFT サービスを簡単に構築できる Azure NFT Solution Accelerator が便利な件！

※本記事は2022年4月20日時点の情報を元に書かれています。

# はじめに
NFTを利用したソリューションをクラウド上で開発する上でのリファレンスを探していたところ、Microsoft公式でGitHubにアーキテクチャサンプルとテンプレートが公開されているのを発見しました！

[Azure NFT Solution Accelerator](https://github.com/microsoft/Azure-Non-Fungible-Token-Solution-Accelerator) では、ERC 721 Token Standardを利用して、Ethereum、Quorum、Hyperledger Besuなどのエンタープライズブロックチェーンサービスでのトランザクション管理を支援するテンプレートとサンプルコードが公開されています。NFTを活用したサービス開発を加速してくれるテンプレートです。

本記事は「試してみた系記事」として読んでいただけましたら幸いです。

# 準備事項
基本的な開発環境があれば、あとはスクリプトを実行するだけで自動的にインフラが完成します。GitHub上に手順が絵付きで記載されているので、とても分かりやすく作業を進めることができます。

- Azureの環境 (アカウントやサブスクリプション)
- PowerShell 7.1
- Azure CLI
- Docker Desktop
- PuTTy
- Visual Studio (.NET 5)

(※最新の情報はGitHub Repoを参照ください)

# 試してみた
上記環境を整備後、GitHubに記載された手順通りに作業を進めると、下記アーキテクチャが完成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/2ce45ddc-ad4e-5d1b-bdd1-5c18044553fb.png)

インフラが完成後、コンソールアプリケーションを実行すると以下のように実行されました。スマートコントラクトの発行からNFTのMint、コンテンツの確認までの作業が自動的に走り、処理の内容を確認することができます。

![AzureNFTApp-Res.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/cd5895a3-958b-7e98-361f-ab55f6f111ba.png)


# さいごに
このテンプレートをそのままサービスとして使うことはできませんが、インフラテンプレートやサンプルコードが用意されているため、これを基にカスタマイズしていくことでサービス開発をより加速することができると思います！本記事では細かく触れませんでしたが、ブロックエクスプローラーやGrafana, Kibanaなど開発に必要なツールもまとめて利用できるようになっているので、検証やNFTの学習等にも活用できるかと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267543/7e4f2ab2-9785-f745-f0c3-43d09dc9b05b.png)
docker-composeでReact-Typescriptの開発環境作ってみた。

## 経緯

以前作ったポートフォリオサイトをアップデートしようと思い立ち、唐突にサイト制作を始めた。
どうせならモダン目な技術を使いたいし、難しいことにもチャレンジしてみたい。
そんなこんなでコンテナを使用して、わざわざJSライブラリも使用していく。

①まずはDockerfile,docker-compose.ymlファイルを用意する。

```Dockerfile
FROM node:17-alpine3.14
WORKDIR /usr/src/app
```

Reactが動作するイメージを選択する。

```docker-compose.yml
version: '3'
services:
  react:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./:/usr/src/app
    command: sh -c "cd workplace && npm start"
    ports:
      - "3000:3000"
    tty: true
```

②Dockerを利用するためにコマンドを実行する。

```
$ docker-compose build
```

裏で色々動いている様子だが、下記が表示されればとりあえずはOK

```
[+] Building 27.4s (6/6) FINISHED
```

③npmでworkplaceというディレクトリにcreate-react-appしていく

```
$ docker-compose run --rm react sh -c "npm install -g create-react-app && create-react-app workplace"
```

④今回はTypescriptを利用するため、関連パッケージ/バンドラー等をインストールしていく。

```
$ npm i typescript
$ npm i webpack
$ npm i webpack-cli
$ npm i webpack-dev-server
$ npm i ts-loader
```

⑤環境構築の最後にDockerのコンテナを立ち上げる。

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

画像のような表示がされたら成功している。

![スクリーンショット 2022-04-19 23.06.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/280830/ad347fc6-d742-2ac0-5064-78db285f6642.png)
PHPのコード整形と静的解析をpre-commitでコミット時に自動で実行したい

# 実現したいこと
Gitのpre-commitフックを使って、コミット時にPHPファイルのコード整形と静的解析が実行されるようにしたい。

# 問題点
commit時にpre-commitに登録したスクリプトは動き、コード整形はされるがコミットができない。
途中でエラーが発生している。


# 参考にしたサイト
https://zenn.dev/takuyanagai0213/articles/2685fe51f7afe5

https://qiita.com/Sho2010@github/items/eae44da09aa279e7e598

# 必要なパッケージ
* php-cs-fixer（コード整形）
* phpmd（静的解析）
それぞれのパッケージについては解説しません。
https://zenn.dev/takuyanagai0213/articles/2685fe51f7afe5#%E9%9D%99%E7%9A%84%E8%A7%A3%E6%9E%90%E3%83%84%E3%83%BC%E3%83%AB%E5%B0%8E%E5%85%A5
導入に関しては上記を参考にしました。
--devオプションをつけてインストールでも良いかと思います。

# 修正したpre-commitのスクリプト

```shell
#!/bin/bash                  
                             
if git rev-parse --verify HEAD >/dev/null 2>&1
then                         
    against=HEAD             
else                         
    # Initial commit: diff against an empty tree object
    against=4b825dc642cb6eb9a060e54bf8d69288fbee4904
fi                           
# Redirect output to stderr.
exec 1>&2                    
SYNTAX_CHECK=0               
## 静的解析、及びフォーマッターの実行
# コミットされるファイルのうち、.phpで終わるもの
for FILE in `git diff-index --name-status $against -- | grep -E '^[AUM].*\.php$'| cut -c3-`; do
    # シンタックスのチェック
    if php -l $FILE; then 
        # PSR準拠でコード書き換え
        ./vendor/bin/php-cs-fixer fix $FILE
        git add $FILE        
        # PHPMDで未使用変数などのチェック
        if ! ./vendor/bin/phpmd $FILE text ruleset.xml; then
            SYNTAX_CHECK=1
        fi                   
    else                     
        SYNTAX_CHECK=1       
    fi                       
done                         
                             
                             
## 最後の確認                
if [ $SYNTAX_CHECK -eq 0 ]; then                                                                      
    exit 0                   
else                         
    echo -e $'\e[31;43m 修正を行った上で再度コミットしてください \e[m'
    exit 1                   
fi
```
参考にしたサイト↓のままではエラーが発生していたので、後述の２行について修正を加えました。
https://zenn.dev/takuyanagai0213/articles/2685fe51f7afe5

32行目の`if [ $SYNTAX_CHECK -eq 0 ]; then`
35行目の`echo -e $'\e[31;43m 修正を行った上で再度コミットしてください \e[m'`

32行目はもともとは`if [ $SYNTAX_CHECK -eq 0 -a $IS_ERROR -eq 0 ]; then`となっていました。IS_ERRORも参照しているが、スクリプト中では設定されていない変数なので、そこで落ちていたようです。（違っていたら教えてください！）

35行目については色をつけてメッセージを表示する箇所ですが、なぜか色がつかなかったので、
https://qiita.com/Sho2010@github/items/eae44da09aa279e7e598
を参考に少し記述を変更しましたら正しく色付きのメッセージが表示されました！（マジ感謝！！）
【JavaScript】クロージャ・スコープの考え方をなんとなく解説

JavaScriptをやるなら誰もが通るであろう鬼門をなんとなく解説👀

## ●クロージャとは？

クロージャとは「__自分を囲むスコープ内にある変数を参照可能な関数__」と定義できます。

## ●じゃあスコープってなに？

スコープとは「__変数を参照できる範囲__」です。

スコープの種類を詳しく見ていきましょう。

## ●スコープの種類

### 　❶グローバル変数
  　　　関数の外（トップレベル）にある変数のスコープ。
　　　varで宣言すると、関数及びブロックの内外関係なくグローバル変数となります

```Javascript
//グローバル変数
var global = "Hello";
function func(){
//関数内からアクセス可
    console.log(global); //　⇨ Hello
}
//関数外からアクセス可
console.log(global); //　⇨ Hello
```

### 　❷ローカル変数
　　　　グローバル変数以外の全ての変数のスコープ。
　　　　下記２種類存在します。


#### 　　（１）__関数スコープ__
　　　　関数内で宣言されている変数のスコープ。関数外からはアクセスできない。

```Javascript
function func(){
  //関数スコープ変数
  const local = "Hello";
  //関数内からアクセス可
  console.log(local); //　⇨ Hello
}
//関数外からアクセス不可
console.log(local); //　⇨ Uncaught ReferenceError: local is not defined
```

#### 　　（２）__ブロックスコープ__
　　　　{}内で宣言された変数のスコープ（if{}など）。{}外からはアクセスできない。

```Javascript
function func(){
  const num = 4;
  if (num % 2 === 0) {
    //ブロックスコープ変数
    const result = "偶数";
    //関数内からアクセス可
    console.log(result); //　⇨　"偶数"
  }
  //ブロック外からアクセス不可
  console.log(result); //　⇨ Uncaught ReferenceError: result is not defined
}
//関数外からアクセス不可
console.log(result); //　⇨ Uncaught ReferenceError: result is not defined
```

## ●クロージャの重要性
　　グローバル変数の説明を見ると一見、「便利じゃね？」と思うかも知れない。
　　でもそこにはリスクが伴う。予期せぬ変数の上書きなどの発生原因になる。

```Javascript
function func(elem){
  //関数スコープ変数（変更したくないもの）
  let origins = 25;
  return {
    sum: () => elem + origins, 
    negative: () => elem - origins
  };
}
console.log(func(50).sum()); // ⇨ 75
console.log(func(50).negative()); // ⇨ 25

//スコープ外で変数を上書きしようとするとエラー
origins = 30; // ⇨ origins is not defined
```
## ●まとめ
　このようにクロージャとスコープは密接に関係しています。
　ややこしいですが、「便利そうだから」と言って無闇にグローバル変数を使わず
　常にスコープを意識してコーディングしましょう。
　予期せぬエラーや、誤った変数の変更を防止すると共に、無駄なデバッグを撲滅できます。　　

__これを機に、スコープと友達になろう！__
今さら解説するSQL「副問合せ」

# 副問合せとは
SQLにおいて「副問合わせ」とは、メインのSQLに別の問合わせを入れ子で挿入すること。

``` 基本構文
SELECT 列名
FROM テーブル名
WHERE 列名 比較演算子 ( 
  SELECT 列名
  FROM テーブル名　
  ）
``` 
()で囲まれた文を副問合わせという。
逆に囲まれていない文は主問合わせという。

副問合わせ内では通常のSQL文と同様にWHERE句やGROUP BY句など使える。
また、主問合わせのWHERE句やFROM句に使用できる。
ただ、主問合せの**GROUP BY句には使用できない**。

# 副問合せの注意点
1. 副問合せの実行結果が0件の場合でも主問合せはエラーにならない。
⇨ただし、主問合せの結果も0件になる。

1. 単一行副問合せでは、単一行演算子が使える。
⇨単一行副問合わせとは実行結果が1件となる副問合せ
⇨単一行演算子とは「＝」、「<」、「>」など

1. 複数行問合わせでは、複数行演算子が使える。
⇨複数行問合わせとは実行結果が複数件の副問合せ
⇨複数行演算子とは「IN」、「＝ANY」、「>ALL」など
⇨**複数行問合せでは複数行演算子は使えない。**

# 複数行演算子について
## ANY
単一行演算子と組み合わせる必要がある。
```
SELECT 列名
FROM テーブル名
WHERE 列名 =ANY ( 
  SELECT 列名
  FROM テーブル名　
  ）
```
上記の場合、副問合せの実行結果のいずれかに該当する値を主問合せのWHERE句で比較対象としている。
つまり、「IN」と同じように使用できる。
ただし、**「NOT IN」と「<>ALL」にはで注意（後述）**。

## ALL
同じく、単一行演算子と組み合わせる必要がある。
```
SELECT 列名
FROM テーブル名
WHERE 列名 <ALL ( 
  SELECT 列名
  FROM テーブル名　
  ）
```
上記の場合、副問合せの実行結果の全ての値よりも小さい値を主問合せのWHERE句で比較対象としている。

「NOT IN」と「<>ALL」は同じもので、副問合せの実行結果の全ての値と等しくないとTRUEを返す。
ただ、実行結果にNULLが含まれる場合は常にFALSEを返す。
そのため、NULLを除外して比較するには副問合せのWHERE句等で「IS NOT NULL」を指定する必要がある。
Photon OS (systemd-networkd) における VLAN ネットワーク設定

Photon OS は、クラウド環境に最適化された非常に軽量でミニマリストな Linux OS です。

簡単ですが、こちらの記事の冒頭で紹介をしております。

https://qiita.com/iwaseyusuke/items/7b2a76f4538df93ba792

主に仮想環境向けの Linux OS なので、タイトルにあるような「Guest OS 側で、直接 VLAN 設定したい」というシーンは多くは無いと思います。
しかし、たま〜に必要になって、毎回調べるのも面倒なので、備忘として書き残しておきます。

## 設定ファイルの場所

`systemd-networkd` の設定ファイル[^1]は、`/etc/systemd/network` に配置されていますので、まずは、このディレクトリまで移動します。

```
cd /etc/systemd/network
```

[^1]: 正確には、システムが提供する設定ファイルが格納されるディレクトリ `/usr/lib/systemd/network`、一時的な実行時の設定ファイルが格納されるディレクトリ `/run/systemd/network`、そして `/etc/systemd/network` の順で読み込まれます。後から読み込まれた設定が上書きしていく仕組みです。

## 設定ファイルの種類

`systemd-networkd` には、複数種類の設定ファイルがありますが、今回は下記の2種類の設定ファイルを作成します。

* `.network`
    * [Match] で指定した条件に合致するデバイスに、IP Address や Gateway、DNS などを設定。
* `.netdev`
    * 指定された条件で仮想ネットワークデバイスを作成。

今回は、`eth0` のサブインタフェースとして、VLAN 31 を振った `eth0.31` という仮想ネットワークデバイスを作成し、この `eth0.31` に IP Address や Gateway、DNS を設定していきます。
そのため、`.network` ファイルが `eth0` と `eth0.31` で2つ、`.netdev` ファイルが `eth0.31` で1つ、合計3つのファイルを作成します。

一方で、VLAN を割り当てず、普通に IP Address を振るだけであれば、`.network` ファイルを1つ作成すれば良いです。

## 具体的な設定

まず、親のインタフェース `eth0` に、VLAN のサブインタフェースがあることを教えるための `.network` ファイルを作成します。

```sh
cat << EOF > 10-eth0.network
[Match]
Name=eth0

[Network]
VLAN=eth0.31
EOF
```

次に、VLAN 31 を振った仮想ネットワークデバイス `eth0.31` を作るための `.netdev` ファイルを作成します。

```sh
cat << EOF > 10-eth0.31.netdev
[NetDev]
Name=eth0.31
Kind=vlan

[VLAN]
Id=31
EOF
```

さらに、作成された `eth0.31` の仮想ネットワークデバイスに IP Address や Gateway、DNS を設定するための `.network` ファイルを作成します。

```sh
cat << EOF > 10-eth0.31.network
[Match]
Name=eth0.31

[Network]
Address=172.19.31.80/24
Gateway=172.19.31.254
DNS=8.8.8.8
EOF
```

最後に！設定ファイルの権限に注意してください！
権限が `644` になっていないと、この後の手順で、設定を反映させようとしてエラーとなります。

```sh
chmod 644 10-eth0*.{network,netdev}
```

## 補足: 設定ファイル名について

設定ファイル名を `番号-デバイス名.拡張子` としておりますが、ルールが存在しております。
`systemd-networkd` では、同じディレクトリに複数の設定ファイルがある場合、ファイル名を A -> Z でソートした際に、より先に来るファイルの設定が優先されます。

そのため、同じディレクトリに、こんな感じでファイルがあった場合、

```text
10-eth0.network
99-dhcp-en.network
```

`10-eth0.network` で、`eth0` に固定 IP アドレスを振りつつ、それ以外のインタフェースについては、デフォルトで DHCP を有効化する、という設定が可能になります。

## 設定の反映

`systemd-networkd` を再起動させて、設定を反映させます。

```sh
systemctl restart systemd-networkd.service
```

`ip` コマンドで、設定が反映されていることを確認します。

```sh
# ip a
...(snip)...
3: eth0.31@eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc noqueue state UP group default qlen 1000
    link/ether 00:50:56:93:98:1c brd ff:ff:ff:ff:ff:ff
    inet 172.19.31.80/24 brd 172.19.31.255 scope global eth0.31
       valid_lft forever preferred_lft forever
    inet6 fe80::250:56ff:fe93:981c/64 scope link
       valid_lft forever preferred_lft forever
```

## 補足: トラブルシュートの入口について

`ip` コマンドで確認しても、意図した設定が反映されていない場合、まずは、`systemd-networkd` のステータスを確認し、そこに表示されるログを見ることが糸口となります。

```sh
systemctl status systemd-networkd.service
```

## 参考

https://vmware.github.io/photon/assets/files/html/3.0/photon_troubleshoot/Troubleshooting_Networkconfiguration.html
S3を作成

## 初めに
今回、S3の作成方法について、ご説明作成いただきます。

## 手順

### 1.AWSマネージメントコンソールの検索欄に[s3]を検索し、s3に移動

![截屏2022-04-19 22.19.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531066/fcb3d91d-be29-1a4a-4bd0-ccbbff3c954f.png)
### 2.S3画面に「バケットを作成」ボタンをクリックする 
![截屏2022-04-19 22.20.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531066/25899145-355b-d2ce-18f7-ff6921a742af.png)

### 2.一般的な設定
1. バケット名 (test-bucket-yyh)※同じ名前のバケットがすでに存在かを注意

1. AWSリージョン（ap-northeast-1）
1. 既存のバケットから設定をコピー（デフォルトにする）

![截屏2022-04-19 22.28.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531066/674593c4-e524-769a-e2d7-b562efbd0255.png)
### 3.オブジェクト所有者
- ACL無効（推奨）
- ACL有効

ACL無効を設定すると、このバケット内のすべてのオブジェクトは、このアカウントによって所有されます。このバケットとそのオブジェクトへのアクセスは、ポリシーのみを使用して指定されます。

ACL有効を設定すると、他の AWS アカウントがこのバケット内のオブジェクトの所有者となることができます。このバケットとそのオブジェクトへのアクセスは、ACL を使用して指定できます。

今回ACL無効にする
![截屏2022-04-19 22.27.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531066/4dd9c103-409a-3345-d9cd-8f3ab04d076d.png)
### 4.ブロックパブリックアクセス設定
1. 新しいアクセスコントロールリスト (ACL) を介して付与されたバケットとオブジェクトへのパブリックアクセスをブロックする
1. 任意のアクセスコントロールリスト (ACL) を介して付与されたバケットとオブジェクトへのパブリックアクセスをブロックする
1. 新しいパブリックバケットポリシーまたはアクセスポイントポリシーを介して付与されたバケットとオブジェクトへのパブリックアクセスをブロックする
1. 任意のパブリックバケットポリシーまたはアクセスポイントポリシーを介したバケットとオブジェクトへのパブリックアクセスとクロスアカウントアクセスをブロックする

今回、パブリックアクセスをすべてブロックします。

![截屏2022-04-19 22.32.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531066/2bd08870-35d9-cf62-2a06-bb9b36c78f94.png)

### 5.バケットのバージョニング
バージョニングは、オブジェクトの複数のバリアントを同じバケット内に保持する手段です。バージョニングを使用すると、Amazon S3 バケットに格納されているすべてのオブジェクトのすべてのバージョンを保存、取得、復元できます。バージョニングを使用すると、意図しないユーザーアクションと意図しないアプリケーション障害の両方から簡単に復旧できます。

今回、有効にする
![截屏2022-04-19 22.38.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531066/e5c3a63c-16a7-7952-26b1-9f1b1d679918.png)

### 6.タグ
デフォルトにする
![截屏2022-04-19 22.40.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531066/c16f6a94-6e88-b058-8020-09a11b727b06.png)
### 7.暗号化
1. サーバ側の暗号化（有効にする）
1. 暗号化キータイプ　（SSE-s3にする）


![截屏2022-04-19 22.50.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531066/7964f106-97e4-d5a7-f0ae-1a2de64e3327.png)

### 8.オブジェクトロック
Write-Once-Read-Many (WORM) モデルを使用してオブジェクトを保存すると、オブジェクトが一定期間または無期限に削除または上書きされるのを防げます。

今回、無効にする

### 9.「バケットを作成」ボタンをクリック
![截屏2022-04-19 22.53.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531066/53e688b8-83f4-b96b-4554-774bcdeec4cb.png)
### 10.確認

以下のメッセージが出れば、成功！
![截屏2022-04-19 22.56.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2531066/74f0d894-0c6a-1ce9-1405-4b987f3ddce2.png)
【VirtualBox】UbuntuでWebサーバを構築する

## Apache2をインストール
```
$ sudo apt install apache2
```
## 80ポートを許可する
virtualboxでポートフォアーディング設定をする。
設定⇨ネットワーク⇨アダプター１⇨ポートフォワーディングを選択する
![スクリーンショット 2022-04-19 22.42.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281678/d96a1775-0bde-8752-adcf-b27e0c326ed7.png)

[+]ボタンから以下図のHTTPを記載する
ホストポートは使用しているPCの８０８０ポートになるため、他で使用している場合は他を使用する。
ゲストポートは使用する仮想マシンの８０ポートになる。
![スクリーンショット 2022-04-19 22.44.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281678/678c33b1-59e8-07d9-3fce-ba9de1fda702.png)

## 接続確認
apache2を起動する
```
$ sudo systemctl start apache2
$ sudo systemctl status apache2
● apache2.service - The Apache HTTP Server
     Loaded: loaded (/lib/systemd/system/apache2.service; enabled; vendor prese>
     Active: active (running) since Tue 2022-04-19 22:18:32 JST; 6min ago
       Docs: https://httpd.apache.org/docs/2.4/
   Main PID: 34396 (apache2)
      Tasks: 55 (limit: 2295)
     Memory: 4.7M
     CGroup: /system.slice/apache2.service
             ├─34396 /usr/sbin/apache2 -k start
             ├─34401 /usr/sbin/apache2 -k start
             └─34402 /usr/sbin/apache2 -k start

 4月 19 22:18:32 ubuntu-server systemd[1]: Starting The Apache HTTP Server...
 4月 19 22:18:32 ubuntu-server apachectl[34390]: AH00558: apache2: Could not re>
 4月 19 22:18:32 ubuntu-server systemd[1]: Started The Apache HTTP Server.
```
ホスト側のブラウザから
http://<仮想マシンIPアドレス>:8080
を開く
この時の8080は先ほど設定した8080ポートです。
うまく接続できると以下画面が表示される。
![スクリーンショット 2022-04-19 22.52.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2281678/421dd263-0f97-6ab4-936c-2350a97cf948.png)
ここで表示された画面を変更する際は仮想マシン上の/var/www/html配下のindex.htmlを変更することで可能。
SwiftUI preview画面が出てこない・・・

<h5>問題発生</h5>
いつも通り開発していたところ、どっかいじってしまったのかキャンバスと呼ばれる、プレビュー表示用のウィンドウ上部に下記のようなエラーが表示されました。

`Cannot Preview in this file – Failed to launch [App Name]`

<h5>解決策</h5>
問題はどうやら、以下のシミュレータを選択ができていない模様。

![スクリーンショット 2022-04-19 22.50.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2516597/2e2a8f15-6f89-9b5e-73f8-f25495ce00a4.png)

そこで、以下を設定してみましょう。
Preferences > location > commandLine tools（ドロップダウン） > xcode13を選択

無事解決できましたでしょうか？


<h5>他の理由</h5>
他には初めてXcodeを使う場合、ライセンスに同意する必要があるようです。

ターミナルでコマンドを実行し、xcodeのパスを設定しましょう。
参考＞https://hodalog.com/swift-ui-xcode-setting/

ではでは。