OmniAICreator/Qiita-1.07M huggingface dataset:
Atomのパケージを弄った備忘録

# Atomのパッケージをいじった話

**ついにCSGAdventCalendarが終幕するってよ**

僕から始まったCSGAdventCalendaもついに25日目の最終日です，本来ならもうクリスマスですね，
実際は少し涼しくなってきた程度ですが．．．

ついにCSGAdventCalendarも最終日となります．代打の可能性があるのでもうネタ切れではありますが頑張って行きます(23:13なう)

ネタがねえって頭を悩ませた結果先日Atomの設定ファイルを弄ったのを思い出したのでそれについて少し書きます！！！

ラストバッターが間に合ったみたいなので最終日は2記事でせっかくなのであげます！

***それでは早速行ってみよう！！！***
## Atomで入れたパッケージのスニペットがエラー吐いてた

つい先日Atomでnode.jsを書こうとパッケージを入れました．なので使えそうなパッケージを色々インストールしました．

その時入れたパッケージは
- Atom-nodejs-sunippets
- color-picker
- emmet
- language-ejs
- linter-js-standard
- pigments
- nodejs-sunippets

あたりをとりあえずインストールして見ました
しかしうまくはいかなかった．．．

その後なぜか起動時にエラーが出てくる

↓こんなエラー↓
<img width="490" alt="スクリーンショット 2018-09-05 23.29.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/269859/206fbdc7-c9c5-8d6a-ce68-9a5e28d491a0.png">

どうもインストールしたnodejs-snippetsが悪さをしているようです
なので設定ファイルを弄ってみることにしました
<img width="197" alt="スクリーンショット 2018-09-05 23.32.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/269859/a8d1657c-2d8d-1ac6-ddc4-ee63c4812d7e.png">
```cmd + ,```で環境設定を開きインストールの下部にある設定フォルダを開くを押すと新しい画面に.Atom以下のファイルが開かれます
そこで真ん中より少し下のpackagesの中にパッケージのファイルが格納されているのでそこを開き悪さをしている```nodejs-snippets
```のsnippetsの```bdd.cson```の中に記述されているkeyが```beforesynchrous```となっているスニペットの部分を
<img width="228" alt="スクリーンショット 2018-09-05 23.50.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/269859/69459bdf-607b-32ca-438b-e4f87084c1b8.png">
全てコメントアウトします，そしてAtomを再起動すると見事エラーが消えました！！！！！

##　まとめ
- パッケージでエラーが出てたら設定ファイルを見てみよう
- ちょっとしたエラーならコメントアウトで治るかも
- スニペットは気にくわない点は少し自分で修正くらいなら可能

***アドカレお疲れ様でしたああああああああああ！！！！***
初心者でもできる!!!pythonで覚える!!!!!!アルゴリズム!!!!!!!!part2!!!!!!!!!(平均値)

#平均値を求めるアルゴリズム
##1: 配列にデータを格納する
###(配列のイメージは箱の中にいくつもにデータが入っていて、指定したデータを取り出すことができる)
##2:変数を初期化する(0にする)
###(変数も同じく箱をイメージ。しかし、データは1つしか入らない)
##3:配列の最初から最後までの要素を宣言
###(要素の宣言とは、配列に格納されている各値を記述すること)
##4:変数に配列の各値を1つずつ加算していく
##5: 3,4の中で繰り返す
###(配列の要素が 1,2,3,4,5,6 なら 1加算して、2加算して、3加算して...を 6まで繰り返す)
##6:繰り返し加算された値が格納されている変数を要素の数で割る
###(平均値は合計/合計に使用した数値の個数)
##7:平均値が得られる
今回の場合:3.5

サンプルコード1(要素で回すfor文)

<img width="720" alt="スクリーンショット 2018-09-06 5.49.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/286808/7345bd42-18c9-3c07-4b10-b7a10efddc66.png">



サンプルコード2(インデックス番号で回すfor文)

<img width="721" alt="スクリーンショット 2018-09-06 5.47.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/286808/34c0d795-0cc6-8ff0-7427-14c3cf3f7ef8.png">

実行結果:

<img width="956" alt="スクリーンショット 2018-09-10 14.59.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/286808/6a0e3b88-b311-16b4-6253-f7e8e57db170.png">
GoogleAppEngineでデプロイしたサービスの中で、一番古いバージョンをワンライナーで取得する

# 普段使っているbashの内容:v:

```terminal
$ gcloud app versions list
SERVICE  VERSION          TRAFFIC_SPLIT  LAST_DEPLOYED              SERVING_STATUS
default  20180714t135514  0.00           2018-07-14T13:55:58+09:00  SERVING
default  20180714t150430  1.00           2018-07-14T15:04:53+09:00  SERVING
```

と、versionの一覧を普通に取得すると、上のような形で帰ってきます。

> grep default | sort -k 4,4 | awk '{print $2}' | head -n 1

これを追加して実行してあげると

```terminal
$ gcloud app versions list | grep default | sort -k 4,4 | awk '{print $2}' | head -n 1
20180714t135514
```

こんな感じで帰って来てくれます！

後は貯まりすぎたversionを消すなりなんなりご自由に:kissing_heart:
DigitalOcean の Ubuntu 18.04 初期セットアップ手順

DigitalOcean の Ubuntu 18.04 のセットアップの手順。

