OmniAICreator/Qiita-1.07M huggingface dataset:
Homebrewでtelnetクライアントをインストールする方法

- 使っているOS : macOS Mojave バージョン10.14.4

# (しなくてもいいけど)事前準備をする
```bash
# アップデートしておく
$ brew update
Updated 2 taps (homebrew/core and homebrew/cask).
# <省略>
$ brew -v
Homebrew 2.1.1
Homebrew/homebrew-core (git revision 754e96; last commit 2019-04-15)
Homebrew/homebrew-cask (git revision 9e056; last commit 2019-04-15)

# Homebrewが元気かお医者さんに聞いておく
$ brew doctor
Your system is ready to brew.

# インストールしちゃってないか確認する
$ brew list | grep telnet
$
```

# (決まっていればしなくてもいいけど)インストールするものを確認しておく
```bash
# 探す
$ brew search telnet
==> Formulae
telnet                                   telnetd

# 情報を確認しておく
$ brew info telnet
telnet: stable 60 (bottled)
User interface to the TELNET protocol (built from macOS Sierra sources)
https://opensource.apple.com/
Conflicts with:
  inetutils (because both install 'telnet' binaries)
Not installed
From: https://github.com/Homebrew/homebrew-core/blob/master/Formula/telnet.rb
==> Requirements
Build: xcode ✔
==> Analytics
install: 41,507 (30 days), 127,724 (90 days), 499,049 (365 days)
install_on_request: 41,442 (30 days), 127,426 (90 days), 498,028 (365 days)
build_error: 0 (30 days)
```

# telnetをインストールする
`brew cleanup` を最近していなかったからかついでにやってくれた。

```bash
$ brew install telnet
==> Downloading https://homebrew.bintray.com/bottles/telnet-60.mojave.bottle.tar
######################################################################## 100.0%
==> Pouring telnet-60.mojave.bottle.tar.gz
🍺  /usr/local/Cellar/telnet/60: 4 files, 138.2KB
==> `brew cleanup` has not been run in 30 days, running now...
Removing: /Users/mana/Library/Caches/Homebrew/apr--1.6.5.mojave.bottle.tar.gz... (391.6KB)
# 省略
Pruned 0 symbolic links and 8 directories from /usr/local
```

# 確認してみる
```bash
$ which telnet
/usr/local/bin/telnet

# Gmailをしてみる
$ telnet smtp.gmail.com 25
Trying 2404:6800:4008:c03::6d...
Connected to gmail-smtp-msa.l.google.com.
Escape character is '^]'.
220 smtp.gmail.com ESMTP g5sm33686403pfo.53 - gsmtp
HELO hoge
250 smtp.gmail.com at your service
STARTTLS
220 2.0.0 Ready to start TLS
Connection closed by foreign host.
# Gmailは平文を送れません->telnetは平文しか送れません->telnetでGmailはできません。
```
rails aborted! StandardError: An error has occurred, this and all later migrations canceled:



初心者がrails tutorialでscaffoldでUserモデルを生成後、rails db:migrateを入力したときに遭遇したエラー処理について共有します。



```
mac-no-MacBookPro:toy_app mac$ ./qs rails db:migrate
Starting toy_app_db_1 ... done
== 20190413154520 CreateUsers: migrating ======================================
-- create_table(:users)
rails aborted!
StandardError: An error has occurred, this and all later migrations canceled:

PG::DuplicateTable: ERROR:  relation "users" already exists
: CREATE TABLE "users" ("id" bigserial primary key, "name" character varying, "email" character varying, "created_at" timestamp NOT NULL, "updated_at" timestamp NOT NULL)
```
migrateした後にusers tableが既に存在すると表示されました。
そこで

```
$ rails db:migrate:reset
$ rails db:migrate
```


resetのコード入力後、再度migrateを試みるも状況は変わらず。

最終的には下記のようにエディタから直接いじり、解決できました。DBのmigrateファイルの中の今回DBに反映させたかった部分を一度コメントアウト。


```
class CreateMicroposts < ActiveRecord::Migration[5.2]
  def change
    #create_table :microposts do |t|
      #t.text :content
      #t.integer :user_id

      #t.timestamps
    #end
  end
end
```

その後

```
$ rails db:migrate
```

そして、この後はコメントアウトした「＃」の文字を消します。

```
class CreateMicroposts < ActiveRecord::Migration[5.2]
  def change
    create_table :microposts do |t|
      t.text :content
      t.integer :user_id

      t.timestamps
    end
  end
end
```


そして最後に以下のコードを打ち込み、解決しました。

```
$ rails db:migrate:down VERSION= <該当のmigrateファイル名>
$ rails db:migrate
```
UnityのWebGLで外部JavaScriptライブラリを使う

#概要
UnityのWebGLプラットフォームで、FirebaseやStripeといった外部サービスのJavaScriptライブラリを使いたかったので、そのときに必要だった手順をまとめました。

#WebGLTemplatesの用意
[公式ページ](https://docs.unity3d.com/jp/current/Manual/webgl-templates.html)にあるように
Assets/WebGLTemplates/テンプレート名/ 
に以下のファイルを作成します。
使いたいライブラリも記述します。

```html:index.html
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | %UNITY_WEB_NAME%</title>
    <!--使いたいライブラリを追加-->
    <script src="%UNITY_WEBGL_LOADER_URL%"></script>
    <script>
    var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%");
    </script>
  </head>
  
  <body>
    <div id="gameContainer" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px; margin: auto"></div>
  </body>  
</html>
```

#C#←→JavaScriptの連携について
C#とブラウザのJavaScriptと連携する方法も[公式ページ](https://docs.unity3d.com/ja/current/Manual/webgl-interactingwithbrowserscripting.html
)にあります。
軽く手順説明します。

###C#→JavaScript
Assets/Plugins/
以下にこのようなファイルを作成します。

```js:test.jslib
mergeInto(LibraryManager.library, {
  Hello: function () {
    //外部ライブラリを使った処理
  },
});
```

そして以下のようなコードを書き、WebGLでビルドすると
C#からtest.jslibのHello関数を通して、外部ライブラリの処理呼ぶことができます。

```c#:NewBehaviourScript.cs
using UnityEngine;
using System.Runtime.InteropServices;

public class NewBehaviourScript : MonoBehaviour
{
    [DllImport("__Internal")]
    private static extern void Hello();

    void Start()
    {
        Hello();
    }
}
```

###JavaScript→C# 
話が脱線しますがこちらも
WebGLTemplatesのindex.htmlでこのように書きます。

```html:index.html
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Unity WebGL Player | %UNITY_WEB_NAME%</title>
    <script src="%UNITY_WEBGL_LOADER_URL%"></script>
    <script>
    var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%");
    gameInstance.SendMessage('MyGameObject', 'MyFunction', 5);
    </script>
  </head>
  
  <body>
    <div id="gameContainer" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px; margin: auto"></div>
  </body>  
</html>
```

