OmniAICreator/Qiita-1.07M huggingface dataset:
Node.js & Express & Socket.ioで非同期通信しようとしたら"/socket.io.js 404"で上手くいかない

#はじめに
今までRailsしかやってこなかったのでNode.jsを入門しようと思い, とりあえずexpress-generatorでWebアプリの雛形を作り, Socket.ioを使った簡単な非同期通信チャットアプリを作ろうと思いました.
しかし, npm startしてページを開けても

```
GET /socket.io/socket.io.js 404
```
と出てしまい上手くいきませんでした.

色々ググったら解決したので, 備忘録として記事を書きます.
間違ってる部分があればコメントでご指摘頂けると助かります.

#環境
macOS Mojava **10.14.6**
Node.js **12.13.1**
npm **6.12.1**
Express **4.17.1**
Socket.io **2.3.0**


#何がダメだったか（私の場合）
このエラーの原因は色々と考えられますが, 私の場合はapp.jsに

```javascript
var io = require('socket.io')(server);
io.on('connection', function(socket){
  console.log('connected');
});
```
を入れていたからっぽかったです.
socket関連の処理は, app.jsではなくbin/wwwファイルに書くとのことでした.

#解決策
bin/wwwに処理を書きます.

```javascript
var server = http.createServer(app);
```
の後に, 

```javascript
//Socket.io
var io = require('socket.io')(server);
io.on('connection', function(socket){
  console.log('connected');
});
```
を記述すると, 無事ターミナルで
connected
と出力されていました.
量子コンピュータの勉強をやってみる（その０）

# イントロ

最近、量子コンピュータが世間を賑わせてきているように感じる。

 - Googleが量子超越性を証明した！
 - 量子コンピュータが現在の暗号化を打ち破る！？
 - 量子コンピュータはブロックチェーンも打ち破る！？

などなど、ニュースは尽きない。ネット記事や報道内容と「量子コンピュータの実際」には大きな乖離があるが・・・

だがしかし！！注目を浴びている事には違いないため、「この波に乗ってやろう！」ということで量子コンピュータの学習を始めることにしました。

本記事は、自身の学習の記録／備忘を兼ねて日々の勉強での疑問点、解決までの道筋をまとめていきたい。


# 学習方針

当面は以下の学習方針で進めたいと思います。

- 量子コンピュータの体系的に理解するために専門書籍を利用
- シュミレータ／実機の利用

ちなみに僕は大学時代物理学を専攻していたため、基本的な量子力学の知識はあります。


## 専門書の利用

