OmniAICreator/Qiita-1.07M huggingface dataset:
【CSSフレームワーク Zurb Foundation】"グリッドシステム"を使った超シンプルなサンプルを作りました。

CSSフレームワーク『Zurb Foundation』の"グリッドシステム"を使ったサンプルについてです。

普段から使っているCSSフレームワーク『BootStrap』ではWebページを作成する際にページの幅を12等分に分割にした"グリッドシステム"が採用されています。

"グリッドシステム"を採用する利点として"シンプルに開発・改修がしやすい"ことが挙げられます。

さらにエンジニアにとっても"グリッドシステム"は共通の概念ですので、Bootstrapに限ったことではなく他のCSSフレームワークでも活用できると考えたのがきっかけです。

めちゃくちゃシンプルですが、本題の"Zurb Foundation"で"グリッドシステム"でサンプルを作りました。

```sample.html
<!DOCTYPE html>
<meta>
<head>
<!--Foundation 共通-->
<!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css" integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossorigin="anonymous">

<!-- Compressed JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js" integrity="sha256-pRF3zifJRA9jXGv++b06qwtSqX1byFQOLjqa2PTEb2o=" crossorigin="anonymous"></script>
<!--個別ファイル-->
<link rel="stylesheet" href="./index.css" />
</head>
<body>
    <!--グリッドシステムを導入する--> 
    <div class="grid-container fluid">
        <!--/* grid-xプロパティを使って1行分のスペースを取得する*/ -->
        <div class="grid-x"><!-- grid-margin-x-->
            <!--/* small -*プロパティを使ってカラム幅を分割・取得する。*/-->
            <div class="cell small-4">
                <!--Label「名前（姓）」エリア-->
                <div class="firstNameLabelArea">
                    <label class="fistNameLabel">
                        名前（姓）
                    </label>
                </div>
                <!--input「名前（姓）」エリア-->
                <div class="firstNameInputArea">
                    <input type="text" class="firstNameInputClass" id="firstNameInput" />
                </div>
            </div>
            <!--/* small -*プロパティを使ってカラム幅を分割・取得する。*/-->
            <div class="cell small-4">
                <!--Label「名前（名）」エリア-->
                <div class="lastNameLabelArea">
                    <label class="lastNameLabel">
                        名前（名）
                    </label>
                </div>
                <!--input「名前（名）」エリア-->
                <div class="lastNameInputArea">
                    <input type="text" class="lastNameInputClass" id="lastNameInput" />
                </div>
            </div>
            <div class="cell small-4">
                small-4分のカラムスペース
            </div>
        </div>
    </div>
</body>

</html>
```

なじみのあるBootstrapだけでなく他のフレームワークも触ることで両者の違いやクセは、把握しておくことが重要だと感じました。


【参考サイト】
■公式 Zurb Foundation XY Grid
URL：https://get.foundation/sites/docs/xy-grid.html

■foundation6とSassでサイトをつくる XY Gridとは　V6.4から導入されたXYグリッドを使いこなす方法
URL：https://foundation-site.com/archives/535.html

■stack overflow Deciding when you need a new grid-x “row” in Foundation 6 XY grid
URL：https://stackoverflow.com/questions/50538650/deciding-when-you-need-a-new-grid-x-row-in-foundation-6-xy-grid
galprogのWin対応

手元にWinしかないのでMac OS Xで作った[galprog](https://qiita.com/yamori813/items/56c53f78d6ced175f2b4)をVisual StudioでWinのコマンドを作ってみた。

いじったのはこんなとこ。

https://github.com/yamori813/galprog/commit/9be7ea9dcda8e1c8919e203a9b1c5d3b1b4744f9

これでプロジェクト作って、FTDIのサイトからダウンロードしたftd2xx.hとftd2xx.libをコピーしてプロパティのC/C++,プリプロセッサに_CRT_SECURE_NO_WARNINGSを追加してビルドするとコマンドができる。

Win7なノートにはVisual Studioは重すぎて使いにくいし、gitのコマンドも入ってなくて、こんだけの修正に半日くらいかかりました。

Win環境でのBitBangはFT_Progで245 FIFOに設定が必要です。

![FTP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/11beece8-b517-5b21-e850-e7f1e62a3286.png)

自分が作ったライターは秋月のFT2232Dのモジュールを使っていてこのモジュールにはEPROMが付いてないので、付けないとBitBangで使用出来ません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/0e899785-dc6f-cf83-1e86-9eb94a720375.png)
Djangoで独自トップページを爆速（5分）で表示させる

Djangoをインストールし簡易サーバーを起動するとロケットが飛んでいる初期画面が表示されますが、今回はテンプレートを通じて「Hello Django world !!」と表示させます。
コピペすれば5分もかからないで表示できると思います。

* 作成環境
 * MacOS Catalina 10.15.7
 * Python 3.8.5

## 1.ターミナルより

venv仮想環境にDjangoをインストール

```
$ python -m venv venv
$ . venv/bin/activate
$ pip install django
```
プロジェクトおよびアプリの作成

```
$ django-admin startproject config .
$ python manage.py startapp app
```

templatesフォルダと各ファイルの作成

```
$ mkdir templates
$ touch {templates/index.html,templates/base.html,app/urls.py}
```
以下の通り、フォルダ・ファイルが配置されました。
![スクリーンショット 2021-07-11 18.41.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128611/cdb46d5e-df9c-a7fa-e693-44e658d3608a.png)



## 2.各ファイルの作成・追記

config/settings.pyを以下の通り追記・修正します。

```config/settings.py
# osモジュール追記
import os

INSTALLED_APPS = [
  # 作成アプリを追記
  'app.apps.AppConfig'
]

TEMPLATES = [
  {
    #テンプレートディレクトリパスを追記
    'DIRS': [os.path.join(BASE_DIR, 'templates')],
  },
]

# 言語コードとタイムゾーンを修正
LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'
```

ビュークラスを作成し表示させるテンプレート（index.html）を定義します。

```app/views.py
# 追記
from django.views.generic import TemplateView

class IndexView(TemplateView):
    template_name = 'index.html'
```

config/urls.pyとapp/urls.pyを紐付けます。

```config/urls.py
# include追記
from django.urls import path,include

urlpatterns = [
    # 追記
    path('',include('app.urls'))
]
```

ルートディレクトリに表示させるビューを定義します。

```app/urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('', views.IndexView.as_view(), name='Index'),
]
```

ベーステンプレートを記述します。

```base.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>title</title>
{% block script %}{% endblock %}
</head>
<body>
{% block contents %}{% endblock %}
</body>
</html>
```
トップページに表示させる「Hello Django world !!」をテンプレートタグ内に記述します。

```index.html
{% extends 'base.html' %}

{% block script %}
{% endblock %}

{% block contents %}
<h1>Hello Django world !!</h1>
{% endblock %}
```

## 3.サーバー起動
ターミナルより簡易サーバーを起動します。

```
$ python manage.py runserver
```
狙い通りに「Hello Django world !!」と表示されました。
![スクリーンショット 2021-07-11 17.50.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128611/137d6455-c0be-adb2-f49b-d06650f5f2a2.png)
Reactにおけるアロー関数の省略について

# はじめに
アロー関数の省略方法たくさんありすぎて分からなくなったのでまとめる。

# アロー関数とは
Reactではhooksの登場によりクラスコンポーネントではなく関数コンポーネントが主流になっている。関数コンポーネントでもfunctionを使うか、アロー関数を使うかで分かれる。アロー関数は短く書くことが可能であり、定義された時点でthisが固定されるためバグが少なくなるなどの理由からアロー関数が使われることが多い。しかし、アロー関数の省略の仕方がいろいろあって逆にややこしい。正直省略しなくても統一した方が見やすいのでは？と思うが、webの人はとにかく楽に書きたがる傾向があるので省略と可読性のバランスとは一生付き合っていくことになりそう。

ということでcodesandboxでいろいろ試してみようと思います。

# Javascriptにおける省略しないアロー関数

```js
const Hello = () => {
  return "Hello";
};

document.getElementById("app").innerHTML = Hello();
```
普通のアロー関数。Helloが出力されます。

# Javascriptにおける省略したアロー関数

```react
const Hello = () => "Hello";

document.getElementById("app").innerHTML = Hello();
```
こちらが省略したアロー関数。知っている人は多いでしょうが、何を省略しているのかを再確認しましょう。アロー関数では1行でreturn文が書ける場合returnが省略できます。また{}も絶対省略しなければなりません。

```js
const Hello = () => {"Hello"};

document.getElementById("app").innerHTML = Hello();
```
この出力はundefinedとなり、このような記述は出来ませんでした。codesandboxで実行したのですが、なぜか正直理解していません。まあこんな風に書くことはないので大丈夫でしょう。

追記：コメントで指摘していただいた通り、構文が違うので{ }は利用できないようです。ご指摘ありがとうございます。

要するに１行のみの場合、returnと{ }を省略できます。

# Reactにおける省略しないアロー関数

```react
export const Hello = () => {
  return (
    <>
      <h1>Hello</h1>
      <h2>World</h2>
    </>
  );
};
```
Reactによくある普通の関数。

