OmniAICreator/Qiita-1.07M huggingface dataset:
今年も全力で間違えていくアプリ開発 ～シェフの気まぐれクソアプリGCP添え～

まだ、日付回ってないから、 ⊂(^ω^)つｾﾌｾﾌ 

## 挨拶
はじめましての方ははじめまして
ご存知の方はそうだよヒズミさんだよ

注釈：この記事は2割ネタです。
著者は、本気で「謙遜でクソアプリって言ってるんじゃねぇ！！○ソが！」と思っているわけではありません。

なので、ニコニコ笑顔で、🖕中指🖕を立てながら、お楽しみください。（鼻ホジ

## 前置き

今年もこの季節がやってきましたッ！！
才能の無駄遣いの祭典！クソアプリアドベントカレンダー！
馬鹿どもの作品をまっていたあああああああああああああああああ！！！
あああああああああああああ↓↓↓
今年も、自分のアプリがウルトラ恥ずかしいくらいに、神ばかりでございます。
日本の未来は、明るいな。

毎年、毎年、誰に頼まれたわけでもなく、我が物顔でクソアプリをつくっております。

## 今年は違うね？

ええ、シリーズものは3作目でダレるのが世の常です。
毎年、間違っている！というのもみなさん求めていないのでは・・・？と、思いまして。
いわゆる、テコ入れと言うやつですね☆ヤバいですね☆

## こちら、シェフの気まぐれクソアプリGCP添えになります。

ところで、皆さん、slackやteamsはちゃんと返していますか？
我々の業種は、テキストでやり取りですることが多く、素早いコミュニケーションは、お互いの信頼関係を築くのに必要な要素です。
すぐに答えられなくても、リアクションで返すと相手も確認したか否かソワソワする事もないでしょう。
かの物も「この中で返答を忘れて相手から再度聞かれたことがないものだけ、石を投げなさい」と、おっしゃりました。
返事をすることは、人権を得るために必要な事です。
・・・でも、人間だから、返し忘れることなんてことありますよね？
ありますよね？ない？マジで？・・・主もお喜びになられていることでしょう😇

冗談はここまでにして。
返事を忘れないために自動で相手に返信してくれるSlackアプリを作りました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83578/6097d5f3-643a-6563-762d-62e245e9b97e.png)
Google Cloud FunctionsにデプロイしたPythonスクリプトで、SlackのEventAPIが送ってくる投稿を監視して、あなた宛てのリプライが来たら、返答してくれます。
ソースコードはこちら→ https://github.com/EndoHizumi/AutpReply

## 動作の様子

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83578/b3fdebe2-003f-a532-4474-9ced186d0fee.png)
自動で「了解しました！」と元気良く返してくれます！！あなたに代わって！！おなたに代わって！！（大ニなことなので、二回言いました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83578/5a521bd0-0f1b-f898-3ca6-744eadb9c5a3.png)
さらに、２０％の確率でメンションの代わりにOKサインのリアクションで返してくれます。（スタンピングフィニッシュ！

しかも、３秒以内に返してくれるので、相手の心象も上がること間違いなし！！
さぁ、これで、~~煩わしい~~　返信をお任せして、存分にサボってしまおう！
「あぁ・・メトロイドドレッド起動・・・！」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83578/f60b3618-9037-3937-99f7-7534f04b3017.png)


## 開発に際して、参考にしたページ

- https://api.slack.com/methods/reactions.add/test
- https://qiita.com/mytk0u0/items/0704c461b3582819f569
- https://cloud.google.com/functions/docs/writing/http
- https://qiita.com/saitotak/items/822bf2dce7e3baa25ae0#slackbot%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%82%92%E8%BF%BD%E5%8A%A0
- https://api.slack.com/methods/chat.postMessage
- https://zenn.dev/mokomoka/articles/6d281d27aa344e
Boxで脱PPAP！

今日はPPAPの代替手段としてBoxはどう使えるかについて解説したいと思います。

こんなニュースが飛び込んできました！

https://www.mext.go.jp/a_menu/other/mext_01727.html

要は、セキュリティの理由により、今後添付ファイルはやめてBoxでファイル共有するから、Boxへアクセスできるようにしておいてね、ということです。

# PPAP？
PPAPについては、こちらの記事を参考にしてください。

https://businessonline.trendmicro.co.jp/sb/smb/problem_043.asp

# Boxでファイルを受け取るメリット

大きく３つあります。

## ファイルサイズを気にしなくていい
15GB（テナントによって5GB）までアップロード可能です！もう、メールの添付ファイルのサイズ制限を気にする必要がありません。

[Business-Plus以上のお客様のファイルサイズ上限は15GB](https://support.box.com/hc/ja/articles/1500001275701-Business-Plus以上のお客様のファイルサイズ上限は15GB)


## ダウンロードせずにファイル閲覧可能
PCにOfficeソフトが入っていなくても、ブラウザ上で閲覧可能です。
3Dファイルなど特殊なファイルもブラウザ上で閲覧可能です。

[Box-Content-Previewでサポートされるファイル](https://support.box.com/hc/ja/articles/360043695794-Box-Content-Previewでサポートされるファイル)

モバイルアプリでも閲覧可能です。
もう、Boxのプレビューに慣れすぎてて、ダウンロードしないと表示できないシステムを使うとストレスです！ｗ

## 安全に手間なくファイルを受信可能
Zip暗号化されたファイルをダウンロードし、別送されたパスワードで解凍する…そんな煩雑な作業から解放されます。
セキュアなBoxに直接保管されることで、端末へのダウンロードを抑制できます

# Boxでファイルを受け取る手順
## ファイルリクエスト用のフォルダを作成する
1. ファイルを受け取るフォルダを作成します。
自分が編集者以上の権限を持つ場所に作成する必要があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135983/d2d8ed60-7e30-a0bb-ea81-404b526c06f2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135983/ab7c8df8-a382-b3c5-c2c6-3f507b0e512d.png)

2. フォルダの[…]-[ファイルリクエスト]をクリックし、ファイルリクエストを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135983/7328032c-b52f-98f2-93fc-62c2287263a2.png)

## フォームの編集をする【省略可能】

1.ファイルリクエストメニューの[設定]をクリックすると、フォームの編集が可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135983/b7fcf336-4846-9bf4-43e3-9d9b9bdaf98f.png)

2. アップロードする人に、入力してもらう項目を追加します。
アップロードする人をBoxアカウント持っている人に限定したり、フォームの有効期限を設定することも出来ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135983/0ddc4f96-9dad-5102-6505-c06e947cfe82.png)

## ファイルリクエストのURLを相手に知らせる

メールの署名にファイルリクエストのURLをハイパーリンクで挿入すると、添付ファイルの代わりに直接Boxへアップロードしてもらうことができます。
チャットツールで相手にURLを伝えたり、Webサイト上にアップロードフォームを組み込むことも可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135983/bc7d372e-298a-fa73-86d8-b5d80815daaa.png)

## ファイルを受け取ったら自分へ通知する設定をする

ファイルがアップロードされたら、自分へメール通知するよう設定することで、すぐに気づくことが出来ます。
Relayという機能を使うと、アップロードされたファイルに対する処理（コピー・移動、タスク設定など）も設定可能です。
Relay詳細：

https://support.box.com/hc/ja/categories/360003188034-Box-Relay

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135983/0a100e30-55a6-779c-9aea-388c905a49cf.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135983/cc503796-da4c-80df-f473-ebc8bf5f9b9d.png)


# 注意してほしいこと
PPAPの代替ツールとして**だけ**で、Boxを入れることは絶対にしてほしくないです。
社外に共有するためだけに、いつもと違うシステムへログインし、ファイルをアップロードし、共有リンクを発行し、メールへ貼り付け・・・なんてやってたら、PPAPより手間が発生します。
セキュリティ強化のため、の裏で生産性を落としては元も子もないので、一時的な社外共有ファイルだけでなく、それ以外のコンテンツもBoxで保管するのがベストです。
リソース上では姿を表さないアイツのせいでエラーが起きる

# アイツの正体
ゼロ幅スペース

# 何があった
案件の内にリンクを仕込むものがあった
テキストとかURLとかはタイポとかあったり間違えたりしたらいけないように指示書からコピペすることにしている
今回もいつもと同じようにURLをコピー、href属性にペースト

一通りに作業終わって確認環境にデプロイ、テストへ

**「リンククリックしたら404行くんですが…」**

は？指示書からコピペしたからワタシワルクナイ
とりあえずリソース見てみる

**URLに間違いはない**

確認環境でリンクにカーソル置いて遷移先を見てみたら、

**末尾になんかいる**

`https://***.jp%E2%80%8B`

**%E2%80%8B**
お前か、何者だ
コイツの名は…ゼロ幅スペース

# どうしてそうなった
URLを指示書からコピペしたときに一緒についてきたらしい
リソース上では見えない、しかしコピペしたURLの末尾に入力位置合わせてバックスペース

**見えないコイツは消えた**

バックスペースを押しても入力位置が変わらないということは、ゼロ幅スペースが潜んでいたということだった

