OmniAICreator/Qiita-1.07M huggingface dataset:
【Nuxt.js】props応用編：コンポーネントに自由にデータを渡そう

# 前置き
Vue.jsとNuxt.jsで便利なpropsを使ってみましょう！
今回は応用編です！
ご意見やご感想、いつでもお待ちしております！

props応用編では
・オプション: validator(ちょっと複雑なため)
・cssの付け替え
をやる予定でしたが、

・cssの付け替え
・props, $emit, eventBusの違い
に変更致しました！

validatorは下記のため、あまり使う機会がなく今回は省きます。
・スペルミスのチェックは、エディターのプラグインで事足りる
・細かい条件指定は、VeeValidateなどライブラリ使う方が良さそう

# propsを使おう！応用編
今回はpropsのStringを使って、cssを自由に付け替えましょう！
buttonの背景を親によって変えてみます。

【表示結果】

![picture_pc_cd8f6c079fa0c27dcd35a811dc88b038.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/da7a51d6-2adb-0cfe-3a36-2b565fe2afae.png)


まずはクラスバインディングの基礎から
https://jp.vuejs.org/v2/guide/class-and-style.html

```vue
<button v-bind:class="{ class名: 真偽値}"></button>
```

classの有無を真偽値によって決めます。
今回はitem-lightクラスで背景を水色にします。

```vue
<button :class="{ 'item-light': itemStatus === 'light' }"></button>
```

item-lightクラスの有無を
itemStatusが文字列lightと完全一致するか否かで判断しています。

文字列lightであることが分かるよう、
シングルクォーテーションで囲みます。
こうしないと、methodsとかプロパティでlightを探してしまいます。
「は？せっかく探したのにないやんけ！！！😡」
とエラーで怒られてしまいます。ぷんぷん。

また、クラス名は2単語以上の場合
シングルクォーテーションで囲みます。

基礎でpropsは空箱なような物と書きました。
今回も考え方は同じです。
itemStatusという空箱にlightという文字列が入ったら、
item-lightクラスをつけるイメージです！

こんがらがったら基礎に戻りましょう！😀

【コード】

```Component.vue

Component.vue // 子コンポーネント
<template>
 <div class="component">
   <button
   　:class="{ 'item-light': itemStatus === 'light' }"
   >
     <p>Hello Nuxt.js!</p>
   </button>
 </div>
</template>

<script>
export default {
 props: {
   itemStatus: {
     type: String,
   }
 },
}
</script>

<style lang="scss">
 .component {
   button {
     padding: 10px;
     border: 1px solid #94E4EE;
     border-radius: 8px;
     &.item-light {
       background-color: #94E4EE;
     }
     p {
       font-size: 36px;
     }
   }
 }
</style>
```

```index.vue
index.vue // 親ページ
<template>
 <div class="container">
   <Component />
   <Component
     item-status="light" // itemStatusが文字列lightと一致する
   />
 </div>
</template>

<script>
import Component from '~/components/Component.vue'

export default {
 components: {
   Component
 }
}
</script>

<style lang="scss">
  .container {
   padding: 20px;
   display: flex;
   .component {
     margin-right: 20px;
   }
 }
</style>
```

これで背景の変化が確認できたと思います😄
ここまでできればpropsはもう使えますね✨👏

ちなみにキャメルケースで
:itemStatus="light"と書いても反映はされますが、
「書き方が汚い！！！😡」と言われてしまいます。。。
ケバブケースで書きましょう！

それから、Stringを直接渡す時はコロンはいりません。
:item-status="light"
にしてしまうと、
「lightって変数どこ？ないじゃん😢もう知らない😢」
とそっぽを向かれます笑

# props, $emit, eventBusの違い
コンポーネントの親子間でのやりとりに使われるこの3つ。
propsのまとめと、それぞれの違いを簡単に説明します！
簡単に、なので雰囲気が分かればOKです。
具体的な使い方などはそれぞれの記事で解説します。

ちなみにpropsとslotの違いについては
props基礎編をご覧ください！

**props**
親 → 子
子は空箱、親が自由にデータを入れることができるイメージです。
基礎と今回の応用をやれば◎
**emit**
子→ 親
通常は子から親にデータを伝えることができません。
それをemitを使ったカスタムイベントで親になんとか気づいてもらいます！
**eventBus**
子 → 子
ですが使用例をほとんど見たことがありません。
基本的にvuexというライブラリを使えば解決します！

**vuex**…データ保存ができるもの
ログイン情報がページ遷移しても保持されるとか、
APIのデータ引っ張ってきて保存とか、
まれにmethodsに何度も同じ処理かかなくても1回で済むとか！


ということで、次回は$emit基礎編です！
LINE Payのオンライン決済を実装する前に知りたかったハマりどころ

LINE Payのオンライン決済を実装する機会があったので主なハマりどころを共有します。

# Transaction IDが丸められる
決済要求のためにRequest APIを呼ぶ必要があるのですが、このAPIから返ってくるTransaction IDは19桁の数値で返ってきます。
> 決済要求の結果として受け取った取引番号(19桁)
> https://pay.line.me/documents/online_v3_ja.html#confirm-api

19桁の巨大な数値なので、そのまま受け取ってしまうと丸められてしまう可能性があります。
その後のConfirm APIにTransaction IDを渡す必要があるのですが、丸められていると当然違う値なので「決済要求情報が存在しません。」となり決済が出来ません。
丸められていることに気づくまでかなりの時間を要しました。文字列で返すなどアップデートで対応してほしいところです。

JavaScriptで書かれたLINE Payのライブラリがあるのですが、こちらではlossless-jsonを利用してこの問題に対応しているようです。
https://github.com/nkjm/line-pay

# 自動決済キー(RegKey)の有効期限がわからない
サブスクリプション等のユーザーの操作を必要としない決済を実現するには自動決済キー(RegKey)を取得する必要があります。

このRegKeyには有効期限があります。
有効かチェックするAPIはありますが有効期限を知る手段はありません。
また有効期限の詳細についてはドキュメントには書いて無いので問い合わせる必要があります。

> RegKeyには有効期限があります。詳細についてはお問い合わせください。 
> https://pay.line.me/documents/online_v3_ja.html#0de93db440

問い合わせたところ

- 最後の決済から180日間でexpireされる
- ユーザは設定画面からexpireできる

という仕様らしいです。

またsandbox環境では有効期限が1日に設定されているようなのでこれにも注意が必要です。

# Sandbox環境ではLINEアプリ内の決済が使えない
LINE Payを実装するのにSandbox環境でまず試すケースがほとんどだと思うのですが、環境によって挙動が変わるので注意が必要です。

LINE Payの決済はWebで決済を行うか、LINEのアプリで決済を行うか選択が出来ますが、Sandbox環境ではLINEアプリ内の決済が利用できません。
ドキュメントにも書いていないと思うのでわからなかったですが、問い合わせした時に使えないとの回答をいただきました。
Sandbox環境ではWebの決済を利用するか、テスト加盟店環境を利用する必要があります。

# Sandbox環境と他の環境の挙動が違う
LINE PayのはLINEのアプリ内にサービスを開発できるLIFF(LINE Front-end Framework)を使って実装していました。

Sandbox環境はWebシミュレーターとして実装されているそうなのでLIFFでの決済画面はそのままWebの遷移となります。
しかし、Sandbox以外の環境ではLINEのアプリ内にモーダルが立ち上がり決済画面が出ます。
決済後にRequest APIのredirectUrls.confirmUrlに設定したURLにリダイレクトするのですが、これは外部のブラウザで開かれます。


LIFFはLINEのアプリ内のブラウザで完結するのでUXが良いと思っていましたが、LINE Payを使う場合は決済終了後にアプリから離脱するのは避けられないようです


# 1秒間隔のAPIリクエスト推奨


Check Payment Status APIは1秒間隔で呼び出すことが推奨されています。

> Check Payment Status APIのリクエスト頻度は1秒を推奨します。 
> https://pay.line.me/documents/online_v3_ja.html#check-payment-status-api

問い合わせで聞いたところでは自動決済を行うPay Preapproved APIも1秒間隔で呼び出すことが推奨されているようです。
リソースの関係でとのことですが、1秒間隔ということはもし10,000ユーザーの課金を処理しようとすると
最低でも10000秒なので2.8時間ほどかかる計算になります。ユーザー数が多いサービスには向かない決済なのかもしれませんね。。


# まとめ
LINE Payはドキュメントに書かれていないことが結構あります
また環境ごとの動作が違うのでsandboxだけで技術検証するのは避けたほうが良いです。

サポートは充実しているのでわからないことはすぐに問い合わせましょう。
https://pay.line.me/jp/developers/techsupport/sandbox/contact?locale=ja_JP
TerraformでElasticCacheを立ち上げてEC2から疎通確認する

運用しているプロダクトでキャッシュをしたい場面があり、ElasticCache(Redis)を導入したのでメモ的に残します。

# 前提
- AWS CLI設定済み
- Terraform設定済み

# 公式ドキュメント
- [Terraform](https://www.terraform.io/docs/providers/aws/r/elasticache_cluster.html)
- [EC2からElasticCacheに接続](https://docs.aws.amazon.com/ja_jp/AmazonElastiCache/latest/red-ug/nodes-connecting.html)

# TerraformでElasticCacheを立ち上げる
Elastic CacheのクラスタをTerraformで作ります。

```elastic-cache.tf
provider "aws" {
  profile    = "default"
  region     = "ap-northeast-1"
}

resource "aws_elasticache_cluster" "redis-test" {
  cluster_id           = "your-redis-cache-name"
  engine               = "redis"
  node_type            = "cache.t2.micro"
  num_cache_nodes      = 1
  parameter_group_name = "default.redis5.0"
  engine_version       = "5.0.5"
  port                 = 6379
  security_group_ids   = ["your-sg-name"]
}
```
各種名前は読み替えてください。セキュリティグループはElasticCacheを使用するリソースと同じセキュリティグループのIDを指定します。今回はEC2から使用するので、EC2が使用しているセキュリティグループのIDを指定します。

次はこのテンプレートを使ってリソースを作ります。

- 作られるリソースを確認

```shell-session
$ terraform plan 
```

- 実際にリソースを作成

```shell_session
$ terraform apply
```
コマンドを実行すると実際にリソースを作るか`yes/no`で聞かれるので、よければ`yes`を入力します。数分するとリソースが作られます。

# EC2からRedisに疎通確認
次にEC2にsshで接続して、Redisにアクセスしてみます。

### セキュリティグループの設定

Redisアクセス用にポートを開けます。

![Screen Shot 2019-11-26 at 21.10.22 copy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259782/40f442e3-875a-ee66-f5ba-a6db4c2cf1e2.png)

### EC2にRedisCLIをインストール

- Redis CLIをインストールするためにパッケージをダウンロードします。確認のプロンプトが表示されるので"y"を入力します。

```
$ sudo yum install gcc
```

- redis-cli ユーティリティをダウンロードし、コンパイルします。

```
$ wget http://download.redis.io/redis-stable.tar.gz
$ tar xvzf redis-stable.tar.gz
$ cd redis-stable
$ make
```

### Redis CLIへログイン
- 下記コマンドをElasticCacheのノードのエンドポイントに置き換えて実行します。

```
$ ~/redis-stable/src/redis-cli -c -h mycachecluster.eaogs8.0001.usw2.cache.amazonaws.com -p 6379
```

- 正しく設定できていればRedis CLIに入れるはずです。

```
redis mycachecluster.eaogs8.0001.usw2.cache.amazonaws.com 6379>
```
T-SQL: UNICODEへの変換

# SAMPLE
次のような特殊文字の文字コードを特定してUNICODEに変換する。
Rāmen

# T-SQL
```SQL
DECLARE @str NCHAR(10) = N'Rāmen';  
SELECT UNICODE(SUBSTRING(@str,2,1)), NCHAR(UNICODE(SUBSTRING(@str,2,1)))
```
結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51324/19af8121-05bb-ef79-d038-d9db734d9dab.png)
【IFTTT】IFTTTでTrelloとChatworkを連携してみた

#【IFTTT】IFTTTでTrelloとChatworkを連携してみた

##IFTTTとは

![0.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275273/9af55c09-8f36-458c-b571-55e92fe63473.png)

IFTTTは、異なるサービス同士を連携させることができるWebサービスです。
「IF This Then That」の頭文字をとって「IFTTT」です。「イフト」と読むらしいです。

「もし◯◯を△△したら、●●で▲▲する」みたいな感じですね。
例えば、「Twitterで呟きを投稿したら、ChatworkにTwitterのリンクを投稿」なんてことができるわけです。

##今回やること

もし、「[Trello](https://trello.com/)」で特定のボードにカード(タスク)を追加したら、
「[Chatwork](https://go.chatwork.com/ja/index.html)」の特定のルームへカードの内容を投稿する。

そういう風に、私はなりたい。

##IFTTTの登録方法

こちら(https://ifttt.com/)から登録できます。
登録面倒なので今回は、Googleアカウントでログイン(認証)を行いました。
<img width="1430" alt="001.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275273/898ee544-d989-8c60-2bc9-267d4847cd94.png">
<img width="1427" alt="002.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275273/55167523-b9f3-2e3b-e749-766aeaa1b0fe.png">
ログイン後、邪魔なバナーを右上の「×」をクリックして閉じます。

##アプレットの作成

プロフィールアイコンをクリック→「Create」をクリックすると、画像のようなページへ遷移しますので、
「+This」をクリックしましょう。
<img width="1438" alt="003.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275273/087abf65-08e8-354b-1ba8-e9ce15acaaa9.png">
様々なWebサービスが表示されますが、検索フォームに「Trello」と入力しましょう。
するとTrelloアイコンが表示されますのでクリック。
<img width="1425" alt="004.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275273/819b74d1-05a4-e375-dc8e-89a4ef05f312.png">
「Connect」をクリック
<img width="1439" alt="005.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275273/45aceb41-0463-e0d8-f117-f19d7cad61c9.png">
「ログイン」、「Allow」をクリック。途中、Trelloのログインを促された際、Googleアカウントでログインしました。
<img width="1429" alt="006.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275273/533adae9-f40c-5adb-fbac-58e1189c485c.png">
<img width="1437" alt="007.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275273/0a1dbdbc-30c2-8dcb-d0ee-a42273302b74.png">
今回は「Trelloにカードを追加したら」というトリガーを作成したいので、緑枠をクリック
<img width="1438" alt="008.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275273/611f07d5-0f49-37ea-51a2-211d61001aa2.png">
対象のグループ、ボードを選択して「Create Trigger」をクリック
<img width="1439" alt="009.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275273/b714e9fb-90f6-f52c-60a4-5b09b310a318.png">
「+That」をクリック。
フォームに「chatwork」を入力してアイコンをクリック
<img width="1437" alt="010.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275273/b0fa5cb6-c024-f2a9-01f2-88fc62e23b9f.png">
<img width="1436" alt="011.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275273/593e071d-a31b-2d7a-a218-7dbb37d03a46.png">
Chatworkの認証ページが開くので、認証を通す
トリガーが発動したら「Chatworkへ投稿」をしたいので対象の動作をクリック
<img width="1437" alt="012.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275273/77bd7f98-05fb-a63e-b0f3-720906aa48a5.png">
「message」に以下の内容を入力しました。

```
[info][title]{{Title}} : 作成者: {{CreatorFullName}} - {{CreatorUsername}}[/title][To:xxxxxxxx]{{CardURL}}[/info]
```

入力し終わったら保存して完了。
Raspberry PiによるSOS発報システム その1 ～システム概要

#もくじ
その1 ～システム概要 ←本記事です
[その2 ～GPIOを利用したスイッチの状態検知](https://qiita.com/maitech/items/d63a77dea72355f142b5)
[その3 ～アルゴリズム設計](https://qiita.com/maitech/items/f44eb0652fdb268eb9d0)
[その4 ～ハードウェアの準備](https://qiita.com/maitech/items/58a1dc2aab50afe9c5ab)
[その5 ～自動メール送信でハマる](https://qiita.com/maitech/items/9cda9861fd59453fd66e)
[その6 ～キャリアグレードNAT下の端末に外部からSSHでアクセスする](https://qiita.com/maitech/items/b51abd1d78588acf3607)
[その7 ～総括](https://qiita.com/maitech/items/4864a1ddf991f48d728d)

#はじめに
こんにちは。
エンジニア...とはいっても機械系エンジニアのmaitechと申します。

プログラミングに関してはズブの素人ですが，過去にプラレールというおもちゃをラズパイでラジコン化したときにラズパイの大きな可能性に感銘を受け，せっかくならもっと誰かのためになるものを作りたいと思い，今回「Raspberry PiによるSOS発報システム」というものを作った次第です。

これは，遠く離れた誰か...例えば一人暮らしの高齢者宅にSOSボタンを設置し，そのボタンが押されると他の誰かに連絡がいくというシステムです。

具体的には，母が田舎で一人暮らしをしている妻の実家にボタンを設置し，そのボタンが押された際に私と妻のスマホにメールが飛ぶというシステムを作りましたので，まずは自分のための備忘録として記事にしてみようと思います。
（これから書いていく記事がQiitaの記事として適切かどうかという点については一抹の不安がありますが...）

#実現する機能・要件

- 宅内に複数設置されたSOSボタンが押されたときに，SOSボタンが押された場所（脱衣所，トイレ，台所，etc.）と緊急連絡先等の情報をあらかじめ設定された宛先にメールで送信する
- 12時間ごとにドア（玄関，トイレ，冷蔵庫，etc.）が開かれた回数をあらかじめ設定された宛先にメールで送信する（システムの動作確認を兼ねる）
- 遠隔地からソフトウェアのメンテナンスが可能

#システムの全体構成
システムの全体構成は下図の通りです。
Home Aは私の自宅，Home Bは妻の実家となります。
![Schematics of the system](https://i.imgur.com/AcQRzjb.png)
システムの核はRaspberry Pi Zero WHで，スイッチの状態検出にはGPIOを使用します。

当然ながらメールの送信にはシステムをインターネットに接続する必要がありますが，妻の実家には現時点ではネット環境がないので，格安Simを使って接続することにしました。

Simは[ロケットモバイル](https://rokemoba.com/)の神プラン（通信速度制限200kbps，通信量無制限で月額298円）で，LTEルーターとしてはNECの[Aterm HT100LN](https://www.aterm.jp/product/atermstation/product/mobile/ht100ln/)を準備しました。

このルータにグローバルIPアドレスが割り当てられれば，あとはDDNSを使うなり，IPアドレスをメール通知するなりすれば外部からのアクセスは容易なのですが，当該SimではキャリアグレードNAT下でネットに接続されるようで，外部からアクセスするのはそう簡単な話ではなさそうです...。

#課題
とまぁ開発初期段階ではこんな状況だったわけですが，私のスキルレベルで課題となったのは

- ドアスイッチやSOSボタンスイッチの回路構成と状態検出
- ラズパイからの自動メール送信
- キャリアNAT下にあるシステムへの外部からのSSH接続

というところで，この辺の内容も含めて[その2](https://qiita.com/maitech/items/d63a77dea72355f142b5)以降の記事にしようかと考えています。
URL のクエリー文字列の操作？URLSearchParamsの使い方


# クエリ文字列（URLパラメーター）とは？

`クエリ文字列（URLパラメーター）`とは、**サーバーに情報を送るためにURLの末尾につけ足す文字列（変数）**のこと。`「?」をURLの末尾につけ`、その次に「パラメーター＝値」をつけ、複数のパラメーターをつけたい場合は「&」を使用します。この形式で、サーバーに送信したいデータをURLにつけ加えることが可能。

基本のURLが

```
https:// ○△×□.jp/
```

だとして、基本のURLに**クエリ文字列（URLパラメーター）**を加えると

```
https:// ○△×□.jp/?●=▲×■&○=△×□
```

 

下のURLの`?●=▲×■&○=△×□`の部分が、**クエリ文字列（URLパラメーター）**です。


# `URLSearchParams` とは

`URLSearchParams`インターフェイスは URL のクエリー文字列の操作に役立つメソッドを定義します。

### URLSearchParams.append()

URLSearchParams インターフェイスの append() メソッドは、指定されたキー/値のペアを新しい検索パラメーターとして追加します。

```index.js
URLSearchParams.append(name, value) //基本構文
```

```index.js

const data = new URLSearchParams();
data.append('name', categoryName); // name: categoryName

```




## 参考

[URLSearchParams](https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams)
データポータルで可視化する時は「縦に日付が並んでたらイケル」みたい

このタイトルで伝わると思えないのだけれど、なんて表現したらいいのかわからない...

# 前提

- データポータルで可視化したい
- データソースがGoogleスプレッドシート
- 時系列に変化の推移を表現したい


# やりたいこと

2019年が終わろうとしています。この時期に「1年のまとめ」みたいのするじゃないですか。
その際に、例えばこういうスプレッドシートの表があったとします。

![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/6ff99d42-9ec3-9f65-c63f-d31486f100d6.png)

↓ こんな感じでグラフ化したくなるじゃないですか。データポータルで。

![002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/6778d7f9-0317-ad52-e5e9-6237ac696c99.png)


データポータルをよく知らない人はこちらをどうぞ！

- [Googleデータポータルを使ってデータを可視化する \(非エンジニア向けレクチャ\) \-その1 \- Qiita](https://qiita.com/sakaimo/items/9d35dae13c3b0331463d)
- [Googleデータポータルを使ってデータを可視化する \(非エンジニア向けレクチャ\) \-その2 \- Qiita](https://qiita.com/sakaimo/items/e64481813f238f30d373)

# このままだと上手くいかない例

![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/6ff99d42-9ec3-9f65-c63f-d31486f100d6.png)

のシートをそのままデータポータルとつなぐと、フィールド設定が下記のようになります。

![003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/a21ac0ba-1d68-bbb4-d2ef-f7463b5e171f.png)

このままグラフにしてみると、↓こんな感じでよくわからないグラフになります。

![004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/919de549-fd18-122f-1d9a-5b18ba2d440a.png)

(補足: このままでも意図したグラフがかけるよ！という方法があったら是非教えてほしいです！！)


# 基本は日付順に並べる、だよね？

データポータルのデータソースにスプレッドシートを使う場合、「1行ごとに1つのデータとしてまとめておく」のが基本だと思います。どういうことかと言うと

↓ この表じゃなくて、
![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/6ff99d42-9ec3-9f65-c63f-d31486f100d6.png)

↓ データポータルとつなぐにはこういう表にするのが基本だと思ってます。**1行に全て(期間、項目名、値)の情報が含まれる形**
![005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/1fbdcb8b-1c7f-54cf-82af-72124e250ed1.png)


↓ これだと意図したグラフが出ました！
![006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/67c41f11-73c8-c772-efd6-74705bf9c4dd.png)


**ただしこれって「表の変換」が面倒くさいよね。**


# 試しにtransposeしたらできちゃった

`シート41` というのが
![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/6ff99d42-9ec3-9f65-c63f-d31486f100d6.png)
だと思ってください。

別シートで↑この表を `transpose` します。(行列を入れ替えてくれる)
![007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/00167680-e595-7357-8dcd-80419edefeff.png)

わたし、↑この表じゃデータポータルに接続しても意図したようなグラフが出ないと思ってたんです。

↓ でも、そのままデータポータルに繋いだらグラフ化できちゃいました。

![009.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/44b5f7dc-0e0c-8f62-8caf-c532a7167af0.png)



ということを伝えたくて、タイトルが `データポータルで可視化する時は「縦に日付が並んでたらイケル」みたい` になりました。

**ナイスポータル！**
terraformerをmaster accountからassume roleでアクセス＆MFA必須なAWS環境で使う

# TL:DR

- AWSではMaster AccountにIAM Userでログインし、他のアカウント(OU)へアクセスできる権限をもったRoleへSwitch/AssumeRoleして必要な作業を行うケースが多いです。
- ポリシーとしてSwitch/AssumeRoleの際に、"MFAが有効化"されていることを必須としていることも多いです。
- 上記環境にてSwitch/AssumeRole先の情報をterraformerで引っ張る場合、AssumeRoleとMFAへの対応を行う必要があります。
- STSのToken管理はaws-vaultにお任せ。aws-vaultでAssumeRoleとMFA対応をします。
- なので実態としては、aws-vaultでterraformerをAssumeRole&MFA対応させるお話です。


# aws-vaultでterraformerをAssumeRole&MFA対応させる

aws-vault
https://github.com/99designs/aws-vault

terraformer
https://github.com/GoogleCloudPlatform/terraformer

## terraformerのインストール

リポジトリのREADMEにある[この辺](https://github.com/GoogleCloudPlatform/terraformer#installation)を参考にどうぞ。

```:今回はhomebrewで
brew install terraformer
```

## aws-vaultでMFAするための設定

- 事前に必要なもの
  - terraformerが利用するMaster Account上のIAM UserのAccess KeyとSecrets(A)
  - (A)に紐付いたMFAデバイスのARN(B)
      - こういうやつ → arn:aws:iam::xxxxxxxxxxxx:mfa/yourIAM
  - (A)からAssume/SwitchRole可能なRoleのARN(C)
      - こういうやつ → arn:aws:iam::xxxxxxxxxxxx:role/hoge-prov


- aws-vaultで使うprofile追加

```
$ aws-vault add hoge-prov
※Access KeyとSecretsを聞かれるので(A)を登録する
```

- profileに下記を登録する
    - MFAデバイスのARN(B)
    - AssumeRoleするRoleのARN(C)

```:~/.aws/config
~(snip)~

[profile hoge-prov] ← 先程追加したprofileの項
mfa_serial = arn:aws:iam::xxxxxxxxxxxx:mfa/yourIAM ←ここに(B)を登録する
role_arn = arn:aws:iam::xxxxxxxxxxxx:role/hoge-prov ←ここに(C)を登録する
```

## aws-vaultでMFAしつつterraformer importを実行してみる

```
$ aws-vault exec hoge-prov -- terraformer import aws --resources=s3 --regions=ap-northeast-1
Enter token for arn:aws:iam::xxxxxxxxxxxx:mfa/yourIAM: 
※^ MFAデバイスのTokenを入力してあげましょう

以下実行結果
2019/12/26 16:26:24 aws importing region ap-northeast-1
2019/12/26 16:26:24 aws importing... s3
2019/12/26 16:26:30 Refreshing state... aws_s3_bucket_policy.xxxx
2019/12/26 16:26:30 Refreshing state... aws_s3_bucket.xxxx
2019/12/26 16:26:31 aws Connecting.... 
2019/12/26 16:26:31 aws save s3
2019/12/26 16:26:31 aws save tfstate for s3

```

こんな感じにterraformerでのimport対象リソースのtfが **./generated** 以下に生成されていればok
![Screen Shot 2019-12-26 at 18.17.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14859/ba1f9f83-2bba-fe95-cc70-6c7153084089.png)


## terraformerの処理に時間がかかりすぎてセッション切れしちゃう場合

execの下記オプションでセッションの有効期限を変更できるようなのでお試しあれ

```
$ aws-vault exec --help
~(snip)~

  -t, --session-ttl=4h           Expiration time for aws session
      --assume-role-ttl=15m      Expiration time for aws assumed role

~(snip)~
```
GitHubでbranchの差分を確認する

## TL;DR
GitHubのbranchを比較したいと思ったら、`https://github.com/:orgName/:repoName/compare/:branchName1...:branchName2`とURLに打てば良い。commitとfileの変更差分を表示できる。

## 例
Reactのリポジトリのブランチを比較したい場合は以下のURLを叩けば良い。

`https://github.com/facebook/react/compare/master...0.8-stable`

![スクリーンショット 2019-12-26 18.22.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192435/14601862-4428-10a5-32cb-0976fb558238.png)
brew caskでVirtualBoxとVagrantをインストールしたらVagrantのバージョン対応でハマった

## 環境

| 項目       | バージョン            |
| ---------- | --------------------- |
| OS         | mac OS Mojave 10.14.6 |
| VirtualBox | 6.1.0,135406          |
| Vagrant    | 2.2.6                 |

## 事象

`vagrant up` 時、以下のエラーが発生。

```
No usable default provider could be found for your system.

Vagrant relies on interactions with 3rd party systems, known as
"providers", to provide Vagrant with resources to run development
environments. Examples are VirtualBox, VMware, Hyper-V.

The easiest solution to this message is to install VirtualBox, which
is available for free on all major platforms.

If you believe you already have a provider available, make sure it
is properly installed and configured. You can see more details about
why a particular provider isn't working by forcing usage with
`vagrant up --provider=PROVIDER`, which should give you a more specific
error message for that particular provider.
```

## 原因

2019/12/26現在、VagrantがVirtualBoxの最新バージョン6.1に対応していなかったため。

以下のコマンドで対応バージョンを確認しました。

```bash
$ vagrant up --provider=virtualbox
```

コマンド実行結果。

```
The provider 'virtualbox' that was requested to back the machine
'default' is reporting that it isn't usable on this system. The
reason is shown below:

Vagrant has detected that you have a version of VirtualBox installed
that is not supported by this version of Vagrant. Please install one of
the supported versions listed below to use Vagrant:

4.0, 4.1, 4.2, 4.3, 5.0, 5.1, 5.2, 6.0

A Vagrant update may also be available that adds support for the version
you specified. Please check www.vagrantup.com/downloads.html to download
the latest version.
```

## 解決法

### 方法1. Vagrantのファイルを編集

Vagrantのファイルを編集して、VirtualBox 6.1をproviderとして認識させます。

[[Mac] Vagrant 2.2.6 と Virtualbox 6.1でうまくvagrant up ができなかった時の対処法 - Qiita](https://qiita.com/shuu1222/items/7a6d04172363be44025c)

### 方法2. VirtualBoxのダウングレード

VirtualBoxを、Vagrantが対応するバージョンにダウングレードします。
今回は6.0にダウングレードしました。

1. brew caskでインストールしたVirtualBoxをアンインストール

    ```bash
    $ brew cask uninstall virtualbox
    ```

2. [VirtualBox公式サイト](https://www.virtualbox.org/)の[VirtualBox older builds](https://www.virtualbox.org/wiki/Downloads)からバージョン6.0のdmgファイルをダウンロードし、インストール

※brew caskでバージョンを指定してインストールする方法もありますが、 `brew cask upgrade` すると問題が再発します。

- 参考URL
  - [Homebrew Caskでインストールしたアプリをダウングレードする - Qiita](https://qiita.com/toranoko0518/items/9c90e1d0710915e42ae9)
  - [homebrew caskで任意のバージョンのアプリケーションをインストールする・ダウングレードする - 惰力飛行](https://livingdead0812.hatenablog.com/entry/20181203/1543810264)

## 終わりに

今回はVagrant側のファイル修正で対処可能でしたが、今後対処できなくなるとも限りません。
依存するアプリケーションがあり、バージョンを固定する必要がある場合は `brew cask` を使わない方が良さそうですね。勉強になりました。
【Python】文まとめ【try, del, assert, yield, raise, pass】

# はじめに
知っているようで全ては知らない，しかし使えると便利なPythonの「文（statement）」をまとめます．

#単純文と複合文
Pythonには二種類の「文」があります．

## 複合文（compound statement）
`if`文，`while`文，`for`文等の文中に他の文などを入れることができる文を**複合文**と呼びます．

```python:example
n=3
if n==3:
    print('Yes')  # 複合文中ではインデントを下げる
else:
    print('No')
```

複合文には`if`文などの他にも，`class`文，`def`文，`with`文，`try`文などがあります．今回は，複合文は`try`文について扱います．

### try (except)

「このコードを実行するとバグが起きるかもしれないから，バグが起きたときだけ例外として処理したい...」のような場合，`try`文と`except`文が便利です．使い方は以下の通りです．

```python:how_to_use
try:
    例外が発生するかもしれないが実行したい処理
except 例外名:
    例外発生時に行う処理
```

ここの`例外名`とは`TypeError`や`ZeroDivisionError`を指します．
例外名一覧は[Pythonの公式ドキュメント]("https://docs.python.org/ja/3/library/exceptions.html")をご参照ください．以下に具体例を示します．


```python:example
x = 3
y = 0
 
try:
    z = x / y
except ZeroDivisionError:
    print('ZeroDivisionError!')
```

## 単純文（simple statement）
複合文と異なり一行で終わるような文を**単純文**と言います．有名な単純文には`import`文や`break`文，`continue`文などがあります．以下にいくつかのあまり有名ではない（個人差有り）単純文を解説します．

### del
del文はオブジェクトを削除します．使い方と具体例を以下に示します．

```python:how_to_use
del オブジェクト
```

```python:example
n = 3
del n
print(n)  # エラー
```


### assert
`assert`文は条件式がFalseのときに例外を返す文です．使い方と具体例を以下に示します．

```python:how_to_use
assert 条件式
```

```python:example
n1 = 1
n2 = 2
assert n1==n2 'Error'
```

### return
`return`文は関数の処理を終了し，値を返す文です．使い方と具体例を以下に示します．

```python:how_to_use
return オブジェクト
```

```python:example
def test_func():
    return 'Hello!'

print(test_func)  # Hello!
```


### yield
`yield`文は`return`文と同様に値を返しますが，関数の処理を一度止めるだけで終了させないのが特徴です．
また，`yield`は基本的に関数内，それも`for`文や`while`文内で使われ，ジェネレータを生成します．最近だと機械学習でミニバッチとしてデータをいくつか取り出すときに使われることもあるのではないでしょうか．使い方と具体例を以下に示します．

```python:how_to_use
yield オブジェクト
```

```python:example
def return_test():
    return 'return_1'
    return 'return_2'

def yield_test():
    yield 'yield_1'
    yield 'yield_2'

print(return_test())
# return_1

print(yield_test())
# <generator object yield_test at 0x10716cbd0>

for item in yield_test():
    print(item)
# yield_1
# yield_2
```

### raise
`raise`文は自作のエラーを発生させることができます．例外を意図的に発生させたい場合に使います．使い方と具体例を以下に示します．

```python:how_to_use
raise 例外クラス(メッセージ):
```

```python:example
def raise_test(num):
    if type(num)!=int:
        raise TypeError('エラー')
    return num * 10

print(raise_test(10))
# 100
print(raise_test('a'))
# TypeError: エラー
```

### pass

pass文は何もしません．何もしない関数が必要な場合や，後で機能を追加するためにとりあえず関数の形だけ必要な場合は`pass`文が活躍します．具体例を以下に示します．

```python:example
def f():
    pass

print(f())
# 何も表示されない
```

# さいごに
閲覧ありがとうございました。間違い等があればご指摘いただけたら嬉しいです。
Android開発メモ

# Android Studio
## ショートカット
インデント整形

```
Command + Option + L
```
不要インポート削除

```
Control + Option + O
```
行複製

```
Command + D
```
### カスタム
**開いているファイルの選択**（XcodeのCommand + Shift + J）
Keymap > Other > Select in Project View にショートカットを割り振り。

**削除周りのショートカット設定**
Keymap > Editor Actions > Backspace, Deleteにショートカットを割り振り。

**ワンクリックでファイルを開く設定**
プロジェクトツールウィンドウの設定アイコン > Autoscroll to Sourceにチェックを入れる。

# Kotlin
## Swiftの対応表
guard let

```kotlin
if (num == 0) return
```
```kotlin
val num = nulable ?: return
```

# Date周り
java.util.dateの理解
https://engineer-club.jp/java-date
java.timeの理解
https://qiita.com/tag1216/items/91a471b33f383981bfaa

## 月末・月初の取得

```kotlin
val yearMonth: YearMonth = YearMonth.from(LocalDate.now()) // YearMonth.now() でもいける
val start = yearMonth.atDay(1)
val end = yearMonth.atEndOfMonth()
```

### endOfDay

```kotlin
LocalDateTime.now().with(LocalTime.MAX)
LocalDate.now().atTime(LocalTime.MAX)
```

## Date - LocalDateの変換
AndroidではAPI26以降じゃないといろいろと使えないメソッドが多い。

### LocalDate from Date
https://stackoverflow.com/a/31453385
https://developer.android.com/reference/java/util/Date.html#toInstant()

```kotlin
val date: Date = Date()
val localDate: LocalDate = Instant.ofEpochMilli(date.time).atZone(ZoneId.systemDefault()).toLocalDate()

// toInstant()を使ってもできそうだけど、API26以降しか使えないので
date.toInstant().atZone(ZoneId.systemDefault()).toLocalDate() // API26以上
```

### Date from LocalDate
https://stackoverflow.com/questions/23944370/how-to-get-milliseconds-from-localdatetime-in-java-8
https://developer.android.com/reference/java/util/Date.html#from(java.time.Instant)

```kotlin
val date: Date = Date(localDate.atStartOfDay(ZoneId.systemDefault()).toInstant().toEpochMilli())
```

## ローカライズを意識したフォーマット
年と月だけを表示したい。国によって表示順もちゃんとしたいとき。

```kotlin
val yearMonthText = DateUtils.formatDateTime(this, System.currentTimeMillis(), DateUtils.FORMAT_SHOW_YEAR or DateUtils.FORMAT_NO_MONTH_DAY)
// January 2020
// 2020年1月
```

# 画面遷移周り
戻るボタン実装してて、以下のようにマニフェストに親を指定して戻ってたら、戻るたびにonCreateが呼び出されて変な挙動になった。注意する。

```kotlin
supportActionBar?.setDisplayHomeAsUpEnabled(true)
supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_close)
```

```xml
<activity android:name=".SubActivity"
     android:parentActivityName=".MainActivity" />
```
SPSS Modeler で入力ノードの設定を一括変更

SPSS Modeler で作業をしている際、入力ファイルが多数ある場合に、ひとつひとつのノードを開いて、区切り文字や改行やエンコードなどを設定するのが面倒になることがあります。


全ての入力ノードに同じ設定をするなら、一括で設定できたらいいのにと思い、Pythonスクリプトで一括変更することにしました。

# 手順

１．ツール > ストリームのプロパティー > 実行をクリックします。
　　　![選択画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305774/c1b5a3d7-7f90-2e36-c4d1-5dcbc50687c3.png)

２．スクリプトの設定画面が開きます。青い網掛け部分にPythonスクリプトを書くことができます。
　　　![実行タブ1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305774/df7f4b94-4166-a8b8-44de-ac2ef502188c.png)

３．下記のような形式で一括変更したい内容を設定します。

```
import modeler.api

stream = modeler.script.stream()
for node in stream.iterator():
    if (node.getTypeName() == "variablefile"):                  # ストリーム内の全ての可変長ファイルノードが対象
        node.setPropertyValue("quotes_2", u"PairAndDiscard")    # 二重引用符をペアで破棄
        node.setPropertyValue("quotes_1", u"PairAndDiscard")    # 単一引用符をペアで破棄
        node.setPropertyValue("break_case_by_newline", True)    # 行区切り文字は改行文字にチェック
        node.setPropertyValue("read_field_names", False)        # ファイルからフィールド名を取得のチェック無
        node.setPropertyValue("encoding", u"UTF-8")             # エンコードをUTF-8にセット
```

４．左から5番目の「このスクリプトを実行」アイコンをクリックして実行します。

![Runアイコン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305774/8a39a907-2726-fc32-b1c1-5e6ae56888e5.png)


これでストリーム上にあるすべての可変長ファイルノードの設定が一括で変更されました。

過去にも何度か同じことを繰り返しているのですが、その都度一時的な作業なのでストリームを保存せずに捨ててしまっていたため、毎回マニュアルを参照してPythonスクリプトを用意していたため、数か月後の自分のために、今回はQiitaにメモを残すことにしました。
自分用のメモなので、比較的よく使うところだけの機能ですが、これを応用すれば、他の種類のノードも一括変更したいときに使えると思います。面倒だなと思っている他のどなたかの参考にもなれば幸いです。

# 試した環境

Modeler 18.2.1
Windows 10

# 参考リンク
[IBM SPSS Modeler 18.2.1Python スクリプトとオートメーション・ガイド](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=2ahUKEwjQjtLr-tLmAhV0NKYKHV6nB-AQFjAAegQIARAC&url=ftp%3A%2F%2Fpublic.dhe.ibm.com%2Fsoftware%2Fanalytics%2Fspss%2Fdocumentation%2Fmodeler%2F18.2.1%2Fja%2FModelerScriptingAutomation.pdf&usg=AOvVaw1aOYrkda_hw6uGqaThnaTO)
windows+anaconda環境でipynbをダブルクリックでjupyter-notebookで開く

簡単にいくかと思ったらいろいろ躓いたので後世の人々のためにメモ
内容はまとめ記事みたいなもんです。大半の人はこれで動くと思います。

前提：windowsでanacondaをインストール済み

コントロールパネル→システム→システムの詳細設定→環境変数のPATHにこれらを追記します。
*は自分のAnacondaのインストール先に合わせて書き換えてください。

```
C:\Users\*\Anaconda3
C:\Users\*\Anaconda3\Scripts
C:\Users\*\Anaconda3\Library\bin
```

![hoge.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369642/05735733-8579-aaa6-346f-dd6973f16313.png)

次に新規変数として%USERPROFILE%をHOMEとして登録します。
![hoge2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/369642/57362805-ef37-b267-325a-0b221c73d0fc.png)

最後にipynbを選択して右クリックし、常にこのプログラムを使って開くにチェックをして、別のプログラムで*\Anaconda3\Scripts\jupyter-notebook.exeを選択すれば完了です。

参考文献
https://a-sue.hatenablog.com/entry/2019/02/24/113152
http://publicjournal.hatenablog.com/entry/2017/02/04/010544
https://qiita.com/k_maki/items/c97c3c5202a913273c57
Chrome作図アプリ「Gliffy Diagrams」の魅力

#はじめに



最近、Webサービスのフローチャートを作成する機会があり、良い描画ツールがないか少し調査してみました。
その中で、「Gliffy Diagrams」というツールを試して、わかったことをまとめます。



#Chromeアプリ「Gliffy Diagrams」 とは？
![GF.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/f95d7c44-c914-6e87-3a77-aa0da6bb7d46.jpeg)


簡単に説明すると、簡単に美しいフローチャート図が描けるChromeアプリです。
公式：https://www.gliffy.com/

#Gliffy Diagramsの導入方法
chromeウェブストアで「Gliffy Diagrams」と検索し、追加して下さい。（https://chrome.google.com/webstore/detail/gliffy-diagrams/bhmicilclplefnflapjmnngmkkkkpfad/related?hl=ja）
完了するとアプリランチャーに追加されます。
追加が完了したら、「Gliffy Diagrams」アイコンをクリックしてアプリを起動します。
![icon.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/f96fed56-a797-f8dc-c9dc-9f19a9d25fbd.png)



最初の起動時にアカウント登録する必要があります。

・名前
・メールアドレス
・会社名（任意）

agree（同意）のチェックボタンにチェックを入れる。

「Register」ボタンをクリックすると登録完了です。


#Gliffy Diagramsは何に最適？


見栄えのよいダイアグラムとフローチャートを素早く簡単に作成することができます。
また、Gliffy Diagramsはオフラインでも作動が可能。

プレゼンテーションにも最適
また、使い方がとても簡単なのでミーティングで皆で話し合いながら簡単に作ることが可能です。
ドラッグ＆ドロップでイメージも追加できるので手間もかかりません。
かなりの時間短縮にもなります。 

↓公式からビデオも見れるので是非見てみてください（https://www.gliffy.com/）
![img.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/118e97fa-ef25-73ea-b57d-f1b7e1ef7466.png)

また、いろいろなシェイプ（図形）が用意されているのでフローチャート以外にも下記にも最適

- ベーシックドローイング
- フローチャート
- UMLダイアグラム
- ERDダイアグラム
- ネットワークダイアグラム
- ワイヤーフレーム&UIモックアップ
- サイトマップ
- ビジネスプロセスモデル
- 組織図
- フロアプラン
- Vennダイアグラム
- SWOT分析
- テクニカルドローイング
※↑chromeウェブストアの紹介より引用

などなど


#Gliffy Diagramsの使い方

正直使い方は、直感的に使えるデザインになっているので
アプリ立ち上げ後に起動する、マニュアルを見ればすぐわかります。
（見なくてもほとんどわかるレベル。）

WordやExcel、Visioなどを使ったことがあるなら、問題なく使えるはずです。

簡単に説明すると、
 アプリ画面の左側サイドバーにライブラリが表示されています。
ライブラリーには、 四角や三角、円などの図形が表示されているので使用したい図形を
右のキャンバスにドラックします。

 
画面上部のメニューのコネクターを使うと
描画した図形同士を接続するコネクターを描画することができます。
コネクター描画中は接続箇所を表示してくれるので、どこに接続するか選択するだけで、
コネクターの形状を適当に調整してくれます。

図形にテキストを追加するには、
入力したい図形をダブルクリックでテキスト入力画面が表示されます。

また、図形をクリックすると「□」マーク「A」のマークが現れます。

「A」マークをクリックする
→同じテキスト入力画面が表示されます。

「□」マークをクリックする
→図形のデザイン（図形の塗り潰し色、線種、陰影、フォントなどの設定）を設定することが可能
![imgADD.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482202/d1392617-54ac-99fe-8510-f84c92f97eb5.png)


#まとめ
Windowsであれば、Microsoftワードやエクセルのオートシェイプ、図表作成ソフト「Visio」を使えば簡単に作成することができます。
しかし、「Gliffy Diagrams」もそれらに劣らないレベル、更にフリー（無料）なので煩わしさもありません。


保存方法は、「.gliffy」という拡張式で保存されます。（作業ファイルです）
書き出しは「JEPG」「PNG」の2種類が可能なので、まず困らないかと。

保存容量が2MBに限定されているという噂も・・・？（未確認）
その辺り、今後使用していく中で追記していけたらと思います。
VSCodeでディレクトリのパスが展開されずに困っている人へ

# 背景

最近VSCodeで↓の画像のようにディレクトリが展開されず、パスがくっついてしまう状態になりました。

![スクリーンショット 2019-12-25 19.33.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104942/21329322-6ec2-61d9-b1c4-050d74ffab71.png)

EXPLORERの幅が小さいとパスが省略されてしまうため、 `Open in Terminal` などを使うときにいちいちEXPLORERを広げたりするのが面倒でした。

# 対策

以下の手順で上記の機能を無効化できます。

1. 設定(UI)を開く(`Open Settings`)
2. `explorer.compactFolders` で検索する
3. チェックを外す

JSONの場合は↓の行を追加すれば大丈夫です。
`"explorer.compactFolders": false`


最初は `vscode explorer collapse disable` などでググっても解決策が見つからずハマっていました。
VSCodeを再起動したところ、リリースノート (version 1.41) が表示され、機能がデフォルトでオンになっていることがわかりました。
> Compact folders in Explorer - Single child folders collapsed by default.

ということで、VSCodeをアップデートしたら再起動してリリースノートをしっかり確認しましょう。
C++のLogger Spdlog

研究をC++で実装していて、ログを出したい時に[Spdlog](https://github.com/gabime/spdlog)を導入したのですが、変にハマってしまったのと、日本語の記事が少なかったので、簡単に残しておきます。

## 導入
導入方法はヘッダーのみインポートする方法(Header only version)とコンパイルして使う方法(Static lib version)があり、本家サイトでは後者が勧められていますが、今回は手っ取り早くログを出したいので、前者で導入します。

- [GitHub](https://github.com/gabime/spdlog)からソースコードをダウンロードする

cloneしてもzipでDLしてもどちらでも大丈夫です。

- `include/spdlog`ディレクトリを任意の場所に配置

今回はプロジェクト配下に`packages`ディレクトリを作り、そこに配置します。ファイル構成は以下の通りです。

```
.
├── CMakeLists.txt
├── main.cpp
├── packages
│   └── spdlog
│       ├── async.h
│       ├── async_logger-inl.h
│       ├── async_logger.h
│       ├── common-inl.h
│       ├── common.h
:       :
```

## CMake
Spdlogをインクルードします。

```CMakeLists.txt
cmake_minimum_required(VERSION 3.14)
project(MyProject)

set(CMAKE_CXX_STANDARD 14)

include_directories("packages")  # 上でspdlogを配置したディレクトリ

add_executable(
        logTest
        main.cpp
)
```

## ログ出力
実際にログを出力してみます。(ログを出力するディレクトリを作って`YourLogDir`を置き換えてください。)

- ソースコード

```main.cpp
int main() {
    auto file_logger = spdlog::basic_logger_mt("basic_logger", "YourLogDir/basic.txt");
    file_logger->info("hello!");
    // デフォルトのLoggerに登録
    spdlog::set_default_logger(file_logger);
    spdlog::info("Some info Log here!!!");
}
```

- 実行 (私はIDEで実行してるので、雰囲気で書いてます🙇‍♂️)

```sh
$ cmake --build YourBuildDir --target logTest -- -j 2
$ YourBuildDir/logTest
```


## ログ確認
```basic.txt
[2019-12-26 16:55:14.916] [basic_logger] [info] hello!
[2019-12-26 16:55:14.917] [basic_logger] [info] Some info Log here!!!
```

## 最後に
今回は最低限のステップでログを出力しました。コンパイルに時間がかかってしまうので、余裕があったら最初に紹介した`Static lib version`で導入することをおすすめします。ログのローテートやフォーマットのカスタマイズの方法なども[公式](https://github.com/gabime/spdlog)に書いてあるので、今後そちらもやっていきたいと思います。
M-1王者ミルクボーイの言っていたコーンフレークの栄養素の可視化をPythonで試みてみる

先日のM-1グランプリで優勝したミルクボーイさんのネタ

「コーンフレーク」

に出てきたエピソードで
・なんであんなに、栄養バランスの五角形が広いんかわからん
・パッケージに書いてる五角形めちゃくちゃでかいんやから

なーんてネタ中で語られています。
早速Pythonで可視化してみましょう。

Pythonではmatplotlibという可視化のライブラリで
栄養素の五角形っぽい
レーダーチャートを描くことが出来ます。

## コードはこちら

```
import matplotlib.pyplot as plt
import pandas as pd
from math import pi
%matplotlib inline

df = pd.DataFrame({
'group'    : ['コーンフレーク','パン'],
'Cal'      : [250,50],
'Fe'       : [260,100],
'VitaminA' : [290,80],
'VitaminB1': [220,60],
'VitaminB2': [305,120],
'Niacin'   : [195,60],
'VitaminC' : [280,85],
'VitaminD' : [280,80],
'VitaminE' : [300,190]
})

categories=list(df)[1:]
N = len(categories)
plt.figure(figsize=(16,9))
ax = plt.subplot(111, polar=True)
angles = [n / float(N) * 2 * pi for n in range(N)] + angles[:1]

# コーンフレーク
values = df.loc[0].drop('group').values.flatten().tolist()
values += values[:1]
plt.xticks(angles[:-1], categories, color='grey', size=20)
ax.set_rlabel_position(0)
plt.yticks([100,200,300], ["100","200","300"], color="grey", size=10)
plt.ylim(0,300)
ax.plot(angles, values, linewidth=2, linestyle='solid')
ax.fill(angles, values, 'b', alpha=0.1)

# パン
values = df.loc[1].drop('group').values.flatten().tolist()
values += values[:1]
plt.xticks(angles[:-1], categories, color='grey', size=20)
ax.set_rlabel_position(0)
plt.yticks([100,200,300], ["100","200","300"], color="green", size=10)
plt.ylim(0,300)
ax.plot(angles, values, linewidth=1, linestyle='solid')
ax.fill(angles, values, 'b', alpha=0.1)

plt.show()
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379626/416a1453-f70b-c8ac-c454-f1428a1ff66f.png)



表示用のデータをpandasで作り
表示アングルを決め、そこに表示するデータを指定するだけの
簡単plotになっています。

一般的なコーンフレークの栄養素は
パンとかと比較されているモノが多かったので
パンとコーンフレークを併せて描画してます。

栄養素の数値は適当です

しかし・・・

## そもそも五角形違うやないかい(内海)！！！

栄養素が5角形で足りるわけがないのでした

しかし、ネタ通りに面積はめちゃくちゃ広い！！

可視化のネタにもなる
ミルクボーイのネタでした。

しっかし、ミルクボーイは
プログラミングと相性がいいなーー

まだまだネタが出てきそうで楽しみです。
macでCatalinaをクリーンインストールしようとしてYosemiteになってしまった場合の参考

#### 前提

OSはCatalinaで上書きインストール済。
タイムマシーンでバックアップは取り済。

#### やったこと時系列

クリーンインストールなので一度、SSDの中身を消す。
OS再インストール先が、Macintosh HDとMacintosh HD – Dataがあり、どちらにCatalinaを入れればいいか悩む。
一度シャットダウン。

もう一度立ち上げると再インストールできるのはYosemiteであることに絶望する。
タイムマシーンで戻そうとするも戻し先をフォーマットしてしまったのでできず、仕方なく一度Yosemiteにする。

appstoreからCatalinaをダウンロードする。
Catalinaへ上書きインストールする。

最初の手順に戻り次はMacintosh HDを選んでインストールする。

#### memo
- CatalinaになってMacintosh HD - DATAというものが追加で作成されるようになったそうです。

- Macintosh HD – Dataが２つできたら容量が少ないほうを選んで右クリックして「APFSボリュームを消去」すると消すことができます。ネット上で情報が見つかりませんでしたが、特段問題がないようです。

参考
[macOS Catalinaをクリーンインストールする方法](https://ischool.co.jp/2019-10-09-how-to-clean-install-macos-catalina/)

[macOS Catalina でMac… \- Apple コミュニティ](https://discussionsjapan.apple.com/thread/250712181)
Hyper-Vとテザリングのネットワークトラブル

# ある日iPhoneのテザリングが使えなくなった

Wi-Fiには繋がるが、表示は「インターネットなし、セキュリティ保護あり 」となる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45915/40c2a4d8-8e1f-e212-7e9a-9056ff9afe85.png)

以下の方法でも解決できない。

**Appleサポート** [iPhone または iPad (Wi-Fi + Cellular) でインターネット共有が機能しない場合](https://support.apple.com/ja-jp/HT203302)
**Microsoftサポート** [Windows のネットワーク接続の問題を解決する](https://support.microsoft.com/ja-jp/help/17220)
**Microsoftサポート** [Windows 10 の Wi-Fi の問題の解決](https://support.microsoft.com/ja-jp/help/4000432)

# Hyper-Vを導入している。例えばWSLやWindows for Dockerなどで

Network Bridgeを削除します。
**※念のため既知のネットワーク管理にあるネットワーク設定を控えておきましょう**

コントロール パネル > ネットワークとインターネット > ネットワーク接続
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45915/0a0336a4-5b48-351f-57d0-110bd0b6a918.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45915/58103125-2415-0185-c3af-99ae135b04a8.png)

これで、テザリングが回復したか確認してみてください。

以上
VSCodeでライブラリの中身まで入ってデバッグする設定

# TL;DR
launch.jsonのconfigurationに「"justMyCode":false」を追加します。

```
"justMyCode": false
```
# 背景
オープンソースのライブラリでエラーメッセージが適応される範囲がでかすぎ、自分でソースコードを当たらないといけないときが多々あります。
GitHubがジャンプ機能を搭載してくれて、GitHub上でプログラムの流れを手動でおっていくのもなくはないんですが、デバッグツールを使ったほうが圧倒的に早いです。

# やり方

VSCodeを開いて、F1（もしくはCtrl+Shift+Rか、クリックするか）でconsoleを開き、

```
Debug: Open launch.json
```

と打ってlaunch.jsonを開きます。configurationの下に"justMyCode": falseと追加します。

```
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python: Current File",
            "type": "python",
            "request": "launch",
            "program": "${file}",
            "console": "integratedTerminal",
            "justMyCode": false #ここを追加
        }
    ],
}
```
ちなみにjsonはコメントアウトできないので実際は＃以下はかいてはいけません。


また、最初にGUIでやる方法も試しましたが、上手く動いてくれませんでした。
もしかしたらpythonだけかもしれないです。

breakpointを好きに置いて変数の中身確認しながら巨人の作ったライブラリを堪能しましょう。

# 参考
https://srbrnote.work/archives/4231
VS Code remote development リモートホストがインターネットにつながらない環境での接続

### やりたいこと
VS Code remote development でインターネットにつながらないリモートホストに接続する
通常手順では接続NGとなる

### 環境
* クライアント
    * windows7 32bit
    * VSC ver 1.41

* リモートホスト
    * centos 7.2

### 前提条件
* クライアントにVSCがインストールされていること
* remote development関連のextentionがインストールされていること
* WindowsクライアントにOpenSSHがインストールされていること
* リモートホストにてクライアント用のSSL鍵の接続設定が完了していること
* VSCのRemote SSHにてssh.exeのpathが設定されていること
* 接続時のOUTPUTに "wget download failed" が表示されていること

### 原因
リモートホストにて、remote development接続用のvscode-serverをセットアップするのだが
必要資材をインターネットからダウンロード(wget)するため、ダウンロードできず後続処理でNGとなる

### 対策
インターネットにつながるクライントで必要資材をダウンロードし、リモートホストへ手動で配置、展開することで問題を解決する

### リモートホストにインストールするvscode-serverを取得
* コミット情報を確認
クライアントのVSCにて画面から以下の手順でコミット情報を確認 
`VS Code -> [ヘルプ(H)] -> [バージョン情報] -> コミット`

>バージョン: 1.41.1 (user setup)
>コミット: 26076a4de974ead31f97692a0d32f90d735645c0


* コミット情報をキーに資材を取得

インターネットにつながる環境で、以下URIからファイル取得、ブラウザにURIを入れてもOK
https://update.code.visualstudio.com/commit:'コミット'/server-linux-x64/stable

※ver1.41.1の場合
https://update.code.visualstudio.com/commit:26076a4de974ead31f97692a0d32f90d735645c0/server-linux-x64/stable

以下の資材が取得できる
`vscode-server-linux-x64.tar.gz`

### 資材配置
* リモートホストの配置先ディレクトリ確認
VSCでリモートホストへ一度でも接続を試していたら、以下ディレクトリが作成される
`~/.vscode-server/bin/'コミット'/`

* 該当ディレクトリにSCP等で資材を配置する
`scp vscode-server-linux-x64.tar.gz username@hostname:/home/username/.vscode-server/bin/'コミット'/`

* リモートホストにて資材を解凍する
`tar -zxvf ~/.vscode-server/bin/'コミット'/vscode-server-linux-x64.tar.gz`

* おまじない
初回接続失敗時に ~/.vscode-server/bin/'コミット'/ 配下に、以下のlockファイルがあるので念のため削除
`rm vscode-remote-lock.'コミット'`
VSC remote development処理で必要となるflagファイルを念のため配置
`touch ~/.vscode-server/bin/'コミット'/vscode-scp-done.flag`

### 再度接続
VSCにて、リモートホストへ接続する
つながればOK、お疲れ様でした:relaxed:
無事接続できたら幸いです

### 参考
https://www.mathkuro.com/?p=726
https://github.com/microsoft/vscode-remote-release/issues/1399
はじめてのPIC（自分用）

#はじめに
これからPICの環境開発をしていきます．PICでLチカできるようになるまでを環境開発とします．

PIC16F88を使用する
使用する言語はアセンブラの方がPICの仕組みを理解できるよ！
PICは書き込むまでが一つの壁だと思うので、電子回路のHelloWorldであるLチカまでやるよぉ。PICの仕組みとか、アセンブラの書式、プログラムの理解はPICやろうと思ったあなたならあとからでもわかると思います。ちなみに私が初めてPICでLチカした時に参考にしたサイトをつらつら綴っているだけです．他力本願．

準備するもの
・**PIC16F88：http://akizukidenshi.com/catalog/g/gI-00567/**
・**PICkit3：http://akizukidenshi.com/catalog/g/gM-03608**
・**書き込み用回路基板：http://akizukidenshi.com/catalog/g/gK-05355/**
・ブレッドボード、抵抗、LED、ジャンパ線など

##手順
まずPICは書き込むまでが大変です。書き込みまでいけたら93％終了したようなものです。
大まかなフローは以下のようになります
（ⅰ）環境開発⇒（ⅱ）プログラム書き込み⇒（ⅲ）電子回路組む⇒（ⅳ）Lチカ
それではやっていきましょう

#（ⅰ）環境開発
https://wak-tech.com/archives/51
https://wak-tech.com/archives/56

↑ここを見ながらMPLAB X をインストールしましょう。C言語をビルドするためにXCコンパイラが必要ですが、C言語を使わないなら要りません。特に理由がなければ入れておきましょう。

#（ⅱ）プログラム書き込み
プログラムをPICに書き込むための書き込み用回路は全部ばらばらで送られてくるので、はんだ付けしてください。
はんだづけが終わったら書き込み用回路のデータシートをよく見て対応するPICのバージョンに合わせジャンパ線をつけましょう（http://akizukidenshi.com/download/ds/akizuki/PICKit_ICSP_adpV2.pdf）

###ここのサイトを参考に書き込みましょう
https://keitetsu.blogspot.com/2014/11/16f88-led.html


##エラー集

####① PICをUSB接続して書き込もうとすると以下のようなエラーがでる
【解決方法】使用している型番とコード内でincludeしている型番が異なるので再確認して一致させる

```
make[2]: *** [build/default/production/newAsmTemplate1.o] Error 1
make[1]: *** [.build-conf] Error 2
make: *** [.build-impl] Error 2
```


####②PICをUSB接続して書き込もうとすると以下のようなエラーがでる
【解決方法】このサイトを参照　https://www.macnica.co.jp/business/semiconductor/support/faqs/microchip/120249/

```
Target device was not found (could not detect target voltage VDD). You must connect to a target device to use PICkit 3.
```

####③LEDが光らない
【解決方法】PICのブレッドボードへの差し込みが甘かったためしっかり奥まで差し込む
<br/>
##こんな文字がでてきたら書き込み成功です
>Programming... Programming/Verif] complete

 


#（ⅲ）電子回路組む
いよいよ電子回路ですね

ここを参考にブレッドボードで電子回路を組んでください
https://keitetsu.blogspot.com/2014/11/16f88-led.html

ただし今回私は給電はarduinoの5vで行いました。私と同様arduinoで給電する場合は参考サイト上のPickitの3つの端子 VPP, PGD, PGS　は無視しましょう。残りの２端子については、VDD = arduinの5V端子、VSS = arduinoのGND端子としました。

#（ⅳ）Lチカ
あとはLチカしてください
参考に最後に完成図を載せておきます
（２個のPICでLチカしてるのでごちゃごちゃして見えてみます）
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/557506/6381c434-122c-cbd0-2842-f60fc89af615.png)
nuxt.jsで構築した静的サイトをGitHub ActionsでAzureBlobにデプロイして激安Webサイト運用

# これは何？
GitHub Actionsを使ってAzureBlobに、サイトをデプロイする方法を書きます。
静的サイトジェネレーターのメリットは、多くはレスポンスがよくなる事ですが、静的サイトですので、Blobのような単純なファイル置き場にファイルを配置するだけでも、Webサイトとして動作せる事ができます。
これを使うと、Azure Web Appsのような、Webサイトホスティング環境を使うよりも断然コストが安く済みます。
とかいう前置きよりも、GitHub Actionsを使った事がなかったので、一度使ってみたかったというのが正直な所です。

![ActionsHero.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173479/ab1f9843-faa6-0eff-f205-29b00e37ae65.png)

# 前提
多分、この記事にたどり着いた方は、既にnuxt.jsでGitHub Pagesのデプロイを行っているはずです。というわけで、nuxt.jsでの静的サイトの構築方法などは、他の記事にお任せして、いきなりGitHub Actionsを使う所から始めます。

# Azure Blob Strage
AzureストレージアカウントからBlobコンテナを一つデプロイしておいてください。
デプロイ後は、必要な情報をメモか、ブラウザで表示しておいてください。必要な情報は下記の通りです。

- コンテナURL(https://Blobアカウント名.blob.core.windows.net/コンテナ名)
- AzureBlobのアクセスキーの接続文字列

# GitHub Actions

まずは、ここから始めます。

<img width="338" alt="スクリーンショット 2019-12-26 15.30.26.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173479/7acfef01-534b-cf90-899f-f1c792207d27.jpeg">

ページが切り替わってyamlファイルの編集ページになったら、下記のように書きます。
日本語の所は、先ほどのAzureBlobの情報を記入（{}はいらないよ）

参考：https://github.com/marketplace/actions/azure-blob-storage-upload
<img width="940" alt="スクリーンショット 2019-12-26 15.32.59 2.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173479/85e6046d-9388-0d5c-a857-0b6ef5198b24.jpeg">

あとは、保存してあげれば、自動でGitHub Actionsがデプロイを開始してくれます。
git cloneしたlaravelをローカルで動かすまで

git cloneして```php artisan serve```してエラーになるときはこうする。

vendorがないのでこういうエラーがでるようだ。
vendorはgit管理外。

#### 前提
.envは作成しておく


```bash:エラー文
Warning: require(/app/todo/vendor/autoload.php): failed to open stream: No such file or directory in /app/todo/artisan on line 18

Fatal error: require(): Failed opening required '/app/todo/vendor/autoload.php' (include_path='.:/usr/local/lib/php') in /app/todo/artisan on line 18

```

```bash

composer install

composer dump-autoload

// これをやらないとエラーになる
php artisan key:generate

php artisan serve
```

参考
[Fatal error: Uncaught Error: Class 'Illuminate\\Foundation\\Application' not found \- Qiita](https://qiita.com/yasuken/items/37a851ea80fb142a8822)

[\[PHP\]ComposerのCLIで利用できるコマンドの説明 \| 9ensanのLifeHack](http://9ensan.com/blog/programming/php/php-composer-cli/)
手元のKubernetesマニフェストと本番のマニフェストが乖離したとき(バージョン1.12以下の場合)

昔困ったので記録しておく。

Kubernetes masterのバージョンが1.13以上であれば `kubectl diff statefulset hogehoge` とする（1.14時点でα版）。サーバーサイドアプライにより、現状と差分がわかる。

バージョンが1.12以下の場合、正確な情報を知ることが難しい。annotationだけが頼りになる。

```
$ kubectl version
Client Version: version.Info{Major:"1", Minor:"16", GitVersion:"v1.16.0", GitCommit:"2bd9643cee5b3b3a5ecbd3af49d09018f0773c77", GitTreeState:"clean", BuildDate:"2019-09-19T13:57:45Z", GoVersion:"go1.12.9", Compiler:"gc", Platform:"darwin/amd64"}
Server Version: version.Info{Major:"1", Minor:"12+", GitVersion:"v1.12.9-gke.15", GitCommit:"b48a8d693e191192e27c2f807daa51b54d0b0a61", GitTreeState:"clean", BuildDate:"2019-08-12T17:49:30Z", GoVersion:"go1.10.8b4", Compiler:"gc", Platform:"linux/amd64"}
```

Kubernetesは直近でapplyした結果を `.metadata.annotations.kubectl.kubernetes.io/last-applied-configuration` に保存している。このannotationを見て判断することができる。

```
$ kubectl apply view-last-applied statefulset hogehoge
```

あくまでも、直近でapplyした結果しか保存していないため、誰かが kubectl patch を実行していた場合、そのannotationはあてにならない。 `kubectl get statefulset hogehoge -o yaml` と突き合わせれば差分が手に入る。しかし、 applyしたときとは違う値が入っている場合がある。わかりやすい例だと、ServiceのType:LoadBalancerは、external ipがあとから付与されるため、apply時点では知ることができない。

# Ref
- https://kubernetes.io/blog/2019/01/14/apiserver-dry-run-and-kubectl-diff/
simple_formのエラーメッセージを表示できるようにする

### はじめに
bootstrapでsimple_formを使っているのですがエラーメッセージを表示させる際にてこずったのでその記録を載せます

[simple_form_bootstrap.rb](https://github.com/plataformatec/simple_form/blob/b80775bd45b62554ce401d0b60355eb6fcd17bba/lib/generators/simple_form/templates/config/initializers/simple_form_bootstrap.rb)


### やったこと

![スクリーンショット 2019-10-31 16.43.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333068/df79020d-47d4-b640-0f24-f8a78d5d343a.png)

上のように生年月日が未入力の際にエラーメッセージを表示させようとしたのですが表示されませんでした。
localをいじってもうまくいかなかったので調べてみるとどうやらbootstrapのinitializerに変更を加えるのが正しいようです。

```ruby:config/initializers/simple_form_bootstrap.rb
  config.wrappers :date_picker, tag: :div, class: "form-group", error_class: "has-error" do |b|
    b.use :html5
    b.use :placeholder
    b.use :label, class: "control-label"

    b.wrapper tag: :div do |ba|
      ba.wrapper tag: :div, class: "input-group" do |append|
        append.use :input, class: "form-control datetimepicker", data: { date_format: "YYYY/MM/DD" }
      end
      ba.use :full_error, wrap_with: { tag: "span", class: "help-block" }
      ba.use :hint, wrap_with: { tag: "p", class: "help-block" }
    end
  end
```



```ruby
ba.use :error, wrap_with: { tag: "span", class: "help-block" }
```

僕の場合生年月日を入力する際、date_pickerを使っていたのでその部分の
errorをfull_errorに書き換えることで解決しました。

![スクリーンショット 2019-10-31 16.51.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333068/411e8c5c-0f15-96ed-efee-faaa5edd9ef6.png)