# Reactにおける省略するアロー関数

```react
export const Hello = () => (
  <>
    <h1>Hello</h1>
    <h2>World</h2>
  </>
);
```
これが一番分からなくなる省略の仕方です。これもreturnと{ }を省略しているのですが、Reactで複数行のJSXを返す場合は( )で括ります。その結果returnと{ }が消えて( )だけが残り、あたかも{ }の代わりに( )が用いられているように見えます。この書き方はそんなに楽になっていないのに、可読性は低くなってるように思うので個人的には使いたくないです（出来れば使ってほしくもない）。

```react
export const Hello = () => <h1>Hello</h1>;
```
これは返すJSXが一行のみの場合で、returnと{ }も省略してます。これはなしではないかなと思います

```react
export const Hello = () => {
  return <h1>Hello</h1>;
};
```
これは返すJSXが一行の場合で、( )のみを省略し、returnと{　}は省略していません。C言語をやっていたので、個人的にはこっちの方が「関数！」って感じがして分かりやすいと思うのですがどうなんでしょう。コードが長くなるのは事実ですし、現場によって変えていくのが理想でしょうか。

# おわりに
複数行のJSXを返すアロー関数を書く際にreturnと{ }を省略しないでほしい。

# 参考文献
[1]:https://keita-blog.com/programming/arrow-function
[[1]]:【JavaScript】function()ではなくアロー関数を使うメリット
firestoreにてUnsupported field value: a function (found in field updatedAt in document xxx) でエラが出る... ...

firebaseにて

````````
Unsupported field value: a function (found in field updatedAt in document xxxx)
````````

のエラーが出て1時間これに悩まされた。
筆者の場合は登録するupdatedAtのあたいが

```
firebase.firestore.Timestamp
```

だったため、エラーが出た。
正しくは

```
firebase.firestore.FieldValue.serverTimestamp()
```

と書くとtimastamp型には登録が可能
アップデート関数のコンポーネント化

# はじめに
ゲームオブジェクトのアップデート関数をコンポーネント化して一括で更新できるようにします。

#1.アップデート関数
よくあるアップデート関数として描画関数draw()を作ることがあるかと思います。

```C++
struct PLAYER {	void draw(){} };
struct ENEMY  {	void draw(){} };

void main(){

	PLAYER	player;
	ENEMY	enemy;

	player.draw();
	enemy.draw();
}
```

このやり方は直感的で初期は作成が容易ですが、作成が進むにつれて下記のような問題が出てきます。

1.アップデート関数の種類が増えるたびに呼び出しの記述を追加する必要がある

```C++
struct PLAYER {
	void draw(){}
	void secall(){} // secall を追加、main()でplayer.secall()を忘れずに追加しないと...
};
```

これは下記のようにUpdate()のようなメソッドを用意することで多少緩和できますが、追加そのものはコードのどこかで必ず発生します。

```C++
struct PLAYER {
	void draw(){}
	void secall(){}

	void Update(){ // main()では player.Update() だけでよくなり修正は不要になる
		draw();
		secall(); // Update()内への追加はやっぱり必要
	}
};
```



2.関連するメンバ変数が増えていくと変数名の管理が大変になってくる

```C++
struct PLAYER {
	int draw_timer; // どのアップデート関数で使うか名前を区別しないと...
	int secall_timer;

	void draw(){}
	void secall(){}
};
```

変数名のコーディングルールで解決する方法もありますが、変数名が長くなりがちですし、PLAYERクラス直下の変数自体は増えていくので、だんだんと見通しが悪くなっていきます。


#2.コンポーネント化
drawやsecallをコンポーネント化することでこれらの問題を解決していきます。

まず、それぞれのアップデート関数をクラスにします。

```C++
struct ACTION_DRAW {
private:
	timer; // 衝突しない！
public:
	void Update(){}
};

struct ACTION_SECALL {
private:
	timer; // 衝突しない！
public:
	void Update(){}
};
```

クラスにすることで関連するメンバ変数のスコープが小さくなり、名前の管理が容易になります。
そして、これらのクラスを継承して、それぞれのUpdate()をまとめて呼び出しします。

```C++
struct PLAYER : ACTION_DRAW,ACTION_SECALL {
	void Update(){
		ACTION_DRAW::Update();
		ACTION_SECALL::Update();
	}
};
```

ただ、このままではアクションを追加するたびにUpdate()の修正が必要なことに変わりはありません。

#3.パラメータパックの展開
パラメータパック展開を利用することで、追加の記述を自動化することができます。

```C++
template<typename... TYPE>struct ACTION : TYPE... {
public:
	ACTION() : TYPE{}...{}

    template<class TUPLE, std::size_t...INDEX>void updater( const TUPLE*, std::index_sequence<INDEX...>){
        using EXPANSION = int[];

        ( void )EXPANSION{ ( std::tuple_element_t<INDEX,TUPLE>::Updater() , 0 )... };
    };

public:
    virtual void Updater( void ){
		using TYPE_PACK = std::tuple<TYPE...>;

		updater( ( TYPE_PACK* )nullptr, std::make_index_sequence<std::tuple_size_v<TYPE_PACK>>{});
	}
};
```

使い方は上記のtemplateにアクションクラスをパラメータで渡して継承させます。

```C++
struct PLAYER : ACTION<ACTION_DRAW,ACTION_SECALL>{};
struct ENEMY  : ACTION<ACTION_DRAW>{}; // ENEMY はSECALL不要

void main(){

	PLAYER	player;
	ENEMY	enemy;

	player.Update(); // ACTION_DRAW::Update()とACTION_SECALL::Update()が呼ばれる
	enemy.Update();  // ACTION_DRAW::Update()だけ呼ばれる
}
```

各アクションのUpdate()の呼び出しの記述はコンパイラがパラメータパックで行ってくれます。修正箇所が1ヶ所になるので、修正漏れによるUpdate()の呼び忘れがなくなります。

#4.使い方
ゲーム的な使い方としては下記のような感じで使うと便利かと思います。

```C++
struct ACTION_MOVE{ void Update(){} };
struct ACTION_JUMP{ virtual void Update(){} };
struct ACTION_ATTACK{ void Update(){} };
struct ACTION_MAGIC{ void Update(){} };
struct ACTION_GUARD{ void Update(){} };

struct ACTION_JUMP2 : ACTION_JUMP { void Update() override {} }; // 二段ジャンプ

// キャラの職業で使用可能なアクションをパラメータで渡す
struct WARRIOR : ACTION<ACTION_MOVE,ACTION_JUMP, ACTION_ATTACK,ACTION_GUARD>{};
struct WIZARD  : ACTION<ACTION_MOVE,ACTION_JUMP2,ACTION_MAGIC>{};
```

持たせるアクションの種類はコンパイル時に静的に決まるので、アクションの付け替えのようなことはできませんが、アクション毎にメンバ変数を持てるので柔軟はそこそこあるかと思います。

#5.おわりに
各アクションのUpdate()を引数にオブジェクトのポインタを渡せるように改良すれば、オブジェクトや他のアクションのメンバを参照することも可能になります。
PHP基礎忘備録

#PHP忘備録
PHPの学習における自分用の忘備録です。

##MAMPのインストール
https://www.mamp.info/en/downloads/

インストールを終えたら、Preferenceから各設定を行う
General
ここでは、MAMPのスタートとストップ時に行う動作を設定する
例えば、MAMPを立ち上げと同時に、サーバも起動する等

Ports
ここでは、アクセスする際のポート番号を設定する
基本的にサーバは８０ MySQlなら3306の初期設定を採用してれば問題ない
MAMPdefaultでもいいが、初期設定の方が他の文献を見る際も、脳内変換しなくていいので楽

Server
Document root　ここでアプリケーションへのアクセスのエントリポイントを設定

Cloud
現状使用していないので割愛(使用機会に恵まれたら追記します)

学習内容を今後も追記していきます。

##PHP基礎
PHPタグ(HTML内)

```.php
<?php -ここの中にPHPのコードを書く- ?>

<?php echo "表示" ?> //=>表示
↓省略版
<?="表示"?>//=>表示

<?=  >と<?php echo ~ ?>は同じである
```
Joystick Pack(Unity Asset)で1回目だけコントローラーが表示されないときの対応方法