# どうすればよかった
リソース上では見えなかったので見逃してしまった
恐ろしく早いゼロ幅スペース、私だったから見逃してしまった
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/690270/ba796fde-3a9d-d735-5569-197ca74079c0.png)

ローカルテストの段階でリンクが問題なく遷移できるか確認するべきだった
~~要は私のローカルテストが雑だってことがバレちゃったってワケ！イェイ🤟~~

# アイツの仲間
`&#8203;`
こういうのもいるらしい
コイツはリソース上で見えるらしい

# 最後に
見えないアイツはコピペでしれっとくっついてくる
みんなも雑なローカルテストがバレないように、見えないアイツの気配を嗅ぎ付けられるようにしよう
[SharePoint Online]リスト フォームの項目の並び順の優先順位を検証する

#はじめに
SharePoint Online のリストには、リスト アイテムを入力するリスト フォームがあります。
リスト フォームでは、見た目のカスタマイズや表示する項目の制御を行うことできますが、この中で入力項目の並び順を設定することができます。
しかし、リストフォームに並び順に関する設定箇所は、(後述の通り) 複数存在しています。
この記事では、どの設定が並び順に一番に影響するのかを検証します。

#制限事項
本記事の動作は、2021年12月20日時点の動作です。動作は変更になる可能性があります。
記事の検証結果について、一切の責任を負いません。

#リスト フォームって何？
リスト フォームとは、SharePoint リストに新規のアイテムを入力する時や入力したアイテムを表示する時に表示されるフォームのことです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547452/c5b90abe-23d5-9a8b-5b7b-f6109052892b.png)


#リスト フォームのどこに並び順の設定があるの
以下の 3 つの設定がリスト フォームの並び順に影響します。

###①[リストの設定] の [列の順序] で設定する並び順
リストの設定画面にある [列の順序] の項目から、並び順を設定できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547452/d2fe2d4c-f3d6-b1d7-8bc1-f61e89c46959.png)


###②[フォームの編集]の[列の編集]で設定する並び順
[フォームの編集] から、[列の編集] フォームの列の編集画面から、列名をドラッグ アンド ドロップして並び順を変更できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547452/fba859f7-c1f9-a030-2e16-69d428819f72.png)

こんな感じで変更が可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547452/b23ec8e6-ad02-5a36-8269-1b34f5e123b2.png)


[列の編集] からのリスト フォームの設定や並び順の変更については、[たなさん](https://twitter.com/dreams_panda) のblog 記事でわかりやすく説明されているので、詳細はそちらでご確認ください。

https://tana-techlog.net/?p=107

###③[フォームの編集] の [レイアウトの構成] で設定する並び順
同じく[フォームの編集] から指定が可能な [レイアウトの構成] で JSON を設定し、フォームのレイアウトをカスタマイズでき、項目の表示順も指定できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547452/8a361b93-9aae-ecdd-3d84-c2e2a1e3ffe9.png)

以下のようなセクションを区切った JSON を指定すると項目の順序も指定できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547452/41571822-60db-f042-547a-b76776cf6a2e.png)


リスト フォームの書式設定の詳細については、下記の公開情報を確認してください。

https://docs.microsoft.com/ja-jp/sharepoint/dev/declarative-customization/list-form-configuration

また、リスト フォームのカスタマイズについては、 [てっちゃんさん](https://twitter.com/techan_k) がサンプル含めて素晴らしい記事を公開されているので、ご確認ください。

https://mynote365.hatenadiary.com/entry/2021/09/06/174243

#並び順優先順位 No.1 を確認する
上記の①～③の設定について、どの設定が優先されるかを検証します。
結論から言うと、③>②>① の順に優先されます。

つまり、[レイアウトの構成] で有効な JSON を設定されている場合 (でたらめ内容は NG) は、[レイアウトの構成] で設定した JSON の内容でレイアウトおよび列の並び順が決定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547452/af116ab0-46d9-f5a5-913d-76c9573eb7c1.png)


[レイアウトの構成] で、JSON が設定されていない場合は、[列の編集] 画面が指定して並び順が優先されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547452/4c173f47-a55a-3d67-23d9-b2d811d76a11.png)



[レイアウトの構成] で、JSON が設定されておらず、[列の編集] 画面でも並び順を独自に設定していない場合は、リストの設定の列の順序の設定で並び順が設定されます。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547452/515bac51-c7a4-d30a-0ab2-ec4a489087ce.png)

##補足
モバイルアプリの Lists アプリでは、上記の設定がどのように影響するかも確認してみました。
結果としては、② [フォームの編集]の[列の編集] > ① [リストの設定] の [列の順序]  の順番で順序が優先されました。
③[フォームの編集] の [レイアウトの構成] で設定した JSON の書式は考慮されませんでした。(設定してもレイアウトに影響しませんでした。)

#おわりに
リスト フォームの項目の並び順に影響のある設定が、どのように作用するかをまとめてみました。
設定を変えたつもりが、並び順が変わらないような状況が発生したら、まずは、それぞれの設定を確認してみても良いかもしれません。
Java with WebView

# JavaでWebViewを使ってみる。

簡単にやるには、JavaFXのWebViewを使えばできる。
しかし、cssの当たり方が微妙だったり、IndexedDBがなかったりとして、いまいち使い勝手が悪かった。

ということで、いろいろ検索をした結果Java Chromium Embedded Frameworkを使ってみた。

https://bitbucket.org/chromiumembedded/java-cef/src/master/


