OmniAICreator/Qiita-1.07M huggingface dataset:
意外と気付きにくいミス〜単数系と複数形〜

##「:」「;」「,」「.」はもちろんだが・・・

プログラミングをしていてよくやってしまうのが、上にあげたような細かいながらもよく使う物の"抜け"。

書き忘れですね。

あるべき場所にこれらが無いことで、一見ちゃんとしているように見えるプログラムも正しく動作しないわけです。

他にも、見えにくいところでは「 」。
スペース。またはインデント（IT業界では主にこちらで呼ばれます）。
これらの抜けや、半角でなく全角で記述してしまった場合。

一部のエディターでプログラミングをしていると、全角のインデントを打ってしまった場合はわかりやすく表記してくれる場合があります。
僕も使っているAtomですと、点線の「○」で示してくれます。


##で、本題。

先日JavaScriptを編集していてやってしまったミスです。
・・・・・これ、原因に気付くのに30分かかりました。まだまだですね。

何かと言うと、ある要素をクリックされたら黒くなる。
また他の部分をクリックされたらそっちが黒くなって、他は元に戻る・・・という、そこまで難しく無い処理でした。

それで、ミスったところ。

```main.js
(function() {
  'use strict';
  var menuItems = document.getElementByClassName('menu_item');
  var i;
  for (i = 0; i < menuItems.length; i++) {
    menuItems[i].addEventListener('click', function(e) {
      e.preventDefault();
      var i;
      for (i = 0; i < menuItems.length; i++) {
        menuItems[i].className = 'menu_item';
      }
      this.className = 'menu_item active';
    });
  }
})();
```
以下は上の訂正版。

```main.js
(function() {
  'use strict';
  var menuItems = document.getElementsByClassName('menu_item');
  var i;
  for (i = 0; i < menuItems.length; i++) {
    menuItems[i].addEventListener('click', function(e) {
      e.preventDefault();
      var i;
      for (i = 0; i < menuItems.length; i++) {
        menuItems[i].className = 'menu_item';
      }
      this.className = 'menu_item active';
    });
  }
})();
```

・・・わかります？

```main.js
  var menuItems = document.getElementsByClassName('menu_item');
                                     ↑
```

ここ（矢印）です。
ここの「s」は訂正前にはありませんでした。

「getElementById('a')」で「id="a"」を当てている要素を取得します。
しかし、ここで取得したいのは"複数"の要素を含むclass。
であれば、英語的にも当然複数形になります。
「getElementByClassName」ではダメなわけです。
「getElementsByClassName」にしましょう。

~~これミスると、後から探すときに上で紹介していたような物よりも見つけにくいかもしれません。~~

・・・・・僕だけでした。

以下、コメントをいただいておりますが、デベロッパーツールからコンソールを開き、コンソール上で実行すると、おかしいところを炙り出してくれます。

皆様も「よくわからないけど、動かん！」ってなったらコンソールにてお試しください<(_ _)>
WindowsのseleniumでFirefoxの操作方法メモ

随時追加予定

# 手順

1. Pythonを入れておく
2. https://github.com/mozilla/geckodriver/releasesからwindows版をダウンロード
3. ダウンロードして解凍後にPythonの実行ファイルと同じフォルダにexeファイルを入れる
4. Pythonを起動する


> from selenium import webdriver
> browser=webdriver.Firefox() # この時にブラウザが開く
> type(browser) # type
> browser.get('http://google.com/') # ページ遷移
git findじゃなくてgit ls-files

