OmniAICreator/Qiita-1.07M huggingface dataset:
ヘルパ関数の自作 by Laravel

helperでフラッシュメッセージ関数作成したんで備忘録

```php:helpers.php
<?php
if (! function_exists('set_message')) {
    function set_message($msg = null, $is_success = true) {
        session()->flash('message', $msg);
        session()->flash('is_success', $is_success);
    }
}
```

```php:composer.json
"autoload": {
    "classmap": [
        "database/seeds",
        "database/factories"
    ],
    "psr-4": {
        "App\\": "app/"
    },
    "files": [
        "app/helpers.php"//追加
    ]
},
```

```:console
$ composer dump-autoload
```
レイアウトに設定しておく。

```php:layout.blade.php                                                
@if (session('message'))                                               
    @if (session('is_success'))                                        
        <div class="alert alert-success">{{ session('message') }}</div>
    @else                                                              
        <div class="alert alert-danger">{{ session('message') }}</div> 
    @endif                                                             
    <?php
    session()->flash('message', null);                        
    session()->flash('is_succes', null);
    ?>
@endif                                                                 
```
使用例

```php:xxxController
//どこからでも使用可能
public function add() {
    $item_id = session('id');
    if (isset($item_id)) {
        if ((new Cart)->addDb($item_id, 1))
            //正常メッセージ
            set_message('商品をカートに入れました');
        } else {
            //エラーメッセージ
            set_message('在庫が足りません', false);
        }
    }
    session()->forget('id');
    return $this->index();
}
```
参考サイト
[Laravel 5へ自作のヘルパー関数を追加するベストプラクティス](https://s8a.jp/laravel-custom-helper)
【復習】JavaScriptで複数のclassに反映させる方法

##困ったこと
classを指定しているのに一つしか反映されない。。。

##理解と対応
classの場合は配列になるので一つ一つ取り出さなければいけない

そんな時に利用するのが
for文

```js
for (  初期値;  繰り返す条件;  増減値  ) {
  // 繰り返す処理を書く
}
```

配列の取り出し方としては
box[1]やbox[2]などで取り出すため
変数を用いてbox[i]と記載しfor文で変数の値を増やしていけば取り出すことが可能


##実際のコード


```html

<style>
    .box1  {
        width: 100px;
        height: 100px;
        background: red;
    }


    .box2 {
        width: 100px;
        height: 100px;
        background: red;
    }
</style>


<body>
    <div class="box1" id="jj"></div>
    </br>
    <div class="box2" id="hh"></div>
    </br>
    <div class="box2" id="hh"></div>

<script>
 var box = document.getElementsByClassName('box2');
 for (var i = 0 ; i < box.length ; i++ ){
  box[i].style.background = 'pink';
 }
</script>


```
jetson nanoでYOLOを動かそうとするとopencv was not found in the pkg-config search path

# 3行で
* jetson nanoを購入してはやりのディープラーニング？ってやつをやってみたい！！！！
* ネットに落ちてる記事を参考に構築してみるけどエラーになる・・・なんで・・・
* 答え：古いイメージを使いましょう

# モチベーション
jetson nanoを買ってみて早速試しに画像認識系の有名なモデルを動かしてみたい。
私はその一つとして、YOLOを選んだ。さすが有名なモデルだけあって、ネットにやってみた系の記事がたくさんあって試しには良さそう。
で、（環境構築系にはありがちな話だけど）実際やってみると結構ハマったので、ハマったところと解消方法をメモしておきます。

# 環境

||バージョン|
|---|---|
|最終的に使ったイメージ|JetPack 4.2|
|諦めたイメージ|JetPack 4.3|

jetpack archive
https://developer.nvidia.com/embedded/jetpack-archive

# 結論
darknetのmakeで
`opencv was not found in the pkg-config search path`
のようなエラーが出るときはJetPack 4.2などの古いイメージを使いましょう。
(2020/1/13時点では)
「Getting Started With Jetson Nano Developer Kit」
https://developer.nvidia.com/embedded/learn/get-started-jetson-nano-devkit
で誘導されるイメージはJetPack 4.3で、これは`pkg-config --libs opencv`が通りません。

# やってハマってしまったこと
「Getting Started With Jetson Nano Developer Kit」
https://developer.nvidia.com/embedded/learn/get-started-jetson-nano-devkit
に従ってSDカードにイメージを入れる。

https://www.nakasha.co.jp/future/ai/vol2_yolov3nvidia_jetson_nano.html
に従いdarknetをmake

# やるとどうなるのか
* makeで失敗します
`opencv was not found in the pkg-config search path`
などというエラーがでてopencvがインクルードされません。

* pythonからはopencvが見える
ターミナルに`python`と打ち込みpythonの対話モードに入って

```python
import cv2
cv2.__version__
```

すると4.1.1が表示されます。

* `pkg-config --libs opencv4`は通る
JetPack 4.3は4.x系のopencvが入っておりイメージらしく、`pkg-config --libs opencv4`は通ります。
darknetのMakefileでは`pkg-config --libs opencv`を使いますがこれは通りません。

# 対処方法
特にこだわりがなければJetPack 4.2を使えばいいと思います。
opencvのバージョンは3.3.1になります。

JetPack 4.3を使いつつdarknetのmakeを通すことが不可能だという確証は得られませんでした。


# 参考
jetpack archive
https://developer.nvidia.com/embedded/jetpack-archive
【動画解説付き】初心者のためのWebAssembly開発環境構築ガイド

![アイキャッチ2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538330/500d0007-ba6b-40f1-6f65-2857b797f107.png)
どうも、プログラミングの鬼シヨツ鬼です。
この記事では「WebAssemblyとかいうやつの開発環境構築したいぜ」って人に向けてWindows機に仮想マシンを作って開発環境構築する方法を説明しています。
初心者の人がこの記事を見ただけで操作できるように、仮想マシンの準備から説明しますので、ぜひ参考にしてみてください。
(「仮想マシンの作り方は分かるよ！」って方は「開発環境構築」の項目から読むのでOK)

ちなみに、この記事は次の動画と同じ内容ですので、記事だけだと分かりづらい部分は、そちらもご活用ください。
**(ボタンの位置や操作方法などがわかるので、初心者の方は動画のほうが分かりやすいかも)**
[YouTube:初心者のためのWebAssembly開発環境構築ガイド](https://youtu.be/qKPB1x1fYvw)

#準備するもの
・インターネット接続されたWindows10のPC
・未知への好奇心

#VirtualBoxのインストール
Windows上に仮想マシンを作るためにVirtualBoxというソフトをインストールします。
[過去の僕の動画](https://youtu.be/_FdOXgLKywk)の「VirtualBoxのインストール」の部分を参考にインストールを行ってください。
(動画の中ではCentOSのインストールも行っていますが、この部分は不要です)

#Ubuntuのインストールメディア準備
[こちらのサイト](https://www.ubuntulinux.jp/News/ubuntu1604-ja-remix)よりUbuntuのisoイメージをダウンロードします。

#VirtualBoxに新規のマシンを追加する
VirtualBox上に新規の仮想マシンを作ります。
設定内容は自分のPCのスペックに応じて適宜決めてください。
僕が設定した内容は、[動画](https://www.youtube.com/watch?v=qKPB1x1fYvw&t=82s)の4:06～を参考にしてください。

#Ubuntuのインストール
以下の手順で仮想マシンにOSを入れて立ち上げます。
1.追加した仮想マシンのストレージより、[光学ドライブ]空となっている項目をクリックし、「ディスクイメージを選択」をクリックする
2.Ubuntuのインストールメディアを選択する
3.「起動」ボタンを押す

#Ubuntuのインストール設定
Ubuntuのインストール設定を以下の操作で行います。
1.「Ubuntuをインストール」を選択
2.「Ubuntuのインストール準備」の画面で「Ubuntuのインストール中にアップデートをダウンロードする」と「グラフィックス、Wi-fi機器、Flash～(略)」の項目にチェックを入れ、「続ける」を押す
3.「インストールの種類」の画面で「ディスクを削除してUbuntuをインストール」にチェックを入れ「インストール」を押す

*この後、キーボードの設定やアカウントの設定を行いますが、特に難しい項目はないため、ここでの説明は省略します。
#開発環境構築
###環境確認
仮想マシン上から次の事項を確認してください。(確認の方法は動画中で紹介)
・インターネットに接続できること
・Pythonがインストール済みのこと
・gccコンパイラが入っていること
・gitが入っていること

###Emscriptenをインストールする
1.次のコマンドを実行する
`git clone http://github.com/emscripten-core/emsdk.git`
2.1の作業で作成される「emsdk」ディレクトリに移動し、次のコマンドを実行する
`./emsdk install latest`
3.次のコマンドを実行する
`./emsdk activate latest`
4.次のコマンドを実行する
`source ./emsdk_env.sh --build=Release`

#コーディングと動作確認
###サンプルプログラム作成
お決まりの「Hello world」を表示させるプログラムを作ります。

```c:hello.c
#include <stdio.h>
int main(int argc,char** argv){
  printf("Hello World!!\n");
}
```

###コンパイル
サンプルプログラムを作成したディレクトリに移動して、次のコマンドを実行します。
`emcc hello.c hello.html`

###動作確認
下記コマンドでブラウザを開いてください。
`emrun --browser firefox hello.html`

ブラウザ上の画面の下の部分に「Hello world!!」が表示されていれば成功です！

「**No WebAssembly support found.Build with -s WASM=0 to target JavaScript instead.**」のエラーが出ている場合は、firefoxのバージョンが古いことが原因と考えられます。
firefoxを最新版にインストールしてください。(WebAssemblyの対応はver.52以降)

#まとめ
新しい技術に挑戦するのは楽しいね。
最後まで、読んでくれてありがとう。
参考になったら「:thumbsup_tone2:」押してね。
仮想マシンについて勉強してみたお話

[前回の記事](https://qiita.com/jgvkmea/items/6b8f19697145f17a115c)ではVirtualBoxにCentOSをインストールしました。
今日はCentOSをインストールした仮想マシンにApacheをインストールしWebサーバを構築するという内容のハンズオンを受けてきました。
そのハンズオンで仮想マシンについても少し勉強しましたのでこちらの記事には仮想マシンについて学んだことをまとめます。

# 仮想マシンとは
仮想マシンとは1台のパソコンの中に仮想的に作られたパソコンのことです。
仮想とはいえパソコンなのでOSをインストールしたり、Webブラウザを入れてWebサイトを見ることもできます。
要は普通のパソコンと同じように扱えます。
ただしあくまで1つの物理的なパソコンに複数のパソコンがあるように扱えるだけなので、共有している分性能は落ちます。
ちなみに今紹介したのはホストOS型の仮想マシンで、これとは別にハイパーハイザ型の仮想マシンもあります。
## 仮想マシンのメリット
### 一台のパソコンで複数の環境を触れる
たとえばソフトウェアを開発したときにWindows10だけでなく、Windows8等の違うOS上でも問題なく動くことを確認したいときに試したいOSの数だけパソコンを用意するのは手間ですし、コストもかかります。
そこで仮想マシンを使うことで様々なOSをインストールした環境を用意してそこでソフトウェアが正常に動くか試すことができるのです。
また想定している本番環境を仮想マシンで再現することで、新たなパソコンを用意することなく開発時から本番と同じ環境を使うことができるようになります。
### 最悪重大な変更を加えてしまっても再起する確率が高まる
作業している中で、たとえば設定に重要な変更を加えてしまい、ソフトウェアが立ち上がらなくなったり、OSが起動しなくなったとしても仮想マシン上であれば再度インストールし直すだけで済むような場合があります。
そのためよく理解できていないまま設定をいじったとしてもホストOSで直接いじくるよりはまだリスクは低くなります。（いじる前に理解するのが最も大事なのは変わりませんが）

## 仮想マシンのデメリット
### 仮想マシンを起動すると重くなる
上述の通り、仮想マシンを起動すると1つのハードウェア上でパソコン2台分を処理しなければいけなくなるため、パソコンが重くなります。

## 仮想マシンの構成
ここではハードウェア、ホストOS、ゲストOSの構成について記載します。
![2020-01-13_17h26_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133573/033ad039-618c-134a-02ac-053b4dfa8ef5.png)
ホストOSはハードウェアと接続しています。
しかしゲストOSは直接ハードウェアと接続せず、ホストOSを介して接続します。
これをブリッジ接続といいます。

## 終わりに
今回勉強した内容はここまでです。
もし間違い等ありましたらご指摘の程よろしくお願いします。
今回のお話はここまでです。
VimもEmacsも使えるけど、両方使えるようになった方が良いと思う。


# Vim

## 利点
- ハイライトが優秀
- キーバインドもコード書くときには優秀

サーバーの設定書くのに必須なので覚えるべき。
マイナー言語を初めて書くときなども使う。

## 欠点
- 日本語を入力するのには向かないと思う。
- プラグインが無能なことがある。

# Emacs

## 利点
- プラグインがめちゃめちゃ優秀なことがある。
- キーバインド覚えるとVim環境がないところでのコードが書きやすい。
- 日本語入力のときには使える。

CoqやHaskellなどはEmacsで書くべき言語だし、日本語入力もEmacsキーバインドで書く。
また、GASやQiitaなどのWebブラウザで書く環境の場合は、Emacsキーバインドに微妙に対応していることも多いので使えると便利。

## 欠点
- キーバインド少ない。
- サーバーで使うときには入ってないこともあるのでインストールしないといけない。

#結論

サーバーの設定はVim, 日本語も書くときはEmacs, プログラミングは言語によって使い分け。
つまり、両方覚えて両方使おう。
EC2上のWordPressの乗っ取りを放置していたら不正利用のメールが来た話

# はじめに

WordPressの勉強に、AWSハンズオンのWordPressインスタンスをそのまま利用していました。その後、WordPressにログインすると、身に覚えのない英語の記事が増えていました。その後、放置していたら、AWSから、EC2の不正利用レポートが届きました。

# 使用していたインスタンスの詳細
- OS
    - Amazon Linux AMI release 2016.09
- Apache(httpd)のバージョン
    - 2.2.34
- MySQLのバージョン
    - 5.5.62
- PHPのバージョン
    - 5.3.29
- WordPressのバージョン
    - 4.7.2

# WordPressの乗っ取り
WordPressに1週間ぶりにログインすると、見慣れない記事が増えていました。
![スクリーンショット (19).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/27abcf2e-2e77-caba-ac7d-9972d7ff7f79.png)

簡単なパスワードだったので急いで変更し、ログイン履歴の確認できる<a href="https://wordpress.org/plugins/crazy-bone/" target="_blank">Crazy Bone</a>をインストールし、ログイン履歴を確認すると、インストールして約20分ほどで8件のアタック履歴が出てきました。
<img width="1080" alt="スクリーンショット (20).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/f291eb17-934e-7958-ddcc-61e90fffb7d6.png">

上記の状況を見て、<a href="https://wordpress.org/plugins/ip-geo-block/" target="_blank">IP Geo Block</a>を使用してJPドメイン以外の閲覧と管理画面のログインを禁止しました。

その後、自分の元記事のページを見てみると、不正スクリプトや別のページにジャンプさせる命令が記述されていました。
<img width="1080" alt="スクリーンショット (38).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/5166415e-f262-5b89-d2f2-a508f87b9574.png">

身に覚えのないスクリプトを削除した後、一安心と思い放置していました。

# Amazonから、不正利用のメールが届く
WordPress乗っ取りから、1週間が過ぎた頃、Amazonから、```Your Amazon EC2 Abuse Report```という件名のメールが届きました。
<img width="720" alt="スクリーンショット (50).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/758ff948-c736-509a-b10f-5509cd754e2d.png">

自分が使用しているインスタンスのIPアドレスから、ブルートフォース攻撃とDoS攻撃をしている報告が来ました。
勉強用で消しても問題がないので、急いでインスタンスを削除し、このメールに```I stopped and deleted the corresponding EC2.```(該当のEC2を停止＆削除しました)と送信しました。

その後、解決したとメールが届いたので一安心です。
<img width="714" alt="スクリーンショット (52).png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/1e96f747-fa7e-4e40-b3ae-67aeb51ca81c.png">


# 反省点
## インスタンスのセキュリティグループ
勉強用で自分しか使わないのにSSHとHTTPが全世界に公開(0.0.0.0/0)していたので、マイIPに設定する。

## 改ざんされていた時点でインスタンスを停止する
WordPressの改ざんが確認された時点で該当のインスタンスを削除し、新しく作り直すことをしていれば不正利用メールが来なかったと思います。

## ソフトウェアのアップデートをして最新バージョンにする
使用していたWordPressのバージョンが古く、脆弱性から踏み台にされたので、脆弱性を減らすためにも、ソフトウェアのアップデートは重要だと思いました。

## WordPressのセキュリティプラグインを導入する
ダッシュボードにログインするアドレスを変更したり、ログイン時にCAPTCHA認証が必要にしてボット攻撃に抵抗する必要があります。

## パスワードを簡単なものにしない
最初に指定されている複雑なパスワードをそのまま使用するほうが、セキュリティが高い気がします。

# さいごに
定期的に自分のサイトやインスタンスを確認して、改ざんや脆弱性がないかを確認する事が重要だと思いました。アタックはボットで無差別に行われているので、常にソフトウェアを最新の状態にして、脆弱性を減らすことが重要です。
無料版svnソフトsvnXの環境構築

# はじめに
備忘録です．
[ここの参考サイト](http://www.yabi-blog.xyz/mac_subversion_svnx/)を前提に説明を進めていきます．

# 対象外
※ Catalinaから，svnXが使用できなくなったそうです．

# 手順
1)svnXダウンロード
2)「svnX.app」をアプリケーションフォルダにインストール（コピー）
3)svnXを開く
4)Repositoriesを開く
....

# 1)svnXダウンロード
[ここのサイト](https://code.google.com/archive/p/svnx/downloads)からダウンロードします．

# 2)「svnX.app」をアプリケーションフォルダにインストール（コピー）
ダウンロードしたdmgファイルを実行し、「svnX.app」をアプリケーションフォルダにインストール（コピー）します。

# 3)svnXを開く
ダウンロードはできるんだけど，svnXを開こうとすると..
![スクリーンショット 2020-01-13 15.24.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364547/14df9ccb-a06a-525a-2da3-b605a07ae5c0.png)
う..
[ここのサイト](http://bamka.info/mac-app-security)を参考にして開きました．

# 4)Repositoriesを開く
svnXが開たら，メニューの「Window」→「Repositories」を開きます．

...
これから，svnXの使い方を学んでいきます．←


# 参考
[1][【mac】SubversionクライアントsvnXの導入方法※ダウンロードからリポジトリのクローンまで](http://www.yabi-blog.xyz/mac_subversion_svnx/)
[2][Macの開発元が未確認で開けないアプリはControlキーで幸せになれる](http://bamka.info/mac-app-security)
Serverless Step FunctionsでカスタムIAMロールを指定する方法

# 概要

Serverless Frameworkに `Serverless Step Functions` プラグインを利用した場面で、カスタムしたIAMロールをStep Functionsのロールとして指定する方法

## 環境

```bash
$ sls --version
Framework Core: 1.60.5

$ npm view serverless-step-functions version
2.17.0
```

# ドキュメントを見る
- https://serverless.com/plugins/serverless-step-functions/
- 公式の `IAM Role` セクションに2つの記述パターンがあります
- 1つは IAM roleのARNを直接記述する方法
- もう1つは serverless.yml に記述したIAM Roleを参照指定する方法
- 本記事は後者を試したものです

# ドキュメント通り試す
- ドキュメント通り記述します
- ドキュメントではresources > Resources > StateMachineRole > Propertie以下が省略されていますが、ここでは具体的に記述しています
- 単純化するため、中身は無いです（StateMachineが一つデプロイされます）

```yaml:serverless.yml
service: sfn-roletest
plugins:
  - serverless-step-functions
provider:
  name: aws
  runtime: python3.8
package:
  exclude:
    - "**"
stepFunctions:
  stateMachines:
    hello:
      name: helloStateMachine
      role:
        Ref: StateMachineRole
      definition:
        StartAt: Hello
        States:
          Hello:
            Type: Pass
            End: true
resources:
  Resources:
    StateMachineRole:
      Type: AWS::IAM::Role
      Properties:
        Path: /
        AssumeRolePolicyDocument:
          Version: '2012-10-17'
          Statement:
            - Effect: Allow
              Principal:
                Service:
                  - states.amazonaws.com
              Action: sts:AssumeRole
        Policies:
          - PolicyName: myPolicy
            PolicyDocument:
              Version: '2012-10-17'
              Statement:
                - Effect: Allow
                  Action:
                    - s3:GetObject
                  Resource: "*"
```

## デプロイします
- エラーになります
- resourcesで設定したIAMロールのARNをうまく参照できないようです

```bash
$ sls deploy
(snip)
Serverless: Operation failed!
  Serverless Error ---------------------------------------
  An error occurred: HelloStateMachine - Invalid Role Arn: 'sfn-roletest-dev-StateMachineRole-1JIY0T8EYAG0V' (Service: AWSStepFunctions; Status Code: 400; Error Code: InvalidArn; Request ID: 9fc449df-94e0-436d-9e28-64c000bd5ecc).
```

# 記述を変えてみる
- `Ref: StateMachineRole` 部分を `Fn::GetAtt: [StateMachineRole, Arn]` へ書き換えます

```yaml:serverless.yml
(snip)
stepFunctions:
  stateMachines:
    hello:
      name: helloStateMachine
      role:
        #Ref: StateMachineRole
        Fn::GetAtt: [StateMachineRole, Arn]
(snip)
```

- デプロイすると成功しました

```bash
$ sls deploy
(snip)
Serverless: Updating Stack...
Serverless: Checking Stack update progress...
..........
Serverless: Stack update finished...
Service Information
service: sfn-roletest
stage: dev
region: us-east-1
stack: sfn-roletest-dev
resources: 4
(snip)
```

# 確認
- Management Consoleから確認します


## Step Functions > ステートマシン 
- 作成されています
- IAMロールのリンクをクリックします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53115/5dad1919-b0f5-9410-c246-b29abb45369f.png)

## IAMロール 
- ポリシーをJSON表示してみます
- `serverless.yml` で指定した通り、`s3:GetObject` のアクセス許可設定が反映されています :raised_hands_tone1:

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/53115/40b8d532-cd62-03d9-5452-e25923aa0d2a.png)
ilasmでstack machine その10

#概要

ilasmでstack machineやってみた。
俺言語、コンパイラを作ってみた。
windowsのexe作るまでの手順。

#ソースをコンパイルする。

https://embed.plnkr.co/uudzVWXtcKQ4sXFgphoC/

#コンパイルを成形する。

https://embed.plnkr.co/Z9635fpc8T8PPBefJgUm/

#ilasmでexeを作る。

```
ilasm ore.il
```

以上。
WordPressを更新したら500エラーになった

WordPressのアップデートをいつも管理画面の「WordPress の更新」から気楽にしていました。先日WordPressのバージョンを5.3.2にアップデートしたところ500エラーが出ました。

WordPressの管理画面にはアクセスできるものの、管理画面の投稿一覧にアクセスすると500エラーになり、「ホストに接続できません」と表示されます。
サイトのページも真っ白です。。。

### 環境
- KUSANAGI for AWS
- WordPress 5.3.2（最新化済み）
- PHP 5.6

### エラー内容を確認する
エラー内容を確認するため、WordPressをデバッグモードにします。
 `wp-config.php` を開きます。KUSANAGIのデフォルトでは `/home/kusanagi/kusanagi_html/DocumentRoot` にファイルがありました。

```
define('WP_DEBUG', false);
```

その行を次のように変更します。

```
define('WP_DEBUG', true);
```

nginxの再起動などは不要。サイトにアクセスすればエラー内容が確認できるようになっているはずです。

### エラー内容
デバッグモードによって表示されたエラー内容は次の通りです。

```
Call to undefined function date_create_immutable_from_format() 
in /home/kusanagi/kusanagi_html/DocumentRoot/wp-includes/general-template.php 
on line 2645
```

### 解決方法
上記エラー内容だけ見てネット検索したところ、PHPのアップデートが必要との記事がヒットしました。
私は `KUSANAGI for AWS` を使っているため、「PHP5を削除してPHP7をインストールする」といった手段は取らず、以下のコマンドを実行してPHP7にアップデートしました。

```
# yum update -y
# kusanagi update plugin
# kusanagi php7
```

500エラーはなくなり、投稿一覧が表示されるようになりました。 `wp-config.php` を元に戻しておしまいです。

### さいごに
真っ白い画面が出たときは正直焦りました。
PHPバージョン古いのと、バックアップもとらずにWordPressの更新を気楽にやりすぎですね。気を付けたいと思います。
JavaScript: var/letのスコープとletによる巻き上げ


「入門JavaScriptプログラミング」
https://www.amazon.co.jp/dp/479815864X
この本でJavaScriptの学習中。

このタイトルをしておきながら
「ES5以前のJavaScriptを理解している人向けに、ES2015以降の機能について紹介する」
というやや凶悪(?)な一面を持つな本だ。

タイトルはその第1章の内容。
もうvarは使わない気がするが、2点知らなかった内容があったので記録に残す。

# 基本：letとvarのscope

- varは関数スコープ

```javascript

if (true) {
  var foo = `bar`;
}

console.log(foo); // "bar"
```

- letはブロックスコープ

```javascript
if (true) {
  let foo = `bar`;
}

console.log(foo); // fooはブロックの外側に存在しないためエラー
```

この辺はただの前提。以下が本題。

# varの関数スコープによる厄介な影響
```html

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
</ul>

...

<script>
  var items = document.querySelectorAll;
  for (var i = 0; i < 5; i++) {
    var li = item[i];
    li.addEventListener('click', () => {
      alert(li.textContent + ':' + i);
    });
  }
</script>
```
上のコードはhtmlの各リストアイテムをクリックすると、対応したメッセージのアラートが表示される、ということを意図して書かれている。が、実際には期待通りには動作しない。どのリストアイテムをクリックしても、表示されるのは"five: 5"になる。

`var i`と`var li`は関数スコープなので、5回のforループの全てで共有されている。
つまりどのリストアイテムをクリックしても、結局は同じメッセージのアラートが表示される。
forの最後のループが終わった際、'i = 4'の時のループが終わった際には、`i = 5`, li = `<li>five</li>`になっているため、前述の通り必ず"five: 5"が表示される。

varの代わりにletを使えば意図した動作になる。
letはブロックスコープであるため、forの各ブロックごとに`let i`, `let li`は独立して存在することになるからだ。

正直なところもうvarを自分で書くことはないと思うが、既存コードに存在する場合はこの点注意が必要になりそうだ。

# letによる変数の巻き上げ
letによる変数による巻き上げとは、「変数が宣言されたスコープの内側では、変数がスコープ全体を消費する」と言うことだ。
これだけだとさっぱり分からないのでコードで説明する。

```javascript

let num = 10;
const getNum = () {
  return num;
}
console.log( getNum() );
```
このコードはコンソールに10を表示する。getNum()内にnumの宣言が無い為、スコープチェーンの仕組みに則って、外側にある`let num = 10;`が用いられる。

```javascript
let num = 10;
const getNum = () {
  let num = 5 // 変更箇所
  return num;
}
console.log( getNum() );
```
この場合はコンソールに5が表示される。これはまだ直感的だろう。

ではこれはどうだろう？

```javascript
// 外側のnumのスコープここから
let num = 10;
const getNum = () {
  // getNum()内のnumのスコープここから
  console.log(num) // 変更箇所
  let num = 5;
  return num;
  // getNum()内のnumのスコープここまで
}
console.log( getNum() );
// 外側のnumのスコープここまで
```
まずこの場合の`console.log(num)`は`let num = 10;`と`let num = 5`のどちらを参照するか？
正解は`let num = 5`だ。この現象が「let による巻き上げ」だ。numがどこで宣言されていようと、numはスコープ全体を消費する。
(巻き上げ自体はvarでも同様のことが言える。varの場合は関数の単位でスコープ全体を消費する)

上のコードの場合もう1つ問題が発生する。宣言の前にnumが参照されるとどうなるか？とということだ。
具体的には`console.log(num)`が`let num = 5`よりも前に存在している。

この場合`console.log(num)`はエラーが発生する。letで宣言される関数が、宣言される前にスコープ内で実際にアクセスされた場合は、参照エラーとなる。
varの場合は参照エラーにはならないが値は常に未定義となる。なおこのようなエラーが発生する領域をTDZ(Temporal Dead Zone)と呼ぶ。

## ifを絡めた面倒な話
これにifを絡めるとやや面倒な話になる。

```javascript
let num = 0;
function getNum() {
  if (!num) {
    let num = 1;
  }
  return num;
}
console.log( getNum() );
```
この場合コンソールに表示されるのは、1...ではなく0になる。
以下のようにスコープを明示すると分かりやすくなる。

```javascript
let num = 0;
function getNum() {
  if (!num) { // このnumは(スコープチェーンにより"let num = 0;"を参照)
    // if内のブロックのスコープここから
    let num = 1;
    // if内のブロックのスコープここまで
  }
  return num;
}
console.log( getNum() );
```
`let num = 1`はif内のブロックでのみ有効であり、ifの条件式における`num` & `return num;`は`let num = 0;`を参照している。
言われれば当たり前のことだが、慣れないと引っかかりそうな話ではある。
「インターネット生まれHIPHOP育ち」のためのアンセム

# 「インターネット生まれHIPHOP育ち」のためのアンセム



きょうはプログラマのみんなに「インターネット生まれHIPHOP育ち」のためのアンセムを紹介したい。

[![Local Distance ～ 水星 (Roller Skate Disco Remix) live at suisei is high](http://img.youtube.com/vi/xs7NF-VPn8k/0.jpg)](https://www.youtube.com/watch?v=xs7NF-VPn8k)
[Local Distance ～ 水星 (Roller Skate Disco Remix) live at suisei is high](https://www.youtube.com/watch?v=xs7NF-VPn8k)

メガネ男子たちが楽し気に歌い踊る白黒のビデオ。情報量多めで何のことかわからないと思うので説明させてほしい。

登場人物

- DJ: PUNPEE(メガネ)(板橋区民の誇り)
- 1,2曲目MC1: tofubeats(メガネ)(神戸市民の誇り)
- 1曲目MC2: okadada(非メガネ)
- 2曲目MC2: オノマトペ大臣(メガネ)

ちなみにおれは板橋区高島平生まれ蓮根育ち、現在神戸市西区在住（メガネ）。
つまり、この曲は俺のための曲だと思っている。

紹介したいのは1曲目は「Local Distance」。中高生が音楽に目覚めて、曲作りをしようとしたときに回りに話のできそうな友達がいなかったらどうするか。ネット時代ならではのググって機材の使い方をしらべてSoundCloudにアップして友達見つけた。東京と地方の距離って何？という内容。

普通にレベルが高い。楽曲はもちろんだけど、そもそもサンクラに曲アップする時点でレベル高い。俺らgithubアカウントあってもどんだけ草はやしているんだよって。

おれが特に好きなのが、okadadaの2バース目

	♪まずは一人でやってみよう
    そしたらサンクラにあげてみよう
    comment,likeがつくかもしれない
    顔の知らない友達できるかもしれない
	
    Boys&Girls Please Stand Up
    距離と距離を埋めるのは何だ？
    腐ってないで今すぐにRECを
    そのラップが誰かを動かすかもね
	
    もしそうなら最高 今日も９時からバイト
    5時まではファックオフ でも
    頭の中で開くライムノート

なんだろ、これっておれらメガネでチェックのネルシャツ着てるプラグラマにも通じる話じゃね？

おれは、tofuとPUNPEE好きなので、2曲目の水星 (Roller Skate Disco Remix) 目当てでYoutubeググってたら、これ見つけた。

その時の衝撃がすごかった。なんだこれめちゃくちゃ楽しそうじゃんって。歌詞読んだらもっとすごくてどんなに稚拙でもまず成果物を上げてみようって受け取った。

	♪まずは一人でやってみよう/そしたらgithubにあげてみよう～
	～そのプログラムが誰かを動かすかもね
    ～頭の中で開くライムノート

知識はあっても中2の時の有り余る時間と情熱はもうない？そんな言い訳している暇があったら、自分だけのプログラムでもいいからpushしてみよう。それか、いつも使っているOSSにPR送ってみよう。そしたら、誰かに感謝のfavが付くかもね。

    ♪早く来いよこっち側に ヘタクソでも関係ないぜ
    マイク無くても声は出せる 滋賀からでも伝える
    2.0.1.2 こんな時代に Localだなんだってあるわけないねん
ロリポップで独自ドメインをとったときに躓いたお話

#ロリポップで独自ドメインを取ろう！
ウェブサイト運用をするときにはサーバーとドメインは大切。
ゼロから構築することもできますが、初心者ならレンサバを借りて、連携しているドメイン提供サービスからドメイン取るのが正直手っ取り早いです。
DNSの設定とかも初心者の僕にはさっぱりですし、そういうバックエンドを自動で終わらせてくれるのでかなり楽に環境を構築することができます。
ということもあって、僕はロリポップを使って、ムームードメインから独自ドメインを取って、サイトを公開しようと思ったらそこで大きな落とし穴が……

#サーバー上のどこのフォルダがルートになるの？
ロリポップで独自ドメインを設定する際には、以下の画像のように表示する内容を置いておくためのフォルダを設定することができます。それがルートフォルダに設定されるわけです。
<img width="500" alt="application1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556712/c1fff75b-5ad5-40e5-174a-fb72bba35439.png">
この赤枠の部分にフォルダ名を記入します。

#この作業のどこで躓くの？
こんな簡単な作業のどこで躓くのか、という感じなのですが、このフォルダが実は自動生成されるものなのです。
つまり、もともとこのフォルダを独自ドメインで表示したいからといってあらかじめ作成しておいても意味が無い、ということです。
しかも、そのフォルダがどこに生成させるのか教えてくれません。
それくらい書いておいてくれ、と思うのですが、ヘルプにも説明はありませんでした。
で、それが実際どこにあるのかというと、サーバー直下の「web」というフォルダの下です。
そこに、記入したフォルダ名のフォルダが生成されているはずです。
そのフォルダの下にindex.htmlやindex.phpを置くことで、そのページが表示されるようになります。

#最後に
まさかフォルダ指定で躓くとは思いませんでした……
ヘルプなどをしっかり見ていればもしかしたらこんなベタなつまづき方をすることは無いのかもしれませんが、みなさんお気をつけください。
unity Coroutine

```
using UnityEngine;
using System.Collections;

public class Sample : MonoBehaviour
{
    private bool update;

    private void Start()
    {
        update = false;
        StartCoroutine("ShowMessage");
    }

    private void Update()
    {
        if (update)
        {
             Debug.Log("Now update.");
        }
    }

    private IEnumerator ShowMessage()
    {
         Debug.Log("GameStart!");
         yield return new WaitForSeconds(3);
         
         update = true;
         yield return null;
    }
}
```

解説。
StartCoroutine("メソッド名")
これで実行したいメソッドをコルーチン として実行できる。

メソッドの戻り値はIEnumeratorにする。
yield return new WaitForSeconds(秒数);
これでその部分で秒数分止めることができる。

yield return null;
これでこのメソッドが終わりであることを宣言している。

実行の流れとしては、
1.Startが実行される。
まずupdateフラグをオフにする。
次にメッセージをコンソールに表示するメソッドを実行する
2.１のStartCoroutineによりShowMessageに入る。
まずGameStart!のメッセージがコンソールに表示される。
yield return new WaitForSeconds(3)
ここで一旦メソッド から抜けてその後の部分が実行される

3.2から3秒経過したらyield return new WaitForSeconds(3)より後の部分が勝手に実行される。
faucetのAccess Control Listsを試す

# 概要
[前回](https://qiita.com/hakua-doublemoon/items/7122e43dbce4a3a70aa7)の続きで、Faucetからパケットの流れを制御するAccess Control Lists（ACL）機能を使います。
具体的には、パケットの禁止・許可、action（output）の変更を行います。

# 詳細
## 環境構築
* まず、前回に加えて、host3(faucet-host3/veth-host3)とhost4(faucet-host4/veth-host4)のNETNSを追加します。例えば下記のような感じで。

```bash
> create_ns host3 192.168.0.3/24
> create_ns host4 192.168.0.4/24
```

* そしてovsのブリッジにもポートを追加します。

```bash
> sudo ovs-vsctl add-port br0 veth-host3 -- set interface veth-host3 ofport_request=3 \
              -- add-port br0 veth-host4 -- set interface veth-host4 ofport_request=4
```

## faucetにpingをブロックするACLを作る
* https://docs.faucet.nz/en/latest/tutorials/acls.html#id2 です。
* 環境がくるっていなければ、host1→host4のpingは通りますが、host1→host3のpingは通らないです

## [output](https://docs.faucet.nz/en/latest/tutorials/acls.html#output)
* mirrorの先にactionのoutputの説明
* 指定したフィールドを書き換えてパケットを送ったりできます。例ではmacアドレスを書き換えています。
    + また、output先のportの指定やvlan_idの指定なども例示されています
        + vlan_id付与時はフレームフォーマットがIEEE 802.1Qに変更されます

## [mirror](https://docs.faucet.nz/en/latest/tutorials/acls.html#mirroring)
* ポートを指定してそこにパケットをそのままミラーリングします。
* outputも同じですが、パケットの許可・禁止にかかわらずミラーリングは行われます。
* outputも同じですが、出力先に指定されたポート（例だとhost4）には通信できなくなります。
    + dump-flowsを見ると下記のような感じでした。

```bash:port指定前
> sudo ovs-ofctl dump-flows br0 | grep in_port=4
 cookie=0x5adc15c0, duration=26.211s, table=0, n_packets=5, n_bytes=378, idle_age=9, priority=20480,in_port=4 actions=resubmit(,1)
 cookie=0x5adc15c0, duration=26.211s, table=1, n_packets=5, n_bytes=378, idle_age=9, priority=9000,in_port=4,vlan_tci=0x0000/0x1fff actions=mod_vlan_vid:100,resubmit(,2)
 cookie=0x5adc15c0, duration=14.872s, table=2, n_packets=3, n_bytes=238, hard_timeout=278, idle_age=9, priority=8191,in_port=4,dl_vlan=100,dl_src=a6:fe:b8:79:3b:a0 actions=resubmit(,3)
```

```bash:port指定後
> sudo ovs-ofctl dump-flows br0 | grep in_port=4
 cookie=0x5adc15c0, duration=5.516s, table=1, n_packets=0, n_bytes=0, idle_age=5, priority=9099,in_port=4 actions=drop
```

# 感想
* faucetを使うとコントローラーを簡単に作れそうなことがわかりました
* ただfaucetとovsをごちゃごちゃいじってると時々ovsが期待と違う状態になったりするっぽい感じがしました。それともnetnsのせい？ よくわからん。
* ところでqiitaのopenflowの記事ってすごい少ないですね
JavaScript勉強の記録その18: 数値の操作ができるメソッドまとめ

#floorメソッド

```index.js
let avg = 7.3333;
console.log(Math.floor(avg)); //切り下げ

//=>7
```

#ceilメソッド

```index.js
let avg = 7.3333;
console.log(Math.ceil(avg)); //切り上げ

//=>8
```

#roundメソッド

```index.js
let avg = 7.3333;
console.log(Math.round(avg)); //四捨五入

//=>7
```

#toFixedメソッド

```index.js
let avg = 7.3333;
console.log(avg.toFixed(3)); //少数点第３位まで表示
//=>7.333
console.log(avg.toFixed(2)); //少数点第2位まで表示
//=>7.33
```

#randomメソッド

```index.js
let avg = 7.3333;
console.log(Math.random()); //0~1までのランダムの数値を生成

//=>0.49170194909693343
```
ラズベリーパイとESP32で温度管理システムの制作(3) 受信側 Pythonファイル

##仕様
#####ラズベリーパイに送信してきたESP32のデータをSQLiteに登録する
・起動時にUDP受信pythonファイルを実行
・ラズベリーパイにApacheをインストール・SQLiteを有効にする
・phpファイル作成。ブラウザで表示できるようにする

当方phpは習いたてなので、恐ろしくシンプルなものを作る予定です。

##ファイル構成
home/pi/
　　└SQLiteHTMLShow/
　　　　　├UDP_SQLite.py
　　　　　└ db/
　　　　　　　└data.db
	
##UDP受信→SQLite登録
UDP受信しSQLiteにデータを登録するpythonファイルを作ります。

```python　UDP_SQLite.py

# -*- coding: utf-8 -*-
import socket #UDP送信
import struct #数値→バイト列変換用
from contextlib import closing #with用

import sqlite3
import time
import datetime

import sys

UDP_IP = "" #このままでいい
UDP_PORT = 1234 #受信するポート番号
sock = socket.socket(socket.AF_INET, socket.SOCK_DGRAM) #ソケットの生成

sock.bind((UDP_IP, UDP_PORT)) #ソケットを登録する
#データベースを指定
dbname = '/home/pi/SQLiteHTMLShow/db/data.db'

with closing(sock): #プログラム終了時にソケットを自動的に閉じる
    
  while True: #無限ループ
    try:
      data, addr = sock.recvfrom(1024) #受信する
      
      #print ( data ) #バイト列をそのまま表示
      #print(addr[0]) #ipアドレスの表示
      #print(addr[1]) #送信元portの表示
      
      # データベース内のテーブルの名前
      ESP32 =addr[0].split('.')
      print('dbtable = ' + 'ip' + str(ESP32[2] + ESP32[3]))#IPアドレスの192.168以下をテーブル名にする
      dbtable = 'ip' + str(ESP32[2] + ESP32[3])
      
      # SQLiteへの接続    
      conn = sqlite3.connect(dbname)
      c = conn.cursor()
   
      # SQLiteにテーブルがあるかどうか確認する
      checkdb = conn.execute("SELECT * FROM sqlite_master WHERE type='table' and name='%s'" % dbtable)

      # もしテーブルがなかったら新規でテーブルを作成する
      if checkdb.fetchone() == None:
          create_table = '''create table ''' + dbtable + '''(id integer primary key autoincrement, time text,
                    ip text, port integer, temp text, humi text)'''
          print(create_table)

          c.execute(create_table)#実行
          conn.commit()

      # 温度、湿度、タイムスタンプを保存。
      sql = 'insert into ' + dbtable + '(time,ip,port,temp,humi) values (?,?,?,?,?)'
      
      todaydetail = datetime.datetime.today()
      time = todaydetail.strftime("%Y/%m/%d %H:%M:%S")
      ip = addr[0]
      port=addr[1]

      print(str(data))
      #まとめて送信しているデバイスNo、温度、湿度の文字列を分解
      val=str(data).replace('b','').replace("'",'').split(',')
      
      print(float(val[0]),float(val[1]))
      
      data= (time,ip,port,float(val[0]),float(val[1]))
      c.execute(sql, data)
      conn.commit()
      #接続を切る
      conn.close()
    except:
      print(sys.exc_info())
```


これでESP32で指定しているIPアドレスがそのままテーブル名になりSQLiteに登録されます。   

もしESP32のIPアドレスを1個1個別にした場合、別にしただけのテーブルが作られることになります。

私は何れ仕事で使用した時に会社のIPアドレスを広く占有するのもなんだと思いIPアドレスは1個で使用します。
JSer向け dart配列API

List関連の関数
https://api.dart.dev/stable/2.7.0/dart-core/List-class.html

## Array.prototype.slice()
start-endの配列を抽出

```dart
var testList = [1, 2, 3];
testList.sublist(0,2); // => [1, 2]
```

## Array.prototype.filter()
条件にあうものを抽出

```dart
var testList = [1, 2, 3];
testList.where((int item) => item >= 2).toList(); // => [2, 3]
```

## Array.prototype.map()
mapで値を変換して返す

```dart
var testList = [1, 2, 3];
testList.map((int item) => Text(item)).toList(); // => [Text("2"), Text("3")]
```


## Array.prototype.every()
全ての条件がtrue であれば true

```dart
var testList = [1, 2, 3];
testList.every((int item) => item >= 0); // => true
testList.every((int item) => item >= 2); // => false
```



## Array.prototype.some()
1つの条件がtrueであれば true

```dart
var testList = [1, 2, 3];

testList.any((item) => item >= 2); // => true
testList.any((item) => item >= 4); // => false
```
CentOS 8にPython 3.7をソースファイルからインストールする

## 必要なパッケージをインストール

```
sudo dnf groupinstall 'Development Tools'
```

```
sudo dnf install zlib-devel libffi-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-devel libuuid-devel xz-devel
```

これらのパッケージをインストールしておかないと、ビルドされたPythonで、使えない機能（SQLite等）が出てくる。

## ビルド、インストール

```
wget https://www.python.org/ftp/python/3.7.6/Python-3.7.6.tgz
tar -xzvf Python-3.7.6.tgz
cd Python-3.7.6
./configure --enable-optimizations
make
sudo make altinstall
```

# 参考
* https://blog.amedama.jp/entry/2018/08/25/134642
* https://hombre-nuevo.com/python/python0068/
TypeScript + Webpack でimport jpg

# 最終的なディレクトリ構成
```directory
/src
 ┗ component 
  ┗ page
 　 about.tsx
 ┗ img
　┗ page
   ┗ about
 　 about.jpg
 ┗ types
  import-jpg.d.ts
tsconfig.json
webpack.config.json
```

#普通に使う
```component.tsx
import image from '../../img/page/about/about.jpg'
```
>TS2307: Cannot find module '../../img/page/about/about.jpg'.

インポートエラーになる。
理由はjpgに関する型定義が存在しないため

# import errorを解消する
##ルートに追加の型定義ファイルの配置ディレクトリを追加
```
mkdir types
```
## 型定義ファイルimport-jpg.d.tsの作成
アンビエントモジュールとして、"*.jpg"を宣言。

```/types/import-jpg.d.ts
declare module "*.jpg"
```
### 型定義ファイルの読み取りをtsconfigに追加
```tsconfig.json
{
  "compilerOptions": {
    "typeRoots": [
      "node_modules/@types",
      "types"
    ],
  }, 
  "include": [
    "src/**/*",
    "types/**/*"
  ]
}
```
この時点でインポートエラーは解消する。

## ビルド向け定義


### jpgファイルをwebpack対象に追加
```webpack.config.json
// 他の項目は省略
    module: {
        rules: [
            {
                test: /\.(jpg|png)$/,
                loader: 'url-loader'
            }
        ]
   }
```
## 絶対パスにする
変更

```tsconfig.json
{
  "compilerOptions": {
        "baseUrl": "src",
  }
}
```

追記

```webpack.config.json
    resolve: {
        modules: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules')]
    }
```

## 最終系
src配下を絶対パスでインポート可能に。

```
import image from 'img/page/about/about.jpg'
```

# 参考URL
[TypeScript の paths はパスを解決してくれないので注意すべし！](https://www.agent-grow.com/self20percent/2019/03/11/typescript-paths-work-careful/)
[TypeScript 画像のインポート(英語)](https://github.com/Microsoft/TypeScript-React-Starter/issues/12)
[TypeScript2 + webpack2でのcss-loader, file-loader周辺をなんとかする
](https://qiita.com/terrierscript/items/56d2cc15f76df50dfee7)

# 困っていること
img/でインポートできるようになったが、
結局intellijのコンテンツアシストはフォルダまでしか効かない。

[一応、Ctrl+space2回で全ファイルアシストを起動して解決できるようです](
https://youtrack.jetbrains.com/issue/WEB-32138?_ga=2.9933437.99302832.1578892655-881592212.1565576031)
が、これでは相対パスで入るため、省略パスには対応できない。

intellijには、Alt + Enter で絶対パスへの変換機能があるが、これはOSレベルの絶対パスに直されているように見える。
Google スプレッドシートで TODAY(), NOW(), RAND() などの関数の更新頻度を設定する方法

Google スプレッドシートでは、デフォルトでは TODAY(), NOW(), RAND() などの関数はシート内の値を変更しないと再計算が行われません。

[メニュー]　→　[ファイル]　→　[スプレッドシートの設定...]
<img width="290" alt="SS 2019-04-28 at 9.50.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155587/efd5f9d1-22b3-23fc-cf7d-d5e0b9b5e505.png">

[変更時]、[変更時と毎分]、[変更時と毎時] から選べます。
<img width="734" alt="SS 2019-04-28 at 10.02.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155587/0d314ca5-7bc3-0bb0-0b6b-86611b1443b6.png">
HRTechするために会議情報を機械学習させる

## TL; DR

会議データを活用することでこんなものを作るための、学習モデルを作ります。
![membersearch-min.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109411/547c8be7-f844-703d-5992-a19800dea604.png)

なお、記事全体は[こちらです](https://qiita.com/boomin/items/973c035433b24ca4fb21)。

## 1. 前提

* [ここを読んでいる](https://boomin.yokohama/archives/1619)こと
* その上で、以下のデータを準備してあること
  * 形態素解析済の会議データ
      * filterred_mecabdata.pkl
  * メンバー詳細データ
      * memberdict.pkl
      * ただし、本記事ではこのファイルは使用しません

以下で使用するのは、国会議事録のデータを元にした会議データです。

## 2. 機械学習

各メンバに特徴的な文章と、各メンバ間の類似度を計算します。
何をもって文章間が類似していると判断するかはそれぞれ考えていただくとして、ここでは以下の2通りの方法で、類似度を評価することにします。

* TF-IDFスコアを用いる方法
* doc2vecを使う方法

ちょっと、そこあなた！
**TF-IDFは機械学習じゃない**って思ったでしょ！！

はいその通りです。でも巷の人はその違いは知らないので、結果が何となくいい感じなっていれば気付かれません。ので、

> 「AIが頑張りました！（にっこり）」

と言っておけば、ほぼ問題はないでしょう。AIのイメージなんて、人の数だけありますしね（ｷﾘｯ！

### 2.1 TF-IDFを用いた人物間の類似度算出

[こちらをご覧ください](https://boomin.yokohama/archives/1643)。
ちゃんscipyライブラリ使えば、大きくなりがちな疎行列でもストレスない速度で処理が終わります。


### 2.2 doc2vecで人物間の類似度算出

[こちらをご覧ください](https://boomin.yokohama/archives/1643)。
gensimパッケージを使えば、簡単に学習できます。

## 3. ネットワーク分析

[こちらをご覧ください](https://boomin.yokohama/archives/1643)。

Network Graphを作り、louvain法という手法を使ってNetowrk Graphから似たような発言の人同士でクラスタリングします。

可視化すると、こんな結果が得られます。

![path_to_fig.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109411/06c8db38-3acd-6034-d126-2d194f56cc6a.png)

このNetowrk GraphをJsonで記述すると、具体的な内容は以下のようになります。

```json
{
  "directed": false,
  "multigraph": false,
  "graph": {},
  "nodes": [
    {
      "size": 3,
      "cluster": 1,
      "id": "稲田朋美"
    },
    {
      "size": 54,
      "cluster": 3,
      "id": "麻生太郎"
    },
    {
      "size": 142,
      "cluster": 0,
      "id": "世耕弘成"
    },
    {
      "size": 39,
      "cluster": 4,
      "id": "塩崎恭久"
    },
    {
      "size": 30,
      "cluster": 1,
      "id": "高市早苗"
    },
    {
      "size": 95,
      "cluster": 1,
      "id": "安倍晋三"
    }
  ],
  "links": [
    {
      "weight": 0.5984722375869751,
      "source": "稲田朋美",
      "target": "世耕弘成"
    },
    {
      "weight": 0.9666371941566467,
      "source": "稲田朋美",
      "target": "安倍晋三"
    },
    {
      "weight": 0.48173508048057556,
      "source": "稲田朋美",
      "target": "塩崎恭久"
    },
    {
      "weight": 0.4896692633628845,
      "source": "稲田朋美",
      "target": "高市早苗"
    },
    {
      "weight": 0.7263149619102478,
      "source": "麻生太郎",
      "target": "世耕弘成"
    },
    {
      "weight": 0.6178034543991089,
      "source": "麻生太郎",
      "target": "安倍晋三"
    },
    {
      "weight": 0.46518972516059875,
      "source": "麻生太郎",
      "target": "塩崎恭久"
    },
    {
      "weight": 0.8961162567138672,
      "source": "世耕弘成",
      "target": "塩崎恭久"
    },
    {
      "weight": 1.2007122039794922,
      "source": "世耕弘成",
      "target": "安倍晋三"
    },
    {
      "weight": 0.945235550403595,
      "source": "世耕弘成",
      "target": "高市早苗"
    },
    {
      "weight": 0.9955565333366394,
      "source": "塩崎恭久",
      "target": "安倍晋三"
    },
    {
      "weight": 0.9067516922950745,
      "source": "塩崎恭久",
      "target": "高市早苗"
    },
    {
      "weight": 1.053189754486084,
      "source": "高市早苗",
      "target": "安倍晋三"
    }
  ]
}
```
【ふくだ学習録】はじめてのパターン認識を読んで part1【5日目】

# ふくだ学習録とは？
ふくだが学習したことの備忘録。
目に見える形で残すことによってやる気を出す個人的な作戦です。
他人に見せるように書いているわけではないので、すごく読みにくいです。

# はじめてのパターン認識を読んで

### 識別とは？
「何か」を判断すること。

### 特別抽出とは？
「有効な特徴」を抽出すること。

### 識別規則とは？
「有効な特徴」と「何か」を結びつける規則のこと。
入力データが所属する正しいクラスを同定するための規則。
識別規則を作成するには、入力データとそのクラスを対にしたたくさんの事例を使って、入力データとクラスの対応関係を学習する必要がある。

### 汎化能力とは？
学習データを用いて設計した当初は想定していなかった未知の入力データ（または単純に新しく追加された変数）に対して、正しいクラスを識別する能力のこと。

### パターン認識とは？
物事の類型を知るはたらき、およびその内容。

例えば、切符の券売機の場合、
投入された硬貨を観察し、重さやサイズなどの特徴量を測定する。（ここが**特徴抽出**）
その後、硬貨の透磁性や重さ、サイズ、穴の有無など、抽出された特徴を並べてベクトルの形にまとめる。（**特徴ベクトル**と呼ぶ）
その特徴ベクトルを用いて、入力された効果が10円か50円か100円か500円か偽物かの**クラス**に分類する。
この分類するための規則を識別規則という。

### パターン認識で重要なキー

切符の券売機の場合、硬貨が何かを短時間で識別できなければ大勢のお客さんを待たせることになるのと同じで、**識別に有効な特徴**をいかに早く**抽出**できるかがパターン認識の成否を決める鍵となる。
（正確さだけじゃなくて、速さも重要なのは意外だった！なるへそ！）

また識別規則を作成するには、入力データとそのクラスを対にしたたくさんの事例を使って、入力データとクラスの対応関係を学習する必要があるため（こういったデータを学習データと呼ぶ）、**識別規則の学習**が2つ目の鍵となる。

そして、設計時には学習パターンしかないが、その学習データを用いて、未知のデータが入力された時も精度よく正しいクラスに分類すること。つまり**汎化能力を推定すること**が、3つ目の鍵となる。



# 今日の一言
あんまり時間なくてパターン認識はだいぶ序盤までしかできなかった…
でも面白そうな分野やから、明日からしっかりと勉強していく！
AWS IAM について

AWSはサービスが豊富でぽちぽちと簡単に設定できてしまいますが、
１つ１つ理解していないと大変なことになるので拙いですが概要をまとめます。
間違ったこと書いてたらご指摘ください。

#IAMの概要

<p>IAMとは・・・Identity and Access Management。安全に操作を実施するための認証・認可の仕組み</p>

ユーザ・グループ・ポリシー・ロールと４つの主要トピックがある。

###ユーザ
⇨ルートユーザ：AWSアカウント作成時に作られるIDアカウント。全てのサービスにアクセスできるため、
**普段からこのルートユーザを使うことは非推奨となる。**神様みたいなアカウントなので気をつけましょう！！

⇨IAMユーザ：普段から使用されるであろうアカウント。アクセス権があるサービスのみ使用できる。
1アカウントで5000ユーザ、10のグループまでに所属することができる

###グループ
⇨IAMグループ：IAMユーザの集合体。学校のクラスみたいな！
複数のユーザに対してアクセス許可を設定でき、また管理することができる。
1アカウントで300グループまで作成可能


###ポリシー
⇨IAMポリシー：ユーザへのアクセス権限をJSON形式で設定できる。
ex)A君:EC2だけ Bグループ：EC2+S3にアクセスできる

・ユーザベース⇨アカウント自体に紐づけること
・リソースベース⇨紐付け先がS3バケットなどのAWSサービスに紐づけられること。
アカウントを超したアクセスが可能。

###ロール
⇨IAMロール：EC2やLambdaなどのAWSリソースに権限を付与できるもの。EC2とS3をアタッチできたりする。
ユーザやグループは人に紐付けされますが、ロールはリソースに紐付けされるイメージ。


これからもっと実際に手を動かしながら理解を深めていきます。

アソシエイト資格取得まで頑張ります。
繰り返し文

![hair_long_man_73,jpeg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563190/57470fa1-659a-6fbf-8dd9-cec0fa52a6e2.png)
　　　　　　　ザッキーさん
# 繰り返し文を学習して引っかかった部分
while true do
と
while i <==　do
の違いについて

## 全部 while true doではダメ？

ダメ。


●数の選別などには

while i <==　 □□　do
　　puts △△
　　i += 1
end
（有限の処理を行う場面をイメージ？）




●ユーザーの登録情報を表示する時などには

while true do
　　puts ("　○○　")
　　num = gets.to_i
   　　if num == 0
   　　　××　(users)
　　elsif num == 1
    　　　--　(users)
   　　elsif num == 2
　　　 ~~ (users)
  　　 else
     　　puts "無効"
end

（蓄積した情報を集約する場面をイメージ？）


### 終わり
[GitHub]リモートリポジトリの削除方法

# はじめに

この記事はGitHub超初心用にリモートリポジトリの削除方法についてまとめました。（私が少し迷子に。）

**「英語ばかりでどこを見たらいいか分かりづらい」**

といったような人が迷っていればそんな人用にと思い残しました。
画像付きで分かりやすくまとめて見ましたので参考にどうぞ。

## 削除手順
それでは早速書いていきます。
まず当然ですが、GitHubにログインしている状態を前提で書いていきます。（下の画像を参考に)

・水色で塗りつぶしているところは私のアカウント名です。ご自身のアカウント名が表示されているはずです。
・赤枠で囲まれている「**Repositories**」又は「**Your repositories**」をのどちらかをクリックしてください。
<img width="1280" alt="スクリーンショット 2020-01-13 15.14.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494944/2008072b-1469-f782-80aa-672eec481c13.png">

次に、また赤枠で囲まれているリポジトリ名をクリックしてください。
（注意）ここでクリックするものが削除するリポジトリになります。
<img width="1280" alt="スクリーンショット 2020-01-13 15.14.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494944/daac2f85-1b96-7d53-c52d-a54b8f8b3921.png">


次に、「**Settings**」タブを選択します。
「**Repository name**」に記載されているリポジトリが削除したいものであるか確認しましょう。確認後は一番下までスクロールします。

<img width="1101" alt="スクリーンショット 2020-01-13 15.15.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494944/3af2414e-941b-c622-9ccb-d9671e007b4e.png">

「**Danger Zone**」という項目があるはずです。
この一番下に「**Delete this repository**」をクリックしましょう。
<img width="765" alt="スクリーンショット 2020-01-13 15.15.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494944/c7de6279-b1e4-965c-532e-1a5aac9698fe.png">

入力欄に黄緑で囲んでいる文字をタイプしましょう。
※アカウント名/リポジトリ名となっていると思います。
そうすると、「** I understand the consequences, delete this repository**」がクリックできるようになります。
クリックするとリポジトリの削除作業は完了です。
<img width="442" alt="スクリーンショット 2020-01-13 15.16.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494944/5610de14-390d-79d7-6f66-19617edac22f.png">

## 最後に
作業完了後に、削除されているかを確認してみましょう。
最初に選択した「**Repositories**」又は「**Your repositories**」へ行き確認できます。
Raspberry Pi 4 ROS_melodic x11vnc 

#北陽電機 LX04 URGをRaspberry上のROSで動作
北陽さんのURGをラズパイ上のROSで動作させ，リモートアクセスにてURGのセンサ計測画面を確認する

#OS Ubuntu Mate 18
今回は　Raspberry Pi4 にUbuntu 18 Mateを入れてみた

- [参考ページ１：日本語](https://qiita.com/gushiFX/items/7df1545b4a22061e9473)
- [上記参考ページの元情報：英語](https://jamesachambers.com/raspberry-pi-4-ubuntu-server-desktop-18-04-3-image-unofficial/)

#ROS melodic　のインストール
以下を参考にした

- [ROS melodic:英語](https://roboticsbackend.com/install-ros-on-raspberry-pi-3/)


#vncサーバーの設定
ここでとてもトラブったが，結局 rvizをリーモートで確認できるvncサーバーはx11vncだった

- [最終的に行き着いた情報元：日本語](http://shgrune-sphiar.sblo.jp/article/184587190.html)


#北陽電機 URGの設定

- インストール

```
sudo apt install ros-melodic-urg-node
```

- 実行用 ｓｈ

```urg_start.sh
#!/bin/sh

echo "Setting urg"
sudo chmod 666 /dev/ttyACM0

roscore &

echo "roscore is starting."
sleep 10
echo "rosrun urg"
sllep 3

rosrun urg_node urg_node

echo "Setting up complite."
```

- rviz の実行

```
rviz rviz
```

#まとめ
当初行いたかったことはできたが，vrizがラズパイで動作し，それをネット越しでみるので，とても重い．．．
今度は，ROSが動作する別のPCからアクセスしてvrizをクライアント側でどうさせてみたい．
Laravel の環境構築でつまづいた

# はじめに
macOSでの話です。

[Laravel公式のインストールサイト(日本語訳)](https://readouble.com/laravel/5.7/ja/installation.html)通りに進んでいたが、

```
composer global require laravel/installer
```
の入力が上手くいかず、下記のエラーが出て数時間つまづいたので誰かの役に立ったらと思い書きます。


```
Your requirements could not be resolved to an installable set of packages.

Problem 1

Installation request for laravel/installer ^2.1 -> satisfiable by laravel/installer[v2.1.0].
laravel/installer v2.1.0 requires ext-zip * -> the requested PHP extension zip is missing from your system.
```

##どのようにエラーを取ったか
[同じ症状で悩んでいる人が teratail](https://teratail.com/questions/217152)にいたので質問していたのでその回答通りにやってみました。(pecl install zip は peclコマンドが使えなかったのでスルーした。)



brew で phpを入れるのは、https://laracasts.com/series/laravel-6-from-scratch/episodes/1 の動画サイトを1~3まで見ればわかります。



[同じ症状で悩んでいる人](https://teratail.com/questions/217152)書いてくれている

```
brew link php
```

を実行する。


そうすると、

```
Linking /usr/local/Cellar/php/7.4.1... 
Error: Could not symlink bin/pear
Target /usr/local/bin/pear
already exists. You may want to remove it:
  rm '/usr/local/bin/pear'

To force the link and overwrite all conflicting files:
  brew link --overwrite php

To list all files that would be deleted:
  brew link --overwrite --dry-run php

```


というエラーが出てくるので

```
 brew link --overwrite php
```
を実行、そして再起動して```composer global require laravel/installer
```を実行して完了です。





###補足

・・・composerのダウンロード
https://kohkimakimoto.github.io/getcomposer.org_doc_jp/doc/00-intro.html
これを手順に


composerの使い方。composer.jsonやcomposer.pharを使わなきゃいけなくなった時このサイトを勝つよすると良い。https://laboradian.com/php-composer/
PHPを勉強したのでフィボナッチ数列を求めるコードを書いてみた

初投稿です。

プログラミング学習を始めてある程度時間が経って簡易的なCRUD機能アプリは作ってみたのですが、四則演算等アルゴリズム的なのはあまり使用しなかったので腕試しの意味も込めやってみました。



#フィボナッチ数列



フィボナッチ数列とは下記の数列のように今の項と前項の和が次の項となるような数列です。

1 1 2 3 5 8 13 21 34 55 89 144 ・・・・N

第一項の値1と第二項の値1の和が第三項の値2になっています。
以降これの繰り返しを行う数列のことです。


式で表すと

第N項の値　+　第N+1項の値　=　第N+2項の値

こんな感じです。

中学入試や大学入試でよく見るやつです。
(漸化式懐かしい)



#実際にPHPで書いてみる

```php
<?php
function fibonacci($n) {
  $num_list = [1, 1];

  if($n > 2){
    for($i = 2; $i <= $n - 1; $i++){
      $num_list[] = $num_list[$i - 1] + $num_list[$i - 2];
    }
  }
  return $num_list[$n - 1];
}
echo fibonacci(); // 引数は任意の数
```

<!--![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354333/5f8fb2d3-3b08-c635-c8be-14c387154f57.png)-->

#書いてみて

色々復習になった。
こういった問題でアウトップット必要ですね。
rgbaの値が正しく反映しないときの確認方法

未経験からプログラミング学習をしている方に向けての記事です。
vue.jsでモーダルウインドウを作成した際、rgbaでalphaを0.5に設定しているのに、背景が透明にならない時があったため、同じように悩んでいる場合どのように解決すれば良いかまとめておきます。

#確認方法
①rgbaがちゃんと適用されていることはデベロッパーツールで確認できているか？
②デベロッパツールでちゃんと適用されていない場合には、デベロッパーツール上でrgbaを指定してみて、改善されるか試してみてください
③デベロッパツールでちゃんと適用されている場合には、デベロッパーツール上でrgbaの指定を外してみて、どのように表示が変わるかを試してみましょう。

#自走できるエンジニアを目指して
メンターからは
>「答え」ではなく、「答えまでたどり着く方法」を学ぶ

とよく言われます。
未経験からプログラミングを学習されてる方は、時間に追われてついつい答えを求めがちですが（自分自身）、このことを念頭に質問すると良いと思います。
JavaScript勉強の記録その17: joinとsplitを使った配列の操作

#joinメソッド
joinというメソッドを利用することで、配列の要素を繋げて、１つの文字列として値を返すことができます。

以下の例ではjoinメソッドを利用して日付のようなデータを作成しています。
引数に渡した値で、異なる文字列が返ってきているのがわかるかと思います。

```index.js
const d = [2020, 1, 13];
console.log(d.join('/'));
//=> 2020/1/13
console.log(d.join(''));
//=> 2020113
console.log(d.join());
//=> 2020,1,13
```
#splitメソッド
splitというメソッドを利用することで、文字列を分割し、配列を作成することができます。
joinとは反対に、文字列から配列を作るメソッドです。

以下の例ではsplitメソッドを利用して文字列を分割し、配列を作っています。
引数に渡した値で文字列を区切り、新しく配列を返しています。

```index.js
const t = '20:05:30';
console.log(t.split(':'));
//=>["20", "05", "30"]
```

splitメソッドを利用して、ことなる変数または定数に分割代入することもできます。

```index.js
const t = '20:05:30';
const [hour, minute, second] = t.split(':'); 
console.log(hour)
//=> "20"
```
Google Coralチームがブログ投稿： 2020年の新しいサンゴ製品

ますます多くの業界がローカルAIの価値を認識し始めています。ローカルAIの速度により、帯域幅とクラウドコンピューティングのコストを大幅に節約でき、データをローカルに保持するとユーザーのプライバシーが保護されます。
昨年、ハードウェアコンポーネントとソフトウェアツールのプラットフォームであるCoralを立ち上げ、ローカルAI製品のプロトタイプ作成とスケーリングを容易にしました。当社の製品ポートフォリオには、Coral Dev Board、USB Accelerator、およびPCIe Acceleratorsが含まれ、これらはすべて36か国で利用できます。

リリース以来、ヘルスケアから農業、スマートシティに至るまで、幅広い業界でコーラル上にすでに構築されている多様なアプリケーションに興奮しています。そして、2020年には、可能性をさらに広げるCoralプラットフォームへの新しい追加を発表できることを楽しみにしています。

まずはCoral Accelerator Moduleです。これは、Edge TPU ASICをカプセル化する統合が容易なマルチチップパッケージです。このモジュールは、PCIeとUSBの両方のインターフェースを公開し、カスタムPCB設計に簡単に統合できます。村田製作所と緊密に協力してモジュールを製作しており、CES 2020でCP-18セントラルプラザのテックイーストにあるラスベガスコンベンションセンターのブースにアクセスしてデモを見ることができます。 Coral Acceleratorモジュールは、2020年の前半に利用可能になります。

![coralboard.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/aa84d95d-e0c5-0574-9e15-91f52cee911e.jpeg)

次に、Coral Dev Board Miniを発表します。これは、Coral Dev Boardに代わる、より小さなフォームファクター、低電力、低コストの代替品を提供します。 Miniは、新しいCoral AcceleratorモジュールとMediaTek 8167s SoCを組み合わせて、720Pビデオエンコード/デコードおよびコンピュータービジョンのユースケースに優れたボードを作成します。CoralDev Board Miniは、2020年前半に利用可能になります。

また、Coral System-on-Moduleの新しいバリエーションも提供しており、元の1GB LPDDR4構成に加えて2GBおよび4GB LPDDR4 RAMを使用できます。スマートシティ、製造、およびヘルスケアアプリケーションでのSoMの使用方法、およびCES 2020のNXPチームとパビリオンで取り組んでいる新しいSoCおよびMCUの調査を紹介します。ラスベガスコンベンションセンター、テックイースト、セントラルプラザ、CP-18。

![微信截图_20200108165537.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/a8fba002-3b8f-f165-0529-cf737e08ed7e.png)

![微信截图_20200108164700.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/48e6215b-81b8-8193-4b29-29ef275c81ba.png)


最後に、Asusは、Tinker Edge T製品のベースとしてCoral SOMを選択しました。TinkerEdge T製品は、豊富なI / Oインターフェイス、複数のカメラコネクタ、プログラマブルLED、および色分けされたGPIOヘッダーを備えた、メーカーフレンドリーなシングルボードコンピューターです。 Tinker Edge Tボードはまもなく利用可能になります。詳細は、Asusから入手できます。

Google Coral Edge TPUのハードウェア製品は、その官方海外の代理店であるGravitylinkに掲載されています： https://store.gravitylink.com/global/
![微信截图_20200108170611.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/448511/1c91ac72-82aa-82e2-5fab-691bfbe63d88.png)