OmniAICreator/Qiita-1.07M huggingface dataset:
GoogleChromeでアカウントを複数扱う時のメモ

#Chromeで複数アカウントを管理する
Chromeで複数のGoogleアカウントを管理する場合はウィンドウの右上の名前をクリックしてアカウントを切替ますが、面倒な場合の方法です。あまりあまり高頻度でこの作業をやらないので、忘れないようにメモ。
また、以下で紹介するソフトはローカルにメールなどのデータを落とさないタイプのソフトになります。もし、ローカルにデータを落として使うのであれば普通になんらかのメーラーを使って管理するのが良いかと思います。


##各アカウントのGoogle Chromeショートカットを登録する
1. Chromeの右上のメニューアイコンをクリック
2. 「設定」を開く
3. 「ユーザー」の項目のメールアドレスが記述されている場所をクリック
4. 「デスクトップ ショートカットを表示」の項目をオンにする。

以上で各アカウント毎にショートカットを登録できるので、スタートメニューやタスクバー、以前紹介したPaperPlaneなどに登録すると楽に開けます。

##「Shift」を使う
複数のGoogleアカウントを管理する場合、メールやカレンダー、ドライブなどが目的の場合が多いと思います。
その場合はShiftがおすすめ。一つのウィンドウで、複数のGoogleアカウントを管理できる便利なソフト。
基本的に有料ソフトのようですが、無料期間が30日あり、その間は2アカウント利用できます。また、5人紹介すると有料プランを1年分もらえるみたいです。
[Shift](https://tryshift.com/)
![FireShot Capture 1 - Shift - The Best Desktop Email Client for Gmail and Ou_ - https___tryshift.com_.png](https://qiita-image-store.s3.amazonaws.com/0/66308/bc67f4ea-7bb4-8b14-295c-03a9a484d61d.png)

##「ChatWork」を使う
これはChatWorkを使っている場合に便利な方法です。ChatWorkのPC用DL版はChatWorkアカウントの他にもGmailアカウントやFB・Twitterなど、様々なアカウントを登録することができます。なので複数のGmailアカウントを登録することができるので、メールの管理だけならタブの切り替えだけで楽にできます。
[ChatWork - ダウンロード](https://go.chatwork.com/ja/download/)
![FireShot Capture 3 - ダウンロード I チャットワーク（ChatWork） - https___go.chatwork.com_ja_download_.png](https://qiita-image-store.s3.amazonaws.com/0/66308/1b96318f-bdae-5930-dab2-d67be69e2165.png)
Unityのコード編集時にVisual Studioで { を自動改行させたくないとき(波括弧, curly bracket)

Unityでコード編集時にデフォルトのMonoDevelopでなくVisual Studioのエディタを使用していて、`{`を改行させたくない宗派の人向けです。


Visual Studioを開き、「ツール」=>「オプション」を選択
![1.jpg](https://qiita-image-store.s3.amazonaws.com/0/245670/3de84ce1-0c4e-6e2a-ee30-ee4c8cdd2b79.jpeg)

「テキストエディター」=>「C#」=>「書式設定」=>「改行」を選択
![2.jpg](https://qiita-image-store.s3.amazonaws.com/0/245670/32206000-05e3-0720-2f57-eae34569b7c1.jpeg)


そして「中かっこの改行オプション」のチェックボックスを外すと`{`が改行されなくなります。
私は全てのチェックボックスを外しました。最後に「OK」ボタンを選択すると設定されます。
![3.PNG](https://qiita-image-store.s3.amazonaws.com/0/245670/81f3ffae-5097-e15f-83f8-508482540749.png)


下記が設定前と設定後の例です。

Before

```
class C
{
}

void foo
{
}
```

After

```
class C {
}

void foo {
}
```
GitHubのpushまでの作業をまとめてみた

#そもそもGitHubとは？
ソフトウェア開発のソースコードを管理するサービス。企業でも個人でも用いられる。
有料と無料がある。今回は無料で行う。

#GitHubで大切なローカルリポジトリとリモートリポジトリとは？
リポジトリとは「保管場所」を指し、ファイルやディレクトリを保存する場所になります。ソフトウェアの開発では一つのソースコードを複数人で修正を加えることも。そうなると変更履歴を逐一管理する必要があります。そのために、変更履歴を管理したいディレクトリなどをリポジトリの管理下に置くことで、そのディレクトリ内のファイルなどの変更履歴を記録することができます。

　そして、リポジトリは自分のマシン内にある「ローカルリポジトリ」とサーバなどネットワーク上にある「リモートリポジトリ」の2箇所に分かれます。基本的にローカルリポジトリで作業を行い、その作業内容をリモートリポジトリへ転送する流れになります。

#1.GitHubでリモートリポジトリを作成
まずはGitHub上にリモートリポジトリを作成します。その際、プライベートかパブリックの指定がありますが、プライベートは有料になります。

#2.PCにローカルリポジトリを作成
PC上にローカルリポジトリのためのディレクトリを作成します。作成した後、「git init」でGitリポジトリに変換します。GitHubで共有したいファイルなどをこのディレクトリに置きます。

#3.「git add」で作成したファイルをインデックスに追加
作成したファイル(htmlファイルなど)をまずはインデックに追加します。インデックとはローカルリポジトリにコミットする準備をするために変更内容を一時的に保存する場所のことです。

#4.「git commit」でインデックスに追加されたファイルをコミット
インデックスに追加されたファイルをコミットすることで、ファイルやディレクトリの追加や変更をローカルリポジトリに記録します。

#5.「git push」でリモートリポジトリに反映させる
ローカルリポジトリで行ったファイルやディレクトリの追加・変更を「git push」でリモートリポジトリに反映させます。これによってサーバー上に追加や変更が記録されます。



>　引用
「今さら聞けない！GitHubの使い方【超初心者向け】」
https://techacademy.jp/magazine/6235
file_fieldでファイルを自動で送信する

form_forのfile_fieldで
・ファイル選択後、submitボタンを押さずに自動で送信したい
・ファイル選択ボタンを自由に変更したい
と思って調べた結果、viewを下記のようにしたら上手くいった。

``` erb:show.html.erb
<%= form_for @user, :url => change_image_users_path, :html => {method: 'PATCH'} do |f| %>
　   <%= f.label :image, :class => "ignore" %>
   　<label for="user_image" class="square_btn">
       画像選択
      　<%= f.file_field :image, :class => "ignore" %>
   　</label>
<% end %>
<script type="text/javascript">
    $('input[type=file]').on('change', function (e) {
        console.log(e.target.files);
        if (e.target.files[0].size > 0) {
            $(this).parents('form').submit();
        }
    });
</script>
```

``` scss:user.scss
.ignore {
    display:none;
}

.square_btn {
    position: relative;
    display: inline-block;
    padding: 0.25em 0.5em;
    text-decoration: none;
    color: #FFF;
    background: #03A9F4;/*色*/
    border: solid 1px #0f9ada;/*線色*/
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
    cursor : pointer;
}
```


下記を参考にさせて頂きました。

form_forのfile_fieldで画像を選択したと同時に送信する方法
https://teratail.com/questions/62061

input type="file"のボタンデザインを変更する方法
http://proengineer.internous.co.jp/content/columnfeature/7605

CSSで作る！押したくなるボタンデザイン100（Web用）
https://saruwakakun.com/html-css/reference/buttons

**[2018/5/15追記]**
画像選択後の下記は不要でしたので、削除致しました。

``` erb:show.html.erb
<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
```

※上記が記載されていると、別のjQueryが動作しなくなる可能性があります。
申し訳ございませんでした。
Lets Encryptで証明書更新時にcryptographyのエラーが出た時の対処法

まれにLets Encryptで証明書更新時にエラーが発生します。
大体、pipのモジュールを最新化すると治っているイメージがありますが、、一応メモとして残しておきます。


# 環境

EC2 - Amazon Linux

# 試した方がいいことまとめ

- certbot-autoを最新化
- pipのモジュール最新化
- `/opt/eff.org/certbot/`を削除

# エラーの内容と対処方法

## Error: couldn't get currently installed version for /opt/eff.org/certbot/venv/bin/letsencrypt: 

`/opt/eff.org/certbot/`が現在利用している`certbot-auto`のバージョンと異なるそうです。
`certbot-auto`実行時にこちらのディレクトリが再生成されるようなので削除して再実行します。

```bash
$ sudo rm -r /opt/eff.org/certbot/
$ ./certbot-auto --debug -v
```

## ImportError: No module named cryptography.hazmat.bindings.openssl.binding

cryptographyが見つからないそうです。

```bash
./certbot-auto --debug -v
Error: couldn't get currently installed version for /opt/eff.org/certbot/venv/bin/letsencrypt: 
Traceback (most recent call last):
  File "/opt/eff.org/certbot/venv/bin/letsencrypt", line 7, in <module>
    from certbot.main import main
  File "/opt/eff.org/certbot/venv/local/lib/python2.7/dist-packages/certbot/main.py", line 10, in <module>
    import josepy as jose
  File "/opt/eff.org/certbot/venv/local/lib/python2.7/dist-packages/josepy/__init__.py", line 41, in <module>
    from josepy.interfaces import JSONDeSerializable
  File "/opt/eff.org/certbot/venv/local/lib/python2.7/dist-packages/josepy/interfaces.py", line 8, in <module>
    from josepy import errors, util
  File "/opt/eff.org/certbot/venv/local/lib/python2.7/dist-packages/josepy/util.py", line 4, in <module>
    import OpenSSL
  File "/opt/eff.org/certbot/venv/local/lib/python2.7/dist-packages/OpenSSL/__init__.py", line 8, in <module>
    from OpenSSL import rand, crypto, SSL
  File "/opt/eff.org/certbot/venv/local/lib/python2.7/dist-packages/OpenSSL/rand.py", line 12, in <module>
    from OpenSSL._util import (
  File "/opt/eff.org/certbot/venv/local/lib/python2.7/dist-packages/OpenSSL/_util.py", line 6, in <module>
    from cryptography.hazmat.bindings.openssl.binding import Binding
ImportError: No module named cryptography.hazmat.bindings.openssl.binding
```

pip、virtualenv、cryptographyのバージョンを最新化すると効果がありました。

```bash
$ sudo pip install -U pip virtualenv cryptography
```

このコマンドで諸々更新されたあとはシェルを起動しなさないと、pipが実行できないのでご注意ください。
また、`/opt/eff.org/certbot/`も作りなおさないとエラーが消えませんでした。

```bash
$ bash
$ sudo rm -r /opt/eff.org/certbot/
```

# 参考
https://github.com/certbot/certbot/issues/2823
https://github.com/certbot/certbot/issues/2544
https://github.com/scrapy/scrapy/issues/1314
N4606 Working Draft 2016, ISO/IEC 14882, C++ standard(31)4.4 Temporary materialization conversion [conv.rval] p86

# はじめに
N4606 Working Draft, Standard for Programming Language C++
http://www.open-std.org/jtc1/sc22/wg21/docs/papers/2016/#mailing2016-11
http://www.open-std.org/jtc1/sc22/wg21/docs/papers/2016/n4606.pdf

n4606は、ISO/IEC JTC1 SC22 WG21の作業原案(Working Draft)です。
公式のISO/IEC 14882原本ではありません。
ISO/IEC JTC1 SC22 WG21では、可能な限り作業文書を公開し、幅広い意見を求めています。
一連の記事はコード断片をコンパイルできる形にする方法を検討してコンパイル、リンク、実行して、規格案の原文と処理系(g++, Clang++)との違いを確認し、技術内容を検討し、ISO/IEC JTC1 SC22 WG21にフィードバックするために用います。
また、CERT C++, MISRA C++等のコーディング標準のコード断片をコンパイルする際の参考にさせていただこうと考えています。CERT C++, MISRA C++が標準化の動きとの時間的な擦れの確認が結果としてできれば幸いです。

## list
N4606 Working Draft 2016, ISO/IEC 14882, C++ standard(1) coding list
https://qiita.com/kaizen_nagoya/items/df5d62c35bd6ed1c3d43/


## Compiler
###clang++ --version
clang version 6.0.0 (tags/RELEASE_600/final)

###g++-7 --version
g++-7 (Homebrew GCC 7.3.0_1) 7.3.0
Copyright (C) 2017 Free Software Foundation, Inc.

#(31)4.4 Temporary materialization conversion [conv.rval]
p86

```c++:p86.cpp
// N4606 Committee Draft, Standard for Programming Language C++
// http://www.open-std.org/jtc1/sc22/wg21/docs/papers/2016/n4606.pdf 
#define msg "p86.cpp (31)4.4 Temporary materialization conversion [conv.rval]"

#include <iostream>

struct X { int n; };/// missing last ';' in the document.
int k = X().n; // OK, X() prvalue is converted to xvalue

int main(int argc, char *argv[], char *envp[]){
  std::cout << "k="<< k <<" std::endl;
  std::cout << msg << std::endl;
  return EXIT_SUCCESS;
}
```

```shell_session
$ ./cppgl17.sh p86
$ clang++ p86.cpp
k=0
p86.cpp (31)4.4 Temporary materialization conversion [conv.rval]

$ g++-7 p86.cpp
k=0
p86.cpp (31)4.4 Temporary materialization conversion [conv.rval]
```


# 参考資料

コンパイル用shell script C版(clangとgcc)とC++版(clang++とg++)
https://qiita.com/kaizen_nagoya/items/74220c0577a512c2d7da
Qiitaに投稿するCのStyle例(暫定)
https://qiita.com/kaizen_nagoya/items/946df1528a6a1ef2bc0d
# 文書履歴
ver. 0.10 初稿 2080415
ver. 0.11 URL追記　20230215
### 最後までおよみいただきありがとうございました。
いいね　💚、フォローをお願いします。
####  Thank you very much for reading to the last sentence.
Please press the like icon 💚　and follow me for your happy life.
なんでLinuxStudio？

#　LinuxStudioの理由
ぶっちゃけると自分でカスタマイズするのなら、**Ubuntu**で十分です。
###**LinuxStudio**だと、**レイテンシ**(実行遅延)が低いよ

という魅力もあったりするのだが、私の場合はLinuxがマルチメディア向けに設定されており、**必要なソフトの導入する手間が省ける**という理由だけで選んだ。
最近話題の**Blender**(VRChat方面の方々が使ってるらしい)や、**Krita**(Twitterのタイムラインを賑わしたり)が標準で入ってたりする。他にもGIMPやInkscapeなど無料ツールでおなじみのソフトが揃ってます。

ただし、UnrealEngne4やUnityを使おうとすると、ビルドしないといけない等、面倒なことは多々あります。

##本体(PC)にお金使いすぎてOS買うの忘れました(爆)
というのが第一の理由です。新生活で物要りなのも忘れていろいろ買っちゃから……。そのうちメモリも増えていくと思います。


###第二の理由はWindowsだと、遊んじゃうから

UnrealEngine4やBlenderで開発し放題だよ、やったね。
実はTwitterという落とし穴があったりするわけですが……。

そんなこんなでLinuxで**遊びながら開発しましょう**。というのが私のコンセプトです。
ブログを始めたのもその一環です。
Linuxなので変なところで躓いたりすることもあるかもしれないけど。
そこは後から来る若い世代(まだ私も20代ですが)が問題解決の参考程度になればいいな。と思いながら問題部分と解決方法（忘れてなければ）を残していきたいです。
Modelioのクラス図で日本語を使用する

Modelioって何？ という話は前回の記事をご参考下さい。
https://qiita.com/syouyo01/items/adb49746a0091218de55

## クラス図の日本語表示の問題点
OO開発の分析ステップでは日本語を用いたクラス図を作成することがあるかと思います。
Modelioでも図に日本語を利用出来ますが、一部問題があります。

以下の図のテストクラスの1番目と2番目の属性のように、
クラスの属性の名前の終端が2バイト文字の場合、型が途中で切れてしまう模様です。
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/232089/6008201d-6d1a-a8ca-ce31-76e4c0a2741a.png)

属性名のフォントを確認すると、「Arial」となっています。
「Arial」は欧文フォントなので内部的な描画幅がずれてしまっているものと思われます。
![図2.png](https://qiita-image-store.s3.amazonaws.com/0/232089/22da3d04-6120-be85-6379-9dc7322649ce.png)

## 解決方法
では、フォントを「MS Pゴシック」に変更してみます。
属性の型がちゃんと表示されるようになりました :thumbsup_tone1:
![図3.png](https://qiita-image-store.s3.amazonaws.com/0/232089/fdce0a62-0b38-823f-f809-3f2460f280a4.png)

## テーマを利用した解決方法
上記の方法で修正する場合、各クラス毎にフォントを修正しなければならず大変手間がかかります。
Modelioにはテーマ機能があるので、そちらを利用すれば一括でフォントの修正が可能です。
ざっとした流れは以下の通りです。
・[Configuration]->[Diagram themes...]メニューを開く
・「Modelio 3.x」を選択した状態で「Create a new dialog theme」をクリックし、適当な名前を入力する。
・フォントを変更したい項目を展開し、フォントを選択する。
・全項目カスタマイズ完了したら「Save」をクリックする

例としてクラス名のフォントを変更したい場合は下図の通り、[Class->Pen & brush->Font]となります。
![図4.png](https://qiita-image-store.s3.amazonaws.com/0/232089/582c0470-b00d-af59-87e7-076f04b0ae7f.png)
(属性は[Attribute->Font]、操作は[Operation->Font]です)

では、テーマを実際にクラス図に適用してみましょう。
クラス図でSymbolウィンドウのDiagram themeを変更します。
![図5.png](https://qiita-image-store.s3.amazonaws.com/0/232089/f4169e80-835a-af0c-5e9b-70443ea57ec7.png)

図中の全てのクラスのフォントが変更され、クラスを新規に作成してもMS Pゴシックがデフォルトになりました:slight_smile:

### 参考文献
Modelio User Manual 3.7: Modelio diagram themes and element styles
http://forge.modelio.org/projects/modelio3-usermanual-english-370/wiki/Modeler-_modeler_modelio_settings_diagram_styles
pattern要素の使い方(正規表現を属性に入力する場合)

## 特定の文字を含む
**pattern = "^[a-zA-Z0-9 ]+\\\S$$"**

「^...」は「...で始まる」という意味。
「[a-zA-Z0-9 ]」は「小文字・大文字の全角アルファベット、全角数字を含む」という意味。
「...+」は「...を一回以上含む」という意味。
「\\S$」は「空白文字（半角スペース、全角スペース、タブ、改行、改ページ）で終わらない」という意味。
[Unity] エラー文を見やすくしてデバッグを快適に！

Unityにおけるデバッグについてまとめました。
本当に初歩的なことですが参考になれば幸いです。

[この記事の対象者] 
・Unity・プログラミング初心者
[この記事の目的]
・Unityでの基本的なデバッグ法を教えます
・自力でエラーを解決できるようになろう！

ではでは早速参りましょう〜


# **エラー文を怖がるな！**
まず最初に大事なこと。
赤いエラー文を見ただけで気分が萎える人、いると思います。さらにそれをなかなか解決できずイライラする人も多いと思います。
残念ながら、プログラミングには必ずエラー・デバッグがつきまとってきます。それらとうまく付き合っていくために、簡単なエラー解決アプローチを紹介！
エラー文を怖がらないようにしましょう！


# **パターン別エラー解決法**

**そもそも再生できない (コンパイルエラー)**
エラー文をよく読み、どのスクリプトの何行目でエラーが出ているのか確認しよう

**再生すると赤いマークのエラーが出る**
エラー文をよく読み、Inspectorやスクリプトを確認しよう

**再生もできエラーも出ないが、思った挙動をしない**
スクリプト内の値や書き方が間違っているかも？```Debug.Log();```を用いて、どこまで正常に動いているのか１文１文確認しよう

**最終奥義！とりあえずエラー文コピーしてググる**
Unityは多くの人が使っているツールです。似たようなエラーに悩まされている人が世界中にいます。調べてみれば解決法がネットに転がってる可能性大！

いかがでしたか？
ぜひエラーを自力で解決できるようになりましょう！



# **Unityでのエラー文をもっと見やすくするテクニック**

それでは本題に入りましょう。
みなさんのUnity開発画面、レイアウトの多少の違いはあるかもしれませんが、だいたいこんな感じではないでしょうか？

![図1.jpg](https://qiita-image-store.s3.amazonaws.com/0/250456/57e7bc09-1947-1857-4c44-e5862830398f.jpeg)

エラー文の表示が狭い...みづらい...

#**もっと見やすくしましょう！**

①画面左上から**[window]**->**[console]**をクリック

![図2.jpg](https://qiita-image-store.s3.amazonaws.com/0/250456/4277a7d8-f52a-8239-c798-034bbe96af7a.jpeg)

②エラー文のビュー（**Consoleビュー**と呼びます）が出てきました。これで見やすくなりましたね！

![図3.jpg](https://qiita-image-store.s3.amazonaws.com/0/250456/5276eb6c-b43e-ca00-d8b3-b837af825610.jpeg)

③このままだとConsoleビューが他のビューに重なって開発の邪魔なので、タブをドラッグして、邪魔にならない配置に持ってくるとベター。

![図4.jpg](https://qiita-image-store.s3.amazonaws.com/0/250456/ca744d9f-13d6-874a-b913-d1cca3379adf.jpeg)



# **Consoleビューの見方**

## 赤、黄、グレーの意味
エラー文のアイコンには３種類あり、基本的に、
赤　　：直さないといけないエラー。
黄　　：警告。直さなくても支障はないことが多いが、直せるなら直した方がもちろんいい。
グレー：エラーではない。Debug.Log();の内容はこの色で表示される。

```csharp

void Start () {
    Debug.Log("こんにちは！");
    GetComponent<AudioSource>().Play();
}
```

![図6.jpg](https://qiita-image-store.s3.amazonaws.com/0/250456/f72db349-77ec-fc45-4428-5ccfc0c05d51.jpeg)


## Collapseボタンについて
![図5.jpg](https://qiita-image-store.s3.amazonaws.com/0/250456/cc46c0e4-6867-c756-777c-cf310ed76dd2.jpeg)
N4606 Working Draft 2016, ISO/IEC 14882, C++ standard(30)4.1 Lvalue-to-rvalue conversion [conv.lval] p85

# はじめに
N4606 Working Draft, Standard for Programming Language C++
http://www.open-std.org/jtc1/sc22/wg21/docs/papers/2016/#mailing2016-11
http://www.open-std.org/jtc1/sc22/wg21/docs/papers/2016/n4606.pdf

n4606は、ISO/IEC JTC1 SC22 WG21の作業原案(Working Draft)です。
公式のISO/IEC 14882原本ではありません。
ISO/IEC JTC1 SC22 WG21では、可能な限り作業文書を公開し、幅広い意見を求めています。
一連の記事はコード断片をコンパイルできる形にする方法を検討してコンパイル、リンク、実行して、規格案の原文と処理系(g++, Clang++)との違いを確認し、技術内容を検討し、ISO/IEC JTC1 SC22 WG21にフィードバックするために用います。
また、CERT C++, MISRA C++等のコーディング標準のコード断片をコンパイルする際の参考にさせていただこうと考えています。CERT C++, MISRA C++が標準化の動きとの時間的な擦れの確認が結果としてできれば幸いです。

## list
N4606 Working Draft 2016, ISO/IEC 14882, C++ standard(1) coding list
https://qiita.com/kaizen_nagoya/items/df5d62c35bd6ed1c3d43/


## Compiler
### clang++ --version
clang version 6.0.0 (tags/RELEASE_600/final)

### g++-7 --version
g++-7 (Homebrew GCC 7.3.0_1) 7.3.0
Copyright (C) 2017 Free Software Foundation, Inc.

#4 Standard conversions [conv]
##(30)4.1 Lvalue-to-rvalue conversion [conv.lval]
p85

```c++:p85.cpp
// N4606 Committee Draft, Standard for Programming Language C++
// http://www.open-std.org/jtc1/sc22/wg21/docs/papers/2016/n4606.pdf 
#define msg "p85.cpp (30)4.1 Lvalue-to-rvalue conversion [conv.lval]"

#include <iostream>

struct S { int n; };
auto f() {
  S x { 1 };
  constexpr S y { 2 };
  return [&](bool b) { return (b ? y : x).n; };
}

int main(int argc, char *argv[], char *envp[]){

  auto g = f();
  int m = g(false); // undefined behavior due to access of x.n outside its lifetime
  int n = g(true); // OK, does not access y.n

  std::cout <<" m=" << m << " n=" << n << std::endl;
  std::cout << msg << std::endl;
  return EXIT_SUCCESS;
}
```

```shell_session
$ ./cppgl17.sh p85
$ clang++ p85.cpp
 m=-294967480 n=2
p85.cpp (30)4.1 Lvalue-to-rvalue conversion [conv.lval]

$ g++-7 p85.cpp
 m=32766 n=2
p85.cpp (30)4.1 Lvalue-to-rvalue conversion [conv.lval]
```

# 参考資料
コンパイル用shell script C版(clangとgcc)とC++版(clang++とg++)
https://qiita.com/kaizen_nagoya/items/74220c0577a512c2d7da
Qiitaに投稿するCのStyle例(暫定)
https://qiita.com/kaizen_nagoya/items/946df1528a6a1ef2bc0d
# 文書履歴
ver. 0.10 初稿 2080415
ver. 0.11 URL追記　20230215
### 最後までおよみいただきありがとうございました。
いいね　💚、フォローをお願いします。
####  Thank you very much for reading to the last sentence.
Please press the like icon 💚　and follow me for your happy life.
【備忘録】npm -g install に失敗する

# 問題点

`npm -g install xxx`に失敗する

```shell-session
$ npm -g install firebase-tools

npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
npm ERR! path /usr/local/lib/node_modules
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!  { Error: EACCES: permission denied, access '/usr/local/lib/node_modules'
npm ERR!   stack: 'Error: EACCES: permission denied, access \'/usr/local/lib/node_modules\'',
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/xxx/.npm/_logs/2018-04-15T05_03_59_511Z-debug.log
```

# 解決方法

npmのデフォルトディレクトリを作成する

```shell-session
$ mkdir ~/.npm-global
$ npm config set prefix '~/.npm-global'
$ echo ' export PATH=~/.npm-global/bin:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile
```

`npm -g install xxx`に成功するようになった

```shell-session
$ npm -g install firebase-tools

/Users/xxx/.npm-global/bin/firebase -> /Users/xxx/.npm-global/lib/node_modules/firebase-tools/bin/firebase

> @google-cloud/functions-emulator@1.0.0-beta.4 postinstall /Users/xxx/.npm-global/lib/node_modules/firebase-tools/node_modules/@google-cloud/functions-emulator
> node scripts/upgrade-warning


If you're using the Emulator via the Firebase CLI, you can
disregard this message.

If you're upgrading @google-cloud/functions-emulator, these
are the recommended upgrade steps:

1.  Stop the currently running emulator, if any:

        functions stop

2.  Uninstall the current emulator, if any:

        npm uninstall -g @google-cloud/functions-emulator

3.  Install the new version of the emulator:

        npm install -g @google-cloud/functions-emulator

If you have trouble after upgrading, try deleting the config
directory found in:

    ~/.config/configstore/@google-cloud/functions-emulator

Then restart the emulator. You can also check for any renegade
Node.js emulator processes that may need to be killed:

    ps aux | grep node

+ firebase-tools@3.18.4
added 524 packages in 16.654s
```

# 参考
- [Firebase Web Codelab](https://codelabs.developers.google.com/codelabs/firebase-web/?hl=ja#3)
- [20 \- How to prevent permissions errors \| npm Documentation](https://docs.npmjs.com/getting-started/fixing-npm-permissions)
根古上さんの新生活


　４月から新生活ということもあり、『UnrealEngne4でつくるよ』的なことを言っては放置してたのを改善するためにブログ始めます。

内容はUnrealEngin4及び、Linuxが中心になります。たまに趣味のPC自作とか、変なものが出たりすると思います。Blenderは……うん（Twitterで作業途中のものを垂れ流す方が多いと思う）


作業環境(現メイン機)
CPU 　 ì7-5820k
M/B 　 X99-Delux
Mem 　 8GB*4(いつの間にか増えます)
SSD 　 256GB
HDD　  3TB(気づいたら増殖します)
OS    LinuxStudio
N4606 Working Draft 2016, ISO/IEC 14882, C++ standard(29)3.11 Alignment [basic.align] p82

# はじめに
N4606 Working Draft, Standard for Programming Language C++
http://www.open-std.org/jtc1/sc22/wg21/docs/papers/2016/#mailing2016-11
http://www.open-std.org/jtc1/sc22/wg21/docs/papers/2016/n4606.pdf

n4606は、ISO/IEC JTC1 SC22 WG21の作業原案(Working Draft)です。
公式のISO/IEC 14882原本ではありません。
ISO/IEC JTC1 SC22 WG21では、可能な限り作業文書を公開し、幅広い意見を求めています。
一連の記事はコード断片をコンパイルできる形にする方法を検討してコンパイル、リンク、実行して、規格案の原文と処理系(g++, Clang++)との違いを確認し、技術内容を検討し、ISO/IEC JTC1 SC22 WG21にフィードバックするために用います。
また、CERT C++, MISRA C++等のコーディング標準のコード断片をコンパイルする際の参考にさせていただこうと考えています。CERT C++, MISRA C++が標準化の動きとの時間的な擦れの確認が結果としてできれば幸いです。

## list
N4606 Working Draft 2016, ISO/IEC 14882, C++ standard(1) coding list
https://qiita.com/kaizen_nagoya/items/df5d62c35bd6ed1c3d43/


## Compiler
### clang++ --version
clang version 6.0.0 (tags/RELEASE_600/final)

### g++-7 --version
g++-7 (Homebrew GCC 7.3.0_1) 7.3.0
Copyright (C) 2017 Free Software Foundation, Inc.

#(29)3.11 Alignment [basic.align]
p82

```c++:p82.cpp
// N4606 Committee Draft, Standard for Programming Language C++
// http://www.open-std.org/jtc1/sc22/wg21/docs/papers/2016/n4606.pdf 
#define msg "p82.cpp (29)3.11 Alignment [basic.align]"

#include <iostream>

struct B { long double d; };
struct D : virtual B { char c; };

int main(int argc, char *argv[], char *envp[]){
  struct B e;
  struct D f;
  std::cout << "e.d="<< e.d << " f.c="<< f.c << std::endl;
  std::cout << msg << std::endl;
  return EXIT_SUCCESS;
}
```

```shell_session
$ ./cppgl17.sh p82
$ clang++ p82.cpp
e.d=1.64631e-4941 f.c=
p82.cpp (29)3.11 Alignment [basic.align]

$ g++-7 p82.cpp
e.d=4.88725e-4797 f.c=
p82.cpp (29)3.11 Alignment [basic.align]

```

# 検討事項
　f.cの出力。

# 参考資料

コンパイル用shell script C版(clangとgcc)とC++版(clang++とg++)
https://qiita.com/kaizen_nagoya/items/74220c0577a512c2d7da
Qiitaに投稿するCのStyle例(暫定)
https://qiita.com/kaizen_nagoya/items/946df1528a6a1ef2bc0d
# 文書履歴
ver. 0.10 初稿 2080415
ver. 0.11 URL追記　20230215
### 最後までおよみいただきありがとうございました。
いいね　💚、フォローをお願いします。
####  Thank you very much for reading to the last sentence.
Please press the like icon 💚　and follow me for your happy life.
RailsでMySQLがインストールできない

久しぶりにGemでMySQLを使おうとしたらbundle installできなくて少しハマる。

> ...
linking shared-object mysql2/mysql2.bundle
ld: library not found for -lssl
...

OpenSSLはインストールされているのに、-lオプションでうまく参照できていないようだ。

下記エントリーを発見して解決

RailsプロジェクトでMySQLがbundle installできなかった
https://qiita.com/akito19/items/e1dc54f907987e688cc0

下記のようにしてやればOK。

```
$ bundle config --local build.mysql2 "--with-ldflags=-L/usr/local/opt/openssl/lib --with-cppflags=-I/usr/local/opt/openssl/include"
```

2016年のエントリーだけど、未だに困っているポイントは同じです。
AF_* とPF_*の違いについて

ソケットを使ってプログラムを書くときに
`int socket(int domain, int type, int protocol);  `
の第一引数にAF_INETとPF_INETが使われることがあり、違いが気になったので調べて見た。
linuxのソースコードを確認したところ、

```c:/include/linux/socket.h(v4.16.2)
/* Protocol families, same as address families. */
#define PF_UNSPEC	AF_UNSPEC
#define PF_UNIX		AF_UNIX
#define PF_LOCAL	AF_LOCAL
#define PF_INET		AF_INET
~~~以下略~~~
```
という記述があったので、linuxにおいてはどちらも変わらなそう
ただ、同ファイルでのsockaddr構造体の定義を見ると

```c
struct sockaddr {
	sa_family_t	sa_family;	/* address family, AF_xxx	*/
	char		sa_data[14];	/* 14 bytes of protocol address	*/
};
```
となっていたので、AF_\*を使うのが無難そう
(PF_\*を支持する理由としては、現在では廃止された古いバージョンのBSDでのsocketコールの継承性等があるそう[^1]) 

[^1]: JonC.Snader著トップスタジオ訳「TCP/IPプログラミング徹底解説」より

##追記
stackorverflowにも同様のことが書いてあるが、
socket()にPF_\*、bind()にAF_\*を使うべきらしい[^2]
[^2]: ショーン・ウォルトン著 野村純子訳 「Linuxソケットプログラミング」より


##結論
基本的には差がないのであまり気にしなくて良さそう


##　参考ページ
[Linuxソースコード](https://elixir.bootlin.com/linux/latest/source/include/linux/socket.h#L213)
[Man Page of Socket](https://linuxjm.osdn.jp/html/LDP_man-pages/man2/socket.2.html)
[stackorverflowの解説](https://stackoverflow.com/questions/6729366/what-is-the-difference-between-af-inet-and-pf-inet-in-socket-programming)
N4606 Working Draft 2016, ISO/IEC 14882, C++ standard(28)3.9.3 CV-qualifiers [basic.type.qualifier] p80

# はじめに
N4606 Working Draft, Standard for Programming Language C++
http://www.open-std.org/jtc1/sc22/wg21/docs/papers/2016/#mailing2016-11
http://www.open-std.org/jtc1/sc22/wg21/docs/papers/2016/n4606.pdf

n4606は、ISO/IEC JTC1 SC22 WG21の作業原案(Working Draft)です。
公式のISO/IEC 14882原本ではありません。
ISO/IEC JTC1 SC22 WG21では、可能な限り作業文書を公開し、幅広い意見を求めています。
一連の記事はコード断片をコンパイルできる形にする方法を検討してコンパイル、リンク、実行して、規格案の原文と処理系(g++, Clang++)との違いを確認し、技術内容を検討し、ISO/IEC JTC1 SC22 WG21にフィードバックするために用います。
また、CERT C++, MISRA C++等のコーディング標準のコード断片をコンパイルする際の参考にさせていただこうと考えています。CERT C++, MISRA C++が標準化の動きとの時間的な擦れの確認が結果としてできれば幸いです。

## list
N4606 Working Draft 2016, ISO/IEC 14882, C++ standard(1) coding list
https://qiita.com/kaizen_nagoya/items/df5d62c35bd6ed1c3d43/


## Compiler
### clang++ --version
clang version 6.0.0 (tags/RELEASE_600/final)

### g++-7 --version
g++-7 (Homebrew GCC 7.3.0_1) 7.3.0
Copyright (C) 2017 Free Software Foundation, Inc.

#(28)3.9.3 CV-qualifiers [basic.type.qualifier]
p80

```c++:p80.cpp
// N4606 Committee Draft, Standard for Programming Language C++
// http://www.open-std.org/jtc1/sc22/wg21/docs/papers/2016/n4606.pdf 
#define msg "p80.cpp (28)3.9.3 CV-qualifiers [basic.type.qualifier]"

#include <iostream>

typedef char CA[5];
typedef const char CC;
CC arr1[5] = { 0 };
const CA arr2 = { 0 };

int main(int argc, char *argv[], char *envp[]){
  std::cout << "arr1[0]="<<arr1[0] <<" arr2=" << arr2 << std::endl;
  std::cout << msg << std::endl;
  return EXIT_SUCCESS;
}
```

```shell_session
$$ ./cppgl17.sh p80
$ clang++ p80.cpp
arr1[0]= arr2=
p80.cpp (28)3.9.3 CV-qualifiers [basic.type.qualifier]

$ g++-7 p80.cpp
arr1[0]= arr2=
p80.cpp (28)3.9.3 CV-qualifiers [basic.type.qualifier]
```

# 検討事項

　内容の出力。
# 参考資料

コンパイル用shell script C版(clangとgcc)とC++版(clang++とg++)
https://qiita.com/kaizen_nagoya/items/74220c0577a512c2d7da
Qiitaに投稿するCのStyle例(暫定)
https://qiita.com/kaizen_nagoya/items/946df1528a6a1ef2bc0d
# 文書履歴
ver. 0.10 初稿 2080415
ver. 0.11 URL追記　20230215
### 最後までおよみいただきありがとうございました。
いいね　💚、フォローをお願いします。
####  Thank you very much for reading to the last sentence.
Please press the like icon 💚　and follow me for your happy life.
jbuilderでwith_indexを使うときの注意

初歩的な内容だけど
普段のイメージでjbuilderファイル内で`with_index`を使っても、nilになる

```ruby

@array.each.with_index(1) do |e, i|
  json.index i # nil
end
```

jbuilderで使用するときは`to_a`が必要だった


```ruby

@array.each.with_index(1).to_a do |e, i|
  json.index i # 1,2,3...
end
```

同じインスタンス変数をcontrollerで使ったときは`to_a`は不要だったのになぜ・・・
理由がわかってないので、ご存じの方いたらコメントくれると嬉しいです
Visual Studio Codeを用いた簡単な正規表現検索

正規表現って便利ですが、いつも忘れてしまいますよね？って自分だけでしょうか。　　
メモを兼ね、Visual Studio Code(VScode)でよく使う、正規表現をを用いた検索置換方法を紹介します。

## 前提
VScodeの検索で「.*」をクリックして有効にすれば、正規表現による検索置換が利用できます。

![vscode_sample.png](https://qiita-image-store.s3.amazonaws.com/0/22445/ad017559-fa5a-6b47-0e63-5a98bb48eae1.png)

## よく使う正規表現
HTML,Javascript,PHPなどコード置き換えでよく使う正規表現を記載。今のところ置き換え作業に於いて、これ以外の表記はあまり使わないです。ここではHTMLを例として紹介します。

| 表記 　 　　　| 意味　　　　 | 使用例　　|
|:-------------|:-------------|:--------------|
| .+ | 1文字以上の文字列がある |　`<p>(.+)</p>` | 
| ^ | 文字列の文頭 |`<p>(^-1)</p>` | 
| $ | 文字列の文末 |`<p>(-1$)</p>` | 
| [] | セット内（[]内）の任意の1文字と |`<p>[0-9]</p>` | 
| {} | 直前の文字やグループが登場する回数を指定 |`<p>[a-z]{9}</p>` | 

| 文字指定 　　| 意味　　　　 |
|:---------------|:---------------|
| [a-zA-Z0-9]|英数半角小文字の検索 |
| \d | 数値の検索 |
| \n | 改行コードの探索 |

### ()について
正規表現を`（）`で括って検索すると、(n)でn番目のグループにマッチした文字列を`$1,$2..`で参照表示できます。

```text:()で括った検索例
<body id="(.*)">
```
```text:()で括った置換例
<body id="$1">
```
※出力結果は`$1`とならず、元の検索結果がそのまま表記される。

### 正規表現の参考
この記事に書かれている記述はごくごく一例にすぎないです。正規表現についてより詳しい內容を知りたい方はこちらから、またはググってください。

* [Visual Studio での正規表現の使用](https://msdn.microsoft.com/ja-jp/library/2k3te2cs.aspx)
* [正規表現 メタ文字一覧](http://www.megasoft.co.jp/mifes/seiki/meta.html)
* [正規表現によるマッチング](https://www.mlab.im.dendai.ac.jp/~yamada/java/regex/)

## 置き換え例
### idやClassが入ったタグを一括置き換え

```text:検索
<body id=".*">
```

```text:置き換え
<body id="置き換えしたい文字列">
```

### idやclassに関わらず、共通のタグを一括選択・置換

```text:検索
<body id="(.*)">
```

```text:置換
<body id="$1">
```
### id,classが両方挿入されていて、共通のタグを選択・置換

```text:検索
<body (.+?)="(.*)">
```

```text:置換
<body $1="$2">
```

### 関数の引数を選択・置換
```text:検索
var pos = new GLatLng(\(.*)\); // var pos = new GLatLng(100, 100); と仮定
```
```text:置換
var newPos = initMap($1) // var newPos = initGoogleMap(100, 100) となる
```
``+, [, (``など正規表現に利用される文字を文字列として検索したい場合は``\``でエスケープが必要。閉じタグや終わりの文字列``], )``はエスケープの必要はありません。

### 改行を加えた追加コードを挿入
```text:検索
<body>
```

```text:置換
<body>\n<script src="hoge.js"></srcipt>
```

### キーワードの文頭一致するの文字列のみを探索
この例では文頭の`keyword`に一致且つ、その後に続く半角英文字がある文字列を検索しています。

```text:検索
"(keyword[^a-z].+?)"
```
範囲 ping

特定のセグメントにいるIP全体に ping を1回ずつ送る

| コマンド | 開始 | 終了 |
|:--------|:--------|:--------|
|php area_ping.php| 0.0.0.0 | 255.255.255.255 |
|php area_ping.php 1| 1.0.0.0 | 1.255.255.255 |
|php area_ping.php 1 2| 1.2.0.0 | 1.2.255.255 |
|php area_ping.php 1 2 3| 1.2.3.0 | 1.2.3.255 |
|php area_ping.php 1 2 4| 1.2.3.4 | 1.2.3.4 |

```php:area_ping.php
<?php

function setval(&$area, $start, $end=null) {
  if ($end==null) $end = $start;
  $area[0] = $start;
  $area[1] = $end;
}

$area1 = [ 0, 255 ];
$area2 = [ 0, 255 ];
$area3 = [ 0, 255 ];
$area4 = [ 0, 255 ];

if (isset($argv[1])) {
  setval($area1, $argv[1]);
}
if (isset($argv[2])) {
  setval($area2, $argv[2]);
}
if (isset($argv[3])) {
  setval($area3, $argv[3]);
}
if (isset($argv[4])) {
  setval($area4, $argv[4]);
}

foreach (range($area1[0], $area1[1], 1) as $a1) {
  foreach (range($area2[0], $area2[1], 1) as $a2) {
    foreach (range($area3[0], $area3[1], 1) as $a3) {
      foreach (range($area4[0], $area4[1], 1) as $a4) {
        $ip = sprintf("%d.%d.%d.%d", $a1, $a2, $a3, $a4);
        $cmd = sprintf("ping -c1 -W1 %-16s", $ip);
        echo $cmd , ":";

        $output = [];
        $retval = [];

        exec($cmd, $output, $retval);
        echo $output[3] . PHP_EOL;
      }
    }
  }
}
```

実行例 （ping の3行目 lost = 失敗）

```
$ php area_ping.php 13 228 211
ping -c1 -W1 13.228.211.0    :1 packets transmitted, 0 received, 100% packet loss, time 0ms
ping -c1 -W1 13.228.211.1    :1 packets transmitted, 0 received, 100% packet loss, time 0ms
ping -c1 -W1 13.228.211.2    :1 packets transmitted, 0 received, 100% packet loss, time 0ms
ping -c1 -W1 13.228.211.3    :1 packets transmitted, 0 received, 100% packet loss, time 0ms
ping -c1 -W1 13.228.211.4    :1 packets transmitted, 0 received, 100% packet loss, time 0ms
ping -c1 -W1 13.228.211.5    :1 packets transmitted, 0 received, 100% packet loss, time 0ms
ping -c1 -W1 13.228.211.6    :1 packets transmitted, 0 received, 100% packet loss, time 0ms
ping -c1 -W1 13.228.211.7    :1 packets transmitted, 0 received, 100% packet loss, time 0ms
ping -c1 -W1 13.228.211.8    :1 packets transmitted, 0 received, 100% packet loss, time 0ms
ping -c1 -W1 13.228.211.9    :1 packets transmitted, 0 received, 100% packet loss, time 0ms
ping -c1 -W1 13.228.211.10   :1 packets transmitted, 0 received, 100% packet loss, time 0ms
ping -c1 -W1 13.228.211.11   :1 packets transmitted, 0 received, 100% packet loss, time 0ms
ping -c1 -W1 13.228.211.12   :1 packets transmitted, 0 received, 100% packet loss, time 0ms
ping -c1 -W1 13.228.211.13   :1 packets transmitted, 0 received, 100% packet loss, time 0ms
ping -c1 -W1 13.228.211.14   :1 packets transmitted, 0 received, 100% packet loss, time 0ms
ping -c1 -W1 13.228.211.15   :--- 13.228.211.15 ping statistics ---
ping -c1 -W1 13.228.211.16   :1 packets transmitted, 0 received, 100% packet loss, time 0ms
ping -c1 -W1 13.228.211.17   :1 packets transmitted, 0 received, 100% packet loss, time 0ms
ping -c1 -W1 13.228.211.18   :--- 13.228.211.18 ping statistics ---
: （以下続く）
```
kotlinの通信ライブラリFuelとgson連携

# Fuel
https://github.com/kittinunf/Fuel

# 通信処理

```kotlin
// 非同期で実行
Fuel.get("url").responseObject(Foo.Deserializer()) { request, response, result ->
    val (data, error) = result
    error?.let {
        print(it.message)
    }
    data?.let {
        // 成功時の処理
    }
}
```

# レスポンス
```kotlin

data class Foo(
        var bar: String
) {
  class Deserializer : ResponseDeserializable<List<Foo>> {
       override fun deserialize(content: String): <List<Foo>>? {
          // snake_caseから変換
          val gson = GsonBuilder().setFieldNamingPolicy(FieldNamingPolicy.LOWER_CASE_WITH_UNDERSCORES).create()
          return gson.fromJson(content, List<Foo>::class.java)
       }
   }

}
```

# 参考
https://www.youtube.com/watch?v=14RgaptG510
Mac OSXのBrewでscala環境インストール

## 環境
OSX 10.12.6

## javaインストール
```
$ brew tap caskroom/versions
$ brew cask install java8
```

## anyenv インストール
```
git clone https://github.com/riywo/anyenv ~/.anyenv
echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.bash_profile
echo 'eval "$(anyenv init -)"' >> ~/.bash_profile
exec $SHELL -l  # ~/.bash_profile の設定をリロード
```

※参考 [anyenvでrbenvとかjenv（java）とかpyenvとか管理すると便利 - (-> % read write unlearn)](http://hatappo.hatenadiary.jp/entry/2015/07/10/205536)

## scalaインストール
> [git][* master]:~/dotfiles/ $ sbtenv install sbt-1.1.1
sbt-install: cannot find 'gpg' executable needed for verifying package signatures

とでたので

```
$ brew install gpg
```

### sbtインストール
```
$ sbtenv install sbt-1.1.1
```

> Checking GPG signature...
gpg: ディレクトリ'/Users/koishi/.gnupg'が作成されました
gpg: keybox'/Users/koishi/.gnupg/pubring.kbx'が作成されました
gpg: 土  2/10 06:45:39 2018 JSTに施された署名
gpg:                RSA鍵99E82A75642AC823を使用
gpg: 署名を検査できません: No public key

上記エラーの対策する

```
$ gpg --keyserver hkp://keyserver.ubuntu.com:80 --recv 99E82A75642AC823
```

もう一度

```
$ sbtenv install sbt-1.1.1
```

警告出るがインストールはできた。
> Checking GPG signature...
gpg: 土  2/10 06:45:39 2018 JSTに施された署名
gpg:                RSA鍵99E82A75642AC823を使用
gpg: "sbt build tool <scalasbt@gmail.com>"からの正しい署名 [不明の]
gpg: *警告*: この鍵は信用できる署名で証明されていません!
gpg:       この署名が所有者のものかどうかの検証手段がありません。
 主鍵フィンガープリント: 2EE0 EA64 E40A 89B8 4B2D  F734 99E8 2A75 642A C823
Extracting files...
sbt-1.1.1 installed.

※参考[sbtenv installでGPGのpublic keyがないと怒られたときの対処法 - Qiita](https://qiita.com/sawadashota/items/e9073ea3e68da132dacb)

```
$ sbt console
```
で立ち上がればOK。
Cognito+Lambda+DynamoDB+S3で作るシングルページっぽいアプリケーション

##GihHub URL
https://github.com/katsushi-machida/cognito_lambda_dynamo_sample

##サンプル
Cognitoでのログインからの各種AWSサービス連携を試したかったのでシングルページアプリケーション(※)のサンプルを作ってみました。
※ログイン(とユーザー作成)は分離しているので、シングルではない
備忘記事ですが、何かの参考になると嬉しい。

イメージとしては↓のような感じ。
![image.jpg](https://qiita-image-store.s3.amazonaws.com/0/118374/01f90a6d-7c6f-c931-f26e-bf81f1655d66.jpeg)


画面デザインはMaterializeというCSSフレームワーク使っています。
http://materializecss.com/
![materialize.jpg](https://qiita-image-store.s3.amazonaws.com/0/118374/37407d96-54f8-f37f-b839-3189fa65774d.jpeg)


##サンプルの内容
ユーザー作成、ログインをCognitoで行い、ログイン後にAPIGateway経由でLambdaをキックしてDynamoDBをCRUDする。
ユーザー作成時の認証はemailで認証番号を送付する形で行います。
左がログイン画面、右がメインのページ
![screen_image.jpg](https://qiita-image-store.s3.amazonaws.com/0/118374/c9370d04-c8db-f300-4497-bf7a89e31f76.jpeg)
***

##使用しているAWSのサービス
+ Amazon Cognito：
認証、ユーザー作成等
+ AWS Lambda：
DynamoDBへのアクセス
+ Amazon API Gateway：
LambdaのWebAPI化
+ Amazon DynamoDB：
ユーザーデータ、各種データの格納
+ Amazon S3：
ページ公開用

##参考にしたサイト様
[Cognito JavaScript公式ガイド](https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/using-amazon-cognito-user-identity-pools-javascript-examples.html "Cognito JavaScript公式ガイド")
[JavaScriptで、Cognitoコード認証フローを実装したまとめ](https://qiita.com/gcmae/items/9b4ab7ea35e378da2c70 "JavaScriptで、Cognitoコード認証フローを実装したまとめ")
[Amazon Cognito User Poolsを使って、webサイトにユーザ認証基盤を作る](https://qiita.com/horike37/items/1d522f66452d3abe1203 "Amazon Cognito User Poolsを使って、webサイトにユーザ認証基盤を作る")
[cognitoを使ってログイン画面を作ってみた！](https://qiita.com/Yuki_BB3/items/4286545e8b889ec13088 "cognitoを使ってログイン画面を作ってみた！")
[amazon-cognito-identity-jsがセッション情報をsessionStorageに保存できるようになった](https://qiita.com/kyane/items/e3dc8d4d22236fb2a4c4 "amazon-cognito-identity-jsがセッション情報をsessionStorageに保存できるようになった")
[APIGateWay+Lambda+DynamoDB](https://qiita.com/uogokoro/items/e79e0b97fb4911a339ec "APIGateWay+Lambda+DynamoDB")

##必要なライブラリ
・jquery
・AWS関連
https://github.com/aws/aws-sdk-js
https://github.com/aws/amazon-cognito-js
https://github.com/aws/amazon-cognito-auth-js
https://github.com/aws/amazon-cognito-identity-js
・上記に加えて、WebAPI用のJS(Amazon API Gatewayのコンソールから取得する)

・Materialize(CSSフレームワーク)
http://materializecss.com/



##使用方法
+ Materializeのライブラリを[_resource/css]、[_resource/fonts]、[_resource/js]に配置する
+ JS関係のライブラリを[_resource/js]に配置する
+ config.jsにcognito関連の設定を記述する
+ APIGatewayのWebAPI作成後に、API用のJSファイル[api-gateway]を[_resource/js/]に配置
+ [index.js]64行～にAPIGatewayのAPIのコール処理等を記載

##AWS関連で詰まったところ
Amazon Cognito
・IAMのロールで認証前[Unauth]と認証済[Auth]のロールが追加される。今回は後者にAPIGatewayの権限を追加
・cognitoのセッションが残る問題(参考サイトを参照)

Amazon API Gateway
・Cognitoとの連携は[API]＞[オーソライザー]から、Cognitooユーザープールを追加後
　APIの認証設定で追加したオーソライザーを選択する
・IAMのロールに権限を与える際にサービス選択で、【API Gateway】ではなく【ExecuteAPI】を選択する

Amazon S3
・静的ウェブサイトのホスティングをONにする＆公開設定を行う
RxJSでいろいろなパターンのクリックイベントを取得する

RxJSのストリームの扱いに慣れるためにいろいろ試してみたメモ。
サンプルコードではインポートの記述を省略しているので、実際の動きはstackblitzで確認するといいかもです。

## 基本編

`fromEvent`を使って、プリミティブなクリックイベントを取得してみます。

次のようなHTMLを用意します。

```html:index.html
<button id="button">押してね</button>
```

`fromEvent`の第一引数に対象のHTMLElementを第二引数にイベント名を入力します。

```typescript:index.ts
const button: HTMLElement = document.getElementById('button');

// click
const click$: Observable<Event> = fromEvent(button, 'click');
// mousedown
const mousedown$: Observable<Event> = fromEvent(button, 'mousedown');
// mouseup
const mouseup$: Observable<Event> = fromEvent(button, 'mouseup');
```

それぞれのイベントストリームは、`pipe()`してゴニョゴニョするなり`subscribe`するなり好きに扱う事ができるようになります。

https://stackblitz.com/edit/rxjs-click-events?file=index.ts


## ダブルクリック

まず、基本編同様に`fromEvent`で`dblclick`イベントをハンドリングする方法があります。

```typescript:index.ts
const button: HTMLElement = document.getElementById('button');

// dblclick
const dblclick$: Observable<Event> = fromEvent(button, 'dblclick');
```

https://stackblitz.com/edit/rxjs-dblclick-event?file=index.ts

別の方法として、次のようにハンドリングする用法も考えられます。
(ダブルクリックの間隔をアプリケーション側で調整したい場合など?)

```typescript:index.ts
const button: HTMLElement = document.getElementById('button');

const click$: Observable<Event> = fromEvent(button, 'click');

const dblclick$ = click$.pipe(
  bufferTime(1000),
  map((event: Event[]) => event.length),
  filter((eventLength: number) => eventLength === 2),
);

```

`bufferTime`で一定期間のイベントストリームをまとめて流し、そのイベント数をフィルターして条件にあったクリックイベントのみを取得しています。

https://stackblitz.com/edit/rxjs-dblclick-event-2?file=index.ts

## n秒間にx回クリック

これは、ダブルクリックの2つめとほぼ同じですが、次のように実現できますね。

```typescript:index.ts
const button: HTMLElement = document.getElementById('button');

const click$: Observable<Event> = fromEvent(button, 'click');

// 5 times in 2 seconds
const dblclick$ = click$.pipe(
  bufferTime(2000),
  map((event: Event[]) => event.length),
  filter((eventLength: number) => eventLength === 5),
);
```

https://stackblitz.com/edit/rxjs-x-times-in-n-seconds-event?file=index.ts

## 長押し

```typescript:index.ts
const button: HTMLElement = document.getElementById('button');

const mouseDown$: Observable<MouseEvent> = fromEvent(button, 'mousedown');
const mouseUp$: Observable<MouseEvent> = fromEvent(button, 'mouseup');

// long press 2 seconds
const longpress$ = mouseDown$.pipe(
  mergeMap((e) => {
    return of(e).pipe(
      delay(2000),
      takeUntil(mouseUp$),
    );
  }),
);
```

ポイントは、subscribeをキャンセルする条件(takeUntil)を`mergeMap`で返す内側のObservableに対して設定することです。
これを、外側(全体)のObservableに対して設定してしまうと、このイベントが一回発火した以降、再度発火しなくなってしまいます。

https://stackblitz.com/edit/rxjs-longpress-event?file=index.ts

##　終わりに
RxJS楽しいです(小並感)。
これ何に使うの感は若干ありますが、上記で紹介したストリームをいい感じに組み合わせて複雑なパターンを作り、「隠しページへのリンクを配置する」などといった使い方ができるのではないでしょうか。
案件に参画してからスムーズに進めるために抑えること

## 目的

ここでは、案件に参画してからよりよい滑り出しを切るために抑えたらよい観点を紹介します。
参画時に活かせればと。
基本的に1〜2年目くらいで一人で現場に入る人向けに作った観点なので、そこまで細かい内容は書いてません。

## 案件の内容を知る

どんな案件かを知るための5W1H

- Who: サービスの元請けは誰か。どのような商流か。
- Why: この案件の目的。Whatに含まれるニュアンスがありますが、要件整理や仕様バグを発見するために必要な内容です。
- What: どんなサービスか（さらに、担当するのはどんな機能か）
- When: いつをターゲットにしているのか、そのためのフェーズのスケジュールはどんなか
- Where: 現場の場所を示しそうですが場所だと薄いので、ここでは現場の設備的ルールのこととします。
- How: ここには書ききれないので下に記載。

まず最初に最低限でもこれらを抑えます。

以下、更に詳細を書きます。

## 現場ルールを覚える(Where)

- 就業時間は何時から何時か
- トイレはどこか
- セキュリティルールはどんなか
 - 入館、入室方法はどんなか
 - 非常階段は使えるか
- 作業フロアはどこか
- 自販はどこか
- お昼はどうするか
- コンビニはどこか
- 勤怠連絡はどのように、誰にするか
- 服装はどんなか

## 体制を覚える (How)

- どのうような体制か
 - マネージャー、リーダー、共通チーム、SE、PG、テスター、デザイナー、企画など、誰が何を担当し、自分が何を担当するのか。窓口などある場合、誰がなんの窓口か。
- 質問する場合、誰に聞くか
- 業務知識の有識者はだれか、技術有識者はだれか （役割に関係しているが役割以外でも詳しい人がいる場合がある）
- スキルが低い人ばかりで構成されていないか → 稼働大の可能性大
- 最低でも自分が関連する人たちはどのようなキャラクターか (コミュニケーションをとる上で意識した方がよい。)
- 現場の空気、パワーバランスはどのようになっているか (コミュニケーションをとる上で意識した方がよい。)

## ドキュメントの場所を覚える (How)

- ドキュメント用サーバーはなにか？どこか？
- ドキュメントのフォルダ構成はどのようになっているか
 - 要件
 - 基本設計
  - 詳細設計
 - テスト
 - 受領資料（委託会社からの提出物など）
- Wikiの運用はあるか

## コミュニケーションツールは何か (How)

- メールはどのように運用しているか
- チャットツールの運用はあるか、どのように運用しているか

## ソース管理を覚える (How)

PGの場合に必要な観点です。

- ソースはどこにあるか
- バージョン管理のブランチモデルはどんなか
 - 成果物をどんなもので、どのように提出するか
- FTP(SFTP)ツールでファイルサーバーにアクセスはする必要があるか？できるか？

## アーキテクチャを覚える (How)

PGの場合に必要な観点です。

- プロジェクト独自のアーキテクチャの資料はあるか。ある場合、目を通す。
- ライブラリのインポートなどはだれが行うのか
 - ライセンス管理はだれがしているのか

## 製造をスムーズにするために (How)

PGの場合に必要な観点です。

- 設計書がある場合、設計書の読み方、構成を覚える
- サンプルコードはあるか
- どのチーム、誰が先行してすすんでいるのか→誰を真似すればよいのか
- 単体テストはどのようにすすめるか。（結合、総合、などのテストも同様。テストに対する意識の仕方のポイントはここでは書きません。）
 - 単体テスト仕様書はどのようなフォーマットで作るか


ざっとこんな感じです。
Vimで単語補完 ( with deoplete )

# Summary

`Vim`で単語補完をしてみる

単語補完には`deoplete`というプラグインをつかう

最小(`minimal`)の環境を作ることで雰囲気をつかむ

### Environment
```
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.13.4
BuildVersion:	17E199

$ vim --version
VIM - Vi IMproved 8.0 (2016 Sep 12, compiled Apr  1 2018 01:22:42)
macOS version
Included patches: 1-1655
Compiled by Homebrew

$ pip3 --version
pip 10.0.0 from /usr/local/lib/python3.6/site-packages/pip (python 3.6)

$ pip3 show neovim
Name: neovim
Version: 0.2.4
Summary: Python client to neovim
Home-page: http://github.com/neovim/python-client
Author: Thiago de Arruda
Author-email: tpadilha84@gmail.com
License: Apache
Location: /usr/local/lib/python3.6/site-packages
Requires: msgpack, greenlet
Required-by: 
```

### Install 

`vim, python3.6-neovim`がなければインストールする

```
$ brew install vim

$ pip3 install neovim ( or pip3 install --upgrade -I neovim )
```

`vim plugins`のインストール

```
// 作業フォルダ foo を作成
$ mkdir foo/
$ cd foo/

// プラグインをダウンロード
$ git clone --depth 1 https://github.com/Shougo/deoplete.nvim
$ git clone --depth 1 https://github.com/roxma/nvim-yarp
$ git clone --depth 1 https://github.com/roxma/vim-hug-neovim-rpc

// minimal.vimを作成
$ vim minimal.vim

    set runtimepath+=./deoplete.nvim
    set runtimepath+=./nvim-yarp
    set runtimepath+=./vim-hug-neovim-rpc
    let g:deoplete#enable_at_startup = 1
    set nocompatible
    syntax enable
    filetype plugin indent on
```

### `deoplete`を試してみる
```
$ vim -N -u minimal.vim

    foo
    bar
    baz

    fo  // ここでポップアップに foo [-] A , fo [-] A とでたらオーケー！
```
DataTestMethodの使用例

# DataTestMethod

mstestのパラメーター化テストでDataRowにTupleを使用すると「error CS0182: 属性引数は、定数式、typeof 式、または属性パラメーター型の配列の作成式でなければなりません。」とエラーになる。
DataRowの代わりに、DynamicDataを使用してTupleを含むテストデーターを返すメソッドまたはプロパティを指定する。

```c#:UnitTest1.cs
using Microsoft.VisualStudio.TestTools.UnitTesting;
using System.Collections.Generic;

namespace UnitTestProject1
{
    [TestClass()]
    public class UnitTest1
    {
        [DataTestMethod()]
        [DataRow("text1", 1)]
        [DataRow("text2", 2)]
        public void DataRowTest(string text, int number)
        {
            var tuple = (text, number);
            Assert.AreEqual(tuple.text, text);
            Assert.AreEqual(tuple.number, number);
        }

        public static IEnumerable<object[]> GetDynamicDataTestData()
        {
            yield return new object[] { ("text1", 1), "text1", 1 };
            yield return new object[] { ("text2", 2), "text2", 2 };
        }

        [DataTestMethod()]
        [DynamicData(nameof(GetDynamicDataTestData), DynamicDataSourceType.Method)]
        public void DynamicDataTest((string text, int number) tuple,
            string text, int number)
        {
            Assert.AreEqual(tuple.text, text);
            Assert.AreEqual(tuple.number, number);
        }
    }
}
```
iPadで英字入力しているときにで２回連続半角ハイフン"-"を打つと全角ハイフン"—"に勝手に変換されてしまう問題

iPadで英字入力しているときにで２回連続半角ハイフン"-"を打つと全角ハイフン"—"に勝手に変換されてしまうケースがあります。

解決方法 : 

設定＞一般＞キーボード「スマート句読点」のチェックを外し、アプリを再起動する。
Macで２回連続半角ハイフン"-"を打つと全角ハイフン"—"に勝手に変換される問題

Mac英字入力しているときにで２回連続半角ハイフン"-"を打つと全角ハイフン"—"に勝手に変換されてしまうケースがあります。

解決方法 : 

システム環境設定＞キーボード「ユーザー辞書」タブの「スマート引用符とスマートダッシュを使用」のチェックを外し、アプリを再起動する。
gradleを認証付きプロキシ下でコマンドラインから使う

# 前座

[開発なのに低スペPC](http://b.hatena.ne.jp/entry/308945518/comment/erukiti)しかなく、AndroidStudioでコーディングなんてできないぜって人や、人から貰ったソースコードを簡単にビルドしたいなんてときに<code>gradlew</code>コマンドでターミナル上からビルドすることはよくあるとおもう。

``` sh
$ ./gradlew assembleDebug
```

# 問題

ところが、最近になって突然、以下のエラーが出るようになった。

``` sh
Exception in thread "main" java.lang.RuntimeException: java.io.IOException: Unable to tunnel through proxy. Proxy returns "HTTP/1.1 407 Proxy Authentication Required"
```

認証付きプロキシを使って外部と接続してると、その認証がうまくいっていない。エラーの内容からすると、プロキシを通そうとしているんだけど、認証は通らないようだ。奇妙なことに、AndroidStudioではうまくビルドできている[^1]。


# 解決

Java8のどこからかのバージョンからBasic認証が禁止されていたみたい[^2]。そしてこれを無効化し、Basic認証を使えるようにするにはコマンドライン引数を渡してやればいいみたい。

<code>gradlew</code>(Windowsの場合<code>gradlew.bat</code>)を開き、以下を追加する。

``` sh
DEFAULT_JVM_OPTS="-Djdk.http.auth.tunneling.disabledSchemes=\"\""
```

これで通った！！

# 参考情報
[^1]: もちろんこれは設定している。[Android Studio の設定 | Android Studio](https://developer.android.com/studio/intro/studio-config.html?hl=ja)
[^2]: [JavaでHTTPSのサイトに認証付きプロキシ経由でアクセスしようとすると407エラー |
 Qiita](http://qiita.com/kaakaa_hoe/items/d4fb11a3af035a287972)
Python > itertools > リストの値の全組合せを得る > combinations()

```txt:動作環境
GeForce GTX 1070 (8GB)
ASRock Z170M Pro4S [Intel Z170chipset]
Ubuntu 16.04.4 LTS desktop amd64
TensorFlow v1.7.0
cuDNN v5.1 for Linux
CUDA v8.0
Python 3.5.2
IPython 6.0.0 -- An enhanced Interactive Python.
gcc (Ubuntu 5.4.0-6ubuntu1~16.04.4) 5.4.0 20160609
GNU bash, version 4.3.48(1)-release (x86_64-pc-linux-gnu)
scipy v0.19.1
geopandas v0.3.0
MATLAB R2017b (Home Edition)
ADDA v.1.3b6
gnustep-gui-runtime v0.24.0-3.1
PyMieScatt v1.7.0
```

### 星形のFill

[geometry > numpy > star shaped (星形) の座標を得る | Matplotlibでの描画 > v0.3:座標は得られた | v0.4: モジュール化](https://qiita.com/7of9/items/e23c81db584ffae7edd3)

- 星形の頂点座標が与えられている
- 星形の内部を塗りつぶりたい

中心から辺の交点を使おうとしている。
頂点座標から辺を取得するには「頂点の組合せ」を使うだろうか。

### リストの値の全組合せを得る

itertoolsを使ってみる。
https://docs.python.jp/3/library/itertools.html#itertools.combinations

```test_permutation_180415.py
import numpy as np
from itertools import combinations

pi = [3, 1, 4, 1]

perms = []
for aperm in combinations(pi, 2):
	perms += [aperm]

print(perms)

```

```txt:run
$ python3 test_permutation_180415.py 
[(3, 1), (3, 4), (3, 1), (1, 4), (1, 1), (4, 1)]
```

### code v0.2

- Numpyを使用してなかったため、import numpyを除去
- 実装内容はcombinationなので、ファイル名を変更

```test_combination_180415.py
from itertools import combinations

pi = [3, 1, 4, 1]

perms = []
for aperm in combinations(pi, 2):
	perms += [aperm]

print(perms)

```

```shell-session
$ python3 test_combination_180415.py 
[(3, 1), (3, 4), (3, 1), (1, 4), (1, 1), (4, 1)]
```

@LouiS0616 さん
ありがとうございます。
Gitでソースコードを自動でフォーマットする　などなど

**目指すは完全自動化**

# gitのcommitでフォーマット自動整形とプログラムチェックを行う
` .git/hooks/pre-commit`ファイルを作成する。

``` config
#!/bin/sh
if git rev-parse --verify HEAD >/dev/null 2>&1
then
    against=HEAD
else
    # Initial commit: diff against an empty tree object
    against=4b825dc642cb6eb9a060e54bf8d69288fbee4904
fi

# Redirect output to stderr.
exec 1>&2
IS_ERROR=0

# コミットされるファイルのうち、phpのみ対象とする。
for FILE in `git diff-index --name-status $against -- | grep -E '^[AUM].*\.php$'| cut -c3-`; do
        # シンタックスのチェック
        if php -l $FILE; then

                # PSR準拠でコードを書き換える。
                php-cs-fixer fix $FILE --rules=@PSR2
                git add $FILE

                # PHPMDで未使用変数などのチェックをする。
                if ! phpmd $FILE text unusedcode,codesize,naming,controversial; then
                        IS_ERROR=1
                fi
        else
                IS_ERROR=1
        fi

done
exit $IS_ERROR
```

git commit時にチェックがかかる。
※途中だけどどうしてもチェックインしたい場合は`--no-verify`オプションをつける
`git commit -m "commit message" --no-verify`

# php-cs-fixerをインストールする。
windowsでgitコミット時にフォーマット自動整形を行う。


1.インストールする

```
composer global require friendsofphp/php-cs-fixer
``` 

2.パスを設定する
C:\Users\{ユーザ名}\AppData\Roaming\Composer\vendor\bin　配下にパスを設定する。

# phpmdをインストールする
1.インストールする
使用されていない変数やメソッドや、メソッド名(キャメルケース)などをチェックする。
コードを綺麗にするツール。

```
composer global require phpmd/phpmd=*
```

# 改行コードは LFに統一する
```
git config --global core.autocrlf input
```
inputを設定すると、commitはCRLFをLFに変換し、取得時は変換しない(LFのまま)となる。
globalに設定する。

```
git config --global --list
```
configを確認できる。
gitは3つのconfigを設定できる。
- system
- global
- local

# インデントはタブ4つにする
リモートリポジトリはタブ4つに統一される。

1.attributesを作成し、対象ファイルを定義する。

`.git/info`に`attributes`を作成する。

```
*.js   filter=tabspace
*.html filter=tabspace
*.sql  filter=tabspace
```
対象とするファイルを列挙する。

2.commit時に変換するよう設定する。

```
git config --global filter.tabspace.smudge "unexpand --tabs=4 --first-only"
git config --global filter.tabspace.clean "expand --tabs=4"
```

# コミットメッセージにissue noが書かれているかチェックする
コミットメッセージにissue noが書かれているかどうかチェックする。
issueがない場合は「no issue」と書く。

`.git/hooks/commit-msg`を作成する。

```
#!/bin/sh

# Redirect output to stderr.
exec 1>&2
IS_ERROR=0

# メッセージを取得する。
msg=`cat $1`

if [[ $msg =~ ^#|^"no issue" ]] ;
then
  :
else
  echo "コメントはissueNo(#12)かno issue を先頭に記入すること"
  IS_ERROR=1
fi

exit $IS_ERROR;
```