OmniAICreator/Qiita-1.07M huggingface dataset:
crontabの記述法

Qiita初投稿です！！自分用に備忘録としてcrontabの設定方法を置いておきます。

#crontabのオプション
```crontab [ -u ユーザー名 ] { -l| -e | -r }```

#####-u オプション
cronを設定するユーザーを指定する。省略可能。省略するとcrontabを実行したユーザーになる。

#####-l オプション
現在のcrontabの記述を表示する。

#####-e オプション
crontabの設定を編集する。

#####-r オプション
crontabの削除。注意が必要！！！！

#crontabの書式
```分 時 日 月 曜日 shellscriptとかのファイルパス（またはコマンド）```
 - 各項目半角空ける
 - 曜日は月曜から1で日曜が7

ex.毎日9時から22時までの30分ごとにジョブを実施
```*/30　9-21 * * * comand    ・・・9-22までにすると21：30にも実施されちゃう、、、```
ex.毎週土曜日の21時に実施
```0 21 * * 6 comand```
ex.4月1日の15時に実施
```0 15 1 4 * comand```

#標準出力＆エラー出力
cronには標準出力とエラー出力をメールで送信する機能がデフォルトでついているので、
頻繁にやるジョブを知らずに放っておくと　/var/spool/mail/配下がすぐにいっぱいになってしまう、、、
そこでメールを停止させる。
 

```分 時 日 月 曜日 comand > dev/null 2>&1    ・・・標準出力やエラー出力ともに停止```

```分 時 日 月 曜日 comand 1 > dell/null   ・・・エラー出力だけ送信```

```分 時 日 月 曜日 comand > ファイルパス > 2>&1   ・・・ログ出力先のファイルパスを指定する```
【備忘録】さくらインターネットにてWordPressテーマCocoonインストール時につまづいた話

<h1>目的</h1>
さくらインターネットにてWordpressテーマをアップロードしたらうまくいかなかったので忘れないようにメモ

<h1>経緯</h1>
外観→テーマのアップロード→ファイルを選択→今すぐインストール

すると…

>辿ったリンクは期限が切れています。
>もう一度お試しください。

が表示されました。


調べていくとどうやらファイルの上限に引っかかっている様子
期限切れと思わせる表示おかしくない？と思いつつ解決策を実施していく

現状の設定は


メディア→メディアライブラリ→新規追加

>最大アップロードサイズ: 5 MB

これですね

アップしたかったファイルは11MB

PHP設定の編集→PHP設定ファイルの編集
で

```
upload_max_filesize = 15MB
```

にひきあげてみました

表示された結果は

>最大アップロードサイズ: 8 MB

あれ？15にしたんだけど…

```
post_max_size = 15M
```

にしてみると
最大アップロードサイズ: 15 MB
になりました

post_max_sizeが上流でひっかかっていたようですね。

無事テーマをインストールできました。

<h2>参考サイト</h2>
https://wp-cocoon.com/theme-install/
https://www.yoheim.net/blog.php?q=20190105
申し込みフォームの作成

#申し込みフォーム

<!DOCTYPE html>
<html>

<head>
    <meta charaset="utf-8">
    <meta name="vieport" content="width=device-width">
    <title>入会申し込み</title>

    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <!--フォーム画面-->
    <div class="content">
        <h1>入会申込み</h1>
        <p>入会するには、次のフォームに必要事項をご記入下さい。</p>
        <div class="control">
            <label for="mymail">メールアドレス<span class="required">必須</span></label>
            <input id="mymail" type="email" name="mymail">
        </div>
        <div class="control">
            <label for="passcode">パスワード<span class="required">必須</span></label>
            <input id="passcode" type="password" name="passcode">
        </div>
        <div class="control">
            <button type="submit">登録する</button>
        </div>
    </div>
</body>

</html>
GASでエラー処理を実施する

# このポストの目的
Google Apps Scriptを用いてアプリケーションを開発する際のエラー処理についてまとめよます。`try-catch-finally`と、そこで補足したErrorへの対処についてです。

なぜかErrorの詳細情報が公式サイトに見つからず、手探りで、これかなという方法をまとめました。（そもそも、ErrorなのかExceptionなのかも、情報混在で分かりづらい。デバッグ実行した結果でErrorと確認できたため、この方向で整理しました。）

# try-catch-finally
Errorが発生する可能性がある処理に対しては、`try-catch-finally`を使って対処します。

```JavaScript
function tryCatchSample(){
  try {
    // エラーが発生する可能性がある処理
    myFunction();
  }
  catch(error) {
    console.error(printError(error));
  } 
  finally {
    console.log("finallyの処理です。");
  }
}
```

# 補足（catch）したErrorの処理
Error内容を正確に捉えることによって、問題の原因を早くできるようになります。上のサンプルでは `printError(error)` という関数を作って詳細情報を出力するようにしました。

```JavaScript
function printError(error){
  return "[名前] " + error.name + "\n" +
         "[場所] " + error.fileName + "(" + error.lineNumber + "行目)\n" +
         "[メッセージ]" + error.message + "\n" +      
         "[StackTrace]\n" + error.stack;
}
```

StackDriver Loggingに`console.error()`で書き込むと、このようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/34410/7b4255b4-b8db-87b7-e8a5-cb4ed1ee73db.png)


以上です。
The java.home variable defined in Visual Studio Code settings points to a missing or inaccessible folder (C:avadk-13.0.1)というエラーをはかれた

#エラーが出た
先日Javaの学習を始めたのでVScodeの拡張機能をインストールしていたら
"Language Support for Java(TM) by Red Hat"が
###"The java.home variable defined in Visual Studio Code settings points to a missing or inaccessible folder (C:avadk-13.0.1)"
というエラーをはきやがりました。

__setting.json__の中にはしっかりと設定しているつもりでしたがよく見てみると
エクスプローラからパスをコピーしてきたものは
__"C:\Java\jdk-13.0.1"__となるのですが
__setting.json__のなかに記述されているほかのアドレスたちは
__"\"__ではなく__"/"__となっていたのです！
どうやらこれのせいで認識されなくてエラーをはいていたようです。
皆さんも気を付けましょう。
#まとめ
エクスプローラでコピーしてくるとアドレスの区切りが"\"
setting.jsonのなかではアドレス区切りは"/"
そのせいで読み込めなかった。
置き換えたらうまく読み込んでくれました。
JavaScript勉強の記録その5: breakとcontinueを使ったループ処理

#breakとcontinueを使ったループ処理

breakやcontinueを利用して、ある条件の時にはループ処理を抜けたり、次のループ処理に入ったり等、制御をすることができます。　
まず、以下の例では変数が3の倍数の時にコンソールに「こんにちは」と表示します。

```index.js
for (let i = 1; i <= 10 ; i++) {
  if (i % 3 === 0) {
    console.log('こんにちは');
  }
  console.log(i);
}

// 1
// 2
// こんにちは
// 3
// 4
// 5
// こんにちは
// 6
// 7
// 8
// こんにちは
// 9
// 10
```

上記の例では３の倍数の時には、「こんにちは」と「３の倍数」が出力されてありますが、「３の倍数」の時は、数字は表示せず、「こんにちは」だけ表示したいときもあるかと思います。
そのような時は、continueという命令を加えることで、制御を加えることができます。

以下の例ではcontinueが呼ばれた時点で次のループ処理に入ることができますので一番下のconsole.log(i)は呼ばれません。

```index.js
for (let i = 1; i <= 10 ; i++) {
  if (i % 3 === 0) {
    console.log('こんにちは');
    continue;
  }
  console.log(i);
}

// 1
// 2
// こんにちは
// 4
// 5
// こんにちは
// 7
// 8
// こんにちは
// 10
```

最後に、ある条件に当てはまった時点でループ処理を抜けたい、という時もあるかと思います。
そう言う時はbreakという命令を使えば、その時点でループ処理を抜けられます。

```index.js
for (let i = 1; i <= 10 ; i++) {
  if (i % 3 === 0) {
    console.log('こんにちは');
    break;
  }
  console.log(i);
}

// 1
// 2
// こんにちは
```
Rails超基本コマンドチートシート(モデル/ビュー/コントローラーの追加)

Ruby/Rails エンジニアとして働き始め2ヶ月ほど立ちますが、まだ Rails のコマンドを業務では使ったことがありませんのでほとんど忘れてしまっています。就職前に学習したので調べれば思い出せるとはいえ、この程度のコマンドならば、業務で必要になった時にわざわざ1つずつ調べるのは時間がかかりすぎます。
そこで、必要な時にサクッと思い出せるよう、チートシートとしてにまとめます。

