OmniAICreator/Qiita-1.07M huggingface dataset:
Chromeでの「応答時間が長すぎます」エラーにハマった時は.....

##概要
メルカリのクローンサイトを作成する際にインフラ、デプロイ関係の担当をした者が沼にハマった部分を共有し、同じような状態から抜け出すための一助になればと思ったことが投稿するきっかけになります。
今回は、デプロイ完了後にIPアドレスでブラウザ（Chrome)からログインしようとしても「応答時間が長すぎます」エラーが頻発した際に、原因となった箇所について述べていきます。
AWSなどインフラ関係において、同じような状況で困っている方の一助に少しでもなれたら幸いです。

## 環境
- Rails v5.2.3
- Ruby v2.5.1
- Unicorn
- capistrano
- nginx
- mysql 
- AWS, EC2(本番環境)

## ①まずはじめにセキュリティグループとは
今回、メルカリのクローンサイトを作成する際に用いたインフラ環境はAWS、EC2です。
その設定の中で、セキュリティーグループについて何点か調べて理解した箇所があるので、少しまとめてみようと思います。

1. ファイアーウォール機能として挙動する。
2. インスタンスごとに１つ以上のセキュリティーグループを指定できる。
3. インスタンスに関連したトラフィックを判断する機能を持つ。

＊　ファイアーウォールとは...
> ファイアウォールとは防火壁のことだが、コンピュータネットワーク関連では、ネットワークの結節点となる場所に設けて、コンピュータセキュリティ上の理由、あるいはその他の理由により「通過させてはいけない通信」を阻止するシステムを指す。通過させてはいけない通信を火にたとえている。ルーターにその機能を実装したものは、そのルーターを指して言うこともあるし、そういったアプライアンス商品などもある。

参照: https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%82%A2%E3%82%A6%E3%82%A9%E3%83%BC%E3%83%AB

上記でつらつらと述べましたが、簡単にまとめるならば
**不正なアクセス、悪意ある攻撃を防ぐ機能**です。
また、トラフィック（転送されるデータ量）も管理しているみたいです。

## ②config.force_ssl = true を有効にしていたのが原因
私が直面した「応答時間が長すぎます」エラーの理由としては、テーマにある通りconfig.force_ssl = true のコメントアウトを外していたことが原因でした。
では、まずconfig.force_ssl = true とはどういう機能を表すのでしょうか...

それは一言、**全てのIPアドレスへのアクセスをhttpsに流す設定**です。

はい。この設定の影響によって、上記で述べたセキュリティーグループをhttpでポート範囲設定しているのに常にhttpsとしてアクセスを流すために長々とアドレスには入れず、「応答時間が長すぎます」エラーが発生していたのです。

セキュリティーグループをhttpsで設定していればまだしも、httpだとこの機能を使っていれば入れるわけがなかったですね...

## 終わりに
今回の箇所で沼にハマって得た教訓としては、理解していない、なんとなく使っているコマンドほど要注意です。
当たり前ですが、なんとなく使って上手くいった経験がある人ほど要注意かなと...(自分もそうでした。)
ではまた沼った経験をまとめたいと思います。
長々と読んで頂きありがとうございました。
第2回 IoTシステム技術検定(上級)を受験しました

