OmniAICreator/Qiita-1.07M huggingface dataset:
FlutterのNavigatorで詰まった話 | The operator '[]' isn't defined for the class 'Object'.

## 発生した問題

FlutterのNavigatorにパラメーを渡して、遷移しようとしたところエラーが発生した。

### 作成したコードのイメージ

```Dart:list_prev.dart

// listに遷移するためのコード
Navigator.of(context).pushNamed(
  "/list",
  arguments: <String, Map>{
    // 渡したいパラメータ {"id": 1, "name": "test"}
    'data': data,
  },
);
```

```Dart:list.dart

final args = ModalRoute.of(context).settings.arguments;
final String name = args['name'];
```

### エラーメッセージ

```
The operator '[]' isn't defined for the class 'Object'. Dart
```

## 環境

- macOS Catalina 10.15.4
- Xcode 11.4
- Flutter 1.15.17

## 結論

argsをMapにキャストすることで解決した。

```Dart

final args = ModalRoute.of(context).settings.arguments as Map;
final String name = args['name'];
```

## 検証したことと原因

最初は `args` の型に問題があるのではないかと仮説を立てて、型と値の出力をしたが型と値は想定していたものとなっていた。

更に調べてみると、 `ModalRoute.settings.arguments` はそもそもobjectを返す想定になっていたことが原因だった。JSの感覚で `[]` で値が取得できるだろうと思っていたらそもそもできなかったようだ…。

ModalRoute.settings.arguments
https://api.flutter.dev/flutter/widgets/RouteSettings/arguments.html

## 参考記事

The operator '[]' isn't defined for the class 'Object'. Dart
https://stackoverflow.com/questions/60245865/the-operator-isnt-defined-for-the-class-object-dart
【Java入門】Javaとは？

#Java
1995年にSun Microsystemsにより初めてリリースされたプログラミング言語およびコンピューティング・プラットフォームです。Javaをインストールしないと機能しないアプリケーションやWebサイトが数多く存在し、さらに毎日作成されています。Javaは高速かつセキュアで、信頼性があります。ノートブックからデータセンター、ゲーム・コンソールから科学計算用スーパーコンピュータ、携帯電話からインターネットにいたるまでJavaはあらゆるところにあります。

#Javaの特徴
- Write once, run anywhere
様々な環境で動くように設計されているため、WindowsのパソコンでもMacのパソコンでも、LinuxなどのWebサーバでもプログラムが動く。

- 大企業のシステムで利用される
- 大規模な開発に向いている
- 学びやすい
- 需要の多さ
- 潰しがきく
- Android
- オブジェクト指向
何かを説明するのは難しいが、ものすごく簡単にいうと、プログラムのすべてをモノとして扱うということ

- ガベージコレクション
- 処理速度が速い
インタプリタ型言語とコンパイラ型言語の2種類がある
 - インタプリタ型言語はコンピュータが処理を実行するときにコンパイル
 - コンパイラ型言語はコンパイルを行ったものをあらかじめ用意しておくので、コンピュータが処理を実行するときにはコンパイルを行う必要がない

- 豊富なライブラリ

# 開発関連
- Webアプリ・Webサービス
- デスクトップアプリ
- スマホアプリ
- 組み込み系
- IoT

# 関連資格
- Oracle認定Javaプログラマ(Oracle Certified Java Programmer)
- Javaプログラミング能力検定試験



