OmniAICreator/Qiita-1.07M huggingface dataset:
windowsでPystanを入れるのに苦労した

# はじめに
PCを新調し，今までの環境を構築するにあたり，最新のpystanはwindowsに対応しておらず，導入に苦労したので備忘録も兼ねて記しておきます．なお，anacondaが入っていることが前提で話しを進めます．また，私はCPUがRyzenのため，その影響を受けている可能性もあります．
もっとスマートなやり方がある場合は，コメントなどで指摘してくれると嬉しいです．

# 0.動作環境
|||
|:----:|:------:|
|OS|Windows10|
|CPU|Ryzen 5600x|
|Anaconda|4.9.2|
|Python|3.8.5|
|Pystan|2.19.1.1|

なお，私はAnacondaを`C:\Users\user_name\anaconda3`に入れてありました．

# 1.起こったこと
いつも通り，コマンドプロンプトで`pip install pystan`と打ち込むと

```
C:\Users\user_name>　pip install pystan
(中略)
ERROR: Command errored out with exit status 1:～～～～～～～
```
といった内容が出てきた．

# 2.解決方法
1. [この場所](https://pypi.org/project/pystan/#description)から，windowsが動くバージョンを特定する．今回は，「pystan 2.19.1.1」であった．
1. コマンドプロンプトで`conda install pystan==2.19.1.1`と打ち込む．

anacondaを入れてる場合は，これらのことを行うことで，動くようになると思います(C++コンパイラ付いてきているから)．
しかし，anacondaを使わない場合は，自分でC++コンパイラをインストールしてpathを通す必要があると思います．
FireStoreとRealtimeDatabaseの違いや使い分け

どちらが使用した用途なのか調べていた時のメモを記載する。

筆者の場合、最初はGoogle推奨だったのでFireStoreでサービスを作っていたが、
小さい複数のデータを頻繁にやり取りする用途で使用しており、開発中の段階で
無料枠を超えそうになったため、RealtimeDatabaseに乗り換えすることにした。

## FireStore
* こちらの方が新しく、googleはこちらを推奨している。
* GCPと同等の機能
* 日本のロケーションが使用できる

### データベース構造
* 型付けしたクラスとして取得することができるため、DB構造を意識せずに直観的に扱うことができる。

### 料金
* ドキュメント単位の読み書きで課金
* 1ドキュメントあたりのサイズが大きいデータを扱う用途に向いている
* 一度に複数個のドキュメントの取得を行うような用途で使用すると、クラウド破産するので注意が必要。

#### 参考
https://cloud-textbook.com/84/


## RealtimeDatabase

* Firebase, Inc.時代のデータベース
* 日本ロケーションがないので、日本で使用はレスポンス的に不利になる

### データベース構造
* Json形式のデータベース、KV方式で扱うことができる。

### 料金
* 保管する容量と通信量で課金
* 小さいデータを頻繁に読み書きする用途に向いている
* FireStoreと比較するとクラウド破産のリスクは少ないが、注意は必要。
Oracle認定Java_silver対策メモ２

##はじめに
エンジニアとして働き始めはやくも５ヶ月目、そろそろ資格をとろうかと。。。ということで！「Oracle認定JavaSE Silver」の対策として、黒本をもとに各章ごとの重要そうなポイントをピックアップしまとめたものの後編です。前半の記事は[こちら](https://qiita.com/nabe_oct/items/efcb2e7c6a59224295a8)です。

##７章 クラスの継承、インターフェース、抽象クラス

### インターフェイス 
　**フィールド**：定数のみ持つことができる。（自動的にpublic static finalがつく）
　**メソッド**：publicな抽象メソッドやdefaultメソッド、staticメソッドを持つことができる。

**＜defaultメソッド＞**
Java8 SEかより、defaultメソッドを利用することでインターフェイスにメソッドの実装ができるようになった。

```
default 戻り値型 メソッド名 (引数の型 引数名){
　//　処理内容を記述
}
```
#####※defaultメソッドの注意点
* インターフェイスを実装したクラスからdefaultメソッドを呼び出す。
　→ インターフェイス名.super.メソッド名()

* defaultメソッドの注意点として、オーバーライドする際にjava.lang.Objectに定義されているメソッドをデフォルトメソッドとしてオーバーライドすると、コンパイルエラーが起こるので注意！
　→　equals()、clone()、toStrign()メソッドなど

* defaultメソッドは、直接実装したクラスからしか呼び出すことができない。（階層を跨ぐことができない）


###ポリモーフィズムしたインスタンスを呼び出しについて

* フィールドを参照した場合、変数の方で宣言された方を使う

* メソッドを呼び出した場合、メソッド内の指示に従う

###コンストラクタ

* サブクラスのコンストラクタには、スーパークラスのコンストラクタを呼び出すsuper()が自動的に追加される。


##８章 関数系インターフェース、ラムダ式
###ラムダ式
ラムダ式とは、メソッドを変数と同様に扱うことができる文法です。

```java
関数インターフェイス型 変数名 = （引数1,引数2,・・・) ->{return 処理};
//　引数の型は記述しなくてもよい。 

関数インターフェイス型 変数名 = 引数 -> {return 処理};
//　引数が一つしかない場合は（）を省略することができる。

関数インターフェイス型 変数名 = (引数) -> 処理;
//　実行する処理が一つしかない場合は{}を省略することができる。
//  また、{}を省略した場合、returnも省略する。（記載できない）

```
#####※ラムダ式の注意点
* ラムダ式では、ローカル変数と同じ変数名のフィールドを持つことができない。
* 
* ラムダ式内からローカル変数にアクセスする場合、ローカル変数がfinalな変数でなくてはいけない。

###主要な関数系インターフェイス
* Consumer
* Supplier
* Predicate
* Function
    * <>(ジェネリクス型)のパラメータを受け取ることが可能なのは4つのうちFunctionのみ


##９章 API



##１０章 例外処理

* finallyが記述されている場合、例外がスローされなくてもfinally文が実行される。

* 例外処理の記述順はtry->catch->finallyでなくてはいけない

* クラスがキャストできない場合、その例外を示すClassCastExceptionがスローされる.

* catch()文にreturnがあっても先にfinallyを処理した後に戻される.

* 



##１１章 モジュールシステム
PowerVS IBM i 日記(35): IBM i 7.2 の価格が上がりました

# IBM i 7.2 の価格があがりました
IBM i 7.2 は2021/04/30 で EOS を迎えました。
EOS のバージョンを IBM にサポートしてもらうには延長保守が必要があります。

実際、IBM i 7.1 のサポートが始まった時も、高い価格でした。

- [PowerVS で IBM i 7.1 が利用可能。まずはダラス12から](https://qiita.com/6onoda/items/60a3b5c9a33ed7359dd9)

## IBM i 7.2 は 2021-04-30 で EOS を迎えました。

IBM i 7.2 は 2021-04-30 で EOS を迎えました。
## IBM i 7.2 の価格が上がっていました。

確認してみました、IBM i 7.2 の価格があがりました。

7.2の金額。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184930/dac7501a-45f8-863e-6a38-92967b504731.png)

同じ状態の 7.3 はこちら。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184930/7cc4c76b-062a-e372-f858-8901b1c0bbdc.png)

7.2 の金額は 7.1 と同じになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184930/feb5d656-ed85-289c-620a-e6a9c8a9f3dc.png)

## 「サポート終了 OS (サービス延長適用) を使用している場合、この見積もりにサービス延長価格は反映されません。」って何?

7.1 も 7.2 の EOS だから、延長保守の追加分が上乗せされるので高いのは仕方ないよねと思っていたけれど「サポート終了 OS (サービス延長適用) を使用している場合、この見積もりにサービス延長価格は反映されません。」って何? さらに追加料金がかかるの?

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184930/d427e44f-ca1b-5c4b-09f7-52f1bdc9af6e.png)

## 既存の 7.2 ユーザーは ?

気になるのは、既存の 7.2 ユーザーが自動的に新しい価格で自動的にチャージされるかですけど未確認です。
ごめんなさい。

## 2021-05-11 追記
聞いたり、聞いてもらったりしたところ、下記のようです。

- IBM 提供のストックイメージに対して「*サポート終了 OS (サービス延長適用) を使用している場合、この見積もりにサービス延長価格は反映されません。」が表示されるのは、表示価格にサービス延長の費用が適用済みなため記述ミス。本来は持ち込みイメージ用の注記
- 7.2 のお客様の金額は、EOS に伴い自動的に新価格が適用されている
- 7.2 のお客様へ、価格変更の通知が事前に行われているはずである
- 7.3 や 7.4 にリリースアップすれば、サービス延長の費用が含まれない通常金額が適用される
- リリースアップ後の通常金額が適用のための IBM への連絡は不要 (IBM プラットフォームからOSのバージョンが把握できるため)

