OmniAICreator/Qiita-1.07M huggingface dataset:
JsDocをもとにドキュメントを自動生成する

# [Documentation.js](https://documentation.js.org/)

コマンドひとつで、ドキュメントを自動生成してくれる！

## まずは、JsDocで記述

JsDocの概要については、おググりください。
VSCodeとかだと、関数の上の行で`/** + Enter`でJsDocテンプレートが挿入される

```js
import { TweenMax } from 'gsap';

/**
 * TweenMax の基本操作
 */
export default class TweenAnimation {
  /**
   * @param {any} target
   * @param {number} duration
   * @param {gsap.TweenConfig} vars
   */
  constructor(target, duration, vars) {
    this._tween = TweenMax.to(target, duration, vars);
  }

  /**
   * アニメーションを止める
   * @param {any} [atTime]
   * @param {boolean} [suppressEvents]
   */
  pause(atTime, suppressEvents) {
    this._tween.pause(atTime, suppressEvents);
  }
}
```

### 生成されたドキュメント (HTML形式の場合) の一部

![スクリーンショット 2019-05-23 11.38.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/97955/f8a446f4-41c8-10c2-0c28-67248834e9e8.png)

## 使い方

### インストール

`yarn add -D documentation`
(or `npm i -D documentation`)

### HTML形式でドキュメント生成

`documentation build path/to/your/javascript.js -f html`
`documentation build src/** -f html -o docs`

### MarkDown形式でドキュメント生成

`documentation build path/to/your/javascript.js -f md`
`documentation build src/** -f md -o docs.md`

### オプションについて

- `-f`: フォーマット (`html`, `md`)
- `-o`: アウトプット(出力)
    - HTML形式の場合、生成するディレクトリ名を指定
        - `index.html`や`assets/`が格納される
    - MarkDown形式の場合、ファイル名`.md`

## 番外編: ファイルに変更があったら、ドキュメントを更新

- さらに、HTMLでもMarkDownでも生成したい場合の例

`yarn add -D documentation chokidar-cli npm-run-all`
(or `npm i -D documentation chokidar-cli npm-run-all`)

```package.json
"scripts": {
  "watch": "chokidar 'src/es6/**' -c 'npm run docs'",
  "docs": "npm-run-all -p docs:*",
  "docs:html": "documentation build src/es6/** -f html -o docs/es6",
  "docs:md": "documentation build src/es6/** -f md -o docs/es6/README.md"
}
```

実行
`yarn watch`


## 参考
- Documenting Javascript Projects *With JSDoc, Flow, and Documentation.js*
  - https://medium.com/4thought-studios/documenting-javascript-projects-f72429da2eea
git 最新版インストール

* curl コマンドで master.zip を取得失敗した場合のケース

```
# 旧バージョン インストール 
yum install git

# 最新版ダウンロード（ git clone )
git clone https://github.com/git/git.git

# 旧バージョン アンインストール
yum remove git

# 必要ライブラリ インストール
yum -y install gcc gcc-devel
yum -y install openssl-devel
yum -y install libcurl-devel
yum -y install expat-devel

# git install
make prefix=/usr
make prefix=/usr install
```
UIScrollViewに要らない余白ができてしまうとき

それほどハマったわけではないのですが、スクロールビューになんでか要らない余白ができてしまう現象に悩まされました。

高さを動的に変更しているのですが、スクロールの最後に余白ができてしまう。。。
どこかの高さをうまく取れていないのかなとか遅延処理を入れてみたり試行錯誤してもダメでした。

で、気付いたのが、動的に高さが動いているにも関わらず常に620だけ高さが余分。
どこかの設定がお節介をしているのかもしれません。

最初にやったのは

```swift
self.scrollView.translatesAutoresizingMaskIntoConstraints = true
self.scrollView.contentSize.height = CGFloat(hogeHeight)
```

こんな感じに高さを強引に設定しました。
しかし、やはり高さが変わるときは余分に620だけcontentSize.heightがズレてしまいます。。。

どのタイミングで余計な余白が付け足されているのかわかりませんでした。

なので次に試したのが

```swift
scrollView.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0);
```

調べたところscrollViewにはcontentInsetという余白を設定するフィールドがあるらしく、倣ってやってみましたが変化なし。。。

```swift
scrollView.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: -620, right: 0);
```

「無理やりすぎる。。。ガンジーでも助走つけて殴ってくるだろこれ」なんて思いながら試してみたらなんと予期していた挙動に。

余白が綺麗に消えました

なんだったんでしょうか
基礎知識の補填　Python (タプル)

今回は、タプルについてリストとの違いが曖昧だったので勉強し直してみた。

##タプルとは

- タプルは、リストとよく似ているデータ型である。

- 基本的にリストと同じようにインデックスを使って要素を管理することができる。
また、インデックス指定で要素を取り出したり、スライスを使用して複数要素を取り出すことができる。

## タプルがリストと異なるところ
- タプルはリストと違って要素を書き換えることができない。

- インデックス指定した要素へ代入して要素を書き換えるということができない。
一度、作ったタプルは、要素を追加したり削除したりして長さを変更することができないようになっている。

## タプルの定義

タプルは、丸括弧()で要素を囲み、要素同士はカンマ(,)で区切る。
```
タプル = (要素１, 要素2, ・・・)
```

### 使用例
```
>>> t = (1, 2, 3, 4)
>>> t
(1, 2, 3, 4)  # 出力結果
```

### スライス使用例
```
>>> t[0]
1

>>> t[1:3]
(2, 3)
```

## 書き換えることができない
```
>>> t[0] = 'five'  # ←文字列で更新しようとすると怒られる
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
TypeError: 'tuple' object does not support item assignment
```

## 足し算（連結）することが可能
要素の書き換えや削除等はできないが、新たな要素と足し合わせて（連結）別な変数に入れ込むことが可能。

```
>>> t2 = t + (10, 20, 30)                                                                                            
>>> t2
(1, 2, 3, 4, 10, 20, 30)
```

## タプルを使用するときの注意点
値が１つしかないタプルを作りたい場合は注意が必要。
値が１つしか入ってなくなくても、カンマを付けとかないとタプルとして認識されない。

```
t3 = (1, )
```
パンくず作成Gem「gretel」の設定の解説

gretelに表示させるパンくずの設定の意味が理解出来なかったので忘備録。
公式ドキュメントや他の導入事例と合わせて読むと分かるはず。

<img width="1440" alt="スクリーンショット 2019-05-23 11.27.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269654/dbc5ec78-09c4-2a66-f056-4e1c4993417f.png">

画像上部のルートパスが下のbreadcrumb.rbのパスになる
Ex.)showのパスは myappsなので、breadcrumb.rb の該当記載で　myapp_path と記載する。

またshowで言えば`crumb :myapps_show do`と記載されているmyapps_showがviewページに埋め込む際に必要となる情報である。
Ex.)show.html.erbには　`<% breadcrumb :myapps_show %>`と埋め込む

application.html.erbに埋め込むコードは
<%= breadcrumbs pretext: "You are here: ", separator: " &rsaquo; " %>
の方

参考記事：
https://qiita.com/you8/items/d2d37a745060b79c112f
https://github.com/WilHall/gretel
http://vdeep.net/rubyonrails-gretel
2~Nまでの素数を求めよう！って時の√Nってなんで？？？

##そもそも素数とは
### 引用
>素数（そすう）とは、
1 と自分自身以外に正の約数を持たない自然数で、1 でない数のことである。
ユークリッドの著書『原論』によって素数が無数に存在することが証明されている。


### リンク