とりあえず読んでみようと思ったのは、「[Quantum Computation and Quantum Information](https://www.amazon.co.jp/Quantum-Computation-Information-10th-Anniversary/dp/1107002176)」である。初学者にはハードルが高いが、この分野では有名な本らしく、だいたいどの方に聞いてもこの本を読んでいると聞くため、挑戦することにした。

ちなみにリンク先は英語版だが、一応日本語版（三部構成）も絶版になっているものの販売されているようだ。ただし、めちゃめちゃ高い。私がアマゾンで確認したときは第1巻が「６万円」だった・・・(;^ω^)


## シュミレータ／実機の利用

シュミレータ／実機はIBM社が提供している「[IBM Q Experience](https://www.ibm.com/quantum-computing/technology/experience/)」を利用しようと思う。
これを選んだのは、私が現在IBM主催の量子コンピュータの勉強会に参加しているからだ。

これは、アカウントさえ作成すれば、インターネット経由でQiskit（IBM社提供のゲート方式量子コンピュータおよびシュミレータ上での実行環境を提供）を利用することができる。

もちろん、自身で実行環境を整備する必要はないので、手軽に利用することができる。

# 最後に

次回からは、勉強を進める上で発生した疑問点などについてまとめていきたいと思う。
なるべく、高頻度で更新できるよう頑張っていきます・・・('ω')
プロジェクト管理やドキュメンテーションにNotionを使おう

アルプ株式会社でエンジニアをしています、集約のエンティティ@pictinyです。
これは[Notion Advent Calendar 2019](https://qiita.com/advent-calendar/2019/notion) 1日目のエントリです。

# Notion とは

[Notion](https://www.notion.so/) はAll-in-one workspaceです。シンプルながら柔軟な機能で、従来の管理ツールを統合するようなサービスです。
アルプ株式会社では、プロダクト開発のプロジェクト管理ツールや、議事録や仕様書のドキュメンテーションの用途でNotionを利用しています。

##### プロジェクト管理での使用例
<img width="1180" alt="プロジェクト管理" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427952/5ed9d939-933c-7860-10d4-98bc544314d0.png">

# 良いところ

操作が直感的なので誰でも簡単に使うことができます。共同編集もストレスなく行なえるくらいスムーズです。
Googleスプレッドシートで管理していて、管理するデータが増えすぎて困っていたような人には最適だと思います。
エクセルやスプレッドシートのように表で管理したいけど、変更や表現は柔軟にしたい、といった用途であればNotionはおすすめです。

# まだまだなところ

ブロックという特殊な概念があるので、構造化しない純粋な文章を書くためのツールとしてはあまりおすすめしません。
また、ドキュメントの検索機能はかなり弱いですので、今後のアップデートに期待です。
サードパーティ向けのAPIが公開されていないのも残念ですが、現在開発中とのことですので、これも今後のアップデートに期待しましょう。

# はじめるには

https://www.notion.so/pricing

無料プランがあるので、登録すれば誰でもすぐに使い始めることができます。
無料プランにはプロジェクト全体で保存できるデータ量に制限があります。すぐには到達しない程度の制限ですが、本気で使い始めると1~2ヶ月で到達するくらいの制限量です。
また、無料では5MB以上のファイルをアップロードできない制限もありますが、この制限はほとんど気にならないかと思います。

# 公式ドキュメント

わからないことがあれば [Help & Support](https://www.notion.so/Help-Support-e040febf70a94950b8620e6f00005004) を見てみましょう
jQuery読み込み方法

jQueryの読み込み方法について
jQueryを使用するには、jQueryライブラリを使用する必要がある。

1.HTMLのheadタグ内にURLを記述する事で使用できるようになります。
2.jQueryは.jsファイルに記述します。
3.HTMLファイルに.jsファイルを読み込む記述を書きます。
<head>内にも書けるが</body>の直前に記述する事で表示速度があがるようです。

```html

<script src="ファイルのURL"></script>
</body>
```
Adafruit Trinket M0 > bootloaderモードに入らない > USB2.0で接続すると入る (ケーブルによる)

```txt:動作環境
ホストOS: Ubuntu 18.04 LTS
ボード: Adafruit Trinket M0 (以下、Trinket)
```


### 関連 

- [Adafruit Trinketで、USBケーブルによるトラブル](https://qiita.com/honeniq/items/2d56670472a8c7c452eb)

### bootloaderモードに入らない

上記のリンク先に説明があるように、リセットボタンを二回押すとことでbootloaderに入る。

実際に試したところ、bootloaderに入ってなかった。

自分の環境ではUSB2.0接続だとbootloaderに入ることが分かった。

- USB3.0: bootloaderに入らない
- USB2.0: bootloaderに入る

ドライバが関係するのかもしれない。

### ケーブルにもよる

USB2.0接続でもbootloaderに入るケーブルと入らないケーブルがある。

上記のリンク先の情報は正しいのだろう。

- USB2.0 + ケーブルA: 成功
- USB3.0 + ケーブルA: 失敗
- USB2.0 + ケーブルB: 失敗
- USB3.0 + ケーブルB: 失敗
-
GCPに登録すると、vscodeライクなクラウドIDEが無料でついてくる。

![alt](https://user-images.githubusercontent.com/26253721/39765058-e8d0eae4-531b-11e8-9305-4c852f269517.png)

Google cloud platform使っているそこのあなた。
無料のクラウドIDEを使えますよ。

使えるのは、vscodeを元に開発されている、theiaと言うエディタ。

GCPに登録してある人は、以下のurlをクリックしてみてください。
https://ssh.cloud.google.com/cloudshell/editor?cloudshell_git_repo=https://github.com/avajs/ava

以下のような画面が開かれます。
ショートカットも見た目もvscodeそっくり。（デザインはちょっとアレだけども）

<img width="1620" alt="スクリーンショット 2019-12-01 14.59.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183835/c8d8bd10-d141-afdd-4cbc-86c13cae5a67.png">

何よりすごいのが、無料なこと。
しかも、bash, docker, node.js, pythonなど一通りの開発環境がすでに揃っている上に、gcloudコマンドが使い放題。

通常起動は、以下のurlをクリック！
https://ssh.cloud.google.com/cloudshell/editor

## 個人的な感想
クラウドIDEの中では、準備もいらないのにダントツに使いやすい。
タプレットで、開発が出来るのは、割と快適。
ただ、時々もたつく（0.2秒ぐらい？）。
ちょっとした作業なら実務で使っても問題なし！
ありがとうgoogle!
誰にも教えたくない超カンタン分子系統樹作成術

# 系統樹推定
[ETE Toolkit](http://etetoolkit.org/)を使った超簡便な分子系統樹作成法を紹介します。

![NUP62.aa.fa.final_tree.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/57724/23c259d5-a789-c92a-9b25-52272b830db6.png)
(図: http://etetoolkit.org/documentation/ete-build/ より)

## 使用するツール
- BLAST (配列類似性検索)
- MAFFT (アライメント)
  https://mafft.cbrc.jp/alignment/server/
- trimAl (アライメントの修正 for 系統樹構築), optional
  http://trimal.cgenomics.org/
- RAxML (系統樹計算)
  https://sco.h-its.org/exelixis/web/software/raxml/index.html
- [FigTree](http://tree.bio.ed.ac.uk/software/figtree/) or [iTOL](http://itol.embl.de/index.shtml) (系統樹描画) 

## (通常の)大まかな流れ
1. 近縁種との系統関係を見たい対象生物種の16S rRNA配列(?)を配列データベース (16S rRNA，RefSeqやnr等)に対してBLASTによる配列類似性検索を行い，その結果から対象種が所属する属とかの他の種の配列を取ってくる. ※勝手にバクテリア16S対象にしてますが自身の配列にしてください。
2. 対象属じゃない奴の16S rRNA配列を取ってくる (系統樹のoutgroupにするため).
3. ↑1.2.の配列全部をFASTAファイルにまとめ，MAFFT L-INS-iによるマルチプルアライメントを行う．
4. アライメント結果をtrimAlを用いて系統樹構築用の調整をする (系統樹計算に際して，ギャップばかり等不向きな領域を取り除く)．この段階はoptionalで，やらなくても良い。
5. RAxMLを用いて最尤法系統樹を構築する．bootstrap値も計算する．
6. 構築した系統樹をFigTreeに読み込ませて描画する． またはiTOLで描画する (webベースだけどこっちのほうが綺麗).
7. たのしい (✿╹◡╹)v

## キーワード
系統樹の種類：無根系統樹 (unrooted tree)，有根系統樹 (rooted tree)，
系統樹の計算手法：NJ法，最尤法，ベイズ法

## 裏ルート
[ETE Toolkit](http://etetoolkit.org/)を使って一瞬で系統樹を構築する方法。
楽すぎてホントにビビりました。本当は有料の情報商材としたかったのですが，正直，めちゃくちゃ悩みました。そしてほんまに真剣に、真剣に考えて気づいたんです。それを今回特別に公開したいと思います。

PythonとAnacondaは入ってる前提です。
入ってない/怪しい場合→
macOS: [HomebrewのインストールからpyenvでPythonのAnaconda環境構築までメモ](https://qiita.com/aical/items/2d066801a7464a676994)
Linux: [Linux環境でのpyenvでPythonのAnaconda環境構築メモ](https://qiita.com/aical/items/126128c3e8916ad1988f)

### 環境構築
```bash
$ pip install ete3 #ETE toolkitのインストール
$ conda install -c etetoolkit ete_toolchain #必要なツールのインストール
```

### 系統樹構築
文法は

```bash
$  ete3 build -w ワークフロー名 -n 入力配列ファイル(アライメント前) -o 出力先ディレクトリ名 --clearall
```

例：

```bash
$  ete3 build -w mafft_linsi-none-none-raxml_default -n input.fasta -o output_tree --clearall
```

これだけです！これだけで配列のマルチプルアライメントもギャップ多数領域のトリミングも系統推定も全部やってくれます！！

このワークフローの文法はハイフン区切りで`aligner-trimmer-tester-builder`となっている。
例えば，ワークフローが
`mafft_linsi-none-none-raxml_default`
だったら，mafftのL-INS-iアルゴリズムでアライメントして，RAxMLで系統樹を構築する..となる。
もしラボのパイセン殿がアライメントはclustalを使うのじゃー！と仰るなら`clustalo_default-none-none-raxml_default`とすればclustal omega(clustal wの後継)を使ってアライメントしてくれる。
trimAl使った配列のギャップ領域トリミングの工程を入れたかったら，
`mafft_linsi-trimal01-none-raxml_default`とすれば良い。
系統樹推定の際にbootstrap値の計算も入れたかったら
`mafft_linsi-none-none-raxml_default_bootstrap`とする (少し時間はかかる)。

・たぶん`mafft_linsi-none-none-raxml_default_bootstrap`とするのが安牌かな (ごめんなさいごめんなさい)

使えるツールは

```bash
$ ete3 build apps
```

とすれば表示してくれる。[参考: Composing custom workflows](http://etetoolkit.org/cookbook/ete_build_workflows.ipynb)

### 結果ファイル
上記例の系統樹構築コマンドを実行すると，
`./output_tree/mafft_linsi-none-none-raxml_default`内に結果ファイルを色々と生成してくれる。
その中のファイルに色々あって，
・input.fasta.final_tree.png 
　→系統樹と，アライメントされた配列の模式図を合わせて表してくれるチャラい図
・input.fasta.final_tree.fa
　→アライメントされたfastaファイル
・input.fasta.final_tree.nw
　→推定された系統樹のファイル。これをFigTreeだったりiTOLに読み込ませると綺麗な図が出せる。

[参考情報: The ETE Cookbook](http://etetoolkit.org/cookbook/)
Webサイトにおける左端ぞろえについて～整列するだけで劇的にデザインが変わる～

ノンデザイナーズデザインブックに語られるような、デザインの基本に「整列」があります。

これは、レイアウト上の各要素の端の線（左から右に各文字だと左端が多い）をぴったりそろえて、線を意識させることで視覚的に効果を与えるデザイン手法です。

中央ぞろえを採用しない場合、基本的にはサイト内のすべての要素をそろえることになります。

## 最近のWebサイトにおける左端ぞろえの例

例えば[Guardianの書籍ブログ](https://www.theguardian.com/books/booksblog)。
こちらのサイトでは、6本の縦線に沿って各要素がきれいに配置されています。
洗練されていて、美しい印象を与えます。

揃えるときのコツは、ロゴやタイトルなど画面外の要素も一緒にそろえることです。
この場合は、"The Guardian"という文字の右端が写真の右端と揃っています。

## シンプルなWebサイトで視覚的効果を確かめよう。

黒と白だけのシンプルなWebサイトで視覚的な効果を確かめましょう。
（画像雑にとったので、画像サイズがそろってないという不手際すみません）

### 悪い例

![191201-3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140543/715f5181-fd37-984b-ef0f-f784795e5956.png)

ここまでガタガタにすると、もはや見ていて不快ですね。

### そろえた例

![191201-2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140543/9d5ed196-48cc-1c11-2fbf-ae8dace03247.png)

左端を揃えました。
他の要素が足りないのでまだ洗練された印象は受けませんが、多少きれいになりましたね！

## 両端ぞろえ、中央ぞろえについて

先ほどのGuadianの例にありましたが、縦のガイドラインは左端の一本だけでないことが多いです。
右端もそろっていたほうがきれいですし、複数の要素をまたいで一本の縦線が見えると美しくなります。

## 中央ぞろえとの併用について

中央ぞろえの要素と左端ぞろえの要素を併用する場合もあります。
個人的に好きでないので例は出しません。

左端ぞろえで強い印象を出しているのが和らぐため、よほどうまくやらない限りは、グダグダになります。

## ロゴの位置について

ロゴの位置はおおよそ３パターンあります。

* 画面左端
* 中央
* 何らかの画面内のガイドラインに合わせて配置

基本的にはこの中だと、画面内のガイドラインに沿わせて配置するのが安定です。
（Guadianのサイトほど高度なロゴ配置をするのは難しいです）

基本的には本文と左のラインをそろえる形になるかと思います。
画面の左端にロゴを置くパターンだと、要素の左端のラインをぶっ壊すことが多いです。
中央ぞろえは昔よく見ましたが、最近のサイトだとあまり見ません。
（おそらく左端揃えの効果を出したいからだと思われます）

## 揃えるのを崩す場合もある（ただし、線は意識させる）

左端揃えを崩しつつ、線を意識させているサイトできれいな例は、こちらの[ESTYLEのサイト](https://estyle-inc.jp/)です。
このサイトでは、左端揃えを意図的に崩す演出をしています。(Who we areのところです）

ただしこの場合でも、左端の線と文字の左端の線、この二本はくっきりと意識できるようになっています。

## 整列についてまとめ

基本的なことですが、要素の整列はWebデザインを劇的に改善させます。
縦線の見えないサイトはデザイン面でかなり不利になっているように思います。

基本的なことですが、整列についてでした。
Vue.jsでFont Awesomeを使う

## インストール
#### プロジェクトに移動してコマンドを打つ

```
npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/vue-fontawesome
```


#### 他に使いたいアイコンがあれば適宜追加する

* Regular

```
npm install --save @fortawesome/free-regular-svg-icons
```

* Light

```
npm install --save @fortawesome/pro-regular-svg-icons
```

* Brands

```
npm install --save @fortawesome/free-brands-svg-icons
```

## 使う
`src/main.js`に以下のように記述する

```js:src/main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./registerServiceWorker";

/**
 * 追加
 */
import { library } from "@fortawesome/fontawesome-svg-core";
import {
  faChevronRight,
  faChevronLeft
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

library.add(faChevronRight, faChevronLeft);

Vue.component("font-awesome-icon", FontAwesomeIcon);

/**
 * ここまで
 */

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");
```

アイコン全部を追加したい時

```js
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'

library.add(fas, far, fab)
```

## アイコンを表示させる
```vue
<span class="calender-header__prev">
  <font-awesome-icon icon="chevron-left"/>
</span>
```

でた☺️
<img width="398" alt="vue-icon.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/447438/609ff99c-e5b8-0548-d6e4-513967208d09.png">
MacにSourcetreeをインストールする

## Sourcetreeを使いたい
公式サイトからダウンロード
https://www.atlassian.com/ja/software/sourcetree

Bitbucketクラウドを選択
<img width="721" alt="スクリーンショット 2019-11-30 1.42.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/447438/1b16b240-71f1-664b-c1cd-5504fabdac60.png">

ブラウザで下記画面が立ち上がるので「アクセスを許可」をクリック
<img width="618" alt="スクリーンショット 2019-11-30 1.43.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/447438/5576f64b-4776-8ac0-bf0d-90a8f041c8fe.png">

登録完了 「続行」をクリック
<img width="721" alt="スクリーンショット 2019-11-30 1.43.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/447438/92d7161d-6e01-c5e5-da0e-b6211115149e.png">

「完了」をクリックするとSourcetreeが起動して使えるようになる
<img width="721" alt="スクリーンショット 2019-11-30 1.43.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/447438/06fbddef-3309-1b0c-59d0-cf74e21e878d.png">
カンファレンスに初めて行ってみた

# はじめに
2019年12月1日にあったphpカンファレンスに行った。

https://phpcon.php.gr.jp/2019/


恥ずかしながら、エンジニア4年目にしてまだカンファレンスとか行ったことなかったため、ちょっと緊張しつつも、参加したので、

- 初めて勉強会とかカンファレンスに行く予定の人
- 行ったことないけど、行ってみたい人

向けになればと思い、ちょこっと書く。


# カンファレンスとは
要は勉強会。大学の特別講義をイメージしてもらうのがいいかも。

今回のphpカンファレンスの場合、phpに関すること、開発環境について、システム設計に関わることなどphp関連のあれこれをテーマにした講演がある。


また、企業でブースを出しているところもあり、各企業のところに行けば、登壇した人からお話を聞くことも可能(っぽい。今回自分は用事があったため、行かなかった。)


# 行ってよかったこと
### 刺激になる
自分より全然できる人たちが、自分に向けて話してくれるので、勉強になる。また、自分の周りにいるエンジニアたちと話していると、どうしてもその世界に凝り固まってしまう。世界にはまだまだエンジニアはたくさんいるし、新しい考えを入れることで、勉強になる。

### 他の人も同じことで悩んでいて安心する
自分たちが立ち向かってる課題は他の企業でも同じことになってるんだなぁと思える。
その中でこんなことやってきました！と聞けるので、うちでもやってみようとなるんじゃないかなぁ。

### なんか色々もらえる
各企業がある程度採用目的でブースを出展しているところもあるため、なんか色々もらえる機会が多い。


# 準備しておいたほうがいいもの
- メモ：どういう風にメモをするかはわからないが、PCでも紙でもいいので、持っているほうが何かと便利。
- 荷物を入れる何か：なんだかんだ色々もらえるので、それをしまえるものがあるといいかも。
- Twitterアカウント：講演した資料とかをTwitterで公開してくれるから、あとから見る為にも、公演中に手元で資料見る為にもあると便利。

# おわりに
普段ただプログラミングをやっていると手に入れられないこととかを勉強できるので、機会を見つけて、参加してそれをまた発信するというをやってったほうがよさそうだなぁ

実際に聞いた講演はまた別の記事で。

①MVCとはなにか？
https://qiita.com/chanyone_0505/items/9b3c5cd9c410a1406a16

②「弁護士ドットコム」を作り続ける開発組織について
https://qiita.com/chanyone_0505/items/e551f2fdac69bced3900

③改善失敗して学ぶ、 レガシープロダクトに立ち向かうチーム作り。
https://qiita.com/chanyone_0505/items/7793ee256c0fdff5fc89
LinerRegressionでfitせずに回帰係数と切片から予測モデルを作成する

#はじめに
システムの都合上、scikit-learnで予測モデルを作らなければならないが、作りたい予測モデルが線形回帰モデルであり、回帰係数と切片が既に判明しているとしよう。既存の予測モデルをPythonで新たに構築したい場合などにありうるだろう。この場合わざわざ学習データを用意してfitメソッドを呼び出して学習するのもかったるいし、計算上の誤差などが出ることもある。であれば、回帰係数と切片から直接予測モデルを作ってしまえばいいではないかということで、できるかどうか調べてみた。結論として可能だったため、ここにメモっておく。

#環境
python 3.6
scikit-learn 0.21.2

#やり方
やり方はまさにそのままで、fitメソッドを使わずに、回帰係数と切片を直接予測モデルのオブジェクトに設定する。ソースは以下の通りだ

```ScikitLearnTest2.py
from sklearn.linear_model import LinearRegression
import numpy as np

def main():

    model = LinearRegression()
    model.coef_ = np.array([3, 4])
    model.intercept_ = 2
    print(model.predict([[3, 2]]))

if __name__ == "__main__":
    main()
```

上のソースでは説明変数が2個でそれぞれの回帰係数が3, 4であり、切片が2の予測モデルをfitメソッドを使わず作成している。
このモデルに対し、説明変数が(3,2)のデータのデータを与えると結果は、3 x 3 + 2 x 4 + 2 = 19　となるはずだが、実際にpredictの結果は、19となっており、正しく予測モデルが生成されていることが分かる。
ファンタスティック・Pythonの型

#はじめに
†ちゃお†…
この記事は"闇の魔術に対する防衛術 Advent Calendar 2019"の1日目の記事です。
明日は「寿司打の†限界†を目指して WebGLのOCR」と言うタイトルでL_e_k_oさんです。

# みんな集まれー！
みんなー！Pythonの型って調べたことあるー？
みんなはある変数の型を知りたいときってどうしてるかなー？
👂✋
そうだね！、type関数だね！
じゃあintの型って知ってるかな？
みんな、「えー型なのに型？」ってなってるよね？じゃあ調べてみよう！

```python
type(int)
```
このコードを実行するとどうなるかな？
多分、こんな結果が帰ってくるよね？

```
>>> type(int)
<class 'type'>
```
そう！intの型はtype型だったんだ！
同じようにfloatやstrもtype型だよ！

同じように次はrangeの型を調べてみよう！
みんな、「えー関数なのに型？」ってなってるよね？さあ、どうなるかな？

```
>>> type(range)
<class 'type'>
```
なんと！rangeはtype型を持ってるんだ！
じゃあ自前で関数を定義するとどうなるかな？

```python
def test():
    pass
type(test)
```
試しにやってみよう！

```
>>> type(test)
<class 'function'>
```
Pythonでは関数もtype型やfunction型のオブジェクトなんだね！

じゃあ最後にtypeの型を調べてみよう！
「流石にtypeは型を持たないでしょ」だって？試しに確認してみよう！

```
>>> type(type)
<class 'type'>
```
なんとtypeの型はtypeだったんだ！すごいね！

そう！Pythonは型や関数でも型を持ってるんだ！
でもなんでPythonは型や関数でも型を持ってるんだろう？
それはPythonは何でもオブジェクトだからなんだ！型や関数もオブジェクトだから型を持ってるんだね！

# 型の依存関係を知ろう！
じゃあこれらの型ってどういう関係なんだろう…

後で書く

# まとめ
**静的型付けのPythonをくれ**
Google Optimizeでオプティマイズエディタを読み込めない場合の対応

ハマったので共有します。
Chromeのバージョンがbetaだと、オプティマイズエディタが読み込めないようです。(2019年11月末現在)
その場合、対応としてはbeta版ではなくstable版をインストールすればOKです。

オプティマイズエディタが開けず原因不明という方は参考にしてください。自分はデザイナーから相談を受けて調べたという経緯だったので、苦戦しました。デザイナー使用OSはMacとのこと。

# 現象
- Google Optimizeのエディタを開こうとすると、以下のようなメッセージが表示される。
![go_error_message.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24994/13fe675f-d122-4f33-88a3-bd0d964d6ce5.png)

```
オプティマイズ エディタを読み込めませんでした。
「optimize.google.com」と「www.google-analytics.com」からのサードパーティ Cookie を有効にし、ネットワーク接続と CSP ポリシー (https://support.google.com/optimize/answer/7388531?hl=ja) に問題がないことを確認したうえで、もう一度お試しください。
```

- メッセージに従いサードパーティー Cookie を有効にしてもエラーメッセージが発生する
![setting_optimize_cookies.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24994/e388b91f-f99a-ec32-aba4-a82728ed1fb9.png)


# 対応
- Chromeのバージョンを調べたところベータ版だったので、通常版(stable)をインストールした


# 参考
- https://support.google.com/optimize/thread/20376018?hl=en


# 補足
プロダクトの事情で一時期Chromeのベータ版を使う必要があったようです。同僚デザイナーはそのままベータ版を使い続けていたとのこと。自分は転職したばかりでこのような背景を知らず、ベータ版であることを疑いもしませんでした。11/19にOptimizeのコミュニティに上記の書き込みがあり助かりました。
ShieldedVMとは何か

GCPには[Shielded VM](https://cloud.google.com/shielded-vm/)という機能があります。あまり使っているという話は聞きませんが、簡単に使えてセキュリティ強化ができる機能です。
# 使い方
使い方は簡単で、対応したOSイメージを選択し、Shielded VMを有効化して起動するだけです。オプション費用はかかりません。
2019年12月2日現在対応しているイメージは以下の通り。

- CentOS 7
- RHEL 7
- Container Optimized OS 6.9, 7.3, 7.7, dev, beta, stable
- Ubuntu 18.04
- Windows Server 2012r2, 2016, 1803, 1809, 2019

[Images](https://cloud.google.com/compute/docs/images)

GCP Consoleから起動する場合は、SecurityタブからShielded VM機能を有効化します。
![ShieldedVM Menu.png](https://qiita-image-store.s3.dualstack.ap-northeast-1.amazonaws.com/0/19807/14f626de-294e-b55e-80fb-5f5aa58a614c.png)

Shielded VMを有効化すると、通常のBIOSではなくUEFI経由で起動するようになるので、`dmesg`の実行結果にもUEFI経由で起動したというメッセージが出力されます。

```
[    0.000000] efi: EFI v2.70 by EDK II
[    0.000000] efi:  ACPI=0x259fa000  ACPI 2.0=0x259fa014  SMBIOS=0x259cd000  MEMATTR=0x24d0c018  TPMEventLog=0x2406d018
[    0.000000] secureboot: Secure boot enabled
```

# Shielded VMの目的
Shielded VMの目的は大きく分けると

- 各インスタンスのブートローダーやOSの改ざん検知、システムの整合性確認
- APIリクエストなどが自分たちのインスタンスで行われたことの検証

の二つです。

前者はSecure Boot, Measured Bootによってコンポーネントの改ざんを検知することで、ルートキットなどによるブートローダーやOSなどへの攻撃を防止できます。こちらは対応しているOSイメージで設定を有効化するだけで利用できます。

後者はTPMに格納されているEndorsement Keyと呼ばれる鍵のペアを利用します。このEndorsement KeyはTPMごとに固有で、秘密鍵は取り出せませんが、公開鍵は[GetShieldedInstanceIdentity API](https://cloud.google.com/compute/docs/reference/rest/v1/instances/getShieldedInstanceIdentity)で取得可能です。

リクエスターは秘密鍵でリクエストを署名し、APIサーバではGetShieldedInstanceIdentityで取得した公開鍵で検証することで、リクエスターが正当なサーバなのか検証できます。

# まとめ
Shielded VMは設定の手間も少なく、サーバのマルウェア対策の一つとして有効で、マイクロサービス間の攻撃対策としても利用できるので、ぜひ有効にしてみましょう。
Aws の Ubuntu 20.04 を 21.04 にアップグレード

AWS の Ubuntu 20.04 を 21.04 にアップグレードする方法です。

設定ファイルの変更

```bash
sudo vi /etc/update-manager/release-upgrades
```

>>次のように変更します。

>>```text:/etc/update-manager/release-upgrades
Prompt=normal
```

リリースアップグレード

```bash
sudo do-release-upgrade
```

再起動

```bash
sudo shutdown -r now
```

更新できたことを確認する。

```text
$ cat /etc/os-release 
NAME="Ubuntu"
VERSION="21.04 (Hirsute Hippo)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 21.04"
VERSION_ID="21.04"
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
VERSION_CODENAME=hirsute
UBUNTU_CODENAME=hirsute
uchida@ip-172-31-37-102:~$ cat /etc/os-release 
NAME="Ubuntu"
VERSION="21.04 (Hirsute Hippo)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 21.04"
VERSION_ID="21.04"
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
VERSION_CODENAME=hirsute
UBUNTU_CODENAME=hirsute
```
CentOS7にフロントエンドエンジニアに必要な最小限の環境を整える

#前提

@Vue/cliの環境を構築する

後で、ansible化するつもりで、最低限必要なパッケージなのをメモしたもの

#環境

virtualboxでcentos7-minimamをインストール
ネットホストオンリーネットワークを作成したVMにアタッチしておく

以下は、CentOS7でのIPアドレスなどの設定。FWで8080開けておく

```sh
# nmcli connect modify enp0s3 ipv4.addresses "192.168.137.10/24"
# nmcli connect modify enp0s3 ipv4.gateway "192.168.137.1"
# nmcli connect modify enp0s3 ipv4.method manual
# nmcli connect modify enp0s3 ipv4.dns "192.168.137.1"
# nmcli connection modify enp0s3 autoconnect yes
# nmcli connect down enp0s3
# nmcli connect up enp0s3
# sudo firewall-cmd --add-port=8080/tcp --zone=public --permanent
```

Windowsのネットワーク設定で、ネットワークの共有をして、ホストオンリーネットワークが外にでていけるようにする（説明省略）

# Centos7でのソフトインストール

```
$ sudo yum install epel-release
$ sudo sudo yum install python3
$ sudo sudo yum install npm
```

この状態でサーバをshutdownさせてスナップショットを作成しておく。

# Vueインストール

.bash_profileに追加
```
export N_PREFIX=$HOME/.n
export PATH=$N_PREFIX/bin:$PATH
```

```
$ source ~/.bash_profile
$ sudo npm install -g @vue/cli
$ sudo npm install -g n
$ n lts
$ cd
$ mkdir web
$ cd web
$ vue create my-app
$ npm run serve
```

LocalFowardの設定をしておくと、PCのブラウザーでhttp://localhost:8000 参照するとCentOS7のlocalhost:8000に接続できる

```config:.ssh/config

Host cent7
    HostName 192.168.137.10
    User xxxx
    LocalForward 8000 localhost:8000
```
【Rails】Couldn't find [model_name]without an というエラーが出た時の解決策

![Screen Shot 0001-12-01 at 14.25.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/212678/88e7aac3-34b7-d388-1255-3d6add4afddf.png)

こんなエラーが出た

# 解決策
`rails routes`でルート確認
config/routes.rbで確認


私の場合、config/routes.rbの
`resources :consignment` が
`resource  :consignment`になってました

[rails route](https://railsguides.jp/routing.html)
Google Blocklyのワークスペースに置いたブロックの保存と読み込み

#Google Blocklyのブロックを保存、読み込み
Google Blocklyを基本として作られた、scratch3.0では「保存、読み込み」ができます。Google Blocklyでも「ワークスペースに置いたブロックの保存、読み込み」ができないか探ってみました。
https://ytakata69.github.io/blockly-processing/
のコードを読んで理解しました。

#Google Blocklyのワークスペースに置いたブロックの取得
```js
 var xml = Blockly.Xml.workspaceToDom(workspace);
 var myBlockXml = Blockly.Xml.domToText(xml);
```

myBlockXml がワークスペースに置いてあるブロックの値になります。
↓値の例

```xml
<xml xmlns="https://developers.google.com/blockly/xml">
<block type="block_web_program_start" id="pz]#L40/)?}~AsE3`*6P" x="10" y="10">
<next>
<block type="block_web_text" id="Y,]0_5:qHw7FdY@Ulr9d">
<field name="my_web_text">ここに記入</field>
</block>
</next>
</block>
</xml>
```

置かれているブロックの種類と座標が、xmlで表記されています。
この myBlockXml の値をファイルに保存してください。

#Google Blocklyのブロックをワークスペースに再構築
保存してあるブロックのxmlデータを読み込んで、myBlockXmlに入れます。
ワークスペースを初期化してから、ブロックを再構築します。

```js
  // ブロック再構築
  var xml = Blockly.Xml.textToDom(myBlockXml);
  workspace.clear();
  Blockly.Xml.domToWorkspace(xml, workspace);
```

ファイル読み込みについては、下記のページを参考にしてください。
https://qiita.com/kerupani129/items/99fd7a768538fcd33420
dom-to-imageをAAに対応させた話

こんにちは@scrpgilです。

本記事は、アスキーアート総合アドベントカレンダーの1日目の記事になります。
この記事では、HTMLを画像化できるライブラリdom-to-imageをAAに対応させたので、その紹介です。

クライアント側で処理が完結するので、サーバーもいらないし、余計な通信もないので高速です。❤️とかのHTML特殊文字にも対応してますし。

*この記事で扱うアスキーアートは、モナー系のアスキーアートです。shift-jis artとも呼ばれるらしいです。
![https___qiita-image-store.s3.amazonaws.com_0_165335_a1c2879c-48f6-4b14-ffd0-ee923b3ac544.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165335/fd86c9c9-a45f-5d95-e777-a0053df698de.jpeg)


## dom-to-imageとは
HTMLを画像化するライブラリです。仕組みは単純で、HTMLを一度SVGに変換→その後Canvasに描画して画像(jpeg、png)に変換できるライブラリです。

シンプルだし、多くのブラウザで動きますがiPhoneのSafariでimgタグを描画しようとすると、クロスオリジンに引っかかることもあるので、注意しましょう。

GitHub: https://github.com/tsayen/dom-to-image



## dom-to-image-more-sjis-artとは
ざっくり、dom-to-imageをフォークしたdom-to-image-moreをフォークしてaahub_lightフォントを埋め込んだものです。dom-to-imageとの差分は以下。

* AngularのAOTコンパイルで落ちない
* aahub_lightフォントが埋め込んである。

GitHub: https://github.com/asciiartdevelopers/dom-to-image-more-sjis-art


フォント埋め込んであるあたり、極めて雑な変更ですが、動くのでまあ良いでしょう。

## 使い方
まず、次のスクリプトをheaderで読み込みましょう。

```html
<script src='https://unpkg.com/dom-to-image-more-sjis-art@2.8.2/src/dom-to-image-more.js'></script>
```

画像化したいアスキーアートを描画します。

```html
<div class="mona" id="mona">
　 ∧＿∧
　（　´∀｀） 　
　（　　　　）
　｜ ｜　|
　（_＿）＿）
</div>
```

次にCSSを実装します。このライブラリはaahubフォントした対応していないため、font-familyはaahubで記述を...。

```css
.mona {
  font-family: "aahub";
  white-space: pre-wrap;
  font-size:16px;
  line-height: 17px
}
```

最後に、スクリプトを実行します。

```js
var node = document.getElementById('mona');

domtoimage.toPng(node)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });
```

そうすると、次の画像のようにAAが画像化されます。
![Screen Shot 2019-12-01 at 14.16.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165335/cac876b1-c28c-98da-e561-bf9cf057d577.png)


サンプルをcodepenで公開してます。
https://codepen.io/scrpgil/pen/YzPKJXZ

このライブラリは、npmで公開しているので、npm installで導入することもできます.

```sh
npm install dom-to-image-more-sjis-art
```

importする時は、次のように記述します。

```js
import domtoimage from "dom-to-image-more-sjis-art";
```

このライブラリ自体は、aahubで利用しているので、興味ある人は見に来てください。
各種AA長押しからの画像化、またはエディタの画像化機能で利用しています。

[aahub - スマホ対応AAビューワーサイト](https://aahub.org/)

## まとめ
昨今、AAをTwitterに投下したりと画像化する機会は増えてます。
サーバ側で画像化するのもありですが、負荷分散を考えるとクライアント側でできるなら、その方がよいですよね。
クライアント側だとHTML特殊文字への対応も楽ちんですしね。

HTML特殊文字の例：https://codepen.io/scrpgil/pen/NWPKObO

それでは。

## その他の画像化方法
過去のアスキーアートを画像化する方法の記事です。
[AAを画像に変換する(Python編)](https://qiita.com/scrpgil/items/1b227b309113d1381b3a)
[GolangでMLTを画像に変換する](https://qiita.com/scrpgil/items/c9b949d8950c233022da)
[ズレずにAAを表示するためにテキストを画像にするライブラリ色々](https://qiita.com/scrpgil/items/edd8d749ffcd5e53b000)
【Rails】add_indexについて

# indexってなんだ
特定のカラムからデータを取得する際に、テーブルの中の特定のカラムのデータを複製し検索が行いやすいようにしたもの。

Usersテーブルのnameカラムにindexを貼ることで、アルファベット順にnameを並べ替え検索しやすいようにしてくれる


# メリットとデメリット
メリット:データの読み込み・取得が早くなる。
デメリット: 書き込みの速度が倍かかる

ある程度多くのデータを格納するテーブルの、格納される値がその値がそれぞれ異なるようなカラムの中で、検索がよく行われるカラムに対して春と効果的
Django2 画面追加のフロー

# 前提
- Django 2.x

初心者向け。実践では大体こんな理解が良いかもという説明です。

# Django 2.x で画面を追加するフロー
大きく２ステップで考えるのが良いです。

## ステップ1
平行で進められる２つのフローで考えられます。

1. フローＡ
  1. モデルを作成
  2. フォームを作成
1. フローＢ
  1. テンプレートを仮で作る
  2. ビューを仮で作る
  3. URLディスパッチャにビューを登録する

"仮で作る"というのはフローＡに影響されないように考えればOKです。

![画面追加フロー_01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542213/ad21107f-0c25-f6cf-4a40-256e421fc4c9.jpeg)

## ステップ2
ステップ1で作成したテンプレートとビューにモデルとフォームを組み込んでいきます。
この時点ではrunserverで画面を表示して、更新しながらインクリメンタルに開発するのが良いです。

![画面追加フロー_02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542213/13fa0698-8ee3-c69e-edc6-2918469d4a6f.jpeg)

フォームが不要な場合や、静的ファイルやテンプレートタグが必要、といったこともありますが、
上記の考えをもとに応用できると思います。
firebase extensions の resize images を使っているのですが

なんか色々爆弾を踏むので紹介します。
といっても２個ですけど。

# 直ってない爆弾（0.1.3）
ファイル名が消えます。
具体的には、

```js
firebase.storage().ref().child('filename').put(imageFile)
```

こんな感じで拡張子がない状態で file を upload すると、

<img width="1147" alt="Screen Shot 2019-12-01 at 13.31.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39090/0fca13ba-dc78-be38-8722-d0d08b2a9b05.png">

こんな感じでリサイズ後のファイルが生成されます。
たぶんこの辺が怪しい。

[extensions/storage-resize-images/functions/src/index.ts](https://github.com/firebase/extensions/blob/master/storage-resize-images/functions/src/index.ts#L64)

# 直った爆弾（0.1.1）
修正されたのでスクショとかないんですけど、
0.1.0 では、保存先のディレクトリ（Cloud Storage path for resized images）を指定すると、
無限にファイルをリサイズし続ける爆弾もありました。

[extensions/storage-resize-images/CHANGELOG.md](https://github.com/firebase/extensions/blob/master/storage-resize-images/CHANGELOG.md)


# 終わりに
firebase は良いぞ。
現場からは以上です。
ASK-CLIのask deployで"request must be smaller than 69905067 bytes for the UpdateFunctionCode operation"というエラーが出た

## デプロイ失敗したときの様子

Alexaスキル開発時、VSCodeにてASK-CLIでask deployしたところ、以下のようなメッセージが出てデプロイに失敗しました。

```
[Error]: Lambda update failed. Lambda ARN: arn:aws:lambda:ap-northeast-1:xxxxxxxxxxxx:function:xxxxxx
Request must be smaller than 69905067 bytes for the UpdateFunctionCode operation
```

↓VSCodeのターミナルの様子
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354808/8a084d7d-d476-5f85-066e-ebe3e87bcaec.png)

## 原因調査

調べてみたところ、どうもlambdaにデプロイするファイルが50MBを超過したことが原因では？という結論に至りました。

[コードログ - serverless-framework-Serverless Framework：UpdateFunctionCodeオペレーションのリクエストは69905067バイトよりも小さくなければなりません](https://codeday.me/jp/qa/20190925/1621415.html)
> ドキュメントによると、パッケージサイズは50 MB未満である必要があります
https://docs.aws.amazon.com/lambda/latest/dg/limits.html

ソースファイルだけでそんなに容量かかるかな？と思いつつも、エクスプローラーを開いて改めて確認してみたところ、以前ask deployした際にzip化まで成功したもののデプロイで失敗したときのzip(?)が複数残っていました。
どうもこのファイルが放置されていたおかげでask deployするたびにファイル容量が肥大化し、50MBを超えてしまったようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354808/7db5debe-7259-75d2-b67f-364a0bde42d2.png)

## 対応内容

これらのゴミ(上記キャプチャで色付きになっているzipファイル群)を削除し、改めてask deployしたところ、正常にlambdaへアップロードすることができました。


## 出典
[serverless-framework-Serverless Framework：UpdateFunctionCodeオペレーションのリクエストは69905067バイトよりも小さくなければなりません](https://codeday.me/jp/qa/20190925/1621415.html) - [コードログ](https://codeday.me/jp/)
slickのセンターモードがiOSで機能しない現象

# TL; DR
`centerPadding: ''`と書くだけで解消するっぽい。

``` JS
$('.slides').slick({
    //slickのオプション設定
    responsive: [  
        {
            breakpoint: 768,
            settings: {
                centerMode:true,
                centerPadding: ''
            }
        }
    ]

});
```

PCブラウザでもAndroidでも問題なく動いているのに、iOSだけずれる現象がここ最近何度か起こっていたので色々試した結果これに行きつきました。
スライド間のマージンをCSSで設定していたのが原因？　そっちでは調整しないほうがいいのかな。。
とりあえず見た目が崩れて困ったら最初に試してみるとよさそう。

便利で素晴らしいプラグインなんですけど、これといいフリック効かない問題といいiOSでちょいちょい不具合が発生して無駄に頭を悩ませることもしばしば。。
hugoでmarkdown(.md)にhtmlを書いても削除される時の対処法

hugo v0.6から、markdownパーサが変わったようで、.mdにhtmlを書いても削除されます。

`russross/blackfriday -> yuin/goldmark`
 
configにて以下のオプションを有効にすることで回避できます。

```sh:config.toml
[markup.goldmark.renderer]
  unsafe = true
```
【PHP】PHPでREPLを使うにはphp -a

# 実際の動作

```terminal:ターミナル
~ $ php -a
Interactive shell

php > $var = "JavaScript";
php > echo $var;
JavaScript
```

## 対話形式で実行結果を見られる
デバッグとか、ちょっとしたサンプルコードの動きを見るとき
いちいちphpファイルに書くのは面倒ですよね。
そういう時、このようにすればすぐに結果が見られます。

## PHPでは使っている人が少ない？
あまりPHPでREPLを使っている人は多く無い印象。
私の知識不足かもしれませんが。
便利なので非常にオススメです。
【Python/機械学習】なぜなにDeep Learning #1 パーセプトロン・ニューラルネットワーク

# はじめに
機械学習エンジニアになるために、学習の記録を残す。コンスタントに書いていく。

今回は、ディープラーニングの基本となるパーセプトロンとニューラルネットワークを説明していく。


###注意
この記事は「ゼロから作るディープラーニング」(著:斎藤 康毅氏)を読みながら学習してきたメモである。
内容を鵜呑みせず、飽くまで参考程度に読んでいただきたい。(指摘・質問は大歓迎です。但し、優しい言葉に限る。)
[リンク:ゼロから作るDeep Learning](https://www.oreilly.co.jp/books/9784873117584/)

# 目次
・パーセプトロンとは
・ニューラルネットワークとは

#この記事の

# パーセプトロンとは
複数の入力に対して、一つの出力を返すアルゴリズムである。
論理回路のAND・OR・NANDのようなものだ。
ニューラルネットワークもといディープラーニングは、このアルゴリズムをベースに作られている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/432868/9c27a457-49ab-6e54-0aad-bbade87c726a.png)


```Python
# 入力数2のAND回路をパーセプトロンで書く
def AND(x1,x2,bias=0.5):
    tmp = w1*x1 +w2*x2 - bias
    if tmp <= 0:
        return 0
    elif tmp > 0:
        return 1   
```
出力に影響する変数は、入力値・重み・バイアスである。これらをパラメータと呼ぶ。
ニューラルネットワークは、パラメータを調整して学習させていく。


# ニューラルネットワークとは

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/432868/04ef4e89-2e31-fe7c-c917-45a60fd7360a.png)
図を見てみると、多層パーセプトロンと変わらないように見える。
だが、パーセプトロンとの大きな違いがある。

####非線形の活性化関数を使うこと

###活性化関数とは？
入力信号(入力値・バイアス・重み)の総和が閾値を境に出力値が変わる。(発火する)
パーセプトロンも何も変わらない活性化関数を持っているというが、
ニューラルネットワークでは分類問題や回帰問題によって活性化関数の種類も変わる。

###なぜ活性化関数が必要なのか
活性化関数があることで、より多くの様々な値を出力できる。
入力値・重み・バイアスを調整するだけでなく、関数を変えることで出力値を変えられるようになる。

###非線形関数
分類問題・回帰問題だろうと、突き詰めると機械学習の目的は、精度をよくすることだ。
そのために、重みやバイアスを調整しながらパラメータを最適な値を見つける必要がある。
その微調整には、線形関数では解決できない。(少し値を変えるだけで大きく変わってしまうため)
非線形関数を利用することで、それを解決できる。
正社員派遣のエンジニアによるエンジニアのためのサークル活動でどんなことをしているか

# はじめに
この記事は[ぷりぷりあぷりけーしょんず Advent Calendar 2019](https://qiita.com/advent-calendar/2019/ppap)の1日目の記事です。  

ぷりぷりあぷりけーしょんず（以下PPAP）は[株式会社ラクスパートナーズ](https://www.rakus-partners.co.jp/)で活動しているエンジニアによるエンジニアのための技術系サークルです。
メンバーはエンジニア歴1年目〜5年目くらいの若手エンジニアでWebアプリ、インフラ、クラウド、MLと幅広いエンジニアが所属しています。  
正社員派遣エンジニアとして働いている性質上、自社のエンジニアとの交流が少ないためキャリアプランを考えるのが難しかったり、中にはスキルアップのモチベーションが続かなかったりする人もいます。
そのような環境の中でサークル活動を通してエンジニア同士が繋がりを持つことで、
技術トレンドの共有やキャリアビジョンを相談し合うことでより良いエンジニアライフを送るため、様々な活動を行なっています。

この記事ではサークルとしてどのような活動を行なっているかの紹介をしていきます。
また、この記事からエンジニア派遣を行う企業で課題となりやすい社内のエンジニア同士のコミュニケーションの難しさや、自社への帰属意識の維持の難しさへの解決の糸口になれば幸いです。

# 活動内容

## ぷりもく会
所謂もくもく会です。自社のカフェスペースに帰社しそれぞれの好きな学習、開発に取り組んでいます。
業務後ということでなかなか時間は取れませんが、活動の最後には今日自分が何に取り組んだかの小さなアウトプットを行う、というルールがあります。が、なかなかうまく実施された実績は少なく、ブラッシュアップ要素の多い活動です。

## ぷりばっしゅ
一般的に言うビアバッシュは社内の公式イベントとしても行われているのですがエンジニア歴・部署を跨いだLTと言うこともありターゲット層が曖昧で、実際のところ集まりが悪くなりがちです。
そこでサークル活動では規模を小さく、テーマも「技術編」「サービス編」に絞り、サークル内だけで周知することで技術に関心が高いエンジニアが集まりやすくなります。
また社内でのビアバッシュでは発表者が一方的に発表して終わりがちになるのに対し、サークルという閉じた空間で行うことによってインタラクティブなLTになりやすく、参加者全員のキャッチアップに繋がります。

## ぷり合宿
年に2回、夏と冬に開発合宿に行っています。
開発合宿ではテーマをもとにハッカソンを行うのが主な目的です。
ちなみに今年テーマとして取り扱ったのは冬は「Slack APIを使ったオモシロイもの」、夏は「AWS Lambdaを使ったオモシロイもの」でした。
合宿の詳細記事はこのアドベントカレンダーで紹介する予定です。


# Slackの活用

## timesチャンネル
Slackにサークルメンバー個々人のtimesチャンネルを採用しています。
自身の学習のアウトプットや、技術ニュースのピックアップ、また派遣先のプロジェクトでハマっている箇所を知見のありそうな人に投げかけてみたりと様々な用途で使われています。
小さなアウトプットを続けることによってスキルが身につきやすく、自社のエンジニアが学習しているのが目に見えるため他のエンジニアのスキルアップのモチベーション維持にも繋がっています。

## Qiitaの人気記事をピックアップ
今年の冬合宿であるチームが開発したQiitaの人気記事TOP3を1日3回流すチャンネルがあります。
自身からでは追いにくい技術トピックが日々流れてくることによってモダンな技術のキャッチアップに繋がります。

## SREチーム
現在サークルのメンバーは35人ほど。活動の内容も増えてくれば運営していくコストも高くなり、個々人での活動はあれど全体としての活動が疎かになりがちです。
そこで活動改善チームとして有志でSREチームを発足しています。
サークル活動として自動化できる箇所を自動化していき、トイル撲滅を目的としています。

# 終わりに
サークルの活動としては以上がメインな活動となります。
今回取り上げた活動以外にもメンバー間でアプリを作っていたり、筋トレしたり、ゲームしたりとサークルを通していろんな形で繋がっていたりしています。
エンジニア派遣の会社ではエンジニアのサポート体制をとっていても中々手の届かない箇所があると思いますが、エンジニア同士だからこそサポートし合える箇所が多くあり、自身の健康的なエンジニアライフを守るために今ではサークル活動は欠かせないものとなっています。


明日は@siminori0612さんの記事になります！
いいね！（簡易アンケート）プラグイン EX Ver5

***最新バージョンへのバージョンアップ時の注意事項***
***APIトークンを利用している場合はプラグイン設定の再保存が必要です。***

developer networkで公開されている[いいね!プラグイン](https://developer.cybozu.io/hc/ja/articles/203711920)を改修し複数の機能を追加しました。
今回改修した ***いいね！（簡易アンケート）プラグイン EX*** を利用すると、下記のような簡単なアンケートにも利用できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480759/d9e455d9-68bf-14b1-3966-78313a77d74d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480759/4ee03655-0a75-6bc6-92ff-eb93d4a963d1.png)

# 追加機能
## 1. 複数リアクション対応
![設定画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480759/1424c1c6-9cf3-4e33-a36d-dc9c0ccf1510.png)


- リアクションを複数配置できます。
- 「良い」、「悪い」などのラベルを自由に設定できます。
- スペースフィールドに表示することにより、kintoneのバージョンアップで動作しなくなる可能性を低減しています。 
  - developer networkのいいねプラグインはdeveloper network非推奨のDOM操作を利用しています。
  - 本プラグインではDOM操作が必須となる一覧画面でのリアクションは実装していません。

## 2. モバイル対応
![モバイルアンケート.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/480759/e5236fec-2ee5-e7c6-65ef-fce5b16d1b56.png)

- モバイルでもリアクションできます。

## 3. 更新権限なしでもリアクション可能
- 設定画面でAPIトークン(要レコード編集権限)を設定すると、APIトークンを使用してレコードを更新できます。
- これによって編集権限がないレコードでもリアクションできます。（閲覧権限は必要）

# ダウンロード
[vote-plugin-ex-ver5.plugin.zip](https://github.com/potaracom/vote-plugin-ex/releases/download/v5/vote-plugin-ex-ver5.plugin.zip)をダウンロードしてご利用ください。


# おわりに
ほかに新デザイン版 条件書式プラグインも改修しています。
よかったらこちらも見てください。
https://qiita.com/potara/items/551cd1f13f5f248322ce

## 更新情報
- 2021/11/20 v5
プラグインにクライアント証明書を設定することで、APIトークン利用&セキュアアクセス環境からの利用に対応しました。

- 2020/12/25 v4
「セキュアアクセス環境からは利用できない」という注意書きを追加しました。

- 2020/12/6 v3
アイコンの種類を増やしました。

- 2019/12/08 v2
IE11で画像が表示されない問題を修正しました。

- 2019/12/03 v1
MySQLに対応したogr2ogr(GDAL)をインストールする方法まとめ

※本記事は[RDBMS-GIS Advent Calendar 2019](https://qiita.com/advent-calendar/2019/rdbms_gis)の1日目の記事です。

# はじめに

現時点(2019/12/1)では、MySQLにシェープファイルをインポートするにはogr2ogrというGDALというライブラリに含まれるコマンドラインツールを利用するのが一般的です。

ただ、GDALをインストールする方法がいくつか存在するため、慣れていないと「どれを使うのが良いの？」と戸惑います。本記事は「これからogr2ogrを使ってMySQLにシェープファイルをインポートしたい」という人用におすすめの方法をまとめておきます。

PostGIS使いもシェープファイル以外のファイルをシェープファイルに変換する際等にogr2ogrを使えるので有用かもしれません。

GDALインストール方法の選基準は下記です。

* MySQLドライバが有効な状態でビルドされていること。
    * MySQLのインポートに必要であるため。
* 最新(に近い)ソースでビルドされていること。
    * MySQLドライバの開発スピードが早いため。(古いと致命的なバグもある)

ogr2ogrを使ったシェープファイルのインポートについては本記事ではあまり説明しません。本記事ではあくまでGDALのインストール方法について解説します。

ogr2ogrを使ったMySQLへのシェープファイルのインポート方法については下記記事を参照して下さい。

https://qiita.com/miyauchi/items/c8349e1e6339bdf26a20

# 結論

公式で配布されてるDockerイメージ使うのが最も手っ取り早いです。

https://github.com/OSGeo/gdal/tree/master/gdal/docker

ただ、ogr2ogrのためだけににDockerを使うのはオーバーヘッドが大きすぎるのも事実です。

ので、各プラットフォーム毎でいえば下記もおすすめです。

* Windows
    * OSGeo4W
    * GISInternals
* Linux
    * ソースからコンパイル

以降はそれぞれの方法についての解説です。

# Dockerイメージを使う(Windows/Mac/Linux共通)

[Dockerエンジン](https://www.docker.com/)のインストールや使い方については省略します。

GDALのDockerイメージは下記で配布されています。

https://github.com/OSGeo/gdal/tree/master/gdal/docker

まずはイメージを準備しましょう。いくつかイメージが用意されていますが、使うのは`osgeo/gdal:ubuntu-full-latest`である点に注意して下さい。(MySQLドライバが含まれるため)

```
 $ docker pull osgeo/gdal:ubuntu-full-latest
```

コンテナを起動します。ここではホストの/home/ディレクトリをマウントしています。

```
 $ docker run -v /home:/home -it --rm osgeo/gdal:ubuntu-full-latest
```

コンテナに入ったら、こんな感じでシェープファイルの文字コードを変換したり、MySQLにインポートしたりできます。

```
 root@43dd82bfeb90:/# cd [シェープファイルが格納されたディレクトリ]
 root@43dd82bfeb90:/# ogr2ogr -f "ESRI Shapefile" -lco ENCODING=UTF-8 -oo ENCODING=CP932 [変換後のシェープファイル名] [変換前のシェープファイル名]
 root@43dd82bfeb90:/# ogr2ogr -f "MySQL" "MySQL:[MySQLのデータベース名],host=[MySQLのホスト名],user=[MySQLのユーザ名],password=[MySQLのパスワード]" [変換後のシェープファイル名]
```

# Windows

Windowsの場合はOSGeo4WやGISInternalsで配布されているインストーラを使うのがお手軽です。

OSGeo4Wを使う場合は、インストールするGDALのバージョンが選択できるので、最新版を選ぶと良いでしょう。
どちらもMySQLドライバが有効な状態でビルドされているようです。

* OSGeo4W
    * https://trac.osgeo.org/osgeo4w/wiki/OSGeo4W_jp
* GISInternals
    * https://www.gisinternals.com/

# Linux

ソースからのコンパイルについてはこちらの記事で紹介しています。MySQLを有効にするのを忘れないようにしましょう。

https://qiita.com/miyauchi/items/c8349e1e6339bdf26a20

OSのパッケージリポジトリに登録されているGDALを使うと、本記事執筆時点ではバージョンが古かったりMySQLドライバが有効でなかったりするのでおすすめしません。

# Mac

未調査です。私はDockerを使っています。

# まとめ

shp2mysqlみたいなコマンドが早くできたら、わざわざこんな面倒な作業しなくて済むんですけどね。

という機能追加リクエストも出ているので「Affects me」すると優先順位が上がるかもしれないのでおすすめです。

https://bugs.mysql.com/bug.php?id=90023
WSL+VcXsrv+sshでX11のフォワード

# WSL+VcXsrv でX11 forwading

通常、リモートのX11アプリのウィンドウをssh経由でローカルに出すには、-Xオプションを使えばよい(圧縮の-Cとかは環境と人によるので省略、sshd_configの設定やらなんやらは他にいろいろ記事があるのでそちらも省略)。

```shell-session
ssh -X remote-addr
```
が、WSLでVcXsrvを使っているとこの方法では次のようなエラーが出てうまくいかない。

```shell-session:エラーメッセージ
connect /tmp/.X11-unix/X0: No such file or directory
xterm Xt error: Can't open display: remote-addr:10.0
```

理由は、`-X`オプションがリモートの`localhost:(port#)`をローカルの`unix:0`に転送しようとするから。VcXsrvはWSL環境外なので、unixドメインのソケットを作っていないため、リモート側でデフォルトに設定されるディスプレイ10(ポート6010)をローカル側の`/tmp/.X11-unix/X0`に接続しようとしてエラーになる。

で、とりあえずあまり美しくはないけれど、以下のようにするとできる。

```shell-session:ローカル
ssh -R 6000:localhost:6000 remote-addr
```
```shell-session:リモート
export DISPLAY=:0
```
これは単純に転送先をローカルのtcp/6000にしただけで、冷静に考えれば思いつくのだけれど、ちょっとハマったのでメモ的に残しておこうかと。
使用するディスプレイ/ポートを変更する場合は以下のようにすればよい。

```shell-session:ローカル
ssh -R 6005:localhost:6000 remote-addr
```
```shell-session:リモート
export DISPLAY=:5
```

要するに普通のポートフォワードとXのディスプレイ設定ですね ;-)
`VcXsrv`側で使用するポートが変わる場合は、`localhost`の後のポートをそちらに合わせればよい、と。
Junit5の整理した書き方

過去に実践していたJunit5のテストクラスの書き方を備忘録として書き起こします。
皆さんの参考になれば幸いです。

# テストクラス置き場
まず、はじめにテストクラスの置き場所です。
<img width="331" alt="スクリーンショット 2019-12-01 12.36.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325856/df1d5717-62fe-c51e-92b5-ca4f8b7a6596.png">

テストクラスは、プロダクトのクラスとフォルダを分けて置きましょう。
Gradleを使用する場合、src/test/javaが標準フォルダです。

# パッケージ名
テストクラスのパッケージ名は、プロダクトのクラスと同じ名称は避けましょう。
しかし、テストクラスとの紐付けは絶対にしたいところです。
なので、「test + テスト対象のパッケージ名」という形が頭使わずにすむかなと思います。

パッケージ名を別にしている理由は、Springを使用した場合、
テストクラスでのDI重複とか対策です。（確か）
同じパッケージ名だと、testフォルダをDIしてテストしたいクラスのDIができなかったので、
パッケージ名の頭から区別できるようにしています。

# クラス名
これも頭使わずに、「テスト対象のクラス名 + Test」にしましょう。
同じクラス名だと補完の時にめんどくさいです。

# テスト書き方

テスト対象クラス

```java:Greeting.java
public class Greeting {
  
  public String hello() {    
    return "Hello";
  }
  
  public String helloWorld() {
    return "Hello World";
  }
}
```

テストクラス

```java:GreetingTest.java
class GreetingTest {

  @Nested
  @DisplayName("method : hello")
  public class Hello {

    private Greeting test = new Greeting();

    @Test
    @DisplayName("正常に動作するテストケース")
    public void case1() {
      Assertions.assertEquals("Hello", test.hello());
    }
  }
  
  @Nested
  @DisplayName("method : helloWorld")
  public class HelloWold {
    
    private Greeting test = new Greeting();
    
    @Test
    @DisplayName("正常に動作するテストケース")
    public void case1() {
      Assertions.assertEquals("Hello World", test.helloWorld());
    }
    
  }
}
```
## クラス修飾子

何もつけないのが無難です。
publicとかつけてしまうと補完で表示されてしまうので、見にくいです。

## メソッドごとにクラスを分ける
テストクラスでは見やすいように、メソッドごとにテストクラスを分けています。
テストケースを追加する時に、この形がテストケースを追加しやすいです。

インナークラスの名前は、メソッド名がわかりやすいです。

## DisplayNameでしっかりテストケースをかく
経験上、テストケースのメソッド名を長くなったりするか、適当になったりして
ひどく読みにくくなります。
そのため、長ったらしいメソッド名をつけるぐらいなら、DisplayNameを使ってしっかりと
テスト内容を書きましょう。

## Eclipseのテスト結果確認サンプル
Displayをかくと、カバレッジの画面に反映されるので、よりわかりやすくなります。
<img width="354" alt="スクリーンショット 2019-12-01 12.57.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325856/3f6a0789-5879-3eb3-b074-0d3a9252bc59.png">


# まとめ
テストクラスは、内容も大事ですけど、同じぐらい整理して書くことも大事です。
形式立てて書くことで、開発の時だけでなく、保守の時も変更しやすいテストクラスを書いて行きましょう。
【もう悩まない！】WordPressのexcerptやtitle文字数操作の奥義をお教えしますよ

みなさんwordpressで開発をしていて、よくタイトルや抜粋文の文字数制限や、末尾を...にしたりしますよね。

そしてやり方をググると、例えば抜粋文なら大抵このようなコードを目にするかと思います。


```php
function twpp_change_excerpt_length( $length ) {
  $length = 50;

  if ( is_category() || is_tax() ) {
    $length = 100;
  } 

  return $length; 
}

add_filter( 'excerpt_length', 'twpp_change_excerpt_length', 999 );
```

これはページごとに抜粋文の長さを変えられるコードですね。
excerpt_lengthフィルターを使っています。


```php
function twpp_change_excerpt_more( $more ) {
  return '......';
}
add_filter( 'excerpt_more', 'twpp_change_excerpt_more' );
```

これは、抜粋文の省略記号を...にするよくあるやつです。

excerpt_moreフィルターを使っています。

##一部分だけ適用したいんだが...

そう、例えば`ページの人気記事一覧の部分だけ文字数を20文字、そのほかの記事一覧の文字数を50文字にしたい`場合どうでしょうか。

そういう風に融通がきくコードを今回紹介します。

##まずはタイトルの制御から

タイトル文の制御は抜粋文に比べて楽なので、肩慣らしと行きましょう。

20文時までに制限して、それを超えたら末尾は...にします。

いきなりコードを見ます。

```php
<?php
if(mb_strlen($post->post_title)>20) {
  $title= mb_substr($post->post_title,0,20) ;
    echo $title . '...';
  } else {
    echo $post->post_title;
  }
?>
```

###mb_srtlenとmb_substr

```php
mb_strlen ( string $str [, string $encoding = mb_internal_encoding() ] ) : int
```

```php
mb_substr ( string $str , int $start [, int $length = NULL [, string $encoding = mb_internal_encoding() ]] ) : string
```

肝はこの辺ですね。

上から順に見ていくと、

まず`$post->post_title`でタイトルを投稿から文字列で持ってきてます。

そしてそれを`mb_strlen`で文字数調査、今回は20文字制限にしてます。

20文字以上ならmb_substrで文字数制限をかけます。

*`プラグインのWP Multibyte Patchを入れていること`*

そしたらechoでそのタイトルと、末尾に...を出力します。

ここでif文分岐が起きているのは、if文で文字数調査をしないと、20文字以内のタイトルの末尾にも...がついてしまうためですね。

else以下は当然20文字以下なので、タイトルのみechoします。

##抜粋文（excerpt）はやっかい

それでは抜粋文を見ていきましょう。

20文字に制限して、それ以上のときは...を出力します。

コードを見ます。

```php
<?php if (mb_strlen($post->post_content, 'UTF-8') > 20) { 
$content = str_replace('\n', '',
                       mb_substr(strip_tags($post->post_content), 0, 20, 'UTF-8'));
echo $content . '...';
} else {
echo str_replace('\n', '', strip_tags($post->post_content));
}
?>
```

『やだいきなり複雑になった怖いやめてください🥺』

落ち着いて。`calm down`。１つ１つ解説します。

###str_replaceとstrip_tags

```php

str_replace( $検索文字列 , $置換後文字列 , $検索対象文字列 [, int &$count ] )
```

基本はタイトル文の制御と一緒ですが、post_contentにはhtmlタグが含まれています。

そのためそれらを取り除ければ良さそうです。

まずは`mb_strlen`で文字数調査をします。

mb_substrで文字数制限をする前に、`strip_tags`でhtmlタグを取り除きます。

最後に`str_replace`で半角スペースを取り除いて純粋な文字列になったものを$contentに代入して終わりです。

##全体に適用するか、個別に適用するか

ここまで紹介したコードは、どちらかといえば細かに適応させたい場合に有効かなと思います

ページ全体でタイトルや抜粋文を制御したい場合はfunctions.phpの方がいいと思いますし、同じページ内で場所ごとに文字数制御を変えたいなら、今回のコードは使えるかなと思います。
Twitter風の〜分前を実装する(JavaScript/Vue編)


ダッシュボードを作っていて最新データの更新時刻を一覧表示にしたけど、パッとみても時間がわかりにくい...ということでTwitter風の〜分前って表示を実装しようと思いました...と[Rails版をQiitaに書いてから早５年](https://qiita.com/bellx2/items/30906a7832ef4ff4c886)。

最近はVueJSメインなので、再調査してみました。

## 調査

Javascriptで時間を扱うならMomentJsだよね、と調べたら普通に関数がありました。TimeFrom, TimeToなどで時間差が文字列で帰ってくるようです。

MomentJS:"Time from now"
https://momentjs.com/docs/#/displaying/fromnow/

正確な差がほしい場合はdiffを使います。こちらは好きな単位（秒、分、日など好きな単位で取得できます）

MomentJS:"Diffrence"
https://momentjs.com/docs/#/displaying/difference/


## 実装

日本語で表示するにはLocaleを'ja'にセットするだけでよさそうです（簡単！。
以下にVueのテストコードをおいておきます。Inputエリアの時刻を書き換えると変わります。


<img width="189" alt="スクリーンショット 2019-12-01 12.38.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14768/a85957dc-937d-f7f8-e736-2facb9673453.png">
https://bellx2.github.io/time_diff.html

```time_diff.html
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.js"></script>

<div id="app">
  <input v-model="mytime">
  <p>
  <p>FromNow : {{ time_diff() }}
  <p>Diff(sec) : {{ time_diff_sec() }}
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    mytime: moment().format("YYYY/MM/DD HH:mm:ss"),
  },
  methods: {
    time_diff: function(){
      moment.locale('ja')
      return moment(this.mytime).fromNow()
    },
    time_diff_sec: function(){
      return moment(this.mytime).diff(moment(),'seconds')
    } 
  }
})
</script>
```

# 参考

Twitter風の〜分前を実装する
https://qiita.com/bellx2/items/30906a7832ef4ff4c886
【Firebase】FirestoreのSQLでドキュメントIDによりクエリする方法

# 通常のクエリ
カラムに格納されている値でクエリするときは、以下のようなイメージ
```var citiesRef = db.collection("cities");```
そもそもNoSqlなので、「select id from ...」みたいな方法ではありません。

# ドキュメントIDで取得する
こんな感じで取得できます。
```var citiesRef = db.collection("cities").doc("Is3jt6EuiFgy53iigCzX");```

# 取得後
```
  db.collection("cities")
    .doc("Is3jt6EuiFgy53iigCzX")
    .get()
    .then(querySnapshot => {
      console.log(`${querySnapshot.Location} => ${querySnapshot.data().Country}`);
    });
```

取得後、欲しい値を上記のような感じで取ってこれます。
Qt World Summit 2019

#Qt World Summitとは
[Qt World Summit 2019](https://www.qt.io/jp/qtws19_tokyo)では、Qtを使用している企業による講演およびデモの展示や、Qtのこれからの技術の発信などが行われた。アジアでは東京が初めてのようだ。

![qtws2019_globe_black-green.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276053/58dfe498-0441-9306-2af7-f2f05026ad38.png)


#重要事項

- Qt Design Studio

　現状は２D描画と３D描画はそれぞれ別のツールで作成し、最終的にマージする作業が必要。今後はQt Design Studioに統合される。
　デザイナがPhotoshopなどで作成したデザインをそのままQML化し、エンジニアがバックエンド開発に集中できるようにする。

- MCU対応

　組み込み系では今後需要が上がるMCU対応。各組み込みデバイスを使用してIoTの実現までを行う。ビッグデータ解析部分にはPythonも今後は積極的に使用されるようになすことが予想される。Linuxカーネル上にコンテナを実装するためにも、今後はDockerやKubernetesの知識も重要となる。

- 3次元描画

　単一のソースコードでマルチプラットフォーム対応をし、かつ、それぞれの処理性能に応じた最適化が自動で行われることで、どのプラットフォームでも同じような見た目を実現する。Qt Quick 3Dを利用すると、簡単かつ高速な3次元描画もカスタマイズしたShaderの対応も可能になる。
　OpenGLをAppleが対応しなくなったこともあり、Vulkanの知識も必要になることが予想されるが、Qtを使用していれば、[Qt RHI](https://www.qt.io/jp/blog/2019/10/17/vulkan-metal-direct3d%E4%B8%8A%E3%81%A7%E5%AE%9F%E8%A1%8C%E5%8F%AF%E8%83%BD%E3%81%AAqt-quick)を利用することで、Qt上での直接的なOpenGLの使用をせずに、Vulkan、Metal、Direct3Dなどの幅広いグラフィックスAPIの利用が可能になるようです。

- Qt WebAssembly

 QMLのコードで、Linux、Windows、Android、iOSなどに加えて、Webアプリにも展開できる。展示ブースで紹介されていたCOSMO'S STARというゲームはオープンソースで、QMLのコードをWeb上に展開していた。[Qt 5.12 で WebAssembly を使ってみました](https://qiita.com/ynuma/items/1a86cf961b2c6087d0e5)を読みましたが、やってみると苦労は多そうなのが現状。Qtは基本的なドキュメントは豊富なのだが、実際に使って動作させるところまでの説明がされているドキュメントがネット上に少ないのが困る。Qtのヘルプを見て、試行錯誤しながら開発を進めないといけない。

![webQt.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276053/bdb609f2-15d1-031b-6023-ab40b8077fc1.gif)


Githubはこちら↓
https://github.com/mhungerford/cosmos_star

#写真

Autodeskと連携したVRシステム
![IMG_20191129_133853.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276053/f992b430-6b47-9189-8a06-8829cbc9e11c.jpeg)

これからのQt開発について
![IMG_20191129_150919.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276053/55cbfec4-75b2-078d-46d7-3a925a5940be.jpeg)

会場の写真とかあんまり撮っていなかったな。。。

#参加した感想

- Qtは組み込みアプリ開発をターゲットにしていると再確認

　展示ブースでは、AndroidやiOS端末をメインに展示している企業はなかった。今年はAGL関連の展示が多いのもあるが、ほとんどがLinuxカーネル上のアプリだった。Qtは組み込み業界では評価の高いことも感じた。

- デザイナがPhotoshopやSketchで画面レイアウトを簡単に作成できる時代は近い

　QtでもQt Design Studioというツールでデザイナが画面レイアウトを作成できる。PhotoshopなどのデザインファイルからQMLコードの生成まで出来る時代。これはAndroidのNative開発とかWebのフロントでも同様のことはすぐに起きるのだと感じる。

- 3次元描画の技術の奥の深いこと

　SDLでC++でゲーム開発しながら勉強しているが、スプライト、レンダラー、シェーダー、テクスチャ、Framebuffer Object、マテリアルなど、勉強する範囲が非常に深い。OpenGLを使用するにも、これらのパラメータの設定項目を理解しなければ話にならないな。

- 逐次翻訳や同時翻訳って大変だな

　英語で行われる講演も多数あったので、その時には同時翻訳機を渡されたり、英語を逐次翻訳していったいして対応していた。有り難いのだが、同時翻訳は、本当に講演を後ろで聞いている翻訳家の人たちが翻訳したものを各翻訳機に飛ばしていた。ラグが生じたり、そもそも高度な描画技術に関する英語の翻訳とか、詳しくない人からの翻訳は難しかったり、結局あまり使えなかったと感じた。音漏れしている人も多くて困った（笑）

#戦利品

###QtのTシャツ

![IMG_20191201_112358.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276053/f416c003-48a6-fe2a-2e0a-642e363cf11f.jpeg)



###Qtのアイマスク

![IMG_20191201_112220.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276053/382fa4bf-1270-169f-c915-2ff934e630d8.jpeg)


###ムーミンのクッキー

![IMG_20191201_112200.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276053/9f389373-6ab4-6e54-6c98-5724caf58925.jpeg)