OmniAICreator/Qiita-1.07M huggingface dataset:
Flutter ✕ gRPC ✕ オレオレ証明書



2020/5/17 更新
**どうやらiOS13以降だと↓の通りの記述を入れても HandshakeException が発生するようです。**
https://support.apple.com/ja-jp/HT210176
公式でのアナウンスもあり、クライアントの努力で解決するのは実質不可能と思われます。
**正規の証明書発行することをオススメします。**


# はじめに
gRPCをFlutter(Dart)で使うときにオレオレ証明書で死ぬほど躓いたのでメモ。
オレオレ証明書のための `HogeClient` の設定までにつまづいたこと、そしてどう修正していったのかを順を追って説明していきます。

# 目次
[1. `pbgrpc.dart`がない](#1-pbgrpcdartがない)
[2. SocketException](#2-socketexception)
[3. HandshakeException](#3-handshakeexception)
[4. 黙ってクラッシュ](#４-黙ってクラッシュ)
[5. 動いた](#5-動いた)

#1. `pbgrpc.dart`がない
生成の設定ミスです。設定については割愛します。

#2. SocketException
#### 実際のコード

```dart
_createClient() {
    final channel = ClientChannel('https://hoge.com');
    return HogeClient();
}
```

#### エラー

```
Unhandled Exception: gRPC Error (14, Error connecting: SocketException: Failed host lookup: 'https://hoge.com' (OS Error: nodename nor servname provided, or not known, errno = 8))
```

#### 原因
`https://` は不要でした。

#3. HandshakeException
#### 実際のコード

```dart
_createClient() {
    final channel = ClientChannel('hoge.com');
    return HogeClient();
}
```

#### エラー
```
Unhandled Exception: gRPC Error (14, Error connecting: HandshakeException: Handshake error in client (OS Error: 
	CERTIFICATE_VERIFY_FAILED: ok(handshake.cc:354)))
```

#### 原因
信頼できない証明書(オレオレ証明書)を使っていることによるエラーです。

#４. 黙ってクラッシュ

#### 実際のコード

```dart
_createClient() {
    final channel = ClientChannel(
        'hoge.com', 
        options: ChannelOptions(
          credentials: ChannelCredentials.insecure(),
        ),
    );
    return HogeClient();
}
```

#### エラー
Androidのみで出力されるエラー

```
Unhandled Exception: gRPC Error (2, HTTP/2 error: Connection error: Connection is being forcefully terminated. (errorCode: 10))
```

flutter run -vのクラッシュ直前抜粋

```
[   +5 ms] DevFS: Deleting filesystem on the device
(file:///Users/{ユーザ名とかデバイスIDとか}/)
[ +260 ms] Ignored error while cleaning up DevFS: TimeoutException after 0:00:00.250000: Future not completed
```

#### 原因
`ChannelCredentials.insecure(),` は認証をオフにするパラメータです。オレオレ証明書でも認証は必要なためクラッシュします。


#5. 動いた

#### 実際のコード
```dart
_createClient() async {
    final trustedRoot = await rootBundle.load('assets/key/api.pem');
    final channelCredentials = ChannelCredentials.secure(
      certificates: trustedRoot.buffer.asUint8List(),
    );
    final channel = ClientChannel(
      'hoge.com',
      options: channelOptions,
    );
    client = ClipServiceClient(channel);
}
```

#### ポイント
- 動かすためにオレオレ証明書の `.pem` が必要なため発行しましょう。
- assets内にそれを保存し `実際のコード` を参考にクライアントを生成しましょう。


## 感想
`4.` でずっと黙ってクラッシュしてたので丸一日潰れました。
この記事によって誰かの丸一日が潰れることを阻止できれば本望。
LightsailのWordpressファイルを読み書きする

# 所有者を変更する
`chown`を使う。

```
$ sudo chown -R bitnami /opt/bitnami/apps/wordpress
```
ユーザー名が`bitnami`なのは、Lightsailのインスタンスのユーザー名から。それに合わせて所有者をリライトするとファイルを読み書きできるようになる。

# MISC
ちなみにWordpressのファイル構造は大体こんな感じ。

```
/opt/bitnami/apps/wordpress
|-- bin 
|-- conf　//htaccessやVirtualhost、prefixなどの設定ファイル
|-- htdoc　//wordpressの本体ファイル
|-- licences 
`-- tmp
```


# See Also
- [Cyberduck を使って Lightsail にファイルを UL DL する方法
](https://blog.yuichisato.net/11138-2/)
[Mysql5.7]接続できない状態でrootパスワードを変更する方法

【開発環境】
macOS Catalina
#Mysql5.7で接続できない状態でrootパスワードを変更する方法
ローカルでmysqlにパスワード付きで接続しようとした時

```
$ mysql -u root -p
```

ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)
というエラーが出たので、その対処法を記載します。

パスワードが間違っているorそもそもパスワードを設定していない場合に出るエラーみたいですね。

```
$ mysql -u root
```
これで接続できればパスワードを設定していないかがわかります。

これで接続できない場合パスワードが間違っている可能性が高いです。

私がやった方法を記載していきます。

##Mysqlをストップする
いろいろする前にとりあえずMysqlを止めます。

```
$ mysql.server stop
```
状態を見ます。

```
$ mysql.server status
```
止まっていれば成功です。

私の場合Mysql自動起動を設定していたので、stopできていませんでした。そういう方は、

```
$ brew services stop mysql@5.6
```
のコマンドで自動起動を止めておきます。

##Mysqlにパスワードなしで接続する

```
$ mysqld_safe --skip-grant-tables &   
```
このコマンドでパスワードなしで起動できます。

パスワードなしで接続

```
mysql -u root 
```

##パスワードを再設定する

Mysqlにログイン後にコマンドを打ち込んでいきます。

```
mysql> use mysql
```

パスワードを変更するコマンドです。

```
mysql> UPDATE user SET authentication_string=password('新規パスワード') WHERE user='root';
```

Mysqlに反映させる。

```
mysql> flush privileges;
```

ログアウトします。

```
mysql> quit
Bye
```

##Mysqlにパスワード有りで接続する

起動します。

```
$ mysql.server start
```

パスワード有りで接続します。

```
$ mysql -u root -p
```

パスワードを入力してログインできれば成功です。

##おわりに
私はこのエラーでかなり時間使ったので記載しました、、、。

参考記事　https://qiita.com/ksugawara61/items/d8d69b7d57a3afcef980

間違いなどがありましたらご指摘いただければ幸いです。
最後までご覧いただきありがとうございました。
[Flutter] gifファイルで簡単アニメーション再生

# 1. はじめに

Flutterでgifファイルを再生する方法についての記事です。

Android/iOSとは異なり、Flutterだと標準パッケージかつpng/jpg等のファイルとの区別なく利用できます。
※もちろんソフトウェアデコードですので、CPUパワーは使います。

<img width="240" alt="sample.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/259963/b37fbdf7-096a-6b74-eee2-31ea3265de4c.gif">

# 2. 使い方

png/jpgファイルのイメージファイルと同じように、単にgifファイルを指定するだけです。
とても簡単ですね。アニメーションをソースコードで書きたくない時はとっても便利かもしれません。

```Dart
@override
Widget build(BuildContext context) {
  return Image(
    image: AssetImage('images/tenor.gif'),
    fit: BoxFit.cover,
  );
}
```
VSCodeでDraw.ioが使えるようになったらしい！

# 追記
versionによっては設定を変えないとエクスポートができないようです。
エクスポートできない方はこちらの記事をご参考に設定いただくとエクスポートできるかもしれません。
現状バージョン0.4ではこちらの設定が必要となります。
[VSCodeでDraw.io Integration使用時にエクスポートできないことがある問題への対処](https://qiita.com/tfukumori/items/0f2b52088cd39f5c124e)

## 2020/10/18追記
現在のバージョン0.7ではdrawio拡張子のエクスポートがうまくいかないようです。
その場合はオフラインモードに移行変更していただくか、drawio.pngやdrawio.svg拡張子でファイルを作成してもらうことで直接編集もできた上で、エクスポートとせず末尾の拡張子ファイルとして利用することができます。


# はじめに
VSCodeで簡単にDraw.ioで描画できるようになったみたいなので、
導入方法と使い方を備忘として残していきます。

# Draw.ioとは?
Draw.ioとは[draw.io](https://draw.io)にアクセスするだけで、フローチャートやネットワーク図、ER図といった豊富なテンプレートを使用して簡単にお絵かきをすることができるサービスになります。
Draw.ioで作成した図はPNGやJPEGなどの画像形式だけでなく、 SVGやXMLといった豊富な拡張子でエクスポートすることが可能です。
具体的にこんな感じでお絵かきすることができます。
![スクリーンショット 2020-05-14 20.03.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255007/ed86eb5b-9378-58d3-355e-f200f4698bea.png)

# それがVSCodeで使えるようになったらしい！
Draw.ioを知ったところで本題に戻ります。
なんとこのDraw.ioがVSCodeで利用できるようになったらしいです！
Github: https://github.com/hediet/vscode-drawio
MarketPlace: [Draw.io VS Code Integration](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio)

手元で簡単に、しかもGUIベースで利用することができるようで、使い方に迷うこともなく直感的にお絵かきができます！
ブラウザ上で作成するのでも苦はなかったですが、VSCodeでそれができるというのはかなりいいですよね！

# 導入方法
[Draw.io Integration](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio)でinstallボタンを押すか、
VSCodeの拡張機能検索窓で**「Draw.io Integration」**と検索してインストールをするだけです！

反映させ直すために一度VSCodeを立ち上げなおしたほうが良いかと思います。

# 使い方
拡張子を```.drawio```もしくは```.dio```でファイルを作成するだけですぐに利用可能です。

(追記: 2021/02/19) **.drawio.pngとかdrawio.svgでファイルを生成すると、importやexportの必要なくそのまま画像として利用できたり、編集することが可能なので、こちらの方をおすすめします。**

ファイルを作成して開くとすぐに描画画面になります。
![drawiovscode.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255007/cd528935-01fd-92d2-7043-f96635379b26.gif)



# 操作方法
かなり直感的に操作することができると思うので、説明はおそらく不要だと思いますが、
左側のshapeから必要なものをドラッグ&ドロップするだけですぐに描画することができます。

また、描画した図にマウスオーバーすると、矢印が出てきますので、そちらをクリックしたままホールドし、他のShapeに伸ばしてあげることで、リレーションを書くこともできます。

![drawio2.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255007/8c0dfb59-4aca-511b-a3b8-d9900663ec88.gif)

# アイコンを追加する
いろんなサービスのアイコンを追加で使うことができます！
Shapesの下にある[+ More Shapes...]を選択してもらうと追加でアイコンを選択することができます。
AWSやGCP、AzureのアイコンやKubernetesのアイコンを使うこともできます！
![draw4.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255007/440aaa35-8e92-b963-b1d2-896aac7a31c7.gif)


# エクスポートのやり方
上記までで作成した図をエクスポートするときには、
上のメニューバーから
[File]→[Export as]→（任意の拡張子）
の順で選択することで簡単にエクスポートすることが可能です。
![draw3.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/255007/c86bec78-3ecc-9b05-226c-8cde2c489e7d.gif)

(追記: 2021/02/19) **.drawio.pngとかdrawio.svgでファイルを生成すると、exportの必要なくそのまま画像として利用できます。**

# 最後に
簡単に導入から使用までを行うことができました！
エンジニアはよく図を描く場面があると思うので、そのときにはぜひ使ってみるといいと思います！

# 参考
Github: https://github.com/hediet/vscode-drawio
MarketPlace: [Draw.io VS Code Integration](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio)
【PHP】POSTとGETのデータ送受信方法

#【PHP】POSTとGETのデータ送受信方法

それぞれの違いを明確に理解するためのメモです。


##postメソッド
- name属性でデータ受け渡し用の名称を設定することで、データの送受信を行う。
- 送られてきたデータの中身は$_POSTで取得＆出力しないと見れない。




###必要な要素（inputタグの場合）
**■送信元**

- formタグ
    - action属性：送り先のファイルパス
    - method属性：post
- inputタグ(type="text")
    - データ入力用
    - name属性：受け渡し用の名称
- inputタグ(type="submit")
    - 入力データ送信用


**■受信先**
$_POST['受け渡し用の名称']

<br>

```php:送信元
<form action="送り先フィル名.php" method="post">

<input type="text" value="初期セット値" name="受け渡し用の名称">
<input type="submit" value="ボタン表示">

</form>
```

```php:受信先（送り先フィル名.php）

<?php echo $_POST['受け渡し用の名称'] ?>
```


<br>
##getメソッド
・formタグのaction属性に送付するデータ情報を記載する。
・ファイルパスにパラメータ（？）でデータを付与。
・受信先のURLにデータが表示される（機密情報はNG）
・文字数制限あり（短いデータに使う）


###必要な要素
**■送信元**

- formタグ
    - action属性：送り先のファイルパス?名称=付与データ
    - method属性：get
- inputタグ(type="submit")
    - 入力データ送信用

**■受信先**
$_GET['データにつけた名称']

<br>

```php:送信元
<form action="送り先フィル名.php?受け渡し用の名称=データ" method="get">

<input type="submit" value="ボタン表示">

</form>
```

```php:受信先（送り先フィル名.php）

<?php echo $_GET['受け渡し用の名称'] ?>
```

<br>
##共通する内容

-  formタグを使用
-  inputタグのtype="submit"でデータ送付
-  受け渡し用のデータ名称の空白やドットはアンダースコアに自動変換
Markdown記法のまとめ

僕がQiitaで記事をまとめるのに必要な記法をまとめました．

#Markdownって何？
[Wikipedia](https://ja.wikipedia.org/wiki/Markdown)によると

>
>文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。しかし、現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換するソフトウェア（コンバータ）も開発されている。
>各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。


つまり，**手軽に文章を記述するための言語**

#何で使えるの？



#記法のまとめ

ここまで使った記法の紹介
1. 見出し
2. リンク
3. 引用
4. 強調
5. リスト

これからそれぞれ紹介します

##見出し
「#」+「半角スペース」+「見出し」で記述
「#」の数で見出しの大きさ変更可能
###書き方
~~~
# 見出し
## 見出し
###　見出し
#### 見出し
##### 見出し
###### 見出し
####### 見出し
~~~
###表示例
# 見出し
## 見出し
### 見出し
#### 見出し
##### 見出し
###### 見出し
####### 見出し
6段回までしかできないみたいです(笑)


##リンク
[表示文字]+(URL)で記述
[]内の表示文字をクリックするとリンク先に飛びます

###書き方

~~~
[Qiitaホーム](https://qiita.com/)です！！
~~~

###表示例
[Qiitaホーム](https://qiita.com/)です！！

##引用
「>」
<font color="red">これだけ</font>

###書き方
~~~
>引用
>>引用
>>>引用
~~~

###表示例
>引用
>>引用
>>>引用
>>>>引用
>>>>>引用
>>>>>>引用
>>>>>>>引用

一体どこまで重ねてかけるのだろうか…
ぜひ調べてみてください

##強調
「半角＊」+「表示文字」+「半角*」で「表示文字」を強調
「半角＊」の数だけ強調の仕方が変わります

###書き方

~~~
強調kyoutyou
*強調kyoutyou*
**強調kyoutyou**
***強調kyoutyou***
****強調kyoutyou****
~~~

###表示例
強調kyoutyou
*強調kyoutyou*
**強調kyoutyou**
***強調kyoutyou***
****強調kyoutyou****
*****強調kyoutyou*****

1個で英語だけ斜体
2個で太字
3個で太字&斜体


3種類の強調を使えるみたいです

#まとめ
記法名|書式|機能
---|---|---
見出し|#|1~6段階までの見出し
リンク|[表示文字]　(URL) |表示文字をリンクとして表示
引用|>|引用文に
強調|半角＊表示文字＊|斜体・太字・斜体太字
リスト||


#まとめ以外
##インラインコード
背景色の変更
`で囲みます。
'ではないので注意
###書き方

~~~
`あいうえお`
~~~

###表示例
`あいうえお`

##文字の色

###書き方

~~~
<font color="red">あいうえお</font>
~~~
###表示例
<font color="red">あいうえお</font>

##表
###書き方

~~~
あ|い|う|え|お
---|---|---|---|---
か|き|く|け|こ
さ|し|す|せ|そ
~~~
###表示例
あ|い|う|え|お
---|---|---|---|---
か|き|く|け|こ
さ|し|す|せ|そ
【WEB】URI、URL、URNの違いと理解

##URI、URL、URNの違い

URI（Uniform Resource Identifier）
名前、場所を識別する書き方のルール。

URL（Uniform Resource Locator）
場所を識別する書き方のルール。住所

URN（Uniform Resource Name）
名前を永続的に識別する書き方のルール。マイナンバー

URLもURNもURIの一部

#URIの構成物

https://www.example.com:80/kuro_96/items.html?key1=value1&key2=value2#Anchor

<b>スキーム：通信手順を指定</b>
 http HTTPでアクセス
 https　SSLを利用してHTTPでアクセス
 file　固有のファイルを呼び出す
 mailto　メールアドレスを呼び出す

<b>ドメイン名：ネット上のサーバを指定</b>
企業、団体を識別
www.example.com

<b>ポート番号：サーバのリソースにアクセスする出入口</b>
:80　httpのデフォルト
:443　httpsのデフォルト

<b>パス：WEBサーバ内のリソースの位置を階層で記述</b>
 kuro_96/items.html

<b>クエリ：WEBサーバに提供する追加パラメータ</b>
?key1=value1&key2=value2

 key1　パラメーター1の名称
 value1　パラメーター1の値
 key2　パラメーター2の名称
 value2　パラメーター2の値

?で始まり、=でパラメーターと値を区切り、&で別のパラメーターを繋げる
Googleアナリティクスのトラッキングコードなど

<b>フラグメント：リソース自体の特定の場所へのアンカー</b>
 #Anchor
 #label

WEBページのラベルの位置
Flutter初心者が100日でアプリリリースするまでの記録

##この記事は
Flutterの初心者が100日後にアプリリリースするまでの軌跡()を綴ったものになります。
また、Flutterでアプリ開発をしてみて思った所感などを書いていきます。

Flutterからプログラミングやってみようかな? とか
アプリ開発始めてみようかな? とか
Flutterに少しでも興味がある方は特に是非読み進めてください。

##何故書こうと思った?
実はもう100日チャレンジを始めてから58日が経過しています。何故このタイミングなのか?
,,, 思いつきで書き始めました。

強いていうなら、今Flutterについて結構盛り上がっていると思うんですよ、Youtubeとかtwitterとか某フリーランスエンジニアの方とかね。それに乗っかろうかなと思ったわけです。

##開発者(筆者)スペック
専門学校で4年間プログラミング、データベース、ネットワーク等々を学び、今年の春から一部上場企業のWebエンジニアとして働いています。
研修中ですが、優しい先輩に囲まれ充実した日々を送っています。(なんか会社に提出する用みたいですね)

個人開発は、ちょうど約2年ほど前から初めて,最初に触ったものはSwiftでした。当時からいろいろな言語に手を出すのが好きだった私は、Swiftさんも私の標的になってしまったわけですね。

そんなこんなで今年の2月頭に1作目となる Symplist(AppStoreで配信中)をリリースしたばかりです。

好きな言語はGo,Python3,Dartです。(記事書いている時点では。こんなものはすぐに入れ替わります。)

##早速ですがFlutterを始めてみて
結論から言うと、「Flutterめっちゃ書きやすいし楽しいしビジネスとしても結構使えそうで良い！」

こう思った理由は大きく分けて3つありまして、

#####まず1つめですが、IOSとAndroid両方とも基本的に一つのコードで成立してしまう。

実際に実装し始めてみるとわかるんですが、これが結構感動する。今までIOSもAndroidもリリースしようと思ったら２つコードを書かないと行けなかったですし、何かと不便でした。(2つの言語が楽しめるという利点もありますが。)

#####次にCSSライクでUIを構築することができる
これは結構でかいんじゃないですかね。ワードプレスやらなんやらが流行っている時代ですからきっとCSSも書ける方多いと思うんです。
flexなんちゃらとか、Alignなんちゃら、padding margin うんぬんカンヌン 親と子の関係が常に成立しているって言うのもなんか似てますよね HTMLっぽいと言うか。


#####最後に、個人開発業として収入を得やすいのでは？

正直リリースしたアプリに広告貼り付けたことないので、広告収入等どんな感じで流れてくるのかはハッキリわかりませんが、flutterで開発してIOSでもAndoroidでもリリースしてしまえば、自分が作ったアプリを少時間で多くの方に使ってもらえる。その結果広告収入も多く入る可能性が高いと言うところですよね。

少時間でと言うのは SwiftとKotlinでわざわざ開発しなくても良いと言うことです。

ただ、これだと完全に個人開発業としての話であって、「Flutterでフリーランスに俺はなる!!」とかはまだ厳しいのではないかなと思ってます。
って言うのはまだ案件が少なすぎるんですよね。それならSwiftとかKotlinとか勉強してしっかりコード書けるようになった方が断然良いです。

まとめると、「個人開発で一人でFlutter使って楽しみながらアプリ作って広告収入得るとかは全然ありだけど、ガチで案件探して本気で仕事にしたいとかはまだ厳しいのでは？」です。

これに関しては色々な方の意見聞きたいので是非コメントまで。

##どこが課題?
Flutter書きやすいし、楽しいし良いです。しかし完璧ではないです。

そりゃ欠点もあります。人とおんなじです。

#####IOSでの挙動が少し重い
最近のアップデートで結構軽くなったみたいなんですが、体感やや少し重いです。モーダルとか開くとき結構カクつきます。でもこの辺は解消まで時間の問題な気もするのでそこまで重要視する点ではないのかも(僕のコードが悪い可能性も十分ありますし)

#####仕事として始めるのはやや不向きである
この辺りはさっきも書いたのですが、自分から仕事探しに行こうとしたら結構難しいと思います。
本気でアプリ開発で仕事をしたいとかだったらFlutterは一旦勉強せずに、Swiftとかやる方をオススメします。

でも、スタートアップの企業さんで結構Flutter取り入れているところとかあったりするんです実は。僕もお声かけいただいたことあります。
なので少しずつ流れは来てるのかな ~ と思うところもあるのですが、この辺りは全然ハッキリしないです。

#####オワコン化してくる可能性がなきにしもあらず
今までIOS,Androidどっちも1つのコードで作ることができるフレームワークは他にもありましたよね。覚えてますか？覚えてないですね。僕も覚えてないです。

でも、覚えてないってことはそう言うことなんですよね。要はオワコン化していって誰にも使われなくなるんです。
Flutterもその可能性はないとは言い切れないです。日々情報が入れ替わる業界ですから。

なのでFlutterで仕事する際もこの辺も意識して選ぶ必要があると思います。
分析大事です。

##残りの42日は?
そうですね 最初の方に100日後にリリースするまでの軌跡()と書いたので、気が向いたら続編と言うかFlutter系の記事もちょくちょく上げて行こうかなと思います。

##最後に
そこまで長い記事ではないですが、ここまで読んでくださってありがとうございます。

Flutterバンザイ。
charlesの文字列検索機能を使って目的の通信を探す

#はじめに
apiのリクエスト/レスポンスの通信のモニタリングなどが行えるCharlesを使うと、様々な通信が取得できますが、取得される通信が多いと自分の目的とする通信が探しにくいです。Charlesの文字列検索機能を使って、自分の目的とする通信を探します。
今回はsmartnewsアプリで記事一覧を取得する通信を探します。

#方法
smartnewsアプリでは、画像のように記事一覧が取得されます。

![9a12eaa34267eb1e442710eae85ca4e6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636023/5751ae03-f191-1a63-937b-5e7d3e403556.png)

この記事一覧を取得している通信を探していきます。

Charlesを使ってsmartnewsの通信を見てみます。

![Screenshot from 2020-05-14 19-59-17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636023/6dfc1f26-e6bf-d133-4452-66a37689767d.png)


アプリ起動と同時にさまざまな通信がキャッチされます。通信が多すぎるとぱっと見ではどれが記事一覧を取得している記事かわかりません。（urlからある程度は予測がつきますが...）

ここでCharlesの文字検索機能を使ってみたいと思います。「ctrl + f」で起動できます。Chromeなどの文字検索と同じですね。
コマンドを打つと画像のようなウィンドウが出てきます。

![Screenshot from 2020-05-14 20-09-49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636023/e7e1a310-d853-1b83-3668-b6f422fc05fc.png)


リクエストのurl、レスポンスのbody部分など、様々なところを検索対象に選べるようです。
「Text to find」とある部分に検索したい文字列を入力します。入力したら「Find」で実行です。（またはEnter)

今回はsmartnewsの記事一覧を取得している通信を探すので、記事のタイトルの一部などで検索をかけることによって、目的の通信を見つけることができました。
Tips: Azure Functions 複数の function.json の中身をずらっと jq する

# Intro
Azure Functions では、function.json にトリガーやバインディングなどの設定がされているが、数十といったレベルで多くの関数を作成したときに、この設定内容を一覧で確認したいことがある。function 名の一覧ならば、ソースコード上のディレクトリ名や Azure Portal 上で簡単に取得できるが、function.json の中身となると一つずつ開いて確認するのは効率が悪いので、find、xargs、jq などのコマンドラインで解決する。

Azure Cloud Shell でもよいし、Windows マシンでも [WSL](https://docs.microsoft.com/en-us/windows/wsl/install-win10) でこのあたりのコマンドラインがさらっと利用できるので、手軽に確認できる。

# How
状況はこんな感じでたくさんの関数を作ったとする。

```sh
$ ls *
host.json  local.settings.json  requirements.txt 

BlobTrigger1:
function.json  __init__.py  readme.md  sample.dat

CosmosTrigger1:
function.json  __init__.py  sample.dat

HttpTrigger1:
function.json  __init__.py  sample.dat

TimerTrigger1:
function.json  __init__.py  readme.md  sample.dat

... まだまだたくさん
```
たまたま Python を使っているが、function.json は言語に関わらず利用する。JavaScript でも Java でも C# でも同じ方法が使える。

## シンプルに `jq` で

### 全てをずらっと
`jq (query) (file path)` なので

```shell
$ jq . ./*/function.json
... JSON結果は省略 ...
```

`cat` をパイプする派であれば

```shell
$ cat ./*/function.json | jq .
... JSON結果は省略 ...
```
### bindings.type をずらっと

```shell
$ jq .bindings[0].type ./*/function.json
"blobTrigger"
"cosmosDBTrigger"
"httpTrigger"
"timerTrigger"
...
```

## 関数名を限定したい場合 `find` と `grep` と `jq` で 

```shell
$ find . -name "function.json" | grep Timer | xargs jq .bindings[].schedule
"0 */5 * * * *"
```

# Reference
- jq : https://stedolan.github.io/jq/manual/
- function.json : https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-triggers-bindings
- https://github.com/Azure/azure-functions-host/wiki/function.json
Microsoftアカウントでのリモートデスクトップ接続に苦労した話

# 結論だけ知りたい人向け

`Microsoftアカウント`でリモートデスクトップ接続したい場合は、Windowsに`Microsoftアカウント`でログインできるようにした際、`PINコード`や`生体認証`などの設定を一旦解除して、`Microsoftアカウント`の`ユーザー名/パスワード`でWindowsに一度だけログインしておく必要がある。

:::note
確認はしていないのですが、頂いたコメントによると、「その他のサインインオプション」から「Microsoftアカウントのユーザー名とパスワード」でログインすれば、わざわざPINなどの解除はしなくてもいいみたいです。
:::

# 経緯

長らくMacユーザーだったのですが、最近久しぶりにWindowsPCを使いだしました。
今のWindowsってオンラインの`Microsoftアカウント`でログインできるんですね。でも、この`Microsoftアカウント`でのリモートデスクトップ接続に謎の苦労をしました。

# 僕のアカウントの状態

初めに、`PCローカルのアカウント`としてユーザーを作成しました。`Microsoftアカウント`で作成するとユーザーフォルダの名前が勝手に決められてしまうようで、それが気持ち悪かったので。また、ログインには`PINコード`を使うといいよ！というようなことを言われるため、`PINコード`を設定しました。その後、その`ローカルアカウント`を`MSアカウント`に変更しました。

この状態で、Windowsへのログインは`MSアカウント`の`ユーザー名/PINコード`で可能な状態でした。

# リモートデスクトップで接続したい

Macやスマホからリモートデスクトップ接続して利用したく、リモートデスクトップをONにしてログインしようとしたのですが、`Microsoftアカウント`のユーザー名とパスワードを入れたところ、ログインできませんでした。ということで、いろいろなパターンの入力を試す羽目になります。

まずユーザー名として入力するべきものの選択肢としては

- ローカルアカウントのユーザー名
- MSアカウントのユーザー名

がありますが、ローカルアカウントはマシン名をつける付けないがあります。また、調べたところ`Microsoftアカウント`はメールアドレスの前に`MicrosoftAccount`を付けるパターンがあるらしい、さらにメールアドレス全てを入れるのではなくメールアドレスの＠マークの前だけを入れるパターンもあるらしい？なので、

- ローカルユーザー名
- マシン名\ローカルユーザー名
- foo@bar.net(MSアカウントのメールアドレス)
- foo(MSアカウントのメールアドレスの前の部分)
- MicrosoftAccount\foo@bar.net(MSアカウントのメールアドレス)
- MicrosoftAccount\foo(MSアカウントのメールアドレスの前の部分)

あたりのパターンが考えられます。
またパスワードは、`Microsoftアカウント`に２段階認証をかけているので、

- ローカルユーザーのパスワード
- PINコード
- MSアカウントのパスワード
- ２段階認証未対応アプリのために設定できるアプリパスワード

のパターンがあります。

**多すぎです。**

でも頑張って頑張っていろいろな組み合わせを試したんですが、結局ログインできませんでした。

# 再調査

もういいやと思ってあきらめて数か月放置してたんですが、改めて再調査していたところ、原因が判明しました。

どうやら`ローカルアカウント`を`Microsoftアカウント`に昇格させたあと、`Microsoftアカウント`の`ユーザー名/パスワード`で一回ログインしてないとダメらしい。

僕の場合、`ローカルアカウント`使用時に`PINコード`を設定して、その後に`Microsoftアカウント`に昇格させたので、`Microsoftアカウント/PINコード`の組み合わせでしかログインしていませんでした。

なので一旦`PINコード`を解除して、`Microsoftアカウント`の`ユーザー名/パスワード`でWindowsへログインしてみたところ、`Microsoftアカウント`の`ユーザー名/パスワード`でリモートデスクトップ接続できるようになりました。

つまり色々なパターンを試していたわけですが、そもそも**何を入れてもログインできない状態だった**わけです。

その後`PINコード`を再設定して、WindowsHelloでの`指紋認証`なども設定しましたが、`Microsoftアカウント`の`ユーザー名/パスワード`の組み合わせでリモートデスクトップ接続できています。

# 結論

- `Microsoftアカウント`でログインできるようにした時は、とりあえず一度`Microsoftアカウント`の`ユーザー名/パスワード`でログインしておく

ていうか、気づかないでしょ、そんなの…。

# 参考サイト

- https://phoenixknight.jp/microsoft-account-has-a-habit/
（4）大空と大地の中で#1

#僕は[RequireComponent()]を理解しなければなりません！

リファレンスには、
これはセットアップエラーを回避するのに役に立ちます、、、？
忘れ物をなくすための機能？
わざわざ追加して書く必要があるものなのか？
本当、よく分からない

よし、使ってみよう。
でも使い方が、そもそも分からない。

##そこで作戦
1）RequireKnightオブジェクトを作成して
2）Rigidbodyコンポーネントをつけよう。
3）RequireTestスクリプトを作成してそこに[RequireComponent()]と適当にRigidbody取得的なこととか書こう。
で、
4）Rigidbodyコンポーネントをはずしちゃおう。

その時に何が起こるのか？


###1）RequireKnightオブジェクトを作成して
![0000.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232643/5af1221b-ae29-09ad-c7aa-44a5a968ebb4.jpeg)

###2）Rigidbodyコンポーネントをつけよう。
![0001.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232643/1f1a8579-a6a3-ca37-72c8-90003b5d64d2.jpeg)

###3）RequireTestスクリプトを作成してそこに[RequireComponent()]と適当にRigidbody取得的なこととか書こう。

```csharp 
public class RequireTest : MonoBehaviour
{
    Rigidbody rigid;

    void Start()
    {
        // リジッドボディを取得
        rigid = this.GetComponent<Rigidbody>();

        // 適当に
        if (rigid.useGravity == true)
        {
            // 重力を無効にする
            rigid.useGravity = false;
        }
    }
}
```

そしてついに
###4）Rigidbodyコンポーネントをはずしちゃおうっと。
![001.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232643/786e10d9-58eb-bd63-ad9c-2cdabafd5f62.gif)

#僕は[RequireComponent()]を理解しなければなりませんでしたが
###[RequireComponent()]をつけてませんでした。

[RequireComponent()]（）の中には何入れるのよ？という「疑問」
こうらしい、、、
`[RequireComponent(typeof(Rigidbody))]`
RequireComponent(typeof(コンポーネント名))]

##出来た！ので検証、、、

```csharp 
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

[RequireComponent(typeof(Rigidbody))]

public class RequireTest : MonoBehaviour
{
    Rigidbody rigid;

    void Start()
    {
        // リジッドボディを取得
        rigid = this.GetComponent<Rigidbody>();

        // 適当なif文
        if (rigid.useGravity == true)
        {
            // 重力を無効にする
            rigid.useGravity = false;
        }
    }
}

```
![002.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232643/d3b40445-0380-0471-036c-56ad13bbc187.gif)

なるほど、コンポーネントをつけてると既にはずせない。

##じゃあ、もともとコンポーネント付けてなかったら？

![05.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/232643/047063d7-9942-9387-2926-003fee6a73eb.gif)

##必要なコンポーネントを自動でつけてくれるんやー

###参考にさせて頂いたサイト
[スクリプトリファレンス](https://docs.unity3d.com/ja/current/ScriptReference/RequireComponent.html)
[Require ComponentとReset()](https://qiita.com/JunShimura/items/6576eb63c19c2c9f0c0a)
[]()
日付時刻を表す列は "日付" と "時刻" を表す列に分解したほうがよいですよというお話

パフォーマンスなんてまったく気にしないし、容量的な問題はすべて💰で解決するし。と、いうならそのままで構わない。
# どういうことか
こういうこと

|DateTime|
|:--:|
|2020-05-13 10:00:00|
|2020-05-13 10:15:00|
|2020-05-13 10:30:00|

|Date|Time|
|:--:|:--:|
|2020-05-13|10:00:00|
|2020-05-13|10:15:00|
|2020-05-13|10:30:00|

# なぜか
大量データであっても速やかに処理されるようできるだけ整理をしてほしいから。
データモデルにデータがロードされるときイイ感じにデータを整理する仕組みを持っているのだけど、その管理単位は "列"。特に日付時刻の値は、テーブルの列の中でユニークな値となる傾向が高く、整理はされるもののその効果が低い。効果が低いのでデータモデルの容量が大きくなり大きなメモリを消費することになるし、結果的に集計のパフォーマンスが低下する傾向になる。

"yyyy-MM-dd hh-mm-ss" を "yyyy-MM-dd" と "hh-mm-ss" に分割し、それぞれの列で整理しておけば、行で 日付時刻を表現しつつデータを整理しておくことができる。

別の表現をするとこういうことなのだけど、

|Date|Time|
|:--:|:--:|
|2020-05-13 00:00:00|1899-12-30 10:00:00|
|2020-05-13 00:00:00|1899-12-30 10:15:00|
|2020-05-13 00:00:00|1899-12-30 10:30:00|

整数部分 と 小数部分 を分けるということについては、超絶に行数が多いデータモデルで検討することがある手段ではある。だけど、日付時刻についてはタイム インテリジェンス関数が使えるようにもなるということでもある。

# 具体的に起きること
極端な例で
2020-01-01 00:00:00 から 2020-12-31 23:59:59 の連続した日付時刻を持つ、**わずか 31,622,400 行**
Table1 : 列 "DateTime" のみ
Table2 : 列 "Date" と "Time"

```text
// RowCount
31622400 meta [
    IsParameterQuery=true,
    Type="Number",
    IsParameterQueryRequired=true
]

// TimeStampList
let
    Source = List.DateTimes(
        #datetime( 2020, 1, 1, 0, 0, 0 ),
        RowCount,
        #duration( 0, 0, 0, 1 )
    )
in
    Source

// Table1
let
    Source = Table.FromColumns( { TimeStampList }, { "DateTime" } ),
    ChangedType = Table.TransformColumnTypes(
        Source,
        {"DateTime", type datetime}
    )
in
    ChangedType

// Table2
let
    Source = Table.FromColumns(
        { TimeStampList, TimeStampList },
        { "Date", "Time" }
    ),
    ChangedType = Table.TransformColumnTypes(
        Source,
        {
            {"Date", type date},
            {"Time", type time}
        }
    )
in
    ChangedType
```
**DAX Studio の Vertipaq Analyzer**
DMV をポチポチと参照するのもよいけれども便利なツールを使う。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193509/fa6e1d48-48ec-5067-b2a2-35e4c50858d7.png)
テーブルと各列が消費しているメモリサイズのざっくり見方、[Cardinality] は 列に含まれるユニーク値の数を示し、[Col Size] [Data] [Dictionary] [Hier Size] キャプチャでは切れてしまったけど、[User Hier Size] [Rel Size] との合計が [Table] になる。
Table1 : 列 "DateTime" のみでは 1.8 GB
Table2 : 列 "Date" と "Time" では 90 MB
と桁違いの消費になる。半分で済む容量の行数になったとしても消費しすぎと考えるべきなのでしょう。データモデルにはもっと列が含まれるはずだし。Table1 だけのデータセットストレージサイズ(おおむね pbix ファイルのサイズ)は300 MB とかになるはず。

# 検討しておきたいこと
- 日付レベルの集計のみ必要ならば、日付時刻の値は "日付"( yyyy-MM-dd 00:00:00 と丸める)に。
- 時刻によるの集計も必要になる場合、秒単位 / 分単位 / 時間単位など集計単位で丸める処理が必要
- 丸める処理はロードされるデータに対し行われなければならない

# 思ったこと🙄
不用意に Power BI Pro で許容される最大データセットサイズ( 1 GB )の多くの占める可能性を考えたら必須に近いと思うのです。


# その他
- [Power BI 勉強会 - connpass](https://powerbi.connpass.com/)
- [Power BI Desktop を使い始めるには](http://qiita.com/PowerBIxyz/items/6c4735cb5b5712e70981)
- [Excel で Power Query を使い始めるには](http://qiita.com/PowerBIxyz/items/52e563037b855a099ca9)
シンプルなImageEffect　その７。SV_VertexIDを使った頂点カラー加算

Twitterにアップした頂点カラー加算ImageEffectのシェーダコードを貼っておきます

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今日のシンプルなImageEffect。SV_VertexId使用による頂点カラー加算<br><br>SV_VertexID使うので#pragma target 3.5が必要。<br>※metalが3.5対応してるから良いよな…<br><br>例えば照り返しの表現として左上を明るくしたり、<br>それ以外でもちょっとだけ色変えたのを載せておくと、雰囲気変わるから良いです。 <a href="https://t.co/o8kJQF8zXr">pic.twitter.com/o8kJQF8zXr</a></p>&mdash; MIYAKE (@ScreenPocket) <a href="https://twitter.com/ScreenPocket/status/1260877624810692610?ref_src=twsrc%5Etfw">May 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

SV_VertexIDを使用するので #pragma target 3.5　が必要です。
画面４角の色を指定して配列に突っ込んで、頂点番号で色を引っ張っている実装です。

```glsl:VertexColorAdditive.shader
Shader "ScreenPocket/ImageEffect/VertexColor Additive"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _ltColor ( "Left Top Color", Color ) = (0,0,0,0)
        _rtColor ( "Right Top Color", Color ) = (0,0,0,0)
        _lbColor ( "Left Bottom Color", Color ) = (0,0,0,0)
        _rbColor ( "Right Bottom Color", Color ) = (0,0,0,0)
    }
    
    SubShader
    {
        // No culling or depth
        Cull Off ZWrite Off ZTest Always

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma target 3.5

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
                uint vid : SV_VertexID; // vertex ID、 uint の必要があります
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                fixed4 color : COLOR0;
                float4 vertex : SV_POSITION;
            };

            fixed4 _ltColor;
            fixed4 _rtColor;
            fixed4 _lbColor;
            fixed4 _rbColor;
            
            v2f vert (appdata v)
            {
                fixed4 colorArray[4] = {_lbColor, _ltColor, _rtColor, _rbColor};
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                o.color = colorArray[ v.vid ];
                return o;
            }

            sampler2D _MainTex;

            fixed4 frag (v2f i) : SV_Target
            {
                return tex2D( _MainTex, i.uv ) + i.color;
            }

            ENDCG
        }
    }
}

```
return tex2D( _MainTex, i.uv ) + i.color;
を
return tex2D( _MainTex, i.uv ) * i.color;
にすれば乗算合成出来るので、暗い色を載せたい場合はそちらをご準備下さい。

もしかするとiOS実機に持っていくと上下反転しちゃうかも？
その場合は
[プラットフォーム特有のレンダリングの違い](https://docs.unity3d.com/ja/2018.4/Manual/SL-PlatformDifferences.html)
にある

```
#if UNITY_UV_STARTS_AT_TOP
```
を使えば対応できそうですが、現状未検証です。。
Ruby on Rails チーム開発のデプロイで参考になった記事

プログラム勉強中です。自分の備忘録として投稿します。
# チーム開発のデプロイで参考になった記事
- 【rails5.2】master.keyを本番環境（AWS EC2）に設定（追加作成）する方法<br>
https://qiita.com/mylevel/items/4653f625ffabc7318a8a
- 複数人で新規Railsプロジェクトを立ち上げる時の落とし穴<br>
https://qiita.com/marlion7/items/aaf5fb8c86004b32194a
- 【Rails5.2】秘匿情報はsecret.ymlではなくcredentials.yml.encで管理する【初心者】<br>
https://qiita.com/15grmr/items/a687d0ed211ef60e751c
【言語別】ジェネリクスの型パラメータを書く場所

言語によって型パラメータを書く場所が異なり混乱するためまとめてみた。
（編集リクエストをいただければ他の言語も追加します。）


## Java

### 型定義

```Java
class MyType<T> { }
```

### 変数の型指定

```Java
MyType<T> myVariable
```

### 関数定義

```Java
public static <T> void myFunction() { }
```

### 関数呼び出し

```Java
this.<String>myFunction()
```


## Kotlin

### 型定義

```Kotlin
class MyType<T> { }
```

### 変数の型指定

```Kotlin
val myVariable: MyType<String>
```

### 関数定義

```Kotlin
fun <T> myFunction() { }
```

### 関数呼び出し

```Kotlin
myFunction<String>()
```


## TypeScript

### 型定義

```TypeScript
class MyType<T> { }
```

### 変数の型指定

```TypeScript
const myVariable: MyType<string>
```

### 関数定義

```TypeScript
function myFunction<T>(): void { }
```

### 関数呼び出し

```TypeScript
myFunction<string>()
```
備忘録 : 煩わしいプロンプトをさっと見やすく改良する。 // Linux プロンプト 変更

いろいろとめんどくせえし、さっと手短に書きます。
備忘録だし、ほぼ俺のためだけのやつだし

```php
// .bashrcを開く
$ vim .bashrc
```
↓

```php
// 一番したに移動
# prompt change
export PS="\[e[31m\]FuckMyLife\[\e[0m]: \w \$ "
```

↓

```php
$ . .bashrc
```
# 以上
------------------

##補足
\[e[31m\] 〜　はこれ以降赤色にするよってこと
\]\e[0m] 　　 で色を元に戻す

\w           はカレントディレクトリ
\$           は、まあ見たまんま。
ansible: zabbix5.0インストール(CentOS8用) 

## つくったもの

Zabbix5.0(LTS)が先日リリースされたので、前の記事で作ったZabbix4.0ベースで作ってみた。
5.0で驚いたのは、見た目も良くなって＆MediaType(MSTeams,Redmineとか)もたくさんあってスゴイっす。

Ansible-playbook(https://github.com/mishikawan/zabbix50-ansible.git )です。
Centos8環境に、Zabbix5.0(ZabbixRepo使用)をインストールします。

## Playbookの内容

rolesとして3つに分割
  - common: OSの初期設定用
  - server: zabbix-server設定用
  - agent: zabbix-agent設定用

#### commonの処理内容

 1. selinux無効化
 2. hostname設定
 3. timezoneの設定(zone情報指定可能)
 4. zabbix-repoの登録

#### serverの処理内容
 1. Firewalldの穴開け(http,snmptrap,zabbix(10051))
 2. zabbix-server関連のyum install
 3. mysqlの設定ファイル修正(innodb_file_per_table対応)
 4. mysql開始
 5. mysql設定( DB名"zabbix"のユーザ"zabbix"のパスワード設定)
 6. zabbix用初期データ(create.sql.gz)を導入
 7. httpd(phpのtimezone)設定
 8. httpd開始
 9. zabbixの設定ファイル更新＋新規作成
 10. zabbix-serverの開始

#### zabbix-agentの処理内容
 1. Firewalldの穴開け(zabbix(10050))
 2. zabbix-agentのyum install
 3. zabbix-agent設定(HostnameItem,Server,ServerActive)
 4. zabbix-agentの開始

## 設定情報のカスタマイズ

設定情報は、inventory/inventory.ini に格納されているので自分用に修正
以下、clone直後の状態。

```ruby:初期設定情報
Zabbixサーバ機のホスト名は testsv01 ,IPは 192.168.11.1
Zabbixエージェント機のホスト名は testcl01 ,IPは 192.168.11.1
タイムゾーンは、 Asia/Tokyo
DB(zabbix)のパスワードは password (ただし、ユーザ名は"zabbix"固定)
```

```yml:inventory/inventory.ini
[servers]
testsv01 ansible_ssh_host=192.168.11.1 ansible_ssh_user=root
[agents]
testcl01 ansible_ssh_host=192.168.11.1 ansible_ssh_user=root
[all:vars]
timezone="Asia/Tokyo"
zabbix_server_ip="192.168.11.1"
[servers:vars]
zabbix_mysql_password="password"
```

必要に応じて変更してください。

## playbook実行方法

  1. inventory.iniの修正
  2. ansibleサーバで以下を実行

```shell:実行コマンド
git clone https://github.com/mishikawan/zabbix50-ansible.git
cd zabbix50-ansible/
ansible-playbook -i inventory/inventory.ini site.yml
```
  3.稼働確認。zabbix-serverはURLでアクセス可能。

```shell:URL情報
http://{zabbix-server-ip}/zabbix
  ID = Admin
  PASS = zabbix
```
Rails　パンくずリスト gretel　の使い方

## 概要
こんにちは、今回はパンくずリストを作成する際に使ったgretelというgemの使い方を記載します。

[gretel](https://github.com/kzkn/gretel)

こんな感じです。
<img width="402" alt="スクリーンショット 2020-05-14 19.22.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509166/db27c907-b27b-845a-34e4-597e3ac32d13.png">


## インストール

```
gem 'gretel'
```

bundle installします。

## ファイル作成
下記コマンドを打つと専用の設定ファイルが作成されます。

```
$ rails generate gretel:install
```
config/breadcrumbs.rbというファイルが作成されたはずです。

## パンくずを作成

前項で作成された設定ファイルにパンくずを設定していきます。

```config/breadcrumbs.rb
crumb :top do
  link "トップページ", root_path
end

crumb :shops do
  link "カフェ一覧", shops_path
  parent :top
end

crumb :user do |user|
  link user.username, user_path(user)
  parent :shops
end

crumb :edit_user do |user|
  link "編集", edit_user_registration_path
  parent :user, user
end

crumb :following_user do |user|
  link "フォロー", following_user_path
  parent :user, user
end

crumb :followers_user do |user|
  link "フォロワー", followers_user_path
  parent :user, user
end

crumb :shop do |shop|
  link shop.name, shop_path
  parent :shops
end

crumb :edit_shop do |shop|
  link "編集", edit_shop_path
  parent :shop, shop
end
```

今回は最大4階層までのパンくずを設定しました。

crumbでパンくずを定義し、linkにパスを記述します。
parentには親となるパンくずを設定。

parent :モデル名　と記述したあとに注目してください。

```ruby
crumb :edit_shop do |shop|
  link "編集", edit_shop_path
  parent :shop, shop #ここに注目!
end
```

このカンマ以降の記述が無ければ対象のビューで
NoMethodErrorが出てしまいます。

この書き方がなかなか分かりませんでした。

## viewに配置
view側はシンプルです。

```html.erb
<% breadcrumb :user, @user %>
<%= breadcrumbs separator: " &rsaquo; " %>
```

これだけです。

separatorでパンくずの階層である　>　を追加しています。
その他にも色々とオプションがあるのでぜひ[公式](https://github.com/kzkn/gretel)で確認してみてください。

以上です。
お付き合い頂きありがとうございました。
応用数学_学習レポート

<h1>応用数学</h1>

<h2>0.用語</h2>

・スカラー
　ベクトルに対する係数
　四則演算が可能

・ベクトル
　大きさと向きを持つ量
　スカラーの集合で表される

・行列
　スカラーを表形式で表したもの
　ベクトルを並べたもの
　(用途)ベクトルの変換

・逆行列の公式

```math
行列A：A=
$\begin{pmatrix}
a & b \\
c & d \\
\end{pmatrix}の場合
```

```math
A^{-1}=
\frac{1}{ad-bc}
\begin{pmatrix}
d&-b \\
-c&a \\
\end{pmatrix}
```

<h2>1.線形代数</h2>
$ $
【メモ】
・固有値と固有ベクトル
　特殊なベクトル$\overrightarrow{x}$とその係数λを行列Aに対する固有ベクトル、固有値という。
　$A\vec{x}＝λ\vec{x}$
$ $
・固有値分解
　ある実数を正方形にならべて作られた行列Aが固有値$\{λ_1},\{λ_2},･･･$と固有ベクトル$\overrightarrow{v_1},\overrightarrow{v_2},･･･$
　を持ったとする。この固有値を対角線上に並べた行列𝛬（それ以外の成分は0）とそれに対
　応する固有ベクトルを並べた行列Vを用意した場合、以下のように表すことができる。
　$𝐴𝑉=𝑉𝛬$
　$\Leftrightarrow 𝐴=𝑉𝛬V^{-1}$
　このように正方形の行列を３つの行列の積に変換することを固有値分解という
$
$
・特異値分解
　固有値分解ができるのは正方行列のみ。正方行列以外は類似した特異値分解を使用する
　$M\overrightarrow{v}＝σ\overrightarrow{v}$
　$\Leftrightarrow　M^{T}\overrightarrow{v}＝σ\overrightarrow{v}$
$ 
$
　このような特殊な単位ベクトルがある場合は以下のように表すことができる。
　$𝑀=𝑈𝑆V^{-1}$

・特異値分解の応用
　画像データのデータ量を削減することが可能

【要点まとめ】
　・本章ではAI学習の基礎となる線形代数学について学んだ。線形代数学は行列式を用いる
　ことで数式を簡略的に表示することができる。また固有値分解により計算の簡略化をする
　ことができる。実際の利用場面として、画像データのデータ量を削減する目的のため特異
　値分解が使われることがある。

<h2>2.確率・統計</h2>

【メモ】
・確率
　頻度確率(客観確率)
　発生する頻度

・ベイズ確率(主観確率)
　信念の度合い

・条件付き確率
　ある事象X=xが与えられた下で、Y=yとなる確率
　$P(Y=y|X=x)=P(Y=y,X=x)/P(X=x)$

・独立な事象の同時確率
　お互いの発生には因果関係のない事象X＝xと事象Y=yが同時に発生する確率
　$P(Y=y,X=x)=P(X=x)P(Y=y)=P(X=x,Y=y)$	

・ベイズ則
　一般的に事象X＝xと事象Y＝yに対して
　$P(Y=y|X=x)P(X=x)=P(X=x|Y=y)P(Y=y)$

確率変数と確率分布
・確率変数
　事象と結びつけられた数値
　事象そのものを指す場合もある

・確率分布
　事象の発生する確率の分布
　離散値を表に表すことができる

$ $
・期待値
　その分布における確率変数の平均の値or「ありえそうな」値
　$E(f)=\sum_{k=1}^{n}P(X=x_k)f(X=x_k)$
　$E(f)=\int P(X=x_k)f(X=x_k)$	

分散と共分散
・分散
　データの散らばり具合
　データの各々の値が期待値からどれだけズレているか平均したもの
　$Var(f)=E((f(X=x)-E(f))^2)=E(f^2(X=x))-(E(f))^2$	

・共分散
　2つのデータ系列の傾向の違い
　　正の値を取った場合は似た傾向
　　負の値を取った場合は逆の傾向
　　ゼロを取った場合は関係成は乏しい
　$Cov(f,g)=E(f(X=x)-E(f))(g(Y=y)-E(g))=E(fg)-E(f)E(g)$

分散と標準偏差
・標準偏差
　データや確率変数の散らばり具合を表す数値の一つ
　分散の正の平方根で表される
　$σ=\sqrt{Var(f)}=\sqrt{E((f(X=x)-E(f))^2)}$

・様々な確率分布
　べルヌーイ分布
　　コイントスの表裏のように2種類の結果のみを得られる実験、試行を0,1で表した分布

　マルチヌーイ(カテゴリカル)分布
　　サイコロのような複数の結果が得られる分布

　二項分布
　　ベルヌーイ分布の多試行版

　ガウス分布
　　釣鐘型の連続分布

【要点まとめ】
　・条件付き確率と独立な事象の同時確率は互いに計算により求めることができる。
　・ベイズ則を利用することで条件付き確率もしくは独立な事象の同時確率を求めることができる。
　・確率や期待値、分散は確率変数と確率分布により表される。
　・確率の分布には様々な種類があり、結果の種類数(2個orそれ以上)、
　　もしくは試行数などの要素により扱える分布が異なる。

<h2>3.情報理論</h2>
$ $
・自己情報量
　対数の底が2のとき、単位はビット(bit)
　対数の底がネイピアのeのとき、単位はビット(nat)
　$I_x = −log P_x = log W_x $
　但し、$P_x = \frac{1}{W_x}$

・シャノンエントロピ
　自己情報量の期待値
　$H_x = E(I_x) = −E(log(P_x)) = -\sum(P_xlog(P_x))$	

・カルバック・ライブラー・ダイバージェンス
　同じ事象・確率変数における異なる確率分布P,Qの違いを表す。
　$D_{KL}(P||Q) = E{xp}[log\frac{P_x}{Q_x}] = E{xp}[log{P_x}-log{Q_x}] = \sum(P_xlog\frac{P_x}{Q_x})$　

$ $・交差エントロピー
　KLダイバージェンスの一部を切り出したもの
　Qについての自己情報量をPの分布で平均している
　$H(P,Q) = H(P) + D_{KL}(P||Q)$
　$H(P,Q) = -E{xp}[log{Q_x}] =  -\sum(P_xlogQ_x)$
	

【要点のまとめ】
　・11個が10個になることと、2個が1個になることは変化量としては同じ。
　　しかし、変化の比率として考えることでそれぞれ1/10と1/1となる。
　　(変化した個数/変化前の個数)
　・数が増えるほど増加量は減るので、自己情報量は対数で表すことができる
　・機械学習の際はAIにシャノンエントロピはが最大になる値を探させることが多い
　・交差園トロピーを使用することで情報を変換できるようになり、
　　受け取側に自然に渡さなければならないデータの量の作減が可能になった。


以上。
TypeScriptの「この記号・単語なんだっけ？」をまとめる - as, in, is, !, ?. , ?? - 

TypeScriptの構文で「意味は分かるけど名前は分からん。そして単発記号or単語でググっても見つからん！」というのがあるのでメモとしてまとめます。
随時追加予定。

# `as` - type Assertion -

コンパイラに推論される型を明示的に上書きする。

[Advanced Types · TypeScript](https://www.typescriptlang.org/docs/handbook/advanced-types.html#type-guards-and-type-assertions)

```ts
interface Foo {
  bar?: number;
  bas?: string;
}

let foo = {} as Foo; // {} はFoo型だとコンパイラに伝えている
foo.bar = 123;
foo.bas = "hello";
```

# `in` - in operator

JSの [in operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in) と使い方は同じ。オブジェクトのプロパティの判定に使える。
TypeScriptの場合はさらに、型の絞り込みとしても機能する。他にもMapped TypeのKeyの生成でも使われる。

[TypeScript の"is"と"in"を理解する - Qiita](https://qiita.com/ryo2132/items/ce9e13899e45dcfaff9b)でも解説してます。

[Advanced Types · TypeScript](https://www.typescriptlang.org/docs/handbook/advanced-types.html#using-the-in-operator)

```ts
interface Bird {
    fly();
    layEggs();
}

interface Fish {
    swim();
    layEggs();
}

function move(pet: Fish | Bird) {
  // petにswimプロパティがあるかどうか判定する。以降そのプロパティを持つ型として推論される。
  if ("swim" in pet) {
　　// ここではFish型
    return pet.swim();
  }
  // ここではBird型
  return pet.fly();
}
```

# `is` - type predicates -

真偽値を返す関数の引数の型を絞り込めるようにする。
ユーザー定義型のType Guardとして使われることが多い。

[TypeScript の"is"と"in"を理解する - Qiita](https://qiita.com/ryo2132/items/ce9e13899e45dcfaff9b)でも解説してます。

[Advanced Types · TypeScript](https://www.typescriptlang.org/docs/handbook/advanced-types.html#using-type-predicates)

```ts
// この関数がtrueの場合、その空間でisFishの引数の変数は、Fish型として推論される
function isFish(pet: Fish | Bird): pet is Fish {
  return (pet as Fish).swim !== undefined;
}
```

# `!` - non-null assertion operator -

コンパイラにこの値はnull,undefinedではなないと伝えるもの。
使いすぎ注意。丁寧に書くならtype guardで型を絞り込んだ方が良い。

[TypeScript 2.0 · TypeScript](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator)

```ts
function processEntity(e?: Entity) {
  validateEntity(e);
  let s = e!.name; // eはu`ndefined | Entity`ではなくEntityとして推論される
}
```

# `?.` - optional Chaining -

null, undefinedセーフな呼び出しを可能にする構文。便利。

[TypeScript 3.7 · TypeScript](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining)

```ts
let x = foo?.baz(); // fooがnull, undefの時はundef, それ以外の時はbaz()の戻り値
```

# `??` - nullish Coalescing -

値がnull, undefだった場合、`??`の右辺の評価値を返す構文。
null, undefチェックの三項演算子のシンタックスシュガー。

[TypeScript 3.7 · TypeScript](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#nullish-coalescing)

```ts
let x = foo ?? bar(); // fooがnull, undefinedだったらbar()を実行, それ以外ならfooを返す
```


# 参考

- [Documentation · TypeScript](https://www.typescriptlang.org/docs/home.html)
- [Introduction - TypeScript Deep Dive 日本語版](https://typescript-jp.gitbook.io/deep-dive/)
Anaconda でJupyter Notebookが読み込めないときの解決策

そもそもターミナルが(base)環境から抜け出せなかった。
原因はcondaがUbuntuを乗っ取る状態らしく、同じ症状の人も「別に害はないでしょう」的な感じであしらわれていた。
ただこの状態だとBase環境にすべてのモジュールを入れないと、仮想環境でエラーがでるため、実質仮想環境が作れないという実害が発生。
↑この問題は因果関係がないかもしれない。要検証

対策
condaのコンフィグからBaseをデフォルトでアクティベートする設定を解除

```
conda config --set auto_acttivate_base False
source /.bashrc(<-私の場合）
```
これでひとまず仮想環境を作れる状態に戻せた。
しかしJupyter NoteBookが起動するがカーネルがすぐシャットダウンするトラブルに

下記対処で応急対処。
```
conda update conda
conda install -c conda-forge jupyterlab
```
しかし使っているうちに明らかになった点
- 表面上、仮想環境はつくれるが、Base環境と一緒
- 途中で環境を切り替えると作動しない（再起動で回復）

この症状のおかげで「エラーが出ないのに処理結果が成功しない」という減少にハマり、1週間近く費やした。
具体的にはディープラーニングで書類上の手書き文字を拾ってくる処理なのだが、拾ってくる画像があるべきところに生成されない。
当初は

- TF1->TF２でモデリングの方を疑い、TF２でモデリング構築
- Kerasとtf.kerasのあいのりを疑い脱独立版Kerasに改変
- Pillowとopencvのあいのりを疑い検証

すべて試して最終的にRootのpipにのみ`opencv`が含まれていないことに気づく。

```
$ pip install opencv-python
$ pip install opencv-contrib-python
```
で、あっさり解決。
早く仮想環境が作れない問題を解決しなければ。と誓う。。



＃ 参考にさせていただいたサイト

Ubuntuの端末（ターミナル）に(base)と表示される理由と対処法
http://fanblogs.jp/mugsimon/archive/4/0

pip で OpenCV のインストール
https://qiita.com/fiftystorm36/items/1a285b5fbf99f8ac82eb
【Windows】実務で使える便利なショートカットコマンドを紹介します。

#　はじめに

今回は、実務で使えるWindowsのショートカットコマンドについて紹介していきたいと思います。
インフラエンジニアでWindowsServer等の運用/構築をしていて、ボタンポチポチで起動していくことが面倒だと思ったことありませんか？
今回はそんなあなたのためにWindowsのショートカットコマンドを紹介します!


# 実行環境

- HyperVisor
VMware ESXi6.7

- OS
  WindowsServer2012 R2

※おそらくどのWindowsPC/WindowsServerでも使用可能ではないかと思います。


# 前提

「Windows+R」同時押しで起動できる「ファイル名を指定して実行」から実行するコマンドを対象にしています。

**※コマンドプロンプトでも実行可能**

![1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/0fee7817-d228-f29d-1d54-59d63f83faa3.jpeg)


# ショートカットコマンド

私がよく使用するショートカットコマンドを紹介していきたいと思います。


## ネットワーク接続画面


- 実行コマンド
 
```
ncpa.cpl
```

- 起動する画面
![2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/05c7abf4-3454-f912-c31b-23f5b66c0ee5.jpeg)

## プログラムと機能


- 実行コマンド  

```
appwiz.cpl
```

- 起動する画面

![3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/b5517988-5226-9d88-fbbe-69c4c5263362.jpeg)

## サービス画面


- 実行コマンド

```
services.msc
```

- 起動画面  

![4.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/6e80c942-ac53-e65a-7528-b5f3f1471302.jpeg)

## レジストリ

- 実行コマンド

```
regedit
```

- 起動画面
  
![5.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/6593e0f9-4ebc-3033-3729-fd0f8f113a91.jpeg)


## システムのプロパティ

- 実行コマンド

```
sysdm.cpl
```

- 起動画面

![6.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/c691d96d-6720-a64e-2aa6-d5cfb88a7e16.jpeg)


## システム情報

- 実行コマンド

```
msinfo32
```

- 起動画面

![7.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/37ea028b-4b22-369b-2dac-cb9ec9bbd947.jpeg)


## コンピューターの管理

- 実行コマンド

```
compmgmt.msc
```

- 起動画面

![8.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/792ae02c-3010-d044-ad26-1ba95444d1a6.jpeg)


## ディスクの管理

- 実行コマンド

```
diskmgmt.msc
```

- 起動画面

![9.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/13f8dc7f-de6c-9c4a-eaac-2d7d58e47330.jpeg)

## イベントビューアー

-　実行コマンド

```
eventvwr
```

- 起動画面

![10.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/ebdb60e3-531b-e59c-c748-ac62d3d72bc0.jpeg)

## サーバーマネージャー
**※WindowsServerのみ対象**

-　実行コマンド

```
servermanager.exe
servermanager.msc
servermanager
```

※WindowsServer2012R2は「servermanager.exe」で起動可能

**※OSバージョンによってコマンドが異なるとのこと**
https://www.haruru29.net/blog/how-to-start-server-manager/

- 起動画面

![11.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/48008c80-9000-692d-212e-f52f64510de5.jpeg)

## エクスプローラー

- 実行コマンド

```
explorer
```

- 起動画面

![13.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/636476/4c2ccd67-1747-db95-de82-aac74dff4eee.jpeg)


# 最後に

いかがでしたでしょうか？

**今回紹介したような形で必要な画面をショートカットコマンドを使用することによって、すぐに起動することができます。**

実際にWindowsServerの構築現場で覚えていると便利なものばかりです。

こちらを全て使いこなすことができれば、あなたは一目置かれるでしょう(笑)



  
  

***↓Twitterのフォローも宜しくお願いします！***
https://twitter.com/satton6987

※主にインフラエンジニア向けに情報発信をしています!
Git Submoduleを自動で最新に保つ

簡単に言うとSubmoduleを自動更新できるようになります｡この術は書かないといけないという使命感に駆られました｡
[Dependabot](https://dependabot.com/)を使います｡
コーディングする必要は一切ないです!
一文字も書きません｡楽です｡
テスト用に作ったRepo:[koumaza/subm-test](https://github.com/koumaza/subm-test.git)

## 準備
1. GithubにてRepoを作りClone
2. `git submodule add git@github.com:``user``/``repo``.git`
3. `git commit -m 'Add submodule' && git push`

## Dependabotの導入
1. [dependabot](https://dependabot.com/)から`Signin` > `Github認証`
2. Git Submoduleを選択して追加
3. 右上からアカウントの設定に行き､`Merge options`の`Allow auto-merging to be enabled on projects`に✅
4. Repoの設定に行き`Automatic PR merging`の下の項目を二つとも`All updates`にする

## テスト
注意点ですが､CIを使ってないとAutomergeが動作しません｡私は[SiderCI](https://sider.review/)を使ってます｡
(CI/CDが必要ないなら､GitHub Actionsで空のWorkflowsを作るのが良いでしょう｡)

SubmoduleのRepoでなんらかのCommitをしてDependabotでBumpを押します｡
そしてPRが出てきてCIが通ったら自動でMergeされます｡

つまり､SubmoduleのRepoに変更が加わると翌日に自動でマージされます｡
それか､手動でもできるしね｡
LINE Developer Meetup for Android #62 メモ書き

[【Online】LINE Developer Meetup for Android #62](https://line.connpass.com/event/173284/) で気になったところだけメモ。
（最近メモばっか書いてんな…）

# APKファイルはいかにして作られるのか

- Android は端末の種類が多くて実行環境がコレ！って決まってないから JVM 上で動くやつ（.dex）を実行する
- コンパイル
    - aapt2: AndroidManifestとリソースファイル
        - *.flat を生成
            - R.java
            - proguard-rules.pro
    - R8 & D8
        - classes.dex を生成
        - コード圧縮
        - リソース圧縮
        - 難読化
        - 最適化
        - desugar(D8がやってくれる）
- 署名
    - debug は AndroidStudio が自動で生成してくれたやつで署名
- apkbuilder: コンパイルしたものをまとめる
- zipalign: 読み込み速度とメモリ消費を抑える

# Androidアプリに潜む脆弱性 LINEの場合

- 脆弱性対策
    - PRレビュー
    - 専門チームによるレビュー
        - API設計、実装コード、STG環境でのチェック
        - 社外報告者による報告
            - Bounty Program
    - 脆弱性の公表
- LINE Android にあった脆弱性（修正済みのもの）
    - SQL インジェクション
        - 不正なメッセージで起こせる
        - 受信したらアプリがクラッシュ
    - SQLite Journal Mode
        - トランザクション中の操作を管理するための方法
        - Android 4.1.1 から PERSIST になっていたせい（それまではデフォルト DELETE だったのかな、きっと）
    - WebView からのリソースアクセス
        - リソースの差し替えが可能
        - JS 経由で盗聴
        - HTTP のページを読み込んでいた
        - HTTPS 化
            - HTTP のページは外部ブラウザひらくなど
        - JS の無効化
    - 書換可能なファイルでのデバッグフラグ
        - ユーザーID とかが Logcat にでちゃう
        - /sdcard 配下にそのフラグをおいていた
    - TextView での HTML タグ
        - ユーザー名に HTML タグが入ってると反映されちゃう
    - パストラバーサル
        - ACTION_SEND で受け取った内容をメッセージで表示するところで起きてた
        - 「..」「.」が入ってたらエラー
- セキュリティチームが報告された脆弱性をみて、サービスの影響度などを考慮して開発チームに依頼がくる

# パスワードのない未来のためのFirebaseで実装するFIDO2

- パスワード認証のリスクいろいろ
- FIDO
    - FIDO Alliance が仕様策定、標準化する認証プロトコル
    - FIDO に対応したデバイスなら OK
    - 端末側に保存される公開鍵を使って認証する
    - パスワード必要なし、デバイスが盗まれなければなりすましのリスク低
- WebAuthn
    - FIDO2
- Firebase Auth
    - カスタム認証でやる
- Cloud Functions
    - FIDO サーバとして利用
- Firestore
    - Challenger、Credential の保存で利用
- Firebase のアプリ登録のとき、フィンガープリントを設定する
    - assetlinks.json が生成される
- Fido2ApiClient という API がある
    - android-safetynet限定？
- 重要な箇所でサインイン処理はさせたほうがいいよね
    - 決済とか
- 複数の端末を1アカウントに紐づけるには
    - デバイスの移行とか FIDO の仕様みてね

# Android 11 最新情報

- 位置情報
    - バックグラウンドの権限を要求できる回数に制限がある
        - あれ、制限があるのは位置情報だけなのか、全部なのかと思ってた。。
- データアクセス監査
    - どの機能でどの情報を使用しているのか追えるようになるやつっぽい
- フォアグラウンドで利用するサービス（カメラ、マイク、位置情報）を manifest に書く必要がある
- FLAG_ACTIVITY_REQUIRE_NON_BROWSER
    - ネイティブアプリで開かせたいときに flags に指定する
- 自分のアプリの設定画面を直接開くことはできない
    - バブルに移行したほうがいい
- システムの動作影響をテストする
    - 開発者オプションでいっこいっこオン/オフできるらしい
- IMEのアニメーションコールバックの指定、フレームレートを変更できる、アプリオ終了ステータスを取れる
- バブル
    - System Alert Window の代替
    - バブル用のアクティビティを作って、必要なプロパティをセット
    - BubbbleMetadata をセットして、Notification に設定して表示
Perfumeボイスを高位合成/HDLコード生成でZynq実装！その２

前回Vocoderのフィルタを生成するところまでやって、しばらく放置していましたが、さすがに尻切れトンボで終わるのも不甲斐ないので重い腰を上げて更新。

#Envelope Filter
Envelopeとは包絡線のこと。音は粗密波なので、AD変換して電圧値になると＋と―の値を繰り返す信号になっているが、Envelopeは元の信号を包み込むような、基本的に正の値の信号。これを楽器音の振幅値として使うことで、音程/ピッチは楽器音だけど、トーンは声音となる。前のページでOctave Filterを作ったのは、このEnvelopeを帯域ごとに切り分けてかけるため。

帯域ごと（ここでは9帯域）に並列にかけるため、1個のEnvelope Filterの回路規模は9倍になって結果に跳ね返ってくる。回路規模はあまり大きくなりすぎないよう注意して設計する。

いくつか試して見ました。
IIR Filterを使ったもの：性能的には問題無いが、IIRフィルタは固定小数点化が面倒だし、発振の可能性あるし色々面倒。
![EnvelopeFilterIIR.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477651/30ef2412-2798-6940-3d5a-16f7ef7ae13f.png)

FIR DecimationとFIR Filterの組み合わせ：FIRはIIRに比べて次数が高くなり（回路規模が心配・・・）がちなので、一旦係数無しのFIR Decimationで高域を落としておいて、その後20次のFIR Filterを使った。こうすることで、FIR FilterのTap数（≒FPGA回路リソース）をだいぶ減らせた。安定していて回路リソースも少なく済むのでこれに決定。

![EnvelopeFIR.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477651/a6b36a97-503d-5abe-70b9-ad0637c40ee0.png)

### シミュレーション結果
![EnvelopeTop.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477651/9826d5c3-a91a-835a-1066-1e0dd8a972bc.png)

![EnvelopeResult.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/477651/f0fe7e6c-c73d-ab64-d1a7-4f4da9e4ac5b.png)
図の説明：
上側：FIR Filter　下側：IIR Filter　青：音声信号、黄：Envelope信号

入力した音声信号に対して、Envelopeが取れていることがわかる。

波形を見るときちんと動作しているが、エフェクターの場合この後、官能評価してパラメータの細かいチューニングは必要。Envelope Filterのフィルタ係数の調整は後でまた行う。

[その3](https://qiita.com/SacredTubes/items/58824fb544537bc2cdbf)はこのEnvelope Filterと前回設計したOctave Filterを組み合わせてVocoder全体を作成します。
【TypeScript】ジェネリックな型を null でも undefined でもないものに制限する

## `null` および `undefined` を除いた型を取得する

ある型から `null` および `undefined` を除いた型を取得するには
[`NonNullable<T>`](https://www.typescriptlang.org/docs/handbook/utility-types.html#nonnullablet) を使うとよい。

```TypeScript:公式サイトに記載されている例
type T0 = NonNullable<string | number | undefined>;  // string | number
type T1 = NonNullable<string[] | null | undefined>;  // string[]
```

## ジェネリックな型を non-nullable なものに制限する

ではジェネリックな型を non-nullable なものに制限したい場合はどうすればよいだろうか。
例えば次のような関数で引数 `value` を non-nullable なものだけにしたい場合である。

```TypeScript
function accept<T>(value: T): void {
    // ...
}
```

このような場合、型パラメータの定義はそのままにして、
non-nullable な型が必要なところで `NonNullable` を適用した型を指定すればよい。

```TypeScript
function accept<T>(value: NonNullable<T>): void {
    // ...
}
```

動作確認：

```TypeScript
function through<T>(value: T): T {
    return value;
}

accept(through<string>("")); // OK
accept(through<string | null>("")); // コンパイルエラー！
accept(through<string | undefined>("")); // コンパイルエラー！
```

／以上