OmniAICreator/Qiita-1.07M huggingface dataset:
kubeadmを用いたKubernetes再インストールに失敗する

# 問題
Kubernetes再インストールのために`kubeadm reset`後に`kubeadm　init`するが上手くいかない。

```
kubeadm init --pod-network-cidr=10.244.0.0/16
...(中略)...
[kubelet-check] The HTTP call equal to 'curl -sSL http://localhost:10248/healthz' failed with error: Get "http://localhost:10248/healthz": dial tcp 127.0.0.1:10248: connect: connection refused.
[kubelet-check] It seems like the kubelet isn't running or healthy.

        Unfortunately, an error has occurred:
                timed out waiting for the condition

        This error is likely caused by:
                - The kubelet is not running
                - The kubelet is unhealthy due to a misconfiguration of the node in some way (required cgroups disabled)

        If you are on a systemd-powered system, you can try to troubleshoot the error with the following commands:
                - 'systemctl status kubelet'
                - 'journalctl -xeu kubelet'

        Additionally, a control plane component may have crashed or exited when started by the container runtime.
        To troubleshoot, list all containers using your preferred container runtimes CLI.

        Here is one example how you may list all Kubernetes containers running in docker:
                - 'docker ps -a | grep kube | grep -v pause'
                Once you have found the failing container, you can inspect its logs with:
                - 'docker logs CONTAINERID'

error execution phase wait-control-plane: couldn't initialize a Kubernetes cluster
To see the stack trace of this error execute with --v=5 or higher
```
# 原因
dockerとのcgroup driverの不整合により、
kubeletが起動に失敗している。

`journalctl -xeu kubelet` によると、

```
"Failed to run kubelet" err="failed to run Kubelet: misconfiguration: kubelet cgroup driver: \"systemd\" is different from docker cgroup driver: “cgroupfs”
```
Kubernetes v1.21から、kubeadmの標準のcgroupのdriverがcgroupfsからsystemdに変更されたらしい

# 解決策
dockerのdriverを確認する

```
docker info | grep Cgroup
 Cgroup Driver: cgroupfs
 Cgroup Version: 1
```

dockerのdriverをsystemdに変更する

```
 vim /etc/docker/daemon.json
{
  "exec-opts": ["native.cgroupdriver=systemd"],
  "log-driver": "json-file",
  "log-opts": {
    "max-size": "100m"
  },
  "storage-driver": "overlay2"
}
```

daemonをリロードしてdockerを再起動

```
systemctl daemon-reload
systemctl restart docker
docker info | grep Cgroup
 Cgroup Driver: systemd
 Cgroup Version: 1
```

再び、kubeadam initすると今後は成功した。

```
kubeadm init --pod-network-cidr=10.244.0.0/16
```

解決

# 環境

|ソフト	|バージョン|
| ---- | ---- |
|OS	|Ubuntu 20.04.2LTS|
|Docker	|20.10.7|
|kubernetes|v1.22.2|

# 感想
Versionを上げるときは変更事項を確認してから上げる必要があると反省
[Vue] v-if VS v-show かるくまとめる

<h2>２つに共通すること</h2>
どちらも***条件付きレンダリングをされる***ということ。
その条件に当てはまるときのみ表示されます。


```javascript

<div id="app">
  <div v-if="error">
    // errorがtrueのときのみ表示される
  </div>
</div>

```

```javascript

<div id="app">
  <div v-show="error">
    // v-if同様、errorがtrueのときのみ表示される
  </div>
</div>

```


<h2>ちがい</h2>

<h4>v-ifはDOMごと操作</h4>

v-ifは条件に当てはまらないとき、***HTMLから要素ごと消去されます***。

<h4>v-showはcssで操作</h4>

一方で、v-showは条件に当てはまらないとき、***CSSスタイルでdisplay:noneを当てて見えなくさせているだけ**です。HTML要素としては存在しつづけています。


<h4>v-showはelse表示なし</h4>

v-ifは、v-elseが存在し、条件に当てはまらないときに代わりに表示するものを指定できます。
v-showにはこれがありません。


<h2>使い分け</h2>

<h4>v-ifの使い時</h4>

-切り替え頻度が少ないとき
→v-ifは表示し直すたびに要素が作り直されるため

-条件に合わないときに別に表示したいものがあるとき
→v-elseがあるため

<h4>v-showの使い時</h4>

-切り替え頻度が高い時
→v-showはDOMには存在しつづけるため

-条件に合わないときに特別表示したいものがないとき
→v-elseがないため
コードブロックにCSSだけで行番号を表示する

下図のようにコードブロックにCSSで行番号を表示する方法を紹介します。

![CleanShot 2021-10-14 at 13.52.43@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/5fa63ea5-7b35-7ee7-9e96-d51313cd704b.png)


## 前提

CSSで行番号を表示するにあたって、コードブロックのHTMLは行が`<span>`などの要素で表現されている必要があります。

![CleanShot 2021-10-14 at 13.51.51@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/5fe3216c-6344-99c3-77d1-a6464b5edb24.png)

## 行番号を表示するCSS

行番号を表示するCSSは次のようになります。

```css
.code {
  counter-reset: line-number;
}

.code span {
  counter-increment: line-number;
  display: list-item;
  padding-left: 1rem;
  margin-left: 1rem;
}

.code span::marker {
  content: counter(line-number);
  color: #aaa;
}
```

それぞれ重要な箇所を説明します。

まず、`.code span`を見てみましょう。

```css
.code span {
  /* ... */
  display: list-item;
  /* ... */
}
```

この`display: list-item`は行要素の`<span>`を`<li>`相当にするものです。これにより、行はリストタグになり「・」のようなマーカーが表示されます。

リスト要素のマーカーのスタイルは疑似セレクター`::marker`で設定できます。リストマーカーのスタイルを指定するのが次のCSSです。

```css
.code span::marker {
  content: counter(line-number);
  color: #aaa;
}
```

この`content: counter(line-number)`で、リストマーカーを「・」ではなく数字にしています。

## デモ

