OmniAICreator/Qiita-1.07M huggingface dataset:
旅先でサーバ上のデータベースをメンテナンスする

以前に投稿した記事「旅先でクラウド上のWindowsサーバにRDP接続」は、Androidセルフォンのアプリケーションで、SSHのポートフォワードを介して
WindowsサーバにRDP接続するというものでした。

[旅先でクラウド上のWindowsサーバにRDP接続](https://qiita.com/COOLMAGICPRODU1/items/3f4f42e0be499041cee2)

この記事で紹介した、僕を助けてくれるアプリケーションのうちの1つがこれなんです。

![Screenshot_20220725-211502_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737842/6742c9f7-3a18-d437-2d78-aa8e0d9c8288.png)

これのポートフォワード設定を追加してあげると、セルフォンのアプリケーションから、サーバのデータベースのデータを参照したり更新したりすることができます。
皆さんもご存知のとおり、あたりまえのことなんですけどね。
![029983100bf745182d0640da3a29124262e304560a1a0.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737842/278d5e04-6870-ac88-60ea-e9a8684f619e.jpeg)
## 前提
「旅先でクラウド上のWindowsサーバにRDP接続」と同様に、外部から接続可能なSSHが存在し、SSHが目的のサーバ・アプリケーション（今回はデータベース）にポートフォワードしてくれることが前提です。
## ポートフォワード
ConnectBotのSSHに下図にようなポートフォワードを追加してあげます。この例は、SSHサーバのローカルで稼働するMySQLに接続する設定です。
![Screenshot_20220728-195454_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737842/0e558d15-a825-2657-c82f-a6038709f2f0.png)
RDPは以前に設定したものです。
## データベースのデータを操作するアプリケーション
データベースのデータを操作するのに便利なアプリケーションがあります。僕の好みです。皆さんの評価など受け付けません。
![Screenshot_20220728-200447_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737842/65c84ad3-80ee-7d5a-ec52-f4a4d2093144.png)
MySQLへの接続はこんなふうにしてあげます。
![Screenshot_20220728-200823_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737842/57d26fb8-80fb-7e19-3fbc-59596835c422.png)
デフォルトでSQLiteへの接続が見えますが、ここにSQLiteがいれば、おそらくつながるのでしょう。
![Screenshot_20220728-200849_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737842/752c307c-9056-da3a-033f-ae460905ac8e.png)
MySQLをクリックすると、こんなふうにオブジェクトが見えるようになります。
![Screenshot_20220728-201130_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737842/522916bc-a73a-0366-efd7-7399729d5373.png)
Range オブジェクトに minmax を使って多重代入

例えば、2022年現在のお盆の期間を Range オブジェクトで保持しているようなケースを考える。

```ruby
require 'date'

# 2022年のお盆の期間
THIS_YEAR_OBON_RANGE = (Date.parse('2022-08-13')..Date.parse('2022-08-16'))
```

これを元に、お盆の開始日と終了日をそれぞれ変数に格納しようと思った場合、素直に書くとこうなる。

```ruby
from = THIS_YEAR_OBON_RANGE.first
to = THIS_YEAR_OBON_RANGE.last
```

これを1行で書きたいとき、`minmax` を使うと多重代入で済むので便利だと気づいた。
```ruby
from, to = THIS_YEAR_OBON_RANGE.minmax
```

若干トリッキーではあるので、他に良い書き方があれば知りたい。

なお、この書き換えが通用するのは `min` で始端、`max` で終端が取得できる場合のみであって、一般には等価な書き換えではないことに注意。以下のようなケースでは結果が違ってきたりエラーが発生したりする:

  - Range オブジェクトが終端を含まない範囲である場合（ ``(10...20)`` など）
  - 始端や終端を持たない場合（ ``(10..nil)`` や ``(nil..20)`` など）
  - 始端より終端が大きい場合 （`(20..10)` など）
cscの作法 その261

# 概要
cscの作法、調べてみた。
beepやってみた。

# 参考にしたページ

https://qiita.com/NagaharaHitomi/items/8e830406f51b14a721ab


# サンプルコード

```

using System;
using System.Threading;


public class Hello {
	public static void Main(string[] args) {
		Console.Beep((int) (int) 783.991, 800); // G5 ソ
		Thread.Sleep(60);
		Console.Beep((int) 659.255, 150); // E5 ミ
		Thread.Sleep(80);
		Console.Beep((int) 783.991, 800); // G5 ソ
		Thread.Sleep(60);
		Console.Beep((int) 659.255, 150); // E5 ミ
		Thread.Sleep(80);
		Console.Beep((int) 622.254, 150); // D#5 レ♭
		Thread.Sleep(80);
		Console.Beep((int) 622.254, 200); // D#5 レ♭
		Thread.Sleep(80);
		Console.Beep((int) 880.000, 400); // A5 ラ
		Thread.Sleep(80);
		Console.Beep((int) 783.991, 1000); // G5 ソ
		Thread.Sleep(600);
		Console.Beep((int) 783.991, 800); // G5 ソ
		Thread.Sleep(60);
		Console.Beep((int) 659.255, 150); // E5 ミ
		Thread.Sleep(80);
		Console.Beep((int) 783.991, 800); // G5 ソ
		Thread.Sleep(60);
		Console.Beep((int) 659.255, 150); // E5 ミ
		Thread.Sleep(80);
		Console.Beep((int) 880.000, 200); // A5 ラ
		Thread.Sleep(80);
		Console.Beep((int) 880.000, 200); // A5 ラ
		Thread.Sleep(80);
		Console.Beep((int) 880.000, 400); // A5 ラ
		Thread.Sleep(80);
		Console.Beep((int) 659.255, 1000); // E5 ミ
		Thread.Sleep(600);
		Console.Beep((int) 1046.502, 800); // C6 ド
		Thread.Sleep(60);
		Console.Beep((int) 880.000, 150); // A5 ラ
		Thread.Sleep(80);
		Console.Beep((int) 987.767, 800); // B5 シ
		Thread.Sleep(60);
		Console.Beep((int) 880.000, 150); // A5 ラ
		Thread.Sleep(80);
		Console.Beep((int) 1046.502, 200); // C6 ド
		Thread.Sleep(80);
		Console.Beep((int) 1046.502, 200); // C6 ド
		Thread.Sleep(80);
		Console.Beep((int) 1046.502, 400); // C6 ド
		Thread.Sleep(80);
		Console.Beep((int) 987.767, 1000); // B5 シ
		Thread.Sleep(600);
		Console.Beep((int) 698.456, 200); // F5 ファ
		Thread.Sleep(80);
		Console.Beep((int) 659.255, 200); // E5 ミ
		Thread.Sleep(80);
		Console.Beep((int) 698.456, 200); // F5 ファ
		Thread.Sleep(80);
		Console.Beep((int) 783.991, 200); // G5 ソ
		Thread.Sleep(80);
		Console.Beep((int) 783.991, 200); // G5 ソ
		Thread.Sleep(80);
		Console.Beep((int) 987.767, 200); // B5 シ
		Thread.Sleep(80);
		Console.Beep((int) 783.991, 200); // G5 ソ
		Thread.Sleep(80);
		Console.Beep((int) 1046.502, 1200); // C6 ド
		Console.WriteLine("ok");
	}
}





```


以上。
君、なんだかエクスプローラーと並び違くない？

# はじめに
エクスプローラーでのファイルの並びと、
ロボットで取得できるファイルの順番が違うこと、その解決にスーパー苦戦したので記録に残します。

この記事はUiPathブログ発信チャレンジ2022サマーの29日目の記事です。

## 結論
アクティビティ「PowerShellの呼び出し」を使って取得結果を自然順に並べ替えます。

# こんなことがしたい

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1846796/5c0d1200-24c0-c924-0f70-4b959d98526e.png)

フォルダに格納されているテキストファイルの一覧を取得します。

# UiPathでの実装_ファイル名一覧を取得
さいしょにこんなんを作りました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1846796/cb039886-a733-ab1a-dd25-551133aaf3c5.png)
getfilesして、そのあとフルパスからファイル名だけにしています。

* 代入アクティビティの中身

``String.Join("ファイル名：",Directory.GetFiles(folderpath,"*.txt").Select(Function(filepathary) New FileInfo(filepathary).Name))``

