OmniAICreator/Qiita-1.07M huggingface dataset:
初心者による ES6 ジェネレーター

#概要
ES6のgeneratorを利用することで、列挙可能なオブジェクトをより簡単に実装することができる。generatorを実装するのに必要なのは

```
1 function* {} で定義する。
2 yield 命令で値を返す。
3 next() で開始/再開
```
書き方としては、

```javascript:sample.js
function* print(){}
function *print(){}
```
のどちらでもよいが、後者のほうがオブジェクトリテラルでの簡潔な書き方に親しみやすい。

```javascript:sample.js
const print = {
 *printDatas(){
  //コード
 }
}
```

yieldはreturnと似ているが、yieldはその値をいったん呼び出し元に返した後、その位置から処理を再開させます。yieldで返されたオブジェクトは停止している状態であり、next()メソッドが呼び出されるまで何もしない。

```javascript:sample.js
//列挙可能なオブジェクト
function* print() {
 yield 'Hello!'
 yield 'ES6'
 yield 'generator!'
}

//next()で毎回呼び出す
console.log(print.next()) //Hello
console.log(print.next()) //ES6
console.log(print.next()) //generator!

//next()を内部的に含んでいるfor...ofで呼び出す
for(let t of print()){
 console.log(t)
}
```

next()メソッドを呼び出すたびに、iteratorオブジェクトと同様なvalueとdoneの２つのプロパティを持つオブジェクトが返される。for...ofを使うことでprint()をすべて列挙することができる。yieldによってその時々で必要な処理をすることができるので、一度に列挙してからそれぞれに処理するよりもメモリ消費を抑えられるのが特徴だ。

next()に引数を入れて呼び出した場合かなり複雑になる。

```
print.next(1)   ->    let A = yield 'a' //前で実行したyieldから次のyieldまで実行
　　　　　　　　　　　　console.log(A)    // Aオブジェクトのvalueプロパティとして 1 が出力される！
                      yield 'b'

```
一つ前のnext()においてyieldで 'a' を返したが、次のnext()で引数を添えて呼び出した場合、オブジェクト(今回ではAオブジェクト)にその引数(今回は1)がvalueプロパティとし格納される。

#iterator -> generator
自作classを作ったときに、iteratorを実装したがgeneratorでも同じことを実装してみる。

```javascript:sample.js
class Name {
 constructor(name){
  this.name = name
  //yieldは内部的にiteratorを返している。
  this[Symbol.iterator] = function*() {
   let current = 0
   let that = this
   while(current < that.name.length){
    yield that.data[current++]
   }
  }
}

let itr = new Nmae(['1', '2', '3'])
for(let value of itr){
 console.log(value)
}
```

for...of命令は内部的には「iteratorの取得、doneメソッドによる判定、valueプロパティによる値の取り出し」を行うので、generatorによって内部的なiteratorオブジェクトを設定しているのである。
コマンドラインからDocker Hubで公開されているイメージの「タグ」を検索するためのツールを作りました

## はじめに