## 前提
各コマンドの意味や内容は割愛しますので、詳細は、 Rails ガイド(https://railsguides.jp/) などをお読みください。


## モデル関連

### モデル生成
モデルとマイグレーション生成する

```
$ rails generate model Name column_name:column_type
```

例

```
$ rails generate model User name:string number:integer
```

### マイグレーション実行

マイグレーションを実行する

```
$ rails db:migrate
```

### カラム追加

```
$ rails generate migration AddColumunNameToModelName
```


例

```
$ rails generate migration AddAccountIdToUsers
```

## コントローラー・ビュー関連

###　コントローラー生成
コントローラーとビューが生成する

```
$ rails generate controller Name action
```

例

```
$ rails generate controllser Users index show new edit
```


### StrongParameters
モデルのインスタンスにどのパラメーターを保存してよいかを指定する

#### 1つのパラーメーターの場合

例

```
def create
  User.create(params[:name])
end
```

#### 複数のパラメーターの場合

例

```
def create
  User.create(user_params)
end

private
def user_params
  params.permit(:name, :number)
end
```

## ルーティング関連

テーブル名とアクション名を指定する

```
resource :table_name, only:[:action]
```

例

```
resources :users, only: [:index, :show, :new, :create, :edit, :update, :destroy]
```

### まとめ
その他にも多用するコマンドがあれば、随時追加していきます
micro:bit をたくさん持ち運ぶのに便利なケース

みんな大好きDAISOで、ジャストサイズを発見！

![IMG_20200112_123408.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57516/2c119757-a541-45a4-abca-dd590b9a9b9a.jpeg)

18個入りに10個入れて持ち運びやすいです。

![IMG_20200112_122926.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57516/669309f8-a00b-5f62-19b4-e1705280263d.jpeg)

USBケーブルも、DAISOで10本買って、入れてみました。

見た感じ、12個行けそうなんだけど、USBケーブルが10本でパンパンになったので、10個ずつに。
短めのUSBケーブルをお使いなら、ダースで運べそうです。

※DAISOだけど、150円の商品でした。

![IMG_20200112_122522.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57516/a02cc96d-08d8-2a8b-1766-34aed5e98b25.jpeg)

ほぼジャストサイズですが、カチャカチャを減らしたいので、後ほど、静電気防止スポンジでもかって、チョキチョキして、引き詰めようかなと思っています。

こんなスポンジ。
https://www.amazon.co.jp/dp/B000TGHA9Y/

仕切り板も着脱可能は便利なんだけど、外れやすくもあるから、運用が固まったら、ボンドかなにかでくっつけちゃうのもいいですね。

おやおや、一部屋に5枚詰め込んだら、カチャカチャいわなくなる。
これはこれでたくさん詰め込めるけど、是か非か。

![IMG_20200112_140743.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57516/b730a2bc-1005-0394-13a6-6abe648cd909.jpeg)
![IMG_20200112_141016.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57516/5a889f6b-eb4c-85c0-0cf5-920a75f25337.jpeg)
JavaScript勉強の記録その4: while文

#JavaScriptでwhile文

while (条件式) {条件式がTrueである間、行いたい処理;}
と書くことでループ処理ができる。

以下の例ではhpという変数が０以上の間はループ処理をして、hpがなくなるまで数字を減らしていきます。

```index.js
let hp = 150;

while (hp >= 0) {
  console.log(`${hp} HP left!`);
  hp -= 15;
}

//150 HP left!
//135 HP left!
//120 HP left!
//105 HP left!
//90 HP left!
//75 HP left!
//60 HP left!
//45 HP left!
//30 HP left!
//15 HP left!
//0 HP left!
```
ネット環境なしで手持ちの端末をサーバーに接続させる。

# 発端
筆者はよく行きつけのカフェでWEB開発をしております。

ところが困ったことに、カフェなどで設置されている公共Wifiでは、ルーターの設定で他機の存在が秘匿にされている場合が多いです。（当然pingも打てない）

セキュリティの観点から妥当な処置ではあるのですが、開発しているWEBサイトをスマホで確認する･･･といったことはできません。

対処法として、パソコン自体をルーターにして独自のLANを構築し、端末と通信することがあげられます。

パッと見では難しそうですが、Windowsでは7から**SoftAP**という機能が標準で用意されており、Microsoftが提供している仮想ネットワークアダプタを利用して、パソコンをルーターとして扱うことができるようになります。

そこで今回は、SoftAPを利用してパソコン単体でLANを構築し、Nodeでサーバーを起動、手持ちの端末でLANに接続して、サーバーからレスポンスを受け取ることを目標にします。

# LANの構築
1 . コマンドプロンプトを管理者権限で起動

2 . 以下のコマンドを実行

``` cmd
C: > netsh
netsh > wlan
netsh wlan > set hostednetwork mode=allow ssid=your_ssid key=your_password
```

3 . hostednetworkを起動

```
netsh wlan> start hostednetwork
```

これでうまくいった人はついてます。
筆者の場合は下記のログが出てLANが構築できませんでした。

```
netsh wlan> start hostednetwork
ホストされたネットワークを開始できませんでした。
グループまたはリソースは要求した操作の実行に適切な状態ではありません。
```
主にMicrosoft Hosted Network Virtual Adapterが有効になっていない場合が想定されます。対処法は後ろに載せます。参考に他の記事も載せておくのでそちらもどうぞ。



起動に成功した場合は、LAN内のipアドレスを確認します。

```
> ipconfing
~~
IPv4 アドレス . . . . . . . . . . . .: 192.168.0.1
~~

```

# サーバーの起動
Nodeでサーバーを起動します。

``` js:server.js
const express=require("express");
const app=express()
app.get('/',(req,res)=>{
    res.send(`Hello World!`);
});
app.listen(3000);
```

# 実機で接続

1 . 端末から、上で設定したSSIDにWifiで接続

2 . ブラウザで IPアドレス + ポート にアクセス
(上の例だと192.168.0.1:3000)

うまくHello Worldできてれば成功 !!

 
 
  
これでパソコンで起動したサーバーと端末を、ネット環境に依存せずに接続させることができました。

LANを構築しているパソコンがネットに接続できている場合は、端末がネット上のリソースを要求してもきちっと返してくれます。(というかまんまプロキシなので）

当然ネット環境がないとインターネット上のリソースが必要になるような処理は無理です。

しかし序盤で言ったように、他機の存在が秘匿されているようなLANでは、パソコンがプロキシとなって端末と接続できるようになる、という意味で有用な場面もあるのではないでしょうか。

# (追記)Microsoft Hosted Network Virtual Adapterのインストール
SoftAPではMicrosoftが提供しているMicrosoft Hosted Network Virtual Adapterというネットワークアダプタを利用しています。こちらを用意してあげる必要があります。

1 . 下のコマンドを実行し、ドライバー名を確認する。

```
netsh wlan> show drivers
```
2 . **デバイスマネージャー**を起動し、ネットワークアダプターの欄の中にある、1で確認したドライバー名を右クリック

3 . ドライバーの更新を選択し、コンピューターを参照してドライバーソフトウェアを検索を選択。

4 . コンピューター上の利用可能なドライバーの一覧から選択しますを選択。

5 . **※Microsoftのモデルを選択して**、次へ、ドライバーをインストールする。

※筆者の場合は同名のモデルがいくつもでて、順に更新していったら成功しました。

6 . デバイスマネージャーのメニューバーにある表示タブで、非表示のデバイスの表示を選択。ネットワークアダプターの欄にあるであろうMicrosoft Hosted Network Virtual Adapterを有効にする。

これでhostednetworkが起動できるはずです。

# 参考
- [Create Ad Hoc WiFi Hotspot In Windows 10, Here’s How](https://www.redmondpie.com/create-ad-hoc-wifi-hotspot-in-windows-10-heres-how/)

- [Windows 10 PC経由でスマホを無線Wi-Fiでネット接続できない：ホストされたネットワークを開始できませんでした。~SoftAP機能のエラー対策](https://www.billionwallet.com/windows10/softap.html)

- [how to install microsoft hosted network virtual adapter](https://answers.microsoft.com/en-us/windows/forum/all/how-to-install-microsoft-hosted-network-virtual/638f91b9-e546-466d-b491-6db857cf9f3f)
AWSに構築したWordPressのエラーページを変更してみた

# はじめに
「[AWSにWordPressを構築してみた](https://qiita.com/olaf_system/items/e5e17cd8ead71ec9a096)」
「[AWSに構築したWordPressに独自ドメインを割り当ててみた](https://qiita.com/olaf_system/items/46723a020456120ffd65)」
「[AWSに構築したWordPressをhttps対応してみた](https://qiita.com/olaf_system/items/d80aa943107eb2cfcb20)」
の続き。

構築した時に利用したWordPressのAMIがnginxを利用していたのでそれ用の設定。

とりあえずちょっと調べたところによると既にWordPressにはエラーページが用意されているみたい。
https://xxxxxxxxx/?error=404
こんな感じでアクセスするとエラーページが表示される。
でも今、適当なURLでアクセスするとnginx側の404ページが表示される。

<img width="1440" alt="スクリーンショット 2020-01-12 12.12.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563625/b6a37973-dcbc-a30c-6e4d-32d3e949ee73.png">
なので、nginxで404を検知したらWordPressの404ページにリダイレクトする作戦でいく。

# サーバー側の設定
設定はすごく簡単。

```
# error_page....の行を追加
$ sudo vi /etc/nginx/conf.d/wordpres.conf
_/_/_/_/_/_/_/_/_/_/_/_/_/_/
server {
  listen 80;
  server_name olafblog.org;
  error_page 403 404 500 503 =404 /?error=404;

  location / {
    if ($http_x_forwarded_proto = 'http'){
      return 301 https://$host$request_uri;
_/_/_/_/_/_/_/_/_/_/_/_/_/_/

# 再起動
$ sudo nginx -s reload
```

はい、完了。適当なURLでアクセスしてみる。
<img width="1427" alt="スクリーンショット 2020-01-12 12.20.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563625/9c8b4616-e6dd-5763-6824-ad8e1e0648f2.png">

おk。うまくできた。お疲れ様でした。
Jupyter学習ノート_005

## GitHubのリポジトリを[google colab](https://colab.research.google.com/)にcloneする方法

下記の手順です。

- google drive をマウントする

```google_drive.py
from google.colab import drive
drive.mount('/content/drive')
```
- git clone で指定した場所にリポジトリを作成する

```git_clone.py
import shutil
import os

#カレントディレクトリを変更する
os.chdir('/content/drive/My Drive')
cur_dir = os.getcwd()
git_name = '/MongoDB_PyMongo_Tutorial'
git_folder = cur_dir + git_name

#存在すれば削除する
if os.path.exists(git_folder):
    shutil.rmtree(git_folder)

#クローンする
!git clone https://github.com/Giffy/MongoDB_PyMongo_Tutorial.git
```

- 実施結果  
![git_clone](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/551056/b316b167-ffc1-ce1c-a494-a02c560dc68f.png)
preprocess_input()のメモ

#preprocess_input()
画像の標準化を行う。
`preprocess_input`はVGG16のような学習済みモデルで使用する。

>翻訳：「画像のバッチをエンコードするテンソルまたはNumpy配列を前処理します。
参考：https://github.com/keras-team/keras-applications/blob/976050c468ff949bcbd9b9cf64fe1d5c81db3f3a/keras_applications/imagenet_utils.py#L36



#VGG16の場合
パラメータ
dataformat:'channels_last'
mode:'cafe'

>翻訳：caffe：画像をRGBからBGRに変換し、スケーリングせずにImageNetデータセットに対して各カラーチャネルをゼロ中心にします。
参考：https://github.com/tensorflow/tensorflow/blob/ada7cad7514b1641a58cbc333dba1ed92f5e513c/tensorflow/python/keras/applications/imagenet_utils.py#L36

「新たに推論または学習する画像をVGG16の学習に使った画像の平均で引いて、分散で割る」ってことかな。
#その他
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396969/9707d851-9ef5-1a7f-ba2e-2beec0f7c558.png)

参考：https://medium.com/@sci218mike/%E5%9C%96%E7%89%87%E9%A0%90%E8%99%95%E7%90%86%E4%BD%BF%E7%94%A8keras-applications-%E7%9A%84-preprocess-input-6ef0963a483e
ケモインフォマティクスで学ぶPythonの関数

# はじめに

[ケモインフォマティクスで学ぶPythonの反復処理](https://qiita.com/yukiya285/items/cca27f036c0efac6bec7)に引き続き、リピドミクス（脂質の網羅解析）を題材として「関数」について解説していきます。
ケモインフォマティクスの実践例を中心に説明していきますので、基本を確認したいという人は以下の記事を読んでからこの記事を読んでみてください。

[製薬企業研究者がPythonにおける関数についてまとめてみた](https://qiita.com/yukiya285/items/5120a3492326bb9ae759)


# 関数の作成と利用

関数というのは、一連の処理をひとまとめにしたもので、`def 関数名（仮引数）:`と書くことで作成することができます。ちなみに、`def`は「define」の略です。
一度関数を作成したら、あとは関数名を呼び出すだけで、関数内に記述されている処理を実行できます。
戻り値（返り値）は、`return`を使って書くことができます。

```python
def show_smiles_pa():
    return 'OC(CCCCCCCCCCCCCCC)=O'


show_smiles_pa() # OC(CCCCCCCCCCCCCCC)=O
```

上の例では、SMILES記法で記述したパルミチン酸を戻り値とする関数になっています。
関数を定義した後に、関数名`show_smiles_pa`を呼び出すと、戻り値が得られます。

上の例では、関数作成時に仮引数がありませんが、仮引数をつけて関数を作成することも可能です。
以下に例を示します。

```python
def oxidize_fatty_acid(smiles):
    
    if smiles.count('=') <= 1:
        return 'This fatty acid is not oxidized. '
    else:
        return smiles.replace('/C=C\\', 'C(O)C')


smiles_pa = 'OC(CCCCCCCCCCCCCCC)=O'
oxidize_fatty_acid(smiles_pa) # This fatty acid is not oxidized. 

smiles_la = 'OC(CCCCCCC/C=C\C/C=C\CCCCC)=O'
oxidize_fatty_acid(smiles_la) # OC(CCCCCCCC(O)CCC(O)CCCCCC)=O
```

上の例では、仮引数としてSMILES（文字列）を受け取り、飽和脂肪酸だった場合は、`This fatty acid is not oxidized. `が戻り値となり、不飽和脂肪酸だった場合は、炭素鎖の二重結合部分が酸化された化合物のSMILESが戻り値となります。

仮引数を複数設定することも可能です。
以下に例を示します。

```python
def calculate_exact_mass(Cn, Un):
    return 12 * Cn + 1.00783 * (2 * Cn - 2 * Un) + 15.99491 * 2


calculate_exact_mass(16, 0)

calculate_exact_mass(18, 2)
```

また、キーワード引数をとることもでき、`キーワード名 = 値`とします。
以下に例を示します。

```python
def abbreviate_fatty_acid(Cn, Un, sep=':'):
    return str(Cn) + sep + str(Un)


abbreviate_fatty_acid(16, 0) # 16:0

abbreviate_fatty_acid(16, 0, sep='_') # 16_0
```

上の例では、キーワード引数`sep`を関数呼び出し時に指定しなかった場合は、関数定義時のデフォルト値である`:`が使われ、関数呼び出し時に`sep`を指定した場合はその値に更新されます。

# 変数のスコープ

関数を利用する時には、「変数のスコープ」に注意する必要があります。
変数のスコープというのは、変数がどの範囲で使えるかということで、関数内だけでしか使えない場合（プライベート変数）もあれば、関数の外でも使える場合（グローバル変数）もあります。

```python
def abbreviate_fatty_acid(a, b):
    Cn = a
    Un = b
    return Cn, Un


Cn = 16
Un = 0

abbreviate_fatty_acid(18, 2) # Cn = 18, Un = 2

print(Cn, Un) # Cn = 16, Un = 0
```

上の例では、関数`abbreviate_fatty_acid`内で出てくる変数`Cn`と`Un`はいずれもプライベート変数で、関数の外で定義されている`Cn`と`Un`とは別物です。
なので、関数を呼び出しても、変数`Cn`と`Un`の値は更新されません。

ここで、関数を呼び出すことで、変数`Cn`と`Un`の値も更新したい場合は、`global`を使って、関数内の`Cn`と`Un`がプライベート変数ではなくグローバル変数であることを示す必要があります。

```python
def abbreviate_fatty_acid(a, b):
    global Cn
    global Un
    Cn = a
    Un = b
    return Cn, Un


Cn = 16
Un = 0

abbreviate_fatty_acid(18, 2) # Cn = 18, Un = 2

print(Cn, Un) # Cn = 18, Un = 2
```

上の例では、`Cn`と`Un`がグローバル変数として扱われているので、関数呼び出し時に`Cn`と`Un`の値も更新されます。


# まとめ

ここでは、Pythonの関数について、ケモインフォマティクスで使える実践的な知識を中心に解説しました。
もう一度要点をおさらいしておきましょう。

- 関数はひとかたまりの処理をまとめて記述したもので、一度作っておけば、あとは呼び出すだけで処理を実行できます。
- 関数内で変数を扱う時には、変数のスコープに注意する必要があります。


続いて、Pythonのクラスについて以下の記事で解説しています。

[ケモインフォマティクスで学ぶPythonのクラス](https://qiita.com/yukiya285/items/7d4dc98b4a4b4cc410e5)


# 参考資料・リンク

[プログラミング言語Pythonとは？AIや機械学習に使える？](https://pharma-engineer.com/basic-programming/python-summary/)
Vue ナビゲーション

```
○ <router-link :to="{ path: '/product' }">

○ <router-link :to="{ path: '/product', query: { page: 1 } }">

x <router-link :to="{ path: '/product', param: { id: 1 } }">

○ <router-link :to="{ name: 'product', param: { id: 1 } }">
```
Stripe::InvalidRequestError:        Request validation error: validator 0xc000f7e5a0 failed: additional properties are not allowed: end_behaviour

```
     Stripe::InvalidRequestError:
       Request validation error: validator 0xc000f7e5a0 failed: additional properties are not allowed: end_behaviour
```

Fix spelling

end_behaviour -> end_behavior

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2935








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
12ステップで作る 組込みOS自作入門 ～開発環境の構築～

#～開発環境の構築～

1. 初めに
---
* 自己紹介
 * 仕事：家電製品の設計（主にnonOS白物家電の組込みプログラム開発）。
 * プログラム歴：学生時代はほとんど興味なく、会社に入ってからC言語を学習。<br>（高度なプログラムは書けず、センスのなさを痛感しています）
 * 仕事で使っている言語：C言語
 * その他個人的に学習した言語：C#、Java、JavaScript、HTML、PHP、python
 * 組込みOSを自作しようと思った動機：普段の開発ではルネサス等の統合開発環境、コード生成を使用しており、マイコンのスタートアップ等ハードウェアに近い部分の知識が不足していると感じたから。

2. 参考書の選定
---
「坂井弘亮氏著(カットシステム出版)　12ステップで作る 組込みOS自作入門」で学習を進めていく。
実はこの本、学習基板と合わせて3年ほど前に買っていたのだが、ほぼ使用することなく放置してしまっていた。
  

3. 開発環境の構築 
---
linux環境でもよいが、今回はWindows環境で開発を行う。

* Cygwinのインストール<br>
windowsPCでgccを利用するため、Cygwinをインストールする<br>
 * cygwinのインストール
 * apt-cygのインストール<br>
   パッケージ管理ツールのaptをインストールする。

```shell:aptのインストール
$ wget https://raw.githubusercontent.com/transcode-open/apt-cyg/master/apt-cyg
$ chmod 755 apt-cyg
$ mv apt-cyg /usr/local/bin/
```

* binutilsのインストール<br>
PCでH8マイコン用の開発をするため、下記gccと合わせてクロスコンパイル環境を構築する。<br>
 * ミラーサイトからおbinutilsをダウンロードして保存する。http://core.ring.gr.jp/GNU/<br>
 * Cygwinのプロンプトにてダウンロードフォルダへ入ってbinutilsを解凍し、H8用にビルドを行う。<br>
64bit 環境だと、Makefileが64bit環境に対応していないので、以下のように`--build`オプションで指定するらしい。<br>
 * ビルドできたらmake installを実行する。

```shell:binutilsのインストール
$ tar xvzf binutils-2.22.tar.gz
$ ./configure --target=h8300-elf --build=x86_64-unknown-cygwin --disable-nls --disable-werror
$ make
$ make install
``` 
* gccのインストール<br>
  binutilsと同様にミラーサイトからgccをダウンロードし、展開、H8用にインストールする。
  ※configureの途中でGMP, MPFR, MPCなるものが必要と言われたので、それもダウンロードしインストールする。その前にm4というのも必要らしい。<br>
prefixオプション等が正しいかは不明... linux勉強不足です。。

```shell:m4のインストール
$ apt-cyg install m4 m4-doc
```

```shell:GMPのインストール
$ tar -xvf gmp-6.1.2.tar.xz
$ cd gmp-6.1.2
$ ./configure --prefix=/usr/local/ --build=x86_64-unknown-cygein --disable-static --enable-shared
$ make
$ make install
```
```shell:MPFRのインストール
$ tar -xvf mpfr-4.0.2.tar.gz
$ cd mpfr-4.0.2
$ ./configure --prefix=/usr/local/ --with-gmp=/usr/local
$ make
$ make install
```

```shell:gccのインストール
$ tar xvzf gcc-3.4.6.tar.gz
$cd gcc-3.4.6
$ ./configure --target=h8300-elf --build=x86_64-unknown-cygwin --disable-nls --disable-threads --disable-shared --enable-languages=c
```
C#高速/最適化メモ

#概要
色々な高速化などの噂について検証してみました
探せばいくらでもあるforとforeachの速度などは載せていません

##なるべく二進数換算で小さい値に

2進数換算をした時に、1の数がなるべく少ない方が高速らしいという噂を聞いてやってみた

###結果

|+n|二進数換算|結果|+m%(+2基準)|
|:-:|:-:|:-:|:-:|
|+2|10|138459ms|0%|
|+127|1111111|148959ms|+7%|
|+128|10000000|139022ms|+0.4%|

###コード

```sample.cs
var sw = new System.Diagnostics.Stopwatch();

			//-----------------
			// 計測開始
			sw.Start();

			// ★処理A
			for(int i = 0; i < 100000000; i++) {
				int num = 0;
				for(int j = 0; j < 1000; j++) {
					num += 2;
				}
			}

			// 計測停止
			sw.Stop();

			// 結果表示
			Console.WriteLine("■処理Aにかかった時間");
			Console.WriteLine($"　{sw.ElapsedMilliseconds}ミリ秒");

			sw.Reset();

			sw.Start();

			// ★処理B
			for (int i = 0; i < 100000000; i++) {
				int num = 0;
				for (int j = 0; j < 1000; j++) {
					num += 127;
				}
			}

			// 計測停止
			sw.Stop();

			// 結果表示
			Console.WriteLine("■処理Bにかかった時間");
			Console.WriteLine($"　{sw.ElapsedMilliseconds}ミリ秒");

			sw.Reset();

			sw.Start();

			// ★処理C
			for (int i = 0; i < 100000000; i++) {
				int num = 0;
				for (int j = 0; j < 1000; j++) {
					num += 128;
				}
			}

			// 計測停止
			sw.Stop();

			// 結果表示
			Console.WriteLine("■処理Cにかかった時間");
			Console.WriteLine($"　{sw.ElapsedMilliseconds}ミリ秒");

			System.Threading.Thread.Sleep(10000);
		}

```



###補足
1000回の足し算を1億回やってこの程度(+7%)なのであまり気にしなくていいかもしれない
あと1000回の足し算を1000回程度ならPCの調子か、+128の方が遅いという結果になることも多少あったので、気休め程度に。

##ビットシフトを使う
2の乗数で割り算をするとき、ビットシフトを使うと高速らしいという話を検証

###結果
|やり方|結果|+n%(/=基準)|
|:-:|:-:|:-:|
|/=|20798ms|0%|
|= num/2|20660ms|-1%|
|num>>=1|4429ms|-79%|

コード

```sample.cs
for(int i = 0; i < 10000000; i++) {
	int num = int.MaxValue;
	while(num > 2) {
		num /= 2; //この部分を変更
	}
}
```

###補足
処理時間が5分の1……！
/=2とnum=num/2の差については誤差らしいというのを次項で説明

##num/=2とnum=num/2

VisualStudioでは逆アセンブリという機能があり、それでデコンパイル状態のコード(アセンブリ言語？)を見ることができる
そこで見てみると、同じらしい

```
num /= 2;
mov         eax,dword ptr [ebp-44h]  
mov         ecx,2  
cdq  
idiv        eax,ecx  
mov         dword ptr [ebp-44h],eax  

num2 = num2 / 2;
mov         eax,dword ptr [ebp-48h]  
mov         ecx,2  
cdq  
idiv        eax,ecx  
mov         dword ptr [ebp-48h],eax 
```

全く同じ処理をしているので、全く同じ速度ということになるはずということで、誤差ということが判明

##構造体とクラス
構造体の方が早いらしい。ただし一定以上のバイト数になるとクラスの方がいいらしい

###結果

|バイト数|構造体|クラス|処理時間(構造体を100%としたとき)|
|:-:|:-:|:-:|:-:|
|4|1731ms|5407ms|312%|
|16|1725ms|5916ms|342%|
|20|1808ms|6341ms|350%|
|32|1898ms|7399ms|390%|
|40|2076ms|7178ms|345%|
|44|9946ms|8416ms|85%|
|60|10366ms|8296ms|80%|
|64|8557ms|9155ms|107%|
|104|11142ms|10512ms|94%|
|128|8568ms|12236ms|143%|

:thinking:

###補足
構造体だと2の乗数で処理速度が上がるらしい
場合と数が大きいほどclassを使うメリットがあり、ぎりぎりまで高速化したい場合はstructか
ただ、さまざまなところで見た16bitが境目という話はなかったし、40~44の間で劇的に構造体が遅くなる理由は見当もつかないので、この話題について掘り下げるのは避けたいと思う

##その他メモ
・stringは極力StringBuilderを使った方が早い
・ifとswitchはifの方が基本早い
・多分岐では上から順に出現頻度が多い条件を書くことで比較回数を減らすことができる

#Unity編
・UnityのgameObject.tag=="hoge"より、gameObject.CompareTag("hoge")の方が早いらしい。gameObject.tagのアクセスが処理を食うとか
・[UI周りの最適化など](https://unity3d.com/jp/how-to/unity-ui-optimization-tips?_ga=2.59746093.1268028172.1580706040-1257035063.1538986841)
・Resourcesは出来る限り使わない
・[全般のパフォーマンス改善](http://tsubakit1.hateblo.jp/entry/2018/06/09/235351)
NodeJSで、opencvを触るまで

Node jsは偉大ですよね！

一つのプログラムでhttpサーバーもwebscketサーバーも、ラズパイを使えばSPIやシリアル通信まで行えてしまいます！

しかも速度だってc++とそこまで変わらないし（ほんまか）

もうJavaScriptはクソだって言わせない!

さて、Nodejsを布教するのはこれくらいにして本題に入ります。

# 本題
**Nodejsから、webカメラの画像を読み込みたい!!**

調べていてよくあるのが、nodejsで建てたサーバーにクライアントから画像データを送るという記事。

しかし、私はnodejsをうごかしているパソコンにつながったカメラの映像を取得したいのです。

しかし、なかなか最適な答えにたどり着けなかったので、記事にまとめておきます。

# 手法
プログラムからカメラの画像を取得するといえば、やはりopenCVでしょう。

opencv3をサポートしている[opencv4nodejs](https://www.npmjs.com/package/opencv4nodejs)を使用します。

早速npmからインストール

```
npm install --save opencv4nodejs
```

これだけで導入完了です。
ただし、インストールにかなり時間がかかるので注意が必要です。

あとは他のモジュール同様、

```
const cv = require('opencv4nodejs');
```

すれば使用できます。


## 最後に
カメラ画像の取得の仕方と題しておきながら、本質情報がコード2行という記事になってしまいましたが、お許しください。

それでは、楽しいNodejsライフを！！
初心者によるプログラミング学習ログ 208日目

# 100日チャレンジの208日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

208日目は

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>208日目<br><br>3日ぐらいぶりにプログラミング勉強した<br>技術書で、htmlとcssでwebサイトコーディング<a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> <a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a> <a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1216098458550984704?ref_src=twsrc%5Etfw">January 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
[コピペで即使える]CSSだけで作った三角形の矢印ボタン

##CSSのみでボタンを作る時、皆さんは、どのように作っていますか？
今回は、CSSで三角形の上向き・下向き矢印ボタンの作り方を紹介したいと思います！
以下の写真が、これから製作する矢印ボタンのブラウザでの表示となります。
<img width="111" alt="スクリーンショット 2020-01-12 10.43.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/436942/976fd92b-ff0e-7918-bf30-25e868ffe93d.png">

では、さっそくhtmlとcssを見ていきましょう！
以下がHTMLです。

```html

<div class="upward"></div>
<div class="downward"></div>

```
以下がCSSです。

```css

.upward{
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
    margin-left: 30px;
}
.upward::before,.upward::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.upward::before{
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 1px solid blue;
    background-color: blue;
    border-radius: 25%;
}
.upward::after{
    margin-left: 4.5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 8.7px 5px;
    border-color: transparent transparent #ffffff transparent;
}
.downward{
    margin: 0 20px 0 8px;
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
}
.downward::before,.downward::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.downward::before{
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 1px solid  blue;
    background-color:  blue;
    border-radius: 25%;
}
.downward::after{
    margin-left: 4.5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8.7px 5px 0 5px;
    border-color: #ffffff transparent transparent transparent;

}
```

##解説
.upward::before, .downward::beforeの部分が四角形の外枠になっています。
→四角形の色・大きさを変える際は、ここをいじります。

.upward::after, .downward::afterの部分が矢印です。
→矢印の大きさ、向きを変える際は、この.upward::afterや.downward::afterを変える必要があります。

「CSS三角形作成ツール」
http://apps.eky.hk/css-triangle-generator/ja

この三角形作成ツールが、けっこうオススメで、この作成ツールで、矢印の向き・色・大きさなどを指定できます。
ここで作ったものを.upward::afterや.downward::afterに貼り付けると、自分の好きな色・向きで、矢印を作成できます。
僕の場合は、貼り付けただけだと、矢印が真ん中に来ないので、margin-leftで真ん中に来るように調整しています。
Vue URLにハッシュをつけない

Vue Router
ハッシュ
ヒストリー

ハッシュモードはハッシュ値の変更によって現在のルートを検知するため、
ブラウザのHistory Apiのサポートやサーバ側の設定を必要としないが、

自動的にURLに「#」が付与されページ内リンクが使用できない

export default new Router({
+  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },

あと.htaccessかserver.confにmode_rewrite的な設定必要
WordPressにGoogleAnalyticsを導入してみた

# はじめに
「[AWSにWordPressを構築してみた](https://qiita.com/olaf_system/items/e5e17cd8ead71ec9a096)」
「[AWSに構築したWordPressに独自ドメインを割り当ててみた](https://qiita.com/olaf_system/items/46723a020456120ffd65)」
「[AWSに構築したWordPressをhttps対応してみた](https://qiita.com/olaf_system/items/d80aa943107eb2cfcb20)」
の続き。

WordPressの準備は終わったので次はPVを確認するためにGoogleAnalyticsを導入していく。

# 設定
## Googleアカウント作成
まずはじめにGoogleアカウントを作成する。
作り方は割愛。

## GoogleAnalyticsの設定
次にGoogleAnalyticsを設定する。

https://analytics.google.com/analytics/web/provision/?authuser=3#/provision

こちらにアクセスからの「無料で設定」をポチッ。

アカウント名を入力して「次へ」。
<img width="1426" alt="スクリーンショット 2020-01-12 11.16.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563625/68b801d0-b8bb-e686-4512-843f80a7239a.png">

ウェブを選択して「次へ」。
<img width="1424" alt="スクリーンショット 2020-01-12 11.19.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563625/574120cc-9390-d36f-742d-7d819d308d99.png">

プロパティをそれぞれ入力して「作成」。
<img width="1430" alt="スクリーンショット 2020-01-12 11.20.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563625/fc0481e1-d42e-9e3f-8526-777613295010.png">

はい、終了。
「UA-」から始まるトラッキングIDが発行されるので一旦メモ。

## WordPressの設定
WordPressに便利なプラグインがあるらしいのでそれに頼る。
管理画面の「プラグイン」から「新規追加」。
「All in One SEO」
を検索して「いますぐインストール」からの「有効化」。
<img width="1437" alt="スクリーンショット 2020-01-12 11.28.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563625/80298973-41be-bdb1-4403-0979947d5fce.png">
「お使いのWordPressのバージョンと互換性がありません」・・・。
と、とりあえず有効化して見て様子みよか。

Googleアナリティクスに先ほどのIDを入力して「更新」。
<img width="1079" alt="スクリーンショット 2020-01-12 11.35.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563625/96167d23-4d6f-ae24-3454-2ea6392a10b2.png">

はい、完了！

最後にトップページに戻って「ページのソースを表示」でコードが入っていることを確認。
<img width="1420" alt="スクリーンショット 2020-01-12 11.38.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563625/faad7856-1a9d-c874-4ba4-d69078acd24f.png">

うん、問題なさそう。お疲れ様でした。
JavaScript Modules CommonJS, EM, ES2015

# CommonJS
Used in node.js

```mod.js
exports.foo = () => {}
```

```app.js
const mod = require("mod")
mod.foo()
```

# AMD (Asynchronous Module Definition)

```
define(['jquery'] , function ($) {
    return function () {};
});
```

# ES2015(ESCMA6)
```javascript:foo.js
export const a = {} // `equals exports.a = {}` of CommonJS
// or 
module.exports = {a: {}}
```

```app.js
import {a} from foo // `equals const a = require("foo").a` of CommonJS
// or
import * as foo from "foo"
const a = foo.a
```



# refs
1. https://addyosmani.com/writing-modular-js/
2. https://auth0.com/blog/javascript-module-systems-showdown/
3. https://requirejs.org/docs/whyamd.html
4. https://2ality.com/2014/09/es6-modules-final.html
ObjCClassで参照できるクラスを一覧に出す

SceneKit などのように ObjCClass を使って利用できる Objective-C や swift 用のクラスってどのようなものがあるのか知りたくて調べました。

```python:print_classlist.py

# Python3.6
# List the names of all loaded Objective-C classes.

import objc_util

count = objc_util.objc_getClassList(None, 0)
print( '%d classes found:' % count )

classes = (objc_util.c_void_p * count)()
count = objc_util.objc_getClassList(classes, count)

class_names = []
for cls in classes:
	class_names.append(objc_util.class_getName(cls))

class_names.sort()

for b_name in class_names:
	name = b_name.decode('utf-8')
	#if not 'SCN' in name:
	#	continue
	print(name)

print('finished.')
```

実行すると3万以上のクラス名が print されるので、適当に絞り込むとかするのが良いと思います。

## 参考サイト

* https://searchcode.com/codesearch/view/12260439/
VisualStudioのコントロールのプロパティのヒントを出す

VisualStudioのコントロールのプロパティのヒントが出なくなったので直した。
![2020-01-12_10h35_25.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43186/70800804-899c-96e5-73e8-f29f553f365b.jpeg)
１，デザイナを開き適当にコントロールを選択する
２，コントロールのプロパティの上で右クリック
３，「説明」にチェックを入れる
４，VisualStudioを再起動する ← 再起動しないと出てこないんでハマった
AutomationAnyware A2019 Community Editionのインストールでハマった話

RPAツールAuotmation Anywhere(AA)のCommunity版(無償)を自宅のWindows10Proにインストールしてロボット(AAではBotと呼びます)を実行できるようにできるまでの顛末記録です。

Community版と従来版(Enterprise v11)の違いはこちらの[記事](https://qiita.com/AAJapaneseBot/items/6fc51dc3c8c688768ef8)にまとまっています。感謝！

#Windows7では実行できないぞ！さっさとWin10に移行しよう
Windows7のEOLは2020年1月14日、A2019 Community版の発表は2019年3月4日、Win7に対応する理由がありませんね。Win7ではbotを実行させるためのAgentが動きません。Botの実行(Run)時に以下のようなエラーが表示されます。
![20200112.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560000/64638213-9ee2-f5e1-79b8-05f8466ff7a1.png)

#コンピューター名、ユーザ名はどうやら日本語対応してないぞ！
無事Win10に移行した頃で再実行したところ、今度は次のようなエラーが表示されました(SS取り忘れ)。どうやらユーザ名が日本語だと駄目なようです。

>Either your username or your password is incorrect

![20200112_0955.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560000/d5ef6f48-80ba-79e8-181c-947e8c325218.png)

こちらの方はコンピューター名の変更でうまく動いたようなので、そっちも日本語NGみたいですね。
![20200111_1005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560000/4c2af9d7-e490-e5c9-45d4-8b0542a0ef8e.png)
[ツイート](https://twitter.com/nakaamino/status/1211094918455709696?s=20)

###ちなみにもうすぐ(記事作成日2020/01/12)治るらしい。中の人に期待だ！
![コメント 2020-01-12 102207.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560000/aa363716-ea2f-462c-2e70-d3200c1c3631.png)

ようやく動いた。ここからが本番。
![コメント 2020-01-12 101224.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/560000/8254bc29-ac75-5494-ea08-9a699879128b.png)

私はロボット用のOSアカウントを新たに作成しましたが、ユーザー名の変更でも行けると思います。ユーザー名の変更でも無理って方はご連絡くださいませ。記事を修正いたします。
visualstudio インテリセンスの色の変更

VisualStudioの背景を暗い色にすると、インテリセンスで出てくるパラ－メータヒント内の文字が見にくい（と言うか見えない文字もある）。
あちこちうろついてやっと解決。

文字の前景色＝白、背景色＝青、文字サイズ＝１０に変更した結果。
![2020-01-12_10h03_53.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43186/35e254ed-0b6b-971b-57ca-690371999ba0.jpeg)

VisualStudio 2019 の「ツール」-「オプション」から行く。
「環境-フォントおよび色」を選択したら･･･
文字の前景色とサイズは「エディタのツールヒント」で設定する。
![2020-01-12_09h59_22.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43186/b8168755-97dc-f9b2-7463-0e9c1fb20b41.jpeg)

背景色は「環境」で設定する。
![2020-01-12_09h59_37.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43186/db8b2325-2ed9-366f-243b-d3dd83334880.jpeg)
How to Deep Freeze by JavaScript

# Code of Deep Freeze
```javascript
 function deepFreeze(o) {
    Object.freeze(o);

    var objIsFunction = typeof o === 'function';

    Object.getOwnPropertyNames(o).forEach(function (prop) {
      if (o.hasOwnProperty(prop)
        && o[prop] !== null
        && (typeof o[prop] === "object" || typeof o[prop] === "function")
        && (objIsFunction ? prop !== 'caller' && prop !== 'callee' && prop !== 'arguments' : true)
        && !Object.isFrozen(o[prop])) {
        deepFreeze(o[prop]);
      }
    });

    return o;
  };
```
Windows フォトビューアーで画像を表示

Windows10で画像ファイルをフォトビューワーで開く

コマンドプロンプトで実行
カレントディレクトリはどこでも。

ファイルタイプを表示
C:\>assoc .jpg
.jpg=jpegfile

フォトビューワーで開く設定
C:\>ftype jpegfile=rundll32.exe "%ProgramFiles%\Windows Photo Viewer\PhotoViewer.dll", ImageView_Fullscreen %1
【JavaScript】ブラウザのレンダリングの仕組みについて


## 経緯
仕事で、フロント側のパフォーマンスチューニングをすることになりました。
当たり前ですが、フロントエンドのパフォーマンスチューニングを行うためには、ブラウザのレンダリングの仕組みについて理解する必要があります。
今回は、ブラウザのレンダリングの仕組みについて調べたことをまとめてみました。

### 参考
#### 書籍
[Webフロントエンド ハイパフォーマンス チューニング](https://amzn.to/2FBhqOw)

#### 記事
[JavaScript 長く使える系の知識](https://qiita.com/yamadar/items/bfdfc58cec49bf2690e1)
[実際のところ「ブラウザを立ち上げてページが表示されるまで」には何が起きるのか](https://qiita.com/tsin1rou/items/d4c781a2f25e2b92fa5e#dom%E3%81%A8%E3%81%AF)
[[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう](https://www.yoheim.net/blog.php?q=20140703)
[Life of a Pixel](https://docs.google.com/presentation/d/1boPxbgNrTU0ddsc144rcXayGA_WF53k96imRH8Mp34Y/edit#slide=id.g60f92a5151_40_9)

## ブラウザのレンダリングの仕組み
大きく分けて、4つで構成されています。

1. Loading
3. Scripting
4. Rendering
5. Painting

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148392/50c9b12c-5c62-da16-0fdc-5ad90291c09c.png)


### Loading
リソースをダウンロードして、HTMLを解釈し、DOMの構造に落とし込んで行きます。
ここでいうリソースは、HTML、CSS、JS、画像ファイル(JPEGなど)のことを指しています。

細かく分解すると下記のような流れになります。

- Loading(リソースのダウンロード)
- Parse(リソースのパース)

#### Loading(リソースのダウンロード)
URLを元にリソースをダウンロードしてきます。
ダウンロードする際に使用する、ネットワークプロコトルに関しては、**TCP/IP**を使用します。

ダウンロードするまでの流れとしては下記のようなイメージです。

1. ホスト名の解決
2. HTTPによる取得
3. TCP接続確立
4. TLS接続確立
5. HTTPリクエストの送信とレスポンスの受け取り


#### Parse
HTMLを解釈して、DOMを構築します。
ブラウザはこの構築したDOMツリーを元に**レンダリング**を行なっていきます。
またここではCSSのDOMのようなツリーを構築します。(CSSOM)

>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148392/2012b7f3-36e3-dda7-f65a-81e6e9c8a4ed.png)
[レンダリング ツリーの構築、レイアウト、ペイント](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction)より引用

### Scripting
Javascriptの実行をここで行います。
具体的には、JSのコードをJSエンジンに引き渡して実行します。

### Rendering
Layout Treeを構築していきます。
処理は主に2つ実行されます。

- Calculate Style
- Layout

#### Calculate Style
DOM要素に対して、どのようなCSSが割り当てられるかを計算します。
簡単にいうと、**DOMとCSSOMをマッチングさせていると理解しています。**

**何を計算するのか**
マッチングの時に必要な処理の計算のことを指している。(具体的なことは掘ってません.....)
あと**レンダリングエンジンは、右から左に解釈していく。**

#### Layout
レイアウト情報の計算を行います。
レイアウト情報には、要素の大きさ、要素のマージン、パディング、要素の位置などが含まれます。

最終的にDOMとCSSOMをあわせたLayout Treeが出来上がります。
>![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148392/013c6a74-0490-5de7-b8d6-2aedf66036cb.png)
[レンダリング ツリーの構築、レイアウト、ペイント](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction)より引用


#### Painting
最後に描画に移行します。
具体的には、要素とスタイルをそれぞれのピクセルに落としこむ作業をしていきます。

- Paint
- Rasterize
- Composite Layers(レイヤーの合成)

下記が非常にわかりやすかったです。
[Life of a Pixel](https://docs.google.com/presentation/d/1boPxbgNrTU0ddsc144rcXayGA_WF53k96imRH8Mp34Y/edit#slide=id.g60f92a5151_40_9)
[[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう](https://www.yoheim.net/blog.php?q=20140703)
HTML 少数入力時に「有効な値を入力してください」と出たときの話

# 目次

- input要素などで数値入力を行う際に少数の入力で「有効な値を入力してください。」と出てしまったときに少数の入力を可能にする方法をまとめる。

# 結論

- input要素にて`step`を指定する。

# 書き方の例

- 問題箇所のinput要素を下記に記載する。

    ```html
    <input type="number" name="study_time">
    ```

- 小数点第一位までの入力に対応されたい場合は下記のように`step`を登録する。

    ```html
    <input type="number" step="0.1" name="study_time">
    ```

- 少数点第二位までの入力に対応させたい場合は下記のように`step`を登録する。

    ```html
    <input type="number" step="0.01" name="study_time">
    ```

- 100の位以下の入力を行わせたくない場合は下記のように`step`を登録する。

    ```html
    <input type="number" step="100" name="study_time">
    ```
Pythonでpandasを試す

#Pythonでpandasを試す

Pythonたいがい便利だが、pandasを使いこなすと便利さ倍増のような
ホワイトカラーの生産性相当向上できそう
CSVやExcelなどを、あたかもRDBのように扱える
もちろん。それだけじゃないんだろうけど
簡単な例を作ってみた


###利用データ
[Python3でcsv処理あれこれテスト](qiita.com/code2545Light/items/a4addf9ea849a3e95793)
と同じくテストデータは、上場企業一覧のCSVを
カブサポさんより配布されているものを入手し、利用する。
https://kabusapo.com/stock-data/stock-list/



###ソースコード

```pandas_sample.py

#pandas sample

import pandas as pd


#上場企業リストcsvを、pandasで読み込み

#cmp_sheet = pd.read_csv("stocklist.csv",encoding="utf-8-sig", dtype=str)  #キーを文字列にするにはこちら
cmp_sheet = pd.read_csv("stocklist.csv",encoding="utf-8-sig")
print(cmp_sheet)

#概要の確認
print('dataframeの行数・列数の確認==>\n', cmp_sheet.shape)
print('indexの確認==>\n', cmp_sheet.index)
print('columnの確認==>\n', cmp_sheet.columns)
print('dataframeの各列のデータ型を確認==>\n', cmp_sheet.dtypes)

#特定列の検索
cmp_dic = cmp_sheet[cmp_sheet['銘柄コード'] == 1431].to_dict(orient='list')
#orient='list'でdictに変換して、銘柄名を表示
print(str(cmp_dic['銘柄名'][0]))


#queryメソッドを使うと、複数条件の指定で、特定カラムだけ出力もできる
cmp_dic = cmp_sheet.query('銘柄コード > 9000 and 銘柄コード < 9005' ).to_dict(orient='list')
print(cmp_dic)
print(type(cmp_dic))

#文字列に対して、含む検索
cmp_dic = cmp_sheet[cmp_sheet['銘柄名'].str.contains("鉄道")].to_dict(orient='list')
print(cmp_dic)

#条件を変数に代入して検索
#この例では、銘柄コード(証券コード)で検索して、銘柄名を表示する。
sec_code = "7267"
cmp_dic = cmp_sheet.query('銘柄コード == @sec_code').to_dict(orient='list')
print(cmp_dic['銘柄名'][0])


```
Ubuntu18.04でのpipやそれ関連のインストール時のエラーの対処

pip3で例えばxxxをインストールしようとして

```
ipywidgets 6.0.0 requires widgetsnbextension~=2.0.0, which is not installed.
```
などのエラーが出たら

```
pip3 install --user --upgrade ipywidgets
```

で対処。

```
You are using pip version 10.0.0, however version 19.3.1 is available.
You should consider upgrading via the 'pip install --upgrade pip' command.
```
が実行結果の最終文などに出て邪魔してきたら

```
pip3 install --user --upgrade pip
```

で解決。エラーは出なくなった。
WSLでopenするeopenを検索に対応させました

以前に WSL から ファイルや URL 等を `open` できる [eopen-ecd](https://github.com/ko1nksm/eopen-ecd) というものを[作った](https://qiita.com/ko1nksm/items/ffbd5691eb92490e0509)のですが、何やらウェブ検索が流行ってる（？）ようなので `eopen` でも対応してみました。（追記 エクスプローラーでの検索にも対応させました。）

- [WSL から open でウェブサーフィン](https://qiita.com/aohmusi/items/3651a84a63551ae36ff1)
- [WSLにもそこそこ使えるopenが欲しい！](https://qiita.com/ahuglajbclajep/items/7e72acd689c7b302795a)
    - [dotfiles Advent Calendar 2019](https://qiita.com/advent-calendar/2019/dotfiles) でこのような記事があったんですね。今更気づきました。

ウェブ検索するときは `-S`, `--web-search` オプションを指定します。検索結果はWindows既定のブラウザで表示されます。（追記 エクスプローラー検索対応にともなオプションを変更しました。）

```console:WSL
$ eopen -S 検索キーワード
```

デフォルトでは Google（`https://www.google.com/search?q=%s`）で検索するようになっていますが、Windowsの環境変数 `EOPEN_SEARCH` で変更可能です。

- Bingで検索 ・・・ `https:////www.bing.com/search?q=%s`
- YAHOOで検索 ・・・ `https://search.yahoo.co.jp/search?p=%s`

**追記**

また、エクスプローラーでの検索にも対応しました。こちらは`-s`, `--search` オプションを指定します。

```console:WSL
$ eopen -s "*.txt" # カレントディレクトリで *.txt ファイルを検索
$ eopen -s "*.conf" /etc/ # /etc以下から *.conf ファイルを検索
$ eopen -s "*.conf" /etc/ "サイズ:>1KB"  # サイズ指定で検索
```

ちなみに内部的には指定された引数を以下のようなURIに変換してエクスプローラーで開いており、エクスプローラーの右上にある検索ボックスと同じような構文が使えるはずです。

```
explorer.exe "search-ms:query=*.conf&crumb=location:\\wsl$\Ubuntu-18.04\etc\&crumb=サイズ:>1KB"
```
ラズパイ用のSDカードのバックアップとSDカード選び（Mac）

![SS 192.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/a41cd967-f549-8677-1efa-2e99bf69518d.png) ラズパイ用のSDカードを選ぶときのコツに気づいたかも。

##やること
Raspberry Pi用のSDカードをバックアップしたり復元/リストアしたりします。
（ラズパイ付属の「SD Card Copier」がとても便利そうですが、手元のものはうまく動いてくれません。）

##注意
<font color="Red">**書き込み時のデバイス選択に失敗するとMac用の大切なハードディスクやストレージを失う可能性がありますので、作業は自己責任にてお願いします。**</font>

##環境

- Raspberry Pi ならなんでも
- SDカード（今回は32GBのもの）
- Mac
- 必要に応じてSDカードリーダー

##バックアップ方法
####まずバックアップしたいSDカードのデバイスの位置を特定します

```sh:
$ diskutil list
```
すると、/dev/disk数字 のリストが表示されます。
バックアップ対象のSDカードをMacのカードリーダーに入れた状態、抜いた状態のそれぞれで```$ diskutil list```を実行し、差分を確認することで目的のデバイス番号を確認できます。
SDカードを入れたときだけ現れるデバイス番号が目的のSDカードの場所となります。
/dev/disk数字 をメモします。

####ddコマンドでバックアップを実施します
```sh:
$ sudo dd if=/dev/disk数字 of=~/Desktop/＜バックアップ名＞.img
```
/dev/disk数字の数字は先ほど特定したSDカードの場所の数字にします。
＜バックアップ名＞は任意のもの。この例ではバックアップはデスクトップに作られるようにしていますが、詳しい方はパスをお好きなものに変更してください。

####バックアップの進捗確認
バックアップにはかなり時間がかかります。
Macの場合はctrl+tで動いているかどうかの確認ができます。

また、進捗を秒単位で表示させたい場合は、別のターミナルを開き
```$ while true; do sudo killall -INFO dd; sleep 2; done```
とします。
(参考URL https://kaworu.jpn.org/kaworu/2012-11-29-1.php)

終了するとデスクトップに＜バックアップ名＞.img というSDカードをまるごとコピーしたファイルができています。もちろんzipで圧縮して保存することも可能です。

##復元/リストア方法
<font color="Red">注意！特にこの項目は失敗するとお手持ちのMac等の大切なディスクを消去してしまう可能性があります。十分ご注意の上自己責任において実施してください。</font>

####まず復元ファイルを書き込みたいSDカードのデバイスの位置を特定します

```sh:
$ diskutil list
```
これを利用して書き込みたいSDのデバイスの位置を特定します。
####該当するSDカードをアンマウントします
```sh:
$ diskutil unmountDisk /dev/disk数字
```
####バックアップファイルの準備
さきほど作成したバックアップファイル＜バックアップ名＞.imgを準備します。
zipなどで圧縮されている場合は解答しておきます。

####SDカードへのバックアップファイルの書き込み（バックアップの復元）


```sh:
$ sudo dd if=/＜パス名＞/＜バックアップ名＞.img of=/dev/rdisk数字 bs=1m
```
of=の後半に出てくる「rdisk」は「disk」ではないので打ち間違いに注意してください。
また、ターミナルで```sudo dd if=```まで打ち込んだ後、デスクトップ上の```＜バックアップ名＞.img```のファイルアイコンをターミナル上にドラッグ＆ドロップすれば、そのファイルの絶対パスが自動的に入力されて便利です。
当然ながら、＜バックアップ名＞.imgのバックアップファイルよりも小さい容量のSDカードには書き込みができません。

この手順で作ったSDカードはラズパイに入れればそのまま使えます。

#SDカードを選ぶときのコツ
SDカードはメーカーなどによって使える容量が微妙に違っています。
```$ diskutil list```
とすると、*31.0 GB という感じでストレージサイズが表示されますが、この数字がSDカードによりまちまちです。

たとえば手元のものでは、
①Sandisk Ultra 32GB → 31.9 GB
②TOSHIBA EXCERIA 32GB → 31.0 GB
③Transecend 32GB → 30.04 GB
となりました。

オリジナルのSDカードとして②を使用しており、②から①と②には無事書き込みができましたが、③では書き込み自体は完了するものの起動ができませんでした。
ということは、**新たにラズパイ起動用のSDカードを作る場合、手持ちのカードの中で一番容量が小さいものを選んでおけば、そのバックアップの復元に使えるSDカードの選択肢が増えて便利**ということが言えるかと思います。

#windowsでは？
下記のエントリを参考に行うと、簡単でなおかつうまくいくようです。
https://qiita.com/henjiganai/items/fac178aef2a03ffe83fc
Draft.jsで独自のBlockをつくる

Draft.jsで独自のblock(独自コンポーネント)を作る方法です。

やり方は2種類あります。

CustomBlockを使う方法とAtomicBlockを使う方法です。

[公式](https://draftjs.org/docs/advanced-topics-block-components)では、後者のやり方が書かれていますが、数が少ないならそれでもよいのですが、数が増えてくると煩雑になるので前者のほうをおすすめします。

## CustomBlockを使う方法

画像を表示する独自blockを作る例で説明します。

### CustomBlockを定義
```javascript
    export default class ImageBlock extends Component {
      render() {
        return (
          <img
            src={this.props.blockProps.src}
          />
        );
      }
    }
```
props.blockPropsから下記blockRendererでセットしたプロパティを取得できます。

### Editorに独自のblockRendererを登録

```javascript
    <Editor
      ...
      blockRenderFn={this.blockRenderer}
    />
```

```javascript
    blockRenderer = block => {
        switch (block.type) {
        case 'IMAGE':
            const src = block.getData().get('src');
            return {
                component: ImageBlock,
                props: {
                    src: src,
                },
            };
```

### CustomBlockの使い方

```javascript

    const newEditorState = insertNewBlock(
      this.state.editorState,
      'IMAGE',
      {src: 'http://example.com'},
    );
    this.setState({
      editorState: newEditorState,
    });
```

## AtomicBlockを使う方法

こちらも同様に画像を表示する独自blockを作る例で説明します。

### 

```javascript

export default class CustomAtomicBlock extends Component {
    render() {
        let entityKey = this.props.block.getEntityAt(0);

        const entity = this.props.contentState.getEntity(entityKey);
        const {src} = entity.getData();
        const type = entity.getType();

        switch (type) {
            case 'image':
                return <img src={src} />;
```

### Editorに独自のblockRendererを登録

```javascript
    <Editor
      ...
      blockRenderFn={this.blockRenderer}
    />
```

```javascript
    blockRenderer = block => {
        switch (block.type) {
        case 'atomic':
            const src = block.getData().get('src');
            return {
                component: CustomAtomicBlock,
                props: {
                    src: src,
                },
            };
```

### AtomicBlockの挿入

```javascript
         const contentState = this.state.editorState.getCurrentContent();
         const contentStateWithEntity = contentState.createEntity(
             'image',
             'IMMUTABLE',
             {src: 'http://example.com'},
         );
         let newEditorState = EditorState.set(this.state.editorState, {
             currentContent: contentStateWithEntity,
         });
         const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
         newEditorState = AtomicBlockUtils.insertAtomicBlock(
             newEditorState,
             entityKey,
             ' ',
         );
```
HTML　JAVA　CSS

サーバー側→中アプリケーションを行えるするコンテンツ。

フロントエンド→見える部分。

JavaScriptを使用してCSSを動的に手直しする最も一般的なテクニックの1つは、スタイルプロパティを操作する事です。

（例）HTML、CSS、JavaScriptなど。

ソースコードを投稿し、ユーザー間で共有するためのjsdo.it」が6月18日に開放しました。


Webサービス産業のカヤックは、Web生産、HTML5、JavaScript、CSSの来るべき社会の生産言語です。

★私自分、楽しんでユーザーと一緒に創出した想いです。

約10年前、日本で組み立てされた検索Webページとして非常に人気のあるWebページでした。

（例）Webサーバー構築、DBサーバー構築、DNSサーバー構築など-HTMLは「フェイスパーツ」-CSSは「メイクアップ」-JavaScriptは「移し変え」PHPを使用するWebWebページPHPを採用、または説明します採用されたウェブサイト。

Yahooは、すぐにでもPHPを使用する有名なWebWebページです。

（例）Java、PHP、Ruby、C、C++、Perlなどのインフラストラクチャ→Webアプリケーションを実行するための環境構築など2014年のHTML5の公式勧告に従って、フロントエンドビジネスアプリケーションに影響を及ぼしました。<a href="https://pressurize-shirt.com/kaatushirt-muscle-meal/" >加圧シャツと食事</a>のサイトのような見える部分と見えない部分との違い。

HTMLとCSSでより多くの事が可能なようになり、生産コード自体はフィールドレベルで再検討しれています。
【mysql>の状態（=mysqlサーバーに接続されている状態）にする為の手順】【備忘録】

①Spotlight検索よりターミナルを起動

②$ cd（フォルダに移動）

③$ cd MyVagrant（仮想マシンをまとめたフォルダに移動）

④$ cd myCentOS（仮想マシンのフォルダに移動）

⑤$ vagrant up（仮想マシンが起動する）※30秒ほどかかる

⑥$ vagrant ssh（仮想マシンにログインする）※5秒ほどかかる

⑦［vagrant@localhost 〜]$ となっているのを確認（ログインできている証拠）

⑧Spotlight検索から、cyberduckを立ち上げる（ファイル転送ツールを立ち上げる）

⑨ブックマークを設定している為、出てきたもの（MyCentOS）をダブルクリック（仮想マシンにアクセスする）
※このブックマークの設定は、ローカル開発環境の構築［macOS編］#09 仮想マシンにアクセスしてみよう　でやります。

⑩/home/vagrantに移動できているかを確認する
※移動出来ていなければ、▲マークの左側のボタンを押して、→/home/vagrantを選択する

11.mysql_lessonsのフォルダをダブルクリック_
※既に作成済み

12.ターミナルに戻る

13.$ cd mysql_lessons（作成済みのmysql_lessonsのフォルダに、ターミナル上で移動する）

14.［vagrant@localhost mysql_lessons］$　となっているか確認する_

15.$ pwd（ターミナル上での現在の場所を確認する為に使う）

16./home/vagrant/mysql_lessons_
［vagrant@localhost mysql_lessons］$_　となっていることを確認する
（これは、cyberduckで作成済みのmysqlフォルダでの作業中ということ）

17.$ sudo service mysqld status
（管理者コマンドを使って、mysqlサーバーが動いているかどうか調べる）

18.〜を実行中と出ていればOK（これでmysqlサーバーに接続する準備が整う）
※ローカル開発環境下では、バックグラウンドで、既にmysqlサーバーが動いている状態。

19.$ mysql -u root（これでmysqlサーバーに接続される）

20.mysql>となっていることを確認する
※mysql>となっていれば、mysqlサーバーに接続されている状態。

※ターミナル上に、Sever version:5.6.46 MySQL〜と記載があれば、
MySQLの5.6を使う、という感じです。

補足１：control＋Lで画面をスッキリできる
（$ clearとした時と同じ状態。但し、今はコマンドプロンプトが、「ダラーマーク」ではなく、「>」の為、$ clearは使えない。）
https://bit.ly/2QBwBOk
の記事の補足１：プロンプトとはを参照。


作業


作業終了後、安全に修了する為の手順

①mysql>の状態であることを確認する

②mysql> quit;　もしくは　mysql> \q（これでサーバーの接続が終了する）

③Bye
［vagrant@localhost mysql_lessons］$　となるのを確認する_

④$ exit（これで仮想マシンからログアウトできて、mbpの操作に戻る）
※mbpはMacBook Proのこと。

⑤$ vagrant suspend（これで仮想マシンを停止できる）※5秒ほどかかる。

⑥$ exit（これでターミナルを終了できる）
※自分はここまでやるとターミナルを自動的に閉じる設定にしています。詳しくは、ローカル開発環境の構築の#11 学習をやめる手順を見ていこう の1:00〜辺りをご覧ください。


⑦cyberduckを×で消す

⑧終わり
EC2 拡張ネットワーキングとプレイスメントグループ

https://dev.classmethod.jp/cloud/aws/ec2-placement-group/
> プレイスメントグループは、単一のアベイラビリティーゾーン内のインスタンスを論理的にグループ化したものです。サポートされているインスタンスタイプとともにプレイスメントグループを使用すると、アプリケーションが低レイテンシーの 10 Gbps (ギガビット/秒) ネットワークに参加できるようになります。