OmniAICreator/Qiita-1.07M huggingface dataset:
Apacheで何故かSSL証明書が読み込まれないときに試して欲しいこと(Apache 2.4.6 )

## この事象を確認した環境
Cent OS 7.5.1804
Apache 2.4.6 

## 事象
正しい証明書と鍵をサーバに配置してssl.confのSSLCertificateFileとSSLCertificateKeyFileに正しく設定したのにブラウザ(Crome)で確認するとこんなことを言われる。

```
このサイトは安全に接続できません 
{ホスト名} から無効な応答が送信されました。
ERR_SSL_PROTOCOL_ERROR
```

そんなバカなと思い、目を皿のようにして証明書に登録されているドメインやssl.confの設定を確認しても全て正しいように見える。

## 原因
VirtualHostとSSLCertificateFile等の設定の順番

## 詳しく
当初、/etc/httpd/conf.d/配下にこんな名前でそれぞれVirtualHostとSSLの設定を書いたファイルを配置していた。

```
httpd-vhost.conf
ssl.conf
```

httpd.confから、まぁ、デフォルトのままで、このように読み込んでいる。

```
IncludeOptional conf.d/*.conf
```

この際、どうもファイル名順に.confファイルが読み込まれているらしい。
httpd-vhost.confの名前をvhost.confに変更し、ssl.confが先に読み込まれるようにしたところ・・・

## 何事もなかったかのようにSSL証明書が適用されてブラウザでページが表示されました。

以上
これは便利!!『HTML Imagemap Generator』を使って<area>タグの座標をかんたんに取得


## 概要
初めてイメージマップ案件が来ました。
日本地図の画像に100個のareaタグ。1つ1つ手作業で座標を図っていくのは絶望的に大変。。

そんなときに出会ったのが、こちら。
http://labs.d-s-b.jp/ImagemapGenerator/

本日ご紹介する『HTML Imagemap Generator』です!!!!!!
(通販番組みたいだな..)

↓↓↓ 作者はこの方です ↓↓↓
https://bunlog.d-s-b.jp/html-imagemap-generator

## 使い方
私はjsonに座標だけ書き込みたかったので、ジェネレートまで至らなかったのですが、非常に使いやすいです。詳しい**使い方は上記のサイトやブログに書かれています**。

<img width="568" alt="スクリーンショット 2019-01-25 19.30.11.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/224562/df27b58c-9626-6657-480b-cc93f0abc264.jpeg">


私が使ったやり方は、
1. 画像をドラッグアンドドロップ(解像度対策で2倍サイズ画像をお持ちの場合は、**1倍のものを使ってくださいね**)
2. 右上の**3種類のボタンから好みの形を選びます**(私は丸と矩形両方使いました)
3. 座標を取りたい場所を左上から**ドラッグ**します
4. 手を離したら、**右側にareaタグが追加されています**
5. わたしはジェネレートせずにそのままcoordsの**値をコピって使いました**
以上です。

### おまけ
ありがたい。。。とてもありがたい。。。
自分もこんなふうに誰かの役に立つwebサービスをつくって見たいものです。

しかし、イラレからこういうのって自動生成できそうな気がしました。だめなのかなぁ？

これだと100%手作業ってわけではないですが、まだ手作業の域ですよね;
完全に自動生成できればとっても楽ちんになりそうです。
「Neural Networks and Deep Learning」コース修了とCousera Honer Code 

##はじめに

Qiitaで評判の高い、Neural Networks and Deep Learning(Cousera)を、3ヶ月で修了しました**1*
ML初学者の、エントリーレベルの私にとっても、Andrew Ng先生のかみ砕いた説明と、Assignment*2の試行錯誤で、はじめの一歩をふみだせました

*1:通常4weekのコース、3ヶ月かかったのは私都合です（放置していたため、なんどか、期間リセット...）
*2:放置は、[Machine Learning | Coursera](https://www.coursera.org/learn/machine-learning)を先に受けるのがよかったなぁ、と振返ると思います。

##コース受講の目的

サンプルコードをさわったり、APIの利用をする段階から、一歩踏み込んで
(私にとって)ブラックボックス*3の、Neural Networksモデルを
グレーボックス(?)くらいに薄めて、エンジニアリングの糧にしたい。

*3:そもそもsigmoid関数やsoftmax関数とか、知らなかった状態でした...

####成果
![Coursera QQNCZHXR5RTS-1.jpg](https://qiita-image-store.s3.amazonaws.com/0/198177/78b91104-7380-34eb-7d8d-4bd59076786e.jpeg)
~~公開用なので、点数ないverですが、実は、スコアは80.xxxxxの低空飛行~~
#受講者のスペック
 　ITに入って、2年目
　 ーkaggle competition contributer*4

*4: novice(チュートリアル)を完了際、discussionの項目は、kenerlに"Great Work"と書いてのりこえました...
#Cousera Honer Code
ディスカッションフォーラムをみていると、よく*Honor Code*とコメントされる。ことにきづきます。以前は、(履歴書に貼るまででない)内部の*certificate*を発行していたが、$49を受講して課題をこなすうえで、正当性を担保するためのものです

>Your answers to homework, quizzes, and exams must be your own work (except for assignments that explicitly permit collaboration).
You may not share your solutions to homework, quizzes, or exams with anyone else unless explicitly permitted by the instructor. This includes anything written by you, as well as any official solutions provided by the course staff.

#所感と、補足

Neural Network modelのモデルについて
基本的な手続きとして
NNのモデルをみて、
W、bといったパラメータの定義を繰り返し、書く
なんとなくで書けてしまうという指摘もあるが、
裏返すと、**Discussionをみて、Referenceをみていけば** 、解決できる感覚を養えたのが、初学者としては僥倖です

つたない例示として、以下のような1層のモデルを定義したとき
![neural.png](https://qiita-image-store.s3.amazonaws.com/0/198177/c8d85876-1424-0c55-225e-d5986d5a443e.png)

あるデータセットx(i)について

```math

\begin{align}
\qquad &z(1)^i= w(i)x(1) +b(i) \\
\end{align}

```
という式のもと、配列の計算をしていくのですが、
その際にに、はまった配列計算についてのtipsを下に書きます

配列の形状(shape)を考えて、計算することがあり,
自分なりに頻出の操作*のログになります

1)配列の生成(任意の次元の要素0をうみだす、重みづけ関数に使われます)

```python:python
Xarr = np.zeros(10)#10個の0を生成

print(Xarr)
```
output: [0. 0. 0. 0. 0. 0. 0. 0. 0. 0.]

2)配列の形状(shape)を確認する

```python:python
Xarr.shape
```
output:   (10,)

3)*配列の要素足し合わせ　
expectedのanswerにならないときがあり、
配列の要素を足し合わせるのに、ブロードキャスト(keepdims = True)にする必要があることを、あとでしりました。

```python:python
print(np.sum(Xarr))
print(np.sum(Xarr,keepdims=True))
```

output:0.0
output:array([0.])

...要素を1で行うと

```python:python
Yarr = np.ones(9)
print(np.sum(Yarr))
print(np.sum(Yarr,keepdims=True))

```
output:9.0
output:array([9.0.])
参照
https://deepage.net/features/numpy-sum.html

##あとがき
コース1では、RNNやCNNといったアーキテクチャ、tensorflowやkerasなどフレームワークは扱わず、numpyのみです

今後は、「画像認識ってどこをみてるの」等といった素朴な疑問に解答できるレベルを目指して(ヒントがCNNにありそうですが...)、MLを先ずは趣味の範疇になりますが、日々深めていきたいです
RedashのQuery Resultでのパラメータではまった

# Query Resultとは
RedashにはQuery Resultっていう便利なデータソースがあります。
どういうことができるかというと、RedashでQuery1とQuery2とかいうクエリがあったとします。
Query Resultはこの二つのクエリの結果を取り込んで、新しくクエリを作ることができたりします。

基本的な使い方は調べれば先人が書いていてくれるので、ここでは省略します。

# はまったところ
Query Resultsに取り込むクエリにパラメータが使用されていると、現行のバージョンだと上手く取得ができません。
パラメータとは{{}}で囲まれた変数のことです。

Query Resultsで取り込むクエリはIDで指定するのですが、パラメータを使用していないクエリなら、
`select * from query_1`といった感じに書けばうまくいきます。

しかしながら、パラメータが指定されていた場合この記述方法ではうまくいきません。

そこで、cached_queryなんてものがV6で追加されたみたいです。
`select * from cached_query_1`とすることで、キャッシュからパラメータの値を取得してくれるみたいです。
え？じゃあこれでいいじゃんって感じですが、Query Results側からの直接的な設定ができないのは何かと不便です。
また、自分の実行環境で行った時は、キャッシュからうまく値が取れないことがあり、使い物になりませんでした。orz

結局、元クエリからパラメータを除いたクエリを作成し、それをもってきてQuery Results側でパラメータを指定しなおすとかいうめんどくさいことをしました。

Redashの製作者さんが実装するよーみたいなことを話していたので、今後のバージョンでの実装に期待ってかんじですね。

自分の知識足らずでうまくできる方法があるようでしたら教えてください。お願いします...
SANsymphonyをデータストアとして使っているvSphere環境で全ESXiの全データストアにパスを一括追加するパワーシェルスクリプト

とあるユーザーの作業で使うために作ったのでここに共有しておきます。

##条件
1. Register VMware vCenterを使っていること
2. iSCSI接続
3. 各ESXiは既にVMFSデータストアとしてマウントしている （新規じゃない）

##実行するとどうなるか
既存のデータストアに同一LUNでパスを足してくれます。

##中身
まずPowerCLIでターゲットIPを追加します。