[Docker](https://www.docker.com/) で開発をすすめる機会が増えてくると、だんだん「タグ」を調べることが多くなってきます。

**Docker** における **タグ** とは、たとえば MySQL公式イメージを利用する際に `mysql:8.0.18` のように指定する *コロン* の後ろの部分になります。

同じDockerイメージでも、 **「タグ」** の違いにより機能が異なります。
PHPでも `FPM` 対応もの、 `Apache` 対応のもの、 コマンドラインだけで動作するものなどが用意されており、それぞれ以下の用意なっています。

* `php:fpm`
* `php:apache`
* `php:cli`

## 「タグ」を覚えたり調べたりは面倒

「タグ」を調べるにはどうしたらよいでしょう？

[Docker Hub](https://hub.docker.com/) のサイトで該当イメージを探し、タグの値を探せばよいです。

しかし、せっかくコーディングがフロー状態に入ってきたり、あるいは **CUIの世界から出たくない！** という方々も多いと思います。

## コマンドラインから「タグ」を検索するツールを作った

そこでDockerの学習も兼ねて「タグ」を検索するツールを作りました。

[![genzouw/docker-tags - GitHub](https://gh-card.dev/repos/genzouw/docker-tags.svg?fullname)](https://github.com/genzouw/docker-tags)

ツール自体も `Docker` で動きます。
ですので、 `docker` コマンドをコマンドラインから利用できるようにしてください。

## 使い方


機能自体が少ないので、 [Github上のREADME](https://github.com/genzouw/docker-tags) を見ていただければ1分でわかるかと思います。

`-h` オプションを指定して実行した結果だけ、貼り付けておきます。

```bash
docker-tags [-p PAGE] [-a] [-h]
    -p : Output the specified number of pages.( DEFAULT : 5 )
    -a : Output all pages.
    -h : Output Help.
```

**デフォルトでは5ページ（50タグ）分が出力されますが、 `-f` オプションあるいは `-p` オプションで件数を変更できます。**

実行結果は以下のようになります。

```bash
TAG                           SIZE      UPDATED
-----                        -----      -----
latest                   134026357      2019-12-29T01:03:04.158114Z
8.0.18                   134026357      2019-12-29T01:03:02.024679Z
8.0                      134026357      2019-12-29T01:03:00.45482Z
8                        134026357      2019-12-29T01:02:58.07512Z
5.7.28                   150505380      2019-12-29T01:02:46.654066Z
5.7                      150505380      2019-12-29T01:02:44.854124Z
5.6.46                   102683838      2019-12-29T01:02:42.938573Z
5.6                      102683838      2019-12-29T01:02:38.761685Z
5                        150505380      2019-12-29T01:02:22.579441Z
8.0.17                   129970553      2019-09-12T06:03:06.99785Z
5.7.27                   124130524      2019-09-12T06:02:47.200186Z
5.6.45                    82841471      2019-09-12T06:02:42.262232Z
8.0.16                   129388433      2019-07-17T22:47:34.737755Z
5.7.26                   124147701      2019-07-17T22:47:18.044464Z
5.6.44                    82831221      2019-07-17T22:47:12.767655Z
5.5.62                    66072546      2019-05-10T23:43:35.219656Z
...
```

## ひとこと

フィードバッグお待ちしております。
オフライン環境にcargo-profilerをインストール

1. インターネット接続のある計算機で、cargo-profilerのソースをダウンロードしておく
    git clone https://github.com/svenstaro/cargo-profiler.git

2. そこでビルドしておく
    cargo build

3. ローカルのリポジトリのアーカイブを作成
    cd 
    tar cvzf cargo.repo.tar.gz ./.cargo

4. cargo-profilerのソース一式と、cargo.repo.tar.gzをインストール先の計算機にコピー
    インストール先の計算機のホームディレクトリでリポジトリを展開
    tar xvzf cargo.repo.tar.gz
 
5. インストール先で、ソースも展開。そこでオフラインオプション付でビルド
    cargo --offline build --release

6. インストール
    cargo --offline install --path .

7. .bashrcに以下のようなコードを追加してcargo-profilerにパスを通す
    export PATH=$PATH:~/.cargo/bin
Xcode 11 からWKWebView がstoryboard から使えるようになっていた

## WKWebViewがstoryboardで置いてもビルドエラーにならない！
多分、これまでUIWebViewを使っていたデベロッパーであればUIWebViewからWKWebViewに移行する時に、
storyboardから参照しようとするとビルドエラーになるから渋々コードで生成していただろうと想像できます。

現に私もこれまでUIWebViewが使われていたアプリのWKWebViewへの移行タスクを多数取り組んできて
みなさんと同じようにWKWebViewの様々な地雷を踏んできました。

UIWebViewからWKWebViewへのコード上での移行についてはこちらの記事を参考にすればできるようになると思います。
[WKWebviewで簡単なwebViewを作成する](https://qiita.com/hirothings/items/fa487ac31ff4283893ca)

移行タスクでは大変お世話になりました。

# iOS10のサポートを切る場合、、、


Xcode 11 からWKWebView がstoryboard から使えるようになっていました。
Xcode 10 まで Apple のバグによってWKWebViewをstoryboard から使おうとすると赤のワーニングが表示されて使えませんでした。(Xcode10 だからかiOS10をサポートしている場合だったかは記憶が定かでありません。)
が、Xcode 11 から正式(?)にstoryboardから使えるようになっていました。

UIWebView (depricated)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44392/dc65f94b-e705-7c32-97af-7f7cad0a43ef.png)

WKWebView
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44392/a80e517a-8551-cc8a-e8f5-798c7ecd4b58.png)

これで晴れてAppleからの通告の「UIWebView使うな」に対する対応が楽にできると思います。

[iOS 13における必須対応について](https://techracho.bpsinc.jp/yoshi-k/2019_08_28/79514)

そもそもstoryboardを使っていないプロジェクトやnibを使っていないようなコードのみでUIを実装しているプロジェクトではそもそもこの影響を受けないと思います。

## 蛇足ですが
WKWebViewなのに「WebKit View」というネーミングはいかがなもんでしょうか。
WKは「Web Kit」の略称だったという記憶がありましたので、これだと「WKView」か「Web Kit WebView」とも読めないことはない気がします。

以上です。
GoのDatetime忘れがちなので、まとめてみた

普段良く使うtimeメソッドをまとめてみた。

## Formatについて

他の言語みたいな`YYYY-MM-DD hh:mm:ss`timeフォーマット、Goでは↓このように書く
`2006-01-02 15:04:05`

## String -> Time

`time.Parse(layout,string)`を使って、文字列をTimeオブジェクトにする

例：

```go
    str := "2020-01-09T19:00:00Z"
    t, _ := time.Parse("2006-01-02T15:04:05Z", str) // 出力結果：　2020-01-09 19:00:00 +0000 UTC
```

## Time -> String

```go
    now := time.Now()
    str := now.Format("2006-01-02 15:04:05")
```

## 時間の比較

`After()`メソッドを使う
t1 > t2なら、t1.After(t2) => true
t1 < t2なら、t1.After(t2) => false

```go
    str1 := "2020/01/10 00:00:00"
    str2 := "2020/01/08 00:00:00"

    t1, _ := time.Parse("2006/01/02 15:04:05", str1)
    t2, _ := time.Parse("2006/01/02 15:04:05", str2)

    t1.After(t2)) // 出力結果：true
```

## 2つ時刻の差を求める
`Sub()`メソッドは時間の経過値を求める

```go
    start, _ := time.Parse("2006/01/02 15:04:05", "2020/01/08 00:00:00")
    end, _ := time.Parse("2006/01/02 15:04:05", "2020/01/10 00:00:00")
   
    duration := end.Sub(start) // 48h0m0s

    days := int(duration.Hours()) / 24
    hours := int(duration.Hours()) % 24
    mins := int(duration.Minutes()) % 60
    secs := int(duration.Seconds()) % 60

    log.Printf("%ddays + %dhours + %dminutes + %dseconds", days, hours, mins, secs) 
    // 2days + 0hours + 0minutes + 0seconds
```


## 現在の時間まで経過値を求める
`Since()`を使う、`time.Now().Sub(t)`の省略

## 何日後、何日前の時間を求める
`AddDate()`を使う
引数には、`year`,`month`,`day`を渡す

```go
    now := time.Now()

    // 2日後
    after2days := now.AddDate(0, 0, 2) // 2020-01-12 11:56:27

    // 2日前
    before2days := now.AddDate(0, 0, -2) // 2020-01-08 11:57:49
```

また、何分や何時間前や後は **`Add()`**を使うと便利

```go
    // 一時間後
    t := now.Add(1 * time.Hour)

    // 30分後
    t := now.Add(30 * time.Minute)
```
【Java】DIを使用したAbstractクラスのメソッドを子クラスから呼び出す処理作成時の注意点

DIを使用したAbstractクラスのメソッドを子クラスから呼び出す処理を作成する際のの注意点です。

## 問題のあるコード

```java:Abstractクラス
public class AbstractFoo {
    // DI
    public Bar bar; 

    protected void update() {
        bar.update();
    }

}
```

```java:子クラス
public class ChildFoo extends AbstractFoo {
    // DI
    public Bar bar; 

    public void updateChild() {
        // Abstractクラスのupdateメソッドを実行
        update(); 
    }

}
```
## 実行結果
子クラスのupdateChildメソッドを実行すると、呼び出し先の親クラスのupdateメソッドでNullPointerExceptionで落ちる

## 対処方法
子クラスのDI 
<b>public Bar bar; </b>
を削除する（下記では分かりやすいようにコメントアウト）

### 修正後
```java:Abstractクラス
public class AbstractFoo {
    // DI
    public Bar bar; 

    protected void update() {
        bar.update();
    }

}
```

```java:子クラス
public class ChildFoo extends AbstractFoo {
    // DI
    // public Bar bar; 

    public void updateChild() {
        // Abstractクラスのupdateメソッドを実行
        update(); 
    }

}
```

## 所感など
DIの内容を子クラスでの宣言によって上書き → Abstractクラスに渡してあげていないので、結果Abstractクラスでbarがnullになります。
子クラスではAbstractクラスで宣言した内容が継承されるので、そもそも論再度宣言する必要はないのですが、、
処理内容（記述内容）が増加してくると、見落としてうっかりやりがちなので、注意しましょう。
FlutterでSVG画像を表示する

## SVG画像を表示するには

- SVGファイルをassetsに保存する
- pubspeck.ymlにSVGファイルパスを追加する
- `flutter_svg` パッケージを使用して画面表示する

## SVGファイルをassetsに保存する

プロジェクト内の **assetsディレクトリ** にsvg画像を保存する。

assetsディレクトリがなければ作成する。
自分はなかったので作成した（多分）

svg画像はフリー画像を適当に探して、**[これ](https://www.flaticon.com/free-icon/basket_2467002)** を使った。
一応参考に画像を載せておく。
![basket.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52227/999d1851-fba3-f98a-7a13-266a1e7e8339.png)

## pubspeck.ymlを修正

これを忘れるとSVG画像をコードから認識できない。

```yaml:pubspeck.yml
flutter:
  assets:
   - assets/ # <- これでassets直下を一気に追加できる、個別指定の必要なし
 ```

この作業は忘れがちなので注意！

## `flutter_svg` パッケージを使用して画面表示する

pubspeck.yml に **flutter_svg** を追加する。

```yaml:pubspeck.yml
dependencies:
  flutter:
    sdk: flutter
  flutter_svg: ^0.15.0 # <-追加
```

パッケージのバージョンはサイトで確認して最新版を調べること
https://pub.dev/packages/flutter_svg

あとはコードからSVGを表示することができる。

```dart
  SvgPicture.asset(
    'assets/commerce-and-shopping.svg',
    semanticsLabel: 'shopping',
    width: 50,
    height: 50,
  ),
```

![2020-01-10-12-05-27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52227/7cc52090-eaf3-b426-04a3-14b4babe4c54.png)


widthとheightは指定しないとsvgが最大サイズで表示されるので注意
![2020-01-10-12-05-40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52227/930a498b-afcd-ac25-3447-3eed5538e947.png)

semanticsLabelはあってもなくてもよい。

## SVGをIconButtonに使いたいとき

IconButton.icon に `SvgPicture.asset()`を使うことができる。
これにより円形のリップルエフェクトも適用され、ボタンとして使いやすくなる。

```dart
IconButton(
  // SvgPictureを指定できる
  icon: SvgPicture.asset(
    'assets/commerce-and-shopping.svg',
    semanticsLabel: 'shopping',
    width: 50,
    height: 50,
  ),
  onPressed: () {},
),
```

## 備考

他にも、ネットワーク越しにSVGを表示できたり、SVG画像のパスをコードで作成して表示したり、と色々なことができるので、公式サンプルを参考にするといい。
https://github.com/dnfield/flutter_svg/blob/master/example/lib/main.dart

## 使用したコード

https://github.com/ikemura23/flutter_lab/tree/svg_icon
Googleスプレッドシートの増分データをPOWERBIに反映させる方法



普段Googleスプレッドシートは使っていないけれど、今回試す機会があったので後学のために残しておく。

#1.やりたいこと
Gスプレッドシートのデータが増えた場合、PowerBIでいかに増加分を反映させるか。

行として縦持ちのデータが増えるなら簡単だけど
シートが増えたりファイルが増えた場合どうするのか？

POWERBI(PowerQuery)はファイル（バイナリ)の種類とレイアウトが同じであれば、
指定したフォルダ内のデータを簡単に結合できるが（超便利！）
GoogleスプレッドシートはそもそもOnlineデータなのでどうすればいいのか？
やってみる。

#2．Googleスプレッドシートに接続する方法

Googleスプレッドシートのこんなデータを取り込んでみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296997/fca4004e-1c3e-d92a-6087-fddf5634936d.png)

###①Googleスプレッドシートの共有ボタンからリンクを取得
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296997/670b59e0-08b1-ee8f-c978-13b57d6696e0.png)

###②クエリエディターの新しいソースからwebを選択しURLを貼り付け
注意！最後部分を修正する必要あり　/export?format=xlsx　（エクセルフォーマットで出力する）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296997/9f3d8e2a-22be-9448-357a-53c46b0a533d.png)

###③あとはお好みで列削除したり、集計したり。。。


#3．増分データが別シートで増えた場合
googleスプレッドシートでシートが増えると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296997/67b0cd1f-d3fd-be5d-d8f5-724e15f81572.png)

POWERBIのクエリはこう見える
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296997/66220002-a06e-c5de-a5a0-dc0da192069f.png)

ここでDataのtableを直接クリックするとそのシートだけが対象となるが

展開ボタンをクリックするとこんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296997/03b78118-748f-6474-5bdc-198d246c0d6a.png)
列名は1シート目の列が表示される仕様らしい（2シート目に列を増やしても変わらなかった）


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/296997/58af9829-1e6b-e9be-171a-be1853ead71e.png)
OKをクリックするとこんな感じ
増えたシートがしっかり展開されている

