OmniAICreator/Qiita-1.07M huggingface dataset:
AWS bitnami redmineをさくらVPSのdockerに引っ越しした(データ復帰について)

AWSのEC2に入ってたbitnami redmineのデータをdocker環境のbitnami redmineに移行した。

* さくらVPSにdockerを入れた手順は[こちら][1]。
[1]:https://qiita.com/HyunwookPark/items/f071ca5c656ee4df8918
* dockerにbitnami redmineを入れた手順は[こちら][2]。
[2]:https://qiita.com/HyunwookPark/items/89b72b8ccd055cd62ab7

# 注意

AWSに入るbitnami redmineとdockerに入るbitnami redmineのディレクトリ構成が異なるので注意。

# 参考

http://redmine.jp/faq/system_management/backup/

# aws bitnami redmineのデータをバックアップ

以下のディレクトリをtar.gzにする。

```
tar -zcvf files.tar.gz /opt/bitnami/apps/redmine/htdocs/files
```

以下のファイルでmariadbのユーザ・パスワードを確認
/opt/bitnami/apps/redmine/htdocs/config/database.yml

```
production:
  adapter: mysql2
  database: bitnami_redmine
  host: localhost
  username: <ここにあるユーザ>
  password: <ここにあるパスワード>
```

mariadbのデータを取り出す

```
mysqldump -u ユーザ -pパスワード bitnami_redmine > ~/db_backup.dmp
```
なぜか-pとパスワードをくっつける。

---

# dockerのredmineに復旧

### バックアップファイルをdockerコンテナにコピー

```
docker cp db_backup.dmp mariadb:/home/bitnami/
docker cp files.tar.gz redmine:/bitnami/redmine/
```

### mariadbへの接続ユーザとパスワードを確認

redmineのコンテナに入る

```
docker exec -it redmine /bin/bash
```

database.ymlの内容を確認する

```
tail -100 /bitnami/redmine/conf/database.yml

# Default setup is given for MySQL with ruby1.9.
# Examples for PostgreSQL, SQLite3 and SQL Server can be found at the end.
# Line indentation must be 2 spaces (no tabs).

production:
  adapter: mysql2
  database: bitnami_redmine
  host: mariadb
  username: <ここにあるユーザ>
  password: <ここにあるパスワード>
  encoding: utf8

development:
  adapter: mysql2
  database: bitnami_redmine_development
```

### DBのデータを戻す

コンテナに入る

```
docker exec -it --user root mariadb /bin/bash
```

mariadbにデータを戻す

```
mysql -u ユーザ -pパスワード bitnami_redmine < /home/bitnami/db_backup.dmp
```

### redmineのfilesデータを戻す

コンテナに入る

```
docker exec -it redmine /bin/bash
```

filesディレクトリのデータを戻す

```
cd /bitnami/redmine
tar -zxvf files.tar.gz
```
dockerにbitnami redmineを入れた

# 公式

https://hub.docker.com/r/bitnami/redmine/

# bitnami redmineインストール

redmineとmariadbで利用するネットワークを作成

```
docker network create redmine_network
```

redmineから利用するmariadbを起動

```
docker run -d --name mariadb --net=redmine_network -e ALLOW_EMPTY_PASSWORD=yes -e MYSQL_USER=root  bitnami/mariadb
```

redmineを起動

```
docker run -d --name redmine --net=redmine_network -p <外部から接続するポート>:3000 bitnami/redmine:3.3.1-r11
```

# redmineコンテナに入るとき

```
docker exec -it redmine /bin/bash
```
MacBookでWindows。全角英数を討伐

私はよく悩まされました！
bootcampでwindowsOSを使っているものですが、その際にcapsボタンでひらがなと半角英数にしているはずなのに、それが急にひらがなと「全角英数」に変わっている！？


色々な方法を試した結果、1つの解決策に導かれたので残します。


①まず、なんでもいいので入力できる場所を用意する。（僕はさくらエディタを使用しました。）
②次にそこに文字をなんでもいいので打ち込む。※ここでEnterを押してはいけません！！
③そのままの状態でF10ボタンを押す。（macbookのキーボードだと、fn+F10 でできるはずです。）
④半角英数になったのを確認したら完了！


もうこの4つのステップで可能にしてくれます。
皆さんも悩まれた際にこのページが見えたなら幸いです。
OculusGoのデバック環境をmac上で動かす。


前回は玉転がしゲームをOculusGoに対応しました。
https://qiita.com/m0a/items/98cdc1e03cf067769578

その後、もくもく会でUnityアプリを作りました。

作ったゲームの動画は[こちら](https://youtu.be/rGerw-k5Vd8
)

上記を作ってみてわかったことがあります。
**デバックが辛い**。
Editor上でPlayしようとしても視点操作等が効ききません。
実機で動作確認すると変更するたびに数分待たされます。


そこでゲームパッドでOculsuGoのコントローラとヘッドトラッキングの代替を行うことにします。
アナログパッドに二軸コントローラが2つあればそれぞれをヘッドトラッキング、コントローラーのモーショントラッキングに代替できそうです。

# 準備
macだと使えるゲームパッドに限りがあるようです。PCだと問題ないと思いますが。
先ずは``LOGICOOL ゲームパッド F310``を入手します。秋葉原のヨドバシ2Fで、山ほど置いてあったので
入手性は容易なようです。

下記手順に従います。これでこのコントローラーがUnityで使えるようになります。
http://heyassy.hateblo.jp/entry/2017/10/08/113757

<img width="481" alt="Xbox_360_Controllers.png" src="https://qiita-image-store.s3.amazonaws.com/0/3844/2ed2bba2-54a3-71aa-a42f-27fc47e9e6c9.png">

目標は上記のような感じにヘッドトラッキングとコントローラーのトラッキングに対応させます。


# Unity上での作業

## TLDR
以下にサンプルを含めたコードが置いてあります。そのまま動くと思います。
https://github.com/m0a/OculusGoOnMac

## 内容

