OmniAICreator/Qiita-1.07M huggingface dataset:
.envを扱いたいみなさん

なんとなく、みんな .env 好きだなーと思ったので .env について書いてみる。

# .env とは

下記のように KEY=VALUE の改行区切りで書かれた設定値を、環境変数として展開する様式美のこと。

```:.env
KEY1=VALUE1
KEY2=VALUE2
  :
```

色々な言語で `dotenv` というライブラリが存在する。さほど調べてないが大体ある。
どれも共通して `.env` ファイルを読み込んで、環境変数に設定するところまでをやってくれる。

# .env の功罪

人には、OS固有の設定や特定のフォーマットの設定ファイルに依存せず、ふわっとした環境変数をI/Fとして入力値を受け取りたい、という気持ちがある。
そこで `.env` を使うことで、設定を管理しつつ環境変数をI/Fにすることができる。

ただ、よくある間違った使い方として `dotenv` ライブラリに依存した処理を書いてしまうということがある。
クリーンアーキテクチャーおじさんは、「mainは詳細である」と言った。
mainで `dotenv` を使ってお膳立てをしたなら、あとの処理ではお膳からご飯を食べるべきである(？)。

例えば、node.jsで `dotenv` を使うなら、このように起動時に読み込む方法がある。

```javascript
$ node -r dotenv/config index.js
```

https://www.npmjs.com/package/dotenv#preload

あと本番環境では使わんだろ普通、と思ってる。

# 言語別の.env

## bash

bashでも `.env` ファイルを読みたいことがある。
`env 環境変数名=値 コマンド` を使って下記のようにできる。
もっとかっこいいやり方があるかも。

```bash
$ env $(cat .env | xargs) ./main.sh
```

## Ruby

元祖(？)なので当然 `dotenv` がある。
`dotenv-rails` という gem もあり、`.env.production` など置いておくと環境ごとに読み込んでくれそう。

https://pikawaka.com/rails/dotenv-rails

## JavaScript

さっき書いたようにこんな感じで使う。

```javascript
$ node -r dotenv/config index.js
```

https://www.npmjs.com/package/dotenv

## Go

あった。
だんだんbashで設定できるならいらない気がしてきた。

https://github.com/joho/godotenv

## Docker

気を取り直して Docker も見てみる。

`--env-file` オプションで指定することができる。

```bash
$ docker run $image --env-file .env
```

Docker Compose も `.env` に対応している。

```dockerfile
services:
  app:
    environment:
      - ENV_KEY1="ENV_VALUE1"   # 直接設定
      - ENV_KEY2                # 実行環境の環境変数をパススルー
    env_file:
      - .env                    # .envファイルから読み込み
    image:
      - "image:${ENV_KEY3}"     # 環境変数を早速使用
```

# まとめ

- 環境変数は再起動しないと読み込み直せなかったりするので気をつけて使ったほうがいい
- `dotenv` はうっかり依存しがちなので、使い方に気をつけたほうがいい
- 本番環境では、環境変数を渡す方法がいくらでもあるので `dotenv` いらないと思う
- そもそも、本番環境で `dotenv` 使わないための `dotenv` だったはず
【Vue】@submit.preventのpreventメソッドは何をしているか？（v-on:submit.prevent）

Vueのイベントで`@submit.prevent="イベント名"`のように、イベントの後ろに`preventメソッド`がついている場合がある。

このpreventメソッドがどういう処理をしていて、実際にどう使えばいいかの実例。

##.prevent
イベント修飾子とよび、v-onディレクティブを修飾し、`event.preventDefault`を呼び出す。

**イベントにデフォルトで設定されている処理を実行しない**。


```:使い方
@イベント名.prevent = "メソッド名"
```


###設定されている処理を実行しないとは？
例えばフォームのsubmitイベントの場合、クリックすると情報を送信した後にaction属性で指定したページリダイレクトする。.preventを使うと、このリダイレクト処理を実行しなくなる。（フォームページのまま）


