OmniAICreator/Qiita-1.07M huggingface dataset:
Arduinoと格安の小型ドローンを接続する

noteで公開している[トイドローンをハッキングft. Arduino - 気軽にドローンを自動操縦](https://note.mu/koumikuni/n/nb369807cb807)という記事の関連です。

**目標：**
１台の小型ドローンをArduinoに書き込んだプログラムでペアリング、キャリブレーションに加え、飛行〜着陸の一連の動作をさせる。

**使用した部品**
LTC1660CN
Arduino MEGA
luxon H36(小型のトイドローン)

**関連記事**
[LTC1660CNをArduinoで動かす](https://qiita.com/masicbiscuit/items/e2223bcf270f979580f8)
[LTC1660CN (軍鶏乃記録)2012.6.18](https://hiyohiyo.blogspot.com/2012/06/ltc1660cn.html)
[A Library for LTC1665/LTC1660 (Kerry D. Wong)2010.5.2](http://www.kerrywong.com/2010/05/02/a-library-for-ltc1665ltc1660/)


# アナログ電圧の出力
今回はPWMではなくDAコンバータを用います。
その理由や具体的な方法は以下の記事にまとめていますので、ご覧ください。
[関連記事：LTC1660CNをArduinoで動かす](https://qiita.com/masicbiscuit/items/e2223bcf270f979580f8)

# コントローラとArduinoを繋げる。
[こちらの記事](https://note.mu/koumikuni/n/nb547becfe231)と[この記事](https://note.mu/koumikuni/n/nb369807cb807)のようにコントローラをDAコンバータ介してArduinoに繋げます。

# ペアリング - ドローンとコントローラの接続
ドローンとコントローラを接続するためには、（今回使用したドローンでは）左スロットルを上に動かした後に下に戻します。この操作を「ペアリング」と読んでいます。

今回使用しているドローンのコントローラは、
- **スロットルが下にある時に電圧が最大に、**
- **スロットルが上にある時に電圧が最小に**なります。

それを元にペアリングのコードを書きました。

```cpp
void paring(){
    output(0,1023); // 左スロットルを下に下げておく
    changeOutput(0,1); // 段階的に左スロットルを上まであげる
    delay(400); // 0.4秒待つ
    changeOutput(0,1023); // 段階的に左スロットルを下まで下げる
}
```

〜解読〜
`output()`は[関連記事](https://qiita.com/masicbiscuit/items/e2223bcf270f979580f8)の定義を元にして、少し変えて使ってあります。

```cpp:関連記事での元々の定義
void output(long chn, long val){
  long t = chn << 12;
  t = t | val << 2;
  

  digitalWrite(pinCSLD, LOW);
  for (long i = 15; i >= 0; i--)
  { 
    long b = (t >> i) & 1;
    digitalWrite(pinIN, b);
    digitalWrite(pinSCK, HIGH);
    digitalWrite(pinSCK, LOW);  
  }
   
  digitalWrite(pinCSLD, HIGH); 
}
```

```cpp:変更した定義
// 左スロットルが0番目、右スロットルの上下が1番目、左右が2番目として配列を用いる。
int deg[] = {1023,512,512}; // 複数のチャンネルの出力に対応できるように配列を用意
long chn[] = {1,2,3};

void output(int chnNum, long val)
{
  long t = chn[chnNum] << 12;
  t = t | val << 2;
   
  digitalWrite(pinCSLD, LOW);
  for (long i = 15; i >= 0; i--)
  { 
    long b = (t >> i) & 1;
    digitalWrite(pinIN, b);
    digitalWrite(pinSCK, HIGH);
    digitalWrite(pinSCK, LOW);  
  }
   
  digitalWrite(pinCSLD, HIGH);
  deg[chnNum] = val;
}
```

また、スロットルを手で動かす時は電圧が連続に変動するはずです。
プログラムから動かす際にも、その状況に近づけるために連続に動かします。

```cpp:段階的に変化する関数を定義
void changeOutput(){
  int postVal = deg[chnNum];
  int drctn = 1;
  if(val<postVal){drctn = -1;} // 上がるか下がるか調べる
  for (int i = 0; i < abs(val-postVal); i+=2)
  {
    output(chnNum, long(postVal+drctn*i));
    delay(1);
  }
}
```

# キャリブレーション - ジャイロの初期化
ドローンの平衡感覚を整えてあげる必要があります。
そのためには左スロットルが下にある状態で、右のスロットルを左下に抑えて少し保ちます。

この状況をプログラムで再現します。

```cpp:キャリブレーションを行う関数の定義
void calib(){
    output(0,1023); // 左スロットルを下に抑える
    changeOutput(1,1023); // 右スロットルを左に倒す
    changeOutput(2,1023); // 右スロットルを下に倒す
    delay(1000); // １秒待つ
}
```

# 飛んでから着地
これはほぼ`paring()`と同じです。というか待ち時間を伸ばしただけです。

```cpp:飛んで着地
void flight(){
    output(0,1023); // 左スロットルを下に下げておく
    changeOutput(0,1); // 段階的に左スロットルを上まであげる
    delay(3000); // 3秒待つ
    changeOutput(0,1023); // 段階的に左スロットルを下まで下げる
}
```

ここまででひとまず１つの（やっすい）手動でしか動かせない仕様の小型ドローンをArduinoに書き込んだプログラムで飛ばすことができるようになりました！
Android10　位置情報サービスについてのメモ

2019年8月時点でアプリの回収をしていたところ超やばいじゃんこの変更・・・

きっと、動かないとか操作できないとか、ちがう!
というアプリが山程出てくるでしょう。。。

ちなに位置情報周りはBACKGROUNDでなんとかなると思いきや、FINEと何か修正したらうまくいくのですが、マジで悩んで助けてもらったという・・・涙。

------------


Android9から10への移行に手こずっているので、調べたことを少しずつ書いていきたいと思います。
大きく変わったのが位置情報サービス。
バックグラウンドからの位置情報の要求が今までのようにはゆかないとのこと。

本家:AndroidQプライバシーチェックリスト
表「位置情報パーミッションに対するユーザー制御の強化」

パーミッションということで既存の
ACCESS_FINE_LOCATION
ACCESS_COARSE_LOCATION
権限ではバックグラウンドで動いてくれないらしいです。
ということでリポジトリーファイルにACCESS_BACKGROUND_LOCATION権限を追加しましょう。
位置情報の権限の呼出しは、アプリ起動時に行わないように。

フォアグラウンド時に"location"を宣言すると、アプリを使用しているときだけ位置情報サービスにアクセスすることも出来るようです。
ちょっとiPhoneっぽいですね!
＊これをする時には、ACCESS_BACKGROUND_LOCATIONなどは余計な権限なので付与しないように。

なんか「アプリによる位置情報の受信が引き続き許可されているかも確認してね!」とAndroid先生はかいとりますが、まだイマイチ分からないので分かったらカキコします。
テキストエリアに入力された文字数をカウントしてリアルタイムに表示する

                TableRow tr = new TableRow();
                TableCell tc = new TableCell();
                TextBox tb = new TextBox();

                tb.CssClass = "expensesid";
                tb.ID = "expensesid" + list.IndexOf(data);
                tb.Attributes.Add("onKeyUp", "ShowLength(value," + list.IndexOf(data) + "," + "200);");
                tb.Text = data.expensesid;
                tc.Controls.Add(tb);

                Label cnt = new Label();
                cnt.ID = "expensesidCnt" + list.IndexOf(data);
                cnt.Text = "入力文字数 " + data.expensesid.Length.ToString() + "/200文字";
                tc.Controls.Add(cnt);

                tr.Controls.Add(tc);

    <script type="text/javascript">
        function ShowLength(str,row,maxLength) {
            document.getElementById("MainContent_expensesidCnt" + row).innerHTML = "入力文字数 " + str.length + "/" + maxLength  + "文字";
        }
    </script>
【GASの0歩目】脱コピペ！！クラスとメソッドをやんわりと


### 対象
- プログラミングの勉強としてGoogle Apps Scriprt を最初に選んだ人
- PHP,Python,C などの言語でつまずいてGASに流れてきた人
- 公式のドキュメントを使ったことのないひと

基本的には超初心者向けですのでGASが触れる人は参考にならないと思います。

## イメージ
 <img width="1096" alt="スクリーンショット 2019-07-24 16.52.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388345/ac28cced-3ec3-b3cc-73e2-eb3e9d0a4df3.png">
*上の図は私が頭の中で持っているイメージです。
（もしかしたら、内容の間違いであったり勘違いさせる表現があるかもしれません。あればぜひコメント欄にお願いします。）*
<br>
<br>

**ググっただけだと初心者にとってどのクラスをいじっているのかわからなくなります。**
#### **コードを読む時に左からの流れをイメージすることで、「今、どこにいるか？」と迷子にならないようにできます。**
<br>
<br>
<br>

## 例：スプレッドシートのシートを引っ張ってくる
```js
var sht = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("sheet1");
_________|--------------| ・・・（1）
SpreadsheetAppクラス
_________|------------------------------------| ・・・（2）
Spreadsheetクラス
_________|-------------------------------------------------------------|・・・（3）
Sheetクラス
```

###(1)アプリケーションを選択する
まず、最初にGASで操作したいアプリを選択します。
ここではスプレッドシートを指定していますが、同じスクリプトの中でカレンダーやフォームも使えます。

###(2)SpreadsheetAppクラスにgetActiveSpreadsheetメソッドを使う
<details><summary>公式ドキュメントより</summary>
<img width="1391" alt="スクリーンショット 2019-07-24 23.31.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388345/b3ee1b1f-f11f-a8d8-5d09-f5a26e8bc4df.png">
</details>

`SpreadshetApp` に対してメソッドである `getActiveSpreadsheet()`を使います。
そうすることで戻り値（return）としてSpreadsheetクラスが返ってくる。
(2)でSpreadsheetクラスが指定され、ここで初めてスプレッドシートの操作ができる。

*戻り値によって色々なクラスに変わるので公式ドキュメントから確認してみてください。*

###(3)SpreadsheetクラスにgetSheetByName()メソッドを使う
<details><summary>公式ドキュメントより</summary>
<img width="1004" alt="スクリーンショット 2019-07-25 0.09.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/388345/7aad5597-2f98-42e1-d235-2f0d83162a91.png">
</details>
どのスプレッドシートを使うかまでわかれば、次はどのシートを使うのか？
`Spreadsheet`クラスに対して`getSheetByName()`クラスを使うと名前からシートの指定をできる。
今回の例では『sheet1』という名前のシートを持ってきています。
(3)まで行くとクラスは`Sheet`クラスです。
<br>
<br>

#### これ以降の操作について
公式ドキュメントには戻り値のクラスにリンクが貼ってあるのでそれをポチポチしながら色々試してみてください。
## 終わりに
今回の内容は公式のドキュメントを使う上で大切にしているイメージでしたので、記事自体はわかりやすくないかもしれません。
この記事で解決する人が1人でもいれば幸いです。


[Apps Script  \|  Google Developers](https://developers.google.com/apps-script/)
**これに全てが載っているのでぜひ使ってみてください**
EmmetでHTML、CSSコーディングを効率化する


## Emmetのメリット

* 省略記法でHTMLやCSSを書くことができるため入力する文字数が少なくて済み、時間の短縮化やミス防止
* 記述しなくても必要なタグが保管される(暗黙のタグ補完)
* 省略記法が正確でなくても展開できる(Fuzzy Search)





## Emmetを使う準備

|エディタ|プラグイン要/不要|
|---|---|
|VS Code|不要|
|Brackets|必要|
|Atom|必要|

##Expand Abbreviation
省略して書いたものを展開する機能です。

### HTML展開のサンプル

```
#box>ul>li*3>a　
``` 
↓ 展開

```
<div id="box">
  <ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</div>
```

### CSS展開のサンプル

```
 fl:l+d:i+c 
```
↓展開

```
float: left;
display: inline;
color: #000;
``` 

### HTMLの省略記法(抜粋)
|記号|内容|書式|
|---|---|---|
|無し|要素名<>の省略|無し|
|#|ID名の指定|div#idName|
|.|class名の指定|div.className|
|>|入れ子|div>p|
|+|同階層に展開|div+p|
|^|一階層上に展開|div>p^ul|
|*|要素を複数展開|li*3|
|{}|テキストの挿入|p{テキスト}|
|$|連番|li.item-$*3|
|[]|属性の指定|a[href="/"]|
|()|グループ化||
|!|HTMLの雛形|単独で!|
|!|important|末尾に!|

### 暗黙のタグ補完

* ulとolの子にliを補完
* tableとtbody,とtheadとtfootの子にtrを補完
* trの子にtdを補完
* selectとoptgroupの子にoptionを補完

### CSSプロパティの省略記法(抜粋)

|省略|展開|
|---|---|
|tac|text-align:center;|
|db|display:block;|
|m:a|margin:auto;|
|tdn|text-decoration:none;|
|posl|position:relative;|
|poa|position:absolute;|
|pf|position:fixed;|
|w100|width:100px;|
|fsz12|font-size:12px;|
|fsz12pt|font-size:12px;|
|bg+|background:#fff url() 0 0 no-repeat;|
|f+|font:1em Arial,sans-serif;|
|bd+|border:1px solid #000;|
|p5p|padding:5%;|
|m7e|margin:7em;|
|w100x|width:100ex;|
|h50|height:50px;|
|c#1|color:#111;|
|c#e0|color:#e0e0e0;|
|c#fc0|color:#fc0;|
|ov:h|overflow:hidden;|
|d:i|display:inline;|

### ダミーテキスト生成
lorem100と書いて展開すると、100語の英単語で構成されるダミーテキストを生成できます。


### ベンダープレフィックス
何もしなくても自動的に付きますが、必ず付けたい場合に頭に「-」を付けます。

```
 -bx
```
↓展開

```
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
```


### グラデーション

```
 lg(top,#fff,#000)
```
↓展開

```
background-image: -webkit-linear-gradient(#fff, #000);
background-image: -o-linear-gradient(#fff, #000);
background-image: linear-gradient(#fff, #000);
```

### フィルター
最後に「|」 をつけると、フィルター機能が使えます。

|フィルター|内容|
|---|---|
|&#124;c|閉じタグコメントをつける|
|&#124;e|実態参照|
|&#124;s|1行に展開|
|&#124;t|トリム(リストマーカーを削除) Wrap with Abbreviationのみに有効|
|&#124;bem|BEM|

### Cheat Sheet
https://docs.emmet.io/cheat-sheet/


## Expand Abbreviation以外の機能

### Numbers
Increment Number by 1/Decrement Number by 1
1ずつ増減

Increment Number by 0.1/Decrement Number by 0.1
0.1ずつ増減　

Increment Number by 10/Decrement Number by 10
10ずつ増減

### Evaluate Math Expression
計算

### Go to Matching Pair
カーソルを対応する開始タグ/閉じタグに移動

### Toggle Comment
コメントアウト/切り替え

### Remove Tag
カーソルがある部分のタグを削除

### Balance
Balance(Outward)
選択範囲拡大

Balance(Inward)
選択範囲縮小

### Merge Lines
選択範囲内の改行を削除

###  Wrap with Abbreviation
選択範囲を任意のタグで括る
Wrap Abbreviationを実行するとフォームが表示されるので、囲みたいタグを入力

### Select Next/Previous Item
直近のタグ名や属性にフォーカスした状態でジャンプ

### Previous/Next Edit Point
前/次の編集点に移動

### Split/Join Tag
「空タグ」と「開始タグと終了タグ」を変換
※XHTMLで使用

### Reflect CSS Value
ベンダープレフィックスが付与されている同一プロパティの変更を他にも反映

### Update Image Size
画像サイズを取得して、widthとheightを追加

### Encode/Decode Image to data:URL
画像をdataURLに変換
Github project を使ったタスク管理のすヽめ

# はじめに

`Github project`って知ってますか？

自分でカラムやカードを追加できるダッシュボードです。

本記事では、この`Github Project`を利用したタスク管理の方法を共有していきたいと思います。

## どんな感じ？

[こんな感じにできます](https://github.com/users/hiyoko3/projects/1)

### こんな人におすすめ

- 個人開発や小規模開発してる人
- Redmine のようなチケット管理システムを利用していないけどタスク管理したい
- タスク管理ツールを使いすぎて疲弊してる人

### 使い方

[Github](https://github.com/)にアカウントを作成している人が対象となります。

自分のプロフィール画面を開きます。

`projects`のリンクをクリックします。

![Github プロフィール](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97131/4aec644b-230a-acac-3ccd-80994bfe601e.png)

`New project`を選択します。

![New Project](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97131/9f65af20-1d49-2f96-ad7f-ae330c347820.png)

以下のような画像が表示されます。

`Project board name`を入力し、`Visibility`を選択しましょう。

`Visibility`は公開したくなければ ***private*** で良いかと思います。

他はデフォルト値のままで構いません。

お好みで変更しましょう。

![Create project](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97131/b0719c36-6d9a-43f1-e55c-87f3097695b6.png)

作成したプロジェクトを開くと以下の画面が現れます。

本画面では大きく２つの操作が可能です。

1. カラムを作る
2. カラム内にカードを作成する（本記事ではこれをタスクと定義しています）

![Project](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97131/ede757ba-f47c-1bb6-7a00-31ea5c9605ad.png)


まず、タスクを種別するためのカラムを作成しましょう。

続けて、カラム内にタスクを割り振ったカードを作成すれば完成です。

![Task Management](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97131/e666c136-585e-1c58-35ce-992d6b85592d.png)

お好みでマークダウンが提供している`チェックボックス`機能を利用するとより達成度が可視化されます。

```bash
# こんな感じに書くとチェックボックスになります。
- [ ]  task 1
- [ ]  task 2
- [ ]  task 3
```


### 最後に

なんとこの ***project***、アカウントに対してだけではなく、レポジトリ毎にも設定できます。

レポジトリ毎にタスク管理したいときはレポジトリを作成してから、レポジトリ内で ***project*** を作成してください。

また、冒頭のサンプル画面では、海外ドラマの[シリコンバレー](https://www.amazon.co.jp/gp/video/detail/B077TD11DK)で登場した、`todo`, `doing`, `done`を例として作成しています。

このドラマ、ユーモアが聞いていてとても面白いのでオススメです。

## 参考

- [Github](https://github.co.jp/)
- [ドラマ: シリコンバレー](https://www.amazon.co.jp/gp/video/detail/B077TD11DK)
機械学習で新しい広告？実験してみました。AIで動画の洋服を検索する

# ファッション画像検索エンジンを使って「映像」をアンカーとして検索する

せっかくファッション画像検索エンジン(https://funnel-service.com/)
が手元にあるので、実験しました。


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">pexelsの動画を使って、商品を検索するデモ動画。<br>赤いニット<br>動画内の大きなアイテムを使って検索。<br>funnel-service検索エンジンを使っています。<br>yolo v4、Triplet Loss、Metiric Learning<a href="https://t.co/YosmFgpVlp">https://t.co/YosmFgpVlp</a> <a href="https://t.co/lmJCCCSsix">pic.twitter.com/lmJCCCSsix</a></p>&mdash; mokoe (@mokoe) <a href="https://twitter.com/mokoe/status/1330199652025708546?ref_src=twsrc%5Etfw">November 21, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

アンカー動画の下に検索結果をだしています。

赤色のニットをガンガン検索しています。
過去１５フレーム以内スコア順に出力しています。


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">pexelsの動画を使って、商品を検索するデモ動画。<br>デニム<br>動画内の大きなアイテムを使って検索。<br>funnel-service検索エンジンを使っています。<br>yolo v4、Triplet Loss、Metiric Learning<a href="https://t.co/YosmFgpVlp">https://t.co/YosmFgpVlp</a> <a href="https://t.co/S48F4ou0OH">pic.twitter.com/S48F4ou0OH</a></p>&mdash; mokoe (@mokoe) <a href="https://twitter.com/mokoe/status/1330199099426164736?ref_src=twsrc%5Etfw">November 21, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
デニムジャケットとデニムです。



ドラマとかでやってみたいですが・・・我が家にはTVがありません。。。レコーダーもありません:joy:
著作権的にも無しです:joy:

動画はPexels Videosを利用しました。

# 仕組み

新しく何か作ったわけではなくて・・・
https://qiita.com/mokoenator/items/6807132ce59913186a9b
でやったことを使いまわしただけです。

商品画像のアスペクト比がバラバラなので結合処理が結構シビアでめんどくさかったです。
【書評】Amazon Web Service 業務システム設計・移行ガイド

AWS 認定ソリューションアーキテクト - プロフェッショナルの勉強をしているのですが、
blackbelt読んだり、問題解いたりするのに飽きてきたので買いました。

---
[Amazon Web Service 業務システム設計・移行ガイド](https://www.amazon.co.jp/dp/4797392568/)
![alt](https://images-na.ssl-images-amazon.com/images/I/61N%2BYkPAOtL._SX398_BO1,204,203,200_.jpg)

アソシエイトなら個々のサービスの知識が問われますが、プロフェッショナルは複数サービスを組み合わせた問題が出されます。
試験対策にもなりそうなわかりやすい本はないかと探したところ、これが良さそうでした。

##感想
いくつかのパターンにわけて、個々のサービスをどう設定していくか、具体的な手順とともに、それに必要な知識が書かれてました。
だいたいこんな感じと想像がつく構成でも、細かな知らない知識があったので勉強になりました。
全体的に、業務システムをAWSに移行することを想定していますが、１からシステムを構築する場合も参考になることが多く、
自分自身ではCloudFrontなどが参考になりました。
この本が、直接試験に役立つことは少ないかと思いますが、今後の業務に役立つ情報が多く、参考になりました。
ABC134 write up

# B - Golden Apple

監視員は$2D+1$本の木を監視できる。
ちょうど監視範囲が被らないように監視員を配置すればよいので、`ceil(N/2D+1)`を計算すればよい。(`ceil`=切り上げ)

```python
from math import ceil
 
n, d = map(int, input().split())

print(ceil(n/(2*d+1))
```

# C - Exception Handling

$A_i$の中で最大の要素$A_n$と2番目に大きい要素$A_m$を求めておく。
n番目は$A_m$, それ以外では$A_n$を出力すればよい。

```python
from sys import stdin

n = int(stdin.readline())
a = [int(stdin.readline()) for _ in range(n)]

b = a.copy()
m1 = max(b) # 最大の要素
b.remove(m1)
m2 = max(b) # 2番目に大きい要素

for i in range(n):
  if a[i] == m1:
    print(m2)
  else:
    print(m1)
```

# D - Preparing Boxes

考え中

# E - Sequence Decomposing

数列$A$の頭から順に$A_i$をどの色にするか決めていく。
$A_1, \dots, A_{i-1}$の配色について、各色について一番大きな数字のリスト$L$を持っておく。
この時、

- $\min L \ge A_i$ であれば、$A_i$には新しい色を割り振る
    - そもそも既存の色を割り振れないので新しい色を付ける
- $\min L < A_i$ であれば、$A_i$には$\max \\{ l \in L ;\, l < A_i \\}$を実現する$l$に振られている色を割り振る
    - 既存の色で$A_i$に割り振れるのは$\\{ l \in L ; \, l < A_i \\}$に割り振られている色であることに注意
    - $L$に含まれる数字が出来るだけ小さい方が新しい色を割り振らずに済むので、一番効率がいいものを考えると最大の数に割り振られている色をつけるのがよい

とすることで効率よく色を割り振ることができる。

```python
from sys import stdin
from bisect import bisect_left
from collections import deque
 
n = int(input())
a = [int(stdin.readline()) for _ in range(n)]
 
l = deque()
 
for i in range(n):
  n = bisect_left(l, a[i])
  if n == 0:
    l.appendleft(a[i])
  else:
    l[n - 1] = a[i]
 
print(len(l))
```
Bootstrap の グリッドシステム とは (レスポンシブデザイン対応)

Bootstrap の グリッドシステム とは (レスポンシブデザイン対応)

# 目的
Bootstrapのレスポンシブデザインに対応したグリッドシステムの考え方についてまとめる
※グリットシステムの基本を知りたい方は[こちら](https://qiita.com/miriwo/items/e7487ea94d46d951cc91)を参考にしてください。

# この記事のターゲット
- Bootstrapを使ってみたけど上手くレスポンシブデザイン化出来ない方
- グリッドシステムのレスポンシブデザインに苦手意識がある方

# レスポンシブデザイン化対応をしないとどうなる？
- どのブラウザの横幅でも同じ領域を使用して要素を表示することになり、横幅が狭いブラウザだと要素が引き伸ばされ、見にくいwebページとなる。
※下記に例を記載する

- レスポンシブデザイン化対応をしていないwebページを1200px以上の横幅のブラウザで見たとき
  - 正常に表示されている
![グリッドシステム.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/bece215d-c7d5-8c1f-c71f-57c9b10cb117.png)


- レスポンシブデザイン化対応をしていないwebページを500pxの横幅のブラウザで見たとき
  - 1200pxでの表示をそのまま小さくしているためcolクラスのdiv要素が小さく表示され見にくい 
![グリッドシステム5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/db6c3b18-da6b-87dc-276d-e8f5b25f5bdc.png)


- 理想の表示
  - テキストの一つ一つが画面幅いっぱいに表示され、縦に並ぶ
![グリッドシステム7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/6d2f88bb-7dae-bf6b-b40c-03657bc3d20e.png)


# 押さえるポイント
- グリットシステムの最も外の要素はcontainerクラスを持ったdiv、その中にrowクラスを持ったdiv、その中にcolクラスを持ったdivで構成されている。(下記に簡易図を記載する。)
※この根幹の考えはレスポンシブデザインに対応していてもしていなくても一緒
- 今までcontainerとクラス名をつけていたものをcontainer-fluidとする
※container-fluidはブラウザウインドウの横幅に合わせてcontainer-fluidをクラス名につけたdiv要素も流動的に変化する。
- colクラスを持つdivで表示するコンテンツを記載する。
- colクラスを持つdivのクラス名を指定する際にdiv内の要素を12分割された領域をどのくらい使って表示するかを設定
する。
- 使用領域はクラス名のcolに数字をつけて設定する。
- Bootstrapでは画面の横幅のピクセル数に応じて名前がついている。
※下記に画面幅の早見表を記載する
- この画面幅以上の時は何領域を使って表示する。と言うように設定すると画面の横幅に合わせて表示領域を変化させることが出来る
※画面幅mediumの時に4領域を使用して表示したいときは次のように記載する<div class="col-md-4">

| Extra Small(es) | Small(sm) | Medium(md) | Large(lg) | Extra Large(xl) |  
| :-: | :-: | :-: | :-: | :-: |  
| 544px未満 | 544px以上、768px未満 | 768px以上、992px未満 | 992px以上、1200px未満 | 1200px以上 |

# グリッドシステムの書き方の例
### 画面幅がMedium(md)以上のときに、12分割された内の8領域と4領域を使用してテキストを表示する。
- 下記にHTMLファイルの内容を記載する。

``` html
<div class="container-fluid">
  <div class="row">
    <div class="col-md-8">
      <h1>おはよう</h1>
    </div>
    <div class="col-md-4">
      <h1>こんにちは</h1>
    </div>
  </div>
</div>
```

### 画面幅がLarge(lg)以上のときに、12分割された内の1領域と1領域と10領域を使用してテキストを表示する。
- 下記にHTMLファイルの内容を記載する

``` html
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-1">
      <h1>おはよう</h1>
    </div>
    <div class="col-lg-1">
      <h1>こんにちは</h1>
    </div>
    <div class="col-lg-10">
      <h1>こんばんは</h1>
    </div>
  </div>
</div>
```



### 画面幅がExtra Small(xs)以上のときに、12分割された内の12領域と12領域と12領域を使用してテキストを表示し、画面幅がLarge(lg)以上のときに、12分割された内の4領域と4領域と4領域を使用してテキストを表示する。
※一つのrowに合計の領域が12を超えると自動的に改行が行われるため12領域を使用する設定にした。
- 下記にHTMLファイルの内容を記載する

``` html
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-lg-4">
      <h1>おはよう</h1>
    </div>
    <div class="col-xs-12 col-lg-4">
      <h1>こんにちは</h1>
    </div>
    <div class="col-xs-12 col-lg-4">
      <h1>こんばんは</h1>
    </div>
  </div>
</div>
```

# 初心者にもおすすめのサイト
※初心者にもわかりやすく説明されているサイトを発見しましたのでリンクを張っておきます。  
※自分の記事なんかよりずっと見やすくて丁寧な説明でした。。。すいません。。。
[Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする](http://websae.net/twitter-bootstrap-grid-system-21060224/)
48日目。pandasで10万×１万のCSVをマージしたら簡単・早くて驚きました！

データAとデータBの穴あきをできるかぎり埋めたい。
データAが10万件。データBが1万件。CSVです。

Excelで開いてギリいけるかなと思ったのですがとても遅い。
Pythonでforループを二重に回してもそこそこかかる。

・・・そこでpandasを使ってみました。

###インストール
毎度おなじみpipさんです。

```
pip install pandas
```

###pandasでマージしてみる。
CSVをそれぞれデータフレームに読み込んで、インデックスでマージ。data01.csvに合わせたかったので、左結合にしてみました。

```test.py
# 一般的にpandasはpdと名前を付けてimportするお約束らしい。
import pandas as pd

#csvを読み込む。headerが日本語だとうまくマージできなかったので-1に。なかった事になるらしい。
df1 = pd.read_csv('data01.csv',header=-1)
df2 = pd.read_csv('data02.csv',header=-1)

#csvにタイトルをつける。
df1.columns=['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X']
df2.columns=['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']

#マージする。
# pd.merge(データ１、データ２、左結合、結合キーをそれぞれ指定
df3 = pd.merge(df1,df2,how='left',left_on='A')

#一画面におさまるよう中略して表示される。すごい。
print(df3)

#CSVで保存
df3.to_csv('data03.csv')
```

###えーっ、たったこれだけ！？
ここまですっごく苦労したのに、最終的にこれだけになりました。
こんなにちょっとのコードで済むなんて・・・！！！


###一瞬でできた！！！
いやはや驚きました。数秒です。
一体どうなっているんだ。驚きの速さです。

###しかしデータを揃えるのがめんどくさい。
数値とそうじゃないの、空白、スペース、全角半角、文字化け、データクリーニングがえらい大変でした。ちょっと違うとすぐエラーです。揃ってしまえば一瞬なのですが、気難しい印象でした。

###またpandasする？
正直、もっといい方法がないかなーと思っています。グラフを書いたり、分析したり、本来そっちのツールなんですよね。でもこの軽さはすごい。

###参考にさせていただいたサイト
PythonとPandasがまとまっていてとても助かりました。
[note\.nkmk\.me Top Python pandas pandas](https://note.nkmk.me/pandas/)

クエリの組み方がさっぱりわからなかったのですが、この対応表のおかげでなんとなくつかめました。
[SQL と Pandas の対応表](https://qiita.com/takaiyuk/items/5232442eaeb01299b265)

Pandasがなんだか、全体像をつかめました。
[データ分析のライブラリ！Pandasとは【初心者向け】](https://techacademy.jp/magazine/17697)

Pandasの動かし方をざっくり。いろいろやってみましたが、結局全件マージで片付いてしまった。。。
[データ分析で頻出のPandas基本操作](https://qiita.com/ysdyt/items/9ccca82fc5b504e7913a)

分かりやすかったです！
[Pandasを使ったデータ操作の基本](http://cocodrips.hateblo.jp/entry/2017/07/30/185430)

Pandas説明書。
きれいなグラフを作ったり、ビッグデータを解析できるようになるらしい。
[Python Data Analysis Library](https://pandas.pydata.org/)

（所要時間　6時間）
Go言語でCSVファイルにレコードを追加する

[encording/csv](https://golang.org/pkg/encoding/csv/) パッケージを使うことで、Goで CSVを簡単に扱うことができます。

レコード追加方法でつまづいたのでメモ。

```go:main.go
package main

import (
	"encoding/csv"
	"log"
	"os"
)

func main() {
    // ファイルがある場合はレコード追加、ない場合はファイル作成される
	file, err := os.OpenFile("/tmp/export.csv", os.O_WRONLY|os.O_CREATE|os.O_APPEND, 0644)
	if err != nil {
		log.Fatal("Error:", err)
	}
	defer file.Close()

    // 追加するレコードはstringのスライスで定義
	record := []string{"hoge", "fuga"}
	writer := csv.NewWriter(file)
	err = writer.Write(record)
	if err != nil {
		log.Fatal("Error:", err)
	}
	writer.Flush()
}

```

```:export.csv(上記のプログラムを2回実行した結果)
hoge,fuga
hoge,fuga

```
Laravel を composer からインストールできない

# 概要
```composer global require laravel/installer```
このURL：[https://laravel.com/docs/5.8](https://laravel.com/docs/5.8)からのコピペでインストールしようとしたが、エラーで弾かれた。

#環境
- CentOS7
- php7.2

# エラー内容

```
$ composer global require laravel/installer

Changed current directory to /home/ec2-user/.config/composer
Using version ^2.1 for laravel/installer
./composer.json has been created
Loading composer repositories with package information
Updating dependencies (including require-dev)
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - Installation request for laravel/installer ^2.1 -> satisfiable by laravel/installer[v2.1.0].
    - laravel/installer v2.1.0 requires ext-zip * -> the requested PHP extension zip is missing from your system.

  To enable extensions, verify that they are enabled in your .ini files:
    - /etc/opt/remi/php72/php.ini
    - /etc/opt/remi/php72/php.d/20-bz2.ini
    - /etc/opt/remi/php72/php.d/20-calendar.ini
    - /etc/opt/remi/php72/php.d/20-ctype.ini
    - /etc/opt/remi/php72/php.d/20-curl.ini
    - /etc/opt/remi/php72/php.d/20-exif.ini
    - /etc/opt/remi/php72/php.d/20-fileinfo.ini
    - /etc/opt/remi/php72/php.d/20-ftp.ini
    - /etc/opt/remi/php72/php.d/20-gettext.ini
    - /etc/opt/remi/php72/php.d/20-iconv.ini
    - /etc/opt/remi/php72/php.d/20-json.ini
    - /etc/opt/remi/php72/php.d/20-phar.ini
    - /etc/opt/remi/php72/php.d/20-sockets.ini
    - /etc/opt/remi/php72/php.d/20-tokenizer.ini
  You can also run `php --ini` inside terminal to see which files are used by PHP in CLI mode.

Installation failed, deleting ./composer.json.
```

# 原因
- phpのZIPが利用出来ないためのエラーだった
- ```yum install php-zip``` が出来なかった

# 解決方法
試しに以下のコードを打ったところ［php72-php-pecl-zip］がインストールされた
```yum install php72-php-zip```

このあとに、```composer global require laravel/installer``` を実行したら普通にコマンドが通りました。
★php-zip という古い記事にかかれたものは、入りませんでした。
paddingやmarginの値設定の順番の覚え方

## paddingやmarginの値設定の順番の覚え方
覚え方は**時計回り**です。
例えば`padding: 1px 2px 3px 4px;`とした場合、上右下左の順に、1,2,3,4pxのpaddingが設定されます。


この記事が参考になれば幸いです。
## 終わりに
私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
        [無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話](https://note.com/kenroda/n/n814347fbdcd7)
laravelでchar型等のカラム属性を変更する

少しハマったのでメモ

laravelのマイグレーションでchar型等のカラム属性をchangeメソッドで変更する事が出来ない。

Laravel 5.8 データベース：マイグレーション
https://readouble.com/laravel/5.8/ja/migrations.html
上記より抜粋↓
Note: 以降のカラムタイプのみ変更可能です：bigInteger、binary、boolean、date、dateTime、dateTimeTz、decimal、integer、json、longText、mediumText、smallInteger、string、text、time、unsignedBigInteger、unsignedInteger and unsignedSmallInteger

そのため、上記以外のカラムタイプの場合、下記のようにSQLを直接実行すればカラム属性を変更する事ができます。


```
        public function up()
        {
            DB::statement("
                ALTER TABLE <テーブル名>
                MODIFY <カラム名> <カラム属性>
            ");
        }
```
初めてGitHubでPullRequest投げてハマったところ

## ことの始まり
TypeScriptを勉強しており、フューチャーアーキテクト様が公開している教育用コンテンツを使用。
タイポを見つけたので（本当に小さいですが）、Pull Requetを行うことに。
Pull Requestを投げることが初めてで若干手間取ったのでメモ。

## 手順
### 1. PullRequestを投げたいリポジトリで「fork」ボタンを押下する
いきなり、元リポジトリをクローンするのではなく、自分のGitHub上のリポジトリへフォークする。

### 2. フォークした自分のリポジトリをローカルへクローンする
No.1でフォークした自分のGitHub上のリポジトリをローカルへクローンする。

### 3. 修正用のブランチを切る
ブランチを切ること。いきなりマスタで編集しないようにする。

### 4. ローカルで修正し、コミット、プッシュを行う
修正を行い、自分のGitHub上のリポジトリへプッシュ。

### 5. フォークしたリポジトリで「Compare＆pull request」を押下する
フォーク元のリポジトリへGitHub上で移動し、「Compare＆pull request」ポタンを押下する。
最初はやり方がわからず、ひたすら自分のリポジトリの画面からプルリクのボタンを探してた。。。

## 感想
普段の業務では開発者が少ないこともあり、Pull Requestを投げたことがなかったので練習になりました。
末筆ですが、素敵な教育用コンテンツを公開してくださったフューチャーアーキテクト様に感謝を。
PyTorchで勾配法のイメージをつかむ

# はじめに
この記事は[古川研究室 Workout calendar](https://qiita.com/flab5420/private/aee38a24be700d146817) 9日目の記事です. 本記事は古川研究室の学生が学習の一環として書いたものです．

Workout_calendar盛り上がって嬉しいです。今週の金曜にいよいよ新入生の投稿が始まります!

# 本記事の目的

Pytorchの自動微分機能を使って, 勾配法を実現します!!

[これを実装します]
![anim_roll.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154814/c0d217ff-7bec-b8e1-9a46-e66c5ed7958e.gif)

# 最急降下法

勾配法として最も単純な方法である。

勾配法は $n$次ベクトル $\mathbf{x} = (x_1,x_2,...,x_n)$を引数とする写像 $f(\mathbf{x})$ の極値を求める手法の一つである.

反復法, 学習を繰り返して $\mathbf{x}$を更新する.
$t$時刻目の学習の解が$\mathbf{x}^{(t)}$であるとき, 最急降下法では次のように値を更新する.

```math
\begin{align}
\mathbf{x}^{(t+1)} &= \mathbf{x}^{(t)}-\eta \operatorname{grad} f\left(\mathbf{x}^{(t)}\right) \\ 
\\

 &=  \mathbf{x}^{(t)}-\eta \left[\begin{array}{c}{\frac{\partial f\left(\mathbf{x}^{(t)}\right)}{\partial x_{1}^{(t)}}} \\ {\frac{\partial f\left(\mathbf{x}^{(t)}\right)}{\partial x_{2}^{(t)}}} \\ {\frac{\partial f\left(\mathbf{x}^{(t)}\right)}{\partial x_{2}^{(k)}}} \\ ・\\ {\frac{\partial f\left(\mathbf{x}^{(t)}\right)}{\partial x_{n}^{(k)}}}\end{array}\right]

\end{align}
```

ここで$\eta$はステップ幅である. ステップ幅が大きくなると更新量は大きくなるが発散の恐れがある. 逆にステップ幅が小さすぎると学習は遅れてしまう.

## 実装
今回使う写像(関数): $$ E(\mathbf{x}) = x_1^2 + x_2^2$$



```python:gradient_descent.py

n_epoch = 200 # 学習回数
eta = 0.01 # ステップ幅

x = torch.tensor([2.0,2.0],requires_grad=True) # (x_1, x_2)
A = torch.tensor([[1.0,0.0],[0.0,1.0]])

for epoch in range(n_epoch):
    quad = torch.einsum("i,ij,j",x,A,x) # f
    quad.backward() 
    with torch.no_grad(): 
        x = x - eta * x.grad
    x.requires_grad = True 

```

### 実装メモ
$\mathbf{x}$: optionにrequires_grad = Trueが必要.
$quad$ : 偏導関数はスカラー値である必要がある.


## 結果
青のマットは今回の関数の形で, 黒の $x$ は $t$ 時刻目の更新する点です. 黄色の点線は学習の軌跡になっています. 横軸(x,y)が$\mathbf{x}$の成分で, 縦軸(z)が関数の値になっています.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154814/3908384e-563f-8630-0fbd-f5f77a5882c7.png)

$(x_1, x_2) = (2.0, 2.0)$ を初期値として, 関数の最小値に向かっていることが確認できました.
![anim_roll.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154814/9dbbce41-da03-0984-2099-a4ef92980c68.gif)

## まとめ
次はこれと前回あげた Nadaraya-Watson推定 の実装を組み合わせて, 自分の研究の基盤技術を実現しようと思います.

#### 参考ページ
[Wiki](https://ja.wikipedia.org/wiki/%E6%9C%80%E6%80%A5%E9%99%8D%E4%B8%8B%E6%B3%95)

#### ソースコード
今回も[Github](https://github.com/kpasso1015/qiita/blob/master/gradient_method_pytorch.ipynb)と[Colab](https://colab.research.google.com/drive/1K5nBVOBkQXx4950ctCVeRm-bqgBYNWKZ)にソースコードあげております.
ビューワーありで動かしたい方はよかったら参考にしてください.

#### Special Thanks
コード提供: [Watanabe](https://qiita.com/ae14watanabe/items/ef5689d40a0fbee957ea) さん
【初心者】React&Redux入門を理解するための超入門/環境構築編

半月ほどReactとReduxの勉強をしています。
理解がなかなか難しいので、勉強したこと、自分なりのポイントをアウトプットしていきます。

Reactをブラウザに表示するまでの過程が難しかったのでまとめます。

#React at CodePen を用いる

これが一番簡単です。
環境構築なしで、すぐにReactを試せます。

#create-react-app

``$ cd desktop``
``$ create-react-app mirai``
デスクトップに``mirai``フォルダができる。
``$ cd mirai``
``$ npm start``
で、ブラウザに表示できる。(ロゴがクルクル)

しかし、このままではコードがややこしい。
自分でいじろうとした時に、どこをいじれば良いか分からない。
そこで、コードをスッキリさせる。

```js:mirai/src/App.js
import React from 'react';

function App() {
  return (
          <div>
            Learn React
          </div>
  );
}

export default App;
```

```js:mirai/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();
```

```html:mirai/public/index.html
<title>React App</title>

<div id="root"></div>
```

こうすると、ブラウザには、Learn Reactと表示されるだけになる。
コードがスッキリして、どこをいじればいいか分かりやすい。

#HTMLファイル1枚

実はReactは、HTMLファイル1枚でブラウザ表示ができる。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
   
    <div id="root"></div>

    <script type="text/babel">
    let dom = document.querySelector('#root');

    let el = (
        <div>
            <h1>Learn React</1>
        </div>
    );

     ReactDOM.render(el, dom);
    </script>
</body>
</html>
```
ブラウザには、Learn Reactと表示される。
あとは、scriptタグ内をいじっていけば良い。

#まとめ
Reactを始める環境はこれで整います。
[【初心者】React&Redux入門を理解するための超入門/jsの基礎編](https://qiita.com/tagawahirotaka/items/3a2f38afde66e6c83460)も書いたのでぜひ見てください！
Windows 10のキーボードショートカットを改めて確認してみよう

## キーボードショートカットを活用しよう！

開発ツールの都合上、メインの開発環境は長いことWindowsです。Windowsのキーボードショートカットについては知識を蓄えてきたつもりでしたが、**[Microsoft公式のキーボードショートカット一覧](https://support.microsoft.com/ja-jp/help/12445/windows-keyboard-shortcuts)**を改めて確認したところ「あーよく使うわー」とか「そんなショートカットあったん！？」とか色々感じて面白かったので、纏めてみようと思います。

> 確認環境：
> Windows 10 Pro 1903
> 参考：
> Windows のキーボード ショートカット
> https://support.microsoft.com/ja-jp/help/12445/windows-keyboard-shortcuts
> 上記Microsoft記事から、多用しているもの・気になったもの・知らなかったものを抽出
>> 以下一覧の習熟度は「◎：完璧にマスターしてる！」「〇：まあまあ身についてる」「△：使ったことはあるけど…」「×：知らんかった…」を指します。

### コピー、貼り付け、その他の一般的なキーボード ショートカット

|押すキー|目的|コメント|習<br>熟<br>度|
|:--|:--|:--|:-:|
|<kbd>Ctrl</kbd>+<kbd>Esc</kbd>|スタート メニューを開く。|<kbd>Win</kbd>キーないキーボードだと有用？|×|
|<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Esc</kbd>|タスク マネージャーを開く。|タスクキルしてもよし、<br>パフォーマンスを眺めてもよし~~(現実逃避)~~|◎|
|<kbd>Shift</kbd>+<kbd>Del</kbd>|選択した項目をごみ箱に移動せずに削除する。|ゴミ箱使わない派なので多用|◎|

### Windows ロゴ キーのキーボード ショートカット

|押すキー|目的|コメント|習<br>熟<br>度|
|:--|:--|:--|:-:|
|<kbd>Win</kbd>+<kbd>A</kbd>|アクション センターを開く。|<kbd>A</kbd>はActionのAと覚えよう|〇|
|<kbd>Win</kbd>+<kbd>B</kbd>|通知領域にフォーカスを設定する。|通知領域＝タスクトレイの意|△|
|<kbd>Win</kbd>+<kbd>D</kbd>|デスクトップを表示または非表示にする。|ウィンドウ開きすぎてスッキリしたいときに|◎|
|<kbd>Win</kbd>+<kbd>Alt</kbd>+<kbd>D</kbd>|デスクトップで日付と時刻を表示または非表示にする。|腕時計の時間を咄嗟に合わせるときとかいいかも|×|
|<kbd>Win</kbd>+<kbd>I</kbd>|[設定] を開く。|最近やっとコンパネから脱却できてきた|◎|
|<kbd>Win</kbd>+<kbd>L</kbd>|PC をロックする。|Win10からでしょうか？もしやWin8も？|△|
|<kbd>Win</kbd>+<kbd>P</kbd>|プレゼンテーション表示モードを選択する。|マルチディスプレイ環境で効果を発揮|〇|
|<kbd>Win</kbd>+<kbd>R</kbd>|[ファイル名を指定して実行] ダイアログ ボックスを開く。|<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>Enter</kbd>で実行すると<br>管理者権限になって便利|◎|
|<kbd>Win</kbd>+<kbd>Shift</kbd>+<kbd>S</kbd>|画面の一部のスクリーン ショットを撮影する。 |マニュアル作成のお供にどうぞ！|◎|
|<kbd>Win</kbd>+<kbd>X</kbd>|[クイック リンク] メニューを開く。|地味に便利なメニューがさっと表示できる|◎|
|<kbd>Win</kbd>+<kbd>/</kbd>|IME の再変換を開始する。|全然知らなかった、便利！|×|

### エクスプローラーのキーボード ショートカット

|押すキー|目的|コメント|習<br>熟<br>度|
|:--|:--|:--|:-:|
|<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>N</kbd>|新しいフォルダーを作成する。|これ必須|◎|
|<kbd>Alt</kbd>+<kbd>P</kbd>|プレビュー パネルを表示する。|ちょこっとプレビューしたいときに<br>これからは使いたいと思う|×|
|<kbd>Alt</kbd>+<kbd>Enter</kbd>|選択した項目のプロパティを表示する。|エクスプローラでファイルの<br>プロパティを開くときによく使う|◎|

## Windows 10は<kbd>Win</kbd>+<kbd>〇〇</kbd>を使いこなすといい感じ？

Windows 10になってから、<kbd>Win</kbd>+<kbd>〇〇</kbd>というショートカットを駆使するようになった気がします。1903辺りから<kbd>Win</kbd>+<kbd>Shift</kbd>+<kbd>S</kbd>のスクショ機能も強化されているので使わないと損です！
今回一覧には取り上げませんでしたが、仮想デスクトップのキーボード ショートカットも使いこなせるようになりたいなぁ…と思う今日この頃です。


Windows 10使いの皆さん、今一度**[キーボードショートカット](https://support.microsoft.com/ja-jp/help/12445/windows-keyboard-shortcuts)**確認してみてはいかがでしょうか。
Gatsby Starter Library から Netlify CMS 始めた時に {サイトのURL}/admin を開いても何も出ない時に確認すること

地味に30分くらい彷徨ったのでメモ。

## TL;DR

- `/static` ディレクトリに `admin` ディレクトリ作って `index.html` と `config.yml` 作る
- 参考: https://www.netlifycms.org/docs/add-to-your-site/
- config.yml のドキュメント: https://www.netlifycms.org/docs/configuration-options/

## 本文

Gatsby と Netlify CMS の便利なところはやはり気楽に始められるところです。

Gatsby の Starter のページから `Try this starter` を押せば勝手にレポジトリを作ってデプロイまでやってくれて最高のスタートを切れます。

![gatsby-starter-typescript-power-blog__Gatsby_Starter___GatsbyJS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150569/ce2cc932-7ad6-09b7-1ca3-5124e0e86500.png)

今回私は次の Starter を利用しました。
https://www.gatsbyjs.org/starters/mhadaily/gatsby-starter-typescript-power-blog/

そして下記の記事を参考にして設定を進めまして「CMSログインユーザの追加」まで進めて `{サイトのURL}/admin` を開いたところ、 Starter の 404 が表示されるだけで Admin 用の画面が表示されませんでした。
https://qiita.com/jshimazu/items/e102cde5124609384d0c

結論から言うと、今回私が今回選んだ Starter に Netlify CMS 用の設定がなかっただけでした。
冒頭でも述べた通り `/static` ディレクトリに `admin`ディレクトリ、その中に HTML と config ファイルが必要です。

こんな感じ

```
- static
 |- admin
   |- index.html
   |- config.yml
```

それぞれのファイル中身はこちらを参考にすればいいですが
https://www.netlifycms.org/docs/add-to-your-site/

私は次のように書きました

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Content Manager</title>
  </head>
  <body>
    <!-- Include the script that builds the page and powers Netlify CMS -->
    <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
  </body>
</html>
```

```yml:config.yml
backend:
  name: git-gateway
  branch: master

publish_mode: editorial_workflow

media_folder: static/images/uploads
public_folder: /images/uploads

collections:
  - name: 'blog'
    label: 'Blog'
    folder: 'blog'
    create: true
    slug: 'test/{{year}}-{{month}}-{{day}}_{{title}}_{{some_other_field}}'
    fields:
      - { label: 'Template Key', name: 'templateKey', widget: 'hidden', default: 'blog-post' }
      - { label: 'Slug', name: 'slug', widget: 'string' }
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'Publish Date', name: 'date', widget: 'datetime' }
      - { label: 'Body', name: 'body', widget: 'markdown' }
      - { label: 'Tags', name: 'tags', widget: 'list' }
```

いやーしょうもない詰まり方した。
xcodeをアップデートしようとしたら"block-compressed payload operation failed"のerrorが出たときの対処法をメモ

結論 : xcodeのxipをダウンロードして、APFSでフォーマットした外付けHDD上で解凍し、Xcode.appを置き換える

xcodeをApple Storeからアップデートしようとすると、容量が足りないとか言われる。50GBくらいの空き容量が必要っぽい? (Xcode 10.3)

なので、Apple Devからxcodeのxipをダウンロードして、外付けHDDで解凍しようとするももよくわからない現象に遭遇。

まず、普通に解凍しようとしたら`block-compressed payload operation failed`が出る。

次に、`xip -x xxx.xip`で解凍し、成功するものの何故か外付けHDDを50GB食ってるのでちょっとおかしいなと思う。

出てきた`Xcode.app`を`/Application`フォルダにコピーしようとするも、一向に進まない。

これはコピーしようとした.appが何か変だと思い、一旦、削除しようとするが、なぜか削除できない。これも進まない。

よって、exfatでフォーマットしていた外付けHDDをAPFSでフォーマットし、xipを開いたら、普通に解凍できた。
Rails 5.1.6 デフォルトのGemfileを調べる

#作成時にデフォルトで入っているGemfile
```:Gemfile
source 'https://rubygems.org'

git_source(:github) do |repo_name|
  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
    "https://github.com/#{repo_name}.git"
end

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.1.6'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use Puma as the app server
gem 'puma', '~> 3.7'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '~> 2.13'
  gem 'selenium-webdriver'
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
  gem 'web-console', '>= 3.3.0'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
```

#各Gemfileの内容
###一般
rails : rails一般
sqlite3 : db管理SQLite3 (local環境で使う herokuではpostgreSQL)
puma : アプリケーションサーバー
sass-rails : css (railsでまとめた表現ができる)
uglifier : JavaScript 改行や空白を削除して軽量化
(#)therubyracer : JavaScript mini_racerのほうが良い？？？
coffee-rails : CoffeeScriptをRailsで使用 (CofferScripはJavaScriptを簡潔にした言語)
turbolinks : ブラウザのページ移動を高速化 (ページ遷移で変化のあるhtml要素のみを変更する)

jbuilder : 入力データをJSON形式で出力
(#)redis : セッションを保存するときに使用？？？
bcrypt : BCryptを用いてパスワードを暗号化
(#)capistrano-rails : 複数のサーバーへのデプロイを自動化

###group :development, :test
byebug : コードの途中に書けばそこで止まる(byebug unless ~)
capybara : rubyのウェブアプリケーションテスト
selenium-webdriver : 自動でブラウザを動かしテストする

###group :development
web-console : ブラウザ上からコンソールを操作するライブラリ

###windows用
tzinfo-data : タイムゾーンを扱うライブラリ (windowsではこれを含める必要がある)

#参照
[https://qiita.com/kkenya/items/e9eba0021b1cf5efca2b](https://qiita.com/kkenya/items/e9eba0021b1cf5efca2b)
PosenetでFedexランクTOP50選手のインパクト時画像の角度を算出してみた

画像や動画から人間の姿勢判定を行う人工知能「[Posenet](https://github.com/tensorflow/tfjs-models/tree/master/posenet)」から得られるデータをスポーツ・ゴルフに活用しよう、という試みを行なっています。

という訳で、Posenetで得られる座標から、米国PGAツアー・FedexランキングTOP50選手のインパクト画像を手作業でかき集め、選手によって差があるのか、を検証してみました。
今回はJavascript情報が無いですが、Posensetは「[こちら](https://github.com/tensorflow/tfjs-models/tree/master/posenet)」のExample usage の通りで、簡単に動作させることが出来ます。

## ゴルフスイングの特徴を把握しようと思ったら
画像内の特徴点座標は、その画像本体の幅や高さがまちまちで、また人物が写っている箇所も異なるのため、単なるx,y座標点比較では相違・類似度の計算は出来ない、と考えました。
よって、多少のアングルのズレは仕方ない、として、特徴点３点がなす角度を算出し、その平均値をトップレベル選手のスイングの特徴、と定義付けることにします。（少し無理矢理感があります・・）

## 特徴点3点、3箇所
1. 「鼻 - 胸 - 腰中心」の角度：122.53度
2. 「鼻 - 腰 - くるぶし」の角度：119.71度
3. 「鼻 - 胸 - 右手首」の角度：68.01度
という感じです。

![スクリーンショット 2019-07-24 21.13.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74852/e20fa76f-9da5-fac1-1949-4fed2aae253a.png)
![スクリーンショット 2019-07-24 21.11.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74852/8db5dc64-570e-450d-e154-dfe8b8419d52.png)

これを50選手分機械処理を行い、平均は以下の通りとなりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74852/3a7f8779-ac34-aca5-1de2-43ba1a5320c0.png)
標準偏差は１桁なので、トッププロは、アドレスやバックスイングの癖が強くても、インパクトの瞬間は選手によって大きな誤差は無い、ということでしょうか。

##相関係数を出してみる
EXCELでの作業となりますが、平均値と各選手の値の相関係数「CORREL()」を出してみました。
当然ながら、全て「0.98」以上になりました。（以下10名抜粋）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74852/b9d126e4-ef62-c48b-b0a2-d525167c82d1.png)
平均値と各選手の値との相関だけでなく、各選手同士の相関も、0.96以上となりました。

＊相関係数は、−1以上1以下の実数に値をとります。相関係数が正のとき確率変数には正の相関が、負のとき確率変数には負の相関があります。また相関係数が0のとき確率変数は無相関です。

## 一般ゴルファーのインパクト角度と比較してみる。
では、一般ゴルファーとの差はどうでしょうか？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74852/cc878eec-b440-c97f-3d62-65b8ea5e3224.png)
相関係数は、「0.92」。
上記から考えると、0.92は、「PGAツアートップレベル選手のスイング特徴点」からは、かけ離れている、と言っても良さそうです。
角度だけを見ると、首だけが下がった立ちんぼ状態、でしょうか。

##今後
今回はまだ簡易な状態ですが、今後はTOP100〜もっと多くのトップレベル画像を収集＆角度測定箇所を増やして、検証とモデル作成を続けたいと思います。
「教師なし」学習で分類しても良いかも。

データ収集やデータを用いて上達理論・勝利論のモデル構築に協力頂けるプロゴルファーやトップレベルアマチュアを探しています！一緒に効率の良い練習モデルを作りませんか？
codeigniterでthird_party内のcontrollerを使う

codeigniterのthird partyは便利です。色々なものをモジュール化して分けておける。configとかも、ある程度だいたいできちゃう。

けれどもコントローラーだけはだめ。なぜならコントローラーからthird partyを始めとした大体のクラスを読んじゃっているから。

けれどもthird partyにコントローラーとかを含めちゃって使い回せるようにしたい！！

というわけでやりましょう。

## 事前にファイルをrequireする

まあ、単純です。controllerファイルの先頭でthird party内のコントローラーを読み込んで、それをextendsするだけ。

まず、third party内に読み込むためのコントローラーを作ります。

```php:application/third_party/test/controllers/Welcome_preset.php
defined('BASEPATH') OR exit('No direct script access allowed');
class Welcome_preset extends CI_Controller{
  	public function index(){
           $this->load->view('welcome_message');
	}
}
```

次に、実際に参照されるコントローラー。

```php:application/controllers/Welcome.php
defined('BASEPATH') OR exit('No direct script access allowed');

require_once APPPATH . "third_party/test/controllers/Welcome_preset.php";

class Welcome extends Welcome_preset{
	public function __construct(){
		parent::__construct();
	}
}
```

これで、Welcomeコントローラーに接続される時に実行されるのは継承元のWelcome_presetクラスのものとなります。

そのプロジェクトだけで利用したい関数とかを作りたかったら、参照先のWelcomeに書けばいいし、汎用的なのはpresetに、と取り回ししやすい形で運用できます。いえいいえい。

考え方はシンプルで、

接続
↓
Welcome.php
↓
Welcome_preset.php呼び出し
↓
Welcome_presetを継承したWelcomeクラス実行


という感じ。

ソーシャルログイン系とか、自分の中で作り方が決まっててもうコントローラーまるまるコピペっとしてるやつとか、ちょっとした改変でOKとかってなってるものをこれで一括管理できます。楽ちんまるです。

さらに、Welcome_presetでMY_Contollerを継承するようにしておけば、

MY_Controller → Welcome_preset → Welcomeと、呼び出せるのでこれまた便利です。
Gitのリモートリポジトリに共有フォルダーのパスを指定する

ファイルサーバーの共有フォルダにリモートリポジトリを置く場合、

# ファイルサーバー側
リポジトリ用のフォルダを作成して、ベアリポジトリを生成

```
$ git init --bare myproject.git
```

# クライアント側
## クローンする場合
```
$ git clone //fileserver/repo/myproject.git
```

## 元々あるローカルリポジトリをリモートに接続する場合
```
$ git remote add origin //fileserver/repo/myproject.git
```
resourcesメソッド

本日、Railsのアプリ作成で便利なメソッドがあったので備忘録として。

_resourcesメソッド_
```RESTfulな設計を実現するために開発者自身でHTTPメソッドとURLとアクションの紐付けを行うのは少々手間がかかります。
そこでresourcesメソッドの登場です。resourcesメソッドは上記の手間を省き、自動でRESTfulなルート定義を生成します。```

routes.rbに```resources :name(nameはリソース名：usersとか)```と記述する事で
今までたくさん書いていた複数のルーティングを一括取得する事ができます。

参考
https://www.sejuku.net/blog/27728#resources
macの環境変数のPATH

macの環境変数のPATHがどんなもので、どのように設定するか

## 環境変数のPATH
**OSにコマンドの実行ファイルまでの絶対パスを教えるための変数**

一例として、ファイル編集コマンド vi について考える
vi コマンドは /usr/bin ディレクトリの中にあるが
もしPATHを設定しないと、毎回シェルで /usr/bin/vi と絶対パスで実行しなければならない

一方、PATHを設定しておけば vi と打つだけで実行できる
**こっちの方が楽だと思う人は、PATHを設定するべき**

## どこで設定できる？
**ホームディレクトリ内の.bash_profileか.bashrcで設定できる**
これらについては拙著[macの.bash_profileと.bashrc](https://qiita.com/youk-h/items/bda36910605b308122d2)を御参照ください

## どうやって？
**上記のファイル内でPATH変数をexportするスクリプトを書く**

下にGolangのコマンドのパスを指定する例を書く
**$PATH:を忘れると面倒臭いことになるので注意**
**これのトラブルシューティングは[こちら](#トラブルシューティングpath忘れた)を参照**

``` bash:.bash_profile
export PATH=$PATH:/usr/local/go/bin
```

これでGolangの実行コマンドに毎回 /usr/local/go/bin をつけなくてよくなる

##設定できたか？
**シェル上で`printenv PATH` と打てば確認できる**

##トラブルシューティング - $PATH:を忘れた場合

これを忘れるとまずい
例えば、冒頭で述べた vi を使う時に /usr/bin/vi と打たなくてはいけない問題が発生する

詳しく書くと長くなるので解決策だけを書く


1. シェルで `/usr/bin/sudo /usr/bin/vi ~/.bash_profile` を実行する
2. 一行目に 
`export PATH=/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin`
と書く
3. `$PATH:`を書き忘れたところに`$PATH:`を追加する
4. シェルで`source ~/.bash_profile`を実行する
勤怠時間の確認用スクリプトforWindows

月末の勤怠書くときに、自分の勤務時間のおおよそが知りたいが為に
書いたスクリプトです。

年月指定ができるように修正しました。
今月いつ休んだんだっけ？
っと悩む事が多い人（自分含む）には、便利だと思います。

**以下2点注意**

*  Eventログの件数が多すぎるとかなり時間がかかりますので実行時はご注意ください。
* 日をまたいで仕事をしているような方には、まったく効果がありません。


```powershell

$targetMonth = (get-date).tostring("yyyyMM")

#今月以外の特定年月が見い場合は次行にある頭の＃を削除して、年月を変更を指定してください
#$targetMonth = "202009"

get-eventlog system |  
  ? {$_.timegenerated.date.tostring("yyyyMM") -eq $targetMonth } |
  sort timegenerated |
  group {$_.timegenerated.date } |
  %{ $_.group | select -first 1 -last 1 | group | select group } |
  %{ write-host ("{0:yyyy/MM/dd} : {0:HH:mm:ss} - {1:HH:mm:ss}" -F $_.group[0].timegenerated,$_.group[1].timegenerated) }

```

このスクリプトのポイントは、

```powershell
group {$_.timegenerated.date } |
  %{ $_.group | select -first 1 -last 1 | group | select group }

```
の部分。

`group {$_.timegenerated.date }`で日ごとのログに集約して
`$_.group | select -first 1 -last 1 `そのグループから、最初と最後を抜き出して
`group | select group`無条件に結果をまとめて、その結果をとる（first,last2行を1行にする）
ディスク使用量の確認用スクリプトforWindows

これは指定フォルダの配下のフォルダがどの程度ディスク領域を圧迫しているか確認する為のPowerShellスクリプトです。

ちなみにサンプルとして、検査フォルダは無難なとこで`"c:\temp"`としてるので、
以下のスクリプトをコピペ実行する場合は、まずはデータが少ないフォルダに変更してから実行してみることをお勧めはしときます。

```powershell

$ErrorActionPreference = "silentlycontinue"  
gci "c:\temp" | where {$_.PSIsContainer} | %{ @{$_.name=([int](gci $_.fullname -recurse | where { $_.Length} | measure Length -Sum).Sum)}  } | %{ $_.GetEnumerator()} | Format-Table @{n="used(byte)";e={"{0:N0}" -f $_.value};a="right"},Name

```

個人的なこのスクリプトのポイントは、

```powershell
[int](gci $_.fullname -recurse | where  { $_.Length} | measure Length -Sum)
```
の部分で、`[int]`にキャストしているところ。対象フォルダにファイルがひとつも無い場合、`gci` が`$null`を返してエラーになるところを
`int`でキャストして`NULL ->0`変換してるところがミソな気がしてます。

ちなみに

```powershell
$ErrorActionPreference = "silentlycontinue"
```

はアクセス権限が無い系のエラーを抑制する為だけなので必須では無いです。
お役に立てれば。
Google Apps Scriptで作った無料翻訳APIを使う

#はじめに
初心者の備忘録です。
Pythonで翻訳できないかな～、Google Cloud Translationは有料か～、おっgoogletransとかいうモジュールがあるんか～→エラーが出て使えない...
こんな状況だったときに以下の記事を見つけました。
[3 分で作る無料の翻訳 API with Google Apps Script](https://qiita.com/tanabee/items/c79c5c28ba0537112922)

#使い方
まず、記事の通りにウェブアプリケーションとして導入してURLが表示されるまで進めます。

>アクセス方法は、 exec の後に ?text=翻訳したい文字列&source=翻訳前言語&target=翻訳後言語 を指定して　GET リクエストする。

とあります。
試しに"cat"を翻訳してみました。
取得したURLはhttps://script.google.com/macros/s/AKfycbzPH7k0wm5QqP78MtGXt2cOZ_dR0X0G-jMxJODwZvQM3hG89Cct/exec
なので __?text=cat&source=en&target=ja__ を末尾に追加します。

アクセスしてソースを確認すると以下のようになっています。
![cat_trans_html.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/468937/e4f6b118-e438-fa28-7b4e-66a67f1a8a62.jpeg)
"cat"が翻訳されて"ネコ"と表示されました。それ以外はなにもありません。

##翻訳結果を取得する
GETリクエストを送ってページからデータを取得できます。
PythonではRequestsモジュールのrequests.get()でGETリクエストできます。
params=で指定することで取得するデータを決められますが、先ほど開いたページでは翻訳されたテキスト以外何もデータがないのでrequests.get()にURLだけを放り込んで全部取得します。

以下はhogeを受け取って、翻訳結果を返す関数です。

```Python3
from Requests import get
def trans(hoge):
    trans_from = 'en'#翻訳元の言語(英語)
    trans_to = 'ja'  #翻訳先の言語(日本語)
    trans_url = (
        'https://script.google.com/macros/s/AKfycbzPH7k0wm5QqP78MtGXt2cOZ_dR0X0G-jMxJODwZvQM3hG89Cct/exec'
         + '?text=' + hoge + '&source=' + trans_from + '&target=' + trans_to
    )
    res = get(trans_url)
    translated_hoge = res.text
    return translated_hoge
```
returnの上2行でGETリクエストを送って、翻訳結果を取得しています。

```Python3
    res = get(trans_url)
    print("res: {}" .format(res))                    #res: <Response [200]>
    translated_hoge = res.text
    print("res.text: {}" .foramt(translated_hoge))   #res.text: 翻訳された結果
```
getの戻り値はレスポンス内容が格納されたオブジェクトです。resを出力するとResponse [200]となります。
textという属性にページのhtmlが格納されているので、翻訳結果が欲しい場合はres.textとしなければなりません。

#参考
1. [3 分で作る無料の翻訳 API with Google Apps Script](https://qiita.com/tanabee/items/c79c5c28ba0537112922)
2. [requestsの使い方 webサイトのデータを取得する](https://www.python.ambitious-engineer.com/archives/974#i-3)
Hackerrankにおける入力テンプレ

#イントロ
hackerrankを解くとき必ずと言って数字や文字列を受け取ります。
慣れてしまえば使いこなせますが、最初はよくわからないと思います。
今回はそんな方に僕が使っているテンプレを紹介します。
プログラミング初心者のため間違いや、非効率的なものもありますが、お手柔らかにお願いします。
#1行の文字列、数字
1行の文字列や数字を受け取る場合は単純です。
文字列の場合は
>```
a = input()
```

整数の場合、少数の場合は順に
>```
a = int(input())
a = float(input())
```
とすることで入力を受け取ることができます。

#複数個の入力
例えば

>```
1 2 3 4 5
```

と5つの数字を同時にリストとして受け取りたい場合は

>```
a = list(map(int, input().strip().split()))
print(a)
>>>[1, 2, 3, 4, 5]
```

map は第一引数に関数の種類（ここではint型）、第二引数に対象リスト（ここでは入力された要素）を受け取ります。一つずつ要素を受け取っていきます。
僕のイメージとして後に述べるfor分と似てます。

#複数行の入力
例えばn個の文字列を受け取るとき・・・
n=2の時のフォーマットは

>```
2
hacker
rank
```
となります。
この文字列をリストとして受け取りたい場合は、

>```
n = int(input())
a = []
for _ in range(n):
    a.append(input())
print(a)

>>>["hacker", "rank"]
```

として受け取ることができます。
まずnで受け取る分の個数を受け取ります。
次に文字列を入れる空のリストaを用意します。（a = [])
そしてfor文でn回一つずつ要素を受け取り、同時にappend()でリストaに追加しています。


#まとめ
以上、hackerrankでよく使う入力の受け取り方を紹介しました。

自分の知らない型の入力が来ても
自分で対処できるように頑張りましょう。
TravisCIがTrustyから Xenialになって失敗するので修正

NetCommons3 プロジェクトでTravisCIのビルドがこけまくってたんで、なんとか動くようにしたいなぁと思って色々調査した結果のメモです。

基本的には、ベースがUbuntu Trustyから Xenialにかわったことの影響が大半でした。（最後のcomposerの問題だけ別）

# MySQLが起動してない

mysqlコマンドを実行しようとすると

```
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2)
```
となります。
実際のログ → https://travis-ci.org/NetCommons3/Rooms/jobs/562888110#L252

[The Xenial Build Environment - Travis CI](https://docs.travis-ci.com/user/reference/xenial/#services-disabled-by-default) をみるとサービスがデフォルト停止のようなのでMySQL使うならservicesを.travis.ymlに書いて起動させれば解決。

.travis.ymlに下記を追加

```.travis.yml
services:
  - mysql
```

# MySQL 5.7になってSQL_MODE設定が必要に

[Travis CIでMySQL 5.7 | 気ままにSE](http://disconnect.no-ip.org/wordpress/2019/07/07/travis-ci%E3%81%A7mysql-5-7/)

NetCommons3ではTravisCI用の設定ファイルがあったので、そちらで対応

[SQL_MODE='' · NetCommons3/NetCommons3@07d8d89](https://github.com/NetCommons3/NetCommons3/commit/07d8d8940e02984c862322025b387d5d46afdd83)

# PHP5.4がダメぽ

Trustyをつかえばいけるっぽい

[The Trusty Build Environment - Travis CI](https://docs.travis-ci.com/user/reference/trusty/#using-trusty)

Xenial（ubuntu16)だと PHP5.4, PHP5.5がダメぽなようです。

```.travis.yml
dist: trusty
```

# composer.jsonでrepository指定がダメぽ

[travis-ci repositoriesのgit clone失敗 · Issue #1517 · NetCommons3/NetCommons3](https://github.com/NetCommons3/NetCommons3/issues/1517#issuecomment-508967890)