OmniAICreator/Qiita-1.07M huggingface dataset:
Rails チュートリアル　第3章　まとめ

commit -am はaddを省略することができるが、commitした内容がメッセージと違うと開発に影響が出るので慎重に使うか、使わないこと

git branchの説明

```
git checkout -b sikousakugo
```

25:00 StaticPagesコントローラーの作成

```rb
git `static_pages/home` 
```
この書き方で書くことはほとんどない

テスト
ブラウザを毎回確認しなくても、rails testを行うことでチェックできる
 
```ruby:
test "should get home" do
    get static_pages_home_url #getリクエストをURLに送る
    assert_response :success  #必ず何らかのレスポンスが返ってくるはず
    assert_select"title":"Home | Ruby on Rails Tutorial Sample App" 
#titleタグの中身は右のようにあるべきというチェック

  end
```
テスト駆動開発という開発方法
まずあるべき姿をテストで書き、エラーメッセージを見ながら修正することを繰り返す

リファクタリング
app/views/layouts/application.html.erbの<%=yield%>にそれぞれのビューが入る（それぞれのビューがその度に呼ばれる）
applicationテンプレートとhomeテンプレートは入れ子構造になっている
applicationテンプレートのtitleタグ以外は共通なので、erb（埋め込みRuby)を使えば冗長さをなくしたコードが書ける

applicationを使わずに、headの部分なども全てhome.htmlで記述した場合、以下のようになる

```
<!DOCTYPE> 
html>
<html>
  <head>
    <title>Home | Ruby on Rails Tutorial Sample App</title>
  </head>
  <body>

```

erbの機能として

```rails:home.html.erb
<% provide(:title, "Home") %> #titleという変数にHomeという文字列を代入
<% yield(:title) %> #provideで宣言した変数を利用できる
```

がある。
この二つの機能を使うと

```rails:home.html.erb
<% provide(:title, "Home") %>
<!DOCTYPE html>
<html>
  <head>
    <title><%= yield(:title) %> | Ruby on Rails Tutorial Sample App</title>
  </head>
  <body>
   
```
このように書き換えることができる。

yieldを使った共通化はしっくりこない部分もあるが、yieldのたびにhomeなどのページが呼ばれているとまずは理解しよう。この章での一番の難関はリファクタリングの理解

root "----"は初期表示ページへのルーティング
git push heroku master のmasterはbranch名

10/22 二周目
StructOptでauthorを非表示にする際の挙動が変わった。

# StructOptライブラリとは

コマンドライン引数を解析する処理を簡単に記述できるライブラリです。


## authorの仕様が変更

StructOptのバージョンが、0.2から0.3に上がったことで
Helpを表示させた際、cargo.toml内に書かれたソースコードの
作者名(authors)が表示されるのを防ぐ

```rs
author = ""
```

という記述がエラーを起こすようになりました。
解決方法は、半角スペースを入れるだけです。

```rs
author = " "
```

# コメントを頂いたので追記

ver 0.2までは、下記の3つの引数を書いていたと思いますが、
`#[structopt(name = "XXX", about = "YYY", author = "XYZ")]`
ver 0.3からは、aboutとauthorを不要だと思えば、
わざわざ書かなくて良くなっています。
Firebase Hosting上でCloud Functionsを使うときに気をつけること【CORS】

Firebaseとても便利ですね。
HostingやCloud Functionsによる関数の実行など、アプリケーションを作成する上で、様々なことを助けてくれます。


NuxtjsをFirebase Hosting上で動かして、APIからデータを取得するアプリを作る際に、
Cloud Functionsを利用しました。


その際に、CORSの問題でかなり時間を使ってしまったため、記事にします。