公式ページに明記されてないと思いますが、以下のように書く必要がありました。

```js
    gameInstance.SendMessage('MyGameObject', 'MyFunction', 5)
```

#ちょっと工夫
jslibにコードを書いて動作確認をするには、毎回プロジェクトをビルドする必要があります。(よね？)
結構時間がかかって大変だったので、私はWebGLTemplatesにJavaScriptファイルを作成して
ビルド後に一緒に吐き出されるそのファイルを編集して確認していました。

また、index.htmlにボタンを追加し、jslibからは実行せずに、そのボタンによってJavaScriptの処理が実行されるようにしました
#####動作的には
1. シーンに応じてC#→jslibでボタンを有効化無効化　(タイトル画面でログインボタンを有効にするとか)
2. ボタンでJavaScriptを実行
3. JavaScriptの処理結果をC#に渡す

という感じです。

#記事を書いたときの環境
Unity 2018 3.8f1
Nuxt.jsでどうしても直接DOMを操作したい

## 背景
**大前提として、DOMを直接操作する前にまず打てる手を色々と考えていただきたいです**:pray: 

さて、Nuxt.jsを使っていて、どうしてもDOMを直接操作したい場合があります。
たとえば、ページ遷移直後に、遷移先の内部リンク( `/hoge#id` )に自動でスクロールしたい場合などが考えられます。
このような場合、ライフサイクルイベントと直接DOM操作を駆使して動かす以外に方法がないのでは？と思い、実際にやってみました。

## tl;dr
mountedとnextTickを使います。

mountedはスクロールするためにDOMの操作が必要になるので使用します。
ただし、mountedは子コンポーネントのマウントを保証しないので、nextTickを使い、レンダリングが終わるまで(操作対象のDOMがあることを保証して)コールバック関数を実行しないようにすることが重要です。

もし内部リンクとなるidを指定したコンポーネント内からさらにコンポーネントを呼び出している場合は、子コンポーネントの中でmountedとnextTickを使ってください。

## 動かしてみる
記法はvue-class-componentに従っているのでよしなに脳内変換をお願いします :bow: 

```test.vue
<template>
　<div id="id">
　　<p>Please scroll</p>
　</div>
</template>

<script lang="ts">
import { Component } from "vue-property-decorator";
 
@Component
export default class Child extends Vue {
  private mounted() {
    this.$nextTick(function() {
      const element = document.getElementById('id')
      if (!element) {
		return
	  }
      // elementの位置座標を取得
	  const rect = element.getBoundingClientRect()
	  window.scrollTo(rect.left, rect.top)
    })
  }
}
</script>

<style>
</style>
```
内部リンクとなるidがない場合はスクロールはせず終了します。

## さらに
上記のままだと、決まったidにしか反応できないので、以下のようにすれば内部リンクが増えたときも便利です。

```test.vue
<template>
　<div id="id">
   <p>Please scroll</p>
  </div>
</template>

<script lang="ts">
import { Component } from "vue-property-decorator";
 
@Component
export default class Child extends Vue {
  private mounted() {
    this.$nextTick(function() {
      // url内のhash(#id)を取得する
      const hash = this.$route.hash
      if (hash.length === 0) {
        return
      }
      // hash.slice(1)でhashから「#」を取り除いておく
      const element = document.getElementById(hash.slice(1))
      if (!element) {
		return
	  }
	  const rect = element.getBoundingClientRect()
	  window.scrollTo(rect.left, rect.top)
    })
  }
}
</script>

<style>
</style>
```
vue-routerの`$route.hash`を使えばurl内にあるhashを取得してくれるので、hashの動的な変更に合わせて内部リンクへのスクロールが可能です。

## 最後に
しつこいようですが、直接DOMを操作する前になにかできることはないか考えてみるのがベストだと思います。少しでもお役に立てれば幸いです :relaxed:
Stanによる統計モデリングの勉強－①