##4．増分データが別ファイルになった場合、結合はできるのか？
csvやexcelファイルのよろしく結合のようにフォルダが指定できればいけるかと
googleドライブのフォルダを指定してみたがうまくいかず。
時間切れ

##5．まとめと課題
・POWERBIからGoogleスプレッドシートのデータを参照するは意外と簡単
　ポイントは/export?format=xlsx
・今回の複数シートの結合はエクセルファイルでも使えることにいまさらながら気づいたイ^^;
・POWERBIからのGoogleスプレッドシートへはリンク参照のみしかうまく接続できず。
　IDPWの認証はうまくいかないとの情報もあり。ビジネスユースでは心配。

https://www.youtube.com/watch?v=QhsrXOsi59A&t=104s
Visual Studio Code 選択行を全てコメントアウトしよう

# 目的

- コード内の一括コメントアウトを行いう方法をまとめる

# MacでVisual Studio Codeを使用している方

- コメントアウトをしたい行を全て選択する。
- 「Shift」+「Option」+「A」を同時に押下する。
- コメントアウトとコメントアウト解除が上記のキーで実行できる。

# WindowsでVisual Studio Codeを使用している方

- コメントアウトをしたい行を全て選択する。
- 「Shift」＋「Alt」＋「A」を同時に押下する。
- コメントアウトとコメントアウト解除が上記のキーで実行できる。
Flutterの環境構築(Mac)で躓いた点

#はじめに
ここでは初心者が環境構築の段階で躓いた点と
その解消方法だけをピックアップして書いていこうと思います。
間違いなどもあるかもしれないので誤りがありましたらご指摘くださいませ。

※随時追記して行く予定です。

##基本的にはflutter doctorで確認すればよき。
これまでJavaやらPythonやらの構築をしてきましたが
このdoctorほど便利なものはないですよ、ほんと。

何が足りていないのか**現場の怖い上司と違って**何度聞いても教えてくれますw

##ディレクトリ名に潜む罠
これに15分取られましたね。今ではいい思い出です。。
ずっとターミナルで

```
cd User/ユーザー名
```
とか

```
cd Download
```

ってやってるんですよねぇ。
普段あんまりターミナルとか触らなかったので起きてしまった事故です。(自業自得)
ケツの **s** が抜けとるんですね。。
もはやFlutter関係ないじゃんって感じですがほんとにあったお話ですw
絶対同じミスした人いるはず！きっといるはず！まぁ、確認を怠った僕が悪いのですがね！！(自業自得)




##今回の反省
今回というか初投稿からやらかしているのですが、、
書こうとしてから時間が経ってしまいとんでもなく薄い内容になってしまいました💧
鉄は熱いうちに打てというやつですね。。
オンラインアルゴリズムとストリームアルゴリズム

```{r}

#オンラインアルゴリズムとストリームアルゴリズム

#p.107

k=10

z=sample(seq(0.01,1,0.01),k,replace=T)

w=rep(1,k)

y=sample(seq(0.01,1,0.01),1,replace=T)

beta=10^(-20)


n=1000

for(l in 1:n){
  
p=sum(w*z)/sum(w)  

for(i in 1:k){
  
w[i]=w[i]*beta^abs(y-z[i])  
  
}  
  

print(abs(y-p))

}



```


```{r}

#p.127 Adaboost 練習

h_dt=function(x,a,b){
  
return((1/(1+exp(-(a*x+b)))))  
  
}

N=100

y=sample(seq(0.01,1,0.01),N,replace=T)

x=sample(seq(0.01,1,0.01),N,replace=T)


#弱学習のパラメータ作成

cost=function(a,b){
  
return(sum((y-h_dt(x,a,b))^2))  
  
}

A=0.01;B=0.01

eta=0.001

ite=10000

h=0.01

L=1;

while(L>0.01)({
  
cost_pre=cost(A,B)  
  
A=A-eta*(cost(A+h,B)-cost(A,B))/h

B=B-eta*(cost(A,B+h)-cost(A,B))/h

L=abs(cost(A,B)-cost_pre)

})



#Adaboost

t=30

w=rep(1,N)

pi=sample(seq(0.01,1,0.01),N,replace=T)


for(l in 1:t){
  
h_vec=h_dt(x,A,B)
  
ep=mean(pi*abs(h_vec-y))  
  
beta=1/(ep/(1-ep))  

for(i in 1:N){
  
w[i]=w[i]*beta^(1-abs(h_dt(x[i],A,B)-y[i]))  
  
}

pi=w/sum(w)

print(sum(pi*abs(h_vec-y)))
  
}



```


```{r}

#p.127 Adaboost 練習

h_dt=function(x,a,b){

return((1/(1+exp(-(a*x+b)))))  

}

N=10

y=sample(seq(0.01,1,0.01),N,replace=T)/100+0.5

#y=c(rep(1,5),rep(0,5))

x=sample(seq(0.01,1,0.01),N,replace=T)

#x=c(0.7,0.8,0.75,0.65,0.9,0.1,0.2,0.3,0.2,0.1)

#弱学習のパラメータ作成




eta=0.001

h=0.01





#Adaboost

t=30000

w=rep(1,N)

h_mat=array(0,dim=c(t,N))

pi=sample(seq(0.01,1,0.01),N,replace=T)

params=array(0,dim=c(t,2))

beta_vec=c()

val_pre=10;val=9

for(l in 1:t){
  
if((val_pre-val)>0){  
  
val_pre=val  
  
cost=function(a,b){

return(sum(w*abs(y-h_dt(x,a,b))))  

}  

A=0.01;B=0.01
 
L=1;

while(L>0.01)({

cost_pre=cost(A,B)  

A=A-eta*(cost(A+h,B)-cost(A,B))/h

B=B-eta*(cost(A,B+h)-cost(A,B))/h

L=abs(cost(A,B)-cost_pre)

}) 

params[l,]=c(A,B)
  
h_vec=h_dt(x,A,B)

h_mat[l,]=h_vec

ep=mean(w*abs(h_vec-y))  

beta=(ep/(1-ep))  

beta_vec=c(beta_vec,beta)

h_mat_sub=h_mat

for(i in 1:N){

w[i]=w[i]*beta^(abs(y[i]-h_vec[i]))  

}

for(i in 1:l){
  
h_mat_sub[i,]=h_mat_sub[i,]*beta_vec[i]  
  
}

w=w/sum(w)

if(l==1){
  
pre=h_mat_sub[1,]  
  
}else{

pre=apply(h_mat_sub[1:l,],2,sum)

}

val=sum(abs(pre-y))

print(sum(abs(pre-y)))

}
  
}  



```
git操作を間違えてremoteブランチを全部削除してしまったと思ったら、何とか大丈夫だった話

# 起きたオペレーションミス
リモートブランチを消すために

```
git push oirign :<消したかったブランチ>
```

をやろうとしたところ、ブランチ名をペーストする前にエンターを押してしまい、

```
git push oirign :
```
を実行してしまった。
**ブランチ名を指定しなかったということは、全てのブランチが消されてしまうのでは?!**と非常に焦った。

# 実行して表示されたもの
```
$ git push origin :
To git@hoge.com:fuga/fuga.git
 ! [rejected]          develop -> develop (non-fast-forward)
 ! [rejected]          master -> master (non-fast-forward)
error: failed to push some refs to 'git@hoge.com:fuga/fuga.git'
hint: Updates were rejected because a pushed branch tip is behind its remote
hint: counterpart. Check out this branch and integrate the remote changes
hint: (e.g. 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
```
`failed to push some refs`とあるということは、いくつかのブランチに対してはpushがされたということか？！
`non-fast-forward`でローカルのブランチが古かったものは何もされていないけど、最新だったブランチは削除されてしまったの？！

## 後から冷静に読めば
最新でないブランチだったからpush出来なかったと書いてあるだけなのだけど、

```
git push origin :<ブランチ名>
```
でブランチを削除出来るのだから、pushという操作にブランチ削除も含まれるのではと思い焦っていた。

# 急いでremoteのブランチ一覧を確認
元々いくつbranchがあったかは分からないけど、どうやらブランチは残っていそう。
でも何が起きたか分からないと不安で仕方ない。

# git push origin : の挙動を落ち着いて調べてみる
git pushドキュメントの例に

```
git push origin :
```
があったの読んでみた。
https://git-scm.com/docs/git-push#Documentation/git-push.txt-codegitpushorigincode

```
Push "matching" branches to origin. See <refspec> in the OPTIONS section above for a description of "matching" branches.
```
`"matching" branches`をpushするらしい。
`"matching" branches`が何を示すのか確認してみた。

# :は"matching branch"を表す
https://git-scm.com/docs/git-push#OPTIONS
に説明があった。

```
The special refspec : (or +: to allow non-fast-forward updates) directs Git to push "matching" branches: for every branch that exists on the local side, the remote side is updated if a branch of the same name already exists on the remote side.
```
`"matching" branches`は

