OmniAICreator/Qiita-1.07M huggingface dataset:
ダメなコード/設計 覚え書き

現実にこういうコードを書く人がいたので、真似しないでねの意味で書いておきます。
実例がx86-64 CPU + Linux + C言語 + GNU gccの環境で書かれていたので、内容もそれに基づいています。
(技術の問題というよりは人や組織の問題になってしまったけど…)

(追記)
ここでのことは、上記環境にて「Webアプリケーションを開発している」という文脈で話しています。

# コードの書き方のここが駄目

## インデントがグチャグチャ

よくいますね、こういう人。
既存コードのインデントルールを無視して、自分ルールを適用するならまだマシです。
ひたすらにルールがなく、「タブキーを押すのが面倒臭い」くらいの理由でインデントを壊してくれます。

で、こういう人に限ってviやEmacsとか使って「自分はvi/Emacs使えるんだぜ(ドヤァ)」な感じを出しながら、その機能はちゃんと使えてなかったりします。
(vi/Emacsはもちろん素晴らしいエディタです)
コード整形ツールなんて結構あるし、IDEだって一杯あります。でもそういうツールに頼るのは「ズルい」とか言ったりします。

## {} 省略記法を多用する

コードが読み辛くて仕方がない。
「括弧を打つのも面倒臭い」くらいの理由です。

## 変数名が不適切

プログラミングってのは究極的にはネーミングと言っていいくらい名前付けは大切です。
その名前が実体に即したものでないと読んでいる人が混乱します。
ループカウンタでi、j、kとか使うのは別に良いんです。その変数のスコープが限られていた上でなら、それがカウンタだってことは分かりますから。

実例を言うと…
- r1、r2、r3…とかいう変数をint型で用意しておく。
- 各変数に、どのような意味の値が入るかは**決まっていない**。
    - ループカウンタかもしれないし、何か処理対象となるデータかもしれない。
    - ある時点で同じ変数名にどのような意味のデータが入っているか…それはコードを先頭から読まないと理解できない。
- **型が異なる場合には、キャストで強制変換して解釈する**。

…難読プログラミングチャレンジでもしてるのかっつ〜の。

「rって何?」って聞くと「registerのrですよ(当然だろ?)」みたいな返答をしてくる。

**バッカじゃねぇの!?**

8bitや16bitの時代のコード書いているんじゃないんだぜ?

## コードフローが階段状になっている

私が良いコードフローと思うことが多いのは…

1. mainが処理Aを呼び出す。
2. mainが処理Aの結果を受け取る。
3. mainが処理Bを呼び出す。(そのパラメータに処理Aの結果が用いられるかもしれない)
4. mainが処理Bを呼び出す。
5. プログラム終了。

みたいな形で処理Aと処理Bが独立したコードになっている時です。

対してダメなコードは…

1. mainが処理Aを呼び出す。
2. 処理Aが処理Bを呼び出す。(そのパラメータに処理Aの結果が用いられるかもしれない)
3. return → return …
4. プログラム終了。

こんな感じで処理Aと処理Bが独立しておらず、個別にデバッグすることも分離することも出来なくなってます。
これは関数に分けて設計するとかモジュール性を高めるってことが全く分かっておらず、長大な1個の関数を適当にブツ切りしているだけの書き方です。

## こうすれば速くなるんですよ!! (証拠は無い)

「早すぎる最適化」はプログラミングで戒めるべきであるということは周知の事実ですが、未だに理解していない人もあります。
プログラムが高速に動くんであればそれに越したことは確かにないんですが、高速化したというなら証拠(比較結果)を出してくださいな…
ましてやその高速化が…

- **インラインアセンブラを使えば速い!**
- **C言語(ネイティブコード)だから速い!**

程度の浅はかな対処だったりするもう、何と言ってよいやら。

# 設計のここが駄目

## 外部プログラムとのデータ交換に使うデータのフォーマットはC言語の構造体をバイナリダンプしたもの

… 1970年代の話でしょうか、これは?
エンディアンとか知ってる?
しかも、このバイナリダンプの内容をWord文書にシコシコと表にして書いて、「データフォーマット仕様書です」とか…orz

## ビットがもったいない(と言いつつ現実は見ない)

バイナリデータの設計をするにあたって、「データ長」 + 「データ内容」という構造があったとします。
ここで「データ長」を実際の値を1bit右シフトすることで、「**型のサイズの2倍までデータ長を表現できます!**」とか息巻いている。
…あのね、そうすると当然データ長は偶数にならなければならないわけだ。
なのにデータ内容は1byte単位で増減するので、必ずしも偶数byte長にはならないわけだ。
その時はどうする?と聞いたら…
「末尾に1byteのpaddingを入れればいいでしょ?」
と返答された…(唖然)
1bitを節約するために、1byteの無駄データを入れるわけですよ。

## あるデータをどう解釈するかは、データ先頭から読み込んだ場合の状態遷移で決まるので、データの特定箇所だけを見ても分からない

…まぁ、そういう複雑なデータ構造があるというのは理解します。
ただ、それはどうしてもそういう難しいデータ構造でなければ表現できない場合に使うべきであり、徒に用いるべきではないと思いますね。
また、こういうデータ構造をどうしても使いたい場合には、途中にwater markとかを設けてエラー検出できるようにしておかないと後で困ります。必ず。

以上
Webを支える技術（HTTPメソッド）

20181115
## やったこと
Webを支える技術を読む
HTTPメソッドの章

## 気になった事、メモ

### GET POST以外のメソッドについて
### [なぜ html の form は PUT / DELETE をサポートしないのか？](http://jxck.hatenablog.com/entry/why-form-dosent-support-put-delete)

とても興味深い👓

### Railsではmethod: を使い_methodパラメータでPATCH・PUT・DELETEメソッドを動かす

```ruby
form_tag(search_path, method: "patch")
```

上のコードから以下の出力が得られる

```html
<form action=“/search” method=“post”>
  <input name=“_method” type=“hidden” value=“patch” />
```



### べき等と安全

べき等　👉　ある操作を何回繰り返しても同じ結果になること

安全　👉　操作対象のリソースを変化させないこと

| メソッド   | べき等 | 安全 |
| ---------- | ---- | ---- |
| GET, HEAD   | 　⭕    | ⭕    |
| PUT, DELETE | 　⭕      | ❌    |
| POST       | 　❌      | ❌    |

### 実装のコツ

- GETにリソースの取得以外の機能を付与させない

- POST他のメソッドで出来ることをさせない。他のメソッドが持つべき等や安全が利用出来ない
- 時間や状況で指し示すリソースが変化するリソースは、更新や削除できない様にする

- PUT　変更内容は完全な表現にする。

### PUTがべき等でなくなる例

| 値   | 変更内容 | 結果       | べき等 |                                  |
| ---- | -------- | ---------- | ------ | -------------------------------- |
| 100  | ＋50     | 100+(50*n) | ❌      | 👈PUTを繰り返すと値が変化し続ける |
| 100  | 150      | 150        | ⭕      |                                  |

## 所感

HTTPメソッドを数種類に限定し、統一インターフェイスにすることでシンプルさ、拡張発展性を持った事がWebが発展した要因の一つとの事。Webではないけれど、VHSとベータ、DVDとブルーレイなど規格が乱立するとユーザーはもとより、ソフト・ハードを作る人も混乱して発展しにくくなるから規格をシンプルに統一することは大事だなと感じた。

Webは規格にのっとればどのハードでもリソースを利用できる。スバラシイ。
UIBezierPathを使用して点線を引いてみた

# はじめに
UIViewを点線に見せる表現方法についてです。

使用用途は...どうでしょう。
考えればあるとは思いますけどそこまで頻繁に使う機会は無さそうですがこんな感じで出来るのか。と知れたので記事にしてみました。

# コード
@IBDesignableを付けている理由は、Storyboard上で変更を確認したかったので付けました。

肝はUIBezierPathでこのClassはCustomViewで描画される線分(直線、曲線)らしい。

```DotLineView.swift
import UIKit

@IBDesignable
class DotLineView: UIView {

    // Inspectorで点線の色と幅を設定出来るようにする
    @IBInspectable var dotColor: UIColor = UIColor.gray
    @IBInspectable var lineWidth: CGFloat = 2.0

    override func draw(_ rect: CGRect) {
        let path = UIBezierPath()

        path.lineWidth = self.lineWidth

        // 他にround, squareを設定出来る
        path.lineCapStyle = .butt

        // 起点
        path.move(to: CGPoint(x: 0, y: rect.midY))
        // 帰着点
        path.addLine(to: CGPoint(x: rect.width, y: rect.midY))

        let dashes = [path.lineWidth, path.lineWidth]

        // 第一引数 点線の大きさ, 点線間の間隔
        // 第二引数 第一引数で指定した配列の要素数
        // 第三引数 開始位置
        path.setLineDash(dashes, count: dashes.count, phase: 0)

        // 点線の色設定
        dotColor.setStroke()

        // 点線の描画
        path.stroke()
    }
}
```

# Storyboard

Viewに配置したUIViewに**DotLineView**をCustomClassとして指定してるだけです。
<img width="1436" alt="スクリーンショット 2019-01-15 22.52.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/75593/ddf20dd5-632e-e177-6ca3-3737b338f819.png">

# 動作確認
点線！！！
<img width="361" alt="スクリーンショット 2019-01-15 22.55.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/75593/21bff14f-db8e-c231-a4ef-dad412bd4493.png">

LineWidthを2から10に変更したバージョン
Inspector上で値を変更した結果が反映されるので確認が楽チン！
<img width="1165" alt="スクリーンショット 2019-01-15 22.57.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/75593/03dc2e97-eb03-3f38-5cc2-d11fb32ec13c.png">