* 実行結果
実行すると、こんな結果が返ってきます。

`` "message": "file.txtファイル名：file1.txtファイル名：file11.txtファイル名：file2.txtファイル名：file3.txt",``
わかりやすく順番をつけると、

1. file
2. file1
3. file11
4. file2
5. file3

となってしまっています。
これをエクスプローラーと同じ並びにしたいので…

# UiPathでの実装_ファイル名一覧を自然順で取得
こんな感じに実装を変えました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1846796/5216e4e6-9f6d-35ec-204e-bc7d1e5ceb04.png)


* PowerShell を呼び出しの中身
``"Get-ChildItem " + folderpath+" | Sort-Object { [regex]::Replace($_.BaseName,"+Chr(34)+"\d+"+Chr(34) + ", { $args[0].Value.PadLeft(20) }) }"``

シングルコーテーションをChr(34)にしているのは、見返したときに混乱するのを防ぐためです。

* プロパティの設定
    * スクリプトの入力→チェックを入れる
    * TypeAugument→System.IO.FileInfo

* 実行結果
これも実行すると、こんな結果が返ってきます。
`` "file.txtファイル名：file1.txtファイル名：file2.txtファイル名：file3.txtファイル名：file11.txt"``

これもわかりやすく順番をつけると、

1. file
2. file1
3. file2
4. file3
5. file11

と、今回は想定通りにファイル名の一覧を取得することができました。

# 備考
PowerShellのコマンドが想定通りに動かない場合、
実際にPowerShellにコマンドを投げて、動きを確認してからアクティビティ内に落とし込むとハマる時間が少ないかと思います（それはそう）

# 参考文献

https://stackoverflow.com/questions/5427506/how-to-sort-by-file-name-the-same-way-windows-explorer-does/5429048?stw=2#5429048

日付見てみたら10年以上前の投稿なんですね…
こういうのに助けられると、自分の記事もいつか誰かを助けられたらいいなと思います。

# おわりに
今回はPowerShell使った実装を行いました。
LINQだけでも実現できそうな気がしてきたので、実装できたらまた記事書きます。

ここまでお読みいただきありがとうございました。
熊本市のCityGMLをFBXに変換しUnityで表示すーる（PLATEAU）

# はじめに
熊本市のCityGMLをFBXに変換しUnityで表示してみます

# 開発環境
- Windows 10
- Unity 2021.3.4f1

# 導入
1．CityGMLをダウンロード

https://www.geospatial.jp/ckan/dataset/plateau-43100-kumamoto-shi-2020

2．CityGMLからFBXに変換するツールをダウンロード

https://github.com/Project-PLATEAU/Data-Conversion-Manual-for-3D-City-Model

3．VSCodeで43100_kumamoto-shi_2020_citygml_3_op/udx/bldgフォルダを開き、URLの更新を行う

http://www.kantei.go.jp/jp/singi/tiiki/toshisaisei/itoshisaisei/iur/uro/1.4
↓
https://www.chisou.go.jp/tiiki/toshisaisei/itoshisaisei/iur/uro/1.5

http://www.kantei.go.jp/jp/singi/tiiki/toshisaisei/itoshisaisei/iur/schemas/uro/1.4/urbanObject.xsd
↓
https://www.chisou.go.jp/tiiki/toshisaisei/itoshisaisei/iur/schemas/uro/1.5/urbanObject.xsd

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/c0c4786c-d2e6-2a06-eb31-670efac21b3c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/f801bd83-b48d-d048-3b99-01069cd572e3.png)

4．FMEをダウンロードし、Data-Conversion-Manual-for-3D-City-Model-main/Sample Workspace/citygml2fbx.fmwtを開く

5．熊本市なのでJGD2011-09_FME → JGD2011-02_FMEに変更する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/c0c70d17-2a20-9856-16ca-13214b5b876d.png)

https://lemulus.me/column/epsg-list-gis#i

6．RUNを押す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/f8b7c40a-999e-9d5c-ddae-471e30b8fa59.png)

7．今回、demは無効にした
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/ae734058-ae43-f832-c8aa-7c4c0bf2636b.png)

8．PLATEAU Viewから建物IDを調べて、VSCodeで検索すればgmlファイルが見つかるのでFBXにしていく

https://plateauview.mlit.go.jp/

下通り・新市街（49301566_bldg_6697_op.gml）
建物ID：43100-bldg-83867

上通り（49301566_bldg_6697_op.gml）
建物ID：43100-bldg-82664

サクラマチクマモト（49301556_bldg_6697_op.gml）
建物ID：43100-bldg-69129

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/922d1a19-ceb9-b1b4-81f5-d7ef1d93abae.png)

9．Unityにインポート

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/4b7f8c81-461d-0c26-fb65-fa02bec88598.png)

お疲れ様でした。

# 追記

https://twitter.com/sotongshi/status/1552746784845594624

https://twitter.com/sotongshi/status/1552747474477289473
2022/7/29主にITとかセキュリティの記事

「一太郎Pro」「ATOK」など法人向けジャストシステム製品の同梱プログラムに脆弱性
https://www.security-next.com/138498

「Apache Hive」にユーザー定義関数を上書きされる脆弱性
https://www.security-next.com/138487

動画配信サービス「Hulu」のアプリに脆弱性
https://www.security-next.com/138502

JVN#81563390
iOS アプリ「Hulu / フールー」におけるサーバ証明書の検証不備の脆弱性(7/27)
https://jvn.jp/jp/JVN81563390/index.html

「サイバーレジリエンス現状分析サービス」を提供開始 - 日立ソ
https://www.security-next.com/138505

Google Chromeのゼロデイ脆弱性が中東のジャーナリストを狙う攻撃に悪用(7/27)
https://news.mynavi.jp/techplus/article/20220727-2408480/

金融業界での「クリプトジャッキング」269％増(7/27)
https://www.coindeskjapan.com/155577/

チェック・ポイント、SIMスワップ詐欺の被害に遭わないための３つのポイントを公開
被害を避けるには、個人情報の取り扱いに注意し、フィッシングの兆候や通信の途絶に要注意(7/27)
https://prtimes.jp/main/html/rd/p/000000125.000021207.html

アライグマ(MaaS)の復活に注意、データ窃取能力を向上させてパワーアップ(7/27)
https://news.mynavi.jp/techplus/article/20220727-2408591/

無知？　怠慢？　脆弱性を突かれた企業がセキュリティパッチを適用できなかった理由――パッチマネジメント自動化はどんな効果があるのか(7/27)
https://atmarkit.itmedia.co.jp/ait/articles/2207/27/news004.html

仮想プライベートネットワーク（VPN）の世界市場規模、成長機会、上位国データ、将来動向、シェアと収益予測 2022年から2031年まで(7/27)
https://newscast.jp/news/3576808

第187回：米国企業におけるランサムウェア対策の現状(7/27)
https://www.risktaisaku.com/articles/-/70806

GKE ユーザーが Kubernetes の新しいサービス アカウント トークンについて知っておかなければならないこと(7/26)
https://cloud.google.com/blog/ja/products/containers-kubernetes/kubernetes-bound-service-account-tokens

デジタル人民元 「現金のような匿名性は持つべきではない」＝中国人民銀行幹部(7/27)
https://jp.cointelegraph.com/news/official-explains-why-china-cbdc-should-not-be-as-anonymous-as-cash

金融庁幹部が考える「ブロックチェーン×金融」が根付くために必要なこと(7/27)
https://diamond.jp/articles/-/306964

【レポート】 NFTガチャ、ステーブルコイン、日本のクリプトは法と税にどう向き合う？　現役弁護士と元金融庁が語るセッション「クリプトに関連する日本の法規制の現状と将来」【IVS】(7/27)
https://gamebiz.jp/news/352762

アルメニア経済特区にビットコインマイニング施設「ECOSデータセンター」誕生(7/27)
https://nextmoney.jp/?p=51919

英国の病院が猛暑の中、IT障害に見舞われる(7/27)
https://cafe-dc.com/security/uk-hospital-experiences-it-outage-during-heat-wave/

IT ベンチャー社員の約半数が「Web3.0」を認知 そのうち約 6 割が「分散型のアプリケーション/サービスの開発」に興味(7/27)
https://www.jiji.com/jc/article?k=000000149.000032396&g=prt