[Digitalocean の Initial Server Setup with Ubuntu 18.04](https://www.digitalocean.com/community/tutorials/initial-server-setup-with-ubuntu-18-04) を参考にする。

## 仮想マシンの起動
スペックは一番低いやつでOK。後から変更が可能。
OS は Ubuntu 18.04 を選択。
SSH キーは登録したものを設定する。これが root の公開鍵に設定される。

droplets の Access の画面で IP アドレスや root のパスワードが確認できるので、 root のパスワードをリセットしておく。リセットしたパスワードはメールで届く。

## SSHログイン

```shell-session
$ ssh -i 秘密鍵 root@IPアドレス
```

## 基本的な設定など
ログインしたら root で下記の作業をする。

### apt-get で最新の状態に更新

```shell-session
# apt-get update
# apt-get dist-upgrade
```

### reboot

カーネルなどもアップグレードされているので reboot する。

```shell-session
# reboot
```

### SSHのセキュリティ設定

再度 root でログインをして sshd の設定を変更する。

```shell-session
# vi /etc/ssh/sshd_config
```

下記の部分を編集する。

```shell
PasswordAuthentication no
Port 任意のポート番号 ( 22 以外にしておく )
```

sshd を再起動する。

```shell-session
# service ssh restart
```

sshd のポート番号が変わっていることを確認する。

```shell-session
# lsof -i:ポート番号
```

### ufw の設定

ufw で `/etc/ssh/sshd_config` に設定したポート番号への接続を許可する。

```shell-session
# vi /etc/ufw/applications.d/openssh-server
```

最終行のポート番号を変更する。

```
[OpenSSH]
title=Secure shell server, an rshd replacement
description=OpenSSH is a free implementation of the Secure Shell protocol.
ports=ポート番号/tcp
```

ufw の有効化

```shell-session
# ufw app list
# ufw allow OpenSSH
# ufw enable
# ufw status
```

## ユーザーの追加

```shell-session
# adduser {USERNAME}
```

追加したユーザーが sudo を利用できるようにする。

```shell-session
$ usermod -aG sudo {USERNAME}
```

公開鍵を設定する。

```shell-session
$ cd
$ mkdir .ssh
$ chmod 700 .ssh
$ vi .ssh/authorized_keys # 公開鍵を記載
$ chmod 600 .ssh/authorized_keys
```

root での ssh ログインを禁止する

```shell-session
$ vi /etc/ssh/sshd_config
```

`PermitRootLogin` を `no` にする。

```shell
PermitRootLogin no
```

sshd を再起動する。

```shell-session
$ sudo service ssh restart
```

## Cloud Firewalls の設定

[Cloud Firewalls](https://www.digitalocean.com/docs/networking/firewalls/) で、今回変更した SSH ポート番号だけでしか SSH ログインできないように Firewall の設定を追加する。
Jupyter Notebookの初期ディレクトリを変更する


windows10でJupyter Notebookの初期ディレクトリを変更する方法のメモです。


### 1. jupyter notebookの設定ファイルを作る

Aanaconda Promptで以下を入力

```
jupyter notebook --generate-config
```

すると，default configが`C:\Users\[ユーザー名]\.jupyter\jupyter_notebook_config.py`に生成されるので，それを開く

（Macの場合はおそらく`~/.jupyter/jupyter_notebook_config.py`になる）

### 2. 設定ファイルを編集する

202行目に`c.NotebookApp.notebook_dir = ''`という行があるので，コメントアウトの`#`を消して，設定したいフォルダのパスを入れる

```
## The directory to use for notebooks and kernels.
#c.NotebookApp.notebook_dir = ''
```

### Usersフォルダ等を指定するときの注意点
コンフィグファイルがPythonであるため，Windowsのパスの書き方をそのまま使うとエラーにハマることがある。

```
c.NotebookApp.notebook_dir = 'C:\Users'
```

のように，`\U`あるいは`\u`から始まるようなパスを指定してしまうと，正しくパスが指定されないため，エラーが吐かれるし指定したディレクトリでjupyter notebookが起動しない。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/201348/8ffb401f-fa21-30aa-b75c-6364876646fe.png)

この原因は，Pythonにおいて`\Uxxxxxxxx`や`\uxxxx`はエスケープシーケンス（特殊な意味を持つ文字列。改行を`\n`で表すアレの仲間）であるため。
（参考：[2. 字句解析 — Python 3.6.5 ドキュメント](https://docs.python.jp/3/reference/lexical_analysis.html?highlight=%E5%AD%97%E5%8F%A5#literals)）

Usersフォルダに限らず，Pythonのエスケープシーケンスに引っかかるフォルダ名は全部エラーになる。例えば`'C:\abc'`とかも`\a`というエスケープシーケンスがあるのでダメ。


#### 対処法

１. `\`を表すエスケープシーケンスである`\\`を使う

```
c.NotebookApp.notebook_dir = 'C:\\Users'
```
あるいは，

２.  `\`の代わりに`/`を使う

```
c.NotebookApp.notebook_dir = 'C:/Users'
```

### 参考：エスケープシーケンス一覧


| エスケープシーケンス | 意味                                     |
| -------------------- | ---------------------------------------- |
| `\newline`           | バックスラッシュと改行文字が無視されます |
| `\\`                 | バックスラッシュ (`\`)                   |
| `\'`                 | 一重引用符 (`'`)                         |
| `\"`                 | 二重引用符 (`"`)                         |
| `\a`                 | ASCII 端末ベル (BEL)                     |
| `\b`                 | ASCII バックスペース (BS)                |
| `\f`                 | ASCII フォームフィード (FF)              |
| `\n`                 | ASCII 行送り (LF)                        |
| `\r`                 | ASCII 復帰 (CR)                          |
| `\t`                 | ASCII 水平タブ (TAB)                     |
| `\v`                 | ASCII 垂直タブ (VT)                      |
| `\ooo`               | 8 進数値 *ooo* を持つ文字                |
| `\xhh`               | 16 進数値 *hh* を持つ文字                |
| `\N{name}`           | Unicode データベース中で *name* という名前の文字 |
| `\uxxxx`             | 16-bit の十六進値 *xxxx* を持つ文字              |
| `\Uxxxxxxxx`         | 32-bit の十六進値 *xxxxxxxx* を持つ文字          |
（出典：[2. 字句解析 — Python 3.6.5 ドキュメント](https://docs.python.jp/3/reference/lexical_analysis.html?highlight=%E5%AD%97%E5%8F%A5#literals)）


### 参考
- [Jupyter Notebookのホームディレクトリを変更する方法 | あずみ.net](https://a-zumi.net/jupyter-notebook-home-dir/)
- [unicodeのraw文字列は \ をエスケープしない場合がある - かせきのうさぎさん](http://d.hatena.ne.jp/itasuke/20090815/p1)
Google Cloud Platform storage options (memorandum)

Suddenly, I thought to organize various Cloud services, decided to attach a record.

On the storage option of Google Cloud Platform, **suitable case** respectively:blush:

![study_book_neochi_woman.png](https://qiita-image-store.s3.amazonaws.com/0/261711/9b3bf0c7-3e76-c1d3-eefc-afefb1d463a2.png)

#　Cloud Datastore (No SQL)

　　**best for**　unstructured objects or or semi-structured data,Key-value data.

　　This storage services provides terabytes of capacity with 
 　　a maximum unit size of one megabyte per entity

　　**Use case**　App Engine Applications
 

# 　Bigtable (No SQL)

　　**best for**　flat data,heavry write/read,event,analytical data


　　does not support SQL's queries nor does it support multi-row transactions.
　　This storage service provides petabytes of capacity with
　　a maximum unit size of 10 megabytes per cell and 100 megabytes per row.

　　**Use case**　Financial and IoT data
 
 
#　Cloud Storage (Blobstore)

　　**best for**　structured or unstructured binary or object data

　　 This storage service provides petabytes of capacity
　　with a maximum unit size of five terabytes per object.

　　**Use case**　Images,large media files,backups　　


#　Cloud SQL (Relational SQL for OLTP)

　　**best for**　Web frameworks,existing applications
 
　　Cloud SQL provides terabytes of capacity

　　**Use case**　user credentials,customer orders

#　Cloud Spanner (Relational SQL for OLTP)
　　**best for**　large scale database applications that are larger than two terabytes
　　**Use case**　financial trading and e-commerce use cases.
 

　　:relaxed:use one or several of these services to get the job done.
Amazon Echo Spot でビデオ通話を行う手順

音声・ビデオ通話のAlexaコールが [9/5 に日本でも使えるように](https://japanese.engadget.com/2018/09/05/alexa-echo-echo-spot/)なりました
家にある Amazon Echo Spot 2台の間で試してみました

## ゴールの構成

- Amazon Echo Spot 2台でビデオ通話
- デバイス名で呼びかける (外からとかは未確認)

## Alexa の設定

スマートフォンのアプリから行いました (おそらくWebからでも同様の方法でいけます)
この設定は **ビデオ通話を行いたい Amazon Echo Spot 全てで行う必要があります**

### 1. アプリ > Alexaデバイス > _{対象デバイス}_

名前を設定する
漢字でも大丈夫でしたが、カナが無難のようです（"二階"とか）

### 2. アプリ > alexaデバイス > _{対象デバイス}_ > 通信

- コールメッセージ: **ON**
- 家族アカウント: **checked**

以上で設定は終わりです。

## Alexa コールの開始方法

デバイス名を対象にする場合は以下のコール方法になります

```
> Alexa, 通話開始
< 連絡先もしくはデバイス名を指定
> {デバイスの名前}
< 通話を開始しますか？
> はい
```

これでコール開始です。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">Amazon Echo Spot が日本語でもビデオ通話(Alexaコール)できるようになりましたねー。試してみました。 <a href="https://t.co/NFZl1PWLBH">https://t.co/NFZl1PWLBH</a> <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a>さんから</p>&mdash; Kohei(max)MATSUSHITA (@ma2shita) <a href="https://twitter.com/ma2shita/status/1037341901337153539?ref_src=twsrc%5Etfw">2018年9月5日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Alexa コールを受ける

`～～からです` と呼び出されますので、その状態で `Alexa, 電話をとって` で開始されます
終了は `Alexa, 電話を終了` です

# あとがき

ちなみにですが Echo dot とも通話ができます。が、なぜか Echo dot → Echo Spot はうまくいくのに逆 (Echo Spot → Echo dot) のコールは失敗しますね。なんでだろう。

EoT
Bitcoin Cash raw transaction実装

#Bitcoin Cash の raw transaction実装

##ライブラリインストール

```console
$ npm install --save bitcoincashjs
```

参考
https://bitcoincashjs.github.io/


##アカウント作成

```console
$ node bch/create_account.js 
1Gw27SHoNxDw2xhWtRV3qybbGVSwZV4WDV
```

bch/create_account.js

```js
const bch = require('bitcoincashjs');

const privateKey = new bch.PrivateKey();
const address = privateKey.toAddress();

console.log(address.toString()) // 15WZwpw3BofscM2u43ji85BXucai5YGToL
```


##トランザクションに署名

```console
$ node bch/create_tx.js 
01000000018689302ea03ef5dd56fb7940a867f9240fa811eddeb0fa4c87ad9ff3728f5e11000000006b483045022100bc4295d369443e2cc4e20b50a6fd8e7e16c08aabdbb42bdf167dec9d41afc3d402207a8e0ccb91438785e51203e7d2f85c4698ff81245936ebb71935e3d052876dcd4121029f50f51d63b345039a290c94bffd3180c99ed659ff6ea6b1242bca47eb93b59fffffffff01983a0000000000001976a914ad618cf4333b3b248f9744e8e81db2964d0ae39788ac00000000
```

bch/create_tx.js

```js
const bch = require('bitcoincashjs');
  
const key = 'L1uyy5qTuGrVXrmrsvHWHgVzW9kKdrp27wBC7Vs6nZDTF2BRUVwy';

const privateKey = new bch.PrivateKey(key);
const utxo = {
  'txId' : '115e8f72f39fad874cfab0deed11a80f24f967a84079fb56ddf53ea02e308986',
  'outputIndex' : 0,
  'address' : '17XBj6iFEsf8kzDMGQk5ghZipxX49VXuaV',
  'script' : '76a91447862fe165e6121af80d5dde1ecb478ed170565b88ac',
  'satoshis' : 50000
};
const transaction = new bch.Transaction()
  .from(utxo)
  .to('1Gokm82v6DmtwKEB8AiVhm82hyFSsEvBDK', 15000)
  .sign(privateKey);

console.log(transaction.toString()) // 01000000018689302ea03ef...
```
iOS 9をターゲットにしたBabel + webpackビルドはminifyに注意が必要

Babel 7 + Webpack 4 の組み合わせで `iOS >= 9` をターゲットにproductionビルドしたとき、iOS 9のSafariで `Syntax Error: Unexpected token '>'` というエラーが出てしまう事象が発生しました。

## 不具合の原因

webpackのproductionビルド時に適用されるminifyによって、オブジェクトリテラルのショートハンドがアロー関数式に圧縮されるのが原因です。
iOS 9のSafariは[オブジェクトリテラルのショートハンドは使えます](https://kangax.github.io/compat-table/es6/#test-object_literal_extensions_shorthand_methods)が、[アロー関数式は使えません](https://kangax.github.io/compat-table/es6/#test-arrow_functions)。

## サンプルコード

※https://github.com/ryo-utsunomiya/poc-babel-webpack-ios9 にも上げてます

以下のようなコードを `iOS >= 9` をターゲットにしてビルドすると、このコードはiOS 9のSafariで利用可能な構文の範囲で実装されているため、トランスパイルなしで出力されます。

```js
export default {
  greeting(name) {
    return `Hello, ${name}`;
  }
};
```

このコードをwebpackでproductionビルドすると、以下のような出力になります。

```js
function(e,t,r){"use strict";r.r(t),t.default={greeting:e=>`Hello, ${e}`}}
```

前述したとおり、オブジェクトリテラルのショートハンド `greeting(name){return...}` が、アロー関数式 `greeting:e=>...` に圧縮されています。
この圧縮は、両方の構文をサポートしているブラウザに対して行うなら安全なのですが、iOS 9のように部分的なサポートしかない場合、適用してはいけません。

## 修正方法

Minimizerのオプションで、明示的に `arrows` の圧縮を無効化します。現在のwebpack(4.17.2)では[UglifyjsWebpackPlugin](https://github.com/webpack-contrib/uglifyjs-webpack-plugin)を利用しています。このプラグインをdevDependenciesにインストールし、UglifyJsPluginの初期化時に明示的にオプションを渡すようにすればOKです。

```js
const UglifyjsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  ...
  optimization: {
    minimizer: [new UglifyjsPlugin({
      uglifyOptions: {
        compress: {
          arrows: false, // オブジェクトリテラルからアロー関数式への圧縮を無効化
        }
      }
    })]
  }
}
```

なお、UglifyjsPluginが使用しているuglify-esはメンテナンスが打ち切られ、[terser](https://github.com/fabiosantoscode/terser)というforkに移行が進められています。
近いうちに、uglifyjs-webpack-pluginはDeprecatedになる可能性があるので、代替となる[TerserWebpackPlugin](https://github.com/webpack-contrib/terser-webpack-plugin)を使っておいた方がよいかもしれないです。APIはほぼ同じです。

```js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  ...
  optimization: {
    minimizer: [new TerserPlugin({
      terserOptions: {
        compress: {
          arrows: false, // オブジェクトリテラルからアロー関数式への圧縮を無効化
        }
      }
    })]
  }
}
```
python3を使って和暦を西暦に直してみた。

anacondaでインストールしたpython3を使っています。
reは標準で入っている正規表現を扱うためのモジュールです。
#やったこと
正規表現のモジュールを使い和暦を西暦にした。

###正規表現について
このサイトを見るのがいいかも。
https://docs.python.jp/3/library/re.html

渡すデータはリストにしました。いい感じに変更してください
`wareki_list = ['平成2年','平成10年','昭和40年','平成元年','昭和元年']`

```python:wareki_to_seireki.py
import re

