OmniAICreator/Qiita-1.07M huggingface dataset:
JavaScript用物理エンジン、Matter.jsをとりあえず動かす

なかなか日本語でわかりやすい記事が見つからなかったのでメモしておきます。
とりあえず動作が確認できればいいだけなのでほぼコピペです。

## インストール
いろいろ方法があるらしいけど、Githubからソースをダウンロードする方法でいきます。
https://github.com/liabru/matter-js ここから、
https://github.com/liabru/matter-js/blob/master/build/matter.js このmatter.jsというファイルだけを自分のプロジェクトにコピーします。

この時点でのフォルダ構成は

- sample
    - main.html
    - main.js
    - matter.js  ←これが最初にダウンロードしてきたファイル
    - style.css

こんな感じです。matter.js以外のファイル名は適当。

## main.html

scriptのタグ部分はなぜかhead内に書くと動かなかったのでbodyに記述しました。いつもの癖でheadに書いてしまって動かなくてしばらく悩みました。

```html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- ここのIDは何でもいい -->
    <main id="hage"></main>
    
    <script src="matter.js"></script>
    <script src="main.js"></script>

</body>
</html>

```

## main.js
とりあえず動くのが確認できればいいので、公式のhttps://github.com/liabru/matter-js/wiki/Getting-started にあるUsage exampleをそのままコピペしました。

```javascript

// module aliases
var Engine = Matter.Engine,
    Render = Matter.Render,
    World = Matter.World,
    Bodies = Matter.Bodies;

// create an engine
var engine = Engine.create();

// create a renderer
var render = Render.create({
    element: document.body,
    engine: engine
});

// create two boxes and a ground
var boxA = Bodies.rectangle(400, 200, 80, 80);
var boxB = Bodies.rectangle(450, 50, 80, 80);
var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });

// add all of the bodies to the world
World.add(engine.world, [boxA, boxB, ground]);

// run the engine
Engine.run(engine);

// run the renderer
Render.run(render);

```

以上。
これをお好きなブラウザで開くだけで四角が上から落ちてくるだけのサンプルが確認できました。
ちょっと迷ったのはmain.jsの呼び出し部分。なぜかhead内に書いてはだめなようです。このへんでちょっとハマったくらいで、後は全部コピペです。style.cssは使ってないのでいらなかったかも…。

次はもう少し理解を深めて使い方を解説していきたいと思います。
Microsoft Remote Desktop Beta　コマンド備忘録

# Microsoft Remote Desktop Betaを使ったショートカットコマンド備忘録
いつものように自分のため。
MacとWindowsのキーボードの違いとかには触れないです。

| Windows(で行いたいやつ)| Mac(から叩くやつ) | 
|:-----------------|------------------:|
| Alt + Tab          |  Option + Tab   |
| Windowsボタン + ↑ (他矢印)|    Command + ↑ (他矢印)  |
| Alt + ↑ (他矢印)|    Option+ ↑ (他矢印)  |



気づいたものをいろいろ追加します。
リポジトリのブランチをローカルでチェックアウトするGitコマンド

ローカルでリポジトリのfeatureブランチにチェックアウトしたいときなどに利用。

```
$ git fetch
$ git checkout -b branch_name origin/branch_name
```

というのをよくみるが、以下だけでOK


```
$ git fetch
$ git checkout branch_name
```
EC2のログイン時にサーバの名前を表示する

AWSのEC2のサーバに多数ログインする様になってくるとどのサーバに居るのか。というのは大事な情報になってきます。
勿論プロンプトに[ec2-user@redmine ec2-user]と表示されて、今はredmineサーバにいるよという事などがわかるのですが

sshでEC2にログインするとEC2にログインしたよと、最初に

```
       __|  __|_  )
       _|  (     /   Amazon Linux AMI
      ___|\___|___|
```

この様に表示されます。

せっかくなのでここをサーバの名前にしました。

ここに出ているのは、/etc/motdのファイルの中身なのですが
/etc/cron.d/update-motdファイルで設定されているcronで書き換えられます。
なので、/etc/update-motd.d/30-banner ファイルを書き換えます。

今回はredmineサーバなので、[こちら](http://patorjk.com/software/taag/#p=display&f=Modular&t=redmine)で文字を作って設定しました

```/etc/update-motd.d/30-banner
#!/bin/sh
version=$(rpm -q --qf '%{version}' system-release)
cat << EOF
 ______    _______  ______   __   __  ___   __    _  _______ 
|    _ |  |       ||      | |  |_|  ||   | |  |  | ||       |
|   | ||  |    ___||  _    ||       ||   | |   |_| ||    ___|
|   |_||_ |   |___ | | |   ||       ||   | |       ||   |___ 
|    __  ||    ___|| |_|   ||       ||   | |  _    ||    ___|
|   |  | ||   |___ |       || ||_|| ||   | | | |   ||   |___ 
|___|  |_||_______||______| |_|   |_||___| |_|  |__||_______|
https://aws.amazon.com/amazon-linux-ami/$version-release-notes/
EOF
```

その後、毎日cronで動いている

```bash
sudo /sbin/start update-motd
```

コマンドを実行して/etc/motdを書き換えます。

これでログイン時にサーバの名前が出てくる様になりました！

```
Last login: Tue Jun 26 12:06:13 2018 from (伏せ)
 ______    _______  ______   __   __  ___   __    _  _______ 
|    _ |  |       ||      | |  |_|  ||   | |  |  | ||       |
|   | ||  |    ___||  _    ||       ||   | |   |_| ||    ___|
|   |_||_ |   |___ | | |   ||       ||   | |       ||   |___ 
|    __  ||    ___|| |_|   ||       ||   | |  _    ||    ___|
|   |  | ||   |___ |       || ||_|| ||   | | | |   ||   |___ 
|___|  |_||_______||______| |_|   |_||___| |_|  |__||_______|
https://aws.amazon.com/amazon-linux-ami/2018.03-release-notes/
```

バナーツールを知った記事: https://qiita.com/yuhtanak/items/fffb264078c3473b059c
github.comのSSOを有効化した結果ｗｗｗｗｗｗｗｗｗｗｗｗ

秘密鍵認証できなくなって詰んだ死んだって思った俺ですこんにちは。
つこてる鍵をSSOでも使えるようにするには秘密鍵をこーするとよいです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/42755/d26a477c-fa0a-0df6-c7de-8af84442ce61.png)

owari
MediaConvertにて変換完了通知を受けとる方法

streampack の　Tanaka です。

皆さんご存知のようにワールドカップ2018がやってますね。
グループリーグで結構波乱が起きてて、どの試合も見逃せない状況が続いおり、私は日々、寝不足と興奮が入り混じっている状態です。
また、NHKがライブ配信、ハイライト、見逃し配信を提供してて、さらにサッカー視点での選手のStatsや、いろんな角度からのカメラアングルをプレイヤー内で提供してて、いつもとは違う視点で映像を楽しめるようになってます。

https://www1.nhk.or.jp/sports/2018fifaworldcup/matches/

今後、2020東京オリンピックありますので、映像関連技術も日頃からキャッチアップが必要ですね。

# 概要

MediaConvert を使って SQS,SNS に変換完了通知を受け取る設定方法です。
AWS ElasticTranscoder ではパイプライン設定時に SNS を通して通知を受け取ることが可能でしたが、
MediaConvert の場合は CloudWatch 経由での通知が可能です。

# 完了通知の設定方法

## Step 1: SQS の登録

[Create New Queue] にて新規にキュー(**mediaconvert_demo)**作成します。

<img width="1277" alt="SQS_Management_Console.png" src="https://qiita-image-store.s3.amazonaws.com/0/232803/9217a7d6-2bdb-f7ae-6f5b-a40959406b32.png">

> 注意点として、CloudWatch のターゲットのリストに作成したキューを表示させるために、 **AddPermission** アクションを許可してます。

## Step 2: CloudWatch イベントの登録

下記にアクセスして、ルールを作成します。
https://ap-northeast-1.console.aws.amazon.com/cloudwatch/home?region=ap-northeast-1#rules:action=create

まずは **[イベントソース]** の設定です。
変換が完了(COMPLETE)したら、ターゲットの SQS にジョブを投げるようにします。

``` json
{
  "source": [
    "aws.mediaconvert"
  ],
  "detail": {
    "status": [
      "COMPLETE"
    ]
  }
}
```

ステータスには、COMPLETE 以外にも、PROGRESSING,　STATUS_UPDATE、 ERROR などもあります。
https://docs.aws.amazon.com/ja_jp/mediaconvert/latest/ug/mediaconvert_cwe_events.html
エラー通知やフレーム単位の状況を受け取ることも可能です。

次は**[ターゲット]**の設定で、は先ほど作成した、SQS Queue(mediaconvert_demo) を選択します。

<img width="1078" alt="スクリーンショット 2018-06-26 11.02.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/232803/677bf219-51d9-2b1d-bbfa-be4d174ec37c.png">

