OmniAICreator/Qiita-1.07M huggingface dataset:
How to update flask-bootstrap4 CDN on your flask application

Ay up mate! Long time no see. Already 4 years, since I made the 1st post. This is my 2nd post since 2016.
Now, I want to share how to modified **flask-bootstrap4** after you installed on your flask application.
Because sometimes **bootstrap.css/fontawesome.css/popper.js/jquery.js** need an update.
This is what I've done.

First, **flask-bootstrap4** need to be installed to your flask app. So, you will need to activate your virtual environment first to install flask-bootstrap4, and then run your flask application. I named my virtual environment as **venv**.
If you're on Windows use command prompt to install, but if you're on Linux/MacOS use terminal.

```python:venv
pip install flask-bootstrap4
```

After you install go to 
> venv > Lib > site-packages > flask_bootstrap

Now, modify **__init__.py**

```python:__init__.py
__version__ = '4.4.1'
BOOTSTRAP_VERSION_RE = re.compile(r'(\d+\.\d+\.\d+(\-[a-z]+)?)')
POPPER_VERSION = '1.16.0'
JQUERY_VERSION = '3.4.1'
FONTAWESOME_VERSION = '5.11.2'

... 

popper = lwrap(
    WebCDN('//cdnjs.cloudflare.com/ajax/libs/popper.js/%s/' %
            POPPER_VERSION), local)

bootstrap = lwrap(
    WebCDN('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/%s/' %
            BOOTSTRAP_VERSION), local)

fontawesome = lwrap(
    WebCDN('//cdnjs.cloudflare.com/ajax/libs/font-awesome/%s/' %
            FONTAWESOME_VERSION), local)

jquery = lwrap(
     WebCDN('//cdnjs.cloudflare.com/ajax/libs/jquery/%s/' %
            JQUERY_VERSION), local)

app.extensions['bootstrap'] = {
     'cdns': {
         'local': local,
         'static': static,
         'popper': popper,
         'bootstrap': bootstrap,
         'fontawesome': fontawesome,
         'jquery': jquery,
      },
}

```

Next step, we need to go to **base.html**. It's located in template > bootstrap
> venv > Lib > site-packages > flask_bootstrap > templates > bootstrap

Let's update **base.html**

```html:base.html
<!-- Bootstrap -->
<link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet">
<link href="{{bootstrap_find_resource('css/all.css', cdn='fontawesome')}}" rel="stylesheet">

...

<script src="{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>
<script src="{{bootstrap_find_resource('umd/popper.js', cdn='popper')}}"></script>
<script src="{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>

```

Finally, run your flask app. Now all **bootstrap.css/fontawesome.css/popper.js/jquery.js** have been updated. 

For more detail, you can see it on the official github of flask-bootstrap4:
https://github.com/JeffCarpenter/flask-bootstrap4

Well, that's all for today mate. Have a good day. 
Happy coding and see you next time.
[自分用メモ] 数年後の自分へ、超基本的なJavaScriptの書き方

AWSアーキテクトである私が、縁があってReactを書いているので、
数年後の自分宛てに、JavaScriptの基本的な書き方をテキトーに列挙しておく。

いつの日か、また、JavaScriptを書くことがありますように。


```
/**
 * クラスの書き方
 */
export default class People {
    constructor(name, gender) {
        this.name = name;
        this.gender = gender;
    }

    say = gree => {
        return this.name + gree;
    }
}

const people = new People("yamazaki", "man");
people.say("Hello");


/**
 * 関数の書き方
 */
export const add = (v1, v2) => {
    return v1 + v2;
};


/**
 * importの書き方
 */
import People from "./相対パス";
import { add } from "./相対パス";
import * as add from "./相対パス";


/**
 * 条件分岐の書き方
 */
const condition = 1;
if (!condition) {

} else if (condition > 0) {

} else {

}

var result = condition ? "true" : "false";

const number = 1;
result = !number ? "空"
    : number > 0 ? "プラス"
        : number === 0 ? "0"
            : "マイナス";


/**
 * リストの書き方
 */
const list = [1, 2, 3, 4, 5];
console.log(list[0]);

/**
 * リストのループ
 */
const listTwice = list.map(value => value * 2);
const convertAfter = listTwice.map((value, index) => {
    if (index === 1) {
        return "";
    }
    return value;
});

// 他にも、forEachやfilterなどがある。

/**
 * Object(Dict)の書き方
 */
const valueObject = {
    key: "qq1",
    value: "value",
    aaa: () => {
        return "ooo";
    }
};
console.log(valueObject.value);
console.log({...valueObject});


/**
 * Object(Dict)のループ
 */
var resultObject = {};
for (var key in valueObject) {
    if (key === "aaa") {
        continue;
    }
    console.log(key);
    console.log(valueObject.key);
    console.log(valueObject[key]);

    resultObject[key] = valueObject.key;
}

// mapやforEach当を使いたいとき

const objectKeys = Object.Keys(valueObject);
const resultList = objectKeys.map(key => (valueObject[key]))
```
ABC 153: E - Crested Ibis vs Monster

#### 問題
体力 $H$ のモンスターがいる。トキは $N$ 種類の魔法が使えて、$i$ 番目の魔法はモンスターの体力を $A_i$ 減らせるが、自分の魔力を $B_i$ 消耗する。モンスターの体力を $0$ 以下にするために必要な魔力の消耗の最小値を求める。