for i in range(len(wareki_list)):
    if re.match('昭和元年', wareki_list[i]):
        wareki_list[i] = 1926
    
    elif re.match('昭和',wareki_list[i]):
        wareki_list[i] = 1925 + int(re.sub(r'\D','',wareki_list[i]))
    
    elif re.match('平成元年', wareki_list[i]):
        wareki_list[i] = 1989
    
    elif re.match('平成',wareki_list[i]):
        wareki_list[i] = 1988 + int(re.sub(r'\D','',wareki_list[i]))     
    
    else:
        continue
```

結果はこんな感じになります。
`[1990, 1998, 1965, 1989, 1926]`


#やってること
`bool(re.match('昭和元年', wareki_list[i]))`
昭和元年という文字列がリストの中のi番目にあるか見てる。
あったらTrueを返す。

`bool(re.match('昭和', wareki_list[i]))`
`'昭和'`がリストの中のi番目にあるか見てる。

`re.sub(r'\D','',wareki_list[i])`
`\D`は数字以外のキャラクター，re.subは置き換えなのでwareki_listのi番目のstringsの数字以外のキャラクターを`''`で取り除いてる。


はじめて記事を書いたけどわかりにくかったら訂正するので教えてください。

###訂正しました
`if bool(re.match('昭和元年', wareki_list[i])):`って書いてたのですが，`if`が`bool`に変換すると教えていただいたので訂正しました。コメントありがとうございます。(2018/9/06)
[WordPress] Advanced Custom Fields で Google Map を使うときに取得しておくAPI

# 前提として
* [Advanced Custom Fields](https://www.advancedcustomfields.com/) で [Google Map](https://www.advancedcustomfields.com/resources/google-map/) の設定などができてる
* [Google Maps](https://cloud.google.com/maps-platform/) のAPIが有料なのは知ってる

有料化に伴いAPIもあれこれ変わったらしく、以前から利用していたサイトで「APIが有効化されてない」と表示されたので、覚書。

# APIキーをとるとき

※有料化に関してなんやかんや登録しないといけないことは割愛

1 [Google Maps Platform](https://cloud.google.com/maps-platform/) から「使ってるみる」をクリック

2 Enable Google Maps Platform で Maps を選択して CONTINUE
![スクリーンショット 2018-09-05 22.37.13.png](https://qiita-image-store.s3.amazonaws.com/0/18348/cbae0463-89cd-f4e1-8587-5091b4ec0405.png)

3 Select a project と Set up your billing は割愛
4 WP側にAPIキーを反映させるコードも割愛

# ここから重要
ACF使わないでGoogle Mapを埋め込むだけなら上記で有効化されるAPIでOKなのですが、管理画面で Google Map を住所で検索する場合、追加で Places API for Web が必要になります。
（ちょっと気づかないよねこれ）
![スクリーンショット 2018-09-05 22.41.54.png](https://qiita-image-store.s3.amazonaws.com/0/18348/898fda23-3362-96e7-8f04-5289190015d2.png)


1 [Maps API のコンソール](https://console.cloud.google.com/google/maps-apis/overview) を開いて、設定したいプロジェクトか確認します。

2 API メニューの「未使用の API」から「Places API for Web」をクリックして有効にします。
![スクリーンショット 2018-09-05 22.51.59.png](https://qiita-image-store.s3.amazonaws.com/0/18348/b5ae2d8d-e284-eea0-791b-6068a9bb069f.png)

Google Maps Platform からの手順を書いてますが、通常のAPIコンソールから Places API for Web を有効化してもOK。

# この手順で有効化されるAPI

* [Maps Embed API](https://developers.google.com/maps/documentation/embed/guide)：`iframe` で埋め込むとき必要
* [Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/tutorial)：JavaScriptで埋め込むときに必要
* [Maps SDK for Android](https://developers.google.com/maps/documentation/android-sdk/intro)
* Maps SDK for iOS
* Maps Static API
* Places API for Web
* Street View API

**「ACFのGoogle Mapを使うときは Maps のセットの他に Places API for Web も必要」** ということで現場からは以上です。
[Ruby on railsメモ]routes.rbにてresourcesの使い方をまとめたいい記事発見した。

ルーティングってきれいに書けないですよね。え、そんなことない？

自分はとてつもなく下手です。

ただ、私と同じ気持ちの同士もいると思います。

そんな方にコチラの記事をスチャァァ。
http://shiro-16.hatenablog.com/entry/2015/03/19/001656

気が向いたら自分でまとめます。
Pythonで競プロに挑む日誌 vol.8 ~文字列 replace~

腑に落ちない.
# 現在の目標
* 今年の10月内に茶色を取得する **←イマココ**
* 年内に緑色を取得する
* [APG4b](https://beta.atcoder.jp/contests/apg4b) で C++ にも手を出す

#今日の問題
ABC049C - 白昼夢 / Daydream
https://beta.atcoder.jp/contests/abs/tasks/arc065_a

**結果**

```answer1.py
# coding: utf-8
S = input()
li_s = ["dream", "dreamer", "erase", "eraser"]
 
if "dreameraser" in S:
    S = S.replace("dreameraser", "")
elif "dreamerase" in S:
    S = S.replace("dreamerase", "")
 
sum_s = sum(S.count(s) * len(s) for s in li_s)
 
if sum_s == len(S):
    print("YES")
else:
    print("NO")

# 実行時間：19 ms
# メモリ　：3188 KB
# コード長：322 Byte
# 得点　　：0/300
```
うーん...昨日からずっと考えているのですがうまくいかない.  不本意ながら, 今回もいくつかほかの方の回答を参照しました.

---
```answer2.py
# coding: utf-8
S = input().replace("eraser", "").replace("erase", "").replace("dreamer", "").replace("dream", "")
if S:
    print("NO")
else:
    print("YES")

# 実行時間：18 ms
# メモリ　：3188 KB
# コード長：166 Byte
# 得点　　：300/300
```
模範解答の多くはこのような感じでした.  

* dreamer より前に dream を消してはいけない（er だけ残ったりするから）
* eraser より前に erase を消してはいけない（er だけ残ったりするから）
* erase や eraser より前に dreamer を消してはいけない（dreameraser がおかしなことになるから）

このように考えると、eraser → erase → dreamer → dream の順に消去していき, ピッタリ消去しきれるかどうか判定すればよい, という考え方は理解できます.

しかしながら, この方法だと, たとえば S = "dreameeraserr" が反例になると思いました.

dream, dreamer, erase, eraser のいずれかを末尾に単純追加するだけでは実現できない文字列でも, S に等しくなると判定されてしまいます.

---
というわけで, 自分としては下記に落ち着きました.  「S が小文字列」という条件もうまいこと利用できています.

```answer3.py
S = input().replace('dream', 'D').replace('erase', 'E').replace('Der', 'D').replace('Er', 'E').replace('D','').replace('E','')

