OmniAICreator/Qiita-1.07M huggingface dataset:
Unityの機能を使ってVRChatで使えるカラーピッカーを実装する

#はじめに
11/30に深秋音祭というVRChatでのライブイベントがありました。そこでムービングライト（のようなシェーダー）を作って演出に参加しました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">「深秋音祭2019」DAY2Part2<br>真夜中のキャラバン<a href="https://t.co/wIxXVQeV0y">https://t.co/wIxXVQeV0y</a></p>&mdash; noriben🌕 (@noriben327) <a href="https://twitter.com/noriben327/status/1204704743718678528?ref_src=twsrc%5Etfw">December 11, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

VR空間上で手にカラーピッカーを持って色の変更をしたのですが、その部分をどのように実装したのか説明していこうと思います。

今回はシンプルにカラーピッカーで色の変化するオブジェクトを作ります。
完成形はこれです。虹色の板は適当につくったテクスチャです。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">カラーピッカー <a href="https://twitter.com/hashtag/Unity?src=hash&amp;ref_src=twsrc%5Etfw">#Unity</a> <a href="https://t.co/CVcpCvIwpa">pic.twitter.com/CVcpCvIwpa</a></p>&mdash; noriben🌧️ (@noriben327) <a href="https://twitter.com/noriben327/status/1204714119133138944?ref_src=twsrc%5Etfw">December 11, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



#おおまかな流れ
カメラでオブジェクトの色を取る。その色をレンダーテクスチャにして、オブジェクトのテクスチャに割り当てる。
基本はこれだけです。

#色情報の取得
カメラを使います。
ProjectionをOrthographicに、Sizeを0.001と小さくして、ほぼ点として取得するようにします。
![adventcamera01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539539/ecbceb5c-51bc-274a-8057-99066179273a.png)


#色情報の保存
レンダーテクスチャを使います。
レンダーテクスチャを作成しCameraのTarget Textureに割り当てます。
ポイントはレンダーテクスチャのサイズを1x1として1ピクセルの色情報だけ使うようにします。Filter ModeはPointにしたほうが補完されることによる色の濁りがないようです。

![adventcamera02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539539/b0744fe1-5c96-6218-1dfc-372305f91bd7.png)

#色情報の受け渡し
ここまででカメラで取得した
色情報がテクスチャとして保存されているので、そのテクスチャを色を変化させたいオブジェクトのマテリアルに割り当てます。
これでカメラで取得した色にあわせてオブジェクトの色が変化します。

![adventcamera03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539539/3a0a70ff-585e-d73f-d1d0-25a6b608381e.png)

#シェーダーで応用
今回作ったのは単にオブジェクトの色が変わるだけのものですが、色というのはRGBの3つの数字なので、それをシェーダーのパラメーターとすることで応用がききます。
例えばオブジェクトの拡大縮小のパラメータにしてみたり、エフェクトのかかりぐあいを変化させたり・・。
（ARGB32のフォーマットだとチャンネルあたり8bitの解像度しかないのには注意）

#最後に
VR空間では「手に持つ」ということができるので、今回のようなカラーピッカーと非常に相性が良いと思います。Unity上ではフーン・・・という感じでもVR空間上で操作すると楽しいです。
遊んでいるうちにもしかしたらVR空間でのVJや演出の楽しさにハマってしまうかも？（自分はハマりました）
Azure Custom Visionを使って、布団種類の推定にトライする

## 画像から布団の種類を推定できるのか

今回は Azure Custom Vision を使って、画像から布団の種類を推定できるか調査してみます。

## Azure LearnでCustom Visionの使い方を学ぶ

Azure のサービスはは[Azure Learn](https://docs.microsoft.com/ja-jp/learn/)で教材が提供されており、ハンズオンレベルなら 1 時間くらいで試せるものも多いです。

今回は、
　　`Microsoft Custom Vision Service を使用して画像を分類する`
　　([https://docs.microsoft.com/ja-jp/learn/modules/classify-images-with-custom-vision-service/](https://docs.microsoft.com/ja-jp/learn/modules/classify-images-with-custom-vision-service/))
を参考に、布団の推定を進めていきます。

Azure Learn のドキュメントは本当によくできているので、ハンズオンがしたければ上記のドキュメントを見たほうがわかりやすいです。
以降は、布団推定に特化した部分のみ記載します。

## 布団推定モデルの作成

### 布団の画像を用意する

以下のような布団やタオルケットなどの写真を計 16 枚用意しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90087/a0e9ebd6-cf58-8e0c-03d2-86c56f863953.png)

### タグをつけてアップロードする

[Custom Vision Service ポータル](https://www.customvision.ai/)から、プロジェクトを作成し、
タグに布団、毛布、タオルケットの 3 つを登録します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90087/1189eab0-a668-34a6-d1ee-f9e4d3f9c0f7.png)

それぞれのタグに紐づく画像をアップロードしていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90087/253548d7-4168-6d66-622c-689bfce1b188.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90087/a36d9b6e-f1f6-aba1-c767-28e859fafaf1.png)

今回は、タグ`futon`の画像を 5 枚アップロードしました。
ダッシュボードはこのような感じになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90087/dd646cfe-4151-86b6-2fdc-77c397ff8ddc.png)

続けて、毛布・タオルケットの画像もアップしていきます。
最終的にダッシュボードはこのような感じになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90087/1981d1f3-8b34-2542-6898-9c24f4c21c17.png)

### モデルのトレーニングをする

画像のアップロードが終わったので、トレーニングしていきます。
画面右上の`Training`ボタンをクリックします。
そうすると数分でトレーニングが完了し、結果が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90087/7b09dfe6-3e0e-19bb-3e23-810f758cd40e.png)
驚異の 100％ですね。さすが、Microsoft が出しているクラウドサービスです。

## テストデータでモデルを検証する

トレーニングには使用しなかった別の画像で、精度を検証してみます。
ぐちゃぐちゃになったタオルケットを模したベッドの画像です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90087/c4cbfe76-de19-fdef-bb3a-d9938703da63.png)

ダッシュボード上の`Quick Test`をからテストしてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90087/86b5f5d0-717e-638e-b3c1-c152abcdaaeb.png)

結果は..。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90087/69dc96e6-2916-dea1-aea1-7c9c5a25163f.png)

**驚異の 99.9％**です。似たような画像をトレーニングデータとして使用しているからでしょうか。
では、ネットで拾ってきた画像でチャレンジしてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90087/968aa4a2-3b37-2230-fba3-6b56b9e9274a.png)

結果は...残念ながらはずれとなりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90087/5cf199a7-756f-f7bb-b504-28567f0822f2.png)

うすうす気づいていましたが、やはりトレーニングデータの偏りが大きそうですね。

## 普段使っている布団を判定することはできそう

ほかの画像でも数枚検証してみましたが、**自分で撮影したものは精度が高く**、商品画像などは別物と判定されてしまいました。
自身で撮影したものは大体の色・明るさ・角度が揃っている一方で、商品画像は全然違うので仕方ないですね。

めちゃくちゃ接写して、生地感で判定してみるとうまくいくかもしれません。

いろいろトライしてみて高い精度で判定できるようになったら、他のアイデアに組み込もうと思います。
なぜテストが書けなかったのか？初心者がLaravelで初テストを書くまでのモヤモヤを考察

