OmniAICreator/Qiita-1.07M huggingface dataset:
supervisorのファイルディスクリプタの上限を変更する方法

```
Too many open files
```
ファイルディスクリプタの上限に引っかかって上記のようなエラーが起きることがあります。
ここでは、supervisorのファイルディスクリプタの上限を変更する方法を紹介します。
supervisorから起動しているプロセスのファイルディスクリプタの上限も同時に変更されます。

##前提
```bash
$ lsb_release -d
Description:	Ubuntu 18.04.2 LTS
$ supervisord -v
3.3.1
$ systemd --version
systemd 237
+PAM +AUDIT +SELINUX +IMA +APPARMOR +SMACK +SYSVINIT +UTMP +LIBCRYPTSETUP +GCRYPT +GNUTLS +ACL +XZ +LZ4 +SECCOMP +BLKID +ELFUTILS +KMOD -IDN2 +IDN -PCRE2 default-hierarchy=hybrid
```

##変更前

```bash:supervisorのファイルディスクリプタ
$ cat /proc/[process id]/limits | grep "Max open files"
Max open files            1024                 4096                 files  
```
```bash:supervisorから起動しているプロセスのファイルディスクリプタ
$ cat /proc/[process id]/limits | grep "Max open files"
Max open files            1024                 4096                 files  
```
Soft Limitが1024、Hard Limitが4096になっている。


##変更手順
supervisorを起動しているのがsystemd。
systemdのsupervisor設定を変更する。

```:/lib/systemd/system/supervisor.service
[Service]
LimitNOFILE=16384
```

設定の再読み込み＆supervisor再起動。

```bash
$ sudo systemctl daemon-reload
$ sudo systemctl restart supervisor
```

##変更後
```bash:supervisorのファイルディスクリプタ
$ cat /proc/[process id]/limits | grep "Max open files"
Max open files            16384                16384                files     
```
```bash:supervisorから起動しているプロセスのファイルディスクリプタ
$ cat /proc/[process id]/limits | grep "Max open files"
Max open files            16384                16384                files     
```
Soft LimitとHard Limitが変更した値になっている。



##プロセス内で上限を設定する例
EventMachineを使用した例

```ruby
EM.set_descriptor_table_size(2048)
```

```bash:supervisorから起動しているプロセスのファイルディスクリプタ
$ cat /proc/[process id]/limits | grep "Max open files"
Max open files            2048                 16384                files  
```
Soft Limitが変更される。
【SPA】Netlifyでの404エラー対策

# はじめに
NetlifyでSPAを公開したのですが、ページ遷移後にリロードすると404エラーが出てしまいました。
Vue CLI3を利用しています。

# 原因
SPAはVue.jsで作っていて、URLに#が出るのが嫌だったのでHTML5 historyモードを利用していました。
それが原因だったようです。

# 対処法
publicディレクトリに_redirectsファイルを作成し

```.._redirects
/*    /index.html   200
```
と記入すればOKです。

