OmniAICreator/Qiita-1.07M huggingface dataset:
【AWS初学者】これどんな意味？

##きっかけ
エンジニア初学者向けです。awsの勉強をし始めて、よく見るけどコレ何だっけ？という言葉をまとめてみました。参考のほど:hugging:

##個人的によく見るベスト10

##可用性
**→システムが継続して稼働できる度合いや能力。**

ちなみに、英語にすると
可用性「availability」
そうです、あの Availability Zone の availabilityですね。
利用可能「available」
英語にすると、イメージが湧きますね。:sunny:


##冗長化
**→システムに何らかの障害、機器の故障、突発的なアクセス集中による負荷急増に備えて、予備設備を準備しておくことで、サービスを止めずに継続して提供できるようシステム構築すること。**

冗長とは、「長くて無駄のあること」
マイナスイメージなのに、”化”をつけると、プラスのイメージに化けるんですね。:hugging:

##ステートレス
→前回のデータを保存せず、前回の内容をデータを内容に反映させない仕組みのこと

ステート（状態）レス（なし）。1回きりなんです。
HTTPはステートレスです。このままだと、商品購入ページ作れないですよね。次のページに行ったら自分のカゴに購入物がない「おいっ！:angry:」てなりますね。
ですので、購入ページの場合は、逆に「ステートフル」になります。
ちなみに、webページでは、ステートを「セッション」と呼び、購入ページなどでは、セッションIDを持たせ情報管理（セッション管理）します。

それでは、awsでの「ネットワークACL」と「セキュリティグループ」どちらがステートレスでしょうか？ネットワークACLがステートレスです。（※「ネットワークACL」は、インスタンスではなく、サブネットにひも付きます）行きも戻りも忘れてしまっているので許可が必要です。戻りの設定を忘れると、通信に失敗します。
ACLとは「Access Control List」の略ですので、ステートレスで通信の出入りを許可性にしているんですね:open_mouth:


##スケーラブル

スケーラブル
**→拡張性がある。**


scalability「機器やソフトウェア、システムなどの拡張性、拡張可能性のこと」という意味がありますが、"スケーラブルな"とは、scalabilityが高いことを意味します。
「な」をつけるだけで、性能が高くなるんですね:grin:

##スケールアウト
**→機器やシステムの数を増やし、負荷分散を行うなど一体的に運用することで規模を拡張することを「スケールアウト」（scale-out）**

「スケールイン」は、逆に減らすことですね。


##スケールアップ
**→性能や機能の高い機器やシステムに交換することで規模や性能を拡張すること**

「スケールダウン」は逆に性能を下げることですね。
性能アップ :arrow_heading_up: 、性能ダウン :arrow_heading_down:

##リソース
**→プログラムが使用するデータのこと**

リソースには、「資源」という意味がありますが、このあやふやな意味が厄介です。データには、画像やテキスト、メニュー、ダイアログなどなどがあります。さらにこのリソースは、文章の意味によって変わります。**「システム開発に必要な資源や人員」**だったり、**「ソフトウェア、ハードウェアを動かすためのメモリ容量、ハードウェア容量、CPUの処理速度」**だったりします。変幻自在です。

（例）プロジェクトにリソースを割く
→（会社の資源としての）人員や費用を一部使う
（例）ダウンロードなどでのリソース不足
→容量不足
（例）リソース管理
→プロジェクトに必要な資源や人員を管理する
（例）webサイトのリソース
→webサイトを構成する文章や画像といったデータファイルなど

##シームレス
**→複数のシステムやソフトウェアのサービスがある時、違いを認識せず一体に使える事**

シームレスはアパレル業界では「つなぎ目や縫い目がない」、交通業界では「ある場所から目的地に向かう時、乗り換えなど複数の交通手段の接続をスムーズにし移動の際の不便さを解消すること」といった意味になります。
ですので、転じて「滑らかな」という意味で使われます。
業界によって使い方が違うけど、だいたいニュアンスは同じですね:thinking:

##サーバーレス
**→インスタンスベースの仮想サーバー（EC2,ElastiChache,Redshiftなど）を使わずにアプリケーションを開発する**

あえて、短文にしているんすが、サーバーレスには色んな意味が含まれます。

**・サーバー自体はある**
構築する時に、サーバーを必要としない、サーバーリソースを意識しない。
**・サーバー管理が不要**
インフラに対するプロビジョニング、デプロイ、保守/更新といった維持管理が不要。
**・アイドリング時の課金がかからない。**
リクエストされた分だけ課金される。
**・開発工数が減らせる**
サーバーを必要としないので、サーバー構築にかかる開発工数を減らせます。

##エンドポイント
**→ネットワークに接続されている端末のこと。**
※単に端末ではない

パソコンや携帯だけでなく、サーバも含まれる。
→サービスを利用する「クライアント」、クライアント側のコンピュータを指すことが多いが、まれに、サーバーも含む場合もある。


##参考にさせてもらったページ
[クラウド・データセンター用語](https://www.idcf.jp/words/)
[weblio国語辞典](https://www.weblio.jp/)
[押さえておきたいWeb知識](https://www.web-knowledge-info.com/wp/web_basic_knowledge17/)
[TechRacho](https://techracho.bpsinc.jp/hachi8833/2018_09_19/61260)
[なぜネットワークACLでなくセキュリティグループで細かいトラフィック制御を行なうのか]
(https://dev.classmethod.jp/articles/why-i-prefer-sg-to-nacl/)
[「シームレス」の意味と使い方とは？注意点も解説【例文つき】](https://biz.trans-suite.jp/35766)
[サーバーレスアーキテクチャとは何か？　AWSの「Lambda」と「EC2」を比較して解説]
(https://www.sbbit.jp/article/cont1/32603)
[サーバーレスの理解とメリット・デメリット]
(https://qiita.com/takanorig/items/3a3a0b43b5be5b4a124f)
[「リソース」の意味とは？ビジネスシーンでの使い方と類語を紹介]
(https://biz.trans-suite.jp/27121)
[MINWEB辞書](https://min-web.com/dictionary/)
[「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典]
(https://wa3.i-3-i.info/)
データカタログを使う（ポリシー 基本編）

##ポリシーとは
ポリシーは、何のためにデータカタログを整備するのか、ビジネス的観点から自由記述で明示しておくものです。

データカタログに価値あるデータを資産を追加していく作業は地道なもので、ついつい目的を忘れがちです。場合によっては、データカタログを整備するタスクに途中から参加するメンバーもいるかもしれません。

そういう人たちのためにも、なぜデータカタログを整備するのか。どのようにデータを整備していくのかなどを明示しておくことはとても重要です。

ポリシーは基本的には、企業に合わせて記述していくものですが、例えば、以下のようなものが上げられます。

####基本原則
+ 基本原則は、企業の姿勢と理念を示す表明で、情報資産を活用するための要素すべて、またはそれに影響を及ぼす価値観、運用、信念を定義付けします。

JISQ 38500：20151では、責任、戦略、取得、パフォーマンス、適合、人間行動が原則の項目としてあげられていますので、こういうものを参考にするのも良いでしょう。

ポリシーは、複数のサブポリシーを含むことができます。このことにより、ポリシーの意味と相互の関係に基づいて、ポリシーを階層的に整理することができます。

また、ポリシーは、1つ以上のルールで構成されます。ルールについては、[データカタログを使う（ガバナンス・ルール 基本編）](https://qiita.com/takayuki-yamamoto/items/73587c7ccb791299fa73 "データカタログを使う（ガバナンス・ルール 基本編)")でご紹介します。

##ポリシーの作成方法
ここでは、IBM Cloud Pak for Data(CP4D)のWatson Knowledge Catalog(WKC)を例に、新しいポリシーの作成方法をご紹介します。
CP4Dにログインした直後の画面です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571926/07089994-5af0-aea6-3eef-b43af5b8f16e.png)
左上にあるメニューボタンを押して、ガバナンス -> ポリシーを選択します。
![スクリーンショット 2020-12-09 10.47.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571926/61623c00-67b7-2679-2135-725ff33a2484.png)
右上にある新規ポリシー -> 新規ポリシーの作成を押します。なお、今回はご紹介しませんが、ポリシー定義のファイルインポートも対応しています。

ポリシー名とそのポリシーが属するカテゴリーを選択します。また、そのポリシーの定義を記入し、ドラフトとして保存を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571926/bdad85b8-d166-e881-24d0-bc50846ab446.png)

ポリシーがドラフトとして保存されました。CP4DのWKCは、ポリシーは**公開済**と**ドラフト**の状態で管理されます。**ドラフト**の状態場合、ユーザーには見えない状態となっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571926/ad12a83e-434f-1f69-6d69-184a0426cb1e.png)

また、ポリシーは階層で管理できることもお話ししました。ここでは、親ポリシーに、事前に定義した**P03) 情報の安全性が確保されていること**を指定することにします。親ポリシーの横にある＋ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571926/922fd596-5dad-8ef5-1d03-6ecb9895bcf2.png)
親ポリシーが追加されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571926/0041e605-68b3-82ec-45c3-9d3763c2ac8b.png)
ポリシーは、1次カテゴリーとしてメインのカテゴリーの他に、複数のカテゴリーに２次カテゴリーを指定して保存することができます。
ここではブランクのままにします。

必要な情報を設定したら、右上にある公開ボタンを押します。
コメントを残して、公開するボタンを押すと、ポリシーがドラフト状態から公開済みとなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/571926/8a386ed9-40e9-4458-e95e-4ec917a77144.png)
デフォルトの設定では、公開ボタンを押すと、そのまま公開済みになりますが、CP4DのWKCのワークフロー機能を利用すれば、適切な承認プロセスを経て、ポリシーを公開するようなフローを作成することもできます。

以上で、ポリシ−を作成いたしました。
主キー ≠ ID

# この記事の要約
主キーとは、**ユニーク制約**と**更新不可制約**が担保されていることだった。

# 主キー = ID と思っていた時期がありました
ORMを利用するなら主キーをIDにしなくてはいけない（というかそれ以外に設定するとソースコードの記述が面倒になってしまう）ので、何も考えずにIDを設定してました。
例↓

**商品テーブル**

| column | data_type |
|:-:|:-:|
| id | int |
| product_code | varchar |
| product_name | varchar |
| price | decimal |

**商品オプションテーブル**
おまけのお茶や、ご飯大盛り（小盛り）を想定

| column | data_type |
|:-:|:-:|
| id | int |
| product_id | int |
| product_option_name | varchar |
| price | decimal |

# 主キーと属性フィールド
しかし、主キーは何も「ID」にする必要はありません。
主キーに求められるのは、**ユニーク制約**と**更新不可制約**が担保されていることです。
（ユニーク制約と言うのは同じ値が存在しない一意であるという事、更新不可制約と言うのは一度レコードとして保存されると該当のカラムの値は変更されることを許さないという事ですね。）
これらが担保されていると何が嬉しいのかと言うと、主キーが分かれば属性フィールド（主キー以外のカラム）を一意に定められるということです。
この主キーと属性フィールドの関係を**関数従属性**と言います。

つまり、上記例のテーブルで言うと、`product_id`と`product_option_name`が分かれば`price`の値が分かるので、商品オプションテーブルの`id`は、データモデル上は不要ということです。
（`product_id`と`product_option_name`の複合主キーを張る形になる）

そしてここで面白いのは、仮に商品オプションテーブルがただ商品オプション名を保存するためだけのテーブルだったとしたら、`price`カラムは必要無くなり主キーだけが残るのですが、データモデル的には必要なテーブルには変わらないという点です。
つまり、テーブルの設計を考える切り口は関数従属性ではなく、主キーが表す変数域ということになります。（この事を**定義域制約**と言います）

## サロゲートキーの導入
とは言え、冒頭でも書いたようにORMを利用するなら主キーを**ID**にすることを迫られます。
例えばLaravelだと、複合主キーにするならtraitを別にインストールする必要があるそうです。
[参考：Laravel5.7における複合プライマリキーを持つテーブルへの挿入と更新](https://qiita.com/hidea/items/968c1013a7663de8d9cc)

こういった代理で導入される主キーのことを**サロゲートキー**と呼びます。

このサロゲートキー、便利ですが気をつけないとバグを生んでしまいます。
要するにあくまでも主キーの代わりなので、関数従属性を守る必要があるということです。
例えばユニーク制約を破るとしましょう。
そうすると、同じ`product_id`と`product_option_name`の組み合わせがテーブル上に存在してしまい、どちらのレコードを使用すれば良いのか分からなくなってしまいます。
また、更新不可制約を破り、途中で値が変わるようなアプリケーションを組んでしまうと、全く別のデータとなるか上記のユニーク制約を破ることにも繋がってしまいます。

こういった事が起きないようにデータベース・アプリケーションの設計をしないといけないですね。

# まとめ
主キーはテーブル設計を考える際、適当に「とりあえずIDにしておいて、、」とか考えてましたが、今回記事を書くにあたってそれではいけないことが分かりました。
3D Printer gcode E値 計算方法

## 3DプリンタのGcode
3D　プリンタのGcodeは 主にG,X,Y,Z,Eの値から作られてる
Gは命令コマンド
X,Y,Zは座標を意味している

## E値とは
Eはフィラメントの送り出し量を表している。送り出し量(E)の計算方法を考える。

これらは
エクストルーダーに取り付けられているノズルの直径(Φn)
エクストルーダーに取り付けられているフィラメントの直径(Φf)
と現在の座標と目標の座標との距離D(すなわち移動距離)から計算できる。

### イメージ図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377555/4551ef3d-7b1a-f4aa-0db0-07c6bd5b9d79.png)


## 計算方法
引数

入力側の体積計算式
$$ Vf = (\frac{\phi{f}}{2})^2\times\pi\times{E} $$

出力側の体積計算式
$$ Vn = (\frac{\phi{n}}{2})^2\times\pi\times{D} $$

出力側と入力側の体積を等しくなるので
$$ Vf = Vn $$
が成り立つので
 
まとめ
$$ E = \left(\frac{\phi{n}}{\phi{f}}\right)^2\times{D} $$

なんか応用物理とか材料力学とかで見たことある式の形だなぁ...
API設計で気をつけて欲しいこと

# はじめに

僕は今アプリエンジニアとして働いているのですが、渡されるAPIがアプリで扱いづらいとなることがちょこちょこあり、
これはきっとアプリでどのようにAPIを使っているかを知らないからこんなことになるのだ！と断定し、サーバーを開発してる人たちにそこらへんを知ってもらおうと記事を書くことにしました。

## レスポンス編

アプリは静的言語なので、APIのリクエスト/レスポンスは全て構造体で定義しています。(現場による)

例えばAPIのレスポンスで

```json
{
    "todoList": [{
        "title": "魚をさばく",
        "memo": "マグロと包丁は準備済み"
    }]
}
```

こんな形のものがあったとします。
その時のアプリ(Swift)では↓のような構造体を準備し、受け取ったレスポンスjsonをデコードして構造体のインスタンスに変換し使っています。

```swift
struct Todolist: Codable {
    let todoList: Todo

    struct Todo: Codable {
        let title: String
        let memo: String
    }
}
```

では困るやつです。
jsonはこちら。

```json
{
    "todoList": [{
        "title": "魚をさばく",
        "memo": "マグロと包丁は準備済み",
        "tags": [   
            { "category": "魚" },
            { "priority": "high" }
        ]
    }]
}
```

`tags`が追加されました。
配列になっていますが中の要素はばらばらになっているみたいです。
多分、このサーバー開発者的にはDBで`category`テーブルと`priority`テーブルを作るよりも、`tag`テーブルを一個作ってKSVみたいな構造にして汎用性を高くしちゃおう！的な感じなのでしょう。

アプリでの構造体はこんな感じになります。

```swift
struct Todolist: Codable {
    let todoList: Todo

    struct Todo: Codable {
        let title: String
        let memo: String
        let tags: [Tag]
        
        struct Tag: Codable {
            let category: String? // この?はnullもありえるよ!マークです。
            let priority: String?
        }
    }
}
```

`Tag` の構造体を追加しました。

ほんとは`Category`と`Priority`の構造体を作りたいのですが、中身を見るまではどちらになるか判別ができないため`Tag`構造体でまとめて定義する形になってしましました。。

また`priority`を取得したい!となったときには、`tags`をfor文で回し、`priority`が入っているところを探さなくてはいけません。
`Todo`構造体に`priority`を取得するメソッドを追加すればいいのですが、なんか微妙です(/ _ ; )

## まとめ

jsonのキーは可変にしないで欲しいです！！！！！！！
ほんとはリクエストについても書きたかったのですが、昔遭遇したリクエストに困るAPIの詳細が全然思い出せませんでした。。逆にどう作ったんだ。。

（あと、RDB使ってるならテーブル構造をKSVっぽく保存しないで欲しいです！！API扱いづらいし、データの中身見るまでどんな値が保存されるか分からないから微妙だと思うよ！）
【流出解析】シリーズ　第7回　積雪・融雪モデル　―降雪量・融雪量の推定―

# 移転のお知らせ

こちらの記事は下記のサイトに移転しました。

> [NNテックブログ](https://nnhiroba.xsrv.jp/nnTechBlog/Article/Article?ID=39)
【AWS機能紹介】有名人の認識やテキスト抽出が楽にできる


##本記事の概要
本記事はＡＷＳをこれから学びたい、どんなものか体験してみたい、
そんな初心者さん向けに作成しております。

#Amazon Rekognition
今回ＡＷＳの機能として紹介するのは「Amazon Rekognition」になります。

導入するにあたり細かい設定を必要とせず手軽に始めることができ、
言語などの専門知識がなくても画像をアップなどするだけで使用できます。

機能紹介

・テキストの検出
イメージおよびビデオ内のテキストを検出できる機能です。
その後、検出されたテキストを機械可読テキストに変換できます。


![スクリーンショット (34).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939666/88f1e948-5624-afef-644d-be132de100f6.png)






・顔の比較
顔を比較する機能です。類似割合 (%) に基づいて類似度を確認します。

![スクリーンショット (33).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939666/f9e92dd5-66e5-d0bf-4712-ac4aedc3b649.png)


その他にも様々な機能があります。
・安全でないコンテンツの検出
アダルトコンテンツや暴力的なコンテンツを検出でき不適切なコンテンツをフィルタできます。
規定についてはユーザの方で調節ができます。

・有名人認識
アップした写真から政治、スポーツ、ビジネス、エンターテインメント、
メディアなどのさまざまな分野にわたる多数の有名人を認識することが可能です。


###使用するには
Amazon Rekognitionで検索し、ＡＷＳのサイトから使用を開始できます。
事前にアカウントの作成は必要です。

###参考元サイト
・公式ＡＷＳサイト
https://aws.amazon.com/jp/rekognition/?blog-cards.sort-by=item.additionalFields.createdDate&blog-cards.sort-order=desc
https://docs.aws.amazon.com/ja_jp/rekognition/latest/dg/what-is.html
・紹介サイト
https://recipe.kc-cloud.jp/archives/10911

##まとめ
本記事はいかがでしたでしょうか。
ＡＷＳと聞くとよく分からない、難しそうといった印象があると思います。
実際サーバを立てたり、プログラミング言語を使用したりと、
便利で比較的簡単ではありますが、ある程度の知識がないと分からないものも多々あります。
ですがＡＷＳは幅広いサービスを展開しており「Amazon Rekognition」のように
入りやすいサービスもいくつもあります。
もし興味をもたれましたら他サービス等も調べてみてはいかがでしょうか。
画像リサイズを一括でやろう

# こんなこと…あったり…なかったり…
「ここにサイズがバラバラの画像が100枚あるじゃろ？」
「はい」
「これを全部、横幅500pxにリサイズして欲しいんじゃよ」
「ﾋｴｯ」

# そんなときは
Photoshopの`アクション機能`を使いましょう。

今回は100枚画像用意するのは大変なのでサンプルとして5枚のサイズがバラバラの画像データを用意しました。
![スクリーンショット 2020-12-09 10.04.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248214/0eb42709-41c5-acbe-e0c4-025daae354ce.png)

それぞれ、550x200、700x1000、800x300、1000x200、1200x900とサイズがバラバラになっています。

## ①アクションを記録する
- 適当な画像（今回は550x200）をphotoshopで読み込みます。
- `ウインドウ > アクション`からアクションウインドウを開きます。
![スクリーンショット 2020-12-09 10.09.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248214/8050abf9-b091-3eea-8025-15dabae34200.png)

- 右下のフォルダをクリックして適当な名前をつけましょう。
![スクリーンショット 2020-12-09 10.09.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248214/c185848a-e16a-62df-2a52-d2cb78bdf27f.png)
- 次に新規アクションを作成します。下の画像、赤枠の + をクリックし適当な名前をつけます。
![スクリーンショット 2020-12-09 10.15.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248214/bab9003e-5dfe-54fc-fef7-b85d13db07ee.png)

- `記録`をクリックするとアクションウインドウの ⚫ が 🔴 になります。（記録開始状態）
- `イメージ > 画像解像度` を開きます。
![スクリーンショット 2020-12-09 10.16.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248214/647bfcb7-ed58-2fa8-dd9b-f30b26964307.png)
- `幅`を500pxにします。
    - この時、縦横比を変更したくない場合は左の鎖マークを外しておきましょう。維持する場合はこのままです。
![スクリーンショット 2020-12-09 10.17.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248214/798ddcdd-cd45-4436-1677-966ea9fbc10d.png)
- `別名で保存`で適当なところに画像を保存します。（どこでもOK）
- JPGで保存する場合`JPGオプション`が出ますがこれは任意に設定してください。今後一括リサイズする画像全てに同じ設定が適用されます。
- アクションウインドウの`■`を押して記録を終了します。
![スクリーンショット 2020-12-09 10.17.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248214/bf5e5305-b0e3-d5e6-805f-52fff97a03c9.png)

## ②一括自動処理する
- `ファイル > 自動処理 > パッチ`をクリック
![スクリーンショット 2020-12-09 10.28.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248214/4ef72c21-e0e5-5e20-16c6-5767d38d7b9f.png)

- 左の実行下`選択`は一括リサイズを適用するフォルダを選択します。
- 右の実行後は出力先になるので、`なし`を`フォルダー`に切り替え、下の`選択`は出力先のフォルダーを選択します。
- また`別名で保存コマンドを省略`にチェックを入れておきましょう。
![スクリーンショット 2020-12-09 10.34.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248214/7dda4c4b-9789-1bd9-67fd-f982fd1b5c2b.png)

- 最後に`OK`をクリックしましょう。

## ③出力後のフォルダーを確認する
- これで縦横比に変更はなく、フォルダー内のすべての画像の横幅のみが500pxに変更されました。
- ![スクリーンショット 2020-12-09 10.42.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/248214/a445b461-c9bd-305f-bb97-804be61de5e1.png)

# 最後に
`アクション`機能は非常に便利です。
Photoshopも年々進化してきており、`被写体を選択`機能を使えば商品の自動切り抜きもほとんど自動でできるようになりました。ある程度ムラがあるので全ての画像を完璧に切り抜くことはできませんが、画像によっては今回の`アクション`と`被写体を選択`を組み合わせて画像がいくらあっても一括全自動で切り抜き、背景透明化なんてことも可能でしょう。
多くの画像を処理するのに便利な`アクション`機能を是非ご活用ください。
neo4jでsandbox その20

#概要

neo4jでsandboxやってみた。
mitre att&ckを投入してみた。

#サンプル２


```
MATCH (s:Software) 
WHERE s.name = "ASPXSpy" 
WITH s 
MATCH (s) <- [:uses] - (g:Group) 
RETURN s.name AS Software, g.name AS Group
```

|Software|	Group|
|:--|:--|
|ASPXSpy|	APT41
|ASPXSpy|	APT39
|ASPXSpy|	Night Dragon
|ASPXSpy|	Threat Group-3390

#成果物
http://embed.plnkr.co/plunk/etrTco0db4dHdveK

#サンプル３


```
MATCH (s:Software {name:"BISCUIT"}) <-[*1..2]-> (g:Group) 
RETURN s.name AS Software, g.name AS Group
```

|Software|	Group|
|:--|:--|
|BISCUIT|	APT1
|BISCUIT|	Comment Crew
|BISCUIT|	Comment Group
|BISCUIT|	Comment Panda

#成果物

http://embed.plnkr.co/plunk/ocyD2pvMTVsIrimN

#サンプル４


```
MATCH (n)-[r]-(m) 
WHERE n.name="APT1" 
RETURN n.name as name, TYPE(r) as r, LABELS(m) as label, m.name as name2
```

|name|	r|	label|	name2|
|:--|:--|:--|:--|
|APT1|	uses|	Software|	Seasalt|
|APT1|	uses|	Software|	PoisonIvy
|APT1|	uses|	Tool|	xCmd
|APT1|	uses|	Software|	WEBC2
|APT1|	uses|	Tool|	Cachedump
|APT1|	uses|	Tool|	Pass-The-Hash Toolkit
|APT1|	uses|	Tool|	PsExec
|APT1|	uses|	Tool|	Net
|APT1|	uses|	Tool|	gsecdump
|APT1|	uses|	Software|	BISCUIT
|APT1|	uses|	Tool|	Lslsass
|APT1|	uses|	Tool|	Mimikatz
|APT1|	uses|	Tool|	ipconfig
|APT1|	uses|	Tool|	Tasklist
|APT1|	uses|	Software|	GLOOXMAIL
|APT1|	uses|	Tool|	pwdump
|APT1|	uses|	Software|	CALENDAR
|APT1|	alias|	Group,Alias|	Comment Panda
|APT1|	alias|	Group,Alias|	Comment Group
|APT1|	alias|	Group,Alias|	Comment Crew

#成果物

http://embed.plnkr.co/plunk/q4ap7jHBVRycrheM

以上。
ドラック&ドロップを実装する際に出会ったメソッドたち

新たな出会いに感謝！！！
(マルチみたいw)

そんなことはどうでも良くて、初めてみたメソッドやプロパティなどを勉強してアウトプットしていく

・datatransfer
・prebentDefault
・ondragleave
・cursor:pointer(css)


##datatransfer
DataTransfer オブジェクトは、ドラッグ＆ドロップ操作中にドラッグされているデータを保持するために使用される＝データを格納するための入れ物
(設定によっては文字をコピーすることが出来ないようにする事も出来る)
>https://hakuhin.jp/js/data_transfer.html#DATA_TRANSFER_02

dataTransfer.setDatadeで指定された型のデータを設定
第一引数にはデータのタイプ名を指定
第二引数にはデータを指定(文字列)

ドラッグが開始したかを監視するのは```ondragstart```
>http://jsfiddle.net/radonirinamaminiaina/zfnj5rv4/


text/plainについては
>https://developer.mozilla.org/ja/docs/DragDrop/Recommended_Drag_Types

##prebentDefault
ある決まったクリック処理のブロックなどを行う。
単語の通り妨げるものである。

>参考qiita
https://qiita.com/tochiji/items/4e9e64cabc0a1cd7a1ae
mdn
https://developer.mozilla.org/ja/docs/Web/API/Event/preventDefault


まとめ
https://ja.javascript.info/mouse-drag-and-drop
VScodeではじめに設定すること


##EXTENSIONSのインストール

以下のEXTENSIONSをインストールしてください。

- ESlint
- Angular Language Service
- Bracket Pair Colorizer
- Code Spell Checker
- code-eol
- Project Manager

##insertFinalNewlineを有効化

Code→PreferencesでSettingsにいってinsertFinalNewlineを検索!
もしチェック入ってなかったら入れといてください！
これやったら保存時勝手にファイル末尾の空行をつけてくれます
MySQLのリードレプリカ間の疎通に使うMASTER_PASSWORDを変更する。

```
STOP SLAVE; -- if replication was running
CHANGE MASTER TO MASTER_PASSWORD='new3cret';
START SLAVE; -- if you want to restart replication
```

https://dev.mysql.com/doc/refman/5.6/ja/change-master-to.html
【Flutter】iOSのビルドで「flutter/flutter.h file not found」エラーが発生する

## 事象
FlutterでiOSのdebugビルドをしたらタイトルのエラーが発生した。

```
flutter/flutter.h file not found
```

## 事の発端
**flutter channel dev**コマンドでチャンネルをdevに切り替えて、**flutter upgrade**コマンドでバージョンを更新した。更新後ビルドしたらエラーが発生した。

## 解決するためにやったこと
* **flutter clean**コマンドを実行して再ビルド
* pubspec.lockを削除して、**flutter pub get**を実行して再ビルド
* Podfile.lockを削除して、再ビルド
* FlutterのSDKを[公式](https://flutter.dev/docs/get-started/install/macos)からダウンロードし、既存のものと差し替え(パスはそのまま)
* /Library/Developer/Xcode/DerivedDataを削除
* PC再起動

上記を試したがエラーが消えることはなかった。

## 解決策
リポジトリをクローンし直してビルドしたら解決した。

確かに他のリポジトリではエラーが出なかったので納得。

詳細な原因はわからなかったが解決できたのでよし。
apache経由でLibreOfficeを実行できなかった話

apache経由でLibreOffice(`libreoffice --convert-to pdf --outdir <dst_dir> <src_file>`)を実行しようとしたところ

```
[Java framework] Error in function createSettingsDocument (elements.cxx).
javaldx failed!
Warning: failed to read path from javaldx
```
と表示されPDF変換ができませんでした。

# 対処方法
環境はUbuntu(version 9)を使用している時の対処方法ですが

```
sudo mkdir /var/www/libreoffice
sudo chown -R www-data:www-data /var/www/libreoffice
```
とすれば上手くPDF変換できました。
Docker Compose の設定は上書きできる

知っておくとちょっと便利な Docker Compose の Tips。

## Docker Compose の設定は上書きできる
`docker compose` コマンドの実行時に `-f` (もしくは `--file` ) を指定しなかった場合に `compose.yml` がデフォルトで読み込まれることは誰もが知っているかと思うが、このとき同時に `compose.override.yml` も読み込まれて上書きされる。

``` yml:compose.yml
services:
  echo_env:
    image: busybox
    environment:
      DEFAULT: 1
    command: env
```

``` yml:compose.override.yml
services:
  echo_env:
    environment:
      OVERRIDE: 1
```

``` console
$ docker compose up
echo_env_1  | DEFAULT=1
echo_env_1  | OVERRIDE=1
```

`-f` をひとつでも指定した場合は `compose.override.yml` は読み込まれない。

``` console
$ docker compose -f compose.yml up
echo_env_1  | DEFAULT=1
```

`-f` を指定する場合で設定を上書きしたい場合は、明示的に `-f` を複数指定する。

``` console
$ docker compose -f compose.yml -f compose.override.yml up
echo_env_1  | DEFAULT=1
echo_env_1  | OVERRIDE=1
```

このような設定の上書き機能は、実行環境ごとの環境変数を指定する場合などに便利。

## Docker Compose の設定ファイル名を環境変数で指定する
毎回 `-f` を指定するのは面倒なので、これは環境変数で指定することが出来る。

``` console
$ COMPOSE_FILE=compose.yml docker compose up
echo_env_1  | DEFAULT=1
```

複数指定する場合は `:` で結合する。(Windows の場合は `;`)

``` console
$ COMPOSE_FILE=compose.yml:compose.override.yml docker-compose up
echo_env_1  | DEFAULT=1
echo_env_1  | OVERRIDE=1
```

`docker compose` コマンドはデフォルトで `.env` から環境変数を読み込むので、これを書いておけば毎回ファイル名を指定する必要がなくなる。

``` :.env
COMPOSE_FILE=compose.yml:compose.override.yml
```

``` console
$ docker compose up
echo_env_1  | DEFAULT=1
echo_env_1  | OVERRIDE=1
```

## 参考
- [Share Compose configurations between files and projects | Docker Documentation](https://docs.docker.com/compose/extends/)
- [Compose CLI environment variables | Docker Documentation](https://docs.docker.com/compose/reference/envvars/)
秀丸でConfluenceのテンプレート機能を再現してみた

# この記事について

この記事は、[aslead Agile](https://aslead.nri.co.jp/solution/aslead_agile.html)の開発チーム「[オキザリス](https://speakerdeck.com/viva_tweet_x/huesudeyong-qi-wode-taxin-gui-timugashi-yan-wozao-rifan-sitejin-nizhi-rumadefalsewu-yu)」にて行っているアウトプット企画である
「[チーム「オキザリス」Advent Calendar](https://qiita.com/advent-calendar/2020/oxalis)」の9日目の記事です。

# 秀丸について
秀丸エディタは、Windows 向けのテキストエディタです。
モブワークでは主に Confluence を利用していますが、個人作業ではより手軽にドキュメント作成ができる秀丸を活用しています。
秀丸には、たくさんのマクロが用意されているため、アイディア次第で様々な機能を実装することができます。

# 秀丸で Confluence のテンプレート機能を再現する
Confluence では新しいページを作成する際に、事前に用意されているテンプレートを利用してページを作成することができます。
この機能を使うと、ある程度ドキュメントの体裁を統一できたり、ドキュメント作成時間を短縮することができ、個人的にはとても便利な機能だと感じています。

そこで、今回はこの機能を秀丸のマクロで再現してみました。
出来上がったテンプレートを利用して作成したドキュメントがこちらです。

<div align="center">
<img width="700" alt="hidemaru" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/345439/2c2f9d93-b732-0bc9-1c9f-1f9384af25fb.png">
</div>

<details><summary><b>作成したマクロはこちら</b></summary><div>

```
setcompatiblemode 0x0F;

//自動インデントの設定を保存し、Offに 
#indentstate = indentstate; 
if (#indentstate != 0) config "i0";

insert "＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝";
insertreturn;
insert "　　　　　　　　　　　ページタイトル";
insertreturn;
insert "　　　　　　　　　　　　　　　　　　　　　　　　作成日：";
insert "20" + midstr(date,0,2) + "/" + midstr(date,3,2) + "/" + midstr(date,6,2) ;
insertreturn;
insert "------------------------------------------------------------------";
insertreturn;
insert "◆件名：";
insertreturn;
insert "◆日時：";
insert "20" + midstr(date,0,2) + "/" + midstr(date,3,2) + "/" + midstr(date,6,2) + " " + time;
insertreturn;
insert "◆場所：";
insertreturn;
insert "◆出席者：（敬称略）";
insertreturn;
insert "◆アジェンダ：";
insertreturn;
insert "　1. ";
insertreturn;
insert "　2. ";
insertreturn;
insert "◆資料：";
insertreturn;
insert "　・";
insertreturn;
insert "------------------------------------------------------------------";
insertreturn;
insert "<<議事内容>>";
insertreturn;
insertreturn;
insertreturn;
insert "<<今後の予定>>";
insertreturn;
insert "□";
insertreturn;
insert "□";
insertreturn;
insertreturn;
insert "＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝";
insertreturn;
//gofileend;
moveto 8,4;

//自動インデントの設定を戻す
if (#indentstate == 1) config "i1"; 
else if (#indentstate == 3) config "i2"; 
else if (#indentstate == 5) config "i3"; 
else if (#indentstate == 7) config "i4";

```

</div></details>


マクロはシンプルですが、秀丸にマクロ登録することで、```Ctrl + 1``` などの簡単な操作で上記のテンプレートを利用することができるようになりました。

ちょっとした工夫として議事録の「作成日」と「会議日時」の項目にマクロを実行した日時が入るようになっているところがポイントです。

# おわりに
秀丸はシンプルなテキストエディタツールですが、Confluence 同様に多数のマクロが用意されています。
よく使うツールだからこそ、マクロを活用して業務時間の短縮につなげてみてはいかがでしょうか。
Windowsのbatファイルでcondaの仮想環境を使ってpyファイルを実行する

## 概要

以下の方が対象の記事です。自分用メモ

- Anaconda/Minicondaでpython実行環境を整えている
- conda envで仮想環境を切って実行している
- Windowsのbatファイルからpythonスクリプトを実行したい
- 特定の仮想環境の下でスクリプトを実行したい

## 解決策
activate.batをcallしておけばOK。
必要に応じてpythonスクリプトファイルが置いてある場所に`cd`しておきます

```batch
@echo off
call C:\Users\<<<USERNAME>>>\Miniconda3\Scripts\activate.bat C:\Users\<<<USERNAME>>>\Miniconda3\envs\<<<ENVNAME>>>
cd <<<スクリプトが置かれてる場所>>>
C:\Users\<<<USERNAME>>>\Miniconda3\envs\<<<ENVNAME>>>\python.exe <<<SCRIPTFILENAME>>>.py
```

RUNDECKなどで指定する場合も、同じようにcallすればOK
RainLoop の使い方

[RainLoop](https://www.rainloop.net/)というWebMail の使い方です。
私は、localhost の Nginx で使っています。
![rainloop_aa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/51092ab8-c634-d17e-c2e9-b2b75bcc0296.png)

ソースの取得

```bash
https://www.rainloop.net/repository/webmail/rainloop-community-latest.zip
```

zip を　/var/www/html/rainloop で解凍します。

```bash
unzip rainloop-community-latest.zip
```

次のようなツリー構造が出来ます。

```text
$ tree -L 3
.
├── data
│   ├── EMPTY
│   └── VERSION
├── index.php
└── rainloop
    └── v
        └── 1.14.0
```

パーミッションの変更

```bash
find . -type d -exec chmod 755 {} \;
find . -type f -exec chmod 644 {} \;
sudo chown -R www-data:www-data .
```

ブラウザーで http://localhost/rainloop/ にアクセスするとログイン画面が表示されます。まだ、ログインはできません。


ブラウザーで http://localhost/rainloop/?admin/ にアクセスします。
Login: admin
Password: 12345
でログインします。
![rainloop_bb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/f4f51e89-4514-05dc-df33-7200c937deca.png)

admin のパスワードを変更します。
![rainloop_cc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/7a1b8cf8-2dea-45c6-8d09-efe82b67b1ea.png)

メールのドメインを登録します。
![rainloop_dd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/a9c07ebc-6314-77ac-e62b-3c10a2f942f9.png)

![rainloop_ee.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/3807d194-ae8b-f52d-0d30-c891bf517fca.png)

設定のサンプル
![rainloop_ff.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/ef7591d3-61e1-a6c9-59c2-fb0502e29862.png)

data に外部からアクセスできないようにする Nginx の設定
http (80) と https(443) を使っている時は両方に設定する必要があります。

```text
location ~ /rainloop/data {
                deny all;
        }
```
[JavaScript]focusを外す方法


##はじめに

#####focusとは?
例として↓の画像のようにキーワードが入力出来るようになっている事をフォーカスが当たっていると表現するらしい。

一部のAndroidでは、このような検索画面があった場合に検索後もキーボード入力画面が残り、操作しにくい状況となることがある。(※qiitaでは症状は現れない。きっと処理を書いてる)

この記事では、そのフォーカスを解除する方法を備忘録として記事にまとめる。

<img width="400px" alt="iOS の画像 (41).jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420673/3be27810-9411-1b57-85b3-37a0ba817a1c.jpeg">


##focusされている部分のfocusを解除する方法

まずJavascriptではfocusを解除するにはblue関数を使用する

```
要素.blue()
```

次に現在アクティブな要素を取得する方法

```
document.activeElement
```

この2点から下記のように書くとfocusを外す事ができる

```
document.activeElement
```

##参考
・activeElement
　・https://developer.mozilla.org/ja/docs/Web/API/Document/activeElement
・blur
　・https://developer.mozilla.org/ja/docs/Web/API/HTMLOrForeignElement/blur
・focus
　・https://developer.mozilla.org/ja/docs/Web/API/HTMLOrForeignElement/focus
【VSCode】Vue/NuxtでtailwindCSSの自動補完を有効にする

少しだけ詰まったのでメモ

Vue/NuxtでTailwindCSSの補完を有効にするには
[Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) というプラグインをインストールします。

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488042/7d6b5cdf-f15b-120b-521b-4cd7a0603703.png)
<br>
次にVSCodeの`settings.json`を編集します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488042/2a8553a2-424b-2ace-cfc8-594bf0081c7b.png)
<br>
以下の行を追加してください

```json:settings.json
  "tailwindCSS.includeLanguages": {
    "plaintext": "vue"
  },
  "tailwindCSS.emmetCompletions": true
```

<br>
<br>
補完が効くようになると思います！

![tailwind.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488042/ac96b46d-2630-c20f-9d68-fea532abfbb8.gif)
機密情報が含まれるファイルをGitHubに上げてしまったときの対応

機密情報が含まれるファイルを、作業ブランチのローカルリポジトリからリモートリポジトリへpushしてしまいました。
今回は<b>プルリクエストを作成済みで、デフォルトブランチ（masterブランチ）へのmergeをしていない</b>という状況でした。

## 対応したこと（報連相）

### 上長に報告
今回起こした事象のうち、どの部分が問題にあたるのかを社内のセキュリティ資料と照らして確認し、問題を収束させるためにはどのような対応が考えられるか（git resetまたはgit filter-branchで、機密情報が含まれたコミットの履歴を削除するor書き換える）をやり取りしました。

### 社内のCSIRTチームへ連絡を入れて対応を確認
弊社にはCSIRTチームが存在するため、CSIRTチームへ連絡をし、取るべき対応を仰ぎました。

[Enterprise support](https://enterprise.github.com/support)のOpen a support ticketから問い合わせするのが吉だと教えていただきGitHubのサポートの方と連絡を取りました。

### GitHubのサポートへ相談
- <b>上げてしまった機密情報のコミット履歴を削除する</b>
- <b>GitHub上に残っているキャッシュを削除して、git logからも遡れないよう完全に削除する</b>

これが今回満たしたい要件だったので先方にお伝えしました。

## 対応したこと（Git操作）
GitHubのサポートの方から、<b>「機密情報がプルリクエストに関連付けられたブランチにのみ存在し、mergeされていない場合は、このブランチに強制的にpushできます。」</b>との回答が得られました。

なので、git resetでコミット履歴を削除し、強制pushする対応を取ります。

### Gitコマンド実行
~~~
1.$ git branch #現在のブランチを確認する
2.$ git reset --soft <commit> #機密情報が入ったコミットの1つ手前のコミットハッシュを指定
3.$ git add <file> ＃削除したいファイルを除くファイルをステージング
4.$ git commit -m <message>
5.$ git push --force-with-lease origin <branch> #強制Push
~~~

これで<b>上げてしまった機密情報のコミット履歴を削除する</b>という要件を満たせます。

### 確認
該当のコミットハッシュのページがGitHub上で見れなくなっていることが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116234/c001ff23-9f32-a007-4f47-981c890a437d.png)

プルリクエストのコミット履歴からもちゃんと削除されていました。

### キャッシュの削除
今回はGitHubのサポート側でガーベージコレクションのプロセスを実行してキャッシュを削除してくれるとのことなので、実行してもらいました。
これによりgit logからも遡れなくなりました。

### 確認
~~~
git log | grep <commit> #機密情報が入ったコミットのコミットハッシュを指定
~~~
git logから遡れなくなっていることが確認できました。

念のため、普段作業しているディレクトリとは異なる階層に今回対応しているリポジトリをcloneし、同様にgrepすることで、自分以外のコントリビューターからも参照されることがないかの確認も行いました。

[git reflog](https://git-scm.com/docs/git-reflog)はローカルリポジトリでのHEADやブランチ先端の動きを記録するものです。
一方、git logは現在のHEADから各コミットの親を再帰的に調べて、リモートリポジトリを遡ります。
git logのコミット履歴が消えているということは他者から参照されなくなるということです。

これで<b>GitHub上に残っているキャッシュを削除して、git logからも遡れないよう完全に削除する</b>という要件も満たせました。

### ※注意
git resetやgit filter-branchをしただけで対応完了だと勘違いする人もいますが、<b>GitHubに問い合わせてGitHub側のキャッシュなどを削除してもらう必要がある</b>ので、忘れずに対応してください。

## 再発防止策
今回は、マスク化されていない機密情報を含むテーブルをdumpし、GitHubのリモートリポジトリに上げたことで問題を起こしてしまいました。機密情報にあたるカラムを意識せずデータを扱っていたことを反省しています。

弊社では有難いことに機密情報をマスク化したVIEWが用意されているので、これからは些細な作業でも必ずVIEWからデータを取得するように心に誓います。
[SQL Serverにおけるデータベースの秘密情報取扱いルールの実装について](https://techblog.zozo.com/entry/sensitive-data-sqlserver-implementation)

そして、マスク済みVIEWからデータを取得するという個人の意識ベースでの再発防止策だけではなく、仕組み化による再発防止策も対応予定です。マスク済みVIEWしか閲覧権限がないDBユーザーを作成し、開発時はそのユーザーでDBにアクセスする運用を検討中です。

## デフォルトブランチにmergeしてしまった場合は
デフォルトブランチにmergeされた状況だと今回とは対応がガラリと変わります。
詳細は[GitHubの公式記事](https://docs.github.com/ja/free-pro-team@latest/github/authenticating-to-github/removing-sensitive-data-from-a-repository)に預けますが、git filter-branch（またはgit filter-repo）やBFG Repo-Cleanerを使用し、リポジトリの履歴を書き換える必要があります。

実行にはリスクが伴うので、細心の注意を払いましょう。
実行する前にGitHubのサポートに状況を伝えて、必要な対応を確認することを強く推奨します。

## まとめ
- 今回は<b>プルリクエストを作成済みで、デフォルトブランチへのmergeをしていない</b>という状況の対応記事です。
- デフォルトブランチにmergeされた状況だと対応が異なるので、GitHubのサポートにその旨を伝えて必要な対応を確認してください。
- git resetやgit filter-branchをしただけでは対応完了ではありません。<b>GitHubに問い合わせてGitHub側のキャッシュなどを削除してもらう必要がある</b>ので、忘れずに対応してください。
備忘録(Macターミナル操作:Rails操作:基礎)

##Railsでのターミナル使用例
####・Railsコマンド
Railsに関する命令は、すべてrailsというコマンドから始まる

```bash
# railsに続けて、コマンドを記述する
% rails コマンド名
```
####・rails newコマンド
Railsで新規アプリケーションを作成する際に使用
rails newコマンドで雛形を作成するときには、以下の2つの指定を行う
１：使用するRailsバージョンの指定
２：オプションの指定

```bash
# Railsのバージョンを指定してアプリケーションを作成(6.0.0の場合)
# オプションを付けてアプリケーションを作成
% rails _6.0.0_ new アプリケーション名 -オプション名
```

####・rails db:createコマンド
新しくデータベースを作成

```bash
# データベースを作成する
% rails db:create
```

####・rails db:drop
データベースを削除

```bash
# データベースを削除する
% rails db:drop
```

####・rails sコマンド
サーバーを起動する
開発者のPCだけで動くサーバーをローカルサーバーと呼ぶ
ターミナルでcontrol + Cを同時に押し、サーバーを停止

```bash
# アプリケーションのあるディレクトリに移動
% cd ~/projects/アプリケーション名

# ローカルサーバーを起動
% rails s
```

####rails routesコマンド
rails routesコマンドを実行することでルーティングが設定されているか確認できる
・Verb:HTTPメソッド
・URI Pattern:WebサイトにおけるURLのような物
ーここまでリクエストの内容ー
・Controller#Action:リクエストを処理するコントローラーとアクション
ーここまで行き先ー

```bash
# 設定されているルーティングを確認
% rails routes
# 実行後
Prefix  Verb  URI Pattern       Controller#Action
posts   GET   /posts(.:format)  posts#index
（以下省略）
```

####rails gコマンド
・Railsアプリに追加で必要なファイルなどを生成するために使用するコマンド

```bash
# ファイルを生成する
% rails g ファイルの種類 生成するファイル名
```

####・rails g controllerコマンド
コントローラーやそれに付随するファイルを一度に作成してくれるコマンド
コントローラーの命名規則は、複数形を使用する


```bash
# コントローラーを作成
% rails g controller 作成したいコントローラー名
```

####・rails dコマンド
rails gコマンドで生成したファイル一式をすべて削除するコマンド
関連するファイルも一気に削除してくれるので、不要なファイルが残ってしまうことを回避できる

```bash
# rails gコマンドで生成したファイル一式を、rails dコマンドで削除
% rails d ファイルの種類 削除するファイル名
```

####・rails g modelコマンド
モデルやそれに付随するファイルを一度に作成してくれるコマンド
モデルの命名規則は、単数形を使用

```bash
# モデルを作成
% rails g model モデル名
```

####・rails db:migrateコマンド
マイグレーションに記述した内容を、データベースに適用するためのコマンド
作成したモデルのテーブルが作成される

```bash
# マイグレーションを実行
% rails db:migrate
```

####・rails DB:rollbackコマンド
マイグレーション実行による変更を差し戻すためのコマンド
ロールバック→修正→マイグレートで、テーブルを修正
マイグレーションは、一度実行すると再度実行できない仕組みになっている

```bash
# マイグレーションの修正のために差し戻す
% rails db:rollback
```

####・rails db:migrate:statusコマンド
マイグレーションが実行済みであるかをファイルごとに調べるコマンド
実行済みのファイルはupと表示
適用されていないときはdownと表示

```bash
# マイグレーションファイルの状況を確認
% rails db:migrate:status
```
####・rails cコマンド
コンソールを起動するコマンド
Railsアプリの変数やクラスを使用できる
値の確認や、メソッドを試してみることができる

```bash
# コンソールを起動
% rails c
```

命名規則を忘れないように！！
Go + sqlxでスライスを使ってクエリに複数の変数を渡す方法 

# はじめに
Go + sqlxでスライスを使ってクエリに複数の変数を渡す方法がよくわからなかったので、しらべて試した。

# 環境
これで作った環境を使ってる。
[Dockerを使ってPostgreSQL+Goの開発環境を作ってみた - Qiita](https://qiita.com/optimisuke/items/911cd8756bdbfeb4815a)

データはこんな感じで入ってる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184221/0393af44-d66f-77d9-3a13-683b51a19e27.png)

# コード
## シンプルな方法
スライスをそのままわたす。

```go
package main

import (
	"fmt"
	"log"

	"github.com/jmoiron/sqlx"
	_ "github.com/lib/pq"
)

// Employee は構造体です
type Employee struct {
	id     string
	number string
}

func main() {
	db, err := sqlx.Connect("postgres", "host=db port=5432 user=root sslmode=disable")
	if err != nil {
		log.Fatalln(err)
	}

	var nums = []int{4445, 5432}
	query, args, err := sqlx.In("SELECT * FROM employee WHERE emp_number IN (?);", nums)
	query = db.Rebind(query)
	rows, err := db.Query(query, args...)
	if err != nil {
		fmt.Println(err)
	}
	var es []Employee
	for rows.Next() {
		var e Employee
		rows.Scan(&e.id, &e.number)
		es = append(es, e)
	}
	fmt.Println(es)
}
```

## mapを使った方法

こっちだと、複数の変数（numsとidsとか）を渡せる。
ゴニョゴニョしてスライスを展開してる。

```go
package main

import (
	"fmt"
	"log"

	"github.com/jmoiron/sqlx"
	_ "github.com/lib/pq"
)

// Employee は構造体です
type Employee struct {
	id     string
	number string
}

func main() {
	db, err := sqlx.Connect("postgres", "host=db port=5432 user=root sslmode=disable")
	if err != nil {
		log.Fatalln(err)
	}

	arg := map[string]interface{}{
		"nums": []int{4445, 5432},
	}

	query, args, err := sqlx.Named(`SELECT * FROM employee WHERE emp_number IN (:nums);`, arg)
	fmt.Println(query)
	query, args, err = sqlx.In(query, args...)
	fmt.Println(query)
	query = db.Rebind(query)
	rows, err := db.Query(query, args...)
	if err != nil {
		fmt.Println(err)
	}
	var es []Employee
	for rows.Next() {
		var e Employee
		rows.Scan(&e.id, &e.number)
		es = append(es, e)
	}
	fmt.Println(es)
}
```

# おわりに
sqlx使ったけど、sqlパッケージでもできたりすんのかな？よくわからん。
構造体で渡す方法もあるけど、そっちはsliceを入れるやりかた見つからなかった。できるんかな？よくわからん。

# 参考
[jmoiron/sqlx: general purpose extensions to golang's database/sql](https://github.com/jmoiron/sqlx)
[Illustrated Guide to SQLX](https://jmoiron.github.io/sqlx/)
[Named parameters don't work with IN statement · Issue #485 · jmoiron/sqlx](https://github.com/jmoiron/sqlx/issues/485)
【Swift】画面が表示される『たび』に処理を実行する

# どういうことか

画面が表示されたときには `viewDidLoad` の処理が実行される。
このメソッドはファイルが作られたときにはもう書いてある。

```swift:ViewController.swift
  override func viewDidLoad() {
    super.viewDidLoad()

  // 処理

  }
```

しかし `viewDidLoad` は**一度しか実行されない**。
例えば次のページに行って、『戻るボタン』を押して戻ったときには実行されない。
具体的な例で言うと

```swift:ViewController.swift

  // 遷移前のページ

  override func viewDidLoad() {
    super.viewDidLoad()

    // ナビゲーションバーの表示を消す
    navigationController?.isNavigationBarHidden = true

  }
```

```swift:NextViewController.swift

  // 遷移後のページ

  override func viewDidLoad() {
    super.viewDidLoad()

    // ナビゲーションバーの表示させる
    navigationController?.isNavigationBarHidden = false

  }
```

こんな感じで遷移先のページではナビゲーションバーを表示させることにする。
しかしこれだと上記で書いたように遷移先から『戻るボタン』を押して戻ったときにはナビゲーションバーが表示されてしまう。
なので、画面が表示される『たび』に処理を実行するメソッドを書く必要がある。

## viewWillAppear

```swift:ViewController.swift

  // 遷移前のページ

  override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    
    navigationController?.isNavigationBarHidden = true
  }
```

`viewDidLoad` は1度しか実行されないが、 `viewWillAppear` は画面が表示されるたびに実行される。
mod_auth_mellonとAWS SSOでSAML認証

この記事は [ニフティグループ Advent Calendar 2020](https://qiita.com/advent-calendar/2020/nifty) の9日目の記事です。

昨日は @mh326 さんの「[【VSCode】複数のコマンドを一つのキーで実行したい](https://qiita.com/mh326/items/6e2c3cf262cc1dfccdbe)」でした。
便利な機能の紹介ありがとうございます。
エディタやIDEを自分好みにカスタマイズするのって楽しいですよね。


# はじめに

今年に入ってからリモートワークをする機会が増えました。
これまで特定の場所からの利用が前提となっていたWebサイトやツールにSSOできたら楽だなーと思い、ApacheのSAMLモジュールであるmod_auth_mellonと、AWS SSOをIdPに利用してSAML認証をやってみました。

# SP側
### 環境
ApacheをインストールしたAWS EC2インスタンス(Amazon Linux2)をELB配下に配置し、
SAML認証に対応させるWebサイトを用意しました。

### mod_auth_mellon
[mod_auth_mellon を使ってみた](https://qiita.com/aimoto/items/89ba104db85a2b89fa67) を参考にさせていただき、
上記のEC2インスタンスにmod_auth_mellonを導入して、SPメタデータを作成しました。

# IdP側
### 環境
東京リージョンでAWS SSOを有効化し、テスト用のユーザを作成しました。

### AWS SSO
[ドキュメント](https://docs.aws.amazon.com/ja_jp/singlesignon/latest/userguide/samlapps.html) を参考にして、カスタム SAML 2.0 アプリケーションを作成していきます。

「カスタム SAML 2.0 アプリケーションの追加」を選択します。
![スクリーンショット 2020-12-08 21.58.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94169/07b48604-e4c8-73d9-419e-3d412250c372.png)

設定画面で、IdPメタデータをダウンロードします。
![スクリーンショット 2020-12-08 22.04.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94169/d2af3c39-28a6-6d5e-4eee-8fc446e6c753.png)

先ほどmod_auth_mellonで作成したSPメタデータをアップロードします。
![スクリーンショット 2020-12-08 22.07.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94169/86ec50d0-2e47-9d43-a076-9680294db855.png)

「属性マッピング」で、画像のように `${user:subject}` を入力して、形式は `transient` を選択します。
([mod_auth_mellonのデフォルトのNameIDFormatがtransientのよう](https://jdennis.fedorapeople.org/doc/mellon-user-guide/mellon_user_guide.html#specify_mellon_nameid)で、別の形式を選択すると上手くいきませんでした。)
![スクリーンショット 2020-12-08 22.09.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94169/975002dd-7c4f-408c-5774-53cce2709812.png)

「割り当て済みユーザー」で、先ほど作成したテストユーザをアプリケーションに割り当てます。
![スクリーンショット 2020-12-08 22.13.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94169/ba9f8539-e9a6-1c63-0632-ede4a1a9803c.png)

# SP側
[mod_auth_mellon を使ってみた](https://qiita.com/aimoto/items/89ba104db85a2b89fa67) にある手順どおりに、
AWS SSOでダウンロードしたIdPメタデータをEC2インスタンス内に配置してApacheを再起動しました。

# 動作確認

### SP Initiated

Webサイトの対象パスにアクセスすると、AWS SSOのログイン画面にリダイレクトされます。
![スクリーンショット 2020-12-08 22.19.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94169/95d18543-ea40-12f7-8f2f-b8a851c34336.png)

作成済のテスト用のユーザでログインすると、再度Webサイトにリダイレクトされて閲覧することができました。

### IdP Initiated

AWS SSOのユーザポータルにアクセスして作成済のテスト用のユーザでログインすると、
AWS SSOに設定したカスタム SAML 2.0 アプリケーションが表示されます。
![スクリーンショット 2020-12-08 22.22.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94169/fa187134-8e1c-b206-1b77-ea50a87c2894.png)

アプリケーションのアイコンをクリックすると、Webサイトに遷移して閲覧することができました。

# おわりに
mod_auth_mellonを使うとかなりお手軽にSAML認証を設定することができました。
また、AWSを利用している場合はAWS SSOも使いやすいと思います。

さて、明日の担当は同僚の @kiwi26 さんです。よろしくお願いします！
１分で学ぶCGI入門

CGIってなんですか？という質問に口頭で答えられるようになればいいなーと思い改めてCGIについて超初歩的な解説の記事を作成しました。

## CGIとは?

Webサーバ上にあるプログラムを動かすための仕組み
プログラムとはコンピュータに対する指示ですね。
専門用語で書くとwebサーバーがユーザーからの要求に応じてスクリプトを起動させる仕組み。
スクリプトとはユーザーが書いたプログラミング言語をPCに分かる言語に翻訳する作業だと思ってください。


## CGIの流れ
webサーバーはユーザーからのHP見たい！などのリクエストを受けると対応するコンテンツ(文章、画像、動画など)を返信しますが、あらかじめCGI用のプログラムとして定義されたコンテンツについてはそのままユーザーに返信せず、それをwebサーバー上で実行した時の結果を返信します。

例えばHP見たい！思ったAさんが作るファイルの中に「こんにちは」と入れられます。
そしてらサーバーから「こんにちは」が帰ってきます
これが「こんばんは」だとしたら「こんばんは」が帰ってきます。
作るファイルの内容を変えるのがCGIです。

また、ホームページのファイルを作るプログラムは、ファイルを作るついでに他の機能を実装する事ができます。
例えば「今日、Aさんがアクセスした」といった履歴を残したりできます。
他にも、メール、データを保存、色々な機能を実装できます。

## 入力した文字が表示されるプログラムのイメージ
![スクリーンショット 2020-12-05 15.19.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840696/127e18b5-762c-a671-f8ca-9849d02b3f3f.png)

続きまして、アルサーガパートナーズ Advent Calendar 2020 10日目の記事は @Takamasa_FukaseさんのFPSアプリ制作秘話です:tada:
セッションとcookieについて、今一度調べる

どっちがどっちだったけ？ってよくなるので
正しく言語化できるように調べてまとめました

##いつもみているTwitterのホーム画面
ブラウザで、TwitterのURLを叩く
すると、当たり前だが自分のタイムラインが見ることができる

それは、なぜかというと
`Cookieを使ってセッション管理`をしているから

###なんでセッション管理するのか？
それは、世界中からタイムラインを見して〜というリクエストが届くから！

そして、HTTP通信は`ステートレス`な通信であるため！

なので、擬似的にCookieを使って、セッション管理をすることで
**どのアカウントでログインしているかなどの状態をサーバーに教**えることができる

####ステートレス通信とは
ステートとは状態という意味
ステートレス通信は、状態を持たない状態

状態を持たないってことは、
**リクエストのたび毎回はじめまして状態**ってこと

似たような言葉で、`ステートフル`もある

ステートフルとステートレスの違いは
クライアントとサーバー間のやりとりを維持するかしないかの違い

##セッションとは
**ユーザーの情報をサーバーに一時的に格納する仕組み**のこと

セッションって言葉には一定期間の活動っていう意味がある
**一回きりのアクセスではなくて、色々な一連の流れ**がセッション

WEBサーバーで保持するキーと値のこと
セッションは**Webブラウザを閉じるまで保存する**
リンクなどを張って**ページを移動しても内容を保持**することができる

###どうやって流れを保つのか
まず、Twitterのホーム画面をみるには
ログインして、パスワードを入力する

すると、
>あなたの識別番号は〜ですよ
という、指示をブラウザにしてくれる

そうすると、ブラウザはその情報を保存してくれる
その識別番号のことを`セッションID(無作為な英数字)`という

セッションIDは、`cookie`に保存される

##cookieとは
**Webブラウザに保存される情報**のこと
**HTTPにおけるWebサーバとWebブラウザ間で状態を管理するプロトコル**

Cookieは**WEBサーバーが発行**し、ブラウザが保持するキーと値

ブラウザは同じサイトにアクセスする際にはそのCookieをWEBサーバーに送信します。ブラウザ側が個人の識別番号を覚えていては意味をなさないので
サーバー側も同様に覚えておく
サーバー側が覚えている情報は、`セッション情報`という

WEBサーバーはブラウザからのリクエスト毎にその値を参照することができる

Webアプリでは、
**リクエストヘッダに入っているCookieを調べる**ことで、
アクセスしてきた相手がどのような相手なのかを知ることができ、
ユーザー識別やセッション管理を実現することが可能となる

##参考記事
https://qiita.com/Yametaro/items/9b65a21940e001554719
https://qiita.com/hththt/items/07136ad74127999df271#cookie%E5%9F%BA%E6%9C%AC
https://amg-solution.jp/blog/7061
https://ips.nekotype.com/2441/
namespace付きのControllerでredirect_toをする時は要注意

```
Rails: 5.2.4.4
```

## 概要

例えば以下のようなルーティングがあります。

```ruby:routes.rb
resources :top
resources :users
namespace :admin do
  resources :companies
end
```

以下は`rails routes`の実行結果（から抜粋）

```
top_index       GET    /top(.:format)                 top#index
users           GET    /users(.:format)               users#index
admin_companies GET    /admin/companies(.:format)     admin/companies#index
```

各コントローラーはApplicationControllerを継承している

```ruby:application_controller.rb
class ApplicationController < ActionController::Base
  before_action :login_required
  
  def login_required
    redirect_to controller: :top, action: :index unless current_user
  end
end
```

ログインしていない時は top#indexにリダイレクトする、という実装ですね。

さて、ログインしていない状態で`/users`にアクセスを試みると`/top`にリダイレクトします。
同様に`/admin/companies`にアクセスを試みると`/top`に０ダイレクトする・・・かと思いきや、500エラーが起きます。なぜ？
　

## 原因
発生したエラーを見ると以下のようになっていました。

`No route matches {:action=>"index", :controller=>"admin/top"}`

つまり、**adminのnamespace内でtop#indexにリダイレクトしようとしており、そんなルーティングは存在しないのでエラーになっていた**、と。。

## 対策
名前付きルーティングヘルパーを使うと良さそうです。

```ruby:application_controller.rb
  def login_required
-    redirect_to controller: :top, action: :index unless current_user
+    redirect_to top_index_url unless current_user
  end
```

## まとめ
RSpecを書いていた時に今回のエラーに遭遇し、3時間ほどハマりました...
共通処理かつ他のコントローラーテストでは通っていた（⇔ namespaceのあるコントローラーでリダイレクトするケースがなかった）ので、ここの箇所ではないはず、と先入観を持ってしまったんですよね。。

わかってしまえば単純なことなので、記憶の片隅にとどめておきましょう。
リダイレクトを実装する時は、名前付きルーティングヘルパーを使っておくのが無難そうです。
Puppeteer実行時のタイムゾーン

## 概要

- Puppeteer実行時にevaluateの中で日付操作する時はタイムゾーンを個別に指定しないといけないではまった

## 実装

- 以下の例はページの中にリストがあって、日付の要素数目を取得しようとした適当なサンプル
    - `new Date()`しているところが実行環境のタイムゾーンが反映されずはまった
- `await page.emulateTimezone('Asia/Tokyo');` でタイムゾーンを指定することで解決

```js
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.emulateTimezone('Asia/Tokyo');
  await page.goto('https://example.com');

  const text = await page.evaluate(() => {
    const elements = document.querySelectorAll('.list');
    const date = new Date().getDate();
    const target = elements[date - 1];
    return target.text;
  });
  console.log(text);
  await browser.close();
```

## まとめ

- タイムゾーン問題はちゃんとテストしないとはまりますね・・・
MixJuice を使わずに Kidspod に絵文字込みのプログラムを投稿する

この記事は、[IchigoJam Advent Calendar 2020](https://qiita.com/advent-calendar/2020/ichigojam) の 10 日目です。

# きっかけ

IchigoJam のプログラムをブラウザ経由で Kidspod に投稿する際、自分は [MixJuiceでKidspod;と通信しよう！](http://kidspod.club/help/mixjuice.html)のページの以下のような記述

> （パソコンのブラウザでは絵文字を表示できないので、IchigoJamの場合は「(#数字)」、IchigoLatteの場合は「#」という形で表示されます。）

を読んで、「ああ、絵文字は `(#数字)` と入力すれば、うまく置き換えてくれるんだな」とか勝手に思い込んでいました。
![Kidspod での表示](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152579/11cf6c1c-3053-08a5-dafc-e59d71d1a158.jpeg)

そんなうまい話はあるハズもなく、実際 Mixjuice で取り込もうとすると、
![失敗例](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152579/769500ab-608b-2da1-4dfb-9503e70ea0fb.jpeg)

という具合に、入力したものがそのまま出てきてしまうわけですよ。(当たり前)
う～ん、本物の MixJuice を持っていない自分は、絵文字込みのプログラムをどうやって投稿すれば良いのか…

# で、どうするか

いろいろ調べてみたところ、実際のところは単純な HTTP のやり取りをしているだけだということが分かったので、curl コマンドを使える環境であれば、IchigoJam 投稿用の URL に対し、

```
curl kidspod.club/mj/nnnn:XXXXXX --data-binary @source.bin
```

という具合に HTTP リクエストを投げれば OK です。
`source.bin` はプログラムの生データのファイルで、カタカナや各種絵文字が仕様に基づいた 1 バイトコードになっている前提です。改行コードは LF で。
![成功例](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152579/bb4e8ebe-8391-5263-a82b-c1989fa0602f.jpeg)
うむ。イイ感じですな。

# 戯言

ん? そもそもプログラムに絵文字をそのまま入力するのは行儀が悪いって?
まぁ、そのへんはいろいろ思想や主義主張があるとは思うのですが、かつてのベーマガでは当たり前にやられていたように記憶しています。
当時、目からウロコだったのは、以下のような方法で、一回の PRINT 文で複数行のキャラクタを出力するというテクニック。

```
LOCATE X,Y:PRINT " A ↓←←←IOI"
```

このテクニックを使っているプログラムは、機種によってはリストを印刷すると空白で出力されるので、ベーマガの紙面に載せる際、編集者の方が手書きで矢印を書き加えてくださったりしていたんですよねぇ。
IchigoJam でも仕様的には同じことができるのですが、キーボードで `(#1C)` ~ `(#1F)` を入力することができない上に、「リストで出力する時は制御コードではなくキャラクタとして出力する」ということができないので、あまり実用的ではありません。

あと、この記事を書くにあたって、curl コマンドに `--data-binary` というオプションがあるのを知ることができたのが思わぬ収穫でした。
はじめは `-d` オプションを指定して、改行が自動的に取り除かれてしまうので、何故だ何故だと小一時間悩んでしまったのですが、もともとそういう仕様だったんですね…

参考: [curlのオプション--data, --data-binary, --data-raw, --data-urlencodeの違い](https://qiita.com/aosho235/items/d89bb027db0c5662d8c5)
Railsでdeviseを導入した際にストロングパラメータを設定する

## devise導入時にデフォルト以外のカラムをDBに追加する
deviseはあらかじめDBに保存できるカラムが決められている。
他のカラム情報をDBに保存する場合は、ストロングパラメーターの設定が別途必要になる。
その設定方法。

#### app/controllers/application_controller.rb
```ruby
class ApplicationController < ActionController::Base
  before_action :configure_permitted_parameters, if: :devise_controller?

  private
  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:name])　←　追加したいキー
  end
end
```
application_controllerにbefore_actionに記述しているため、全てのアクションが実行される前に、 before_action :configure_permitted_parameters, if: :devise_controller?が実行される。
deviseのコントローラーから呼び出された場合は、configure_permitted_parametersメソッドが呼ばれる。

deviseではデフォルトでdevise_parameter_sanitizerメソッドが使える。deviseでユーザー登録をする場合に「特定のカラムを許容する」メソッド。
例として「nameカラム」を新たに追加する場合はこのメソッドを使用し、「name」キーの内容の保存を許可している。
ChromeDevツールでJSPathをコピーする機能を伝えたい

## はじめに
「特定のページのこの部分を、jsで操作できる形で欲しい...」みたいなケースが時折あります。
そんな時はChromeDevツールでJSPathをコピーしてみましょう!



## 機能と使い方

### こんな機能
- 画面内のお好みの要素をjsで扱いやすい形で持ってくる機能です。
- `document.querySelector("取得したい要素のXPath")`として取得されます。


### 使い方
1. ChromeDevツールを開き、 Elements で取得したい要素を選ぶ
2. 右クリック > Copy > Copy JS path
3. 完了! 

<参考資料> Copyの画面キャプチャ
![copy_js_path_202012.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700537/f401eab0-b671-e67e-3a11-3577dadd9ada.png)


### 実際にやってみる
[IBJ.Incのアドベントカレンダー](https://qiita.com/advent-calendar/2020/ibj)のタイトルで試します。

#### コピーされたJSpath
```copied_JSpath.js
document.querySelector("#main > div.adventCalendarJumbotron > div > div > div > div > h1")
```

#### consoleに流してみる
コピーできていますね。
![jspath_console_20201209.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700537/27ddca5a-83df-fb9f-fbb7-5b6e65ea860f.png)

#### 加工してみる
querySelectorで取得しているので、簡単に加工できます。

##### テキスト部分のみ取得してみる
- コピーしたJSPathのinnerTextを持ってくればOKです。

```innerText.js
document.querySelector("#main > div.adventCalendarJumbotron > div > div > div > div > h1").innerText

//console出力
//"IBJ.Inc Advent Calendar 2020"
```

##### 選択箇所の色を変えてみる
- コピーしたJSPathにBackground-colorを設定してみます。

```Background-color.js
document.querySelector("#main > div.adventCalendarJumbotron > div > div > div > div > h1").style.backgroundColor = 'yellow'

```


## これが嬉しい
- 探すのが面倒な**「画面の特定の場所のパス」**を自由に拾ってくることができます
    - パスが分かれば、あとは目的に合わせて自由に加工するだけですね。
- 応用するとconsoleで動かす簡単なフィルターや集計ツールが作れます。
    - サイト画面上でしか取れない集計データなんかが使い所です。

## 終わりに
最後まで読んでいただきありがとうございました。
コピーしたJSPathを活かしてできる楽しい作業の具体例は、機会があればご紹介します。
SHA256でコンテンツを検証

SHA256で暗号化されたコンテンツ内容を検証する場合。前提（サービス側からKeyとSignatureが付与されている前提）

```csharp

/// <summary>
/// Return if signature matches
/// </summary>
/// <param name="signature"></param>
/// <param name="text"></param>
/// <param name="key"></param>
/// <returns></returns>
private bool IsSingatureOk(string signature, string text, string key)
{
   var textBytes = Encoding.UTF8.GetBytes(text);
   var keyBytes = Encoding.UTF8.GetBytes(key);

   using (HMACSHA256 hmac = new HMACSHA256(keyBytes))
   {
      var hash = hmac.ComputeHash(textBytes, 0, textBytes.Length);
      var hash64 = Convert.ToBase64String(hash);

      return signature == hash64;
   }
}
```
なんでエンジニアが人材不足なのか

めちゃくちゃ高度なことをしている
↓
にもかかわらず給料が普通
↓
バグや仕様漏れは在って当たり前
↓
にもかかわらず詰められる
↓
スケジュールを見直すべきなのに残業で対応しようとする
↓
馬鹿馬鹿しくなってやめる人が増える
↓
人が少なくなる
↓
教える人がいなくなる
↓
最初からできるやつがほしい
↓
採用のハードルがあがる
↓
さらに人が少なくなる