OmniAICreator/Qiita-1.07M huggingface dataset:
Pythonを動かした際に出たエラー

#前提

Mac OS

#ESP32の環境構築の際に出たエラー

ESP32のget.pyを実行しようとした際に出たエラー。

```
$ python get.py
```

```
Failed to import the site module
Traceback (most recent call last):
  File "/Users/[       ]/anaconda3/lib/python3.6/site.py", line 541, in <module>
    main()
  File "/Users/[       ]/anaconda3/lib/python3.6/site.py", line 522, in main
    known_paths = addusersitepackages(known_paths)
  File "/Users/[        ]/anaconda3/lib/python3.6/site.py", line 282, in addusersitepackages
    user_site = getusersitepackages()
  File "/Users/[        ]/anaconda3/lib/python3.6/site.py", line 258, in getusersitepackages
    user_base = getuserbase() # this will also set USER_BASE
  File "/Users/[         ]/anaconda3/lib/python3.6/site.py", line 248, in getuserbase
    USER_BASE = get_config_var('userbase')
  File "/Users/[         ]/anaconda3/lib/python3.6/sysconfig.py", line 601, in get_config_var
    return get_config_vars().get(name)
  File "/Users/[         ]/anaconda3/lib/python3.6/sysconfig.py", line 550, in get_config_vars
    _init_posix(_CONFIG_VARS)
  File "/Users/[         ]/anaconda3/lib/python3.6/sysconfig.py", line 421, in _init_posix
    _temp = __import__(name, globals(), locals(), ['build_time_vars'], 0)
ModuleNotFoundError: No module named '_sysconfigdata_m_darwin_darwin'
```

Anacondaに導入したPython3.6とMacにデフォルトで導入されているPythonが入っていて、pythonコマンドがAnacondaに導入されているPythonを呼び出している。Anaconda環境内ではないので、エラーを吐いているくさい。

#解決策

Pythonコマンドのパスを変更(Anaconda -> 標準Python)。

```
$ which python
```
標準で導入されているpythonの位置を探す。

```
/usr/bin/python
```

上のパスに応じて下のようにパスを設定。

```
cd ~
vim .bash_profile
```

今回はvimで変更。vimの挿入モードに変更するには[i]を押す。
Vim参考は　https://qiita.com/hide/items/5bfe5b322872c61a6896

PYTHONPATHを変更する。

```_bash.profile
export PATH="/usr/bin:$PATH"
```

```
source .bash_profile
```

これで一応get.pyが実行できる。
photoshopの行高とトラッキングをCSSにする

##行高(line-height)



###行高 ÷ font-size 



font-size　20px
行高　36px
の場合



```css
font-size: 20px;
line-height: 1.8;
```


##トラッキング(letter-spacing)
  
###トラッキング数値 ÷ 1000


VA(バーティカルアライン)が100
の場合



```css
letter-spacing: 0.01em;
```


以上
【ブラックジャック】Aの1 or 11問題について