if len(S) == 0:
    print('YES')
else:
    print('NO')

# 実行時間：19 ms
# メモリ　：3188 KB
# コード長：189 Byte
# 得点　　：300/300
```
うーむ, まだまだ自力でたどり着けない...精進あるのみですね.

#明日やること
[ABC086C - Traveling](https://beta.atcoder.jp/contests/abs/tasks/arc089_a) を解く.  AtCoder Beginners Selection は次がラスト.
（レポート）【再増席】イノベーションの始め方・作り方・進め方

- 参考図書
    - イノベーションのジレンマ
    - アートオブイノベーション
    - 発明・発見のひみつ
    - 発明と発見のひみつ

- プロセス
    - 確率を上げる方法はある。
    - アイディアを生み出す思考を情報処理プロセスと捉える
    - プロセスの一般化
        - 技術起点
        - 市場起点
        - 社会起点
        - 人間起点
        - 起点はいくつか考えられるが、一長一短あり。統一理論はない

- 機会領域（コンセプト）を設けてアイディアをだす
    - 手段系情報（シーズ）
    - 目的系情報（ニーズ）

- ニーズ側からの洞察の不足
    - 不明確な世の中のニーズをどのようにキャッチアップするか
    - 一般性の高い情報<- 機会領域 -> 固有性の高い情報

- TRIZ
    - https://ja.wikipedia.org/wiki/TRIZ
- 社会シフト×デザイン
Flow Strictを有効にしてより安全性の高いコーディングを行う

Flowを使っていれば型による安全性の高いコーディングが行えることは知っての通りです。

[Flow: A Static Type Checker for JavaScript](https://flow.org/)

今回は、Flow Strictについて見ていくことにします。

[Flow Strict | Flow](https://flow.org/en/docs/strict/)

Flow Strictとは何かというと、ファイル単位でより厳密な型チェックをするものです。
例えば、`any`/`Object`/`Function`などの曖昧な型を禁止したり、型付されたimport以外を禁止したりできます。

なぜこの挙動がデフォルトでないかというと、既存コードベースに簡単に導入できるように設計されているためです。
なので、Flowを使っているなら基本的にこれを有効化することをオススメします。
これによって、より多くの潜在的なバグを減らしリファクタリングが容易になります。

いくつかの設定可能なルールがありますが、詳しくは公式のページを見てください。
[Lint Rule Reference | Flow](https://flow.org/en/docs/linting/rule-reference/#toc-untyped-type-import)

## いくつかの設定を試してみます

まずはFlowのインストールと設定ファイルの作成をします。

```
yarn add --dev flow-bin
yarn run flow init
```

.flowconfig

```
[ignore]

[include]

[libs]

[lints]

[options]

[strict]
```

これに以下のように追加します。

```
[ignore]

[include]

[libs]

[lints]

[options]

[strict]
nonstrict-import
unclear-type
unsafe-getters-setters
untyped-import
untyped-type-import
sketchy-null
sketchy-number
```

### 有効化

ファイルごとに有効化します。今まで、`@flow`と書いていた場所に`@flow strict`と書くだけです。

```diff
- // @flow
+ // @flow strict
```

### unclear-type
`any`, `Object`, `Function` のような弱い型を使うとエラーを表示します。

```js
// @flow strict

function x(a: any) {}  // => error

function y(a: Function) {}  // => error

```

![スクリーンショット 2018-09-05 21.01.07.png](https://qiita-image-store.s3.amazonaws.com/0/15319/cb5ef9d8-69aa-8644-f650-ae84f233d07e.png)


### sketchy-number
個人的に非常に好きな機能です。

例えばReactで以下のようなコメント数を表示する機能があるとします。

```jsx
{count && <div>{count} コメント</div>}
```

countが`0`の場合、countがfalseと評価されます。
0件のときは表示されてほしくはありませんからね。
ただ残念なことに、これだと`0`とだけ表示されてしまいます。最悪！

`sketchy-number`が有効であればこれを検知します。


![スクリーンショット 2018-09-05 21.43.47.png](https://qiita-image-store.s3.amazonaws.com/0/15319/8de8c3eb-4f12-dc89-a5be-dead61c3a9c4.png)

あとの修正は簡単です。

```jsx
{count ? <div>{count} コメント</div> : null}
```

## +α
> Additionally, note that function parameters are considered const (i.e., treated as if they were declared with const rather than let). This feature is not yet configurable in Flow Strict; it is always on.

常に有効になる機能として関数の引数が常に`const`扱いになります。
型があっているので、デフォルトだとエラーにならないですが、Flow Strictだとエラー扱いになります。

```jsx
// @flow strict

