OmniAICreator/Qiita-1.07M huggingface dataset:
S2Strutsのチュートリアルをやってみよう(#3_180425)

##本日の成果
・s2strutsプロジェクトをtomcatの対象モジュールにする

もっとも簡単な手順で追加が可能でした。。。
[リンク：Eclipse+Tomcatアプリ](http://www.searchman.info/java_eclipse/1100.html)


##困った点
tomcatが起動しない

```text:エラー内容
重大: A child container failed during start
java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException: Failed to start component [org.apache.catalina.webresources.StandardRoot@941a68]
	at java.util.concurrent.FutureTask.report(Unknown Source)
	at java.util.concurrent.FutureTask.get(Unknown Source)
　　　　…etc

4 25, 2018 11:31:59 午後 org.apache.catalina.core.ContainerBase startInternal
重大: A child container failed during start
java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException: A child container failed during start
	at java.util.concurrent.FutureTask.report(Unknown Source)
	at java.util.concurrent.FutureTask.get(Unknown Source)
	…etc

4 25, 2018 11:31:59 午後 org.apache.catalina.startup.Catalina start
重大: The required Server component failed to start so Tomcat is unable to start.
org.apache.catalina.LifecycleException: A child container failed during start
	at org.apache.catalina.core.ContainerBase.startInternal(ContainerBase.java:958)
	…etc
```

原因は調査中。
[これ](https://teratail.com/questions/35487)っぽい。

##コメント
tomcatにプロジェクトを紐づけるのは、気づいてみれば非常に簡単なことだった。。。
tomcatが動かない件は、"これ"をあたってみるところから始める。
Javaサーブレット/JSP リクエストスコープ その２

# リクエストスコープとは
<font color="DodgerBlue">リクエストスコープ</font>はリクエストの度に生成されます。保存したインスタンスは、レスポンスが返されるまで利用できます。
このスコープを利用すれば、フォワード元とフォワード先でインスタンスを共有できます。

# リクエストスコープの正体
リクエストスコープの操作は、HttpServletRequestインスタンスのメソッドを使うことで実現します。

```java:リクエストスコープに保存する
request.setAttribute("属性名" <String>, インスタンス <Object>);
```
```java:リクエストスコープからインスタンスを取得する
取得型 名前 = (取得型) request.getAttribute("属性名" <String>);
```
# サンプルプログラム

```java:RequestScopeSample.java
protected void doGet (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

  //インスタンス生成
  Human human = new Human("マサト", 25);

  //リクエストスコープにインスタンスを保存
  request.setAttribute("human", human);

  //リクエストスコープからインスタンスを取得
  Human h = (Human) request.getAttribute("human");
}
```

# サンプルプログラム - JSPファイル -
JSPファイルでリクエストスコープを使うときは、暗黙オブジェクト「request]を使用しましょう。

```JSP:JSPファイルでリクエストスコープを利用
<%@ page import="model.Human" %>
<%
//リクエストスコープからインスタンスを取得
Human h = (Human) request.getAttribute("human");
%>
<%= h.getName() %>君は<%= h.getAge() %>歳です。
```
ブラックジャックをGoで実装してみた。

「[プログラミング入門者からの卒業試験は『ブラックジャック』を開発すべし](https://qiita.com/hirossyi73/items/cf8648c31898216312e5)」という気合の入った記事が投稿されていたので実際にやってみた。

元記事ではC#を使うことを想定していたようだが、普段使っているGoを選択した。

## ソースコード

[github.com/aimof/blackjack](https://github.com/aimof/blackjack)

ぱっとやってみた感じそれっぽく動いています。

元記事内縦長のかわいいAA以降は読んでいません（より正確に言うならルールすらちゃんと読んでなかった）。
２〜３時間のやっつけ仕事でテストも最低限なので、ちょっと見せびらかすには物足りない…。

## ポイント

指摘されていたポイントを詰めていきます。

### カードの管理

0~51の整数で管理しました。

```go
type card struct {
	id int
}

func (c card) suit() string {
	switch c.id % 4 {
	case 0:
		return "C"
	case 1:
		return "D"
	case 2:
		return "H"
	default:
		return "S"
	}
}

// Aの場合1を返す
func (c card) strength() int {
	if c.id >= 40 {
		return 10
	} else {
		return c.id/4 + 1
	}
}

func (c card) number() string {
	switch c.id / 4 {
	case 0:
		return "A"
	case 9:
		return "T"
	case 10:
		return "J"
	case 11:
		return "Q"
	case 12:
		return "K"
	default:
		return strconv.Itoa(c.id/4 + 1)
	}
}

func (c card) toString() string {
	var s string
	s += c.suit()
	s += c.number()
}
```

それぞれ、

* suitメソッド：スート（CDHS）を返す
* strengthメソッド：強さ（Aのときは1）を返す
* numberメソッド：気持ちの悪い名前をしているが、表示用のカード名を返す（ATJQKはアルファベット）
* toStringメソッド：スートとランクをくっつけた文字列を返す

### 山札について

```go
type deck struct {
	// if true, the card is drawn.
	cards [52]bool
}

func newDeck() *deck {
	return &deck{}
}

func (d *deck) draw() int {
	var drawnN int
	for {
		n := rand.Intn(52)
		if d.cards[n] {
			continue
		} else {
			d.cards[n] = true
			drawnN = n
			break
		}
	}
	return drawnN
}
```

こんな感じで配列での実装です。
カードドローの実装は、デッキにないものをひこうとした場合には再抽選という原始的な方法。
ここは実装を変えたい。

ちなみに、デックはグローバル変数にしてある。
この規模ならわかりやすいかと思ったが果たしてどうなのだろうか？

### Aは1か11か問題

```go
type cards []card

func (c cards) reveal() (sumExceptAce, countAce int) {
	for _, card := range c {
		if card.strength() == 1 {
			countAce++
		} else {
			sumExceptAce += card.strength()
		}
	}
	return sumExceptAce, countAce
}

func (c cards) strength() int {
	var sum = 0
	sumExceptAce, countAce := c.reveal()
	switch countAce {
	case 0:
		sum = sumExceptAce
	case 1:
		if sumExceptAce <= 10 {
			sum = sumExceptAce + 11
		} else {
			sum = sumExceptAce + 1
		}
	default:
		if sumExceptAce+countAce > 11 {
			sum = sumExceptAce + countAce
		} else {
			sum = sumExceptAce + countAce + 10
		}
	}
	if sum > 21 {
		return 0
	}
	return sum
}
```

ちょっと複雑になってしまいました。エース以外の和とエースの枚数で計算しています。

### playerとdealerの実装について

```go
type dealer struct {
	cards cards
}

func (d *dealer) play() {
	for d.cards.strength() < 17 && d.cards.strength() > 0 {
		d.cards = append(d.cards, card{id: usedDeck.draw()})
	}
}

type player struct {
	cards cards
}

func (p *player) play() {
	p.cards = append(p.cards, card{id: usedDeck.draw()})
}
```

元記事ではいろいろと議論が起こっているようだが、プレイヤーは手札を持ってプレイだけしていればいいと思う。

## まとめ

結構楽しかった。工夫のしどころが結構多かったです。

ご意見お待ちしています。
「～とおり」と「～とおりに」の区別

チームメンバーのメールに「先日連絡したとおりに、4/26〜5/6は休暇を取らせていただきます。」という文章がありました。その「とおりに」の「に」が必要かどうか疑問に感じました。<br>いろいろ調べたが、「…とおりに…する」という例や説明が多いので、なんとなく合っていると思いますが、残念ながら自分が納得できる説明が見当たらなかった。私のように語学のセンスがない人は理解できないことでもあります。
困り果てたあげく、かつての上司に助けを求めました。そして、以下の回答をいただきました。
「〜のとおりは、漢字では通りと書きます。
これは日本語では、
予め定められたことに従う、沿う、準拠するという意味合いになります。
このとき、〜のとおり、のように「に」がないと、決めていること、定めていること自体に重きがおかれています。
それに対して、「に」があると、そのことに従うこと、決めごとを履行するため、というように、従う、そのとおりにやるという意味合いが強くなります。
あとは、それを伝える相手との間に承認意識があるかどうかにより場合でしょうか。
「に」がある場合は、互いに承認しているかどうかに関わらず、という意味合いが強くなります。
ただ、大抵の人はこの違いを意識できていません。ほぼ、どっちも同じと思っています。」
つまり文法的にはどちらも正しく、前者を強調したいなら、「…とおり」を使用し、後者を強調したいなら、「…とおりに」を使用するということですね。
これでようやく気持ちが晴れました。先生に感謝の気持ちいっぱい！！！

周@ソフトシンク
水曜ワトソンカフェvol.8 「DSXからWatson Studioへ最新動向」 個人的まとめ

# 基本情報
## イベントページ  
https://bmxug.connpass.com/event/84703/  

## 開催場所
大手町パークビルディングのSplunk様オフィス

# Splunk 様スポンサーセッション
Splunk の語源はファミコンソフトのスペランカーと一緒。  
大量のログからお宝を探す。  

Splunk = マシンデータ分析プラットフォーム

[アメリカ企業年収ランキング](http://www.businessinsider.com/highest-paying-us-companies-2017-4/#4-splunk-22) では Google や Facebook を抜いて 4位

# DSX が Watson Studio になってのチュートリアルや最新動向
## Watson Studio でできること
Cognitive系+機械学習系

* Visual Recognition: 自分たちのデータを使用して学習できる
* DSX にあったもの (Jupyter, RStudio, SPSS, Knowledge Catalog)
* Watson Machine Learning
* Neural Network Modeler

### Visual Recognition
できることが増えた。 
画像アップロードしてカスタムモデルを構築後、各画像のラベルの付け替え、再学習などを行うことができる。 
その他細かな設定がGUI上から設定可能になった。 
以前は一度学習すると、再学習したいときにはモデルを削除して再度１から学習するしかなかった。  

※ 私のアカウントで試そうと思いましたが、実行できませんでした。Visual Recognition の料金プランが変更になり、ライトアカウントでは30日間のみ使用可能で、それを過ぎると無料枠も使えないようです。

### Notebook
Anaconda, Spark が使える。 
（Jupyter と Zeppelin のこと？）
無料アカウントでは同時に１つのカーネルしか実行できない。

※ Notebook 環境は Google Colaboratory が GUI も無料で使用でき優秀です。

### Neural Network Modeler
GUI 上でニューラルネットワークのモデルを組み立てて学習可能。 
GUI で組み立てたモデルは、TF, Keras, Caffe, PyTorch などのコードとして Download 可能。

Publish すると、 Watson Machine Learning 環境へデプロイされる。

#### 注意点
Machine Learning CLI (bx ml) を入れておくと便利
ICOS に IBM Watson から自動で作成されるデフォルトの `not delete` と書いてあるバケットはNotebookなどから使用できないので、データの配置などで必要なバケットは自身で作成する。 

※ IBM Watson 関連のデータは裏では IBM Clud Object Storage へ大体保存されます。

## 全体的な使用感
今まで Watson のサービス個別にあったダッシュボードは今後 Watson Studio の画面に統合されていくのではないか。

# Think 2018 FB
## Gini's
検索できるデータは 2割、検索できていない企業内データは 8割 
Watson へのアクセスの9割はAWSから

## Watson Assistant
Watson Assistant = 旧 Watson Conversation + Virtual Agent

### 旧バージョンとの違い
学習済みの Intent がある。

## IBM Cloud Private for Data
オンプレにデータを置いておき、学習 → モデルだけPublicに上げる。そのあたりをシームレスに実現できる（？）

## データコンサル
IBM が無償でデータコンサルをする（？）

# 推しの書籍
イベント中に推されていた書籍 
[初めてのWatson 改訂版 --APIの用例と実践プログラミング](https://www.amazon.co.jp/%E5%88%9D%E3%82%81%E3%81%A6%E3%81%AEWatson-%E6%94%B9%E8%A8%82%E7%89%88-API%E3%81%AE%E7%94%A8%E4%BE%8B%E3%81%A8%E5%AE%9F%E8%B7%B5%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0-%E4%BA%95%E4%B8%8A-%E7%A0%94%E4%B8%80/dp/4865941282)

# イベント情報
- Think 2019 2/12-15@サンフランシスコ
- Think Japan 6/11@Tokyo
terariaサーバーのCentOSで構築するメモ

自分用です

```bash

yum update -y
rpm --import "http://keyserver.ubuntu.com/pks/lookup?op=get&search=0x3FA7E0328081BFF6A14DA29AA6A19B38D3D831EF"
yum-config-manager --add-repo http://download.mono-project.com/repo/centos/
yum install -y mono-complete screen

mono --version

vim /etc/firewalld/services/terraria.xml
# 下の内容適用
firewall-cmd --zone=public --permanent --add-service=terraria
firewall-cmd --reload
firewall-cmd --zone=public --permanent --list-services

useradd -d /home/tshock tshock
passwd tshock

sudo -su tshock
cd ~
wget https://github.com/Pryaxis/TShock/releases/download/v4.3.25/tshock_4.3.25.zip
mkdir 4325
unzip -d 4325/ tshock_4.3.25.zip
cd 4325/
mono TerratiaServer.exe

```

```xml

<?xml version="1.0" encoding="utf-8"?>
<service>
  <short>Terraria</short>
  <description>Open TCP port 7777 for incoming Terraria client connections.</description>
  <port protocol="tcp" port="7777"/>
</service>

```
IntelliJ IDEAでKotlin Androidアプリ開発環境構築！ 起動編

# 目的
下記で作成したProjectを動かしてみる
https://qiita.com/g0z4ru/items/24bca8e6fb691f29260f


# 1. 起動する
#### 実行構成作成
上部のタブから `Run > Run...` を選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/121447/5240ff5e-c82c-2d08-52d3-a631facba7f3.png)

`+ > Android App` を選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/121447/6023c5eb-4f7e-f2d7-efdd-160738881c42.png)

`Module` を選択しApplyを選択しRunを選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/121447/0bcaded8-66d1-dbed-4f84-f5591742b62a.png)

`Create New Virtual Device` を選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/121447/525ee20f-3bda-f961-cca0-e70c6edce862.png)

使用したいデバイスを選択を選択
![image.PNG](https://qiita-image-store.s3.amazonaws.com/0/121447/be3c84db-e4bd-d7d1-e0c0-b5c7f69f2d0f.png)

`Download` 選択してDLする
![image.PNG](https://qiita-image-store.s3.amazonaws.com/0/121447/75586027-0340-4434-c116-bab5b6b156da.png)

選択したデバイスが表示されるので、選択してOKを選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/121447/bcf8f5d1-f6da-b310-a349-6e3972ed33a7.png)

`Error running 'Hello World': Instant Run requires 'Tools | Android | Enable ADB integration' to be enabled.`
とエラーが出る場合は
![image.png](https://qiita-image-store.s3.amazonaws.com/0/121447/f385c89a-2158-9a7e-0b5f-ce40c32b7f75.png)
上部のタブから `File > Settings > Build, Execution, Deployment > Instant Run` を選択
そして `Enable Instant Run to hot swap code/resource changes on deploy (default Eenabled)` のチェックを外す
![image.png](https://qiita-image-store.s3.amazonaws.com/0/121447/14732d70-77e6-10c5-65f4-ea7f9a26833d.png)

#### 実行
右上の再生ボタンで実行する
![image.png](https://qiita-image-store.s3.amazonaws.com/0/121447/b1db5554-e54e-b685-8f86-72f4b0bdcc99.png)

実行するとこのような画面が開く
![image.png](https://qiita-image-store.s3.amazonaws.com/0/121447/afa70800-6ea7-5084-3e64-57f015edfa01.png)
（3STEP）画像のアップロード機能をつける

##paperclipを使って画像のアップロード機能をつける

###①paperclipのインストール
ImageMagickをインストールする。

```ruby:terminal
$ brew install imagemagick
```

ImageMagickとは、コマンドラインより画像を操作したり表示するためのツールです。インストールされたかの確認は、terminalよりコマンド```$ brew list```と打ち込めばできます。

paperclipのgemをインストールします。

```ruby:gemfile
gem "paperclip"
```

bundle installします。インストール後はサーバーを再起動すると反映されます。

```ruby:terminal
$ bundle install
```

インストールされたgemは、「Gemfile.lock」ファイルに格納されています。

```ruby:Gemfile.lock
GEM
  remote: https://rubygems.org/ 
        paperclip (4.3.0)
  
```



###②usersテーブルにpaperclip用のカラムを追加する
コマンド```$rails g paperclip```でマイグレーションファイルを追加します。

```ruby:terminal
$ #rails g paperclip モデル名　カラム名
$  rails g paperclip user image_url
$ #マイグレーションファイル実行
$  bundle exec rake db:migrate
```

###③userモデルにpaperclipの設定を追記
Userモデルにアイコン画像の設定をすることで、画像のアップロードができるようになります。

■has_attached_file 
画像のサイズやデフォルトの画像、保存先を指定できます。
```default_url```には、画像が設定されていない場合に表示するデフォルト画像の格納先を指定します。

```ruby:user.rb
class User < ActiveRecord::Base
$  has_attached_file :image_url,
　　　　　　　　styles:  { medium: "画像サイズ", thumb: "画像サイズ" } 
   default_url: "画像格納先"

```

■validates_attachment_content_type 
画像のサイズや種類でバリデーションを設定します。

```ruby:user.rb
class User < ActiveRecord::Base
 validates_attachment_content_type :image_url,                             
                                    content_type: ["画像の種類"]
```

種類と指定方法

| 指定方法 | 備考 |
|:--|:--|
| image/jpg | jpgファイル |
| image/png | pngファイル |
| image/gif | gifファイル |
GCP に ubuntu 17.10 デスクトップ環境を作り iPad から Remote Desktopで使ってみた


Google Cloud Platform にデスクトップ環境を作った動機

iPad いつでもどこでも使えて便利だね。
-> パソコンいらないのでは
-> でもプログラム書いたり無理だし複雑なことや重たい処理はできない
-> パソコンに Remote Desktop でつないでやるかな
-> Cloud にデスクトップ用意して Remote Desktop したらいつでもつかえるんじゃないの
-> やってみた
（iPadからRemote Desktop アプリでつないでる）

![IMG_0116.PNG](https://qiita-image-store.s3.amazonaws.com/0/31723/29973ba3-4b9e-c157-7532-32627919364f.png)

感想

- 東京リージョンにしたのでそこまでストレスもなく普通に使える。
- スクリーンキーボードだけどESCキーも出るしvimもなんとか使える。
- Google CloudConsole App で必要な時だけインスタンス起動、用が済めば停止すれば無駄がない
- なかなかいいんじゃない？



## つくりかた

### 1. GCPコンソール > Compute Engine > インスタンスを作成

インスタンスのつよさはお好みで
> n1-standard-1

デスクトップともなるとレイテンシ大事。東京リージョンにする
> asia-northeast1-*

xrdpが古いとうまくいかないのでOSは新しいほうが良い。 

> ubuntu 17.10  

あとは適当。
http / https のFireWall のチェックボックスをONにしておいたけど
なくてもRDPのポートあいているのかな？

### 2 インスタンス起動 SSH で設定していく

デスクトップ環境入れる
> sudo apt install gnome-core

リモートデスクトップを受けられるようにする（VNCなど別途いれる必要なし）
> sudo apt install xrdp

リモート接続用のユーザ追加
sudo の権限もつけておきましょう
> sudo adduser [ユーザ名]
> sudo gpasswd -a [ユーザ名] sudo


Xウィンドウをどのユーザでも起動できるようにする
sudo vim /etc/X11/Xwrapper.config

> allowed_user=anybody

一度念のため再起動。これで一応つながるようにはなるけど
XRDPでつなぐと繰り返し警告が出る。
color-managerの権限が無い？とのことでこの記述で対処。

参考 : http://c-nergy.be/blog/?p=11336 

> sudo vim /etc/polkit-1/localauthority.conf.d/02-allow-colord.conf

```02-allow-colord.conf
polkit.addRule(function(action, subject) {
   if ((action.id == "org.freedesktop.color-manager.create-device" ||
        action.id == "org.freedesktop.color-manager.create-profile" ||
        action.id == "org.freedesktop.color-manager.delete-device" ||
        action.id == "org.freedesktop.color-manager.delete-profile" ||
        action.id == "org.freedesktop.color-manager.modify-device" ||
        action.id == "org.freedesktop.color-manager.modify-profile") &&
       subject.isInGroup("{group}")) {
      return polkit.Result.YES;
   }
});
```

polkitは細かく権限管理をする仕組みのようです。

以上で完了です。

あとはふつうのデスクトップ環境として設定していきます。


----------------

[補足]トップ画像の環境で適用してあるデスクトップテーマ、アイコンについて

テーマ : arc-theme
https://github.com/horst3180/arc-theme
> sudo apt install arc-theme

アイコン : papirus
https://github.com/PapirusDevelopmentTeam/papirus-icon-theme
> sudo add-apt-repository ppa:papirus/papirus
> sudo apt update
> sudo apt install papirus-icon-theme

スタートボタンみたいな機能とドックみたいな機能

gnome shell extension をいれる。
https://extensions.gnome.org/
Firefox の拡張として入れるとOK。ぐぐればでてくるけど
ブラウザ上で好きな機能を選んで ON にするだけでインストールされる。

 -  arc menu
    -  Windows のスタートボタンみたいな機能
    -  https://extensions.gnome.org/extension/1228/arc-menu/

 -  dash to dock
    -  Gnomeの普通のドックの代り
    -  https://extensions.gnome.org/extension/307/dash-to-dock/
C#の基礎

##値の種類
---
・整数
　小数点以下の値を持たないもの
・実数
　小数点以下の値までを含むもの
・真偽値
　「〇か　☓か」というような二者択一の状態を表すもの
##リテラルとその種類
---
直接ソースコード内に書かれている値を「リテラル」といいます。
リテラルは、値の種類によって書き方が違います。

・整数リテラル
　整数の値は、ただその値を書くだけです。
　例）1　123　1000

・実数リテラル
　実数の値は小数点をつけて表します。
　例）1.23　10000.0　0.0001
　※小数点以下がなくても、.0を付けたら実数扱いになるらしいですね
　　100は整数として扱われるが、100.0は実数として扱われるらしい。

・テキストリテラル
　テキストの値は、テキストの前後にダブルクォート記号（"）を付けます。
　例）"城"　"114"
 
・真偽値リテラル
　真偽値は「〇か☓か」の二者択一の値です。
　値も２つしかなくて、「true」と「false」です。それぞれ役割が決まっていています
「true」は正しい、などの場合に使い、「false」は正しくない、間違っている　など場合に使います。

変数
---
変数とは、値を入れるための入れ物のようなものです。
変数は使う前にあらかじめ宣言しないと使えない。
宣言する時はこんな感じです
例）int a;
※int（タイプ名）　a（変数名）
変数に値を入れる時はこんな感じです。
例）a = 100;
※a（変数名）　100（値）

整数のタイプ
---
整数にはたくさんのタイプが用意されいます。
なんでそんなあんねん？って思いましたが値を保管する入れ物の大きさが違うらしいです。

どんな種類があるか紹介してみる

・sbyte
　これは「符号付き8ビット整数」というものです
　-128～127の範囲の値を保管できる
・byte
　これは「符号なし8ビット整数」になります
　符号とは「-」のことです
　なので、こいつは0～255の範囲を扱えます
・int 
 これは「符号付き32ビット整数」です
　プラスマイナス20憶ぐらいまでいけるらしいです
　
これ以上先のものは兆の単位を超えて京という単位まで行きます。
1800京？ぐらいまでかな？
###最後に…
------
だらだら書いてたら凄い長くなっちゃった
勉強頑張りまーす
人感センサーPaPIRsをArduinoで使って、人の通過を検知する

##目的
通路のある一線を人が通ったことを検知して、映像系ソフトにタイミングを送りたい。
設置する予定のポイントが屋外＋幅が5mぐらいある通路なので、屋外でも正しく反応するか調べる。

##使用したモノ

[焦電型赤外線センサー　ＰａＰＩＲｓ（ＶＺ）　５ｍ　ＥＫＭＣ１６０１１１１](http://akizukidenshi.com/catalog/g/gM-09750/)
480円

Arduino UNO
抵抗 10kΩ



##焦電型赤外線センサーPaPIRsについて

Panasonicの製品。[製品ページ](https://www3.panasonic.biz/ac/j/control/sensor/human/index.jsp)いわく
> 焦電型赤外線センサとは、センサ自身からLEDなどの光を発光するのではなく、周囲と温度差のある人（物）が動く際におこる赤外線の変化量を検出するセンサです。 温度差を検出するため、体温を持つ人体の検出に適します。 

とのこと。
パナさんは親切なので、[公式](https://www3.panasonic.biz/ac/j/control/sensor/human/index.jsp)にデータシートから使い方から全部ある。
詳しいことは公式を参照。



##配線

[回路図]→おいおいFritzingで作成

参考
[焦電型赤外線センサ PaPIRs を使う](https://qiita.com/hotchpotch/items/aae3f22a96c70affc55b)

配線自体は簡単。出力側を抵抗でプルダウンする。
<img src='https://qiita-image-store.s3.amazonaws.com/0/139599/e6b93a74-7829-f1e3-8cd6-84bcc111404d.jpeg' width=70%>
ブレッドボードだと配線しにくい
PaPIRsはデジタル出力なので、D2につないでおく。

##コーディング

コード参考
[【まるで魔法】手をかざすとぴかぴか光る！焦電センサーでLED3つを光らせてみた！【最終回・焦電センサーの接続】](http://toboli.hatenablog.com/entry/2017/01/23/190453)
[5ドル！ラズパイ・ゼロ（Raspberry pi Zero）でIoT　(10)　人感センサ1 PaPIRs](http://www.denshi.club/pc/raspi/5raspberry-pi-zeroiot111-papirs.html)

とりあえずシリアルで01出力してみる
注意事項としては、PaPIRsの回路が安定して値を出力するまでに電源投入から30秒かかるらしいので、最初に30秒待機する。

```PaPIRs_Test001_Serial.ino
#define PPR 2
int bState = 0;

void setup() {
  pinMode(PPR, INPUT);
  Serial.begin(9600);
  delay(30000);//wait for 30s until the sensor voltage becomes stable
}

void loop() {
  int State = digitalRead(PPR);
  
  if(bState != State){
    bState = State;
    Serial.println("");
  }
  
  if(State == HIGH){
    Serial.print(State);
  }else{
    Serial.print(State);
  }

  delay(100);
}
```

出力結果

```
000000000000000000000000
11111
0
1111111111111111
0
111111111111
000
11111111
0
11111111111111111111
0
1
00
11
0
11111
0
1111111111
0000000000000000000000
```

ちょっと待ってから、手をゆっくり翳してみた。
単純に各瞬間の値を読んで出してるだけなので、途中で値が振れている。
あとシリアルで01出すだけだと見にくいので、LEDに対応させてみる。

```PaPIRs_Test002_LEDblink.ino
#define PPR 2
#define LED 4

float State = 0;

void setup() {
  pinMode(PPR, INPUT);
  delay(30000);//wait for 30s until the sensor voltage becomes stable
}

void loop() {
  int readState = 0;
  for(int i = 0; i < 10; i++){
    readState += digitalRead(PPR);  
  }

  State = State * 0.8 + (readState/10)*0.2;
  if(State >= 0.5){
    digitalWrite(LED, HIGH);
  }else{
    digitalWrite(LED, LOW);
  }
  
  delay(100);
}
```

(動画)→後で撮影

ローパスフィルタっぽい実装で値の振れをどうにか出来るかと思ったが、いまいち解決していない。
コレに関してはforループの回数を増やすとか平均化するとかで解決できそう(参考:[Arduinoで可変抵抗器のゆらぎを軽減する](https://jumbleat.com/2016/08/17/reduce_fluctuations/))だが、今回は別ソフト(vvvv)にそのまま送ってそっちで処理するようにする。
それはまた別で書こう。

##まとめ/次
PaPIRsはめっちゃ簡単に人(熱源)の動きを検知できる。
次回はPaPIRs自体の性能の検証と、vvvvに渡したあとの数値処理をやる。


本人Twitter:[紙魚@火狐商會(@____Bel)さん | Twitter](https://twitter.com/____Bel?lang=ja)
日常からプログラミング、ハード製作まで高頻度でつぶやいています。興味があれば。
Unreal Engineのスキニング

# 概要

Unreal Engine(UE)でのスキニング情報がどう扱われているのかを知ることでスキニングとUEへの理解を深めましょう。
この記事はUE4.19のソースコードを元にして書かれています。

# スキニングに必要なもの

CPU上でスキニング結果を取得できるComputeSkinnedPositions関数を見ればスキニングに必要なものは見えてきます。

```cpp:/github.com/EpicGames/UnrealEngine/blob/4.19/Engine/Source/Runtime/Engine/Private/Components/SkinnedMeshComponent.cpp
void USkinnedMeshComponent::ComputeSkinnedPositions(
    USkinnedMeshComponent* Component,
    TArray<FVector> & OutPositions,
    TArray<FMatrix>& CachedRefToLocals,
    const FSkeletalMeshLODRenderData& LODData,
    const FSkinWeightVertexBuffer& SkinWeightBuffer);
```

ComputeSkinnedPositions関数内部で呼ばれているGetTypedSkinnedVertexPosition関数で1頂点のスキニングができます。

```cpp:/github.com/EpicGames/UnrealEngine/blob/4.19/Engine/Source/Runtime/Engine/Private/Components/SkinnedMeshComponent.cpp
template <bool bExtraBoneInfluencesT, bool bCachedMatrices>
FVector GetTypedSkinnedVertexPosition(
	const USkinnedMeshComponent* SkinnedComp,
	const FSkelMeshRenderSection& Section,
	const FPositionVertexBuffer& PositionVertexBuffer,
	const FSkinWeightVertexBuffer& SkinWeightVertexBuffer,
	const int32 VertIndex,
	const TArray<FMatrix> & RefToLocals);
```

templateでは追加ボーンの有無、つまり4ボーンスキニングか8ボーンスキニングかを静的に決定しています。これは頂点サイズを静的に決定するために使われます。またRefToLocalsという名前で表現されているボーン行列のキャッシュを利用するかどうかも静的に決定されます。単純化のためにRefToLocalsはキャッシュ済みとして話を進めます。

また、USkinnedMeshComponentの親子関係次第でMasterPoseComponentの影響を受けるのですが、こちらも単純化のため省略します。

本来なら頂点Indexに合わせてVertexを並べたバッファをGPUに送って計算するのですが、今回は省略しています。

```cpp
FSkeletalMeshModel* Model = GetImportedModel();
for(const FSkeletalMeshLODModel& LodModel : Model->LODModels)
{
    int32 AllSectionVertexIndex = 0;
    
    for(const FSkelMeshSection& Section : LodModel.Sections)
    {
        // そのセクションでの開始頂点番号がBaseVertexIndex
        check(Section.BaseVertexIndex == AllSectionVertexIndex);
        // そのセクションでの頂点数がNumVertices
        check(Section.NumVertices == Section.SoftVertices.Num());
        for(const FSoftSkinVertex& SoftVertex : Section.SoftVertices)
        {
            FVector SkinnedPosition(0, 0, 0);
            // ExtraBoneの定義に合わせてボーンインデックスが4か8存在する
            const int32 MaxBoneInfluences = bExtraBoneInfluencesT ? MAX_TOTAL_INFLUENCES : MAX_INFLUENCES_PER_STREAM;

            for(int32 InfluenceIndex = 0; InfluenceIndex < MaxBoneInfluences; InfluenceIndex++)
            {
                const uint8 BoneIndex = SoftVertex.InfluenceBones[InfluenceIndex];
                const uint8 InfluenceWeight = SoftVertex.InfluenceWeights[InfluenceIndex];

                // BoneIndexはそのまま使うのではなく、SectionのBoneMapを介して有用な値となる
                const int32 MeshBoneIndex = Section.BoneMap[BoneIndex];
                const FMatrix& RefToLocal = RefToLocals[MeshBoneIndex];
                // uint8で格納されているので
                const float Weight = StaticCast<float>(InfluenceWeight) / 255.0f;
                SkinnedPosition += RefToLocal.TransformPosition(SoftVertex.Position) * Weight;
            }
            // 1頂点スキニング完了
            AllSectionVertexIndex++;
        }
    }
}
```

GPUやらシェーダやらバッファの作成が絡んでくるとゲームスレッドやらレンダリングスレッドが出てきて複雑に感じますがスキニングだけに焦点を当ててみれば意外と簡単だったのではないでしょうか。

では良きUnreal C++を。
IntelliJ IDEAでKotlin Androidアプリ開発環境構築！ 導入編

# 目的
IntelliJでKotlin Androidアプリのproject構築をする

# 1. Android SDKのインストール

#### Android Studioのインストール
[Android Studio](https://developer.android.com/studio/index.html)からDLしてインストールする

#### Android SDKのインストール
`Configure > SDK Manager`を選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/121447/bbc6060e-adbd-afcc-76f5-ca2aa603351f.png)


左のリストから `Android SDK` を選択し、必要なSDKを選択してOKを押してインストール
![image.png](https://qiita-image-store.s3.amazonaws.com/0/121447/19b16e6b-0205-f407-7e3d-1365b35fd5a7.png)


# 2. IntelliJ IDEAのインストール
#### IntelliJ IDEAのインストール
[IntelliJ IDEA](https://www.jetbrains.com/idea/download/)からDLしてインストールする
`.kt` にチェックを入れて次へ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/121447/3b9137f5-0321-f013-09ff-10ead5a1bbfd.png)


# 3. IntelliJ IDEAでproject作成
#### SDKの設定
`Configure > Project Defaults > Project Structure`
 と選択する
![image.png](https://qiita-image-store.s3.amazonaws.com/0/121447/d2edf1eb-f6de-f0b9-4471-6fd90c143b83.png)

左のリストから `SDKs` を選択し、`+ > JDK` を選択する
![image.png](https://qiita-image-store.s3.amazonaws.com/0/121447/53554a29-e942-6d44-c6b2-1f168da66776.png)
JDKを選択する

左のリストから `SDKs` を選択し、`+ > Android SDK` を選択する
![image.png](https://qiita-image-store.s3.amazonaws.com/0/121447/1c53be54-6030-5355-5ae5-78177258577c.png)

1でインストールしたSDKの場所を選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/121447/78d5c0a5-d50e-9c9a-f589-928aff58a4f8.png)

`Java SDK` と `Build target` を選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/121447/083ac68b-5bda-3056-58db-8122845bb4c1.png)

#### プロジェクト作成
`Create New Project` を選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/121447/df4df936-ef4c-4d0c-38be-35deedf5b095.png)

左のリストから `Android` を選択し `include Kotlin Support` にチェックを入れNextを選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/121447/42c745e2-0700-f783-7776-fe0f859d44d0.png)

`Phone and Tablet` を選択し対象を選びNextを選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/121447/48a0c5c8-0b22-1e1e-4f4d-5058a92e403c.png)

Empty Activityを選択しNextを選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/121447/6511643b-7080-ed5b-db61-9df8b639b174.png)

このままFinishを選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/121447/68d5cf70-3257-73f8-6989-cfa2217a530c.png)

このようにProjectが構築される
![image.png](https://qiita-image-store.s3.amazonaws.com/0/121447/c5d35fbf-ca0e-a056-3a8f-5eb2aee3b4bf.png)
Coursera Deep Learning 【course1  week2】 私的なメモ(誰かの役にたてば幸いです)

#この記事について
この記事は筆者がCourseraの"Deep Learning"というオンライン授業を受ける中で、思考を整理したり、知らなかったことを書き留めるための私的なメモである。
なおこの記事では（多分Deep Learningのオンライン授業もその前提だと思いますが）Courseraの別のオンライン授業、Ng Andrew先生の"Machine Learning"を既習のものとしています。

**私的なメモではありますが、筆者と同じくMachine Learningの授業を一通り終えたけど、まだDeep Learningには馴染みがないという方には少しばかりか学習の助けになれば幸いです。**
#コース1-Week2 ニューラルネットワークの基礎
##ロジスティック回帰
nx次元ベクトルxが与えられとき、y = P(y=1|x)を出力するのがロジスティック回帰。
パラメータ：w=nx次元ベクトル、b=バイアス項（実数）
出力：　y = Sigmoid(wT*x + b)       ※別の書き方σ(wT*x + b)
ロジスティック回帰はy=1である確率として０〜１の数値で出力する必要があるのでシグモイド関数を使う。
![写真（2018-04-15 19.16）.jpg](https://qiita-image-store.s3.amazonaws.com/0/209951/9d2f6e40-acdd-fad6-2faf-890117a82748.jpeg)

パラメータwとbを学習させる。
##ロジスティック回帰の損失関数・コスト関数
ロジスティック回帰において二乗誤差を損失関数に使うと、局所解を多く持つようになってしまい最適化が上手に出来ないので、使わない。ロジスティック回帰の損失関数は綺麗に凸な関数なのだ。
ここで損失関数は一つの教師データを対象にしており、コスト関数はm個の教師データを対象にしている。よってコスト関数はm個のデータの損失関数の平均である。
また、損失関数はyがtにいかに近いかの評価指標であり、コスト関数はパラメータwとbがどのくらい正確に推論をできているかの評価指標である。
損失関数：　l(y, t) = -(t*log*y + (1 - t)*log*(1 - y))

コスト関数：　J(w, b) = 1/m*Σi=1:m*l(y(i), t(i)) = -1/m*Σi=1:m[t(i)*log*y(i) + (1 - t(i))*log*(1 - y(i))]
![logistic_loss.jpg](https://qiita-image-store.s3.amazonaws.com/0/209951/27be9ed3-39b9-de5c-e87a-4eb64ee1462b.jpeg)
##最急降下法
![gradiet.jpg](https://qiita-image-store.s3.amazonaws.com/0/209951/8873a819-f732-5dca-e9d8-ed80bc3163a2.jpeg)
##計算グラフ
ロジスティック回帰やニューラルネットワークの順伝播や逆伝播(微分)の計算を分かりやすく表現できる。
![calculate_graph.jpg](https://qiita-image-store.s3.amazonaws.com/0/209951/c868e1fa-2147-9a3e-43a7-64f021880927.jpeg)
##ロジスティック回帰の計算グラフ
![logistic_graph.jpg](https://qiita-image-store.s3.amazonaws.com/0/209951/1cafc0c4-8db0-ef91-9654-2870ae784b16.jpeg)
##Python・NumPyのコーディングにおける注意
(1, 5)のベクトルを作るときにnp.randm.randn(5)にするとランク１配列が生まれ、これはベクトルではない。
ランク１配列は転置や内積といったベクトル・行列の基本的な操作が出来ないので使わない。
ベクトルを作るには、np.random.randn(1,5)かnp.random.randn(5,1)
##学習のデータに対する前処理（ロジスティック回帰）
1. train_set_x_orig, train_set_y, test_set_x_orig, test_set_y, classes = load_dataset()でデータをインポート

2. train_set_x_origとtest_set_x_origを１枚の画像をベクトルとして表現した行列に整形する。
train_set_x_flatter = train_set_x_orig.reshape(train_set_x_orig.sape[0], -1).T

3. train_set_x_flatterとtest_set_x_flatterの各行の要素を/255にして標準化。
train_set_x = train_set_x_flatter/255.
##ロジスティック回帰　m個の教師データでの順伝播
![logstic_m_sampledata_foward.jpg](https://qiita-image-store.s3.amazonaws.com/0/209951/7873bcb8-4135-e940-9f8c-7a712c01429e.jpeg)
##ロジスティック回帰　for文とベクトル計算の比較
![logistic_vect_for_compare.jpg](https://qiita-image-store.s3.amazonaws.com/0/209951/8f6e6c73-43ac-ebdb-dc4e-b868f65399c4.jpeg)

---
Coursera Deep Learning👉     https://www.coursera.org/specializations/deep-learning
Twitterのタイムライン上で動くブラウザゲームをJSで作りました

# TL; DR

- JavaScriptでブラウザゲームを作りました。
- UFOを操作して動物を誘拐するゲームです。
- TwitterのOGPを設定すると、ツイートに埋め込むことができます。

![ss1.png](https://qiita-image-store.s3.amazonaws.com/0/151137/00bd343c-42fc-7ec6-259b-7fdd7371da28.png)

# 『Alien Abduction』

こちらからプレイできます。
https://alien.laineus.com/

画面をタップするだけのミニゲーム的なやつです。

![ss2.png](https://qiita-image-store.s3.amazonaws.com/0/151137/ba427442-887f-a679-db04-3f1001ef6d95.png)

# ツイートに埋め込む

なんとツイートに埋め込むことができました！

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">UFOを操作して動物を誘拐するゲームを作りました！<br>PCだとタイムライン上で直接プレイできます↓<br>Alien Abduction <a href="https://t.co/7qAtPXTnGj">https://t.co/7qAtPXTnGj</a> <a href="https://twitter.com/hashtag/phina_js?src=hash&amp;ref_src=twsrc%5Etfw">#phina_js</a></p>&mdash; らいね (@Laineus) <a href="https://twitter.com/Laineus/status/989121544692510725?ref_src=twsrc%5Etfw">2018年4月25日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

（↑ぜひリツイートお願いします！）

TwitterのOGPのカードタイプに、playerというものがあり、オリジナルの音声・動画プレイヤーを埋め込むことができます。
これを使ってツイートすると、ツイート内にiframeでマウントされるため、canvasのコンテンツもそのまま動くようです。

playerカードは、他のカードタイプとは手順が少し異なります。

- OGPを設定する
- HTTPS対応する
- Twitterへ審査に出して承認してもらう

申請や表示確認は、[CardValidator](https://cards-dev.twitter.com/validator)から行います。


審査は、ドメイン単位で行われ、自分の場合3日で承認されました。

```
<meta name="twitter:card" content="player">
<meta name="twitter:player" content="https://alien.laineus.com/fullscreen/">
〜略〜
```

シェア元のページはどうなっていてもよく、`twitter:player`に指定されているページの方がツイートに埋め込まれます。
審査対象のドメインも`twitter:player`に指定したほうです。

また、コンテンツ自体に関しても、サイズがウィンドウにフィットしている必要があるなど、いくつかルールがあるようです。

詳しくは下記記事を参考に。

> Twitterがしゃべる！？Playerカードの作成方法 - Voicy Tech Blog
> http://voicetech.hatenablog.com/entry/2017/05/14/133539

審査自体は感覚的には結構ゆるいように感じました。

ただし、Twitterのカードのポリシー的にOKなのか怪しいので、削除されたりするかもしれません。
試す際は自己責任でおねがいします。

---

*2020/07/10 追記: 多分現在は審査が要らないぽいです。→『 [秘密にしておきたかったんだけど、実はTwitterにはWebページを埋め込めるんだよね](https://qiita.com/ver1000000/items/78736a74cfdb50934d8f)』*

# ゲーム開発用JSライブラリ「Phina.js」

ゲームの開発に使ったライブラリを紹介します。

> 公式サイト
> http://phinajs.com/

JavaScriptでCanvasのゲームを作るための和製ライブラリです。

ゲーム進行や描画まわりの管理といった基盤となる部分や、当たり判定などさまざまなゲームに汎用的に使える機能などが提供されます。

# ソースコード
GitHub
https://github.com/laineus/alien

# BGM

BGMは、こちらのブラウザで動作する作曲ソフトでさくっと作りました。

http://www.audiosauna.com/

ほんとはCubaseというWindows用のちゃんとした作曲ソフトを持っているんですが、最近Linux以外のOSを使いたくなさすぎて↑を使いました。
Javaサーブレット/JSP リクエストスコープ その１

# スコープってなに？
Javaサーブレット/JSPにおける<font color="DodgerBlue">スコープ</font>とは、インスタンスを保存できる領域のことをいいます。スコープの領域内でインスタンスを保持し、サーブレットクラスとJSの間で共有したり受け渡すことができます。

# 基本は「JavaBeans」インスタンスを使おう！
<font color="DodgerBlue">JavaBeans</font>はクラスの独立性を高め、部品として再利用しやすくするためのデザインパターンです。
## JavaBeansのルール
1. 直列化可能である（java.io.Serializable を実装している）。
2. クラスは public でパッケージに所属する。
3. public で引数のないコンストラクタをもつ。
4. フィールドはカプセル化されている。
5. 命名規則に従った getter/setter をもつ。

## JavaBeansのサンプルプログラム
```java:Human.java
package model;
import java.io.Serializable;

public class Human implements Serializable {
  private String name;
  private int age;

  public Human() {}
  public Human(String name, int age) {
    this.name=name;
    this.age=age;
  }
  public String getName() { return name; }
  public void setName(String name) { this.name=name; }
  public int getAge() { return age; }
  public void setAge(int age) { this.age=age; }
}
```

## プロパティ
インスタンスの属性である<font color="DodgerBlue">プロパティ</font>は setter/getterメソッド から生成されます。

<br>[Next：リクエストスコープ その２](https://qiita.com/kent2980/items/6c4d1d1590be46538cc6)
war を dependency に追加する時の注意点

war プロジェクトを dependency に追加しようとして色々つまずいたのでメモ。

## 上手くいかない例１
### war project（使われる側）
``` xml:pom.xml
...
<groupId>hoge</groupId>
<artifactId>war-sample</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
...
```
### main project（使う側）
``` xml:pom.xml
...
<dependencies>
    <dependency>
        <groupId>hoge</groupId>
        <artifactId>war-sample</artifactId>
        <version>1.0-SNAPSHOT</version>
        <scope>test</scope>
    </dependency>
</dependencies>
...
```
いざ maven build しようとすると
`Could not resolve dependencies for project ...`
なんてことを言われる。よく見ると
`Could not transfer artifact hoge:war-sample:jar:1.0-SNAPSHOT ...`
となっており、jar を探しに行って見つからずエラーとなっているみたい。

デフォルトで jar を探しに行くので、war を入れたい場合は明示する必要があるようです。

## 上手くいかない例２
### main project（使う側）
``` xml:pom.xml
...
<dependencies>
    <dependency>
        <groupId>hoge</groupId>
        <artifactId>war-sample</artifactId>
        <version>1.0-SNAPSHOT</version>
        <scope>test</scope>
        <type>war</type> <!-- type を明示 -->
    </dependency>
</dependencies>
...
```
これでいける...かと思いきや、今度はコンパイルエラーが多発。
war ファイルにクラスパスが通ってないみたい。

[このページ](https://stackoverflow.com/questions/31020038/how-can-i-add-war-file-to-another-java-web-application-dependencies/31220514?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa) を参考に、mave-war-plugin を使って解決できました。

## 上手くいく例
### war project（使われる側）
``` xml:pom.xml
...
<groupId>hoge</groupId>
<artifactId>war-sample</artifactId>
<version>1.0-SNAPSHOT</version>
<packaging>war</packaging>
...
<build>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-war-plugin</artifactId>
            <version>2.1.1</version>
            <configuration>
                <attachClasses>true</attachClasses>
                <classesClassifier>classes</classesClassifier>
            </configuration>
         </plugin>
    </plugins>
</build>
...
```
maven-war-plugin をいれ、 attachClasses = true にすると、
war ファイルと同時に jar ファイルがビルドされる。

* war-sample-1.0-SNAPSHOT.war
* war-sample-1.0-SNAPSHOT-classes.jar

あとは使う側で classifier を指定すれば、jar を見に行ってくれるのでクラスパスが通る。

### main project（使う側）
``` xml:pom.xml
...
<dependencies>
    <dependency>
        <groupId>hoge</groupId>
        <artifactId>war-sample</artifactId>
        <version>1.0-SNAPSHOT</version>
        <classifier>classes</classifier>
        <scope>test</scope>
    </dependency>
</dependencies>
...
```

maven build が通ることを確認。

（はじめから jar に分割しておけという話ですが...）
Laravel5.5で外部キー制約の親を消したら子も消えるやつ（備忘録）

# 投稿テーブル作成(親の方)

***php artisan make:model Post --migration***やってモデルとマイグレーションファイル作る。

続いて、マイグレーションファイルを以下の様にいじる。

```php5:migrationファイル

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->increments('id');
            $table->string('title');
            $table->text('body');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

```
# 投稿に紐づくコメントテーブル作成（子供達）

***php artisan make:model Comment --migration***やってモデルとマイグレーションファイル作る。

続いて、マイグレーションファイルを以下の様にいじる。

```php5:migrationファイル

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateCommentsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('comments', function (Blueprint $table) {
            $table->increments('id');
            $table->integer('post_id')->unsigned();
            $table->string('body');
            $table->timestamps();
            $table->foreign('post_id')->references('id')->on('posts')->onDelete('cascade');
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('comments');
    }
}
```
onDelete('cascade')ってのが参照してる親のIDが消滅したら自分も消滅しまっせって記述。

# モデルいじってコントローラーにて関係性を使いやすく。

***$post->comments***的にアクセルできる様にするやつ。

```php5:Postモデル

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
  // protected $fillableで挿入するカラムを指定すると安全にcreateできる様になる。
  protected $fillable = ['title', 'body'];

  public function comments() {
    return $this->hasMany('App\Comment');
  }
}

```

```php5:Commentモデル
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Comment extends Model
{
    //
  protected $fillable = ['body'];

  public function post() {
    return $this->belongsTo('App\Post');
  }
}
```

hasManyやらbelongsToで***１対多***の関係性を表現している。

# 捕捉
多対多の関係性を作るときは中間テーブル必要。
Hello Qiita

![image.png](https://qiita-image-store.s3.amazonaws.com/0/253293/65ca4464-5cd4-3ee7-2ea4-0f840156717b.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/253293/e2450f9f-2bfe-798b-2782-b590d8a876f0.png)
[Mac][2018]英数キーをMetaキーに割り当てる設定

# 前書き

KarabinerのUIがごそっと変わっており、どうすれば英数キーをMetaキーに割り当てられるのかが分からなくなった。

以前参照していた設定方法
https://qiita.com/DQNEO/items/07ca56efc2974ae826c1

# 手順

## Complex Modifications / Rules を開き、Add rulesを選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/79697/f6008fab-f7ea-96eb-d73d-82c4a24c623f.png)

## Import more rules from the Internet (open a web browser)を選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/79697/df49aa96-c1db-f937-fb76-18f7a82439ff.png)

## For Japanese の設定をImport
![image.png](https://qiita-image-store.s3.amazonaws.com/0/79697/45ca47c2-5a98-54e3-b7fd-0f03f4ea9960.png)

## 英数・かなキーを他のキーと同時に押したときに、Optionキーを送信する をadd

![image.png](https://qiita-image-store.s3.amazonaws.com/0/79697/b28366d2-4bb3-a3cb-a6f0-8bc4ed89eaf1.png)

# 以上

ただし、iTerm2を使用している場合は、altキーをmetaキーとして認識させる設定を行う必要がある。

https://qiita.com/DQNEO/items/524724982ef49beb7f56
バーチャルYouTuberの私が教える最速でバーチャルYouTuberになる方法

このたび自分がバーチャルYouTuberデビューしてみて、自分なりに最速でバーチャルYouTuberになる方法がわかりましたので展開いたします。

## 録画・配信

OBSがグローバルスタンダードです。
https://obsproject.com/ja
Windows, Mac, Linuxとマルチプラットフォーム対応で無料で録画も配信もできます。
直感的なUIなので説明がなくても使えるレベル。
使い方も山ほどネットに転がっているので行き詰まってもググれば答えが出ます。

## キャラクター

描ける人は自分で描く。
~~描けない人はいらすとや。
https://www.irasutoya.com/~~

追記：
現在いらすとやの素材をバーチャルYouTuberのキャラクターとして利用することは禁止されています。

> バーチャルYouTuberのキャラクターとして利用できますか？
> ご利用いただけません。

https://www.irasutoya.com/p/faq.html

## 声

面倒なので素の声でやりましょう。
ゆっくりとかに喋らせるよりはるかに楽です。
マイクはパソコンに付いているものか、USBカメラのものなどお好きなもので。

## アバター操作

FaceRigが有名ですが有料、Windowsのみ対応、設定が面倒の三重苦です。
とりあえず声にあわせて口だけ動けばいいのでPuppetを使いましょう。
https://github.com/leo-typeb/Puppet (Windows, Mac)
https://github.com/leo-typeb/Puppet2 (Windows)

最低限必要な素材としては口が開いている絵と口が閉じている絵です。
さらにまばたき用に目が開いているものと閉じているもので計４パターン揃えられると完璧です。
フリー素材を使ってる場合はうまい具合にコラージュして作りましょう。

Puppetの詳しい使い方はこちら。
http://hiyell.sakura.ne.jp/?p=4172

## まとめ

以上、技術的にはOBSとPuppetさえ使えればバーチャルYouTuber（っぽいもの）になれます。
きちんとしたバーチャルYouTuberになろうとした場合にハードルになるのはやはりキャラクター（3Dならモデル）と声ですね。
逆に言えばキャラクターと声さえ諦めてしまえば２時間程度でバーチャルYouTuberになれると言っても過言ではないでしょう。

## 私のYouTubeのチャンネルもよろしく

https://www.youtube.com/channel/UCZcczOgGydDe8NFVXv5W1AA
新入社員向け、まず初めに把握してほしい書籍・情報一覧

webサービスの運用・開発業務をしている6年目社員がオススメする情報一覧です。
自分の業務は、コーダー:PM=3:7くらいの割合なので、偏りがありそう（ヒューマンスキル面が多い）ですが、他にもおすすめあればコメントお待ちしています。

# ヒューマンスキル

### 心構え

* 入社一年目の教科書
* ハーバード　人生を変える授業
* 結果を出せる人になる!「すぐやる脳」のつくり方

### 考え方・クリティカルシンキング

* イシューからはじめよ
* 初速思考術

### 伝え方・ラインティング

* わかりやすい表現の技術
* 理科系の作文技術

### タスク管理

* デットライン仕事術
* はじめてのGTD ストレスフリーの整理術

# エンジニアリング

### 心構え

* 達人プログラマー
* プログラマーが知るべき97のこと

### インフラ

* linux
* VMware
* docker

### フロントエンド

* js/jquery
* css/sass

### セキュリティ

* 体系的に学ぶ 安全なWebアプリケーションの作り方

### ミドル

* webサーバー
* データベース
* SQL・データベース設計

### コーディング

* 良いコードとは
  * リーダブルコード
  * [コードを書く際の指針として見返すサイトまとめ](https://qiita.com/kenichi_cc/items/c3ecca7b7d5fc5c6bf2e)
  * [Webアプリケーションフレームワーク導入時に考慮すべき22の観点](https://qiita.com/tmknom/items/08b69594e32a92bccee5)
  * [新人プログラマに知ってもらいたいメソッドを読みやすく維持するいくつかの原則](https://qiita.com/hirokidaichi/items/c9a76191216f3cc6c4b2)
* gitの使い方
WebGLでATF圧縮テクスチャを表示する

この記事は加筆・修正して「[3Dコンテンツの最適化に。圧縮テクスチャーをWebGLで扱う方法と利点 \- ICS MEDIA](https://ics.media/entry/17863)」に引っ越しました。

[![](https://ics.media/wp-content/uploads/2018/05/180502_webgl_compressedtexture_atf_eyecatch.png)](https://ics.media/entry/17863)

※Google検索で辿り着いた方にリンク切れとなっては申し訳ないので、元の記事を残しています。ご了承ください。
インスペクタのパラメータの名前を簡単に変えるエディタ拡張



##属性

```csharp:CustomLabelAttribute.cs
using UnityEngine;

public class CustomLabelAttribute : PropertyAttribute
{
	public readonly string Value;

	public CustomLabelAttribute(string value)
	{
		Value = value;
	}
}
```

##エディタ側のコード

```csharp:CustomLabelDrawer.cs

using UnityEditor;
using UnityEngine;

[CustomPropertyDrawer(typeof(CustomLabelAttribute))]
public class CustomLabelDrawer : PropertyDrawer
{
        public override void OnGUI(Rect position, SerializedProperty property, GUIContent label)
        {
            var newLabel = attribute as CustomLabelAttribute;
            EditorGUI.PropertyField(position, property, new GUIContent(newLabel.Value), true);
        }
	
        public override float GetPropertyHeight(SerializedProperty property, GUIContent label)
        {
            return EditorGUI.GetPropertyHeight(property, true);
        }
}
```
追記2019/7/19
Rectや配列等のマルチラインに対応
##使用側のコードサンプル

```csharp:UseCustomLabelAttribute.cs
using UnityEngine;

public class UseCustomLabelAttribute : MonoBehaviour
{
	[CustomLabel("カウント")]
	public int Count;
}
```

###適用前
![スクリーンショット 2018-04-25 21.40.09.png](https://qiita-image-store.s3.amazonaws.com/0/253279/c2300eb9-2876-28a7-fe93-02609b904dd3.png)

###適用後
![スクリーンショット 2018-04-25 21.41.02.png](https://qiita-image-store.s3.amazonaws.com/0/253279/d63f6e65-8d74-fe91-0a8b-59192b16e3b4.png)


名前だけ表示を変えたい事がよくあるんですけど
Unityの標準機能であるかな、と探してても見つからなかったので作りました。
競合とかは一切考えてないです
PHPのdate()のtオプションについて

#概要
今月の残り日数とかを調べたいときに、2,4,6,9,11月(いわゆる「にしむくさむらい」）は月の日数が31日ではないため、いちいち整形する手間が発生する。
date()コマンドのtオプションは、これを解決してくれる。

#使い方

```php
date("t");

=> 30 //今日は4月25日のため
```

今月の日数を入れたければこれでよい。
指定した月の日数(例えば11月)を入れたければ、dateオブジェクトで月を指定する
TVBoxにArmbianその２

TV BoxにArmbianをインストール2台目

１．TV Box
　今回はRaｍ2GBをセレクト。
![A95.png](https://qiita-image-store.s3.amazonaws.com/0/249443/70bb1bd0-d7c6-3558-b040-a3e3502d593a.png)
特にセールでは無いし、グレードが上がっているので前の機体の倍近くの価格。

２．インストール
　前回はまず、SD-Cardから立ち上がるように、androidのUpdate&Backupというアプリから、指定のスクリプトを実行させたのだが、Android7だからなのかUpdate&Backupというアプリが存在しない。
　調べてみると、AVプラグに爪楊枝を挿してSD-Cardからブートさせると有った。実際に爪楊枝をAVプラグに挿すとタクトスィッチのクリック感が有る。その後はSD-Cardが挿してあればブートするようになった。
　使ったイメージは「Armbian_5.41_S9xxx_Ubuntu_xenial_4.9.40_mate_20180315.img」で、パスワード入力時にmateを選択して無事起動完了。
※kodiは起動しなかった。
　
３．問題点
　やはりWiFiは認識しない。認識したとしても技適の問題で使えないのだけれど。
　あまり重要ではないが、Androidの場合はサイドの小さなディスプレイに時計などが表示されるが、Armbianの場合は立ち上りから立ち上がった後もずっと"Booting"という表示のままになる。

４．おすすめ？
 能力的にはOrangePi Win Plusとほぼ同じではないかと思う。価格も大きく変わらない。OrangePiはGPIOなど自由度が高いことを考えると、素直にOrangePiで良い気がする。
Visual Studio 2017でAV1をビルドしてみる

AOMedia AV1が3月28日(現地時間)に正式公開されたので、試しにビルドしてみた際の備忘録です。

初Qiita、プログラミング&CMake(+その他諸々)の初心者が書いております。宜しくお願いします。

追記: 2019/01/19 Visual StudioでビルドするよりもGCCでビルドした方がバイナリを小さくできるようです >> [GCC(MinGW)でAV1をビルドする
](https://qiita.com/fg11894/items/14bd741cf5746d2dc194)

## **必要なもの**
導入方法は各自お調べ頂けますと幸いです。
また、バージョンは参考でありビルド時に各ソフトの最新版が利用できる場合はそちらをご利用下さい。

- Visual Studio 2017 Community 15.7.4
 - (他のエディションでも同様の手順でビルド出来ると思われます。)
- Git 2.18.0
- CMake 3.11.0-rc2
- Perl 5.26.1
- Python 3.6.5
- nasm 2.13.03
 - (公式リポジトリではyasmも使用されていますが、今回はインストールの簡便なnasmを使用しています。)
- Doxygen 1.8.14
- ~~やる気~~

※作業ディレクトリはユーザーのデスクトップに「aom_build」というファイルを作りその中で一連の動作を行うものとします。(文中に登場するパスの"hogemoge"はご自身のユーザー名に置き換えて下さい。)

## **コマンドプロンプトでの作業**
まずは公式リポジトリからソースコードをクローンします。

```terminal
git clone https://aomedia.googlesource.com/aom 
```

以下のCMakeコマンドを実行します。

```terminal
cmake aom -G "Visual Studio 15 2017" -DAOM_TARGET_CPU=generic
```

追記(引用):64bit用のビルドファイルを生成するには

```terminal
cmake aom -G "Visual Studio 15 2017 Win64" -DAOM_TARGET_CPU=generic
```
です。([引用元はこちら](https://ku6.jp/report/91.html))

しばらくすると

```terminal
------------- 長めなので省略 -------------
 -- Configuring done
 -- Generating done
 -- Build files have been written to: C:\Users\hogemoge\Desktop\aom_build 
```

中間ファイルが生成出来た事の旨が表示されるのでコマンドプロンプトでの作業は完了です。

## **Visual Studioでの作業**
ファイルエクスプローラーから先程コマンドを実行したディレクトリにアクセスし、「AOM.sln」をクリックします。

VS起動後、ソリューションエクスプローラーの一覧から「ソリューション'AOM'」を右クリックした後に構成マネージャーをクリックし、アクティブソリューション構成のプルダウンを``` Debug ```から``` Release ```に変更します。

(この際にビルドしたいソースにチェックを入れるのですが基本的に必要なものはデフォルトでチェック済みの為特に変更しない場合は閉じても問題ありません。)

再度 ``` 'AOM' ```を右クリックし、ソリューションのビルドをクリックします。

完了まで暫く待ちます。

ビルドが完了するとReleaseフォルダにビルドされたバイナリが配置されます。
パスは 「``` %USERPROFILE%\Desktop\aom_build\Release ```」です。

## **参考サイト**
https://aomedia.googlesource.com/aom
http://ch.nicovideo.jp/ieno/blomaga/ar1440566

<!--エンコード/デコード編は[こちら](https://qiita.com/shx64a/items/e6b68c39a4901debc7e4)-->
密行列積と全結合層のforward/backwardに関するメモ

数値線形代数はがっつりやったことあるけど、ディープラーニングとか分からん勢のみなさん（＝私）、こんばんは。

ディープラーニングをしていると全結合層（ChainerでいうとLinear）がよく現れて、これが密行列積と同じだと言われるんですが、じゃあ実際にどういう対応になってるのか？をいつも忘れるので、メモがてらまとめておきます。

## 密行列積の基本

ここでは行優先とします。

```math
C=AB
```

ここで

* C：n行m列
* A：n行l列
* B：l行m列

です。見慣れたアインシュタイン縮約表記だと

```math
C_{ij} = A_{ik} B_{kj}
```

になるので、この計算は

```c
for(i = 0; i < n; ++i)
{
	for(j = 0; j < m; ++j)
	{
		for(k = 0; k < l; ++k)
		{
			C[i][j] += A[i][k] * B[k][j]
		}
	}
}
```

で計算できることも当然のことですね。

## 入出力

入力（画像）をX、出力（画像）をYとします。

畳み込みニューラルネットワーク(CNN)のような場合、XとYは「チャンネル数」行「バッチサイズ」列の行列になります。
例えば、ResNet152では最終段に全結合層がありますが、これは「入力チャンネル数=2048」「出力チャンネル数=1024」です。バッチサイズは任意のサイズですが、ここでは適当に128とします。

そうすると、

* X：2048行128列
* Y：1024行128列

ということになります。

## Forward（推論）

XからYを生成する（推論）時は、XとWの積で計算します。つまり、Wは「入力チャンネル数」行「出力チャンネル数」列の行列になります。これは

```math
Y=WX
```

という密行列積そのものです。ここで各行列のサイズは、先の例を入れると

* Y：1024行128列
* W: 1024行2048列
* X：2048行128列

になります。

## Backward（学習）

学習時のBackward計算では、X, Y, Wのそれぞれの勾配gX, gY, gWが出てきます。gX, gY, gWのサイズはそれぞれX, Y, Wのサイズと一致します。

ここでは、"backward"といっているのですから、XとWからYを計算した時の逆、出力(gY)から入力(gX)と重み(gW)を計算します。
計算式は、結論だけ書くと、以下のようになります（なぜこうなるかは世界に一杯あるディープラーニングの教科書を参照してください）。

```math
g_X = W^T g_Y
```
```math
g_W = g_Y X^T
```

というわけで、転置が入っていますが、これも密行列積そのものです。先の例を代入すると

* 2048行1024列と1024行128列の積＝2048行128列
* 1024行128列と128行2048列の積＝1024行2048列

という計算になります。

## Chainerと比較してみる

おまけとして、Chainerと比較してみます。

```python
INPUT_CHANNEL = 2048
OUTPUT_CHANNEL = 1024
BATCH_SIZE = 128

import numpy
def calc_numpy():
	DTYPE=numpy.float32

	W = numpy.random.rand(OUTPUT_CHANNEL, INPUT_CHANNEL).astype(DTYPE)
	X = numpy.random.rand(INPUT_CHANNEL, BATCH_SIZE).astype(DTYPE)

	# forward
	Y = W.dot(X)

	gY = numpy.random.rand(Y.shape[0], Y.shape[1]).astype(DTYPE)

	# barkward
	gX = W.transpose().dot(gY)
	gW = gY.dot(X.transpose())

	return Y, gX, gW, X, W, gY


import chainer
def calc_chainer(X, W, gY):
	linear = chainer.links.Linear(W.shape[1], W.shape[0], initialW=W)
	linear.cleargrads()

	X_var = chainer.Variable(numpy.array(X).transpose())

	# forward
	Y_var = linear(X_var)

	# barkward
	Y_var.grad = gY.transpose()
	Y_var.backward()

	return Y_var.data.transpose(), X_var.grad.transpose(), linear.W.grad

def main():
	Y_numpy, gX_numpy, gW_numpy, X, W, gY = calc_numpy()
	Y_chainer, gX_chainer, gW_chainer = calc_chainer(X, W, gY)

	print("Is Y same?",  numpy.array_equal(Y_numpy, Y_chainer))
	print("Is gX same?", numpy.array_equal(gX_numpy, gX_chainer))
	print("Is gW same?", numpy.array_equal(gW_numpy, gW_chainer))

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

最初Chainer側の入出力は列優先なのかと思ったがそうでもなくてWだけ行優先なので、ちょっと変な感じです。まぁそもそも、ディープラーニングが数値線形代数とは違う分野なので仕方ないですね。

・・・もしかして、「ディープラーニングとかエーアイをやるためには線形代数が必要だよ！」と言われているのに初心者の人がとっつきにくい原因はこの転置のせいなのでは説
Vue.jsで子コンポーネントのメソッドを実行する方法

```vue:CardBox.vue
<template lang="pug">
  div
    h4 {{name}}
    slot(:sayHello="sayHello")
      a(href="#" @click.prevent="sayHello") ごあいさつ    
</template>

<script>
export default {
  name: 'card-box',
  props: {
    name: {type: String, default: 'sample name'}
  },
  methods: {
    sayHello: function () {
        alert('Hello, I am ' + this.name + '!');
    }
  }
}
</script>
```

```TopPage.vue
<template lang="pug">
  card-box(name="John Doe")
    template(slot-scope="{sayHello}")
      button(@click="sayHello")
        i.fa.fa-check
        | GREETING
</template>

<script>
import CardBox from @/components/CardBox
export default {
  name: 'top-page',
  components: { CardBox }
}
</script>
```

参考
scoped slots
https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots