OmniAICreator/Qiita-1.07M huggingface dataset:
ASP.NET Core MVCでjQuery Validationが吐き出すメッセージを変更する

`ASP.NET Core MVC`では、入力フォームの検証に標準で`jQuery Validation`なるシロモノが使われているらしい。
詳しいことはドキュメントを。

* 参考：[MVC とページ ASP.NET Core でのモデルの検証 Razor](https://docs.microsoft.com/ja-jp/aspnet/core/mvc/models/validation?view=aspnetcore-3.1)

## バリデータが英語でメッセージを吐き出すから困る。
`input type="date"`な要素の検証をしたかった。

```
Please enter a value less than or equal to XXXX-XX-XX.
Please enter a value greater than or equal to XXXX-XX-XX.
```

こんな感じでメッセージを変えられる。

* 参考：[jQuery検証：デフォルトのエラーメッセージを変更する](https://qastack.jp/programming/2457032/jquery-validation-change-default-error-message)

```javascript
$(() => {
    $.extend($.validator.messages, {
        max: $.validator.format("{0} 以前の値を指定する必要があります。"),
        min: $.validator.format("{0} 以降の値を指定する必要があります。"),
    })
})
```

## でもこれだと`input`要素の`type`属性が`number`だった時に困る。
こんな感じで関数を渡しちゃえば分岐も実現できるようで。

* 参考：[jQuery validation custom messages with field name [duplicate]](https://stackoverflow.com/questions/58233279/jquery-validation-custom-messages-with-field-name)

```javascript
$(() => {
    $.extend($.validator.messages, {
        max(value, element) {
            return element.type === "date"
                ? `${value} 以前の値を指定する必要があります。`
                : `値は ${value} 以下にする必要があります。`;
        },
        min(value, element) {
            return element.type === "date"
                ? `${value} 以降の値を指定する必要があります。`
                : `値は ${value} 以上にする必要があります。`;
        },
    })
})
```
IT用語集（ネットワーク関係）

#IT用語集（ネットワーク関連）

こんにちは、エンジニア就活中の者です。

現在、５社程カジュアル面談でエンジニアや採用担当の方とお話をさせて頂き、「ぼくってIT用語全然知らないじゃん！(涙)」と恥ずかしい思いをしましたのでいろんなIT用語を浅く広く勉強してみました。働き始めた時に少しでも先輩に「こいつ、わかってるねぇ～」と思われたいがために、文字に起こして少しでも頭に定着させるぞ！という目的で書いたメモ書きです。

記念すべき初めての投稿、参ります！

##TCP/IP

###プロトコル
データ通信のルール

###IP（Internet Proctol）
プロトコルの1種
通信速度が速い。相手先や順序気にしない。
データを通信するときに「IPパケット」を使用

###IPパケット
データを収める箱のようなもの
「IPヘッダ（IPアドレスなど）」「運ばれるデータ（画像、動画など）」の2構想

###IPアドレス
データの住所みたいなもの。機器の識別をするもの。IPとは別物。

###TCP（Transmission Control Protocol）
プロトコルの1種
通信速度は遅い。信頼性が高い。
（IPパケットのデータの分割もしている。）

###TCP/IP
インターネットの標準的な通信プロトコル。TCPとIPをセットにしたもの。

###OSI参照モデル
ネットワークのシステムを７つの階層で表した概念のこと。

###MTU（Maximum Transmission Unit）
1度に送ることのできるデータサイズのこと
イーサネットLANケーブル：最大1500バイト
光ファイバー：最大4532バイト

今回は以上！

####参考記事
https://youtu.be/_2U4AujFgzI
https://youtu.be/HWomRvXSZfY
DenoでTwitter API Clientを作ってみた話

Deno Advent Calendar 15日目の記事です！

Advent Calendar初投稿で拙いかもしれませんがご了承ください…

# Deno とは
たぶん皆さん解説されていると思うので、簡単に言うと、

**node.js開発者による上位互換Javascript・typescriptランタイム**

です！(若干語弊があるかも...)

# Twitter API client 作るきっかけ
最近、Denoちゃんが好きになってきて、DenoでTwitter Bot作りたいなぁと思ってました。

いざ作ろうと思うと、「直接fetch叩かんとあかん系？」って感じで、扱いにくかった。

どうせなら、自分で作っちゃう？

ということで、Twitter API clientを作ることになりました。

# Twitter API client for Deno

[Github source](https://github.com/kamekyame/twitter_api_client)

Githubにソースコードを上げたので、置いておきます。
Github pagesにて公開もしているので、URL使ってモジュールインポートできます。

# 使ってみよう！

いくつかコード例を挙げておきます。

## Bearer Token 取得
Bearer Tokenとは・・・
Twitter API v2(Early access)などで誰でも見られる情報（ツイートとかユーザーとか）を取得するとき、OAuth1.1a認証を使わずに、Bearer Tokenと呼ばれるトークンをAuthorizationヘッダーに付けることでAPIを使用できるもの。

Bearer Token自体は、Twitter developerサイトや、基本認証で`apiKey`と`apiSecretKey`を指定のURLに送信することで得られます。

ここでは、`apiKey`と`apiSecretKey`を使用してbearerTokenを取得するコードを書いておきます。

```typescript
import { getBearerToken } from "https://kamekyame.github.io/twitter_api_client/auth/oauth2.ts";

const apikey = "" // apikey
const apisecletkey = "" // apisecletkey

const bearerToken = await getBearerToken(apikey, apisecretkey);
```

## ツイート取得（api_v2/tweets/lookup）

```typescript
import { getTweet } from "https://kamekyame.github.io/twitter_api_client/api_v2/tweets/lookup.ts";

const bearerToken = ""; // bearerToken

const res = await getTweet(bearerToken,"1067094924124872705"/*,option*/);
```

## 指定した検索条件にマッチするツイートのストリーミング（api_v2/tweets/filtered_stream）

※事前に検索条件（ルール）の登録が別途必要

```typescript
import { connectStream ,StreamTweet} from "https://kamekyame.github.io/twitter_api_client/api_v2/tweets/filtered_stream.ts";

const bearerToken = ""; // bearerToken

async function callback(a: StreamTweet) {
  console.log(a);
}

connectStream(bearerToken, callback);
```

## ツイート投稿（api_v1/tweets/lookup）
「hello world!」という文をツイート

```typescript
import { statusUpdate } from "https://kamekyame.github.io/twitter_api_client/api_v1/tweets/update.ts";

await statusUpdate({
  consumerKey: "",
  consumerSecret: "",
  token: "",
  tokenSecret: "",
}, {
  status: "hello world!",
});
```

# Twitter API client for Deno 利用に関する注意点
1. Twitter API v2(Early access)を使用する際には、v2が使えるようになんかDeveloper portalで設定しないといけないようです。
（調べたけどやり方が出てこなかった...。僕はどうやってやったんだろ...）
1. 個人で使うために作ったモジュールなので、作り方が甘いところがあるかもしれません。
1. 個人が使うために作ったモジュールなので、使いたいAPIのみしか作成できていません。

# まだ未完成(o^―^o)
このモジュールは、まだまだ未完成です。ぜひ、この記事を見て使ってみたいけど、欲しいAPIが実装されてない！！！って方いらっしゃいましたらissueに書き込むか、自分で作ってプルリクしてください。

皆様のご協力お願いしますm(__)m（これをするためにAdvent Calender登録したっていうのもw）

また、バグ報告、より良いプログラム・アルゴリズム等ありましたらissue、プルリクでお願いします。

# 今後の展望
- 全部のAPI作る
- クラスにまとめて、もっと簡単に、直感的に使えるようにする
- 例外処理をきちんとする(今は特にしていない)

などを考えてます。

# 最後に
最近なにかと話題のDeno。ぜひDeno界隈を盛り上げて、npmをも超えるモジュール群を作り上げましょう！！！

Advent Calender初参加。うまく書けたかな。こんな記事でいいのかなと思いながらの執筆。
コメント等もお待ちしております！
[Qiitaの記事には絶対コメントを書いてはいけない (わけがない)](https://qiita.com/YumaInaura/items/5532cb4eea013b2f4a4b)←ほかの人の記事ですが…
ターミナルからvscodeを起動することができる様になる手順

>まず初めにMacで試した方法ですので、WindeowsやLinuxは参考になるか分かりません。



##vscodeを起動


- [x] コマンド + シフト ＋ P 入力

すると下の写真の様になります。

![スクリーンショット 2020-11-26 12.28.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696947/da148d5b-d4bc-0f60-e9ba-7b26ad05e167.png)


- [x] ここで '>' を消さずに 'Shell' と入力します。


- [x] 出てきた 'Shell Command: Install 'code' command in PATH'をインストールします'


`そうしますとターミナルから'code'で「起動」ができる様になっているはずです。`
スマートフォン ブラウザ 全画面表示 アイコン指定

Androidも、このiPhone用の指定で設定できる

■ ホーム画面に追加したアイコンをタップした際に、全画面表示にするための指定
```
<meta name="apple-mobile-web-app-capable" content="yes">
```

■ ホーム画面に表示するアイコンの指定
```
<link rel="apple-touch-icon" href="web_clip_icon.png" />
```
アイコン用の画像のサイズ(幅、高さ)を、幅192 × 高さ192 pxで作成する必要がある
このサイズでない場合、アイコンの中にバツ印が表示されてしまう
このアイコンのことをwebClipIconと言う
boto3 の DEBUG ログを表示しない

Python コードのデバッグのために以下のようにログレベルを DEBUG に設定していると、boto3 関連のログがたくさん流れてきて邪魔なときがある。

``` python
import logging

logging.basicConfig(level=logging.DEBUG)

logger = logging.getLogger(__name__)
```

boto3 関連の DEBUG ログを表示しないようにしたいときは、いくつかのロガーのログレベルを INFO 以上に引き上げればよい。

``` python
import logging

for name in ["boto3", "botocore", "s3transfer", "urllib3"]:
    logging.getLogger(name).setLevel(logging.WARNING)
```

ただし、boto3 以外のモジュールが urllib3 に依存していた場合はそのログも見えなくなってしまうので注意。
[C#の基礎] インターフェースの話 (1) 基本的な事

インターフェース(Interface) にまつわる話。

## インターフェースの基本

こういうインターフェースを作ると

```csharp
public interfae IFoo{
    string Greet(string to);
}
```

これは許されないが

```csharp
public class FooImplementation : IFoo {
   string Greet(string to, int i){
       return "hello";
  }
}
```

これは許される。

```csharp
public class FooTypeA : IFoo {
   string Greet(string to){
       return $"hello {to}";
  }
}
public class FooTypeB : IFoo {
   string Greet(string to){
       return $"こんにちは、{to} 様";
  }
}
```

つまり "インターフェースで宣言したメソッドは実装クラスでその通りに実装されなければならない" という事。

良く知られた例としては IEnumerable&lt;T>  があり、いつも使う List&let;FooEntity> とかを foreach 出来るのも、string を foreach して1文字ずつ解析したりできるのも 実装クラスが必ずそう言う処理を実装しているから。

## 同じインターフェースに対する複数の実装

先の例の FooTypeA, FooTypeB は共に IFoo インターフェースを実装している。
これで何が嬉しいのかって言うのがイマイチ理解しづらいみたい。

サンプル

```csharp
class Program{
  public static void Main(string[] args){
    IFoo foo = GetFoo(args[0]);
    if(foo != null){
      Console.Write(foo.Greet("Mr. Boo");
    }
  }
  public static IFoo GetFoo(string fooType){
      if(fooType  "A") return new FooTypeA();
      else if(fooType  "B") return new FooTypeB();
      else return null;
  }
}

```

ここではコマンドライン引数で受け取ったタイプによって生成する実装クラス を切り替えて、メソッドGreet()を呼び出す。
void Mainを書く人はIFoo の実装クラスについてあまり詳細な事を知らなくても使える。
(ただし、自分の欲しい結果が何かは把握していないと困る)

つまり

* メソッドの形式が同じなので、インターフェースの定義を知っていれば使える
* 同じインターフェースを実装した複数のオブジェクトについて、同じメソッドを確実に呼び出すことができる(IDisposableなど = 常にusing{}できるとか)
* 何かの都合で処理内容を切り替えたい場合に使える

という事になる。

3番目の件、if や switch でどうにかすることもできるし、コンパイル定数で制御することもできるけども、テスト大変。
AWSとオンプレミスの疎通確認に使えるコマンド

# 前提

- EC2 Amazon Linux 2

## ポート指定でping疎通


```
$ sudo yum -y install nc
$ nc -zv {ipaddress} {port}
```

## ping疎通の確認

```
# pingの受け手で実行
$ tcpdump -nn icmp

# pingの送り手で実行
$ ping {ipaddress}
```
Unity2019以降でスタンダードアセットのFPSコントローラだけインポートする方法

# 2022年11月28日追記
- 2022年11月28日現在、アセットストアから、スタンダードアセットがダウンロードできなくなりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/1673df6a-1676-ccd7-9c4b-f94d1eb9b20a.png)
- そのため、当記事では、すでにローカルにスタンダードアセットがある場合における使い方として参考にしてもらえればと思います。よろしくお願いいたします。

# この記事でできること
- 約180MBのスタンダードアセットにおいて、プロトタイプづくりとしては優秀なFPSコントローラだけをインポートすることができます。
- 約500kbまで減量できます。

# やること
- 下記ディレクトリ選択を参考にして、インポート時のチェックを行う。

## 必要なディレクトリ選択
Standard Assets
┗Characters
┃┗FirstPersonCharacter
┃　┣Audio　←ここはフォルダごと選択
┃　┣Prefabs
┃　┃　┗FPSController.prefab
┃　┗Scripts
┃　　┣FirstPersonController.cs
┃　　┗MouseLook.cs
┣CrossPlatformInput
┃┗Script　←ここはフォルダごと選択
┗Utility
　┣CurveControlledBob.cs
　┣FOVKick.cs
　┗LerpControllerBob.cs

画像はこちら
![20210928a05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/0fd9153f-069b-8219-4c90-00283c015efa.png)


# まとめ
- インポート時に、必要なデータを選択することにより、約500kbまで減量することができます。

# 2022/08/01追記
- 本日確認したところ、下図の「UsingStandardAssets.Effects」に紐づく箇所でエラーが発生して実行できないことを確認しました。
- 当記事の方法で使用する場合は、下図に紐づく箇所をコメントアウトしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/cd911393-43cb-7d85-b5dc-53a998a2f1ce.png)


# こちらの記事もどうぞ
[unity2019LTSにスタンダードアセットを入れたあとのエラー回避方法](https://qiita.com/sanpeita/items/31cc55bea1ef59b10bdf)
[Unity2020のStarterAssetsで、TPSプレイヤーだけSceneに出したいとき](https://qiita.com/sanpeita/items/cc7c4875f236ee11fdb9)
ubuntu20.04のlibvirtdで--listenできない

KVMを使って仮想化しようと思い、libvirtdを設定した際、いつも通り `/etc/default/libvirtd`を `libvirtd_opts="-l"`にしてリスタートしたところ、

```
libvirtd[3872]: --listen parameter not permitted with systemd activation sockets, see 'man libvirtd' for further guidance
systemd[1]: libvirtd.service: Main process exited, code=exited, status=6/NOTCONFIGURED
systemd[1]: libvirtd.service: Failed with result 'exit-code'.
systemd[1]: Failed to start Virtualization daemon.
systemd[1]: libvirtd.service: Scheduled restart job, restart counter is at 2.
systemd[1]: Stopped Virtualization daemon.
```
と吐いて上手く起動できない。

メッセージの通り、 `man libvirtd`して確認したところ、

```
OPTIONS
...
       -l, --listen

       Listen for TCP/IP connections. This should not be set if using systemd socket activation. Instead activate the libvirtd-tls.socket or libvirtd-tcp.socket unit files.
...
```
との事。

libvirtdのバージョン5からは `-l`は使えませんので、 `libvirtd-tcp.socket`使ってね。という事らしい。
しかも、libvirtd.serviceが起動する前に起動させないとならないので、 `/lib/systemd/system/libvirtd.service`を編集

```
[Unit]
...
Wants=libvirtd-tcp.socket　←追記
...
```
適用します。

```
# systemctl daemon-reload
```
libvirtd-tcp.socketの自動起動を有効にします。

```
# systemctl enable libvirtd-tcp.socket
```

念のため、システムを再起動させます。

無事にtcp16509をlistenしている事が確認できました。
※PIDが1/initでちょっとキモイ
sFlowの特性を生かした分析

#sFlowの特性を生かした分析

フロープロトコルには、大きく分けると２つの規約が存在します。
ひとつは、**sFlow**、で
もうひとつは、**NetFlow**、になります。

どちらもフロー分析に必要な情報である、

```
Time
Ingress ifIndex
Egress ifIndex
IP Source Address
IP Destination Address
IP Protocol
L4 Source Port
L4 Destination Port
Frames
Bytes
```

を保有し、これらの情報を基に分析することが出来ます。
ただ、これらの情報をエクスポートする方法と内容は、sFlowとNetFlowでは大きく異なります。
sFlowは、流れるトラフィックを機器のインターフェースでサンプリングして、その情報を基に

```
Flow sample （フローデータ）
  Packet Header ： サンプルパケットのパケットヘッダー情報（一部ペイロード含む）
  Src/Dst i/f ： 入出力インターフェースのifIndex
  Sampling Perms ： sFlowパラメータ(Sampling Rate,Sampling Pool etc)
  Forwarding
  Priority  ( Src/Dst 802.1p/TOS)
  VLAN ( Src/Dst 802.1q)
  Next hop address
  Source AS, Source Peer AS
  Destination AS Path
  Communities, local preference
  MPLS
  User ID ： Src/Dst RADIUS/TACACS
  URL
SNMP Counter Sample (SNMP ｶｳﾝﾀｰ 値)
  i/f counters ： インターフェース・カウンター・統計値
```

の情報をsFlowデータグラム化してエクスポートします。
情報内容としては、**パケットヘッダー情報**とその他関連付与情報を追加したものになります。
また、SNMPカウンター情報もsFlowデータグラムとしてエクスポートします。

かたやNetFloｗは、
流れるトラフィックを機器のキャッシュ内でフロー情報キーでフレームやバイトをカウントして、
指定のタイミングでNetFlowデータグラム化してエクスポートします。下記図参照。
フロー情報は、NetFlowV9では、テンプレート形式で取得情報を変更する事が出来ますが、
概ね下記図内の内容のフロー情報キーで集約します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/705452/a68e5a9f-65e5-586c-6e40-30889c7f1c2f.png)

```
Time
Interface
Source Address
Destination Address
IP Protocol
TOS
Source Port
Destination Port
Frames
Bytes
など
```
NetFloｗは、エクスポートされた情報自体が既にフロー情報化されており、
sFlowは、エクスポートされた情報はサンプリングされ転送されたそのままのパケットヘッダ情報なので、
受信したフローシステム側で、サンプリングを考慮してフロー情報に組み立てる必要があります。
その為、ネットワーク機器側の処理負荷は低いですが、フローシステム側の負荷が比較的高くなります。
逆に、NetFlowは、ネットワーク機器側のキャッシュでカウントし続けるので、ネットワーク機器側の処理負荷が比較的高くなります。
NetFlowにもネットワーク機器側の負荷低減の為に、sFlow同様にサンプリング処理を行うSampled NetFlow規格も存在します。

NetFlowは、フローとしてエクスポートされた情報のみの分析になりますが、
sFlowは、フロー情報以外にもパケットヘッダに含まれる各種の情報による分析も可能です。

それらのsFlowの持つ情報の特性を生かした分析をいくつかご紹介したいと思います。

####TCP Flags
TcpFlagの、ACK、SYN、PUSH、FIN、RSTでの分析
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/705452/4e60381d-ef10-200f-36c9-692f5256ae46.png)

####RTP（RTP Codec、RTP Jitter、RTP Lost Fraction）
G722,G729,H263,H261でコーデック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/705452/8681eb5f-85a7-73c7-ea79-3f79df629239.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/705452/5af8ce8b-20a5-8f72-1e18-f8aa7a9f25a6.png)

####MACアドレス
MACアドレス間での統計値
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/705452/a7ff61ab-4a40-cc19-5f5f-4af700116234.png)

####ICMP（ICMP Code、ICMP Type、ICMP Unreachable Portなど）
ICMPの情報
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/705452/bfa14038-6607-a005-4b9c-2d28a47bed70.png)

####その他

####プロトコル系
ARP（ARP H/W Type、ARP IP Sender、ARP IP Target、ARP MAC Sender、ARP MAC Target、ARP Operation、ARP Protocol Type）
VLAN（VLAN In、VLAN Name In、VLAN Name Out、VLAN Out、VLAN Stack）
IGMP ( Internet Group Management Protocol ) Group

####ストレージ系
ATA over Ethernet（AOE Operation、AOE Status、AOE Target）
Fibre Channel（FC Client、FC Destination、FC Server、FC Source、FCS Errors）
ISCSI opcode
TRILL（TRILL Hops、TRILL Options、TRILL RBridge Egress、TRILL RBridge Ingress）
	
######など多数。
Iphoneにおけるシュナイダーマンの8つの黄金律について

iphoneはシュナイダーマンの対話設計における8つの黄金律をどのように達成しているのかについてを考えてみました。

環境：IphoneXR IOS 14.2

---
###(1)	一貫性
・ホーム画面とAppライブラリの構造の統一
・アプリアイコン、ウィジェット機能・コントロールセンターのアイコンの形の統一
・通知の内容はアプリアイコン・アプリ名・日時・本文の形式に統一

---
###(2)	ショートカットの用意
・画面を開かなくてもカメラ、ライト、コントロールセンターの表示、ミュージックの操作が可能である。このコントロールセンターは通信操作機能・ミュージック操作機能・画面向きロック機能・おやすみモード・明るさ調整・音量調整・画面ミラーリング機能からなる上部の固定部分と下部のタイマー・ライト・電卓・カメラなどからなるカスタマイズ可能部分で構成されている。
・デフォルトアプリとしてショートカットというアプリがある。このアプリは定型操作を登録することができてホーム画面に表示させておくとワンタップで目的の操作を完了することができる。
・ウィジェット機能を使うとアプリを起動しなくてもホーム画面に常に表示させておくことができる。


---
###(3)	フィードバックの提供
・アプリ情報やデバイス情報をアプリアイコン・アプリ名・日時・本文の表示、音声とバイブルにより使用者に報告する。
・地震速報、津波警報、その他の災害・避難情報の緊急速報のフィードバックも行われる。

---
###(4)	達成感を与える対話の実現
アプリのインストールやアップデートの開始、過程、終了がはっきり表現されている。

---
###(5)	簡単なエラーの処理
エラーが出た場合にはエラー内容と解決策をモーダルによって表示することで緊急性を表現して、選択ボタンを押させることでエラーを解決したり、使用者にエラー解決の処理をさせる様に誘導する。

---
###(6)	逆操作
Safariを例にするとページを戻るボタンと進むボタンがあり、また左右にスワイプすることでページを「戻る」「進む」操作が可能である。

---
###(7)	主体的な制御権の提供
・どんなアプリを使用中でもアプリの切り替えがいつでもできる。
・時間のかかるアプリのインストールやアップデートはいつでも停止する権限が使用者に与えられている。

---
###(8)	短期記憶の負担の減少
・Iphoneのホーム画面下部のメニューはアプリを４つまで配置可能で使用者の短期記憶への負担が少なくなる様に設計されている。
・中断したアプリが同期処理のアプリで終了しない限り、中断した状態から再開することができる。
・Appライブラリでアプリを保持しておくことができるのでホーム画面を使用頻度の高いアプリやウィジェットのみにすることができる。

---
参考文献
・Shneiderman's "Eight Golden Rules of Interface Design"
http://faculty.washington.edu/jtenenbg/courses/360/f04/sessions/schneidermanGoldenRules.html
・【超訳】シュナイダーマンのデザイン８原則
https://rentub.com/dev/ui_design_8things/
JavaScript勉強日記#3

①繰り返し処理

```
<script>
  //console.log(1 + '枚');
  //console.log(2 + '枚');
  //console.log(3 + '枚');
  //console.log(4 + '枚');
  //console.log(5 + '枚');
  //console.log(6 + '枚');
  //console.log(7 + '枚');
  //console.log(8 + '枚');
  //console.log(9 + '枚');
  //console.log(10 + '枚');
```
素直に書く事もできるが記述が多くなってかなり面倒...

```
  'use strict';
  let i =1;
  while(i <= 10) {
    console.log(i + '枚');
    i += 1;
  }
</script>
```
while文を使う事で同じ記述を使わない様にできます。

②何回繰り返すかを決めずに繰り返し処理をする

```
<script>
'use strict';
let enemy = 100
let count = 0;
window.alert('戦闘開始！');

while(enemy > 0) {
  const attack = Math.floor(Math.random() * 30) + 1;
  console.log('怪物に' + attack + 'の損傷！');
  enemy = enemy - attack;
  count += 1
}
console.log(count + '回怪物討伐！')
</script>
```

③無限ループの抜け方
私は②のコードを書く時に`enemy = enemy = attack;`と書いてしまい無限ループに陥りましたので、ついでにループの抜け方(強制終了)も記載しておきます。
Macの場合は`command + option + esc`でウィンドウを開き、Windowsは`Ctrl + Alt + Delete`でタスクマネージャーを開きます。

https://gyazo.com/38bd87ffea1c2a4d5b83583dc3f6365a

④functionの使い方
https://gyazo.com/1094994e4e432944c458459049c305b7

```
<section>
  <p id="output1"></p>
  <p id="output2"></p>
  <p id="output3"></p>
</section>
</main>

<script>
'use strict';

function total(price) {
  const tax = 0.1;
  return price + price * tax;
}
console.log('コーヒーメーカーの値段は' + total(8000) + '円です。');
document.getElementById('output1').textContent = 'コーヒーメーカーの値段は' + total(8000) + '円(税込)です。'
document.getElementById('output2').textContent = 'コーヒー豆の値段は' + total(900) + '円(税込)です。'
document.getElementById('output3').textContent = 'コーヒーフィルターの値段は' + total(250) + '円(税込)です。'

</script>
```
`function total(price) {　加工の内容の記述(priceはこの中だけで使えます)　}`
今回は、totalと言う名前のファンクションを使用しました。この記述以降`total(price)の記述を書くと何度でも呼び出す事ができます。`~~functionは資源です。~~
agora.io Video SDK for React Native クイックスタートガイド (2020-11-26 改訂版)

# はじめに

本記事は 2020-01-31 の記事「[agora.io Video SDK for React Native クイックスタートガイド](https://qiita.com/v-cube/items/5d413ccf49089b350ba0)」 の改訂版となります。


# 概要

agora.io では ReactNative を利用した開発が可能です。
元々はコミュニティから始まったプロジェクトですが、現在は Agora が公式にメンテナンスをしています。

agora.io の [Download Center](https://docs.agora.io/en/All/downloads?platform=React%20Native) には下図のような画面が表示されますが、こちらは npm に公開している SDK パッケージへのリンクとなっています。
※ 2020-11-26 時点

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/b6680ae9-67b5-fbc9-a31d-8dd37116acd6.png)

SDK 自体の入手は上記リンク先で紹介されていますが、こちらはサンプルプロジェクトを含みません。もしサンプルを使って動作確認したい場合は、コミュニティに公開されているものをお使いください。

リンク: https://github.com/AgoraIO-Community/Agora-RN-Quickstart

本記事では、このサンプルを使ったアプリのビルド方法を紹介します。


# ビルド方法

1.github コミュニティから [Agora React Native Demo](https://github.com/AgoraIO-Community/Agora-RN-Quickstart) をダウンロード
2.ファイルを展開し、プロジェクトのルートフォルダへ移動
3.下記コマンドを実行し、必要なパッケージを追加

```bash
npm install
```
または

```bash
yarn
```

4.App.tsx を開き、以下の行に AppID と token を追加
※ token を使わない場合は、空文字列で代用します

![app_tsx.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/86a16543-a8b3-7a6e-e9e9-c991c4acd3d3.png)

5.iOS でビルドしたい場合、以下のコマンドを実行

```bash
cd ios && pod install
```


6.デバイスと PC とを接続し、デバイスの種類に応じて以下のコマンドを実行し、アプリを起動

* Android の場合

```bash
npx react-native run-android
```

* iOS の場合:

以下のコマンドを打つことで、ビルドしたアプリは iOS シミュレーター上で起動します:

```bash
npx react-native run-ios
```

実機にインストールしたい場合は、ReactNative の Running On Device を参考にしてください:
https://reactnative.dev/docs/running-on-device

ここまでの間に何らかのエラーが出た場合、開発環境に必要なツールが足りていない場合がありますので、ReactNative の公式サイトから開発環境のセットアップ方法をご確認ください:
https://reactnative.dev/docs/environment-setup


# アプリの画面

アプリを起動し、「Start Call」を押すと「channel-x」と名前のチャンネルに接続します。
※ グラデーションの画像処理をかけている部分にカメラ映像が映ります

![Screenshot_20201116-140842.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/13c241a3-7a74-de78-51c5-46663c72b0e6.png)


#最後に
[**agora.ioに関するお問い合わせはこちらから**](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=6e98f80bb174a2b35261)
[<img width="912" alt="スクリーンショット 0001-08-15 13.41.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/5d815376-9b89-08fa-9434-6fa7e8e67bcf.png">](https://jp.vcube.com/lp/agora?utm_campaign=Agora&utm_source=Qiita&arc_id=6e98f80bb174a2b35261)
[AWS] AWSだけで完結する定期処理の作り方 [Lambda・CloudWatch]

# 概要
アプリ開発などでサーバレスな環境構築をすることがあると思います。
そう言った場合にAWSでだけで実装することができるバッチ処理の簡単な作り方をご紹介します。
色々やり方はありますが、今回はLambdaとCloudWatchに焦点を当ててご紹介します。

また解説する内容は必要最低限のプログラムなどになりますので全体的には15分程で試すことが出来るかと思います。

# 1. Lambdaで処理を作ろう
まず定期処理が行われた際の実際の処理が行われるプログラムを作成していきます。


![Screen Shot 2020-11-26 at 10.41.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652173/bebe4f2f-7a3d-8fc0-15f0-a65ad6fda9ad.png)

AWSのLambdaのトップページより"Create function"ボタンを押下しファンクション作成のページに遷移します。

![Screen Shot 2020-11-26 at 10.44.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652173/453cbdc1-0ac2-f7aa-bc92-8bef5b587d0c.png)

今回は"Author from scratch"を選択し、Function name(関数名)、Runtime(言語)をそれぞれ入力・選択し"Create function"ボタンを押下します。(筆者は関数名"qiitaBatchFunction"、Runtime"Python3.7"をそれぞれ入力・選択)


![Screen Shot 2020-11-26 at 10.48.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652173/c825774f-bcd1-3ce1-cca4-8b164ebcc3c2.png)


上記のページに遷移すればLambda関数の作成は完了です。

実際に行いたい処理を"lambda_function.py"を記述します。
またnpmなどでライブラリを導入したい場合や別途ソースコードの管理をしたい場合は、"Actions ▼"を押下し、"Upload zip file."を選択することで外部のソースコードを利用することができます。

実際に作成したソースコードが動くのか確認する場合はページ上部の"Test"ボタンを押下することで確認することが可能です。

では次に定期実行させる仕組みを作っていきましょう！


# 2. CloudWatchで定期実行させよう

次にCloudWatchで先ほど作成したLambda関数を定期実行させてみましょう。

CloudWatchのサイドバーより"Rules"をクリックします。

![Screen Shot 2020-11-26 at 10.58.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652173/04b4ee4c-a4c4-523c-53f4-1a477090b859.png)

そして"Create rule"のボタンを押下します。

![Screen Shot 2020-11-26 at 11.00.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652173/ec8f8008-867c-726c-862c-eef40e45cb90.png)

まず今回は"Event Source"より"Schedule"を選択します。

そして"Fixed rate of -"を選択し定期実行させたい間隔を設定します。(筆者は5分間隔で起動させる予定なので5を入力し"Minutes"を選択)

もし細かい設定を行いたい場合は、"Cron expression"を選択しスケジュールを設定して下さい。
こちらに関しては検索エンジンで"Cron 書き方"などと調べて頂くと筆者が説明するよりも分かりやすい内容が出てくると思います。

次に"Targets"より"Add target"を押下します。
すると何を実行させるか選択できるので"Lambda function"を選択し先ほど作成したLambda関数を選択します。(ここでは筆者が作成した"qiitaBatchFunction"を選択)

"Configure details"を押下します。

![Screen Shot 2020-11-26 at 11.08.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652173/3b654300-abcf-4253-e924-aa5334c2bf43.png)

最後に"Rules"の一覧ページに表示される際のName(表示名)とDescription(説明)を記載して"Create rule"ボタンを押下するだけです。
もし作成と同時に定期実行を行いたくない方は"Stete"のチェックを外して下さい。


以上で定期実行の実装は完了です。
あとはサイドバーのLog groupsなどで定期実行されているかログを確認するなどして動作確認を行なって下さい。

# 3. 最後に
今回は必要最低限の動作ということでご紹介致しましたが基本的にはLambdaの処理部分を変えるだけでお好みの動作を行うことが出来るかと思います。

もしzipファイルを作りたい場合は検索エンジンで"lambda zip 外部"と検索して頂くと丁寧に紹介されているサイトが出てくると思います。
筆者自身もまた別の機会にLambdaで使用する外部ソースコードのzipファイル作成方法を投稿する予定です。

最後まで見ていただきありがとうございました。
React躓きメモ

###Async callback was not invoked within the 5000ms timeout specified by jest.setTimeoutでjestのテストが上手くいかないケース
```
it("テストネーム", async () => {
  // settimeoutを繰り返すようなテスト
}, 時間);
```
上記のように、itの第3引数に時間を入れることで上手くいくらしい

###useEffectがstateなどで何度もレンダリングされてしまう。

https://qiita.com/k-penguin-sato/items/9373d87c57da3b74a9e
以下のように第2引数をから配列にすればいいらしい。
```
useEffect(() => {
  // 処理
}, []);
```
###jestでカバレッジが解消されない
循環参照されているのが原因だったため、コーディングのファイルの位置関係を見直すこと。

### window.visualViewportでエラーが発生してしまう。
https://r17n.page/2019/11/21/fix-typescript-window-object-access-error/
https://dev.classmethod.jp/articles/typings-of-window-object/
Gitでレポジトリを作る時、正しいディレクトリで行いましょうねって話

# 初めに
知ってる人にとっては当たり前ですが、わからなかったのでとりあえずメモ書き程度に。
# Gitの管理レポジトリ作成時の注意点
そのプロジェクトがあるディレクトリに.gitファイルを製作すること。
ユーザーファイルなんかに製作すると、そのフォルダの変更点が全部未コミットとしてでてきます。
リポジトリの作成前にそのディレクトリが正しい場所にあるか確認しましょう。
並列(Parallel)と並行(Concurrent)

意図的に分けて使うようになったのは、タスクベースのいろいろなものが出そろってきた２０１０年ころからかなぁ？

Facebook の思い出に出てきたので、こっちにも転載ｗ

**並列：Parallel**
**並行：Concurrent あるいは Conccurency** 同時実行ともいわれる。同時並行と書かれている場合もある。

## 現代的マルチスレッドプログラミングにおいては...

並列(Parallel)とは「ある瞬間同時に処理されることを許容すること」
同時実行(Concurrency)とは「ある瞬間同時に処理し続けるために行うこと」

並列やパラレル(あえてカタカナ)あるいは、並行が混同されがちなのは、日本語の持つあいまいさもあるんだけど、昔からパラレルというと、SF世界の言葉として日本になじんでしまっているのが大きくて今でも混同されてる気がします。

最近は異世界ものと表現することが多くなったから、パラレルワールドとかあまり聞かなくなった気もするけど、情報源が偏ってる気もするので何とも…ｗ

Qiita ってタグ必須なのね。
A5M2でPostgreSQLに接続 - 列pd.adsrcは存在しません

#A5M2でPostgreSQLに接続すると「列pd.adsrcは存在しません」エラー

A5M2でPostgreSQLのDBに接続しようとすると以下のエラーが発生。
今までOracleかSQLServerしか使ったことがなかったので色々調べた結果解決した。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/910987/243adc00-116c-beef-5374-e1770e64c10c.png)

#結論：A5M2をバージョンアップしていなかった

使用していたA5M2のバージョンは Version 2.12.0 beta 7
インターネットで調べた以下の記事を発見。

[【不具合報告】接続エラー](https://a5m2.mmatsubara.com/wp/?topic=%E3%80%90%E4%B8%8D%E5%85%B7%E5%90%88%E5%A0%B1%E5%91%8A%E3%80%91%E6%8E%A5%E7%B6%9A%E3%82%A8%E3%83%A9%E3%83%BC)

>Version 2.15.0 beta 22でPostgreSQL 12 に対応しました。pg_attrdefシステムカタログで、adsrc列が削除されていたのが原因のようです。使用しているDB接続ライブラリである Devart社の UniDACでこの列を使用していたようなので、使用しないように修正したところ接続できるようになったようです。

とのことなので、公式ページから最新バージョンをダウンロード

[A5M2公式サイト](https://a5m2.mmatsubara.com/)

過去バージョンを削除し、新バージョンで接続確認。

無事に接続できました！
![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/910987/8e3f2372-a137-7399-862a-d9baa3b00316.png)
Herokuを使ったデプロイ手順

#はじめに
プログラミング初心者のメモ。
Herokuでデプロイしてみた覚書。

#手順　ーはじめてデプロイをする場合

1. Herokuにアカウント登録する
2. Heroku CLIをインストールする
3. 必要なGemを導入する
4. masterブランチへcommitする
5. Heroku上にアプリケーションを作成する
6. MySQLを使用できるように設定する
7. master.keyを環境変数として設定する
8. Herokuへアプリケーションの情報をpushする
9. Heroku上でマイグレーションを実行する

#手順　ーデプロイ済みのアプリケーションに変更修正を加えた場合

1. 変更修正をcommitする
2. ブランチを作成していた場合は、masterブランチへマージする
3. Heroku上にpushする
4. （テーブルに変更を加えた場合は）Heroku上でマイグレーションを実行する

#Basic認証を導入する
1. アプリケーションコントローラーのprivateメソッドに以下のように記述

```ruby.application_controller.rb

class ApplicationController < ActionController::Base
  before_action :basic_auth
(省略)

  private

  def basic_auth
    authenticate_or_request_with_http_basic do |username, password|
      username == 'admin' && password == '2222'
    end
  end
end
```
2. 挙動確認後、ユーザー名、パスワードを環境変数につっこむ

```ターミナル
% vim ~/.zshrc

# .zshrcの内部に次の記述を追加
export BASIC_AUTH_USER='admin'
export BASIC_AUTH_PASSWORD='2222'
# 記述を追加したら、escキーを押してインサートモードを抜け、「:wq」と入力して保存して終了する

# .zshrcを再読み込みし、定義した環境変数を有効にする
% source ~/.zshrc
```

3. アプリケーションコントローラーの記述も環境変数に変更する

```ruby.application_controller.rb
class ApplicationController < ActionController::Base
  before_action :basic_auth
 (省略)

  private

  def basic_auth
    authenticate_or_request_with_http_basic do |username, password|
     username == ENV["BASIC_AUTH_USER"] && password == ENV["BASIC_AUTH_PASSWORD"]  # 環境変数を読み込む記述に変更
   end
  end
end
```
4. Heroku上に環境変数を設定する

```ターミナル
% heroku config:set BASIC_AUTH_USER="admin" 
% heroku config:set BASIC_AUTH_PASSWORD="2222"

#ターミナル上で正しく設定されているか確認する
%heroku config

#以下のように表示されれば成功
=== stormy-journey-22625 Config Vars
BASIC_AUTH_PASSWORD:      2222
BASIC_AUTH_USER:          admin
```

5. 変更したコードをgitにコミットし、Herokuへデプロイする

```ターミナル
% git add .
% git commit -m “Basic認証を導入”
% git push heroku master
```
Riot.js でハローワールドまでが早くて簡単だった（環境構築）

# 前提条件
・macOS Catalina

# Riot.js
## Riot.jsとは
>フロントエンドの世界には、ライブラリが溢れてはいるものの、正直なところソリューションはまだ「そこにない」と感じています。私たちは、この大きなパズルを解くために、Riotという最良のバランスを見つけました。Reactが果たしかけたかに見えたものの、重大な弱点を残している点、それをRiotは解決します。

自動翻訳感が否めない日本語公式ドキュメントから引用
[Riot.js 日本語公式ドキュメント](https://v3.riotjs.now.sh/ja/ "Riot.js")


## 準備
```
$ npm init riot
````

上記コマンドを実行すると作成するパッケージの名前など、作成情報を聞かれます。
今回は動くところまでの確認なので最小限で

```
Press ^C at any time to quit.
package name: (riot-test) hello-riotversion: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/yutasato/dev/riot-test/package.json:

{
  "name": "hello-riot",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) 
```

yesを選択すると、作成するテンプレートの選択肢が表示されます。
SPAを選択してみます。

```
? Please select a template … 
  Webpack Project Template
  Parcel Project Template
  Rollup Project Template
  Simple Component
❯ SPA (Webpack) Project Template
  Custom Template (You will need to provide a template path to your template zip file)
```

ここで気づく。
（これ、ほぼなにもしないで終わるのでは・・・？）

```
✔ Please select a template · webpack-spa
✔ Downloading the template files
✔ Unzipping the file downloaded
✔ Deleting the zip file
✔ Copying the template files into your project
✔ Deleting the temporary folder
✔ Template successfully created!
```

ここからは無心で

```
$ npm install
```

## 準備完了！
readmeまで用意されている。
起動はnpm startでできる。

>## Start
>
>```
>npm start
>```


すると
![スクリーンショット 2020-11-26 11.09.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398540/2ee33621-5a92-365a-68cc-86fe7c19874a.png)
動く！
![スクリーンショット 2020-11-26 11.10.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398540/3cf265e7-aa51-7cef-4f67-993e14b25d6a.png)

# おわりに

先人様のおかげで、躓くことなくテンプレートページを表示するところまで凄い速さで辿り着けました。
（記事書いている時間のほうが長かったな。あとハローワールドじゃなかった。）

## 参考
・[Riot.js の開発環境構築に新たな革命が！](https://qiita.com/clown0082/items/9c908309c2031f398baf)
事前に調べた際に見たページはほぼこの方の記事でした。リンク先で本の宣伝されてます。

今回環境構築した際にはinitで聞かれる項目がリンク先記事より増えていたので、Riot.jsも細かくメンテナンス・アップデートされているのかなと感じました。
MacのSourceTreeで複数ファイルの変更を破棄する方法

こんにちは。小太り鳩です:angel_tone2:
最近開発環境がWindowsからMacに変わりました。
よっしゃ、これからガツガツ開発して行くぞーっと思っていた矢先、SourceTreeの項目が変わっていることに気づきました。

# あれ、変更箇所の破棄の項目がなくなっている…？ 
手元には1342ファイルのいらない更新差分。あとで破棄すればええやろとほっておいてメニューを見てびっくり。あれ・・・・「破棄」の項目なくね？

##Windowsメニュー
![windows.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114362/14e8064a-1acb-ce50-1767-6a0aec24704d.png)

##Macメニュー
![スクリーンショット 2020-11-26 11.05.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114362/72948b68-d558-dc45-d5d3-2c46b49290fe.png)

#単一のファイルメニューには破棄がある。がこれじゃない！！
どこだどこだと探したところ、単一ファイルの横についてる【・・・】の中に破棄を発見。
![スクリーンショット 2020-11-26 11.26.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114362/e16d7afa-5709-6966-e81b-bca5ebf51119.png)
ただこれ、本当に単一のファイルなので、私がやりたい複数ファイルの変更を破棄ではない。どこやねん！！

#解決「リセット」
結論としては【リセット】が私が思っていた挙動でした。
「破棄」と「リセット」・・・意味合いが全然違わない？

![スクリーンショット 2020-11-26 11.33.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114362/122da14d-550f-fc8a-e09c-7b67e3ada2b9.png)

![スクリーンショット 2020-11-26 11.05.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114362/e285e8e9-b440-6593-377f-1ae55560dd8f.png)

確認のアラート画面だと、破棄になってるからこれでいいはず:angel_tone1:

WindowsユーザーがMacに変えてちょっと戸惑ったところでした。お役に立てば幸い・・・。
ECSタスクへの機密情報の環境変数の設定

# 概要

[Twelve-Factor App](https://12factor.net/ja/config)でも述べられているように、アプリケーションの設定は環境変数にしておいた方が色々と取り回しが効きやすいです。
問題は、パスワードなどの機密情報をどう管理してどうデプロイするかにあります。
AWSとECSには機密情報を環境変数として管理する問題を解決するサービスと機能が存在します。
その利用方法を解説します。

# アーキテクチャ

環境変数を `AWS Systems Manager` の `パラメータストア` で管理します。
ECSタスク定義は `docker-compose` を利用します。
ECSとパラメータストアを連携させて環境変数を埋め込みます。

## 環境変数管理

環境変数はGithubやGitlabで設定できる機能もありますが、AWSを使っているのであれば `Systems Manager` の `パラメータストア` を使うのが便利です。

https://docs.aws.amazon.com/ja_jp/systems-manager/latest/userguide/systems-manager-parameter-store.html

理由としては以下が挙げられます。

- 機密情報管理とECSへの展開が容易でセキュア
- S3のようなパスで値を管理できる
- IAMポリシーを使ってアクセス制限をかけられる

### 機密情報以外の環境変数設定方法

`AWS Systems Manager > パラメータストア` 画面を開くと `パラメータの作成` ボタンがあるのでそれを実行します。

![スクリーンショット 2020-11-25 17.54.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538525/1bfcf480-75d3-ccce-8279-e5f26690ceb1.png)

作成画面が開くので、各項目を埋めていきます。

![スクリーンショット 2020-11-25 17.55.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538525/7b12f12d-c387-27e7-61ba-4bb8c665932b.png)

| 項目 | 説明 |
| --- | --- |
| 名前 | パス形式で環境変数名を設定します<br>パスの先頭とかどこかに環境名(dev/stg/prdなど）を入れておくと良いです |
| 説明 | 説明を記入します。入力なしでも問題ないです |
| 利用枠 | 通常は `標準` で問題ありません。詳細を使う場合はよく説明を読んで下さい |
| タイプ | 通常の利用の場合は `文字列` を選択します。機密情報を利用する場合は `安全な文字列` を選択します |
| データ型 | 通常の利用の場合は `text` で十分だと思います。詳細はAWSドキュメントを参照してください |
| 値 | 環境変数に設定する値を入力します |

各項目を入力して `パラメータを作成` を実行するとパラメータが作成されます。

### 機密情報の環境変数

パラメータを作成画面で項目 `タイプ` で `安全な文字列` を指定します。

![スクリーンショット 2020-11-25 18.07.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/538525/d4a60ecb-45ba-453c-784d-491a2f076692.png)

| 項目 | 説明 |
| --- | --- |
| KMSキーソース | 暗号化復号化のためのKMSキーのソースを指定 |
| KMSキーID | 使用するKMSキーIDを指定 |

通常は `現在のアカウント` のデフォルトのKMSキーIDで問題ないと思います。
各項目を入力して `パラメータを作成` を実行するとパラメータが作成されます。

## 機密情報をECSタスク定義に設定する

docker-compose形式でタスク定義する場合、

- docker-compose.yml
- ecs_params.yml

の2つのファイルを用意します。
docker-compose形式を使ったタスク定義などに関しては[以前書いた記事](https://qiita.com/edi_t/items/877243fb98a05c0db472)などを参照してください。
docker-compose.ymlには機密情報の環境変数は設定しません。
機密情報の環境変数は `ecs_params.yml` に設定します。

```docker-compose.yml
version: '3'
services:
  app:
    image: nginx
    ports:
      - "80:80"
:
#機密情報の環境変数は設定しない
```


```ecs_params.yml
version: 1
task_definition:
  services:
    app:
:
      # ここで機密情報の環境変数を設定
      secrets:
        # value_fromにパラメータストアで設定した環境変数名を設定
        - value_from: /dev/DB_USER
          # nameにアプリケーションで参照する環境変数名を設定
          name: DB_USER
        - value_from: /dev/DB_PASSWORD
          name: DB_PASSWORD
:
```

`secrets` に機密情報の環境変数を設定します。
`value_from` にパラメータストアで設定した環境変数名を設定します。
`name` にアプリケーションで参照する環境変数名を設定します。

https://docs.aws.amazon.com/ja_jp/AmazonECS/latest/developerguide/cmd-ecs-cli-compose-ecsparams.html

# まとめ

パスワードなどの環境変数として埋め込む機密情報の管理は厄介な問題でしたが、AWSを利用している場合は簡単に解決できます。
また、PEMファイルなどの認証鍵もbase64エンコードしてパラメータストアに登録しておくことで、ファイルとしてサーバやコンテナに置いておく必要がなくなります。
こういうときにクラウドサービスはすごい便利だと感じます。
パラメータストアを是非活用してみてください。
Notionで小数点を丸める

# 金額の場合

割り算をして小数点が現れたとき、フォーマットを`Yen`にすると自動的に小数点が四捨五入されます。

![Screenshot 2020-11-26 11.24.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224124/85259639-0265-5f56-ab5e-7c9af0348207.png)

# 割合の場合

一方、フォーマットを`Percent`にしたときは良きに計らってくれません。

![Screenshot 2020-11-26 11.29.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224124/08bb50dc-0fbb-ceea-c8b2-a28a7297ef97.png)


その場合は、`round`関数を用いて数字丸めをすればOK。とくに桁の指定はできないので、強制的に整数に丸めらます。

なのでこの場合は、小数点1桁まで%表記で欲しいとすると、一度1000をかけてそれを`round`して、最後に1000で割りなおせばOK。

![Screenshot 2020-11-26 11.29.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/224124/8efe22a7-9ccd-6485-df57-2ae1c7c13f64.png)
ESP32のデベロッパーボードでのプログラム書込みエラーのメモ書き

ちょっと、開発の一環で、スイッチサイエンスで発売されている、[ESPr® Developer 32 Type-C](https://www.switch-science.com/catalog/6364/)を使ったときに、発生したエラーについてのメモ。
<font color="Red">※2020/12/03現在、問題のないボードが販売されています。</font>

# 環境
 - Windows 10
 - Arduino IDE 1.8.13
 - ボードマネージャー：esp32 ver1.0.4

# どんなエラー？
上記開発ボードで、プログラムを書き込むと、
「A fatal error occurred: Failed to connect to ESP32: Invalid head of packet」
が発生した。

# 原因
　どうやら、2020/11/26時点に発売していたものについて、R10のプリント基板の位置にある、チップ抵抗(470Ω)が、実際のボード上に無いため発生していた。
そのため、USBからESP32に書き込まれるはずのデータが、上記チップ抵抗がない関係で、断線され、データが届かないという事態になっていた。

# 解決案
 - チップ抵抗を購入して自力で実装する。
 - ハンダで直接、短絡(ショート)させる。<font color="Red">←動作保証なし</font>

----
初投稿の記事なので、何かおいしくない所とかあれば、教えていただきたい。

2020/12/03 追記
問題のないボードが販売されているようです。
Oracle DBのマネージメントサービスを使用したくなった時にOCIとAWSのどちらにするか

ちょっと使ってみた上での感想。

Oracle DBのエンジニアが余ってて稼働を確保したい→OCI
Oracle DBが大得意なエンジニアがいてOracle DBの機能を活用したい→OCI
EEの機能を使いたい→OCI
Oracle DBを使わないといけないけど、Oracleの機能をあまり知らないので運用面としては他DBと同じように扱いたい→AWS
Oracle DBを酷使しないといけないけど、Oracleの機能をあまり知らないのでチューニングとかは自動でやってほしい、あとお金はたくさんある→OCI
なんとなくOracle DBをユーザー目線で使ってみたい→AWS
Oracle DBをどうしても運用したい→OCI
規模がでかい→OCI
それ以外、もしくは初心者→AWS
便利なjenkinsプラグイン紹介: Environment Injector

![eyecatch_2011JenkinsPlugin01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218415/263b284f-f811-67d5-29d9-284a66042789.png)

※ 本稿は <a href="https://tech.drecom.co.jp/?_src=qiita">Tech Inside Drecom</a> に掲載された記事、「<a href="https://tech.drecom.co.jp/jenkins-plugin-tips-environment-injector/?_src=qiita">便利なjenkinsプラグイン紹介: Environment Injector</a>」の Qiita 出張版です。

# 概要
こんにちは、エンジニアのondaです。モバイルゲーム運用に関わることなら何でもやっている昨今です。 ゲームなどの運用でCI環境(jenkinsなど)を使用することが多いと思いますが、何かこういうことがしたい、という時に標準機能だけでは実現できず、プラグインの力を借りることが多くあります。この記事では実際の業務においてこんな時役立った、と思う便利なjenkinsプラグインを紹介していきたいと思います。 今回は<a href="https://plugins.jenkins.io/envinject/" target="_blank">Environment Injector</a>を紹介します。

# どんな時に便利？
jenkinsジョブ内でExecute Shellを実行した時などに、実行した結果を次のシェルやPostbuild Processに渡したいことがありますが、例えば変数などに格納しても有効なのはそのシェルの中だけで、変数に格納しても次のプロセスに移ると消えてしまいます。 Environment Injectorを使うと、実行結果などの値をジョブ内で保持し、先のプロセスに渡すことができます。

## 使用例
リソースビルドのジョブで、出力されたリソースリストの名前をChatworkに通知したいとします。 リソースリストのファイル名は以下のコマンドで得られるとします。

``` bash
resource_version=`ls -t ../asset-archive/.archive_resource/resource_lists | head -n 1 | tr -d '.dat'`
```

リソースリストのファイル名が変数resource_versionに格納されますが、この値をChatworkで通知したい場合、Chatwork Pluginに渡す必要がありますが、この変数は上記のコードが書かれたシェルの中でのみ有効で、シェルの実行が終了すると消えてしまいます。 そこでまず、この変数を一時ファイルに書き出します。(一時ファイルは事前に削除する等して初期化しておきます)

``` bash
echo -e "resource_version=$resource_version" >> variables.txt
```

次のBuild StepにInject environment variablesを追加し、上記の保存したファイル名を指定します。

![p1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218415/df3e327b-e923-eb5a-a832-7917b5cbd884.png)


これで環境変数resource_versionに先ほど保存した内容が格納され、以後のステップで参照可能になります。 ファイルの中に複数の値が保存されていたら、それが全て環境変数として格納されるので、ファイルに値を保存する際には追記形式で追加していくのが良いでしょう。

### 結果をChatworkに投稿する
Chatworkへの通知はChatwork Pluginを使用して、以下のようにすればOKです。

![p2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218415/5b492fd2-3175-87dc-5abb-5b42b9ffba4c.png)

Chatworkには以下のようにポストされます。

![p3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218415/f634d825-8a25-6738-bf23-d58b7a3d3307.png)

### 後続のジョブに結果を渡す
また、次のジョブを自動で起動する際に結果を渡したい場合があります。その場合にもEnvironment Injectorで変数を拾った後、<a href="https://plugins.jenkins.io/parameterized-trigger/" target="_blank">Parameterized Trigger Plugin</a>を使うことで渡すことができます。

![p4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218415/b0294b5a-3c23-11e8-f84c-262ba9c0bf60.png)

# まとめ
jenkinsは総体としてとても複雑なシステムで、最初は戸惑ってしまうことが多いと思いますが、ネットで検索すると先人達のノウハウがたくさん出てきますので是非参考にしてみてください。この記事も困っている誰かの助けになれば幸いです。

Tech Inside Drecom の最新の情報は Facebook や Twitter からお届けしています、フォローよろしくおねがいします！
* Twitter: <a href="https://twitter.com/DRECOM_TECH" target="_blank">@DRECOM_TECH</a>
* Facebook: <a href="https://www.facebook.com/tech.inside.drecom" target="_blank">tech.inside.drecom</a>
※ その他の Tech Inside Drecom の記事は、<a href="https://tech.drecom.co.jp/?_src=qiita">コチラ</a>からお探しいただけます！

<a href="https://tech.drecom.co.jp/?_src=qiita">![picture_pc_842afe4c369ce3c3019e33e16729d2c6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218415/828e98dd-fd1a-89ac-73a5-366ba08062a5.png)</a>
unity2019LTSおよびunity2020LTSにスタンダードアセットを入れたあとのエラー回避方法

# この記事でできること
- unity2019LTS(2020/11/26時点)でスタンダードアセットを導入した際、必ず発生するエラーに対応することができます。
- unity2020LTS(2021/05/19時点)でスタンダードアセットを導入した際、必ず発生するエラーに対応することができます。
- スタンダードアセットは(2020/11/26時点)unity2018までの対応であることをお忘れなく…

# Unity2019の場合

## やること
- ファイルを2つ削除します。

### ForcedReset.csの削除

![スタンダードアセット記事a01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/8fd64e74-c8ad-3df2-0088-80e392caa7a0.png)

### SimpleActivatorMenu.csの削除

![スタンダードアセット記事a02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/6181af73-cb8a-87d1-efce-81e2b27ed4e6.png)

# Unity2020の場合

## やること
- ファイルをひとつ削除します。

### SimpleActivatorMenu.csの削除

- 下図のようなエラーが出ます。

![a01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/8cfba4a1-abab-9678-133a-405865bc381c.png)

- 下図のように、[Assets]-[Standard Assets]-[Utility]の中にある、「SimpleActivatorMenu.cs」を削除します。

![a02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/0fe813ff-a751-2fa5-0e5d-7237e373f2d6.png)


# まとめ
- スタンダードアセットの良い点はFPSコントローラーや車、飛行機など「すぐ動かせるモノ」があるため、プロトタイプづくりには良い活躍を見せてくれます。
- しかし、スタンダードアセット自体にはその他のパーツもたくさんあるため、ダウンロードに時間がかかったり、その後のプロジェクトの維持で容量を喰ったりするので、必要なオブジェクトに紐付けられるコンポーネントを把握しておくのが理想的ではありますね。

# こちらの記事もどうぞ
[unity2019LTSでスタンダードアセットのFPSコントローラだけインポートする方法](https://qiita.com/sanpeita/items/053f0ed2d19c5ad11bb9)
[iOS13]DeprecatedになったkeyWindowの取得方法

# 環境
- Xcode 12.1
- Swift 5.3

# 概要
`UIApplication` のプロパティである `KeyWindow` が
iOS13.0でDeprecatedになっていたので取得方法を修正する必要があります。
[Apple公式ドキュメント - keyWindow](https://developer.apple.com/documentation/uikit/uiapplication/1622924-keywindow)

(今更ですが)

# 取得方法
### 修正前
```swift
UIApplication.shared.keyWindow
```

### 修正後
```swift
UIApplication.shared.windows.first { $0.isKeyWindow }
```

参照: [stack overflow](https://stackoverflow.com/questions/57134259/how-to-resolve-keywindow-was-deprecated-in-ios-13-0)
WindowsでNimからMySQLにアクセスする


[こちら](https://qiita.com/6in/items/66c1a3d2d43b3b5cc869)のMySQL版です。
WindowsでNimからMySQLへのアクセスは問題ないだろうと思っていましたが、libmysql.dllを探す旅路がありました。

```nim
import db_mysql

let db = open("localhost","user","password","mysql")
```

```shell
# 安定のメッセージ
could not load: (libmysql.dll|libmariadb.dll)
```

## 結局のところ、MySQLの何をダウンロードすればよいのか？

https://dev.mysql.com/downloads/ にはいくつかの選択肢がありますが、`MySQL Community Server`のZip Archiveをダウンロードします。

![2020-11-26_09h38_55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58872/ea8a6582-bab1-46b8-4218-7492fa05e6ec.png)

ダウンロードしたZipファイルを解凍すると２箇所にDLLが入っています。
* `lib`フォルダに`libmysql.dll`本体
* `bin`フォルダに`libmysql.dll`が参照している`libssl-1_1_x64.dll`や`libcripto-1_1-x64.dll`などの関連DLL群

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58872/1f1d777b-201e-8916-f798-d2977bba7467.png)

## 思わぬ伏兵

上記のZipを解凍したファイルからDLLを抽出(もしくはパスを通して)して、nimでコンパイルをかけても、libmysql.dllが無いよと言われます。
Dependency Walkerで調べると見つからないDLL(vcruntime140_1.dll)があるようで、このファイルを調べてみるとMicrosoft Visutal C++のラインタイムに含まれているようなので、こちらをインストールします。

https://visualstudio.microsoft.com/ja/downloads/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58872/47863408-6ecf-c2f8-ebe4-e77ee9a027f4.png)

### 解決された依存関係

![2020-11-26_09h57_45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58872/d1a579f5-8f80-5299-42ee-6b250ab904cd.png)

## まとめ的な何か

MySQLもインストーラがあるから簡単にアクセスできるだろうと思っていたのですが、なかなかに面倒でした。

* Community ServerのZipアーカイバをダウンロードし、DLLをかき集める
* VisualStudio2019の再配布可能パッケージをダウンロードし、インストールする

### サンプルコード

```nim
import db_mysql

const host_port = "localhost:13306"
const user_name = "docker"
const password  = "docker"
const database  = "test_database"

block:
  let db = open(host_port,user_name,password,database)
  echo "opened"
  defer:
    db.close()
    echo "closed"
  for x in db.fastRows(sql"SELECT database()"):
    echo x
```

実行結果

```shell
opened
@["test_database"]
closed
```
【Rails】部分テンプレート(render)で別のコントローラーのビューを呼び出す方法

#はじめに
違うファイルのビューを他のファイルのビューに表示さる際、部分的にそのビューをrenderで呼びだすことができます。
そんな、部分テンプレートの方法について紹介します。

###目次
1. 部分テンプレートファイルの名前について
2. renderで呼び出す
3. コントローラーへの定義

#開発環境
ruby 2.6.5
rails 6.0.0


#実装
それでは実装していきます〜


#1. 部分テンプレートファイルの名前について

まず、部分テンプレートとしてビューファイルを作成する時は`_index.html.erb`のようにファイル名の前に`_`（アンダースコア）をつけます。

![スクリーンショット 2020-11-23 5.40.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/769854/c622d7d1-df74-6c5b-791b-23f5057e0ce3.png)

今回はproductsコントローラーのビューを部分テンプレートとして使いたいので、`products/_index`となるようにファイル名を編集すます。







#2. renderで呼び出す

次にテンプレートする側に`render`メッソドを記述します。
今回は以下の記述をします。

```ruby:app/views/tops/index.html.erb
#省略
<%= render partial: "products/index" %>
```
構文はこちらです。

```
render partial: コントローラー名/ファイル名
```

partialオプションは部分テンプレートを呼び出す時に使います。ただ、強調しているだけ、つけなくても呼び出せます。


![スクリーンショット 2020-11-23 5.48.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/769854/785d03de-6e4c-c4b2-b172-5e08a4ed148c.png)


これで完成！！と思ったのですが、今回`@products`を定義してProductモデルからデータを取得してビューに表示してる為、topsコントローラーでも定義が必要です。








#3. コントローラーへの定義
保存したデータを呼び出す場合コントローラーで`インスタンス変数`にデータを代入してビューで使用します。

productコントローラーで動かすのであればそちらに`@products`を定義しますが、今回はtopsコントローラのアクションが動くのでそちらで定義する必要があります。

```html:app/views/products/_index.html.erb
<h1>Products#index</h1>
<p>Find me in app/views/products/index.html.erb</p>

<div class="#">
  <% @products.each do |product|  %> #ここで@productsを定義してるので、コントローラーでも定義が必要です。
    <%= product.name %>
    <%= product.text %>
  <% end %>
</div>
```
この`products/_index.html.erb`が部分テンプレートとして呼び出されるので、呼び出された側の`tops_contller.rb`でも`@products`定義が必要です。


```ruby:app/contollers/tops_contller.rb
class TopsController < ApplicationController
  def index
    @tops = Top.all
    @products = Product.all #部分テンプレートで_index.htmlを表示させる為の定義

  end
```

これで完成です！！！


#まとめ
以上部分テンプレートの手順でした。
用途に応じて他にもやり方がありますが、今回はこの方法で実装してます。


###最後に
私はプログラミング初学者ですが、自分と同じ様にエンジニアを目指す方々の助けになればと思い、記事を投稿しております。
それではまた次回お会いしましょう〜
vagrant upコマンドで急にエラーが出るようになった時のメモ書き

#####環境

macOS
VirtualBox
Vagrant2.2

##### vagrant upコマンドでエラー

macOSをバージョンを11.0(Big Sur)にアップグレードして、vagrant upコマンドを実行したら、下のエラーが出るようになりました。

```
$ vagrant up
Bringing machine 'default' up with 'virtualbox' provider...
==> default: Clearing any previously set network interfaces...
There was an error while executing `VBoxManage`, a CLI used by Vagrant for controlling VirtualBox. The command and stderr is shown below.

Command: ["hostonlyif", "create"]

Stderr: 0%...
Progress state: NS_ERROR_FAILURE
VBoxManage: error: Failed to create the host-only adapter
〜
```

下記サイトに書いてあるように、VirtualBoxを最新版にして、セキュリティとプライバシーの設定画面でアプリケーションの実行許可をしたら解決できました。

[vagrant upコマンドでエラーが発生して起動しない【macOS11.0.1アップグレード時】](https://it-jog.com/khow/vag/vagnotup)
【-bash: export: `=': not a valid identifier】環境変数の設定の注意事項 

# エラー
環境変数を設定する際に

```
-bash: export: `=': not a valid identifier
```

というエラーが吐かれた。

# 解決策
環境変数を設定する際に、
`
export 環境変数="変数名"　○
export 環境変数 =   "変数名"　☓
`

のように<font color="Red">環境変数と変数名の間に半角スペースを開けてはならない。</font>

開けるとエラーが発生する。
32桁の乱数を作成したい時

APIKEYを作成したい時など、乱数が欲しいときなど
バッチで手軽に使用できるコマンドです。

---

32桁の英数字+記号の乱数を作成します。
以下のファイルを作成してください。

```ransu.bat
@echo off
powershell -NoProfile -ExecutionPolicy Unrestricted -Command "& { $char='abcdefghkmnprstuvwxyzABCDEFGHKLMNPRSTUVWXYZ123456789!$^&/()=?*+#_'; -join ${char}[(1..32 | ForEach-Object { Get-Random -Maximum ${char}.length })] }"
pause
```

あとは作られたransu.batをダブルクリックしてください。
以下のように出ればOK
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172553/f34a1f62-9e46-e4a6-058d-c14c26ed035c.png)

英数字のみの場合

```ransu_eisu.bat
@echo off
powershell -NoProfile -ExecutionPolicy Unrestricted -Command "& { $char='abcdefghkmnprstuvwxyzABCDEFGHKLMNPRSTUVWXYZ123456789'; -join ${char}[(1..32 | ForEach-Object { Get-Random -Maximum ${char}.length })] }"
pause
```
よく使うコマンド、rsync,find,gitとか

よく使うコマンドのメモ書き

##### rsync

ディレクトリの同期をとる（差分のみコピーする）

```
$ sudo rsync -av tmpdir/ /var/www/html/ --delete --exclude='.git' --exclude='.gitignore'
```

上のrsyncコマンドは、tmpdirディレクトリと/var/www/html/ディレクトリの同期をとります。同期元がtmpdirで、同期先が/var/www/html/です。

初回は、tmpdirディレクトリ配下を/var/www/html/配下にコピーし、２回目以降は差分のみコピーすることになります。

また、--excludeオプションは同期対象外とするディレクトリやファイルのパスを指定します。上のコマンドでは、.gitディレクトリと.gitignoreが同期対象外です。
また、--excludeのパスの基点は、tmpdirディレクトリになります。コマンドを実行している場所が基点ではないです。
また、--deleteオプションは同期元にないファイルを同期先から削除します。

参考サイト
[【 rsync 】コマンド（その1）――ファイルやディレクトリを同期する](https://www.atmarkit.co.jp/ait/articles/1702/02/news031.html)

##### find

カレントディレクトリ以下でeclipseという名前が付くファイルとディレクトリを検索する

```
$ find . -name "*eclipse*"
```

ファイルとディレクトリのどちらか１つを検索対象にしたい場合は-typeオプションを使う

```
$ find . -name "*eclipse*" -type d
$ find . -name "*eclipse*" -type f
```

findの検索結果のファイル全てに対してコマンドを実行したい場合、「-exec コマンド {} \\;」を付ける

```
$ find . -name "hoge*" -type f -exec コマンド {} \;
```

参考サイト
[【find】Linuxでファイル・ディレクトリ検索をするコマンド](https://uxmilk.jp/8583)


検索するファイル名・ディレクトリ名の大文字小文字の区別をしたくない場合、-inameオプションを使う。だから下の３つのコマンド結果は同じになる。

```
$ find . -iname "*eclipse*"
$ find . -iname "*Eclipse*"
$ find . -iname "*ECLIPSE*"
```


##### git

新規に追加したファイルやディレクトリ（Untracked files:）を削除する（元に戻す）

```
$ git clean -df
```

[untracked fileを削除するためにはgit cleanを使う](https://qiita.com/tmyn470/items/c8359e4ec92d1f462bdf)
【Visual Studio Code】タグの中に入れ込む文字列を展開前の段階で書けるEmmetを紹介

#便利なVScodeのEmmetを紹介
{}でタグの中に入れ込む文字列を展開前の段階で書き込むことができます😊
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます😄<br><br>💥VScodeのEmmetを紹介<br><br>{}でタグの中に入れ込む文字列を展開前の段階で書き込むことができます😊<br><br>参考：<a href="https://t.co/pXcavwPpdC">https://t.co/pXcavwPpdC</a> <a href="https://t.co/MAG7wRvscE">pic.twitter.com/MAG7wRvscE</a></p>&mdash; ミキ🐹@プログラミング (@mikiprogram) <a href="https://twitter.com/mikiprogram/status/1331691931340992513?ref_src=twsrc%5Etfw">November 25, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#参考
[【高速コーディング】Emmetを使ってみよう!](https://qiita.com/Eki-in-san/items/790b7c2ba2bec1087aaa)