##IoTシステム技術検定(上級)とは？
[公式ページ](http://www.mcpc-jp.org/iotkentei/kentei_msg_jyokyu/index.html)の内容が非常によくまとまっているため参照ください.

【特記1】 受験料が55,000円 ※条件によっては33,000円
【特記2】 1.5日の講習と0.5日の試験の受講が必要
【特記3】 回答は論述形式
【特記4】 受験資格は中級合格者 ※一部例外もあるが、基本的には中級合格が必要

##検定スケジュール
2019/11/29〜30

###1日目(2019/11/29)
|時間|実施内容|
|----|----|
|9:20〜9:30|オリエンテーション|
|9:30〜10:20|IoTビジネスモデル設計 基礎編|
|10:20〜10:30|休憩|
|10:30〜12:30|IoTビジネスモデル設計 実務編|
|12:30〜13:30|昼休み|
|13:30〜15:00|IoTのセキュリティ|
|15:00〜15:15|休憩|
|15:15〜17:00|AI活用による IoTアプリケーション|

###2日目(2019/11/30)
|時間|実施内容|
|----|----|
|10:00〜11:30|IoT、5Gに関する最新技術動向|
|11:30〜12:30|昼休み|
|12:30〜13:00|試験準備と説明|
|13:00〜16:00|論述式試験|

【特記1】 昼休みは美味しいお弁当が出ました (コミュ力さえあれば他社交流もできます)

##講習について (1.5日)
バラエティに飛んだ講師(企業のC*Oがつく皆様、MCPCの方、大学教授の方など...)より2〜3時間のテーマについての講習を受けます。
時折、受講者参加型の演習もあり学生の気分を思い出しました。

##試験について (0.5日)
[公式ページ(IoTをベースにしたシステム例)](http://www.mcpc-jp.org/iotkentei/kentei_msg_jyokyu/index.html#L08)記載の通り10分野から3分野テーマが与えられます(各テーマ10行ぐらい、もう少し深堀りした内容を与えられる)
上記踏まえ下記の4設問に回答する (1問あたり350〜600文字程度)

・本当の顧客は誰か（A社など、仮名にて具体的な業種と業務内容等）
・顧客が抱えている課題
・技術的な訴求点（技術活用は課題解決にどのように貢献するのか）
・ビジネス上の創出価値は何か

##勉強時間
0時間
日々の業務がIoTに関わる業務ということもあり、中級試験(2019/7)以降は勉強をしませんでした。

##やっておけばよかったこと
・[公式ページ(IoTをベースにしたシステム例)](http://www.mcpc-jp.org/iotkentei/kentei_msg_jyokyu/index.html#L08)にある10分野それぞれに対し、実際の企業が行っているIoT実践例などをググったりしてインプットしておけばよかった
・IoTに関する用語の引き出しが開かなくなっていたので中級のテキストを事前に再読すべきだった

##結果
2020年1月に追記
UiPathの既存アクティビティで出来ない事を〇〇で実現

##はじめに
UiPathは既存アクティビティでも多くの事ができますが、既存アクティビティで出来ない操作をしたい場合、あるモノを読むことで実現できたりします。UiPathをもっと有効活用したいのであればこれを読むことでより深いことができます。この記事は既存のアクティビティで出来ない事をするために僕が行っている事を具体例で説明しています。説明に不明点があれば是非コメントいただければと思います。

##UiPathのアクティビティで出来ない事、メールの添付ファイル名の取得
僕の知る限り、UiPathにはメールに添付されているファイルをダウンロードすることはできても、直接その名前を取得するアクティビティはありません。もしかしたらあるかもしれませんがないという体で話を進めさせていただきます。
そのような通常はできないことも、「マイクロソフトの.NETの仕様書を読むこと」で実現できます。

##マイクロソフトの.NETの仕様書とは？
https://docs.microsoft.com/ja-jp/dotnet/api/?view=netframework-4.8
このページの事です。
UiPathで使われる型は基本的には全て.NETの型になります。
なので.NETの仕様書を読むことでほしいデータを欲しい形に加工する方法を学んだり、
メール型から好きな情報を取り出す方法を学ぶ事ができます。
仕様書は基本的には今関心がある型の詳しい情報を調べるために読みます。

##仕様書を読み、既存アクティビティで出来ない事をする
今回やることはメールの添付ファイル名の取得ですが、そのためにまずはGet Mail Activityで取得されるデータの型を確認します。
下記の画像の通り、取得される型はMail Message型のListです。
![Object Type.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318415/f6a33d96-ec9d-188b-e64f-676d5b6e3215.png)

Listというのは基本的には配列と同じものです。配列の定義は下記をよければ参考にしてください。
https://wa3.i-3-i.info/word11924.html

ちなみにList, Array、Collectionと呼ばれるものは全てFor Eachアクティビティで一つずつ取り出す事ができます。For Eachアクティビティを使用する場合格納されているデータの型をちゃんと確認し、For Eachアクティビティで定義する必要があります。

先ほどGet Mailアクティビティで取得される型はMailMessage型であることが分かったのでその仕様を調べます。
先ほど紹介したページからも、もちろん探せますが
Googleで「.net クラス名」で検索しても出てきます。
今回は「.net mailmessage」で調べました。
下記ページが見つかりました。
https://docs.microsoft.com/en-us/dotnet/api/system.net.mail.mailmessage?view=netframework-4.8
もし英語のページが表示されてしまった場合は日本語化できます。一番下までスクロールし English(United States)をクリックします。その後、日本語を選択してください。ページが日本になりましたね。
![Language.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318415/b51edcb6-d54b-372b-9b5d-d086d81c6083.png)

このページをctrl+fでページ内検索をし、「添付ファイル」で検索すると添付ファイルを扱うプロパティ、Attachmentsがあることがわかります。
AttachmentsをクリックするとAttachmentsの正体はAttachmentCollectionクラスであることがわかります。
https://docs.microsoft.com/ja-jp/dotnet/api/system.net.mail.attachmentcollection?view=netframework-4.8
Collectionなのはわかりますが、なんのCollectionなのか確認する必要があります。
名前から推測する限りはAttachmentのCollectionですが、断言できないので、サンプルコードを確認するとAttachmentをこの型に格納しているので、Collectionの一つ一つがAttachmentであるとわかります。
Attachmentの定義は下記になります。左側のスクロールバーですぐ近くにありました。
https://docs.microsoft.com/ja-jp/dotnet/api/system.net.mail.attachment?view=netframework-4.8
このドキュメントを読むと、AttachmentのNameプロパティにファイル名が入っていることがわかります。これで必要な情報が揃いました。

##各メールの添付ファイルのファイル名を取得するUiPathワークフロー
各メールの添付ファイル名を取得するには
まずMailMessage型のリストからMailMessage型を一つずつ取り出し、
MailMessage.Attachmentsを使いAttachment型を一つずつ取り出し、
そのAttachment.Nameプロパティ（String型)からファイル名を取得する必要があります。
一つずつ取り出すのはFor Eachアクティビティで取り出せます。
これを実際に実装したUiPathプロジェクトをGitHubにアップロードしたので、よければ参照してください。
https://github.com/YoshiAkiyama/AttachmentFileNameGetter
ちなみに「MailMessage」型は複数あります。正解がどれか確認するには
 - Get MailアクティビティのOutputを定義するときctrl+kで型を自動定義し
 - Variablesパネルで型の部分にマウスオーバー
してください。
![MailMessage型.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318415/c5fe64fb-d809-ef24-95db-3b238460414c.png)

##最後に
マイクロソフトの公式ドキュメントを読むという発想がなかった人、
また、発想はあったけれども、やり方を知らなかった人にとってこの記事が助けになれば幸いです。
pyaudioをgithub Repositoryから直でinstallするメモ

#前提条件
git install済み
http/https通信が可能なインターネット環境
linuxを想定(macでもいけそう）
pip3等のpython環境構築済み

#コマンド

```
 pip install git+https://github.com/jleb/pyaudio.git
```

pipから直接うまく行かないときに試すと良さそげなのでメモとして残す.
FILEベースCMS GRAVのインストール（Docker）

## この記事の目的
FILEベースCMS GRAVのインストール方法を記載しています。

今回は CentOS7 上の Docker 環境下に GRAV を入れて立ち上げてみます。

手順としてコンテナをビルドするところから実施する手順としました。理由は後述。

## 前提事項
以下の環境で実施しました。

ホストOS: CentOS7 7.7.1908 (Core)
Docker: 1.13.1

## セットアップ

### 準備

Dockerfile 他のファイルを置くディレクトリを作成しておきます。

```
mkdir -p /home/vm/docker-grav
```

### git clone

`git clone` コマンドで関連するファイルをダウンロード

今回は admin 画面も利用するので、`Dockerfile.gravcoreadmin`ファイルを利用します。

```
cd /home/vm/docker-grav
git clone https://github.com/dsavell/docker-grav.git .

cp -p Dockerfile.gravcoreadmin Dockerfile
```

### コンテナのビルド

Docker コマンドでビルドを実施します。

```
docker build -t local/docker-grav:1.0 .
```

できたらイメージを確認します。

```
docker images
```

### 保存ディレクトリの作成

コンテンツを保存するフォルダやキャッシュ関連のフォルダを作成しておきます。

```
mkdir -p /home/vm/docker-grav/user
mkdir -p /home/vm/docker-grav/backup
mkdir -p /home/vm/docker-grav/cache
```



### コンテナ実行

引数を渡してコンテナを実行します。
今回はローカルポート 9080 にバインドして起動しました。

```
docker run -d -p 9080:80 -v /home/vm/docker-grav/cache:/var/www/grav/cache -v /home/vm/docker-grav/backup:/var/www/grav/backup -v /home/vm/docker-grav/user:/var/www/grav/user local/docker-grav:1.0
```

確認

```
# docker ps
CONTAINER ID        IMAGE                   COMMAND             CREATED              STATUS              PORTS                           NAMES
9efae32cddc5        local/docker-grav:1.0   "/init-admin"       About a minute ago   Up About a minute   443/tcp, 0.0.0.0:9080->80/tcp   trusting_ritchie
```

## 使い方

ブラウザを起動してポート9080 でアクセスします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141148/bb984c6e-d2a6-8ede-1f29-cd060293e817.png)


## 終わりに

設定で各種プラグインやテーマを選択していくと、いくつかのPHPモジュールが必要となることがあります。今回も mbstring が足りず起動できなくなりました。その際には Dockerfile に php-mbstring を追加してビルドからやり直す必要があります。

GRAVはまだ活発に更新されているので、ちょくちょくと修正が入ります。

`dsavell` さんの `Docker Hub` も登録されているのですが、GRAVを更新すると動かなくなったりします。

現にこの記事を作成するにあたって、ほかの方の記事も参考にしたのですが、変更がありそのままでは動かなかったりするため、自分で Dockerfile を修正してビルドする手順に落ち着きました。


## 参考記事

https://github.com/dsavell/docker-grav

https://qiita.com/bremen/items/2d920a96701748673234
Flaskアプリケーションの環境構築と構成（Application Factory）

この記事ではFlaskウェブアプリの環境構築の手順とアプリ構成を説明します。
Application FactoryはFlaskアプリの一般的な構成方法を指します。

主に以下の記事を参考にしました。
https://hackersandslackers.com/demystifying-flask-application-factory/

### パッケージのインストール
まず、Pythonの仮想環境virtualenvを立ち上げます。
仮想環境は複数プロジェクト間のパッケージ依存を避けるためには欠かせないものです。
以下のコマンドでvenvという仮想環境のディレクトリを作り、たちあげます。

次に、pipを使ってパッケージをインストールしていきます。
取り合えずflaskとflask_corsをインストール。
インストールしたパッケージの詳細はrequirements.txtに記しておくと便利です。

``` 
$ py-3 -m venv venv
$ venv\Scripts\activate　# このコマンドはOSによって異なります。上記はWindowsコマンド
(venv) $ pip install flask
(venv) $ pip install flask_cors
(venv) $ pip freeze > requirements.txt
```

### アプリ作成・設定

次に、Applicationディレクトリを作ってその中に、__init__.pyを作ります。
このファイルにはアプリを作成する関数を書きます。
アプリの設定や初期ページ、CORSの設定などを行っています。

``` application/__init__.py
from flask import flask, flask_cors

def create_app():
    # アプリのインスタンス
    app = Flask(__name__, template_folder="templates", static_folder="static")
    app.config.from_object('config.configObject')

    CORS(app, resources={r'/*': {'origins': '*'}})
    
    # 初期ページの設定
    @app.route('/')
    def hello_world():
        return "Hello World"

   return app
```
次に、アプリ設定をみていきましょう。
ファイルをプロジェクトディレクトリ直下にconfig.pyを作ります。

Configファイルに、オブジェクトを作り、アプリ設定要項を加えます。
例えばデータベースURLやシークレットキーなどなど...
各要項は環境変数ファイルから取り出すようにしました。

ひとまずウェブアプリに必要不可欠なDBのURIとセッションのシークレットキーを追加します。
こういう書き方をすると環境変数によって開発configとプロダクションconfigを使い分けることができて便利です。

```config.py
import os

class Config:
   SECRET_KEY = os.environ.get('SECRET_KEY')

class ProdConfig(Config):
   DATABASE_URI = os.environ.get('PROD_DATABASE_URI')

class DevConfig(Config):
   DATABASE_URI = os.environ.get('DEV_DATABASE_URI')

if os.environ.get('FLASK_ENV') == 'production':
   configObject = ProdConfig
else:
   configObject = DevObject

```
上記のconfigObjectは__init__.pyで使われています。

### サーバー立ち上げ

それでは、実際にサーバーを走らせるファイルをみていきましょう。
アプリ作成の関数を呼び、走らせる。これだけです。

``` wsgi.py
from application import create_app

app = create_app()

if __name__ == "__main__":
   app.run()
```

最後にプロジェクトディレクトリ内に環境変数ファイルを作って

``` ..flaskenv
FLASK_APP = "wsgi"
FLASK_ENV = "development"

SECRET_KEY = ""
DEV_DATABASE_URI = ""
PROD_DATABASE_URI = ""
```

ターミナルで以下のコマンドを打ったら...

```
$ flask run
 * Serving Flask app "wsgi" (lazy loading)
 * Environment: development
 * Debug mode: on
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 265-303-162
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
```
サーバーが立ち上がりました♪

早速localhost開いてみます。私の場合はlocalhost:5000/です。
ターミナルが案内するポートに移動しましょう。
Hello world!と出たらOKです！

###プロジェクト構成
この段階でのプロジェクト構成はこんな感じです。

```
flask_jinja_app/
|- venv
|- application
   __init__.py
config.py
wsgi.py
requirements.txt
.flaskenv
```

###最後に
アプリのサーバーサイドが整ってきました。
あとはDBの設定、Blueprintの登録と共通テンプレートページの作成をしたら基本的なウェブアプリの骨組みが完成します。

残りはまた別の記事で。文章力がなくて申し訳ありませんでした。－_－
クラウドIDE PizzaFactory/Camino で leJOS をビルドするには。

(Advent calendar への参加表明が今年はスローペースのようなので、埋草記事)

筆者、ET ロボコンから遠ざかって久しいですが、leJOS 自身は汎用のランタイムなので、現在の ET ロボコンでも使えるものと思います。

本稿でお伝えできることは、タイトルのとおりです。具体的な手順は [CodeLabs を用意しています](https://lezione.pizzafactory.jp/building-lejos/#0)ので、そちらをご参照ください。

本稿では、CodeLabs には示していない補足事項をいくつか記します。

クラウド IDE としての PizzaFactory/Camino には、[サブスクリプション版(Tavola)と無償版(Banco)があります](https://cassiere.pizzafactory.jp/#/ja/camino)。最大の差はストレージの種類です。Banco 版は、CIFS を使ったリモートストレージなので、ビルドなどするとその遅さがはっきりと判ります。とはいえ、leJOS のサンプルをビルドする程度なら、我慢できる範囲かなとも思います。ソースコードを編集する程度なら全く問題ありません。

無料の Banco エディションでもユーザ登録が必要です。 https://che-banco.camino.pizzafactory.jp/ から行ってください。登録が完了した後は、この URL で認証すると Eclipse/Che のダッシュボードへリダイレクトされます。

PizzaFactory/Camino を用いてできるのはビルドまでです。ターゲットへの転送手段はローカルの環境で何か手当する必要があります。

PizzaFactory/Camino は、基盤として Eclipse/Che を使っています。なので、上手いことやると https://che.openshift.io/ のような他の Eclipse/Che ホスティング・サービスや、お手元に建てた Che インスタンスの上でも leJOS の開発を行えます。

今年の "TOPPERS活用アイデア・アプリケーション開発コンテスト" の活用アイデア部門の金賞は Eclipse/Che の利用だったようですし、そろそろ組み込み領域でもクラウドIDEの利用が増えていくのかなと思ったりしています。ご興味のある方はお試しください。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">第9回TOPPERS活用アイデア・アプリケーション開発コンテスト-活用アイデア部門金賞は「クラウドIDEとエミュレータを利用した実機レス開発環境」庭野 正義（アイコムシステック株式会社）でした。おめでとうございます。<a href="https://t.co/dcjADQX6np">https://t.co/dcjADQX6np</a></p>&mdash; TOPPERS Projects (@ToppersJP) <a href="https://twitter.com/ToppersJP/status/1196336930440368128?ref_src=twsrc%5Etfw">November 18, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
AzureってAWSとなにが違うの？

この投稿は、[品川アドベントカレンダー2019](https://qiita.com/advent-calendar/2019/shinagawa)１日目です。

最近Azureユーザも増えてきましたが、まだまだAWSのほうが多いと思うので実際にAzureを２年程使ってきて感じた違いまとめ。

##雰囲気的な違い
Azureのほうがパッと見初心者に優しい。
ボタンをぽちぽちクリックしていくだけでデフォルト値ですべて設定されていき、なんとなく使えてる気になれる。
ただ、ワンクリックで簡単構築！と思ったらハードディスクが勝手にプレミアムプランになってるじゃん！？なんてことも。

AWSはエンジニア向け雰囲気をどことなく感じる。
できるだけ細かいとこまでいじれるようになっていて、
わかってる人には痒いとこにも手が届くが、その分覚えることも多い。

### 管理ポータルの違い
Azureポータルはとにかく動作が重い。。
ページ遷移するたびに画面がローディング中になっていらいら。社内の端末が貧弱だと画面を表示するのに1分近くかかることもあったり。。

AWSは動作はサクサク。
ただ設定項目多すぎてわけわからなくなることも多い。

管理ポータルの見た目が突然変わって戸惑う、という経験は両者一緒ですが、Azureのほうが後発なせいかUIの変更が激しいです。

### AWS LambdaとAzure Functions
流行りのサーバレスアーキテクチャですが、この２つ全然違います（速度が）
AzureのFunctionsは普通に使うと、コールドスタートからのスピンアップ時間が劇遅なので、応答10秒以上かかることもざら。かなり用途を選びます。
サーバレスと言いつつ、裏側のサーバの動きをすごい意識させられる。。


これに関しては、Lambda最高！

### 権限管理
MSの権限管理はWindowsもそうですが無駄に細かい。
Azureも権限の設定がすごい細かく設定できるようになっているけど正直使いこなせる気がしない。社内の権限規定が細かく決まっていてそれに合わせたい場合は便利なのかも。

AWSの権限はIAM周りに集約されているのでわかりやすくて個人的には好きです。

### 課金単位の違い
プロジェクトごとに料金請求を分けたい場合は、Azureのほうが便利です。
１企業アカウントに対して複数サブスクリプションが用意できて、サブスクリプション単位での課金ができます。

AWSで料金請求を分けたい場合は、アカウントごと増やさないといけないので不便。

## Azureのよいところ
なんだかAzureディスが多くなってしまったので、良いところも書きます。
ええ、もちろんよいところもいろいろあります。

###ActiveDirectoryとの連携
社内のユーザ管理がADの場合、クラウドのアカウントも同一ADでSSOできるので便利。
システムでユーザ管理をしないと行けない場合も、各種サービスがAD認証と連携できるように作られているので、AWSで作るのに比べて簡単に感じました。

### Office365との相性の良さ
当たり前といえば当たり前ですが、MS製品との相性はAWSより良いです。
なにかシステム化しようと思った時に、現場はExcelでデータを持っていたりすることが多いと思うので、クラウドとその辺のデータの連携がしやすいのは大きなメリット。

### AzureDevOpsが便利
タスク管理やGitリポジトリ、CI/CD等、開発に必要なものが全部入りで提供されいて、Azureと連携することを前提に作られているのでかなり便利です。
自前で全部用意する手間を考えると、プロジェクト立ち上げがかなり早くなります。

## まとめ
ここ1、2年でAzureもだいぶ進化してきているので、昔触ったけど微妙だったという人はもう一度トライしてみてはいかがでしょうか。
Pleiadesの PyDevでpipがうまく動かない

Python3開発ではEclipse 2019-09 (Pleiades All in One Eclipse) に初期導入されているPyDevをよく利用しています。PyDevではpipによるライブラリの管理やインストールができるのですが、Pleiadesの初期状態だとうまくうごかない場合があります。

具体的な症状としては「ウィンドウ(W) > 設定(P) > PyDev > インタープリーター > Pythonインタープリーター > Manage with pip」の「Command to execute(X)」に任意のコマンドを入力、「実行(R)」を押下すると、すぐに「FINISHED」と表示されるが、実際には何も起きないというものです。たとえば「install numpy」を実行しても「numpy」はインストールされず、当然開発作業もできません。

いろいろ調べてみた結果、Pleiadesが利用しているPythonにpipが正しくインストールされていないようです。そこで、pipをインストールしなおしたところ、PyDevからpipが操作できるようになりました。

__pipのインストール方法 (Python3の場合):__

1. [pipの公式ドキュメント](https://pip.pypa.io/en/stable/installing/)から`get-pip.py`をダウンロードし、任意の場所に設置します。
2. Pleiadesが利用しているPythonで`get-pip.py`を実行します:  `<PLEIADES_INSTALL_DIR>\python\3\python get-pip.py`
3. Eclipseを再起動したあと、「ウィンドウ(W) > 設定(P) > PyDev > インタープリーター > Pythonインタープリーター > Python3」を開くと「パッケージ」タブ`pip`を含む3つのライブラリが追加されていることが確認できるはずです。これでPyDevから`pip`が利用できるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/105859/3ff7061b-fdf0-0eca-3dd1-008891fe30fd.png)
nodebrew から nodenv に移行しました

nodebrew はディレクトリごとに利用するバージョンが切り替えられないので nodenv へ移行しました。
そのときの手順メモ。 mac OS で brew で nodebrew をいれてありました。

## 利用しているバージョンを控えておく
```
$ nodebrew list
```

## nodebrew をアンインストール
```
$ brew update
$ brew uninstall nodebrew
```

利用しているシェルの設定ファイルから以下を削除する。

```
export PATH=$HOME/.nodebrew/current/bin:$PATH
```

## nodenv をインストール

まずは README を読む
https://github.com/nodenv/nodenv

```
$ brew install nodenv
```

シェルの設定に以下を追加しておく

```
eval "$(nodenv init -)"
```

## nodenv の基本的な使い方

### 利用できるバージョンの確認
```
$ nodenv install --list
```

### 指定したバージョンのインストール
```
$ nodenv install <version>
```

インストール後はrehashを

```
$ nodenv rehash
```

### インストールされているバージョンの確認
```
$ nodenv versions
```

### global バージョンの指定
```
$ nodenv global <version>
```

### local バージョンの指定
プロジェクトのディレクトリに移動して

```
$ nodenv local <version>
```

node のバージョンが切り替わることを確認

```
$ node -v
```
Nuxt.jsの動的ルーティングをNetlifyで行う方法(静的でSPA)

# はじめに

ビルドしてdistに出力された静的ファイルをNetlifyにデプロイすると動的ルーティング出来ない！なんで！となったので、投稿します。
（SPAの定義は、`Webページでアプリケーションを構成する`なため、静的であり、SPAだと思ってます）

# 解決方法
最初に解決方法書きます

```nuxt.config.js

  ...

  generate: {
    fallback: true
  },

  ...

```

これをnuxt.config.jsに含めるだけです。

# 解説

Nuxtでは、動的ルーティングは以下の画像のように _ を付けることで、できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278160/8659a284-bd56-863b-f909-937b8b804175.png)

動的ルーティングとは、

`/users/hogehoge`
`/users/hugahuga`
`/users/1234`
に対応できるということです。


その後、`$ yarn generate`で出力された.nuxt/router.jsには、以下の画像のように、動的ルーティングができています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278160/1adc28a0-44c8-bd58-bb93-b99810783ed1.png)

distも以下の画像のように静的ファイルが出力されています。動的ルーティングのディレクトリがないのは正常です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278160/1aebf462-f25f-bfcb-654b-abf1a420afd6.png)

しかし、Netlifyにデプロイした場合、Not foundとなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278160/4bd83f14-3efe-17db-c4c6-42908aefa2f2.png)

そこで、解決方法で示した

```nuxt.config.js

  ...

  generate: {
    fallback: true
  },

  ...

```

をnuxt.config.jsに追加してビルドすると、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278160/03f2975f-2afc-e638-a6fe-b0d5beae70af.png)


