OmniAICreator/Qiita-1.07M huggingface dataset:
ソースコードのアーカイブ Software Heritage archive

# はじめに

サーフィンしてたら、Software Heritage archiveなるものがヒットした。
面白かったが情報が少なかったので、まとめる。

# Software Heritage archiveってなに？

Software Heritageイニシアチブの長期的な目標は、すべての公開され入手可能なソフトウェアを開発の歴史とともにソースコードの形で収集し、それを必要とするすべての人に提供することである。（下記の拙訳）

>
The long term goal of the Software Heritage initiative is to collect all publicly available software in source code form together with its development history, replicate it massively to ensure its preservation, and share it with everyone who needs it.

by [Welcome to the Software Heritage archive](https://archive.softwareheritage.org/)

# だれがやってんの？

>
2017年4月3日に、ユネスコ（UNESCO）とフランス国立情報学自動制御研究所(INRIA)の間で、全てのソフトウェアのソースコードの収集・保存・アクセスのための基盤構築を目的に締結された連携協定によるもので、INRIAのプロジェクトSoftware Heritageで収集・保存されたソースコードを検索し、アクセスできるようになっています。

by [Current Awareness](http://current.ndl.go.jp/node/36176)

# どのくらい登録されているの？

現時点でSource filesで5,638,701,567ファイル、Projectsで88,290,360プロジェクトが登録されている。

# どんなコードが登録されてるの？

GitHub、debianやpythonから収集している。
筆者のポンコツプロジェクトまで収集しているので相当・・・。
Ubuntu 14.04 LTS (64bit)でユーザ追加・sudo権限追加する手順

VPSでUbuntuをレンタルした際に実施するユーザ追加手順を記載する。
一部、VPSのサービス依存の手順がある場合は、筆者が利用しているDTIのサービスを前提として記載するので注意。

# 前提

- ユーザ名：py-app
- グループ名：py-app

# ユーザ追加
## ユーザ追加コマンドを実行
adduserコマンドで追加できる。
コマンド実行後に、名前や電話番号を入力するよう促されるが、パスワード以外は空白状態でエンターを押してもかまわない。

```
root@localhost:~# adduser py-app   
perl: warning: Setting locale failed.
perl: warning: Please check that your locale settings:
	LANGUAGE = (unset),
	LC_ALL = (unset),
	LANG = "ja_JP.UTF-8"
    are supported and installed on your system.
perl: warning: Falling back to the standard locale ("C").
Adding user `py-app' ...
Adding new group `py-app' (1000) ...
Adding new user `py-app' (1000) with group `py-app' ...
Creating home directory `/home/py-app' ...
Copying files from `/etc/skel' ...
Enter new UNIX password: 
Retype new UNIX password: 
passwd: password updated successfully
Changing the user information for py-app
Enter the new value, or press ENTER for the default
	Full Name []: 
	Room Number []: 
	Work Phone []: 
	Home Phone []: 
	Other []: 
Is the information correct? [Y/n] Y
root@localhost:~# 
```

## 作成したユーザの確認

```
root@localhost:~# cat /etc/passwd|grep py-app
py-app:x:1000:1000:,,,:/home/py-app:/bin/bash
root@localhost:~# 
```

# sudo権限追加
以下のコマンドで、sudo権限を付与できる。
※gpasswd　は、指定したユーザに指定したグループを設定するコマンド。今回はpy-appユーザをsudoグループに入れる、という操作を行う。

```
root@localhost:~# gpasswd -a py-app sudo
Adding user py-app to group sudo
root@localhost:~# 
```
Gatsby.jsで静的なWebサイトをサクッと作る（CSS・SCSS篇）

[Gatsby.jsで静的なWebサイトをサクッと作る（インストールからHTML編集篇）](https://qiita.com/otsukayuhi/items/808a7f394e4922417b76)の続きです。

今回は、CSS（SCSS）でスタイルをあてるまでを解説します。

## SCSSを使えるようにする
そのままでは、SCSSファイルが使えないので、プラグインをインストールします。

```sh
$ npm install --save node-sass gatsby-plugin-sass
```

上記コマンドを実行し、完了したら`gatsby-config.js`ファイルを作成し、SCSSが使えるように以下の記述をします。

```gatsby-config.js
module.exports = {
  plugins: [`gatsby-plugin-sass`]
}
```

これでSCSSが使えるようになります。

## グローバルなスタイルを設定
まずは、リセットCSS等の全ページに適用されるスタイルを設定してみましょう。`src/styles/global.scss`を作成します。

```global.scss
html {
  color: red;
}
```

続いて、`gatsby-browser.js`を作成し`src/styles/gloabl.css`を`import`します。

```gatsby-browser.js
import "./src/styles/global.scss"
```

これで、文字が赤くなっているはずです。`$ npm run develop`でローカルサーバーを起動し、確認してみましょう。　

## スコープされたスタイルを設定する
Gatsby.js（React）では、`CSS Modules`を使用し、CSS（SCSS）をスコープさせることができます。現時点ではindex.jsしか存在しないので無意味ですが、コンポーネントが増えてくると、その**コンポーネントでのみ有効なスタイル**をあてることができるので、すごく便利です。

では、`src/pages/index.js`でのみ有効な`src/pages/index.module.scss`を作成しましょう。

```index.module.scss
.txt {
  color: green;
}
```

続いて、`src/pages/index.js`に`src/pages/index.module.scss`を`import`します。

```jsx:index.js
import React from "react"
import Styles from "./index.module.scss"

export default () => (
  <div>
    <p className={Styles.txt}>Hello</p>
    <p>world!</p>
  </div>
)
```

`index.module.scss`に書かれた`.txt`を、`index.js`では`Styles`というオブジェクトとして扱っていています。`.txt`は`Styles`のプロパティになっているので、`className`属性で`{Styles.txt}`とすると、`.txt`で設定したCSSプロパティが反映されます。

属性名が`class`ではなく`className`になっているのは、`class`がJavaScriptの予約語で使用できないためです。また、`{}`で囲うことによりJavaScripを実行できます。

ブラウザを確認すると、`Hello`のみ緑色になっているはずです。また、ChromeのDevToolsでElementを見てみると、class属性部分がユニークな文字列になっています。

今回はここまで！次回も、乞うご期待！
Qiita で いいね したら草生えるページ(β版)を作った話

ユーザー毎のいいねした日時をGithub風カレンダーヒートマップで可視化するページを作りました。

<br/>
<ins>[2019/06/24]</ins> 
リニューアルしました。
[【個人開発】「Qiitaでいいねしたら草生えるページ」をリニューアルして表示時間を数十秒→1秒に改善した - Qiita](https://qiita.com/tag1216/items/fc719fe1d71d0bf1c264)


# 作ったもの

[Qiiner](https://qiiner.tag1216.net/)
[Qiitaでいいねしたら草生えるページ - Qiiner](https://qiiner.tag1216.net/likes-heatmap)

<img src="https://qiita-image-store.s3.amazonaws.com/0/35192/18e416d7-1b8c-7e6e-f802-c10136c7c6ff.png" width="480"/>

データはユーザーの [いいねした記事](https://qiita.com/tag1216/like)　のページから取得しています。
ただし、いいねした日はこのページからはわからないので、いいねした記事の投稿日から推測します。(詳細は後述)

データ取得には数秒から数分程度かかりQiitaへの負荷も高いので、取得結果は数時間キャッシュして再取得は行わないようにしています。

# 作った動機

[Qiitaいいな〜ランキング](https://qiita.com/tag1216/items/b4ae76328989947ac216)でも書きましたが、Qiitaでは記事を書くだけでなく他の人が書いた良い記事にいいねしていく事もとても大切だと思っています。
可視化される事でいいねすることへのモチベーションが上がるのではないかと思い作ってみました。

# 使っているもの

- Firebase
    - Hosting
        - フロントWebアプリ
    - Functions
        - Qiitaからデータを取得してスクレイピングする処理
    - Firestore
        - Qiitaから取得したデータのキャッシュ
        - 同時実行数制限のためのキュー
- フロント(Firebase Hosting)
    - TypeScript
    - React
    - Material-UI
    - react-calendar-heatmap
- バックエンド(Firebase Functions)
    - TypeScript
    - node-fetch
    - cheerio

Firebaseは色々と制約はあるものの簡単に作れていいですね。

# いいねした日の推定方法

- いいねした記事のページはいいねした日時の降順(新しい順)で表示されている
- 記事の投稿日より前にいいねすることはできない

この２つの前提を元に以下のロジックでいいねした日を推定しています。

例えば、いいねした記事の投稿日が以下のようになっていたとします。

- ⑤ 2019/01/17
- ④ 2019/01/11
- ③ 2019/01/10
- ② 2019/01/16
- ① 2019/01/15

いいねした日は以下のように推測していきます。

- 一番古い①は投稿日をいいねした日とします。
- ②の投稿日は①以降なので、②の投稿日をいいねした日とします。
- ③の投稿日は②よりも前なので、②の投稿日をいいねした日とします。
- ④も投稿日が②よりも前なので、②の投稿日をいいねした日とします。 
- ⑤の投稿日は②以降なので、⑤の投稿日をいいねした日とします。

|No.|投稿日|いいねした日の推測日|
|---|---|---|
|⑤|2019/01/17|2019/01/17|
|④|2019/01/11|2019/01/16|
|③|2019/01/10|2019/01/16|
|②|2019/01/16|2019/01/16|
|①|2019/01/15|2019/01/15|

# 正式版に向けて

今回作ったものはいいねした日は正確ではないのでβ版という扱いにしています。

[Qiitaいいな〜分析](https://qiita.com/tag1216/items/6363c3769b5d0d7cfe47#%E8%A6%81%E5%86%8D%E8%AA%BF%E6%9F%BB) で書いたように Qiita API で記事のいいねを取得すれば正確な日時がわかるので、正式版ではこちらから取得する予定です。

# 参考

参考までに、過去にQiitaに書かれていた類似サービスの紹介です。

- [Qiitaで草を生やせるGitHubならぬ「QiitaHub」を作った物語【個人開発】](https://qiita.com/KeyG/items/7ad860bc82e7050258e8)
- [Qiitaの投稿アクティビティをGitHubのように表示するヤツ](https://qiita.com/snaka/items/7f4e5653496689077ce5)
- [Qiita API を使って GitHub 風味のマイページを作ってみる](https://qiita.com/mserizawa/items/3bce64263f192fdbde44)

これらは記事を書くと草が生えるサービスです。
Colabratory に Cabocha をインストールする


## 概要

現在、 [自然言語処理 100 本ノック][nlp100] に取り組んでいます。その中で、構文解析に [CaboCha][cabocha] を使う必要がありました。実行環境には [Google Colaboratory][colab] を使っています。 Ubuntu 環境へのインストール方法などは、見つかったのですが Colaboratory 用のインストール方法が見つかりませんでした。もしかしたら、どこかに記載があるのかもしれませんが、今回は覚書のためにも残しておきます。
Ubuntu などへのインストールでは、ソースコードの修正が必要と書かれていましたが、私が試したバージョンと環境では不要でした。手順としては、下記のようになります。

1. [MeCab][mecab] のインストール
1. [CRF++][crfpp] のインストール
1. Cabocha のインストール

[cabocha]: https://taku910.github.io/cabocha/
[colab]: https://colab.research.google.com/notebooks/welcome.ipynb?hl=ja
[crfpp]: https://taku910.github.io/crfpp/
[mecab]: http://taku910.github.io/mecab/
[nlp100]: http://www.cl.ecei.tohoku.ac.jp/nlp100/

## MeCab をインストールする

最初に MeCab をインストールします。ここまでは、色々な所にインストール方法が記載されていました。ただ、後半で swig が必要となるため、ここでインストールしてしまっています。

```py
!apt install -y \
    curl \
    file \
    git \
    libmecab-dev \
    make \
    mecab \
    mecab-ipadic-utf8 \
    swig \
    xz-utils
!pip install mecab-python3
```

## CRF++ をインストールする

次に、 Cabocha の依存パッケージである CRF++ をインストールします。最新版の CRF++ はダウンロードページ(Google Drive)から取得できます。

```py
import os

filename_crfpp = 'crfpp.tar.gz'
!wget "https://drive.google.com/uc?export=download&id=0B4y35FiV1wh7QVR6VXJ5dWExSTQ" \
    -O $filename_crfpp
!tar zxvf $filename_crfpp
%cd CRF++-0.58
!./configure
!make
!make install
%cd ..

os.environ['LD_LIBRARY_PATH'] += ':/usr/local/lib' 
```

CRF++ のインストール後にライブラリへのパスを追加する必要があります。これをしないと、 CaboCha のインストール時に CRF++ の共有ファイル (.so) が見つからないというかエラーが発生します。最初は、コマンド形式でインストールしていたため、パスの追加に export を使って書いたのですが、変更されませんでした。結局、 os.environ で設定を書き換えることで、認識できました。

## CaboCha のインストール

最後に、今回使いたい Cabocha をインストールします。上記の CRF++ までが、正常にインストール出来ていれば、うまく行くはずです。

```py
url_cabocha = 'https://drive.google.com/uc?export=download&id=0B4y35FiV1wh7SDd1Q1dUQkZQaUU'
filename_cabocha = 'cabocha.tar.bz2'
!wget "$url_cabocha" -O $filename_cabocha
!bzip2 -dc $filename_cabocha | tar xvf -
%cd cabocha-0.69
!./configure --with-mecab-config=`which mecab-config` --with-charset=UTF8
!make
!make check
!make install
%cd ..
!cabocha --version
```

## CaboCha の python バインディングを有効化する

もし、 python から呼び出す必要がある場合は、下記のコマンドが追加で必要となります。

```py
%cd cabocha-0.69/python
!python setup.py build_ext
!python setup.py install
!ldconfig
%cd ../..
```

## まとめ

MeCab に比べてインストール手順が長くなりましたが、 Colaboratory 上で CaboCha をインストールできました。これで、ローカルに環境を用意しなくても自然言語処理 100 本ノックを行えます。 Colaboratory は、本当に便利です。
Windowsで素早くGoogle検索

# ■ 概要
- 「ファイル名を指定して実行」からGoogle検索を素早く実施する。
- Windows標準機能だけで手軽に実現したかったので、Windowsコマンド(batファイル)を採用。
- 簡単な検索にしか対応していません。

# ■ 操作方法

1. Windowsキー + R でファイル名を指定して実行ダイアログを開く
2. 以下を実行して検索する  
`google 検索したいワード`  
複数ワードでも検索できる  
`google Windows 素早くgoogle検索`

＜操作イメージ＞
![win_r_quickly_google_search.png](https://qiita-image-store.s3.amazonaws.com/0/40485/d7e72ef9-1b17-3fe5-2830-b20dd2f59988.png)

# ■ 準備

1. PATHが通っているフォルダに、以下のgoogle.batファイルを作成する。  
もしくはフォルダにPATHを通す。  
googleを入力するのが面倒な場合は.batファイルの名前を変えればOK。

```google.bat
@echo off

rem コンソールウィンドウをなるべく表示させたくないので、最小化状態で再実行する
if not "%X_MINIMIZED%"=="1" (
    set X_MINIMIZED=1
    start /min cmd /c,"%~0" %*
    exit
)

rem 複数検索ワードに対応
rem 半角スペースと全角スペースを+へ置換する
rem 検索ワード1 検索ワード2 ⇒ 検索ワード1+検索ワード2
set line=%*
set line=%line: =+%
set search_keys=%line:　=+%

rem Google検索！
start https://www.google.co.jp/search?q=%search_keys%


rem 参考URL
rem ウィンドウ最小化状態でバッチを実行する
rem https://blog.cles.jp/item/8980
```
JavaScriptで「条件のどれかに一致」を（少しでも）簡単に書きたい

#始めに
分岐の条件がいつの間にか増えていき、最終的に書いた本人がしんどくなる事がありました。
そういうコードは、コメントを残してもつらいです。
また保守もしんどくなります。

今回直したのはこんな条件です。

##before

```javascript
// xが判定したいもの
if(x==='hoge' || x==='huga' || x==='piyo'){
  statement
}
```
・・・最初は1つでしたが、どんどん増えてこうなりました。

こちらの投稿を参考に直しました。
https://qiita.com/yassh/items/12b7e685dc35824819f9

##after

```javascript
const conds = ['hoge', 'huga', 'piyo'];
if(conds.includes(x)){
  statement1
}else{
  statement2
}
```

# 使用しているメソッド
`Array.prototype.includes()`
これは、配列に特定の要素が含まれているかを true または false で返します

```javascript
// 例
['condition-1', 'condition-2', 'condition-3'].includes('比較対象');

// 返り値はboolean
```

見通しが良くなったのと、後の保守が楽になりそうです。
もちろん条件次第で使えない場合があるので、そこは臨機応変に使い分けたいと思います。

# 参考
https://qiita.com/yassh/items/12b7e685dc35824819f9
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
Eclipseで"未処理のイベント・ループ例外"

バイトでVMware上でDebian+Eclipse for C/C++ の環境構築を行った。
その時に躓いたときの備忘録

## 環境
Debian 9.7（デスクトップ環境：Xcfe）
Eclipse IDE for C/C++ Developers(2018-12)

# 問題：Eclipseでファイルが開けない
EclipseでCファイルを開こうとしたら、**未処理のイベント・ループ例外**というようなエラーが発生した。
SWTとかいうJavaのプラットフォーム上で機能するツールキットがエラーを起こしていたらしい(写真撮るの忘れてた)

## 解決
Debianのデスクトップ環境をGNOME（つまり、GTK+3）にすることでエラーは表示されなくなった。

## やったこと
- jdkを8から11へ
    - エラーは止まらず
- eclipseのダウングレード
    - 2018-9以前ではファイルは開けてエラーは出なくなるが、画面が不規則に点滅して解決したとは言えない状況
- macOS（Mojave）にeclipse CDT 2018-12をインストールして確認
    - 問題なし
- **デスクトップ環境変更**
    - **xinit ./eclipse**とすると問題は発生しなかった。つまり、問題が発生している現デスクトップ環境Xcfe（GTK+2）では問題が発生し、Xserverでeclipseを起動すると問題が発生しない。＞デスクトップ環境が悪いんじゃね・・・？と思い至り、GNOMEに変更した。
pythonのpandasでcsvから時系列データを読み込みたい

ある時系列データを格納したcsvをpandasで処理していい感じのグラフを出したくなった. 

# csvを読み込みたい
まずは, csvを読み込む. 

``` python:read.py
import pandas as pd
df = pd.read_csv('./raw_data.csv', index_col=['date'], parse_dates=['date'])
```

このとき, オプション指定で```index_col=['date']```を選択することでdataFrameのindexをcsvの```'date'```カラムに指定できる.
csvで日付を格納しているdateカラムがstringとして扱われている. このままでは処理がしづらい上plotもできないので, ```parse_dates=['date']```のオプションを指定することでstringをdateを扱うためのtimestampに変換している.

**これらのオプション指定でカラム指定する際は
`['指定したいカラム']`
としなければならないので気をつけましょう.(3敗)**

``` python:bad_example.py
df = pd.read_csv('./raw_data.csv', index_col='date', parse_dates='date')
```

# 結果
時系列データの扱いが楽になる！

# 参考
[pandasで様々な日付フォーマットを取り扱う](https://qiita.com/TomokIshii/items/ff14771ac0e77632969a)
[Error occurring while retrieving a csv data file in python](https://stackoverflow.com/questions/41481555/error-occurring-while-retrieving-a-csv-data-file-in-python)
Windows 10 Pro + Python3 + OpenPyXL で CSVファイルを書き込んでみる

#目的
Python3 + OpenPyXL で CSVファイルを Excel 2016 x86 に書き込んでみる
※VBAだと range = Variant() がデフォなんだけど
　Pythonだともう少し触ってみないとわかないなぁ・・・
対象データは[郵便番号検索](http://www.post.japanpost.jp/zipcode/)の17ISHIKA.CSV
##パッケージの追加
\> pip3 install openpyxl
\> pip3 install csv
##サンプルコード

```python
#第１案---------------------------------------------
# CSV ファイルを Worksheet に書き込む
rows = 0
with open(csvfile, newline='') as csvfile:
    spamreader = csv.reader(csvfile, delimiter=',', quotechar='"')
    for line in spamreader:
        rows = rows + 1
        # print(line)
        cols = 0
        # １行分のデータを書き込む
        # TODO 対象 Range の書式付け
        for col in line:
            cols = cols + 1
            wb[addsheet].cell(column=cols, row=rows).value = col
            # print(str(rows) + ":" + str(cols) + ":" + col)
#---------------------------------------------------

#第２案---------------------------------------------
# CSV ファイルを Worksheet に書き込む
ws = wb[addsheet]
with open(csvfile, newline='') as csvfile:
    spamreader = csv.reader(csvfile, delimiter=',', quotechar='"')
    for line in spamreader:
        ws.append(line)
#---------------------------------------------------

```
##参考にしたのは以下のサイト
[openpyxl - A Python library to read/write Excel 2010 xlsx/xlsm files](https://openpyxl.readthedocs.io/en/stable/)
[Tutorial - openpyxl](https://openpyxl.readthedocs.io/en/stable/tutorial.html)
[csv — CSV File Reading and Writing](https://docs.python.org/3/library/csv.html)
[Python openpyxlでExcelを操作](https://qiita.com/tftf/items/07e4332293c2c59799d1)
Mac で開発中のサイト(localhost)を iPhone で表示させる

http://localhost:3000
というような今開発しているローカルサイトを手元にある iPhone ですぐに見られるようにします。
基本方針は Bluetooth を使ったインターネット共有で、ハード・ソフト面で他に何も準備しないバージョン。
https の対応はまた今度。

# 環境

- MBP
    - Wifi でインターネット接続
- iPhone
    - 特別な設定なし
- 有線 LAN なし
- ケーブル類出したくない

# 方法

1: システム設定 -> 共有 を開きます

<img width="658" alt="Screen Shot 2019-02-03 at 21.28.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/155627/97575188-0dbf-1014-92a7-2f6637879a5b.png">

2: インターネット共有を設定します

<img width="658" alt="Screen Shot 2019-02-03 at 21.34.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/155627/e7c70a04-9562-0b74-88a5-153e70c88d89.png">

右側の Bluetooth を選んで左側のインターネット共有をオン。
上の下線を引いてある `(pcの名前).local` をメモ。

3: iPhone から Bluetooth で Mac に接続

4: iPhone のブラウザを開いてアドレス欄に `http://(pcの名前).local` を入力してアクセス

`http://localhost:3000` で開発しているなら `http://(pcの名前).local:3000` を入力。

5: 見れます

# 備考

- Mac の Wifi が余ってるなら Bluetooth じゃなくてそっちで繋げられます
- というか同じ Wifi 繋げるなら IP 直接打てばいいみたいなところもあります
  - 同じネットワークに繋げない特殊環境で役立ててください
Docker で Node.js 開発環境を簡単に用意する

# 概要

Docker を使って、ローカルを汚すことなく Node.js の開発環境を作る方法です。数行の `docker-compose.yml` を書いて、あとは随時コンテナを起動してコマンドを実行するだけです。

# 環境

- macOS Mojave v10.14.2
- Docker Desktop Community v2.0.0.2

# 手順

1. Docker Desktop をインストールします。
2. 開発用ディレクトリ（Git リポジトリ等）を用意します。
3. `docker-compose.yml` を書きます。

手順 1、2 については特に説明は不要だと思うので省略します。

## `docker-compose.yml` を書く

以下を書きます。

```yml:docker-compose.yml
version: '3'
services:
  app:
    image: node:11.8.0
    ports:
      - $PORT:$PORT
    volumes:
      - ./:/src
    working_dir: /src
```

```env:.env
PORT=8080
```

- `app` — サービス名。好きな名前を付けます。
- image — [Docker の公式イメージ](https://hub.docker.com/_/node/)を使います。バージョンは開発する目的に合わせて指定してください。
- ports — Express を使って Web サーバを立てる場合など、ホスト・ゲスト間で通信が必要な場合はポートを指定します。今回は環境変数で指定できるようにしました。
- volumes — ホスト側のディレクトリをゲストにマウントします。
- working_dir — コンテナ起動後のカレントディレクトリを指定します。`npm install` を実行する `package.json` があるディレクトリを指定するとよいでしょう。

以上で準備完了です！

## 必要な場合はビルドを

パッケージマネージャに Yarn を使用するなど、Node.js のイメージに何かをインストールする必要がある場合は、`Dockerfile` を書いてビルドしておきます。

# 実行

あとは `docker-compose run --rm <サービス名> <コマンド>` で Node.js を使った何かを随時実行するだけです（以下、サービス名を `app` とします）。`--rm` オプションは、コマンド終了後にコンテナを自動的に削除してくれます。

## npm で任意のライブラリをインストールする

```sh
docker-compose run --rm app npm install <パッケージ名>
```

## `package.json` の依存ライブラリをインストールする

開発環境を他の人に提供するときなど。

```sh
docker-compose run --rm app npm install
```

## `package.json` で定義したスクリプトを実行する

Express で Web サーバを起動するなど、`package.json` で定義したスクリプトを実行する場合。

```json:package.json
{
  "scripts": {
    "start": "node --experimental-modules index.mjs"
  }
}
```

`docker-compose.yml` の ports で指定したポートを通すには `--service-ports` オプションを付けます。

```sh
docker-compose run --rm --service-ports app npm start
```

## よく使うコマンドはシェルスクリプトで

毎回 `docker-compose run --rm app ...` と打つのは面倒なので、よく使うコマンドはシェルスクリプトにしておくとよいです。

例えば、開発環境を構築するためのコマンドを一つのシェルスクリプトに書いておくことで、他の人が開発環境を簡単に準備できるようになります。

```sh:prepare.sh
#!/bin/bash

echo 'PORT=8080' >> .env && \
docker-compose run --rm app npm install
```

# まとめ

- `docker-compose.yml` で Node.js のイメージとボリューム、ワーキングディレクトリ等を定義します。
- `docker-compose run --rm <サービス名> <コマンド>` で随時コンテナ作成、コマンド実行、コンテナ削除を行います。

それでは、快適な Docker ライフを！
私がよく使うJSからの外部JSの読み込み方法

# 前置き
外部JSの読み込みって様々な方法があるけど、違いがよくわからなかったり、できることが違ったり、使いやすさが違ったり...するので自分なりにまとめてみました。
私はjQueryを使用するときにしょっちゅう使っています

`main.js`が`import.js`を呼び出すというものになります。

# コード
私がよく使うのは４つあります。
1. HTML(静的)
2. HTML(動的)
3. Fetch (3'としてxhr)
4. Module

早速書いていきます。

## 1.HTML経由(静的)
単純。多分最初に思いつくやつ。

```html
<script src="import.js"></script>
<script src="main.js"></script>
```

`main.js`で使うもの(`import.js`,例えば変数や関数など)は`main.js`の読み込み前に読み込む必要があります。

###ダメな例
```html
<script src="main.js"></script>
<script src="import.js"></script>
```
これでは`○○ is not defined`と出て使えないです。
`main.js`で使うものが`import.js`を読み込むことで定義されるからです。

（ちなみに、これ書いているときに変数も外部からのものを使えることを知りました。）

## 2.動的なHTML要素作成
これはHTML経由とほぼ同じなのですが、**動的に**できたりとか、ファイル名を変数化できたりとかできます。実行が終わったらその部分のコードを消すことも可能です。

```javascript
var script = document.createElement('script'); //変数名は適当なものにでも
script.src = "import.js"; //ファイルパス
document.head.appendChild(script); //<head>に生成
// document.body.appendChild(script); /*<body>に生成する場合はこちら*/
```

これで、動的に`<script src="import.js"></script>`を生成したことになります。

もし実行が終了したときには、
`document.removeChild(script)`で要素を消去可能です。


## 3.Fetch
順番に実行可能。JSのみならず、HTMLとかCSSも読み込めます。
私はよくjQueryの読み込みに使用します。
jQueryのファイル読み込んだ後にこのコードを実行してくださいなといった具合に。
ただしCORSの関係で他ドメインのファイルはできない(...と思う)。

```javascript
fetch('./import.js').then(r=>{return r.text()}).then(t=>{
    // "t"にimport.jsのファイル内容が格納されているので
    eval(t); //その内容を実行する
});
```

こんな感じで私はjQueryの読み込みに使う。

```javascript
fetch('./jQuery.js').then(r=>{return r.text()}).then(t=>eval(t)).then(()=>{
    //jQueryのコード
});
```

こっちでは変数は使えないようです（少なくとも私の環境では）

> 2019.03.30追記。
> アロー関数を学んで気づいたのですが、これは以下の書き方が可能なようです。
>
> ```js
> fetch('./jQuery.js').then(r=>r.text()).then(t=>eval(t)).then(()=>{ ... }
> ```
>
> つまり、`r=>{return r.text()}`を、 `r=>r.text()`と書けるということです。便利。

## 3'.XMLHttpRequest(xhr)
私はxhrを使わないけど、仕様的にはFetchと同じ...？

```javascript
var xhr = new XMLHttpRequest();
xhr.addEventListener('load',function(){ //thisを使っているのでアロー関数は使えない
    eval(this.responseText);
});
oReq.open("GET", "./import.js");
oReq.send();
```

[XMLHttpRequest の利用 - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)をもとに編集。

## 4.Module
JSのみでImport/Export可能。とてもシンプルな構文だけど`type="module"`をHTML側につけなければならない。

```html:index.html
<script type="module" src="main.js">
```
```javascript:main.js
import txt from "./import" //これが必要になります
console.log(txt);
```
```javascript:import.js
const txt = "Hello,World";
export default txt; //これが必要になります
```

このように、Import/Exportの1文が必要となります。
`export default (変数や定数、関数など)`をもとにimport.jsに書き、
`import (変数など) from (ファイル名)`とやればその変数を取り込めます。

# あとがき
こんな感じに書いていきましたが、アドバイス等もいただけると幸いです。
ミスもあればコメントよろしくお願いいたします。
【Python】WindowsでPythonを始める

環境構築はさくっとできます
※Python 3.7.2時点

# インストール
下記ページから
https://www.python.org/downloads/windows/
![python.png](https://qiita-image-store.s3.amazonaws.com/0/216261/5b4612dd-ca33-dd54-f6ef-82e56e6be86b.png)

今回は「Windows x86-64 executable installer」でexeをダウンロード
※個人のPCによるので32bitの人は「Windows x86 executable installer」の方

ダウンロードしたらexe起動して「Install Now」をポチってインストールするだけ
この時に下の方にある「Add Python 3.7 to PATH」をチェックしてインストールすると後程やろうとしてる環境変数に追加してくれるみたいです（僕はやってないけど）

# 環境変数に追加
下記2つをを環境変数の「Path」に追加
~\Python\Python37\
~\Python\Python37\Scripts\

~は各自Pythonをインストールしたパス

# コマンドで確認
```
>pip
```
Commands:
…
ってコマンドリストが出てきたらPythonを使用できる準備完了！
面白いセルの合計


1行ごとに、前の行の面白いセル一覧を取得してから、自分の上にあるセルの中で面白いものを合計。
セルの右端が欠けるので余裕を見ないといけない。この意味で負けな可能性がある。
ちなみに、Rubyで11分、Crystalで2分、Crystal build --releaseで13秒でした。実行時間的にはyhpgですから許容範囲でしょう。

```rb:tyama_henae30.rb
#!/usr/bin/ruby
#http://nabetani.sakura.ne.jp/hena/orde30sumt/
#https://qiita.com/Nabetani/items/725e09cc5913a8569c04

while s=gets
	a_,b_=s.chomp.split("/")
	a=a_.split(",").map(&:to_i)
	b=b_.to_i
	width=a[-1]*b*4 ### fixme magic number 4
	#cell id, number
	storage=width.times.map{|i|[i/a[0],i/a[0]+1]}
	(1...a.size).each{|wi|
		interesting={}
		storage.uniq.tap{|z|
			interesting[z[0]]=1
			(1..z.size-2).each{|i|
				interesting[z[i]]=1 if z[i][1]!=z[i-1][1] || z[i][1]!=z[i+1][1]
			}
			interesting[z[-1]]=1
		}
		z0=[]
		w0=a[wi]
		0.step(width-1,w0).with_index{|k,ki|
			su=(k...[k+w0,width].min).select{|i|
				interesting.has_key?(storage[i])
			}.map{|i|
				storage[i]
			}.uniq.map(&:last).reduce(0,:+)%1000
			(k...[k+w0,width].min).each{z0<<[ki,su]}
		}
		storage=z0
	}
	p storage[(b-1)*a[-1]][1]
	STDOUT.flush
end
```

```crystal:tyama_henae30.cr
#!/usr/bin/env crystal
#http://nabetani.sakura.ne.jp/hena/orde30sumt/
#https://qiita.com/Nabetani/items/725e09cc5913a8569c04

while s=gets
	a_,b_=s.chomp.split("/")
	a=a_.split(",").map(&.to_i)
	b=b_.to_i
	width=a[-1]*b*4 ### fixme magic number 4
	#cell id, number
	storage=width.times.map{|i|{i/a[0],i/a[0]+1}}.to_a
	(1...a.size).each{|wi|
		interesting=Hash(Tuple(Int32,Int32),Int32).new
		storage.uniq.tap{|z|
			interesting[z[0]]=1
			(1..z.size-2).each{|i|
				interesting[z[i]]=1 if z[i][1]!=z[i-1][1] || z[i][1]!=z[i+1][1]
			}
			interesting[z[-1]]=1
		}
		z0=Array(Tuple(Int32,Int32)).new
		w0=a[wi]
		0.step(to: width-1,by: w0).with_index{|k,ki|
			su=(k...[k+w0,width].min).select{|i|
				interesting.has_key?(storage[i])
			}.map{|i|
				storage[i]
			}.uniq.map(&.last).sum%1000
			(k...[k+w0,width].min).each{z0<<{ki,su}}
		}
		storage=z0
	}
	p storage[(b-1)*a[-1]][1]
	STDOUT.flush
end
```
「あ」からはじめるAzure ~ロールベースのアクセス制御をしてみたよ~

# この記事の目的

Azureではいくつかの方法でユーザーのアクセスを制御することができます。
この記事ではAzure1年生の筆者の備忘録を兼ねてAzureでのロールベースのアクセス制御の基本や、注意点を確認していきたいと思います。

# ロールとは

Azureにおけるロールは、いくつかのアクセス許可をまとめたものです。
ユーザーにロールを付与することでリソースへのアクセスや、リソースに対する操作を制御することができます。
ロールには大きく分けて下記の２種類があります。

- 組み込みロール：Azureがあらかじめ用意しているロール
- カスタムロール：ユーザーがアクセス許可を任意に編集して作成するロール

組み込みロールの一覧は下記の公式ページに記載されています。
https://docs.microsoft.com/ja-jp/azure/role-based-access-control/built-in-roles

## ロールのスコープと自動継承

ロールの付与は、各リソースなどのメニューにある「アクセス設定（IAM）」で行います。
手順は下記の公式ページに記載されています。
https://docs.microsoft.com/ja-jp/azure/role-based-access-control/role-assignments-portal

ロールの付与（IAMの設定）を行う時は下記に注意が必要です。

- IAMの設定はリソースでだけではなく、各スコープでも行うことができる
- IAMで設定したロールとユーザーは、下位のスコープのIAMの設定に自動継承される

上記を意識していないと、許可していないはずの操作をユーザーができてしまったり、許可したはずの操作をユーザーができなかったりしてしまいます。

### スコープ

まず、ロールの付与（IAMの設定）は各リソースでだけでなく、サブスクリプションやリソースグループでも行うことができます。スコープは、上位から管理グループ＞サブスクリプション＞リソースグループ＞リソースとなっています。
詳細は下記の公式ページの通りです。
https://docs.microsoft.com/ja-jp/azure/role-based-access-control/overview

### 自動継承

注意すべきなのは、上位のスコープでユーザーに付与されたロールは、下位のスコープに自動継承されるということです。例えば、あるリソースグループのIAMでユーザーAを「閲覧者」に設定すると、そのリソースグループ以下の全てのリソースにおいて、ユーザーAは「閲覧者」としてのアクセス許可を持つことになります。そしてこの自動継承を解除することは基本的にできません。

## 例
これから２つの組み込みロールを例にして、IAM設定の注意点を確認していきたいと思います。

### 閲覧者（Viewer）

組み込みロール「閲覧者」は下記のアクセス許可で構成されています。

```
*/read
```

アクセス許可にはワイルドカード（アスタリスクの部分）を使うことができます。上記のアクセス許可は、サービスを問わないread権限を示しているため、「閲覧者」を付与されたユーザーは、IAM設定を行ったスコープ以下全てのリソースなどにおけるread権限を持つことになります。

特に注意が必要なのは、ある一つのサービスに複数のリソースを作成した時です。例えば、既にVM以外のリソースが存在する環境下において、新たにVM1〜VM5を作成したとします。このときユーザーにVM1〜5のread権限を与えるため、リソースグループのIAM設定でユーザーに「閲覧者」を付与するのは適当でしょうか。

もしリソースグループのIAMに設定してしまうと、同じリソースグループ以下にある、VM以外の他のリソースに対してもユーザーは「閲覧者」のアクセス許可を持つことになってしまいます。これを防ぎVMのみのread権限を与えるには、VM1~5それぞれのIAMで「閲覧者」を設定するか、VMのみをスコープとしたread権限を持つカスタムロールを作成してリソースグループに設定するほうが適当でしょう。


### SQL Server 共同作成者（SQL Server Contributor）

次に「SQL Server 共同作成者」というロールを見てみます。
持つ権限が多いため、説明の都合により一部のアクセス許可のみを抜粋しました。

```
Microsoft.Authorization/*/read                        #ロールとロール割り当ての読み取り
Microsoft.Resources/deployments/*	                  #リソース グループ デプロイの作成と管理
Microsoft.Resources/subscriptions/resourceGroups/read #リソース グループを取得または一覧表示
Microsoft.Sql/servers/databases/*	                  #SQL データベースの作成と管理
Microsoft.Sql/servers/read	                          #サーバーの一覧とプロパティの読み取り
```
ここで、sqlsrv1という名前のSQL Serverリソースを作成したとします。
sqlsrv1のIAM設定で「SQL Server 共同作成者」をユーザーに付与しても、ユーザーは権限が足りずデータベースを作成することができません。```Microsoft.Resources/subscriptions/resourceGroups/read```というアクセス許可が含まれているロールにも関わらず、ユーザーはサーバー作成時にリソースグループを選択することができず、操作を続行できなくなります。

これは、sqlsrv1のIAMで設定してしまうと、Microsoft.Sql以外のアクセス許可が有効にならないためだと考えられます。
このロールはリソースグループ、またはそれより上位のスコープのIAMで設定することで、ユーザーがSQLServerを作成することができるようになります。複数のサービスにまたがるアクセス許可を持つロールを扱う場合に、同様のことが起こると思われるため、注意が必要です。

※ちなみにAzure SQL Server内のデーターベースユーザーをAzure Portal上で作成および管理することはできません。オンプレのSQL Serverと同じように、データベースに対してクエリを発行するなどして作成および管理する必要があります。

# おわりに
ロールベースのアクセス制御は、設定に注意も必要ですが柔軟な設定が可能です。
上手に活用してAzureライフを楽しみたいですね。
最後までご覧いただきありがとうございました。

※古くなった内容や、内容の誤りがありましたらご連絡いただけますと幸いです。
複数のファイルを終端に改行がなければ改行を追加して結合する

SSH の authorized_keys や SSL 証明書でサーバ証明書と中間証明書を結合するとき、単に複数のファイルを結合するなら `cat` すればいいだけですが、ファイルの終端が改行で終わっていない場合、改行なしでファイルが連結されてしまうことがあります。

例えば server.pem と chain.pem があったとして server.pem の終端が改行で終わっていないと `cat server.pem chain.pem` で

```
-----BEGIN CERTIFICATE-----
MII...
-----END CERTIFICATE----------BEGIN CERTIFICATE-----
MII...
-----END CERTIFICATE-----
```

などとなってしまいます。

`cat` ではなく `awk 1` で連結すれば OK です。

```sh
awk 1 server.pem chain.pem
```

```
-----BEGIN CERTIFICATE-----
MII...
-----END CERTIFICATE-----
-----BEGIN CERTIFICATE-----
MII...
-----END CERTIFICATE-----
```

パイプするときも `awk 1` を通せば終端が改行でなければ改行が追加されます。

```sh
curl -s http://gitlab.example.com/oreore.keys | awk 1
```

gitlab から公開鍵を取り出すと改行が無いので割と罠です。

---

`1` は、パターンが `1` という式で、アクションは省略、という意味です。

パターンに式を記述した場合、`0` ではない数字、または、空ではない文字列、のときにマッチと評価されるので、`1` なら常にマッチします。

アクションが省略された場合は `{print}` となります。つまり、全行で `print` が行われます。

awk は最終行は改行が無くても行と認識します、そして `print` は行を改行付きで表示します。

---

いつも authorized_keys で `awk 1` してるのなんで？と聞かれたのでその理由。
TypeScriptで型定義だけ出力する

ライブラリを [@babel/preset-typescript · Babel](https://babeljs.io/docs/en/babel-preset-typescript) を使ってbabelでコンパイルする場合にコンパイルしただけだと型定義は生成できません。

その場合、tscコマンドに`--emitDeclarationOnly`フラグを付けて型定義を生成する必要があります。

```json
"scripts": {
 "build:types": "tsc --emitDeclarationOnly"
}
```

```sh
npm run build:types
```

また公開する際は、package.jsonに `types`フィールドの指定を忘れないようにしましょう。

```json
{
 "main": "./lib/main.js",
 "types": "./lib/main.d.ts"
}
```

<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">ライブラリをbabel/preset-typescriptで書いても結局型定義生成のためemitDeclarationOnlyフラグをつけてtscを実行することに気づいてしまった我々は</p>&mdash; あかめ@さよならflowtype.ts (@akameco) <a href="https://twitter.com/akameco/status/1091695991198085120?ref_src=twsrc%5Etfw">February 2, 2019</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
『数学あんまりわからないけどAI &機械学習エンジニアになれるか?』と聞かれたから答えてみた

#はじめに

だいぶAIブームも落ち着いた気がしますが、
どうやったらAI &機械学習エンジニアになれるか2019年頭日本版を書いてみます。
※補足1

#パターン1:ちゃんとやるパターン

まず下記の書籍を全部読みましょう。
####「機械学習システム開発や統計分析を仕事にしたい人にオススメの書籍初級5冊＆中級10冊＋テーマ別9冊（2019年1月版）」
https://tjo.hatenablog.com/entry/2019/01/10/190000


書いてある数式がわからない場合は下記のシリーズを読みましょう。
####「経済数学教室」
https://amzn.to/2BefHgo


どんなことが書かれているか気になる方はまず下記をご覧ください。
こちら↓を見て無理だと思った方はちゃんとやるパターンは諦めましょう。

####「わかるLSTM ～ 最近の動向と共に」
https://qiita.com/t_Signull/items/21b82be280b46f467d1b

#パターン2:ちゃんとやらないパターン
※補足2
ぶっちゃけてしまうと
####「いくらで、どのくらいの期間で、何ができるのか」
がわかっており、

####最先端を追うマインドセット
があり、
####それを実行できる
or
####マネジメントできる
or
####案件メイクできる
のであれば、

####AI &機械学習エンジニア

と言えなくもない気がします。※補足3

なので、下記2冊を頭に叩き込みひたすら実例を追いましょう。
####『仕事ではじめる機械学習』
https://amzn.to/2BA64K3

####『［第2版］Python機械学習プログラミング 達人データサイエンティストによる理論と実践 impress top gearシリーズ』
https://amzn.to/2S82zUu


最先端、実例を追うには下記が参考になります。（日々アップデートです。）
####『AINOW』
http://ainow.ai/

####『arXivTimes』
https://github.com/arXivTimes/arXivTimes

####『Eleven Twitter accounts you must follow for the latest news on artificial intelligence』
https://www.bbva.com/en/eleven-twitter-accounts-you-must-follow-latest-news-artificial-intelligence/

####『Kaggle』
https://www.kaggle.com/
※補足4

####『Browse state-of-the-art』
https://paperswithcode.com/sota

#終わりに
一般に製薬業界の特許競争が厳しすぎる問題と同じようにAI界もかなり競争の激しい分野であります。
そこまでしてなりたいかという疑問は拭えません。
また、華やかな世界では全くなく実務ではお客さんの顔もしくは上司の顔を伺いつつ、家に帰っては最先端に追いつくよう論文を読む必要があります。※補足5

#因みに
私は、華やかな世界でなくとも、実務でお客さんの顔もしくは上司の顔を伺いつつ、
「うっせー。どうにかすんから、うだうだ言ってくるな！」と内心思い（時には直接言い）、
家に帰っては「英語、つら」と思いながら最先端に追いつくよう論文を読むのは、
悪くないと思っております。（たぶん一生やり続けれる。）


#補足
※補足1:私はAI &機械学習エンジニアではないです。
※補足2:私はこちら。そもそもが純粋なエンジニアではないので時間がないです。
※補足3:私はかろうじて満たします。いや満たさないかも。
※補足4:kaggleはもはや競技プログラミングの世界に入っている認識でランクを実務をしながら取るのはかなり難しいと思っております。
※補足5:他にも基本的なインフラ&アプリの知識も必要です。
[Linux] あるユーザーの権限と同じ権限を別ユーザーに付与する 

# 環境
OS: Ubuntu 16.04

# 背景
新しいユーザー(名前はansible)を作成したのですが、

ふと、、、この新ユーザーの権限は、

「vagrantユーザーと同等の権限を付与したいなー」

という風に思ったわけです。

ということで権限確認するわけですが、

```bash
$ id vagrant
uid=1000(vagrant) gid=1000(vagrant) groups=1000(vagrant),4(adm),24(cdrom),27(sudo),30(dip),46(plugdev),110(lxd),115(lpadmin),116(sambashare)
```

この結果から、group名を１つ１つ取り出して、

```bash
$ sudo gpasswd -a ansible adm 
```
を手打ちで繰り返すの嫌だな、、、 と思い、

正規表現で何とかならないかなー

と考えたのが背景です。

# (2019/2/4追記) コメントより抜粋

@angel_p_57 さんのご指摘により 1行のコマンドでまとめられる事を教えていただきました。

以下がスマートで良いです。

```bash
$ sudo usermod -a -G $(id -nG vagrant | tr " " ,) ansible
``` 
 
# 正規表現でなんとかしてみる（当初自分で考えたやり方)

普段、sedをあまり使わないので、手探りですが、

以下のように書いてみました。

```bash
$ echo `id vagrant` | sed -e 's/[0-9\(,\ ]//g'| sed -e 's/)/\n/g' > vagrant_group.txt
```
2回sedを噛ましてますが、

1回目は、数字と左括弧、カンマとスペースを消してます。

2回目は、右括弧を改行に変えてます

最後に、加工した内容を vagrant_group.txt に出力します。

# 結果

vagrant_group.txtは下記のようになります。

```vagrant_group.txt
uid=vagrant
gid=vagrant
groups=vagrant
adm
cdrom
sudo
dip
plugdev
lxd
lpadmin
sambashare
```

最初の3行もsedで削除すべきですが、コマンドが長くなりそうだったので、やめました。

後は4行目からvagrant_group.txtを読み込んで、group_add するだけです。

```bash
$ tail -n +4 vagrant_group.txt | xargs -I {} sudo gpasswd -a ansible {} 
```

# 参考
[ファイルのn行目以降を表示する](ファイルのn行目以降を表示する)
キーワード抽出をpythonでする。(yahooさんの力を借りて)

#1 動機
yahooさんのapiを使ってのキーワード抽出をしたいと思ったがサンプルコードがPHPしかなかった。
(https://developer.yahoo.co.jp/sample/jlp/sample3.html)
pythonでしたいよ〜
#2 できること
文章を入れると、キーワード単語とその重要度が出力される。

#3 サンプルリクエストURL

https://jlp.yahooapis.jp/KeyphraseService/V1/extractappid="yahoocliantID"&sentence=<対象のテキスト> 
yahooのcliant ID取得:(https://developer.yahoo.co.jp/yconnect/v2/registration.html)

#4 コード
```ruby:keyword.py
import urllib.request
import sys
import xml.etree.ElementTree as ET
#sentence=解析したい文章
def key(sentence):
    url="https://jlp.yahooapis.jp/KeyphraseService/V1/extract?appid=<yahooのcliant ID>&sentence="+urllib.parse.quote(sentence)
    req = urllib.request.Request(url)
    with urllib.request.urlopen(req) as res:
        body = res.read()
        root = ET.fromstring(body)
    output=[]
    for child in root:
        sen=child[0].text+":"+child[1].text
        output.append(sen)
    return output
```
[参照]
・URLに日本語を含む時の対処(https://note.nkmk.me/python-urllib-parse-quote-unquote/)
・xmlを取得(https://qiita.com/Takaki_/items/4ba7f5e327296d403e65)
cakephp3.7 へajaxでPOSTを行うと403エラーになる

CSRF機能が有効になっていることが原因でしたので、とりあえず無効での対応です。

cakephp3系でajax通信をしたいけど403エラーで失敗する、、
https://teratail.com/questions/158625

同じ内容であったのですが、3.6はsrc/Application.phpにあった設定が、
3.7ではrouters.phpになっていました。

```php:routers.php
 // Register scoped middleware for in scopes.
   $routes->registerMiddleware('csrf', new CsrfProtectionMiddleware([
        'httpOnly' => true
    ]));
    /**
     * Apply a middleware to the current route scope.
     * Requires middleware to be registered via `Application::routes()` with `registerMiddleware()`
     */
    $routes->applyMiddleware('csrf');
```
↓

```php:routers.php
 // Register scoped middleware for in scopes.
 /*  $routes->registerMiddleware('csrf', new CsrfProtectionMiddleware([
        'httpOnly' => true
    ])); */
    /**
     * Apply a middleware to the current route scope.
     * Requires middleware to be registered via `Application::routes()` with `registerMiddleware()`
     */
   // $routes->applyMiddleware('csrf');
```
Mac OSX homebrewで導入したもの備忘録 ：日常編

# 備忘録 Macにインストールしているもの

色々開発用にMacに入れたもので手順が煩雑になりがちなものがあったので備忘録として残します。



## homebrewでよく使うコマンド

```bash:terminal
# brew
$ brew list
$ brew search
$ brew doctor
$ brew install
$ brew uninstall
$ brew upgrade

# brew cask
$ brew search --cask [string]
$ brew install --cask [package name]
$ brew uninstall --cask [package name]
$ brew upgrade --cask [package name]

# 全部upgradeする
$ brew upgrade `brew list`
```
## 準備編

### Xcode

Apple製の統合開発環境

```bash:terminal
# Homebrewをインストールするのに必要
$ xcode-select --install
```
### Homebrew

MacOS用パッケージマネージャ

* アプリのインストールをターミナルからできるようにする
* UI系のインストールはbrew-cask
* フォントのインストールも可

※ Intel版のインストール方法です。。。

```bash:terminal
# Homebrewをインストールする
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

# GUI系のアプリをインストールできるようにする
$ brew install caskroom/cask/brew-cask

# フォントのインストールをできるようにする
$ brew tap caskroom/fonts

# java8をインストールするために必要
$ brew tap caskroom/versions
```

### Finderの設定
.sshとか.bash_profileとか表示したいので設定を変更する

```bash:terminal
# 隠しファイルを表示する
$ defaults write com.apple.finder AppleShowAllFiles TRUE
# Finderを一度再起動する
$ killall Finder
```


## 日常的に使うもの

### Googl chrome

ブラウザ（メイン装備）

```bash:terminal
$ brew install --cask google-chrome
```

### Chromium

ブラウザ（ネタ装備）

```bash:terminal
$ brew install --cask chromium
```

### Firefox

ブラウザ（検証用）

```bash:terminal
$ brew install --cask firefox 
```
### Gimp

画像編集用

```bash:terminal
$ brew install --cask gimp
```
### VLC

メディアサーバー接続用

```bash:terminal
$ brew install --cask vlc
```
### Thunderbird

メールクライアント

```bash:terminal
$ brew install --cask thunderbird
```
### slack

```bash:terminal
$ brew install --cask slack
```
### karabiner-elements

英字配列を使っているので・・・
詳しい設定内容は下記を参考に。
https://lcdd.me/karabiner-elements/

```bash:terminal
$ brew install --cask karabiner-elements
```
### qlmarkdown

クイックルックでマークダウンの中身が確認できるやつ
※ finderの仕様が変わって現在は使えないようです。

```bash:terminal
$ brew install --cask qlmarkdown
```
### font-source-han-code-jp  

雑魚ーダーは多少なりともコードを読みやすくしたい

```bash:terminal
$ brew install --cask font-source-han-code-jp 
```
ラズパイ(Raspbian Jessie)でpythonのvenvしたときにErrorで詰まった話

## 環境
- Raspberry Pi 3
- Raspbian Jessie
- Python 3.4 (Python 2系と共存)

## 起きたこと
ラズパイでFlask開発しようと思い，[本家ページ](http://flask.pocoo.org/docs/1.0/installation/)を見ながら導入しようとしたとき，以下のエラーが発生

```sh
$ python3 -m venv app
Error: Command '['/(パス)/app/bin/python3', '-Im', 'ensurepip', '--upgrade', '--default-pip']' returned non-zero exit status 1
```

このエラーを調べると，次のようにpipインストールを回避して，後からpip入れればいいやん，という対策が多くヒット．

```
$ python3 -m venv --without-pip app
```
ただこの後のpipインストールが仮想環境を構築するたび毎回するのは面倒．

## 対策
色々試していると，どうも`ensurepip`のモジュールが入っていない様子．
```sh
$ python3 -m ensurepip
/usr/bin/python3: No module named ensurepip
```

以下コマンドでvenvできるようになりました．

```sh
$ sudo apt install python3-venv
```
ラズパイをいじる ～OSインストール編 RASPBIAN STRETCH～

 
[Raspberry Pi]ラズパイをいじる ～OSインストール編 RASPBIAN STRETCH～[Raspbian]
 
#◆目的
* Linuxの操作に慣れること
* 実機でwebサーバーを構築してみてネットワークに対する理解を深めること

##■OSインストール編 RASPBIAN STRETCH
###□参考記事
* https://qiita.com/lutecia16v/items/479b220509069b2c753c
* https://qiita.com/engksk/items/24b541276eb683cd0e00
* https://qiita.com/tamamius/items/6369f2de16cf528ed71a
* http://deviceplus.jp/hobby/raspberrypi_entry_056/

###□OSの配布元
今回は RASPBIAN STRETCH WITH DESKTOP をインストールします
* https://www.raspberrypi.org/downloads/raspbian/

###□用意するもの
####ハードウェア
* ラズパイ本体　(raspberry pi3 model B)
* ラズパイ電源
* HDMIケーブルとディスプレイ
* マウスとキーボード
* (wifiは内蔵されていますが、有線で接続する場合はLANケーブルも)
* ケースはあると便利です。

####ソフトウェア
* DD for windows：http://www.si-linux.co.jp/techinfo/index.php?DDforWindows
* Lhaplus：zip解凍に使用します。
* Teraterm : ターミナルエミュレータ。

###□手順
####1. OSのイメージファイルをダウンロード
GUIでもCUIでもお好きなほうをダウンロードしてください。
インストール方法が2種類ありますが、今回はNOOBSではなく直接イメージを書き込みます。
(NOOBSでインスートルするとUSB経由でのbootに変更できないようなので・・・)

####2. microSDにOSを焼く
DD for windowsを使ってmicroSDにraspbianを書き込みます。
使用するmicroSDの中身は消えてしまうので注意。
GUIの場合は書き込むファイルが4GB超えてるよ的な確認が出てきますが、大丈夫です。

####3. ラズパイを起動してネットワーク設定と日本語化
ここからマウスとキーボードとディスプレイが必要になります。
ラズパイの電源入れる前に接続しておいてください。

#####3-1.SSH接続設定

```
sudo raspi-config
```

raspbianはデフォルトだとSSH接続が無効になっているので有効にします。
青っぽい画面に切り替わって設定項目が出てきます。
interface optionの中にSSHの項目があるのでEnableに変更。

#####3-2.日本語化する
引き続きconfig変更していきます。
* Localisation Options->Change Locale：ここは日本なので「ja_JP.UTF-8」にする。
その次の画面で選べと言われるのはデフォルトのロケール、これも「ja_JP.UTF-8」でOK
* Localisation Options->Change Timezone：ここは日本、なので「Asia」を選んでから「Tokyo」
* Localisation Options->Change Wi-fi Country：Wi-Fiを使う場合はJPにしておく方が良いかと思う
* SetKeyboard Japaneseの109キーボードを選択
上記をそれぞれ変更します。
一旦再起動して日本語化していれば成功。

#####3-3.日本語フォントインストール
日本語フォントがないと文字化けするのでインストールします。

```
sudo apt-get install ttf-kochi-gothic xfonts-intl-japanese xfonts-intl-japanese-big xfonts-kaname uim uim-anthy jfbterm
```

#####3-4.日本語入力できるようにする
Mozcをインストール。

```
sudo apt-get install ibus-mozc
```

#####3-4.IPを固定にしたくないので・・・
ラズパイ側ににavahi、windows側にBonjourを
それぞれインストールします。

```
sudo apt-get install avahi-daemon
```

あわせてラズパイ側で以下のファイルを編集します。
(初期設定は"raspberrypi")

```
/etc/hostname
/etc/hosts
```
WindowsにもBonjourのインストールをします。
（追記）サポートページ⇒https://support.apple.com/ja-jp/bonjour
とりあえずここまでしてwindowsからpingで接続確認

```
ping raspberrypi.local
```
#####3-5.接続してみる。
ホスト名：raspberrypi.local(初期設定)
ユーザ名：pi(初期設定)
パスフレーズ：raspberry(初期設定)
ラズパイをいじる ～LAMP環境編～

#前書き
前回のOSインストール編からの続きです。
Teratermでつないだ状態から始めます。

##■LAMP環境構築編
###□参考記事

* http://itemy.net/?p=936
* https://takoyaki.homeip.net/?p=1418
* https://qiita.com/suppy193/items/92a5299b911fc7719eaf
* http://wings2fly.jp/yaneura/raspberry-pi-web-server-apache/
* https://www.fabshop.jp/raspbian-stretch%E3%81%A7%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E6%A7%8B%E7%AF%89%EF%BC%81-php7-0-apache2-%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E7%B7%A8/

###インストール内容

* Apache2.4
* PHP7.0
* MySQL

###手順

####1.Apache
インストール

```bash
sudo apt-get install apache2
```

バージョン確認

```bash
apache2 -v
Server version: Apache/2.4.25 (Raspbian)
```

デフォルトのドキュメントルート

```text
/var/www/html
```

Apacheの自動起動確認

```bash
sudo ls /etc/rc2.d/
```

####2. PHP7
インストール

```bash
sudo apt-get install php7.0 libapache2-mod-php7.0 php7.0-mbstring php7.0-gettext php7.0-mysql
```

バージョン確認

```bash
php -v
```

php.iniを2か所編集

```text
mbstring.language = Japanese
mbstring.internal_encoding = UTF-8
```

####3. MySQL
インストール

```bash
sudo apt-get install mysql-serever
```

文字コードの設定

```bash
sudo vi /etc/mysql/my.conf
```
```text
# 設定ファイルに以下を追加
[mysqld]
character-set-server=utf8 # デフォルトの文字コードをutf-8
skip-character-set-client-handshake # クライアントのリクエストが何であれutf-8で返す
```

##あとがき
ラズパイならではの情報が特にあるわけではなく、
debianのサーバー立てるみたいになってしまってますね。
途中省略しましたがvim入れたり、rootにパスワードを設定したりしてます。
次回はUSBからbootとストレージの拡張とかやろうかと思います。

補足・修正等ございましたらお知らせください。
WindowsでGitを利用する

# WindowsでGitを利用する

Windows10でGitを利用するために、公式なビルドであるGit for Windowsを導入する。
Git for WindowsはCUIなので、確認やわかりやすさの観点からGUIのGitもインストールする。
GUIとしては、TortoiseSVNで慣れ親しんでいる人も多いであろうTortoiseGitを使う。

## 検証環境

- Windwos 10 Home 1803
- Git-2.20.1-64-bit
- TortoiseGit-2.7.0.0-64bit

## ダウンロード

- [Git for Windows](https://gitforwindows.org/)
- [TortoiseGit](https://tortoisegit.org/download/)


## Git for Windows

### インストール時の注意点

今回はインストーラによるチェックボックスなどはデフォルトのままイントールしたが、
以下の点にこだわりがある場合は注意が必要。

- エクスプローラーの右クリック設定をいじられたくない。
- Bash以外のシェルを利用している。
- Vim以外のエディターを利用したい。
- PATH設定をいじられたくない。
- チェックアウト時に改行コードをいじられたくない。（CRLF⇒LF）

### Gitインストーラの画面
![image.png](https://qiita-image-store.s3.amazonaws.com/0/34744/38f5d03b-c240-5422-7e57-34f1abbe2c63.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/34744/53bcba09-24ac-86d4-f6ce-545dacd51324.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/34744/f863d05c-52dd-3a17-8c9c-41641072f47a.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/34744/52377821-f277-1372-c9f8-0a4a4da77d2c.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/34744/1358cf9e-9eb4-69ab-012a-5b33c9274565.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/34744/37c4483d-b08e-4cea-f617-e951debc1907.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/34744/a2b1d6eb-8dc8-33b4-9a10-ddde179e9cd4.png)


## TortoiseGit

デフォルト設定のままイントール。インストール完了画面では、
「Run first start wizard」にチェックがついており、続けて
first start wizardでの設定を行う。

### first start wizard

first start wizardで設定できる項目は以下の通り。
それぞれ別途設定可能なので、あせらなくてOK。

- 言語設定
- git.exeのPATH指定
- gitconfigのName、Email設定。（git configで実施可能）

```
git config --global user.email "メールアドレス"
git config --global user.name "名前"
```
- 公開鍵認証のキーペアの生成（bin\puttygen.exeから実施可能）
- 認証情報の保存設定（Credential helperの設定（git configで実施可能））

```
git config --global credential.helper manager
```

### TortoiseGitインストーラの画面
![image.png](https://qiita-image-store.s3.amazonaws.com/0/34744/da22c579-7fa9-1efe-53be-36c95cc62217.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/34744/ac7d06f9-5c8b-d717-1bea-3293fa200f7c.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/34744/dfbebb4b-bf4f-d85b-1336-7edfe3f2630e.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/34744/98438eac-8028-7cd8-ffec-f2f9664a1b27.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/34744/53e23d15-2b09-9250-7910-5a367dfdbeca.png)
ベイズ推論の勉強用ノート（１）ー 基本的な定義

# 目的
[ベイズ推論による機械学習入門](https://www.amazon.co.jp/dp/4061538322)の勉強用のノート。
式を後で参照するために残しておく。

# 各種定義
## 期待値
```math
\langle f(x) \rangle _{p(x)} := \int f(x)p(x)dx
```

- $\langle \rangle _{p(x)} : linear$
- $i.e. \langle af(x)+bg(x) \rangle _{p(x)} = a\langle f(x) \rangle _{p(x)} + b\langle g(x) \rangle _{p(x)}$
- ただし、$a, b \in \mathbb{R}, f, g: \mathbb{R}^D \rightarrow \mathbb{R}; measurable function$

## エントロピー
```math
\begin{align}
\mathtt{H}[p(x)] 
  &:= - \int p(x)\ln p(x)dx \\
  & = -\langle \ln p(x) \rangle _{p(x)}
\end{align}
```

## KLダイバージェンス
```math
\begin{align}
\mathtt{KL}[q(x) \| p(x)] 
  &:= - \int q(x)\ln \frac{p(x)}{q(x)}dx \\
  &= - \langle \ln \frac{p(x)}{q(x)} \rangle_{q(x)} \\
  &= \langle \ln \frac{q(x)}{p(x)} \rangle_{q(x)} \\
  & = \langle \ln q(x) \rangle _{q(x)} - \langle \ln p(x) \rangle _{q(x)}
\end{align}
```

- $\mathtt{KL}[q(x)||p(x)] \geq 0$
- $\mathtt{KL}[q(x)||p(x)] = 0 \Rightarrow 
\forall x (q(x)=p(x))$
- $\mathtt{KL}[q(x) || p(x)] \neq \mathtt{KL}[p(x)||q(x)]$
 - i.e. 距離の公式は、満たさない

## サンプリングによる期待値の近似
```math
\langle f(x) \rangle _{p(x)} \approx \frac{1}{L} \sum_{i=1}^{L}f(x^{(i)})
```
- ただし、$x^{(1)}, ..., x^{(L)} \sim p(x)$ は、
確率分布$p(x)$ からの$L$個のサンプル点
GoogleCTF #beginners/pwn-re-mngmnt-iface

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/0b8c5f5a-15cd-0978-1483-89c7be3fe8cf.png)

#問題

https://capturetheflag.withgoogle.com/#beginners/pwn-re-mngmnt-iface

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/838da74d-16d3-e606-de57-886457c4361b.png)

#解いてみた

書かれているところにアクセスしてみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/dc6248af-3281-9910-7550-dd5f8d3a5944.png)

最初のメニューで1,2,3から選んでそれぞれの処理をします。
1はパスワードを入力するよう要求されたので特に何もできませんでした。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/5989caf6-93be-fcfe-d363-1a6e53914bd4.png)

2を選んだときはアップデート情報が得られました。
Path traversalっていうのはディレクトリトラバーサルということでしょうか。
つまりそれを使って頑張る話っぽいです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/596fdf7d-bf5d-0c65-683f-bc1fbef6f775.png)

さて、「../../」みたいなのを打ってみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/30be4d78-4c9b-7546-6d4b-7ea91d6301e3.png)

最初のメニューでは入力チェックをしているようで、何もできそうにありません。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/94dec185-0347-a0b5-53f8-4eba89c15bf4.png)

さっきのアップデートチェックのところで入力したところ、何事もなかったかのように終了しました。
入力チェックしているのかよくわからなかったので、「aaa」というのを打ってみると、そんなファイルやディレクトリはないと。
ということでここのフォルダにVersion0.2とVersion0.3というファイルが存在していて、cat的なことをしているんじゃないかなと思うんです。
ということはどこかにあるflagファイルを見つけ出してここで指定すればcatされてflagがわかるということでしょうか。
lsのようなことができれば話が早いんですが。
どうやってそのファイルを探せばいいのでしょう。

色々調べたんですが、やり方が分からなかったんで、flagとかflag.txtとかに../とか../../みたいなのをつけていろいろやりました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/0656a54f-3a44-4417-bf42-f5574f04162d.png)

見つかりました。。。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/1f435be7-51f1-f435-bf72-be3ad9356b20.png)

エスパー要素が強いです。本来どうやってここにたどり着くんでしょうか。
だれかわかる方、教えてください。
2020年までのセキュリティの歴史。

備忘録。

2019年

 9月 7pay死亡

 7月 7pay

 5月
 ヤマダウエブコム・ヤマダモール」に不正ア クセスされ、ペイメントアプリケーションの改 ざんが行われたため
 5月 ロシア系ハッカーがトレンドマイクロへ
 5月
 ユニクロ・GUの公式オンラインストアがリス  ト型アカウントハッキング攻撃を受ける。
 4月 TVerが乗っ取られたナリ
 3月 ラブライブ!乗っ取り
 3月 LINEログインされそうになる。
パスワードリスト攻撃？
 3月 またFacebook
 3月 トヨタの販売子会社に不正アクセス 最大 310万件の顧客情報が流出の恐れ
 3月 Facebook社内で一部ユーザーの      パスワードが平文で保存
 3月 アプリ Ｌifebearがやられる
 3月 佐川を名乗るフィッシングSMSくる

 1月 宅ふぁいる便のパスワードが暗号化、ハッシュ化もされておらず。質問箱peingトークン丸見え。

2018年 秋 ドラックイレブンがやられる。

2018年 フィッシングメールのデザイン再現度があがる。

数年前 時期不明 
放置していたFacebookアカウント、
韓国人に乗っとられており退会。

SMSでLINE認証コード連発くらう。
Torelloを使ってGTDとKPTを行いたい

### GTDって何なのか？

```text:GTD
心理的な負担を減らしながら個人の生産性を上げることを主眼とし、
簡単な5つのステップを実行することによって成し遂げたいことを現実にするメソッドである。
基本はなすべき仕事のリストを何かに記録しておくことで、
頭の中からなすべき仕事のことを追い出すことである。
これで頭の中はすべき仕事全部を覚えなくてもよくなりすっきりとし、
リストに基づき実際の仕事をこなすことに集中できる。
```
[参照元:ウィキペディア](https://ja.wikipedia.org/wiki/Getting_Things_Done)


#### GTDに期待すること
「一時的な課題」について解決することを期待しています。

課題には、「これを解決すれば大丈夫」あるいは「これを解決すれば次はこれ」といったものがあります。
これらは、課題を1度解決すれば、基本的に繰り返される事がありません。
あるいは気にしなくていいくらいの長期間、その課題が再発することがありません。

これを「一時的な課題」として解決するために役立てています。

 ---

### KPTって何なのか？

```text:KPT
KPTとはKeep/Problem/Tryの略で、振り返りの為のフレームワークです。

Keepでは、「良かった事/今後も続けたい事」をあげていきます。
Problemでは、逆に「うまくいかなかった事」をあげていきます。
Tryでは、「今後実施する事」をあげてProblemの解消を目指します。
```
[参照元:マネーフォワード エンジニアブログ](https://moneyforward.com/engineers_blog/2015/06/30/look-back-kpt/)

#### KPTに期待すること
「継続的な課題」について解決することを期待しています。

課題には、ある程度解決しても、継続的に改善していかなければならないものがあります。
これらは、習慣的に課題に取り組まなければならないものが多く、長期的にこれで終わりということがありません。

<details><summary>これを「継続的な課題」として解決するために役立てています。</summary>
<div>
ただし、どのような問題も「100年後の自分にとって大きな問題か？」と言われると、もちろんそうではありません。

あるいは、それが100年後の人々にとって「継続的な課題の種」になっている事も考えられますが、技術の発達など解決の手法も確立されているかもしれません。

現在の課題に集中するのであれば、現在の環境において、出来るだけ改善されるよう考え行動することが大切です。
それを予想や懸念によって大きくしてしまうと、どんな課題も尽きることがありません。
「継続的な課題」についてもリラックスして取り組むようにしたいと思います。

そのためにKPTを利用し、その課題が解決した未来から、「その未来のためには何をすればいいのか？」と言った疑問を投げかけます。
そして、その理想の未来に近づいて行くことが大切ではないかと思います。
</div></details>

---

### 利用しているChrome拡張について
僕はTorelloをほとんどChromeで利用しています。
そこで、まずは「どんな拡張機能を利用しているのか？」一覧でご紹介させていただきます。

#### カレンダーを追加する
[<img src="https://planyway.com/assets/old/img/calendar.png">](https://planyway.com/)
Googleカレンダーとの連携については[こちら](https://qiita.com/matsuoshi/items/293608fbacf5d9d09d0d)を参考にさせていただきました。

#### カードのカテゴライズを分かりやすく見せる
[<img src="https://lh3.googleusercontent.com/RM7hxDBqidcEYh7OO1ZTgNVEO-yJfhLI4tV9jekxdX52G1adA5cLVn_Co1qKDjl9issd-5Mw=w640-h400-e365">](https://chrome.google.com/webstore/detail/card-colors-for-trello/nodlpencjjlohojddhflnahnfpfanbjm)

[<img src="https://lh3.googleusercontent.com/j-15hQb6wsalvUKMQmTYIsPu9M_D2KIkiRiAiPFCcd0QpiYNl3tAEHo4xVowRpPUI-GzC0ak=w640-h400-e365">](https://chrome.google.com/webstore/detail/card-color-titles-for-tre/hpmobkglehhleflhaefmfajhbdnjmgim)

#### カードの「詳細画面」の視認を改善する
[<img src="https://lh3.googleusercontent.com/5PaKaYkFZGTXux4WCVp4Ut_8TRCmHmsHMoLc4LS3qSMXW5Rp8gKIFFeA5HOs7KCx7zqXBt-duw=w640-h400-e365">](https://chrome.google.com/webstore/detail/full-screen-card-view-for/iakcnnmjbdoemkjecojadhpinebnkipm?hl=es-419)

#### チェックリストを一覧画面でも確認出来るようにする
[<img src="http://img.youtube.com/vi/9EL3fWiBf9k/0.jpg">](https://chrome.google.com/webstore/detail/next-step-for-trello/iajhmklhilkjgabejjemfbhmclgnmamf)


#### カードにストーリーポイントを付与出来るようにする
[<img src="https://lh3.googleusercontent.com/R7azde0tlXiVRTjT2yc9z77tpPa3tProPzjvn1hxFDRoU5PQ3bAlNN6sa2A-zYw7P4c794MaAw=w640-h400-e365">](https://chrome.google.com/webstore/detail/scrum-for-trello/jdbcdblgjdpmfninkoogcfpnkjmndgje)
バーンダウンチャートなども自動で作成されます。

---

記載途中ですが、一旦記事を公開します。
この後、時間管理とボードの内容を追記予定です。