# ジョブを投げる - MediaConvert

事前に準備しておいた、MediaConvertにてジョブを投げます。下記はジョブを投げたデモ用の Summary です。

<img width="905" alt="MediaConvert_Management_Console.png" src="https://qiita-image-store.s3.amazonaws.com/0/232803/4a1bf060-e6e5-21ae-9dc2-0346f80e3b0c.png">

ジョブの Status が COMPLETE になったら SQS にて確認します。

# SQS で確認する

SQS にメッセージが届いていれば、連携は完了です。

<img width="1246" alt="SQS_Management_Console.png" src="https://qiita-image-store.s3.amazonaws.com/0/232803/03292b78-1dcc-6fc2-b0e3-4a6c1dcae42c.png">

SQSのメッセージ内容。

``` json
{
  "version": "0",
  "id": "f9c8cc28-60e9-e64a-f55f-xxxxxx",
  "detail-type": "MediaConvert Job State Change",
  "source": "aws.mediaconvert",
  "account": "5x16937xxxxx",
  "time": "2018-06-26T02:37:00Z",
  "region": "ap-northeast-1",
  "resources": [
    "arn:aws:mediaconvert:ap-northeast-1:591693767697:jobs/1529980602621-xxxxxxx"
  ],
  "detail": {
    "timestamp": 1529980620274,
    "accountId": "5x16937xxxxx",
    "queue": "arn:aws:mediaconvert:ap-northeast-1:5916937xxxxx:queues/Default",
    "jobId": "1529980x0262x-xxxxx",
    "status": "COMPLETE",
    "userMetadata": {},
    "outputGroupDetails": [
      {
        "outputDetails": [
          {
            "durationInMs": 39831,
            "videoDetails": { "widthInPx": 1280, "heightInPx": 720 }
          }
        ]
      }
    ]
  }
}
```

より詳細な情報を得るためには jobId から Summary を取得するしかなさそうです。もしくは Meta などが使えるかもですが。。

# 結論

CloudWatch を使って、 MediaConvertの変換完了通知を SQS を使って受け取る方法の説明でしたが、CloudWatch に精通していない自分でも意外と簡単にできました。 今回は SQS への通知でしたが、ターゲットを追加することによって、SNSを使ってメール通知や、Lambda でさらに何か処理することも可能です。
LibreOffice の Calc で Excel ファイルを開いたら、INDIRECT 関数でエラーになったので修正する

LibreOffice の Calc で Excel ファイルを開いたら、
以下の様な INDIRECT 関数でエラーになった。

`=INDIRECT("'"&$B4&"'!$M$48")`

ググっても、なかなか情報が出てこず結構困ったけど、
なんとか解決出来たので、シェア。

`=INDIRECT(ADDRESS(48,13,,,$B4))`

とりあえず、
以下は同じ動作するみたいです。たぶん…。

`=INDIRECT("'"&[シート名]&"'!$[列名]$[行番号]")`
`=INDIRECT(ADDRESS([行番号],[列番号],,,[シート名]))`

以上。
Install.sh ってどう書くのがいいの？

インストール用のシェルスクリプトを使うことはあっても自分で書くことはまれです。