---
当日記のIndexは[こちら](https://qiita.com/6onoda/items/f146c78c0c1bbe905a42)です。

---
許可の無い転載を禁じます。
この記事は筆者の個人的な責任で無保証で提供しています。
当記事に関してIBMやビジネスパートナーに問い合わせることは、固くお断りします。
render関数理解のための仮想DOM


初めにDomとはDocment Object Modelのこと。
仮想DOMとはブラウザ上で保持しているDomをJavascript上で模倣して作って保持しているものをいう。

なせ仮想DOMが必要？
前提としてブラウザで保持しているDOMのデータを更新するには時間がかかる。（パフォーマンスが落ちる）

次に
表示画面を考えてどういうアルゴリリズムであれば効率的に画面表示の変更ができるのか？

⇨変更前と変更後のDOMを比べてその差分だけを変更するアルゴリズムを考える。
ここで変更前の差分を作る前にブラウザ上のDOMを取得して行うとめちゃめちゃ時間を食うので自前でjavescript,vuejs内部で作って差分を取るのはさほど時間はかからないで行える。
ということは自前に変更前仮想DOMと自前の変更後仮想DOMを比べる方法をとってブラウザには差分のみの変更データを渡すようにする。
AWSとWordPressを使ってWebサイトを構築しよう⑨

<h2>■Webサーバーへ接続する</h2>
前回インスタンスへApacheと呼ばれるWebサーバーソフトをインストールしました。
これでWebサーバーとしての機能が追加されたので実際にWebブラウザからアクセスしてみましょう。

#目次
[1.Webブラウザからインスタンスへアクセスする](#1-webブラウザからインスタンスへアクセスする)
[2.セキュリティグループの80番ポートを開ける](#2-セキュリティグループの80番ポートを開ける)

#1. Webブラウザからインスタンスへアクセスする
まずは作成したインスタンスのパブリックIPを確認します。
今回は「3.112.29.31」となっています。
※現在の設定だとパブリックIPは動的IPでインスタンスを起動し直す度にIPアドレスは変わるので注意してください。
![スクリーンショット 2021-05-07 22.14.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1159544/d8b3525d-afe0-f3c6-cd92-6be611f4cd45.png)


ではパブリックIPアドレスをそのままWebブラウザで表示してみましょう。
画像上部にURLを入力するバーがあるので、そこにパブリックIPをそのまま入力してアクセスしてみます。
![スクリーンショット 2021-05-07 22.16.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1159544/305ed38e-7052-a236-d5f5-3f17ffbabac7.png)


すると「このサイトにアクセスできません」とエラー表示されました。
アクセスできない原因は<b>セキュリティグループの設定で「22番ポートだけを通してそれ以外のポートは通さない」という設定をしているからです。</b>
これはEC2の画面からセキュリティグループの設定で確認することができます。

インスタンスを選択し画面下の「セキュリティ」をクリックします。
![スクリーンショット 2021-05-07 22.30.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1159544/b6ebdfda-6598-e245-c8ff-e65d1af43142.png)

下にスクロールして「インバウンドルール」のところを見ると「ポート範囲：２２」「ソース：0.0.0.0/0」という設定がされているのがわかります。
![スクリーンショット 2021-05-07 22.31.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1159544/e50b73ca-9519-fea0-b766-d036dba7186a.png)

Apacheは80番ポートで待ち受けているため、Webブラウザでアクセスできるようにするにはセキュリティグループの80番ポートを開ける必要があります。

##2. セキュリティグループの80番ポートを開ける
まずEC2の画面を開き、左メニューから「セキュリティグループ」をクリックしてください。
次にセキュリティグループ一覧が表示されるので、以前作成したセキュリティグループを選択し、画面下の「インバウンドルール」をクリックしてください。
次に「インバウンドルールの編集」をクリックしてください。

この「インバウンドルール」というのがアクセスしてくる通信を制限するルールです。（アウトバウンドルールはその逆で通信の送信先を制限するルールです）
![スクリーンショット 2021-05-07 23.05.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1159544/6f22bd5b-288c-fdb9-abae-444f7947069f.png)

インバウンドルールを編集できる画面へ移行するので下記のように入力してください。
まず「ルールの追加」をクリックして新しくルールを作成します。
<b>・タイプ：「カスタムTCP」を選択</b>
<b>・ポート範囲：「80」と入力</b>
<b>・ソース：虫眼鏡マークのある箇所に「0.0.0.0/0」と入力</b>
全て入力を終えたら「ルールを保存」をクリックしてください。
![スクリーンショット 2021-05-07 23.15.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1159544/fc6d7f77-3363-2ddb-afda-a744e2aa531e.png)

これで下記画像のように新しくセキュリティグループのインバウンドルールに「80番ポートを開ける設定」が追加されたのが分かります。
![スクリーンショット 2021-05-07 23.24.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1159544/c3ee2d32-1537-5d92-519f-e5c879c36192.png)

ではもう一度WebブラウザでパブリックIPにアクセスしてみましょう。
すると下記のようにApacheのデフォルト画面が表示されましたので、無事パブリックIPへアクセスできたことが分かります。
![スクリーンショット 2021-05-07 23.26.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1159544/8ee3fe34-6b7e-4948-3055-46c1e9e67a71.png)

</br>
今回はここまで。
次回はインスタンスにDNS名を割り当てていきます。

次の記事はこちらから
<a href="https://qiita.com/uchino_infra/private/e9ecc383e386998e5352">AWSとWordPressを使ってWebサイトを構築しよう⑩</a>
Apacheの導入

## 環境
Windows10 Pro
Apache 2.4.41

|名称|設置場所|
|--|--|
|Apache|C:\Apache24|


## Apacheのインストール
まず、Apacheをインストールする。（今回は最新版ではなく、version2.4.41）
下記サイトより、**Apache 2.4.41 Win64** の「**httpd-2.4.41-win64-VC14.zip**」を選択
https://www.apachelounge.com/download/VC14/
![php03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1402740/73eec710-c23e-1163-cc44-397ef38aea90.png)

「C:\」に「Apache24」のみ解凍し、「C:\Apache24」となるようにする。
以上でApacheのインストールは完了。


## httpd.conf の設定
続いてApacheの設定を行う。
「C:\Apache24\conf\httpd.conf」を開き、必要に応じて書き換えていく。


### リダイレクトの許可
URLのリダイレクトや書き換えを許可する。
「rewrite_module modules」で検索し、下記のコメントアウトをはずす。

```
#LoadModule rewrite_module modules/mod_rewrite.so
↓
LoadModule rewrite_module modules/mod_rewrite.so
```

以上で設定は完了。

### Apacheの起動
Apacheが正常に起動するか確認する。
「C:\Apache24\bin\ApacheMonitor.exe」を**右クリック**し、「**管理者として実行**」を選択

『この不明な発行元からのアプリがデバイスに変更を・・・』＞「はい」を選択

画面の右下に（矢印をクリックで表示）Apacheのアイコンが追加されている。
アイコン＞右クリック＞「Open Apache Monitor」を選択
![GOMCAM 20210507_1624540869.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1402740/e67718d5-9f1f-6020-320e-d97213417f6d.png)

スタートをクリックし、名前の左側のアイコンが赤から黄緑に変化すれば成功。
![GOMCAM 20210507_1629160274.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1402740/da993bdb-d95c-e3c6-d099-649fab5b32a9.png)


## 参考
Apache の環境変数：https://httpd.apache.org/docs/current/ja/env.html
仮想サーバー(EC2)とコンテナ(Docker)の違い

業務でEC2やDockerを使用している際に「なんか似てるな...？」と感じたので、
両者の違いを調べてざっくりまとめました。

## 仮想サーバー（EC2)

EC2は **サーバー仮想化** 技術です。

ハイパーバイザーによって立ち上げられるハードウェア環境で
仮想環境にゲストOSやアプリケーションのインストールを行い、
**ホストOSとは独立した実行環境を構築**します。
<br>
ハイパーバイザーとは 
ホストOSが不要なタイプの、仮想マシンを作って動かすためのソフトのことです。


## コンテナ（Docker）

Dockerとは、**コンテナ型仮想化** 技術です。

ホストOSのマシンリソースをコンテナ専用に隔離・制限したプロセスであり、
コンテナ上でアプリケーションを実行する際に、**物理マシンから確保したリソースのプロセスの属性を変更させる**ことで
独立した実行環境を構築します。

<br>
<br>
<br>

どちらも共通点としてハードウェアからリソースを確保するということがありますが、

**プロセスの共有と管理** の面で仮想化とコンテナには違いがあります。

## プロセス管理の違い

### 仮想サーバー（EC2)

仮想サーバーの場合は、**仮想化されたハードウェアごとにリソースの隔離が行われています**。

仮想環境上で起動されたアプリケーションは、
ホストOSや他の仮想マシンのプロセスとは独立しているということになり、

**プロセス管理は仮想環境上のゲストOSによって行われます**。

<br>
<br>

### コンテナ（Docker）

コンテナの場合、ホストOSのプロセスの一部として管理されるため
**ホストOSとプロセスが共有されています**。

そのためホストOSにてローカル環境のポートを割り当てることで
別プロセスからアクセスすることが可能になってます。

## それぞれの利用が推奨されるケース

### 仮想サーバー（EC2)

- 独立したシステム運用
 - ホストOSと強い依存関係を持つコンテナと違い、セキュリティ面などでホストOSとは完全に切り離して運用したい場合

- GUIアプリケーションの実行
 - GUI操作が伴うアプリケーションを長時間稼働させる際、デスクトップ画面を仮想環境で準備することはコンテナでは難しいため仮想化で立ち上げたゲストOS内でデスクトップ環境を構築

### コンテナ（Docker)

- チーム共通の開発環境の整備
 - 仮想化での数GBに及ぶイメージサイズに比べコンテナのyaml形式のファイルが小さく、再配布が容易

- アプリケーションの継続的デプロイ
 - イメージファイルの容量が小さいことで再配布や起動が容易になり、デプロイ回数が増えても対応が可能

- 単一から複数個に限られたアプリケーションの利用
 - イメージの最小単位がOSである仮想化と比べ、コンテナではOSから単一のソフトウェアまで様々である中
スピード重視で開発する際にスムーズに進めることが可能

<br>

仮想化が抱えていたデプロイの効率化という問題をコンテナが解決する形になっています。

<br>

引用元→[コンテナと仮想化の違いとは？](https://www.sbcloud.co.jp/entry/difference-between-container-and-virtual-machine#:~:text=%E4%BB%AE%E6%83%B3%E5%8C%96%E3%81%AF%E3%83%8F%E3%82%A4%E3%83%91%E3%83%BC%E3%83%90%E3%82%A4%E3%82%B6%E3%83%BC,%E7%92%B0%E5%A2%83%E3%82%92%E6%A7%8B%E7%AF%89%E3%81%97%E3%81%BE%E3%81%99%E3%80%82&text=%E4%B8%80%E6%96%B9%E3%81%A7%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E3%81%AF%E3%83%9B%E3%82%B9%E3%83%88OS%E3%81%AE%E3%83%97%E3%83%AD%E3%82%BB%E3%82%B9%E3%81%AE%E4%B8%80,%E3%81%8C%E5%85%B1%E6%9C%89%E3%81%95%E3%82%8C%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82)

## 補足

コンテナは **ホストOSのカーネル(Linuxカーネル)を利用して動作している** らしいです。

ホストOSのカーネルを各コンテナが共有することで
ホストマシンのリソースを節約しながら動作しているようです。

この軽量化によってDockerコンテナの起動の速さにつながっているということですね。

<br>

また、Linuxカーネルを持たないWindowsやMac上でもコンテナの起動ができるのは
Dockerを利用する際に裏でLinux仮想マシンが起動する仕組みになっているためで、

各コンテナもこの仮想マシン上で起動するようになっているということです。


引用元→https://kitsune.blog/docker-summary

## 終わりに

ここら辺の知識がぼんやりとしていたので
備忘録としてまとめられてよかったです。

間違ったことやおかしな部分がありましたら教えていただけると幸いです。m(__)m

最後まで読んでいただきありがとうございました。
しゃくとり法のDequeを使ったバグりにくい実装


#この記事の目的
しゃくとり法のバグりにくい実装の紹介です！

#しゃくとり法(尺取り法)って？

しゃくとり法の説明自体は、とってもいいまとめがあるのでこちらをご覧ください。
[しゃくとり法 (尺取り法) の解説と、それを用いる問題のまとめ](https://qiita.com/drken/items/ecd1a472d3a0e7db8dce)


#でも、しゃくとり法ってバグりません？
しゃくとり法っていざ書いてみるとかなりの確率でバグります。
区間の端を表す添え字 $l$ と $r$ の動かし方が結構混乱します。

この記事ではdeque(両端キュー)を使った実装を紹介します。
なんとこの実装では添え字を使う必要がありません！


#deque(両端キュー)によるしゃくとり法の実装
次の問題を例にとって説明します。

[ABC 032 C - 列](https://atcoder.jp/contests/abc032/tasks/abc032_c)

長さ $n$ の整数列 $A = \\{a_1, a_2,..., a_n\\}$の連続部分列で、その要素の積が $K$ 以下となるものの長さの最大値を求める問題です。

次のように、連続部分列をdequeで表現して実装します。

```python
from collections import deque

## 入力の受け取り
n, k = map(int, input().split())
a = [int(input()) for i in range(n)]

## コーナーケースの処理
if 0 in a:
    print(n)
    exit()

ans = 0
q = deque()
p = 1  ## 今、見ている区間の要素の積をpで管理する。
for c in a:
    q.append(c)  ## dequeの"右端"に要素を一つ追加する。
    p *= c
 
    while q and p > k: ## 要素の積がKを超えているか？
        rm = q.popleft() ## 条件を満たさないのでdequeの"左端"から要素を取り除く
        p //= rm ## 取り除いた値に応じて要素の積を更新する
 
    ans = max(ans, len(q)) ## dequeに入っている要素の積がK以下になるまで区間を縮めた。

print(ans)
```

はい！添え字が一切登場しませんね！
連続部分列をdequeの両端への追加と削除で管理しているので添え字が必要ありません。
右端への追加が区間を右に伸ばす事に相当し、条件を満たさないなら左端の要素を取り除いていく事によって区間の左を縮めています。
whileを抜けた時には条件を満たす最大の長さの連続部分列がdequeに入っている事になります。
printデバッグで確認すると分かりやすいでしょう。

```python
N, K = 7 , 6
A = [4, 3, 1, 1, 2, 10, 2]
deque([4])
deque([3])
deque([3, 1])
deque([3, 1, 1])
deque([3, 1, 1, 2])
deque([])
deque([2])
```

標準的な実装でありがちな、$l$ が $r$ を追い越してしまった！という事はdequeの要素の数が負になる事に相当するので起こりえません。
空の区間は条件を満たす事がほとんどなので、whileがbreakするからです。
稀に空の区間が条件を満たさない事もありますが、その場合は空のdequeからpopしようとする例外が発生します。
怖い時は `while q and (条件)` としておくとよいでしょう。

#一般の場合
より一般的には下のようなコードになります。

```python
q = deque()
for c in a:
    q.append(c)  ## dequeの右端に要素を一つ追加する。
    (追加した要素に応じて何らかの処理を行う)
 
    while not (満たすべき条件):
        rm = q.popleft() ## 条件を満たさないのでdequeの左端から要素を取り除く
        (取り除いた要素に応じて何らかの処理を行う)

    (何らかの処理を行う。whileがbreakしたので、dequeに入っている連続部分列は条件を満たしている。特に右端の要素から左に延ばせる最大の長さになっている。)
```

あなたもdequeで快適なしゃくとりライフを！

#追記
右から入れて左から出してるだけなので両端キューでなく、ただのキューで十分ですね。
$N$ 個の要素がキューに入って最大でも一回出るだけなので、キューに関する操作は最大でも $2N$ 回になります。
この事から計算量が $O(N)$ になる事も分かります。

ちなみにPythonではcollections.dequeが速いのでdequeを使っておけば問題ないでしょう。

[Pythonのスタックとキューには何を使えばいいのか（各データ構造の速度比較）](https://qiita.com/saba/items/107c4237206e31acdbef)
git initしたのにFinderに.gitフォルダが表示されない

プログラミング初心者です

タイトル通りgit initしたのにFinderに.gitフォルダが表示されないんです
調べても直接的な記事がなかったのでメモします

Finderには不可視・可視フォルダがあって.gitは不可視フォルダに分類されてました
可視するには簡単です(Macの場合)
Finder開いて

```
command + shift + .
```
これだけでした
繰り返して押すと消えたり出てきたりします
Windows版iTunesのバックアップ場所を変える

<h2>この記事なんだよ</h2>
タイトルの通り、Windows版iTunesのiPhone(iPad)のバックアップ場所が表面上Cドライブ固定になっているのを変えるだけの浅い記事です。
正直Windowsのプロンプト使えたりする人は読む価値はないと思います。

<h2>なぜ書いたか</h2>
「iPhoneのバックアップしたらCドライブが真っ赤になったから助けてくれ」
友人からのこの一言が事の発端になります。
そんなん保存場所指定すれば解決だろ、何言ってんだ？なんて軽い気持ちで言いつつ、嘘言ったらいかんので自分でも変えれるか確かめてみたら・・・

   <h3><b>どこにもその設定がねぇ</b></h3>

ないんですよ、はい。
メニューバーの各項目漁ろうがShiftとかそれっぽいキー押しながら「今すぐバックアップ」押そうができない
ggってもサードパーティーのソフト使ってたり手動で動かしてたりでどれもめんどくっせ、<b>この為だけにソフトもう１本インストールするのも癪。</b>
なのでコマンドで勝手に別のドライブに移すようにしよう、そういう記事になります。

<h2>方法</h2>

そもそもバックアップ場所どこだよ、って話です。
結論から言ってしまえば以下のパスになります。

```dosbatch
C:\Users\{ユーザー名}\AppData\Roaming\Apple Computer\MobileSync\Backup
```

はい、iTunesのインストール場所とは完全に分離してるのできっと恐らくインストール場所を変えても意味ないと思います。多分。きっと。めいびー。
要は<b>この"Backup"フォルダをなんとかして別ドライブにつなげりゃいい</b>わけです。
その別ドライブにつなげる方法として<b>ディレクトリ・ジャンクション</b>というのを使います。ジャンクションについてはここでは解説しないので他の記事漁るなり何なりしてください。

>ここの記事が分かりやすいと思います。
https://www.atmarkit.co.jp/ait/articles/1306/07/news111.html

コマンドの中身とか知らんからとりあえず早くやらせろって人はこれだけコマンドプロンプトにコピペすれば終わりです。

```dosbatch:保存先変更.bat
D:
mkdir backup_iTunes
C:
cd "%appdata%\Apple Computer\MobileSync"
rmdir /S/Q Backup
mklink /J "%appdata%\Apple Computer\MobileSync\Backup" "D:\backup_iTunes"
```

では解説に移っていきます。
１行目の```D:```はドライブの変更です。Eドライブにしたかったら```E:```とします。
２行目の```mkdir backup_iTunes```はバックアップ先の作成です。文法としては

```dosbatch
mkdir "バックアップ先に指定したいパス"
```

になります。<b>この時Windowsのフォルダの命名ルールに従うようにしてください。(使用不可文字など)</b>
一応１行目と２行目はmkdirの引数を絶対パスにすることで１行にまとめることができます。

```dosbatch:例.bat
C:\> mkdir D:\backup_iTunes
```


３行目は１行目と同じくドライブの変更です。

4行目は上で記したバックアップ場所にカレントディレクトリを移しています。```%appdata%```というのは```C:\Users\\{ユーザー名}\AppData\Roaming```の略称という認識で良いです。

５行目の```rmdir /S/Q Backup```はBackupというフォルダとその配下にある物を全て削除しています。この後同名のリンクを作成する為です。

最後はディレクトリ・ジャンクションを作成しています。文法としては

```dosbatch
mklink "オプション" "リンクの作成場所\リンク名" "リンク先へのパス"
```

という風になります。今回は/Jオプションを使っているのでジャンクションになります。ジャンクションのいい所は権限が必要ないという所です。管理者権限とかだったら別にただのシンボリックリンクでもいいと思います。

ちなみにこの一連のコマンドで今までのバックアップは消すことになるので残したければ新しいバックアップ先に退避するなりなんなりしてください。

<b>以上、楽しいWindowsライフを！</b>
ATtiny1616でエンコーダーモーターを動かす

今回もATtiny1616でエンコーダーモーターを動かしてみましょう
使用したのは___8bitマイコンを使おう～２Vで動くステッピングモーターPF25-48281をATtiny1616で使う～
https://qiita.com/usashirou/items/e0cdf1be2f93440c27e8
STM32CubeIDEを使ってみよう How To STM32CubeIDE 日本語版(16) モーターを回そう___で使用した
MX1508のモータードライバーとエンコーダーモーターです。
https://qiita.com/usashirou/items/a4901fd99940ae65bd8b
#接続
各ピンは表のように接続しました

|Attiny1616|MotorDriver|Motor|
|---|---|---|
|5V|+|5V|
|GND|-|GND|
|2||A相|
|3||B相|
|8|IN1||
|9|IN2||
写真ではよくわからないですね
![DSC_0214 (2).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/344c0994-ddf6-f7be-b0fe-cc301ad38de8.jpeg)

#プログラム
当初Encoder.hを使用しようと思いましたがうまくいかないので別のプログラムを使用しました。
使用したプログラムは以下を流用しました。
https://github.com/curiores/ArduinoTutorials/blob/master/encoderControl/part3/part3.ino
MX1508はPWMで駆動する為、analogWriteを出力するように変更しています。

```
#define ENCA 2 // YELLOW
#define ENCB 3 // WHITE
#define IN2 8
#define IN1 9

int pos = 0;

void setup() {
  Serial.begin(9600);
  pinMode(ENCA,INPUT);
  pinMode(ENCB,INPUT);
  attachInterrupt(digitalPinToInterrupt(ENCA),readEncoder,RISING);
}

void loop() {
  setMotor(1, 200,IN1, IN2);
  delay(2000);
  Serial.println(pos);
  setMotor(0, 0, IN1, IN2);
  delay(500);
  setMotor(-1, 250,IN1, IN2);
  delay(2000);
  Serial.println(pos);
  setMotor(0, 0, IN1, IN2);
  delay(500);
  Serial.println(pos);
}

void setMotor(int dir, int pwmVal,  int in1, int in2){
  if(dir == 1){
    analogWrite(in1,pwmVal);
    digitalWrite(in2,LOW);
  }
  else if(dir == -1){
    digitalWrite(in1,LOW);
    analogWrite(in2,pwmVal);
  }
  else{
    digitalWrite(in1,LOW);
    digitalWrite(in2,LOW);
  }
}

void readEncoder(){
  int b = digitalRead(ENCB);
  if(b > 0){
    pos++;
  }
  else{
    pos--;
  }
}
```
#出力
シリアルモニタよる出力は以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/18137ac7-8eab-eb3e-2b3a-d5b054e4735c.png)
これでAttiny1616でエンコーダーモーターを動かす事が出来るようになりましたね
僕がWeb開発の道に進もうと思った２つのきっかけ

#初めに
皆さんはどんな感じでプログラミングを始めましたか？
大半の方が
・稼ぎたい
・こんなものを作りたい
のどちらかだと思いますが僕は最初はロボットを作りたいと思っていたのですが、当時プログラミング言語の違いなどあまり知らず適当にプログラミング言語の本を買ったらRailsの本でそのままweb開発の道に進むことになりました。
そんな薄っぺらい事情で始めた僕がWebプログラマーになろうと決心した二つのきっかけを紹介します。

#1.Reddit Place

![place_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480294/e8ebcc04-d453-00fc-7ab5-621711600c25.png)
Reddit Placeというサイト（プロジェクト）知った時は本当に鳥肌たちました。。
Reddit Placeは巨大な白紙データに、参加者が1ピクセルずつ好きな絵を描いていくというものなんですけど
その時に掲示板上で「みんなでこの絵書こうぜ！」とか「みんなで一面黒に染めてやろうぜ！」とか
違う目的を持った二つの集団がぶつかり合ったりするドラマがあって
72時間の間に、こんな絵が描かれたんですよ。。
まじですごくないですか？顔も名前も知らない人たちが何百人単位で集まって協力して何か成し遂げさせるサイトって。。。
僕も人と人とが繋がり合って奇跡・ドラマが起こるようなサイト（アプリ）作りたいなぁと思ってweb開発が更に好きになりました。

そんな72時間のドラマを4:30にまとめたタイムラプス動画があるのでそちらもぜひ

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

詳しい記事

http://www.cbc-net.com/posts/2017/04/11/reddit-place/

#2.Facebook創設者　天才ザックバーグはこうして育てられた

https://www.youtube.com/watch?v=OC6_UwqG9rQ&t=452s

もう一つ感銘を受けたのがこの動画です。プログラマーは全員見たほうがいいです。
Facebook創設者マークザッカーバーグの育てられ方で父の「大事なのは人と人との繋がりなんだ」って言葉を聞いてまた鳥肌立ちました。
Reddit Placeもそうですが人が最も影響を受けるものって人なんですね
自分もオリジナルのSNSを作りたいと思うようになりました。
僕もこんな人生歩みたいなぁ

#まとめ
もうまとめです。この記事を書いて分かったことはあんまり文章で感動って伝わらないんですね。。。
この二つを見たときはまじで震えたんですけどね。文章力鍛えます( ;∀;)

僕のAmmotアカウント

https://ammot.net/user/yamada(%E9%96%8B%E7%99%BA%E8%80%85)

僕のツイッターアカウント
https://twitter.com/yamada1531
[C++] std::functionの練習

# もくじ

https://tera1707.com/entry/2022/02/06/144447

# やりたいこと

以前、久々に[関数ポインタを触ったから復習をする](https://qiita.com/tera1707/items/89535b0a3e1d66acbafd)という記事を書いたが、今どきのC++では関数ポインタなんてものは使わないらしい、、、ということを職場の人に聞いた。

代わりに`std::function`というものを使うらしい。

`std::function`...聞いたこともない...となってしまったので、使い方を練習したい。

# std::functionについて

C++11で実装された機能で、関数ポインタの代わりになる＋それ以上に便利な機能があるらしい。
下に練習したときのコードを残しておく。

# 練習したときのコード

関数ポインタとstd::functionで使い心地の違いを比較するイメージで練習コードを書いた。

```cpp
#include <iostream>
#include <functional>

// 実験用 普通の関数
int func(int val) { return val * 2; }

// 実験用クラス
class MyClass
{
public:
	// 実験用 メンバ関数
	int func(int val) { return val * 4; }
};

//--------------------

// メイン関数
int main()
{
	///////////////
	// 普通の関数
	///////////////
	// 関数ポインタ
	int (*pfunc1A)(int) = func;
	std::cout << pfunc1A(1) << std::endl;

	// std::function
	std::function<int(int)> pfunc1B = func;
	std::cout << pfunc1B(2) << std::endl;

	///////////////
	// クラスのメンバ関数
	// ※メンバ関数の場合は、
	// 　・メンバ関数へのポインタ
	// 　・クラスのインスタンスそのものorポインタ
	// 　の合わせ技が必要。
	///////////////
	// 関数ポインタ
	MyClass mycls;					// ローカルインスタンスの場合(stack)
	MyClass* pcls = new MyClass();	// newした場合(heap)

	int (MyClass::*pfunc2A)(int) = &MyClass::func;// メンバ関数へのポインタ

	std::cout << (mycls.*pfunc2A)(3) << std::endl;// stack
	std::cout << (pcls->*pfunc2A)(3) << std::endl;// heap

	// std::function
	std::function<int(int)> pfunc2B = std::bind(&MyClass::func, &mycls, std::placeholders::_1);
	std::cout << pfunc2B(4) << std::endl;

	///////////////
	// ラムダ
	///////////////

	// 関数ポインタ
	int (*pfunc3A)(int) = [](int a) -> int { return a * 5; };
	std::cout << pfunc3A(5) << std::endl;

	// std::functioni
	std::function<int(int)> pfunc3B = [](int a) -> int { return a * 6; };
	std::cout << pfunc3B(6) << std::endl;

	system("pause");
}
```

# 使った感じ

- 関数ポインタは、書いた感じ、どれが名前なのか？とか、なんかごちゃっとしててわかりづらい、という印象を受けてしまうが、std::functionは見た目もすっきりしていて書きやすいと感じた。
- メンバ関数を扱う場合の、関数ポインタとstd::functionのコード量の差が大きく、そういうところが便利なんだろうとは思った(が、そういう使い方をまだしたことがないので実感ナシ)

という感触だったので、見た目がすっきり、コード量減る、ということであれば使っていきたいと感じた。

# 参考

基本的な使い方がわかりやすかったページ

https://torini.hateblo.jp/entry/2015/03/22/%E9%96%A2%E6%95%B0%E3%83%9D%E3%82%A4%E3%83%B3%E3%82%BF%E3%82%88%E3%82%8A%E3%82%82std%3A%3Afunction%E3%82%92%E4%BD%BF%E3%81%8A%E3%81%86

メンバ関数を扱うときの「合わせ技」の理解につながったページ

https://maku77.github.io/cpp/syntax/pointer-to-member-method.html

メンバ関数のアドレスの取り方を見たページ

http://www7b.biglobe.ne.jp/~robe/cpphtml/html03/cpp03057.html

bindって何？となったときに見たページ

https://qiita.com/tkyaji/items/1aa7bb01658e848d3ef4
AngularアプリをS3でホスティングするとこけた話

<h1>前回までのあらすじ</h1>
https://qiita.com/NoOne/items/51383d096b6a4760b2dd

<h1>HTMLvideoが使えない!</h1>
こちらの記事の通りにS3へホスティングするもnavigator.mediaDevicesでビデオが起動しないエラー。
https://qiita.com/BBA/items/4de0132e63a371da4626

調べたところ記事の内容でS3へのホスティングはできてはいるのですが、SSL化されていない(http)とvideoデバイスへのアクセスができないとのことです。

```app.component.ts
import { Component } from '@angular/core';
import { ImgService } from './img.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  { 
  constructor(private service: ImgService) { }
  private video: any;
  result: String = ""; 

  ngOnInit(): void {
    this.video = document.querySelector('video')!;

    const options = {
      video: true
    }
    //ここが怒られてしまう
    navigator.mediaDevices.getUserMedia(options)
    .then(stream => {
      this.video.srcObject = stream;
    })
    .catch((error) =>{
      console.log(error);
    })
  }

  captureImg(){
    let canvas = document.getElementById('canvas') as HTMLCanvasElement;
    const context = canvas.getContext('2d');
    context?.drawImage(this.video, 0, 0, canvas.width, canvas.height);
    let base64CapturedImg : ConstrainDOMString = canvas.toDataURL("image/png");
    this.service.transferImg(base64CapturedImg).subscribe(
      data => this.result = data,
      error => console.log(error)
    );
  ;
  }
}

```

<h1>CloudFrontでドメインをSSL化</h1>
以下の手順でDistributionを設定し作成すると無事SSL化でき、ビデオもアクセス可能になりました。

<h1>①S3にデプロイして取得したドメイン名を選択</h1>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630191/01f83718-7cc7-45b3-a916-f26d4e035733.png)
<hr>

<h1>②Viewer Protocol PolicyをRedirect HTTP to HTTPSに</h1>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630191/a7f6de91-6af5-61cc-ef57-e478cc3b12c0.png)


<hr>

<h1>③Default Root ObjectにS3で指定したインデックスドキュメントと同じように記述(デフォルトはindex.html)</h1>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630191/767e0498-9ce9-4da6-1bc9-d591694feae7.png)

<h1>感想など</h1>
S3にホスティングだけでこけるとは思いませんでしたが、カメラ等デバイスにアクセスするにはSSL化が必要というのは今後またどこかで役立ちそうな知識でよかったです。Springの方も確実にホスティングこけますが頑張ります。
ssh -Vコマンドをechoコマンドで出力する際に改行されるのを解消したい(puppet boltによるスクリプト実行)

こんにちは、tanzoです。

今回はLinuxのコマンドを勉強する際に詰まった部分があるので、ご紹介したいと思います。
備忘録程度なので、ご容赦ください。

#やりたいこと
以下のコマンドを実行した時、出力結果に謎の改行が入るのを解消したい

`コマンド`

```
[yuta@localhost bin]$ ./bolt script run get.sh --targets @ip_info.txt
省略
Started on ユーザ名@IP...
Started on ユーザ名@IP...
Finished on ユーザ名@IP:
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　←　なんでここ一行空いてるんだ？
  OpenSSH_8.0p1, OpenSSL 1.1.1g FIPS  21 Apr 2020
省略
```


#get.shファイルの中身

`コマンド`

```
[yuta@localhost bin]$ cat get.sh
echo "`ssh -V`" 
```


#考えた果てに出た結論
`コマンド`

```
[yuta@localhost bin]$ cat get.sh
printf "`ssh -V`"               ←　　echoをprintfに変更した
```


#変更後の実行結果

`コマンド`

```
[yuta@localhost bin]$ ./bolt script run get.sh --targets @ip_info.txt
省略
Started on ユーザ名@IP...
Started on ユーザ名@IP...
Finished on ユーザ名@IP:
  OpenSSH_8.0p1, OpenSSL 1.1.1g FIPS  21 Apr 2020   ←　改行が無くなってる！
省略
```

#最後に
echoコマンドはダブルクウォーテーションの中は一行で表示されると思ってたけど、「ssh-V」というコマンドとは
相性が悪いみたい。。。。笑
→　解消したのは良かったけど、なんで解消したかよくわからなかったので、ここはまた勉強しないといけないね。。。笑
リンクの/book/1/とかをハッシュ化するgemのhashids.rbがめちゃ簡単に搭載できた～！

Railsでbook#showとかのメゾットだと```/book/1とか/book/2```とかIDがバレてしまうので、これを使うと```/book/Gdwksoとか/book/kDmesr```とかに勝手にしてくれる

公式読んでやってみたら15分くらいで出来てめちゃくちゃ簡単だったのでメモー！
色々変更になるかもしれないのでちゃんとしたものは公式をご参照くださいっ
https://github.com/jcypret/hashid-rails

##①インストール

```ruby:Gemfile
gem "hashid-rails", "~> 1.0"
```

```ruby:console
$ bundle install
```

##②設定を行う
config/initializerにhashid.rbを作成して下記を追加

```ruby:config/initializer/hashid.rb
Hashid::Rails.configure do |config|
  # The salt to use for generating hashid. Prepended with pepper (table name).
  config.salt = "yasashii oshio" #ここは任意に言葉を変えます

  # The minimum length of generated hashids
  config.min_hash_length = 6

  # Whether to override the `find` method
  config.override_find = true

  # Whether to override the `to_param` method
  config.override_to_param = true

  # Whether to sign hashids to prevent conflicts with regular IDs (see https://github.com/jcypret/hashid-rails/issues/30)
  config.sign_hashids = true
end
```

```"yasashii oshio"```のところは```ENV['HASHIDS_SALT']```みたいに環境変数化しても大丈夫です

```ruby:model
class Book < ApplicationRecord
  include Hashid::Rails #この一行を追加
:
:
end
```

hashidsを使いたいモデルに上記を追加します

これで終わり！
```Book.find(params[:id])```がオーバーライドされて勝手にハッシュのIDで何とかしてくれます（すごい）

##find_byを使いたいとき

```ruby:controller
book = Book.find_by_hashid(params[:id])
```

これでBook.find_by(id: params[:id])のような使い方が出来、該当がない時はnilで帰ってきます。
他の使い方は分からないです・・・m(_ _)m

---

相違点あったら教えてくださると嬉しいです！
切り抜く要素のサイズに合わせてSVGでclip-pathする

## 発生した問題
何も考えずSVGで要素を`clip-path`すると、切り抜きたい要素のサイズに合わせて切り抜いてくれませんでした。

こうなって欲しいのに...
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/92ad8d36-781b-6952-fa97-10a1928fd4ac.png" width=300>

こうなる...
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/8f7dd207-cfd4-7492-09ff-d8a53d718504.png" width=300>


## 問題発生時のコード

この問題が発生しているとき、みなさんのソースコードも以下と似た状態だと思います。
JSXなので少し記述がHTMLと異なりますが、読み替えていただけると幸いです。

```react
// 切り取りたいSVGの形
<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 103.758 103.758"
  height={0}
  width={0}
>
  <clipPath id="super-ellipse">
    <path
      d="M64.36,13c35.815,0,52.4,15.545,52.4,51.36s-16.583,52.4-52.4,52.4S13,100.175,13,64.36,28.545,13,64.36,13Z"
      transform="translate(-13 -13)"
      fill="none"
    />
  </clipPath>
</svg>


// 切り取る対象の要素
<img
  src={profileImageSrc}
  style={{ clipPath: 'url(#super-ellipse)' }}
/>
```

## 解決方法

1. clipPathに`clipPathUnits="objectBoundingBox"`をつける
1. pathのサイズを`0-1`に正規化する

1.はそのままなのですが、2.のpathのサイズを正規化するというのが重要です。`clipPathUnits="objectBoundingBox"`をつけると、pathがviewBoxの範囲ではなく、`0-1`の範囲で描画されるようになります。

pathの項目一つ一つの数値をviewBoxの数値で割ることでも可能ではありますが、手っ取り早くtransformでscaleを指定しましょう。

scaleで指定する数値は、以下の計算で求めることができます。
`1 / viewBoxの数値`

transformで`translate`等が指定されていれば、その数値も`viewBoxの数値`で割る必要があります。

上記のコードの場合は、scaleに指定する数値は、

```math
scale = 1 \div 103.758 = 0.009637
```

transformの数値は、

```math
transform = -13 \div 103.758 = -0.125281
```

です。

## 解決後のコード

```react
<svg>
  <clipPath id="super-ellipse" clipPathUnits="objectBoundingBox">
    <path
      d="M64.36,
      13c35.815,
      0,
      52.4,
      15.545,
      52.4,
      51.36s-16.583,
      52.4-52.4,
      52.4S13,
      100.175,
      13,
      64.36,
      28.545,
      13,
      64.36,
      13Z"
      transform="translate(-0.125281 -0.125281) scale(0.009637)"
    />
  </clipPath>
</svg>

// 切り取る対象の要素は同じ
```

切り抜けました！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/92ad8d36-781b-6952-fa97-10a1928fd4ac.png" width=300>

ちなみに今回切り抜いたSVGの形は、スーパー楕円という図形です。
[丸よりも丸みを感じる!? スーパー楕円の魅力とデザイン](https://spinners.work/posts/kudakurage-superellipse-desgin/)
【初心者向け】Windows10でNode.jsとnpmをポータブルに活用する方法

ローカル環境を構築するのに、いまだに苦労している私です。

最近Vue.jsでの実装のため、Node.jsとnpmをポータブルバージョンで環境構築しました。

何とか構築は終わったのですが、やり方を忘れてしまいそうだったので、ここに手順をまとめてみました。

かなり初心者向けなので、予めご了承ください。

# そもそも、Node.jsとnpmは何者か？
Node.jsとnpmについて、超ざっくりに説明すると、

- Node.jsは、サーバーサイドで稼働するJavaScript
- nmpは、Node.jsのパッケージを管理するツール

となります。

パッケージとは、元々用意されている便利な機能をまとめたものです。

# Node.jsとnpmをダウンロードする
まずは、Node.jsとnpmを使用できるようにします。

## zipファイルをダウンロード

Node.jsのダウンロードページにアクセスします。

https://nodejs.org/ja/download/

今回はzip形式で取得したいので、「Windows Binary(.zip)」を選択します。
[![Image from Gyazo](https://i.gyazo.com/428eb7c8ab5bba2f8fe1d1ffc4673f1f.png)](https://gyazo.com/428eb7c8ab5bba2f8fe1d1ffc4673f1f)

32-bitか64-bitにするかは、お使いのPC環境によって異なります。

https://www.e-soft.net/post-1693.html

ダウンロードしたzipファイルは、ローカルディスクのDドライブに解凍しておきます。

## cmdファイルの作成
解凍したフォルダ内に、「任意の名前.cmd」のファイルを作成します。
ファイルは「エディタ」か「メモ帳」で作成してください。

作成したファイル内に、下記の記載をします。

```:任意の名前.cmd
@echo off
set PATH=%PATH%;%cd%
set NODE_PATH=%cd%\node_modules\npm\node_modules;%cd%\node_modules\npm
cmd
```

このとき、「メモ帳」を使って保存する場合は、文字コードを`ANSI`にしないと上手く機能しません。

文字コードを確認するには、ファイルの「名前を付けて保存」をクリックします。
表示されるポップアップの「保存」ボタンの横に、文字コードが表示されていますね。

## コマンドプロンプトで操作
先ほど作成したcmdファイルをダブルクリックすると、コマンドプロンプト（黒い画面）が開きます。

ここで、下記のコマンドを入力し、バージョンが確認できれば問題ないです。

```:cmd
node -v
npm -v
```

# パッケージをインストールできるようにする
パッケージをインストールするには、プロキシ設定をする必要があります。

今回は、Vue.jsをインストールする際の手順をまとめます。

## コマンドプロンプトで操作
先ほど作成したcmdファイルをダブルクリックして、コマンドプロンプトを出します。

コマンドプロンプトを立ち上げたら、下記のコマンドを入力します。

```:cmd
npm -g config set proxy http://プロキシサーバアドレス:ポート
npm -g config set https-proxy http://プロキシサーバアドレス:ポート
npm -g config set registry http://registry.npmjs.org/
```

ご自身のプロキシサーバアドレスとポートの調べ方については、こちらが参考になります。

https://ari23.hatenablog.com/entry/proxy

## 環境変数を設定

続いて、環境変数の設定方法です。

環境変数とは、OSそのものが持っている変数のことです。

`[Windows]＋[R]`キーで「ファイル名を指定して実行」を表示させます。
そして、「sysdm.cpl」と入力して実行します。

https://www.atmarkit.co.jp/ait/articles/1804/26/news035.html

システムのプロパティが表示されますので、詳細設計タブをクリックします。

そして、詳細設定タブの下にある「環境変数」ボタンを押します。

「環境変数」画面が表示されると、ユーザ環境変数とシステム環境変数の2種類があります。

ここでは、ユーザ環境変数に「新規」ボタンで、下記の変数と値を追加します。

```
HTTP_PROXY http://プロキシサーバアドレス:ポート
HTTPS_PROXY http://プロキシサーバアドレス:ポート
```

表にすると、次のような感じです。

|変数名|値 |
|----|----|
|HTTP_PROXY|http://プロキシサーバアドレス:ポート|
|HTTPS_PROXY|http://プロキシサーバアドレス:ポート|

`HTTP_PROXY`と`HTTPS_PROXY`は、プロキシ設定やnpmで使用する変数です。

次に、ユーザ環境変数に`Path`という変数が登録されているかと思います。

`Path`は、Node.jsコマンドを利用できるようにするための変数です。

`Path`を選択し、「編集」ボタンを押します。

「環境変数名の編集」画面が表示されたら、「新規」ボタンを押して、Node.jsの解凍ファイルが格納されているフォルダのパスを追加してください。

例えば、`D:¥〇〇〇`のような感じです。

## Vue.jsをインストール

最後に、コマンドプロンプトに下記のコマンドを入力して、Vue.jsをインストールします。

```:cmd
nmp install -g @vue/cli
npm install -g @vue/cli-service-global
```

無事インストールされているか、下記のコマンドでバージョン確認してみましょう。

```
vue -V
```

Vue.jsのインストールがうまくいかない場合は、IEを起動し、Google画面を開いてから、コマンドプロンプトでインストールのコマンドを入力してみてください。

こうすることで、プロキシの認証ができるようになります。

# 終わり
これで、Windows10でNode.jsとnpmをポータブルに活用する方法のまとめは以上になります。

ローカル環境を立ち上げるのにも一苦労しますね…。

なので、こうして手順をまとめる機会があって良かったです。

ここまで読んでいただき、ありがとうございました。

#参考記事
https://www.cottpic.com/2019/04/use-NodeJS-without-installer.html

https://qiita.com/flat-8-kiki/items/f71f5375a053fab01033
ARFoundation キャラクターを平面に隠す・平面から出す

GameObjectを作成し、Occlusion Boxに名前を変更する。Cubeを作成する
![442BFE3F-44F5-4399-A9AC-58E2718F1E30_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/8428b1df-c7b1-fd77-3281-f82b637a8e3a.jpeg)

Occlusion BoxにCubeを子オブジェクトにする。CubeのYを−0.5にする。
![33E17DC3-437E-4B79-B352-79BF9F03D18D_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/59a37560-e0aa-f2d7-7202-2b46140d161a.jpeg)

Occlusion BoXにCharacterを子オブジェクトにする。CharacterのYを−１にする。
![04131D3E-D25C-48A0-B6D5-20484DEC1AA2.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/a3c5e79a-5d54-a267-7698-e5f6f512c3b3.jpeg)


```C#:MoveupCharacter
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class MoveupCharacter : MonoBehaviour
{
    private float speed = 0.1f; //キャラクターが移動する速さ

    void Update()
    {
        //キャラクターが箱から出たら停止する
        if (transform.localPosition.y < 0f)
        {
            //上方向に移動させる
            transform.localPosition += transform.up * speed * Time.deltaTime;
        }
    }
}
```


CharacterにMoveupCharacter.csをアタッチする
![DE4BF7E3-8F82-49BC-9558-88052A597F7C.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/5c89e581-9c8c-8ec7-1f00-e14cc9f3688b.jpeg)

AR SessionOriginのRaycastスクリプトにOcclusion Boxプレハブをアタッチする
![373BD392-2D5F-4F30-A141-D9C278290A20.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/4e2c6694-225c-2c7b-6233-a8103913fa6d.jpeg)
templateプロパティ

短いものなら（４行にわたってとかみたいに）tempeteプロパティにタグごと書いてviewで表示できます。


```vuejs
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <div id="app1"></div>
<script>
  var vm1 = new Vue({
    el: '#app1',
    data: {
      message: 'こんにちは'
    },
    template: '<p>●●さん{{message}}</p>'
  })
</script>
</body>
</html>
```

![20210507-222943.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/4c6c2542-7867-2fa3-53d3-aa4cfe7e6154.png)
[AWS]Aws::Sigv4::Errors::MissingCredentialsError: Cannot load `Rails.config.active_storage.service`:

#はじめに
未解決エラーについて一旦忘れないようにこちらに記載します
[追記]解決しました！！とてもしょうもないミスでした、、、、

#環境
ruby 2.6.5
Rails 6.0.0

# エラー内容
[こちらの記事](https://qiita.com/Yuki_Nagaoka/items/1f0b814e52e603613556)を参考に、AWSへもデプロイをしていこうと進めておりましたところ、Unicorn起動がうまく行かず、、、、

```terminal
[tochikawa@ip-10-0-0-132 log]$ bundle exec unicorn_rails -c /var/www/rails/soccer_app/config/unicorn.conf.rb -D -E production
master failed to start, check stderr log for details
```

とりあえずログを見てみることに、、、すると、気になる表示が！！

```terminal
Aws::Sigv4::Errors::MissingCredentialsError: Cannot load `Rails.config.active_storage.service`:
missing credentials, provide credentials with one of the following options:
```

あ〜credentialまわりでなんか起きているなああということで情報収集したところ、[この記事に記載のこと](http://code-aim.work/master-failed-to-start/)が原因かな〜と確信！！

しかし、一向に治らず、、、


どうもcredentialsとmaseter.keyがうまくあってないような気がするんですが、ここは間違いなく大丈夫、、
何が原因わからないよ〜〜〜！！！

#[追記] 原因判明

原因は以下二つだったことが判明

1.credentials.yml.encにaccess_key等が設定されていなかった
2.storage.ymlのインデントミス

正直恥ずかしいまでに初歩的なミスです。
けれどおかげさまで、この辺りの知識メッッチャ増えました！

#おわりに
転職活動中のみですので、早く完成させたい！と思い焦ってしまいましたが、一度落ち着いてよくみてみるとたいしたことなかったりしますね笑
Jupyter NotebookでRを動かす（Windows）（Anaconda使わないver.）

# 1. はじめに
RをJupyter Notebookで動かす方法を調べると、Anacondaを使う方法ばかり見つかります。そこで、Anacondaに慣れていないPythonエンジニアが、Anacondaを使わずに、RをインストールしてJupyter Notebook上で使用するまでをまとめました。

# 2. 手順
## 2-1. Pythonの環境構築
Pythonそのものはインストール済みだとします。
とりあえずvenvで仮想環境を作り、jupyterをインストールします。

```:コマンドプロンプト
       C:\path\to\your\dir>python -m venv venv
       C:\path\to\your\dir>venv\Scripts\activate
(venv) C:\path\to\your\dir>python -m pip install jupyter
```

## 2-2. Rのインストール
2021年5月7日現在、R-4.0.5が最新のバージョンです。

1. [こちらのリンク](https://cran.r-project.org/bin/windows/base/)の**Download R 4.0.5 for Windows**をクリックして、**R-4.0.5-win.exe**をダウンロードします。
1. **R-4.0.5-win.exe**をダブルクリックしてインストールを行います。とりあえずデフォルトの設定にしました。
1. 環境変数のパスに、インストールしたRを追加します。私の環境では**C:\Program Files\R\R-4.0.5\bin**を追加しました。
1. コマンドプロンプトでRと打つと、Rが起動することを確認します。

```:コマンドプロンプト
(venv) C:\path\to\your\dir>R

R version 4.0.5 (2021-03-31) -- "Shake and Throw"
Copyright (C) 2021 The R Foundation for Statistical Computing
Platform: x86_64-w64-mingw32/x64 (64-bit)

R は、自由なソフトウェアであり、「完全に無保証」です。
一定の条件に従えば、自由にこれを再配布することができます。
配布条件の詳細に関しては、'license()' あるいは 'licence()' と入力してください。

R は多くの貢献者による共同プロジェクトです。
詳しくは 'contributors()' と入力してください。
また、R や R のパッケージを出版物で引用する際の形式については
'citation()' と入力してください。

'demo()' と入力すればデモをみることができます。
'help()' とすればオンラインヘルプが出ます。
'help.start()' で HTML ブラウザによるヘルプがみられます。
'q()' と入力すれば R を終了します。

>
```

## 2-3. Jupyter NotebookにRを表示させる

インストールするのはIRkernelのみで大丈夫です。

```R:コマンドプロンプト（R起動済み）
> install.packages('IRkernel')
```

```
Would you like to use a personal library instead? (yes/No/cancel) yes
Would you like to create a personal library
'C:\Users\username\Documents/R/win-library/4.0'
to install packages into? (yes/No/cancel) yes
 --- このセッションで使うために、CRAN のミラーサイトを選んでください ---
...
...（インストール情報が表示されます）
...
```

その後、以下を実行すれば完了です。

```R:コマンドプロンプト（R起動済み）
> IRkernel::installspec()
```

```
[InstallKernelSpec] Installed kernelspec ir in C:\Users\username\AppData\Roaming\jupyter\kernels\ir
```

実際にJupyter Notebookを開いて確認します。

```:コマンドプロンプト
(venv) C:\path\to\your\dir>jupyter notebook
```

以下のように、NewをクリックするとRが出てくるようになります。
![new_R.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1432808/53dd10d7-8e01-0f09-e49a-a5b4a2281e28.jpeg)

これで、Jupyter NotebookでRが実行できるようになりました。
![exec_example.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1432808/59af1f09-532c-7dc8-6da8-877bf4670f32.jpeg)

# 3. 参考
- [Jupyter NotebookでRを動かす（Windows10）ローカルアカウントでも。](https://qiita.com/nizu708/items/fc26d8a91be0dcebfdac)
- [Windows 版 R でインストール後にやっておくと便利な設定](https://www.agr.nagoya-u.ac.jp/~seitai/document/R_intro2008/R_settings.pdf)
$mount


$mountは後付けでvueインスタンス内部のelを設定したい場合に使います。


```vuejs
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <div id="app1">
     <p>{{message}}</p>
     <p>{{name}}</p>
  </div>
<script>
  var data = {
    message: 'こんにちは',
    name: '前田'
  }
  var vm1 = new Vue({
    data: data
  })

  vm1.$mount('#app1')
</script>
</body>
</html>
```

![20210507-221421.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/d3017a74-e03d-c175-9e76-697c473f364d.png)

以下も同じになります

```vuejs
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <div id="app1">
     <p>{{message}}</p>
     <p>{{name}}</p>
  </div>
<script>
  var data = {
    message: 'こんにちは',
    name: '前田'
  }
  var vm1 = new Vue({
    data: data
  }).$mount('#app1')
</script>
</body>
</html>
```
Python から HTTP POST リクエストで Node-RED と連携するメモ（Python３版）

Pythonプログラムの結果をNode-REDに送りたくて
1ft-seabass.jp.MEMOさんの記事
[Python から HTTP POST リクエストで Node-RED と連携するメモ](https://www.1ft-seabass.jp/memo/2021/01/22/python-http-post-request-to-nodered/)を参考に試したら

```py
Traceback (most recent call last):
File "nodered.py", line 3, in <module>
import urllib2
ModuleNotFoundError: No module named 'urllib2'
```

とエラーが出ました。
色々ググってみると
urllib2がPython３では使えないとわかりました。
参考サイト
[python のModule urllib2 を利用する方法を教えて下さい](https://teratail.com/questions/47744)

Python３のモジュールは
urllib.requestに変更する事で
動き出したので変更箇所をまとめます。

![スクリーンショット 2021-05-07 22.35.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51752/d4747263-b0b4-da4c-e2a7-0b0a02c19c9b.png)


3行目

```py
import urllib2
```

モジュールを

```py
import urllib.request
import urllib.parse
```
に変更


33行目

```py
request = urllib2.Request(url)
```
を

```py
request = urllib.request.Request(url, data.encode())
```
に変更


３７行目

```py
response = urllib2.urlopen(request,data)
```

を

```py
response = urllib.request.urlopen(request)
```
に変更

まとめプログラムは
違いが分かりやすいように
1ft-seabass.jp.MEMOさんのプログラムで試しました。

```py
import urllib.request
import urllib.parse
#import urllib2
import json

params = {}

### JSON データ設定
# https://docs.python.org/ja/3/library/json.html

# Dictionary(object)
params["x"] = 10
params["y"] = -10
params["z"] = 5

# Array
params["arr"] = []
params["arr"].append(["id1","A"]) # append Array
params["arr"].append(["id2","B"]) # append Array
params["arr"].append({"id3":"C"}) # append Object
params["arr"].append({"id4":"D"}) # append Object

### HTTP リクエスト設定
# python3 https://docs.python.org/ja/3/library/urllib.request.html
# python2 https://docs.python.org/ja/2.7/library/urllib2.html

# JSON データを文字列化
data = json.dumps(params)
# print(data)

# Content-Type application/json を HTTP Header に加える
url = 'http://localhost:1880/test'
#request = urllib.request.Request(url)
#request.add_header('Content-Type','application/json')

# POST リクエスト
#response = urllib.request.urlopen(request,data)

request = urllib.request.Request(url, data.encode())
request.add_header('Content-Type','application/json')

# POST リクエスト
response = urllib.request.urlopen(request)

### HTTP レスポンス
print('code',response.getcode())
# 結果 : ('code', 200)

# 返答データを抽出
response_data = response.read()
print('response_data',response_data)
# 結果 : ('response_data', '{"result":"OK"}')

# さらに返答データを JSON として取り出す
response_json = json.loads(response_data)
print('response_json["result"]',response_json["result"])
# 結果 : ('response_json["result"]', u'OK')
```

これで念願の画像処理はPythonで行い他との連携はNode-REDでできるよになりました。
また次頑張ります。
usermodコマンドでユーザ名が変えられない（VirtualBox使用している人なら陥るかも)

こんにちは、tanzoです。

本日は、Virtual Box初心者なら陥ってしまうかもしれないような部分を紹介したいと思います。　→　多分、陥るのは初心者でも僕くらいだと思いますね笑笑


#usermodコマンドでユーザ名が変えられない
タイトルにもあると思うんですが、usermodが使えない!という方向けの記事です。

さっそくコマンド見ていきましょか

`コマンド`

```
[root@localhost ~]# usermod -l hoge moge 　→　　usermod -l 新しい名前 古い名前
usermod: user moge is currently used by process xxxx →　xxxxは各自のPid
```

上記は色々な記事でも取り上げられていて、mogeというユーザで何らかのプロセスが実行していて、名前変えられないよっていうエラーなのですが、自分の場合はプロセスを止めちゃえばいいんじゃない？って思って、以下のコマンド試しましたが、ダメでした。

`コマンド`

```
[root@localhost ~]# kill xxxx 　　→　　　　xxxxは各自のPid
```



#原因はなんだったのか？

簡潔に言いますと、teratermとvirtualboxに同時にログインして、どちらかをmogeという名前のユーザでログインしていたことが原因でした。。。。。

→　mogeでログインしてるってことはmoge使ってるってことだよね


#最後に
自分はいつもVirtualBoxでログインした状態でteraterm立ち上げてログインするという謎の癖（癖の理由は話せば長いです笑）があったので、これからはteratermだけログインするということを心掛けたいと思います。。。


#参考文献
* https://nekodeki.com/linux%E3%81%AE%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E5%90%8D%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B/
* https://uxmilk.jp/50638
visudo: /etc/sudoers がビジー状態です。後で再試行してくださいエラーへの対応

#はじめに
ポートフォリオサイトをAWSへデプロイする際に上記エラーが発生したため、その時の解決手順を記載します。
今回は「sudo visudo」コマンドを入力した際にエラー表示され、ターミナルでのコマンド入力が何もできなくなってしまいました。
エラー内容としては他で既にvisudoが起動しているから重複して起動できませんよーといったものだが、他で起動した記憶が全くない状況でした。
後々考えると、一度ターミナルを強制終了していたので、おそらくそのせいだと思います。

#解決に向けて
結論からいくと、プロセスIDが正常に切断されていなかったことが原因でした。
そのためプロセスIDを消去してあげる必要があります。

①ターミナル上でルートディレクトリに移動。
※どの状態でエラーが発生したかによって、実行するディレクトリも異なってきます。例えばec2-userの状態でエラーが発生したのであれば、ルートディレクトリではなく、ec2-userにて削除を実施する必要があります。

```:ターミナル
*****@***** ~ %    *はPCのユーザー情報
```

②psコマンドにてプロセスIDの確認

```:ターミナル
*****@***** ~ %ps
```

③プロセスIDの削除
②のコマンド入力で、

```:ターミナル
  PID TTY           TIME CMD
10490 ttys000    0:00.14 -zsh
```
のような表示がされると思います。
そこで該当のPID(プロセスID)を削除します。
削除するコマンドは、killもしくはkill-9となります。(kill-9は強制的に終了するコマンド)

```:ターミナル
*****@***** ~ %kill PIDの値　もしくは　kill-9 PIDの値
```

プロセスID削除後に再度試すとエラーが発生せず動作しました。
$dataでvueインスタンスで取得できるものを表示させる

console.logを使ってvm.$dataとするとvueインスタンスで取得できるものを表示できます。


```vuejs
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <div id="app1">
     <p>{{message}}</p>
     <p>{{name}}</p>
  </div>
<script>
  var data = {
    message: 'こんにちは',
    name: '前田'
  }
  var vm1 = new Vue({
    el: '#app1',
    data: data
  })
  console.log(vm.$data)
</script>
</body>
</html>
```

![20210507-220023.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/9bf75ad1-f312-d8a0-c643-e493b78ea335.png)
インスタンス外からdataを設定する


```vuejs
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <div id="app1">
     <p>{{message}}</p>
     <p>{{name}}</p>
  </div>
<script>
  var data = {
    message: 'こんにちは',
    name: '前田'
  }
  var vm1 = new Vue({
    el: '#app1',
    data: data
  })
</script>
</body>
</html>
```

![20210507-215518.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/74b2a301-5f23-1f24-8970-a33e552f54d9.png)
PHPとは


##PHP##
PHPとは動的にWebページを生成することができるサーバーサイドのスクリプト言語です。他の言語と比べて文法もわかりやすく初心者には勉強しやすい言語になっています。

また、MySQLなどのデータベースとの連携が容易なことなどから、WordPressを含めたWebアプリケーションの開発にもよく使われる有名なスクリプト言語です。

##言語バージョン##
こちらの記事では

- PHP version 7.3.11
- ブラウザ　Google Chrome

##基本的な書き方##
PHPを使用した書き方は以下のようになります

```index.php
<?php

//処理したい内容

?>
```

<?php ?>の間に処理の内容を書いていきます。
？とphpの間に半角スペースを入れるとエラーになるので注意です

###「?>」の省略について###
?>のあとにHTMLやJavaScriptなどの他の言語のコードがない時は「?>」を省力することができます

```index.php
<?php

//処理したい内容

```

###HTML内に記述###
PHPはHTML内に記述することができます。

```index.php

<h1><?php echo 'Hello World!'; ?></h1>

```

下記と同じ内容になります。

```index.html

<h1>Hello World!</h1>

```

今回は以上です
Vue のリアクティブシステム

vueのリアクティブシステムとは

```vuejs
new Vue({
  el: '#app',
 data: {
    fruits: ['りんご','バナナ','キィウイ']
       },
    methods:{
    remove: function(),
      this.fruits.shift()
      }
    }
})
```

配列の中身を変えるとそれに従って表示されるフルーツの中身も変わるということ。
ここからわかるルール。

**リアクティブさせたいのなら初めからデータ内部にリアクティブにしたいプロパティを含めておくこと。**
-

viewはviewインスタンスを見渡してそこにあるプロパティに対してsetterとgetterを用意する。

以下のインスタンスのvm1をコンソールで中身を見てみる。

```vuejs
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <div id="app1">
     <p>{{message}}</p>
  </div>
<script>
  var vm1 = new Vue({
    el: '#app1',
    data: {
      me
ssage: 'app1'
    }
  })

  console.log(vm1)
</script>
</body>
</html>
```

のぞくと

![20210507-214239.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/dd1ea6b7-43ca-48ac-1ca4-bf8055581561.png)


下の方に
get message
set message
があるのがわかる。これによってリアクティブシステムは動いてます。