ForN、ブロックチェーン上の取引を解析、 要約、 可視化する「CryptoVision」と提携　アセット管理や損益計算が簡単に(7/27)
https://gamebiz.jp/news/353684

カルビー初、ゲーム上でNFTの限定配布実施へ Astar Networkを活用(7/26)
https://zuuonline.com/archives/240109

Chrome先生のバグに困った件について(7/27)
https://note.com/kinusaya00/n/nce2216bb275c

米消費者保護当局、仮想通貨即時決済と巨大テック金融進出を懸念(7/27)
https://jp.reuters.com/article/usa-consumer-watchdog-idJPKBN2P20BT

地銀システム再編の足音　15グループ乱立　撤退組も
金融庁システム白書「信金より効率悪い」　8割オープン化検討(7/27)
https://www.nikkei.com/article/DGXZQOUB21DW00R20C22A7000000/

警視庁やZHDなど6者、セキュリティー人材育成で連携(7/27)
https://www.nikkei.com/article/DGXZQOUC271MY0X20C22A7000000/

iPhoneは「電源オフ」でも動き続ける(7/28)
https://xtech.nikkei.com/atcl/nxt/mag/nnw/18/041800013/071500055/

Emotet「第3波」が襲来、一段と増した厄介さにどう対処するか(7/28)
https://xtech.nikkei.com/atcl/nxt/column/18/00001/07047/

まさか自分が、しかも2度も！クレカを不正利用された記者が得た教訓(7/28)
https://xtech.nikkei.com/atcl/nxt/column/18/00138/072201091/

直観と「創造的想像力」を駆使　まだ見ぬ理想のシステムを設計(7/28)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/020900021/072000117/

ブランド野菜の「育て方」　CMに頼らず消費者をファン化(7/28)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/040200037/071900068/

大学基幹網「SINET」が6年ぶりに刷新(7/28)
https://xtech.nikkei.com/atcl/nxt/mag/nnw/18/041800012/071500180/
GASを使ってスプレッドシートの値読み込みと表示

スプレッドシートを読み込んで、値を出力する例、メモ書きです。
なんだかんだ、excel,powerpointとはなかなか離れられないものです。
で、会社としてはスプレッドシートを導入してるんですね。
JIRAなりのチケットで自動化はしたいところだけど、スプレッドシートを捨てることはなかなかできないんすよね。
だから、スプレッドシートをあれこれするGASっていうのは自動化する時に知っておいた方が良さそうなので、その事始め。


# google spreasheetの読み込みと値表示
```google apps script
// スプレッドシートの読み込み
function loadSpreadSheet(url) {
  // nullか空文字か判定
  if (!url) {
    return null;
  }

  // spreadIDを取り出し
  var spredId = url.replaceAll("https://docs.google.com/spreadsheets/d/", '');
  Logger.log("id : " + spredId);

  // IDからスプレッドシートを開く
  return SpreadsheetApp.openById(spredId);
}

function main() {
  var spreadsheet = loadSpreadSheet('https://docs.google.com/spreadsheets/d/あなたのシートのID')
  if (null) {
    return
  }

  // シート1の名称と、スプレッドシートのシートを読み込み
  var sheet = spreadsheet.getSheetByName('シート1');
  var range = sheet.getRange("B2");//セルB2を取得
  Logger.log("B2:" + range.getValue());
}
```
【Ruby on Rails】Rails consoleで特定のレコードのカラムの情報を更新する方法

 ## Rails console
```
pry(main)> User.first.update_column(:name, "ごりら")
```
これは、Userテーブルの一番目のテーブルのnameカラムの内容を``ごりら``に変更したいとき

## SQL文
```
SELECT `users`.* FROM `users` ORDER BY `users`.`id` ASC LIMIT 1
UPDATE `users` SET `users`.`name` = 'ごりら' WHERE `users`.`id` = 1
```

こんな感じ。
[Swift][Xcode]TextFieldの入力で表示したキーボードを閉じる方法

TextFieldをタップして表示させるキーボードが閉じないせいでその下の項目が永遠に見えない！
という現象の解決策です
****
### TextField以外をタッチしたときにキーボードを閉じる
下記コード

```Swift
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        self.view.endEditing(true)
    }
```
***
### キーボードのReturnボタン押下で閉じる
下記コード
```Swift
extension MainViewController: UITextFieldDelegate {
    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        textField.resignFirstResponder()
        return true
    }
}
```
delegateを対象のTextFieldに設定する
```Swift
    @IBOutlet weak var inputTextField: UITextField!

    override func viewDidLoad() {
        inputTextField.delegate = self
        super.viewDidLoad()
    }

```
***
### 全体コード
全体で見るとこんな感じです
```Swift
import UIKit

class MainViewController: UIViewController {
    
    @IBOutlet weak var inputTextField: UITextField!

    override func viewDidLoad() {
        // delegate設定
        inputTextField.delegate = self
        super.viewDidLoad()
    }
    
    //textField以外の部分のタッチ時にキーボード閉じる
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        self.view.endEditing(true)
    }
}

extension MainViewController: UITextFieldDelegate {
    //returnボタンを押したタイミングで起動
    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        textField.resignFirstResponder()
        return true
    }
}
```

### おまけ（OutletCollectionsの場合のdelegate設定方法）
↓にまとめたのでご参照ください。
https://qiita.com/timustan/items/ba93280f9cf347f383d0


***
参考：https://yamamtoblog.com/textfield-keyboard-close/
[Swift][Xcode]OutletCollectionsの場合のdelegate設定方法

### Error
複数パーツをOutletCollectionsで定義する時がありますが、その場合にいつも通りdelegate設定しようとするとエラーが出ます
```Swift
    @IBOutlet var inputTextFields: [UITextField]!

    override func viewDidLoad() {
        inputTextFields.delegate = self
        super.viewDidLoad()    
    }

```

**エラー**
>Value of type '[UITextField]' has no member 'delegate'
***
### 解決策
繰り返し処理のforEachで記述してあげる
```Swift
    @IBOutlet var inputDataTextFields: [UITextField]!

    override func viewDidLoad() {
        inputTextFields.forEach({ $0.delegate = self })
        super.viewDidLoad()    
    }

```
***
参考：https://stackoverflow.com/questions/58428176/should-i-use-outletcollections-for-setting-delegate-property-of-multiple-textfie
【CSS Tips】Flexboxの子要素が縮む・スクロールが効かない問題をflex-shrinkで解決する

## 結論

親要素に`display: flex`を指定してはみ出し部分をスクロールさせたいのに`overflow: scroll;`が効かない時や、子要素が縮んでしまった時の解決方法です。

:bulb: **解決方法**：縮んでほしくない要素に`flex-shrink: 0;`を指定する

## 解説

`display: flex`は要素を横並びにしたい時にとても便利なプロパティです。
親要素にこのプロパティを指定すると、子要素が横並びになります。

この`flexbox`を使うと、親要素のサイズに対して子要素のサイズが大きくて入りきらない時に、子要素が縮んでしまうことがあります。