今日は[この方](https://gist.github.com/c-bata/11416527)のを参考にしてみました。

文頭の箇所は結構共通で使えるのではないでしょうか。

```
 #!/bin/bash 

 #==================================================================== 
 # aptのアップデート 
 #==================================================================== 
 yes | sudo apt-get update 
 yes | sudo apt-get upgrade 
```

このyesコマンドを用いることでYを入力させずに済みます。[参考](http://dharry.hatenablog.com/entry/20101029/1288287856)
upgradeにこれ入れるのはちょっとあれかもしれないですが。

あとは実行させたい操作をつらつらと。

ただのメモになってしまいましたね。
RxSwift ローディング中の表示／非表示の例

## Rxでインタラクティブにロード中の表示を出す
Rxを使うと○○中というステータスをリアルタイムに取得できます。
ただデフォルトの機能としてビューをステータスに応じて表示／非表示などは備わっていません。
そこでこういうのは開発者自身が実装してやる必要があります。

### 既存のライブラリをRxで使いやすく
Rxの理念に準じてbindした先の値に応じて動作できるようなものを作成します。
例えばローディング中の表示としてよく使われるMBProgressHUDをRxでこんな風にします。

```MBProgressHUD+RxSwift.swift
import UIKit
import MBProgressHUD
import RxSwift
import RxCocoa

extension Reactive where Base: MBProgressHUD {
    static func isAnimating(view: UIView) -> AnyObserver<Bool> {
        return AnyObserver { event in
            switch event {
            case .next(let value):
                if value {
                    MBProgressHUD.showAdded(to: view, animated: true)
                } else {
                    MBProgressHUD.hide(for: view, animated: true)
                }
            default:
                break
            }
        }
    }
}
```
これで MBProgressHUD はBool値を得たときに表示／非表示を行うようになります。内部的にはMBProgressHUD の showAdded / hide メソッドを切り替えるようにしているだけです。

### ロード中に表示 / 終わったら非表示
あとはロード中のフラグとbindしてあげればOKです。
使い方の例はこんな感じです。

```Sample.swift
    /// ローディング中ならtrue
    var isLoading: Variable<Bool> = Variable(false)

# 略

    ///APIのレスポンス取得
    func fetch() -> Observable<SomeResponse> {
        // RXSwift + APIKit を利用してAPIをコール
        return SomeAPIRequest().asObservable().do(onNext: { responseData in
            self.esponse.value = responseData
        }, onError : { error in
            print(error)
            self.isLoading.value = false
        }, onCompleted: {
            self.isLoading.value = false
        }, onSubscribed: {
            self.isLoading.value = true
        })
    }

    // ローディング
    self.isLoading.asDriver()
        .drive(MBProgressHUD.rx.isAnimating(view: self.view))
        .disposed(by: rx.disposeBag)
```

isLoadingの値がtrueの場合にMBProgressHUDを表示し、falseになったら非表示にします。
表示されない場合などは MainScheduler.ensureExecutingOnScheduler() を入れるなどして調整してみてください。

[https://github.com/katafuchix/YahooImageSearchAction](https://github.com/katafuchix/YahooImageSearchAction)
データのMixed-UPをiris/wineデータで試してみた

自分用メモですが・・・とりあえず本体の全コードは[こちら](https://github.com/Dormir30/mixup_data_auguation/blob/master/mixed_up_sample.ipynb)

また参考になったページは[原論文](https://arxiv.org/pdf/1710.09412.pdf)、[新たなdata augmentation手法mixupを試してみた](https://qiita.com/yu4u/items/70aa007346ec73b7ff05)です。
ざっくりとアイデアは説明変数(x_1,x_2・・・・x_N)からベータ回帰で新しいデータを(x'_1,・・・x'_M)を作成するというものである（目的変数も同様）。論文によるとRobust性があがるとあるので基本的には過学習気味のデータによいようだ。それでirisとwineデータをＫＮＮにて実験（精度にて比較）
iris 
やる前　Test Accuracy:  0.9642857142857143
やった後　Test Accuracy:  0.9210526315789473

下がった・・・orz　まぁ元々過学習も起こさない精度の高いモデルだとベータ分布の係数αを調整するのが割りと大変だった（ほぼ未チューニング）。

wine
やる前 Test Accuracy:  0.6666666666666666
やった後 Test Accuracy:  0.7333333333333333

結構精度はアップした。過学習気味なモデルにおいて、効果はありそうである。
Sigfoxユーザー管理 - ユーザー管理

ここでは、[Sigfoxバックエンドクラウド](https://backend.sigfox.com)の使用方法を下記４点に関し説明します。

1. [グループ管理](https://qiita.com/ghibi/items/8d92f34890870795e94d)
2. **ユーザー管理**
3. [デバイスタイプ管理](https://qiita.com/ghibi/items/4eccef2ba81cf86a3385)
4. [デバイス管理](https://qiita.com/ghibi/items/8518ef3014802ea8c834)

デバイスを登録し、使用するためには、上記1から4の操作を順に行っていただく必要があります。
*Sigfoxバックエンドクラウドへのアクセス権により、ご利用できない機能があります。*

#ユーザー管理
ユーザー管理では、ユーザーの作成、編集、削除が可能です。グループとユーザーの構成については、[グループ管理](https://qiita.com/ghibi/items/8d92f34890870795e94d)をご確認ください。

##ユーザーの作成
ユーザーを新規に作成する場合は、**USER**タグを表示後、右上の[New]ボタンをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/03665849-201e-7453-dad5-196e6ec1f2ca.png)

**New user**画面が表示されますので、氏名（First Name/Last Name）、Email、Position（所属）、TimezoneにAsia_Tokyoと入力します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/878243f3-d30a-ae8a-d699-7687595bfbe3.png)

###グループに対する権限付与
上記画面(New user)でProfilesのところに[Select a group]というボタンがあります。このボタンをクリックすると、下図のようにグループ一覧の画面が表示されます。ここでは、作成するユーザーに対し、どのグループに、どのような権限を付与するかを決定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/16f1d171-ba93-1e35-1a6f-bfd809f2927a.png)
ここでは、A株式会社に新規ユーザーを作成するとして、[A株式会社]を選択してください。
すると、下図のように権限（Profile）を選択する画面が表示されますので、ユーザーに付与したい権限にチェックを入れてください。複数グループに対して権限付与する場合は、[Select a group]ボタンをクリックし、他グループを選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/09f3e4d0-f825-c6d6-455e-c5432c59c1b0.png)
通常は、**DEVICE MANAGER [W]**権限を付与するだけで、Sigfoxデバイスの操作が可能になります。その他権限を付与したい場合は、チェックを増やしてください。また、各Profile名に設定されている権限を確認したい場合は、(?)マークをクリックすると、Profileに紐づいた権限が表示されます。

####[W]と[R]の違い
Profileの中には、Profile名[W]とProfile名[R]があるものがあります。[W]は編集権限を含んでおり、[R]は閲覧権限のみとなります。

####ユーザー権限の範囲
ここで設定したユーザー権限は、配下のグループに対しても適用されます。例えば、a-01ユーザーに対して、A株式会社グループの権限を設定した場合、この権限は、下図の例では、S株式会社、T株式会社に対しても適用されます。
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/172313/9124df95-d608-7cb6-1d47-faf814398b8d.png)

####"OPT_"権限
OPT_から始まる権限は、オプション権限として扱われます。
OPT_権限のみを付与したユーザーは、Sigfoxバックエンドクラウドにログインできませんので、必ず、OPT_権限以外の権限を付与したユーザーを作成してください。

最後に、[OK]ボタンをクリックするとユーザーが作成されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/33c2ae1e-d318-ecb7-22a5-5ef8e21e35e4.png)
この時、設定したEmail宛先に**@sigfox.com**メールドメインから招待メールが届きます。メール本文中のリンクをクリックして、初回ログイン設定を行うと、そのユーザーが[Sigfoxバックエンドクラウド](https://backend.sigfox.com)を利用できるようになります。

##ユーザーの編集
USERのInformationページで[Edit]ボタンをクリックすると、ユーザーの親戚作成と同じ画面でユーザーの編集（主には権限変更）が可能です。

##ユーザーの削除
同様にUSERのInformationページで[Delete]ボタンをクリックすると、ユーザーの削除が可能です。

##ユーザーの確認
作成したユーザーは、**USERタブ**をクリックすると一覧表示される他、**GROUPタブ**から任意のグループを選択後、左メニューの**ASSOCIATED USER**から、そのグループに紐づいているユーザーだけを一覧表示することも可能です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/863591b1-bcee-bbeb-1864-9d9c213e1cad.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/14cc957c-5cba-119a-6ebf-e69dc784f139.png)

##ユーザー作成でエラーが発生した場合
他の管理者により、既に該当ユーザー（Email）が作成されていた場合、ユーザーの新規作成でエラーが発生します。この場合は、各国SO（日本はKCCS）にお問い合わせください。

[Sigfox Japan KCCS](https://qiita.com/organizations/sigfox)
`::/0` がなんのことかわからなかったので調べました。

# 結論

**::/0 はIPv6の設定で、IPv4でいうところの 0.0.0.0/0 と同じ意味です。**

すべてのIPとマッチします。

# 蛇足（調べるまでの経緯）

数年ぶりにAWS EC2のセキュリティグループを設定しました。
「任意の場所」を選ぶと

`0.0.0.0/0, ::/0`

が自動で挿入されました。

その結果

* `0.0.0.0/0`
* `::/0`

の2行が追加されました。

`::/0` がなんのことかわからなかったので調べました。

**`::/0` はIPv6の設定で、IPv4でいうところの `0.0.0.0/0` と同じ意味です。**

すべてのIPとマッチします。
Alexaでシノニム(同義語)を設定してAWS Lambdaで使う方法

[「○○さん今どこ？」でAlexaがGoogleカレンダーから人を探してくれるカスタムスキル](https://qiita.com/haruno/items/35da02d2a0c102986056)でシノニム(同義語)を使用したので、設定方法とAWS Lambdaでの使い方まとめます。
以後記事での呼び方は同義語で統一します。

##同義語の設定方法

１.画像下部のインテントスロットで変数名(name)と同義語の種類(AMAZON.FirstName)を設定

<img width="400" alt="スクリーンショット 2018-06-22 11.22.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/249053/fa5d79c5-dd62-1c7e-f19a-d556046f0dd9.png">

nameにあたる変数名は好きなものを設定、サンプル発話で利用できます。
今回選んだAMAZON.FirstNameは自動的に名前を聞きとりやすくしてくれるもの。他にも日付を聞き取りやすくしてくれる(というか自動で色々な呼び方しても聞き取ってくれる)やつとかある。
これについては[Alexa開発者ポータルの概要](https://qiita.com/haruno/items/23d70e23cc1b0d42878d)みてね。

<br>

２.同義語を設定

まずは左のメニューバーから、同義語を設定したいスロットタイプを選択

<img width="315" alt="スクリーンショット 2018-06-22 11.22.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/249053/6513de2d-1a97-22b5-ef5e-834a9c276d4e.png">

<br>
選択すると下の画像のようなページが開かれます。
ここが同義語を設定するページです。

<img width="400" alt="スクリーンショット 2018-06-22 11.23.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/249053/55b811ee-d425-bb25-f75d-52f377569044.png">

今回は苗字や名前、あだ名で呼びかけてもtanakaと変換させるようにします。
"値"の欄に目的の文字列をセット。
"同義語(オプション)"に、苗字や名前等の同義語設定したいワードをどんどん追加していきます。

同義語の設定はこれで以上。

##AWS Lambdaで同義語設定した値を使うには

以下の書き方で名前を取得できます。

```
//nameの部分には自分の設定した変数名を書く
//多分お目当てのスロットタイプを取得してる
var slotName = this.event.request.intent.slots.name;

//スロットタイプの中から目的の値を取り出す
var searchName = slotName.resolutions["resolutionsPerAuthority"][0]["values"][0]["value"]["name"];
```

値の取り出し方をどうしてこう書くのか、スロットタイプの構造が気になる人は[[Alexa] スロット値にシノニム（同義語）を設定してみる](https://dev.classmethod.jp/cloud/alexa-slots-synonyms/)が多分詳しく書いてくれているのでいいと思います。

私は上記のリンク先と、開発者ポータルでテストした時のJSON入力欄(下記画像)の内容(下記コード)を参考にしました。

<br>
<img width="1196" alt="スクリーンショット 2018-06-26 8.06.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/249053/eee1055e-a379-5ba9-8b72-393508b1e2ce.png">


```
	"intent": {
			"name": "SearchIntent",
			"confirmationStatus": "NONE",
			"slots": {
				"name": {　
					"name": "name",
					"value": "たろ",
					"resolutions": {
						"resolutionsPerAuthority": [
							{
								"authority": "amzn1.er-authority.echo-sdk.amzn1.ask.skill.5e808e29-9155-4129-a3ce-2c856dbd0483.AMAZON.FirstName",
								"status": {
									"code": "ER_SUCCESS_MATCH"
								},
								"values": [
									{
										"value": {
											"name": "tanaka",
											"id": "0292e031195ca50fed149b421c7df329"
										}
									}
								]
							}
						]
					},
					"confirmationStatus": "NONE"
				}
			}
		}
```

<br>
"alexa,同義語,設定"とかでググれば色々出てくるはず。
スキル作成中に躓いたからとにかく疑問解消したいって人はカスタムスキル実際に作っている人のを参考にするのがよいかも。
test-queue + RSpec + Selenium + Chrome で Chrome をちゃんと終了する

# 問題点
test-queue + RSpec + Selenium + Chrome でテストを実行すると、chromedriver と Chrome のプロセスがテスト終了後も残る。
# 原因
RSpec + Selenium の組み合わせでは、Selenium ドライバの終了処理は、 `Kernel#at_exit` で登録する終了処理ハンドラ中で [実行している](https://github.com/teamcapybara/capybara/blob/4772f509f88ba5f2dcd5841846d0347423e8c9ed/lib/capybara/selenium/driver.rb#L17)。
一方、test-queue の worker 終了処理では `Kernel#exit!` を[呼び出しており](https://github.com/tmm1/test-queue/blob/master/lib/test_queue/runner.rb#L303)、 `Kernel#exit!` は終了処理ハンドラの実行を行わずにプロセスを終了するため、Selenium ドライバの終了処理が実行されず chromedriver と Chrome が終了しない。
# 対処
テストランナーの `spawn_workers` メソッドを `Kernel.exit!` を `Kernel.exit` に変更した実装でオーバーライドする。

```ruby
class MyAppTestRunner < TestQueue::Runner::MiniTest
  def after_fork(num)
   # ....
  end

  def prepare(concurrency)
    # ....
  end

  # worker 終了時に capybara の selenium ドライバを終了させる
  #
  def spawn_workers
    @concurrency.times do |i|
      num = i+1

      pid = fork do
        @server.close if @server

        iterator = TestQueue::Iterator.new(@test_framework, relay?? @relay : @socket, method(:around_filter), early_failure_limit: @early_failure_limit, run_token: @run_token)
        after_fork_internal(num, iterator)
        ret = run_worker(iterator) || 0
        cleanup_worker
        Kernel.exit ret #変更点
      end

      @workers[pid] = TestQueue::Worker.new(pid, num)
    end
  end
end

MyAppTestRunner.new.execute
```
【Bitbucket Pipelines】stepを別定義して複数パイプラインで共有する 

ドキュメントのどこにも書いてないっぽいけど、できるみたい。

https://bitbucket.org/site/master/issues/12751/allow-more-capable-steps-that-can-be

```
stepdefinitions:
  - builddeps: &builddeps
      name: install deps
      script:
        - dist/bitbucket/before_install.sh
        - dist/bitbucket/install.sh
      artifacts:
        - vendor/**
  - lintingtesting: &lintingtesting
      name: linting, testing
      script:
        - dist/bitbucket/lint.sh
        - dist/bitbucket/test.sh
pipelines:
  branches:
    master:
      - step: *builddeps
      - step: *lintingtesting
  default:
    - step: *builddeps
    - step: *lintingtesting
```

`@Jochen We` that's great, thanks!!!!!
Sigfoxユーザー管理 - グループ管理

ここでは、[Sigfoxバックエンドクラウド](https://backend.sigfox.com)の使用方法を下記４点に関し説明します。

1. **グループ管理**
2. [ユーザー管理](https://qiita.com/ghibi/items/f3ed278d10aa43c7b7f1)
3. [デバイスタイプ管理](https://qiita.com/ghibi/items/4eccef2ba81cf86a3385)
4. [デバイス管理](https://qiita.com/ghibi/items/8518ef3014802ea8c834)

デバイスを登録し、使用するためには、上記1から4の操作を順に行っていただく必要があります。
*Sigfoxバックエンドクラウドへのアクセス権により、ご利用できない機能があります。*

#グループ管理
グループは、ユーザーの所属するものであり、ツリー上にグループを作成することができます。
例えば、KCCSが複数の企業に対し、IoTソリューションを提供する場合、下図のようなグループおよびユーザー管理にすることが通例です。
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/172313/0d936afc-16ab-7e84-3406-25e4dc0cdc5c.png)

この場合、kccs-01ユーザーは、配下のグループすべて（A株式会社、B株式会社、X事業部、S株式会社、T株式会社）すべてに対する権限が付与されます。
また、A株式会社は、S株式会社とT株式会社に対する権限は付与されますが、KCCS、B株式会社、X事業部に対しての権限は付与されません。
##グループの作成
**KCCS**というグループに対し、**A株式会社***を作成します。
[Sigfoxバックエンドクラウド](https://backend.sigfox.com)にログイン後、**GROUP**タグをクリックすると、下記画面が表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/07417cc6-7dc9-c72a-5995-9352ece420b5.png)
上記例では、KCCSという黄色アイコンのグループとKCCS DEMO UnaShieldという赤色アイコンのグループが既に作成されています。黄色のアイコンは、Sigfoxサービス契約を締結いただいた企業向けに設定されるもので、赤色アイコンは、実証実験等でテスト的に付与されているものです。ここでは、KCCS（黄色アイコン）に対して、A株式会社グループを作成します。

画面右上の[New]ボタンをクリックすると、Select a groupというダイアログが表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/0d7d289d-3f64-a76d-2b96-bfa1709c83cc.png)

このダイアログでは、今回作成するグループ（A株式会社）の親グループを選択しますので、KCCSをクリックしてください。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/1ed8f057-8320-ddc9-2384-a2a0a27d7785.png)
**Group-New**画面が表示されますので、Nameにグループ名、Descriptionにグループ名の詳細、TimezoneにAsia_Tokyoを選択して、[OK]ボタンをクリックしてください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/e7932421-96f9-c666-629e-7ff4e5c7a254.png)
以上で、KCCSグループ配下にA株式会社が作成されました。念のため、GROUPタブ画面で新たなグループが作成されていることを確認します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/cfed982a-860f-cbea-dbf7-18e5d7594b4a.png)
上図の通り、KCCSグループの下にA株式会社が作成されています。

##グループの編集
グループの編集は、対象となるグループのInformationページの右上にある[Edit]ボタンをクリックすると編集可能です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/b800c7b5-096a-67f9-28f3-a0c34719e467.png)

##グループの削除
グループの削除は、同様にInformationページの右上[Delete]ボタンをクリックすると可能です。ただし、グループに紐づいているユーザー、デバイスタイプが存在する場合は、削除できません。

#Sigfox Web APIの作成
Sigfox Web APIは、グループ単位で作成します。詳しくは、[SigfoxクラウドAPI](https://qiita.com/ghibi/items/b9cb1d26ccff26a427a3)を見てください。

次は、[ユーザー管理](https://qiita.com/ghibi/items/f3ed278d10aa43c7b7f1)を説明します。

[Sigfox Japan KCCS](https://qiita.com/organizations/sigfox)
台湾の証券取引所の株価(TWSE)を取得するツール

## 1. GRS

* https://github.com/toomore/grs
* python2.7版 => TWSEの仕様変更に対応しきれていないのか、動作しなかった。
* golang版 => 動かし方よくわからなかった。。


## 2. twstock

* https://github.com/mlouielu/twstock
* 擷取台灣證券交易所之股價資料 重新製作 toomore/grs 之功能

```sh:
sudo apt install python3-pip
pip3 install twstock
~/.local/bin/twstock -b 2330 6223
```

こっちは動いた。
Vue.js と UIKit の uk-icon の相性の悪さをとりあえず回避する

## Overview

Vue.js で UIKit を使う際、スクリプトの読み込み順番を UIKit script → Vue.js script とすると、 uk-icon のマークアップがダブります

```html
<span uk-icon="trash"></span> item1
<span uk-icon="trash"></span> item2
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/22754/ceffd961-9b30-8876-d39e-18f59ab1ca36.png)

## TL;DR

読み込み順番を Vue.js script → UIKit script にしましょう

## 実証コード

### 問題ありバージョン (UIKit script → Vue.js script)

※多少省いています

```html
<div id="#app1">
  <ul class="uk-list">
    <li v-for="item in items">
      <span uk-icon="trash"></span> {{ item }}
    </li>
  </ul>
</div>

<script src="uikit.min.js"></script>
<script src="uikit-icons.min.js"></script>
<script>
var app1 = new Vue({
  el: '#app1',
  data: {
    items: []
  }
});
</script>
```

この状態で

```js
app1.$data.items.push("item1");
app1.$data.items.push("item2");
```

とすると、下図のように element がダブります

![image.png](https://qiita-image-store.s3.amazonaws.com/0/22754/ceffd961-9b30-8876-d39e-18f59ab1ca36.png)

DOM もご覧の通り、ダブってます

![image.png](https://qiita-image-store.s3.amazonaws.com/0/22754/500fb7d1-9683-36b3-8d53-d7728921d520.png)


### 回避バージョン (Vue.js script → UIKit script)

`uikit.min.js` と `uikit-icons.min.js` を Vue の読み込み後に移動します

```diff
  <div id="#app1">
    <ul class="uk-list">
      <li v-for="item in items">
      <span uk-icon="trash"></span> {{ item }}
      </li>
    </ul>
  </div>

- <script src="uikit.min.js"></script>
- <script src="uikit-icons.min.js"></script>
  <script>
  var app1 = new Vue({
    el: '#app1',
    data: {
      items: []
    }
  });
  </script>
+ <script src="uikit.min.js"></script>
+ <script src="uikit-icons.min.js"></script>
```

このように、意図した通りに表示されました

![image.png](https://qiita-image-store.s3.amazonaws.com/0/22754/267a45cc-efc2-c0ea-8b58-d63991f4b9cf.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/22754/e3e27a11-1484-1b87-76bf-defac08797a6.png)

## 原因

ごめん、ちゃんと調べていない。
おそらく Vue が読み込まれた際に DOM の再評価が走って、それに発火して UIKit が再度 `ui-icon` に SVG element を付与したのだと思う。

## ちなみに

UIKit は [cdnjs で配信されている](https://cdnjs.com/libraries/uikit/3.0.0-rc.6)ので手軽です

## あとがき

長年の問題が解決されてうれしい。が、、、なんか違う気がする。

EoT
docker startでcontainer already existsが出た時の対処法

# はじめに
dockerでHost OSが不正終了したり、緊急再起動をかけたりした場合

にdocker startを行うと
こんなエラーが出てることがあります。

```
Error response from daemon: container "8b3ee437a0f59a74e99b6098ce2662aadbeb89b47d0a65475d24ab412949bd74"
: already exists
```

`docker ps`で見ても、起動中のコンテナがないので、コンテナを削除することもできません。

# 対処法

エラーが出たコンテナのハッシュを全部コピーして、次のコードを実行してください。

```
docker run -it --rm -v /var/run/docker/containerd/docker-containerd.sock:/docker-containerd.sock\
 --privileged docker:dind docker-containerd-ctr --namespace moby\
 --address /docker-containerd.sock c rm [Container Hash]
```
[Container Hash]・・・ハッシュはエラーで出力される長いハッシュをフルで入力すること

コンテナOSの種類によっては、動作しない可能性があります。そんな場合は、こちらのIssueをご覧ください。
https://github.com/moby/moby/issues/36145
【Ruby】「ゲッター」と「セッター」を理解する

#概要
Rubyの「ゲッター」・「セッター」とは何か？
また同じ動作をより簡単に行うアクセスメソッドについてまとめました。

#「ゲッター」とは？
インスタンス変数をクラス内から参照するメソッドが**「ゲッター」**です。
本来Rubyではインスタンス変数の値はクラス内からしか取得出来ません。
そこで、それを可能にする為にクラス内にインスタンス変数を参照する専用のメソッド**「ゲッター」**を定義します。


_例えば、通常では以下の`Movie`クラスからインスタンス変数の直接的な参照はできません。_

```ruby
class Movie
  def initialize(name)
    @name = name
  end
end

obj1 = Movie.new('Forrest Gump')

p obj1.name #=>undefined method `name' for #<Movie:0x00007fd4558526f0 @name="Forrest Gump">
```

これを参照するためにはクラス内にインスタンス変数を参照するメソッド**「ゲッター」**を定義する必要があります。以下の例ではメソッド`Movie#getName`が**「ゲッター」**です。
これでインスタンス変数をクラス外で参照することができます。

```ruby
class Movie
  def initialize(name)
    @name = name
  end

  def getName #「ゲッター」
    @name
  end
end

obj1 = Movie.new('Forrest Gump')

p obj1.getName #=> 'Forrest Gump'
```

#「セッター」とは？
インスタンス変数をクラス内で更新するメソッドが**「セッター」**です。
参照同様、インスタンス変数の更新もクラス内でしかできません。
そこで、それを可能にする為にクラス内にインスタンス変数の内容を更新する専用のメソッド**「セッター」**を定義します。

_例えば、通常では以下の`Movie`クラスからインスタンス変数の直接的な変更はできません。_

```ruby
class Movie
  def initialize(name)
    @name = name
  end
end

obj1 = Movie.new('Forrest Gump')

p obj1.name = 'Fight Club' #=>undefined method `name=' for #<Movie:0x00007ffd4a83b400 @name="Forrest Gump"> (NoMethodError)
```

このような更新を実行するためにはクラス内にインスタンス変数を更新するメソッド**「セッター」**を定義する必要があります。以下の例ではメソッド`Movie#changeName`が**「セッター」**です。
これでインスタンス変数をクラス外で更新することができます。

```ruby
class Movie
  def initialize(name)
    @name = name
  end

  def getName #「ゲッター」
    @name
  end

  def changeName=(name) #「セッター」
    @name = name
  end
end

obj1 = Movie.new('Forrest Gump')
obj1.changeName = 'Fight Club'
p obj1.getName #=> 'Fight Club'
```

#アクセスメソッドとは？
「アクセスメソッド」とは上記の**「ゲッター」**・**「セッター」**を定義せずともインスタンス変数の参照・更新を可能にする方法です。
３種類の「アクセスメソッド」が存在します。

|定義式|機能|
|---|---|
|attr_reader: 変数名|参照を可能にする。（**「ゲッター」**と同じ役割）|
|attr_writer: 変数名|更新を可能にする。（**「セッター」**と同じ役割）|
|attr_accessor: 変数名|参照・更新の両方を可能にする。（**「セッター」**・**「ゲッター」**と同じ役割）|

_例えばクラス内に「attr_reader」を追加することで**「ゲッター」**と同じ役割を果たします。（インスタンス変数のクラス外からの参照を可能にする。）_

```ruby
class Movie
  attr_reader :name

  def initialize(name)
    @name = name
  end
end

obj1 = Movie.new('Forrest Gump')
p obj1.name #=> 'Forrest Gump'
```
_またクラス内に「attr_writer」を追加することで**「セッター」**と同じ役割を果たします。（インスタンス変数のクラス外からの更新を可能にする。）_

```ruby
class Movie
  attr_reader :name
  attr_writer :name
  def initialize(name)
    @name = name
  end
end

obj1 = Movie.new('Forrest Gump')
obj1.name = 'Fight Club'
p obj1.name #=> 'Fight Club'
```

_また、「attr_accessor 」を追加することで**「セッター」**・**「ゲッター」**両方の役割を果たします（インスタンス変数のクラス外からの参照・更新を可能にする。）。_

```ruby
class Movie
  attr_accessor :name
  def initialize(name)
    @name = name
  end
end

obj1 = Movie.new('Forrest Gump')
obj1.name = 'Fight Club'
p obj1.name #=> 'Fight Club'
```
CentOS/RHEL 7 で　iptables 起動時に適用されるシンプルな方法

#登録方法

```sh
iptables -P INPUT ACCEPT # INPUT のポリシーをACCEPT
iptables -P FORWARD ACCEPT # FOWARD のポリシーをACCEPT
iptables -P OUTPUT ACCEPT # OUTPUT のポリシーをACCEPT
iptables -F #すべてのテーブルのデータを消去
iptables -A INPUT -s AAA.AAA.AAA.AAA/AA -j ACCEPT #AAA.AAA.AAA.AAA/AAからの通信を許可
iptables -A INPUT -s BBB.BBB.BBB.BBB/BB -j ACCEPT #BBB.BBB.BBB.BBB/BBからの通信を許可
iptables -A INPUT -s CCC.CCC.CCC.CCC/CC -j ACCEPT #CCC.CCC.CCC.CCC/CCからの通信を許可
iptables -A INPUT -p icmp ! --icmp-type echo-request -j ACCEPT #icmpの内echo request以外を許可
iptables -A INPUT -m state --state ESTABLISHED -j ACCEPT #ESTABLISHEDになったTCP通信を許可
iptables -P INPUT DROP #INPUTの基本ポリシーをDROPにする
iptables-save > /etc/sysconfig/iptables #現在の設定を /etc/sysconfig/iptablesに書き出し
touch /etc/init.d/ipt-reg #起動時の読み込みスクリプトファイル ipt-reg を生成（空ファイル)
chmod 755 /etc/init.d/ipt-reg #ipt-regに実行権限を付与
echo '#!/bin/bash' >> /etc/init.d/ipt-reg  #ipt-regにシェルスクリプトであることの宣言文を書き出し
echo '# chkconfig:2345 99 01' >> /etc/init.d/ipt-reg #ipt-regにchkconfig用設定を書き出し
echo 'echo '\''registering iptables record'\' >> /etc/init.d/ipt-reg #ipt-reg呼出時メッセージを書き出し
echo '/usr/sbin/iptables-restore /etc/sysconfig/iptables' >> /etc/init.d/ipt-reg 
#iptables-restoreで/etc/sysconfig/iptables から読み出し
chkconfig --add /etc/init.d/ipt-reg #chkconfig コマンドで起動時スクリプト /etc/init.d/ipt-regを登録
cd /etc/init.d #/etc/init.dに移動
chkconfig --level 2345 ipt-reg on #chkconfigで起動RUNLEVEL 2345において自動起動を登録
```
#解除方法

```sh
chkconfig --del /etc/init.d/ipt-reg #chkconfigから/etc/init.d/ipt-regを削除
rm -f /etc/init.d/ipt-reg #/etc/init.d/ipt-reg　スクリプトを削除
rm -f /etc/sysconfig/iptables #/etc/sysconfig/iptables に保存した iptables設定を削除
```
エンジニア一年生によるjQuery入門

#jQueryとは
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
（ -- https://jquery.com/ -- )

カッコつけて公式ページの *What is jQuery?* という部分から引っ張ってきました。笑
えーと、まとめると、
**jQueryってJavaScriptのライブラリなんだよ！！！:sunglasses:**
ってことでいいと思います。（一文目の訳にしかなってませんが。笑）

「ライブラリ」ってなんぞや？
って人もいると思うので説明しておくと、
ライブラリとはある程度まとまったプログラムをあらかじめ作ってくれているファイルのことを言います。

ざっくりイメージで言うと、

JavaScript：　野菜そのもの
jQuery（JSのライブラリ）：カット済み野菜（コンビニやスーパーなんかに売ってるやつ）

って感じです。笑
これだと、料理するときにかなり差が出てきますよね？工数変わりますよね？
ライブラリはカット野菜のように便利だから重宝されるとひとまず思ってくれればいいと思います。

##それで結局jQueryって？笑
話が少し脱線しましたが、

**jQueryは、世界標準で愛されるカット済み野菜のように便利なJavaScriptのライブラリ**なんだと覚えてもらえたかと思います。

ということはつまり、jQueryでできることはJavaScriptでも書けるということになります。（コード量はかなり変わりますが...）

そもそもjQueryはどういったときに活用するのかというと、
　**WEBページに動き（アニメーションや変化）をつけたいときに使います！**

よくあるもので言えば、
- マウスオーバーするとその部分に色がつく、文字が変わる
- 入力フォームが入力内容に応じて変わる
- 画面をスクロールしていくとポップアップが表示される

みたいなものが挙げられます。
みなさんが普段見ているWEBページには、ほぼ間違いなくjQueryが使われると思ってくれていいかと！

##jQueryのメリット
いくらjQueryが便利だ便利だと言っても、どうしてJS(JavaScript)のライブラリとして
jQueryが最も有力かというと、
それは、

**jQueryはどんなブラウザにも適応するから！！！**
だと言えると思います。

ブラウザには、Windowsに標準で入っている「IE（インターネットエクスプローラー）」、Googleの「Google Chrome」、MacやiPhoneで使われている「Safari」など様々な種類があります。
エンジニアの方でなければ、意外と意識せずに同じようなものとして使っていると思います。（一年前の自分がそうです。笑）

しかし実は、ブラウザごとにそれぞれ微妙に仕様が違います。
それが原因で、同じJavaScriptのコードでも動かなかったり、動きが変になってしまうブラウザがあったりします。
ただ、jQueryではその問題が起こりません！
これがjQueryの人気をさらに確固たるものにしていると言えるでしょう。

##jQueryの使い方
jQueryを使うためには、主に二つのパターンがあります。

①ファイルをダウンロードして、読み込むパターン
②Webから直接jQueryファイルを指定して読み込む

どちらでも機能的な差異はありませんが、
②の場合はネットワーク環境でなければ作動しないため、①のパターンの方が推奨されるかもしれません。

*また、どちらの方法であっても`</body>`の直前に記述するのがオススメされています！

なぜかというと、HTMLがすべて表示されてからjQueryを読み込んだ方が、
ユーザーに読み込み時間を意識させなくて済むというメリットがあるからだそうです。

##jQueryの書き方
jQueryプログラミングの記述方法は、至って簡単です。
基本的には、 *【 対象要素 ＋ 行いたい処理 】の組み合わせ* だと覚えてください！！

jQueryでは**「セレクタ指定」** によって、要素を簡単に見つけることができます！
「セレクタ指定」とは、「$(‘ ‘)」の中へ目的の要素を記述することです。

例えば、h1要素を見つけたい場合は、下記のようにします。

`$('h1')`
jQueryでは「.（ドット）」で連結することで、対象要素と行いたい処理を組み合わせることができるため、

`$('h1').text('Qiita is a good tool')`

のようになります。


###最後に
jQueryに関しては、仕事でも使うことが多そうなので、
どんどん記事書き足して行く予定です！
とりあえず今回は、jQueryって何かの整理をしてみましたー！！
誰かの参考になれば幸いです。

お読みいただき、ありがとうございました。

byピカピカのエンジニア一年生
GPSの研究　その30

#概要
GPSを理解したかった。
RTKCONVで、ubxファイルをrinexファイルにしてみた。

写真

![conv.png](https://qiita-image-store.s3.amazonaws.com/0/18104/05a11ca7-98dc-0634-ad86-b465cc34e6db.png)


以上。
今さら始めるJquery | 「自分を隠す」 超基本チュートリアル

# 超基本チュートリアル 「自分を隠す」

[jQuery Tutorial](https://www.w3schools.com/Jquery/default.asp) のとおりにHTMLを書いてみる。
`p` 要素をクリックした時に、自分を隠すというサンプル。


```html
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("p").click(function() {
        $(this).hide();
    });
});
</script>
</head>

<body>

<p>クリックすれば自分を隠す！</p>
<p>クリックすれば自分を隠すぞ！</p>
<p>クリックすれば自分を隠すんだよ！！</p>

</body>
```

## 例

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/e2bfb0bb-1070-9089-b90c-3acb8200dbfe.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/13238a0c-5127-aa45-c415-bd4c0c6251b8.png)


テキストをクリックすると、自分が隠れることが分かる。

ところでいちど隠れた自分は元には戻ってこない。やり直すには、ページをリロードしてみよう。

# 他人を隠す

文法解説 ( [jQuery Syntax](https://www.w3schools.com/Jquery/jquery_syntax.asp) ) によると、Jqueryの基本は「要素に対して」「何かアクションがあった時」 ( `$(selector).action()` ) で成り立っているらしい。

1. 要素に
2. アクションがあった時
3. 何かさせる

といった感じだろうか。それならば、

1. `u` 要素を
2. クリックした時に
3. `p` 要素を隠す

ということも出来るはずだ。早速試してみる。

```html
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("u").click(function() {
        $("p").hide(); 
    });
});
</script>
</head>

<body>

<p>他人</p>
<u>他人を隠す！</u>

</body>
```

## 例

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/8f345f20-397e-e0ea-eb02-50cab25a9282.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/179f1233-6d2d-f17b-6362-b0615d398e15.png)

思ったとおりに動いた。

他人のいない自分だけの世界。

# ドキュメント・レディー？

ところで全体を `$(document).ready` で囲うのは「ドキュメント」が「準備された時」をトリガーに、他全ての処理をその中に入れている、ということらしい。

ドキュメントが全てロードされる前に、jqueryが走ってしまうことを防いでいるそうな。


```js
$(document).ready(function(){

   // jQuery methods go here...

});
```

こう考えると、これもjqueryの基本文法 ( `要素` + `アクションがあった時` ) にのっとっていることが分かる。改めて納得。

# 参考

- [jQuery Tutorial](https://www.w3schools.com/Jquery/default.asp)
- [jQuery Syntax](https://www.w3schools.com/Jquery/jquery_syntax.asp)









<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
CI機能作成録02 - Testソース起動、必要パッケージ等々

## 前回まで
だいぶ間が空いてしまったが、TravisCIの導入、テストの起動確認(Fail)までを行った。
https://qiita.com/pkkanai/items/df9f8debdb81e9c6137b

※作業を進めていたリポジトリがTravisCIとの連携がどうしても取れなくなってハマった挙句、作成し直したことは内緒:frowning2:

### 今回やること
実際にテストソースを書いてみて、TravisCIでテストがパスするところまでやってみる。

### 使用ツール等
・TravisCI
・GitHub Desktop
・Atom（エディタ）

## 本題
まず前回作成のリポジトリ直下のディレクトリ構成から少し変えてみる。
下記ディレクトリを作成。
・./tests/
・./src/

### テストコードとディレクトリ構成
上記ディレクトリにそれぞれtestコードを。リポジトリ直下に設定ファイルを2つ配置。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/250578/b54eb73c-58da-164f-4f2b-bf502a27daf6.png)


## テストコード作成
###.tests/testCi.py
●unittestモジュールimportを行い、それぞれ行うテストを書き出す
・ただの表示のテストとhoge.pyから呼び出したテストの二つを記載
・unittestモジュールの機能でテストの可否返却
![image.png](https://qiita-image-store.s3.amazonaws.com/0/250578/8dfa8391-036e-62b1-80cf-b13028bb136b.png)

###.src/hoge.py
●適当な計算テスト。正しければTrue、誤りはFalseを返却
※当然Falseを返す。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/250578/aba68477-2ea7-463c-0705-6de04cdcee69.png)

## 設定ファイル作成(調査不足感は否めない)
###.travis.yml
●travisCIの設定ファイル
・pythonバージョン指定
・coverallsパッケージなるものをインストールすることで使用可能な(script:以下の)コマンドで、上記記載のテストコードの結果をtravisCIに投げられるようにする
![image.png](https://qiita-image-store.s3.amazonaws.com/0/250578/ae75da13-f956-e4d3-3396-d7768f4d5bd8.png)

###setup.py
●純粋な設定ファイル
・必要なモジュールをimportし、ディレクトリ構成、利用するテストコードの指定
![image.png](https://qiita-image-store.s3.amazonaws.com/0/250578/9786aee9-6a74-b1a2-a2f4-d2b19fd81e32.png)

##いざ実行
前回同様コミット。pushを行う。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/250578/244557ef-f9c4-eb41-b452-bcfa377307c0.png)

テストが回り出す。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/250578/24d6d988-378d-ae60-2883-5829b188bce1.png)

fail確認。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/250578/3afbf13a-324e-ee92-1a2d-1011cdc93a2a.png)

##改修、再実行
###.src/hoge.py
計算式を3→5に変更。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/250578/c1859622-5c0e-1387-300a-d66e15ca6b74.png)

再実行。テストがパスしたことを確認。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/250578/220874ba-aa88-f2a1-2b06-53fef2e01bbb.png)

###雑感
やや駆け足で書いたため、パッケージやモジュール等の調査不足感は否めないが…。
さらにいえば、CIという記事本来そのものの意図という部分では乖離している。
※これじゃただの結果出力
  
  
が、今日はここまで。
次回の内容は、CIという意味でもう少し掘り下げたことをやりたい。
firebase loginでfirebase: command not found と怒られる

最近、VuejsやReactやAngularを使ってみたくて、パンダの本やネコの本を買いました。
パンダの本によるとGoogle社が提供するfirebaseを使用すると、チャットサーバの構築が楽になるとかで（Webサーバやデータベースサーバのセットアップが省略できる！しかも無料枠がある）、firebaseを使ってみることにしました。

---

Firebaseのインストール

    $ npm i -g firebase-tools

Firebaseログイン

    $ firebase login

    -bash: firebase: command not found

調べるとパスがつながってないらしい


    $npm get prefix
    /Users/ユーザ名/.anyenv/envs/ndenv/versions/8.10.0

.bash_profileに追記

    $vim ~/.bash_profile

    #firebase
    export PATH="$HOME/.anyenv/envs/ndenv/versions/8.10.0/bin:$PATH"

npm get prefixで表示されるユーザ名の後の部分を\$HOME/ ~ /bin:$PATHみたいな感じで追記する。（anyenvでnodeのバージョンを管理しているため長ったらしい。。）


参考：https://stackoverflow.com/questions/23645220/firebase-tools-bash-firebase-command-not-found


変更内容の反映

    exec $SHELL -l



Firebaseログイン

    $ firebase login
    Allow Firebase to collect anonymous CLI usage and error reporting information? y

chromeブラウザが立ち上がり、認証すると...

    ✔  Success! Logged in as アカウント名@gmail.com


ドットインストールにも最近、Firebaseの動画が追加されてます。
こちらはGUIベースだったかと！
[ドットインストール - Firebase](https://dotinstall.com/lessons/basic_firebase)


疑問
nodeのバージョンごとにbash_profileを追記が必要なのかな...?



リンク：
[Firebase](https://firebase.google.com/)
[Firebase CLIリファレンス](https://firebase.google.com/docs/cli/)
[パンダの本](https://amzn.to/2K8bqSr)
[ネコの本](https://amzn.to/2KkAzZi)
[ネコの本の著者のtwitterアカウント](https://twitter.com/mio3io)
Reactのデザインパターン Compound Components

コンポーネント指向での開発も割と枯れてきて、昨年から海外ではいわゆるデザインパターンに名前がついて紹介されることが多くなってきました。
この記事ではその内の一つ、Compound Componentsを紹介いたします。
またタイトルに「Reactの」とついてますが、実装例がReactなだけでコンポーネント指向であれば他のUIライブラリでも考え方は流用可能です。

完成した実装はここに置きました。
https://46hype.com/
https://www.lifenaija.com/
cloudfunctionsだとmulter使えない

cloudfunctionsでhttpトリガーで動かした際に、アップロードされたファイルをmulterで処理しようとしても動かなかった.

環境はこんな感じ.
- node.js: v6.14.0
- multer: 1.3.0

原因はわからんがmulter使ってる人で詰まった人向けにだめだった事実だけ共有しておく(ちなみにエミュレーターだと動く).

```js:index.js
const multer = require('multer');
const upload = multer({
    dest: '/tmp/'
});

const parseBody = upload.single('file');
exports.uploadFile = (req, res, next) => {
    parseBody(req, res, function (err) {
        if (err) return next(err);

        // undefined
        console.log(req.file);
        res.send(req.file);
    });
};
```

なので、詰まった人は素直に公式のbusboy使ったやり方したほうが良さそう.

[HTTP 関数  |  Cloud Functions のドキュメント  |  Google Cloud](https://cloud.google.com/functions/docs/writing/http#handling_file_uploads)

ちなみにこちらはエミュレーターだと動かない.(rawBodyが設定されないバグがあるみたい)

[rawBody not present · Issue #167 · GoogleCloudPlatform/cloud-functions-emulator](https://github.com/GoogleCloudPlatform/cloud-functions-emulator/issues/167)
【Ruby】インスタンスの生成プロセス<広島東洋カープ編②>

#4.クラスの中でメソッドを定義する
>- まずは定義から

```ruby:
class Player
  attr_accessor :name 
  attr_accessor :number
  attr_accessor :position
  attr_accessor :throw_hand
  attr_accessor :hitting_hand

  def show
    puts "広島東洋カープの選手です"
  end
end

```

>- クラスの中で定義したメソッドを呼び出す

```ruby:
class Player
  attr_accessor :name 
  attr_accessor :number
  attr_accessor :position
  attr_accessor :throw_hand
  attr_accessor :hitting_hand

  def show
    puts "広島東洋カープの選手です"
  end

end

#クラスの中で定義しインスタンスに対して呼び出すメソッドのことをインスタンスメソッドと呼ぶ
player2.show
```

>- インスタンスメソッドを使って引数を受け取る/戻り値を返す

```ruby:

class Player
  attr_accessor :name 
  attr_accessor :number
  attr_accessor :position
  attr_accessor :throw_hand
  attr_accessor :hitting_hand

#引数 player_data を渡し、
  def show(player_data)
#戻り値 "#{player_data}です" を返す
    return "#{player_data}です"
  end

end

player1 = Player.new
puts player.show("広島東洋カープの選手")

```



>- 次。
インスタンスメソッドの中で「self.変数名」を用い、インスタンス変数を扱う

・・・段々わからなくなってきたぞ？ちょっと確認しよう
【インスタンスメソッドとは】
クラスの中で定義し、インスタンスに対して呼び出すメソッドのこと。
今回の例でいうと、Playerクラスの中でshowを定義した。そこでplayer_dataという引数を渡し、戻り値を返すことができるというもの。
【インスタンス変数とは】
インスタンスに情報を持たすために、生成したインスタンスを変数に代入したもの。
player2 = Player.new
のplayer2がインスタンス変数で、
player2.name ='Ryosuke Kikuchi'
player2.number = 33
みたいに使ってきたでしょ？

この前提のもと。
self.変数名を使うことで、変数selfに呼び出したインスタンス自身が代入されているということみたい。
・・・まあちょっとみてみよう。

```ruby:

class Player
  attr_accessor :name 
  attr_accessor :number
  attr_accessor :position
  attr_accessor :throw_hand
  attr_accessor :hitting_hand

#showメソッドを定義する
  def show
#showメソッドの中身は、"どうも◯◯です"と表示することみたい
    puts "どうも、#{self.name}です"
  end

end

#クラスPlayerにインスタンスplayer1を生成
player1 = Player.new
#インスタンスplayer1のname情報は"Kosuke Tanaka"
player1.name = "Kosuke Tanaka"
#player1に対しshowメソッドを呼び出す
player1.show

```

実行結果



どうも、Kosuke Tanakaです


>- これで何ができるかというと、showメソッドを呼び起こすことでインスタンスplayer1の名前を出力できた（こちらが何かを選択することで答えを返してくれた）わけですね


例えば、

```ruby:
class Player
  attr_accessor :name
  attr_accessor :number
  attr_accessor :position
  attr_accessor :throw_hand
  attr_accessor :hitting_hand

  def show_data
    puts "どうも、#{self.name}です"
    puts "背番号っすか? #{self.number}っすよ"
    puts "あ、#{self.position}守ってまあす"
  end

end

player1 = Player.new
player2 = Player.new
player3 = Player.new
player4 = Player.new

player1.name = 'Kosuke Tanaka'
player1.number = 2
player1.position = 'short stop'
player1.throw_hand = 'right'
player1.hitting_hand = 'left'

player2.name = 'Ryosuke Kikuchi'
player2.number = 33
player2.position = 'second'
player2.throw_hand = 'right'
player2.hitting_hand = 'right'

player3.name = 'Yoshihiro Maru'
player3.number = 9
player3.position = 'center fielder'
player3.throw_hand = 'right'
player3.hitting_hand = 'left'

player4.name = 'Seiya Suzuki'
player4.number = 51
player4.position = 'right fielder'
player4.throw_hand = 'right'
player4.hitting_hand = 'right'

#インスタンスplayer4に対してクラスPlayerのメソッドshow_dataを呼び出し
player4.show_data

```

実行結果

どうも、Seiya Suzukiです
背番号っすか? 51っすよ
あ、right fielder守ってまあす



こんな少しおバカな遊びができると。
2018/06_04 御題決め

# 今週の課題

急ぎの仕事を依頼されると露骨に更新が雑になるのは仕方ない。仕方ないね？

ってことで４品目。

**カスタムコントロールを作ろう**


いや、カスタムコントロールって。
自分で作った御題なのは間違いないんだけどざっくりしすぎでは･･･？

何作ろうかなぁ･･･

今回はC#！



---

と、思ってたんですが
今週どうにも時間取れないので来週に回します。

その間にどんなカスタムコントロール作るか考えときます。

---

7/6追記

更新できない･･･
ちょっと立て続けに仕事振られてるのでもうちょっと時間空きます･･･
CarrierWave で　No route matches [PATCH] 　のエラー


ルーティングが上手くいってないのは、分かるがどう解決したらよいかわからないレベルの人のため。
CarrierWave　で画像を投稿ボタンを押した際に、No route matches [PATCH]＊＊＊＊＊＊＊というエラーがでる。

「　No route matches　CarrierWave　」あたりで検索しても、自分の場合はマッチする解答が出て来ませんでした。　

解決方法は、

config/routes.rb　のファイルの以下の部分

resources :users, only: [:show, :index, :destroy]

に:update　を加えて以下のように記述すればよいです。

resources :users, only: [:show, :index, :update, :destroy]

つまり、投稿ボタンを押した際、モデルのコントローラーのupdateアクションが実行されているので、
ルーティングでupdateを許可しないと、通らないというわけである。

なぜ、updateアクションが実行されるのが分かったかというと、自分の場合は、手当たりしだいにブレークポイントを挿入してupdateアクションが実行されていることを発見しました。
PHP MACの設定とMAMPの設定

# laravelでpostgresの設定が合っているのにerrorメッセージが表示される。
## 実行コマンド
```
php artisan migrate
```
## エラーメッセージ
```
In Connection.php line 664:
                                                                              
  could not find driver (SQL: select * from information_schema.tables where   
  table_schema = public and table_name = migrations)                          
                                                                              

In Connector.php line 67:
                         
  could not find driver  
                         
```
## 原因
PHPの設定がMACとMAMPで違っていた
MAMPのPHPを指定して、コマンドを実行する
※ PHP7.2.1の場合

```
/Applications/MAMP/bin/php/php7.2.1/bin/php artisan migrate
```
Elixirでファイルの入出力をしてみた

（この記事は、「[fukuoka.ex x ザキ研 Advent Calendar 2017](https://adventar.org/calendars/2873)」の9日目です）
昨日は @hisaway さんの[「Elixirで再帰呼び出しを使ってリストの加算関数をつくる」](https://qiita.com/hisaway/items/647f33fbdcff21dae5a4)でしたね。


#はじめに
前回はデータの処理を行いました。(https://qiita.com/Takeshi-Kogu/items/b615bc807a02eee19d7a)
今回はElixirを用いてファイルの読み書きをしていこうと思います。

#簡単なファイルの読み書き
まず簡単に入力、出力、追加の入力を行います。

```php
iex> File.write"ex1.txt","Hello"
:ok
iex> File.read"ex1.txt"
{:ok, "Hello"}
iex> File.write"ex1.txt"," world!",[:append]
:ok
iex> File.read"ex1.txt"
{:ok, "Hello world!"}
```
File.writeの第三引数に[:append]を渡しました。
:appendを指定することで追記書き込みができます。
また、:appendを指定せずに入力を繰り返してしまうと上書きされてしまいます。

```php
iex> File.write"ex1.txt","Hello"
:ok
iex> File.write"ex1.txt","world!"
:ok
iex> File.read"ex1.txt"
{:ok, "world!"}
```

#入出力モジュールを用いた入出力
標準出力、標準入力を使って出力、入力します。

```php
iex> IO.puts"Hello world!"
Hello world!
:ok 
iex> IO.gets"yes or no?"
yes or no?yes
"yes\n"
```
IO.putsの引数に:stderr を渡すことで、標準エラーデバイスに出力します。

```php
iex> IO.puts :stderr,"Hello world!"
Hello world!
:ok
```

#Fileモジュールを用いたファイルの読み書き
File モジュールを使ってファイルの読み書きをします。
デフォルトではファイルはバイナリモードで開かれるようです。

```php
iex> {:ok, file} = File.open "ex2.txt", [:write]
{:ok, #PID<0.103.0>}
iex> IO.binwrite file, "Hello world!"
:ok
iex> File.close file
:ok
iex> File.read "ex2.txt"
{:ok, "Hello world!"}
```

今回はex2.txtというファイルに"Hello world!"と入力をし、出力させてみました。
ファイルを:utf8エンコーディングで開くこともできます。
詳しくは[こちら](http://elixir-ja.sena-net.works/getting_started/12.html#12.1-%E5%85%A5%E5%87%BA%E5%8A%9B%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB---the-io-module)を
#まとめ
今回は入出力を行なってみましたが、方法は一つでなくそれぞれの良さがあるなあと感じました。やり方自体はシンプルなのですぐに習得できそうですね。
お名前.comで取得したドメインでGmailからメール送信する

お名前.comで取得したドメインを使って、Gmailから独自ドメインでメールを送る方法を解説します。なお、この方法では「Gmailで送信」はできますが「Gmailで受信」ができるようになるとは限りません。

<b>※ 取得したドメインの名前解決を委任する権威ネームサーバを01.dnsv.jp, 02.dnsv.jp, 03.dnsv.jp, 04.dnsv.jp にするのであれば、下記の「メール転送設定」によってGmailでメール受信できます。しかし、他のメールサーバを使用する場合は受信できなくなるので要注意です。
</b>

受信の方法は別の記事でご紹介します。

## 1. ドメインの取得

[お名前.com](https://www.onamae.com)で任意のドメインを取ってください。

## 2. メール転送設定

[お名前.com Navi](https://www.onamae.com/domain/navi/dns_manage)でメール転送の設定をします。

１. 右上の「オプション設定」のタブをクリック
２. 画面中段の「メール転送設定」をクリック
<img width="６００" alt="ss 2018-06-24 23.57.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/80357/83fdf9b0-e788-e579-d6df-f89faf3180a6.png">

３. 該当ドメインをクリック
４. 転送元メールアドレスに任意の文字列を入力(★これがあなたの新しいメールアドレスになります)
５. 転送先メールアドレスにあなたが受信できる任意のメールアドレスを入力(GmailやYahoo mailなど、なんでも良い)
６. 「ドメインのネームサーバを変更」にチェックし、OKボタンを押す
<img width="600" alt="ss 2018-06-24 23.58.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/80357/f0c0be8f-004b-5882-754a-c78f8239de00.png">

## 3. Gmailの設定

１. 設定画面で「アカウントとインポート」タブをクリック
<img width="600" alt="ss 2018-06-25 0.00.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/80357/f3f881d6-1cc9-f409-0d74-dc9ed60b2c8c.png">

２. 画面中段「他のメールアドレスを追加」をクリック

<img width="600" alt="ss 2018-06-26 1.11.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/80357/081b76d1-ac13-8221-7a00-57d4b5b553b7.png">

３. 「自分のメールアドレスを追加」の黄色い画面で、以下を入力

 - 名前: メール送信者として表示される名前　（例: Hogeサービス運営事務局）
 - メールアドレス: さきほどお名前.comで入力した転送元メールアドレス（★）

<img width="400" alt="ss 2018-06-26 1.15.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/80357/70d3c6fe-ec36-5134-5036-ed3c9840a1ad.png">

４. 「メールアドレスの編集」の黄色い画面で、以下を入力

 - SMTPサーバー: smtp.gmail.com ポート587
 - ユーザ名: あなたのGmailアドレスの@gmail.comの前の部分
 - パスワード: 以下の方法で得られるパスワード

【パスワードの入手方法】
[Googleのセキュリティページ](https://myaccount.google.com/apppasswords)にアクセスし、「アプリを選択」→「その他」→任意の名前を付け生成ボタンを押す。するとパスワードが1回だけ生成される。これをコピー＆ペーストして先程の「パスワード」欄に貼り付ける

<img width="400" alt="ss 2018-06-25 0.10.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/80357/ce15d45b-0b5b-99e7-a840-1b414d5e1597.png">
<img width="600" alt="ss 2018-06-25 0.12.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/80357/5a219508-96f2-1990-a8b3-780b1a6a0666.png">

５. 確認メールが送られてくるので記載されている「確認コード」を入力する

<img width="600" alt="ss 2018-06-25 0.10.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/80357/03d4581c-0def-f5cd-4b5a-0b7f4d3e75f6.png">


## 以上

これで、Gmail経由でメール送信ができるようになります。なお、途中で設定したネームサーバは、もう変更してしまっても構いません。ネームサーバの設定は、Googleから確認メールが送られてくる際に、独自ドメインに送られたメールを自身が見れるアドレスに転送するためだけに使いました。

ネームサーバを変えると、独自ドメインでメールを受信できなくなります。受信する方法は別の記事で書きます。