成功するんですよね。

理由は[Netlify へデプロイするには？ - NuxtJS](https://ja.nuxtjs.org/faq/netlify-deployment/#spa-%E3%83%A2%E3%83%BC%E3%83%89%E3%81%A7%E7%94%9F%E6%88%90%E3%81%95%E3%82%8C%E3%81%9F%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E5%A0%B4%E5%90%88)に

> シングルページアプリケーションの場合、Netlify は再読み込み時にデフォルトで *"404 not found"* にリダイレクトする問題があります。生成されないページについては、SPA モードにフォールバックし、そのリンクを更新または共有すると、Netlify の 404 ページが表示されます。なぜならシングルページアプリケーションなので実際には生成されたページが存在しないからです。更新すると url のページが実際に存在しないため 404 になります。404.html にリダイレクトすることにより、Nuxt は SPA フォールバックでページを正しくリロードします。

と書いてありますが、分かりやすく解説すると、

**存在しないページはdist内の404.htmlにリダイレクトして、Nuxtが自動で動的ルーティングしてくれる**

です。

# おわりに
読めば分かることなんですが、

SPAとは？
Node.js必要じゃない？
出力された静的ページは大丈夫なんだけど！？

みたいに悩んだので、記事にしました。

このページにたどり着いて、解決することが出来たなら私は嬉しいです。
JSの文法すら怪しいフロント初心者がblog用のgatsby starter（っぽいもの）を自作・公開してみた

最近ホットだけど日本での知名度が若干低いプロジェクトにgatsbyがあります。
ご存知でしょうか？
[2019年のOctoverse](https://octoverse.github.com/)を見ると、Fastest growing open source projects by contributorsの第8位にgatsbyjs/gatsbyがあります。
今回はそんなgatsbyのstarter(wordpressのテーマみたいなの)を自作していきます。
## 今回の目的

デザインに専念できる環境を作成していきましょう。
私自身のデザイナーとしての能力が低くて現時点でいいデザインを作ることは難しいですが、だれでもカスタマイズできる状態で公開するところまでこぎつけます。

デザインに集中できるだけの基本的な後ろ側を作れることをゴールとします。

## コンセプトとデザインを仮決める

![iPhone X-XS-11 Pro – 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140543/d20f1f24-b0e1-57da-e0b9-a87986c32742.png)

こんな感じのブログにしましょう。
starterの名前とコンセプトはhinoiri(日の入)。

行間がおかしいとか、なんかずれてるとか突っ込みどころ満載の設計図ですが、テーマ作成の際に直します。

### 色一覧

背景色１：ネイビー。#000030。夜の帳をイメージ。
背景色２：群青。#023457。暮れかけの夜をイメージ。
テキスト：薄紫。#B0D0FF。ただの白ではイメージに合わないので青みを強くした。
強調色１：オレンジ。#F37F00。太陽
強調色２：太陽の周りの赤。#D33422。

正直納得いってないので後で変えます。

## 基礎となるgatsby starterを選ぶ

今回は一から作るのではなく、`gatsby-starter-default`というgatsby-starterをもとに製作していきます。

`gatsby-starter-default`はgatsby-starterの中でもっともシンプルなものです。

## プラグイン、テーマを追加

* gatsby-theme-blog-core
* gatsby-plugin-sitemap
* gatsby-plugin-google-fonts
* gatsby-plugin-sass

### gatsby-theme-blog-core

今回はblogを作る予定なので、gatsby-theme-blog-coreを採用。

また、gatsby-theme-blogから重要そうなコードを移植します。
gatsby-theme-blogはstyleに影響を与えてしまうためそのままの採用はしません。

`src/components/`および`src/gatsby-theme-blog-core/components`内に必要なコードを移植します。

結構面倒くさいですが、ソースコード読んで良しなにお願いします。

### その他のプラグイン

* 素のCSSではきつくなる（予定）のでSCSSを採用。
* フォントをきれいにしたいいためgatsby-google-fontsを採用（ただし重くなる）
* gatsby-plugin-sitemapはとりあえず採用

実運用するといろいろ不足があると思いますが、いったんはこれで。

### scssを適用

```
src/
  assets/
    scss/
  components/
    gatsby-theme-blog-core/
```

今回は上記ディレクトリ構成で。
どこからでも使うscssは、src/assets/scss/内に配置し、init.scssで一括して呼び出せるように変更。
各コンポーネントごとのscssはmoduleとして各jsファイルと一緒に配置します。

## サンプルページ作成

様々なHTMLタグが出てくるmdファイルを作成し、実際に試してみます。

![191201-0.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140543/94aa8bad-8aed-78de-a0c5-5c023cbf7ea5.png)

まあ、こんなものかな？

## 公開

githubにpushしてリポジトリを公開状態にすれば終わりです。

実際に使えるか試してみましょう。

```
gatsby new project-name https://github.com/aimof/gatsby-starter-hinoiri
```

demoページ作るほどの価値がこのstarterにまだない気がしたので、デモはなし。
しっかりしたstarterを作れれば公式で紹介してもらえる可能性もあるようです。

## まとめ

gatsby触ってみましたが、フロント面白いです。
デザインについては並行して学習中です。

なぜかgatsbyの知名度が日本では若干低い気がするので盛り上がっていくとよいですね
PWA+Angular8＋AWS amplifyを試す PART#2

# きっかけ
最近話題のPWAを試してみようと思い、メモを兼ねてQiitaへの投稿を始めてみた。
本業は組込みシステムのソフトウェアに携わっており、WEB系は初心者です。
初心者ながら少しずつ成長する姿を見守っていただければ幸いです。
アドバイス等頂けると助かります。

#PART2
PART2では、PART1で作成したプロジェクトをGitHubリポジトリに登録します。

1. GitHubの準備(リモートリポジトリ作成)
2. ローカルリポジトリを作成
3. ローカルリポジトリにファイル変更点を追加（インデックス追加）
4. ローカルリポジトリのインデックスに追加したファイルを登録
5. 追加したインデックスをGitHubに作成
6. リモートリポジトリにデータを送信


# 1. GitHubの準備(リモートリポジトリ作成)
## 新規リポジトリを追加します。
![1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541037/e84cc48b-f244-a3a6-186c-748afa5a0949.jpeg)

## リポジトリの作成
Repository Nameを入力して、「Create repository」を押下します。
Initialize this repositiory with a READMEのチェックを外します。
※ng newで作成済みのため
![2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541037/3055bbb8-6a75-30cf-064c-229efb233e28.jpeg)

## URIコピー
作成されたレポジトリのURIをコピーします。
これは後ほど使います。
![3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/541037/865c9ffe-feae-1579-9299-26f9c58e6d77.jpeg)




# 2. ローカルリポジトリを作成
```
git init
```
# 3. ローカルリポジトリにファイル変更点を追加（インデックス追加）
```
git add ファイル名
```
"git add ."　全て追加する場合

# 4. ローカルリポジトリのインデックスに追加したファイルを登録
```
git commit -m "コメント"
```

# 5. 追加したインデックスをGitHubに作成
```
git remote add origin リポジトリURI(※)
```
(※)先程コピーしたURI

# 6. リモートリポジトリにデータを送信
```
git push origin master
```
#次回
次回は、PWAに対応したソースを組み込みます。

[PART1: Angular雛形作成](https://qiita.com/mitapach/items/5127c92b256ba45caffa)
dependentオプションまとめ[Ruby on Rails]

### はじめに

userが複数のpostを持っていると仮定する

```ruby
class User < ActiveRecord::Base
  has_many :posts
end
```

```ruby
class Post < ActiveRecord::Base
  belongs_to :user
end
```

ここで、userが削除された場合、userに紐づいているpostsをどうするかをdependentオプションで指定できる

### userと一緒にpostsを削除する場合

##### パターン1

```ruby
class User < ActiveRecord::Base
  has_many :posts, dependent: :destroy
end
```

- 基本これを覚える
- ActiveRecordを介して削除（コールバック処理が実行される）
- クエリがuserに紐づいているpostsの数だけ実行される

##### パターン2

```ruby
class User < ActiveRecord::Base
  has_many :posts, dependent: :delete_all
end
```

- SQLを直接実行して削除（コールバック処理は実行されない）
- クエリが1回実行される

### userだけ削除する（postsは削除しない）場合

```ruby
class User < ActiveRecord::Base
  has_many :posts, dependent: :nullify
end
```

- postsレコードのuser_idをnull更新する

### エラーメッセージを表示させる場合

例えば、「postsを持っているuserなので、退会できません」などのエラーメッセージを出したい時などに便利

```ruby
class User < ActiveRecord::Base
  has_many :posts, dependent: :restrict_with_error
end
```

- userレコードにエラー情報（ActiveRecordのerror）が付加される
- `user.destroy` でfalseを返す

### 例外を発生させる場合

```ruby
class User < ActiveRecord::Base
  has_many :posts, dependent: :restrict_with_exception
end
```

- DeleteRestrictionErrorがraiseする

### 参考情報
- https://edgeguides.rubyonrails.org/association_basics.html#options-for-has-one-dependent
- [dependent: :restrict_with_error と :restrict_with_exception の違い]
(https://qiita.com/jnchito/items/3456ce734ef41d216ecd)

- [delete, delete_all, destroy, destroy_allについて](https://qiita.com/kamelo151515/items/0fa7fb15a1d2c1e44db2)
オブジェクト指向

#はじめに
プログラミングの書き換えがしやすく、チーム開発で認識を共有しやすいと言われているオブジェクト指向についてまとめました。

#プログラミング・パラダイムとは
まずオブジェクト指向の話をする前に、プログラミング・パラダイムといいプログラミングのスタイルの種類を表すことばあります。
大きく分けてオブジェクト指向の以外に以下の3つのスタイルがあるので説明します。

オブジェクト指向：
プログラムでモノ（オブジェクト）を組み立てていくプログラミングの考え方です。

手続き型：
コンピュータが実行すべき命令や手続きを順に記述していくプログラミングの考え方です。

関数型プログラミング：
解決しようとする問題に対し、その問題の性質を関数の組み合わせで記述するプログラミングの考え方です。

#オブジェクト指向プログラミングの3大要素
オブジェクト指向プログラミングには、以下の3つの大きなな概念があります。

カプセル化：
オブジェクトの安全性を高めるために、機能（データと処理）をまとめ、機能・責務を明確にした名前を与え、適切な使用法(API)を公開すること。この性質を理解し、影響範囲の小さく疎なプログラミングを心がけることによって、大規模で安全なシステム構築に繋がります。
<img width="418" alt="スクリーンショット 2019-12-01 11.37.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384180/2907a73e-d923-b379-eb1b-82d90c9f1a08.png">


継承：
あるクラスを引き継いで新しいクラスを定義することできること。この特徴があるおかげで、共通部分をまとめて、再利用することができるます。
<img width="455" alt="スクリーンショット 2019-11-30 18.35.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384180/bd2dab66-4188-4ab6-2703-b8e5a78503a4.png">


ポリモーフィズム(多態性)：
オーバライド（親クラスのメソッドを子クラスで上書きすること）やオーバロード（同一クラス内で引数の違いによってメソッドの呼び分けること）によって、メソッドを状況によって使い分けることができることです。
<img width="582" alt="スクリーンショット 2019-12-01 11.28.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384180/1413b298-53af-f006-7ee1-15f407ac699e.png">


#おわりに
どの言語で書くとしてもプログラミング・パラダイムを意識することは非常に重要だと思います。
Djangoでwebサービスを作ってみた振り返り１

Djangoでwebサービスを作ってみました。完成はしましたが、ふんわりやっていたところを再度調べました。

#models.pyで使ったあれこれ
例：

```
class Profile(models.Model):
	～～フィールド定義省略～～
	
	@receiver(post_save, sender=User)
	def create_profile(sender, **kwargs):
		if kwargs['created']:
			user_profile = Profile.objects.get_or_create(user=kwargs['instance'])
	
	def __str__(self):
		return str(self.user)
```
##@receiver
@receiverはシグナルというもので、イベントが発生したタイミングで登録した処理を呼び出す機能。
この例で使われたpost_saveは、senderで指定したモデル(ここではUser)に対するレコードの 追加 or 変更 をした 直後に実行されることを意味する。

##**kwargs
**kwargsのように**をつけた引数を定義すると、任意の数のキーワード引数を指定することができる。
関数の中では引数名がキーkey、値がvalueとなる辞書として受け取られる。
この例では、引数に送信者とこれを取り、if文でインスタンスが作成されたかを確認します。

##get_or_create
オブジェクトが存在しなければ登録、存在してれば登録しない。

##def __str__(self)
インスタンスにstrやprintを適用すると呼び出される処理




#forms.pyで使ったあれこれ
例：

```
class CommentCreateForm(forms.ModelForm):

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        for field in self.fields.values():
            field.widget.attrs['class'] = 'form-control'

    class Meta:
        model = Comment
        fields = ('text',)
```
##*args
可変長引数をtuple型で取るかdict型で取るかって意味です
*argsはtuple型
**kwargsはdict型
[参考](https://kiwamiden.com/use-python-variable-length-arguments)


##class Meta
class Metaはフィールド定義じゃないものを定義する場です。
※フィールドはデータベースに登録される要素の事。
今回の例では、UserCreateFormのmodelとfieldsを定義しています。
fieldsではModelから入力フォームを生成する対象を定義しています。
PHPカンファレンス2019基調講演まとめ

qnote アドベントカレンダー第1日目は、ちょうど PHP カンファレンス2019の開催日という事もあり、現地からの採れたてレポートをお送りしたいと思います。

![8ADF5D24-FCAC-4401-B272-D6E233105B4C.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6102/357ac9d2-b5a2-c251-d6f0-315f00d87f99.jpeg)
*採れたての elePHPant (3,000円) 。経費で落ちる？*

#PHPカンファレンス2019
今年はいつもよりも遅めの12月開催。ちょうど11月29日にPHP7.4がリリースされ、またPHP7.1が EOL を迎えた日でもあります。
毎年おなじみの大田区産業プラザにて19年目20回目の開催。

![8B5C7269-F8AE-479E-AAAC-C26EFC14C8B9.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6102/df950e41-6e14-9475-2354-c8af50e78bcf.jpeg)

今年は嬉しいことに後輩 (@kambe0331) がスタッフとして参加。きっと刺激をうけて来年は登壇してくれる事を期待しています。

#基調講演
乗り換え間違えてギリギリ到着。まずは御目当てのキーノートを拝聴。
1回目から参加している私としては廣川さんのキーノートを毎回楽しみにしています。
年を重ねるごとに廣川さんがティムクックに見えるのは多分私だけではないかと思いますが、なんと今は宇宙開発に携わっているそうです。すごい！

![B4BA156B-303C-413E-AC48-42B7177A189A.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6102/5b3ffdea-0c67-e2d8-49ac-43763be60c0a.jpeg)

キーノートではPHPのこれまでとこれから、また、PHP7.4の仕様変更などをわかりやすく紹介していただきました。30分くらいの時間で内容は濃いのに非常にまとまっていてこの辺りはさすがベテランの魅せる技という感じでした。

## PHP7.4 改善/変更のポイント
キーノートにもありましたが簡単にまとめます。

### クラスのプロパティ型指定
PHP7から導入されたメソッド引数と返り値のタイプヒンティングのプロパティ版。
Nullable 識別子(オプショナル型みたいなもの？)で null を許容するかどうかも定義可能。  

```php
class Foo {
    public int $a;
    public ?object $b = null;
}
```

後方互換のためか、デフォルトでは $a に string を突っ込んでもエラーにはならず、int にキャストするだけというのは PHP らしいですが、

```php
declare(strict_types=1);
```
と書く事で Fatal error を出す事が可能。

他の言語では当たり前ですが、ようやく PHP でもタイプセーフなコードが書けるようになりそうですね。


### OpCache のプリロード指定
Webリクエストで実行されたコンパイルのキャッシュはこれまでもありましたが、あくまでも起動後に実行されたコードのキャッシュなので、再起動直後はキャッシュ生成のオーバヘッドがありました。これをオプション指定で起動時にキャッシュしてしまおうというもの。これは php.ini に書けば良いのかな？

```
opcache.preload=/var/www/preload.inc
```

### FFI (Foreign Function Interface)
あまり知見が無いですが(←調べろ)、PHPからCのソースを実行するようなやつ？前からエクステンションにあったものをネイティブに移植する事によって、前述のプリロード指定などで高速化し実現に至ったようです。より高速な処理が求められる場合に有効。

```php
$ffi = FFI::cdef('double atan2(const double, const double);', 'libm.so.6')
var_dump($ffi->atan2(0.1, 0.0);
```
昔あったJavaのブリッジエクステンションみたいなもんかな？


### 配列スプレッド構文
JavaScript ではお馴染みの構文ですね。これまで array_merge を使用していた部分がより簡潔に書けます。

```php
$a = [3, 4];
$b = [1, 2, ...$a, 5]; // => [1, 2, 3, 4, 5];
```

### アロー関数 (ショートクロージャー)
これも JavaScript ぽいですね。個人的には fn はダサいなと思いますが。。
これが、

```php
function ($x) use ($y) {
   return ($x * $x + $y);
}
```
こう書けます。

```php
fn($x) => ($x * $x + $y);
```

親スコープの変数が参照できる（つまりuse()が不要）なのでより簡潔になりますね。


### ??=構文
NULL合体演算子をより実用的にしたもの。変数が設定されていない場合に代替文字列を代入。


```php
// PHP7
$a['user'] = $a['user'] ?? 'nobody';

// PHP7.4
$a['user'] ??= 'nobody';

```

で、これ、何演算子っていうの？


### その他
これ以外にも細かな関数の追加や演算子の仕様変更、弱参照のインタフェース追加など、
PHP8のリリースまでの最後のメジャーバージョンという事もあり、新機能盛り沢山でした。早く仕事で使いたい！


## まとめ
そんなわけで基調講演を堪能し、後輩が働いているところも確認できたので、カフェに待避し iPad で Qiita のこの原稿を書いています。午後もいろいろ楽しみなセッションがあるので、年に一度のお祭りを楽しんできます！

qnote のアドベントカレンダー (https://qiita.com/advent-calendar/2019/qnote) も PHP だけでなくいろんな言語、技術のお話をお届けできるかと思いますのでどうか皆さんよろしくお願いいたします！
MacでJupiter notebook使おうとするとpython2しか選択できない件

## 環境

MacOS Catalina 10.15.1

## 状況

元々Macにはpython2が標準で入っていて今までそこまで気にしないでpython3のコードを書いていたのですが、jupyter notebookを先日使おうとした時にjupyter notebook内で新しくファイルを作ろうとするとpython2しか選択できず困ったなーという感じでした。調べたところ案外簡単に直せるみたいなのでまとめておきます

## 直し方


まずはipykernelをインストールします

```
python3 -m pip install ipykernel
```


そして次のコマンドを実行します


```
python3 -m IPython kernelspec install-self
```

これだけで解決しました

## 余談

この直し方を調べてる途中でMacのpythonを標準でpython3に変える方法も見つけたので、まとめておきます。


まずはpyenvをインストールします


```
brew install pyenv
```

次に

```
cat << '__EOF__' >> ~/.bash_profile
```

これをターミナル上で実行して下のコードを貼り付けます

```
## Set path for pyenv
export PYENV_ROOT="${HOME}/.pyenv"
if [ -d "${PYENV_ROOT}" ]; then
    export PATH=${PYENV_ROOT}/bin:$PATH
    eval "$(pyenv init -)"
fi
__EOF__
```

下のコマンドで正しく貼り付けられてるか確認します

```
 cat ~/.bash_profile
```


そしてこれを実行します

```
source ~/.bash_profile
```

次にpyenvでインストールできるpythonのバージョンを見てみます

```
pyenv install --list
```

これを実行すると確認できます
今回はpython3.7.5を選択したので、

```
pyenv install 3.7.5
```

これでpython3.7.5がpyenvにインストールできました

次にMacの標準のpythonのバージョンを切り替えます

```
pyenv global 3.7.1
```

これで切り替わったので確認してみましょう

```
python --version
```


ちなみにこれで標準でpython3に切り替わったわけですが、pipでインストールしてたものを確認すると元からあったもの以外全て消えていました。

多分切り替えたことの影響？だと思われるので注意してください



## 参考にした記事

https://qiita.com/masatomix/items/b1a0ec216ea943c86a2a
修羅の道 to iOSの電波強度取得

# 概要
 2019年も残りあとわずか！
 あと少しで、令和初の年越しを体験できそうですね。
 そんな2019/12/1の、ユアマイスターアドベントカレンダー1日目です。
 https://qiita.com/advent-calendar/2019/yourmystar
 この記事では、iOSの電波強度を取得するために色々と調べたことをまとめます。
 この記事の最新のiOSバージョンとは、**iOS 13.2.3**のことを指します。

## 道のり
以前は、iOSの電波強度を取得するために statusBar から情報を取得することができていました。
しかし、最新のiOSバージョンではは statusBar に signalStrength or RSSI の値は保有していないことがわかりました。。。

## statusBarとは？
 statusBar とはiPhoneの上部にある電波マークや電池のマークがある部分のことを言います。
 今現在もアプリからstatusBarの色を変更させたり、wifiに接続されているかということは確認ができます。
 最新のiOSバージョンでも、アプリからではなく端末からだとRSSI値が確認できます。その方法は下記の参考記事にあります。

## 現在、アプリから電波強度を取得するには
 色々と探した結果、statusBarから情報を取得する以外に、**NEHotspotHelper**を用いる方法があるようです。 NEHotspotHelperはXcodeが用意してくれているAPIでSSIDの情報などを得ることができます。

## 注意点
 NEHotspotHelperでSSIDの情報から電波強度を取得できると言いましたが注意点があります。
### 其の１ ユーザの許可が必要
 SSIDの情報から位置情報などがわかるためユーザに許可を得る必要があります。こちらは、info.plistに以下を追加すればOKです。

```
<key>NSExtension</key>
<dict>
    <key>NSExtensionPointIdentifier</key>
    <string>com.apple.networkextension.app-proxy</string>
    <key>NSExtensionPrincipalClass</key>
    <string>MyCustomAppProxyProvider</string>
</dict>
```

### 其の２ 無料アカウントではダメ
 Xcodeの無料アカウントでは使えないAPIのようです。Apple Developer Programに登録して年間1万円ちょい支払う必要があります。

### 其の３ 有料ユーザでも使えるかわからない？
 <img width="634" alt="スクリーンショット 2019-12-01 11.53.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/215620/24437051-78f1-7163-2b8b-436ca074b3c8.png">
 自分用のアプリとして作っているのでお金払って使えなかったら嫌だなと思い、Xcodeのサポートに問い合わせてみました。すると、AppleDeveloperProgramに登録したユーザでも使える訳では無いとのこと。使う旨をXcodeに伝え審査を通ると使えるようになるようです。審査の内容については聞くことはできませんでした。意外と１番の落とし穴かもしれません。


## 参考にした記事
**SwiftでWiFi電波強度を取得する**
著 p9KYcJ5V さん
https://qiita.com/p9KYcJ5V/items/718ffa057302beff757d

**iPhone 電波マークを数字表示にして電波強度を分かり易くしよう♪**
https://www.kototoka.com/entry/2014/07/31/apple-iphone-lte-3g-antennamark-suuji

**[iOS 10] 接続中のWi-FiのSSIDを取得する**
https://dev.classmethod.jp/smartphone/ios-10-cncopysupportedinterfaces/
過去のHoudini アドベントカレンダーに書いた記事達。

Houdiniアドベントカレンダー
https://qiita.com/advent-calendar/2020/houdini

2020年
https://sugi-iggy.blogspot.com/2020/12/stamp.html

2019年
https://sugi-iggy.blogspot.com/2019/12/houdinipdg.html

2018年
http://sugi-iggy.blogspot.com/2018/12/transform.html
https://sugi-iggy.blogspot.com/2018/12/blog-post.html

2017年
http://sugi-iggy.blogspot.com/2017/12/blog-post.html

2016年
http://sugi-iggy.blogspot.com/2016/12/blog-post.html
LEDチカチカ伝説の崩壊

LEDチカチカ、いわゆるLチカだが、多くの人はチカチカさせた後について進めない。
なぜか？
それは計算の仕方が分からないからだ。
手元のLEDのデータシートが無い。
LEDに使う抵抗の計算方法が分からない。
よくある話だ。
LEDチカチカをしたあと脱落する、LEDチカチカ伝説である。

だが待って欲しい。
使う抵抗は、電源、そしてLEDの色と形で求めることができる。
以下に秋月電子さんの情報へのリンクを載せておく。

LEDに使う抵抗の計算
http://akizukidenshi.com/catalog/contents1/led-r-calc.aspx

LEDの規格の参考
http://akizukidenshi.com/catalog/c/cled/

物理的なモノであるので、何を使うかは計算しよう。計算して計算して、LEDチカチカをしてから辞めてしまうLEDチカチカ伝説を崩壊させるのだ。
AWS Cloud9 Laravel6 にLaravel Mixをインストール

# LaravelでJavaScriptを使えるようにLaravel Mixをインストールします。

Laravel Mixをインストールするために必要なNode.jsとNPMがすでにインストールされていることを確認してください。

```qiita:ターミナル
$ node -v
v10.16.3
$ npm -v
6.13.1
```

```qiita:ターミナル
mkdir laravel-mix
$ cd laravel-mix/
$ npm install --save-dev laravel-mix browser-sync-webpack-plugin
```

Laravel MixがインストールされるとLaravelプロジェクト（ディレクトリ）内に
"node_module"というファイルが生成されているはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531595/926b1379-e2c0-84f0-e39a-df5d8e0eb697.png)

node_moduleのディレクトリの中に"cross-env"という名前のディレクトリがあるので、それを探してください。
（node_module内はたくさんのディレクトリが生成されているので、結構スクロールする必要があります）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531595/42370eef-b6b3-788a-2602-61f1514861cb.png)

```
cross-env/src/bin/cross-env.js
```
があるので、そこへのパスをpackage.jsonで書き換えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531595/80ff284c-a496-6038-0fdc-97c6b8b3d116.png)

``
パスの編集方法については<a href="https://qiita.com/takuma-jpn/items/50a59fc7c555698476dd">こちら</a>


以上です。

参考サイト
<a href="https://www.willstyle.co.jp/blog/1836/">Laravel Mixを使って簡単にフロントエンド開発環境を構築する方法</a>
新卒ガチャ失敗(?)をチャンスに変えた話

高専OBOG Advent Calendar 2019参加ということで初Qiitaです。
https://adventar.org/calendars/4238

大した話ではないのですが、
結論からいうと高専生で本当に良かったぁって話をかきます。

#新卒で入社した会社
学生時代、神戸高専を経て某大学の情報工学専攻に編入しました。
大学では人の行動と脳波パターンを対応付けて機械学習に覚えさせることで
脳波を介してシステムを操作する脳-機械インタフェースの研究をしていました。

就職活動では色んな会社を受けましたが、
どの会社でも組み込み系のソフトウェアの開発を志望してました。

当時車載事業を行っている会社にインターンに行ったとき
Matlab/Simulinkによるモデルベース開発をお手伝いさせていただいたとき、
実際にモノがうごくのっていいなあと思ったのが一つ。

もう一つは研究で触れていた機械学習（当時はSVMを使ってました）による判別機が
ハードウエアに乗ってくるだろうから、
大学でやってたことが活用できそうと思ったからです。

最終的にとあるメーカーに内定をいただきました。
内定後の配属希望の面談でも上記希望を伝えていました。
その時面談をしていた人事担当者が
「ハードウエアに興味があるってことなのかな？」
と聞かれたので
「ええ、多少興味あります。」
と答えました。

そのときは、もちろんハードウエアってのも
組み込み系の近傍の話なのだと思っていました。

#希望通り？の配属
ところが私は「電源」の開発部門に配属されました。
商品の中にプログラムは一切出てきません。すべてアナログICで制御が構築されていました。
電源の動作理解に必須となるパワーエレクトロニクスについては当時全く知りませんでした。

さすがにびびりました。
そして、その時初めて「興味ある？ってそういう意味だったのか・・・」と悟りました。

そして苦悩の日々が始まりました。

#部署で一番仕事ができない奴へ
そして私は全く仕事についていけなくなりました。

まず用語がわからない。
それを調べている間に会議が終わる。
会議では発言しないといけないぞ、主体性がないと怒られます。
でも何を話しているかわからなければ発言しようがありません。

パワエレの本を買ってみても
電気回路や電磁気学がわかってる体で書いてることが多く
まず最初からわからない。

回路図はかろうじて読めるけど回路の機能や、
どういう意図でこの回路がこの場所にあるのかがわからない。
周囲に聞いてみても「そんなこともわからないの？」と言われる。

疲れ果てて家に帰って寝て起きて会社に行く。
勉強する気力も起きません。

1年目では全く成果といえるようなものがでませんでした。
このままではまずいと思いました。

#残しておいてよかった高専のノート
もっと効率よく勉強する必要がありました。
そのときふと高専で赤点ギリギリだった回路理論・電磁気学のノートと教科書が本棚にあることに気が付きました。

私は高専時代、電子工学科でしてハードウエアとソフトウェア半々を勉強していました。
（ハード系の教科はさっぱりだったので、ほぼ赤点。成績はクラスで真ん中くらいでした）

久しぶりに読んでみると、
当時の私、結構ちゃんと勉強してたしまとめていました。

自分で書いたノートですから、ある程度記憶もあります。
そのノートをつかって勉強することで特に電磁気学の理解が進みました。
その上でパワエレの本を読むと・・・！！
わかる！わかるぞ！！
**高専時代の俺、グッジョブ！
そして赤点ギリギリの学生に妥協せず、基礎を理解するまで絶対に単位をあげなかった高専の先生！ありがとうございます！**
この辺からペースを掴み始めました。

質問もある程度的を得たことが聞けるようになり
段々先輩の認識もかわってきました。
わからないなりに頑張っているのだと理解してもらえてきたと思います。
**当時の会社の先輩方には感謝しかないです。ありがとうございます。**

#自信がついてきたところで異動
3年目である商品の設計を一貫して任せてもらえました。
しかし、まだまだ能力が不足していました。
このプロジェクトでは先輩方にかなり助けてもらいながら、なんとかやり遂げることができました。
回路設計もしたし、パターン設計もしたし、品質評価もしました。
ここらへんからハードウエアエンジニアとしての自信がついてきました。

4年目、異動となりパワーエレクトロニクス技術開発で働き始めました。
そこでまさかのことを言われました。
「マイコンでパワエレ制御したいのだけど、griffinくんはできるかな。」

#やっぱり残しておいてよかった高専のノート
またかと思いました。
シーケンス制御はやってましたがいわゆる古典制御、現代制御はさっぱりです。
高専では制御工学I、IIの単位は取れていましたがもちろん赤点ギリギリです。

でも、それでも。赤点ギリギリの学生のノートでも。
高専ノートは僕を助けてくれました。
当時の制御の先生、とくに制御工学IIの先生はかなりしっかりと授業をされていました。
期末テストでは「状態フィードバックゲインの設計プロセス」を理解していないと赤点以上は絶対取れない設計がなされていました。

当時は「ランク求めて、固有値求めて・・・ってこれがなんの役に立つんだ？これは単純に行列演算の能力を問われているテストじゃないのか？」
と思っていましたが、
やはり**先生方には感謝しかありません。ありがとうございます！**


#今どんなかんじか
手を付け始めてから気が付きましたが制御はソフトウェアとの親和性高いです。
今回はそれほど苦労せずにキャッチアップできました。

振り返ると、最初は「新卒ガチャミスったか？」と思いましたが、
今思うとそうでもない、むしろいい感じにチャンスもらえたと思えます。

そして今、私はパワエレのハードもソフトもそれなりにわかるようになってきました。
最初に”電源”担当になったとしても諦めなかったおかげかなと思います。
どっちかに特化している人間はそこそこいるのですが、
どっちもを”まぁまぁ知ってる”人はあまりいないようで色々活躍の場をいただけていています。

当時、高専生のわたしは勉強が今後どう役に立つのかわかりませんでした。
それに、授業で習うことは古い技術でエキサイティングな気持ちになりませんでした。

**でも、古い技術をしっかり理解しているというのは大変な強みになることを最近実感しています。
基礎を疎かにするとその上に何も積み上がらないんだと思っています。**
私は先生にも同級生にも恵まれ、ハッピーな学生生活を高専、大学通して過ごせたなぁと思っています。

#まとめ
まとめるとこんな感じです。

・赤点とった教科でもそれなりに勉強しているからほんとに全くしてない人よりかはわかる。
・古い技術をしっかりしってることは意外と価値がある。
・違う分野になっても、開き直ってそれを習得たらったらそれなりに良いことがある。
・**高専の教科書・ノートは可能な限り残しておいたほうがよい**

いやー僕高専卒業してなかったら鬱で体壊してたかも。
本当に高専に入ってよかったなぁ。
【勉強会にスタッフとして参加することができた】Perl入学式 in東京 秋開講 第1回 〜環境構築編〜 #Perl入学式

初めてのスタッフ参加で、とても緊張しました。

イベントの詳細はこちらから確認できます↓
https://perl-entrance-tokyo.connpass.com/event/151697/

## 良かったこと

スタッフとして参加したことで、勉強会をより身近に感じることができました。
参加者であったときは気付かなかったことに気づくことができました。

今回は初学者の方を教える立場として行きました。
「分からないことがあったら質問してください」と言っても、初対面の人に質問するのは抵抗があるものだと実感できました。
こちらから「お手伝いできることはありますか？」と声掛けしたほうが良いと気付けました。

個人的にも、アルゴリズムの実装で悩みを抱えていたので、懇親会で相談できたのは良かったです。
具体的には、計算量をO(n*m)からO(n+m)へ改善できました。

## 感じた課題

参加者の方と同じ環境を用意しておくのは大事だと思いました。
カリキュラムではWindows環境の構築でしたが、自分はubuntuだったので、同じ環境であれば参加者が躓いたときの調査も捗ります。

## 改善したいこと

カリキュラムの予習をします。
積極的に参加者に声掛けをします。
2019年の最先端のPerl開発ボイラープレート

Perl Advent Calendar始まりました！ @AnaTofuZ ありがとうございます！
今年も元気にやっていきましょう！

さて、Perlも実はまだまだ進化しています。

今年はPerl6として開発されていた言語がRakuに名前を変えましたが、
Perl5はPerlとして今後も開発とメンテナンスが続けられていきます。

2019年にPerlを書くそこのあなた、最先端のものが必ずしも現場にマッチするとは限らないですが、最先端のものの多くは既存のものにある課題を解決しています。
どういったものをどう使って書けばよいのかなんとなく知っておくといざというときの助けになるでしょう。

# 前提

このへんつかっとくといいとおもいます

* [strictures](https://metacpan.org/pod/strictures)
  * `use strict` だけでなく様々な強い制約を有効化します。 `PERL_STRICTURES_EXTRA` をtrueにしておけば `no indirect` とかもやってくれる。
* [Syntax::Keyword::Try](https://metacpan.org/pod/Syntax::Keyword::Try)
  * `try`/`catch`/`finally` あたりのsyntaxをkeyword pluginで提供してくれる。`Try::Tiny` などのprototype式のやり方と比較してハマりどころが少ないと思われる。
* [Function::Parameters](https://metacpan.org/pod/Function::Parameters)
  * `fun`/`method` あたりのsyntaxをkeyword pluginで提供してくれる。後述のTypes::Standardと組み合わせて動的型チェックもできる。
* [Function::Return](https://metacpan.org/pod/Function::Return)
  * Function::Parametersが引数を見るならこっちは返り値を見るぜというやつ。
* [Type::Tiny](https://metacpan.org/pod/Type::Tiny)
  * ナウなヤングにバカウケな型表現メタオブジェクト。最近のPerlでのデファクトスタンダード。
* [Types::Standard](https://metacpan.org/pod/Types::Standard)
  * Type::Tinyに同梱されている基本型の定義セット。
* [Moo](https://metacpan.org/pod/Moo)
  * ナウなヤングにバカウケなOOPフレームワーク。最近のPerlでのデファクトスタンダード。
* [namespace::clean](https://metacpan.org/pod/namespace::clean)
  * 外部からインポートしてきたサブルーチンをBEGINフェーズ終了時に掃除してくれる。うっかり外部から行儀悪く参照するみたいなことができなくなって便利。

詳しくはマニュアルを読みましょう

# ボイラープレート

詳しいことはきっと誰かが書いてくれる！！！！

## scripting

```perl
use strictures 2;
use Syntax::Keyword::Try;
use Function::Parameters;
use Function::Return;
use Types::Standard -types;
use namespace::clean;

fun main(Str $msg) {
    say "Hello, $msg";
}

main(@ARGV);
```

## OOP

```perl
package Point;
use strictures 2;
use Moo;
use Syntax::Keyword::Try;
use Function::Parameters;
use Function::Return;
use Types::Standard -types;
use namespace::clean;

1;
```

例

```perl
package Point;
use strictures 2;
use Moo;
use Syntax::Keyword::Try;
use Function::Parameters;
use Function::Return;
use Types::Standard -types;
use Type::Tiny::Class;
use namespace::clean;

has x => (
    is  => 'ro',
    isa => Int,
);

has y => (
    is  => 'ro',
    isa => Int,
);

method distance_of((InstanceOf['Point']) $dest) :Return(InstanceOf['Point']) {
    my $distance_x = $dest->x - $self->x;
    my $distance_y = $dest->y - $self->y;
    return Point->new(x => $distance_x, y => $distance_y);
}

method as_string() :Return(Str) {
    return sprintf 'Point(%d, %d)', $self->x, $self->y;
}

1;
```

# おまけ

Function::Parametersで `(InstanceOf['Point'])` と括弧でくくる必要がある件はissueが立っていましたがいまのところ直す動きではなさそうです

https://github.com/mauke/Function-Parameters/issues/36  

<ins>

追記: @kfly8 による<a href="https://tech.mobilefactory.jp/entry/2019/12/02/235800">解説</a>がなされました

</ins>
homebrew, pyenv, anaconda, Jupyter Notebook

# 環境

- macOS Catalina (10.15.1）
- MacBook Pro(13-inch, 2016)



# 概要

- Homebrewインストール
- pyenvインストール
- Anacondaインストール
- （仮想環境構築はあきらめた）
- Jupyter Notebook起動



# 手順詳細

### 1. Homebrewのインストール

```shell:terminal
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```


### 2. Homebrew環境のアップデート

一応したけど、Already up-to-dateといわれた。


### 3. pyenvのインストール

```shell:terminal
$ brew install pyenv
$ echo 'eval "$(pyenv init -)"' >> ~/.zshrc

$ exec $SHELL -l
```


### 4. Anacondaのインストール

```shell:terminal
$ pyenv install anaconda3-2019.10
$ pyenv global anaconda3-2019.10
```

`pyenv global`によってすべてのディレクトリで該当のPythonバージョンが実行されるようにしている、らしい。もしある特定のディレクトリだけで該当バージョンを使用したい場合は、`pyenv local anaconda3-2019.10`のようにするとよい、らしい。


### 5. インストール完了の確認

```shell:terminal
$ python
Python 3.7.4 (default, Aug 13 2019, 15:17:50)
[Clang 4.0.1 (tags/RELEASE_401/final)] :: Anaconda, Inc. on darwin
Type "help", "copyright", "credits" or "license" for more information.
>>>
```

`python`と打って上記のように出れば導入成功。(v.3系の場合)
Ctrl+Dキーを押して (あるいはquit()と入力して)Pythonの対話型シェルを抜ける。

だそうだが、これがうまくいかないんだな。


### 6. Anacondaの違うバージョンをインストールしてみる

```shell:terminal
$ pyenv install anaconda3-5.3.1
$ pyenv global anaconda3-5.3.1

$ python 3
```

```shell:terminal
Python 3.6.1 (v3.6.1:69c0db5050, Mar 21 2017, 01:21:04) 
[GCC 4.2.1 (Apple Inc. build 5666) (dot 3)] on darwin
Type "help", "copyright", "credits" or "license" for more information.
```

ということで、anacondaの気配なし


### 7. PATHを通してみる

```shell:terminal
$ echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bash_profile
$ echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(pyenv init -)"' >> ~/.bash_profile
$ source ~/.bash_profile
$ pyenv rehash
$ python3
Python 3.7.0 (default, Jun 28 2018, 07:39:16) 
[Clang 4.0.1 (tags/RELEASE_401/final)] :: Anaconda, Inc. on darwin
Type "help", "copyright", "credits" or "license" for more information.

```
おお。Anacondaの気配。

```shell:terminal
$ jupyter notebook
```

で起動したぞ！


### 8.原因

macOS Catalinaからzshになっていると思ったが、
アップデートユーザはbashで、
じぶんでzshに変えろということ。

[macOS 10.15 Catalinaではデフォルトのログインシェルが「bash」から「zsh」へ。](https://applech2.com/archives/201910-macos-10-15-catalina-default-shell-zsh.html)

そうか、シェルをzshに変えておかなきゃ。
そうなると、Anacondaやpyenvがうごかなくなったり
するんだろうなあ……。がんばろ。



# 参考

[【Jupyter Notebook】効果的な使い方を知ろう[Python/機械学習]](https://qiita.com/takuyanin/items/8bf396e7b6b051670147)

[環境構築の真髄(PATHなどの概念)を理解しよう[Python編]](https://qiita.com/takuyanin/items/2f432e90462484cb03a2)

[HomebrewのインストールからpyenvでPythonのAnaconda環境構築までメモ]
(https://qiita.com/aical/items/2d066801a7464a676994)

[[Keras/TensorFlow] Keras(Tensorflow)の環境構築](https://qiita.com/agumon/items/4d7826c2c39d0af868bd)
Apache経由でExpressに接続する方法

## 環境

* CentOS 7.7
* Apache 2.4.6
* node v12.13.1
* express-generator 4.16.1

## イメージ
![apache-node.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199887/eb2b8b45-c8b0-2c78-0ccc-a27b8f4297e9.png)

## 設定手順
### 1. httpdの設定ファイルを編集する

サーバにhttpdがインストールされていない場合は、以下のコマンドでインストールし、有効化します。

```
$ sudo yum update
$ sudo yum install httpd

$ sudo systemctl enable httpd
$ sudo systemctl start httpd
```

`/etc/httpd/conf.d/`の直下に、`hoge.conf`というファイルを作ります。(`hoge`は変更可能)

今回はApacheをプロキシのような中継サーバとして使うので、`proxy.conf`とつけました。

``` /etc/httpd/conf.d/proxy.conf
ProxyPass / http://localhost:3000/
ProxyPassReverse / http://localhost:3000/
```

`3000`はExpressが使用するデフォルトのポート番号です。

httpdを再起動し、設定を反映します。

```
$ sudo systemctl restart httpd
```

### 2. Expressサーバを起動する

`node`がインストールされていない場合は、以下の手順でインストールします。

(2019年12月現在LTSのv12系を使います。)

```
$ curl -sL https://rpm.nodesource.com/setup_12.x | bash -
$ sudo yum install nodejs
```

処理が終了したら、バージョンを確認して正常にインストールされたか確認します。

```
$ node --version
v12.13.1
```



`express-generator`がインストールされていない場合は、以下の手順でインストールします。

```
$ npm install express-generator -g
```



`express`の新しいプロジェクトを作成します。

```
$ express exp-app

$ cd exp-app
$ npm install

$ npm start &
```

以降もターミナルで操作を続けるために、`npm start` は`&`を付けてバックグラウンドで実行します。

`http://localhost:3000`とブラウザに入力すると、以下のようなページが表示されます。
![express_welcom.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199887/b7c0cc1c-c8fc-a9a8-c4e5-fdd722f9ae63.png)
コマンドラインなら、curlで確認しても良いです。

```
$ curl http://localhost:3000
<!DOCTYPE html><html><head><title>Express</title><link rel="stylesheet" href="/stylesheets/style.css"></head><body><h1>Express</h1><p>Welcome to Express</p></body></html>
```

Expressが正常に起動していることを確認できました。

### 3. httpでアクセスする

HTTPでローカルからリモートにアクセスするにあたり、以下の2つの設定を変更します。

* FWの設定

  ```
  $ sudo firewall-cmd --add-service=http --zone=public --permanent
  $ sudo firewall-cmd --reload
  ```

  HTTPリクエストを受け付けます。

* SElinuxの設定

  ```
  $ sudo setsebool -P httpd_can_network_connect on
  ```

  httpdがネットワーク通信できるように設定します。

### 4.アクセス確認

ローカルのブラウザで`http://x1.y1.z1.w1`(リモートのIPアドレス)と入力し、Expressのウェルカムページが表示されることを確認します。

以上で、ApacheとExpressの連携が完了しました！





## 注意

* 上記の方法では、`npm start &` を実行したターミナルからログアウトすると、Expressサーバも止まってしまいます。Expressサーバを常駐させておくためには、サーバ側に`forever`をインストールすると良いです。
(参考：[Node.jsアプリをLinux環境で常駐化させる　forever編]( https://qiita.com/chihiro/items/24ca8ac81cb20c22b47e ))
* ローカルとリモートが同じプライベートネットワーク上にあると、Edge では正常にアクセスできないことがあるようです。以下のサイトの設定を行うと解決します。
   (参考：[Windows10 バージョン1809 Edge でローカルIPアドレスにアクセスできません！](https://blog.goo.ne.jp/hiros-pc/e/0eed600a8a1af8e86f904bf0059cd833))


## 参考

*  [ Node.js Binary Distributions]( https://github.com/nodesource/distributions )
*  https://stackoverflow.com/questions/23709832/ap-proxy-connect-backend-disabling-worker-for-127-0-0-1
Raspberry Pi 4B Wi-Fi通信速度測定

## 【序文】
Pi4B を入手したので Wi-Fi通信速度を測定してみた。
Pi3B+ と Wi-Fiチップは同じらしいので、測定するまでもないかと思いきや……。

## 【環境】
前回 [Wi-Fi通信速度測定](https://qiita.com/god19/items/a3d76434ee24d2001923 "Wi-Fi通信速度測定 - Qiita") と同じ。

## 【測定】
Pi4B の測定結果は以下。

```
pi@raspberrypi4:~ $ iperf3 -c 192.168.11.101
Connecting to host 192.168.11.101, port 5201
[  5] local 192.168.11.113 port 33332 connected to 192.168.11.101 port 5201
[ ID] Interval           Transfer     Bitrate         Retr  Cwnd
[  5]   0.00-1.00   sec  8.13 MBytes  68.2 Mbits/sec    0    256 KBytes
[  5]   1.00-2.00   sec  7.77 MBytes  65.2 Mbits/sec    0    269 KBytes
[  5]   2.00-3.00   sec  7.95 MBytes  66.7 Mbits/sec    0    354 KBytes
[  5]   3.00-4.00   sec  8.02 MBytes  67.2 Mbits/sec    0    354 KBytes
[  5]   4.00-5.00   sec  4.78 MBytes  40.1 Mbits/sec    0    389 KBytes
[  5]   5.00-6.00   sec  7.39 MBytes  62.0 Mbits/sec    0    414 KBytes
[  5]   6.00-7.00   sec  8.45 MBytes  70.9 Mbits/sec    0    438 KBytes
[  5]   7.00-8.00   sec  7.95 MBytes  66.7 Mbits/sec    0    438 KBytes
[  5]   8.00-9.00   sec  8.45 MBytes  70.9 Mbits/sec    0    438 KBytes
[  5]   9.00-10.00  sec  7.95 MBytes  66.7 Mbits/sec    0    438 KBytes
- - - - - - - - - - - - - - - - - - - - - - - - -
[ ID] Interval           Transfer     Bitrate         Retr
[  5]   0.00-10.00  sec  76.9 MBytes  64.5 Mbits/sec    0             sender
[  5]   0.00-10.00  sec  75.9 MBytes  63.7 Mbits/sec                  receiver

iperf Done.
```

速度は 64.5 Mbits/sec で目を疑う。

## 【実行結果まとめ】
Pi3B+、PiZero WH も測定。結果は以下。

| Pi | 使用周波数帯域 | Mbits/sec |
| ---- | ---- | ---- |
| Pi4B | 5GHz | 64.5 |
| Pi3B+ | 5GHz | 90.6 |
| PiZero WH | 2.4GHz | 28.6 |

## 【所感】
Pi4B+ の数字があまりにも悪いので何回か測定したけど、40～80台とかなりばらつきがあり、安定性も欠ける感じ。
何でこんなにパフォーマンスが悪いの？

ついでに `iwconfig wlan0` でリンクスピードも確認。（Link Quality項目）

- Pi3B+

```
pi@raspberrypi3-2:~ $ iwconfig wlan0
wlan0     IEEE 802.11  ESSID:"********-A-6***"
          Mode:Managed  Frequency:5.2 GHz  Access Point: 18:C2:BF:67:63:84
          Bit Rate=135 Mb/s   Tx-Power=31 dBm
          Retry short limit:7   RTS thr:off   Fragment thr:off
          Power Management:on
          Link Quality=46/70  Signal level=-64 dBm
          Rx invalid nwid:0  Rx invalid crypt:0  Rx invalid frag:0
          Tx excessive retries:0  Invalid misc:0   Missed beacon:0
```
- Pi4B

```
pi@raspberrypi4:~ $ iwconfig wlan0
wlan0     IEEE 802.11  ESSID:"********-A-6***"
          Mode:Managed  Frequency:5.2 GHz  Access Point: 18:C2:BF:67:63:84
          Bit Rate=135 Mb/s   Tx-Power=31 dBm
          Retry short limit:7   RTS thr:off   Fragment thr:off
          Power Management:on
          Link Quality=38/70  Signal level=-72 dBm
          Rx invalid nwid:0  Rx invalid crypt:0  Rx invalid frag:0
          Tx excessive retries:148  Invalid misc:0   Missed beacon:0
```

う～ん、やはり Pi4B の方が遅いし。