実際の表示のされかたはCodePenのデモを御覧ください。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="mdMeyRr" data-user="suin" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/suin/pen/mdMeyRr">
  行番号を表示するCSS</a> by suin (<a href="https://codepen.io/suin">@suin</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
【mac OS】Big Surに変更したら注意すること

<h2>cordova でAndroid Studioのエミュレーター動かない問題</h2>

<p>
macでOSをBig Surに変更後、Android Studioのエミュレータを起動して、cordovaと連携してアプリ開発をする場合は注意が必要です。
</p>

```
% cordova run android
 ```

をターミナルで実行すると、

`Installed Build Tools revision 31.0.0 is corrupted. Remove and install again using the SDK Manager.`

というエラーが表示されます。
下記のStackoverflowで記載されているようにSDK versionを変更しても、新たにエラーが生じてしまいます。

https://stackoverflow.com/questions/68387270/android-studio-error-installed-build-tools-revision-31-0-0-is-corrupted


新たなエラーは下記の通りです。

`Could not find tools.jar. Please check that /Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home contains a valid JDK installation.`

実はこの問題は、AppleとJava appletプラグインが原因で生じています。Big Surにアップデート後に新たに自動追加されたjavaが原因となっているようです。
java_homeが正しく設定されていない場合に、このようなエラーが生じます。

```
/usr/libexec/java_home -V
```
ターミナルでJava Versionsのリストを確認し、

```
1 /usr/libexec/java_home -V
2 
3 # This will give an output like:
4 
5 Matching Java Virtual Machines (3):
6 11.0.2 (x86_64) "Oracle Corporation" - "Java SE 11.0.2"  /Library/Java/JavaVirtualMachines/jdk-11.0.2.jdk/Contents/Home
7 1.8.271.09 (x86_64) "Oracle Corporation" - "Java" /Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home
8 1.8.0_201 (x86_64) "Oracle Corporation" - "Java SE 8" /Library/Java/JavaVirtualMachines/jdk1.8.0_201.jdk/Contents/Home
9 /Library/Java/JavaVirtualMachines/jdk-11.0.2.jdk/Contents/Home
```

問題となっている、
`
"Oracle Corporation" - "Java" /Library/Internet Plug-Ins/JavaAppletPlugin.plugin/Contents/Home
`
を削除する必要があります。

```
sudo rm -rf "/Library/Internet Plug-Ins/JavaAppletPlugin.plugin/"
```


https://stackoverflow.com/questions/64856188/ionic-cordova-android-build-error-could-not-find-tools-jar

https://www.talkapex.com/2020/11/sqldeveloper-in-macos-big-sur/
Pythonのエラー集

## import cv2でModuleNotFoundError: No module named 'cv2'

対応するモジュールが入ってないことが原因

```
pip3 install opencv-python
```
で解決

## GoogleColabのセッション切れ対策

```
function ClickConnect(){
  console.log("60sごとに再接続");
  document.querySelector("colab-connect-button").click()
}
setInterval(ClickConnect,1000*60);
```
デベロッパーツール＞コンソールで上記コードを記述して、Enter。
そうすると、60秒ごとに再接続をしてくれます。

※Pythonのエラーではないが...

## Pycharmでpip installできない時の対応方法

Preferences＞Project：xxxxxx＞Python interpreter＞+ボタンから検索して追加
【小ネタ】electron-builder をプロキシ環境下で利用していたら躓いた話

# プロキシ環境下でelectron のビルドをしたい

## エラー内容

electron-builder を利用しようと思って

```bash
npm i -D electron-builder --force
```

と打ったところ、以下のようにエラー出た。

> Get "https://github.com/electron/electron/releases/download/v15.1.2/electron-v15.1.2-win32-x64.zip": dial tcp 52.69.186.44:443: connectex: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond.

## 対策

`~/.npmrc` にプロキシ情報を保存する。

```
proxy=http://ユーザ名:URLエンコード済みのパスワード@プロキシ名
https-proxy=http://ユーザ名:URLエンコード済みのパスワード@プロキシ名

```
TortoiseSVNのオーバーレイアイコン(Windows)が表示されない時の対処法

1. WINDOWSキー＋Rを押して「ファイル名を指定して実行」ウィンドウを呼び出す
2. 「regedit」と入力してエンターキー
3. レジストリエディタが起動するので、この階層まで移動。
　　HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\ShellIconOverlayIdentifiers
4. アプリ毎のアイコンのフォルダを右クリックして「削除」
5. PCの再起動
5分でNFTをOpenSeaで出品する


#概要
ガス代無料でも作成時や、独自通貨への変換で5-6000円かかるところもありましたが、OpenSeaのPolygonを使うことで0円でできました。　CoinCheckなどの口座開設も不要です。
ETHとの違いは、最後に記載しました。


#必要なもの

* chromeブラウザ
* NFT化する画像、動画、３Dデータなど


#wallet作成
売れた時にお金が入る財布です
chromeのアドオンとしてインストールします
https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=ja
![metamask1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514937/0160c04c-f13f-9ed2-bf1c-0a480a607da4.jpeg)

![metamask2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514937/30204761-3c94-871a-4c1c-b735952dd719.jpeg)


![metamask3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514937/a040ea8f-17c3-e62f-78bf-2be0372df0c8.jpeg)

:::note info
バックアップフレーズは、大切に保管してください
:::


![metamask42.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514937/c993e074-550b-fa70-d008-3ad017349b67.jpeg)



:::note info
メモしたバックアップフレーズの通りに、キーワードを並べます
:::

:::note info
最後にでてきたIDを保存してください
:::

#NFT作成
##openseaでwallet登録

https://opensea.io/?locale=ja

:::note warn
フィッシングサイトがあるようです、ご注意ください！
:::

![opensea1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514937/2e584546-ba6d-d1ae-6971-d348c671c920.jpeg)

![opensea2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514937/55cbcaaa-17f3-54bb-b201-0b3345a11ec7.jpeg)

:::note info
walletのIDをコピーしてください
:::

##collectionの作成
なしでも作れますが、artなどカテゴリー設定ができ検索で見つけやすくなります
ヘッダーメニュー　My Collection から Create a collection

![スクリーンショット 2021-10-14 11.29.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514937/05d752b4-8f4e-b4bc-297b-a4a350d0954e.png)


* Logo image : 画像をドラッグしてください
* Name : 名前
* Description : 説明
* Category : カテゴリー
* Links : 詳細ページなどの外部リンク
* Royalites :  ロイヤリティー
* Blockchain : Polygon 

:::note info
Polygonでないとガス代がかかります
:::

##NFT作成
CollectionページからAdd Item または、TOP から作成

![スクリーンショット 2021-10-14 9.55.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514937/fa524caa-bccc-44b0-e32d-a36bf71f9191.png)

* New Item  : NFT化する画像をドラッグしてください
* Name : 名前
* External Link  : 詳細ページなどの外部リンク
* Description  : 説明

![スクリーンショット 2021-10-14 9.56.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514937/6259f282-b3e5-1ede-fa30-9a8155d2cdf7.png)

* Supply  : 供給数
* Blockchain  : Polygon  
* 
:::note info
Polygonでないとガス代がかかります
:::

* Freeze metadata  : ガス代が必要なので無記入

＃販売

![スクリーンショット 2021-10-14 10.56.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/514937/295871cf-56d0-6e5d-2098-1447859019f8.png)
価格を決めて販売スタートです
手数料が2.5％かかります


#ETHとの違い
opensea-jsからアクセスできない
オークションできない
polygonへ変換しないと購入できないため、気軽に買えない（買われない）
Carbonで次の特定曜日の日付を取得する方法

最近Carbonのnext/previousを見つけてテストコードや曜日に関連した処理を作るときにに便利そうだったのでメモです！

## 特定の日付から次の〇曜日を取得する

```php
$today = Carbon::parse('2021/10/14');
// 2021/10/18(Mon)
dump($today->copy()->next(Carbon::MONDAY)->format('Y/m/d(D)'));
// 2021/10/19(Tue)
dump($today->copy()->next(Carbon::TUESDAY)->format('Y/m/d(D)'));
// 2021/10/20(Wed)
dump($today->copy()->next(Carbon::WEDNESDAY)->format('Y/m/d(D)'));
// 2021/10/21(Thu)
dump($today->copy()->next(Carbon::THURSDAY)->format('Y/m/d(D)'));
// 2021/10/15(Fri)
dump($today->copy()->next(Carbon::FRIDAY)->format('Y/m/d(D)'));
// 2021/10/16(Sat)
dump($today->copy()->next(Carbon::SATURDAY)->format('Y/m/d(D)'));
// 2021/10/17(Sun)
dd($today->copy()->next(Carbon::SUNDAY)->format('Y/m/d(D)'));
```

## 特定の日付から前の〇曜日を取得する
```php
$today = Carbon::parse('2021/10/14');
// 2021/10/11(Mon)
dump($today->copy()->previous(Carbon::MONDAY)->format('Y/m/d(D)'));
// 2021/10/12(Tue)
dump($today->copy()->previous(Carbon::TUESDAY)->format('Y/m/d(D)'));
// 2021/10/13(Wed)
dump($today->copy()->previous(Carbon::WEDNESDAY)->format('Y/m/d(D)'));
// 2021/10/07(Thu)
dump($today->copy()->previous(Carbon::THURSDAY)->format('Y/m/d(D)'));
// 2021/10/08(Fri)
dump($today->copy()->previous(Carbon::FRIDAY)->format('Y/m/d(D)'));
// 2021/10/09(Sat)
dump($today->copy()->previous(Carbon::SATURDAY)->format('Y/m/d(D)'));
// 2021/10/10(Sun)
dd($today->copy()->previous(Carbon::SUNDAY)->format('Y/m/d(D)'));
```

Carbon便利ですね😊
ページプールと非ページプール

Windowsのメモリのお話です。

<dl>
  <dt>ページプール</dt>
  <dd>ページング可能なメモリ領域</dd>
  <dt>非ページプール</dt>
  <dd>ページング不可能なメモリ領域</dd>
</dl>
---

<dl>
  <dt>ページングとは？</dt>
  <dd>
仮想的なメモリ空間を作る<strong>仮想記憶の技術</strong>。<br>
仮想記憶の実体は主記憶装置（実記憶）と補助記憶装置を合わせて作ったメモリ空間。<br>
ページングではプログラムを「<strong>ページ</strong>」という単位（固定長）に分割して管理。<br>
実行に必要なページだけを実記憶に読み込ませることで（デマンドページング）、<br>
実記憶の容量以上の領域を提供できる。
　</dd>
</dl>
The forked VM terminated without saying properly goodbyeした時の対処方法

### 事象
mvn testでJUnitテスト実行失敗。下記のエラーログがでた。

> The forked VM terminated without saying properly goodbye. VM crash or System.exit called

#### "forked"とは？ 

「フォークする」＝ テストするためにJVM内にプロセスを生成すること

mavenでJUnitテスト実行するときには「maven-surefire-plugin」というプラグイン経由で実行する(のが普通だと思ってる)のだが、テスト用に生成するプロセス数は↓のようにforkCountで制御できる。

```xml:例) フォークする最大プロセス数を「3」に設定する
<project>
    <build>
        <pluginManagement>
            <plugins>
                <plugin>
                　<groupId>org.apache.maven.plugins</groupId>
                　<artifactId>maven-surefire-plugin</artifactId>
                　<configuration>
                　　<forkCount>3</forkCount>
                　　<argLine>-Xmx1024m</argLine>
                　</configuration>
                </plugin>
            </plugins>
        </pluginManagement>
    </build>
</project>
```

---
### 原因

1つのプロセスでさばくにはテスト負荷が高すぎて死んだ。

> **The default setting is forkCount=1**/reuseForks=true, which means that **maven-surefire-plugin creates one new JVM process to execute all tests in one Maven module.**
https://maven.apache.org/surefire/maven-surefire-plugin/examples/fork-options-and-parallel-execution.html#

---
### 対処方法

forkCountのデフォルト値は「1」なので、これを「3」に変更して実行したらmvn testうまくいった(´_ゝ｀)

---
### 参考

https://at-sushi.com/pukiwiki/index.php?Maven%20%A4%E1%A4%C3%A4%C1%A4%E3%A4%BF%A4%AF%A4%B5%A4%F3%A5%C6%A5%B9%A5%C8%A4%F2%A4%B7%A4%C6%A5%E1%A5%E2%A5%EA%C9%D4%C2%AD%A4%CB%A4%CA%A4%EB%BB%FE%A4%CE%C2%D0%BA%F6%20%28Covertura%2C%20Surefire%29

https://stackoverflow.com/questions/23260057/the-forked-vm-terminated-without-saying-properly-goodbye-vm-crash-or-system-exi
PL/SQLの新しいFOR LOOP構文を試す(2)（Oracle Database 21c)