#### 解法
動的計画法で求めます。わからない人は「ナップザック問題」でググりましょう。[DPまとめコンテスト](https://atcoder.jp/contests/dp)の次の問題あたりが典型例です。
[E - Knapsack 2](https://atcoder.jp/contests/dp/tasks/dp_e)

##### 体力から考える
[けんちょんさんの解説](http://drken1215.hatenablog.com/entry/2020/01/26/225000)がわかりやすいです。ここでは割愛します。

##### 魔力から考える
$dp[i][j]$ = ( $i$ 番目までの魔法を使い、魔力消耗 $j$ で減らせるモンスターの体力)
というDPテーブルを作ります。漸化式は、

```math
dp[i][j] = \max(dp[i-1][j], dp[i][j-B[i]]+A[i])
```

とします。答えは、あまり直観的ではないですが $\min_{dp[N][j]\geq H}j$ です。

##### DPテーブルのとり方を工夫する
素朴な問題であれば、上の漸化式をそのまま実装すればACするのですが、今回の問題ではREします。なぜなら、DPテーブルの空間計算量が $O(NH\max A_i) \sim O(10^{11})$ になるためです[^1]。

しかし、よく漸化式を見てみると、$dp[i-1][*]$ と $dp[i][*]$ の2行しか必要としていません。というわけで、次元を一つ減らして

```math
dp[j] = \max(dp[j], dp[j-B[i]]+A[i])
```

としても結果に影響が出ないことがわかります。これならば $O(10^8)$ で収まるので、実装可能です[^2]。

#### 感想
半年ぶりくらいにDPを書いたので思い出すのに1時間くらいかかった。


[^1]: $10^{11}$Bはおよそ100GBです。よっぽどメモリを積んだマシンでなければ用意できません。
[^2]: 解説PDFでは「解けない」と断言されているのがよくわかりませんが、少し調べたところこの解法でACしている人は複数いる模様です。嘘解法だったらごめんなさい。
[Catalina] Mac の OpenSSH Server を公開鍵認証のみにする

## 準備

リモートログインを有効化する前に `/etc/ssh/sshd_config` を編集します．

- ルートログインの無効化（デフォルトはパスワード認証のみ無効）

```diff
- #PermitRootLogin prohibit-password
+ PermitRootLogin no
```

- パスワード認証を無効化

```diff
- #PasswordAuthentication yes
+ PasswordAuthentication no
```

- チャレンジレスポンス認証を無効化

```diff
- #ChallengeResponseAuthentication yes
+ ChallengeResponseAuthentication no
```

編集後に SSH サーバの再起動等は不要です．


## リモートログイン

[システム環境設定] -> [共有] で「リモートログイン」を有効化します．
「Administrators」ではなく特定のユーザのみに制限することも可能です．

![スクリーンショット 2020-01-28 13.04.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131552/56ec3556-cbaa-75ba-f54b-cf94825ddbf4.png)



## おまけ

特定の IP アドレスからのみパスワード認証を有効化したい場合は `/etc/ssh/sshd_config` の最後に以下のような追記をしましょう．

```config
Match Address 10.1.0.0/16
    PasswordAuthentication yes
```
「macOSで必要なため、変更または削除できません」や「Operation not permitted」と表示される場合

Finder で「macOSで必要なため、変更または削除できません。」またはターミナルで`sudo`をつけても「Operation not permitted」と表示される場合の対処法です。
<img width="418" alt="can’t be modified or deleted because it’s required by macOS." src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/155587/da9790b2-1c08-1b08-7e14-c5db08287242.png">
ただ、そもそもこのエラーが表示されるということはそのファイルがシステム領域にあるということなので、変更または削除する際には自己責任でお願いします。また、(この作業を行わなくても日頃から)バックアップを取っておくことを推奨します。

# 原因
SIP（System Integrity Protection）
[Mac のシステム整合性保護について https://support.apple.com/ja-jp/HT204899](https://support.apple.com/ja-jp/HT204899)
> システム整合性保護は、OS X El Capitan 以降で採用されているセキュリティ技術です。Mac 上の保護されたファイルやフォルダを改ざんしようとする悪質なソフトウェアからデータを守ります。システム整合性保護では、ルートユーザアカウントに制約を課し、Mac オペレーティングシステムの保護されている部分に対してルートユーザが実行できる操作を制限します。

> システム整合性保護では、システムの以下の部分が保護されます。

>  /システム
  /usr
  /bin
  /sbin
  /var
  OS X にあらかじめインストールされている App

# 対処法
## A. リカバリーモードでターミナルで作業する
`Command + R` を押して起動し、ターミナルから作業すると、SIP は適用されません。
[macOS 復元について https://support.apple.com/ja-jp/HT201314](https://support.apple.com/ja-jp/HT201314)

## B. SIP を一時的に無効にする
`Command + R` を押して起動し、ターミナルから SIP を無効化するコマンドを入力し再起動し、作業を行います。
作業が完了したら再び `Command + R` を押して起動し、ターミナルから SIP を有効化するコマンドを入力し再起動します。
[macOS 復元について https://support.apple.com/ja-jp/HT201314](https://support.apple.com/ja-jp/HT201314)

### SIP の無効化

```
csrutil disable
```

### SIP の有効化

```
csrutil enable
```

### SIP の確認

```
csrutil status
```

有効であれば `System Integrity Protection status: enabled.` と表示されます。

なおリカバリーモード以外で SIP を切り替えることはできず、`csrutil: failed to modify system integrity configuration. This tool needs to be executed from the Recovery OS.` と表示されます。
【Excel VBA】そのExcelファイル形式で使用できる行数、列数の最大数をVBAで取得する。

メモとして残します。

VBAコードの改修の際2003形式の最大行数は「65536」であり、その数値をべた書きしているコードでした。
今回調査して、ファイル形式毎に動的に天井の数値を取得するように改修しなおしたため、ついでに備忘録として残しました。

#■やり方
```vb
'最大列数
max_Columns = Columns.Count
'最大行数
max_Rows = Rows.Count
```
#■余談

最大だと語弊があるかもなので、どちらかというと`限界列数`、`限界行数`という表現のほうがしっくりくるかもです。
Gsuiteセミナー@六本木 セミナーメモ

# 概要
2020/01/28 Gsuiteセミナー@六本木 森ビルのメモです。
(※随時編集します)

# Session1 Gsuiteで実現する最先端の働き方
[(公開資料)](https://drive.google.com/file/d/1dmbWc0X7k7vJq486O0zpGMJEyUZ2L2DZ/view)
登壇者：GoogleCloud 小林直史さん

### 働き方改革
* 労働人口減少　⇔　長時間労働問題
* リモートワーク 2020年における普及率見込みは50%
* 働き方の質の変化が求められる

### Gsuiteの導入
* Notes(IBM)からの移行のよくある契機
 * サポート切れ
 * ベンダーロックイン
* ツール入れて終わりではない
* Googleのカルチャーを展開

### 導入事例
FUJITEC/FUJIFILM/kubota etc...

### Gsuiteの特長
強力なセキュリティ
ブラウザがあれば使える

* 1.Together (リアルタイムなコミュニケーション)
* 2.Smart (場所もデバイスも選ばず働く)
* 3.Fast (検索で仕事をする)

#### 1.Together (リアルタイムなコミュニケーション)
* メールに費やす時間を減らす
 * 移動中にモバイルからメールの返信
 * AIがある程度返信の頭分の候補を出してくれる(SmartReply)
 * 未返信のメールを上に持ってきてくれてFollowUpしてくれる
* メールとチャットの使い分け
 * メールもフォーマルな場面にて引き続き使用。
* ChatInGmail (1〜3月にβ版リリース予定)
 * 一つのUIでメールとチャット両方共存
 * 一つのUIの中で両方に対し検索が可能
 * 「どっちでしゃべった内容だっけ？？」を解決

#### 2.Smart (場所もデバイスも選ばず働く)
* 会議には無駄が多い
 * 議事録のリアルタイム化
 * 紙をなくす
* リアルタイム編集
* HangoutsChat
 * チャット上で資料共有

#### 3.Fast (検索で仕事をする)
* cloud search
 * あらゆるドキュメントを検索にひっかけることが可能(実体がどこにあるかは気にしなくていい)
 * 「ファイルがどこにあるかわからない、見つからない問題」を解消
 * ファイル、フォルダを探す時間を削減

### 価格体系
最低価格　basic 月¥680/ID

## Session2　Gsuiteで解決できるLotus(Notes)Domino課題
[(公開資料)](https://drive.google.com/file/d/1DfULpt1Lv1UT2Qth_iClzZiPP5XHjCit/view)
登壇者：日本情報通信株式会社　Hideaki Tokidaさん

### 移行時の選択肢
* 検討時に機能比較、コストの話はしなかったとのこと
 * 機能はGsuite、Office365どっちも同じようなもん
 * コンセプトに乗れるかで判断

### 2020年IT課題
* DX
* 会議の最適化 →ITが全然業務を支援してない
* オンラインにあげることで逆にDL不可とすることえセキュリティ強固になる
* 企業内システムを安全にInternetから利用するには

### 移行時の方針
* 「これまでと同じ使い方」は目指さない
 * 目的に立ち返り、新しいやり方をめざす

### 移行の流れ
* ID設計
* Gmailの移行
* Gsuite機能順次開放
* 既存機能の停止、Gsuite切り替え

### まとめ
* 導入することで変化への一歩
 * インフラ保守からの開放
 * 利用状況の可視化も可能 workinsigth→ログとしてとれる
* 「ツールがすべてではないが、ツールで変わることもある」
* 「システムの変化で働き方を変える」

## Session3　ITツール導入後、職場の浸透をはかるにはといったテーマ
登壇者：コクヨ 情シス部門の方
従業員　6800名 (パートナー含めGsuite 約7000ID)
オフィスをショールームとして見学可能

2012年にGsuite導入

> ここのセクションの内容は時間を見て追記します。

### まとめ
情シス発信ながら、他部署の巻き込みが必要

## Session4　[WORKSHOP]実際にGsuite使ってみる
chromebook使ってのワークショップ

### Agenda
以下を体験して各機能がシームレスに連携することを実感。

#### 1.共同編集 
 [あるある]
 
* 編集順番などのルール決めが必要
* ファイルはメールで添付ファイル共有
* 版管理が煩雑に

→リアルタイムでの共同編集により解決可能

編集したセルに対し、コメントを飛ばすことが可能
(ショートカット Ctrl+Alt+M)
→飛ばしたコメントはGmailで飛ぶ

#### 2.会議の設定
* イベント作成
 * 招待者をゲスト検索し指定、会議場所を指定して送信し、招待可能。
 * AIでおすすめの時間のサジェストも可能 

> ゲスト候補は不特定多数に検索可能？絞り方どうしてる？
→可能。公開/非公開でコントロールしているとのこと。

#### 3.管理機能
 * ダッシュボードで可視化可能

#### ps おわりに
カフェテリアゾーンは噂に聞く通りでオシャレでした。
コーヒー軽食フリー。素敵。:coffee:
package.jsonの意味

package.jsonはそのプロジェクトで使用しているモジュールの依存関係を表している。
node_modulesのフォルダはgitignoreされているので、package.jsonをgit下で管理して、yarnやnpmを使って、インストールしたパッケージについてメンバー間で共通認識を持つ事が出来る。
ChatworkのメッセージをGmailにバックアップするGoogle Apps Script

Gmailに送られたメールをChatworkに転送する記事はよく見かけるけど(例えば[ここ](https://qiita.com/shinpia_jp/items/97a21f3b5c6f5858bfbb)とか)、逆にChatworkのメッセージをGmailに転送するほうは見当たらなかったので、作ってみました。
Google Apps Scriptで下記のスクリプトを張り付ければOK。添付ファイルはGoogle Driveにアップロードしてリンクを貼ります。
下記で変更する箇所は、ChatworkのAPIトークン、メールアドレス周り、Google DriveのフォルダのID。
Gmailの制限で一日100通までしか送れないみたいなので、頻繁に投稿があるようなroomのバックアップは無理。

```js
function getChat(){
  var CW_ID="XXXXXXXXXXXXXXXXXX"; //APIトークン
  var CW_ROOM="XXXX"; //room番号
  var url = "https://api.chatwork.com/v2/rooms/"+CW_ROOM+"/messages";
  
  var strTo="XXXXXXXXXXXXXXXXX"; //To　宛先のメールアドレス
  var strFrom="XXXXXXXXXXXXXXX"; //From 自分のGmailアカウント
  var strSender="XXXXXXX"; //差出人　適当に
  var DRIVE_ID="XXXXXXXXXXXXXXXXXXXXXXXXXXX"; //Google Driveで作っておいたフォルダのID
 
   var options =
   {
     headers : {"X-ChatWorkToken" : CW_ID},
     method : "get"
   };
  
  var response = UrlFetchApp.fetch(url,options);
  if(response.getContentText()){
  var json = JSON.parse(response.getContentText());
  for each(var obj in json){
    //Logger.log(obj.body);
    Logger.log(obj.account.name);
    Logger.log("\n\n");
    /* メール本文を準備 */
    var strSubject="[chatwork] "+obj.account.name;
    var strBody=obj.body;
    
    var strDownload = strBody.match(/\[download:(\d+)\]/);
    if(strDownload){
      Logger.log("test: "+strDownload+"\n");
      var strDownloadId = strDownload[1];
      var urlDown = "https://api.chatwork.com/v2/rooms/"+CW_ROOM+"/files/"+strDownloadId+"?create_download_url=1";
      var resDown = UrlFetchApp.fetch(urlDown,options);
      var jsonDown = JSON.parse(resDown.getContentText());
      Logger.log("url: "+jsonDown.download_url);
      var downFile = UrlFetchApp.fetch(jsonDown.download_url);
      var downFileBlob = downFile.getBlob().setName(jsonDown.filename);
    
      // 取得した画像をGoogle Driveにアップロード
      var file = DriveApp.createFile(downFileBlob);
      
      // 予め作っておいた画像フォルダの情報を取得
      var myFolder = DriveApp.getFolderById(DRIVE_ID); //フォルダを取得
      var file = myFolder.createFile(downFileBlob); //ドライブに添付ファイルを保存
      var strfile = jsonDown.filename + ": " + file.getUrl();
      var access = DriveApp.Access.ANYONE_WITH_LINK;
      var permission = DriveApp.Permission.VIEW;
      file.setSharing(access, permission);
      strBody=strBody+"\n"+strfile;
      
    }
    /* メールを送信 */
    GmailApp.sendEmail(
      strTo,
      strSubject,
      strBody,
      {
        from: strFrom,
        name: strSender
      }
    ); //MailAppではfromが設定できないとのこと
  }
  }
}
```
async,awaitの使い方

# 参考サイト
http://memowomome.hatenablog.com/entry/js_async_viz

# Promiseを使った例
```js
const p1 = new Promise(resolve =>
  setTimeout(resolve, 10000) // 10秒経ったら
);
const p2 = new Promise(resolve =>
  document.body.addEventListener('click', resolve) // document.bodyがクリックされたら
);
const p3 = new Promise(resolve =>
  window.addEventListener('load', resolve) // windowのloadが完了したら
);

Promise.all([p1, p2, p3]).then(() =>
  console.log('10秒経っていてかつ、document.bodyがクリックされていてかつ、windowのloadが完了した状態')
);
```
Promiseは同期的な記述をする事が出来るため、コールバックのネストを無くす事には成功した。
ただ、Promise.allは処理の順番をコントロールする事が出来ないので、aが終わったらbとする記述は書けない。

# async,awaitを使った例
```js
function a() {}
function b() { return new Promise(resolve => setTimeout(resolve, 1000)) }
function c() {}

const fn = async () => {
  a();
  await b();
  c();
} ;

fn();
```
この処理はc()を行う前にb()が必要という事を記述出来る。
setTimeoutという関数の返り値がpromiseオブジェクトではないため、promiseで包んであげる必要がある。
axiosなどを使う場合は返り値が元々promiseオブジェクトなのでpromiseで包む必要がない。

- 行う事としては、apiを利用する関数にはpromiseで包んで返り値をpromiseオブジェクトにする。
- その関数を使う関数に対してasyncを付ける。
- apiを利用する関数にawaitを付ける。

以上。
論文集を作る


論文集を作るためのmd(mark down)

論文集を作るとき、何が必要かを洗い出す。

# 事例

ある論文集を１ヶ月で企画し、実行する記録をgithubに掲載するにあたり、
githubダウン時の参考資料として、researchmap, gitlabおよび Qiitaに展開する資料。 

## 投稿資格

過去に連名で投稿したことがある方。 今、一緒になにかしていることがある方。 これから一緒になにかしようという提案のある方。

## 原稿

LatexのソースまたはPDFファイルで、A4で１枚から8枚まで（要相談） 既発表可。連名可。ただし、出版元または著作権者の了解は投稿していただく方でお願いします。

## 締め切り
第一締め切り(案)

2020年2月27日（木）

## 目標
ver. 0.01 参加人員 2, page数 4

# 原則

論文集を作る時には、目的、範囲、目標、制約条件、学術的背景などがあるうとよい。

## 投稿資格

学術団体によっては、会員だけが投稿資格があるとする場合と、誰でも投稿できる場合とがある。

日本学術会議の開催する安全工学シンポジウムは、投稿資格は日本で当日発表できる人。

## 原稿

原稿はPDF、LaTeXなど。

## 締め切り

## 載否




# 参考資料(reference)
https://github.com/kaizen-nagoya/Management_with_Process_Assessment/blob/master/makingbook/readme.md

# 文書履歴(document history)
ver. 0.01 初稿 20230302
ver. 0.04 URL追記　20230302

### 最後までおよみいただきありがとうございました。

いいね　💚、フォローをお願いします。

####  Thank you very much for reading to the last sentence.

Please press the like icon 💚　and follow me for your happy life.
Ruby の module 名にはどんなものがあるか

# 概要

いろいろなプログラミング言語でよく見かける命名規則としては「クラス名は名詞にしろ」というものがある。では同じようにモジュール名に関する規則もないだろうか、と考えて調べてみた。結論としては品詞に一貫性はなかった。このような表現が好まれる、という傾向を見出すことはできるかもしれないが、普段から英語に触れていないと見つけにくいのかもしれない。

(意見求む)

# なぜそう考えたか

まず最も有名なモジュールとして、ビルドインライブラリの Comparable や Enumrable を考える。これらは xxxable という名前を持っている。品詞は形容詞なのだが、モジュールは形容詞を使うべきだろうか？ いや、そうとも言えない。Ruby の他の[ビルトインモジュール](https://docs.ruby-lang.org/ja/latest/library/_builtin.html)を見たところ、ミックスインするためのモジュールというよりメソッドを束ねる名前空間として使っているものが多かった。そして、名前空間として使うときは名詞/動名詞を使っている事が多い。

もう一つの事例として [Rails](https://github.com/rails/rails) に含まれるモジュール名を眺めてみた。品詞だけで見るなら、統一感はない。


  - 形容詞(xxxable系)のモジュール
    - ActiveSupport::Benchmarkable あまり見つけられなかった。
  - 名詞のモジュール
    - ActiveModel::Callbacks
    - ActiveRecord::Querying
    - ActiveRecord::Sanitization
    - AbstractController::Rendering
    - ActionView::ViewPaths
    - ActionView::RecordIdentifier などなど。
  - 動詞のモジュール
    - ActiveRecord::TouchLater
    - ActiveRecord::DefineCallbacks
    - ActiveRecord::Explain
    - ActiveSupport::Concern
    - AbstractController::UrlFor などなど。

ここから何かの規則性が見いだせるだろうか。自分にはわからなかった。
OverLeafで日本語論文(IPSJ向け)を作成する

# 背景
普段、MacでLaTeXを使って情報処理学会(IPSJ)のスタイルシートを適用して論文を書くことが多いです。
特にMacTeXのGUIツール等は使わず、texファイルは"*emacs*"で編集し、Makeファイルを作ってコンパイルはコマンドラインと言うスタイルを2年ほど続けて来ました。

# 問題。。。
執筆自身は、背景に書いたスタイルで何ら問題は生じていません。
しかし、共著者による添削が非常に面倒。
通常のPDFの他に、latexdiffで差分が分かるようにしたPDFを作成する必要が。。。
さらに、latexdiffでは元のtexファイル内の見栄えの都合で増えた改行なども全て差分になってしまうので、第三者からは分かり難くなる。
しかも、コマンドを含む部分で差分が出ると、エラーが出てコンパイルが通る様に修正する必要が発生することも、しばしば。
PDFを直接編集出来ないため、コメントは別途いただくと言う事になり非常に煩雑。。。

~~しかし、Wordで執筆なんて世界にはもう二度と戻れない体になっている~~

# 解決策
TeXのオンラインエディタで、共同編集も可能なOverLeafを使用する。
OverLeaf https://www.overleaf.com/

# 実施したこと
##### 1. OverLeafのアカウント作成
TopページのRegisterを選択してアカウントを作成します。
メールアドレスとパスワードでも新規で作るか、GoogleアカウントまたはORCIDを利用することもできます。

※ORCIDはよく知らない。。。

##### 2. プロジェクト作成
`New Project`を選択してプロジェクト名を入力。
例えば「sample」
そうすると、sampleというプロジェクトのフォルダとmain.texが作成されます。

##### 3. 日本語対応させる
`Menu`から`Compiler`の設定をデフォルトの`pdfLaTeX`から`LaTeX`に変更します。
`New File`で**latexmkrc**というファイルを作成します。(拡張子無し)
これで、日本語対応完了。

参考:https://doratex.hatenablog.jp/entry/20180503/1525338512

```:latexmkrc
$latex = 'platex';
$bibtex = 'pbibtex';
$dvipdf = 'dvipdfmx %O -o %D %S';
$makeindex = 'mendex -U %O -o %D %S';
$pdf_mode = 3;
```

##### 4.  IPSJのテンプレートをアップロードする
`Upload`を選択してIPSJのTeXテンプレートをアップロードする。
IPSJ TeXテンプレート: https://www.ipsj.or.jp/journal/submit/style.html
今回は、UTF-8版のipsj.cls, ipsjpref.sty, ipsjunsrt.bstを使います。
お試しにjsample.texを追加でUploadします。

※ipsjpref.styは日本語ジャーナル用なので、研究会は、ipsjtech.sty等投稿先にあわせて選択してください。

##### 5.  コンパイルする
`Menu`から`Main document`の設定をデフォルトの`main.tex`から`jsample.tex`に変更します。
`jsample.tex`を選択して画面左半分のエディター部分に内容を表示させます。
エディタにカーソルを移動し、`Ctrl`+`S`で自動でコンパイルされ、画面右半分のPDFプレビュー部分にIPSJテンプレート内のjsample.pdfと同じ内容が表示されれば環境構築完了です。

※`main.tex`は削除して問題有りません。



## その他
### プロジェクトの共有方法
`Share`を選択し
*Anyone with this link can edit this project*
または
*Anyone with this link can view this project*
に表示されるURLを共同編集者に送ることでプロジェクトを編集または参照可能です。

*Share with your collaborators*
でOverleafアカウントを追加して編集するのは有料版のみのハズ。。。(試せよ)

### レビュー(コメント)
編集可能URLで共有すれば、直接texを編集可能ですが、勝手に書き散らすのはお行儀が良くない！！
そこで、`Review`を使うとエディタ部分にコメントのフィールドが出てきて、tex内の任意の箇所を選択してコメントが残せます。

### 有料機能
Dropbox連携，履歴管理等など高機能(私は未使用)

### 注意点
#####私が、Overleafを使って論文執筆をしていてハマったこと。
BiBTeX(参考文献データベース)で同じ文献IDを使用した際にErrorにならない(Warningは出る)
BiBTeXのエラーをうまいこと処理して、Warningは出るもののbibファイル内で先に記載された文献情報を使ってPDFプレビューが出ます。
私は、Warningに気づかず放置して、論文提出後にWarningに気づき平身低頭して差し替えた経験があります。

因みに、MacTeXなんかだとコンパイルエラーになります。
この他にも、bibの記載がローカルのTeX環境だとコンパイルエラーになることがあります。
確か余計なスペースだか改行が入っているとかそんなだった記憶が。。。(<-曖昧)
こちらは、Warningも出ません！！(たぶん)

対応策としては、Warningを放置しないこと、それと投稿用の論文はOverleafからプロジェクトをまるごとDownloadしてローカルのTeX環境でコンパイルしてチェックすることにしています。
IPアドレス等の調査方法メモ

#IP情報調査メモ
IP情報などを調査するために使用しているコマンドやサイト情報のまとめ。


#基本のLinuxコマンド
##whois
`$ whois [domain|IP]`
ドメインの所有者情報(whoisデータベース)の情報を確認出来る
IPで実施するとIPの所有者ISP業者等の情報が見える

##nslookup
`$ nslookup [domain|IP]`
DNS解決を対話的に行える。
ドメインからは、IP情報
IPからは、ドメイン名の逆引きが可能

##ping
`$ ping [domain|IP]`
ドメイン、またはIPに対してパケットを送って応答を確認する
ICMPプロトコルを無効にしていると返答がない
直にパケットを投げるので情報分析とは少し違います

##nmap
ターゲットのIPに対しポートスキャンを行う
攻撃の調査と勘違いされるので、他人のIPに仕掛けちゃダメ
ポートスキャンなので情報分析とは少し違います

#サイト
##証明書情報確認サイト
### digicert Check website security
https://ssltools.digicert.com/checker/views/checkInstallation.jsp

ドメインを入力することで、該当サイトのSSL/TSL証明書の情報を確認出来る
重い

### SECTIGO Store SSL Checker
https://sectigostore.com/ssl-tools/ssl-checker.php

ドメインを入力することで、該当サイトのSSL/TSL証明書の情報を確認出来る

##IP情報サイト
###tcpiputils.com
http://www.tcpiputils.com/

Whois/nslokupなどの情報をまとめて保存してあるサイト
ドメインに対応するIPの履歴なども確認出来る
ドメイン/IPそれぞれ入力した値の所有者情報などが見える
様々なToolがWebアプリで提供されている
APIが公開されているが、無料はない模様
そこそこ軽い

###db-ip.com
https://db-ip.com/
IPのロケーション情報を検索可能なサイト
ドメインを入力した場合、DNS解決してIP情報を引いてくれる(複数IPある場合は、AAAAレコードの先頭が使用される)
APIが公開されており、無料プランも存在する
課金が高いと使用回数だけでなく、取得可能な情報も増える
重い

###IPひろば
http://www.iphiroba.jp/
Whois情報やIPロケーション情報を解析してくれるサイト
日本語なので英語が苦手という人にはありがたい
ドメインを入力した場合、DNS解決してIP情報を引いてくれる(複数IPある場合は、AAAAレコードの先頭が使用される)
whois情報は、ドメイン、IP双方を取得して表示してくれる
重い

###Shodan
https://www.shodan.io/
言わずと知れたShodan
Webに接続されているIPアドレスで検索が可能な検索エンジン
該当するIPで公開されている情報を調査することができる
平たく言うとGlobal IPに対して、ポートスキャンしまくった情報をまとめている
検索した時点でヒットしないIPも後日ちゃんと追加してくれる模様
~~これで調査していると攻撃者にnginxがいかに流行しているかが見てとれる~~
IPAから自身のIPを検索してチェックしてみようと言う呼びかけがあったが、IPを入れると、その後スキャン対象に追加されてしまう可能性があるのので、知識の無い人、定期的に堅牢化のチェックをしない人はやらない方が良いと思う

### Censys
https://censys.io/
Shodanに良く似た情報を提供するサイト
Z査メモ
IP情報などを調査するために使用しているコマンドやサイト情報のまとめ。
ローカルでエラー:Access denied for user ‘root’@’localhost’ (using password: NO)の対処方法 mysqlのrootユーザーのパスワード設定なしで利用可能にする。 

# エラー：Access denied for user ‘root’@’localhost’ (using password: NO)
rails sを利用していたら、上記のエラーが表示されました。

その対処方法を載せます。

## 問題の把握
「　PW（パスワード）がないから、開ねえぞおお　」とお叱りを受けています


## 改善策

- credentials.ymlの環境変数でPWを設定する。個人だけならこれでOKだが、チーム開発などで共有するとチームメンバーごとにローカルPWが違うはずなので、自分以外はエラーが発生する。チームメンバーでPWを共通化する必要があるので、面倒。
- rootのPW設定をなくす。この方法であれば、PWがなくても利用が可能


#### 今回は後者の方法で
rootユーザーのPW設定をなくして簡単にrails sを利用できるようにしていく。

## 操作方法

### MySQLの停止

```
$ mysql.server stop
```

### MySQLにログイン
```:ターミナル
$ mysql -uroot -p
Enter password: #現在のPWを入力
```

### PWを空（’’）に設定する
```
mysql> use mysql
mysql> update user set password='' where User='root'; 
mysql> flush privileges;
```

### MySQLの起動
```
$ mysql.server start
```

### ローカルサーバーの再起動
```:ターミナル
# rubyの場合
$ rails s

#php
$ php artisan serve
```

これで改善します。
clusterlintでk8sのベストプラクティスをチェック

## Clusterlintとは

Digital Ocean製の[Clusterlint](https://github.com/digitalocean/clusterlint)というツールを使ってみたので紹介します。
Kubernetesクラスタのリソースがベストプラクティスに則っているかをチェック出来ます。

例えば、


- 使われていないConfigMap、Secretがあるか
- コンテナイメージのタグがlatestではなく、ちゃんと指定しているか
- ルートユーザーや特権モードが無効化されているか

ベンダに依存しないものから、DOKS（Digital Oceanのマネージドk8s）向けのチェックがあります。
実行時に環境に合わせたチェック項目が選べます。
チェック項目の詳細はこちらのページを参照してください。
https://github.com/digitalocean/clusterlint/blob/master/checks.md

## インストール

```
go get github.com/digitalocean/clusterlint/cmd/clusterlint
```

## 使い方

チェック項目一覧

```
clusterlint list
```

すべての項目をチェック

```
clusterlint run
```

特定の項目のみチェックしたい場合は次のように使います。

```
clusterlint run -c bare-pods
```

チェック項目にはグループ分けされており、まとめてチェックできます。
例えば、基本的な項目をまとめてチェックする場合は次のように使います。

```
clusterlint run -g basic
```

また、チェックするネームスペースを絞り込むことも出来ます。

```
clusterlint run -n my-namespace
```

特定のリソースのみ除外したい場合は次のようなannotaionsを記述します。

```
"metadata": {
  "annotations": {
    "clusterlint.digitalocean.com/disabled-checks" : "bare-pods"
  }
}
```

## 感想

ベストプラクティスに則って環境を作ったつもりでしたが、漏れに気づくことが出来ました。
他のlintツールと同様、自分たちの環境に合わせてチェックする項目を選んだり、除外設定を入れたりしましょう。


## 参考

- [Checking Best Practices With Clusterlint](https://static.sched.com/hosted_files/kccncna19/06/clusterlint-slides.pdf)
5秒でOCR APIを作る

# tl;dr
画像ファイルを選択/撮影すると文字認識結果が表示されます。

<p class="codepen" data-height="480" data-theme-id="default" data-default-tab="result" data-user="04" data-slug-hash="WNbWyoz" style="height: 480px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Drive OCR.gas">
  <span>See the Pen <a href="https://codepen.io/04/pen/WNbWyoz">
  Drive OCR.gas</a> by John Doe (<a href="https://codepen.io/04">@04</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

curlで認識することもできます。画像ファイル(image.png)を指定してください。

```bash
curl -d $(base64 -w0 image.png) -L https://script.google.com/macros/s/AKfycbzR9aMKMZxFR9ulFFuG1U6nFlyIHwswDFllg3iOhqnEA6i10Kl0/exec
```

.JPEG、.PNG、GIF、PDFをサポートしてます。

# つくりかた

### 新しいプロジェクトを作る

https://script.google.com/

### コードを貼り付ける

```javascript:コード.gs
function doPost(e) {
  var blob = Utilities.newBlob(Utilities.base64Decode(e.postData.contents));
  var file = Drive.Files.insert({}, blob, {ocr: true});
  var text = DocumentApp.openById(file.id).getBody().getText();
  return ContentService.createTextOutput(text);
}
```

### Drive APIを有効にする
リソース > Googleの拡張サービス... からDrive APIをONにしてください。プロジェクト名の入力を求められたときは入力してください。
![script.google.com_d_1495tCuZrYdqtZcfDtI7rf9vE_OKkUoftopHvvKFXlLm2pGUwok3Jm2cT_edit_splash=yes (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/29c3271e-c940-77a1-7901-f9d32d07754c.png)

### ウェブアプリケーションとして公開
公開 > ウェブアプリケーションとして導入... から **Who has access to the app** を **Anyone, even anonymous** に変更しDeployを押してください。
許可を確認する必要があれば、許可してください。(詳細から無題のプロジェクト（安全ではないページ）に移動を押してください)
![script.google.com_d_1495tCuZrYdqtZcfDtI7rf9vE_OKkUoftopHvvKFXlLm2pGUwok3Jm2cT_edit_splash=yes (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/f275c449-f23f-099c-b75f-ba2565cd07a2.png)

tl;drのurlを以下の **Current web app URL** に置き換えることで動作します。
![script.google.com_d_1495tCuZrYdqtZcfDtI7rf9vE_OKkUoftopHvvKFXlLm2pGUwok3Jm2cT_edit_splash=yes (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/a0556dbf-a48b-6028-e81c-faa2ee0ea737.png)
【wordpress】権限グループの英語

いつも忘れるのでメモ。

|日本語|英語　　| 
|:-----|:-------------|
| 購読者|subscriber |
|寄稿者|contributor|
| 投稿者|author|
| 編集者|editor|
| 管理者|administrator|

プラグイン「User Role Editor」のAuthorの日本語訳が「登録者」になってるので惑わされる。
バージョンアップで直るのかな。
EKSの構築/設定をeksctl使ってyaml管理する

# TL;DR

[スキーマ定義](https://eksctl.io/usage/schema/) 見ながらyaml書いて下記を実行

```bash
eksctl create cluster -f <yaml file>
```

# 依存ツール

既にインストール済みの場合は無視

**AWS CLI**
[こちら](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-chap-install.html)を参照

**eksctl**
[こちら](https://eksctl.io/introduction/installation/)を参照

# eksctlについて

VPC(Subnet)やNATゲートウェイ、NodeGroup(ASG)等を自動で作り簡単にEKS環境を整えられるツール。
作るだけでなく、クラスター(kubernates)のアップデートやスケーリングの調整等も行えます。

# command vs yaml

eksctlはコマンド引数として設定値を渡す方法と、yamlに記載して渡す方法があります。
コマンド引数の方がお手軽ですが、現在の設定値の管理や更新に支障がでるので出来るだけyamlで管理しましょう。

### command
```bash
eksctl create cluster \
  --name eks-sample \
  --version 1.14 \
  --region ap-northeast-1 \
  --zones ap-northeast-1a,ap-northeast-1c,ap-northeast-1d \
  --nodegroup-name eks-sample-node \
  --node-type m5.large \
  --nodes 3 \
  --nodes-min 3 \
  --nodes-max 4 \
  --alb-ingress-access \
  --asg-access
```

一回きりのその場で実行する場合は簡単に実行できます。
しかし、現在の状態がどのようになっているかも、コンソールからVPCやEKS、EC2の画面を見なければなりません。
また、新たにノードグループを増やしたい場合は別途commandが必要です。

### yaml

```yaml:cluster.yaml
apiVersion: eksctl.io/v1alpha5
kind: ClusterConfig

metadata:
  name: eks-sample
  region: ap-northeast-1

# yamlならコメントも記載できます。
# MultiAZ
availabilityZones: ["ap-northeast-1a", "ap-northeast-1c", "ap-northeast-1d"]

nodeGroups:
  - name: eks-sample-node
    instanceType: m5.large
    # 3AZ保つための最低数
    desiredCapacity: 3
    minSize: 3
    maxSize: 10
    iam:
      withAddonPolicies:
        autoScaler: true
        albIngress: true
```

```bash
eksctl create cluster -f cluster.yaml
```

最初はyaml作成に時間が必要ですが、パラメータのコメントも記載でき、yamlを見るだけでどういう構成が把握できます。
しかし、コンソールから状態変更があった場合はyamlと差分が出るのでどう取り込むかという課題が新たに発生しますが・・・

新たにノードグループを増やしたい場合は既存のyamlに追記するだけです。

```yaml:cluster.yaml
nodeGroups:
  - name: eks-sample-node
    .....

  # プライベートネットワークにノードグループを作成
  - name: eks-sample-private-node
    instanceType: m5.large
    desiredCapacity: 3
    minSize: 3
    maxSize: 10
    privateNetworking: true
```

```bash
eksctl create nodegroup --config-file=cluster.yaml --include='eks-sample-private-node'
```
iOSのショートカットでGoogleカレンダーに予定を新規登録する

# はじめに

いつも予定を忘れてしまうので、Googleカレンダーに予定を登録しておきたい。
ただし、ブラウザやGoogleカレンダーアプリを手動で起動して、予定の新規登録画面を開くのは煩わしいので、できるだけ簡単に登録したい。

# 方法1

最近では、ブラウザのアドレスバーに[cal.new](https://cal.new)と入力すれば、新規登録画面を開くことができます。
そのため、iOSのショートカットアプリで上記のURLを開くだけで、簡単に新規登録画面を開くことはできます。ただし、PC画面が開いてしまい、モバイル端末では入力するのが煩わしいです。

# 方法２

GoogleカレンダーのURLスキームを使って、アプリの新規登録画面を開きます。この方法だと、直接アプリが起動するため、方法１と比べて入力は煩わしくないかと思います。

新規登録画面を開くURLスキームは以下の通りです。タイトルと概要はアプリからも入力できますが、今回はショートカット側から入力させます。

```
com.google.calendar://?action=create&title={タイトル}&description={概要}
```
ref. [All Google App URLs and Callback URLs](https://www.reddit.com/r/shortcuts/comments/9ifjz7/all_google_app_urls_and_callback_urls/)

ここでは、```action=create```で新規登録画面を開き、```title```と```description```のクエリを付与することで、予定のタイトルと概要を登録するiOSのショートカットを作成します。

titleとdescriptionの値は、URLエンコードが必要なので、ショートカット内部でURLエンコードのアクションを追加します。また、これらの値は、ショートカット起動時に```入力を要求```のアクションで入力するのが良いかと思います。

最後に、URLエンコードしたtitleとdescriptionの値をもとにURLスキームのURL文字列を作成し、```URLを開く```アクションを実行すれば完成です。

作成した[ショートカットのリンク](https://www.icloud.com/shortcuts/1fe51dca27164878b2391390dacfadd8)を共有します。

あとは、ウィジェット上やNFCタグからショートカットを起動すると、素早く予定を登録できるようになるのではないでしょうか。


# 参考

* [All Google App URLs and Callback URLs](https://www.reddit.com/r/shortcuts/comments/9ifjz7/all_google_app_urls_and_callback_urls/)
github actionsでDBインテグレーションテストをしよう

# はじめに

こんにちわ、すえけん（[sueken5](https://twitter.com/Sueken51)）です。

この記事ではgithub actionsを使ってDB接続部分のテストをしようと思います。

# 前提条件

今回のケースでは以下のような状況です。

- golangを使っている
- gcp datastoreへのテストがある

datastoreへのテストがあるのでテスト環境にdatastoreのエミュレータを立てる必要があります。

# github actions

github actionsでは自作のアクションを作ることができ、今回はそれを使います。

```
- .github
  - actions
    - mytest
      - action.yaml
      - Dockerfile
      - entrypoint.sh
```

ディレクトリはこのような感じです。

```.github/actions/mytest/action.yaml
name: mytest
author: sueken
description: my test
runs:
  using: 'docker'
  image: 'Dockerfile'
```

action.yamlにはDockerfileを使うこと設定します。色々argsとか設定できますので適宜設定してみましょう。

```.github/actions/mytest/entrypoint.sh
#!/bin/sh
set -e

cd "${GITHUB_WORKSPACE}"/myapp

export CLOUDSDK_CORE_PROJECT=myapp
gcloud beta emulators datastore start --host-port 0.0.0.0:3000 --store-on-disk --data-dir /datastore --consistency 1.0 &
export DATASTORE_EMULATOR_HOST=localhost:3000
go test -v ./...

```

entrypoint.shです。 `chmod +x entrypoint.sh`で実行可能にすることを忘れないでください。
 ここでdatastoreの起動やテストのスタートをさせています。

```.github/actions/mytest/Dockerfile
FROM google/cloud-sdk:277.0.0

ENV GO111MODULE=on
ENV GOROOT=/usr/local/go
ENV GOPATH=/go
ENV PATH=$GOPATH/bin:$GOROOT/bin:$PATH

RUN apt update
RUN apt install -y wget

RUN wget -q https://dl.google.com/go/go1.13.6.linux-amd64.tar.gz
RUN tar -xf go1.13.6.linux-amd64.tar.gz
RUN mv go /usr/local

COPY entrypoint.sh /entrypoint.sh

ENTRYPOINT ["/entrypoint.sh"]
```

dockerfileにはcloudsdkをベースにgolangをインストールしています。

ここまでで自作のアクションを作成できました。次にこのアクションを呼び出すworkflowを見てます。

```.github/workflows/myapp.yaml
name: myapp

on:
  push:
    paths:
      - 'myapp/**'
      - '.github/workflows/myapp.yaml'
      - '.github/actions/mytest/**'


jobs:
  test:
    name: GoTest
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@master
      - name: test
        uses: "./.github/actions/mytest" # <- ここで呼び出し
```

これで自作のアクションを呼び出すことができます。

# まとめ

簡単にデータベースを用意しテストする環境が作れるのはいいなと思いました。
今回はDockerを使いましたが、nodejsを使いcloudsdkをインストールし、host上でテストするやり方があります。

参考になれば幸いです。
【VScode】ショートカットキーの個人的必要最小限まとめ

個人的に覚えときたかったものだけ羅列した備忘録になりますm(_ _)m

#操作系
●進む（戻るの逆）： **command** + **z** + **shift**

●サイドバー表示 & 非表示：　**command** + **B**

●マルチカーソル（複数同時に編集）：　**option** 押しながら普通に　**クリック**

●タブ移動：　**option**　+　**command**　+　**←** (or) **→**

●単語単位で移動：　**option**　+　**←** (or) **→**

●ターミナルの起動：　**control**　+　**shift** + **`** 




#Emmet
●HTMLフォーマット表示(En)：　**!**  　(の後に) 　 **return** 

●行ごとカット（全て選択しなくても）：　**command** + **X** 

● ul　直下に　li を5つ作る：　**ul > li * 5**

●開いてるファイル全て保存：　**option** + **command** + **S**

●Preferences(設定:Setting)表示：　**command**　+　 **,**

●コマンドパレット（ショートカットキー確認も）：　**command** + **shift** + **P**
　

#単語・行関係

●行ごと移動：　**option** 　+　 **↑**  (or)  **↓**

●行ごと複製：　**option**　+　 **↑** (or) **↓**　＋　**shift** （行移動にshift加える）

●行を挿入（カーソルがコード選択中でもずらさず）：　**command**　+　 **return**（＋shift で上に増える）

●行削除：　**command**　+　**shift** + **K**

●マルチカーソル：複数選択（編集できる状態に）：　**option** (押しながら)　**クリック**

●カーソルをもう一個下に増やす：　**command**　+　**option**　+　**↓**

●同じ単語一気に選択（置換でなく見ながら編集できる）：　**command**　+ **shift**　+　**L**




#置換と検索

●置換：　**option**　+ **command**　+　**F**　※右のちっちゃいマークで一部or全部選べる
　***※　Excelのcommand + Hではないので注意***

●開いてるファイル全てで単語検索：　左の🔍マーク(Search)
UnityWebRequestでasync awaitする メモ

UnityWebRequestでIEnumeratorを使いたくないので、いろいろ検索

■参照元
https://gist.github.com/krzys-h/9062552e33dd7bd7fe4a6c12db109a1a

名前空間ではまったのでメモ
UnityEngeineないと下記でコンパイルエラー
(asyncOp.completed += OnRequestCompleted;)


### ■Awaiterクラス作成とGetAwaiterによる拡張
```
using System;
using System.Runtime.CompilerServices;
using UnityEngine;
using UnityEngine.Networking;

public class UnityWebRequestAwaiter : INotifyCompletion
{
    private UnityWebRequestAsyncOperation asyncOp;
    private Action continuation;

    public UnityWebRequestAwaiter(UnityWebRequestAsyncOperation asyncOp)
    {
        this.asyncOp = asyncOp;
        asyncOp.completed += OnRequestCompleted;
    }

    public bool IsCompleted { get { return asyncOp.isDone; } }

    public void GetResult() { }

    public void OnCompleted(Action continuation)
    {
        this.continuation = continuation;
    }

    private void OnRequestCompleted(AsyncOperation obj)
    {
        continuation();
    }
}

public static class ExtensionMethods
{
    public static UnityWebRequestAwaiter GetAwaiter(this UnityWebRequestAsyncOperation asyncOp)
    {
        return new UnityWebRequestAwaiter(asyncOp);
    }
}

```


### ■呼び出し方

```
public async Task abc()
{

    WWWForm form = new WWWForm();
    UnityWebRequest www = UnityWebRequest.Post("URL", form);

    await www.SendWebRequest();

    var response = www.downloadHandler.text;

}

```


```
    public class TestData
    {
        public int aaaa;
        public long bbbb;
        public string cccc;
    }

    public async Task<TestData> Abc()
    {
        TestData ddd = new TestData();


        WWWForm form = new WWWForm();

        // URLはAPIを参照
        UnityWebRequest www = UnityWebRequest.Post("URL", form);

        await www.SendWebRequest();

        var response = www.downloadHandler.text;

       // レスポンスからdddにJsonから変換してデータを入れる。

        return ddd;

    }

```



■検索参考サイト
https://www.slideshare.net/UnityTechnologiesJapan/unite-tokyo-2018asyncawait
https://stackoverflow.com/questions/55489885/post-json-string-to-webapi-from-unity-c-httpclient-or-unitywebrequest
http://light11.hatenadiary.com/entry/2019/03/07/003356
https://qiita.com/mounntainn/items/3f39e0c57412c48508bf
TypeError: Image data of dtype object cannot be converted to float

#エラー
```python
from PIL import *
import numpy as np
import matplotlib.pyplot as plt
filename = "/content/kangaroo/images/00090.jpg"#https://github.com/experiencor/kangaroo/blob/master/images/00090.jpg
with Image.open(filename) as image:
  plt.imshow(image)

#TypeError: Image data of dtype object cannot be converted to float
```

#解決

```
ImageFile.LOAD_TRUNCATED_IMAGES = True
```

ほかの画像はエラーは起きない。原因は何だろう。

#参考
http://snowman-88888.hatenablog.com/entry/2016/03/08/115918
【VBA】UTF-8のファイルを1行ずつ読み取る。

メモとして残します。


#■やり方

```vb
filepath = "D:\import.txt"
With CreateObject("ADODB.Stream")
    .Open
    .Charset = "UTF-8"'BOMあり、BOMなし両対応
    .LineSeparator = -1 '-1=CRLF
    .LoadFromFile filepath
    
    '1行毎に処理
    Do Until .EOS
        TextLine = .ReadText(-2)'1行取り出す
        '処理・・・・
    Loop
    .Close
End With
```

#■さいごに
ADODB.Streamは書き込みの際はBOM無し処理は少しだけ面倒ですが、今回の読み取りの場合BOM有り、BOM無しにかかわらず、これで問題なさそうでしたが、環境にもよりそうなので、一応BOM無しの場合は注意。
MacのGoogle Chromeで、邪魔なデバッグメッセージを消す方法

## わかったから、、、
IntelliJ IDEA等のエディタでブラウザをデバッグしているとき、このようなメッセージがすべてのタブで出現します。
消したらデバッグも止まってしまうという仕様。

<img width="1055" alt="スクリーンショット 2020-01-28 14.17.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/170567/f4ce3f07-6bff-23b3-7495-198799406b46.png">

こいつを消す方法です。

## バージョン78以前
`chrome://flags/#silent-debugger-extension-api`をURLに入力し、Enable Silent Debuggingオプションを有効にする。

## バージョン79以降
最新版は上記のオプションが廃止されているため、ターミナルからコマンドを打つ必要があります。
まず、**Chromeを完全に終了させてください**。

その後、ターミナルで
`$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --silent-debugger-extension-api`
を打ち込むと、Silent DebuggingモードのChromeが立ち上がります。
なお、使用中はターミナルを立ち上げておかないといけません！
Emacs の操作

# Emacs の設定
はじめに普段行っている Emacs の初期設定を紹介します。

```bash
[user@hostname ~]$ mkdir .emacs.d
[ujm@fblog ~]$ vi .emacs.d/init.el
```

vim の挿入モードで以下を貼り付けます。
慣れているため vim を使っていますがテキストエディタはお好みのもので大丈夫です。
vim の使用方法は[vim の操作方法](https://qiita.com/lll_ujm/items/c7ed1c4b43f9470188ea#%E6%8C%BF%E5%85%A5%E3%83%A2%E3%83%BC%E3%83%89%E5%85%A5%E5%8A%9B)を参照してください。

```vim
set-language-environment "Japanese")
(set-default-coding-systems 'utf-8)
(set-terminal-coding-system 'utf-8)
(set-keyboard-coding-system 'utf-8)
(set-buffer-file-coding-system 'utf-8-unix)
(prefer-coding-system 'utf-8-unix)

(setq backup-directory-alist '(("." . "~/.emacs.d/backup")) version-control t)
(put 'upcase-region 'disabled nil)

;;カーソル前の文字を1文字消す
(global-set-key "\C-h" 'delete-backward-char)
```

| キーボード操作 | 機能               |
|----------------+-----------------|
| Ctrl+n         | 下にカーソルを移動 |
| Ctrl+p         | 上にカーソルを移動 |
| Ctrl+b         | 左にカーソルを移動 |
| Ctrl+f         | 右にカーソルを移動 |
| Ctrl+x Ctrl+s | 編集内容を保存           |
| Ctrl+x Ctrl+c | ファイルを閉じる         |
| Ctrl+x Ctrl+s | ファイル内の文字列を検索 |
| Alt+x(M+x)    | コマンドを実行           |
| Shift+Alt+<   | ファイルの一番上に移動   |
| Shift+Alt+>   | ファイルの一番下に移動   |
| Ctrl+Space    | 文字列を選択             |
| Alt+w         | 選択した文字列をコピー   |
| Ctrl+y        | コピーした文字列を貼り付け |
★Microsoft Teamsメモにもならない雑記

#チャネルの投稿内容を取得したい
[chatMessages: デルタ](https://docs.microsoft.com/ja-jp/graph/api/chatmessage-delta?view=graph-rest-beta&tabs=http)

#Incomming Webhookでメンションが飛ばせない問題を解決したい

BotFramework
[@mention via incoming webhook in MS Teams（結局飛ばせないbotからならいけるという
話）](https://stackoverflow.com/questions/48574994/mention-via-incoming-webhook-in-ms-teams/48575997)
[Microsoft Bot Framework](https://dev.botframework.com/)
[APIリファレンス](https://docs.microsoft.com/ja-jp/azure/bot-service/rest-api/bot-framework-rest-connector-api-reference?view=azure-bot-service-4.0)
[MS Teams のbot開発の始め方](https://blog.hrendoh.com/get-started-on-microsoftteams-bot/)
[MS Teams 用 bot を node.js と heroku で作る方法](https://qiita.com/megane42/items/9726ff6a435e1bd90c0c)
[BotFramework-Emulator - Github](https://github.com/microsoft/BotFramework-Emulator)
[エミュレーターを使用したデバッグ](https://docs.microsoft.com/ja-jp/azure/bot-service/bot-service-debug-emulator?view=azure-bot-service-4.0&tabs=csharp)
[BotFramework-Composer](https://github.com/microsoft/BotFramework-Composer)
Python+OpenCVで動画から1秒ずつフレームを切り出す

大学で研究する過程で、一般的に役立ちそうだと思ったことをつらつら書きます。
[こちらの記事](https://note.nkmk.me/python-opencv-video-to-still-image/)を参考にしています。
上記の記事には動画から全フレームを抽出する、$t_1$秒から$t_2$秒間のフレームを抽出するなどの方法が載っておりますが、本記事では1秒ごとに切り出すという方法を紹介しています。

## 目的
「動画の分析してみたいけど、動画そのまま扱うの難しくね？:confounded:」
「じゃあフレームで切り出せば、画像のタスクに帰着できんじゃね？:open_mouth:」
という私の個人的な経験から、動画から1秒ずつフレームを切り出すことが目的です。

## 前提
以下のディレクトリ構成を想定しています。

```

|── sample.ipynb
|
|── video
|    └── video_sample.mp4
|     
└── frame
     └── video_sample
           |── image_0000.jpg
           ︙
           └── image_00030.jpg

```
動画(`video_sample.mp4`)が30秒の場合は、0秒時点, 1秒時点, ..., 30秒時点の31枚の画像が `frame/video_sample`下に保存される想定です。

## 実行環境
- Windows 10
- Python 3.7.5
- OpenCV 4.1.2

OpenCVのインストールは[opencv-python](https://pypi.org/project/opencv-python/)が参考になります。


## 実装

#### 引数の説明
- video_path: フレームを切り抜きたい動画のパス
- frame_dir: フレームの保存先

#### コード
```python:sample.ipynb
import cv2
from os import makedirs
from os.path import splitext, dirname, basename, join

def save_frames(video_path: str, frame_dir: str, 
                name="image", ext="jpg"):
    cap = cv2.VideoCapture(video_path)
    if not cap.isOpened():
        return
    v_name = splitext(basename(video_path))[0]
    if frame_dir[-1:] == "\\" or frame_dir[-1:] == "/":
        frame_dir = dirname(frame_dir)
    frame_dir_ = join(frame_dir, v_name)

    makedirs(frame_dir_, exist_ok=True)
    base_path = join(frame_dir_, name)

    idx = 0
    while cap.isOpened():
        idx += 1
        ret, frame = cap.read()
        if ret:
            if cap.get(cv2.CAP_PROP_POS_FRAMES) == 1:  # 0秒のフレームを保存
                cv2.imwrite("{}_{}.{}".format(base_path, "0000", ext),
                            frame)
            elif idx < cap.get(cv2.CAP_PROP_FPS):
                continue
            else:  # 1秒ずつフレームを保存
                second = int(cap.get(cv2.CAP_PROP_POS_FRAMES)/idx)
                filled_second = str(second).zfill(4)
                cv2.imwrite("{}_{}.{}".format(base_path, filled_second, ext),
                            frame)
                idx = 0
        else:
            break

save_frames(".\\video\\video_sample.mp4", ".\\frame")
```

実行すると、以下のように保存されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261926/ea93a3bd-8d85-d0fd-1ac7-d7934f8ce96e.png)

## 結論
動画の扱いって難しい。
Macのターミナルで複数タブを開いていた際、バグで急にウィンドウ分割されたときの対応

タブで複数サーバー運用等していたときに、急にそれぞれがウィンドウ化して分割されることがたまにある。(他の方もありますか？)
この際、元の状態に戻すためのTipsです。

1. 分割されたウィンドウをアクティブにし、メニューの[ウィンドウ]→[タブを新しいウィンドウに移動　→　
これでバグったウィンドウ状態から通常のウィンドウ状態になります
2. これを全てのウィンドウに対して行う
3. 2が終わったら、[ウィンドウ]→[すべてのウィンドウを統合]を選ぶ

これで元に戻ります。面倒ですが、いちいちサーバーを閉じてやり直すよりはマシだったので。。。
GAE/pyのCloudStorage libraryでのURLエンコード処理

（随分昔に書いたGAE1genのpythonに関するメモですが、下書きに入ってたので投下しておきます。今はGAE 2genが主流なので不要と思います）


GAE/pyからGCSを参照するときに、URLエンコードが必要なファイル名のケースがあり、少しハマったのでメモしておきます。
なお、この問題は自分でREST API等を触る場合は問題なく、単にGAE用のcloudstorage libraryのquote処理が一貫していなかった、というだけの話です。


## AppEngine用CloudStorage Clientライブラリ
AppEngineのドキュメントでは[Google Cloud Storage Client Library]()と呼ばれているライブラリのことを指しています。

名前が一貫していないですが、
`pip install GoogleAppEngineCloudStorageClient`
とできるライブラリのことです。

githubでのリポジトリ名は[appengine-gcs-client](https://github.com/GoogleCloudPlatform/appengine-gcs-client)となっているので、この名称が正しいのかもしれません。
java用とpython用が用意されていそうですが、今回はpython用のライブラリの話です。

機能としては、AppEngineのクレデンシャルを使ってCloudStorageのREST APIにアクセスするインターフェースを、ファイルライクにラップしてあるもの、だと思っています。

## copy2メソッドのsrcだけはURLエンコードしてくれない

今回詰まった点は単純にREST APIの仕様に沿ったリクエストがされていなかっただけですが、
client libraryの実装で、URL quote処理が漏れている部分があったためでした。

ハマったのは、[`copy2(src, dst)`](https://cloud.google.com/appengine/docs/standard/python/googlecloudstorageclient/functions#copy2)メソッドで、これのsrcはURLエンコードしてくれないのに、他のメソッドやdstに渡す文字列はURLエンコードされる、という事象でした。

理由は簡単で、他の引数はほぼpath parameterとして渡されるので`urllib.quote()`処理が書かれているのに対し、
copy2メソッドのsrcはREST APIのheader parameter [`x-goog-copy-source`](https://cloud.google.com/storage/docs/xml-api/reference-headers?hl=ja#xgoogcopy)として渡されるため、`urllib.quote()`処理が書かれていなかったからでした。
DockerfileにおけるEXPOSEとdockerコマンドにおけるpublishオプションの意味

説明されている内容が意味不明なので。

# EXPOSE
EXPOSEはDockerネットワーク内にコンテナでlistenしているポートを公開します。
コンテナ間の通信で使用します。
複数コンテナは別アドレスとして使われるので指定するポートは重複しても問題ありません。

httpでlistenしているコンテナに同一ネットワーク内の他のコンテナからアクセスさせたい例

```dockerfile
EXPOSE 80
```

# publishオプション
ホストにコンテナのポートを紐付けます。
ホストや外部ホストからコンテナにアクセスする際に指定します。
ホストのアドレスでlistenされるため、複数コンテナで重複してポートを指定することはできません。

httpでlistenしているコンテナに同一ネットワーク内の他のコンテナからアクセスさせたい例

```shell
$ docker run -p 80
```
Electron+React(create-react-app)のビルドでつまづいたこと

#はじめに
この記事ではElectron+create-react-appをelectron-builderでパッケージ化した時につまづいたところを紹介する記事。
似たような環境で作成する際は、一度目を通すと良い。

## 2021年
electronでアプリケーションを開発する場合は、[electron-react-boilerplate](https://github.com/electron-react-boilerplate/electron-react-boilerplate)がお勧めです。

##環境 
- Electron(7.1.10)
- react(16.12.0)
- electron-builder(22.2.0)
- fs

#NodeのモジュールをReactから呼び出す。
デスクトップアプリケーションを作成する際、ファイル操作を扱いたいことがよくある。しかし、ReactはWEBのフレームワークでありNodeのモジュールをrequireするとエラーを吐かれる。
そのような場合は、

- `nodeIntegration: true`を設定する。

```js:electron.js
 mainWindow = new BrowserWindow({
        width: 400, 
        height: 600,
        minWidth: 400,
        maxWidth: 400,
        webPreferences: {
            nodeIntegration: true,
        }
    });
```

- Reactでrequireをする。

```js:react
import React from 'react';

const remote = window.require('electron').remote;
const fs = remote.require('fs');
```

electronを通してrequireする際は必ずelectronをrequireし、remoteを使用する。

#パスの設定
ビルド後、パスがずれてしまう問題。
主にwebpackの設定がよろしくない。
例えばReact側で次のように記述した後、ビルドする

```js:react
...
fs.existsSync('../src/scraping/subjects.json');
...
```

しかし、パスが通らない場合がある。

##絶対パスを指定する
requireをする際は絶対パスを設定することで解決することができる。
また、絶対パスの方が個人的に良い気がする。

```js
...
fs.existsSync(__dirname+'/src/scraping/subjects.json');
...
```

また、create-react-app側のwebpackがビルド後`__dirname`のパスを`'/'`と出力する場合がある。
これは、reactをbuildする際に使用するreact-scriptというモジュールのwebpack.config.jsに`__dirname:false`を設定することで解決できる。

```js:node_module/react-scripts/config/webpack.config.js
//一番最後の部分
   node: {
      module: 'empty',
      dgram: 'empty',
      dns: 'mock',
      fs: 'empty',
      http2: 'empty',
      net: 'empty',
      tls: 'empty',
      child_process: 'empty',
      __dirname: false,//<-ココ
      __filename: false,//<-ココ
    }
```

#ビルド後のファイル操作(書き込みが?)できない。
fsモジュールなどを使用する際ファイル操作の書き込みができない場合がある。
ビルド後のディレクトリ構造を見てみると、アプリの本体は`project/dist/mac/Contentes/Resources/app.asar`に置いてある。asarは読み込みだけを許可する仕組みになっていることから、書き込みができないことがある。
electron-builderにビルド設定を記述することができる。

```json:package.json
"build": {
    "asar": false
    }
```
【モダンなフロントエンド開発をサラッと】npmとwebpackを使ってVue.jsを動かしてみる【Hello worldを表示】

# 手順のまとめ

1. npmはインストール済の前提
2. Vue.jsをインストール（`npm install vue`）
3. webpackをインストール（`npm --save-dev install webpack webpack-cli`）
4. webpack.config.jsを作成、編集。（編集内容は下記）
5. src/index.jsにVue.jsの処理を書いていく。
6. dist/index.htmlというhtmlファイルを作成する。（&lt;script&gt;タグでdist/main.jsだけを読み込む。（編集内容は下記））
7. `npx webpack`を実行

ここまでの手順を終えると、dist/index.htmlにアクセスすることで閲覧できます。

# はじめに

npm、webpackを使ってVue.jsをインストールして開発する方法を紹介します。
Vue.jsをモジュールとして読み込み、開発はES2015で行います。
最終的にwebpackでモジュールをバンドルします。
お決まりの、「Hello world」を表示させてみます。

npmについては過去に記事を書いています。
[npmの基礎知識 \- Qiita](https://qiita.com/sfp_waterwalker/items/91c6e8003da999821ecc)

# 手順

## 必要なモジュールをインストール

npmはインストール済の前提です。

### Vue.jsをインストール

```:bash
npm install vue
```

### webpackをインストール

webpackは開発時に使うパッケージなので、--save-devオプションを付けてインストールします。

```:bash
npm install --save-dev webpack webpack-cli
```

## 環境設定

### webpack.config.jsを作成

ここでは下記のように作成します。

- ./src/index.jsにVue.jsの処理を書きます。
- ./src/index.jsを含めてバンドルしたものが、./dist/main.jsに出力されます。
- modeは`development`にしていますが、`production`でも動きます。
- ついでにwatchを`true`にして、`./src/index.js`を修正したらすぐにwebpackが実行されるようにします。
- resolveの設定が重要です。  
これをしておかないとランタイム限定、コンパイラなしのVue.jsを読み込むことになり、**テンプレートの変換が行われません**。

```:webpack.config.js
const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'main.js'
  },
  mode: 'development',
  watch: true,
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.min.js'
    }
  }
}
```

公式ドキュメントにランタイム、コンパイラの説明があります。
[インストール — Vue\.js](https://jp.vuejs.org/v2/guide/installation.html#%E3%81%95%E3%81%BE%E3%81%96%E3%81%BE%E3%81%AA%E3%83%93%E3%83%AB%E3%83%89%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)

## 実際の開発

### JavaScript開発

./src/index.jsでVue開発していきます。
importでvueモジュールを読み込んでいることに注目してください。

```:./src/index.js
import Vue from 'vue'

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  }
})
```

### アクセスするhtmlファイルを作成

./dist/index.htmlを作成します。
最終的にブラウザからアクセスするファイルです。
このファイルからは、バンドルされた./dist/main.jsを読み込みます。

```:./dist/index.html
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue app</title>
  </head>
  <body>
    <div id="app">{{ message }}</div>
    <script src="./main.js"></script>
  </body>
</html>
```

## 最後にwebpackを使ってモジュールをバンドル

下記のコマンドで、バンドルされたjsが生成されます。
今回のwebpack.config.jsの設定の場合、`./dist/main.js`に書き出されます。
アクセスするhtmlファイルからこのmain.jsにアクセスする形です。

```
npx webpack
```

ここまでの作業で、一通りの作業完了です。

# 参考リンク

[Webpackで始めるVue.js](https://log.pocka.io/posts/vue-webpack-tutorial/)

# こんなときにどうするか

## npmの代わりにYarnを使いたい。

「手順のまとめ」のコマンドが若干変わります。

2. Vue.jsをインストール（`yarn add vue`）
3. webpackをインストール（`yarn add --dev webpack webpack-cli`）

## VueXもインストールしたい

「手順のまとめ」のコマンドが若干変わります。

2. Vue.jsとVueXをインストール（`yarn add vue`）

## エントリーポイントと出力先を調整したい

[webpackの基本だけどハマりやすいentryの設定と\[name\] \- Qiita](https://qiita.com/sansaisoba/items/921438a19cbf5a31ec53)


# 余談

webpack.config.js内のresolveプロパティを設定していなかったために、テンプレートへのコンパイルができずにかなりハマりました。
基本情報15週目(１月２７日)

##目標と結果##
•春の試験に向けて午前試験と午後の試験勉強を両立します。
•１日最低でも1時間勉強すること。
•今回解けなかった問題、過去問題集を何度も解く。

##結果##
•今週で最低10時間時間を確保することができた。ストラテジ系の復習、又、平成30年度中心の過去問題集を一通り通すことができた。
##振り返り##
•一通り通したもののストラテジ系での、システム戦略26/60、経営戦略マネジメントでは56/30といった微妙な結果が出た。
__Keep__
暇さえあれば参考書をもう一度見直す。
__Try__
バイトや予定がない日は最低でも2時間以上の時間を確保すること。

__Problem__
ストラテジ系での理解度を深めること。
##次週 and more...##

[14週目 1/20](https://qiita.com/Comitakato0515/items/90bbd6b3380f469747de)
【7秒で】MVCモデルの簡単な説明【わかる】

#MVCモデルとは
「モデル（Model）」「ビュー（View）」「コントローラ（Controller）」のそれぞれの頭文字をとった、
プログラムの中身整理術のひとつ。

## モデル（Model）
データベースの管理
言語：SQL

## ビュー（View）
表示される画面の管理
言語：html、CSS、JavaScript

## コントローラ（Controller）
ModelとViewを連携させるサーバエンドの管理
言語：Java、php、python等

# 参考
MVCモデルとは
https://wa3.i-3-i.info/word11584.html