OmniAICreator/Qiita-1.07M huggingface dataset:
Dockerを初めて触るけど環境構築をしてみた

# この記事の目標
- Dockerで何ができるのかを知る。
- MacOS上にDockerをインストールして、最小限の環境構築を終える。

# Docker Desktop for Macをインストール
[公式サイト](https://store.docker.com/editions/community/docker-ce-desktop-mac)から**DocKer.dmg**をインストールします。

画像では**Get Docker**となっていますが、メールアドレスによる認証をしないとインストール出来ないようです。
![スクリーンショット 2018-11-19 13.12.36.png](https://qiita-image-store.s3.amazonaws.com/0/253605/cd8a07a4-2838-4179-bcde-1e45e1986f4c.png)

**DocKer.dmg**を実行したら以下の画面で**Application**に追加し、起動させましょう。
![スクリーンショット 2018-11-19 19.54.58.png](https://qiita-image-store.s3.amazonaws.com/0/253605/7a69939f-9a2a-6fca-cd18-0fcb887bf040.png)

起動できたら以下のコマンドでバージョンを確認しましょう。

```
$ docker -v
Docker version 18.06.1-ce, build xxxxxx
```

```
$ docker version
Client:
 Version:           18.06.1-ce
 API version:       1.38
 Go version:        go1.10.3
 Git commit:        vvvvvvvv
 Built:             Tue Aug 21 17:21:31 2018
 OS/Arch:           darwin/amd64
 Experimental:      false

Server:
 Engine:
  Version:          18.06.1-ce
  API version:      1.38 (minimum version 1.12)
  Go version:       go1.10.3
  Git commit:       vvvvvvvv
  Built:            Tue Aug 21 17:29:02 2018
  OS/Arch:          linux/amd64
  Experimental:     true

```
確認できれば、インストール成功です。

# Dockerでnginx簡単環境を作る

nginxのdockerイメージを取得します。

```
$ docker pull nginx
Using default tag: latest
latest: Pulling from library/nginx
a5a6f2f73cd8: Pull complete 
67da5fbcb7a0: Pull complete 
e82455fa5628: Pull complete 
Digest: vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
Status: Downloaded newer image for nginx:latest
```

## 取得したイメージを確認

```
$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
nginx               latest              vvvvvvvvvvvv        2 days ago          109MB
```

## コンテナの作成と実行

```
$ docker run -d -p 8081:80 nginx
$ docker images
```
[http://localhost:8081/](http://localhost:8081/)にアクセスして下のような画像が表示できれば成功です。
![スクリーンショット 2018-11-19 20.27.46.png](https://qiita-image-store.s3.amazonaws.com/0/253605/f6de15f9-7934-ef6a-0b74-4c90ae15e9ee.png)

**-d**はバックグラウンドでの実行を指定し、**-p 8081:80**で[http://localhost:8081/](http://localhost:8081/)にアクセスできるように設定します。

## コンテナの状態確認

```
$ docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                  NAMES
vvvvvvvvvvvv        nginx               "nginx -g 'daemon of…"   33 minutes ago      Up 33 minutes       0.0.0.0:8081->80/tcp   thirsty_pike

```

#　終わりに
これで**Dockerを初めて触るけど環境構築できた**ので一件落着。

次回はGo環境をDockerに作りたい・・・・
Docker上でnodemon使っていて`address already in use`出たときの対処

Docker for mac上でNode.jsの開発をnodemonを使ってする時に、`Starting inspector on 0.0.0.0:9229 failed: address already in use`が出ることがある。インスペクタが死んでないのにnodemonが立ち上げ直していることが原因なので、先にポートを見てインスペクタを殺す必要がある。

https://github.com/remy/nodemon/issues/1050

どおりに、kill-portを使ってからnodeを実行すれば良い。

```
npm i kill-port
```

してから、

```
nodemon --exec 'kill-port --port 9229 && node --inspect=0.0.0.0:9229 xxx.js'
```

としてあげると回避できる。
パッケージ管理のHomebrewをインストール

###### パッケージ管理のHomebrewをインストールします。

1.下準備

``` command:ターミナル
xcode-select --install
xcode-select -v
java -version
/usr/libexec/java_home -v
```

2.インストール

``` command:ターミナル
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew -v
brew doctor
```

3.bundleファイルの作成

``` command:ターミナル
vi ~/Brewfile
```

4.Brewfileの内容

``` file:~/Brewfile
cask_args appdir: '/Applications'
tap 'caskroom/cask'

brew 'curl'
brew 'mas'

brew 'ghq'
brew 'peco'
brew 'gist'
brew 'git'
brew 'hub'
brew 'tig'
brew 'jq'

brew 'openssl'
brew 'rmtrash'
brew 'sshrc'
brew 'telnet'
brew 'htop'
brew 'tree'

brew 'hugo'

cask 'appcleaner'
cask 'tunnelblick'
cask 'wireshark'
cask 'docker'
cask 'github'
cask 'google-chrome'
cask 'grandperspective'
cask 'gyazo'
cask 'iterm2'

cask 'ngrok'
cask 'paw'
cask 'postico'
cask 'sequel-pro'
cask 'visual-studio-code'
cask 'vlc'
cask 'android-file-transfer'
cask 'java'
cask 'android-sdk'
cask 'android-platform-tools'
cask 'android-studio'

mas 'AdBlock', id: 1402042596
mas 'Skitch', id: 425955336
mas 'CotEditor', id: 1024640650
mas 'ForkLift', id: 412448059
mas 'TLOB', id: 1229885630
mas 'Copy Cat', id: 1386360007
mas 'iHex', id: 909566003
mas 'Configurator 2', id: 1037126344

```

5.update

``` command:ターミナル
brew update
brew upgrade
brew bundle install
```
ササソニのRails備忘録～routesのasについて～

routesでルーティングを作るときに、:as"xxx"とつけるときがある。
例：

```ruby:routes.rb
Rails.application.routes.draw do
  root "top#index"
  get "about" => "top#about", as:"about"
end
```

get "about"の所を説明すると、 
/aboutパスがtopコントローラのaboutメソッドと結びつく。as:"about"とすると、about_pathメソッドが生成され、コントローラやビューでabout_pathメソッドを呼び出すと、"/path"の文字列が返されるようになる。
Sharepoint > C# > Sharepointからリスト情報を取得する（基本形）



Sharepointからリスト情報を取得します。
環境：.Net 4.6
言語：C#



Sharepointのライブラリに簡単アクセスできる「Microsoft.SharePoint.Client」を使います。


## Setup
Nugetパッケージの管理 → 参照 → Microsoft.SharePoint.Client で検索

![image](https://qiita-image-store.s3.amazonaws.com/0/49910/a36fdebf-41b9-3326-835c-8ce495c9072f.png)








## 参考
[How to: Retrieve List Items | Microsoft Docs](https://docs.microsoft.com/en-us/previous-versions/office/developer/sharepoint-2010/ee534956(v%3Doffice.14))

### CamlQuery
[CamlQuery Class (Microsoft.SharePoint.Client) | Microsoft Docs](https://docs.microsoft.com/en-us/previous-versions/office/developer/sharepoint-2010/ee543383%28v%3doffice.14%29)
BootStrap4 2カラム構成の左側はボタンで表示・非表示切り替え

半ばメモ用途です。md未満の場合は常に1カラム構成になり、ボタンで2領域が切り替わります。

```html
<!DOCTYPE HTML>
<html>
  <head>
    <title >2カラム1カラム表示切替サンプル</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"/>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-12 col-md-6" id="left-section">
          <div class="d-flex justify-content-end">
            <button type="button" class="btn btn-outline-primary text-primary" id="btn-hide-left"><i class="fa fa-angle-double-left fa-lg pr-2"></i>領域1を隠す</button>
          </div>
          <div class="">領域1</div>
          <p>狭い画面（xs, sm）では領域1のみ、広い画面（md以上）では領域1, 2の両方表示する。</p>
        </div>
        <div class="bg-success d-none d-md-block col-md-6" id="right-section">
          <div class="d-flex justify-content-start">
            <button type="button" class="btn btn-primary" id="btn-show-left" style="display: none">領域1を表示<i class="fa fa-angle-double-right fa-lg"></i></button>
          </div>
          <div class="">領域2</div>
        </div>
      </div>
    </div>
  </body>
  <script>//<![CDATA[
    $(document).on('click', '#btn-hide-left', function() {
      // 左 d-none // 右 col-12
      $('#left-section')
        .removeClass('col-12 col-md-6')
        .addClass('d-none');
      $('#right-section')
        .removeClass('d-none d-md-block col-md-6')
        .addClass('col-12');
      $('#btn-show-left').show();
      $('#btn-hide-left').hide();
    });

    $(document).on('click', '#btn-show-left', function() {
      // 左 col-12 col-md-6 // 右 d-none d-md-block col-md-6
      $('#left-section')
        .addClass('col-12 col-md-6')
        .removeClass('d-none');
      $('#right-section')
        .addClass('d-none d-md-block col-md-6')
        .removeClass('col-12');
        $('#btn-show-left').hide();
        $('#btn-hide-left').show();
    });
  //]]></script>
</html>
```
jpg を取り込んだ PDF の作成 (python3)

jpg を取り込んで次のような PDF を作成します。
![pdf_nov1901.png](https://qiita-image-store.s3.amazonaws.com/0/179446/5711b851-3a19-9636-4d5f-43e9162396a9.png)

元の jpg です。
![fuji_mod.jpg](https://qiita-image-store.s3.amazonaws.com/0/179446/5198ce64-6672-6e6a-4a7d-4d38bd6a9e94.jpeg)

画像の特性

```text
$ identify fuji_mod.jpg 
fuji_mod.jpg JPEG 320x238 320x238+0+0 8-bit sRGB 17971B 0.010u 0:00.000
```

Arch Linux でのライブラリーのインストール

```bash
sudo pacman -S python-pillow
sudo pacman -S python-reportlab
```

```py:jpg_import.py
#! /usr/bin/python
# -*- coding: utf-8 -*-
#
#	jpg_import.py
#
#						Nov/19/2018
#
# ------------------------------------------------------------------
import	sys
from PIL import Image
#
from reportlab.pdfgen import canvas
from reportlab.pdfbase.pdfmetrics import registerFont
from reportlab.pdfbase.cidfonts import UnicodeCIDFont
# ------------------------------------------------------------------
sys.stderr.write ("*** 開始 ***\n")
#
font_mincho = "HeiseiMin-W3"
#
registerFont(UnicodeCIDFont (font_mincho))
#
pdf_canvas = canvas.Canvas("fuji.pdf")
#
ypos = 800
pdf_canvas.setFont(font_mincho, 30)
str_out = "富士山の写真です。"
pdf_canvas.drawString(100, ypos, str_out)
#
image =Image.open('fuji_mod.jpg')
pdf_canvas.drawInlineImage(image,100,ypos - 260)
#
str_out="２０１８年１１月１９日"
pdf_canvas.setFont(font_mincho, 15)
pdf_canvas.drawString(300, ypos - 300, str_out)
#
pdf_canvas.showPage()
pdf_canvas.save()
#
sys.stderr.write ("*** 終了 ***\n")
# ------------------------------------------------------------------
```

実行結果

```text
$ ./jpg_import.py
*** 開始 ***
*** 終了 ***
```

次のバージョンで確認しました。

```text
$ python --version
Python 3.10.4
```
vbsの作法 その13

#概要

vbsの作法を調べてみた。
vc++でcomサーバ作ってみた。

#写真

![image](https://qiita-image-store.s3.amazonaws.com/0/18104/ae6fff9f-e7f9-824a-76e0-ed9370d5ef49.png)

#環境

windows vista
visual studio 2010

#手順

MFCアプリケーションつくる。
高度な機能のオートメーションを選択。(重要)

クラスビューでVCcodeIPLLibralyを選んで、メソッドを追加。
　BYTE戻りのokと、void戻りのパラメータがBSTRなTEXT1を作る。

関数の中身を書く。

```
BYTE COhicompo1DlgAutoProxy::ok(void)
{
	AFX_MANAGE_STATE(AfxGetAppModuleState());
	// TODO: ここにディスパッチ ハンドラー コードを追加してください。
	return m_pDialog->flg;
}
void COhicompo1DlgAutoProxy::text1(LPCTSTR str)
{
	AFX_MANAGE_STATE(AfxGetAppModuleState());
	// TODO: ここにディスパッチ ハンドラー コードを追加してください。
	CString s;
	s.Format(_T("%s"), (LPCTSTR) str);
	((CEdit *) m_pDialog->GetDlgItem(IDC_EDIT1))->SetWindowText(s);
}
```

レジストリに、登録する。
　出来たEXEを管理者で実行する。

#テスト用コード

vbsで、使ってみる。

```
Dim App
Dim flg
Set App = Createobject("Ohicompo1.Application")
App.text1("こんにちわ　せかい")
flg = 3
Do
	WScript.Sleep(200)
	if App.ok() = 1 then 
		flg = 0
	end if
Loop until flg = 0
Set App = Nothing

```

以上。
MeCabをPythonとRで使う-Windows10-64bit


#はじめに
RStudio+RMeCabで1年ほどテキスト解析をしてきたのですが、
そろそろPythonもやらないとと言う空気に駆られてPython上でMeCabを環境構築しようとしたところ苦戦。

PythonでMeCabを使えるようにすると、RStudioで文字化けし、
RStudioでMeCabを使えるようにするとPythonで文字化けしを繰り返す。

いろいろ検索するととRはSHIFT-JIS、PythonはUTF-8と言う事で文字コードの違いが原因の模様。
以下の様にRとPythonで呼び出す辞書を変えてRStudio,PythonでMeCabが使えるようになりました。

#環境
Windows10 64bit 言語：日本語
R 3.5.1 64bit
RStudio 1.1.463
MeCab 0.996-32bit
RMeCab 1.00
Python 3.6.8(anaconda3 5.3.0) 64bit

#導入する物
mecab-python-windows
MeCab 0.996-32bit－UTF-8辞書、SHIFT-JIS辞書再構築のため再導入

#導入方法
MeCabは"C:\Program Files (x86)\MeCab"にインストールしている場合を示します。
他のドライブの場合は適宜読み替えてください。

##１．以下のサイトを参考にPython用MeCabバインディングを入れる
https://qiita.com/yukinoi/items/990b6933d9f21ba0fb43

##２．MeCabインストールの際UTF-8で辞書を作成し、辞書フォルダ名を変更。
辞書フォルダ"C:\Program Files (x86)\MeCab\dic\ipadic"のフォルダ名を
"C:\Program Files (x86)\MeCab\dic\ipadic-UTF8"に変更

##３．再度MeCabをインストールし、辞書をSHIFT-JISで作成。
これで "C:\Program Files (x86)\MeCab\dic"配下には以下の2つの辞書フォルダが出来る。
"C:\Program Files (x86)\MeCab\dic\ipadic"
"C:\Program Files (x86)\MeCab\dic\ipadic-UTF8"

##４．mecabrc-uファイルでUTF-8辞書を指定(2019/1/27追記)
この改訂以前はPythonから辞書を指定する際に-dオプションで直接指定していましたが、
-rオプションでmecabrcファイルから指定できることが分かりました。
こちらの方が直接辞書ファイルを指定する場合より判りやすくなるのこの方式を使用する事にしました。

C:\Program Files (x86)\MeCab\etc\mecabrcを開き以下の様に編集し
mecabrc-uの別名で保存。

```
6行目
(修正前)dicdir =  $(rcpath)\..\dic\ipadic
(修正後)dicdir = C:\Program Files (x86)\MeCab\dic\ipadic-UTF8
```


これでC:\Program Files (x86)\MeCab\etc\には以下の2つのファイルが出来る。
mecabrc
mecabrc-u


#解析の実行
##RStudioからMeCabで形態素解析
通常通り以下の様に行います。

```R
library(RMeCab)
RMeCabC("すもももももももものうち")
```
##PythonからMeCabでの形態素解析

####meCabrc-uファイルを指定してMeCabを呼び出し形態素解析。

```python
import MeCab
m=MeCab.Tagger("-r C:\progra~2\MeCab\etc\mecabrc-u")
print(m.parse ("すもももももももものうち"))
```
-r オプションで指定する場合のフォルダ区切りは"\"です。
"/"ではなぜかRuntimeエラーが出ます。

#修正・変更履歴
##2020/1/11
Python用MeCabバインディングがmecab-python-windowsからmecabに変わったので、リンク先を変更しました。
##2019/1/31
-rでオプション指定した際のフォルダの区切り文字を/→\に修正しました。
##2019/1/27
辞書ファイルの指定を-dオプションから-rオプションでmecabrcファイルから指定する事に変更しました。
是に伴い、大幅に改訂しています。
##2019/1/9
Program Files (x86)の誤記を修正しました。
##2019/1/6
PCの調子が悪くなったので、OSを再インストールしてから行ったところ以下の間違いに気づきました。
Windowsは日本語を使用しています。
###UTF辞書のフォルダ名のショートパスが以下の通りでした。
(正)C:/progra~2/MeCab/dic/ipadic~1
(誤)C:/progra~2/MeCab/dic/ipadic-UTF8
###コマンドプロンプトからのMeCab使用
コマンドプロンプトからMeCabを使用したところ、MeCab64bitなしでも文字化けしませんでした。
bashの厄介な&&と|| [WIP]

bash 記号 memo wip

まだメモ段階なのでいつか書き足します

---

# `&&`と`||`

bashには`&&`と`||`という記号があります。

| 記号 | 例       | 説明                                            |
|:-:   |:-:       |:-:                                              |
| &&           | A && B           | `A`が正常終了(返り値が0)したなら`B`を実行する     |
| &#124;&#124; | A &#124;&#124; B | `A`が異常終了(返り値が0以外)したなら`B`を実行する |

これらを組み合わせると、三項演算子等も作ることができます。

```bash
A && B || C
```

`A`が真(=返り値が0)なら`B`が、`A`が偽(=返り値が0以外)なら`C`が実行されます。
つまり、以下のif分と同値です。

```bash
if A ; then
  B
else
  C
fi
```

ちなみにこれを、逆にすると意味が違ってきます。

```bash
A || C && B
```

こうした場合、`A`が偽(=返り値が0以外)なら`C`が実行され、`C`が正常終了したら`B`が実行されます。
つまり以下と同値です。

```bash
if A; then
  C
  if [[ $? -eq 0 ]; then
    B
  fi
fi
```

# 本題パート

今回、以下の文に相当惑わされました。

```bash
[[ $__oo__insideTryCatch -lt 1 ]] || set -${__oo__presetShellOpts:-e} && Exception::Extract $__oo__tryResult ||
```

この文は、[niieani/bash-oo-framework](https://github.com/niieani/bash-oo-framework)というbash用のフレームワークのソースコード内にあったものです。
(このフレームワークについて、気になった方がいらっしゃいましたら、手前味噌ですが[READMEの非公式日本語訳(途中)](https://qiita.com/Cj-bc/items/452b1116b8746e29b861)があります。)

この文はとてもわかりづらいので、抽象化すると以下のようになります。

```bash
A || B && C || D
```

(`D`の部分は元のコードでは表記されていませんが存在しています)

## `A || B && C || D`の動き

単純に考えると、
`A!=0`なら`B`が走り、`B=0`なら`C`が走り、`C!=0`なら`D`が走るという風になるかと思います。
コードにすると以下のようです。

```bash
A
if [[ $? -eq 0 ]];then
  :
else
  B
  if [[ $? -eq 0 ]];then
    C
    if [[ $? -eq 0 ]];then
      :
    else
      D
    fi
  fi
fi
```

しかしこれは正確ではありません、なぜなら以下の実行結果が存在するからです...

```bash
$ true || true && false || echo "Done"
Done
```

先ほど書いたif文に沿うなら、はじめに`true`が来ている時点で何も起きないはずです。
しかし実際は違う。
Windowsでもls,pwd,clearコマンドを使いたい！

# 目的

Windowsでもls,pwd,clearコマンドを使いたい！

#方法

Windows標準のコマンドのエイリアスを作るようなバッチファイルを作ります。

1. `%WINDIR%\System32`内に以下のバッチファイルを置く。

    ```Bash:ls.bat
    @echo off
    dir %1 %2 %3 
    ```

    ```Bash:pwd.bat
    @echo off
    @cd
    ```

    ```Bash:clear.bat
    @echo off
    cls
    ```

2. コマンドプロンプト内で，「各バッチファイルのファイル名」を入力する
Ruby Silver and Gold

# Blockについて

ものすごい解りやす買ったのが以下の記事
https://qiita.com/kidach1/items/15cfee9ec66804c3afd2

ブロックとは、
#### do~end（もしくは{~}）で囲われた、引数となるためのカタマリ。


```block.rb
def give_me_block
  yield
end

give_me_block do
  p "Hello"
end
#=> "Hello"
```
上を明示的に書くと下になる。

```explicit_block.rb
def give_me_block(&block) ##&blockの&は入ってきた引数をProcオブジェクトに変更するためのもの
  block.call
end

give_me_block do
  p "Hello"
end
#=> "Hello"
```


ブロック、プロックの理解


```more.rb
#1
def magic_five_box(after_input, someProc)
  someProc.call(5, after_input)
end

#2
sum_proc = Proc.new do |x, y|
  p x + y
end

#3
magic_five_box(3, sum_proc)
#=> 8
```

1　では、magic_five_boxを定義している。
2で、　sum_procは、x,yを仮引数とするブロックである。(仮引数は、変数みたいなイメージ)
3でsum_procというブロックをmagic_five_boxのsomeProcに実引数として渡している。
4, sum_procオブジェクト内の　p x＋y が.call（5, 3）で5と３を実引数として実行される。

### Rubyの変数について

* Rubyのローカル変数は、その階層で閉じるというのが肝。Javaとかだと、上位層で定義されたローカル変数は、下位層でも使えるが、Rubyの場合は、あるスコープで定義されたローカル変数は、下位層だろうが上位層だろうが、そのスコープ内でしか使用できない。

* Rubyのインスタンス変数については、基本は、定義したスコープ内で初期化して使うものだが、そのスコープ外で呼び出したい場合は、attr_accesorを使うことで、その変数に変更を加えたり、初期化したりすることができる。

* Rubyのクラス変数については、なんのためやねん？-> 確認
【MySQL ver 8.0.12】phpmyadminにログインできなかった時の解消法

初qiitaの投稿です。

MySQLをインストール後、phpmyadminでログインできなかったときの個人的な解決方法を紹介します。

プログラミング初めて１ヶ月なため、稚拙な表現などあるかもしれません。その際は、コメントにてご教授頂ければと思います！

## MySQLのバージョン

Ver 8.0.12

## ログインできなかったときの状況

MySQLインストール後に初期設定した、user名「root」、そして設定したパスワードをphpmyadminの画面で入力するもエラーが出ました。

## ログインできなかった原因

詳しくは不明ですが、MySQLのセキュリティレベルがあがったようで、設定が必要とのこと。その手順をご紹介します。

##　ログインする方法
### STEP1：設定ファイルでパスワードポリシーを変更

`/etc/my.cnf`に追記、もしくは作成しましょう。

パスワードポリシーの設定は、初期設定のパスワードポリシーで引っかかる人のみ適応で良いと思います。

引っかかるかどうかは、STEP2のコマンドでパスワード設定しようとした際には、エラーが出るかどうかで判断できます。

**validate-password = OFFではパスワード強度は無効にできないので注意しましょう！**

```
[mysqld]

# パスワードポリシー
validate_password.length=4
validate_password.mixed_case_count=0
validate_password.number_count=0
validate_password.special_char_count=0
validate_password.policy=LOW

# デフォルト認証プラグイン
default_authentication_plugin=mysql_native_password
```

### STEP2：パスワード設定
MySQLにログインし、以下のコマンドでパスワード設定しましょう！

パスワードポリシーを初期状態のままだと、エラー出る場合はあります。

```
mysql > ALTER USER root@localhost IDENTIFIED WITH mysql_native_password BY 'PASSWORD(自分で設定したもの)';
```

これで設定は完了！私はこの方法でphpmyadminにログインできました。
### 参考にした神すぎるURL
・[Mac OSX High Sierra 開発環境セットアップのメモ (4) MySQL 8.0](https://chaika.hatenablog.com/entry/2018/07/14/090000)
・[MySQL 8.0 初期設定覚書](https://qiita.com/nobu-maple/items/3849b2161a21f90ae298)
NumPy配列のスライスが分かっていなくてはまった話

# 経緯
機械学習アルゴリズムを試すために，OpenCVで画像を読み込むプログラムを書きました。

画像サイズは$512\times 512$ですが，**必要な$256\times 256$の領域のみを切り出し，その外側は使いません。**
画像は約14万枚あり，このすべてに同じように読み込んでから切り出し処理を行います。
以下に状況を再現できる程度に簡単化したコードを示します。（大量のメモリを消費するので実行の際は注意してください）

```python
import numpy as np
import cv2

images = []
for i in range(140000):
    # 画像読み込み(のつもり)
    # 本当はcv2.imread()
    img = np.ones((512,512,3), dtype=np.uint8)
    img = img[:256, :256]    # 256x256の領域を切り出す
    images.append(img)

```

`cv2.imread()`で画像を読み込むと，符号なし8bit整数型のNumPy配列が返されます。
カラー画像なので，14万枚に対して切り出し処理まで行った場合，単純計算で

```math
256\times 256\times 3\times 140000\;{\rm [B]} = 25.6\;{\rm [GB]}
```

の容量になります。
計算機のメモリは64GBなので十分余裕なはずですが・・・


**足りませんでした**

# 原因（？）
NumPyを分かっている人なら当然の話かもしれません。

NumPy配列（ndarray）に対してスライスで一部を切り出すと，新しい配列が生成されるわけではなく，**viewと呼ばれる種類のndarrayが返されます。**
viewはもとの配列とメモリ上の同じ領域を参照しているので，viewを変更するともとの配列の値も変更されます。

```python:view
a = np.array([1,2,3,4,5])
b = a[1:4]
print(a) # => array([1,2,3,4,5])
print(b) # => array([2,3,4])
b[1] = 100
print(a) # => array([1,2,100,4,5])
```

さて，ここで最初のコードについて考えます。
画像から領域を切り出す際にスライスを使っていました。
つまり，リスト`images`にはviewが`append`されていきます。

この時，**切り出した外側の領域はどうなったのでしょうか？**
通常，参照されなくなった領域はGCによりそのうち開放されますが，**スライスを用いた場合，切り出されなかった領域もメモリに残り続けるのではないかと考えました。**

そこで以下のようにしてviewをコピーし新たな配列を生成したところ，メモリは余裕で足りました。消費量も大体予想通りになりました。

```python:改善版
import numpy as np
import cv2

images = []
for i in range(140000):
    # 画像読み込み(のつもり)
    # 本当はcv2.imread()
    img = np.ones((512,512,3), dtype=np.uint8)
    img = img[:256, :256]    # 256x256の領域を切り出す
    img = np.array(img)    # コピーを生成する
    images.append(img)
```

必要な領域のみをコピーしたことで，元の$512\times 512\times 3$の配列は完全にどこからも参照されなくなり，開放されているのだと思われます。

# おわりに
NumPyのviewについての勉強になりました。
**原因については，スライス後にコピーしたら解決したという事実から推測したものなので，誤っている可能性もあります。**
何かありましたらご指摘いただけると幸いです。
Atomic Designでディレクトリを分けるとき pages は webpages の方がいいよねって話

# pages

![WS000001.JPG](https://qiita-image-store.s3.amazonaws.com/0/157186/c6b02ced-386d-3492-d2e1-727f99c886d2.jpeg)

# webpages

![WS000000.JPG](https://qiita-image-store.s3.amazonaws.com/0/157186/15879655-10be-2c88-40c1-16ed62568a04.jpeg)

並び的に後者の方が綺麗。
WordPressサイトでGoogle Fonts APIから特定の文字列のみのフォントを取得する

##背景
Google Fontsから2種類のフォントウェイトを読み込んでいるWordPressサイトの特定のぺージで、
新たに別の太さが必要になるケースがありました。
サブセット化したフォントをサーバに設置してもよかったのですが、
フォント適用箇所が記事の一部という動的なコンテンツだということ、
また対象文字列の量自体は少なく読み込み量を最小に抑えたいという点から今回の対応を行いました。

###環境
WordPress 4.9.4
php 5.5.38

##手順
文字列を絞り込んでフォントを取得するためのURLはこちらです。
`https://fonts.googleapis.com/css?family=Inconsolata&text=Hello`

上記を参考にサイトで実際に読み込みを行います。

###フォント読み込み用URLを準備
今回は日本語フォントのNoto Sans JPを使います。
[フォントのぺージ](https://fonts.google.com/specimen/Noto+Sans+JP)から[SELECT THIS FONT]をクリックするとブラウザ下部にドロワーが表示されます。
そちらからフォント読み込み方法の確認や[CUSTOMIZE]タブからウェイトの指定ができます。

```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:300">
```

後からWP側で対象の文字列の絞り込みをしたいのでlink要素からフォント読み込みします。

###対象文字列の絞り込み
文字列を取得する関数を作成します。
例として投稿のタイトルに設定されている文字列を取得します。

```php:functions.php
<?php
	function get_font_string(){
		//変数初期化
		$str = '';

		//全ての投稿を取得
		$args = array(
			'orderby' => 'date',
			'order' => 'ASC', //日付昇順（古い順）
			'posts_per_page'   => -1, //全件
			'post_type' => 'post',
		);
		$posts_arr = get_posts($args);
		foreach($posts_arr as $post){
			$str .= $post->post_title;
		}
		return urlencode($str); //アルファベット以外はエンコードする
	}
?>
```

###対象ぺージにlink要素を追加
cssより前にフォントを読み込んでおきたいため、`wp_head()`よりも前に下記を記載します。

```php:header.php
<?php if(is_singular()): /*対象のぺージの条件*/
  $font_str = get_font_string();
?>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:300&text=<?php echo $font_str; ?>" rel="stylesheet">
<?php endif; ?>
```
対象ぺージの条件はWPの[条件分岐タグ](https://wpdocs.osdn.jp/%E6%9D%A1%E4%BB%B6%E5%88%86%E5%B2%90%E3%82%BF%E3%82%B0)から適切なものを選びます。

###スタイルを適用
.titleに文字列を出力するものとして、スタイルを下記のように設定します。

```css:style.css
.title{
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 300;
}
```


##参考
Get Started with the Google Fonts API
[https://developers.google.com/fonts/docs/getting_started?hl=ja#optimizing_your_font_requests](https://developers.google.com/fonts/docs/getting_started?hl=ja#optimizing_your_font_requests)
Azure Databricks（Apache Spark）で、SparceVectorをAggregate

# 概要
この世界で一体何人の役に立てるかわからないですが、pysparkで、Dataframe内の疎行列を集約する方法です。微妙にハマるので。

# TL;DL
[こちら](https://danvatterott.com/blog/2018/07/08/aggregating-sparse-and-dense-vectors-in-pyspark/)を大変参考に参考にさせていただきながら、和訳しました。


```
from pyspark.ml.feature import CountVectorizer

# Input DataとなるDataframe
df = spark.createDataFrame([
    (100, "a b c".split(" ")),
    (100, "a b b c a".split(" "))
], ["id", "words"])

# ワードカウントで、疎行列を作る
cv = CountVectorizer(inputCol="words", outputCol="features", vocabSize=3, minDF=2.0)
model = cv.fit(df)
df = model.transform(df)

# show Action
result.show(truncate=False)
```

```
# 出力です
(7) Spark Jobs
df:pyspark.sql.dataframe.DataFrame = [id: long, words: array ... 1 more fields]
+---+---------------+-------------------------+
|id |words          |features                 |
+---+---------------+-------------------------+
|100|[a, b, c]      |(3,[0,1,2],[1.0,1.0,1.0])|
|100|[a, b, b, c, a]|(3,[0,1,2],[2.0,2.0,1.0])|
+---+---------------+-------------------------+
```


```
from pyspark.sql import functions as F
from pyspark.sql import types as T
from pyspark.ml.linalg import SparseVector, DenseVector

# Sparse行列を、普通の配列にするUDFの準備
def sparse_to_array(v):
  v = DenseVector(v)
  new_array = list([float(x) for x in v])
  return new_array

# UDFの登録
sparse_to_array_udf = F.udf(sparse_to_array, T.ArrayType(T.FloatType()))

# Driverに返さないまま、Sparseをリストに変換したカラムを追加する
df = df.withColumn('features_array', sparse_to_array_udf('features'))
df.show()

# Driverに返さないまま、リストをループで回しながらsumし、またArrayに変換する。
# ここのF.sumを変更すれば、平均なども算出可能
df_agg = df.groupBy('id').agg(F.array(*[F.sum(F.col('features_array')[i]) for i in range(3)]).alias("averages"))
df_agg.show()
```

```
# 出力です
(10) Spark Jobs
df:pyspark.sql.dataframe.DataFrame = [id: long, words: array ... 2 more fields]
df_agg:pyspark.sql.dataframe.DataFrame = [id: long, averages: array]
+---+---------------+--------------------+---------------+
| id|          words|            features| features_array|
+---+---------------+--------------------+---------------+
|100|      [a, b, c]|(3,[0,1,2],[1.0,1...|[1.0, 1.0, 1.0]|
|100|[a, b, b, c, a]|(3,[0,1,2],[2.0,2...|[2.0, 2.0, 1.0]|
+---+---------------+--------------------+---------------+

+---+---------------+
| id|       averages|
+---+---------------+
|100|[3.0, 3.0, 2.0]|
+---+---------------+
```

# 解説
- Dataframe内に疎行列が現れることはよくある（特にNLP）。
- それらを集約したいシチュエーションに、上記が有効。
- 疎行列そのままだと集約できないので、一度配列に変更し、配列の各要素を足し合わせながら、また配列に復元している。

# ユースケース
- 大体NLPで使うと思う。あるデータをFeature Hashingして疎行列ベクトルで表現した後に、カテゴリごとに集約したい場合等。
[Windows]TortoiseGit使う時SSHキー作成

**TortoiseGit**[インストール](https://tortoisegit.org/)

###<font color="DeepSkyBlue">SSHキー作成</font>
[1]インストール完了出来たらCortana検索から**PuTTYgen**を開く
![6.png](https://qiita-image-store.s3.amazonaws.com/0/159490/169f3b95-fbd9-9e21-fdf2-637bcc76d910.png)

[2]**Generate**ボタンクリックすると次の画面が出ますが、**マウス**を画面上で動かさないと進みません。
![7.png](https://qiita-image-store.s3.amazonaws.com/0/159490/3f5e2010-7ec8-da6a-9a9c-17097c8ceff7.png)

[3]完成するとPublicキーは次の画面から取得できます。
[4]Privateキーはどこかに保存しときましょう！。
[5]Publicキーを、また取得したい時は、**Load**ボタンをクリックし、保存したPrivateキーを読み込むと、次の画面のように出てきます。
![1.png](https://qiita-image-store.s3.amazonaws.com/0/159490/d1b3dc5c-6852-c3e7-bef5-2b2d8b119c75.png)
google_map_flutter を修正しました

![flutter](https://flutter.io/assets/flutter-lockup-4cb0ee072ab312e59784d9fbf4fb7ad42688a7fdaea1270ccf6bbf4f34b7e03f.svg)
google_map_flutterというflutterでgoogle mapを利用する
[プラグイン](https://github.com/flutter/plugins/tree/master/packages)があるのですが、[最近のアップデートでのUIKitViewに
対応](https://github.com/flutter/plugins/pull/892)から動作しなくなったものを修正しました。

[github](https://github.com/gauuud/flutter_plugins_google_maps_flutter_ios_bugfix/tree/master/packages/google_maps_flutter)

修正内容は[hitory](https://github.com/gauuud/flutter_plugins_google_maps_flutter_ios_bugfix/commits/master/packages/google_maps_flutter)から確認してください。

要約すると、
iOSでViewの初期化ができない
iOSでイベントが渡されない
の２点の致命的なバグを修正しています。

簡単な動作確認しかしていないので、
問題があればissueへ報告お願いします。
Python 文字列操作チートシート

pythonの文字列操作チートシート
実行環境は下記

``` bash
$ python -V
Python 3.6.6
```
## 文字列基礎

文字列は 「 ‘ 」（シングルクォーテーション）と「 ” 」（ダブルクォーテーション）の両方で表現する
クォート記号３つで複数行に分けて書く事も出来ます。

## 文字列結合

2つの文字列を1つの文字列へする方法

``` python
str1 = "hello"
str2 = "world"

#「+」演算子
str1 = str1 + str2
# or
str1 += str2 

# リテラルを並べて書いても連結される(変数は不可)
str4 = 'aaa''bbb''ccc'

# sprint風な書き方もできる
print("%s %s" % (str1, str2))
print('{} {}'.format(str1, str2)) #python3ではこちら推奨
print(f'{str1} {str2}') #Python3.6以降で使える

# 型の違う文字列でも結合可能
print('{} {}'.format(str1, int1))
print(f'{str1} {int1}')

# 「join()」使用
words = ["Hello", "World", "!"]
print(" ".join(words)) 
## => Hello World !
```

## 文字列分割

指定の文字列に対して，区切り文字で分割したリストを返します．

``` python
str = "A B C D"
## 「split」使用 .split(区切り文字, 分割数)
print(str.split())
## => ["A", "B", "C", "D"]

str = "HelloWorld"
## 「rsplit」使用 .rsplit(区切り文字, 分割数)
print(str.rsplit("l",1)) ## => ['HelloWor', 'd']
```

## 文字列置換

文字列を置換する方法について説明します。

``` python
# replace()を使用
str = "123123123"
## 指定文字列を置換する(指定したワード全て)
print(str.replace("123", "hoge")) 
## => hogehogehoge

# 置換回数を1回にして指定文字列を置換する
print(a.replace("123", "hoge", 1)) 
## => hoge123123
import re

# 正規表現を使用しての置換
str1 = 'I like orange.'
print(re.sub(r'[a-z]+', 'xxx', str1))
# => 'I xxx xxx.'
```

正規表現に関しては以下にまとまっていますのでご参照ください
https://docs.python.jp/3/library/re.html

## 文字列検査

``` python
# find()メソッド
# 一致する文字列が出現する位置を返す
str1 = "hello world"
print(str1.find('o'))
# => 4
print(str1.rfind('o')) #逆側から検索
# => 10

# 第二引数で位置を指定すること出来る
print(str1.find('o', 5))
# => 7

# 単純に存在の有無を調べるなら「in」を使用
print('hello' in 'hello world')
# => True
print('hello Japan' in 'hello world')
# => False

# findall()メソッド 正規表現使用
print(re.findall('o.', 'hello world'))
# => ['o ', 'or']
print(re.findall('oh', 'hello world'))
# => []
```

## パディング

桁合わせするにはいくつか方法があります。

``` python
# 右寄せゼロ埋め: zfill()

str1 = 1234
print(str1.zfill(8))
## => 00001234

# 数字以外でも可
str2 = 'abcd'
print(str2.zfill(8))
## => 0000abcd

# 右寄せ、左寄せ、中央寄せ: rjust(), ljust(), center()
str1 = '1234'

print(str1.rjust(8, '0'))
# 00001234

print(str1.ljust(8, '0'))
# 12340000

print(str1.center(8, '0'))
# 00123400

# %演算子を使う方法もある
num = 50
num_pad = '%04d' % number
print(number_pad)
## => '0050'

# formatを使う方法もある
print('{:0>8}'.format(str1))
## => 00001234
print('{:0^8}'.format(str1))
## => 00123400
print('{:0<8}'.format(str1))
## => 12340000
print('{:04}'.format(num))
## => 0050

# f-string を使う方法もある
print(f'{str1:0>8}')
## => 00001234
print(f'{str1:0^8}')
## => 00123400
print(f'{str1:0<8}')
## => 12340000
print(f'{num:04}')
## => 0050
```

# 空白削除

文字列の中に存在する空白が不要なときの処理

``` python
str1 = "    Hello World!!    "

# 単語の間にある空白は削除したくない場合
print(str1.strip())
# => "Hello World!!"

# 左側にある空白のみ削除したい場合
print(str1.lstrip())
# => "Hello World!!    "

# 右側にある空白のみ削除したい場合
print(str1.rstrip())
# => "    Hello World!!"
```

# 大文字/小文字変換

文字列を大文字から小文字へ変換するメソッドとして「lower」があります。
逆に小文字から大文字へ変換するメソッドとして「upper」があります。

``` python
str1 = "abcDEfg"

print(str1.upper())
# => ABCDEFG

print(str1.lower())
# => abcdefg
```

# 型変換

``` python
# intからstrへ変換
str1 = str(int1)

# floatも可
str2 = str(float1)
```

# まとめ

大体覚えていますがとりあえずまとめて見ました。
SlackのFAQのやり取りに掛かっている時間を知りたい(前編)

# 目的

Slackで行われる営業からエンジニアに対する質問のやり取りについて、どのくらい時間的コストが掛かっているのか知りたい。



# 『FAQのやり取りをしている時間』をどう定義するか？
## 前提条件

- 質問は特定のチャンネルでやり取りされる
- 質問は全てスレッドでやり取りされる
- 質問を行う場合は特定のグループ（エンジニアチーム）に対してメンションが行われる



## 二つの提案
①質問に対して、 ```質問者ではない人間の一次回答``` までの時間を回答時間とする

　 懸念点としては、**最終回答かどうかがわからないため、本来のやり取りの時間よりも短くなる**可能性が有る

②質問に対して、 ```最後に付いた質問者のコメント``` までの時間を回答時間とする

 質問者が回答を確認して承認するまでが回答時間ではないのか、という考えを元にしている。
 また、大抵の質問は質問者の感謝のコメントで締められる。このことから、最後に付与された質問者のコメントまでの時刻を計測すればよいと判断した。
　　懸念点としては、**質問者が回答への反応が遅かった場合、回答時間が長くなってしまう**可能性が有る。



▶▶▶▶上記案で今回は②を採用。[^slackCulture]



# 要件

- [must] 全ての情報はスプレッドシートに集約する



## 処理のフロー

1. 対象チャンネルからコメントを取得
2. 特定グループへのメンションが行われているコメントを質問と判断し、抽出
3. 質問コメントからスレッドIDを取得
4. スレッドの全コメントを取得
5. スレッド内で質問者が最後に発言したコメントを取得[^algorithm]
6. スプレッドシートに書き込み



前編はここまで。後編は[こちら](https://qiita.com/AkiyoshiChan_/items/fc40030fd27e76e71a53)



[^slackCulture]: この辺りは目的やslack文化によって違いが出てくると思いました。お礼を言う文化が根付いているって素晴らしい！
[^algorithm]: 今回のロジックでは最後に発言したコメントを ``` やり取りの最終時刻``` と単純に判断しているが、ありがとうなどの特定文字列が入っているかどうかの判断なども組み合わせてやればもう少し精度の高い値が出ると思われる。こればかりは目的次第なので…。
Vim で曜日をインクリメントするプラグインを書いた

<a href="https://gyazo.com/367f95c2cc2bfcdfbd11714a0f6885d9"><img src="https://i.gyazo.com/367f95c2cc2bfcdfbd11714a0f6885d9.gif" alt="Running increment-day.vim" width="358"/></a>

https://github.com/oieioi/increment-day.vim

- 普段 Vim にお世話になりまくってるのに自分でスクリプト書いたことなかったので、勉強しながら作ってみた。以下の記事を参考にした。
    - [はじめてのvimscriptとvimプラグインの作成 - Qiita](https://qiita.com/Sa2Knight/items/6b26d35af571c239da31)
    - [Vimスクリプト基礎文法最速マスター - 永遠に未完成](https://thinca.hatenablog.com/entry/20100201/1265009821)
    - [モテる男のVim script短期集中講座 - Big Sky](https://mattn.kaoriya.net/software/vim/20111202085236.htm)
- 既知の不具合
    - 失敗した時はデフォルトの `<C-a>` を動かすようにしたけど、 `count` が受け取れなくなったりしてるので、`<C-a>`, `<C-x>` にバインドすると既存の挙動を壊してしまう
    - とにかく動かそうということでインタフェースのみを Vim script で書き、コアのロジックは Ruby で書いてしまったので書き直したい。
Android Studio3.2.1をPleiadesで日本語化したら起動しない場合の対処法

PleiadesでAndroid Studioを日本語化した際に起動しなくなったので、その原因と対応方法。

#追記
2018.11.24にcypher256さんが対応してくださいました。それ以降のバージョンで同様の現象が出た場合は、下記のファイル周りを確認してみてください。

#前提
・Windows 10
・Android Studio3.2.1
・pleiades-2018.10.04
・日本語のユーザ名

#原因
studio64.exe.vmoptionsがUTF8で作成されているため。

※.AndroidStudio3.2\system\caches\配下のキャッシュファイルなどはSJISで作成されるため、UTF8で保存している場合は文字化けする。

【文字化けが確認されたファイル】
・attrib.dat.storageData
・names.dat.keystream
・changes.storageData
・idea.log
・ActivitiesCache.db-wal

※AppData\Roaming\配下のファイルは文字化けしていない。


#対応
C:\Users\[日本語のユーザ名]\.AndroidStudio3.2\config\studio64.exe.vmoptionsをSJISで保存しなおす。


#再現方法
1. Android Studioをインストール、Android SDKはインストール時に日本語を含むパスだと警告が出るので、別の場所を指定。
2. pleiades-2018.10.04を7-Zipで解凍。
3. pleiadesのインストーラでAndroid Studioのstudio64.exeを選択。
4. 「日本語化に成功しました」と表示されるが、以降Android Studioが起動しなくなる。

#確認ポイント

##1.起動確認

C:\Users\[日本語のユーザ名]\.AndroidStudio3.2\config\studio64.exe.vmoptionsをSakura Editorなどで開く
以下の2行を#でコメント(実際にはjavaagentのコメントだけで起動確認は可能)

```
-Xverify:none
-javaagent:C:\Users\[日本語のユーザ名]\.AndroidStudio3.2\config\jp.sourceforge.mergedoc.pleiades\pleiades.jar
```

##2.UTF8からSJISに
1で起動が確認できたら、studio64.exe.vmoptionsの文字コードをUTF8からSJISに変更して保存、起動確認。

#まとめ
おそらくPleiadesの問題と思われるため、日本語を含むパスの場合はSJISでstudio64.exe.vmoptionsを作ってもらえると、回避できると思われる。今回はAndroid Studioのみで確認したが、同様にPleiadesの日本語ユーザ名が起因で起動しない場合は設定ファイルの文字コードを確認してみるのが良いかもしれない。

※今回の対応は、まだ一時的なものなので使っている間にまた問題が発生する可能性があります。対応は個人の責任でバックアップをしっかり取って行ってください。
WebRTC-JPハンズオンレポート

WebRTC-JPハンズオンでメンターをしてきました。

---
主催:[WebRTC Beginners Tokyo](https://webrtc.connpass.com/)
開催日時:2018/11/18(日)12:45〜18:30
開催場所:渋谷ヒカリエ17F レバレジーズ様オフィス
参加者:11名
イベント紹介ページ:[conppas](https://webrtc.connpass.com/event/98121/)
発表資料:[Qiita](https://qiita.com/fu-jimoto/items/61fb7474ba6b1f4d6457)
サンプルコード:[GitHub](https://github.com/fu-jimoto/Agora-WebRTC-VideoCall)

---


開催場所のオフィスはとてもオシャレな空間。
![P_20181118_153758_PN.jpg](https://qiita-image-store.s3.amazonaws.com/0/300377/d148c23a-c8e7-c6e1-ce85-8e4f7ac7b495.jpeg)


ハンズオンの内容は、第1回目はTwilio,第２回目はSkyWayでのハンズオンと同様な機能を実装してみることとしました。

(補足)
[第1回目:Twilio](https://webrtc.connpass.com/event/89796/)
[第2回目:SkyWay](https://webrtc.connpass.com/event/83991/)

又、少し面白い事をやってみようと思い、顔認識で目線を入れるアプリも実装することにしました。
簡単に紹介すると次のような内容です。
　1.agora networkへの接続 
　2.カメラ、マイクの準備
　3.ローカル映像の表示
　4.他拠点映像の表示
　5.自拠点の退室したときの処理
　6.他拠点が退室したときの処理
　7.アクティブスピーカーの処理
　8.画面共有の処理
![P_20181118_153841_vHDR_Auto.jpg](https://qiita-image-store.s3.amazonaws.com/0/300377/3261a4ec-1741-1953-029d-07452bb6d409.jpeg)

初心者向けということで各ステップ毎にサンプルコードもGitHub上で公開しておりました。
サンプルがあることでハードルが低く分かりやすかったというアンケート結果もありました。
（経験者には少し物足りなかったかもしれませんが）

特に日本ではドキュメントよりもまずサンプルを動かすという傾向があるので（自分もそうです）このあたりは準備しておいてよかったと実感しました。

又、各STEPでは約15分程度の実装時間を設け、じっくりと作業できるようにしました。
SDKの魅力として素のWebRTCのAPIをコールする事なくビデオ通話アプリが簡単に実装できることを実感して頂けたかと思います。


Twitterでは[#webrtcjp](https://twitter.com/search?q=%23webrtcjp)のハッシュタグがおなじみのようです。
![スクリーンショット 0030-11-19 18.00.52.png](https://qiita-image-store.s3.amazonaws.com/0/300377/b441466f-b630-bd91-babf-161e610549e0.png)


Twitter上や現場ではWebRTCの経験豊富な方からは質問が多く飛び交います。
覚えている範囲ですが...
>Q.Agora.ioはデフォルトでSFUを利用？
A.SFUのみでP2Pはありません
Q.画質の設定はどうする？
A.setVideoProfileで設定します
Q.日本にサーバーはありますか？
A.あります

等の質問がありました。コアな部分についての質問は。。。まだまだ学習が必要ですね。

ハンズオン終了後には参加者にアンケートをとります。
発表側としては見るのが怖いですね（汗
自由な感想としては以下のようなコメントを頂きました。

>他のサービスとの比較をもう少し詳しく知りたかった。
初めてWebRTCの体験をしましたが、大変簡単に始められることにびっくりしました。何かこれを使って開発してみたいなと思ったのでもうちょっと勉強してみようと思いました。
webRTCについては初めてですが、動くサンプルコードなどの準備があってハードルが低くわかりやすかったです。
javascriptがまともに書けないレベルなので不安でしたが、個別でサポートしていただきなんとか課題をこなすことができました。とても勉強になり満足しています。また機会があれば参加したいです。

ハンズオンの気になる満足度,理解度は。。。
![1.png](https://qiita-image-store.s3.amazonaws.com/0/300377/0d083040-1f5e-51ff-f39b-310ee1420747.png)
概ね良好なようで一安心。

参加者のスキルは以下のようです。
![2.png](https://qiita-image-store.s3.amazonaws.com/0/300377/b623021e-b76a-dcea-830a-dcbdcc398a54.png)



又、今回は主催者の方にいろいろハンズオンのアドバイスを頂きました。
企業の枠をこえてWebRTC業界がもっと盛り上がるような活動をしていこうと思います。




#最後に
[**agora.ioに関するお問い合わせはこちらから**](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=5ebc93efece25d3b3ec5)
[<img width="912" alt="スクリーンショット 0001-08-15 13.41.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/5d815376-9b89-08fa-9434-6fa7e8e67bcf.png">](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=5ebc93efece25d3b3ec5)
コマンドプロンプトでsudoと打ち込んで管理者権限モードにする方法

#目的

WindowsのコマンドプロンプトでもUNIXみたいにsudoと打ち込むことでシェルを管理者権限モードにしたい！

#方法

以下のbatファイルをデスクトップ等で作成し，`C:\Windows\System32\`内に移動させます。
(実際はPATHが通っているディレクトリならどこでもOKです)
ファイル名は`sudo.bat`にしています。
この"sudo"の部分を任意の文字列(例えば"su")にすることで，コマンドプロンプト上で入力するコマンド名も変更できます。

```bash:sudo.bat
@echo off
powershell start-process cmd -ArgumentList '/k ""cd /d %CD%""' -verb runas
```

#実行方法

1. 管理者権限ではないコマンドプロンプトを開きます。
2. `sudo`と入力します。
3. Windowsから「管理者モードにする？」と聞かれるので，「はい」を押す or `Alt+Y`を押します。
4. 別ウィンドウで管理者権限のコマンドプロンプトが立ち上がります。

#注意
UNIXのように，`sudo hoge --fuga`のような引数を用いたsudoは実行できません。
あくまでも`sudo`と入力することで管理者権限モードのコマンドプロンプトを立ち上げるためのTipsです。
CircleCIが  cannot create /conf.d/docker-php-ext-mcrypt.ini: Directory nonexistent といって落ちている問題の対処

### これはなに
つい数日まで動いていたCircleCIのテストが落ちていた。その対処方法について。
（2018/11/19 に問題を確認。11/15までは動作していた。）

### circleCI config の該当行

```
run: sudo docker-php-ext-install pdo_mysql gd
```

### エラーメッセージ

```
Installing shared extensions:     /usr/local/lib/php/extensions/no-debug-non-zts-20160303/
/usr/local/bin/docker-php-ext-enable: 108: /usr/local/bin/docker-php-ext-enable: cannot create /conf.d/docker-php-ext-mcrypt.ini: Directory nonexistent
Exited with code 123 
```

### 対処法
sudo に `-E` オプションをつけて環境変数を渡すようにすれば良いです。

```
run: sudo -E docker-php-ext-install pdo_mysql gd
```

-E オプションはすでにある環境変数をsudoを実行する時にも保存するというオプションです。


### 補足
なぜこの問題が突然起こったのか？
該当ディレクトリのファイルのディレクトリパスを環境変数にする変更を入れた副作用のようでした。 https://github.com/docker-library/php/pull/740

```
#変更前
ini="/usr/local/etc/php/conf.d/${iniName:-"docker-php-ext-$ext.ini"}" 

#変更後
ini="$PHP_INI_DIR/conf.d/${iniName:-"docker-php-ext-$ext.ini"}" 　
```
$PHP_INI_DIR これがsudoの時に渡されなかったことにより、 /conf.d/ から始まってしまい、当然そんなディレクトリはないのでエラーが吐かれます。


### 参考にしたIssue 
https://github.com/docker-library/php/issues/750
CSSとプレーンJSだけで簡単なアニメーションの開始と停止を制御できる話

# やりたかったこと
画面に時間指定で減っていくゲージを作りたかった。
（ゲームで出てくる時間制限のゲージみたいな）
実際調べるとクラスを与えたりだとか、jQuery使おうだとかいろいろある。

だけど、 **単純な機能しか求めないんだから、単純なコードで書きたい。**
とりあえずプレーンなJSでの書き方がわかれば、この記事を読まれた優秀な皆さんは簡単に応用できるだろうし。
~~そもそも基本的なことができてない自分こそ、いろいろ調べて実装方法に迷ったというのは内緒~~

他にいい方法があったら教えてください m(_ _)m

# デモとコード
<p data-height="265" data-theme-id="0" data-slug-hash="PxJjBy" data-default-tab="css,result" data-user="uichi60" data-pen-title="CSSとプレーンなJSでのタイマー表示" class="codepen">See the Pen <a href="https://codepen.io/uichi60/pen/PxJjBy/">CSSとプレーンなJSでのタイマー表示</a> by Uichi60 (<a href="https://codepen.io/uichi60">@uichi60</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# 解説
というほどでも有りませんが。

アニメーションさせたい要素にtransitionを設定したのが、今回の要です。
transitionを設定した要素のパラメータにJavaScriptで変更を加えることで、
設定された時間（今回は10秒）の間にゲージが減っていきます。

# 参考
[【CSS3】Transition（変化）関連のまとめ](https://qiita.com/7968/items/812d6a21fc4dd9ae9c75)
chainer.trainingに関する記事まとめ(自分用)

[Updater, Trainerの中身解説](https://qiita.com/sumsum88/items/a62b6950533e8dbb7e02)
[Updater](https://qiita.com/dsanno/items/5a3ed45c9a5b568df9ea)
[extension総まとめ](https://ensekitt.hatenablog.com/entry/2016/11/24/012539)
IBM SPSS Modelerでインストール後に出るjava.lang.NullPointerExceptionの対応

# SPSSインストール後に出る、謎のぬるぽ
IBM SPSS Modeler 18.1.1をMacOS High Sierra(10.13.6)にインストールした後、起動するとこんなエラーが。

<img width="910" alt="スクリーンショット 2018-11-19 17.33.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/190535/784fc622-75a5-ee9d-c58d-8a5ddd7ec4f7.png">

調べてみると、過去バージョン(18.0)でこんなworkaroundが出ているようでした。
要するに 「log4j.propertiesの中のパスが適切な権限ではないため」エラーが出る、とのことです。

- Unable to open/launch IBM SPSS Modeler - receive a java.lang.NullPointerException
-- https://www-01.ibm.com/support/docview.wss?uid=swg22004593

まさか 18.1.1 になってもFixされていない……? そんな…… まさかね……


## 試行錯誤
「権限が適切でない」のなら、権限を付与してやればいいじゃない

と考え、別途、権限 777 の "log"というパスを作って設定してみましたが、変わらず。
んー？

## 解決編
最終的に、このようにすることで解決しました。

変更前のlog4j.properties

```shell:log4j.properties
log4j.appender.MainLog.File=${application.home}/log/client_logging.log
log4j.appender.TraceLog.File=${application.home}/log/client_tracing_${PROCESS_ID}.log
```

変更後のlog4j.properties

```shell:log4j.properties
log4j.appender.MainLog.File=/tmp/client_logging.log
log4j.appender.TraceLog.File=/tmp/client_tracing_${PROCESS_ID}.log
```

参照場所を/tmp/にしたところ、起動しました。

権限の問題じゃなくて、パスが長すぎるとかじゃないのかなーかなー

せめて障害事象の原因は正しく書いてほしい、というお話でした。
Ebiten と Go の歴史

本稿では Go の 2D ゲームライブラリ [Ebiten](https://hajimehoshi.github.io/ebiten) のこれまでの歴史をざっくり振り返ります。

# タイムテーブル

![history.png](https://qiita-image-store.s3.amazonaws.com/0/1911/76959c6b-c494-5947-485f-7fba5b8cd11d.png)

# Ebiten と Go

Go は半年ごとの定期リリースです。 Ebiten はリリース時期は決まっていませんが、一年に 2 回くらいのペースでリリースし続けています。 Ebiten 0.x の時期が長いですが、一度ある程度動くものができてしまって一旦満足してしまい、開発が止まっていました。今ではむしろ、やりたいことが無限に増えていっている状況です。

Ebiten は Go の新しい機能を積極的に取り入れています。たとえば Ebiten のモバイル対応も比較的早い段階から行ったと記憶しています。 gomobile 自体は 2014 年ごろに開発が始まっていますが、現状のように使えるようになった時期は実は定かではありません。　Wasm ポートは正式にリリースされる前から Ebiten 側で実装を開始し、最新の Go をビルドして実験するということを行っておりました。

Android、 iOS のサポートはかなり大変だった記憶があります。コンテキストロストを簡単に起こしてしまうため、自動的に復帰するロジックを組み込む必要がありました。[償いの時計](http://blockbros.net/tsugunai/)(Clock of Atonement) をリリースしたのは 2017 年 4 月で、 Go 製で初めてストアにでた商用アプリのはずです。

# Ebiten とバージョン

Ebiten 1.9 以降の Ebiten 1.x に予定しているのは、 Metal 対応[^metal]、シェーダ対応などです。 Ebiten 2.0 では互換性を保たない API 整理を予定していますが、具体的なプランはありません。

Ebiten は Semantic Versioning を採用していて、メジャー番号が同じならば　API 互換性は保たれています。ただし、厳密に言うと一部壊してしまっていて、たとえば 1.3 か 1.4 の段階で、 `Run` 関数の `scale` 引数が `int` から `float64` になったりしています。整数でないスケールはモバイル環境だと普通にありえる、というのが理由です。当初ユーザーが少なかったため、破壊的変更をしてしまいました。本当は良くないですね。反省。

[^metal]: Apple が OpenGL を廃止予定であり、すでに macOS 10.14 Mojave では deprecated である旨の警告が出る。

# Ebiten とはそもそも何なのか

そもそもの話、 Ebiten は「スーファミっぽいゲームを作る」ライブラリというポリシーで作られたものであり、実際 API の取捨選択もその基準で作られていました。ただ現在はそのポリシーは破棄されており、 Ebiten は「Dead Simple (死ぬほどシンプル)」な 2D ゲームライブラリというポリシーになっています。「スーファミっぽい」という目的を第一義にすると利用者が少なくなる、というのが理由です。目的が絞られていて尖っているというのは、自分だけの目的を達成するには手っ取り早いという良い面があります。しかし、それだけだとあまり利用者が集まらずフィードバックが少なくなり、クオリティが上がらないというジレンマがあります。

ポリシーが変わったとはいえ、 API をミニマムに保つという方向性は継承したままです。最近は実験的にポリゴン描画 API も入り、ますます普通の 2D ゲームライブラリっぽくなりました。

たとえ 2.0 やそれ以降になっても、このポリシーは変わることはないでしょう。たとえば 3D 化とかそういった方向は今の所全く考えられません[^3d]。

[^3d]: 3D なら Unity とかを使ったほうがいいんじゃないだろうか :-)

# 付録・タイムテーブル詳細

|日付|出来事|備考|
|:--|:--|:--|
|2012-03-28|Go 1.0 リリース||
|2013-05-13|Go 1.1 リリース||
|2013-06-15|Ebiten 最初のコミット||
|2013-12-01|Go 1.2 リリース||
|2014-06-18|Go 1.3 リリース||
|2014-12-10|Go 1.4 リリース||
|2015-01-05|Ebiten 1.0.0 リリース|当時は macOS でしか動かなかった。|
|2015-01-25|Ebiten 1.1.0 リリース|GopherJS (Chrome/Firefox のみ)|
|2015-08-19|Go 1.5 リリース||
|2016-02-17|Go 1.6 リリース||
|2016-02-28|Ebiten 1.2.0 リリース|ゲームパッド、オーディオ|
|2016-05-14|Ebiten 1.3.0 リリース|Windows、 Linux、 Ogg/Vorbis、 Wav|
|2016-08-15|Go 1.7 リリース||
|2016-09-03|Ebiten 1.4.0-rc1 リリース|Android、 iOS|
|2017-02-16|Go 1.8 リリース||
|2017-04-29|[償いの時計](http://blockbros.net/tsugunai/)リリース||
|2017-06-09|Ebiten 1.5.0 リリース|FreeBSD、 Safari|
|2017-08-24|Go 1.9 リリース||
|2018-02-03|Ebiten 1.6.0 リリース|MP3、 文字描画、フルスクリーン、 Edge?|
|2018-02-16|Go 1.10 リリース||
|2018-05-14|Ebiten 1.7.0 リリース|自動テクスチャアトラス|
|2018-08-24|Go 1.11 リリース|Wasm|
|2018-10-18|Ebiten 1.8.0 リリース|Wasm、 ポリゴン、マルチモニタ|
初心者でも安心。agora.io SDKでビデオ通話アプリの開発(WebRTC版)

#シンプルなビデオ通話の実装
利用SDK:AgoraVideoSDK for Web
SDKバージョン:3.1.2

##SDKの入手
[こちら](https://docs.agora.io/en/Agora%20Platform/downloads)からWebRTC用のSDKをダウンロードします。
サンプルコードも内包されています。
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/1bffe5eb-0bf8-c44d-e837-36791ad41044.png)

FireFoxやChromeであれば直接index.htmlをブラウザで開くと動作確認ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/bd5a6dd4-735a-390e-b593-901a469645e5.png)

###各種入力フォーム及びボタンの説明
App ID:ご利用のIDを入力します。
Channel:チャネル名を入力します。参加者同士が出会う為の部屋名のようなものです。
Host:自映像/音声を配信する場合はチェックします。
Join:チャネルに接続します。
Leave:チャネルから切断します。
Publish:自映像/音声を配信します。
Unpublish:自映像/音声を配信を停止します。チャネルには接続した状態です。

###コードの説明

クライアントの生成

```javascript:index.html
client = AgoraRTC.createClient({mode: 'live'});
```

クライアントの初期化

```javascript:index.html
client.init(appId.value, function () {
//中略
}, function (err) {
});
```

チャネルへの接続

```javascript:index.html
client.join(channel_key, channel.value, null, function(uid) {
//中略
}, function (err) {
});
```

ローカル映像の準備

```javascript:index.html
localStream = AgoraRTC.createStream({streamID: uid, audio: true, cameraId: camera, microphoneId: microphone, video: document.getElementById("video").checked, screen: false});
```

ローカル映像の再生と配信

```javascript:index.html
localStream.init(function() {
  localStream.play('agora_local');
  client.publish(localStream, function (err) {
  });
}, function (err) {
});
```
  
他拠点映像の再生

```javascript:index.html
client.on('stream-added', function (evt) {
  client.subscribe(stream, function (err) {
  });
});

client.on('stream-subscribed', function (evt) {
  var stream = evt.stream;
  if ($('div#video #agora_remote'+stream.getId()).length === 0) {
    $('div#video').append('<div id="agora_remote'+stream.getId()+'" style="float:left; width:810px;height:607px;display:inline-block;"></div>');
  }
  stream.play('agora_remote' + stream.getId());
});
```

必要最低限の実装はこれだけです。
サーバを用意する必要はなく、これだけのコード量で低遅延のビデオ通話アプリが構築可能です。

[関連リンク]
[クイックスタートガイドはありますか？](https://vcube-support.zendesk.com/hc/ja/articles/360034193232)
[agora.ioサンプルコードのリポジトリはどこにありますか？](https://vcube-support.zendesk.com/hc/ja/articles/360034562711)
[APIリファレンス、SDKはどこからダウンロードできますか？](https://vcube-support.zendesk.com/hc/ja/articles/360034192992)


#最後に
[**agora.ioに関するお問い合わせはこちらから**](https://hubs.ly/H0kB1_n0)
[<img width="912" alt="スクリーンショット 0001-08-15 13.41.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/5d815376-9b89-08fa-9434-6fa7e8e67bcf.png">](https://hubs.ly/H0kB1_n0)
アルゴリズムとデータ構造とは？

**アルゴリズム**と**データ構造**という言葉を聞いたことがありますか？
初めて見た時には、「難しそうな言葉だな」と思いましたが、これらはどんなプログラムにも出てきます。
まず、言葉の意味を解説します。

### ◎ アルゴリズムとデータ構造の定義
アルゴリズムの定義 「**コンピュータが処理を行う段取り**」
データ構造の定義 「**大量のデータを効率良く管理する仕組み**」

**＊「アルゴリズム」をカレーの作り方で例えてみると、、、**
カレーを作るには、**材料**と**調理の手順**を知っている必要アリ。
これをアルゴリズムとデータに当てはめると、
- 材料の名前とその量＝**データ**
- 調理の手順＝**アルゴリズム**

となる。
つまり、*[アルゴリズム] + [データ] ＝ [レシピ（調理手順と材料の名前と量）]*

**＊「データ構造」を郵便番号で例えてみると、、、**
郵便番号は、
- 1桁目：都道府県
- 2,3桁目:市町村
- 4桁目以降:地域

を表している。
このように、郵便番号は単なる**数字(データ)**を**管理する仕組み(データ構造)**になっている。


このように、アルゴリズムとデータ構造は日常生活にも隠れている。
プログラミングで言うと、
if文やwhile文：**アルゴリズム** の一種
配列やリスト：**データ構造** の一種
【GitHub】terminalを使った導入からpushまで【Mac】

# はじめに
terminalを使ったGitHubの導入からpushまで短くまとめたメモです。
忘れた時に参考にしてください。
用語や詳しい解説は他の記事を参考にしてください。

# 手順
準備
➡︎ローカルリポジトリの作成
➡︎ローカルリポジトリにpushさせたいファイルを追加(add)
➡︎ローカルリポジトリにpushさせたいファイルをコミット(commit)
➡︎ローカルリポジトリにリモートリポジトリとのインデックスを作成
➡︎リモートリポジトリにpush(必要があればbranchを指定)

# 準備

+ [GitHub](https://github.com/)のページに行きリポジトリを作っておく

プロフィール画面➡︎repositories➡︎緑色のNew➡︎必要事項を書き込んでURLを控える
URLは「 https://github.com/ユーザーのID/リポジトリのタイトル.git 」となっている。

+ 必要であればGitHub用のフォルダを作っておく

mkdir [dir]でフォルダ作成
mv [file] [dir]で移動

# 本番

##ローカルリポジトリの作成

```console
$ cd [pushしたいファイルがあるディレクトリ]
$ git init
```
##ローカルリポジトリにpushさせたいファイルを追加(add)

```console
$ git add [ファイル名]
```
ディレクトリ下全部のファイルをaddしたい場合は

```console
$ git add .
```
かなり楽だからよく使う

##ローカルリポジトリにpushさせたいファイルをコミット(commit)
```console
$ git commit -m "コメント"
```
##ローカルリポジトリにリモートリポジトリとのインデックスを作成
```console
$ git remote add origin [メモしたリポジトリのURL]
```
##リモートリポジトリにpush
```console
$ git push origin master
```
##リモートリポジトリにpush(branchを指定する場合)
pushしたい先のbranchに移動して

```console
$ git checkout [branch名]
```
branchを指定してpush

```console
$ git push origin [branch名]
```
以上で完了。

リポジトリ内のbranch一覧を知りたい場合は

```console
$ git branch
```
で存在するbranchが一覧表示される。
「＊」が付いているbranchがいまいるbranchになる。

#おまけ
##merge
取り込み先に移動して

```console
$ git checkout [取り込み先(masterが多い気がする)]
```
取り込みたいbranchを指定してmerge

```console
$ git merge [取り込みたいbranch名]
```
最後にデータをGitHubに送って終了

```console
$ git push origin [送信先(masterが多い気がする)]
```

#終わりに
細かい用語解説は抜きに、とにかくやり方のメモとして残しました。
間違いがあれば指摘していただければ幸いです。
Sigfox Devkit（開発キット）を1年間の無償回線で利用する

:::note warn
Sigfoxの無償回線提供は、2022年7月1日に終了しています。
:::

Sigfoxデバイスのうち、Arduino Shield for ArduinoやSigfox Breakout board、M5Stack COM.Sigfox等は、開発キット（Devkit）として、1年間の無償回線（トークン）で利用することができます。

#Devkit登録の方法
下記サイトからDevkit登録を行います。
https://buy.sigfox.com/
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/55cad955-95f5-c805-a2b4-1090e1b8fc21.png)

|既にSigfoxアカウントをお持ちの方|
|:---|
|上記ページ右上の**Login with Sigfox Id**からログインしてください。ログインすることにより、氏名や組織名の入力が不要になる他、既存アカウント上にデバイスを登録することができます。|

[**Activate my DevKit>**](https://buy.sigfox.com/activate)ボタンをクリックしてください。

##Sigfoxオペレータの選択
下記ページから、**Japan**を選択して、**[Next >]**ボタンをクリックしてください。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/f3176e12-d0ce-2240-6ca5-2b39bfbffc91.png)

##デバイス情報の入力
"Provide your DevKit's details for identification"のところには、お手持ちのデバイスのDevice IDとPACを入力してください。
"Tell us about your project"のところは、Devkitとして登録するデバイスの利用用途と、その詳細情報を入力してください。（ご自由に入力いただいて結構です）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/1373b778-6a6c-866b-f092-2e2c460fa1da.png)

##ユーザアカウント情報の入力
Sigfoxアカウント未登録の場合は、ユーザ情報を入力する必要があります。
Business Nameのところは、既に同名のグループ名がSigfoxクラウドに登録されている場合は、エラーとなります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/8cee738e-91eb-65ec-779d-cb700fb7dec5.png)

Devkit登録が成功すると、下図の画面になり、メールアドレス先に登録完了のメールが届きます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/e6e16996-ec1a-265e-528f-42e91df72e6c.png)

最後に、[SigfoxクラウドのDEVICE一覧](https://backend.sigfox.com/device/list)に新たなデバイスが登録されていることが確認できます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/172313/57184fe5-393a-04cb-9415-f564928080aa.png)

[Sigfox Japan KCCS](https://qiita.com/organizations/sigfox)