OmniAICreator/Qiita-1.07M huggingface dataset:
ApacheでのWebサーバ構築

#概要
AWSのEC2上にWebサーバを構築します。
Webサーバにはいくつが種類がありますが、今回はApacheを使用します。

#環境
PC：MacBook Air(2019)
EC2(AWS仮想サーバ)

#関連記事

https://qiita.com/onnov20/items/9c96db0c01898f4d1fd8

#1.rootユーザへのログイン
Linux上で使用する様々な機能のことをパッケージと呼びます。
パッケージのインストールはEC2上の重要な変更なので、
ec2-userではなく最上位の権限をもつrootユーザにログインします。
rootユーザは非常に大きな権限を持つユーザですのであくまで個人用に留めましょう。

```
$ sudo su -
```
「sudo -i」でもほぼ同じらしい。
![スクリーンショット 2021-08-08 17.35.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1860147/c6d62ed7-f129-4d4d-632f-77c4e653e8c2.png)
rootユーザにログインするとコマンド入力の前が＄から#になります。



#2.Apacheのインストール
Webサーバの構築に必要なパッケージをEC2にインストールします。
PC本体ではなくEC2上で行うためターミナルにコマンドを入力します。

```
# yum -y install httpd
```

![スクリーンショット 2021-08-08 17.43.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1860147/9c48a960-1788-3bf8-cdb5-1cc38d6de53f.png)
「yum」はパッケージをインストールするコマンドです。
自動的に最新版をインストールしてくれる他、既にインストールされているかどうかを調べ、
インストール済みの場合は処理をストップします。
「-y」は本当にインストールしますか？的な処理中の質問全てにyesと回答するオプションです。
「httpd」はApacheのパッケージ名です。ややこしいですよね。

入力後Enterを押すとインストールが開始されます。

![スクリーンショット 2021-08-08 17.59.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1860147/c072db9e-7a58-8b74-cc0e-c9bbb40b95f0.png)
Complete!と元気よくお知らせしてくれました。
余談ですが、新人エンジニアはでかい声でわかりません！ありがとうございました！
と返事しておけば大体なんとかなります。たぶん。

#3.Apacheの起動
インストールしたパッケージはそのままでは機能しません。
コマンドを叩いて起動させる必要があります。

```
# systemctl start httpd
# systemctl enable httpd
# systemctl status httpd
```
起動させて、次回からEC2を立ち上げたら自動で起動するようにして、ちゃんと動いてるかな？
と確認するような一連の流れが上記の3つのコマンドです。
下二つは起動自体には影響ないですが、セットで覚えておくといいと思います。

![スクリーンショット 2021-08-08 18.13.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1860147/7b527b6d-ac59-275e-8ea1-d94387538e9e.png)
activeとなっていればOKです。

#4.Testページの表示
実際にApacheのTestページを表示させてみましょう。
ブラウザ(Google ChromeやMicrosoft Edge等)のアドレスバーに入力してアクセスします。

```
http://パブリックIPアドレス
```
下記画像が表示されていれば問題なくアクセスできています。
![スクリーンショット 2021-08-08 18.19.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1860147/13aa713d-e47b-51de-0910-5c823aeeb1cf.png)
いかにもなTestページです。

以上でとりあえずのWebサーバの構築は完了です。
実際はここからAPサーバ等を組み合わせて普段使用しているWebサイトを作成します。

#5．ログの確認
作成したWebページに誰がアクセスしたかの「アクセスログ」や「エラーログ」は
下記コマンドで確認することができます。

```
tail -f /var/log/httpd/access_log
tail -f /var/log/httpd/error_log
```
「tail」はファイルの最後10行を表示するコマンドで「-f」はコマンド実行中にも
ファイルに更新があればリアルタイムで更新してくれるオプションです。
ログを確認中にアクセスがあればその瞬間に表示してくれるということになります。

ちなみに「head」はファイルの先頭10行を表示してくれます。
頭「head」と尻尾「tail」てな感じです。

その他にも「cat」や「less」というファイルを確認するコマンドがあり、
全てのログを確認したい場合はこちらの方がいいかもしれません。

#最後に
ご覧頂き、ありがとうございました。
少しでも参考になれば幸いです。

間違い等があれば教えて頂けると助かります。

ono
ファームウェアまわり備忘録


waves ESP32 ESP-WROOM-32 Development Board Compliant with WiFi Bluetooth Technologies

プログラムを書き込むときは Boot ボタンを押し続ける必要がある。そうでないと「A fatal error occurred: Failed to connect to ESP32: Invalid head of packet~」 なエラーが出る

screen コマンド

screen ${ポート} 115200 みたいにやる。  C-a C-k でセッションを閉じる。 C-a C-d は detach するだけなのでその状態で書き込もうとすると Resource too busy になる。
５０代でデータサイエンティストを目指す

今まで２５年ほどデータベースエンジニアとして生きてきたが
技術者として限界を感じた。
なんとかこの業界で生きていきたいので
「データサイエンティスト」を
５０代にして目指してみる。
最終的には組織から離れてフリーランスで食っていきたい。

やるぞ〜:frowning2:

今日は以下のインプットを実施。

1.「AI・データ分析プロジェクトのすべて」を読み始めた。
AI・データ分析プロジェクトのすべて[ビジネス力×技術力=価値創出]   大城 信晃(監修・著者) https://www.amazon.co.jp/dp/4297117584/ref=cm_sw_r_tw_dp_2A575AG94EACNB0KZ3FC @amazonJPより 

2.統計検定２級取得へ向けての勉強

3.英語の勉強

以下のアウトプットを実施。

1. COVID-19に関するオープンデータを用いた分析のツイート
任意のgit commitへ一時的に巻き戻す。

備忘録です。
# git コマンド
```
# ワーキングツリーとインデックスの内容を stash に一時保存する。
git stash 
# コミットIDを探す。
git log

# 過去のコミットに戻る
git switch -d <コミットID> 

# 過去に戻れたか確認: 
git log --all --oneline
```


# 使い道の例

- 他人のコードを読んでいるとき。最終的な成果物より、開発手法や過程を見たいと思う時がある。
- あるバージョンのコードをビルドしたいとき。
- 単純に前の状態へ戻したいとき。
MacでReact開発環境構築

iMac2021でreactインストールする方法について。

まずはterminalでnpmとnodeを使うためにNode.jsをインストール

こちらクリックしてダウンロード→https://nodejs.org/ja/

ダウンロードしたパッケージを開いてインストール


terminalで以下の順でコマンド実行

```npm install -g create-react-app```

```npx create-react-app my-app```

```cd my-app```

```npm start```
【ハッキング・ラボ①】VirtualBox、Kali Linuxを導入する