# 目的
[StanとRでベイズ統計モデリング](https://www.amazon.co.jp/dp/B07M8LWLS1/)の勉強用のノート。
勉強した内容を中心に、ポイントをノートしていく

# 統計モデリングの手順
まず、Chapter3 で気になる点をノートしておく

- 解析の目的
- データ分布の確認
- メカニズムの想像
- モデル式の記述
- Rでシミュレーション
- Stanで実装
    - パラメータ推定
- 推定結果の解釈
    - 推定結果、確信区間などをもとに解釈、図を描く
- 図によるモデルのチェック
    - モデルが当てはまっているかを確認

## 定石
複雑なモデルを扱うと、MCMCが収束しない、最尤推定がうまくいかない、などの問題が起きる。
このような問題を避けるために、シンプルなモデルから試すことが定石。

- まずは簡単なモデルを使う
- 説明変数が多数ある場合には、数を絞る
- 確率変数は独立と考える（極力、多変量正規分布などを使わない）
- グループ差、個人差などは、最初は考慮しない

## 再現性のチェック
再現性とは、同じ手順に従う限り、だれがいつどこで実行しても結果が再現できる（同じ結果になる）ことを指す。
これは、昨今(2019/3現在)話題の、GAN系のモデルや深層強化学習でも、問題になっている性質ですね。

再現性は、頑健性とも関連している。

具体的には、以下のようなことをチェックするとよい。（１つの例）
- データを数点除いたり、確率モデルや事前分布をわずかに変えても、推定結果が大きく変わらない
- 異なるデータセットでも同じような結果になるか
- ソフト、アルゴリズムを変えても同じ結果になるか
    - ex. WinBUGS、JAGS、Stan と同等の結果が得られるか
- 初期値・乱数を変えても同じ推定結果になるか
    - ただし、アルゴリズムが初期値、乱数に依存する場合

# モデルの記述方法
グラフィカルモデルを使う。

# モデル選択
情報量基準（AIC, BIC, WAIC, WBIC）などを使ってモデル選択することが多い（らしい）。

モデル選択目的では、AIC, BIC を使う理論的妥当性はないらしく、
WAIC, WBIC を使うことが推奨されるとのこと。

情報量基準を使ったモデル選択でも、かならずしもよいモデルが得られるわけではない。（過学習を回避することは、容易ではないため。）

また、情報量基準に頼るがあまり、モデルの探索をおろそかにすることがある点にも注意が必要。

当記事の元書籍では、情報量基準を使うモデル選択の議論をしない、とのこと。
SPA で右クリックや shift + クリックなどによる別窓表示に対応させる

# 経緯

```jsx
import useReactRouter from 'use-react-router'
import { myAction } from './myAction'

export const Link = ({ href, children }) => {
  const { history } = useReactRouter()

  const onClick = e => {
    myAction(href)
    // もし中クリックや ctrl + click だったらここで return しないといけない
    // if (isMiddleClick(e)) return
    history.push(href)
    e.preventDefault()
    return false
  }

  const _href = `#${href}`

  return (
    <a href={_href} onClick={onClick}>
      {children}
    </a>
  )
}
```

上記のようなソースコードを書くと Mac の Meta + click や windows の ctrl + click を押した際に
別のタブで表示されるのではなく現在のタブで `history.push(href)` が実行される。
ただのクリックと中クリックや ctrl + click を区別して対応を変える必要がある。

# 各種ライブラリがどのように区別しているか

ライブラリによって
ただのクリックと中クリックや ctrl + click を区別するために
チェックしている項目が多少異なるようです。
__良い感じに組み合わせてキミの最強の `onClick` を作ろう！！！！！__

## `gatsbyjs` の対応

[gatsby/packages/gatsby-link/src/index.js#L137](https://github.com/gatsbyjs/gatsby/tree/4f0078e6713b20314554dc75eb34e29cad1d3008/packages/gatsby-link/src/index.js#L137)

#### チェック項目 (一部

- `e.button !== 0` // メインボタン以外が押された
- `e.defaultPrevented` // すでに defaultPrevent されたイベント
- `e.metaKey` // metaKey が一緒に押された
- `e.altKey`
- `e.ctrlKey`
- `e.shiftKey`

## `next.js` の対応

[next.js/packages/next/client/link.js#L60](https://github.com/zeit/next.js/blob/cedd9b03f5843c6a9015f5856a4e91012d78966f/packages/next/client/link.js#L60)

#### チェック項目 (一部

- `nodeName === 'A'` // クリックされたのが Anchor タグ
- `e.nativeEvent.which === 2` // 中央ボタンがクリックされた
- `!isLocal(href)` // 外部へのリンクが押された

## `react router` の対応

[react-router/packages/react-router-dom/modules/Link.js#L15](https://github.com/ReactTraining/react-router/blob/ea8eba843bf899daf8a51c2617d05c179b38369d/packages/react-router-dom/modules/Link.js#L15)

#### チェック項目 (一部

- `(!this.props.target || this.props.target === "_self")` // target が指定されていた
- `!isModifiedEvent(event)` // metaKey などが一緒に押された
Phoenix Framework を導入


# Elixirのインストール
公式ページのインストールガイドから
環境に合わせてインストールしてください。

https://elixir-lang.org/install.html


# MIX
Rakeのようなツール
Elixirをインストールすると、一緒にインストールされる。
mixを使ってPhoenix FrameworkなどElixirの環境を構築する。

https://elixirschool.com/ja/lessons/basics/mix/


# HEX
RubyGemsのようなElixir,Erlang 向けのパッケージ管理ツール
mixだけではパッケージ管理してくれない、最初はインストールされていないので、
mixでhexをインストールする。

**インストール**

```shell
mix local.hex
```

**バージョン確認**

```shell
mix hex.info
```

Elixirに導入するパッケージとバージョンなどは下のページで探す。
**HEX**　https://hex.pm/


**初めてPhoenix Frameworkを動かすだけなら、下の作業は不要です。**
今後、パッケージを追加する場合などに必要になります。

パッケージを追加する場合は ```mix.ex```に追加する。

```mix.ex
defp deps do
    [
      {:phoenix, "~> 1.4.3"},
      {:phoenix_pubsub, "~> 1.1"},
      {:phoenix_ecto, "~> 4.0"},
      {:ecto_sql, "~> 3.1"},
      {:postgrex, "~> 0.14.2"},
      {:phoenix_html, "~> 2.13"},
      {:phoenix_live_reload, "~> 1.2", only: :dev},
      {:gettext, "~> 0.16.1"},
      {:jason, "~> 1.1"},
      {:plug_cowboy, "~> 2.0"},
    ]
  end
```
追加されているパッケージとバージョンは ```mix.lock``` ファイルで確認できる。

パッケージの指定方法はhexから取得するだけでなく、gitリポジトリ、ローカルパスの指定も可能です。

```elixir
{:gettext, git: "https://github.com/elixir-lang/gettext.git", tag: "0.1"}
{:local_dependency, path: "path/to/local_dependency"}
```

指定方法の詳細はリファレンスを参照。
https://hexdocs.pm/mix/Mix.Tasks.Deps.html



下のコマンドでパッケージを取得してプロジェクトへ追加します。

```shell
mix deps.get
```

対話シェルでパッケージの動作確認をしたい場合などは下のコマンドで
```mix.ex```の依存関係・環境でiexが起動します。

```shell
iex -S mix
```

# Phoenix Framework
下のコマンドでインストールする。

```shell
mix archive.install hex phx_new バージョン
```

例　1.5.5を導入する場合

```shell
mix archive.install hex phx_new 1.5.5
```

**HEX**　https://hex.pm/packages/phx_new

Phoenix Frameworkで使用されているライブラリなど・・・・
　**CowBoy**　Phoenix Frameworkで使用されているWebサーバー
　**Ecto** データベースを操作するためのライブラリ


# 新規プロジェクト作成

```shell
mix phx.new ディレクトリ名
```

※ディレクトリが無かったら自動で作成してくれます。
例　相対パスでの指定も可能

```shell
mix phx.new ./project/hello
```

# プロジェクト実行
プロジェクトのディレクトリへ移動して、下のコマンドを実行します。

```shell
 mix phx.server
```

# エラーが出力される場合

inotify-toolsをインストールする

```shell
sudo apt install inotify-tools
```

nodeをインストールする

```shell
sudo apt install -y nodejs npm
cd assets
npm install
```

データベースのエラーが出力される場合、
[Phoenix Frameworkでデータベースを使う]
(https://qiita.com/shio1997/items/2077242ae807c82ba9d9)
を実施すると解消する。
laradockでLaravelの環境構築をしてみる(Mac)


ローカル環境はLaradockを利用して開発します。
最終的には以下のような構成になります。

```
/(任意の名前)
|-- laradock
|-- laravel
```

## 1.Dockerをインストールする
[Dockerのインストール](https://docs.docker.com/docker-for-mac/)

## 2.Laradockの入手
```
$ mkdir 任意のディレクトリ
$ cd 任意のディレクトリ
$ git clone https://github.com/LaraDock/laradock.git
$ cd laradock
```

## 3.laradockの設定ファイルの編集
最初にenv.exampleファイルをコピーして.envファイルを作成します。この.envファイルに環境構築時の設定情報を書き込んでいく。

```
$ cp env-example .env
```

DATAの保存する場所を変更する。標準の設定だとルートディレクトリの配下にファイルが永続化されている。
任意のディレクトリ配下のlaradockディレクトリにファイルを保存するように変更します。

```
# .env
# Choose storage path on your machine. For all storage systems 

