OmniAICreator/Qiita-1.07M huggingface dataset:
Spling MVC 殴り書き

アノテーション
RequestMapping
コントローラ
"クラスとメソッドに付けられる。
URLのコンテキストからの相対パスと呼ばれるメソッドを
紐づける。
・OR条件や正規表現等も可能。
・GET, POSTの切り替えが可能。"
"パス「root/sub」の場合
 @RequestMapping(""root"")
class X {
    @RequestMapping(""sub"")
     String show() {}
}"


ModelAttribute

"modelクラスへのオブジェクトの設定処理を行う。
例１～３はすべて同じ処理"
"１. 
String show(Model model) {
　Model model.addAttribute(new X())
}
２．
@ModelAttribute
X createX () { return new X();}
３．
String show (@ModelAttribute X x）
"


"Valid
Validated"
コントローラ
"引数に渡されたオブジェクトに対してチェックを行う。
チェック結果は引数のBindingResultに自動的に格納される。"

Controller

"・コンポーネントスキャンの対象となり、DIコンテナに登録される。
    コンテナにはクラス名の1文字目を小文字にした変数名で登録。
・Handlerから呼ばれるクラスとして認識される。(つまりコントローラ)"



PathValiable
コントローラ
"URL文字列の一部を変数として取得する。
一覧で選択したidをURL中に含める時などに使う。"
"URL : http://localhost/user/show/100/200/300

[コントローラ]
@RequestParam(show/{id1}/{id2}/{id3})
String show (@PathValiable(""id1"") id1
                       ,@PathValiable(""id2"") id2
                       ,@PathValiable(""id3"") id3)
それぞれ100, 200, 300が変数に格納される。
上記の場合、変数名id1と(""id1"")が同じなので(""id1"")は省略可"
"RequestMappingに{XXX}の定義がない場合
MissingPathVariableExceptionが発生する。"

RequestParam
コントローラ
Get, Post時の送信パラメタが変数に設定される。
String show(@RequestParam("param") String p)
パラメタがないと下記と同様に例外

RequestHeader
コントローラ
リクエストヘッダーのパラメタが変数に設定される。
String show(@RequestHeader("User-Agent")  String h)
パラメタがないとMissingServletRequestParameterException

返却値
コントローラ
"返却値は下記の通り
String : View名のみ
Model : 連携データ
ModelAndView : View名と連携データ"



セッションについて
コントローラ
"リクエストスコープ 
　　格納場所 : Model
　　生存期間：リクエスト～レスポンス
　　設定方法：Model m.addAttribute()
フラッシュスコープ
　　格納場所：HttpSession
　　生存期間：POST～リダイレクト完了まで
　　設定方法：RedirectAttributes ra.addFlashAttribute()
セッションスコープ
　　格納場所：httpSession
　　生存期間：同一セッションの間 または 明示的に破棄するまで
　　設定方法：Formを使用するコントローラに
                          @SessionAttributes(types = FormClass.class)を付ける。
"



入力チェック
"コントローラ
フォーム"
" @NotNull                          : Nullでないこと
@NotEmpty : Null or 空白でない
@NotBlank : null or 空白 or スペースのみでない
@Size(min=a, max=b) 文字長
@Pattern(regexp="" "") : 正規表現チェック
@Min(value) : 最小値
@Max(value) : 最大値
@Digits(integer=x, fraction=y) : 小数の文字長チェック"
"デフォルトの場合，FormのパラメタがStringの場合,
リクエスト時に空白が設定されてしまうため、
「入力時のみ，５文字以上でエラー」とするには
空白⇒Nullの変換処理が必要。

InitBinderを付けるとHandlerメソッド呼び出し前に呼ばれる。
@InitBinder
public void initBinder(WebDataBinder binder) {
 　binder.registerCustomEditor (String.class, new 　　StringTrimmerEditor(true));  
}

"


出力フォーマット

" @DateTimeFormat
@NumberFormat"

リダイレクト

Form


"例外メッセージ
Neither BindingResult nor plain target object for bean name 'echoForm' available as request attribute"

thymeleaf

デフォルト値
"method=GETのメソッドでフォームを引数にした場合
　　⇒ インスタンスが作成されるが中身は空
フォームをmodelに設定せずviewでフォームを参照した場合
　　⇒例外が発生する。
"


## カウントについて
https://qiita.com/geshi/items/8af9b00f5959d0c512a1

## ポップアップの種類について
http://write-remember.com/program/javascript/dialog/
unserialize関数の第２引数（$options）



$_SESSIONにシリアライズ化したオブジェクトを保存して、別の場所でデシリアライズしていたところ
PhpStormに第２引数を指定しろと言われた。

![UNADJUSTEDNONRAW_thumb_523.jpg](https://qiita-image-store.s3.amazonaws.com/0/364773/d4d83769-6e6f-c691-0662-7470ddf2d71d.jpeg)

https://github.com/kalessil/phpinspectionsea/blob/master/docs/security.md#exploiting-unserialize

PHP7.0からは第２引数でデシリアライズの対象となるクラスを指定できるらしい。

```
$foo = unserialize($_SESSION['foo'], ['allowed_classes' => ['Foo']]);
```
こう書けばおこられない。

オブジェクトインジェクションていう脆弱性の対策みたい。
https://blog.tokumaru.org/2017/09/introduction-to-object-injection.html

#追記
```
class Foo
{
   private $bars= [];

   public function add(Bar $bar)
   {
       $this->bars[] = $bar;
   }
}
```
第２引数で指定したクラスの中で別のクラスを使用している場合には
デシリアライズする際にエラーになった。
まぁそんな気はしてた。

```
$foo = unserialize($_SESSION['foo'], ['allowed_classes' => ['Foo', 'Bar']]);
```
第２引数で同じように指定すれば大丈夫。
Spring boot （殴り書き)

新しい現場でいろいろ覚えることが多すぎて
きれいにまとめてらんないので、メモをコピペ

・SpringBootで不要になる作業
Bean定義
ログ定義
Servletの設定

・SpringBootはサーバへのwarのデプロイが不要！！！
正確にはmainメソッドからtomcatを起動している。
リリース時には実行可能jarとしてjarを実行するだけで
jar内部に組み込まれたアプリケーションサーバが起動する。
とはいえwarファイルとしてデプロイする従来の方法も可能。

@EnableAutoConfiguration
  Spring Boot側でデフォルトで用意されるコンフィグ設定を有効にする。
  (ex. DataSourceAutoConfiguration)

@SpringBootApplication
  @EnableAutoConfiguration
  @Configuration
  @ComponentScan
    を併せ持っている。

依存ライブラリの解決
  spring-boot-starter-webとすると
web関連に必要な
  spring-boot, spring-mvc, tomcat, beanValidation, slf4jなどが
  集約されている。
  バージョンの記載が不要なのは、<parent>の記載で定義されているから。
  
  
@Controllerと@RestControllerは役割は別物
@RestContollerの場合、返却値の文字列に対応するリソースを表示してくれない。
(そのまま文字列が画面表示される。)
Java関係まとめ

## 概要

Java関係のリンク集ページ。

## Spring
* [Spring-Bootネタ](https://qiita.com/k_hoso/items/251804be1178397199d6)
* [Spring-Bootのログの基本（logback）](https://qiita.com/k_hoso/private/e05452277e9e3dc51f13)
* [SpringBootでAPIサーバを起動してテストする時のメモ](https://qiita.com/k_hoso/private/56a728214a4e0a623372)
* [SpringBootでのテストコードの簡単導入（UTの書き方の記憶を呼び覚ましたい人向け）](https://qiita.com/k_hoso/items/cdb4c9dbd3113437e924)

## MyBatis
* [MyBatisネタ](https://qiita.com/k_hoso/items/9531e7d2551ebf5d0ddf)

## データベース
* [MySQLへコネクションプール有り無しでの速度差検証](https://qiita.com/k_hoso/items/6839e217672a60803637)
* [DB接続やらのタイムアウトが設定値通りにタイムアウトしてくれなくて困った話](https://qiita.com/k_hoso/items/4c5ca035db2681c82be3)

## JUnit・単体テスト
* [JUnitネタ](https://qiita.com/k_hoso/items/4338f74f5c8d46c96ea4)
* [Javaの単体テスト時にログ出力の内容を検査する（モック未使用）](https://qiita.com/k_hoso/items/25c389c88f638b116f37)

## 他
* [Linuxでjavaが複数バージョン入っている場合にバージョンを切り替える](https://qiita.com/k_hoso/items/941ce9d3e9312b389dd2)
増えていくRedmine と散らばる私のタスクをなんとかする

OSSのチケット管理と言えば、Redmine ですね
日本語の情報も多く、自分たちでインストールし運用している人も多いのではないでしょうか？

僕の部署でも使っていますし、一緒に仕事をしている他部署でも使っています。
ちなみにGitLabも活用しており、そこでもissueが発行されたりしてます。。。

「あれ、私のタスク参照する場所、多すぎ...」

ということで、カッとなってツールを作りました。

# My Issues

https://github.com/ihgs/my-issues
![myissues.png](https://qiita-image-store.s3.amazonaws.com/0/51316/10002ed3-3f76-78d9-a0ee-8f285baa4fab.png)
自分に割り当てられているタスクの「タイトル」、「プロジェクト名」、「期日（入力されていれば）」のみを表示するシンプルなツールです。タイトルをクリックすると、ツールのタスク詳細ページをブラウザで開きます。
サポートしているツールは、RedmineとGitLabです。

## 使い方

1. [ここ](https://github.com/ihgs/my-issues/releases)からzipをダウンロードして、適当なフォルダに展開
2. アクセス情報(url,token)を記載したコンフィグファイルを作成  
   ユーザーディレクトリ直下に`.myissues.json`というファイル名で置くか、適当な場所におき環境変数`MYISSUES_CONFIG_FILE`に絶対パスで指定するかのどちらかです。コンフィグファイルのサンプルは、[こちら](https://github.com/ihgs/my-issues/blob/master/myissues.json.sample)を参考してください。
3. my-issues(.exe) を実行  
設定情報のファイルのパスが間違っている場合、起動後の画面にエラーが出るので修正してください。
修正後は、アプリを起動しなおしてください。

### 注意

取得するタスク数は、Redmineだとデフォルトの25, GitLabだとデフォルトの20です。
以下のように設定にparamsを追加することで、apiに渡すquery parameter を指定できるので表示を増やすことができますが、自分のタスクが２０以上なら、それはもう他の人に分け与えましょう。

```
    {
        "type": "redmine",
        "name": "Local Redmine",
        "url": "http://localhost:3001",
        "token": "xxxxxxxxxxxx",
        "params": {
            "limit": 50   # gitlabの場合は、per_page
        }
    },
```

# 最後に

自分用にえいやっと作ったので、いまのところエラー処理系も最低限で、テストとか一切ないです。
これからのんびり追加していく予定ですが、うまく動かないときは、[github](https://github.com/ihgs/my-issues/issues)でissue/PRを発行してもらえるとありがたいです。
Office 365 の多要素認証が利用できるアプリを確認

2019年4月7日時点で Office 365 の多要素認証（MFA)の対応状況を調べたので掲載します。

環境は、Windows 10 と iPad でサイン インして iPhone の Microsoft Authenticator で承認しました。Windows 10 は Windows にアカウントを追加しないように、iPad は Microsoft Authenticator からアカウントを都度、削除してから確認しました。

|アプリ|Windows 10|iPad|
|:---|:---------|:---|
|ブラウザーからportal.office.com|MFA|MFA|
|ブラウザーからportal.azure.com|MFA|MFA|
|Word|MFA|MFA|
|Excel|MFA|MFA|
|PowerPoint|MFA|MFA|
|Access|MFA|MFA|
|Outlookのアカウント|パスワード|MFA|
|Skype for Business|パスワード|パスワード|
|OneNote|MFA|MFA|
|Visio Viewer|アプリなし|MFA|
|OneDrice|MFA|MFA|
|Microsoft Teams|MFA|MFA|
|Microsoft Whiteboard|MFA|MFA|
|Sway|MFA|アプリなし|
|To-Do|MFA|MFA|
|Power BI Desktop|MFA|アプリなし|
|Power BI Mobile|MFA|MFA|
|InfoPath 2013|MFA|アプリなし|
|SharePoint Designer 2013|MFA|アプリなし|
|SharePoint|アプリなし|MFA|
|PowerApps|アプリなし|MFA|
|Flow|アプリなし|MFA|
|Office Lens|アプリなし|MFA|
|Yammer|アプリなし|MFA|
|Planner|アプリなし|MFA|
|Delve|アプリなし|MFA|
|Stream|アプリなし|MFA|
|Azure|アプリなし|MFA|
※ Windows の Office 製品は Office 365 ProPlus で確認
※ InfoPath 2013 と ShrePoint Designer 2013 は先進認証を有効にする必要があります。 (参考: [Enable Modern Authentication for Office 2013 on Windows devices](https://docs.microsoft.com/en-us/office365/admin/security-and-compliance/enable-modern-authentication?view=o365-worldwide))

* 凡例
  * MFA : 多要素認証が利用
  * パスワード : パスワードのみ
  * アプリなし : 該当するアプリケーションがない
JupyterLab+ipywidgetsでパラメータのセーブボタンを作る

ipywidgetsのチュートリアル([Using Interact](https://ipywidgets.readthedocs.io/en/stable/examples/Using%20Interact.html))で`interact`関数がでてきます。これを使うとmatplotlibのグラフがダイナミックに操作できて楽しいです。

interactのスライドバーなり何なりで使ったパラメータを保存できたら便利だなと思ったのですが、意外と手間取ったのでメモしておきます。

## 環境
- JupyterLab 0.35.4
- ipywidgets 7.4.2
- Python 3.5.2

※ ipywidgetsをJupyterLabで使うためにはjupyter notebookとは別途でインストールが必要。詳しくは[こちら](https://ipywidgets.readthedocs.io/en/stable/user_install.html)。

```bash
$ jupyter labextension install @jupyter-widgets/jupyterlab-manager
# JupyterLab 0.35.4で使うためにはバージョン指定が必要
# jupyter labextension install @jupyter-widgets/jupyterlab-manager@0.38
```

## コード 

```python:save_params.ipynb
%matplotlib inline
import ipywidgets as widgets
from IPython.display import display
import numpy as np
import matplotlib.pyplot as plt

# セーブボタン
button = widgets.Button(description='save')
display(button)
# ボタンをクリックしたときのprint文のために必要
# JupyterLabを使っていない場合は不要
output = widgets.Output()
display(output)

# 直前に登録したcallback
callback = None

@widgets.interact(
    a=(0, 3, 0.1),
    b=(-3, 3, 0.1)
)
def plot_sin_curve(a=1, b=0):
    x = np.arange(-3, 3, 0.1)
    y = np.sin(a * x + b)
    plt.plot(x, y)
    
    # ボタンをクリックしたときの処理
    # JupyterLabでは通常widgetの出力は表示されないのでキャプチャする
    @output.capture(clear_output=True)
    def save_params(btn):
        content = 'a = {}, b = {}'.format(a, b)
        print('{} is saved!'.format(content))
        # ボタンをクリックするたびにaおよびbの値をparams.txtに追記
        with open('params.txt', mode='a') as f:
            f.write('{}\n'.format(content))
            
    # 直前のcallbackを削除する
    global callback
    if callback is not None:
        button.on_click(callback, remove=True)
    
    # クリックしたときの動作を登録
    button.on_click(save_params)
    callback = save_params
```

ポイントは
1. JupyterLabでは`ipywidgets.Output()`を使って、widgetの出力をキャプチャする必要がある
2. widgetの`on_click`を何回も呼ぶとcallbackが毎回appendされていくので、不要な場合は削除しておく

という2点です。

# 参考文献
- https://github.com/jupyter-widgets/ipywidgets/issues/2068
- https://github.com/jupyter-widgets/ipywidgets/issues/2103
JavaScript+SVGでドットマトリクスを生成する

# インタラクティブなSVGを作ってみたい
JavaScirptと言えばホームページに日付表示するような時代から幾星霜。
いまやフロントでは無双状態の言語で8bitな感じのものを作ってみたいと。
# 前時代的に自前で試したい
ライブラリを使うのが正解だとは思いますが。
# JavaScript + SVGの壁
先人の記事を拝見すると、何やら制限事項が多く道は困難。
インラインSVGならいろいろ操作できるとの記述を見るも、あのソースを貼り付けるのはいやだなぁ。
シンプルなSVGで8bitな感じのをできないものか。
# Let's Generate!
もはや思考は迷走し、SVGでドットマトリクスを生成したら楽しいのではないかとのアイデアに憑りつかれます。
HC-20やPC-1500のグラフィックも再現できちゃう？

```html
    <svg id="matrix" width="220" height="220"></svg>
```

やった！インラインSVGを書き終えました。
要素を生成してappendChildしていきます。


```javascript
        mtx = document.getElementById("matrix");
        dotMatrix = {}

        //色指定
        dotOff = "powderblue";
        dotOn = "darkslategray";

        //マトリクスのドット数
        mtxWidth = 10;
        mtxHeight = 10;

        //ドットのサイズ
        dotWidth = 20;
        dotHeight = 20;

        //マトリクス生成
        for (var x = 0; x <= mtxWidth - 1; x++){
            for (var y = 0; y <= mtxHeight - 1; y++){
                //オブジェクトIDを付ける
                dotName = "dot" + x + ":" + y;

                dot=document.createElementNS('http://www.w3.org/2000/svg','rect');
                dot.setAttribute('id',dotName);
                dot.setAttribute('x',x * (dotWidth + 1));
                dot.setAttribute('y',y * (dotHeight + 1));
                dot.setAttribute('width',dotWidth);
                dot.setAttribute('height',dotHeight);
                dot.setAttribute('stroke','none');
                dot.setAttribute('fill',dotOff);
                dot.setAttribute('rx',2);
                dot.setAttribute('ry',2);
                mtx.appendChild(dot);
                dotMatrix[dotName] = dot;
            }
        }

        //色付きの初期配置
        dx = parseInt(mtxWidth / 2);
        dy = parseInt(mtxHeight / 2);
        dotFill(dx,dy,dotOn);
```

idを 「dot + x座標 + : + y座標」 と自分なりに直感的な命名にしてハッシュにも設定。
dotFill関数に座標と色情報を与えると、要素に色を塗ります。

```javascript

        //ドットを指定色で塗る関数
        function dotFill(dx,dy,para){
            dotName = "dot" + dx + ":" + dy;
            dot = dotMatrix[dotName];
            dot.attributes['fill'].nodeValue = para;
        }

```

あ、関数名はPSETの方がよかったかな・・・。

![matrix.jpg](https://qiita-image-store.s3.amazonaws.com/0/284224/3f05dec2-bd4c-ad22-57b2-7a59550221f1.jpeg)

こんな感じです。

```javascript
        //キーイベント処理
        document.onkeydown = function(e){
            dotFill(dx,dy,dotOff);

            //右矢印
            if ((e.keyCode == 39) && (dx < mtxWidth - 1)){
                dx++;
            }

            //左矢印
            if ((e.keyCode == 37) && (dx > 0)){
                dx--;
            }

            //上矢印
            if ((e.keyCode == 38) && (dy > 0)){
                dy--;
            }

            //下矢印
            if ((e.keyCode == 40) && (dy < mtxHeight - 1)){
                dy++;
            }
            dotFill(dx,dy,dotOn);
        }
```

矢印キーを拾って描いては消し。


正直、このコードではちらつきが厳しく、ドット数が多いと目が疲れます。
ゲームなどに使えるように高速化を目指したいと思います。
はじめてのC++ 【36日目】

#はじめに
stocklistとロベールの順番を逆にすることにした。stockリストの調べる時間がかなり取られるので、先にロベールを終わらせて時間があればstockリストすることにした。

##ロベールのC++
###08-08 バイナリモードでの読み書き
ファイルの書き込みは大まかには2通りある。１つめは、データを文字にして書き込み、人がファイルを読める状態にする方法。２つめは、メモリ上のデータをそのまま書き込む方法。
今回は、２つ目の方法をやる。

```biFile.cpp
#include <iostream>
#include <fstream>
#include <cstdlib>

int main(){
  std::fstream file;
  file.open("binary.txt", std::ios::out | std::ios::binary);
  if(!file){
    return EXIT_FAILURE;
  }

  int n = 0x41424344;

  file.write((const char *)&n, sizeof n);
  //nはint型の4バイト
  //&nは4バイトの先頭アドレス
  //出力結果は DCBA
  file << n;
  //この場合は、nの値は文字列として出力される。
  //0x41424344を10進数に治すと1094861636になる
  //出力結果は 1094861636
}
```

```binary.txt
DCBA1094861636
```
実行結果は環境によって違う。
なぜなら、バイトの並び順が環境によって違うからである。そして、この並び順のことを `バイトオーダ(エンディアン、エンディアンス)`　という。その中でも、バイト数の大きい順と小さい順に分けることができる。大きい順は、 `リトルエンディアン`。小さい順は、 `ビッグエンディアン`　という。

```2bfile.cpp
#include <iostream>
#include <fstream>
#include <cstdlib>

int main(){
  std::fstream file;
  file.open("binary.txt", std::ios::in | std::ios::binary);
  if(!file){
    return EXIT_FAILURE;
  }

  int n;
  file.read((char*)&n, sizeof n);
  //メモリ上にかいてあるものをそのままファイルに書き込んで、そのままメモリ上に戻しているだけなので、
  //バイトオーダがビックでもリトルでも同じで、もとのデータが復元できる。

  std::cout << n << std::endl;
}
```
###08-09　ファイル操作のエラー処理

```hello.txt
Hello! My name is Suponji
```

```4file.cpp
#include <iostream>
#include <fstream>
#include <cstdio>
#include <cstdlib>

const int WIDTH = 16;

int main() {
  std::fstream file;

  file.open("hello.txt", std::ios::in | std::ios::binary);
  if(!file){
    return EXIT_FAILURE;
  }

  do{
    unsigned char buf[WIDTH];

    file.read((char*)buf, sizeof buf);

    for(int i = 0,size = file.gcount(); i < size; ++i) {
      printf("%02X ", buf[i]);//
    }
    std::cout << std::endl;
  }while(! file.eof());

}
```
<img width="287" alt="スクリーンショット 2019-04-07 23.36.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/298612/60372ca9-280d-8528-de17-eddc3fbb980d.png">
このように、ファイルやメモリの中身を確認するために表示させることを「ダンプという」

明日は、このコードの解説とエラーが起きたときの対処法をする。

##キャスト
以前教えていただいたURLがC+11のことがかなり詳しく書いている
###int(c)の正体
`int(c)`　の正体は ` 関数形式の明示的型変換` である。関数みたいな見た目なので、関数形式って呼ぶみたい。そして、これを使えるのは、単純型指定子か、typename指定子である。単純型指定師とは、 `int`　とか `double` とか `char` とか他にもたくさんある。
このようなキャストもあるが、C++で安全にキャストがしたいならとりあえず、 `static_cast` を使っていればOK!
とりあえず、今日はここまで。
#終わりに
春休みが終わるので、規則正しい生活に戻さなければならない。。。
「AWS SNS」の紹介

最近、バイトのタスクをするために、「AWS クラウド」の「AWS SES」を勉強しています。
基本的な設定のコンセプトにとして、この記事を書きます。:sun_with_face:

##概要
1)「AWS SNS」とは？
2)「AWS SNS」はいつを使いますか？
3)設定をする時に何をしなければなりませんか？

##「AWS SES」とは？
Amazon Web Services - Simple Notification Service「AWS SES」は
モジュールやサービスの間にコミュニケーションするように
ウェブのメッセージングシステムです。
「Publisher」、という知らせの送信元のサービス、から、メッセージを送れて、
「Subscriber」、という受信側のサービス、がメッセージをる受けることができます。

##「AWS SNS」はどんなユースケースが良いですか？
####A. コニュニケーションするサービスは
「AWSクラウド」にあります。
全部「AWS」のサービスの関係があるので、
「SNS」につながって設定しやすくなります。

####B.システムの構築は「Service-oriented」です。
「Service-oriented」システムという小さい機能を
分けたアプリはデータを伝えることが複雑です。
しかし、「SNS」はアプリのサービスから別のシステムだから、
サービスごとに繋がることが必要ないし、依存性が少なります。
「SNS」とサービスはを一つずつ繋がるので、
他のサービスの関係を知らなくてもいいです。
それから、アプリの簡単で別々な接続の様子を保つことができます。

####C.ワークフローは「Event-driven」です。
「Event-driven」か「Asynchronous」のシステムはイベントがあったら、
自動の機能を実行する。
例えば：サーバーの問題があったら、「SNS」でアドミンに警報のメールが送られる。
そうして、ヒステムは自動の機能があったら、「SNS」を使ったほうがいいです。

##設定をする時に何をしなければなりませんか？
####A. トピクを作る
「トピク」は起きるメッセージのテーマです。
(Amazonのアカウントにログインして、「AWS Management Console」をアクセスした)
<img width="800" src="https://qiita-image-store.s3.amazonaws.com/0/293083/9f4c78e1-35bc-cf98-32ce-be44fcb000f0.png">
サブスクリプションを作成ったら、トピクを作った時に
「Amazon Resource Name（ARN）」が必要だので、
「ARN」を書き取ったほうがいいです。
<img width="800" src="https://qiita-image-store.s3.amazonaws.com/0/293083/fed9b0fa-8d8f-a05f-1e2d-d933b0b55b81.png">

####B.サブスクリプションを作成する
「サブスクリプション」の設定はテーマに感してイベントが起こった場合に、
メッセージを送られて決めた方法です。
<img width="800" alt="Screen Shot 2019-04-07 at 9.17.55 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/293083/78e472b1-d2e4-3eb5-500a-c316099e3b0c.png">
ざまざまな「エンドポイント」という受信側はタイプの選択肢があります。
「エンドポイントのプロトコル」、というメッセージを受ける方法、を決めたら、
「エンドポイント」のサーバーのURLやEメールを入力しなければならない。
<img width="300" src="https://qiita-image-store.s3.amazonaws.com/0/293083/e74e5464-0fd8-fde2-386a-f9748a723dd3.png">

####C.サブスクリプションを確認する
「エンドポイント」ごとに色々な確認の方法があるです。
例えば、Eメールを選んだら、もらったメールにリンクを押して、
サブスクリプションを確認することができます。
「SNS」のメッセージを受ける前に、確認しなければなりません。
もし、メールを確認したら、IDのフィールドは
「Pending Confirmation」から「APN」の名前になります。
<img width="800" src="https://qiita-image-store.s3.amazonaws.com/0/293083/0b6a9f30-0b1c-3d9b-3d64-aa9ba2a203cb.png">

####D.メッセージの内容を設定する
メッセージの内容を入力することができます。
受けるサービスの準備という自動の読むのコードを書くために、
この設定をはっきりしなければなりません。
<img width="800" src="https://qiita-image-store.s3.amazonaws.com/0/293083/00676101-b651-3895-0b0b-5e125aefeeed.png">

<img width="800" src="https://qiita-image-store.s3.amazonaws.com/0/293083/d2297fc5-1280-17c0-6fb3-d524436bb8cf.png">

もし、全部の設定をできたら、テストをすることができます。

##まとめ
つまり、サービスでコミュニケーションをしたり、
自動の機能をスタートしたりすることがある場合、
「AWS SNS」のサービスは検討に値するサービスです。
「AWS Management Console」で繋がり方が簡単で設定することができます。

##参照:
[AWS ドキューメンテーション](https://docs.aws.amazon.com/ja_jp/sns/latest/dg/welcome.html)
Coursera Deep Learning 4日チャレンジ

Courseraの[Deep Learning Specialization](https://www.coursera.org/specializations/deep-learning)は一月ごとに約5000円かかります。が、最初の一週間だけは体験期間で、無料です。一週間で全部終わらせられれば無料で受講できるのです。タダで授業を受けられるのです！また、半強制的に急かされるため、短期間で知識を身に着けることができるのも魅力。

#Courseraについて
[Coursera](https://www.coursera.org/
)はネット配信の大学講義のようなものです。様々な大学、企業、団体が講義を提供しており、物理、数学、データサイエンス、社会科学、芸術、外国語などなど、様々なジャンルが用意されています。本当にネットの上に大学があるような感じです。自分の好きなタイミングで、また、必要なら何度でも繰り返し講義を受けられるところが普通の大学講義と異なり、良いところです。

#Deep Learning Specialization
この講義は全部で5コースからなり、ニューラルネットワークとは何なのか。なぜ流行っているのか（コース1）。ということから始まり、ニューラルネットワークを鍛えるために必要な知識（コース2, 3）。画像認識に用いられるConvolutional Neural Networks（コース4）や、音声認識、自然言語処理のためのRecurrent Neural Networks, LSTM, Attention（コース5）など、応用的なところまで学ぶことができます。コースでは講義だけでなく課題が与えられので、自分で実装する経験もできます。
全コースを受け終えるころには用語とその背景にある知識が身について、ニューラルネットワークに関する論文も割とすいすい読めるようになります！

#受講のきっかけ
ディープラーニングについて勉強したいと思い、論文や解説してくれているサイトを読むようになったころ、全部読み終えるのにやたら時間がかかってしまったり、全然理解できなかったりしました。なんでだろうと考えると、基本的な用語の意味を全然知らないからだと分かり、ニューラルネットワークの基本についての体系的な知識を付けたくて受講しました。


#前提知識
コースを始める前からできたことを示します。

* pythonの基本的な使い方は、オライリーの[『初めてのpython』](https://www.oreilly.co.jp/books/9784873113937/)ですでに学習していました。

* numpy, pandasの基本的な使い方についても、オライリーの[『pythonによるデータ分析入門』](https://www.oreilly.co.jp/books/9784873116556/)を読みました。

* 機械学習のためのライブラリである、TensorFlow, Kerasの使い方については全く無知でした。

* 英語リスニング力
講義は全て英語で行われるため、英語力があると大助かりです。


#日程
各日の進捗の内訳を示します。

####0日目：コース1の講義動画
無料となる一週間は、Deep Learning Specializationに登録した日から数えた時間です。どうしても一週間以内に終わらせたかったのと、この先どのくらいかかるか見当がつかなかったので、受講時間短縮のためと思い、youtubeに上がっている講義動画のコース1を見てしまいました。ちょっとずるです笑。

####1日目：コース1～コース3途中
コース1~2は内容、課題が比較的簡単なためスピードを上げるポイントです。

####2日目：コース3
コース3は、他コースとは異色で、機械学習そのものではなく、機械学習を使ったプロジェクトを本格的に行う時のコツを教えてくれます。実際に機械学習の開発をされた先生の、豊富な経験に基づいて内容が作られているそうです。参考書ではなかなか習えないとても面白い、役に立つ内容となっています。
ですが、唯一コードを書く課題が一つもなく、全コースの中で最も早く終わらせることができます。

####3日目：コース4
画像認識などに用いられているConvolution Neural Networkについて習えます。
コース4以降からTensor FlowやKerasを用いる課題が多くなるため、時間がかかりました。

####4日目：コース5
音声認識や自然言語処理のためのニューラルネットワークを学習できます。
“Ok, google”のように、ある特定の単語の音声にだけ反応するプログラムを自分で作る体験もできます！


#感想
* 予定の無い日は、朝9時から夜12時くらいまで、食事や風呂などの時間を除いて、一日約11時間取り組みました。先生の説明は分かりやすく、新しいことを知る快感もあって、ずんずん進んでいきました。

* 課題に詰まったり疲れたときは、休憩を取ったり軽く睡眠を取ることで、スッキリした頭で取り組むようにしました。

* 課題でコードを書かされますが、丁寧な誘導がついており楽々と進めることができました。コース1~3は急ぐポイントです。
コース4、5においてはTensorFlowやKerasを扱わないといけなく、使ったことが無かったので、詰まることが多く時間がかかりました。

* 英語のリスニング力が十分あったので、動画を2倍速で見ることができたのが大きかったです。通常速度で講義動画を見ると、コースにつき5時間。全コースで25時間もかかってしまうので、飛ばすことができると12時間位の短縮になります。

* さらに言うと、まずyoutubeで全コースの講義を見てしまってから、コースに登録するのも良いと思います。講義動画、約25時間分の短縮になり、課題のみを一週間で解けばいいことになります。
また、講義だけ受けたい場合はコース登録の必要もないです。すごいですね。完全無料で授業を受けられるのです。コースの登録は、動画視聴に加えて、課題（知識についての質問とプログラム）を解きたいときに必要です。実際に自分でコードを書くことによって内容理解の確認ができるので、登録することをおすすすめします。

#最後に
今回2日目に予定が入ってコース3だけに一日かけてしまいましたが、本当に予定のない日を選べば、三連休で全て終わらせることもできるんじゃないかと思います。ぜひ、3日チャレンジに挑戦してください。
ゲーム用WebSocketサーバにはHerokuではなくAWSを使おう

## ゲーム用WebSocketサーバにはHerokuではなくAWSを使おう
ゲーム用にNodeJSで、expressとwsモジュールを使いWebSocketサーバを立てました。
まずはHerokuでデプロイしたのですが、遅延が0.3秒ほど出てしまいました。
チャットアプリなら許容できるかもしれませんが、僕のゲームではこれは致命的でした。

そこで、AWSでEC2インスタンスを立ててデプロイしたところ、遅延がほぼなくなりました。

WebSocketで遅延を無くしたいときは、Herokuはお勧め出来ません。
自分の場合はEC2が良い結果となりました。
## 終わりに
私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
        [無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話](https://note.com/kenroda/n/n814347fbdcd7)
jQuery-Validation-Engine-rails 導入と日本語化

# フォームを動的なバリデーション
せっかくフォームに入力したのに送信を押してからエラーが出るようだと少しイラっとするものです。
「また入れるのかよ・・・」みたいな感じで。

動的なバリデーションを行えると入力しているときにチェックしてくれるのでUXが向上します。


今回RailsでjQuery-Validation-Engine-rails導入したのですが、その時のメモです。

[jQuery-Validation-Engine-railsの使い方＆まとめ](http://tech-log.hatenablog.jp/entry/2015/12/26/044401)

大体これの通りにやっていればできました。
Gemfile に書いてbundle install

```
gem 'jQuery-Validation-Engine-rails'
```

```application.css
*= require validationEngine.jquery
```

```application.js
//= require jquery.validationEngine-en
//= require jquery.validationEngine
```

セレクトボックスで試しに実装した時はこんな感じで作ってました。
アイテムは何かしら選ばないといけない感じです。

```show.html.erb
<%= form_with model: Item.new, id: "my_form" do |f| %>
 <%= f.select :item_id, @all_items.map{|t| [t.name, t.id]}, {include_blank: true}, class: "validate[required]" %>
 <%= f.submit "送信" %>
<% end %>

<script>
  $(document).ready(function(){
      $("#my_form").validationEngine();
  });
</script>
```

## エラーメッセージ日本語化

https://github.com/posabsolute/jQuery-Validation-Engine/blob/master/js/languages/jquery.validationEngine-ja.js
ダウンロードしてapp/assets/javascripts/ 配下に配置。
これだけだとできないので

```application.js
//= require jquery.validationEngine-ja
```

にして読み込んでもらう。


### 参考記事
[【Rails】Deviseのsign_upフォームにjQuery-Validation-Engine-railsを導入する](https://remonote.jp/rails-devise-validation-engine)
[jQuery-Validation-Engine-railsの使い方＆まとめ](http://tech-log.hatenablog.jp/entry/2015/12/26/044401)
◆ Spring Boot+gradle 環境構築メモ

# ★ はじめに
SpringBoot+gradleの環境構築でけっこうハマってしまったので
自分用に環境構築メモを残します。

# ★ 環境 
- Eclipse : 4.8.0 Photon
- Spring Bootバージョン : 2.1.3
- Gradleバージョン : Buildship 3.0
- OS : Windows10 64bit

# ★ Eclipseのダウンロード
もともとEclipseは使っていましたが、バージョンが3.7だったりPHP用だったりしたこともあり、
java用に最新のバージョンを入れました。

http://mergedoc.osdn.jp
上記よりWindows 64bit の Standard Edition のjavaをダウンロード。

# ★ プラグインの追加
## Spring Tools 3 Add-On (aka Spring Tools Suite3)
1. [ヘルプ(H)] ⇒ [Eclipseマーケットプレース(M)...] を選択
2. Eclipseマーケットプレース： [Search] タブの [検索(I)] に [STS] と入力
3. Eclipseマーケットプレース： [Spring Tools 3 Add-On (aka Spring Tools Suite3) 3.9.7.RELEASE] の [インストール] ボタンを押下
4. 選択されたフィーチャーの確認： デフォルトですべてチェックが入っているはずなので、[確認(C)] ボタンを押下
5. ライセンスのレビュー： [使用条件の条項に同意します(A)] にチェックを入れ、[完了(F)] ボタンを押下
6. セキュリティー警告： ポップアップが出るので、[インストール(I)] ボタンを押下
7. これらの証明書を信頼しますか？： [すべて選択(S)] ボタンを押下し、[選択を受け入れる(A)]
8. ソフトウェア更新： [今すぐ再起動(R)] ボタンを押下し、Eclipseを再起動する

## Minimalist Gradle エディター
STSと重複するところについては簡潔に。

1. Eclipseマーケットプレース： [Search] タブの [検索(I)] に [gradle] と入力
2. Eclipseマーケットプレース： [Minimalist Gradle エディター 1.0.1] の [インストール] ボタンを押下
3. STSと同様にぽちぽち押していく。再起動

## Buildship Gradle Integration
1. Eclipseマーケットプレース： [Search] タブの [検索(I)] に [gradle] と入力
2. [Buildship Gradle Integration 3.0] をインストール...しようと思ったが既に [インストール済] となっていたため、とくに何もせず

# ★ プロジェクト作成
いざプロジェクトの作成！　**これがけっこうハマった。**

1. [ファイル(F)] ⇒ [新規(N)] ⇒ [その他]
2. ウィザードを選択： [Spring Boot] ⇒ [Spring スターター・プロジェクト] を選択し、[次へ(N)] ボタンを押下
3. 新規Spring スターター・プロジェクト： [サービスURL] [名前] はデフォルトのまま、[型:] は [Gradle(Buildship 3.x)] を選択...

![WS000018.JPG](https://qiita-image-store.s3.amazonaws.com/0/154016/bd2b87ca-073e-126f-68a5-a33c34768cc1.jpeg)

**何かエラーメッセージ出てる。**
英語読めないエンジニアなので困ります。。が、なんとなくBuildshipがうまくインストールされていないことはわかりました。インストール済みにはなっていましたが。

このあと使用可能な更新から更新ができなかったり、使用可能なソフトウェア・サイトで有効無効化したり、いろいろと試しましたが、問題解決せず。1時間くらいがちゃがちゃ試しました。

結果的に、以下の方法で解決。

1. [ヘルプ(H)] ⇒ [Eclipseマーケットプレース(M)...] を選択
2. Eclipseマーケットプレース： [インストール済] タブを押下
3. Eclipseマーケットプレース：[Buildship Gradle Integration 3.0] の [更新] ボタンを押下

# ★ プロジェクト作成（再）

★ プロジェクト作成の1～3の手順を実施してみると...

![WS000025.JPG](https://qiita-image-store.s3.amazonaws.com/0/154016/e644b720-16a4-0d98-266f-93795f72cb7e.jpeg)

**いけました！**

1. [グループ] や [パッケージ] はよしなにつけて、[次へ(N)] ボタンを押下
2. 新規Springスターター・プロジェクト： [Web] ⇒ [Web] にチェックを入れ、[次へ(N)] ボタンを押下
3. 新規Springスターター・プロジェクト： デフォルトのまま、[完了(F)]　ボタンを押下

これでプロジェクトが無事に作成されました。
実際に動かすところについては、次回の記事にて記載。
キーボード上のその記号、英語で言えますか ?

## キーボードの記号まとめ
`@` って `at mark` でググっても、いい記事ヒットしないな〜... え ! `at sign` なの !? ということがあったので、キーボード上に表示されている記号を英語で何と言うかまとめておきます。
(※ 一部キーボード上にはない記号もあるかもです ><)

|記号|Japanese|English|補足|
|---|-------|--------|----|
|!|びっくりマーク、感嘆符|exclamation mark, exclamation point|多くのコンピュータ言語で否定を意味する。<br>[動]exclaim: 叫ぶ<br>[名]exclamation: 絶叫,感嘆|
|'|シングルクォート、引用符|single quote|アポストロフィ(apostrophe)と見た目が同じだが、アポストロフィは所有(brother's)とか省略(I'm)の文脈で使われるという点で異なる。|
|"|ダブルクォート、二重引用符|double quote|[動]quote: 引用する|
|`|バッククォート|back quote, back tick |shell script とか ruby とかで、囲った文字列をコマンドとして実行してくれる。<br>ラテン文字ではグレイブアクセント、アクサングラーブと呼ばれるらしい。|
|#|シャープ、嬰記号、番号記号、ナンバーサイン、ナンバー、井桁|hash mark, number sign, pound sign|ruby, yaml とかでコメントアウト。<br>ruby で変数展開したい時 "Hi #{name} !"|
|$|ドルマーク、ドル記号、ドル|dollar sign, dollar, dollar mark|shell script では環境変数を表したり、正規表現では最後の文字を表したりする。|
|%|パーセント、パーセント記号|percentage sign, percent sign|percent encoding(URL encoding) は URL で使えない文字を % と半角英数字の組み合わせで表現する。<br>%XX(Xは16進数の値)の3桁の値。|
|&|アンド、アンド記号、アンドマーク、アンパサンド|ampersand, and| && で論理 AND 。|
|()|丸括弧、括弧|parenthesis|Round brackets でも意味は通じるらしい。|
|[]|角括弧|bracket|Square brackets でも意味は通じるらしい。|
|{}|波括弧|brace|Curly brackets でも意味は通じるらしい。|
|-|ハイフン、引く|hyphen, minus sign| -- で decrement。<br>正規表現では、前後の文字の範囲(0-9, a-z)。<br>KAT-TUN のファン。|
|+|プラス、足す|plus sign| ++ で increment。<br>正規表現では、直前の文字の1回以上の繰り返し。|
|=|イコール|equal|代入する時とか。|
|>|大なり|greater than|鉤括弧の終わりを表している時は、Angle brackets|
|<|小なり|less than|鉤括弧の始まりを表している時は、Angle brackets|
|^|キャレット、ハット|caret, hat|git では HEAD^ で１つ前の commit を表す。<br>正規表現では先頭文字を表す。|
|~|チルダ、波線符号、にょろ|tilde|ruby では =~ で正規表現マッチ判定が使える。|
|&#124;|パイプ、縦線|pipe, vertical bar, vertical line| &#124; &#124; で論理 OR 。<br>markdown の表内で表示したい時は `&#124;` でいける。<br>以下のように yaml で改行したい時。などなど。<br>key: &#124;<br> data|
|/|スラッシュ|slash|割り算とか、日時区切る時とか。|
|\|バックスラッシュ|back slash|文字の escape に使われがち。<br>ASCIIの \ はJIS X 0201 では ¥ であるため、日本では \ が ¥ として表示されるものが多い。|
|¥|円マーク|yen symbol, yen sign, yen|:yen: :yen: :yen: :yen: :yen:|
|@|アットマーク、単価記号|at sign, at symbol, commercial at|メアドの印象強いですが、単価記号と言って元々は単価を表すために使われていたらしい。単価100円の商品 → @100|
|*|アスタリスク、アスタ|asterisk|原語の意味は「小さい星」。<br>かけ算。<br>正規表現で直前の文字の0回以上の繰り返し。<br>glob で任意の文字列を表すワイルドカード。<br>SQL では ALL ( SELECT * で表内の全ての列を対象とする)。などなど。|
|:|コロン|colon|三項演算子とか。 (A?B:C)|
|;|セミコロン|semicolon|sentence の終わりを表現。<br>無限ループ for(;;)|
|?|クエスチョンマーク、はてなマーク、疑問符|question mark, interrogation mark|正規表現では、直前の文字の0,1回の繰り返し。<br>[名]question: 質問<br>[名]interrogation: 尋問、疑問|
|_|アンダースコア、アンダーバー、下線符号|underscore|underline は文字の下に引く線。<br>underbar は和製英語らしいです。|
|,|コンマ、カンマ|comma|3桁ごとに区切る時に使ったり。(1,000,000)|
|.|ドット、ピリオド、終止符|dot, period, full stop|ファイル、ドメイン、IP などの区切り。<br>正規表現では、任意の一文字を表す。|
NumPyに入門 その２

### 配列の初期化

arangeは連番で要素を作ります。引数が１つの場合はstop,２つの場合はstart,stopと解釈されます。
reshapeは配列の次元変換を行います。

```.py
>>> np.arange(6)
array([0, 1, 2, 3, 4, 5])

>>> np.arange(2, 6)
array([2, 3, 4, 5])

>>> np.arange(6).reshape(3,2)
array([[0, 1],
       [2, 3],
       [4, 5]])
```

----

### 要素の合計を求める
もし引数を指定しない場合は全ての要素を合計したスカラ値を返します。
axis=Nを指定した場合、N次元についての合計値の配列を返します。

```.py
>>> data = np.array([[1,2],[3,4],[5,6]])
>>> data.sum()
21    # <= 1+2+3+4+5+6

>>> data.sum(axis = 0)
array([ 9, 12]) # <= [1+3+5, 2+4+6]

>>> data.sum(axis = 1)
array([ 3,  7, 11]) # <= [1+2, 3+4, 5+6]
```

----

### 平均を求める

引数を指定しない場合はスカラ値、
axis=Nを指定した場合は配列を返します。

```.py
>>> data = np.array([[1,2],[3,4],[5,6]])
>>> data.mean()
3.5

>>> data.mean(axis = 0)
array([3., 4.]

>>> data.mean(axis = 1)
array([1.5, 3.5, 5.5])
```

----

### 標準偏差を求める

引数を指定しない場合はスカラ値、
axis=Nを指定した場合は配列を返します。

```.py
>>> data = np.array([[1,2],[3,4],[5,6]])
>>> data.std()
1.707825127659933

>>> data.std(axis = 0)
array([1.63299316, 1.63299316])

>>> data.std(axis = 1)
array([0.5, 0.5, 0.5])
```

----

### 最大値を求める
引数を指定しない場合、全ての要素の中から最大値を返します。
axisを指定した場合、その次元での最大値を配列で返します。

```.py
>>> data = np.array([[1,2],[3,4],[5,6]])
>>> np.amax(data)
6

>>> np.amax(data, axis = 0)
array([5, 6])

>>> np.amax(data, axis = 1)
array([2, 4, 6])
```

----

### 最小値を求める
引数を指定しない場合、全ての要素の中から最小値を返します。
axisを指定した場合、その次元での最小値を配列で返します。

```.py
>>> data = np.array([[1,2],[3,4],[5,6]])
>>> np.amin(data)
6

>>> np.amin(data, axis = 0)
array([1, 2])

>>> np.amin(data, axis = 1)
array([1, 3, 5])
```


動画で説明を作りました。よかったらご覧ください。
https://youtu.be/dUf7kZUJJBQ
Laravel関係まとめ

## 概要
Lravel関係の記事のリンク集ページ。

### 導入

* [Lravel覚書](https://qiita.com/k_hoso/private/c2a8d561a2bb68f9e6d4)
* [Laravel公式で紹介されているNginxの設定の理屈が分からない人向け](https://qiita.com/k_hoso/items/33ccb5e02e73a244ed31)

### デバッグ

* [Laravel+PHPStormでデバッグ（ブレーク）する設定方法 ※Win対応、Homestead、Vagrant不要](https://qiita.com/k_hoso/items/2ab8c2ff9d498ec4d137)
* [Dockerコンテナ内でLarvelを起動（php artisan serve）して、ローカルのPhpStormでデバッグする](https://qiita.com/k_hoso/items/10d61f7241e1b8af7faa)

### バリデート

* [LaravelのバリデートエラーでJSONレスポンスを返す](https://qiita.com/k_hoso/items/d2b48b151dc4c87ac737)

### データベース

* [Laravelでレコード生成、更新時に自動更新されるタイムスタンプをミリ秒にする](https://qiita.com/k_hoso/items/c598f56fc4b61b0b1e6c)

### ログ

* [Laravelのログのフォーマットをカスタマイズし、フィールドの1つとしてセッションが管理している値を出す
](https://qiita.com/k_hoso/items/5070873721d48529635f)

### モック

* [Laravelのモック](https://qiita.com/drafts/7c7c47c6c51f5dfb44f6/edit)

### Homestead

* [Laravel HomesteadでBAD GATEWAYが出る](https://qiita.com/k_hoso/items/9e298d2de558cf3b8071)
* [Homestead+PHPStromでデバッグする](https://qiita.com/k_hoso/private/c3440c1085623fd053a4)
* [Homestead.yamlのsitesの役割の話（nginxの設定値になっている）](https://qiita.com/k_hoso/items/06c113f93cfe31c339b7)
* [Homesteadで複数サイトを見れるようにする（Nginxのバーチャルホストを使う）](https://qiita.com/k_hoso/items/8f7793d22fb23beb3360)
* [HomesteadのMySQLへphp artisan migrateすると失敗する](https://qiita.com/k_hoso/items/5e26192dc6137f5c24d1)
* [Homesteadが生成したMySQLでログを出す](https://qiita.com/k_hoso/items/03dd7a2780b0e1d0c280)

## 為になる記事

### Laravelアーキ

* [Laravelのリクエスト開始からコントローラにたどり着くまで](https://qiita.com/takyam/items/c2d397dd486c047dcbb1)

### DB関係

* [Laravelのトランザクションでrollbackされない問題](https://qiita.com/k_takaya/items/8d62de62a901aa9d2911)
ARMv6機のRaspbian(Stretch)にnpmコマンドをインストール

# Raspberry Pi Zero W(ARMv6)のRaspbian(Stretch)にnodeコマンド、npmコマンド、npxコマンドをインストール

`Raspbian(Stretch)`(Debian(Stretch))ではnpmのパッケージが提供されなくなった。このため、デフォルトでインストールされる`nodejs`パッケージを一旦アンインストールして入れ直す必要がある。

[NodeSource Node.js Binary Distributions](https://github.com/nodesource/distributions/blob/master/README.md#deb)に記載されている通り、以下の手順でインストールしようとすると、

```
$ curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
```

次のエラーが表示される。

```shell
## Installing the NodeSource Node.js 8.x LTS Carbon repo...


## You appear to be running on ARMv6 hardware. Unfortunately this is not currently supported by the NodeSource Linux distributions. Please use the 'linux-armv6l' binary tarballs available directly from nodejs.org for Node.js 4 and later.
```

Pi Zero WはARMv6を使用しているため、NodeSourceからパッケージが提供されていない。
ここでは、Pi Zeroシリーズ環境で`node.js`を稼働させる方法について記載する。

詳細やその他バージョンのインストール方法は[NodeSource Node.js Binary Distributions](https://github.com/nodesource/distributions/blob/master/README.md#deb)を確認すること。

1. インストール済みのバージョンを確認する。

    ```shell
    $ node -v
    v8.11.1

    $ npm -v
    -bash: npm: command not found
    ```

1. 一旦、`nodejs`パッケージをアンインストールする。

    ```shell
    $ sudo apt remove nodejs
    $ sudo apt autoremove
    ```

1. [https://nodejs.org/dist/latest/](https://nodejs.org/dist/latest/)で最新版のバージョンを確認し、環境変数にセットする。

    ```shell
    $ VERSION=v11.13.0
    $ DISTRO=linux-armv6l
    ```

1. [How to install Node.js via binary archive on Linux?](https://github.com/nodejs/help/wiki/Installation)に従い、インストールする。

    ```shell
    $ cd /usr/src
    $ sudo wget https://nodejs.org/dist/latest/node-$VERSION-$DISTRO.tar.xz
    $ sudo mkdir -p /usr/local/lib/nodejs
    $ sudo tar -xJvf node-$VERSION-$DISTRO.tar.xz -C /usr/local/lib/nodejs
    ```

1. `.profile`ファイルを編集する。

    ```shell
    $ vi ~/.profile
    ```

    ```shell
    # Nodejs
    VERSION=v11.13.0
    DISTRO=linux-armv6l
    export PATH=/usr/local/lib/nodejs/node-$VERSION-$DISTRO/bin:$PATH
    ```

1. `.profile`ファイルを有効化する。

    ```shell
    $ . ~/.profile
    ```

1. sudoリンクを作成する。

    ```shell
    $ sudo ln -s /usr/local/lib/nodejs/node-$VERSION-$DISTRO/bin/node /usr/bin/node
    $ sudo ln -s /usr/local/lib/nodejs/node-$VERSION-$DISTRO/bin/npm /usr/bin/npm
    $ sudo ln -s /usr/local/lib/nodejs/node-$VERSION-$DISTRO/bin/npx /usr/bin/npx
    ```

1. 新たにインストールされたバージョンを確認する。

    ```shell
    $ node -v
    v11.13.0
    $ npm -v
    6.7.0
    $ npx -v
    6.7.0
    ```
Slack で Splunk SPLを使えるようにする (Lunaのご紹介）


# 概要

Slack でコミュニケーションしている最中に画面を切り替えずに、そのままデータ分析できたらどうでしょう？これを実現するツールが、Luna という slack アプリケーションです。本日はこちらのアプリを紹介します。

例えば、アラートが上がったけど、影響があるユーザーは？　〇〇店の午前中の売り上げは？　サーバレスポンス悪いけど大丈夫？　など Slackでチャットをしている最中に急に状況を聞かれたら。そんな時にそのままslack上で SPL コマンドを叩いて結果を表示できたら楽（？）ですよね。たぶん。。

使えるケースは限られるかもしれませんが、 保存しているレポートも呼び出せるので、見たいレポートをその場で呼び出して見るくらいなら使えるかもしれませんね。

## Luna とは

https://www.talktoluna.com/

![image.png](https://qiita-image-store.s3.amazonaws.com/0/392303/e74f03df-d081-624b-4ee8-1dbcb48280e4.png)

Slack のアプリで、2017年に Splunk Innovation Award に選ばれたとあります。
アプリ概要はこちらの動画がわかりやすいです。
https://vimeo.com/218820097

上記のホームページに、 Free during Public beta とあります。金額については他にどこにも記載がないので今はフリーで利用できると思います。（設定時にも特に金額に関する記入や説明欄等はありませんでした）

## できること
非常にシンプルで以下の３つのみ
・　Slack内で、Splunk SPL を使ったカスタムサーチが可能
・　Slack内で、Splunk の Saved Search を呼び出せる。（レポート呼び出しですね）
・　サーチリンクが貼ってあるので、細かいサーチの続きはそちらにピンポイントに移動。

あまり複雑なことはできないので（そもそも Slack内からなので、ちょっとしたレポートを見たい時に役立つ程度）、うまく使い分けることが重要かなと思います。

## 設定方法

1. Slack でアプリ追加 (Luna を検索して、追加）
2. luna のサイトに飛ぶので、まずはユーザー作成（図１）
3. Slack のワークスペースを選択し、アクセス許可を与える
4. Splunk Server を登録する。（専用のアカウントを作った方が良さそうです） （図３）

注意事項：
・　ベータ版だからなのか、選択できるワークスペースは、１アカウントで一つのみ。しかも一度登録すると変更できない（正確には変更方法がわからない）
・　登録ユーザーのみがチャネルへ luna（ボット）を招待できますが、他のユーザーは特に登録不要で利用できます。

図１：　
![image.png](https://qiita-image-store.s3.amazonaws.com/0/392303/10964319-f8a0-8d2b-a00c-f3091101b7db.png)

図２：
![image.png](https://qiita-image-store.s3.amazonaws.com/0/392303/39b955fb-179c-1d20-bf39-e0f01f5e9d5e.png)

## 利用方法

### 1) チャネルへの luna（ボット）を招待。 (lunaの登録ユーザーのみ可能）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/392303/4939cb25-fe5f-3a30-88a6-432e8da6088e.png)



### 2) 通常のサーチ

```:検索例１
@luna run search index=test |stats count by source

**Splunk内だと search は省略可能だが、lunaを利用する場合は、しっかりと search を最初に書かないとだめ。**
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/392303/b3e6ae3c-393d-f0b8-ce1d-e9e7ee5e15b7.png)

```:検索例２
@luna run search index=tutrial source=＊access＊ earliest=-2d@d action=purchase

** グラフではなく、単純にイベントサーチしただけの場合は、グラフは表示されず、サーチ結果数とリンクが表示されるのみ**
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/392303/ae240ed9-b3ff-f370-e342-35e5a865b842.png)

### 3) レポート呼び出し

```
@luna run saved search login-fail
```

レポートを呼び出して表示できるので、SPLを毎回フルで打たなくてもいい
Splunの場合、レポート呼び出しは、`|savedsearch login-fail`  だが、lunaの場合、そこが少し違うので注意。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/392303/fb1d2a54-36a5-4d44-f90f-d3e21586f48c.png)

### 4) その他

```
失敗例１）　地図を表示しようとしてもできなかった。
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/392303/01141b83-140f-f37a-d98f-e5d105b364a8.png)


```
失敗例２）　searchコマンドを入力しないと、何も反応しない。
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/392303/f48d156f-b156-25b4-0c80-3ba71b237001.png)
何もレスがない。。

## 最後に

グラフの種類を選択したり、細かい操作はできなさそうなため、あくまでちょっとしたデータをみるときや最新レポートをみんなでチェックしたいときなどに使うと良さそう。みんなで議論しながら、いろんなサーチをドリルダウンしていけたら面白いかもしれない。
でもフィールド名とか覚えていないと、細かい分析できないので、いつも利用しているレポートやフィールドがわかっているデータしか使えなさそうだなーと、今更ながら思いました。
【効率化】Eclipseの便利なショートカット3選【java】

qiita初投稿です🙆
2019年4月からエンジニアとして働きだして、いいなと思ったEclipseのショートカットを共有させていただきます！👌

💻環境:Eclipse javaEE ver.2018-09,macOS

<h1>1.コンテンツ・アシスト(control^ + space)</h1>
![contentassist.gif](https://qiita-image-store.s3.amazonaws.com/0/380742/f7e66ccb-ab90-98ac-6d5f-407e59961497.gif)


スマホでいう予測変換のようなものをやってくれます。他にも「syso」と入力してコンテンツ・アシストを使うと「System.out.println」が予測変換で出てきます。むっちゃ便利❗

※ただMacでこのコマンドを入力するとmacOSのスポットライト機能のショートカットが優先されてコンテンツ・アシストが起動しないので後述するEclipseのキー設定かmacOSのショートカット設定を変更することをおすすめします。
ちなみに私はEclipseのキー設定で(control^ + tab)にしてます。


<h1>2.ソースコード整理(command⌘ + shift⇧ + f)</h1>
![source.gif](https://qiita-image-store.s3.amazonaws.com/0/380742/0afb9778-0a2f-97e1-eaa1-c27068fd7c96.gif)

自動でソースコードをいい感じに整理してくれます。これも最初使ったとき感動しました❗せっせとインデント整理してた時間を返してほしい…笑

<h1>3.コメントアウト(command⌘ + /)</h1>
![commentout.gif](https://qiita-image-store.s3.amazonaws.com/0/380742/2fee5552-cee9-88ba-8a77-6472de8ee46f.gif)
この機能は割とどのエディター等にも搭載されていると思いますがやはりよく使用する機能なので書きました。
gif画像の上の方に色の違うコメントアウトがありますがコメントアウトにも色々種類があって用途ごとに使い分けてみると更に見やすいソースコードになるかも！？

<h1>番外編:Eclipseのキー設定</h1>
⚙環境設定→一般→キー🔑
上記の手順でEclipseのショートカットキーを編集できます。
gif画像上げたかったけど初投稿だと2MBが限界みたい。。。笑　

<h1>感想</h1>
こうやって備忘録的な感じでアウトプットするととても勉強になりますね📚
こういう機能があるよ！とかこうしたらもっと効率化できるよ！とかアドバイスがあれば是非教えていただきたいです！あとはライティングの勉強のためにここに書いているのでそこに関してもご指摘いただけるとより一層がんばれます💪
Unityに2Dキャラクターをアニメートしましょう！

ゲームをもっと面白くなるには、キャラクターにアニメーションを追加する必要があります、ですよね？ ここではUnityであなたのキャラクターをアニメートする方法を説明します。 3つのステップがあります、最初はキャラクターの骨を作ることです、これはキャラクターをコントロールするために使われます。 次に、この骨をスプライトにバインドして、スプライトが骨と同じように移動するようにします。 最後のステップは、骨をより簡単に動かすためのコントローラーとして機能するインバースキネマティクス（IK）を追加することです。

#パッケージをインポートする
始める前に、必要なパッケージがすべて揃っていることを確認する必要があります。 プロジェクトに2D Animationと2D IKと2D PSD Importerがあることを確認してください。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/293087/b01455b6-1697-17d4-8e16-15397f321b7c.png)

#骨を追加する
パッケージをインポートしたら、骨をスプライトに追加できます。 キャラクタのどの部分を動かしたいかに基づいて骨を追加します。
![AddBones](https://qiita-image-store.s3.amazonaws.com/0/293087/eb282290-0752-e18a-33d4-ddd8dfe0a0c1.png)

#骨をバインドする
骨を作成したら、骨をスプライトにバインドして、スプライトが骨と共に移動するようにする必要があります。 ウェイトが正しくない場合があるので、スプライトの移動方法を調整します。
![Binding](https://qiita-image-store.s3.amazonaws.com/0/293087/16f4b763-ed7a-4310-6db4-600a2b821905.png)


#インバースキネマティクス（IK）
骨を作成してスプライトにバインドしたので、骨を移動しやすくするためにIKを追加できます。 普通は腕と脚にIKを追加します。
![Inverse Kinematics](https://qiita-image-store.s3.amazonaws.com/0/293087/49f03461-0e8f-b53a-4ff6-11318c0fa04e.png)
最後には、キャラクターをアニメートしましょう！

![animation](https://qiita-image-store.s3.amazonaws.com/0/293087/354910f4-5c42-14e1-c884-77c56060f393.gif)

できました！:thumbsup:
【Java】IntstreamのrangeとrangeClosedの違い

# はじめに

[エラトステネスの篩で素数を求める](https://qiita.com/nkojima/items/c20686f7b126809ee6e1)という記事を書いた時に、連続する整数のリストを作るために`Intstream.rangeClosed()`を使いました。
その時は特に何も思わなかったのですが、改めて[IntstreamクラスのAPI](https://docs.oracle.com/javase/jp/8/docs/api/java/util/stream/IntStream.html)を確認してみると、名前が似ている`Intstream.range()`というメソッドがありました。

そこで、両者の違いについて少しまとめてみました。

# Intstream.range(int startInclusive, int endExclusive)

> startInclusive(含む)からendExclusive(含まない)の範囲でステップ1でインクリメントした値を含む、順序付けされた順次IntStreamを返します。

上記のAPIの説明を見ると、「開始値以上、終了値未満の連続する整数を返す」ということになります。
下記のコードだと、最大値として「99」が返されます。

```java
public static void main(String[] args) {
	int max = java.util.stream.IntStream.range(1, 100).max().getAsInt();
	System.out.println(max);
}
```


# Intstream.rangeClosed(int startInclusive, int endInclusive)

> startInclusive(含む)からendInclusive(含む)の範囲でステップ1でインクリメントした値を含む、順序付けされた順次IntStreamを返します。

上記のAPIの説明を見ると、「開始値以上、終了値以下の連続する整数を返す」ということになります。
下記のコードだと、最大値として「100」が返されます。

```java
public static void main(String[] args) {
	int max = java.util.stream.IntStream.rangeClosed(1, 100).max().getAsInt();
	System.out.println(max);
}
```

# ところでclosedって？

数値の集合を数直線上で表した時に、両端点を含む区間のことを閉区間（closed interval）と呼びます。
`Intstream.rangeClosed()`は、両端点を含む数値の集合を生成するメソッドなので、メソッド名に閉区間を示す「closed」が付けられているのかもしれません。
※これは私の推測でしかありませんが...

# 参考URL

* [Intstream - Java SE 8](https://docs.oracle.com/javase/jp/8/docs/api/java/util/stream/IntStream.html)
* [エラトステネスの篩で素数を求める](https://qiita.com/nkojima/items/c20686f7b126809ee6e1)
Rasberry Pi3でWi-Fi AP/Stationの切替

Raspberry pi3(以降RPi3)をWi-Fi APにして、その後元に戻す(Stationにする)方法です。
参考にリンクをはっているraspberrypi.orgに記載されている内容からの抜粋です。Raspberry pi2以前を含めて無線がデフォルトでない場合はいろいろ複雑になっているのですが、(少なくとも)RPi3に限定すればずいぶん簡単になっているので、ここにまとめてみました。

| 内容             | 詳細             |
|:----------------|:-----------------|
| 環境   | RPi3 ModelB, Raspbian Jessie Lite |
| 前提   | RPi3は他のAPに接続済 |
| ゴール  | RPi3をAPにして、そこに他のデバイスから無線で接続、その後、前提で接続しているAPに接続し直す |

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

```sh
# apt-get install hostapd
# apt-get install dnsmasq
# systemctl unmask hostapd
```

# 諸設定
## hostapd
2.4GHzで接続する場合の設定例です。
- XXX: APのSSID(32文字以内)
- YYY: パスワード(8文字以上63文字以内)


```sh:/etc/hostapd/hostapd.conf
 interface=wlan0
 driver=nl80211
 ssid=XXX
 hw_mode=g
 channel=6 # チャネル 1, 6, 11のどれかがオススメ
 ieee80211n=1
 wmm_enabled=0
 #ht_capab=[HT40][SHORT-GI-20][DSSS_CCK-40]
 macaddr_acl=0
 auth_algs=1
 ignore_broadcast_ssid=0
 wpa=2
 wpa_key_mgmt=WPA-PSK
 wpa_passphrase=YYY
 rsn_pairwise=CCMP
```

上記のhostapd.confを参照するためには明示的に記載する必要あり。

```sh:/etc/default/hostapd
 DAEMON_CONF="/etc/hostapd/hostapd.conf"
```
## dhcpcdの設定

ここで、ふたつのファイルを作成し、実行時にそれらを切り替えます

- /etc/dhcpcd.conf.sta 元々の設定ファイル
- /etc/dhcpcd.conf.ap AP化するときの設定ファイル

現状のdhcpcd.confをコピーしてから、AP設定用のファイルを作成

```sh
  # cp /etc/dhcpcd.conf /etc/dhcpcd.conf.sta
```

- /etc/dhcpcd.conf.ap (新規に作成)
 - IPアドレスを固定で設定する(ここでは192.168.11.1)
 - 最後のnohook wpa_supplicantがポイントで、これをしないとdhcpcdが動作中に、wpa_supplicantが自動的に動いしてしまうのを防ぐ
 - 時折別のところの手順のように、/etc/network/interfacesを変更する必要はありません

```sh:/etc/dhcpcd.conf.ap
 interface wlan0
 static ip_address=192.168.11.1/24
 static routers=192.168.11.1
 static domain_name_servers=192.168.11.1
 static broadcast 192.168.11.255
 nohook wpa_supplicant
```

## dnsmasqの設定

- /etc/dnsmasq.conf
 - 192.168.11.2から192.168.11.20の範囲内でIPを提供する。lease timeは24時間

```sh:/etc/dnsmasq.conf
 interface=wlan0
 dhcp-range=192.168.11.2,192.168.11.20,255.255.255.0,24h
```

# 実行

## APを立ち上げる場合

```sh
 # cp /etc/dhcpcd.conf.ap /etc/dhcpcd.conf
 # service dhcpcd restart
 # systemctl restart hostapd
 # systemctl restart dnsmasq
```

## 設定済のAPに接続する場合

```sh
 # systemctl stop dnsmasq
 # systemctl stop hostapd
 # cp /etc/dhcpcd.conf.sta /etc/dhcpcd.conf
 # service dhcpcd restart
```

# 参考

https://www.raspberrypi.org/documentation/configuration/wireless/access-point.md
Slackで「@here」や「@channel」のようなメンションに反応するbotを作る方法

#環境
- Slack
- GAS
- bot作成は[【Slack＋GAS】特定の発言に反応して何らかの返答を返す](https://www.yururito.net/entry/slack-gas-simple-reply)を参考にしました

#Slackbotの動作
![image.png](https://qiita-image-store.s3.amazonaws.com/0/253818/4dd60c82-ce3b-222c-872d-e7435dd81085.png)
**このような設定にしていても…**

↓
![image.png](https://qiita-image-store.s3.amazonaws.com/0/253818/299d83c4-bdb2-f4b7-eded-cfc5f494c3c2.png)
↓
![image.png](https://qiita-image-store.s3.amazonaws.com/0/253818/df34a876-9ae7-70d1-e9ca-788c740b41aa.png)
**botは反応してくれません**

#Slackbotの仕様
**[公式のヘルプセンター](https://get.slack.help/hc/en-us/articles/202009646-Making-announcements)にはこう書いてあります**
> Bot messages: To notify members with a bot message, the message must contain <!channel> or <!everyone>.

#解決方法
![image.png](https://qiita-image-store.s3.amazonaws.com/0/253818/181eba79-6cf3-11dd-e085-c6258a37f0d5.png)
**こう設定すると…**

↓
![image.png](https://qiita-image-store.s3.amazonaws.com/0/253818/299d83c4-bdb2-f4b7-eded-cfc5f494c3c2.png)
↓
![image.png](https://qiita-image-store.s3.amazonaws.com/0/253818/5672da43-dd4a-ba36-9ca0-73d4353ee117.png)
Unity初心者やってみた5

前回：https://qiita.com/akagane99/items/0d01e4b21919278f5469
次回：
一覧：https://qiita.com/akagane99/items/2dd005511a8d50f5634d

### （前回の続き）

* Unity 5でコインプッシャーゲームを作ろう（後編） | Think IT（シンクイット）
  * https://thinkit.co.jp/story/2015/08/19/6311

### バグ対応：コイン出るとこ壁にめり込む2

キーボードの←→で壁にめり込む。こうなる。
https://akagane99.github.io/WebGLGames/coin4/


下記箇所に値を直指定。
キャストしないと、セットできなかったけど、Microsoft Visual Studioがヘルプメッセージで
ヒント表示してくれたため、解決できた。

#### 修正コード

```
	void Update () {

		/* 追加
         * Mathf.Clamp である変数の最小値と最大値を設定することができる。
         * 第一引数は設定したい変数、第二引数は最小値、第三引数は最大値である。
         * Spawner の移動できるx 座標範囲をleftWallPosition のx 座標から、rightWallPostion のx 座標の範囲にしている。
         */
        Vector3 currentPosition = this.transform.position;
        currentPosition.x = Mathf.Clamp(currentPosition.x,
                                        leftWallPositionX + (float)0.5,
                                        rightWallPositionX - (float)0.5);
(省略)
     }
```

#### Microsoft Visual Studioのヘルプメッセージ例

![image.png](https://qiita-image-store.s3.amazonaws.com/0/109904/012c2231-7f7d-a5f9-bdcc-ae86e72b7127.png)

### ここまでできた

* 修正後
    * https://akagane99.github.io/WebGLGames/coin5/
* いままでの一覧
    * https://github.com/akagane99/WebGLGames/blob/gh-pages/README.md


### // 行動予定・行動結果

* 行動予定
    * エディタの視点移動メモる
        * [シーンビューの操作 - Unity マニュアル](https://docs.unity3d.com/ja/2018.1/Manual/SceneViewNavigation.html)
    * 別の入門サイトのゲーム作ってみる。そのうち
      * [Unity入門にオススメ！初心者向けのチュートリアルサイト6選 | プログラミング教室情報サイト【プロナビ】](https://programming-study.com/trouble/unity-tutorial/)
* 行動結果
    * 1時間（6.5時間/20時間）
Windows10 Python3.7 VSCodeでのDjangoの開発環境を構築する


# ◆ 環境
* Windows10
* VSCode 1.32
* Python 3.7.3
* Django 2.2

# ◆ 事前準備
## VSCodeをインストールする
https://code.visualstudio.com/
VSCodeを起動。[こちら](https://blanche-toile.com/web/visualstudiocode-cmd-powershellhttps://blanche-toile.com/web/visualstudiocode-cmd-powershell)を参考にVSCodeのターミナルをWindows PowerShellからcmdに変更。
## Python をインストールする
https://www.python.org/
python-3.7.3-amd64.exeをインストールした。
完了後、インストールされているか確認。

```
C:\Users\XXXXXX> python -V
Python 3.7.3
```

## PipEnvをインストールする
下記コマンドを実行し、pipenvをインストールする。

```
C:\Users\XXXXXX> pip install pipenv
```

PipEnvの説明は[こちら](https://qiita.com/toto1310/items/172220b28e646549f605)がとてもわかりやすい。

# ◆ 仮想環境有効化まで
## Pathを通す
コントロール パネル>システムとセキュリティ>システム システムの詳細設定 環境変数
ユーザー環境変数のPathに `C:\Users\XXXXXX\AppData\Roaming\Python\Python37\Scripts` を追加 

## 仮想環境作成
仮想環境作成予定のフォルダが `C:\>md hello\venv` の場合

```
C:\>md hello\venv
C:\>cd hello\venv
C:\hello\venv>pipenv --python 3.7
```

`Successfully created virtual environment!` と表示されるはず。

## 仮想環境有効化
次のコマンドで仮想環境を有効化する。

```
C:\hello\venv>.venv\Scripts\activate
```

# ◆ Djangoインストール～サーバー起動まで
## Djangoインストール
作成した仮想環境内にDjangoをインストールする。
まず仮想環境が有効化されていればプロンプトが下記のように表示されている。

```
(venv)  C:\hello\venv>
```

pipを最新化する。

```
(venv)  C:\hello\venv>pip install --upgrade pip
```

Djangoをインストールする。

```
(venv)  C:\hello\venv>pip install django
```

##  Djangoプロジェクトを作成する
下記コマンドを実行。

```
(venv)  C:\hello\venv>django-admin startproject mysite
```

## サーバーを起動する
下記コマンドを実行。

```
(venv)  C:\hello\venv\mysite>python manage.py runserver
```

`Starting development server at http://127.0.0.1:8000/`
と表示されるので、http://127.0.0.1:8000/ にアクセスする。
![django_success.jpg](https://qiita-image-store.s3.amazonaws.com/0/312167/88391dd7-1556-bea2-558b-49b310c7bceb.jpeg)
成功。

# ◆ 参考
* [Windows + Python 3.6 + PipEnv + Visual Studio Code でPython開発環境](https://qiita.com/youkidkk/items/b6a6e39ee3a109001c75)
* [python3.7 + PipEnv + Django with VSCode on Windows10 環境構築](https://qiita.com/shotarin/items/6720d189ab40f4a7d9f8)
* [Python開発の"常識"として知っておきたい、Pipenv](https://qiita.com/toto1310/items/172220b28e646549f605)
* [WindowsのVisual Studio Codeでコマンドプロンプトを利用する | Free Style](https://blanche-toile.com/web/visualstudiocode-cmd-powershell)
vimでインデントなど縦に編集を行いたいとき

最近vimを使い始めて見たものの、以下のようにずれたインデントを揃えようとするとき、いちいち操作するのが面倒だった。

```
def hoge
    hogehoge
    fugafuga
end
```

スペースが4行になっているので、2行に揃えたい。
今までどっちも手動で消してたけど、あまり二回同じ操作したくないし、10行とかになると面倒。。。
と、困っていたら矩形選択モードというのがあるそうな。

カーソルがある場所までを対角として、矩形に文字を選択することができる。
選択したらビジュアルブロックモードをescで解除して"d"を入力すれば消去可能。


|key|内容|
|---|---|
|ctrl + v|ビジュアルブロックモードに移行|
|esc|ビジュアルブロックモード解除|

ブロックモード中の操作キー

|key|内容|
|---|---|
|j k l m などの移動キー　| 選択範囲変更 |
|d|削除|
|D|行末まで削除|
|c|変更|
|C|行末まで変更|
|r|置換|
|I|挿入|
|A|追加|
|y|コピー、ヤンク|
|p|ペースト|
|>|右シフト|
|<|左シフト|
|0|行頭まで選択|
|^|先頭文字まで選択|
|$|行末まで選択|


かゆいところに手が届いた感がすごい。
ちなみにviエディタには無く、vimにしか無い機能らしい。