OmniAICreator/Qiita-1.07M huggingface dataset:
SafeAreaの外側までViewを表示する

# はじめに
iPhoneXが発表されてから約１年、SafeAreaについて標準のUIKitを使っていれば、特にiPhoneXについて深く意識することはありませんでした。今回、大きめの画像をSafeAreaの外側まで表示したいことがあって、どのように実現すれば良いかを色々試してみた結果を書いてみました。

# やりたいこと
画像をiPhoneXのSafeAreaの外、特に上部に表示する。下部はSafeArea内が理想。
今回の記事では、UIImageViewの代わりにUIViewがSafeAreaの外まで表示できることを目標とします。

# 環境
Mac OSX 10.14
Xcode10
iOS12
Storyboard

# 実現方法
1. コードによる実装
2. Storyboardの設定
3. NSLayoutConstraintの設定

# コードから
参考
https://qiita.com/lovee/items/21131fb441a1a86b45e3
https://stackoverflow.com/questions/46192280/detect-if-the-device-is-iphone-x/47067296

UIView.safeAreaInsetsを確認し、コードで調整する方法。またはNSLayoutConstraintをサブクラス化してデバイス毎にTop Marginを調整する方法。

```swift:TopExtendableConstraint.swift
import UIKit

class TopExtendableConstraint: NSLayoutConstraint {

    override var constant: CGFloat {
        set {
             super.constant = newValue
        }
        get {
            return -1 * (UIApplication.shared.delegate?.window??.safeAreaInsets.top ?? 0)
        }
    }    
    
    class var hasTopNotch: Bool {
        if #available(iOS 11.0, tvOS 11.0, *) {
            // with notch: 44.0 on iPhone X, XS, XS Max, XR.
            // without notch: 20.0 on iPhone 8 on iOS 12+.
            return UIApplication.shared.delegate?.window??.safeAreaInsets.top ?? 0 > 24
        }
        return false
    }
    
}
```

サブクラス化したこのクラスをStoroyboard上もしくはコード上で指定すれば、今回のやりたいことが実現できました。しかし、若干面倒な方法だなと感じました。

# Storyboardの設定を使う方法
参考：https://qiita.com/akatsuki174/items/407158d0d19c60d0020a
Storyboard設定の「Use Safe Area Layout Guidesのチェックボックスを外す」か
それぞれのViewの「Safe Area Layout Guideのチェックボックスを外す」で対応が可能
この方法だと、SafeAreaのTopとBottomの両方の外側に配置されました。今回はSafeAreaのTopのみ外に出したかったので、この方法では実現ができませんでした。

# NSLayoutConstraintの設定を使う方法
今回、TopのみだけSafeAreaの外に配置したかったので、別な方法が必要でした。１つ目のコードによる対応の他にStoryboard上でできるかを調べてみたところ、以下の方法がありました。

