OmniAICreator/Qiita-1.07M huggingface dataset:
Vue.js使いだして２年くらい経ったけど、使ったことないAPIを使ってみる「グローバルAPI」(1/2)

### [Vue.nextTick( [callback, context] )](https://jp.vuejs.org/v2/api/#Vue-nextTick)

```js
const vm = new Vue({
  el: '#app',
  data: {
    msg: ''
  }
})

vm.msg = 'Hello'
console.log(vm.$el.clientHeight) // 0
Vue.nextTick().then(() => {
  console.log(vm.$el.clientHeight) // 24
})
```

要素の高さを取得したいときなどに使える。

### [Vue.set( target, key, value )](https://jp.vuejs.org/v2/api/index.html#Vue-set)

```js
const vm = new Vue({
  el: '#app',
  data: {
    error: {}
  }
})

vm.error.msg = 'Hello' // NG:リアクティブではない
Vue.set(vm.error, 'msg', 'Hello') // OK:プロパティの追加でもリアクティブに反応する
```

### [Vue.delete( target, key )](https://jp.vuejs.org/v2/api/index.html#Vue-delete)

> これは主に Vue がプロパティの削除を検知できないという制約を回避するために使われますが、使う必要があることはまれです。

全然思いつかないので、使い方は知らなくていいか、、、

### [Vue.directive( id, [definition] )](https://jp.vuejs.org/v2/api/index.html#Vue-directive)

```js
Vue.directive('focus', {
  inserted (el) {
    el.focus()
  }
})
```
```html
<input v-focus>
```
`inserted`以外のタイミングとして

* bind
* update
* componentUpdated
* unbind

がある。

### v-my-showの実装

```js
const updateDisplay = (el, binding) => {
  if (!!binding.value === true) {
    el.style.dispaly = 'inline'
  } else {
    el.style.display = 'none'
  }
}

Vue.directive('my-show', {
  bind: updateDisplay,
  update: updateDisplay
})
```
APIデザインルール

####**I. 一般的なルール**
- API説明書を作成して、APIの情報を説明する、例えば：APIの名、APIの内容、レスポンスとリクエスト、。。。
- URLにサイトのバージョンを書く。
`http://myapisite.com/v1/api/widgets`
- 新しいバージョンがある時、API説明書に変更を記録する。
- JSONまたはXMLタイプのリクエストの代わりにAPI URIsを使用する。
`http://myweb.com/login?User=name -> http://myweb.com/login/user/name`

####**II. APIデザインルール**
- 認証が必要なAPIでは、APIログインの値をコメントする。例えば：ユーザー名、パスワード、トークン、。。。
- エラーをはっきり通知して、機能に欠陥があるか、変数に欠陥があることを示する。
`“Can’t find file” -> “The file filename can’t be found in folder folder name”`

####**III. 命令のルール**
- 変数名や関数名やAPIの名前は変数や関数やAPI自体に定義することができる
`“int A” -> ”int CountUser”, “function show” -> ”function showAllContacts”`
- 命名の一貫性
- 略語を避ける
- 変数名は名詞に使用べきだ。動詞の使用を制限する
- 変数名はスペースを削除して、各単語の最初の文字を大文字にする。
`“int userphonenumber” -> “int UserPhoneNumber”`
- メソッド(GET, POST, PUT, DELETE)を付けるAPIなら、関数名＝メソッド＋機能
`API: get(“/userLogIn/logIn”) -> 関数名：“getLogIn”` 
- 各apiグループの前に、apiグループがやっていることについてコメントする。
`/* userLogIn
Controller: UserController
Work: log in, register, forgot password */
`

####**IV.	参考文献参考文献**
- API design: https://people.mpi-inf.mpg.de/~jblanche/api-design.pdf
- How to design a good API and why it matters: 
http://zoomq.dn.qbox.me/ZQCollection/presentations/Howto-Design-a-Good-API_Why%20it%20Matters.pdf
- REST API rulebook: 
https://books.google.com.vn/books?id=4lZcsRwXo6MC&pg=PR4&lpg=PR4&dq=api+design+rule&source=bl&ots=F5Ak7DqvfN&sig=YYy_frOZepM0GcAPxoIIF2oznYo&hl=vi&sa=X&ved=0ahUKEwj2pOzo8pHVAhWElZQKHUfUDTQ4ChDoAQhQMAU#v=onepage&q=api%20design%20rule&f=false


####API説明書
![image.png](https://qiita-image-store.s3.amazonaws.com/0/349079/f5f80f64-a199-1bfb-e61e-2dded23b8252.png)
How To Create Gitlab Project Using GIT API And Lumen

This tutorial help to create gitlab project using git api v4 and lumen micro rest framework. This rest tutorial is help to create project under the specific groups using api.The gitlab group can be contains number of projects.We just add one new project into that project using API.

https://www.restapiexample.com/build-rest-api/how-to-create-gitlab-project-using-git-api-and-lumen/
Bot UIはかなり便利かもしれない件

公開から2、3日で1000view頂いてびっくりしてるので、気が向いたら動くBotをheroku にデプロイして公開します。  
## Bot UIって何さ
JavaScriptだけでチャットボットを作ることができるライブラリ　　
かなり汎用性が高い上に、JSがさっぱりわからない僕ですらできたので、かなり初心者フレンドリーなライブラリです。　　
最新版は０.３.７（更新：2018年12月16日）で、2019年1月24日段階でもGithubは盛んに動いているようです。　　
こちらからクローンするなりして使ってみてください。　　
 [Github/Botui](https://github.com/botui/botui)　　

##　何ができるの？　　
普通のウェブサイトなどに埋め込めるチャットボットが瞬時に作れます。　　
かなり下記の公式サイトがしっかりしてるので、ここでコードは書きません。
　　
３０分程度で「脳筋クリニック（仮）」の診断ボットを作ってみました。　　
<img width="395" alt="Screen Shot 2019-01-25 at 1.50.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/266135/9ebd0b14-536d-5380-d5b4-89711fbdd25e.png">　　
（注）写真はぱくたそさんからお借りしてます。　　
https://www.pakutaso.com/bodybuilding.html　　



#　公式サイト
・[Github/Botui](https://github.com/botui/botui)　　
・[Botui　Guide](https://docs.botui.org/guide.html)
SourceTreeで別アカウントでpushする

細かい仕様理解してないけどメモ。

いっつも、仕事でとあるアカウントでGitHubで作業しているとする。
ごくたま～に、自分のアカウントでPushでもするかーと重い腰上げる時に困るのがPUSHの仕方。

![ss.png](https://qiita-image-store.s3.amazonaws.com/0/26085/588b1fa1-7dcb-ff29-3177-837020eb3d05.png)

コミットする時に、上の画像みたいな感じで、ま、切り替えたい方でやればいいやろ！とコミットする。
で、


![ds.png](https://qiita-image-store.s3.amazonaws.com/0/26085/9177f77a-3f7d-789d-0dd5-5fc5b390560d.png)


サクッとリモートを追加して、(hogehogehoge@hoge.comなんて無いので、切り替え元のアドレスになってるけど許して)
これでええやろ！とPUSHしようとしてもやっぱり駄目。

そりゃそうだ、と思うけど、たまにしか触らないエンジニアなんてこんなものだ。

---

ということで解決策。

![sfe.png](https://qiita-image-store.s3.amazonaws.com/0/26085/aca04be2-af06-f87d-2eda-8fe42e0c0b32.png)

どーせグローバルユーザーが会社アカウントだと思うので、高度な設定で明示的にアカウント切り替え。
次に、

![s333.png](https://qiita-image-store.s3.amazonaws.com/0/26085/539c8990-5597-3d4f-b0e7-baeb992b53fa.png)

みたいな感じで、github.comの前にアカウント名を入れてやる。
これでPushできる。もちろん、最初の一回目はパスワードを聞かれるので入力してやる。
(2段階認証設定していると、パスワードじゃなくてトークンを設定するはずだけど詳しくはわすれた)

これで一見落着にみえるけど、ちょっとトラップがある。
最初、著者代替で一発コミットしたけれど、そうするとGithubの表示が
![ge.png](https://qiita-image-store.s3.amazonaws.com/0/26085/e6f4e41e-508d-064a-d6d9-3e0b75a1c7c7.png)
みたいな。よくわからんけど2人になる。
高度な設定で変えた後、著者代替なんて使わずにコミットした場合だと大丈夫だった。

なんとなくカッとなって記事書いてみたけど、思ったより書きやすかった。(なんの話だ）
[Ubuntu 18.04] 脳死でDockerを使うための備忘録(基礎編)

よくある元記事の情報削ぎまくってMatomeた系の記事なので英語アレルギーでない方は下記記事を参照していただけると皆幸せです。

[How To Install Docker on Ubuntu 18.04 & 16.04 LTS](https://tecadmin.net/install-docker-on-ubuntu/)

## 1. 前準備

（任意）システムに入っている既存のDockerパッケージを削除

```bash
$ sudo apt-get purge docker lxc-docker docker-engine docker.io
```

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

```bash
$ sudo apt-get install  curl  apt-transport-https ca-certificates software-properties-common
```

## 2. Docker リポジトリのセットアップ

公式のGPGキーでシグニチャを確認

```bash
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add
```

システムにDockerリポジトリを追加

```bash
$ sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
```

## 3. Dockerをインストール

入れる

```bash
$ sudo apt-get update
$ sudo apt-get install docker-ce
```

下記コマンドでサービスが起動しているか確認

```bash
$ sudo systemctl status docker
```

## 4. Dockerの簡単な使い方

### 脳死用語解説

**イメージ**・・・コンテナを作成する際に必要となるファイルシステム
**コンテナ**・・・イメージを元に作成した仮想環境

### `docker search パッケージ名` : イメージ探す

```bash
$ docker search ubuntu
```

### `docker pull パッケージ名` :  イメージをダウンロード

```bash
$ docker pull ubuntu
```

### `docker images` : 落としたイメージを確認

```bash
$ docker images

REPOSITORY  TAG            IMAGE ID            CREATED             VIRTUAL SIZE
```

### Imageを使って新しいコンテナを起動

```bash
$ docker run -i -t ubuntu /bin/bash
```

### `CTRL + P + Q` で環境からデタッチ

コンテナをバックグラウンドで動かしてる状態でホストシステムのコンソルに戻る

**`exit`コマンドを使うとコンテナが停止する**

### `docker ps` : 実行中のコンテナを確認

`-a` オプションで停止しているものも含め、全てのコンテナをリストアップする

```bash
$ docker ps
```

### `Start Stop and Attach` コンテナ操作

Stop, drop, and roll(※1)じゃないゾ。

停止中のコンテナを起動させるには `docker start ほげ`

```bash
$ docker start <CONTAINER_ID>
```

実行中のコンテナを停止させるには `docker stop ほげ`

```bash
$ docker stop <CONTAINER_ID>
```

実行中のコンテナにアタッチするためには `docker attach ほげ`

```bash
$ docker attach <CONTAINER_ID>
```

## Macっていうウィンドウズを使ってる場合

Mac/Windows共にDocker HubのIDを作成して公式Docker Hubからダウンロード。

[Install Docker Desktop for Mac] (https://docs.docker.com/docker-for-mac/install/)

※1 火事の際「慌てず立ち止まり、煙のない床に横になり、転がって避難する」というアメリカの小学校の防災訓練でまず学ぶこと。だから何？最後まで読んでくれてありがとう。
PowerApps でドキュメントライブラリのサムネイルが表示可能になりました (Flow不要)

これまでSharePoint Onlineのドキュメントライブラリに保存された画像ファイルをPowerAppsに表示させる場合、ライブラリに属性情報としてファイルのURL列を追加し、Flowを経由してその列を更新する/SharePoint REST APIでファイルのサムネイルを取得するという方法がとられてきました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/202779/556c6479-fdad-a5ff-c2ca-d2b7256c526b.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/202779/70b1296c-3523-06d1-f20d-7d06be968dc9.png)

昨日確認したところ、現在はこのようなURL列・Flowを利用することなく、ドキュメントライブラリの画像（サムネイル）を直接表示させることができましましたので、方法を紹介します。

#PowerAppsにドキュメントライブラリを追加
まず適当なキャンバスアプリを作成します。ドキュメントライブラリはまだフルサポートされていませんが、通常のカスタムリストと同様の手順でドキュメントライブラリをデータソースとして追加することができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/202779/eb1df04e-ffa0-b13d-c00b-6d1c448ced35.png)
追加が完了したら、アプリにギャラリーコントロールを追加し、データソースとして先ほどのドキュメントライブラリを設定します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/202779/ad961ee4-d066-58cf-3548-b4c813549ff4.png)

##ここからが変更点です。
これまではギャラリーの画像に対して、Flowで設定した画像URL列を指定していました。
ですが現在は、**ThisItem以降の選択肢に[サムネイル]が表示されていることがわかります。**
![image.png](https://qiita-image-store.s3.amazonaws.com/0/202779/b3132417-544a-dea6-f010-2f6179617f0a.png)
サムネイルを指定すると、さらに選択肢として Large, Medium, Smallが表示されました。
試しにMediumを選択します。
（この段階で、ImageのImageプロパティは ```ThisItem.サムネイル.Medium```)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/202779/cf91f5e9-2e28-d570-f349-b5e132965d20.png)
結果、特別に追加したURL列を利用することなく、サムネイル画像が表示されていることがわかります。
また、サムネイル以外の選択肢も変更されているように見えます。
記憶が定かではありませんが、'Link to item'というプロパティも用意されています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/202779/f13fcb5b-a5f8-f74a-c610-a0d02c190d2d.png)
これを使うことで、ボタンクリック時に別タブで画像を直接表示させることが可能になります。

##気になるモバイルの対応は？
今回の「サムネイル」はもちろんモバイルアプリからの表示にも対応しています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/202779/9d584164-8e64-04e1-6365-0bea576699b4.png)

モバイルのPowerAppsアプリでLaunch()を実行した場合には、ブラウザで対象ファイルのURLが開かれます。
※サインインしていない場合にはサインインを求められます。

ということで、これまで以上に簡単に画像を表示させることができました。

カスタムリストの添付ファイル表示については[こちら](https://qiita.com/h-nagao/items/43b467cfdc5f7161755d)の記事を参照してください。
メモ：Visual Studio(2017)でpybind11を動かす



# 設定した事項
* dllとしてプロジェクトを作成
* インクルードディレクトリにpythonのincludeディレクトリ，及びにpybind11のincludeディレクトリ追加
* ライブラリディレクトリにpythonのlibsディレクトリを追加
* `リンカー->入力->追加の依存ファイル`にpython36.libを追加．
* `全般->ターゲット名`をexampleに`ターゲットの拡張子`を`.pyd`に．
使用したコードは[チュートリアル](https://pybind11.readthedocs.io/en/stable/basics.html)から引っ張ってきたもの

```cpp

#include <pybind11/pybind11.h>
namespace py = pybind11;

int add(int i, int j) {
	return i + j;
}

PYBIND11_MODULE(example, m) {
	m.doc() = "pybind11 example plugin"; // optional module docstring

	m.def("add", &add, "A function which adds two numbers");
}
```

# 発生した問題と解決法
```
error Macro clash with min and max -- define NOMINMAX when compiling your program on Windows
```
なる警告

windows.hにはmin,maxという関数があり，これがSTLのライブラリと衝突しているらしい．しかしメインとなるCPPにおいて`#define NOMINMAX`しても問題は解決しなかった．原因はわからなかったが．`構成プロパティ->C/C++->全てのオプション->その他のオプション`に`-DNOMINMAX`を追加したらうまくいった

少々トラブルはあったものの，ヘッダーオンリーなだけあって簡単に使えるようになった．チュートリアルによればexampleを読むと結構使い方がわかるようなので，もう少しいろいろ試してみたい．
SMTソルバ　Z3 in intelliJ IDEA for Mac

# MacのintelliJでZ3を使う
- [z3のrelease](https://github.com/Z3Prover/z3/releases)からダウンロードして解凍。ホームに適当に`z3`というフォルダを作り、解凍して出てくる`bin`フォルダをz3以下に配置
- Project Structure->Librariesから`home/z3/bin/com.microsoft.z3.jar`ファイルを登録
- `libz3.dylib`と`libz3java.dylib`をbinから`コピー`して(binフォルダにも残す) `/usr/local/lib`に配置。ここまで別の方が書かれた[Hello SMT-Solver by z3](https://qiita.com/tachiyama/items/2c1dae78ff8104a2b327)と同じです
- Project Structure->ModulesのDependenciesタブの左下`+`マークから、Library->Javaを選択（これはUltimateのUIの話で、CEだとJavaの選択がないかもしれませんが同じです）して`z3/bin`フォルダを選択
- おわり

おそらくこれで使えるようになったと思います。

この界隈は同業者が少ないでしょうが少しでも助けになれば幸いです。
チーム勉強会で利用したCTF問題(web)を公開しました

こんにちは。ﾜｲﾊﾘﾏのdeko2369です。

昔チーム勉強会で利用したCTF問題が、ほかのチームの方に解答していただいたところ、
思いのほか好評だったので思い切ってCTF問題として公開することにします。

問題はDocker Hubにdockerイメージとして公開したので詳しくは以下のリンクを参考に環境整備してください。（イメージ容量が100MB近くあり重たいのですが、そこはご了承くださいませ。。。）
https://hub.docker.com/r/deko2369/super-palm-tree

起動してブラウザアクセスすると以下のような画面が出てきます。生えます。
![super-palm-tree](https://qiita-image-store.s3.amazonaws.com/0/5804/40701123-7260-d538-314b-03461feb5ebb.png)

内容は昔のCSAW CTFの改題となっています。また、writeupなども自由に書いていただいて構いません。ぜひ遊んでみてください！
ある条件のファイルに対して処理を行う

# 何がしたいか
ファイル名、ディレクトリ名にある文字を含むファイルすべてを削除する必要がありました。ファイルがたくさんあるので手作業では無理だったのでシェルで削除しようと試みました。

## 条件
* ファイル名に"hoge"が含まれていないこと
* カレントディレクトリ以下のディレクトリ名に"hoge"が含まれていないこと
* ファイルのみが削除対象
* ファイル名に半角スペースが含まれている

# 試したこと
まずはfindとgrepを使って、"hoge"が含まれないファイルのフルパス一覧を取得します。

`find * \! -type d | grep -v "hoge"`

* ディレクトリ以外を指定
* grepで"hoge"を含まない行のみを選択

次に、xargsでrmコマンドを動かします。これで消したいファイルを一気に削除することができました。

`find * \! -type d | grep -v "hoge" | xargs -d \\n rm`

ファイル名に半角スペースが含まれるため、オプションなしでは1つのファイルを2つのファイルをして認識してしまいます。したがって、受け取る文字列の区切り文字を-dオプションで明示的に指定します。

ファイル名指定であれば以下でも条件を満たすことができると思いますが、今回は【カレントディレクトリ以下のディレクトリ名に"hoge"が含まれていないこと】が条件にあるので、grepを使いました。

`find * \! -type d -name "*hoge*" print0 | xargs -0 rm`

[2019/01/26 追記]
angel_p_57さんにコメントをいただき、内容を大きく修正しました。
元々は、ディレクトリもまとめてrmコマンドに突っ込んでいたため、エラー前提で実行していましたが、やはり余計なものは取り除いた方がスマートでした。
ありがとうございます。
Python pptk でお手軽点群表示

[pptk - Point Processing Toolkit](https://github.com/heremaps/pptk) という Python ライブラリを知り、Qiita記事やその他の日本語情報がなさそうだったので紹介記事を書きます。

## pptk について

pptk は位置情報を扱うオランダの企業 [HERE Technologies](https://developer.here.com/) で開発されているようです。本記事の執筆時点ではバージョンは0.1.1で、MITライセンスになっています。

Python には同時期に登場した [Open3D](https://github.com/IntelVCL/Open3D) という点群処理ライブラリがあり、そちらの方が機能が豊富です。というか、pptk の機能は現時点でかなり限定的で、点群処理ライブラリと言いながら、[ドキュメントのページ](https://heremaps.github.io/pptk/) の [処理の項](https://heremaps.github.io/pptk/processing.html) には法線推定と k-d tree での最近傍探索しか載っていません。GitHub の最終コミットも2018年10月5日となっており（2019年1月24日現在）、あまり活発ではなさそうです。

ただ、機能が限定されている分、ビューワーに関しては点群処理ライブラリを初めて使った私でも簡単に使えて便利でしたので、簡単な例をご紹介します。複雑な例については[チュートリアルのページ](https://heremaps.github.io/pptk/tutorial.html)をご覧ください。

## インストール方法

```
pip install pptk
```

で入ります。私の場合は pptk==0.1.0 が入りました。

### Ubuntu 18.04 での注意

Ubuntu 18.04 の場合は以下のイシューに書かれている対応が必要となります。

- [pip install pptk doesn't work on ubuntu 18.04/kubuntu 18.04 · Issue #3 · heremaps/pptk](https://github.com/heremaps/pptk/issues/3#issue-369762268)

virtualenv (Python 3.6) を例にすると以下のような手順を行います。

```bash
cd venv/lib/python3.6/site-packages/pptk/libs/
mv libz.so.1 libz.so.1.old
ln -s /lib/x86_64-linux-gnu/libz.so.1
```

## 点群を表示

[ビューワーのドキュメントページ](https://heremaps.github.io/pptk/viewer.html) に必要なことは大体書いてあります。

ランダムに100個の点を生成し、表示するコードは以下のようになります。

```python
xyz = pptk.rand(100, 3)
v = pptk.viewer(xyz)
v.set(point_size=0.005)
```
![sc1.png](https://qiita-image-store.s3.amazonaws.com/0/63995/7047cb05-5c78-0845-e56d-0be6a1f5a67d.png)


更に点にランダムな色をつけたい場合は、

```python
rgb = pptk.rand(100, 3)
v = pptk.viewer(xyz, rgb)
v.set(point_size=0.005)
```

![sc2.png](https://qiita-image-store.s3.amazonaws.com/0/63995/031f42fe-7ed7-e63b-c39d-89bbdce10a1a.png)

色はRGBそれぞれを0から1までの数値で表します。ここで `xyz` や `rgb` は pptk の `Points` というクラスですが、Python のリストや、NumPy の array を入れてもOKです。

さらに色の指定は可変長引数になっていて複数指定できます。

```python
rgb1 = pptk.rand(100, 3)
rgb2 = pptk.rand(100, 3)
v = pptk.viewer(xyz, rgb1, rgb2)
v.set(point_size=0.005)
```

色の切り替えはキーボード操作で <kbd>[</kbd> と <kbd>]</kbd> で出来ます。

![animated.gif](https://qiita-image-store.s3.amazonaws.com/0/63995/6ff3baea-93e1-ef38-da7c-b8d6015cd50a.gif)


ビューワーは他にもマウスやキーボード操作ができます。ホットキーは <kbd>1</kbd>, <kbd>3</kbd>, <kbd>5</kbd>, <kbd>7</kbd>, <kbd>c</kbd> などがあります。詳しくはビューワーのドキュメントページを参照してください。
その他、スクショを撮ったり録画したり、アニメーション表示したりもできるようです。

## 画像の表示

座標と色を指定できるようになったので画像を表示してみたいと思います。

```python
import numpy as np
from PIL import Image
import pptk

imgs = [Image.open(fname) for fname in ['wanihakase.jpg', 'sugamon.jpg','okazaki.jpg']]
rows, cols = imgs[0].size

pts = [[r/1.414, c, -r/1.414] for  r in range(rows) for c in range(cols)]
v = pptk.viewer(pts)

colors = [np.array(img.getdata())/255 for img in imgs]
v.attributes(*colors)
```

![animated.gif](https://qiita-image-store.s3.amazonaws.com/0/63995/0018f01b-2f65-8ed7-ed5d-815ff97c956e.gif)

この例のように色の指定は `pptk.viewer()` だけではなく `pptk.viewer.attributes()` でもできます。

今回使用したコードは画像も一緒に[こちらのリポジトリ](https://github.com/pn11/benkyokai/tree/master/image-processing/pptk)に置いてあります。

## Reference

- [pptk GitHub リポジトリ](aa)
- [pptk ドキュメント](aa)
TLS拡張によるOCSP応答

#概要
- OCSPによる証明書の有効性確認は、TLS拡張としてTLSハンドシェイク内で行うことができる。[RFC6066](https://www.ipa.go.jp/security/rfc/RFC6066JA.html#116)
- OCSP要求はTLSクライアントからのstatus requestで発行される。(openssl s_clientの場合は、-statusオプションが該当する。)
- OCSP要求を受けたTLSサーバは、certificate statusにOCSPステータスを応答する。
- TLSクライアントは、TLSサーバからのcerfificate statusを診断し、ステータスが不完全な場合は、TLSを中断する等の対応が必要となる。
- TLS1.2拡張でやり取りされる、上記、OCSP要求・応答をWiresharkによるキャプチャで確認する。

# Client Hello
- TLSクライアントがOCSP要求すると、Client Hello拡張にstatus requestを含む。
- status requestのcertificate status typeはOCSP。
- Responder ID listには、クライアントが信頼するOCSPレスポンダリストを乗せるが、本例のようにOCSPStapling等、サーバ暗黙の場合は空のリストになる。
![client_hello_status_request.jpg](https://qiita-image-store.s3.amazonaws.com/0/282300/633a7246-cd77-3593-4885-faa362c9e567.jpeg)

# Server Hello / CerfificateStatus
- TLSサーバはServer Hello拡張として、Certificate直後にCertificate Statusを応答する。
- Certificate StatusにはOCSPステータスと証明書情報が含まれる。
- OCSPステータスには[RFC2560](https://www.ipa.go.jp/security/rfc/RFC2560JA.html)定義のgood/revoked/unknownと、エラー状態を表すtryLater等がある。

## goodの場合
- サーバ証明書の有効の場合、OCSP応答はcertStatus:goodを応答する。
![certificate_status_ok.jpg](https://qiita-image-store.s3.amazonaws.com/0/282300/723039ff-564c-08e9-41eb-12aee5452a0c.jpeg)

## revokedの場合
- サーバ証明書が失効の場合、OCSP応答はcertStatus:revokedを応答する。
![certificate_status_revoked.jpg](https://qiita-image-store.s3.amazonaws.com/0/282300/1cd070bb-b965-496c-aaae-b5392397f60d.jpeg)

## unknownの場合
- OCSPレスポンダが要求されたサーバの証明書を見つけられない等、サーバ証明書が不明の場合、OCSP応答はcertStatus:unknownを応答する。
![certificate_status_unknown.jpg](https://qiita-image-store.s3.amazonaws.com/0/282300/a46e98e4-a87a-b6a2-7b79-cf02cacae1d8.jpeg)


## Try Laterの場合
-  一時亭にOCSP応答が得られない場合、OCSP応答はcertStatus:unknownを応答する。例えばOCSPレスポンダが停止している、TLSサーバ、OCSPレスポンダ間の通信ができない等の状況が考えられる。
![certificate_status_trylater.jpg](https://qiita-image-store.s3.amazonaws.com/0/282300/eafe25ba-d922-ac80-9c7d-6171bf372f40.jpeg)
【R】データの読み込み

Rを久々に使うと、特にデータファイルの読み込みの仕方を忘れていることが多いので、備忘録としてまとめてみました。

# 小規模なデータの取り扱い

## ベクトルの作成

* 同じデータ型の複数のデータを扱う時は、c関数を使ってベクトルを作成します。

```r:Rのコンソール
height <- c(35, 30, 21, 18, 28, 10)
height
[1] 35 30 21 18 28 10
```

# 中～大規模なデータの取り扱い

## ベクトルから行列を作成

* cbind関数を使うことで、複数のベクトルを1つの行列にまとめることができます。
* 行列は「全ての列が同じデータ型であること」という条件があるため、数値と文字列を混在させることができず、解析にはやや使いづらいデータかもしれません。


```r:Rのコンソール
height <- c(35, 30, 21, 18, 28, 10)
leaves <- c(10, 6, 7, 8, 7, 4)
flowers <- c(15, 5, 2, 0, 3, 0)
orchids <- cbind(Height=height, Leaves=leaves, Flowers=flowers)
orchids
     Height Leaves Flowers
[1,]     35     10      15
[2,]     30      6       5
[3,]     21      7       2
[4,]     18      8       0
[5,]     28      7       3
[6,]     10      4       0
```

* data.frame関数で行列データを読み込むと、行列をデータフレームに変換できます。

```r:Rのコンソール
df_orchids <- data.frame(orchids)
df_orchids
  Height Leaves Flowers
1     35     10      15
2     30      6       5
3     21      7       2
4     18      8       0
5     28      7       3
6     10      4       0
```


## ベクトルからデータフレームを作成

* data.frame関数を使うことで、複数のベクトルを1つのデータフレームにまとめることができます。

```r:Rのコンソール
height <- c(35, 30, 21, 18, 28, 10)
leaves <- c(10, 6, 7, 8, 7, 4)
flowers <- c(15, 5, 2, 0, 3, 0)
orchids <- data.frame(Height=height, Leaves=leaves, Flowers=flowers)
orchids
  Height Leaves Flowers
1     35     10      15
2     30      6       5
3     21      7       2
4     18      8       0
5     28      7       3
6     10      4       0
```

* データフレームとしてデータを保持しておけば、"データフレーム名$列名"の形で任意の列のデータを取り出すことができます。

```r:Rのコンソール
orchids$Leaves
[1] 10  6  7  8  7  4
```


## CSVファイルからデータフレームを作成

* CSVなどのデータファイルからデータを読み込む場合、read.table関数を使ってデータフレームとして取り込みます。
 * "header"で「ヘッダ行の有無」を指定します。
 * "row.names"で「指定した列番号のデータを行名として扱う」ことができます。
 * データファイルに日本語文字が含まれている場合などは、"encoding"で「文字コード」を指定します。
 * "sep"で「区切り文字」を指定します。
* Windows環境の場合、ファイルパスの区切り文字が「バックスラッシュ2つ」になるので要注意。

```csv:orchids.csv
,Height,Leaves,Flowers
orchid1,35,10,15
orchid2,30,6,5
orchid3,21,7,2
orchid4,18,8,0
orchid5,28,7,3
orchid6,10,4,0
```


```r:Rのコンソール
orchids <- read.table("C:\\orchids.csv", header=TRUE, row.names=1, encoding="CP932", sep=",")
orchids
        Height Leaves Flowers
orchid1     35     10      15
orchid2     30      6       5
orchid3     21      7       2
orchid4     18      8       0
orchid5     28      7       3
orchid6     10      4       0
```
docker-compose upしようとしたら「Cannot start service」

## 現象
```docker-compose.yml
(前略)
  nginx:
    image: nginx:1.15.8-alpine
    ports:
      - 80:81
    volumes:
      - ./build_containers/nginx/nginx.conf:/etc/nginx/nginx.conf
      - ./build_containers/nginx/conf.d:/etc/nginx/conf.d
(後略)
```

こんなdocker-compose.ymlを書いてdocker-compose upしようとしたら以下のエラーで怒られました。


>ERROR: for nginx  Cannot start service nginx: b'OCI runtime create failed: container_linux.go:348: starting container process caused "process_linux.go:402: container init caused \\"rootfs_linux.go:58: mounting \\\\\\"/Users/hanako/workspace/hhvm_docker/build_containers/nginx/nginx.conf\\\\\\" to rootfs \\\\\\"/var/lib/docker/overlay2/c83b3706f458289bc3a092d82f657157cea6ef040c089cbe650c5ec40d95930c/merged\\\\\\" at \\\\\\"/var/lib/docker/overlay2/c83b3706f458289bc3a092d82f657157cea6ef040c089cbe650c5ec40d95930c/merged/etc/nginx/nginx.conf\\\\\\" caused \\\\\\"not a directory\\\\\\"\\"": unknown: Are you trying to mount a directory onto a file (or vice-versa)? Check if the specified host path exists and is the expected type'

改行がなくて読みにくいけど……どうやらvolumesで指定しているホスト側のマウントパスが悪いっぽい？

## 解決法
### 結論：ホスト側にマウント元を作ってあげないとだめだった。

ちょっと考えたら当たり前のことだったのですが、このvolumesって、「ホストマシンにあるファイルを→dockerコンテナにマウントする」という指定なんですよね。
ただ、docker-composeで指定しているマウント先がホスト側になかった場合、docker-composeが勝手にホスト側にディレクトリを作ってくれるみたいです。
なので、今回はホストに作られたnginx.confというディレクトリをコンテナ内のnginx.confにマウントしようとして、「ディレクトリをファイルにマウントしようとしていないかい？」と怒られていたのでした。
nginx.confを作成してホストマシンのマウント元(この場合は)に格納すれば解決！

今回の場合はこんなイメージですね！

```
ルートディレクトリ/
∟docker-compose.yml
∟build_countainers/
　∟nginx/
　　∟nginx.conf
　　∟nginx.d/
```

ちなみにnginx.confのファイル自体は作成しても、中身は作り込まないままで起動すると大変なことになるので、ある程度作り込むまでは無理にvolumesの設定をしないほうがいいと思います！
HelloWorld 

<h1>Hello World!</h1>
<p>プログラミングを初めて3週間ほどです。</p>
<p>まだプログラミングも全然でQiitaもどういう使い方をすればいいのかさっぱりわかりませんがポートフォリオの進捗を載せれればいいかなと思っています</p>
[Flutter] apk 作りメモ。

https://flutter.io/docs/deployment/android

keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

ここで　~/key.jks　はWindowsの場合経路を自分がkey fileをセーブしで欲しい
folder の経路に変更する必要がある。これで、人生の時間セーブが可能である。

例えば、C:\Users\[yourname]\key.jks で



keytool -genkey -v -keystore **C:\Users\[yourname]\key.jks** -keyalg RSA -keysize 2048 -validity 10000 -alias key
初心者が『だめにならないアプリ』を作る道①

#サマリ
自分が"だめ"になる（=なにもしたくなくなり床に這いつくばるだけの物体になる）のを防ぐためのアプリを作り始めました。自分を回復させる行動を提案してくれます。

ここに書いておくと親切な人が助けてくれることがある、と聞いたので、時々進捗を上げていこうと思います。

## 現状
https://nomoredame.firebaseapp.com/home.html
※通知を許可しますかと聞かれるかもしれませんが、今のところ何も送り（れ）ません。
![キャプチャ.JPG](https://qiita-image-store.s3.amazonaws.com/0/39559/dfa4c62c-e3e4-2ed9-645f-527d42e0152f.jpeg)


- 開くとやるといい行動を提案してくれます
- チェンジマークを押すと他のものに変わります
 - 現状3つしか入ってない
 - しかも変数にべた書き
- 選択肢をリストで見れる
 - 編集できそうですができません　　 　


#はじまり
長年ちょっとかじっては挫折し、ちょっとかじっては挫折していたコンプレックスの塊**プログラミング**を平成最後の年に（関係はない）ある程度できるようになりたいなー、オリジナルで自分が使う用のアプリ作りたいなーと思っていたら256timesというのがTLに流れてきた。

#256timesとは
少人数スパルタ式、「エンジニアコミュニティで友達を作る」を目的としたプログラミングスクール。１４日間課題が来て通ると入れます。詳しくは以下。
http://blog.dotinstall.com/post/181264803770/256times

で、**結論としては落ちました。**最終まで残ったんですけどね、残念。

ただ、先行中にCSSやHTMLの勉強のためにアプリを作り始めていたので、独力で作りあげようとしています。

## 今後の進め方の方針

### 一回作ってぶっ壊す
勉強だけしてると飽きるマンなので、ぐちゃぐちゃでもいいと割り切ってとりあえず動くものを作ります。コピペ改造上等！一通りできたら、またはじめっから今度は自分のコードで同じものを作るといいのかなと思っています。その頃にはある程度わかっていて、前よりはきれいな構造で作れるんじゃないかな。

### 文法的な部分はとりあえずドットインストール見る
並行して、文法勉強も。文法理解しないとコピペ改造もできないし。そのあたりはドットインストールのJavaScriptの講座を見たりドキュメント読んだりします。

### 構造をどうやって作ったらいいかをどう学べばいいのかわからない問題

これが一番悩ましいなと思っている部分。例えば…

- このページは遷移させるの？それともそのページのままでjavascriptで新しいウィンドウみたいの出して処理したほうがいいの？
- 遷移させる場合データの渡し方どうする？データベース作ったほうがいい？ローカルでOK？
- え、JavaScriptはページごとに分けるの？CSSはまとめろっていうやん。
- データってどういう形がいいの、どうまとめていくのか‥
- クラスって何に対して当てていったらいいんや‥

とか、こういうのの定石みたいのがわからないので、変な構成にして、それによってハマり、あとから治すのがまた時間かかる。とりあえず人のアプリのソースコードをだして読んでみたりとか、ミニアプリを写経してみたりするのがいいのかなとは思ってるんだけど、ミニアプリはゲームみたいのが多くて作りたい感じとは違うことが多いし、サービスのコードはまだ読めない、全然わからん、というかんじです。

#続く
これまでやったことをまとめようと記事を書き出したのに長くなってしまったので分けます
Windows 10ユニバーサルアプリのWebViewコントロール

※この記事は2015年にはてなダイアリーで書いた記事を移動してきたものです。現在は状況が異なっている可能性があります。

Windows10のユニバーサルアプリにはWebViewコントロールがあるのだが、どのようなブラウザとしてふるまっているのだろうか。

phpinfoで出てきたHTTP_USER_AGENTを見てみた。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/212471/d06b8650-fa0c-a0af-c2b4-2ff66af78cd1.png)

> Mozilla/5.0 (Windows NT 10.0; Win64; x64; WebView/3.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10240

…ChromeとかSafariとかEdgeとか書かれてよくわからないが、少なくとも従来のWebBrowserやWebViewなどのようIEだということはないようだ。

たしか、Windows8のWebViewはIE10(バージョン固定)で、デスクトップアプリのWebBrowserはIE7(バージョンは11まで変更可能)だった。

もっとまともな調べ方をすれば正確なことがわかりそうな気がするが、とりあえずIEじゃないことが分かっただけでも収穫だ。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/212471/99024698-57dd-15fb-d01a-ee02cb6593aa.png)

Acid Testにも普通に合格する。

追記：

[What’s New in Windows 10 for Developers, Tools & Features - Windows UWP applications | Microsoft Docs](https://dev.windows.com/en-us/getstarted/whats-new-windows-10)

やっぱりEdgeかな。
定数エクスポートをCompiler APIを使ってTypeScriptのASTをつくる

```typescript
import ts from 'typescript';

ts.createVariableStatement(
    ts.createModifiersFromModifierFlags(ts.ModifierFlags.Const | ts.ModifierFlags.Export),
    ts.createVariableDeclaration('name', undefined, ts.createStringLiteral('value'))
);
```

結果

```typescript
export const name = "value";
```

出力する方法は略。
see also https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API#creating-and-printing-a-typescript-ast

メモ

* createModifiersFromModifierFlagsがModifierのリストを返してる事に気づかなくてはまった
    * exportとかconstがでなくてはまった。
* createVariableStatementの第２引数に VariableDecrationのリストを渡すと変な動きをしてはまった
    * `export const var name = 'value';`みたいになった

# 参考

* [TypeScript src/compiler/factory.ts](https://github.com/Microsoft/TypeScript/blob/772f6cdf48835f1d08a8e8df884131a56b34a180/src/compiler/factory.ts)
* [Creating and Printing a TypeScript AST](https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API#creating-and-printing-a-typescript-ast)
なぜ品質の低いコードを書いてしまうのか

# コードの品質が低くなってしまう問題

別にマウンティングしたいわけじゃなくて、今私が直面している問題です。
最近書くコードがどうしても品質が低くなってしまうのです。
そこの反省をして、自分自身で分析してみます。


# 既存のコードがよくわからない

コードを改変して機能を追加するときに、既存のコードがわからないことが多いのです。
もちろん理解してからコードを書くのですが、それまで時間がかかってしまいます。
また、書いたコードに自身が持てません。

なんで理解が難しいのでしょうか？

## データ構造を把握していない

データ構造が把握できていないため、書いていることが理解できないことがあります。
これは図に書いて整理するしかないです。

## 知識が足りない

そもそも知識が足りていないということがあります。
Pythonだとしたら、使ってるライブラリを理解していないだったり、
使ってるMVCフレームワークを使いこなせていないなどがあります。

また、慣れていないパラダイムのコードが理解するのが難しかったりします。
例えば、Pythonでtoolz使っている場合、関数型の書き方に慣れていないと理解が難しかったりします。

## コードが入り組んでいる（技術的負債）

これは価値提供を優先しているために、コード品質を犠牲にしていたツケが回ってきたあるあるです。


# 対策

対策を考えてみました。

## ドキュメントにデータ構造を書いておく

DesignDocのようなドキュメントを用意し、ハイレベルアーキテクチャやデータ構造をきちんと書いておくようにしたほうがいいと思ってます。
　ドキュメントがなければ、書くようにします。

## わからない部分は素直にわからないと言おう

わからないことは素直に質問します。

## 得意じゃないことは勉強する

ここは大事です。
ライブラリを使って自分でコードを書いてみる、ライブラリのコードを読んでみる等、常にキャッチアップはしていかないといけません。
勉強は常にしておきます。

## 技術的負債は少しずつ返済する
負債は負債なので、仕方がないですが、返済計画を立てて少しずつ返済していかないといけないですね。

## テストを書く
テストを書くことで品質が上がるわけではありません。ただ、テストを書くことで品質を担保することは重要です。
(テストが描きづらい=コードがよくない)ということなので、テストがかけなかったらそこは要注意です。

---

書いてみて思ったのは全部当たり前のことでした。
当たり前のことをやっていくことが大事なんですね。
アドバイスがあればお願いしたいです。
atcoder ABC102

c問題は簡単だったが、D問題は600点ということもあり難しかった。
https://atcoder.jp/contests/abc102

#C問題
#方針
全てのa<sub>i<sub/>-iとの絶対値が最小になるような値bを求める問題。
数列の個数が最大で10の5乗まであるので全ての値について絶対値の和を求めていくのは間に合わない。ここで、数列a-iとの絶対値について考えてみると明らかに数列をソートして真ん中の数値をbとしてやれば絶対値の和が最小になることがわかる。

#D問題
#方針
まず3つの仕切りを全探索をしたくなるが数列の数に注目すると10の5乗なので明らかに間に合わないので、全探索できるのは一つの仕切りのみとなる。そこで、どの仕切りを選ぶか考えてみると、真ん中の仕切りを選べば、仕切りの左側は右側に関与できず、仕切りの右側は左側に関与できないので、高速で仕切りの最適場所がわかりそうである。よって、真ん中の仕切りを全探索した時に、高速で左の仕切りの位置と右側の仕切りの位置を求めることを考える。ここで、真ん中の仕切りより左側について考えると左側の数列の和は一定である。同様に右側の和も一定である。図にすると下のようになる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/263740/d4c7cc91-9d8c-2fc7-9f19-a112cd21a7ec.png)

ここで、左側のみについて考える(右側も同様にして求められる)。左側の和をS、左の仕切りより左側の和をA、右側をS-Aとし、数直線状で表すと次のようになる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/263740/d0e9d72e-99e2-a153-32c2-d91054af6a7b.png)

前述の通り、Sは変わらないので、S/2も一定である。題意を満たすには、このAからS-Aの範囲をできるだけ狭くすれば良い。すなわち、AをS/2に千和ければ良い、これは累積和を求めておいて、二分探索などで求められる。注意すべきは、二分探索をするとき、AをS/2を越えた時と、その一個前を両方求めて、よりAとS-Aの絶対値が小さい方を採用することである。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/263740/03124fa7-5fe1-4ebc-2241-78d515b64730.png)
無知識者のインストール作業

DelphiとVS環境をインストールしてみた。
これから何かもぞもぞ作るぞ。
![install.PNG](https://qiita-image-store.s3.amazonaws.com/0/349040/4a2cdcb3-d294-848b-bc14-cb4b1d091f9f.png)

最近は、インストールも楽で素晴らしい。いい世の中よ。
無償版いっぱいですし。
#c#環境構築

cプログラミングの環境構築をしようと考えています。(Windows10)

 ①まず、MinGWを利用しようと思い、下記のサイトから最新のMinGWのファイルをダウンロードしました。
[リンク]https://sourceforge.net/projects/mingw-w64/

 ②次に、開発環境として、VisualStudioを利用しようと、思いました。
 様々なサイトにおいて、環境変数の設定からパスを通すように、と書かれていたので、そのようにしました。
 尚、私の場合は、C:\MinGW-w64\mingw32\binという場所に、exeファイルが入っていたので、同箇所のパスを通しました。

③コンパイルができてると思い、VisualStudioにおいて,
hello.cという名で下記のコードを作成し、

#include <stdio.h>
int main(void){
printf("Hello World!");
return 0;
}

ターミナルに
「gcc hello.c」と入力したところ、

 「C:/MinGW-w64/mingw32/bin/../lib/gcc/i686-w64-mingw32/8.1.0/../../../../i686-w64-mingw32/lib/../lib/libmingw32.a(lib32_libmingw32_a-crt0_c.ongw32.a(lib32_libmingw32_a-crt0_c.o):crt0_c.c:(.text.startup 0x39): undefined reference to `WinMain@16'
 collect2.exe: error: ld returned 1 exit status」

と表示されました。

 何が問題なのでしょうか。ご教授願います。
Amazon Athenaで実行するクエリが想定通りの結果になるかをフルスキャンせずに確かめる方法

# 結論

- 任意のテーブル `t` に対して `FROM t TABLESAMPLE SYSTEM(5)` や `JOIN t TABLESAMPLE SYSTEM(5) USING(id)` のように書くと、約5%のレコードに対してクエリのロジックを確かめられる。

# 前提

- 2019-01-24時点のAthenaを想定。
    - ベースのPrestoはバージョン0.172。

# 状況

- クエリが想定通りのロジックになっているか確かめたい。
    - レコードの一部を対象にクエリを実行してテストしたい。
        - より安く早く処理結果を見たい。
            - パーティション指定だけでは不十分。

# 対応策

- `TABLESAMPLE SYSTEM` を使う。
    - `TABLESAMPLE SYSTEM(5)` なら5%抽出。
    - データのスキャン量が減る。
        - 安くなる。
        - 早くなるはず。

# 補足

- `TABLESAMPLE` で指定する `SYSTEM` と `BERNOULLI` の違い
    - `SYSTEM`
        - 抽出率に応じて部分スキャン。
        - レコードの抽出元は偏る可能性がある。
            - サンプルの独立性は保証されない。
    - `BERNOULLI`
        - 抽出率によらずフルスキャン。

# 情報源

- https://docs.aws.amazon.com/athena/latest/ug/release-note-2018-01-19.html
- https://prestosql.io/docs/0.172/sql/select.html
［Android］ImageViewにリソースID (Resource) をデータバインディング (DataBinding)する

ImageViewにDrawableのリソースID(Resource)をデータバインディング (DataBinding)したいときは
ImageViewのsrcにバインディングすると上手くいかない。

```xml
<ImageView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:src="@{viewmodel.resource}"/>
```

調べてみるとBindingAdapterを使ったサンプルなどが出るが、
使わなくてもimageResourceにBindingすれば良い

```xml
<ImageView
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  app:imageResource="@{viewmodel.resource}"/>
```
C言語で配列を関数に渡したいときの方法の１つ。

# 配列を関数に渡したい
そう思いますよね。特にC言語習って、ちょっとできるようになって調子に乗り始めた頃とか特に。（経験談）
そこでなんですけど、**ポインタを使えばそれができるんです**

#しかし
いますよね、ポインタアレルギー。特にC言語習って、ちょっとできるようになって調子に（ｒｙ

が、配列とポインタは切っても切れない関係にありまして。ポインタをすこしだけかじっててもらわないといけません。。

ポインタアレルギーの人もいるかとは思いますが、アレルギーが出ないように説明してみたいと思います。

#例
- とあるクラスのとあるテストの点数が１０個分配列に格納されていたとします。
- その点数の、平均、最大、最低を出すプログラムを作るとします。

#実装例
今回は配列を一つしか用意していませんが、仮に複数あっても変わりはなく、配列の名前を引数に渡せばいいだけです。

##main関数
とりあえず、配列渡したかったら、その配列の名前を送ってあげてね

```c:main.c
#include <stdio.h>
#define num 10

int main(void)
{
    int ten[num]={12,15,91,56,43,72,66,100,99,83};

    heikin(ten);
    maxmin(ten);
    /*配列の先頭のten[0]のアドレスが関数に引き渡されている
    　num[3]のようにすると４番目の56が格納されている先頭アドレスが渡されるようになる*/

    /*今回はten[0]から１０個分を想定しているので、もしten[3]から１０個分処理すると
      想定されていないところまで処理してしまうので注意*/

    return 0;
}
```
##heikin関数
ポインタ使いたいから、最初はint ＊arrの＊をつけろ！！！尻の穴ついてんのか！！！？？？？
で、そいつの中身を使いたかったら＊つけろ！！！

それからだ、
arr++ で、アドレスを一個増やすから、配列の要素を一個ずらしたのと同じことや。
**配列ずらしたかったらそうしろ！！！**

```c:main.c
void heikin(int *arr){//配列の先頭アドレスとしてarrが使える

    int i;

    double sum=0;

    for( i = 0; i < num; i++ ){
        sum += *arr;//arrはアドレスだから、その中身の値を利用する。
        arr++;//アドレスを一つインクリメント
    }

    printf("average:%lf.\n", (sum/num) );
}
```
##maxmin関数
**中身を使いたかったら＊つけろ！！！**

```c:main.c
void maxmin(int *arr){

    int i, max=*arr, min=*arr;//最初のアドレスの中身を初期値として設定しておく。

    for( i=0; i < num; i++ ){
        if( *arr < min ){
            min = *arr;
        }
        else if( max < *arr){
            max = *arr;
        }
        arr++;
    }
    printf("max:%d\nmin:%d\n",max,min);
}
```
##全体像
```c:main.c
#include <stdio.h>

#define num 10

void heikin(int *arr){

    int i;

    double sum;

    for( i = 0; i < num; i++ ){
        sum += *arr;
        arr++;
    }

    printf("average:%lf.\n", (sum/num) );
}

void maxmin(int *arr){

    int i, max=*arr, min=*arr;

    for( i=0; i < num; i++ ){
        if( *arr < min ){
            min = *arr;
        }
        else if( max < *arr){
            max = *arr;
        }
        arr++;
    }
    printf("max:%d\nmin:%d\n",max,min);
}

int main(void)
{
    int ten[num]={12,15,91,56,43,72,66,100,99,83};

    heikin(ten);
    maxmin(ten);

    return 0;
}
```
出力

```terminal
average:63.700000.
max:100
min:12
```

##これを関数化無しで同じことする
```c:main2.c
#include <stdio.h>
#define num 10
int main(void)
{
    int ten[num]={12,15,91,56,43,72,66,100,99,83};

    double sum=0;
    int i,max=ten[0],min=ten[0];

    for( i = 0; i < num; i++){
         if( ten[i] < min ){
            min = ten[i];
        }
        else if( max < ten[i]){
            max = ten[i];
        }
        sum += ten[i];
    }
    printf("average:%lf.\n", (sum/num) );
    printf("max:%d\nmin:%d\n",max,min);

    return 0;
}
```
出力

```terminal
average:63.700000.
max:100
min:12
```

#最後に
結局何が言いたいかというと、配列はポインタ、で、ケツの穴さえあればいい。
配列が今は１個だけど、１００個とかになったら大変だよね。
そうなると関数化するべきだけど、やり方わからない・・・ってなるのはよくわかる。俺もわからんかった。
大丈夫だ、できることを一つずつ増やせば大丈夫。その手助けにこのページを利用してくれれば嬉しいです。

追記
コメント欄に素晴らしいソースがありますので、ぜひご一読を。。
Javascriptで全角スペースと半角スペースを正規表現で指定する


# Irregular whitespace not allowed

Vue.jsの開発中にLintのエラーが出た。

```console
 error  in ./src/App.vue

  ✘  http://eslint.org/docs/rules/no-irregular-whitespace  Irregular whitespace not allowed
  /Users/masa/.ghq/52.197.1.134/SumasapoWeb/web/src/App.vue:174:41
        let lastName = this.name.split(/[ 　]/g)[0]
                                           ^
```

姓と名を分割したいけど半角スペースと全角スペースのどちらが区切り文字かわからないという場合のコード。
変なとこで空白使うなよ、って話でこれをなんとかしたいという話。

# 結論

半角スペースと全角スペースをそれぞれ文字コードで指定してやればよい。

```javascript
// uフラグを指定
let lastName = this.name.split(/[\u{20}\u{3000}]/u)[0]

// uフラグなし
let lastName = this.name.split(/[\x20\u3000]/)[0]
```

半角スペースの文字コードが16進数で `20` で全角スペースの文字コードが16進数で `3000` となる。

# 正規表現での文字コードの指定

Javascriptの正規表現の中で文字コードを使う場合はバックスラッシュ文字 (`\`) を使った特殊文字を使う。

| 文字 | 意味 |
|---|---|
| `\xhh` |　hh（2 桁の 16 進数）コードからなる文字列にマッチします。 |
| `\uhhhh` | hhhh（4 桁の 16 進数）コードからなる文字列にマッチします。 |
| `\u{hhhh}` | uフラグがセットされた時のみ Unicode 値 hhhh (16 進数) からなる文字列にマッチします。 |

引用元 - [特殊文字の使い方](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions#Using_Special_Characters)

正規表現の中では半角スペースを `\x20`、全角スペースを `\u3000` として指定することができる。

# 文字コードの調べ方

文字コードを調べるには `String.prototype.codePointAt()` を使う。 `codePointAt()`で出力される値は10進数なので、正規表現の中で使う場合は16進数に変換する必要がある。

```javascript
$ node
> ' '.codePointAt(0)
32
> '　'.codePointAt(0)
12288
// 16進数
> ' '.codePointAt(0).toString(16)
'20'
> '　'.codePointAt(0).toString(16)
'3000'
```

## ひらがなの文字コード

ひらがなの文字コードは**ぁ**から始まり**ゖ**で終わるのでこの範囲を指定することでひらがなだけの文字列を正規表現で判定することができる。
それぞれの文字コードは `String.prototype.codePointAt()` で同様に調べるられる。

```javascript
> 'ぁ'.codePointAt(0)
12353
> 'ゖ'.codePointAt(0)
12438
// 16進数
> 'ぁ'.codePointAt(0).toString(16)
'3041'
> 'ゖ'.codePointAt(0).toString(16)
'3096'
```

文字コードから`String.fromCodePoint()` を使って文字を出力することができる。

```javascript
> for (let i = 12352; i <= 12439; i++) {
... console.log(String.fromCodePoint(i))
... }

぀
ぁ
あ
// 略
ゕ
ゖ
゗
```

ひらがなのだけの文字列判定は以下のようにできる。

```javascript
'にんいのひらがなもじれつ'.match(/[\u{3042}-\u{3096}]+/u)
```

## カタカナの文字コード

同様にカタカナの文字コードは以下の範囲になる。

```javascript
> 'ァ'.codePointAt(0)
12449
> 'ヶ'.codePointAt(0)
12534
// 16進数
> 'ァ'.codePointAt(0).toString(16)
'30a1'
> 'ヶ'.codePointAt(0).toString(16)
'30f6'

> for (let s='', i=12449; i<=12534; i++) { s=s+String.fromCodePoint(i) }
'ァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャ ヤュユョヨラリルレロヮワヰヱヲンヴヵヶ'
```

カタカナだけの文字列判定は以下のようになる。

```javascript
> 'ニンイノカタカナ'.match(/[\u{30a1}-\u{30f6}]+/u)
```
Ruby3日目

本日学んだこと。

継承：　クラス < 親

attr_reader :
attr_accessor :

プログラミングは完璧を求めず、暗記せず振り返るべき自分のindexを増やして見直せばいい
と聞くが、正直身についているのかはわかりません。

まあ、「あ、これどこかでやった覚えがあるな」というのを増やしていけばいいのか。

土日もしくは平日夜とかバイトでプログラミングさせてくれるところないかな。。

次にどんどん進みます！！！
振り返ればええや。
typescriptのvim pluginとgatsby-plugins-typescriptを一緒に使う

[gatsby-plugins-typescript](https://www.gatsbyjs.org/packages/gatsby-plugin-typescript/)で GatsbyJS を typescript で使えるようしていた。
で今日、typescript だから VSCode を使うみたいな状況を避けたかったので、[tsuquyomi](https://github.com/Quramy/tsuquyomi)という便利な Vim の typescript プラグインを入れてみた。

すると、以下のようなエラーで怒られた。

```
src/templates/blog-post.tsx:1:8 - error TS1192: Module '"/home/hitochan/developer/me/node_modules/@types/react/index"' has no default export.

1 import React from 'react'
```

エラーが言っていることは文字通りで、react には `default export` がないのにそれを `import` しようとしてるよ！というエラーだ。

具体的には以下のコード。

```
import React from 'react'
```

なんで今更こんなエラーが出るようになったかというと、
gatsby-plugins-typescript は型チェックなどはせずに js にトランスパイルするだけなので気づかなかっただけ。

解決策は 2 つ。`tsconfig.json`を追加すれば他のファイルの変更はいらないので今回は 2 にした。
ちなみに`gatsby-plugins-typescript`は`tsconfig.json`に全く影響されないっぽいので、設定は gatsby-config.js でやる必要がある。

1. `import * as React from 'react'`で全ての`export`を`React`として`import`
2. `tsconfig.json`の`compileOptions`に以下のように`"esModuleInterop": true`を設定。

```json
{
  "compilerOptions": {
    ...
    "esModuleInterop": true,
    ...
  },
  ...
}
```
ufwでNATとポートフォーワード

Ubuntu 18.04のufwでNATを作成する方法です。
それと、一部のPCへポートフォーワードを設定し、リモートからのsshも出来るようにしています。

## 環境
<dl>
<dt>NATサーバー</dt>
<dd>WAN側：xxx.xxx.xxx.xxx</dd>
<dd>WAN側ゲートウェイ：yyy.yyy.yyy.yyy</dd>
<dd>LAN側：192.168.50.1</dd>
<dt>LAN内</dt>
<dd>192.168.50.0/24</dd>
</dl>

## NATサーバーのIPアドレスを固定に

NATサーバーはUbuntu 18.04ですので、50-cloud-init.yaml変更します。

``` /etc/netplan/50-cloud-init.yaml

network:
    ethernets:
        eth0:
            addresses:
            - xxx.xxx.xxx.xxx/24
            dhcp4: false
            gateway4: yyy.yyy.yyy.yyy
            nameservers:
                addresses:
                - 8.8.8.8
                search: []
        eth1:
            addresses:
            - 192.168.50.1/24
            dhcp4: false
            gateway4: xxx.xxx.xxx.xxx
            nameservers:
                addresses:
                - 8.8.8.8
                search: []
    version: 2
```

LAN内のPCは、192.168.50.2から振ってください。

## ufwの設定

ポートフォーワードを有効にします。

```/etc/default/ufw.&nbsp;&nbsp;(ファイル名の.はいりません）
DEFAULT_FORWARD_POLICY=“ACCEPT"
```

``` /etc/ufw/sysctl.conf
net/ipv4/ip_forward=1
```

ufwコマンドから、ログの記録と、各ポートの通信を有効にします。
特にsshは、忘れないでください。

```
$ sudo ufw logging low
$ sudo ufw allow ssh
$ sudo ufw allow 53
$ sudo ufw allow 443
$ sudo ufw allow 80
```

NATとポートフォーワードの設定をします。
「*filter」より上か COMMIT より下に追加します。
*natの下の「-F」は、「ufw reload」のたびにnatテーブルが増えて行くのを防ぐために入れています。
「外側から内側」が文字通り、リモートからのsshでつなげるポートフォーワードの部分になります。
ここでは、WANの50001ポートにアクセスされたものを、LANの192.168.50.100に転送する設定をしています。

``` /etc/ufw/before.rules
# NAT
*nat
-F
:POSTROUTING ACCEPT [0:0]
# 内側から外側
-A POSTROUTING -s 192.168.50.0/24 -o eth0 -j MASQUERADE
# 外側から内側
-A PREROUTING -i eth0 -d xxx.xxx.xxx.xxx -p tcp --dport 50001 -j  DNAT --to-destination 192.168.50.100:22
COMMIT
```

最後に、ufwを有効にします。

```
$ sudo ufw enable
```
もうforループなんていらない！？ その１ forEach, map, filter, find

JavaScriptの勉強を初めて1週間。
アウトプットすることで最速最短で最高のエンジニアになれると聞いて早速アウトプットしてみます！
今回は「forEach, map, filter, find」の４つについてまとめました。

その２はこちら[__【もうforループなんていらない！？その２every,some,reduce ついでにアロー関数とlet,constも】__](https://qiita.com/micropig3402/items/caae9d155e0138bc5dcd)


# forEach
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
> 与えられた関数を、配列の各要素に対して１度ずつ実行する。

```JavaScript    
var animals = ["micropig", "lion", "dog"];

animals.forEach(function(animal){
    console.log(animal);
});
 //
 //micropig
 //lion
 //dog
 //
```
    
    

# map
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map
> 与えられた関数を配列の各要素に対して１度ずつ実行し、新しい配列を生成する。元の配列はそのまま。

```JavaScript
var numbers = [1,3,5,7];
    
var doubled = numbers.map(function(number){
    return number * 2;
});
console.log(numbers); //[1,3,5,7]
console.log(doubled); //[2,6,10,14]
```


# filter
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
> 条件に合うものだけを抽出し、新しい配列を生成する。

```JavaScript
var pigs = [ 
    {name:"pig", weight: 300}, 
    {name:"minipig", weight: 60},
    {name:"micropig", weight: 30}
];

var lightPigs = pigs.filter(function(pig){
    return pig.weight < 100;
});

console.log(lightPigs);
// 0: {name: "minipig", weight: 60}
// 1: {name: "micropig", weight: 30}
```

#find
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/find
> 配列の要素の中で、１番最初に条件にあった値を返す。残りは検索されない。

```JavaScript
var numbers = [65,48,34,160,98,10,4];

var found = numbers.find(function(number){
    return number < 50;
});

console.log(found); // 48
```
pokemon_data.jsonの中身を見てみる

# はじめに
古都ことさん(@kfurumiya)が公開しているpokemon_data.jsonをちょっとのぞいてみる。
データは[こちら](https://github.com/kotofurumiya/pokemon_data)

## 環境
* Jupyter notebook : 5.7.4
* python : 3.6.5
* Mac OS : 10.14.2

## JSONの読み込み
元ファイルはJSONのリストかつ、改行込みなのでちょっと前処理

```console:前処理
% sed -i -e '1d' pokemon_data.json //先頭行削除
% sed -i -e '$d' pokemon_data.json //最終行削除
% cat pokemon_data.json | tr -d '\r' | tr -d '\n' > tmp.json //改行削除して別ファイルに保存
```

* dataframeにする。

```python
import pandas as pd
file_path = "./tmp.json"
all_data = pd.read_json(file_path)
```

## データチェック
* 軽く中身を確認

```python
all_data.describe()
```
![describe.png](https://qiita-image-store.s3.amazonaws.com/0/321139/65ace1f4-0f53-37a4-d71d-3f26da9b3783.png)

* 個人的に気になるのは、ステータスなので、ここだけ抜き出してみる。
* statsは種族値のことらしいです。

```python
all_stats_data_list = all_data['stats']
stats_df = pd.io.json.json_normalize(all_stats_data_list)
stats_df.head()
```

![stats.png](https://qiita-image-store.s3.amazonaws.com/0/321139/47ce0882-7936-d9b7-bee7-4f8fc2ca54b5.png)

* 統計情報をみてみる。

```python
stats_df.describe()
```

![describe_stats.png](https://qiita-image-store.s3.amazonaws.com/0/321139/5ce6a587-52bf-c621-5ce7-1ac4eb7b1de6.png)

* まずポケモン918種もいたのか？？？251種で止まってるんだが・・・
* HPのmin,maxの差がひどい。HP1って何？？？

 
## やりたいこと

* 最近仕事でdjango,JavaScriptなどやりはじめたので、chart.js使って各ポケモンのステータスのレーダーチャート表示するページとかつくりたい。
* 種族値の合計のリストとかもみたい
【Rails API】ActionController::InvalidAuthenticityTokenの解決方法

現在、APIを用いたタスク管理アプリを作成しているものです。
標記のとおりのエラーがでましたので、解決方法とエラーの原因について整理したいと思います。

#環境
Ruby 2.4.1
Ruby on Rails 5.2.2
Node.js 6.15.1
yarn 1.13.0
Webpacker 3.0.2
Vue.js 2.4.3


#ソースコード及びエラー内容

##ソースコード

controllers/api/tasks_controller.rb

```rb
class Api::TasksController < ApplicationController

  # GET /tasks
  def index
    @tasks = Task.order('updated_at DESC')
  end

  # POST /tasks
  def create
    @task = Task.new(task_params)

    if @task.save
      render :show, status: :created
    else
      render json: @task.errors, status: :unprocessable_entity
    end
  end

  # PATCH/PUT /tasks/1
  def update
    @task = Task.find(params[:id])
    if @task.update(task_params)
      render :show, status: :ok
    else
      render json: @task.errors, status: :unprocessable_entity
    end
  end

  private
    # Never trust parameters from the scary internet, only allow the white list through.
    def task_params
      params.fetch(:task, {}).permit(
          :title, :important , :urgent
      )
    end
end
```

views/api/tasks/index.json.jbuilder

```rb
json.set! :tasks do
  json.array! @tasks do |task|
    json.extract! task, :id, :title, :important, :urgent
  end
end
```


views/api/tasks/show.json.jbuilder

```rb
json.set! :task do
  json.extract! @task, :id, :title, :important, :urgent
end
```

routes.rb

```rb
Rails.application.routes.draw do
    root to: 'home#index'
    
    namespace :api, format: 'json' do
      resources :tasks, only: [:index, :create, :update]
    end 
end
```



##エラー内容
curlコマンドで新規APIの追加をしようとしたところ、だだだーっと意味不明なコードが流れました。

```
$ curl -X POST localhost:8080/api/tasks -d 'task[title]=fugafuga'（エラー）
```

ログをみてみるとこのような表示がされました。

```
ActionController::InvalidAuthenticityToken (ActionController::InvalidAuthenticityToken):
```
有効ではないトークンみたいな感じでしょうか。


#解決方法
[CSRFの対応について、rails使いが知っておくべきこと](https://blog.willnet.in/entry/20080509/1210338845)
[RailsのCSRF対策について](http://tsurugeek.hatenablog.jp/entry/20100529/1275124622)
[外部からPOSTできない？RailsのCSRF対策をまとめてみた](https://qiita.com/KumatoraTiger/items/cc6a1107374cce500e6d)

を参考にさせていただきました。

ソースコードを以下のように変更します。

cotrollers/api/tasks_controller

```rb
class Api::TasksController < ApplicationController
protect_from_forgery #追記
（略）
```

結果、表示することができました！

```
 $ curl -X POST localhost:8080/api/tasks -d 'task[title]=fugafuga'
{"task":{"id":11,"title":"fugafuga","important":null,"urgent":null}}
```

#なぜこのようなことが起きるのか？

railsはデフォルトでaplication.controller.rbに`protect_from_forgery`メソッドが定義されています。

これはCSRF(Cross-Site Request Forgery）の対策です。
CSRFは、簡単に言うと、悪意のあるユーザーがサーバーへのリクエストを捏造して正当なものに見せかけ、認証済みユーザーを装うという攻撃手法です。(詳しくは→[RailsのCSRF保護を詳しく調べてみた（翻訳）](https://techracho.bpsinc.jp/hachi8833/2017_10_23/46891))

railsにおいては、ユーザーがPOSTリクエストをした際に、ページに埋め込まれているCSRFトークンを生成し、cookieにあるトークンを同一のものかを確認します。

>railsは、get以外の動詞のリンクに、authenticity_tokenというパラメータを自動的に付け加えます。get以外の動詞の各アクションでparams[:authenticity_token]とsession[:csrf_id]を比較して、同値であればOKとしているようです。*1同値でなければActionController::InvalidAuthenticityTokenという例外がでます。


私の場合、なぜか`protect_from_forgery`が定義されていなかったので、新規で外部からPOSTしようとすると、エラーがでてしまいました。

今日のエラーは以上です。
なにか間違いがありましたらご指摘ください。
【Flask】Blueprintで分割したControllerを跨いでのurl_for()

## この記事は何か

Flaskを使用してアプリケーションを作る際、コントローラーが冗長になってしまう場合には、Blueprintを用いてcontrollerの分割を行うことができる。

Blueprintを用いて分割したControllerを跨いだurl_forの使用方法についての記事

## 本題

app.pyに書いていた処理をlines_controller.pyとsessions_controller.pyにBlueprintを用いて分割したとする。



```py:app.py

# coding: utf-8

from flask import Flask
from .controllers import lines_controller
from .controllers import sessions_controller
# .をつけるのはモジュールと区別するため

def create_app():
    app = Flask(__name__)
    app.register_blueprint(lines_controller.lines)
    app.register_blueprint(sessions_controller.sessions)

    init_db(app)

    return app

app = create_app()
```


```py:lines_controller.py

from flask import Blueprint

lines = Blueprint('lines', __name__)

@lines.route("/lines_callback", methods=['POST'])
def lines_callback():

# 様々な処理

redirect_uri = url_for('sessions.sr_callback', _external=True)

```


```py:sessions_controller.py

from flask import Blueprint

sessions = Blueprint('sessions', __name__)

@sessions.route("/callback", methods=['GET'])
def callback():

# 様々な処理

redirect_uri = url_for('sessions.sr_callback', _external=True)


```


このようにBlueprintで分割したControllerにおいて、他のcontrollerのメソッドへのuriをurl_forで呼び出したい場合には、上記のように

```py:
# url_for('sessions.sr_callback')

url_for('[そのメソッドが所属するblueprint object名].[メソッド名]')
```

と書く。


## 参考

https://stackoverflow.com/questions/19208488/using-url-for-across-blueprints
今日の勉強記録１　bashについて

#shell
- カーネルにユーザーの命令を伝達するインターフェース
    - Linuxは標準的にbashというshellが使われている
- bashはシェルの一種である
    - シェルは他にもzshやsh, fish などある
- 自分のログインシェルは　`bin/bash`
    - 確認方法：ターミナル上で　`echo $SHELL`　
- ログインシェルとインタラクティブシェルの違い
    - ログインシェル
        - Linuxにログインした時に使われるshell
    - インタラクティブシェル
        - 一時的にシェルを切り替えて使うshell
- BASH_ENVとは
    -　shellが非対話的に起動された場合に、bashは環境変数BASH_ENVを調べる。この変数がbashrc・bash_profile .vimrcなどに定義されていればその値を展開する。aliasは展開されないため、展開させたい場合は`shopt -s expand_aliases`を定義する。
    -　shopt -s でshoptで使用できるオプションを有効化できる

- 対話的なシェルとは
    - 対話的なシェルは端末を起動した時のように、キーボードからのコマンド入力を受け付けているシェル。
- 非対話的なシェルとは
    - スクリプトを読み込んだ場合
    - わかりずらいが、シェルは対話型にもなれるし非対話型にもなれると押さえておく。その上で、シェルスクリプトを起動した時は非対話になると覚える。

##bashで困ったら
-とりあえずman_bash (https://linuxjm.osdn.jp/html/GNU_bash/man1/bash.1.html)
[python]dotenvで環境変数をローカルから読み込む

#dotenvとは
環境変数をローカルで管理するのにdotenvというモジュールがあります。
apiの認証情報等をいちいちシェルで書き出す手間が省けます。

#どうやって
1 .envファイルに環境変数を記述

まず.envファイルを作成し、管理したい環境変数を記述します。
文字列はベタ打ちで記述します。クォーテーションマークで囲う必要はありません。

```..env
MY_TOKEN_NAME=my_access_token
```
2 dotenvモジュールをインストール

```
pip install python-dotenv
```
3 setting.pyを作成

```setting.py
from dotenv import load_dotenv
load_dotenv()

#パスの指定もできる
#path = "your_abs_path"
#load_dotenv(path)
```

setting.pyを実行することで.envファイルに記述した認証情報を環境変数へ記述してくれます。
あとはメイン関数で目的の環境変数を取得することができます。

```main.py
import os
MY_ACCESS_TOKEN = os.environ["MY_TOKEN_NAME"]

```

以上