VirtualBoxを導入します。そして、最初のゲストOSとしてKali Linuxを導入します。
<br>
まとめ記事（①〜⑯をまとめてます）
[【ハッキング・ラボのつくりかた】をやってみた](https://qiita.com/nakatatsu711/items/e90e6e0962bb787bf4a9)



## システム環境
`仮想化ソフト`：VirtualBox 6.1.0
`ホストOS`：Windows10
`ゲストOS`：Kali Linux 2020.1



## VirtualBoxの導入
### インストール
仮想化ソフトにはホスト型のVirtualBoxを使用します。
ホスト型は仮想マシンを手軽に構築でき、一種のアプリケーションのように扱うことができます。

以下のURLからホストOSに対応する最新版のインストーラーをダウンロードします。
[https://www.oracle.com/virtualization/technologies/vm/downloads/virtualbox-downloads.html](https://www.oracle.com/virtualization/technologies/vm/downloads/virtualbox-downloads.html)

ここではバージョン6.1.0を選びました。


### 基本設定
今後ゲストOSは次々と増えていきますので、あらかじめゲストOSを配置する場所を決めておきます。

「ファイル」→「環境設定」からデフォルトの「仮想マシンフォルダー」を変更します。
ここではC:\VM_Guest\VBoxとしました。

また、VirtualBox Extension Packを導入することでVirtualBoxに機能を追加することができます。

以下のURLからインストール済みのVirtualBoxと同じバージョンのものをダウンロードします。
[https://www.virtualbox.org/wiki/Downloads](https://www.virtualbox.org/wiki/Downloads)



## Kali Linuxの導入
最初のゲストOSとして、Kali Linuxを導入します。
Kali Linuxはペネトレーションテスト用のLinuxディストリビューションで、300以上のペネトレーション用のプログラムが事前にインストールされています。

以下のURLからVirtualBox用の仮想イメージをダウンロードします。
[https://www.offensive-security.com/kali-linux-vm-vmware-virtualbox-image-download/#1572305786534-030ce714-cc3b](https://www.offensive-security.com/kali-linux-vm-vmware-virtualbox-image-download/#1572305786534-030ce714-cc3b)

ovaファイルがダウンロードされるので、任意の場所に配置します。

VirtualBoxを起動し、「ファイル」→「仮想アライアンスのインポート」を選択します。

ダウンロードしたovaファイルを指定して、「次へ」ボタンを押します。

内容に問題がなければ、「インポート」ボタンを押します。

ここでは名前を「Kali-Linux-2020.1 (64bit)」、仮想ディスクイメージを「C:\VM_Guest\VBox\Kali-Linux-2020.1-vbox-amd64\kali-Linux-2020.1-vbox-amd64-disk001.vmdk」としました。

ちなみに拡張子はvmdk（Virtual Machine Disk）となっていますが、インポートされたものはvdi（VirtualBox Disk Image）となっていました。
<img width="600" alt="hacking-lab-part1-1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1848126/71b843c5-cf69-3899-6706-77b439d7d145.jpeg">

インポートが成功すると、VirtualBoxのメイン画面に仮想マシンのアイコンが表示されます。
<img width="600" alt="hacking-lab-part1-2" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1848126/becee01b-d717-e15a-3922-9adf3a2cd055.jpeg">

インポートが完了すれば、ovaファイルは不要なので削除しても問題ありません。
【初学者】Wordpressの学習

#はじめに
Wordpressを触ったことがなかった為、環境構築から実装までの流れを記事にします。

尚、下記について割愛とします。
・テキストエディタvscodeの導入は割愛とします。
・MAMPの導入
・Wordpressの導入

わかりやすい記事がありましたので、こちらを参考に導入してみてください。
環境構築はこの記事があればできます。

#### MAMPの導入とWordpressインストールの参考記事

https://daeuwordpress.com/mamp/

https://daeuwordpress.com/visualstudiocode/

# wordpressってそもそもなに？
WordPressとは、`コンテンツマネジメントシステム（CMS）`を使用しています。
ざっくりにいうと、「HPの制作ができない人でも、簡単にコンテンツを管理できちゃう仕組み」みたいです。

CMSはこの記事がわかりやすかったので、ご参考に。

https://www.hitachi-solutions.co.jp/digitalmarketing/sp/column/cms_vol01/

以下引用文

``` 
「CMS」とは、「Contents Management System：コンテンツ・マネジメント・システム」の略で、
簡単にいうとWebサイトのコンテンツを構成するテキストや画像、デザイン・レイアウト情報（テンプレート）などを一元的に保存・管理するシステムのこと
```

### WordPressのメリットとデメリット
下記記事を引用しています。
https://techacademy.jp/magazine/6693

【メリット】
・ プログラミングわからなくても自分でニュースを追加、更新できる
・Webサイトの構築が簡単
・拡張性が高くてお手軽

【デメリット】
・HTMLのサイトより表示スピードが遅い
・セキュリティの心配

なるほどー！勉強になります。

#ファイル構成
以下大事なファイル構成の内容になります。
ファイルの拡張子はすべてphpです。

| ファイル名 |    内容     |    備考    |
|---:|-------------|------------|
|  header.php    |    ヘッダー用ファイル     |            |
| index.php     |  トップページ用のファイル     |            |
| sidebar.php| サイドコンテンツ用  |            |
| footer.php   |     フッター用ファイル        |
| page.php | 固定ページ用ファイル    |            |
| single.php  | 投稿ページ用ファイル    |            |
| archive.php | 記事一覧ページ用ファイル    |            |
| functions.php| 機能追加時などに利用するファイル  |            |

#PHPコード

読み込み時に記載するphpコード

| コード |    内容     |    備考    |
|---:|-------------|------------|
|  <?php get_header(); ?>   |    header を読み込む     |            |
| <?php get_footer(); ?> |  footer を読み込む    |            |
| <?php get_sidebar(); ?>| sidebar を読み込む |            |

その他phpコード

| コード |    内容     |    備考    |
|---:|-------------|------------|
| <?php the_title(); ?>  |   タイトル   |            |
|<?php the_time('Y年m月d日'); ?> | 日時をいれる    |            |
| <?php echo mb_substr(strip_tags($post-> post_content),0,200).'...'; ?>| 本文の文字制限 |            |

#最後に
簡易的ですが、自分なりにアウトプットしときたかった部分です。
気づいた点は、php言語もちゃんと勉強しないといけないと思いました。
そのときはまた記事をUPさせていただきます。
そのレシートは捨てないで！どのスーパーのレシートかを教えてくれる、レシート画像判定機を作ってみた

こんにちは

コロナにより自炊をする機会も増えていると思います。
スーパーでのお買い物も増え、スーパーのレシートを持っている方も多いのではないでしょうか？

また、レシート、請求書など、どこで買ったかを仕分けしたくありませんか？
レシートを読み込ませることで、分類が簡単にでき、仕分け作業も簡素化できます。

今回は、レシートをかざすと、どこで買ったのかを
教えてくれる「レシート判定機」を作ってみました。

#レシート判定機のイメージ#
https://twitter.com/i/status/1424642651949699076

この判定を行った後に、
下記のように判定結果とその購入先のURLがかえって来るような仕組みにしました。
![LINE画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1802156/8df7301a-98db-c36f-0398-7334732a73f0.png)

作成に用いたNode-redについては
作成の流れの③Node-redでご紹介いたします。




#制作に使用したもの#
●[Node-red](https://nodered.org/)
●[Teachable Machine](https://teachablemachine.withgoogle.com/)
●[Codepen](https://codepen.io/your-work/)
● [LINE Developer](https://developers.line.biz/ja/ )【LINE Botとの連携のため】


#作成の流れ①～③
###①Teachable Machine####
判別したい対象の画像を収集し、Teachable Machineに学習してもらいます。
今回については近所にあります、4パターンの回答が得られるように作成しました。
近所のお店を1パターンずつと、その他のお店のレシートを1パターン、まったくレシートでないものを
読み込みました。

###②Codepen###
実際に判別するための画面を制作しました。
この画面でWEBカメラによって認識し判定できるように設定していきます。コードは以下です。

###●HTML###
```HTML
<h1>レシート判定機</h1>
<button onclick="start()">ボタンをクリックして判定</button><br><br>
<video id="webcam" width="320" height="240" muted autoplay playsinline></video>
<p id="result"></p>
```

###●CSS###
```CSS
#webcam {
  transform: scaleX(-1);
}
body {
  background-color:rgb(235, 122, 119);
  text-align: center;
}
```
###●JS###
```JS
// 作成したモデルのURL
const imageModelURL = '作成したTeachableMachineのURL';

// メインの関数（ここでは定義しているだけでボタンクリックされたら実行）
async function start() {
  // カメラからの映像ストリーム取得
  const stream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: true,
  });
  
  // 「id="webcam"」となっているパーツ（videoタグ）を取得
  const video = document.getElementById('webcam');
  
  // videoにカメラ映像ストリームをセット
  video.srcObject = stream;
  
  // Googleのサーバーにアップロードした自作モデルを読み込みにいきます
  classifier = ml5.imageClassifier(imageModelURL + 'model.json', video, () => {
    // 読み込みが完了次第ここが実行されます
    console.log('モデルの読み込みが完了しました');
  });
  
  // 繰り返し処理
function loop() {
  // 推論を実行し、エラーがあればerrに、結果をresultsに格納して、
  // 推論が完了次第 { } の中身を実行します
  classifier.classify(async (err, results) => {
    // 結果のresultsは配列ですが、先頭に中身があれば以下の処理を実行します
    if (results[0]) {
      // 自分の手を取得
      const myHand = results[0].label;
await axios.post('https://nodered-（自分の名前）.herokuapp.com/receiver', results[0]);
      // HTML表示に反映
      const message = `今かざしたものは・・・「${myHand}」`;
      document.getElementById("result").textContent = message;
    }
    // 推論終了1秒後に自分の関数を実行（ループになる）
    setTimeout(loop, 1000);
  });
}

  // 最初の繰り返し処理を実行
  loop();
}
```

実際に使用できます。
使用したい方は　[こちら](https://codepen.io/aya2648/pen/JjNadGy)

###③Node-red###
フローを下記の内容となります。
![スクリーンショット (435).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1802156/945f6b0e-0889-43d9-1d16-c30c4dd0304f.png)

②のcodepenでの情報を受け取れるように
「http in」ノードで、
【メソッド】POST
【URL】/receiver

判定結果をきちんとLINEへ通知できるよう
「BloadcastMessage」ノードで、LINE Developerから以下の2つを取得してください。
【Secret】チャネルシークレット 
【Access Token】チャネルアクセストークン

#もっと連携させたかった#
皆さんが持っているレシートから、さらに懸賞・キャンペーンに応募できますという通知にしてみたかったです。

また、業務の中でも請求書等に応用させたいです。
決まった請求書が毎月届くので、請求書と金額をテンプレート化し、慣れていない人でも、安心して請求書対応ができるようにしたいです。

拙い文章を最後まで読んでくださり
ありがとうございます。
【HTML5】DOCTYPE宣言と文字ンコーディング指定について


HTML5って、すごいシンプルになったんだね( ;∀;)しゅごい！
忘れないようにメモ書き！


##DOCTYPE宣言　利用するバージョンの指定
HTM4.01

```html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
```

HTML5

```html
<!DOCTYPE HTML>
```

##文字エンコーディングの指定
HTML4.01

```html
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
```

HTML5

```html
<meta charset="UTF-8">
```

UTF-8について
Unicodeという文字コードの1種
Unicodeとは、世界中すべての文字に背番号？を振った規格
お盆休みにやってみたチュートリアルまとめ

お盆休み（といっても短めですが）にやったチュートリアルの備忘録。随時追記。

|キーワード|やってみたチュートリアル|チュートリアル感想|
|---|---|---|
|AWS CDK|[AWS CDK Intro Workshop](https://cdkworkshop.com/20-typescript.html)|AWSの公式チュートリアル。短いチュートリアルでCDKでできそうなことが掴める。|
|Kubernetes|[しくみがわかるKubernetes](https://www.shoeisha.co.jp/book/detail/9784798157849)|Azure環境のAKSを使ってKubernetesを学べる書籍。具体的なユースケースの説明とともに、ハンズオンが進むのでとても分かりやすいと思った。図書館で借りて読んでたんだけど、手元に置きたくなったので購入。|
|Hadoop|[きょうから試せるHadoop"スモールスタート"ガイド](https://atmarkit.itmedia.co.jp/ait/series/4766/)|ローカルに最小構成のHadoopをインストールして手軽に学べる。Hadoopのバージョンは3に置き換えて動かした。|
|AWS データレイク|[AWSではじめるデータレイク](https://www.amazon.co.jp/AWSではじめるデータレイク-クラウドによる統合型データリポジトリ構築入門-上原-誠/dp/491031301X)|AWS Japanのソリューションアーキテクトの方々によるデータレイク関連のサービスの説明。前半が座学、後半はハンズオン構成。|

# AWS CDK Intro Workshop
## メモ
コードでCFnのテンプレートが生成できる仕組み。CFnの手書きと比較すると圧倒的に便利だけど、コード＝命令を列挙する形で書くので、宣言的ではないところが気になる。インフラがどんな構成になるのかが、動かしてみないと(=CFnテンプレートを作らないと)、分からない。動かした結果が毎回同じになることも保証されない。
CDKで書いたコードのテストに至っては、CDKで期待通りのリソースが生成されているかチェックすることとなり、完璧にテストしようとすれば、テストコードに書く内容はCFnと同等となるはずで、本末転倒感がある。
IaCはまだ未成熟の分野なのかも。

# しくみがわかるKubernetes
## メモ
EC2のようなサーバの仮想化と対比しながら読み進めると、理解しやすかった。AWSが仮想的なサーバファームなら、Kubeは仮想的なコンテナファーム。AWS EC2でサーバレベル用で用意されている機能が、Kubeではコンテナレベルで用意されている。
本書はAzureのAKSを使うことが前提に記載されているが、AWS EKSでもやってみたかったので、手順をまとめておいた。
なぜかeksctlでのノードグループ作成に失敗しまくり。久しぶりに環境構築でハマった。ローカルがApple Silicon Macなので、ARMインスタンスでクラスタを作ってみたかったのだけど結局断念。代わりにDocker buildxでマルチプラットフォームイメージを作って対応した。

https://qiita.com/kizitorashiro/items/201889dbdd8f8af8d812

# きょうから試せるHadoop
## メモ
Hadoop 3で動かすにはいろいろと変更が必要だったので、やったことを別途メモした。

https://qiita.com/kizitorashiro/items/494762042fd6d6c58f2d

HDFSはHadoopが使うファイルシステムの一つであって、ここはAWS S3でも良いというくだりで、S3を中心とした最近のデータレイクの話と繋がった気がした。

# AWSではじめるデータレイク
AWSのデータレイク系のサービスを一通り触ってみたかったので書籍を購入。５章以降のハンズオンを中心にやってみた。

## メモ 第6章 QuickSight
さまざまなデータソースからデータを読み込んで、グラフや表で分析。
読み込み先がインメモリデータベースなので、分析時にレスポンスが良い。
データ件数が多い時はExcelよりこちらの方が良さそう。
作成した分析ダッシュボードをAWSアカウントを持っていない人にも簡単に共有できるのも良い。
vscを使って，anacondaで作った環境でデバッグする

# 困りごと
jupoyter notebookを使ってたけど，デバッガーが使いづらいのでvscのデバッガー使おうと思ったけど，デバッグするときデフォルトのpythonで起動するから困ってた。

今回の解決策はワークスペースの中でanacondaから呼び出す環境を変える。
anacondaの環境変数はフォルダ変えてるだけだから，pythonを呼び出すpathを適切なやつにすればいい。
#1 vscでワークスペースを作る
作れ。
ワークスペース一覧のフォルダに保存しとくと便利な気がするけど，もっといいやり方を知りたい。

#2 ワークスペースを開いて，anacondaの環境のパスを設定する
ここがどこからすればいいかよくわからなかった。

「ファイル」＞「ユーザー設定」＞「設定」と選ぶ。
「ワークスペース」のタブを選択する。
検索窓に`python.PythonPath`と打ち込む。
下のpythonのところにこのワークスペースで使うAnacondaの環境のパスを教えてあげる。
![vscの説明.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287344/e6b5d667-8e31-cd3c-ab73-edd57e4584d5.jpeg)

なお，anacondaの環境のpathはコマンドラインとか立ち上げて，`conda info -e`で調べるのがいいと思う。

「フォルダ」ってタブもあって，フォルダごとに設定することもできるのでそれもまたいいと思います。
EC2にPython/Flask2を構築


社内でこれからPython/Flaskを教えていくのに、自分なりに整理していこうかと思います。
最終的にはPythonでマルチプロセスなんか記事にしていこうかな

まずは練習で簡単な記事から


#EC2インスタンスの初期構築

>・インスタンスタイプ
t2.micro
AMI は `Amazon Linux 2`を選択
後の構成はデフォルト

* 最初はyumでupdate

>```
sudo yum -y update
```

* python3をインストール

>```
sudo yum -y install python3
```

>
Loaded plugins: extras_suggestions, langpacks, priorities, update-motd
Package python3-3.7.10-1.amzn2.0.1.x86_64 already installed and latest version

おこられた。
今時の`Amazon Linux 2`にはpython3が最初からインストールされてるっぽい

>```
python3 -V
```
[ec2-user@ip-172-31-41-61 ~]$ python3 -V
Python 3.7.10
[ec2-user@ip-172-31-41-61 ~]$

3.7か...可もなく不可もない感じ

* flaskをインストール

>```
pip3 install flask
```
Installing collected packages: MarkupSafe, Jinja2, typing-extensions, zipp, importlib-metadata, click, Werkzeug, itsdangerous, flask
Successfully installed Jinja2-3.0.1 MarkupSafe-2.0.1 Werkzeug-2.0.1 click-8.0.1 flask-2.0.1 importlib-metadata-4.6.3 itsdangerous-2.0.1 typing-extensions-3.10.0.0 zipp-3.5.0

成功、成功...ん？
Flaskがいつの間にか2.0.1にバージョンアップされてるｗ
１年ぐらいに更新がないと思っていたら油断した

本家のサイト[Flask](https://flask.palletsprojects.com/en/2.0.x/changes/)を確認したら2.0.2がリリースされているし1系もバージョンアップされてるね。更新内容は後で確認しますか

# flask用のファイルを作成して起動

・今回はopt配下にec2-userで作成していく

>```
cd /opt
sudo mkdir flask
sudo chown -R ec2-user:ec2-user flask
cd flask
mkdir hoge
cd hoge
```

・hogeディレクトリの配下にapp.pyを作成
ver2になってるので本家のサイト[Flask](https://flask.palletsprojects.com/en/2.0.x/changes/)サイトを参考に進めてみると

```python:app.py
from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
  return "世界のみなさん、こんにちは"
```

・ファイルを作成したの、適当に動かしてみる

>```
flask run
```
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 
・あれ動いたｗ
curlを投げてみますか

>```
curl -i http://127.0.0.1:5000/
```
HTTP/1.0 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 39
Server: Werkzeug/2.0.1 Python/3.7.10
Date: Mon, 09 Aug 2021 08:44:40 GMT
世界のみなさん、こんにちは

・確かに動いてるぞ
どこでapp.pyを判断したんだよ。と思って本家のサイトを見てみると
`app.py` か `wsgi.py` が存在していると自動で判断して起動してくれるみたい

Flaskが2にバージョンアップされて機能が追加されているようなので後で検証してみます

今回のサンプルコードはGitHubにアップしております
[github/flask2_demo](https://github.com/offgrid-jp/flask2_demo)
Resultを使った例外処理

## 使い所

非同期処理では`do-catch`が使用できないので、そういった時に利用可能

```swift
enum DatabaseError : Error {
    case entryNotFound
    case duplicatedEntry
    case invalidEntry(reason: String)
}

struct User {
    let id: Int
    let name: String
    let email: String
}

func findUser(byID id: Int) -> Result<User, DatabaseError> {
    let users = [
        User(id: 1, name: "yuika", email: "yuika@gmail.com"),
        User(id: 2, name: "misa", email: "misa@gmail.com"),
        User(id: 3, name: "niku", email: "niku@gmail.com")
    ]
    
    for user in users {
        if user.id == id {
            return .success(user)
        }
    }
    
    return .failure(.entryNotFound)
}

let result = findUser(byID: 4)

switch result {
    case let .success(user):
        print(".success: \(user)")
    case  let .failure(error):
        switch error {
            case .entryNotFound:
                print(".failure: .entryNotFound")
            case .duplicatedEntry:
                print(".failure: .duplicatedEntry")
            case .invalidEntry(let reason):
                print(".failure: .invalidEntry(\(reason))")
        }
}
```
[02] EFK (Elasticsearch + Fluentd + Kibana) の構築 ... Dockerコンテナの立ち上げ(説明なし)

|本シリーズのトップページ|
|:--|
|https://qiita.com/robozushi10/items/68dc5f8c2df38f160fda|

# はじめに

職場[^1] で「CI/CD ログ」や「CLI および Webアプリログ」の収集と可視化の導入の話が出てきた.
また、自宅で K8s の学習をする中で Fluentd という単語が頻繁に出てきていた.

そこで自宅の Ubuntu 18.04 マシンで docker-compose を用いて、
下図・下表のような Elasticsearch + Fluentd + Kibana (EFK) 環境を構築して検証し、
これらソフトの知見を得ることにした.

本項では以下を記す.
・**docker-compose.yml を使って下図の立ち上げるための手順**


# 構成


## 図

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1246056/957f2884-bcf2-a8d1-379b-7a425c69c492.png)


## 表

| No | サービス | ホスト側ポート | コンテナ側ポート | 備考 |
|:--|:--|:--|:--|:--|
| 1 | Nginx | 21337 | 80 | 採用バージョン v1.20.0.<br/>Fluentd のテストのために導入しているだけである.<br/>本表 No 2 の Fluentd(24224) へログを配送する. |
| 2 | Fluentd | 24224 | 24224 | 採用バージョン v1.13.1.<br/>受信したログを本表  No 3 の Fluentd(34224)へ転送する. |
| 3 | Fluentd | 34224 | 34224 | 採用バージョン v1.13.1.<br/>受信したログを Elasticsearch へ書き込みする.|
| 4 | Elasticsearch | 29200 | 29200 | 採用バージョン v7.14.<br/>ログ格納のためのデータストア.<br/>日本語検索をするための analysis-kuromoji 導入あり. |
| 5 | Kibana | 29601 | 29601 | 採用バージョン v7.14.<br/>Elasticsearch の視覚化 |

## 留意次項

次の設定は職場環境を想定したためである.
>・Fluentd を 2つ配置していること
・Elasticsearch のコンテナ側ポートを 9200 以外にしていること.
・Kibana のコンテナ側ポートを 5601 以外にしていること.

　

# 手順

## 1. GitHub からタグ「Qiita-02」を指定して clone する

```bash
$ git clone -b Qiita-02 git@github.com:robozushi10/qiita-efk.git
```

## 2. Dockerイメージビルドとコンテナ起動を行う

```bash
$ cd qiita-efk
$ docker-compose build --no-cache
$ docker-compose up -d
```

## 3. Kibana にアクセスする

上記 2 でのコンテナ起動が完了するまで (4分間ほど) 待機してから
次の URL にアクセスして Kibana の Dev Tools が起動していれば OK.

・`http://localhost:29601/app/dev_tools#/console`
　

以上

# 参考書籍およびサイト

|書籍|
|:---|
|[nginx実践入門](https://gihyo.jp/book/2016/978-4-7741-7866-0)|
|[「Docker/Kubernetes 実践コンテナ開発入門  山田 明憲」](https://gihyo.jp/book/2018/978-4-297-10033-9)|
|[データ分析基盤構築入門［Fluentd，Elasticsearch，Kibanaによるログ収集と可視化］](https://gihyo.jp/book/2017/978-4-7741-9218-5)|
|[検索だけじゃない Elasticsearch 入門+](https://booth.pm/ja/items/1031664)|


|URL|一言|
|:--|:---|
|https://qiita.com/sanyamarseille/items/1c4c31547502791ecac6||
|https://www.elastic.co/guide/en/elastic-stack-get-started/current/get-started-docker.html||
|https://qiita.com/suzuki_y/items/6365799485fa3973b916||
|https://qiita.com/sugikeitter/items/f3b2c57bf8bbdc47a8bc||
|https://github.com/sugikeitter/elasticsearch-kibana-docker/blob/master/docker-compose.yml||
|https://gitya107.hatenablog.com/entry/2018/06/15/170334||
|http://ittoo.jugem.jp/?eid=737||
|https://qiita.com/kaibadash@github/items/9cfb532696dc8711e408|日本語検索を可能にする|
|https://qiita.com/mserizawa/items/8335d39cacb87f12b678|日本語検索を可能にする|
|https://github.com/deviantony/docker-elk|ELK を構築するための docker-compose が公開されている|
|https://dev.classmethod.jp/articles/es-01/|index, document, type の説明が簡潔に RDMS に例えられていて良かった|
|http://www.tech-joy.work/article/a20180527115811.html|/etc/elasticsearch/elasticsearch.yml の記述例と説明あり|
|https://qiita.com/Esfahan/items/3c07bfbb57c7098e9531|3台に Elasticsearch を導入した場合の手順あり|

　


[^1]: オンプレ環境での組込み機器開発向け DevOps 業務
VisualEffectGraph(VFX)トラブルシューティング

# Triggerイベントが検索で引っかからない
デフォルト設定では以下の様にTrigger系のイベントを検索しても表示されません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1336886/e8a0f01b-cab4-8d86-1980-5ee2b82c7644.png)
Preferences > VisualEffect > ExprementalOperators/Bloks のチェックをONにすると表示されるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1336886/270becb0-27b2-585f-2492-7daa34a296c9.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1336886/8c8ebb5b-a632-d65f-b360-69aa9256a55f.png)

# パーティクルが消えた時に別のパーティクルを表示させたい
1. TriggerイベントをUpdateParticleに設定する
1. evtをParticleEventに繋ぐ
1. そこから次に表示に表示するパーティクルのInitialに繋ぐと実現できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1336886/f888b662-3851-9698-5afb-ff5fcabf8a52.png)

# VFXで作成したパーティクルにカメラを近づけるとパーティクルが消える

Initialize Particleブロックの、Boundsのサイズを大きくすると消えなくなる。
Series データ・インデックスのみを取り出す

#概要
作成したSeriesのデータ値のみ、インデックス値のみを取り出す方法がある。
データ値の場合は、**.values**とし、インデックスの場合は、 **.index**とする。



```python
import pandas as pd
fruits = ["apple", "orange", "banana", "straberry", "kiwifruit"]
data = [10, 5, 1, 2, 3]

series = pd.Series(data, index = fruits)

#データ値
series_values = series.values
print(series_values )
print()

#インデックス値
series_index = series.index
print(series_index)
```

##データ値の出力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1736279/ffcb0d12-f58e-ce09-89a3-0954d9ecaeb5.png)


##インデックス値の出力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1736279/9cc78bd4-a34a-7323-8212-8d5b8f74b71f.png)
Unity FadeCamera2のUIトランジションの不具合修正

概要
----
[テラシュールブログ様 FadeCamera2](https://tsubakit1.hateblo.jp/entry/2015/11/04/015355)はUnityのトランジションを行う非常に有用なパッケージですが、gitの最終コミットから5年が経ち2021年現在のUnityでUIトランジションを行う際の不具合に遭遇したので備忘録的に書き残しておきます。
  
動作確認した環境
----
Editor and Build結果確認:  Windows10
Unity 2019.4.7f1

遭遇した不具合
----
FadeMaskを使用したUIのみのトランジションの際にTextureの変更が適応されない
マスクイメージのアニメーションをすっ飛ばして表示される

解決策
----
シェーダの``_MaskTex``に``SetTexture``で直接テクスチャを置く
テクスチャをレンダーテクスチャにコピーする``Graphics.Blit(src, dest, mat)``が上手くMaskテクスチャを送れていないため、画面の表示をレンダーテクスチャにBlitするようにする

**FadeUI.cs全文**

```cs
using UnityEngine;
using System.Collections;
using UnityEngine.UI;

[RequireComponent (typeof(RawImage))]
[RequireComponent (typeof(Mask))]
public class FadeUI : MonoBehaviour, IFade
{
    [SerializeField, Range (0, 1)]
    private float cutoutRange;

    public float Range {
        get {
            return cutoutRange;
        }
        set {
            cutoutRange = value;
            UpdateMaskCutout (cutoutRange);
        }
    }

    [SerializeField] Material mat = null;
    [SerializeField] RenderTexture rt = null;
    [SerializeField] Texture texture = null;

    protected void Start()
    {
        // 追加
        mat.SetTexture("_MaskTex", texture);
    }

    private void UpdateMaskCutout (float range)
    {
        mat.SetFloat ("_Range", range);
        // 追加
        // 画面の表示をレンダーテクスチャにBlitする場合source = null
        Graphics.Blit (null, rt, mat);
        // コメントアウト
        // Graphics.Blit(texture, rt, mat);
		
        var mask = GetComponent<Mask> ();
        mask.enabled = false;
        mask.enabled = true;
    }
}
```
【Linux】 screenコマンドの備忘録：最初はこれだけ覚えればオッケー？

# screenコマンドとは

tmuxに似ていて、以下の用途で使える。

・ セッションの保存（sshで長時間のジョブを実行するときに助かる）
・ 画面の分割

MacでもLinuxでも大抵デフォルトで入っているらしい。
逆にtmuxは追加で入れないといけないので、できればscreenに慣れておきたい。

# 一連の流れ

以下は全てUbuntuで実行。

## セッション管理

セッション一覧を確認

```
$ screen -ls
No Sockets found in /run/screen/S-user1.
```

セッションを作成（＋自動的にセッションに入る）

```
$ screen -S hoge
```

今セッションの中にいるのかどうかチェック

```
$ echo $TERM  # "screen*"だったら内部にいる
screen.xterm-256color
$ echo $STY  # セッション内部のときだけ存在する環境変数 
3023174.hoge
```

セッション内部では`ctrl-a <cmd>` でscreenコマンドを実行することになる。
もともとの`ctrl-a`（カーソルを先頭に移動）は`ctrl-a a`で実行できる。

セッションを抜ける

```
ctrl-a d
```

一覧を確認してみる

```
$ screen -ls
There is a screen on:
	3023174.hoge	(08/09/2021 05:25:41 PM)	(Detached)
1 Socket in /run/screen/S-user1.
```

セッションに入る（以下のどれでもオッケー）

```
$ screen -r 3023174.hoge
$ screen -r hoge
$ screen -r 3023174
```

セッションの削除

```
$ screen -X quit  # 今いるセッションを削除して元のターミナルに戻る
$ screen -S hoge -X quit  # セッション外部にいて、セッション"hoge"を削除する
```

## 画面分割

画面分割

```
ctrl-a S  # 水平
ctrl-a |  # 垂直
```

画面移動

```
ctrl-a tab
```

虚無の画面に新規ウィンドウ作成（分割でできた新規画面に移動したらまずこれ）

```
ctrl-a c
```

分割された画面の削除

```
ctrl-a X  
# 小文字のxだと画面ロックになるので注意
```

## Tips

マウスでスクロールするなら。

```
$ cat ~/.screenrc 
termcapinfo xterm* ti@:te@
defscrollback 100000
```

ctrl-aからctrl-jに変更。

```
$ cat ~/.screenrc 
escape ^Jj
```


#
VagrantとVirtualBoxで環境構築する

# はじめに
VagrantとVirtualBoxで環境構築するまでの道のり。


# 最終更新日
2021年8月20日

# 環境の情報
OS
ubuntu 20.04


# 実際に行ってみます



```
$ mkdir test
$ cd test
~/test$ ls
```
フォルダを作ります
移動します

↓

```
~/test$ vagrant init generic/ubuntu2004
A `Vagrantfile` has been placed in this directory. You are now
ready to `vagrant up` your first virtual environment! Please read
the comments in the Vagrantfile as well as documentation on
`vagrantup.com` for more information on using Vagrant.
~/test$ ls
Vagrantfile
```
Vagrantfileを作ります。

↓

```
~/test$ vagrant up --provider=virtualbox
Bringing machine 'default' up with 'virtualbox' provider...
==> default: Importing base box 'generic/ubuntu2004'...
==> default: Matching MAC address for NAT networking...
==> default: Checking if box 'generic/ubuntu2004' version '3.1.0' is up to date...
==> default: A newer version of the box 'generic/ubuntu2004' for provider 'virtualbox' is
==> default: available! You currently have version '3.1.0'. The latest is version
==> default: '3.3.2'. Run `vagrant box update` to update.
==> default: Setting the name of the VM: magetest_default_1627610122014_68458
==> default: Clearing any previously set network interfaces...
==> default: Preparing network interfaces based on configuration...
    default: Adapter 1: nat
==> default: Forwarding ports...
    default: 22 (guest) => 2222 (host) (adapter 1)
==> default: Running 'pre-boot' VM customizations...
==> default: Booting VM...
==> default: Waiting for machine to boot. This may take a few minutes...
なんか色々
==> default: Checking for guest additions in VM...
```
upして、プロバイダー設定します。

↓


```
~/test$ vagrant ssh
vagrant@ubuntu2004:~$ 
```

sshして入れたら、完成です。
FactoryBotを用いて紐づいたユーザーの登録

User:Hotel = 1:多

Hotelインスタンスは生成時にUserのIDがないと作成できません。
そのため、user_idを直接書き込んで登録しようとしましたが、エラーになりました。

上手くいかない原因は、紐付く親が存在していないからではないかと以下の記事のコメント欄には書いてありました。
[rspecでエラーが出ます](https://teratail.com/questions/241395)

## 誤った書き方

```ruby
# spec/factories/hotels.rb
FactoryBot.define do
  factory :hotel do
    user_id {1}  
    name {"ホテル名"}
    address1 {"東京都"}
    address2 {"千代田区XXX町X-X-X"}
  end
end
```

```ruby
# spec/models/hotel_spec.rb
require 'rails_helper'

RSpec.describe Hotel, type: :model do
  describe "ホテル" do
    context "保存" do
      it "正しく登録" do
        hotel = FactoryBot.build(:hotel)
        expect(hotel).to be_valid
      end
    end
  end
end
```

## 解決方法
user_idを登録する際に、Userモデルを作成した際のFactoryBotを活用

```ruby
# spec/factories/users.rb
FactoryBot.define do
  factory :user_bob, class: "User" do
    name {"bob"}
    email {"bob@sample.com"}
    password {"sample"}
    password_confirmation {"sample"}
  end
end
```

## 解決1
user_idの登録時に、userインスタンスの作成

```ruby
# spec/factories/hotels.rb
FactoryBot.define do
  factory :hotel do
    user_id { FactoryBot.create(:user_bob).id }
    name {"ホテル名"}
    address1 {"東京都"}
    address2 {"千代田区XXX町X-X-X"}
  end
```

## 解決2
associationを使用する。


```ruby
# spec/factories/hotels.rb
FactoryBot.define do
  factory :hotel do
    # factory名はmodel名と同一の場合、省略可
    association :user, factory: :user_bob
    name {"ホテル名"}
    address1 {"東京都"}
    address2 {"千代田区XXX町X-X-X"}
  end
```

##参考記事
[Rspecのmodelテストで、user_id: nil, post_id: nilになってしまう。](https://ja.stackoverflow.com/questions/66308/rspec%E3%81%AEmodel%E3%83%86%E3%82%B9%E3%83%88%E3%81%A7-user-id-nil-post-id-nil%E3%81%AB%E3%81%AA%E3%81%A3%E3%81%A6%E3%81%97%E3%81%BE%E3%81%86)
Docker Grafana + STRAVA Plugin install

# やりたいこと
Mac上のParallelsにインストールしたCentOS8にGrafana on Dockerを構築しSTRAVAのデータを表示させる

#参考にした手順
- DockerおよびDocker Composeのインストール
https://qiita.com/cyberblack28/items/0b0ec02bce67a16e2f17

- Docker Grafanaのインストール
https://techexpert.tips/ja/grafana-ja/ubuntu-linux%E3%81%B8%E3%81%AEgrafana-docker%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB/

```
mkdir -p /var/lib/grafana/strava
chown -R 472:472 /var/lib/grafana
```

```
docker run -d -p 3000:3000 -v /var/lib/grafana:/var/lib/grafana -e "GF_SECURITY_ADMIN_PASSWORD=******" -e "GF_STRAVA_DS_DATA_PATH=/var/lib/grafana/strava" grafana/grafana
```

コンテナに環境変数がセットされていることを確認する

```
[root@localhost ~]# docker exec -it e00b0c56473c   /bin/bash
bash-5.1$ set | grep GF
GF_PATHS_CONFIG=/etc/grafana/grafana.ini
GF_PATHS_DATA=/var/lib/grafana
GF_PATHS_HOME=/usr/share/grafana
GF_PATHS_LOGS=/var/log/grafana
GF_PATHS_PLUGINS=/var/lib/grafana/plugins
GF_PATHS_PROVISIONING=/etc/grafana/provisioning
GF_SECURITY_ADMIN_PASSWORD=*******
GF_STRAVA_DS_DATA_PATH=/var/lib/grafana/strava
```

- STRAVAのデータの取得
https://grafana.com/grafana/plugins/grafana-strava-datasource/

```
[root@localhost ~]# docker exec -it e00b0c56473c   /bin/bash
bash-5.1$ grafana-cli plugins install grafana-strava-datasource
✔ Downloaded grafana-strava-datasource v1.3.0 zip successfully
 
Please restart Grafana after installing plugins. Refer to Grafana documentation for instructions if necessary.
bash-5.1$ 
exit
[root@localhost ~]# docker stop e00b0c56473c 
e00b0c56473c
[root@localhost ~]# docker start e00b0c56473c 
e00b0c56473c

```

Configre -> Data Sources -> Add data source -> (Find Name)STRAVA

STRAVAのMyアプリケーションで認証コールバックドメインに接続しているGrafanaのFQDNかIPを入れること（ポート3000は不要だった）
Save & Test -> Connect With STRAVA -> Save & Testと操作しないとうまく登録できなかった。
プログラミング初心者がphp artisan db:seedしたらエラーが出た

はじめに
-----

現在プログラミングスクールにてGitHubを用いて共同開発中なのですが
相方が作ってくれたコードをローカルでマージして、DBにシーダーファイルのデータを登録しようとしたところ
エラーが発生しました。
※Laravelのverは6.20.16です。

エラーの内容
-----
``php artisan db:seed``をしたところ下記のようなエラーが出ました。
![シーダーエラー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1478204/d7262b12-f255-abf5-01ba-1fc70418afb2.png)

``UsersTableSeederクラス``が存在しないよと書かれていますが
ちゃんとフォルダの中には存在しています笑

困ったので色々と調べたところ下記のコマンドが有効でした。

```
composer dump-autoload
```

こちらを打ち込んだところ``Generating optimized autoload files``となり
無事にシーダーファイルの中のデータを登録することができました！

しかしこのdump-autoloadが具体的にどのような動きをしているのかまでは
まだ調べきれていないため、わかり次第追記したいと思います。

ご覧いただきありがとうございました！

参考記事
https://qiita.com/teneye/items/1fdedd8ffe5a5ebd6c71
magento 2.4.2をインストールしてハマったところ

# magento2.4.2
magento2.4.2をインストールしてハマったところをメモします。


# 公式さま
https://devdocs.magento.com/guides/v2.4/install-gde/tutorials/change-docroot-to-pub.html

# 変更点
ドキュメントルートの場所が/pubになっていました。

 <VirtualHost *:80>

         ServerAdmin webmaster@localhost
         DocumentRoot /var/www/html/magento2ce/pub

         ErrorLog ${APACHE_LOG_DIR}/error.log
         CustomLog ${APACHE_LOG_DIR}/access.log combined

         <Directory "/var/www/html">
                     AllowOverride all
         </Directory>
 </VirtualHost>


管理画面は
http://192.168.33.10/admin_xxxxx （←インストール時表示）
に変更。
1周目　railsチュートリアル第4章

#目次
[1.はじめに](#1-はじめに)
[2.用語のまとめ](#2-用語のまとめ)
[4.感想](#4-感想)
[5.おわりに](#5-おわりに)

#1. はじめに
第4章からは有料です
webテキストを読み込んだあとに動画を見たほうが良い。
第4章はruby内容となるためwebページの画面遷移などはほとんどない。
有料のため限定したところでしか書き留めれない。

前回

https://qiita.com/ak-matsu/items/b30a4d16f5ce1ef4c0ab


#2. 用語のまとめ



|用語|内容|
|-|-|
|組み込みヘルパー|予めrailsに組み込まれたメソッドのこと|
|カスタムヘルパー|自分で作ったメソッドのこと|
|文字列(String)|”ダブルクォーテーションで囲むもの"
|to_aメソッド|a=('a'..'z').to_aやa=(0..9).to_a　などの使い方をされる|
|splitメソッド|分割させるメソッド|
|Hash(ハッシュ)|キーとバリューを関連付けるもの　Hash名[キー]=バリュー|
|シンボル|文字列の先頭に「　:　」コロンをつけたもの|

以下のコードは
railsチュートリアル4章の一部コードを抜粋

h1とh2の結果はどちらとも同じである。
オブジェクトの左に「：」があればハッシュロケット「=>」を記載する必要がある。
オブジェクトの右に「：」があればハッシュロケットを省略することができる。
後者のほうが人間が見たときに可読しやすい。

```ruby

>> h1 = { :name => "Michael Hartl", :email => "michael@example.com" }
=> {:name=>"Michael Hartl", :email=>"michael@example.com"}

>> h2 = { name: "Michael Hartl", email: "michael@example.com" }
=> {:name=>"Michael Hartl", :email=>"michael@example.com"}
>> h1 == h2
=> true

```

#### ダブルクォーテーションとシングルクォーテーションの違い
式展開ができるもの、できないものの違いである。

式展開ができる

```ruby
city = "新宿区"
prefecture = "東京都"
puts "#{prefecture} #{city}"

結果
東京都 新宿区
```
式展開ができない

```ruby
city = "新宿区"
prefecture = "東京都"
puts '#{prefecture} #{city}'

結果
#{city} #{prefecture}
```



#4. 感想
ハッシュとシンボルまで終わったけど、まだある長い
第4章の後半
クラス継承など難しすぎる、やはり1周目はスピード重視が良さそうな気がする

rubyは楽しくシンプルに作れることができる
railsは規約、規則に乗っ取りDRYで決められた枠組みを行う。

メモ
一度削除したアプリケーションのディレクトリでUser.newが表示されない件
git clone url ディレクトリ名 でダウンロード
rails cをするも動かないため、求められているbundle install --without productionとyarnを実行。
まだrails cが起動できない。
UserDBは作成済みのため、rails db:migrateを実行したことにより
rails c の User.newを実行で解決。


#5. おわりに
1周では理解できない、何回もやる必要がある。
ツクール向けレトロタイルセット（GB, GBA, SFC風、ツクール2000ぐらいの解像度感のもの）

備忘録

# Super Retro World - Exterior Pack DLC
https://store.steampowered.com/app/1679611/
お値段： ¥980
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132033/53c80699-6b2d-cecf-3fe8-73e879d79a78.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132033/3089e371-7dba-b973-3267-9f44e6f5edaa.png)


# Ocean's Nostalgia - Base Pack
https://oceansdream.itch.io/nostalgia-pack
お値段： $19.99 USD + 各種パック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132033/f4f0920f-1b76-f898-f0e4-9631430e9806.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132033/e3013864-1fe6-77a2-dda8-aea4151c3dc3.png)

# 8-bit Zelda style 16x16 asset pack designed for Gameboy and Gameboy Color
https://sodacoma.itch.io/awakening-complete-tileset
お値段：$5.99 USD
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132033/08e6ea53-7eaa-a9a9-a138-76344f2e2b4e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132033/acb9d92e-8706-f358-4701-5b5c01307019.png)


# Time Fantasy
https://us.degicashop.com/products/time-fantasy
お値段： $14.99 USD
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132033/e9f494bc-de2f-1ac2-a03d-10f16b38bf13.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132033/fd32ccad-3335-9f30-f53d-81be3fc14aee.png)

# The Mighty Pack
https://themightypalm.itch.io/the-mighty-pack
お値段： Free (パブリックドメイン)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132033/31012fd1-5428-76df-26a8-03ad11c22d71.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132033/5a992ad2-81d8-1cf9-91c2-a28b232aafd5.png)

# Crazy_Leen's Crazy Resources & Retro Resources 
https://forums.rpgmakerweb.com/index.php?threads/crazy_leens-crazy-resources-retro-resources.31274/
お値段： Free (原則非商用のみ)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132033/06f3ce00-cafb-a7b1-0510-d4e0862f2976.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132033/5a3be731-a010-edf6-0f20-a857b1c07c72.png)
magentoのYou need to configure Two-Factor Authorization のエラー

# ログインしようとしたら
ローカルで、magentoをインストールして、ユーザーで、ログインしようとしたら、何かが出ました。

![Screenshot from 2021-08-04 15-20-58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148394/a6708dd8-cd2c-aa9c-d2fe-9887536fa011.png)

```
Magento Admin Panel
Failed to send the message. Please contact the administrator
Logout

You need to configure Two-Factor Authorization in order to proceed to your store's admin area

An E-mail was sent to you with further instructions
```

2要素認証？の話らしい。
MSP TwoFactorAuthモジュールというものをオフにすればいいらしい。
ローカルで練習したいだけなので、解除する。


magentoがあるところへ行き

```
/var/www/html/magento$ bin/magento module:disable Magento_TwoFactorAuth
```

```
The following modules have been disabled:
- Magento_TwoFactorAuth

Cache cleared successfully.
Generated classes cleared successfully. Please run the 'setup:di:compile' command to generate classes.
Info: Some modules might require static view files to be cleared. To do this, run 'module:disable' with the --clear-static-content option to clear them.
```

### ログインできるようになりました。

# 参考
https://magento.stackexchange.com/questions/318485/you-need-to-configure-two-factor-authorization-in-order-to-proceed
composerをダウングレードしたい

# ある日
composerのインストールする
バージョンを間違えてしまった｡ﾟ(ﾟ´ω`ﾟ)ﾟ｡（おばか）
わざわざ消すのが、めんどくさいな〜。
composerを、ダウングレードしたいな〜。
調べたところ嬉しい魔法がありました。

# 嬉しい魔法🧙‍♀️
```
$ sudo composer self-update --1 ←ここにバージョン番号
```

これで変更出来ました！！！
【講義11.php_ファイルアップロード】詰んだことでパーミッションの理解が深まった話

#本記事について
今後の開発の参考になればと思い、PHPについて、講義での実体験をまとめたもの。

##PHPのファイルアップロードについて
PHPではformを利用して画像ファイルの受け取り、アップロードが可能。
アップロードの流れは以下の通り
1.formからアップロード
2.tmp領域(一時保存場所)に保存
3.サーバの保存領域に移動
4.データベースに保存場所のパスを登録

##詰んだ内容
ファイルの権限設定をし忘れたことに気づかず、コードの記述ミスやパーミッション権限を疑ってハマった。
パーミッションはアップしたデータの修正、削除のみに使うため、疑うべきところが謝っていた。

##試したこと、疑ったコード
コメントしているfilename_to_save関数まではvar_dumpで確認できた。
そのため、パーミッション部分（if (move_uploaded_file以降以下）を疑った。
以下は、実際に記述したコード。

　

```php
$img = $_FILES['img']['name'];
$img_data = "";

if (isset($_FILES['img']) && $_FILES['img']['error'] == 0) {
    // 送信時OK
    // 送信されてきたファイルの情報を取得
    $uploaded_file_name = $_FILES['img']['name'];
    $temp_path = $_FILES['img']['tmp_name'];
    $directory_path = 'upload/';
    // ファイル名の準備
    $extension = pathinfo($uploaded_file_name, PATHINFO_EXTENSION);
    $unique_name = date('YmdHis') . md5(session_id()) . "." . $extension;
    $filename_to_save = $directory_path . $unique_name;
    if (is_uploaded_file($temp_path)) {
        // ここでtmpファイルを移動する
        // var_dump($temp_path);
        // var_dump($filename_to_save);
        // exit();
        if (move_uploaded_file($temp_path, $filename_to_save)) {
            chmod($filename_to_save, 0644);
            $img_data = $filename_to_save;
        } else {
            exit('Error:アップロードできませんでした');
        }
    } else {
        exit('Error：画像がありません');
    }
} else {
    // 送信時エラー
    exit('Error:画像が送信されていません');
}

// var_dump($filename_to_save);
// exit();
```



##原因と対策
原因：ファイルの権限設定をし忘れたため。
対策：ファイル権限を設定。※macのみの設定※windowsは特に設定の必要なし
　 「htdocs内の画像ファイルを格納するフォルダ」で
　 メニュー表示 => 情報を見る => 共有とアクセス権
　 全て「読み/書き」に変更 => 歯車ボタン => 内包している項目に適用

余談：
パーミッションを0644から0777に変更しなければ！などととんでもないことをしようとしていた。
今回の講義で指定しているパーミッションは「0644」。
オーナーが「6」、グループは「4」、一般が「4」という事になるので、
オーナーが「rw = 4+2 = 6」で読み込みと書き込みを許可、グループと一般が「r = 4」で読み込みだけを許可していることになる。
「0777」に変更した場合、オーナー、グループ、一般全て読み込み、書き込み、実行を許可すると言う意味になる…
本番環境に実装していたら、ユーザーが画像の読み書き、つまり編集＆削除できる。
意味を理解せず、動く（ここでは画像がアップ、編集、削除できる）からといって安易に変更すべきではない。　
最後に「全てを疑え！自分でさえも」と自分にも同じ道を通る人にも伝えたい。

##参考サイト
https://atmarkit.itmedia.co.jp/ait/articles/1605/23/news020.html
http://www.tryhp.net/permission.htm

以上。
AWS認定資格のオンライン受験(自宅)

## はじめに

前々から[SAA](https://aws.amazon.com/jp/certification/certified-solutions-architect-associate/)(AWS認定 ソリューションアーキテクトアソシエイト)を受けよう受けようと思いつつ、なんの準備もせず日々過ごしていました。

ピアソンVUEのキャンペーンで2021年5月1日から2021年7月31日の間の受験だと、一回不合格になってももう一度無料で再受験できるというプロモーションが展開されていたのは認識していたがダラダラしており、忘れてたとういうかなんというか…気がつくと7/30日の晩。

で、7/31の早朝6時に起きて急遽AWS認定試験を受験しよう。ダメだったら無料再受験だ！と思い早朝6:30に申し込み、当日7/31の晩21:15からの最終時間の試験を受けることに。

リンク切れになる予感がするのでキャプチャも保存しておきます。また今度やらないかな。

https://pages.awscloud.com/Global_TrainCert_Japan_Online_Proctoringja.html

![スクリーンショット 2021-08-09 15.06.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132537/b9a6f9a1-35e8-ed15-c8dd-8470e0e3d2f5.png)

結局1回の受験で合格しましたので再受験はしてないです。

ちなみに当日の昼間は一日中、1200円ぐらいのバーゲンで買ったままのこちらを解いて予習、本番と同じような問題で操作も同じ感じで良かったです。

https://www.udemy.com/course/aws-knan/

## 準備

AWSパートナーのクラスメソッドさんやサーバーワークスさん、トレーニング会社のトレノケートさんなどのブログ記事は読んだことがあるので、流れを把握するために再読。


https://dev.classmethod.jp/articles/aws-exam-at-home/

https://blog.serverworks.co.jp/aws-certification-online

で、こちらの記事の「後日追記」までちゃんと読んでなかった。写真のようにレコードジャケットや楽器が見えてても良いのかなぁと…楽に考えてた。

https://blog.trainocate.co.jp/blog/aws_onvue_022

### 試験開始直前の片付け

ヘッドフォンやスマートスピーカー、あとレコードジャケットは一応よけていたが…

試験開始前の監督(インド英語?だと思う)とのやり取り

- ディスプレイの電源切って
    - 電源はちゃんと落としてます
    - いや、ケーブルを抜いてくれ、抜くところもカメラで見せて
    - もう一つのディスプレイもね
- スピーカー避けて
    - DTM用のモニタースピーカーの件
    - 動かせたら端に除けて
- 植物
    - そいつもどかして
    - 植物もかよ…
- コースター
    - 出窓にWebカメラを置くために磁器のコースターを台にしてた
    - それもどかして
- ラップトップラック
    - 最初なんのことかわからなかった。ノートPCをクラムシェルモードで縦置きできるやつ
    - それもどけて
- アナログの小型置き時計
    - それもどけて
- キーボード(楽器/DTM機材)
	- これシンセサイザーですが…
	- どけてください
	- あとその横の箱も(オーディオインターフェース等)

### パスポートチェック

運転免許証(日本)の写真を送っていたのだが、パスポートがあったらそっちの方をアップロードしてくれと…

日本語だけで書かれた運転免許証よりも英語の試験官にはパスポートの方が良いのかもしれません。

### 片付け結果

### 開始前

実際は翌日に元に戻した画像ですが。なんとなくその頃あれで話題の小山田くん([Cornelius](http://cornelius-sound.com))のレコードをディスプレイ。

![IMG_0986.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132537/a2287a7e-82d1-71f3-2718-13a14426e3a1.jpeg)

#### 片付け指示完了後

実際は試験完了後に撮影。外部キーボード、外部トラックパッド、外部カメラ、外部スピーカーフォンはOKでした。
![IMG_0979.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/132537/3ae407e8-2698-050c-8e42-4b0e03e5768d.jpeg)

### その他

#### 画面サイズ

小さい方が良いかも

17inch MacBook Proを使用していましたが、個人的には全画面で小さなフォントだと読みにくかったので解像度を落とすというか、フォントサイズをあげるというかをしておいた方が良いのかなと思った。試験アプリが追従するかわからないですが。

#### 外部デバイス

そういえば、試験中は仕舞っておいたBluetoothマウスが動いてしまい、ディスプレイ上にオーバーレイで表示される「接続しました」か「「接続が切れました」の表示がずっと消えない状態で最後まで表示されっぱなしでした。ピアソンVUEの試験アプリのためかも。使わないデバイスは電源OFFにするなりペアリングを解除しておいた方が良いかも。

http://www.life-gp.net/2014/03/macmagic-mousebluetooth.html

#### デスクライト

人感センサー付きのライトを使ってますが、基本マウス選択だけなので動きが少なく消えちゃいます。個室トイレのアレで電気が消えちゃったときに手をふるみたいに不自然な動きを注意されるのも、電気がついたり消えたりするのもアレかなぁと思い、ちょっと焦りました。電灯系の人感センサー機能は切っておいたほうが良いですね。


## まとめ

- 試験官によって対応が厳しいかもしれないので、なるべく物のない部屋で受験する
	- 試験が終わってからお風呂受験というのを知りました
	- 我が家は畳の部屋に何も置いてないので、正座は辛いが2時間ちょいなのでそっちが良いかな 
- 英語の試験官には日本語の運転免許証よりパスポートの方がよい(多分)
- 画面サイズは大きすぎないほうが見やすいかも
- 使わない外部デバイスは切っておく(Bluetooth)
- 人感センサーライトがあるなら機能を切る

https://wing-degital.hatenablog.com/entry/2021/05/26/070416

https://togetter.com/li/1727757
Pythonの演算子について

どこにでも書いてある内容です。自分の確認のために書いておきます。
# 代入演算子
* =

# 算術演算子
* +　足し算
* -　引き算
* *　かけ算
* /　割り算
* //　　整数除算（切り捨て）
* %　余りを求める
* **　べき乗（EXCELの"^"に相当）

# 比較演算子
* ==　等しい
* !=　等しくない
* >　大きい（同じ値ならFalse）
* >=　以上（同じ値ならTrue）
* <　小さい（同じ値ならFalse）
* <=　以下（同じ値ならTrue）
* その他、is/is not/in not in

# ブール演算子
* or 論理和：どちらかTrueならTrue、それ以外はFalse
* and　論理積：どちらもTrueならTrue,それ以外はFalse
* not　否定：TrueをFalseにFalseをTrueに変換する


#その他演算子
* 累算代入演算子
* ビット演算子
* シフト演算子
* 三項
* 演算子

# 演算子を用いる場合の注意
　プログラムにより算術演算子と比較演算子が逆になっている場合がある。そこに注意。
以前は、比較演算子と算術演算子で同じ記号を使っていたモノもあるがさすがにそれはほとんどないと想う。
PythonからVOICEVOXを使う

#VOICEVOX
商用利用可能なAIベースの音声合成ソフトウェア

https://voicevox.hiroshiba.jp/

ボイボと呼びましょう。

APIなのかと思ったら、ダウンロードして.exeを実行すると、ローカルにサーバーが立つみたい。
curlでも利用できるとのことなので、pythonで叩いてみた。
あらかじめ上記リンクから、VOICEVOX本体をダウンロードして実行しておいてください。

#実行環境

当方の実行環境は以下

 - CPU: i7 8550u
 - GPU: Nvidia MX150
 - Python = 3.9.5

CPUで実行しました。

#ソースコード

合成されるファイルは映像系のサンプルレート(モノラルの24000[Hz])なので注意

```voicevox.py
import json
import requests
import wave

def generate_wav(text, speaker=1, filepath='./audio.wav'):
    host = 'localhost'
    port = 50021
    params = (
        ('text', text),
        ('speaker', speaker),
    )
    response1 = requests.post(
        f'http://{host}:{port}/audio_query',
        params=params
    )
    headers = {'Content-Type': 'application/json',}
    response2 = requests.post(
        f'http://{host}:{port}/synthesis',
        headers=headers,
        params=params,
        data=json.dumps(response1.json())
    )

    wf = wave.open(filepath, 'wb')
    wf.setnchannels(1)
    wf.setsampwidth(2)
    wf.setframerate(24000)
    wf.writeframes(response2.content)
    wf.close()

if __name__ == '__main__':
    text = 'こんにちは！'
    generate_wav(text)
```

#感想
上記のPythonからしかためしていないので、GUIからだと解決できる機能があるかもですが、以下が簡単な感想です。

 - 合成にはそこそこ時間がかかるので、リアルタイムでの合成には向いていなさそう(マシンスペックによる？)
 - 英語をアルファベット読みされてしまうことがある(言語指定とかで回避できる？)
 - 音声自体の品質は高い方だと思う
 - 日本語にて、あらかじめ合成しておいて使うような用途であれば、現時点でベストプラクティスかもしれない
 - 音声合成はいつもライセンス周りで困るので、ラピットプロトタイピングできるようになるのはありがたい
 - 他の音声合成でもありがちだが、合成されたファイルは、音声部分のみ再生するとプツっと切れてしまう。
   "、"や"。"で無音を置けたり、SSMLでpauseを入れたりできるとよくなりそう。
初心者による初心者のためのGatsbyJS覚書4（パーツのコンポーネント化）

##この記事について
この記事はGatsbyJS初心者の新卒２年目が作成しています。
参考資料として書籍を使用していますが、筆者がビギナークラスのため読んでいて「？」となる部分や間違っている箇所もあるかと思います。
参考までに、そして間違えている箇所がありましたらご連絡いただけると嬉しいです。

##Chapter3：パーツのコンポーネント化備忘録メモ
今回のチャプター文では特につまずきや迷いはありませんでした。
なので簡単にまとめて行きます。


###ページを増やす準備

`src/`の配下に`components`ディレクトリを用意してその下に`header.js`と`footer.js`を用意する。

中身はこのような感じで準備。

```jsx
import React from "react"

export default () => (
//要素を追加していく
)

```
が、`gatsby develop`をするとこのような警告が出るのでコンポーネントの形を変えたほうが良さそう、、、

```sh
  6:1  warning  Anonymous arrow functions cause Fast Refresh to not preserve local component state.

       Please add a name to your function, for example:

       Before:
       export default () => {}

       After:
       const Named = () => {}
       export default Named;
  no-anonymous-exports-page-templates
  6:1  warning  Assign arrow function to a variable before exporting as module default
```
ということで`index.js`やコンポーネントファイル｀も下記のような記法に変更。

```jsx
import React from "react"

const ComponentName = () => (
  <div>

    //要素を追加

  </div>
)

export default ComponentName
```

`index.js`の`<header></header>`や`<footer></footer>`部分をコピーして
準備したコンポーネントファイルに引っ越しをする。

どちらの要素も`<header></header>`のようにラップされている状態なので`div`などで囲む必要はなし。

各コンポーネントファイルに引っ越しが完了したら、`components/`に`layout.js`を作成する。
これは作ったコンポーネントパーツをひとまとめに取り込むことのできる「まとめセット」ファイルとなる。
`children`はReactのプロパティでページごとの子要素を取り込める様になっている。

```jsx
import React from "react"
import Header from "./header"
import Footer from "./footer"
import "./layout.css"

const Layout = ({ children }) => (
<div>
    <Header />

    {children}
    
    <Footer />
</div>
)

export default Layout
```

今まで使用していた`src/style/style.css`を名前を変えて`src/components/layout.css`となるように移動させる。
また、今まで`gatsby-browser.js`で`src/style/style.css`を取り込んでいたが、
グローバルCSSを利用しているので推奨の「サイトの基本となるコンポーネントから適用する方法」を
使用するため`gatsby-browser.js`はファイルごと削除しておく。
※`gatsby-browser.js`でスタイルシートを取り込む方法は
Gatsbyにおけるスタイルの適用方法として挙げられる「CSS in JS」の方法に影響があるため。

あとは　`index.js`で`layout.js`を取り込み、
引っ越しを済ませた`<header>`や`<footer>`要素は削除し、
残りの要素を`<Layout></Layout>`で挟み込めば完成。

```jsx
import Layout from "../components/layout" //追加

const IndexPage = () => (
<Layout>

  //残りの要素

</Layout>
)

export default IndexPage
```

今回はここまで。
次回はこれを使用しながらページを増やしていく予定です。
matplotlibの上下異なるエラーバー付きグラフ

# 概要
matplotlibで上下異なるエラーバー付きグラフを描く。

![error_bar_sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548975/937b0d0f-ca59-e6a0-c309-5c2f518a12a1.png)

# プログラム
```python
import matplotlib.pyplot as plt

x = [1,2,3,4,5]
y = [10,20,30,40,50]
yerr = [[2, 1, 3, 3, 2], [4, 3, 4, 2, 4]]

plt.errorbar(x, y, yerr,label="", capsize=3, fmt='.', markersize=10, ecolor="black", elinewidth=0.5, markeredgecolor="black", color="w")
plt.plot(x, y, label="sample value", color="k", linewidth=1)
plt.legend(loc="lower right", fontsize=13)
plt.xlabel("x sample", size=13)
plt.ylabel("y sample", size=13)
plt.grid(linestyle="--")
```

# errorbar
エラーバーは``plt.errorbar()``で出力される。
x, yは``plt.plot()``と同じ値を出力し、``yerr``にエラーバーに表示したい値を入力する。
``yerr``に入力する値が二次元の場合、
**1次元目**が中心アイコンからエラーバーの**下**まで距離の値、
**2次元目**が中心アイコンからエラーバーの**上**まで距離の値
になる。

# 参考

* qiitaのerrorbar記事:


https://qiita.com/yuto_ohno/items/d2676e04f2d94fc30248

* errorbarの中心のアイコンfmt:

以下のリンクのformat setting


https://matplotlib.org/stable/api/_as_gen/matplotlib.pyplot.plot.html


* errorbarのlineの太さなど:


https://matplotlib.org/stable/api/_as_gen/matplotlib.pyplot.errorbar.html