変更したコードは
[``OVRCameraRig.cs``](https://raw.githubusercontent.com/m0a/OculusGoOnMac/master/Assets/Oculus/VR/Scripts/OVRCameraRig.cs)と[``OVRTrackedRemote.cs``](https://raw.githubusercontent.com/m0a/OculusGoOnMac/master/Assets/Oculus/VR/Scripts/Util/OVRTrackedRemote.cs) のみです。
もし既存の環境に入れるのであれば上記2ファイルを置き換える感じで行けると思います。

### ``OVRCameraRig.cs``
ヘッドトラッキングとコントローラーのトラッキングをEditor利用時はダミーコードが動くように調整しています。
[``プラットフォーム依存コンパイル``](https://docs.unity3d.com/jp/current/Manual/PlatformDependentCompilation.html)の機能を使い、実機には影響しないようにしています。

尚、以下のコード個所を修正することで挙動を変えることができます。

```OVRCameraRig.cs
  // 頭の回転に合わせてコントローラも回転したい場合
  dummyRightHandOrientation = dummyHead.orientation * RotXY(rotArmHorizonal * 10, rotArmVertical * 10);
  // 頭の回転に影響しないようにしたい場合
  //dummyRightHandOrientation = RotXY(rotArmHorizonal * 10, rotArmVertical * 10);

```
### ``OVRTrackedRemote.cs``
本来は実機コントローラーの接続状態を見て配下のコントローラーメッシュの有効化無効化を行う機能ですが、
Editor利用時は強制的にOculusGoコントローラー(右手)が有効化するように修正しています。
[``プラットフォーム依存コンパイル``](https://docs.unity3d.com/jp/current/Manual/PlatformDependentCompilation.html)の機能を使い、実機には影響しないようにしています。



# まとめ

こんなかんじで動けば成功です。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">macでのOculusGo開発環境できました。頭の動きに追従してコントローラも回転させてもいいかもしれませんけど、そこは好みかなと。<a href="https://twitter.com/hashtag/OculusGoDev?src=hash&amp;ref_src=twsrc%5Etfw">#OculusGoDev</a> <a href="https://t.co/dHRD3XHPN1">pic.twitter.com/dHRD3XHPN1</a></p>&mdash; m0a (@abe00makoto) <a href="https://twitter.com/abe00makoto/status/998414649212092420?ref_src=twsrc%5Etfw">2018年5月21日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

問題点としてはUnityの作法がわからないのでコード共有方法がこれでいいのかってことです。
もっといい方法があればご教授下さい。
DefferedContextを使ったマルチスレッド

今更ですがDirectX11の特徴としてマルチスレッドに対応しました。
QiitaでDirectX11マルチスレッドの記事を探しても無かったので自分でまとめてみることにしました。
##DeviceとContext
まずはDeviceとContextに分かれてしまったDirectXのクラス。
ここではお互いの役割の解説は省かせて貰います。
マルチスレッドにかかわる情報をまとめると

**Device・・・マルチスレッドにデフォルトで対応（スレッドセーフ）**
**Context・・・マルチスレッドにデフォルトで非対応（スレッドセーフじゃない）**

つまりDeviceに関しては気にする必要はなくContextに関しては自分でスレッドセーフにしてあげないといけません。

##ImmediateComtext と DeferredContext
デフォルトでDeviceと一緒に作られるContextはImmediateComtextです。
これがスレッドセーフではないContextです。
対してDeferredContextはスレッドセーフなContextであり、マルチスレッドに対応しています。

```C++:sample.cpp
	//DefferdContextの作成（必要なスレッド数作るとよい
	pDevice->CreateDeferredContext(0, &pDfContext);
```
DefferdContextの作成方法は単純でDeviceからCreateDeferredContext()を呼んであげたら作れます。
この時注意が必要なのがDefferdContext単体でスレッドセーフな訳ではないということです。

```C++:sample.cpp
	//DefferdContextの作成（必要なスレッド数作るとよい
        pDevice->CreateDeferredContext(0, &pDfContext);
        thread t1([](){
               pDfContext->VSSetShader(nullptr, nullptr, 0); //スレッドセーフになっていないため動作不定
        })
        thread t2([](){
               pDfContext->VSSetShader(nullptr, nullptr, 0); //スレッドセーフになっていないため動作不定
        })
        t1.join(); t2.join(); //スレッド終了まで待機

        //DefferdContextの作成（必要なスレッド数作るとよい
        pDevice->CreateDeferredContext(0, &pDfContext1);
        pDevice->CreateDeferredContext(0, &pDfContext2);
        thread t1([](){
               pDfContext1->VSSetShader(nullptr, nullptr, 0); //スレッドセーフになっているため正常動作
        })
        thread t2([](){
               pDfContext2->VSSetShader(nullptr, nullptr, 0); //スレッドセーフになっているため正常動作
        })
        t1.join(); t2.join();

        //DefferdContextに溜まっているコマンドを一括処理
        ID3D11CommandList *cc;
        pDfContext1->FinishCommandList(false,&cc);
        m_pImContext->ExecuteCommandList(cc, false);
        cc->Release();
	
        pDfContext2->FinishCommandList(false,&cc);
        m_pImContext->ExecuteCommandList(cc, false);
        cc->Release();
```

このようにスレッド数に合わせてDefferdContextを増やしてあげる必要があります。
最後にやってることはDefferdContextはあくまでコマンドを貯めるだけしかできないので、
コマンドリストを引き抜いて、引き抜いたものをImmediateContextに教えてあげてまとめて実行してるんですね。

##嵌りやすいポイント
基本的な使い方は以上になるんですが嵌りやすいポイントがあります。
それはDefferdContextを使ってDraw系の命令を呼ぶときです。
DefferdContextは全部単体で動いているので毎回最初に**RenderTarget,Viewport**を設定してあげないといけません。
デバッグログを見ながらセットしていない情報が無いか確認しながらやるとそこまで嵌らないかもしれないです。
セットしたはずの情報が入っていない・・・みたいなことよく出てくるので管理は慎重にしましょう。（まあマルチスレッドを使った設計をしている時点でとても慎重にやるべきです。

##まとめ
思っていたより使うのは簡単です。ただオーバーヘッドがかなり大きいような気がします。
今度は計測してみたいと思います。
(Pandas) 時系列データの隙間を埋める

例えば以下のような、DatetimeIndex を持つ Series データがあったとする。

```
In [1]: ts

ymd
2016-03-23    132
2016-03-25    231
2016-03-28     56
Name: ts, dtype: int64
```

日付が飛び飛びになっているので、この隙間を 0 で埋めたい。

このような場合は、[pandas.Series.asfreq](http://pandas.pydata.org/pandas-docs/stable/generated/pandas.Series.asfreq.html) を使うと埋めることができる。

```
In [2]: ts.asfreq('d', fill_value=0)

ymd
2016-03-23    132
2016-03-24      0
2016-03-25    231
2016-03-26      0
2016-03-27      0
2016-03-28     56
Freq: D, Name: ts, dtype: int64
```

例では Series オブジェクトだったが、DataFrame に対しても同じことができる。
[Python3.6]OpenCVで画像を4分割

OpenCVを使って画像を4分割するやり方の紹介です。
ちらっと検索した限りPython3.6、OpenCVを使って画像を4分割するコードを見つけることが出来なかったので投稿
（Python2.7で動くのは見つけたのですが、）

4分割のイメージ
これが
![元画像](https://qiita-image-store.s3.amazonaws.com/0/191958/7bad1e13-866c-18ca-46ae-edada2f56b33.png)

こんな感じに
![2018-05-21 16_16_07-result.png](https://qiita-image-store.s3.amazonaws.com/0/191958/7c996817-47ac-4b94-f6d6-e51c7c2d2dfa.png)


# 環境
-Windows10
-Python 3.6.4
-OpenCV 3.4.1

# 画像4分割コード

```python
import cv2

def main():
    img = cv2.imread("./test.png")
    height, width, channels = img.shape

    clp = img[0:height//2, 0:width//2]     
    cv2.imwrite("./test-tl.jpg", clp)   

    clp = img[0:height//2, width//2:width]     
    cv2.imwrite("./test-tr.jpg", clp)   

    clp = img[height//2:height, 0:width//2]     
    cv2.imwrite("./test-ul.jpg", clp)   

    clp = img[height//2:height, width//2:width]     
    cv2.imwrite("./test-ur.jpg", clp)

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

# 【おまけ】OpenCV導入方法（Windows）
１．whlファイルをダウンロード
ここから
https://www.lfd.uci.edu/~gohlke/pythonlibs/#opencv

Python3.6、64bitのPCにインストールする場合は「opencv_python‑3.4.1‑cp36‑cp36m‑win_amd64.whl」をダウンロード

![image.png](https://qiita-image-store.s3.amazonaws.com/0/191958/19cb588c-1441-bf26-dac6-a5a35cd4b9fd.png)

２．pip installでwhlファイルをインストール
ダウンロードしたwhlファイルがあるディレクトリまで移動して
`pip install opencv_python-3.4.1-cp36-cp36m-win_amd64.whl`
を実行

３．動作確認

以下のスクリプトを実行してOpenCVがインストールできたか確認

```Python
import cv2
print(cv2.__version__)
```

`3.4.1`
と出てくればインストール出来ています。

# 参考サイト
https://qiita.com/satoshicano/items/bba9594a1203e24e2a31
https://teratail.com/questions/76964
brew (un)?instal にはaliasが張られている ~ パッケージマネージャーには意外とある

Qiitaの記事内で、間違えそうもない人がコマンドで
`brew instal ～`
というタイポを書いているのを見て、少し引っかかったので調査。

[legacy-homebrew/global.rb at master · Homebrew/legacy-homebrew](https://github.com/Homebrew/legacy-homebrew/blob/master/Library/Homebrew/global.rb#L57)

```rb
HOMEBREW_INTERNAL_COMMAND_ALIASES = {
  "ls" => "list",
  "homepage" => "home",
  "-S" => "search",
  "up" => "update",
  "ln" => "link",
  "instal" => "install", # gem does the same
```

新しい方でも

[brew/global.rb at 11f81f41c95c3a14db6ac7865d7ffadef5c26c7b · Homebrew/brew](https://github.com/Homebrew/brew/blob/11f81f41c95c3a14db6ac7865d7ffadef5c26c7b/Library/Homebrew/global.rb#L76-L77)


```rb
HOMEBREW_INTERNAL_COMMAND_ALIASES = {
  "ls" => "list",
  "homepage" => "home",
  "-S" => "search",
  "up" => "update",
  "ln" => "link",
  "instal" => "install", # gem does the same
"uninstal" => "uninstall",
```

`# gem does the same`とコメントにあるように、Rubyのgemでも同様に`instal`でインストールできる。

PHPのComporserでも出来て、pipやnpmではミスとするものの、`install`をサジェストしてくれる。

意外にnpmに比してyarnは単純なエラーとなり、yumも同様。

恐らく打ち間違いを助けるためのaliasだと思われるが、デフォルトで正常に動くコマンドに対してtypoと言い切っていいものか悩む。記事にするならば正しい英単語のほうが望ましいとは思うのだが…。

[人間性をさがせよ QiitaのTypo検出 【緩募】 - Qiita](https://qiita.com/khsk/items/085db0947c650e2db463)
Ubuntu18.04LTSにアップグレードしたらUbuntuにsshできなくなった時の対処法

openssh-serverをインストールして、ufwコマンドで22番ポートを開放すればubuntuにsshできるようになります。

# 環境

Ubuntu 18.04 LTS

噂によると、Ubuntu18.04 LTSは全てのポートが閉じられているようです。

# 手順

openssh-serverが入ってない場合はインストールする。

```bash
sudo apt install openssh-server
```

ufwコマンドで22番ポートを開放してリロードします。

```bash
sudo ufw allow 22
sudo ufw reload
```

(ちなみに、`sudo ufw status` を実行すると、どのポートが開放されているか確認できます)

# 実際にsshしてみる

```bash
ssh ユーザ名@サーバのIPアドレス
```

これでssh接続できればOKです！

# 参考

- [OpenSSHサーバー](https://help.ubuntu.com/lts/serverguide/openssh-server.html)
- [Ubuntuのポート開放方法（ファイアウォールを設定する）](https://qiita.com/toujika/items/be21d361cf80d664859c)
【SpatiaLite】Transformは閉じていないPOLYGONや自己交差のあるPOLYGONも変換できる

SpatiaLiteでは、`Transform`関数で座標系を変換できます。

```sql
-- 点を変換
SELECT AsText(
	Transform(
		GeomFromText(
			'POINT(141.350 43.068)',	-- 札幌駅らへんの座標
			4326	-- WGS84
		),
		32654		-- WGS84 / UTM zone 54N
	)
) AS utm_text
;
-- POINT(528496.455725 4768425.560759)

```

この関数では、以下のように閉じていない（不正な）POLYGONも座標変換できます。閉じられていないPOLYGONが座標系だけ変換されて返されます。

```sql
-- 閉じられていないPOLYGONを変換
SELECT
	IsValidReason(g.geom) AS valid_reason,
	AsText(
		Transform(
			g.geom, 
			32654	-- WGS84 / UTM zone 54N
		)
	) AS utm_text
FROM
(
	SELECT
		GeomFromText(
			'POLYGON((141.350 43.068, 141.351 43.068, 141.351 43.069, 141.350 43.069))',	-- 閉じていないPOLYGON
			4326		-- WGS84
		) AS geom
) AS g
;

-- valid_reason: Invalid: Unclosed Rings were detected
-- utm_text: POLYGON((528496.455725 4768425.560759, 528577.87424 4768425.900877, 528577.409675 4768536.950655, 528495.992483 4768536.610536))
```

自己交差のあるPOLYGONも同様です。変換後のジオメトリも自己交差しています。

```sql
-- 自己交差のあるPOLYGON
SELECT
	IsValidReason(g.geom) AS valid_reason,
	AsText(
		Transform(
			g.geom,
			32654 -- WGS84 / UTM zone 54N
		)
	) AS utm_text
FROM
(
	SELECT
		GeomFromText(
			'POLYGON((141.350 43.068, 141.350 43.069, 141.352 43.069, 141.352 43.070, 141.351 43.070, 141.351 43.068, 141.350 43.068))',	-- 自己交差のあるPOLYGON
			4326		-- WGS84
		) AS geom
) AS g
;

-- valid_reason: Self-intersection[141.351 43.069]
-- utm_text: POLYGON((528496.455725 4768425.560759, 528495.992483 4768536.610536, 528658.826867 4768537.291744, 528658.360969 4768648.341542, 528576.9451 4768648.000452, 528577.87424 4768425.900877, 528496.455725 4768425.560759))
```

このことから、`Transform`関数は、ジオメトリ全体としての正しさはチェックせず、ジオメトリを構成する頂点座標を機械的に変換していると推察されます。
CSSでシンプルに水平スクロール（横スクロール）のリストを作る

## 横スクロールのUI
個々最近、カード型のコンテンツが横に並んでいてスクロールできるUIをよく見かけるようになりました。
例えばAirbnbのWebサイトではこんな感じ。

![horizonal-scroll.gif](https://qiita-image-store.s3.amazonaws.com/0/29971/59419fe6-f1be-d377-2115-0b82d06fe8c5.gif "horizonal-scroll.gif")

## CSSで水平スクロールを実装する
ポイントは次のとおり。
- `ul`および`li`を使ってリスト構造を表現する
- `ul`に対して`overflow-x: auto;`、`white-space: nowrap;`を指定
- `li`に対して、`display: inline-block;`を指定
- `li`に対して`width: 90%;`のような横幅を指定すると、コンテンツが見切れて見えるhorizontalので、横スクロールできることがわかりやすい


ソースコードはこんな感じ。

```html:horizontal-scroll.html
<!DOCTYPE html>
<html>
<head>
  <title>Horizontal Scroll</title>
  <style>
    .horizontal-list {
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
    }

    .item {
      /* 横スクロール用 */
      display: inline-block;
      width: 90%;

      /* 見た目調整 */
      height: 400px;
      margin: 16px;
      font-size: 48px;
      background: rgba(255, 0, 0, 0.4);
    }

  </style>
</head>
<body>
  <ul class="horizontal-list">
    <li class="item">
      <div>コンテンツ1</div>
    </li>
    <li class="item">
      <div>コンテンツ2</div>
    </li>
    <li class="item">
      <div>コンテンツ3</div>
    </li>
    <li class="item">
      <div>コンテンツ4</div>
    </li>
  </ul>
</body>
</html>
```

画面はこんな感じになります。チープですみません。

![horizontal-scroll2.gif](https://qiita-image-store.s3.amazonaws.com/0/29971/5fed608f-ea37-0027-4357-d05b000577f5.gif "horizonal-scroll2.gif")
RubyOnRailsのviewでインスタンス変数が使えるわけ()

Railsでは基本的に、
①リクエストが送られてくると、routes.rbによってcontrollerに処理が振り分けられる。
②contorollerでインスタンス変数などを定義する。(もちろんこれだけではありません。)
③viewの中でcontrollerで定義したインスタンス変数を使って、サイトの動的な部分を埋め込んでいく。
というのが大体の流れになっています。

この流れで、webサイトでしたい基本的なことはほぼほぼできてしまうので、あたかもこの流れ自体を完璧に理解したかのような気分になってしまいがちですが、おそらく、『なんでcontroller内のインスタンス変数がviewで使えるの』という質問に対して、きちんと答えられる人は少ないのではないでしょうか。

今回はなぜcontroller内のインスタンス変数が対応するviewの中で使えるのかについて探って行きたいと思います。

## 作戦
インスタンス変数がどのようにcontrollerからviewに渡されているかについて知るためには、controllerとviewの関係を知る必要があります。よって、viewとcontrollerのクラスの継承関係から、怪しそうな物を見つけて探っていくのが良さそうです。
①rails newで新しいrailsアプリを作る。
②viewの中でbinding.pryをする。
③viewでselfをしてancestorsを見ていく
④super classを見て行きながらも、viewに渡していたインスタンス変数もきちんと確認する
⑤インスタンス変数に動きがある部分や、ちょっと怪しげなクラス名を見つけたら、そこを探る。
⑥view側から上に上がっていったので、逆に同じようにcontroller側から下がっていく。

##view側から探る
###①rails newで新しいrailsアプリを作る
①は自分の作っているアプリだったり、なんでもいいです。
###②viewの中でbinding.pryをする
インスタンス変数をviewの中で表示して、その直後でbinding.pryをすることで、インスタンス変数の出どころを探っていく。

```ruby:sample_controller.rb
def index
  @user = "aaa"   #ここはなんでもいい。
end
```

```index.html.erb
<%= @user %>
<% bindning.pry %>
```
これで、このindex.html.erbを表示しようとすると、pryが起動する。

###③pryでviewの継承しているクラスやmoduleを見てみる。
まずはbinding.pryでself.classを実行することで、view自体がどのクラスのオブジェクトなのかを探る。

```ruby
self.class
```
これをすると、どうやら特異クラスであるとわかる。

```ruby
self.class.superclass
```
をしてみると、ActionView::Baseとでる。さらにsuperclassを重ねてもobjectに行ってしまうだけなので、superclassからは探ることができない。
Action Viewとselfの間にある、特異クラスはおそらくhelperのメソッドを追加しているのではないだろうか。
これは、railsはclassというよりも多数のmoduleをincludeすることで出来上がっているからである。
superclassではclassの継承関係しか見れないので、当然、super classでは探っていくことができない。
ここで、使うのが、moduleの継承関係もみることができる。ancestorsというメソッド。

```ruby
self.class.ancestors
```
を実行してみると、いっぱい出てくる。
最初に出てくるのが、hrlperたち、こいつらはメソッドをとってくるためなので、確かに真上にあるべき。
せっかく、ancestorsが出てくれたのに、中身の情報がないと、せっかくの一覧も意味がないです。ここで使うのがinstance_variablesとinstance_mathods(false)というメソッド。(falseをつけるのは継承してきたメソッドを表示しないため。)
試しに、application_helperに適当なメソッドを作って、

```ruby
ApplicationHelper.instance_methods(false)
```
をしてみると、配列になったメソッド名がか行ってくるはずです。
module一覧を見ていると怪しそうなのがActionView::Helpers::ControllerHelperとかって

###ここで重大なミスに気づく
継承関係わかって、メソッドの中身とか見たいなら、railsのgit行けばええやん。

railsをgitでとってきて改めて、ソースコードを側から探ってみることに。

##
@_assignにインスタンス変数が保持されているので、とりあえず、@_assignの出どころを探ることに
git grep @_assignをすると、

```
actionview/lib/action_view/base.rb:      @_assigns = new_assigns.each { |key, value| instance_variable_set("@#{key}", value) }
```
これはなんか怪しい。
この部分のソースコードを見にいくと、

```ruby:ails/actionview/lib/action_view/base.rb
 def assign(new_assigns)
       @_assigns = new_assigns.each { |key, value| instance_variable_set("@#{key}", value) } |
 end
```
こんな感じで、すぐに下にあるinitializeメソッドでassignが呼ばれているので、ActionView.newをした時にassignが呼び出されていることがわかる。
ここから先はブログの丸パクリ
 actionview/lib/action_view/rendering.rb の _render_templateで
actionpack/lib/abstract_controller/rendering.rb

Controllerのancestorを探ってみると、AbstractController::Renderingが呼ばれているので、結果として値が渡されていることがわかる。

view_assignに@kkkを追加して見たらちゃんとinstance_cvariablesで見に行った時に追加されていた







##参考にしたurl
<a href="https://attonblog.blogspot.jp/2016/12/okinawarb-advent-calendar-2016-12-06.html">実行はほぼほぼこれと同じ</a>
発明と特許権の帰属について

今回は少し、特許法の話を。
特許法にこのような記載があります。

>第二十九条
１　産業上利用することができる発明をした者は、次に掲げる発明を除き、その発明について特許を受けることができる。

これがどういうことかというと、

###**特許権は発明した人にあります**

という意味です。

請負契約をして、**請け負った業務の間に発明が発生**する。
発明したことに気づかずに、見逃している方もいますが、案外起こります。

契約書をちゃんと読むとわかりますが、だいたい

>業務中に発生した知財権は甲に帰属する

といったことが書いてあります。

実はこれは結構問題があって、「発明しても権利は全部元請に無償譲渡します」という契約になっています。

では、**その特許にどれくらいの価値があるか？**をちょっと計算してみてほしい。

Googleさんに聞くと、いくつか計算方法が出てきます。
だいたい、売値の4%くらいが特許のライセンス料です。

1000円で売る製品だと、1個当たり40円がライセンス料として会社に入ります。
年間1万個売れると、年間40万円です。

販売後10年間1万個を売り続けると、400万円がその特許の価値です。

例の文面は、これを**無償譲渡するという契約**になっています。

**「発明なんて高度なことやってないよ」**と思うかもしれませんが、
日本の請負契約の場合は、これが案外頻繁に出てきます。

理由は、日本の慣習によるものです。
日本では、仕様をあいまいにしたまま発注をかけるという文化があります。

すると、受注後に**当初想定していなかった仕様上の不備**がいっぱい出てきます。
で、
###**「試行錯誤しながら問題を解決して、なんとか仕様を満たしました」**
という場合があると思います。

実は、

##**その解決手段は、発明です。**

大事なのでもう一度書きます。

##**その解決手段は、発明です。**

海外だと、こういうことはほとんど起こりません。
仕様をきっちり完成させた状態で発注をかけるので、課題解決のための手段を考えて発明するという行為が、元請側で行われます。

だから、元請の発明で、元請が労力を払って解決策を見つけて、その対価に特許権を取得します。

日本だと、仕様がまともに決まってない段階で丸投げにするから、発明が下請側で発生するのです。
すると、特許権は当然下請け側に発生します。
元請側は、発明のための労力も費用も払わずに、特許権だけを無償で受け取ります。

これは、商慣習としてはかなりまずいと思われます。
Kotlinにて二つのバージョンの比較処理を実装しました。

#概要
Androidにて強制バージョンアップの処理を実装する際に、
二つの異なるバージョンを比較する実装をKotlinにて実装しました。
Javaによる実装はあったのですがKotlinの実装例がなかったので投稿
[こちら](https://qiita.com/hkobe/items/30a8155f617ff8498deb#%E5%8F%82%E7%85%A7%E5%BC%95%E7%94%A8)を参考にKotlin版を実装しました。

#実装内容
``` kotlin:Version.kt

package jp.exam

import java.util.*

class Version: Comparable<Version> {
    private  var version: String
    private  var parts: List<String>

    constructor(version: String) {
        if(!version.matches(Regex("[0-9]+(\\.[0-9]+)+"))) {
            throw IllegalAccessException("Invalid version format")
        }
        this.version = version
        this.parts   = version.split(Regex("\\."))
    }

    override fun compareTo(other: Version): Int {
        val length = Math.max(this.parts.size, other.parts.size)
        for (i in 0..(length - 1)) {
            val thisPart = if(i < this.parts.size) this.parts[i].toInt() else 0
            val otherPart = if(i < other.parts.size) other.parts[i].toInt() else 0

            if (thisPart < otherPart) {
                return -1
            }
            if (thisPart > otherPart) {
                return 1
            }
        }
        return 0
    }

    override fun equals(other: Any?): Boolean {
        if (this == other) return  true
        if (other == null) return  false
        if (this::class.java.name != other::class.java.name) {
            return false
        }
        return this.compareTo(other as Version) == 0
    }
}
```

#使い方
```
val currentAppVersion = Version("1.0.0")
val latestVersion     = Version("1.1.0")
Log.d("Result", currentAppVersion.compareTo(latestVersion)) // -1

val currentAppVersion = Version("1.0.0")
val latestVersion     = Version("1.0.0")
Log.d("Result", currentAppVersion.compareTo(latestVersion)) // 0

val currentAppVersion = Version("1.0.1")
val latestVersion     = Version("1.0.0")
Log.d("Result", currentAppVersion.compareTo(latestVersion)) // 1
```

Androidの場合VersionCodeで比較すればもっと楽に分岐できるのですが、
様々なバージョンへの応用とiOSとの実装を合わせるという観点から実装してみました。

#参照
[2つのバージョンで処理を分岐させたいときの、バージョン文字列の比較（Java実装）](https://qiita.com/hkobe/items/30a8155f617ff8498deb)
radio_buttonをbutton風スタイルにしてみよう【CSS】


##はじめに
チェックボックスだとデザイン的に少しチープに見えてしまうので、ボタン選択式にして少しリッチに見せる方法を、CSSを駆使してやってみようと思います。(divタグとか書くの疲れるのでslimで書かせてください)

## 実装
```ruby:slim
.validate-button
  = f.radio_button :validate_flg, 'valid', { id: 'valid' }
  = f.label '有効', for: 'valid'
  = f.radio_button :validate_flg, 'invalid', { id: 'invalid' }
  = f.label '無効', for: 'invalid'
```
ラジオボタンのid属性とラベルのfor属性を同じ値にすることで、ラベルテキストで選択が効くようになります。下の`display: none;`をコメントアウトするとラジオボタンが表示されるので、確認がてら試してしてみください。

```ruby:scss
.validate-button input[type='radio'] {
  display: none;
}

.validate-button label {
  background-color: #f4f4f4;
  padding: 5px 10px;
  border-radius: 3px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.125);
}

.validate-button input[type='radio']:checked + label {
  background-color: #b3b3b3;
}

.validate-button label:hover {
  background-color: #e7e7e7;
}
```
##おわりに
まぁまぁいい感じな表示になりましたが、なんでかlabel要素に`border-color`が適用されないのが少し残念ですね..
技術者視点でサトウの切り餅事件の特許を考える(2)　請求項の読み方、書き方

[前回](https://qiita.com/kumokumocc/items/eab877a18af94eafc451) から、有名なサトウの切り餅事件で特許を考えてみています。
前回は進歩性や新規性って何だという話を中心にしました。

以下が特許です。
https://patents.google.com/patent/JP4111382B2/ja?oq=%E7%89%B9%E8%A8%B1%E7%AC%AC4111382%E5%8F%B7

以下に絵なんかもあるので、概要を掴むにはいいと思います。
http://www.ypat.gr.jp/ja/case/patent/07.html


さて、今回は請求項を見てみます。
請求項はだいたい７～８個くらいある場合が多いですが、下の方の項はそんなに範囲が広くないので、最初の方を中心に読んでおけばいいでしょう。

>[請求項1]
焼き網に載置して焼き上げて食する輪郭形状が方形の小片餅体である切餅の載置底面又は平坦上面ではなくこの小片餅体の上側表面部の立直側面である側周表面に、この立直側面に沿う方向を周方向としてこの周方向に長さを有する一若しくは複数の切り込み部又は溝部を設け、この切り込み部又は溝部は、この立直側面に沿う方向を周方向としてこの周方向に一周連続させて角環状とした若しくは前記立直側面である側周表面の対向二側面に形成した切り込み部又は溝部として、焼き上げるに際して前記切り込み部又は溝部の上側が下側に対して持ち上がり、最中やサンドウイッチのように上下の焼板状部の間に膨化した中身がサンドされている状態に膨化変形することで膨化による外部への噴き出しを抑制するように構成したことを特徴とする餅。


請求項の読み方ですが、
###**「請求項に当てはまっていたら特許権を侵害しています」**
ということです。
ポイントは、
###**「ちょっとでもかすっていたら」**
ではなく、
###**「すべて当てはまったら」**
ということ。

つまり、長い請求項を作ってしまうと、それだけ**当てはまらない項目が出てきて逃げられる可能性が増える**ので、あまりよろしくないのです。

実際、越後製菓の特許の請求項1は、
**「側面にスリットの入った餅」**と書いておけば事足ります。
それだとありがたみがないので、いろいろ肉付けしていったらこうなったのでしょう。

ただ、その中で越後製菓は**大きなミス**をしています。
###**"平坦上面ではなく"**

という文言です。
平坦上面（表面）にスリットを入れていれば回避できるという解釈が成立します。

実際、裁判でもサトウ側はそれを攻撃していて、越後製菓は危うく敗訴するところでした。
**不必要な限定を入れて権利範囲が狭まってしまっている典型的な例**でしょう。

さて、越後製菓の請求項１ですが、単に
「側面にスリットの入った餅」
となっていた場合、どういう餅を作ると特許権の侵害になるのでしょうか。

***
###**１ 表面と側面にスリットの入った餅**
侵害になります。側面にスリットが入っている餅であることが条件なので、表面にスリットが入っていたかは関係ありません。


***
###**２ 側面に複数のスリットが入った餅**
侵害になります。スリットが複数あっても側面にスリットが入っている餅であることに変わりがありません。

ただし、サトウが「側面に複数のスリットが入った餅」という別の特許を出願することはできます。
新規性も進歩性も怪しいと思いますが、もし審査請求に通れば権利を主張できます。
では、この審査が通ったらサトウは特許を侵害していないことになるかというと、そんなことはありません。
やはり越後製菓にライセンス料を払う必要が出てきます。

ではこの特許に意味がないかと言われるとそれも違っていて、
たとえば「スリットの数が１本より３本の方が格段に美味しく焼きあがる」という場合は話が変わってきます。
越後製菓としても「スリット３本の餅を作って売りたい」という話になります。

このとき、越後製菓とサトウの間でどんな話し合いをするかというと、
「互いに互いの特許権を侵害するので、差し引き0にしましょう」という契約を結びます。
いわゆる、クロスライセンスです。

これを防ぐために、越後製菓は「側面に複数のスリットが入った餅」を公知にしておく必要があります。
請求項を「側面に１または複数のスリットが入った餅」にすると、より良いということです。
***

請求項の読み方はだいたいこういう感じです。
では、請求項の書き方はどうでしょう。

請求項は、特許事務所の方に作ってもらうことが多いと思いますが、**ある程度自分でイメージを作るほうがいい**と思います。

請求項は、発明したものを抽象化してエッセンスを取り出したものを記載します。
**「側面にスリットが入った餅」**を発明したら、それをそのまま書いてもかまいませんが、

餅に似た他の食品も同じように権利を主張したいならば、表現を少し抽象的に修正する必要があります。
**「側面にスリットが入った固形で熱により膨らむ直方体形状の食品」**あたりにしておけばいいと思います。

**「スリットが入った餅」**という請求項で出願しようとすると、さすがに怒られます。
それで特許取れちゃったらどうするの？
という素朴な疑問がありますが、みんなお利口さんだから、そういうことはしないようです。

基本的に請求項は**どんどん抽象化して、範囲が広くなる**ように持っていきます。

プログラマにわかりやすい言い方をすると、継承のbaseクラスを作るイメージです。
上手いこと抽象化できていると、似たいろんな事例に適用していくことができます。

この、**いろんな事例に適用できること**が請求範囲の広さそのものです。

逆に、具体的に書くと、どんどん範囲が狭まります。
超基礎python勉強セット（テスト投稿）

初めまして。
最初のテスト投稿です。

###paiza io
https://paiza.io/ja
ブラウザのプログラミング環境。
若干自由度低いですがどこでも簡単に作れるので良いです。
ログイン必要ないのも結構楽。
python以外にも多数言語で利用できます。

###python-izm
https://www.python-izm.com/
0からpythonを教えてもらったサイト。
本当にお世話になってます。

###teratail
https://teratail.com/
プログラミング専門質問サイト。
超基礎ではないけど基礎を知ってから、詰まる所ところはここで聞くといいです。


あとは・・・　特になし！
スイマセン　ただのテスト投稿なので・・・
しいて言えばgithubでこんなコード書きたいってのを眺めたり写経でもしてみてはいかがでしょうか！

あとはpaizaに書いた適当なコードでもテスト投稿します。
コード内容は大した意味ないです。

```random_histgram.py
# coding: utf-8
# Your code here
import numpy as np

c=[0 for i in range(20)]
for i in range(1000):
    q=int(20*np.random.rand())#==1==
    c[q]=c[q]+1

for i in c:
    for j in range(i):
        print('|',end='')
    print('')
```
==1==にnumpy.randomの色々な乱数入れて挙動勉強してもいいっすね
TypeScript Sampleをやってみるその３


## はじめに
[D3.js](https://d3js.org/)(Data-Drive Documents)は入力データを基にグラフなどのチャートをブラウザに出力するためのライブラリです。サンプルを試した備忘録を投稿します。

## 前提

* [Visual Studio Code](https://code.visualstudio.com/download)がインストール済み
* [Node.js/npm](https://qiita.com/taiponrock/items/9001ae194571feb63a5e)がインストール済み
* gitから[Sampleをダウンロードして](https://github.com/Microsoft/TypeScriptSamples/archive/master.zip)任意のディレクトリに解凍済み
* View In Browserがインストール済み(Market Placeより)
* OSはWindows7/10を想定

## サンプル d3
ブラウザへコンパイラーのステータスとパフォーマンスのチャートを出力するサンプル。

## ファイル構成
|パス|ファイル名|説明|
|:--|:--|:--| 
|.|data.js|data.tsのコンパイルにて作成されたJavaScriptファイル|
|.|data.js.map|data.tsのコンパイルにて作成されたmapファイル|
|.|data.ts|ブラウザへ出力するチャート定義TypeScript|
|.|perf.html|ブラウザ出力用のhtml|
|.|README.md|このサンプルの説明と使用方法|
|.|tsconfig.json|TypeScriptのコンパイルコンフィグファイル|

## クラス図とオブジェクト図
![TS_010.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/f7991c0e-3b00-fee1-759a-8900b4939467.jpeg)

## 実行
```
cd ./d3
tsc --sourcemap data.ts
```
`perf.htmlをエディターで表示`<kbd>Ctrl+F1</kbd> 

## 結果
![TS_011.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/af983558-62e0-3b92-d814-d7463ed99c88.jpeg)

## ポイント
data.tsのモジュールchartで描画プロット定義し、プロットの各変数の値を設定後、Document.addEventListenerで描画を実行します。
ブラウザ表示のperf.htmlでd3.vs.jsを呼び出しd3ライブラリをロード後、コンパイル済みdata.jsをロードしてブラウザにチャートを出力します。

```html:perf.html抜粋
<!doctype html>
<html>
<head>
<script src="http://d3js.org/d3.v2.js"></script>
<script src="data.js"></script>
```

## ノート
d3.jsの基本構造をメモしておきます。
チャートを出力するためには、TypeScriptでチャートのプロット定義(chart)とプロットの値定義(plot)およびブラウザ出力(document)の３つの定義が必要です。
そして、ブラウザ出力のhtmlでd3.jsとTypeScriptのコンパイル後のjsをロードします。
![TS_012.jpg](https://qiita-image-store.s3.amazonaws.com/0/239597/f777729c-5e0a-1722-c3c6-6eca799847db.jpeg)

## まとめ
数値を見える化するプレゼンにはチャートは必須アイテムです。
このサンプルでわかることは、チャートに結構プログラミングが必要なことです。汎用的なチャートのパターンクラスを作成したり、値の入力を外部ファイルから入力するなど標準化することでプログラミングの工数を低減できそうです。JavaScriptで実装できなかったクラスをTypeScriptでコーディングすることでd3ライブラリの有効活用ができます。

以上、おそまつ
Visual Studio 2017でdjango 2

Visual Studio 2017には，オープンソースで開発されているPython Tools for Visual Studio ([PTVS](https://github.com/Microsoft/PTVS))が統合されていて，Pythonの開発ができます。Pythonでウェブを開発するテンプレートも用意されていますが，執筆時点ではDjango 2に対応していません（[issue #3418](https://github.com/Microsoft/PTVS/issues/3418)）。生成される`requirements.txt`には
```
django>=1.9, <2
```
と指定されています。

2019/3/4追記 [Visual Studio 2019](https://docs.microsoft.com/ja-jp/visualstudio/releases/2019/release-notes-preview)ではdjango 2.xがサポートされる見込みです。

公式ドキュメントの[クイックスタート](https://docs.microsoft.com/ja-jp/visualstudio/ide/quickstart-python?context=visualstudio/python/default)では，Flaskを使ってウェブアプリケーションを作ります。これを参考にDjango 2のプロジェクトを作成します。

# Python環境のインストール

[Visual Studio](https://www.visualstudio.com/ja/) Community 2017をダウンロードして起動しましょう。既にインストール済でPython環境をインストールしていない場合は，タスクバーの検索窓に「Visual Studio Installer」と入力して起動し「変更」をクリックします。
![search_installer.png_trim.png](https://qiita-image-store.s3.amazonaws.com/0/130247/61f36803-390c-5c29-832c-5b81124503c4.png)

インストーラの「Python環境」にチェックを入れてください。入っていればインストール済です。「Python Webサポート」が選択されているはずです。
![run_installer.png_trim.png](https://qiita-image-store.s3.amazonaws.com/0/130247/1c546d07-fbdd-35bd-2562-2ac400e61410.png)

# プロジェクトの作成

新規プロジェクト（Ctrl+Shift+N）でプロジェクトを作成します。
「Webプロジェクト」を選択し，お好きな名前（ここでは`HelloDjango2`）を付けて「OK」をクリックします。
![new_project.png](https://qiita-image-store.s3.amazonaws.com/0/130247/0a719d1f-770b-c66d-6975-16312e454720.png)

# 仮想環境の追加

「ソリューションエクスプローラー」の「Python環境」を右クリックして，「仮想環境
を追加」します。
![env.png_trim.png](https://qiita-image-store.s3.amazonaws.com/0/130247/fdffa275-ee92-8c13-f65a-efefd4bdf7d6.png)

* [仮想環境を使用する](https://docs.microsoft.com/ja-jp/visualstudio/python/selecting-a-python-environment-for-a-project#using-virtual-environments)

# パッケージの追加

ソリューションエクスプローラーの「Python環境」の下にできた`env`を右クリックして，「`requirements.txt`を生成」します。`pip`や`setuptools`のバージョンが古いので，執筆時点で最新のものに書き換えました。
```
pip>=10.0.1
setuptools>=39.2.0
django>=2.0.5
```
![requirements.png_trim.png](https://qiita-image-store.s3.amazonaws.com/0/130247/3402795b-a8cb-34fa-2ba2-7a1f9e1ddfeb.png)

* [requirements.txt での必要なパッケージの管理](https://docs.microsoft.com/ja-jp/visualstudio/python/managing-required-packages-with-requirements-txt)

`requirements.txt`を保存（Ctrl+S）したら，もう一度`env`を右クリックして「`requirements.txt`からインストール」を選んでdjangoをインストールします。

# Djangoプロジェクトの作成

ソリューションエクスプローラーのプロジェクトを右クリックして「ここでコマンドプロンプトを開く」を選びます。起動したコマンドプロンプトでは，仮想環境が開始されているはずです。`where python`などとして確認してください。次のコマンドを実行してdjangoのプロジェクトを作成します。Visual Studioのプロジェクトのルートに`manage.py`が配置されるように，末尾に`.`をつけています。Djangoプロジェクトの名前はお好きなものをつけてください。

```
django-admin startproject mysite .
```

# スタートアップファイルの指定

ソリューションエクスプローラーのプロジェクトを右クリックして「追加」から「既存の項目」を選び`manage.py`を追加します。ソリューションエクスプローラーに追加された`manage.py`を右クリックして「スタートアップファイルとして設定」します。

プロジェクトを右クリックしてプロパティを開きます。「デバッグ」タブのポート番号を`8000`に「サーバコマンドの実行」の「引数」に`runserver`を入力します。
![property.png_trim.png](https://qiita-image-store.s3.amazonaws.com/0/130247/4274183b-5ba2-6172-7edb-f76771df00b0.png)

# サーバ起動

いよいよ開発サーバを起動します。デバッグメニューから「デバッグなしで開始」を選択してウェブブラウザが起動しておなじみの画面が表示されれば成功です。
![localhost.png_trim.png](https://qiita-image-store.s3.amazonaws.com/0/130247/fe26a77e-8f58-c7e3-c920-94e052055ab1.png)
フルAMPのWordPressテーマを公開した件

フルAMPのWordPressテーマ [LIQUID AMP](https://lqd.jp/wp/liquid_amp.html) をリリースしました⚡

![2018-05-19 0.01.04.png](https://qiita-image-store.s3.amazonaws.com/0/83040/e612ca4b-97b0-9f73-6d92-44f15613bf46.png)

# フルAMPとは？

全てのページテンプレートが、Googleの推進する **AMP HTML** で制作されています。
カノニカルAMP、スタンドアロンAMP、ネイティブAMPという呼び方もあるようです。

# なぜフルAMPなのか

先日、Google東京オフィスで行われた [AMP Roadshow Tokyo](https://events.withgoogle.com/amp-roadshow-tokyo/) に参加し、AMPに対する考え方が変わりました。
私はこれまで、AMPはモバイル専用のHTMLサブセットで、昔のcHTMLのようなものという印象だったのですが、AMPタグ/コンポーネントの充実により、Bootstrapのような**Webフレームワーク**に進化していました。

> AMPはモバイル記事ページやLP用ではなく、Webサイトを作るために使う

というお言葉もありました。

実際、Bootstrapよりも簡単にレスポンシブかつ動きのあるサイトを作成することができます。
また、ご存知の通り Google AMP Cache による高速化表示などの恩恵を受けることができます。

フレームワークとしてのAMPについては下記もご覧ください。
[リアルガチにヤバいAMP Start](https://qiita.com/am_/items/20b7478e9fb86d2acbfd)

## AMP化プラグイン使えば？

はい、その通りです。WordPressには、AMP版ページを出力するプラグインがあります。
既に多くのサイトでプラグインを導入されているかと思います。

しかし、2つのバージョンを管理する煩雑さを我々は経験から学んでいます。
モバイルファーストの時代。近い将来、レスポンシブ/フルAMPでWebサイトを作成するのが当たり前になる...かもしれません。

追記：AMP for WordPress 0.7.1 からカノニカルAMPに対応したようです。
ただし全てのテーマでフルAMPに対応できるものではありません。

## フルAMPサイト

既に海外ではフルAMPのサイトが登場しています。
https://daily.spiegel.de/

日本ではまだ無いかも、ということでしたので、
誰でも簡単にフルAMPサイトを作れる、WordPressテーマを作ってみました。

# フルAMPテーマについて

レスポンシブなのでマルチデバイスに対応しています。

## 使用したコンポーネント

### amp-carousel

![001.png](https://qiita-image-store.s3.amazonaws.com/0/83040/7d547dd1-3c44-383e-f088-9e0de99e36f3.png)

レスポンシブ対応のカルーセル（スライダー）を簡単に実装できるコンポーネントです。
テーマでは、カスタマイザーから画像を選択することができます。

### amp-sidebar

![002.png](https://qiita-image-store.s3.amazonaws.com/0/83040/54d743e0-237f-1ecb-e5b8-1b70a2ab50b8.png)

横から出てくるサイドバーメニューを実装するコンポーネントです。
テーマでは、メニューの設定内容を表示することができます。

### amp-social-share

SNSシェアボタンを簡単に実装できるコンポーネントです。
投稿ページに表示されます。

### amp-form

フォーム要素を利用するために必要なコンポーネントです。
検索ウィジェットの配置に対応しています。

### amp-analytics

アナリティクスを実装できるコンポーネントです。
本テーマでは、Googleアナリティクスに対応しています。
カスタマイザーでトラッキングIDを入力すればアクセス解析が可能です。

## JSON-LD

AMPページに必要な、JSON-LDを自動生成します。

## ウィジェット

ウィジェットエリアがありますので、「カスタムHTML」ウィジェットを利用して、AMPタグ/コンポーネントを配置することができます。

## 検証

AMPバリデートチェックをクリアしています。
https://validator.ampproject.org/

## PageSpeed

何もチューニングしていないWordPressで、
モバイル **Good 92 / 100** でした。

## ライセンス

テーマのライセンスはGPLです。

# 課題

AMPでは、JavaScriptやインラインCSSが使えないなどの制限があります。
それらが自動挿入される `wp_head()` と `wp_footer()` およびコメント機能を無効にしています。
そのため、**ほとんどのWordPressプラグインは動作しません。**

また、投稿記事中やウィジェットなどでJSを使用している場合は、AMPエラーになります。

# デモ/ダウンロード

公式サイト: [LIQUID AMP](https://lqd.jp/wp/liquid_amp.html)
GitHubは[こちら](https://github.com/lqdjp/liquid-amp)です。
DialogflowからFacebook MessengeのBotとして動かす

簡単に制御するための覚え書き
![facebook-messenger.png](https://qiita-image-store.s3.amazonaws.com/0/122121/e325096f-7311-2411-5298-d81e88d2e095.png)
前回の「まずはDialogflowを触ってみる」をFacebook MessengeのBotとして動作させます。
https://qiita.com/sanoh/items/efd99ebbdee294a7beb3
■Dialogflowの左メニュー「Integrations」からFacebook MessengerをOnします。
---
![2018-05-21.png](https://qiita-image-store.s3.amazonaws.com/0/122121/2a546c13-e966-8867-5d69-9b162668b5c6.png)

■すると以下のような画面があらわれますので
---
右上のスイッチをOnにしてください。
![2018-05-21 (1).png](https://qiita-image-store.s3.amazonaws.com/0/122121/19f94355-5dad-d065-ba41-dd31c11fe73f.png)

■Facebook側のBot設定
---
https://developers.facebook.com/apps　にアクセスし、「新しいアプリの作成」を押します。
![2018-05-21 (2).png](https://qiita-image-store.s3.amazonaws.com/0/122121/abeb1fec-9357-98da-dfdb-176916300601.png)

■新しいアプリIDの作成
---
表示名は自由につけられるので今回は「FoodTest01」とします、そして「アプリIDを作成してください」ボタンを押します。
![2018-05-21 (4).png](https://qiita-image-store.s3.amazonaws.com/0/122121/afdf4c59-f041-9bcf-8633-7725f9b29477.png)

ロボットでないとをチェックし、送信します。
![2018-05-21 (5).png](https://qiita-image-store.s3.amazonaws.com/0/122121/9d4c6aa2-0c5b-3593-9404-d048c1bc72e0.png)
■管理画面からのログイン
---
名前が「FoodTest01」であることを確認し「Facebookログイン」を選択します。
![2018-05-21 (6).png](https://qiita-image-store.s3.amazonaws.com/0/122121/696617ea-66df-da81-24a7-f10fcbf74df4.png)

■トークン
---
設定画面に移動したら、下にスクロールさせます、
![2018-05-21 (7).png](https://qiita-image-store.s3.amazonaws.com/0/122121/4ffc47f3-f35b-da30-bff4-cc7630a7993a.png)

するとトークン生成の部分にくるので「FoodTest01」に設定します、すると自動でページアクセストークンが生成されます。（FoofTest01が選べない時は「あたらしいページを作成」で作成してください）
![2018-05-21 (12).png](https://qiita-image-store.s3.amazonaws.com/0/122121/1da2169a-c52d-1f4c-4d26-aede505fc60b.png)
このトークンをもってDialogflowにもどります。
■
---
さきほどのトークンをPage Access Tokenにコピーし、Verify Tokenは適当につけてください
今回は「FoodTestToken」とします。

![2018-05-21 (11).png](https://qiita-image-store.s3.amazonaws.com/0/122121/a0a35335-9226-fa8e-01b0-a8f5b12d037b.png)
そしてSTARTを押すとCallback　URLが生成されるので、それをコピーします。
![2018-05-21 (14).png](https://qiita-image-store.s3.amazonaws.com/0/122121/dfda901b-bc19-9c75-6b00-3ec670f75a76.png)
またFacebookのページにもどり
■
---
DialogflowでしゅとくしたCallbackURLを設定し「確認して保存」をします。
![2018-05-21 (15).png](https://qiita-image-store.s3.amazonaws.com/0/122121/0b149514-37ae-198f-b097-a8438dc05183.png)
これで完成。
■テスト
---
あとは、直接FoodTest01に話しかければ、いつものようにBotとして会話します。
![2018-05-21 (17).png](https://qiita-image-store.s3.amazonaws.com/0/122121/6e646c81-80f6-204c-31e2-b36dac5cebf7.png)
Node.js[CentOS6]から自然言語[Cloud Natural Language API]を使ってみる。

#Node.jsから自然言語Apiを使ってみた。
こんにちは。
新卒マイナス1年目エンジニアの和尚です。

自分用メモ。
とりあえず使うことが目的なのでかなり適当です。

開発前の環境
* CentOS6
* Python --version 3.5
* Node.js --version 8.11

##1. Cloud SDKをインストールする
まずPythonのバージョンが3.5.2だったので2.7.＊をpyenvからインストールする、

1.バージョン確認

```
$ python --version
```

2.pyenvで現在インストールされているのバージョン確認(2.7.＊がインストールされていれば4へ)

```
$ pyenv versions
```

3.pyenvで2.7.＊をインストール(今回は2.7.13)

```
$ pyenv install 2.7.13
```

4.バージョンを2.7.13にする。

```
$ pyenv local 2.7.13
```

5.pythonのバージョンを確認して2.7.13になっていればOK

6.cloud SKDをインストールして確認する。(管理者権限で)

```
$ curl https://sdk.cloud.google.com | bash
$ exec -l $SHELL
$ gcloud --version
```

##2.Nodeのファイルを作成

1.ディレクトリ作成

```
$ mkdir node_la
$ cd node_la
```

2.packege.json作成

```
$ npm init -y
```

3.実行ファイル作成

```
$ touch server.js
```

##3.Google Cloud側の設定

1.google cloudのコンソールから自然言語apiを有効化する。

2.apiの認証画面からサービスアカウントキーを作成。役割はprojectのオーナーでOK。

3.ダウンロードされたjsonファイルをnode_laに配置

##4.使ってみる

1.cloud sdkとディレクトリから使えるようにする。(設定したものを選んでいく)

```
$ gcloud init
```

2.クライアントライブラリインストール

```
$ npm install --save @google-cloud/language
```

3.環境変数にjsonのパスを指定する(セキュリティを全く考えていないので、適宜変えてください）

```
$ export GOOGLE_APPLICATION_CREDENTIALS=./[ファイル名].json
```

4.server.jsにコードを書く

```javascript:server.js
const language = require('@google-cloud/language');

// Instantiates a client
const client = new language.LanguageServiceClient();

// The text to analyze
const text = 'Hello, world!';

const document = {
  content: text,
  type: 'PLAIN_TEXT',
};

// Detects the sentiment of the text
client
  .analyzeSentiment({document: document})
  .then(results => {
    const sentiment = results[0].documentSentiment;

    console.log(`Text: ${text}`);
    console.log(`Sentiment score: ${sentiment.score}`);
    console.log(`Sentiment magnitude: ${sentiment.magnitude}`);
  })
  .catch(err => {
    console.error('ERROR:', err);
  });
```

5.実行してみて表示されれば成功

```
$ node server.js
```

```
Text: Hello, world!
Sentiment score: 0.30000001192092896
Sentiment magnitude: 0.30000001192092896
```

かなり大雑把ですが、こんな感じでnodeから自然言語apiを叩いてみました。
Laravelでフォームから送信された画像を縦横比を維持したままリサイズする

# パッケージのインストール
```shell
$ composer require intervention/image
```

# configの書き換え
Vimを使っていると、適当な位置にペーストして
Shift + v で行選択、:sort uで並び替えると便利

```php:config/app.php
'providers' => [
    ...
    Intervention\Image\ImageServiceProvider::class,
    ...
];
...
'aliases' => [
    ...
    'Image' => Intervention\Image\Facades\Image::class,
    ...
];
```

# storageとpublicフォルダをリンクする
```shell
$ php artisan storage:link
```

# Controller
```php:app/Http/Controllers/HogehogeController.php
class HogehogeController extends Controller
{
...
    public function store(Request $request)
    {
        // ファイルを保存&ファイルの保存先URLを取得
        $filepath  = $this->save_imagefile($request);

        $hogehoge = new Hogehoge;
        $hogehoge->fill($request->all());
        $hogehoge->filepath = $filepath;
        $hogehoge->save();

        $message = [
            'type'      => 'success'
            , 'text'    => '登録が完了しました'
        ];
        return redirect()->route('hogehoges.index')->with('message', $message);
    }

    /**
     * 写真を保存する
     *
     * @param $request
     * @return string 保存するファイル名
     */
    private function save_imagefile($request)
    {
        // ファイルがアップロードされていない場合、nullを返す
        if (is_null($request->file)) return null;

        $filepath  = '/storage/hogehoges/' . md5(date('YmdHis')) . '.' . $request->file->getClientOriginalExtension();

        // resize
        $exif = Image::make($request->file)->exif();
        if (is_null($exif)) return null;
        $width  = 400;
        // 横幅と比例してリサイズするための高さを計算する
        $height = $exif['COMPUTED']['Height'] / ($exif['COMPUTED']['Width'] / $width);
        Image::make($request->file)->resize($width, $height)
                                   ->save(public_path() . $filepath);

        return $filepath;
    }
...
}
```

# 参考サイト
https://manablog.org/laravel-image-manipulation/
技術者視点でサトウの切り餅事件の特許を考える(1)　課題、進歩性、新規性

今回は特許のお話。

特許というのは、思いのほか何もわかっていない人が多いようです。

申請の仕方とか、手続きの話は他に任せるとして、技術者的な視点で特許をどう見ていけばいいかを書こうと思います。

例として、有名なサトウの切り餅事件を出してみます。

以下が特許です。
>https://patents.google.com/patent/JP4111382B2/ja?oq=%E7%89%B9%E8%A8%B1%E7%AC%AC4111382%E5%8F%B7

以下辺りを読むと、概要はわかりやすいと思います。
>http://www.ypat.gr.jp/ja/case/patent/07.html

特許を読むとき、自分が最初に何を読むかというと、

【従来の技術及び発明が解決しようとする課題】

のところです。
過去どんな課題があるのかを見ます。

>【０００２】
【従来の技術及び発明が解決しようとする課題】
餅を焼いて食べる場合、加熱時の膨化によって内部の餅が外部へ突然膨れ出て下方へ流れ落ち、焼き網に付着してしまうことが多い。
【０００３】
そのためこの膨化による噴き出しを恐れるために十分に餅を焼き上げることができなかったり、付きっきりで頻繁に餅をひっくり返しながら焼かなければならなかった。古来のように火鉢で餅を手元に見ながら焼く場合と異なりオーブントースターや電子レンジなどで焼くことが多い今日では、このように頻繁にひっくり返すことは現実なかなかできず、結局この突然の噴き出しによって焼き網を汚してしまっていた。
【０００４】
このような膨化現象は焼き網を汚すだけでなく、焼いた餅を引き上げずらく、また食べにくい。更にこの膨化のため餅全体を均一に焼くことができないなど様々な問題を有する。

餅がぷくっと膨れる現象です。あれを最大限悪く言うとこうなるわけですね。

>【０００７】
一方、米菓では餅表面に数条の切り込み（スジ溝）を入れ、膨化による噴き出しを制御しているが、同じ考えの下切餅や丸餅の表面に数条の切り込みや交差させた切り込みを入れると、この切り込みのため膨化部位が特定されると共に、切り込みが長さを有するため噴き出し力も弱くなり焼き網へ落ちて付着する程の突発噴き出しを抑制することはできるけれども、焼き上がった後その切り込み部位が人肌での傷跡のような焼き上がりとなり、実に忌避すべき状態となってしまい、生のつき立て餅をパックした切餅や丸餅への実用化はためらわれる。

餅の表面に切り込み（スジ溝）を入れると、ぷくっと膨れるのを防ぐことはできる。
これもすでに知られていた技術だと書いてあります。
ただし、これだと表面に切れ込みができたまま焼きあがるので綺麗ではないという旨が書いてあります。

ここで、図をパラパラとめくります。すると、だいたいどんな感じで課題を解決しようとしているのかわかります。

今回の特許の発明は、
###**「表面にスリットを入れるのはやめて側面にする」**
というのが発明の本質です。

###**「そんなの誰でも思いつくじゃん」**
と思った方。正解です。

特許の発明は高度であることが求められています。

>特許法第二条1
この法律で「発明」とは、自然法則を利用した技術的思想の創作のうち高度のものをいう。

常識的に言って、
「表面にあったスリットを側面に持ってきただけで高度な発明なの？」
と言われると、高度じゃないと思います。

審査官と越後製菓のやり取りの中で論点がだんだんずれてきて、気が付いたら高度な発明だということになっていたというのが実態だと思います。

特許においては、高度じゃないものを高度だと言い張って審査請求を通してしまうのが、実は一番強い。
もう１つ、侵害していた時、侵害していたことを容易に判別できる特許が強いです。
この2つを兼ね備えているので、越後製菓の特許は確かに非常に強い特許と言えます。

さて、進歩性が出てくると、新規性の話もしておきます。
新規性というのは、
###**「餅の側面にスリットを入れたのはあなたが初めてですか？」**

という話です。

出願以前に餅の側面にスリットを入れた餅が存在していたら、新規性がないことになります。
これは、**特許出願する側にとって結構大きいリスク**です。

進歩性については、いろんな人のいろんな意見があります。
その中で審査官が進歩性ありと認めた実績があるのだから、そう簡単には覆りません。

しかし、新規性は簡単に覆ります。
越後製菓の特許だと、
###**「5年前の3分クッキングで、餅の側面に切り込みを入れるとうまく焼けると紹介されていた」**

というだけで、新規性は失われます。

サトウの従業員が、料理雑誌や、料理番組等の過去の情報を全部ひっくり返して探せば、新規性を失わせる資料が見つかる可能性はゼロではありません。

もし、そんな資料が見つかれば、途端に特許の価値はゼロになるどころか、他社にライセンス料の返還を要求される可能性すらあります。

越後製菓はサトウの切り餅事件でリスクを背負っていなかったかというとそうではないことがわかると思います。

このリスクを分散させるには、別の特許を併せて取ることです。
簡単な例は、**「餅にスリットを入れる機械」**で取ってしまうことです。

さすがにそんな機械を過去に作った人はいないでしょうから、新規性を失わせるのは困難です。

今回はこれくらいにしておきます。次は、請求項を読んでみます。
EC2にまとめてCloudwatchAlarmを設定

メモ。

# 何がしたいかってーと
EC2の名前でフィルタリングして取得、それらのインスタンスにcloudwatch alarmをサクッと登録したい

## About
1. ```aws ec2 describe-tags``` で対象のEC2取得
2. ```aws cloudwatch put-metric-alarm``` でalarm登録


# 前準備として
実行するマシンに設定してる権限要確認

# スクリプト
以下のファイルを適宜改変、設置して実行権限付けて。
usage ./このshell.sh -f フィルタして拾ってくる名前 -t アラーム送る閾値

```bash
#!/bin/bash

CMDNAME=`basename $0`

while getopts f:t: OPT
do
  case $OPT in
    "f" ) FILTER="$OPTARG" ;;
    "t" ) THRESHOLD="$OPTARG" ;;
      * ) echo "Usage: $CMDNAME [-f Filter VALUE STR] [-t Threshold VALUE INT]" 1>&2
          exit 1 ;;
  esac
done

echo "FILTER ${FILTER}"
echo "THRESHOLD ${THRESHOLD}"

TEMP="./temp.txt"

# アクションが一つだけなら
#ARN="arn:aws:sns:ap-northeast-1:xxxxxxx:alert-xxxx"
# 複数アクションならスペースでつなげる ex.
ARN="arn:aws:sns:ap-northeast-1:xxxxxxx:alert-xxxx arn:aws:sns:ap-northeast-1:xxxxxxx:alert-slack"

# インスタンスIDの取得
aws ec2 describe-tags \
    --filter "Name=resource-type,Values=instance" \
             "Name=value,Values=*${FILTER}*" \
    --query "Tags[*].[Value,ResourceId]" \
    --output text |tr '\t' ','>${TEMP}

# 取得したインスタンスIDを元に逐次処理
while read LINE
do

    echo $LINE
    # インスタンス名とIDを切り出し
    NAME=`echo ${LINE}|cut -d ',' -f 1`
    ID=`echo ${LINE}|cut -d ',' -f 2`

    # OpsWorksから作ったEC2だと、何故かインスタンス名ありと無しで2つ拾って来てた。原因追ってない。
    # とりあえずインスタンス名無い場合continueしちゃってる
    if [ "$NAME" = "OPS" ]; then
        continue
    fi

    echo "${NAME}"
    echo $ID
    echo "#########"

    # CPUUtilizationのアラームを設定
    aws cloudwatch put-metric-alarm \
        --alarm-name "${FILTER}-${NAME}-CpuUtilization > ${THRESHOLD}" \
        --namespace AWS/EC2 \
        --metric-name CPUUtilization \
        --dimensions "Name=InstanceId,Value=${ID}" \
        --period 300 \
        --statistic Average \
        --threshold ${THRESHOLD} \
        --comparison-operator GreaterThanOrEqualToThreshold \
        --evaluation-periods 1 --alarm-actions ${ARN}
done <${TEMP}
```

- disk系のalarmのようにdimensionsの指定項目が1つで無い場合、以下のようにスペース区切りで。
```
--dimensions Name=InstanceId,Value=${ID} Name=Filesystem,Value=/dev/XXXX
```

- SNSのARNを調べるなら、SNSのコンソールか、適当にAlarm定義して
    - ```aws cloudwatch describe-alarms --alarm-names "SNS TEST"``` 
    - とかで調べる。
    - コマンドでdimensionsが判らない場合もcloudwatchコンソールから一回alarm設定してみて上記コマンドで調べる。（もっと良い方法有ると思うけど。）

# 参考
https://blog.interstellar.co.jp/2017/08/awscloudwatch-alarm.html
他にも有った気がするんだけど忘れた。。。
OpenWRT環境で動くC言語プログラムのコンパイル方法

# きっかけ
ここ一年くらいArduino環境で色々作っている。
今取り扱っている製品は、ArduinoYunをベースに作られたものだと思われる。
(ここら辺の理解度がいまいち。。。ArduinoYunはハードの構成で、ArduinoパートとLinuxパートに分かれていて、Linuxパート上にOpenWrtを乗せていると思っている。)

Arduinoに加えてpythonなんかも動かせたりするのは非常に便利なのだけれども、pythonは起動が遅い。

ネットにRESTを投げるプログラムなんぞは、ライブラリの読み込みで20秒くらいかかった。

なので、Cで作る方法を模索。
↓やっと見つけた素晴らしいサイト。

http://m-masataka.hatenablog.com/entry/2016/08/20/192445

大きな問題でもないが、自分で操作した時と多少ずれがあったので以下に手順を記載。

# コンパイル方法
環境はUbuntuを使ったが、CentOSでもほぼ変わらないと思われる。
（SDKを落として来たら、そのSDK内のコンパイラでコンパイルするだけだから）

## SDKのダウンロード
https://downloads.openwrt.org/
上記のURL直下に、OpenWrtのバージョンのコードネーム（カオス カルマとか中二っぽい）のディレクトリがあり、その下をたどっていくとSDKのファイルがある。

```
wget https://downloads.openwrt.org/chaos_calmer/15.05/ar71xx/generic/OpenWrt-SDK-15.05-ar71xx-generic_gcc-4.8-linaro_uClibc-0.9.33.2.Linux-x86_64.tar.bz2
```

## SDK展開
SDKを展開した後、長いディレクトリ名を修正している。（また、この時点で好きなディレクトリに配置しておくと良い）

```
tar -xvf OpenWrt-SDK-15.05-ar71xx-generic_gcc-4.8-linaro_uClibc-0.9.33.2.Linux-x86_64.tar.bz2
mv tar -xvf OpenWrt-SDK-15.05-ar71xx-generic_gcc-4.8-linaro_uClibc-0.9.33.2.Linux-x86_64 openwrt
```

## 適当にC言語のファイルを作成
確認用にHello Worldを出力するC言語のファイルを作成。
ディレクトリは適当に作成。

```
mkdir openwrt/helloworld
cd openwrt/helloworld
vi helloworld.c
```

```c:helloworld.c
#include <stdio.h>
int main(void)
{
        printf("Hello World\n");
        return 0;
}
```

## コンパイルする
ここで参考のサイトとずれ発生。
予め、次のパスを通しておく。

```
export OPENWRT_HOME=/{SDKのパス}/openwrt
export CC=$OPENWRT_HOME/staging_dir/toolchain-mips_34kc_gcc-4.8-linaro_uClibc-0.9.33.2/bin/mips-openwrt-linux-gcc
export STAGING_DIR=$OPENWRT_HOME/staging_dir/toolchain-mips_34kc_gcc-4.8-linaro_uClibc-0.9.33.2
```

次のコマンドでコンパイル実行。
カレントディレクトリはopenwrt/helloworldのまま。

```
$CC -o helloworld.o helloworld.c
```

これで生成されるhelloworld.oがとりあえずの実行ファイル。

## 動作確認
もちろんUbuntuやCentOSでは実行できないので、OpenWrtにscpなどで置いてやって動作確認。

```:Ubuntu
scp helloworld.o root@192.168.xx.xx:
```

```:OpenWRT
# ./helloworld.o
Hello World
```