# 参考
[Vue.js製のポートフォリオサイトをNetlifyに引っ越しました](https://becolomochi.hatenablog.com/entry/2019/01/08/233027)
[Add _redirects file to root path for Vue SPA hosted on Netlify](https://stackoverflow.com/questions/47729023/add-redirects-file-to-root-path-for-vue-spa-hosted-on-netlify)
[Netlifyでリダイレクトの設定をする](https://www.suzu6.net/posts/47-netlify-redirect/)
脆弱性とかじゃないけどバグ

無害だと思われるので公開に踏み切った。

[test]

```
# Test Code
[test]
[test]: https://qiita.com/hyamatan/items/233f895097d9c01dc2c4
```

## 何が起きているのか
本来はコードとして表示されるべき「test」への参照URLがコードのスコープ外として解釈される。
よって、上記の「test」がリンクとして表示される。
初めての個人制作「Meshi」を開発した記録

#はじめに
現在、工学部3年生のtaishi16と申します。
11月の始めから2か月と少しの時間をかけて初めての個人制作となる「meshi」を開発しました。
https://meshi-go.herokuapp.com/
![logo.png](https://qiita-image-store.s3.amazonaws.com/0/306462/5da87333-10a9-24d1-35d6-acb091e432da.png)

#「Meshi」の概要
Twitterでとにかく気軽にご飯に行く人を募集できるウェブサービスです。
Twitter上の関係から現実の関係へと、とにかく円滑に、とにかくスムーズにステップアップできるようなアプリを作りたいと思ったのが開発するきっかけでした。

#仕様

###1.募集する内容を入力
![sample1.png](https://qiita-image-store.s3.amazonaws.com/0/306462/53c5a201-507c-82d4-fb39-0b4d12507c63.png)
###2.文章を画像化
![sample2.png](https://qiita-image-store.s3.amazonaws.com/0/306462/3e8102d7-c1b3-6a17-e8f0-6730d6814d2e.png)
###3.Twitterに投稿
![sample3.jpg](https://qiita-image-store.s3.amazonaws.com/0/306462/8d664ac0-7031-31cb-8313-73c6f3c428f5.jpeg)
あとは興味を持った人からサイト内でメッセージが送られてくるのを待つだけ　という仕様です。

#開発
環境はAWSのcloud9
開発で用いた言語はRuby　フレームワークはRuby on Railsを使用しました。

ログイン、ログアウト等のユーザー周りはdevise gemを使用
「Twitter連携」と「気軽」という点をとにかく重視した為、omniauthを併用して、メールアドレス、ログインID、パスワードの入力を全て省き、Twitter連携ボタンを押すだけで登録&ログインを行えるようにしました。

このサービスの一番の特徴である入力した文章を画像化するという処理ではmini_magickを使用しました。
ここで作成した画像は一度ストレージに保存する必要があるため、Amazon S3にcarrierwaveを使って保存。
画像の削除等の操作は一般に許可せず、アクセスのみを可能に設定する上で、S3のパブリック設定は非常にややこしかった。。。

そして最後に作成した画像を埋め込み形式でツイートできるようにOGPのひとつであるTwitter cardの設定を行いました。

（Twitterのようにメッセージが来たら非同期で➀等のバッヂが表示される処理を実装したかったのですが、javascriptの習熟度が浅く、結局同期通信で実装することにしました。現在開発中のサービスでjsをある程度使えるようにがんばる・・。）


#初めて一人で何か作った感想
とても大変だったがとても楽しかった。
特にメンターを付けていたわけでもなく、スクール等に通っていたわけでもなかった為、相談や質問できる相手が全くと言っていいほどいませんでした。
そのため情報収集がQ&Aサイトや技術ブログからのみだった点が大変であり、非常に時間がかかりました。
しかし、プログラミングを通じて何かを作るという行為自体はすごく新鮮で楽しくて時間を忘れて没頭していました。

そしてもう一つ、先人の知恵は偉大だなと感じました。
沢山のブログ、Q&Aを参考にさせていただきました。
とても助かりました、ありがとうございました。

#最後に

progateでHTML,CSS,Ruby,Railsを学んで、Railsチュートリアルも学習したよって方
最低でも僕レベルの制作物なら今からでも作れると思うので、何かの参考にして頂けたら幸いです。

具体的なことは何一つ書きませんでしたが、最後まで読んで頂きありがとうございました。
ブラウザの文字化けの原因と解決【Servlet・JSP】

#問題
Servlet+JSPのプロジェクトを実行するとブラウザで文字化けする

##原因　
ServletのdoGetメソッドでエンコードを指定してないため
(doGetではエンコード指定しないとISO-8859-1だと認識する)

##解決
ServletクラスのdoGetのエンコードをJSPと同じにしてやる。

##方法
getWriter()やgetParameter()より先に以下のコードを入れる。完了

response.setCharacterEncoding("UTF-8");
response.setContentType("UTF-8");
PostgreSQLでCSVファイルからデータをCOPYする

# ファイルパスに日本語があればファイルが見つからない
##　例：
```sql
copy tbl01 from 'C:\Users\test\Desktop\フォルダ1\tbl01.csv' with (format csv, DELIMITER ';');
```
##　エラーメッセージ：
ERROR: ファイル"C:\Users\test\Desktop\フォルダ1\tbl01.csv"を読み取り用にオープンできませんでした: No such file or directory
SQLステート:58P01



# Network Serviceグループにファイルまたはフォルダの権限を付与しないとエラーが発生する
##　エラーメッセージ：
ERROR: ファイル"C:\Users\test\Desktop\folder1\tbl01.csv"を読み取り用にオープンできませんでした: Permission denied
SQLステート:42501
##　権限付与の画面（ファイルからCOPYする場合、読み取りの権限のみで十分）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/188794/6e6e4cc1-d9f9-0d9c-3cc7-9a595b62dd07.png)


# 成功の例
```sql
copy tbl01 from 'C:\Users\test\Desktop\folder1\tbl01.csv' with (format csv, DELIMITER ';');
```

# 成功の例（追記：Windowsの日本語ファイル、ヘッダー付き、及びタブ）
```sql
copy tbl01 from 'C:\Users\test\Desktop\folder1\tbl01.csv' with (encoding 'sjis', header true, format csv, DELIMITER E'\t');
```
IGV（Integrative Genomics Viewer）未使用者にLinuxでインストール＋起動してもらうためのメモ

## IGVとは？
ゲノムブラウザは、遺伝子モデルやRNA-seq、ChIP-seqなどのオミクスデータといった、ゲノム上に定義された様々なデータを可視化するツールです。
IGV（Integrative Genomics Viewer）はアメリカのBroad Instituteの開発したGUIのゲノムブラウザです。

## インストール＋起動

### 準備
`java -version` で Java 1.8がインストールされているかを確認しましょう。
インストールされていなかったらインストールしてください。

### インストール
```
wget http://data.broadinstitute.org/igv/projects/downloads/2.4/IGV_2.4.19.zip
unzip IGV_2.4.19.zip
cd IGV_2.4.19
chmod 700 igv.sh
```
### 起動
```
./igv.sh
```

こうなります: 

<img width="1082" alt="IGV.png" src="https://qiita-image-store.s3.amazonaws.com/0/18504/dc7c0ea6-5a34-31b8-1431-e46dfb52f3d8.png">


## さらなる使い方

- IGV User Guide http://software.broadinstitute.org/software/igv/UserGuide
Nextcloud の監査ログ

#はじめに
Nextcloudはオンラインストレージを構築できるオープンソースソフトウェアです。オンラインストレージを導入すると、ユーザーは持ち出し用のノートPCやスマートフォンなど、どこからでもアクセスが可能になります（インターネットに公開する必要はありますが）。利便性は向上しますが、企業にとっては、誰が、いつ、どのような操作をしているかなど、しっかり把握しておく必要があります。今回は、Nextcloudの監査ログ機能を紹介します。

#プラグイン
![FireShot Capture 006 - アプリ - Nextcloud - nxt_12.0.3.png](https://qiita-image-store.s3.amazonaws.com/0/308127/ba12b220-04ec-7b08-2693-9d1c3e2e0ff8.png)
プラグインは「Auditing/Logging」となります。標準で提供されているプラグインですので、有効にしておきます。

#確認方法
監査ログは、Nextcloud.logの中に、他のログと混ざっています。Webインターフェースの管理画面でもログの閲覧や吐き出しはできますが、実機にログインした方が確認しやすいです。Nextcloud.logは、データディレクトリ（初期設定時のデータ保管領域）にありますので、データディレクトリに移動し、Nextcloud.logを確認します。（例として、/home/dataがデータディレクトリに指定している場合）

```
cd /home/data

ls -la nextcloud.log
-rw-r----- 1 nginx nginx 49811897  3月  4 14:12 nextcloud.log

```

Nextcloud.log内で、「admin_audit」という項目が監査ログです。全ての監査ログをgrepしてみます。

```
grep 'admin_audit' nextcloud.log
```

ユーザーを絞りたい時は、更にgrepしてみます。

```
grep 'admin_audit' nextcloud.log | grep 'm-misu'
```

このような手順で、監査ログを確認していきます。
なお、取得できる項目は以下となります。

- ログイン
- ログイン成功
- ログアウト
- アップロード
- ファイル名変更
- ダウンロード
- フォルダ作成
- 移動
- 削除
- 削除したファイルの復元
- ファイル共有
- ファイル共有解除
- URL共有
- 共有時権限変更
- URL共有解除
- URL共有のアクセス
- URL共有のアップロード
- URL共有のダウンロード

#まとめ
監査ログの確認手順を把握しておけば、ユーザーの一連の動作を管理する事が可能になります。また、万が一の障害やトラブル時にも、ユーザーの操作によるものか、切り分けもしやすくなります。管理者は、日頃から定期的に監査ログを確認した方がよいかと思います。

この記事は、[スタイルズ社のNextcloudサイト](https://nextcloud.stylez.co.jp/nextcloudblog)にも公開しております。
Qiitaのストック数を確認できる拡張機能を作った話

## デモ
![qiitastockers2.gif](https://qiita-image-store.s3.amazonaws.com/0/272803/f56400f0-9ace-5c56-e750-4c5e83a70b90.gif)

## 経緯
なぜ僕の記事はいいねされないのか？
Qiitaには「いいね」と「ストック」という概念がある

オレオレ定義

* 「いいね」とは記事に共感、役に立ったことへの感謝の気持ち
* 「ストック」とは純粋にその記事を読み直したいとき用のしるし

<b>ストック数も知りたいよ・・</b>

## 調べてみる
![qiitadoc.PNG](https://qiita-image-store.s3.amazonaws.com/0/272803/dfdcb5bb-3e9d-02e5-de49-fd6fdbd2f35c.png)

QiitaのAPIならストック者一覧を取得できるらしい・・・

## どうせなら使いやすく
ChromeExtensionを作ってみた！
[QiitaStockers](https://chrome.google.com/webstore/detail/qiitastockers/amohnnngjiamaillkgdnafemejhdopbf)

## 使い方
### 拡張機能の追加
https://chrome.google.com/webstore/detail/qiitastockers/amohnnngjiamaillkgdnafemejhdopbf
上記のURLからChromeに追加

### QiitaAPITokenの発行
[Qiita](https://qiita.com/) → ログイン → 右上のメニュー（自分のアイコン） → 設定
![image.png](https://qiita-image-store.s3.amazonaws.com/0/272803/7c0c221d-0540-6ede-0bc8-ff0382e49be4.png)

→アプリケーション → 個人用アクセストークン → 新しくトークンを発行する
![image.png](https://qiita-image-store.s3.amazonaws.com/0/272803/12fd192b-a719-d987-cd80-5c65aff8c93a.png)

→説明：QiitaStockers、read_qiitaのみにチェック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/272803/93e77714-7b73-baae-4848-7cb8936d828a.png)

→個人用アクセストークンをどこかにメモ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/272803/9bb815f4-b147-16a9-544e-dde2840e4e07.png)


### 拡張機能の設定
Chromeの右上から拡張機能のアイコンをクリック（赤いいいねボタン）→ オプション
![image.png](https://qiita-image-store.s3.amazonaws.com/0/272803/bca8892b-5c86-da39-a01f-b02f003930b1.png)

→先ほどメモしたアクセストークンを貼り付け → 保存
![image.png](https://qiita-image-store.s3.amazonaws.com/0/272803/59568bf0-be94-f94b-3653-93affc0c3cd1.png)


### 完了
Qiita記事のいいねボタンの下に赤くストック数が表示される
![image.png](https://qiita-image-store.s3.amazonaws.com/0/272803/21492694-154e-61d0-f439-57ae0fce21df.png)
ストック数をクリックすると別画面が開き、ストック者一覧も確認できる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/272803/400b7b0c-1924-6889-2ea9-df27272918c3.png)

## 最後に
自分の記事のストック数が気になっている人も多いのではないでしょうか。
記事によっては「いいね」よりも「ストック」が多かったりなど意外と奥が深いですね。
siitoolをMSYS2を用いてコンパイル

- windows 10環境でコンパイル
- siitool
    - [synapticon/siitool](https://github.com/synapticon/siitool)
- 準備
    - [MSYS2 による gcc 開発環境の構築](https://qiita.com/spiegel-im-spiegel/items/ba4e8d2418bdfe0c8049)
    -  pacman -S libxml2-devel
    -  pacman -S mingw32/mingw-w64-i686-icu
    -  pacman -S mingw32/mingw-w64-i686-xmlsec
numbaによるfor文の高速化とjitの引数

pythonのfor文は遅い．Numbaが使いやすそう．

そこまではわかった．Numbaの使い方も調べた．うん，@jitを頭に置けば良いのだろう．だがしかし，引数や返り値を指定する方法があるときいたが，どのようにすればよいかわからない．そのようなときに参考にすべきページ．ちなみに型指定をすると10倍程度高速化するそう．

参考は[こちら](http://yutori-datascience.hatenablog.com/entry/2014/12/10/123157)．

---

### 追記
[jitをクラスに適応する方法はこちら](https://qiita.com/nabenabe0928/items/c8017f4ed1fdcde1f1dc)

---

```py
import numpy as np
from numba import jit, f8, i8, b1, void

@jit(返り値の型(引数1の型,引数2の型,．．．,引数nの型))
def function(引数1,引数2,．．．,引数n):
  処理
　
```

とりあえず，こんな形でおいてあげれば大丈夫．

| 型 | 宣言方法 | 
|:-----------:|:------------:|
| int | i8 |
| float | f8 |
| string | u1 |
| boolean | b1 | 
| 返り値なし | void |
| float 1次配列 | f8[:] |
| float 2次配列 | f8[:,:] | 


例1

```py
@jit(void(i8[:]))
def print_array(xs):
  for x in xs:
    print("* " * x)

xs = np.array([i for i in range(100)])
print_array(xs)
```

例2

```py
import random
import math

@jit(b1[:](i8[:]))
def is_there_one(xs):
  for x in xs:
    if x == 1:
      return True
  
  return False

xs = np.array([math.ceil(random.random * 100) for i in range(100)])
print("Is there any one in the array? -- {}.".format(is_there_one(xs)))
```
visualStudio2015 - webApplication - error403.14

HTTP Error 403.14 - Forbidden
このエラーに対して

##### 試したこと
調べると大体IISの設定が有効になってないということで
[iisマネージャ]→[自PC]→[サイト]→[Default Web Site]
→[ディレクトリの参照]→[有効にする]
→→効果なし

次に、VS2015内のwebApplicatonに｢index.html｣を追加した
→動いた

#### なぜ
多分
[iisマネージャ]→[自PC]→[サイト]→[Default Web Site]
→[既定のドキュメント]
内にある名前のファイルが、スタートアップのヤツの中にないとダメなんだと思った
逆に、スタートさせたいhtmlが、[既定のドキュメント]内にあればいいのかね
ハッシュ値を作成してのアクセス制限を実装（Django）

# はじめに
特定のユーザにのみ、編集権限を与えたい（例えば記事編集権限）。
その場合、サーバ側とクライアント側で共通のハッシュ値を持っている場合のみ権限を与えるという実装をしてみます。

# 仕組み
クライアント側、サーバ側で共通のランダムな英数字を所有します。
これと、`timestamp`を使用してハッシュ値を生成し、一致するかどうかを調べます。
つまり、ランダムな英数字がわからない限りアクセスはできなくなります。

#ハッシュ値の作成
ユーザー側で作成したハッシュ値（timestampとランダムの英数字で作成）を、サーバー側で作成したハッシュ値（ユーザー側でもらったtimestampと同ランダム英数字で作成）を照合し、一致すれば許可。

```python:view.py
from django.core.exceptions import PermissionDenied
import hashlib
from datetime import datetime, timedelta
from django.conf import settings

class hoge():
        def check_secretkey(self):
        if settings.CHECK_SECRETKEY is False:
            return None
        # クライアント側からtimestampと予め作成されたハッシュ値を取得する。
        timestamp = self.request.query_params.get('timestamp', '')
        secretkey_client = self.request.query_params.get('secretkey', '')
        # クライアント側からのtimestampとランダムな英数字からハッシュ値を生成する。
        # ランダムな英数字はクライアント側、サーバ側のみが知っている情報のため、一致しない場合はアクセス不可にする。
        secretkey_server = hashlib.md5((timestamp + 'nil1Eiph').encode('utf-8')).hexdigest()
        if secretkey_client != secretkey_server:
            raise PermissionDenied
        # セキュリティ強化のため、timestampの時間にも制限をかける。
        # 現在時刻より5分以上古いtimestampはNG
        if float(timestamp) < (datetime.now() - timedelta(minutes=5)).timestamp():
            raise PermissionDenied
```

#デフォルト値の設定
`setting.py`にデフォルト値を設定。
上記メソッドを動かすかどうかを決めることができる。

```python:setting.py
CHECK_SECRETKEY = True
```
UX,UXDのするために知っておかないといけない事 にゃ


##　tl;dr

初見エンジニア（ほぼ）が、それっぽい（失礼な書き方になるが、初見からすると正しいかどうか？は判断は出来ないのです 上から目線）資料を見て
UXの大事そうな要素を見つけてみる（正しいとは言っていない）

※ UXD,UX 探せば大丈夫とは思います

## 参考とした資料

1. [なぜUXをデザインしているのか](https://www.slideshare.net/mikihirofujii/ux-45162439)
2. [私の考えるプロダクトマネジメントとUXデザインの関係](https://speakerdeck.com/taketetsu1982/si-falsekao-erupurodakutomanezimentotouxdezainfalseguan-xi)
3. [UXはじめの一歩](https://www.slideshare.net/in0in0/ux-45158456)
4. [はじめてのUXとUIの話](https://www.slideshare.net/ykazuki/uxui-16578959)


## なんとなく見えたもの

* UXとは
  * (in 1)ユーザー個々人による主観の体験（「誰にとっても良いUX」は存在しない）
  * (in 2)"体験"そのものは、ユーザーの個人的なもの
  * (in 4)ユーザーとサービス、商品の相互作用すべてで、混乱や面倒無しで顧客の的確なニーズを満たし、所有する楽しさ、使用する楽しさを生み出す「簡潔さと優雅さ」
* UXD
  * (in 2)どんな'体験'をしてもらうか計画すること、"体験"が量産・再生産される仕組みを作る事
  * (in 4)期待・予感＞もらう・出会う＞触れる＞ずっと使う＞記憶・思い出

### なぜUXをデザインしているのか

* 成果が出ているか？が大事らしいので、KPI的な指標設定が必要となる
* モノを作る工程があって、サイクルの構築(PDCA的な)が良いらしい
   * 【体験】＞【行動】＞【継続】＞【モノ】＞【体験】に戻る
* 各工程についての理解とステップ間の連携を明確にすると良いらしい

* 一文で表すと仰っている
   * 【体験】人々のハートを揺さぶるような
   * 【モノ】Design＆Productを生み出し
   * 【体験】世界をより良い方向に【行動】前進させる
   * 【継続】資料では事業


### 私の考えるプロダクトマネジメントとUXデザインの関係

* UXは時間軸でとらえる 利用前/利用中/利用後/利用時間全体
* UXDのするためには、PdM/Biz/Designer/Developer で進めると良い
  * → 共通のマインドが必要
* 共通のマインドを形成するために
  * 共通言語づくり
  * プロトタイピング
  * AARRCC
  * カスタマーサクセスタッチポイントの設計
* PdMはチームにインストールする存在
* 価値発見＞価値表現＞価値伝達＞価値提供 ⇒ 価値実現
* UXデザインはマインドセット

### UXはじめの一歩

* UXは企業・組織・チーム毎に背景が異なり体系化できない
* ビジネス要件を通じて体験を提供して、ユーザーが対価を支払う
* ビジネス要件の分解
  * 市場調査/競合調査/UXプロセス設計/ユーザー調査・プロトタイピング/どうしようもないやつ
* チーム作りをしている。
  * トップを説得ではなく、作業者レベルで「ユーザーをみる」空気づくり
  * UXで会社に貢献する姿勢
* 組織における居場所の作るステップ
  * 信頼・成果 ＞ 信頼・成果 ＞ 信頼・成果
  * できる・やった＞ できる・やった ＞ できる・やった
  * 社内勉強会＞ユーザーテスト＞ユーザーインタビュー、分析
  　＞事業部を巻き込んだワークショップ
    ＞サービス立ち上げにUX導入
* 導入のタイミングが大事
  * 要件定義、改修機関がよいらしい
  * 要件定義 ビジョン提案
  * 開発期間 プロトタイピング
  * 改修機関 改善アプローチ
* 手法は解決用途でなくて、議論の用途に利用するとよい
  * 調査ｘ分析ｘ議論＝解決案
* まとめ
  * 導入できる信頼を得る/ビジネスに共感する/小さな成果から始める/学習することをやめない


### はじめてのUXとUIの話

* 記憶に残るかどうかは、人によって違うのでルール化できない
  * でも多く記憶に残ってほしい ＞ クリエイターの使命であり挑戦する面白さ
* もの　プロダクトデザイン/人間工学/インタラクション/ユーザビリティ
* 情報　認知心理学、情報アーキテクト、情報デザイン、情報工学
  * Jonathan Ive のSimplifyが良い話らしい
* 洗練への過程（やる事とポイント）
  * 機能・情報の整理    誰が分かりやすいの
  * UIを考える　　　　　白黒のワイヤーフレームで
  * ユーザーとして操作する　ルールに基づいて整合性がとれているか？


## 大事そうなこと

* 始まるには、優秀な人がいないと失敗する
  * 優秀であるかどうか判断ができたらそもそもUXDが出来てそうなので懸念してもしょうがない点ではありそう
* 成果に対しての工程とサイクル設計が必要
* チーム・組織への浸透のために活動が必要
   * 共通の目的・課題意識
   * 作業者レベルでの意識づけ
* 議論をしやすくするために、手法が多く持っているとよさそう
* 上記の知識・行動面の準備や理解が無い場合はやってはいけない
   * 自分の言葉で話せない人はダメってことぽい
【materializecss】tableのヘッダーを固定する

## 概要
[materializecss](https://materializecss.com/)の[Table](https://materializecss.com/table.html)のヘッダ固定がデフォルトのオプションになく、かつ項目の幅の比率を同じにしたままで固定する方法が調べてもあまり出て来なかったので記します。

## 環境
materializecss 1.0.0

## 原因
ここら辺は調べたらすぐ出てくるんだけども念のため

```css
.table {
    max-height: 500px;
    overflow-y: scroll;
}
```
`overflow`プロパティは
> 置換されていないブロックレベル要素、および、置換されていないインラインブロック要素

が対象なのでtableタグに直接指定してもoverflowされない。

## 対処法
ヘッダとボディで分けたtableを作り、ボディ側のtableをdivで囲む

```html
<table>
    <thead>
        <tr>
            <th style="width: 60%;">columnName</th>
            <th style="width: 20%;">columnName</th>
            <th style="width: 20%;">columnName</th>
        </tr>
    </thead>
</table>

<!-- NOTE: このdivにoverflowを当てる -->
<div class="table-body">
    <table>
        <tbody>
            <tr>
　　　　　　　　　 <!-- NOTE: ヘッダと同じ比率のwidthにする -->
                <td style="width: 60%;">value</td>
                <td style="width: 20%;">value</td>
                <td style="width: 20%;">value</td>
            </tr>
        </tbody>
    </table>
</div>
```

```css
.table-body {
    max-height: 500px;
    overflow-y: scroll;
}
```
EverydayRails-Rspecを自分のアプリでやるべき3つの理由

##はじめに
Railsを扱っていると一度はRSpecというテストフレームを聞いたことがあると思うが、このRSpecを練習する電子書籍として[EverydayRails-RSpec](https://leanpub.com/everydayrailsrspec-jp)という電子書籍がある。
今回はこの書籍でRSpecを学ぶにあたって自分のアプリで練習するべき理由を３つ挙げる。

##1. 考えながらテストを学べる
「当たり前だろ！」と思うかもしれないが本当にこれに尽きると言っても過言ではない。

####コントローラスペックの簡単な例を出すと
以下のコードを見ただけでは
認可されたユーザーとは？
FactoryBotってなんだったっけ？
なんでsign_inしてるの？
など様々な疑問が出てくるはずです。

```posts_controller_spec.rb
describe "#show" do
    # 認可されたユーザーとして
    context "as an authorized user" do
      before do
        @user = FactoryBot.create(:user)
        @post = FactoryBot.create(:post)
      end

      #正常にレスポンスを返すこと
      it "responds successfully" do
        sign_in @user
        get :show, params: {id: @post.id}
        expect(response).to be_success
      end
    end
  end

```
githubからcloneしたコードでただ単にやっていると疑問もあまり出てこず理解もできないはず。手順通りに進めると書いてある通りの挙動をするが、自分のアプリで進めると次のようなことに気づくはずである。
#####・sign_inしてるのは、deviseのメソッドであるbefore_actionでログインしていないユーザーを弾いてるからだ。
#####・一度アプリを起動させてログイン済み、未ログインのユーザーで色々試すとサインアップ画面に飛ばされる
などなど...

実際に私の周りの人もこの書籍のアプリでやるのと自分のアプリでやるのとでは微妙にかくspecも違うし挙動も違うから勉強になる。と言っていた。


##2.構文やマッチャを覚えられる
この書籍を進めていくと様々なテストの書き方やマッチャが登場する。もちろん単語通りで簡単なものもあるが要は何をテストして、何を期待してるの？ということもしばしば。
そういう時はQiitaで調べたり、ググってどういう使われ方をしているのかを調べることで新しいことを覚えられる。

書籍ではこの挙動をしているのに自分のアプリでは違う挙動をする。なんてこともよく発生するがその時は自分のテストにあったものを探すことでまた新たに知識が増える。


##自分のアプリが堅牢なものになる。

今までに述べたことと似たような感じだが、自分のアプリで自分のアプリに合うようにテストをかけるようになることで堅牢なものになり、効率的な開発ができるようになる。
theme-bobthefishにnerd-fontsのアイコンを適用する

# 環境
- fish version 3.0.2
- フォントはCicaを使わせてもらってます

# やり方

普通に[公式](https://github.com/oh-my-fish/theme-bobthefish)に書いてあった

```shell:fish
set --universal theme_nerd_fonts yes
```

# ビフォーアフター

<img width="430" alt="nerd-fonts-enabled.png" src="https://qiita-image-store.s3.amazonaws.com/0/352563/5841daa4-4170-ce12-c462-28d4e5ef941b.png">


virtualenvでPythonのアイコンがちゃんと表示されるようになった！嬉しい！
[Emacs] eglot + ccls



ここに[公式ドキュメント](https://github.com/MaskRay/ccls/wiki)以上の情報はない。ただの備忘録。

C/C++/Objective-CのLanguage Serverである[ccls](https://github.com/MaskRay/ccls)をEmacsから使ってみた。
問題なく動くようであればrtagsからおさらばとなるかも。

# ビルド

```bash
$ git clone https://github.com/MaskRay/ccls.git
$ cd ccls
$ mkdir build
$ cd build
$ cmake --config Release --target install .. -DCMAKE_PREFIX_PATH=/usr/lib/llvm-7
$ make
$ sudo make install
```

# Emacs設定

私はLSPクライアントとして[eglot](https://github.com/joaotavora/eglot)を使っているので以下のように設定。(lsp-modeを使うという手もある)

```elisp
(use-package projectile
  :config
  (defun projectile-project-find-function (dir)
    (let* ((root (projectile-project-root dir)))
      (and root (cons 'transient root))))
  (with-eval-after-load 'project
    (add-to-list 'project-find-functions 'projectile-project-find-function))
  )

(use-package eglot
  :bind (:map eglot-mode-map
              ("C-c C-d" . eglot-help-at-point)
              ("C-c C-r" . eglot-code-actions))
  :hook
  ((c-mode-common . eglot-ensure))
  )
```

いい感じにプロジェクトのルートを探してくれるprojectileを使用している。
手動でルートを設定したいときには空の`.projectile`ファイルを置く。

# プロジェクト設定

`cmake`を使用している場合は`-DCMAKE_EXPORT_COMPILE_COMMANDS=1`でcompile_commands.jsonを作成し、プロジェクト直下にシンボリックリンクを張る。

その他の方法は公式ドキュメント参照のこと。
https://github.com/MaskRay/ccls/wiki/Project-Setup

# 操作

定義参照等は[xref系コマンド](https://www.gnu.org/software/emacs/manual/html_node/emacs/Looking-Up-Identifiers.html)が使用可能。
(Linux) VSCode+Vim拡張でノーマルモードに戻る際に日本語入力をオフにする

# 2019年3月30日 追記
[VSCode + Vim で IME コントロール](https://qiita.com/altus/items/334aaa27fb2c7b73b837)
リンクの記事にある通り外部ツールなしで実現できますのでそちらを参照してください。

# ~~TL;DR~~

~~Linux環境のVSCode+Vim拡張でxremapを用いてインサートモードからノーマルモードに戻ったら日本語入力(Fcitx)がオフになるようにする。~~

# ~~環境~~

- ~~X Window System(Linux)~~
- ~~VSCode+Vim拡張~~
- ~~Fcitx~~

# ~~方法~~

***~~xremapを使ってESC, \<C-[>が押されたら`fcitx-remote -c`コマンドを実行する。~~***

###~~以下詳細~~

#####~~xremapについて~~

~~xremapはk0kubun氏によるX Window Systemで動作するキーリマッパーツールです。~~
~~Linux環境用のKarabinerとして作らたもののようです。~~
~~特徴としては以下の3つがあります。~~

- ~~アプリケーションごとの設定。~~
- ~~シェルコマンドを呼び出せる。~~
- ~~rootが必要ない~~

~~詳しくは作者k0kubun氏のブログで~~
~~[Linux向けの最強のキーリマッパーを作った](https://k0kubun.hatenablog.com/entry/xkremap)~~
~~インストールはこちらから~~
~~<https://github.com/k0kubun/xremap>~~

~~IMにFcitxを利用していれば`fcitx-remote -c`コマンドでIMがオフになるのでxremapでこのコマンドと`ESC`,`<C-[>`キーとを紐付けします。~~
~~それでは設定ファイルです。~~

```..xremap.config
window class_only: 'code' do
  remap 'Escape', to: ['Escape', execute('fcitx-remote -c')]
  remap 'Ctrl-bracketleft', to: ['Ctrl-bracketleft', execute('fcitx-remote -c')]
end
``` 

~~`code`はVSCodeのWM_CLASS値です。~~
~~`Ctrl-bracketleft`は`<C-[>`のことです。~~
~~あとはxremapをservice化して自動起動するようにしてやれば完成です。~~

#~~謝辞~~

~~Thank Mr.k0kubun for xremap~~
PHPでTSVを出力し、直接ダウンロードする

#はじめに
DBを使っていて、取得したデータを適当に加工してグラフ化するってことは業務アプリなどでは多々ある作業です。
また、その取得したデータをEXCELなどで見たいってなることもよくある話です。
だいたいそういう時は、CSV(コンマ区切り)かTSV(タブ区切り)で保存するっぽいです。
そこで、備忘録として、DBから取得したデータをTSV形式に変換する方法をまとめました。

#方法
###１．データ作成
まずは出力したいデータを作成します

```php:aaa.php
   $title = 'フルーツの値段';
   $datas = array(
       'name' => 'りんご'
       , 'price' => 120
       , 'area' => 'トルコ'
     );
```

###２．文字コード変換

このまま出力すると文字化けしちゃうので、文字コードの変換をします。
使用するのは、mb_convert_variables関数です。

mb_convert_encoding関数は、文字列を指定の文字コードに変換するのに対し、
mb_convert_variables関数は、配列に格納された文字列を順繰りと変換してくれます。

```php:aaa.php
   $title = mb_convert_encoding($title, 'SJIS', 'UTF-8');
   mb_convert_variables('SJIS', 'UTF-8', $datas);
```
mb_convert_encoding関数
第1引数：変換したい文字列
第2引数：変換後の文字コード
第3引数：変換前の文字コード

mb_convert_variables関数
第1引数：変換後の文字コード
第2引数：変換前の文字コード
第3引数：変換したい配列
＊第3引数は参照渡しになっているので注意！

~~なんで引数こんなにぐっちゃぐちゃなの~~


###３．ファイル出力のヘッダー

ファイルをダウンロードできるようにするためには、HTMLヘッダーを記述しなければいけません。

```php:aaa.php
   $fileName = $title . '.tsv';
   
   header('Content-Type: application/octet-stream');
   header('Content-Disposition: attachment; filename=' . $fileName);
```


###４．書き込み
いよいよ書き込みです。
流れとしては、

1. ファイルオープン
2. 書き込み
3. ファイルクローズ

です。
どの言語でも一緒か…

```php:aaa.php
   //「php://output」に出力することで、一時ファイルを作成せずに書き込みができる。
   $handle = fopen('php://output', 'w');
   fputcsv($handle, $datas, "\t");
   fclose($handle);

   //ここでexitしないとHTML情報も書き込まれてしまう
   exit();
```

fputcsv関数
第1引数：fopenのファイルポインタ
第2引数：書き込む配列
第3引数：区切り文字(指定しない場合はカンマ[,])
＊CSVで出力する場合は、第3引数を指定する必要がない

###５．仕上げ
HTMLの部分で、ボタン発火とかしてあげればいいと思います。


#まとめ
ざっとこんな感じです。
複数の配列を書き込みたい場合は、fopenとfcloseの間にfputcsv関数を並べればいいと思います。
その際は行間が入らないので、適当に空の配列でもかましてあげたりすればいいと思います。

多次元配列の場合は、foreachで回せばいいと思います。

以下に全部つなげたコードを貼っておきます。

```php:aaa.php
   //データ作成
   $title = 'フルーツの値段';
   $datas = array(
       'name' => 'りんご'
       , 'price' => 120
       , 'area' => 'トルコ'
     );

   //文字コード変換
   $title = mb_convert_encoding($title, 'SJIS', 'UTF-8');
   mb_convert_variables('SJIS', 'UTF-8', $datas);

   //ファイル名決定
   $fileName = $title . '.tsv';

   //HTMLヘッダー
   header('Content-Type: application/octet-stream');
   header('Content-Disposition: attachment; filename=' . $fileName);

   //ファイルへの書き込み
   //「php://output」に出力することで、一時ファイルを作成せずに書き込みができる。
   $handle = fopen('php://output', 'w');
   fputcsv($handle, $datas, "\t");
   fclose($handle);

   //ここでexitしないとHTML情報も書き込まれてしまう
   exit();
```

#あとがき
はじめての投稿です。
Markdown方式で初めて書くので、ちょっと使い方わかんないですね。
あと、タブ区切りが使えないのもコーダーにとっては致命的だなと思いました。
え？もしかして俺が知らないだけ？

わかりにくいところなどあれば、ご教授願います。
GAS 帳票作成コード

gasで、 下記図のようなRawデータを帳票化するjavaを書いております。

<img width="814" alt="スクリーンショット 2019-03-04 13.16.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/324624/a2f286ea-9518-13e9-c9cf-2d3e645b8ad6.png">


上記のRawデータを下記のような帳票に自動で入力させるように構築したいのですが上手くいきません。
＊同品番であれば、カラー、香り毎の売上を帳票に入力後次の品番へ移るといった具合です。

<img width="1079" alt="スクリーンショット 2019-03-04 13.12.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/324624/ab167262-b40d-39c0-4c74-797724631bb2.png">

コードは下記の通りです。

```js
function test() {
  var sheet,sheet2,gyo,col,color,shee,col2,gyo2,gedai,iro,suu,mei,hinban,joudai,matome,t,joudai2,s
  var lastRow 
  var s1,s2,s3,s4,s5,s6
  
  gyo = 2;
  col = 2;
  gyo2 = 2;
  col2 = 2;
  t = 0;
  s = 0;
  
  
  
  sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('データ貼り付けシート');
  sheet2 = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('帳票シート');
  lastRow = sheet.getLastRow()
  
   for (var gyo=2; gyo<=lastRow; gyo++) { 

  joudai = sheet.getRange(gyo,1).getValue();
  joudai2 = sheet.getRange(gyo+1,1).getValue();
  hinban = sheet.getRange(gyo,2).getValue();
  gedai = sheet.getRange(gyo,3).getValue();
  mei = sheet.getRange(gyo,4).getValue();
  suu = sheet.getRange(gyo,4).getValue();
  color = sheet.getRange(gyo,8).getValue();
  matome = sheet.getRange(gyo,9).getValue();
  
  s1 = sheet2.getRange(gyo2+9,col2+s).setValue(joudai);
  s2 = sheet2.getRange(gyo2+5,col2+s).setValue(hinban);
  s3 = sheet2.getRange(gyo2+11,col2+s).setValue(gedai);
  s4 = sheet2.getRange(gyo2+7,col2+s).setValue(mei);
  s5 = sheet2.getRange(gyo2,col2+3).setValue(suu);   
  s6 = sheet2.getRange(gyo2+13+t,col2+s).setValue(matome);
  gyo + 1;
  s + 1;
    
    if(gyo != gyo){s+10;}else{col2+2;gyo=2;s=2;}
    
    
    }
    
}
```

どなたかご教授願えましたら、幸甚です。
Underscore.jsの_.cloneはDeepではないので気を付けるように　母より

「母より」使ってみたかっただけです。

Underscore.jsの_.cloneを使っていたら、ファ？！？となりましたので共有します。

```Javascript
var params = {
        key : {
                val: 'aaa'
                ,org: 'bbb'
        }
};
var clonedParams = _.clone(params); //shallow copy

clonedParams.catg = 'AAA';
clonedParams.key.val = 'ccc';

console.log(clonedParams);
// -> {"key":{"val":"ccc","org":"bbb"},"catg":"AAA"}
console.log(params);
// -> {"key":{"val":"ccc","org":"bbb"}}
```
`clonedParams.key.val`を書き換えたら`params.key.val`も書き換わっちゃうんですね。
Deep copyしたくて`_.clone`使ってるのに、意味ない。
（2階層以下は参照にしたい、っていう需要なんてあるんだろうか…？）

Deepにするためには

- lodashに乗り換えて[_.cloneDeep](https://lodash.com/docs/4.17.11#cloneDeep)を使う
- ゴリゴリ実装する（[underscore.deepclone.js](https://github.com/mateusmaso/underscore.deepclone/blob/master/src/underscore.deepclone.js)から拝借）

```Javascript
var deepClone = function(object) {
    var clone = _.clone(object);

    _.each(clone, function(value, key) {
      if (_.isObject(value)) {
        clone[key] = deepClone(value);
      }
    });

    return clone;
  };
```
- Json.stringifyしてからJSON.parseする:innocent:
    - ※当たり前ですがJSON.stringifyできないObjectの場合は使えないので、本番のプロダクトなどに使用するのは危険すぎ。

一応Underscore.jsのレポジトリで議論されてる
→https://github.com/jashkenas/underscore/issues/162

まあでもUnderscore.jsのメンテはあまりされていないので、おとなしくlodash使った方がよさそうですね。
Pandasでデータを操る。数値だけ読み込んで統計処理をしたい編

# Introduction
以下のような実験データファイル(test.tsv)があるとします。実験データが得られなかった部分がハイフン'-'で埋められています。これを普通に読み込んで、何らかの数値処理を行いたいと思ったとします。

![スクリーンショット 2019-03-04 12.21.18.png](https://qiita-image-store.s3.amazonaws.com/0/335400/8becb870-3bc7-fdaa-77af-6dd1665937ba.png)


# 普通に読み込んで、平均をとる...これができない。

1列目の'HGVD_AltAlleleFreq'の**数値部分の平均**を取りたいと思います。0.482と0.238の平均なので、0.36ぐらいが得られればここでは正解ですね。以下に普通に平均をとるスクリプトを示します。

```python:test_proto.py
'''
    test.py
'''

import pandas as pd


# read data
data = pd.read_csv('test.tsv', delimiter='\t', index_col=0)

# calcurate mean
HGVD_AltAlleleFreq_mean = data['HGVD_AltAlleleFreq'].mean()

# print data_mean
print(HGVD_AltAlleleFreq_mean)
```

これを実行すると
```TypeError: Could not convert -0.482----0.238--- to numeric```
とエラーが返ってきます。ハイフンは数値ではないので、このままでは平均値という数値には変換できない、とおっしゃってますね。

# 数値以外はNaNに変換する

~.mean()の上に次の一行を追加しましょう。

```python
# convert str to NaN
data['HGVD_AltAlleleFreq'] = data['HGVD_AltAlleleFreq'].convert_objects(convert_numeric=True)
```

これを行うと、数値型(intやfloat)以外のものはNaNに変換されます。試しに

```python
print(data['HGVD_AltAlleleFreq'].convert_objects(convert_numeric=True))
```
とすると以下のような出力結果を得ます。

```
CHROM
chr1      NaN
chr1    0.482
chr1      NaN
chr1      NaN
chr1      NaN
chr1      NaN
chr1    0.238
chr1      NaN
chr1      NaN
chr1      NaN
```

これで無事、数値部分の平均のみをとることができます。ということで最終的なスクリプトは以下のようになります。

```python:test.py

'''
    test.py
'''

import pandas as pd


# read data
data = pd.read_csv('test.tsv', delimiter='\t', index_col=0)

# convert str to NaN
data['HGVD_AltAlleleFreq'] = data['HGVD_AltAlleleFreq'].convert_objects(convert_numeric=True)

# calcurate mean
HGVD_AltAlleleFreq_mean = data['HGVD_AltAlleleFreq'].mean()

# print data_mean
print(HGVD_AltAlleleFreq_mean)
```
17日目。Github のごちゃごちゃを整理できるようになりました！

17日目の今日はGithubとHerokuにごちゃごちゃアップされていたものを整理しました。

### Githubにアップしたらリネーム、移動ができないの！？
共同で開発するので、簡単にファイル名が変えられないようにしているのかな？
GithubのWeb画面からは変更できないようです。なお、Delete→Uploadはできるようです。

実は、１日目に`Github Desktop`をダウンロードして一回は使えたのですが、２回目以降のプルとかプッシュの意味が分からなくで放置していたのでした。そのほか`Github ファイル mv`で検索するとコマンドでどうにかしよう、という情報ばかり。だったらコマンドを使えるようにしよう！と思ったのですが・・・

今日からはじめるGitHub 〜 初心者がGitをインストールして、プルリクできるようになるまでを解説
https://employment.en-japan.com/engineerhub/entry/2017/01/31/110000

めちゃくちゃめんどくさい！手順の複雑さを見ただけでムリって感じが・・・。ざっくり手順をまとめると、`Gitを使えるようにする→SSHを設定→鍵を生成→鍵を登録→リポジトリをコピー→ブランチを作る→ローカルの変更をコミット→コミットをプッシュ` うへえ。

でも手順を眺めていたら`Github Desktop`の意味がなんとなく見えてきたような感じがしてきました・・・！！！

### Github Desktopの使い方がわかった！

まず、ローカルの`Github Desktop`を一旦削除して再インストール。Webのアカウントと紐づけてリポジトリをダウンロード。ローカルのフォルダを整理すると変更点が`Github Desktop`にどんどん追加されるので、`commit to master` をクリックしてコミット。必要ならコメントもいれておく。

![GithubDesktop1.png](https://qiita-image-store.s3.amazonaws.com/0/356263/dfa458dd-6500-16bb-93db-e78e5eac2ced.png)


そうすると、何箇所変更されたかって表示とその右に、`Push orign` という青いボタンが出てくるのでクリック。

![GithubDesktop2.png](https://qiita-image-store.s3.amazonaws.com/0/356263/2a0fc1d0-50b0-7f7e-786a-97f06c227c6f.png)

後はこれをどんどん繰り返していくだけです。
ようやくGithub上のごっちゃごちゃを整理することができました！
実行結果を見ると、削除→追加を繰り返しているようなので、コマンドとやっている事は同じです。でも画面上ですすーっとドラッグ＆ドロップ、いつもの操作でできると楽チンですね。最後にHerokuでDeployして完成です！

後はだんだんわかってくればいいかな。いまローカルにHeroku GitとGithubと２つあってごっちゃりしている問題はもう少しわかってからやろうと思います。ふうふう。

というわけで、ここまでのまとめはこちらです。
1ヶ月でここまできたぞってやつです。

###この1ヶ月のまとめ

Day1 笑い袋
http://appdays.herokuapp.com/Day1/

Day2 ProgateでCSSにチャレンジ！
http://appdays.herokuapp.com/Day2/
http://appdays.herokuapp.com/Day2/p8-day2.html

Day3 7行テトリスをコピペして感心していました。
https://appdays.herokuapp.com/Day3

Day4 ProgateでPHPでお問い合わせ画面を作る
http://appdays.herokuapp.com/Day4/

Day5 JavaScriptでおみくじを引く
http://appdays.herokuapp.com/Day5/
→応用でDay1の笑い袋がランダムに笑うようになりました！

Day6 Python 動きません。
http://appdays.herokuapp.com/Day6/

Day7 HTML5のお絵かきを試してみました
http://appdays.herokuapp.com/Day7/

Day8 Progate全種類Lv1クリア！
https://qiita.com/robamimim/items/9466f0bd6c939e88f4f3

Day9,10,11 HerokuでRubyでHello World!
https://agile-escarpment-81217.herokuapp.com/

Day12 CSSでストレス解消(EMDRぽいの)
http://appdays.herokuapp.com/Day12/

Day13 デザイン。
https://cocoda-design.com/products/597

Day14 HTML＆CSS中級編
http://appdays.herokuapp.com/Day14/

Day15 HTML＆CSS初級編（ガイドなし、仕様書からHTMLを書く）
http://appdays.herokuapp.com/Day15/

Day16 HTML＆CSS中級編（ガイドなし、仕様書からHTMLを書く）
http://appdays.herokuapp.com/Day16/

(所要時間 ２時間くらい）
地力向上の為の計算理論のメモ

# 目的
俺が忘れない為、忘れた時の思い出す材料としての概要メモです。

## 自然数
足し算は次の規則うで定義される。

### 可換性 (Commutativity)
どんな自然数 n と m の組についても

```elm
n + m = m + n
```

が成り立つ

補足: 足し算は左右逆になっても結果は変わらないよって事

### 単位元 (Identity)

どんな自然数nについても

```elm
n + 0 = 0 + n = n
```

が成り立つ。

補足: nに0を足してもnのままだよって事

### 再起

どんな自然数mとnについても

```elm
m + s(n) = s(m + n)
```

が成り立つよって事。
この規則は帰納的な規則で、再起を使って組み立てられている。

#### 補足
sって関数の適用回数によって、連なる数を表現している
10進数での例:

```elm
s(0) = 1
```

```elm
s(s(s(0))) = 3
```

```elm
3 + s(2) = s(2 + 3) = 6
```

こういう感じ

ちなみにこの自然数の表現はλ計算での自然数の表現方法と凄く似ている

## λ計算
λ計算は、アロンゾ・チャーチ（AlonzoChurch、19031995）という名のアメリカの数学者によって、停止性問題のいくつかある証明のうち最初期のものの1つの中で設計された。

Haskell, Scala, Lispといった関数型プログラミング言語は、純粋なλ計算を別の構文で書いたもの。

### λ計算には3つの要素しかない
* 抽象
* 識別子参照
* 適用

### λ式
λ計算の式はλ式と呼ぶ

## 純粋なλ計算
純粋なλ計算では、全てが関数です。
関数の定義と適用しかできないので、関数以外の値はありません(例: 0, 1, 2や'h'や'hello world'等も一切ありません)。

何かデータ構造等がほしければλ計算を使って全てを作れます。

### λ計算には3種類の式しかない
### 関数定義
λ計算の関数は、「λパラメータ.本体」のように書く。
この式はパラメータが1つだけの関数を定義します。

### 識別子参照
関数の本体に出てくる名前で、パラメータ名に一致するのもの、識別子参照といいます。

例: 

```
λa.a
```

この式のλa.aのλと.の間に挟まっている文字がパラメータで、.の後に登場したaが識別子参照をしている

### 関数適用
引数の前に関数の値を書くと、引数への関数の適用になります。
xyのように書いて、関数xを値yに適用します。

例

```elm
x y
```

xが関数で、yが引数です

### λ式のパラメータのスコープ
λ式はレキシカルスコープです。

### λ式で自然数を表現
λ式で自然数を表現する方法はいくつかあって、その中の1つ、[チャーチ数](https://en.wikipedia.org/wiki/Church_encoding#Church_numerals)を紹介する。


```
// fを0回適用したから 0
λx = x

// fを1回適用したから 1
λx = f x

// fを2回適用したから 2
λx = f (f x)

// fを3回適用したから 3
λx = f (f (f x))
```

これは、xにfを適用した回数で自然数を表現している。
これはこの記事の冒頭に登場する自然数の再起の式と凄く似ていると思う。

### 自由変数
こういう式があったとする

```
λx.p (x y)
```

pとyって誰？ってなると思います。
このpとyが自由変数です。
requestsを使ってInstagram APIをいじってみる

# Instagram APIとは
インスタグラムが提供しているAPI。今は基準が厳しくなって自分のアカウントの情報しか操作できないらしい。
あとはSand boxに他のユーザを追加するとそのユーザも操作できる。

# Access tokenをゲットする。
今回はインスタグラムの[ドキュメント](https://www.instagram.com/developer/)を参考に作成。
今回はClient-Side (Implicit) Authenticationで作成する。（Server-side (Explicit) Flowでやろうと思ったけどできなくて諦めた。）

## Authentication
ドキュメントを読みながら、認証を行なった。
1. アクセストークンの取得

https://api.instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect_uri=REDIRECT-URI&response_type=token

上記のURLのclient_idとredirect_uriの部分を自分のものに変えてGETする。
そうするとリダイレクトURLに飛んでブラウザのアドレスバーが下記のようになる
http://your-redirect-uri#access_token=ACCESS-TOKEN

2.アクセスしてみる
https://api.instagram.com/v1/self/media/recent?access_token=ACCESS_TOKEN
上記のACCESS_TOKENを自分のものに変更してブラウザでアクセスする。
するとjsonでレスポンスが返ってくる。

```json:レスポンスボディ
{"pagination": {}, "data": [{"id": "1990445690938419069_2908844", "user": {"id": "2908844", 
#中略
{"code": 200}}
```

またインスタグラムの[API EndPoints](https://www.instagram.com/developer/endpoints/)に説明載ってます。

# Pythonで書いてみる。
先ほど取得したURLにリクエストするプログラムを書いてみた。今回はpython3.6を使用している。

```python:get.py

import json
import client_info
import requests
instagram_url = f"https://api.instagram.com/v1/users/self/media/recent/?access_token={client_info.access_token}"
res = requests.api.get(instagram_url)
data = res.json()["data"]
print(res.url)
print(json.dumps(data, indent=4))
```
```python:client_info.py
access_token = "ACCESS_TOKEN"
```

上記のプログラムはアクセスして、レスポンスボディのdataパラメータを表示しています。
実行してみてください。
2019年２月版 モダンな EgretEngineで開発したゲームのデバッグ方法

VS Codeのデバッグメニューからビルド＆起動をすることができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/ea475cbc-a549-7152-44fa-856f3c22aa9d.png)

このようにChromeが起動します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/561f50bc-caeb-1ed7-c6cb-11a93bafdaae.png)

デバイスのエミュレーションをするために解像度や画面の向きを変更するためには、Chromeの検証ツールを使います。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/69377843-c640-f6ab-c0a6-b8d34b780ede.png)

ところが、再度VS Codeからビルド＆起動させると最初の全画面モードに戻ってしまいます。

おすすめの方法はプロジェクトのホームディレクトリで`egret run -a`です。

```console
c:\workspace\JumpAndRun>egret run -a
Egret Engine latest version: 5.2.14
Egret Engine current version: 5.2.12
You can upgrade your project via egret upgrade
您正在使用白鹭编译器 5.2.12 版本
Compiling the project ...
Total project compiling time: 3.657 second
Server running at port: 3002.


    Egret server is running, you can access by URL:


        http://169.254.236.78:3002/index.html
        http://192.168.99.1:3002/index.html
        http://192.168.100.101:3002/index.html


    Auto compile service is running...
```

プログラムを修正して保存すると自動でコンパイルされます。

```diff
    Auto compile service is running...
+    Auto compile is done.
```
【のーと】任意桁の切り捨て，切り上げ（小数点でない）


```py
x = int(input())
#　いったんrange(今回は100)で割って小数点を切り捨ててから100掛ける
def floor(src, range):
    return (int)(src / range) * range

print(floor(x,100))

# ちな，切り上げ
def ceil(src, range):
    return ((int)(src / range) + 1 ) * range
```

参照ではなく丸パクリ文献：
http://terukizm.hatenablog.com/entry/20120505/1336218368
React Native 下のビューにタッチイベントを伝える

マップを使用したアプリを使っていると、全画面表示したマップの任意の位置にボタンを表示したいことがよくあります。
こういった場合、下の図のようにボタンの親ビューを全画面にしておいて、ボタンをそのビューの右下に配置するといった実装になります。

![figure1.png](https://qiita-image-store.s3.amazonaws.com/0/18273/4fc11ed9-83f1-8826-4ce6-320af0ec1600.png)

この実装をした場合の問題はピンクのビューが邪魔をしてマップの移動などのタッチイベントができなくなってしまうことです。
この問題を解決するにはピンクのビューの `pointerEvents` というプロパティを `box-none` にすれば良いです。

```
<View
  pointerEvents="box-none"
  style={{略}}
>
  <Button>
  略
  </Button>
</View>
```

`box-none` はサブビュー(この例ではButton)はタッチを受け付けるけど、自分はタッチを受け付けずタッチイベントを下のマップに伝搬するという意味です。
`none` にするとすべてのイベントが下のマップに伝搬して、ボタンは押せなくなります。

参考
https://facebook.github.io/react-native/docs/view#pointerevents
ROSのCustom Message作って、catkin_makeも通ったのにImportErrorがでる時

# 概要
ROSでカスタムメッセージを作った際に、少し困った時の解決方法を以下に示します。

# 実行環境
次に実行環境を示します。

| Soft and Hard       |       バージョン | 
|:-----------------:|:------------------:|
| Raspberry pi         |              Model 3 b+ |  
| OS           |            2018-10-09-raspbian-sterech |  
| Python             |              2.7 |
| ROS             |              Kinetic | 

# ROSのCustom msgの作り方
ROSのCustom msgの作り方については、他の人が詳しく書いているのでここでは、Error対応策のみ記載したいと思います。
また、詳しく書かれているURLを次に示します。

https://qiita.com/srs/items/7ac023c549e585caeed0
https://kazuyamashi.github.io/ros_lecture/ros_study_py.html

# Msgを新しく作って、ImportError出すまで
### 新しくmsgを作って、catkin_make
catkin_make時にも、cmakeは問題なく進み、msgを生成することは確認できました。

```python:catkin_make
puts 'code with syntax'
```

## rosmsg listで新しいmsgが出来ているか確認
catkin_makeが通ったのですが、一応使う前に確認しようと思い、rosmsg listで確認しました。

```bash:rosmsg
$rosmsg list | grep new_msg
```

新しく作ったものがあることが確認できます。

上記までの確認手順で、Errorや想定していない結果が出力されていた場合には、msg作成手順において抜けていることがあるか、もしくは手順を間違えている可能性が大きいので、上記で示したURLで確認してみて下さい。

## スクリプトで新しいmsgをImport
上記の確認事項が想定したものであった為、次に新しいmsgを使用するスクリプトで新しいmsgをimport文に追加しました。

```python:catkin_make
from "pakage名".msg import "新しいメッセージ名"
```

追加後、実行してみると、次のようなErrorが出力されてました。

```python:
ImportError: No module named msg
```

# ImportErrorが出力される原因
調べてみると、自身が分かった範囲ではImportErrorが出力される原因としては、主に次の2つの原因があることが分かりました。

- 作成したMessageファイル名とPackage名が同名である
- source /devel/setup.bashをMessage作成後に実行していない

それぞれの場合の解決方法を示します。

## 作成したMessageファイル名とPackage名が同名である
新たに作成したmessage名とpackage名が同名であると、ImportErrorとなるようです。このErrorは[ROS Answers](https://answers.ros.org/question/105711/rospy-custom-message-importerror-no-module-named-msg/)でも取り上げられていました。

解決方法は、Messageファイル名とPackage名を異なる名前にすれば解決できるそうです。

## source /devel/setup.bashをMessage作成後に実行していない

Message作成後にSourceコマンドによって、/devel/setup.bashを実行していないと、ImportErrorになります。catkin buildもしくは、catkin_make後には、Sourceコマンドを実行しましょう。

# まとめ
msg作成時には、上記の2点を確認すればCustum Messageが実行できると思います。間違っているところや、追加したほうがいいところがありましたら、お教え頂けるととても嬉しいです。
MySQLの全文検索でストップワードをオフにする方法

# 目的
MySQLの全文検索(ngram)でストップワード(a,theなど)を利用している場合、ストップワードが含まれる検索ができない。そのため、ストップワードをOFF、インデックスの再構築をして、検索でヒットするように変更する。
```
例)cat→ca atは両方ともaが含まれ全文検索インデックスに登録されない
```

# 現在の設定を確認
```
mysql> SHOW VARIABLES LIKE 'innodb_ft_enable_stopword';
+---------------------------+-------+
| Variable_name             | Value |
+---------------------------+-------+
| innodb_ft_enable_stopword | ON    |
+---------------------------+-------+
1 row in set (0.01 sec)
```

# 設定を追加
```my.cnf
innodb_ft_enable_stopword=0
```

# 再起動
```
/etc/init.d/mysqld restart
```

# インデックスを再構築
```
SET GLOBAL innodb_optimize_fulltext_only=ON;
OPTIMIZE TABLE (テーブル名);
SET GLOBAL innodb_optimize_fulltext_only=OFF;
```
【ディレクターにとどけ】なぜGitを使うのか？

# 目的
自社のディレクターにGitを使ってもらいたい！
でも「使えやおらぁ！！」って言っても使ってもらえないので
今回はディレクターがGitを使う事で得られるメリットと
使わない現状の地獄についてのお話をします。

(ディレクター向けと書きましたが当方エンジニアなのでその目線でかけてないかもしれませんが、ご了承くだしあ）
あとご意見お待ちしています。

## 1. Gitを初めて彼女ができました！！
Gitを使って１番のメリットってなんでしょうか？
使っている人はもちろん知ってますが、
なんにせよモテる事です。

**「Gitを使えばモテる！」**

本当です。

**主にエンジニアからモテます。**

なぜエンジニアからモテるかって？

ディレクターから
「作業が終わったあと差分をキャプチャーして送って」とか
「2019_3_3ディレクトリに編集ファイル入れて」
と言うのをいわれなくて済むからです。

Gitを見るだけで差分ファイルがわかり。
いちいち変更日付付きのディレクトリを作らなくて済みます。


## 2. Gitを使い始めて肌の艶がよくなったんです！！
Gitを使うと健康面にも影響が出てきます。

なぜなら、
無意味なファイル上書き戦争に終止符が打てるからです。

D「あれ？さっき修正終わったって聞いたんですけど治ってないですね？」
E「え、そんなはずは・・・（ブラウザみる）」
E「確かに、済みませんすぐ直します！」

・・・５分後

E「Dさん。ここの文字の色変わっているんですが、もしかしてCSS触りました？」
D「うん。お客さんからきた修正なんだけど簡単な修正だから僕がやっちゃった🌟」
E「やっちゃった🌟じゃねぇよ！こっちはおめえを●っちまいたいよ！（・・・）」
D「思ってることと言ってる事逆になってますよね？」

無知 is 怖い

どうやらEさんがUPしたファイルはDさんに上書きされてしまったようです。
休日１日使ったファイルが文字色変更ファイルでおじゃん・・・
エンジニアはストレスでお肌があれてしまいます・・・
胃に穴が開くかもしれません。

でも、もう安心。
なぜならGitがあるから！

Gitを使う事で、速攻ファイルが復元できます。
常にGitから最新のファイルを落とせます。

そして、最新ファイルを修正する事でエンジニアの修正の上から
文字色も変えられるでしょう。

これで無駄な作業が減って
早く家に帰って寝られますね！！！


## 3. もうGitなしの生活なんて在り得ない！！
Gitがないと差分や過去のファイルをさかのぼれないので
バックアップファイルをたくさん作る必要があります。

でも、バックアップをたくさん作ったところで、
いつの時点まで戻れば、目的のファイルが元に戻るのかわからない。
ってことは往々にしてあるとおもいます。

ですが、
Gitを使えば差分がわかるので
対象のファイルが変更された時点まで戻ればOKです。

また、Gitはコミットメッセージと言うものを使って
コメントを残すことができます。

コメントに、どの部分を直したかを追記すれば
さらに探しやすいでしょう。

ちなみに差分だけをzipにすることだってできます

最初入れるのは勇気いるかもしれませんが。
近くにできるエンジニアがいる場合は聞いてください
多分泣いて喜びます。


# 最後に
ざっくり書いただけなのでまだまだメリットあるかと思います。
そして、自社のディレクターを説得してGitを使ってもらいたいエンジニアもたくさん存在していると思います。

ですので、
ぜひコメントでここも足してくれ！こんないいこともある！
とご意見ください。

また、
ディレクター自身の体験談も募集しています。
Gitを入れてモテました的なやつ。
いやハードル高いかw

Git入れて失敗した話もあればどうぞ！
【Bigquery】コマンド一発でテーブル定義をCSVに吐き出す方法


bqコマンドを使うためのもろもろについては設定済みという前提です。

```
bq show  --schema [Dataset].[table] | jq -r ".[] | [\"$t\", .name, .type, .mode, .description] | @csv" > schema.csv
```

参考
http://takemikami.com/2018/09/30/BigQueryCSV.html

出力フォーマットについてはよしなに。
jupyter kernel

## カーネルの設定を忘れるのでメモ

### 一覧確認
現在使えるカーネルの一覧が出る

```shell
jupyter kernelspec list
```

### 削除
一覧に表示されるカーネル名を指定して消す

```
jupyter kernelspec uninstall unwanted-kernel
```

### 追加
**追加したい環境をactivateした状態**で以下のコマンドを実行する

```
ipython kernel install --user --name=hoge --display-name=hoge
```

### jupyterがカーネルを探す場所
一覧確認で出てくるようになる設定を探す範囲の表示
https://jupyter.readthedocs.io/en/latest/projects/jupyter-directories.html

```
jupyter --paths
```
この結果の`data:`部分がカーネル設定の置き場所になっている
環境変数`JUPYTER_PATH`に追加したい場所を書けばデフォルトの設定より先に呼び出されるもよう

私の環境ではpyenvのものと思われるものが追加されているようだがこれがどこで制御されているのかはわからなかった
STM32CubeMX Eclipse IDEのインストールができません

STM32 CubeMX Eclipse 環境構築https://qiita.com/kentegrate/items/7e222c0c385dc64fcf20
に従ってインストールしてもEclipse IDE のperspectiveにSTM32CubeMXがあらわれません。
すべて最新版で環境構築に書かれてあるとおり行いました。原因がわかりません。
原因を教えていただけると幸いです。
PHP1  を終えて

<h1>PHPとは</h1>
HTMLとCSSは見る人すべてに同じ画面が表示される
しかし、PHPは見る人に応じて異なる画面を表示する際に使用する

<h1>書き方</h1>
PHPは<？　php　－－　？>という形で表示する

<h1>数値の計算</h1>
phpでは数値の計算を行うことができる
例えば＋－を用いれば足し算と引き算
*%を用いれば掛け算と割り算ができる

<h1>変数</h1>
変数はそのデータに何が入っているのかを明らかにすることと
入っているデータを整理するために使用する

<h1>条件文</h1>
phpでは条件文を用いることでより複雑な表現ができる
例えば、ifを用いれば、ある条件が発生したときに特定の処理を行うことができる
whileやforを用いれば繰り返しの処理を行うことができる

<h1>まとめ</h1>
以上がphpの基本的な部分です
個人的には、HTMLやcssよりもとっかかりやすかったので、これからの学習も頑張っていきたいです。
fish shellで直前のコマンドの引数を参照する

# つまり


```bash:bash
mkdir hoge
cd !$  # cd hoge 
```

みたいなことをなるべく簡単にfishでやりたい

# 結論

`cd`まで打ってから

`Alt + ↑` or `Alt + ↓`を叩けばいい

> Alt↑ recalls individual arguments, starting from the last argument in the last line executed. A single press replaces "!$", later presses replace "!!:4" and the like.

# ちなみに
`!$`はひどいインターフェースだって[fishのFAQ](https://fishshell.com/docs/current/faq.html#faq-history)に書いてあった
UE4のライティングの基礎の基礎

#概要
　UE4のライティングについて最低限知っておくべき事をまとめました。
　社内用に書いてたけど、せっかくなので公開。

## Dynamic LightingとStatic Lighting
　UE4のライティングをまず大きく、動的（Dynamic)なライトと静的(Static)なライトに分けます。
### Dynamic Lighting
　動的(Dynamic)なライトの主な目的は

- 光が直接あたった部分の色を決める
- スペキュラハイライトを生成する
- 動的な影を生成する

の３つです。

　UE4ではMovableとStationaryなライトが動的なライトに当たります。
　Movableはすべての計算が動的に行われるもので、一番計算負荷が高いライトになります。
　Stationaryは位置や方向は固定で、明るさや色を変更できるライトです。
　Stationaryは**変更しても静的な影の生成に影響を与えないライト**と考えるとわかりやすいかもしれません。

　注意して欲しいのはスペキュラは動的光源の反射なので、動的光源が無いと生成されませんし、影の中にも生成されません。スペキュラは物体の質感を現す大きな要素なので、質感を出すためには動的光源は必須と考えて良いでしょう。

### Static Lighting
　静的(Static)なライトの主な目的は

- 静的な影を事前計算する
- 影の中の静的な間接光を事前計算する
- 動的なオブジェクトに与える間接光を事前計算する

の３つです。
　UE4ではStaticなライトが静的なライトに当たります。
　Unreal Lightmassで事前計算することで、動的に移動しない光源による影や色を事前に計算してシーンに焼き付けます。

　レベルに配置されたStaticなライトとStaticなアクターの色や影は事前計算されて、低い負荷で描画することができます。

## UE4のスタンダードなライト構成

- StationaryなDirectional Lightが１つ
- StationaryかStaticなSkylightが１つ
- シーン内の光源があるところにStaticかStationaryなSpot LightやPoint Lightが複数

　というのが基本的な構成です。
　Directional LightとSky Lightはシーン全体に影響を与えるので、原則として１つしか配置できません。複数配置すると不具合の原因になったり、ライトのコントロールがしにくかったりするので注意が必要です。
　複数のDirectional Lightを切り替えて使う場合はライティングシナリオを使用しましょう。
[ライティングシナリオの公式ドキュメント](http://api.unrealengine.com/JPN/Engine/Rendering/LightingAndShadows/PrecomputedLightingScenarios/)

　Sky Lightの主な目的は空から降り注ぐ無指向性の光をシミュレートすることです。直接光が当たっている部分よりも、影の中に強く影響を与えます。Staticにした場合は影の中にだけ影響を与えます。

　**太陽と空は常に１つずつ**と考えるとDirectional LightとSky Lightが１つなのが腑に落ちるかと思います。

　Spot LightやPoint Lightは基本Staticで。光の色や強さを動的に変更したり、動的な影を生成したい場合のみStationalyにします。

## リフレクション

　ライトとは直接関係無いですが、リフレクションにちょっとだけ触れておきます。
　リフレクションとスペキュラの大きな違いは、**リフレクションは影の中でも描画される**ことです。

# まとめ
　UE4のライトについて、最低限知っておくことを簡単にまとめました。影のことやライトの強さなど語るべきことは多いのですが、キリが無いので。
javax.servlet.annotation.WebServletがインポートできません。の原因と解決

#問題
javax.servlet.annotation.WebServletがインポートできません

##原因
javax.servlet.annotation.WebServletクラスがない
（こいつはServlet3.0から追加された)

##解決
Servlet3.0に切り替えてやる

##方法
プロジェクトを右クリック➡『プロパティ』➡『プロジェクト・ファッセット』➡動的モジュールのバージョンを3.0に変更。完了。

<br>


#例外
動的モジュールに3.0がない。（選択欄がない）

##原因
Servlet3.0バージョンに対応していないTomcatを使用している。
(3.0に対応しているのはTomocat7以上)

##解決
Tomcat７以上を使用する

##方法
プロジェクトを右クリック➡『プロパティ』➡『ターゲット・ランタイム』➡Tomcat7以上を選択。
ニューラルネットワーク入門

# はじめに
サンプルをなぞりながら、Tensorflowを利用してニューラルネットワークを一通り動かしてみる。
参考: 新村 拓也. TensorFlowではじめるDeepLearning実装入門 impress top gearシリーズ . Kindle 版

# やること
手書きの0~9の数字を渡して(入力データ)、それぞれどの数字なのかを判別していく(出力データ)。

画像のデータは1枚あたり、28px*28pxの画像を1列の行列に直し、784個の画素値の並びを利用する。

入力データ: 画素数(784) * 画像の枚数(n)
出力データ: 0~9のどの文字であるかの確率(10) * 画像の枚数(n) 

# 実行

### データの取得
```python
from tensorflow.examples.tutorials.mnist import input_data
import tensorflow as tf

### MNISTデータを格納したオブジェクトを呼び出す
mnist = input_data.read_data_sets("MNIST_data/", one_hot=True)


## 全訓練データの取得
# 訓練用の入力データ、正解データをミニバッチを指定して取得
train_images, train_labels = mnist.train.next_batch(50)

# テスト用の全画像データを取得
test_images = mnist.test.images

# テスト用の全正解データを取得
test_labels = mnist.test.labels
```

### 順伝播
```python
# 入力データを定義
# [ミニバッチサイズ(まだわからないのでNone), 1枚の画像の画素数(画素数)]の行列
x = tf.placeholder(tf.float32, [None,784]) 


### 入力層から中間層
# 正規分布からランダムに取り出したテンソルを生成
# 入力層のユニット数:784, 中間層のユニット数:64
w_1 = tf.Variable(tf.truncated_normal([784,64],stddev=0.1),name="weight1")

# [1, 64]のテンソルにしておけば、tensorflowがいい感じに計算してくれる
b_1 = tf.Variable(tf.zeros([64]),name="bias1")

# 入力[バッチサイズ, 784] * 重み[784, 64] + バイアス= [バッチサイズ, 64]
# relu関数: 0以下→0, 0以上→そのまま出力
h_1 = tf.nn.relu(tf.matmul(x,w_1) + b_1)


### 中間層から出力層
# 出力層のユニット数:10
w_2 = tf.Variable(tf.truncated_normal([64, 10], stddev=0.1), name="w2")
b_2 = tf.Variable(tf.zeros([10]), name = "b2")

# softmax関数:出力される各成分を0~1、すべての成分の和を1にしてくれる確率を表現する関数
out = tf.nn.softmax(tf.matmul(h_1, w_2) + b_2)
```

### 誤差関数
```python
# 正解データ[None(ミニバッチサイズ), 出力層のユニット数]
y = tf.placeholder(tf.float32, [None, 10])
# 出力結果との差を求める → それを2乗して二乗誤差を求める → 全二乗誤差を平均
loss = tf.reduce_mean(tf.square(y - out))
```

### 訓練
```python
# 確率的勾配降下法(学習率:0.5)
train_step = tf.train.GradientDescentOptimizer(0.5).minimize(loss)
```

### 評価
```python
# 正解データ、出力データから最大値は何番目かを取得(一番確率の列(0~9)を求める)
# [バッチサイズ, 1]の行列を作成 → 出力データが正解かどうか判定 → 正解率を求める
correct = tf.equal(tf.argmax(out, 1), tf.argmax(y,1))
accuracy = tf.reduce_mean(tf.cast(correct, tf.float32))
```

### 実行
```python
# 変数の初期化
init = tf.global_variables_initializer()

with tf.Session() as sess:
  #初期化を実行
  sess.run(init)

  # テスト用データをロード
  test_images = mnist.test.images
  test_labels = mnist.test.labels
  
  for i in range(1000):
    step = i + 1
    train_images, train_labels = mnist.train.next_batch(50) #ミニバッチサイズ50
    # ミニバッチ取得 → placeholderへ渡す → train_step実行
    sess.run(train_step, feed_dict={x:train_images, y:train_labels})
    
    # 10stepごとに精度を確認
    if step % 10 == 0:
      acc_val = sess.run(accuracy, feed_dict = {x:test_images, y:test_labels})
      print('Step %d: accuracy = %.2f' % (step, acc_val))
```

### 出力結果
```
Extracting MNIST_data/train-images-idx3-ubyte.gz
Extracting MNIST_data/train-labels-idx1-ubyte.gz
Extracting MNIST_data/t10k-images-idx3-ubyte.gz
Extracting MNIST_data/t10k-labels-idx1-ubyte.gz
Step 10: accuracy = 0.16
Step 20: accuracy = 0.18
Step 30: accuracy = 0.21
...
Step 990: accuracy = 0.89
Step 1000: accuracy = 0.90
```