OmniAICreator/Qiita-1.07M huggingface dataset:
【Netlify】Netlify / GithubPages / Heroku の速度比較

# Netlifyとは

WEBサイトのホスティングサービス
https://www.netlify.com/

![netlify.png](https://qiita-image-store.s3.amazonaws.com/0/141934/36200c1e-9c92-8376-964d-7113cf0ef524.png)

# Netlifyに関する投稿
- Netlify / GithubPages / Heroku の速度比較 ←今回の投稿
- [ドラッグ＆ドロップでWEBサイトを公開する](https://qiita.com/NaokiIshimura/items/40ed08203b35aa0b527c)
- [Github連携でWEBサイトを公開する](https://qiita.com/NaokiIshimura/items/9f12805af85c9be22814)
- [カスタムドメインを設定する](https://qiita.com/NaokiIshimura/items/64e060ccc244e38d0c15)
- [Forms機能を利用して問い合わせフォームを作成する](https://qiita.com/NaokiIshimura/items/bce2f0b865ec1bc16a53)

# はじめに

静的サイトを作成する機会があり、Netlify / GithubPages / Heroku の速度比較を行いましたので、参考情報として投稿させていただきます。

Herokuは静的サイトのホスティングサービスではありませんが、個人的によく利用するサービスなので比較対象に含めました。

# 速度比較に利用したソース

画像(60~100KB)が10個表示されるページです。
ページ全体としては780KB程度のサイズになります。

## ソース

<img alt="source.png" src="https://qiita-image-store.s3.amazonaws.com/0/141934/187ed360-6441-1139-f63c-7809c2de2ced.png">

## プレビュー

![site-chrome.png](https://qiita-image-store.s3.amazonaws.com/0/141934/33a2ffda-3b73-6dad-c17e-e7a9a262b3ef.png)


# 結果

各サービスにデプロイしたあとに3回ずつスーパーリロード（キャッシュをクリアして更新）させて、読み込みにかかった時間を測定しました。

Netlifyは自動的にCDNが利用されるらしく、比較したサービスの中では最速でした。

サービス名（プラン）  | 読み込み速度
---         | ---
Netlify (free)    | 140~180 ms
GithubPages       | 260~400 ms
Heroku  (free) | 1200~2500 ms

> 備考：HerokuはHTML/CSSだけではデプロイできないため、ルートディレクトリに0バイトの`index.php`を配置しました。また、リージョンはUSでした。

---

以下は測定に利用した各サービスについてのメモです。

# 速度比較に利用したプラン

速度比較に利用した各サービスのプランは以下の通りです。

- Netlify (free)
- GithubPages
- Heroku (free)

サービス（プラン） | 制限 
---    | ---- 
Netlify (free) | 帯域：100GB/月<br>ストレージ：100GB<br>APIリクエスト：<br>　500リクエスト/分<br>　3デプロイ/分
GithubPages | リポジトリの容量(推奨)：1GB<br>サイトの容量：1GB<br>帯域：100GB/月<br>ビルド：10回/時間
Heroku (free) | 未認証アカウント：550時間/月まで<br>認証済みアカウント：1000時間/月まで<br>その他：30分間何も操作が行われないとスリープモードになる

## 参考
- [【Netlify】Plans and Pricing \| Netlify](https://www.netlify.com/pricing/)
- [【Netlify】Terms of Service \| Netlify](https://www.netlify.com/tos/#quota-limits)
- [【Netlify】GitHub Pages vs\. Netlify \| A Comparative Breakdown](https://www.netlify.com/github-pages-vs-netlify/)
- [【GithubPages】What is GitHub Pages? \- User Documentation](https://help.github.com/articles/what-is-github-pages/#usage-limits)
- [【Heroku】Pricing \| Heroku](https://www.heroku.com/pricing)
- [【Heroku】Free Dyno Hours \| Heroku Dev Center](https://devcenter.heroku.com/articles/free-dyno-hours)
- [【Heroku】Heroku を利用して無料でアプリの構築 \| Heroku](https://jp.heroku.com/free)

# 画像

猫の画像は以下のサイトのフリー素材を利用させていただきました。
[ぱくたそ\-フリー素材・無料写真ダウンロード](https://www.a.com/)
trailing slash(URL末尾の"/")と相対URL

当たり前かもしれないけど、結構差が出るなぁ、と思って確認しました。

trailing slash(トレイリングスラッシュ)は、URL末尾の"/"のことで、
(特に動的ページの場合に)設計の時に付けるか付けないかで迷ったりします。


`/home/hello/`内では、相対URL`.`は`/home/hello/`(自分)のことを指します。
(まぁ本来ディレクトリなことを考えると当然と言えば当然？)

一方で、`/home/hello`内では、相対URL`.`は`/home/`(親)のことを指します。

だとすると、トレイリングスラッシュなしだと、自分に相対URLでリンクしようとすると、
いちいち`./{そのページの名前}`としなければならないので、
トレイリングスラッシュありの方が、REST風URLにした時とかに、GETでフォームが表示されて、それにPOSTしたりする時に便利な気がします。

表にまとめてみると以下のようになります。

| 自分のパス   | `.`が表すパス         | 自分への相対パス |
|--------------|-----------------------|------------------|
| `/home/hello/` | `/home/hello/` (自分) | `.`              |
| `/home/hello`  | `/home/` (親)         | `./hello`        |

(こういう視点で指摘されているのを見たことない気がするのですが、当たり前だから言及されてないだけなんですかね？)

(Laravelだとトレイリングスラッシュなしなので、どうしようかなぁ。)
Cannot open self /usr/local/bin/docker-compose or archive /usr/local/bin/docker-compose.pkg エラー

CentOS7にdocker-composeをいれた際に、起動しなかった際のエラー

```
Cannot open self /usr/local/bin/docker-compose or archive /usr/local/bin/docker-compose.pkg
```

アンインストールし、再インストールすることで解決しました。
Djangoをセットアップする

## はじめに
3つの記事で構成しています

1. （この記事）
- [共通のテンプレートから呼び出す](https://qiita.com/k-shinto/items/6859e7dd1154bec168db)
- [Django Bootstrap4の導入からSass(SCSS)導入まで](https://qiita.com/k-shinto/items/c967c1e677bfe02f92b8)

## 動作環境
* macOS 10.13.6
  * Python 3.7

<font color='gray'>Windows環境の場合、一部コマンドはコピペでは動きません。</font>
## Djangoをインストールする
`pip install django`

## Djangoプロジェクトを生成する

`django-admin startproject [プロジェクト名]`

「sampleproject」という名前で作った場合、以下の通りになるはずです

``` 
$ django-admin startproject sampleproject
$ cd sampleproject
$ ls
manage.py       sampleproject
``` 

## 仮想環境
このプロジェクトだけの環境を作るために仮想環境を導入します
仮想環境について、下記の記事でとても分かりやすくまとめられています
https://qiita.com/fiftystorm36/items/b2fd47cf32c7694adc2e

#### virtualenvをインストール
`python -m pip install virtualenv`

#### 仮想環境を作成する
`python -m venv [仮想環境名]`

「sample_venv」で作成した場合、以下のようになります

```
$ ls
manage.py       sample_venv     sampleproject
```

#### 仮想環境をActivate

`source [仮想環境名]/bin/activate`

アクティベートが成功すると下記のようになっているはずです

```
(sample_venv) $
```

#### （仮想環境から抜けたい場合）

`deactivate`

```
$
```

#### 仮想環境にDjangoをインストールする
仮想環境にDjangoをインストールしていきます


`pip install --upgrade pip`
`pip install django`

成功すると、以下のようになります

```
(sample_vanv)$ pip list
Package    Version
---------- -------
Django     2.1.1
pip        18.0
pytz       2018.5
setuptools 39.0.1
```

## アプリを追加する
プロジェクトのディレクトリ配下にアプリを追加します
`python manage.py startapp [アプリ名]`

成功すると先ほどのアプリ名のフォルダが追加されています

```
(sample_venv)$ ls
manage.py       sample_venv     sampleapp       sampleproject
```

#### setting.pyを編集する
アプリが追加されたことをDjangoに知らせるために編集します

```sampleproject/setting.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'sampleapp',  ← 追加（アプリ名）
]

```

## 開発用サーバーを立ち上げてみる
うまくインストールができたら下記のコマンドでサーバーが立ち上がります。
`python manage.py runserver`

```
(sample_venv)$ python manage.py runserver
Performing system checks...

System check identified no issues (0 silenced).

You have 15 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, ses
sions.
Run 'python manage.py migrate' to apply them.

September 09, 2018 - 03:03:26

Django version 2.1.1, using settings 'sampleproject.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
```

Starting development server at に続く`http://127.0.0.1:8000/`をブラウザで開くことができます

![スクリーンショット 2018-09-09 12.06.23.png](https://qiita-image-store.s3.amazonaws.com/0/222146/c02714ad-2d01-1105-7c90-7280fb2bd734.png)
Nuclideに関するTipsまとめ

**追記**
Nuclideはプロジェクト終了になったようです。残念
https://nuclide.io/

## 概要

[Nuclide公式](https://nuclide.io/)

Facebookが公開しているAtomパッケージのNuclideを試しています。React Nativeで開発する人はけっこう使っているみたいです。私はReact Nativeを使った開発は最近やらないのですが、React.jsはよく使います。試しに、ReactのWeb開発でNuclideをやっているので、その事をメモしておこうと思います。

しばらくプライベートで使っていくつもりなので、適宜追記をしていきます。

## 現時点の感想

Nuclideはデフォルトでいろいろ揃っていて、けっこういい感じに使えています。

## インストール

### 起動しなくなった場合

https://github.com/facebook/nuclide/issues/1439

こちらのissueにある通り、再インストールが推奨です。

```
$ rm -rf ~/.atom/packages/nuclide/node_modules/nuclide-commons/
$ apm uninstall nuclide && apm install nuclide
```

### Atom BetaをAtomと別設定で起動する

Nuclideは他のパッケージとコンフリクトしたりする可能性や、設定をいろいろと見直す必要があります。そのため、NuclideはAtom Betaで試しにつかってみる方法を共有です。

AtomはATOM_HOMEという環境変数を起動時にセットすると、設定ファイルのファイルパスを変更する事ができます。Atom Beta起動時にデフォルトの`.atom`とは違うファイルパスを読み込むように設定します。私は以下のようなShellScriptを用意し、aliasでショートカットを定義しています。これでターミナルから`atombeta`と実行すれば、別プロファイルでAtom Betaが起動します。

```bash:atombeta.sh"
#!/bin/bash
ATOM_HOME=~/.atombeta open -a "Atom Beta"
```

```zsh:.zshrc
alias atombeta="atombeta.sh"
```

参考：[Medium - Running two instances of Atom with separate config](https://medium.com/@leeprovoost/run-two-instances-of-atom-with-separate-config-272868700635)

## Nuclideの設定
インストールは簡単なので省略。
`Install Recommended Packages on Startup`にチェックを入れておくと、Nuclideが様々なパッケージを入れてくれます。これでだいたいのReact開発環境が整います。

### シンタックスハイライト
Reactのシンタックスハイライトがデフォルトでいい感じでした。

### 補完
デフォルトだと、素のAtomとそこまで差異がない気がします。

### flow
あまり使ってないです。個人開発でflowを使うと、赤い線が大量に出てちょっとつらいため...。

## 個人的にやった方がいい他の設定

### ファイルツリーの自動展開
Atomにデフォルトで入っている`tree-view`は無効化されています。これの`Auto Reveal`を選択していると、現在開いているファイルがプロジェクトビューでハイライトされていました。Nuclideでも同様の設定が可能です。

NuclideのSettingsから`Nuclide-file-tree`を選択し、`Reveal File on Switch`を選択すれば、選択しているファイルが常にプロジェクトビューに表示されます。

### その他
TODO:見つけたら適宜追加していく

## Prettier
jsのフォーマッターにprettierを使っている人は多いと思います。`prettier-atom`というパッケージを導入するだけで、良い感じでReactもフォーマットしてくれるのでおすすめです。
Nuclideのデフォルトのフォーマットは、個人的にはちょっと微妙に感じたので、prettierを別でインストールしました。インストールしたとき「linterも必要なんだけどインストールする？」と聞かれますが、これをインストールしなくても動いています。

## 参考情報
このビデオ見ると、もっと便利な設定がありそうですね。
https://www.youtube.com/watch?v=IyB7T5MJ1Jw
【入門】Windowsでgiboを用いるための環境構築とgiboの使い方

##giboとは
giboとは一言で言ってしまえば、「`.gitignoreファイル`を自動生成してくれるツール」です。つまり、`.gitignoreファイル`を手動で書く手間を省いてくれるツールということです。

なお、今回紹介しているgiboのバージョンは2.0.0であり、端末のOSはWindows7となります。

##giboのダウンロード
[こちら](https://github.com/simonwhitaker/gibo)からgiboをダウンロードしましょう。Cドライブ直下など任意の場所にレポジトリをクローンします。GitBashなどを用いる場合は`cd`で任意のディレクトリに移動した後で

```
git clone https://github.com/simonwhitaker/gibo.git
```
と入力します。

クローンしたら、後はパスを通すだけです。
例えばCドライブ直下にクローンしたのならば、`C:\gibo`を「システム環境変数」の「Path」に追加してあげましょう。パスの通し方がわからない場合は以前書いた[こちら](https://qiita.com/rebi/items/577a18241236c66b983f)の記事を参考にしてみてください。

パスを通したらバージョンの確認をしてみましょう。
コマンドプロンプトで`gibo version`と入力し、バージョンが表示されればOKです。
![20180909_110539.JPG](https://qiita-image-store.s3.amazonaws.com/0/239294/044950ee-cf41-68bc-83fb-333aa11188fe.jpeg)

##giboの使い方
それではgiboを実際に使ってみましょう。
コマンドプロンプトで`.gitignore`ファイルを作成したいディレクトリに移動後以下のように入力します。

```
gibo dump 言語や環境名 >> .gitignore
```
例えばJavaに関する`.gitignore`ファイルを作成したい場合は

```
gibo dump Java >> .gitignore
```
と入力します。

また、複数指定することも可能で、

```
gibo dump Java Eclipse >> .gitignore
```
といった具合にスペースで区切り、追加していくことも可能です。

実際にCドライブ直下の`test`ディレクトリで試してみたのが以下の画像です。
![20180909_111025.JPG](https://qiita-image-store.s3.amazonaws.com/0/239294/c0e1b981-e47a-9efb-af2e-161e1c544733.jpeg)
`.gitignore`ファイルが生成されており、
![20180909_111124.JPG](https://qiita-image-store.s3.amazonaws.com/0/239294/e899a672-4a53-3bbd-c94f-44a3f1522cdd.jpeg)
Javaと
![20180909_111130.JPG](https://qiita-image-store.s3.amazonaws.com/0/239294/12801d71-0c37-0675-5227-724fee2d1c59.jpeg)
Eclipseに関するファイルやディレクトリが指定されていることがわかります。

なお、`.gitignore`ファイルを作成する際に指定できる言語や開発環境は

```
gibo list
```
と入力すると調べることができます。

##終わりに
最後までお読みいただきありがとうございました。giboを使うことで、少しでも楽をする人が増えれば幸いです。
import routeにご注意

## 結論
違うルートからimportしたクラス、違うものと認識される。

## 例：エラー発生時
### import
```python
import tensorflow as tf
from tensorflow import keras
from keras.layers import Dense  # [1]

sess = tf.Session()
```
[1] Denseを短い方式で利用できるようにimportしました

### model作る
```python
model = keras.Sequential()
model.add(keras.layers.Dense(8, input_shape=(10, 16))) # [2]
model.add(Dense(32)) # [3] 
model.summary()
```

[2] 長い方式でDense利用
[3] 短い方式でDense利用

### 実行したらエラー
```python
---------------------------------------------------------------------------
TypeError                                 Traceback (most recent call last)
<ipython-input-81-6aa9bc4246b0> in <module>()
      1 model = keras.Sequential()
      2 model.add(keras.layers.Dense(8, input_shape=(10, 16)))
----> 3 model.add(Dense(32))
      4 model.summary()

~/tensorflow/venv/local/lib/python3.6/site-packages/tensorflow/python/training/checkpointable/base.py in _method_wrapper(self, *args, **kwargs)
    424     self._setattr_tracking = False  # pylint: disable=protected-access
    425     try:
--> 426       method(self, *args, **kwargs)
    427     finally:
    428       self._setattr_tracking = previous_value  # pylint: disable=protected-access

~/tensorflow/venv/local/lib/python3.6/site-packages/tensorflow/python/keras/engine/sequential.py in add(self, layer)
    138       raise TypeError('The added layer must be '
    139                       'an instance of class Layer. '
--> 140                       'Found: ' + str(layer))
    141     self.built = False
    142     set_inputs = False

TypeError: The added layer must be an instance of class Layer. Found: <keras.layers.core.Dense object at 0x7f34c47550f0>

```
追加したのは立派なLayerクラスですが、なぜ文句言われるでしょうか。

## 例：正常時の動き
### model 
```python
model = keras.Sequential()
model.add(keras.layers.Dense(8, input_shape=(10, 16))) # [5]
model.add(keras.layers.Dense(32)) # [4]
model.summary()
```

[4] ここが長い形式なら大丈夫
[5] ちなみに、ここ短い方式もできると思ったらできませんでした。

### 出力
```
_________________________________________________________________
Layer (type)                 Output Shape              Param #   
=================================================================
dense_20 (Dense)             (None, 10, 8)             136       
_________________________________________________________________
dense_21 (Dense)             (None, 10, 32)            288       
=================================================================
Total params: 424
Trainable params: 424
Non-trainable params: 0
_________________________________________________________________
```

## 原因
SequentialとDenseのimport書き方が同じである必要

### 例：正し書き方。
```python
from tensorflow.keras import Sequential
from tensorflow.keras.layers import Dense
```

### 例：一応大丈夫な書き方。
```python
from keras import Sequential
from keras.layers import Dense
```
SequentialとDenseのimportがそろっているから大丈夫だが、以下の文句が言われる。

```
Using TensorFlow backend.
```

### 例：ダメな書き方
```python
from tensorflow.keras import Sequential
from keras.layers import Dense
```
SequentialとDenseのimportが違うルートからダメ。
Refinement で定義したメソッドが Symbol#to_proc で使えない

# はじめに

Ruby は組込みクラスさえ自由に改変できるけれど，ライブラリーなんかでそんなことをしたら大変なことになってしまう。

そこで，Ruby 2.1 では，既に存在するクラスの改変を**限定されたスコープ内**でのみ行う仕組みとして，refinement というものが導入された。

導入当初は制約が大きかったが，のちのバージョンで制約が緩められた。

refinement とその制約については既にいくつも記事が書かれてきたが，本記事では（おそらく）まだ書かれていない制約について記述する。

# 準備

本記事は，文字列をグダグダにする `String#sloppy` なるメソッドを導入する（英語苦手なので，メソッド名が適切かは知らん）。
以下に示すように，文字列の文字の並びをシャッフルして返すだけ。

refinement は，まず何らかのクラスを拡張するモジュールを

```rb
module MyStringExtension
  refine String do
    def sloppy
      chars.shuffle.join
    end
  end
end
```

のように作っておいて，これを適用したい場所で

```rb
using MyStringExtension
```

のようにすれば，そのスコープで拡張が効くようになる。

しかし，モジュールを定義してすぐその場で使うだけなら

```rb
using Module.new{
  refine String do
    def sloppy
      chars.shuffle.join
    end
  end
}
```

なんて書けばよい。
無名のモジュールを `Module.new` で作ってすぐに `using` するわけだ。

ここで注意してほしいのが，`{ }` を ~~`begin end`~~ `do end` にしちゃうと，`using` のブロックと解釈されちゃうこと。もし `do end` を使うなら，`using` の引数全体を `( )` で囲まなくてはならない。

これで準備は整った。
ここ以降の説明では，上記の `using` がなされたスコープでのコードを示す。

# うまくいくケース

当然ながら，

```rb
"Ruby".sloppy # => "byRu"
```

のように使える。

また，

```rb
p %w(Ruby Python).map(&:sloppy) # => ["uRby", "ohytPn"]
```

も OK。
この書き方は，Ruby 2.3 では使えなかった（NoMethodError）が，Ruby 2.4 での制約緩和で使えるようになった。ありがたい。

ブロックを与えるべきメソッドに `&:sloppy` を与えると，まず `:sloppy#to_proc` で

```rb
Proc.new{ |receiver, *args| receiver.send(:sloppy, *args) }
```

的な `Proc` オブジェクトが作られ，それがブロックとして与えられるわけだが，Ruby 2.4 で `send` に関する refinement の制約が取り除かれたことでイケるようになったのだろう。

`send` の件は下記の拙記事参照：
[Refinement で追加したメソッドが send で呼べない - Qiita](https://qiita.com/scivola/items/9a8887a5a864a7252d75)

# うまくいかないケース

さきほどの例では，refinement で追加したメソッドが `Symbol#to_proc` で使えることが確認できた。

当然

```rb
puts :sloppy.to_proc.call("Ruby")
```

もイケるだろうと踏んだが，残念ながら `NoMethodError` となる。

理由は判らなかった。

# 追記（2022-03-09）　できるようになった

「うまくいかないケース」で挙げたコードを改めて試したところ，

```rb
p :sloppy.to_proc.call("Ruby") # => "bRuy"
```

のように，使えるようになっていた。
少なくとも Ruby 2.7.5 では使える。それ以前のバージョンは調べていない。
この記事を書いたときのバージョンが詳しくは分からない（覚えていない）が，Ruby 2.4 に言及していることから，Ruby 2.4.x と思われる。
灯りと鏡 (Ruby)


無限に続く場合があるのが若干面倒でした.

```rb:tyama_henae27pre.rb
#!/usr/bin/ruby
#http://nabetani.sakura.ne.jp/hena/orde27ligmir/
#https://qiita.com/Nabetani/items/0b2f459ec128c89948f4

#x,y
D={
	'.'=>{
		[0,-1]=>[0,-1],  #N
		[1,0]=>[1,0],   #E
		[0,1]=>[0,1],   #S
		[-1,0]=>[-1,0], #W
	},
	'1'=>{
		[0,-1]=>[1,0],  
		[1,0]=>[0,-1],
		[0,1]=>[-1,0],
		[-1,0]=>[0,1],
	},
	'0'=>{
		[0,-1]=>[-1,0],  
		[1,0]=>[0,1],
		[0,1]=>[1,0],
		[-1,0]=>[0,-1],
	},
}
H=W=5

while gets
	m=$_.chomp.split('/')
	x,y=[0,0]
	H.times{|h|W.times{|w|
		if m[h][w]=='Y'
			x,y=w,h
			m[h][w]='.'
		end
	}}
	r=[]
	dx,dy=[0,-1]
	visited={[x,y,dx,dy]=>1}
	while 0<=x&&x<W && 0<=y&&y<H && m[y][x]!='x'
		r<<[x,y]
		dx,dy=D[m[y][x]][[dx,dy]]
		x+=dx
		y+=dy
		k=[x,y,dx,dy]
		break if visited[k]
		visited[k]=1
	end
	puts r.map{|x,y|(x+y*W+97).chr}.uniq.sort*''
	STDOUT.flush
end
```
API GatewayがX-Rayをサポートしたのでやってみる

## はじめに
API GatewayでX-Rayによるパフォーマンスモニタリングが可能になりました。

https://aws.amazon.com/jp/about-aws/whats-new/2018/09/amazon-api-gateway-adds-support-for-aws-x-ray/

これまでもLambdaの性能解析は可能でしたが、これによりAPI Gateway-Lambdaで構成されるような
典型的なサーバーレスアプリケーションが End to End でモニタリングできるようになりるました。

## やってみる
エンドポイントタイプは、地域、エッジ最適化、プライベート全てに対応しています。
また2つのTraceモードが用意されています。

* Passive 

Traceが有効になっていない場合のデフォルトの設定。
既にTraceされているサービスからAPIが呼び出された場合は記録する。

* Active

設定したサンプリングルールに基づき、APIの呼び出しを自動的にサンプリングする。


### トレースの有効化
ステージエディターの **ログ/トレース** タブで **X-Ray トレースの有効化**　に
チェックを入れるだけです。
変更の保存で有効化されます。ステージの再デプロイは不要でした。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/125105/01203164-c1a4-1300-d507-aea945a42acd.png)

CLIで既存のAPIのトレースを有効化する場合は以下のような感じです。

```bash
$ aws apigateway update-stage --rest-api-id {rest-api-id} --stage-name {stage-name} \
--patch-operations op=replace,path=/tracingEnabled,value=true
```

必要に応じてサンプリングルールの設定を行います。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/125105/bab81513-4560-a68c-a6c4-c8322773c420.png)

ここでは新たにルールを作成しませんので、
デフォルトで用意されているサンプリングルールが適用されます。
デフォルトのサンプリングアルゴリズムは
1秒あたり1リクエストを記録し（リザーバーサイズ）、リザーバーサイズを超えた分は
リクエスト全体の5パーセントがその制限を超えてサンプリングされます。(固定レート)

### トレースの確認
DynamoDBに対してGetItemを行うシンプルなAPIを用意しました。
Lambda経由でGetItemを行うリソースとAWSサービスプロキシでAPI Gatewayから
直接DynamoDBにGetItemを行うリソースを追加しています。
(Lambda関数ではxray-sdk利用し、DynamoDBの処理時間を取得しています。)

Service Mapを確認すると、API Gatewayから始まる全体的なトレースが記録されています。
API Gatewayのトレースを確認すると、レスポンスステータスの割合が確認できます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/125105/76608500-01c3-33fd-c681-86de8bcf4034.png)

更にトレースの表示で個別のトレースを確認していきます。
レスポンスが403であるリクエストが確認できます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/125105/08b140ea-5ae5-6ed0-5966-d2df794dffa3.png)

個別のトレースでエラー原因が確認できます。
リソースポリシーで許可しているIPアドレスの範囲外からアクセスしたためです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/125105/1c245d69-d693-76c5-f025-46ba5527c7b6.png)

サービスプロキシによるDynamoDBアクセス。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/125105/9a668fe8-8204-8e3f-e51b-e4e0d2976825.png)

API Gateway-Lambda-DynamoDBのトレースビュー

![image.png](https://qiita-image-store.s3.amazonaws.com/0/125105/aa12d0a4-2ed8-bed0-f475-9e04405d72ef.png)

API～バックエンドサービスの全体のパフォーマンスやエラーを
より簡単に分析できるようになりましたね。

以上です。
参考になれば幸いです。
[初心者引っかかりポイント] Djangoでsettings分割したとき for PyCharm user

# 概要

ローカル開発環境、ステージングサーバー、本番サーバーとでDjango全体の設定を変えたいとき、settingsファイルを分割しておいて環境変数でどれを使うかコントロールするのが便利です。

やり方自体は他の方が書いてくださっていますが、PyCharmを使っていて追加で引っかかったポイントがありましたので、案内いたします。
他のIDEでも同様のことがあるかもしれません。その時は参考にしていただければと思います。

# settings分割について

以下のリンク先をご参考ください。

 - https://qiita.com/aion/items/ca375efac5b90deed382
 - https://qiita.com/okoppe8/items/e60d35f55188c0ab9ecc

私も参考にさせていただきました。ありがとうございました。

# PyCharmの場合の注意点

PyCharmはコマンドを打たなくてもボタン一つで開発用サーバーを立ち上げてくれたりするので、とても便利です。

ただし、Djangoプロジェクト新規作成直後のmanage.pyおよびwsgi.pyが

    os.environ.setdefault("DJANGO_SETTINGS_MODULE", "プロジェクト名.settings")

と、setdefaultになっていますね。

そのため何かの拍子にこの環境変数がPyCharmのRun/Debug configへ自動で登録されてしまい、
思ったsettingsファイルを読み込んでくれなかった（のに気づかず何時間も消費した）ことがありました。

## 解決法

大きく２つあるかと思います。

### Run/Debug configをこまめに確認する

何か怪しい、おかしいと思ったらとりあえず見てみましょう。
初心者ならばとりあえずここからでもよいのかなと思います。

### manage.pyおよびwsgi.pyの上記の行を書き替える

たとえば以下のようにします。

    os.environ.get("DJANGO_SETTINGS_MODULE")

こうすると、デフォルトの値がなくなるので、manage.pyは環境変数で与えられたsettingsファイルを読んで立ち上がるか、または立ち上がらないという挙動になります。

狙った以外のことが起こらなくなると、頭の負担が減るので私はこちらの方法が好みです。

ただし環境変数"DJANGO_SETTINGS_MODULE"の入力が毎回必須となるので、手打ちだと面倒なことになります。
しかしせっかくのIDEですから、PyCharmへ設定してそんな手間も全部消してしまいましょう。

#### 開発用サーバー
画面上部にあるサーバーを立ち上げる三角形のボタンの左の枠をクリックして、Run/Debug configウィンドウを出すと設定できます。

#### Tools -> Run manage.py Task...
マイグレートなどのためには、こちらから出せる専用のCLIを使うと便利です。
こちらも環境変数を設定できます。
File -> Settings -> Languages & Frameworks -> Django
とクリックしていって、Magage.py tasksのEnvironment variablesへ設定すればOKです。

# 終わりに
以上、初心者のPyCharmユーザーがDjangoでsettings分割したときの引っかかりポイントでした。
初投稿のため拙い部分もありましたでしょうがご容赦願います。

情報不足気味の初心者引っかかりポイントやニッチな引っかかりポイントなど
自分が初心者であるからこそ気づくこともあるかと思いますので、
そういったのを見つけて解決できたらなるべく投稿するようにしていきたいと思います。

ご清聴ありがとうございました。
ハイパーテキストとハイパーリンクと相対パス絶対パスのこと

#**ハイパーリンク**

テキストからテキストや画像や音声へジャンプできる仕組み
行きたい目次をクリックするとそのページまで飛んでくれたりするアレ

ハイパーリンクには「入り口」と「出口」が必要。
ここから飛びますよとタグで意味付けしておき、出口(ジャンプ先)を作っておく。

#**ハイパーテキスト**
名前の通り「テキストを超えたテキスト」という意味
ただの文章にはない機能を備えたテキスト

テキスト中のある語句から他の文書へ飛んだりできる機能を持ってたりする(ハイパーリンク)

#**HTMLとは**
ハイパーテキストマークアップラングエイジ(HyperText Markup Language)の略。
タグなどで囲われ意味付けされた文章を作ることができる言語。
マークアップとは文章をマーク(タグとかの目印)でアップ(付ける)する、つまり印をつけるということ。
ハイパーテキストとあるように、ただの文章にはない機能を文章に持たせることができる。

#**(おまけ)相対パス**
何か探したいファイルがあるとして、今いる場所を基準としてそのファイルがどこにあるかというのが相対パス。

#**絶対パス**
何か探したいファイルがあるとして、今自分がどこにいるのか関係なく、常にルートディレクトリ(/)から見てそのファイルがどこにあるのかというのが絶対パス

#参考
https://shikumikan.com/it/how-www-works1/
[非公式] Ionic v3でAngular 6を使う方法（追記あり）

Ionic v3の `dependencies` をみると、AngularとRxJSが5系であることに気づくと思います。これは、RxJS5 => 6で多くの破壊的変更があったことが理由にあります。大体は `pipe` オペレーター導入によるものです。
Ionic Native 5 が正式リリースしたら改善されるかなと思っているのですが、Firebaseの `dependencies` の関係上、AngularとRxJSのバージョンをあげたい！！という声をちらほら聞きますので、対応をまとめておきます。

# アップデート方法
## 1. package.jsonのアップデート
まず、`ionic-angular` を非公式のGitレポジトリからとってくるように設定します。

```
"ionic-angular": "git://github.com/rdlabo/ionic-angular-v6.git",
```

私がつくったもので非公式ですので、中身が気になる方は[GitHubのFile Changes](https://github.com/ionic-team/ionic/pull/15455/files)をご覧ください。

続いて、Angular、RxJS、Ionic Nativeのバージョンをあげてください。Ionic Nativeはまだbeta版ですが、RxJS 6に対応したbeta版がリリースされているのでそれを使います。以下以外のパッケージをご利用の場合、それぞれアップデートください。

```json
"@angular/common": "~6.1.10",
"@angular/compiler": "~6.1.10",
"@angular/compiler-cli": "~6.1.10",
"@angular/core": "~6.1.10",
"@angular/forms": "~6.1.10",
"@angular/platform-browser": "~6.1.10",
"@angular/platform-browser-dynamic": "~6.1.10",
"@angular/router": "~6.1.10",
"rxjs": "^6.2.2",
"@ionic-native/core": "5.0.0-beta.22",
"@ionic-native/splash-screen": "5.0.0-beta.22",
"@ionic-native/status-bar": "5.0.0-beta.22",
```

devDependenciesにアップデートします。__TypeScriptのバージョンを2.9まであげるとAoTビルドで`Cannot find module "."`とでることがありますので。動作確認ができてる2.8.3としておきます。__（[参考](https://github.com/webpack/webpack/issues/4921#issuecomment-419746438)）

```json
"@ionic/app-scripts": "3.1.7",
"typescript": "2.8.3"
```

設定が終わったら、 `npm install` でパッケージをインストールください。

## 2. Ionic Nativeのimport元の変更
Ionic Native 5では、Angular以外でも利用できるように仕様の変更が入ってます。具体的には、Angularで利用する時は、パッケージの `ngx` からインポートする必要があります。例えば、 `SplashScreen` をインポートするなら、上から下のように変更します。

```ts
- import { SplashScreen } from '@ionic-native/splash-screen'; 
+ import { SplashScreen } from '@ionic-native/splash-screen/ngx';
```

すべてのIonic Nativeで変更が必要です。

## 3. RxJSの変更
既存プロジェクトなら、RxJSを使われてるものが多いと思います。例えば

```ts
this.load().map((data: any) => {
```

なら、`pipe`オペレーターを使うようになるので

```ts
this.load().pipe(map((data: any) => {
```

と文法が変わります。ここらへんのアップデートにつきましては [RxJS 6.0 変更点まとめ（適宜更新）](https://qiita.com/ponday/items/7966787fa0bc8f3e2dde) が詳しいので、こちらをご参照ください。

## 4. Injectable の追記

```
@Injectable()
```

を

```
@Injectable({
  providedIn: 'root',
})
```

に書き換えます。Angular 6で、InjectableがTree Shaking可能になったための変更なのですが、詳しくは[Angular v6で導入されるTree-Shakable DIの紹介](https://lacolaco.hatenablog.com/entry/2018/03/01/150847) をご覧ください。


# まとめ
これで、Ionic v3で、Angular 6を使えるようになりました。Angular / RxJSのバージョンが最新なので、Firebaseであったり、最新のnpmパッケージを導入するのが簡単になるかと思います。

なお、Ionic Nativeがbeta版であること、非公式の方法であることをご留意いただけますと幸いです。

それでは、また。


# おまけ：Angular 7にはあげれないの？
`@ionic/app-scripts`（Angularのビルドまわりを担当してるパッケージ）の依存関係の問題で、Angular 7にあげることはできません。

```json
"@angular-devkit/build-optimizer": "0.0.35",
"@angular/compiler-cli": "5.0.3",
"@angular/core": "5.0.3",
```

ここあたりを整理しないといけないのですが修正範囲かなり広いんですよね・・・。Ionic 4がそろそろリリース前で落ち着いてきてるので、Angular 7以降を利用したい方はIonic 4へのアップグレードをご検討いただけましたら幸いです！
ショッピングサイトのフォームでエラーメッセージを過剰に出さないように配慮する

# どこがいけてない？

Railsで作ったショッピングサイトの注文フォームにメールアドレスを入力する覧があり、対応するモデルではバリデーションを次のように書いたとします。

```ruby
class Item < ApplicationRecord
  validates :email, presence: true, format: {with: /@/}
end

Item.create.errors.full_messages # => ["Email can't be blank", "Email is invalid"]
```

書式チェックが雑とかいうのは一旦置いといて、未入力だった場合、2つのエラーメッセージが出ています。これがいまいちです。

開発者からしたら些細なことかもしれません。むしろ、バリデーションがしっかり効いていることが確認できて良しと見るかもしれません。が、利用者からしてみれば煩わしく感じます。

なんでそんなに注意されないといけないのか、入力してないんだから無効なのはあたりまえじゃないかと心証を悪くしそうです。もしくはエラーメッセージの多さにびっくりして、なんだかわからないけどそんなに入力しないといけないならもういいやと帰ってしまうかもしれません。

# どうすればよいか

そこで **allow_blank** オプションです。

次のように書式チェックの方に指定すれば、空の場合にスキップしてくれるようになります。

```ruby
class Item < ApplicationRecord
  validates :email, presence: true, format: {allow_blank: true, with: /@/}
end

Item.create.errors.full_messages               # => ["Email can't be blank"]
Item.create(email: "xxx").errors.full_messages # => ["Email is invalid"]
```

これなら利用者に優しいです。

# もっと良くしたい

ただ、上の場合、自分にはコードが解りにくいです。同じ行に presence と allow_blank があるからです。必須なのか空でもいいのか判然としません。(いや、わかるだろう)

また、バリデーションの部分などは、あとあと確認、変更しがちなところなので最大限に読みやすく、風通しよくしておきたいところです。

カラムのバリデーションは別に一箇所で全部書かないといけないわけではありません。なので、個人的には次のように分けて書くようにしています。

```ruby
class Item < ApplicationRecord
  with_options presence: true do
    validates :email
  end

  with_options allow_blank: true do
    validates :email, format: {with: /@/}
  end
end

Item.create.errors.full_messages               # => ["Email can't be blank"]
Item.create(email: "xxx").errors.full_messages # => ["Email is invalid"]
```

冗長ですか？ いいんです。これぐらい冗長で。

上のブロックでは必須かどうかだけを**一行ずつ**並べます。下のブロックでは詳細なバリデーションに専念します。必須かどうかという情報が含まれる行と、詳細なバリデーションを分離します。

これなら開発者自信にも優しいです。

# まとめ

allow_blank オプションを適切に使っていこうという内容でした。

例としてフォームのエラーメッセージを上げましたが、APIのエラーメッセージなどにも同様のことが言えそうです。詳細を返すのではなく、まず値が入力されていなければ、それだけを伝えてあげた方が親切ではないかなと思います。
hubot

昔やった時に残したテキストが出てきたので、こっちに移しておく。
あくまで自分用。

####rootパスワード変更
```
alfas123@localhost:~$ sudo passwd root
[sudo] password for alfas123:
Enter new UNIX password:
Retype new UNIX password:
passwd: password updated successfully
```

####sudoにユーザー追加
```
#sudo gpasswd -a ユーザー名 sudo
```
$は一旦落ちて、再度ログインしないと駄目。

####gitインストール
```
$sudo apt-get install git
```

####node.jsインストール
```
$curl -L https://deb.nodesource.com/setup_6.x | sudo bash -
$sudo apt-get install -y nodejs
```

####hubotをインストールしてテンプレート作成
```
$sudo npm install -g yo generator-hubot

$mkdir myhubot
$cd myhubot
$yo hubot

? Owner alfas123
? Bot name hellobot
? Description A simple helpful robot for your Company
? Bot adapter slack
create bin/hubot
create bin/hubot.cmd
create Procfile
create README.md
create external-scripts.json
create hubot-scripts.json
create .gitignore
create package.json
create scripts/example.coffee
create .editorconfig
```
怒られるので、不要なhubot-scripts.jsonを破棄して、external-scripts.jsonの要らない行を削除。

```
/myhubot$ rm hubot-scripts.json
/myhubot$ vi external-scripts.json
bin/hubot
```
 
#####slackのApps&integrations
hubotは検索して選ぶ。APItokenを手に入れる。
 
#####シェル作成
```
/myhubot$ vi hellobot.sh

#!/bin/sh
export HUBOT_SLACK_TOKEN=xoxb-123456789012-xxxxxxxxxxxxxxxxxxxxxxxx
./bin/hubot --adapter slack
/myhubot$ chmod u+x hellobot.sh
```

#####実行
```
/myhubot$ ./hellobot.sh
```

####foreverのインストールとデーモン化
```
$sudo npm install forever -g
$forever start -w -c coffee node_modules/.bin/hubot --adapter slack
```
Heroku覚え書き


###Heroku CLIの導入

https://devcenter.heroku.com/articles/heroku-cli
or
`brew install heroku/brew/heroku`

###Toolbelt（CLI）のインストール

heroku CLI install


###ログイン
heoku login

##Postgres
###psqlの導入（pg:psqlの実行に必要）

`brew install postgresql`

`Heroku pg:psql -a アプリ名`
GAE/SE PHP 5.5環境と7.2環境のapp.yamlの違い

GAE/SE (Google App Engine Standard Environment) のPHP 5.5環境で動いていたアプリケーションを最近発表されたPHP 7.2環境に引っ越そうとしたところ、それまで動いていた`app.yaml`の書き方では動かなくなっていた、という話題です。

第一世代のGAE/SE環境では、下記のような`app.yaml`が一般的だったと記憶しています。

```yaml:app.yaml　(GAE/SE第一世代）
runtime: php55

handlers:
- url: /js
  static_dir: js
- url: /css
  static_dir: css
- url: /
  script: php/index.php
```

第二世代のGAE/SE環境では全リクエストをフロントコントローラで受けるモデルが前提になっており、デフォルト設定では全リクエストを`index.php`で受けるようになっています。

下記のように`entrypoint`を設定すればフロントコントローラのパスが変更できます。

```yaml:app.yaml　(GAE/SE第二世代）
runtime: php72
entrypoint: serve php/index.php
```

ところで以前のように静的ファイルのパスを`handlers`で指定しようとすると`entrypoint`の設定が無視されてしまって意外とハマります（私はハマりました）。

公式ドキュメント「[app.yaml Configuration File](https://cloud.google.com/appengine/docs/standard/php7/config/appref)」に書いてある通り、下記のように記述すれば`handlers`と`entrypoint`を共存させることができます。

```yaml:app.yaml　(GAE/SE第二世代）
runtime: php72
entrypoint: serve php/index.php

handlers:
- url: /js
  static_dir: js
- url: /css
  static_dir: css
- url: /
  script: auto
```

補足ですが、`php72`になって`script`にPHPファイルを指定しても動かなくなったので、`php55`時代にマルチコントローラで書いていたアプリケーションを移植する場合はルーティングするだけのフロントコントローラを書く必要があります（参考：「[PHP 7.2 Runtime Environment](https://cloud.google.com/appengine/docs/standard/php7/runtime#application_startup)」）。
VSCodeでSpring Boot プログラミング

# はじめに
「VSCodeが使いやすいのにSpring BootでIntelliJとかSTSとかをなんで使わなきゃいけないんジャー」と思っていたのでVSCodeでSpring Bootの環境を作ろうと思った。
と思ったけど先駆者がすでにいたので参考。
[VSCodeでSpring Bootのプロジェクトを実行する](https://qiita.com/chakimar/items/39937cf39d2069758c83)
そこで触れられてないところを主に書く。

# 基本
- Java Extension Pack
- Spring Boot Extension Pack
- Lombok Annotations Support for VSCode

をExtensionsから入れる。Lombokは個人的に。

# コードの整形
多分メインはこれ。

## Prettier
<img width="730" alt="スクリーンショット 2018-09-09 10.14.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/212284/759386c6-ddb7-21a4-4e5d-00713a7dd30b.png">
コードの自動整形をするための拡張機能。まず入れる。
設定から整形ルールは決められると思うがせっかくあるので、次にFormatter入れる。

## Formatter
VSCode上で`command + shift + P`で機能検索ができるのでそこでformatと検索すると候補で
<img width="591" alt="スクリーンショット 2018-09-09 10.17.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/212284/7d66a1f4-caef-667a-d547-a6777d1a1ee7.png">
こんなのが出てくる。これを選択すると、フォーマットファイル名を尋ねられるので選択（とりあえずデフォルトで）。
<img width="600" alt="スクリーンショット 2018-09-09 10.20.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/212284/24a7818b-8ab0-7d5f-134e-ac936fe59713.png">
指定されたフォーマットファイルがない場合、「新しく作りますか〜？」的なことを聞かれるのでYes。
<img width="454" alt="スクリーンショット 2018-09-09 10.20.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/212284/54f0075c-5f84-6bbe-9062-ed5d27ba3edf.png">
するとプロジェクト内にフォーマットファイルができるので開く。
<img width="842" alt="スクリーンショット 2018-09-09 10.24.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/212284/63b89c1c-4ad5-38e5-60dc-cd457f8d67b1.png">
なんかいっぱいフォーマット設定が出てくるのでお好きに変える。
最後にWorkSpace Settingsでフォーマットファイルを指定（多分自動で設定してある）。
<img width="461" alt="スクリーンショット 2018-09-09 10.28.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/212284/37cb9125-62c4-149c-edb5-16418f3b34e5.png">
これで整形できるはずだが、保存時に自動整形させたいのでそれも。

## 自動整形
Javaの時だけ保存時に整形したい場合はUser Settingsに

```
"editor.formatOnSave": false,
"[java]": {
    "editor.formatOnSave": true
}
```
を記載するだけ。

# 感想
いろいろありすぎていろいろ便利すぎて、もうVSCodeってIDEじゃないの？って思う。
「redirect_to @x」や「link_to "▲▲", @x」、「url_for @x」の「@x」ってなによ！？


 　
　
ひと言でいえば、そのインスタンス変数に代入されたインスタンスに対応する
showアクションを実行する感じ。
　

---
以下、`url_for`における`@x`だけを考えるが、`redirect_to`や`url_for`における`@x`も同様である。 
  
 
具体的に考えてみよう。
まず、以下のようにルーティングが定められているとする。
  
```routes.rb
resources :xs
```
 
「xs」とはコントローラー名のことで、「resources」でRESTfulなルーティングをつくる。
　
もちろん、xとは抽象的に書いただけであり、じっさいはbookとかmessageとか具体的な名称になる。
　
ここで、

```◯◯.html.erb
<% @x = X.find(2) %>
```
で`id = 2`のレコードを取得し、インスタンス変数にインスタンスとして代入。
 
そして、

```◯◯.html.erb
<%= url_for @x %>
```
でリンク`/xs/2`が作成される。
 
このとき、ルーティング一覧より、`/xs/2`はxsコントローラーのshowアクションを示していることが分かる。 もちろん、このとき（`/xs/2`）の2とは、先ほど代入したレコードのidのこと。
Let’s Encrypt!!を始めよう

#Let’s Encrypt!!
オレオレ証明書の時代はもう終わってしまった・・・
Let’s Encrypt最高だったので紹介

##どんなもの？
Archウィキより引用
>
Let’s Encrypt はフリーかつ自動化されたオープンな認証局です。ACME プロトコルを利用しています。
公式クライアントは Certbot という名前で、コマンドラインから有効な X.509 証明書を取得できます。また、手動で CSR 作成を行うミニマルなクライアントを acme-tiny でインストールすることができます。スクリプトで使用するのに適したクライアントとして simp_le-gitAUR や letsencrypt-cliAUR も存在します。
>

もうオレオレ証明書で危険なサイトなんて表示させない！！

##インストール
Let’s Encryptは「Certbot」という公式ツールを使用する
各ディストリビューションごとのインストール方法は下記参照

https://certbot.eff.org/

今回はArchLinux＋nginxの構成で作成する。

```:install
sudo pacman -S certbot-nginx
```

##証明書生成＆nginxコンフィグ自動設定

certbot-nginx プラグインは nginx の server ブロックを自動的に設定してくれる。
※書き換えられたくなかったら、証明書生成のみを実施！

```:生成&書き換え
sudo certbot --nginx
```

```:生成のみ
sudo certbot --nginx certonly
```

上記にて下記の場所に証明書が生成される
/etc/letsencrypt/live/[domain]/



※例としてexsampele.comで記述しているが、実際はこの設定でやるとエラーはくので注意exsampele.comは自分のFQDNに置き換えてください。

例：
_befor_

```:/etc/nginx/conf.d/ssl.conf
server {
  listen 443;
  server_name  exsampele.com;

  ssl                  on;
  ssl_certificate      /etc/nginx/cert.crt;
  ssl_certificate_key  /etc/nginx/cert.key;
  ssl_session_timeout  5m;
  ssl_protocols  SSLv2 SSLv3 TLSv1;
  ssl_ciphers  HIGH:!aNULL:!MD5;
  ssl_prefer_server_ciphers   on;

  location / {
    root   /usr/share/nginx/html;
    try_files $uri $uri/index.html $uri.html @gitlab;
  }

  #error_page  404              /404.html;

  # redirect server error pages to the static page /50x.html
  #
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}
```

_after_

```:/etc/nginx/conf.d/ssl.conf
server {
  listen 443;
  server_name  exsampele.com;

  ssl                  on;
  ssl_certificate /etc/letsencrypt/live/exsampele.com/fullchain.pem; # managed by Certbot
  ssl_certificate_key /etc/letsencrypt/live/exsampele.com/privkey.pem; # managed by Certbot
  ssl_session_timeout  5m;
  ssl_protocols  SSLv2 SSLv3 TLSv1;
  ssl_ciphers  HIGH:!aNULL:!MD5;
  ssl_prefer_server_ciphers   on;

  location / {
    root   /usr/share/nginx/html;
    try_files $uri $uri/index.html $uri.html @gitlab;
  }

  #error_page  404              /404.html;

  # redirect server error pages to the static page /50x.html
  #
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   /usr/share/nginx/html;
  }
}
```
書き変わった、簡単、最高！！
arduinoでPID_v1

#概要
arduinoでpid制御やってみた。



#写真

![image](https://qiita-image-store.s3.amazonaws.com/0/18104/042ba42a-34ca-27a6-b565-570d54d362bb.png)



#サンプルコード

```
#include <PID_v1.h>

double Setpoint,
	Input,
	Output;
double Kp = 1,
	Ki = 1.8,
	Kd = 0.3;
PID myPID(&Input, &Output, &Setpoint, Kp, Ki, Kd, DIRECT);
volatile float Duty;
volatile unsigned long UpNew,
	UpOld,
	DownNew,
	DownOld;
void isr()
{
	if (digitalRead(2) == LOW)
	{
		DownOld = DownNew;
		DownNew = micros();
		Duty = (DownNew - UpOld) * 30 / (DownNew - DownOld);
	}
	else
	{
		UpOld = UpNew;
		UpNew = micros();
	}
}
void setup()
{
	pinMode(3, OUTPUT);
	pinMode(2, INPUT_PULLUP);
	attachInterrupt(0, isr, CHANGE);
	Serial.begin(115200);
	Setpoint = 50;
	myPID.SetMode(AUTOMATIC);
}
void loop()
{
	Input = Duty;
	myPID.Compute();
	analogWrite(3, Output);
	Serial.print(Setpoint);
	Serial.print(",");
	Serial.print(Input);
	Serial.print(",");
	Serial.println(Output);
	delay(100);
}
```

以上。
【React】create-react-appとbrowserifyでの環境構築違い

# 環境構築に沢山選択肢がある！！
・reactの環境開発に必要なものは多く一から構築するのは初心者には大変！
・パッケージ管理 => npm、yarnなど...
・使用するライブラリやフレームワーク => react, react-dom, vue.js, angular.j.など...
・JSX/ES6のトランスパイラ => Babel、関連プラグインなど...
・ビルドツール => Browserify、webpackなど...
・フォーマッター・構文チェック => ESLintなど...

# 環境構築を行うにあたり！
- `create-react-app`のコマンド一つでReactのアプリが生成できるようにする(岩崎)
- でも、`Babel`と`browserify`で一から作成もしたい(小林)

# create-react-app
面倒臭いreactにおける環境構築を一発で行ってくれる！
nodeをインストール　→　npmをインストール　→　create-react-app　→　npm start実行！

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

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f33353531342f34363365383764662d313137612d656439302d353230352d3539366131306161623462632e706e67.png](https://qiita-image-store.s3.amazonaws.com/0/270048/3277f3a3-9849-4db3-a974-3a8c23f9c511.png)

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

##　メリット
・ webpack、browserifyの設定が不要
・ バベルの設定も不要

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



# Babelとbrowserify
Reactを使う時には生のJavaScriptを直接書くのは疲れるので、もっと楽に書けるES2015やJSXを使う
*JSX
JavaScriptコード中にHTMLタグを埋め込んでいるかのように記述できます。
コードの量が少なくなり、とても見やすい


```

(例)
*ES2015(ES6)
<script type="text/babel">
    ReactDOM.render(
            <h1>開発合宿楽しいよ</h1>,
        document.getElementById('root')
    );
</script>

*ES5
<script>
    ReactDOM.render(
      React.createElement(
          'h1',
          null,
          '開発合宿楽しいよ'
      ),
        document.getElementById('root')
    );
</script>

```

しかし、問題が...
ES2015やJSXはブラウザで直接動かすことができません。

#Babel
ここでBabelが登場
Babelはこれらをブラウザで動く生のJSに変換してくれます。

#Browserify
npmにあるライブラリをクライアントサイドで使えるようにできる。
つまり、Browserifyというのはnodeのrequire('aaa')という、依存関係解決機能をブラウザに持ち込める。

#gulp（タスクランナー） 処理を自動化
gulpfile.jsの設定
編集したJavaScriptのファイルを保存すると、自動で以下の処理を実行する。
1.ES2015,JSXなファイルをbabelでコンパイル
2.browserifyで一つのファイルまとめる(bundle.js)
3.サーバーの起動

監視対象
index.js
index.html
に加えて、srcディレクトリ配下のjsファイル

これらのファイルが更新されていたら、ビルドしてブラウザをリロードします。

上記の処理はgulpfile.jsで設定しています。


ここからは、Reactについてです。
Reactでは、コンポーネントというものを定義して、それを組み合わせることで画面を作ります。
一つ一つが部品のようになっているので、保守性の高いアプリケーションを作ることができると言われています。

例
index.htmlを作成します。

```
<div id="container"></div>
```

のようにしてReactで生成する仮想DOMを適用する場所を作ります。（コンポーネントを埋め込むイメージです）

コンポーネントを渡す部分はこのようになります。
#index.js

```
ReactDOM.render(
    <App />,
    document.getElementById('container')
 )
```

Appコンポーネントをid=containerな要素に渡しています。Appコンポーネントを定義しているApp.jsにはさらに、いくつかのコンポーネントが繋がっています。

このことからも、Reactではコンポーネントを組み合わせて、画面を作っていることが分かります。
RFC 7239 - Forwarded HTTP Extension を掻い摘んでみる

# 何の情報？
RFC 7239でHTTPのForwardedヘッダを調べた時の記録。
日本語訳したわけではなく、情報をかいつまんで整理したもの。

# Introductoin
近年、HTTPで通信する際にproxyが通信経路に含まれることが多い。
proxyが通信経路に含まれると、HTTPサーバに到達するパケットの送信元IPアドレスは、実際のリクエストを送信したクラアントではなく、proxyのものになってしまう。
そのため、以下のような機能をHTTPサーバで利用しようとした際に、期待通り動作しない可能性がある。

- アクセス分析などを目的とした統計情報収集
- IPアドレスによるアクセス制御
- 不正利用の検出

Forwardedヘッダは、proxyによって隠蔽されたクライアントIPなどの情報を得るために利用される。同様の情報を提供する下記の非標準ヘッダもあるが、Forwardedヘッダはこれらのヘッダ情報が統合されたイメージ。

```
X-Forwarded-For
X-Forwarded-By
X-Forwarded-Proto
```

# Forwarded HTTP Header Field
ForwardedヘッダはOPTIONALなHTTPリクエストヘッダで、forwarding proxyやreverse proxyに適用する。セキュリティを考慮して、デフォルトはOFFにすべき。
Forwardedヘッダには例えば以下の情報が含まれる。

- リクエストの送信元IPアドレス
- proxy上でリクエストを受け付けるIPアドレス
- HTTP, HTTPSなどのスキーム

通信経路上にproxyが複数含まれる場合、各proxyで上記の情報を追加、削除することができる（必須ではない）。

## ForwardedヘッダのABNF syntax
``` text:RFC7239から引用
Forwarded   = 1#forwarded-element

forwarded-element = [ forwarded-pair ] *( ";" [ forwarded-pair ] )

forwarded-pair = token "=" value
value          = token / quoted-string

token = <Defined in [RFC7230], Section 3.2.6>
quoted-string = <Defined in [RFC7230], Section 3.2.6>
```

- 複数のforwarded-pairを含めることがでる
- 各forwarded-pairは`;`区切り
- forwarded-pairはtokenとvalueを`=`で連結したもの
- パラメータ名(token)は大文字/小文字の区別なし

パラメータ名には下記4種類を指定可能。

| パラメータ名 | 概要 |
|:------|:----------------------------------|
| by    | リクエストを受信したproxyのinterface    |
| for   | proxyにリクエストを送信したノード         |
| host  | proxyへのリクエストに含まれるHohtヘッダ値 |
| proto | リクエストのプロトコル(http, httpsなど)   |

## Forwardedヘッダ例
```text:RFC7239から引用
Forwarded: for="_gazonk"
Forwarded: For="[2001:db8:cafe::17]:4711"
Forwarded: for=192.0.2.60;proto=http;by=203.0.113.43
Forwarded: for=192.0.2.43, for=198.51.100.17
```

proxyがForwardedヘッダ値を追加する場合、下記いずれかの方法がある。

- 新規ヘッダ：HTTPヘッダの末尾に新たなForwardedヘッダを挿入
- 同一ヘッダ：HTTPヘッダ内の最後のForwardedヘッダに`,`区切りで値を挿入

前述の通り、proxyはForwardedヘッダを削除することが可能。
また、Forwardedヘッダが複数存在する場合は、更新対象のForwardedヘッダを正確に選択しなければならない。

# 補足
## Viaヘッダとの違い
Viaヘッダも似たような用途で利用されるが、Viaヘッダはproxy自体の情報を格納するためのものであり、クライアント情報は含まれない。
wordpressウィジェットで特定カテゴリを非表示

wordpressのウィジェットでカテゴリを表示する際
・親カテゴリのみ非表示にしたい
・あるカテゴリを除外したい
という要望がありました。

#widget_categories_argsというフック
widget_categories_argsというフックがあり
このフックでウィジェットの内容を調整できるというものがありました。
https://codex.wordpress.org/Plugin_API/Filter_Reference/widget_categories_args

wp_list_categories()という関数に渡す前に
ウィジェットを調整するフックということでした。

#使い方
[wp_list_categories()の引数](https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/wp_list_categories)を使える感じで
以下のようにフックに配列を投げると
あとはwp_list_categories()のようにふるまってくれて
ウィジェットを好きに調整できる感じでした。

```widget.php

add_filter('widget_categories_args', 'adjustment_category', 10);
function adjustment_category(){
	$cat_args['child_of'] = '2';// 親カテゴリを非表示に
	$cat_args['title_li'] = '';// カテゴリタイトルを非表示に
	return $cat_args;
}

```
VS Code で 80 桁の位置に線を表示させる

行の長さが 80 桁を超えないようにコードを書いていると、やはり目安があると便利ですね。私は VS Code では `settings.json` にこう設定して 80 桁の位置に線が表示されるようにして使っています。

```json
{
  "editor.rulers": [80]
}
```

array なので他の桁にも目安がほしいという場合にも対応できますね。
React-Nativeで遊んでみる 導入編

# React-Native
最近，Webアプリもいいけど自分がアプリ開発を始めるきっかけとなったネイティブアプリの開発にも力を入れてみようと思い始めました．
でも，Swiftは~~挫折した過去があるし，，~~（ほとんど頑張ってない）どうしよう，，

...

## React-Nativeとの出会い

**React-Native???**
**Webアプリの技術をそのままネイティブアプリ開発に活かせる???**
**React.jsならさわったことあるぞ?**

単純な自分はさっそくReact-Nativeなるものをnpmでインストールしました！

~~のちにパッケージのインストールで再びXcodeと戦うことになることになろうとは知る由もなかった...~~

## プロジェクトの作成
インストールしたら以下のコマンドでささっと雛形が出来ちゃいました！

```
% react-native init sampleProject
```

## アプリをビルド&起動

プロジェクト直下に移動

```
% cd sampleProject
```

よくわからんけどまずこのコマンド(自分はいきなり`react-native run-ios`するとエラー出ました)

```
% npm start
```

↑のコマンドが実行完了したらiOSのシミュレータ起動します

```
% react-native run-ios
```
初めてのビルドだとわりと時間かかります，，
たったこれだけのコマンドでネイティブアプリが出来ちゃいました！

次からは実際にカスタムしていきます！
ブラウザだけで micro:bit javascriptブロックエディター用パッケージ（拡張）が作れるGitHub package authoring

# これまでの状況

これまでmicro:bitの javascriptブロックエディター(以下makecode）用パッケージを[作ろう](https://makecode.com/packages/)とすると、nodeの環境設定でハマったり、bumpしてもすぐに反映されなかったりと、やる気を削がれる事が多い状況でした。

# GitHub package authoring

2018年9月9日現在、まだリリースされていませんが、まもなくmakecodeが[リニューアル](https://makecode.com/blog/microbit/v1-beta)します。
これに合わせて、ブラウザだけでパッケージを作る事が出来る[GitHub package authoring](https://makecode.com/blog/github-packages)
がリリースされます。

## サンプルとして何もしない「コメントブロック」を作ってみる

makecodeには元々コメント機能があります。従来はコメントを表示しっぱなしに出来なかったのですが、v1-betaからは、表示しっぱなしに出来るようになりオーっと思ったのですが、まだツッコミどころは一杯ありそうです。
![comment.jpg](https://qiita-image-store.s3.amazonaws.com/0/44523/e0789b0a-89a6-2eb8-a7dc-790c9056490b.jpeg)

そこで、GitHub package authoringを使ってサンプルとして「一切なにもしないコメントが書けるブロック」を作ってみます。ちなみに、新しいmakecodeでは、パッケージと言わず拡張と呼ぶようになるようです。（以下、拡張）

## 手順

### makecodeとGitHubを接続

GitHubのアカウントを持っている事を前提として書きます。

1. GitHubにログインしておきます
2. https://makecode.microbit.org/beta にアクセスして新しいプロジェクトを作成します(v1リリース後は/betaは不要になります)
3. 右上の歯車マークをクリックし「拡張」（従来のパッケージ）をクリックします
4. 画面下の「Login to GitHub」をクリックします。
5. 認証トークンを貼り付ける画面になります
6.  GitHub token generation pageのリンクをクリックしrepoへのアクセス権限を与え、Generate token をクリックします。
![p4.jpg](https://qiita-image-store.s3.amazonaws.com/0/44523/a2b52ed4-3d3a-822b-7971-1d5b9ffe342c.jpeg)
7. 生成したトークンをコピーして 5の画面に貼り付ければ接続完了です
![p5.png](https://qiita-image-store.s3.amazonaws.com/0/44523/286f1185-8eab-6078-a80f-384e23805cdf.png)

### 新規拡張環境を生成

1. 上部のホーム（従来のプロジェクト）をクリック
2. 右の方にある「読み込む」をクリック
3. 「Your GitHub Repo... 」をクリック
4. 一番上の「Create new...」をクリック
5. 「Create HitHub repo」でレポジトリ名と説明を入力し「つづける」をクリック
![p6.png](https://qiita-image-store.s3.amazonaws.com/0/44523/09b33b03-c4f8-0fd5-428a-43a643cf130e.png)
6. 従来のpxt init を実行した際と同じ構造が自動的につくられmain.tsやtest.tsも用意されます

### 拡張を開発

開発方法は、https://makecode.com/extensions/getting-started/simple-extension あたりを参考にしてください。

1.初期パッケージにあるmain.tsとtest.tsを書き換えます

```Javascript:main.ts
//% weight=70 icon="\uf075" color=#555555 block="コメント"
namespace comment {
    //% blockId=show_strings block="コメント %v"
    export function noaction(text: string): void {
    }
}
```

```Javascript:test.ts
// tests go here; this will not be compiled when this package is used as a library
basic.forever(() => {
    comment.noaction("test")
})
```

2.GitHubにCommitを行いつつpxt bumpを実行します

![p7.png](https://qiita-image-store.s3.amazonaws.com/0/44523/cc619679-66e9-789f-cada-84b842057504.png)
![p8.png](https://qiita-image-store.s3.amazonaws.com/0/44523/012e3ce0-8356-eb0e-1a3a-3a675de8df91.png)

以上で完成です。

### 動作確認

新しいブラウザのウインドウを開き、makecodeにアクセス(2018年9月9日現在はbetaでないと駄目）し「拡張」を見ると自分で作ったパッケージが表示されるようになります。
![p9.png](https://qiita-image-store.s3.amazonaws.com/0/44523/0b9f0046-08c6-4dbe-3454-6503280be4db.png)
![p10.png](https://qiita-image-store.s3.amazonaws.com/0/44523/538d88b1-21c1-5269-19ec-efbf3af9697d.png)

### 公開

作った拡張を人に伝える場合は、readmeを整えGitHubのURLを公開すればOKです。
php-master-changes 2018-09-08

# 2018-09-08
## carusogabriel: Use combined assignment contanation operator
- https://github.com/php/php-src/commit/98b01a14e3f29a058952563cd90785227dcfb3f6
- make test 時などに使われる run-tests.php で、.= の複合代入演算子を利用するよう修正

## cmb69: Report mem leaks to stderr if no Win debugger is present
- https://github.com/php/php-src/commit/3145d6c6b9286c13bc84496d3f3d9853a030136a
- Windows ではデバッガにアタッチされている場合のみメモリリークをレポートしていたが、通常デバッガなしで実行される PHPT のテスト時にレポートされなくなるので、デバッガがなしの場合は stderr へ出力するよう修正

## carusogabriel: Fix PCRE2 exclusion and remove dead libs in Makefile.gcov
- https://github.com/php/php-src/commit/5df49555a902ef105a6d699ff8fde8ba7ea81220
- カバレッジレポートから PCRE2 を除外、[PCRE2 取り込み時](https://github.com/php/php-src/pull/2857)に漏れていたもの
- すでにコードに含まれていない ext/pdo_sqlite/libsqlite の除外用記述を削除
- バンドルされているだけの外部ライブラリは PHP のプロジェクトのカバレッジに含めるべきではない
debian 9 に linuxbrew で hub を入れる手順

CLI が大好きなので github を操作するにも CLI でやりたい．そんなときは hub コマンドを使おう．
https://github.com/github/hub

しかし READMEには，Mac, Windows, Fedora Linux, Arch Linux への導入方法はあるのに，僕の愛する debian への導入方法がない．

## Linuxbrew をつかおう
詳しい説明は他に譲るが，linuxbrew は homebrew を linux で使えるという最強としか言いようがないツールだ．
Debian 9 on ChromeOS/Crostini では，以下のようにして導入した

```
sudo apt-get install linuxbrew-wrapper
```

これだけ．あとは

```
linuxbrew install hub
```

でふつーに入った．以下のように( `.bashrc` とかに)パスを通しておけば，`hub` コマンドがすぐ使える．

```
export PATH="$HOME/.linuxbrew/bin:$PATH"
```
ChromeOS/Crostini で Docker が動かなくなる問題の解決


## 問題
ChromeOS の `69.0.3473.0` あたりから， Docker を chrostini で動かそうとするとこんなことを言われてしまう

```
docker: Error response from daemon: OCI runtime create failed: container_linux.go:348: starting container process caused "process_linux.go:402: container init caused \"could not create session key: function not implemented\"": unknown.
```

## 対症療法
Chrome 上で `Ctl+Alt+T` で crosh を呼び出し,

```bash
crosh> vmc start termina
(termina) chronos@localhost ~ $ lxc profile unset default security.syscalls.blacklist
(termina) chronos@localhost ~ $ lxc profile apply penguin default
(termina) chronos@localhost ~ $ lxc restart penguin
```

として，terminal を再起動すると治る．ただ，penguinが起動するたびにやり直さなければいけないために相当めんどくさい．以下に書かれているようにバージョンアップを待つしかなさげだ．
https://bugs.chromium.org/p/chromium/issues/detail?id=860565

(2018-09-20)追記：
以下で永続化できるようだ

```
lxc profile unset default security.syscalls.blacklist
lxc profile copy default newprofile
lxc profile apply penguin default,newprofile
lxc restart penguin
```

### gVisor
エラーはコンテナのランタイム `runc` で起こっている．そこで，このランタイムを google 謹製の `gVisor` で置き換えるという手がある．
https://github.com/google/gvisor

以下のように導入

```
wget https://storage.googleapis.com/gvisor/releases/nightly/latest/runsc
wget https://storage.googleapis.com/gvisor/releases/nightly/latest/runsc.sha512
sha512sum -c runsc.sha512
chmod a+x runsc
sudo mv runsc /usr/local/bin
```

`etc/docker/daemon.json` に以下のように記述

```json
{
    "runtimes": {
        "runsc": {
            "path": "/usr/local/bin/runsc"
        }
    }
}
```
して， `sudo systemctl restart docker` でサービスを再起動すると，

```
docker run --runtime=runsc hello-world
```
みたいにして使える．デフォルトにしたかったら， daemon.json に
`"default-runtime": "runsc"`を加えて以下のようにしてみるとよいだろう．ただしこの方法は，nvidia-docker とかとは共生できないかもしれない．

```json
{
    "runtimes": {
        "runsc": {
            "path": "/usr/local/bin/runsc"
        }
    },
    "default-runtime": "runsc"
}
```