例えばこんな感じです。🔽

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="BarmQBo" data-user="kabechiyo" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo/pen/BarmQBo">
  Untitled</a> by kabechiyo_shunkaaizawa (<a href="https://codepen.io/kabechiyo">@kabechiyo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

1つ目のタブリストは、はみ出した部分がスクロールするように`overflow-x: scroll;`の指定をしていますが、効かずに中身が潰れてしまっています。
2つ目のアイコンとテキストが横並びになったUIは、アイコン部分に`width: 40px; height: 40px;`を指定しているのですが、横方向が潰れてしまっています。

**こんな時は、潰れてほしくない子要素に`flex-shrink: 0;`を指定すると、要素が潰れなくなります！**

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="YzaEprz" data-user="kabechiyo" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/kabechiyo/pen/YzaEprz">
  Untitled</a> by kabechiyo_shunkaaizawa (<a href="https://codepen.io/kabechiyo">@kabechiyo</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

`flex-shrink`とは、フレックスアイテムの縮小係数を指定するプロパティで、デフォルトは`1`になっています。
詳しくは[flex-shrink - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/flex-shrink)をご覧ください！


## Ref

[フレックスボックスの基本概念 - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)
[flex-shrink - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/flex-shrink)
WSL2でLaravel sail環境を構築した際にパーミッションエラーが発生した際の対処法

# はじめに
[プロフェッショナルWebプログラミング　Laravel](https://www.amazon.co.jp/dp/B09WMN18TR/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1 "プロフェッショナルWebプログラミング　Laravel")
上記を参考にUbuntu 20.04.4 LTS（WSL2）でLaravel sail環境を構築。
「sail test」でテストを実行しようとした際にFeatureテストでパーミッションエラーが発生していた。


# 環境
Laravel Framework 9.21.6

Ubuntu 20.04.4 LTS(WSL2)


# パーミッション変更

###### rootでコンテナにログイン
```
$ sail root-shell
```

###### /varディレクトリ以下全てのファイル、ディレクトリのパーミッションを変更
```
$ chmod -R 777 /var/
```

###### sail testが成功するか確認
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307233/080a5520-8642-44a0-1bf9-fd01d901f12a.png)

今後同じようにパーミッションエラーが発生した場合、rootでログインしてからchmodコマンドで変更する。
（sail shellでログインするとsailユーザーになりパーミッション変更の権限がないため）
Livebookをインストール、起動する

## Livebook is 何？

公式サイトから引用すると、このようなツールのようです。
> Write interactive & collaborative code notebooks in Elixir

Elixir版Jupyter Notebookと言われることも多いです。

## Livebookの始め方

下記はLivebookの公開リポジトリです。

https://github.com/livebook-dev/livebook

Livebookの始め方は複数あります。

* Cloudで動かす
    * PaaSのFly.io上でLiveBook VMをローンチできます。
    * https://fly.io/launch/livebook
* デスクトップアプリで動かす
    * LiveBookの公式サイトから実行ファイルをDLできます。（Mac/Windows）
    * https://livebook.dev/
* Dockerで動かす
* 直接ローカルに環境を作る
    * Escriptでインストール
    * Mixコマンドでインストール

本記事では公開リポジトリをgit cloneし、Mixコマンドでローカル環境にインストール、実行します。

## インストール、実行

git cloneし、関連パッケージをインストールします。

```
git clone https://github.com/livebook-dev/livebook.git
cd livebook
mix deps.get --only prod
```

livebookを実行します。

```
# Run the Livebook server
$ MIX_ENV=prod mix phx.server
[Livebook] Application running at http://localhost:8080/?token=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
```

http://localhost:8080/?token=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx にブラウザでアクセスします。

やった起動できました！

![スクリーンショット 2022-07-29 0.20.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/a0dd2a63-a75c-6eff-1ebd-2d091aa00a1f.png)

## 雰囲気で触ってみる

ページ上部にある「New nodebook」をクリックします。

![スクリーンショット 2022-07-29 0.31.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/16c18f53-e0b9-dec2-386c-b59fe9666e48.png)

新しいLivebookが作成されました。

![スクリーンショット 2022-07-29 0.31.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/fd816d10-3e93-bfb8-6d5f-5c891754254b.png)

コードを記述する部分と書いたコードを実行するボタンが分かれば大丈夫です。たぶん。

![スクリーンショット 2022-07-29 0.37.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/81d85d27-4056-0771-004a-c603a9f830a7.png)

IO.putsの計算結果が表示されました。ハッピネス！

![スクリーンショット 2022-07-29 0.42.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109744/08df88c5-6b95-069e-bcb2-5c04e9de3c0b.png)

## もっと色々試してみよう

「livebook elixir」で調べると、たくさんの素敵な記事が表示されます。
ぜひ読んでみて、お手元で動かしてみましょう:relaxed:

https://qiita.com/torifukukaiou/items/223ad0fe1aa67a9fb151

https://qiita.com/the_haigo/items/f0d0d49bb6834921e88f#04-07-%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E5%8F%AF%E8%A6%96%E5%8C%96

https://qiita.com/piacerex/items/0f6115fd2691586b2598#%E6%9C%80%E7%B5%82%E7%9A%84%E3%81%AA%E3%82%B3%E3%83%BC%E3%83%89
DjangoでHerokuにデプロイするも500エラーでエラー内容が分からない

# やっていたこと
Linebotを作っていた。
Herokuにデプロイしたのに
```
heroku logs --tail
```
でログを確認しても、

```
2022-07-28T15:05:10.293176+00:00 app[web.1]: 10.1.22.37 - - [28/Jul/2022:15:05:10 +0000] "POST /callback/ HTTP/1.1" 500 0 "-" "-"

2022-07-28T15:05:10.292759+00:00 heroku[router]: at=info method=POST path="/callback/" host=hogehoge.herokuapp.com request_id=xxx3eb fwd="111.11.111.111" dyno=web.1 connect=0ms service=12ms status=500 bytes=244 protocol=https
```
みたいなエラーが出て原因がわからなかった。
ググって原因にありそうなものを確認して行った。
- 環境変数よめている？かをprint()で確認とか
- DBの設定がおかしいのか？（使っていないのにな）とか
- whitenoise？APIだから表示ページはないんだけれど。とか

# エラーを詳細に表示すれば解決するんじゃないか？
当たり前のことに気がつき、ググっていると
https://stackoverflow.com/questions/45391082/heroku-server-error-500-when-debug-false-whitenoise-could-not-find-style-c
この記事に、下記コードをsettings.pyに追加しろと書いてありました。
```settings.py
以上略...

LOGGING = {
    'version': 1,
    'disable_existing_loggers': False,
    'handlers': {
        'console': {
            'class': 'logging.StreamHandler',
        },
    },
    'loggers': {
        'django': {
            'handlers': ['console'],
             'level': os.getenv('DJANGO_LOG_LEVEL', 'DEBUG'),
        },
    },
}
```
これを書くことで、heroku logs --tailにlocalのときのようなエラーが表示されました。
中身はよくわかりません。

# 自分の原因
アクセストークンを変更したのに、Herokuに反映できていませんでした。
webのHerokuのConfigVarsから変更しようと、現行のVALUE部分に貼り付けただけで満足していました。
右側の鉛筆ボタンから編集しないといけません。
[Xcode][Swift]あらゆるエラー備忘録


引っかかりそうなエラーには大体当たる、永遠の駆け出しエンジニアです。
（随時更新）


[1.ビルドしても画面が真っ暗](#ビルドしても画面が真っ暗)
[2.Storyboardに設定したImageがビルドしても画面に反映されない](#storyboardに設定したimageがビルドしても画面に反映されない)

### ビルドしても画面が真っ暗
StoryboardでUI作った！ViewControllerも設定した！
ビルドしたら画面が真っ暗！なんで！！

> Failed to instantiate the default view controller for UIMainStoryboardFile 'Main' - perhaps the designated entry point is not set?

**原因**
`Is initial View Controller`にチェック入れ忘れ
![スクリーンショット 2022-07-28 23.28.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2745096/b280acfd-a20a-b174-8d16-b595fc8b7efa.png)
***
### Storyboardに設定したImageがビルドしても画面に反映されない
Resourceフォルダを作成して格納した画像をStoryboardで設定してUIに反映されてる！
なのにビルドした画面に反映されない！なんで！！

>Could not load the "[画像名]" image referenced from a nib in the bundle with identifier "[Bundle Identifier]"

**原因**
画像たちのResourceフォルダを`TargetMembership`にチェック入れてたもののうまくプロジェクトに紐づいてなかった様子。
大人しくAsssetに追加することで解決
![スクリーンショット 2022-07-28 23.47.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2745096/50add336-3827-7e52-b0d5-8ceb56b5c5fb.png)
LIRCによる赤外線LEDリモコン作成（RaspberryPi）

RaspberryPi
　OS:
Raspberry Pi OS with desktop
Release date: April 4th 2022
System: 32-bit
Kernel version: 5.15
Debian version: 11 (bullseye)

---

sudo apt install lirc
sudo systemctl enable lircd.service

sudo vi /etc/lirc/lirc_options.conf
driver          = default
device          = /dev/lirc0　　←赤外線発光（リモコンとして使うとき）
#device         = /dev/lirc1　　←赤外線受信（ライブラリ作るとき）

上記のdevice設定をどちらかをコメントアウトして、設定
再読み込み
sudo systemctl restart lircd.service

---

そもそもGPIOポート設定（先にやる）
sudo vi /boot/config.txt

dtoverlay=gpio-ir,gpio_pin=18　　　←赤外線受信
dtoverlay=gpio-ir-tx,gpio_pin=17　　←赤外線送信（発光）

sudo reboot

---

赤外線受信（ライブラリ作り）
mode2 -d /dev/lirc1

　加工して /etc/lirc/lircd.conf.d/＊.conf　を作る。

　→参照　Thanks
　　https://www.indoorcorgielec.com/resources/%E5%BF%9C%E7%94%A8%E4%BE%8B/lirc%E3%81%A7rpitph-monitor-rpz-ir-sensor%E3%81%AE%E8%B5%A4%E5%A4%96%E7%B7%9A%E5%88%B6%E5%BE%A1/

再読み込み（発光に変えて）
sudo systemctl restart lircd.service

リスト反映されたか見る
irsend LIST '' ''

発光してみる
irsend SEND_ONCE aircon on  みたいなかんじ
Release Please Actionの紹介

[RSpec::ContextHelper](https://github.com/masaakiaoyagi/rspec-context_helper.rb)という小さなgemのリリースに[Release Please Action](https://github.com/google-github-actions/release-please-action)を使ってみたのですが、便利だったので紹介します

---
## これは何？
[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/)に従ったコミットメッセージを付けることでリリースの自動化をするもの

---
## 何してくれるの？
以下のようなことが出来そうです
* [バージョン](https://github.com/masaakiaoyagi/rspec-context_helper.rb/pull/24/files#diff-fc01d50d6c08cd5b55f1596f331d2cd2c25bd19db0bb7cb72ee2e04768dd2d0eR5)を自動で更新してくれる
* [それっぽいCHANGELOG](https://github.com/masaakiaoyagi/rspec-context_helper.rb/blob/main/CHANGELOG.md)を生成してくれる
  ちゃんと[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#specification)に従ってコミットログを書いていけば、もっと意味のあるCHANGELOGにできるのだと思います
* [GitHubのRelease](https://github.com/masaakiaoyagi/rspec-context_helper.rb/releases)を作ってくれる
* GitHubのReleaseが生成されたことを契機にして、gemをpushしたりできる
  （ただし、[gemのpushをするためのstep自体](https://github.com/masaakiaoyagi/rspec-context_helper.rb/blob/ff2e33a38fa19a137f8f5a3e2ba344d3b0ed6571/.github/workflows/release-please.yml#L27-L48)は自分で書く必要があります）

---
## 注意すること
* tagを手動で0.1.0のように打っておかないと、1.0.0からになってしまう
* gemをpushする際に、rubygems.orgのMFAを無効にしないとだめそう
  （MFA有効でもpush出来る方法があったら教えて欲しいです🙇）

---
## [RSpec::ContextHelper](https://github.com/masaakiaoyagi/rspec-context_helper.rb/blob/main/.github/workflows/release-please.yml)でのシーケンス
たぶんこんな感じの流れだと思います
![release_please_action.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2712155/0d0313f1-2ff5-8c74-2dce-b4bf53aa0c9f.png)
Vue3で手軽にカルーセルを実装したい

## はじめに
- 普段、BEとWebのFEを体感8:2くらいの割合でやっているので、ガッツリFEをやると、そのたび浦島太郎状態になので、そこでの発見を小出しに書いてみようと思います

## Vue3でvue-slickがサポートされていなかった
- Vue3は2020年9月リリースということで特段新しいというわけでもないのですが、新しいものを作るならばと使ってみることにしました。
- で、Webサービスでよく見かけるカルーセルを例によって作ることになり「まぁ、vue-slick使えばできるからいいだろう」とたかを括っていたのですが、Vue3はサポート対象外。。。
- そこで代案として探していた中で扱いやすそうだった `vue3-carousel` を触ってみることにしました。（ `vue3` と関するだけあってちゃんとVue3で使えます）

![スクリーンショット 2022-07-28 20.15.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46053/8dcd4e7c-ae98-97b1-dc7e-9628e23107d8.png)

cf. https://www.npmjs.com/package/vue-slick

## vue3-carousel使ってみる
- [リファレンス](https://ismail9k.github.io/vue3-carousel/)のままですが、下記コードのみでカルーセルを表現できます。コードが短い！

```bash
$ npm install vue3-carousel
```
or
```
yarn add vue3-carousel
```

```vue
<template>
  <carousel :items-to-show="1.5">
    <slide v-for="slide in 10" :key="slide">
      {{ slide }}
    </slide>

    <template #addons>
      <navigation />
      <pagination />
    </template>
  </carousel>
</template>

<script>
// If you are using PurgeCSS, make sure to whitelist the carousel CSS classes
import 'vue3-carousel/dist/carousel.css';
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel';

export default {
  name: 'App',
  components: {
    Carousel,
    Slide,
    Pagination,
    Navigation,
  },
};
</script>

<style lang="scss" scoped>
// とりあえず見れるように
.carousel__slide {
  height: 200px;
  background-color: red;

  &:nth-child(2n) {
    background-color: green;
  }
}
</style>
```

![スクリーンショット 2022-07-28 22.43.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46053/601c2291-b737-4e95-cf19-fce875dbe578.png)

![スクリーンショット 2022-07-28 22.43.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46053/ec764d84-4daa-9a7c-11be-0ddc01ec24fd.png)

## カスタマイズ
- 1画面内にいくつスライドを表示するかであったり、自動設定があったり、画面サイズごとに設定を変えられたりといった見た目の変更も可能です。
    - ※ 詳細は以下を参照ください

cf. https://ismail9k.github.io/vue3-carousel/getting-started.html#available-props

```vue
<script>
// If you are using PurgeCSS, make sure to whitelist the carousel CSS classes
import 'vue3-carousel/dist/carousel.css';
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel';

export default {
  name: 'App',
  components: {
    Carousel,
    Slide,
    Pagination,
    Navigation,
  },
  // 以下追加
  data() {
    return {
      breakpoints: {
        500: {
          itemsToShow: 1.5,
        },
        780: {
          itemsToShow: 6,
        }
      }
    }
  }
};
</script>
```

- 500px以上ならスライド1.5枚表示

![スクリーンショット 2022-07-28 23.10.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46053/39011124-a0f2-009f-4fed-a82fcd8e7350.png)

- 780px以上ならスライド6枚表示

![スクリーンショット 2022-07-28 23.10.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46053/4c9f6b0d-06e5-a317-0963-260bbfdeb987.png)


## 参考
- reference: https://ismail9k.github.io/vue3-carousel/
- npm: https://www.npmjs.com/package/vue3-carousel

## おわりに
- 昨年末から投稿が滞っておりましたが、そろそろ今年の年末（アドベントカレンダー）を見据えて記事を書いていこうと思います
Laravel 自分がよく使うartisanコマンドまとめ

自分がよく使うコマンドをまとめてます。

## コントローラー作成
```
 php artisan make:controller XXXX/Api/XXXXXController
```

## テスト作成
### ファイル作成
```
php artisan make:test XXXX/Api/XXXXController --unit
```

### テスト実行
```
./vendor/bin/phpunit ./tests/Unit/Http/Controllers/Api/XXXXControllerTest.php
```


## モデル作成
```
php artisan make:model Models/XXXX
```

## マイグレーションファイル作成

migrationはテーブル名と変更内容がざっくりわかるようにすること！！

ファイル名は、任意だけど作りやすいように分ける。

### 新規テーブル
```
php artisan make:migration create_table_テーブル名 --create=テーブル名
```

### 項目変更
```
php artisan make:migration change_column_カラム名 --table=テーブル名
```

index追加の場合
```
php artisan_partner make:migration add_index_カラム名 --table=テーブル名
```

### 項目追加
```
php artisan make:migration add_カラム名 --table=テーブル名
```
親要素をはみ出すセクションの見出し


みなさんごきげんよう。HTML、CSSの勉強を始めて一年、ポートフォリオを作っているのですが難しかった部分を自分のより深い理解のために書きたいと思います。
早速ですがまずは実践したいものがこちらです。
各セクションの仕切りで、親要素を超える線です。（今回は擬似要素(before, after)を使って実装しました。）

![スクリーンショット 2022-07-28 14.24.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710733/5b225b75-77f9-d839-a7dc-5bdd64383778.png)

redは右にはみ出し、blueは左にはみ出しています
早速コードの解説をしていきます。

これが完成したHTMLとCSSです
下の方に詳しい説明をしているので見たい方は見てください。

```sample.html
<body>
  <div class="p-main l-container">
    <section>
      <h2 class="p-section__title p-section__red"><span>red</span></h2>
      <div class="p-section__spacer">
        <p class="p-section__text">禅智内供の鼻と云えば、池の尾で知らない者はない。長さは五六寸あって上唇の上から顎の下まで下っている。形は元も先も同じように太い。云わば細長い腸詰のような物が、ぶらりと顔のまん中からぶら下っているのである。</p>
      </div>
      <h2 class="p-section__title p-section__blue"><span>blue</span></h2>
      <div class="p-section__spacer">
        <p class="p-section__text">五十歳を越えた内供は、沙弥の昔から、内道場供奉の職に陞った今日まで、内心では始終この鼻を苦に病んで来た。</p>
      </div>
    </section>
  </div>
</body>
```

```sample.css
body {
  overflow: hidden;
}

.l-container {
  max-width: 1200px;
  width: 68%;
  margin: 0 auto;
  padding-top: 300px;
}

.p-section__title {
  display: flex;
  align-items: center;
}

.p-section__text {
  width: 60%;
}

.p-section__title span {
  margin: -5px .75em 0 .75em;
}

.p-section__spacer {
  padding: 10em 0;
  display: flex;
  justify-content: center;
}

.p-section__title:before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  min-width: 12px;
}

.p-section__title:after {
  content: '';
  display: block;
  height: 1px;
  width: 100vw;
}


/*------------------------------------
red
------------------------------------*/

.p-section__red:before {
  background-color: #884a4a;
}

.p-section__red:after {
  background-color: #884a4a;
  margin-right: -50vw;
}
/*------------------------------------
blue
------------------------------------*/

.p-section__blue {
  flex-direction: row-reverse;
}

.p-section__blue:before {
  background-color: #061385;
}

.p-section__blue:after {
  background-color: #061358;
  margin-left: -50vw;
}
```

# 解説

まず最初にbeforeで文字の前の四角を作ります。今回は12pxの正方形にしました。
```css
.p-section__title:before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  min-width: 12px;
}
```

次にafterで線を作ります。
```css
.p-section__title:after {
  content: '';
  display: block;
  height: 1px;
  width: 100px;
}
```

続いて`display: flex;`で`before` `文字` `after`を横並びにしていきます。
`align-items: center;`で上下方向の中央揃えにしています。
```css
.p-section__title {
  display: flex;
  align-items: center;
}
```

さらに先ほど作った線を画面の外まで伸ばしたいので長くします。
```diff_css
.p-section__title:after {
  content: '';
  display: block;
  height: 1px;
- width: 100px; 
+ width: 100vw;
}
```
最後にafterの線がbodyの横幅を突き抜けてしまってページが横に伸びるのを防ぐために、`bodyにoverflow: hidden`をつける。
```css
body {
  overflow: hidden;
}
```

今回は要素（線）がどれだけはみ出しても良かったのでbodyに `overflow:hidden`をつけて実現させました。
*blueの線は擬似要素の順番変える（右から左にはみ出したい）ために`flex-direction: row-reverse;`をつけてます。
参考になれば嬉しいです。
【Laravel】 Sanctum で任意のタイミングでCookieの発行を許可する 【SPA】

## Sanctum の仕組み

@ucan-lab さんの記事で結構詳しく書かれているのでまずはこちらを参考のこと

https://qiita.com/ucan-lab/items/3e7045e49658763a9566

## Cookie 発行の条件

[`Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful`](https://github.com/laravel/sanctum/blob/3.x/src/Http/Middleware/EnsureFrontendRequestsAreStateful.php) が特定条件でCookieを暗号化したり発行したりしてくれます。その特定条件とは

- refererヘッダー が存在し、その値が `sanctum.php` で指定したドメインに含まれる。
- ↑がなければ originヘッダーが存在し、その値が `sanctum.php` で指定したドメインに含まれる。

です。

その判定は上記ファイル内の `fromFrontend()` メソッドで行われています。

``` sanctum/src/Http/Middleware/EnsureFrontendRequestsAreStateful.php 
    public function handle($request, $next)
    {
        $this->configureSecureCookieSessions();

        return (new Pipeline(app()))->send($request)->through(static::fromFrontend($request) ? [
            function ($request, $next) {
                $request->attributes->set('sanctum', true);

                return $next($request);
            },
            config('sanctum.middleware.encrypt_cookies', \Illuminate\Cookie\Middleware\EncryptCookies::class),
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            config('sanctum.middleware.verify_csrf_token', \Illuminate\Foundation\Http\Middleware\VerifyCsrfToken::class),
        ] : [])->then(function ($request) use ($next) {
            return $next($request);
        });
    }

　　　　　　　　// Cookieを付与するか判定するメソッドはこれ
    public static function fromFrontend($request)
    {
        $domain = $request->headers->get('referer') ?: $request->headers->get('origin');

        if (is_null($domain)) {
            return false;
        }

        $domain = Str::replaceFirst('https://', '', $domain);
        $domain = Str::replaceFirst('http://', '', $domain);
        $domain = Str::endsWith($domain, '/') ? $domain : "{$domain}/";

        $stateful = array_filter(config('sanctum.stateful', []));

        return Str::is(Collection::make($stateful)->map(function ($uri) {
            return trim($uri).'/*';
        })->all(), $domain);
    }

```

## Referer ヘッダ、 Origin ヘッダが付与されない

特定のブラウザで、 OAuth のフロー内でリダイレクトされてAPIにリクエストが飛んでくる場合などに、 referer ヘッダが付与されない状態でリクエストが飛んでくる場合があるそうです。

そうした場合、通常であれば OAuth の認証をもとに Cookie を発行したいという要望が答えられませんが、上記のファイルを継承させて、オーバーライドすれば対応可能です。

## やること

- `sanctum/src/Http/Middleware/EnsureFrontendRequestsAreStateful.php` を継承したファイルを作成し、`fromFrontend()`をオーバーライドする
- 新しく設定した条件に脆弱性がないか十分に検討する。
- `Kernel.php` を api の middleware に登録する。

## その他

### Auth::guard('sanctum') の実態
最後の行だけ読めばOKです。
- 実態としては `Illuminate\Auth\RequestGuard`
- ミドルウェアを挟んだ場合に配下のリクエストで必ず呼ばれる `check()` メソッドがあり、その中で `RequestGuard` の `user()` メソッドが呼ばれるが、`user()` メソッド内で sanctum の `Guard.php` が `__invoke()` され、その際に `Auth::guard('web')->user()` が呼び出され return される。
- なので、 `Auth::guard('sanctum')->user()` をすると `Auth::guard('web')->user()` の結果が返ってくる。
【Laravel】 show、edit等のルーティングを主キー（id）ではなくレコード（文字列）にするgetRouteKeyNameメソッド

## 参考ページ
https://qiita.com/phper_sugiyama/items/bdeee931ae2b821af895
https://www.messiahworks.com/archives/24058

こちらの情報を元に`show`や`edit`等、通常は主キー（id）を指定するルーティングを、代わりに主キーの持つレコード（文字列）を使用する方法を備忘録として残しておきます。


## やりたい事

ブログページで別ページのリンク`http://localhost:8000/sample`をつけたい。
urlをaタグに直接入れればもちろん解決できますが、ルーティングを使用して行いたい。

```ruby:show.blade.php
<a href="http://localhost:8000/sample">オススメ記事</a>
↓
<a href="{{ route('blog.show','sample')}}">オススメ記事</a>
```

## 開発環境
Windows 10
XAMMP
PHP 7.4.29
Laravel Framework 8.83.15

## マイグレーション

ブログテーブルにタイトル、本文、urlの3つを定義します。urlは重複出来ないので`unique()`を付ける。

```ruby:create_blogs_table.php
    public function up()
    {
        Schema::create('blogs', function (Blueprint $table) {
            $table->id();
            $table->timestamps();
            $table->string('title');
            $table->string('contents');
            $table->string('url')->unique();
        });
    }
```

## モデル

ルーティングの際に`id`の代わりに`url`を指定したいので、今回のポイントである`getRouteKeyName`メソッドをモデル内で使用します。

```ruby:Blog.php
class Blog extends Model
{
    use HasFactory;

    protected $fillable = [
        'title',
        'contents',
        'url',
    ];

    public function getRouteKeyName()
    {
        return 'url';
    }
}

```

## コントローラー

```ruby:BlogController.php
class BlogController extends Controller
{
    public function index()
    {
        $blogs = Blog::all();
        return view('blog.index', compact('blogs'));
    }

    public function show(Blog $blog)
    {
        return view('blog.show', compact('blog'));
    }
}

```

## ルーティング

```ruby:web.php
Route::Resource('blog', BlogController::class);
```

## ビュー

モデル内で`getRouteKeyName`メソッドを使用して`url`を定義したため`$blog->url`で指定できる。

```ruby:index.blade.php
    @foreach ($blogs as $blog)
    <p><a href="{{ route('blog.show',$blog->url)}}">{{ $blog->title }}</a></p>
    @endforeach
```


モデル内で`getRouteKeyName`メソッドを使用して`url`を定義したため
`{{ route('blog.show','指定url')}}`で指定できる。
```ruby:show.blade.php
   <p>{{ $blog->title }}</p>
   <p>{{ $blog->contents }}</p>
   <a href="{{ route('blog.show','sample')}}">オススメ記事</a>
```
【Laravel Breeze】Breezeのデフォルトで存在するコンポーネントを図解していく


<b>Breezeのデフォルトのコンポーネントについての解説はどこにもなかった<font color='red'>（たぶん）</font></b>ので、誰かの役に立てばということでQiitaの記事にしてみました。

::: note
「dashboard.blade.php（PC画面）」と「dashboard.blade.php（スマホ画面）」と「login.blade.php」の３つだけ図解しました。
:::

# この記事を読むと…
1、dashboard.blade.phpとlogin.blade.phpの構成が分かる。
2、bladeコンポーネントのslotの動きが分かる。
3、再利用したいコンポーネントが見つかるかも。
4、bladeコンポーネントの勉強になるかも。


# dashboard.blade.php（PC画面）
<b><font color='red'>赤色＝コンポーネント</font>
<font color='#FFBD09'>黄色＝includeされたファイル</font>
黒色＝slot</b>

![1659019117642.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311883/4bdad366-f318-bc81-8fea-f4270ea9eabd.jpeg)

# dashboard.blade.php（スマホ画面）
<b><font color='red'>赤色＝コンポーネント</font>
黒色＝slot</b>

※枠に囲まれていない要素はベタ書きされてる要素です（＝コンポーネントでない）

![1659019094737.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311883/ff808322-dc2b-b936-f4bf-ce8f08f37bc1.jpeg)

# login.blade.php
<b><font color='red'>赤色＝コンポーネント</font>
黒色＝slot</b>

※枠に囲まれていない要素はベタ書きされてる要素です（＝コンポーネントでない）

![1659019136042.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311883/012986a8-5339-f17e-df9e-484603bc61cc.jpeg)

# 感想
図解してみたらslotがどこに渡されてるのか分かって嬉しかったです。（小並感）

ReactやらVueやらでもコンポーネントばっかや。
世はまさに大コンポーネント時代（ありったけのpropsをーかき集めー）
[Swift][Storyboard]UIButtonに枠線などカスタマイズする方法

### 概要

XcodeでUIButtonのカスタマイズをする方法です。
ViewControllerで個々に設定してもいいのですが、カスタムクラスを設けてボタンに適用させればStoryboard上で楽々設定できるのでおすすめです。

***

### カスタムクラスの作成

ボタンのレイアウトを好みに設定できるようにするためのクラスを作成します。

①ファイル追加
![スクリーンショット 2022-07-28 21.13.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2745096/b69e1fc2-1b21-4b0e-a579-a2b97dc623af.png)

![スクリーンショット 2022-07-28 21.13.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2745096/0d5ef78a-5a3a-adac-89b8-2b5052b2ab15.png)

②作成したファイルに以下を書き込む

```swift:CustomButton.swift
import Foundation
import UIKit

class CustomButton: UIButton {
    // @IBInspectable のアノテーションを設定することでカスタムプロパティを追加することができる
    @IBInspectable var borderColor: UIColor = UIColor.clear // 枠線の色
    @IBInspectable var borderWidth: CGFloat = 0.0 // 枠線の太さ
    @IBInspectable var cornerRadius: CGFloat = 0.0 // 枠線の角丸
    
    override func draw(_ rect: CGRect) {
        self.layer.borderColor = borderColor.cgColor
        self.layer.borderWidth = borderWidth
        self.layer.cornerRadius = cornerRadius
        super.draw(rect)
    }
}
```
***
### ボタンにクラスを適用させる
Storyboardの枠をつけたいボタンに作成したクラスを適用させる
![スクリーンショット 2022-07-28 21.56.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2745096/f53c5d84-8ee9-b27c-cf28-1dd114744233.png)

**設定ファイルに基づきStoryboard上でカスタムできるようになりました！**
![スクリーンショット 2022-07-28 21.57.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2745096/76c80c23-f634-bf86-b2af-cb40b9c324eb.png)
***
### 確認
Stroryboard上のUIには反映されていませんが、ビルドして確認するとばっちり設定されてます◎
↓Storyboard
![スクリーンショット 2022-07-28 23.54.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2745096/b4eac5d2-d44f-ecfe-07f5-cd5fbb12596f.png)

↓シミュレータ
![スクリーンショット 2022-07-28 23.55.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2745096/973763cf-2df0-d9f7-0cde-993ff1e99ddf.png)


お疲れ様でした。
***
参考：https://sunnyday-travel-aso-6487.ssl-lolipop.jp/programing/swift/button-custom/
ブラウザの上検索フィールドで検索すると、検索結果にDynamics 365のデータも表示される

## ブラウザの上検索フィールドで検索すると、検索結果にDynamics 365のデータも表示される
Bingサーチで、社内の情報すべて、ファイルやテキスト、チャット情報もすべて検索できる。
SharePointに入っているデータも。Excel,Word,PPTといたエクセル、ワード、パワポもOutlookメール、Teamsチャットの内容もすべて検索できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/e542dd43-d009-e3da-64a0-65f50b9aa814.png)

## 完成イメージ
変更前
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/48461805-042d-1e63-5295-3b7877a755d9.png)

設定しないとDynamics 365に入っているデータはEdgeブラウザで見えない。
データを見る場合はDynamics 365を開く必要あり。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/91a23b60-6f13-894e-b170-de3691335d43.png)

変更後
24時間たつと、URLバーにキーワードいれると、Dynamics 365のデータも検索する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/99c5c509-b981-d1af-8f59-35567639583f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/39026f83-0db1-c696-e636-c0f575b7204b.png)


## 設定の手順
### 検索結果の設定
https://docs.microsoft.com/ja-jp/microsoftsearch/manage-dynamics365
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/c6ff7307-dcae-8323-7c58-5e2b7c427d77.png)

データソースタブから
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/9f6c0674-427e-8174-8e43-aed5ebc39d3b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/bc980389-b0ba-0058-b749-84184ab1cb32.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/1ebb0473-d33b-c610-fa51-102de406046e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/367026/096a09ec-5efa-f4b1-6d09-4b9197e9ef55.png)

以上

参考
https://docs.microsoft.com/ja-jp/microsoftsearch/manage-dynamics365
"duplicate key value violates unique constraint"の対応方法

# 経緯
別環境のDBのデータをCSVでエクスポート。
ローカルのDBにCSVインポート。

その後、データ更新などの処理を行うと、
"duplicate key value violates unique constraint"
が発生してしまった。

# 解決方法
## SQLで直接以下コマンドを叩く
> select setval('テーブル名_重複してるカラム_seq',(select max(id) from テーブル名));

hogeテーブルのidでエラーが発生している場合であれば、
> select setval('hoge_id_seq',(select max(id) from hoge));

## 原因
エラー内容から分かる通り、一意制約しているカラムの値が重複しているのが原因でした。

例えば、IDなどの自動更新の値。

MySqlなどであればカラムの最大値を取っていい具合にできるのですが、
postgresSQLの場合だと、別で最大値を保存しているそうです。

このコマンドを叩くことで、自動更新の最大値を無理やり合わせることができます。

# 参考URL
http://blog.livedoor.jp/loopus/archives/50846480.html
Aurora MySQLをサービス無停止でスケールアップ

# はじめに
医療系クラウドサービスを提供している会社で働いている2kaiです。

2022年7月に入ってから新型コロナウイルス感染爆発に伴い、患者及び医療スタッフの利用数が急増し、ピーク時間帯のデータベースCPU使用率がWriter、Reader共に監視の閾値を度々超えてくるという状態になりました。
と、思った次の日には100%に届くスパイクまで発生したために、急遽サービス無停止でスケールアップを実施しました。

現時点での月間アクセス数は1億リクエストを超えるくらいです（正確には感染爆発の前月の集計値になります）。
作業時間帯（22時頃）のアクセス数は850/min。

# システム概要
Ruby on Rails in awsで構成された、恐らく一般的なモノリスアプリケーションです。

- アプリケーションはWeb、Worker、Batchから構成
- Ruby on Railsで実装し、WriterとReaderに負荷分散するようにコーディング
- 各アプリケーションはElastic Beanstalkで管理
- データベースはAurora MySQLで、WriterとReader × 2で構成
- データベースは常時稼働（オートスケールしない）
- ElastiCache for Redisを利用（今回は関係無し） 

![外部向けアーキテクチャ図.drawio (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165742/36c33bd3-40ea-c548-587c-2cd8b6b2ee69.png)

# 作業
作業は単純に画面ポチポチで終わります。
- Readerのスケールアップ
- Writerのスケールアップ
- Writerの入れ替え
- アプリサーバの再起動

## Readerのスケールアップ
インスタンスを選択して「変更」ボタンから「インスタンス設定」内の「DB インスタンスクラス」を変更します。

夜間に作業したのでWriter1台でも全てのアクセスを捌けるかなとも思いましたが、念のため平行作業せずに1台ずつ順次変更。

一瞬接続が切れ`Can't connect to MySQL server on xxxx…`や`Mysql2::Error::ConnectionError: MySQL server has gone away`が発生しましたが、すぐに回復しました（1秒とかそういうレベル）。

## Writerのスケールアップ
Reader同様に「変更」から設定変更します。
Writerの場合は最初にフェールオーバーが実行され、Readerに降格後スケールアップが実行されます。

フェールオーバー時に`Mysql2::Error::ConnectionError: Lost connection to MySQL server during query`が発生しました。
ダウンタイム（今回は10～15秒程度でした）は、DBのサイズやアクセス数等によって変わると思うので注意が必要です。

## アプリサーバを再起動
Webアプリは問題ありませんでしたが、Workerアプリで`The MySQL server is running with the --read-only option so it cannot execute this ...`が発生しました。元writerだったインスタンスへのコネクションがプールされている様子が見受けられます。

Workerのアプリサーバを再起動して回復しました。
Elastic Beanstalkでは以下で再起動できます。Deploy設定をローリングにしておけばダウンタイムは発生しません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165742/602cb7d9-7e01-8214-9b9f-84ebd39df62c.png)

## Writerの入れ替え
降格してReaderになった元Writerのインスタンスを、再度昇格してWriterに戻しておきます。
~~モニタリングのメトリクスに一貫性がなくなる為です~~ CloudWatchのメトリクスはロール（writer,reader）で見るので気にする必要は無いけど、各インスタンスをグラフで見る時は識別子で認識する事が多いので利便性を考えると戻しておいた方が良さそうです。
Workerアプリの再起動も忘れずに実施。


# おわりに
作業直後にSQLのタイムアウトが発生する事がありました。
DBキャッシュが全てクリアされた為と思われます。
今回は夜間だった事もあり悲惨な事にならずにすみました（あわてて主要テーブルにマニュアルでクエリを投げておきましたが、本来はMySQLの機能として暖機するようですので杞憂だったかも）。
データ量が多くなってくるとキャッシュが充分に生成の時間も長くなると思いますので注意が必要ですね。

## 今後
Aurora Serverless v2も出てきた事ですし、そろそろDBもオートスケール実装したいなと思っています。
アプリ側もお世話になったElastic Beanstalkを卒業して、コンテナサーバーレスへの移行を計画しています。

# 追記 2022/7/29
前職の後輩からInsufficientInstanceCapacityエラーが発生すると最悪Readerインスタンス減る可能性あるから、変更じゃなくて追加/削除でやった方が良いんじゃないかとご指摘頂きました。
うん、たしかにそうかもと思いました。同様の作業をする方は検討してみてください。
XXX.XXX.XXX形式のVersionをソート時に気をつけたほうがいいこと

# 今回言いたいこと
「.」付き、つまり「文字列のバージョン」をソートをする場合は気をつけましょう！

# 経緯
DBの項目にversionを持たせているのですが、想定通りにソートされないため対応しました。

原因は、文字列である「.」を含めた文字列でバージョン管理をしていたためでした。

例）
1.22.0
1.3.0
の値かつ昇順で並べた場合、
本来は、1.3.0 > 1.22.0となって欲しいのですが
文字列の2番目の要素である"2"と"3"を比較して2が勝つため
1.22.0 > 1.3.0
と想定しないソートとなっていました。

# 解決方法

## PostgreSQLで対応
### 対応したSQL
```
select 
    verion,
from 
	items 
ORDER BY
	LPAD(SPLIT_PART(SUBSTRING(regexp_replace(verion, '[Xx]', '0', 'g') FROM '[0-9.]+$'), '.', 1), 3, '0'),
	LPAD(SPLIT_PART(SUBSTRING(regexp_replace(verion, '[Xx]', '0', 'g') FROM '[0-9.]+$'), '.', 2), 3, '0'),
	LPAD(SPLIT_PART(SUBSTRING(regexp_replace(verion, '[Xx]', '0', 'g') FROM '[0-9.]+$'), '.', 3), 3, '0');
```
### 解説
補足)　selectに、ORDER BYの値を入れると動きが分かりやすいですので、解説がわかりにくい方は値を入れてみるといいかもです。

### 1. Xを置換
> regexp_replace(verion, '[Xx]', '0', 'g'),

私が対応した案件の仕様で
未確定のバージョンに対しては、「X」を入れることができます。

そのため、Xを0に強制的に置き換えました。

場合によってはこちらの処理はなくても良いです。

### 2. 不要な文字列を削除
> SUBSTRING([1.の部分] FROM '[0-9.]+$')

先頭に、「v」がついてるデータが混じっていたため無理やり削除する処理です
こちらも仕様独特なので、場合によってはなくても良いです。

例） v1.2.3 → 1.2.3

### 3. 「.」区切りで値を取得する
>SPLIT_PART([2.の部分], '.', 1)

[2.の部分]を、「.」で区切り、その1番目の値を返します。

例）1.2.3 → 1を返す

以降、2番目、3番目と値を返します。
>SPLIT_PART([2.の部分], '.', 2)

例）1.2.3 → 2を返す

>SPLIT_PART([2.の部分], '.', 3)

例）1.2.3 → 3を返す

＊ 今回の対応は、3つの「.」区切りまで対応してます。
X.X.X.Xみたいに４つにしたい場合は、さらに増やしてください。

### 4. 0埋めしてあげる
> LPAD([3.　の部分], 3, '0')

3桁までとして、足らない部分は0埋めします。越えた分は、、、切り捨てます

例）1.2.3 → 「001,002,003」

### 5.以上の処理のORDER BYで順にソートしてあげる
上記処理を順番に、1番目、2番目、3番目と比較することで正常にソートができるようになりました。

例） 
1.22.0　→ 「001,　022,　000」
1.3.0　→　「001,　003,　000」

1番目から順番に比較していく。2番目の要素が、22と3で22の方が値が大きいと判断して、
想定通り、1.3.0 > 1.22.0 の順でソートされるようになる


# 参考URL
とても参考になりました。
https://shobon.hatenablog.com/entry/2018/02/13/202859