[こちら](https://qiita.com/sugikeitter/items/22fcbe67402cd1fb91a1)の記事を参考にさせてもらいました。
ありがとうございました。


## 前提

- Firebase Hosting上で動作しているアプリケーション。
- Cloud Functionsをaxiosを用いて実行する。


## Cloud Functionのコード

まずは、Cloud Functionのコードを書きます。

```js:index.js
const functions = require('firebase-functions')

exports.helloWorld = functions.https.onRequest(async (request, response) => {
  await response.send('hello world!')
})

```

こちらのコマンドでデプロイが可能です。

```bash
$ firebase deploy --only functions
```


## firebase.jsonの設定

次に、Firebase Hostingのrewriteの設定を追加します。

この部分がわからず、CORSのエラーがでて、ずっとつまづいてしまいました。。。


```json:firebase.json
"hosting": {
    "public": "dist", // nuxtのデフォルトの静的ファイル出力先
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "/getMessage",
        "function": "helloWorld" // 先ほど作成した関数名を指定します
      },
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
```


## アプリケーションから関数を呼び出す

最後にアプリケーション側から関数を呼び出します。

今回は、Nuxtjsを使っているため、.vueファイルで記述しています。


```vue:sample.vue
<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    this.getMessage()
  },
  methods: {
    async getMessage() {
      try {
        // nuxtのaxiosモジュールを使用
        this.message = await this.$axios.$get('/getMessage')
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

```

以下のコマンドでデプロイします。

```bash
$ yarn generate // Nuxtの静的ファイルの生成コマンド
$ firebase deploy --only hosting
```


messageにHelloWorldが表示されれば、完了です。




## 【おまけ】ローカル開発時


ちなみにローカル開発時には

```bash
$ firebase serve
```

コマンドがとても便利です。(yarn run devコマンドを使って進めると、firebase.jsonが反映されなくて困ります。)


Hostingのデプロイするfirebase.jsonで指定した`public`フォルダに対してホスティングされるため、
Nuxtjsで利用する際には、

```bash
$ yarn generate
```

コマンドをお忘れなく！



最後まで読んでいただき、ありがとうございました！
【住所にカンマ（,）厳禁！】ピアソンVUEで試験を申し込むときに注意すべきこと

#ピアソンVUEで試験の申し込みをしていたら、いきなりの「アカウントが制限されています」

Java bronze試験を受けるべくピアソンVUEにアクセスし、住所・氏名・カード番号など必要な情報をすべて入力して「予約を確定する」ボタンを押したところ突然画面が真っ白に。
しかたない、最初からやり直すか…と再びサインインを試みたのですが、

**「このアカウントは現在制限されています。解除するためにはカスタマーサービスまでご連絡ください」**

という感じの文面が表示され、サインインができなくなってしまいました。

#サポートセンターにメールしたところ、原因は「カンマ（,）」と判明#

アカウント制限を解除してもらうために、[カスタマーサービス](https://www.pearsonvue.co.jp/test-taker/Customer-service.aspx)のお問い合わせフォームに必要事項を記載して送信。（電話での問い合わせもできます）
その日の夜7時ごろにフォームを送って、翌日の朝10時にはピアソンVUEから丁寧な返信が届きました。迅速ですね！

返信メールには「いまから解除手続きを開始します」という旨と、アカウント制限をくらってしまった理由として<img width="734" alt="住所.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513594/54ba97ba-531e-b1cf-80d0-50be74578cab.png">

「住所にカンマ（,）が含まれていたため」とありました。
ピアソンVUEで試験申し込みをする際は**英語で**住所を記載する必要があるのですが、そこで私は
**Shinjuku-ku, Tokyo**
のようなカンマで区切る書き方をしてしまったため、アカウントが制限されてしまったのでした。

ちなみに、手続き開始のメールが届いてから３時間後、今度は「ご利用制限解除完了のご案内」というメールが届き、アカウント制限は無事解除されました。

#英語住所の区切りにはスペースを使おう！#

英語での住所の書き方はいろいろありますが、ピアソンVUEで申し込みをするときは
**Shinjuku-ku Tokyo**
のようにスペースで区切って入力しましょう。

この記事が誰かのお役に立てれば幸いです。
R classの中身が空っぽ（生成はされる）になった時の対処

R classの中身が空っぽになる現象に遭遇し、意外な所に原因があったため書いておきます。

## 事象

<img width="442" alt="スクリーンショット 2019-10-18 21.56.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75828/b567979d-611e-1a6b-34fa-4a2cf89b717d.png">
`R.layout` までは見つかる・・・ が
<img width="541" alt="スクリーンショット 2019-10-18 21.57.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75828/83eb42e6-1367-bc1b-48f1-3a4dfce7ec8e.png">
中身が `main` しか無い！

プロジェクトをインポートし直すと、正常にRを生成してくれる。でも3日くらい経つと、また生成してくれなくなる。（ここが原因判明まで時間がかかった理由）

この唯一ある`main`というのはどうやらライブラリプロジェクトのものらしい、ということまですぐ分かった。

## 原因

同一のpackage名を利用したプロジェクトが混在している
<img width="317" alt="スクリーンショット 2019-10-18 22.03.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75828/559f9cd6-e53d-eaca-9115-891bac7d44c2.png">
同じプロジェクト内に、アプリのpackageと同一の名前を使ったライブラリが存在していました。ライブラリ側のpackageを編集すると直った。
SAS Viyaでデータ変換を行うデータトランスフォーマの使い方

[SAS Viya](https://www.sas.com/ja_jp/software/viya.html)はAIプラットフォームです。PythonやJava、Rなどの言語を通して利用できます。そのSAS Viyaの中で使われているのがCASTableというテーブルオブジェクトです（CASはCloud Analytic Servicesの略です）。今回はデータメッセージハンドラを使いつつ、データの変換を行うトランスフォーマの使い方を紹介します。

## データメッセージハンドラを定義する

まずデータメッセージハンドラを定義します。これはデータ構造と実データを持ったPythonのクラスです。ここで変換を行う `transformers` を定義します。下記の `birthdate` がそうです。文字列で定義していますが、日付型に変換してデータベースに入ります。

```py
class MyDMH(dmh.CASDataMsgHandler):

    def __init__(self):
        self.data = [
            ('Alfred',  'M', 14, 69,   112.5, '1987-03-01'),
            ('Alice',   'F', 13, 56.5, 84,    '1988-06-12'),
            ('Barbara', 'F', 13, 65.3, 98,    '1988-12-13'),
            ('Carol',   'F', 14, 62.8, 102.5, '1987-04-17'),
            ('Henry',   'M', 14, 63.5, 102.5, '1987-01-30'),           
        ] 

        vars = [
            dict(name='name', label='Name', type='varchar'),
            dict(name='sex', label='Sex', type='varchar'),
            dict(name='age', label='Age', type='int32'),
            dict(name='height', label='Height', type='double'),
            dict(name='weight', label='Weight', type='double'),
            dict(name='birthdate', label='Birth Date',
                 type='date', format='DATE', formattedlength=12),
        ]

        transformers = {
            'birthdate': dmh.str2cas_date,
        }

        super(MyDMH, self).__init__(vars, transformers=transformers)

    def getrow(self, row):
        try:
            return self.data[row]
        except IndexError:
            return
```

## インスタンスを作る

定義したデータメッセージハンドラのインスタンスを作ります。

```py
mydmh = MyDMH()
```

## CASTableを追加する

CASTableを追加します。この時、作成したデータメッセージハンドラを渡します。

```py
conn.addtable(table='myclass', caslib='casuser',
              **mydmh.args.addtable)
```

### テーブル情報を見る

まずカラムの情報を見てみます。birthdateが日付型になっているのが分かります。

```py
conn.columninfo(table=dict(name='myclass', caslib='casuser'))
```

**§ ColumnInfo**


| Column | Label | ID | Type | RawLength | FormattedLength | NFL | NFD |
|--------|-------|-----|-----|-----------|-----------------|-----|-----|
| 0 | name | Name | 1 | varchar | 7 | 7 | 0 | 0 |
| 1 | sex | Sex | 2 | varchar | 1 | 1 | 0 | 0 |
| 2 | age | Age | 3 | int32 | 4 | 12 | 0 | 0 |
| 3 | height | Height | 4 | double | 8 | 12 | 0 | 0 |
| 4 | weight | Weight | 5 | double | 8 | 12 | 0 | 0 |
| 5 | birthdate | Birth Date | 6 | date | 4 | 12 | DATE | 0 | 0 |

データを見てみます。

```py
conn.fetch(table=dict(name='myclass', caslib='casuser'), to=5)
```

| name | sex | age | height | weight | birthdate |
|------|-----|-----|--------|--------|-----------|
| 0 | Alfred | M | 14 | 69.0 | 112.5 | 1987-03-01 |
| 1 | Alice | F | 13 | 56.5 | 84.0 | 1988-06-12 |
| 2 | Barbara | F | 13 | 65.3 | 98.0 | 1988-12-13 |
| 3 | Carol | F | 14 | 62.8 | 102.5 | 1987-04-17 |
| 4 | Henry | M | 14 | 63.5 | 102.5 | 1987-01-30 |

ちゃんと定義したデータメッセージハンドラの状態を使ってCASTableが作られているのが分かります。

## まとめ

データメッセージハンドラを使うことで、PythonのクラスをCASTableに展開できるようになります。データをWeb APIから取得してCASTableを作れば、外部データの分析も容易になります。トランスフォーマを使うことでデータベースの型に合わせてデータが追加できるようになります。

[SAS for Developers | SAS](https://developer.sas.com/home.html)
pyenvの使い方

pythonのバージョンを管理するのにpyenvを使っているけど、新しく構築する際に毎回忘れてしまうので、忘れないようにメモ

## 1. pyenvの導入
インストール。gitを使って入れる

```{bash}
$ git clone https://github.com/pyenv/pyenv.git ~/.pyenv
```

pathの設定と設定の適用

```{bash}
$ echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bash_profile
$ echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(pyenv init -)"' >> ~/.bash_profile
$ source ~/.bash_profile
```

## 2. pythonのインストール
pyenvでインストールできるpythonのバージョンを確認。anacondaやminicondaなどもある。

```{bash}
$ pyenv install --list
Available versions:
  2.1.3
  2.2.3
  2.3.7
　・・・
  anaconda3-5.3.0
  anaconda3-5.3.1
  anaconda3-2018.12
  anaconda3-2019.03
  anaconda3-2019.07
　・・・
```

pyenv installの後にバージョンを指定してインストール。

```{bash}
$ pyenv install anaconda3-2019.07
```


## 3. 環境の適用
マシン上で呼び出すpythonのバージョンを指定する。

マシン上の全ディレクトリで呼び出すpythonを指定したい際には、globalで設定する

```{bash}
$ pyenv global anaconda3-5.3.1
```

ディレクトリによって呼び出すpythonを変えたい場合には、適用ディレクトリ環境下に移動してlocalで設定する

```{bash}
$ pyenv local anaconda3-2019.07
```

local設定を取り消す際には--unsetを使う

```{bash}
$ pyenv local --unset
```

## 4.pyenvのupdate
pythonがアップデートされた場合、pyenvも新しいバージョンに対応したバージョンでないと、新しいpythonをインストールすることができない。
そのため、pyenv自体をupdateする必要がある。プラグインのpyenv-updateを使うと楽。

pyenv-updateの導入

```{bash}
$ git clone git://github.com/pyenv/pyenv-update.git $(pyenv root)/plugins/pyenv-update
```

下記で、pyenv自体のアップデートが実行される

```{bash}
$ pyenv update
```

## 5. その他

pyenvの中のpythonを一覧するには pyenv versionsを使う

```{bash}
$ pyenv versions
  system
  anaconda3-2019.07
* anaconda3-5.3.1 (set by /home/user/.pyenv/version)
  miniconda3-4.3.30
```
bundle installでmysql2 gemが `ld: library not found for -limported_openssl` で失敗する問題を強引に解決する

### 概要
- HomebrewでインストールしたMySQLを 5.7 から 5.6 にダウングレードしたところ、お題のエラーが発生するようになったっす
- とても急いでいたので、類稀なバッドノウハウを以って解消しました

### 環境
- macOS Catalina 10.15
- ruby 2.4.2
- Rails 4.2.11
- MySQL 5.6.46
- rbenv 1.1.2
- Homebrew 2.1.15

### いきなり対処法
1. brew コマンドで MySQL 5.6 をアンインストール
1. rbenv コマンドで ruby 2.4.2 を再インストール
1. brew コマンドで MySQL 5.6 をインストール
1. `mysql_config` を修正（後述）
1. `bundle config --delete build.mysql2` 不要だったけど気分で（環境によっては必要かも）
1. `bundle install`
1. :end: :tada:  

##### 修正内容

```diff:/usr/local/Cellar/mysql@5.6/5.6.46/bin/mysql_config
123行目
- libs=" $ldflags -L$pkglibdir  -lmysqlclient  -limported_openssl -limported_crypto "
+ libs=" $ldflags -L$pkglibdir  -lmysqlclient  "

126行目
- libs_r=" $ldflags -L$pkglibdir  -lmysqlclient  -limported_openssl -limported_crypto   "
+ libs_r=" $ldflags -L$pkglibdir  -lmysqlclient  "
```

### ここから詳細

`bundle install` のログはこんな感じ。

```
Installing mysql2 0.3.20 with native extensions
Gem::Ext::BuildError: ERROR: Failed to build gem native extension.
（...略）
checking for ruby/thread.h... yes
checking for rb_thread_call_without_gvl() in ruby/thread.h... yes
checking for rb_thread_blocking_region()... no
checking for rb_wait_for_single_fd()... yes
checking for rb_hash_dup()... yes
checking for rb_intern3()... yes
-----
Using mysql_config at /usr/local/opt/mysql@5.6/bin/mysql_config
-----
checking for mysql.h... yes
checking for errmsg.h... yes
checking for mysqld_error.h... yes
-----
Don't know how to set rpath on your system, if MySQL libraries are not in path mysql2 may not load
-----
-----
Setting libpath to /usr/local/opt/mysql@5.6/lib
-----
creating Makefile
（...略）
ld: warning: directory not found for option '-L/usr/local/opt/mysql@5.7/lib'
ld: library not found for -limported_openssl
clang: error: linker command failed with exit code 1 (use -v to see invocation)
make: *** [mysql2.bundle] Error 1

make failed, exit code 2
```

#### 問題は2つあった

##### 1. 根絶したつもりだった MySQL 5.7 さん問題

```
ld: warning: directory not found for option '-L/usr/local/opt/mysql@5.7/lib'
```

ひょっこり登場してきた。これは以下の 5.7 情報が書かれていたことが原因でした。

```~/.rbenv/versions/2.4.2/lib/pkgconfig/ruby-2.4.pc
50行目
DLDFLAGS=-L/Users/choripon/.rbenv/versions/2.4.2/lib -L/usr/local/opt/mysql@5.7/lib -Wl,-undefined,dynamic_lookup -Wl,-multiply_defined,suppress
```

恐らく ruby をインストールした際の引数が影響してる気がするけど今となっては謎です。ruby を入れ直すことで解決しました。

##### 2. 自分誰やねん問題

```
ld: library not found for -limported_openssl
```

かなり謎だったため、最終手段 `grep -ir 'imported_openssl' / 2>/dev/null` の発動承認に至った次第でして、ヒットした mysql_config を直すことで解決しました。（だいぶ後で `Using mysql_config at /usr/local/opt/mysql@5.6/bin/mysql_config` のログ出力に気づいたのはナイショ）

以上です。

### おしまい

今回弄った mysql_config は、後で元に戻しました。
あと全く関係ないですが、mkmf.log を心の中で「 **むくむふろぐ** 」と言ってます（誰にも共有したことない）。
OpenBSD 6.5 から 6.6 へのアップグレード

# はじめに

<font color="red">
（追記）2020年5月19日に OpenBSD 6.7 がリリースされました。6.6 から 6.7 へのアップグレードも同様に sysupgrade コマンドでできることを確認しました。
詳細： https://www.openbsd.org/faq/upgrade67.html
</font>

2019年10月17日に [OpenBSD 6.6](https://www.openbsd.org/) がリリースされました。
以前に「[OpenBSD 6.5 のインストール](https://qiita.com/kinichiro/items/a2ed08d14d2d46e28fca)」で OpenBSD 6.5 をインストールして使っていました。
今回は一からのインストールではなく、OpenBSD 6.6 からの新機能である [sysupgrade(8)](https://man.openbsd.org/sysupgrade) を使って 6.5 から 6.6 へのアップグレードを行ってみようと思います。

# sysupgrade(8) コマンドについて

sysupgrade(8) コマンドは OpenBSD 6.6 で新たに追加された OS バージョンのアップグレードのためのコマンドです。
実行すると /etc/installurl で指定された場所からインストールで必要なファイルを /home/_sysupgrade/ ディレクトリにダウンロードしてからインストールを行い、インストール後リブートを行ってくれます。
実行する前に /home パーティションに十分な空き容量があることを確認しておきましょう。

sysupgrade(8) コマンドの詳細については、man sysupgrade もしくは https://man.openbsd.org/sysupgrade を参照して下さい。

# OpenBSD 6.5 から 6.6 へのアップグレード手順

今回行った OpenBSD 6.5 から 6.6 へのアップグレード手順を説明します。

## (1) 6.5 への最新パッチの適用とパッケージ最新化

syspatch コマンドで 6.5 に最新のパッチを適用しておきます。

![66-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103043/df5c718d-c252-5287-e361-5aa1d7779918.png)

pkg_add -u コマンドで導入済みのパッケージをアップデートしておきます。

![66-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103043/306f93d4-19e4-67b0-6599-d6e96de4c2cc.png)

## (2) /etc/installurl の設定

今回は https://ftp.riken.jp/pub/OpenBSD を設定しました。

![66-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103043/35a12d32-59e8-39c7-a42e-cebeacda5b99.png)

## (3) sysupgrade(8) の実行

sysupgrade を実行します。
以下のように必要なファイルのダウンロードが開始されます。
ファイルは /home/_sysupgrade/ にダウンロードされます。

![66-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103043/5370bdc9-3b86-1a6e-f4ba-30730bbf7561.png)

ダウンロードが完了すると、インストールが始まります。

![66-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103043/89df458a-c67a-cfe0-1b38-b7dc049b8752.png)

インストールが完了すると、カーネルの再リンクが行われます。

![66-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103043/76b4e507-871e-5aba-90db-2c6ae6b5942f.png)

カーネルの再リンク後、OSがリブートされます。

![66-07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103043/6ade1b84-d127-4dff-18e9-48ffc0c4d457.png)

再起動後にログインして uname -a で確認すると、OpenBSD 6.6 にアップグレードされていることを確認できました。

![66-08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103043/ba2c2633-c3d8-0f98-f039-59a64fdfecde.png)

## (4) 6.6 のパッケージ最新化と最新パッチの適用

pkg_add -u コマンドで導入済みのパッケージをアップデートしておきます。

![66-09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103043/13d023ac-1c0e-116e-3228-bb79054f7522.png)

syspatch コマンドで 6.6 に最新のパッチを適用しておきます。

![66-10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/103043/4789a08f-85c2-e44e-db1d-ce67f3bff2ef.png)

## (5) リブート

パッケージ最新化と最新パッチ適用を行ったので、念のため OS を再起動しておきます。

## (6) 6.5 から 6.6 へのアップグレード完了

以上で OpenBSD 6.5 から 6.6 へのアップグレードが完了しました。

# まとめ

OpenBSD 6.5 から 6.6 へのアップグレードを sysupgrade(8) コマンドで行ってみました。
コマンド一発で簡単に OpenBSD のアップグレードができるようになりました。

OpenBSD プロジェクトは寄付を募ってます。
メールアドレス指定で日本からでもPayPalでの寄付ができます。
詳しくはこちら： https://www.openbsd.org/donations.html
UnixとLinuxの違い

#UNIXとは？
Unixは最も古いOS(オペレーションシステム)の一つで、様々なOSの土台になった歴史あるOSです。
特徴として挙げられるのが安全性が高く、また余計な機能が省かれているため軽量であり、安価です。

#LINUX
LinuxもOSでUNIXのようにCUIでの操作は同じだが、それに加えGUIでのマウス操作も可能である。Unixと違う点としては、費用がかからず無料だという点が挙げられる。

##UnixとLinuxの似ている点
・CUIでの操作
・費用面で優秀
・企業で使われていることが多い
・安定性が高い

##UnixとLinuxの違う点
・Unixは企業が開発して、知的財産権が企業に属している。
・Linuxはオープンソースで無料かつ改変・配布が自由に行える。
[Blender] TexTools のRectify エラーへの対処方法

## はじめに
Blender 2.8のアドオンTexTools でUV > Rectify した時にエラーが発生した場合の対処方法を記載します。
結論から書くと、頂点の重複が問題になっていたようなのでこれを解消します。

## 環境
Windows 10
Blender 2.80

## TexToolsとは
Blender でのUV編集を楽にしてくれるアドオンです。今回初めて導入しました（というよりBlenderが初めて）。

[TexTools](http://renderhjs.net/textools/blender/)

ただし上記では記事執筆時点でBlender 2.79までしか対応していないので、2.8対応版はGitHubからダウンロードします。
[TexTools-Blender 2.80](https://github.com/SavMartin/TexTools-Blender/releases)

インストール方法などは割愛。

## 現象
UV EditingビューでUV > Rectify すると以下のエラーが表示されました。
![err.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241491/cdb26010-57b5-0d82-5b93-dbb66a455fa3.png)
> ZeroDivisionError: float division by zero

どこかでゼロ割り発生？

## 対処方法
問題になっているUVを拡大してみると、どうも辺が意図した形ではなく、二重線のようになっている箇所があります（モデリング時の操作ミス？）。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241491/b3f727f3-0094-d66d-11e4-9f5ee2d0bdc0.png)

二重線になっている各頂点をクリックしてみると、どうも隣とつながっていない箇所もあるようです（ZeroDivisinの原因？）。

（**追記**：記事「[頂点が重複する原因](https://qiita.com/noitak/items/111e2c6c600e992bc07b) 」に原因となったと思われる操作を書きました）

モデリングでぽちぽち直しても良いのですが、調べるとこれは「頂点の重複」という状態のようで、一気に解消できるみたいです。

1. UV Editingビューの右ペイン（UVではなく3Dモデル側）でAキーで頂点を全選択
2. Alt + M でマージのコンテキストメニューを表示し「距離で」を選択
3. 近接する頂点がマージされる
4. 右ペインでもう一度UV > 展開

UVの二重線がなくなりました。（位置と向きが変わっていますが上図と同じUVです）
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241491/0ecd6379-ae0f-3e40-989d-f382d3d741cf.png)

この状態からRectify すると問題なく成功しました。

## おわりに
頂点の重複に由来するTexTools のRectify エラーを解消しました。
（意図していないとはいえ頂点が重複しているだけでエラーになる原因までは不明なのですが）

これはBlender初心者が、zen様の素晴らしい動画「[【第３回】ワニでもできる！モデリングforVRChat - テクスチャ
](https://www.youtube.com/watch?v=r6vcjqzCdnI)」を見ながら初めて3Dモデリングした際に遭遇した現象を解消した記録となります。
ウィザードを使わないVPCの作り方

# 作り方
## マネジメントコンソールにログインして、VPCを選択します。
![WS000001.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400941/e75297ef-a6e9-2d72-6fdb-e73404ed7011.jpeg)

## 「VPC」をクリックします。
![WS000002.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400941/370785f2-41c0-4b39-1ce0-dea24bb80e6b.jpeg)

## 「VPCの作成」をクリックします。
![WS000003.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400941/71cec9d1-0885-bb47-5b26-1636958bd38d.jpeg)

## 必要項目を入力して、「作成」をクリックします。
![WS000004.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400941/34c68f09-e8c4-e41a-09d2-61d28cb12bae.jpeg)
### 名前タグ
　任意の名前を入れます。
　名前の付け方としては、使い道、もしくは部署名や会社名などを入れます。
### IPv4 CIDRブロック
　VPCの中で使用できるネットワークアドレスの範囲を入れます。
　デフォルトVPCは16ビットだからか、16ビットで作成することが多いですが、別に8ビットでも24ビットでも構いません。
　ただ、あまり範囲を狭くすると、後が大変になるので、少し大きめにとることを推奨します。
　初心者向けに16ビットの早見表を載せておくので、使いたい数のアドレスのあるブロックを入力してください。

| IPv4CIDRブロック|IPアドレス数|使えるアドレス数|
|:-----------------:|:------------------:|:------------------:|
|172.16.0.0/16|65536|65534|
|172.17.0.0/16|65536|65534|
|172.18.0.0/16|65536|65534|
|172.19.0.0/16|65536|65534|
|172.20.0.0/16|65536|65534|
|172.21.0.0/16|65536|65534|
|172.22.0.0/16|65536|65534|
|172.23.0.0/16|65536|65534|
|172.24.0.0/16|65536|65534|
|172.25.0.0/16|65536|65534|
|172.26.0.0/16|65536|65534|
|172.27.0.0/16|65536|65534|
|172.28.0.0/16|65536|65534|
|172.29.0.0/16|65536|65534|
|172.30.0.0/16|65536|65534|
|172.31.0.0/16|65536|65534|
|172.32.0.0/16|65536|65534|

【注釈】
　ネットワークは、最初と最後のアドレスは使えません。これは決まりです。
　なので、基本的にはIPアドレスの総数から2を引いた値が使えるアドレス数になります。

　実際には、VPCの中にsubnetと呼ばれる枠を作って、そこでもsubnetごとに2個ずつを引くので、もっと使える数は減ります。

## 以下のようになれば、成功です。
![WS000005.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400941/a395e292-1c35-b5d1-a743-fa14bf855461.jpeg)

## 閉じるを押して、作成したVPCを確認してください。
![WS000006.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/400941/a756756e-1754-7531-5336-cd2a9e43c81b.jpeg)
[CSS] iOS Safariでbackground-repeatを設定すると、繋ぎ目に線が入る時の対処法

##現象
background-repeatで背景を繰り返し表示させた場合
iOSのSafariで繋ぎ目に白い線が入ってしまう時がある。

background-sizeで画像の原寸ではなく、
拡大・縮小した場合におこることがある。

##対策

背景画像を設定している要素に下記のスタイル設定すると改善される。

```CSS
filter:blur(0);
```
0pxなので見た目には影響ないかと。。。
現時点なのでいつだめになるかはわかりません。
【gnuplot小ワザまとめ】グラフを描画する際の位置指定方法(margin)

#きっかけ
・gnuplotでグラフの描画範囲と軸ラベルが重なってしまい苦戦していたとき
　先輩「こういうやり方あるで」
　僕　「これはかゆいところに手が届く！ありがとうございます」
　ってことがあったのでここに残します

よくgnuplotでつまずくことが多いのでシリーズ化するかもしれません


#本題

極端な例だけど軸の数値が過剰なとき...
yラベルと軸の数値が重なってしまうことがよくある　(軸の数値をなんとかすればいい話だけど)

|<img width="600" alt="sin.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513034/c0050a52-85e3-459a-3f1b-43df08de9ffa.png">|
|:-:|

<br/>

そんなときは`set ○margin at screen ○○`を使うとグラフの描画範囲を細かく指定できる
例えばこんな感じに入力すると

```
set tmargin at screen 0.95
set lmargin at screen 0.25
set rmargin at screen 0.95
set bmargin at screen 0.2
set ylabel offset -3.5,0  ←yラベルの位置調整
```

|<img width="600" alt="sin2_2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/513034/f0d5f915-a824-0d3c-1cad-135ba9a935c0.png">|
|:-:|

<br/>
`set ○margin at screen 〇〇`と記述することで縦横の余白を細かく指定できる
指定する数値は出力する画像の左下を0,右上を1としたときの相対的な比率を示す

multiplot使うときにも細かく描画する領域を指定できて便利






#最後に

gnuplot使ってる人ってあんまりいないかもしれないけど
ニッチなニーズに刺さってくれると嬉しいです

よろしければ次回もどうぞ
[【gnuplot小ワザまとめ】読み込んだファイルのプロパティを取得](https://qiita.com/_shin_/items/8513b1300508e6d6bad7)
discord.js役職付与の仕方

#discord.js役職付与の仕方
コード

```js
if (msg.content.match('コマンド')) {
  msg.member.addRole('役職ID')
  .then(console.log)
  .catch(console.error);
}
```

役職idはデベロッパーモードを有効にして、サーバー設定ロールをから右クリック

引用元
>https://discord.js.org/#/docs/main/stable/class/GuildMember?scrollTo=addRole
ルベーグ積分入門４　可測関数の性質1

[ルベーグ積分３のつづき](https://qiita.com/king_of_theneet/items/9475c2d9bed29ba5b4b7)
もう少しで、測度を定義する。測度を定義したあと、やっとルベーグ積分を定義できる。

以下この記事では、Xを$\mathcal{B}$をσ代数とする可測空間とする。

Xの任意の部分集合Eに対して、**特性関数**という呼ばれる次のような関数がある。

```math
1_{E}(x) = \left\{
\begin{array}{ll}
1 & (x \in E) \\
0 & (x \in X\setminus E)
\end{array}
\right.
```

>命題4.1　$1_E$が可測関数であるとき、そのときに限り$E$は可測集合である。

証明　定義を確かめることで証明しよう。
任意に実数$\alpha$をとり、$\alpha$の大小について場合分けをして考えと、
$\alpha<0$のとき$\\{x\in X|1_E(x)\gt \alpha\\}=X$、$0\leq \alpha <1$のとき$\\{x\in X | 1_E(x)\gt\alpha\\}=E$、$\alpha\geq 1$のとき、$\\{x\in X|1_E(x)\gt \alpha\\}=\emptyset$
全ての場合について、$1_E$が可測関数のとき$E$は可測集合であり、その逆も確かめられる。

証明おわり

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373783/d00d127d-12c8-a047-87ab-652e68f26d16.png)


>命題　4.2
$f:X \rightarrow \overline{\mathbb{R}}$を可測関数とする。任意のa倍$af$、$f^2$は可測関数である.
ここで、a倍、関数の掛け算を次のように定義している。
(af)(x):=af(x)
(fg)(x):=f(x)g(x)

証明
まず、$af$が可測関数であることを示そう。
a=0の場合、afは恒等的に０である。これは$\emptyset$の特性関数なので、命題4.1より可測関数である。
a>0 のとき、$\\{x\in X| af(x)\gt \alpha\\}=\\{x\in X| f(x)\gt \alpha/a\\}$である。またfは可測関数なので$\\{x\in X| f(x)\gt \alpha/a\\}$は可測集合であるから、$\\{x\in X| af(x)\gt \alpha\\}$は可測集合であることが示されてafは可測関数であることがわかる。
a<0のとき、$\\{x\in X| af(x)\gt \alpha\\}=\\{x\in X| f(x)\lt \alpha/a\\}$であり、前の記事の命題３.2を使うとよい。$af$が可測関数であることが示された。

つぎに、$f^2$は可測関数であることを確かめる。
$\alpha$を任意の実数とする。$\alpha\lt 0$ならば二乗すれば常に０以上なのだから、$\\{x\in X| f^2(x)\gt \alpha\\}=X$なので可測である。
$\alpha\geq0$のとき、$\\{x\in X| f^2(x)\gt \alpha\\}=\\{x\in X| f(x)\gt \sqrt\alpha\\}\cup\\{x\in X| f(x)\lt -\sqrt\alpha\\}$であり、前に示した命題3.2を使えばそれぞれ可測なので、和をとったものも可測である。よって可測関数であることが示された。
証明おわり

つづく
初心者によるプログラミング学習ログ 129日目

# 100日チャレンジの129日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

129日目は、

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>129日目<br><br>・UdemyでVue.js<br>・ドットインストールでVue.js<br>・技術書でVue.js<br><br>とにかくVue.jsな一日でした<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> <a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a> <a href="https://twitter.com/hashtag/vuejs?src=hash&amp;ref_src=twsrc%5Etfw">#vuejs</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1183504576483250176?ref_src=twsrc%5Etfw">October 13, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

## 学習したことの一部

・templateタグ、v-ifとv-show

```index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="main.css">
    <title>Document</title>
   
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <div id="app">
    <template v-if="ok"><!--グループ化させる、consolelog表示しない-->
      <p>hellow</p>
      <p>おはよう</p>
      <p>こんにちは</p>
    </template>
    <p v-if="ok">if</p><!--要素ごと-->>
    <p v-show="show">show</p><!--display noneで消す,v-else,template使えない-->
　

    <button @click= "ok = !ok">きりかえ</button>
  </div>

 <script>
   new Vue ({
     el: '#app',
     data: {
       ok: true
     }
   })
  </script>
 </body>
</html>

```
JenkinsでSlackにリリース情報を流すのを自動化した

# 事前準備
- slackのwebhook用URLを取得しておく。

# リリース情報を流す
- git logを所定の方法で取得し、その結果をそのままslack通知として流している
- 当日の午前10時以降にマージされたPRのタイトルを出力している
- 前日にマージされたものは出ないので運用でカバー
 - 現状、マージした日にリリースするので基本的に大丈夫
- `<!channel>` で `@channel`のメンションになる

```bash
git checkout master
git pull origin master
LOG=`git log --merges --since=10am --pretty=format:"* %b"`
JSON="{\"text\": \"<!channel>\n【リリース情報】\n${LOG}\"}"

curl -X POST \
   https://hooks.slack.com/services/pass/to/webhook \
 -H 'content-type: application/json' 
 -d "${JSON}"
```

# やってよかったこと
- マージ・リリース後の全体周知作業を今まで手作業で行っていた
- リリースが成功した瞬間にこのコマンドが実行されるようにしたため、リリース後の作業が一つ減った。
 - 日に2〜3回リリースすることもあるため、そのたびに周知する手間がなくなった。 
- 即周知ができるようになったので、リリースしたけど周知は明日、ということがなくなった。
- 自動化したことで、「（そのまま使われるので）PRのタイトルにはちゃんとしたものをつける」というフローに自然と寄せやすくなった

# 参考
- [今日マージされたプルリクエストのタイトル一覧を表示するgitコマンド](https://qiita.com/mishimay/items/baa23f3b8c2cd62cf817)
Jenkinsを使って特定のブランチ＋そのブランチからmasterへのPR作成を自動化した

# Personal access tokensの発行
下準備としてGitHub上でトークンを発行する必要がある。

- [GitHub「Personal access tokens」の設定方法](https://qiita.com/kz800/items/497ec70bff3e555dacd0)
- 権限はプライベートリポジトリのPR作成だったため、「repo」の権限を全部チェックした。
- なお、トークンは自分のアカウントではなく、デプロイ用のユーザーアカウントで作成

# シェル全体
1. `release/[Y-m-d]`という名前のブランチをつくる
1. 空コミットしてプッシュする
1. PRを作成する

```bash
RELEASE_DAY=`date "+%Y-%m-%d"`
RELEASE_BRANCH="release/${RELEASE_DAY}"

# ブランチ作成
git branch -D ${RELEASE_BRANCH}
git checkout master
git pull origin master
git checkout -b ${RELEASE_BRANCH}
git reset --hard origin/master
git commit --allow-empty -m "${RELEASE_DAY}リリース分"
git push -u  origin ${RELEASE_BRANCH}

# PR作成
TOKEN="tokendayo"
BODY="## コメント見出し\n https:\/\/github.com\/organizationName\/projectName\/pulls?utf8=✓&q=is:pr+base:release\/${RELEASE_DAY}"
JSON="{\"title\": \"${RELEASE_DAY}リリース分\", \"head\": \"organizationName:release/${RELEASE_DAY}\", \"base\": \"master\", \"body\": \"${BODY}\" }"

curl -H 'Content-Type:application/json' -H "Authorization: token ${TOKEN}" \
     "https://api.github.com/repos/organizationName/repositoryName/pulls" \
     -d "${JSON}"
```

# ブランチ作成
- 「ソースコード管理」のセクションでgitリポジトリを紐付けておく
- gitコマンドでmasterを最新にした上でブランチ作成
- すでに同名ブランチがある場合は作成に失敗するため、作る前にブランチ削除を実行
- 現在の運用上、同じ日に2回以上同名のブランチを作る（＝1日に2回以上実行する）ことがあるので、空コミット前にmasterと同じ状態に揃える。 
- 空コミットしてプッシュする

```bash
RELEASE_DAY=`date "+%Y-%m-%d"`
RELEASE_BRANCH="release/${RELEASE_DAY}"

git branch -D ${RELEASE_BRANCH}
git checkout master
git pull origin master
git checkout -b ${RELEASE_BRANCH}
git reset --hard origin/master
git commit --allow-empty -m "${RELEASE_DAY}リリース分"
git push -u  origin ${RELEASE_BRANCH}
```


# PR作成
- curlを使ってPR作成
- 最初に発行したtokenはここで使う
- GitHubAPIを叩くだけ
- 自動作成したブランチに対してマージされたorPR中のものを一覧するためのリンクも生成している
- JSONについて
 - title: PRのタイトル
 - head: PRを出すブランチ名
 - base: マージ先のブランチ名（master）
 - body: PRに表示されるコメント（markdown）
- JSON内に変数を使う場合はご覧の通りエスケープを頑張る必要がある

```bash
TOKEN="tokendayo"
BODY="## コメント見出し\n https:\/\/github.com\/organizationName\/projectName\/pulls?utf8=✓&q=is:pr+base:release\/${RELEASE_DAY}"
JSON="{\"title\": \"${RELEASE_DAY}リリース分\", \"head\": \"organizationName:release/${RELEASE_DAY}\", \"base\": \"master\", \"body\": \"${BODY}\" }"

curl -H 'Content-Type:application/json' -H "Authorization: token ${TOKEN}" \
     "https://api.github.com/repos/organizationName/repositoryName/pulls" \
     -d "${JSON}"
```

# 備考
- PRを作る所はシェルを使わずにやる方法もいろいろあった
- git操作は普通にgitコマンド使うのが手軽

# 参考
- [github で自分のリポジトリに pull request を投げたい](https://www.getto.systems/entry/2016/04/20/192727)
【C++】エレガントな再帰2選

# エレガントな再帰2選
おーってなった再帰関数を2つ紹介するだけです笑

## 1. 10進数を2進数で表示する再帰関数

```bin.cpp
void bin(int n)
{
  if (n < 2)
    cout << n;
  else {
    bin(n/2);
    bin(n%2);
  }
}
```

## 2. 最大公約数を求める再帰関数

```gcd.cpp
int gcd(int m, int n)
{
  if (n == 0)
    return m;
  else
    return gcd(n, m%n);
}
```
YOLP JavaScript API 地図に Mapbox GL JS 地図を連動させる

## 概要
- YOLP JavaScript API と Mapbox GL JS の2枚の地図を横に並べる
- YOLP JavaScript API の地図のスクロール移動や縮尺変更をした際に、Mapbox GL JS の地図を同じように動かす

## ソースコード

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <title>Twin maps</title>
  <script src="https://map.yahooapis.jp/js/V1/jsapi?appid=___YOUR_APPLICATION_ID___"></script>
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.2.1/mapbox-gl.css' rel='stylesheet' />
  <style>
    body  { position:absolute; margin:0; padding:0; width:100%; height:100%; }
    #ymap { position:absolute; top:0; left:0;   width:50%; height:100%; }
    #bmap { position:absolute; top:0; left:50%; width:50%; height:100%; }
  </style>
</head>
<body>

<div id='ymap'></div>
<div id='bmap'></div>

<script>
// YOLP 地図を表示
var ymap = new Y.Map('ymap', {
  configure: {
    doubleClickZoom: true,
    scrollWheelZoom: true,
    continuousZoom: true
  }
});
ymap.drawMap(new Y.LatLng(35.1707925, 136.882763), 16, Y.LayerSetId.NORMAL);

// YOLP 地図の移動後の処理
ymap.bind('moveend', function(){
  // YOLP 地図の中心緯度経度に Mapbox 地図を移動　
  let c = ymap.getCenter();
  bmap.panTo(new mapboxgl.LngLat(c.lng(), c.lat()));
});

// YOLP 地図の縮尺変更後の処理
ymap.bind('zoomend', function(){
  // YOLP 地図のズームレベルに Mapbox 地図を合わせる
  let z = ymap.getZoom();
  bmap.setZoom(z - 2); // ズームレベル数値が2段階ほどちがう
});

// Mapbox のアクセストークンをセット
mapboxgl.accessToken = '___YOUR_MAPBOX_ACCESS_TOKEN___';

// Mapbox 地図を表示
var bmap = new mapboxgl.Map({
  container: 'bmap', // container id
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [136.882763, 35.1707925],
  zoom: 14,
});
</script>

</body>
</html>
```

## スクリーンショット

<img width="1440" alt="yolp-mapbox-1.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/1f5012fb-f424-a0c0-ed94-00daf2995caa.jpeg">

<img width="1440" alt="yolp-mapbox-2.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/d8090ab7-d05b-76f8-8018-88fae203097b.jpeg">

<img width="1440" alt="yolp-mapbox-3.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/ee9c3471-6538-4dd5-2714-24db51d899c0.jpeg">

<img width="1440" alt="yolp-mapbox-4.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/0fe3c2e6-f606-1ddd-fc10-bf99023848d7.jpeg">

<img width="1440" alt="yolp-mapbox-5.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/ac447d34-20e7-3541-4a51-8faf9861b777.jpeg">

<img width="1440" alt="yolp-mapbox-6.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/dd283aa0-a9ce-57f3-1c3d-3391fa0579fd.jpeg">

<img width="1440" alt="yolp-mapbox-7.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139365/12e4a804-461c-4470-9996-c7f5f8264b39.jpeg">

## 参考資料
- [YOLP\(地図\):Yahoo\! JavaScriptマップAPI \- Yahoo\!デベロッパーネットワーク](https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/js/)
- [API Reference \| Mapbox GL JS \| Mapbox](https://docs.mapbox.com/mapbox-gl-js/api/)
Vagrant ファイル共有とマウントエラー対処法

# 経緯
これまでファイル転送ツールCyberduckを使用して開発を行っていたが、起動が煩わしく感じるようになったため、マウントさせてhost側とguest(Vagrant)側でファイルを共有することにした

# やりたいこと
host側のファイルとguest側のファイルを共有することで、hostとguest双方で編集をできるようにする。
今回はhost側の`~/sample`ディレクトリとguest側の`/share`ディレクトリを共有させることにする(`~/samle`配下と`/share`配下を共有)


# 環境
Windows10 / macOS Mojave 10.14.6
VirtualBox 6.0.10
Vagrant 2.2.5

# guestへ共有したいディレクトリをhostに生成する

```sh
$ mkdir ~/sample
```

# Vagrantfile生成

```sh
# 初期化してVagrantfile生成
$ vagrant init
```

`Vagrantfile`の中身を編集する

```sh:Vagrantfile
（編集前)
# Share an additional folder to the guest VM. The first argument is
# the path on the host to the actual folder. The second argument is
# the path on the guest to mount the folder. And the optional third
# argument is a set of non-required options.
# config.vm.synced_folder "../data", "/vagrant_data"

(編集後)
# Share an additional folder to the guest VM. The first argument is
# the path on the host to the actual folder. The second argument is
# the path on the guest to mount the folder. And the optional third
# argument is a set of non-required options.
config.vm.synced_folder "~/sample", "/share"
```

# 設定完了後はリロードしてSSH接続

```sh
$ vagrant reload
$ vagrant up
$ vagrant ssh
```

以上でhost側の`~/sample`やguest上の`/share`での編集が共有されるようになる

# マウントエラー
`vagrant reload`や`vagrant up`時に次のようなマウントエラーが発生する場合の対応

```sh:エラー内容
Vagrant was unable to mount VirtualBox shared folders. This is usually
because the filesystem "vboxsf" is not available. This filesystem is
made available via the VirtualBox Guest Additions and kernel module.
Please verify that these guest additions are properly installed in the
guest. This is not a bug in Vagrant and is usually caused by a faulty
Vagrant box. For context, the command attempted was:

mount -t vboxsf -o uid=1000,gid=1000 share /share

The error output from the command was:

mount: unknown filesystem type 'vboxsf'
```

hostとguest間のフォルダ共有はGuest Additionsが提供しており、このバージョンが不一致の場合上記のエラーが発生する。詳しくは[こちら](https://qiita.com/KZ-taran/items/663054683cd7818aea71)。

```sh:対処
$ vagrant plugin install vagrant-vbguest
$ vagrant vbguest
$ vagrant vbguest --status
GuestAdditions 5.0.16 running --- OK.
$ vagrant reload
```

以上でguest(vagrant)`/share'ディレクトリが生成され、ファイル共有が完了
[ゼロから作るDeep Learning]ニューラルネットワークの出力層について分かりやすく解説してみた

#はじめに
この記事は**ゼロから作るディープラーニング 4章ニューラルネットワーク**を自分なりに理解して分かりやすくアウトプットしたものです。
文系の自分でも理解することが出来たので、気持ちを楽にして読んでいただけたら幸いです。
また、本書を学習する際に参考にしていただけたらもっと嬉しいです。

#ニューラルネットワークの出力層について
前回の記事でニューラルネットワークの中間層の実装まで解説しましたので、次は出力層を解説したいと思います。

ニューラルネットワークの出力層も簡単に言って仕舞えば活性化関数が違うだけで、ほとんどパーセプトロンの構造と変わりはありません。
しかし、出力層の活性化関数は機械学習のどの種類の問題を解くかによって変わってきます。
機械学習の分類問題を解きたいときは出力層に**softmax関数**を使い、機械学習の回帰問題を解きたいときは出力層に**恒等関数**を使います。

それではそれぞれを解説していきます。
#分類問題を解く場合
分類問題を解きたいときは出力層に**softmax関数**を使います。さらにニューロンの数は分類したい種類の数と合わせます。

**softmax関数**は入力された値を確率的意味のある値に変換する関数です。これは言葉だとあまり理解しやすくないので、数式と図を出してみます。
<img width="734" alt="スクリーンショット 2019-10-18 19.34.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510602/c6a375e4-85d3-b63f-934b-49d3ef4d5ddd.png">
<img width="314" alt="スクリーンショット 2019-10-18 19.46.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510602/fa806c34-67b3-9a10-ac19-85a924dd626b.png">

上のようにニューラルネットワークが分類があっている確率を各分類の種類ごとに出してくれます。
具体的な処理としては、ネイビア数＊＊入力値　➗　ネイビア数＊＊入力値の総和　をしていますが、処理の意味は考えずに、こんな処理するんだぐらいに留めておきましょう。

ではpythonで実装してみましょう。

```python
b = np.array([0.3,2.9,4.0])
def softmax_function_pro(x):
    x_max = np.max(x)
    exp_x = np.exp(x - x_max)
    exp_sum = exp_x.sum()
    y = exp_x / exp_sum
    return y
softmax_function_pro(b)
```

上のコードはオーバーフロー問題に対応しています。
オーバーフロー問題とは、コンピュータはものすごく大きな値を扱うのが苦手なので、ものすごく大きな値ができてしまった場合、不具合を起こしてしまう問題です。softmax関数は指数計算を使っているので、ものすごく大きな数ができやすいです。

上のコードだと、全ての入力値からそれらの入力値の最大値を引いてあげて、値を小さくすることによって指数計算でものすごく大きな数ができてしまうのを防いでいます。

#回帰問題を解く場合
回帰問題を解くときは、**恒等関数**と言う関数を使います。
ですが、この関数は入力された値をそのまま出力するだけなので解説する必要もないでしょう。

一応コードは書いておきます。

```python
def koutou_function(x):
    return x
```
django-herokuのinstallでエラー"python setup.py egg_info" failed with error code 1


#現象
django-herokuを

```text:Commandline
$ pip install gunicorn django-heroku
```

でインストールしようとしたら、

```text:Commandline

  Using cached https://files.pythonhosted.org/packages/8c/da/b8dd8deb741bff556db53902d4706774c8e1e67265f69528c14c003644e6/gunicorn-19.9.0-py2.py3-none-any.whl
Collecting django-heroku
  Using cached https://files.pythonhosted.org/packages/59/af/5475a876c5addd5a3494db47d9f7be93cc14d3a7603542b194572791b6c6/django_heroku-0.3.1-py2.py3-none-any.whl
Collecting dj-database-url>=0.5.0 (from django-heroku)
  Downloading https://files.pythonhosted.org/packages/d4/a6/4b8578c1848690d0c307c7c0596af2077536c9ef2a04d42b00fabaa7e49d/dj_database_url-0.5.0-py2.py3-none-any.whl
Collecting psycopg2 (from django-heroku)
  Using cached https://files.pythonhosted.org/packages/5c/1c/6997288da181277a0c29bc39a5f9143ff20b8c99f2a7d059cfb55163e165/psycopg2-2.8.3.tar.gz
    Complete output from command python setup.py egg_info:
    running egg_info
    creating pip-egg-info/psycopg2.egg-info
    writing pip-egg-info/psycopg2.egg-info/PKG-INFO
    writing dependency_links to pip-egg-info/psycopg2.egg-info/dependency_links.txt
    writing top-level names to pip-egg-info/psycopg2.egg-info/top_level.txt
    writing manifest file 'pip-egg-info/psycopg2.egg-info/SOURCES.txt'
    
    Error: pg_config executable not found.
    
    pg_config is required to build psycopg2 from source.  Please add the directory
    containing pg_config to the $PATH or specify the full executable path with the
    option:
    
        python setup.py build_ext --pg-config /path/to/pg_config build ...
    
    or with the pg_config option in 'setup.cfg'.
    
    If you prefer to avoid building psycopg2 from source, please install the PyPI
    'psycopg2-binary' package instead.
    
    For further information please check the 'doc/src/install.rst' file (also at
    <http://initd.org/psycopg/docs/install.html>).
    
    
    ----------------------------------------
Command "python setup.py egg_info" failed with error code 1 in /private/var/folders/xw/wptsp9vd2_z3lb0blxvdrmrm0000gn/T/pip-install-ot79i400/psycopg2/


```

#環境

`macOS 10.14.1`
`Python 3.7.3`

#解決策
以下を実行して`postgresql-devel`をinstall。

```text:Commandline
$ brew install postgresql-devel
```

#参考
[pipのpsycopg2のインストールでError: pg_config executable not found](https://qiita.com/Esfahan/items/9bf26c88d10d4f5faee5)
Laravel6.0の最初にLaravelって表示さしてユーザのログイン画面、管理画面を作るところまでのコマンド一覧

## Composerのインストール
```terminal
$ curl -sS https://getcomposer.org/installer | php
$ sudo mv composer.phar /usr/local/bin/composer
$ composer -V
```

## Laravelのインストール

htdocs配下まで階層を移動して、コマンドを打ちます。
*********** の部分に、ご自由にプロジェクト名を入れてください。

```terminal
$ composer create-project laravel/laravel --prefer-dist ***********
$ cd ***********/
$ chmod -R 777 storage
$ chmod -R 777 bootstrap/cache
```

## ログイン画面の表示

※Laravel6.0からコマンドが異なります。

```terminal
$ composer require laravel/ui
$ php artisan ui vue --auth
```
[Python][MeCab] Mac に oseti をインストールする

# oseti とは

Python で [感情分析 (Sentiment Analysis)](https://en.wikipedia.org/wiki/Sentiment_analysis) を行うためのライブラリ。詳しくは次の記事を参照。

* [[Qiita] 日本語評価極性辞書を利用したPython用Sentiment Analysisライブラリ oseti を公開しました](https://qiita.com/yukinoi/items/46aa016d83bb0e64f598)

# インストールするもの

* [MeCab](https://taku910.github.io/mecab/) : 日本語向けの形態素解析エンジン
* mecab-ipadic : IPA 辞書 (形態素解析エンジン用の辞書)
* [mecab-ipadic-NEologd](https://github.com/neologd/mecab-ipadic-neologd) : 新語対応版の辞書
* [SWIG](http://www.swig.org/) : C/C++ で書かれたプログラムやライブラリを別のプログラミング言語 (Java, Python, Ruby etc.) に接続するためのツール
    * oseti が依存している mecab-python3 のインストールに必要。
* [oseti](https://pypi.org/project/oseti/) : 感情分析用ライブラリ

# 前提

* Homebrew をインストールしていること。
* Python (3 系) をインストールしていること。
    * インストールしていない場合は [pyenv](https://github.com/pyenv/pyenv) などを使ってインストールする。

# 方法

```sh
$ brew install mecab
$ brew install mecab-ipadic

# リポジトリを git clone するための任意のディレクトリに移動する。
$ cd ~/workspace
# --depth 1 で最新のコミットのみを取得 (大容量のリポジトリを clone する場合に有効) 。
$ git clone --depth 1 https://github.com/neologd/mecab-ipadic-neologd.git
$ cd mecab-ipadic-neologd
$ bin/install-mecab-ipadic-neologd -n -a
# 途中で "Do you want to install mecab-ipadic-NEologd?" と訊かれるので yes と打つ。

$ brew install swig

$ pip install oseti
```

# 使用例

```python
import oseti

analyzer = oseti.Analyzer()
analyzer.analyze_detail('津々と悲しみだけが降り積もる 願望も悔恨もただ埋め尽くす')
#=> [{'positive': ['願望'], 'negative': ['悲しみ'], 'score': 0.0}]
analyzer.analyze_detail('光を求め歩きつづける 君の情熱がいつの日か 誰かにとっての光となるでしょう 誰かにとっての兆しとなるでしょう')
#=> [{'positive': ['光', '情熱', '光'], 'negative': [], 'score': 1.0}]
```

# 参考

* [IPADIC(IPA辞書)とはなにものか？](http://parame.mwj.jp/blog/0209)
* [[Qiita] Python3からMeCabを使う](https://qiita.com/taroc/items/b9afd914432da08dafc8)
* [[Qiita] 日本語評価極性辞書を利用したPython用Sentiment Analysisライブラリ oseti を公開しました](https://qiita.com/yukinoi/items/46aa016d83bb0e64f598)
* [MeCab と mecab-ipadic-NEologd と Python3 で形態素解析](https://www.saintsouth.net/blog/morphological-analysis-by-mecab-and-mecab-ipadic-neologd-and-python3/)
* [[Qiita] メンヘラがツイートを形態素解析して気分の波を調べた結果www](https://qiita.com/yusuke_astro/items/dc38802b81f348189a98)
PlayCanvas Editorで作成したプロジェクトをローカルで動かす

## 作成したプロジェクトをローカルで動かす

PlayCanvas Editorで作成したプロジェクトをローカルの環境で動かす方法を説明します。

#### 必要なもの

![](/assets/node.png)
![image](https://user-images.githubusercontent.com/39250588/67087671-e8841400-f192-11e9-8678-27530ec176d2.png)


- Node.js

### ビルドしたプロジェクトをダウンロード

#### 1. Publish / Download をクリック

![](/assets/pbd.png)
![image](https://user-images.githubusercontent.com/39250588/67087682-ef128b80-f192-11e9-8388-cbe0eba035db.png)

#### 2. DOWNLOAD.ZIP をクリック

![](/assets/b3.png)
![image](https://user-images.githubusercontent.com/39250588/67087695-f20d7c00-f192-11e9-90a1-9c98869264ed.png)

* 「Web DOWNLOAD」を選択します。

![](/assets/webd.png)
![image](https://user-images.githubusercontent.com/39250588/67087698-f5a10300-f192-11e9-8dfd-4056541be7dd.png)

* DOWNLOADボタンをクリックすると`プロジェクト名".zip`がダウンロードされます。

![](/assets/zipd.png)
![image](https://user-images.githubusercontent.com/39250588/67087710-fd60a780-f192-11e9-8d92-ba17661d2a40.png)

#### 2. 作成したプロジェクトをローカルで動かす

![](/assets/zipk.png)
![image](https://user-images.githubusercontent.com/39250588/67087725-00f42e80-f193-11e9-9935-e8791d157625.png)

今回は`http-server`コマンドを使用してローカルのサーバを立て確認をします。コマンドラインからダウンロードをしたプロジェクトまで移動をし、http-serverを実行して作成したPlayCanvasのプロジェクトを確認します。ダウンロードした`プロジェクト名.zip`は解凍しておいてください。

#### 3. プロジェクトへ移動する

![](/assets/cd.png)
![image](https://user-images.githubusercontent.com/39250588/67087738-03ef1f00-f193-11e9-8f44-2f99c83f0b6d.png)

コマンドラインを立ち上げて対象のディレクトリへ移動をします。
* `cd "解凍したディレクトリのパス"`

#### 4. http-server を実行する

![](/assets/local.png)
![image](https://user-images.githubusercontent.com/39250588/67087744-06ea0f80-f193-11e9-9e60-155ab530bbd4.png)

http-serverを実行する対象のディレクトリへnpxコマンドを使用してhttp-serverを実行します。
* `npx http-server`

#### 5. 確認  
http-serverを実行したら出てくるIPアドレスにアクセスをするとローカルで確認できますデフォルトでは`http://127.0.0.1:8080`でアクセスできます。

ローカル環境を使用して、PlayCanvasで作成したプロジェクトを起動できました。


### PlayCanvasのユーザー会のSlackを作りました！
少しでも興味がありましたら、ユーザー同士で解決・PlayCanvasを推進するためのSlackを作りましたので、もしよろしければご参加ください！

[日本PlayCanvasユーザー会 - Slack](https://t.co/IdSRIfJhN5?amp=1)
Qiita CLI Application 作ってみた

# ことのはじまり

Qiitaに記事書きたいけどブラウザ開いていちいちQiitaのエディタ開くのめんどいな〜

`Vim`使って`MarkDown`で記述してアップロードしたいな〜

よっしゃ作ったろ！

# Qiita に記事をアップロードするコマンド

漠然としたイメージとしては、手頃なテキストエディタで`article.md`のようなファイルを作成し、

``` console
$ qiitacli upload [記事のtitle] article.md
```

と叩いたら記事がアップロードされるイメージ。`Python`と`Click`というモジュールを使ったらできそう。
なぜ`Python`なのかと言うと私が一番使い慣れているからです。

# `Qiita API v2`

Qiitaには`Qiita API v2`というAPIがあります。

[`Qiita API v2`](https://qiita.com/api/v2/docs)

これを利用すればQiitaに関する操作はだいたい何でもできそう。

# `qiita_2`

こういうのはたいてい誰かがもう作っているものなので`PyPI`で`qiita`とか入れて検索してみたらありました。

[`qiita_v2`](https://github.com/petitviolet/qiita_py)

ありがたく使わせていただきましょう。

# 開発の準備あれこれ

私がPythonで開発する時は以下のことを意識して開発しています。

* テストを書く(`pytest`利用)
* コード整形ツールを使う(`flake8`,`autopep8`,`autoflake`,`isort`利用)
* `PyPI`にアップロード出来るように`setup.py`と`setup.cfg`を作る

今回は更に以下の事にも挑戦してみました。

* Travis CIを利用した自動テストの設定
* Codecovの利用したコードカバレッジの計測

GitHubとか見てるとよくある
[![Build Status](https://travis-ci.org/mypaceshun/qiitacli.svg?branch=master)](https://travis-ci.org/mypaceshun/qiitacli)
このバッチを付けたかっただけですw

# 作った

https://github.com/mypaceshun/qiitacli

ひとまず作ってみました。
この記事もこのコードを使って上げています。

Qiitaの個人用アクセストークンを利用して、記事の一覧・公開・編集・削除だけ出来るようになりました。

とりあえず最低限。

# 課題

このままだと`Markdown`形式の文章をアップロードするだけなので、画像を付けたり細かい装飾は出来なさそう。
もともと簡単なメモとかでもどんどん記事にしていこうと思って作ったものなのでとりあえずそこまではいいかなって感じです。
気が向いたら改良して見るかも。

# 作っていて思ったこと

Travis CI は2回くらい使ったことがあったのでなんとなくわかっていました。
ただ、使ったことがあったのがまえすぎてテストコードを書くのに慣れていなかったのであんまり恩恵を感じられなかったんですよね...

最近ようやく`pytest`を使ったテストコードをかけるようになってきたので、自動テストのありがたみがマシマシでした。

あとCodecovに関しては今回完全に初見でした。
コードのカバレッジ自体最近計測するようになった者なので、カバレッジを見れたりテストが通っていないコードを眺められるのはとてもよかったです。
カバレッジを100%にしたい衝動にかられるけどそもそもカバレッジを上げるだけの無駄なテストコードを量産する意味もわからないしああああって感じ、
いろいろやってみて試してみてって感じですね。
MonacaでFont Awesomeが豆腐になった件

実機だとFont Awesomeのアイコンが一部表示されない。

Monacaとローカル（Nuxt）でFont Awesomeのバージョンが違うのが原因だった。

Monacaだとテンプレート用いてアプリを新規作成するとwww/main.cssに初期状態でFont Awesomeが入っている。

ただ、このバージョンが4.6.3と古いためにFont Awesome5の書き方をすると表示されない。

5.8.1をダウンロードしてきてsrc/css/以下にall.min.cssを配置し、src/css/と同階層にwebfontsディレクトリを配置した。

そして、main.jsでmain.cssをrequire()した。
Vue.jsでいい感じに非同期の連投防止したい

Vue.jsで連投防止するのに、個人的に楽なやり方ができたのでメモ。連打しないでほしいね。

# とりあえずブツ
以下のmixinを使う。

```javascript:multipost_avoidable.js
export default {
  data() {
    return {
      isPosting: false
    };
  },
  methods: {
    beginPost() {
      this.isPosting = true;
    },
    endPost() {
      this.isPosting = false;
    },
    async avoidMultipost(func) {
      if (this.isPosting) {
        return null;
      }
      this.beginPost();
      let res = await func();
      this.endPost();
      return res;
    }
  }
};

```

# つかいかた
上のmixinを `import` して連投が起こりうる処理を `avoidMultipost` のコールバックとして渡す。送信後に画面遷移する場合などは、その処理もコールバック内に記述しましょう。 `async function` であることに注意。

```javascript:Component.vue
// いろいろ省略
import MultipostAvoidable from "/path/to/mixin/multipost_avoidable";

export default {
  mixins: [MultipostAvoidable],
  methods: {
    async post() {
      this.avoidMultipost(async () => {
        // ここに非同期の通信処理 ex.: await axios.post(/path, data)
      });
    }
  }
};
```

# しくみ
単純ですが、`data` プロパティに `isPosting` というパラメータを持っておき `avoidMultipost` 内のコールバックの実行前後で、 `isPosting` の状態を切り替えています。 `isPosting` が `true` の場合はコールバックを実行しないようにして連投を防止しています。

コンポーネント内で連投防止処理を書くときに毎回 `this.beginPost();` `this.endPost();` で囲むのがしんどかったり、書き忘れるのが怖いので、デコレータみたいな感じにした。

投稿と同時に `Button` 要素を無効にしたいとかいう場合は該当要素に `:disabled="isPosting"` とかしてあげればいいと思います。
SSL/TLS、HTTPS、サーバー証明書を理解したい


##はじめに
SSL/TLS、HTTPSについてざっくり理解したのでまとめました。超ざっくりです。
間違っている箇所があれば指摘いただけると幸いです。
前半で用語解説、後半で図解しています。

##SSL/TLSとは
*SSL(SecureSockets Layer)/TLS(Transport Layer Security)*
SSLとTLSは別物だが、どちらも安全な通信のためのプロトコル（決まり）。
SSLが先に開発されたが、SSLに重大な脆弱性が発見されたため、後継としてTLSが開発された。
いま現在使用されているプロトコルはTLSだが、便宜上SSLやSSL/TLSと呼ばれている。
サーバ証明書、公開鍵、秘密鍵、共通鍵を用いた暗号化方式。

##HTTPS通信とは
SSLで暗号化されたHTTP通信のこと。
HTTP over SSL/TLS→HTTPS
HTTPS通信を行うサーバーにはサーバー証明書と秘密鍵を含むファイル群をインストールする必要がある。
最近のGoogle Chromeでは、すべてのページがSSL化されていないサイトには「保護されていない通信」という旨の警告が出る。

##サーバー証明書とは
SSLサーバー証明書
信頼される認証局が、そのサイトの所有者の実在性を審査してOKだった場合のみ発行する。

##SSL/TLS通信の概要
![ssl.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191739/04e45fee-47d4-36b2-0df4-e0ff0b0a149c.png)
※Client＝私たちが普段使っているPC、Webブラウザ

##SSL化のメリット
サーバー証明書によって、
・サイトのなりすまし
暗号化によって、
・通信の盗聴
・通信の改ざん
を防止することができる。

以上

##さいごに
メモ程度の記事ですがどなたかのお役に立てば幸いです。