＞[Vue公式 イベント修飾子](https://jp.vuejs.org/v2/guide/events.html#%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E4%BF%AE%E9%A3%BE%E5%AD%90)

##実例
送信後にgoogleトップにリダイレクトをかけるフォームを２つ用意。上は通常のsubmitイベントで、下は.preventを設定した場合。

![prevent.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/a16f68f1-16c9-b43d-85cc-369b666712e6.gif)

.preventがある場合は、送信後もリダイレクトせずに元もページのままになる。

```html:.html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <div>
    <p>@submit</p>
    <form @submit="sendAction" action="https://google.com">
      <input type="text"　v-model="message">
      <br>
      <input type="submit" value="送信">
    </form>
  </div>
  <hr>
  <div>
    <p>@submit.prevent</p>
    <form @submit.prevent="sendPrevent" action="https://google.com">
      <input type="text" v-model="messagePrevent">
      <br>
      <input type="submit" value="送信">
    </form>
  </div>
</div>

<script src="vue.js"></script>
```


```js:vue.js
const app = new Vue({
  el: "#app",
  data: {
    message: '',
    messagePrevent: ''
  },
  methods: {
    sendAction() {
      alert(`「${this.message}」を送信。リダイレクトします`)
    },
    sendPrevent() {
      alert(`「${this.messagePrevent}」を送信。リダイレクトしません`)
    }
  }
})
```


<br>
##submit以外のイベント
もちろん、submit以外のイベントでも使える。
.stop修飾子と組み合わせて使うことも可能。

```vue:
@submit.stop.prevent = "メソッド名"
@dragover.prevent.stop="onDragOver"
@dragleave.prevent.stop="onDragLeave"
@drop.prevent.stop="onDrop"
,
,
,
```

＞[Vue.jsで使えるイベントの一覧](https://qiita.com/yuta-38/items/17094a68a0369e126d41)
【個人開発】罪悪感駆動型開発のススメ！！！

<h2>罪悪感駆動型開発</h2>

小学生のころなど、夏休みの宿題などを休みの最後の日にやる方が多々いると思います。
その最終日は、締め切りに追い詰められている分、かなり集中して宿題ができますよね。

今回ご紹介する罪悪感駆動型開発モデルでは、そういった締め切りややらなければいけないと思う罪悪感を利用して、アプリケーション開発を進める手法になります。

特に、今時の小学生や中学生、高校生などの<b>若年層の開発者に取り入れられている開発モデル</b>であるため、モダンなアプリケーション開発をされる方にはかなり有用でしょう。

<h2>罪悪感駆動型開発の進め方</h2>

![syukudai_natsuyasumi_boy_aseru (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927880/8d73effa-d164-21ff-62a1-e7b7fe16452e.png)

罪悪感駆動型開発モデルは、以下の要領でシステムを開発していくアプリケーション開発手法になります。

1.何を作るか決める(その日、1日分のノルマを決める)
2.遊ぶ(魔剤をキメて、ゲームをする)
3.罪悪感を感じる
4.アプリを作り出す

この1から4のステップをデイリーで回していきます。
ポイントは、ノルマで決めたことを具体的に考えながらゲーム(遊び)をすることです。

その日のノルマをゲームをすると、漠然と「やらなきゃなー」と思うだけですが、ノルマをきちんと決めておくと「これをやらなきゃなー」と具体的に想像しながら罪悪感に浸れるので、いざ開発に取り組む際の集中力が高まります。

<b>チームで開発や業務的に開発で使うと</b>、より罪悪感を増幅でき集中力を増すことができます。

<h2>罪悪感駆動型開発のメリット</h2>
![videogame_boy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927880/d8488b61-8202-1c7e-38f7-4895fbe72718.png)

主なメリットとして、
・モチベーションに頼らないで開発できる
・その日のノルマをこなせる
・根を詰めすぎない
・プライベートの時間を確保しながらアプリケーション開発できる

罪悪感駆動型開発モデルの一番のメリットは、<b>モチベーションに依存せず、ノルマを着実にこなしてアプリケーションを開発できる</b>ことです。<br>
<b>やる気があるときにのみアプリケーションを開発しているようでは、いつまでたってもアプリケーションを作ることはできません。</b>

罪悪感をあえて受け入れることで、モチベーションとった脆弱なフレームワークを排除し、永遠にアプリケーション開発し続けるといったケースを防ぐことができます。


また、アプリケーション開発において、メンタル面の不調をきたすことが多々あると思います。

が、この罪悪感駆動型開発モデルを使って自分自身のプライベートな時間を先に確保することで、メンタル面の不調を防ぎ、チームメンバーの健康を第一に考えることができます。

なにより、罪悪感を抱えながらやるゲームの気持ちよさを覚えたら、もう元の生活には戻れません。

<h2>罪悪感駆動型開発のデメリット</h2>
![study_chienetsu_boy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927880/c8ff1f27-bd14-7e8a-fb9f-4333f02ef2e7.png)

主なデメリットとして、
・ノルマを達成できないことがある
・罪悪感が薄れると、効果がなくなる

罪悪感駆動型開発モデルの性質上、ノルマがどうしても終わらないことがあります。

とはいえ、逆に考えて追い込まれて集中して開発しても終わらないということは、その一日でだらだらと開発しても終わらなかったものだと思います。
そういったユースケースに対しては、ノルマの決め方が適正でなかったり、具体的なノルマ設定ができていなかったりなどのノルマの決め方に原因があると思われます。自分自身のスキルに対して無理のないノルマに減らしたりしましょう。

また、罪悪感が薄れることによって集中力が減退することもあります。
しかし、アプリケーション開発の上手な手の抜き方を考えることができるため、問題になりません。

<h2>まとめ</h2>

罪悪感駆動型開発モデルはアプリケーション開発にとどまらず様々な物事に取り組む際に使用可能です。

チームメンバーのマネジメントにも使える素晴らしい手法です。

日本のDXを進めていくうえでとても重要な位置を占める開発モデルになってくると思います。この開発手法を使って、アプリケーション開発がうまく進められることを祈っております。
Edgeには新・レガシーの2種類あることを知り、レガシーはサポート終了していることを知った

# 概要
EdgeにNew Edgeとレガシーの2種類あることを知った

### 新 Edge
- 2020年1月15日 リリース
- Chromium ベース
- [参考：　Chromium ベースの新しい Microsoft Edge をダウンロードする](https://support.microsoft.com/ja-jp/microsoft-edge/chromium-%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AE%E6%96%B0%E3%81%97%E3%81%84-microsoft-edge-%E3%82%92%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%99%E3%82%8B-0f4a3dd7-55df-60f5-739f-00010dba52cf)

### Edge レガシー（従来版）
- EdgeHTML ベース
- **2021年3月9日をもってデスクトップ アプリのサポートを終了**
- [参考：　IE 11 のサポートを終了する Microsoft 365 アプリとサービス。レガシ バージョンの Microsoft Edge のサポート終了 | Microsoft Docs](https://docs.microsoft.com/ja-jp/lifecycle/announcements/m365-ie11-microsoft-edge-legacy)


## 新、レガシーを共存させる方法について
以下、参考サイトでは2種類のedgeを共存させる方法について言及されていた
興味がある人は閲覧されたし

https://parashuto.com/rriver/tools/new-and-old-microsoft-edge-on-win10-home


# （ちなみに）調べた経緯
厳密には知っていたが、仕事でレガシーを基準にページを作成する必要があり、そこでレガシーのみの不具合があり種類について再認識する必要があった
iOSエンジニア見習いがUIKitのドキュメントを読んでみた。Part1

# はじめに

新卒で入社してから１年半、Xamarin.NativeとReact.jsを触っていました。
その後、部署異動をきっかけにiOS/Swiftのエンジニアに転向しました。
今はベテランのiOSエンジニアの方の元でがっつり勉強をしています。
アーキテクチャの設計やプロトコル、デリゲートといったプログラミングの基本的な部分はそこまでつまづかなかったのですが、UIKitの仕様がわかっていないせいでつまずくことが多いと最近気づきました。
そこで、重い腰を上げてUIKitのドキュメントを読むことにしました。
自分と同じ入門者の目線で感想などを載せていくので、今後同じ境遇の方にとって参考になればと思います。

# UIKit Framework

まずAppleのドキュメントなんですが、読む気にならないのはなぜなのでしょうか。。
ドキュメントを見てぱっと理解できたことがないということと、あとは玄人しか受け付けなさそうなデザインがそうさせているような気がしますね。。代わってVue.jsなんかは初心者が親近感を持って読みたくなるようなデザインをしているなあと思います。

余談はおいておいて、

[Technologies](https://developer.apple.com/documentation/technologies)のページをまず見てみました。UIKitのページのパンくずリストから戻るとこのページに誘導されます。かなり大量にありますね。。。
逆に言えばAppleの経済圏の中で技術的な問題解決をしようと思ったら意外と楽にできるのかもしれないということが見て取れます。

さて、[UIKitのページ](https://developer.apple.com/documentation/uikit)をざっと眺めてみます。

Overviewでさっそくでていますが、Window&Viewアーキテクチャーという概念があるようですね。
抽象度を高くするとWindowとViewだけで構成できるということが言いたいのでしょうか。

下記を提供しているようです。特筆することはなさそうです。

- マルチタッチなどの多様な入力方法
- ユーザーとシステムとアプリ間の相互作用を管理するためのメイン実行ループ
- アニメーション
- ドキュメント
- 描画と表示
- デバイス情報
- テキストの管理と表示
- 検索
- アクセシビリティ
- 拡張
- リソース管理

また、UIKitのクラスはメインスレッドで使うか、メインディスパッチキューで使う必要があります。
これのことですね。たびたび怒られるなあと思ったらドキュメントでは最初に警告してくれていました（笑）

```swift
DispatchQueue.main.async {
}
```

こうしてドキュメントを丁寧に読んでみると、意外と親切かもしれないと気づけました。
Google検索結果で出てくるドキュメントのページよりも、しっかりフレームワークのトップページから追っていくのがAppleのドキュメントの流れなのかもしれないですね。

次回は [About App Development with UIKit](https://developer.apple.com/documentation/uikit/about_app_development_with_uikit)を読みます。それではお楽しみに。
Safariの検索結果から，特定のドメインを除外する拡張機能を作った

作ったのでとりあえず忘れないうちに記事化．
気が向いたらチュートリアル的な記事を真面目に書く．

# TL;DR
Safariも含め，主要なブラウザは **Extensions API** を利用して拡張機能が作られる．

https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions

個人的なSafari拡張機能作成チュートリアルとして，SafariでGoogle検索するときに検索にヒットして欲しくないドメインのサイトを除外できる拡張機能を作成した．

1. コードを読んでわかる人向け（issue, プルリク大歓迎）  
  https://github.com/tkkrr/SearchExcluder
2. さっさと使いたい人向け（インストーラ配布）  
  https://github.com/tkkrr/SearchExcluder/releases/tag/v0.0.1

ChromeやFireFoxを使っている人は [uBlacklist](https://github.com/iorate/uBlacklist) という機能てんこ盛り拡張機能があるので，そちらを利用することをオススメします！

#はじめに
最近は謎に重く目的の情報までが遠い技術記事サイトも多い．そういったサイトを非表示にしてくれるとても便利な拡張機能がChromeとFireFoxには存在する（[uBlacklist](https://github.com/iorate/uBlacklist)）．機能てんこ盛りで素晴らしい．
しかし，Safari版は配信されているものの，公式サポートではないという点が気になった．
（現状，作成される予定はなさそう）

https://github.com/iorate/uBlacklist/issues/67

最近ではSafariの拡張機能と他ブラウザの拡張機能とで相互に変換できる機能が提供され始めたが，現時点にて変換機能が完全にサポートしているとは言いづらく，今後の発展に期待が募るばかりである．

https://developer.apple.com/documentation/safariservices/safari_web_extensions/converting_a_web_extension_for_safari

そんなこんなで，

- Safariだけで動けばOK
- Safariの拡張機能を作ってみたかったこと
- （あと，機能はミニマムで良いので，設定は現在の画面だけで完結したい）

-> 「そしたら自分で作ってみるか」という発想に至った．

# 作り方
そのうち書く

# 使い方
まずは拡張機能をインストールする．その後，Safari拡張機能の設定画面から`google.com`へのアクセスを許可する．
![スクリーンショット 2021-03-17 19.16.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245014/8d56a84d-9d7c-d217-5a6c-4591a1a165f5.png)

例えば，私のポートフォリオサイトを検索したとする．この検索結果から`ticktuck.tech`のドメインを検索から除外したいとする．
![スクリーンショット 2021-03-17 19.20.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245014/ec00f66e-d529-117c-aaa6-7a67ac7a0236.png)

拡張機能ボタンからポップアップ画面を表示し，検索結果から除外したいサイトのドメインを改行区切りで列挙する．
![スクリーンショット 2021-03-17 19.20.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245014/95624d5a-4384-ae08-886c-64f0cf0e008b.png)

再度検索を実行すると，`ticktuck.tech`をドメインにもつページが表示されていないことがわかる．
![スクリーンショット 2021-03-17 19.22.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245014/1ca6f665-808c-9430-a06f-2edb97175ca7.png)



#注意

- 現状はドメインの部分文字列でマッチして検索結果から除外（非表示に）するので，ここに`jp`とだけ書くとほとんどのページが表示されなくなる．
- 現状は`*`などのワイルドカードには対応していない
- というかGitHubで公開しているので，改善案が思いついた人はissue立てるなりプルリク立てるなりしてください！

https://github.com/tkkrr/SearchExcluder
【Vue】使えるイベント一覧。v-onディレクティブで指定できる主要イベント（JavaScriptと同じ）

Vue.jsでイベントを設定する時にどんなイベントが使えるのか気になったので主なイベントのまとめ。

##Vueのイベント

```
@イベント名="メソッド名" 
```

v-onディレクティブ（省略形は@）でイベントを指定して、対象のメソッドを実行する。



##イベントの種類
イベントを大きな分類で捉えるとわかりやすい。主要なイベントは大きく５つ。

1. mouse： マウス操作に伴うイベント
2. keyboard: キーボード操作に関するイベント
3. form: フォームに関するイベント
4. Touch: タッチ操作に関するイベント（スマホ・タブレットメイン）


##1. mouse： マウス操作に伴うイベント
イベントの中でも一番といっていいほどよく使う。マウスイベントは大きく、３つの処理に分けられる。

1. クリックイベント
2. マウスイベント
3. ドラッグイベント

| イベント名 | 内容 |
|:--|:--|
| click  | クリックイベント。よく使う  |
| dbclick  | ダブルクリック  |
| mousedown  | ボタンを押した時  |
| mouseup  | ボタンが離れた時  |
| mousemove  | ボタンが動いている時（マウスが少し動くたびに検出）  |
| mouseout  | マウスが対象の外に出た時  |
| dragstart  | ドラッグの開始  |
| drag  | ドラッグ中  |
| dragenter  | ドラッグ中に対象要素に入った時  |
| dragleave  | ドラッグ中に対象要素から出た時  |
| dragover  |  要素の上でドラッグしている時 |
| drop  | ドラッグ中のボタンを離した時  |
| dragend  | ドラッグ処理が終了した時  |


clickイベントは、mousedownとmouseupの組み合わせで作られている。


<br>
##2. keyboard: キーボード操作に関するイベント

| イベント名 | 内容 |
|:--|:--|
| keydown  |  キーボードをクリックした時 |
| keypress  | keydown処理の後に発火する  |
| keyup  | キーボードのクリックを離した時  |


<br>
##3. form: フォームに関するイベント

| イベント名 | 内容 |
|:--|:--|
| select  | テキストフィールドを選択した時（inputとtext areaも含む）  |
| change  | input, select, textarea要素において、ユーザーによる要素の値の変更が確定した時  |
| submit  | 送信ボタンがクリックされた時  |
| reset  | フォームがリセットされた時  |
| focus  | フォーカスした時（対象要素のみ）  |
| blur  | フォーカスを外した時（対象要素のみ）  |
| focusin  | フォーカスした時（子要素でも発火）  |
| focusout  | フォーカスを外した時（子要素でも発火）  |

selectとfocusの違いは、selectはユーザー自身が選択するのに対して、focusは自動で入力状態になる。

forcsの反対のblurは「ぼかし」という意味。focusとblurの使い方詳細は[こちら](https://www.sejuku.net/blog/41235)。

focusとfocusin、blurとfocusoutの違いは、対象要素のみで発火するか、それとも子要素でイベントが発生した場合も発火するかの差。


###バブリング
focusinやfocusoutのように、子要素でイベントが発火した時に、親のイベントも同時に発火することをバブリングという。

Vue.jsの場合、バブリング（親へのイベントの伝搬）を止めるメソッドとして、`.stop修飾子`が用意されている。

＞[stop修飾子の使い方。バブリング実例](https://qiita.com/yuta-38/items/e25abd34219e1e569496)


<br>
##4. Touch: タッチ操作に関するイベント（スマホ・タブレットメイン）
マウス操作のスマホやタブレットバージョン。指を置いた時の操作で発動するイベント。

| イベント名 | 内容 |
|:--|:--|
| touchstart  | 指が置かれた時  |
| touchend  | 指が離れた時  |
| touchmove  | 指が触れたまま動いている時  |
| touchenter  | 指をなぞって対象要素触れた時  |
| touchleave  | 指をなぞって対象要素から外れた時  |
| touchchancel  | 指がタッチデバイスの枠から外れた時（操作ミスなど）  |


<br>
##参考リンク
イベントの種類はかなり多いので、もっと詳しく知りたい場合は下記ご参照。

＞[DOMイベント一覧](https://en.wikipedia.org/wiki/DOM_events#Common_events)
【Vue】@click.stopのstopメソッドは何をしているか？（v-on:click.stop）

Vueのイベントで`@click.stop="イベント名"`のように、イベントの後ろに`stopメソッド`がついている場合がある。

このstopメソッドがどういう処理をしていて、実際にどう使えばいいかの実例。

##.stop
イベント修飾子とよび、v-onディレクティブを修飾し、`event.stopPropagation`を呼び出す。

**指定したイベントのみを実行する（親に伝搬しない）**。

![stop.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/58e2ac59-98b0-05f8-ce1d-526be3c38911.gif)

```
@イベント名.stop = "メソッド名"
```

clickイベントであれば`@click.stop = "メソッド名"`となる。


###親に伝搬しないとは？
子要素でイベントが発生した時に、親のイベントを発生させないこと。デフォルトでは、子要素でイベントが発生した時に、親要素にもイベントがあると、親のイベントも発生する。（専門用語でバブリングと呼ぶ）

.stopをつければ、クリックした対象のみのイベントを発火する。（親要素のイベントを発火しない）

逆に、stopを付けないと親のイベントも合わせて実行してしまうので注意が必要。親の上さらに要素がある場合はそのイベントも発火する。


＞[Vue公式 イベント修飾子](https://jp.vuejs.org/v2/guide/events.html#%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E4%BF%AE%E9%A3%BE%E5%AD%90)

##テストコード実例

```html:.html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <div>
    <p>.stopなし（親のイベントも発火）</p>
    <div @click="parentClick">
      <button @click="childClick">
        子のイベントを実行する
      </button>
    </div>
  </div>
  <hr>
  <div>
    <p>.stopあり（子のイベントのみ）</p>
    <div @click="parentClick">
      <button @click.stop="childClick">
        子のイベントを実行する
      </button>
    </div>
  </div>
</div>

<script src="vue.js"></script>
```


```js:vue.js
const app = new Vue({
  el: '#app',
  data: {
    text: ''
  },
  methods: {
    childClick() {
      alert('子供のイベントを発火しました')
    },
    parentClick() {
      alert('親のイベントを発火しました')
    }
  }
})
```

<br>
**▼ブラウザ**
![stop.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/58e2ac59-98b0-05f8-ce1d-526be3c38911.gif)


<br>
##click以外のイベント
もちろん、click以外のイベントでも同様の処理になる。

```
@click.stop = "メソッド名"
@change.stop = "メソッド名"
@mouseover.stop = "メソッド名"
@keyup.stop = "メソッド名"
,
,
,
```

＞[Vue.jsで使えるイベントの一覧](https://qiita.com/yuta-38/items/17094a68a0369e126d41)
docker build がエラーでビルドできない（Windows） 


#この記事は何で解決できたのかわからずに書いてます。すみません。そしてベストプラクティスであるかもわかりません

環境
Windows
Docker desktop

ドッカーを使ってみようと思い動画サイトなどを参考にdocker　pullやらを行っていたのですが、
docker build　.が通らず下記のエラー文が表示されてしまいました。

エラー文で検索すると皆さん時間のズレが原因とのことで解決されていたのですが、
私は解決されず、、、
うじうじトライ＆エラーを行っている際にubuntuのバージョン変えてみるかという思い付きが生まれ
ubuntu：20.04からubuntu：16.04に変えたら通りました。

↓修正前　Dockerfile

```Dockerfile
From ubuntu:20.04
RUN apt-get update && apt-get install -y \
  curl
```
↓ターミナルエラー文

```
 47.84 E: Release file for http://security.ubuntu.com/ubuntu/dists/focal-security/InRelease is not valid yet (invalid for another 1d 2h 43min 46s). Updates for this repository will not be applied.
#5 47.84 E: Release file for http://archive.ubuntu.com/ubuntu/dists/focal-updates/InRelease is not valid yet (invalid for another 1d 2h 44min 2s). Updates for this repository will not be applied.
#5 47.84 E: Release file for http://archive.ubuntu.com/ubuntu/dists/focal-backports/InRelease is not valid yet (invalid for another 1d 2h 44min 31s). Updates for this repository will not be applied.
#5 ERROR: executor failed running [/bin/sh -c apt-get update && apt-get install -y   curl]: exit code: 100
------
 > [2/2] RUN apt-get update && apt-get install -y   curl:
------
executor failed running [/bin/sh -c apt-get update && apt-get install -y   curl]: exit code: 100

------
 > [2/2] RUN apt-get update && apt-get install -y   curl   nginx:
------
executor failed running [/bin/sh -c apt-get update && apt-get install -y   curl   nginx]: exit code: 100

```


↓修正後　dockerfile

```Dockerfile
FROM ubuntu:16.04
RUN apt-get update && apt-get install -y \
  curl
```
【c++】コンストラクタがprotectedのクラスを無理やりnewする方法

#前提
コンストラクタがprotectedで定義されたクラスがあること

```cpp
class TestClass
{
protected:
	TestClass()
	{

	}
};
```
上記で定義したクラスはコンストラクタにアクセスできないため、newできない。

```cpp
void main()
{
	// 生成不可
	TestClass *test = new TestClass();
}
```
無理やりできる方法は果たしてあるのか。

#方法
①コンストラクタがpublicなクラスに派生させる。
②newさせるための関数を自作する。

##①コンストラクタがpublicなクラスに派生させる
```cpp
// 流用しやすいようにテンプレートクラスとして定義
template <class ProtectedConstructorClass>
class PublicConstructorClass : ProtectedConstructorClass
{
public:
	PublicConstructorClass()
	{
	}
};
```
##②newさせるための関数を自作する
```cpp
// 流用しやすいようにテンプレート関数として定義
template <class ProtectedConstructorClass>
ProtectedConstructorClass* create()
{
	return (ProtectedConstructorClass*) new PublicConstructorClass<ProtectedConstructorClass>;
}
```
##①②をするとnewと同等のことができる。
```cpp
void main()
{
	// 生成可能
	TestClass* test2 = create<TestClass>();
	delete test2;
}
```

#まとめ
newをすることを目的に書いていますので、こちらの内容に意味はあまりありません。
抜け道のようなものです。
テンプレートの使い方の勉強になれば大変うれしいです。
コンストラクタがprivateのクラスではできません。
RSpecによるテストコードは、単体テストから書く？ 結合テストから書く？

#結論
結合テストから記述した方が良い。

順番
1 結合テストコード
2 単体テストコード

#理由
効率的だからです。

結合テストコードの内容は、ユーザーがたどる一連の動作の流れを確認するものなので、結合テストで補えない部分を、単体テストで補うよう実施した方が、効率的だからです。

#忘れないで欲しいこと
効率的な記述は必要だけれども、テストコードを書く以下の理由を忘れず丁寧に、テスト実施することが重要です。

##①プロダクトのコードの質を高めるため

##②開発者の意図が概ね掴めるため
機能の想定している動きを元テストコードが書かれるため、仕様書代わりになる

##③エラーが起きればテストコードを実行して対応の確認が行えるため
エラーの再現がすぐできる

##④バージョンアップや脆弱性の対応がしやすくなるため
テストコードが明確に記述されていれば、バージョンアップがあってもどこをどう直せば良いのかわかりやすいです。

またコンピュータウィルスによる悪意のある攻撃に対しても、対策が取りやすいです。

##⑤動作検証の工数削減
テストコードがなければ、サービスのリリース後、サービスをリニューアルする度に、同じような画面を目視により確認作業が必要となります。

そこでテストコードがあれば動作確認は自動で行われ、目視の確認よりも工数削減ができます。

変更の多いプログラムであるほど、その効果は大きくなります。

などなど他にもあります。

#まとめ
テストコードをする本質を理解し、その効果を最大限発揮できるにはという思想のもと、省略できるところは省略するテストコードが望ましいと思います。

その方法の1つとして
結合テスト→単体テスト
の実施する順番は1つかと思います。

#この記事を書いた経緯
　現在私は就職活動中であり、自身の作成しているアプリを企業に提出した際、テストコードが書かれていることを企業の技術者から評価いただいたことが経緯としてあります。

　評価いただいた理由としては、サービスにおいて、品質を担保するテストコードは当たり前として実施することだが、就職活動をする未経験の就活生でテスト実施している方は少ないという現状があるからだそうです。

　就職活動は時間がなく大変だと思います。そんな時に効率的にテストを実施し、他の就活世の方と差別化することは就活を有利にできるかと思います。

　この記事が1人でも多くの就活生さんのためになったら良いなと思って記事を作成しました。

　頑張っていきましょ！

以上です
関数定義とアロー関数について

#Javascriptの関数定義とは

Javascriptの関数定義とは、Rubyでいうメソッドの部分になります。

以下を参考に考えてみましょう。

```ruby
def メソッド名
end
```
Rubyではメソッドを関数として定義することができます。

一方でJavaScriptの場合は下記のような記述方法をとります。

```javascript

function 関数名(引数) {
  // 処理
}
```
つまり、Javascriptでは、functionを使用して関数の定義をすることができます。
functionの後に関数名を記述し、( )内に引数を取ることができるのがJavaScriptの記法になります。

そして、{ }の中に実行したい処理を記述していきます。
Rubyを学習したことのある方は引数などのイメージを持つことができると思います。

それでは、実際にコードを見ながらJavaScriptの関数定義を見ていきましょう。

```javascript
function hello () {
console.log('こんにちは')
}

hello();
```
このように記述することで、コンソール上に"こんにちは"と表示されます。

#関数宣言と関数式の記述方法

上記で説明した記法は関数宣言となっており、この記述方法の他に関数式があります。

では、関数宣言と関数式を比べてみましょう。

・関数宣言

```javascript
function 関数名(引数) {
  // 処理
}
```
・関数式

```javascript
変数 = function(引数){
 //　処理
}
```
関数式では、関数宣言とは異なり、「function(引数){ }という無名関数を「変数」に代入して関数定義をする方法となります。

#関数宣言と関数式の違いについて理解する

それでは、関数宣言と関数式の違いについて理解しましょう。
両者の違いを理解しておくことで、JavaScriptでコードを記述するときに明確に分けて使用していくことができます。

まず、ここでJavaScriptの仕組みをしっておくことが必要になります。**JavaScriptでは、コードは上から下に読み込まれる**ため、コードを記述していくときに規則があります。

まず、関数式から見ていきましょう

```javascript
hello('jon');

const hello = function(name){
  console.log('hello' + name)
} 
```
このように記述した場合では、コンソール上で「hello jon」と表示はされずにエラーが起きてしまいます。
この理由は、関数式では上から関数定義が読み込まれるため、**一行目に関数定義**をする必要があります。

```javascript
const hello = function(name){
  console.log('hello' + name)
} 

hello('jon');
```

では関数宣言ではエラーは起こるのでしょうか？
**関数宣言ではコードが先に読み込まれるため**、下記のような記述方法で読み込まれます。

```javascript
hello('jon');

function hello(name){
  console.log('hello' + name)
}
```

関数宣言では、後から関数定義をしてもコンソール上ではエラーが起こらず出力されます。

#アロー関数で記述を省略する

アロー関数では、「function」を省略して記述することができます。記述を簡単にすることができるので、簡略化してコードの記述をしていきたい人は使用してみて下さい。

では、実際にコードを見てイメージを持ちましょう。

```javascript
//アロー関数なしの記述方法
const hello = function(name){
  console.log('hello' + name)
} 

hello('jon');

//アロー関数の記述方法
const hello = (name) => {
  console.log('hello' + name)
} 

hello('jon');

//処理が一行で完結する場合
const hello = (name) => console.log('hello' + name)

hello('jon');
```
アロー関数では上記のように、functionを省略する代わりに、**( ) =>**を使用して関数定義ができます。


関数定義はこのように記述していくことができます。これからJavaScriptを使用してコード記述するときは、関数定義が基本になるので関数宣言や関数式などを覚えて使用していきましょう。
RStudioサーバー（WSL2）からAWS上のDBに接続

# はじめに

Shiny を用いたウェブアプリを作成しており、AWS 上にある DB からデータを引っ張って可視化するため、DB との接続を試してみた。WSL2 (Ubuntu 20.04) 上の RStudioサーバー から AWS 上にある PostgreSQL に接続する。

# ODBC ドライバのインストール

[Setting up ODBC Drivers](https://db.rstudio.com/best-practices/drivers/) にしたがって、端末で以下コマンドを実行。今回は PostgreSQL であったが、その他 DB の場合はそれに合わせた DB ドライバをインストールする。（いつか使うかもと全ドライバを入れようとしたが、MySQL ドライバのみ入らなかった。2021年3月17日時点では、Ubuntu 20.04 に対応した MySQL ドライバはないらしい。）

```
# Install the unixODBC library
$ sudo apt-get install unixodbc unixodbc-dev --install-suggests

# PostgreSQL ODBC Drivers
$ sudo apt-get install odbc-postgresql
```

# RStudioサーバーに必要なパッケージのインストール

[Connect to a Database](https://db.rstudio.com/getting-started/connect-to-database) にしたがって、DBI と odbc を RStudio サーバーにインストールする。

```
install.packages("DBI")
install.packages("odbc")
```

上記パッケージインストール後、以下コマンドを実行することで先ほどインストールした ODBC ドライバの一覧が見られるので、必要なドライバが入っているか確認する。

```
library(odbc)
sort(unique(odbcListDrivers()[[1]]))

### 私の場合の出力
# [1] "ODBC Driver 17 for SQL Server" "PostgreSQL ANSI"              
# [3] "PostgreSQL Unicode"            "SQLite"                       
# [5] "SQLite3"
```

# DB との接続

以下コードで接続できた。最後に実行している dbListTables(conn=con) はテーブルのリストを返す関数、dbDisconnect(conn=con) は接続を切る関数である。

```
library(DBI)
con <- DBI::dbConnect(odbc::odbc(),
                      Driver   = "/usr/lib/x86_64-linux-gnu/odbc/psqlodbca.so",
                      Server   = "*****.amazonaws.com",
                      Database = "[Database name]",
                      UID      = "[User name]",
                      PWD      = "[password]",
                      ### 以下は実行時に入力を求める場合
                      # UID    = rstudioapi::askForPassword("Database user"),
                      # PWD    = rstudioapi::askForPassword("Database password"),
                      Port     = 5432)
dbListTables(conn = con)
dbDisconnect(conn = con)
```


# 備考

RPostgresSQL パッケージを用いても接続できたので、書いておく。

端末で以下コマンドを実行。

```
$ sudo apt-get install libpq-dev
```

RStudio サーバーにて以下コマンドを実行。（上記 libq-dev がないと、RPostgreSQL がインストールできない。）

```
install.packages("RPostgreSQL")
```

以下コードで接続ができた。

```
library(RPostgreSQL)
con <- dbConnect(drv      = PostgreSQL(),
                 host     = "*****.amazonaws.com",
                 dbname   = "[Database name]",
                 user     = "[User name]",
                 password = "[Password]",
                 port     = 5432)
dbListTables(conn = con)
dbDisconnect(conn = con)
```
Spring Security + Thymeleaf + Mithril.js で CSRF対策トークンを適用

[Spring Security + ThymeleafでAjaxリクエストにCSRF対策トークンを適用](https://tosi-tech.net/2018/07/ajax-with-csrf-token-of-spring-security/) を参考に Mithril.js の場合をメモしておく。

# トークンを meta タグへ埋め込み

ここは、上記のリンクと同様、Thymeleaf テンプレートに以下を追加する。

```html
<meta name="_csrf" th:content="${_csrf.token}"/>
<meta name="_csrf_header" th:content="${_csrf.headerName}"/>
```

HTML5 を使用したい場合は、`th:content` の代わりに `data-th-content` 属性を使用する。

```html
<meta name="_csrf" data-th-content="${_csrf.token}"/>
<meta name="_csrf_header" data-th-content="${_csrf.headerName}"/>
```

# リクエストヘッダにトークンをセット

[Mithril.js](https://mithril.js.org/) でリクエストを投げる例


```javascript
// リクエストヘッダの準備
var headers = {};
var token = document.querySelector("meta[name='_csrf']").getAttribute("content");
var header = document.querySelector("meta[name='_csrf_header']").getAttribute("content");
headers[header] = token;

// DELETE リクエスト
m.request({
	method: "DELETE",
	url: "/organizations/" + item.organizationId,
	withCredentials: true,
	headers: headers
}).then(function (result) {
	console.log(result);
})

```

# 参考文献

- [Spring Security + ThymeleafでAjaxリクエストにCSRF対策トークンを適用](https://tosi-tech.net/2018/07/ajax-with-csrf-token-of-spring-security/)
- [【javascript】オブジェクトにプロパティを追加する - Qiita](https://qiita.com/chihiro/items/eb8c7b2ceee5274a4a8f)
Kotlinでピクチャーインピクチャーを実装する

#ピクチャーインピクチャーをシンプルに実装する

まずはマニフェストに下記を追記。

```AndroidManifest.xml
<activity android:name=".MainActivity"
          android:supportsPictureInPicture="true">
```

クリックリスナー等に下記を記述。

```kotlin:MainActivity.kt
val builder = PictureInPictureParams.Builder()
// サイズの設定
builder.setAspectRatio(Rational(16, 9))
// PIPモードへ         
this@MainActivity.enterPictureInPictureMode(builder.build())
```
獣医師が必死にバイオインフォマティクスPythonによる実践レシピをwin10で動かす（その6）

# Biopythonで配列を扱う
ようやく時間が取れました
では前回取り出した犬のNGFの配列を基にあれこれいじってみる
まずは配列をNCBIから呼び出す

```
from Bio import Entrez, Seq, SeqIO
from Bio.Alphabet import IUPAC

Entrez.email = "put@your_email.here" 
hdl = Entrez.efetch(db='nucleotide', id=['XM_038690419'], rettype='fasta') 
seq = SeqIO.read(hdl, 'fasta')
```

のっけからここを調べていて、`Bio.Alphabet`パッケージが廃止されることを知る
本が発売されたのが2018年だけど翻訳されたのは最近だからわかるけども、日本語で勉強をする弊害をひしひしと感じる
もはやこの時点で暗澹たる気持ちなのだけど、気にせず突貫
とりあえず取った情報を確認

```
print("sequence_length: "+ str(len(seq)) + " bp")
seq
```

意外と小さいmRNAだなーと思う
とは言え非モデル動物の場合RNA-seqによって出てきたものから推定した情報が多いので、しょっちゅう覆されるのですが
とりあえず使いやすくするために情報を格納

```
w_hdl = open('example.fasta', 'w')
SeqIO.write([seq], w_hdl, 'fasta')
w_hdl.close()
```

繰り返し開け閉めしているとメモリが圧迫されるという基礎知識はあるけど、実際にそんな状態に遭遇したことは無い
誰か実感する方法を教えてプリーズ

```
recs = SeqIO.parse('example.fasta', 'fasta')
for rec in recs:
    seq = rec.seq
    print(rec.description)
    print(seq[:10])
    print(seq.alphabet)
```

これで情報は見やすくなった
しかし、この`SingleLetterAlphabet()`って情報はいるのだろうか？わからん

続いて、IUPACのATCGだけの塩基を表示させてみる

```
seq = Seq.Seq(str(seq), IUPAC.unambiguous_dna)
seq
```

基本的には同じ情報が表示されているだけだけど、ATGC以外が入っていると表示されないようになった
`IUPAC.unambiguous_dna`と`IUPAC.ambiguous_dna`を使って多型のある塩基を処理しようと思ったこともあったけど、
じつはprimer設計をするならば全てNに変換してしまった方が早く楽
`seq = str.maketrans("URYMKSWHBVD", "NNNNNNNNNNN")`
こんな感じに書くとIUPACコードを全部Nに変換可能

続いて転写したRNAを取得してみる

```
print((seq[:12], seq[-50:]))
rna = seq.transcribe()
rna
```

情報も`IUPACUnambiguousRNA()`となっているのでAUCGになっていると思われる
更にこれをタンパク質に変換してみる

```
prot = seq.translate()
prot
```

怒られた
`
C:\Users\anaconda3\envs\bioinfomatics\lib\site-packages\Bio\Seq.py:2309: BiopythonWarning: Partial codon, len(sequence) not a multiple of three. Explicitly trim the sequence or add trailing N before translation. This may become an error in future.
  BiopythonWarning)`
3の倍数じゃねーよ、ちゃんとORFだけにしたのかと怒られていて、開始コドンを考えていなかったことに思い当たる
というわけで開始コドンの情報を取りに行く

```
recs = list(SeqIO.parse(hdl, 'gb'))
for feature in rec.features:
    if feature.type == 'CDS':
        print("CDS_Location: " + str(feature.location))
```

`CDS_Location: [220:946](+)`なので、これを組み込んで再度挑戦

```
cds_seq = seq[220:946]
prot = cds_seq.translate()
prot
```

無事に怒られずに終始コドンまで到達！
今更思ったけど、この場合のCDSの位置は-1とかしなくても良いみたい
これがBiopythonを使うメリットなのかもと思い、今日を終える
[Vue.js]なんとなくVueを触っていた人が、改めてVueに出会ってみた

所属している会社での Vue.js についての勉強会に参加しました。そのふり返り件まとめ記事です。

私自身、今の現場で Vue を触りはじめましたが、他人のコードを参考にしながら、とにかく動かすコードをつくりながら学んできたため、中々基本を学べていませんでした。勉強会を通じて、他の人と議論しながら改めて、基本を学んでみたら、知られざる機能が潜んでいました。

　参考図書：Vue.js　開発入門 翔泳社

#改めて Vue に出会って知ったちょっと便利な機能
そんな事も知らないのですか？と言われそうですが、基礎をすっ飛ばした自分が改めて基礎を見て知ったいいなという機能です。

##属性の制御を boolean で制御
```vuejs
<option :selected="value === initialValue">
```
→上記が値と初期値一致した場合に、selectedを付与する。
　知らなかったので、むりくりやっていました。
　そういえばどこかで読んだ気も・・・・・。

##v-model修飾子
```vuejs
<input v-model.number="key">
```
→入力を自動的に数値に変換できる
　いちいち Number() でキャストしてしまった。。。

##キー修飾子
```vuejs
<input @keyup.enter="pushEnter">
```
→スマホアプリの開発が主体だったため、使うことは有りませんでしたが、入力フォーム等で活躍しそうですね


##v-show と v-ifの 違い
v-if で表示制御をした場合、要素そのものが消えるが、 v-show では CSS で非表示にしているだけ。
いわゆるトグル的な使い方（表示前提で要素を隠す）をするには、 v-show の方がレンダリングコストが低そう(未検証)

##transition
Vue では予めクラスが用意されており、そのクラスに CSS を指定することで、アニメーションを制御することができる。アプリケーション全体で統一感を保つには有用ですね。

#####Enter/Leave とトランジション一覧(Vue2の公式ドキュメント)
https://jp.vuejs.org/v2/guide/transitions.html

##props で function を渡せる
考えてみれば当たり前なのですが、 こういう使い方もできると。$emit するより、 props で渡されたメソッドを使う方が、良い場面もあるのかも？
($emit だと、親コンポーネント側で発火するイベントがわかるという利点？もあるので、なんともですが）

#その他、よくある誤解
書籍を読んでみて改めて誤解しそう（自分も勘違いした）ポイントです。
いわゆる初心者あるあるです。

##watchの使い所
watch の説明を見ると、値の変更を検知するときにwatchを使いたくなります。
ただ、実際に watch が必要な場面というのは少なく、 data に値を再セットすることで、 computed を通じるなどして、画面描写を更新することができます。（だからこそのリアクティブ）

値の変更が画面描写に反映されないと思うと、つい watch を使いがちですが、そもそもwatchを入れる前に検討すること（ライフサイクルのタイミングや、深いオブジェクトなど）があるんじゃないの？ということです。

##View の中にも MVC の意識を
Vue はフロントエンドの技術で、やろうと思えば色々できてしまいますが、だからこそサーバーサイドの知見を使っていかないとカオスになります。(表現として正しいかはさておき、)カプセル化をしっかりして、コントローラライクなメソッドを用意していくと、多少はクリーンなコードになるんじゃないかなと。ひとつのコンポーネントの中に同じAPIをたたくメソッドがいくつもあると、中々密で手をいれにくくなる・・・・。

##不定な状態をいかに定めていくか
フラグ管理とかをやっていると、何かしらの原因で状態がズレてしまうことがある（そういうコードが悪いのですが）。初期化というか状態をしっかり定めてやっていくことが大事です。下記のようなメソッドで表示を切り替えてたりするとうまく行かないことも、、、、

```typescript
toggleFlg(flg: boolean): boolean{ return !flg }
```
【Rails6】環境変数をjsファイルで読み込む方法

# 環境
macOS: Big Sur Ver11.2.2
Rails: 6.0.0
Ruby: 2.6.5
Webpacker 4.3.0

# やりたいこと
Google MapのAPIを使ってRailsアプリに地図を表示したところまでは良かったが、コンソールで発行したAPIキーを環境変数に入れ忘れていた。
そこで、今回は *google_map.js* というJavaScriptのファイル内で環境変数を設定することにしたい。

**※ググったところ、gemを入れて *.env* というファイルを作ってそこに環境変数を記述するという方法もあるみたい。興味があればググってみてください。**


# 手順
#### ①ターミナルで環境変数を設定
```terminal
% vim ~/.zshrc
```

vimの操作画面が出たら「i」を押すと編集モードになる（画面下部に「insert」と表示が出る）
編集モードになったら以下のように環境変数（名前は自由）を設定する。

```terminal
export GOOGLE_MAPS_API_KEY='Googleコンソールで発行したAPIキー'
```

記述したら、escキーを押すと編集モードから離脱するので、離脱を確認したら「:wq」を打って保存して終了しよう。
通常のターミナルの画面に戻ったら、

```terminal
% source ~/.zshrc
```

と入力し、環境変数を実行。

#### ②Railsファイルの設定
以下のファイルを新しく生成し、中身を記述します。
[ ]内の変数がさっき設定した環境変数名と同名になっています。

```ruby:config/initializers/webpacker.rb
Webpacker::Compiler.env["GOOGLE_MAPS_API_KEY"] = ENV["GOOGLE_MAPS_API_KEY"]
```

最後に、JavaScriptのファイルに実際に環境変数を読み込む記述をします(3行目です)。
変数展開してURLの中に環境変数を入れているのでバッククオートでURLを囲っているので注意！

```javascript
// Create the script tag, set the appropriate attributes
const script = document.createElement('script');
script.src = `https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_MAPS_API_KEY}&callback=initMap`;
script.async = true;

// Append the 'script' element to 'head'
document.head.appendChild(script);

// Attach your callback function to the `window` object
window.initMap = function () {
  // マップの表示領域を取得
  const target = document.getElementById('map');
  // ジオコーディングのインスタンスの生成
  const geocoder = new google.maps.Geocoder();
  // 店舗詳細ページのテキストから住所を取得
  const address = document.getElementById('address').innerText;

  // 引数に取得した住所と関数を渡し、Google MapsAPIジオコーディングサービスにアクセス
  // 関数内のif文は返ってきたレスポンスに対する処理
  geocoder.geocode({ address: address }, function (results, status) {
    if (results[0] && status === "OK") {
      // 地図の作成
      const map = new google.maps.Map(target, {
        center: results[0].geometry.location,
        zoom: 16,
      })

      // 地図内にマーカーの設置
      const marker = new google.maps.Marker({
        position: results[0].geometry.location,
        map: map,
      });
    } else {
      alert("失敗しました： " + status);
    }
  });
};

```

これで生の環境変数を書いたときと同様、きちんとGoogle Mapが表示されているはず！
お疲れさまでした！
AngularアプリをIEで開いた際にアラートを出す

# はじめに
この記事では、Angularを使って開発したWebアプリをIEにて開いた際にIE非対応の旨を表示するアラートを、設定の変更を行わずに表示する実装について記載しています。
Angularアプリじゃなくても同じようなことで困ってたら使えるかも。

## 困っていたこと
Angularにて開発していたアプリをIEで開いた際、画面が真っ白でなにも表示されないためアラートを出そうということになりました。
調べたところAngularはデフォルトだとIEには対応しておらず、完全に対応をしようとするとtsconfig等の設定等を変えなければならないとのことで、影響が大きそうな変更は避けたい…ということからなんとかアラートだけ出す方法はないものかと試行錯誤した、という経緯です。


## 環境
Angular CLI: 11.2.4
Node: 14.16.0
Angular: 11.2.5
ブラウザ: Internet Explorer 11

# 実装方法
`src/index.html`のbodyに以下のアラート表示メソッドを埋め込みます。それだけ。

```html:index.html
<body>
  <script type="text/javascript">
    "use strict";

    var userAgent = window.navigator.userAgent.toUpperCase();
    if (userAgent.indexOf('MSIE') !== -1 || userAgent.indexOf('TRIDENT') !== -1){
      alert("こちらのアプリはIEに対応していません。ブラウザを変更の上ご利用ください。");
    }
  </script>
  <app-root></app-root>
</body>
```

上の変更を保存して再度buildすれば、画像のようにIEを開いた際にアラートが表示されるようになるはずです。

![スクリーンショット (125).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/411784/90061b42-9b1c-7fc8-ced2-f1a3eb87e1ef.png)

## 解説
こちらのコードは開いたブラウザのUserAgentからIEかそうでないかを判別し、判別の結果IEであった場合にのみアラートを出す、といった内容になっています。

まず、下記にてアプリを開いているブラウザのUserAgentを大文字に変換した上で変数`userAgent`に入れています。

```javascript
var userAgent = window.navigator.userAgent.toUpperCase();
```

続いて、以下の部分で利用ブラウザがIEかそうでないかを判別しています。
IE10以前と以後でUserAgentが変更されているらしく、どちらにも対応できるよう二つの文字列にマッチすればアラートを出すようになっています。
もしIE以外のブラウザにも対応させたい場合は、対象のブラウザを判別できる文字列を`userAgent.indexOf('xxx')`に入れればOKです。
[こちらの記事](https://qiita.com/nightyknite/items/b2590a69f2e0135756dc#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E5%88%A5%E3%81%AEuseragent)で各ブラウザのUserAgentについてまとめてくださっています。


```javascript
    if (userAgent.indexOf('MSIE') !== -1 || userAgent.indexOf('TRIDENT') !== -1){
      ...
    }
```

最後にアラートを出すコードをif文の中に入れます。

```javascript
 alert("こちらのアプリはIEに対応していません。ブラウザを変更の上ご利用ください。");
```

もちろんアラート表示以外のメソッドも入れられますが、IE非対応のメソッド・記法でないかは注意が必要です。
[こちらの記事](https://qiita.com/siruku6/items/3465fd6e0588ee35cc78#es6%E3%81%AE%E8%A8%98%E6%B3%95%E3%82%92es5%E3%81%A7%E6%9B%B8%E3%81%8D%E7%9B%B4%E3%81%99)でIE非対応のメソッド・記法をまとめてくださっています。

# さいごに
今回自分は試行錯誤の上index.htmlにjavascriptを埋め込む手段に出ましたが、この書き方は正直あまりきれいではないかな～と思うところもあります（動くことが最優先ではありますが...）。
あくまで一例ということで、もしきれいに書ける他の方法がある場合は教えていただけると嬉しいです。
ところで、IEはいつサービス終了するんでしょうね。

# 参考
AngularのIE対応について
https://mslgt.hatenablog.com/entry/2019/12/01/000625

JavaScriptでInternet Explorer（IE）のブラウザ判定をする方法
https://www.terakoya.work/javascript-ie-browser-check/
mapboxのraster tileを表示する際、zoom、x、y以外のパラメータがある場合

# Raster Tile

https://docs.mapbox.com/mapbox-gl-js/example/map-tiles/

> 注：このMapbox提供のサンプルはstyleにベタ書きなのであんまり良くない

```ts:普通は標準的な地図タイルにオーバーレイすると思う

const map = new mapboxgl.Map({
  container: "map",
  style: "mapbox://styles/mapbox/streets-v9",
  zoom: 11,
})

map.on("load", () => {
  const sourceId = "sourceId"
  const layerId = "layerId"

  // TileJSON Spec
  // https://github.com/mapbox/tilejson-spec/tree/master/2.2.0
  // tilesは最低１つ必要で、複数あった場合はどれを使われても同じデータを返す必要がある（ロードバランス的な）
  // z x y以外のパラメータの指定はできないっぽい
  map.addSource(sourceId, {
    type: "raster",
    tiles: ["https://localhost:3000/{z}/{x}/{y}.png"],
    tileSize: 256,
  })

  map.addLayer({
    id: layerId,
    type: "raster",
    source: sourceId,
    layout: {
      visibility: "visible",
    },
  })

  map.setPaintProperty(layerId, "raster-opacity", 0.5)
})
```

# 問題

`tiles: ["https://localhost:3000/{z}/{x}/{y}.png"]`

ここがzoom level、 x、 yしか渡せず、仮に日付毎とかのデータを表示したかったら如何ともし難い。


# 解決方法その1

LayerとSourceを削除して、新たに別のtilesをSourceとするLayerを追加する。ユーザー個別の情報を元にするとか、事前にパラメーターの予測ができないような状況ではこれ以外やりようがないかも。

```ts
const sourceId = "sourceId"
const layerId = "layerId"

// Layerも消さないとSourceを掴んだままになるので、Sourceが消えない
map.removeLayer(layerId)
map.removeSource(sourceId)
map.addSource(sourceId, {
  type: "raster",
  tiles: ["あらたなURL"],
  tileSize: 256,
})

map.addLayer({
  id: layerId,
  type: "raster",
  source: sourceId,
  layout: {
    visibility: "visible",
  },
})
map.setPaintProperty(layerId, "raster-opacity", 0.5)
```

# 解決方法2

事前にSourceとLayerのペアをあるだけ追加しておく。その上で、使用するIDにはindexを付けておくとかする。さらにLayerは`visibility: none`にしておく。

必要に応じて必要なLayerだけを切り替えるように表示・非表示してやる。

```ts
const index = 1
const layerId = `layerId-${index}`
const visibility = map.getLayoutProperty(layerId, "visibility")
map.setLayoutProperty(
  layerId,
  "visibility",
  visibility == "visible" ? "none" : "visible"
)
```

# Source（表示したLayerが引っ張ってくるSource）のロード検知

```ts
map.on("sourcedata", (event) => {
  console.log("event.isSourceLoaded:", event.isSourceLoaded)
  console.log("event.sourceId:", event.sourceId)
})
```
AWS Lightsail でサクッとWordPress環境構築(3) 〜お問い合わせフォーム編〜

### はじめに
こちらの記事の続きになります。
[AWS Lightsail でサクッとWordPress環境構築(2) 〜独自ドメイン 編〜](https://qiita.com/fgem28/items/be51fcc95d6503e1102e)

Amazon SES を使用したEメールの送信を出来るようにします。
ホームページのお問い合わせフォームで送信ボタンを押すと、SESの送信メールサーバーを使ってメール送信、自分のメールアドレスに問い合わせ内容が来る、という流れです。

SESの送信用メールサーバーSMTPを使いますが、SESには、Eメールを受信するためのPOPサーバーやIMAPサーバーは含まれていません。つまり、Microsoft Outlook などのEメールクライアントを使用してEメールを受信することはできないので、ご注意ください。

つまり、普通に使うメールアドレスとしては使いにくいということです。
メールを受信することは一応できます。ただ受信したメールをS3に保存して、ダウンロードしてファイル形式を変えてメールを読む、などと非常に面倒です。
私はこれを知らずに受信にも使おうとしてしまい、ドメイン登録からやり直しました。

### Amazon SESでメール用のDNSレコードを作成
Domainから、Verify a New Domain を選択。作成したドメインと、[Generate DKIM Settings] にチェックを入れます。

表示されたTXTレコード、メールエクスチェンジャ(MX)レコード、(CNAME)レコードをLightsailのDNSゾーンに追加するので、Lightsail画面に入ります。

### Lightsailで作成したレコードを追加
それぞれのレコードを追加します。
CNAMEの場合は、Lightsailのサブドメインに、SESのNameのドメイン部分より前を、Lightsailのマップ先に、SESのValueを入れます。
MXレコードとAレコードはサブドメインに「@」を入力。MXレコードはSESのValueが「１０ inbount~」となっていたら、Lightsaillの優先度を10にして、マップ先に「inbount~」を入れます。
SESのレコードの画面は閉じてOKです。

Route53に既にNSレコードがある場合、編集してLightsailに記載されているNSレコードに書き換えます。

ドメインを取得したサイトのネームサーバー設定で、LightsailのNSレコードをコピペで設定します。

SESのドメイン画面を見て、ステータス3つが緑色になるまで待ちます。
DKIMだけpending migrationから変わるのに10分ぐらいかかりましたが、もっとかかる可能性もあります。


``DKIMの設定をすることで、送信元メールアドレスに[amazonses.com経由]と表示されないようになります。格好もつくし、迷惑メールフォルダに入れられづらくなると思います。``

### 送信先メールアドレス登録
SESのmail addressから、Verify a New Mail Addressで、送信先にしたいメールアドレスを登録します。
ホームページにお問い合わせフォームを作るなら、お問い合わせの送信先にしたいメールアドレスがいいでしょう。
メールアドレスを登録すると、メールが届くので、長いURLをクリックして認証します。

### WordPressのお問い合わせフォームを使えるようにする
Contact Form 7とWP MAIL SMTPを使ってお問い合わせフォームは作る想定です。

画面のスクショが少し古いですが、WP MAIL SMTPの設定はこれが詳しいです。[Lightsail公式](https://lightsail.aws.amazon.com/ls/docs/ja_jp/articles/amazon-lightsail-enabling-email-on-wordpress#enabling-email-on-wordpress-configure-the-wp-mail-smtp-plugin)
SMTPホストは、SESのSMTP Settingより、「Server Name」です。
SMTPユーザーとパスワードは、SESのSMTP Settingより、Create My SMTP Credentialsをクリックして進めば作成されます。

この中にテストメールを送るステップがありますが、ここをクリアしてもお問い合わせフォームが機能しない場合は、Contact Form 7の設定のメールタブを見直すと解決するかもしれません。

特に「送信先」と「送信元」です。「送信先」にはSESで認証したメールアドレスを、送信元はなんでも大丈夫ですが、ドメインはSESで登録したものをつけます。
Kafka offset 確認

# Kafka 0.9未満
zookeeperにて管理

```
/consumers/[Consumerグループ]/offsets/[トピック]/[BrokerId]-[パーティション番号]
```

# Kafka 0.9以上
kafka側で管理するようになっている

```
echo "exclude.internal.topics=false" > /tmp/consumer.config
kafka-console-consumer --consumer.config /tmp/consumer.config --topic __consumer_offsets --bootstrap-server localhost:55001 --formatter "kafka.coordinator.group.GroupMetadataManager\$OffsetsMessageFormatter"
```

# reference
https://elang2.github.io/myblog/posts/2017-09-20-Kafak-And-Zookeeper-Offsets.html
【C＃】fizzbuzz問題を解いてみた

#fizzbuzz問題とは？
入力した値まで、1から順に3の倍数のときはfizz、5の倍数のときはbuzz、3と5の倍数のときはfizzbuzzと表示するもの。

#環境
Visual Stadio2019



#ソースコード
```C#
using System;

namespace fizzbuzz
{
    class Program
    {
        static void Main(string[] args)
        {
            int count = 0;
            Console.WriteLine("数字を入力してください");
            int max = int.Parse(Console.ReadLine());
            while (count < max)
            {
                count++;
                if (count % 3 == 0 && count % 5 == 0)
                {
                    Console.WriteLine("fizzbuzz");
                }
                else if (count % 3 == 0)
                {
                    Console.WriteLine("fizz");
                }
                else if (count % 5 == 0)
                {
                    Console.WriteLine("buzz");
                }
                else
                {
                    Console.WriteLine(count);
                }
            }
        }
    }
}
```

#ポイント
ポイントというほどでもないですが、最初のif文「3の倍数かつ5の倍数」ではなく、「15の倍数」でもよかったですね


#最後に
Qiitaの記事を書く練習もかねて投稿しました。
次はオブジェクト指向で勉強したことについても書いてみようと思います。
Makeのhelpコマンドでターゲットの一覧を出す。

Makeファイルを便利なタスクランナーとして使ってると、ターゲットがいっぱい増えてきて、何がなんだかわからなくなっちゃうので、簡単なhelpコマンドを作ると良い。


```:Makefile
#: ヘルプコマンド
help:
	@grep -A1 -E "^#:" Makefile \
	| grep -v -- -- \
	| sed 'N;s/\n/###/' \
	| sed -n 's/^#: \(.*\)###\(.*\):.*/\2###\1/p' \
	| column -t  -s '###'

#: ビルド
build:
    buid command
```
Makefileに↑こんな感じで、helpコマンドを実装。
ターゲットの１行上に#: に続けてコメントを書いておくと、

```
$ make help
help                  ヘルプコマンド
build                 ビルド
```
こんなかんじで、一覧を出力してくれる。
metasploitable の mutillidaeのTable ‘metasploit.tableName’ doesn’t existエラーの解決

# 概要
metasploitableのmutillidaeページが、以下のエラーメッセージが表示され、正常に機能しない問題の解決。

```
Table ‘metasploit.tableName’ doesn’t exist
```

# 解決方法
configファイルを編集する。

```bash
sudo nano /var/www/mutillidae/config.inc
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/608348/7c40acf4-2a93-e801-8e14-1d59c805b044.png)

$dbnameが初期ではmetasploitになっているが、これをowasp10に修正する。
通常の関数とアロー関数のthisの違い

通常の関数とアロー関数のthisの違いについて調べてみたが、どの説明を読んでも意味が分からなかった。仕方ないのでサンプルソースを動かしながら自己流で理解してみた。正確な理解ではないと思うが、自分なりの理解をメモとして残しておく。（参考にしない方がいいです。）

通常の関数・・・関数を保持するオブジェクトがthisになる
アロー関数・・・関数を呼び出したオブジェクトがthisになる

```javascript:sample.js
var outer = {
    greeting : 'outer!',
    do : function() {
        var inner = {
            greeting : 'inner!',
            sayHello : function (){
                console.log(this.greeting); // ※1 通常の関数はここでthisが決まる
            },
            sayHelloAllow : () => {
                console.log(this.greeting);
            }
        }
        inner.sayHello();      // inner!
        inner.sayHelloAllow(); // outer! // ※2 アロー関数はここでthisが決まる
    }
}

outer.do();
```

※1 ・・・sayHello関数は通常の関数なので、それを保持するオブジェクト(inner)がthisになる
※2 ・・・sayHelloAllow関数はアロー関数なので、それを呼び出したオブジェクト(outer)がthisになる
github err

MacOS M1 Github構築で、
ちょこちょこ詰まったとこを中心にメモります。

## 実現すること
- Mac　Visualstudioでレポジトリ作成しソースコミットできること。


## 動作環境について

- macOS Big Sur 
- Visualstudio for Mac

１．先人のちからで、実施する。
　初心者がGithubをはじめてみる【Mac】 (´･ω･`)
　https://qiita.com/Shobon/items/8c6cda5a2bcbf2525c6e
２．エラーが出たためメールと、usernameを入力。
３．お終い。


```terminal:terminal
git push origin master
↓エラーメッセージ
error: src refspec master does not match any
error: failed to push some refs to 'https://github.com/hide6974/new.git'
```

原因は途中コマンドで聞かれたメールとusernameを登録していないため

```terminal:terminal
git commit -m "first" 

*** Please tell me who you are.

Run

  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.
```
解消。

### 以上（執筆15分）
探索的データ解析（EDA）のためのsweetvizを試してみた

* 製造業出身のデータサイエンティストがお送りする記事
* 今回は、探索的データ解析（EDA）の一つであるsweetvizを試してみた。

##はじめに
探索的データ解析（EDA：Exploratory data analysis）は、機械学習などのデータ分析業務を実施する際に、データの理解を目的として実施する作業を指します。
つまり、現場の問題を解決する際に、どのようなデータセットを扱っているのか、どのような状況にあるのかを、しっかりと理解するのが重要であり、探索的データ解析は上記を目的とした作業です。
過去には下記ライブラリーを使用した方法を整理しておりますので、参考にしてください。
* [Pandas-profiling](https://qiita.com/DS27/items/033193b452a17739b952)


##sweetviz実行例
今回は、探索的データ解析ツールの一つである「sweetviz」を使ってみようと思います。

今回もUCI Machine Learning Repositoryで公開されているボストン住宅の価格データを用いてPandas-profilingを実装します。

pythonのコードは下記の通りです。

```php
# 必要なライブラリーのインポート
import pandas as pd
import numpy as np
import sweetviz as sv

from sklearn.datasets import load_boston
from sklearn.model_selection import train_test_split
```

次にデータを読み込みます。

```php
# データセットの読込み
boston = load_boston()

# データフレームの作成
# 説明変数の格納
df = pd.DataFrame(boston.data, columns = boston.feature_names)

# 目的変数の追加
df['MEDV'] = boston.target

# データの中身を確認
df.head()
```

![スクリーンショット 2020-11-09 20.33.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/743453/2ffa1a41-98dd-2798-1f6d-8f3385bf5f75.png)

今回は、学習データと評価データを分けておくと効率的に分析できますので、分けます。

```php
# 学習データと評価データを作成
x_train, x_test, y_train, y_test = train_test_split(df.iloc[:, 0:13], df.iloc[:, 13],
                                                    test_size=0.2, random_state=1)

df_train = pd.concat([x_train, y_train], axis=1)
df_test = pd.concat([x_test, y_test], axis=1)
```

次にsweetvizを実装します。

```php
my_report = sv.compare([df_train, "Train"], [df_test, "Test"], "MEDV")
 
#直接ブラウザに表示
my_report.show_html("sweetviz_report_2col.html")
```

これで実装は終了です。
後は、出力されたhtmlファイルを使って分析をしていきます。

##sweetvizで分析できる内容

最初に表示される全体像を確認します。

![スクリーンショット 2021-03-17 17.34.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/743453/71c2cdf9-f5f0-0838-6d63-7dedf787b306.png)

相当細部までデータの概要を把握できそうです。
全体の概要は下記画面で確認できます。

![スクリーンショット 2021-03-17 17.35.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/743453/7cfbfa57-16f3-f4c0-ab34-98352d83b4ff.png)

確認できる内容は下記の通りとなっております。
* 行数
* 重複有無
* メモリ使用量
* 特徴量の数
* カテゴリ列の数
* 数値列の数
* テキスト列の数

これだけの情報を学習データと評価データでぱっと分かるように表示されているのは便利ですね。
また、「ASSOCIATIONS」のボタンを押すことで相関係数も確認できます。

![スクリーンショット 2021-03-17 17.37.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/743453/f5075f09-64f8-96af-5ad5-688f9f3ef729.png)

各特徴量の概要は下段に整理されております。

![スクリーンショット 2021-03-17 17.38.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/743453/6d6a18c5-247a-91b1-8a47-2127e928f260.png)

全て、学習データと評価データを対比して見れるのが便利ですね。
各カラムの詳細は対象のカラムをクリックすると更に細かく見れます。

![スクリーンショット 2021-03-17 17.40.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/743453/5a6ec795-61e9-ee2b-97e9-4e96c9da7491.png)

##さいごに
最後まで読んで頂き、ありがとうございました。
前回のPandas-profilingと言い、sweetivizも含めて探索的データ解析をこんなに簡単にできるのは非常に便利だと思いました。

訂正要望がありましたら、ご連絡頂けますと幸いです。
railsで新規アプリを作成した時にmysqlにし忘れた時の対処

# railsで新規アプリを作る際, -d mysqlをつけ忘れた！
deviseの導入をしている時にencodingをutf8にしようと思い
database.ymlを開くと「ん？なんかいつもと全然違うな」と感じました。
utf8mb4(?)だっけの記述も全くなくなぜだーと思っていると
databaseの指定をしておらずデフォルトの設定になっておりました。（-d mysqlのしわすれ）

普段は下記の書き方でやってます

```
% rails new -d mysql
```

このままアプリを消して新しく開発を始めるのはスマートじゃないので
ここからmysqlに指定しなおしていきましょう！
(mysqlを使いたいのはただ私がmysqlにしか慣れていないため)

## 手順１　gemfileの修正
まずgemfile内にsqlliteの記述があるのでそれを削除しました
削除した部分に新しくmysql2の記述を入れておきます


```
#gem 'sqlite3', '~> 1.3.6'
gem 'mysql2'
```

そしてbundle installでmysql2のgemを導入します

```
% bundle install
```

ここでmysqlを使いたいです宣言をして
mysqlとmysqlに必要なパッケージを丸ごとインストールした感じですよね

## 手順2　database.ymlを修正
次はrailsのデータベースの設定部分をいじっていきます
デフォルトのsqliteの記述を全て削除して
新たに下記を記述します。

```config/database.yml
 default: &default
  adapter: mysql2
  encoding: utf8
  pool: 5
  username: root
  password:
  host: localhost

development:
  <<: *default
  database: eco-box_development 

test:
  <<: *default
  database: eco-box_test

production:
  <<: *default
  database: eco-box_production
  username: eco-box_app
  password: eco-box
```
今回の私のアプリでの設定ですので各自かえるところはかえてください
（データベースの名前とかパスワード、usernameとかですね）
というかここでデータベース本体の定義を行うんだなぁと改めて実感しました
今までrailsさんに自動でやってもらってましたからね

というわけで、ここで「mysqlを使ったデータベースはどんなのにしますか？」の注文表を
書いている感じですよね

## 手順3 データベース構築
では最後にデータベースをつくっていきましょう
ターミナルで下記のコマンドを入力

```
% rails db:create
```

エラーが出ずにdevelopmentとtestのデータベースが出来たら完成です！
お疲れ様でした

ここ違うよ！っていうところがあったらぜひコメントお願いします
Djangoの {{ 〇〇 |safe }}とは

`|safe`はHTMLタグを描き出せるようにするためのフィルター機能。

通常、`{{ 〇〇 }}`の中にHTMLタグを埋め込んでもただのテキストとして表示されてしまう。
そこで、タグとして表示させたい時には`{{ 〇〇 |safe }}`とする。

例として、`<h1>hello</h1>`を表示させてみる


```index.html
<body class="container">
    {{title}}
    {{title|safe}}
</body>
```

```views.py
def index(request):
    params = {
        'title':'<h1>hello</h1>'
    }
    return render(request, 'hello/index.html', params)
```

次のようになる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/421795/d5328bb3-1bbf-4d79-cd0f-1a63dd28a98e.png)
[jquery]InstagramFeedについて

#はじめに
思った以上に簡単にinstagramが実装できたので。
記しておこうと思います。

#実装
こちらでソースを取得し「jquery.instagramFeed.min.js」をファイル内に配置します。（今回はjsのファイル内に設置しています。）↓

https://github.com/jsanahuja/jquery.instagramFeed


```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
</head>
  
<body>

<div id="instagram-feed1"></div>

<script src="./js/jquery.instagramFeed.min.js"></script>
<script>
    (function($){
        $(window).on('load', function(){
            $.instagramFeed({
                'username': 'instagram',       usernameを記入                
                'container': "#instagram-feed1",    idを取得:上に表示されます
                'display_profile': true,
                'display_biography': true,
                'display_gallery': true,
                'display_captions': true,
                'max_tries': 8,
                'callback': null,
                'styling': true,
                'items': 8,
                'items_per_row': 4,
                'margin': 1,
                'lazy_load': true,
                'on_error': console.error
            });
        });
    })(jQuery);
</script>
</body>
</html>
```
これでusernameのところに書いたinstagramが表示されます！！
あとはcssでお好みで他の装飾を・・・
#終わりに

かなり簡単に実装ができました！！
便利ですね。:sunny::sunny:

#参考

細かい設定はこちらから見ることができます。↓

https://www.sowecms.com/demos/InstagramFeed/

https://www.jqueryscript.net/social-media/Instagram-Photos-Without-API-instagramFeed.html

Railsで実装。こちらは後ほど確認。

https://qiita.com/hardreggaecafe/items/d915ac1eec78ef8f47d8