# 終わりに

これくらいだったらImageもらってUIImageViewとして表示した方が楽なんじゃないか？と実装中思ったりしましたが、仮に点線の間隔、大きさの変更が入った場合はこっち方が柔軟に即反映出来るのが強みかと！

UIBezierPathで色々な形が描画されるのにハマるのも今日だけな気はするけど楽しかった笑
UIBezierPath芸なるものが爆誕するもの面白みある。。。かも？笑
お絵描きとかもこれでいけるのでは？と思ってたりするので出来るのかどうかだけは今月中に取り組みたい！

おまけ：サッカーコートっぽいやつ
<img width="353" alt="スクリーンショット 2019-01-15 23.06.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/75593/eb06554a-0d00-c0c5-2192-69b5c849392d.png">
Webを支える技術（URIなど）

20181114
## やったこと
Webを支える技術を読む。はじめからURIまで。

## 以下、読書メモ✍

### Webの用途

- Webサイト
- ユーザーインターフェイスとして
- APIとして（プログラム用インターフェイス）

## Webを支える技術

- HTTP URI HTML
- ハイパーメディア（任意の情報に任意のタイミングでアクセスできる）
- 分散システム（世界中のサーバにアクセス）

## リソース

- Web 上の情報
- URIで一意の名前を持つ
- URIを利用しプログラムはリソースへアクセス可能に（=Addressability)

ステートレス、アプリケーションの状態を"サーバ"で管理しないこと（ステートレスサーバ）

キャッシュ、一度取得したデータのクライアント側での使い回し

## RESTとは下記の６つを組み合わせたもの

・クライアント／ サーバ ：ユーザ インタフェース と 処理 を 分離 する 

・ステートレスサーバ ：サーバ 側 で アプリケーション 状態 を 持た ない

 ・キャッシュ ：クライアント と サーバ の 通信 回数 と 量 を 減らす 

・統一 インタフェース ：インタフェース を 固定 する (HTTPメソッド縛り)

・階層 化 システム ：システム を 階層 に 分離 する

・コードオンデマンド ：プログラム を クライアント に ダウンロード し て 実行 する（JS)



## URI

### 絶対URIと相対URI

相対URIはHTMLの<head>内の<base>要素にベースURIを記述する

```html
<base href="http://www.example.com/page.html">
```

### URIに使えない文字をURIに使うときは%エンコーディングされて転送される

```
http:// ja. wikipedia. org/ wiki/ あ
　        👇に展開される
http:// ja. wikipedia. org/ wiki/% E 3% 81% 82
```

### URI実装ポイント

👉なるべく絶対URIにする

👉エンコーディングはUTF-8にする

## URIを変わりにくくする

### 目的
リンク切れ防止。
Webのハイパーメディアシステムとしての機能が成り立たなくなる。

### コツ

- 実装に依存した拡張子やパスを含まない
- メソッド名やセッションIDを含めない
- リソースを表現する名詞にする



### 初期のRailsの悪いURI例（showメソッドが含まれている）

  ```http:// example. jp/ sample/ people/ show/ 123```



### マトリクスURI

複数のパラメ−タをセミコロン（;）で区切ってリソースを表現する。
経度と緯度を表したURIの例
```http:// example. jp/ map/ lat = 35. 705471; lng = 139. 751898```



### 下記の点がとても重要。URIをしっかりと意識する必要がある
- URI は リソース の 名前 で ある 
- URI は 寿命 が 長い 
- URI は ブラウザ が アドレス 欄 に 表示 する

## 所感
Railsのフレームのお陰で普段あまりURIを意識していなかった事に気づく。
URI奥深いなぁ。
Amazon CloudFront経由で、S3からLambda for Ruby2.5を使ってPDFファイルをダウンロードする