- DATA_PATH_HOST=~/.laradock/data
+ DATA_PATH_HOST=.laradock/data
```

続いて、MYSQLの設定をしていく。

```
# .env
### MYSQL #################################################
MYSQL_VERSION=5.7 # versionを固定
MYSQL_DATABASE=homestead1 #データベース名を変更
MYSQL_USER=homestead1　#ユーザー名を変更
MYSQL_PASSWORD=hogehoge #パスワードを変更
MYSQL_PORT=3306
MYSQL_ROOT_PASSWORD=root
MYSQL_ENTRYPOINT_INITDB=./mysql/docker-entrypoint-initdb.d
```

## 4.Dockerコンテナを起動する。
```
$ docker-compose up -d nginx mysql phpmyadmin
```

## 5.composerをインストールする
laradockのディレクトリ内に移動して、workspaceのbashにログインする

```
$ docker-compose exec --user=laradock workspace bash
$ cd training-laravel
$ composer install
```

## 6 laravelの.envの編集
laravelの.envに以下を貼り付ける

```
APP_NAME=Laravel
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL=http://localhost
    
LOG_CHANNEL=stack
    
DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=homestead1
DB_USERNAME=homestead1
DB_PASSWORD=hogehoge
    
BROADCAST_DRIVER=log
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120
    
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379
    
MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
    
AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
    
PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=mt1
    
MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
```

## 7.APP_KEYの生成と初回のマイグレーションを実行
```
$ docker-compose exec workspace php artisan migrate
$ docker-compose exec workspace php artisan key:generate
```
いまさらAdobe AIRアプリをAndroidへ移植

特殊な業界向けということもあり、これまで会社レベルでAndroidに縁無かったんですが、この度動かすことになり、ちょっと躓いたのでメモ。

#バックグラウンドでも低FPSで動作し続ける
いや、これホントビックリしましたね……。**メニュー画面戻っても音流れ続けてるんですもん。**:sweat_smile: これがAndroidの仕様とは……。結論から言うと**自前でアプリ内の停止・復旧処理を書く必要がある**んですが、アプリの性質＆元の設計＆変更コストからNativeApplication.exit();で逃げました。:scream: 正味ここAIR側で簡単に一括処理できるようにしてほしかったというのは（ry

#SWC埋め込んでると、起動が異常に遅くなる
これホントどハマリしましたねぇ……。具体的な症状としては**20秒ぐらいブラックスクリーン状態が続いた後にようやく起動する**感じですね。デスクトップやiOSだとプログレスバーいらないレベルの軽量アプリで用意してないし、AIR for Androidではスプラッシュスクリーン設定できないし、どうしたものかと。
これに対してはSWCを埋め込んだ本体ファイルを直接APK化するのではなく、**プリローダー用のflaファイルを用意してそちらをAPK化し、SWCを埋め込んだ本体ファイルを読み込む**という形に変えるだけで**何故か爆速になる:rolling_eyes:**んで、これが手っ取り早いかと。早くなる道理が無いと最初スルーしてたんですが、後から試しにやったら本当に早くなって吹きました。おそらくは起動処理とSWCの読み込みがバッティングしてるんだと思うんですが……。

#参考
[It is too long time to load swc files (only Android)](https://forums.adobe.com/message/10988455)
Pythonを導入しよう インストールまで

[HackerRank](<https://www.hackerrank.com/>)に挑戦しようと思いましたが、使用できるコードの中で使ったことがあるのがJavaScriptとPHPしかありませんでした。
そのため、この際だからPythonを覚えてHackerRankで使おうと思い立ったので、その際に行ったPythonをインストールするまでの流れを記載します。

なお、今回は**Windows**で**Python3**の構築をする際のインストール方法を紹介するので、Python2を構築したい方や(これからPythonをしようと考えている方はPython2だと2020年以降サポートがされなくなるのでPython3から始めた方がいいかもしれません)Macの場合は異なりますので注意してください。
# Pythonをダウンロードする
まずは、Pythonの公式サイトに行きます。Pythonの公式サイトは[こちら](<https://www.python.org/>)。

その後、「**Downloads**」ボタンを押したら下に「**Looking for a specific release?**」の下にある「**Release version**」から使いたいバージョンを選んでください。
特別な事情がない限りは一番新しいバージョンでいいでしょう。(ちなみに、2019/04/15の段階では3.7.3が一番新しいバージョンです)

その後、「**Files**」の下にある「**Version**」から、64bit型のWindowsの場合は「**Windows x86-64 executable installer**」32bit型のWindowsの場合は「**Windows x86 executable installer**」を選択してください。
自分のPCのbitが分からない方で、Windows10の方は[こちら](<https://pc-karuma.net/windows10-32bit-64bit-check/>)、vistaや7の方は[こちら](<https://support.microsoft.com/ja-jp/help/958406>)で調べてください。

# パッケージをインストールしたら

ここまで行えば後は簡単です。
**Add Python 3.x to PATH**(xの部分は入れたバージョンによって違います)は、追加しておいた方が後々便利なのでチェックしましょう。
その後、カスタマイズしたい場合は**Customize installation**を、特にいじらないなら**Install now**をクリックしてインストールを開始させてインストールは完了です。

# 最後に

ここまでできれば後は[Pythonのチュートリアル](<https://docs.python.org/ja/3/tutorial/index.html>)を見てコマンドラインで動かしたり、[Progate](<https://prog-8.com/languages/python>)さんを利用したりしてPythonを動かせるようになってPythonライフを過ごしましょう！~~私はまだ2日しかPythonしてないけど~~
R-CNN,Fast R-CNN, Faster R-CNNについて

今回はタイトルの通り、R-CNN,Fast R-CNN, Faster R-CNNについて何が違うのかを書いていきます。というのも、筆者がよく忘れてしまうからです・・・

#R-CNNとは
R-CNNとはregion with CNN features の略で、CNNを利用した物体検出の手法です。CNNって何？物体検出とは？の方は別の記事をご参照ください。

R-CNNの流れとしてまず物体領域候補を抽出します。R-CNNでは選択的検索法を利用し、これにより複数の物体領域候補を抽出します。

次に抽出された物体領域候補内をCNNにかけ、そのCNNの中間層から得られる特徴を線形SVM（分類器）に入力することで、その物体が何なのかを予測します。つまりここは、普通にCNNで画像を分類するのと同じようなかたちになります。

次に、不要なバウンディングボックスを排除します。また、CNNから得られる特徴からバウンディングボックスのパラメータへの回帰を行います。これは分類されるクラスごとに学習されます。なので例えばそのクラスが人であれば、縦長のバウンディングボックスなのではないかというような回帰モデルができるかもしれません。　

#Fast R-CNNとは

Fast R-CNNとは、R -CNNより少し早いものです。
何が違くて早いかというと、
R-CNNでは物体領域候補をトリミングしてそれを一枚の画像としてCNNにかけ、特徴を分類していたようなかたちになるところを、
Faster R-CNNでは入力画像全体の特徴マップを作りそれを活用するという点です。


R-CNNでは物体領域候補を抽出しそれをCNNにかける際、CNNの入力層の大きさは決まっているため、その物体領域候補の画像が全て同じ大きさに統一された上でそれぞれの特徴が出しますが、
Fast R-CNNでは全体の特徴マップから物体領域候補の部分を切り取ることになるため、物体領域候補の大きさにより次元数は異なってしまいます。

そこで、異なる次元数を一定の大きさに統一するために
RoIプーリング層が必要となります。

またFast R-CNNではクラス認識とバウンディングボックスへの回帰を同時に学習されるために、マルチタスク損失を最適化することで、ネットワークのパラメータを求めます。

#Faster R-CNNについて
Faster R-CNN は、Fast R-CNN よりさらに早い手法です。
Faster R-CNNは、物体領域候補を抽出する際、選択的検索法ではなく、特徴マップから物体領域候補を抽出するRPN(領域提案ネットワーク）を利用することにより高速化します。
このRPNはバウンディングボックスを予測する回帰ネットワークと物体の有無を予測する分類ネットワークの２つを統合することにより実現されています。

回帰ネットワークではあらかじめk個のアンカーと呼ばれる、局所領域を中心とした標準的なバウンディンボックスを使うことにより実現します。局所領域はスライディングウィンドウにより生成されます。

物体領域候補の抽出の後はFast R-CNNと同じです。

#参考資料
原田達也(2017)「画像認識（機械学習プロフェッショナルシリーズ）」


こちらの本は大変わかりやすく、オススメです！
#あとがき
Qiitaに慣れておらず、文章の書き方等々雑なのでまた書き直すかもしれません。

また、記事を読んでいただきありがとうございます！！(,,> <,,)

編集リクエストもお待ちしております。
Nginx Unit のインストール

やってみたのでメモ

# 手順
1. リポジトリ情報を登録する

    ```
    # vi /etc/yum.repos.d/unit.repo
    ```
    
    ```unit.repo
    [unit]
    name=unit repo
    baseurl=https://packages.nginx.org/unit/centos/$releasever/$basearch/
    gpgcheck=0
    enabled=1
    ```

2. ベースのソフトウェアをインストールする

    ```
    # yum install unit
    ```

3. 追加のソフトウェアをインストールする

    ```
    # yum install unit-devel unit-go unit-jsc8 unit-php unit-perl unit-python
    ```

# 参考
- [公式ドキュメント - Installation - CentOS](https://unit.nginx.org/installation/#centos)
実行可能jarを作るときにjarを解凍したくない（が結局する）

#未完成

#課題

実行可能jarを作る際に、依存jarを解凍して、jar直下に組み込んでいる。
このため、依存ライブラリが多いほど、解凍時間が莫大となる。

依存jarをそのままjar直下に組み入れ、それをクラスパスに追加する形で起動したい。

#StackOverflowの回答

https://stackoverflow.com/questions/12357136/reference-jars-inside-a-jar
上記で引用されている公式リンク
https://docs.oracle.com/javase/tutorial/deployment/jar/downman.html

どうやら、jar内のjarをクラスパスへ追加する方法は提供されていないようにみえる。
カスタムコードを記述し、実現せよとのことらしい。

#現状

gradleを用いれば、1jarにプロダクトソースと依存jarを集約することは可能である。
（が使えるとは言っていない）

#どうするか

・めんどいので解凍、組み込みの現状実装を利用する
　実行可能Jarとして1ファイルで提供する場合はこれ

・よく見られるlibフォルダに依存jarを集約して、Manifestで読み込む
　自分用にはこれ。

・jar内にjar組み込み、main内に内包jarをクラスパスへ追加処理を組み込む
　やらない
Windows10にてGPU版OpenPoseを動かしてみた 

windows環境にて、OpenPoseのオープンソース実行環境を作る機会があったのでメモします.

[環境]
　・Windows10
　・GTX1060(6GB)
　・CUDA10.0
　・cuDNN

1.Visualstudio2017インストール
　①下記URLより、"Visual studio community 2017"をダウンロード.　※Microsoftアカウントが必要です
　　「https://my.visualstudio.com/Downloads?q=visual%20studio%202017&wt.mc_id=o~msft~vscom~older-downloads」
　②上記にてダウンロードしたものを実行し、インストール.
　　"C++によるデスクトップ開発"にチェックを入れ、"WindowsSDK"と"C++"が項目に含まれている確認する.
![111.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396218/5186f826-0c9f-0221-b885-d80008adea59.png)



2.CUDAインストール
　①"https://developer.nvidia.com/cuda-10.0-download-archive"から対応のものをダウンロード.
　②上記にてダウンロードじたものを実行し、インストール.
　③再起動.

3.cuDNNインストール
　①"https://developer.nvidia.com/cudnn"からCUDA10.0に対応したものをダウンロードする.
　②展開し、解凍のされた"CUDA"フォルダ以下の"bin"など全てを"CUDAのインストール先"
　 "C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v10.0"にコピーする.
　③コマンドプロンプトにて"nvcc -V"が以下のように表示されればOK.

```:cuDNNのインストール確認
nvcc -V
nvcc: NVIDIA (R) Cuda compiler driver
Copyright (c) 2005-2018 NVIDIA Corporation
Built on Sat_Aug_25_21:08:04_Central_Daylight_Time_2018
Cuda compilation tools, release 10.0, V10.0.130
```

ここまでで最低限の準備完了です.
次からは、OpenPoseの動作について.

1.OpenPoseの準備
　①"https://github.com/CMU-Perceptual-Computing-Lab/openpose/releases"から
 　 GPUバージョン(openpose-1.4.0-win64-gpu-binaries_recommended.zip)をダウンロード.
　②上記のファイルを展開し、"openpose-1.4.0-win64-gpu-binaries\models\getModels"を実行し、
　　学習済モデルを取得する.

2.Sampleの実行

```:Sampleの実行
①OpenPose展開フォルダにて、コマンドプロンプトを開き以下のコマンドを実行.
　".\bin\OpenPoseDemo.exe --video examples\media\video.avi"
```
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396218/7346a006-c401-6cb9-95c5-8294456884f2.png)

3.カメラにてOpenPose
　下記のようにオプション付けないことです.

```:カメラでの実行
　".\bin\OpenPoseDemo.exe"
```

LinuxもWindowsもGPU環境作る手順は同じですので、片方の方法を理解してしまえばOK.
私は、WindowsよりもLinux環境のほうが使いやすいので、記事としてはLinuxがメインになります.
感想：現場の「ズレ」を解消するコミュニケーションメソッド


##購入きっかけ
・私が本をだしたサークルのご近所さん
・１on１知ってたけど効果をあまり得れなかったと感じたから
・もっと対面で人とうまくコミュニケーションとれぬものかね・・・
・「かくいう私もマネージャーでね」
###本書の特徴
まず、読者の共通認識をつくるために「ズレ」ってなんぞや？って話から入り、
現場で絶対１回は見ている（経験している）コミュニケーションエラーが出てきます。

最初の方に本の構成が書いてあるのですが、各章”困りごと”から入っているのがポイントです。一般的な本は”〜〜というケース”はどうか？と問題提起から入ってしまいがちです。そうすると、読んでいる方は、「あ、これは違うや」と読む前に諦めてしまう傾向があります。

しかし、**本書は困りごと→エピソード**という独自のスタイルで、読者の心を**ぐっと**引き寄せに来ます。この構成や読者の心に寄り添う文章力が**尾澤流**だと感じました。

読み続けると、確認リストと解説項目にたどり着き、
最終的にはコラムから、他の本へとリンクがされるようになっています。

###本書のポイント
この本は、現場でのズレを様々なケースで解説、解決方法を導いています。
読んだからハイ終わりー！ではなく、
職場の本棚や、自分の袖机の中にこっそり忍ばせ、
「お、いまはこのケースだな、ふむふむ。」といった感じで字引として活用することをおすすめします！

とくに、私はプロッジェクトごとに毎度違う組織に異動していたので、
P３１「組織」にはいっていくのに何が必要？　のコラムは「あーたしかに、そういう苦労あったなぁ〜」と共感しました。
また、これって自分だけ感じていることじゃないんだなぁ〜と・・・

###お求め先
https://booth.pm/ja/items/1314405
[Unity] Post Processing Stack v1で MinAttribute のエラーが出るようになった時の対処

Post Processing Stack をUnity2018.3以降でビルドすると、以下のエラーが出るようになりました。

```
Assets\PostProcessing\Editor\PropertyDrawers\MinDrawer.cs(6,34): error CS0104: 'MinAttribute' is an ambiguous reference between 'UnityEngine.PostProcessing.MinAttribute' and 'UnityEngine.MinAttribute'
```

MinDrawer.cs 内の MinAttribute を UnityEngine.PostProcessing.MinAttribute に変更することでエラーを回避できます。

```MinDrawer.cs
using UnityEngine;
using UnityEngine.PostProcessing;