[Wiki:素数](https://ja.wikipedia.org/wiki/%E7%B4%A0%E6%95%B0%E3%81%AE%E4%B8%80%E8%A6%A7):WikiのMarkdownのページ


###　本題

なぜ√Nまででいいのか    
N = ab が成立すれば約数があり素数ではないということがわかる。
例として　N=12としよう　そうすると 
(a,b)=(1,12)(2,6)(3,4)(4,3)(6,2)(12,1)である。
少なくとも片方は√12以下(<=3.46)ということが分かるだろうか
なぜ√12以下になるのか・・・

**N = √N × √N**　
どちらかが増えれば　N = を保つために減らなければならない。
両方ともが√Nを超えてしまうとそれはNではなくなってしまう
このことからどちらかが√N以下になるのである。

##まとめ##
√Nまでの約数を見れば残りの約数は対になっており必然的にわかります。

まとめてみましたが、難しかったです。
違うところがあれば教えてください。
エンジニアと英語の付き合い方 1

#1. はじめに
英語勉強したいというエンジニアにむけて。普段から、英語勉強したらいいのか？や勉強しようと思っている。
という人に良く質問を受けるので、その時に良く回答する内容をまとめて見ました。

留学経験等は無くて、俗に言う純ジャパニーズ向けです。
ペラペラになることが目的では無くて、エンジニアとして、英語と戦うのはどうなんだという記事

**本当にやる気がないならやめた方がいい。多分3ヶ月くらいやって投げ出すのが関の山。**
**他のIT資格などと異なり、形成に長期の時間がかかるためだ。**

様々な技術は日本語が出ているし、英語を学ぶ時間があったら、日本語で勉強した方がいい。
また、ネット中心なら右クリックで日本語訳が出てくる（変な日本語だけど）！それ見るだけなら、日本語に訳してもらって勉強した方がいい。
README記載するのだって、適当に書けばなんか伝わります！大切なのはやってみること。

#2. FAQ

## 英語できると優秀
No
じゃあ海外の人はみんな優秀なのか？ということ。
ただ日本では何故か優秀の指標になっている。
多くの文献に当たれるので、知識は多くなるからというのはあるのかも。

## TOEIC 英検 とれば最強
No
取得後に「あーこんなものか」となるはず。
勉強した今でも、読めないもののあるし、聞けないものもある、書けないものもある、しゃべれない部分もある。

## 英語で調べたほうがいい
Yes and No. 
日本語でもよい記事はあるし、悪い記事もある。反対もしかり。
ただ、最新情報や深い情報はやはり英語である可能性は高い。

## 日本語も簡単に翻訳してくれるんでしょ？
No
翻訳家って仕事があるくらいですから。でもプロ並みでなければできます。

## 英語の4大技能
1. Reading(O'Reillyを読む、ログを読む) 
2. Writing(READMEを記載する、質問する) 
3. Listening(webinarで情報収集する、カンファレンスで「翻訳機いりませんとドヤ顔できる」) 
4. Speaking (chat, expressing)

## 英語資格
TOEIC L＆R：ご存知。ランクはA、B、C、Dと分かれていて、Aが860以上、Bが720以上。ライティングとすピーキングはない
英検 ：ご存知。1級から5級まで。こちらは4技能全部ある。
他にもあるよ。

## 英語学習者がよく知っている言葉
SVL:アルクさんが出してくれている語彙のレベル。1〜12まである。それぞれ1000語で構成されていて、12までマスターすると1万2000語になる。

参考までに；
ちゃんと勉強した、中学校の坊や：３０００
ちゃんと勉強した、高校生の坊や；６０００
ちゃんと勉強した、大学生の坊や：９０００(英語の専攻)
くらい

#3. 日本企業に務めるエンジニアに英語が必要なのか？
必要です。といい切れる。
英語が活躍する場所は暗に多い。

1. Reading(O'Reillyを読む、ログを読む) 
2. Writing(READMEを記載する、質問する) 
3. Listening(webinarで情報収集する、カンファレンスで「翻訳機いりませんとドヤ顔できる」) 
4. Speaking (chat, expressing)

英単語を知っていると、意味がすんなり入ってくるときが多々ある。

## エンジニアとして、英語を学ぶということ
- 技術書や、サイトにて些細なことに辞書をつかったり、翻訳機を使ったりすることがなくなるというところ。また慣れると英語で検索するほうが早く答えが見つかる事が多い。

- English Speaker にこだわらない。いや、ペラペラになれるもんならそりゃあそれがいいんですが。まずは最低限、4技能ができれば十分合格点だと思う。
※最低限：英語を使って仕事をするビジネスマンのレベルは準1級くらいとのこと。あとは実践ですね。

- 決して、ペラペラになることではない。まずは一人前のエンジニアに。

- 英語で学ぶということは、思っている以上にレベルが高い。
新しいことを勉強する際に日本語で勉強しても理解できないことを英語で勉強する必要がるから。先ずは、基礎を日本語でつけて、その後英語の文献とステップアップしていくといい。

##どの程度必要なのか？
TOEIC900以上とかは要らない。資格より語彙力が必要。
10000(SVL 10lv)くらいあると、おおよそ読める（読めたような気持ちになれる）。もっと低くても読めるけど、6000程度だと心もとない。
語彙強化していると、いつのまにかTOEIC900くらい行くものさ。

10000に達するには、1年〜1年半くらい結構頑張らなきゃいけない。特に普段の業務をこなしながらだとかなりきついはず。
この修行期間を今後の投資ととらえるか、無駄な期間ととらえるかは本人次第。

因みにTOEIC900くらいの語彙力は1万程度。英検1級は1万5000程度。英検準1級は9000程度
多くの英語専攻の人たちが、準1に到達できずdropする。ちょっと前に学校の先生が準1あまり持ってないみたいなニュースがありましたね。

現在の語彙を知りたい人は以下のサイトで確認できます。
http://testyourvocab.com/
自己申告のサイトなのですが、大抵の人が3000くらいに落ち着くはず。結果から1000位引いた数字が真の数字(経験談)。

##達成方法
深堀りはしないですが、
SVLを利用して1万まで上げるのが一番手っ取り早い。
並行して、技術書やjapantimesなどの新聞を読めばさらに効果アップ(最低限の文法は必要になってしまうのですが。。)！

##語彙達成後
じゃあ語彙1万を達成したら、4大技能が全部満足できるのか！
といったらそうじゃない。get はわかっても get by ってなんだ？ってなるからだ(ここからは終わりなき道)。 
ただ、ガチでない人はここでおしまい。
あとは単語を単純に日本語訳しながら読めば技術書でもなんとか読める。
辞書があまり必要でなくなる。kindleでもなんでも、日本語を出すにはワンクッションが必要。
それがなくなる！というのが「語彙だけ法」の強みだ。

また、いろいろなカタカナで表記された英語の意味がわかるようになっているはず（セミナーでも、ログでもなんでも）。

***本当にやる気がある人は、発音から先にやろう。***
***既に日本式発音がしみついているはず。これを先にやらないと取り返しはつかない。***

#4. 終わりに
**なんだぁあまり効果無いなぁ と思った人。英語の勉強はやめた方がいい。**

これを乗り越えて、ある程度の基準までやりきった人には、次のステップへ！それはまた別の機会に。
EPUBCheck4.2でのエラーについて

　先日発表がありましたEPUBの公式データチェッカー、<a href="https://github.com/w3c/epubcheck" rel="noopener" target="_blank">EPUBCheck4.2</a>なのですが、試用してみたところ、これまでのバージョンでは出なかったエラーが表示されてしまいました。具体的には以下のようなエラーです。

<blockquote>
<strong>ERROR(NAV-011): ./Desktop/test.epub/item/navigation-documents.xhtml(19,73): 'toc' nav must be in reading order; link target 'item/xhtml/p-001.xhtml#toc-2C4CB0422A16-4C9E-B148-05A28E0A49C9' is before the previous link's target in spine order.</strong>
</blockquote>

　従来のバージョンでは出ていなかったエラーが新バージョンでは出るようになったということなので、どういうことなのかちょっと策定に関わった方などに聞いてみたのですが、どうやら以下のような話のようです。

<ol>
	<li>もともとEPUBの仕様としては論理目次（電書協ガイド仕様の場合はnavigation-documents.xhtml）のリンクの表示順はOPFのSPINEの順番と同じでなければならないという決まりがあった</li>
	<li>ただ、これまでのEpubCheckにはそれをチェックする仕組みがなく、論理目次のリンクの表示順を自由に変えてもエラーにはならなかった</li>
	<li>今回のアップデートで厳密にそこをチェックするようになり、エラーになるようになってしまった</li>
</ol>

　確かに規格を厳密に解釈すればエラー扱いになるのかも知れませんが、これに沿ってチェックをすると現在既に市場で流通しているEPUBファイルがかなりの確率でエラー扱いになりそうなのでちょっと困ったなという印象です。<strong>EPUB3.0.1に関してはエラー扱いにしないなどの形でもう少し既に大量に流通しているものへの後方互換性を考慮して欲しかった</strong>というのが正直なところです。

　とは言え新規に作るものはこのルールに従って作れば良いわけなのでそこまで問題はないはず。過去に作ったものへの対応は今後ファイル受け入れストア側の対応状況を見ながら考えたいと思っています。現場に大きな負担がかからない形で収束すれば良いのですが。

なお、OPFについて少し解説しておきますと、これはそのEPUBの書誌情報や収録されているファイル等を記述するパッケージとしてのEPUBのコアになるファイルで、その中のSPINEブロックというのは<strong>「EPUB内に複数収録されているXHTMLファイルを見せる順番を決める」</strong>ことがメインの目的になるものです。ビューア上でEPUBを見ていくとここに書かれている順番通りに内容が表示されます（その他、ページめくり方向の規定や見開き時にページをどちらに配置するかの指定もここ）。今回はここの記述の順番とビューアの目次機能から呼び出す方の目次（論理目次）の記述順が同じでないとエラーになるようになった、という話になります。
Rails Tutorial（2週目）-4-

4章はチェリー本に書いてあることがほとんどだったので、また別でまとめようと思います。

#アクセサーの作成

>attr_accessorは内部的に次のような処理を行っています。

>（1）引数のシンボルすべてに対して以下の処理を繰り返す。

>（2）シンボルで指定された名前のメソッドを定義する。そのメソッドはシンボルの名前の先頭に「@」を付加したインスタンス変数の値を取り出す。

>（3）シンボルで指定されたメソッド名の後ろに「=」を付加した名前のメソッドを定義する。そのメソッドは引数を1つ取り，その値をシンボルの名前の先頭に「@」を付加したインスタンス変数に設定する

attr_accessor によってクラス外からも、インスタンス変数を読み込んだり、変更したり操作できるようになる。

>ユーザー名とメールアドレス (属性: attribute) に対応するアクセサー (accessor) をそれぞれ作成します。**アクセサーを作成すると、そのデータを取り出すメソッド (getter) と、データに代入するメソッド (setter) をそれぞれ定義してくれます。具体的には、この行を実行したことにより、インスタンス変数@nameとインスタンス変数@emailにアクセスするためのメソッドが用意されます。**
ubuntuクライアントのプロキシ設定

#ubuntuでのproxy設定
ubuntuでのproxy設定
毎回打たなくていいように保存しておく。

```
~$ sudo vi /etc/profile.d/proxy.sh

MY_PROXY_URL="http://{user}:{passwd}@{url}:{port}"

HTTP_PROXY=$MY_PROXY_URL
HTTPS_PROXY=$MY_PROXY_URL
FTP_PROXY=$MY_PROXY_URL
http_proxy=$MY_PROXY_URL
https_proxy=$MY_PROXY_URL
ftp_proxy=$MY_PROXY_URL

export HTTP_PROXY HTTPS_PROXY FTP_PROXY http_proxy https_proxy ftp_proxy

~$ source /etc/profile.d/proxy.sh
```

以上
EC2のIPアドレスを調べる方法（超初心者向け）

# はじめに
既にサービス稼働中のAWS EC2にSSH等でアクセスする際、AWSに触れたことの無い方がIPアドレスを知りたいケースがあるかと思い、AWSの詳細になるべく踏み込まず確認する手順をまとめました。

※前提として、AWSマネジメントコンソールでEC2を参照でき、ファイアウォール（セキュリティグループやネットワークACL）が適切に設定され、各インスタンスに対象ユーザーの公開鍵が配布済みであるとします。
※VPCのピアリング接続等を含めると、話がややこしくなるのですが、基本これで行けるハズです。

# 確認方法（準備）

- AWSマネジメントコンソールにログインする。
- ログイン後、トップメニューのサービスより「EC2」を選択する。
- EC2ダッシュボードが表示されるので、EC2のメニューにより「インスタンス」を選択する。
    - トップメニューの右側に表示されている地名が対象リージョンとなっているか確認する。<br>（異なるリージョンを選択していないと場合によってはインスタンス数がゼロと表示されちょっと焦ります）
- 作成済みのインスタンス一覧が表示されるので、一覧の上部右側にある歯車アイコンをクリックし、列に表示する項目を選択する。
    - チェックする項目は、「Name」「インスタンスの状態」「IPv4パブリックIP」「VPC ID」です。それ以外の項目にチェックがあっても構いません。

# 確認方法

- AWS外部からアクセスできるインスタンスは「IPv4パブリックIP」にIPアドレスの値が入っています。
- 「IPv4パブリックIP」の値がハイフンのものは、外部からアクセスすることはできないため、外部からアクセスできるインスタンスを経由することになります。
    - 内部からアクセスする際のIPアドレスは、インスタンス一覧にチェックを入れると「説明」が表示され、「プライベートIP」で確認することができます。
    - 「VPC ID」が同一のインスタンス内で原則アクセスすることができます。（VPCの設定次第では例外もある）

以下、インスタンス一覧のイメージ図です（パブリックIPアドレス等はマスキングしています）

![ec2イメージ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55290/ca3b07bc-effe-9a10-a924-586fdff2fa4a.png)

- 例えば、選択中の `or-dev-web-ap` にアクセスするには同じVPC ID（`vpc-xxxx`）でIPv4パブリックIPが割りてられている `or-dev-console` を踏み台にします（IPアドレス `aaa.bbb.ccc.ddd` にアクセスします）。
- `or-dev-console` から `or-dev-web-ap` にアクセスする際は、プライベートIPアドレス `10.201.101.124` を指定します。
- VPC ID `vpc-yyyy` のパブリックIPアドレスが割り振られていないインスタンスにアクセスする際も同様です。
- IPv4パブリックIPは固定のIPアドレスを取得していない場合、インスタンスの再起動で変更されます。ただし、IPv4パブリックIPにリンクが貼られていれば、固定IPが割り振られて（Elastic IPがアタッチされて）いますので、再起動によって変更されることはありません。
- プライベートIPもインスタンスの再起動によって変更されます。（こちらも固定する方法はあるのですが、再起動でIPアドレスが変わる認識の方が良いかと）

# おわりに

なるべく詳細に触れないようご紹介しましたが、何らかの要因でどうしてもアクセスできない場合もあるかと思います。その際は有識者に聞いてもらうのが早いのですが、その機には是非AWSについて学習して頂ければ幸いです。
【メモ】Macのコマンドラインでフォルダ直下の特定のファイルを一括削除する

不要なファイルを削除したい。でも数が多い。削除したいファイルのタイトルには一貫性がある。
という時に。

今回のケースだと対象のファイルには必ず"hoge.jpg"という文字列が含まれているので

```
ls | grep -E "(?:hoge\.jpg)" | xargs rm
```

1. `ls` でカレントディレクトリ以下のファイルを表示
2. `grep -E "正規表現"` で、ファイルリストから正規表現にマッチするファイルを抽出
3. `xargs rm` で、rmに対して抽出後リストを引数として渡して削除

とした。

正規表現に詳しいわけではないので不要な表現があるかも。

実行する際は一旦

```
ls | grep -E "(?:hoge\.jpg)"
```

上記を試して、本当に削除したいファイルだけが抽出されているかを確認した上で `| xargs rm` を追加することをおすすめします。

# 20195/30 追記
カレントディレクトリの特定のファイルを消したいだけなら

```
rm *hoge.png
```

でいけるみたいです。
Configuration TransformでClickOnceを発行しようとしてハマった

デプロイする環境ごとにビルドモジュールの接続先を分けたくて「Configuration Transform」をインストール。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411143/d323081d-a222-4898-80ba-3fce411c440f.png)

こちらの拡張機能の使い方は割愛するが、以下のように設定ファイルを複数持つことができた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411143/f1dd93a4-a19a-4a07-5b67-e29a4cb6c14b.png)

ClickOnceを発行しようとしたら謎のエラー！！！
> obj\Debug\SMaCApp.exe.config;obj\Debug\SMaCApp.exe.config" は、"GenerateApplicationManifest" タスクの "ConfigFile" パラメーターには無効な値です。複数の項目を、型 "Microsoft.Build.Framework.ITaskItem" のパラメーターに渡すことはできません。

私には何を言っているのか全くわからないが、ClickOnceを発行するプロジェクトのプロジェクトファイル(.csproj)を以下のように修正すると解消された。
修正前
`<AppConfigWithTargetPath Remove="App.config" />`

修正後
`<AppConfigWithTargetPath Remove="@(AppConfigWithTargetPath)" />`

これがどういうことなのか私にはわからないが、とりあえずうまく行ってよかった。

[参考URL](https://stackoverflow.com/questions/53504590/invalid-value-for-the-configfile-paramter-of-the-generationapplication-manifest)
Vue.jsとBootstrapで切替可能なモーダルをお手軽簡単に実装する

## 簡単にモーダル作りたい
bootstrapだと一瞬です

```
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
```
jQueryとBootstrapを読み込んで
[https://getbootstrap.com/docs/4.0/components/modal/](https://getbootstrap.com/docs/4.0/components/modal/)
htmlをこれに習って設定すればすぐ出来ます

## 切替可能なモーダルにしたい
上記のモーダルを切替可能にするのもVue.js使えば簡単に出来ます。

```index.html
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <modal v-show="current == '1'" :key="1">
      <h5 class="modal-title" id="imgModalLabel" slot="title">ステップ1</h4>
        <div slot="body">
          ステップ1
        </div>
        <button type="button" class="btn btn-secondary" slot="prvbtn" data-dismiss="modal">戻る</button>
        <button type="button" class="btn btn-primary" slot="nextbtn" @click="current = 2">ステップ2へ</button>
    </modal>
    <modal v-show="current == '2'" :key="2">
      <h5 class="modal-title" id="imgModalLabel" slot="title">ステップ2</h4>
        <div slot="body">
          ステップ2
        </div>
        <button type="button" class="btn btn-secondary" slot="prvbtn" @click="current = 1">ステップ1へ</button>
        <button type="button" class="btn btn-primary" slot="nextbtn" @click="current = 3">ステップ3へ</button>
    </modal>
    <modal v-show="current == '3'" :key="3">
      <h5 class="modal-title" id="imgModalLabel" slot="title">ステップ3</h4>
        <div slot="body">
          ステップ3
        </div>
        <button type="button" class="btn btn-secondary" slot="prvbtn" @click="current = 2">ステップ2へ</button>
        <button type="button" class="btn btn-primary" slot="nextbtn" data-dismiss="modal">終了</button>
    </modal>
  </div>
</div>
```

```app.js
const modal_template = {
  template: `
      <div class="modal-content">
        <div class="modal-header">
            <slot name="title"></slot>
        </div>
        <div class="modal-body">
        <slot name="body"></slot>
        </div>
        <div class="modal-footer">
            <slot name="prvbtn"></slot>
            <slot name="nextbtn"></slot>
        </div>
      </div>
`
}
const app = new Vue({
  el: '#exampleModal',
  components: {
    'modal': modal_template,
  },
  data: {
    current: 1,
  },
})
```
ボタン部分なんかはもう少し効率化できそうですが、汎用化させてた方が便利だったので
テンプレート使うと余計な部分は重複して書かなくて済むのですっきり
`v-show`でなく`v-if`でも同じことできます。そこは用途に合わせてですかね

サンプルは[こちら](https://codepen.io/tttela/pen/ZNvNoK)
課題研究（5月13日～5月16日の授業内容）

#目次
[１．AIチーム](#１AIチーム)
[２．大田区チーム](#２大田区チーム)
[３．デジタルサイネージチーム](#３デジタルサイネージチーム)

#１．AIチーム
先週と同様、各自仕事を進めていますが少し仕事内容が変わった人もいます。
勘定科目をあいうえお順にし読み仮名を書く人、エクセルの式を使って解説を作成する人等です。
また、アプリのデザインや構成が具体的に完成してきたためプログラマーの人とどこまで形を作るかを話し合いました。

#２．大田区チーム
羽月の店主と実際に電話をしWebサイトの確認、Webサイトで使う写真決め、質問をしたり要望を聞きました。
また、Webサイトで使用する画像の加工や前回と同様くじ・特典班の動画編集を進めています。

#３．デジタルサイネージチーム
モニターは２台使うという方向で考えていましたが、３台利用することにし１台を事務室前に設置する案が新たに生まれました。
来客の方が島商に来た際に迷わないように地図を表示させる、部活動の写真の表示、大会の記録等を表示させる案がでました。
plunkerでsimcirjs その4

#概要

plunkerでsimcirjsやってみた。
3bit加算器作ってみた。

#写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/cad58bb4-3a4c-8f07-af99-6334500613ce.png)

#サンプルコード

```
{
  "width":800,
  "height":400,
  "showToolbox":true,
  "toolbox":[
    {"type":"In"},
    {"type":"Out"},
    {"type":"Joint"},
    {"type":"DC"},
    {"type":"LED"},
    {"type":"PushOff"},
    {"type":"PushOn"},
    {"type":"Toggle"},
    {"type":"BUF"},
    {"type":"NOT"},
    {"type":"AND"},
    {"type":"NAND"},
    {"type":"OR"},
    {"type":"NOR"},
    {"type":"XOR"},
    {"type":"XNOR"},
    {"type":"OSC","freq":1,"label":"OSC(1Hz)"},
    {"type":"7seg"},
    {"type":"16seg"},
    {"type":"4bit7seg"},
    {"type":"RotaryEncoder"},
    {"type":"BusIn"},
    {"type":"BusOut"},
    {"type":"RS-FF"},
    {"type":"JK-FF"},
    {"type":"T-FF"},
    {"type":"D-FF"},
    {"type":"8bitCounter"},
    {"type":"HalfAdder"},
    {"type":"FullAdder"},
    {"type":"4bitAdder"},
    {"type":"2to4BinaryDecoder"},
    {"type":"3to8BinaryDecoder"},
    {"type":"4to16BinaryDecoder"},
    {"type":"AltFullAdder"},
    {"type":"Transmitter"},
    {"type":"Delay"},
    {"type":"NumSrc"},
    {"type":"NumDsp"},
    {"type":"DSO"}
  ],
  "devices":[
    {"type":"OSC","freq":1,"label":"OSC(1Hz)","id":"dev0","x":32,"y":152},
    {"type":"8bitCounter","id":"dev1","x":96,"y":96,"label":"8bitCounter"},
    {"type":"4bit7seg","id":"dev2","x":192,"y":104,"label":"4bit7seg"},
    {"type":"4bit7seg","id":"dev3","x":192,"y":200,"label":"4bit7seg"},
    {"type":"HalfAdder","id":"dev4","x":312,"y":80,"label":"HalfAdder"},
    {"type":"FullAdder","id":"dev5","x":312,"y":144,"label":"FullAdder"},
    {"type":"FullAdder","id":"dev6","x":312,"y":224,"label":"FullAdder"},
    {"type":"4bit7seg","id":"dev7","x":480,"y":128,"label":"4bit7seg"}
  ],
  "connectors":[
    {"from":"dev1.in0","to":"dev0.out0"},
    {"from":"dev1.in1","to":"dev0.out0"},
    {"from":"dev2.in0","to":"dev1.out0"},
    {"from":"dev2.in1","to":"dev1.out1"},
    {"from":"dev2.in2","to":"dev1.out2"},
    {"from":"dev3.in0","to":"dev1.out3"},
    {"from":"dev3.in1","to":"dev1.out4"},
    {"from":"dev3.in2","to":"dev1.out5"},
    {"from":"dev4.in0","to":"dev1.out0"},
    {"from":"dev4.in1","to":"dev1.out3"},
    {"from":"dev5.in0","to":"dev4.out1"},
    {"from":"dev5.in1","to":"dev1.out1"},
    {"from":"dev5.in2","to":"dev1.out4"},
    {"from":"dev6.in0","to":"dev5.out1"},
    {"from":"dev6.in1","to":"dev1.out2"},
    {"from":"dev6.in2","to":"dev1.out5"},
    {"from":"dev7.in0","to":"dev4.out0"},
    {"from":"dev7.in1","to":"dev5.out0"},
    {"from":"dev7.in2","to":"dev6.out0"},
    {"from":"dev7.in3","to":"dev6.out1"}
  ]
}
```

#成果物

https://embed.plnkr.co/BgKwYWjNfRAfKgl6WTWQ/

以上。
tex 図番号，表番号の後ろに不要なピリオドが出力される

#変なピリオドが出てくる
このファイルに従って原稿を作成していると．．．
図を挿入するために以下のような記述をする場面が出てくる．

```latex:main.tex
\begin{figure}[b]
\begin{center}
\label{hogehoge}

\includegraphics[width=70mm]{hogehogehoge}
\caption{hoge}

\end{center}
\end{figure}
```

labelを付けた図を本文中で
「図```ref{hogehoge}```に示す．」というように引用したい．

しかし，

これをすると出力結果として

「図１．に示す．」

なんだこの１の後ろのピリオドは！！！

#原因は学会側から配布されたclsファイル

ggってもなかなか解決策が見いだせない中，指定のclsファイルを見ていると，，，

```latex:hogehoge.cls
\renewcommand{\thesection}{\@arabic\c@section.}
\renewcommand{\thesubsection}{\thesection\,\@arabic\c@subsection}
\renewcommand{\thesubsubsection}{%
   \thesubsection.\,\@arabic\c@subsubsection}
\renewcommand{\theparagraph}{% (
 \@alph\c@paragraph\,)}
\renewcommand{\thesubparagraph}{% (
 \@roman\c@subparagraph\,)}
```

section，subsectionの番号に「.」をつけて整形している場所を見つける．

試しにコメントアウトしてみると，，，

「図１に示す．」

消えた！！

しかし，，，

「2.　ほげほげ
　　2.1 ほげほげのほげほげ」
　　　　　　↓↓↓
「2　ほげほげ
　　21 ほげほげのほげほげ」

節番号の「.」が消えた！！（当たり前）

#解決策

```latex:hogehoge.cls
%\renewcommand{\thesection}{\@arabic\c@section.}
\renewcommand{\thesubsection}{\thesection.\,\@arabic\c@subsection}
\renewcommand{\thesubsubsection}{%
   \thesubsection.\,\@arabic\c@subsubsection}
\renewcommand{\theparagraph}{% (
 \@alph\c@paragraph\,)}
\renewcommand{\thesubparagraph}{% (
 \@roman\c@subparagraph\,)}
```

1行目をの```section```に関するところをコメントアウト
2行目の```\thesection```のところに「.」を追加．
プリアンブルで
```\usepackage{secdot}
\sectiondot{section}```
を追加

これで
「2.　ほげほげ
　　2.1 ほげほげのほげほげ」
を保ちながら
「図１に示す．」
が実現

とりいそぎこれで一応解決しました．
Qiita短期目標

![mokuhyou.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51423/aa006fde-d8ae-7db2-9399-71615ef3a196.png)

```shell-session
$ python3
>>> 1779+5169+2832
9780
```

まず合計を10,000越えを来月。

contributionを年内に10,000にするには、


|  | 1.2 | 1.1 | 1.09 | 22*日数 |
|:--|--:|--:|--:|:--|
| 2019/5/23 | 5169 | 5169 | 5169 | 5169 |
| 2019/5/31 | 6202 | 5685 | 5634 | 5367 |
| 2019/6/30 | 7442 | 6253 | 6141 | 6027 |
| 2019/7/31 | 8930 | 6878 | 6693 | 6709 |
| 2019/8/31 | 10716 | 7565 | 7295 | 7391 |
| 2019/9/30 | 12859 | 8321 | 7951 | 8051 |
| 2019/10/31 | 15430 | 9153 | 8666 | 8733 |
| 2019/11/30 | 18516 | 10068 | 9445 | 9393 |
| 2019/12/31 | 22219 | 11074 | 10295 | 10075 |
Rails hidden_fieldの渡し方、受けとり方

##渡し方
値を指定する場合はvalueを使う。
第一引数にオブジェクト名、第二引数部分にvalueで受け渡す値を指定する。

```text.html.erb
<%= f.hidden_field :unique_key, :value => params[:unique_key] %>
```

##受け取り方

valueで渡した値をモデルのインスタンスの属性に格納している場合、以下のようになる。

```text_controller.rb

@introduce = Follow.find_by(unique_key: params[:follow][:unique_key])
```
Followモデルのunique_keyカラムの値を受け取る場合。



##参考
Ruby on Rails - hidden_fieldの使い方
https://qiita.com/azusanakano/items/5849a7ca74be58d195b7
f.hidden_fieldとhidden_field_tagの使い方【Ruby on Rails】
https://sakurawi.hateblo.jp/entry/hidden_field
plunkerでsimcirjs その3

概要

plunkerでsimcirjsやってみた。
全加算器作ってみた。

写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/d6be4812-dcaf-d916-06b8-88277dc47a76.png)

#サンプルコード

```
{
  "width":800,
  "height":400,
  "showToolbox":true,
  "toolbox":[
    
  ],
  "devices":[
    {"type":"DC","id":"dev0","x":104,"y":184,"label":"DC"},
    {"type":"Toggle","id":"dev1","x":168,"y":136,"label":"Toggle","state":{"on":false}},
    {"type":"LED","id":"dev2","x":224,"y":176,"label":"LED"},
    {"type":"LED","id":"dev3","x":224,"y":272,"label":"LED"},
    {"type":"XOR","id":"dev4","x":296,"y":128,"label":"XOR"},
    {"type":"LED","id":"dev5","x":560,"y":104,"label":"LED"},
    {"type":"LED","id":"dev6","x":560,"y":224,"label":"LED"},
    {"type":"XOR","id":"dev7","x":416,"y":128,"label":"XOR"},
    {"type":"AND","id":"dev8","x":368,"y":184,"label":"AND"},
    {"type":"AND","id":"dev9","x":304,"y":240,"label":"AND"},
    {"type":"OR","id":"dev10","x":424,"y":232,"label":"OR"},
    {"type":"LED","id":"dev11","x":224,"y":112,"label":"LED"},
    {"type":"Toggle","id":"dev12","x":168,"y":56,"label":"Toggle","state":{"on":false}},
    {"type":"Toggle","id":"dev13","x":168,"y":216,"label":"Toggle","state":{"on":false}}
  ],
  "connectors":[
    {"from":"dev1.in0","to":"dev0.out0"},
    {"from":"dev2.in0","to":"dev1.out0"},
    {"from":"dev3.in0","to":"dev13.out0"},
    {"from":"dev4.in0","to":"dev1.out0"},
    {"from":"dev4.in1","to":"dev13.out0"},
    {"from":"dev5.in0","to":"dev10.out0"},
    {"from":"dev6.in0","to":"dev7.out0"},
    {"from":"dev7.in0","to":"dev12.out0"},
    {"from":"dev7.in1","to":"dev4.out0"},
    {"from":"dev8.in0","to":"dev12.out0"},
    {"from":"dev8.in1","to":"dev4.out0"},
    {"from":"dev9.in0","to":"dev1.out0"},
    {"from":"dev9.in1","to":"dev13.out0"},
    {"from":"dev10.in0","to":"dev8.out0"},
    {"from":"dev10.in1","to":"dev9.out0"},
    {"from":"dev11.in0","to":"dev12.out0"},
    {"from":"dev12.in0","to":"dev0.out0"},
    {"from":"dev13.in0","to":"dev0.out0"}
  ]
}
```

#写真
組み込みでfulladderあった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/5f43f4d7-1c14-db31-d084-de12fc858f07.png)


以上。
plunkerでsimcirjs その2

#概要

plunkerでsimcirjsやってみた。
半加算器作ってみた。

#写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/88542a85-5a56-8a6f-8ee3-04a5341ec112.png)

#サンプルコード

```
{
  "width":800,
  "height":400,
  "showToolbox":true,
  "toolbox":[    
  ],
  "devices":[
    {"type":"DC","id":"dev0","x":104,"y":184,"label":"DC"},
    {"type":"Toggle","id":"dev1","x":168,"y":136,"label":"Toggle","state":{"on":false}},
    {"type":"Toggle","id":"dev2","x":168,"y":216,"label":"Toggle","state":{"on":false}},
    {"type":"LED","id":"dev3","x":224,"y":176,"label":"LED"},
    {"type":"LED","id":"dev4","x":224,"y":272,"label":"LED"},
    {"type":"LED","id":"dev5","x":408,"y":176,"label":"LED"},
    {"type":"XOR","id":"dev6","x":320,"y":176,"label":"XOR"},
    {"type":"AND","id":"dev7","x":320,"y":104,"label":"AND"},
    {"type":"LED","id":"dev8","x":408,"y":104,"label":"LED"}
  ],
  "connectors":[
    {"from":"dev1.in0","to":"dev0.out0"},
    {"from":"dev2.in0","to":"dev0.out0"},
    {"from":"dev3.in0","to":"dev1.out0"},
    {"from":"dev4.in0","to":"dev2.out0"},
    {"from":"dev5.in0","to":"dev6.out0"},
    {"from":"dev6.in0","to":"dev1.out0"},
    {"from":"dev6.in1","to":"dev2.out0"},
    {"from":"dev7.in0","to":"dev1.out0"},
    {"from":"dev7.in1","to":"dev2.out0"},
    {"from":"dev8.in0","to":"dev7.out0"}
  ]
}
```
#写真

組み込みでhalfadderあった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/284ee55c-ff1e-bfbf-613e-1de7301fda19.png)



以上。
Go の net/http でベーシック認証の client/server を作成する

# BackGround
筆者は普段は C で組み込み技術の開発をしています。 
そんな筆者ですが、業務で web技術 を活用したい、と常々考えています。  

そこで、web技術の基礎として、ベーシック認証ができる client/server を作成してみましたので紹介します。  

今、web 技術の基本として、O'REILLY の Real World HTTP という書籍を読んでいるので、
その本で書かれている http の仕様を踏まえつつ、実践をしてみたものとなります。

# Target
* Go の標準パッケージ `net/http` のベーシック認証の取り扱い方がわかる
* Go で実装した client/server を実際に動かしてベーシック認証を試せる

# ベーシック認証
> Basic認証（ベーシックにんしょう、Basic Authentication）とは、HTTPで定義される認証方式の一つ。  
> 基本認証と呼ばれることも。  
> Basic認証では、ユーザ名とパスワードの組みをコロン ":" でつなぎ、Base64でエンコードして送信する。  
> このため、盗聴や改竄が簡単であるという欠点を持つが、ほぼ全てのWebサーバおよびブラウザで対応しているため、広く使われている。  
[出典: フリー百科事典『ウィキペディア（Wikipedia）』](https://ja.wikipedia.org/wiki/Basic認証)

# つくるもの
* client
    * server へベーシック認証付きのリクエストを送信し、server のレスポンスの body を標準出力へ出力する
* server
    * client のリクエストをベーシック認証にて認証し、認証が成功したかどうかで異なるレスポンスを送信する
        * 成功した場合は `Authed` とレスポンスを送信する
        * 失敗した場合は `Not authorized` とレスポンスを送信する

# できたもの
client/server は以下のように動きます。  

先に server を起動し、その後 client を起動すると、
認証が成功した旨がレスポンスとして得られます。  

```
# server プログラムを起動する
$ ./server

```

```
# client プログラムを実行する
$ ./client
Authed
```

# SourceCode
ソースコードは以下のようになりました。  

```client.go
package main

import (
	"fmt"
	"io/ioutil"
	"log"
	"net/http"
	"time"
)

func main() {
	client := &http.Client{Timeout: time.Duration(10) * time.Second}

	req, err := http.NewRequest("GET", "http://localhost:18888/basic", nil)
	if err != nil {
		log.Fatal(err)
	}
	req.SetBasicAuth("user", "pass")
	resp, err := client.Do(req)
	if err != nil {
		log.Fatal(err)
	}
	defer resp.Body.Close()

	fmt.Println(string(getContent(resp)))
}

func getContent(resp *http.Response) []byte {
	b, err := ioutil.ReadAll(resp.Body)
	if err != nil {
		log.Fatal(err)
	}
	return b
}
```

client は、req オブジェクトへ、 `SetBasicAuth` メソッドを使って、
ベーシック認証のユーザとパスワードを与えるだけでベーシック認証に対応できます。  

```server.go
package main

import (
	"fmt"
	"log"
	"net/http"
)

const (
	basicAuthUser     = "user"
	basicAuthPassword = "pass"
)

func main() {
	http.HandleFunc("/basic",
		func(w http.ResponseWriter, r *http.Request) {
			if user, pass, ok := r.BasicAuth(); !ok || user != basicAuthUser || pass != basicAuthPassword {
				w.Header().Add("WWW-Authenticate", `Basic realm="my private area"`)
				w.WriteHeader(http.StatusUnauthorized)
				http.Error(w, "Not authorized", 401)
				return
			}
			_, err := fmt.Fprintf(w, "Authed\n")
			if err != nil {
				log.Fatal(err)
			}
		},
	)
	log.Println(http.ListenAndServe(":18888", nil))
}
```

server は、req オブジェクトへ、 `BasicAuth` メソッドを使って、
ベーシック認証のユーザとパスワードを取得し評価するだけでベーシック認証に対応できます。  

# Roundup
* パッケージの中で相対的に低水準な `net/http` でも、十分に抽象化されていて、簡単に取り扱うことができる
* リクエストの送信や、サーバの作成自体も `net/http` にてシンプルに実装ができる

# Reference
* [Real World HTTP](https://www.oreilly.co.jp/books/9784873118048/)
plunkerでjor1k その4

#概要

plunkerでjor1kやってみた。
九九をインラインアセンブラでやってみた。

#サンプルコード

```
#include <stdio.h>

int kakeru(int a, int b)
{
	int result;
	asm ("l.mul   %0,%1,%2"
		: "=r" (result)
		: "r" (a), "r" (b));
	return result;
}
int main(void)
{
	int i,
		j;
	printf ("   ");
	for (i = 1; i < 10; i++)
	{
		printf ("%2d ", i);
	}
	printf ("\n");
	for (j = 1; j < 10; j++)
	{
		printf ("%2d ", j);
		for (i = 1; i < 10; i++)
		{
			printf ("%2d ", kakeru(i, j));
		}
		printf ("\n");
	}
}

```

#結果

```
~ $ gcc main.c                                                                  
~ $ ./a.out                                                                     
  1  2  3  4  5  6  7  8  9                                                     
 1  1  2  3  4  5  6  7  8  9                                                   
 2  2  4  6  8 10 12 14 16 18                                                   
 3  3  6  9 12 15 18 21 24 27                                                   
 4  4  8 12 16 20 24 28 32 36                                                   
 5  5 10 15 20 25 30 35 40 45                                                   
 6  6 12 18 24 30 36 42 48 54                                                   
 7  7 14 21 28 35 42 49 56 63                                                   
 8  8 16 24 32 40 48 56 64 72                                                   
 9  9 18 27 36 45 54 63 72 81                                                   

```

以上。
curlコマンドを使ってAOJから自分の情報を取得してみた

# 目的

思ったよりも手間取ったので調べたことの備忘録。API初心者です。
[AOJのAPIリファレンス](http://developers.u-aizu.ac.jp/index)

# 実際に使ったコマンド

```terminal
$ curl -X POST -H "Content-Type: application/json" -d '{"id":"my_name", "password":"my_password"}' https://judgeapi.u-aizu.ac.jp/session
```

# わからなかったこと

[AOJのAPIリファレンス](http://developers.u-aizu.ac.jp/index)を読んで、<img width="732" alt="スクリーンショット 2019-05-23 8.43.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403720/c829316a-e504-595b-f8bc-3c0ad8c2a182.png">
自分のidとpasswordをJSONの形でパラメータにするらしい。
<img width="701" alt="スクリーンショット 2019-05-23 8.58.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403720/ef24fdcc-d183-5683-63c7-708ebaf45d17.png">


## POSTってなに？

[HTTP リクエストメソッド](https://developer.mozilla.org/ja/docs/Web/HTTP/Methods)によると、
 
> POST は指定したリソースに実体を送信するために使用するメソッドであり、サーバー上の状態を変更したり、副作用が発生したりすることがよくあります。

だから今回使うのはPOSTじゃなくてGETなんじゃないの？ と思ったのですが、今回は自分のidとpasswordをjson形式でパラメータ付与してリクエストするので、POSTらしい。

## エンドポイントってなに？

[RESTful APIのURI設計(エンドポイント設計)](https://qiita.com/NagaokaKenichi/items/6298eb8960570c7ad2e9)によると、

> エンドポイントとはAPIにアクセスするためのURIのこと。

らしい。ARIはUniform Resource Identifier　つまりリソースを識別するためのもの。また、

> 似たような言葉に「エントリポイント」というものがある。エントリポイントとはプログラムやサブルーチンの実行を開始する場所のこと。
> つまり、エンドポイントはAPIにアクセスする側からの、エントリポイントはアクセスされる側からの違いということになる。

今回のコマンドで言うところの、APIの末尾、/session のところ。これをReferenceを見て任意のURIに変更すれば任意のデータが取得できる。

## コマンドライン上のオプションがわからない

[curl option 覚え書き](https://qiita.com/takayukioda/items/edf371b3566bea64d046)より、今回使ったオプションについてまとめておく。

```terminal
$ curl -X POST -H "Content-Type: application/json" -d '{"id":"my_name", "password":"my_password"}' https://judgeapi.u-aizu.ac.jp/session
```

### -X

> curl は何も指定しないと GET のリクエストを発行するけど、それを変えたい時に使う。

らしい。今回はPOSTリクエストなので-X必須。

### -H

> OAuth のトークンとか渡すときに使うオプション。
HTTP の Request Header に情報を追加できる。

最初必要ないかなと思ったけど必要だった。また、JSONのMIMEタイプには今回はapplication/jsonを使用した。

### -d

> このオプションを指定すると curl は POST メソッドでリクエストを送る。
ほんでもってここで指定されたデータが Request Body に入る。
key=value の形式で書く必要がある。

なので今回はidとpasswordをJSONの形で記述。


# まとめ

AOJってAPI叩く練習にいいのかもしれない…

次はデータをjavascriptとかで取得できるようにしたい。
式・文・述語・言明・表現・項

### 式/formula @数学
式はざっくり「真か偽かが判定できる記号列」。例えば `1 + 1 = 2`というのは真な式。`1 + 1 = 3` は偽な式。`x + 1 = 2` は真になり得る式。一方 `1 + 1` は真でも偽でもないので式でない。`+ 1 +` は意味不明（構文的に正しくない）なので式ではない。

注：正確な定義は 純構文的な規則をもつ記号列として与えられるので、上記の「真偽が問える」という性質は付随的。式に真偽値を与える意味論的操作は付値と呼ばれる。

### 文/sentence @数学
文は自由変数を含まない式。自由変数を含まないっていうのは登場する変数が見せかけの変数でしかないもの。`1 + 1 = 2`は変数がいないので文。`∀x. x = x`（意味: どんな数も自分自身と等しい）は変数が登場するけど、∀で束縛されているので文。`x + 1 = 2` は xが自由変数なので文ではない。`∀x. y = x + 1`(意味: 全ての数に対して自身に1を足した数とyが一致する)は yが自由変数なので文でない。

ただし、「自由変数が現れていても∀をくっつける」という取り決めをしている場合、自由変数があっても文とみなすことがある。`∀x. x + y = 1`は文ではないけど、`∀y∀x x + y = 1`の略記だと見なして話を進めることがある（例：集合論の公理）。

### 述語/predicate @数学
文とは逆で、自由変数を含む式のことを述語という。`x + 1 = 5`はxが自由変数なので述語。述語では、自由変数への付値によって真になったり偽になったりする。真になる付値全体を真理条件と呼ぶこともある。`x + 3 > 0`の真理条件は -3より大きい数 といった具合。「真理条件を満たすモノたち」という形で数（などの議論対象）の集合を指定することを内包表記という。

述語に登場する変数の数に注目して、1変数述語、2変数述語などと呼び分けることがある。述語の具体的な形を捨象したい場合は `φ(x)`, `ψ(x, y)`などと記述することがある。この描像では述語は（関数ではないが）関数的である。

### 言明/statement @数学
数学でははっきりとした定義はない（と思う）。多くの場合 文と交換可能に使われたり、メタレベルの文を指すことがある。なお、論理学では **命題/proposition** と言明 はかなり似た使われ方をする（命題自体も結構曖昧に使われている用語でもあるが、式/文の記号列そのものではなく、それが意味しているもの、例えば真理条件といった抽象的な存在物を指す）

### 表現/expression @数学
数学でははっきりとした定義はない（と思う）。論理学寄りな使われ方では 項/term や 部分論理式/subformula 部分項/subterm と互換に使われ、計算論寄り（というかラムダ計算）の文脈では 式/statement と互換な使われ方をする。

### 項/term @数学
式を構成する部分。変数や定数は項で、それらに関数を適用したのも項。つまり `1` や `-4` や `x` は項。`1 + 1`や `x * 3`も項。`1 + 1 = 2`は項ではない(等号は述語であり関数ではない)。

### 式/expression @プログラミング
数学における term/項 と互換に扱われることが多い。つまり変数や定数は式で（注: 構文的には定数・変数であるが式とみなしてもよい）、それらに関数・演算子を適用したのも式。`1` や `-4` や `x` は式。`1 + 1`や `x * 3`や `toString(x + 7)`も式。

式は「値を持つ」という性質が最もフォーカスされる。「その式の値は何になる？」というのが常にプログラム上の重要な点となる。

lisp系の言語や Rubyではすべてが expression なので (後述する) 文/statement @プログラミング と同じ意味に使われることになる。


### 項/term @プログラミング
式/expression @プログラミング と互換。

### 文/statement @プログラミング
プログラミングにおいて式という訳語は statement や sentence が当てられることが多い。大抵の言語において「プログラムは 文の集まりだ」で文を定義する。if文, 定義文/代入文, for文など。

文は「値を持たない」という性質を持つことが多い。(例：「for 文の値は？」が多くの言語においてナンセンス）ただし、C言語の代入文 `a = 1`のように 値を持つ式もあり、式文とよばれることもある。特に Rubyでは全ての文が値を持つ。

### 述語/predicate @プログラミング
True, Falseというデータを返す**関数**（数学では述語は式/真理関数であり 関数ではない）。テスト関数とも呼ばれる。`isEven(x)`や`hasElement(x)`といった名づけがされる。
Rails5.2のrails credentials:editを好きなエディタで編集する(macOS)

# この記事なに？ :thinking: 

Rails5.2で導入された秘蔵情報を編集するコマンド`rails credentials:edit`というのがあります。

この記事では、`rails credentials:edit`を自分の好きなエディタでやる場合のコマンドを載せておきます。

`credentials`について、詳しく知りたいという方は以下の記事からどうぞ。

- [Qiita - Rails5.2から追加された credentials.yml.enc のキホン](https://qiita.com/NaokiIshimura/items/2a179f2ab910992c4d39)
- [Qiita - Rails5.2から導入されたcredentials.yml.encを極める](https://qiita.com/yuuuking/items/53a37a2e998972be32b8)

# どうやるの？

## vi / vimの場合

vi系が得意な方はこちらで十分かなと思います。

```bash
EDITOR=vi bin/rails credentials:edit
EDITOR=vim bin/rails credentials:edit
```

## 他のエディタの場合

自分はvi系コマンドがいまだに苦手です。少しの編集だったら全然OKなのですが、十数行とかになると、慣れ親しんだエディタ（自分の場合はVSCode）で編集したくなります。

vi / vim以外の他エディタで編集したい場合は、`wait`オプションを付加し、以下のようなコマンドを打ちます。

```bash
# EDITOR="好きなエディタ --wait" bin/rails credentials:edit
# 好きなエディタ＝VSCodeの場合
EDITOR="code --wait" bin/rails credentials:edit
# 好きなエディタ＝Atomの場合
EDITOR="atom --wait" bin/rails credentials:edit
```

コマンドを打つと、対象のエディタで編集画面となりますので、APIKeyなどの設定が済んだら保存、エディタを閉じると以下が生成されます。

- `config/credentials.yml.enc`
- `config/master.key`

### 注意事項

`EDITOR="好きなエディタ --wait" bin/rails credentials:edit`の**好きなエディタ**については、別途Pathを通しておく必要がありますので、ご注意ください。

VSCodeを`code`コマンドで起動させる場合は、以下の記事を参考にしてみてください。

- [Qiita - ターミナルからVisual Studio Codeを起動する方法【公式の方法】](https://qiita.com/naru0504/items/c2ed8869ffbf7682cf5c)

# P.S.

いろいろ記事を探していたら、Windowsで`Sublime Text`で`rails credentials:edit`しようとされている記事を発見しました。

Windowsで好きなエディタで`rails credentials:edit`したい方は、以下の方の記事を参考にされるとよいかもです。

- [Qrunch - （Rails5.2）APIキーを直接コードに埋め込まないCredentials.yml.encの使い方](https://qrunch.net/@WEkFtOQhlqcyDEsy/entries/bvfUcf0RmWqQ2NVH)

# おわり

誤記などありましたら、FBいただけると助かります！🙏
Nuxt.jsのHTML App Templateをカスタマイズしたい時のちょっとした罠

# HTML App Templateのカスタマイズ
基本的には公式ドキュメントに記載のある通りなんですが。。。
[https://nuxtjs.org/guide/views#app-template](https://nuxtjs.org/guide/views#app-template)
>テンプレートを変更するために、プロジェクトのルートフォルダに app.html ファイルを作成します。

* 2019/12/11 追記

公式ドキュメントが下記内容に修正されておりました。下記の通り説明が正しく書き換えられたため当記事のタイトルの罠はなくなりました。
>テンプレートを変更するために、プロジェクトのソースフォルダ（デフォルトはプロジェクトのルートディレクトリ）に app.html ファイルを作成します。

# app.htmlのデフォルト

```app.html
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>
```

# ちょっとした罠
公式ドキュメントには ~~**`プロジェクトルート`** に設置するように指示されてますが(2019年5月23日現在)~~(2019/12/11現在 上述の通り説明が修正されました) srcDirを指定している場合は`app.html`ファイルをsrcDirで指定しているパスに設置しないと反映されませんでした。

例)
`srcDir: 'src/'`にしているなら、`'src/app.html'`を作成してカスタマイズする
Vue.jsのテストをする際に起きる「TypeError: Cannot read property '$scopedSlots' of undefined」エラーの回避方法

# TypeError: Cannot read property '$scopedSlots' of undefined

`shallowMount` を使ってテストしていたところを、子コンポーネントも見る必要が出てきて `mount` に変更しました。

しかし、

```
TypeError: Cannot read property '$scopedSlots' of undefined
```

と出てしまいます。

ググってみたところ、どうやら sync オプションが原因だったようです。
ウォッチャーを使っていると起きるみたいです。

下記のように `sync` を `false` にすることで回避されました。

```
mount（component、{sync ： false }）
```
Apache Solr : SolrJ でフィールド一覧を取得する



```java


import java.util.Map;
import java.util.Map.Entry;

import org.apache.solr.client.solrj.impl.HttpSolrClient;
import org.apache.solr.client.solrj.request.LukeRequest;
import org.apache.solr.client.solrj.response.LukeResponse;
import org.apache.solr.client.solrj.response.LukeResponse.FieldInfo;

public class HelloLukeRequest {

	public static void main(String[] args) throws Exception {
		String core = "core";
		HttpSolrClient solrClient = new HttpSolrClient.Builder("http://localhost:8983/solr/" + core + "").build();
		LukeRequest lukeRequest = new LukeRequest();
		lukeRequest.setNumTerms(0);
		LukeResponse lukeResponse = lukeRequest.process(solrClient);
		Map<String, FieldInfo> fieldInfoMap = lukeResponse.getFieldInfo();
		fieldInfoMap.entrySet().stream() //
.sorted(java.util.Map.Entry.comparingByKey()) //
				.forEach(s -> System.out.println(s.getValue().getType() + "," + s.getValue().getName())); //
	}

}

```
「RaspberryPi」タグについて (タグシノニム: 「Raspberry 」「RasberryPI 」「Rpi」「ラズベリーパイ」「ラズパイ」| バージョン違い: 「Raspberrypi3 」「raspberrypi2 」「RaspberryPi1 」「raspberrypizero 」「RaspberryPiZeroW 」「RaspberryPi3B」「pizero」「pi3」

### 対象

https://qiita.com/tags/RaspberryPi 

### 説明

Raspberry Pi関連のタグ。
- https://www.raspberrypi.org/


### タグシノニム

https://qiita.com/tags/Raspberry 
https://qiita.com/tags/RasberryPI 
https://qiita.com/tags/Rpi
[https://qiita.com/tags/ラズベリーパイ](https://qiita.com/tags/%E3%83%A9%E3%82%BA%E3%83%99%E3%83%AA%E3%83%BC%E3%83%91%E3%82%A4)
[https://qiita.com/tags/ラズパイ](https://qiita.com/tags/%E3%83%A9%E3%82%BA%E3%83%91%E3%82%A4)

### バージョン違い

2019-05-23現在:
https://qiita.com/tags/RaspberryPi1 
https://qiita.com/tags/raspberrypi2 
https://qiita.com/tags/raspberrypizero 
https://qiita.com/tags/Raspberrypi3 
https://qiita.com/tags/pi3
https://qiita.com/tags/RaspberryPi3B+
https://qiita.com/tags/RaspberryPiZeroW 
https://qiita.com/tags/pizero : QiitaがTag入力補完機能を実装する前に7of9が使い始めたタグ。その後、Tag入力補完が実装されたので、raspberrypizero を使う方が良い一方、pizeroで情報を集めた人はそのまま使い続けることもあるかも


### 備考

他にもあるかもしれない。
見つけましたら編集リクエストお願いいたします。
とあるRailsエンジニアのリモートワークトライアル 2019-05-22 on Twitter

# エンジニアリングやプログラミングを教えるより挫折からのレジリエンスを教えた方が実は早道なのかもな。

 [*](https://twitter.com/YumaInaura/status/1130990166682718208")
[@momokotoyopet](https://twitter.com/momokotoyopet/)

>エンジニアくじけそうな人の役に立てるのだろうか？私も常にくじけそうだからな...
>
>と思ったけど、ここでくじけながら先に進めたら、後からくる人たちの指標になれるかもしれないとは思う https://t.co/hV1ZdG276O
# "大学時代に東南アジアで1年ほどインターン(@🇸🇽/🇻🇳/🇧🇩)を経てのIT業界に突入。
ブラック企業2社を経て、現在は平和なエンジニアライフを送ってます。"
 [*](https://twitter.com/YumaInaura/status/1130991234053332992")
[@YukiKitakata](https://twitter.com/YukiKitakata/)

>何でも聞いてやー。
>@yukikitakataの質問箱です https://t.co/PG0RLZ1f4x #質問箱 #peing
# 仕事と遊びの中間ぐらいにある感覚が好きだな。
なぜこの兄弟たちは物別れしたの？
 [*](https://twitter.com/YumaInaura/status/1130995445231046656")

# 思えば高校卒業して18歳ぐらいの時、自分のこだわりが強すぎたせいか社会人力ゼロだったせいか、ミニストップのアルバイトさえままならなかったのに、それから十数年を経て、よくリモートエンジニアなんてやってられるなと、昨夜しみじみ思った。

 [*](https://twitter.com/YumaInaura/status/1130999077775265792")

# 仕事のほとんどのコストはコミュニケーション問題に尽きるのだから風通しの良いコミュニケーションの土台があることは切実に大事なのだけれど誰も最適解を知っているわけではない。

 [*](https://twitter.com/YumaInaura/status/1131011304049655809")

# いかに仕事中の混乱状態と戦う時であっても毎朝大阪茶屋町エリアを歩くときに思い出すポケットの中の戦争視点を思い出せば少しぐらいは安らげる。

 [*](https://twitter.com/YumaInaura/status/1131032695532744705")

# プログラム擬人化のエラー君をエラーちゃんにメイクアップしました。

 [*](https://twitter.com/YumaInaura/status/1131120409149992960")
![image](https://pbs.twimg.com/media/D7KMAoLV4AESYjf.jpg)
![image](https://pbs.twimg.com/media/D7KMAoCVsAAqKx3.jpg)

# 何も見ずにdockerを描いてみる。

 [*](https://twitter.com/YumaInaura/status/1131124414282518529")
![image](https://pbs.twimg.com/media/D7KPp-zUEAEgScW.jpg)

# この1ヶ月間でもっとも重要なのはちゃんとリモートワークで仕事ができることが分かったからきっと努力さえあればどこに行ってもやってゆけるだろうという自信が持てたこと。
でも自信が持っても良い状態だということには気付いていなかった。
 [*](https://twitter.com/YumaInaura/status/1131144221186859008")

# プログラム擬人化のエラー君をエラーちゃんにメイクアップしました。
  2019-05-22 on Twitter
 [*](https://twitter.com/YumaInaura/status/1131168633391075328")
<https://github.com/YumaInaura/YumaInaura/issues/1969>



# Original by Github issue

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








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
SqlServerリンクサーバ

リンクサーバの作成
--
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381112/e6111ba2-3941-b620-05a4-4d55547eca2d.png)
サーバ名を入力する
![2-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381112/ca8c0428-7887-0c76-aa70-933762e46e53.png)

DBにアクセスユーザとパスワードを入力する
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381112/5f90e2ae-f368-a888-8c36-de20645d81c5.png)


シノニムの作成
--
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381112/2918beea-a4d0-fe7d-6c55-8c7202fcdd53.png)
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381112/5a6ba0e9-79a5-5a95-c039-83bb6506719c.png)

または下記のコマンドで作る

```
USE [test]
CREATE SYNONYM [dbo].[シノニム名] FOR [Server名].[database名].[dbo].[TabelまたView]
GO
```
BIについて

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257568/2b347e0c-2233-7060-fb4b-1026df94194c.png)

こちらの本を読んで

## 目的
データ分析基盤開発において、エンドユーザーがデータを実際に連携させて使う製品を理解するため

## BIとは
Business Inteligence 
大量のデータを処理・分析して可視化し、組織の意思決定に役立つ知見を得るための手法

## BIの利用背景
ビックデータの存在

- 組織が保有・蓄積するデータが急激に大型化している
- Webサイト、アプリ、SNS、POS、IoT行動データ、実店舗購買情報、CRMなどの連携
- 正確で精緻なデータを取得できる

業界問わずBIは利用されるがWebマーケティングにおいても相当する

## BIの目的
大別すると2つ
抽象的でいうと「集計」と「発見」のため
具体的にいうと「レポーティング」と「データディスカバリー」のため

### レポーティング
ステークホルダーに定期的にアップデートされる定型のレポートを共有すること

- 分類されたデータをまとめてレポート化すること
- 集計型分析

### データディスカバリー
合目的性の高い対策を発見すること

- 事業活動における課題を解決すること
- 発見型分析

## BIの対象
データに囲まれた業界の分析者

- 医学の研究者
- 社会学の研究者
- 生産技術の研究者
- Webマーケター

## BIを利用するWebマーケターの業務
大きく3つ

- 日々のKPIやKGIに異常が起きていないかの確認
- マーケティング施策の考案、実施
- マーケティング施策結果に対する説明

## BIのソリューション
**「分析時間の短縮」と「質の高い分析」の両立**

- Webマーケターの高いレベルの業務を行いたいが、かけられる時間には限りがあるというジレンマを解消する
- システム部門に依存せず、**Webマーケター自身が準備可能なデータを利用可能にする**
- 一度「ダッシュボード」を作成すれば、データの自動更新でレポートが完成する

### ポイント
- 準備可能なデータは**データソース**に接続して取得する
- 新たにデータを**入力するのではなく、もともとあるデータに接続**する
- 大きく分けると「ファイル」と「サーバー(DB)」

## BI製品例
- Tableau
  - https://www.tableau.com/ja-jp
- Amazon QuickSight
  - https://aws.amazon.com/jp/quicksight/
- pacy
  - https://pacy.marketing/

## 書籍情報
Tableau ビジュアルWeb分析
木田和廣  (著), できるシリーズ編集部 (著)
https://amzn.to/2HRHx4S

## 雑感
データ分析基盤の側面からみると、**準備可能なデータを用意すること**が業務
BIを利用したい、作ってもらいたい側面からだけみると見えずら層
PHPの標準関数を使ってユニーク(一意)なトークン(文字列)を生成する

PHPの標準関数のみでユニークなトークンを作りたかったので、メモとして残します。

# 目的

メールアドレス認証時に使用するアクティベーションキー用のトークンを発行したく、
実行する度に被らないランダムな文字列を取得するのが目的です。

# TL;DR

```php
uniqid(bin2hex(random_bytes(1)))
```

# 環境

PHP7系

# 乱数に使えそうな関数を探す

## [uniqid](https://php.net/manual/ja/function.uniqid.php)

```php
uniqid ([ string $prefix = "" [, bool $more_entropy = FALSE ]] ) : string
```

マイクロ秒単位の現在時刻にもとづいた、接頭辞つきの一意な ID を取得します。
**この関数は、戻り値の一意性を保証するものではありません。**

```php
uniqid() // 5ce3d9f085632
uniqid() // 5ce3d9f154c7a
uniqid() // 5ce3d9f25823a
```

13桁の16進数の文字列が返ってくるようです。
現在時刻に基づいてるので実行するたびにカウントアップされていくようです。

`uniqid` には第一引数で接頭辞を付けられます。

```php
uniqid('ucan-') // ucan-5ce3dabb38549
uniqid('ucan-') // ucan-5ce3dabbe1c38
uniqid('ucan-') // ucan-5ce3dabc5407c
```

接頭辞を付けられるのは便利だったのですが、
固定文字列を付けてしまうと結局一意性は保証されません。

## [dechex](https://php.net/manual/ja/function.dechex.php)

10 進数を 16 進数に変換する

```
dechex ( int $number ) : string
```

`$number` で指定した符号なし整数値を 16 進数表現した文字列を返します。

```php
dechex(0) // 0
dechex(100) // 64
dechex(255) // ff
```

## [random_int](https://php.net/manual/ja/function.random-int.php)

暗号学的に安全な疑似乱数整数を生成する。

```php
random_int ( int $min , int $max ) : int
```

`$min` 〜 `$max` の間で偏りのない結果が重要な場合に使用するのに適した暗号化された乱数整数を生成します。

```php
random_int(0, 255) // 4
random_int(0, 255) // 158
random_int(0, 255) // 184
```

# 乱数を生成する

16進数2桁(0 〜 ff)の乱数を生成して接頭辞を付ける。

```php
uniqid(dechex(random_int(0, 255))) // 865ce3dddb0e35b
uniqid(dechex(random_int(0, 255))) // 85ce3dddb13e1d
uniqid(dechex(random_int(0, 255))) // b25ce3dddb198dc
```

# 乱数を生成する(固定桁数)

もし桁数を固定したい場合は `sprintf` を使って0埋めすると良さそうかな🤔

```php
uniqid(sprintf('%02x', random_int(0, 255))) // 4e5ce3dd8d7e2de
uniqid(sprintf('%02x', random_int(0, 255))) // 0a5ce3dd8d83477
uniqid(sprintf('%02x', random_int(0, 255))) // 4f5ce3dd8d8925d
```

# 2019.05.23 追記

@suin さんから `random_bytes` もオススメのコメントいただきました！

## [random-bytes](https://www.php.net/manual/ja/function.random-bytes.php)

random_bytes - 暗号学的に安全な疑似乱数バイトを生成する

```php
random_bytes ( int $length ) : string
```

salt、鍵、または初期化ベクトルを生成するときなど、暗号用途に適した任意の長さの暗号ランダムバイトの文字列を生成します。

`random_bytes(1)` とすると1byteのバイナリ文字列が返ります。
バイナリ文字列から16進数に `bin2hex` 関数で変換すれば `00` 〜 `ff` を取得できます。

```php
uniqid(bin2hex(random_bytes(1))) // 085ce642e0803c3
uniqid(bin2hex(random_bytes(1))) // 555ce642e2cb9fa
uniqid(bin2hex(random_bytes(1))) // eb5ce642e463215
```

# 2019.05.24 追記

@go12lim さんから `uniqid` の第二引数使うとシンプルに書けるとアドバイスいただきました🙇‍♂️

```php
uniqid('', true) // "5ce7b766c4b586.26307700"
uniqid('', true) // "5ce7b767d85ab4.09025400"
uniqid('', true) // "5ce7b7687dd943.84230183"
```

これが一番シンプルで良さそうです！
ドット付きが気にならなければこれで良さそう！

## 参考

- https://php.net/manual/ja/function.uniqid.php
- https://php.net/manual/ja/function.dechex.php
- https://php.net/manual/ja/function.random-int.php
- https://php.net/manual/ja/function.bin2hex.php
- https://php.net/manual/ja/function.random-bytes.php
- https://qiita.com/gakuri/items/27cca8f0fa28b78ddeca

## 関連記事

- [PHP UUID version4 を生成する](https://qiita.com/ucan-lab/items/5043e362f13ff73cc0c7)
あまり気にしていなかったこと（最新はだめ、文字種類）

アプリを作成する上で、
対応機種では動かないといけない。

古いパソコンで動くものや、
IE11で動くもの、
新しいものと、古いものに対応させるには、
最新のフレームワークを使用してはいけないようだ。
作った後、テストをしているときにエラーが出て、
フレームワークの問題でバグが見つからなかったり、
原因がわからず作り替えないといけない事があるから。
ということで古い物で作るのが効率がいい

また、
SQLであまり気にしていなかったが
寿司ビール問題は有名だそうだ
https://qiita.com/kamohicokamo/items/3cc05f63a90148525caf
検索機能を付けたとき、検索結果が文字の種類で変わるというもの。
検索機能なんて検索できたらいいと思っていたので、そこを厳密にするとなると、色々なパターンがあるので衝撃でした。