[git pathspec ~grepでもls-filesでも同じ文法でディレクトリ除外~](https://qiita.com/darai0512/items/c2cf3719ec0903ab8002)も見てね！

# 拡張子指定

ワイルドカードで指定すればカレントディレクトリ以下でマッチしたgit管理ファイルを表示してくれる

```sh
$git ls-files *.css
src/components/Footer/style.css
src/components/templates/Container/style.css
# サブディレクトリで実行したけどフルパスで欲しい
$cd src/
$git ls-files *.css
components/Footer/style.css
components/templates/Container/style.css
$git ls-files --full-name components/*/*.css
src/components/Footer/style.css
src/components/templates/Container/style.css
```

# 特定ディレクトリ以下

やはりワイルドカード。`src/components/*`と指定すると`src/components`以下のgit管理ファイルを表示してくれる

```shell
$git ls-files src/components/*
src/components/index.js
src/components/Footer/style.css
src/components/templates/Container/style.css
```

# 階層指定

やはりワイルドカード

```sh
$git ls-files src/components/*/*.css
src/components/Footer/style.css
$git ls-files src/components/*/*/*.css
src/components/templates/Container/style.css
```

# おまけ
## grep option alias

```sh
$cat .gitconfig
[alias]
  egrep = "grep --heading --break"
$git egrep reveal
package-lock.json
14163:    "scrollreveal": {
14165:      "resolved": "https://registry.npmjs.org/scrollreveal/-/scrollreveal-3.3.6.tgz",

package.json
63:    "scrollreveal": "^3.3.6"
```

## 今日出たERRORログをgrepする

ログ置き場（ディレクトリ）に今日生成されたログの内、特定文字列をはいてるfileをgrepしたい時のコマンド

```bash
$find /var/log/apache2 -type f -ctime -1 -print0 | xargs -0 grep -n ERROR
```

※ `-ctime 0`でもいいかも


find option | desc
--- | ---
type | f(=file)やd(=directory)を指定
ctime | created time. `find -ctime -8`で一週間前から今日までに生成したもの、`find -ctime +6`で一週間以上前に作成
atime | last accessed time. 同上
mtime | last modified time. 同上
print0 | defaultで空白文字（改行、スペース、タブなど）で区切られるため、'hoge fuga'という名称をxargsに渡すと'hoge'と'fuga'に分解されてしまう。これをヌル文字（0×00、\0）に変換
xargs -0 | 上記を0x00で区切る
Cloud9のPostgresをアップデート。

#序
Cloud9ではディフォルトでPostgresqlが使えるが、バージョンは9.3と古い。
[Postgrestというものを試してみようと思い立った](http://qiita.com/biotist/items/5e1e3b0fdb4ef4732158)ところ、Postgresql9.5以上が必要とのこと。
そこで、現時点の最新版であるバージョン9.6を入れたので記録しておく。
基本的には、Cloud9フォーラムの[Can we upgrade to Postgres 9.4?](https://community.c9.io/t/can-we-upgrade-to-postgres-9-4/3897/4)に従っただけなのだけれど、Cloud9を初心者向け学習にどんどん活用してほしいと思っているので、日本語で補充的なところを含めて書いておく。Cloud9の他にも、Ubuntuサーバーに最新版のPostgresを入れる際も同様のはず。

#①古いpostgresql　を消去する。


```sh
 sudo service postgresql stop
 sudo apt-get --purge remove postgresql\*
```
purge(一掃)して消しちゃえ、っと。

#②postgresql.orgをaptの信頼先にし、アップデート。 

はじめに、postgresql.orgを信頼先とするために/etc/apt/sources.list.d/pgdg.listを編集する。スーパーユーザ権限が必要なので、例えば以下のようにしてvi　で編集。

```sh
     sudo vi /etc/apt/sources.list.d/pgdg.list
```
追記する内容は以下。
>   deb http://apt.postgresql.org/pub/repos/apt/ trusty-pgdg main

postgresql.org　のキーを追加。

```sh
wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -
sudo apt-get update
```

ずらずらとアップデートされる。

#③postgresをインストール

バージョン9.6を指定する

```sh
sudo apt-get install postgresql-9.6
```

#④postgres起動のための権限設定
cloud9のもともとの起動設定は使えなくなっているので、
postgresクリーンインストールの例にならって、
postgresユーザーを設定する。

###postgresユーザーのパスワード設定
```
sudo passwd postgres
```
###pg_hba.confの変更（たぶん必要）
ローカル環境からのアクセス権限設定を行っておく。
pg_hba.confの上の方、
local   all             postgres
の行をtrustとする。
コマンドとしては:

```sh
sudo vi /etc/postgresql/9.6/main/pg_hba.conf
```

> local   all             postgres                                trust

#⑤postgresユーザーとなってpsql

```sh
(あなたのユーザー名)$ su postgres
Password: （上で設定したパスワードを入力）
postgres@kmry1-postgres96-5384036:/etc/postgresql/9.6$psql
psql (9.6.5)
Type "help" for help.

postgres=# 

``` 
 
ここまでくれば、オーケー。ちなみに、この時点で、clud9無償版2GBのディスクスペースのうち120MBがPostgres9.6によって専有される。許容範囲内だね。

#おわりに。
このあと、PostgreSQLで使うコマンドについては、
[PostgreSQL よく使うコマンドまとめ](http://dev.classmethod.jp/server-side/db/postgresql-organize-command/)がわかりやすい。

PostgreSQLは古くからあって使い方も安定しているので、安心して学んでいいはず。PostgreSQL10が出たあとも使える知識と思っておこう。
Android で外部アプリを起動して端末内の音声ファイルを再生してみた件

# 概要

内部ストレージに保存されている `Music/不協和音.mp3` を再生してみます :arrow_forward:

![Screenshot_2017-09-16-02-30-47.png](https://qiita-image-store.s3.amazonaws.com/0/6881/a5f9918d-57e6-46ed-655f-3523ae68bb1c.png)

（※ :copyright: [Yahoo!ファイルマネージャー](https://play.google.com/store/apps/details?id=jp.co.yahoo.android.yfiler)で閲覧）

# 方法

[暗黙的インテントを用いて音楽再生アプリを起動](https://developer.android.com/guide/components/intents-common.html#Music)します。

``` Java
Intent intent = new Intent(Intent.ACTION_VIEW);
File parent = Environment.getExternalStorageDirectory();
String child = Environment.DIRECTORY_MUSIC + "/不協和音.mp3";
intent.setDataAndType(Uri.fromFile(new File(parent, child)), "audio/*");
startActivity(intent);
```

# 実行結果

Android 端末内にインテントを処理できる音楽再生アプリが複数インストールされている場合は、起動するアプリを選択するダイアログが表示されます。

![Screenshot_2017-09-10-22-36-16.png](https://qiita-image-store.s3.amazonaws.com/0/6881/8890217c-d61c-0cae-11da-0428c28a4a26.png)

## アプリケーションを選択後

音楽が再生されました :musical_note:
プレイヤーを閉じると再生が終了します（バックグラウンドでの再生はできませんでした :no_good: ）。

| サウンドプレイヤー | [Google Play Music](https://play.google.com/store/apps/details?id=com.google.android.music) |
|:-----:|:-----:|
|![Screenshot_2017-09-10-23-13-25.png](https://qiita-image-store.s3.amazonaws.com/0/6881/5eb15349-96ea-488e-4160-ef8c19f0af57.png)|![Screenshot_2017-09-10-22-36-24.png](https://qiita-image-store.s3.amazonaws.com/0/6881/215527e5-5c6e-d0e6-e11e-18a484c772b2.png)|
Boolによる簡易排他制御

連続して同じ処理が走らないようにBoolを使った排他制御をすることがあると思います。そういったケースで使えるプチ便利なクラスを書きました。

```swift
class BooleanLock {
    
    private var doing = false
    
    func withLock(_ f: (@escaping () -> Void) -> Void) {
        if doing { return }
        
        doing = true
        f(unlock)
    }
    
    private func unlock() {
        doing = false
    }
}
```

使い方

```swift
class BooleanLockTest {

    ...

    private let fetching = BooleanLock()

    ...

    func doFetch() {
        fetching.withLock { unlock in
            // do something
            // ...

            unlock()
        }
    }    
}
```

以上
tslintのコメントフラグで特定のファイル・部分のlintを無効にする

# 使い方

## ファイル内のすべてのルールを無効化

```typescript
/* tslint:disable */
```

## ファイル内の特定ルールを無効化

```typescript
/* tslint:disable:rule1 rule2 rule3... */
```

## コメントの次の行のすべてのルールを無効化

```typescript
// tslint:disable-next-line
```

## コメントの次の行の特定のルールを無効化
```typescript
// tslint:disable-next-line:rule1 rule2 rule3...
```

```typescript:例
@Directive({
  // tslint:disable-next-line:directive-selector
  selector: 'img[default]',
})
```


# 参考

https://palantir.github.io/tslint/usage/rule-flags/
XCode9でiTunes connectにsubmitしようとした時にITMS-90704のエラーが出る


以下がXCode9でsubmitした時に出たエラー

>WARNING ITMS-90704: "Missing Marketing Icon. iOS Apps must include a 1024x1024px Marketing Icon in PNG format. Apps that do not include the Marketing Icon cannot be submitted for App Review or Beta App Review."

##解決法

images.xcassetsに1024*1024のアイコン画像を追加する

![スクリーンショット 2017-09-14 20.05.35.png](https://qiita-image-store.s3.amazonaws.com/0/64331/42da9510-e698-f9fd-4adc-a614ab2a8efb.png "スクリーンショット 2017-09-14 20.05.35.png")


参考：
https://help.apple.com/xcode/mac/current/#/dev4b0ebb1bb
いつも使うスマホのリモートデバッグ方法（Firefox WebIDE編）

いつも使う、PC の Firefox での Android スマホ（の Firefox と Chrome で）のリモートデバッグ方法を、自分のメモのためだけに…

* （事前準備）Android 端末で USB デバッグを有効にしておく
    * 設定アプリ -> 端末情報 -> 「ビルド番号」を連打
    * 設定アプリ -> 開発者向けオプション -> 「USB デバッグ」を ON

* （事前準備）Android の Firefox の場合、Firefox 自体でも USB デバッグを有効にしておく
    * Firefox の設定メニュー -> 設定 -> 高度な設定 -> 「USB 経由でリモートデバッグする」を ON

* PC の Firefox で WebIDE を開く
    * 設定メニュー -> 開発ツール -> WebIDE（Shift+F8）

* リモートデバッグする
    * Android 端末を PC に USB 接続
    * 「ファイル転送（MTP）」「写真の転送（PTP）」「充電」と出たら「ファイル転送」を選択
    * Android 端末で Firefox を開く
    * WebIDE の右側「USB デバイス」欄から接続した Android 端末を選択
        * ちなみに、Android 端末の Chrome も選択可
        * iOS デバイスの Safari や PC の Chrome などもいけるようだが未確認
    * スマホ側で「リモート受信接続　USB接続によるリモートデバッグを許可しますか？」に「許可」
    * WebIDE の左側の「タブ」欄からデバッグしたいページを開いたタブを選択

すみません。ただそれだけです。
いつも使うスマホのリモートデバッグ方法（Chrome編）

いつも使う、PC の Chrome での Android スマホ（の Chrome で）のリモートデバッグ方法を、自分のメモのためだけに…

* （事前準備）Android 端末で USB デバッグを有効にしておく
    * 設定アプリ -> 端末情報 -> 「ビルド番号」を連打
    * 設定アプリ -> 開発者向けオプション -> 「USB デバッグ」を ON

* PC の Chrome で
    * 設定メニュー -> その他のツール -> デベロッパーツール（Ctrl+Shift+I）
    * デベロッパーツールの設定メニュー（Customize and control DevTools） -> More tools -> Remote devices

* リモートデバッグする
    * Android 端末を PC に USB 接続
    * 「ファイル転送（MTP）」「写真の転送（PTP）」「充電」と出たら「ファイル転送」を選択
    * Android 端末で Chrome を開き、デバッグしたいコンテンツを表示
    * PC の Chrome のデベロッパーツールの Remote devices タブの Devices 欄に表示された端末を選択 -> 「Inspect」ボタンをクリック

すみません。ただそれだけです。
クラスメソッドの定義方法いろいろ

`class << Hoge` の意味があんまり分かっていなかったのでメモ

# 先にまとめ

- クラスメソッドとは、 **そのクラスへの特異メソッドの定義**
- 特異メソッドは、それぞれのオブジェクトがもつ、**特異クラス** に定義されている
- 以下のようにするとその中はは特異クラスのスコープになる

```.ruby
class << Hoge
  # Hoge の特異クラスのスコープ
  def fuga # Hogeに特異メソッド `fuga` を追加
  end
end
```

# クラスに特異メソッドを追加する(その1


```.ruby
class Hoge
end

def Hoge.fuga
  'fuga'
end

Hoge.fuga #=> "fuga"
```

# クラスに特異メソッドを追加する(その2

class定義の中でも、得意メソッドを追加できる

```.ruby
class Hoge
  def self.fuga
    'fuga'
  end
end

Hoge.fuga #=> "fuga"
```

# `extend` を使う

`extend` は **モジュールのインスタンスメソッドを、対象の特異メソッドとして追加**
なので、classの特異メソッドとして追加すれば、クラスメソッドになる

```.ruby
module Fuga
  def fuga
    'fuga'
  end
end

class Hoge
  extend Fuga
end

Hoge.fuga #=> "fuga"
```

# 特異クラスに直接入れる

```.ruby
class Hoge
end

class << Hoge # Hoge特異クラスへの定義 
  def fuga
    'fuga'
  end
end

Hoge.fuga #=> "fuga"
```

## 特異クラスって何?

**全てのオブジェクトは自分専用のclassを内部的に持っており、それを特異クラスと呼ぶ**

- オブジェクトに特異メソッドを追加する場合、そのオブジェクトの特異クラスにメソッドが追加されている
- 特異クラスには、 `singleton_class` でアクセスできる


# 参考

- [クラス／メソッドの定義 (Ruby 2.4.0)](https://docs.ruby-lang.org/ja/latest/doc/spec=2fdef.html)
- [【Ruby】特異メソッドについて - Qiita](http://qiita.com/ta-chibana/items/7965d246ab67e14c175a)
git その2(編集後の作業)

#タスクが完了したら
**変更を確認します**
```git status```
**＋（追加されたもの）ー（作御されたもの）を一つづつ確認しながらadd(ステージング)します**
```git add -p```
 > ```git add```のコマンドを使うと編集箇所の確認がなく、一つづつaddの後ろに編集ファイルをコピペしないといけないので```add -p```がおすすめです

   >git addしなかったものについて
   いらないものについて
   ```削除（rm -rfとか）```
   今はプッシュしないけど、そのうちするものについては一時避難させる場合
   ```git stash```
   新しいブランチを作った時、そこで使いたい時に避難先から帰宅させる場合
   ```git stash apply```

**addでステージングしたファイル達をcommitさせます**
  ```git commit　-m [A_K-8]ユーザーの新規登録画面作成```
  >```git commit```　　コマンドを打つとファイルの編集画面が起動します、、、がcommit -m　の方が早いのでおすすめです

**commitするとcommitされたものの記録が残ります**
 ```git log```
**いよいよ自分のパソコン（ローカル環境）で編集した内容をリモート環境(bitbucket,github)に提出（プッシュ）する作業です！**
  ```git push origin project/A_K-8```
**リモート環境(bitbucket）を確認して更新されているか確認し,pullリクエスト（自分の編集内容がいい感じか、できる人（レビュワー）に見てもらうこと）を作成しましょう**
>bitbucketでプルリク作成時の注意点
  左　自分が編集したブランチ名を選択、右　developを選択  
  レビュワーの選択
  ブランチの閉鎖のチェックボックスをチェック

以上で終わります。
ESLint v4.7.0

前 [v4.6.0] | 次 [v4.8.0]

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">ESLint v4.7.0 has been released: <a href="https://t.co/lEWLX3Z3oD">https://t.co/lEWLX3Z3oD</a></p>&mdash; ESLint (@geteslint) <a href="https://twitter.com/geteslint/status/908790803681615872">2017年9月15日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

ESLint 4.7.0 がリリースされました。
小さな機能追加とバグ修正が行われています。

質問やバグ報告等ありましたら、お気軽にこちらまでお寄せください。

> 🏢 [日本語 Issue 管理リポジトリ](https://github.com/eslint/eslint-jp)
> 👫 [日本語サポート チャット](https://gitter.im/eslint/eslint-jp)
> 🏢 [本家リポジトリ](https://github.com/eslint/eslint)
> 👫 [本家サポート チャット](https://gitter.im/eslint/eslint)

# 🚀 本体への機能追加

## [#9090]: プリプロセッサを持つプラグインが自動修正をサポートできるようになった

プラグイン開発者向け。

プリプロセッサを持つプラグイン、例えば [eslint-plugin-html] や [eslint-plugin-markdown] が自動修正をサポートできるようになりました (プラグイン側の修正が必要です)。

プリプロセッサを持つプラグインを利用すると、検証ルールに渡されるソースコードがファイルに書かれているコードと違うものになる (できる) ため、公式には自動修正をサポートしていませんでした。[eslint-plugin-html] はモンキーパッチを使って独自に自動修正をサポートしていますが、このバージョンからはそれが不要になります。

## [#9283]: ~~常に`node.parent`が存在するようになった~~

この機能追加は Breaking change と判断されて元に戻されました。

次のメジャーアップデートで再実施される予定です。

# 💡 新しいルール

今回はありません。

# 🔧 オプションが追加されたルール

今回はありません。

# ✒️ `eslint --fix` をサポートしたルール

## [#9149]: [newline-per-chained-call]

```js
/*eslint newline-per-chained-call: error */

foo().bar()[baz]().qiz()

// Gets fixed to:

foo().bar()
[baz]()
.qiz()
```

----

[v4.6.0]: http://qiita.com/mysticatea/items/fa2f38f3ce8b5ea9e56f
[v4.8.0]: http://qiita.com/mysticatea/items/5c66678f221b6c2e068d
[#9090]: https://github.com/eslint/eslint/issues/9090
[#9149]: https://github.com/eslint/eslint/issues/9149
[#9283]: https://github.com/eslint/eslint/issues/9283
[#9999]: https://github.com/eslint/eslint/issues/9999
[newline-per-chained-call]: http://eslint.org/docs/rules/newline-per-chained-call
[xxxx]: http://eslint.org/docs/rules/xxxx

[eslint-plugin-html]: https://www.npmjs.com/package/eslint-plugin-html
[eslint-plugin-markdown]: https://www.npmjs.com/package/eslint-plugin-markdown

<!-- 
![JSCS Icon](http://jscs.info/favicon.ico) JSCS 互換ルールです。
-->
仮想通貨の自動監視プログラムで学んだ例外処理の良さ

Javaを学んでた時は謎だった例外処理を，今回少し理解できた気がする．
「わざわざ面倒な例外処理するメリットが謎」という学習者がもしいたら，例外処理が活きる一例として役に立てば幸い．

#仮想通貨レートの自動監視
このプログラムを作る過程で，例外処理がわかってきた．
言語：Python3
概要：[Zaif](https://zaif.jp/)の仮想通貨レートを自動監視
ライブラリ：[GitHub - techbureau/zaifapi](https://github.com/techbureau/zaifapi)　（ありがとうございます）

やったことはZaifの公式サイトを眺めてるのと同じ．ひたすらapi経由でZaifに接続し，通貨レート情報を持ってくるだけ．

```python3
# -*- coding: utf-8 -*-
from zaifapi import ZaifPublicApi

zaif = ZaifPublicApi()
# 繰り返しは10回
for i in range(10):
	while (1):
		err = False
		
		try:
			askBJ = zaif.depth('btc_jpy')['asks'][0][0]
			askMJ = zaif.depth('mona_jpy')['asks'][0][0]
			askMB = zaif.depth('mona_btc')['asks'][0][0]
			bidBJ = zaif.depth('btc_jpy')['bids'][0][0]
			bidMJ = zaif.depth('mona_jpy')['bids'][0][0]
			bidMB = zaif.depth('mona_btc')['bids'][0][0]
		
		except:
			err = True
			print('except')
		
		if (err == False):
			break
	
	print(askBJ, end=', ')
	print(askMJ, end=', ')
	print(askMB, end=', ')
	print(bidBJ, end=', ')
	print(bidMJ, end=', ')
	print(bidMB)
```

上記プログラムのtry内を処理してる時に接続エラーが起こると，例外発生を検知してexcept内の処理が行われ，ループから抜けられずtryを繰り返す．
つまり「接続ミスしたらもう一度接続」を，接続成功するまで繰り返す．

僕の感覚では，例外処理の良さはこの3つだと思う．
1. 例外が起きても落ちない
2. エラーの原因がわかりやすい
3. エラーをまとめておける

#1. 例外が起きても落ちない
偏った見方だが，例外が起こる部分をtryに囲むと，exceptでpass（何もしない）しても落ちなくなる．
無視した例外が波及して別の場所でエラーを起こす・・・なんてことになると結局落ちるが，上記プログラムなら接続エラーくらいしか起こらないので踏ん張ってくれる．

昔の僕はそういうこともわからなかったので，例外のことを「執拗にプログラムを落とそうとする謎の悪魔」だと本気で思ってた．

【2018/2/5追記】
ご同類がいた模様
>[SIerの下請け開発者ってレベル低すぎない？](http://uxlayman.hatenablog.com/entry/2017/02/12/low)
フレームワークやライブラリのやっていることを理解しない
～中略～
こういうひとたちは典型として「例外」を全く理解できません。なんのためにあるのかわからず、自分のコーディング作業を邪魔するもの程度の認識しかありません。 
```
try {
...
}catch(Exception e) {
  return false;
}
```
こういうコードを書いてせっかくのエラー情報を握りつぶしたりするのです。


僕の例も確かにこれで，対策も「なかったことにする」だから耳がもげる．

言い訳をすると，僕の場合は「接続しなおせばOK」なのでまだマシだと思う．

要は「黙って再接続してほしいのに逐一落ちるな」という意味でのexceptスルー．

もちろん例外内容を取っとかないと，「実はAPIキーが違う」とか「そんな通貨ペアはない」みたいな例外が出ても発見できないので長期的にはアウト．

#2. エラーの原因がわかりやすい
※エラーの原因特定に例外処理が役立つ，とダイレクトな記事があった．
>[運用者が困る例外処理の書き方](http://qiita.com/tokishirazu/items/b510ebfdb7ff089fe44c)
運用者はシステムでエラーが発生した際に、プログラムから出力されたログを見て原因の特定作業を行います。このとき重要となるのが例外処理です。_適切な例外処理が行われていれば、原因の特定が容易になります。_

本稿プログラムでも，完成前はException: return status code is 504というエラーにしばらく悩まされたが，
実はこの時点で_問題が504エラーであること_を教えてもらっていたわけで，最終的には「通るまで接続試行をやめなければおｋ」にたどり着けた．

これがもし例外じゃないエラーで「変数の型が違う」とかだったら，
_なんで型が違うんだデバッグ→何も問題は無いのに何故だorz→しばらく回してると，時々同じエラーが起こるな→通信の部分で受信データが狂ってるぞ，これで型が違ったのか_

と来てようやく原因がわかり，さらに
_なんで正常な時と狂ってる時がある？→定期的に起こってるような→自分側？　相手側？→相手側のサーバが調子悪くなってんのか！_

ここで初めて504エラーに気付く，ような気がする（例が悪いかもしれない）．

そういう過程をすっ飛ばして即座に「504エラー出たんで」と教えてくれるのが例外．

#3. エラーをまとめておける
※例外が起きてもプログラムが落ちない，と書いたが，プログラムが落ちる原因は例外自体ではなく，値がおかしいとか接続ミスとかのはず．
例外はむしろ原因を教えてくれる仕組みだが，初学者の段階でドカドカ見せつけられた結果勘違いしてしまったのかもしれない．

例外処理を利用すると，細かい部分がどうだろうと「根本が同じ問題」なら同じ例外として扱える．
int型にstr型を渡そうとしてもその逆をやろうとしても，変数の型が違うという問題は同じなのだから，if文を2つ書かなくても例外としてTypeErrorにまとめられる（例が悪いかもしれない）．

これを延長しまくれば「何か問題があれば例外が起こる．例外が起こったら例外処理で全部スルーだ！」みたいなゴリ押しも書けないことはない．

今回利用したライブラリにも，変な値を検出したらわざと例外扱いにするような節が見られる（504エラーがそうじゃねとか思ってる）．利用側は細かいことを気にしなくて良い，という効率的な仕組みに見えてちょっと素敵．
Railsでproduction環境だけ背景画像が読み込まれない

Railsを勉強し始めて半年くらいです。

AWSにUnicorn+Nginxでデプロイしたら、背景画像が読み込まれないというエラーが出ました。
直すのに１時間以上かかってしまったので、同じようなエラーに詰まった人の助けになればと思います。

## 起きた問題
assets/images/以下に画像を配置して、以下のようにして背景画像を指定しました

```scss
.hoge {
  background-image: url("hoge.png");
}
```

ローカル環境だと読み込まれるのに、本番環境だと読み込まれない

検証したら
`404 not found`
こんな感じのエラー。

```rb
<%= image_tag 'hoge.png' %>
```
だと読み込まれるのに...
ローカルと本番の挙動が違うってことはアセットパイプラインが原因かな？

## 原因
やっぱりアセットパイプラインでした。

アセットパイプラインの処理はローカル環境と本番環境で違います。
ローカル環境の場合は`url("hoge.png")`としてあげればちゃんとassets以下から読み込んでくれます。

ですが本番環境の場合はプリコンパイルするとき、画像のURLにフィンガープリントを付与します。
なので`url("hoge.png")`ではフィンガープリントが付与されず`not found`になってしまいます。

## 解決法
`image-url()`というRailsが提供しているアセットパイプラインの機能を使うといいみたいです。
この辺りの機能は[Railsガイド](https://railsguides.jp/asset_pipeline.html)を見ると良いと思います

プリコンパイルするとちゃんと`url("assets/hoge-*****************.png")`に変換してくれます


## 結果
```scss
.hoge {
  background-image: image-url("hoge.png");
}
```
でちゃんと読み込んでくれました。
アセットパイプライン難しい...


## 参考
https://railsguides.jp/asset_pipeline.html
http://mitsuru793.hatenablog.com/entry/ruby/ruby_on_rails/324/
fastTextの2種類の用法、利用目的、記事の見分け方

[fastText](https://fasttext.cc)という、Facebookが公開した自然言語学習ツールがあります。

このツールには、2種類の用法があります。**テキスト分類(Text Classification)**と、**単語表現学習(Word Representation Learning)**です。どちらの用法での話か確認してからネットの記事を読んだり同僚と会話したりしないと、混乱してきます。そこで、各用法での利用目的の例と、どちらの用法の記事か見分けるポイントを書いてみることにしました。

## 各用法での利用目的

### テキスト分類(Text Classification)

あらかじめ正解として学習させたラベル(分類、タグ...)の中から、入力された文章にふさわしいラベルを出力する形態です。1個以上の正解のラベルと、それに関連する文章の組で学習させます。

* 記事が、どのカテゴリ（政治経済／生活／社会...）に属するか？
* 書いた文章につけるべきタグは？
* 文章の感情分析（怒っている／いない...）

### 単語表現学習(Word Representation Learning)

学習に使用した全ての単語から、入力された単語に関連性のある単語を出力する形態です。正解も何もなく、ただひたすら延々と単語の連続を学習させます。

* AにとってのBがCにとっての何になるかのような、アナロジー分析（「フランス」－「パリ」＋「東京」＝「日本」）
* スペルミスや誤記の修正サジェスト
* バスケット分析や、クロスセリング系サジェスト
* 単語の連想遊び（有名人Aさんに近い単語はBだ！的な）

## どちらの用法の記事か見分けるポイント

### テキスト分類(Text Classification)

* 「分類」「カテゴリ」「タグ」「ラベル」と書かれている
* `supervised`で学習し、`predict`で判定し、`test`で検証している
* 入力ファイルに、「\_\_label\_\_ラベル名 単語の並び」の行がたくさんある

```text:入力ファイルの例(公式チュートリアルより)
__label__sauce __label__cheese How much does potato starch affect a cheese sauce recipe?
__label__food-safety __label__acidity Dangerous pathogens capable of growing in acidic environments
__label__cast-iron __label__stove How do I cover up the white spots on my cast iron stove?
```

### 単語表現学習(Word Representation Learning)

* 「連想」「連関」と書かれている
* `skipgram`または`cbow`で学習し、`nn`や`analogies`で判定している
* 入力ファイルに単語だけが並んでいて、改行が無さそうだ
* `*.vec`ファイルの中身を見せてドヤしている

```text:*.vecファイルの例(公式チュートリアルより)
the -0.10363 -0.063669 0.032436 -0.040798 0.53749 0.00097867 0.10083 0.24829 ...
of -0.0083724 0.0059414 -0.046618 -0.072735 0.83007 0.038895 -0.13634 0.60063 ...
one 0.32731 0.044409 -0.46484 0.14716 0.7431 0.24684 -0.11301 0.51721 0.73262 ...
```

## 注意点

* 前半で単語ベクトルの解説をして、後半でテキスト分類を解説しているケースもあります。「ベクトル」という言葉で単語表現学習の方の用法だと思い込まないようにしたいところ。

* fastText公式のPython APIでなく、お手製のPythonスクリプトを使って解説しているため、`supervised`や`skipgram`などのfastTextオプションが記事中に存在しないこともあります。この場合は、面倒でも、何をしようとしている記事かを確認して判断する必要があります。
git その１(タスクを受けた時)

#タスク（チケット）を受けたら
##まず全てのブランチを表示させて今自分のいるブランチを確認、developに戻る。
###git branch
###git checkout develop
##リモートリポジトリ（GITHUB/BITBUCKET.etc）から最新のdevelopを取得する。(developですること)
###git pull
##新しいブランチを作成する（バックログ等でチケット（課題）管理をしているので、チケット（課題）名からブランチ名をつける）
###例~ git checkout -b project/K_A-8
##developと同じ内容の分身（ブランチ）ができているのを確認
###git branch
##gemの変更があった時は
###bundle install
##DBの変更があった時は
###bundle exec rails db:migrate:reset
##最後にサーバを起動して正常に動くか確認する
###bundle exec rails s
集計関数をSELECT文で使用する場合に気をつける事。

SELECT文で集計関数(SUMやMAX等)を使用したクエリの検索結果が無い場合、group byの有無でレコードの返りが違う事を発見。
業務でハマった為、ここに忘備録として残しておきます。

# 環境

- 使用したDBのバージョン等

![mysql_env.GIF](https://qiita-image-store.s3.amazonaws.com/0/29247/16dace45-e68b-4cec-2c1b-150467e7af62.gif)

- テーブル構造

![table_structure.GIF](https://qiita-image-store.s3.amazonaws.com/0/29247/0f65212e-71b1-6a0b-7d4f-be6f1a72cb6d.gif)


# SELECT 集計関数(列名) FROM ～ GROUP BYの場合

- group by句を用いた場合は、**レコードが一行も返却されない**

![select_max_with_groupBy_clause.GIF](https://qiita-image-store.s3.amazonaws.com/0/29247/ca6aeb1d-eb64-fdbd-4bdc-17d80df637ae.gif)


# SELECT 集計関数(列名) FROM ～ の場合

- group by句を用いない場合、**必ず一行レコードが返却される。**

![select_max.GIF](https://qiita-image-store.s3.amazonaws.com/0/29247/2d469410-037c-1cea-5529-0da29cb5499b.gif)

# その他

- 元々はOracleDBで確認した事象だったが、MySQLでも再現した(標準仕様？)

# あとがき

- これ見つけるのに時間かかった……。
いつも書くNode.jsでhttpサーバを立てるテンプレート（オレオレhttps含む）

いつも書くNode.jsのサーバまわりのテンプレートを、自分のメモのためだけに…

* [OpenSSL](https://www.openssl.org/) で秘密鍵（key）、公開鍵（csr）、証明書（crt）を作成（いわゆる「オレオレ」）
    * [Win32 OpenSSL](http://slproweb.com/products/Win32OpenSSL.html)
    * [オレオレ証明書を作成する確実な方法](https://www.erestage.com/apache/ore_ssl_create/) 

* npm で [express](http://expressjs.com/) をインストール

その後…

```js:app.js
"use strict";                                   // 厳格モードにする

// express を使う
var express = require("express");               // express モジュールを使う
var app = express();                            // express アプリ
app.use(express.static(__dirname));             // ルートの静的ファイルへのアクセス許可
app.get("/", function(req, res) {               // ルートへのアクセス要求があったら
  res.sendFile(__dirname + "/index.html");      // index.html を配信
});

// http サーバ
var http = require("http").Server(app);         // http サーバを立てる
http.listen(80);                                // 80番ポートで待つ

// https サーバ
var fs = require("fs");                         // fs モジュールを使う
var opt = {                                     // SSL 認証のパラメータ
  key:  fs.readFileSync("server.key"),          // 秘密鍵
  cert: fs.readFileSync("server.crt"),          // 証明書
  //passphrase: "password",                     // パスワードを設定した場合
};
var https = require("https").Server(opt, app);  // https サーバを立てる
https.listen(443);                              // 443番ポートで待つ
```

すみません。ただそれだけです。
Docker Machineで構築した環境に実機端末でアクセスする 新

http://qiita.com/horikeso/items/3431eacbfee564cbcc5f
こちらでコメントでngrokも良いという事なのでこちらを使用してdocker-machineの環境を公開してみました。変動IPやファイアーウォール等の面倒なことをしなくて良いのでだいぶ楽でした。

* docker-machine（192.168.99.100）をローカルホストにポートフォワーディングする設定をコマンドプロンプトからしておく。

```
netsh interface portproxy add v4tov4 listenport=80 listenaddress=127.0.0.1 connectport=80 connectaddress=192.168.99.100
```
```
netsh interface portproxy show v4tov4
```
```
ipv4 をリッスンする:         ipv4 に接続する:

Address         Port        Address         Port
--------------- ----------  --------------- ----------
127.0.0.1       80          192.168.99.100  80
```

* https://ngrok.com/download
からngrokのwindows番をダウンロードして解凍しておく。

* ngrok.exeを実行するとコマンドプロンプトが開くのでその場で以下のコマンドを実行。

```
ngrok http 80
```
```
ngrok by @inconshreveable                                                                               (Ctrl+C to quit)

Session Status                online
Version                       2.2.8
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://6f33a4ec.ngrok.io -> localhost:80
Forwarding                    https://6f33a4ec.ngrok.io -> localhost:80

Connections                   ttl     opn     rt1     rt5     p50     p90
                              3       0       0.00    0.00    66.53   67.35
```

* http://6f33a4ec.ngrok.io
でアクセスすることが出来ました。

6f33a4ecの部分はngrokを実行する度に変わります。
ngrokを停止（ctrl+Cやコマンドプロントを閉じる）してアクセスすると

```
Tunnel 6f33a4ec.ngrok.io not found
```

となりました。
いつも書くhtmlのテンプレート

いつも書くhtmlのテンプレートを、自分のメモのためだけに…

```html:index.html
<!doctype html>
<html>
<head>
  <meta charset="utf8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
    /* ここにCSS */  
  </style>
  <title>ここにタイトル</title>
</head>

<body>
  <!-- ここにHTML要素 -->

<script>
  // ここにJavaScript
</script>

</body>
</html>
```

すみません。ただそれだけです。
フラッシュ暗算のようなメッセージ表示をしたい

こんにちは。
フラッシュ暗算の要領で、数字の羅列ではなく既に設定したメッセージをonClickで表示する仕組みを作りたいのですが、下記のフラッシュ暗算用のコードからどのように書き換えていけばよいか悩んでいます。例えば、Math.floor(Math.random()*)の部分などはメッセージ表示であれば関係ないので必要ない、という程度までは辛うじて理解しているのですが・・・。何かご指摘や解決のヒントなどございましたら、よろしくお願いします。


```html

<div id="no">
?
</div>
<p>
  <input type="button" value="Start" onClick="Start()">
  <input type="text" value="" id="kotae">
  <input type="button" value="Check" onClick="Check()">
</p>

```
```javascript
<script type="text/javascript">

var intRandom = function ( min, max, len ) {
  var a = new Array( len );
  var r = [ ];
  var s = max - min + 1;

  while( len-- ) r.push( Math.floor(Math.random() * s + min ) );
  return r;
}


var Flash = function ( ) {
  this.init.apply( this, arguments );
};


Flash.prototype.init = (function ( ) {
  return function ( id, vtime, htime, ary ) {
    this.target = document.getElementById( id );
    this.vtime = 'number' == typeof vtime ? vtime: 700;
    this.htime = 'number' == typeof htime ? htime: 100;
    return this.ary = ary;
  };
})();


Flash.prototype.stop = function ( ) {
  clearTimeout( this.tmid );
  return this.setString( 'Stop!!' );
};


Flash.prototype.start = (function ( ) {
  return function ( ) {
    this.setString( 'Go!' ); 
    this.max = this.ary.length;
    this.mode = false;
    this.tmid = null;
    this.cnt = 0;
    setTimeout( (function(that){ return function(){ that.loop() }})(this), 500);
  };
})();


Flash.prototype.setString = (function ( ) {
  return function ( str ) {
    return this.target.firstChild.nodeValue = 'undefined' == typeof str ? '': str + '';
  };
})();


Flash.prototype.loop = (function ( ) {
  return function ( ) {
    var t = '?';

    if( this.max >= this.cnt ) {
      t = ( this.mode = ! this.mode ) ? '': this.ary[ this.cnt++ ];

      this.tmid = setTimeout( (function(that){ return function(){ that.loop() }})(this),
        this.mode ? this.htime: this.vtime );
    }
    this.setString( t );
  };
})();


Flash.prototype.getTotal = (function ( ) {
  return function ( ) {
    var t = 0, c = this.max, n;
    while( c ) t += this.ary[ --c ];
    return t;
  };
})();


Flash.prototype.setData = (function ( ) {
  return function ( ary ) {
    return this.ary = ary;
  };
})();


Flash.prototype.check = (function ( ) {
  return function ( total ) {
    return total == this.getTotal();
  };
})();

var mondai = new Flash( 'no', 400, 150);

function Start( ) {
  document.getElementById( 'kotae' ).value = '';
  mondai.setData( intRandom( -10, 10, 5) );
  mondai.start( );
}

function Check( ) {
  var t = document.getElementById( 'kotae' );
  t.value = mondai.check( t.value ) ? "正解": mondai.getTotal();
}


</script>
```
Go 1.9 の型エイリアスを使って偽 Generics の実装

# はじめに

* Go 1.9 から入った型エイリアス機能を使ってコード生成や refrect を使わない簡単な偽 Generics を実装してみる

# どうやるか

* 任意の型 `t1` を扱う関数などが定義されたファイルを用意する
* その関数を使いたいパッケージにそのファイルをコピーする
* そのパッケージの型 `P1` を `type t1 = P1` と型エイリアスの定義をすることで先のファイルで定義された関数を `P1` から利用できる

# コード

## 任意の型を扱う関数の定義されたファイル

```go:json.go
// t1 型の定義は外部のファイルに任せる

func Marshal(t *t1) (string, error) {
	j, err := json.Marshal(t)
	return string(j), err
}

func Unmarshal(s string) (*t1, error) {
	var t *t1
	err := json.Unmarshal([]byte(s), &t)
	return t, err
}
```

## 先のファイルを利用するファイル

```go:user.go
type User struct {
	Name string `json:"name"`
	Age int `json:"age"`
}

func (u *User) Hello() string {
	return "hello " + u.Name
}

// ここで json.go で定義された型のエイリアスを設定する
type t1 = User
```

## テスト

```go:user_test.go
func TestMarshal(t *testing.T) {
	u := &User{Name: "bar", Age: 100}
	j, err := Marshal(u)
	if err != nil {
		t.Error(err)
	}
	if j != `{"name":"bar","age":100}` {
		t.Error("invalid json: " + j)
	}
}

func TestUnmarshal(t *testing.T) {
	j := `{"name":"bar","age":100}`
	u, err := Unmarshal(j)
	if err != nil {
		t.Error(err)
	}
	if u.Hello() != "hello bar" {
		t.Errorf("invalid user: %v", u)
	}
}
```

# メリット

* こうすることでミックスインのように `json.go` の関数が実行できるようになる
* `json.go` 単体で別のパスにおいておいて任意の型エイリアスを定義することでそのままテストが実行できる
* `go generate` を使って `json.go` をコピーしてくるようにすれば `json.go` が更新されても追従できる

# いつつかうか

* コード生成とか reflect とかめんどくさいけど手軽に Generics っぽいことがしたいときに使えるかも
* 1.9 未満でも `type t1 User` として適宜キャストすれば同じパターンでできなくもない
  * キャストするだけコードは増えるので面倒ではある
Asciidocの表の中でチェックボックスを使う

### 確認環境
AtomのAsciiDoc Preview 2.10.2

### そもそもAsciidocでチェックボックスを書くには

Asciidocでチェックボックスを書くには

```checklist.adoc
* [*] checked
* [x] also checked
* [ ] not checked
```
と書くように、[ドキュメント](http://asciidoctor.org/docs/user-manual/#checklist)に書かれています。
↓出力例
![基本的なチェックリスト](https://qiita-image-store.s3.amazonaws.com/0/162142/6383b9a5-43eb-d7ea-0f98-7b24323cfba9.png)


が、表の中に書こうとすると[ ]がそのまま出てしまいます。

![チェックリストにはならず、そのまま表示される](https://qiita-image-store.s3.amazonaws.com/0/162142/836c5b9a-b15a-9920-1458-2df8af50514b.png)

### 表の中にチェックボックスを書くには

`+++`で囲った文書または`pass:[]`の[]内に書いた文書ではHTMLタグが使用できるので、↓のように書くと表の中でもチェックボックスを表示することができます。

```checklist.adoc
+++<input type="checkbox">+++
pass:[<input type="checkbox">]
```
単にチェックマークを書くのが目的なら↓のようにも書けます。

```checklist.adoc
icon:check[]
✓
&#10003;
```

出力結果
![表の中でもチェックボックスが表示される](https://qiita-image-store.s3.amazonaws.com/0/162142/713721bd-ad04-b948-3926-4755f1da2c45.png)


### より簡潔に表の中でチェックボックスを使う
_9/20 追記しました。azarasiさん、ありがとうございます！_

tableを書く際に、cols属性で幅を指定しますが、数字の後ろにaをつけると、その列ではAsciiDocの記法が有効になります:dizzy_face:。

```
[cols="50,50a"]
|===
|タスク名
|完了？

|タスク１
|
* [*] checked
* [x] also checked
* [ ] not checked

|タスク２
|
* [x] checked

|タスク３
|
* [ ] not checked
|===

```
↓出力結果


![colsの数値にaをつけた場合の出力](https://qiita-image-store.s3.amazonaws.com/0/162142/90ef92e6-7664-135a-13ca-5775eb81f896.png)


参考：
- [Add support for checklist in table](
https://github.com/asciidoctor/asciidoctor/issues/1674)
- [Asciidoctor User Manual -43. Passthroughs-](http://asciidoctor.org/docs/user-manual/#passthroughs)

### この投稿に至った経緯
これまでドキュメントをmarkdownで記述していましたが、AsciiDocがプロジェクトで採用されたため、書き方を調べていました。
プログラミング　6か月目

プログラミングを始めて半年が経とうとしています。

　オブジェクト指向を一通り理解して以降、割とスムーズに学習が進んでいるような気がします。今回も前回と同様に書きたいと思います。

#:pencil2: 進捗状況

**Progate**

JavaScriptⅠ～Ⅳ : リニューアルしたので復習がてら
Swift Ⅲ: 一通り完走 
Rails5 Ⅵ～ Ⅺ : 一通り完走




**ドットインストール**

Sass / SCSS入門　: CSS を効率よく書けるメタ言語のようです
Compass 入門 : Sass のフレームワーク
Gulp 入門　：タスクランナーと呼ばれているようです
CoffeeScript 入門　:JS をより少ない記述で書けるとのこと
Markdown 記法　: よく使ってるけど改めて学習
Node.js 入門　: よく見かけるのでサラッと学習
YAML 入門　： よく見かけるのでサラッと学習

※　主にフロントエンド周りを効率化を図るものばかりです。

#:pencil2: 新着事項
　6 か月目で新たに取り入れたことや、プログラミングで意識したことを書いていこうと思います。

###:arrow_forward: フロントエンド周りの効率化
　Rails を学習している途中、scss という見慣れないファイルがあったので、何だろうと思ってドットインストールで学習してみました。

　実は **CSS をかなり効率よく書くことができる言語**と知り、自分の中で衝撃が走りました。これをきっかけに、フロントエンド周りを効率化できるものがないか色々調べてみました。


　今現在は Gulp を使ってどのように効率化させようか試行錯誤を繰り返しながら作成中です。

 

###:arrow_forward: フロントエンドだけではもったいない
　**「プログラミングまでやらないし、フロントエンドだけでいいや」**とか思うのは、ちょっともったいないような気がします。

　今回書いた記事のように、フロントエンド周りを効率よく書くことができる言語があります。この辺りになると、Ruby や PHP といったプログラミング言語の知識は若干必要になりますが、それらを学ぶ価値は十分にあると思います。

　逆に言うと、プログラミング言語をしっかりやっておけば、こういったメタ言語の習得は比較的容易になり、フロントエンドの効率化が楽に出来るようになるかと思います。
　
　 
#:star: 最後に
　
　フロントエンド周りを効率化するものがあるとは思わなかったのでビックリしました！まだ学び始めたばかりだとは思いますが、荒削りでもいいので効率化を完成させておきたいところです。

　まだ分からないことがたくさんありますが、一日でも早く上達できるように頑張りたいと思います。
PostgRESTをお題にJSON Web Token(JWT)を学ぶ。　①概要

# [1] PostgRESTとは？
##  何者？
githubのreadmeにある、以下のバナーを見れば、意味あいは一発だろう。
ゴロがいいね。実装はhaskell、githubスター数は9500以上。
![](https://github.com/begriffs/postgrest/raw/master/static/logo.png)

出典:　https://github.com/begriffs/postgrest

## PostgRESTの使い所
ドキュメントを読んでいくと使い所が見えてきそう。
以下の出典:　https://postgrest.com/en/v4.3/intro.html

###開発動機
>Using PostgREST is an alternative to manual CRUD programming. Custom API servers suffer problems. Writing business logic often duplicates, ignores or hobbles database structure. Object-relational mapping is a leaky abstraction leading to slow imperative code. The PostgREST philosophy establishes a single declarative source of truth: the data itself.


文中のhobbleとは	ぶかっこうに歩くとかよちよち歩くといった意味合いらしい。（ごく少数の強者を除けば）、webへのデータベース公開をスクラッチからやると、なんだかさえないやっつけ仕事になっちゃうよね、そういうやっつけ感をPostgRESTは排除したいといったところかな。　
はい、たしかに、ワタクシも残念なやっつけ仕事をしちゃってます。

###One Thing Well(一事をしっかりと行う)
> PostgREST has a focused scope. It works well with other tools like Nginx. This forces you to cleanly separate the data-centric CRUD operations from other concerns. Use a collection of sharp tools rather than building a big ball of mud.

なかなかいいね。Nginxなどと組み合わせて使うシャープなツールにPostgRESTはなりますよ、と（以下のような図式）。

![](https://postgrest.com/en/v4.3/_images/tut0-request-flow.png)

Nginxなどのwebサーバーを介してアクセスするクライアント側は自前でRESTで書くか、ライブラリを使うことになる。詳しくは[エコシステムのところ](https://postgrest.com/en/v4.3/intro.html#ecosystem)に書いてある。JS向けのライブラリが多い。あとhaskell製なこともあってかelmのライブラリもある。これらは実装例もいくつかある模様。
###[In production](https://postgrest.com/en/v4.3/intro.html#in-production)
In productionのところが興味深く、有償のツールでも結構採用されていて、使い方をイメージする参考になりそう。PostgRESTなのに[redisのweb管理ツール](https://www.redsmin.com/)にも使われているとのこと。ポスグレをユーザー認証などに使っているのかな。

#[2] JSON Web Token(JWT)によるセキュリティ担保

PostgRESTは　、JWTを用いたロールベースのセキュリティモデルを採用している。

![](https://postgrest.com/en/v4.3/_images/security-roles.png)
出典　[本家サイト　「Overview of Role System」](https://postgrest.com/en/v4.3/auth.html?highlight=JWT)

このあたりは、webにデータベースを公開するにあたって、もっとも気になるところの１つだ。
はたして、以下の図式がいつでも成り立ってくれるのか？
![](https://postgrest.com/en/v4.3/_images/security-anon-choice.png)
出典　同上

## JSON Web Token(JWT)とは？
名前の通り、署名付きJSONをベースとしたセキュリティトークン。概要は、
[JSON Web Token の効用](http://qiita.com/kaiinui/items/21ec7cc8a1130a1a103a)あたりを参考にして欲しい。ここでは、PostgREST経由でJSON Web Tokenを用いて、webにデータベースを公開してみた上で、JWTの考察をしたい。

# 次回
##デプロイ先
素に近いUbuntu server上で速攻PostgreSQLが扱えるということで、Cluod9無償版上にPostgRESTを導入したい。[主要プラットホーム向けのバイナリリリースがある](https://postgrest.com/en/v4.3/install.html#binary-release)ので、haskellの有無に関わらず、容易に導入可能なはず。
 
##その後は
　[こちらのブログ](http://kakakakakku.hatenablog.com/entry/2016/04/17/213123)に教えていただいたのだけれど、Rails製のオープンソースクラウドファンディングツール[catarse](https://github.com/catarse/catarse)がPostgRESTを使っているので、こちらを試してみたい。ただし、Cluod９の無償版では容量的に厳しいかもなので、そのときに考えることとする。
「人工知能の学習理論1」をRに移植

「渡辺澄夫 [人工知能の学習理論1](http://watanabe-www.math.dis.titech.ac.jp/users/swatanab/joho-gakushu.html)」に掲載されているMATLABプログラムをRに移植。行間を読んで意訳。

- Rスクリプト [https://github.com/fred55/learning1](https://github.com/fred55/learning1)
- 入力データについては[元サイト](http://watanabe-www.math.dis.titech.ac.jp/users/swatanab/joho-gakushu.html)を参照。
vivadoインストーラ(2017.2, windows10-64bit)が落ちる

vivadoインストーラ(2017.2)起動後、スプラッシュは出るのだが、その後無言で落ちてしまう。一応対策できて、今インストール中のダウンロードステップ。

私の場合、原因はJava8-112のエラーだった。ただし、普通にJavaを更新してもダメ。vivadoインストーラは内部に持っているJavaを使用してるっぽいからだ。

 

以下、行ったこと。

１．自己解凍ファイルの取り出し。

インストーラ起動後に自己解凍し始め、スプラッシュがでるが、スプラッシュの段階で、%TEMP%をエクスプローラで見ると、7ZipSfxというフォルダができているので、どこか適当な場所にコピーする。インストーラが落ちると消えてしまうので注意。
以降の作業は、このコピーフォルダで行う。

 

２．xsetup.exeの起動

やはり落ちるが、binフォルダ以下にログがでるようになる。私の場合、このログにJavaの例外が生じている旨が書かれていた。

 

３．./tps/win64/jreの入れ替え

./tps/win64/jreのJavaが使われているので、

PCにインストールされてる最新の64bit版のJavaをここにいれる。32bit版はダメ。

通常なら、c:/program files/java/jre-xxx/のファイルをそのまま./tps/win64/jreにもってくればいい。

 

４．あらためてxsetup.exeの起動

今度は落ちずにインストールが進んでいく。

 

障害対応は以上。
cakePHP3のプロジェクトをVPSにgit cloneしたときの注意点

#この記事は？
cakePHP3のwebアプリをローカル環境(xampp)で開発していました。
ひと段落ついたので、そろそろVPSにgit cloneしてローカルから離れてみました。
その時、サーバなどの設定でいろいろと苦労したので、忘備録もかねて注意点をメモしておきます。

#前提
VPS : ConoHa
OS : CentOS Linux release 7.3.1611 (Core)
PHP：HP 7.0.20 (cli)
Apache：Apache/2.4.6 (CentOS)

#cakePHP3
gitignoreファイルを見てみると、なぜかvendorディレクトリが管理対象外になっています。
これがないと当然動かないので、リモートのプロジェクトにもどうにかしてコピーします。
自分はWinSCPを使ってコピーしました。

#httpd.conf
[公式ドキュメント](https://book.cakephp.org/3.0/ja/deployment.html#id4)にも書いてありますが、DocumentRootは"webroot"にしましょう。
AllowOverrideで、.htaccessの上書きを許可するかどうかを設定しましょう。
ちなみに、以下のようにルートディレクトリで設定したからと言って安心しては以下ません。

```
<Directory />
 Options FollowSYmLinks
 AllowOverride All
<Directory>
```
もしhttpd.confのもっと下の行にサブディレクトリ内での上書き権限を`AllowOverride None`とかしてる場所があるかもしれないので気を付けましょう。
自分はそれに気づかず数時間無駄にしました。

#.htaccess
`ls -la`コマンドで、.htaccessを見つけたら忘れずに設定しましょう。
サブディレクトリに.htaccessを見つけた場合、設定が上書きされるので注意しましょう。

#パーミッション
`chmod -R 775 appName`で権限を変更することができます。
しかし、gitは「権限の変更」も差分として認識するので、このままだと`git status`したときに大量の差分が出てきてしまいます。
[このサイト](http://qiita.com/shoyan/items/d5e347d8847ea90f9cd8)のやり方に従い、パーミッションは無視するように設定しておきます。

#404エラーが出たら
[公式ドキュメント](https://book.cakephp.org/3.0/ja/tutorials-and-examples/bookmarks/intro.html#scaffold)に従い、"mod_rewrite"がロードされているかを確認しましょう。
自分はhttpd.confの一番下に、下記を追加しました。

```
LoadModule rewrite_module modules/mod_rewrite.so
```
ちなみに、"mod_rewrite"の場所は`find / -name "mod_rewrite"`で探せます。

#apache
極稀にあることですが、サーバは確かに起動してますか？
httpd.confの設定を変更した後はリスタートしましたか？

#ファイヤーウォール
切らなくて大丈夫です。
`systemctl status firewalld`で起動されてるかを確認しましょう。
jQuery ~ フリック操作（スワイプ操作）を実装(コマンドメモ)

プラグインを使わずにフリック操作を実装してみました。

※今回はSPA方式で作ったので、viewに関してはejsファイル、scssファイルを作成しています。

jsファイルに実装した流れ

1. 端末がタッチパネル操作可能かどうか判定(不可能な場合は別操作を実装することを想定)

2. フリック対象html要素を設定

3. 端末がタッチパネル操作可能である場合、タッチイベントを追加

4. タッチ開始位置からタッチ終了位置の差分により、アニメーションを実行

5. フリック中およびアニメーション実行中は動作が重複しないようフラグを設定

以下に、sampleソースコードを記載します。


```flick-sample.js

var $ = require('jquery');

var viewTemplate = require('.../flick-sample-view-template');

// フリック処理中判定フラグ
var flickFlg = false;

// アニメーション中判定フラグ
var animationFlg = false;

// 対象HTML要素の取得
var v = $(viewTemplate);
var flickBox = v.find('.flick-box');

// タッチ開始位置および終了位置を初期化
flickBox._startX = 0;
flickBox._endX = 0;

// 端末の判定(PC or タブレット・スマホ)
if ('ontouchstart' in window) {
  // フリック処理用タッチイベントを追加
  flickBox.on('touchstart', onFlickBoxFlickStart);
  flickBox.on('touchmove', onFlickBoxFlickMove);
  flickBox.on('touchend', onFlickBoxFlickEnd);
} else {
  //PCで行う処理
}

/**
 * フリック開始イベント
 * @param e {object} jQueryイベントオブジェクト
 */
onFlickBoxFlickStart: function onFlickBoxFlickStart(e) {
  // アニメーション中またはフリック中は処理を抜ける
  if (animationFlg || flickFlg) {
    return;
  }

  // フリック処理中判定フラグ
  flickFlg = true;

  // タッチ開始位置を取得
  flickBox._startX = e.originalEvent.changedTouches[0].pageX;
}

/**
 * フリック中イベント
 * @param e {object} jQueryイベントオブジェクト
 */
onFlickBoxFlickMove: function onFlickBoxFlickMove(e) {
  // アニメーション中またはフリック中は処理を抜ける
  if (animationFlg || flickFlg) {
    return;
  }

  // タッチ終了位置を取得
  flickBox._endX = e.originalEvent.changedTouches[0].pageX;
}

/**
 * フリック終了イベント
 */
onFlickBoxFlickEnd: function onFlickBoxFlickEnd() {
  // アニメーション中またはフリック中は処理を抜ける
  if (animationFlg || flickFlg) {
    return;
  }
  
  // タッチ開始位置と終了位置の差分を計算する
  var diffX = Math.round(flickBox._startX - flickBox._endX);

  // 差分が100より大きい場合はアニメーションを実行
  if (diffX > 100) {
    this.flickBoxAnimation();
  }
  
  // 各値を初期化、フリック処理中判定フラグ無効にする
  flickBox._startX = 0;
  flickBox._endX = 0;
  flickFlg = false;
}

/**
 * フリックによるアニメーション
 */
flickBoxAnimation: function flickBoxAnimation() {
  // アニメーション中判定フラグを有効にする
  animationFlg = true;

  // フリックによるアニメーションを実行する
  flickBox.stop(false, true).animate({
      marginLeft: 500
    },
    {
      duration: 500,
      queue: false
    });

  // アニメーション中判定フラグを無効にする
  animationFlg = false;
}

```

```flick-sample-view-template.ejs

<div class="flick-sample-view">
  <div class="flick-box">
    フリック
  </div>
</div>

```

```flick-sample.scss

.flick-sample-view {
  width: 100%;
  height: 100%;

  .flick-box {
    overflow: auto;
    width: 500px;
    height: 100%;
    background-color: #ffff00;
  }
}

```
railsでDBにデータを入れたい時

railsでDBにデータを入れたいときはrails consoleで入れる方法が一般的だが長文になると記述が面倒なのと記録に残したいのでファイルにまとめ、それを起動させるのがいい。

```ruby:db/seeds
1000.times do |i|
  Shop.create!(
    name:    "店名#{i}",
    zipcode: "111-#{sprintf("%04d", i)}",
    address: "住所#{i}",
    tel:     "00-1234-#{sprintf("%04d", i)}"
  )
end
```

```
rake db:migrate
rake db:seed
```
TERASOLUNA5.x記事のまとめページ

# TERASOLUNA5.x記事のまとめページ

## 0. 概要や説明など

### [５分で分かるTERASOLUNA5.x ！](https://qiita.com/5zm/items/4bdcd22074963d5ecc74)

TERASOLUNA5.xの全体像を説明するため、研修で毎回説明する概要をQiitaの記事としてまとめました。

### [TERASOLUNA5.x(=SpringMVC+MyBatis)のJUnitテストの概要](https://qiita.com/5zm/items/7dd288d5d4e39aa1db97)

TERASOLUNA5.x（=SpringMVC+MyBatis）アプリにおけるJUnitテストの概要について、自社の研修にて説明している内容を紹介します。

## 1. コーディング

### [Spring Securityでログイン画面を複数定義する方法](https://qiita.com/5zm/items/f915245588cbe016f62c)

Spring Securityでログイン画面を複数定義する方法について説明します。

### [spring-securityのROLE_プレフィックスと認可処理の動作について](http://qiita.com/5zm/items/4259097452235fed2b5a)

Spring SecurityのロールにROLE_プレフィックスを付与すべきかどうか、という話題が出たので調べてみました。
結果、付与の有無で動作が変わります。
個人的には使い分けが面倒なので一律に付与すべきという結論になりました。

### [TERASOLUNA5.x(=SpringMVC)で巨大ファイルダウンロードを実現する方法](https://qiita.com/5zm/items/0dd239bde353cf6dddae)

TERASOLUNA5.x(=SpringMVC)でデータサイズの大きなファイルダウンロードを行う方法について説明します。データサイズが小さい場合は特に気にする必要はありませんが、大きい場合はサーバリソースについて注意する必要が出てきます。

### [TERASOLUNA5.x(=SpringMVC)で巨大ファイルアップロードを実現する方法](https://qiita.com/5zm/items/4319782745830491bd9b)

TERASOLUNA5.x(=SpringMVC)でデータサイズの大きなファイルアップを行う方法について説明します。

### [SpringのRestTemplateで巨大ファイルダウンロードを実現する方法](https://qiita.com/5zm/items/18d7f6add504965d81c4)

SpringFrameworkのRestTemplateを利用して巨大ファイルをダウンロードする方法について説明します。ポイントはResponseExtractorを利用することです。

### [SpringのRestTemplateで巨大ファイルアップロードを実現する方法](https://qiita.com/5zm/items/fafef7885c43bac13011)

SpringFrameworkのRestTemplateを利用して巨大ファイルをアップロードする方法について説明します。ポイントはRequestCallbackを利用することです。

## 2. プロジェクトの作り方

### [TERASOLUNA5.xのブランクプロジェクトをPostgreSQL対応に変更する方法](http://qiita.com/5zm/items/03915a7232fcbbd5768a)

TERASOLUNA5.xのブランクプロジェクトの初期状態はインメモリデータベースのh2dbのため、PostgreSQLを利用するように変更する方法について説明します。 

### [TERASOLUNA5.xのブランクプロジェクトからTilesを削除する方法](http://qiita.com/5zm/items/6e62a06b1e45d9a5909f)

TERASOLUNA5.xのブランクプロジェクトではテンプレートエンジンのTilesが有効になっているため、Tilesを削除する方法について説明します。 

## 3. ツールの使い方

### [TERASOLUNA5.xで覚えるべきMavenコマンド](http://qiita.com/5zm/items/80464aa3698bb660bf5b)

TERASOLUNA5.xのWebアプリ開発でよく利用する、覚えるべきMavenコマンドについて説明します。
一般的なMavenコマンドのため、TERASOLUNA5.x以外でも動作します。 

### [SonarQubeでTERASOLUNA5.xアプリを静的ソースコード解析する方法](https://qiita.com/5zm/items/2bad5d3d24fd47936527)

SonarQubeでTERASOLUNA5.xアプリを静的ソースコード解析する方法について説明します。

## 4. 環境構築

### [WindowsにMavenリポジトリのNEXUSサーバを構築する方法](https://qiita.com/5zm/items/6ccaae74511fcc3841e9)

WindowsにMavenリポジトリのNEXUSサーバを構築する方法について説明します。
大規模プロジェクトではProxy経由ではなくNEXUSサーバ経由でMavenを利用することをお勧めします。 

### [WindowsにMaven(Proxy経由/NEXUS経由)をインストールする方法](http://qiita.com/5zm/items/cc13f09ffb8bd67d6246)

WindowsにMavenをインストールする方法について説明します。
Mavenはインターネットにアクセスするため、ProxyやNEXUSサーバを経由させる方法についても合わせて説明します。

### [WindowsにPostgreSQL対応のSonarQubeをインストールする方法](https://qiita.com/5zm/items/c8b0119348803812462f)

Windowsに静的ソースコード解析を行うSonarQubeサーバをインストールする方法について説明します。
SonarQubeの初期状態はインメモリデータベースのh2dbのため、PostgreSQLを利用するように変更する方法について説明します。
hidesBottomBarWhenPushedの3階層目以降の挙動について

# 検証環境
- XCode8.3.3
- iOS10.3.1

# hidesBottomBarWhenPushed
`UITabBarController`の中に`UINavigationController`を持っていて下層に下っていくとする。
このとき、2階層目以降はタブを表示したくない場合、**pushされるviewControllerの**`hidesBottomBarWhenPushed`をtrueにするとタブが隠された状態でpushされる。

```
viewController.hidesBottomBarWhenPushed = true
navigationController?.pushViewController(viewController, animated: true)
```

# 3階層目以降の挙動
ただタブを隠すだけなら上記で良いが、仮に3階層目以降でタブを表示したい場合（そんな場合があるかは置いておいて）の挙動が気になったので軽く検証してみた。

最前面のviewControllerが`hidesBottomBarWhenPushed=true`の（=タブが表示されていない）状態で、さらにpushした場合の挙動を試したところ、以下の結果だった。

|hidesBottomBarWhenPushed | tabBar |
|:--|:--|
|指定なし(false)|表示されない|
|false|表示されない|
|true|表示されない|

つまり挙動としては既にタブが表示されていない場合は、`hidesBottomBarWhenPushed`の値に関わらずタブが表示されない。

もう少し調べて見ると以下のstackoverflowが見つかった。
https://stackoverflow.com/questions/5641465/hidesbottombarwhenpushed-no-not-working


> If YES, the bottom bar remains hidden until the view controller is popped from the stack.

とのことらしいので、スタックされているviewControllerの中に`hidesBottomBarWhenPushed=true`のものがあると表示されないという事らしい。

ただ、
> This is what the documentation for hidesBottomBarWhenPushed says

って書いてるけど見つけられなかった。。

# 参考
https://developer.apple.com/documentation/uikit/uiviewcontroller/1621863-hidesbottombarwhenpushed
IAM 認証 を有効にした API Gateway の Pre Signed URL

API Gateway には [IAM 認証機能](http://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/api-gateway-control-access-using-iam-policies-to-invoke-api.html)があり、HTTP ヘッダかクエリを通じて署名を渡す事で認証させる事ができる。この署名の仕組み自体は[署名バージョン4](https://docs.aws.amazon.com/ja_jp/general/latest/gr/sigv4_signing.html)を利用している。

API Gateway の IAM 認証機能を署名付きURLで使った事がなかったので、それを試した時のメモを整理する。


### 1. API Gateway で API を作成

[Serverless Framework](https://serverless.com/) のテンプレートを利用して API Gateway と AWS Lambda 関数をセットアップする。

```
$ serverless create --template aws-python3 --path example-api-gateway
```

若干手を加えた `serverless.yml` は以下の通り。ハンドラ関数には手を加えていない。ポイントは `authorizer: aws_iam` で IAM 認証を有効にしたところ。

```yml:serverless.yml
service: api
provider:
  name: aws
  runtime: python3.6
  region: ap-northeast-1
  profile: koshigoe
functions:
  hello:
    handler: handler.hello
    events:
      - http:
          path: sample
          method: get
          authorizer: aws_iam
```

準備ができたらデプロイする。

```
$ serverless deploy
```


### 2. IAM ユーザーを作りポリシーをアタッチ

API Gateway の認証用に IAM ユーザーを追加し、最低限のポリシーをアタッチしておく。

```json:Policy
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "execute-api:Invoke"
            ],
            "Resource": [
                "arn:aws:execute-api:ap-northeast-1:{AWS ACCOUNT ID}:{API ID}/*/GET/sample"
            ]
        }
    ]
}
```

この IAM ユーザーのアクセスキーとシークレットを利用して署名を作る事になるので、アクセスキーの発行を忘れずに。


### 3. 署名付き URL を組み立てる

Ruby の AWS SDK を使った場合のサンプルを示す。クレデンシャルは環境変数にセットしている前提。

```:.envrc
export AWS_ACCESS_KEY_ID=********************
export AWS_SECRET_ACCESS_KEY=****************************************
export AWS_REGION=ap-northeast-1
```

```ruby:Gemfile
source 'https://rubygems.org'

gem 'aws-sigv4'
```

```ruby:sign.rb
require 'aws-sigv4'
require 'open-uri'

signer = Aws::Sigv4::Signer.new(
  service: 'execute-api',
  region: 'ap-northeast-1',
  access_key_id: ENV['AWS_ACCESS_KEY_ID'],
  secret_access_key: ENV['AWS_SECRET_ACCESS_KEY'],
)

presigned_url = signer.presign_url(
  http_method: 'GET',
  url: 'https://x8j638cwtf.execute-api.ap-northeast-1.amazonaws.com/dev/sample',
)

open(presigned_url) do |f|
  puts f.read
end
```

※ 署名付きURLの有効期限は最大7日間であるとのこと。

> X-Amz-Expires
>
> Provides the time period, in seconds, for which the generated presigned URL is valid. For example, 86400 (24 hours). This value is an integer. The minimum value you can set is 1, and the maximum is 604800 (seven days).
> 
> A presigned URL can be valid for a maximum of seven days because the signing key you use in signature calculation is valid for up to seven days.
> 
> [Authenticating Requests: Using Query Parameters \(AWS Signature Version 4\) \- Amazon Simple Storage Service](http://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-query-string-auth.html)
既存プロジェクトがXCode9でビルドできなかった時の対処メモ

# 事象: XCode9でビルドできない

```
Module compiled with Swift 3.1 cannot be imported in Swift 3.2
```
XCode9で既存のプロジェクトを開いてビルドしようとすると上記のエラーが出た。
毎年同じような事をやってる気がするので対処方法をメモしておく。

# 原因
importしようとしているライブラリがSwift3.1でコンパイルされている。
具体的にはcarthageで入れているパッケージが原因だったので、これを解消してやれば良い。

# 対処
環境としてはGM版をXCode-9.GMという名前で別に入れている状態だったので、コマンドラインツールを切り替えてから`--nouse-binaries`オプションで`carthage update`する。

```
$ sudo xcode-select --switch /Applications/Xcode-9.GM.app/Contents/Developer
$ carthage update --platform iOS --no-use-binaries
```
※fastlaneでCarthageを利用してる場合はそちらも対応

ライブラリ自体がまだ対応されていない場合、branchがある場合などは適宜対応されているbranchesから取ってくるようにする。
例えばObjectMapperではPullRequestが出ている状態だったので、PullRequest元から取ってくるように変更した

```bash
#TODO: 暫定対応
#github "Hearst-DD/ObjectMapper" ~> 2.2
github "dclelland/ObjectMapper" "swift-3.2"
```

コマンドラインツールを元に戻す場合は以下

```
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
```



# 参考
https://stackoverflow.com/questions/44399109/xcode-9-module-compiled-with-swift-3-1-cannot-be-imported-in-swift-4-0