OmniAICreator/Qiita-1.07M huggingface dataset:
AjaxはGoogleMapとかで使われている

## 概要
アプリ開発手法の一種であるAjaxについて簡単にまとめました。

と言っても、

**A**(Asynchronous)・・・非同期通信
**ja**・・・JavaScript
**x**・・・XML

このように分解した時に、つまりどういうこと？となるのはおそらく「**非同期通信**」ではないでしょうか。
それでこのタイトルをつけて簡単にまとめました。
<br>

## Ajaxとは
アプリ開発手法の一つで、**JavaScript**と**XML**を用いて**非同期通信**を実装する開発手法。

XMLはマークアップ言語の一種で、分かりやすく言うとHTMLのようなものです。
タグを使ってデータの構造を記述していくもので、プログラミング言語ではありません。

ちなみにデータ形式としてXMLを採用するメリットは、

- 可読性が高い
- 記述の順序に依存しない

などがあります。

```XML:XMLの例
<?xml version='1.0' encoding='utf-8'>
<root>
    <employee>
        <employ>
            <ID>111</ID>
            <Name>Mike</Name>
            <Country>USA</Country>         
        </employ>
        <employ>
            <ID>222</ID>
            <Name>Nancy</Name>
            <Country>Canada</Country>
        </employ>
    </employee>    
</root>
```
データ形式自体は他にも、CSVやJSONなどがよく使われるものとしてあります。
詳しい違いなどについては、こちらをどうぞ。