[Joystick Pack](https://assetstore.unity.com/packages/tools/input-management/joystick-pack-107631?locale=ja-JP) を Floating で利用すると、1回目の操作のときだけタップしたところにコントローラーが表示されないバグがありました。その修正方法です。

# 対応方法
Joystock.cs の ScreenPointToAnchorePosition メソッドに以下3-6行目のコードを追加します。

```C#
    protected Vector2 ScreenPointToAnchoredPosition(Vector2 screenPosition)
    {
3        if (cam == null && canvas.renderMode == RenderMode.ScreenSpaceCamera)
4        {
5            cam = canvas.worldCamera;
6        }
        Vector2 localPoint = Vector2.zero;
        if (RectTransformUtility.ScreenPointToLocalPointInRectangle(baseRect, screenPosition, cam, out localPoint))
        {
            Vector2 pivotOffset = baseRect.pivot * baseRect.sizeDelta;
            return localPoint - (background.anchorMax * baseRect.sizeDelta) + pivotOffset;
        }
        return Vector2.zero;
    }
```

# 補足
上記対応しないと cam に canvas.worldCamera が設定されないまま位置計算されて、canvas の scale が考慮されていないに位置に Joystick が表示されます。2回目以降は、FlotingJoystick.cs の OnPointerDown -> base.OnPointerDown(eventData) -> Joystick.cs の OnDrag の中で cam が設定されるので問題にならず、タップした位置にコントローラーが表示されます。

## 所感
こういう特定の条件下において1回目以降は正常に動くパターンみたいなのはAssetとしても対応が難しいものだなと思いまました。
自社系の外部発信のフィードを取得してSlack投稿する

# TL;DR

* 技術広報的な仕事で、外部発信系のRSSフィードを、Slackのチャネルに統合すると捗った
* 各サイトのRSSフィード先をメモします

# 背景

技術的な外部発信（技術広報）をがんばろうとすると、様々なチャネルを用意することになると思います。

それぞれのメディア自体が異なる（テキスト、スライド、音声、動画など）のため、運営形態も異なることが多く、そうすると運営者が異なり他のチームとの連携漏れがでることもあり得ると思います。

そうしたときは、少なくても投稿した後にそれなりのスピードで認知するためにSlackでRSSフィードを飛ばすことも有効だと思います。

SlackのあるチャネルにRSSフィードを連携するのは簡単にできます（公式にもサポートしている手続きがあります。）

https://slack.com/intl/ja-jp/help/articles/218688467-Slack-%E3%81%AB-RSS-%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B

こんな感じで連携してくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/6463/8c29bb19-9f21-c4cd-eb29-f2caea40c8cf.png)


次に各媒体のRSSフィードを共有します。

# RSSリード

2021.7.11時点で所属している自社のフィードです。

* **フューチャー技術ブログ**
    * https://future-architect.github.io/atom.xml
* **PR TIMES（フューチャー株式会社）**
    * https://prtimes.jp/companyrdf.php?company_id=4374
* **ポッドキャスト（Anchor - Future Tech Cast）**
    * https://anchor.fm/s/2890e980/podcast/rss
* **Connpass（フューチャーの新着イベント）**
    * https://future.connpass.com/ja.atom
* **Qiita Organization（フューチャー株式会社）**
    * https://qiita.com/organizations/future/activities.atom
* **Youtube**
    * https://www.youtube.com/feeds/videos.xml?channel_id=UCJUSwYYd0CkGgmEKAW7QVpw
* **GitHub**
    * Organizationの新規リポジトリ追加はウォッチはこちら
        * https://github.com/future-architect.atom
    * バージョン管理されている活発なリポジトリをポチポチ登録するのが良さそう
        * https://github.com/future-architect/cheetah-grid/releases.atom
        * https://github.com/future-architect/eslint-plugin-vue-scoped-css/releases.atom
        * https://github.com/future-architect/uroborosql/releases.atom
* **Kaggle**
    * https://www.kaggle.com/futurecorporation
    * データセットとコードを公開していて、活動をウォッチしたいがRSSフィードが取れない？

# まとめ

各技術発信のRSSフィードまとめでした。
【Laravelクエリビルダ】1時間ごとにgroupByして集計する方法

laravelで1時間ごとにグループ化させて集計する方法を簡単に解説します。

バージョンは6系です。

ブログで以下のような記事も書いています。

https://www.kamome-susume.com/enginner-job-change-site/

## ゴール

| 時間 | 合計 | 
|:-:|:-:|
|  12:00〜12:59 |  200 | 
|  15:00〜15:59 |   300| 
|  19:00〜19:59 |   500| 

## 準備
postsテーブル

| post_id | amount | created_at |
|:-:|:-:|:-:|
|  1 |  100 |  2021-06-01 12:23:07 |
|  2 |   200|  2021-06-15 15:23:23 |
|  3 |   300|  2021-06-30 16:21:12 |
|  4 |   400|  2021-07-21 19:23:32 |
|  5 |   200|  2021-07-27 15:04:56 |

ここから、created_atの時間でグループ化させて合計値を出します。

##　考え方
HOUR関数を使用することで、時刻から時を取り出すことができます。

## サンプルコード

モデル(Post.php)

```
<?php

namespace App;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Facades\DB;←忘れず記載する

class Post extends Model
{
    public function getAmountByHour()
    {
      return DB::table('posts')
              ->selectRaw('HOUR(created_at) AS time')
              ->selectRaw('SUM(amount) as total_amt')
              ->groupBy('time')
              ->get();
    }
}

```

`selectRaw`はselect(DB::raw)の短縮系です。HOUR関数で2021-06-08 12:34:55
の12時を取り出すことができます。

あとは時間でグループ化させれば集計できます。

コントローラー(PostController.php)

```
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Post;←バージョン8系なら use App\Models\Post;

class PostController extends Controller
{
    public function index()
    {
        $this->posts = new Post();

        $results = $this->posts->getAmountByHour();

        return view('posts.index', compact(
            'results',
        ));
    }
}

```

ビュー(index.blade.php)

```
<table>
    <thead>
      <tr>
        <th>日付</th>
        <th>合計</th>
      </tr>
    </thead>
    <tbody>
    @foreach ($results as $result)
      <tr>
        <td>{{ $result->time }}:00〜{{ $result->time }}:59</td>
        <td>{{ $result->total_amt }}</td>
      </tr>
    @endforeach
    </tbody>
</table>
```

$resultsにはモデルで取得したデータがコレクション型で格納されています。なので、foreachで取り出しましょう。

以下のようにデータが取得できました。

![スクリーンショット 2021-07-11 18.21.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1693248/5754c15d-433f-faf9-6e2c-54402ac5a607.png)

今回は、時間でグループ化させる方法を見てきました。

このほかにも私の記事でlaravelのクエリビルダを解説しているので、ぜひ他の記事も見てくださいね！

記事が参考になったら、ストックかLGTMをお願いいたします。


ブログで以下のような記事も書いています。

https://www.kamome-susume.com/enginner-job-change-site/
【C言語】ポインタ渡し

# ポインタ渡しとは
ポインタ渡しは変数のメモリ上のアドレスを渡す記法である. 値渡しとは異なり, 渡されたアドレスを間接参照する事で, 関数の呼び出し元の変数を書き換える事が出来ます。

端的に言えば他の関数に変数の値を渡したいとき、変数の値ではなくアドレスを渡してしまえば、渡す前の関数と渡した後の関数とでは変数のアドレスが同じなる。つまり同一メモリ上の変数を扱っていることなのです。


# 文字列の扱いについて
C言語の文字列は配列によって扱われる。配列の文字列そのものをすべて他の関数に引数として渡すことができないです。※構造体にすれば渡すことが可能。
試してみましょう。

やりたいことは
配列**month**と**date**の中の値をget_birthday関数に渡し出力する処理です。

下記のソースではコンパイルエラーになります。

引数の型が違うので当然エラーがでます。

```sample.c
#include <stdio.h>

int get_birthday(char ,char);

int get_birthday(char recv_month,char recv_date)
{
	printf("私の誕生日は%s月%s日です",recv_month,recv_date);
    return 0;
}

int main(void)
{
    char month[] = {"08"};
	char date[]  = {"12"};

    get_birthday(month,date);
    
	return 0;
}



```

配列すべてを渡せないないので変数のアドレス受け取って参照します。

```sample.c
#include <stdio.h>

int get_birthday(char* ,char *);

int get_birthday(char* recv_month,char *recv_date)
{
	printf("私の誕生日は%s月%s日です\n",recv_month,recv_date);

    return 0;
}

int main(void)
{
    char month[] = {"08"};
	char date[]  = {"12"};

    get_birthday(month,date);
    
	return 0;
}
```

厳密にいえば配列の先頭アドレスを渡しています。

```sample.c
#include <stdio.h>

int get_birthday(char* ,char *);

int get_birthday(char* recv_month,char *recv_date)
{

	printf("私の誕生日は%s月%s日です\n",recv_month,recv_date);
    return 0;
}

int main(void)
{
    char month[] = {"08"};
	char date[]  = {"12"};

    get_birthday(&month[0],&date[0]);
    
	return 0;
}

```

C言語では頻繁に使用しますね。
今回は配列のアドレスを使いましたが構造体でも使えるので非常便利です。

以上
JavaScript 初学者向け「FizzBuzz」 の考え方  

初めての投稿は、最近やってみたFizzBuzzについて書きたいと思います。  
qiitaが初めて＋昨日.mdについて知ったので見苦しいかもしれませんが、頑張って書きたいと思います！ 

# 1.FizzBuzzについて
よくJSの勉強を始めて、まずProgate→ドットインストールだったりUdemyをお勧めするサイトが多いともう。  
それでそのサイトのロードマップ通りにやると「あれ？これ本当に自分ちゃんと学べてる？いや、何に使うかわかんないし、何ができるんw」ってぶち当たった。  
そこでメンターに相談したら「FizzBuzzやるといいよ！」って言われて調べたら...  

  - **1〜100までの数字を表示**させる  
  - **3の倍数**の数だったら**Fizz**と表示させる  
  - **5の倍数**の数だったら**Buzz**と表示させる  
  - **3と5の倍数**は**FizzBuzz**と表示させる  
  - それ以外の数字はそのまま表示  
    