function f(x: number) {
  x = 1 // => error
}
```

![スクリーンショット 2018-09-05 22.07.33.png](https://qiita-image-store.s3.amazonaws.com/0/15319/a95a2459-27fc-2d64-10e3-e3766340d8e5.png)


## まとめ
flowを使っているならば有効化することをオススメします。
また、ドキュメントにも将来的にこれらの機能がデフォルトの挙動になる可能性があるとのことなので期待したいです。

[Flow Strict | Flow](https://flow.org/en/docs/strict/)

<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">getter/setterは副作用があるし、邪悪なことをするときにしか使わない派なんだが、flow strictだとgetter/setter使った瞬間に型がキレるので便利 <a href="https://t.co/kKWEEeGN6n">https://t.co/kKWEEeGN6n</a></p>&mdash; あかめ@猫の額爪の垢を煎じて飲む.js (@akameco) <a href="https://twitter.com/akameco/status/1037330048955686913?ref_src=twsrc%5Etfw">September 5, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Cmder Here しても所定のディレクトリに移動しないときの対処法

## 環境

Windows7
Cmder 1.3.6
MSYS2

## 背景

Windowsで快適なターミナル環境を整えるため、あれこれ設定していてぶつかった問題。

1. [こちらの記事](https://qiita.com/alchemist/items/f2f54cfe545c84af9430)を参考に Cmder (1.3.6) を導入。
2. SublimeText のプラグイン [Terminal](https://github.com/wbond/sublime_terminal) を導入。
3. Terminal はデフォルトだと PowerShell で起動するため、Terminal の Package Settings にて `"terminal": "path/to/cmder"` などとして Cmder に変更([こちらを参考](https://github.com/wbond/sublime_terminal#cmder-on-windows))。
4. 引数を渡す必要があるため、`"parameters": ["/START", "%CWD%"]` も設定。
5. 上記を設定しても `Open Terminal Here...` で所定のディレクトリで Cmder が開かず、必ずホームディレクトリで開いてしまうことに気づく。
6. ふと、エクスプローラーのコンテキストメニューから `Cmder Here` してみると、同様にホームディレクトリで開いてしまうことを確認／(^o^)＼

## 対処方法

Cmder の Tasks 設定で下記のように指定したところ解決しました(もともとの Task は {bash::bash} からの流用ですが、MSYS2付属の bash を指定しています)。
`CHERE_INVOKING=1` を設定するのがポイントのようです。

```
cmd /c "set CHERE_INVOKING=1 & "C:\msys64\usr\bin\bash.exe" --login -i"
```

Windows のターミナル環境に疎いこともあり良く分かっていないのですが、下記あたりが関連していそうです。

- [use /dir Switch instead of CMDER_START (previously #921)](https://github.com/cmderdev/cmder/pull/1609)
- [Cmder now opens in the in the current working dir](https://github.com/cmderdev/cmder/blob/master/CHANGELOG.md#136-2018-05-30)

※上記の方法でとりあえずは解決したため /dir については未検証です。

## 参考
https://github.com/cmderdev/cmder/issues/1803
https://conemu.github.io/en/CygwinStartDir.html
https://zyzyz.github.io/en/2017/10/Integrate-MSYS2-into-Cmder/
WEBツール一覧


# WEBデザイン
イケサイ WEBデザイナーのポータルサイト
https://www.ikesai.com/


特許情報プラットフォーム
https://www.j-platpat.inpit.go.jp/web/all/top/BTmTopSearchPage.action#


コードペン
https://codepen.io/


サジェストキーワードを調査できるキーワードツール
https://goodkeyword.net/

ぱくたそ
https://www.pakutaso.com/
タダピク
https://www.tadapic.com/
アイコン素材ダウンロードサイト「icooon-mono」
http://icooon-mono.com/

競合他社のサイトのアクセス数を調べる方法
https://www.1-firststep.com/archives/944
スニペットの登録方法
https://webnaut.jp/markup/628.html
学生Pythonエンジニアが学割で無敵になる話

# はじめに
Pythonを使っている学生のみなさま、いかがお過ごしでしょうか。
今回は学割があるIDEの中でも一番オススメのPycharmのお話しです。

Pythonを最近触り始めたばかりのあなたやPythonでバリバリ開発してるよっていうあなたも
是非とも一度目を通してってください。

# 高性能有料IDE「Pycharm」を無料で使い倒そう
Jetbrains社が誇る高性能有料IDE(総合開発環境)に「Pycharm」というものがあります。
Github製のAtomやMS製のVisual Studioなどと同じような高機能なエディタです。

PycharmはPythonで開発をするなら一番といってもいいほど高性能なIDEで、
強力な補完機能に使いやすい検索機能，ぬるぬる飛べるコードジャンプに強力なデバッグ機能など様々な機能が搭載されていて
Vimに負けないくらい高性能なエディタと言えるでしょう。

またIDE上でgit管理や差分を比較表示できたり、ブランチも切り替えれたり、スーパー便利すぎてヤバイです。


ですので、Pythonを触り始めた人にはぜひ使ってほしいのですが、
**お値段が1年で9000円ぐらい[^1] **します。

ですので、触り始めた人にこれを買えというのはだいぶ酷な話です。
でも大丈夫。
学生なら無敵です、**無料で使えます**。

## 機械学習の民にもオススメです
また、自分はまだ試していないのですが、機械学習を触り始めた人なら触ったであろうJupyter notebookも
***Pycharm上で使える***ので無敵です。無敵になりましょう。

## Djangoの民にもオススメです
PycharmでDjango開発すると、Pycharmのデバッグ機能で無敵になれます。
気になるところにブレークポイントつけてデバッグを実行するとそこで止まり、
そこからステップ実行することができるのですが
このムーブがメチャクチャ強いです。
そしてそのブレークポイントを用いたデバックを行う環境構築もお手軽です。すごい。

またデバック中に各関数の中身もインタラクティブに覗けちゃいます。本当に強い。


### 各種リンク
詳しくはこちらの記事で詳しく説明してくださっているので、気になった方はどうぞ。
何しろタダです。学生万歳。
[JetBrainsの学割の申請方法について](https://qiita.com/tetrapod117/items/92f965cf1928739b70e4)

ついでにこちらも
[最強のPython統合開発環境PyCharm](https://qiita.com/yamionp/items/f88d50da8d6b548fc44c)

さらにDjangoをやるならこちらの記事もオススメです。
[PyCharm + Django + 仮想環境 (pyvenv + Python3) でステップ実行できるまで (mac)](https://qiita.com/ytyng/items/cdff927d6c5a741dd450)


# GitHubも使い倒そう　学生ならプライベートリポジトリが無料！
学生のみなさん、git使ってますか？
私はインターン先で猛烈に使っています。


そんなGitの説明はここではしないのですが、
GitHubのプライベートリポジトリもなんと学生なら無料で作れちゃうんです。


学生万歳。

詳しくはこちらの方が詳しく説明してくださってます。
[無料でGitHubのprivateリポジトリを作る方法](https://qiita.com/mtfum/items/d8c06c9a28ce04d3043a)

ちなみに余談ですが、gitをつかえるようになりたくて、それでも何度か挫折してきた学生諸君にはこれがおすすめです。

[Git をはじめからていねいに](https://github.com/Shinpeim/introduction-to-git)

私も何度も挫折しましたが、ここで学びインターン中に触るうちに覚えました。
オススメは周りの学生でプログラミング勉強している奴を巻き込んで一緒に触るといいです。


## オワリに
正直今回は学生ならpycharm無料で使えて最強だよ！ってことを書きたかっただけです。
みんなもPycharm、使おう！





### 補足:Amazon studentもオススメよ
Amazon使う学生はamazon primeの学生版のamazon studentもオススメ。
マジであれは無敵だし今なら2000円ぐらいAmazonポイントもらえるはずなので
トライアルだけでもやっとくといいですよ。

### 補足:学割がこんなに大盤振る舞いなワケ
企業側にとって学割は社会人になっても使い続けてくれるように
若いユーザーを囲い込むための投資なので、大抵は学生が得するようにできています。
我ら学生は今のうちに甘い汁を吸いまくりましょう。





[^1]: 1年目は9000円ぐらいですが、2年目は7000円ぐらい、3年目以降は6000円ぐらいと徐々に安くなっていきます。
FuelPHPで、Lang::loadを同一ファイルや同一行に対して複数実行した時の挙動について

Fuelphp1.7で動作確認。
公式ドキュメントにも記載がなく、変なところで詰まったので備忘録として。

#対象となるモジュール

[Lang - クラス - FuelPHP ドキュメント](http://fuelphp.jp/docs/1.7/classes/lang.html)

#複数回の読み込み

読み込み用の言語ファイルを作成。configで言語をjaに設定済みであると仮定し、言語ファイルを用意。

```php:app/lang/ja/hoge.php
return array(
            'text1' => 'テキスト1',
            'text2' => 'テキスト2',
            'text3' => 'テキスト3'
       );
```

このファイルを複数回読み込む。
controllerでなくとも、任意の場所で実行可能。

```php:app/classes/controller/index.php
    public function action_index(){
        $langs = Lang::load('hoge');
        var_dump($langs); // array(3) { ["text1"]=> string(13) "テキスト1" ["text2"]=> string(13) "テキスト2" ["text3"]=> string(13) "テキスト3" }
        $langs = Lang::load('hoge');
        var_dump($langs); // bool(false)
        var_dump(Lang::get('text1')); // string(13) "テキスト1"
    }
```

Lang::loadにより言語ファイルの読み込みができるが、
その返り値が初回は読み込んだ配列、2回目以降はfalseとなる。

そのため、返り値で言語テキストデータを取得しようとすると、
別の処理で読み込み済みの場合falseとなる。

`Lang::get('text1')` のように、Langクラスから取得する本来の手順が良いと思われる。

#同一行への上書き

では、読み込み済みの言語ファイルに対してLang::loadを行うとfalseとなるのならば、
同一の行（キー）に対する上書き処理はどうなるのか気になり、確認してみる事にする。

言語ファイルを2つ用意する。

```php:app/lang/ja/hoge1.php
return array(
            'text1' => 'テキスト1',
            'text2' => 'テキスト2',
            'text3' => 'テキスト3'
       );
```

```php:app/lang/ja/hoge2.php
return array(
            'text1' => 'テキスト4',
            'text2' => 'テキスト5',
            'text3' => 'テキスト6'
       );
```

これらを交互に読み込み、上書き処理がどうなるか確認してみる。

```php:app/classes/controller/index.php
    public function action_index(){
        Lang::load('hoge1');
        var_dump(Lang::get('text1')); // string(13) "テキスト1"
        Lang::load('hoge2');
        var_dump(Lang::get('text1')); // string(13) "テキスト4"
        Lang::load('hoge1');
        var_dump(Lang::get('text1')); // string(13) "テキスト4"
    }
```

初回の言語ファイル読み込みの時には、同一行がセット済みでも上書きが実行される。
しかし読み込み済みの場合再度は読み込まれないため、上書きが実行されない。

同じ行（キー）の上書きをすると挙動が分かりにくくなるため、
最初から上書きが発生しないような設計にするのが最善っぽい。
エックスサーバーにGitを導入する手順

エックスサーバーにSSHで接続してみよう！
http://vdeep.net/xserver-git
git pushで本番環境に“自動デプロイ”できる環境を作ってみよう！
http://vdeep.net/git-push-deploy


## gitをxserverに設置しgit pushで自動で本番環境にアップロードするための方法【初心者向け】

https://web-kiwami.com/web/post-648.html

### まとめ
1. 本番環境のgitで管理した場所でgit initを行う。
2. ベアリポジトリをサーバー上の公開していない場所に作成する。
3. ベアリポジトリの「hooks/post-receive」を設定する。(手順1.で作成した場所からベアリポジトリをpullする)
4. ローカル環境からベアリポジトリをcloneする。
5. ファイルを変更したらベアリポジトリにpushする。


Git（ギット）について
https://techracho.bpsinc.jp/nishi/2018_01_26/51459

[WordPress] テーマファイルのみgitに登録する
https://www.spreadworks.co.jp/wordpress-gitignore/

SourceTree（PuTTY）を使ってSSH公開鍵・秘密鍵の作成
https://gittt.wordpress.com/2015/02/19/sourcetree1-3/
SourceTreeとGitHub間のSSH認証がうまくいかない場合に試しておきたいこと
https://azunobu.hatenablog.com/entry/2015/08/06/201449

ロリポップ / チカッパプランで「Github, Bitbucket」にPushする
http://tuki0918.hatenablog.com/entry/2013/05/26/143744
Laravel Echo ServerのWeb Socket通信をALB経由でやってみた

#Application Load BalancerがWebSocketに対応しました！
- [公式情報](https://docs.aws.amazon.com/ja_jp/elasticloadbalancing/latest/application/load-balancer-listeners.html)
- 最近LBでのリダイレクトもできるようになりイケていますね。

#今回やりたいこと
- Laravel Echo ServerをLB経由で通信してチャット機能を実装する。
- ※僕はインフラエンジニアなので、上物のプログラムの内容とかは書きません。

##構成
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/168635/0a451550-bc8a-2863-23e0-6906f14720fc.png)

- ALBの手前ではHTTPS：6001で受け付け、ALB⇔サーバ間はHTTP：6001で受け付けます。
    - ALBに証明書を適用済みです。

#必要なALBの設定内容　※ALB作成手順・ターゲットグループ作成手順は端折ってます
**1.ターゲットグループで利用するポートを設定します。**
![WS000051.JPG](https://qiita-image-store.s3.amazonaws.com/0/168635/31f5ea48-7fd1-ff51-3a71-4463d542c363.jpeg)


**2.ヘルスチェックの設定をします。**
![WS000052.JPG](https://qiita-image-store.s3.amazonaws.com/0/168635/50a57948-6398-ad36-aca0-dddc5bbd41de.jpeg)


**3.維持設定を有効化します。※これやらないとALB→サーバのヘルスチェックがうまくいきません。**
![WS000053.JPG](https://qiita-image-store.s3.amazonaws.com/0/168635/9901afd0-678f-c907-4f23-8d3f69cab1cd.jpeg)


#つまづいたところ
##ALB→サーバのヘルスチェックがうまくいかない(health check failed)
- Socket.IOを利用しているWebSocketアプリケーションの場合、Sticknessを有効化しておく必要がるようです。
    - [公式ドキュメントに詳細が記載されています。](https://socket.io/docs/using-multiple-nodes/)


<br>
<br>
以上！
Dockerfile作成〜コンテナに入るまでのコマンド（備忘録）

# 環境
- OS : macOS High Sierra 10.13.6
- Docker : Docker for Mac 18.06.1-ce-mac73
    - Base Image : CentOS7
    - Nodebrew : v9.11.1

# 手順
## Dockerfileの作成

```text:Dockerfile
FROM centos:centos7