>引用：[【何が違う？】データ形式(CSV, XML, JSON)の特徴を知ろう](https://code-ship-blog.wemotion.co.jp/technology/%e3%80%90%e4%bd%95%e3%81%8c%e9%81%95%e3%81%86%ef%bc%9f%e3%80%91%e3%83%87%e3%83%bc%e3%82%bf%e5%bd%a2%e5%bc%8fcsv-xml-json%e3%81%ae%e7%89%b9%e5%be%b4%e3%82%92%e7%9f%a5%e3%82%8d%e3%81%86/)

<br>

## 画面もいちいち消えないしずっと操作を受け付けているから便利
非同期通信を使えば、**同期(画面の更新)することなく**サーバからデータの取得ができます。
身近なものだとGoogleMAPなど地図アプリに使われているのが分かりやすいです。

例えばGoogleMapで地図を縮小すると建物、道、地形のディティールがアバウトになって代わりに都道府県、市区町村とか大きなエリアの情報が読み込まれて出てくると思います。

反対に拡大すると、先ほどの都道府県、市区町村とかの大雑把な情報が消えて建物、道、地形、店名、ランドマークとかのディティールが読み込まれて細かく表示されると思います。

GoogleMapでなくてもマップアプリならだいたい一緒です。

その時に、普段Googleで何か検索してWEBサイトを見るときのように、**操作の受付・画面表示が中断(真っ白になる)して切り替わる**ことってないですよね。
非同期通信を実装すると**リアルタイムでデータを読み込む**ので、**画面表示してる状態で操作も受け付けている状態で更新**できます。

進むたびに操作を受け付けなく、画面が真っ白になって切り替わるナビがあったらとても使いづらすぎますね。

これが**非同期通信の特徴**でできることです。

逆に同期通信はWEBページを移動した時などに一瞬画面が白くなって切り替わるような通信方法で、その間は操作を受け付けません。
<br>

## まとめ
AjaxのA(asynchronous)、**非同期通信**にと**XML**について簡単にまとめました。

今後、次世代通信規格である「**５G**」が民間向けに商用利用されるようになると、通信量が多くかつスピードも求められる非同期通信の活用の幅はさらに広がるので今後もアプリ開発をしていきたい人にとってはおさえておきたいですね。
<br>

## 参考
この記事は「CodeShip」内での実際の質疑応答や指導・アドバイスの一部を基に作成しています。


- [【何が違う？】データ形式(CSV, XML, JSON)の特徴を知ろう](https://code-ship-blog.wemotion.co.jp/technology/%e3%80%90%e4%bd%95%e3%81%8c%e9%81%95%e3%81%86%ef%bc%9f%e3%80%91%e3%83%87%e3%83%bc%e3%82%bf%e5%bd%a2%e5%bc%8fcsv-xml-json%e3%81%ae%e7%89%b9%e5%be%b4%e3%82%92%e7%9f%a5%e3%82%8d%e3%81%86/)
JavaScript　覚えておくべき注意点！（４）　switch文について　例　エアコンスイッチ

# switch文を使うと、変数の値がどれと一致するかで複数に分岐する処理を書くことができます。
##switch文は if ~ else if文で書くことができますが、switch文の方がプログラムを読みやすくすることができます。

```javascript:switch.jp
switch (value) {
	case 100:
		変数が100の時に実行する処理
		break;
	default:
		どのケースにも該当しないときに実行する処理
}
```


例　運転が暖房の場合を書きます。
・case冷房をスキップします
・case暖房で等しいので、プログラムに進みます
・それ以降はブロックの外に出ます。

switch文を書くときは、breakは必ず必要です。

```javascript:switch-2.jp
var 運転切り替え = 暖房;
switch (運転切り替え) {
  case 冷房:
    温度を下げます;
    break;
  case 暖房:
    温度を上げます;
    break;
  case 送風;
    風を送ります;
    break;
  default:
    自動で判断します;
}
```
参照　[いちばんやさしいJavaScriptの教本](https://book.impress.co.jp/books/1116101117)
pycharmでpackageのソースコードを確認する

importのpackageを選択して
右クリック → Go To → Declaration
でソースコードを開いてくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/4a286cb3-75d7-cb39-221f-92edae20bc90.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/82849299-943f-ba94-4da0-356598f65392.png)

便利！
Node.jsのコンソールから入力サンプル


# はじめに

Node.jsにおいてコンソール（ターミナル）から値を入力するサンプルを掲載します。
例題として、基礎代謝量の計算例を示します。
1日の必要なカロリーを計算して、ダイエットにお役立てください。


# 前提
* OS : Windows7以上
* PoweShellのターミナルで実行
* VSCodeでコード編集
* node.js環境構築済み

# 基礎代謝量とは

>
生命を維持するために必要なエネルギー量を基礎代謝量（BMR）といいます。
ハリス・ベネディクト方程式(改良版)を使って基礎代謝量を計算します。
男性： 13.397×体重kg＋4.799×身長cm−5.677×年齢+88.362
女性： 9.247×体重kg＋3.098×身長cm−4.33×年齢+447.593
>

# bmr.js

```Javascript
/**
 * 基礎代謝量(BMR)計算
 * @param {int} sex           - 性別 男=0 女=1
 * @param {float} weight      - 体重
 * @param {float} hight       - 身長 
 * @param {int} age           - 年齢
 */
const bmr = (sex,weight,hight,age) => {
    if (sex == 0 ) {
        var kcal = 13.397 * weight + 4.799 * hight - 5.677 * age + 88.362;
    } else {
        var kcal = 9.247 * weight + 3.098 * hight - 4.33 * age + 447.593;
    }
    return kcal;
}

/**
 * コンソール出力メッセージ
 * @param {int} index         - メッセージインデックス
 */
const outmsg = (index) => {
    var msg = '';
    switch (index) {
        case 0:
            msg = "性別"
            break;
        case 1:
            msg = "体重 Kg"
            break;
        case 2:
            msg = "身長 cm"
            break;
        case 3:
            msg = "年齢"
            break;
        default:
            msg = "???"
            break;
    }
    return msg;
}

var count = 0;             // メッセージカウンター
var msg = '';              // メッセージ
var buf = [];              // 一時バッファ 

var standard_input = process.stdin;

standard_input.setEncoding('utf-8');

console.log("性別 男性:0 女性:1");

standard_input.on('data', function (data) {
    var msg = outmsg(count);
    console.log(msg + " = "+ data);
    buf.push(data);
    count++;
    if (count == 4 ) {
        console.log("基礎代謝量 Kcal = " + bmr(buf[0],buf[1],buf[2],buf[3]));
        process.exit();
    }
    var msg = outmsg(count);
    console.log(msg);
});
```

## 説明
* 関数 bmr 性別,体重,身長,年齢を引数として、基礎代謝量を返却します。
* 関数 outmsg インデックスを引数として、対応するメッセージを返却します。
* 標準入力はprocess.stdinでハンドルします。ハンドルはstamdard_inputで定義。
* 標準入力のonイベントで入力をトラップします。
* onイベントで入力した結果のdataをカウント順にバッファリングします。
* カウンタが4になったら、bmr関数へバッファリングした値を引数として呼びだします。
* bmr関数の返却値、つまり基礎代謝量を出力します。

## 実行方法

```Shell
node bmr.js
```
## 実行結果

```
性別 男性:0 女性:1
0
性別 = 0

体重 Kg
69
体重 Kg = 69

身長 cm
168
身長 cm = 168

年齢
36
年齢 = 36

基礎代謝量 Kcal = 1614.615
```

# まとめ

htmlの画面を作るまでもない、単純入力をコンソールから入力する場合、
process.stdinはonイベントでprocess.exitするまでコンソールからの入力を取得できます。
このやりかたをマスターすれば、色々応用できます。
ネットで検索すると、コンソール入力の色々な方法を見いだせます。
今回のやり方も参考にしてください。
AIZU ONLINE JUDGE 4データ構造

##3_A(スタック)

```c++
#include <bits/stdc++.h>
#define rep(i,n) for (int i=0; i<(n); i++)
using namespace std;
 
//topは最後の要素が格納されている場所を指す！
int top, S[1000];

//topを一つ増やし、S[top]にxを代入する！
void push(int x){
    S[++top]=x;
}

//S[top]の値を返し、topを一つ減らす
int pop(){
    top--;
    return S[top+1];
}

int main(){
    int a,b;
    top=0;
    char s[100];
    
    while(scanf("%s",s)!=EOF){
        if(s[0]=='+'){
            a=pop();
            b=pop();
            push(a+b);
        }else if(s[0]=='-'){
            b=pop();
            a=pop();
            push(a-b);
        }else if(s[0]=='*'){
            a=pop();
            b=pop();
            push(a*b);
        }else{
            push(atoi(s));//char型をint型に変換！
        }
    }
    
    printf("%d\n",pop());
    return 0;
}
```

##3_B(キュー)

```c++
#include <bits/stdc++.h>
#define rep(i,n) for (int i=0; i<(n); i++)
#define LEN 100005
using namespace std;
 
typedef struct pp{
    char name[100];
    int t;
}P;

P Q[LEN];
int head,tail,n;

void enqueue(P x){
    Q[tail]=x;
    tail=(tail+1)%LEN;
}

P dequeue(){
    P x=Q[head];
    head=(head+1)%LEN;
    return x;
}

int min(int a, int b){ return a<b ? a:b;}

int main(){
    int elaps=0,c;
    int i,q;
    P u;
    scanf("%d %d",&n,&q);
    
    for (int i=1; i<=n; i++){
        scanf("%s",Q[i].name);
        scanf("%d",&Q[i].t);
    }
    head =1; tail=n+1;
    
    while(head!=tail){
        u=dequeue();
        c=min(q,u.t);
        u.t-=c;
        elaps+=c;
        if(u.t>0) enqueue(u);
        else{
            printf("%s %d\n",u.name,elaps);
        }
    }
    
    return 0;
}
```
[ Android Studio ] ボタン押下による言語表示の切替（未完成）

ボタン押下による言語表示に挑戦してみた。

##ボタン作成
　前々回、前回と同様にボタンを作成。
　今回作るのは以下の2種。
　・「JAPANESE」（id：japaneseButton）日本語切替用のボタン
　・「English」 （id：englishButton） 英語切替用のボタン

##クリックイベント取得
　これも前回同様にラムダ式を用いて実装。
　
　ここでLocaleというクラスを用いる。
　このクラスは言語ごとに定数があり、どの定数を持っているかで表示言語を切り替えるというときに使える。
　例えば、以下のとおりである。

~~~
    Locale locale = Locale.JAPAN;
~~~
　
 JAPANという定数は、Localeクラスで以下のように定義されている。

~~~
    static public final Locale JAPAN = createConstant( lang: "ja", country: "JP" );
~~~

 "ja"はLocaleクラスのgetLanguageメソッドで取得できるので、その値で言語を識別するといった具合である。

##定数ごとの分岐
　localeからgetLanguage()により値を取り出す。その値ごとに処理を分ける。

~~~
    String lang = locale.getLanguage();
    switch(lang) {
    case "ja":
            //String型変数に日本語文字列を代入
        break;
    default:
        //String型変数に日本語以外の文字列を代入
        break;
    }
~~~

##TextViewの表示
　TextViewのsetTextにより言語別の文字列を入れて終了。

~~~
    text.setText(String型変数);
~~~

##実行
　結果、**うまくいかなかった**。
　以下が失敗したサンプルコードである。

~~~
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

import java.util.Locale;


public class MainActivity extends Activity {

    //言語設定用変数
    Locale locale;
    String str = "";
    //テキスト表示
    TextView text;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        languageInitialize();
    }

    /*
    日本語英語切替ボタンの実装
     */
    public void languageInitialize() {

        //クリックを取得するボタン
        Button japaneseButton = (Button) findViewById(R.id.japaneseButton);
        Button englishButton = (Button) findViewById(R.id.englishButton);

        // 定数取得
        japaneseButton.setOnClickListener((View v3) -> {
            locale = Locale.JAPAN;
        });
        englishButton.setOnClickListener((View v4) -> {
            locale = Locale.ENGLISH;
        });

        //定数ごとの分岐
        String lang = locale.getLanguage();
        switch (lang) {
        case "ja":
            str = "こんにちは";
            break;
        case "en":
            str = "Hello";
            break;
        }

        //表示
        text.setText(str);
    }
}

~~~

　実行するとエミュレータは起動するが、アプリがstopしているようだ。
　なにか設定に問題があるかもしれない。
　次回は今回の続きで、このエラーを修復したいと思う。

　以上。
AnsibleのVMwareモジュールで必要となる権限

管理者以外のユーザーから、Ansibleのvmware_guestモジュールを実行した際に、
権限のエラーで仮想マシンのクローンが出来ず・・(´・ω・｀)

一応 [公式ドキュメント](https://docs.ansible.com/ansible/latest/modules/vmware_guest_module.html) には以下を設定してくださいとの記載があります。
> DataStore > Allocate Space
Virtual Machine > Configuration > Add New Disk
Virtual Machine > Configuration > Add or Remove Device
Virtual Machine > Inventory > Create New
Network > Assign Network
Resource > Assign Virtual Machine to Resource Pool

ただし、以下記載もあるように、クローンには追加の特権が必要になるようです。
> Module may require additional privileges as well, which may be required for gathering facts - e.g. ESXi configurations.

そこで、今回はどのロールが無いとエラーが出てしまうのかについて調べました。
(意外とこの辺りの情報ってどこも載ってないんですよね。。)

※注: Ansibleのバージョンによっては違うこともあります。(調査時のバージョンは2.7)

#ロールの割り当て先
作成したロールは以下に割り当てました。

- クラスタ　
　仮想マシン配置先のクラスタ

- フォルダ
　テンプレートのフォルダ、仮想マシン配置先のフォルダ

- データストア
　接続するデータストア

- ネットワーク
　接続するネットワーク

※子へ伝達のチェックは外す

#設定した権限
以下がクローンする上で必要となった権限です。
どれを外してもエラーが発生しました。

- 仮想マシンをクローンする　
[仮想マシン].[プロビジョニング].[仮想マシンのクローン作成]

- データセンターまたは仮想マシンフォルダを既存のものから作成する　
[仮想マシン].[インベントリ].[既存のものから作成]

- データセンターまたは仮想マシンフォルダの構成に新規ディスクを追加する　
[仮想マシン].[構成].[新規ディスクの追加]

- ターゲットホスト、クラスタ、またはリソースプールに仮想マシンを割り当てる　
[リソース].[仮想マシンのリソースプールの割り当て]

- 宛先データストアまたはデータストアフォルダの領域の割り当て　
[データストア].[領域の割り当て]

- 仮想マシンにネットワークを割り当てる　
[ネットワーク].[ネットワークの割り当て]

- 仮想マシンを移動せずに仮想マシンのゲストOSをカスタマイズする　
[仮想マシン].[プロビジョニング].[カスタマイズ]

- ゲストOSのカスタマイズ仕様を読み取れるようにする　
[仮想マシン].[プロビジョニング].[カスタマイズ仕様の読み取り]

- 仮想CPU数の変更　
[仮想マシン].[構成].[CPUカウントの変更]

- 仮想デバイス設定の変更　
[仮想マシン].[構成].[デバイス設定の変更]

- 仮想マシンのメモリ量の設定　
[仮想マシン].[構成].[メモリ]

#その他の権限
他のvmwareモジュールでも、同様に追加の特権が必要になったので記載しておきます。

## vmware_guest_powerstate
以下の権限がないと、パワーオンオフが出来ません。

- 仮想マシンをパワーオフします　
[仮想マシン].[相互作用].[パワーオフ]

- 仮想マシンをパワーオンします　
[仮想マシン].[相互作用].[パワーオン]

## vmware_vm_shell
コマンドを実行する際に必要となります。

- 仮想マシンのゲストOSでプロセスを実行  
[仮想マシン].[ゲスト操作].[ゲスト操作のプログラム実行]

使用するvmwareモジュールに合わせて、適切な権限を実行ユーザーに与えることが重要となりそうですね。
以上、ご参考程度に。

参考：
[仮想マシンのプロビジョニングの権限](https://docs.vmware.com/jp/VMware-vSphere/6.5/com.vmware.vsphere.security.doc/GUID-31C6CD2D-41CA-4646-994A-C61AD5FF1880.html)
[仮想マシンのクローン作成](https://docs.vmware.com/jp/VMware-vSphere/6.5/com.vmware.vsphere.vm_admin.doc/GUID-C805A4AA-DCEC-453F-94FD-D2A98950AA36.html)
[一般的なタスクに必要な権限](https://docs.vmware.com/jp/VMware-vSphere/6.5/com.vmware.vsphere.vm_admin.doc/GUID-4D0F8E63-2961-4B71-B365-BBFA24673FDB.html)
ダブルクォートの中でシングルクォートで囲った変数を展開させたい

### Question
表題が何を言っているんだお前は状態ですが、↓みたいなことがしたい。

```bash

username=myname
echo "Hello, '${username}'"     // Hello, 'myname'
```

shellscriptで書いてるとDB接続時等に変数をクエリに渡したい＆stringカラムなのでクォートで囲む必要がある…という時がたまに発生します。
クエリ自体はダブルクォートで囲み、その中で変数部分をシングルクォートで囲って展開させたい。
すぐ忘れるのでメモ

### Answer

一度ダブルクォートを終了させ（`"`）、ダブルクォーテーションで囲ったシングルクォートを挿入し（`"'"`）、再びダブルクォートで開始（`"`）

```bash

username=myname
echo "Hello, ""'""${username}""'"""     // Hello, 'myname'
```

DBアクセスに使う時はこんな感じ

```bash

echo $log_start_at  // 2019-04-01 00:00:00
echo $log_end_at    // 2019-04-01 23:59:59
mysql -h hogehoge.co.jp -u username -p -e "SELECT * FROM history WHERE log_start_at = ""'""${log_start_at}""'"" && ""'""${log_start_at}""'"" = log_end_at;"
// mysql -h hogehoge.co.jp -u username -p -e "SELECT * FROM history WHERE log_start_at = '2019-04-01 00:00:00' && log_end_at = '2019-04-01 23:59:59';"
```

### Thanks
[ShellScriptのダブルクォートとシングルクォートの違い](https://qiita.com/cocodrips/items/bb3640a9834c8978d48a)
docker-compose up -d を実行したらport is already allocatedのエラーが表示されたときの対処法　

## 状況
`docker-compose up -d`を実行すると以下のエラーが発生。
どうやら3306は既に割り当てているものがあるらしい。

```
ERROR: for hogehoge_database_1  Cannot start service database: driver failed programming external connectivity on endpoint qiita_clone_database_1 (36532cbe7d470eac9dce4a34198da5ebc15cd86aae371e98c9fb2d0272b6eeb9): Bind for 0.0.0.0:3306 failed: port is already allocated
```

## 対処法


 `sudo lsof -i:ポート番号`で指定したポートを使用しているプロセスを確認することができる。
`sudo lsof -i:3306`で以下のログが表示される。

```
COMMAND    PID  USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
com.docke 1372 khiro   15u  IPv6 0x68b93b7c3d446421      0t0  TCP *:mysql (LISTEN)
```
COMMANDの下にあるcom.dockeが実行しているプロセス名。
PIDの1372がプロセス番号を指す。

`sudo kill プロセス番号`で指定したプロセス番号を削除できるので,今回は`sudo kill 1372 `を実行。

その後、再度`docker-compose up -d `を実行して以下のような表示がでれば完了。

```
Creating hogehoge_database_1 ... done
```
Voyagerインストールでつまづいた件

Laravelに、管理画面パッケージである「Voyager」を導入する際のつまづき解消法をかく。

#公式ダウンロード方法
https://voyager-docs.devdojo.com/getting-started/installation

##遭遇したエラーはこちら
<img width="1248" alt="スクリーンショット 2019-10-08 14.46.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223280/c7cba3d9-5808-31cb-5c5b-45beba74e49f.png">

「Voyagerのcontrollerがありません」と言われている。

##分析
Voyagerのcontrollerはデフォルトでは外部のを使っている？(自分のファイル内にない)ので、
自分のファイル内にVoyagerのcontrollerを支配下におく設定をすれば良いと仮説を立てググってみた。

##解決方法
```:config/voyager.php
    'controllers' => [
　　　　　//コメントアウト or 削除
        //'namespace' => 'TCG\\Voyager\\Http\\Controllers',

　　　　　//コントローラーの配置先を自分のファイルに変える
        'namespace' => 'App\\Http\\Controllers\\Voyager', 
    ],
```

```:ターミナル
$ php artisan voyager:controllers
Published Voyager controllers! //これが出力されればOK
```

ターミナルでphp artisan voyager:controllersがうまくいかなかった場合、

```:ターミナル
$ php artisan voyager:controllers
```
上記のコマンドで作成することもできる。

/adminにアクセスし、以下のような画面へ遷移できたらOK!

<img width="1440" alt="スクリーンショット 2019-10-08 15.00.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223280/0553e654-a864-293a-5dd3-43652141f08f.png">
<img width="1439" alt="スクリーンショット 2019-10-08 15.04.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223280/8fc2a16c-fbcd-72f0-b27c-6f95db4e6077.png">
VScodeでRailsをデバッグする

## 経緯
- VScodeでRailsアプリケーションをdebugしたくなった
- 便利だから（たぶん）
- ちなみに僕のVScodeは日本語になっているのでよしなに解釈してください

## 設定
### プラグインのインストール
- ということでVScodeでRubyをインストールしましょう
<img width="679" alt="スクリーンショット 2019-10-08 9.51.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50208/82a6604a-654c-d87f-5bf6-0f3e768f931f.png">

### gemのインストール
- 次は必要になるgemをインストールします

```bash
$ gem install ruby-debug-ide
$ gem install debase
```

### 構成の追加
- ポチッと`構成の追加`をクリックします

<img width="317" alt="スクリーンショット 2019-10-08 9.55.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50208/9e2add23-b430-f105-d53c-72a8430cdc91.png">

- Rubyを選択（あるはず）
- `launch.json`が作成されるはずなので中身をこんな感じにします

``` .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Rails",
      "type": "Ruby",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "program": "${workspaceRoot}/bin/rails",
      "pathToRDebugIDE": "/home/trantan/.rbenv/versions/2.5.1/bin/rdebug-ide",
      "args": [
        "server"
      ]
    }
  ]
}
```

#### matches multiple schemas when only one must validate
実はちょこっとエラーが出てました。
`matches multiple schemas when only one must validate` が発生するのですが、VScodeを再起動をすると消えました。なんだったんだろう。

### 実行
- あとは実行するだけです
- 左側のサイドバーに`Debug Rails`があると思うのでそれをポチっとしましょう

<img width="143" alt="スクリーンショット 2019-10-08 14.30.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50208/9f66bebf-0f00-dd0e-b470-f5dcf2f2785e.png">

- そうすると、Railsサーバーが立ち上がりデバッグコンソールにババーッと何かが表示されると思います

<img width="480" alt="スクリーンショット 2019-10-08 14.45.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50208/a71e465f-88f5-8f56-098f-3748240f4946.png">

### ブレークポイントを貼る
- もちろん実行するだけでは分からないのでブレークポイントを貼って処理を止めます
- ババーッと処理している何かしらのファイルに貼りましょう
- コントローラー辺りにしますか
- 数字の左脇辺りをポチッと押すとそこで処理が止まってくれます

<img width="48" alt="スクリーンショット 2019-10-08 14.48.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50208/49ca0b64-5fb3-2efa-e7d1-b96860a2c964.png">

### あとはサイドバーをみる
- どんな値を持っているかとかスタックがどうなっているのかが左サイドバーに出ます（設定がデフォルトなら）
- どこにブレークポイントを貼ったのかも分かります
- 他にも何かあると思いますが割愛しますm(_ _)m


## 結論
- 意外と簡単に設定できるのでぜひデバッグをやってみてください
- 便利！！！！

## 参考
- https://code.visualstudio.com/docs/editor/debugging#_launch-configurations
- https://github.com/rubyide/vscode-ruby/wiki/2.-Launching-from-VS-Code
Vue.js <lazy-component><コンポーネントのイベントが発火しない/></lazy-component>

# コンポーネントを遅延読み込みしたい
SSRのNuxtで遅延読み込みを実行してくれるライブラリであるVue-Lazyloadをコンポーネントモードで使っていて、つまりました。

```vue:main.vue
<div v-for="image of images" :key="image.index">
    <image-thumbnails @showModal="modalOn"/>
</div>
```
`image-thumbnails`コンポーネントは画像のサムネイルを表示するコンポーネントで、サムネイルがクリックされると`showModal`イベントを発火します。
メインコンポーネントは`showModal`イベントを検知すると、モーダルで画像を表示します。

サムネイルが多くなりそうなので、遅延読み込みしてほしいと思い、以下のように記述しました。

```vue:main.vue
<div v-for="image of images" :key="image.index">
    <no-ssr>
        <lazy-component>
            <image-thumbnails @showModal="modalOn"/>
        </lazy-component>
    </no-ssr>
</div>
```
なんということでしょう。
メインコンポーネントが`image-thumbnails`コンポーネントの`showModal`イベントを検知できなくなりました。
多分、遅延読み込みのせいでイベント監視をバインドできなかったんでしょう。

# 内側に遅延処理を書く
次のように書いて解決しました。

```vue:main.vue
<div v-for="image of images" :key="image.index">
    <image-thumbnails @showModal="modalOn"/>
</div>
```

```vue:imageThumbnails.vue
<template>
    <no-ssr>
        <lazy-component>
            ....
        </lazy-component>
    </no-ssr>
</template>
```
遅延読み込みしたいコンポーネント内のルートに`lazy-component`を記述すると、遅延読み込みされるし、イベント処理もうまくいきました。
自分のためにまとめるGoの基礎

# 変数宣言

```golang
// 宣言は :=
a := 1
// 再代入は =
a = 2
```

```golang:複数の変数バージョン
// 宣言は :=
s,t := 10, 20 
// 再代入は =
s,t = 11, 21
// 複数の変数の内、1つでも初期化があるばあいは :=
t,r := 22, 30
```

# array

```golang:要素数固定のいつもの配列
a := [3]int{} // [0 0 0]
b := [3]int{1} // [1 0 0]
c := [3]int{1, 2, 3} // [1 2 3]
d := [2]int{1, 2, 3} // array index 2 out of bounds [0:2]

// 要素数を自動で数えてくれる書き方。スライスではない。
e := [...]string{1, 2, 3} // [1 2 3]
```

```golang:arrayを引数に使うときは要素数も一致させなきゃダメ
func main(){
    a := [1]string{"a"}
    echo_(slice|array1|array2)(a)//各メソッドを呼び出してみる
}

func echo_slice(strs []string) {
    fmt.Println(strs)
}
// cannot use a (type [1]string) as type []string in argument to echo_slice

func echo_array1(strs [1]string) {
    fmt.Println(strs)
}
// [a]

func echo_array2(strs [2]string) {
    fmt.Println(strs)
}
// cannot use a (type [1]string) as type [2]string in argument to echo_array2
```

# slice
```golang
a := []int{} // []
b := []int{1, 2, 3} // [1 2 3]

// 初期状態で要素を持たせたい場合はmakeを使う
c := make([]string, 2) // [0 0] 
// 第3引数はcapacity
d := make([]string, 2, 5) // [0 0] 
```

```golang:要素の追加とcapacityの増加
a := []int{}
fmt.Println(len(a), cap(a), a)

for _, i := range [10]int{} {
    a = append(a, i)
    fmt.Println(len(a), cap(a),  a)
}
// --------------
0 0 []
1 1 [0]
2 2 [0 0]
3 4 [0 0 0]
4 4 [0 0 0 0]
5 8 [0 0 0 0 0]
6 8 [0 0 0 0 0 0]
7 8 [0 0 0 0 0 0 0]
8 8 [0 0 0 0 0 0 0 0]
9 16 [0 0 0 0 0 0 0 0 0]
10 16 [0 0 0 0 0 0 0 0 0 0]
```

```golang:要素の追加とcapacityの増加_makeの場合
a := make([]int,1,3)
fmt.Println(len(a), cap(a), a)

for _, i := range [10]int{} {
    a = append(a, i)
    fmt.Println(len(a), cap(a),  a)
}
//---------
0 3 []
1 3 [0]
2 3 [0 0]
3 3 [0 0 0]
4 6 [0 0 0 0]
5 6 [0 0 0 0 0]
6 6 [0 0 0 0 0 0]
7 12 [0 0 0 0 0 0 0]
8 12 [0 0 0 0 0 0 0 0]
9 12 [0 0 0 0 0 0 0 0 0]
10 12 [0 0 0 0 0 0 0 0 0 0]
```

# if文
```golang:丸カッコがいらない
if a == 1 {
  println(1)
} else if a == 2 {
  println(2)
} else {
  println("else")
}
```

# for文
```golang:配列のfor
for index, value in range list {
  println(index, value)
}

// indexいらない場合
for _, value in range list {
  println(value)
}

```
確率統計2回目

##条件つき確率
事象A（条件となる事象）が起こった上で、事象Bが起きる確率は、式で書くと
**P(B|A)**と表し、その確率は、**P(B|A)=P(A∧B) / P(A)**
によって定義されます。

##広義積分
**確率を記述する為に積分が要る！**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475270/0bdc3485-4871-caa8-9ec2-a1bbe8282889.png)
develop.simonsnote.com/entry/improper_integral
EGitが使いやすすぎた

##EGit
EclipseからGitを使うやつです

これが地味に楽で便利なんですわ

##できること一覧

eclipseでgitのパースペクティブを開きましょう

できること一覧
<ul>
<li>リポジトリをクローン
<li>クローンしたプロジェクトをプロジェクトエクスプローラから編集していく
<li>ローカルでブランチを作成
<li>ステージング
<li>ブランチのヒストリーを見る
<li>コミット及びプッシュ
<li>ヒストリーからコミットを複数選択してスカッシュ
<li>リベース
<li>強制プッシュ(変更の強制)
<li>差分を確認
<li>競合解消
</ul>

...全部じゃん

別でTortoiseGitとかGitBashとか使わんでも困らんくらいいろいろできますね

しかもGUIなんで見やすい。

GitBashに慣れてる自分的には快適です！

[前に書いたGitBash基本コマンド一覧](https://qiita.com/RO018/items/2c102412a1630285b65c)

Gitについて地味に不安を抱えている人が多い雰囲気を感じたら、こういったできること一覧だけでなく
それぞれの操作がどういう意味なのか
なにができるのか
いつ使えばいいのか
どういう利点と欠点があるのか

とかまとめてみたいなって思ってます！

今回はEGitスゲー回でした
Procの実行方法いろいろ

Procに引数を渡して処理を実行する方法はいくつかあります。
以下は全て同じ結果を返します。

```ruby

proc = Proc.new do |a|
  puts "This is proc: #{a}"
end

# オーソドックスな記法
proc.call(1)

# callを省いたシンタックスシュガーな記法
proc.(2)

# 添字で引数を指定して呼び出す記法
proc[3]

# ===で引数を指定して呼び出す記法
# ===が実装されていることでwhen句に手続きを渡せるようになっている
proc === 4
```

出力結果

```bash

This is proc: 1
This is proc: 2
This is proc: 3
This is proc: 4
```
CRLFがまざっちゃった時あれこれ

Winユーザがまざっちゃったのか
使ってたエディタがお茶目しちゃったのか。

なぜかCRLFが混ざってしまうことは、現場あるあるだと思います。

そんなときの対処法あれこれ。


# まずは現状調査

###CRLFがあるファイルを探す

`find . -type f | xargs ggrep -lzUP '\r\n'`

ぼくのmacのgrepはzオプションなかったのでggrepを使っている。

###CotEditorで確認する
GUIエディタで、改行コードやエンコードが分かりやすいテキストエディタに
CotEditorがある。

ぼくのように改行コードでやらかす
ザコザコエンジニアはいれておいて損は無いです。



###一個一個Vimで開いて確認する場合

もちろんVimでも確認できます

開いたあと、
`:se ff?`でファイルフォーマット確認できる。

`fileformat=unix`かmacで、行末に`^M`がなければOK。
`fileformat=dos`ってでたら、そのファイル、CRLFで改行してる。


# LFに直す

###一個一個Vimで開いて直す場合


`:e ++ff=unix`
でUNIXモードで開き直す

`:e ++ff=dos`
でDOSモードで開き直す

UNIXモードで開くと見える`^M`（CRの意味）を以下のように
全部消してしまえばOK

`:%s/\r//g`

# 複数ファイルを一括で、CRLF→LFにしたい

例えばshファイルだけ変更したい時。

`find . -name \*.sh -type f | xargs -n 10 nkf -Lu --overwrite`


###nkfがなかったら
Macならbrewでインストールできる

`brew install nkf`



# 再発防止

すぐ気づくのが大事。
今回もコミットしちゃったからめんどくさくなったわけで。

チームの人にWinの人がいないなら、
改行はLF固定にした方が無難なはず。

```:vimrc
" 常にunixモードで開く
set fileformats=unix
```

こうしておけば、自分はCRLFで保存することはないし、
CRLFのファイルは`^M`が表示されるので
すぐ気がつくことができる。


dosモードが必要なときは
他のエディタでやってもいいし、
開き直し(`:e ++ff=dos`)してから編集してもいい。


### ついでにVimで改行を可視化しておく

```:vimrc
" 改行を可視化
set list                                                     
set listchars=eol:↲
```

最近のエディタならよくある
「CRLFならこの↲記号、LFならこの↓記号」
みたいな、表示方法ができないっぽい？
JavaScript　覚えておくべき注意点！（３）　複数の条件を組み合わせた条件式の書き方　例　ピザ屋　&&　||　!

### if文やelse if文を組み合わせればたいていの条件を書くことができます。ただし、複数の条件をすべて満たす場合や、どれか1つでも満たす場合に何かをさせたい場合は、if文を組み合わせるよりも論理演算子を使った方がシンプルです。

論理演算子「**&&　||　!**」を使う

```javascript:and_or.js
<!-- 両方とも真のときだけ真になる: &&なしで書いた場合 -->
if (ピザを注文) {
	if (コーラを注文) {
		50円割引
	}
}

// 両方とも真のときだけ真になる: &&で書いた場合 : AND　&&
if (ピザを注文 && コーラを注文) {
	50円割引　　//……セット割引
}

// どちらか真なら真になる : OR　||
if (ピザを注文 || コーラを注文) {
	50円割引　　//……どちらも割引
}

// 条件の否定 : NOT　!
if (!ピザを注文) {
	送料300円　　//……ピザを注文していない場合
}
```
### お腹の空き具合に応じて注文を変更する

```javascript:app-1.js
var budget = prompt('所持金を数字で入力してください');
budget = parseFloat(budget);

var isHungry = confirm('お腹は空いていますか？'); /* 空腹か確認
confirmは確認ボタンの意　[OK]が「true」、[キャンセル]が「false」。*/
if (budget >= 1500 && isHungry) {
  alert('ピザを注文しました');// 「&& isHungry」を追加
} else if (budget >= 500) {
  alert('ポテトを注文しました');
} else {
  alert('節約、節約...');
}
```
※　参照　[いちばんやさしいJavaScriptの教本](https://book.impress.co.jp/books/1116101117)
This application’s application-identifier entitlement does not match that of the installed application. These values must match for an upgrade to be allowed

![スクリーンショット 2019-10-08 13.34.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/101462/db1a2026-6268-205b-ccb1-64b316f21e51.png)
下記エラーの対応
This application’s application-identifier entitlement does not match that of the installed application. These values must match for an upgrade to be allowed
１、window → devicesのタブからデバイス情報を開く
２、左のタブから実機を選択する
３、右のリストのInstalled Apps から問題のアプリを(-)にて選択削除
４、再度インストール
初学者が最初にやったJava(while文)基本問題

最初にやったJavaのwhile文問題のアウトプット

#問1 

サイコロを2個ふるよぞろ目が何回目にでるかな？ 
 
###[実行例]

1回目(2,3) 2回目(3,2) 3回目(4,4) 3回目にぞろ目がでました！

<details><summary>[解答例]</summary><div>

```java
import java.util.*;
public class Main{
    public static void main(String[] args){
        Random rand=new Random();
        int count=0;
        while(true){
            count++;
            int dice1=rand.nextInt(6)+1;
            int dice2=rand.nextInt(6)+1;
            System.out.printf("%d回目(%d,%d)%n",count,dice1,dice2);
            if(dice1 == dice2){
                break;
            }
        }
        System.out.println(count+"回目にぞろ目がでました！");
    }
}

```
</div>
</details>

#問2

以下の処理を実現せよ。 

###[実行例]

9 
8 
7 
6 
5
4 
3
2
1
発射！

<details><summary>[解答例]</summary><div>

```java
import java.util.*;
public class Main{
    public static void main(String[] args){
        int n=9;
        while(n>0){
            System.out.println(n);
            n--;
        }
        System.out.println("発射!");
    }
}

```

</div>
</details>


#問3

1～999までの乱数を繰り返し生成し777が最初に出るまでの回数を表示せよ。  

###[実行例]
  1:34 2:432 3:321 ..... 1034:777 1034回目に777がでました！

<details><summary>[解答例]</summary><div>

```java

import java.util.*;
public class Main{
    public static void main(String[] args){
        Random rand=new Random();
        int num=-1;
        int count=0;
        while(num !=777){
            count++;
            num=rand.nextInt(999)+1;
            System.out.printf("%d:%d%n",count,num);
        }
        System.out.println(count+"回目に777がでました！");
    }
}
```

</div>
</details>

#問4

[実行結果]
正の整数>20
1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz
16
17
Fizz
19
Buzz

<details><summary>[解答例]</summary><div>

```java

import java.util.*;
public class Main{
public static void main(String[] args){
        Scanner sc=new Scanner(System.in);
        System.out.print("正の整数>");
        int max=sc.nextInt();
        int i=1;
        String ans;
        while(i<=max){
            if(i %3 == 0 && i % 5== 0){
                ans="FizzBuzz";
            }else if(i % 3==0){
                ans="Fizz";
            }else if(i % 5==0){
                ans="Buzz";
            }else{
                ans=i+"";
            }
            System.out.println(ans);
            i++;
        }
    }
}


```



って認識です。
webプログラミング演習ノート ３回目(3限)

#webプログラミング演習　2019/10/8
##復習から
/lesson3/form.phpにアクセスして formをつくり数字をいれて結果をresult.phpに出力する。/

- ３の倍数の場合 **Foo**
- 5の倍数の場合 **Bar**
- 15の倍数の場合**FooBar**

と出力する。

わからない人は **モジュル演算 php**とかで調べるといいよと言われました。

やり方がわからなかったのでリサーチして参考にしたのは何故かJSの記事草　[**ここ**](https://rfs.jp/sb/javascript/js-lab/%E5%80%8D%E6%95%B0%E6%AF%8E%E3%81%AB%E7%89%B9%E5%88%A5%E3%81%AA%E5%87%A6%E7%90%86%E3%82%92%E3%81%97%E3%81%9F%E3%81%84%E3%81%A8%E3%81%8D%E3%81%AE%E5%AF%BE%E5%87%A6%E6%B3%95.html)

result.phpにはこんな感じで書きました。

```php:result.php
<?
$val = ['value']

    if( $val % 3 == 0 ){
        echo "Foo<br />";
    }
    if( $val % 5 == 0 ){
        echo "Bar<br />";
    }
    if( $val % 15 == 0 ){
        echo "FooBar<br />";
    }
?>  
```

こっちはform.php↓

```html:form.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>webプログラミングむずいよ</title>
</head>
<body>
<form action="/lesson3/result.php" method="POST">
<input type="text" name="value1" value="0" />
    <button value='foobar'>ボタン</button>
</form>
    
</body>
</html>
```

##絶対違うけどこれで動いてしまった、そして先生の模範解答は・・・

まずはform.phpの方から

```php:form.php

<!DOCTYPE html>
<html><body>
<form action="/lesson3/result.php" method="POST"></form>
<input type="text" name="number">
<button>ボタン</button>    
</body>
</html>
```
そしてこっちがresult.php

```php:result.php
<?
$num = $_POST['number'];
$msg = '';
if($num %3 == 0){
    $msg = 'Foo';
}
if($num %5 == 0){
    $msg = 'Bar';
}
if($num %15 == 0){
    $msg = 'FooBar';
}
?>
```

いきなり「はい、15分でやってくださーい」と言われて焦ったけどもなんとかそれっぽくできた！
**まだ舞える**
Excel VBA入門 #06 Withで命令をまとめてみよう

`Sub WithTest()
    Range("A1").Value = "hello"
    Range("A1").Font.Bold = True
    Range("A1").Font.Size = 16
    Range("A1").Interior.Color = vbRed
End Sub`

上記のコードの用にRange("A1")が何回も続き同じ要素を指定する際はWith～End Withで纏める事が出来ます。

`Sub WithTest2()
    With Range("A1")
        .Value = "hello"
        With .Font
            .Bold = True
            .Size = 16
        End With
        .Interior.Color = vbRed
    End With
End Sub`

上記のWithTest2()プロシージャではWith RangeとWith .Fontを使う命令文を纏めて
WithTest()プロシージャと同じ操作を行っています。
Withを使用したら忘れずEnd Withも記述するようにしましょう。

使用教材ドットインストールhttps://dotinstall.com/lessons/basic_excel_vba/22806
Apache TSL1.0 TSL1.1 無効化 及び SSLProtocol: Illegal protocol 'TLSv1.2'　対策

+ vi /etc/httpd/conf.d/ssl.conf

```
SSLProtocol -all +TLSv1.2
```

+ SSLProtocol: Illegal protocol 'TLSv1.2'

```
yum install mod_ssl
Rails 6 に更新するとメール送信のテストに失敗した

Rails で作成しているサンプルアプリケーションを Rails6 に更新したところ、メール送信の RSpec テストが失敗しました。

## 発生したこと

以下のような RSpec のシステムテストがありました。

```ruby
scanario 'メール送信' do
  # メール送信する操作を実行

  mail = ActionMailer::Base.deliveries.last

  aggregate_failures do
    expect(mail.to).to eq ["admin@example.com"]
    ...
  end
end
```

元々、Rails のバージョンは 5.2.3 でしたが、6.0.0 に更新してテストを実行すると以下のようなエラーになりました。

```
 Failure/Error: expect(mail.to).to eq ["admin@example.com"]

 NoMethodError:
   undefined method `to' for nil:NilClass
```

`ActionMailer::Base.deliveries` が空のため、送信したメールが取得できずエラーになったようです。
開発環境で動作確認すると、メール送信処理自体は特に問題ないように見えます。

## 解決方法

テストに以下の設定を追加しました。

```ruby
  ActiveJob::Base.queue_adapter.perform_enqueued_at_jobs = true
  ActiveJob::Base.queue_adapter.perform_enqueued_jobs = true
```

これで、`ActionMailer::Base.deliveries` に送信したメールが格納されるようになりました。

## 参考にしたページ

* https://stackoverflow.com/questions/57854609/upgrade-to-rails-6-broke-my-actionmailer-test
  同じように Rails6 に更新したことで `ActionMailer::Base.deliveries` に送信したメールが格納されない問題についての質問記事です。
  結局この質問では、質問者がメール送信するコードを `assert_emails` メソッドで囲むことで解決したとポストされていますが、私の場合は解決しませんでした。

* https://github.com/rails/rails/blob/master/actionmailer/test/message_delivery_test.rb
  Rails の Action Mailer のテストをみると、上記 `queue_adapter` についての設定が記載されていたので、これを参考にして解決できました！

* https://railsguides.jp/6_0_release_notes.html#action-mailer
  Rails6 になってメール送信に使用されるジョブが `ActionMailer::DeliveryJob` から `ActionMailer::MailDeliveryJob` に変更されたことが原因ではないかと思われます。
Visual Studio CodeでC++ソースを自分好みにフォーマットしたい

XcodeでC++書いてたら壊滅的なコードフォーマットでまともに書ける状態じゃなかったので、とりあえずVScodeで整形をかけられるようにしたい。
しかしなかなか知識ゼロから構築するところまで書いてくれてるところが見つからなくて、実際にフォーマットできるようになるまでだいぶ時間がかかったので情報をまとめてメモしておきます。

clang-formatコマンドを使う方法が移植性高そうで好みだったのでその方法を紹介します。(ツールの性質上、C++以外でも使えます。検索的な理由からC++としています。)

## VScodeにclang-formatをインストールする

拡張機能から入れるだけです。
<img width="809" alt="スクリーンショット 2019-10-08 13.14.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212031/4d89bdc4-39f7-dca8-c5ab-97fa961ede16.png">

## clang-formatを入れる

拡張機能を入れただけだとclang-format本体が入ってないとエラーが出ました。なのでコマンドを使えるようにします。
Macだとhomebrewにあるのでインストールします。(Windowsでは実践してないのでここには書きません。試してないことをドヤ顔で書くのはよくないので、[申し訳ないですがインストール方法は自力で調べてみてください。](https://www.google.com/search?channel=trow2&client=firefox-b-d&q=windows+clang-format+%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB))

```sh
% brew install clang-format
```

## clang-formatの設定ファイルを作る

clang-formatに関する設定はVScode内で設定できない？(できる気はするが、色々いじってみても分からなかった)
設定ファイルの取り回しも考えると自力で設定した方が早いと思います。

---

clang-formatにはLLVM,Google,Chromium,Mozzila等のテンプレートがあり、そこから選択することができます。当然、カスタマイズしたいですよね？


clang-formatは".clang-format"ファイルが置かれていると、その設定に応じてフォーマットをかけてくれます。カレントディレクトリだけでなく、上のディレクトリに設置しておけばサブディレクトリにも適用してくれます。

しかし膨大な量の設定を調べるだけでも大変です。ということで、まずはこのコマンドを打ちましょう。

```
clang-format -dump-config -style=Google > .clang-format
```

参照：http://shinriyo.hateblo.jp/entry/2015/05/11/.clang-format%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9

これで存在する設定項目を全部ファイルに吐き出してくれるので、 ".clang-format" ファイルをそのままソースのある場所、またはその親ディレクトリに配置するだけでテンプレ設定でのフォーマットができるようになります。C++に適用するにはLanguage:Cppと設定する必要がありますので、配置したのにエラーが出たり、おかしい場合は中を確認してみてください。

コマンドをインストールし、設定ファイルを配置すればVScodeからでも反映してフォーマットされるようになります。VSCodeの設定からファイル保存時の自動フォーマットを有効にしておけば、とても人権のある開発ができますね。

## 設定をいじろう

-style=Google の 「Google」を別のテンプレート名に変えれば当然別のテンプレが吐き出されます。求めているものに近いファイルを見つけてから設定をひとつずつカスタマイズするとよいでしょう。

しかし設定を紹介していたらキリがないので個別に取り上げることはしません。
日本語で読める記事を紹介して終わります。

http://yasuharu519.hatenablog.com/entry/2015/12/13/210825

↓こちらはオプションまで明記されててわかりやすかったです
http://algo13.net/clang/clang-format-style-oputions.html

clang-formatとVSCodeでよいコーディングライフを！

## まとめ

あんなに何時間もネットの海をさまよって手に入れた情報なのに、記事にまとめたらスッカスカになってしまった…。結局のところ「clang-formatというフォーマットツールがあって、VSCodeと組み合わせられるよ！」が知りたかった情報でした。この点だけでも参考になれば幸いです。
[Atlassian]アトラシアンサポートに問い合わせる時にコードブロックで書きたい人生をおくりたい人のためのtips

俺です。
アトラシアン人になれず1年以上経過した気がします。
たまに使うアトラシアンサポートの問い合わせフォームで、コードブロック使いたいときがあります。


```
こんなかんじでコードブロック書きたいときは
```

{noformat}
こんなかんじでかくと
{noformat}

```
こんなかんじで投稿されるぞ
```

良いサポートライフを!
汎用性の高い処理を作る

##汎用性ってむずかしい
`入力された文字列を「,」で区切って配列にして個数を数えて100倍してコンソールに出力する処理`

```は？.java
package ha;

import java.util.Arrays;

public class Trash {

	private static final String HA_IMIWAKANNAI = ",asd,asdadas,asda,sdas,asdasd,,asdasd,,,asd,";

	public static void main(String[] args) {
		trash(HA_IMIWAKANNAI);
	}

	private static void trash(String str) {
		System.out.println(100 * Arrays.asList(str.split(",")).size());
	}
}

```
意味わかんないというか何の役に立つのかわからん

汎用性のかけらもないよね

いつつかうんこれ

てことで

##1つの処理でとめよう！
`入力された文字列を「,」で区切って`
`配列にして`
`個数を数えて`
`100倍して`
`コンソールに出力する処理`

```改変.java
package ha;

import java.util.Arrays;
import java.util.List;

public class Trash {

	private static final String HA_IMIWAKANNAI = ",asd,asdadas,asda,sdas,asdasd,,asdasd,,,asd,";

	public static void main(String[] args) {
		trash(HA_IMIWAKANNAI);
	}

	private static void trash(String str) {
//		System.out.println(100 * Arrays.asList(str.split(",")).size());
		sysout(hundred(count(toArray(separate(str)))));
	}
	
	// 分割
	private static String[] separate(Object obj) {
		return obj.toString().split(",");
	}
	// リストに
	private static List<String> toArray(String[] str) {
		return Arrays.asList(str);
	}
	// 数える
	private static int count(List<String> list) {
		return list.size();
	}
	// 100倍
	private static Integer hundred(int num) {
		return num * 100;
	}
	// 出力
	private static void sysout(Object obj) {
		System.out.println(obj);
	}

}

```
分けすぎわろた

まぁ汎用性は上がってますよね
一部、他でも使えると思うので!

StringUtilを自作する人も多いんじゃないでしょうか

##Object型
これ便利よね
IteretorとかTとかSetとか、初心者はまだ知らないやつ、ほんと便利なので調べてみてほしいです

forをより汎用的にしたのがiterator
順番とか気を付けたListやMapなどのCollectionsがSet
なんでもいい型がT
Objectもなんでもおｋなクラス

どうしても型の縛りで同じ処理を複数作らされたりとかする時は
是非こいつらを使って一括で行けないか考えてみましょ

ただ下手にOptionalを使ってnullを許容してしまうと
事故になりかねないので、注意しましょうね

汎用性ってｽｺﾞｲ
macOS Catalina で M5StickCに書き込みできない

# 1. Connecting........_____....を繰り返し、M5StickCへ書き込みできない。
```
esptool.py v2.8-dev
Serial port /dev/cu.usbserial-xxxxxxx
Connecting........_____....._____....._____....._____....._____....._____....._____

A fatal error occurred: Failed to connect to ESP32: Timed out waiting for packet header
```
【暫定回避】
G0とGNDをジャンパーでつないで強制的に書き込みモードにする。

【解決策】
- CP210x USB - UART ブリッジ VCP ドライバーをインストールすることで解決しました！(2019/11/28)
Mac機種により、解決しないものがあるようです。(2020/2/29)
Macintosh OSX (v5.2.2) 用ダウンロード
https://jp.silabs.com/products/development-tools/software/usb-to-uart-bridge-vcp-drivers

【ファームウェア対策】(2020/2/29)
M5Satck Communityの情報で、USBコントローラーのファームウェアの書き換え手順が記載されています。今後の出荷分のM5StickCはファームウェア書き換えは不要と思います。
http://community.m5stack.com/topic/1591/m5stickc-and-atom-on-macos-platform-can-t-upload-programs-solustion

岡嵜さんが見つけた問題と解決方法をまとめています。
https://tech.fusic.co.jp/posts/2020-02-12-macos-catalina-m5stickc/

# 2. Arduino-ESP32でコンパイルが通らない。
macOS　Catalinaは64bitのアプリしか動作しないのでArduinoのコンパイルが通りません。

【暫定回避】
Arduino IDEのbeta版1.9.0をインストールすると解決します。
安定版とbeta版では、Arduino IDEのアイコンの色が異なります。
https://www.arduino.cc/download_handler.php?f=/ide_beta/arduino-1.9.0-beta-macosx.zip
CSS 文字の下線が消えない！？

cssの

```
text-decoration: none;
```
が効かない事があったので対処法をまとめてみました。
以下経緯です。

---
#####①最初のコード

```index.html
<div class="under-line">
  <a href="[リンク先のURL]">
    <span>下線を消してみる</span>
  </a>
</div>
```

```styles.css
.under-line {
    font-size: 20px;
    text-decoration: none;
}
```

一番上の親要素に適応させればいいのでは？と思い書いたもの。
結果は
<img width="138" alt="20191008_Qiita01.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/023826ca-40e3-11ac-0dc0-935d02010091.jpeg">
消えませんでした。

---
#####②変更後のコード (index.htmlは変更してません)

```styles.css
.under-line {
    font-size: 20px;
}  

.under-line a {
    text-decoration: none;
}
```

＜a＞要素に適応させてみました。
<img width="133" alt="20191008_Qiita02.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509471/eca72621-2fe5-f9e1-5bdf-7b283b0db78b.jpeg">

消えました。
Excel VBA入門 #05複数のセルに値を表示してみよう

Range()の()内に範囲を指定することで複数セルに値を表示させることが出来ます。

1. Range("A1", "B3").Value = "hello" ※A1からB3セルまでの6つのセルにhelloを表示
2. Range("A5:C7").Value = "hello2" ※A5セルからC7セルまでの9つのセルにhello2を表示
3. Range("4:4").Value = "row4" ※4行目全てにrow4を表示
4. Range("C:C").Value = "Column C" ※C列目全てにColumn Cを表示

Cells.Clearを実行することですべてのセルの値を削除出来る。

使用教材ドットインストールhttps://dotinstall.com/lessons/basic_excel_vba/22805
python/djangoで文字列からdatetimeに変換するときのtimezone設定

めちゃくちゃ初歩的なミスを犯すところだったので戒めにメモしておきます。。。

## 背景
 Twitter APIを用いて構築しているTwitterクローラで、デフォルト設定である1週間単位でツイートデータを収集していたが、1週間丸ごと取りに行くとデータ量的にクロールにかかる時間が長くなってしまう為、クロールしてくる期間を変更したい。
しかし、[Standard Search API](https://developer.twitter.com/en/docs/tweets/search/api-reference/get-search-tweets)には取得開始日時から特定の日時までのデータに絞るパラメータが存在していない為、APIの返り値から日付情報を抽出して比較する必要がある。
（厳密には、since_idはあるけど仕様が謎で使いづらい・・・）

## 問題
以下のように、`django.utils.timezone`を用いてJSTで対象期間を定義し、APIの返り値をJSTに変換して比較しようとしていた。

```python3
import datetime
from django.utils import timezone

target_datetime = timezone.localtime(timezone.now()) - datetime.timedelta(days=4)

created_at = "Thu Oct 03 15:28:43 +0000 2019" #APIから抽出した日付文字列
created_at_datetime = timezone.make_aware(datetime.datetime.strptime(created_at, '%a %b %d %H:%M:%S +0000 %Y'), timezone.get_default_timezone())

if created_at_datetime > target_datetime:
以下省略
```

しかし、このやり方だと以下のように「UTC」の日時が「JST」に変換されないまま、「JST」のタイムゾーン情報だけが付与された形になっていた。

```python3
>>> created_at = "Thu Oct 03 15:28:43 +0000 2019"
>>> created_at_datetime = timezone.make_aware(datetime.datetime.strptime(created_at, '%a %b %d %H:%M:%S +0000 %Y'), timezone.get_default_timezone())
datetime.datetime(2019, 10, 3, 15, 28, 43, tzinfo=<DstTzInfo 'Asia/Tokyo' JST+9:00:00 STD>)
```

## 解決方法
UTC文字列をJSTのdatetimeに変換するには以下の手順を踏む必要がある。

```python3
>>> created_at = "Thu Oct 03 15:28:43 +0000 2019"
>>> created_at_datetime_utc = datetime.datetime.strptime(created_at, '%a %b %d %H:%M:%S %z %Y')
>>> timezone.localtime(created_at_datetime_utc)
datetime.datetime(2019, 10, 4, 0, 28, 43, tzinfo=<DstTzInfo 'Asia/Tokyo' JST+9:00:00 STD>)
```

なお、datetime同士の比較を行うだけの目的であればわざわざ変換しなくてもよしなに計算してくれる模様。

```python3
>>> created_at_datetime
datetime.datetime(2019, 9, 29, 20, 32, 44, tzinfo=datetime.timezone.utc)
>>> target_datetime
datetime.datetime(2019, 9, 29, 20, 32, 44, tzinfo=<DstTzInfo 'Asia/Tokyo' JST+9:00:00 STD>)
>>> created_at_datetime > target_datetime
True

>>> created_at_datetime
datetime.datetime(2019, 9, 29, 12, 32, 44, tzinfo=datetime.timezone.utc)
>>> target_datetime
datetime.datetime(2019, 9, 29, 20, 32, 44, tzinfo=<DstTzInfo 'Asia/Tokyo' JST+9:00:00 STD>)
>>> created_at_datetime > target_datetime
True

>>> created_at_datetime
datetime.datetime(2019, 9, 29, 10, 32, 44, tzinfo=datetime.timezone.utc)
>>> target_datetime
datetime.datetime(2019, 9, 29, 20, 32, 44, tzinfo=<DstTzInfo 'Asia/Tokyo' JST+9:00:00 STD>)
>>> created_at_datetime > target_datetime
False
```
Apacheでフォワードプロキシを多段にする

# TL;DR

* Apacheでフォワードプロキシを構築できる
* さらに、`ProxyRemote`ディレクティブを併用することでフォワードプロキシを多段にすることができる
* `ProxyRemote`で指定するプロキシは、認証などは利用できない

# 環境

Ubuntu Linux 18.04 LTS。

```shell
$ lsb_release -a
No LSB modules are available.
Distributor ID:	Ubuntu
Description:	Ubuntu 18.04.3 LTS
Release:	18.04
Codename:	bionic
```

Apache。

```shell
$ /usr/sbin/apache2 -v
Server version: Apache/2.4.29 (Ubuntu)
Server built:   2019-09-16T12:58:48
```

また、フォワードプロキシとするApacheは、`172.17.0.2`で動作しているものとします。

# フォワードプロキシを設定する

Ubuntu Linux上のApacheなら、`a2enmod`コマンドでモジュールを有効にできます。

```shell
$ sudo a2enmod proxy_http proxy_connect
```

フォワードプロキシの設定に必要なモジュールは、こちら。

```shell
LoadModule proxy_module /usr/lib/apache2/modules/mod_proxy.so
LoadModule proxy_http_module /usr/lib/apache2/modules/mod_proxy_http.so
LoadModule proxy_connect_module /usr/lib/apache2/modules/mod_proxy_connect.so
```

[Apache Module mod_proxy](https://httpd.apache.org/docs/2.4/en/mod/mod_proxy.html)

[Basic Examples](https://httpd.apache.org/docs/2.4/en/mod/mod_proxy.html#examples)

プロキシのリッスンポートは`8080`にして、フォワードプロキシを設定。

```
Listen 8080

<VirtualHost *:8080>
  ProxyRequests On
  ProxyVia On

  <Proxy *>
    Require ip 172.17.0  ## アクセス許可するIPアドレス帯など
  </Proxy>
/VirtualHost>
```

さらにこれを多段にする場合、`ProxyRemote`ディレクティブを併用します。

[ProxyRemote Directive](https://httpd.apache.org/docs/2.4/en/mod/mod_proxy.html#proxyremote)

```
Listen 8080

<VirtualHost *:8080>
  ProxyRequests On
  ProxyVia On

  <Proxy *>
    Require ip 172.17.0  ## アクセス許可するIPアドレス帯など
  </Proxy>

  ProxyRemote * http://[your-proxy-host]:[your-proxy-port]
</VirtualHost>
```

これで、このApacheをフォワードプロキシとして使い、さらにApacheは`ProxyRemote`で指定したプロキシとして動作するようになります。

確認。

```shell
$ https_proxy=http://172.17.0.2:8080 curl -I https://www.google.com/

$ http_proxy=http://172.17.0.2:8080 curl -I wttr.in/tokyo?lang=ja
```

なお、`ProxyRemote`で指定するプロキシ先に`username`や`password`は指定できない（URLに含めることができない）ので、認証付きプロキシが背後にいる場合は、Squidを使った方が良さそうです。


# ところで、なんに使うの？

プロキシを踏まないとインターネットに出れない！

でも、外部にアクセスした時のアクセスログを見たい！

といった時などにでもどうぞ。
[Django] forms.Form placeholderの設定

# 各フィールドに一括でplaceholderを設定する場合
```python
from django import forms


class RegistrationForm(forms.Form):
    username = forms.CharField(
        label='insert your name',
    )

    email = forms.EmailField(
        label='insert your email address',
    )

    def __init__(self, *args, **kwargs):
        super(RegistrationForm, self).__init__(*args, **kwargs)
        for field in self.fields.values():
            field.widget.attrs['placeholder'] = field.label
```
`self.fields.values()`でformの各フィールドを取得しフィールドが持つラベルをplaceholderに設定する．

# フィールドごとにplaceholderを設定する場合
```python
from django import forms


class RegistrationForm(forms.Form):
    username = forms.CharField(
        label='insert your name',
    )

    email = forms.EmailField(
        label='insert your email address',
        widget=forms.EmailInput(
            attrs={
                'placeholder': 'メールアドレスを入力してください．'
            }
        )
    )
```
**注:EmailFieldはwidgetとして設定できないフィールドなので代わりにEmailInputを利用しています**
Excel VBA入門 #04セルに値を表示してみよう

VBAでセルに値を入力する方法には4種類あります。

1. Worksheets("Sheet1").Range("A1").Value = "hello"
※Sheet1のＡ列1行目にhelloを入力
2. Range("A2").Value = "hello2"
※今アクティブ中のワークシートのＡ列2行目にhello2を入力
3. Cells(3, 1).Value = "hello3" ※今アクティブ中のワークシートの3行1列目にhello3を入力
4. Cells(3, 1).Offset(1, 0).Value = "hello4" ※今アクティブ中のワークシートの3行1列目から1行0列移動したセルにhello4を入力

使用教材ドットインストールhttps://dotinstall.com/lessons/basic_excel_vba/22804
statically linkedなGNU nanoをビルドする

バイナリ単体で動作するGNU nanoを作ります。

# GNU nano とは

軽量なスクリーンエディタです。
vimやemacsのように高機能ではありませんが、小さな編集のみ行う場合には十分な機能を有しています。
操作にクセが少ないので、初めてスクリーンエディタを使う方でも扱いやすいかと思います。

ref. [nano - ArchWiki](https://wiki.archlinux.jp/index.php/Nano)

# 静的リンクされたnano

パッケージマネージャなどで手に入るnanoは大抵、依存するライブラリをdynamic linkして動作するものであり、nanoのバイナリファイルだけをどこかに持っていったとしても高い確率で動作しません。
かといって、プロダクション環境のサーバに依存ライブラリと一緒にゴチャッとインストールするのも気が引けるものです。
そこで、すべての依存ライブラリを静的リンクしてしまい、単一ファイルで動作する可搬性の高いnanoバイナリが作りたい！というモチベーションがあります。

# ビルド手順

## ビルド環境の立ち上げ

Dockerで立ち上げたコンテナ上で作業します。イメージは`alpine:edge`です[^edge]。
Alpine Linuxは軽量なコンテナイメージとして有名ですが、デフォルトで採用されている**musl libc**は静的リンクに最適化された軽量なlibcであり、今回の目的にもマッチしています。

[^edge]: edgeバージョンを用いるのは、後ほどインストールする`zlib-static`が現行の最新バージョン**v3.10**では提供されていないからです。

```bash
docker run -it --name builder alpine:edge
```

以降はコンテナ内での作業になります。

## 必要なパッケージのインストール

以下のパッケージが必要ですので、インストールします。

```bash
apk add gcc make groff linux-headers musl-dev ncurses-dev ncurses-static zlib-dev zlib-static
```

ncursesとzlibはそれぞれ、nanoが依存するライブラリであり、静的リンク用のファイルを提供するパッケージが用意されています。
（末尾が`-static`のもの。）

## `libmagic.a`のビルド

libmagicは、nanoがファイルの種別判定に用いるライブラリです。
このlibmagicは、[file-dev](https://pkgs.alpinelinux.org/package/edge/main/x86/file-dev)パッケージに含まれていますが、静的リンク用のバイナリは提供されていません！

ということで、自前でビルドする必要があります。libmagicのソースコードは、ファイルの種類を判定するコマンド`file(1)`のソースコードに含まれているので、これをビルドします。

```bash
cd /
wget ftp://ftp.astron.com/pub/file/file-5.37.tar.gz -O - | tar zxvf -
cd file-5.37
./configure CFLAGS="-Ofast" --prefix=/usr --enable-static
make -j8
make install
```

`./configure`時に`--enable-static`オブションをつけることで、静的リンク用のバイナリlibmagic.aが生成されるようになります。

## `nano`のビルド

これで材料が揃ったので、nanoをビルドできます。
`LDFLAGS`に`-static`を指定して静的リンクします。

```bash
cd /
wget https://www.nano-editor.org/dist/v4/nano-4.5.tar.gz -O - | tar zxvf -
cd nano-4.5
./configure CFLAGS="-Ofast" LDFLAGS="-static -no-pie -s" LIBS="-lz" --prefix=/usr
make -j8
make install
```

確認してみます。

```
# file /usr/bin/nano
/usr/bin/nano: ELF 64-bit LSB executable, x86-64, version 1 (SYSV), statically linked, with debug_info, not stripped

# ldd /usr/bin/nano
/lib/ld-musl-x86_64.so.1: /usr/bin/nano: Not a valid dynamic program

# ls -lha /usr/bin/nano
-rwxr-xr-x    1 root     root      793.8K Oct  7 17:05 /usr/bin/nano
```

できてる！
当たり前ですが、全部入りなので若干バイナリサイズが大きいですね。

## 後処理

コンテナから抜けて……

```bash
exit
```

ビルドしたnanoをホストマシンに持ってきます。ビルドに使ったコンテは不要なので、削除。

```bash
exit
docker cp builder:/usr/bin/nano .
docker rm builder
```

ホストマシンでもちゃんと動作しています。

```
$ ./nano --version
 GNU nano, version 4.5
 (C) 1999-2011, 2013-2019 Free Software Foundation, Inc.
 (C) 2014-2019 the contributors to nano
 Email: nano@nano-editor.org	Web: https://nano-editor.org/
 Compiled options: --disable-nls --enable-utf8
```

# 完成

今回ビルドしたnanoを以下においておきました。自己責任でご利用ください。
https://www.dropbox.com/s/a0xmtaqy4jvb6nb/nano?dl=0

便利な機能を使おうとすると他に必要なファイルがあったりする（例えば今回無効になっているNative Language SupportやSyntax Highlightingなど）のですが、基本的な機能は一通り利用できるバイナリが生成できました。
macOS Catalina terminalがcdの度にpopupを出しくるんだけど

これ

<img width="442" alt="スクリーンショット 2019-10-08 12.53.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395131/bafa8e59-b0a9-0c6f-3d38-0c3f11cc46d6.png">


フルディスクアクセスに利用しているterminalのappを追加すればOK

<img width="666" alt="スクリーンショット 2019-10-08 13.05.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395131/6ae22e53-ae58-dddf-76b6-05ebb9cfbb04.png">
PowerShellでのプロキシ設定

# 設定

```
PS C:\dev> $env:http_proxy="http://myproxy.jp:xxxx"
PS C:\dev> $env:https_proxy="http://myproxy.jp:xxxx"
```

# 確認

### 指定して確認

```
PS C:\dev> get-childitem env:http_proxy

Name                           Value
----                           -----
http_proxy                     http://myproxy.jp:xxxx
```

```
PS C:\dev> get-childitem env:https_proxy

Name                           Value
----                           -----
https_proxy                    http://myproxy.jp:xxxx
```

### 環境変数の一覧表示で確認

```
PS C:\dev> get-childitem env:
```
facial reconstruction, facial rigging のメモ


## テンプレートメッシュ

https://flippednormals.com/downloads/basemesh-optimized-for-facial-rigging/

CC-BY-3 ライセンス(クレジットすれば商用利用もできる)

## facial reconstruction

Multi-View Stereo on Consistent Face Topology
http://vgl.ict.usc.edu/Research/XimeaRiver/

多視点画像から, 顔形状を復元. テンプレートメッシュが必要(また, テトラメッシュ化してボリューム表現にする必要がある)