namespace UnityEditor.PostProcessing
{
    [CustomPropertyDrawer(typeof(UnityEngine.PostProcessing.MinAttribute))]
    sealed class MinDrawer : PropertyDrawer
    {
        public override void OnGUI(Rect position, SerializedProperty property, GUIContent label)
        {
            UnityEngine.PostProcessing.MinAttribute attribute = (UnityEngine.PostProcessing.MinAttribute)base.attribute;

            if (property.propertyType == SerializedPropertyType.Integer)
            {
                int v = EditorGUI.IntField(position, label, property.intValue);
                property.intValue = (int)Mathf.Max(v, attribute.min);
            }
            else if (property.propertyType == SerializedPropertyType.Float)
            {
                float v = EditorGUI.FloatField(position, label, property.floatValue);
                property.floatValue = Mathf.Max(v, attribute.min);
            }
            else
            {
                EditorGUI.LabelField(position, label.text, "Use Min with float or int.");
            }
        }
    }
}

```

ただ、現在はPostProcessingStack2.xがあるので、新しくプロジェクトをつくるのであれば[そちら](https://qiita.com/ELIXIR/items/ff4d9a52eae201db9ba6)を使用したほうが良いでしょう。

Post Processing Stack will be obsolete.
URLResposne.allHeaderFieldsでレスポンスヘッダーの値を取得しようとしたらつまずいた

# 環境
xcode10.1
iOS12.1
Swift4.2

# まえがき
商品の検索結果をTableViewで表示する際にページングを行いたく、レスポンスヘッダーに含まれる
`X-Total-Pages`の値を取得していろいろ使おうとしていた。
https://developer.apple.com/documentation/foundation/httpurlresponse/1417930-allheaderfields
でレスポンスヘッダーが取得できるらしい。

```swift:api.swift(APIKit使用)
func response(from object: Any, urlResponse: HTTPURLResponse) throws -> Response {
  // 検索結果がない場合は0が入るため、forced unwrappingにしていた
  let totalPages =  urlResponse.allHeaderFields["X-Total-Pages"] as! String
}
```

といった実装をしていて、しばらく問題がなかったが、ある日リリースビルドしたアプリをTestFlight上で確認したところ、検索を行った際にクラッシュしていて、原因を調べてみたらこの箇所が`nil`になっていた。

レスポンスを確認してみても0またはそれ以上の値が入っているし、サーバー担当に確認してみても、ここが空になることはないという。

# 原因1: サーバーのレスポンスヘッダーに含まれているキーが小文字になっていた
リリースビルドの方
`x-total-pages  64`
開発の方
`X-Total-Pages  64`

そのため

```swift:api.swift(APIKit使用)
func response(from object: Any, urlResponse: HTTPURLResponse) throws -> Response {
  // "X-Total-Pages"というキーがないためリリースビルドではnilになっていた
  let totalPages =  urlResponse.allHeaderFields["X-Total-Pages"] as! String
}
```

自分が調べたところによると、ネットワークによっては小文字を返す場合がある(らしい)、サーバーのバージョン違い、アプリのバージョン違いなど考えられるそうです。
調べた分だとバージョン違いに関してはなさそうでした。
なぜ小文字になったのか、原因が特定できていないため、ご存知の方がいたら教えていただけるとありがたいです。

# 原因2: Swiftのバグ (仕様？)
大文字小文字の違いで値が取得できずnilになったとは言いましたが、
前提として、HTTPHeaderは大文字小文字を区別しないはずです。

これはドキュメントの
https://developer.apple.com/documentation/foundation/httpurlresponse/1417930-allheaderfields
にも書かれています。
> (google翻訳したやつ)この辞書のキーは、サーバーから受け取ったヘッダーフィールド名です。一般的に使用されているHTTPヘッダーフィールドのリストについては、RFC 2616を参照してください。
HTTPヘッダーは大文字と小文字を区別しません。コードを単純化するために、特定のヘッダーフィールド名は標準形式に正規化されています。たとえば、サーバーがcontent-lengthヘッダーを送信すると、自動的にに調整されますContent-Length。

とドキュメントにも書かれていますが、実際allheaderfieldsは大文字小文字を区別してしまっています。
これはSwiftのバグ(仕様？)で、ドキュメントも更新されずそのままのようです。
https://bugs.swift.org/browse/SR-2429

2016年ごろからあるらしいですね。

# 対策
URLResponseにすべて小文字として取得できるものをはやしました。

```swift:
// https://stackoverflow.com/questions/40152483/httpurlresponse-allheaderfields-swift-3-capitalisation/40152676#40152676
extension HTTPURLResponse {
    func find(header: String) -> String? {
        let keyValues = allHeaderFields.map { (String(describing: $0.key).lowercased(), String(describing: $0.value)) }
        if let headerValue = keyValues.filter({ $0.0 == header.lowercased() }).first {
            return headerValue.1
        }
        return nil
    }
}

