OmniAICreator/Qiita-1.07M huggingface dataset:
NodeでAPIを使わずにYouTubeLiveのチャットを取得する

本記事は[VTuber Tech #1 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/vtuber)の24日目の記事です。

# YouTubeLiveのチャットを取得するやつを作った話
そういうことです。YouTube､クリスマスカラーっぽいでしょ｡
非公式手法なので自己責任重点な。

## TL;DR
作ったので使って、どうぞ。
[youtube-chat](https://www.npmjs.com/package/youtube-chat)
[GitHub](https://github.com/LinaTsukusu/youtube-chat)

## 何故作ったのか
自分で配信するようのコメビュを作っていろいろやろうと思い、最初は普通にAPIで取得すればいいやと考えていた。が、ウカツ！
毎秒取得したら数分でAPI上限に達してしまうではないか！ブッダシット！

## 使用技術
- Node.js
- TypeScript

## 使い方
1. 普通にインストールする

    ```bash
    npm i youtube-chat
    ```

2. require(import)する

    ```typescript
    import {LiveChat} from 'youtube-chat'
    ```

3. チャンネルIDか､ライブIDを入力してインスタンス化

    ```typescript
    // If channelId is specified, liveId in the current stream is automatically acquired.
    const liveChat = new LiveChat({channelId: 'UCxkOLgdNumvVIQqn5ps_bJA?'})
    
    // Or specify LiveID in Stream manually.
    const liveChat = new LiveChat({liveId: 'bc5DoKBZRIo'})
    ```

4. イベント登録

    ```typescript
    // Emit at start of observation chat.
    liveChat.on('start', (liveId: string) => {})
    // Emit at end of observation chat.
    liveChat.on('end', (reason: string) => {})
    // Emit at receive chat.
    liveChat.on('comment', (comment: CommentItem) => {})
    // Emit when an error occurs
    liveChat.on('error', (err: Error) => {})
    ```

### イベントをもうちょいkwsk

#### start
- チャット読み取り開始時に呼び出し
- 引数
    - liveId: string
        - 読み取り開始したライブのID

#### end
- 読み取り終了時に呼び出し
- 引数
    - reason: string
        - 終了した理由の文字列

#### comment
- チャットがされた時に呼び出し
- 引数
    - comment: CommentItem
        - チャットのデータ

#### error
- エラー時に呼び出し
- 引数
    - err: Error
        - エラーオブジェクト

### コメントデータの型

```typescript
interface CommentItem {
  id: string
  author: {
    name: string
    thumbnail?: ImageItem
    channelId: string
    badge?: {
      thumbnail: ImageItem
      label: string
    }
  }
  message: MessageItem[]
  superchat?: {
    amount: string
    color: number
  }
  membership: boolean
  isOwner: boolean
  timestamp: number
}
```
※詳しくはReadMe重点な

### 使用例
- [エアスパチャ](https://github.com/LinaTsukusu/air-superchat-prototype)
    - チャットからコマンドを解析してアラートを鳴らす
- 上記を始めとした簡単なチャット内コマンドの実装等

## どうやってるのか
おまけとしてどうやってるか書こうと思う

### コメント取得
- チャットをポップアウトしたURLに`&pbj=1`を足してチャットのjsonを取得
- `addChatItemAction`のitemを`CommentItem`型にパース
- コメント1つごとに`comment`イベントを発火
    - 以上を`interval`の値(1000ms)ごとに繰り返す

### チャンネルIDからライブ配信のURL特定
- `https://www.youtube.com/channel/(チャンネルID)/live`をGET
- metaタグにあるサムネイル画像のURLからライブIDを特定

## 課題
- ~~パーサーしか自動テストされてない~~お酒飲みながら書いてたので無かったことになってた
    - CIとかやってない
- コメント投稿や､アーカイブのチャットを取得等の機能
    - やる気次第

## 最後に
- 初めてのプルリクに小躍りした
- 感謝された
    - 一部の人には刺さるものを作れた気がして嬉しい
- こいつを使って今度は自作コメビュを作る予定
    - MultiCommentViewerさんを超えたい

### スペシャルサンクス
- [taizan-hokuto=サン](https://github.com/taizan-hokuto)
UiPathにおける安定的なワークフロー開発ノウハウと概念理解のために

この記事は [UiPath (ja) Advent Calendar 2019](https://qiita.com/advent-calendar/2019/uipath_ja) 24日目の記事です。

## はじめに

SIerにて、RPA導入を検討している企業、導入済みの企業向けにRPA導入コンサルティングや内製化支援コンサルティングを実施しています。振返ると2017年7月にUiPathの受託開発案件のPMをやったのがRPAとの出会いでした。

2017年頃はお客様からのニーズも外注希望が多かったのですが、徐々に内製化の波が訪れて、テクニカルサポートやセミナー講師という内製化支援周りを依頼されることが増えてきています。

ブームに乗ってRPAを導入したは良いがRPAも幻滅期に入り、活用しきれない、安定稼働せずツール乗り換えや仕切り直しを余儀なくされる、局所導入で終わってしまう企業も増えてくるかと思います。

この局面を打開するために、いろんな切り口での議論があるかと思いますが、本記事では「開発」に着目していきます。

## 安定的に自動化プロセスを稼働させるためには開発ノウハウが必要

以前は「RPAは簡単で誰でも業務を自動化効率化できる」という風潮もありましたが、安定的に自動化プロセスを稼働させるためには、エラーハンドリングやリトライ処理なども含めたワークフロー構築のノウハウや知識を身に着ける必要があると思っています。

そしてこれらのノウハウや知識は、操作方法を覚えたところで使いこなせるわけではなく、なぜ必要なのか、使うことでどう変わるのかといった概念を学ぶことが重要と考えています。難しいと思われるかもしれませんが、これらはパターンであり、概念を理解したうえで演習を通じてパターンを把握することで自然と使い方が身につきます。

前置きが長くなりましたが、**安定的に自動化プロセスを稼働させるための開発ノウハウと概念の理解を目的とした書籍**を執筆中です。
エンジニアでない方にもご理解いただけるように難しい用語は極力使わず説明しています。

順調にいけば、2020年4月~5月には書店に並ぶと思います！
安定稼働に悩む皆様の助けになれば嬉しい限りです。

## 対象読者

* これからUiPathでワークフロー構築を始める方
* 既にUiPathを触っている方で、ワークフローの安定性を向上させたい方
* UiPathの開発ノウハウや概念を理解したい方

## 目次（仮）

* Part 1. RPAについて学ぼう
    * Chapter 1. RPAを始めよう
* Part 2. UiPathの基礎を学ぼう
    * Chapter 2. UiPathを始めよう
    * Chapter 3. UiPathに必要なプログラミング知識を学ぼう
    * Chapter 4. UiPathで基本的なワークフローの作り方を学ぼう
    * Chapter 5. アクティビティについて学ぼう
* Part 3. UiPathの画面操作自動化を理解しよう
    * Chapter 6. 画面操作に関する主要なアクティビティを理解しよう
    * Chapter 7. レコーディングを理解しよう
    * Chapter 8. データスクレイピングを理解しよう
    * Chapter 9. セレクターを理解しよう
* Part 4. UiPathのExcel操作自動化を理解しよう
    * Chapter 10. Excel操作系のアクティビティを理解しよう
    * Chapter 11. ExcelとDataTableを理解しよう
    * Chapter 12. Excelマクロの活用方法を理解しよう
* Part 5. UiPathをさらに使いこなそう
    * Chapter 13. 外部設定ファイルを活用しよう
    * Chapter 14. セレクターをチューニングしよう
    * Chapter 15. アクティビティのプロパティをチューニングしよう
    * Chapter 16. 待機アクティビティをできる限り減らそう
    * Chapter 17. 機能毎にxamlファイルを分割しよう
    * Chapter 18. エラー制御を使いこなそう
    * Chapter 19. リトライ処理を使いこなそう 
    * Chapter 20. VB.NET関数を使いこなそう
* Part 6. ワークフロー開発の標準化を進めていこう
    * Chapter 21. ライブラリを使って共通部品化を進めよう
    * Chapter 22. プロジェクトテンプレートを作ってみよう
【REACT】Props vs State

# 概要

Componentは、状態値を利用してUIを表現します。
Componentの状態は、ObjectのInstanceを利用して管理します。
Component間の一方向にデータを送受信する**props**、
Componentの内部で使用される**state**です

![sdfadfcd.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421654/d5ff3112-2783-82c9-670e-cf5543ede588.jpeg)

# props

Componentで使用するデータの変更されないデータを扱う際に使用します。
親Componentで子Componentにデータを転送するときに使います。
propsは、変更が不可能です。

```react
class Main extends Component {
  render() {
    return (
      <div>
        hello! I'am <b>{this.props.name}</b> .
      </div>
    );
  }
}

export default Main;
```

```react
import Main from './Main';

class Sub extends Component {
  render() {
    return (
      <Main name="Tanaka" />
    );
  }
}

export default Sub;
```

# state

Componentで管理する状態値に流動的なデータを扱うときは、stateを使用します。
stateは、変更が可能で、変更すると時には`setState`メソッドを使用して状態を変更します。
setStateは非同期で動作し動作完了のCallbackを設定することができます。

```react
class Number extends Component {
  state = {
    number: 0
  }

  increase = () => {
    this.setState({
      number: this.state.number + 1
    });
  }

  decrease = () => {
    this.setState({
      number: this.state.number - 1
    });
  }

  render() {
    return (
      <div>
        <div>number : {this.state.number}</div>
        <button onClick={this.increase}>+</button>
        <button onClick={this.decrease }>-</button>
      </div>
    );
  }
}

export default Number;
```
sonosをMQTTで扱えるようにする

#sonosとは
なんかめっちゃいいスピーカーである
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243994/0043a842-ac4a-34bc-a8e4-07d8b3fd13bf.png)

複数台置いて部屋の環境に合わせて音量を調整してくれたり、
Alexaとかgoogleアシスタントが入っていたりする最高なやつなのである。そして色々APIとかが出ててHackもできちゃう。
IoTしやすくするためにMQTTで扱えるようにしちゃいます。

#サーバーを立てる
本来ならばdockerとかAWSとか使うのが正しいのですが、面倒なのでローカルに立ててしまいます。

```
$brew install mosquitto
```
でmosquittoというmqttプロトコルを扱うための環境をインストールします

```
sudo nano ~./bash_profile
```

でbash_profileを開き、以下の記述を追加してパスを通します

```
export PATH=$PATH:/usr/local/opt/mosquitto/sbin
```

bash_profileの再読み込みをし

```
source ~/.bash_profile
```

```
$mosquitto
1577197240: mosquitto version 1.6.4 starting
1577197240: Using default config.
1577197240: Opening ipv6 listen socket on port 1883.
1577197240: Opening ipv4 listen socket on port 1883.
```

サーバーが立ちました！

#sonosとmqttサーバーをつなげる
sonos2mqtt
https://github.com/svrooij/sonos2mqtt
これを使います

インストールしてサーバーを指定して起動するだけです。

```
$sudo npm install -g sonos2mqtt
$sonos2mqtt --mqtt mqtt:/127.0.0.1:1883
$sonos2mqtt
```
繋がりました！！
<img width="474" alt="スクリーンショット 2019-12-24 23.34.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243994/4d508ded-71f3-23be-0e96-75b6b9405eea.png">


#subscribeしてみる
sonos/status/{部屋の名前}/{購読したいtopic}
をsubscribeしちゃえば色々取得できるみたいです。

/title
/artist
/album
/albumart
/trackUri
/volume
/muted
/volume
/muted
/state

が取得できます

```
$mosquito_sub -h 127.0.0.1 -t sonos/status/Bedroom/title
{"ts":1577200749792,"name":"Bedroom","val":"雪が降る町 -UC30 若返る勤労 Remastered-"}
{"ts":1577200751754,"name":"Bedroom","val":"星降る夜のクリスマス"}
```

subscribeできました！！

#曲の時刻がほしい・・・・

https://github.com/svrooij/sonos2mqtt/blob/master/src/bridge.js
の中の

```
function publishCurrentTrack (device, track) 
```

という関数を見てみると、trackのデータ取得してるからとれんじゃねと思い

```
publishData(`${config.name}/status/${cleanName(device.Name)}/duration`, track.Duration, device.Name)
```
を追加してみた

とれた！！！
<img width="380" alt="スクリーンショット 2019-12-25 0.40.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243994/42483868-4b2b-a4dd-3482-ee38184fa3f7.png">


#まとめ
mqttサーバーを通すとデバイス通すのが楽なのでこの方式をたてました。
ESPでこれらのトピックをサブスクしたりして色々できるぞ〜！
Houdiniで同心円を作る

Twitterで見て、Houdiniなら色々な方法で作れるんじゃないか？って思ったので色々な方法で作ってみます。
パッと思いついたのを上げてるのでこれ以外にもこんなのあるよ！とか出来ねぇよカス！！とかあったら遠慮なくいってください。

#1,copy and transform
![Desktop Screenshot 2019.12.25 - 00.17.15.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545265/e6fdd478-2ce2-c041-8838-73c90ab0c8df.png)
Copyandtransformを使う方法です。
最初に思いつきそう。
#2,For Loop
![Desktop Screenshot 2019.12.25 - 00.21.34.69.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545265/e0edf92b-46b6-8bf8-5742-9dbe5e0d9f15.png)
for loopを使う方法です。
copyandtransformを分解した感じかな？
copyandtransformを改良したいときとか使えそう。
#3,copy to point
![Desktop Screenshot 2019.12.25 - 00.25.00.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545265/4fc03d68-8480-982f-72cd-124e92eac40e.png)
Copy to pointを使う方法です。
addで出したポイントをcopyandtransformで増やして作ります。
wrangleで使っているfitって関数は例えば-10~50の値のアトリビュートを0~1にする時とかに使います。(この場合はfit(@attrib,-10,50,0,1))
結構便利。
#4,copy stamp
![Desktop Screenshot 2019.12.25 - 00.29.19.87.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545265/173bdf00-fc43-e253-6e41-2d2edbae7410.png)
さっきのcopytopointをさらに変えたの。
正直こんな事する必要は無いけど応用は結構効く。
#5,応用
![Desktop Screenshot 2019.12.25 - 00.35.16.93.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545265/755bc3d1-cbec-e4a3-0647-6d0c8d31eb81.png)
addで出したポイントに向かっていく。
これは普通に使えそう。

最後に今回のシーンです。
https://firestorage.jp/download/8c549c1374a9b309310307ced99c97d9b896a6ab
パスワードはVEXを書くノードの名前(全て小文字)
コンピュータウイルスは人工生命なのか

# イントロ
XFLAGモンスト事業本部ゲーム運営部解析グループの向井です。
データ解析のお仕事をしています。


弊社のプレスリリースで下記のものがありました。

人工生命×アンドロイド「オルタ３」 4社共同研究プロジェクト始動 人間とアンドロイドによる新たなコミュニケーションの未来を示唆
https://mixi.co.jp/press/2019/0228/3783/index.html

私はこのプロジェクトには一切関わっていなかったのですが、名前の上がっている方々の著書を拝読し、人工生命というものが普段業務で関わりのある人工知能と関連の強い分野だと知りました。

特に感銘をうけたのは、セルオートマトンです。ゲームオブライフの動きを見ると、そこに生命を感じぜずにはいられませんでした。

この世の知性をもった生物がかつては単細胞を経て進化してきたのだとすると、適切な環境を与えられてサバイブしていく中で知性というものが生まれてくる可能性もあるのではとワクワクします。

そんな中ふと気になったのは、コンピュータウイルスです。これは、名前からして、人工生命のような感じがすごくします。コンピュータウイルスは人工生命なのでしょうか。


# 先行研究

Computer viruses as artificial life(EH Spafford, 1994)において、自然界の生命の特性について9つあげ、それぞれについてコンピュータウイルスに対して当てはまるのか思考していました。

なおコンピュータウイルスには、ワームやトロイの木馬は含まれていないとして論文中に言及があり、また原文の英語をかいつまんで訳しています。

--以下訳

1. 生命は特定の物質のことではなく時空間におけるパターンである。
    * コンピュータウイルスはコードパターンとして表現されるので近い。
    * ただしこの時空間が電脳空間を含むのかは議論の余地がある。
    * メモリ上における電磁気の組み合わせでしかない。
2. 自己複製。自分自身または似た生物の。
    * これに関しては問題なく当てはまるだろう。
3. 自己表現の情報保管庫。
    * コンピュータウイルスのコードが、自然界の生命のおけるDNAに近く、当てはまる。
4. 物質またはエネルギーを変換する新陳代謝。
    * コンピュータの電気を使用して動いている。
    * しかし、コンピュータウイルスが動いていようがいまいがエネルギー消費は同じ。
    * というかほとんどのシステムにおいて、プログラムが動いていようがいまいがエネルギー消費は同じ。
    * つまり実際問題コンピュータウイルスはこの項目には当てはまらない。
5. 環境との機能的関わり合い。
    * 宿った環境の情報を見て、検知されないよう自らを隠したり、他の環境へ繁殖したりする。
6. パーツの相互依存。
    * 生物の各器官を適当に分離したら、壊れてしまう。
    * コンピュータウイルスも同様だ。
    * しかし、コンピュータウイルスはそこから再構築すると元通り動く。生命はそうはいかない。
    * だからコンピュータウイルスは単純な機械や化学反応に近いのではないか。
7. 環境変化への対応。
    * コンピュータウイルスは、ほとんどどの商業ソフトウェアより、環境に幅広く適応できるだろう。
8. 進化能力。
    * 進化とは、機能または特性の変化のこと。
    * ポリモーフィック型ウイルスでさえ、最終的な機能としては変化せず、当てはまらないだろう。
9. 成長または拡大。
    * 時間を経つにつれて数が増えていくという点で当てはまるだろう。

結論:コンピュータウイルスは人工生命ではない。また人工生命として作り変えるには、むしろ生命のほうの定義を変えるしかないのではないか。

--以上訳

# 考察

この論文は明示的に、何番と何番が当てはまってないからコンピュータウイルスは人工生命ではない、と言ってくれていないので、推測するしかありません。
微妙な言い回しが含まれていますが、強く述べている点として、4・6・8あたりなのでしょう。
つまり、
4. コンピュータウイルスは正味エネルギーを消費していない
6. パーツを分解後、再組み立てしても動く
8. 機能的進化がない

ここで反論を考えてみます。
・ 4については、何のことを言っているのかよくわかりません。ノートパソコンで重いゲームをしようとすると熱エネルギーが発生することからして、ソフトウェアの挙動によってコンピュータとしてのエネルギー状況に変化が生じるからです。
・ 6については、程度の問題でしょう。生物についても、場合によっては一度身体を離れた部分を適切に処置して戻せば機能します。それをもってして相互依存が成り立っていないとするのは変かと思います。
・ 8については、それまで観察されたコンピュータウイルスがそうだったかもしれないだけで、コンピュータ・サイエンスの理論上実現不可能という話とは別かと思います。

こちらからは以上です。
自分のこれからの目標

# はじめに
自分は4月よりWebエンジニアになるための勉強を始めましたが、最初は大学生のうちにフリーランスになってお金にも困らず、さらに社会に出る前に社会で役立つ実務経験を積みたいと考えていました。
しかし、最近になって少し考えが変わりました。自分は、ヨーロッパで働きたいという思いが昔からありましたが、英語が苦手かつヨーロッパは就職難で実力がないと職を見つけるのは難しいので、今まで諦めていた節がありました。
ですが、最近調べたところによれば、Wenエンジニアはヨーロッパの国々で不足重要職種に指定されているところが多く、ビザを取りやすいことがわかりました。
ということで、せっかく今世界規模でIT人材不足で、エンジニアはビザが取りやすいので、昔からの夢であったヨーロッパで就職かつ永住権獲得をこれから目指そうと思います。

#プラン

**大学在学中**
・HTML,CSS、JS、REACTを学習して自分が想像したものを作れるぐらいの技術を身につける
・IELTSで6.5を目指す

**日本で実務経験を２〜３年積む**
・フロントエンジニアとしての実務経験。さらにReactの経験も積む。

**アイルランドまたはドイツを拠点としてアイルランド・イギリス・ドイツで転職活動を行う**

この流れで行きたいと思います。
KaggleのKernelOnlyコンペのすゝめ

# はじめに

当初書く予定だったネタが、まだあまり深く理解できていないのと、
自分の経験のなさから、ちょっと書くにはデカすぎる内容なのかなと思い、
こちらを書くことになりました。

# Kernelオンリーコンペとは？

本来Kaggleではsubmissionはcsvにして提出すれば良いのですが、
最近のKaggleではほとんどがKernelオンリーコンペとなっています。

Kernelオンリーコンペとは、submission.csvの代わりにプログラムを提出する
コンペティションとなっております。

## どうやって提出するの？

基本的な流れは以下の通りです。

![Kernel](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145843/45e5d4a8-c94e-8092-87c2-61cb6615415c.png)

コンペページから、submit predictionをクリック後、
このような画面が出てくるので、New notebookで
Kaggle専用のJupyterNotebookが出現します。

そのJupyterNotebook上で何らかの処理をさせたあと、
submission.csvを出力する動作を書けばOKです。

# Kernelコンペで大事なこと

Kernelコンペでは基本的に、個別データセットOKのコンペがほとんどです。
データセットを持ち込めるということは、
実は**学習済みモデルの重みやPickleデータ**をも持ってこれるということです。

つまり、Kernelコンペでは、事前に学習したモデルを持ってきて
推論だけ提出するといったことも可能です。
もちろん、No Internet Accessでも使用することができます。

# Datasetについて

こうした、Kernelオンリーコンペに使われる追加データに関しては、
Dataset項目として扱われ、OpenでもCloseでも持つことができます。
Closeの場合、全体で20GB以内であればCloseデータも持つことができます。

## Datasetのアップロード

ローカルのMacからデータセットをあげるのは、WebUI上のドラッグ&ドロップでいいのですが、
容量も逼迫しますし、GCPやオンプレサーバから直でアップロードしたいですよね。

そういう時の方法は二つあって、KaggleAPIかGCSを使用するの二通りになります。

### Kaggle API

Kaggle APIを使えばリモートサーバから直接データをKaggleサーバの方に転送することが出来ます。
しかし、KaggleAPIでは現在PrivateDatasetでの利用は出来ないので、
PublicなDatasetでいいなら、KaggleAPIを利用しましょう。
容量とかも気にしなくていいですし、Openになったところでどうせ見ないでしょ。という感じもします。

### GCSを利用する方法

とはいえ、コンペティションなので、OpenDatasetだと誰かに学習済みモデルを取られてしまうかも。
なので、Privateなデータセットをローカルに落とさずに行う方法をここに記載します。
その方法がGCSを利用する方法です。

GCSはGoogleCloudStrageのことで、AWSで言う所のS3バケットに相当します。
リモートサーバにGoogleCloudSDKをインストールして、
`gcloud init`して認証情報を追加しておきましょう。

その後、`gsutil`コマンドを使って、学習モデルデータをバケットに送信します。

そして、学習モデルデータをバケットに入れたら、当該ファイルだけ、
Authなしで見られる状態に権限追加をします。

その後、Notebookに戻って、Dataset→一番上に出てる自分のデータセットを使うを選択
そして、リンクからDownloadするで、GCSリンクを指定してあげれば
読み込ませることが出来ます。

これでローカルを介さずにKaggle上にPrivateDatasetを登録することができます。
（かなりややこしいですが...)

# Kernelオンリーコンペの時間は、学習時間ではなく、予測制限時間

自分も勘違いしていたのですが、CPU<=6hourとか表記されてるコンペは
6時間以内に学習を終わらせるコンペだと思っていましたが、
本当は推論を6時間以内に終わらせるという意味です。
(でもKaggleやってたら、1subに正味そんな長いこと待ってられないので、
大抵そこまで使わずとも高速で推論してしまって終わりということが多いような気もします)



# おわりに

急に忙しくなってちょっと残念な記事になってしまって申し訳ないです。
時間があったらもっとリッチで画像とか入れた記事にしたいと思います。
メリークリスマス！
ボロノイ図の面積の求め方

#はじめに
　ボロノイ図の面積を求めたかったのですが、面積まで求めている記事が見つからず苦労したのでメモ程度に書き残したいと思います。
# コード
　早速コードを載せます。

```python

def voronoi_area(points):
    v = Voronoi(points)
    vol = np.zeros(v.npoints)
    for i, reg_num in enumerate(v.point_region):
        indices = v.regions[reg_num]
        if -1 in indices: 
            vol[i] = np.inf
        else:
            vol[i] = ConvexHull(v.vertices[indices]).volume
    return vol

sample_points = [[-2, 6], [ 3, -8], [ 5, 9], [ 4, 5], [-7, 2], [ 3, 4]]
voronoi_area(sample_points)
# >>> [inf, inf, inf, 205.92126984, inf, 52.62380952]
```
　ボロノイ図の面積ではどうしても無限大になってしまう部分があるので、そこはnp.infと出力するようにしています。無限大になってしまうのを防ぎたい場合はミラーリングをすると良いと思います。スポーツ選手のボロノイ図の面積を求める時などに必要だと思うので以下に載せます。

```python

def voronoi_volumes(points, x_max, y_max):
    points_len = np.shape(points)[0]
    points1 = points.copy()
    points1[:,1] = - points[:,1]
    points2 = points.copy()
    points2[:,1] = 2 * y_max - points[:,1]
    points3 = points.copy()
    points3[:,0] = - points[:,0]
    points4 = points.copy()
    points4[:,0] = 2 * x_max - points[:,0]
    points = np.concatenate((points, points1, points2, points3, points4), axis=0)
    v = Voronoi(points)
    vol = np.zeros(v.npoints)
    for i, reg_num in enumerate(v.point_region):
        indices = v.regions[reg_num]
        vol[i] = ConvexHull(v.vertices[indices]).volume
    return vol[:points_len]
```

x_maxにはX軸の最大値を、y_maxにはY軸の最大値を入れます。


# 終わりに
　スポーツの分析などをする際にボロノイ図は多用すると思うので、ぜひ使っていただければと思います。
非機能テストとは？

今週、会社でテスト設計勉強会があるので、
以前、勉強したことを投稿します。

# 非機能テスト?

非機能テストは、
ソフトウェアアプリケーションの非機能面（性能、使いやすさ、信頼性など）を
検査するテストの種類です。

簡単に言うと、
機能ではない部分、品質特性をテストすることです。

例えば、
非機能テストの例は、
同時に多くの人がソフトウェアにログインできることを確認することです。

# 非機能テストの目的

- 製品の有用性、効率性、保守性、携帯性の増加
- 製品の非機能面に関する生産のリスクとコストを削減
- 製品のインストール、設定、パフォーマンス、管理、および監視方法を最適化
- 使用中の製品の動作や技術の知識を向上させる

# 非機能テストのパラメタ
![images.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421654/de8183cd-ad3b-f70f-364f-a2e8063ce75e.png)

いくつのパラメタ中で、
一番重要なパラメタは、Security, Reliability, Efficiencyです。
Dvorak配列でVimを使いこなすために考えたこと

# はじめに

この記事は [Vim2 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/vim2) 25日目の記事です
昨日の記事は，@shuhoyoさんの[PowerShellのVim環境にAirlineを導入する](https://qiita.com/shuhoyo/items/2368d193de3b1f955e69) でした

僕もWindowsでVim使ってるのでとても参考になりました

# Dvorak 配列について
まずはこの名前を聞いたことが無い人に向けて説明します
Dvorakは，キー配列の一種で，恐らく多くの人が普段使っているQWERTY とは全く異なる配列になります
キー配列というと，JIS / US 配列の違いはもう少し知られていると思いますが，この2つはキーのレイアウト自体が異なる( JIS は Enter キーが大きかったり，変換・無変換キーがあったりする話です) のに対して，DvorakはUS 配列と同じ形状で，各キーに割り当てられた文字が異なります 


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170422/20a463c2-8e6b-f6fd-8b2a-40ff097735fe.png)

これが，Dvorakのキー配列です (画像は[Wikipedia](https://ja.wikipedia.org/wiki/Dvorak%E9%85%8D%E5%88%97)より)

Dvorak配列を使う利点や，Dvorak配列に変える方法については，この記事では述べません (本題から逸れるので)

自分は，Dvorak配列に乗り換えて約半年，Vimの経験は，3年ほど前に一時期使っていましたが最近は他のエディタに浮気していて，2ヶ月ほど前から再びVimを使うようになりました

# Dvorak配列を使うにあたっての問題点
Vimの話を一旦置いて，Dvorak配列を使う場合初めに考えなければならない問題は，`Ctrl+S` などの修飾キーを用いたショートカットをどうするかです
Windowsなら， `Ctrl`，`Win`，`Alt`，
Maxなら， `Cmd`， `Option`，`Ctrl` あたりと組み合わせる場合を考える必要があります

この問題に対して，大きく2種類の考え方があると思っています

- 修飾キーを使う場合のみ，従来のQWERTY配列にする
- 修飾キーも，Dvorakで使用する

何故修飾キーを使う場合だけQWERTYにするのかというと，修飾キーを用いたショートカットは，「キーの位置で割当てられている場合があるから」です
例えば，次のショートカットは，(Vim以外の)多くのソフトウェアで頻繁に使用するはずです
`Ctrl/Cmd +` `A` `S` `Z` `X` `C` `V`

これらはQWERTYなら左手の押しやすい位置にありますが，Dvorakに変えると，バラバラになり，特にXやVは少し押しづらいと思います
こういった既存のショートカットとの相性を考慮して，修飾キーを用いる場合だけ，QWERTYに変えるという選択肢がありますが，私はDvorakのまま使用しています

# VimでDvorakを使うにはどうすればいいか

さて，ここから本題です
VimでDvorak配列を使うにはどうすればいいかを考えていきます

ここから先，基本的に自分の思考に沿って書いていくので，実際にそれが最適の方法かは人によって異なります

実際にDvorakを使ったことがない人でも，Vimを使った経験がある人は「カーソル移動どうするの？」という疑問が真っ先に出ると思います

## とりあえずカーソル移動はいつもの場所にしてみる
流石に`hjkl` をDvorakの場所で使うのは無理があります，そこでこの4つはとりあえずQWERTYの場所に変えてみます

```:.vimrc
nnoremap d h
nnoremap h j
nnoremap t k
nnoremap n l

vnoremap d h
vnoremap h j
vnoremap t k
vnoremap n l
```

これでいつものカーソル移動はできるようになりますが，`d` `t` `n` が使用できなくなります
Dvorak用に変えたことで使えなくなったキーに該当するコマンドが，自分にとって必要かどうか考えていきます

自分が使わないコマンドなら，使えなくなったコマンドは使えないままでも問題ないでしょう
しかし，普段から使うコマンドなら，**代わりにどこに移動させるか**， もしくは**代用となるコマンド**を探す必要があります

### `d` 使う
指定行の削除に使います．自分はガンガン使ってるのでこれを消すのは無理です

まずは，QWERTYで`d`のあった位置を見てみます．
その位置には`e`があり，単語の終端に移動するコマンドですが，自分は`w`と`b`で十分に操作できていたので`e`を上書きします
(とはいえ，この記事を書くにあたって`e`を使ってみたので，もしかしたら今後見直すかもしれません)

```:.vimrc
nnoremap e d
nnoremap ee dd

vnoremap e d
vnoremap ee dd
```

### `t` 今は使わない？
同一行内の後方検索です
自分の場合，`/` や， `incsearch-fuzzy.vim` というプラグインを使用しているのでこれは不要に感じました．
よってtはmapせずにそのまま消し去ります

### `n` 使う
`/` などで検索した後に，ハイライトされてる単語間での移動に使います．多分`next` の意味なんですかね

これも結構使うので移動先を考えます
QWERTYにおける`n`の位置には，Dvorakでは`b`があり，これは割と使っていたので`b`への移動は断念します

Dvorakでの`n`の近くで，あまり使っていないキーは，自分の場合`r`が該当しました．そのため，ここを`n`と入れ替えてみます

```:.vimrc
nnoremap r n
nnoremap R N

vnoremap r n
vnoremap R N
```

## Dvorakに変えても割とどうにでもなる
というわけで，カーソル移動を起点として，いくつかキーのmapを書き換えてみましたが，意外と問題なく設定できました．
自分が使いこなせていないコマンドがあるからかもしれませんが...

また，今回Dvorakを前提に話しましたが，Colemak など，他のキー配列を使用する場合にも，この考え方は応用できると思います．
まず，絶対に位置も変えたくないキーを起点にして，入れ替えた先のキーを使用するか，するなら更に他にキーと位置を変えるにはどうすればいいか... といった流れで考えていくと，自分なりのキーマップが作れると思います

それでは，良いVimライフを！
Windows10上のSpacemacsでUnicode Emojiを使う

[Spacemacs公式のdevelopブランチのEmoji Layer](https://github.com/syl20bnr/spacemacs/tree/develop/layers/+fun/emoji)が用意されていて、Unicode絵文字 (いわゆる :tada: とか :innocent: とか :sushi: とか)を表示できる。

# Spacemacsの設定

```emacs-lisp:.spacemacs(抜粋)

(defun dotspacemacs/layers ()
  (setq-default
   '(sql
     markdown
     ;; ↑みたいに追加する
     emoji
    )
  )
)

(defun dotspacemacs/user-init ()
  ;; 絵文字フォント
  (set-fontset-font t 'unicode "Segoe UI Emoji" nil 'prepend)
)

```

MacはEmojiをインストールするだけで表示されたが、Windowsの場合は絵文字を表示するためのフォントも指定する必要があった気がする。


# Unicode絵文字のカラー表示
Emojiインストールとフォント指定だけだと、実はカラー表示されない。
(しかもWindowsの日本語インライン変換でUnicode絵文字を変換できないのでさらにつらい :innocent:)

![emojify1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201962/db9568cf-3fca-fa83-5a1e-34bf7887d3f9.png)

そこで `emojify-mode`を適用する。
参考 http://emacs.rubikitch.com/emojify/

evil-stateのSpacemacsで `Space Space` (いわゆるEmacsの `Meta + x`)して、 `emojify-mode`を探してEnterを押すと適用される。

![emojify2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201962/74df93ca-0d94-a464-dace-7f79c3de1c29.png)

Macと同じようにカラー表示された :tada: 

日本語インライン変換で出ないのは相変わらずだが、emojifyでの絵文字入力は `:sushi:`のようにコロンで囲んで行うので問題ない。コロンを閉じた瞬間に変換表示される。

補完機能は `company-emoji`を使っているらしく、 `:st`まで書けば候補に :star: ( `:star:`)が現れる。

安心して :sushi: をデプロイできる。
Google Home + GHKit で LINE メッセージをリアルタイムで読み上げ

## 背景・目的

電車で移動中の人のように「手は動かせるけど、おしゃべりができない人」と
自宅で軽作業中の人のように「口は動かせるけど、手が離せない人」とを
LINE アプリ上でコミュニケーションを実現させたい

![やりたいこと.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40619/598ef00e-109e-ead6-cb02-a0df2786aa8d.png)

## システム構成

[LINE Messaging API](https://developers.line.biz/ja/services/messaging-api/) の他、 [GHKit](https://prtimes.jp/main/html/rd/p/000000005.000026582.html), [IFTTT](https://ifttt.com/), [Google App Engine](https://cloud.google.com/appengine/) を使用します。
執筆時点で GHKit は販売終了済みのようですが、この仕組みは後継機の [GHKit Zero](http://ghkit.jp) でも動作する見込みです。

![システム構成図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40619/ae2eb82f-183d-2aeb-c357-3607e882562e.png)

![シーケンス図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40619/935a3c26-88c6-0793-cf03-310c4fab90c9.png)

IFTTT から直接 LINE へメッセージを送信できますが、それには [LINE Notify](https://notify-bot.line.me/ja/) を LINE グループへ参加させる必要があります。しかし、 LINE Notify と LINE Bot の両方の LINE 公式アカウントを LINE グループへ参加させることはできません。[^1] そこで、 LINE Notify は使用せず、 Google App Engine を経由して LINE Bot からプッシュメッセージを送信します。

Google App Engine へは、次の 2 つの機能を持つアプリケーションをデプロイしておきます。
このアプリケーションの詳細は後日改めて紹介します。

* IFTTT からの Webhook を解析してプッシュメッセージを送信
* LINE からの Webhook を解析して GHKit へリクエストを送信

## スクリーンショット

家族の LINE グループへ、 Google Home からメッセージを送信してみました。

![LINE_capture.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/40619/3cfaa11c-1fad-cd1d-235f-ce3b71cbe3db.jpeg)

\# 今年末は自宅でゆっくり過ごします。

## 参考サイト

* [GHKitとIFTTTの連携手順 - Qiita](https://qiita.com/tetotetote/items/a7ba4d464e8574d452fd)

[^1]: [グループチャットにLINE公式アカウントを招待できません。](https://developers.line.biz/ja/faq/#why-cant-i-invite-my-bot-to-a-group-chat-2017-07-24)
Webページ作成するときにいつもすることまとめ

個人的なWebページを作るにあたって、毎回参照するメモがあるのですが、それを公開します。

# サーバ
無料でカスタマイズが可能なページを作成できる以下を使うことが多いです。

* GitHub Pages
* Heroku

# スマホでのビュー対応

headerに以下を追加します。

```html
<meta name="viewport" content="width=device-width, initial-scale=1" />
```

# ファビコン・Webクリップアイコン
以下のサイトで自動で生成できます。
https://ao-system.net/favicongenerator/

```html
<link rel="icon" href="https://example.com/img/favicon.ico">
<link rel="apple-touch-icon" href="https://example.com/img/apple-touch-icon.png" />
```


# OGP画像
OGP画像がどんな見た目になるかプレビューするためのサイト
サイズは1200x630
http://ogimage.tsmallfield.com/

```html
<meta property=og:image content="https://example.com/img/ogp.png" />
```

# ローカルサーバを起動
pythonでローカルサーバを容易に構築できます。

```py
python3 -m http.server 8000
```

# 配色

HTML Color Pickerで配色を参照します。
https://www.w3schools.com/colors/colors_picker.asp
Delphi IDE Setting Changer 2

# RADStudio IDE でのフォント変更

[10.3 Rio - リリース 3 - 主な修正と強化機能](http://docwiki.embarcadero.com/RADStudio/Rio/ja/10.3_Rio_-_%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9_3#.E4.B8.BB.E3.81.AA.E4.BF.AE.E6.AD.A3.E3.81.A8.E5.BC.B7.E5.8C.96.E6.A9.9F.E8.83.BD) に

>IDE フォントおよびフォント サイズの設定のサポート。 10.3 より前の機能の、より新しい、より良いバージョンを復活させることで、プロジェクト ビュー、オブジェクト インスペクタ、構造ペインなどのドッキング可能ウィンドウを含む、IDE のメイン ウィンドウのフォントおよびフォント サイズは、レジストリ編集で定義できるようになりました

とありました！
お、あの昔のレジストリが復活したんか！
と思って過去に作った↓コレをバージョンアップすることにしました。

>**Delphi IDE Setting Changer**
>https://qiita.com/pik/items/aae1f8743fdfc0a40917

# 10.3.3 のレジストリキー

書き込むレジストリは昔と同じ

```text
ModernTheme
```

なのかと思ったら違った！
DocWiki には

> [IDE ビジュアル設定のシステム レジストリ キー](http://docwiki.embarcadero.com/RADStudio/Rio/ja/IDE_%E3%83%93%E3%82%B8%E3%83%A5%E3%82%A2%E3%83%AB%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0_%E3%83%AC%E3%82%B8%E3%82%B9%E3%83%88%E3%83%AA_%E3%82%AD%E3%83%BC)
>~~ModernTheme~~ を HKEY_CURRENT_USER\Software\Embarcadero\BDS\20.0\ に作成します

~~って書いてあるのに！~~　修正されていました。
で、調べたら↓のサイトに場所が書いてありました[^1]。

>**How to modify Delphi 10.3.3 IDE font and font size**
>http://www.codecoder.top/pascal/how-to-modify-delphi-10-3-3-ide-font-and-font-size.html

で、じゃあどこかというと↓でした。

```text
Theme
```

なるほどなー。もうモダンとか関係ないテーマだもんね。

それと、背景とかは新しいテーマによって定まるので `MainToolBarColor` は 10.3.3 では意味が無くなりました。

ということで、改訂されたソースが↓こちら。

**IDE Setting Changer**
https://bitbucket.org/freeonterminate/idesettingchanger/

実行時のイメージは何も変わってません（解りづらくなるので Style も未適用）

**実行イメージ**
<img width=480 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12977/0eb41e1d-70db-13e8-0ed0-1fa1b9c67fbd.png">

# まとめ
10.3.3 でフォントとフォントサイズを変更する場合は `Software\Embarcadero\BDS\20.0\Theme` に書き込んでね。
上のアプリをビルドして使うと楽ちんだよ。

[^1]: 12/3に[エンバカデロの井之上さんのブログ](https://community.idera.com/developer-tools/b/blog/posts/ide-improvements-in-rad-studio-10-3-3-ja)で場所が明示されました。
Webサイトが見れる仕組み

# 見出し一覧
1. 見たいページをサーバにリクエストする
2. webサーバからレスポンスされる
3. webページを表示する
4. ブラウザがindex.htmlを表示させるときの手順

# 見たいページをサーバにリクエストする
見たいページはURLで表す。
例.http://ドメイン名/index.html
URLには**どのように、どのサーバから、どのファイルを**という要素が詰まっている。

|要素|意味|
|:---|:---|
|http|どのように|
|ドメイン名|どのサーバ|
|index.html|どのファイル|
# webサーバからレスポンスされる
URLを見て判断する。
例.http://ドメイン名/index.html

|要素|意味|備考|
|:---|:---|:---|
|http|webページが欲しいんだと解釈|GETメソッド|
|ドメイン名|自分のサーバのことを指していると解釈|-|
|index.html|どのファイルが欲しいか解釈|-|

httpを受け付けるには、サーバにWebサーバーソフトウェアが入っている必要があります。(apacheが有名)
httpにはメソッドが複数あり、みなさんが通常何かのページをクリックしたら自動でGETメソッドがサーバに伝わります。GETメソッドは文字通りの意味です。

もしwebサーバーソフトウェアがサーバに入っていなかったら、
**サーバは「webページが欲しいんだ」と解釈できません。**

また、レスポンスするにもhttpを使います。
もしwebサーバーソフトウェアがサーバに入っていなかったら、
**webページを送ることもできません。**

# webページを表示する
webページは無意識にみなさんブラウザで見ている。(chrome,firefoxなど)
ブラウザで見ずにメモ帳で見るとどう見えるか

|アプリ|どのように見えるか|
|:---|:---|
|メモ帳|ただの文字として見える|
|ブラウザ|webページとして見える|

# ブラウザがindex.htmlを表示させるときの手順
1. 拡張子がhtmlだから、このファイルはHTMLという言語で書かれていると認識する
2. 中身のテキストを上から順に読んでいく
3. < ! DOCTYPE html>と書かれているからHTML5で書かれていると認識する
4. headタグの中身でこのファイル自体の情報を把握する(linkタグ、metaタグ等)
5. < body >タグの中身を実際にwebページとして表示をさせる
6. HTMLのタグが出てくるたびに、タグの意図に沿った表示をする(h1タグ、pタグ等)
datalist_tag（追加もできるセレクトボックス）をヘルパーに追加する。

# はじめに
- [M3Cアドベントカレンダー25日目](https://qiita.com/advent-calendar/2019/m3c)です。
- ゲームは買いません。

# 追加も選択もできるIF

　例えば、家計簿アプリなどで、
マスターのリストから選択する品物を選択するが、
品物がマスターにない場合は追加できる　というIFを作りたいときがある。

　既存のリストから選択する場合と、リストにないものを入力する場合でフォームを分ければ楽なのだがユーザビリティは良くない。あれば選ぶなければそのまま追加という風にしたい。

そういう場合はHTML5で追加されたdatalistをつかえばいいそうな。

　datalistは中にoptionタグを複数持つタグで、datalistにつけたidを
テキストフィールドの list属性で指定すると「あればリストから選び、なければ入力する」入力欄を作れる。

# Railsでヘルパーにする

ヘルパーに定義

```application_helpler.rb
def datalist_tag(name, value, datalist, options={})
  id = "#{name}-#{Random.new.rand}"
  options.merge!({
    list: id
  })
  html=<<-EOS
    <%= text_field_tag(name, value, options) %>
    <datalist id="#{id}">
      <% datalist.each do |name| %>
        <option value="<%= name %>">
      <% end %>
    </datalist>
  EOS
  ERB.new(html).result(binding).html_safe
end
```

viewで呼び出す。

```erb
<%= datalist_tag('item[name]', nil, @data_list, autocomplete: 'off') %> %>
```

`@data_list` には選択肢に表示したいデータを配列で渡す。

# 簡単家計簿

`datalist_tag` を使って簡単家計簿を作る。

![kantankakeibo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36976/781e66db-8aa2-b3eb-314e-388418948a6f.gif)


datalistのテキストフィールド部分は `autocomplete=off` にしておかないと
一度入力してその後消した項目も選択しに出てきて見づらくなる。
共同研究を円滑に行うために知っておくべき5つのコト

# はじめに
この記事は[DSL Advent Calendar 2019](https://qiita.com/advent-calendar/2019/muroran-it-dsl)の24日目の記事になります. 
当研究室B4の@tbtaaaが担当いたします.

ついにクリスマス前日となりましたが,みなさんいかがお過ごしでしょうか? 
家族・恋人・友人等と有意義な時間をお過ごしになっていることを願っています!

さて私は今年度とある企業と共同研究を行ってきて,諸々の事情でなかなかうまく研究が進まない場面がいくつかありました.
そこで本記事では,私の考える学生視点での,共同研究を円滑に行うために知っておくべきことを5点ほどシェアしたいと思います.

# 1. 必ずしも良質なデータが提供されるとは限らない
企業と特段何かしたことのない私にとって一番最初に驚いたことです.

企業が業務に使用しているファイルのフォーマットが独特で,そのファイルををそのまま提供してもらう場合,研究では利用しにくいものとなっていることがあります.
その場合,研究の前にそのデータのフォーマットの解析や必要な部分の抽出に時間を費やしてしまう可能性があります.
そこでその作業が負担と感じる場合には,まず企業に「(研究に必要な)xxxのデータを,(扱いやすいフォーマット)○○○の形で記録をお願いできないでしょうか」と依頼をしてみましょう.
もしかすると,企業の方がそれに応えてくださるかもしれません.

また提供データに関してですが,何らかの欠損が発生していることは往々にしてあります.
以下にその主な原因を示しておきます.

計測方法|原因
:-:|:-:
人力|計測抜け, エクセル等への入力ミス
センサ等|故障,企業の都合で電源が落ちる

場合によっては,データの不足が研究に深刻な影響を与えてしまう場合があるかもしれないので,躊躇せずに企業の担当者に欠損している旨を伝えましょう!
企業の方は__意外と正常にずっと計測されていると思っていて,詳細な確認を行っていない場合がありますので__,注意をしましょう.

# 2. 活動時間のレンジが違う
共同研究を行っているとひしひしと感じるようになることです.

1日の活動時間が,
学生 → 夜主体で朝が弱い
企業 → 日中
の場合が多いのではないかなと思います.

研究のことで急ぎで確認が必要になる時には,場合によって企業の担当者から学生に直接電話が掛かってくることがあります.
その際企業の方は朝から勤務をしている訳ですから,朝に電話が掛かってくることもあるでしょう.
それが夜型の学生にとって__鳴り止まないモーニングコール__となってしまうこともあるかもしれません... 
そのため,研究の中で大事な時期の日中には,__常在戦場の構え__でいましょう.
逆にこちらから企業に確認や依頼を行いたい場合は,夜や週末にお願いをしても回答をいただけない場合が多いので,__十分に時間に余裕を持って__メール等をすることをオススメします.

# 3. 研究の目標が若干異なる
これは学生には若干難しい話です.

○○を企業と大学で協力して実現しようということで共同研究を行っていく訳ですが,企業と大学で研究の思惑は必ずしも一致していないことがあるかもしれません.
特に学生から見て,企業の経営戦略等を説明なしに読み取ることは難しいと思われます.
例えば,大学側としては○○の研究を難しいこともあり,10年かけて完成させたいといった考えがあるとします.
しかし一方企業側としては,○○の研究を5年で見極めをして,今後は××に展開していきたいといった方針があるかもしれません.
契約期間があるため,突然打ち切りとなることはほとんどないと思いますが,プロの共同研究をする学生(?)になるためには,先方の事情も把握することが大事になってくるかもしれません.


# 4. 成果物やその期限がしっかりと定められている
企業の体質等も若干影響してくるかもしれませんが,研究成果の内容であったり納品期限は厳密に定められていることがほとんどです.
通常の研究でも学会論文や卒論・修論の提出期限は厳密ですが,企業とは契約があるため,大学と企業間との関係を悪化させないためにも,計画的に研究を行い成果を出せるように努めましょう.


# 5. 本来の研究以外の作業も行う可能性がある
当然のことながら,学生は研究を行うことがメインですが,企業によっては研究成果を,企業の方が利用しやすいような__システムとして__納品して欲しいなどといった要求をされることがあります.
これが本来の研究を圧迫して,過密な研究スケジュールになってしまう要因となる可能性があり,注意が必要です.

さらに,IT分野をメインフィールドとしていない企業の場合,システム構成や搭載する機能をこのようにして欲しいといった具体的な要件を指定してこないことも予想されます.
上記のような場合__開発が難航する可能性が高い上,完成後に思っていたものと違う__といわれてしまうことが考えられます.
そのため,開発を始める前に綿密な話し合いをし,後から齟齬が生じないようにしましょう!

# 最後に
ここまで共同研究をより良いものにするために,私の思うことを書き連ねてきました.

ですが,何よりも共同研究で一番重要なことは __共同研究先の企業のことを信じる__ ことです!
研究が思ったように進まず,お互いに疑心暗鬼になって協力し合わなくなるのは得策ではありません.
そういう時こそ,お互いの持ち合わせているノウハウを積極的に活用し助け合うことで,共同研究を成功に導きましょう!

この記事が,これから共同研究を行う学生のお役に立てるようになることを願っています.
ストロングパラメータとは

# ストロングパラメータとは

paramsは情報を受け取れるとても便利なものだが、不正な情報を防ぐことができません。そんな時に使うのが「ストロングパラメータ」です。
「ストロングパラメータ」とは不要な情報を受け取らないようにしてくれるもの、セキュリティーを強化してくれるものになります。

# ストロングパラメータの設定
ストロングパラメータはユーザーのログイン時などによく使用されるため、今回はログイン時を想定して設定を行いました。

``` Rails:users_controller
private
　def user_params
　 params.require(:user).permit(:name, :email, :password, :password_confirmation)
　end
```

上記を設定することで、userはname、email、password、password_confirmationのデータしか受け取れないようになります。
Awesome CoreNFC in iOS 【iPhone でピッと IC カードを読む】

# はじめに
CoreNFC は、iPhone でピッと IC カードを読みこめる機能です。

利用できるICカードは幅広く、交通系IC、各種電子マネー、大学生協の電子マネー、運転免許証、パスポート、マイナンバーカードなどあります。

今年9月19日に利用可能になった CoreNFC はまだ日本語の学習記事があまりありません。この記事では、CoreNFC を日本の開発者にもっと活用して頂く目的で、情報をまとめさせて頂きます。将来的に初学者に良いまとめになれば幸いです。

改善コメントや編集リクエストをどんどん募集しております。どうぞよろしくお願い申し上げます🙇‍♂️ 

# キータ
- [NFCの種類（type A, B, F）](https://qiita.com/treastrain/items/dca0c8d328bb71625c6c)
- [交通系ICの残高読み取り](https://qiita.com/treastrain/items/d54ef2c2abbcd40fb9f1)
- [運転免許証](https://qiita.com/treastrain/items/9025000acec37f77134a)
- [電子マネーの残高](https://qiita.com/treastrain/items/f5c518486d19ba3573d3)
- [SwiftUI を用いて交通系IC](https://qiita.com/Kewa4/items/2eafd03e83ae6d1afa80)
- [ライブラリを使わずに運転免許証、読み取りコードの解説](https://qiita.com/treastrain/items/58e69a1d82dccde48770) - 日本の CoreNFC オープンソース開発の第一人者 @treastrain 氏の記事です。type B の読み取りをマスターできます。
- [NFC アプリ一覧（type B）](https://qiita.com/simphon/items/97bafc01377564a6921a) - @simphon氏。最新の情報がバランスよくまとまっております。
- [Core NFC Advent Calendar 2019](https://qiita.com/advent-calendar/2019/corenfc)

# サンプル・アプリケーション
- [TRETJapanNFCReader/Examples](https://github.com/treastrain/TRETJapanNFCReader/tree/master/Examples) - 交通系ICと運転免許証の読み込み例がのっております。
- [TransitPal](https://github.com/robbiet480/TransitPal) - アメリカのクリッパーカードの読み込みですが、とても良いサンプルアプリケーションです。Swift UI でシンプルながら、下記画像のようなかなり綺麗な UI を学べます。

<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275966/44d5aa6a-9742-6568-8130-effea7afcd4f.png"> <img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275966/a909a6f7-b9ed-264e-ddde-7750c71d7066.png">
Screenshots from [TransitPal](https://github.com/robbiet480/TransitPal)

# オープン・ソース・ライブラリ
- [TRETJapanNFCReader](https://github.com/treastrain/TRETJapanNFCReader) - 交通系IC、各種電子マネー、大学生協の電子マネー、運転免許証の読み込みを手軽に扱えます。

# 記事を良くするコメントや編集リクエスト
この記事は、CoreNFC について学ぶ際に、興味のある各記事に進むのにご利用いただければと思います。皆様の、記事を良くするコメントや編集リクエストをお待ちしております。お願い申し上げます🙇‍♂️
Apple pencilとiPadでとった「手書きメモ」が自動でブログになる勉強方法が捗りすぎるので方法を公開します　( Evernote postach.io )

# 勉強でとったメモがそのままブログに！！

**東京グルメ紀行**
https://qiita.postach.io/

この記事と全く同じ内容＋お絵かき入りのブログ

https://qiita.postach.io/post/ipaddetotuta-shou-shu-kimemo-gazi-dong-deburoguninarumian-qiang-fang-fa-gabu-risugirunodeyarifang-wojiao-emasu-evernote-postach-io

このブログのように、evernoteでとった手書きメモやお絵かき入りのノートを直接いい感じのブログにできます。

iPadと Apple pencilがあれば、簡単な表も手書きでパッと書いて公開できるので、**アルゴリズムの解説記事はevernoteで書いて公開した方が楽です。**
（Qiitaはお絵かきが挿入できないのがだるい）

# 手順（全部無料です）

* Evernoteをインストール

Evernoteはテキストと手書きメモでノートを取れるアプリです。
使い方はググってください

* postach.ioに登録する

以下のリンクにアクセスし、登録します

https://postach.io


* postach.ioノートブック（登録したら勝手にできている）内にノートを作る。

このとき、publishedというタグを付けると公開されます。

# これで準備は完了です


postach.ioというノートブック内にノートを取り、publishedタグを付けてノートを取ると、ブログが投稿されます。

ノートを更新すると自動でブログに反映されます。

#### 超便利ですよね？自分の勉強がそのままブログになるので、モチベーション維持に欠かせないものになりました！！

# FAQ

* markdown記法はつかえるの？

markdownタグを付けるとできます。以下の記事もマークダウンで書かれてます。

この記事と全く同じ内容＋お絵かき入りのブログ

https://qiita.postach.io/post/ipaddetotuta-shou-shu-kimemo-gazi-dong-deburoguninarumian-qiang-fang-fa-gabu-risugirunodeyarifang-wojiao-emasu-evernote-postach-io


* アフィリエイトはできるの？

Google Adsense やAmazonのアフィリエイトは挿入可能です。

https://postach.io/blog/post/the-ultimate-guide-to-choosing-a-profitable-niche-for-your-blog

* twitterへの自動投稿はできるの？

Postachの設定→Edit addonsで設定出来ます。

* Google analytics はできるの？

上と同様の操作でUAを入力できる画面が出ます。

* 以上ですが何かあればコメント欄で聞いて下さい。
Deno用のValidatorライブラリを作った話

2日遅れで Deno Advent Calendar 2019 の記事を書いています。

## はじめに
ちなみにJSConf JP 2019で改めてDenoに興味が湧き、触った感じではベースは慣れているTypeScriptが好ましかったです。
しっかり設計されていればNodeで書かれていたWeb APIのコードを移行には困らない優等生の印象なのでネタに困りました。

[denolib/awesome-deno](https://github.com/denolib/awesome-deno)を眺めていたところValidatorライブラリがないことが気が付きました。
Validatorは地味ではありますが、Web APIを作るときにはあるととても便利です。
Denoの周辺ツールに慣れるためにもValidatorライブラリを作ってみました。

https://github.com/nana4gonta/validator
（突貫で作ったのでREADMEは後ほど書きます。。）


## 実装まわり
- 特定のフレームワークには依存したくない
- APIは必要最低限にしたい
- （できれば）バリデーションのみしたい

以上から[@angular/forms](https://angular.io/api/forms)のコードを参考にしています。
結果的には実装順が逆になりましたが、`pattern` 関数で正規表現を使いつつ、バリデーション関数のショートハンドと、独自関数が実装できれば大体のバリデーションはできるという想定です。
自分がAngularでフォームバリデーションをする際にもそのあたりの感覚があったため、[@hapi/joi](https://github.com/hapijs/joi)も悪くはなかったのですがAPIが多かったり、メソッドチェーンが好きになれなかった気持ちもあります。

## Denoまわり
Validatorライブラリを作りましただけだとTypeScriptの話になるのでDenoの話も。
実際に触ったのは `deno fmt` のサブコマンドや `std/testing` のライブラリです。

`deno fmt` は最初何が使われるか分からなかったのですが、内部的にはPrettierと触り慣れているツールで設定しやすいのはよかったです。
このあたりPrettierは使いつつも設定は隠蔽してフォーマットは強制してもよかったのでは、とはちょっと思いました。

`std/testing` のライブラリはシンプルで使いやすいライブラリでした。
やっぱりstdに色々集約されているのはいいですね。
今回は別実装で済ませましたが、早くcryptoライブラリも欲しいことです。

## まとめ
改めてDeno向けにValidatorライブラリを作りました。
今後はArrayやObjectに対応し、リクエストボディをそのままバリデーションかけられるようにしたいと思います。

2020年はNodeとDenoをもっとやっていくぞ！！！
Microsoft Learn 24日目

12月は、毎日 Microsoft Learn を受講していこうという記録。
※受講後に書き込むので公開に間に合わないこと多々あります(アドベントカレンダーの意味ｗ)

12/24 は
Azure におけるセキュリティ、責任、信頼
- クラウドのセキュリティは共同責任

を受講。以下、簡易メモ。

# Azure におけるセキュリティ、責任、信頼
## クラウドのセキュリティは共同責任
データセンターのセキュリティ保護に関して多くの課題に直面している。
セキュリティ専門家の採用と維持、多くのセキュリティ ツールの使用、脅威の量と複雑さに後れを取らないことなどが含まれる。
![2-cloud-security.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141029/500a46de-b7d6-ddc3-0131-4249d6a24205.png)

### セキュリティは共同責任である
IaaS の場合は、最下位レベルのサービスを利用し、Azure に仮想マシン(VM)と仮想ネットワークを作成するように要求する。
このレベルでは、オペレーティング システムおよびソフトウェアに対してパッチを適用すること、これらをセキュリティで保護すること、さらにセキュリティで保護されるようにネットワークを構成することはユーザー側の責任となる。
PaaS の場合は、オペレーティングシステムおよび最も基本的なソフトウェア (データベース管理システムなど) に対応する。
キュリティで保護された複雑なシステムをアップまたはダウン状態にしたり、必要に応じてそれらのシステムをスケーリングしたりすることができる。
Saas の場合は、ユーザーが制御するクラウドコンポーネント(サービスの種類によって異なる)を保護する責任がある。
・データ
・エンドポイント
・アカウント
・アクセス管理

### セキュリティに対する階層型アプローチ
多層防御は、情報への不正なアクセスを目的とする攻撃の進行を遅らせる一連のメカニズムを採用する戦略。
各層で保護が提供されるため1つの層が破られた場合、後続の層は既に備えができており、さらなる露出を防ぐことができる。
多層防御は、同心円状の輪のセットとして視覚化でき、データは中央でセキュリティ保護される。
各輪では、データに関するセキュリティ層が追加される。
![defense_in_depth_layers_small.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141029/1e070421-54eb-7d01-f123-d80555b315a7.png)
#### データ
データが確実に適切なセキュリティで保護されるように格納し、データへのアクセスを制御する必要がある。
#### アプリケーション
アプリケーション開発のライフ サイクルにセキュリティを統合することは、コードにおける脆弱性の数を減らすのに役立つ。
開発チームが確実に既定でアプリケーションをセキュリティで保護するようにし、セキュリティ要件を交渉の余地のないものにする。
#### コンピューティング
コンピューティングリソースを必ずセキュリティで保護すること、セキュリティ問題を最小限に抑えるべく適切な管理体制を敷くことに重点的に取り組む。
#### ネットワーク
リソース全体でのネットワーク接続を制限し、必要なもののみを許可することに重点を置く。
この通信を制限することで、ご利用のネットワーク全体の侵入拡大のリスクを軽減することができる。
#### 境界
攻撃を識別し、影響を排除し、これらの発生時に警告することは、ネットワークを安全に保つために重要。
#### ID とアクセス
ID がセキュリティで保護されていることと、付与されたアクセス権のみが必要であることと、変更がログに記録されていることを確認することに集中する。
#### 物理的なセキュリティ
物理的なセキュリティの目的は、資産へのアクセスに対する物理的な保護措置を講じること。 これより、他の層をバイパスできなくなり、損失や盗難が適切に処理される。
Nuxt.js に後からテスト (Jest/vue-test-utils)を入れる

# 概要

Nuxt.js のプロジェクトに後から Jest と vue-test-utils を入れる機会があったのでメモしておきます。


# 必要なライブラリをインストール

`yarn add -D @babel/plugin-transform-runtime @babel/preset-env @vue/test-utils jest vue-jest babel-core vue-jest`

# .babelrc を追加

プロジェクトのルート直下に `.babelrc` を追加します。

```json
// .babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": false,
        "targets": {
          "node": "current"
        }
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}
```

# jest.config.js を追加

続いて `jest.config.js` を追加します。

```js
module.exports = {
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1'
  },
  moduleFileExtensions: ['js', 'json', 'vue']
}
```

# package.json に test script を追加

追加します。

```json
"scripts": {
  ..
  "test": "jest --config jest.config.js"
},
```

これで `yarn run test` でテストを実行することができます。


# テストを追加

ここでは、`userInfo` のみを `props` にもつ `UserInfoCard` というコンポーネントをテストします。テストは `.user-name` という CSS クラスの中にユーザー名が表示されるかのテストです。

```js
// test/components/userInfoCard.spec.js
import { mount } from '@vue/test-utils'
import UserInfoCard from '~/app/components/UserInfoCard.vue'
import UserFixture from '@fixture/user'

describe('UserInfoCard', () => {
  test('Display text', () => {
    const wrapper = mount(UserInfoCard, { propsData: { userInfo: UserFixture } })
    expect(wrapper.find('.user-name').text()).toEqual('Test Name')
  })
})
```

テストで `propsData` を渡す時の hash key 名は、コンポーネントが受け取る `props` 名と合わせる必要があります。テストデータは `fixture` として別ファイルで定義してあげると使いまわせて便利です。

```js
// test/fixtures/user.js
export default {
  id: 1,
  name: 'Test Name',
  ..
}
```

`fixture` 用の `name mapper` も `jest.config.js` に追加してあげると良いです。

```js
module.exports = {
  transform: {
    '^.+\\.js$': 'babel-jest',
    '.*\\.(vue)$': 'vue-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    "^@fixture/(.*)$": "<rootDir>/test/fixtures/$1" // 追加
  },
  moduleFileExtensions: ['js', 'json', 'vue']
}
```

# テスト実行

`yarn run test` でテスト実行してみましょう！
テストは通りましたか？

# 終わりに

テストを入念に書くコンポーネントとそうでないコンポーネントを見極めた上で、テストを書いていきましょう。それでは良いテストライフを！ :thumbsup:
Xcode11でドキュメントコメントが変わった


例えばこんな関数があって

```Swift
func hoge(num: Int) -> Bool {
    return true
}
```

その関数をカレント行にした状態でドキュメントコメントのショートカット `cmd + alt + /` をすると
### Xcode10.1の場合

```Swift
/// <#Description#>
///
/// - Parameter num: <#num description#>
/// - Returns: <#return value description#>
func hoge(num: Int) -> Bool {
    return true
}
```

### Xcode11.3の場合

```Swift
/// <#Description#>
/// - Parameter num: <#num description#>
func hoge(num: Int) -> Bool {
    return true
}
```

## 戻り値のコメント欄(Return)がなくなっている！！！
Apple的には不要と見なされたということでしょうか。
関数名にきちんと表れているのが正しい、という話なんでしょうかね。

```Swift
/// タイトル取得
/// - Returns: タイトル
func getTitle() -> String? {
    return params().title
}
```
これなら、まあ不要そう。

でも、こういう時は必要な気がするんだけども、これも命名でなんとかすべきなんだろうか。

```Swift
/// 開始処理
/// - Parameter type: 実行するタイプ
/// - Returns: 実行開始可能かどうか
func startJob(type: JobType) -> Bool {
    if currentJob == .None {
        return true
    } else {
        // 処理が実行中のため、開始しない
        return false
    }
}
```
実務未経験から入社したエンジニアのメンタルの保ち方

こちらは、TECHPLAY女子部 Advent Calendar 2019 の25日目の記事になります。

私は、オンラインのスクールにてプログラミングを学び、エンジニアになってからは１０ヶ月が経とうとしています。
入社してから実践し、効果があった「メンタルの保ち方」についてご紹介したいと思います。

## 大切なのは「技術力」よりも「メンタル力」
残念ながら、技術力で仕事に立ち向かうのは無理でした。
入社前の私の勉強の仕方もよくなかったのですが、実務未経験でエンジニアになった人が技術力だけで仕事に立ち向かうのは、結構無理があるのかもしれません。
それよりも、あらゆる場面で「仕事ができない自分」に直面することが多く、落ち込むばかりでした。
そんな中、私が見つけたメンタルの保ち方を、4つご紹介します。

### （１） 同じレベル感の人に会う

仕事を始めてしばらくしてから、技術系の勉強会へ立ち寄りました。同じ時期に実務未経験からエンジニアになった人とお話をしたのですが、先輩に怒られたり、呆れられたりするポイントがとてもよく似ているのです。その人は同じスクール出身者とかいうわけではありませんでした（何なら独学の方だったかも）。
コードが読めず、読み切れても自分のコードを書くことができず、「私ってバカなんじゃないか…」と思ってしまったり、「向いていないんだ」と思っては適職診断をしてエンジニアが向いてる職業一覧にあるか調べたり、入社してから数ヶ月は、とにかく余計なことを色々と考えてしまっていた時期でした。
しかし、つまづくところはみんな似ているところ。
「同じところで引っかかるのは私だけじゃない」と思うことで、孤立感からは随分助けられたように思います。

### （2） マイ辞書をつくる
自分が忘れっぽいこともあり、プログラムに関するメモをとにかく取りました。
苦労して自分で書いたプログラムも、数週間経てば忘れてしまいます。
また一から調べることも力になると思いますが、自分が過去に丁寧に噛み砕き、まとめたメモを見ることで、すぐに思い出すことができます。これで、「前同じことをやったのにできない…」というネガティブモードを回避できました。

メモのツールは、エディタを使用する人が結構多いようですが、私は「EverNote」を使っています。
全文検索もでき、自分のオリジナルの辞書を作っているような感覚です。

### （3） 区切りを設定する
「とりあえず一年」ってやつです。
自分ルールで区切りを付けておくと、期間という分かりやすい目標があるので、とりあえず頑張れます。
今でも仕事は難しく感じますが、幸いにも会社のサービスには惚れ込んでいるので、今では「とりあえず三年」と、期間が伸びました。笑

### （4） 自分で小さなアプリを作る
身に付けたい（仕事で使いたい）機能のだけの、シンプルで小さなアプリを何個も作りました。
小さいのですぐに出来るし、数も多くなるので、「やってきたな〜」という積み上げた感があります。
タスクを回すだけのアプリ、ユーザーにメールを飛ばすだけのアプリ、など、つくる時に「このアプリのメインはこれ。ここまでやったら完成にする」という感じに決めておきました。
勉強する時の参考書など、「厚い本より薄い本の方がいい」と言われるところの流用版といった感じです。


## 終わりに
エンジニアになるためにプログラミングスクールに通い、挫折した人は数多くいるようです。
また、スクールを卒業したけどエンジニアにはならず、ディレクションやデザイナー、webライターなど、それぞれの方向で花を咲かせている人も見てきました。
技術のキャッチアップが遅く、とにかく自信がない私ですが、やっぱり楽しい！と感じることも増えているので、もうちょっとこの道で頑張ろうかな、と思っています。
同じく悩んでいる人がいたら、ちょっとでもこの記事が参考になったら幸いです。

最後までお読みいただき、ありがとうございました！
年末まで毎日webサイトを作り続ける大学生 〜67日目 オブジェクト指向で手紙を作る〜

##はじめに
こんにちは！@70days_jsです。
今日はオブジェクト指向で手紙を作りました。(gif)↓
![test3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516248/cfe07ac4-6048-64a8-8e0b-6dce19795666.gif)


クリックすると次の手紙が表示されます。
今日は67日目。(2019/12/24)
よろしくお願いします。

##サイトURL
https://sin2cos21.github.io/day67.html

##やったこと
オブジェクト指向で手紙を作りました。

html↓

```html
  <body>
    <h2>Letters</h2>
  </body>
```

css↓

```css
body {
  font-family: Helvetica, YuGothic, "游ゴシック", sans-serif;
}

.letter {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
  height: 200px;
  width: 300px;
  border: solid 1px black;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: white;
  transform: translateX(-50%) translateY(-50%);
}

.pageShift {
  display: none;
}
```

JavaScript↓

```javascript
let letters = [],
  name = [
    "太郎",
    "二郎",
    "三郎",
    "四郎",
    "五郎",
    "六郎",
    "七郎",
    "八郎",
    "九郎",
    "十郎"
  ],
  event = [
    "ラグビー",
    "サッカー",
    "ゲーム",
    "サバイバル",
    "ナルト",
    "ドラゴンボール",
    "宇宙",
    "犬",
    "鳥",
    "ニンジン"
  ],
  numberOfSheet = 10;

function Letter(name) {
  this.name = name;
}

Letter.prototype.head = function() {
  this.head = "拝啓<br>";
};
Letter.prototype.main = function(event) {
  this.main =
    "お久しぶりです。" +
    this.name +
    "です。<br>実は最近" +
    event +
    "をしまして、その結果を報告しようと思った次第でございます。<br>";
};
Letter.prototype.foot = function() {
  this.foot = "敬具";
};

for (var i = 0; i < numberOfSheet; i++) {
  let letter = new Letter(name[i]);
  letters.push(letter);
  let div = document.createElement("div");
  div.classList.add("letter");
  div.setAttribute("id", i);
  let color = randomRGB();
  div.style.backgroundColor = color;
  letter.head();
  letter.main(event[i]);
  letter.foot();
  div.innerHTML = letter.head + letter.main + letter.foot;
  document.body.appendChild(div);
  let eveLis = document.getElementById(i);
  eveLis.addEventListener("click", function() {
    eveLis.classList.add("pageShift");
  });
}

function randomRGB() {
  let r = Math.floor(Math.random() * 256);
  let g = Math.floor(Math.random() * 256);
  let b = Math.floor(Math.random() * 256);
  let rgb = "rgba(" + r + ", " + g + "," + b + ", 1)";
  return rgb;
}
```

今回手紙で内容が変わっている部分は、名前とイベントの2つです。
これはあらかじめ配列に用意しておきました。

LetterオブジェクトはLetterコンストラクターを使って作ります。
メソッドはhead, main, footです。
それぞれ手紙の冒頭、内容、締めの言葉を担当しています。

手紙の変更はイベントリスナーでclickをつけて実現しています。↓

>eveLis.addEventListener("click", function() {
    eveLis.classList.add("pageShift");
  });

.pageShiftクラスはdisplayを消すクラスです。↓

>.pageShift {
  display: none;
}

これで一番上にある手紙はクリックされると消えたように見えます。

##感想
うまい具合の文章を考えてくれるプログラムを組んでみたい・・・。
機械学習の方向を勉強するしかないんだろうか・・・？

最後まで読んでいただきありがとうございます。明日も投稿しますのでよろしくお願いします。
ワイヤレスパワポッピー (失敗編)

# クラッピーチャレンジ Advent Calendar 2019 24日目の記事です

クリスマスイブのアドベントカレンダーという事で今朝からタイムラインで自分を追い込みました。
![予告.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120903/04a6c73c-83d9-ba3e-e099-a5278f0fc425.png)

という事で、やってみたんですがまずは失敗動画から。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/%E3%82%AF%E3%83%A9%E3%83%83%E3%83%94%E3%83%BC%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#クラッピーチャレンジ</a> Advent Calendar 2019 24日目の動画です(失敗) <a href="https://t.co/Lemsej4S03">pic.twitter.com/Lemsej4S03</a></p>&mdash; tomorrow56 a.k.a Yamazaki@12/14-15 Yahoo Hack Day (@tomorrow56) <a href="https://twitter.com/tomorrow56/status/1209476357190639616?ref_src=twsrc%5Etfw">December 24, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 何をやりたかったのか

ダイソーの「Bluetoothリモートシャッター」なんですが、実はキーボードとして動作していて、**Androidボタン**を押すとシャッター用の音量キーと同時に**改行キー**が送信されます。

[noteの分解記事](https://note.com/tomorrow56/n/n83cd108e65d5)

つまり「プレゼンのページ送りがワイヤレスで」出来ます。

じゃあ、クラッピーの手の部分にくっつけて拍手で押す「ワイヤレスパワポッピー」を作ろうと、ざっくり付けました。
(ちなみに、朝の赤いやつは壊れていて青に交換しました)

![IMG_20191224_224933.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120903/d73b4cde-19a7-83e9-55e6-bb4bb13a7cfb.jpeg)

ボタンの位置には、半球タイプのクッションゴムを貼り付けてパチンと閉じた時の勢いでボタンを押す計画でした。

![IMG_20191224_224938.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120903/1bc50265-7da0-a81a-d2fb-1ae15767ca0d.jpeg)

でやってみたのが最初の動画です。結果はパチンとした時の力が不足していて「ボタンが全く押されない」でした。
動画の後半で手で押し付けたらちゃんとPCの画面のパワポのページ送りがめくれているのが悔しい！！
という事でもう一度動画。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/%E3%82%AF%E3%83%A9%E3%83%83%E3%83%94%E3%83%BC%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#クラッピーチャレンジ</a> Advent Calendar 2019 24日目の動画です(失敗) <a href="https://t.co/Lemsej4S03">pic.twitter.com/Lemsej4S03</a></p>&mdash; tomorrow56 a.k.a Yamazaki@12/14-15 Yahoo Hack Day (@tomorrow56) <a href="https://twitter.com/tomorrow56/status/1209476357190639616?ref_src=twsrc%5Etfw">December 24, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

もうちょっときちんと改造するのは、来年の楽しみにしておきます。(強がり)

## 最後に

悔しいので、Miband 4 用に作ったクラッピーウオッチフェイスを貼っておきます。**皆さん、良いクリスマスを！**
![IMG_20191224_094215.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/120903/83db72a2-ed45-039f-a210-44a398d08288.jpeg)