# epel
RUN yum -y install epel-release

# utilities
RUN yum -y install wget which

# git
RUN yum -y install git

# nodebrew + node.js
ENV NODE_VERSION v9.11.1
RUN wget git.io/nodebrew
RUN perl nodebrew setup
ENV PATH $HOME/.nodebrew/current/bin:$PATH
RUN echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> $HOME/.bashrc
RUN source $HOME/.bashrc && nodebrew install-binary $NODE_VERSION
RUN source $HOME/.bashrc && nodebrew use $NODE_VERSION
```

## イメージのビルド
```terminal
$ docker build -t n11sh1/nodebrew:v9.11.1 .
```

## イメージの確認
```terminal
$ docker images
REPOSITORY             TAG                 IMAGE ID            CREATED             SIZE
n11sh1/nodebrew        v9.11.1             218058a47150        2 minutes ago       708MB
```

## コンテナの起動
```terminal
$ docker run -it -d --name nodebrew n11sh1/nodebrew:v9.11.1
```

## コンテナの状態確認
```terminal
$ docker ps
CONTAINER ID        IMAGE                     COMMAND             CREATED             STATUS              PORTS               NAMES
13bc5afc4dcc        n11sh1/nodebrew:v9.11.1   "/bin/bash"         10 seconds ago      Up 8 seconds                            nodebrew
```

## コンテナに接続
```terminal
$ docker exec -it nodebrew bash
[root@13bc5afc4dcc /]# 
```

# 後処理
## コンテナの停止
```terminal
$ docker stop nodebrew
```

## コンテナの削除
```terminal
$ docker rm nodebrew
```

# イメージの削除
```terminal
$ docker rmi -f :image_id
```

# さいごに
個人ブログにオリジナル（日本語＆英語）をUPしています。
この記事が良いと感じた方は、そちらにもリアクション頂けると嬉しいです:relaxed:
https://blog.n11sh1.com
PhpStorm　よく使うショートカットキー

# Editing

#### Tab / Shift+Tab
　　インデント
　　Tabで1段下げ、Shift+Tabで1段上げます。
#### Ctrl+Alt+I
　　自動インデント
　　その行のインデントを正しく修正してくれます。
#### Ctrl+/
　　//コメントアウトのOn/Off
　　行単位のコメントアウトのOn/Offを行います。
#### Ctrl+Shift+/
　　/**/コメントアウトOn/Off
　　ブロック単位のコメントアウトのOn/Offを行います。
#### Ctrl+F4
　　ファイルを閉じます。
#### Ctrl+Space
　　コード補完
　　入力中の文字と状況にあわせて、コード補完の選択しが表示されます。
#### Ctrl+Q
　　クイックドキュメントの参照
　　PHP標準関数なら関数ヘルプを表示し、そうでなければPHPDocsなどから引数や返り値、説明などをポップアップで表示します。
#### Ctrl+
　　コードをマウスオーバー
　　オブジェクト、クラス、関数など、指定したコードの種類によって簡易的な説明を表示
　　関数の引数を調べたり、オブジェクトがどのクラスのインスタンスか調べたりするのに便利です。
#### Ctrl+O
　　クラスメソッドのオーバライド
　　そのクラスでオーバーライドできるメソッドの一覧から選択してオーバーライドの記述を行えます。
#### Ctrl+Alt+T
　　選択したコードを制御構文で囲む
　　コードを選択して実行すると、ifやwhile,foreachなどの制御構文で囲むことができます。
#### Ctrl+W
　　文字列の選択範囲を広げる
　　選択範囲を区切りの良いところごとに広げます。
　　制御構文の中で実行したり、$data[‘Model’][‘field’]のような多次元配列の一部を選択して選択範囲を広げたりするのに便利です。
#### Ctrl+Shift+W
　　文字列の選択範囲を狭める
　　選択範囲を狭めたい時に利用します。
#### Alt+Enter
　　コードのクイック編集＆便利機能
　　選択した文字列によって便利な編集機能が利用できます。
　　シングルクォート⇔ダブルクォート変換や、引数の順番の入れ替えなどが可能です。

# Search/Replace
#### Ctrl+Shift+N
　　フォルダ全体からファイルを検索します。
#### Ctrl+F
　　単一ファイルテキスト検索
　　F3で次のワード、Shift+Fで前のワードにジャンプします。
#### Ctrl+Shift+F
　　複数ファイルテキスト検索
　　プロジェクト内の複数のファイルからテキスト検索できます。
#### Ctrl+R
　　単一ファイルテキスト置換
#### Ctrl+Shift+R
　　複数ファイルテキスト置換

#Navigation
#### Ctrl+Shift+N
　　ファイルへ移動
　　入力文字で始まるファイルへ移動します。
#### Ctrl+E
　　最近開いたファイル一覧
　　最近開いたファイルを一覧から選択して開くことができます。
#### Ctrl+N
　　クラスへ移動
　　入力文字で始まるクラスへ移動します。
#### Ctrl+十字右/十字左
　　タブの移動
　　Ctrl+矢印の方向のタブに移動します。
#### Ctrl+G
　　行を指定して移動
　　指定した行番号に移動します。

#Other
#### Ctrl+Shift+A
　　機能を検索
　　入力した文字から始まる機能やヘルプを表示してくれます。
#### Ctrl+Alt+S
　　設定ダイアログを開く
ローカル環境限定での「bitbucket」+「Sourcetree」でのバージョン管理


##前提条件

- bitbucketアカウント登録済
- Sourcetreeインストール済


リポジトリにアクセスしようとすると「SSHキーによる認証に失敗しました。」とダイアログが出てくるので

![1354b923fa66412f320e0cbc013a58d7.png](https://qiita-image-store.s3.amazonaws.com/0/275201/0bd8a14f-04b5-4021-8627-2386c1c53a5c.png)


##SSHキーを作成
1. SourceTreeを起動する
2. [ツール]→[SSHキーの作成/インポート]を選択
3. PuTTY Key Generatorが起動する

![ssh1.png](https://qiita-image-store.s3.amazonaws.com/0/275201/4c6342a3-ace9-ae16-3205-35012af408eb.png)

###鍵を生成する
「key」の箇所をマウスでグルグル回すだけ

####公開鍵を保存する
Save pablic key をクリックして、「公開鍵」を保存する。
※ 保存場所は覚えておく

####秘密鍵を保存する
Save private key をクリックして、「秘密鍵」を保存する。なお、秘密鍵の拡張子は「.ppk」となる。


##公開鍵を自分のBITBUCKETアカウントに登録する

#####bitbucket設定　⇒　SSH鍵　へ

![ssh3.png](https://qiita-image-store.s3.amazonaws.com/0/275201/5124e71d-ee47-a6a0-7e21-42ff96f56691.png)

メニューバーの自分のアイコンから「アカウントの管理」を選択します。
アカウントの管理ページの左メニューのセキュリティにある「SSHキー」を選択します。

![staff-2016-06-21-sourcetree-ssh-02.jpg](https://qiita-image-store.s3.amazonaws.com/0/275201/829b9563-d8f1-bf43-27b6-a3ecd299234d.jpeg)



Label名を管理しやすい名前で登録します。
鍵の作成時にテキストファイルで保存した「OpenSSH authorized_key」のテキストをコピーしてきて、keyのフォーム内にペーストします。
「鍵を追加」をクリックします。

**ちなみに先ほど作成した公開鍵のファイルを何か適当なエディタで開いて中身を確認すると**

```
---- BEGIN SSH2 PUBLIC KEY ----
Comment: "rsa-key-20150806"
DEFEB3NzaC1yc2EAAAABJQAAAIEA1w3bpEzvI2baOTJkHjhV85Ysu10RYRam/1f4
sExcBlYI2wQpiPHt3JVGKxXwLvthyOQ1rBSra9dWPUcEAp+1exlM7JLNSqMC+Mwe
BWGx1ezVZQsMmN+5XQ/bEJuo/umaGs5rx3h3VSXWvZJJhNNclRX1pp6f2VIGnAx+
lvWtajc=
---- END SSH2 PUBLIC KEY ----
```

中身はこんな感じになってる(例なので乱数の値は適当)。これをそのまま Keyフォーム にコピペしても受け付けてくれない。
なので、

```
ssh-rsa 
DEFEB3NzaC1yc2EAAAABJQAAAIEA1w3bpEzvI2baOTJkHjhV85Ysu10RYRam/1f4
sExcBlYI2wQpiPHt3JVGKxXwLvthyOQ1rBSra9dWPUcEAp+1exlM7JLNSqMC+Mwe
BWGx1ezVZQsMmN+5XQ/bEJuo/umaGs5rx3h3VSXWvZJJhNNclRX1pp6f2VIGnAx+
lvWtajc=
```

というように入力します。
まず「ssh-rsa 」と打ち込んでます。 ちなみにssh-rsaの後ろに半角スペースが入っているので要注意。
その後改行し、公開鍵の中身、3行目から終わりまでをコピペしてます。

![ssh2.png](https://qiita-image-store.s3.amazonaws.com/0/275201/1f7f8ec1-e01e-de6c-018a-333426b60e83.png)

##BITBUCKETのリモートリポジトリをローカルリポジトリに取り込む
Bitbucketの左メニューにある「クローン」を選択し、「SourceTreeにクローン」ボタンをクリックします。

![staff-2016-06-21-sourcetree-ssh-07.jpg](https://qiita-image-store.s3.amazonaws.com/0/275201/d641578a-69fb-f13f-03b0-cbd6f77ba88a.jpeg)

クリックすると、このようなウインドウが表示されます。
保存先のパスを編集し、「クローン」をクリックします。



###SSHエージェントを起動
SourceTreeの画面に戻り、「ツール」 >  「SSHエージェントを起動…」を選択する。すでに起動しているのであれば、PCのディスプレイ画面のタスクトレイにある「PuTTY authentication agent」のアイコンを右クリックしてポップアップメニューから「View Keys」をクリックする。あるいはアイコンをダブルクリックする。

![ssh8.png](https://qiita-image-store.s3.amazonaws.com/0/275201/0c183d21-ffdb-20b3-82f9-f7b0157d8e11.png)

.Pageant Key List画面が表示される。「Add Key（キーの登録）」と「Remove Key（キーの解除）」のボタンがあるので「Add key」ボタンをクリックする。作成したPrivate Key「.ppk」のファイルを開いて登録する。そして、「close」ボタンを押す。

![ssh10.png](https://qiita-image-store.s3.amazonaws.com/0/275201/6ddd18f4-88ad-0d23-d841-22c7fd043450.png)

**SourceTreeの画面に戻り、「ツール」 > 「オプション」で「全般」タブの「SSHクライアントの設定」下の「SSHキー:」行の右にある「…」ボタンを押して、Private Keyのファイルを開いて登録する。右下の「OK」ボタンを押す。**

![ssh12.png](https://qiita-image-store.s3.amazonaws.com/0/275201/c00cfcc7-4f2b-8cf9-ad09-d515088df27d.png)


あとは適当にSourcetreeからファイルをコミット
⇒プッシュをして、bitbucketに反映されれば、OK！

以上です。
IBM Cloud Internet Services (CIS) のCDN機能を使ってみる

# はじめに
この記事では、IBM Cloud Internet Services (CIS)が持つ機能の1つであるCDNを使い、クライアントから最寄りのエッジにファイルがキャッシュされることを確認します。

デフォルトでは、下記の拡張子のファイルがキャッシュされます。
https://support.cloudflare.com/hc/en-us/articles/200172516-Which-file-extensions-does-Cloudflare-cache-for-static-content-
![image.png](https://qiita-image-store.s3.amazonaws.com/0/59627/d9eb276d-615c-756c-85d3-eca9214cd36b.png)

デフォルトでキャッシュされない拡張子についてはPage Rulesを設定する事で、キャッシュされるよう設定することができます。

# キャッシュレベル（Caching Level）について

CISの設定画面のキャッシュ・レベルは、「照会ストリングなし」「照会ストリングに依存しない」「照会ストリングに依存する」の3種類から選べます。

照会ストリングというのは、例えば"style.css?something"の、"?something"の部分を指します。それぞれ、下記の挙動となります。（参考：https://support.cloudflare.com/hc/en-us/articles/200168256-What-are-Cloudflare-s-caching-levels-）

照会ストリングなし：　照会ストリングが付いていない場合のみキャッシングの対象として扱う
照会ストリングに依存しない：　照会ストリングが付いていてもその部分は無視して扱う
照会ストリングに依存する：　照会ストリングが異なるものは別のファイルとして扱う

![image.png](https://qiita-image-store.s3.amazonaws.com/0/59627/c34fc1b3-40a4-27cd-ab66-844341661e8f.png)


# CDNにキャッシュされる事の確認

CISのキャッシュにHITしたかどうかを確認するには、Chromeのデベロッパーツールを使うのが便利です。
Chromeのメニューから、「その他のツール > デベロッパーツール」で開きます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/59627/8326dbe0-a818-bde5-20e6-80fe04a5191c.png)

デベロッパーツールで確認しながら、IBM CloudワシントンDCに立てたWindows環境から、東京DCのオリジンサーバー上のファイルにアクセスします。拡張子は、デフォルトでキャッシュ対象となるswfにして、サイズ128MBのファイルをオリジン上に用意しました。

1回目のアクセスでは、CF-Cache-StatusがMISSになっており、キャッシュに乗っていない事が分かります。東京DCのオリジンサーバーからワシントンDCのWindows環境まで128MBをダウンロードするのに、1分ほどかかりました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/59627/35299e51-76ed-8633-cc18-ddb1c04d307d.png)

デベロッパーツールでResponse Headersを見ると、キャッシュのHIT/MISS以外にも、cacheのmax-ageやexpire日時といった情報が含まれている事が分かります。
なお、CF-RAYの項目の末尾がIADとなっていますが、この3文字でCIS（Cloudflare）のエッジのロケーションを表しています。空港コードを使っているそうですが、IAD=ワシントン・ダレス国際空港で、Windows環境を立てたワシントンDCに近いエッジに見に行っていることがここからも分かります。
ちなみに東京のエッジのコードはNRTです（本当にエッジのデータセンターが千葉県成田市にある訳ではなく、東京エリアを指す識別子として成田空港のコードが使われています）。

2回目のアクセスをしてみます。今度はCF-Cache-StatusがHITになっており、CDNのキャッシュからファイルを取得できたことが分かります。最寄りのエッジからのダウンロードとなるので、128MBのファイルを3秒ほどでダウンロードできました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/59627/b24b1aed-2cb9-1ea7-89ec-0260cb612135.png)

# デフォルトではキャッシュされない拡張子のファイルをキャッシュされるように設定する

デフォルトでキャッシュされない拡張子についてはCISの管理画面からPage Rulesを設定する事で、キャッシュされるよう設定することができます。
参考：https://support.cloudflare.com/hc/en-us/articles/200172256-How-do-I-cache-static-HTML-

例えば、zipファイルは標準ではキャッシュされませんが、下記のPage Rulesを作成する事でキャッシュされるようになりました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/59627/57a0ba51-cf5c-40e3-31a2-73914cd09eb4.png)


【Page Rules設定前】
![image.png](https://qiita-image-store.s3.amazonaws.com/0/59627/bbbec89a-2ba3-4502-ea5d-5ae7f537ae0f.png)


【Page Rules設定後】
![image.png](https://qiita-image-store.s3.amazonaws.com/0/59627/50af3e58-04bf-4149-975e-2b1c9994500b.png)

CISのエッジは世界に125箇所以上ありますので、クライアントに近いエッジにキャッシュされたファイルを取得する事で、ウェブサイトのパフォーマンスの向上やオリジンサーバーの負荷低減が期待できます。
LaravelのRouteパラメータにバリデーションをつけたいとき

https://laravel.com/docs/5.6/routing#route-parameters のRegular Expression Constraints

```
Route::get('/admin/{role}', function ($role) {
    $list = Admin::all();
    return view('list', [
        "list" => $list,
        "role" => $role
    ]);
})->where("role","(admin|user)");
```

### PHPで書く場合

```
Route::get('/admin/{role}', function ($role) {
    if(!in_array($role,[
        "admin",
        "user"
    ])){
        abort(404);
    }
    $list = Admin::all();
    return view('list', [
        "list" => $list,
        "role" => $role
    ]);
});
```
発掘:timeGetTime(の使い方)  www.tsg.ne.jp/sept/prg/memo/timegettime.asp

##発掘の趣旨
[timeGetTime -tsg.ne.jp](http://www.tsg.ne.jp/sept/prg/memo/timegettime.asp)
が数多くリンクされているにも関わらずDeadLinkになっている
21 May 2001 - 24 Sep 2009
まで存在していたようだ。

2001年ごろはゲームにもms単位の精度はさほど要求されていなかったことがわかる。


##timeGetTimeの使い方

　まずmmsystem.hをインクルード。 そしてwinmm.libとリンクする。

　Windowsが起動してからの時間をミリ秒単位で返す。 Win9xではこの関数の標準の精度は1ms。 しかしNTでは標準では5ms以上。 timeBeginPeriod とtimeEndPeriodを使って精度を決める。 


	timeBeginPeriod( 1 );//精度を1msに設定
	
	//timeGetTimeを使う
	
	timeEndPeriod( 1 );//timeBeginPeriodで指定した値を渡す


Win9xで作った物をそのままWinNTで動かそうとするとおかしくなる。

GetTickCountとの精度比べはしたことはないけれど、 マルチメディアタイマーというからには、 timeGetTimeのほうがいいのでは、と思う。

 These multimedia timer services allow you to schedule timer events at a higher resolution than other timer services. 

こんなこともSDKドキュメントに書いてあるし。 

##60fpsの測り方

こんな感じで測るといいらしい。 

```cpp

	DWORD dwLastFlipped;//前回の時間
	DWORD dwErrorValue;//誤差値
	
	void doWait(){
		DWORD dw,dw2;
		while( 50 > (dw2 = ((dw = timeGetTime()) - dwLastFlipped) * 3 + dwErrorValue ) ){
			Sleep( 1 );
		}
		dwLastFlipped = dw;
		dwErrorValue = dw2 % 50;
	}