// usage 存在しない場合nilが入るのでよしなに処理する
let total = urlResponse.find(header: "X-Total-Pages") 
```

という暫定的な対策をとりました。

間違っていたり、原因が違っていた場合は教えてもらえるとありがたいです。
AWSでデータ分析環境を構築する

自分用の備忘メモになります。
AWSのサービスの中には、機械学習向けにSagemakerがありますが、EC2インスタンスを用いて地道に分析環境構築してみようとチャレンジしてみました。
Sagemakerを利用するより、価格がお手軽になるのではないかと期待しています。

１．EC2インスタンスのGPUの制限解除申請
GPUを利用する際には、利用申請が必要になります。利用申請は、日本語で大丈夫です。日本のAWSで申請受付されてから、US本国のAWSでチェックされます。
私が実際に2019年3月末に行った際は、申請から承認まで3日間（営業日）でした。日本側は即USへ申請した旨の返事あり。そこからUSの承認まで数日かかりました。
なお、GCPでは使用申請はないものの、無料枠を消化しないとGPUの使用制限解除にならないことがわかりました。

２．ubuntu 1604 のリモートデスクトップ接続環境の構築
GPUを用いて分析を行うには、CUDA、Anaconda、Chainer等々のPythonライブラリ等のインストールと設定が必要になります。AWSの場合、AMIといってあらかじめ必要なツールを用意してくれるセットがあります。
（利用目的によって、OSをwindowsにしたり、SQLが用意されていたり等々）
2019年4月時点、Ubuntuで、データ分析、深層学習を行うAMIは、Ubuntuバージョンは、16.04になります。Ubuntu 16.04のインスタンスに対して、自分のPCからWINDOWS10を用いて、リモートデスクトップ接続実行したい場合は、下記対応が必要になります。
https://aws.amazon.com/jp/premiumsupport/knowledge-center/connect-to-ubuntu-1604-windows/

３．ブラウザツールのインストール
anaconda navigatorを用い、JupyterNotebookを起動する場合は、ブラウザツールのインストールが必要になります。今回は、Firefoxをインストールしました。
Firefoxのインストール方法は下記URLになります。
https://qiita.com/rokusyou/items/8089b7495119b7c8e29b

４．日本語化対応
英語でUbuntu環境が作成されていますので、下記URLで日本語対応いたしました。
https://qiita.com/hachisukansw/items/154b5349f99a7152fd46


５．困ったこと
（１）リモートデスクトップ接続した際に、“真っ黒画面”が表示される。
リモートデスクトップの設定を試したのですが何も改善されませんでした。AMIのツール類、GUI等でインスタンスのボリュームの使用率が100%になっていたのが原因と推測されます。ストレージのサイズはデフォルト75GiBでは足りませんでした。
（結果的に、ストレージを300GiBで再作成して解消しました。）
ストレージを追加して、下記URLでパーテーションの容量を大きくしようと試みたのですがうまくいかず（これは、私のLinuxの知識不足が大きな原因です。）、インスタンスを再作成しました。
　https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/recognize-expanded-volume-linux.html

（２）キーボード配列の設定
Anaconda Navigatorでは、日本語用のキーボードの配列で入力できませんでした。先にインストールしたFirefoxでは、日本語キーボード配列で正しく入力できたのですが・・・。
以下URLに対応方法がありますが、未実施です。
https://geek-memo.com/ubukey/
https://tech-mmmm.blogspot.com/2017/08/xubuntu-1604xrdprdp.html

※ご参考１
ここまで環境を作成するのに、p2xlargeのインスタンスサイズで100円程度と思います。
（再作成したり、他に色々動かしたので推測です。今のところ7.4$です。）

※ご参考２
Sagemakerでml.p2.xlargeの3つのGPUインスタンスを30時間使ったら260$でした。

GCPでも同様にインスタンス構築からチャレンジしてみようと思います。
Reactにおけるトランスパイラー【Babel】の役割

#概要
前回の記事__[【ReactのJSXについて理解を深めよう！】](https://qiita.com/micropig3402/items/9d44536c40522363dd09)__においてちらっと__トランスパイラー__について触れましたが、今回はさらに__トランスパイラー__について深掘りしていきたいと思います！

続きはこちら
__[【webpack】をサクッとまとめる](https://qiita.com/micropig3402/items/7779413b0dfeba51ec5b)__

#トランスパイラーとは
<img width="778" alt="スクリーンショット 2019-04-15 20.59.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343290/87271cfb-1cac-54c9-ac79-72032ae5976d.png">

人間の職業で言うところの通訳者・翻訳者のような役割を果たしてくれます！

> トランスコンパイラ（他にトランスパイラ、ソース・トゥ・ソースコンパイラ、などとも）は、あるプログラミング言語で書かれたプログラムのソースコードを入力として受け取り、別のプログラミング言語の同等のコードを目的コードとして生成する、ある種のコンパイラである。

[wikipediaより](https://ja.wikipedia.org/wiki/%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B9%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%A9)

JSXはそのままでは実行できず、トランスパイラーを使って実行可能なJavaScriptに変換する必要があります。その変換作業のことを__トランスパイリング__、変換することを__トランスパイル__と言います！

JSXで書いたコードは私たち人間には可読性の高いシンタックスとなっておりますが、残念ながらJavaScriptのシンタックスとは認識されません。

したがって、ブラウザやノードではそのコードは実行されません...
実は、前回の記事までに紹介したJSXのコードは自動的にJavaScriptに変換されていたのです！

ではどのようにして自動変換されていたのでしょうか...

#Babel<img src="https://qiita-image-store.s3.amazonaws.com/0/129548/1d3475be-9405-25aa-c8c1-5ac8e0b5dc04.png" width="90px">
Reactでは__Babel__というトランスパイラーがJSXを暗黙的にJavaScriptに変換してくれています。
では実際にJSXを書いてみて、BabelがどのようにJavaScriptに変換するのかを見てみましょう！

まずは[Babel REPL](https://babeljs.io/repl)にアクセスしましょう
<img width="1280" alt="スクリーンショット 2019-04-15 21.34.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343290/34e27968-8b34-ca40-7189-e78a502ecbe1.png">


左側のスペースにJSXのコードを打つと、画像のように右側のスペースにリアルタイムでJavaScriptに変換されます。
<img width="1280" alt="スクリーンショット 2019-04-15 21.23.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/343290/8dd1591c-abd2-1c85-3638-a88120b0d457.png">

このように、今まで書いてきたJSXはBabelを通してJavaScriptにトランスパイルされブラウザ上で実行されていたということです。

Reactを用いて実際にアプリケーションを作る上では、いちいちJSXのコードがどのようにJavaScriptに変換されているのか気にする必要はありませんが、裏ではBabel君が頑張ってくれていたんだな〜って思いながらコードを書くとBabel君も喜んでくれるのではないのでしょうか。

#さらに詳しく知りたい方へ
__[Learn ES2015](https://babeljs.io/docs/en/learn.html)__にアクセスしてみましょう！

#リファレンス
 - [Babel](https://babeljs.io/)
 - [wikipedia](https://ja.wikipedia.org/wiki/%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B9%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%A9)
 - [Learn ES2015](https://babeljs.io/docs/en/learn.html)
 - [JavaScriptが辿った変遷](https://qiita.com/naoki_mochizuki/items/cc6ef57d35ba6a69117f)
 - [【５分でなんとなく理解！】Babel入門](https://qiita.com/Shagamii/items/a87181c22ea777ee2acc)
プログラミング学習記録58〜パケット〜

##今日やったこと
- パケット・ネットワーク等について学ぶ

昨日の続きでJavaを学ぼうと思ったのですが、こちらのペースで一気に進めるタイプの講義ではなく、１週間に１講義ペースの講義だったので、進められませんでした。

代わりにインターネットの技術について学びました。

インターネットについては知っているようで知らないことだらけで、特に通信技術に関しては調べてもよくわからないです笑

とりあえずメールにしろ、音声ファイルにしろ、動画ファイルにしろ、送信・受信するときはデータを「パケット」という形で分割されていることは理解できました。

ユーザーの画面では1つのファイルを扱っていても、パケットで送信・受信されます。

さらにパケットは「ヘッダー」と「ペイロード」からできていて、ヘッダーの部分に送り先の情報が書かれています。

まだ、表面上の理解しかできていないので、この話を聞いてもまだわからないことだらけで、全体がよくわかっていません。

通信技術の理解もエンジニアとしては必要なものだと思うのですが、いまいち頭に入ってきませんでした。

これから先、関連する色々な情報に触れることで通信技術も理解できるようになることを期待して、今はさらっと目を通すぐらいで先に進みたいと思います。

おわり
#pyhon で #Qiita #API を叩いて 記事作成する簡単な汎用スクリプトの例

#pyhon で #Qiita #API を叩いて 記事作成する簡単な汎用スクリプトの例

# python

```py
#!/usr/bin/env python3
# -*- coding: utf-8 -*-