Oracle Database 21c に追加された FOR LOOP 構文の新機能のうち、コレクション型に対する構文を試します。

# 配列の初期化
従来は数値をインデックスに使った連想配列の初期化は以下のように記載する必要がありました。

```
DECLARE
  TYPE tlist1 IS TABLE OF INTEGER INDEX BY PLS_INTEGER;
  lst1 tlist1;
  ind PLS_INTEGER;
BEGIN
  lst1 := tlist1(1=>10, 3=>30, 5=>50, 7=>70, 9=>90);
...
```

Oracle Database 21c では FOR 文を使って以下のように記載できます。

```
DECLARE
  TYPE tlist1 IS TABLE OF INTEGER INDEX BY PLS_INTEGER;
  lst1 tlist1;
BEGIN
  lst1 := tlist1(FOR i IN 1 .. 9 BY 2 => i*10);
```

# VALUES OF 句
Oracle Database 21c では連想配列についても FOR 文で記述できるようになりました。
従来のバージョンでは以下のように記述が必要でした。

```SQL:BEFORE_Oracle19c
DECLARE
  TYPE tlist1 IS TABLE OF INTEGER INDEX BY PLS_INTEGER;
  lst1 tlist1;
  ind PLS_INTEGER;
BEGIN
  lst1 := tlist1(1=>10, 3=>30, 5=>50, 7=>70, 9=>90);

  ind := lst1.FIRST;
  LOOP
    IF ind IS NOT NULL THEN
      DBMS_OUTPUT.PUT_LINE(ind || ' = ' || lst1(ind));
    ELSE
      EXIT;
    END IF;
    ind := lst1.NEXT(ind);
  END LOOP;
END;
/
```

Oracle Database 21c の FOR 文では、コレクションの値を取得するために FOR 文に VALUES OF 句を指定します。

```SQL:VALUES_OF
DECLARE
  TYPE tlist1 IS TABLE OF INTEGER INDEX BY PLS_INTEGER;
  lst1 tlist1;
BEGIN
  lst1 := tlist1(FOR i IN 1 .. 9 BY 2 => i*10);

  FOR val IN VALUES OF lst1 LOOP
    DBMS_OUTPUT.PUT_LINE(val);
  END LOOP;
END;
/
10
30
50
70
90
```

# INDICES OF 句
コレクションの添え字を FOR 文で取得する場合には INDICES OF 句を指定します。

```SQL:INDICES_OF
DECLARE
  TYPE tlist1 IS TABLE OF INTEGER INDEX BY PLS_INTEGER;
  lst1 tlist1;
BEGIN
  lst1 := tlist1(FOR i IN 1 .. 9 BY 2 => i*10);

  FOR ind IN INDICES OF lst1 LOOP
    DBMS_OUTPUT.PUT_LINE(ind || ' = ' || lst1(ind));
  END LOOP;
END;
/
1 = 10
3 = 30
5 = 50
7 = 70
9 = 90
```

# PAIRS OF 句
コレクションの添え字と値の両方を FOR 文のイテレータとして取得する場合は PAIRS OF 句を指定します。

```SQL:PAIRS_OF
DECLARE
  TYPE tlist1 IS TABLE OF VARCHAR2(100) INDEX BY VARCHAR2(100);
  lst1 tlist1;
BEGIN
  lst1 := tlist1('key1'=>'val1', 'key2'=>'val2', 'key3'=>'val3');

  FOR ind1, ind2 IN PAIRS OF lst1 LOOP
    DBMS_OUTPUT.PUT_LINE(ind1 || ' = ' || ind2);
  END LOOP;
END;
/
key1 = val1
key2 = val2
key3 = val3
```
Node.jsの基本

# はじめに
Node.jsの基本を備忘録として残しておきます。