- ローカルに存在するブランチで
- リモートに同名のブランチがある

をブランチを示す。
今回だと`master`や`develop`、開発していたfeatureブランチなどがローカルにあったので、
今回間違って打った

```
git push origin :
```
は、

```
git push origin master
git push origin develop
git push origin feature/xxxx
git push origin feature/yyyy
git push origin <その他ローカルにあってリモートにもあったブランチ名>
...
```
を実行したのと同義だった。
`master`や`develop`はローカルを最新化していなかったので、

```
 ! [rejected]          develop -> develop (non-fast-forward)
 ! [rejected]          master -> master (non-fast-forward)
```
などと表示されたということだった。

# 開発で使うコマンドを覚えて置くだけだと、ミスした時とても焦る
普段開発で使うコマンドを調べてメモしたり覚えておけば、普段git操作で困ることはない。
しかしコマンドを間違えてしまった場合に、`:`など意味を知らないとテンパってしまう。
時折ドキュメントを見返したり、git関連の書籍を読んでおくは大事だと改めて思った。

# git参考書籍
[GitHub実践入門](https://amzn.to/2DEdyvG)
新卒エンジニア向け課題図書だったけども、改めて読み直すつもり。
HLSを使って重い動画をWEBサイトに実装する

#はじめに
実務で`<video>`だけで実装することが少なくなってきたのでHLS化についてまとめようかと。
長くて高画質な動画をスムーズに再生する様に実装しろよ！って無茶にも、華麗に実装できたらかっこいいでしょ？ねぇ？

#HLSってなんぞ
HLS は HTTP Live Streaming の略で、Apple が定めた動画のストリーミング、オンデマンド配信（VOD）の技術。
つまり

* 高いコストをかけずにストリーミング配信ができる配信技術
* マルチビットレート（アダプティブビットレート）に対応
* 様々なＯＳ・ブラウザで再生可能
* ライブ配信にも対応できる

ここで重要なのは様々なOS、ブラウザで配信することができ、ストリーミング再生ができること。
>ストリーミング再生とはインターネット上のメディア（映像や音楽など）をすぐに再生する技術のこと

#HLSの簡単な仕組み
HLSではセグメント化※(分割)された動画データが必要。mp4形式などの動画ファイルを、

* セグメントリストファイル(.m3u8)
* セグメント動画ファイル(.ts)

に分割して、それを再生する。
下の様なファイル群

```
video.m3u8
video.mp4
video000.ts
video001.ts
video002.ts
video003.ts
video004.ts
video005.ts
video006.ts
...
..
.
```
これらのセグメントファイルはそれぞれ役割があり、

* セグメントリストファイル(.m3u8)
  * セグメント動画ファイルの場所、再生時間、再生順序などを記述したメタデータファイル。
* セグメント動画ファイル(.ts)
  * 動画形式はMPEGトランスポートストリームファイル形式と同じだが、これをさらに10秒毎のように、分割秒数を指定して分割した動画ファイル。

・・・どうやって動画分割すんねん！！！

#動画の分割方法（ffmpeg）
ここで登場するのは**ffmpeg**
動画や音声を加工するのに強力で万能な簡単ツールであり、このツールを使うと簡単に`.m3u8`や`.ts`を生成できます。

##インストール
**ffmpeg**はWindowsでもmac,その他OSでも使えてとても便利。
https://ffmpeg.org/
からDLできる。
macは`Homebrew`でインストール可能。

```html:ターミナル 
brew install ffmpeg
```
`Homebrew`が入っていない人は[こちら](https://qiita.com/pypypyo14/items/4bf3b8bd511b6e93c9f9)

##変換
いろいろな変換加工ができるが、今回は分割の方法のみを紹介
他が気になる方は[こちら](https://qiita.com/cha84rakanal/items/e84fe4eb6fbe2ae13fd8)へ

以下のコマンドで、video.mp4 を video.m3u8 ファイルと、video001.ts などという名前のセグメントファイルを生成できる

```terminal:ターミナル
ffmpeg -i video.mp4 -c:v copy -c:a copy -f hls -hls_time 9 -hls_playlist_type vod -hls_segment_filename "video%3d.ts" video.m3u8
```

* `ffmpeg -i video.mp4 video.m3u8`
 * `-i`:変換ファイルを指定
* `-c:v copy`,`-c:a copy`: Audio や Video のコーデックを元の mp4 ファイルのものをそのまま使うように指定（よっぽどがなければこのまま使う）
* `-f hls`:動画のフォーマット
* `hls_time 9`: 9 秒ごとに .ts ファイルに分割指定
* `-hls_playlist_type vod`:オンデマンド配信 
* `-hls_segment_filename "video%3d.ts"`:動画セグメントファイル名のフォーマットを指定

それぞれの用途に合わせて設定できたらHLSで使えるファイルの完成！
こんなのができているはず

```
video.m3u8
video.mp4
video000.ts
video001.ts
video002.ts
video003.ts
video004.ts
video005.ts
video006.ts
...
..
.
```

エラー出た人は変換したい動画がある階層にいるか確認してみて。
私は階層移動してなかったから焦ったよ？

#HTMLへ実装
実はHLSはSafari、Edgeについてはネイティブ動画プレーヤーが標準でHLS対応しているが、**Chrome、Firefox、IE**についてはHLSに**対応していないため再生できない。**

今更そんな事って。。。

安心してください。
対応する js を付け加えるだけで使用可能です。

それは[hls.js]
(https://github.com/video-dev/hls.js)

>以前は Video.js が主流だったがFlash対応向けに設計されている点と不具合が多い為、現在では hls.js が利用が多い。

hls.js を利用すると、以下のコードを書くだけで、Chrome、Firefoxのネイティブ動画プレーヤーにHLSに対応する機能を追加することができ、ストリーム再生可能となる。

```html:index.html
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> //自前のサーバーに配置しない場合
<video id="video_smaple" controls>
<script>
    if(Hls.isSupported()) {
    var video = document.getElementById('video_smaple');//videoタグと同じIDにする
    var hls = new Hls();
    hls.loadSource('./video.m3u8'); //ここで.m3u8ファイルを指定
    hls.attachMedia(video);
     }
</script>
```

あら不思議！きれいに動画実装されているよ！

#まとめ
Webの動画の掲載方法については、目まぐるしい速度で変化しているので、きっとこの技術もすぐ変わってしまうと思うが、最新の情報だけでなく、今自分が直面している問題に欲している情報をキャッチアップする事が大切だと感じた。
誰かの役に立てばと思います。

ね？カッコよかったでしょ？
Flaskのテンプレートエンジンの予約語を変更する

Flaskのテンプレート内の予約文字列 `{{` `}}` `{%` `%}` を変更する方法を説明します。

これで何が嬉しいかというと、例えばVue.jsを使おうとするとVue.jsも `{{` `}}` を使うので、Flaskと競合してしまいますが、この方法により回避できます。

### 環境

* Flask==1.0.2  
* Jinja2==2.10.1 

### コード

以下の２つのコードで `{{` `}}` `{%` `%}`　を `[[` `]]` `[%` `%]` に変更できます。

`main.py`

```python
from flask import Flask

# Flaskのテンプレートエンジンであるjinja2のenvironmentを作成。
from jinja2 import Environment, PackageLoader, select_autoescape
jinja2_environment = Environment(
    loader=PackageLoader(__name__, 'templates'),
    autoescape=select_autoescape(['html', 'xml']),
    block_start_string    ='[%',   #元は {%
    block_end_string      ='%]',   #元は %}
    variable_start_string ='[[',   #元は {{
    variable_end_string   =']]'    #元は }}
)

app = Flask(__name__)

@app.route('/')
def root():
    # 作ったenvironmentを指定してテンプレートを取得
    template = jinja2_environment.get_template('index.html')
    # テンプレートをレンダリング
    return template.render(var1="hello")

if __name__ == '__main__':
    app.run()

```

`templates/index.html`

```html
<html>
  <body>
    [% if 1 > 0 %]
      [[ var1 ]]
    [% endif %]
  </body>
</html>
```

#### 結果

main.pyを実行して、 http://localhost:5000/ にアクセスすると

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33447/84184dc5-1378-bf25-3da9-625b1bc0b372.png)

とでます。
AWSでサーバレスの自己紹介サイトを作って各種設定を行ってみた~当初簡単だと思ったら意外と面倒だった話～

#目的
最近業務でアドバイスを行う機会が増えている一方、実際に自分で手を動かしアウトプットする機会が減ってしまっていることに危機感を覚えました。とりあえず自分のWebサイトを再作成します。

以前WordPressでサイトを作ったことがあるのですが、ブログ形式は更新が滞ってしまうので、静的サイトを作ってそこに各種リンクを貼る形式にしました。

昔一度やったことがあるので簡単だと思っていましたが、ドメイン設定やSSL証明書の作成など、日常業務であまりやらないことに手間取りましたので、その点を共有できればと思います。


#想定した流れ
1.HTMLとCSSで紹介ページの作成
2.S3へアップロード
3.CloudFrontでURL公開
4.ムームドメインで独自ドメインを取得
5.Route53でドメインを設定


#実際の手順
1.HTMLとCSSで紹介ページの作成とドメイン取得
2.S3へアップロード
3.S3へアップロードしたところ、ログファイルの出力先など検討しなければならないことに気づき手間取る
4.Cloudfrontで公開しようとするが、SSL証明書のインポート、Route53の認証、お名前ドットコムの設定などで手間取る
5.Route53のムームードメインを設定


#結論
公開したWebページはこちらになります。
https://www.hanzohattori-arch.com/

#構成図
![Arch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136929/6fb85d84-3f36-169f-8943-6e996827ed9a.png)


#1.HTMLとCSSで紹介ページの作成
まずは静的サイトとなるhtmlを作成しました。
久しぶりにhtmlとCSSを書いたので、LIGさまのブログを参考に自己紹介の内容検討10分、サイトデザイン20分ほどでさくっと作成しました。
https://liginc.co.jp/230345

#2.S3へアップロード
下記の設定を行ない、アップロードしました。
下記の資料を参考にしました。ありがとうクラスメソッドさま。
https://dev.classmethod.jp/cloud/aws/cloudfront-s3-web/

#3.S3へアップロードしたところ、ログファイルの出力先など検討しなければならないことに気づき手間取る
クラメソさまの記事では、コンテンツ管理者とサービスの管理者が別という想定で作られているため、斜め読みした際に混乱してしまいました。~~読解力が低いことがばれる。~~

最終的にはIAM以外は記事通りの設定を行いました。
IAMは権限をグループで持ちました。（BillingとSupportは作業用につけました）

![IAMGP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136929/65755a10-73ad-433a-7a93-fbf5902ee09a.png)

 
#4.Cloudfrontで公開しようとするが、SSL証明書のインポート、
CloudFrontの設定が久しぶりすぎてちょっと困りました。
最終的にはACMで証明書発行、Route53でDNS設定を行いました。
正しいかどうかDeployされるまで30分ほど待機時間が発生してしまい。ちょっと困りました。

![CFConf1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136929/0522dc59-6594-191d-a12d-202a43522f30.png)

エラーページもCloudfrontで設定してます。
![CFConf2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136929/7e2945b2-a829-576f-4f7f-79e6214b77eb.png)

#5.Route53でドメインを設定
Route53でホストゾーンを作成した後、Aレコードを追加しました。

![R53conf1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136929/eda01995-d250-3f20-d90f-72ebb88dd045.png)
![R53conf2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136929/d5ff8896-f5c1-cf1f-d3f2-dd429e856e90.png)
ムームードメイン側の設定はRoute53のNS側の設定を移してます。
![MMDomain.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/136929/539c7f77-96a0-b669-0adb-de5f315fa26a.png)


#参考資料

[SORACOM エンジニアブログ 初めての「技術ブログ」書き方のご紹介
](https://blog.soracom.jp/blog/2018/04/18/howto-techblog/)[Developers.IO CloudFrontを使用してS3静的ウェブサイトを提供する手順](https://dev.classmethod.jp/cloud/aws/cloudfront-s3-web/)
[LIG CSSをつかい、要素の中央寄せ＆文字色と背景色を変更してみよう](https://liginc.co.jp/230345)
【ふくだ仕事録】【2日目】

# ふくだ仕事録とは？
ふくだが仕事していて「なるほど！」と思ったことに関しての備忘録。
業務上のテクニックや、考え方、使えるライブラリなどをメモっていこうと思います。
他人に見せるように書いているわけではないので、すごく読みにくいです。

※ふくだ備忘録は、概念や汎用的な知識。ふくだ仕事録は、具体的なやり方やライブラリなどのメモ。って感じですみ分けます。

# フロントエンド

### polyfill.io超便利だった

polyfillが必要になるときは、polyfill.ioで読み込めば便利。
何が便利かというと、そもそも対応しているブラウザ（polyfillを読み込む必要がないブラウザ）のときは、jsを読み込まないので、無駄な処理をしなくなる。

```javascript:example.js
//例えばintersectionObserverのpolyfillを読み込むとき
<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>  
```

※正確には、対応しているブラウザでもgetリクエストは出しているっぽいが、下記画像のようにpolyfill表示はしないようにしてくれるっぽい。

<img width="715" alt="スクリーンショット 2020-01-10 12.00.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356866/c99a3120-1c78-3dfc-0156-2868f379b366.png">

# バックエンド

# サーバーサイド

# ビジネス


# 今日の一言
【OpenCvSharp】画像の中から四角っぽいものの角をサブピクセル精度で取得する

これで良いのか？と言う不安もありますが、備忘録的な感じで。

最初はこう書いてみました。

```C#
using (var mat = image.ToMat())
using (var gray = mat.CvtColor(ColorConversionCodes.RGB2GRAY))
using (var bin = gray.Threshold(mythreshold, 255, ThresholdTypes.Binary))
{

    var contours = bin.FindContoursAsMat(RetrievalModes.List, ContourApproximationModes.ApproxSimple);

    var candidatre = contours
        .Select(c =>
        {
            var outputMat = new MatOfPoint();
            Cv2.ApproxPolyDP(c, outputMat, 0.01 * c.ArcLength(true), true);
            //MEMO : 角のPointコレクションと面積をペアで返します。
            return new Tuple<Point[], double>(outputMat.ToArray(), Cv2.ContourArea(c.ToArray()));
        })
        //MEMO : 面積で区切ってゴミを除去してます。
        .Where(c => c.Item2 < myMaxArea && c.Item2 > myMinArea);
    return candidatre.Select(x => x.Item1).ToArray();

}
```

これで```Mat.DrawContour```すると若干ずれ(2ピクセル程度)が出てしまってました。
```ApproxPolyDP```で近似してるせいかな？と思いますが深く追ってません。

取り合えず```outputMat```を```MatOfPoint2f```にしたら勝手に精度上げてくれないかな？と期待したのですが、そうすると数値がおかしな値が返ってきてしまいました。
恐らく内部的に整数しか扱えないものと思われます。(これもソースは追ってません)

そもそも位置がずれてしまっているので別の手段を使った方がよさそうです。

調べてみるとこんなページが有りました。

[Harrisコーナー検出](http://labs.eecs.tottori-u.ac.jp/sd/Member/oyamada/OpenCV/html/py_tutorials/py_feature2d/py_features_harris/py_features_harris.html)

このリンク先ではサブピクセル精度のコーナー検出について触れられています。

・・・そういえば```CornerSubPix```なんてありましたね・・・。

と言うことで修正です。


```C#:サブピクセル精度
using (var mat = image.ToMat())
using (var gray = mat.CvtColor(ColorConversionCodes.RGB2GRAY))
using (var bin = gray.Threshold(mythreshold, 255, ThresholdTypes.Binary))
{

    var contours = bin.FindContoursAsMat(RetrievalModes.List, ContourApproximationModes.ApproxSimple);

    var candidatre = contours
        .Select(c =>
        {
            var outputMat = new MatOfPoint();
            Cv2.ApproxPolyDP(c, outputMat, 0.01 * c.ArcLength(true), true);
            var criteria = new TermCriteria(CriteriaType.Eps | CriteriaType.MaxIter, 100, 0.001);
            var corners = Cv2.CornerSubPix(gray, outputMat.Select(x => new Point2f(x.X, x.Y)).ToArray(), new Size(5, 5), new Size(-1, -1), criteria);
            //MEMO : 角のPointコレクションと面積をペアで返します。
            return new Tuple<Point2f[], double>(corners, Cv2.ContourArea(c.ToArray()));
        })
        //MEMO : 面積で区切ってゴミを除去してます。
        .Where(c => c.Item2 < myMaxArea && c.Item2 > myMinArea);
    return candidatre.Select(x => x.Item1).ToArray();

}
```

今回のケースではこれで結構いい感じに追従できてます。
Minikube始め方メモ

# 参考
[Minikube getting started](https://kubernetes.io/docs/setup/learning-environment/minikube/)

# Virtual Boxのインストール
インストールしてください

# Minikube Install
```
brew install minikube
```
# Minikube 起動
```
minikube start --vm-driver=virtualbox
```
# Minikube dashboardの表示
```
minikube dashboard
```

# kubectlの確認
minikubeの起動によりcontextがminikubeに切り替わっているのを確認

```
kubectl config get-contexts
```

# Minikube 状態確認
```
minikube status
```

# Minikkube 停止
```
minikube stop
```

# kubectlの確認
minikubeの停止によりcontextがminikubeから外れているのを確認

```
kubectl config get-contexts
```

# MinikubeにDeploymentを作ってみる

```
kubectl create deployment hello-minikube --image=k8s.gcr.io/echoserver:1.10
```

# Deploymentに対してサービスを作成
exposeコマンドでサービスを作成し、Deploymentで起動したPodの外部IPを公開します。

```
kubectl expose deployment hello-minikube --type=NodePort --port=8080
```
# Podの確認
Deploymentによって作成されるPodの確認

```
kubectl get pod
```

# ExposeされたサービスのURL確認

```
minikube service hello-minikube --url

```

# Mini

# 元のコンテクストに戻る

```
kubectl config get-contexts
kubectl config use-contexts 表示されたcontextのうち希望のもの
```
# Minikubeのregistoryをlocalregistoryとして扱う

```
eval $(minikube docker-env)
```

https://stackoverflow.com/questions/42564058/how-to-use-local-docker-images-with-minikube


# Minikube vmにSSHアクセス
```
minikube ssh
```
# Kubectl proxy

```
kubectl proxy
```
Webカメラにおける顔認識を最小限のコードで実現させる

# はじめに
顔認識のプラットフォームは、すでにAWS、Azure、GCPなどでサービスとして展開されていますが、フロント（Javascript）でもやりたいと思い調査したので、共有します。今回はあくまでもコアとなるコードをわかりやすくするためにできる限り無駄なコードを書かずに実現していますので、他の機能も使ってみたい場合は以下のサイトを確認してみてください。

[face-api.js](https://github.com/justadudewhohacks/face-api.js)

# 手順

まず、公式のリポジトリをクローンします。

```
git clone https://github.com/justadudewhohacks/face-api.js.git
```
以下のファイルをコピーします。

- dist/face-api.min.js → js/
- weights/tiny_face_detector_model-shard1 → models/
- weights/ttiny_face_detector_model-weights_manifest.json → models/


```html
<!DOCTYPE html>
<html>

<head>
  <title>Face Detect Sample</title>
</head>

<body onload="init()">
  <video id="video" autoplay onloadedmetadata="onPlay()"></video>
  <p id="message"></p>

  <script src="js/face-api.min.js"></script>
  <script>
    const video = document.getElementById("video");
    const init = async () => {

      // Webカメラ初期化
      const stream = await navigator.mediaDevices.getUserMedia({
        audio: false,
        video: {
          width: 400,
          height: 400
        }
      });

      try {
        video.srcObject = stream;
      } catch (err) {
        video.src = window.URL.createObjectURL(stream);
      }
      // (1)モデル読み込み　※フォルダを指定
      await faceapi.nets.tinyFaceDetector.load("models/");
    }

    const onPlay = () => {
      const message = document.getElementById('message')
      const inputSize = 512; // 認識対象のサイズ
      const scoreThreshold = 0.5; // 数値が高いほど精度が高くなる（〜0.9）
      // (2)オプション設定
      const options = new faceapi.TinyFaceDetectorOptions({
        inputSize,
        scoreThreshold
      })
      const detectInterval = setInterval(async () => {
        // (3)顔認識処理
        const result = await faceapi.detectSingleFace(
          video,
          options
        );

        if (result) {
          message.textContent = "認識されてます"
        } else {
          message.textContent = "認識されていません"
        }
      }, 500);
    }
  </script>
</body>

</html>
```
外出先でWebサイトをデバッグする


# はじめに
PCやUSBケーブルなどを使わずに、外出先でモバイルブラウザ向けの開発コンソールである```Eruda```を任意のWebサイトで呼び出します。このErudaを使うことでChrome Dev ToolsのようにDOMやリソースなどを表示することができます。
Erudaを使ったデバッグ方法については割愛しますが、
```ブックマークレット```と```iOSのショートカット```を使ってモバイルブラウザ上でErudaを簡単に呼び出すことができます。

# ブックマークレット

最も簡単なのが、以下のGistにあるブックマークレットをブックマークに登録し、iPhoneやAndroidなどのモバイルブラウザから呼び出す方法です。一応、PCのブラウザからも呼び出せますが、素直にChrome Dev Tools を使った方が良いです。
[Eruda Bookmarklet - GitHub Gist](https://gist.github.com/suderman/aa2338c5b1f11691c64aacae65b6ce4f)

任意のサイトを開いて、この登録したブックマークを呼び出すことで、ブラウザの右下にErudaの歯車アイコンが表示されます。
このアイコンをタップすることで、Erudaの開発コンソールが開きます。

# iOSのショートカット

こちらは、iPhone限定(iOS12以上)の方法です。
主に、SafariブラウザやSFSafariViewController、ASWebAuthenticationSessionを使ったブラウザで利用することができます。

このショートカットでは、Erudaのjsライブラリを読み込むJavaScriptを任意のWebサイトで実行します。

## JavaScriptの実行処理
以下のコード上のブラケットで囲っている部分は変数で、Erudaのjsライブラリ本体をテキストとしてショートカット内部で設定しています。
また、Eruda本体のjs以外に、```eruda-dom.js```、```eruda-timing.js```、```erada-code.js```の３つのプラグインを上記のブックマークレットと同様に設定しています。プラグインの詳細は[こちら](https://github.com/liriliri/eruda)を参照してください。

```javascript

// eruda本体のjs
{eruda.js}

// erudaのプラグインのjs
{eruda-dom.js}
{eruda-timing.js}
{eruda-code.js}

// erudaの初期化
eruda.init();

// erudaのプラグインの読み込み
eruda.add(erudaDom);
eruda.add(erudaTiming);
eruda.add(erudaCode);

// JavaScriptの完了コールバックの呼び出し
completion(true);
```

## ショートカットの実行方法

作成したショートカットの[共有リンク](https://www.icloud.com/shortcuts/a12102dd0f6141b18dbc643e58a24b81)をタップしてショートカットをインストールします。
その後、任意のWebサイトをSafariなどで開き、共有ボタンから```Eruda```というショートカットを呼び出せば、ブラウザの右したにErudaの歯車アイコンが表示されます。

<img width="375" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110575/f58ac8e8-4c72-ec03-a007-ce2388cbcc77.png">

作成したショートカットの詳細については、インストールしたショートカットの内部を参照してください。


# 参考サイト

* [Eruda: Console for Mobile Browsers](https://eruda.liriliri.io/)
* [liriliri/eruda: Console for mobile browsers](https://github.com/liriliri/eruda)
【Python】ショートカットファイル(.lnk)の正式なファイルパスを取得する

Pythonにおいて、Windowsのショートカットファイル(.lnk)ファイルの中身のファイルを呼び出す方法

# 1. 結論
WSHの組み込みオブジェクトであるWshShortcutをPythonから呼び出して使用する

ここではスタートメニューのメモ帳を例にしている

```python:win_shortcut.py
import win32com.client

notepad_path = "C:\\Users\\{USERNAME}\\AppData\\Roaming\\Microsoft\Windows\Start Menu\\Programs\\Accessories\\Notepad.lnk"

wshell = win32com.client.Dispatch("WScript.Shell") # <COMObject WScript.Shell>
shortcut = wshell.CreateShortcut(notepad_path)

print(shortcut.TargetPath) # C:\WINDOWS\system32\notepad.exe
```

# 2. PythonからCOMオブジェクトを呼び出す
[pywin32](https://github.com/mhammond/pywin32)というライブラリを使用する
pipからインストールできる

```
pip install pywin32
```

以下のコードでVBScriptでいう`Wscript.CreateObject("WScript.Shell")`のようなCOMオブジェクトの呼び出しができる

```python
import win32com.client

wshell = win32com.client.Dispatch("WScript.Shell") #<COMObject WScript.Shell>
```

# 3. WshShortcutオブジェクトを生成してショートカットの情報を取得する
[WshShortcutオブジェクト](https://docs.microsoft.com/ja-jp/previous-versions/windows/scripting/cc364438(v=msdn.10))を生成して、TargetPathプロパティを取得する

```python
shortcut = wshell.CreateShortcut(notepad_path)

print(shortcut.TargetPath) # C:\WINDOWS\system32\notepad.exe
```
メンバ変数でconst宣言されたROSメッセージを初期化する方法（C++）

# 概要

クラスのメンバ変数はコンストラクタで初期化することができますが，ROSのメッセージ(例えば`geometry_msgs::Twist`)などは下記のようにすべての変数にアクセスして初期化しなければなりません．

```cpp
geometry_msgs::Twist twist;
twist.linear.x = 0.0;
twist.linear.y = 0.0;
twist.linear.z = 0.0;
twist.angular.x = 0.0;
twist.angular.y = 0.0;
twist.angular.z = 0.0;
```

通常使用時にはそこまで気にならなかったのですが，この前`geometry_msgs::Twist`をconstでクラスメンバ変数として作成しようとしたときに初期化方法がわからなかったので，調べたついでにここにメモします．

# 環境

- Ubuntu 16.04
- ROS: Kinetic
- C++: C++11以降
    - コンパイル時には`CMakeLists.txt`にてC++11がコンパイルできるようにしておく

# const宣言されたROSメッセージの初期化方法

残念ながらきれいな初期化方法が見つからなかったので，無理矢理コンストラクタで初期化する方法2つを紹介します．

## 0. メッセージ内変数をすべて0で初期化したい場合

[公式](http://wiki.ros.org/roscpp/Overview/Messages)曰く，C++では宣言されたROSメッセージにはデフォルトで0が入るらしいので，小賢しい方法は必要ありません．

## 1. メンバ変数初期化用の関数を作成

パッと思いついた方法．初期化したいメンバ変数型を返り値とする関数を予め用意しておきます．（@yuki12さんより指摘いただいたので初期化用関数をクラス外に作成）
パッと思いついただけあって，初期化したいメンバ変数の分，初期化用関数が増えていってしまうのが難点．


```cpp
// geometry_msgs::Twist初期化用関数
geometry_msgs::Twist geoTwistInit (const std::vector<double>& c_twist)
{
    geometry_msgs::Twist twist;
    twist.linear.x = c_twist[0]; twist.linear.y = c_twist[1]; twist.linear.z = c_twist[2];
    twist.angular.x = c_twist[3]; twist.angular.y = c_twist[4]; twist.angular.z = c_twist[5];
    return twist;
}

class Hoge
{
private:
    const geometry_msgs::Twist cmd_vel_;
public:
    Hoge(void):
    cmd_vel_(geoTwistInit(std::vector(1.0, 1.0, 1.0, 2.0, 2.0, 2.0)))
    {
         std::printf("cmd_vel: %f, %f, %f, %f, %f, %f", cmd_vel_.linear.x, cmd_vel_.linear.y, cmd_vel_.linear.z, cmd_vel_.angular.x, cmd_vel_.angular.y, cmd_vel_.angular.x);
    }
};

int main (void)
{
    Hoge hoge;
    return 0;
}
```

出力

```
cmd_vel: 1.0, 1.0, 1.0, 2.0, 2.0, 2.0
```

# 2.ラムダ式を使う方法

他に方法がないか調べたところ，ROSに限らずコンストラクタが設定されていない型の初期化方法としてラムダ式を使う方法を発見([参考](https://stackoverflow.com/questions/11037650/can-you-use-a-lambda-in-a-class-initialization-list))．

```cpp
class Hoge
{
private:
    const geometry_msgs::Twist cmd_vel_;
public:
    Hoge(void):
    cmd_vel_( []()->geometry_msgs::Twist{geometry_msgs::Twist twist;
                                         twist.linear.x=1.0; twist.linear.y=1.0; twist.linear.z=1.0;
                                         twist.angular.x=2.0; twist.angular.y=2.0; twist.angular.z=2.0;
                                         return twist;}() )
    {
         std::printf("cmd_vel: %f, %f, %f, %f, %f, %f", cmd_vel_.linear.x, cmd_vel_.linear.y, cmd_vel_.linear.z, cmd_vel_.angular.x, cmd_vel_.angular.y, cmd_vel_.angular.x);
    }
};

int main (void)
{
    Hoge hoge;
    return 0;
}

```
出力

```
cmd_vel: 1.0, 1.0, 1.0, 2.0, 2.0, 2.0
```

キモは**ラムダ式の最後に`()`をつけること**らしい．

# まとめ

紹介した2つの方法はどちらもあまりきれいではありませんが，力業で解決できることがわかってよかったです．

# 参考

- [roscpp/Overview/Messages](http://wiki.ros.org/roscpp/Overview/Messages)
- https://stackoverflow.com/questions/11037650/can-you-use-a-lambda-in-a-class-initialization-list
2020年参加予定の海外技術系カンファレンス (updated 2020.9.11)

updated 2020.9.11
オンライン開催など最新情報をアップデートしました。

## 概要
2020年 @qualitia_cdevが仕事または個人で参加する予定の海外技術系カンファレンスをまとめました。

### [M3AAWG 48th General Meeting](https://www.m3aawg.org/)
- 日時	2020.2.17(Mon) - 20(Thu)
- 会場	San Francisco, United States
- 参加費  $400
- [https://www.m3aawg.org/](https://www.m3aawg.org/)
- 関連記事: [M3AAWG 45th General Meeting 参加レポート] (https://qiita.com/qualitia_cdev/items/1917b31d28c7354c6acc)

### [DockerCon LIVE 2020](https://docker.events.cube365.net/docker/dockercon/)[オンライン開催]
- 日時 2020.5.28 9:00-17:00 GMT-7 (2020.5.29 1:00-9:00 JST)
- 会場 オンライン
- 参加費 無料
- https://docker.events.cube365.net/docker/dockercon/


### [M3AAWG 49th General Meeting](https://www.m3aawg.org/upcoming-meetings)[オンライン開催]
- 日時 2020.6.8(Mon) - 11(Thu)
- 会場 ~~London, United Kingdom~~ オンライン
- 参加費 無料
- [https://www.m3aawg.org](https://www.m3aawg.org)

### [PyCon Korea 2020](https://www.pycon.kr/)[オンライン開催]
- 日時 2020.9.26-27
- 会場 オンライン
- 参加費 無料
- [https://www.pycon.kr/](https://www.pycon.kr/)

### [M3AAWG 50th General Meeting](https://www.m3aawg.org/upcoming-meetings)[オンライン開催]
- 日時 2020.10.12(Mon) - 15(Thu)
- 会場 ~~New York, United States~~ オンライン
- 参加費 $75
- [https://www.m3aawg.org](https://www.m3aawg.org)

### [AWS re:Invent](https://reinvent.awsevents.com/) [オンライン開催]
- 日時 2020.11.30(Mon) - 12.18(Fri)
- 会場 Las Vegas, United States
- 参加費 無料(去年は$1799)
- [https://reinvent.awsevents.com/](https://reinvent.awsevents.com/)
- [関連記事：AWS re:Invent の歩き方] (https://qiita.com/qualitia_cdev/items/2e1ff9a837a7d8f682eb)
[Electron] IPC には新しい ipcRenderer.invoke() メソッドを使ったほうが便利 (v7+)

# TL;DR;

Electron v7 から、`ipcRenderer.invoke()`、`ipcMain.handle()` が新たに追加されました。これは、従来まで利用されてきた `ipcRenderer.send()` や `ipcRenderer.sendSync()` の上位互換のようなものです。今後は積極的にこちらを使ったほうがよさそう。

# 従来の Renderer <-> Main プロセス間通信 (IPC)

## 同期: `ipcRenderer.sendSync()`

文字通り、同期 (Sync) 的にプロセス間通信を行います。
この際に重要なのは、sendSync によって Main プロセスが呼ばれるとその間は Renderer プロセス上の処理は完全にブロックされます。Main プロセスからの応答があるまでは、renderer プロセス側の操作画面はいわゆるフリーズしたような状態になります。描画処理も止まるので、ローディング画面のような CSS アニメーションも容赦なく固まります。

ドキュメントにも下記のように、どうしても使わざるを得ない状況下においてのみ最終手段として使う、そうでない場合は利用を避けることが推奨されています。

> ⚠️ **WARNING**: Sending a synchronous message will block the whole renderer process until the reply is received, so use this method only as a last resort. It's much better to use the asynchronous version, `invoke()`.

```js:renderer
// renderer から Main プロセスを呼び出す
const data = ipcRenderer.sendSync('sync-test', 'ping')
console.log(data)
```

```js:main
ipcMain.on('sync-test', (event, message) => {
  // message には 呼び出し元からのデータ ('ping') が入っている
  console.log(message)
  event.returnValue = 'pong'
  return
})
```

```sh:console
> ping
> pong
```

Main プロセス側での処理が終わってから renderer 側で console.log が走るため、結果は上記のようになります。メリットとして、`event.returnValue` を通じて呼び出し元にデータを返すことができます。

## 非同期: `ipcRenderer.send()`

非同期実行のため、Main プロセスの処理中であっても renderer 側ではフリーズすることなく操作が可能です。

ただし Main プロセス側の処理がいつ終わったのか renderer 側では分からないので、これをトリガーに何らかの処理を行いたい場合、renderer 側で `ipcRenderer.on()` を定義しておくことで、Main -> rendere 方向の戻りの通信が可能になります。

```js:renderer
// main からの呼び出しを待ち受ける
ipcRenderer.on('async-test-complete', (event, message) => {
    console.log(message)
)}

// renderer から Main プロセスを呼び出す
ipcRenderer.send('async-test', 'ping')
console.log('started')


```

```js:main
ipcMain.on('async-test', (event, message) => {
  // message には 呼び出し元からのデータ ('ping') が入っている
  console.log(message)
  // main から renderer プロセスを呼び出す
  event.sender.send('async-test-complete', 'pong')
  return
})
```

```sh:console
> started
> ping
> pong
```

# 新しい Renderer <-> Main プロセス間通信 (IPC)

## 非同期: `ipcRenderer.invoke()`

ようやく本題です。Electron version 7+ から利用可能になりました。
こちらも非同期ですが、Main プロセスからは Promise が返ってきます。ですので、`await` を使って Main プロセスからのデータの受取を下記のようにシンプルに書くことができます。

```js:renderer
// renderer から Main プロセスを呼び出す
const data = await ipcRenderer.invoke('invoke-test', 'ping')
console.log(data)
```

```js:main
ipcMain.handle('invoke-test', (event, message) => {
  // message には 呼び出し元からのデータ ('ping') が入っている
  console.log(message)
  // renderer プロセスにデータを返す
  return 'pong'
})
```

```sh:console
> ping
> pong
```

Main 側では、`ipcMain.handle()` とメソッド名が変わっています。
【祝2020年】VirtualBoxのVMでホストオンリーアダプターが未選択になる

あけましておめでとうございます！

エンタメ系企業の社内もろもろを担当しているakibinです。

#やったこと
新年あけまして、以下記事を参照させてもらい、MacにVirtualBoxをインストールしてUbuntuを作成しました。

[MacにVirtualBoxでUbuntuを立てる方法【画像での解説つき】](https://qiita.com/komakomako/items/1f1fa0e2279895006598)

ホストのMacからゲストVMのUbuntuにssh接続するのに、ホストオンリーアダプターを割り当てないといけないのですが、以下のように**未選択**のみしか出てこず設定できない状態が発生、あれこれ解決方法を探し出すのに時間がかかったので、備忘録として本記事作成しやした。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504009/61fc60ce-4c12-ee04-d44d-2d1cf427bc7c.png" width=70%>

#解決方法
VirtualBoxを開いた状態で**ファイル** → **ホストネットワークマネージャー**を開き、**作成**からホストネットワークマネージャー**voxnet0**を追加。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504009/21a1e8a1-42cd-cf63-8eee-0e2c240bd9ab.png" width=70%>

これでホストオンリーアダプターを割り当てができました！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/504009/97cd9a66-3fa6-a34b-ddf2-63362a52284b.png" width=70%>

あとは先程の記事を参照してUbuntuにOpenSSHをインストール、IPアドレス割当すればホストのMacからUbuntuへsshできました！

めでたしめでたし、本年もDoぞよろしくお願いいたします。

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
◆ Twitterアカウント
@AkibinMusic

◆ Youtubeチャンネル
https://www.youtube.com/channel/UC-JOpwEnJn3gCrUA4NdCYgg
2020-01-10 WRF > NCEP SST Analysis > EOL: サポート終了 

```txt:動作環境
Xeon E5-2620 v4 (8コア) x 2 
32GB RAM 
CentOS Linux release 7.7.1908 (Core)
```

WRF (Weather Research and Forecasting Model)関連。

SST (Sea-Surface-Temperature)データとしてNCEPが提供してきたデータがある。

https://polar.ncep.noaa.gov/sst/

> The real time global SST analysis will be retired some time between 12/17/2019 and 2/29/2020. Neither web nor ftp support will continue. 

2020-01-10現在、ftpのpub/が見えなくなっている。
サポートが終わったようだ。
MacOS Catalinaでnpm install時にnode-gypがコケる問題

### npm install等々でnode-gypがコケる問題
MacOS Catalinaでcreate-react-appなどをごにょごにょしている際、
npmやyarnのインストール時、fsevents等のビルドプロセスでnode-gypがコケてクソほどハマったのですが、
(`gyp: No Xcode or CLT version detected!`とかコンソールログに出力されます)


調べてみると、XCode > Preferences > Locations以下にXCode Command Line Toolを設定する箇所がありました。

これ設定したらあっさり動いて拍子抜けしました・・


過去にここの設定をやった記憶がなく、
XCode Command Line Toolのインストール時にXCode側に自動設定される
→MacOSのアップデート、XCodeのバージョンアップ時などに設定情報が消える
とかいう原因なのか？
謎は残りますが・・
まあ、いいか・・・

### 引用元
https://github.com/nodejs/node-gyp/issues/1779
未経験から半年で初Androidアプリ制作!女性プログラマーが可愛いフリー素材探しに苦労した！！

##アプリをリリースの前に…
Androidアプリを初めての制作をしてみました。
最初は、就活の為の成果物としてしてアプリを作っていたのですが、やはりせっかく作ったのでGoogle Play Storeにアプリを出すことに決定!!
いざアプリをGoogle Play Storeにあげる前に問題が、、、、
**画像の著作権ガン無視問題**
アプリをGoogle Play Storeに出す気がなかったので忘れていました。
初心者が忘れがちなミスだと思います。
皆さんは作るときに気を付けてくださいね。
私が使ったフリー素材サイトを下に載せてますが、、、**もっと可愛い素材が欲しい**:frowning2:
プログラマーの皆様、コメントでぜひおすすめのフリー素材サイト教えて頂けると幸いです:exclamation:

##フリー素材が探せるサイト
私は、急いで画像のすり替えを行いました。
そこで私が使ったフリー素材を探せるサイトのリンクをシェアするので、ぜひ参考にしてください。
フリー素材をダウンロードできても商業利用はできない場合があるので**利用規約**を必ず確認してください。

[illust image](https://illustimage.com/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/4d1ad06f-1228-c141-7c4d-cafa13804ea5.png)

[Stock Material](https://stockmaterial.net/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/1d06bb77-4e4c-c1ef-77d6-9ff2ef7a7622.png)

[無料イラストのIMT](https://illust-imt.jp/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/1b19e58f-2cec-2334-c09e-c9b526d5b006.png)

[PAKUTASO](https://www.pakutaso.com/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/86f278f4-071b-5d36-6d5d-a206318c01bc.png)


ダウンロードできる素材がまとまったサイトもありました:point_down_tone2:
[アプリ開発者必見！無料で開発用素材がダウンロードできるサイト３７選](https://ferret-plus.com/1778)

##アイコンのフリー素材
ちなみにアイコンのフリー素材はこんなサイトを参考にしてください。

[icon-pit](https://icon-pit.com/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/562982/11ff5bad-6604-1b1f-3b29-0e3845d0bd1b.png)

アイコンフリーサイトがまとまったサイトもありますよ。:point_down_tone2:
[商用可で無料！最強のフリーアイコン素材サイト14選](https://saruwakakun.com/design/tips/icon)
同型テーブルABのAにのみ存在するレコードを抽出

##その１
BがNULL（紐づかない列）を除外することでAにあるレコードのみ抽出

```part1.sql
SELECT
    A.Name
FROM
    ATbl A Left Join
    BTbl B
ON A.CD = B.CD
WHERE
    B.CD Is NULL
```

##その2
Existsを利用しレコードが返却されない行を抽出

```part2.sql
SELECT
    A.Name
FROM
    ATbl A
WHERE
    Not Exists (
        SELECT 1 FROM BTbl B WHERE B.CD = A.CD)
```
[Angular] コンポーネントのscssでアプリ全体で使う変数を使用する方法

マテリアルデザインの余白の8pxとかを変数に定義してアプリ全体で使いたかったので方法を調べました。

# 方法
angular.jsonに`stylePreprocessorOptions`を追加します。この設定だと `src/sass` 以下のscssファイルが、ディレクトリ名指定無しにインポートできるようになります。
 
```diff:angular.json
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "src/sass"
+              ]
+            },
            "scripts": []

```

次に変数を定義するファイルを`src/sass`に作成します。

```scss:src/sass/variables.scss
$single-space: 8px;
$double-space: 16px;
```

最後に利用したいコンポーネントのscssでインポートして使用します。

```scss:src/app/hoge.component.scss
@import "variables";

.form-action-container {
  margin-top: $double-space;
  margin-bottom: $double-space;
}
```

注意点は`ng serve`は再起動する必要があるところ。

参考
https://stackoverflow.com/questions/50878691/how-to-import-sass-files-in-angular-6
眺めて覚えるGo言語 その9 deferの書き方

#deferは、遅延という意味だが分かりにくい。
###眺めるための例題

```f7.go
package main
import (
	"fmt"
	"time"
)
func main() {
	defer fmt.Println("全部終了しました。")
	for i:=0;i<10;i++{
		time.Sleep(1)
		fmt.Println("i=",i)
	}
}
//実行結果
>go run f7.go
i= 0
i= 1
i= 2
i= 3
i= 4
i= 5
i= 6
i= 7
i= 8
i= 9
全部終了しました。
```
最初に書いた　**defer fmt.Println("全部終了しました。")**は、
for以降のステートメント以降に遅延されたことがわかる。

実際の場面

```f8.go
package main

import (
	"bufio"
	"fmt"
	"io"
	"os"
)
func main() {
    fp, err := os.Open("d:\\00data\\test_utf20.csv")
	if err != nil {panic(err)}
	defer fp.Close()
	reader := bufio.NewReaderSize(fp, 4096)
	for {
			line, _, err := reader.ReadLine()
			fmt.Println(string(line))
			if err == io.EOF {
				break
			} else if err != nil {panic(err)}
	}
}
```
上記のプログラムを眺めてみると*Open*して*defer* 付きのCloseをしている。
この表記は、もしファイルやio操作中に何らかのエラーが起きたときにcloseしてくれる。

#注意　皆さんは、エラーを起こすためにUsbFlashを引き抜かないでください。b壊れます。