# https://qiita.com/api/v2/docs#item

import os, sys, requests, json

if len(sys.argv) >= 3:
  qiita_tags = []

  for tag in sys.argv[3].split(','):
    # ほぼ使われていないであろう versions 指定も必須のようなので、空のリストを指定しておく
    qiita_tags.append({ "name": tag, "versions": [] })
else:
  qiita_tags = [{ "name": "test", "versions": [] }]

item = {
    'title': sys.argv[1],
    'body': sys.argv[2],
    "coediting": False,
    'tags': qiita_tags,
    'private': False,
    'tweet': False,
}

token = os.environ.get('QIITA_TOKEN')

headers = {
 'Authorization': 'Bearer {}'.format(token),
 'Content-Type': 'application/json',
}

api_url = 'https://qiita.com/api/v2/items'
response = requests.post(api_url, headers=headers, json=item)

if response.status_code == 200:
  print(json.dumps(response.json()))
else:
  print(json.dumps(response.json()))
```

# exe

- 第一引数がタイトル
- 第二引数がbody
- 第三引数にタグをカンマ区切りで指定

```
$ QIITA_TOKEN=$(cat ~/.secret/qiita-token) ./item-post.py test "testing\na" a,b,c
```

```json
{"rendered_body": "<p>testing\\na</p>\n", "body": "testing\\na\n", "coediting": false, "comments_count": 0, "created_at": "2019-04-15T19:25:48+09:00", "group": null, "id": "b5603eeb7e91cfb93248", "likes_count": 0, "private": true, "reactions_count": 0, "tags": [{"name": "C", "versions": []}, {"name": "a", "versions": []}, {"name": "b", "versions": []}], "title": "test", "updated_at": "2019-04-15T19:25:48+09:00", "url": "https://qiita.com/YumaInaura/private/b5603eeb7e91cfb93248", "user": {"description": "https://www.wantedly.com/users/93140896 /  Ruby on Rails \u696d\u52d9\u7d4c\u9a13 \u7d044\u5e74 / Perl PHP Python Golang Linux Apache MySQL BigQuery Jenkins ansible \u306a\u3069 /  \u3044\u306a\u3046\u3089\u3086\u3046\u307e / YumaInaura / \u7a32\u6d66\u60a0\u99ac", "facebook_id": "yumainaura", "followees_count": 184, "followers_count": 164, "github_login_name": "YumaInaura", "id": "YumaInaura", "items_count": 1239, "linkedin_id": "", "location": "Osaka", "name": "Inaura \u3044\u306a\u3046\u3089 \u7a32\u6d66 Yuma \u3086\u3046\u307e \u60a0\u99ac", "organization": "", "permanent_id": 89618, "profile_image_url": "https://qiita-image-store.s3.amazonaws.com/0/89618/profile-images/1546214964", "team_only": false, "twitter_screen_name": "YumaInaura", "website_url": "http://twitter.com/yumainaura"}, "page_views_count": null}
```

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/1294








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
逆求人サイトまとめ

##ヘッダー
ヘッダー部分は下記のようにしてインターン先のホームページに飛べるようにしました。
```<a href="https://www.miraidenshi-tech.jp/library/21763/" class="login">Directory</a>
                  <a href="https://www.miraidenshi-tech.jp/" class="company">About</a>```



##お問い合わせフォーム
```
<form action="contact.php" method="post">
   <div class="item">
      <label class="label">お名前</label>
      <input class="inputs" type="text" name="name">
    </div>
    
    <div class="item">
      <label class="label">会社名</label>
      <input class="inputs" type="text" name="company">
    </div>
    <div class="item">
        <label class="label">備考欄</label>
        <textarea class="inputs" name="text"></textarea>
      </div>
  
    <div class="btn-area">
        <input type="submit" value="送信する"><input type="reset" value="リセット">
      </div>
    </form>
```
お問い合わせフォームのhtml部分は上記のような感じで作ってみました。

##感想
サイトを作ってみて、一番大変だったのがcssのコーディングです。
paddingなどをつかって位置を調整するのが時間を食いました。
ただ、楽しかったのでこれからも精進していきます！