# 目次
1. [Webアプリケーションの基本の３ステップ](#Chapter1)
1. [EJSテンプレートの使い方](#Chapter2)
1. [ルーティングの基本](#reference)

<!-- 各チャプター -->
<a id="#Chapter1"></a>
# Webアプリケーションの基本の３ステップ

- requireでhttpオブジェクトを用意する。

```js
const http = require('http');
```

- createServerでサーバーを作る。

```js
let server = http.createServer(ルーティング処理などを書いた関数);
```

- listenで待ち受け開始する。

```js
server.listen(3000);
```

<a id="#Chapter2"></a>
# EJSテンプレートの使い方
Webページの画面は基本的にEJSなどのテンプレートエンジンを利用します。
fsのreadFileSyncで読み込み、ejs.renderでレンダリングし、その結果をwriteで書き出す。

```js
const fs = require('fs');
const ejs = require('ejs');
const index_page = fs.readFileSync('./index.ejs', 'utf8');
```

```js
var content = ejs.render(index_page, {
                 title: "Index",
                 content: "これはIndexページです。",
              });
response.writeHead(200, { 'Content-Type': 'text/html' });
response.write(content);
response.end();
break;
```

<a id="#reference"></a>
# ルーティングの基本

request.urlの値を取り出し、url.parseでパースして得られたオブジェクトから「pathname」を取り出し、その値に応じて処理を作成す。


```js
const url = require('url');
let url_parts = url.parse(request.url);

switch (url_parts.pathname) {

    case '/':
      var content = ejs.render(index_page, {
        title: "Index",
        content: "これはIndexページです。",
      });
      response.writeHead(200, { 'Content-Type': 'text/html' });
      response.write(content);
      response.end();
      break;

    case '/other': 

・・・略・・・
```

# 全文コード

```js
const http = require('http');
const fs = require('fs');
const ejs = require('ejs');
const url = require('url');

const index_page = fs.readFileSync('./index.ejs', 'utf8');
const other_page = fs.readFileSync('./other.ejs', 'utf8');
const style_css = fs.readFileSync('./style.css', 'utf8');

var server = http.createServer(getFromClient);

server.listen(3000);
console.log('Server start!');

// ここまでメインプログラム==========

// createServerの処理
function getFromClient(request, response) {

  var url_parts = url.parse(request.url);
  switch (url_parts.pathname) {

    case '/':
      var content = ejs.render(index_page, {
        title: "Index",
        content: "これはIndexページです。",
      });
      response.writeHead(200, { 'Content-Type': 'text/html' });
      response.write(content);
      response.end();
      break;

    case '/other': //★追加
      var content = ejs.render(other_page, {
        title: "Other",
        content: "これは新しく用意したページです。",
      });
      response.writeHead(200, { 'Content-Type': 'text/html' });
      response.write(content);
      response.end();
      break;

    default:
      response.writeHead(200, { 'Content-Type': 'text/plain' });
      response.end('no page...');
      break;
  }
}
```
ウェブページは作れませんでした　【RESTART】

#ウェブページは作れませんでした（結論）
「progate」にて学習すること約1か月
「Web開発パス（Node.js)」を一通りこなしてみて
とりあえず何かウェブページ作ってみるかと思った

結論、__どうやって作ればいいのか解らず__…

#学習プロセスの見直し

「progate」だけ行ってしまうと__自分の場合は__
__インプット__のみになってしまい、定着しないと反省
そこで以下のようなプロセスの仮説を立てて実行することにした
<img width=500 alt="フェーズガイド_全体.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792140/77ae9edf-eec1-2df9-78df-fdabd6eba70e.png">

#学習プロセスのフェーズ詳細

###フェーズ１_学習
<img width=500 alt="フェーズガイド_学習.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792140/685a1021-f04a-f720-53ed-ea7ff6cd449a.png">
<img width=180 alt="progate_logo.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792140/eb99a1fc-82ec-0027-3591-7c172a41972d.png">
これまでと同じように「progate」のカリキュラムをこなすフェーズ

###フェーズ２_記録
<img width=500 alt="フェーズガイド_記録.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792140/856451cc-ff8a-9093-ba1b-a69c94414d89.png">
<img width=50 alt="テキスト.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792140/ed6e3710-8562-43c6-35ff-f9cfe4fe0af4.png">
「progate」で書いたコードをテキストファイル化して印刷、手書きで
メモ等を加える（昭和生まれなのでアナログ手法）

###フェーズ３_実践
<img width=500 alt="フェーズガイド_実践.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792140/19a3ed04-9f46-eadd-b791-0d4e09114a2c.png">
<img width=150 alt="codepen_logo.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792140/997eee71-1537-6225-d921-41ea4d76f2db.png">
手書きメモを加えたテキストファイルを参考にして「Codepen」で作成する

###フェーズ４_発信
<img width=500 alt="フェーズガイド_発信.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792140/1faa1b99-66ae-6bb4-2deb-e6e28ab6de70.png">
<img width=50 alt="キータ.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792140/0e1611f7-6c79-34ef-6ed2-e8d8b3ba5374.png"><img width=120 alt="qiita_logo.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792140/b23e365c-636d-305c-4f9f-96db501205a8.png">
作成プロセスを言語化してQiitaの記事を作成する

#人間は楽な方に流れる
計画を立ててプロセスを設定しないと
どうしても楽なインプットだけに偏ってしまう
それに気付かされた１か月だったと言える

#過去記事
https://qiita.com/yuta-proto-biz/items/df0fcc3eae722e944101

https://qiita.com/yuta-proto-biz/items/ce66593abbf6e4f11dff

https://qiita.com/yuta-proto-biz/items/b27ce48596a995ac7058

https://qiita.com/yuta-proto-biz/items/89f8bee634d99067dbeb
iOS Safari から、ショートカットアプリでファイルメーカーに URLとタイトルを記録する

## やりたかったこと
　iOS の Safari で見つけたサイトのURLとタイトルを FileMaker Go にレコードとして記録したかったので、最初は Safari で URL を長押し → コピー、FileMaker Go 19 を起動して記録用のファイルを開き、登録スクリプトを起動するボタンを押す、という手順で記録していた。
　登録スクリプトでは、クリップボードのURLからページデータを読み込んで、```<title>```タグからページタイトルの情報を得て、URLとタイトルをそれぞれのフィールドにセットするようにしている。
　これでも良いのだが、Safariの共有ボタンでショートカットアプリを起動し、FileMakerファイルのスクリプトを実行させることができることを知ったので、試してみた。

## 実現した手順
　Safari で記録したいサイトを開いている状態で、下にある共有ボタン（画像の赤丸）をタップ。
![ショートカット起動1.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16491/b9e62ca5-42bd-0ebd-b2ea-6118b99547e5.jpeg)
　表示されるダイアログをスクロールして下の方に、実行したいショートカットの名前を見つけてタップ。
（ここでは「お気に入りサイト登録」という名前）
![ショートカットkidou2.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16491/5f7a7b8c-c0e7-ca0c-dc8b-26e49e168a75.jpeg)
　そうするとFileMaker Goで該当ファイルを開き、指定したスクリプト（「URL新規登録」）を実行して処理完了。

## ショートカット実現への手順
### FileMaker 側で設定すること
　ファイルメーカーで作成したファイルの、実行したいスクリプトをショートカットから実行できるようにする。
具体的には、スクリプトワークスペースを開き、ショートカットから実行させたいスクリプト名を右クリックして、出てくるメニューから「ショートカットの登録を有効にする」を選択する。
![FileMaker設定1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16491/ffc5782a-8ed8-c310-1685-5fc7e851015c.png)
　次に、そのファイルをURLスキームから実行できるように設定する。
具体的には、ファイルの管理メニューからアクセス権を開き詳細の拡張アクセス権のダイアログで、キーワード：fmurlscript を選択、編集して「完全アクセス権」をセットする。
![FileMaker設定2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16491/50a7af6f-d2f1-cb1a-f2d6-c01eb8c34f99.png)
### ショートカットで登録用ショートカットを作る
　ショートカットを作る前に、先程作成したファイルをiOS 機器に転送して一度 FileMaker Go で開いておきます。（重要）
　iOS のショートカットアプリを起動し、＋ボタンで新規のショートカットを作り、名前を決める。（この例では「お気に入りサイト登録」とした。
　名前を入力したら、名前の右にある設定ボタンを押して、出てくるダイアログで「共有シートに表示」のボタンをオンにする。
　そうすると、下の画像のように「『共有シート』 から 『任意』 の入力を受け取る...」の機能が追加されるので、『任意』をクリックして、URL を残して他の項目はオフにする。
続いて、ショートカットの入力をクリップボードにコピーというアクションを追加。
次にアクションの追加でFileMaker Go19」を選んで、「FileMaker Go スクリプトを実行」を追加。
「実行するスクリプトを含むファイルを選択します」の後の「ファイル」をクリックすると、先程開いていたファイルの名前が出てくるので、それを選択します。同様にしてスクリプトを設定します。
（ファイル名が出なくて、検索フィールドに文字を入れると必要なオプションが無いというエラーが出る場合は、FileMaker側の手順がうまくいっていないことが考えられます。）
できたショートカットの手順は下の画像のようになっているはずです。（引数は指定しません）
![ショートカット.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16491/bfc79827-73fe-e70c-ea89-47c2c8989a93.jpeg)
## 補足
#### 引数渡しにしない理由
　クリップボードを使わず、引数で渡す方法もありますが、あえてクリップボードを経由してURLを渡しているのは、このファイルをMac側で実行したい時、ショートカットアプリが使えないので、SafariでURLをコピーしてFileMakerのスクリプトを実行できるようにしたかったからです。
#### URLスキームでも実行できる
　FileMaker側の手順で設定したファイルは、ショートカットだけでなく、URLスキームで実行できるので、次のようにURLを発行すると、同様の動きができるはずです。ですので、Mac側でも　Safariの機能拡張やAppleScriptで FileMaker のスクリプトを実行させることができるはずです。
```fmp://$/お気に入りサイト.fmp12?script=URL新規登録```
ABC138 C - Alchemist から学んだ

https://atcoder.jp/contests/abc138/tasks/abc138_c

![abc138_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/ad745919-c267-c3c1-358d-f4b5a920c639.png)
![abc138_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/45443e11-7d1d-4c06-5306-a29b3acf6a78.png)
![abc138_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/82885a04-1d9a-2c98-73da-6f17b80bd1c4.png)

分からないので回答を見た。

https://www.youtube.com/watch?v=lWETOlGiuaI

なるほど。

悪かったところ。
以下のように考えていた。

```bad_image.py
#  〇
#  /\
# 〇 〇
# /\ /\
#〇〇〇〇
```

下の階層から上に行くにしたがって割る係数が大きくなる。
だから、**小さい値に係数が集中するツリー**を考える必要があった。
つまり、以下のツリーが最適

```good_image.py
#   〇  
#   /\
#  〇 \
#  /\  \
# 〇 \  \
# / \ \  \
#〇 〇 〇 〇
#↑コレ
```

以上のように考えると、
**1/2 が掛けられる回数が左から昇順となっていることが分かる**
よって与えられた配列をソートしておけば、配列中、比較的大きい値には 1/2 が掛ける回数は最小になる。
なるほど。勉強になりました。

```abc138c.py
N = int(input())
V = list(map(int,input().split()))

V.sort()
ans = 0
for i in range(N):
    if i == 0:
        ans = V[0]
    else:
        ans = (ans+V[i])/2

print(ans)
```

あともう一つ。
演算に /2 を使ったことだ。
割り算の回数が 50程度の場合は -5 乗 程度の誤差は
問題にはならないということだ。
blenderのクォータニオンについて

　blenderのクォータニオン表示に慣れたいと思ったのでまとめてみます。まず、$w,x,y,z$の意味について・・
## 各変数の意味
　これは軸周りの回転表示と関係があります。$w,x,y,z$に値を入れたとき、これはまず、

```math
  x^2+y^2+z^2+w^2=1
```
を満たすように正規化されます。そのうえで、

```math
w=\cos\left(\frac{\theta}{2}\right),~x=\alpha\sin\left(\frac{\theta}{2}\right),~y=\beta\sin\left(\frac{\theta}{2}\right),~z=\gamma\sin\left(\frac{\theta}{2}\right)
```
となるような$\theta,a,b,c$が求められ（${\alpha}^2+{\beta}^2+{\gamma}^2=1$）、このとき回転は軸ベクトル$(\alpha,\beta,\gamma)$の周りの$\theta$（ラジアン）の回転となります。つまり軸周りの回転表示と関連していて、それを別の形であらわしたものとも言えます。

## 四元数
　ここで四元数の計算について簡単に説明すると、複素数のようなもので、

```math
  ij=-ji=k,~~jk=-kj=i,~~jk=-kj=i,~~i^2=j^2=k^2=-1
```
を満たすような$w+xi+yj+zk$（$w,x,y,z$は実数）という数のような感じのものです。計算は実数がすべての文字と掛け算で可換というだけで、複素数と同じように計算できますが、掛け算の順序により結果が異なるので注意が必要です（実は行列演算で完全に表現できる）。

## 回転
　この表示がどういう意味を持つかというと、オブジェクトの各頂点の位置とか軸などがどのように回転するかがこれを使って計算できるということです。たとえばその位置というのを$p=(a,b,c)$として、

```math
  p=ai+bj+ck
```
という四元数であらわします。このとき、$q=w+xi+yj+zk$に対し、共役：

```math
\bar{q} = w-xi-yj-zk
```
を考え、

```math
p' = q\cdot p\cdot \bar{q}
```
という積を取ります。これは必ず

```math
p'=a'i+b'j+c'k~~~(a',b',c'は実数)
```
という形になり、変換の結果得られる位置は$(a',b',c')$となります。

## ローカル軸の成分を計算する
　これを使うと、オブジェクトのローカル軸（x,y,z軸）が回転によりどんなベクトルになるのかを計算で求めることができます。それには$p$として3つの単位ベクトルを取ればいいです。具体的には、

```math
qi\bar{q},~~~qj\bar{q},~~~qk\bar{q}
```
を計算すれば出せます。得られる結果は、$w,x,y,z$を用いた計算式で、

```math
(1,0,0) \mapsto (w^2+x^2-y^2-z^2,~2(xy+zw),~2(xz-yw)),\\[8pt]
(0,1,0) \mapsto (2(xy-zw),~w^2-x^2+y^2-z^2,~2(xw+yz)),\\[8pt]
(0,0,1) \mapsto (2(xz+yw),~2(yz-xw),~w^2-x^2-y^2+z^2)
```
となります。

# おわりに
　代数計算で軸方向ベクトルの成分が出せるので、内積計算に使うなど、いろいろ応用できそうです。

# 追記
　これ実は平行移動と回転で不変なグラデーションを実現しようとして調べてたのですが、VectorTransformというノードを使えば実現できると知ったので無駄になってしまいました（ドライバとかも組み合わせたのに・・）。でも四元数やドライバの知識は役に立ちそうです（ドライバの応用範囲凄そう）。どうするのかというと、
[![VectorTransform.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/437349/dc4f93fe-c1d5-65f0-c16b-3a236dea9f41.png)
](こうする)ジオメトリーの座標から原点の座標を引いて原点ベースのジオメトリーの座標のベクトルを作り、それをオブジェクト座標に変換して、あとは(0,0,1)と内積を取ればどんな向きでもオリジナルな向きに対応したグラデーションになってくれます（座標を使わない色付けならUVがあるのでそっちでも、いろんな選択肢があるということで・・）。いろんなノードのこともっと勉強しないとですね・・。
【Laravel】bladeファイルでReact側に変数を渡す

#はじめに
Laravelで一部分をReactでSPA化した際、APIを使うまでもなさそうな変数をグローバル変数として渡していました。
一応、備忘録として残します。

#実装
`script`内で`const access_token = "{{ $access_token }}"`のように値を渡します。

```php
@section('main')
    <link href="{{ asset('/css/app.css') }}" rel="stylesheet" type="text/css">
    <script>
        const access_token = "{{ $access_token }}"
        const api_url = "{{ url('/graphql') }}";
        const app_store_url = "{{ env('APP_STORE_URL') }}"
        const pet_age = @json(config('define.pet.age'));
    </script>
    <div id="app"></div>
    <script src="{{asset('/js/app.js')}}"></script>
@stop
```
以下のような連想配列(および配列)を渡す際には、`@json`でJSONに変換して渡します。

```php:pet.php
<?php
return [
    'age' => [
        'dog' => 5,
        'cat' => 10,
        'bird' => 8,
    ]
];
```
React側で変数を呼び出す際、TypeScriptを使っているとWarning`Can't find name ~`がでるので、新しく変数を用意して`// @ts-ignore`をつけてあげます。

```ts:index.ts
const Component = () => {
  // @ts-ignore
  const petAge = pet_age
  ...
}
```

#参考資料

https://niwacan.com/1641-laravel-js/
face-api.jsの値を安定させるため、取得し続ける連続データの平均値を出した

#face-apiで取得した値が安定しない。

いま表情で動かすゲームをつくっていて、
face-api.jsを使って、表情データを取得するようにしているのですが、
ランドマークの値ってなかなか安定しないんですよね。

じゃあ、どうするかと考えて、
取得した連続10個のデータの平均値を出すことで、
ある程度安定させてみました。

#連続した10個のデータの平均値を出す

10個のデータは常に更新されていくので、
引数を配列にしてました。

```javascript
 function getAverage(array){
    let total = 0;
    let average = 0;
    for (let i = 0 ; i < array.length ; ++i) {
      total += array[i];
      average = total / array.length;
    }
    return average;
  }

```

ここまでが平均を出す関数。

```javascript

  let array = [0 , 0];

  function render() {
    faceapi.detectSingleFace( 
      video,
      options
    ).withFaceLandmarks()
     .then((result) => {
       let mouseDistance = Math.abs(result.landmarks.positions[63].y - result.landmarks.positions[67].y);
       array.push(mouseDistance);
       if (array.length > 10) {
         array.shift(); //10件を超えたら配列の先頭の値を削除
       }
       console.log(array);
       let average = getAverage(array);
       console.log(average);

```
そして、こちらが顔のランドマークから取得した
最新10個の連続データの平均値を出すまでのところです。

配列の最後尾にどんどん値を追加していきつつ、
11個目のデータは古いものから削除していくようにしました。

これでできました。


#自分の備忘録として

プログラミングを学んでもすぐに忘れてしまうので、
自分の備忘録としても残しておきます。
WSL上でdocker-composeを使ってPostgreSQLのサーバーを作るまでに躓いたこと

# はじめに

[こちらの記事](https://qiita.com/penpenta/items/fecb85dc103e00c317a9)の写経をしているとdocker-compose周りがWSL上にあるのでつまづきました｡解決法をメモ書きしておきます｡

# docker-composeを使えるようにする

`docker-compose`を`apt-get`でインストールしましたが､デーモンが起動していなかったため､`docker-compose`が実行できませんでした｡以下のコマンドを入力してデーモンを立ち上げます｡

```
sudo cgroupfs-mount
sudo usermod -aG docker $USER
sudo service docker start
```

# docker-compose.ymlを用意する

内容は[こちらの記事](https://qiita.com/penpenta/items/fecb85dc103e00c317a9)のものと同じです｡今後の作業で利用するユーザー名やパスワードなどは同じ階層にある.envファイルに書かれているものが使われます｡

# DBの確認

ブラウザから`localhost:80`に接続し､PostgreSQLにログインします｡このとき､.wslconfigで以下のように指定してあります｡

```
[wsl2]
memory=8GB
swap=0
localhostForwarding=True
```

特に重要なのが3行目の`localhostForwarding=True`です｡これによりポートフォワーディングを行っています｡この設定により､ホストOSのブラウザから`localhost:80`でPosgreSQLにアクセスすることができるようになります｡

ここで躓いたのがサーバーを作成する際の｢ホスト名/アドレス｣に入力する内容です｡ここにはPostsqlサーバーへのIPアドレスを入力する必要があります｡このIPアドレスは`docker inspect [PostgreSQLのコンテナID]`のNetworkSettings->Networks->Gatewayに書かれているものを使えば接続することができます｡`[PostgreSQLのコンテナID]`は`docker ps`で取得できます｡

# おわり

ほとんど[こちらの記事](https://qiita.com/penpenta/items/fecb85dc103e00c317a9)を写経したときの日記になってしまいましたが､同じように困っている方の参考になれば幸いです｡

# 参考文献

docker-composeを使うきっかけになった記事: [PythonのフレームワークFlaskを使用してWebアプリ作成の物語（３）Docker登場　DBの準備](https://qiita.com/penpenta/items/fecb85dc103e00c317a9)

dockerのデーモンの起動方法: [WSLのdocker daemonを自動起動させる](https://qiita.com/forest1/items/ab6d8b345653c614229b)
Markdownのコードでバッククオート(`)を表示する方法

Markdownのコードとしてバッククォート(バックティック)を表示する方法を紹介します。

Markdownでは、コードは`` ` ``で囲むと`<code>`タグになります。また、```` ``` ````で囲んだブロックはコードブロックになります。そのため、バッククォートを表示しようとなると、Markdownの記法と衝突してしまって、うまく表示できない問題があります。

# うまく行かない例

次の書き方では、コードとしてバッククォートを表示できません。

```markdown
JavaScriptではテンプレートリテラルに```を用います。
```

表示は次のようになっていまいます。

> JavaScriptではテンプレートリテラルに```を用います。

バックスラッシュでエスケープしてもダメです。

```markdown
テンプレートリテラルは`\``を用います。
```

> テンプレートリテラルは`\``を用います。

# Markdownのコードでバッククォートを表示する方法

Markdownのコードとしてバッククォートを表示するには、いくつか方法があります。それぞれの方法で、ウェブサービスやMarkdownパーサーが対応しているものとそうでないものがあるので、どの方法が使えるかはお使いの環境で試して下さい。

## コードの場合

インラインコードで`` ` ``を表示する方法です。

### 方法1: `<code>`タグを使う

HTMLの`<code>`タグが使えるMarkdownパーサーでは、`<code>`タグでバッククォートを囲むと表示できます。

```markdown
テンプレートリテラルは<code>`</code>を用います。
```

> テンプレートリテラルは<code>`</code>を用います。

### 方法2: ダブルバッククォートを使う

ダブルバッククォート``` `` ```で囲んだバッククォートはそのまま表示できます。注意点として、コードの前後には半角スペースが必要です。

```markdown
テンプレートリテラルは`` ` ``を用います。
テンプレートリテラルには、`` `${式}` ``のように文字列上で式展開もできます。
```

> テンプレートリテラルは`` ` ``を用います。
> テンプレートリテラルには、`` `${式}` ``のように文字列上で式展開もできます。

### 各環境の対応状況

環境 | `<code>` | ダブルバッククォート
---|:---:|:---:
Qiita | ✅ | ✅
GitHub | ✅ | ✅
esa.io [^esa.io] | ✅ | ✅
Zenn [^Zenn] | ❌ | ✅
HackMD [^HackMD] | ✅ | ✅
GitLab [^GitLab] | ✅ | ✅

## コードブロックの場合

コードブロック内で```` ``` ````を表示する方法です。たとえば、MarkdownでMarkdownのサンプルコードをコードブロックに出す場合に役立ちます。

### 方法1: トリプルチルダを使う

トリプルチルダ`~~~`を使うと、トリプルバッククォートとの衝突が避けられます。

![carbon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/32375e80-8d5a-56aa-d9de-8b7331e0908e.png)

GitHub上での表示:

![CleanShot 2021-10-14 at 10.15.46@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/20b66cb0-84c5-c915-4c32-39d60ac80ec2.png)

### 方法2: バッククォートを4つを使う

バッククォート4つ````` ```` `````を使うと、バッククォート3つをコードブロックに表示できます。この方法はQiitaでは使えません。

![carbon (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/d4dd5245-5ad8-7f72-4cc3-051fe01a2863.png)

GitHub上での表示:

![CleanShot 2021-10-14 at 10.15.46@2x.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/889/20b66cb0-84c5-c915-4c32-39d60ac80ec2.png)

### 方法3: インデントする

コードブロックにしたいところをインデントする方法です。この場合、シンタックスハイライトのための言語指定ができないデメリットがあります。

```markdown
Markdownではトリプルバッククォートでコードブロックを表現します:
    
    ```markdown
    // code
    ```
```

> Markdownではトリプルバッククォートでコードブロックを表現します:
>
>     ```markdown
>     // code
>     ```

### 各環境の対応状況

環境 | `~~~` | 4バッククオート | インデント
---|:---:|:---:|:---:
Qiita | ✅ | ❌ | ✅
GitHub | ✅ | ✅ | ✅
esa.io [^esa.io] | ✅ | ✅ | ✅
Zenn [^Zenn] | ✅ | ✅ | ✅
HackMD [^HackMD] | ✅ | ✅ | ✅
GitLab [^GitLab] | ✅ | ✅ | ✅

<!--脚注-->

[^esa.io]: esa - 自律的なチームのための情報共有サービス https://esa.io/
[^Zenn]: Zenn｜エンジニアのための情報共有コミュニティ https://zenn.dev/
[^HackMD]: HackMD - Collaborative Markdown Knowledge Base https://hackmd.io
[^GitLab]: GitLab - Iterate faster, innovate together https://gitlab.com/
【都度更新】使ってみたいライブラリ

Githubトレンドを見て満足するだけで毎回おわっちゃうから気になったライブラリをメモしていきます。

# cube.js
アナリティクスの分析APIプラットフォーム
バックエンド立ててデータ返すAPI等々を簡単にしてくれ、フロントでそのデータを取得し、グラフレンダリングするまでの簡単なチュートリアルもある

https://github.com/cube-js/cube.js

# Prisma
オープンソースのORM
バックエンドをNodeにするときに使ってみる

https://www.prisma.io/docs/concepts/overview/what-is-prisma

# vue-awesome-swiper
Vue向けのWebでスワイプを簡単に実装できるライブラリ
Tinderライクなアプリ作る際に便利そう

https://github.surmon.me/vue-awesome-swiper/

# ionic-framework

クロスプラットフォームフレームワーク、vanillajsやjs frameworkを使用して、モバイルアプリを構築できるライブラリ
パフォーマンスも良さげ（正直良くわからない）
iPhoneの生体認証やApplePayとかにも対応しているっぽい気になる

https://ionicframework.com/

# tiptap
よくブログとかで見る自分で太字とか箇条書きとか選択できるエディタが簡単に実装できるライブラリ
編集中の人がどこにカーソル合わせているかとかもわかるようにできるっぽい
面白そう

https://tiptap.dev/

# swc
Next.js12でも採用された、rustで書かれたtsをjsにコンパイルするライブラリ
babelで環境構築したものをswcに置き換えてみたい

https://swc.rs/docs/installation

# midway.js
Nodeのフレームワーク
TSでバックエンド書きたいときに良さそう

https://www.midwayjs.org/
【備忘録】freeglutをroot権限の使えないUbuntuにインストールする

学校の授業でGLUTを使う授業があるにもかかわらず何故か学校のPC(Ubuntu)にfreeglutが入ってなくてコンパイルで積んだのでメモ

## そもそもsudoが使えるなら

これで良い

```bash
# Debian/Ubuntu系なら 
$ sudo apt install freeglut3 freeglut3-dev

# RedHat系なら
$ sudo dnf install freeglut freeglut-devel

# Arch系なら
$ sudo pacman -S freeglut
```

sudoが使えないよーって人はこの先を見てください。

## freeglutのソースを引っ張ってくる

とりあえず任意のディレクトリに[freeglutの公式サイト](http://freeglut.sourceforge.net/)からソースを引っ張ってきます。

で、引っ張ってきたtar.gzファイルを展開します。

```terminal
$ tar xzf freeglut-3.x.x.tar.gz
```

## ビルドする

cmakeを使ってビルドします。
今回はsudoなんぞ使えない一般権限を前提としているので、ファイル出力先はホームディレクトリに作ったディレクトリにしてます。
参考サイトだとなんかディレクトリ作ってたんですけどそれだと
CMakeListsが見つからんとかで怒られました。
(cmakeよくわからんなのでもしかしたらオプションつければなんとかなるかも?)

```terminal
$ mkdir ~/freeglut
$ cd freeglut-3.x.x
$ cmake -DCMAKE_INSTALL_PREFIX=~/freeglut
$ make
$ make install
```

`~/freeglut/`に`include`と`lib`ってディレクトリが追加されてたら成功です。
これで、freeglutをビルドすることができました。

## includeパスに追加

で、当然ながらincludeパスが通ってないので、コンパイル時はこんな感じでコンパイルします。(g++の場合)

```terminal
$ g++ -Wall -Weffc++ -o a.out program.cpp -I ~/freeglut/include/ -L ~/freeglut/lib/ -lglut -lGLU -lGL -lm
```

おわり。

## 参考文献

- [GLUTによる「手抜き」OpenGL入門](https://tokoik.github.io/opengl/libglut.html)
【Ubuntu 16.04】セキュリティアップデート備忘録

セキュリティアップデートのコマンド忘れがちなので備忘録としてメモ

ログイン時の以下のような表示が出たら、実行する。


```
Welcome to Ubuntu 16.04.6 LTS (GNU/Linux 4.4.0-1083-aws x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage

77 packages can be updated.
2 updates are security updates.

New release '18.04.6 LTS' available.
Run 'do-release-upgrade' to upgrade to it.
```

の

```
77 packages can be updated.
2 updates are security updates.

```


# コマンド
特に何も気にせずにアップデートするなら以下のコマンドを実行。

```
sudo apt upgrade -y
sudo apt-get update -y
sudo apt-get install -y unattended-upgrades
sudo unattended-upgrades
```
パッケージとかアップデートされたら困りそうな方は、公式ページより調べて、適宜必要なものをアップデートしてください。

# 再ログイン

```
Welcome to Ubuntu 16.04.7 LTS (GNU/Linux 4.4.0-1083-aws x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage

0 updates can be applied immediately.

Ubuntu comes with ABSOLUTELY NO WARRANTY, to the extent permitted by
applicable law.
```

適用するアップデートが0になったのでOK 

```
0 updates can be applied immediately.
```



何も考えずに昔に作ったイメージなどから起動した場合、セキュリティアップデートが適用されていなかったりすると思います。
2021年1月27日には「sudoの脆弱性」も出ていたりします。

参考：
■sudoの脆弱性（CVE-2021-3156）に関する注意喚起
https://www.jpcert.or.jp/at/2021/at210005.html

独自に作成しているAMIなども、セキュリティアップデートは定期的に更新していきましょう。


P.S.
というか、そろそろUbuntu20.04にしようかな。
ABC134 C - Exception Handling から学んだ

https://atcoder.jp/contests/abc134/tasks/abc134_c

![abc134_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/06af2426-bdab-8f4b-0b22-5924e1f5fefb.png)
![abc134_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/0cbbba18-fae2-dd52-f1c8-3cff080e9fb6.png)

何も考えず、書いて WA / TLE。

```abc134c_ng.py
N = int(input())
A = []
 
for _ in range(N):
    a = int(input())
    A.append(a)
 
for i in range(N):#O(2*10^5)
    if i != N-1:
        print(max(A[i+1:]))#max O(2*10^5-1)
        #↑ココ1
    else:
        print(max(A[:N-1]))#max O(2*10^5-1)
        #↑ココ2
```

ココ1 / ココ2 にあるように Ai **以降** から最大値を抜き取っているが
**問題の趣旨は Ai を除く全ての要素の中で最大値** を望んでいる。そりゃ WA なるわ。

もう一つ、計算量だ。上記コメントを眺めてもらえれば分かると思う。
っというわけで　反省した。

事前に最大値を求めて、Ai < maximum であれば maximum を出せばよい。
Ai == maximum であれば、それより小さい値を出せばいい。

```abc134c_ok.py
N = int(input())
A = []

for _ in range(N):
    a = int(input())
    A.append(a)

B = sorted(A)

for i in range(N):
    if A[i] != B[-1]:
        print(B[-1]) #maximum
    else:
        print(B[-2]) #maximum より一つ小さい値
```

問題文を正しくとらえる。
基本ではあるが、非常に大切であると改めて学んだ。
[Ruby]any?を||の代わりに使わない

Rubyの配列(Array)には`any?`という便利メソッドがあります。

https://docs.ruby-lang.org/ja/latest/method/Array/i/any=3f.html

> すべての要素が偽である場合に false を返します。真である要素があれば、ただちに true を返します。
ブロックを伴う場合は、各要素に対してブロックを評価し、すべての結果が偽である場合に false を返します。ブロックが真を返した時点で、ただちに true を返します。

上記はドキュメントから転記しました。
any?を使うことで、配列内に特定の条件を満たした要素が１つ以上あること(または存在しないこと)を確認することができます。
また、真の要素が見つかったら以降の判定は行われないと記載されているため計算効率も良いです。

簡単に動作確認をしてみます。
配列`[5, 3, 4]`の中に３以下の数値があるかをチェックしています。
何が判定されたか可視化できるように判定ごとに`p _1`で判定した要素を出力するようにしています。

```irb
irb(main):005:0> ary = [5, 3, 4]
irb(main):012:1> ary.any? do
irb(main):013:1*   p _1
irb(main):014:1*   _1 <= 3
irb(main):015:0> end
5
3
=> true
```

２つ目の要素3がtrueとなるため、以降の要素4は判定されていないことがわかります。
また、配列内の要素の真偽を判定するだけであれば、ブロックやパタメーターなしで使うことができます。

```irb
irb(main):028:0> [nil, 'a'].any?
=> true
```

# any? を || の代わりに使わない

ここからがこの記事の本題です。
ブロックやパラメーターなしのany?を応用すると、複数項目のor条件の代わりに使えることがわかります。

例えばifの条件であったり、?メソッドの戻り値などでany?を使えます。

```ruby
if hoge? || fuga? || piyo?
  # hoge?, fuga?, piyo?のいずれかがtrueの場合に実行される
end

# any?を使って下記のように書くこともできる
if [hoge?, fuga?, piyo?].any?
end
```

```ruby
# hoge?, fuga?, piyo?のいずれかがtrueか？
def any_truthy?
  hoge? || fuga? || piyo?
end

# any?を使って下記のように書くこともできる
def any_truthy?
  [hoge?, fuga?, piyo?].any?
end
```

当初、私はどちらの書き方も好みの問題だけで、どちらでも良いと考えていました。
ただ、このパターンの場合は明確に||の方が良いということができます。

実際にhoge?, fuga?, piyp?メソッドを使って処理を確認してみます。
今回はfuga?だけがtrueを返却するようにしています。また、呼び出されたことがわかるようにプリントするようにしています。

```ruby
def hoge?
  p 'hoge'
  false
end

def fuga?
  p 'fuga'
  true
end

def piyo?
  p 'piyo'
  false
end
```

ここで下記のように判定した場合、どうなるでしょうか？

```ruby
[hoge?, fuga?, piyo?].any?
```

前から処理していくと、fuga?がtrueを返却するのでpiyo?は確認しなくてもany?はtrueが確定しているのですがpiyo?も実行されてしまいます。

```irb
irb(main):015:0> [hoge?, fuga?, piyo?].any?
"hoge"
"fuga"
"piyo"
=> true
```

一方、||を使うとpiyo?の判定は行われません。

```irb
irb(main):015:0> hoge? || fuga? || piyo?
"hoge"
"fuga"
=> true
```

上記の通り、any？を使った場合は3つのメソッドが全て呼び出されますが、||の場合はhoge?やfuga?がtrueになった場合に後続メソッドが呼び出されないので効率が良いです。

any?も真の要素が見つかれば処理が中断するのではなかったっけ？?という疑問が起きると思いますが、`[hoge?, fuga?, piyo?].any?`の処理を分解すると下記のように動作しています。

* 最初に配列`[hoge?, fuga?, piyo?]`を生成
    * この時点でhoge? / fuga? / piyo?は判定されて、`[false, true, false]`という配列が生成されています。
* `[false, true, false]`を先頭から順に判定
    * ２つ目がtrueのため判定は終了します。最後のfalseの判定は行われません。

判定の前に配列の生成を行ってしまうため、配列内の要素はすべて実行されてしまうんですね。

上記のように||の代わりにany?を使う場合は、好みの問題だけでなくパフォーマンスにも影響があるので||を使うようにしましょう。
【JavaScript】変数と参照の振り返り⑦　参照とconst・引数


#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/c2ed2918646bc3a61f17

#目的

* 変数についての理解を深める


#本題
###1.参照とconst

````javascript
// constを使った再代入
// プリミティブ値
const a = "Hello";
// constで定義した場合、再代入できない　→　エラーになる
a = "bye";
````
````javascript
// オブジェクト
const b = {
  prop: "hello"
}
// 新しいオブジェクトを代入しようとするとエラーになる
// constで変数宣言しているため、再代入不可
b = {};
`````
```javascript
// オブジェクト
const b = {
  prop: "hello"
}
// プロパティに対して変更を加えようとした場合はエラーにならない
b.prop = "bye";
console.log(b);

// constをオブジェクトで使用した際には、
// オブジェクトの再代入はできないが、
// プロパティの変更は可能
````

###2.参照と引数

````javascript
let a = 0;

// 関数の引数としてaを渡したい
function fn1(arg1){
  arg1 = 1;
  console.log(a, arg1);
}
// 引数aを入れて実行すると,(0,1)と出力される
fn1(a);
````

これは下記の書き方と結果が同じ

````javascript
let arg1 = a;
arg1 = 1;
console.log(a,arg1)
fn1(a);
`````

プリミティブ型を関数の引数として渡す場合には
値はそれぞれ独立しているので互いに影響は受けない

`````javascript
let b = {
  prop: 0
}

function fn2(arg2){
  arg2.prop = 1;
  console.log(b, arg2);
}
// 実行結果は{prop: 1}になる
fn2(b);
// つまり引数に渡したbというオブジェクトの参照が
// arg2にコピーされ、bと同じオブジェクトへの実体への参照を保持しているため
// プロパティの値を変更するとbの値にも影響が出る
``````

`````javascript
// 中でarg2にオブジェクトを渡すと
function fn3(arg2){
  arg2 = {};
  console.log(b, arg2);
}
// この結果は{prop: 0} {}となる
fn3(b);

// この場合、bに影響は出ないがarg2だけ変更される
// 値がコピーされているのか、参照がコピーされるかで結果が変わる
``````


今日はここまで！

#参考にさせて頂いた記事

* [【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)
Reactの特徴その１

# Reactとは

ReactとはFacebook社によって開発されたJavaScriptのためのユーザインターフェイス構築用のライブラリのこと。

## SPA

*Single Page Application*の略。
HTMLは1つのみでJavaScriptで画面を書き換える仕組み。ナウそうな奴は大体SPA。
最初に画面(HTML)を取得した後は、JavaScriptによって画面の書き換えを行うことで
単一ページでありながらアプリケーションを構築できる

## 必要な箇所だけ書き換える

Reactでは仮想DOMとしてメモリ上にDOMの状態をキャッシュしておき、仮想DOMに差分が発生した場合にのみ差分を計算し、実際のDOMに差分のみを再描写することにより効率化している。

## JSファイルだけどHTML風に書ける

JSX(*JavaScript XML*)は、Reactのコンポーネント内でマークアップ言語を記述するためのXML風の拡張言語である。 jsファイルのreturn括弧内でHTMLタグが記述可能で、レンダリングによってDOMが構築される。このDOMは全体を１つのタグでまとめる必要があり、
**フラグメント (fragment**) を用いることで、DOM に余分なノードを追加することなく子要素をまとめることが出来る。フラグメントの宣言は
`<React.Fragment>~</React.Fragment>` あるいは短縮記法で `<>~</>`で行う。

## コードを分割する

１つのファイルに書いていたら膨大な量になってしまうのでコンポーネント(部品)化する。コンポーネントの名前は大文字で始めること！コンポーネントの拡張子は`.js`のままでも使えるが、わかりやすく `.jsx`を使った方が良い。
以下は関数をコンポーネント化し、別ファイルで使用する例。

```react:Comp.jsx
//　　エクスポート `export default モジュール名`

import React from 'react'

const App = () => {
  return (
    <React.Fragment>　
      <h1>磁冠百柱林闘</h1>
      <p>
				中国宋代、四川省拳法家達によって盛んに行われた異種格闘技。当時は杉木立の枝を払い、頂部を切断してその切り口を足場とした。
				その杉は最低でも高さ一五米以上、直径は一〇センチから３米までと変化に富み、落下しようものなら即死は間違いなく、まさに命がけの勝負であった。
				後に四川省青陽山で強磁石が発見されるにいたり、杉の頂部に鉄板をかぶせ磁靴を履き、二名対二名で戦う磁冠百柱林闘が完成した。
				千変万化の中国格闘技にあってもこの磁冠百柱林闘は最高の技量とチームワークを要求される高度な戦いのひとつである。
				現代のプロレスに見られるタッグマッチはこの磁冠百柱林闘を彷彿とさせる。
				
				中津川大観著時源出版刊『偉大なる中国拳法』より</p>
    </React.Fragment>
  );
}

export default App;

```


```react:index.js
// インポート `import モジュール名 from 相対パス`

import React from "react";
import ReactDom from "react-dom";
import App from "./Comp";

ReactDom.render(<App />, document.getElementById("root"));
```

デフォルトエクスポートの場合、インポート側で任意に名前を設定することが出来る。
上記の例だと、`import Foo from "./Comp";`とすることで、新たに名前を付与することも可能。


[Reactの特徴その２](https://qiita.com/jizya/items/52dfbcd508edd9ab746d)
ABC132 C - Divide the Problems を解いた

https://atcoder.jp/contests/abc132/tasks/abc132_c

![abc132_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/a3b3035d-eb83-79f8-9c0c-cd50045530f1.png)
![abc132_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/cc525167-0437-360b-9ebf-a02c9af71d71.png)
![abc132_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/737344/69ccbcf6-d77f-cdce-e02b-ce723a8baeb3.png)

ABCの数 == ARCの数ならば、N は必ず偶数となる。
じゃあ、半分にして、つなぎ目を比較すれば答えでは!?

```abc132c.py
N = int(input())
lis = list(map(int,input().split()))

lis.sort()

ans = lis[N//2]-lis[N//2-1]

print(ans)
```
Docker for WindowsでHello,World!

インストールしたまま使わず放置していたDocker…時間ができたので使ってみることにしました。システム開発に詳しくない自分でも短時間でHello,World!できたので、手順をメモ。
やったことは、
Javaの実行環境をインストール
　実行に必要な環境設定がDockerイメージとしてパッケージングされているので、それをダウンロードする
Dockerイメージをカスタマイズ
　今回はHello,World!を記述したHTMLファイルを追加するのみ
Dockerイメージを実行
　localhostにアクセスをしてindex.htmlを表示させる
　
以上です。

###事前準備
1）Docker Desktop for Windowsをインストール
https://hub.docker.com/editions/community/docker-ce-desktop-windows/
2）Windows Terminalをインストール
https://www.microsoft.com/ja-jp/p/windows-terminal/9n0dx20hk701?activetab=pivot:overviewtab
###Javaの実行環境をインストール
3）Tomcatイメージを取得
Terminalで以下のコマンドを打つだけでOK
```docker pull tomcat```
###Dockerイメージをカスタマイズ
4）Dockerイメージの作成：Dockerfileの作成
Dockerfileは、ビルドのときに参照される。ファイルの中身は以下の通り。

```
FROM tomcat:9.0
RUN mkdir webapps/ROOT
RUN echo Hello,World! >> webapps/ROOT/index.html
CMD ["catalina.sh","run"]
```
先ほどインストールしたTomcatイメージに、"Hello,World!"を記述したindex.htmlを追加している。

5）Dockerイメージの作成：Dockerfileを用いてビルド
```docker build . -t hello:1.0```
※Dockerイメージの名前をhelloにしている。バージョンの記述も必須。
これで、Dockerイメージの作成完了です、早い！
###Dockerイメージを実行
6）helloを起動
``` docker run -it --rm -p 8880:8080 hello:1.0```
7）以下のURLにアクセスするとブラウザにHello,World!が表示される
http://localhost:8880/index.html
![image2.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261367/cabbcc95-a224-6b0d-9509-5d657234880a.jpeg)

今回は手順だけですが、Dockerまわりの用語やコマンドの意味についても別途まとめたいと思います～。