```
#vCenter Serverに接続
Connect-VIServer -Server x.x.x.x -User administrator@vsphere.local -Password xxxxxxxx

#全ESXiにターゲットIPアドレスを追加するコマンド（4IPなら4行書けばOK）
Get-vmhost | get-vmhosthba -type iscsi | New-IScsiHbaTarget -Address "w.w.w.w"
Get-vmhost | get-vmhosthba -type iscsi | New-IScsiHbaTarget -Address "x.x.x.x"
Get-vmhost | get-vmhosthba -type iscsi | New-IScsiHbaTarget -Address "y.y.y.y"
Get-vmhost | get-vmhosthba -type iscsi | New-IScsiHbaTarget -Address "z.z.z.z"

#全ESXiでリスキャン
Get-VMHost | Get-VMHostStorage -RescanAllHBA

#vCenterから切断
Disconnect-VIServer -Confirm:$False

```

その次のデータコアサーバー側で各vDiskにパスを追加していきます。

```
Import-Module 'C:\Program Files\DataCore\SANsymphony\DataCore.Executive.Cmdlets.dll' -WarningAction silentlyContinue

#接続
Connect-DcsServer  -Server x.x.x.x -UserName administrator -Password xxxxxxxxx

#データコアサーバ一覧取得（名前でソート）
$SERVER = Get-DcsServer | Sort-Object HostName

#FEポート一覧取得（名前でソート）
$FE = @()
get-dcsport -Machine $Server[0] | Sort-Object Alias | foreach {
    if ($_.serverportproperties.role  -eq "Frontend"){
        $FE += $_
    }
}       

#vDisk一覧取得（名前でソート）
$VD = Get-DcsVirtualDisk | Sort-Object Alias

#ESXi一覧取得
$ESXI = Get-DcsClient|where-object { $_.Type -eq "ESX" }

#1. vDiskごとにループさせる
foreach($VDstr in $VD){
    #下2行はコメントアウトしてもOK
    Write-Host($VDstr.Caption + " に追加します")
    Read-Host "続けるにはENTERキーを押して下さい" 
    $LD = $VDstr | Get-DcsLogicalDisk
    #2. クライアントごとにループさせる
    foreach($ESXIstr in $ESXI){
        $ESXIPORT = Get-DcsPort -Machine $ESXIstr | Where-Object{$_.PortType  -like "iSCSI"}
        #既存LUNを取得する(VMwareは同一データストアは同一番号の必要があるため）
        $LUN = $VDstr | Get-DcsVirtualLogicalUnit -InitiatorHost $ESXIstr |Select-Object lun
        #3.　2データコアサーバー分ループ
        foreach($SERVERstr in $SERVER){
            #4. 全FEパス分ループ
            foreach($FEstr in $FE){
                #5. FEパス追加
                #LDどっちを使うか判断（ミラーなので内部的に2つディスクデバイスがある）
                if($LD[0].Caption -match $SERVERstr.HostName){
                    $LDstr = $LD[0]
                }else{
                    $LDstr = $LD[1]
                }
                Add-DcsVirtualLogicalUnit -InitiatorHost $ESXIstr -TargetHost $SERVERstr.RegionNodeId -InitiatorPort $ESXIPORT -TargetPort $FEstr -LogicalDisk $LDstr  -MappingType Client -LUN $LUN[0].lun
                }
            }
        }
    }
Disconnect-DcsServer
```
最後に全台リスキャンしてもいいかも。
paizaでsympy その5

#概要

sympyが、魔法なので、paizaで、やってみた。
練習問題、やってみた。

#問題

x，y，z を論理変数，Tを真，Fを偽とするとき，次の真理値表で示される関数 f(x，y，z) を表す論理式はどれか。ここでnは論理積，Uは論理和，~AはAの否定を表す。

|x| y| z| f|
|:--|:--|:--|:--|
|t| t| t |t|
|t| t| f| t|
|t |f |t |t|
|t |f |f |f|
|f |t |t |f|
|f |t |f |f|
|f |f |t |t|
|f |f |f |f|


(xny)U(ynz)
(xny)U(~ynz)
(xny)U(~yn~z)
(xn~y)U(~yn~z)

#サンプルコード

```
import sympy as sym

a = sym.POSform(['x', 'y', 'z'], [[1, 1, 1], [1, 1, 0], [1, 0, 1], [0, 0, 1]])
print (a)
b = sym.SOPform(['x', 'y', 'z'], [[1, 1, 1], [1, 1, 0], [1, 0, 1], [0, 0, 1]])
print (b)
```

#結果

```
(y | z) & (x | ~y)
(x & y) | (z & ~y)
```

以上。
イントラ内で気軽にプライベートなコンテナレジストリをたてるならNASでしょ

# 概要

開発用にプライベートなコンテナレジストリを立てるならどうしますか？
真っ先に思いつくのがイニシャルコストが低いクラウドサービス（AWS、Docker Hub、GCP、Azure）になると思いますが、長期的なランニングコストや扱うデータ量（特に通信量）によっては、バカにならないコストになるかと思います。また、インターネット越しにイメージを取得したりするとレーテンシも気になってきます

そうするとイントラ内でサーバを立てる案になりますが、ラックサーバになるとそこそこな値段します
そこで案外穴場なのが**NASでプライベートなコンテナレジストリを運用する**

# なぜNASなのか

　最近のNASはアドオンベースでVM、Docker、クラウドストレージとの同期、開発環境（Node.js、Java）、Webサーバ（Apache、Nginx）、動画配信などが設定メニューでポチッとするだけで簡単に導入できる。普通にサーバ買うよりもコストパフォーマンスが高く、中小企業や部門内であればいろんなことができちゃうので、オススメです！
　大容量のストレージがのるので、Gitlabとコンテナレジストリを同居させるのもいいですね。商品によってはSSDサポートしているものもあるので、イメージのビルドもサクサクできるのではないかと思います。また、開発用のレジストリならばRAID０とかでいいかと思います。壊れたらまた作ればいいですし。その場合は、Gitlabのソースだけはクラウドストレージと同期した方が安心ですね

# どうやって

もう答えお分かりかと思いますが、Dockerが使えるので、Dockerレジストリを立てればおしまいです！

# NASのメリット