![スクリーンショット 2018-12-24 14.36.16.png](https://qiita-image-store.s3.amazonaws.com/0/297014/4f0cea4f-ab5b-a13e-d0cd-2a8567977057.png)

TopのConstraintに対して、First ItemもしくはSecond Itemの中で、対象が`Superview`か`SafeArea`の選択項目がありました。SafeAreaが選択されていたのでSuperviewに変えたところ、iPhoneXでSafeAreaの外まで配置されました。
今回はこの方法を使用しております。

# 終わりに
できるだけシンプルな方法で実現することができました。
iOSアプリ開発の知見はありますが、書くことに対してはあまり経験がないので、足らない部分がありましたらご指摘いただけると幸いです。

# 参考
https://ja.wikipedia.org/wiki/IPhone_X
https://qiita.com/roba4coding/items/5a0794cf7cd13c82b2b5
https://qiita.com/lovee/items/21131fb441a1a86b45e3
https://qiita.com/akatsuki174/items/407158d0d19c60d0020a
https://stackoverflow.com/questions/46192280/detect-if-the-device-is-iphone-x/47067296
Active Book Dialogを実施してみて＆次回へのカイゼン

# はじめに

この記事は、[Active Book Dialog(ABD)](http://www.abd-abd.com/)という読書手法を実際にやってみて、その進め方やカイゼンをふりかえったものです。
ABDの実施結果については特に述べませんのでご注意ください。

# Active Book Dialog(ABD)とは

「未来型読書手法」というように謳われています。
1冊の本を複数人で分担して読み、その本のサマリを短時間で高密度に知ることができる手法です。
詳細は[公式ページ](http://www.abd-abd.com/)をご参照ください。

# 今回の会の概要

- 部内育成の一環として
- 参加者は若手層9名が主体。育成担当の管理者層2名、今回のテーマの有識者2名を含む計13名
- 2時間で実施
- 対象は社内の「API設計ガイドライン（約130ページ）」

# 進め方

私自身、ABDに参加するのもファシリテートするのも初めてです。
今回の参加者のうち2名は、事前に何度かABDを経験していたので、フォローをしてもらいつつ進めました。

今回はマニュアルに出来るだけ沿って進めてみて、すでに経験している2名の進め方との差分をとる、という目的もあります。

## 事前準備

以下の道具を準備します。

- B5用紙 6枚 * 人数分
    - 今回は100枚程度用意
    - A4用紙しか会社になかったので、B5サイズに裁断
- ペン（Pentel SignPen 黒）* 人数分
- セロハンテープ
- ガムテープ
- ABDマニュアル
    - [こちらから入手できます](http://www.abd-abd.com/#6)
- ABD対象の印刷物 * 2部
- ハサミ

## チェックイン (20分)

何のために集まってもらったのか、今日は何をするのか、ABDの進め方を説明します。
ここで、13名のメンバーそれぞれに各10p程度の分量でABD対象を渡します。

## コ・サマライズ（30分）

それぞれに分配されたABD対象を、B5サイズの紙6枚にまとめます。
まとめ方は以下のとおり。

- B5サイズ6枚まで
- 1枚の紙につき、6行まで
- 1行あたり10文字程度。大きく書く

書き終わったら、左から順番に並べます。

![20190130_コ・サマライズ_全体像.JPG](https://qiita-image-store.s3.amazonaws.com/0/221788/352cfa0e-449b-6210-2983-74a2dcd00523.jpeg)
写真：コ・サマライズ結果を全部並べた様子

## 休憩（10分）

## リレープレゼン（40分）

1人につき2分で発表していきます。
1分ごとに発表者に告知し、2分になるようにまとめてもらいます。
今回、多少伸びた人もいましたが、全体で見ると大きな延長もなく進めることができました。

![20190130_リレープレゼン.JPG](https://qiita-image-store.s3.amazonaws.com/0/221788/0273a321-416d-fbba-d2cf-ef0bb1d9941e.jpeg)
写真：リレープレゼンの様子

![20190130_ハイタッチ.JPG](https://qiita-image-store.s3.amazonaws.com/0/221788/b2b8c624-36f8-c371-d3bd-84681a223c12.jpeg)
写真：次の人に交代するときはハイタッチ

そのあとは全員でコ・サマライズ結果を眺め、不明点があればレ点をつけてもらいます。（失敗１：後述）

## ダイアログ（20分）

レ点がついているところに関してダイアログをして深めていきます。
前半に疑問がある人、後半に疑問がある人でグループ分けをしようと思ったのですが、前半に希望者が集中したため、13人でダイアログをすることにしました。（失敗２：後述）

レ点のある場所について疑問と「こうじゃないか？」といった対話を続け、不明点を３つほど解消して終了です。

# 改善点とわかったこと

**失敗１について**

そもそも黒ペンしか用意していなかったので、どれがレ点なのか非常に見づらい。ペンはProckeyのような複数色のものを数セット用意しておくべきでした。

**失敗２について**

今回、ダイアログを1グループにしてしまいましたが、1グループ13人だと発言しない人が出てきます。発言・対話を繰り返すことで本への理解を深めていく効果もあると思われますので、同じ議題だとしても、強制的に4-5名のグループに分けてダイアログすべきでしょう。

**わかったこと**

「レ点をつけてあとでダイアログする」という流れには、やってみた結果、レ点である必要性を感じませんでした。何か意図があっての行為かと思っていたのですが、これは付箋等でコメントを残したほうがダイアログにもうまくつなげられそうです。

コ・サマライズに関して、A4サイズの紙でやるか、B5サイズの紙でやるかの効果の違いは感じることができました。A4だと書きすぎてしまう人が出てくる。また、B5は「大きく文字を書いて、余白がストレスにならない」適度な大きさです。コ・サマライズ結果を並べるときにも、場所をあまりとらずにすみます。これは人数やテーマによらず、B5サイズの紙を用意したほうが今後もよいと感じました。

また、今回コ・サマライズをする際に、「ハサミでABD対象から切り取って貼り付けても可」という行為を許容しましたが、これはアンチパターンでした。リレープレゼンしているときに見ても細かすぎて見えませんし、全体を俯瞰しているときにも頭に入ってきません。表や図が多い本だとしても、その表や図を自分なりにサマリして書き写してもらったほうがよいでしょう。

# 今後のABD実施

今回、意図的に守破離の「守」を意識し、なぜこういう構成になっているのかを考察しながら行っていきました。その結果、手法の意図や狙いが理解できたように思います。自分たちなりの手法を生み出すことをABDでも推奨していますので、今回の実施結果をベースに、いろんなやり方を少しずつ取り入れてみて、自分たちなりの最高のABDを作れるようにしていきたいと思います。
Salesforce CLIコマンド（デプロイ用）

[mdapiコマンド リファレンス](https://developer.salesforce.com/docs/atlas.en-us.sfdx_cli_reference.meta/sfdx_cli_reference/cli_reference_force_mdapi.htm#cli_reference_force_mdapi)

従来のAntに代わり、Salesforce CLIを使って package.xmlベースのデプロイを行うことが可能。

####ログイン
コマンドを実行するとブラウザが開くので、IDとパスワードで対象組織にログインする。

```
sfdx force:auth:web:login -r loginurl -d -a aliasname
 -d この組織をデフォルトの Dev Hub とする （省略可）
 -r ログイン先のURL（省略すると login.salesforce.com）
 -a エイリアスを指定

コマンド例：

//通常のsandboxにログインする
sfdx force:auth:web:login -r https://test.salesforce.com -a sand1
```

#### 変更セット（package）を指定して、メタデータを取得する
Salesforce上で作成した送信変更セット名を指定してメタデータを取得する。コマンドを実行すると、指定フォルダにzip圧縮されたメタデータファイルがダウンロードされる。

```
sfdx force:mdapi:retrieve -r folderpath -u username -p packagename 
  -r ダウンロードしたファイルを配置するフォルダパス
  -u 接続先のユーザー名 （事前にforce:auth:web:loginを使ってこのユーザー名でログインしておくこと）。-uの指定がない場合はデフォルトの組織に接続する
  -p 変更セットの名前
  -a 取得するAPIバージョンを指定

コマンド例：
sfdx force:mdapi:retrieve -r ./dev-0XX_1 -u tigerdragon@sample.com -p CHANGESET1
```

#### package.xmlを指定して、メタデータを取得する
package.xmlを直接指定してメタデータを取得する。コマンドを実行すると、指定フォルダにzip圧縮されたメタデータファイルがダウンロードされる。

```
sfdx force:mdapi:retrieve -r folderpath -u username -k packagefilepath 
  -r ダウンロードしたファイルを配置するフォルダパス
  -u 接続先のユーザー名 （事前にforce:auth:web:loginを使ってこのユーザー名でログインしておくこと）。-uの指定がない場合はデフォルトの組織に接続する
  -k package.xmlファイルのパス
  -a 取得するAPIバージョンを指定

コマンド例：
sfdx force:mdapi:retrieve -r ./dev-0121_2 -u tigerdragon@sample.com -k ./dev-0121_2/package.xml
```

####メタデータをデプロイする

```
sfdx force:mdapi:deploy -d folderpath -u username -w -1
  -r メタデータを配置したフォルダのパス
  -u デプロイ先組織のユーザー名 （事前にforce:auth:web:loginを使ってこのユーザー名でログインしておくこと）。-uの指定がない場合はデフォルトの組織に接続する
  -w コマンドが終了するまでの待ち時間 -1 は完了まで待つことを示す
  -c リリース検証のみ

コマンド例：
sfdx force:mdapi:deploy -d ./dev-0125_1/unpackaged -u tigerdragon@sample.com -w -1
```

package.xmlとメタデータを配置したフォルダ
<img width="312" alt="Screen Shot 2019-01-30 at 22.11.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/161463/857ceaf8-3e59-c85b-8127-e5afd23c281e.png">
node-forgeで秘密鍵と証明書からAzureに登録できるPKCS12形式に変換する(未完)

node-forgeの例を見てもよくわからず、コードを切り貼りしていたらうまく動いたので、そのコードを張り付ける。

確認したバージョンはNode: 10.15.0、node-forge 0.7.6です。
https://gist.github.com/fukasawah/ff65cddb7a52a2bba6f14ccc9d0d4639

以下の4つを引数に与えて使います。

- （署名チェインされた）証明書
- 秘密鍵（PEM形式）
- パスフレーズが書かれたファイル（テキスト）
- 出力先（PFX）

引数チェックもしてない雑な実装ですが、変換の流れが分かればまぁ良いでしょう、ということで。

以下、こだわりポイントです。

- AzureのKey-Vaultに対して登録が行える
- パスフレーズをかける

以下、出来てない部分です。
ただ、これでも変換したものがSSL証明書として動くことは確認していて、秘密鍵部分はパスフレーズがかかっているので良いかなと。でも出来れば直したい。

- 証明書の部分(?)は暗号化できていない模様
    - opensslで変換を行ったものと比べると、`PKCS7 Encrypted data: pbeWithSHA1And40BitRC2-CBC, Iteration 2048`となっていた部分が`PKCS7 Data`となってしまい、バイナリからも読める文字がちらほら見える
    - `const p7=forge.pkcs7.createEnvelopedData()`のあと`p7.encrypt()`とすれば出来そうな雰囲気はあったけど、そこからPFXに変換するための流れがわからなかった。

あとnode-forgeの型情報が壊れているのか、補完は出ないけど使えるメソッドがたくさんあった。難しい。


「それopensslコマンドなら2,3回で」という話なんですが、nodeで出来れば**LetsEncryptを使った証明書の取得からAzure Key-Vaultへの格納までをAzure Function上で全て出来て便利そう**というところからです。ちなみに見切り発車で行っていて後で調べたら、[このまんまの事を行うC#実装がある](https://github.com/shibayan/azure-keyvault-letsencrypt)。コードの内容も多くなくて最悪メンテしていけそうな雰囲気だし試してみたい。
VScodeのインストール手順@Windows10 

Windows10にVScodeをインストールする手順を記載

https://azure.microsoft.com/ja-jp/products/visual-studio-code/ 
上記のサイトから
<img width="1272" alt="スクリーンショット 2019-01-30 20.53.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/265300/921b8e15-8867-a851-2db1-5dea68312f61.png">


Windows用のインストールファイルをダウンロード
<img width="863" alt="スクリーンショット 2019-01-30 20.51.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/265300/932b1cfa-0312-489e-458e-b6f0d8b03aea.png">

VSCodeUserSetup-xxxx-x.xx.x.exeのインストールファイルを起動
<img width="368" alt="image.png" src="https://qiita-image-store.s3.amazonaws.com/0/265300/2cd9a485-166c-a268-e56f-72ae3325a951.png">

[次へ]をクリック
<img width="368" alt="image.png" src="https://qiita-image-store.s3.amazonaws.com/0/265300/2c036e33-14e8-6f6d-ff01-ed38dd88df70.png">

インストール先のフォルダを指定して
[次へ]をクリック
<img width="368" alt="image.png" src="https://qiita-image-store.s3.amazonaws.com/0/265300/3359462c-e047-2393-cde0-ae37f997c4b0.png">

プログラムアイコンを作成するフォルダを指定して
[次へ]をクリック
<img width="368" alt="image.png" src="https://qiita-image-store.s3.amazonaws.com/0/265300/a653d124-9ea6-9eb3-cdc2-37ca2d5d5fc1.png">

インストール時のオプションを選択して
[次へ]をクリック
<img width="368" alt="image.png" src="https://qiita-image-store.s3.amazonaws.com/0/265300/f72b5634-6eca-9fed-1d10-bfcfa95807e5.png">

インストール時の設定が問題なければ
[インストール]をクリック
<img width="368" alt="image.png" src="https://qiita-image-store.s3.amazonaws.com/0/265300/1ebdc928-8fd5-4139-9bbb-4ef8931e17ce.png">
<img width="368" alt="image.png" src="https://qiita-image-store.s3.amazonaws.com/0/265300/6f80f6d6-08b2-3a3d-d284-cad6d83c173a.png">

インストール完了
<img width="368" alt="image.png" src="https://qiita-image-store.s3.amazonaws.com/0/265300/f038d76b-04f5-ef92-7d56-3c161196197e.png">
procs：新しいプロセス表示・検索ツール

# はじめに
Linuxのプロセス表示といえば`ps`コマンドです。これはUNIX的にパイプで繋いだりスクリプトに組み込んだりするには使いやすいのですが、単体で使うにはちょっといまいちな部分があります。
例えば

- 出力が色付けされない
- 値がいわゆるhuman readable（GとかMとか単位が自動でつくやつ）でない
- ターミナルの端で折り返す
- 検索しづらい

といったところです。
これらを解決するために、新しくプロセスの表示と検索を行うツールを作りました。

実装言語はRustで、対象プラットフォームは今のところLinuxのみです。

# リポジトリ

https://github.com/dalance/procs

# インストール

[Releases](https://github.com/dalance/procs/releases)から最新のバイナリをダウンロードしてPATHの通ったところに置いてください。
Rustをインストール済みの方は以下でもOKです。

```console
cargo install procs
```

# 使い方

デフォルトの出力は以下のようになります。

![procs.png](https://qiita-image-store.s3.amazonaws.com/0/84296/130c3461-d5f4-edd5-b59d-05f976c22fec.png)

まず、カラム毎に色分けされます。バイト数は自動で適切な単位になり、単位毎にも色分けされます。
%表示も同様に閾値毎に色分けされます。

デフォルトでは右端カラムはコマンドになりますが、長すぎる場合はターミナルの幅で切られます。
また、`ps`コマンドで取得できないTCP/UDPの待ち受けポートやディスクIO（Read/Write）も表示されます。

次に検索機能です。procsは引数に検索キーワードを取ることができます。
例えば、検索キーワードを`zsh`とした場合が以下です。

![procs_zsh.png](https://qiita-image-store.s3.amazonaws.com/0/84296/be2e77d6-c077-c5dd-8e25-957a915b5560.png)

指定された引数は、数値とそれ以外で挙動が違い、デフォルトでは数値は`PID`と`TCP`、`UDP`に、数値以外は`USER`と`Command`にマッチします。
また、数値は完全一致、それ以外は部分一致がデフォルトです。

数値で検索した場合は以下のようになります。

![procs_port.png](https://qiita-image-store.s3.amazonaws.com/0/84296/b25f998d-cd94-b037-46a5-cdaa85cc789d.png)

指定した6000/60000/60001/16723に関連するプロセスだけが出力されています。

これらにより、ユーザ名やバイナリ名で検索したい場合はかなり多めにマッチしますし、
逆に`PID`やポート番号などがはっきりわかっている場合はそのプロセスだけピンポイントにマッチします。

# カスタマイズ
デフォルトの挙動を変えたい場合は、`~/.procs.toml`に設定します。

```console
$ procs --config
```

でデフォルト設定に対応するTOMLが出力されるので、そこから変更するのが楽です。

ファイルを抜粋すると以下のようになっています。

```.procs.toml
[[columns]]
kind = "Pid"
style = "BrightYellow"
numeric_search = true
nonnumeric_search = false

[[columns]]
kind = "Username"
style = "BrightGreen"
numeric_search = false
nonnumeric_search = true

...

[style]
header = "BrightWhite"
unit = "BrightWhite"

[style.by_percentage]
color_000 = "BrightBlue"
color_025 = "BrightGreen"
color_050 = "BrightYellow"
color_075 = "BrightRed"
color_100 = "BrightRed"

[style.by_state]
color_d = "BrightRed"
color_r = "BrightGreen"
color_s = "BrightBlue"
color_t = "BrightCyan"
color_z = "BrightMagenta"
color_x = "BrightWhite"

[style.by_unit]
color_k = "BrightBlue"
color_m = "BrightGreen"
color_g = "BrightYellow"
color_t = "BrightRed"
color_p = "BrightRed"
color_x = "BrightBlue"

[search]
numeric_search = "Exact"
nonnumeric_search = "Partial"
```

`[[columns]]`に表示したいカラムを列挙します。
一番上に書いたものが一番左に表示されます。
`kind`はそのままカラムの種類で`style`がカラムの色分けです。
（種類と色分けの完全なリストは[README](https://github.com/dalance/procs#kind-list)にあります）
`numeric_search`と`nonnumeric_search`はそれぞれ数値検索と非数値検索にマッチするかどうかの設定です。

`style`には表示内容によって色を変えられるものもあり、

- `ByPercentage`
- `ByState`
- `ByUnit`

が該当します。
例えば`ByUnit`はバイト数表示などK,M,Gのような単位が自動でつく場合に単位毎に色分けします。
各単位に対応する色は`[style.by_unit]`で設定します。

`[style]`はヘッダ部の色設定、`[search]`は検索の完全一致か部分一致を数値検索、非数値検索それぞれで設定できます。

# おわりに

新しく作ったプロセス表示・検索ツールprocsの紹介でした。
とりあえず自分が必要な情報だけそろえた感じなので、
追加してほしいカラムなどありましたらIssueまでどうぞ。
Oracleで特定スキーマの全データをコピー

#用途
Oracleで特定スキーマのデータだけをコピーしたい場合に使用。
本番機から開発機へのデータコピー用です。

素直にExport/Importなど、システム管理者用のコマンドを使う方がおすすめです。
ですが、アプリケーションエンジニアだとシステム権限を持ってなくて
できいという方も多いと思うので、そういった方には使えます。


``` SQL
DECLARE
   x_schema_name   VARCHAR2(40) := 'targetSchema';
   x_db_link_name  VARCHAR2(40) := 'sourceDB';
BEGIN
  FOR rec IN(
    SELECT A.OWNER, A.TABLE_NAME FROM ALL_TABLES A
    WHERE A.OWNER IN(x_schema_name)
    ORDER BY A.OWNER , A.TABLE_NAME
  ) LOOP
   BEGIN
     EXECUTE IMMEDIATE 'TRUNCATE TABLE ' || rec.OWNER || '.' || rec.TABLE_NAME; 
     EXECUTE IMMEDIATE 'INSERT /*+ APPEND */  INTO ' || rec.OWNER || '.' || rec.TABLE_NAME || ' SELECT * FROM ' || rec.OWNER || '.' || rec.TABLE_NAME || '@' || x_db_link_name; 
     COMMIT;
   EXCEPTION
     WHEN OTHERS THEN
       DBMS_OUTPUT.PUT_LINE(rec.OWNER || '.' || rec.TABLE_NAME);
   END;
 END LOOP;
END;
```
Windows10で『コマンドウィンドウをここで開く』を復活する

Windows10のエクスプローラー上で、任意のフォルダーを **Shift+右クリック** したときに、`コマンドウィンドウをここで開く` メニューを表示させる方法です。
※ver.1803(April 2018 Update) , ver.1903(May 2019 Update) および ver.1909(Nov 2019 Update)で動作することを確認しています。

※ (2019/08/29追記) 何かの拍子（Windows Updateしたとき？）にレジストリ設定が一部消えてしまい、メニューが出なくなってしまいましたが、再度レジストリ設定を行うことで無事復活しました。

やることはレジストリに以下のキーを書き込むだけです。 **★レジストリ書き込みは自己責任で★**

.regファイルはちょっと特殊な(?)Encoding（UTF-16 with BOM / CRLF）なので、regeditで適当なキーをエクスポートし、そのファイルをVSCodeなどのちゃんとしたエディターで開き、以下を上書きするのが安全です。

```
Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Classes\Directory\Background\shell\cmd]
@="@shell32.dll,-8506"
"Extended"=""
"ShowBasedOnVelocityId"=dword:00639bc8
"NoWorkingDirectory"=""
"HideBasedOnVelocityId"=dword:0

[HKEY_CURRENT_USER\Software\Classes\Directory\Background\shell\cmd\command]
@="cmd.exe /s /k pushd \"%V\""

[HKEY_CURRENT_USER\Software\Classes\Directory\shell\cmd]
@="@shell32.dll,-8506"
"Extended"=""
"ShowBasedOnVelocityId"=dword:00639bc8
"NoWorkingDirectory"=""
"HideBasedOnVelocityId"=dword:0

[HKEY_CURRENT_USER\Software\Classes\Directory\shell\cmd\command]
@="cmd.exe /s /k pushd \"%V\""
```

ShowBasedOnVelocityId/HideBasedOnVelocityId の値だけを書き込めばいいと書かれているサイトもありましたが、私の環境では必要な項目を全部書き込まないとダメでした。

----
#参考

[［Shift］＋右クリックメニューに「コマンドウィンドウをここで開く」を復活させる方法：Tech TIPS - ＠IT](http://www.atmarkit.co.jp/ait/articles/1709/15/news025.html)
[Windows10／Shift＋右クリックで「コマンドウィンドウをここで開く」を復活させる - IMUZA.com](https://www.imuza.com/entry/2018/01/10/151452)
[React Native] Stateに配列を入れる時には…

個人的に超ドはまりしたので。

```
export default class HomeScreen extends React.Component {
  constructor(props) {
     super(props);
     this.state = {
       coords: null
     }
  }

  getData(xx=0,yy=0) {
    axios
      .get('http://geoapi.heartrails.com/api/json?method=searchByGeoLocation',{params:{x:xx,y:yy}},{ headers: { 'Content-Type': 'application/json' ,'Accept': 'application/json'}})
      .then((results) => {
        this.setState({rec:results.data.response.location});
        console.log(JSON.stringify(results.data));//確認用
        }).catch(() => {
        console.log('通信に失敗しました。');
      });
  }
```

としてaxiosを用いてJSONを取得しその結果の配列を受け取ろうとsetStateでstate入れて、後段の表示部分でthis.state.recとして受け取ってListなりなんなりで利用としたのですが「undefined is not an object」などと出てきまして。
色々ググったり、試行錯誤したり。。。
その結果

```
constructor(props) {
   super(props);
   this.state = {
     rec:[], //これが必要だった!!
     coords: null
   }
}
```

と、空の配列で初期化しないと。あちこちでこの注意書きは見ていたのですが…。一旦空で配列を初期化するということか、配列として宣言するという役割を果たすのか、そのどちらかはわかませんが、これで目的を達することができました。

初歩的なことかとは思いますが、同じようなことで困っている方がググってここに辿り着かれその方のお役に立てることを祈念して、本記事をポストさせて頂きます。
gnuplotでヒートマップと箱ひげ図

何回やっても忘れるのでメモ

## ヒートマップ
ヒートマップ（ヒートマップとは言っていない（`pm3d`））

```
# 出力先は1280x720pxのpngファイル
set terminal pngcairo size 1280,720
# 出力ファイルを指定
set output '/path/to/output.png'

# 軸ラベル
set xlabel 'x axis'
set ylabel 'y axis'
set zlabel 'z axis'

# 範囲指定
set xrange [0:100]
set yrange [0:1000]
set zrange [0:1000]

# 見えないところを処理しない
set hidden3d
# 離散データを連続として扱う
set dgrid3d 100,100,10

# 3D色付きマップ
set pm3d map
# グリッドの左上を色にする（初期値は4つ角の平均）
set pm3d corners2color c1
# 色補間の分解能
set pm3d interpolate 5,5
# 上から見る
set view 0,0

# 色軸を白青赤黄に
set palette defined(0"#ffffff",1"#0000ff",2"#ff0000",3"#ffff00")

splot exp(-(x*x + y*y) / 2)
```

これで↓みたいなグラフが作れます。
![3dtest.png](https://qiita-image-store.s3.amazonaws.com/0/71557/c9384f16-87e7-90b2-0d7f-3f83be1a9596.png)

たぶん`z=0`のときの白で目盛りが消えてる気がする…？
あとY軸ラベルが右に表示されるのはなんなんだ

## 箱ひげ図
四分位図？boxplot？
を作ります。

```
# 出力先は1280x720pxのpngファイル
set terminal pngcairo size 1280,720
# 出力ファイルを指定
set output '/path/to/output.png'

# 軸ラベル
set xlabel 'x axis'
set ylabel 'y axis'

# 例外点を作らない
set style boxplot fraction 1

# using (x座標):データの列:(箱の幅(0のときデフォルト値)):データ区分の列
plot '/path/to/data.tsv' using (1.0):2:(0):1 with boxplot
```

これで↓みたいなグラフが作れます。
![boxplottest.png](https://qiita-image-store.s3.amazonaws.com/0/71557/c416100a-acb3-2397-868e-1ab70442936d.png)

（テストデータが適当過ぎた）
幅は`set boxwidth`で決められます。

## 参考文献
### `pm3d`
- http://www-ise2.ist.osaka-u.ac.jp/~shinkai/gnuplot/
- http://takeno.iee.niit.ac.jp/~foo/gp-jman/data/20111114/gnuplot-ja-div/node246.html

### `boxplot`
- https://jinen.exblog.jp/18419502/
- http://takeno.iee.niit.ac.jp/~foo/gp-jman/data/20121003/gnuplot-ja-div/node64.html
【HTML5】フロント経験ゼロのインフラエンジニアがフロントを勉強してみた①

# 目次
* はじめに
* HTMLの構造
  - 構成
  - バージョン指定 `<!DOCTYPE>`
  - ページ設定`<head>`
  - ページレイアウト`<dody>`
* 要素の種類
  - ブロック要素
  - インラインブロック要素
  - インライン要素
* 名前付け
  - `class`
* タグ
  - コメント `<!-- -->`
  - 見出し `<h1>～<h7>`
  - 段落 `<p>`
  - リンク `<a>`
    + 新規ウインドウで開く
  - 画像表示`<img>`
  - リスト`<ul>`
    + 箇条書き`<li>`
    + 連番`<ol>`
  - テキスト入力
    + 1行入力`<input>`
    + 複数行入力`<textarea>`
  - ボタン`<input type="submit">` 
* おわりに

---

# はじめに
普段はインフラエンジニアをやっています、
[やしうり](https://twitter.com/yashiuri01)と申します。
自分でWebアプリを作りたいと思いフロント系言語を学習中です。
今回は学習したHTML5の基礎について記載します。  

---
# HTMLの構造
[参考MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Element)

## 構成
```HTML
<!DOCTYPE html>
<html>
  <head>
    <!-- ページに関する情報 -->
  </head>
  <body>
    <!-- 実際に表示する内容 -->
  </body>
</html>
```

## バージョン指定
```HTML
<!-- HTML5の場合は以下のように記載 -->
<!--DOCTYPE html>
```

## ページ設定
```HTML
<head>
  <!-- 文字コード HTML5はUTF-8推奨 -->
  <meta charset="UTF-8">

  <!-- ページタイトル -->
  <title>タイトル</title>
  
  <!-- CSS等外部ファイルの読み込み -->
  <link rel="stylesheet" href="CSSファイルURL">
</head>

```

## ページレイアウト
```HTML
<body>
  <header>
    <!-- 導入部 -->
  </header>
  <main>
    <!-- 主要内容 -->
  </main>
  <footer>
    <!-- 著作権情報、リンク等 -->
  </footer>
</body>
```

---
# 要素の種類
## ブロック要素
* 以下は指定可能
  - width
  - height
  - margin
  - padding
* 配置
  - 縦並び
* 以下タグ等が該当
  - `<div>`
  - `<h1>-<h6>`
  - `<p>`
  - `<ul><li><ol>`

[参考(MDN)](https://developer.mozilla.org/ja/docs/Web/HTML/Block-level_elements)

## インラインブロック要素
* 以下は指定可能
  - width
  - height
  - margin
  - padding
* 配置
  - 縦並び

## インライン要素
* 文字系
* 以下が指定できない
  - width
  - height
  - margin-top
  - margin-bottom
  - padding-top
  - padding-bottom
* 配置
  - 横並び
* 以下タグ等が該当
  - `<span>`
  - `<a>`

[参考MDN](https://developer.mozilla.org/ja/docs/Web/HTML/Inline_elements)

---
# 名前付け
## class
```HTML
<p class="selected">HTML</p>

<!-- 複数クラスを指定するときは半角スペース-->
<div class="btn blue">HTML</div>
```

---
# タグ
## コメント
  ```HTML
  <!-- コメント -->
  ```

## 見出し
```HTML
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
```

## 段落
```HTML
<p>テキスト</p>
```

## リンク
### 新規ウインドウ
```HTML
<a href="リンクURL">テキスト</a>
```

## 画像表示
```HTML
<img src="画像URL">`
```

## リスト
### 箇条書き
```HTML
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>
```

### 連番
```HTML
<ul>
  <ol>HTML</ol>
  <ol>CSS</ol>
  <ol>JavaScript</ol>
</ul>
```

## テキスト入力
### 1行入力
```HTML
<input>
```

### 複数行入力
``` HTML
<textarea></textarea>
```

## ボタン
```HTML
<input type="submit" value="ボタンテキスト">
```
---

# おわりに
もっといい書き方があるよ等ございましたらご連絡頂けますと幸いです。
ここまでお読み頂きありがとうございました。
【Elasticsearch】よく使うコマンド一覧

#Elasticsearchコマンド一覧
よく使うコマンドをメモしておく。

##目次
1. Elasticsearch関連
2. インデックス関連
3. エイリアス関連
4. ドキュメントタイプ関連
5. ReIndexAPI
6. [Scroll API](https://qiita.com/mug-cup/private/5fbe8a4fd27a2f6492b1) ←2020年4月22日追記

##Elasticsearch関連
###起動/再起動
```
sudo /etc/init.d/elasticsearch start
```
```
sudo /etc/init.d/elasticsearch restart
```
###状態確認
```
curl -XGET 'localhost:9200/'
```
##インデックス関連
###一覧
```
curl -XGET 'localhost:9200/_cat/indices?v'
```
###設定確認
```
curl -XGET 'localhost:9200/{indexName}/_settings?pretty'
```
###マッピング確認
```
curl -XGET 'localhost:9200/{indexName}/_mapping?pretty'
```
###削除
```
curl -XDELETE 'localhost:9200/{indexName}?pretty'
```
##エイリアス関連
###エイリアス確認
```
curl -XGET 'localhost:9200/_aliases?pretty'
```

##ドキュメントタイプ関連
###件数確認
```
curl -sS -XGET 'localhost:9200/{indexName}/{typeName}/_count?pretty'
```
###フィールド定義追加
```
curl -XPUT 'localhost:9200/{indexName}/_mappings/{typeName}?pretty' -d '
{
  "properties" : {
    "field1" : {
      "type" : "long"
    },
    "field2" : {
      "type" : "date"
    }
  }
}'
```
###データ一括登録（ID指定なし）
```
curl -XPOST 'localhost:9200/{indexName}/{typeName}/_bulk?pretty' --data-binary @xxx.json
```
```JSON:xxx.json
{ "index" : {} }
{"name":"おにぎり","category":"食べ物"}
{ "index" : {} }
{"name":"車","category":"乗り物"}
```
###データ削除（全件）
```
curl -XPOST 'localhost:9200/{indexName}/{typeName}/_delete_by_query' --d '
{
  "query":{
    "match_all":{
    }
  }
}'
```
###データ更新（id指定）
```
curl -XPOST 'localhost:9200/{indexName}/{typeName}/{_id}/_update' --d '
{
  "doc": { "name": "Jane Doe", "age": 20 }
}'
```
###データ検索（無条件）
```
curl -sS -XGET 'localhost:9200/{indexName}/{typeName}/_search?pretty'
```
###データ検索（From-To指定）
```
curl -sS -XGET 'localhost:9200/{indexName}/{typeName}/_search?pretty' -d '
{
  "query":{
    "match_all":{
    }
  },
  "from":0,
  "size":400
}'
```
###データ更新（ID指定）
{typeName}の{_id}のnameを変更し、項目にexpirationを追加する場合

```
curl -XPOST 'localhost:9200/{indexName}/{typeName}/{_id}/_update' -d '
{
  "doc":{
    "name":"焼きおにぎり","category":"食べ物","expiration":"9999-12-31"
  }
}'
```

###データ一括更新
```
curl -XPOST 'localhost:9200/{indexName}/{typeName}/_update_by_query?conflicts=proceed&pretty' -d '
{
  "query":{
    "match_all": { }
  },
  "script":{
    "inline": "ctx._source.field1 = 'hogehoge'"
  }
}'
```


##ReIndexAPI
###再インデックス
```
curl -XPOST 'localhost:9200/_reindex?pretty' -d '
{
  "source": {
    "index": "fromIndex"
  },
  "dest": {
    "index": "toIndex"
  }
}'
```
###再インデックス（リモート）
※reindex.remote.whitelistへ登録の必要あり。（elasticsearch.yml）

```
curl -XPOST 'localhost:9200/_reindex?pretty' -d '
{
  "source": {
    "remote": {
      "host": "http://otherhost:9200",
      "username": "user",
      "password": "pass"
    },
    "index": "fromIndex"
    }
  },
  "dest": {
    "index": "toIndex"
  }
}
```

##Scroll API

[【Elasticsearch】ScrollAPIを使ってみた](https://qiita.com/mug-cup/private/5fbe8a4fd27a2f6492b1) ←2020年4月22日追記
緊急地震速報をTwitterAPIとIFTTTで取得する　Part1 #IFTTT登録編

# 緊急地震速報を自分で取得したい!
というのも配布されているソフトを自分のプログラムに組み込めないからだ!!
しかしpythonで作られたeew(緊急地震速報)のプログラムはあまりない
つまり...作ればいいんだ!!

が...気象庁の電文を取得するのはめんどくさいので...
__TwitterAPIからeewをツイートしてくださっている方のツイートとIFTTTを利用します!!__

__そう...あるものは使えばいいんだ!(適当)
とわかりにくい説明ですいません.
簡単な話eewがツイートされたら自分のサーバーにWebhooksでツイートのURLを送信(IFTTT,Flaskで受信)
そしてURLからツイートを取得(TwitterAPI)
からの通知です(今回はTkinterを使用)

## まずはIFTTTに登録する
[IFTTT](https://ifttt.com)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/351582/f63aa5c5-cc59-1fa4-daa4-079ac171d74f.png)
### アカウント作成 or ログイン
アカウントを持っていない方はSignUpから登録
アカウントを持っている方はログインしてAppletを作成します

### Appletの作成
![image.png](https://qiita-image-store.s3.amazonaws.com/0/351582/822bbfb4-45e6-f1ef-252a-c943c998332f.png)
右上の自分のアイコンをクリック->New Applet
![image.png](https://qiita-image-store.s3.amazonaws.com/0/351582/3b8c7b60-9bed-89a9-aa58-d40a66495af9.png)
この画面に来たらまずは [+this] をクリックしてください
今回はTwitterAPIを使うので、
　Twitterをクリック
 ->New tweet by a specific userをクリック
 ->Username to watchに今回データを取得させていただく
　TwitterアカウントのScreenName(例: @point1reiya)を入力するのですが...
今回は[@zishin3255](https://twitter.com/zishin3255)さんのデータをお借りします
っと脱線しましたがUsername to watchに[zishin3255]と入力します
　->Create Triggerをクリック
![image.png](https://qiita-image-store.s3.amazonaws.com/0/351582/8ca34054-5c3a-bb12-f8aa-ef92c87981cb.png)
すると画像のようになります!
次は..[+that]をクリックです
![image.png](https://qiita-image-store.s3.amazonaws.com/0/351582/eaa9295c-6aad-2baf-bd27-e84ebe1e3819.png)
そして今回はWebhooksを使いますのでWebhooksを検索するなどして探してクリックしてください
そして [Make a web request]をクリック
　->URLにまずは
[http://[自分のIP(または受信サーバーのアドレス):ポート/webhook/{{LinkToTweet}}]を入力してください
[Method]は今回はGETでいきます
[Content Type]はお好みで
[body]は空にしてください
![image.png](https://qiita-image-store.s3.amazonaws.com/0/351582/fa8cc66e-164b-1467-9519-af86a907b42f.png)
こんな感じの見た目になればOKです
[Create Action]をクリックしましょう
そして最後に[Finish]をクリック
お疲れ様です
ひとまずIFTTTの準備ができました!!

次回: [https://qiita.com/point1reiya/items/5dda0cf9373469504291](https://qiita.com/point1reiya/items/5dda0cf9373469504291)
herokuにデプロイしたらある日突然sh: 1: cross-env: not foundエラーが出て調べて出てくる対処方ではどうにもならなかった時の対処法

#今回の敵

```
sh: 1: cross-env: not found 
```
に苦しめられて結構調べても解決策がでてこなかった
スライムかと思ったらハーゴンでした

##経緯
おとといまで元気に動いてたHerokuちゃんが今日から突然デプロイ時のビルドに失敗するようになった
何もしてないのに壊れた（マジで）
直すのに結構時間がかかったので、同じような事があった時に備えて調査のやり方と動くようにする方法を記載しておく

##結論
package.jsonにこいつを追加すれば動く

```
    "engines": {
        "node": "10.15.0"
    }
```
version 10.15.1がリリースされたのが1/29の朝方なので、もしかしたらそれ関連で何かあるのかもしれない。
（1/30 19:30時点では情報見つけられず）

##調査方法
後に記載するがGoogle先生が教えてくれる方法では同じエラーが発生し続けた

なので調査のために試した事

ビルドが成功していた最新までコミットを戻し、空コミットしてプッシュ
→ビルド失敗（コードの問題の可能性低）

ローカルで```npm run production```実行
→問題なくビルドされる（ビルドのscriptsの問題の可能性低）

ファイルの権限設定をHeroku上と同じにしてローカルで```npm run production```実行
→問題なくビルドされる（権限の問題の可能性低）

```heroku run npm run production```実行
→問題なくビルドされる（この結果はかなり混乱したが、どうやらビルド処理の前後に問題がありそう）


以上の結果から、こちら側で変更したものには問題がなさそうなので
Herokuのactivityタブから見る事ができるビルドログを正常終了時と異常終了時でdiffをとる

正常終了時

```
       Resolving node version 10.x...
       Downloading and installing node 10.15.0...
       Using default npm version: 6.4.1
       
-----> Restoring cache
       - node_modules
```

異常終了時

```
       Resolving node version 10.x...
       Downloading and installing node 10.15.1...
       Using default npm version: 6.4.1
       
-----> Restoring cache
       Cached directories were not restored due to a change in version of node, npm, yarn or stack
       Module installation may take longer for this build
```

どうやらnodeのバージョンが違う事が問題を引き起こしているみたいだ
nodeのリリースノートを見ると、1/29の7時に10.15.1がリリースされている
という事で、以前のバージョンに戻せば動くのではとあたりをつけて調べ、ビルド時のnodeのバージョンを指定する方法が結論に書いてある方法となる

##備考
ローカルのnodeのバージョンを10.15.1に上げてもビルドに成功したのでHerokuの```heroku-buildpack-nodejs```の問題のような気もする


##余談

一応Google先生が教えてくれる対処法も記載しておく
###その１

package.jsonに書くこれを

```
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
```

こうする

```
"production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
```

###その2

node_modulesをrm -rfで消してから```npm install```

###その3

```npm install --save-dev cross-env```
してから
```npm install```
firebaseローカルサーバ起動時にfunctions: Cannot start emulator. Error: Cannot find module '@google-cloud/functions-emulator/src/config'と返された。


---
https://github.com/firebase/firebase-tools/issues/552
上記Githubのissueで報告されている事象が起き、
そしてそこで書かれている対策を実際に試して解消できたのでメモ書きとして残しておきます。

---
```terminal:ターミナル
yarn global add firebase-tools
```
でfirebase-toolsをいれてある状態です。

```terminal:ターミナル
firebase serve --only functions,hosting
```
を実行したところ

```terminal:ターミナル
functions: Cannot start emulator. Error: Cannot find module '@google-cloud/functions-emulator/src/config'
```
と返された。
emulatorが見つからないらしい。

調べていく中で冒頭のissueをみつけ、
以下のコマンドを実行。

```terminal:ターミナル
yarn global add @google-cloud/functions-emulator --ignore-engines
```
無事`firebase serve --only functions,hosting`が実行できました。

##　最後に
初心者&独学なので間違いなどあるかもしれません。
他にも方法がありましたら、コメントに残していただけると幸いです。
【カラーコード】プログラミング中に使えそうなDuckDuckGoの便利機能【ハッシュ】

# プログラミング中に使えそうなDuckDuckGoの便利機能
開発中にたまたま見つけた機能を紹介。
[Instant Answers](https://duck.co/ia)って言うらしい。

## Color Picker
色を調べるアレです。
![duckduckgo_color_picker.png](https://qiita-image-store.s3.amazonaws.com/0/349133/f8adad41-6556-6490-2889-420193c54c9e.png)

## Color Codes
カラーコードをRGBA or RGB<->Hexに相互変換してくれます。
![duckduckgo_color_codes.png](https://qiita-image-store.s3.amazonaws.com/0/349133/c9e9139b-34c5-96e2-fe1e-2303d6d92b4b.png)
![duckduckgo_color_codes2.png](https://qiita-image-store.s3.amazonaws.com/0/349133/2fe11620-a837-4f29-265c-2594e7aeb0b9.png)

## ハッシュ(SHA512など)
ハッシュ関数の種類の後に算出したい文字列を入れるとハッシュが計算できます。
MD5・SHA1・SHA512・SHA256など色々対応している模様。
![duckduckgo_hash.png](https://qiita-image-store.s3.amazonaws.com/0/349133/a4731e42-1293-d0cf-a7b1-c6be95a21bf5.png)

## リンク
- [DuckDuckGo](https://duckduckgo.com/)
Atomで拡張子とシンタックスを関連付けする

atomでrubyファイルを開くとrailsのsyntax colorとなっていたのだが、ある日突然単純なrubyのsyntax colorに変わってしまった。

原因がわからなかったが、`.atom/config.cson`のcustomFileTypesを追記すれば強制的に拡張子との紐付けができた。

```js:.atom/config.cson
"*":
  core:
    customFileTypes:
      'source.ruby.rails': [ //syntax
        'rb'//拡張子名
      ]
```

syntaxの調べ方はSettings -> Packages にて`ruby on rails`のように調べたい言語で検索する
![image.png](https://qiita-image-store.s3.amazonaws.com/0/123603/f1261cdb-a1f4-27c6-d15b-3bbf661cff19.png)

Settingsに入り、Scopeの部分で確認できる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/123603/9cabfcd6-c0f4-6c2d-749f-1671005577e5.png)


参考サイト

[ATOM Basic Customization]
(https://flight-manual.atom.io/using-atom/sections/basic-customization/#finding-a-languages-scope-name)

[ATOM Editor で拡張子に言語を関連付ける](https://qiita.com/spiegel-im-spiegel/items/bbd8269588af251213d9)
matplotlibでx軸がlogスケールのヒストグラムを描く [ほぼ自分用メモ]

```python:plot.py
import numpy as np
import seaborn as sns
import matplotlib.pyplot as plt

# prepare data
r1=np.random.rand(100) * 1e3
r2=np.random.rand(100) * 1e6
df=np.r_[r1,r2]

# plot
ax=plt.figure(figsize=(5,5)).add_subplot(111)
ax.hist(x=df, bins=np.logspace(0, 10, 50), color='dodgerblue', alpha=0.75)
ax.set_xscale('log')
ax.set_xlabel('score')
ax.set_ylabel('num')
plt.savefig('plot_out.pdf')

```

# 出来上がりの図がこちら
![plot_out_2.png](https://qiita-image-store.s3.amazonaws.com/0/341384/071998d8-5ab0-215c-e707-39636c06c496.png)

# メモ
python3.6で実行可能を確認。

`bins=np.logspace(0, 10, 50)` は
`bins=10**np.linspace(0, 10, 50)` と同じ。

`bins=np.logspace(0, 10, 50)` は 、10^0から10^10までを50個のbinに分ける。
ディレクトリごとに異なるバージョンのnodeを使いたいのでavnを使った話

## 概要

nodeのバージョン管理に[tj/n](https://github.com/tj/n)を使っていました。  
これ自体はとても便利なバージョンマネージャーなのですが、実務で使っているうちにある問題に直面しました。

それは、複数の、異なるバージョンのnodeプロセスを起動しなければいけない状況です。

理想的にはnodeのバージョンは揃えて、きちんと開発できる環境を整える運用を続けたほうがよいのですが、そのような幸せな環境にいる方は稀だと思います。

今回は、タイトルにもある通りディレクトリごとに異なるバージョンのnodeプロセスを立ち上げることができる[avn](https://github.com/wbyoung/avn)の紹介です。

[tj/nに関しての記事](https://qiita.com/jigen098/items/6a4ff0bc3a480dd8bb58)も書いているので知らない方はご覧ください。

## インストール

nodeのバージョン管理に  
tj/nを使っている場合、

`$ npm install -g avn avn-n`

nvmを使っている場合は、

`$ npm install -g avn avn-nvm`

nodebrewの場合、

`$ npm install -g avn avn-nodebrew` です。

いずれかが終わったら、 `$ avn setup` を行い、ターミナルを再起動します。

### 追記

ちなみになんですが、 `$ yarn global add avn avn-n` のようにyarnを使ったインストールは正常に成功しませんでした。

検証に使ったyarn, nodeのバージョンはそれぞれ yarn: 1.13.0, node: v10.15.0 です。

あと、今関わっているプロジェクトで少し使ってみたんですが、 `.node-version` ファイルが存在するディレクトリでどうにもうまく `$ npm install` や `$ yarn install` が成功せず、結局uninstallしてしまいました。使えない、と言ってしまうには確認が足りないのでなんとも言えないと言うのが事実ですが、ちょっと期待した動作をしてくれなかったので残念でした。

## 使い方

nodeプロセスを実行するディレクトリに、 `.node-version` ファイルを作成し、 `v6.11.4` のように[セマンティックバージョニング](https://semver.org/) に従ったバージョンを指定するだけです。

正しくavnが動作していれば、`.node-version` ファイルが存在するフォルダに入ると `avn activated v6.11.3 (avn-n 6.11.3)` とシェルに表示されると思います。
アプリをクラッシュさせないサーバとの付き合い方

# はじめに
AndroidやiOSでネイティブアプリを作る際、何らかのサーバとAPIで通信することがほとんどだと思います。
ただ、APIのデータをうまくハンドリングしないと、
クラッシュしたり、変な動作する不安定なアプリと言われてしまいます。
今回は、今まで遭遇したクラッシュ/不正動作をまとめて、クラッシュしないような対策を紹介していきます。

# 遭遇したエラーから得た教訓
 - サーバエラー/パースエラーの場合の処理は必ず書く
 - 「〇〇の値は必ずサーバにあるよ」は信じない
 - int=0,boolean=falseに意味を持たせない

## サーバエラー/パースエラーの場合の処理は必ず書く
### クラッシュ
 - リクエストのパラメータで削除済みのリソースを取得しようとして404を返してきてクラッシュ
 - アプリ起動時にユーザーデータ取得の際にサーバの障害で500を返してきてクラッシュ
 - ブラウザ用エラーページのHTMLが返ってきてパースできずクラッシュ

### 解説
 サーバは常に200(正常系)を返してくれることはありません。
不正なリクエストを送ったら404や422を返してくるでしょうし、
サーバがアクセス過多で落ちていたら何らかのエラーを返してきます。
何も返さず、タイムアウトになるかもしれません。

その際の「もしエラー値が返ってきたらどうするのか」という考慮が抜けているとパースエラーで落ちたり、様々な値がnullや初期値の状態で動き始めて不正動作に繋がります。
### 対策
400系,500系のエラーが返ってきた際のエラーハンドリングを必ず追加します。
また、パースに失敗したらエラーとして扱い、ユーザーに通信エラーであることを通知します。

## 「〇〇の値は必ずサーバにあるよ」は信じない
### クラッシュ
 - 〇〇の値が古いユーザ情報にはなくてクラッシュ
 - 〇〇の値は実装時は必ずあったが、サーバ側の改修で無い時が出てきてクラッシュ
 - 外部サービスのAPIを使用していたが突然サービス終了でAPIが無くなってクラッシュ

### 解説
サーバ側の開発者と仕様を決めている時に、
「この値はnullの時は無いからnullチェックいらないよ」と言われる場合があります。
こういった言葉は信じてはいけません。
その人が完全にデータの仕様を把握しているとは限らないし、
**後々その箇所を改修するのはその人じゃない**かもしれません

### 対策
#### レスポンスは全てNullableだと想定する
いつnullが返ってくるのかわからないので、レスポンスを受け取るデータクラスは全てNullableかつStringにします。

``` UserApiData.kt
data class UserApiData(
  val id : String?,
  val name : String?,
  val age : String?,
  val birthDay : String?
)
```
(Kotlinで書いています)

しかし、そうするとアプリ内で利用する際にいちいちNullチェックや型変換をしなければならず、凄くコードが煩雑になってしまいます。
そのため、
①レスポンスを受け取るデータクラス
②アプリ内で使うデータクラス
と2つ作成して、①から②を作成するコンバートメソッドを作ります。

``` User.kt
data class User(
  val id : String,
  val name : String,
  val age : Int,
  val birthDay : Date
)
```

``` UserConverter.kt
class UserConverter(){
    fun convert(data: UserApiData): User {
        if (data.id == null) throw IllegalArgumentException("user_id is null")
        return User(
                data.id,
                data.name ?: "",
                data.age?.toIntOrNull() ?: 0,
                parseData(data.birthDay)
        )
    }
}
```

そのコンバートメソッドでは、Nullチェックを行い、NonNullの形で値を入れていきます。
もしそこでNullチェックに引っかかった場合は
1. 表示用の値はデフォルト値を入れる
2. IDは後続処理に影響するので、例外を発生させてエラーダイアログを出す

といった対応を場合によって使い分けます。
そうすると、**サーバからのレスポンスはちゃんと受け取りつつNullチェックを一箇所で行う**ことができます

## int=0,boolean=falseに意味を持たせない

### 不正動作
 - falseのときのみ表示するダイアログが常に表示される
 - ユーザーステータス0のときのみ実行する処理が常に行われる

### 解説
要件定義時のバグにつながります。
Javaではintやbooleanはそれぞれ0とfalseが初期値となり、nullにはなりません。
apiから0以外の値が来ることを想定して実装して、値が来なかった場合、0のまま処理が実行されてしまいます。

### 対策
↑と同じ様にStringに設定する方法や、プリミティブ型のint,booleanではなくラッパークラスのInt,Booleanで受け取る方法があります

そうすると初期値がnullになるため、意図せず初期値のまま変わらなかった場合に不正動作ではなくクラッシュやエラーとなります。

クラッシュ/エラーも防ぎたいですが、Crashlyticsに計上されたり、テスト時に検出しやすくなるためこちらのほうがまだマシです。

## まとめ
 - サーバエラー,パースエラー時のエラーハンドリングを忘れない
 - APIはnullを返すことを想定して、全てnullableで受け取る

実際には実装時間や仕様の調整によってできない対策も出てきてしまいますが、できる範囲の対策をして少しでも安定したアプリを作っていけたら良いなと思います。
ローカルのjarを参照しているアプリをherokuにデプロイする方法

## 問題
Mavenのpom.xmlで以下のような記述をしていた場合、herokuデプロイ時にエラーが発生します。systemPathは許容していないようです。

```xml:pom.xml
<dependency>
    <groupId>com.hoge</groupId>
    <artifactId>fuga</artifactId>
    <version>1.0.0</version>
    <scope>system</scope>
    <systemPath>${project.baseDir}/lig/fuga.jar</systemPath>
</dependency>
```

## 解決方法

### 参照元プロジェクトでの作業

Mavenで以下のコマンドを実行します。

```bash:コマンド
mvn deploy:deploy-file -Durl=(1) -Dfile=(2) -DgroupId=com.hoge -DartifactId=fuga -Dpackaging=jar -Dversion=1.0.0
```

|番号|設定内容|値|
|:--|:--|:--|
|(1)|参照先プロジェクトのjarを置くディレクトリのフルパス|file://~/<参照先プロジェクト>/repo|
|(2)|参照元プロジェクトルートからのjarの相対パス|target/fuga-1.0.0-SNAPSHOT.jar|

上記のコマンドを実行すると、参照先プロジェクトのrepoフォルダにjarファイルが作成されます。

### 参照先プロジェクトでの作業

pom.xmlに以下の内容を追加します。

```xml:pom.xml
<repositories>
  <repository>
    <id>project.local</id>
    <name>project</name>
    <url>file:${project.basedir}/repo</url>
  </repository>
</repositories>

<dependencies>
  ・・・
　　　　<dependency>
    <groupId>com.hoge</groupId>
    <artifactId>fuga</artifactId>
    <version>1.0.0</version>
    <!-- scopeとsystemPathを削除 -->
  </dependency>
</dependencies>
```

## 参考サイト

- [Adding Unmanaged Dependencies to a Maven Project](https://devcenter.heroku.com/articles/local-maven-dependencies)
React / TypeScript / babel / JSX / トランスパイル　各用語の関係

Reactについて調べていたらタイトルの用語たちが一気に現れて失神:scream:しかけたのですが、メンターさんにとてもわかりやすく教えていただいたので掲載させていただきます。

## React / TypeScript / babel / JSX / トランスパイル　の関係

- **TypeScript**は型があるJSのこと。

- それを**babel**を使ってビルドすると、実行できるJavascriptに変換できる。
これを**トランスパイル**と言う。

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


- **React**で採用されている**JSX**というのはJavascriptの拡張言語のことで、この**JSX**ではJS内にhtmlを記述することができる（この**JSX**も**babel**を使ってトランスパイルする）

--

以上、メンターさんありがとう:relaxed::pray:
mbotおもしろいですね。

mbotでIoTつくれないかな？
まだ思いつきですが。
- http://www.mext.go.jp/b_menu/houdou/30/03/1403192.htm
- http://www.mext.go.jp/a_menu/shotou/zyouhou/detail/1403162.htm
- http://www.mext.go.jp/component/a_menu/education/micro_detail/__icsFiles/afieldfile/2018/11/06/1403162_01_1.pdf
- http://www.soumu.go.jp/programming/data/012/012_02_01.pdf
- https://store.makeblock.com/mcore-main-control-board-for-mbot
- https://j-tinkering.com/mbot-ranger-comparison/
- https://www.makeblock.com/project/me-auriga
quicksight 事例祭り行ってみた。

# １件目大創産業
ダイソーは5000店舗

課題
・BIの遅さ
・データ不足
・クオリティが高いが故に冗長構成なし

インフラ→aws
Quickview→Microsoft　マルチクラウドにしたくない
（マルチにするとログ管理が非常にめんどくさい）
Tablouもawsと連携しているので考慮したが、redshiftを含めてのデファクトスタンダード
毎月160万になるのはコスト高なので断念。
Tablouはグラフ最適化のエンジンを使用しているので断念。
Quicksightについては社内での利用分析を行った結果、tablouとクイックサイトでは価格の違いがかなり大きくなったのでquicksightの採用を行った。

ダッシュボードはPOS PI 在庫　契約残に使用。

Analizeで月に変更して実施

メール機能を用いる

裏の仕組みを公開
・データ構造
・・データキューブの理解
・・インプットは正規化しておき、アウトプットは非正規化しておく。
・・グルーのアウトプットファイルは名前が変わるので、ステップファンクションで最終処理を行わせる。
BIの新しいデファクトスタンダードへ

What-if分析を用いることで販促ポイント（機会費用）の確認ができる。
一番大事なポイント例えば〜月に販促できないのが一番リスクが高いことがわかるなど
リコメンドの機能の使い所
・問題商品の細かい該当範囲を確認できる。


————————————————————————————————————————————————————————————
# リコーのデータ基盤の作り方
データのサイロ化
データ整備とデータ分析は8:2くらいの消費時間の差がある
横串展開できるプロジェクトでの実行

————————————————————————————————————————————————————————————
# バンダイナムコライツマーケティング
映像配信事業を元に
配信元から配信権を得て、配信委託を行う。
クイックサイトに至った理由
作品ごとに視聴時間、視聴年齢層、性別をチェック
編成クール毎に作品の視聴動向の確認、
視聴者（属性）の状況、変化を見たい
視聴時間と視聴履歴のRDSを持ち、それをインスタンスがデイリーでバッチをかけ処理後バケットにデータを格納する
加工済みデータは１ヶ月で２GB

ファイアTVでサービスを提示した、クイックサイトのアプリがあったので確認できた。
アドブロックの関係でanalysysを変更した場合エラーが発生することがある
————————————————————————————————————————————————————————————
RDSを使わなくても、見る最終形の形が数種類であるならば、ETLでデータを非正規化してあげればいい。
ユーザーを作成しようとしたら、ORA-65096が出た時の対処法

#概要
CDBでユーザーを作成しようとするとORA-65096が出ます。

![SmartSelectImage_2019-01-30-17-28-31.png](https://qiita-image-store.s3.amazonaws.com/0/328125/3bd00b1e-39a6-81a6-88f9-6ef9ecfdcb65.png)


#対処法

##1.現在の接続先を確認
```
show con_name
```

![SmartSelectImage_2019-01-30-17-35-23.png](https://qiita-image-store.s3.amazonaws.com/0/328125/a4190a94-6d4a-be8d-2373-ceb766d6d7bc.png)


現在、CDBに接続していることを確認できました。

##2.接続先を変更

```
alter session set container = PDB名;
```

![SmartSelectImage_2019-01-30-17-35-29.png](https://qiita-image-store.s3.amazonaws.com/0/328125/3fbc8034-3bff-4392-ec0f-8a721dd2139c.png)



###再確認
![SmartSelectImage_2019-01-30-17-35-48.png](https://qiita-image-store.s3.amazonaws.com/0/328125/314225b6-8c2c-21a9-8754-45748e100e2f.png)
PDBに接続することができました。

##3.ユーザー作成
```
CREATE USER ユーザー名 IDENTIFIED BY パスワード;
```
```
オプション
DEFAULT TABLESPACE 表領域名
TEMPORARY TABLESPACE 表領域名
```

![SmartSelectImage_2019-01-30-17-36-14.png](https://qiita-image-store.s3.amazonaws.com/0/328125/8a268d58-5fcf-eac6-9ec5-98299fc48356.png)

##4.接続確認
```
CONNECT ユーザー名/パスワード AS SYSDBA
```

![SmartSelectImage_2019-01-30-17-36-40.png](https://qiita-image-store.s3.amazonaws.com/0/328125/ae9f9af7-1d18-1fca-5b59-4184d5a49752.png)



無事、ユーザー作成が完了いたしました。
Vue.jsでイベントハンドリングする関数にイベント引数以外を渡す方法

ここに載ってた。
https://jp.vuejs.org/v2/guide/events.html#%E3%82%A4%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%83%8F%E3%83%B3%E3%83%89%E3%83%A9

以下蛇足。

Vueでイベントハンドリングする際、

```html
<input type="text" @change="onChangeInput">
```

html側でこのようにイベントハンドルする関数を書けば、
Vueインスタンス側で、

```javascript
methods: {
  onChangeInput(event) {
    this.message = event.target.value
  }
}
```

このように関数を記述してイベントの変更を検知できます。

しかし`onChangeInput`に他の引数を渡したい場合（リストの要素のidとか）、
html側で明示的に引数を記述することもできます。
イベント引数は`$event`で指定できます。

```html
<input type="text" @change="onChangeInput(item.id, $event)">
```

Codepenで例を作りました。

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="js,result" data-user="rhistoba" data-slug-hash="wNoWZg" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="vue multiple arguments on event hander">
  <span>See the Pen <a href="https://codepen.io/rhistoba/pen/wNoWZg/">
  vue multiple arguments on event hander</a> by stoba (<a href="https://codepen.io/rhistoba">@rhistoba</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

以上です。
VBScriptを使ってWindowsの画面ロックが掛からないようにする方法

## 概要
Windowsの画面ロックの設定を変えられない場合に、フリーソフトなどをインストールすることなくWidowsの標準機能であるVBScriptを使用して画面ロックが掛からないようにする方法を紹介します。

原理はいたって簡単で、Windowsの画面ロックは無操作の状態で一定時間が経過するとロックが掛かるしくみなので、定期的にVBScriptによりキー操作を行うことで画面ロックが掛からないようにするというものです。

本来掛かるはずの画面ロックが掛からないようにする処理であるため、各社で運用されているセキュリティポリシーに違反する恐れがあります。
本ドキュメントに記載のVBScriptを実行したことにより生じたいかなる損害も責任を負いかねます。実行に際しては、これらリスクを理解の上自己責任で実施ください。

## 準備
以下のテキストの内容を「画面ロック制御.vbs」というファイル名で保存します。

```VisualBasic:画面ロック制御.vbs
' スリープ時間（デフォルト60秒）
intSleepTime = 60000
' 送信キー（デフォルト「F16」）
strSendKey = "{F16}"

' 起動チェック
strQuery = "Select * FROM Win32_Process WHERE (Caption = 'wscript.exe' OR Caption = 'cscript.exe') AND " _
         & " CommandLine LIKE '%" & WScript.ScriptName & "%'"
Set wmiLocator = CreateObject("WbemScripting.SWbemLocator")
Set wmiService = wmiLocator.ConnectServer
Set objEnumerator = wmiService.ExecQuery(strQuery)

Dim iCnt
iCnt = 0

If objEnumerator.Count > 1 Then
    '>> 実行中
    strMsg = "現在、画面ロックは「無効」です。" & vbCrLf _
            & "「有効」にし、ロックが掛かるようにしますか?"
    If MsgBox(strMsg , vbYesNo + vbQuestion, "画面ロック有効化") = vbYes Then
        For Each objProcess In objEnumerator
            iCnt = iCnt + 1
            If iCnt <> objEnumerator.Count then
                '最後のプロセス（自分自身）以外を終了
                objProcess.Terminate
            End If
        Next
    End If
    WScript.Quit 0
Else
    '>> 新規
    strMsg = "現在、画面ロックは「有効」です。" & vbCrLf _
            & "「無効」にし、ロックが掛からないようにしますか?"
    If MsgBox(strMsg , vbYesNo + vbQuestion, "画面ロック無効化") = vbYes Then
        Call StopWindowsLock(strSendKey, intSleepTime)
    End If
End If

WScript.Quit 0

'-------------------------------------------------------------------------------
' 画面ロック停止処理
'-------------------------------------------------------------------------------
Sub StopWindowsLock(key, sleepTime)
    Set WshShell = CreateObject("Wscript.Shell")
    Do
        WshShell.SendKeys(key)
        WScript.Sleep sleepTime
    Loop
End Sub
```
60秒ごとに「F16」キーを押す処理を実行することで、画面ロックが掛からないようにしています。
通常のWindows用のキーボードには、F13～F16キーは存在しないので操作が割り当てられていることは無いと思いますが、もし使用しているアプリケーションがある場合はキーを変更します。
キーを変更するには、2行目の「strSendKey = "{F16}"」の値を変更します。
キーを押す間隔を変更するには4行目の「intSleepTime = 60000」の値を変更します。単位はミリ秒です。

## 実行
### 画面ロックが掛からないようにする
1. 画面ロックが有効となっている状態で「画面ロック制御.vbs」をダブルクリックします。

1. 以下メッセージが表示されますので「はい」をクリックします。
![画面ロック無効化.png](https://qiita-image-store.s3.amazonaws.com/0/351904/370cd0d0-0443-cd14-3fd6-f0677ff28afb.png)

### 画面ロックが掛かるように戻す
1. 画面ロックが無効となっている状態で「画面ロック制御.vbs」をダブルクリックします。

1. 以下メッセージが表示されますので「はい」をクリックします。
![画面ロック有効化.png](https://qiita-image-store.s3.amazonaws.com/0/351904/eb5499e0-e783-1177-95ee-8799658c52bc.png)
TouchBarが思いの外いらなかったので松屋のメニューを表示させるアプリを作った

![IMG_0852.jpg](https://qiita-image-store.s3.amazonaws.com/0/244632/1493d12a-ad9d-aad5-7bca-acb9613cdada.jpeg)
ぐわーーーーわたしが脳死してしまった（超常現象）
新しいMac買ったんですよ、2018年モデルの13インチ。
こいつにはTouchBarが~~生意気なことに~~まだ生きながらえてます。
なんか面白い使い方はできないかなと思ったらまこてぃあ([@hs6a](https://twitter.com/hs6a))が作った[Matsuya-Web-API](https://github.com/makotia/Matsuya-Web-API)を思い出したのでTouchBarで表示して更にリロードできるようにしてみました。

コード的には脳死しながら書いた（コピペではない）ので理論とかよくわかってなくて説明できません。すみません。許してください。なんでもしますから！！

ソースだけおいてトンズラしようと思います。煮るなり焼くなり好きにして

[Matsuya-Touch-Bar](https://github.com/TinyKitten/Matsuya-Touch-Bar)
NPCMJ (Kainoki) & tregex :「ノダ文」を検索

「ノダ文」を検索するには，次のような検索式で IP に直接支配される (FN (WORD の)) を探せばよい（「のだ」は「んだ」になることもあるので，「ん」も含める）。

``/^IP/ < (FN <<: の|ん) ``

下のようにして調べると，「ところ」「わけ（訳）」「はず」などが「の」「ん」と同じ環境に現れるものとしてアノテーションされていることが分かる。

``/^IP/ < (FN !<<: の|ん)``
[Google広告] サンキューページに合計金額表示なし。でも、コンバージョンでデータを送りたいときはsessionStorageをつかおう

確認ページには金額あるのに、サンキューページには金額がない...。

でも、コンバージョンとして値は送りたい。

そんなあなたはsessionStorageを使いましょう。
(localStorageも使えます。が、sessionをまたいで保持する必要はないので)

・確認ページにて

```JavaScript
 // DOM要素なんかから合計金額を取得します。
 let $total = document.querySelector('#hoge');
 let priceStr;
 if($total){
   // DOM要素だったら、innerTextなんかで金額取りましょう。
   priceStr = $total.innerText;
   // "¥6,000"が"6000"に
   priceStr = getPriceWOSymbols(priceStr);
 } else {
   // 値が取得できなければ、1
   priceStr = '1';
 }
// 金額のデータを保存　("6000")
window.sessionStorage.setItem('price', priceStr);

/** 
* 「¥」と「,」なしの金額を返します
*  WO = without
* @param {string}  priceStr
* @return {string}
*/
const getPriceWOSymbols= (priceStr)=>{
  return priceStr.replace(/[^0-9]/g, '');
};

```

・サンキュページにて

```HTML
<!--Global site tag (gtag.js) - Google Ads: XXXXXXXX-->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-766862767"><script/>
<script>
  // Google広告のコード。ファーストパーティクッキーの生成
  // リマーケティングタグとしても機能します。
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'AW-XXXXXXXX');
</script>
```

```HTML
<script>
// 保存しておいた金額のデータを取得。 ("6000")
let price = window.sessionStorage.getItem('price');

// sessionStorageにはstringでしか値を入れられないので、numberに直しましょう
// "6000" が 6000に
price = price && !isNaN(price) ? parseFloat(price) : 1;
 
// コンバージョンデータの送信
gtag('event', 'conversion', {
  'send_to': 'AW-XXXXXXXX/XXXXXXXX',
  'value': price, // ここに確認ページからもってきた値(数字の6000)が入ります！
  'currency': 'JPY',
  'transaction_id': someVariableForId // 省略可
});  
</script>
```

以上です！
Markdown記法　オープンソーステンプレート

## 概要

Qiitaで投稿されたことがある方はご存知かと思いますが、ビジネスツールなど様々な場面でmarkdown記法が使われています。
記法一覧はすでにまとめてくださっている方がいるので、本記事では普段使うシーンが多そうな部分に限定してテンプレートとしてそのまま使えるようにまとめてみました。

### 使用場面

- Qiita投稿
- [Github](https://docs.github.com/ja/github/writing-on-github/basic-writing-and-formatting-syntax)の説明用テキスト 「readme.md」
- ビジネスツール
    - [slack](https://slack.com/intl/ja-jp/help/articles/202288908-%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%81%AE%E6%9B%B8%E5%BC%8F%E8%A8%AD%E5%AE%9A)
    - [Backlog](https://support-ja.backlog.com/hc/ja/articles/360036145833-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E6%95%B4%E5%BD%A2%E3%81%AE%E3%83%AB%E3%83%BC%E3%83%AB-Markdown-%E8%A8%98%E6%B3%95-)
    - [redmine](https://redmine.jp/tech_note/textile/)　など


### 参考文献

- [Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)
- [Qiitaでシンタックスハイライト可能な言語一覧](https://qiita.com/Qiita/items/e84f5aad7757afce82ba)
- [Qiita Markdown 書き方 まとめ](https://qiita.com/shizuma/items/8616bbe3ebe8ab0b6ca1)
- [40言語で「Hello World」をやってみよう！！](https://www.microstone.info/helloworld/)


## 使い方
![スクリーンショット 2021-03-13 16.47.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76115/76fefdc8-db64-f16e-e349-63cd7ce5ec0c.png)

Qiitaの記事ページ　サイドメニューで「…」アイコンをクリックするとポップアップが表示され、「Markdownで本文を見る」を選択するとmarkdown形式のテキストを参照できるので、次項「参照用テンプレート」の部分をまるっとコピペして必要な部分を使用ください。


## 参照用テンプレート

# 見出し h1
## 見出し h2
### 見出し h3
#### 見出し h4
##### 見出し h5
###### 見出し h6

### テキスト

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
テキストが入ります。テキストが入ります。テキストが入ります。

[テキストリンク](https://qiita.com/)

**太字テキスト**

*イタリック体テキスト*

~~打ち消しテキスト~~


### リスト

- リスト
- リスト
- リスト
    - リスト
    - リスト

1. 番号付きリスト
2. 番号付きリスト
3. 番号付きリスト
    1. 番号付きリスト
    2. 番号付きリスト

### 引用

`コードのインライン表示`

> 引用
>> 引用
>>> 引用


### ソースコード引用

```
// 記述テキストがそのまま表示されます
```

```javascript
// 指定言語に準じた色分けが付きます
console.log("Hello, World!");
```

```javascript:hello.js
// 参照ファイル付きのコード
console.log("Hello, World!");
```

### 罫線 / 区切り線

---


### テーブル

| TH 左寄せ | TH 中央寄せ | TH 右寄せ |
| :--- | :---: | ---: |
| TD | TD | TD |
| TD | TD | TD |