```

Pentium2 300MHzのマシンで1000万回呼んだ時、GetTickCountは650ms、timeGetTimeは3800ms程度掛かった。 GetTickCountより重いとはいえ問題にならない程度だと思う。

QueryPerformanceCounterというのもあるらしい。 根拠は無いが、ゲームに使う分にはtimeGetTimeで十分ではないだろうか。

NVIDIAに Timer Function Performanceというツールがあった
”デバッグなしで実行”の対象を変えたい（個人用メモ

#状況
サンプル等のプロジェクトを開くとソリューションエクスプローラに複数のプログラムが。

windowsのCUIプログラムのcmdは実行後に自動で閉じてしまうため何がなんだか分からない。

ひとつのプログラムのときは”デバッグなしで実行”で止めていたが...



#方法
対象をスタートアッププロジェクトにする

#最後に
先生ありがとうございます。長年のなぞが解けました。
path(環境変数)を要素ごとに改行して表示するバッチ

#きっかけ
Windows で環境変数 PATH をいじる方法のまとめ
https://qiita.com/sta/items/6d29da0dc7069ffaae60
↑の900090009さんのコメをバッチ化したら出力が...だったのでメモ
#内容

```path.bat
@echo:&echo %path:;=&echo.%
@pause
```
jQueryの基本を簡単にまとめる

##ライブラリを利用する理由

* クロスブラウザ対応が簡単にできる。
* 利用しているプロパティなどがブラウザごとで利用できないといったことを避けることができる


###jQueryの特徴
1. メソッドチェーンを利用できる
2. CSS3セレクタや独自セレクタによる要素の取得
3. プラグインによる拡張性の高さ

#####1. メソッドチェーンを利用できる

```js:js
$('#foo').find('.foo-child').text('hello');
```
ドット演算子でつなぐことができ、処理を順番通りに実行することができる。理由は、メソッドの返り値がjQueryオブジェクトであるから。返り値のjQueryオブジェクトに対して、さらにメソッドを利用することができる。

##jQueryでよく使うメソッド一覧

####要素を選択

| メソッド         | 説明 |
| ---------------- | ---- |
| css(prop, value) |      |
| addClass         |      |
| removeClass      |      |
| toggleClass      |      |
| offset()         |      |
| scrollTop()      |      |

####要素を操作

| メソッド         | 説明 |
| ---------------- | ---- |
| css(prop, value) |      |
| addClass         |      |
| removeClass      |      |
| toggleClass      |      |
| offset()         |      |
| scrollTop()      |      |

####スタイルの操作

| メソッド                        | 説明                                    |
| ------------------------------- | --------------------------------------- |
| css(prop, value)                | cssを変更                               |
| addClass                        | クラスを追加                            |
| removeClass                     | クラスを削除                            |
| toggleClass('class', 'content') | クラスがあればcontent追加、なければ削除 |
| offset()                        | 位置を取得                              |
| scrollTop()                     | スクロール位置を取得                    |

####アニメーション
アニメーションメソッドは以下の引数を取る

* duration・・・アニメーション完了までの時間を表す
* easing・・・アニメーションで変化させる値の変化量を設定する
* callback・・・アニメーション完了時に実行されるコールバック関数を設定


| メソッド                        | 説明                                    |
| ------------------------------- | --------------------------------------- |
| css(prop, value)                | cssを変更                               |
| addClass                        | クラスを追加                            |
| removeClass                     | クラスを削除                            |
| toggleClass('class', 'content') | クラスがあればcontent追加、なければ削除 |
| offset()                        | 位置を取得                              |
| scrollTop()                     | スクロール位置を取得                    |
Dockerコンテナ上にあるDBにSSHトンネルで接続する

## 前提条件(環境)
- (DB)サーバー:CentOS7.3
- ローカル:macOS High Sierra
- 公開鍵認証が可能な(DB)サーバーが構築済み
- (DB)サーバーにDocker・docker-composeがインストール済み

## docker-compose.yml

```docker-compose.yml
version: '3'
services:
  db:
    image: postgres:9.2 #試したのは古いversion
    ports:
      - 127.0.0.1:5432:5432 #　ここがキモ
    environment:
      - POSTGRES_DB=postgres
      - POSTGRES_USER=root
      - POSTGRES_PASSWORD=password
    container_name: "pg9.2"