プログラミング界隈ではめちゃくちゃメジャーな遊びらしい...(知らなかった）  
      

# 2.FizzBuzzで何が分かるか  
まず、ある程度Progateやってたら**for文**とか**if文**が出てくる。  
まーたこれがややこしくて、めちゃ苦戦した部分でも...。  
このforとかifの理解をちゃんと出来てるか？とかちゃんと使えてる？ってことを知るためのものでもあるらしい。  

#3.FizzBuzzの解き方
色々な解き方があるらしいけど、自分が書けたのはこれでした。  

```html:
<!DOCTYPE html>
<html lang="ja">
 <head>
   <meta charset="UTF-8">
   <title>FizzBuzz</title>
 </head>

 <body>
   <script>
	// 1〜100までの数字出してみる
	for(var i = 1; i <= 100; i++) {

		// 3と5の倍数はフィズバス
		if(i % 3 == 0 && i % 5 == 0)
			console.log("FizzBuzz");

		// 3の倍数はフィズ
		else if (i % 3 == 0)
			console.log("Fizz");

		// 5の倍数はバズってる
		else if (i % 5 == 0)
			console.log("Buzz");
			
		// 3と5の倍数以外はそのまんま数字表示
		else
			console.log(i);
	}
   </script>
 </body>
</html>
``` 

まず、どう解いたらいいのか全く分からないまま1時間ぐらい固まってました。  
とりあえず一個ずつ分けてみて考えることにしたら、これ正解です！（あくまで自分の場合は）  

**1. 1〜100までの数字をとりあえず表示させてみる** 

```javascript:
// 1〜100までの数字出してみる
for(var i = 1; i <= 100; i++) {}
```

for文を使ってとりあえず1〜100までconsoleに表示させてみます。  
ここまではまあまあわりかしProgateでもよくある構文だからなんとなくでも書けちゃいました。  
それじゃあ、次！  

**2. 3の倍数でFizzを表示**  

```javascript:
// 3の倍数はフィズ
else if (i % 3 == 0)
     console.log("Fizz");
```

後々知ったけど、=の数は3つで良かったそうです。  
3の倍数に関してはメッッッッチャ頭使った%を使用すれば倍数の表示が出来ることに気づきました！  
最初&とか使ってたのはいい思い出...  
if文を使って3の倍数を出せたら、あとはもう割と楽になります！  

**3. 5の倍数をBuzz表示**  

```javascript:
// 3と5の倍数はフィズバス
if(i % 3 == 0 && i % 5 == 0)
     console.log("FizzBuzz");
```

もうここは言うまでもなく、3と5の倍数を合わせただけなので論理積 (&&)で繋げただけになります。  
ただ、一人でやってみてここまでかかった時間**5時間**。  
半分心が折れかける始末...。  
でも！もうちょっとで終わりそうな予感がしたので頑張りました！！！  

**4. 3と5の倍数以外はそのままの数字の表示に**  

```javascript:
// 3と5の倍数以外はそのまんま数字表示
else
   console.log(i);
```

これ実際いるか要らないか悩んだ結果、なかった時がうまく表示されなかったのでつけてみました。  

#4.まとめ
実際にやってみてアウトプットにはいい感じの勉強になりました。  
本当はHTML/CSSでフォームを使って「数字を入力したらFizz・Buzz・FizzBuzzの表示をさせる」というのをやりたかったけど、全然出来ませんでした。  
今度またその表示が出来るようになったらまとめたいと思います。  
私の主人が某スクールでFizzBuzzを前にやったそうですが、PC壊れかけたらしいので、もしFizzBuzzに挑戦する方はお気をつけください！
AtCoder Beginner Contest 209

##[A - Counting](https://atcoder.jp/contests/abc209/tasks/abc209_a)

O(N)
初めはO(1)で行おうか悩みましたが、パターン分けが面倒だと思い全探索を行いました。

```C++:C++
#include <bits/stdc++.h>
 
#define rep(i,n) for(int i=0; i<(n); ++i)
#define fixed_setprecision(n) fixed << setprecision((n))
#define execution_time(ti) printf("Execution Time: %.4lf sec\n", 1.0 * (clock() - ti) / CLOCKS_PER_SEC);
#define pai 3.1415926535897932384
#define NUM_MAX 2e18
#define NUM_MIN -1e9
 
using namespace std;
using ll = long long;
using P = pair<int,int>;
template<class T> inline bool chmax(T& a, T b){ if(a<b){ a=b; return 1; } return 0; }
template<class T> inline bool chmin(T& a, T b){ if(a>b){ a=b; return 1; } return 0; }

int main() {
    int A, B;
    cin >> A >> B;

    int res=0;
    for(int i=A; i<=B; i++){
        res++;
    }
    cout << res << endl;

    return 0;
}
```

##[B - Can you buy them all?](https://atcoder.jp/contests/abc209/tasks/abc209_b)

O(N)
全探索です。

```C++:C++
#include <bits/stdc++.h>
 
#define rep(i,n) for(int i=0; i<(n); ++i)
#define fixed_setprecision(n) fixed << setprecision((n))
#define execution_time(ti) printf("Execution Time: %.4lf sec\n", 1.0 * (clock() - ti) / CLOCKS_PER_SEC);
#define pai 3.1415926535897932384
#define NUM_MAX 2e18
#define NUM_MIN -1e9
 
using namespace std;
using ll = long long;
using P = pair<int,int>;
template<class T> inline bool chmax(T& a, T b){ if(a<b){ a=b; return 1; } return 0; }
template<class T> inline bool chmin(T& a, T b){ if(a>b){ a=b; return 1; } return 0; }

int main() {
    int N, X;
    cin >> N >> X;

    vector<int> A(N);
    rep(i, N) cin >> A[i];

    int total = 0;
    for(int i=0; i<N; i++){
        if(i%2==1) A[i] = A[i]-1; 
        total += A[i];
    }

    if(total <= X) cout << "Yes" << endl;
    else cout << "No" << endl;

    return 0;
}
```

##[C - Not Equal](https://atcoder.jp/contests/abc209/tasks/abc209_c)

O(N)
全探索できないので問題文の意図は組み合わせで求めてくださいと読めます。
ソートしても計算結果が変わらない事に気づくのが問題の鍵です。
計算途中で余りを求めても最後の計算結果に影響がないのも必須知識です。

```C++:C++
#include <bits/stdc++.h>
 
#define rep(i,n) for(int i=0; i<(n); ++i)
#define fixed_setprecision(n) fixed << setprecision((n))
#define execution_time(ti) printf("Execution Time: %.4lf sec\n", 1.0 * (clock() - ti) / CLOCKS_PER_SEC);
#define pai 3.1415926535897932384
#define NUM_MAX 2e18
#define NUM_MIN -1e9
 
using namespace std;
using ll = long long;
using P = pair<int,int>;
template<class T> inline bool chmax(T& a, T b){ if(a<b){ a=b; return 1; } return 0; }
template<class T> inline bool chmin(T& a, T b){ if(a>b){ a=b; return 1; } return 0; }

ll MOD = 1000000007;

int main() {
    int N;
    cin >> N;

    vector<ll> C(N);
    rep(i, N) cin >> C[i];
    sort(C.begin(), C.end());

    ll res=1;
    for(ll i=0; i<N; i++){
        res = (res * (C[i]-i)) % MOD;
    }
    cout << res << endl;

    return 0;
}
```
jekyll を Amazon Lightsail のUbuntu にインストールしてブラウズするまでのメモ

Rubyで動く静的サイトジェネレーター・jekyllを触る機会がありました。
AmazonのVPSサービス「Lightsail」にインストールして、ブラウジングするまでの操作をメモっておきます。

## jekyll とは

https://github.com/jekyll/jekyll

rubyで動くシンプルなブログ・CMS。Markdownファイルからhtmlを生成する。
GitHub Pageのバックエンドで動いているのがjekyll。

## Amazon Lightsailとは

https://aws.amazon.com/jp/lightsail/

AWSが提供するVPSサーバー。ちょっとした開発・検証作業などを行うのにちょうど良い。

## Lightsail に jekyll をインストールして動かすまで

OSは Ubuntu を利用しました。

LightsailのコンソールからUbuntuを選択し、インスタンスを起動する。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83767/287d0838-a83f-4241-46c3-82f00ead779b.png" width="300">

インスタンスのターミナルに接続して、Ubuntuを最新の状態にする。

```bash
sudo apt update
sudo apt upgrade
```

jekyll には gcc と make が必要なため、インストール

```bash
sudo apt install make gcc
```

インストールガイドに従ってセットアップする。 OSによって操作が微妙に異なる。Ubuntuのインストールガイドはこちら。

https://jekyllrb.com/docs/installation/ubuntu/

```bash
sudo apt-get install ruby-full build-essential zlib1g-dev
echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc
gem install jekyll bundler
```

最後の gem install が思いのほか時間がかかった。メモリ 512MB のインスタンスだと、インストールが途中で詰まっていたので、メモリの容量に依存するのかも。

jekyll で最初のブログを作成する。チュートリアルと同じ 「myblog」というディレクトリで作成する。

```bash
jekyll new myblog
cd myblog
```

jekyll を起動する。チュートリアルでは、ローカルマシンでの動作を前提に書いており、このままではLightsailからブラウズできない。

起動時、もしくは設定ファイルに 0.0.0.0 で起動することで解決できる。

以下のコマンドで起動すると、 http://ip-address-of-instance:4000 でブラウズできる。

```
bundle exec jekyll serve --host 0.0.0.0
```

もしくは、 _config.yml に以下の一行を追記。

```bash
host: 0.0.0.0
```

_config.yml の設定が済んでいれば下記のコマンドでも起動できる

```bash
jekyll s
```

## jelyll にページを追加する

page
https://jekyllrb.com/docs/pages/

post(ブログ記事)
https://jekyllrb.com/docs/posts/

をみながら、Markdown形式でファイルを追加する。

ファイルを追加したら、静的htmlの出力を行う。

https://jekyllrb.com/docs/usage/

```bash
jekyll build
```

無事にブラウズできました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83767/733c2833-c850-a8e3-ede7-165091338229.png" width="300">


追記：jelyll が利用するポートに対して接続許可を与えないと、表示エラーになるので要注意。

![スクリーンショット 2021-07-11 17.54.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83767/88e15908-6690-3028-bb68-3cdee49304a3.png)
SpringのNo qualifying bean of type。Xml or Javaソースへの追加

SpringでNo qualifying bean of typeが発生した時のチェック方法です。

【エラー内容】
org.springframework.beans.factory.NoSuchBeanDefinitionException
No qualifying bean of type XXXX found for dependency
expected at least 1 bean which qualifies as autowire candidate for this dependency.

【コンテナ管理対象のアノテーション付与確認】
エラーの原因はSpringのコンテナ管理対象に該当のクラスがないよってエラー。なのでとりあえずアノテーションの付与がされているか疑う。
　・@Component
　・@Controller
　・@Service
　・@Repository

【コンテナ管理対象の対象パッケージか確認、javaソース】
アノテーションをつけている場合、次に読み込み対象になっているか確認します。コンテナ管理の対象にするアノテーションはどこのクラスに付けても良いわけじゃなくて、以下のアノテーションが付いているクラスの配下を再帰的に読み込むみたい。とりあえずこのアノテーションを探して読み込まれるパッケージか確認します。
　・@SpringBootApplication
　・@ComponentScan

【コンテナ管理対象の対象パッケージか確認、xmlファイル】
@SpringBootApplicationとか@ComponentScanとかないけどって人はxmlで定義されている可能性があります。component-scanで検索してみましょう。こんな感じで複数指定できます。```
　<context:component-scan base-package="com.wawawa.hoge" />
　<context:component-scan base-package="com.hahaha.hoge" />
　<context:component-scan base-package="com.zehaha.hoge" />
```

【参考】
https://qiita.com/Terry3/items/6773eb570b82a6fdf7c6
https://qiita.com/NagaokaKenichi/items/058a7243bd2948de7553
S3+CloudfrontにGithub Actionsからデプロイしてみるときのメモ

## やったこと

nuxt.jsの静的アプリを開発しています。
stagingブランチにプッシュがされたときにS3にデプロイされるようなGithub Actionsのコードを書きました。

## 前提

- s3のバケットは用意されている
- cloudfrontなども用意されている
- AWSの `ACCESS_KEY_ID`, `SECRET_ACCESS_KEY`などが生成できている。
- Github Actionsの使い方がだいたいわかる。

## Secretsを登録

必要なのは以下の3つとなります。

![Screen Shot 2021-07-11 at 17.46.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396623/8fc002bd-704a-cb9c-5c7b-ea5653e90d04.png)


## 自分のyml

Github Actionsから以下のように作成します。
frontendディレクトリにnuxt.jsのアプリがあるので、`working-directory`で指定します。

```frontend-staging.yml
on:
  push:
    branches:
      - staging

name: Deploy to Amazon S3

jobs:
  deploy:
    name: Deploy
    runs-on: ubuntu-latest

    steps:
    - name: Checkout
      uses: actions/checkout@v1

    - name: Setup Python 3.7 for awscli
      uses: actions/setup-python@v1
      with:
        version: '3.7'
        architecture: 'x64'

    - name: Build
      working-directory: ./frontend
      run: |
        yarn install
        yarn generate
    - name: Copy to s3
      working-directory: ./frontend
      env:
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
      run: aws s3 cp --recursive --region ap-northeast-1 build ${{ secrets.AWS_S3_BUCKET_NAME }}
```

## Github Actionsが走ったときの挙動

うまくいけば以下のようになります。

![Screen Shot 2021-07-11 at 17.49.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396623/3a42032c-bc8a-96e0-daf2-2f6503f1b2bc.png)


## 参考

https://h-piiice16.hatenablog.com/entry/2020/01/05/140119

https://dev.classmethod.jp/articles/deploy-web-site-with-github-actions/
google Driveのマイドライブにファイルがつくられてしまうので、inboxフォルダに移動されるようにする

# はじめに
spreadsheet.newやdocument.newをurlに記入してファイルを生成することが多いが、マイドライブに溜まってしまうのが煩わしかった。
そのため、ファイルを自動で

- googleDocumentのインボックスフォルダ
- googleSpreadsheetのインボックスフォルダ

に移動されるようにした

```javascript:main.gs
function fileMoveInbox(){
  const fileList = getRootFileList();
  fileList.forEach(file => file.moveInbox());
}
```

```javascript:util/googleDrive.gs
function getRootFileList(){
  const files = DriveApp.getRootFolder().getFiles();
  
  let fileList = [];
  while(files.hasNext()) {
    let buff = files.next();
    fileList.push(new GoogleFile(buff));
  };

  return fileList;
}
```

```javascript:class/GoogleFile.gs
class GoogleFile{
  constructor(file){

    this.name = file.getName();
    this.type = file.getMimeType();
    this.id = file.getId();
  }

  isSpreadSheet(){
    return this.type === 'application/vnd.google-apps.spreadsheet';
  }

  isDocument(){
    return this.type === 'application/vnd.google-apps.document';
  }

  moveInbox(){
    const file = DriveApp.getFileById(this.id);

    if(this.isSpreadSheet()){
      const inbox = DriveApp.getFolderById('格納したいフォルダのid');
      file.moveTo(inbox);
    }

    if(this.isDocument()){
      const inbox = DriveApp.getFolderById('格納したいフォルダのid');
      file.moveTo(inbox);
    }
  }
}

```

ファイルをそのまま持たせていたほうがきれいだったかもしれない。
ピアソンVueでアカウント利用制限された時の話

## 3回以上入力ミスをすると自動的にアカウントが制限される
AWSの試験をピアソンVueで受験しようとし、予約の手続きをしていました。
予約の決済画面で3回以上入力ミスをすると試験予約のTOPページに戻され、自動的にアカウントがロックされるそうです。
私は4回目の入力ミスをした時に、TOPページに戻され、再度試験を予約しようとしたら下記のようなエラーが出ました。

```
Your access to the Pearson Vue website has been restricted. Please contact the Pearson Vue Call Center for assistance."
```

## 対処法
ピアソンVueのカスタマーサービスにお問い合わせください。
https://www.pearsonvue.co.jp/Test-takers/Customer-service.aspx
メールだと遅いんで、電話してアカウント利用制限されてしまった旨をお伝えください。

平日の9：00～18：00までしかやっていないのでお気を付けください。
早ければ、その日のうちにアカウント制限を解除してもらえます。

## 後日
後日以下のようなメールが届きます。


```
××様

この度は、ピアソンVUEカスタマーサービスにお問い合わせいただきまして、誠にありがとうございます。

ご依頼頂いておりました利用制限解除につきまして、弊社担当部署での解除手続きが完了致しましたことをご案内申し上げます。

現在、弊社ウェブサイトにログイン頂くことは可能でございますが、ご予約の決済を行う際、入力された情報に誤りがあり、エラーメッセージが繰り返し3回以上表示された場合は、自動的にアカウントが制限されますのでご注意ください。

お支払いの際、請求先住所内に、「,」、「＃」「＆」「/」などの記号が含まれる場合、決済処理でエラーが生じますので、削除をお願い致します。

また、請求先住所内は日本語文字列はご利用いただけませんので、英数のみでのご入力をお願い致します。

その他、ご不明な点等ございましたらお気軽にご連絡ください。

どうぞよろしくお願い致します。
```

最初っからもうちょっとわかりやすくどっかに書いとけ。
しかも3回以上て。
VS CodeのRemote-ContainersでPlant UMLのコンテナ環境を作る

# やりたいこと

UMLのサーバーをDockerで構築して，VS Codeの拡張機能を使って編集したい！Remote-Containersを使って簡単に環境構築出来たらうれしいな！

# 環境

* Visual Studio Code
    * 拡張機能`Remote-Containers`を入れておく
    * 拡張機能`Plant UML`はコンテナの中に入るときにコンテナ内に導入される
* Docker

# 必要なファイルの用意

## ディレクトリ構成

```
(root)
│
├─ test.pu
│
└─.devcontainer
        devcontainer.json
        docker-compose.yml
```

## 環境設定のファイルの中身

```json:devcontainer.json
{
    "name": "dev container",
    "dockerComposeFile": "docker-compose.yml",
    "service": "plantuml-server",
    "workspaceFolder": "/workspace/",
    "extensions": [
        "jebbs.plantuml",
    ]
}
```

```yaml:docker-compose.yml
version: '3'
services:
  plantuml-server:
    image: plantuml/plantuml-server
    container_name: plantuml-container
    ports:
      - "8080:8080"
    volumes:
      - ..:/workspace:cached
```

## テスト用のUMLファイル

```test.pu
@startuml sample
alice -> Bob: Hello, John!
alice <-- Bob: Hello, World!
@enduml
```

# 実行する

1. コマンドパレット`Remote-Containers: Rebuild and Reopen in container`からコンテナの中に入る
1. エディタで`test.pu`を開く
1. コマンドパレット`PlantUML: Preview Current Diagram`を実行
1. プレビューが表示される  
![sample.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/598251/f90781a4-0404-0bbc-d222-f164403375e9.png)

# 参考資料

* [UMLの爆速プレビュー環境をVisual Studio Code + PlantUML Server on Dockerで簡単に構築する](https://dev.classmethod.jp/articles/plantuml-server-on-docker/)
* [DockerでPlantUML Serverの環境構築をやってみた](https://qiita.com/y-vectorfield/items/52bf887876473d2dd730)
* [PlantUMLサーバをDockerで1分でサクッと構築＋VSCodeでプレビューする](https://syachiku.net/plantuml-docker/)
フォルダ内の画像をまとめてエクセルに貼り付け

Pythonで作成した画像やネットで拾ってきた画像を１つのエクセルファイルに張り付けて保存する。
画像はA列に貼り付けます。各画像は重ならないようにはしているつもりです。

```python
import tkinter as tk 
import tkinter.filedialog as fl 
import tkinter.messagebox as mb 
import openpyxl as px
import math

PIX_PER_CELL_HEIGH = 18 #エクセルの1セルの高さ当たりのピクセル数

root = tk.Tk()

#ファイルダイアログを表示するディレクトリ
INI_DIR = "D:/Python/Hello"

#GUIのボタンを押した時の処理
def get(*args):
    #CSVファイルを選択する ※複数選択可
    filetype = [('png file', '*.png'), ("jpg file",".jpg"), ('jpeg file', '*.jpeg')]
    path_list = fl.askopenfilenames(initialdir=INI_DIR,
                                    filetypes=filetype,
                                    title="select file")

    #保存用Excelファイル名を指定する
    typ = [("Excel", ".xlsx")]
    savefile = fl.asksaveasfilename(title="保存ファイル名を指定",
                                    filetypes=typ,
                                    initialdir=INI_DIR)

    #書き込み＆グラフ描画用のExcelを新規作成
    wb = px.Workbook()

    #Excel内に新しいシートを作成してファイル名をつける
    wb.create_sheet(index=0, title='グラフ')
    ws = wb['グラフ']
    #自動で作成される不要なシートであるSheetを削除
    wb.remove(wb['Sheet'])

    #画像を貼り付けるセル位置の初期化（1行目）
    paste_cell = 1

    # 読み取った複数のCSVファイルを1つのExcelファイルにまとめる
    for i, path in enumerate(path_list):
        # グラフの画像読み出し
        img = px.drawing.image.Image(path)

        # 画像を貼り付ける位置をExcel形式で表す(列のアルファベット+行の番号)
        inColLetter = px.utils.get_column_letter(1) #エクセルの1列目（A列）を指定
        inCellLetter = inColLetter + str(paste_cell) #各ファイルの画像を重ならないように貼り付ける

        #シートにグラフを追加
        ws.add_image(img, inCellLetter)

        # グラフの画像の高さ[pixel]情報から次に貼り付ける画像のセル位置を算出
        paste_cell += math.ceil(img.height / PIX_PER_CELL_HEIGH)


    #Excelデータを保存
    wb.save(savefile + ".xlsx")

    #処理が完了したことをユーザーに知らせる
    mb.showinfo("確認","Excelファイルの作成が完了しました")
    message["text"] = "処理が完了しました"

message = tk.Label(root, text="ファイルを選択してください", width=30)
message.grid(row=0, column=0)

button = tk.Button(text="開く", command=get)
button.grid(row=0, column=1)

root.mainloop()
```
ESP8266の起動時の突入電流を抑え込む方法

#ESP8266が抱える突入電流の問題
本記事は、「ESP8266を単三乾電池一本で駆動したい」、「よわよわ電源だけどESPを起動できるようにしたい」などの要望に対するヒントになればと思います。

##突入電流の何が問題なのか
突入電流とは、装置の起動時に流れる大きな電流のことを差します。
とくにESP8266は[省エネSoCを謳っている](https://www.espressif.com/en/products/socs/esp8266)にも関わらず、起動時に最大で**300~400 mA**というドでかいピーク電流を吸い込んでいきます。
(次項に記載しますが、正確にはこの電流は突入電流ではないと思われます。)
SoCそのものの消費電力はWi-fi起動時であっても70～80mA程度で済んでいるのに対し、起動時にこれだけの電流吸い込むことによって、この対策のためだけに強力な電源を用意せざるをえません。
また、例えば乾電池1本から昇圧して使いたい場合で想定される、HT7733Aの利用などでは、到底このピーク電流を賄うことはできません。
何も考えずに設計すれば、**電圧降下によって起動すらままならない**でしょう。

##なぜESP8266は起動時に高いピーク電流を持つのか？
まず、答えから言ってしまうと、それは起動時に行われる**RF calibration**が原因です。
以下は、RF calibrationによるピーク電流の様子です。20~30 msにわたってピーク電流が出ているのがわかります。
その後、Wi-fi起動による一本の細いピークが見えます。起動時に大きく問題になるのは、前者の電流になります。

>![RF calibrationによる突入電流の様子](https://cloud.githubusercontent.com/assets/4349050/15855873/a68b758c-2ce4-11e6-9649-bf484d3724ba.PNG)
>RF calibrationによる突入電流の様子
>引用元：https://bleepcoder.com/ja/arduino/158850911/problems-with-esp12f-without-wifi-on-50ma-power-source

#傾向と対策
では、どのようにしてこれに対策を取るべきでしょうか。いくつか方法はあります。
##1.　電源を強化する
###より高出力のPMIC、LDOを用いる。
単純に、起動時の電流を確保できるだけの強力な電源ICを用意してしまうのが最も手っ取り早い手法です。

###PMICやLDOをパラレルにして利用する
電源を二系統用意することで、電流を確保する方法です
しかしながら、この手法の問題として2系統の電源間でアンバランスが発生したとき、片方の電源系統に大きな負荷がかかり続けるという問題もあるため、設計上注意が必要です。

###電源のキャパシタの容量を増やす
20~30 msで数百 mAという消費電力を確保するには、概算にして**数百 uF~数千 uFの大容量のキャパシタ**が必要になります。
回路の実装面積に余裕がある場合は良いですが、例えば単三乾電池での利用用途を考えると、そもそも実装面積が大きく取れない場合があるでしょう。


##2.　RF calibrationを無効にする
突入電流そのものを消す根本的な解決策になりますが、この方法も必ずしも推奨できる手法ではありません。
なぜなら、RF calibrationを無効にすることで、Wi-fiの送信電力が定量的なものでなくなる可能性があるためです。
結果として、**期待している通信距離が得られなくなったり、期待以上に消費電力が増加する可能性**を孕んでいます。
起動時のオプションについては、[API reference](https://www.espressif.com/sites/default/files/documentation/2c-esp8266_non_os_sdk_api_reference_en.pdf)の16ページあたりに詳しく記載があります。
以下コードは、system_phy_set_powerup_optionを2で起動します。
この条件では、VDD33のキャリブレーションのみが有効になり、RF calibrationが無効になります。
VDD33のキャリブレーションは、内部のリファレンス電圧のキャリブレーションなので、これをやらないとADCの値が滅茶苦茶になると思います。

```C:
extern "C" {
#include <user_interface.h>
}
RF_PRE_INIT(){
  system_phy_set_powerup_option(2);
}
```

上記コードを実行することで、以下のようになります。

>![RF calibrationによる突入電流の様子](https://cloud.githubusercontent.com/assets/4349050/15857408/df40ffd8-2ced-11e6-9db7-811d17c51e8c.PNG)
>RF calibrationによる突入電流が無くなった様子
>引用元：https://bleepcoder.com/ja/arduino/158850911/problems-with-esp12f-without-wifi-on-50ma-power-source

#まとめ
以下がまとめになります。

* ESP8266の起動時の突入電流は、RF calibrationが一番の原因。
* 解決方法は、電源周りの強化を行うか、RF calibrationを無効にするかのどちらか。

好きな方法で解決するのが良いと思いますが、適切なPMICやLDOの選択、キャパシタの選定を行うのが有効な解決策であると思われます。
雑な記事になりましたが、以上。

>参考：https://bleepcoder.com/ja/arduino/158850911/problems-with-esp12f-without-wifi-on-50ma-power-source
>等。ほか多数。
TypeScript+ReactでHello World(転何知人T+Rその2)

# [前回](https://qiita.com/botanic7arc/items/4a22866e5218c924e4ad)までの状態

TypeScript+Reactのプロジェクトを実行できる環境の構築を行った。
※タイトルが長ったらしかったため、修正しました。

# 今回の目的

Hello worldする。

# 手順

前回作成したプロジェクトフォルダにsrcというフォルダがあるので移動する。

```
cd src
```

以下のコマンドでindex.tsx以外のファイルを削除する。

```
 rm *.ts *.css *.svg App.*
```
※WSL上では ls | grep -v -E 'index.tsx' | xargs rm -r をするとエラーが出たため。

index.tsxの内容を以下に変更する。

``` tsx
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(  
<h1>Hello, world!</h1>,
  document.getElementById('root')
);
```

変更したらnpm startでプロジェクト実行。

以下のようにHello, world!と表示されたら成功。

![名称未設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/792099/2d77f706-c632-6056-b92d-68c80f57be69.png)


# 解説

``` tsx
import React from 'react';
import ReactDOM from 'react-dom';
```
reactとreact-domパッケージを読み込む。
DOM(Document Object Model)とはwebページの表現方法。

``` tsx
ReactDOM.render();
```
Reactのプロジェクトが実行された際に最初に実行されるレンダー。
1つ目の引数が描画する内容(コンポーネント)で、2つ目の引数が描画する対象(DOM要素)。

``` tsx
<h1>Hello, world!</h1>
```

HTMLのh1タグを使用してHello, world!という見出しを作っている。

``` tsx
document.getElementById('root')
```
document.getElementById()を使用してroot要素を取得している。

## 要約

ReactDOM.render()でHTMLのroot要素に\<h1\>Hello, world!\</h1\>を描写している。

# 次
[別ファイルのコンポーネント読み込み](https://qiita.com/botanic7arc/items/4398b2d49ef44f2073d8)

# 参考文献

- [覚えておきたいReactの実装でよく使う基本的な構文（書き方） | maesblog](https://mae.chab.in/archives/2956)
- [react-dom - npm](https://www.npmjs.com/package/react-dom)
- [DOM の紹介 - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/Introduction)
- [React入門 - とほほのWWW入門](https://www.tohoho-web.com/ex/react.html)
【Laravel】oldでありがちなミス！old()を使って、select、optionタグの値を保持したい！


こんにちは。今回は、Larvelでold()関数を使って、select、optionタグの値を保持する方法を紹介します。バージョンは、5.8です。

old()関数は、直前のデータを取得する便利なメソッドです。

公式ドキュメント↓
https://readouble.com/laravel/5.8/ja/requests.html

```
<input type="text" name="username" value="{{ old('username') }}">
```

__old('POSTされた名前')で使うことができます。__


#__old()を使って、select、optionタグの値を保持したい！__

```
<select name="category_id">
  <option value="">選択されていません</option>
  <option type="text" value="1" @if(1 === (int)old('category_id')) selected @endif >PHP</option>
  <option type="text" value="2" @if(2 === (int)old('category_id')) selected @endif >Ryby</option>
</select>
```

optionタグの中の

```
@if(値 === (int)old('category_id') selected @endif
```


が保持してた値だけをselectedにすることで、保持した値を反映することができます。

なぜ、ここでold()関数の前に``(int)``をつけているかというと、``old()関数が返す値は、自動的にString型``になっているからです。もし、``(int)``をつけたくないのであれば、``===``を``==``にして、型を指定しない方法にすればいいです。

#__DBに登録していたデータを表示させたい__

先ほど紹介した内容のold()関数の第二引数に値を入れてあげると、デフォルトで指定した値にしてくれます。
こうすることで、初期画面は、DBから取得したデータがセレクトされ、変更した時、第一引数で指定した値にしてくれます。


```
@if(値 === (int)old('category_id', $old_category)) selected @endif
```

Laravelって便利ですよねー。
今回、紹介したold()関数は、String型で返してくるので、old()関数を使ったのに、選択されてないじゃないかという人もいたのではないでしょうか。僕も、その一人でしたが、原因調査をうまくできるようになっていきましょう:hear_no_evil:
ECRにプッシュしようとしたら、つまずいた。

#はじめに
今回はECRにプッシュしようとしたら、つまずいた。を記載しようと思います。

なぜECRを使用しようとしたかというと、最近話題のAWS AppRunnnerを利用するために使用しました。

#ECRとは
まず、ECRについて解説をしていきます。

ECRとは、フルマネージド型のレジストリサービスです。

##メリット

Dockerコンテナイメージを簡単に保存、管理、共有、デプロイが可能
自前のコンテナリポジトリの運用や基盤となるインフラストラクチャのスケーリングの検討は不要
イメージをコンテナアプリケーションに確実にデプロイすることが可能
コンテナソフトウェアは、組織内でプライベート共有や世界中で公に共有して、ダウンロード可能
EKS、ECS、Lambdaと連携し開発から本稼働までのワークフローを簡素化できる。
#ECSとの違い
ECRは、Imageを保存する場所

ECSは、コンテナのシステム管理

ECRにあるImageをECSで使用する。

#ECRのプッシュでつまずいたこと。
今回の本題のつまずいたことを記載します。

前提条件として__Windows10__で実行しています。

__Linux__を用いて、プッシュを行いました。

方法としてはECRに書いてあるプッシュコマンドをそのまま実行しました。
![ECRPush.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639333/201d1d17-689d-6f45-b86c-2686dc1ac7b3.png)


その際にエラーが出ました。

The command ‘docker’ could not be found in this WSL 1 distro. We recommend to convert this distro to WSL 2 and activate the WSL integration in Docker Desktop setting
簡単に言うとWSLをWSL2に変更してくださいということです。

#やったこと
WSLをWSL2に変更した。

##変更方法
###WSLの環境確認
まず自分のWSL環境がどうなっているのか確認しました。

コマンドDefault
```
wsl --list --verbose
```
すると

![ECR結果.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639333/3e913b48-4097-4afe-258b-4deafa36df3a.png)

このように現在のVERSIONを確認することができます。

これは直した後になっているので、Version２になっています。

###WSL2に変更
PowerShellの管理者権限で実行します。
WSLのデフォルトバージョンを２に変更するコマンド

PowerShellコマンドDefault
```
wsl --set-default-version 2
```
続けて自分が選択したものをVersion２に変更するコマンド

PowerShellコマンドDefault
```
wsl --set-version Ubuntu 2
```
今回、私は「Ubuntu」をVersion2にしたかったので、このようなコマンドになりました。

これで、WSL2に変更ができました。

#おわりに
ECRについてあまり知らなかったので、良い経験になりました。

ECRは、プッシュも簡単で、とても扱いやすいと思います。

エラーで戸惑った部分はありますが、ECRで上記のようなエラーに遭遇した場合は試してみてください。

またAppRunnnerのハンズオンにトライしてみてください。

参考：[話題のAWS App Runnerをハンズオン！](https://qiita.com/Kouichi_Itagaki/items/4aa174a2993e8cc87ebe)
Docker + SpringBoot + Gradleでjarが実行されない

###表示されるエラーメッセージ

```
Invalid or corrupt jarfile

```

###原因
####Dockerfileの書き方が間違えていた

```Dockerfile:

FROM openjdk:11-jdk-stretch
ARG ${JAR_FILE}=build/libs/atsumako-0.0.1.jar #ここが間違えてる！！
COPY ${JAR_FILE} atsumako.jar
ENTRYPOINT ["java","-jar","/atsumako.jar"]

```
ARG ${JAR_FILE} じゃなくて、 ARG JAR_FILEですね。

ちゃんと確認すればすぐだったんだけど、、、

これでめっちゃ時間がかかってしまった。。。
font-familyプロパティの種類

▪️ font-familyとは

文字の種類を扱うプロパティのことを指す。
例えば、　明朝体などが当てはまる

font-familyの種類を使い分けることでサイト作成時にバリエーションが増えるのは間違えないと思う。

▪️ font-familyの書き方

e)   head {
           font-family:YuMincho;
      }

 ↪︎ 上記のように書くとheadの文字が明朝体となる。

e) head {
          font-family:saus-serif;
      }
　　↪︎  これはheadの文字がゴシック体になります。

　他にも種類がたくさんありますが、ここでは上の２つだけ例としてあげさせていただきました。
　
サイト制作時に同じ文字ばかり使うのではなく、font-familyの種類を使い分けて遊び心を持ち合わせていいのではないでしょうか。

今回の投稿は以上です。
wagaでした！
STM32G031とにおいセンサーAE-TGS8100で液晶表示 (Arduino)(AQM0802A)


x リセットをいろいろいじるから上級者用
x リセットは、GPIOに変える

目的
コロナ等を含め室内の空気のよごれをにおいを通して値数表示する。

構成
AE-TGS8100 K-15562
AQM0802A-RN-GBW P-06669

説明
3.3V系で使いたいのでマニュアルの式から
プログラムを作った。秋月の式と値が正しい事を確認した
0で割るとエラーになることを確認したので何でも良かったので
0を-1に変換した。現実的には、マイナスの大きい数になるので
区別が付くからマーいいか
そのままだとつまらないので液晶を付けた。
CO2センサーの為の前段階

main - 初期化
loop - 繰り返し処理
i2c_led_w - 2バイトI2Cに送る

●だめだめ日記
なぜかここに書いてある?今後の予定
約2400円のCO2センサーをゲットする
諸事情により、回路図、ファームは、非公開
今、考えているハードは、STM32L010(容量不足でやめた)
[STM32G031かわるかも]と4桁7セグ
たぶん、7セグは、ノイズが少なくて見やすい
CO2の作り方のヒントは、すでに全て書いてあるので
各自、既に優秀なので俺の屍を超えていけ、以上、終了


![serial_nioi_031_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/60b8fb4f-6449-d25f-624c-6f5b39d8756c.jpeg)


![resetgpio.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/bfb4c009-3608-fea8-ddbb-54f2c99e28da.jpeg)



```c++


#include <Wire.h> //I2C library

//STM32G031J6M6
#define sdaPin PA12    // ArduinoA4
#define sclPin PA11    // ArduinoA5

// I2C  address. 
#define I2Cadr  0x3e  // 固定

char    data_read[2]={'@','t'}; //i2cバッファー
int     ii;                     //ループカウンター

char INIT_com[]={0x0,0x38,
0x0,0x39,
0x0,0x4,
0x0,0x14,
0x0,0x70,
0x0,0x56,
0x0,0x6C,
0x0,0x38,
0x0,0xC,
0x0,0x1,
0x40,0x41};

char INIT_cls[]={0x0,0x1};

void i2c_led_w(char *buff1){
  Wire.beginTransmission(I2Cadr);
  Wire.write(buff1[0]);
  Wire.write(buff1[1]);
  Wire.endTransmission();
  delay(2);
}//i2c_led_w

int adval = 0;
float sensor_r;

void setup() {

  pinMode(PA0, OUTPUT);

  //i2cの初期化
  //Wire.begin(); // initialise the connection //767 UNO
  Wire.begin(sdaPin,sclPin); //STM32G031J6M6

  //液晶の初期化
  for(ii=0;ii<11;ii++){
    i2c_led_w(&INIT_com[ii*2]);
  } //for

  //Serial.begin(9600); //767
  //pinMode(PA0, OUTPUT); //031
}//setup

float v1;
float rs;

void loop() {
  digitalWrite(PA0, HIGH); //031
  delay(1);
  analogReadResolution(12);
  adval = analogRead(A9); // PB7 PIN1 031
  delay(1);
  digitalWrite(PA0, LOW); //031

//Serial.println(adval);
//adval = 4096;
//adval = 300; //242mV 114.121kOME
//adval = 0;

if(adval == 0) {adval = -1;}

v1 = (    ((float)adval) * 3.300) / 4096.0;

//Serial.println(v1,3); //767

rs =( (3.0-v1)/v1 ) * 10.0;

//Serial.println(rs,3); //767

/*
  if(adval != 0) {
    sensor_r = 6144.0 / adval - 10;
    Serial.println(sensor_r,3);
  } else {
    Serial.println("0");
  }//end if
*/
  delay(998);

  int s = rs;
  int n0,n10,n100;

  n10  = s / 10;           // 123 -> 12
  n0   = s - (n10 *10);    // 123 - 120 -> 3
  n100 = n10 / 10;         // 12  -> 1
  n10  = n10 - (n100 *10); // 12 - 10 -> 2
  
  //画面のクリア
  i2c_led_w(INIT_cls);

  //液晶に表示
  data_read[1] = '0' + n100;
  i2c_led_w(data_read);
  data_read[1] = '0' + n10;
  i2c_led_w(data_read);
  data_read[1] = '0' + n0;
  i2c_led_w(data_read);

}//loop



```
deviseでサインアップにメール認証を追加した

#問題
メール認証機能を実装するために、マイグレーションファイルのconfirmableのコメントを外してrails db:migrateを実行したが、エラーが起きた。
undefined local variable or method `confirmed_at' ←こんな感じのエラー
confirmed_atっていうメソッドがないよみたいな意味だと思う。

#解決
rails db:migrateを実行してもschema.rbが更新されていなかったためエラーが起きた。
マイグレーションファイルの内容をschema.rbにも反映させるためには、
一度 rails db:migrate:reset を実行するとDBの内容をリセットして全てのマイグレーションファイルの内容を反映してくれる。（もちろん、DBの内容は全てなくなるので注意）
Arduinoで関数の引数に配列を入れたい

![SS 192.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/565043/a41cd967-f549-8677-1efa-2e99bf69518d.png) なんとかなった。
#困ったこと
Arduinoで配列を処理する関数を作るとき、関数内でsizeof(配列)としても配列数が上手く取得できません。
例えば引数に配列A,配列Bの２つを入れ、配列Aの操作結果を配列Bに格納しようとしたとき、5番目以降の処理が行われないという問題が発生します。

#解決方法
Arduinoは関数内で引数で受け取った配列の要素数をカウントすることができないようです。
理由は内部的に配列ではなく配列のアドレスを渡しているためらしいです。
解決方法は関数を作る際に引数を追加し、配列のサイズを指定するようにすればOKです。

#Arduinoのこういうところで困ったら
コメント欄やTwitterにてアドバイスをいただきました。（ありがとうございました）
ArduinoはC/C++をベースとしているので、Arduino関連で検索してわからなかった場合は、CやC++を含んで検索しC言語系での用法や挙動を調べると解決のヒントを得られることが多そうです。
【論文紹介】敵対的サンプルに関する論文まとめ

## 敵対的サンプルとは

ニューラルネットワークで画像認識を行う際、あるバターンのノイズが画像に加わることで、予測結果が変わってしまうことがあります。このノイズを敵対的摂動、ノイズを加えた画像を敵対的サンプルと呼びます。敵対的サンプル生成のさきがけとなったのは[[Szegedy+, 2014]](https://arxiv.org/abs/1312.6199)の勾配ベースの最適化手法を用いた方法です。敵対的サンプルの研究を行う意義としては、モデルの頑健性を調べること、モデルの頑健性を向上させる学習手法を見つけること、ニューラルネットワークのBlackBoxを紐解くことなどが挙げられます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614092/715c0c9f-9587-c08b-1238-d42f77afa932.png)

## 敵対的サンプルの作成法

ニューラルネットワークの学習は、<font color="red">パラメータ</font>に関する損失の勾配を使用して、その損失を<font color="red">最小化</font>するようにパラメータを更新します。
[FGSM (Fast Gradient Sign Method) [Goodfellow+, 2015]](https://arxiv.org/abs/1412.6572) は、<font color="red">入力画像</font>に関する損失の勾配を使用して、その損失を<font color="red">最大化</font>する新しい画像を作成します。
こうして得られた敵対的サンプルを訓練データに追加することで、敵対的サンプルに対して頑健な学習（敵対的学習）が行えると主張しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614092/506ebec6-8dac-cd5c-a6dd-f97d8ff1d360.png)

## NLPにおける敵対的サンプル
自然言語モデルは画像モデルと異なり、**離散的な単語列**を入力するため、敵対的サンプルを簡単に作成することはできません。仮に画像と同じように勾配を用いて損失を大きくするように単語ベクトルを更新しようとしても、単語埋め込み空間で単語が存在しない方向に更新されることがあります。更新された単語ベクトルの周辺に別の単語が存在していて、その単語に入れ替えるという方法をとっても、それが元の単語と意味的に似ている保証はありません。まったく意味の異なる単語に入れ替えてしまえば、文の意味が大きく変わってしまう恐れがあります。

[[Miyato+, 2017]](https://arxiv.org/abs/1605.07725)は、KL Lossを用いて正解ラベル情報を不要にし、半教師あり学習の設定に拡張したVATという手法を提案しています。これは敵対的サンプルを見つけるというより、モデルの正則化に重きをおいた研究だと思います。

[[Sato+, 2017]](https://arxiv.org/abs/1704.08006)は、勾配を用いて単語ベクトルの更新を行う際に、[Miyato+, 2017]の手法に加えて近くの単語ベクトルを向くように制限を加えることで、敵対的摂動が単語の置換えと解釈できるため解釈性が上がることを示しました。個人的には入れ替える単語の組み合わせをどう選ぶかと、意味が変わってしまう単語がどれくらい存在するのかが気になりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/614092/9c388a10-504c-2398-070e-527a508741dc.png)

## おわりに
画像においては敵対的サンプルの研究が進んでいますが、自然言語においてはその離散的な性質から、画像と同様の方法を適用することは難しいと感じました。
とはいえ、Self-attentionを始めとする近年の自然言語分野の発展をみると、敵対的サンプルの分野でもすぐに進展はありそうです。