前の記事の続きです。
[AWS Lambda から S3 に保存したPDFファイルをダウンロードするメモ](https://qiita.com/sy250f/items/5e3c0fecfe7c8bdfa853)

S3に保存したPDFファイルをAmazon CloudFront経由でAPI GatewayのAPIエンドポイントに設定したLambdaを実行してブラウザに表示させます。

# Amazon CloudFront の設定
リクエストヘッダーに "Accept: application/pdf" を付与するためにCloudFrontを利用します。
作成の流れと設定は以下の通り。

 1. Amazon CloudFront Getting Started から Create distribution を押下
 2. Select a delivery method for your content.　から　Web の Get Started を押下
 3. Origin Settings
  - Origin Domain Name　:　APIエンドポイントURL
  - Origin Custom Headers　:　Accept　application/pdf, Content-Type　application/pdf
 4. Create distribution を押下

<img width="890" alt="スクリーンショット 2019-01-15 23.05.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/214523/0901cebd-df9e-1d8e-5b58-ec0a593eb6ac.png">

**補足**
 - Origin Domain NameにAPIエンドポイントURLを入力すると、Origin Path等は自動で入力されます。

# CloudFrontのURLにアクセス
PDFファイルが表示されます。

<img width="490" alt="スクリーンショット 2019-01-15 22.49.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/214523/e98f1aca-0466-1ee9-ef1f-7d69bbdfef8d.png">
オブジェクト指向設計とクラス図


20181113
## やったこと
オブジェクト指向の参考記事を読む
クラス図を書いてみる

## ER図とクラス図が混同したので調べてみる🔎
>ER図はデータモデルの抽象表現を表し、クラス図は提案されたシステムの静的構造と動作を表す。 ER図の主なビルディングブロックはエンティティ、リレーションシップ、および属性ですが、クラス図の主なビルディングブロックはクラス、リレーションシップ、および属性です。　[参考](https://ja.esdifferent.com/difference-between-er-diagram-and-class-diagram)

ER図はリレーションシップを外部キーで表し
クラス図には振る舞い（メソッド）がある。という違いが分かった。


## 書き分けてみる

![image.png](https://256interns.storage.googleapis.com/images/images/000/001/617/normal/image.png?1542039024)




## まとめ
クラス図 👉 オブジェクト指向設計用　対応ファイル）Rubyファイル群（モデル、コントローラ）
ER図 👉データモデリング設計用　対応ファイル）スキーマファイル
RSpec modelとcontrollerのテストについて


20181110
## やったこと
RSpecでmodelとcontrollerのテストを書く

### 参考
- everydayrailsの本
- [スはスペックのス 【第 2 回】 RSpec on Rails (コントローラとビュー編)](https://magazine.rubyist.net/articles/0023/0023-Rspec.html)
- [RailsのController Spec](https://morizyun.github.io/ruby/rspec-rails-controller.html)

## テストは何を書いたら良いのか🤔？ => 調べてみる🔎

### モデルテストに含むもの
> • 有効な属性で初期化された場合は、モデルの状態が有効（valid）になっていること
• バリデーションを失敗させるデータであれば、モデルの状態が有効になっていないこと
• クラスメソッドとインスタンスメソッドが期待通りに動作すること
everydayrailsより

### コントローラの責務 
>- 受信したリクエストに対して適切なレスポンスを返す
>- ビューで使用するのに必要なモデルオブジェクトをロードする
>- レスポンスを表示するのに適切なビューを選択する
[スはスペックのス 【第 2 回】](https://magazine.rubyist.net/articles/0023/0023-Rspec.html)より

## 所感
テストの目的と何をどうやって書くのかが勘所であるが、ケースバイケースである場合もあり難しく感じた。またどんどん書き方（gem等）も変わっている様なので、常に本質（上記の例）を捉えてテストする様にしたい。
要点がつかめないと、意味のないテストに時間をかけてしまいそうで恐ろしい😱
【Ruby on Rails】RSpecにおけるモックとスタブの基本事項メモ【プログラミング学習開始142日目】

# はじめに

個人用のメモです。

Railsチュートリアルを完走し、現在、[Everyday Rails - RSpecによるRailsテスト入門](https://leanpub.com/everydayrailsrspec-jp)を用いてRSpecの勉強を進めていたところ、10章にて「モックとスタブ」というものが出てきました。

初見ではあまり理解できなかったため、それぞれの定義や文法などの基本をさらうべくまとめてみました。

# モックとスタブの定義・特徴・文法
## モック
- テスト用の影武者として働くオブジェクト。
- データベースへのアクセスなしで生成される（＝テストの時短に繋がる）。
- `double`を用いて影武者を生成

## スタブ
- テスト用のダミーメソッド。
- データベースやネットワークを使うメソッドをデータベースへのアクセスなしで呼び出す。
- `allow(モデル名).to メソッド`を用いてダミーメソッドを作成

# 使用例
- 以下の例では`user = double("user", name: "Fake User")`のように`double`を用いてモック（＝影武者ユーザー）を生成している。
- `allow(note).to receive(:user).and_return(user)`はNoteモデルに#userメソッドがある場合に、欲しい結果（user）を返すという処理
- このようにモックとスタブの使用によって、ユーザーを永続化しない、且つ、データベース上でのユーザー検索をしないテストが記述できるようになる

```ruby:spec/models/note_spec.rb
it "delegates name to the user who created it" do
 user = double("user", name: "Fake User")
 note = Note.new
 allow(note).to receive(:user).and_return(user)
 expect(note.user_name).to eq "Fake User"
end
```
※ [Everyday Rails - RSpecによるRailsテスト入門](https://leanpub.com/everydayrailsrspec-jp)の10章・モックとスタブの項にて出てきたコードを例としてお借りしています。

# まとめ
- モック・スタブによってデータベースにアクセスせずにオブジェクトやメソッドを使用できる。
- テストが早くなるというメリットがある。
- `double`でモックを生成、`allow(モデル名).to メソッド`でスタブを作成する。

# 参考書籍・URL
- [Everyday Rails - RSpecによるRailsテスト入門](https://leanpub.com/everydayrailsrspec-jp)の10章
- [【Rspec】メソッドスタブ（allow ..to receive）の小さなサンプルメモ](https://qiita.com/kure/items/a67ffd9645d4f1731a97)
- [Rails tips: RSpecでシンプルなスタブを使う（翻訳）](https://techracho.bpsinc.jp/hachi8833/2018_02_20/52293)
kaminariでページング処理の追加とseeds.rbでダミーデータを追加

20180921
## やったこと
- kaminariでページング処理の追加
- ページングの効果確認用ダミーデータ登録
- gemの追加など

## 手順
1. kaminariブランチ作成、checkout
2. gemの導入,paginationの実装
3. シードデータ登録
4. 動作確認、rubocop実行
5. commitしてからmasterにマージ
6. remoteに[push](https://github.com/Y-KURI/my_web_apps/commit/590c27949a68c46a1ee181bedba2012dace161d9)

## seedsでダミーデータの生成
##### ページングの確認用にデータを１００件自動登録
##### gimeiを使ってそれっぽいユーザー名にしてみる

```ruby:
# seeds.rb
memos = %w[牛乳買う たまご買う 振り込む オイコス買う 布団干している 電池を買う 録画する 日報を書く ブログを書く LTつくる]

100.times do |i|
  author = Gimei.name.kanji
  Book.create(title: "タイトル #{i}", memo: memos.sample, author: author)
end
```
## 簡単にデータの追加とページング機能ができた🌟
##### ページ位置の表示とja.ymlでリンク表示を日本語化


![スクリーンショット 2018-09-23 22.48.27.png](https://256interns.storage.googleapis.com/images/images/000/001/026/normal/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88_2018-09-23_22.48.27.png?1537711525)


## 所感
自分でつくるといろいろ書かないといけないところ、kaminariは簡単な記述（```<%= paginate @books %>```）でページング処理ができた。
seedsは初めて触ったが、１００件登録するのも簡単で速くて便利だった。gimeiも面白い。
rubocopからGemfileがアルファベット順じゃないと怒られ、とても几帳面だなと感じた^^;
Railsチュートリアルをやってみる（１日目）

# はじめに
この記事はRailsチュートリアルを通して、個人的なメモと躓いたポイントを書き記していきます。
皆さん書いておりますが、まずは以下に沿ってRailsを勉強していこうと思います。
[Ruby on Rails チュートリアル](https://railstutorial.jp/)

## AWSのIDE環境を構築する

ローカル環境と迷いましたが、AWSの勉強も兼ねて
今回はAWSを選択しました。

#### AWSのアカウント登録

下記を登録して、アカウントを作成

- アカウントの登録
- 個人情報の登録
- クレジットカードの登録

#### IDE環境の構築

チュートリアルで推奨しているCloud9を使って構築します。

1. AWSにログイン後、マネジメントコンソールを立ち上げて、Cloud9を検索します。<img width="786" alt="AWS登録0.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/341731/36d333b8-2467-a412-236c-c51f8d3abcca.png">

2. 「Create enviroment」を選択します。<img width="665" alt="AWS登録PNG.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/341731/e77709ae-9e85-bb97-a6ba-d4587a1bc514.png">

3. IDEのインスタンス名と説明を記入します。適当に入れておきましょう。<img width="571" alt="AWS登録2PNG.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/341731/9f09c469-f122-7bb9-b7e1-cb80f2946d96.png">
4. インスタンスの種別とかコア数とかを選択（料金にかかわる）
気にしない人はデフォルトでもいいと思います。
<img width="382" alt="AWS登録3.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/341731/8638974e-a54c-c47b-19b7-0f08aee2bc04.png">
5. 確認画面ですね。「Create enviroment」で作成されます。
<img width="383" alt="AWS登録4.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/341731/3bd5e6da-8a47-4ed0-cda6-5ae05a1f5b22.png">

6. こんな画面が出れば、ひとまずIDEの設定はOKです。
<img width="958" alt="AWS登録5.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/341731/650f7e9e-024c-dbbf-c636-0238e0d8fa02.png">

##### 広告ブロックソフトに注意

私は普段、Google Chromeブラウザを使っており、「uBlock Origin」を使用しているのですが
作成したIDEに接続しようとすると、下記記事のような現象になりました。
なので、AWSのURLは許可しておくことをおすすめします。。。

[Cloud9で新しくenvironmentを作ったけど繋がらない問題、AdBlockが原因かも](http://yuukiyg.hatenablog.jp/entry/2018/09/26/012536)


# おわりに
次回は、Hello World出力まで
投稿が続くようにがんばります。
エンジニアのための知人のアカウントトラブルへの対応

エンジニアをやっていると、ネットやスマホ関連でトラブルを起こした時に対応を頼まれることが多い。エンジニアといっても、多少は詳しいがトラブルシューティングが得意じゃ無い人もいる。

例えば、アカウントがロックした、パスワードを忘れた、登録をした覚えのないところからメールが来る・・・等々。知人のネットトラブルを対応した経験から、事前にトラブルを予防するための方法をかいていきたいと思う。

## トラブルを起こさないために事前にしておくこと

### 自分の利用しているサービスを把握してもらう
まず、どういうサービスを使用しているかをリストアップしてもらおう。エンジニアじゃない人にとっては、サービスが使えるようになった段階でアカウントやパスワードはどうでっもよくなります。ブラウザやスマホにパスワードを記憶させているので、普段から意識することなく、忘れてしまうことがよくあります。

トラブルを予防するには、使っているサービスで以下の二つができるか確認してもらいましょう。

- パソコンとスマホの両方からログイン
- パスワードリセット

この二つができることを確認しておくだけで、トラブル時の対応がかなり円滑に行えるようになります。最近では、なりすましが怖い、不正にログインされるのが嫌という理由で、二要素認証を使用する人も多いです。

二要素認証を使用する場合、スマホか故障したときの対策は必須です。一番有効なのは、以前使っていたスマホを手元に取っておいてもらうことです。スマホが故障した際には、古いスマホにSIMカードを挿してもらいましょう。SMSが受け取れるので、二要素認証が可能にになります。

スマホを紛失しあり、盗難にあった際には、PCにログインして以下の操作が必要になります。

- スマホの遠隔ロック、もしくは消去
- GPSの追跡機能の利用
- 二要素認証の解除

二要素認証の解除を忘れると、ちょっとしたミスでアカウントにログインできなくなってしまいます。最悪、アカウントにログインできなくなって、今までのデータを諦めることになってしまいます。

### アカウントはソフトウェアで管理してもらう

紙に書いてアカウントを管理すると、かなりな確率で「どれだったっけ？」となってしまいます。特に、普段からPCをあまり使わない人はアカウントに関心がありません。メモをしておいても、メモの存在を忘れます。アカウントを管理するには、以下のソフトをお勧めします。

**keepassの使い方**
https://laboradian.com/keepass/

このソフトですが、iPhoneやAndroidでもPCで作成したデータを使用できます。

Keepassで作成したデータは、Windows,Mac,Linux(そういうので動いてるコンピュータがある)で使用できます。スマホでも、AndroidとiPhoneの両方で使用できます。同様に、AndroidのタブレットやiPadでも使用できます。

**MiniKeepass(keepassのiPhone版)**
https://love-guava.com/iphone-minikeepass/

**KeePassDroid(keepassのAndroid版)**
http://wasure.net/keepass-android/

ソフト自体の操作も簡単で、コンピュータに弱い人でも問題なく操作できるレベルで、すぐに慣れると思います。 ソフトを起動する時に必要なパスワードを一つ覚えておけば、他のパスワードを覚えておかなくても利用することができます。

このソフトを使えば、使用するサービスのログインページとIDとパスワードをひとまとめにして管理できます。ソフトを開いて、ログインページをダブルクリックで開くことができます。ログインページを開いて、IDとパスワードをダブルクリックでコピーすることができるので、

テキストでIDとパスワードを管理するよりも便利でです。また、使用するときにパスワードがかかるので、人にパスワードを見られたりする危険も少なくなります。

### データのバックアップについて

スマホのデータは、何らかの方法でクラウドに定期的にアップロードできるように設定をしておきましょう。iPhoneであれば、iCloudを利用するのが無難です。AndroidであればGoogle Driveが無難でしょう。先ほど挙げたKeepassのデータも、クラウドで提供されているストレージのサービスを利用してPCと共有すると便利です。

iPhoneであれば、iTunesでPCにシステムのバックアップを作成することができます。もしくは、iCloud上にバックアップを作成することができます。ただし、標準のプランではストレージの容量がすぐにいっぱいになってしまいます。システムのバックアップをiCloudに保存するのであれば、容量の追加は必須です。

Androidに関しては、Googleのアカウントに結びつけてデータのバックアップを取得することができるようです。Androidのスマホを使っていないので詳しくは分かりませんが、キャリアによってはユーティリティソフトを提供していて、それを使用してシステムのバックアップを取得できるものもあるようです。

使用しているアプリケーションやゲームのデータについては、かなり微妙です。基本的にバックアップできないくらいの前提で考えておきましょう。ゲームのデータに関しては、機種の乗り換えに関しては手段が用意されているようですが、紛失や盗難の際の機能はものによって対応はまちまちです。クラウドを使用しないようなソフトであれば、個々にエクスポートやインポートをするしか方法が無いようです。データや設定のバックアップに対応していないものも多いようです。

## トラブルを起こす前に予防しましょう

トラブルを起こしてからの対応は、起こす前に行う対応より十倍近くの手間がかかります。特に、消えたら困るようなデータがある場合は、プレッシャーや不安で冷静な対応ができなくなってしまいます。

多少面倒くさいかもしれませんが、大事なデータです。データが消えてしまうことで、金銭的な損失を被ってしまったり、お金では買えないプライスレスな思い出や記録が消えてしまうかもしれません。アカウントの管理は、銀行の通帳と同じくらいの感覚で管理するので丁度いいのかもしれません。
Brakemanの:: parse error on value ":" (tCOLON)について

##初めにBrakemanとは？
Railsのセキュリティの問題点等をコマンド1つでチェックしてくれるGemです。

サンプル

```
== Brakeman Report ==

Application Path: /Users/〜/environment/〜
Rails Version: 5.2.2
Brakeman Version: 4.3.1
Scan Date: 2019-01-15 22:26:52 +0900
Duration: 0.890646 seconds
Checks Run: BasicAuth, BasicAuthTimingAttack, ContentTag, CreateWith, CrossSiteScripting, DefaultRoutes, Deserialize, DetailedExceptions, DigestDoS, DynamicFinders, EscapeFunction, Evaluation, Execute, FileAccess, FileDisclosure, FilterSkipping, ForgerySetting, HeaderDoS, I18nXSS, JRubyXML, JSONEncoding, JSONParsing, LinkTo, LinkToHref, MailTo, MassAssignment, MimeTypeDoS, ModelAttrAccessible, ModelAttributes, ModelSerialize, NestedAttributes, NestedAttributesBypass, NumberToCurrency, PermitAttributes, QuoteTableName, Redirect, RegexDoS, Render, RenderDoS, RenderInline, ResponseSplitting, RouteDoS, SQL, SQLCVEs, SSLVerify, SafeBufferManipulation, SanitizeMethods, SelectTag, SelectVulnerability, Send, SendFile, SessionManipulation, SessionSettings, SimpleFormat, SingleQuotes, SkipBeforeFilter, StripTags, SymbolDoSCVE, TranslateBug, UnsafeReflection, ValidationRegex, WithoutProtection, XMLDoS, YAMLParsing

== Overview ==

Controllers: 5
Models: 1
Templates: 53
Errors: 0
Security Warnings: 0

== Warning Types ==


No warnings found
```

##:: parse error on value ":" (tCOLON)
今回はその中のErrorsに出てきたものをメモ程度に書きます。

エラー

```
== Errors ==

Error: /Users/〜/environment/〜/app/views/〜/categories/_list_product.html.erb:4 :: parse error on value ":" (tCOLON)
Location: Could not parse /Users/〜/environment/〜/app/views/〜/categories/_list_product.html.erb
```

もの凄く簡単に結論（私がそうだと思った）を書きます。
errorで指定されたファイルに何らかのsyntax errorや特定のRubyのバージョンでしか書けない作法を取っているとこのエラーが出ると結論付けました。

##終わりに
私のメモ程度で書いています。
認識の違いなどがあればご指摘頂けると嬉しいです。
rails I18n導入

## やったこと
- [I18nAPI Rails ガイド](https://railsguides.jp/i18n.html)を読み進める
- 既存のコードでどう使われているか確認＆クローンして弄ってみた

## ログインページを変更してみる

```yml:ja.yml
# ja.yml抜粋
  helpers:
    label:
      user:
        login_name: "ゆーざーめい📝" #"ユーザー名"
        password: "ぱすわーど🔐" #"パスワード"
        remember_me: "りめんばーみー" #"次回から自動的にログイン"
  
  sign_in_successful: "サイン★インしました♪"
```

## flashメッセージで呼び出す
```ruby
 notice: t("sign_in_successful")
```


## Active Recordモデルで翻訳

```yml
# ja.yml抜粋
  activerecord:
    models:
      user: "ユーザー"
     
```

## 気づき
%iはコロンで並べて書くより書きやすく、またコードのまとまりが見易くなって良いなと思った。
👉```before_action :login only %i(index show edit update destroy)```


## 所感
i18nはアプリの国際化だけでなくいろいろな辞書として使い方があって奥が深いと思った。
よく使う単語を一元管理して、いろいろな所で再利用しやすい形にしていると学んだ。
コードを書いている途中で日本語入力に切り替えるのが億劫なので、日本語を書くファイルをまとめておけるのは良いなと感じた。
コードリーディングはとても勉強になった。
レコードタイプが有効な Salesforce オブジェクトを Heroku で利用する方法

Salesforce開発者の方で、Salesforce API で、レコードタイプ API を制御したことがある人ならご存知でしょうネタです。Herokuや一般的なWebアプリの開発をされてこられた方が、Salesforce と連携して、レコードタイプをもつオブジェクトをなんとか制御したいと考えたときに、どのように設定・利用すればよいかを紹介します。

## 設定手順

設定手順は次のとおりになります。

1. Salesforce 側で、取引先、商談などで必要となるレコードタイプを作成します。
2. Heroku Connect で、`RecordType` オブジェクトを同期する
    1. sobjecttype, isactive あたりは`最低限`同期対象のフィールドとする
3. Heroku Connect で、 レコードタイプを作成したオブジェクトを同期する
    1. 必ず `RecordTypeId` フィールドを対象とすること

## 利用方法

取引先や、商談のオブジェクトで、`RecordTypeId` フィールド(カラム) には、割り当てられたレコードタイプの Salesforce ID が割り振られます。このレコードタイプを、ユーザやロールごとにデータへのアクセス可否などをアプリケーションで制御します。レコードタイプごとに処理を変更したり、レイアウトを変更する場合には、この `RecordTypeId` をキーにすればよいということです。

この `RecordTypeId` が何かというものを Heroku 側で知る場合には、`RecordType` テーブル (Salesforce でいうオブジェクト) から、`RecordTypeId` と同じ `sfid` のレコードを検出します。 `RecordType` オブジェクトでは、次のフィールド(カラム)でレコードタイプの詳細を確認できます。

* name - レコードタイプ名
* sobjecttype - 対象のオブジェクトAPI名 (取引先なら Account など)
* isactive - 有効(true)か無効(false)か
* description - 詳細, 説明文章
* developername - レコードタイプ名

※ 詳細 → https://developer.salesforce.com/docs/atlas.ja-jp.216.0.object_reference.meta/object_reference/sforce_api_objects_recordtype.htm

## 注意事項

Heroku Connect で、該当のオブジェクトに `RecordTypeId` が見つからない場合は、まだレコードタイプが作成されていないためです。まず、レコードタイプを Salesforce 側で作成しましょう
KerasのImageDataGeneratorが出力する画像の順番について

KerasのImageDataGeneratorを使用すると簡単にデータ拡張が実現できます。
ImageDataGeneratorの使用方法については以下の記事が参考になりますが、
複数の画像を入力したときにどのような順番で画像が出力されるか気になったので調べてみました。

[Kerasによるデータ拡張](http://aidiary.hatenablog.com/entry/20161212/1481549365)
[Kerasでデータ拡張(Data Augmentation)後の画像を表示する](https://qiita.com/takurooo/items/c06365dd43914c253240)

## 使用したコードと概要

```python
from tensorflow.keras.preprocessing.image import ImageDataGenerator
from tensorflow.keras.preprocessing import image
import numpy as np
import matplotlib.pyplot as plt

def load_img(name):
    img = image.load_img(name, target_size=(256, 256))
    return image.img_to_array(img) / 255

def show_imgs(imgs, row, col):
    for i, img in enumerate(imgs):
        plot_num = i+1
        plt.subplot(row, col, plot_num)
        plt.tick_params(labelbottom=False)
        plt.tick_params(labelleft=False)
        plt.imshow(img)
    plt.show()


imgs = np.array([load_img('b.png'), load_img('c.png'), load_img('t.png')])
# 各画像にラベルを付けるための配列
labels = np.array([0,1,2])
# 画像の表示
show_imgs(imgs, 1, 3)
```

使用した3枚の画像はペイントで適当に作った以下のものです。

<img width="270" alt="a.png" src="https://qiita-image-store.s3.amazonaws.com/0/42193/178c620e-3f89-8d61-0cfd-7222bea8dc38.png">

ImageDataGeneratorは以下のコードで作成します。

```python
datagen = ImageDataGenerator(
    rotation_range=40.,
    width_shift_range=0.3,
    height_shift_range=0.3,
    zoom_range=0.3)

# 全体を見る必要があるパラメータを使用する場合はfitが必要
# 今回は特に必要ないけど一応やっておく
datagen.fit(imgs)

# 指定したバッチサイズで3回生成する
def create(batch_size):
    gen = datagen.flow(imgs, labels, batch_size=batch_size)
    for i in range(0, 3):
        data = next(gen)
        print('len:{}, labels:{}'.format(len(data[0]), data[1]))
        show_imgs(data[0], 1, len(data[0]))
```

## 画像を生成する

### バッチサイズと画像の総数が同じ場合

```python
create(3)
```

<img width="279" alt="b3.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/42193/bb5a54f6-c2dd-cdae-84cd-2491cb571aeb.png">

ランダムな順番で画像が生成されているみたいです。
元画像と全く同じものは出力されず、変形が加えられたもののみが出力されています。

### バッチサイズのほうが画像の総数より少ない場合

```python
create(2)
```

<img width="291" alt="b2.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/42193/cf68dcdd-ee50-5f27-a15b-8fc240ac2bf9.png">

`2,1,2...`というような感じで出力されるようです。

### バッチサイズのほうが総数より多い場合

```python
create(10)
```

<img width="278" alt="b10.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/42193/74085502-ba74-f5ff-69e0-6a98c511be35.png">

画像の総数が1バッチの最大個数のようです。

## まとめ

画像はランダムな順番で出力される。
元々の画像は出力されず常に変形されたものが出力される。
画像の総数より小さいバッチサイズを指定するとすべての画像を使い切るまで同じ画像をもととしたものは現れない。
macOSの画面を左右2分割で表示する

macOS自体に左右2分割で表示する機能がありますが、ウィンドウが全画面になってしまうのでちょっと使いづらい。
`osascript`を使うと、ウィンドウの位置とサイズをコマンドラインから設定できるみたいなので、これを使ってみることにした。

```sh:align
#!/bin/sh

app=$1
align=$2

case $align in
  left )
    osascript \
      -e "tell application \"${app}\"" \
      -e 'set bounds of front window to {0, 23, 839, 1040}' \
      -e 'end tell'
    break
    ;;
  right )
    osascript \
      -e "tell application \"${app}\"" \
      -e 'set bounds of front window to {840, 23, 1680, 1040}' \
      -e 'end tell'
    break
    ;;
  * )
    echo "第2引数に left または right を入力してください" 1>&2
    ;;
esac
```

上記のスクリプトをパスの通った場所に置いて、

```sh
align Preview left
align Firefox right
```

とやると、こんな感じになる。

<img width="640" alt="スクリーンショット 2019-01-15 22.12.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/26038/69f65a21-9ec5-d2db-bf24-eb6ff10b1624.png">


参考: https://dev.classmethod.jp/smartphone/iphone/mac-app-resize/
Augurのマーケット内訳(2019-01-15)と、Veilのローンチ

予測市場のプラットフォームである[Augur(オーガー)](https://www.augur.net/)の、2019-01-15現在のマーケットの内訳です。
カテゴリ名を元に分類し、そのカテゴリに含まれるマーケット数を合計しました。


# マーケットの内訳(mainnet)

メインネット上には現在364個のマーケットがあります。

PRE_REPORTING(売買受付中)のマーケットの内訳は、
暗号通貨関連(crypt currency)：96(-184)
スポーツ(sports)：75(-28)
政治(politics)：76(-28)
経済(finance)：18(-48)
その他(other)：147
でした。

- 年をまたいだためか、各マーケットが大きく減少しました。

![20190115-augur-market-count.png](https://qiita-image-store.s3.amazonaws.com/0/142577/d5af70ea-1e24-df4b-6474-05351d09ec29.png)



# Veilがメインネットにローンチ

Veilが2019-01-15(現地時間)にメインネットにローンチされます。
(日本時間の15日午後10時現在ではまだ「You’re early!」で未公開状態でした)
Veilは、Augurを土台として動く予測市場のプラットフォームで、Augurと0xプロトコルを組み合わせたものです。
Veilにより、高速で安価な取引や、改良されたユーザインタフェースを使うことができます。
ただし、米国や、キューバや北朝鮮などの国では利用できません。
1月15日のローンチ時には、仮想通貨関連、イーサリアムの価格、Grinコイン(MimbleWimbleを実装したコイン)、アカデミー賞の4種類のマーケットのみが使用できるとの事です。

# 関連リンク

- [Announcing our seed round led by Paradigm and upcoming Mainnet launch on January 15, 2019](https://medium.com/veil-blog/introducing-veil-649036f9d492)
CloudFormationとかCDKとかよくわからないので調べたメモ

## 背景
久々にAWSのプロジェクトにアサインされた。インフラ周りはCloudFormationが使われている。CloudFormationのテンプレートはjson/yamlで定義されていると思っていたが、TypeScriptでインフラコードが管理されていたりしてあれ？ってなる。さらに、デプロイは、cdkコマンドっていう聞いたことのないやつとか出てきて混乱したので調べた。

## CloudFormationとは？
AWSのインフラリソースをプロビジョニングするためのサービス。Stackという箱を作成後、テンプレートというyamlかjsonでリソースを定義したファイル作成し指定すると、定義通りのリソースが立ち上がる。

- [公式doc](https://aws.amazon.com/jp/cloudformation/)
- [tutorial]
(https://docs.aws.amazon.com/ja_jp/AWSCloudFormation/latest/UserGuide/GettingStarted.html
)

以上を踏まえると、json/yamlでリソース管理されるはず、、だが、実際はTypeScriptで管理されている。どうやら、AWSにはCDKというコードでリソース管理を行うツールが提供されて模様。

## CDKとは？
Cloud Development Kitの略で、AWSのインフラ管理をコードベースでできるようにするための開発ツール。CDKを使うとTypeScrypt/JS/Java/C#でリソース管理できてうれしい。

CDKのクライアントも提供されていて、インストールして、ターミナルで`cdk deploy xxStack`とか叩くとデプロイできたり、`cdk diff` とかするとworkspace上のリソースとのdiffが取れたりする。

`cdk deploy`は、コードからテンプレートファイルを作成してそのリソースをCloudFormation経由で作成してたりするっぽい。

- [公式doc](https://awslabs.github.io/aws-cdk/)
- [tutorial](https://awslabs.github.io/aws-cdk/tutorial.html)
  - tutorialがわかりやすい
  - cdk.Appクラスを拡張していく
Gulp4　入門サンプルソースコード

Gulpの使い方がよくわからない私のような人にサンプルソースコードを提供します。

## Install
```bash
$ yarn add -D glup
$ npx gulp -v
```

## Gulp3から4になったせいで...
若干書き方が変わり、[ドットインストールのGulp入門](https://dotinstall.com/lessons/basic_gulp)などの書き方ではできなくなってきています。

具体的に変わった場所は、
gulp3は非常にシンプルで[]配列のような指定でよかった場所も4ではgulp.seriesの関数が必要となりました。

また、順次処理を行うには引数にdoneとdone()が必要で
並列処理を行うにはgulp.parallelが必要となりました。

## サンプルソースコード

```js
const gulp = require('gulp');

// htmlファイルのコピー
gulp.task('html', (done) => {
    gulp.src('./src/*.html')
    .pipe(gulp.dest('./dist'));
    done()
});
// 1秒スリープ
gulp.task('sleep', (done) => {
    setTimeout(() => {
        console.log('sleep 1000ms');
        done()
      }, 1000);
});
// ENDメッセージ
gulp.task('msg', (done) => {
    console.log('Gulp END!');
    done()
});

gulp.task('default',
    gulp.series( 
        // 順次実行
        // 'html', 'sleep', 'msg'
        // 並列実行
        gulp.parallel('html', 'sleep', 'msg'),
    )
);
```
JSのスコープについての現在の見解

##簡単な例でスコープを理解

```scope.js
const x = 3;
function f(){
   console.log(x); //3
   console.log(y); // y is not defined (error)
}
f();
const y = 5;
```

x　:　関数を呼ぶ出す前に存在している　→関数にも使える
y　:　関数を呼び出した後に存在している　→　定義前に呼び出された関数には使えない

**スコープ : 変数を参照できる範囲**

##グローバルスコープ
グローバルスコープは全てのプログラム内で使用可能になる！！！
グローバルスコープで定義された変数をグローバル変数と呼ぶ！

**しかし！**

グローバル変数を濫用しすぎると、かなり困るから注意。。。

```.js
let name = "makoto";
let age = 19;

function greet(){
   console.log(`こんにちは、${name}`); //makoto
}

function ageVerification(){
   console.log(`私の年齢は、${age}です`); //19
}
```

トップに```let name / let age```を定義することで、それ以下に記述している関数に影響してくる（プログラム中のどこで定義された関数でもname/ageの値を変更できてしまう）

それは避けたいので、オブジェクトを使用して改善していく

```改善.js
let user = {
   name : "makoto",
   age : 19
};

function greet(user){
   console.log(`こんにちは、${user.name}`) //makoto
}

function ageVerification(user){
   console.log(`私の年齢は、${user.age}です`); //19
}

greet(user); //makoto
```

このように記述することで、よく使われる```name```などの識別子をなどもグローバル変数にせずに使用することができる。

グローバル変数：name/age → user

##ブロックスコープ

```.js
{ //ブロックスコープ開始
const x = 5;
console.log(x); //5
} //ブロックスコープ終了
console.log(x); //x is not defined
```
ブロックで囲むことで、ブロック内で定義した変数の値はブロック内でしか効力がない

###クロージャー
独立した変数を参照する関数

```.js
let f;
{ //ブロックスコープ
   let o = {name : "makoto", age : 19};
   f = function(){ //スコープ内で関数を定義すると関数がスコープを保持する（スコープ内を参照する覗き窓）
      console.log(o.name); //makoto
      return o;
   }
}  //ブロックスコープ
let oRef = f(); //oオブジェクトを参照する変数を定義
console.log(oRef);{name:"makoto"}
oRef.name = "keigo";　//関数（のぞき窓）越しにスコープ内の値を変更！
console.log(oRef);{name:"keigo"}
```
通常は外部からスコープにアクセスできないが、関数を定義することで覗き窓を作ることができる！

###関数の巻き上げ

```関数宣言.js
f(); // "呼び出せた！"
function f(){
console.log("呼び出せた！")
}
```
関数宣言の場合、関数より先に関数の呼び出しを記述していても、関数の巻き上げで呼び出すことができる！


```変数に代入された関数式.js
f(); // f is not defined
let f = function(){
console.log("呼び出せた！")
}
```
変数に代入すると、巻き上げは効かなくなる

###TDZ(temporal dead zone)<varとletの違い>

```var.js
console.log(x); //undefind
var x = 5;
console.log(x); //5
```

```let.js
console.log(x); //x is not defined
let x = 5;
console.log(x); //
```
**つまり**、```var```は宣言した瞬間にプログラム全体で存在していることになる
なので、```undefined```と表示された

```let``` は、定義されたそれ以降から存在することになるのでこのような結果になる。（letで宣言された変数は宣言されるまで存在しない）
Vueとbulmaでサイドメニューを作る

# 仕様:
SideMenu.vueというファイル名で定義する。

見た目はこの形：

![image.png](https://qiita-image-store.s3.amazonaws.com/0/30677/db769d6a-85a1-5882-c7e2-ca64551dbe8d.png)


また、各メニューリンクを押すと色が変わる。

# 準備

注意:vue-cliで作成したプロジェクトでの仕様を前提とする

必要npmをインストール。

```
$ npm install bulma
$ npm install font-awesome

```

# サイドメニューの実装

vueファイル(SideMenu.vue)。コード内のmenu-listがメニューの主要クラスで、この中にliで要素を定義するとそれぞれがメニューの項目になる。

また、changeActiveLinkメソッドをクリック時に発動させることで、各メニュー項目が押されたらそれに対して`is-active'`を設定することでアクティブ時の色に変更する。

```vue:SideMenu.vue
<template>
  <aside class="column is-2 is-narrow-mobile is-fullheight section is-hidden-mobile has-background-dark">
    <p class="menu-label is-hidden-touch has-text-white">Navigation</p>
    <ul class="menu-list">
      <li>
        <a href="#" :class="{ 'is-active': activeNum == 0 }" @click="changeActiveLink(0)">
          <span class="icon"><i class="fa fa-home"></i></span> Home
        </a>
      </li>
      <li>
        <a href="#" :class="{ 'is-active': activeNum == 1 }" @click="changeActiveLink(1)">
          <span class="icon"><i class="fa fa-book"></i></span> Other
        </a>
        <ul>
          <li>
            <a href="#" :class="{ 'is-active': activeNum == 10 }" @click="changeActiveLink(10)">
              <span class="icon is-small"><i class="fa fa-link"></i></span> Twitter
            </a>
          </li>
          <li>
            <a href="#" :class="{ 'is-active': activeNum == 11 }" @click="changeActiveLink(11)">
              <span class="icon is-small"><i class="fa fa-link"></i></span> Qiita
            </a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#" :class="{ 'is-active': activeNum == 13 }" @click="changeActiveLink(13)">
          <span class="icon"><i class="fa fa-info"></i></span> About
        </a>
      </li>
    </ul>
  </aside>
</template>

<script>
export default {
  data () {
    return {
      activeNum: 0
    }
  },
  methods: {
    changeActiveLink (n) {
      this.activeNum = n
    }
  }
}
</script>
````

こちらのサイドバーを以下App.js内で参照する。
route-view部分はメインコンテンツですが、本題ではないので任意の要素に置き換えて大丈夫です。

```vue:App.vue
<template>
  <div id="app">
    <div class="main-content columns is-fullheight">
      <side-menu/>
      <div class="container column is-10">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script>
import SideMenu from '@/components/SideMenu'

export default {
  name: 'app',
  components: {
    SideMenu
  }
}
</script>

<style lang="sass">

// サイドメニューの色設定
$menu-item-active-background-color: hsl(171, 100%, 41%);
$menu-item-color: hsl(0, 0%, 100%);

@import '~bulma';
$fa-font-path: '~font-awesome/fonts/';
@import '~font-awesome/scss/font-awesome';

</style>
```

本質的な部分だけコード化するために、マジックナンバーが入っていたりとリファクタリングすべき部分が残っているので、適宜読みやすいよう修正をお願いします。

# 参考

menuデザインの参考元:
[Bulma sidebar](https://codepen.io/andreich1980/pen/OmobJQ)
ksnctf 26 Sherlock Holmes 70pt

#問題

https://ksnctf.sweetduet.info/problem/26

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/f0ebbdf2-880e-ae1d-e7fa-8e8268677a43.png)

#解いてみた

シャーロックホームズ？

リンクをクリックしてみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/33988657-0c35-8652-8ea1-aaa4b935d9d1.png)

「A SCANDAL IN BOHEMIA I」をクリックしてみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/9790589a-7b21-4b66-4116-11ce61faa9c5.png)

すごい英語です。
全然意味が分かりませんが、Google翻訳で読むとワトソンとか出てくるのでシャーロックホームズの物語っぽいです。
2,3も見てみましたが、同じような感じでした。
もちろん会話の中にはFLAGは出てこないようです。Google翻訳を信じます。

URLいじる系の問題でしょうか。
最初に

```
http://ctfq.sweetduet.info:10080/~q26/index.pl
```

にアクセスしていたので

```
http://ctfq.sweetduet.info:10080/~q26/
```

にアクセスしてみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/78c96c6c-1b94-d369-f009-1696e72d8f15.png)

flag.txtありましたー。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/d5ac3083-d0a1-cbae-d8f2-ce6bddc14677.png)

アクセスできません。権限がないようです。
「A SCANDAL IN BOHEMIA I」をクリックしても同じ画面になりました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/72bc7617-dde6-b5e9-be24-c9e6a2ea89f0.png)

さっき英語たくさんが見れたときのURLは

```
http://ctfq.sweetduet.info:10080/~q26/index.pl/a_scandal_in_bohemia_1.txt
```

でした。どうやらindex.plの中でファイルを読み込む処理があって、それ経由じゃないとファイルへのアクセス権限がないようです。
それであれば

```
http://ctfq.sweetduet.info:10080/~q26/index.pl/flag.txt
```

にアクセスしたらいけそうです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/dcb1c569-4d0a-bf8f-a695-a5f6d9246508.png)

いけませんでした。
「ソース見てみたらどうですか？」とのこと。
HTML見る限り特に不審な点はありませんでした。
plの中身が見たいですがどうやって？

確か8946にPHPだったかplだったかでURLの最後に「|ls」やったらコマンドが実行される問題があった気がするのでやってみる。

```
http://ctfq.sweetduet.info:10080/~q26/index.pl/|ls
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/c38ad6c4-e805-fdbb-57ef-66c6b77dbb0d.png)

すごい。lsが実行されています。
ということは「|cat flag.txt」やればいいのかな？

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/e319c8a2-9773-12ee-f892-638ac539ea42.png)

さっきのやつが出ただけでした。flag.txtにはこれしか書かれてないようです。
「|cat index.pl」やってみます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/f24eb244-46fe-f3a7-8c77-3fcec4d4b443.png)

できました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/9b6000ff-e576-22d5-698f-12271462092f.png)
Linuxで同一値で埋められたバイナリファイルを作成する

####0で埋められたバイナリファイルを作成する
>head -c 1024 /dev/zero > data

####ある値で埋められたバイナリファイルを作成する
シェルはバイナリを手軽に扱えるようなコマンドが不足しているため、現状なやり方は見つかっていない。
>echo a > data
>vim -b data
>>:%!xxd "バイナリ編集可能にするvimのコマンド

埋めたい値に編集する。
２バイト出ないとうまく行かないため、２バイト分同一の値にする。

>>*%!xxd -r "バイナリ編集を戻すvimのコマンド
:w

>yes \`cat data\` | tr -d "\n" | head -c 1024 /dev/zero > data

追記：
もっと良いやり方を紹介いただいたので追記します。

```sh:0xFFで埋まったバイナリファイルを作成する。
head -c 32 /dev/zero | tr \0 \377 ; echo
```
Ruby で特定の桁数の0と1の組み合わせの配列を得る

シンプルだけど書こうとしたら意外と苦戦したので備忘録。

桁数を n とすると、下記のように書けばよいです。

``` ruby
def zero_or_one_arr(n)
  [*0..(2 ** n - 1)].map {|m| m.to_s(2).rjust(n, '0').chars.map(&:to_i) }
end
```

引数 n は0以上の整数を想定していますが、負の整数に対しても空配列を返します。

``` ruby:irb
def zero_or_one_arr(n)
  [*0..(2 ** n - 1)].map {|m| m.to_s(2).rjust(n, '0').chars.map(&:to_i) }
end
# => :zero_or_one_arr

zero_or_one_arr(-1)
# => []
```

たとえば引数を4とすると、返り値はこんな感じ。

``` ruby:irb
zero_or_one_arr(4)
# => [[0, 0, 0, 0], [0, 0, 0, 1], [0, 0, 1, 0], [0, 0, 1, 1], [0, 1, 0, 0], [0, 1, 0, 1], [0, 1, 1, 0], [0, 1, 1, 1], [1, 0, 0, 0], [1, 0, 0, 1], [1, 0, 1, 0], [1, 0, 1, 1], [1, 1, 0, 0], [1, 1, 0, 1], [1, 1, 1, 0], [1, 1, 1, 1]]
```

---
ちなみに動機としては、[AtCoder Beginner Contest 080 の C 問題](https://atcoder.jp/contests/abc080/tasks/abc080_c)を Ruby で解こうとしたことです。
愚直に解こうとすると、10桁の0と1の組み合わせの配列が必要になりました。
flatpickr を適用した mobile 側の input time で second(秒) の入力が消えない

# tl;dr

`step="60"` で回避したらいいんやで。

```
<input type="time" step="60">
```

# 事象

flatpickr version: 4.5.2

flatpickr 最強じゃんイエーイからの、スマホで time 入力しようとしたら `enableSeconds: false` を何度コンフィグしても、秒（もはやミリ秒まで）も入力させられる。そもそも `enableSeconds` はデフォルトで `false` なのに。

# 原因

ソースみたら `setupMobile()` 内で `self.mobileInput.step = self.input.getAttribute("step") || "any";` してて全く `enableSeconds` なんか一切見てない。 `step` 設定してないと無理やり `any` られるってのがわかる。

```
      function setupMobile() {
        var inputType = self.config.enableTime ? self.config.noCalendar ? "time" : "datetime-local" : "date";
        self.mobileInput = createElement("input", self.input.className + " flatpickr-mobile");
        self.mobileInput.step = self.input.getAttribute("step") || "any";
```

# 解決

`self.input.getAttribute("step")` って書いてるので、 input に `step` を好きなように追加してやりゃおｋ。 input time の step は秒単位らしいから、分だけでいいなら `step="60"` しとく。

```
<input type="time" step="60">
```
HashのキーをNaNにすると何が起きるか

どうでもいいことだが気になったので試してみた。

```ruby:ruby2.6.0
hash1 = (1..5).each_with_object({}) { |i,hash| hash[0.0/0.0] = i }
#=> {NaN=>1, NaN=>2, NaN=>3, NaN=>4, NaN=>5}
hash1[0.0/0.0] #=> nil

nan = 0.0/0.0
hash2 = (1..5).each_with_object({}) { |i,hash| hash[nan] = i }
#=> {NaN=>5}
hash2[nan] #=> 5
```

同一のオブジェクトでない限りはキーが別物と扱われる（当然キーを指定して値を取り出せない）。

---

ふと気になったのは「[Hashのキーの同一性判定に `#eql?` が使われる](https://docs.ruby-lang.org/ja/latest/method/Object/i/eql=3f.html)」という話から。浮動小数点数の非数（Not a Number; NaN）は自身と比較して偽になるので、この理屈ではHashのキーにすると全て別物と判断されてしまうはず。実際、最初の例はそのような結果になった。

しかしもう少し試してみたら、２番目の例のように同一のオブジェクトを使ったら同じキーと判断された。 `#eql?` の前に `#equal?` 相当の処理を挟んでいる？

ちなみに `#eql?` を内部で使っているメソッドとして `Array#uniq` などもあり、やはり非数だとHashのキーと同じような同一性判定に見える。

---

参考までに、QiitaにおいてRubyの非数を扱っている記事を少々。

* [`Float::NAN` についての重箱の隅](/Nabetani/items/942abe870ee000607368)
* [x == x が false になることはあるか](/scivola/items/e1bab285b9266d8a5b71)
TextFormFieldのvalidatorが動作しない

超初歩的な内容かと思いますが、ハマったので記録しておきます。
変な先入観は注意ですね。:cry:

# 問題

下記コードで、validatorに設定した関数が呼び出されない。

```dart
import 'package:flutter/material.dart';

class HogeState extends State<Hoge> {
  
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Form(
          key: _formKey,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextFormField(
                keyboardType: TextInputType.number,
                validator: (value) {
                  print("onValid");// ここが動作しない
                },
              ),
              RaisedButton(
                onPressed: () {
                  print("onPressed");
                },
                child: Text('Button'),
              )
            ],
          ),
        )
    );
  }
}
```

# 解決方法

ボタンのonPressed内でvalidateを呼び出す必要があった。
または、TextFormFieldのautovalidate引数をtrueに設定する。

```
onPressed: () {
  if (_formKey.currentState.validate()) {
    _formKey.currentState.save();// TextFormFieldのonSavedが呼び出される
  }
}
```

# 参考

公式サイトにしっかり書いてあります。

https://flutter.io/docs/cookbook/forms/validation
ksnctf 25 Reserved 30pt

#問題

https://ksnctf.sweetduet.info/problem/25

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/ebab4cb0-857c-129e-b0c7-b27e4ee23b70.png)

#解いてみた

暗号化された文章を複合する問題かなと思ってたらところどころ読める単語がある。
lengthとかprintとか。
途中長めの単語が出てきたのでそこらへんの文字で検索してみると、Perlっぽいことがわかった。

Ideone.comにそのまま文字列をコピペして実行してみる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/435ca6fa-dba7-9851-db7a-1461e945ea34.png)

全部1行でこんなの初めて見ました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/17681/333e5313-cbb5-a109-6d40-bba327cbfa35.png)
WebSocketの使い道

最近のUIはWeb越し。しかし、HTMLやJavaScript周りの仕様は、大体が、ユーザが何かをクリックしたらどうこうという、従来のマウス・タッチUIを前提にしています。

一方、端末側のパワーが非力なので（端末にパワーを持たせるとシステムが高価になる）、センサーのデータをサーバで処理したい。そして、サーバ側の処理結果に応じて、UIを制御したい。そこでは、ユーザがクリックやタッチするイベントはありません。

現状のHTML/JavaScriptによるUIを使いながら、サーバ側からの制御を可能にするにはどうするか？　asyncio の aiohttp の WebSocketがこの用途に使えます。

以下、クライアントラズパイで、ブラウザとPythonプロセスを動かし、サーバ側のPythonで両者と通信し、サーバの処理に応じて、ブラウザにUI指示を送り、クライアントPythonに UI 以外（センサーなど）の指示を送る、ようなプログラムのスケルトンです。

サーバ

```py
import asyncio
import aiohttp.web
...

async def browser_handler(request):
    browser_websocket = aiohttp.web.WebSocketResponse()
    await browser_websocket.prepare(request)
　　# await send_str()でDOM制御指示 ...
    return browser_websocket

async def client_handler(request):
    clientpy_websocket = aiohttp.web.WebSocketResponse()
    await clientpy_websocket.prepare(request)
    # await send_str()やawait receive_str()で、
    # クライアントのデータやセンサー制御指示のやり取り...
    return clientpy_websocket

if __name__ == '__main__':
    loop = asyncio.get_event_loop()
    app = aiohttp.web.Application(loop=loop)
    app.router.add_route('GET', '/ws/b', browser_handler)
    app.router.add_route('GET', '/ws/c', client_handler)
    aiohttp.web.run_app(app, host=HOST, port=PORT)

```

クライアントPython

```py
import asyncio
import aiohttp
...
async def client():
    session = aiohttp.ClientSession()
    async with session.ws_connect('http://HOST:PORT/ws/c') as ws:
        # await send_str()したりawait receive_str()したりして,
        # サーバから指示を受け、クライアントラズパイにつけたセンサーを
        # 操作したり、別ポートでデータストリームをUPD送信するように設定
　　　　# したりする処理...

if __name__ == '__main__':
    try:
        loop = asyncio.get_event_loop()
        loop.run_until_complete(client())
    finally:
        loop.close()
 
```
クライアントブラウザ

```html
<!DOCTYPE html>
<html><head>
</head>
<body>
    <script>
        var ws = new WebSocket('http://HOST:PORT/ws/b');
        ws.onmessage = function(e) {
             // サーバからの指示に応じてDOM操作
        };
    ...
```
CNNのモデル可視化手法"Grad-CAM"のまとめ

# Gradient weighted Class Activation Mapping

初投稿です. お作法に問題があればご指摘いただけると助かります.

## この記事の概要

Grad-CAMの論文を読んだので内容のまとめを記します.
この記事は就活で企業からの課題として書いている側面もあるため論文説明以外の個人的感想などが入る箇所もあります.
論文のみを目的とした閲覧の場合, ご注意ください.

## 論文の概要

### Grad-CAMとは

ざっくり言うと, CNNがクラス分類した判断根拠を可視化できる手法です.

### 可視化のメリット

1. 透明性の高く保ってモデルの構築ができる
2. 一見して納得のいかない判断を下した場合もその根拠を知ることができる

特に透明性については今後のAIの発展にも以下の面で役に立つとしている
1. AIがなぜ失敗したのかがわかり研究の方向性に見当をつけられる.(AIがまだ学習しきれていない時期)
2. AIを使うユーザへ信頼を確立することができる.(AIが人間同等の性能を誇る時期)
3. 機械側が人間により良い決定の方法を教えることに役立つ.(AIが人間より強い時期)

### 今までの可視化手法とどう違う?

そもそも、良い視覚化とは何かと考えたときに以下の2点がある

- クラス識別的
- 高解像度

クラス識別的と言うのは、どのクラスだとCNNが判断しているかはっきりしていること.
高解像度はそのままピクセル単位でどのピクセルがクラス識別に役立っているかわかること.

今までに出てきた視覚化手法であるGuided Back propagationやDeconvolutionは高解像度だけどクラス識別的ではない.
Grad-CAMはクラス識別的であり上記手法と組み合わせることでどちらも高い精度で実現できるとしている

### 手法

Grad-CAMの算出は以下の式で行えます. シンプルですね！

```math
a^c_k = \frac{1}{Z}\sum_i\sum_j\frac{\partial y^c}{\partial A^k_{ij}}　\quad \quad \quad \ (1) \\
L^c_{Grad-CAM} = ReLU(\sum_k a^c_kA^k) \quad (2)
```

$c$_: 可視化対象クラス_
$k$_: フィルター数_
$y^c$_: 全結合層の最終出力でありsoftmax関数を適用する前の値_
$A_{ij}^k$_: k番目のフィルタ_

簡単な説明をします.
まず(1)について. 
$\frac{\partial y^c}{\partial A^k_{ij}}$は$y^c$に対して, フィルター$k$内の各重みによる勾配を求めています. $y^c$は全結合層の出力でsoftmax関数へ入れる前の値なので, この勾配が大きいということは, より出力値へ影響を与えることを指しています.
それらを$\frac{1}{Z}\sum_i\sum_j$にてフィルターごとに平均化しています. これで, どのフィルターがより出力へ影響を与えるのかの数値化ができました.
 
(2)では, 先ほど数値化したフィルター$k$の重要度$a^c_k$とフィルターkの出力$A^k$の乗算を行ない, 出てきた値を全て足し合わせます. 出力はフィルター$k$の高さと幅になっていることに注意してください.
最後にマイナスの値を0で統一するために$ReLU$関数へ入れて出来上がりです. マイナスで出てきた場所は他のクラスの検出に役立っているため, $ReLU$がないと可視化が見にくくなってしまいます. 

これでヒートマップを得ることができます.

余談なのですがtensorflowの実装では, たまに, $y^c$についてはc以外の場所を0として平均をとったり, grad = tf.gradient()で勾配を取った後$\frac{grad}{\sqrt{average(grad^2) + 1e-5}}$という計算を挟んだりしている実装があるのですが, これはなぜなのでしょうか？
わかる方いましたら教えて欲しいです！

### どれくらいの精度なのか

Guided Back propagation, c-MWPとVGG-16を使って可視化比較してみたけど一番いい結果になったと言っている.
(c-MWPは初めて聞いたのでどんなのなのかわからない....)


## ここがすごいGrad-CAM

何が1番すごいかと言われればやはり、CNNの判断根拠を可視化できることじゃないでしょうか.
他にも色々な可視化手法はありますが, 僕が初めて見た可視化手法はGrad-CAMだったので, この時の衝撃は大きかったです。
一般的にブラックボックスだと言われており, 層が深くなればなるほど解析が難しいニューラルネットを見ただけで解釈できる技術の有用性は計り知れないと思います.　

次にモデル式のスマートさにも驚かされました. 基本的に「勾配をとってそれを重要度とする」ところがキモだと思っています. 勾配が大きいと言うことは, 少し動かすだけでその関数の出力値に大きく影響し, それは確かに重要なフィルタと言えそうですが, 自分で考えつけるかと言われたら難しそうです.

最後にもう1つ, すごいと面白いが混ざったようなことなのですが, 視覚化により信頼性の高いCNNがどちらかがわかったそうです.
どう言うことかと言うと, 論文の著者らは, AlexNetとVGG-16の両方をGuided Back propagationとGuided Grad-CAM(Guided Back propagationとGrad-CAMの融合)で視覚化する実験を行いました. VGG-16はAlexNetよりも信頼性が高いとされています. 結果として, 人はVGG-16に視覚化を適用した方がより綺麗に視覚化できていると判断するそうです. さらにGuide Back propagationよりもGuided Grad-CAMの方がその視覚化の差異がはっきり出る結果となったそうです. 予測性能が高い方が重要部分をはっきり識別できているのだろうと予想はつくことなのですが, 実際にそうだったと言うことがわかった例としてすごさと面白さを感じました.

## 参考文献

[1]: Ramprasaath R. Selvaraju, Michael Cogswell, Abhishek Das, Ramakrishna Vedantam, Devi Parikh, Dhruv Batra, Grad-CAM: Visual Explanations from Deep Networks via Gradient-based Localization, 2017, https://arxiv.org/abs/1610.02391
wordpressのhttps化のレイアウト崩れでハマったとき

# https化でのトラブル

## 事象

1. AWSのELBを使ってhttps化するが、レイアウト崩れが治らない
2. 管理画面ログインすると、レイアウトはきれい

## やったこと

https化については、他の記事を参考にhttps化。
Search Regexなどで一通りの置換は完了。
しかし、レイアウトが崩れる。
キャッシュ削除のPluginを使ってもだめ

## 解決方法1

nginx のキャッシュを削除を試みる

### nginxのログファイルを見てみる

```
nginx -t
```
これで設定ファイルのパスがわかるので

```
tail /var/log/nginx/error.log
```
すると、理由がわからないが、キャッシュファイルの削除でエラーが起きている

```
cd /var/cache/nginx
rm -fr proxy_cache
```
キャッシュを削除し、念の為再起動

```
nginx -s reload
```

サイトを確認したらレイアウト崩れが直った。

# 新たな問題

リダイレクトしまくってエラー表示

## 解決法 2

そもそも引き継ぎサーバーだっただめ、nginxとapacheの違いを理解していなかったため。
nginxはnginx.confを編集しなければならない。

https://aws.amazon.com/jp/premiumsupport/knowledge-center/redirect-http-https-elb/

こちらでnginx.confに書き写してあげればOkだった。
Javascriptのバーコードライブラリ

# 概要
ここには、Javascriptで動作するバーコードのライブラリについて記載します。

# 主なライブラリ
## JOB
- GitHub
 - https://github.com/EddieLa/JOB
- ライセンス
 - MIT
- 動作確認手順
 - https://qiita.com/k-murayama/items/048fc557c112537a6b83

## WebCodeCamJQuery
- GitHub
 - https://github.com/andrastoth/WebCodeCamJS
- ライセンス
 - MIT
- Included decoders
 - barcode decoder (DecoderWorker.js) ※JOBを内包しています。
 - qr-decoder (qrcodelib.js)

## Quagga.js
- GitHub
 - https://github.com/serratus/quaggaJS
- ライセンス
 - MIT

# 対応規格
| 規格                    | JOB | WebCodeCamJQuery | Quagga.js |
|-----------------:|:------------------:|:------------------:|:------------------:|
| Code128                    |  ○  |   |  ○  |
|  Code93                    |  ○  |   |  ○  |
|  Code39                    |  ○  |   |  ○  |
| Standard/Industrial 2 of 5 |  ○  |   |  ○  |
|         Interleaved 2 of 5 |  ○  |   |  ○  |
| Codabar                    |  ○  |   |  ○  |
| EAN-8                      |     |   |  ○  |
| EAN-13                     |  ○  |   |  ○  |
| Upc-A                      |     |   |  ○  |
| Upc-C                      |     |   |  ○  |
※WebCodeCamJQueryについては、対応規格に関する記載が見当たりませんでした。
ファイルAPIを使った画像ファイルの取得とプレビューについてメモ

# 概要
railsアプリケーション上で画像ファイルをドラッグ＆ドロップする際、ドロップする先をファイルの投稿フォームではなく別のオブジェクトにドロップし取得。
取得した画像ファイルをフォームへ渡してプレビューを表示した。

# 環境
Rails5.1
jquery3.3.1
mysql

# データの取得
※inputボタンを大きくしてそこにドロップするならこの部分は飛ばしてOK
（参考記事はどっか行きました…）

```image_upload.js
// ドロップされる側のオブジェクトのidを'drop'とする

 var target = document.getElementById('drop');
  if (target) {

// ドラッグオーバー時の処理。
    target.addEventListener('dragover', function (e) {
      e.preventDefault();
      e.stopPropagation();
      e.dataTransfer.dropEffect = 'copy';
    });

  // ドロップ時の処理。データをフォームに渡す。
    target.addEventListener('drop', function (e) {
      e.stopPropagation();
      e.preventDefault();
      document.getElementById('ファイルをもたせるフォームのid').files = e.dataTransfer.files;
    });
  }
```
- `addEventListener`

>addEventListener() は関数または EventListener を実装したオブジェクトを、呼び出される EventTarget における指定されたイベント種別のイベントリスナーのリストに加えることで動作します。

この辺がよくわかってないところなのですが、どうやら指定したリスナーをEventTarget上に登録して、それを呼び出している、、、

らしい。

今回の場合はdragoverとdragをtergetに登録して、イベント時に中の記述を呼び出しているってことでいいのかなと思います(自己解決)。
<br>

- `dataTransfer`でドラッグされているデータの保持

- `getElementById`は該当するidが見つからない場合if文に処理を入れてあげないと、他のページでエラーが出て死にます。

- `e.preventDefault();`と`e.stopPropagation();`は画像がやってきたときのブラウザの動作を止めてるので、消すと画像ファイルをブラウザが全力で表示しちゃいます。

ちなみに下記の部分で画像をフォームに渡してあげてます。

```
document.getElementById('ファイルをもたせるフォームのid').files = e.dataTransfer.files;
```

# プレビュー
さて、画像をフォームに渡せたらその内容をプレビューします。

```image_upload.js
// 先程ファイルをもたせたフォームのクラス:form_class
// プレビュー画像の追加先クラス:upload_list

  $('.form_class').on('change',function(e) {
    for(var i = 0; i < this.files.length; i++){
      const reader = new FileReader();
      reader.onload = function (e) {
        var html = `<img alt='画像' src='${e.target.result}'>`
    ('.upload_list').append(html);
      }
      reader.readAsDataURL(this.files[i]);
    }
  });
```
- for文に入れているのは複数画像をもたせた時に複数を一度にプレビュー処理をします。
（この場合、前提としてformにmultipleとか設定してないといけないのですがそれはまた別のお話）

- `onload`でファイルの読み込み完了時に発火
- `readAsDataURL`でFileを読み込み`result`にdata：URLを返しています。

# まとめ
あんなにヤキモキしたのにたったこれだけ。

何かお気づきの点やらご指摘等ありましたら、ご教授いただけますと幸いです。
初学者なのでお手柔らかにお願いいたしますです…

# 参考
[File - MDN - Mozilla　](https://developer.mozilla.org/ja/docs/Web/API/FileReader)
（ここ読めばたいていそれぞれの説明はちゃんと書いてありますが実際どう使うか悩みます）
##### その他参考にした記事
http://honey8823.hateblo.jp/entry/2018/08/29/125121
http://koheik.hatenablog.com/entry/2016/07/08/152936
https://qiita.com/kon_yu/items/f98df7ac826e7c36cc6c