```

## 操作

サーバーにSSHログインし、`docker-compose.yml`のある場所で、`docker-compose up -d`を実行

## 接続

PSequelでは以下のように設定すると接続できる。

<img width="550" alt="スクリーンショット 2018-09-05 20.15.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/133718/f4fbeb09-67e8-1a24-3ec7-c4723ef11b62.png">

Passwordは`docker-compose.yml`で設定したPOSTGRES_PASSWORDを入力。
SSH HostはサーバーのIPアドレス。
SSH UserはSSHログインのUser。
Identity FileはSSHログインに使うprivatekey。
SSH PortはSSHログインに使うPort(当たり前だと思いますがデフォルトPortの22は普通は使わない)。
簡単なハンドライティングっぽいアニメーションの実装

##SVGをゴニョゴニョやる？
一つだけ大きくどーん！って置くだけならそれでもいいですけど、違う単語でいくつもパラパラと置くとなるとそんなことやってられないですよね。

##ではそれっぽくCSSだけでやってしまおう

HTMLはこんな感じで、

```
<div class="hand-writing">
   <span>Comming Soon</span>
</div>
```

CSSを下記のようにします。

```
.hand-writing {
    position: absolute;
    clip: rect(0 0 100px 0); //ここの高さは適当に。文字の高さより低くなければOK
    transform: skew(-30deg); //ここの角度はフォントの斜め具合に合わせて決める
    transition: clip 3s ease-in-out 0s; 
　　　　　　　　//いろいろ試したがease-in-outが一番それっぽくなりました。
}

.hand-writing > span {
    position: absolute;
    left: 20px;　//親要素からはみ出た分を微調整
    top: 0;
    transform: skew(30deg);　//正位置に戻す。absoluteになっていないと効かないので注意
}
```

そして例えば可視領域に入ったら`.is-animated`というクラスを付与するみたいなことをしてあげて、

```
.hand-writing.is-animated　 {
    clip: rect(0 300px 100px 0); //ここの幅は適当に。文字の幅より広くなればOK
}
```

こうすることで簡単なハンドライティングっぽいアニメーションが実装でき、こんな感じになります。

![adf8ab4feb0b1af57f53182be171532b.gif](https://qiita-image-store.s3.amazonaws.com/0/191975/d9ff32d0-ec3a-59fe-aa11-9c17412eefe1.gif)

以上です！
suでユーザーを切り替える前にディレクトリを移動

`sudo su -`でrootになったり、ユーザーを切り替えたあとにディレクトリ移動がめんどくさいときってありますよね。そんなときは、下記のように実行すると飛べます。

もちろんcd以外のコマンドも実行したあとにbashを起動できます。

```bash
sudo su - hoge-user --session-command  -c "cd / && /bin/bash"
```
ESP-WROOM-32でサーボモーターを動かす

# story　経緯
ESP32のような高性能なマイコンでservoを動かしたい。
ESP-wroom-32が良さそうだけどライブラリがなかったので、作った。

## requirement 要件
- arduino ideで開発可能
- 高性能なCPU
- 多才なシリアル通信機能（特にUART）
- サーボが６個以上、可能なら８欲しい。
- 安価

# usage 使い方
Arduinoに
[https://github.com/takashiAg/ESP32_servo]()
を導入する
##導入方法
1. [ここ](https://github.com/takashiAg/ESP32_servo)のページの右側から、zipファイルをダウンロード  
<img width="377" alt="スクリーンショット 2018-09-05 19.51.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/195504/0977fa7a-2c89-e35f-2415-3723e819c0c4.png">
2. 「スケッチ」「ライブラリをインクルード」「.ZIP形式の…」をクリック  
3. <img width="826" alt="スクリーンショット 2018-09-05 19.52.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/195504/984ed223-b542-b212-7714-bd386a62b81c.png">
3. さっきダウンロードしたZIPファイルをインクルード

## コード
```cpp:arduino_IDE
#include "ESP_servo.h"

ESP_servo servo;

void setup() {
  servo.init(23,0);
}

void loop() {
  for (int pos = 10; pos <= 170; pos += 1) {
    servo.write(pos);
    delay(15);
  }
  for (int pos = 170; pos >= 10; pos -= 1) {
    servo.write(pos);
    delay(15);
  }
}

```