この記事の続きは[G's ACADEMY Advent Calendar](https://qiita.com/advent-calendar/2019/gsacademy)の14日目に公開します。
この記事用にそもそもの話を掘り下げようと思ったら、長くなったので前置きを分けました。

## はじめに

私が初めてLaravelを触ったのはおよそ1年前です。

ちょうど去年の今頃は、フレームワークとかMVCとかちんぷんかんぷんです。とにかくサンプルコードをコピペしてきてなんとかいじって動かす、ということを延々とやっていました。
その後だんだんLaravelのお作法にも慣れてきて、全てを画面で動かしながらデバッグすることに辟易してきたのが今から半年前。
それからつい先日まで、テスト書きたいけど何からやればいいのやら…と途方にくれていた私が開眼した（と思う）ので、そのことについて書きます。

私のようなケースはマイノリティかも知れませんが、テストがなんとなく書けなかったこのモヤモヤの正体を言語化できればと思います。他にもテストでモヤっている人の何かのきっかけになれば。。。

## 結論
結論から言うと[PHPフレームワークLaravel Webアプリケーション開発](https://www.amazon.co.jp/dp/B07SPT6XJV/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)という本で「11章　TDDの実践」の中身を写経してみたら、結構スッと入ってきた、というだけです。
体感として本当に抵抗なく、**テストってこう言うことか！**と分かったので、じゃあ逆になぜ分からなかったのかが気になったので考察してみた次第です。

## 対象になりそうな方
- テストを書くのに興味あるけど、何から始めればいいか分からない人
- Laravelの基本的なお作法が分かっている人

## なぜテストが書けなかったのか
テストコードを書く、という感覚が掴めなかった私にとって、課題は下記の3つでした。

- そもそもテストのお作法（構文、使う関数）がよく分かっていなかった
- すでにある実装に対して、テストを書くために何をすればいいか分からなかった
- どういうテストが必要か分かっていなかった（テストの種類に対する理解がない）

でも今考えると、両方とも私の中では問題の根っこはひとつでした。すなわち **テストの書き方は実装の内容によって変わる** ということです。テストの構文や使う関数は調べればいくらでも出てきます。しかし、どこでどうやって使えばいいのかイメージができない。
すでに自分で実装したコードに対してテストを書こうとしても、ググって出てきたサンプルコードは当然使えませんし、一般的な書き方を調べてもピンと来ませんでした。

これは私の勉強スタイルとの相性にも問題があったかもしれません。私のよくやる勉強方法はこんな感じです。

- 使いたい部分をとりあえずコピペしたり写経したりして、それっぽいサンプルを動かす
- それをいろいろいじって自分のアプリケーション上で動くようにする
- 上記の過程で何となく仕組みを理解していく
- 自分で最初から書いてみる（繰り返す）

これだと、まず自分の実装に使えそうなテストコードを探すことになります。でも自分の実装に対してどういうテストを書けばいいか全くイメージできていないので、使えそうなテストを探し出せない。

そうかと言って簡単なサンプルアプリケーションをテストも含めて写経してみたところで、このサンプルのケース以外ではどうやって書くの？という状態でした。こちらに関しては覚えれば済む話で、テストで使う構文や関数に対する知識が圧倒的に足りなかったのだと思います。

上記のような状況の中さらに悪いのは、大抵の場合自分で書いた実装は **テストが書きやすい実装になっていない** ことです。これにより結局何をすればいいのか分からず混乱します。

こうして私は、必要と知りつつテストを書くことから、なんとなく逃げていました。。。

## なぜLaravelでやるのか
- Laravelの機能でDBのテストも含めたテストが簡単に書ける
- Laravelのお作法に慣れ親しんでいれば直感的に使える（それの良し悪しはおいといて）

私にとっては慣れているフレームワーク上で書けたので戸惑いが少なかったように思います。
また、書籍の11章の中で、特に下記のようなところがテスト初心者の私にとって易しいポイントでした。

- テストありきで設計していくのでテストを書く過程が追える
- 小さく小さくテストを書いていくのでテスト自体が単純で書きやすい
- サクサクとテストが通って気持ちいい感覚が得られる
- 何より、テストを書くための準備について触れてくれていた

気がつくと、**テスト書くの楽しいかも〜！！**となってました。

## さらに9章でもう少し細かく実践できる
11章を終えた後9章に戻ると、Laravelでのテストの仕組みについて、より詳細な説明を読むことができます。
9章は11章と違ってハンズオンでテンポよく進む感じではなかったし、初心者には少し難しい部分があると感じました。脱初心者くらいの方に良い本なのかもしれません。

ということで、TDDを通してテストを書くことで「テスト書けない問題」の克服のための第一歩にしてみてはいかがでしょうか。次の記事ではもう少し具体的に書いていきます。

## ちなみにTDDについては賛否両論だった
社内勉強会でこの本を使ったので、TDDに関してはいろんな意見が出ていました。

- テストが動く安心感がある
- エンジニアにとって精神衛生上良い！
- 現場ではTDD難しいよね、、（既存サービスの保守改善とかだとなかなか実践できない）
- 新規開発の時はテンポ良く開発できて楽しそう

などなど。
個人的にはテスト書いて実装して、を繰り返しながら開発していくTDDは、螺旋階段をどんどん登っていくようなイメージで楽しかったのでした。自分でミニアプリ作るときにTDDでやってみたいと思いました！

この記事の続きは[G's ACADEMY Advent Calendar](https://qiita.com/advent-calendar/2019/gsacademy)の14日目に公開します。

## 参考

[PHPフレームワークLaravel Webアプリケーション開発](https://www.amazon.co.jp/dp/B07SPT6XJV/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)
データサイエンティスト半人前への最短ルート

# データサイエンティスト半人前への最短ルート

さて、遅刻遅刻と急いで書くことにします。

技術書典で買ってきた本について書くときにいろいろ考えはしたのですが、やはりこの本について書くのがよさそうだと思いました。『[データサイエンティスト半人前への最短ルート](https://techbookfest.org/event/tbf07/circle/4894578423365632)』という本です。大雑把に追って、データサイエンスプロジェクトの大まかな工程や関連するツールなどが書かれています。

主にRを使って作業される方なのか、Rのパッケージについてはいくつか私も情報を持っていなかったものがあり、大変に参考になりました。また、データサイエンスのプロジェクトについての見方についても参考になるものが多かったように思います。実際問題、データサイエンティスト養成講座のシラバスをベースに書かれているので、これが売られていること自体が驚きでした。

この本で紹介されているパッケージで非常に役立ちそうだなと思われるのは[dlookr](https://github.com/choonghyunryu/dlookr)ですね。いわゆる、EDA(探索的データ分析)に関連するパッケージで初期の統計レポートを作ってくれるパッケージです。データ分析のお手本ともいうべきCRISP-DMではビジネス課題の理解、データの理解、データの準備、モデル作成、評価、展開／共有という段階を踏んで分析を行いますが、実際には最初のデータの準備までの工程がかなり重くなるのはデータ分析者の共通認識だと思います。このパッケージは特にデータの理解に有用であると考えます。

特にこの本は工程全般において書かれていますので、データ分析者の育成に関わる方には特に有用ではないかと思いました。まあ、いろいろ書くべきことはあるかなと思ったのですが、dlookrあたりを書いたあたりでだいぶ、脳のクロックが落ちてきたように思うのでいったんここまでにしようかと思います。
ﾃﾞﾌﾞﾅﾉﾆAdminﾉｵﾊﾅｼﾖｰ

Salesforce Advent Calendar 2019 12Dayﾖｰ
BNKﾀﾞｲｽｷ　ﾊﾝｶｸｶﾅﾖｰ

ﾀｲｼﾞｭｳ110kgﾖｰ
ﾃﾞﾌﾞﾀﾞｹﾄﾞDEVｼﾞｬﾅｲﾉﾖｰ
Adminﾖｰ
ｻｲﾀﾏﾉｹﾙﾍﾞﾛｽﾊ　3ﾂﾉGateｦﾏﾓｯﾃﾙﾉﾖｰ

ｵﾌﾞｼﾞｪｸﾄﾖｰ
　Account…ｶｲｼｬﾖｰ
　Conntact…ﾋﾄﾖｰ
　Opportunity…ｵｶﾈﾖｰ
　Lead…ｺﾞﾐﾉﾔﾏﾖｰ
　Campaign…ROIﾖｰ
　ToDo…ﾌｾﾝﾖｰ
　Event…ｶﾚﾝﾀﾞｰﾖｰ
　Contract…ｷｶﾝｼﾊﾞﾘﾖｰ
　Order…Contractﾉｵｶﾈﾖｰ
ﾎｶﾊｲﾚﾅｲﾉﾖｰ

メール送ったクライアントの特定に、取引先に一個だけチェックボックス作りたいんす
Campaignﾂｶｳﾉﾖｰ

すぐほしいんす！！
キャンペーン使ってたら間に合わないじゃないんすか！
ｶﾞﾝﾑｼﾖｰ
Campaignﾂｶｳﾉﾖｰ


ﾂｷﾞﾖｰ

ｵﾌﾞｼﾞｪｸﾄｺｳｾｲﾖｰ
ﾋｮｰｼﾞｭﾝﾏﾓﾙﾉﾖｰ

ｻｲﾀﾏﾉ　ｵﾌﾞｼﾞｪｸﾄｺｳｾｲﾖｰ
<img width="773" alt="スクリーンショット 2019-12-04 20.58.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532821/7ecfcf1a-e0cd-1bb5-b717-eea04099c67c.png">
ｶｽﾀﾑ4ﾂﾖｰ
ﾐﾂｹﾙﾉﾖｰ

個人顧客リードの売上管理したいんやけど、商談紐付けてもいいんす？
ﾀﾞﾒﾅﾉﾖｰ
ｺｼﾞﾝﾄﾘﾋｷｻ　ﾂｶｳﾉﾖｰ

うちは他の会社と違うから、標準なんて使えないんす
ｳｿﾖｰ
ｲﾝﾌﾟﾘ　ｲﾊﾟｰｲﾔｯﾀｹﾄﾞ　ﾃﾞｱｯﾀｺﾄﾅｲﾉﾖｰ


ｻｲｺﾞﾖｰ
ﾆｭｰﾘｮｸｷｾｲﾖｰ
ﾃﾞｷﾙﾀﾞｹ　ﾂｶﾜﾅｲﾉﾖｰ
ｻｲﾀﾏﾃﾞﾊ　ｾﾞﾝﾌﾞﾆｭｰﾘｮｸｼﾅｲﾄ　ﾌｪｰｽﾞｱｶﾞﾗﾅｲﾉﾖｰ

売上フェーズになったら金額と日付変えれなくしてほしいんす
ｵﾝﾀｲﾑﾃﾞｾｯﾃｲｽﾙﾉﾖｰ

キャンセル日付は部長しか設定できなくしてほしいんす
ｹﾝｹﾞﾝｾｯﾄﾖｰ

ｵﾜﾘﾖｰ
salesforce　ﾊ　salesforce　ﾗｼｸﾂｶｳﾉﾖｰ
ﾗｲﾈﾝﾓ　ﾊﾝｶｸｶﾅﾖｰ
pyとshebangとvenvとわたし

なんか要素が3つ続くと とととわたし構文にしたくなる。

# ところで
windowsでvenv使いつつpy Launcher使っちゃうときない? 僕はいつも使ってる。
shebangに関してはなんとなーくわかってたんだけど、
windowsだしまぁあんまり気にしなくていっかっておもったらそうでもなかった

例えばこういうファイルが有ったとして

```hoge.py
#!/usr/bin/env python
import pandas
```

更にこういう環境があったとする。デフォルトのpythonは素のまんま。

```
$ py -m venv hogenv
$ . hoge/Scripts/activate
(hogenv) $ pip install -U pip
(hogenv) $ pip install pandas
```

じゃあ実行しようってなったら py 自然とこういう感じになる。ならない? なると思う。

```
(hogenv) $ py hoge.py
```

こうすると `pandas` がないぞって言われる。なにゆえ。

# 困ったときのPEP
すごくくだらないんだけど、このPEP397、サンキューな!って感じがして個人的にツボ 
まじでサンキューな

とはいえ全部書かれてなかったからどこでみたか忘れたんだけど、(多分参考のどっかにある)

```
/usr/bin/env python
/usr/bin/python
/usr/local/bin/python
python
```

こいつらがあるとpyランチャーはデフォルトのpythonインタプリタを呼び出すらしい。
なのでさっき pandasがないぞって言われたのはデフォルトの何も入ってないpythonを呼び出したからだと思う。

# 踏まえて

こう起動したら良くない? ってなった

```
(hogenv) $ python hoge.py
```

windows だけで考えるなら仮想環境のパスをshebangに渡してしまって、
py ランチャーで起動するのも有りだと思う。

もしくはshebangを抜くか。

特に締まらないけどこれでおしまい

# 参考


[3. Windows で Python を使う](https://docs.python.org/ja/3/using/windows.html)
[shebangのとこ](https://docs.python.org/ja/3/using/windows.html#shebang-lines)
[https://www.python.org/dev/peps/pep-0397/](https://www.python.org/dev/peps/pep-0397/)

# 余談
これしらんくて鼻水でた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315694/257bbe36-c71e-1747-06a6-97712bcbeb04.png)
USBキーソフトウェアの複製-Donglify

USBキーソフトウェアの複製-Donglify

ドングルは、ラップトップ/コンピューターの開いているポートに差し込まれる周辺機器であり、重要なものを安全な場所に転送するのに役立ちます。組織の重要なファイルを保護することは非常に重要であり、使用することにより、重要なデータを保護するために不可欠なデバイスであるドングルを使用します。
ただし、これらのファイルのコピーを従業員に提供する必要がある場合があります。そのため、ファイルの保護されたコピーの作成方法を知ることが重要です。従業員がデータを表示したり、必要に応じて変更を加えたりします。また、デバイスが破損した場合に備えてドングルのコピーを作成して、ファイルを簡単に復元できるようにすることが重要です。
ドングルとは何ですか？どのように機能するのか、ファイルを保護するためにどのようにコピーを作成するのか？
##USBドングルとは何ですか？
ドングルは、ファイルを保護および保護するためにコンピューターに接続し、デバイスのユーザーを認証する機能も実行するアダプターです。
ドングルの仕組みは次のとおりです。プログラミング機能が開始されると、ドングルがセキュリティコードに到達してその操作を続行できるようになります。
##ドングルの複製を作成する
![donglify.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/447311/d64cdad9-882d-026b-d1bc-1421fc4fa4c3.png)

ドングルまたはセキュリティキーを複製する最も適切で適切な方法は、[Doglify](https://www.donglify.net/)と呼ばれるソフトウェアです。ドングルを他のネットワークと共有できる特別なソフトウェア。 Donglifyは、ネットワーク間でドングルを共有するための追加のハードウェアデバイスの必要性を排除します。これにより、ドングルが暗黙的に機能するようになり、ドングルに接続されていないコンピューターからもリモートでアクセスできるようになります。 Donglifyは、ソフトウェアを片手で複製し、ネットワーク経由でアクセスできるようにする安全な方法を提供します。
**USBドングルは、Donglifyを介して次の方法で複製できます:**
•ユニークなマルチ接続機能により、ユーザーはUSBドングルを使用して、同時に複数のコンピューターのコピーを作成できます。この機能は現在、HASP HL Pro、Sentinel HL Pro、SafeNet eToken 5110、およびCodeMeter CmStickセキュリティキーでのみアクセス可能です。
•リモートコンピューターからドングルへのアクセスを可能にする安全なソフトウェア

Electronic Team Inc.は、マルチコネクトをサポートすることの重要性を高く評価しています。このプロセスにご協力いただき、情報を共有していただければ幸いです。必要なのは、情報support@electronic.usを使用してサポートへのリクエストを残すことです。

•このドングルで使用するソフトウェアの種類。
•ドングル共有アクティビティのログを送信します（実行方法に関する情報を送信します）
Donglifyの使用は、リモートコンピューターを介してUSBセキュリティキーにアクセスする場合の優れたソリューションです。また、[Flexihub](https://www.flexihub.com/)を使用することもできます。Flexihubは同様の機能を実行するだけのソフトウェアで、マルチコネクト機能で構成されていません。
ネットワーク&TCP/IPのきほんを読んでいるのでアウトプットする：その１

# はじめに
表題の通り
オススメされていた書籍の一つである「スラスラわかるネットワーク&TCP/IPのきほん」を読んでいるので学んだ内容や言葉を少しずつアウトプットしていこうと思う。

## ピアツーピア
コンピュータとコンピュータ同士が接続し合うことで完結する通信形態を**ピアツーピア**と呼ぶ。
単純にファイル共有などが当てはまるが、ネット電話などを想像するとわかりやすいか。


## パケット交換方式
例えばメールを送信する場合を想定してみる。
メールには題名、本文、添付ファイルなどがある。
これらが一つのデータとなって送信がされるのではなく、それぞれが**パケット**と呼ばれる単位に分割され通信が行われる。
それぞれに送信先のアドレスなどのデータが付属されており、バラバラに送られても問題なく送信先まで送られる。
また、分割されたデータを少しずつ送ることにより回線の占有を避け、複数の相手と並行して通信を行うことができる。

余談として携帯電話のプランとして昔あったパケホーダイって、このパケットのことだったのね…と

## 回線交換方式
アナログ電話や携帯電話などの3G回線で使用されている通信方式（4Gは？）
**パケット交換方式**と異なり、通信経路を占有する通信方式なため、1対１でしか通信はできないものの、通信速度が安定しているのが強み

続く…
【kintone】添付の音楽ファイルに音楽プレイヤーつける

# 音声ファイルをダウンロードして聞くのめんどくさい

kintoneの音声ファイルを一覧から再生したいなと思って書いたソースです。

下図を御覧ください。

[デモ]フィールドに音楽ファイルを添付しています。
![2019-12-11_23h13_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/3f3fbb68-67db-5506-a470-5a0238df976e.png)

これだと、いちいちダウンロードしてから聞かないといけないのですが、
「めんどくさいな」ってつぶやいちゃいそうですよね。

# そこで私は考えた。

音楽ファイルはaudioタグでプレイヤー化してしまえばいいのではないか？

`<audio src="XXXXXX.mp3" controls>ファイル名</audio>`

こうだったらいいのではないか！？

# JavaScriptを書いた
というわけで、私がよく使う拡張子のmp3とm4aとwavだけは音楽プレイヤーにしようと思って書いたのがこれです。
ゴリ押しな感じだけど、要は、拡張子がmp3かm4aかwavだったら、`<a>`タグの下に`<audio>`タグも追加してねっていうソースです。

いきなり出てきているrecordlist-file-others-gaiaですが、htmlを見た感じ、添付ファイルがある親の層にこのrecordlist-file-others-gaiaクラスのタグがあるみたいです。

html上の添付ファイルを探すためにこのクラスを使っている感じです。
なので・・・、kintoneの仕様変更などでクラス名が変わったりすると使えなくなります。


```js

    kintone.events.on([
        'app.record.index.show'
    ], function(event) {

        $('.recordlist-file-others-gaia').each(function() {
            let href = $(this).find("a").attr('href');
            let hrefarry = href.split(".");
            let extention = hrefarry[hrefarry.length-1];
            if(extention==="mp3"|| extention==="m4a" || extention==="wav"){
                $(this).parent().append(`<li><audio src="${href}" controls><p>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p></audio></li> `);
            }
        });
    
        return event;
    }); 
```


https://js.cybozu.com/jquery/3.4.1/jquery.min.js
と、
上のソースを、
設定の「JavaScript / CSSでカスタマイズ」でセットしたら

↓のようになるはず！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/6bfa486b-cd77-50d9-b94a-e83553e8047b.png)


やったね！


# プラグイン化
プラグインってどうやるのか分からなかったのですが、
これを機会に勉強しておこうと思って、ついでにプラグイン化してみました。

このまま、.mp3か.wavか.m4aしかプレイヤーにならない状態ですし、
kintoneの仕様変更などあればいつ使えなくなるかわからないし、
全く動きの保証をするつもりもなくて申し訳ないとしか言えないプラグインですが、
それでもよかったら使ってみてくださいネ。

↓ここのplugin.zip
https://github.com/juriotama/kintone_audioplayer

読んでくださり、ありがとうございました！
28歳未経験からエンジニアになって早一年

お疲れ様です。
エンジニア歴があと半月で丸一年になります門脇と申します。
今回は28歳未経験&勉強嫌いの私が、ここまでどうやってしがみ付いて来られたのか
その航跡について書いていきたいと思います。

# はじめに
この記事は[うるる Advent Calendar 2019](https://adventar.org/calendars/4548) 12日目の記事です。

# 夜明け前
私は小さい頃から物を作るのが好きでした。
小学生の時の通信簿はいつも図工と道徳だけ４でした。
０から何かを作り、それが段々と形になっていくことに面白味を感じていました。

前職もものつくりに携わる仕事をしていたのですが、
友人からの誘いで今のエンジニアという職に就く事になりました。
勉強の苦手な私がエンジニアとしてやっていけるのかどうか最初は非常に不安でしたが、
手に職を付けたいという思いと何かを作る仕事がしたいという気持ちから挑戦してみることにしました。

# 書籍について
今の会社には入社時に3ヶ月間の研修があり、
そこでは主に
・Javaを使用したプログラミングの基礎
・DBの操作
・WEBアプリケーション作成
などを学びました。

会社側で研修用のテキストは用意されていたのですが、
それとは別に入社する前に読んでおくようにと勧められた
**「スッキリわかるJava入門」**
という書籍。
Javaの基礎をRPGのキャラクターやアイテムに絡めて説明してあるのですが、
この本が非常にとっつきやすく、苦手意識を克服してくれました。
特にオブジェクト指向（カプセル化、継承、多態性の理解）については、
RPGというゲームの特性がうまく利用されており、難なく理解することができました。
未経験の人にとっては非常に有用な書籍だと感じます。


# 同期との出会い
私が入社した今年1月、他にも10名ほど同期がいました。
募集対象が２８歳までということもあり、ほとんどが私より年下でした。
3ヶ月間はこの同期と一緒に研修を受け、現場に出ていくという流れなのですが、
私を除いて全員大変優秀で勉強熱心で、そんな状況に最初はかなり焦っていた記憶があります。

一応大卒ですが、この3ヶ月間は人生で一番勉強した期間となりました。
勉強する上で環境というものは本当に大事であるとその時痛感しました。

# デビュー作
兼ねてからプログラミングには興味はあったものの、
何かを開発した経験は皆無でした。
学生時代にコンソールに『Hello,World』と出力させて浮かれていたのが最後です。

ある程度プログラミングも理解し始めた頃、
今学んでいる知識だけで作れるものを作ってみようと考えました。
内容としては簡単な投票システムです。
当時はサーブレットやjspについて学習していたこともあり、
これらを利用して開発を行いました。



こんな感じ
<img width="500" alt="vote1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549055/f2f59d46-ce16-0cd6-e353-3e65f2657e9b.png">


ソートができる
<img width="600" alt="vote2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549055/44696169-5112-1f11-a7a9-156d793203b6.png">

追加もできる
<img width="600" alt="vote2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549055/08633db4-696a-6f9d-aad2-06c2c508567f.png">



大体の処理の流れとしては、
サーブレット側で初期値の曲名リストとそれぞれの得票数（最初は０）を定義しておく
↓
セッションスコープに格納しjspへ送る
<img width="700" alt="Servlet.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549055/33aa544c-39e8-a8fe-3cfd-5c1e6af31409.png">

投票、ソート、曲追加のそれぞれの操作が行われたら専用のサーブレットで処理を行う
↓
再びセッションスコープに格納しjspへ送る
↓
繰り返し



投票した時に伸びるグラフはhrタグを利用してました。
<img width="700" alt="hr.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549055/e73482de-cf37-3108-b259-a2d1a263eaf3.png">

起動のさせ方を完全に忘れており、動くまでに半日かかりました。



# そして現在
3ヶ月の研修が終わった後、最初にアサインされた現場は広告系の会社で、
広告配信レポートをスクレイピングで収集し、メール送信するといったサービスを行っていました。
大方のシステムは完成されており、私は主にバグの改修や保守運用を担当していました。
環境構築からわからないことだらけで、
まともに手を動かせるようになったのはジョインしてから一ヶ月以上経った後でした。
アサインされた期間も短かったこともあり、
その現場では実際に大きなシステムを開発したり、
リリースに携わったりといったことはありませんでしたが、
使用言語やフレームワークも研修で扱っていたJavaやSpringだったこともあり、
研修で学んだことをうまくシフトしながら取り組むことができていました。

そして現在アサインされているうるるでも、同じくスクレイピングの開発を行っています。
前の現場とは違い、１からコードを書くことに面白味を感じながら開発しています。
ものつくりが好きだった自分を呼び覚ましてくれているようです。
新しく触れる言語や技術がほとんどであったり、
チームでの開発も初めてということもあり、非常に刺激になり勉強させてもらっています。
まだアサインされて日は浅いですが、1年前の自分からは想像ができないほど成長していると感じています。
2019年も間もなく終わりますが、来年も引き続き成長を感じれるよう頑張りたいと思います。
さくっと論文情報.bibと論文.pdfをダウンロードしてBibDeskに追加したい(天文系限定)



#はじめに

この記事は「TeXで天文学系の論文を読む/書く人」を対象にした記事です。
あんまり一般的ではないことは承知ですが、一部の人の助けになることを信じて執筆する次第です。


論文管理をする際に重要なのは、**「いかにして楽に正確に論文情報(.bib)と論文ファイル(.pdf)を追加するか」**という点ですね。天文系の論文は[ADS(Astrophysics Data Systems)](https://ui.adsabs.harvard.edu)と呼ばれるサイトに集約されており、ここで論文を検索したりします。今回紹介するツールを使うことで、**えらい簡単にADSから論文情報+ファイルをBibDeskに追加できます。**[BibDesk](https://bibdesk.sourceforge.io)や[Mendelay](https://www.mendeley.com)など色々あるとは思いますが、上述の理由とTeXShopと相性が良いため僕はBibdeskを使っています。



元々[こちら](https://researchmap.jp/jovah81bs-1802024/)や[こちら](https://xchop.blogspot.com/2013/11/ads-to-bibdesk-httpwww.html
)のサイトを参考に下書き記事を書いていたのですが、かなり更新された部分もあるので情報をまとめたいと思います。

# ads_bibdesk(現在は使えません)
[jonathan sick](https://jonathansick.ca)氏が公開しているスクリプト。Githubは[こちら](https://github.com/jonathansick/ads_bibdesk)。
ここ数年は更新されていないものの十分に使えるものだったのですが、ADSの仕様が大幅に更新されたことにより(アクセス時にAPIを要求するようになりました。)、完全に使えなくなりました。僕はこれにめちゃめちゃ依存していたので途方に暮れていたのですが、代替物を見つけたので命拾いしました。



# ads2bibdesk
お亡くなりになったads_bibdeskの思想を引き継ぎ、新バージョンADSに対応できるのが、Rui Xue氏が開発した[ads2bibdesk](https://github.com/r-xue/ads2bibdesk)です。使い方は書いてあるのですが、こちらでも簡単に説明しておきたいと思います。





### インストール方法
条件：Python3.6以上でないとダメです。インストールしてください。
  
1. ADSアカウントを作成 
   [ADS右上のSignUp](https://ui.adsabs.harvard.edu/user/account/register)でメールアドレスとパスワード入力して、届いたメールで承認。



2. APIトークンを発行
ログイン後、Account >> Custamize Settings >> API Token >> Generate a new key
英数字の文字列がAPI token。

3. お好きな場所で`git clone https://github.com/r-xue/ads2bibdesk.git`

4. `python setup.py install --user --service`
    --userと--prefixが共存できやんとか言われたら`--prefix=`を追加。
    pyobjc, request, adsパッケージに依存してるので必要に応じてインストール。
    エラーが出なければ~/.adsが~/Library/Servicesに'Add to BibDesk.workflow'が追加され、~/.adsディレクトリが作成される。

6. ~/.ads/ads2bibdesk.cfgを編集、`ads_token = dev_key`の`dev_key`を1-2で得たAPI tokenに入れ替え。





3-4については、Readme等に書いてあるようにpip(condaは未対応?)でインストールしてもOK(なはず)です。

### 使い方
1. ADSで論文を検索

2. Bibcodeを右クリック>>サービス>>Add to Bibdesk
![スクリーンショット 2019-12-13 10.43.17_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278171/6895a4b9-eb6c-3fcb-fe85-001115aa6669.png)


3. 論文情報を追加してくれて、論文ファイルもBibDeskで指定の場所にダウンロードしてくれる。
![スクリーンショット 2019-12-13 10.46.08_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278171/5b6c8f63-170e-0956-3f7d-473ff2888604.png)


### 論文情報の補完機能について
旧バージョンのads_bibdeskには、bibファイルの情報を更新する機能がついていました。新バージョンには備わっていないようですが、今後実装する予定ではあるそうです。


## 追記
Mojave以降はセキュリティの仕様が変更したために、うまくいかないです。
エラーメッセージ：` Not authorized to send Apple events to BibDesk.`
エラー番号：`-1743`
ネット上の対処法を試して見るもののうまくいかないです。
何か手がかりがありましたら教えて頂けると幸いです。
Safari以外のブラウザで、権限が追加できたものに関しては、使えるようです。

### 処方箋(2019/12/16)
どうやらSafariが他のアプリケーションを動かすことが許されていないようなので、terminalで動かすことを考える。

1.　まず下のようなファイルを作る。

```shell:ads2bibdesk.command
~/.local/bin/ads2bibdesk "`pbpaste`"
```
- `pbpaste`はクリップボードの内容を吐き出すコマンド。
- `.command`はクリック時に実行ファイルとして開くための拡張子。
- 実行時アプリケーションはterminalに設定。


2.　`ads2bibdesk.command`をDockに追加。

使い方としては、Bibcodeをコピーした後にこれを起動することでads2bibdeskをターミナルから動かす。
とりあえず処方箋として。

# 参考文献

- [文献管理や執筆作業を省力化する、統合した環境](https://researchmap.jp/jovah81bs-1802024/)
- [名月記: ADS to BibDesk](https://xchop.blogspot.com/2013/11/ads-to-bibdesk-httpwww.html)
TypeScriptのEnum＜文字列型＞でValueの存在確認をしたい

# TypeScriptのEnum
TypeScriptはJavascriptへのトランスパイル（変換）を前提として、型システムなど機能を増強した比較的新しい言語です。

で
そのうちの一つ、enum型（プリミティブ）がとてつもなく中途半端なことが原因で長い時間ハマったのでナレッジを記載します。

## enumが中途半端とは
そもそもJavascriptにはenum型がありません。でもTypeScriptにはEnumがあります。
それを実現しているのはトランスパイラ。

つまり、「本当はない概念を、それらしく変換することでそう振る舞わせている」だけ
なので、言語システムとしてガッツリ組み込んでいるJavaやC#のそれだと思ってかかると悩みます。

`enumだけど、他の言語のそれとは違うということを念頭に入れておきましょう`

## 今回やりたかったこと
- HTTPリクエストヘッダーに含まれる特定の要素以外を全てコピーしたかった
- 除外ルールを作るため、以下の様に実装していたが、レビューで弾かれenum発令が出る

```app.ts
const expire: string[] = ['content-type']

Object.keys(req.headers).forEach( key => {
    if (!expire.includes()) {
        ~コピーの処理~
    }
})
```

# 結論
こう書けばできる

```app.ts
enum test {
  AAA = 'content-type',
  BBB = 'CCC'
}

console.log( (Object.values(test) as string[]).includes('content-type') )
```

出力結果

```
true
```

## こうでないといけない理由
ひたすらtypeofとかで調べて以下の原因ことが挙げられます。

- 文字列をvalueに物enumはvalue値からの逆変換が言語仕様的にできない。（用意されてないという意味で）
    - トランスパイル後のJSがkey, value共にstringになるので探しきれないらしい
   

- enumはenum型でも、(上記でいう)test型でもなくobject型になるの
    - だからObject.values(test).includes(...)で型が合わずにビルドが通らない
    - でも結論コードのトランスパイル結果みるとその書き方に変換されているので、非常にシャク
    
- 〜in〜はkeyを比較してしまうので、Keyに指定できない文字列を探そうとするとinは使えない

上記の理由からどうしても生のTypeScriptでは、Object.valuesを使用することが避けられず、かつその戻り値か検索値をキャストする必要が生まれます。

後者をキャストすると

```app.ts
Object.values(test).includes('content-type' as test)
```

となってループの中だったり、enumを外部定義してるとソースの可読性が落ちたりという心配事が生まれます。（機械を信用しないタイプ）

なので、私の場合は結論コードになりました

## 余談
TypeScript、型システムはいいんだけどやっぱりJavascriptと機能に互換性がないものを使おうとするとめんどくさいです。
JVMで動くKotlinとかGroovyとかのトランスパイル言語もこんなめんどくささ抱えてるんでしょうか。。。

ちなみに、解決の決めては以下の質問からインスパイアされました


https://stackoverflow.com/questions/56044872/typescript-enum-object-values-return-value
GameTuneについて

本記事は[サムザップ Advent Calendar 2019 #1 ](https://qiita.com/advent-calendar/2019/sumzap1)の12/12の記事です。
昨日は@kida_hironariさんの「[最新技術の情報キャッチアップを集約して効率的に](https://qiita.com/kida_hironari/items/241d7d102c3da7c9fa36)」でした

##GameTuneとは何か？
* Unite Copenhagen 2019で発表されたUnityの新しいサービス
* Unite Tokyo 2019の「[開発から運用まで、デベロッパーをサポートするUnity Services](https://learning.unity3d.jp/3272)」というセッションでも触れられている
* Unityが持っているビッグデータと機械学習を使って1人1人のプレイヤーに対して最適なゲーム体験ができるような結果をリアルタイムをサーバーが返してくれる凄いサービス
* Unityの鎌田さん曰く
    * **これがUnityの提唱する次世代のゲーム開発だ！**
    * A/Bテストとは違う → A/Bテストの究極の進化系
    * これはもう使うべき、A/Bテストとか過去のものになる

##例えば？
* Unite Tokyo 2019のセッションによると
* ゲームのチュートリアルにおいて、短いバージョンと長いバージョンで1日継続率を改善したい場合に、何かしらの**指標**に応じでチュートリアルの短いバージョンと長いバージョンを出し分けたい時に、この**指標**をUnityが持っている膨大なデータからプレイヤーの性格を機械学習によって予測し、そのプレイヤーにマッチした設定を提供してもらう事が可能になる

##仕組み
* ゲームシステムからGameTune側に質問と選択肢を投げ、GameTuneは裏側でUnityの機械学習サーバーに問い合わせ、適切な答えを瞬時に導き出しゲームシステム側に返してくれる
* そしてそのユーザーがどうなったのかを観察して、GameTune側に学習させ精度を上げていく
![2019-12-11_23h09_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6790/179b39e0-10b7-71bd-b37e-0448ec3f075e.png)

[開発から運用まで、デベロッパーをサポートするUnity Services Unite Tokyo 2019](https://learning.unity3d.jp/3272/)のスライドより引用

##利用例
[この記事](https://unity.com/ja/unity/features/gametune?_ga=2.101107841.1602455134.1576069931-1671930287.1575722908)の`Futureplay から学ぶ (PDF)`に、FutureplayがGameTuneをどのように利用してダウンロードごとの収益を8%以上改善したかのドキュメントがあります。

FutureplayはFarming Empireというゲームで下記の4つのポイントでGameTuneを利用していてるようです

1. チュートリアルで、最初のレベルのペースのコントロールに利用
2. いつprestige pointを表示するかのコントロールに利用
3. 次の区画でどの動物や野菜を育てられるかのコントロールに利用
4. アプリ内課金のオファーの期間と内容のコントロールに利用

##動作環境
* Unity 2017.4以降
    * 2.2.0 GameTune SDKを利用する場合は、Unity 2018.3以降
* iOS/Android
    * ネイティブのSDKが提供されているので**Unity製じゃなくても**利用できる
* 今の所クローズドベータみたいな感じなので利用するには申込みが必要

##GameTuneの導入
* [ベータ版に申し込む](https://create.unity3d.com/gametune?_ga=2.100944897.1602455134.1576069931-1671930287.1575722908)
* [公式ドキュメント](http://docs.gametune.unity3d.com/#how-to-use-gametune)を参考に、`2.2.0 GameTune SDK for Unity`をダウンロードし、Unityのプロジェクトにインポートする
![2019-12-11_23h29_59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6790/2dfa82d4-813c-54df-e65a-2e064ef23577.png)

* この公式ドキュメントには、SDKの概要やサンプルも掲載されています

##まとめ
自分はまだ触り始めたばかりですが、Unityが異様に推しているのでしばらく調査も含めて試していきたいと思います。
利用者側では特に何も用意する必要が無く、このようなサービスを利用できるようになるのはとても素晴らしいです。


##参考
[新しい機械学習プロダクト GameTune でゲームのテストを簡素化](https://blogs.unity3d.com/jp/2019/11/08/simplify-your-game-testing-with-our-new-machine-learning-product-gametune/)
[GameTune](http://docs.gametune.unity3d.com/#gametune)
[開発から運用まで、デベロッパーをサポートするUnity Services Unite Tokyo 2019](https://learning.unity3d.jp/3272/)
[GameTune integration guide](https://github.com/Unity-Technologies/gametune-example-game/wiki/GameTune-integration-guide)



---
明日は@kazun9_nakaさんの記事になります。
pandas × groupby × Grouperを使って一定期間の集約処理を書いてみる

「N日間毎のあるカラムを集約した特徴量を作る処理をpandasで書きたいんだけど、どうするんだっけ？」というモチベーションからこの記事を書きました。

サンプルコードは以下リンク先のGoogleColabratoryから抜粋したものになります。
[GoogleColab - pandas × groupby × Grouperサンプル](https://colab.research.google.com/drive/1FjIwLz_cMT8auN-719ZOgb_DHUBEX6S4)

また、データはこちら([kaggle Datasets - Bitcoin Historical Data](https://www.kaggle.com/mczielinski/bitcoin-historical-data))を使っております。

まずはデータの前処理からです、先の処理のためにTimestampカラムはdatetime型に変換しておきます。

```python:load_dataset
import pandas as pd

btc = pd.read_csv("/content/bitstampUSD_1-min_data_2012-01-01_to_2019-08-12.csv")
btc[btc.columns.values] = btc[btc.columns.values].ffill()

# https://stackoverflow.com/questions/19231871/convert-unix-time-to-readable-date-in-pandas-dataframe
btc["Timestamp"] = pd.to_datetime(btc["Timestamp"], unit='s')

btc.head()

"""
Timestamp	Open	High	Low	Close	Volume_(BTC)	Volume_(Currency)	Weighted_Price
0	2011-12-31 07:52:00	4.39	4.39	4.39	4.39	0.455581	2.0	4.39
1	2011-12-31 07:53:00	4.39	4.39	4.39	4.39	0.455581	2.0	4.39
2	2011-12-31 07:54:00	4.39	4.39	4.39	4.39	0.455581	2.0	4.39
3	2011-12-31 07:55:00	4.39	4.39	4.39	4.39	0.455581	2.0	4.39
4	2011-12-31 07:56:00	4.39	4.39	4.39	4.39	0.455581	2.0	4.39
"""
```

問題の**N日間毎のあるカラムを集約した特徴量を作る処理**ですがタイトルのとおり、**pandas × groupby × Grouper**を使います。
集約処理をするときに「groupby」はよく使われますが今回は**N日間毎**と一定周期・区間毎にまとめたいため「Grouper」を使うのがミソです。まとめるのは時間なのでGrouperのkeyにTimestampカラムを指定してfreq='D'と指定してあげれば1日毎に集約するという処理の完成です。

```python:groupby_grouper
# freq='D'にすることで1日単位でまとめられます
btc.groupby(pd.Grouper(key='Timestamp', freq='D')).mean()
"""
Open	High	Low	Close	Volume_(BTC)	Volume_(Currency)	Weighted_Price
Timestamp							
2011-12-31	4.472552	4.472624	4.472552	4.472624	7.590527	34.069690	4.472579
2012-01-01	4.680778	4.680778	4.680778	4.680778	5.861697	27.856539	4.680778
2012-01-02	5.000000	5.000000	5.000000	5.000000	11.566478	57.832389	5.000000
2012-01-03	5.145917	5.145917	5.145917	5.145917	13.506125	68.725391	5.145917
2012-01-04	5.176708	5.228729	5.176708	5.228729	17.221039	91.624089	5.195443
...	...	...	...	...	...	...	...
2019-08-08	11802.176188	11809.075389	11794.541660	11802.534583	7.059914	83271.678234	11801.428490
2019-08-09	11820.325465	11826.872431	11813.188132	11820.873674	5.099464	60251.317095	11819.498275
2019-08-10	11582.574299	11587.521007	11576.103201	11582.249007	5.219845	60211.963986	11581.356693
2019-08-11	11378.198736	11382.765819	11373.714118	11379.078882	3.062079	34822.593814	11378.195194
2019-08-12	11527.440000	11551.570000	11520.000000	11520.000000	23.805939	274731.256920	11540.450291
2782 rows × 7 columns
"""
```
以上です。

# 参考
- [kaggle Datasets - Bitcoin Historical Data](https://www.kaggle.com/mczielinski/bitcoin-historical-data)
- [stackoverflow - group-by-week-in-pandas](https://stackoverflow.com/questions/45281297/group-by-week-in-pandas)
- [pandas document - pandas.Grouper](https://pandas.pydata.org/pandas-docs/stable/reference/api/pandas.Grouper.html)
- [note.nkmk.me - pandasの時系列データにおける頻度（引数freq）の指定方法](https://note.nkmk.me/python-pandas-time-series-freq/)
ノートパソコンってどうやって持ち歩いてる？

アドベントカレンダー１２日目です🎉
この記事は[What your laptop-holding position says about you](https://qz.com/work/1560481/laptop-holding-techniques-in-the-office/)を雑に訳したものです。

ノートパソコンの持ち方って人によって様々ですよね！
持ち方に名称つけたらちょっと移動が楽しくなるかも。
会議室などに移動する時、周りの人の持ち方をみながら心の中で「あれはティディベアの持ち方だ・・・🐻」とか思ってます。笑

今回は[Vroid](https://vroid.com/)公式キャラクターの[千駄ヶ谷篠](https://hub.vroid.com/characters/5860098757548846785/models/6567311261748429976)ちゃんにモデルになってもらいます👩
12月なので背景はクリスマス仕様です🎄[花鳥風月](https://azukichi.net/season/)さんからお借りしました。
ではいってみましょう。

## クラッチ
手で横にしっかり掴む持ち方。
クラッチバッグと同じ持ち方ですね。

![クラッチ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/a95473c6-9b25-bc9f-0261-405b292a4870.png)

**良い点**　シンプル・イズ・ベスト👍
**悪い点**　まぁ平凡だよね

## イヤーブック
片手で胸に抱える持ち方。
イヤーブックは卒業アルバムや学位記などの意味。

![イヤーブック３.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/129f27e6-f9ae-32b7-97f4-880d61cbb575.png)


**良い点**　銃打たれても大丈夫！
**悪い点**　警官心が強い

## ウェイター
飲み物を乗せたトレーのように腕に乗せる持ち方。

![ウェイター.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/5748f60c-27f1-72ec-fe72-ba16139d3a43.png)


**良い点**　片手が自由
**悪い点**　落としそう

## ティディベア
両手で胸に抱える持ち方。

![ティディベア２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/e195d235-cc48-aae5-5e99-21c3a39bb4de.png)

**良い点**　かなり安全
**悪い点**　分離不安障害になる危険性

## プレースホルダー
スリープ状態にならないように指を挟む持ち方。

![プレースホルダー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/31f12678-133d-c370-d3d8-9653a617ae77.png)

**良い点**　PCの起動時間を数秒節約
**悪い点**　指切断するよ？

## トイ
PCの端を持って横にぶらさげる持ち方。

![トイ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/06c21445-94fb-55d2-1d2b-d19cc81ec700.png)

**良い点**　無造作から醸し出すスマートさ
**悪い点**　手汗すごい人にはオススメしない

## 司書
PCを開いたまま胸で支える持ち方。

![司書.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/dff1f6c6-fca7-0d36-2e21-23f9d0c69b2d.png)

**良い点**　読んでるページをキープできる
**悪い点**　バッテリーの寿命はキープできない

## マイケル・ジョーダン
1本の指で回転させながら持つ。

![マイケル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/4d02edf2-678e-c257-0f2a-179798f07491.png)

**良い点**　かっこいい！すごい！
**悪い点**　ここはバスケのコートではない😤

## 水を運ぶ者
バランスとって頭に乗せて持つ。

![ウォーター.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/8aa22601-eeb9-b401-52c9-34db3ee2dd51.png)

**良い点**　両手が自由！
**悪い点**　ここはアフリカではない😤

## 観光客
PCではなくカクテルを持つ。

![観光客.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/38c208fb-cdb7-f15a-f891-ca080f5c0103.png)

**良い点**　全て🍹
**悪い点**　なし🌴

## 最後に
かわいい女の子を見てるだけでテンションあがります🤗Vroid楽しい。
編集リクエスト歓迎しています！

明日は、shg_shgさんの日本語カスタムフォントのお話です！
忘れがちなvhostとかApacheの再起動

### vhost再起動

```
$sudo /etc/rc.d/init.d/httpd restart
```

### Apache 起動
```
service httpd start
```
### Apache 停止
```
service httpd stop
```
### Apache 再起動
```
service httpd restart
```
### Apache 状態確認
```
/etc/init.d/httpd status
```
お絵描きツールおじさん「おお、これはWebGLならではだなぁ～」

#はじめに

![ダウンロード.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59191/93a6cef8-5982-2d60-e454-beadc8a61419.jpeg)

こんにちは。ワロタロです。

去年の続きです（爆）ほんとに一つ前の投稿が去年…


去年は自作のベクターお絵描きツールで「途中で滑らかに太さの変わる曲線の描画」をやるために試しに作ってみたものを紹介しました。

その後、何も発信してませんがツールの開発は続けていて、そこそこ使えるようになってきています。自分しか使いませんが。

![Image1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59191/7d6b325e-ad5c-75da-8c31-8053b91598df.jpeg)

[ライブデモ (GitHub pages)](https://warotarock.github.io/manual_tracing_tool/ManualTracingTool/)

[コード (GitHub)](https://github.com/warotarock/manual_tracing_tool)

※現状、実装途中のため色々と挙動がおかしいです。

今年の成果報告

・パレット機能を実装
・簡易アニメーション機能を実装
・消しゴムツールを実装
・ora形式での保存を実装
・「下のレイヤーでマスク」ができるようになった
・WebGLによる線の描画を実装した（おととい）

# WebGLだけでツールを作る必要はなかった

このツールを作っていて最近感じるのは、こういったツールを作るにはHTMLやCSSは非常に便利だということです。UIを作るのが本当にラクです。

WebGLでゲームを作っていたときは、ボタン類は全てWebGLで描画したり、当たり判定を取ったり、マウスオーバーでふわっと色を変えるのも全部コーディングしました。今思うとあれはすごい苦行でした。

CSSならマウスオーバーなんぞは２、３行でできてしまいますぜ。

そして、WebGLなら3D描画した結果を画像データとして簡単に再利用できます。また、HTLM要素として画面に組み込むことができます。

今作っているお絵描きツールでは、次のような要素で画面を構成しています。

![Image2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59191/f0bfdc51-9fd9-7342-89cb-206f67f80db9.jpeg)


この話の流れからいうとUIがもっとHTML要素を駆使して実現されてると良かったんですが、かなりCanavsで描画してますね…

言い訳すると、今年に入ってから仕事でAngularを使い始めて、UIはHTMLで作ればもっと楽できたなぁと気づいたんです。最初作った時はそういう発想が無かったんですね。

今ならボタン類はHTML要素にしてSVGアイコンにします。しようかな！時間あれば！

# 線のWebGL描画とcanvasによる合成

去年のアドベントカレンダーのネタだった線の太さの変わる線の描画をツール内で実装するとともに、バッファリングを実装したりもしました。

![Image3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59191/9bbeae24-75d1-03e3-0c08-10aaf12ed225.jpeg)

左がcanvasで2D描画したもので、右がWebGLで描画したうえ下のレイヤーの描画結果バッファでマスクしたものです。バッファもcanvasです。

WebGLで描画した結果はそのまま画像としてcanvasの2D描画で利用できるので、CanvasContext2DのglobalCompositeOperationに'source-atop'を設定してからdrawImageの第一引数にWebGLのcanvasを渡して描画すれば簡単にマスク処理ができます。

:relaxed:「おお、これはWebGLならではだなぁ～。OpenGLだけでもcanvasだけでもこれは簡単にはちょっとできないよニヤリ」:smirk:

と思いました。とにかく今回はこれが言いたかった。

ちなみに線のWebGL描画は遅延描画の形を取っています。ユーザが操作していないときバックグラウンドで少しずつ描画して、完成したら画面に表示する仕組みです。利点は、いくら時間がかかってもいいのでWebGLバッファの再構築などを効率的にできるように作らなくても許される（かもしれない）ことです。

# おわりに

WebGLを主眼においたサイトやツールでも、HTMLとCSSを使えばUI構築が非常に楽にできる場合があります。グラフィック系のアプリケーションなどで3D描画を使用するツールを作りたい場合にはWebGLとcanvasの組み合わせは非常に便利です。

WebGLはウェブ技術と組み合わせることで本領を発揮するというのが個人的な持論です。ウェブ技術はスマートフォンのアプリ開発でもどんどん利用が広がっていますし、端末のスペックも十分なものになってきています。将来的にはUIはHTMLで3DはWebGLなんていうゲームエンジンも出てくるかも？（もうあるかも）

自分はたとえばAngularのようなフレームワークを今作っているツールで使ってみようかな～などと思っているこの頃です。

うまくまとまらず申し訳ないですが、ともかく最後まで読んでいただいてありがとうございました。

皆さまよいお年を！
Rustスマートポインタ比較表

Rustではゼロコスト抽象と安全なポインタ操作のために、ポインタ相当の型を非常に細かく分類しています。慣れないうちは適切なポインタ型を選ぶのが難しいであろうことを鑑みて、主要なスマートポインタ型(と参照型)を比較する表を作ってみました。

| |効率|ライフタイム|共有|書き換え|スレッドセーフ|
|---|---|---|---|---|---|
| `&mut T` |★★★★★|短命|×|○|△|
| `&T` |★★★★★|短命|○|×|△|
| `&RefCell<T>` |★★★★☆|短命|○|○|×|
| `&Mutex<T>` |★★★☆☆|短命|○|○|△|
| `Box<T>` |★★★★☆|`'static`|×|○|○|
| `Rc<T>` |★★★☆☆|`'static`|○|×|×|
| `Rc<RefCell<T>>` |★★☆☆☆|`'static`|○|○|×|
| `Arc<T>` |★★☆☆☆|`'static`|○|×|○|
| `Arc<Mutex<T>>` |★☆☆☆☆|`'static`|○|○|○|

以下補足です。

## 効率

トレードオフを強調するために、**相対的な効率**を星の個数で表しています。しかし、**効率をことさら気にする必要はありません**。他の多くのプログラミング言語では、Rustでいうところの `Arc<Mutex<T>>` をデフォルトで使っているような状況です。要件にあったものを使うことが大事です。

## ライフタイム

「短命」とついているものは基本的に、ある関数のスコープに紐付いた形でしか使えません。特に**慣れないうちは、これらの型を構造体に入れて使うのはやめておいたほうが無難で**しょう。

例外として、グローバル変数 (`static`, `lazy_static!`) は `&'static` 参照として扱うことができます

## 共有

「ポインタ」と聞くと、参照先が共有されている様子を思い浮かべる人が多いと思いますが、所有権の概念のあるRustでは必ずしもそのイメージは当てはまりません。 **`&mut T` と `Box<T>` は共有のための仕組みとしては使えない**ことに留意するといいでしょう。

## 書き換え

Rustでは共有されたデータの書き換えは原則としてできません。これをオプトアウトするために `Mutex` や `RefCell` というコンテナを挟む必要があります。

## スレッドセーフ

**スレッドセーフかどうかはコンパイラが検査する**ので、あらかじめ注意しながら書く必要はありません。

"△" とついているものはスレッド安全ではありますが、短命であるため通常の方法で他のスレッドに送ることができません。rayonなどスコープドスレッドを使う処理では安全に使うことができます。

## Cell, Atomic, RwLock

表を簡単にするために以下の型は除きました。

- `Cell<T>` は `RefCell<T>` と似た特性を持ちます。ロック用の領域が省けるかわりに、限定的な操作しかできなくなります。 `T: Copy` であるときに便利です。
- `AtomicUsize` は `Mutex<usize>` と似た特性を持ちます。一般的に `Atomic*` は対応する `Mutex<*>` とよく似ています。より効率的ですがロックはできません。
- `RwLock<T>` は `Mutex<T>` と似た特性を持ちますが、読み取り専用ロックをとれるため読み取りが多い場合はより効率的に使うことができます。

## Option

表で挙げた型は全て**non-nullなポインタ型**です。ポインタ型を `Option` で囲めば nullable になります。

## 関数ポインタ

関数ポインタ型は `fn(i32, &str) -> bool` のような形で書きます。 `*const fn()` と書いてしまうと関数ポインタへのポインタになってしまうので注意が必要です。

ほとんどのユースケースでは関数ポインタではなくクロージャポインタである `Box<dyn Fn(i32, &str) -> bool>` のほうが適切です。

## 生ポインタ

`*const T`, `*mut T` はFFI用、 `NonNull<T>` はRust内でunsafeなコードを書くためのプリミティブとしてよく出てきます。これらを適切に扱うにはより高度な知識が必要なため本記事では省略します。

## `Box<T>` について

`Box<T>` はしばしば**Rustの所有権が役に立つ代表例**として挙げられますが、これはある意味誤解のもとです。確かに **`Box<T>` は優れていますが、これはこの型が多機能だからではなく、むしろ単機能だから優れている**と考えられます。

実際、 `T` を `Box<T>` に変更しても、以下のような影響しかありません(そしてこれらの特徴は他の多くのポインタ型にも共通して成り立ちます)。

1. サイズが一定 (1ワード～2ワード) になる。
2. 単純コピーである `Copy` は使えなくなる。 (`Clone` に置き換える必要がある)
3. `Pin` で包むことができるようになる。

3はより高度な使い方なので省略します。また2もデータ設計上重要ではないので基本的には1の**「サイズが一定になる」という恩恵のみが重要**ということになります。この1の恩恵が役に立つのは精々以下のようなケースくらいです。

- トレイトオブジェクト (`dyn Trait`) を包むため。
- 再帰的なデータを定義するため。
- 大きすぎる構造体のムーブコストが嵩む場合。

繰り返しになりますが、**しばしばポインタに期待される「同じ領域を複数の所有者が共有する」という機能を `Box<T>` は持っていません**。このことに注意して必要なスマートポインタを選ぶのが肝要です。
Python，Numpyで非線形座標変換をする時のBilinear補間関数



# 目的
画像処理における座標変換では，変換後の画像の(i,j)のindexに該当する元画像の座標を逆変換を用いて求めて，Bilinear等の手法で補間するのが一般的です。

CやC++等では仕方なしに2重ループを回していたのですがNumpyとPythonではforループは極力使いたくないと思っていた所，効率の良さそうなコードを[Githubのとあるページ](https://github.com/NitishMutha/equirectangular-toolbox/blob/master/nfov.py)で発見したので自分なりに変えてみました。

言うまでも無いことですが，Affineだったり射影変換の場合はそれ専用のOpenCVのライブラリを使ったほうが早いです。

# コードの流れ

## １. 変換により参照される元画像の座標も求める

変換前の(i,j)の座標indexを記録した配列を作ります。
arangeを用いて配列を作成し，tileやrepeatを用いて重ね合わせればあっという間にできますね。

以下の例では画像中心cx,cyから差し引いて，正規化した後に球面極座標に変換するために円周率をかけてたりしますが同じことです。

```python
xline = (np.arange(wid)-cx)*2*pi/wid
yline = -(np.arange(hei)-cy)*pi/hei
Xsline = np.tile(xline,hei)
Ysline = yline.repeat(wid,axis=0)
```


あとは，これらの配列に対して様々な非線形変換を当てはめればOKです。
正弦余弦や対数など簡単な関数ならnumpyに用意があるので配列にそのまま渡せば全て一様に処理してくれてfor文を書くよりも断然早いです。

## ２. 求めた座標を基に変換後の画像をBilinear補間で求める

先程求めた座標に対応するピクセル値を補間でもってきて最後に画像の形にReshapeしておしまいです。


以下のコードでは，ピクセルindexの最大値，最小値を超えた場合はループさせていますが，一般的には0などの値でうめる（Padding）するのが良いでしょう。


```Python
def _bilinear_interpolation_loop(frame, screen_coord):
    ''' Calculate 
    input: frame and its subpixel coordinate [x,y]
    '''
    frame_height,frame_width,frame_channel =frame.shape
    #uf = np.mod(screen_coord[0],1) * frame_width  # long - width
    #vf = np.mod(screen_coord[1],1) * frame_height  # lat - height

    x0 = np.floor(screen_coord[0]).astype(int)  # coord of pixel to bottom left
    y0 = np.floor(screen_coord[1]).astype(int)
    uf = screen_coord[0]  # long - width
    vf = screen_coord[1]  # lat - height
    x2 = np.add(x0, np.ones(uf.shape).astype(int))  # coords of pixel to top right
    y2 = np.add(y0, np.ones(vf.shape).astype(int))
    
    # Assume Loop 
    x2 = np.where(x2 > frame_width-1, 0, x2)
    y2 = np.where(y2 > frame_height-1, 0, y2)
    
    base_y0 = np.multiply(y0, frame_width)
    base_y2 = np.multiply(y2, frame_width)

    A_idx = np.add(base_y0, x0)
    B_idx = np.add(base_y2, x0)
    C_idx = np.add(base_y0, x2)
    D_idx = np.add(base_y2, x2)

    flat_img = np.reshape(frame, [-1, frame_channel])
    #print(flat_img.shape)
    A = np.take(flat_img, A_idx, axis=0)
    B = np.take(flat_img, B_idx, axis=0)
    C = np.take(flat_img, C_idx, axis=0)
    D = np.take(flat_img, D_idx, axis=0)
    
    wa = np.multiply(x2 - uf, y2 - vf)
    wb = np.multiply(x2 - uf, vf - y0)
    wc = np.multiply(uf - x0, y2 - vf)
    wd = np.multiply(uf - x0, vf - y0)
    #print(wa,wb,wc,wd)
    # interpolate
    AA = np.multiply(A.astype(np.float32), np.array([wa, wa, wa]).T)
    BB = np.multiply(B.astype(np.float32), np.array([wb, wb, wb]).T)
    CC = np.multiply(C.astype(np.float32), np.array([wc, wc, wc]).T)
    DD = np.multiply(D.astype(np.float32), np.array([wd, wd, wd]).T)
    out = np.reshape(np.round(AA + BB + CC + DD).astype(np.uint8), [frame_height, frame_width, 3])
    return out
```

# 実行例

以下のブログにて正距円筒図法の画像を元に全天球カメラを仮想的に回転させた際の画像を作成していました。

https://ossyaritoori.hatenablog.com/entry/2019/12/10/RICOH_THETA_SC%E3%81%A7%E5%A4%9A%E9%87%8D%E9%9C%B2%E5%85%89%E3%83%BB%E5%90%88%E6%88%90%E3%82%92%E3%81%97%E3%81%A6Pixel4%E3%81%BF%E3%81%9F%E3%81%84%E3%81%AB%E3%82%AF%E3%83%AA%E3%82%A2%E3%81%AA
LibreOfficeによるリフィルの作成〜3Dプリンタによるシステム手帳の自作続編2〜

#こんにちは
こんにちは。たいちゃんです。
寒さも増して来ましたね。
今回は前回に引き続き、LibreOfficeによるリフィルの作成に
ついて投稿してみたいと思います。

前回と前々回の投稿はこちらです。

[LibreOfficeによるシステム手帳のカレンダーの作成〜3Dプリンタによるシステム手帳の自作続編1〜
](https://qiita.com/toshita172/items/13feed7379408d113c35)

[3Dプリンタによるシステム手帳の自作](https://qiita.com/toshita172/items/d4cb43733ac9e06d40f1)

#前々回の課題
前々回の「3Dプリンタによるシステム手帳の自作」では今後の課題として

>・「Memo」等で使用している罫線はCalcを使用して、あえて「エクセル方眼」にして作った方が
微調整が効くかもしれません。

と記載しました。そこで、今回はCalcに「エクセル方眼」を用いて講演会の聴講などで使う方眼紙のリフィルを
作成してみました。

#作成方法としては・・・
![Screenshot from 2019-12-11 22-38-12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319826/750b8893-8cb6-b5eb-1bbf-1131e7d21715.png)
まず、Q列迄列幅を0.50cmで設定します。

![Screenshot from 2019-12-11 22-38-45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319826/552f99d9-e2f1-0006-fac5-b0b3d38b932b.png)
次に、25行迄行の高さを0.50cmに設定します。

![Screenshot from 2019-12-11 23-09-41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319826/85d45fac-1d65-1818-5157-9141c680d3f6.png)
ページスタイルで余白を設定します。見開き向かって右の用紙なら、左1.30cm、右0.70cm、上0.90cm、下0.90cm
で設定しました。見開き向かって左の用紙なら左と右の余白は逆になります。また、ヘッダーを利用して右上または
左上に日付を記入できる箇所をそれぞれ設けました。

##印刷したものです
![KIMG0422_retouch.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319826/f12e95fa-da34-bff4-78c9-1d6acd81d840.jpeg)
前回の通り、A4を4等分してA6にして印刷したものがこちらです。縦線は0.05ptの点線で、5本置きの横の
太線は0.25ptの実線です。それ以外の横線は0.05ptの実線で作成しました。

![KIMG0424_retouch.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319826/04fb292b-27f1-0866-dd0e-b3747dcba162.jpeg)
実際に印刷したものの横線の間隔を測ってみるとおよそ0.45cmとなっているようです。

![KIMG0426_retouch.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319826/277c7083-1fe2-dcd3-9bf6-0c2a9973f691.jpeg)
縦線の間隔もおよそ0.45cmとなっています。う〜ん。残念。

![KIMG0431_retouch.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319826/6eddfdad-75d6-5852-c70c-75141291f76e.jpeg)
メモようのリフィルは縦線を外した、横線だけの用紙となっております。

#まとめ
今回Calcを使用してエクセル方眼を用い方眼紙や横線のリフィルを作ってみました。残念ながら間隔は設定値
通りとはいきませんでしたが、割と目標通りのデザインをすることが出来ました。これからもちょっとずつ
『自作のシステム手帳』に手を加えていきたいです。
Visual Studio Codeの検索・置換・正規表現モード

*この記事は、*
*fintalk Advent Calendar 2019 - Adventar*
*https://adventar.org/calendars/4331*
*16日目の記事です*

---


- 検索モード
Ctrl＋F　キーを押すと、編集画面の上に検索バーが表示されます。
![2019-12-11_233510.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492622/8171011f-1640-65c8-bcfb-4f4d95dfdfa3.png)


- 置換モード
Ctrl+H　キーを押すか、検索モード表示中に左側の「＞」をクリックすると、置換モードになります。
![2019-12-11_233520.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492622/91f95f4a-54e0-8246-a32d-afd09456a326.png)

- 正規表現モード
赤い丸の部分をクリックすると正規表現モードがオンになります。
![2019-12-11_230813.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492622/0ceae4df-170f-5f26-222b-29d02edd4ba9.png)
![2019-12-11_230838.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492622/669f2b5d-049f-c6e6-6311-f68dc3a1b3ba.png)

検索結果（件数）の表示
1／3件　というのは、（○件目／該当○件中）
↑↓をクリックすると、前後の検索結果にスキップします。
![2019-12-11_232636.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492622/19ea7ecb-a5bb-8b38-44fa-497cd31bfc7b.png)
play-services-oss-licenses で表示する一覧画面と詳細画面の Toolbar のタイトルの色を白くする

アプリ内で使用している OSS の一覧と詳細を表示している Activity の Toolbar のタイトルの色を白くしたく、いろいろと試行錯誤しました。
いつの日かの自分の参考のための備忘録です。

実装の詳しい手順に関しては以下の記事が参考になりますので割愛させていただきます。
https://qiita.com/sho5nn/items/f63ebd7ccc0c86d98e4b

公式URL
https://developers.google.com/android/guides/opensource


#結論
そこまで難しいことは無いのですが、結論から先に言うと、
 DarkActionBar を parent に持つ style を定義してあげる
です。

以下コードです。
まずは OssLicensesActivity と OssLicensesMenuActivity に適用する style を作成します。

```xml
<style name="AppTheme.OssLicenses" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
</style>
```

そして上記の AppTheme.OssLicenses をそれぞれの Activity の Theme に適用してあげれば良いです。

```xml
<activity
        android:name="com.google.android.gms.oss.licenses.OssLicensesActivity"
        android:theme="@style/AppTheme.OssLicenses">
</activity>
<activity
       android:name="com.google.android.gms.oss.licenses.OssLicensesMenuActivity"
       android:theme="@style/AppTheme.OssLicenses" >
</activity>
```

これで Toolbar のタイトルの色は白くなっているはずです。

#最後に
Android のテーマは奥が深いのでもっと調べないとです。。
enebular editorのリモートモードではまった時の話

Enebular editorからリモートモードでタイムアウトになる場合、ファイアウォールの設定が悪さをしているケースが多かったというか、設定を忘れていたことが多かったです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266424/c3c2437e-70c6-7030-85f7-f9cfed72fd6d.png)

ここでは、ESET Endpoint Securityの場合の設定方法について書いておきます。

#手順
パーソナルファイアウォールで**ルールとゾーンの設定...**画面を開く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266424/7084bf3e-ca8b-f921-9f33-c3f4be12447d.png)

ルールとゾーンエディタにある**追加...**ボタンを押す。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266424/cb7679c7-b75c-d8af-2a3f-71a4a7786a5e.png)

enebular-editorのアプリケーションを登録する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266424/dcb9089f-fa52-bec2-75a6-364fbff3aacb.png)

- アクション:許可
- 方向:内向き
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266424/e7a15f02-0f81-aa74-0715-30e98d0c14b7.png)

- プロトコル:TCP
- ポート:ローカル
- ローカルポート:9017
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266424/60f9e7c7-6790-a40e-a2e8-e711f84b6d15.png)

- 宛先:ローカルネットワーク
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266424/6a91e10d-a706-9c34-6482-1b8a84e967da.png)

終了したら、接続しているネットワークのプロファイルとルールが一致していることを確認する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266424/7897431c-ce48-d6c9-ac9a-9161b983218d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266424/3755b7ea-e231-541c-cd0a-b3b20b4b0add.png)

enebular-editorを起動し、ESETのファイアウォールが起動中でもリモートモードでデバイスにアクセス出来るかどうかを確認する。

#おわりに

今回は、enebular editorとセキュリティソフトの設定について書きました。
もし同じ問題にぶち当たっている方の参考になればうれしいです。
Kerasでの中間層出力の取得について

# はじめに
Tensorflow2.0のKerasを用いてDeep Learningを試みており，中間層の出力が必要になりました．Kerasのドキュメントにしたがって中間層の出力を得ようとしたのですが，エラーが出てうまく行きませんでした．

調べてもいいやり方が出てこなかった(私の調べ方がまずかっただけ？)のですが，尤もらしいやり方でやったところうまくいったのでまとめることにしました．

- 環境
    - tensorflow-gpu==2.0.0-rc1


# Kerasでのモデル構築について

tf.keras.Modelを用いたモデル構築のやり方は[ドキュメント](https://www.tensorflow.org/api_docs/python/tf/keras/Model)によるとfunction APIを用いる方法とclassを用いる方法の2通りあります．

## function APIを用いる方法

```python
import tensorflow as tf

inputs = tf.keras.Input(shape=(3,))
x = tf.keras.layers.Dense(4, activation=tf.nn.relu)(inputs)
outputs = tf.keras.layers.Dense(5, activation=tf.nn.softmax)(x)
model = tf.keras.Model(inputs=inputs, outputs=outputs)
```

## classを用いる方法
```python
import tensorflow as tf

class MyModel(tf.keras.Model):

  def __init__(self):
    super(MyModel, self).__init__()
    self.dense1 = tf.keras.layers.Dense(4, activation=tf.nn.relu)
    self.dense2 = tf.keras.layers.Dense(5, activation=tf.nn.softmax)

  def call(self, inputs):
    x = self.dense1(inputs)
    return self.dense2(x)

model = MyModel()
```

# 中間層出力の取得
今回はclassを用いて記述していたのですが，[ドキュメントのFAQ](https://keras.io/ja/getting-started/faq/#_7)にはfunction APIの使用を前提とした説明のみがなされており，classを用いている場合には同じ方法ではうまくいきません．

## function APIを用いる場合
```python
from keras.models import Model

model = ...  # create the original model

layer_name = 'my_layer'
intermediate_layer_model = Model(inputs=model.input,
                                 outputs=model.get_layer(layer_name).output)
intermediate_output = intermediate_layer_model.predict(data)
```
function APIを用いてる場合には，このように中間層の値を出力するモデルを構築することで中間層出力を得ることができます．

## classを用いる場合

function APIを用いる場合は上記のやりかたでできるのですが，classを用いている場合にこのコードを実行すると

```python
AttributeError: Layer my_model is not connected, no input to return.
```
と怒られてしまいます．
classの方ではfunction APIと違ってinputやoutputを明示的に定めていないのが原因のようです．

そこで(考えてみれば当たり前なのですが)modelを定義したclassに中間層出力を出力するメソッドを追加します．

```python
import tensorflow as tf

class MyModel(tf.keras.Model):

  def __init__(self):
    super(MyModel, self).__init__()
    self.dense1 = tf.keras.layers.Dense(4, activation=tf.nn.relu)
    self.dense2 = tf.keras.layers.Dense(5, activation=tf.nn.softmax)

  def call(self, inputs):
    x = self.dense1(inputs)
    return self.dense2(x)

  def hidden_layer(self, input):
    return self.dense1(input)

model = MyModel()
```
このようにすることで

```python
model.hidden_layer(input)
```

などとすることで中間層の出力を得ることができます．

# 最後に
中身自体は全然大したことは書いてないのですが単純に自分が困ってしまったので記事としてまとめさせていただきました．
tensorflow2.0が登場してドキュメントのバージョンとかがちゃんと更新されていなかったりするのがわかりにくかった原因なのかな．．．