gradleあたりで引っ張ってきてってことはできないっぽいので、[BranchesAndBuilding](https://bitbucket.org/chromiumembedded/java-cef/wiki/BranchesAndBuilding.md)を参考に、ライブラリをビルドする。
わりかし簡単にビルドできたものの、なぜかPythonのバージョンが違っていたらしく、一部パッチを当ててビルドする必要があった。

以下を一括置換：

```
base64.encodestring -> base64.encodebytes
base64.encodestring -> base64.decodebytes
```

以下のバッチファイルでサンプルが実行できる。

```
binary_distrib/win64/run.bat
```

サンプルのソースは、以下のファイルとなっている。

```
./java/tests/detailed/MainFrame.java
./java/tests/simple/MainFrame.java
```

ちなみに、simpleは動かなかったので、以下のコードを入れてあげる必要があった。

```
CefMessageRouter msgRouter = CefMessageRouter.create();
client_.addMessageRouter(msgRouter);
```

# 組み込み方

冗長なのがあるかもしれないが、これくらい。

```gradle
dependencies {
    api "binary_distrib/win64/bin/gluegen-rt.jar"
    api "binary_distrib/win64/bin/jogl-all.jar"
    api "binary_distrib/win64/bin/jcef.jar"
}

run {
    systemProperty "java.library.path", "binary_distrib/win64/bin/lib/win64"
}
```
迷路メーカーつくった

## 作ったもの
ルートを描くとその経路が正解になるクソ迷路メーカーを作りました
※PC専用です
https://hiroshiichise.github.io/mazemaker/maze.html

## 迷路の作り方
迷路を解くと「クソ」が表示されるようにします（これがやりたかった）

### ①[s]から[f]までクソと見えるように一筆書きする
![クソ1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317462/abe44459-e016-912d-14d1-6187fdff4943.gif)
横と縦にドラッグすると青色に塗られます

### ②MakeMazeボタンを押す
![クソ2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317462/3fff11ba-e240-d7bc-3391-7531e56d7040.png)

### 以上！迷路化されます

solve釦も設置してあるので、正しいか確認できます
![クソ3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/317462/121da955-e5ed-89b2-6437-46761d963d86.png)

## 技術的なこと
### 迷路の作り方
このくそ迷路を作成するときの条件は下記２つ
1. スタートとゴールを一筆書きでかける
2. 複数の正解経路がない

そのため、穴掘り法で迷路を作成しました

### 正解ルートの検証
幅優先探索を採用しました。探索量自体がそこまで多くない＆迷路なのでゴールに近い≠正解ルートなためです。解ければなんでもいいです。


※迷路保存、迷路解くモードとか実装したかったですが、断念。

## 参考資料
* https://algoful.com/Archive/Algorithm/MazeDig
* https://e-words.jp/w/%E5%B9%85%E5%84%AA%E5%85%88%E6%8E%A2%E7%B4%A2.html!
Drupalで構築 読書を楽しむ人の情報サイト機能設計書

#主なコンテンツ

+読書会情報（読書会グループ情報・読書会イベント情報）
+書籍情報（読書会イベントで紹介・課題本）
+作家情報（読書会イベントで紹介・課題本の作家）
+本屋（古本屋）さん情報
+本を読むのにおすすめのカフェ情報

#主な機能

Drupalのview機能を使った情報のFilteringで、各情報の検索・表示
+読書会グループ情報
+読書会イベント情報
+書籍情報
+作家情報
+本屋（古本屋）情報
+本を読むのにおすすめのカフェ情報

Drupalの権限管理によりの読書会グループの登録機能、イベント登録機能

#Drupal情報

Drupal9

#Contents Type

+User Groups(読書会グループ情報)
 -読書会グループ内容 [テキスト (フォーマット付き, 長文, 概要あり)]
 -Group Website [リンク]
 -Group Experience [リスト（テキスト）]
 -Group Contact [テキスト (プレーン)]
 -Contact Email [メール] 

+Events(読書会イベント情報)
 -イベント内容 [テキスト (フォーマット付き, 長文, 概要あり)]
 -開催日 [日付]
 -画像 [画像]
 -イベント告知URL [リンク] 
 -Event Topics [エンティティ参照]
 -Events Sponsors [エンティティ参照]

+Book(書籍情報)
 -書籍名 [テキスト (プレーン)]
 -ISBN [テキスト (プレーン)]
 -作者情報 [エンティティ参照]

+Author(作家情報)
 -作家名 [テキスト (プレーン)]
 -作家プロフィール [テキスト (フォーマット付き, 長文, 概要あり)]

+Reader(読者情報)
 -ユーザー名 [テキスト (プレーン)]
 -読者概要 [テキスト (フォーマット付き, 長文, 概要あり)]
 -好きなジャンル [エンティティ参照]

+LikeAuthor(好きな作家情報)
 -読者情報 [エンティティ参照]
 -作家情報 [エンティティ参照]
 -登録日 [日付]

+Reading(読書情報) 
 -読者情報 [エンティティ参照]
 -書籍情報 [エンティティ参照]

+Bookstore(本屋（古本屋）情報)
 -本屋名 [テキスト (プレーン)]
 -本屋概要 [テキスト (フォーマット付き, 長文, 概要あり)]
 -本屋分類 [エンティティ参照]
 -本屋都道府県名 [エンティティ参照]
 -本屋市区町村名 [エンティティ参照]
 -本屋住所 [テキスト (プレーン)]
 -本屋URL [リンク]

+BookCafe(読書カフェ情報)
 -カフェ名 [テキスト (プレーン)]
 -カフェ概要 [テキスト (フォーマット付き, 長文, 概要あり)]
 -カフェ都道府県名 [エンティティ参照]
 -カフェ市区町村名 [エンティティ参照]
 -カフェ住所 [テキスト (プレーン)]
 -カフェURL [リンク]

#taxonomy

+Events Sponsors(読書会イベント主催グループ)
+Event Topics(読書会イベント話題)
+bookcategory(書籍分類)
NginxのXXX.confに記載して再起動したけど「413 Request Entity Too Large」のエラーが解消しない

# 目的

- NginxにてファイルをPostした時に発生する「413 Request Entity Too Large」を解決しようとして`/etc/nginx/conf.d/XXX.conf`のファイルをいじって色々やったけどパッと解決できなかったのでまとめる。

# 症状

- 下記の記事の様にNginxのXXX.confファイルをいじってNginxを再起動しても「413 Request Entity Too Large」のエラーが解消しない。
    - [Laravel8 Nginx 「413 Request Entity Too Large」のエラーが出た](https://qiita.com/miriwo/items/5655523f675e2d3020f1)

# やりたいこと

- 細かいことはいいからとにかく「413 Request Entity Too Large」を解消してスッキリしたい。
    - そのためにNginxの全体の設定としてファイルアップロードのサイズ制限を無効にする。（とにかくガバガバ設定で413解消したい）

# 解決方法

- `/etc/nginx/nginx.conf`の`keepalive_timeout  65;`の下の行くらいに下記の内容を記載する。

    ```/etc/nginx/nginx.conf
    lient_max_body_size 0;
    ```

- 下記コマンドを実行してNginxを再起動する。

    ```terminal
    # nginx -s reload
    ```

- 100MBのファイルをPostしたら送る事ができた。

# 原因

- 自分が必死に編集していた`/etc/nginx/conf.d`直下のdefaunt.confが自分が開発しているサービスのドメイン（サーバー）の設定ファイルではなかった。

# まとめ

- nginx.confは起動しているNginx全体の設定であり、「親」の設定になる。`/etc/nginx/conf.d`直下のXXX.confはそれぞれのドメインごとの設定であるらしい。
- だから今回の解決策は起動しているNginxのすべてのドメイン（サーバー）のファイルアップロード上限を無制限に設定しているため非常によろしくない。
    - そもそも無制限にファイルアップロードできる状態があまりセキュリティ上よろしくない（すごい大きいファイルとかアップロードできちゃう）
    - 誰かがこのサーバーで新たに新規ドメイン（サーバー）を追加した場合意図せず「ファイルアップロード上限なし」設定が反映されてしまう。
- なので、明確な理由が合って全体的に設定を変更するためにnginx.confに記載して反映するならいいが「とりあえず動いたから、、、」でnginx.confに記載するのは良くないと思う。

# あとがき

- Docker内でviが使えなかったので下記記事を参考にvimをインストールしてnginx.confを修正した。（`$apt-get update`と`$ apt-get install vim`でvim取得）
    - [Docker内でvi使えなかった時の対処](https://qiita.com/taku1229/items/0b9c922dab7675ac54d7)

# 自分用メモ

- 一回`/etc/nginx/nginx.conf`に`lient_max_body_size 0;`を記載して`# service nginx reload`を実行して設定を行ったあとからは`/etc/nginx/conf.d/default.conf`に`lient_max_body_size 0;`を記載して`/etc/nginx/nginx.conf`の`lient_max_body_size 0;`を削除して`# service nginx reload`しても正常に動くようになった。（なんで`/etc/nginx/conf.d/default.conf`に初っ端記載してNginxリロードしても問題は解決しなかったんだろうか、、）

# 参考文献

- [https://onoredekaiketsu.com/nginx-413-errer/](https://onoredekaiketsu.com/nginx-413-errer/)
- [nginx起動、再起動](https://qiita.com/Kaisyou/items/dadf6fe9ee93fb69e76c)
二元一次不定方程式と鳩ノ巣原理

#はじめに
てきとーに書いてみました
##鳩ノ巣原理とは
$n<m\ \ (n,m\in\mathbb{N})$とするとき,$n$個の巣に$m$羽の鳩が入る時，必ず2匹以上入っている巣が存在する.
という主張である.
考えてみれば当たり前のことですが，とても面白いものです.
##二元一次不定方程式について
### ax+by=cが整数解を持つ条件
$x,y$に関する二元一次不定方程式 $ax+by=c$ が整数解を持つ$\iff c$ は $\mathrm{gcd}(a,b)$ の倍数

これを示す.補題として
$ax+by=1$が整数解を持つ$\iff a $と $b$ は互いに素
これをまず示す.

(証明)
($\implies$)対偶をとると，$(a と b は互いに素)\lnot \implies(ax+by=1が整数解を持つ)\lnot$
ここで$a,b$の公約数を$d\geq2$とするとき$ax+by$は$d\cdot k(x,y)$となるので，$k(x,y)=\frac{1}{d}$となり整数解を持たない.
($\impliedby$)$ax+by=1\iff ax=b(-y)+1$ここで「巣」を$ax$を$b$で割った余りとし，「鳩」を$a\cdot1,a\cdot2,\cdots a\cdot n$とするとき，「巣」と「鳩」の数が等しいので鳩ノ巣原理の主張が使えないと思うが，同じ「巣」に鳩が入らない事を示せば今回の主張が得られる.
同じ「巣」に「鳩」が入ると仮定すると
$i<j$としたとき，$a\cdot i\equiv a\cdot j\ (\mathrm{mod}\ b)\iff i\equiv j\ (\mathrm{mod}\ b)$となり
$i=j$である.よって同じ「巣」に「鳩」が入ることはないので主張が得られた.
$\therefore\ $$ax+by=1$が整数解を持つ$\iff a $と $b$ は互いに素

ここから，
$x,y$に関する二元一次不定方程式 $ax+by=c$ が整数解を持つ$\iff c$ は $\mathrm{gcd}(a,b)$ の倍数
を示す.

(証明)
$(\implies)$$a,b$は$\mathrm{gcd}(a,b)$の倍数なので整数解$m,n$に対して，$am+bn$も$\mathrm{gcd}(a,b)$の倍数である.
即ち，$\mathrm{gcd}(a,b)k(x,y)=c$であるので，$c$は$\mathrm{gcd}(a,b)$の倍数である.
$(\impliedby)$$a=p\cdot \mathrm{gcd}(a,b),b=q\cdot \mathrm{gcd}(a,b)$とする.$\ (\mathrm{gcd}(p,q)=1)$
先ほどの補題から$pm+qn=1$は整数解を持つ.両辺に$\mathrm{gcd}(a,b)$をかけると
$am+bn=\mathrm{gcd}(a,b)$となる.
よって，$cが\mathrm{gcd}(a,b)$の倍数のとき$k$倍$(c=\mathrm{gcd}(a,b)\cdot k)$すれば右辺が$c$になる.
$\therefore\ $$x,y$に関する二元一次不定方程式 $ax+by=c$ が整数解を持つ$\iff c$ は $\mathrm{gcd}(a,b)$

###二元一次不定方程式の解き方
ユークリッドの互除法を使う解き方と合同式を使う解き方で解いてみます.
###問題
二元一次不定方程式$\ 47x+43y=1$を解け.
###ユークリッドの互除法
$47=43\cdot 1+4$
$43=4\cdot 10+3$
$\ 4\ =3\cdot 1+1$
より
$1=4-3\cdot 1$
$1=4-(43-4\cdot10)\cdot1$
$1=(47-43\cdot1)-(43-(47-43\cdot1)\cdot10)$
$1=47\cdot11-43\cdot12$
これを与式から引いて
$47(x-11)+43(y+12)=0$
$-47(x-11)=43(y+12)$
$\mathrm{gcd}(47,43)=1$より$x-11=43k,y+12=-47k$である.
$\therefore\ x=43k+11,y=-47k-12\ (k\in\mathbb{Z})$
###合同式
$43$を法とすると
$47x+43y\equiv1$
であり，また
$47\equiv4$
$47x\equiv 4x$
よって，$4x\equiv1\iff x\equiv\frac{1}{4}\iff x\equiv\frac{44}{4}\ (\because\ \mathrm{gcd}(4,1)=1)$
$\therefore\ x\equiv11$
このことから，$x=43k+11$
与式に代入して$43y=1-47(43k+11)\iff y=-47k-12$
$\therefore\ x=43k+11,y=-47k-12\ (k\in\mathbb{Z})$
##参考文献
・[高校数学の美しい物語](https://manabitimes.jp/math/674)
・[AKITOの特異点-鳩を探せ](https://youtu.be/9TX-KU2nF6A)
#最後に
ここまで，読んでくださってありがとうございます.この記事から得られるものがあれば嬉しく思います.誤植や不明な点がございましたら[Twitter Rime_math](https://twitter.com/rime_math)まで連絡ください.
テキトーに要件定義した給与システムを使ったら給料が2倍になったり0になった話

# はじめに
この記事は[本番環境でやらかしちゃった人 Advent Calendar 2021](https://qiita.com/advent-calendar/2021/yarakashi-production) 21日目の記事になります。
本当は全く違う記事を用意していたのですが、ちょっとコレは世に出すのは危険すぎると判断し、急遽前日の夜に差し替えた記事になります。~~どんだけやらかしネタのストックあるんですかね。~~


# 発端
これは十数年前、私が火消しで急遽参画したプロジェクトの話になります。

当時の上司から、ちょっとの間だけ別案件の応援に行ってくれと頼まれたので快くOKしたはいいけど、いざ現場に入ってみると早速先方の担当者からの山のような数のクレームと、表題のような致命的な不具合の数々。

システムと実際の仕様が全然違うということもあり、プログラムの修正も大概辛かったのですが、並行して誤って投入されたデータの数々を正常化する作業もやらねばならなく、誤支給などがあった各エンドユーザーに電話してめちゃくちゃ怒られながら状況をヒアリングする毎日はめちゃくちゃ辛かったですね……

# 惨劇はなぜおこってしまったのか
本案件で納品した給与システムは特にベンダー案件にありがちな、パッケージ製品をベースにカスタマイズを加えるタイプのものでした。

一般的な給与体系の企業であればカスタマイズ無しにしてもそこまで大きく燃えることはないような気もするのですが、本件の納品先の給与体系は聞くところによると**シフト勤務の種類が20種類以上とか、給与支払日が人によってバラバラな上に月2回ある人もいたり**と、かなり独特であり、カスタマイズ無しには対応できないものでした。

そういう独特な給与体系にも関わらず、要件定義の場には業務を理解している人は同席しなかったため、ほぼパッケージでOKという話のまま進んでしまい、ほぼカスタマイズの入っていないものを納品してしまったことが一番の原因でした。

また、実際に導入の際もほぼ実績のあるパッケージだからということで、テスト運用もまともに行っていなかったということです。まぁちゃんとテスト運用してたら必ず出ていた問題でしょうしね・・・・・・

# 二度と惨劇を起こさないためにどうしたのか
可能であればなのですが、私が上流工程から参画する場合は、要件定義の場にはシステム化する業務をある程度理解している人をそれぞれ同席してもらうようにお願いしています。同席が無理であればアンケートや個別でのヒアリングなどでなるべく声を拾い上げる形にはしています。
これは、要件定義の場に出てくるシステム担当者の方々が必ずしもシステム化する業務部分を把握しているとは限りませんので。

あとはプロトタイピング等でなるべく早い段階でユーザーへ可視化できるようにはしています。
これは単に後になればなるほど作り直すのが面倒というのもあるのですが・・・・・・
paizaの算術・代入演算メニューの演習問題のRubyでの模範解答

Paiza の算術・代入演算メニューの演習問題のRubyでの模範解答です。
簡単なので、いらないような気もしますが、ご参考までに。

STEP: 1 足し算
https://paiza.jp/works/mondai/arithmetic_substitution_op/arithmetic_substitution_op__arithmetic_step1

```ruby:step1.rb
n = 1231 + 5178

puts n
```

STEP: 2 引き算・掛け算
https://paiza.jp/works/mondai/arithmetic_substitution_op/arithmetic_substitution_op__arithmetic_step2

```ruby:step2.rb
a,b = gets.split(' ').map(&:to_i)
d = a - b
p = a * b

puts "#{d} #{p}"
```

STEP: 3 割り算
https://paiza.jp/works/mondai/arithmetic_substitution_op/arithmetic_substitution_op__arithmetic_step3

```ruby:step3.rb
a = 437326
b = 9085
x = a / b
y = a % b

puts "#{x} #{y}"
```

STEP: 4 掛け算 2
https://paiza.jp/works/mondai/arithmetic_substitution_op/arithmetic_substitution_op__arithmetic_step4

```ruby:step4.rb
a,b,c = gets.split(' ').map(&:to_i)
x = a * a
y = b * b + c * c

puts "#{x} #{y}"
```

STEP: 5 累乗
https://paiza.jp/works/mondai/arithmetic_substitution_op/arithmetic_substitution_op__arithmetic_step5

```ruby:step5.rb
a = 202
b = 134
c = 107

n = ((a + b) * c) ** 2

puts n
```

STEP: 6 累乗 2
https://paiza.jp/works/mondai/arithmetic_substitution_op/arithmetic_substitution_op__arithmetic_step6

```ruby:step6.rb
a,b,c,d = gets.split(' ').map(&:to_i)

n = ((a + b) * c) ** 2 % d

puts n
```

STEP: 7 代入演算 1
https://paiza.jp/works/mondai/arithmetic_substitution_op/arithmetic_substitution_op__substitution_step1

```ruby:step7.rb
n = 0
n = n + 3286
n = n * 4736
n = n % 12312

puts n
```

STEP: 8 代入演算 2
https://paiza.jp/works/mondai/arithmetic_substitution_op/arithmetic_substitution_op__substitution_step2

```ruby:step8.rb
n = 0
a,b,c = gets.split(' ').map(&:to_i)
n = n + a
n = n * b
n = n % c

puts n
```

STEP: 9 代入演算 3
https://paiza.jp/works/mondai/arithmetic_substitution_op/arithmetic_substitution_op__substitution_step3

```ruby:step9.rb
n = 10000
n = n / 361
n = n % 28

puts n 
```

STEP:10 代入演算 4
https://paiza.jp/works/mondai/arithmetic_substitution_op/arithmetic_substitution_op__substitution_step4

```ruby:step10.rb
a,b = gets.split(' ').map(&:to_i)
n = 10000
n = n / a 
n = n % b

puts n 
```
プログラミング初心者がモダンなJavascriptフレームワーク触ってみた!!

#初めに
会社の先輩方が、モダンなJavascriptフレームワークについての記事を書いているのを見て
全くのプログラミング初心者の私が、モダンなJavascriptフレームワークを触れるのか、また触れてみた感想や思ったことをまとめていこうと思います。
今回参考にした記事は、以下の3記事です。
３記事ともにフレームワークの特徴、セットアップの流れなどを初心者にわかりやすくまとめてあります。

Nuxt.js :
https://qiita.com/masato5579/items/c6c4a3dad9972a16cddc
Next.js :
https://qiita.com/HiromichiHayashi/items/49b8c58f702a3379d562
svelte.js :
https://qiita.com/Nyuto1995/items/c21e5e0801b41bbfe927

#各フレームワークで作成したアプリ
##実装内容
今回は初心者が簡単にフレームワークをいじれるのかを検証するため、実装内容については超絶簡単なものにしていきます。
参考にした記事をもとにNuxt.js、Next.js、svelte.jsのセットアップを行い、カウンターアプリを作成して、-1以下になると背景色が赤色になるというプログラムを書いていきます。マジで簡単なアプリです。

##各フレームワークでの表示確認
Nuxt.js、Next.js、svelte.jsで下記のように簡単なカウンターアプリを作成しました。
![スクリーンショット 2021-12-12 14.27.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2079147/a6b2b898-16c4-1b2f-9bde-05102b75fdb5.png)
![スクリーンショット 2021-12-20 23.42.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2079147/bd3affb8-7a84-7e25-554b-8df14d6471b9.png)




##各フレームワークのソースコード
###Nuxt.js

```vuejs
<template>
  <div>
    <div v-bind:style="{backgroundColor: count < 0 ? 'red':'white'}">
      {{ count }}
    </div>
    <button @click="incrementCount">+</button>
    <button @click="decrementCount">-</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0, 
    }
  },
  methods: {
    
    incrementCount() {
      this.count++
    },

    decrementCount() {
      this.count--
    },
  }
}
</script>

```

###Next.js

```react
import { useState } from 'react';

const app = () => {
    const [count, setCount] = useState(0)
    const incrementCount = () => {
        setCount(++count)
    }
    const decrementCount = () => {
        setCount(--count)
    }
    return (
        <div style={{backgroundColor: count < 0 ? 'red' : 'white'}}>
            <div>
                <p>{count}</p>
            </div>
            <button onClick={decrementCount}>-</button>
            <button onClick={incrementCount}>+</button>
        </div>
    )
}
export default app
```

###svelte.js

```javascript
<script>
 let count = 0;
 
 function incrementButton () {
	count += 1; 
 }
 function decrementButton () {
	 count -= 1;
 }
　
</script>
<div>
</div>

<main>
	<div style={count < 0 ? "background-color:red;" : ""}>
		{count}
	</div>
 <button on:click={incrementButton}>+</button>
 <button on:click={decrementButton}>-</button>	
</main>

<style>

</style>
```


#プログラミング初心者がモダンなJavascriptフレームワークを触ってみた感想
プログラミング初心者がモダンなJavascriptフレームワークを触ってみた感想としては、どのフレームワークも環境構築が非常に簡単で、初心者としても取っ掛かりやすかったです。
なんですが…実際に実装してみると、いじれることはいじれますがフレームワーク特有のルールを習得する以前に、超絶当たり前なんですが、Vue.js、React.js経験者にかぎり学習コストが低くなり、ありがたみを感じれるのだと感じました。(恩恵を受けられるようにこれからも勉強を頑張っていきたいです。)
【Flutter】TextInputTypeを使ってキーボードを指定する（テキスト・数字・日付など）

# TextInputTypeとは？

これを指定することで任意のキーボードを設定可能

https://api.flutter.dev/flutter/services/TextInputType-class.html

今回はTextFormFieldでのkeyboardTypeを変更することで確認を行う


## none
フォーカスをしてもキーボードが表示されない。

```dart
TextFormField(
   keyboardType: TextInputType.none,
),
```
![Screenshot_1640008711.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/acd57dcd-05b2-ef47-a5b5-65292a2899b8.png)

## name・text・streetAddress・url
キーボードの見た目は同じように見えた。

```dart
TextFormField(
   keyboardType: TextInputType.name,
   // keyboardType: TextInputType.text,
   // keyboardType: TextInputType.streetAddress,
   // keyboardType: TextInputType.url,
),
```
![Screenshot_1640008892.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/dc28f14b-7454-5967-2597-6c88e6133694.png)

## emailAddress
```dart
TextFormField(
   keyboardType: TextInputType.emailAddress,
),
```
![Screenshot_1640009140.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/13522e21-fd44-4def-0a5e-b82973a4478b.png)

## multiline

```dart
TextFormField(
   keyboardType: TextInputType.multiline,
),
```
![Screenshot_1640009221.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/9f59595c-6222-d7ff-df2c-8f0340af43b2.png)

## visiblePassword

```dart
TextFormField(
   keyboardType: TextInputType.visiblePassword,
),
```
![Screenshot_1640009552.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/5fe4a7df-136c-fe08-86ba-68c758496722.png)

## number
```dart
TextFormField(
   keyboardType: TextInputType.number,
),
```
![Screenshot_1640008790.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/8512e8a1-09e0-cb15-a7ae-7250d7d597dc.png)

## datetime
```dart
TextFormField(
   keyboardType: TextInputType.datetime,
),
```
![Screenshot_1640009059.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/e93e312b-d028-31da-ec66-43e5e464db42.png)

## phone

```dart
TextFormField(
   keyboardType: TextInputType.phone,
),
```
![Screenshot_1640009289.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1630025/b0916a7c-b7a8-86b1-b738-17de166d331a.png)
Laravel8 Nginx 「413 Request Entity Too Large」のエラーが出た

# 目的

- Laravel8 nginxのDockerローカル開発環境にて「413 Request Entity Too Large」のエラーがでたため解決策をメモ的に記載する

# 経緯とエラー内容

- Laravel8のとあるアプリをapiサーバーとして利用し、ファイルPostの処理を作成してPostmanから100MBを超えるファイルをPostしたところ下記のエラーがでた。

    ```
    413 Request Entity Too Large
    ```

# 原因

- nginxの設定が良くないっぽい。
- デフォルトでNginxは1MBまでのファイルしかPostする事ができない。
    - [http://nginx.org/en/docs/http/ngx_http_core_module.html#client_max_body_size](http://nginx.org/en/docs/http/ngx_http_core_module.html#client_max_body_size)

        ![Module_ngx_http_core_module.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/01e00327-e262-c5d3-d213-ccfc9ef60edd.png)

- 今表示されているエラーはnginxによるものだがphp.iniにもファイルアップロードの容量制限があった気がするのでそちらもチェックする。


# 解決方法（700MBのファイルアップロードまで許可する場合）

1. nginxの設定変更
    1. Dockerのコンテナ作成時に使用するdefault.confの`server{}`内に下記の一行を記載する。

        ```default.conf
        client_max_body_size 700M;
        ```

1. php.iniの設定変更
    1. 昔同じようなことが会って自分で記事にしてた。
    1. 下記の記事を参考にPHP側のファイルアップロード上限も修正する。
        - [https://qiita.com/miriwo/items/acf349a110d4c4ce16cc](https://qiita.com/miriwo/items/acf349a110d4c4ce16cc)
    1. Dockerのコンテナ作成時に使用するphp.iniファイルの`post_max_size`と`upload_max_filesize`の設定を下記の様に変更する。

        ```php.ini
        ; Maximum size of POST data that PHP will accept.
        ; Its value may be 0 to disable the limit. It is ignored if POST data reading
        ; is disabled through enable_post_data_reading.
        ; http://php.net/post-max-size
        post_max_size = 700M

        ;~~~~~~~~~~~~~~~~~~ 中略 ~~~~~~~~~~~~~~~~~~

        ; Maximum allowed size for uploaded files.
        ; http://php.net/upload-max-filesize
        upload_max_filesize = 700M
        ```

1. コンテナの再構築
    1. 下記コマンドを実行してコンテナを再起動する。

        ```terminal
        $ docker-compose up -d --build
        ```

1. それでも「413 Request Entity Too Large」のエラーが解消しない方は下記を参照いただきたい。
    - [NginxのXXX.confに記載して再起動したけど「413 Request Entity Too Large」のエラーが解消しない](https://qiita.com/miriwo/items/91e7f94f203c5f7207f5)

# 参考文献

- [http://nginx.org/en/docs/http/ngx_http_core_module.html#client_max_body_size](http://nginx.org/en/docs/http/ngx_http_core_module.html#client_max_body_size)
- [https://www.php.net/manual/ja/ini.core.php#ini.post-max-size](https://www.php.net/manual/ja/ini.core.php#ini.post-max-size)
- [https://www.php.net/manual/ja/ini.core.php#ini.upload-max-filesize](https://www.php.net/manual/ja/ini.core.php#ini.upload-max-filesize)
- [https://blog.capilano-fw.com/?p=256](https://blog.capilano-fw.com/?p=256)
APLメモ

#基礎編

##hello, world

https://tryapl.org/

```
   'hello, world'
hello, world
```

##数値

```
   ! 30
2.652528598E32
   | ¯5 5 3j4
5 5 5
   24 60 60 ⊤ 10000
2 46 40
   24 60 60 ⊥ 2 46 40
10000
```

##文字

```
   ⎕a ⍳ 'ABC'
1 2 3
   1 ⊃ 'ABC'
A
   2 ⌷ 'ABC'
B
   'ABC'[3]
C
```

##テーブル

```
   +/ 1 2 3 4
10
   1 2 3 ∘.× 1 2 3 4
1 2 3  4
2 4 6  8
3 6 9 12
   (((⍳ 5) - 3) × 0j1) ∘.+ ((⍳ 7) - 4)
¯3J¯2 ¯2J¯2 ¯1J¯2 0J¯2 1J¯2 2J¯2 3J¯2
¯3J¯1 ¯2J¯1 ¯1J¯1 0J¯1 1J¯1 2J¯1 3J¯1
¯3    ¯2    ¯1    0    1    2    3   
¯3J01 ¯2J01 ¯1J01 0J01 1J01 2J01 3J01
¯3J02 ¯2J02 ¯1J02 0J02 1J02 2J02 3J02
```

##4次元

```
   2 2 2 3 ⍴ ⍳ 100
 1  2  3
 4  5  6
        
 7  8  9
10 11 12
        
        
13 14 15
16 17 18
        
19 20 21
22 23 24
```

#応用編

##定義

https://tio.run/#apl-dyalog

```ex.apl
⍝ comment
∇ res ← hello
	:For i :In ⍳ 3
		⎕ ← i
	:EndFor
	res ← 0
∇
hello
```

```
1
2
3
```

https://help.dyalog.com/18.0/#Language/Defined%20Functions%20and%20Operators/TradFns/Locals%20Lines.htm

#参考

https://github.com/Stosstruppe/asciiart/tree/master/APL

https://aplwiki.com/

https://help.dyalog.com/18.0/
Touch ID や Windows Hello を使用した Salesforce の多要素認証

[Salesforce の多要素認証の必須化](https://help.salesforce.com/s/articleView?id=000356005&type=1)がホットトピックです。MFA の検証方法には、Salesforce Authenticator アプリや、サードパーティの TOTP 認証アプリ、セキュリティキー等が認められていますが、[Winter '22](https://help.salesforce.com/s/articleView?id=release-notes.rn_identity_built_in_authenticator.htm&type=5&release=234) から、Face ID や Touch ID、Windows Hello など、`組み込みの Authenticator` が選択できるようになりました(ベータ)。この方式を用いると、ユーザに新しいデバイスを提供することなく ID 検証を行うことができます。この記事では Touch ID を使用した MFA の設定方法を紹介しますが、Windows Hello を設定している場合は同様の手順で MFA を実装することができます。

## 組織設定
設定 > ID 検証 > `ユーザが Touch ID や Windows Hello などの組み込み Authenticator を使用して ID を検証できるようにする (ベータ)` にチェックを入れて保存します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184624/3c22a046-e527-6f45-76b7-680a31f9db00.png)

## ユーザ設定
1. 個人設定 > 高度なユーザの詳細 > 組み込み Authenticator の関連リストから [追加] をクリックします。![スクリーンショット 2021-12-20 22.42.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184624/4b9c99e7-4582-834e-41b0-9056cc757330.png)

2. [登録] をクリックします。<br><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184624/9c163da3-922f-6c19-3b04-0602ead51ac3.png" width="350">

3. ID 検証後、ブラウザから Touch ID の要求がありますので入力します。<br><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184624/927e335b-bb9c-97d2-ab85-5052dda33447.png" width="500"> 
Windows Hello を使用している場合は同様に PIN などの入力要求があります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184624/8d4d0371-0ca5-ec3e-46c9-af7bbd873878.png" width="380">


4. 名前を設定して完了です。ログイン時の ID 検証画面で 手順 3. と同様の入力で認証できるようになります。<br><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184624/8b227ab5-6ee4-b52e-2183-a03ab37cdace.png" width="350">

## 考慮事項
この方法で Salesforce にアクセスする場合、デバイス単位で `組み込みの Authenticator` を登録する必要があります。つまり、Touch ID (や Windows Hello) を登録したデバイスからでしか Salesforce にログインできません。複数のデバイスから Salesforce にアクセスする場合は Salesforce Authenticator など別の手段を検討してください。

## 参考リンク
* [Salesforce Help -多要素認証の検証方法](https://help.salesforce.com/s/articleView?id=sf.mfa_supported_verification_methods.htm&type=5)
【TryHackMe】Advent of Cyber3 (2021)を続けてみた Day19

# Welcome to Advent of Cyber 2021
クリスマスまでの25日間、毎日基本的な知識を学び、初心者向けの新しいセキュリティ演習を行うことで、サイバーセキュリティを始めることができます。

https://tryhackme.com/room/adventofcyber3

# day19
本日のテーマはブルーチームです。

マシンに接続し、thinderbirdを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217966/5da9ef99-2c89-6b96-66d7-7272e68e368d.png)

メールの情報を見ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217966/c5352b81-8447-05c0-85e2-bfcbd24e4b15.png)

attachment.txtを開きます。base64でデコードされた文字列をエンコードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217966/22c668a2-724d-d34c-8e27-a5109ce40f61.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2217966/86e15374-251e-0dba-bc7b-524037e2db72.png)


# Answer
Who was the email sent to? (Answer is the email address)
<font color="White">elfmcphearson[at]tbfc.com</font>
Phishing emails use similar domains of their targets to increase the likelihood the recipient will be tricked into interacting with the email. Who does it say the email was from? (Answer is the email address)
<font color="White">customerservice[at]t8fc.info</font>
Sometimes phishing emails have a different reply-to email address. If this email was replied to, what email address will receive the email response?
<font color="White">fisher[at]tempmailz.grinch</font>
Less sophisticated phishing emails will have typos. What is the misspelled word?
<font color="White">stright</font>
The email contains a link that will redirect the recipient to a fraudulent website in an effort to collect credentials. What is the link to the credential harvesting website?
<font color="White">http[://]89xgwsnmo5.grinch/out/fishing/</font>
View the email source code. There is an unusual email header. What is the header and its value?
<font color="White">X-GrinchPhish: >;^)</font>
You received other reports of phishing attempts from other colleagues. Some of the other emails contained attachments. Open attachment.txt. What is the name of the attachment?
<font color="White">password-reset-instructions.pdf</font>
What is the flag in the PDF file?
<font color="White">THM{A0C_Thr33_Ph1sh1ng_An4lys!s}</font>
ArchLinuxのインストール手順

# はじめに
- このサークルはとってもArchLinuxが好きな方が多いです。自分もその一人です。
- なので、今回はメモ程度にArchLinuxのインストール手順を紹介したいと思います。

# ArchLinux

## コンソールのキーボードレイアウト
```
# loadkeys jp106
```

## 起動モードの確認
```
# ls /sys/firmware/efi/efivars
```
## インターネットへの接続
```
# ip link
```

`ping google.com`

## システムクロックの更新
```
# timedatectl set-ntp true
```

## パーティション
```
# parted /dev/sda
(parted) mklabel gpt
(parted) mkpart ESP fat32 1MiB 551MiB
(parted) set 1 esp on
parted) mkpart primary ext4 551MiB 20.5GiB
(parted) mkpart primary linux-swap 20.5GiB 36.5GiB
(parted) mkpart primary ext4 36.5GiB 100%
(parted) q
```
`fdisk -l`

## パーティションのフォーマット
```
mkfs.fat -F 32 /dev/sda1
mkfs.ext4 /dev/sda2
mkswap /dev/sda3
mkfs.ext4 /dev/sda4
```

## ファイルシステムのマウント
```
mount /dev/sda2 /mnt
mkdir /mnt/boot
mount /dev/sda1 /mnt/boot
swapon /dev/sda3
mkdir /mnt/home
mount /dev/sda4 /mnt/home
```

## インストール
```
# pacstrap /mnt base linux linux-firmware dhcpcd
```

## システムの設定

## fstabの生成
```
# genfstab -U /mnt >> /mnt/etc/fstab
```

## chroot
```
# arch-chroot /mnt
```

## タイムゾーン
```
# ln -sf /usr/share/zoneinfo/Asia/Tokyo /etc/localtime
# hwclock --systohc
# hwclock
```

## ローカリゼーション
```
vim /etc/locale.gen
# locale-gen
```

## ネットワーク設定
```
vim /etc/hostname
archlinux
```

## Root パスワード
```
# passwd
```



## ブートローダ

```
# parted /dev/sda print
```
```
# pacman -S grub efibootmgr
```
```
# grub-install --target=x86_64-efi --efi-directory=/boot --bootloader-id=grub
```

## マイクロコード
```
pacman -S intel-ucode
# grub-mkconfig -o /boot/grub/grub.cfg
exit
reboot
```


## ユーザ作成
```
# useradd -m -G wheel -s /bin/bash arch
# passwd ko
```
## DHCPの実行
```
# systemctl start dhcpcd
# systemctl enable dhcpcd
```


## sudo
```
pacman -S sudo vi
visudo
%wheel ALL=(ALL) ALL
pacman -S xorg-server
```
WP-PageNaviでのページネーションの作り方（wordpress）



## 1. ページネーションを入れたいところ（archive.phpなど）に以下の記述を入れる

````php:archive.php
<?php if(function_exists('wp_pagenavi')){wp_pagenavi(array('query') => $query));}?>
`````

## ２.  Wordpress管理画面より、プラグインWP-PageNaviを入れる

## ３. 管理画面の設定＞表示設定より管理画面の最大投稿数で表示する投稿の数を決定する

:::note warn
警告
PHPに以下のように書いて直接指定する場合、Wordpress側の最大投稿数と喧嘩して反映されなくなるので、PHP側で指定したい場合、最大投稿数は１にすることに注意してください。
:::

``````php:archive.php
post_perpage => 5
//投稿の表示数指定
```````


## 4. Wordpresspagenav設定から画像のような設定にする 
![pagenav.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2413071/23a3019b-8855-90ab-c7ec-2b6c21ffef4d.jpeg)


## 5.　管理画面からパーマリング設定を、/%categoty%/id=%post_id
にする
※pagenaviでは、2ページ目に行ったとき、パーマリンクが強制的に変わってしまうためお知らせが見れず404エラー表示になってしまうため


## 6. 2ページ目が表示されない時チェック
・サンプルページを消しているか
・投稿＞カテゴリーから名前をnews等任意の名前に変更しているか（URLになるため必須）
・正しいURLの語尾は、「news/page/2」となる
fs には promis 版もあるよ

# 生成した大量のデータをファイルに書き出したい

「POSデータ処理のテストデータ作ってほしいんだよ。性能測るから1年分。ここに日付けいれてあとはフォーマットあってれば中身何でもいいから適当に作って。DBに食わせるためのCSVだから、ファイルは分けても分けなくてもいいよ。」

『はーい。適当に作りまーす。』

----

『さくっとNodeで出すかー。』

『んーっと、500バイトぐらいのデータが1日1000件ぐらい……せめて月単位ぐらいで分けるか……』

```javascript:main.js
const fs = require('fs')

const date = new Date(2017, 0, 1)
const dir = 'hoge'

while(date.getFullYear() < 2018 ){
  const month = date.getMonth()
  while(date.getMonth === month){
    const file = `${dir}/data_${month+1}.csv`
    let lines = []
    for(let l=1; l <= 1000 ; l++) {
      lines.push(csvのデータ1行だけ出すやつ(date))
    }
    fs.writeFileSync(file, lines.map(l=>l.join(',')).join('\n'), ()=>{} )
    date.setDate(date.getDate()+1);
  }
  console.log(`${month+1}月のファイルを出力しました`)
}
```

『ぽちっとな。』

```bash
> node main.js
1月のファイルを出力しました
2月のファイルを出力しました
3月のファイルを出力しました
4月のファイルを出力しました
5月のファイルを出力しました
6月のファイルを出力しました
7月のファイルを出力しました
(めっちゃエラーメッセージ)
JavaScript heap out of memory
```

『しかも作成されたファイル全部中身空っぽやんけ。』
:thinking: 

『あー、はいはい。 `fs.writeFileSync` の処理が終わる前に次のループ処理が走ってるのね。そらメモリぱんぱんになるわ。1行ずつ出力するかー。』

```javascript:main.js
const fs = require('fs')

const date = new Date(2017, 0, 1)
const dir = 'hoge'

while(date.getFullYear() < 2018 ){
  const month = date.getMonth()
  while(date.getMonth === month){
    const file = `${dir}/data_${month+1}.csv`
    for(let l=1; l <= 1000 ; l++) {
      line = csvのデータ1行だけ出すやつ(date)
      fs.appendFileSync(file, line.join(','), ()=>{} )
      fs.appendFileSync(file, '\n', ()=>{} )
    }
    date.setDate(date.getDate()+1);
  }
  console.log(`${month+1}月のファイルを出力しました`)
}
```

『ぽちっとな。』

```bash
> node main.js
1月のファイルを出力しました
2月のファイルを出力しました
3月のファイルを出力しました
4月のファイルを出力しました
5月のファイルを出力しました
6月のファイルを出力しました
7月のファイルを出力しました
(めっちゃエラーメッセージ)
JavaScript heap out of memory
```

:thinking:

同じ結果になるのは当たり前で、つまるところJavascriptは基本的に関数の終了を待たずに次の処理に行ってしまう(語弊あり)から `fs.appendFileSync` のファイルへの書き込みが終わってないのに次々にデータを生成しまくってメモリがやばい。

# fs.promises というのがある

昔だったらコールバックで対応していたんだろうけど今はちゃんと [fs.promises](https://nodejs.org/dist/latest-v10.x/docs/api/fs.html#fs_fs_promises_api) っていうのがあって、プロミスを返してくれる関数群が存在する。

本来なら `for await` 使うかちゃんとpromiseの配列作って `Promise.all()` でも叩くべきなのだが、めんどくさいので `await` 使ってしまった。

```javascript:main.js
const fs = require('fs').promises

const date = new Date(2017, 0, 1)
const dir = 'hoge'

;(async () => {
while(date.getFullYear() < 2018 ){
  const month = date.getMonth()
  while(date.getMonth === month){
    const file = `${dir}/data_${month+1}.csv`
    for(let l=1; l <= 1000 ; l++) {
      line = csvのデータ1行だけ出すやつ(date)
      await fs.appendFile(file, line.join(','))
      await fs.appendFile(file, '\n')
    }
    date.setDate(date.getDate()+1);
  }
  console.log(`${month+1}月のファイルを出力しました`)
}})()
```

めでたしめでたし。
【AWS Shield】Automatic application layer DDoS mitigationのルールを削除しちゃったら

# いきなり結論
2から3営業日ほど経過すると設定項目が「Disabled」となりWAFのルールセットに再度追加できるようになります！

# 「Automatic application layer DDoS mitigation」とは
ざっくり解説

- AWS Shield Advancedの設定項目の一つ
- CloudFrontに対して設定が可能
- AWS WAF（v2）のWeb　ACLに対してルールを追加することで利用可能

https://aws.amazon.com/jp/blogs/news/aws-shield-advanced-update-automatic-application-layer-ddos-mitigation/

# なぜWAFが登場しているか

- Automatic application layer DDoS mitigationはCloudFrontに紐づけている or これから紐づけるWAFのWebACLにルールを追加することで機能を発揮する。
- Automatic application layer DDoS mitigationのWCUは150と少し大きいので注意が必要。
- オプションでルールセットに個々のIPアドレスが短時間に大量の要求を送信するのを防ぐルールを追加することも推奨されている。
- レートベースルールのWCUは2程度

## Automatic application layer DDoS mitigationで作成されるWAFルールについて深掘り
- 前述の通りWCUは150と少し大きめ（マネージドルールにしては小さめ)
- 名前は「**ShieldMitigationRuleGroup_account-id_web-acl-id_**」から始まる
- 優先度はデフォルトで**10,000,000**（変更も可能）

https://docs.aws.amazon.com/ja_jp/waf/latest/developerguide/ddos-advanced-automatic-app-layer-response.html

# なぜ消してしまったのか
WAFはTerraformで管理していました。
Web ACLのルールはruleブロック内で定義しており、AWSが自動的に追加したルールを未定義のままapply流してしまった（上書きして消してしまった）からです。。。

https://registry.terraform.io/providers/hashicorp/aws/latest/docs/resources/wafv2_web_acl

# 消してしまったら
一旦落ち着いて、2から3営業日待って再度構築をしましょう。
月次の電気料金を通知するLINE Botを作ってみた

↓タイトルの通り、通知Botを作ってみました。（本記事ではHelloWorldまでです。）
<img width="300" alt="Screenshot_20211219-201240.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2334064/86c65c56-8c6a-ed07-5846-9510c4eeefb8.png">


# 目次
[1.はじめに](#1. はじめに)
[2.要件整理](#2. 要件整理)
[3.開発手順（設計）](#3. 開発手順（設計）)
[4.開発](#4. 開発)
[5.ここまでの振り返り](#5. ここまでの振り返り)

#1. はじめに

来年以降、同居人と電気料金を折半することになったのですが、
「毎月互いの電気料金を確認・計算するのがめんどくさい」
となり、今回自動化できないかと考えました。


#2. 要件整理

要件は以下の通り。

* <font color="Red">スマホで通知が確認できること</font>
* <font color="Red">月末の決まった日に通知が届くよう、スケジュール機能があること</font>

また言語はPythonとします。
（業務ではJavaしか扱ってこなかったので、たまには別の言語と思い。）


#3. 開発手順（設計）

要件にある「通知」の部分はLINEを利用することにしました。
その結果、以下のような手順となります。

1. LINE通知用のチャンネル作成
2. コーディング→Herokuにデプロイ
3. Herokuでスケジュール設定　←　<font color="Red">本記事では一旦ここまで</font>
4. MoneyForwardのAPI経由で電気料金を取得し、計算結果を返すよう実装

::: note warn
電気料金の取得処理は検討中。MoneyForwardが公開しているAPIで取ってこれるのでは？と思っています。
（無理なら東京ガス or MoneyForwardのマイページからスクレイピング取得？）
:::

#4. 開発

#### 4-1. LINE通知用のチャンネル作成

基本的にLINEの公式ページの通り作業すれば解決するので、詳細は割愛いたします。

* 公式ページ記載の通り、LINE Developersコンソール上でチャンネルを作成。
* Pythonで実装（まずはHelloWorld）

実装についてはLINE公式ページで
「Herokuにデプロイする用のソースはGitHubにあるソースそのまま使えるヨ」
とありましたので、動作確認だけしたい方は楽かもしれません。


#### 4-2. コーディング→Herokuにデプロイ

こちらも基本的にはLINEの公式ページの通りに作業となります。
ソースコードはGitHub上のサンプルを利用していないため、Herokuのプロジェクト作成手順のみ異なりました。
⇒　Herokuに入ってCreateAppってボタン押すだけなので詳細は割愛。

手順は以下の通り。
* Herokuのアカウント作成（既に作っていたので、割愛）
* Heroku上でプロジェクト作成し、LINEチャンネルのトークン設定
* LINE上でWebhook URLの設定
* 動作確認

■詰まったところ

* Herokuにpush時に以下のエラーが発生。←　言語指定しないとだめみたい

```
No default language could be detected for this app.
```

* 「requirements.txt」のファイルが無いため、Pythonのプロジェクトと認識してもらえずデプロイエラー

```
App not compatible with buildpack: https://buildpack-registry.s3.amazonaws.com/buildpacks/heroku/python.tgz
```

* 今度はアプリが起動していないとエラーが発生。「Procfile」も必要とのこと。

```
code=H14 desc="No web processes running" 
```

上記3件については、ググればすぐ解決方法が見つかったため、ここでの説明は省略。 
（Heroku側が参照するファイルとして用意しなければいけないものらしい。）
LINE Developers コンソール上で動作検証を実施し、OKが返却されたので問題無しと判断。
![エビデンス.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2334064/bec7877a-fddc-9c3e-358d-8399a20abc7d.png)


#### 4-3. Herokuでスケジュール設定

Heroku Schedulerを使って定期実行の設定します。

・Heroku Scheduler を追加（無料枠でもクレジットカード登録が必要）
・定期実行し、LINEに通知が届くか確認

結果は冒頭に添付したLINEの画像の通りとなります。
ソースは以下の通りとなりましたが、
「これ、Flaskで書く必要ない」と、スケジュール設定したタイミングで気が付きました。
（それとPOSTで書くことも間違っている感じはあったのですが、突き進んでしまった。）
curlコマンドでスケジュール実行しているのですが、
そのまま関数実行で完結しそうなので、修正要です。
それと、Herokuのスケジュール機能が月次設定できそうになさそう、とここで気が付きました。
![ソース.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2334064/fbdb5d03-9877-b9b7-a974-4a4a9306fd98.png)


#5. ここまでの振り返り

* できたこと
    * LINEMessageAPIの利用方法（設定手順）の理解
    * Python（Flask）の実装方法の理解←　HelloWorldレベルでしたが。
    * Herokuでのプロジェクト作成手順と環境変数、設定ファイル周りの理解
* 課題
    * 事前調査不足（Herokuのスケジュール設定が可能な間隔）
    * 設計誤り（コマンド実行ならFlaskを使う必要が無かった）

* 思ったこと
<font color="Red">「公式ページに記載されているコードを理解する」</font>
これが一番苦手なのですが、時間をかけてでも理解すべきだと思いました。
というのも、不要なコードは何なのかが分からなくなったり、
公式とは違った処理をする際に実装できなかったりするためです。
序盤、理解不足のまま進めてしまい、手戻りも発生してしまいました。

少し話は変わりますが、BootStrapを勉強した際にも同じことを思ったことがあります。
公式ページで配布している大量のjs, cssファイルのうち、どれが自分に必要なのか分からず、
中身を確認することに時間がとてもかかりました。その記憶が今回蘇ってきました。

電気料金取得は別記事でまとめます。


以上
Pythonのインストール

# Pythonを使う前に

　Pythonのサイトからインストール用プログラムをダウンロードしてインストールします。
　他の記事の都合上、インストール手順をここにまとめます。
　対象のOSはWindows10です。
　実施した時期の関係で、Pythonのバージョンは3.10.1となっています。

(2024/05/10 追記) Windows11でのインストールは以下に記載しています。内容はほとんど同じなのですが。

https://qiita.com/cmssai/items/d0f4ebcee38f8180c738

## ダウンロード

　Webブラウザで https://www.python.org/ を開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211906/9223a31b-438a-2531-b5b3-2e4887e1a061.png)

Downloads にマウスオーバーするとプルダウンメニューが表示されその中にダウンロードするボタンがあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211906/8eccee53-5cc9-2d5e-a151-036562ab5e69.png)

　Edgeの場合右上にダウンロードしたファイルが表示されるので、クリックして実行します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211906/09b09389-a4b4-21e6-b06e-6de12a3e9aee.png)

## インストール

インストーラーが起動するので、"Add Python 3.10 to PATH"にチェックを入れ、"Customize installation"をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211906/70ff77fd-1059-3acc-b0c6-5fabcf1d7994.png)

Optional Features はそのままで Next ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211906/38163a1c-8ecc-00f3-4d22-47450376741c.png)

Advanced Options では、Customize install location でインストール先フォルダを浅いところに書き換えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211906/1afa2019-4f60-3f7d-d4f0-afdeba4b51c7.png)

いよいよ Install です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/211906/3cae27bf-d211-9bfe-148f-7e5996a1b96c.png)

最後にCloseボタンをクリックして終わりです。
[Atom] autocomplete-pathsで入力補完した時、相対パスの先頭に"./" が付かないようにする設定

[Atom](https://atom.io/)エディタでHTMLやCSSファイルを編集する際、srcやurlなどのパス名の入力時に文字列の補完ができるようにするため、パッケージ[autocomplete-paths](https://atom.io/packages/autocomplete-paths)をインストールしたのですが、相対パスのファイル名を補完させると下図のように先頭に"./"が付きます。この"./"が付かないようにする設定がわからずハマりました。なんとか解決したのでその詳細です。

![image01_w400.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/a42a71cc-f594-6e04-69a9-d83c985840c0.gif)

**動作環境**
[Atom](https://atom.io/) 1.58.0
[autocomplete-paths](https://atom.io/packages/autocomplete-paths) 2.17.0
macOS Big Sur 11.6.1

## 初期設定
HTMLタグの入力時にパス名の補完を有効にするには、メニュー「Atom - Preferences - Packages」でSettings画面を開き、autocomplete-pathsの「Settings」をクリックして詳細設定を表示します。「Enable Html Support」にチェックを入れて、Atomを再起動。
![settings_before_50p.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/a9283104-3c85-1c90-f18c-45d2f3e62331.png)

READMEによると、相対パスの先頭に"./" が付かないようにするには、`~/.atom/config.cson`ファイルに

```coffeescript:config.cson
includeCurrentDirectory: false
```

と書けばできそうです。config.csonファイルは、メニュー「Atom - Config」で編集できます。

最初、ここに載ってたサンプルをconfig.csonにコピペして試したのですが、補完結果は相変わらず"./"が付いてしまいます。
[Enable for all Atom scopes using ./ everywhere](https://github.com/atom-community/autocomplete-paths/issues/210)

Atomの動作を観察した限りでは、自分が追加した`scopes: [...]`のブロックの設定が全く無視されてるようです。

## 解決方法： scopeを自分で定義し直した
どうやら「Enable Html Support」をONにしていると、config.csonに自分が設定した`scopes: [...]`は取り込まれないようです。
「組み込みの設定値（デフォルト）＋config.csonに設定したものがあれば上書き」という動作を期待したのですが、実際はそうではないようです。結局、組み込みの設定値を全く使わないように、HTMLとCSSに関して自分でscopeを定義し直したら出来ました！以下、その設定方法です。

Settingsで「Enable Html Support」のチェックを外して、「Ignore Builtin Scopes」にチェックを入れます。
![settings_after_50p.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/dbf47c0f-9959-af9d-41e9-b082c1cac52d.png)

HTMLとCSSに関するscopeの定義は、ソースコード[autocomplete-paths.js](https://github.com/atom-community/autocomplete-paths/blob/master/dist/autocomplete-paths.js)の13700行目あたりから始まるscopes配列の記述を参考にしました。

修正したconfig.csonは次のとおりです。なお、CSSとHTMLに対する定義を同じscopeに入れているため、入力補完対象のファイル拡張子のリスト`extensions`や、トリガーとなる属性のリスト`prefixes`はHTML用/CSS用がごちゃ混ぜになってます。その意味では正確なリストではありませんが、実用上困らなければこれでいいかと。

```coffeescript:config.cson
  "autocomplete-paths":
    ignoreBuiltinScopes: true
    scopes: [
      {
        scopes: [
          "source.css"
          "text.html.basic"
        ]
        prefixes: [
          "src=['\"]"
          "href=['\"]"
          "name=['\"]"
          "url\\(['\"]?"
        ]
        extensions: [
          "css"
          "js"
          "png"
          "gif"
          "jpeg"
          "jpg"
          "tiff"
          "html"
          "json"
          "svg"
        ]
        relative: true
        includeCurrentDirectory: false
      }
    ]
```

結果、先頭に"./"が付かないようになりました。

![image02_w400.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/3fe72417-81ac-852a-f272-b2d48f80e19a.gif)

"./" を外すだけなのに、組み込みの設定を全部諦めるのと引き換えになるとは…。
`includeCurrentDirectory`はグローバルな設定ではなく、scopeに結びついているため、scope自体を定義し直さなければならなかったというわけでした。
【Vuetify】画面幅を変更した際にサイドバーが表示されてしまう

## 症状
`Vuetify`で`v-navigation-drawer`を使用している場合、画面幅をPC表示に変更した際にサイドバーが勝手に表示されてしまいます。

【スマホ表示】
<img width="300" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/87f9114b-749c-70f8-a65a-3066f767dbcb.png">


【PC表示】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/aa0f6e29-2e2a-b34e-ab19-87fa31201160.png)

## 原因
PC表示にした場合、`drawer`がtrueになってしまっていました。
`v-navigation-drawer`の仕様で画面幅の変更を検知して`drawer`の状態を変更してしまっているようです。

```
export default {
   data: function(){
      drawer: true //初期状態はfalse
   }
}
```

## 対応
`v-navigation-drawer`に`disable-resize-watcher`を追加することで解決しました！

```
<v-navigation-drawer v-model="drawer" app disable-resize-watcher></v-navigation-drawer>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545959/fe72dfd3-7b1d-5506-14ca-97088d5fedc5.png)