- アドオンが豊富
  - [QNAP](https://www.qnap.com/ja-jp/app_center/)
  - [Synology](https://www.synology.com/ja-jp/dsm/packages)
- LANだから高速
  - 2ポートLANでネットワークの冗長化も可能
  - 製品によっては10GbE対応もある
- 比較的に安い
- 普通にファイルサーバとしても使える
- 利用量を気にする必要はない

# 製品紹介

とりあえず自社で購入にあたって調べた商品を紹介します
一応有名どころ2社でビジネス向けで4ドライブ対応のラインナップになります

- QNAP
  - [TS-431P](https://www.qnap.com/ja-jp/product/ts-431p)
  - [TS-431X2](https://www.qnap.com/ja-jp/product/ts-431x2)
- Synology
  - [DiskStation DS918+](https://www.synology.com/ja-jp/products/DS918+#specs)
  - [DiskStation DS418](https://www.synology.com/ja-jp/products/DS418#specs)
mql4 発注のみ

```MQL4
//単に一回発注を実行するだけのプログラム

#property strict

extern int    MagicNumber = 123456; //マジックナンバー
extern double Lots        = 0.1;    //取引数量
extern int    Slippage    = 1;      //スリッページ
bool isEntry=true;

extern double stoploss=0.0;
extern double takeprofit=0.0;

string m_symbol="USDJPY";   //取引通貨
//+------------------------------------------------------------------+
//| Expert initialization function                                   |
//+------------------------------------------------------------------+
int OnInit()
  {
   if(IsDemo())
     {
      Print("デモです");
        }else{
      MessageBox("本番環境です！OKを押すと実行します");
     }

//--- get minimum stop level 
   double minstoplevel=MarketInfo(Symbol(),MODE_STOPLEVEL);
   Print("Minimum Stop Level=",minstoplevel," points");

   return(INIT_SUCCEEDED);
  }
//+------------------------------------------------------------------+
//| Expert deinitialization function                                 |
//+------------------------------------------------------------------+
void OnDeinit(const int reason)
  {
   Print("終わり 終了コード＝",reason);

  }
//+------------------------------------------------------------------+
//| Expert tick function                                             |
//+------------------------------------------------------------------+
void OnTick()
  {
//---
   if(isEntry==true)
     {

      if(OrderSend(m_symbol,OP_BUY,Lots,Ask,Slippage,stoploss,takeprofit,NULL,MagicNumber)==-1)
        {
         Print("OrderSend Error ",GetLastError());
        }
      else
        {
         isEntry=false;
        }
     }
  }
//+------------------------------------------------------------------+
```
CloudWatch Logs Insightsでログを探す

コンテナベースの Web アプリケーションでは標準出力にログを吐かせることになる。例えば ECS + Fargate なら、標準出力が自動的に CloudWatch Logs へと送信されて蓄積されるので、ほぼリアルタイムに確認できるし、後でまとまったデータから統計を取ることもできる。

## リアルタイムなログ監視

じゃあどうやって `tail -f` してログ見るの？ってなったときは、CloudWatch Logs の場合、AWS Console からだと見にくいので、`cw` コマンドみたいな外部ツールで見ると便利。

* [awslogsはpython2系依存なのでgolang実装のcwをつかう](https://qiita.com/jnst/items/1e52e62102a4c4e32ad4)

```bash
$ cw tail -f /ecs/my-application
```

## ある期間から特定のログを探したい

一方で、「○月○日 XX時XX分頃にエラーでてアイテムもらえなかったらしいんだけど、調べてくれない？」 みたいな、障害調査だったりサポート対応するときに CloudWatch Logs Insights はすごく便利。

ECS + Fargate の場合、CloudWatch Logs には下記 3 カラムが出力される。

* `@message`
* `@timestamp`
* `@logStream`

### 正規表現でフィルタリング

アプリケーションで出力しているものは `@message` に含まれる。例えばエラーログを探したいなら filter コマンドと正規表現を使う。

```bash
fields @timestamp, @message
| filter @message like /(?i)error/
```

`@message` 内の文字列に対して、`like /文字列/` と記述することで正規表現が使用できる。`(?i)` の部分は「埋め込みフラグ表現」と呼ばれるもので、大文字小文字を区別しない指定。

### 特定のログレベルから探す

ログ出力時に `info:`, `debug:`, `warn:`, `error:`, `query:` みたいな、特定のワードで始まるなら、以下のような指定ができる。

```bash
fields @timestamp, @message
| filter @message like /debug:|query:/
```

これで debug ログと query ログのみが対象となる。
　

## 参考

* [CloudWatch Logs Insights クエリ構文
](https://docs.aws.amazon.com/ja_jp/AmazonCloudWatch/latest/logs/CWL_QuerySyntax.html)
オブジェクトの角度をCSVに出力

友達からいきなり、「角度をcsvに出力するプログラムってどうしたらいいの？」とラインが来たので、実装しました。
##環境
Unity 2017.3.0

## プログラム
```c#:I_am_hentai.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using System.Text;
using System.IO;

public class I_am_hentai : MonoBehaviour
{

    StreamWriter sw;
    private int count = 0;

    // Use this for initialization
    void Start()
    {
        //出力ファイル名、(true=追記 false=上書き)、エンコード
        sw = new StreamWriter(@"outPut.csv", false, Encoding.GetEncoding("Shift_JIS"));
        // CSVのヘッダー部分
        string[] s1 = { "x", "y", "z" };//x,y,z軸であることを示す
        string s2 = string.Join(",", s1);
        sw.WriteLine(s2);

	    StartCoroutine("WriteCSV");
    }

    IEnumerator WriteCSV(){
	var wait = new WaitForSeconds(1);
	while(true){
		if(count<10){
			Debug.Log("csv書き込み中");
	        yield return wait;

			float x = transform.rotation.x;
        	float y = transform.rotation.y;
        	float z = transform.rotation.z;

        	//データ出力
        	string[] str = { (x).ToString(), (y).ToString(), (z).ToString() };
        	string str2 = string.Join(",", str);
        	sw.WriteLine(str2);
			count++;
		}else if(count==10){
            sw.Close();//しっかりクローズしないとだめ

           // ファイル読み込み
           StreamReader sr = new StreamReader(@"outPut.csv", Encoding.GetEncoding("Shift_JIS"));
           string line;
            while ((line = sr.ReadLine()) != null)//次の行があるなら書き込む
            {
               //Debug.Log(line);
            }
            sr.Close();//しっかりクローズしないとだめ
            Debug.Log("書き込み完了");
	        break;
		}
	}
    }
}
```

## 結果
このように、10秒間のx,y,z軸の角度が出力できました。
<img width="188" alt="スクリーンショット (28).png" src="https://qiita-image-store.s3.amazonaws.com/0/179803/b382e4a7-1cef-f44d-7d07-8a92e2ebff7b.png">





## 感想
てか、友達は他の研究室なんですけど、回転値をcsvに書き出して、研究の中でどのように使うのか疑問です。。。笑
Wordpressのユーザー名(ログインID)を隠そう！

URL末尾に?author=1を入れると、ユーザー名がダダ漏れ。
そのための対策をまとめてみた。

#プラグイン「Edit Author Slug」で設定
管理画面の[ユーザー]>[各ユーザープロフィール]から、任意の文字列を設定できる。
<img width="637" alt="スクリーンショット 2019-01-25 18.07.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/287877/7ea1c549-dee5-2b50-2e85-1b1ddd224163.png">
「2」を選択、保存した場合、
`http://example.jp/?author=2`
で検索すると、URLが
`http://example.jp/author/2`
と書き換えられる。
その際のページの表示は、投稿者アーカイブ。あくまで、URLのみの変更。

仮に
`http://example.jp/author/ユーザー名`
で検索されてしまっても、
`http://example.jp/author/2`
に書き換えられる。
セキュリティとして高く、かつ自然な動き。

#プラグイン「All In One WP Security」で設定
管理画面の[WP Security]>[Miscellaneous]>[Users Enumeration]から、
Disable Users Enumerationにチェック。
<img width="1094" alt="スクリーンショット 2019-01-25 18.11.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/287877/bbf579f1-81fb-1b59-4f90-db53871c5cca.png">
?author=1で外部から管理者情報にアクセスしようとすると、
「Accessing author info via link is forbidden」というエラーページが表示される。
<img width="810" alt="スクリーンショット 2019-01-25 18.06.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/287877/e9c31089-458d-fbf5-6a4b-dc615c0a6943.png">

直打ちで、`http://example.jp/author/ユーザー名`で検索されてしまっても、
URLは書き変わらない。（つまり、ユーザーIDがバレてしまう可能性あり）

# functions.phpで、投稿者アーカイブ非表示リダイレクト
?author=1でアクセスしようとすると、フロントページにリダイレクトされる。
管理画面やURLの直打ちで投稿者アーカイブを見ようとしても、同じようにリダイレクトされてしまう。

```php:functions.php
function author_archive_redirect() {
  if( is_author() ) {
    wp_redirect( home_url());
    exit;
  }
}
add_action( 'template_redirect', 'author_archive_redirect' );
```



#参考URL
https://pc-pier.com/blog/2018/10/16/all-in-one-wp-security/
Vue.js勉強メモ

主に[基礎から学ぶ Vue.js](https://cr-vue.mio3io.com/)のなぞり

## テンプレート
https://codepen.io/mo4_9/pen/PXemXb

## 画像ロード完了まで表示しない
https://codepen.io/mo4_9/pen/GPXMaa

## submitで画面をリロードさせない
https://codepen.io/mo4_9/pen/VqGyja

## inputの文字を確定前に反映する
https://codepen.io/mo4_9/pen/roqYrd

## スムーススクロール
https://codepen.io/mo4_9/pen/JwmZey
>
https://github.com/cferdinandi/smooth-scroll

## 実行頻度を制御しながら監視する
https://codepen.io/mo4_9/pen/wRNYzd
watch, debounce

## プルダウンの変更を認知したらaxiosを叩く
https://codepen.io/mo4_9/pen/ebXXLm

## 更新後のDOMにアクセスする
https://codepen.io/mo4_9/pen/MZdWeP
nextTick

## レンダリングされなくなったコンポーネントの状態維持
https://codepen.io/mo4_9/pen/KJPqWN
>
https://vuejs.org/v2/guide/components-dynamic-async.html

## 単一要素トランジション
https://codepen.io/mo4_9/pen/QZVJXJ
transitionタグの中にある一つの要素に使用される

## リストトランジション
https://codepen.io/mo4_9/pen/XxxExQ
transition-group

## ページネーション
https://codepen.io/mo4_9/pen/gQgPRo
Vue.js〜導入、基本の言葉の定義、考え方〜

# Vue.jsの基本  

※この内容はVue.js入門の〜基礎から実践アプリケーション開発までP33〜P35を勉強したときの自己流理解メモです。

こちらの記事のひとつ前の記事はこちら
<a href="https://qiita.com/sakiyama0101/items/dfc2a20e2dac2fee2850">Vue.js入門〜Vue.jsのはじめの一歩〜を5分で飛ばし読みする</a>

さて、Vue.jsの勉強始めるぞー！と本をペラペラめくると、繰り返し出てくる言葉があるので、その言葉の解説を交えながらゆっくり進んで行く。

まずはVue.jsの導入から。
## 導入の基本
Vue.jsの導入のために、`script`タグを使って、Vue.jsを読み込む。

```html
<!DOCTYPE html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
```

これを読み込むと、グローバル変数Vueが定義される。
>グローバル変数とは、オブジェクトつまり、様々な`何か`を持ち合わせているもの。

### 様々な何か とは??
グローバル変数の役割は、コンストラクタである。  
>コンストラクタ
オブジェクトを生成するための関数（JSにおいては）。Vueインスタンスをコンストラクタとして使う場合は、new演算子を使う。


new〜〜Vue（省略） と書くことで、新しくオブジェクトを作成できる。そして生成されたオブジェクトをVueインスタンスという。このインスタンスをDOM要素にマウント（適用）すると、Vue.jsの機能がそのDOM要素内で使えるようになる。



## インスタンスとコンストラクタとクラス
### Vueインスタンス  
インスタンス : 具体的な一つのもの（オブジェクト）。振る舞い・属性が定義されているもの。

```
var インスタンス　= class(データ);

(例)
class Button {
    属性、関数。定義。
}

```

let Vueインスタンス　= Buttonクラス（ 属性を代入 ）;


### コンストラクタ
`Vueクラス（）` 関数のことをコンストラクタという  
コンストラクタの役割は、インスタンスを作る関数
コンストラクタの中身は、引数で受け取ったデータとクラスの定義からクラスのインスタンスを作る



### インスタンス
コンストラクタにデータを渡して生成される値
コンストラクタの引数には、オプションオブジェクトを渡す（?）


## ここからVue.js

Vue.jsはオブジェクト指向でできている。
→ Vueクラスはすでに作られている。つまり定義されてる。
→ インスタンスを作って、そのインスタンスを操作する プログラミングのやり方（ここでのインスタンスとオブジェクトは同義）
→ つまりインスタンスをつくらなければいけない

## Vueクラスのインスタンスを作れるようになる  
Vueクラスのインスタンスを`Vueインスタンス`という。
インスタンスを作るにはコンストラクタが必要なので、コンストラクタの書き方を知らなければならない。

今後は1つづつ、コンストラクタを見ていきながらインスタンスの作り方を勉強していく。


Vueクラスのインスタンスを作れるようになる〜コンストラクタの書き方習得編 Part1〜 へ続く...
Processingで動画のアニメ顔検出ツールを作ったので晒してみる

実用性があるかわかりませんが、過去に書いたプログラムを気まぐれで晒してみます。

# AnimeFaceDetector
Processing 3で動作する、OpenCVを用いて動画からアニメ顔検出を行うプログラムです。
検出した顔画像はPNG形式で保存されます。

アニメ顔検出を行うにあたって、nagadomi氏が公開しているアニメ顔向けの物体検出器(lbpcascade_animeface)を使用しています。
[OpenCVによるアニメ顔検出ならlbpcascade_animeface.xml - デー](http://ultraist.hatenablog.com/entry/20110718/1310965532)

一応アニメ顔用に作りましたが、カスケードファイルを差し替えたら他の物体でも検出できるかも。

# 動作環境
Windows 8.1で動作確認しました。
Debianでも試してみたのですが、libgstreamer関係で問題が起きるようで動作しませんでした。

## 必要ライブラリ
動作には以下のライブラリが必要です。
入っていない場合はProcessingを起動し、メニューの「スケッチ」→「ライブラリをインポート...」→「ライブラリを追加...」から追加してください。

- OpenCV for Processing(Greg Borenstein)
- Video(The Processing Foundation)
- ControlP5(Andreas Schlegel)

## 使い方
実行前に、動画の解像度に合わせて下記の変数を書き換えてください。
(面倒ですが、ProcessingのMovieクラスに解像度を取得する手段が用意されていないみたいなので…)

```java:AnimeFaceDetector.pde
int movWidth = 640;
int movHeight = 360;
```

実行すると以下のようなウィンドウが出てきます。

![Screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/349133/0ac6cc14-c950-5bd2-bd46-06bdb648f1a9.png)

1. 「OPEN」ボタンを押して動画を選択。
1. 「ANALYZE」ボタンを押すと動画からの顔検出及び検出顔画像の保存が行われます。  
AnimeFaceDetector.pdeと同じ階層にあるdataディレクトリ内に動画から拡張子を除いた名前のディレクトリが作成され、そこに保存されます。

### オプション
#### COLOR DETECTION
顔以外の誤検出を低減するため、検出された領域内に「輪郭」や「肌」に近い色が存在するかチェックを行います。
基準とする色は適当に選びました。

- SKIN THRESHOLD
検出された領域内に「肌」に近い色が指定された割合以上存在する場合に顔と判断します。
デフォルトは0.5です。

- EDGE THRESHOLD
検出された領域内に「輪郭」に近い色が指定された割合以上存在する場合に顔と判断します。
デフォルトは0.018です。

#### RESIZE SAVE IMAGE
検出された顔領域を画像に保存する際に、240x240にリサイズを行います。

#### SAVE FRAME INTERVAL
検出された顔領域を画像に保存する際のフレーム間隔を指定します。
デフォルトは3です。

#### MINIMUM FACE SIZE(PIXEL)
顔検出時の最低サイズを指定します。
指定されたサイズよりも検出領域が小さい場合は無視します。
デフォルトは48x48です。

## ソースコード
[ちゃば / AnimeFaceDetector · GitLab](https://gitlab.com/ChabaScript/AnimeFaceDetector)

## その他
詳細はGitLabリポジトリに同梱しているREADME.mdを参照してください。
LPWAネットワークを活用したIoTビジネス講座＋Sigfoxハンズオンを開催しました

![c93cf951cfe4410baf4396e3097664d8.png](https://qiita-image-store.s3.amazonaws.com/0/331502/9176a460-fe01-b149-aeb7-42db0f292a22.png)


2019年1月18日にあおもりIoT研究会・青森県主催で、
「LPWAネットワークを活用したIoTビジネス講座＋Sigfoxハンズオン」を開催しました。

IoT、LPWA（Sigfox）の概要及び事例の紹介やSigfoxの今後の展開などの説明と、
ハンズオンでは、Arduino用Sigfoxシールド内蔵センサのデータをSigfoxネットワークで収集し、
IoTプラットフォーム（AT&T M2X）で可視化するまでをお試しいただきました。


#講師
京セラコミュニケーションシステム株式会社
日比 学 様(@ghibi )

#場所
青森県産業技術センター 工業総合研究所IoT開発支援棟 ２階研修室

#プログラム
|時間|内容|
|----|----|
|13:00-|開場・受付|
|13:30-|あおもりIoT研究会、青森県IoT推進ラボについて【工業総合研究所、青森県】|
|13:40-|Sigfoxネットワークの概要【KCCS日比】|
|14:20-|「AT&T M2Xの紹介、事例など」【ジョイ・ワールド・パシフィック佐藤】|
|14:50-|休憩|
|15:00-|ハンズオン|
|17:00|終了|

#あおもりIoT研究会、青森県IoT推進ラボについて
最初に工業総合研究所　所長 櫛引様と青森県 関様から、あおもりIoT研究会、青森県IoT推進ラボについてご説明をいただきました。

<img src="https://qiita-image-store.s3.amazonaws.com/0/331502/57b2ac6e-f3b8-360f-cc46-b1e852a8a8f4.jpeg" width="480">

<img src="https://qiita-image-store.s3.amazonaws.com/0/331502/863ec471-8ed9-6051-5859-6301c63137eb.jpeg" width="240">

#Sigfoxネットワークの概要
Sigfoxの概要から、最新情報、事例、さらには具体的にどのような手順で通信を行うのかなど、技術的な部分までたっぷりご説明いただきました。
<img src="https://qiita-image-store.s3.amazonaws.com/0/331502/0ed3e8f2-ddc9-9562-a4e6-4243e2d11ecd.jpeg" width="480">

#AT&T M2Xの紹介、事例など
<img src="https://qiita-image-store.s3.amazonaws.com/0/331502/e1742359-d28d-4095-ded4-ff605526f39a.jpeg" width="480">

(株)ジョイ・ワールド・パシフィックで昨年度実施した、Sigfox温湿度センサを利用したハウス環境計測の実証実験事例や、その他試作中のデバイス、今後の予定などをご紹介させていただきました。また、ハンズオンで使用するIoTダッシュボード「AT&T M2X」のご紹介と、弊社での活用事例、Sigfoxとどのように連携できるのかを簡単にご説明させていただきました。

#ハンズオン
ハンズオンでは、実際にSigfoxモジュールのアクティベーションから、Sigfoxシールドで計測した温度などのデータを送信し、メール通知したり、M2Xで可視化まで体験していただきました。

<img src="https://qiita-image-store.s3.amazonaws.com/0/331502/ebe17dff-8edf-135d-f254-2af73d2d569d.jpeg" width="480">

今回は技術に詳しくない方にもご参加いただきましたが、終了後にはよく理解できたとの声もいただきました！

<img src="https://qiita-image-store.s3.amazonaws.com/0/331502/7555e32c-296c-7d61-6fd2-cf08d3645daa.jpeg" width="480">

最後は青森県らしく青森ポーズで締めくくりました笑
（上げた腕が下北半島のイメージ）」

当日の青森は大雪でみなさま大変でしたが、この後の交流会も大いに話が盛り上がりました。

青森県でもIoTをもっと盛り上げていけるよう、またイベントを企画していきたいと思いますので、ご興味のある方はぜひご参加ください！
CSS animation で遊び倒す　- rain -

CSS animation day5 となりました。
1日1 qiita はなかなか大変です。

本日は、雨を表現したいと思います。

#1. 完成版

![ezgif.com-optimize (3).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/494eb3a2-ec19-2149-bbce-cda93c83e1aa.gif)


#2. なぜ rain か？　

流体デザインが流行ると思っており、そのデザインがなぜ素敵かを考えたき、流体の動きが、自然界の動きと似ているからだと考えました。

つまり、自然を感じるものとデザインとの相性は良いわけと思いました。
今後病院の中に、アートや animation を取り入れる際に、雨とか雲とか、木々の葉っぱが風で揺れる感じなどを表現できれば、患者さんや職員が癒されると考えました。　

そういうえば、先日、テレビに出ました。　
[あいつ今何してる？](https://note.mu/junky/n/n4be830e6a205)という番組です。

看護師でvvvvを駆使している、メディカルデザインエンジニアの吉岡さんにご協力いただき、病院にデジタルアートを取り入れたことが取材されました。これからも、今後の医療界のために、お互い切磋琢磨して、励んでいきます。


![ezgif.com-optimize (2).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/d59736d0-58d3-2683-05e3-74f487181b21.gif)
病院の外来診察室にて

#3. 参考文献　
https://www.youtube.com/watch?v=QtL_w61ovCc　

#4. 分解してみる
❶. 
まずは、雨の画像を入手します。
[こちら](https://designbundles.net/free-design-resources/rain-overlays/rel=ZTtRAk)  が良さそうです。

会員登録して、雨の素材を入手します。

<img width="770" alt="スクリーンショット 2019-01-25 17.55.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/e273a1b2-3a5a-5f07-cb3f-69d8ef7216ec.png">

<br/>
❷. 
では、コードを書いていきます。

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="rain">
    </div>
</body>
</html>
```

```styles.css
body {
    margin: 0;
    padding: 0;
    background-color: black;
}

.rain {
    height: 100vh;
    background: url('../img/rain.png');
}
```

夜の景色に雨が振りました。
<img width="1268" alt="スクリーンショット 2019-01-25 18.02.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/232715/7fd50f72-63f2-8fb9-8ff2-3c77f0dafab3.png">

<br/>

❸.
アニメーションを設定します。


```styles.css
.rain {
    height: 100vh;
    background: url('../img/rain.png');
    animation: rain 0.3s linear infinite;
}


@keyframes rain {
    0%{
        background-position: 20% 100%;
    }
    100%{
        background-position: 0% 0%;
    }
}
```

![ダウンロード (16).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/9845c247-e51d-a872-c65c-18547f1c0f03.gif)


ポイントは
[background-position](https://developer.mozilla.org/ja/docs/Web/CSS/background-position)
`背景画像の初期位置を、background-positionで設定することで、雨が動きます`
値が2つの構文を使って、X, Yの位置をずらすことができます。
　
<br/>
❹.
最後に、雷を設定しましょう。

```styles.css
.rain:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    animation: lightening 4s linear infinite;
    opacity: 0;
}

@keyframes lightening {
    0%{
        opacity: 0;
    }
    10%{
        opacity:0;
    }
    11%{
        opacity: 1;
    }
    14%{
        opacity:0;
    }
    20%{
        opacity:0;
    }
    21%{
        opacity:1;
    }
    26%{
        opacity:0;
    }
    100%{
        opacity:0;
    }
}
```

![ezgif.com-optimize (3).gif](https://qiita-image-store.s3.amazonaws.com/0/232715/494eb3a2-ec19-2149-bbce-cda93c83e1aa.gif)


完成しました。
こういう一見すごそうな動画も、分解してみるとなんてことはない技術の、重ね合わせでできるんですね。

ではまた〜
Googleスプレッドシートで一括変更した際にポップアップでお知らせする

![image.png](https://qiita-image-store.s3.amazonaws.com/0/611/3b20a355-c75f-4103-dcdb-295990011f51.png)
バックオフィスの人から「スプレッドシートの一括変更に気づけるようにしたい！」という要望があったのでつくりました。
一括で変更処理をしたときに、こんなかんじでポップアップでお知らせします :hugging: 

コード
---
```js
function showPopup(){ 
  var mySheet = SpreadsheetApp.getActiveSheet(); //シートの取得

  var range = mySheet.getActiveRange();
  // 一括更新以外は無視する
  if (range.getNumColumns() == 1 && range.getNumRows() == 1) {
    return;
  }

  SpreadsheetApp.getUi().alert(rangeStr(range) + "が変更されました");
}

function columnToLetter(column) {
  var temp, letter = '';
  while (column > 0)
  {
    temp = (column - 1) % 26;
    letter = String.fromCharCode(temp + 65) + letter;
    column = (column - temp - 1) / 26;
  }
  return letter;
}

// A:1〜B:3みたいな文字を返却する
function rangeStr(range) {
  var firstCell = columnToLetter(range.getColumn()) + ":" + range.getRow();
  var lastCell = columnToLetter(range.getLastColumn()) + ":" + range.getLastRow();
  return firstCell + "〜" + lastCell;
}
```

トリガー
---
「スプレッドシートから」「編集時」に設定します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/611/b3f4e959-0ae2-4957-419f-4ea1b487d70a.png)


以上です :wave: 

参考
---
- [google apps script - Convert column index into corresponding column letter - Stack Overflow](https://stackoverflow.com/questions/21229180/convert-column-index-into-corresponding-column-letter)
- [Class SpreadsheetApp  |  Apps Script  |  Google Developers](https://developers.google.com/apps-script/reference/spreadsheet/spreadsheet-app)
paizaでsympy その4

#概要

sympyが、魔法なので、paizaで、やってみた。
練習問題、やってみた。

#問題

XとYの否定論理積 X NAND Y は，NOT(X AND Y)として定義される。X OR Y をNANDだけを使って表した論理式はどれか。
((X NAND Y) NAND X) NAND Y
(X NAND X) NAND (Y NAND Y)
(X NAND Y) NAND (X NAND Y)
X NAND (Y NAND (X NAND Y))

```
from sympy.abc import X, Y
from sympy.logic.boolalg import *
import sympy

print (sympy.simplify_logic(~(Y & ~(X & ~(X & Y)))))
print (sympy.simplify_logic(~(~(X & X) & ~(Y & Y))))
print (sympy.simplify_logic(~(~(X & Y) & ~(X & Y))))
print (sympy.simplify_logic(~(X & ~(Y & ~(X & Y)))))

```

#結果


```
~Y
X | Y
X & Y
~X
```

以上。
ARMテンプレートによる構築


基本的なところな部分から実際に使ってみての思ったことや苦労したことを書いていこうと思います。
個人的な解釈が入っているところもありますのでご了承ください。

いくつか省略しているところは後に使っていく中で気づきがあればアップデートします


# ARMテンプレートとは

https://docs.microsoft.com/ja-jp/azure/azure-resource-manager/resource-group-overview

メリットとしてはリソースグループ内のリソースを定義できることの他に検証環境など**同じ**リソース構成を複製するときに便利。もしくは普段は消しておいて必要な時にすぐ作れるなどコスト面でもメリットが出てきます

# 使用するもの

すでにAzureをPortalやCLIで作成している人向けに書きます。

* Visual Studio code
* Azure DevOps

その他にあると便利なもの
* KeyVault

#　テンプレート構成
## parameters
環境別やリージョン別など各種設定で変えたい部分を変数として定義しておく場所。
あまり多く作るとコードが見づらくなるので極力減らすこと
外部のファイルにパラメータを記載することで使い分けることができる。

template本体

必須：parameter-name,type

```
    "<parameter-name>" : {
        "type" : "パラメーター値の型[string|securestring|int|bool|object|secureObject|array]",
        "defaultValue": "指定がないときのデフォルト値",
        "allowedValues": [ "指定できる値を明記できる" ],
        "minValue": int型の最小値,
        "maxValue": int型の最大値,
        "minLength": string,securestring,array 型パラメーターの長さの最小値 (この値を含む),
        "maxLength": string,securestring ,arrayパラメーターの長さの最大値 (この値を含む),
        "metadata": {
            "description": "ポータルを通じてユーザーに表示されるパラメーターの説明" 
        }
    }

```

palameter ファイル

```
  "parameters": {
    "<parameter-name>": {
      "value": ""
    }
```
「[KeyVaultを使ったARMテンプレートへの機密情報の記載方法](https://qiita.com/satoyas/items/96d94ce34fd43453abe9)」の方法を使えば機密情報も扱いやすいです。


## variables
コード内で使用する変数。他の言語のように繰り返し使う場合に便利。
上記のparametersとの違いは違うリソースグループで使う場合でも変わらない箇所に使うこと

```
"variables": {
  "<variable-name>": "<variable-value>"
}
```

## resources
作成したいリソースを定義する場所。
上記のparametersやvariablesを埋め込んで使用する

要素が多いので下記URLを参考にしてください。ここでは省略します

https://docs.microsoft.com/ja-jp/azure/azure-resource-manager/resource-manager-templates-resources

## outputs
あまり利用したことはありませんがデプロイから返される値を指定することでリソースIDなどを知ることができます

なのでこれも省略

https://docs.microsoft.com/ja-jp/azure/azure-resource-manager/resource-manager-templates-outputs

# 構築モード
## complete mode (完全モード)
リソースグループに存在するがテンプレートに指定されていないリソースを削除します。
ただし、設定やDBのデータ、Keyvaultのkeyやsecretなど定義されていないパラメータなどは残ります

## incremental mode (増分モード)
リソース グループに存在するが、テンプレートに指定されていないリソースを変更せず、そのまま残します。

# まとめ

できるところはテンプレートにして細かい部分はPortalやCLIで作るなど無理せず作ることがよいと思います。
一から作らずportal等で作ってしまいPortal画面にあるAutomation スクリプトを利用するのがよいです。
全て自動化したところで変に制御が入ってしまい２度目には動かないなどが起こりかねないのでおすすめしません。

構築のモードに関しては流派が分かれると思いますが個人的には増分モードを推します。
消えてほしくないリソースが消える事故が防げるのとテンプレートを複数組み合わせやすいのでよく使います。
[TestCafe][JavaScript]動的に要素を取得する

E2Eツールを使用したテストで大変なのは、画面を更新するとIDが変わったりする
ユニークなオブジェクトを取得しなきゃいけない時。
これは本当に大変です。

一部、自分なりに試行錯誤して、ある程度動的に要素を取得するものを作ってみたので、ここに残します。


試してみたのは相変わらず、動作の確認はTestCafeの練習ページになります。
https://devexpress.github.io/testcafe/example/
の、この部分です。

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/277582/d065c349-1211-e0dc-5c29-9fe670a6faf5.png)


動的に要素を取得しなくてもいいところで参考程度に無理矢理やってるので、
実際には動作確認してません。
あくまで、こんなふぅに。ですすみません。

``` デバッグツール(F12キー)consoleタブ.
>  document.getElementsByClassName('slider-value').length
<- "10"
```
ちなみに内訳を確認するには.lengthを外せば確認できます。

``` デバッグツール(F12キー)consoleタブ.
>  document.getElementsByClassName('slider-value')
<- HTMLCollection(10)[なんかゴニョゴニョ]
0: div.slider-value
1: div.slider-value
2: div.slider-value
3: div.slider-value
4: div.slider-value
5: div.slider-value
6: div.slider-value
7: div.slider-value
8: div.slider-value
9: div.slider-value
length: 10
```

これで対象の要素数が「10」であることが導きだされました。
この要素群の中で常に1番最後の要素を確認する処理を作ろうとする。

``` operation.js
// 要素数を格納->lastItem には 10 が格納される
const allItem = ClientFunction(() => document.getElementsByClassName('slider-value').length);

// lengthは0スタートなので、実際には-1する必要がある
const lastItem = await allItem() - persaInt(-1);

// 最後の要素の文字列を取得する
const ItemElement = ClientFunction(() => document.getElementsByClassName('slider-value')[pos]);

// 最後の要素の指定する
const lastItemString = Selector('.slider-value').nth(' + await ItemElement(lastItem) + ');

await t.expect(lastItemString.textContent).eql('10');
```
とすると、クラスに変更さえなければ、1～10の間に1.5や2.5などが入ってlengthが増えようが、
IDがユニークで表示する度にコロコロ変わろうが、常に最後の要素を取得できるかなと思います。

カレンダー的な画面で多用するようになりました。
操作した日付と、画面の日付が連動するような。
確認したい要素が1つのテーブルに纏まっていると、応用しやすいと思います。
javascript コンソール画面でXMLHttpRequest(XHR)通信してみた

- javascriptのコンソール画面でxhr通信をしたかったので、やったついでにメモしておく
- console.logで出力できるやり方は結構載ってたが、変数に入れるやり方があまり見つからなかった
- 今回はgoogle books apiを叩いてみた。任意のisbnを入れればjsonがhogeに返ってくる

```main.js
function getHttpRequest(url, c){
    // インスタンス作成
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = () => {
        // 処理が成功したらresponseTextをコールバック
        if(xhr.readyState === 4 && xhr.status >= 200 && xhr.status < 300){
            c(JSON.parse(xhr.responseText));
        }
    }
    var method = "GET";
    xhr.open(method, url);
    xhr.send();
}
// 任意のisbn
var isbn = *******;
// google booksのgetエンドポイント
var url = "https://www.googleapis.com/books/v1/volumes?q=isbn:"+isbn;
// 変数にjsonを入れたい時. console.log(res)で出力してもよし
var hoge;
getHttpRequest(url, function(res){
    hoge = res['items'][0];
})
```
`hoge.volumeInfo.title`とかすると書籍名が取れたりする

- 実はfetchの方が良かったかもっていう。。。
今日の記録2 vim

#vim

##ドットインストールの学習続き
###ウィンドウの分割
- :sp   横分割
- :vs   縦分割
- :close 分割したウィンドウを閉じる
###タブを使ってみよう
- :tabnew  タブを開く
- :tabe finename  タブを開くと同時にファイルを展開
- gt        タブの移動
- tabclose  タブを閉じる
###最後の操作を繰り返す
- .  ピリオド
    - ノーマルモードの場合テキストに変更を及ぼすコマンドしか反映されない
    - 挿入モードを挟む場合（インサートを抜けてから直後にピリオドを打つ)、
    挿入モードに入った瞬間からノーマルモードに戻るまでの間の操作が反映される
htmlと入力したら、htmlがペーストされる。
###インデントを揃える
- = インデントを揃える
    - ファイル全体のインデントを揃えたい場合は、全選択してから＝を打ち込む
###補完機能を使う
- CTRL+n
###矩形選択後に編集
CTRL+vで選択後大文字Iでインサートモードに入り、編集後escを押す
###テキストオブジェクト
`<head>hoge</head>`  
hogeを消してインサートモードに入りたい場合cit
`<meta="utf-8"></meta>`  
utf-8を消してインサートモードに入りたい場合ci"
Visual Studio Community 2017の開発環境をWindows10に構築する

# Windows10環境にVisual Studio Community 2017の開発環境を構築する（インストール編）

【目的】
 MVC5を使ったWEBシステム開発を行うにあたり、まずはVS2017をインストールして開発環境の
構築を行う。今回は『.net4.7.2』という指定がありますので、そのつもりで進めます。

 MSの説明サイトも一読するのがよろしいかと思います。
 https://docs.microsoft.com/ja-jp/visualstudio/install/install-visual-studio?view=vs-2017

 ダウンロードは下記から。
 https://visualstudio.microsoft.com/ja/vs/community/


## ダウンロードしたEXEを実行してインストールを開始する。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/303278/8aee9869-68dd-d517-a187-ac9f5ff0e58d.png)

ダウンロードしたインストーラーを起動します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/303278/288ea4bc-f87f-aad9-eb31-a51799f7c42e.png)

インストールの場所はデフォルトでよろしいかと思います
![image.png](https://qiita-image-store.s3.amazonaws.com/0/303278/7c056de5-49de-d1cb-a7e3-ec81e014e769.png)

言語は日本語でよろしいかと思います。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/303278/04274c9f-f8e4-e207-71eb-b60ddd01c931.png)

個別コンポーネントは指定のバージョンを。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/303278/3e6f61d2-ce79-d313-cf6a-85df32c4a71c.png)

追加してほしいからでるんでしょうね。ということでワークロードの追加をします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/303278/85d57eff-a382-9e10-d531-29e118b91f4e.png)

インストールが始まります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/303278/7fe9ca73-ebd5-b326-9d44-07f308f0735f.png)

300MB程度のダウンロードが走ります。インストール完了まで30分くらいかな。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/303278/395f33ef-e63e-672f-db5c-cda3c0ddef30.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/303278/1f9921f9-ee50-4bae-c1b7-48263484f8a2.png)

「後で行う」で問題ありません。

環境を設定します。デフォルトで問題ありません。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/303278/60588151-bb21-1e1e-cf08-fc797969ae4f.png)

起動しました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/303278/98d6bde5-9298-22bd-9194-ee30bed8f872.png)

今回はここまで。次回はMVCで開発する準備を進めます。
Gitで日本語が文字化けする

# 概要
Git で日本語が文字化けする際の対処法をメモ。

# ディレクトリ
```bash
C:\work\playground\mojibake>dir
2019/01/25  16:55                 6 日本語.txt
               1 個のファイル                   6 バイト
```

# git status 

```bash
C:\work\playground\mojibake>git status
On branch master

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        "\346\227\245\346\234\254\350\252\236.txt"

nothing added to commit but untracked files present (use "git add" to track)
```

# 文字化けを解消する

## ローカルリポジトリのみ解消する場合

```bash
git config --local core.quotepath false
```

## すべてのリポジトリで解消する場合
```bash
git config --global core.quotepath false
```
CueというWeb開発をよしなにするオレオレフレームワークを作った話

#はじめに

「C++/Vue.jsでWeb開発とかできるようになってきたけど、もうちょい楽になりたいなぁ」と思い、オレオレフレームワークなものを作ってみました

#作ったもの

[Cue](https://github.com/S-H-GAMELINKS/Cue)というものを作りました

実装にあたっては`C++17`から導入された`filesystem`と[cpp-httplib](https://github.com/yhirose/cpp-httplib)を使用しています

#使い方

`Rails`などのようにコマンドライン上で`cue`コマンドを実行することで動作します

たとえば、新しいプロジェクトを作成する場合は、

```shell
cue new hogehoge
```

と実行することで`hogehoge`というプロジェクトが作成されます


`CRUD`のテンプレートを作成したい場合は、

```shell
cue scaffold fugafuga
```

と実行することで`fugafuga`という名前のディレクトリが作成され、`fugafuga`以下に`CRUD`のテンプレートが生成されます

Vueコンポーネントを複数作成する場合には、

```shell
cue foo bar bazz 
```

とすることで `foo`ディレクトリ以下に `bar`と`bazz`が作成されます

ヘルプなどは `cue help`で表示されます

#やったこと
## cpp-httplibとVue.jsのひな型を作成

まず、`cpp-httplib`と`Vue.js`でのひな型を作成しました

作成に関しては別件で書いていたこの以下の記事たちを参考にしました

[IronでのSPAチュートリアル](https://qiita.com/S_H_/items/78e27cb7c6da15916bd0)

[C++/Vue.js/WebpackでSPAサンプルを作った話](https://qiita.com/S_H_/items/620ee3f2765e1446a851)

## filesystemでのテンプレートコピー

[cppreference.com](https://ja.cppreference.com/w/cpp/filesystem)を参考に以下のように実装

```c++:main.cpp
#include <filesystem>
#include <string>

namespace fs = std::filesystem;

int main(int argc, char* argv[]) {

    std::string argv = argv[1];

    fs::path path = argv;

    fs::copy("cue", path);

    return 0;
}
```

で、以下のように実行するとコマンドライン引数に渡された名前のディレクトリへと作成されたテンプレートをコピーする

```shell
cue hogehoge
```

ちなみに、`cue`ディレクトリ内にはC++/Vue.jsで作成したテンプレートが詰まっています

#作ってみて

今のところは以前より楽ができているのでつくってよかったなと思う


#参考

[cppreference.com](https://ja.cppreference.com/w/cpp/filesystem)

[IronでのSPAチュートリアル](https://qiita.com/S_H_/items/78e27cb7c6da15916bd0)

[C++/Vue.js/WebpackでSPAサンプルを作った話](https://qiita.com/S_H_/items/620ee3f2765e1446a851)
【資格】AWS 認定ソリューションアーキテクト -アソシエイト

## はじめに

去年の暮れにSAAを取得したので、アウトプットとしてやったことなどを書いていきます。

## 概要

はい。言わずと知れたAWS SAAおさらいしておきましょう。

> AWS 認定ソリューションアーキテクト – アソシエイトの試験はソリューションアーキテクト担当者向けです。この試験に合格すると、AWS のテクノロジーを使用して安全で堅牢なアプリケーションを構築およびデプロイするための知識を効果的に証明できます。
>
> 受験者の次の能力を検証します:
>
> - 顧客の要件に基づき、アーキテクチャ設計原則に沿ってソリューションを定義できること
> - プロジェクトのライフサイクルを通して、ベストプラクティスに基づく実装ガイダンスを組織に提供できること
>
> ### 受験者の概要
>
> この試験の受験対象者には以下が求められます:
>
> - AWS 上で可用性、優れたコスト効率、耐障害性を備え、スケーラブルな分散システムを設計した 1 年間の実務経験
>
> - AWS のコンピューティング、ネットワーキング、ストレージ、データベースサービスの実践的な使用経験
>
> - AWS のデプロイおよび管理サービスに関する実践経験
>
> - AWS ベースのアプリケーションに関する技術的要件を特定、定義する能力
>
> - 提示された技術的要件を満たす AWS のサービスを特定する能力
>
> - AWS プラットフォームで安全性と信頼性の高いアプリケーションを構築するために推奨されるベストプラクティスに関する知識
>
> - AWS クラウドでのソリューション構築における基本的なアーキテクチャの原則に関する理解
>
> - AWS のグローバルインフラストラクチャに関する理解
>
> - AWS に関連するネットワーク技術の理解
>
> - AWS で利用できるセキュリティ関連の機能およびツールと従来型サービスとの連携に関する理解

と書いてあります。

## 前提

試験を受けると決めた時点の自分のAWSに対する知識としては以下の用語は知っていた程度でした。

- EC2
- RDS
- Lambda
- S3
- CloudFormation

## 学習期間

試験申し込んでから試験当日までの丸1ヶ月でした。

## やったこと

- 合格対策 AWS 認定ソリューションアーキテクト アソシエイト を3回くらい繰り返し読み、各サービスの特徴やどんなときに使ったら良いかのユースケースを理解した。
- サンプル問題をダウンロードし、2回くらい繰り返し問題を解いた。
- 模擬試験も同じ問題を2回くらい繰り返し解いた。

やったことは本当にこれだけ。。

## 試験をやってみて

合格対策 AWS 認定ソリューションアーキテクト アソシエイトは2016/8/26に出版されたものなので情報が古いので4割くらいしかカバーしてないように思います。

勉強法としてはとにかく問題集をやり込むことだと思います。問題集にでてくるわからないことをBlackBeltを見て理解するほうがいいのかなと思います。それも結構な時間はかかると思うので1ヶ月は必要だと感じました。

次はプロフェッショナル！！頑張ります！！どうやって勉強しようかな...
rails console で readline がないよって怒られたときの対処例

こんにちは。Rails勉強中の [@koshi_life](https://twitter.com/koshi_life) です。

`rails console` でコードの確認がインタラクティブに確認できて便利だと聞いて、Rails consoleしたら readline ってライブラリがないぜってコケたので、ライブラリの設定メモ

- 環境
  - Mac　OS High Sierra
  - homebrew インストール済み


### エラー内容

```
$ rails c
Traceback (most recent call last):
	14: from bin/rails:4:in `<main>'
	13: from bin/rails:4:in `require'

	..略..

	 1: from /Users/kenjikoshikawa/.rbenv/versions/2.6.0/lib/ruby/2.6.0/irb/completion.rb:10:in `<top (required)>'
/Users/kenjikoshikawa/.rbenv/versions/2.6.0/lib/ruby/2.6.0/irb/completion.rb:10:in `require': dlopen(/Users/kenjikoshikawa/.rbenv/versions/2.6.0/lib/ruby/2.6.0/x86_64-darwin17/readline.bundle, 9): Library not loaded: /usr/local/opt/readline/lib/libreadline.7.dylib (LoadError)
  Referenced from: /Users/kenjikoshikawa/.rbenv/versions/2.6.0/lib/ruby/2.6.0/x86_64-darwin17/readline.bundle
  Reason: image not found - /Users/kenjikoshikawa/.rbenv/versions/2.6.0/lib/ruby/2.6.0/x86_64-darwin17/readline.bundle
```

readline入ってないと思い、 brew install してみる。

```
$ brew install readline
Updating Homebrew...
==> Auto-updated Homebrew!
Updated 2 taps (homebrew/core and homebrew/cask).

..略..

Warning: readline 8.0.0 is already installed and up-to-date
```

既に8.0.0のreadlineはインストール済みとのことだったが、 `/usr/local/opt/readline/lib/libreadline.7.dylib` には存在しないとのことなので、参考リンクを参考にシンボリックリンクを張る。

```
$ ln -s /usr/local/opt/readline/lib/libreadline.dylib /usr/local/opt/readline/lib/libreadline.7.dylib
$ bundle install --path vendor/bundle
$ rails c
irb(main):001:0> 
```

できた。
rails console とても便利ですね。

参考： https://qiita.com/kanpou0108/items/0fe67e313c03e87277e7
Linux MintにおけるKernelのアップデート

UbuntuベースのLinux Mint 19.1 ですがKernelのアップデートは、「アップデートマネジャー」から実行します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/11540/69c3f364-22c3-bb6f-bb5d-e04a52c96838.png)

1. 「表示」メニューから「Linuxカーネル」を選択します。
2. 注意文が表示されるので「Continue」をクリックします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/11540/aad30ac0-5e44-d6a9-7169-dbc318daab7e.png)

これで新しいカーネルが導入されました。

Grubの設定を見ると次のようになっています。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/11540/17c8c7bf-f4ea-0c58-f38b-997ce6414fd2.png)


* Linux mint もそうなのですがディフォルトで導入してしまうと /boot パーティションが作成されてしまいます。そして残念なことにサイズが小さいです。そのためKernelをインストールすると容量不足でエラーになることが多いです。
* ディフォルトでは2つのバージョンのカーネルが入る程度のサイズなのでアップデートする際には古いバージョンを削除しておくと良いでしょう。

```
❯❯❯ df /boot
Filesystem      Size  Used Avail Use% Mounted on
/dev/sda4       218M  150M   53M  75% /boot
```

だいたい2つ入っていてこんな感じです。
paizaでsympy その3

#概要

sympyが、魔法なので、paizaで、やってみた。
練習問題、やってみた。

#問題

##~((AUB)n(~AU~B)) と等価な集合はどれか。ここで，Uは和集合，nは積集合，~xはxの補集合を表す。
##(~AUB)∩(AU~B)
##(~AU~B)∩(AUB)
##(~A∩B)U(A∩~B)
##(~A∩~B)∩(AUB)

```
from sympy.abc import A, B
from sympy.logic.boolalg import *
import sympy

print (~((A | B) & (~A | ~B)) == (~A | B) & (A | ~B))
print (~((A | B) & (~A | ~B)) == (~A | ~B) & (A | B))
print (~((A | B) & (~A | ~B)) == (~A & B) | (A & ~B))
print (~((A | B) & (~A | ~B)) == (~A & ~B) & (A | B))
```

#結果

おかしい、すべて、FALSE

```
False
False
False
False
```

#simplify_logicを使う。

```
from sympy.abc import A, B
from sympy.logic.boolalg import *
import sympy


print (sympy.simplify_logic(Equivalent(Not(And(Or(A, B), Or(~A, ~B))) == (~A | B) & (A | ~B))))
print (sympy.simplify_logic(Equivalent(~((A | B) & (~A | ~B)) == (~A | B) & (A | ~B))))

```

#結果

```
True
True
```


以上。
gitLabでリポジトリをcloneしようとしたらsshキーでエラーが出た

# 概要
gitLabでssh経由でcloneしようとしたらportが繋がっていない！というエラーが出たのでその対処法です。

## cloneしようとしたらsshがエラーを出した
gitLabで公開鍵を登録をしたのでリポジトリをssh経由でcloneしようとしたところ下記エラーが出た。

```
ssh: connect to host gitlab.com port 22: Operation timed out
fatal: Could not read from remote repository.
```

sshプロトコルが特定のネットワーク(公共ネットワーク等)でSSHのポート番号（22番）での通信を制限していることがあり、その影響でエラーが出た。
なので、443番ポートでの通信に変更します。

## 設定方法

`~/.ssh/config`内に記入します。
設定ファイルを作成していない方は下記コマンドで作成してください。

```
$ touch ~/.ssh/config
```
`~/.ssh/config`に記入します。

```
Host gitlab.com
  HostName   gitlab.com
  User       git
  TCPKeepAlive yes
  IdentitiesOnly yes
  Port       443
```

sshが接続されているか確認しましょう。

```
$ ssh -T git@gitlab.com
```

途中で繋げますか？という英語でいわれるのでyesと答えてあげます。
接続できていればwelcome! to ~ といわれるのでそしたらOKです。

これで接続が出来ているので再度cloneをしたらいけました。
【初心者向け】「Webを支える技術」ハイパーメディアシステムと分散システム（Web以前と誕生まで）

# はじめに
下記書籍の「第1部 Web概論」をまとめます。
[Webを支える技術](https://www.amazon.co.jp/Web%E3%82%92%E6%94%AF%E3%81%88%E3%82%8B%E6%8A%80%E8%A1%93-HTTP%E3%80%81URI%E3%80%81HTML%E3%80%81%E3%81%9D%E3%81%97%E3%81%A6REST-WEB-PRESS-plus/dp/4774142042)

# 本書の構成
* 第1部 Web概論　～WEBの技術的なバックグラウンドとアーキテクチャ～
	* Webの歴史
	* Webの技術的な特徴
		* HTTP,URI,HTMLがどのようなアーキテクチャに従って設計されたか？
* 第2部 URI
	* URIはWeb上に存在する情報を特定するためのもの
	* URIの構文とその意味
	* WebサービスやWebAPIにおけるURI設計
* 第3部 HTTP
	* すべてのブラウザはHTTPでサーバーと通信する
	* HTTPのプロトコル仕様
	* WebサービスやWebAPIにおける利用方法
* 第4部 ハイパーメディアフォーマット
	* Web上に存在するコンテンツを表現する
	* HTML,JSON,Atom,microformats
* 第5部 WebサービスとWebAPIの設計
	* HTTPやURIを状況に応じて適切に設定するために
	* 【解説】具体的な事例や困りごと

# 第1部 Web概論
# Webの歴史 ～Web以前から誕生まで

>現在のWebは、一言では言い表せない巨大なシステムです。世界規模の情報システムであるWebがなぜこのようなアーキテクチャになっているのかについては、個別技術をいきなり見ていくよりもそれらが成立してきた過程を眺めたほうが理解しやすいでしょう。本章ではWebが持つ歴史的背景を、ハイパーメディアシステムと分散システムの2つの側面から解説します。

# ハイパーメディアシステム

## Web以前のハイパーメディアシステム

* Memex（1945～）     / ハイパーメディアの起源
* Xanadu（1965～）    / 高機能だが複雑さから頓挫
* HyperCard（1987~）/ スタンドアロン型のWebサービス

## Web以後のハイパーメディアシステム
* Web（1990～）/ インターネットを使ったハイパーメディアとして設計された
* Webの特徴、実現しているリンクは、単方向のリンクだけ
    * 【〇】不特定多数の情報をリンクさせることができる
    * 【〇】システムを大規模化しやすい
    * 【▲】情報の集中的な管理は難しくなり
    * 【▲】リンク切れを起こしやすい
    

# 分散システム

## Web以前の分散システム

* RPC（Remote Procedure Call）  / ほかのコンピュータの関数を呼び出す仕組み
* CORBA,DCOM　/ 関数呼び出し＋サーバー側に「オブジェクト」を配置

## Web以後の分散システム

* Webでは世界中のユーザーが世界中のWebサービスを利用できる
    * 各ユーザーのコンピュータ環境は特定のOSやハードウェアに統一されない
    * クライアントとサーバの間のインターフェースを`HTTP`で固定したことで実現できた

# まとめ

* Webを支える技術は下記の3つ。
       * HTTP、URI、HTTP
       * ハイパーメディア
       * 分散システム
       
* ハイパーメディア
    * 【Web以前】のハイパーメディアは高機能で複雑、普及しなかった。
    * 【Web以後】単方向リンクだけを実現、シンプルでわかりやすい

* 分散システム
    * 【Web以前】閉じたネットワーク環境（ｲﾝﾄﾗﾈｯﾄ）で特定のユーザーに対応
    * 【Web以後】オープンで、不特定多数を相手にするシステムがWeb

#おわり
以上です。
SQLにおける複合INDEXの作り方

# はじめに
SQLチューニングで複合INDEXを作る時、カラムをとにかく列挙すれば良いわけではありません。必要最小限のカラムを、適切な順序で列挙する必要があります。
なぜなら、登場しているカラムの更新時に再生成が走りますし、適切な順序でなければ使用してもらえません。

# まず考えないといけないこと
SQL文中の、各部位ごとの評価順に並べる必要があります。

```text
1. FROM
2. ON
3. JOIN
4. WHERE
5. GROUP BY
6. HAVING
7. SELECT
8. DISTINCT
9. ORDER BY
10. TOP(LIMIT)
```
引用:[SELECT文の評価順序の話](https://qiita.com/suzukito/items/edcd00e680186f2930a8)より

SELECT文章の各評価順ごとに順番に取り出して並べていきましょう。
その際、各部位中での順番は気にする必要はないようです。例えば、WHEREでA,C,Bの順番で使われているときにA,B,Cの順序で書いても構いません。
ただ、評価順の部位をまたいで使われている場合はどうなるか不明です。(誰か追試求む！w)

# おまけ
実装によっては、ORDER BYに使ってほしいカラムについては、インデックスにも同じ向きで作成しておかないといけないことがあります。(例:MySQLの古いバージョン)
その場合はその分だけが異なるINDEXを別々に作成する必要があります。

# 参考
- [SELECT文の評価順序の話](https://qiita.com/suzukito/items/edcd00e680186f2930a8)
- [SQLにおける複合INDEXの順番について](https://qiita.com/keii1111/items/02861c74bcd57ab1e290)
日本語をコンピューターが取り扱えるように分解する！自然言語処理とは？ （自然言語処理基礎 その１）

#はじめに
自然言語処理って何なのか。どういう風に使えるのか、解説します。

#自然言語処理って？

自然言語処理は、
**コンピューターに人が日常的に使っている言葉(=自然言語)を理解してもらう**ために、
日本語を分解し、構造化し、ラベルを付与し、データセットとしてインプットする、
そのための技術です。

ではどのように分解するのでしょうか？

多くの自然言語処理では、以下の手順で解析を行っています。

<dl>
<dt>①形態素解析</dt>
<dd>単語単位に分解し、品詞ラベルを付与する</dd>

</dt><strong>②係り受け解析</strong></dt>
<dd>文節間の関係性を分析</dd>

<dt>③意味解析</dt>
<dd>述語に対する他の文節の、意味的な役割をラベリング</dd>
</dl>

これらは、自然言語を処理しやすくするための基本的な処理で、まとめて「**構文解析**」と呼ばれます。

#それぞれどんな解析しているの？

ここでは、①~③の解析内容を具体的に説明します。

##①形態素解析

形態素解析では、**単語単位に分解し、品詞ラベルを付与**します。

まずは、日本語の文章を「**単語のひとかたまり**」に分解します。
英語などと異なり、日本語は一続きの文章で、どこに区切りがあるかわかりません。
**日本語の最小単位（=形態素**）に分解することから解析がはじまります。

たとえば、
「**私は今日、ラーメンを食べた**」という文章は以下の形態素で分解されます。

~~~
 私 / は / 今日 / 、 / ラーメン / を / 食べ / た
~~~

加えて、各形態素の品詞情報を付与します。


+ 「私」→名詞
+ 「は」→連用助詞
+ 「今日」→名詞
+ 「、」→読点
+ 「ラーメン」→名詞
+ 「を」→格助詞
+ 「食べ」→動詞語幹
+ 「た」→動詞接尾辞


結果として、こんなラベリングをします↓

~~~
 私　/　 は　　/　今日　/　、　/　ラーメン /  を  /  食べ  / 　 た
名詞　連用助詞 　名詞　　 読点 　　名詞     格助詞  動詞語幹 動詞接尾辞
~~~

※品詞分類例としては、COTOHA APIの「[品詞一覧](https://api.ce-cotoha.com/contents/reference-detail.html#pos-list)」をご参考ください。

##②係り受け解析

次に解析するのは、**文節同士の関係性（=係り受け）**です。
ここでは「**意味をなす最小単位」である文節がどの文節と係っているのか、「関係性の有無」**を解析します。

「私/は/今日/、/ラーメン/を/食べ/た」を文節にまとめると、

~~~
  私　　 は  　　 今日 　、　　   ラーメン   を      食べ  　 た
_____________  _____________   _______________   _____________
~~~
となります。

この文章の中で係り受け関係があるのは、以下の通りです。

+ ①「私は」→「食べた」
+ ②「今日、」→「食べた」
+ ③「ラーメンを」→「食べた」

~~~
 私　/　 は　　/　今日　/　、　/　ラーメン /  を  /  食べ  / 　た
名詞　連用助詞 　名詞　　 読点 　　名詞     格助詞  動詞語幹 動詞接尾辞
_____________  _____________   _______________   _____________
     |              |                ③|_______________|
   ① |             ②|_________________________________|
     |________________________________________________|
~~~ 

この文節間の係り受け関係の有無(構造)を特定するのが、「**係り受け解析**」です。
この時点では、各係り受け関係にどのような意味があるのかは特定できていません。

大体の自然言語処理ツールはここまでの処理で、解析結果を出力します。
各係り受け関係の意味的役割を特定し、ラベリングをするのが、次の「**意味解析**」です。


##③意味解析

文節のそれぞれの働きを、主語、述語、修飾語、接続語、独立語と分類するのを習ったことがあると思います。文節の中で「何がどうする」「何がどんなだ」「何がなんだ」といった文章の骨格をなす重要な働きをするのが、主語と述語です。
このうち、**「述語」との関係性から各文節との係り受けの意味役割をラベリングするのが、意味解析**です。

たとえば、
「私は」「食べた」の「私は」は、動作主格(*agent*)
「今日、」「食べた」の「今日」は、「時間格」(*tim*)
「ラーメンを」「食べた」の「ラーメンを」は、対象格(*object*)

というかたちです。

~~~
 私　/　 は　　/　今日　/　、　/　ラーメン /  を  /  食べ  / 　た
名詞　連用助詞 　名詞　　 読点 　　名詞     格助詞  動詞語幹 動詞接尾辞
_____________  _____________   _______________   _____________
     |              |          ③object|_______________|
   ① |          ②tim|_________________________________|
agent|________________________________________________|
~~~ 

※COTOHA APIの場合のラベリングは、「[意味関係ラベル一覧] (https://api.ce-cotoha.com/contents/reference-detail.html#link-list)」をご参考ください。

このような①～③の解析を実施することで、文章を構造的に処理することができます。
解析結果は以下の通りです。

###■解析イメージ

![解析結果.png](https://qiita-image-store.s3.amazonaws.com/0/287604/075f9876-005d-33ef-3772-570819121c19.png)



なお、今回は[COTOHA API](https://api.ce-cotoha.com/)で解析しました。
タグづけや解析結果は、各自然言語処理により異なります。


#これからの章立て

自然言語処理について、引き続き解説していきます。
(予定の章立て)
・自然言語処理APIにはどんなAPIがあるか
・自然言語処理でどんなことができるか