OmniAICreator/Qiita-1.07M huggingface dataset:
OpenAPI/Swagger初心者の所感

現在フリーランスとしてプロジェクトマネジメントやサーバサイド開発をやっているzee8です。今回は、[GAOGAO Advent Calendar 2019](https://qiita.com/advent-calendar/2019/gaogao)への投稿として、最近API仕様書作成用に使い始めた[OpenAPI/Swagger](https://swagger.io/)について書いてみたいと思います。

# 前提

前提として、以下のようなプロジェクトでのお話です。（念のため申し添えておくと、GAOGAOとは関係のないプロジェクトですので、詳細を記すのは控えます。）

- 現行で動いているモバイルアプリの一部リプレースプロジェクト
- RESTではなくJSON-RPCっぽい設計のAPIを作り直す作業
- データベースを引き継ぐ必要があるので、APIのリクエスト・レスポンスのデータ構造は極力変えないようにしたい

# 最初にやったこと

最初は素直に[Swagger Editor](https://swagger.io/tools/swagger-editor/)をDockerを使ってローカルで動かして仕様を書き始めましたが、すぐに以下の理由でつらくなってきました。

- プレビューがあるのはいいが、エディタとしての機能が貧弱
- 最終的にAPIエンドポイントが100以上になる予定なのに、1ファイルに全て収める必要がある

公式ツールが全く実用的でないことに若干驚きながらも、不都合を解消するためのツールを探し始めました。あまり時間をかけて調査したわけではないのでベストの選択だとは思っていませんが、今のところ以下のツールで対応しています。

# VSCodeのSwagger Viewer

Swagger Editorのエディタとしての機能が貧弱なのが問題であれば、逆によく使うエディタでプレビューできれば良いと考えて探したところ、VSCodeの[Swagger Viewer](https://github.com/arjun-g/vs-swagger-viewer)というextensionが見つかりました。記述を間違えたときのエラーがSwagger Editorよりさらに分かりにくいという欠点はありますが（GitHubのTODOにも"Show all the errors during validation"と書いてあるので問題は認識されている模様）、いったんこれでyamlを頑張って書いています。

# Speccy

作成したAPI仕様書の共有は、Amazon S3上に配置した[Swagger UI](https://swagger.io/tools/swagger-ui/)で行っているため、最終的には全てのAPIエンドポイントを1つのファイルに収める必要があるものの、長大な1つのファイルを編集し続けるのはつらすぎます。複数のSwagger/OpenAPIファイルをまとめるツールがいくつか見つかったのですが、なんとなくWeWorkの人が作っている[Speccy](https://speccy.io/)というCLIツールを使っています。Speccyでできることは以下のとおりです。

- lint
  - 指定したファイルのOpenAPIの仕様に合っていないところや不適切なところを指摘。
- resolve
  - OpenAPIでは、`$ref`という記載でcomponentsに定義したオブジェクトを参照できることになっており、別ファイルを参照している`$ref`を元の定義に置き換えて1つのファイルにまとめる。
- serve
  - ReDocを使って、ビューワを起動。（私個人はこちらは未使用）

かなりシンプルなツールなのでコマンドの使い方に迷うことはありませんが、`resolve`の際に以下のような問題があることを把握しています。（私のOpenAPIの仕様の理解が足りないだけの可能性もあり。）

- `$ref`で多重に参照している定義がうまく解決されないっぽい
  - index的なファイル1つと各カテゴリごとのファイルの2階層に限定して暫定対応。
- `example: "2019-01-23"` `example: "2019-01-23 12:34:56"`といったようなdateやdatetimeの例のクォーテーションマークが削除されてしまい、Swagger UIで正しく表示されない
  - sedコマンドでクオーテーションマークを元に戻すことで暫定対応……
  - [OpenAPIの仕様](https://swagger.io/docs/specification/data-models/data-types/#string)的にはdateやdatetimeはstring扱いであるはずなのでやめてほしい。

# 今のところの所感

今のところ上記の対応をしつつかなり初歩的なレベルで使っているだけですが、OpenAPIを使うことについて以下のように考えています。

- そもそもyamlを直接書くのはつらい
  - [Stoplight Studio](https://stoplight.io/studio/)などを使うべきか。
- RESTじゃないAPIの仕様は書きにくい
  - 逆に考えると、妙に個性的なAPIの設計を避ける効果はありそう。
- 仕様からのコード生成までいかないとあまりメリットがなさそう
  - 既に（社内などに）実績のある仕様書のテンプレートがあるなら、それを使い続けてもいいかも。
  - 今回は既存で使えるテンプレートがなかったため、フォーマットが決まっているだけでもメリットはあると感じている。
- OpenAPIを使っても仕様書の集約は難しい
  - 使い始める前はモバイルアプリの開発者とサーバサイドAPIの開発者が同じ仕様書を見て作業できるのは素晴らしいと思っていたが、当然ながらモバイルアプリの開発者が必要な情報とサーバサイドAPIの開発者が必要な情報は異なるわけで、それらを全部押し込むとかなり分かりにくい仕様書になってしまう。結局は別々の仕様書があったほうが分かりやすいということになる。
- 意外とツールが整備されていない
  - [OpenAPI.Tools](https://openapi.tools/)を見ても分かるように、ツールが乱立している状態で良いもの・自分に合ったものを探すのに時間がかかる。
  - 場合によっては自前で作ったほうが良い場合もあるかも。

ネガティブなことばかり書いてしまいましたが、まだまだ活用できていないからネガティブなところが目についてしまうのだろうというのと同時に、きちんと活用するまでには相当の労力が必要そうという印象を持っています。最近は[Postman](https://www.getpostman.com/)で仕様書を作っている人もいるようなので、そちらも試してみたいと思います。
Vimacs - VS Code で Vim と Emacs のいいとこどり

[OPENLOGI Advent Calendar 2019](https://qiita.com/advent-calendar/2019/openlogi) の記事です。
昨年、完全に自分用に作ったプラグインですがなかなか便利なので紹介します。

## 理想のエディターを求めて

- ベースの環境としては VS Code を使いたい！
- カーソル操作は Vim キーバインドを使いたい！
- 文字入力時は Emacs キーバインドを使いたい！

というわがままな人のために VSCode Extension です。

## Vimacs for VSCode

![](https://raw.githubusercontent.com/migrs/vscode-vimacs/master/images/icon.png)
https://marketplace.visualstudio.com/items?itemName=migrs.vimacs

### できること

- インサートモードで基本的な Emacs キーバインディングが使える
- カーソル移動以外ではリージョン操作系にも対応
- VS Code のコマンド入力やファイル選択のUIでも `Ctrl+N`, `Ctrl+P` などのカーソル移動に対応

## 詳しくは

自分のブログの方で紹介してますのでそちらを参照してください
<https://m.igrs.jp/blog/2019/12/14/vimacs-for-vscode/>

### 暫定対処

上記記事内にも書いてますが、期待通りに動かないキーバインドがあります。
現在私の方では以下の Emacs の切り取り（Ctrl+W）が動かないので `keybindings.json` で再度定義しています。

```json
{ 
"key": "ctrl+w",
"command": "emacs.action.clipboardCutAction",
"when": "editorTextFocus && editorHasSelection && !editorReadonly && vim.mode == 'Insert'"
}
```

## VSCode 拡張の開発について

久しぶりに触ってみたら忘れていた部分もあったので備忘録的に残しておきます。

VSCode の拡張開発には [vsce](https://github.com/microsoft/vscode-vsce) というライブラリを利用します。

### ビルドと検証と公開

ローカルパッケージの作成

```
vsce package
```

ローカルパッケージのインストール

```
code --install-extension vimacs-1.1.1.vsix
```

マーケットプレイスへの公開

```
vsce publish
```

基本的にはこれだけです。

### アカウントの作成

ここらへん、以前と手順というか仕組みが異なった気がします。
基本的には Azure DevOps というところで、Organization と Project というものを用意して管理する必要があるようです。

`https://dev.azure.com/[OrganizationID]`

セキュリティートークンの場所もわかりにくくURL的には以下になります。
`https://dev.azure.com/[OrganizationID]/_usersSettings/tokens`

詳しくは公式のドキュメントをどうぞ
[Publishing Extensions](https://code.visualstudio.com/api/working-with-extensions/publishing-extension)
SaSSについて簡単にまとめてみた

## SaSSのネストと変数について
#### ネストの機能
スタイルシート内にある共通の要素をまとめることができる機能

```stylesheet.scss
.center {
  text-align: center;
}

.center h1 {
  margin-top: 3px;
}
```
SaSSを使うことで、上記のコードを次のようにまとめることができる。

```stylesheet.scss
.center {
  text-align: center;
h1{
  margin-top: 3px;
 }
}
```

#### 変数の機能
冗長なコードを削除し、自由な表現を可能にする機能
色に対して一目見ただけで内容が分かる変数を定義したりします。

```
h1 {
  color: #777;
}

p{
  color: #777;
}
```
上記のコードでは灰色を意味する`#777`が繰り返し使われています。

そこで@light-grayというカスタム変数を使ってコードを書き直して見ます。

```
@light-gray = #777

h1 {
  color: @light-gray;
}

p{
  color: @light-gray;
}
```
カスタム変数を使うことで#777より分かりやすくなりました。
paizaでアセンブラ その9

#概要

paizaでアセンブラ、やってみた。
練習問題やってみた。

#練習問題

ebpレジスタの値を表示せよ。

#サンプルコード

```
.code32
.text
.global main

main:
    movl    $buf, %ecx
    mov     %ebp, %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    call    puth
    mov     %ebp, %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    call    puth
    mov     %ebp, %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    call    puth
    mov     %ebp, %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    call    puth  
    mov     %ebp, %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    call    puth 
    mov     %ebp, %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    call    puth
    mov     %ebp, %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    rol     %eax
    call    puth
    mov     %ebp, %eax
    call    puth
    ret
    
puth:
    and     $0x0f, %eax
    add     %eax, %ecx
	movl	$4, %eax
	movl	$1, %ebx
	movl 	$1, %edx
	int	 	$0x80
	movl    $buf, %ecx
	ret
	
.data
buf:
	.ascii 	"0123456789ABCDEF"

```

#成果物

https://paiza.io/projects/mrbCpDPu-ExTvHWrhMd1Xw

以上。
RaspberryPi(python)でvl53l0xを使う

VL53L0Xを用いたToF式測距センサを使ってみた話

結論:
$ sudo pip install VL53L0X
とする。

コードの書き方、接続はこちらを参考に
https://github.com/pimoroni/VL53L0X-python
直近の予定をGoogleカレンダーから取得して毎朝LINEで通知する

![screenshot-2019-12-13-155539.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35655/5af83558-e6c7-5811-9efb-e0dfd0dcd380.png)
我が家では当日〜明後日までの予定を毎朝LINEに通知してくれるちょっとだけ便利なものを導入してます:rolling_eyes:

# 概要

![Untitled.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35655/b78a3ec4-b606-66ad-d09c-24b5da3f3dc9.png)

- S3から静的なデータを取得する
- GoogleカレンダーAPIで明後日までの予定を取得してくる
- LINE Notify APIで設定したトークルームへ通知する

## 材料
- AWS Lambda ... 1つ
- Googleカレンダー ... 1つ以上
- GCPのサービスアカウント ... 1つ以上
- LINE Notifyのアクセストークン ... 1つ以上

（お好みで）
- AWS S3 ... 1つ

## 作り方
### A. GCPコンソール
1. GoogleカレンダーAPIを有効化する。
2. サービスアカウントを作成する。
... 要件として限定されたユーザー間でのみ共有したい場合はサービスアカウントを使用するのが最適。
3. 通知したいカレンダーに「特定のユーザーとの共有」に2. で作成したサービスアカウントを追加する

### B. LINE Notify
1. 通知したい部屋用のアクセストークンを発行しておく。

### C. AWS Lambda
1. A. で作成したGoogleのサービスアカウント用のキーを使ってGoogleカレンダーAPIで直近の予定を取得する。
2. B. で作成したアクセストークンでLINE Notify APIを使ってルームに通知する。
3. (補足)S3には通知する際に使う静的データなどをいれてIAMで参照できるようにすると割と便利かも？

以上！サクッとできるちょっとだけ便利なものでした〜
Jenkins Declarative pipelineでSlackにGitのコミットログも通知する

小ネタ。Groovy大好き。

Jenkinsfile内で以下のメソッドを書いておいて、 `pipeline` ブロック内で `toSlack(channnel: "hoge-channnel", tokenCredentialId: "hoge-token")` とすれば使える。

```groovy
def toSlack(Map args) {
    def changeMsgs = []
    currentBuild.changeSets.collect { it.items }.flatten().each { entry ->
        def commitDate = new Date(entry.timestamp).format("yyyy/MM/dd HH:mm")
        def author = entry.class.name == "hudson.plugins.git.GitChangeSet" ? "<mailto:${entry.authorEmail}|${entry.author.toString()}>" : entry.author.toString()
        changeMsgs << "・${commitDate}-> ${entry.msg} by ${author}"
    }

    slackSend(
        channel: args?.channel,
        tokenId: args?.tokenId,
        color: "good",
        message: changeMsgs.size() > 0 ? changeMsgs.join("\n") : "・なし"
    )
}
```

これぐらいの行数のスクリプトだったり、他のジョブと共通化したかったりすると、毎回書くのはツラいので、実際はJenkins Shared Library化してます。

なので、 `slackSend` の `color` の部分もビルド結果を変換してたりします。
海で使う IoT デバイスの開発に Go を採用する理由

私は今[ウミトロン株式会社](https://umitron.com/ja/)で、水産養殖に使うIoTデバイス、およびそれを用いたサービスの開発をしています。


IoT デバイスのプログラミングに Go を採用しているのですが、そういった例はあまり多くないということで、理由について書いてみます。自分は IoT の開発は今の会社が初めてなので比較が色々と難しいのですが、Raspberry Pi の使用例の記事によくある Python や Node を使っているようなケースとの比較と、あとは C / C++ 等のコンパイル言語に比べた時の Go の特徴が生きてくる理由の紹介になります。

# サービスについて
## デプロイがいつでもできるわけではない
水産養殖に使うIoTデバイスということで、デバイスを海で動かしています。ネットワークは無線ですし、電力はソーラー。デバイスを使うのも充電も昼間のみなので日が沈んだらスリープ状態にしますし、そもそも主電源をユーザーが切る可能性もあるので、我々サービス提供側が必ず操作できるとは限りません。

### シングルバイナリにしたい
プログラムをシングルバイナリにできると、VM や、ネイティブコンパイルが必要なライブラリなどの実行環境をデバイス側にもたなくていいので、実行環境のメンテナンスコストが小さくなりデプロイ時に考えることが減ります

## 信頼性が上がる選択をしたい
IoT デバイスは、台数が規模に対して多くなりがちですし、デプロイが失敗したときのロールバックの対応コストが高いので、デプロイのコストがウェブサーバへと比べて高くなりがちです。

そこで、コンパイル時にエラーが発見できる、コンパイル言語を使う方が有利になります。また、Go であれば C++ と比べてメモリ管理のような複雑な問題を抱える心配も減ります。

## I/O 速度が異なるデータへのアクセスが多い
プロダクトとして提供しているデバイスでは複数のセンサーが繋がっていたりログを収集しているので、複数のデータにアクセスしており、HTTP のほか、GPS、BLE、I2C などのそれぞれ I/O 速度が異なります。

Go は goroutine を使った並行処理が標準の方法として使えるので、I/O 待ちが発生する処理がたくさんあっても比較的簡単に扱うことができます。

# 開発について
## クロスコンパイルを簡単に使いたい
Raspberry Pi を使うときは CPU が Arm なので、Macで開発するにはクロスコンパイルが必要です。Go は Arm のクロスコンパイルを標準でサポートしてるので、 `go build` コマンド実行時に環境変数で指定するだけです。

## 習得難易度が低い言語にしたい
まだ会社の人数が少ない中で、Ruby や Python などのサーバアプリケーションの開発もするエンジニアがデバイスプログラムの開発もしています。
個人的な意見ですが、一応やったことのある C も C++ に比べ Go が一番 LL に近い感じがあって圧倒的に簡単でした。すぐ動くし。
イラストをSVG化する前に確認する事

# はじめに
SVGを使っていますか？わたしは最近本格的に使いはじめました。
SVG化したデータのほうがpngの8-bit色制限より軽かった、という事があってから良い子だなと興味が出ました。

# SVG化するにあたって
AdobeIllustratorなどのソフトで作られたベクターデータを書き出すと思います。
何も考えずにイラストを作りSVGに書き出ししたので困る事がありました。
どういう点に気をつけておくべきだったかを備忘録として書きます。

# 書き出し後に困った事
- パーツごとのグループがわからない、クラスづけに困る
- パスの複雑化でサイズが増える
- そもそもアピアランスでつけた効果とかSVGにしてくれるの？

と、なりました。

## どうすればいいか
### パーツごとのグループがわからない、クラスづけに困る
![q2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351246/d02a68e3-ca9c-f611-c672-673b7413ff2a.jpeg)

書き出してからグループ化したいパーツごとに```<g id="パーツごとのID"></g>```で囲っていく作業は大変そうです。
パーツごとにレイヤー分けをきっちりし、クラス名も決めておくと書き出した時にレイヤー名を反映してくれます。

### パスの複雑化でサイズが増える
![q1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351246/64ca5b94-3b89-460d-2dcb-40cddd41f76d.jpeg)
SVGとして書き出した時に、アピアランスの**分割拡張後**と近い状態になります。
アピアランスを多用している場合、拡張後はパスが増えます。
できるだけ軽量化をしておくべきなので、パスを減らすためにパスファインダーでオブジェクトの結合、アンカーポイントの削除や単純化をして、必要であればイラストの構造も変えたほうがいいかもしれません。

### そもそもアピアランスでつけた効果とかSVGにしてくれるの？
![q5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351246/a68fcffe-fd90-d120-f8dd-7ecc13b0b04f.jpeg)
 
アピアランス複製、変形移動などはしっかり再現してくれました。
イラストレーターでのイラスト作成方法としては頻繁に使う作業なので一安心。

しかし、アピアランスの効果ドロップシャドウと光彩はfilterで再現されず、パスの座標ではないとても長い文字列。。

```html
<image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhABxnTISJUryyt5b26vZq9gfXpetyExKYg5IRM5hkL8f 〜省略〜 ggg=="/>
```

#### filterに変換するには？
![q6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351246/25f3d4d8-41c4-f831-2dda-5f932c1058c1.jpeg)
効果をスタイライズからの適用ではなく、SVGフィルターに変更して、SVG書き出しをする際は**別名で保存**することでfilterに変わりました。

SVGフィルターは初期設定では足りないので、新しいスタイルを追加したりしてみましたが時間がかかりそうです。
SVGフィルターの中身を触るとなると時間がかかるので、なるべく複数のSVGフィルターが必要なイラストの構造にはしないほうがよさそうな気がします。


```html:SVGフィルター「シャドウ」の中身
<filter  filterUnits="objectBoundingBox" height="130%" id="AI_シャドウ_2" width="140%" x="-15%" y="-15%">
	<feGaussianBlur  in="SourceAlpha" result="blur" stdDeviation="6"></feGaussianBlur>
	<feOffset  dx="8" dy="8" in="blur" result="offsetBlurredAlpha"></feOffset>
	<feMerge>
		<feMergeNode  in="offsetBlurredAlpha"></feMergeNode>
		<feMergeNode  in="SourceGraphic"></feMergeNode>
	</feMerge>
</filter>
```

## クリッピングマスクならどうなるか
![q3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351246/efa7f546-6a91-88be-4c61-7432e43f7dc9.jpeg)

clipPathに書き換えてくれました。特別な事をしなくても大丈夫そうです。

```html
<style>
      .st1 {
        clip-path: url(#SVGID_2);
      }
</style>
<g>
    <defs>
        <path
        id="SVGID_1"
        d=""
        />
    </defs>
    <clipPath id="SVGID_2">
        <use xlink:href="#SVGID_1" style="overflow:visible;" />
    </clipPath>
    <g class="st1">
        <radialGradient>
          <!-- 省略 -->
        </radialGradient>
    </g>
</g>
```


# まとめ
- イラストごとにレイヤー整理し、SVG化する前にグルーピングしておく
- アピアランスは描画できるが、光彩やシャドウ類は注意する
- イラストをSVGにするとパスが増えがちなのでサイズ削減に注意してSVG化する
LaravelのViewComposerで継承を使わずに共通化する

この記事は[Laravel Advent Calendar 2019](https://qiita.com/advent-calendar/2019/laravel)の15日目の記事です。

# ViewComposerとは？

> ビューコンポーザはビューがレンダーされる時に呼び出される、コールバックかクラスメソッドのことです。ビューがレンダーされるたびに結合したい情報があるなら、ビューコンポーザがロジックを一箇所にまとめるのに役立ちます。
> [ビュー 6.x Laravel](https://readouble.com/laravel/6.x/ja/views.html)

基本的な実装方法も上記Laravelのドキュメントで確認することができます。

# ViewComposerの実装を共通化する

本記事ではサンタクロース(santa-claus)画面とトナカイ(reindeer)画面にそれぞれViewComposerを定義し、
それぞれ共通して `isChristmas` をViewから参照させます。
これを継承を使った方法を紹介した上で、継承を使わずに共通化する方法を紹介します。

## 継承を使った実装

`isChristmas` を設定する `ChristmasViewComposer` を実装し、 `SantaClausViewComposer` と `ReindeerViewComposer` がそのクラスを継承します。

```php
namespace App\Http\View\Composers;

use Illuminate\View\View;

class ChristmasViewComposer
{
    public function compose(View $view)
    {
        $view->with('isChristmas', $this->isChristmas());
    }

    private function isChristmas()
    {
        return false; // FIXME 適当な実装
    }
}

class SantaClausViewComposer extends ChristmasViewComposer
{
    public function compose(View $view)
    {
        parent::compose($view);
        // FIXME サンタクロース(santa-claus)画面に必要な実装
    }
}

class ReindeerViewComposer extends ChristmasViewComposer
{
    public function compose(View $view)
    {
        parent::compose($view);
        // FIXME トナカイ(reindeer)画面に必要な実装
    }
}
```

コンポーザーの定義はこのようになります。

```php
View::composer('santa-claus', 'App\Http\View\Composers\SantaClausViewComposer');
View::composer('reindeer', 'App\Http\View\Composers\ReindeerViewComposer');
```

## 継承を使わない実装

`isChristmas` を設定する `ChristmasViewComposer` を実装しますが、 `SantaClausViewComposer` と `ReindeerViewComposer` はそれを継承しません。

```php
namespace App\Http\View\Composers;

use Illuminate\View\View;

class ChristmasViewComposer
{
    public function compose(View $view)
    {
        $view->with('isChristmas', $this->isChristmas());
    }

    private function isChristmas()
    {
        return false; // FIXME 適当な実装
    }
}

class SantaClausViewComposer
{
    public function compose(View $view)
    {
        // FIXME サンタクロース(santa-claus)画面に必要な実装
    }
}

class ReindeerViewComposer
{
    public function compose(View $view)
    {
        // FIXME トナカイ(reindeer)画面に必要な実装
    }
}
```

継承していないためコンポーザーをこのように定義します。

```php
View::composer(
    ['santa-claus', 'reindeer'],
    'App\Http\View\Composers\ChristmasViewComposer'
);
View::composer('santa-claus', 'App\Http\View\Composers\SantaClausViewComposer');
View::composer('reindeer', 'App\Http\View\Composers\ReindeerViewComposer');
```

# まとめ

ドキュメントには書かれていませんが、一つのViewに対して複数の複数のViewComposerを登録することも可能なため、継承を使わなくてもViewComposerの実装を共通化できます。

クラス継承にはデメリットが多いため、クラス継承を使わない共通化の方法を紹介しました。
【AWS】RDSで作成したMySQLのDBに日本語が保存できないを解決 | Rails on Docker

### 下記URLへ記事を移設しました。
[【AWS】RDSで作成したMySQLのDBに日本語が保存できないを解決 | Rails on Docker](https://bamboo-note.tokyo/AWS/aws-rds-mysql-cannot-japanese/)
Nuxtで現在地情報を取得して利用する

**ごめん、アドベントカレンダーはかけません。いま、HackDayにいます。この国をちょっと便利にするソリューションを作っています。……本当は、あの頃が恋しいけれど、でも今はもう少しだけ、知らないふりをします。私の作るこのアイデアも、きっといつか誰かの青春を乗せるから。**

# はじめに

と、言うわけで、現在、[HackDay2019](https://hackday.jp)の会場でこの記事を執筆しています。
限界開発ですでに心が折れそうなのですが、本日はYumemiアドベントカレンダーの自分の担当日なので頑張って書いています。

今、目の前のチームメンバーが発狂しました。

さて、今回のお題ですが。フレッシュな内容ということで、HackDayでちょうど詰まった内容を投稿します。

## やりたかったこと

Webページを使用しているユーザーの現在位置を取得して、APIに渡したかった。

## やったこと

[GeoLoacationAPI](https://developer.mozilla.org/ja/docs/Web/API/Geolocation/Using_geolocation)を使った。

## GeoLocationAPIとは？

`Geolocation API により、ユーザーは希望すれば自身の場所をウェブアプリケーションに通知することができるようになります。なお、プライバシー保護の観点から、ユーザーは位置情報が送信される際には確認を求められます。`

Mozilaより

と、言うわけでたまにブラウザを開いているユーザーの現在位置を取得できるAPIです（そのまま）

例えば現在位置の緯度経度を取得する場合はこう

```javascript
navigator.geolocation.getCurrentPosition(function(position) {
  console.log(position.coords.latitude, position.coords.longitude);
});
```

注意点として、現在位置を取得するにはある程度時間がかかるので、非同期的に処理する必要があります。

## 実際のコード

```vue
<script>
export default {
    mounted: {
       const position = await this.getPosition()
         .then((position) => {
            return {
              latitude: position.coords.latitude,
              longitude: position.coords.longitude
            }
          })
          .catch((err) => {
            console.error(err.message)
          })

       this.latitude = position.latitude
       this.longitude = position.longitude
       do_something(this.latitude, this.longitude)
    },
    methods:{
      getPosition(options) {
        return new Promise(function(resolve, reject) {
          navigator.geolocation.getCurrentPosition(resolve, reject, options)
        })
      }
    }
  }
}
</script>
```

見ての通り、無理やりPromiseにして返却しています。

注意点として、現在位置を利用するので、ユーザーの許可がなければ使えません。その場合の例外処理もしっかり書いておきましょう。

## 最後に

限界開発の真っ最中なので内容薄めで申し訳ございません。
後々HackDayで得た他の知見もQiitaに上げるかもしれませんので、許してください。
Golang+Bazelで依存ライブラリをいい感じに管理する

この記事は[OpenSaaS Studio Advent Calendar 2019](https://adventar.org/calendars/3928)、11日目の記事です。[3日目](https://qiita.com/mmmknt/items/80ff70ccb878ed4529c1)はPython+Bazelでしたが、今回はGolang+Bazel。

# はじめに
GolangのプロジェクトでBazelを使う場合、依存ライブラリの二重管理が必要になることがあります。
二重管理は変更の反映漏れにつながったり管理方法が理解しづらくなるため基本的には避けるべきですが、上手くハンドリングできればビルド速度などBazelのメリットを享受しつつ問題なく運用できます。
この記事では、私がジョインしているプロジェクトでこの課題にどう対応したのか紹介します。

# 依存ライブラリの二重管理
BazelではWORKSPACEというファイルで依存ライブラリを定義します（マクロに定義してWORKSPACEでそのマクロを呼ぶ方法もあります）が、Golangのアプリを開発する場合にはIDEの対応状況やワークフローなどを考慮してgo.modに依存ライブラリを定義することがほとんどだと思います。
その場合、以下のように複数のファイルに同じ依存ライブラリの定義が存在するため二重管理が必要になります。

```Bazel:WORKSPACE
go_repository(
    name = "com_google_cloud_go",
    importpath = "cloud.google.com/go",
    sum = "h1:0sMegbmn/8uTwpNkB0q9cLEpZ2W5a6kl+wtBQgPWBJQ=",
    version = "v0.44.3",
)
```

```go.mod
require (
	cloud.google.com/go v0.44.3
)
```

# 二重管理の運用
## go.modの変更をWORKSPACEに反映する
一般的な開発フローではIDEなどによりまずgo.modが変更され、その変更をWORKSPACEに反映するために[Gazelle](https://github.com/bazelbuild/bazel-gazelle)が使われます。
[README](https://github.com/bazelbuild/bazel-gazelle#running-gazelle-with-bazel)の記載を参考にセットアップすると、以下のコマンドでgo.modからWORKSPACEに変更が反映されます。

```
bazel run //:gazelle -- update-repos -from_file=go.mod
```

ただし、このコマンドでは以下の問題があります。

* WORKSPACEの定義がオリジナルな依存ライブラリとGazelleで生成された依存ライブラリが同じファイルで管理される
* go.modから削除されたライブラリがWORKSPACEから削除されない

## Gazelleで生成する依存ライブラリ定義を隔離する
Gazelleは生成対象の依存ライブラリをマクロとして出力する機能があり、この機能を利用することでWORKSPACEから分離することができます。

```
bazel run //:gazelle -- update-repos -from_file=go.mod -to_macro=repositories.bzl%go_repositories
```

`to_macro`フラグで出力先を指定しており、この例だと`repositories.bzl`に`go_repositories`という名前で依存ライブラリを定義するためのマクロが生成されます。
生成されたマクロは以下のようにWORKSPACEで呼び出せば依存ライブラリの定義がロードされます。

```Bazel:WORKSPACE
### Below is the auto-generated dependency macro from go.mod.
# gazelle:repository_macro repositories.bzl%go_repositories

load("//:repositories.bzl", "go_repositories")

go_repositories()
```

## 不要になったライブラリの削除
これもフラグがあるのでそれを指定するだけです。

```
bazel run //:gazelle -- update-repos -from_file=go.mod -to_macro=repositories.bzl%go_repositories -prune=true
```

`prune`フラグです。
ただし、このフラグを設定するとgo.modで解決できないライブラリの`go_repository`が全て削除されてしまいます。
そのままだと[PGV](https://github.com/envoyproxy/protoc-gen-validate)などが削除されてしまうため、もし同様のライブラリ定義があればkeepコメントで削除されないようにしてください。

```Bazel:WORKSPACE
### Protoc-gen-validate
# keep
# It is used in order to generate validation code from proto, not defined in go.mod.
go_repository(
    name = "com_github_envoyproxy_protoc_gen_validate",
    importpath = "github.com/envoyproxy/protoc-gen-validate",
    tag = "v0.1.0",
)
```

# まとめ
* GolangとBazelで依存ライブラリを管理するためのファイルが別になっており、二重管理が必要
* アプリを開発する時はgo.modを変更
* Gazelleを使ってgo.modの変更をBazel側に反映し、不要になったライブラリも削除

この記事では以上の内容を説明してきましたが、他の言語でBazelを使う場合やデファクト以外のビルドツールを使う場合にもこの問題は出てくると思うので、その際の検討の参考になればと思います。

# これからやりたいこと
ライブラリのバージョンを上げるのって手間ですよね。
[自動でバージョンを上げてくれるサービス](https://dependabot.com/)があったりするので、これを利用して自動で更新できるようにしたい。
この記事で書いたように自動生成された定義とそうでない定義は分離できているので、どのファイルをサービスにinputすればいいかは整理できている。
あとはリグレッションテストを完備すればデグレには気付ける、はず！
QiitaのATOMタグで全期間ランキング２位の人がVisual Studio Codeに移行した理由とは？

#前置き
久々にAdvent Calendarに参加してみましたー。c(｀・ω・´)b
AtomからVisual Studio Coede(以下主にVSCode)への乗り換え話の一つとして、参考にして頂ければ幸いです。 :pray: 
※これからの書く事は、2019年12月15日現在においての話になります。

#QiitaのATOMタグで全期間ランキング２位の人がVisual Studio Codeに移行した理由とは？ :thinking: 
はい。まぁQiitaのATOMタグで全期間ランキング２位の人とは自分の事なのですが、一応確認用の画像も貼っておきますね。:grin:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10658/5d1d0fe7-640d-d286-f39a-43fafc965155.png)


代表的な(というか殆どのContributionsを稼いでいる)ATOMタグの記事は下記の物になります。

- [【超おすすめ！！】Atomのパッケージ、テーマ、キーバインディング、設定を紹介してみる（※随時更新）](https://qiita.com/snowsunny/items/f40c3291a580f3215797)
- [こんなのがあるのはAtomだけ？尖りまくってるパッケージ紹介【随時（たまーに）更新】](https://qiita.com/snowsunny/items/17f35baf0671451d2c09)
- [【Atom】Web開発者達によるWeb開発者の為のエディターについて](https://qiita.com/snowsunny/items/31ecb42d156b50b76376)

手前味噌なのですが、一番目の記事は初めてお話しする方でも、その方がAtomユーザーの場合「この記事見た事あります！」って言って貰える事があるくらいには人気な記事なのかなーと思います。:relaxed: 

現在この記事を読んでいるAtomユーザーの方の中にも、前述の記事を見た事あるよーって方が居るのではないでしょうか？

そんな私なのですが、
__実は数年前から仕事でAtomは殆ど使用せず、ずっとVSCodeで作業を行っています…(´ - ω - ｀)__
「えっ？あんなにAtomを推してたのに？？」と思われる方も居るかもですが、その大きな理由（細かい事も色々あるのですが…）を書いていきたいと思います…！

##「そのエディターを使う理由って何ですか？」
開発者の方は、一度は聞かれた事がある質問だと思うのですが、皆さんはどの様に答えているでしょうか？
「何を開発しているのか？」「エディターに求める物は何か？」等によって、答えは千差万別だとは思うのですが「エディターを選定する大きな理由の一つ」として自分は「__ワクワク感__」をとても重視しています。

そしてその「__ワクワク感がAtomでは無くなり、VSCodeにはとても感じた…！__」と言うのがAtomからVSCodeに移行した大きな理由なのです… :pensive:

#ワクワク感 is 何？
ワクワク感とだけ言われても意味不明だと思うので、もう少し頑張って言語化してみたいと思います！ｗ :sweat_smile:

###自分的ワクワクポイント
__1. 開発が活発でドンドン新機能が付く！__ :new: 
__2. 細かい改善もしっかりやってくれる！__ :tools: 
__3. 多種多様な拡張機能が無数にある！__ :cool:
__4. 自分の好きな様にカスタマイズ出来る！__ :gear: 

と言うのが、自分が使っていてワクワクを感じる大きなポイントで、使っていて楽しいなーと思う点でもあります。:tada: 

ここで最近のAtomとVSCodeのリリースノートを一度見てみましょう。:eyes:

- [Atom: Release notes](https://atom.io/releases)
- [VSCode: Visual Studio Code November 2019](https://code.visualstudio.com/updates/v1_41)

見せ方の違いもありますがVSCodeの方が特に「1と2」の点において、Atomを上回っていると思いませんか？:thinking:
また、比較する上でこれがめちゃくちゃ重要と言う訳でも無いのですが、両アプリのベースとなっているelectronのバージョンを見てもVSCodeは「6」、Atomは「4」の物を使っており、少し遅れている感は否めないと思います… :persevere:

また、自分がコメントしている下記PRの問題がずっと放置されている事（まぁそれが嫌ならコミットしろ感ありますが…:see_no_evil:）もワクワクポイントが減少している理由の一つかもしれません… :innocent: 
[autoindent lines with moveLineUp/moveLineDown by joseramonc · Pull Request #9104 · atom/atom](https://github.com/atom/atom/pull/9104)

どうでしょうか？現状__Atomがあまりワクワク感が無いエディター__で、__VSCodeがワクワクするエディター__と言う思いが、少しでも共有出来たのでは無いでしょうか… :relieved:

#今までもこれからも
自分は今までVSCodeに辿り着くまでに、Dreamweaver、Eclipse、Sublime Text、Atom等々、幾つものエディターを使って来ました。そして新しいエディターに__ワクワク__を感じ、何回も乗り換えて来ました。
おそらくこれからもVSCodeを超える__ワクワクするエディター__が登場した際にはドンドン試し、良ければそれに切り替えていく事でしょう… d(´ - ω - ｀)

前述しましたが「__そのエディターを選ぶ理由__」と言うのは千差万別で、安定性を一番に考える方や、軽快さや、価格、機能、知り合いにお勧めされたから等々、色々な理由があるかとは思うのですが、この記事がその選択の一助になれれば幸いです。:pray:

#まとめ
まぁ身も蓋もない事を言うと、最終的には「__好きなエディターを適材適所で使う__」と言うのを実践出来れば何も問題無いとは思います。自分もGitの細かいコミット整理をする時等は未だにAtomを使ったりしています。

ですが、自分と同じに様にAtomに停滞感を感じ、ワクワクしなくなって来たなぁ…とお考えの方は是非VSCodeを試してみて下さい！Atomには無い機能や、拡張機能もあり、きっとワクワクを感じさせてくれると思います！:wink::thumbsup: 

今度時間がある時にでもVSCode版のお勧め拡張機能や、設定を別記事で書いてみたいと思います。

それでは、ここまで読んで頂きありがとうございました。 :bow:
皆さんが自分に合った良きエディターに出会えますように… :pray: :stars:

P.S. エディターの話題になる度にこの記事を書く書く詐欺していましたが、ようやく書きました… :innocent:
MacBook Pro でOpenPose

MacBook Proで機械学習、Deep Leaning系の記事を調べていた際、Macで姿勢検出ができるという記事を
いくつか見つけて色々試してみたところ動作したので、備忘録的に書いておきます。

#環境

- MacBook Pro 15in 2018 2.2 GHz Core i7 32GB Memory
- Mojave 10.14.6
- python 3.7.5
- homebrew でpythonとvirtualenv、wgetをインストール

# 設定手順

## 準備

準備としては、Pythonの仮想環境を設定します。

```
python仮想環境を作成します。
$ virtualenv mppose

python仮想環境に入ります。
$ source mppose/bin/activate
```

## OpenPose設定

OpenPoseを設定していきます。

```
動作させるために必要なパッケージをインストールします。
$ pip3 install tensorflow ipython configobj keras pillow opencv-python

Kerasバックエンド版のOpenPoseのリポジトリをクローンして移動します。
$ git clone https://github.com/michalfaber/keras_Realtime_Multi-Person_Pose_Estimation.git
$ cd keras_Realtime_Multi-Person_Pose_Estimation/

リポジトリ内のmodelディレクトリに移動してcaffeとkerasの学習モデルをダウンロードします。
$ cd model
$ sh get_caffe_model.sh 
$ sh get_keras_model.sh 

空のinit.pyを作成します。(私の環境では、これを作成しないと後のpythonスクリプトを動作させる際にmodelディレクトリ配下のpythonモジュールが読みこめず、エラーになりました)
$ touch __init.py__

リポジトリのトップへ戻り、caffeのnumpy学習モデルレイヤをダンプします。
$ cd ../
$ docker run -v `pwd`:/workspace -it bvlc/caffe:cpu python dump_caffe_layers.py

caffeの学習モデルレイヤをkeras用に変換します。
$ python caffe_to_keras.py 
```

以上で設定は完了です。

# 動作確認

```
サンプル写真の姿勢検出をしてみる。
$ python demo_image.py --image sample_images/ski.jpg 

カメラを起動して姿勢検出をしてみる。
$ python demo_camera.py
```

カメラで姿勢検出をしてみたところ、大体processing time 0.07sec程度で検出ができているようで、CPUのみでもそこそこ動くものだなといったところです。姿勢検出系は他にもあるようなので、何かできるようなものがあればまた試してみようかと思います。
Notionのデータベースをロックする

[アルプ株式会社](https://thealp.co.jp/)でエンジニアをしています、集約のエンティティ@pictinyです。
これは[Notion Advent Calendar 2019](https://qiita.com/advent-calendar/2019/notion) 15日目のエントリです。
14日目は[Notionのデータベースでフィルタとソートをする](https://qiita.com/pictiny/items/4dcd75c2f0bdb302879a)でした。

# データベースロック
Notionのデータベースと**View**は簡単に表示の設定を変更できてしまいます。
誤操作によるデータベースの破損を防ぐためデータベースの表示設定をロックする機能があります。

ページ右上の`Database Lock`よりロックを有効にできます。

<img width="464" alt="ロック1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427952/19d5dcae-3cc2-7bd8-06ae-83f280a3a59d.png">

# まとめ
複雑なデータベースで**View**の設定をしたときはロックを有効にしておくとよいでしょう。

公式ドキュメントは[Database Lock](https://www.notion.so/Lock-page-content-d2b995727c0b483f9f3518c1eb4fab75#a3ebdc06f0d246c9a5735c38750bab70)にありますので、そちらもご覧ください。
お前らのクソアプリは間違えてる

[クソアプリ2 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/kuso-app2)の8日目が空いてましたので、担当させていただきます。

## お前らは俺を怒らせた

今年もクソアプリの季節がやってきた〜〜〜〜〜〜〜〜！！
才能と技術の無駄遣いの季節がやってきました！！
クソアプリアドベントカレンダー！！
ここ最近は、カレンダーが二つもあって、豊作ですね！！
オラ、ワクワクするぞ！！
・・・
・・・
・・・は？

なんすか、今年のクソアプリカレンダー。
クソアプリって、言っておきながら、実用的なアプリとか将来的につながるものが多いじゃないっすか。
真面目に素晴らしい良いアプリや記事じゃないですか！！
なんで、クソアプリカレンダーに書いてるんですか！

クソアプリはそんなんじゃない...もっと、絶望するくらい何にも役に立たないもんでしょ！
だって、書いてあるじゃないですか！説明に！！

> 今年も役に立たない、世の中に貢献しないアプリとかサービスを出しあって遊ぼうぜ！

**役に立ったら、クソアプリじゃないんですよ！！**

## 怒りの力が俺にクソアプリを作らせた

~~笑いなんていらねぇんだよ...俺に、今、必要なのは、怒りだ！クソまじめアプリをぶっ潰す！うわああああーっ！！（わかる人にしか伝わらない）~~

というわけで、怒り気味にクソアプリを作ってみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83578/87810152-9c78-9fe2-d712-e69a339720ec.png)

皆さんは、たまに仕事中に寿司食べたくなりませんか？
僕はステーキが食いたくなります（そして、昼に食いに行きます）

回らない寿司は、一般的に高いです。
でも、回転寿司は、安いですよね。
つまり、寿司が回ればいいんですよ。
そしたら、昼に食えるレベルになりますね。

なので、寿司を回すアプリを作りました。
昔作ったアプリだったのですが、今回、寿司のお代わりができるように、ボタンを追加しました。（ついでに、色々といじりましたが）
減らすこともできますし、お腹がいっぱいになったら、止めることもできます。

### 2019/12/17 追記

寿司の数を、カウントしてくれる機能追加しました。
これで、いくら食べたか一目瞭然！（内部も色々変わってる）
![copy_Screenshot_2019-12-17 Vue App.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83578/723114bd-543f-eb63-f75f-d61f16e93ac5.png)

### 2019/12/21 アップデート

修行の成果で、寿司がお茶に変わるアップデートを遂げました！！
これで、寿司の後のお茶が飲めます！！
やっぱり、必要ですよね！！
お待たせしました！！

↓デモ動画はこちらです。
https://twitter.com/endo_hizumi/status/1208048866727096320?s=20

**すごいでしょ？最高でしょ？天才でしょ？**

## こちらで遊べます

こっちで遊べるので、ぜひ遊んでみてください！
https://sushi-go-round.netlify.com/

ソースはこちらです。
https://github.com/EndoHizumi/sushi-go-round

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83578/da8661dc-40d8-dd30-8c63-4d1aec747e48.png)


**2019/12/16 追記**
肉を焼けるアプリも作った。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83578/e3310301-122f-b876-591e-575966c13f4f.png)


驚愕の２モード搭載！

- マウスホイールまわしてる時だけ焼くモード
- 網をクリックすると焼く・焼かないと切り替えるモード
 
https://lets-bbq-app.netlify.com/

ソースコードはこちら
https://github.com/EndoHizumi/LetsBBQ
jq 特定のobjectのkey,valueのkeyでsortする

### やりたいこと: 下のtargetObjの中をkeyでsortしたい

```json:test.json
{
  "targetObj": {
    "4": {
      "id": "obj4"
    },
    "1": {
      "id": "obj1"
    },
    "2": {
      "id": "obj2"
    },
    "3": {
      "id": "obj3"
    }
  },
  "obj": {}
}
```

### やったこと

```bash
$cat test.json | jq '.targetObj|=(to_entries|sort_by(.key)|from_entries)'
{
  "targetObj": {
    "1": {
      "id": "obj1"
    },
    "2": {
      "id": "obj2"
    },
    "3": {
      "id": "obj3"
    },
    "4": {
      "id": "obj4"
    }
  },
  "obj": {}
}
```

### --sort-keysでしなかった理由

objが上に来るから
Rubyの変数の定義(グローバル変数)

前回までに[ローカル変数](https://qiita.com/nyan_tech_24/items/bf52e294e86910d23570)と[インスタンス変数](https://qiita.com/nyan_tech_24/items/7bd5bb0bd5e092dbb778)、[クラス変数](https://qiita.com/nyan_tech_24/items/0e673dd9ddb38b2bd0bc)について書きました。
そして今回はグルーバル変数です。

##命名規則
- 先頭は$
- 英数字と_で構成されている

```ruby
$student = 'Taro'
=> "Taro"
$_STUDENT_2 = 'Jiro'
=> "Jiro"
$3sutudent = 'Sabu' #$の隣に数字は定義できない
syntax error, unexpected tIDENTIFIER, expecting end-of-input
#また何も値を入れないとnilになる
$student_5
=> nil
```
##スコープ
どこからでも参照可能

```ruby
$student = "Taro" 
puts $student 
Taro
=> nil

3.times do |n|
  puts $student
end
Taro
Taro
Taro
=> 3 

def students
  $student
end
students           #どこからでも参照可能
=> "Taro"

class Students
  puts $student  
end
Taro                     #どこからでも参照可能
=> nil
```

グローバル変数はどこから参照できるので下記のようにもできる。

```ruby
class Students
  $student = 'Taro'
  def greet  
    puts "Hi,#{$student}"
  end
  def replace=(name)
    $student = name 
  end
end
class MedicalStudents < Students
end

a = Students.new
a.greet
Hi,Taro
=> nil
a.replace = 'Jiro'
a.greet
Hi,Jiro
=> nil

b =  MedicalStudents.new
b.greet
b.replace = 'Hanako'
b.greet
Hi,Hanako
=> nil
a.greet
Hi,Hanako
=> nil
#さらに$studentはというと
$student
=> "Hanako"
#特にwarningが出ることなく呼び出せる。
```
結論グローバル変数はどこでも呼び出せる
知名度が低く先駆者がいない勉強会こそ、モブプロは導入すべきである

# はじめに
この記事は「[モブプログラミング Advent Calendar 2019](https://qiita.com/advent-calendar/2019/mobprogramming)」15日目の記事です。

タイトルを仰々しく書いてますが、そこまでの深い内容や素晴らしい論理に基づいたお話ではありませんのであしからず。
今回は以前所属していた会社で主催していたGolang勉強会でモブプロを導入したお話を思い出しながら語ろうかと思います。

# モブプロを適用するまでのお話
元々その勉強会は「Golangをもっと勉強したい！」「初心者でかつその技術を発散する場所がなくても勉強のモチベーションを維持する場所がほしい！」
とかいう理由で上司に打診をしてOKを貰えたので社内のメンバーを巻き込み、勢いで開いた会でした。

今はモブプロを導入してから参加率が少し安定しているっぽいですが、勉強会を開いたばかりの時は外部の参加者が1~2人、
酷い時は社内の参加者も2~3人いればいい程度のお世辞にも人気とは言い難い状態の勉強会でした。
（既に退社をしているので、当時開設していたイベントのページとかを貼るのは一応控えておきます）

というのも当たり前の話で

- やることは毎回ぶれてる
- そもそも勉強会にGolang詳しい人いないし、参加してない
- 会社自体の知名度も低い

というような「おっ、なんやこの勉強会。面白そうやな」というような「**期待感**」を持てないような勉強会に一体誰が来るのかという至極全うな話です。
来てくださる心優しいかたももちろんいましたが、多くの方は上記のようなことでまず選択肢にも入れないのではないかと思います。

開催意義はなんだったのか、開催しても有意義とは言えるのか。
そんな雰囲気が運営メンバーの間にも流れていたような記憶もあります。

しかし、そんな状況を変えたのがモブプロでした。


# モブプロを入れて目に見えて変わったお話
毎回勉強会のあとには振り返り会を設けており、モブプロをやろうと思い立ったのは参加率が一番低かった回の後に行われた振り返り会でのことでした。

その時に、先にも上げた問題点を整理して解決方法を考えていました。
実際に振り返りをしたときにはこの問題以外にもたくさんの問題点も出てきましたが、おおよそ似たような方向性の問題だったかと思います。

- やることは毎回ぶれてる
    - でもやりたいことは「初心者向けでのアウトプットを行える場所」ということでブレてない
    - そして基本的にはアウトプット方法はLTのみ
    - 学びを行う場ではあるが、初心者がLTをするのはハードルが高い
    - しかもLTをする人数を揃えるのは知名度が低い状態ではより難しい
    
    → **ということは「LTよりも参加ハードルが低くて」「人数が少数でも価値がある」学びの場がほしい？**

- そもそも勉強会にGolang詳しい人いないし、参加してない
    - 人脈を持っているわけでもない
    - 勉強会で著名な人と話したりすることはあるが、親しいわけでもない
    - ということはここで勝負をするのはやめて、初心者しかいなくても大丈夫なようにしたい
     
    → **でもそもそもgolangが初心者なだけで、他の言語ではベテランだったり何かしらの開発経験があるのでは？**

- 会社自体の知名度も低い
    - 知名度が低いのはしょうがないので広報はブランディングをしっかりしていく必要がある
    - が、そもそも「初心者」が発表やら意見を言いやすい場というのはベテランだらけの中よりも初心者同士の間では？
    
    → **つまり、逆に知名度がないほうがいいケースもあるのでは？**


これらの方向性が見えた時に思い出したのが「モブプロ」でした。
モブプロなら、人数が少数でもできてしかも意見交換も活発にできるから交流も自然にできる！
そんな画期的なことに気づいてしまったのです。

ただ、いきなり初対面同士の人と取り決めもなく「はいどうぞ」と言われても色々と難しいことは想定できるのでルールを作ることにしました。
↓には実際に進行に使ったときの資料のリンクを貼っておきます。
詳しいやり方が気になる方は進行資料を是非参考にしてみてください。
https://speakerdeck.com/dach/dog-4-gong-kai-yong


兎にも角にも、この振り返りの次の回からモブプロを導入したところ閑古鳥が鳴いていたのが嘘かと思うほど反響があり、会は無事息を吹き返す事ができました。
（※ 反響の程度ですが、あくまで相対的な話なので大手勉強会と比べるのはご容赦ください）


# 今回伝えたかったこと
「じゃあモブプロを導入すればホンマに良くなるんか！」
という質問に対しては場合によりけりとしか言えないのですが、ただ１つ言えるのはモブプロは**「１つのコミュニケーション手段」であり「他の人の知見を取り入れる事ができる効率的な勉強方法」であること**は確かということです。

心理的安全性を確保した状態、というと大げさかもしれないですが「意見や疑問を出すこと」を怖がらずまた怖がらせないような環境でやればきっと何かの学びが得られると思います。
是非皆さんモブプロにトライしてみましょう！

むしろやりたいという方は一緒にやりましょう！笑
Arduinoでのセンサーモジュールの使い方（人感センサー、磁気センサー、傾きセンサー）

この記事は[Arduino Advent Calendar 2019](https://qiita.com/advent-calendar/2019/arduino)の14日目です。昨日は@kimio_kosakaさんの[お手軽ATtiny10開発環境](https://make.kosakalab.com/make/electronic-work/arduino-ide/arduino_tpi/)でした。

---

## 事の起こり

最近Aliexpressを使うようになってセンサーモジュールが安く手に入ることが知って、センサー単体ではなくモジュール単位でまとめ買いするようになったので、購入したセンサーのArduinoでの使い方をまとめておこうと思います。
どれも電源と信号線を1本つなぐだけなので簡単に使えます。

## センサーモジュールの使い方いろいろ

### 人感センサー HC-SR501

赤外線感知式の人感センサーモジュールです。Passive Infrared Rayを略して、PIRセンサーとも言うらしいですね。人感モジュールは人でなくてもものが遮ったときなどを検知できるので活用範囲が広いと思います。
[Aliexpressで送料込み100円ほどで購入](https://ja.aliexpress.com/item/2035773471.html)しました。

#### センサーモジュール

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31037/dfb48743-aaf1-2380-6f42-6118f45b8bc7.png)

#### 接続

デジタル入力で感知結果を受け取れるのでデジタル7ピンにつないでいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31037/0579c1bc-8538-8e1c-8b8e-18bec6b0a546.png)

※friztingのパーツ画像では5VとGNDが逆になっていますが、適当に読み替えてください

#### テストコード


人感センサーが反応すると内蔵LEDが光ります。またシリアルコンソールモニタで反応している間は`1`を出力します。

```c++:pir.ino
int state = LOW;

void setup() {
  pinMode(LED_BUILTIN, OUTPUT);
  pinMode(7, INPUT);
  Serial.begin(9600);
}

void loop() {
  state = digitalRead(7);
  Serial.println(state);
  
  if (state == HIGH) {
    digitalWrite(LED_BUILTIN, HIGH);
  } else {
    digitalWrite(LED_BUILTIN, LOW);
  }

  delay(100);
}
```

### 磁気センサーモジュール

磁気を検知するスイッチ（リードスイッチ）モジュールです。デフォルトで`1`が出力され、磁石が近づくと`0`を出力するようになります。
ドアとドア枠にスイッチと磁石をつけることで開閉の検知や、物が置かれているかどうかの検知などに使えます。
[Aliexpressで送料込み６０円ほど](https://ja.aliexpress.com/item/4000051463267.html)で購入しました。

#### センサーモジュール

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31037/527d01d8-f4ea-aba2-ef70-5a153ee83edf.png)

#### 接続とテストコード

ピンの順番が違うものの、人感センサーモジュールと同様の接続、同じテストコードで動作します。


### 傾きセンサーモジュール

傾きを検知するスイッチ（ティルトスイッチ）モジュールです。上部に接続されている円筒形のティルトスイッチ内の鉄球がモジュール側に傾くと`1`が出力され、離れると`0`が出力されます。
転倒の検知や、傾きの方向が限定されているので、3つ組み合わせて箱の向きを検知することなどができます。
[Aliexpressで送料込み６０円ほど](https://ja.aliexpress.com/item/4000051420436.html)で購入しました。

#### センサーモジュール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/31037/e60fb583-1202-bba3-be89-73ea92026293.png)

#### 接続とテストコード

リードスイッチモジュールと完全に互換性があります。

---

## まとめ

今までセンサーが必要なときはセンサー単体で買ってきて、都度データシートを読みながら適切な抵抗やダイオードやコンデンサを組み合わせて使っていましたが、この価格で細かいことを気にせずにセンサーが使えるのは手間がかからないし、プロトタイピングをもっと気軽にやれるようになると思うので積極的に使っていきたいと思います。

電子工作やIoTの初心者向けにもセンサー単体の利用ではなく、まずはセンサーモジュールから利用をすすめてもいいかもと感じました。
起動しないPCのクローンSSDをつくる

HDDが瀕死、やばい！ちょうどSSDに換装したいと思ってたし、念のためバックアップ取ってクローンSSD→換装しよっと！
SSD届いた！よっしゃ早速クローン作ろ！
win「起動不可でーすｗｗｗ」
「どうしろっていうの！！手詰まり！！」
というところからクローン作成→SSD換装できたので備忘録。

#ざっくり
TOSHIBA Dynabook B350/56BR内の
瀕死のHDDからSSDクローンを作成→換装したい

##解決の流れ
1. 別なWinPCでEaseUS Todo Backupの起動ディスクをDVD-Rで作成
2. 起動ディスクをDynabookに
3. BIOSでブートの優先順位を変更
4. EaseUS Todo BackupをDVDから起動
5. SSD接続⇛認識するようにフォーマット
6. SSDクローン作成
7. 換装
8. 起動順位変更
9. 無事換装成功
やったぜ。

#詳細はここから
###手元にある道具（使うもの）
・TOSHIBA Dynabook B350/56BR（OS:win10）
⇛HDDが瀕死。起動も遅い。今回はこいつを換装する。
・新品のSSD
・SATA/USBケーブル
・他のwinPC
⇛今回はvaio VPCJ138FJ を使用した
・DVD-R（1枚）

##手順
###1. 別なWinPCでEaseUS Todo Backupの起動ディスクをDVD-Rで作成。
USBでも起動ディスクは作成できるが、手持ちに都合のいいUSBがなかった＋古めのPC＋またこうなった時のために再利用したい…という理由からDVDで作成することに。

vaioにEaseUS Todo Backupをインストールし，
ツール＞ブータブルディスク作成　から起動ディスク（DVD）を作成。
※今回救出するのはWinなので，Win PEで作成。
15分程で完成。

*ひらめきのもとになったページは[こちら](https://jp.easeus.com/todo-backup-resource/backup-hdd-when-pc-can-not-boot.html)。
(起動しないパソコンのHDDをバックアップする方法）*

###2. 起動ディスクをDynabookに入れる
見出しどおり。
vaioで作成した起動ディスクをDynabookへぶち込む。

###3. BIOSでブートの優先順位を変更
見出しどおり。
BIOSでブート順位を変更して保存。
電源が落ちる。
ちなみにこのDynabook(T350/56BR)はF2。

###4. EaseUS Todo BackupをDVDから起動
優先順位を変更しているので，DVDからEaseUSが起動する。
使えるようになるまで，5分くらい待った気がする…？

###5. SSD接続⇛認識するようにフォーマット
SSDをUSBで接続する。
このままでは認識しないので，認識するように設定してあげる必要がある。
EaseUSからコマンドプロンプトが使えるので，コマンドプロンプトからフォーマットを行った。
**参考サイトではGBTでフォーマットしているが，柏木はMBRでフォーマットしているのでご注意。**

*参考サイトは[こちら](https://www.ikt-s.com/ssd-gpt-format/)。
（EaseUS Todo Backupで認識しない購入直後のSSD/HDDをフォーマット）*

*使用したSSDは[こちら](https://www.amazon.co.jp/dp/B07P6KWL9B/)（Amazon：CFD販売 CSSD-S6B480CG3VX CFD CG3VX シリーズ SATA接続 SSD 480GB）*

###6. SSDクローン作成
いよいよクローンを作成する。
手順通りにやるだけなので説明することはほぼないのだが，
「SSDに最適化」にチェックを入れている。
あとは待つだけ。400GBくらいで12時間ほどかかった…？

*参考サイトは[こちら](https://tarelife.com/easeus-clone-ssd/) 
(【最新版】EaseUS Todo BackupによるクローンSSDの作成方法)*

###7. 換装
いよいよ換装作業。
これが一番楽しくて，わくわくする。
大好きな瞬間。

###8. 起動順位変更
3.でBIOSでブート順をDVD優先にしてしまったので，SSD優先に変更。

###9. 無事換装成功
電源を入れて起動するかチェック。
無事起動，起動が速すぎて恐怖感。
そしてこのPCにはオーバースペックな気もした…けど使えるようになったからOK。

###やったぜ。

#感想
できてよかった。
9.でも書いたけれど，起動が恐ろしいほど速い。
今まで5〜10分待っていただけに，もはやこれで大丈夫なのか？と怖くなってくるくらい。

参考になる方がいらっしゃれば幸いです。
C#で作るBINGO抽選エンジン

## はじめに
気が付けば師走も半ば、世の中は忘年会シーズンですね。
車輪の再々々...発明な本記事ですが、備忘録も兼ねて投稿します。

## 作ったもの
余興などでBINGOを行うための抽選プログラムを作りました。
また、特定の番号を強制当選させたいことがあったため、初期化関数は抽選不可番号をオプションで指定できるようにしました。（BINGOとしては良くない気がする。）
なお、対象のフレームワークは.NET Framework 4.7.2で行いました。LINQが使えれば動く（はず）のでもっと古いバージョンでも大丈夫だと思います。

## 使い方
　以下のように使うことができます。

```c#:Program.cs
BingoEngine engine = new BingoEngine();

engine.Initialize(1, 20, 45);           // 1, 20, 45は当選させないように初期化

while (!engine.IsEmpty)                 // 抽選番号がなくなるまでループ
{
    int number = engine.DrawLottery();  // 抽選

    Console.WriteLine($"Get Number:{number}");
}

// Get Number:47
// Get Number:39
// Get Number:30
// ...
```

## 抽選エンジンの実装
　BINGOの抽選方法については、抽選番号リストにランダムアクセスするという方法もあるのですが、この方法では、当選した番号が再当選しないような仕組みが必要となります。
　そこで、今回は抽選番号リストをランダムに並び替えてしまい、後（あるいは前）から順番に値を読むという方法をとりました。
　実装したクラスBingoEngineを以下に示します。

```c#:BingoEngine.cs
using System;
using System.Collections.Generic;
using System.Linq;

public class BingoEngine
    {
        Queue<int> _numbers;    // 未抽選の番号を保持するキュー
        const int NMAX = 75;    // BINGOの最大番号は75
        const int NMIN = 1;     // BINGOの最小番号は1

        public BingoEngine()
        {
            Initialize();
        }

        /// <summary>
        /// ビンゴエンジンの初期化
        /// </summary>
        /// <param name="avoidNumbers">抽選させない番号</param>
        public void Initialize(params int[] avoidNumbers)
        {
            // キューの初期化
            _numbers = new Queue<int>(NMAX - avoidNumbers.Length);

            // 抽選対象番号をランダムに並び替える
            var init = Enumerable.Range(NMIN, NMAX).Except(avoidNumbers).OrderBy(v => Guid.NewGuid());

            foreach (var number in init)
            {
                _numbers.Enqueue(number);   // キューに番号を順に登録
            }
        }

        /// <summary>
        /// 抽選する
        /// </summary>
        /// <returns>当選番号</returns>
        public int DrawLottery()
        {
            // 例外処理：引くくじが残っていない
            if (_numbers.Count < 1) throw new Exception("Remaining numbers are already Empty.");

            return _numbers.Dequeue();
        }

        /// <summary>
        /// 玉が残っているか
        /// </summary>
        public bool IsEmpty => _numbers.Count < 1;
    }
```

以上です！読んでいただきありがとうございました。
独習C++の勉強メモ_2章の1

基本的な言語機能②についての勉強メモ!
#構造体(struct)
変数のセットを構造体変数として扱えば、新たにすべての変数を定義する必要がないってこと。ドット演算子で**構造体変数から**メンバー変数にアクセスし、アロー演算子で**構造体変数のポインタ変数から**メンバー変数にアクセスする。両者の違いに注意！
メンバー変数の初期化は構造体の定義で書いた順番に行われる。

```C:Structure
struct s_name
{
type1 member1;
type1 member2;
...
}
```

下の一行が何を意味しているかわかればOK

```C:pointer
product* ptr = &pen
```
#共用体(union)
メンバー変数のアドレスが共用されるタイプ。外で一つのメンバー変数の値が書き換えられると、（アドレスを共用してるので、当然）ほかのメンバー変数の中身も変化する。
まじでなんで必要なのか、、今は不明

#列挙体(enum class)
上の２つとは違いメンバー変数を持たない。通常0から開始の整数だが、好きな値に変更することも可能

```C:Enumarator
enum class e_name{
enumerator1,
enumerator2 = value,
}
```

列挙体名と列挙値を::スコープ解決演算子でつなげて使う

```C:use_enum
enum_class_name enum = enum_class_name::value;
```

#練習問題
##１
penをそのまま渡し、渡された先でアドレス演算子でpenのアドレスを取得、その先でpen->idで値を取得すればいい
##2
とばし
##3
（u.x.yは誤植でu.s.yか？）
Sの中まではUnionの影響範囲外なので、xはそのまま
AWSのIPレンジを調べる

AWSのサービスで使用されている、IPアドレスのレンジを調べる。

# 調べ方

```bash
curl -s https://ip-ranges.amazonaws.com/ip-ranges.json |
    jq -r \
        --arg REGION "ap-northeast-1" \
        --arg SERVICE "EC2" \
        '.prefixes[] |
            select(.region == $REGION and .service == $SERVICE) |
            .ip_prefix' |
    sort -n
```

# 参考

- [主要クラウドサービスの公開 IP アドレスレンジ（AWS/Azure/GCP/OracleCloud）](https://qiita.com/y10exxx/items/706b5b510aef07ef7879#amazon-web-serviceaws)
DataSpiderのMapperにおけるjsonスキーマ読み取り方法

DataSpiderでjsonデータを扱いたいとき、Mapperでスキーマを定義します。

#準備するもの
jsonのフォーマットファイル

```ruby:サンプルjsonフォーマット
[
    {
        "id":"1",
        "first_name":"Steven",
        "last_name":"Thompson",
        "email":"sthompson0@spotify.com",
        "gender":"Male",
        "ip_address":"129.167.217.82"
    }
]
```

#出力変数を作成
スクリプト変数を作成します。
プロジェクトエクスプローラの該当スクリプト上で右クリックし、メニュー>新規作成>スクリプト変数 を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102528/44709658-0bb4-f751-531e-cee336f689d2.png)

スクリプト変数のプロパティ画面が表示されるので、設定します。
DataSpiderの変数にはjson型がありませんので、XML型で対応します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102528/3d5bf781-922e-30ba-ffd8-8b85554fe529.png)

今回はjsonデータを出力値として扱いたいため、`スクリプト出力変数として使用する` にチェックをします。

#スキーマ下準備
ツールパレット>ネットワーク>REST から `GET実行`アイコンをキャンバスにドラッグ&ドロップします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102528/108813d1-1b29-0276-f4fc-23b90c559a21.png)

データ形式でJSONを指定し、`JSONファイルを指定して出力スキーマを設定`を開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102528/f4026be9-b817-08c1-1fc7-2443604f92cc.png)

事前に準備しておいたjsonフォーマットファイルを指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102528/fa63ab34-77a3-b394-7618-5c11e8643f50.png)

プロパティ画面を完了すると、キャンバス上に`指定したjsonを出力スキーマに持つGETアイコン`が生成されます。

#Mapperでスキーマを指定
マッピングアイコンを配置し、`End`アイコンに対してドラッグ&ドロップしフローを引きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102528/9055934e-16f3-e2eb-d029-17a7ef5a6189.png)

以下のような画面が表示されるので、`プロセスフローとデータフローを引く`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102528/ff6a7c5b-52fc-c87e-dbaf-abb391c7d5ed.png)

マッピングアイコンを開き、出力データにXML型変数が表示されていることを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102528/ad4e401f-7c90-4a07-4fd5-9ab204e5ac5e.png)

変数上で右クリックをし、メニューより`スキーマを読み込む`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102528/a864c320-1727-2e3c-5b2e-a07ffbbf099a.png)

読み込み画面より`コンポーネントから選択`、下準備で生成したGETアイコン名(コンポーネント名)を指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102528/2d1149b2-07e8-e6ea-be80-fc07ef0a2c55.png)

完了ボタンを押下すると、スキーマが反映されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102528/ca33b306-1551-7c40-4459-419d6c52e3a2.png)


これで指定したjsonスキーマがMapperで扱うことができるので、`array`や`object`を指定したり、データのマッピングをしたりできるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/102528/5d2fa95a-1b96-5a97-d234-166e92715d39.png)


#参考
スキーマについて、以下DataSpider ヘルプにも記載がありますので、併せて確認するといいと思います。
https://www.hulft.com/help/ja-jp/DataSpider/dss42sp3/help/ja/adapter/network/rest_execute_http_get.html#schema
Sassのmixinを用いたレスポンシブ化

#Sassを導入した

CSSにも慣れてきたが
ベタベタのベタ書きがあまりにもひどくて目も当てられず

- どこに何を書いたか分からなくなる
- 同じようなスタイルを繰り返し書いている
- テーマ全体の色味をコントロールしにくい
- とにかく長すぎる

ある程度セクションごとにわけて書いていたが上記のような問題を早めに解決しておきたいと考えてました。

そこでよく聞く**Sass**はどうやらこれらの問題を解決してくれる**今をときめくCSS**だとか。

Sassには「Sass」と「SCSS」の2種類の記法がありますがSCSSの書き方が一般的との事だったので早速取り入れました。

**今回は1番理解が難しかったレスポンシブ化についてフォーカスして書いてみました。**

#mixinで画面状態を保存して使い回す

SCSSの細かい記法は置いておいて

`@mixinでスタイルをあらかじめ作っておいて`
`@includeで呼び出して使いまわせる`

という強力な能力があり
SCSSの入れ子で記述ができるという特徴と組み合わせるとメディアクエリが**簡単かつ可読性の高い作り方ができる**。

↓イメージ↓

```scss:style.scss
@mixin lg {
  //画面サイズがlg以下を意味する記述をする//
}
@mixin md {
  //画面サイズがmd以下を意味する記述をする//
}
@mixin sm {
  //画面サイズがsm以下を意味する記述をする//
}

p{
  color: black;
  @include lg{
    color: red;
    @include md{
      color: blue;
      @include sm{
        color: green;
      }
    }
  }
}
```

これだけの記述で
lgサイズ以上では黒色
lgサイズ以下では赤色
mdサイズ以下では青色
smサイズ以下では緑色
というレスポンシブ化が可能なのです。

#mixinの記述方法

じゃあ肝心のmixin中身はどーすんよって話ですが
まず**キーとブレイクポイントの値からなる変数**を定義します

```scss:style.scss
$breakpoints : (
  "lg":"screen and (max-width:1024px)",
  "md":"screen and (max-width:768px)",
  "sm":"screen and (max-width:480px)"
);
```
これで
`lgのキーは１０２４px以下`
`mdのキーは７６８px以下`
`smのキーは４８０px以下`
と定義付けができました。

一方mixinはどう書くかというと

```scss:style.scss
@mixin mq($breakpoint:md){
  @media #{map-get($breakpoints, $breakpoint)}{
    @content;
  }
}
```

**mqというmixinの引数に上記設定した変数のキーをいれる**ことでメディアクエリの処理をさせる。

まあ＠contentとかmap-getとか、しっかりと理解はしてません。
コピペは強い！
ちなみに引数内の`$breakpoint:md`は引数の初期値をmdに設定するよってもの。

#実際に使ってみる

実際に使うとどうなるか。

```html:index.html
<body>
  <div class="box red">
    <p>1028px以下で丸に変形</p>
    <p>７６８px以下で非表示</p>
  </div>
  <div class="box blue">
    <p>768px以下で拡大</p>
    <p>４８０px以下で非表示</p>
  </div>
  <div class="box green">
    <p>480px以下で縮小</p>
  </div>
</body>
```

上記htmlに対し記述するscssは

```scss:style.scss
.red{
  background-color: red;
  @include mq(lg){
    border-radius: 50%;
    @include mq(){
      display: none;
    }
  }
}
.blue{
  background-color: blue;
  @include mq(){
    height: 400px;
    width: 400px;
    @include mq(sm){
      display: none;
    }
  }
}
.green{
  background-color: green;
  @include mq(sm){
    height: 100px;
    width: 100px;
  }
}
```

結果こんな動きをします。

![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507392/623cc8a3-b85f-1f4c-fb12-68dc18d19bbe.gif)

#結論
**便利！！**

#おわりに
個人的にやりやすいからmax-widthで指定して
〇〇以下の時どうのこうの
のような書き方をしてましたが、
様々なサイトを参考にするとmin-widthを用いてるのが多かったです。
モバイルファーストを意識するなら〇〇以上の時〜の書き方に慣れるべきですね。
Cloud FunctionsでGETリクエストを受けてHello Worldを返す関数をデプロイするメモ

# なにこれ
タイトルの通り。
GCP初めて。
[クイックスタート: gcloud コマンドライン ツールの使用](https://cloud.google.com/functions/docs/quickstart?hl=ja#functions-prepare-environment-go)を参考しながら自分用に削除したり、付け足ししたりしてます。

# 環境準備
1. GCPのプロジェクトを新規で立てる
2. Cloud Shellを起動する
3. Google Cloud SDKを最新に更新する `sudo gcloud components update`
4. Google Cloud SDKのベータ版機能をインストールする `sudo gcloud components install beta`

# Hello World!を返す関数をデプロイする
プログラムはGo言語でサクッと書く。

```go
package functions

import (
	"fmt"
	"net/http"
)

func HelloWorldHTTP(w http.ResponseWriter, r *http.Request) {
	switch r.Method {
	case http.MethodGet:
		fmt.Fprintln(w, "Hello World!")
	default:
		http.Error(w, "Not Allowed", http.StatusMethodNotAllowed)
	}
}
```

コマンドでデプロイする

```
gcloud functions deploy HelloWorldHTTP --runtime go111 --trigger-http
```

関数を新規登録する時には確認有り

```
Allow unauthenticated invocations of new function [HelloWorldHTTP]?
(y/N)?
```

デプロイ完了したら以下が表示される。

```
Deploying.function (may take a while - up to 2 minutes)...done.
availableMemoryMb: 256
entryPoint: HelloWorldHTTP
httpsTrigger:
  url: hogehoge
labels:
  deployment-tool: cli-gcloud
name: projects/hogehoge/locations/us-central1/functions/HelloWorldHTTP
runtime: go111
serviceAccountEmail: hogehoge@appspot.gserviceaccount.com
sourceUploadUrl: hogehoge
status: ACTIVE
timeout: 60s
updateTime: '2019-12-14T15:49:56Z'
versionId: '1'
```

# 動作確認
```
curl -X GET [url]
Hello World!

curl -X POST -d "hoge" [url]
Not Allowed
```

できてるー。

# 所感とか雑多なメモ
- 簡単なAPI作成するのにめっちゃ便利。安いし。[料金のドキュメント](https://cloud.google.com/functions/pricing?hl=ja)
- 2019/12/14時点ではGoのランタイムは1.11が最新っぽい。1.12, 1.13は動かず。[実行環境のドキュメント](https://cloud.google.com/functions/docs/concepts/exec?hl=ja)
- Cloud Shell便利。だけどこいつ何者？
- `asia-northeast1`リージョンにデプロイしたい
- 日本語ドキュメントが全体的にAWSよりわかりやすい気がする。[Cloud Functionsのドキュメント](https://cloud.google.com/functions/docs/?hl=ja)
- コード変更変更してからデプロイまでするフローどうやって管理するんだ？