#参考
[Java](https://java.com/ja/download/faq/whatis_java.xml)
[Javaの特徴](https://eng-entrance.com/java-feature)
【Rails】HerokuでAWS s3に画像をアップロードしようとしたら<Message>Access Denied</Message>

#事前準備
[Railsでcarrierwaveを使ってAWS S3に画像をアップロードする手順を画像付きで説明する](https://qiita.com/junara/items/1899f23c091bcee3b058#iam%E8%A8%AD%E5%AE%9A)

概要についてはこちらの記事がとても分かりやすかったので参考にさせていただきました。

ただしこのまま`$ git push`すると、アクセスキーがアップロードされてしまうので注意です。
アクセスキーの隠し方については、`heroku 環境変数`とか`gem 'dotenv-rails'`、`$ heroku config:set ACCESS_KEY=aaaaaa`とか調べると出てくると思います。

#この記事を読むべき人

1. https://myapp.herokuapp.com で画像をs3にアップロードしようとしてもうまくいかない
1. `$ heroku logs`したら`<Message>Access Denied</Message>`って言われる

この状況の人にはお役に立てるかもしれません。

#手順
##IAMのユーザーのARNを取得する
1. 「AWSマネジメントコンソール」で「セキュリティ、ID、およびコンプライアンス /IAM」を選択
1. 「IAMリソース」の「ユーザー: 2」を選択（数字は人それぞれ）
1. 「ユーザー」を選択
1. 「ユーザーの ARN」をコピーする

##パブリックアクセスのブロックをオフにする
1. 「AWSマネジメントコンソール」で「ストレージ /s3」を選択
1. バケットを選択
1. 「アクセス権限」タブを選択
1. 「ブロックパブリックアクセス」タブを選択（デフォルトで選択されている）
1. 全てのブロックをオフにする

##バケットポリシーを使用する
1. 「ブロックパブリックアクセス」から「バケットポリシー」タブに切り替える
2. 「バケットポリシーエディター」に以下を適用して、保存する

```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::111111111111:user/IAMユーザー名"
            },
            "Action": [
                "s3:GetObject",
                "s3:PutObject",
                "s3:PutObjectAcl"
            ],
            "Resource": "arn:aws:s3:::バケット名/*"
        }
    ]
}
```

- `"arn:aws:iam::111111111111:user/IAMユーザー名"`はコピーしてきたIAMユーザーのARN
- `"Resource": "arn:aws:s3:::バケット名/*"`にバケット名を入力する

# 以上
これでいけるはず。

# 参考記事
- [AWS ナレッジセンター](https://aws.amazon.com/jp/premiumsupport/knowledge-center/cross-account-access-s3/)
- [エラー<Message>Access Denied</Message> 〜Rails + Carrierwave + HerokuでAWS S3に画像を保存〜](https://qiita.com/yukiyukimiyaiwa/items/a9e0103c8342b81f6ac1)
プルリクエストとはなんだろうか？

#プルリクエストとは？
自分なりにプルリクエストについて調べたのでとりあえず今なんとなくわかってることについて
メモしていきます......

**プルリクエスト**とは簡単にいうと**他の人に自分の加えた変更を見てもらいフィードバックをもらうこと！！**です。

**メリットとしては以下の２点**　だと僕は考えます。
・ソースの変更点が一眼でわかる
・フィードバックをもらうことにより品質の高いコードを作ることができる。
　　
![alt](https://backlog.com/ja/git-tutorial/assets/img/pull-request/pull_request2_1@2x.png)

![alt](https://backlog.com/ja/git-tutorial/assets/img/pull-request/pull_request2_2@2x.png)

このようにして変更点やそのレビューが一覧で見れるため**とても便利!!**

##実際に使うときの流れ
この部分は僕もまだ使ったことがないのでよく理解していない部分もあるのですが....
自分の理解を深めるためにも調べたことを載せようと思います。
[こちらです](https://backlog.com/ja/git-tutorial/pull-request/03/)
コードなどは載ってないのですが大まかな流れはわかると思います。

##感想＆まとめ
プルリクエストは高品質なコードを書くためのもの！
変更点がぱっと見てわかるためレビューが促進されやすく変更点もわかりやすい！

未経験からのスタートであるため調べていても最初は用語すらわからないために用語から調べる！！という感じでとても時間がかかりました。（ほんと日本語じゃないみたい...)
確実にこれからもそのようなことになると思います....けど頑張ろ!!!

**今日調べた単語**
・ブランチ〜履歴の流れを分岐して記録していくためのもの。本体のブランチから枝分かれして平行作業ができる
・マージ〜枝分かれしたブランチを合体させること。本体のブランチに変更点を加えたブランチを合体させる。ここで変更点が間違っていないか、要件通りかなどレビューしてもらうのが**プルリクエスト！**


*参考サイト*
https://backlog.com/ja/git-tutorial/stepup/01/
https://backlog.com/ja/git-tutorial/pull-request/04/
https://fresopiya.com/2019/03/10/gitpullrequest/
Jupyter Notebookが開かなくなった時の対処法

また同じ問題が生じた時・生じた人用に

# 生じた問題
いつも通りにJupyter Notebookを開こうとすると、ターミナルが一瞬だけ現れて消えた。

# 原因を探る
Anaconda Navigatorから起動してみると、次のエラーが発生

```エラー.
AttributeError: module 'attr' has no attribute 's'
```

この問題が発生する前に、Anacondaターミナルでpandas_profilingをインストールし、Jupyter Notebook上で実際に動かしてみていた。その際にWarningがいくつか発生しており、実行結果は上と同じErrorだった。

というわけで、上のエラーについて調べてみたところ、次のサイトが見つかった。
http://www.366service.com/jp/qa/2b820a08b852457068903a585c2f467a

# 解決方法
ターミナルで次のコマンドを実行する。

```これで解決.
$ pip uninstall attr
$ pip install attrs
```

私の場合、attrsは既にインストールされていたみたいで、attrをアンインストールしただけで解決した。
本日の学習内容part5

##書籍での学習を始めます
PHPを[Progate](https://prog-8.com/)や[ドットインストール](https://dotinstall.com/)、[Udemy](https://www.udemy.com/)である程度学習しましたので、一度フレームワークというものを触ってみようという事で、先週末に[PHPフレームワークLarabel入門第2版](https://www.shuwasystem.co.jp/book/9784798060996.html)を買ってきました。

##今日した事
・composerのインストール
　やり方は端折ります。が、ネット上にも情報が転がってましたので、リンク貼っておきます。[【PHP】Composerは絶対必要!インストール方法と解説で完全攻略](https://www.sejuku.net/blog/82454)

・Laravelのインストール
　こちらもやり方を端折ります。(著作権侵害こわひ。)　こちらもネット上のやり方リンク貼っておきます。[導入手順を解説！Laravelのインストール方法【初心者向け】](https://techacademy.jp/magazine/11521) 

・XAMPPのインストール
　~~本には載ってなかったですが(もうすでに導入が終わってるつもりで進めてる？)~~~~、これも行います。~~よくみたら書いてありました。ごめんなさい。これもリンク貼り->[XAMPP インストールと動かす手順(Windows10)](https://itsakura.com/php-xampp)


さあ、これからフレームワークを学習していきます。また次回。
ARM NEON vmin/vmax 命令のメモ

ARM NEON では vmin,vmax の命令には, 二種類あるのがわかりました.

## vmin, vmax

http://infocenter.arm.com/help/index.jsp?topic=/com.arm.doc.dui0802b/CIHDEEBE.html

入力のどちらかが NaN だと, 結果も NaN になる.
ARMv7(32bit), ARMv8 で使える.

## vminnm, vmaxnm

http://infocenter.arm.com/help/index.jsp?topic=/com.arm.doc.dui0802b/CIHFCJCF.html

ARMv8 以降のみ(or AARCH64). NaN の扱いがより IEEE754 準拠(?). SSE2 での min/max の振る舞いと似ている. 

## まとめ

aarch64 なら vminm, vmaxnm を使うのを推奨.
おまえのQiitaはすでに死んでいる

# あれ？記事ぜんぶなくね？

**James:** あれ、どうしたんだDavid。なんか君のQiita記事全部消えてるじゃないか。どうしたんだ？何かあったのか？

**David:** hahaha. そうなんだよ。最近Qiitaの炎上っぷりに嫌気がさしてね。ぜんぶぶっとばしてやったんだ。

**James:** それは本当かい？確かに最近Qiitaはなんだか炎上しているけど、そこまでしなくてもよかったんじゃないのかい？君の記事を頼り(主にBoxCLI)にしてる人もいたと聞くよ。

**David:** Ha!しらない。しらない。おれはおれがやりたいようにやったんだ。

**James:** ちがうね。俺の知ってるDavidはそんなことするやつじゃない。正直に話してくれないか。何があったんだ。

**David:** ...。さすがJamesだ。おれのBFFなだけあるね。聞いてくれるか？

**James:** もちろんだとも。BFFだろ

**David:** いやね。Qiitaの炎上をきっかけに消したのは間違いないんだ。ただ、意図して消したわけではないんだ。今回の炎上をきっかけに違うプラットフォームに移りたい人もいるだろうと思ってね。

Qiitaの全記事をBackup and Deleteするアプリを書いてそれを記事にして公開しようと思っていたんだ。

そしたらな。James。そのアプリ書いてる最中に最悪のことが起きたんだ。

いや、説明するより見てもらったほうが早いと思う。こいつを見てくれ。

```
console.log(data)
      for (var item in data) {
        console.log(item + ': ' + data[item]['id'])
        console.log(data)
        client.delete(baseurl + 'items/' + data[item]['id'], args, function (data, response) {
        console.log(response.statusCode)
        })

    }
    return data
```

なんか変なことに気づかないかい？

**James:** *Loopの中にDeleteが入ってる。*


# はい、やらかしました

というわけで、やらかしました。

テストで書いてる最中なぜかdelete callをLoop中に入れてしまい消してしまいました。

何があほかって、一回実行したらなんかエラーが複数出るからあれー。おかしいなー。なんだろーって複数回実行したことだよね。

# たぶんRate Limitだったよね。

というわけでやらかして自分の記事を全部ふっとばしたわけですが、今までの記事は幸いにもローカルで書いてQiitaにあげていたのでBackupは取れています

私の記事をありがたいことにレファレンス等に使っているかたもいらっしゃるそうで、なくなると困るという声を頂戴したので、復活させようと思います。

ただし、Qiitaにぜんぶ上げ直すのも癪なので、大分放置気味だった自分のブログにアップロードしました。

消える前にアクセス数の多かった記事のリンクまとめました。

[Box CLIを使おう2.0](https://dbox-blog.firebaseapp.com/2018/12/31/BoxCLI%E3%82%92%E4%BD%BF%E3%81%8A%E3%81%86(v2.0%E5%AF%BE%E5%BF%9C%E7%89%88)%20%E4%B8%80%E8%88%AC%E5%85%AC%E9%96%8B%E7%94%A8/)

[Box JWTアプリの設定方法](https://dbox-blog.firebaseapp.com/2018/09/16/Box-JWT%E3%82%A2%E3%83%95%E3%82%9A%E3%83%AA%E3%81%AE%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95/)

[JWTアプリの登録方法](https://dbox-blog.firebaseapp.com/2018/09/16/JWT%E3%82%A2%E3%83%95%E3%82%9A%E3%83%AA%E3%81%AE%E7%99%BB%E9%8C%B2%E6%96%B9%E6%B3%95)

[Box 3legged認証とBox JWT認証の違い](https://dbox-blog.firebaseapp.com/2018/11/27/Box%203legged%E8%AA%8D%E8%A8%BC%E3%81%A8Box%20JWT%E8%AA%8D%E8%A8%BC%E3%81%AE%E9%81%95%E3%81%84/)
中央寄せの使い分けについて

#####text-align:centerはインライン要素担当！

ただし、親はブロック要素じゃないと効かない
そして親要素にtext-alignをかく

---

#####margin 0 auto;はブロック要素担当！
親要素と同じ大きさだったらwidthで横幅を指定しないと中央寄せにならない

※autoは余白を自動で調整してくれるやつ
左右にautoを指定すると左右中央寄せになる
Could not find tools.jar in the active JRE.となった時の対応方法

- 環境
    - Windows10 64it Pro バージョン1903
    - Eclipse Version: 2019-12

# 事象 : Eclipseでクラスを新規作成したら怒られた。
しかも、Eclipseを起動するたびにメッセージが出るようになった。

```text
Could not find 'tools.jar' in the active JRE.

Spring Boot Live hovers will not work without it.

The JRE you are running Eclipse with is:
...省略...
```

![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/1737b453-926f-8118-bf27-282ad6b7c053.png)

## 原因 : Eclipseで使用しているのが`tools.jar`のないJREだから
`Spring Boot Live hovers`さんが`tools.jar`を必要としているのにないから怒られたもよう。
そういえば、Eclipseを新しくしてから何も設定していない・・・Eclipseは何を使って起動しているんだっけ？

### Eclipseが起動するときに使っているVMを確認する
参考 : [Eclipseを動かしているJava VMを確認する方法 | ITSakura](https://itsakura.com/eclipse-javavm)

1. [ヘルプ] > [Eclipse IDEについて] > [インストール詳細] > [構成]タブ
2. `--vm`を確認
1. JREだった
    - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/5bdf9335-0bd0-bdf5-0bf4-69b7c027ab73.png)

## 対応 : JDKで起動すように設定する
参考 : [Eclipse を起動する Java VM を指定する :Tips &amp; FAQ | arbk-works Blog](https://aruo.net/arbk/blog/article/specifying_java_vm_for_eclipse_ide_to_run)
以前にインストールしたJDKを見つけたのでそれを使う。

1. Eclipseを閉じる
1. eclipse.iniを開く(デフォルトでは、eclipse.exeと同じところにeclipse.iniはある)
1. `-vmargs`より前に`-vm`の指定を追記して保存
2. Eclipseを起動してもメッセージが出なくなる
3. [ヘルプ] > [Eclipse IDEについて] > [インストール詳細] > [構成]タブ で今一度起動時に使用するVMが変わっていることを確認する

```ini:eclipse.ini
;...省略...
; ↓追記↓
-vm
C:\path\to\jdk1.8.0_241\bin
-startup
; ↑追記↑
-vmargs
;...省略...
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159761/e14f47bc-97b2-a510-868c-ae3a884cee19.png)
[python3] loggingとClickで簡易的にデバッグログ出力機能を実装する

デバッグログを見ながらコードを書いていると、出力のON/OFFを変更するのが面倒になることが多々あります。そこで、コマンドラインからログレベルを変更する小技を紹介します。
※ 本記事は自分で趣味的にコーディングするような場合を想定しています。プロダクトには向かない可能性がありますので、その場合は開発チームの方法に従うことをお勧めします。

## まずは普通のログ設定

### コード例

まず普通に`logging`モジュールを使用し、ログをコンソール出力する場合のコード例を添付します。以下、python3.7を使用しています。

```logging_test.py
import logging

from logging import DEBUG, INFO


def set_logger():
    logger = logging.getLogger('logname')
    stream = logging.StreamHandler()
    logger.addHandler(stream)

    logger.setLevel(INFO)

    return logger


def main():
    logger = set_logger()

    logger.debug('debug')
    logger.info('info')


if __name__ == "__main__":
    main()

```

簡単に説明します。

- `set_logger`でログの設定をしています。返り値の`logger`がプログラム内でログ出力に使うインスタンスです。
- `stream`はログの出力先を決めるものです。今回はコンソール出力なので`logging.StreamHandler()`を使用しています。ファイルに出力する場合は`logging.FileHandler()`を使用します。
- `stream`で指定した出力先を`logger.addHandler(stream)`でloggerインスタンスに追加します。
- `logger.setLevel(INFO)`でログレベルを設定します。今回は`INFO(information)`レベルに設定しています。
- そして`logger.debug('debug')`、`logger.info('info')`でログを出力します。

### 実行結果

上記のコードを実行した結果がこちらです。

```
>python logging_test.py
info

>
```

INFOレベルのログは出力されていますが、DEBUGレベルのログは出力されていません。DEBUGレベルのログを出力するには、スクリプト中のログレベル設定のところを`logger.setLevel(DEBUG)`とする必要があります。

## 本題：Clickを使用してログレベル変更

pythonのコマンドラインパーサに`Click`というものがあります。これを使用すれば、pythonファイルを実行するときにコマンドライン引数を渡す処理が簡単に実装できます。CLI作成用ライブラリといえば`Python Fire`がとても簡単で便利ですが、個人的にはCLIに渡すことができる変数を明示的に指定できるClickをお勧めしています。

### コード例

Clickを使用して先ほどのコードを少しいじります。

```logging_test.py
import click
import logging

from logging import DEBUG, INFO


def set_logger(debug_mode):
    logger = logging.getLogger('logname')
    stream = logging.StreamHandler()
    logger.addHandler(stream)

    if debug_mode is True:
        logger.setLevel(DEBUG)
    else:
        logger.setLevel(INFO)

    return logger


@click.command()
@click.option('--debug_mode', '-d', is_flag=True, 
              help='Show debug log')
def main(debug_mode):
    logger = set_logger(debug_mode)

    logger.debug('debug')
    logger.info('info')


if __name__ == "__main__":
    main()

```

大きな変更があったのはログレベルの設定部分と`main`関数にデコレータ(`@click.～`の部分)が付与されているところです。これについて説明します。

- まず、`main`関数に付与されているデコレータ`@click.option('--debug_mode', '-d', is_flag=True, help='Show debug log')` は、変数`debug_mode`をコマンドライン引数として`main`関数に渡す設定の部分です。引数は左から順に、ロングオプション、ショートオプション、フラグ(True/False)、ヘルプオプション指定時の説明文です。実行時に`--debug_mode`または`-d`を追加すると、`debug_mode`変数に`True`が入ります。
- 次に、コマンドライン引数として受け取った`debug_mode`変数が`set_logger`関数に渡されます。この中で`-d`オプションが指定されている場合はログレベルがDEBUGになり、指定しなかった場合はINFOになります。

### 実行結果

`-d`を指定せず実行した場合と、指定して実行した場合の実行結果の比較がこちらになります。

```
>python logging_test.py
info

>python logging_test.py -d
debug
info

>
```

`-d`を指定した場合、DEBUGレベルのログまで出力されていますね。こうすることで、毎回ソースコードのログレベルを変更することなく、デバッグログの出力設定を行うことができます。

## 参考

最後に、loggingとClickに関して普段私が参考にしているサイトを載せておきます。

- [【Python入門】loggingモジュールで処理の記録を残してみよう！](https://www.sejuku.net/blog/23149)
- [Python: コマンドラインパーサの Click が便利すぎた](https://blog.amedama.jp/entry/2015/10/14/232045)
VSCodeでVueの補完ができなくなった（Vetur）

VSCodeでVueのテンプレートファイルを編集しようとしたところ補完が動かない。困る。
VeturのOutputを見たところ

```
Error: Cannot find module 'vscode-css-languageservice/lib/umd/data/browsers'
```

の文字が。

どうやら[GitHubのissue](https://github.com/vuejs/vetur/pull/1730)によれば`vue-language-server v0.0.67`が依存しているモジュール`vscode-css-languageservice`に破壊的変更があったことが原因の模様。しかしながら`vue-language-server`はここ数か月アップデートがないのでアップデートでの対応不可。

時間がなかったので[こちら](https://github.com/vuejs/vetur/pull/1730#issuecomment-593536261)を参考にビルド済みのソースコードを直接変更して対応。

勘弁してよ…。

追記
コメント欄にて@mugijiruさんに[ご指摘](/chelproc/items/cb01a64ad7cd91ecdac7#comment-462e5f96b8f02c062cbd)をいただきました！
どうやら[vue-language-server](https://www.npmjs.com/package/vue-language-server)は[vls](https://www.npmjs.com/package/vls)に改名したようです。同じ作者さんなので間違いなさそう。ありがとうございます！
asyncとdeferの仕様を誤解していた。

## 解決したい問題

勤務先のWebサイトで、他社製のスクリプトAの実行が完了する前に、自社製のスクリプトBが実行されるとIE11がクラッシュするバグが見つかりました。具体的には以下のように呼び出しています。
なお、A.jsの呼び出し用タグは他社からの指示で1文字たりとも変更できません。

```html
<html>
  <head>
    <!-- 自社製スクリプト -->
    <script src="./B.js"></script>
    <!-- 他社製スクリプト -->
    <script src="./A.js" async></script>
  </head>
  <body>
  </body>
</html>
```

クラッシュする原因は「B.jsの作りに問題があり、その問題をIE11だけが踏み抜くから」なのですが、A.jsの実行が完了していればクラッシュは回避できるため、B.jsがA.jsの実行を待てば良いと思い、以下のように書換えました。

```html
<html>
  <head>
    <!-- 他社製スクリプト -->
    <script src="./A.js" async></script>
    <!-- 自社製スクリプト -->
    <!-- deferはasyncの完了も待ってくれることを期待した -->
    <script src="./B.js" defer></script>
  </head>
  <body>
  </body>
</html>
```

## 仕様を誤解していた箇所

deferはasyncの完了を待ってくれると勝手に思い込んでいたのですが、クラッシュしたりしなかったりする挙動になってしまい、状況が悪化しました。
[WHATWGの規格書](https://html.spec.whatwg.org/multipage/scripting.html#attr-script-async)を読んでもどうしてもピンと来なかったため、検証用のコードを書くことにします。
挙動さえわかればいいのでコード自体はめちゃくちゃ適当です。色んな人から怒られそうなコードですね。

## 検証用コード

### html

```html
<html>
  <head>
    <script src="./first.js" async></script>
    <script src="./second.js" defer></script>
  </head>
  <body>
  </body>
</html>
```

### asyncで実行するjs (first.js)

```js
var i = 0;
for (i = 0; i < 500000000; i++) { }
console.log("first.js: " + i);
```

### deferで実行するjs (second.js)

```js
console.log("second.js: " + i);
```

## 検証結果

Chrome 80で検証しました。

![スクショ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/321603/715f62d6-2855-2a33-2fde-ff18bd72ef10.png)
3回に1回位はエラーが出るという感じです。

どちらもdeferがついていれば想定通りfirst->secondの順で呼び出されますが、asyncとdeferだと必ずasync->deferになるわけではないのですね。
実際に検証した後に [\<script\> タグに async / defer を付けた場合のタイミング \- Qiita](https://qiita.com/phanect/items/82c85ea4b8f9c373d684) を読むと大変わかりやすかったです。というか最初からこちらの記事を読んでいれば無駄に検証しなくても良かったのでは…。

以下も検証しましたがやはりNGでした。10回に1回位はエラーが出ます。

```html
<html>
  <head>
    <script src="./first.js" async></script>
  </head>
  <body>
    <script src="./second.js"></script>
  </body>
</html>
```
ということで、今の所思いつく解決策としては「A.jsの作成元にdeferで呼び出していいか確認する」か、「自社スクリプトB.jsを修正する」のどちらかになりそうです。思い込みは良くないですね。
フロントエンドは初心者なので頑張って勉強していきたいです。
LINE Notify で Teams のメンションを見逃がさない方法

ありがたいことに最近 Teams の導入が進んでいるようで、多くの方に使っていただいています。
だがしかし、チャネルが多くて大事な通知を見逃すが、LINE の通知は見逃さないという方向けに、Teams でメンションされた場合に LINE に通知する方法を紹介します。

# 前提

- Microsoft Power Automate が使える
- プレミアムコネクタが使えるライセンスがある
- LINE はいつも見てる

# LINE Notify を設定する

1\.[LINE Notify](https://notify-bot.line.me/ja/) に LINE アカウントでログイン。「マイページ」を開く。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/0711aa42-2b51-305f-fa29-15921ca77f8d.png)

2\. 開発者であってもなくても、「トークンを発行する」をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/6854bdfc-e08d-3704-a5cd-0d7219fb9215.png)

3\. 任意の名前を付け、「1:! で LINE Notify から通知を受け取る」を選択して「発行する」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/535b62d4-f9b4-676d-8a1e-826f14ab4b14.png)

4\. 発行したトークンを控えて、「閉じる」をクリック。

# Power Automate でフローを作る

1\. Power Automate の画面より、「自動フロー」を作成。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/46965b1b-5b4c-8fcf-5461-e30b975512d9.png)

2\. トリガーに Microsoft Teams の「チャネルのメッセージで自分がメンションされているとき」を選択して作成。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/f5e8cec2-9f57-4853-f6f1-88135e747726.png)

3\. モニターしたいチームとチャネルを指定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/e4cf3fed-a7ad-b8c6-dbab-9ee51367aefe.png)

4\. 新しいステップより HTTP を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/8fba7bbd-4e14-dd39-3a94-14aecbf7dc0a.png)

5\. 以下のように内容を設定。メッセージは動的なコンテンツにより、トリガーで取得した「メッセージ本文」を指定。

- 方法: POST
- URI: https://notify-api.line.me/api/notify
- ヘッダー
 
|キー|値|
|:--|:--|
|Content-Type |application/x-www-form-urlencoded|
|Authorization| Bearer <先ほど取得したキー>|
- 本文: message=<送りたいメッセージ>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/43fb47d1-6f3e-ac3e-47e9-8fa39e1c4bd9.png)

6\. 保存。

# Teams でメンションしてみる

自分自身をメンションすることはできないので、他のアカウントからメンションしてもらいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/48376216-edfa-f2c2-e242-021a6c34a828.png)

しばらくすると LINE Notify が届きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214116/96361443-72fe-7bd4-f7a0-01d715bc9050.png)

# まとめ

今回送る内容が微妙でしたが、そこは本質ではないので、そっとしておきます。
是非一度試してください。

# 参照

[Power Automate から LINE に通知を送ってみよう](https://mofumofupower.hatenablog.com/entry/2020/03/31/123000) by [Hiro](https://mofumofupower.hatenablog.com/about)
docker上でRailsアプリを動かす際に、localhostでアクセスするためのオプション

# はじめに

学習環境を用意するにおいて、コンテナ上に開発環境が用意できることで、

・ホストPCを汚すことなく環境を構築できる
・異なるPC間で同じ環境を使いまわせる
・格好いいと感じる

といった理由からRailsアプリをコンテナ上で作って動かしてみましたが、ホストからの動作確認で引っかかったのでメモします。
※動かしたのはscaffoldレベルのアプリです

# 先にまとめ

先に問題と解決をまとめて書いておきます

- 問題
  - コンテナ内で起動したRailsアプリにホストからアクセスできない
- 解決方法
  - Railsアプリを立ち上げる際に、`-b 0.0.0.0`をオプションとしてつける


## 以下、やったこと

まとめにたどり着くまでの状況をつらつらと

### 準備

ポートフォワードの設定をしてコンテナを立ち上げる

```
(ホスト)$ docker container run -it -p 30000:3000 /bin/bash
```

コンテナ内でアプリを作る

```
(コンテナ)# rails new scaffold_sample
(コンテナ)# bin/rails db:create
```

データベースを作成無事できたことを確認した後にアプリケーションを起動

```
(コンテナ)# bin/rails server
```

### 上記手順で起動したアプリにアクセスできない

ホストからlocalhost:30000(30000はポートフォワードの設定)にアクセスしてもアプリケーションからの応答はなし
ホストのターミナルからcurlを実行してもエラー
コンテナからlocalhost宛にcurlを実行すると正常な(期待する)htmlが返却される

### 解決手段

アプリケーションの起動時に`-b 0.0.0.0`をオプションとしてつける

```
(コンテナ)# bin/rails server -b 0.0.0.0
```

するとホスト側のブラウザからアプリケーションにアクセスできるようになった
「localhost:30000」「127.0.0.1:30000」「0.0.0.0:30000」のどれでもlocalhostにアクセスできていた

### オプションの値について

上記の通り、`-b 0.0.0.0`を指定することでによってホストからのアクセスは可能になったが
`-b 127.0.0.1`や`-b localhost`ではホストからアクセスできるようにはならなかった

### 個人的なメモとして

0.0.0.0や127.0.0.1の持つ意味や、コンテナからみた自分のIP、コンテナからみたホストのIP、ホストから見たコンテナのIPなどが、
ネットワークのオプションとともにどのように振る舞うのかを学ばなければならないと感じた
Docker

趣味でプログラミングを勉強しています。
軽量に動作して高速に環境を構築できる「Docker」（ドッカー）を今回記事にしてみました。

![Docker-logo-icon.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383237/c9f1adda-12af-36aa-792c-c9307b16d11a.jpeg)

# Dockerとは？
コンテナ技術を使ったアプリケーションの実行、運用をするためのプラットフォーム

## コンテナとは？
ホスト上に論理的な区画（コンテナ）を作り、アプリケーションを動作させるのに必要なライブラリやアプリケーションを1つにまとめ、あたかも個別のサーバのように使うことができるようにしたもの
→ホストOSのリソースを論理的に分離して複数コンテナで共有して使うので、間接的にかかるコストが少なく軽量で高速に動作するのが特徴

#### コンテナの歴史
FreeBSD jail
https://ja.wikipedia.org/wiki/FreeBSD_jail
Solaris Containers
https://www.oracle.com/technetwork/jp/server-storage/solaris10/containers-169727-ja.html

## Dockerの機能
1. Dockerイメージ(コンテナの元)を作る機能
Dockerイメージ アプリケーションの実行に必要なファイル群が格納されたディレクトリ

2. Dockerイメージを共有する機能
　・Dockerレジストリ
　　　イメージを持つリポジトリ（イメージの集まり）を預かるサービス
　・DockerHub https://hub.docker.com/
　　　Docker、コンポーネントで動くリソースを集めた場所
3. Dockerコンテナを動かす機能

##### Dockerのエディションは2つ
コミュニティ版（CE; Community Edition） 
エンタープライズ版（EE; Enterprise Edition）

### Dockerが動く仕組み

・コンテナという独立環境を作り、コンテナを区画化してアプリケーションの実行環境を作る
・Linuxカーネルのnamespaceという機能を使いコンテナを仮想的に隔離する
・Dockerコンテナと外部ネットワークが通信を行うときは、NAPTの機能を使って通信する

Linux namespaces
https://en.wikipedia.org/wiki/Linux_namespaces

NAPT
1つのIPアドレスを複数のコンピューターで共有する技術で、IPアドレスとポート番号を変換する機能


## Dockerのインストールと動作確認

####環境
Windows 10 Pro 64bit メモリ 16G
Docker for Windows v 19.03.5

1.　Docker Desktop for Windowsをインストール
https://hub.docker.com/editions/community/docker-ce-desktop-windows/

2.　コマンド実行
`docker container run amazonlinux:latest //bin/echo 'Introduction to Docker'`

#####説明
`docker container run` コンテナを作成/実行
`amazonlinux:latest` もとになるDockerイメージ
`//bin/echo 'Introduction to Docker'`　コンテナ内で実行するコマンド

![2020-03-30_16h32_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383237/0e56729f-42b3-d656-8477-646f2d92217f.png)

1回目はダウンロードするので時間がかかるが、
2回目以降はダウンロードされたDockerイメージをもとにDockerコンテナを起動するので高速に動く

#### Dockerコマンド

Dockerバージョン
`docker version`

実行環境の詳細設定
`docker system info`

ディスクの利用状況
`docker system df`

## Dockerを使ってWebサーバを構築

コマンド実行
`docker container run --name webserver -d -p 8000:80 httpd`

#####説明
`--name webserver -d` 「webserver」という名前のコンテナをバックグラウンドで起動
`-p` コンテナのポートをホスト側に公開
`8000:80` ホスト8000番ポートとコンテナ80番ポートをマッピング

バックグラウンド
相対的に低い優先度で動作し、入力がごく少ないか全くなく、最小限の出力を行うプロセス


![2020-03-30_17h46_37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383237/b013dcd4-ab5f-de0d-afdd-0fbc095b7f8d.png)


httpdサーバの状況確認
`docker container ps`

コンテナ詳細
`docker container stats webserver`

httpd停止
`docker stop webserver`

httpd起動
`docker start webserver`

今回はDockerのさわりを記事にさせていただきましたので、
次回、「Docker Compose」を使った複数コンテナの環境構築を記事にしたいと思います。

![ダウンロード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/383237/d77c3e6e-8667-9c35-69d5-1c55ace98050.png)
dockerでGemfile(gem追加)更新したら後、データベースが消えた、gemが反映しない


サーバーを再起動してますか？？？？

 #dockerではない通常開発の場合

```:dockerなし

control c でサーバー終了
rails s
```


これでgem反映します。

ということはdockerもサーバーを再起動しなければいけない。

```:dockerあり
$ docker-compose up
> control c で終了
$ docker-compose run web bundle install
$ docker-compose restart
```
これで反映されます。
AWX 10.0.0 を10分で構築

#はじめに
[以前にAWX9.0.1を構築した際](https://qiita.com/ussvgr/items/43f1d372d6b1b2693683)は、まだk8s v1.16に対応しておらず色々手を加えましたが、最新の10.0.0ではそんな事をする必要もなくなっています。
細かい設定などを考慮せず、ただ動かすだけなら（マシンパワーやNW速度によりますが）
10分程度で動かせてしまうくらい楽チンです。

#環境
Ubuntu Server 19.04

#手順
###k3sインストール
```bash
$ curl -sfL https://get.k3s.io | sh -
$ mkdir ~/.kube
$ sudo cp /etc/rancher/k3s/k3s.yaml ~/.kube/config
```

###helmインストール
```bash
$ curl https://raw.githubusercontent.com/helm/helm/master/scripts/get-helm-3 | bash
```

###Ansibleインストール
```bash
$ sudo apt update
$ sudo apt install software-properties-common
$ sudo apt-add-repository --yes --update ppa:ansible/ansible
$ sudo apt install ansible
```

###AWXダウンロード
```bash
$ wget https://github.com/ansible/awx/archive/10.0.0.tar.gz
$ tar xvfz 10.0.0.tar.gz
```

###Inventoryファイル編集
```bash
$ cd awx-10.0.0/installer
$ vi inventory
```

以下の項目の行頭のコメントアウトを外し、値を設定

```
kubernetes_context=default
kubernetes_namespace=awx
pg_persistence_storageClass=local-path
```

###AWXインストール
```bash
$ sudo ansible-playbook -i inventory install.yml
```

おしまい。


#ブラウザで接続
ポート番号を以下で確認。

```bash
$ sudo kubectl get svc -n awx
NAME                      TYPE        CLUSTER-IP     EXTERNAL-IP   PORT(S)        AGE
awx-postgresql-headless   ClusterIP   None           <none>        5432/TCP       13m
awx-postgresql            ClusterIP   10.43.79.219   <none>        5432/TCP       13m
awx-web-svc               NodePort    10.43.48.255   <none>        80:32367/TCP   12m
```
上記であれば、http://\<UbuntuマシンのIP\>:32367/へアクセスすればAWXのログイン画面が見れるはずです。
ユーザー名：admin
パスワード：password
でログインできます。

#おわりに
上記のように簡単に動かせます。データベースもPersistentVolumeで永続化されるので、再起動してもデータが消えることはありません。

不要になって消したくなったら、

```bash
$ k3s-uninstall.sh
```
を実行すればk3sの環境ごと綺麗に消すこともできます。
macOS Safariがアップデートされて令和元年のe-Tax確定申告ができなくなった件への対応

#確定申告期間中にSafariがアップデートされ、推奨環境から外れるトラップが発生

今年の確定申告は新型コロナウイルスの影響で期限が4月15日まで延長されているため、業務を優先するために申告を後回しにしている方も多いと思う。

ところが2020年3月26日にSafariのメジャーアップデートが行なわれ、バージョンが13.0から13.1へと変更された。

特に意識せずに受け入れてしまうMac OSのアップデートだが、この更新を行なってしまうとSafariがアップデートされてしまい、確定申告の推奨環境（推奨とはあるが、例外は許されない）から外れ、保存データの読み込みができなくなってしまう事象が発生する。

![スクリーンショット 2020-03-31 23.08.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211793/9414c0bc-73cf-d31a-0242-a82a9b521fd5.png)

#対処法: Time MachineでSafari 13.0を復元

Time Machine でバックアップを取っている場合に限られるが、3月26日以前のバックアップから古いSafariを復元することで、Safariのダウングレードが可能となる。

#方法
![スクリーンショット 2020-03-31 23.17.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211793/efc0fe09-5a1e-b92b-ab90-e28663db9e4b.png)

Time Machineでアプリケー―ションに入り、3月26日以前のバックアップを開き、コンテクストメニューから「Safari.appをコピー」を選択する。

![スクリーンショット 2020-03-31 23.08.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211793/f93d1737-7c94-2d80-a27c-7ed1a9d7b713.png)

任意のフォルダにSafariをペーストすることで、Safari 13.0の使用が可能となる。最新バージョンとの競合も発生しない。

確定申告以外で旧バージョンのSafari使用の必要に迫られるケースはほぼ皆無に思われるので、デスクトップや、確定申告フォルダにSafariをペーストし、Safari13.0等とリネームするのがよいかと思う。

#国税庁は、Macでの確定申告者への特別控除を検討せよ

カードリーダーのセッティングの困難さを始めとして、Mac OSでのe-Tax確定申告は非常に難易度が高い。今年はスムーズに進むかと思ったが、申告期間延長という措置に大きな落とし穴があった。まさに、「地獄への道は善意で舗装されている」というべき罠である。推奨（実際には強制）ブラウザをSafari 13.0に限定する必然性も特に感じられない。

国税庁に対しては、e-Tax、とくにMac環境での確定申告に対し、特別控除の適用を要望したい。
2020年はCOBOL元年なので1時間でHello Worldに挑戦

# はじめに
2020年は色々あってCOBOLが世界を制します。
1時間でチュートリアルしてみました。

# 実行環境
Dockerで動くものを用意しました。
[リポジトリ](https://github.com/glassmonkey/hello-cobol)

COBOLのランタイムは[こちら](https://sourceforge.net/projects/open-cobol/files/gnucobol/3.0/)からダウンロードしたものをあらかじめgit管理しています。

実行コマンド

```
$ git clone https://github.com/glassmonkey/hello-cobol
$ cd hello-cobol
$ docker-compose up
```

出力

```
$ hello world
```

# ソースコード


QiitaにCOBOLのシンタックスなくてわろた。


[プログラムちょい替え（4）COBOLを40年ぶりにうごかしてみた:dockerでcobol, docker(81)](https://qiita.com/kaizen_nagoya/items/9d9a216ce1b7b05dbb43)からソースコードお借りしました。


```
000010 IDENTIFICATION                   DIVISION.
000020 PROGRAM-ID.                      SAMPLE-01.
000030*
000040 ENVIRONMENT                      DIVISION.
000050*
000060 DATA                             DIVISION.
000070*
000080 PROCEDURE                        DIVISION.
000090 MAIN.
000100     DISPLAY "Hello world!"  UPON CONSOLE.
000110     STOP RUN.
```

# プログラムの構成
[COBOLプラグラム入門](http://tallercolibri.com/)様を元に参考にしました。
COBOLは部と段落から構成させるプログラム言語とのこと。部は段落から構成されており、それぞれ部には必要な段落を記載するとのこと。

## 見出し部（IDENTIFICATION DIVISION）
プログラムのメタ情報を記述するところ。今回は内部的にSample-01と名前をつけている。
作成者などもここに書く模様。

## 環境部（ENVIRONMENT DIVISION）
実行マシン名（SOURCE-COMPUTER）や環境変数の受け渡し情報やプログラムから読み書きするファイルの名前や種類を書くところ。今回は空。

## データ部（DATA DIVISION）
変数や外部IOに関して記述するところ。今回は空。

## 手続き部（PROCEDURE DIVISION）
いわゆるロジックを書くところ。今回はこのような形でHello worldを標準出力することを記載。

```
000090 MAIN.
000100     DISPLAY "Hello world!"  UPON CONSOLE.
000110     STOP RUN.
```


# 感想
友人が仕事でCOBOLをやり始めたみたいだったので、エイプリルフールネタで入門してみました。学生時代にポケコンでBasic書いてた時代を思い出して、懐かしい気持ちになりました。

なんだかんだコンテナ化できれば、過去の資産は活かせそうかなと思いましたが、やはり使うのはやめましょう。人類には早すぎます。

適当にプログラミング関係のことやグラブル関係のことをつぶやいてたりします。もしよければ[@glassmonekey](https://twitter.com/glassmonekey)をフォローしてくれるとうれしいです。


# 参考
下記をお借りしました。
* ランタイム
https://sourceforge.net/projects/open-cobol/files/gnucobol/3.0/

* Dockrefile参考  
https://blog.office-iwakiri.com/archives/linux/alpine-linux-802
データベースの選択〜テーブル一覧の表示

今回は、データベースを選択するSQL文を紹介します！

1.データベースを選択するSQL文はこのように書きます

```
USE データベース名;
```
試しに、前回の記事↓で参照できたデータベースからデータベースを指定&SQL文の実行をしてみます！
https://qiita.com/yni_se/items/1915a25f34578aa19b12

```
USE pictweet4;
```
次のように表示されていれば、正しくデータベースの選択ができています！

```
mysql> USE pictweet;
Database changed
mysql> 
```

2.テーブルを確認するSQL文はこのように書きます

```
SHOW TABLES;
```
次のように表示されていれば、正しくテーブル一覧を表示できています！

```
mysql> SHOW TABLES;
Empty set (0.01 sec)

mysql> 
```

今回はここまで！次回はテーブル作成・構造確認方法を紹介します＾＾
Node.js+Expressのインストール、起動まで

node.jsのインストール
EC2のセキュリティグループの設定で3000番を開けておく

```
インストール
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
$ . ~/.nvm/nvm.sh
$ nvm install node

バージョン確認
$ node -e "console.log('Running Node.js ' + process.version)"
```

expressのインストール

```
npm init -y
npm i express -S
```

サーバーのファイルの記述し、実行する。

```
$ mkdir src
$ mkdir src/public
$ vi src/app.js
$ vi src/public/index.html
$ node src/app.js
```
```js:src/app.js
// express モジュールのインスタンス作成
const express = require('express');
const app = express();
// パス指定用モジュール
const path = require('path');

// 3000番ポートで待ちうける
app.listen(3000, () => {
  console.log('Running at Port 3000...');
});

// 静的ファイルのルーティング
app.use(express.static(path.join(__dirname, 'public')));

// その他のリクエストに対する404エラー
app.use((req, res) => {
  res.sendStatus(404);
});
```
```html:public/index.html
<!DOCTYPE html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>TEST</title>
    <link rel="stylesheet" href="/css/sample.css">
  </head>

  <body>
    <h1>Hello World!</h1>
    <p id="hoge"></p>
    <div>
      <img src="/img/sample.png">
    </div>
    <script src="/js/sample.js"></script>
  </body>
</html>
```
VimをSQLクライアントにするプラグインdadbod/dadbod-uiを使ってみた

# 概要
VimでSQLを実行できるプラグイン。

MySQLのmysql dbに接続した画面
<img width="1203" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/68643/dacf752c-461c-585f-741e-1ab8503ea2b3.png">

## 確認環境
- Vim 8.2.350
- Mac OS

## 前提条件
- 接続したいDBのクライアントがインストールされている

## 設定
### MySQLの場合

1. 任意の場所に接続先の情報を記述したjsonファイルの作成
例) $HOME/.vim/dadbod-ui/connections.jsonに作成する
```json:connections.json
[{"url":"ユーザー名:パスワード@ホスト:ポート/DB名","name":"任意の名前"}]

// 例
[{"url":"mysql://user_name:password@localhost:3306/local_db","name":"local_db"}]
```

2. .vimrcに接続先の情報を記述したファイルのディレクトリを指定する

```vimscript:.vimrc
let g:db_ui_save_location = '~/.vim/dadbod-ui'
```

デフォルトでは一覧表示(List), インデックス一覧(Indexes), 主キー(Primary Keys), 外部キー一覧(Foreign Keys) がある。
それに別のものを追加したい場合、 `g:db_ui_table_helpers` で設定する。

```vimscript:.vimrc
let g:db_ui_table_helpers = {
\   'mysql': {
\     'Desc': 'DESC {table}',
\     'Create Table': 'SHOW CREATE TABLE {table}',
\     'Comment': 'SHOW FULL COLUMNS FROM {table}',
\     'Count': 'SELECT COUNT(*) FROM {table}'
\   }
\ }
```
## 使い方

下記のコマンドで今開いている画面の左側にテーブル一覧が表示されます。

```
:DBUI
```

`Enter` でコマンドが選択され、右側にSQLが表示されます。
右側のSQLを編集して、保存する(`:w`)と編集したSQLが実行されます。

自分の使い慣れたキーバインド/プラグインでSQLが実行できるので、
すべてをVimで解決したい人には良いプラグインだと思います。

## GitHubリポジトリ
- [tpope/vim-dadbod](https://github.com/tpope/vim-dadbod)
- [kristijanhusak/vim-dadbod-ui](https://github.com/kristijanhusak/vim-dadbod-ui)
【KPI】C#の基本的な画面の作り方 - 04：終了ボタン押下イベントの作成 -【C#】

次は終了ボタンを押した際のイベントを作成する。

終了ボタンを押した際は、とりあえず画面が終了するものとする。

デザインの終了ボタンをダブルクリックする。
![無題1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/575248/41b8972d-8f12-2ecf-b16e-7fec05937432.png)

イベント[BtnEnd_Click]が作成される。
![無題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/575248/02189c13-d276-ebcd-ed34-f0ffe3ed02b4.png)

中に押下時の終了処理を記述する。
![無題3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/575248/ed4b8d63-3874-6104-b93f-209ff7c55365.png)

``` C#:C#
        private void BtnEnd_Click(object sender, EventArgs e)
        {
            try
            {
                // 何か終了処理があればここに
            }
            catch (Exception ex)
            {
                // エラーメッセージを表示
                MessageBox.Show(ex.Message);
            }

            // 画面を終了する
            this.Close();
        }
```
※try-catchは今回使用してないので消して構わない。


デバッグ時の画面はこうなる。
![無題4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/575248/5a26ca35-ede9-e029-8059-2fc6c1d522c3.png)
終了ボタンを押した際は、画面が終了する。


次回は登録ボタンの押下イベント……に使用するチェック処理を作成する。
【今日のアブストラクト】Spectral Normalization for Generative Adversarial Networks【論文 DeepL 翻訳】

1 日 1 回 論文の Abstract を DeepL 翻訳の力を借りて読んでいきます.

この記事は自分用のメモみたいなものです.
ほぼ [DeepL](https://www.deepl.com/home) 翻訳でお送りします.
間違いがあれば指摘していだだけると嬉しいです.

翻訳元
[Spectral Normalization for Generative Adversarial Networks](https://arxiv.org/abs/1802.05957)

# Abstract

### 訳文

敵対的生成ネットワークの研究における課題の一つは, 学習の不安定性である. 本論文では, 判別器の訓練を安定化させるために, スペクトル正規化と呼ばれる新しい重み正規化手法を提案する. 我々の新しい正規化手法は計算量が軽く, 既存の実装に組み込むことが容易である. CIFAR10, STL-10, ILSVRC2012 データセットを用いてスペクトル正規化の有効性を検証し, スペクトル正規化された GANs (SN-GANs) が従来の訓練安定化手法と比較して, より良い品質の画像を生成できることを実験的に確認した.


### 原文

One of the challenges in the study of generative adversarial networks is the instability of its training. In this paper, we propose a novel weight normalization technique called spectral normalization to stabilize the training of the discriminator. Our new normalization technique is computationally light and easy to incorporate into existing implementations. We tested the efficacy of spectral normalization on CIFAR10, STL-10, and ILSVRC2012 dataset, and we experimentally confirmed that spectrally normalized GANs (SN-GANs) is capable of generating images of better or equal quality relative to the previous training stabilization techniques.
EdgeのIEモードの設定

# はじめに
Chromium版のEdgeにはIEモードというものがあります。これはEdgeでリクエストしているけど、サイトによってはIEで開くよ、というものらしいです。互換モード(IEっぽく動作している)というより、実際にIEで開くよう自動切り分けしてくれるらしいです。(タスクマネージャーで見てもIEのプロセスが起動している)
(設定方法は[こちら](https://docs.microsoft.com/ja-jp/deployedge/edge-ie-mode)
で、設定はXMLで書く(GUIから設定値が保管される)のですが、`<compat-mode>`意味が分からなかったので、試した結果を書き留めておきます。

# まとめ
 * `<compat-mode>`に`IE11`を指定するとIE11で表示
 * `<compat-mode>`に`Default`を指定するとIE11の互換モードで表示

# 設定方法

## IE11で開く場合
compat-modeに`IE11`を指定します。

```xml
<site url="hostname">
  <compat-mode>IE11</compat-mode>
  <open-in>IE11</open-in>
</site>
```
リクエストヘッダーのUser-Agentの値は`Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko`になりました。

## IE11の互換モードで開く場合
compat-modeに`Default`を指定します。

```xml
<site url="hostname">
  <compat-mode>Default</compat-mode>
  <open-in>IE11</open-in>
</site>
```
こちらは、リクエストヘッダーのUser-Agentの値は`Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E)`になりました。

# 終わり
えーと、終わりです。これ以外にも設定値はあるみたいですが試していません。
【KPI】C#の基本的な画面の作り方 - 03：プロパティの設定 -【C#】

前回は、画面にコントロールを大まかに張り付けた。

今回は、張り付けたコントロールのプロパティを設定する。

下記の画像を参照。
プロパティを設定したい項目を選択し、右下のプロパティ項目を設定する。
![無題6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/575248/f8320a8c-c8a1-04c8-30a5-b2abe1cd6b12.png)

####プロパティの設定
- [終了]ボタン
    - (Name)：[BtnEnd]を設定
    - Font - Name：[MS ゴシック]を設定
    - Text：[終了 (F1)]を設定
        - これが表示される
- [登録]ボタン
    - (Name)：[BtnEnd]を設定
    - Font - Name：[MS ゴシック]を設定
    - Text：[登録 (F12)]を設定
- [コード]ラベル
    - (Name)：[LblCode]を設定
    - Font - Name：[MS ゴシック]を設定
    - Text：[コード]を設定
- [名称]ラベル
    - (Name)：[LblName]を設定
    - Font - Name：[MS ゴシック]を設定
    - Text：[名称]を設定
- [コード]テキストボックス
    - (Name)：[TxtCode]を設定
    - ImeMode：[Disable]を設定
        - ImeModeの変換ができなくなる。
    - MaxLength：[6]を設定
    - Font - Name：[MS ゴシック]を設定
    - Text：[123456]を設定
- [名称]テキストボックス
    - (Name)：[TxtCode]を設定
    - ImeMode：[Disable]を設定
        - ImeModeの変換ができなくなる。
    - MaxLength：[20]を設定
        - 厳密に言えば全角1文字を2桁として計算した最大20桁としたいが、イベントで調整する。
    - Font - Name：[MS ゴシック]を設定
    - Text：[あいうえおかきく１０]を設定

これらを設定できたら大雑把には見た目は完成。
他にもレイアウトを調整して上記の画面となる。


次回はボタンイベントを設定する。
【React Hooks】グローバル状態管理にはContextAPIを使おう

Reactでグローバルな状態管理といえば`Redux`ですが、`Context API`を使えば似たようなことができるので紹介します。

まずは、グローバル状態を定義します。

```jsx:Global.js
import React, { useState } from 'react';

export const GlobalContext = React.createContext({});

export const GlobalProvider = ({
    children
}) => {
    const [someState, setSomeState] = useState(null);
    const [someState2, setSomeState2] = useState(null);

    return (
        <GlobalContext.Provider
            value={{
                someState,
                setSomeState,
                someState2,
                setSomeState2
            }}
        >
            {children}
        </GlobalContext.Provider>
    );
};
```

ここでは`GlobalContext`と`GlobalProvider`の二つをexportします。


次に、アプリケーションのルートにあたるファイル（./src/index.jsまたは./src/App.js）内でGlobalProviderを読み込ませます。

```jsx:index.js
import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';
import { GlobalProvider } from '@/contexts/Global';

ReactDOM.render((
    <GlobalProvider>
        <App />
    </GlobalProvider>
), document.getElementById('root'));
```

あとは、コンポーネント内でGlobalContextを読み込めば、グローバル状態を参照、更新できるようになります。

```jsx:Page.js
import React, { useEffect, useContext } from 'react';
import { GlobalContext } from '@/contexts/Global';

export default () => {
    const { someState, setSomeState } = useContext(GlobalContext);

    useEffect(() => {
        // handler
    }, [someState]);

    return (
        <div>
            {someState}
        </div>
    );
};
```

`Redux`よりもお手軽にグローバルな状態管理ができるようになりました。
個人的にはフローがややこしい`Redux`よりもこちらの方が便利だと思いました。
UbuntuでPoetryを使ってみる(インストール編)

これまで Pipenv を好んで使っていましたが、PEP 準拠の `pyproject.toml` で色々まとめて書いてみたいと思ったので、 Poetry に乗り換えてみようと思いました。
その覚書として、インストール編を書いてみました。

## TL;DR

```treminal
$ curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | python
$ poetry completions bash | sudo tee /etc/bash_completion.d/poetry.bash-completion
```

## バージョン

* OS：Ubuntu 19.10
* python：3.8.0
* Poetry：1.0.5

公式によると、Python のバージョンは 2.7 と 3.4 以上で使えるみたいです。

## インストーラのダウンロード及び実行

通常、Python のパッケージのインストールといえば、 `pip` コマンドを利用すると思いますが、 Poetry は独自にインストーラを用意しています。
`pip` コマンドでインストールすることも可能ですが、「競合の原因となり得る依存関係もインストールされる」(← 英語弱い)、とかなんとか注意書きしてあるので、独自のインストーラを利用しようと思います。

下記のコマンドを実行すれば、 Poetry がインストールされます。

```terminal
$ curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py | python
$ poetry --version
Poetry version 1.0.5
```

インストールが完了すると、自動的に `.profile` にパスが追加されています。
このタイミングで出力されるメッセージにパスを追加してねって書いてあるけども。。。

このメッセージには、アンインストールする方法も書いてあります。
このタイミングで書くのもどうかと思いますが、あまり調べてもすぐに出てこなかったのでここに書いておきます。

```terminal
$ curl -sSL https://raw.githubusercontent.com/python-poetry/poetry/master/get-poetry.py -o get-poetry.py
$ python get-poetry.py --uninstall
```

最初の `curl` は、 `get-python.py` をファイルとして保存するために実行しています。
これを実行すると `.profile` から自動的にパスが削除されます。

## Bash の補完を有効にする

Poetry に対して、 Bash の補完機能を有効にするためには、下記のコマンドを実行します。

```terminal
$ poetry completions bash > /etc/bash_completion.d/poetry.bash-completion
```

恐らくですが、許可がないと怒られたのではないでしょうか。
そんな場合には、下記のコマンドを実行します。

```terminal
$ poetry completions bash | sudo tee /etc/bash_completion.d/poetry.bash-completion
```

これで補完が効くようになったことでしょう。

```terminal
$ poetry <Tab>
about    cache    debug    help     lock     remove   self     update
add      check    env      init     new      run      shell    version
build    config   export   install  publish  search   show
```

これでインストールは完了です。

## Poetry のアップデート

Poetry をアップデートするためには、下記のコマンドを実行します。

```terminal
$ poetry self update
```

## まとめ

Poetry のインストール方法、補完機能を有効にする方法等について書いてみました。
気が向いたら、使ってみる編書こうと思います。

おかしなところがあれば、コメント頂けると幸いです。
【KPI】C#の基本的な画面の作り方 - 02：デザインの大まかな指定 -【C#】

前回の続きから。

次はツールボックスより、大雑把に画面に必要な項目を用意する。

今回は画面の仕様として。「コード・名称の項目をデータテーブルに登録する」というシンプルなものを想定。

まずは[登録ボタン][終了ボタン]となる2つのボタンを用意する。
ボタンは[ツールボックス][コモン コントロール][Button]から作成する。
![無題1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/575248/c8b53ca2-4b7a-a990-fadf-eb534ef2798c.png)
![無題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/575248/de55b27e-be48-3b7c-ef22-c7c0cdb8645d.png)

次は[コード][名称]のラベルを用意する。
ラベルは[ツールボックス][コモン コントロール][Label]から作成する。
![無題3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/575248/def0ad4a-9258-a546-ad06-2daa08cec2fa.png)
![無題4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/575248/ca970ca8-db8f-c0a7-74c4-83fba3c4d6d8.png)

次は[コード][名称]のテキストボックスを用意する。
テキストボックスは[ツールボックス][コモン コントロール][TextBox]から作成する。
![無題5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/575248/06e43a2d-fabd-7ab6-c671-38cfbf0bd782.png)
![無題6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/575248/149c57f7-23b8-37a6-f492-630df5cf31c7.png)


大体このようなデザインを作成できる。
次回は今回作成したコントロールのプロパティを修正していく。（名前や見た目、入力桁数等）
Springアプリでビルド時のバージョン情報を出力する

みなさんはアプリを開発しているときに、デプロイされているアプリのバージョン情報を知りたくなったことはないでしょうか。
バグを発見したとき、デプロイに失敗したのではないかと疑っているとき、・・開発をしているとあらゆるタイミングでそんな状況に遭遇しているのではないかと思います。

gradleのカスタムタスクを使って簡単に実現できましたので方法をまとめておきます。一般公開されているアプリの場合、本番環境では埋め込むことは難しいと思われますが、開発環境だけでも組み込むことを検討してみてはいかがでしょうか。

## ビルド時の情報をファイル出力する

カスタムのgradleタスクを作成し、ビルドする際にデータを出力しておきます

* 本タスクはresourceフォルダの処理より前に実行されるように依存させています
* ビルド時の時刻、ブランチ、コミットIDをjson形式で保存しています。

```build.gradle
task outputBuildInfo() {
	processResources.dependsOn it
	doFirst {
		println "save buildInfo"
		String branch = "git branch --show-current".execute().text.trim()
		String commitId = "git log --pretty=%h -1".execute().text.trim()
		def json = new groovy.json.JsonBuilder()
		json(
				branch: branch,
				commit: commitId,
				buildTime: LocalDateTime.now().format(DateTimeFormatter.ofPattern("uuuu/MM/dd HH:mm:ss")),
		)
		new File('src/main/resources/buildinfo/buildInfo.json').write(json.toPrettyString())
	}
}
```

## ファイル出力されたビルド情報を出力するAPIを作成する

jsonの中身をそのまま返すだけにしています。開発環境のみで実行したい場合は `@Profile` を利用して適用すべき環境を絞っておきましょう。

```BuildInfoApiController.java
@RestController
@Slf4j
@RequiredArgsConstructor
public class BuildInfoApiController {

    private final ResourceLoader resourceLoader;

    @GetMapping(value = "/buildinfo", produces = {"application/json"})
    public String buildinfo() {
        try {
            Resource buildInfoJsonFile = resourceLoader.getResource("classpath:buildinfo/buildInfo.json");
            return new String(Files.readAllBytes(buildInfoJsonFile.getFile().toPath()));
        } catch (Exception e) {
            log.warn("buildInfo error", e);
            return "{}";
        }
    }
}
```

結果サンプルです

```buildInfo.json
{
    "branch": "develop",
    "commit": "abcd1234",
    "buildTime": "2020/03/31 20:59:28"
}
```

## 補足

gradleのタスクの依存関係はbuild.gradleに以下を追記すれば出力できます。どのタスクに依存させるべきかよくわからなくなったときは一度出力してみると理解しやすいです。

```build.gradle
gradle.taskGraph.whenReady {taskGraph ->
	println "Found task graph: " + taskGraph
	println "Found " + taskGraph.allTasks.size() + " tasks."
	taskGraph.allTasks.forEach { task ->
		println task
		task.dependsOn.forEach { dep ->
			println "  - " + dep
		}
	}
}
```

抜粋ですが、出力内容は以下のようになります。

```
Found task graph: org.gradle.execution.taskgraph.DefaultTaskExecutionGraph@40e65ab
Found 14 tasks.
task ':clean'
task ':compileJava'
task ':outputBuildInfo'
task ':processResources'
  - task ':outputBuildInfo'
```
Approximation theorems of mathmatical statics

```{r}

#Approximation theorems of mathmatical statics p.64

#cramer-von Mises test

library(dplyr);library(mvnorm)

n=10000

x=rbinom(n, size=50, prob=0.3)

values=sort(unique(x))

data=data.frame(values=values,Fn=0,F=0,f=0,fn=0)

for(j in 1:length(values)){

data$Fn[j]=sum(x<data$values[j])/n

data$F[j]=ppois(data$values[j],50*0.3)

data$f[j]=dpois(data$values[j],50*0.3)

#sample density functions(bn=1/log(n))

data$fn[j]=(sum(x<data$values[j]+1/log(n))/n-sum(x<data$values[j]-1/log(n))/n)/(2/log(n))

}

C_n=n*sum(data$f*(data$Fn-data$F)^2)

#using theorem A(Finkelstein)

epsilon=0.00001

under=C_n-(1+epsilon)*(2*log(log(n)))/(pi^2)

upper=C_n+(1+epsilon)*(2*log(log(n)))/(pi^2)


#p.68 2.2.2

n=10000

mu=2

x=rnorm(n,mu,1)

b=c()

mu2=c()

k=10

for(j in 1:k){

b=c(b,sum((x-mu)^j)/n)

mu2=c(mu2,sum((x-mu)^(2*j))/n)

}

#V(bk)

(mu2-b^2)/n

cov_mat=array(0,dim=c(k,k))

for(i in 1:k){
for(j in 1:k){

cov_mat[i,j]=(sum((x-mu)^(i+j))/n-sum((x-mu)^i)*sum((x-mu)^j)/(n^2))/n

}}

(rmvnorm(100,b,cov_mat),2,mean)

```
Windows10でVirtualBox＋Vagrantを利用してLinux環境構築のメモ

Windows10でVirtualBox＋Vagrantを利用してLinux環境を構築したため、メモとして残ります。

### 目次
・VirtualBoxのインストール
・Vagrantのインストール
・Linux環境の構築

### VirtualBoxのインストール

・[VirtualBox公式サイト](https://www.virtualbox.org/wiki/Downloads)から「Windows hosts」をクリックし、ソフトをダウンロードします。現時点の最新バージョンは、VirtualBox 6.1.4 です。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154911/f69ded10-4604-3b9f-6aa9-a7d947f49de4.png)


・ダウンロードしたインストーラを起動し、手順に従ってインストールします。特に必要な設定とかがないです。
・インストールができたら、以下のような画面が表示されます。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154911/779e3ace-032d-19ea-50e1-e895250595c9.png)

これでVirtualBoxのインストールが完了です。


### Vagrantのインストール

・[Vagrant公式サイト](https://www.vagrantup.com/downloads.html)からWindows 64bitのバージョンを選択し、ダウンロードします。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154911/3afe1503-6b7e-eb88-8c05-4d5a0712160f.png)


・ダウンロードしたインストーラを起動し、手順に従ってインストールします。特に必要な設定とかがないです。
・インストールができたら、PCを再起動します。

これでVagrantのインストールが完了です。

### Linux環境の構築

#### Vagrantを実行するための環境を準備

Vagrantでは、フォルダ単位で仮想マシンを作成するので、ここで「test1」の実行用フォルダを作成する

```
例：
C:\tool\vagant\test1
```


#### Vagrantfileを作成する

Windowsのコマンドプロンプトを開いて、以下のコマンドを実行する

```
㏅ C:\tool\vagant\test1
```

次、Vagrantfileを作成する

```
vagrant init
```
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154911/cade94f0-6b9c-e56d-dd12-9536f527f4f9.png)


これで、test1のフォルダ下に、Vagrantfileというファイルが生成されます。

#### Vagrantfileを設定する

Vagrantfileファイルを開いて、以下の2か所を修正する

```
修正箇所1
修正前：
　config.vm.box = "base"
修正後：
  config.vm.box = "centos/7"　　//Centos7をインストール
  config.vm.hostname= "192.168.33.10"　　//仮想マシンのIPを設定
```

```
修正箇所2（コメントアウトを外すだけ）
修正前：
　# config.vm.network "private_network", ip: "192.168.33.10"
修正後：
  config.vm.network "private_network", ip: "192.168.33.10" 
```
Vagrantfile で設定できるネットーワークについて、以下の記事を参考ください。
[Vagrant 事始め 04 - Vagrant のネットワーク設定](https://qiita.com/centipede/items/64e8f7360d2086f4764f)

#### 仮想マシンを起動する

Windowsのコマンドプロンプトで以下のコマンドを実行して、仮想マシンを初期起動します。

```
vagrant up
```

初期起動する際、以下のエラーが出る可能性があります。

```
エラーメッセージ：
Timed out while waiting for the machine to boot. This means that
Vagrant was unable to communicate with the guest machine within
the configured ("config.vm.boot_timeout" value) time period.

その対策：
・管理者ユーザーから、cmdを実行してコマンドプロンプトを開く
・「dism.exe /Online /Disable-Feature:Microsoft-Hyper-V」のコマンドを実行して、Microsoft-Hyper-Vを閉じる
```



#### 仮想マシンの操作コマンド

仮想マシンを起動できたら、以下のコマンドで操作可能です。

```
仮想マシンにログイン：　vagrant ssh
仮想マシンからログアウト:　 exit
仮想マシンを停止:　vagrant halt
仮想マシンの削除:　vagrant destroy
```
Linux環境でSSH制限

#Linux環境でhosts.allow , host.denyの設定
簡単にLinux環境でローカルで試験するために設定したので、メモのために残しておきます。

##/etc/hosts.allow設定
私の環境はCent OS 8でリモートアクセスの許可を/etc/hosts.allowで設定します。
IPアドレスは192.168.3.〇〇/24で、一応私だけでなく他の同じネットワーク上の方も触れるように、しました。
設定は下記です。

sshd : 192.168.3.

##/etc/hosts.deny設定
hosts.allowで設定した以外の全てのIPアドレスからのSSH接続を禁止します。

sshd : all

##まとめ
少なくてすいません。
最近はLinuxも勉強中です。