# はじめに
こちら[プログラミング入門者からの卒業試験は『ブラックジャック』を開発すべし](https://qiita.com/hirossyi73/items/cf8648c31898216312e5)を読みまして、面白そうなのでこの問題を使って大学のサークルでプログラミングコンテストをしました。
そのときにみんな苦労していたのが、「Aを1でも11でも扱えるようにするには？」という点です。
人によって
・逐次プレイヤーにAを1か11どちらで扱うか尋ねる
・11で計算して、バーストした時点で1と計算する
などの方法で解決していました。

僕は別の戦略で解いたのでその話をします。
言語はc++です。

# 戦略
得点は整数型で扱っている人がほとんどでしたが、そうなるとそのA問題解決のロジックを得点自身でなく外部から解決してやらなければなりません。
そうでなく、新たにScoreクラスを導入し、「Aは1か11か」という両方の可能性を内包したまま演算できるようなものを考えます。
そのために内部パラメータとして、今のスコアが取りうる可能性をすべて保持しておきます。
例えば、
「3を引く」 -> (score: 3)
↓
「Aを引く」 -> (score: 4, 14)
↓
「5を引く」 -> (score: 9, 19)
↓
「Aを引く」 -> (score: 10, 20, 30)

みたいな感じです。

# コード
```cpp
class Score{
    vector<int> candidates;
  public:
    Score(int n = 0){
      if(n != 1 && n <= 9){
        candidates.push_back(n);
      }else if(n >= 10){
        candidates.push_back(10);
      }else{
        candidates.push_back(1);
        candidates.push_back(11);
      }
    }
    Score operator+(Score& s){
      Score new_score(0);
      for(auto& c1 : candidates){
        for(auto& c2 : s.candidates){
          new_score.candidates.push_back(c1 + c2);
        }
      }
      return new_score;
    }
    Score& operator+=(Score s){
      vector<int> new_candidates;
      for(auto& c1 : candidates){
        for(auto& c2 : s.candidates){
          new_candidates.push_back(c1 + c2);
        }
      }
      candidates = new_candidates;
      return *this;
    }

    bool check_all(function<bool(int)> func){
      for(auto& c : candidates){
        if(!func(c)) return false;
      }
      return true;
    }
    bool find(function<bool(int)> func){
      for(auto& c : candidates){
        if(func(c)) return true;
      }
      return false;
    }

    bool all_greater_than(int n){
      return check_all([&n](int a){ return a > n; });
    }
    bool exists_greater_than(int n){
      return find([&n](int a){ return a > n; });
    }
    bool all_less_than(int n){
      return check_all([&n](int a){ return a < n; });
    }
    bool exists_less_than(int n){
      return find([&n](int a){ return a < n; });
    }

    bool exists_greater_than(Score s){
      for(auto& c2 : s.candidates){
        if(exists_greater_than(c2)) return true;
      }
      return false;
    }
  };

```

内部パラメータcandidatesが得点の候補を保持するコンテナです。

コンストラクタでAが来た時にcandidatesに1と11両方がプッシュされます。

Score型同士の足し算はオペレータオーバーロードで実装しました。慣れていないのでご指摘あればお願いします。

得点の候補の[すべて/一つでも]整数と比較したいので以下のメソッドを実装しました。
all_less_than (候補すべてが整数nより小さい)
all_greater_than (候補全てが整数nより大きい)
exists_less_than (候補のうち一つでも整数nより小さい)
exists_greater_than (候補のうち一つでも整数nより大きい)
なお、比較だからといって比較演算子(< > <= >=)をオーバーロードして実装してはいけません。オペレータオーバーロードは演算の意味に誤解を招くときは使うべきでないからです。

また勝利判定用に「自身の得点候補があるスコア型の得点候補に対して一つでも大きな数字を持っているかをチェックする」関数を用意しました。

# 使用例
以下は手札のカードの合計を返す関数です。

```cpp
Score TotalScore(vector<Card> hand){
    Score total(0);
    for(auto& c : hand){
      total += c.score;
    }
    return total;
}
```

このようにAが1か11か外から考慮することなく演算ができます。


# あとがき
頑張って実装してみましたが、Aを引いた時しか例外が起きないのにそれを吸収するためにここまで拡張するのはやりすぎな気がしてきました。
でも面白かったので満足です。
ご指摘ご意見ありましたらコメントどうぞ。
Mocha用のテストファイルでESLintエラー'describe' is not defined no-undef

# はじめに

長いので、興味のない人は [TL;DR](#tldr) まで飛ばしてください。

JavaScriptを綺麗な状態で保つためになくてはならない存在のESLintだが、それが素のJavaScriptではなく、mocha用のテストファイルだと話が変わる。
ファイル内で定義していない関数、`describe`や`it`を使うからだ。
そうなってくると、プログラムがエラーだらけになってくる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/83691/b47547e7-8289-15ed-ada1-e57601c0a413.png)
しかし、これだけのためにテストファイルに対して、ESLintを無効にするのももったいないので、何か回避する方法が無いのか調べてみてもルール単位、ここでは`no-undef`を無効にする方法しか日本語の解説が見つからなかったので、同じ様な事態になった人の助けになればとこの記事を書く。


# TL;DR

ソースコードの一行目に

```js
/* eslint-env mocha */
```
と書く。それだけ。
一行目じゃなくても、mocha関連の関数が出てくる前に書けば無効になるが一行目に書いたほうがスッキリしていいだろう（多分）
ただ、`//`から始まるコメントだと機能しない

# [Specifying Environments](https://eslint.org/docs/3.0.0/user-guide/configuring#specifying-environments)

実は、デフォルトでESLintの全てのテスト変数をグローバル変数に設定してくれる環境設定、`mocha`があって、JSONなら

```json
{
    "env": {
        "mocha": true
    }
}
```
のように書けばいいのですが、そうすると全てのファイル、テストファイル以外のファイルまで、mochaのテスト変数がグローバル変数として扱われるので、万が一、`describe`とか`it`を定義していなくても、`no-undef`に反応していのです。これを解決するために次に書く方法を使用します。

# [Specifying Globals](https://eslint.org/docs/3.0.0/user-guide/configuring#specifying-globals)

ESLintにはプログラム内のコメントでグローバル変数の設定やルールの制御を行うことができます。
ここで、単純に`describe`や`it`などをグローバル変数として登録しても良いのですが、先程書いた、環境設定の`mocha`を有効にすれば後から見たときに１ミリぐらい分かりやすくなるだろう。
環境設定を変えるには

```js
/* eslint-env ... */
```
と書けばいいので`mocha`を有効にするには

```js
/* eslint-env mocha */
```
と書けばいい。

# あとがき

日本語の解説がなかったから書いたものの、よく探してみたら公式のドキュメントにそのまま乗ってたりするので記事にするほどでもないなと思ったりと...まぁ１ミリぐらい誰かの役に立てば。終わり。

# 参考

[Configuring ESLint - ESLint - Pluggable JavaScript linter](https://eslint.org/docs/3.0.0/user-guide/configuring)

[ESLintのコメントでのルール制御 - Qiita](https://qiita.com/nju33/items/2d0cfea4fffbfdbff87a)
AWS Step FunctionsのJSONを生成するPythonプログラムを作ってみた

# はじめに

最近、現在のプロジェクトのワークフローツールとして[AWS Step Functions](https://docs.aws.amazon.com/ja_jp/step-functions/latest/dg/welcome.html)を採用することになりました。
Step Functionsが何かについては上のリンクを見ていただければわかるかと思います。まだ使い始めたところですが、Step Functionsを使うことでLambda等をつなぐワークフローのロジックを比較的低い学習コストで実現できそうで、これから本格的に使っていこうと思っています。

# 問題点
現在のプロジェクトのAWSインフラはすべてCloudFormationを使って構築しているので、Step FunctionsもCloudFormationで構築、管理したいと考えているのですが、ここに少し問題があります。
CloudFormationはインフラをJSON/YAMLで管理するものですが、現在のプロジェクトでは直接JSON/YAMLを書くのではなく、Pythonの [troposphere](https://github.com/cloudtools/troposphere) というライブラリを使っています。
理由はそこそこ複雑なインフラなのでJSON/YAMLを直接編集するのは非現実的だからです。
Step FunctionsもStateMachineをJSONで記述するので、JSONを直接編集することなく、 troposphereで管理したいと思っていました。しかし、一応StateMachineは定義されているものの、肝心の中身の定義に関してはJSONのストリングをそのまま突っ込むという仕様なので結局のところ自分でJSONを編集するしかなく、あまりありがたみがありません。
ということで、StateMachineの中身のJSONの定義はAmazon States Languageという仕様で定義されているのでそれに則ってPythonのクラスを定義してそれをdictで吐き出してjson.dumpsすればいいのではと思い実際に作ってみました。

# Step FunctionsのJSONを生成するPythonプログラムの実装

こちらのGistに実装を公開しています。
https://gist.github.com/Y4suyuki/a2e9951f8acb9fd07bff5b521c7aa8c0

一旦、Amazon States Languageの仕様に沿ってPythonクラスを定義してそれをdictで吐き出すメソッドがあるだけなので、変数のValidationなどはないですが、とりあえず当初意図したものができました。
AWS Step Functionsのドキュメントの[StateMachineの例](https://docs.aws.amazon.com/ja_jp/step-functions/latest/dg/amazon-states-language-state-machine-structure.html)で示すと元のJSON

```JSON
{
  "Comment": "A Hello World example of the Amazon States Language using a Pass state",
  "StartAt": "HelloWorld",
  "States": {
    "HelloWorld": {
      "Type": "Pass",
      "Result": "Hello World!",
      "End": true
    }
  }
}
```

に対して、Pythonだと

```Python
>>> hwp = Pass("HelloWorld", Result="Hello World!", End=True)
>>> hwsm = StateMachine(StartAt=hwp.Name,
                        Comment="A Hello World example of the Amazon States Language using a Pass state",
                        States=[hwp])
```

のように定義してあげると

```Python
>>> print(hwsm.to_json(indent=2))

{
  "StartAt": "HelloWorld",
  "Comment": "A Hello World example of the Amazon States Language using a Pass state",
  "States": {
    "HelloWorld": {
      "End": true,
      "Result": "Hello World!",
      "Type": "Pass"
    }
  }
}
```

という風にドキュメントの例と同様のJSONができます。これくらい小さいJSONだとあまり違いを感じないですが、コンポーネントが多くなってくるとPythonで定義してJSONを吐き出したほうが、圧倒的に楽だと思います。

# おわりに
今回PythonでStep FunctionsのStateMachineのJSONを作るプログラムを実装してみましたが、Amazon States Languageがコンパクトな仕様だったので簡単にできました。
ただ、Choiceの中のChoicesのコンポーネントはAmazon States Languageに定義されていないので、Pythonでもdictのままだったり、クラスをdictにするときに呼び出している関数で再帰を使っているので、コンポーネントが多くなるとStackOverflowになりそうとかありますが、とりあえず使えそうなので、使いながらより良くしていきたいです。

# 追記
実際に少しStep Functionsで使ってみると、まだまだ不便なところが多くて、例えばStatesのNextを直に定義するのではなく、apache-airflowでDAGを定義するときにつかうset_upstreamやset_downstreamのようなメソッドがあると良いかもと思いました。
LimeSurvey - How to edit/update submitted responses 


## LimeSurvey - How to edit/update submitted responses

https://www.limesurvey.org/

## Reference

https://bugs.limesurvey.org/view.php?id=11824

>Allow multiple responses or update responses with one token?
 Default: No.
  If you activate this setting the participants may return to his survey by clicking the invitation link, even if he already submitted the survey.
 If survey is anonymous or Enable token-based response persistence is set to NO, this adds a new responses.
 If survey is not anonymous and Enable token-based response persistence is Yes, user update existing responses.


## How to edit/update submitted responses

-  Survey -> Survey properties -> General setting & texts

  ![image.png](https://qiita-image-store.s3.amazonaws.com/0/114634/0fbd1a27-fd88-db8d-1d81-75d364b1daab.png)


-  Edit survey text elements and settings -> Tokens

![image.png](https://qiita-image-store.s3.amazonaws.com/0/114634/6542a730-f1cd-8ccb-984a-208ba4ce081b.png)


- [x] Enable token-based response persistence
- [x] Allow multiple responses or update responses with one token
Gerritで、MergeのConflictを解決する

Web上でのGerrit操作でコンフリクトの解決手段が解らなかったため、Linux(Ubunte系)コンソール上から解決する手段を記載。

#前提
・Ubunteが使えること
・Vimが使えること
・Ubunte上でGitが使えること

###1 git-reviewのインストール
```console:ubuntu
$ sudo apt install git-review
```

###2 .gitreviewファイルを追加
git-reviewを使うには、サーバの設定を記述した".gitreview"が必要。
リポジトリをクローンしたディレクトリに".gitreview"を追加する。

```console:ubuntu
$ vim .gitreview 
[gerrit]
host=サーバーのパス
port=サーバーのポート番号
project=マスターのパス
defaultbranch=master
```

##手順

###1 最新のMusterをCloneまたはPull

```bash:Terminal
$ git clone ssh://ユーザー名@ホスト名:必要ならPort番号/musterのパス
```

OR

```bash:Terminal
$ git pull origin master
```

###2 競合を解決したいコミットを取得
git-reviewを使い、競合を解決したいコミットを取得
XXXXXは、GerritのURLに表示される５桁の番号

```console:ubuntu
$ git review -d XXXXX
```

###3 修正
リベース開始

```console:ubuntu
$ git rebase master
```
＃Conflict をIDEかEDITERで修正後、ステージング

```console:ubuntu
$ git add*
```
リベース終了

```console:ubuntu
$ git rebase --continue
```

リベースされたコミットをgerritに送信（PUSH）。

```console:ubuntu
$ git review
```
WEB上で、Conflictが解消されたことを確認する
dockerとproxyの問題

社内ネットワークなどProxyが設定されている場合、
dockerを使ってwgetしたりyumを使おうとすると
ファイルを取得できずエラーになります。

まずはIEの設定などにproxyを設定していると思うので、
そちらを参照するなどしてproxyサーバーのIPとPortを確認します。

例えばProxyサーバーのIPが192.168.100.1、Portが30020だとします。

buildする際は--build-argを使用します。

```
docker build --build-arg http_proxy=http://192.168.100.1:30020/ .
```

runする際は--envを使用します。
今回はimageのIDがqwert12345の場合とします。

```
docker run --env http_proxy=http://192.168.100.1:30020/ -it qwert12345 bash
```

ちなみにwindowsの環境変数でHTTP_PROXYを下記のように設定している場合は
変数で指定することもできます。

```
HTTP_PROXY ： http://192.168.100.1:30020/ 
```

```
docker build --build-arg http_proxy=${HTTP_PROXY} .
docker run --env http_proxy=${HTTP_PROXY} -it qwert12345 bash
```

私の環境はwindows7とdocker tool boxでしたが、
--build-argと--envで指定するhttp_proxy部分は
HTTP_PROXYと大文字では動作しませんでした。

環境によっては逆に小文字だと動作しない可能性もあるので
上記で動かない場合はhttp_proxyをHTTP_PROXYにしてみてください。
babel-plugin-module-resolverでimportを快適にする(eslint-plugin-import + flow + path-autocomplete)

# はじめに
`../../../foo/bar`とか書きたくない。
`~/components/foo/bar`みたいなパスで書きたい。

#### この文章執筆時の関連するpackageのversion

```.json
{
  "babel-plugin-module-resolver": "3.1.1",
  "eslint-import-resolver-babel-module": "5.0.0-beta.0", // betaじゃないと正常に動作しなかった
  "eslint-plugin-import": "2.11.0",
  "flow-bin": "0.69.0"
}
```

## babel-plugin-module-resolver

[tleunen/babel-plugin-module-resolver](https://github.com/tleunen/babel-plugin-module-resolver)

```json:.babelrc
"plugins": [
  ["module-resolver", {
    "root": [
      "./src"
    ],
    "alias": {
      "~": "./src"
    }
  }]
]
```

まずは好きなようにaliasを書きます。

## flow

※ flowを導入していない環境の場合は飛ばして下さい

https://flow.org/

```ini:.flowconfig
[options]
module.name_mapper='^~/\(.*\)$' -> '<PROJECT_ROOT>/src/\1'
```
flowが参照を解決できるようにflowconfigのoptionに記述を加えます。

## ESLint

[benmosher/eslint-plugin-import](https://github.com/benmosher/eslint-plugin-import)が入っている環境を前提にします。

```.eslintrc.yml
settings:
  import/resolver:
    babel-module:
      root:
        - ./src
      alias:
        ~: ./src
```

ESLint側から`module-resolver`のaliasを解釈するために[tleunen/eslint-import-resolver-babel-module](https://github.com/tleunen/eslint-import-resolver-babel-module)を使います。
上記のように`.babelrc`に記述したaliasを同様に記述することでESLintがエラーを吐かなくなります。
(エラーを吐く場合はpackageのversionを確認して下さい。この記事は`eslint-import-resolver-babel-module: 5.0.0-beta.0`を用いています。)

以上で`babel-plugin-module-resolver`を用いたaliasを貼ったimport環境が完成です。

## おまけ:VSCode

VSCodeの話になりますが、[Path Autocomplete ](https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete)を使うことでmoduleのimportを記述するのがとてもラクになります。
というかたとえ`babel-plugin-module-resolver`を使ってない環境でもimportのサジェストをしてくれるのでおすすめです。

```.vscode/settings.json
{
  "path-autocomplete.pathMappings": {
    "~": "${folder}/src"
  }
}
```

これもまた同様に`.babelrc`に書いたaliasを同じように書きます。
これで`import foo from '~/'`と書いていくと`~`を`src`からで補完してくれます。
※ GIFとかなくてごめんなさい💦

## おわりに

以上のセットアップで好きなようにaliasを貼って快適なmoduleのimport環境を構築することができました。
相対パスでimportするのはリファクタリングの際などに大変な思いをすることになるので、うまくaliasを使っていきましょう。

## 参考
- [babel-plugin-module-resolver を使ってパッケージ名のエイリアスを張る + flowtype/eslint で対応する - Qiita](https://qiita.com/mizchi/items/b24720e01562a652775b)
xcode（8以降）にプラグインを入れる

いろんなページにプラグインを入れて開発を爆速に！とあるので、いろんなページを見ながら備忘録として整理する。
どうやらxcode8以降のバージョンとそれより前のバージョンでは方法が違うようだ。
自分の操作する端末はすべて8以降のバージョンであるので、xcode8以降向けである。

###方法
Alcatrazを入れ（入れなくてもいいのかな？）Xcodeを再起動させる。
※xcode8よりまでは、Alcatrazというプラグインだけで良かったよう。

```:terminal
$ curl -fsSL https://raw.githubusercontent.com/supermarin/Alcatraz/deploy/Scripts/install.sh | sh
$ killall Xcode 2> /dev/null
$ open /Applications/Xcode.app
```

update_xcode_pluginsを入れる

```:terminal
$ sudo gem install update_xcode_plugins -n /usr/local/bin/
Successfully installed update_xcode_plugins-0.4.0
1 gem installed
```
※インストール先のパスを入れてやらないと。

プラグインアップデートをする。

```:terminal
$ update_xcode_plugins
Found:
- Xcode (9.3) [EE23884D-A5C0-4163-94CF-DBBF3A5ED8D6]: /Applications/Xcode.app

Plugins:
- Alcatraz (1.2.0)

Updating...
Added EE23884D-A5C0-4163-94CF-DBBF3A5ED8D6 to Alcatraz (1.2.0)

Finished! 🎉

It seems that you have Xcode 8+ installed!
Some plugins might not work on recent versions of Xcode because of library validation.
See https://github.com/alcatraz/Alcatraz/issues/475

Run `update_xcode_plugins --unsign` to fix this.
```

言われたとおりにアンサインする。

```:terminal
$ update_xcode_plugins --unsign
Looking for Xcode...

Unsigning Xcode will make it skip library validation allowing it to load plugins.
However, an unsigned Xcode presents security risks, and will be untrusted by both Apple and your system.
This tool will create a backup and allow you to restore Xcode's signature by running
$ update_xcode_plugins --restore

Choose which Xcode you would like to unsign (use arrows): Xcode (9.3) [Signed]: /Applications/Xcode.app
Unsign xcodebuild too?: Yes

Unsigning...

* Changing ownership of /Applications/Xcode.app/Contents/MacOS (will be restored after)
Password:
* Restored ownership of /Applications/Xcode.app/Contents/MacOS

* Changing ownership of /Applications/Xcode.app/Contents/Developer/usr/bin (will be restored after)
* Restored ownership of /Applications/Xcode.app/Contents/Developer/usr/bin
Finished! 🎉
```

Xcodeを再起動させ、load bundleを選択し、passを入力する。

![スクリーンショット 2018-04-26 14.03.05.png](https://qiita-image-store.s3.amazonaws.com/0/252703/a7d391fb-59c2-2169-ff7e-e9427f2e43b9.png)

メニューバーのWindowでPackage Managerが表示されていれば完成。

###参考
開発が爆速になるSwift用Xcodeプラグインをまとめてみた https://qiita.com/tattn/items/238b2b813be16f830bd4
【環境構築】Xcodeにプラグインマネージャを入れる https://qiita.com/hiraok/items/906335844cfe65161419
rubygemが反応しない問題 on @Qiita https://qiita.com/H1r0ak1Y0sh10ka/items/f4370fa57cba163d6262
Webサービスを高速に提供する方法としてPWAが有効ではないか

## はじめに

Webサービスはどれだけ早く表示されるかが、ユーザー体験を高めるために重要だということはよく知られていることだと思います。そこで、新しい技術の中で、Webサービスを高速で提供する方法を探してみました。そんな中で、PWAという形式でWebサイトを構築することが、新しいアプローチとして有効だとわかりました。
そのため、本稿ではPWAの概要について簡単に解説します。

## PWA（Progressive Web Apps）とは

PWAはGoogleが提唱しているユーザ体験の向上を目的としている仕組みのことです。
時期としては、2015年の発表から注目をされ始めたようです。
PWAでできることは以下のようなものが挙げられます。

* PWAに対応していないブラウザでも通常のWebサイトと同じように動作する
* オフラインで（使える機能が）動作する
* 自動で最新状態へ更新する
* プッシュ通知が使用できる
* ホーム画面に（そのサイトの）アイコンを追加できる

PWA形式で作成されたサイトは、端末の環境が対応していればネイティブアプリと似た動きをさせることができます。
開発自体は、通常のWebサイト構築と同じく、エディタとGoogle Chrome（のようなPWA対応ブラウザ）があれば可能です。

### PWAとしてブラウザに認識させるために必要なこと

Googleの定めているルールは下記の4つ

* ユーザーが5分以上間隔を空けて2回訪れるか
* HTTPSをサポートしているか
* 有効なJSONのマニフェストが含まれているか
* Service Workerが含まれているか

※他のブラウザも対応してきているので、それぞれの開発元によって条件が変わる可能性があります。

#### ユーザーが5分以上間隔を空けて2回訪れるか

ユーザが複数回訪れないページでは、キャッシュしても無駄になってしまうためと考えられます。
ユーザが1回だけアクセスするようなWebページをPWA化することは無いと思いますので、この項目はほぼ考えなくてもよいでしょう。
また、サンプルを作成しているときに気が付きましたが、1回目のアクセスでも動いているように感じたので、ルールが変更されている可能性があります。

#### HTTPSをサポートしているか

Service Workerを使用するために必要なため、HTTPSのページでないと動作しません。

#### 有効なJSONのマニフェストが含まれているか

JSON形式で記述されたマニュフェストファイルで、ホーム画面に追加する際の設定を指定するために記述します。 
主なものとしては、ホーム画面のアイコン用の画像、アプリ名、ロード時の背景色、ウィンドウの表示方法といった情報の指定を行います。

#### Service Workerが含まれているか

Service WorkerはPWAの中核となるものであり、Webページでイベント駆動するJavaScriptの名称です。
プッシュ通知や、バックグラウンドでの同期といった機能を提供しており、特に今回の目的に沿うのは、キャッシュのコントロールができる部分です。
Service Worker自体が魅力的な技術でありますが、単体でもボリュームが大きいので、詳細は省略します。

### PWA化のまとめ

ここまでの必要要素をまとめると、httpsで通信できるWebページで、Service Workerを組み込み、JSONのマニフェストを適切に記述すれば、PWAとしてWebサイトを構築することができる、ということになります。
本当にこれだけの設定で実装できるか検証したものを次回の記事にまとめていますので、是非御覧ください。

### PWAの今後

AppleのSafariの開発チームがService Workerの導入に着手したという報告があるため、iOSやMacOS端末もPWAを利用できるようになる可能性があります。
MicrosoftのEdgeも、すでにService Workerが使えるようになっています。
ブラウザベースであるため、開発コストを抑えつつ、多くの端末をカバーできる強力な技術であり、近い将来で急激に発展する可能性が高いと言えるでしょう。

次の記事: https://qiita.com/OMOIKANESAN/items/5b23fa8ea9ea0d181df5
WordpressでTwitterのtweetのIDを登録するとDB上で値が「2147483647」になる時の対処法

Wordpressで作ってるサイトにTwitterに投稿したtweetのIDをDBに登録するという処理を作ったところ、登録したデータが必ず「2147483647」になる状況に遭遇。
すんごい初歩的なミスですが一応メモ。

#原因
1. `$wpdb->insert`の第3引数(プレースホルダー)を設定してない。または、IDのプレースホルダーを整数型(%d)にしてる。
2. 32bitシステム上でPHPを動かしてる
3. 登録先のカラムのデータ型がbigintじゃなくてint

Twitter APIからの返り値は文字列なのですが、プレースホルダー無しで`insert`を実行すると整数型に変換してSQLを実行されるっぽい。(原因1)(元のソースまで見に行ってない)
更に32bitシステムにおいて運用されているPHPの整数の最高値が「2147483647」だそうで。(原因2)(参考：[php.net](http://php.net/manual/ja/language.types.integer.php))
自分の環境では原因1と2によって登録される値が必ず「2147483647」になりました。

原因3は設計ミスなのですが、考えられる可能性として一応記載。

#対処法
1. `$wpdb->insert`の第3引数にプレースホルダーを設定する。プレースホルダーは文字列型(%s)にする。
2. 登録先のカラムのデータ型がintだったらbigintにする。

#教訓
面倒くさがらずプレースホルダーはキチンと設定しておく。

#蛇足

文字列型で指定するのがセキュリティ面で怖い時は`is_numeric`とかで事前に確認するといいかもしれない。
rubygemが反応しない問題

###エラー
xcodeのプラグインをgemで入れようとしたら、downloadデータが使えないよとエラーが。
まったく。

```:terminal
$ gem install update_xcode_plugins
ERROR:  Could not find a valid gem 'update_xcode_plugins' (>= 0), here is why:
          Unable to download data from https://rubygems.org/ - SSL_connect returned=1 errno=0 state=error: certificate verify failed (https://api.rubygems.org/specs.4.8.gz)
```

###対処法
SSL証明書の有効期限が切れているのが原因のようなので、httpsではなく、httpをソースに変更してアップデートする。
※SSL証明書の更新？をするやり方もあるんでしょうが。

```:terminal
$ gem sources --remove https://rubygems.org/
https://rubygems.org/ removed from sources
$ gem sources --add http://rubygems.org
https://rubygems.org is recommended for security over http://rubygems.org
Do you want to add this insecure source? [yn]  y
http://rubygems.org added to sources
$ sudo gem update --system
Updating rubygems-update
Successfully installed rubygems-update-2.7.6
Installing RubyGems 2.7.6
Bundler 1.16.1 installed
RubyGems 2.7.6 installed
Regenerating binstubs
（以下略）
```

リモートのlistも生き返ったのでこれで一安心。

```:terminal
$ gem list --remote

*** REMOTE GEMS ***

- (1)
.cat (0.0.1)
（以下略）
```

###参考
RubyGem のSSL証明書の有効期限切れ
http://d.hatena.ne.jp/obelisk2+marginalia/20170118/1484717722
rubygem が反応しなくなったら http://jimiprg.blog.shinobi.jp/Entry/21/#QqHqAgj.twitter_tweet_count_m
CentOS7上のLXCコンテナでyumがハングアップする

#はじめに
CentOS7.4上でlxcを使用し、コンテナを作りました。
しかし、コンテナ（CentOS7.4）上でyumを使ってソフトウェアをインストールしようとすると途中でハングアップしました。
```$ yum install XXXXX```

とするとダウンロードまではうまくいくのですが、インストールプロセスが完了後、後処理のスクリプトでハングアップします。（中にはハングアップしないものもあるようです）
#原因
ログ（コンテナ側）を確認するとmessagesに次のようなエラーが記録されていました。
```/var/log/messages
systemd-sysctl: Failed to write '1' to '/proc/sys/net/ipv4/conf/all/promote_secondaries': Read-only file system
```
どうもセキュリティの問題で/procはreadonlyでマウントされているそうです。
このため、/proc配下にある設定の変更ができず、ハングアップしていたようです。
まず、一度、コンテナを停止します。
```$ lxc-stop -n <コンテナ名>```
ホスト側で設定ファイルに
```config
security.privileged true
```
を追記し、
```lxc-start -n <コンテナ名> -d```
でコンテナを起動します。
これで/procは読み込みreadonlyではなくなりました。
#CPUが100%になる
コンテナにログインし、yumでソフト（mariadb-server）をインストールしようとすると、ダウンロード後のチェックで非常に時間がかかっています。topコマンドで確認するとsystemd-journaldがほぼCPU100%で動作しており、これが原因で時間がかかっていました。
kmsgが有効の場合にこのような現象が発生することがあるそうなので、無効化します。
一度、コンテナを停止します。
```$ lxc-stop -n <コンテナ名>```
ホスト側で設定ファイルに
```config
lxc.kmsg = 0
```
を追記し、
```lxc-start -n <コンテナ名> -d```
これですっきり、うまく動きました。
.vimrc

.vimrcの中身

```
set antialias
colorscheme desert
set guifont=Monaco:h14

"---------------------------------------------------------------------------
" 検索の挙動に関する設定:
"
" 検索時に大文字小文字を無視 (noignorecase:無視しない)
set ignorecase
" 大文字小文字の両方が含まれている場合は大文字小文字を区別
set smartcase

"---------------------------------------------------------------------------
" 編集に関する設定:
"
" タブの画面上での幅
set tabstop=4
" タブをスペースに展開しない (expandtab:展開する)
set expandtab
" 自動的にインデントする (noautoindent:インデントしない)
set autoindent
" バックスペースでインデントや改行を削除できるようにする
set backspace=indent,eol,start
" 検索時にファイルの最後まで行ったら最初に戻る (nowrapscan:戻らない)
set wrapscan
" 括弧入力時に対応する括弧を表示 (noshowmatch:表示しない)
set showmatch
" コマンドライン補完するときに強化されたものを使う(参照 :help wildmenu)
set wildmenu
" テキスト挿入中の自動折り返しを日本語に対応させる
set formatoptions+=mM

"---------------------------------------------------------------------------
" GUI固有ではない画面表示の設定:
"
" 行番号を非表示 (number:表示)
set number
" ルーラーを表示 (noruler:非表示)
set ruler
" タブや改行を表示 (list:表示)
set list
" どの文字でタブや改行を表示するかを設定
set listchars=tab:>-,extends:<,trail:-
" 長い行を折り返して表示 (nowrap:折り返さない)
set nowrap
" 常にステータス行を表示 (詳細は:he laststatus)
set laststatus=2
" コマンドラインの高さ (Windows用gvim使用時はgvimrcを編集すること)
set cmdheight=2
" コマンドをステータス行に表示
set showcmd
" タイトルを表示
set title

set cursorline

"---------------------------------------------------------------------------
" ファイル操作に関する設定:
"
" バックアップファイルを作成しない (次行の先頭の " を削除すれば有効になる)
set nobackup

set clipboard=unnamed,autoselect
set fileencoding=utf-8
set encoding=utf-8
set softtabstop=4
set shiftwidth=4
set textwidth=0
set switchbuf=useopen   " 新しく開く代わりにすでに開いてあるバッファを開く
set nowritebackup
set noswapfile
set virtualedit=all     " カーソルを文字が存在しない部分でも動けるようにする
syntax on


"------------------------------------------------------------------------------
" キーマップ

" タブ操作
nnoremap <C-Tab>   gt
nnoremap <C-S-Tab> gT

" Ctrl + エンターで改行
noremap <C-CR> o<ESC>

" vv で後ろすべてを選択
vnoremap v $h

" 先頭に貼り付け
nmap <C-p> ^Pj^

" 空白行を削除
" noremap <C-s> :s/\s\+$//g<CR>:nohl<CR>
nmap <C-s> :%s/\s\+$//g<CR>

nmap tt :tabnew<CR>
nmap to :tabnew<CR>:copen<CR>
nmap <silent> cc :cclose<CR>
nmap <silent> co :copen<CR>
nmap <silent> <S-CR> <C-W>T<CR>cc

inoremap jj <Esc>
nnoremap <silent> \\ :cd ..<CR>:pwd<CR>
nmap <silent> <Esc><Esc> :nohlsearch<CR>

" カレントディレクトリを編集中のフォルダにする
nnoremap <silent> <expr> <C-c> ':lcd ' . expand('%:p:h') . expand('<CR>')

" Ctrl + hjkl でウィンドウ間を移動
nnoremap <C-h> <C-w>h
nnoremap <C-j> <C-w>j
nnoremap <C-k> <C-w>k
nnoremap <C-l> <C-w>l

nnoremap <S-h> <C-w>>
nnoremap <S-j> <C-w>+
nnoremap <S-k> <C-w>-
nnoremap <S-l> <C-w><

"------------------------------------------------------------------------------
" 言語ごとの設定
autocmd FileType python set softtabstop=2
autocmd FileType python set shiftwidth=2
autocmd FileType python set fileformat=unix
autocmd FileType python set fileencoding=utf8
autocmd FileType python nnoremap <silent> // <Home>^i# <Esc>:nohl<CR>
autocmd FileType python vnoremap <silent> // <C-v>^I# <Esc>:nohl<CR>
autocmd FileType python nnoremap <silent> ,, :s/# //<CR>:nohl<CR>
autocmd FileType python vnoremap <silent> ,, :s/# //<CR>:nohl<CR>
autocmd FileType python nmap <expr> gv ':vim /' . expand('<cword>') . '/j **/*.py'
```
.gitconfigのエイリアス

.gitconfigに追加しているエイリアス
結構使っていないものも多い

```
[alias]
    co = checkout
    s = status
    st = status
    d = diff
    dc = diff --cached
    st = status -s -b
    pr = remote prune
    ranking = shortlog -s -n --no-merges
    zip = "!f(){ git archive --format=zip $1 -o $2; };f"

    # checkout
    co = checkout
    dev = checkout develop

    # commit
    cm = commit -a -m
    ca = commit --amend
    cv = commit -v
    cmv = commit -a -v -m
    wip = commit -m "wip"

    # log
    l = log --oneline --graph --decorate
    lp = log --oneline -p

    # branch
    br = branch
    ba = branch -a
    bd = branch -D

    # diff
    d1 = diff HEAD~
    dc = diff --cached
    dd = diff develop
    ddw = diff develop --word-diff
    ddn = diff develop --name-only

    # reset
    rh = reset --hard HEAD
    rs = reset --soft HEAD

    # remote
    #p = "!f(){ git push $1 `git rev-parse --abbrev-ref HEAD`; };f"
    mkf = "!BRANCH=`git rev-parse --abbrev-ref HEAD`; git dev; git pull origin; git co -b feature/${BRANCH}; git merge --squash ${BRANCH}"
    mkb = "!BRANCH=`git rev-parse --abbrev-ref HEAD`; git dev; git pull origin; git co -b bugfix/${BRANCH}; git merge --squash ${BRANCH}"
    rmb = "!f(){ git push -f $1 :`git rev-parse --abbrev-ref HEAD`; };f"

    p = !git push origin `git rev-parse --abbrev-ref HEAD`
    pf = !git push -f origin `git rev-parse --abbrev-ref HEAD`
```
bashのプロンプト

PS1を書き換える事で変更できる。
Macでフルスクリーンにして作業してることが多い＋コマンドを実行した時刻が知りたい時がたまにあるので時刻も表示するようにしてる。

``` bash
export PS1='\[\e[1;32m\][\w] \t${text}\n$\[\e[m\] '
```

出力例

``` bash
[/tmp/iwata-n] 13:17:10
$ pwd
/tmp/iwata-n
```
Docker for Mac 勉強メモ〜インストール〜

#1.はじめに
ひょんなことからデータサイエンティストへ弟子入りし、プログラミングの世界に導かれやってきました、都会で頑張る田舎者です。文系大学卒の元OLです。

今、Dockerを猛勉強中ですので、備忘録も兼ねて猛勉強した内容をちょこちょこと投稿していきたいと思います。

【関連】
→[超新人プログラマー(見習)がまず手にした本と参考にしたWEBサイト〜Docker編〜](https://qiita.com/petadimensionlab/items/4963adf9fb882c05fc5e)
　この投稿以外の本やWebページ等を読み漁って頭の中がぐちゃぐちゃになって来ました・・・（汗）
　また整理して編集します！

#2.Dockerって？
>Dockerは、インフラ関係やDevOps界隈で注目されている技術の一つで、Docker社が開発している、コンテナ型の仮想環境を作成、配布、実行するためのプラットフォームです。

参考：[Docker入門（第一回）～Dockerとは何か、何が良いのか～](https://knowledge.sakura.ad.jp/13265/)
memo：比較的新しい記事です。

#3.インストール方法（Docker for Mac)
Dockerの[公式サイト](https://docs.docker.com/docker-for-mac/install/#download-docker-for-mac)よりインストールします。
クリックして
![dockerインストール.png](https://dl.dropboxusercontent.com/s/qmqn3p5hh2p1bo7/NEW%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E7%94%BB%E9%9D%A2.png?dl=0)

もう一度クリック
※DockerHubにログインしていない場合、「please Login To Download」となっております。
ログイン（アカウント作成）してからinstallしましょう！
![dockerインストール.png](https://dl.dropboxusercontent.com/s/kk3p11mi0bngajc/NEW%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E7%94%BB%E9%9D%A2%EF%BC%92.png?dl=0)



![クジラアイコン.png](https://qiita-image-store.s3.amazonaws.com/0/241094/732ca1cb-0f33-5044-f7d1-7e8e65a139fb.png)

無事インストールが完了すると、右上にクジラのアイコンが現れます！

念のため、下記コマンドを入力して動作確認してみましょう！

```terminal:command
$ docker version
Client: Docker Engine - Community
 Version:           18.09.2
 API version:       1.39
 Go version:        go1.10.8
 Git commit:        6247962
 Built:             Sun Feb 10 04:12:39 2019
 OS/Arch:           darwin/amd64
 Experimental:      false

Server: Docker Engine - Community
 Engine:
  Version:          18.09.2
  API version:      1.39 (minimum version 1.12)
  Go version:       go1.10.6
  Git commit:       6247962
  Built:            Sun Feb 10 04:13:06 2019
  OS/Arch:          linux/amd64
  Experimental:     false

```
ちなみにこちらでもバージョンが分かります。（簡易的）

```terminal:command
$ docker --version
Docker version 18.09.2, build 6247962
```

さあ、猛勉強頑張ろう！！

#4.参考URL
・[Docker for Macをインストールしよう！](http://grandbig.github.io/blog/2017/02/13/docker-for-mac-1/)

---
今の夢はデータ解析用のDockerfileを完成することです。

追記（20180501）：[Docker for Mac 勉強メモ〜コマンド集〜](https://qiita.com/petadimensionlab/items/328c546b06fd073fe409)の記事を書きました！
追記(20190704)：インストール方法を更新（公式HPの仕様がちょっと変更されていました）
余談：少しだけ成長しました。
VBSでExcelを開く際にインストール済みアドインを読み込む方法

#VBSでCreateObject("Excel.Application")を使用してブックを開くと、アドインが読み込まれない問題

詳細は下記ページを参照。
[CreateObject コマンドを使用した場合、Excel でアドインが読み込まれない](https://support.microsoft.com/ja-jp/help/213489/add-ins-do-not-load-when-using-the-createobject-command-in-excel)

VBSで開いたブックも、通常起動したブックと同様に扱いたいため困った。
環境によってどんなアドインがインストールされているかもわからないので、固定パスではできないし。

というわけで、起動したExcelからアドインの一覧を取得して、インストール済みアドインを開いてあげることに。
この開き方だと起動時のマクロ実行がされないようなので、マクロ実行もついでに。

#ソース
```ExcelOpenAndLoadAddIn.vbs
Set oXlsApp = CreateObject("Excel.Application")

With oXlsApp
	.Visible = False
	.Workbooks.Open ("C:\Book.xlsx")
	For Each ad In .AddIns
		If True = ad.Installed Then
			.Workbooks.Open (ad.FullName)
			.Workbooks(ad.Name).RunAutoMacros 1
		End If
	Next
	.Visible = True
End With

Set oXlsApp = Nothing
```
docker for windowsをgit bashで使うときの-v(volume)の指定の仕方

環境はwindows 10で、ターミナルはGit Bashを使用しています。

docker for windows(Hyper-V)を使用しているのですが、
VirtualBoxでdockerを利用してたときのように下記コマンドを打ったのですが、起動しませんでした。

```bash
$ winpty docker run -v `pwd`:/var/app -it alpine

C:/Program Files/Docker/Docker/Resources/bin/docker.exe: Error response from daemon: Mount denied:
The source path "C:/Users/username;C"
doesn't exist and is not known to Docker.
See 'C:/Program Files/Docker/Docker/Resources/bin/docker.exe run --help'
```
## 正しいコマンド？

```bash
# //c/any/directory を指定
$ winpty docker run -v /$PWD:/var/app -it alpine
$ winpty docker run -v /`pwd`:/var/app -it alpine
# C:\any\directory を指定
$ winpty docker run -v `pwd -W`:/var/app -it alpine
```

指定しているパスが/始まりだと起こるようで上記のように、
pathの先頭もう一つ/をつけるか(例：//c/any/directory)
windows形式のpathを指定(例：C:\any\directory)
のどちらかを指定すれば大丈夫のようです。

## 備考
pathがアレなのはMinGWの仕様のようです。
http://www.mingw.org/wiki/Posix_path_conversion
とりあえずFirstVRのSDKで遊んでみた。

##ついに買ってきましたFirst VR！

![IMG_0028.jpg](https://qiita-image-store.s3.amazonaws.com/0/253416/8eb9b388-75e1-410a-af2e-093597eb05f9.jpeg)


10000円でヘッドセットとコントローラがセットで買えるのはいいですね！

とりあえずAppStoreにあるゲームを遊んで見たんですけどジェスチャの認識がかなり正確でこれからどんなアプリがリリースされてくるのかめちゃくちゃ楽しみです。

そんなこんなでとりあえず何か作るためにSDKを試してみます。
まず以下のリンクからSDKをダウンロードしてきます。
https://dev.first-vr.com/downloads?locale=ja

まず公式にある通りFile->Buildsettingsを開いてみます。
プラットフォームをiOSにしたらなんとiOS用のモジュールが必要なようです。
ダウンロードしましょう。

![スクリーンショット 2018-04-23 14.06.40.png](https://qiita-image-store.s3.amazonaws.com/0/253416/ca6ec461-0e30-44c9-9f08-b8a164626da0.png)

ダウンロードが終わった後この画面をもう一度開きます。

![スクリーンショット 2018-04-23 12.20.41.png](https://qiita-image-store.s3.amazonaws.com/0/253416/bc8e8045-cd94-46e6-4f57-6eb179f8015d.png)

えっ何も変わってない…

調べたところUnity自体を再起動しなければならないようです。

![スクリーンショット 2018-04-23 14.09.56.png](https://qiita-image-store.s3.amazonaws.com/0/253416/bc32d7fe-c67a-35ba-a1f4-1b15131ad43e.png)


再起動したらBuildできるようになりました！

ビルドを終わらせたらUnity-iPhone.xcodeprojを開きます。

![スクリーンショット 2018-04-23 14.14.16.png](https://qiita-image-store.s3.amazonaws.com/0/253416/dc10b50d-1438-b7a6-20d2-5e0b65f65df9.png)

そしたら上の青枠の部分にiPhoneの開発チームを入れます。（ちなみにこれはAppleのデベロッパ登録がされていないとできません。しかもこれ地味に1万円くらいかかるからパソコンでデバッグができるようになったらいいな〜なんて思いました。）

デベロッパ登録はこちらから↓
https://developer.apple.com/programs/enroll/jp/

終わったら早速左上の再生ボタンを押します。
するとiPhoneで起動が始まります。

![IMG_3575.png](https://qiita-image-store.s3.amazonaws.com/0/253416/ec5935ba-b8ef-bfb8-cfe5-b4db28ab678f.png)

起動画面はこんな感じ。
早速FirstVRの電源を入れます。

![IMG_3576.png](https://qiita-image-store.s3.amazonaws.com/0/253416/57560a02-2f6d-4b7e-da96-d8d4668ca6ab.png)

<b>動いたあああああああああ！</b>
筋肉センサーからジャイロから色々値が取れているのがわかります。
しかも電源入れるだけで勝手に繋いでくれるのはすごい嬉しい！
ジェスチャに関しても事前にいくつか登録されているものだけでもスワイプ、シェイクなどあって結構色々遊べそうですよね。

firstVRの開発サイトに登録すると以下のリンクからAPIがみられます。
http://reference.first-vr.com/ja/

次回はAPIをみながら手とオブジェクトを同期させてみます。
Google ToDo リストが利用しているオープンソースライブラリのメモ

Google ToDoリストのAndroid版が使っているオープンソースライセンスで気になったモノのメモ
オープンソースライセンスから確認している

- Animal Sniffer
- Auth client library
- Checker Framework
- Cronet
- Error Prone
- Google Auto
- J2ObjC
- Material Components for Android
- OpenCensus

他にもAACとか使ってた

# Animal Sniffer
公式サイト https://www.mojohaus.org/animal-sniffer/
GitHub https://github.com/mojohaus/animal-sniffer

APIのシグニチャの生成？

# Auth client library
分からなかった

# Checker Framework
https://github.com/typetools/checker-framework

Javaのヌルポの静的解析をやってくれる

# Cronet
https://chromium.googlesource.com/chromium/src/+/master/components/cronet

Chromiumのネットワーキングスタック
Retrofitの代わりみたいなもんかな

# Error Prone
https://github.com/google/error-prone
[参考](http://yone098.hatenablog.com/entry/2017/01/27/115753)
コンパイル時に静的解析できるやつっぽい

# Google Auto
https://github.com/google/auto
コードジェネレーター
車関連の方かと思ったら違った

# J2ObjC
https://github.com/google/j2objc
JavaのコードをObjective-Cに変換する

# Material Components for Android
https://github.com/material-components/material-components-android/
マテリアルデザインのコンポーネント

# OpenCensus
https://github.com/census-instrumentation/opencensus-java
パフォーマンスとか振る舞いのデータを集めるライブラリっぽい
GAじゃないのが不思議
for ... of 文でインデックス(index)の値を使う方法

JavaScriptで`for`ループを使いたい時は`for...of`文を使うのがES6になってからは定番になってました。

そんな中で通常の`for`文ではいつも一緒にいたインデックスを表示したい事案があったのですが、やり方が分からず調べたのでまとめました。

イメージ的には以下のように`for`ループの中でインデックス番号を利用したい場合です。

```js
const students = [
  { name: 'Taro', age: 26 },
  { name: 'Jiro', age: 24 },
  { name: 'Siro', age: 22 }
] 

for (let i = 0; i < students.length; i++) {
  console.log(`${i}: ${students[i].name}`)
}

// 0: Taro
// 1: Jiro
// 2: Siro
```

これを`for...of`で実現する時は、分割代入(destructuring)と`Object.entries()`を利用します。まずコードです。

```js
for (const [index, student] of Object.entries(students)) {
  console.log(`${index}: ${student.name}`)
}
```

[MDN 分割代入](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
[MDN Object.entries](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/entries)

とか調べてたら遅いから素直に`Array.forEach()`使えって[言われていました](https://jsperf.com/for-of-vs-foreach-with-index)。

```js
students.forEach((student, index) => {
  console.log(`${index}: ${student.name}`)
})
```

結局これがベストなのか。

分割代入の使い所がいまいちわかっていなかったので、理解の助けにはなったとしてよしとしよう……
EC-CUBE 3 HTMLタグを有効にする方法

テンプレート内で変数指定する際にHTMLタグを有効にしたい場合は

```
|raw
```

をつけると有効になります。

```
path : src\Eccube\Resource\template\default\Product\detail.twig

{{ Product.description_detail|raw|nl2br }}
デフォルトで商品説明に記述があります。
```
sshtunnel で Paramiko のエラーが出た場合の対処法

Python3 で sshtunnel を使って接続する場合、以下のようなエラーが出ることがあります。

```
ERROR   | Unknown exception: p must be exactly 1024, 2048, or 3072 bits long
```

手元の環境は以下になります。

* Ubuntu 16.04 LTS
* Python 3.6.4 :: Anaconda, Inc.
* sshtunnel==0.1.3 、paramiko==2.4.1

このような場合は paramiko のバージョンを一旦下げると接続できることがあります。

```
pip install paramiko==1.18.5
```
VBからJAVAに移行する際の書き方、注意点

##はじめに
VBからJAVAに移行する時に、自分が調べたVBの処理や、注意点を書いていきます。

### if文
基本的にjavaと違いはありません。
[三項演算子](https://ja.wikipedia.org/wiki/%E4%B8%89%E9%A0%85%E6%BC%94%E7%AE%97%E5%AD%90)はIIfを使います。(IIf(条件式,true,false))

```vb

'変数宣言'
Dim test As Integer

test = 10

If test = 10 then

End If

test2 = IIf(test = 10, "true", "false") 

```
javaソース

```java

if (test == 10) {
}

test2 = test ? "true" : "false";
```


### for文
TOの前が初期値、TO後が終了値(TOで「5」が指定されていた場合「5」以降になるまで繰り返します)、stepが増加値です。
stepは省略可能で、stepが無い場合、ループされるたびに初期値が+1されます。

**stepにマイナスの数字が入っていた場合、初期値が終了値を下回るまでループします。**

VBソース

```vb

' ①加算'
For test = 2 TO 6 step 2
  ' test値を2ずつ加算する '
Next

' ②減算'
For test = 10 TO 6 step -2
  ' testの値を2ずつ減算する'
Next

```
javaソース

```java

// ①加算
for (int test = 2; test <= 6; i+=2) {
}

// ②減算
for (int test = 2; test >= 10; i-=2) {
}
```

###format
VBのフォーマットをjavaに置き換えるときは基本的にはDecimalFormatを使うことでそのまま置き換えることが出来ます。
**ただし、「/」はDecimalFormatでは使えないのでSimpleDateFormatを使います。**

VBソース

```vb

' 10000を10,000で表示'
format(10000, "###,###")

' 20180426を2018/04/26で表示'
format(20180426, "####/##/##")

```
javaソース

```java

DecimalFormat df = new DecimalFormat("###,###");

// 10000を10,000で表示
df.format(10000);

SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");

SimpleDateFormat sdf2 = new SimpleDateFormat("yyyy/MM/dd");

Date date = sdf.parse("20180426");

// 20180426を2018/04/26で表示
sdf2.format(date)

```

###改行
VBは改行したい場合は「vbCrLf」を使います。

##まとめ
VBもJAVAも基本的な考え方は一緒です。
しかし、VB側は機能が豊富ため、ソースコードをそのままJAVAに置き換えるときに、java側で新しく処理を書かないといけなくなる時があるので、注意が必要です。
PyCharmを使う前に知りたかった情報まとめ

## この記事について

最近 Visual Studio Code から PyCharm に乗り換えました。
はじめに知っとけば効率よかったなと思う情報をまとめました。

## 日本語マニュアル・チュートリアル

**JetBrains 公式マニュアル日本語版β PyCharm**
https://pleiades.io/help/pycharm/meet-pycharm.html

**トップページ(JetBrainsの他のIDE)**
https://pleiades.io/

JetBrainの公式です。機械翻訳なのか日本語が固くて読みづらいところもありますが、今年の一月にできたばかりでこれから修正されていく予定とのこと。
https://twitter.com/willbrains/status/956861008051515394

なんにせよ日本語で読めるだけでも非常にありがたいですね。

## チートシート

**PyCharm 公式ショートカット一覧 (日本語版) Windows/Linux** https://pleiades.io/sites/willbrains.jp/keymap/pdf/shortcut_pycharm_windows.pdf

印刷して手元においておくとはかどります。

## 書籍で学ぶ

PyCharmはJetBrain社が作ったJava用IDEの「IntelliJ IDEA」の派生製品です。
PyCharmの操作体系は「IntelliJ IDEA」と共通なのでノウハウはそのまま使えます。PyCharmの日本語書籍というのはないのですが、IntelliJの解説書が去年出ています。

**IntelliJ IDEAハンズオン――基本操作からプロジェクト管理までマスター 山本 裕介**
http://amzn.asia/2r8xCu6

買ってみましたがPyCharmに関連する内容は全体の半分強でした。
初心者向けの内容で、JetBrain社の製品体系、操作の説明と基本的なプロジェクト開始方法が解説されています。3000円と少し割高ですが、学習開始のハードルを下げる効果は高いと思いました。お金に余裕があったら買いましょう。

## 学生無料

ac.jpドメインのメールアドレスか学生証のコピーを提出すればProfessionalが無料で利用できるようです。

参考：[JetBrains系IDEの学生版を取得した話](https://qiita.com/f0reachARR)

## 日本語化

試してませんがPleiadesを使う方法とresources_jpを使う方法があるようです。

参考：[PyCharmの日本語化設定](https://qiita.com/suecharo/items/4d8774b43b0213527f9f)

参考：[PyCharm日本語化(resources_jp)](https://qiita.com/takumi_mas/items/c6cc2a5c24eb3d11df09)

# リンク集 

PyCharmはJetBrain社が作ったJava用IDEの「IntelliJ IDEA」の派生製品です。
IntelliJ IDEAの派生製品はPyCharmのほかに以下の製品があります。

- WebStorm
- PHPStorm
- GoLand
- RubyMine
- Android Studio 等


これらの製品は操作体系がほぼ同じであるため、他の製品のノウハウはPyCharmでも大体流用可能です。PyCharmのエントリの他、Qiitaでいいねの多い派生製品のエントリを集めました。

- [最強のPython統合開発環境PyCharm]
(https://qiita.com/yamionp/items/f88d50da8d6b548fc44c)

- [最強のPython開発環境 PyCharmのすゝめ](https://qiita.com/pashango2/items/de342abc10722ed7a569)

- [PyCharm のオレオレ最強設定](http://akiyoko.hatenablog.jp/entry/2017/03/10/082912)

- [忙しい人のためのIntelliJ IDEAショートカット集（´-`）](https://qiita.com/yoppe/items/f7cbeb825c071691d3f2)

- [意外と知らないIntelliJ IDEAのGit管理機能いろいろ（´-`）](https://qiita.com/yoppe/items/fd03607d4d4f191d32dd)

- [既に最強なIntelliJ IDEAを更にパワーアップさせられる10個のプラグイン](https://qiita.com/konohiroaki/items/b9a810702d87a0b6bb53)

- [知らないと損?RubyMine(IntelliJ)で役立つ細かいテクニック７つ](https://qiita.com/Avene/items/756c17f87d28d2ee47a4)

- [PhpStormでまず覚えるべきショートカット](https://qiita.com/crifff/items/bbdf850f0d90ad16415a)

- [Android Studioの超高速コーディングを支える技術（テクニック）](https://qiita.com/yuya_presto/items/813c19513c2771815b28)

こちらからは以上です。
Vue.js のデータバインディングは双方向しかないという誤解

ネットを見ていると Vue.js のデータバインディングは「双方向」とだけ紹介されていたり、双方向なので使いづらいとまで言っている人もいたりで、まー、たしかに Vue.js も双方向をアピールしているようなところがあるので仕方がないと思いつつも、誤解が広まるのもどうかと思ったのでちゃんと書いときます。

これは

```html
<input type="text" v-model="foo" />
```

こう書くのと一緒です。

```html
<input type="text" :value="foo" @input="foo = $event.target.value" />
```

値を渡すのと、変更イベントを受け取る処理は独立しています。

双方向というと親の変数を子が勝手に更新してしまっている印象がありますが、よく見れば子からのイベントに反応して親が自分で変更していることがわかります。

こうなるとあまり双方向という感じはしないんじゃないでしょうか。

なので、一方向にしたければ `:value="foo"` と `@input="foo = $event.target.value"` を片方だけにするとか、別々に異なる処理を書けばよくて、そのときの変更イベントを受けとったときの処理が、値をそのまま変数にセットするだけで、その変数と渡す変数が同じ場合にコードが冗長だと感じたら初めて v-model に置き換えればいいということです。

つまり Vue.js は双方向データバインディングしかないのではなくて双方向データバインディングが書きやすいが正しいです。
システム設計の流れ・設計書の構成メモ

システム開発に関わる機会が多くなってきたので、仕様書作成に関して色々とメモ。
ウォーターフォールモデルでの上流工程について記述していく。

上流工程は
「<b>要件定義</b>」→「<b>外部設計</b>」→「<b>内部設計</b>」の流れに従って進められていく。

# 要件定義
開発するシステムに求められている機能などの要件をまとめる事。
例えば

+ 「パスワード認証」「データベース内検索」などの機能要件
+ 「入力データ」「出力データ」の仕様
+ 「保守性」「操作性」などの非機能要件
+ 業務フロー

などが挙げられる。
RFP(提案依頼書)作成や事前調査などを行って、本当に必要な要件をじっくりと精査していく。
ココでまとめた内容を元に開発が進められる為、洗礼された要件定義を行うことで見落としによる仕様変更の回数を減らす事が出来る。
要件定義時に扱うのは<b>必ず保証しなければならない項目</b>が中心であり、UIデザインなどのデベロッパー側が決めても構わない部分は、後述の<b>外部定義</b>で行う。

## 要件定義書
要件定義の結果を文書にしたモノを<b>要件定義書</b>と呼ぶ。
参考 : http://www.atmarkit.co.jp/ait/articles/0911/19/news109.html

最低限明記しておいた方が良さそうな項目は以下の５つ。

+ システム概要
    + 何をするシステムなのか
    + どうしてそのシステムが必要なのか
    + そのシステムの目標は何なのか
+ システムの構成図
   + システム概念図
   + システムの業務フロー
   + ユースケース図
+ 機能要件
    + システムの機能一覧
    + 各機能の詳細
+ 入出力要件
    + 入力データ一覧
    + 各入力データの詳細(データ項目・ファイル形式など)
    + 出力データ一覧
    + 各出力データの詳細(入力データと同様)
+ 非機能要件
    + セキュリティ要求
    + 品質・性能要求
+ その他
    + 概略スケジュール
    + ステークホルダー相関図（関係図）

# 外部設計
(クライアントからの要件がほぼ出揃った後に、)
要件定義書に従ってシステムの構成を具体的に設計していく事。
クライアント側にも共有する前提の「要件定義書」とは異なり、<b>「基本設計書」(=外部設計書)はデベロッパーの視点に立って記述していく</b>。ただし基本仕様書をレビューにはクライアントも参加する(らしい)。

「外部設計」は主に以下の３つに分類される。
### 方式設計
別名「アーキテクチャ設計」。
「<b>何を使って</b>」「<b>どのような工程で</b>」「<b>どのようなシステムを</b>」製作するのか？を順番に設計していくイメージ。

+ 何を使って
    + 開発方針を定めていく。具体的にはハードウェア・ソフトウェア構成など
    + 大規模開発の場合、使用言語やプラットフォームは指定するのが望ましい
+ どのような工程で
    + 開発体制
    + 開発スケジュール
    + プロジェクト管理ツール
+ どのようなシステムを
    + システム構成図

### 機能設計
システムをモジュール単位に分割し、各モジュールの外部仕様を設計する。UML図が活躍する事が多いフェーズ。
各モジュールの詳細設計は、後述の「<b>内部設計</b>」で行う。

+ 画面遷移図
+ 画面レイアウト(UI)設計図
+ シナリオ
+ ビジネス・ロジック
+ 機能一覧表
+ データベース設計
    + ER図
    + テーブル定義書

### その他設計
この他にも「セキュリティ設計」「運用設計」「テスト設計」などを行う。

## 基本設計書
外部設計で決定した事をまとめて文章化したモノを<b>基本設計書</b>と呼ぶ。

+ システム概要
    + シナリオ
    + ビジネス・ロジック
+ システムの構成
   + システム構成図
   + 業務フロー・アクティビティ図
   + ハードウェア・ソフトウェア構成図
   + ネットワーク構成図
+ 機能一覧表
+ データベース仕様
    + ER図
    + テーブル定義書
+ UI設計
    + 画面遷移図
    + 画面レイアウト設計図
+ その他
    + 開発体制
    + 開発スケジュール
    + プロジェクト管理ツール


# 内部設計
外部設計では「システム全体の構成」「開発方針の決定」をメインに設計していましたが、
内部設計では「<b>どのようなモジュールを実装してシステムを構成するか</b>」の一点に注目して設計していきます。
各モジュールの構造・データフローが主な記述事項です。
外部設計ではレビュワーにクライアントが含まれていましたが、内部設計には<b>SE・PG</b>だけが携わります。PGのみを対象にした資料だと考えて問題ありません。
実は、そもそも内部設計書無しでコーディングを始めてしまった方が効率が良い！と考えている人も少なくないようです。

## 内部設計書
「詳細設計書」とも呼ばれるようです。
内部設計書は資料として１枚にまとめるのではなく、各モジュールの仕様書として１枚ずつ作成される場合が多いみたいです。

+ 機能分割説明
    + クラス図
+ データフロー
    + DFD図
+ モジュール詳細
    + モジュール名
    + 役割
    + 引数・戻り値
    + 処理概要
    + 備考

# 実装開始
内部設計が終わった後に、ようやくPGによるプログラミングが開始されます。
実装が完了した後は、外部設計で作成した「テスト仕様書」に従って、単体テスト→結合テストを行っていきます。

# あとがき
調べてみるまで全く知りませんでしたが、上流工程って作らなければならない仕様書・図が多いんですね。
また、仕様書の書き方も会社によって異なる事が多く、デファクトスタンダードになってるサンプルが見つからなかったので苦労しました。
SEとして働き始める人は、その会社の流儀を覚える事から始める必要がありますね。

この記事はシステム開発未経験者が短時間で調べた内容をまとめただけですので、工程の抜け・間違いがあるかもしれません。あくまで参考資料として、ご了承ください。

#参考
https://hnavi.co.jp/knowledge/blog/external_design/
http://www.atmarkit.co.jp/ait/articles/0907/31/news103_2.html
https://qiita.com/mikakane/items/b8045a11dba8d08e5fe4
https://www.widesoft.co.jp/technology/3536
Windows Subsystem for Linux (WSL) でJava環境の導入する

## WSLのインストールは…
まだ入れてないって方は [Windows Subsystem for Linuxをインストールしてみよう！](https://qiita.com/Aruneko/items/c79810b0b015bebf30bb) などをご参考に。
いまはいろんなパッケージが導入できますがUbuntu入れました。

# Java環境が入っているか確認する

次のコマンドで実行環境がインストールされているか確認します．

```
java -version
```

インストールされていないと次のようなメッセージが出力されます

```
The program 'java' can be found in the following packages:
 * default-jre
 * gcj-5-jre-headless
 * openjdk-8-jre-headless
 * gcj-4.8-jre-headless
 * gcj-4.9-jre-headless
 * openjdk-9-jre-headless
Try: sudo apt install <selected package>
```

パスが通っていない場合も同じように表示されます

# Java環境のインストール
今回はopenjdkをインストールしてみます

```
sudo apt install openjdk-9-jre-headless
```

# JAVA_HOMEの設定
JAVA_HOMEに設定できる対象を調べます

```
sudo update-alternatives --list java
```

8,9を入れた場合には次のように出力されます

```
/usr/lib/jvm/java-8-openjdk-amd64/jre/bin/java
/usr/lib/jvm/java-9-openjdk-amd64/bin/java
```

exportコマンドを使って設定します．
上で出力されたパスの `/bin/java`は不要です．

```
export JAVA_HOME=/usr/lib/jvm/java-9-openjdk-amd64
```

これでJavaの実行ができるようになります
Flexbox内でテキストを省略(ellipsis使用)できないバグの対応

Flexboxを使っていて、なんだかテキストの省略が効かないなと思うことが有りました。
調べると対策が分かったのですが、Qiitaには記事が無さそうだったので、まとめてみました。

# 問題が発生する条件
Flexbox内で、サイズ指定の無い親要素の中で文字省略しようとしてもできない。
(親要素のサイズを指定すれば文字省略されます)

<p data-height="265" data-theme-id="0" data-slug-hash="OZRLaj" data-default-tab="css,result" data-user="peitetsu" data-embed-version="2" data-pen-title="OZRLaj" class="codepen">See the Pen <a href="https://codepen.io/peitetsu/pen/OZRLaj/">OZRLaj</a> by teppei (<a href="https://codepen.io/peitetsu">@peitetsu</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# よく有るパターン
Flexbox内で、一部要素をサイズ固定にし、残りを `flex: 1` とする場合も省略されない。
<p data-height="265" data-theme-id="0" data-slug-hash="VxKZwJ" data-default-tab="css,result" data-user="peitetsu" data-embed-version="2" data-pen-title="VxKZwJ" class="codepen">See the Pen <a href="https://codepen.io/peitetsu/pen/VxKZwJ/">VxKZwJ</a> by teppei (<a href="https://codepen.io/peitetsu">@peitetsu</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# 解決策
親要素に `overflow: hidden`もしくは　`min-width: 0`を指定すると解決するようです。
個人的には `oveflow: hidden`の方が直感的で分かりやすいかと思います。

<p data-height="265" data-theme-id="0" data-slug-hash="xjEKJv" data-default-tab="css,result" data-user="peitetsu" data-embed-version="2" data-pen-title="xjEKJv" class="codepen">See the Pen <a href="https://codepen.io/peitetsu/pen/xjEKJv/">xjEKJv</a> by teppei (<a href="https://codepen.io/peitetsu">@peitetsu</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
Pythonでのファイル操作をosとpathlibで比較

# 概要
ファイル操作する上で書き慣れた[`os`](https://docs.python.org/3/library/os.html)や[`os.path`](https://docs.python.org/3/library/os.path.html)から[`pathlib`](https://docs.python.org/3/library/pathlib.html)に移行する上で頻出なファイル操作をまとめた。

# 背景
Python3で書いているなら、シンプルかつオブジェクト指向でファイルを操作できる[`pathlib`に移行しない理由がない](https://qiita.com/tag1216/items/29bf3b9c3c4b563ff0fe)のですが、既存の`os.path`によるファイル操作とUIが大きく変わっているので、都度ググらずに済むように作りました。

## 基本
簡単のため、どれも

```python
import os
import pathlib
```
をしているとします。

### 絶対Pathの取得
```python
# os
os.path.abspath("foo.txt")
# pathlib
pathlib.Path("foo.txt").resolve()
```
### ファイル削除
```python
# os
os.remove("foo.txt")
# pathlib
pathlib.Path("foo.txt").unlink()
```
### ディレクトリ削除
```python
# os
os.rmdir("bar")
# pathlib
pathlib.Path("bar").rmdir()
```
### 拡張子の取得
```python
# os
os.path.splitext("foo.txt")[1]
# pathlib
pathlib.Path("foo.txt").suffix
```
### ファイル名の取得
```python
# os
os.path.basename("bar/foo.txt")
# pathlib
pathlib.Path("bar/foo.txt").name
```
### ディレクトリ以下の出力(要は`ls`コマンド)
```python
#os
os.listdir("bar")
#pathlib
pathlib.Path("bar").iterdir()
```


## 応用
### 親ディレクトリの取り方
```python
# os
os.path.dirname(os.path.abspath(__file__))
# pathlib
pathlib.Path(__file__).resolve().parent
```

### Pathの結合
```python
# os
os.path.join("foo", os.path.join("bar", "baz"))
# pathlib
pathlib.Path("foo") / "bar" / "baz"
```

# あとがき
また開発していて思いついたら追記していきます。リクエストなどもあればコメントください。
実機iOS端末上でのCharlesハマりポイント

通信のデバッグに[Charles](https://www.charlesproxy.com/)を用いることが多いのですが、実機iOS端末ではいくつかハマりポイントがあったので対応方法をメモ。

## Macに証明書がインストールされていない
Keychain Accessを開き、ログイン＆すべての項目ペーンより、`Charles Proxy CA`がインストールされてない場合は、Charlesを開き、Help > SSL Proxying > Install Charles Root Certificateよりインストールする。

## Macにインストールした証明書が信頼されない
`You may need to configure your browser or application to trust the Charles Root Certificate. See SSL Proxying in the Help menu.`のようなエラーが出る場合、MacにCharlesの証明書が有効下されていない。
[CharlesでLocalProxy通したときHTTPSのページが信頼されない問題](https://qiita.com/yd_niku/items/569df587bc17f29fd7ee)を参考に有効下する。

## 実機iOS端末に証明書がインストールできない
ブラウザから http://www.charlesproxy.com/getssl にアクセスしても証明書がインストールできない場合事がある。
その際は、MacにインストールしたCharlesを開き、Help > SSL Proxying > Save Charles Root Certificateより、Formatとして`Binary certificate (.cer)`を選び保存する。保存したファイルをAirDrop等を用いて実機iOS端末に送り、インストールする。

## 実機iOS端末にインストールした証明書が信頼されない
設定 > 一般 > 情報 > 証明書信頼設定 よりCharles Proxy CAを信頼する。