OmniAICreator/Qiita-1.07M huggingface dataset:
国土地理院APIを用いて住所から緯度経度に変換する

# 概要
データ分析で観光地の分布を地図上に描画したいような状況を想定する。分析するには緯度経度が必要だが、住所しかない。そのため住所から緯度経度を求めないといけない。Google Maps Platformは有料サービスである。OSSの「geopy」は<font color="Red">詳細な住所から緯度経度に変換できない</font>、おおよその住所であればその緯度経度が分かる。
→ex)「東京都墨田区押上」は成功するが、「東京都墨田区押上１丁目」は<font color="Red">失敗する</font>
<font color="Blue">国土地理院API</font>を用いれば住所から緯度経度に変換でき、OSSで結果も信頼できるだろうということで採用した。

# 処理フロー
住所が記載されたcsvより国土地理院APIを用いて緯度経度を求めて、元のcsvに緯度経度を追加する。
![add2latlng.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/981627/19bd263b-48a9-48a6-e494-abd4e846db9f.png)
先ほどの緯度経度よりfoliumで描画する。
<img width="40%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/981627/54679b88-d772-3371-da41-fe64019d1af7.png">

# 実装
```python
import pandas as pd
import requests
import urllib
import folium
```

```python
# 国土地理院API
GeospatialUrl = "https://msearch.gsi.go.jp/address-search/AddressSearch?q="
# データフレーム作成
df = pd.read_csv('./sample_address.csv')
```

```python
# 国土地理院APIより住所→緯度経度に変換
lat_list = []
lng_list = []
for index, row in df.iterrows():
    s_quote = urllib.parse.quote(row.住所)
    response = requests.get(GeospatialUrl + s_quote)
    try:
        lat_list.append(response.json()[0]["geometry"]["coordinates"][1])
        lng_list.append(response.json()[0]["geometry"]["coordinates"][0])
    except Exception as e:
        print(e)
```

```python
# inputデータに緯度経度を追加する
df_new = df.copy()
try:
    df_new['lat'] = lat_list
    df_new['lng'] = lng_list
except Exception as e:
    print(e)

# csvに結果を保存する
df_new.to_csv('./result_add2latlng.csv', encoding='shift-jis', index=False)
```

```python
# 観光地をmapに描画する
m = folium.Map(location=[df_new[0:1].lat, df_new[0:1].lng], tiles='OpenStreetMap', zoom_start=10)
for i, marker in df_new.iterrows():
    name='Location:'+str(i)
    lat = marker.lat
    lon = marker.lng
    popup ="<strong>{0}</strong><br>Lat:{1:.3f}<br>Long:{2:.3f}".format(name, lat, lon)
    folium.Marker(location=[lat, lon], popup=popup, icon=folium.Icon(color='lightgreen')).add_to(m)

# HTML出力
m.save('./mapping' + '.html')
```

# まとめ
住所が記載されたcsvから、国土地理院APIを用いて緯度経度に変換することができた。国土地理院APIはOSSで使いやすい。
仕事で使うREDMINEに関する考察(6)

マイブームは半年ごとにやってくる
以前、Redmineの使いこなしを考えていたが、今回、マネージャが変わることから、現在抱えている仕事のリストをまとめる必要が生じた。

https://qiita.com/EasyCording/items/f46ce0718f005f8b4d96

# まとめと報告
　幸いプロジェクトの中に、かなり粗い粒度でチケットを作っていたので、それをサクッとCSVで出して、EXCELでまとめてみた。
　結果的には、このような時に手間をかけずサクッと出せるし、ちゃんとやっている感は醸しだせたのではないかと思う。

# 現状
　これまでのRedmineの使用感をまとめる。

* 職場ではRedmineの利用を進める気は失せた
* 自分のみの業務管理ツールとしては、日記代わりに使えている
→　もはやRedmineは完全にリマインダーであると認識している
* Outlookメールでやり取りをしており、Redmineからの直接的なやり取りはしていない（本来のチケット→メールのフローが出来ていない）

# 課題
* 相手がRedmine登録していない限り、Redmineをメール代わりに有効活用はできない
→　そもそも使いにくいし、ＵＩが古くて触る気がしない・・・
* せめてOutlookのメールがチケットに紐付けられるようにしたい
→　OUTLOOKのVBAマクロを使って、特定アドレスからのメールをREDMINE側に転記できないだろうか？

# 実現方法
 少し調べてみた。

https://qiita.com/haradaj/items/f5d8e2aab6b3ee5f4108

ＶＢＡ！！！！
めっちゃ得意です。

そんなわけで、あまり触ったことはないが、Outlookでマクロを作ることにした。

以上
PowerShellのキーバインドをbash風にしたい

# What's？

タイトルどおり、PowerShellのキーバインドをbash風にしたいなということで。

bashの感覚だと、PowerShellが操作しづらかったので…。

# 環境

```powershell
PS C:\Users\xxxxx> $PSVersionTable.PSVersion

Major  Minor  Build  Revision
-----  -----  -----  --------
5      1      19041  2364

```

`$PRIFILE`に、以下のように設定。

```powershell:$PROFILE
Set-PSReadLineKeyHandler -Key "Ctrl+d" -Function DeleteChar
Set-PSReadLineKeyHandler -Key "Ctrl+w" -Function BackwardKillWord
Set-PSReadLineKeyHandler -Key "Ctrl+k" -Function ForwardDeleteLine
Set-PSReadLineKeyHandler -Key "Ctrl+a" -Function BeginningOfLine
Set-PSReadLineKeyHandler -Key "Ctrl+e" -Function EndOfLine
Set-PSReadLineKeyHandler -Key "Ctrl+f" -Function ForwardChar
Set-PSReadLineKeyHandler -Key "Ctrl+b" -Function BackwardChar
Set-PSReadLineKeyHandler -Key "Ctrl+p" -Function PreviousHistory
Set-PSReadLineKeyHandler -Key "Ctrl+n" -Function NextHistory
Set-PSReadLineKeyHandler -Key "Ctrl+i" -Function MenuComplete
```

PowerShellプロファイルはPowerShell の開始時に実行されるスクリプトで、`$PROFILE`は現在のセッションにおけるPowerShellプロファイルへのパスが入っています。

> $PROFILE 自動変数には、現在のセッションで使用できる PowerShell プロファイルへのパスが格納されます。

https://learn.microsoft.com/ja-jp/powershell/module/microsoft.powershell.core/about/about_profiles?view=powershell-5.1

`$PROFILE`が指すファイルが存在しない場合は作成しましょう。

```powershell
PS C:\Users\xxxxx> New-Item -ItemType File -Path $PROFILE -Force
```

実行ポリシーは、以下のようにしておきました。

```powershell
PS C:\Users\xxxxx> Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
```

https://learn.microsoft.com/ja-jp/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-5.1

# 現在のキーバインドを確認するには

`Get-PSReadLineKeyHandler`コマンドで。

https://learn.microsoft.com/ja-jp/powershell/module/psreadline/get-psreadlinekeyhandler?view=powershell-5.1

こちらを見ながら、必要に応じて`$PROFILE`に書いた内容を適宜修正。
「アラート」と「アラーム」の違い・使い分け方

システムエンジニアとして作業をしていく上で、言葉選びが重要な場面がしばしば出てきます。
最近混乱したのは「アラート」と「アラーム」の違いです。

## 困ったケース
AWS案件で基本設計書を記載していた際、**『アラート』と『アラーム』で表記ゆれになってるよ**と、指摘を受けました。

AWSで監視といえば**CloudWatch Alarm**なので、そのときは**アラーム**に記載を合わせたものの、
よく考えたら意味は同じなの？と疑問に感じ、調べてみました。

## アラート【Alert】とは
困ったときの広辞苑に記載がなかったので、英辞郎を確認してみました。

>1. 〔危険に対する〕警報、警告
>2. 警報発令中［期間］、警戒態勢
>3. 《コ》〔システムのエラーなどを示す〕アラート、警報
>4. 《イ》〔ユーザーが関心を持つ情報を知らせる〕アラート、通知
※《コ》：コンピューター用語
※《イ》：インターネット用語

動詞としてのAlertには、**『警告する』** や **『警戒態勢を取らせる』** といった意味もあります。

<font color="red">**→アラートは、一般的にイメージする「**警報**」と考えてよさそう**</font>
　例：Jアラート、熱中症警戒アラート

## アラーム【Alarm】とは
まずは広辞苑を確認してみます。

>アラーム【alarm】
>①警報。警報装置。
>②目覚し時計。また、その音。

次に英辞郎を確認します。

>1. 警報、警告、危険を知らせる声［音］
>2. アラーム、警報器、目覚まし時計◆【略】ALM
>3. 〔危険を認識したことによって起こる〕恐怖、驚き、警戒、懸念、不安
>4. 〔軍隊の〕召集命令◆【同】call to arms

動詞としてのAlarmには、**びっくりさせる**や**危険を知らせる**といった意味もあります。

<font color="red">**→アラームは危険を知らせる音・装置としての役割といった側面が強いのではないか**</font>
　例：目覚まし時計、火災報知器
CloudWatch Alarmも予め設定したしきい値に達した際にお知らせをしてくれるサービスなので、表現としてはぴったりです。

## 結論
**警告**の意味で使用する場合は<font color="red">**アラート**</font>
**警告音**や**警報装置**として使用する場合は<font color="red">**アラーム**</font>　と使い分けるのが良さそう。

ただ、他に整理されている方の記事をみると様々な見解があり、正確な答えはなさそうでした。
なので自分の中で一番腑に落ちた回答として、上記の見解ベースに今後の設計書に記載していきたいと思います。

日本語は難しい(´；ω；｀)

## 参考文献

この記事は以下の情報を参考にして執筆しました。

- [TOP学び教養クイズ「アラート」と「アラーム」って何が違うの？「東京アラート」ってどういう役割？](https://precious.jp/articles/-/19780#:~:text=%E3%80%8C%E3%82%A2%E3%83%A9%E3%83%BC%E3%83%A0%E3%80%8D%E3%81%AF%E3%80%81%E3%80%8C%E3%81%82%E3%82%89%E3%81%8B%E3%81%98%E3%82%81,%E3%81%AB%E7%99%BA%E3%81%9B%E3%82%89%E3%82%8C%E3%82%8B%E8%AD%A6%E5%91%8A%E3%81%A7%E3%81%99%E3%80%82)
- [「アラート」とは？意味！「アラーム」と「アラート」意味の違い](https://meaning-book.com/blog/20190527163235.html)
- [英辞郎 on the WEB](https://eow.alc.co.jp/)
- [広辞苑無料検索](https://sakura-paris.org/dict/)
Azure AD B2C投稿記事まとめ

弊社では、2020年からAzure AD B2Cに関する記事をいくつか投稿しております。

その記事のまとめと、役立つドキュメント関連を本記事でリストアップいたしました。

記事が追加されましたら随時更新していきます。

---

## 記事一覧
弊社で投稿したAD B2C関連の記事一覧です。


### 認証関連
* [Azure AD B2CにLINEアカウントでログインする](https://qiita.com/AsukaSeki/items/c00087dfd04949ae6115)
* [Azure-AD-B2Cに電話番号やユーザー名でログインする](https://qiita.com/ToshihiroNozaki/items/478323f15716d174494a)
* [Azure Static Web Appsを試してみた５【Azure AD B2C連携】](https://qiita.com/akihiro-nakano/items/4c0f1d90446b0b0dc5cd)

### カスタマイズ関連
* [Azure AD B2Cカスタムポリシーを利用し、認証フローの中で独自のREST APIを呼び出す](https://qiita.com/AsukaSeki/items/0d9cd890f1cd6ca91067)
* [Azure AD B2C×ASP .NET CoreのAPIキー認証](https://qiita.com/AsukaSeki/items/0b904c6f9b65fc697384)
* [Azure AD B2Cにカスタムドメインを適用する](https://qiita.com/akihiro-nakano/items/7f0696d58b2b52b2fda9)
* [Azure AD B2Cでカスタムメールを送信する](https://qiita.com/AsukaSeki/items/4e99a82cf717c2a77654)

### ログ関連
* [Azure MonitorでAzure AD B2Cのトレースログを取得する（①環境構築編）](https://qiita.com/AsukaSeki/items/7f9f05491c9c73c2178c)
* [Azure MonitorでAzure AD B2Cのトレースログを取得する（②実践編）](https://qiita.com/AsukaSeki/items/dcfedd6524faf290752c)

### VSCode拡張機能
* [Azure AD B2Cカスタムポリシーを環境変数で管理する](https://qiita.com/AsukaSeki/items/ca6e266a07eb656a03b8)

---

## Microsoft公式ドキュメント
* [Azure Active Directory B2C とは](https://learn.microsoft.com/ja-jp/azure/active-directory-b2c/overview)
* [チュートリアル:Azure Active Directory B2C テナントの作成](https://learn.microsoft.com/ja-jp/azure/active-directory-b2c/tutorial-create-tenant)

## Microsoft公式サンプルコード
* [AD B2C カスタムポリシー Starter Pack](https://github.com/Azure-Samples/active-directory-b2c-custom-policy-starterpack)
    * サインアップ、サインインなどの基本的な認証フローのカスタムポリシーのサンプルコードです。
* [Azure Active Directory B2C: Custom CIAM User Journeys](https://github.com/azure-ad-b2c/samples)
    * パスワードの強制リセットや利用規約などといった様々なケースに対応したカスタムポリシーのサンプルコードがあります。
MVCとは？なぜプログラムの役割分担をするの？

ITのコーチをしています。
初学者のかたの**MVCって結局どういうものなの？なんで必要なの？** という疑問にお答えするときの内容メモを記録します。もろもろかみ砕いて説明しています。

## MVCって結局どういうものなの？
MVCとは、**Model, View, Controller の３つ役割にプログラムを分ける考え方**です。

この文章の中で大事な部分は「**考え方**」という部分です。ここ。MVCモデルは「考え方」の話です。何の考え方かというと、**役割分担の考え方**です。

プログラムの役割分担ってどういうこと？なんのためにするの？と思われるかたもいらっしゃるかもしれません。

## プログラムの役割分担は何のためにおこなわれるのか

まず、なんのために？というところで考えてみると、いろいろありますが突き詰めていくと**より大規模なアプリケーションを効率よく開発するため**に、というところに尽きます。

これは現実世界でもよくある話だと思います。役割分担をなぜするのかというと、**より大規模なものを効率的にやっていくため**、ですよね。

ビジネスの例で考えてみましょう。
２人とか３人とか小さな規模でビジネスをやっているときは、ある1人のひとが営業も開発も会計処理も何でもやっている！というような状況でも、まぁまぁうまくまわしていけると思います。

しかし、それが20人30人と社員の規模が増えていくとどうでしょうか。
誰が何をやっているのか整理できていないと、かえって面倒なことがたくさん起こります。

そこで、営業の業務は営業担当の人、開発の業務は開発担当の人、会計の業務は会計担当の人、というふうに分担をすることによって、あ、会計の処理が必要だ！っていうふうになったらそれじゃあ会計担当さんお願いします～というふうに専門の人に処理を頼むことができます。そのほうが管理しやすく、効率的に全体の業務を遂行することができます。

プログラムも一緒です。
役割を分担して、どの機能はどのプログラムに書きますというふうに整理することによって、**大規模な開発を効率的におこなうことができます**という話です。

中でも**MVCと呼ばれる考え方は、その役割を、ModelとViewとControllerの３つの役割にわけて考える**ということです。

それでは、それぞれどのような役割をもっているのか、あくまで一般的にはこうというものをご紹介します。

## MVCの役割
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090779/f59eae54-e720-4a0e-9c44-b2ef0387c835.png)



### ①Model（モデル）
データ処理を行う部分です。
DBとデータをやり取りして、必要なデータを処理する役割があります。

### ②View（ビュー）
ユーザが目にする画面の処理を行う部分です。フロント側とも言われます。
HTMLやJavaScriptなどでの画面のレイアウトや機能の処理を行います。

### ③Controller（コントローラー）
上記の2つ、ModelとViewの橋渡しの役割を行う部分です。
データを画面に表示するために、Modelで扱ったデータをViewへ受け渡します。

MVCについてさまざまな考え方がありますが、ModelはDBとのやりとり、Viewは表示、ControllerはModelとViewの受け渡し役、というふうに思っておけば概ね外れません。
Excel ファイルを CSV ファイルに変換する（ mac ）

複数の Excel ファイルを1つの CSV ファイルにまとめる必要があったので、その方法をまとめておく


### xlsx2csv をインストールしておく
```
$ pip install xlsx2csv
```

### Excel ファイルを CSV ファイルに変換する
```
$ xlsx2csv input.xlsx output.csv
```

### 複数の CSV ファイルを1つにまとめる
```
$ cat *.csv > AllData.csv
```
【JavaScript】モーダルウィンドウの作成

# 1日1UI投稿！
昨日思いついたので本日よりスタートです。
UIに限らずですが、アウトプットを積極的にやっていきます。


# モーダルウィンドウを作成
本日はモーダルウィンドウ作成しました。
完成品は↓

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="wvxoexm" data-user="ri-tama" 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/ri-tama/pen/wvxoexm">
  モーダルウィンドウ</a> by ri-tama (<a href="https://codepen.io/ri-tama">@ri-tama</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


以下自分の備忘録として躓いたポイントを2点(~~もっと躓いてましたが...~~)

## 1.getElementById()とquerySelector()の違い

()内のHTMLの要素を取得することができるものですが
大きな違いは前者はid属性のみ
後者は全ての要素を取得することができます。

## 2.position設定
一番躓いたポイントです。
以下失敗例

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="mdjOmNP" data-user="ri-tama" 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/ri-tama/pen/mdjOmNP">
  モーダルウィンドウ</a> by ri-tama (<a href="https://codepen.io/ri-tama">@ri-tama</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

一発でわかると思いますが、
#modalのposition設定を忘れております(完成品からその部分だけ消しております)

こうなると#modalのpositionは初期値のstaticになっているわけですから、#maskより下にきます。
ということで、positionを設定し直して、無事完成となりました。
その後色々調べていくと

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index

こちら。
positionが重なって、z-index設定されていない時はどうなるの？
というのが上の回答になります。HTMLの出現順で完成品となっているということがわかります。


## 終わりに
というわけでモーダルウィンドウ完成しました。

昨日インプットして今朝からアウトプットをやりましたが
CSSの理解度不足を実感しております。
明日もUI投稿できるように、昼からも勉強します。

最後まで読んでいただきありがとうございました。
Vueで親コンポーネントの変数と子コンポーネントを同期できた話


## 注意
コード、設計、やりたいことすべでがド素人オレオレ実装です。なんで問題が解決したのかもわかっていません。より良い方法があれば教えてください。なんでうまくいったか分かる人も教えてください

## やりたかったこと

```mermaid
classDiagram
class ParentComponent
ParentComponent : +value 
ParentComponent : add()

class ChaildComponentA
ChaildComponentA : pushbutton()

class ChaildComponentB
ChaildComponentB : value

ChaildComponentA --> ParentComponent
ParentComponent -->  ChaildComponentB

```
上記のようにコンポーネントを配置して子コンポーネントAにボタンがありそれを押すと親コンポーネントのadd()が実行される、add()では親コンポーネントにある変数が増える。このとき親コンポーネントの変数は変わるけど子コンポーネントBにpropsを使って渡してる変数が変わらない。という状況になっていた。

## 解決？策
子コンポーネントBのpropsの書き方を変えると動く

``` JavaScript
//Before
props : {
    "value"
}

```
この書き方よく見るよね。でもこれを下のようにするとなぜか動く
``` JavaScript
//After
props : [
    "value"
]
```

# 最後に

ほんとになんで動いてるかわかりません。公式ドキュメントをすべて読んだわけでも、Vueに詳しいわけでもないので(なんならさわったのはじめて)理由をご存じの方はおしえてください
Redundant 'if' statement 　って注意された時の話。

急に注意されて慌ててググった

https://ja.stackoverflow.com/questions/42332/idea%E3%81%A7kotlin%E3%81%AEbool%E5%A4%89%E6%95%B0%E3%82%92%E5%8F%8D%E8%BB%A2%E3%81%95%E3%81%9B%E3%82%8B%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E6%9B%B8%E3%81%8F%E3%81%A8redundant-if-statement%E3%81%A8%E3%81%84%E3%81%86%E6%8F%90%E6%A1%88%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8B

わざわざ変数使わないで結果返せばいいやんということ
Kubernetes の CronJob を使って OCI Functions をスケジュール実行する


# やりたいこと

OKE でも OCI Compute 上の minikube でもいいので、とにかく Oracle Cloud 内にある Kubernetes クラスタから CronJob を使って OCI Functions をスケジュール実行したい！


# 方針

1. [**OCI CLIコンテナ・イメージ**](https://docs.oracle.com/ja-jp/iaas/Content/API/SDKDocs/clicontainer.htm) を使って CronJob から function を起動する
  function を起動するためのイメージを自作するのは面倒なのでこれを使います。
1. [**インスタンス・プリンシパル**](https://docs.oracle.com/ja-jp/iaas/Content/Identity/Tasks/callingservicesfrominstances.htm) 認可を使う  
  OCI CLI では `--auth instance_principal` で有効化できます。
  そして、[**動的グループ**](https://docs.oracle.com/ja-jp/iaas/Content/Identity/Tasks/managingdynamicgroups.htm)を作成し、さらに適切な[**ポリシー**](https://docs.oracle.com/ja-jp/iaas/Content/Identity/Concepts/policies.htm)を設定して、CronJob (がデプロイされている K8s が稼働しているコンピュート・インスタンス) から function を起動します。

# 手順

### 動的グループを作成する

CronJob が実行されるコンピュートを動的グループに含めます。

+ シンプルに特定のインスタンスを指定する場合
`ALL {instance.id = '<instance-ocid>'}`*

+ 特定のコンパートメント内の全インスタンスを指定する場合
`ALL {instance.compartment.id = '<compartment-ocid>'}`*

+ それじゃ広すぎるだろうという場合は、インスタンスにタグをつけておいて、タグの値で範囲を限定することができます。OKEクラスタのワーカーノードなど複数インスタンスを指定する場合、IDでなくタグで指定が可能です。
`All {instance.compartment.id = '<compartment_ocid>', tag.<tagnamespace>.<tagkey>.value='<tagvalue>'}`

 \* 正確には ALL {} は不要です

### ポリシーを作成する

とりあえずは
`allow dynamic-group <動的グループ名> to use functions-family in tenancy`
で function を起動できます。
細かな制御を行いたい場合は [「ファンクションを呼び出して管理するためのアクセス権の制御」](
https://docs.oracle.com/ja-jp/iaas/Content/Functions/Tasks/functionsrestrictinguseraccess.htm) を参照して下さい。

### CronJob のマニフェストを作成する

こんな感じです。

```yaml
apiVersion: batch/v1
kind: CronJob
metadata:
  name: functions-cronjob
spec:
  schedule: "*/3 * * * *" # この例では3分おきに
  timeZone: "Asia/Tokyo" # 指定しないと UTC になっている場合があるので注意
  concurrencyPolicy: Forbid # Allow / Replace
  jobTemplate:
    spec:
      template:
        spec:
          containers:
          - name: invoke-function
            image: ghcr.io/oracle/oci-cli:latest # OCI CLIコンテナ・イメージ
            imagePullPolicy: IfNotPresent
            args: 
            - "--auth"
            - "instance_principal" # インスタンスプリンシパルを使う
            - "fn"
            - "function"
            - "invoke"
            - "--function-id"
            - "ocid1.fnfunc.oc1........" # function の OCID
            - "--body" 
            - "{}" # function に渡す任意のインプット情報
            - "--file"
            - "-" # アウトプットは標準出力に
          restartPolicy: Never # Always / OnFailure
```

### K8s で CronJob を実行する

`kubectl apply -f <manifest-file>` して下さい。

# まとめ

バッチジョブ自体は無償利用枠の大きな OCI Functions で稼働させて、ジョブ制御を K8s (Job / CronJob / Argo Workflows などなど) で実現するってどうですか？(注: OCI Functions には実行時間制限あり)
OCI Data Flow のスケジュール実行とかにも応用できますね。

### 追記

CronJob から呼び出された Function が、さらに他の OCI のリソースにアクセスする場合、この Function に対する認可（リソース・プリンシパル等）を考慮しないといけませんのでご注意を。
Azureで無料でURL正規化する

<h2>目的</h2>

Azure Static Web Appで、無料のURL正規化の方法について、めちゃめちゃ調べましたが、実は設定自体はあっさり終わるため、メモを残します。

canonicalタグとかそういうのは使いません。これが**一番簡単**な方法です。

<h2>結論</h2>

**無料でできます**。Azure Portalでポチでした。
[設定手順は、以下になります。](#設定手順)

<h2>URL正規化とは</h2>

ドメインの正規化って言ったり、URLの正規化って言ったりします。
要は、以下のようなURL(サブドメインを含む)にアクセスされたときに、
設定した1つのURLに**リダイレクトする設定**です。

ちなみに、下のURLは私の個人開発中のサイトですので、開いてもらって問題ありません。

- http://aj-code.com
- https://aj-code.com
- http://www.aj-code.com
- https://www.aj-code.com

<h2>URL正規化のメリット</h2>

<h3>1. 正確なアクセス解析</h3>

別のサブドメインへのアクセスは、**別サイトとしてカウント**されます。
ですので、アクセス出来てしまうと、GA(Google Analytics)などを導入しても、アクセスの集計ができません。というか、面倒です。
なので、リダイレクトして、1つのURLに統一しましょう。

<h3>2. クローラに分散されたコンテンツと思われない</h3>

複数のサブドメインに、同じようなコンテンツがあると、クローラに嫌われるそうです。
最悪、**ペナルティもある**そうです。


<h2>設定手順</h2>

Azureのポータルで、**ボタンクリック2回**で終わりました。ちゃんちゃん。
なぜ調べるのにハマったかというと、URL正規化というかっこいい名前で調べていたから。
Azureでは、「規定ドメイン(Default Domain)の設定」という言い方をするそうです。

*手順は、以下の公式にあります*
https://learn.microsoft.com/ja-jp/azure/static-web-apps/custom-domain-default

お疲れ様でした。
これであなたも、Google Analyticsを導入する準備ができましたね。
WSL2 のエラー対処法（sudo apt updateができない）

`$ sudo apt update`
でこんなエラーが出たとき
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216690/ecb7afa4-1166-a38b-fb13-043d57838fdd.png)
「wsl apt update できない」で検索すると、いろいろ出てくる
が
時間がずれている、とか
listを更新する、とか
・・・、とかとか
手当たり次第に試してみるも全部ダメ、、何か違う・・・

## 調査方法
まずそもそもちゃんと疎通しいるのかを確かめるためpingを打つ
$ ping google.com
の応答が
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216690/f788f5b6-3c31-dc9f-1444-b9db5433953a.png)
となって名前解決ができないらしい（が、これも怪しい）
ちなみにWindows Terminal からだと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216690/00c2d1e8-79ff-052c-2e62-066dc14baeab.png)
と返ってくるので、wsl側の通信だけができない状態

@riraosan さんの記事
[【WSL2】WSL2でUbuntuを動かしたらハマった件（sudo apt-get updateできない）](https://qiita.com/riraosan/items/3b036367d6d9f4e6b52a)
原因
ウィルスソフトのファイアウォールが邪魔をしていた。

とある。もしやと思い自分のPCのESETのFWを一時解除すると
`$ sudo apt update` できた！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216690/b26849ed-f0e3-97d3-101d-f75143bcd706.png)
この間まで何もなかったのに、何でFWに引っかかるようになったのか？はわからず
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/216690/36be653c-8096-9816-e85a-3433bf868692.png)
（詳細設定でvEthernet（wsl）は許可になっているのだが、どうしてだろう）
わかるまではその都度ON-OFFするしかないか
[本の紹介][JavaScript]Colaboratoryでやさしく学ぶJavaScript入門

# [Colaboratoryでやさしく学ぶJavaScript入門](https://book.mynavi.jp/ec/products/detail/id=128345)が目から鱗
ColaboratoryでJavaScriptが実行できるのはありがたい。
ある意味、CodePenより使いやすいのではないだろうか。
サンプルもキレイで内容もとても分かりやすかった。　
一読の価値があると思います。

[Colaboratoryのページ](https://colab.research.google.com/drive/1OzlbKiDHoO8P6nISgR7lVRsmAnwOvvxO?usp=sharing)
Leetcode 1833. Maximum Ice Cream Bars

https://leetcode.com/problems/maximum-ice-cream-bars/

## 難易度
### Medium

## アプローチ
### Brute-force

```java
class Solution {
    public int maxIceCream(int[] costs, int coins) {
        Arrays.sort(costs);
        int result = 0;
        for (int c : costs) {
            coins -= c;
            if (coins < 0) {
                break;
            }
            result++;
        }
        return result;
    }
    
/*  WA
    public int maxIceCream_WA(int[] costs, int coins) {
        Arrays.sort(costs);

        int count = 0;
        int cost = 0;
        for (int c : costs) {
            if (cost < coins && c < coins) {
                cost += c;
                count++;
            }
        }
        return count;

    }
*/
}
```

 - [こちら](https://leetcode.com/problems/maximum-ice-cream-bars/solutions/3005195/c-java-short-and-easy-code-explained/)の解説を参照しました
MySQLのDECIMAL型

# 概要

- MySQLのDECIMAL型について簡単にまとめる。

# 内容

- DECIMAL型は固定の小数点型のデータを指す。
- 全体の桁数と小数点以下の桁数でデータの型を指定する。
- `DECIMAL(XX, YY)`のように指定する。（この場合「全体でXX桁、小数点以下YY桁」）となる。
- 例えば`DECIMAL（10, 4）`の場合、最大で999999.9999、最小で-999999.9999が格納できる。
vscodeでスニペット候補が表示されない

# 1. はじめに
vscodeでスニペットファイルに記述を追加したのに、スニペット候補が上手く表示されないため、調べてみました。


# 2. 方法
`ctrl + Space`を押すと、スニペット候補が表示出来ました。

![vscode-snippet.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/262207/174c37d9-9711-d7b3-c655-8409bd870eec.gif)



# 参考
- [IntelliSense](https://code.visualstudio.com/docs/editor/intellisense)
【データ基盤構築/BigQuery】GAからBigQueryにデータを転送する際の冪等性を担保する

# 今回の課題
ETLツール(trocco)を使用して、
GoogleAnalyticsからBigQueryにデータを転送するワークフローを組んでいるのだが、
GA→BigQueryにデータを転送する際の冪等性が担保できていなかったため、ワークフローの再実行を行った際に、特定の日時のデータの重複が発生してしまった。

そのため、各種ツールからデータを転送する際に、冪等性を担保する方法をメモしたいと思う。


## 冪等性を担保する方法
ワークフロー内のGoogleAnalyticsからBigQueryにデータを格納するジョブの直前に、
GoogleAnalyticsのデータを転送した際に作成したテーブルの前日分のデータを削除するジョブを追加する。
```SQL
delete
from
    `GoogleAnalyticsのデータが転送されたBigQueryのテーブル`
where
    1=1
    and date = '$yesterday_%Y-%m-%d$' --前日差分取得。troccoのカスタム変数の機能を使用して、$yesterday_%Y-%m-%d$に前日の日付を格納している。
```

上記のようなジョブを追加することによってワークフローを何度実行しても、データが重複しなくなる。
（ワークフローを実行する度に、前日分のデータが削除されるため、何度実行してもデータが重複しないため。）

以上です。
Railsのcollection_selectの使い方

[株式会社TECH LUCK](https://techluck.co.jp/?utm_source=qiita&utm_medium=article&utm_campaign=myarticle)という会社で代表兼エンジニアをしている齊藤です。

DXプロジェクト、開発プロジェクト、Rails開発などでお困りごとがありましたら[弊社HP](https://techluck.co.jp/?utm_source=qiita&utm_medium=article&utm_campaign=myarticle)からご相談をいただけますと幸いです。
以下のような問題に対応することが可能です。
- プロジェクトでRailsエンジニアが足りなくて困っている
- Railsのバージョンアップをしたいがノウハウ・リソースが足りなくて困っている
- オフショア開発をしているが、要件の齟齬やコード品質が悪いので改善したい

また、Railsエンジニアも募集しておりますので、興味がありましたら[弊社HP](https://techluck.co.jp/?utm_source=qiita&utm_medium=article&utm_campaign=myarticle)からご連絡いただけますと幸いです。

# 前提
Railsの`collection_select`の使い方を毎回調べているので備忘録として残しておきます。

`collection_select`の設定値は以下のような構成になっています。

```erb:sample.html.erb
<%= collection_select(対象となるモデル名, paramsに贈りたいモデルのカラム, 選択肢として表示されるモデルのレコード（配列）, 選択肢として表示されるモデルのカラム, { prompt: "何もも選択されていない場合に表示される文字", select: 選択済みのレコード }) %>
```

具体的には以下のように使うことが多いです。

```erb:edit.html.erb
<%= collection_select(:product, :id, @products, :id, :name, { prompt: "商品名を選択してください", select: @product }) %>
```

以上です。
NestJS x TypeScript x Mongoose で、インスタンス生成時に Type Check が行われるようにする

NestJS の MongoDB 利用方法マニュアルにある通り、こんなスキーマがあったとして、

```ts
// cats.schema.ts
import { Prop, Schema, SchemaFactory } from '@nestjs/mongoose';
import { HydratedDocument } from 'mongoose';

@Schema()
export class Cat {
  @Prop({
    type: String,
    required: true,
  })
  name: string;

  @Prop({
    type: Number,
    required: true,
  })
  age: number;
}

export type CatDocument = HydratedDocument<Cat>;
export const CatSchema = SchemaFactory.createForClass(Cat);
```

インスタンスを生成しようとする。

```ts
// cats.repository.ts
import { Injectable } from '@nestjs/common';
import { InjectModel } from '@nestjs/mongoose';
import { Model } from 'mongoose';
import { Cat, PreRegisterCat } from './cat.entity';
import { CatDocument } from './cats.schema';

@Injectable()
export class CatsRepository {
  constructor(
    @InjectModel(Cat.name)
    private readonly CatModel: Model<CatDocument>,
  ) {}

  async create() {
    const cat = new this.CatModel({
      name: 'nyan',
      age: 10,
    });
    await cat.save();
  }
}

```

と、 `const cat = new this.CatModel({ name: 'nyan', age: 10 });` の部分で適当な値を代入しても、 TypeScript でのチェックは効かない。もちろん、必須項目が未設定であれば、後続の `cat.save()` 時にランタイムエラーとして `Validation Error` が Throw される。( `cat.validate()` で事前チェックも可能 )

#### new するときの型チェックを有効にする方法

`InferSchemaType` と `Model` への generics で対応できた。

```diff_typescript
// cats.schema.ts
  // 略
-  import { HydratedDocument } from 'mongoose';
+  import { HydratedDocument, InferSchemaType } from 'mongoose';
  // 略
  export const CatSchema = SchemaFactory.createForClass(Cat);
+ export type CatPayload = InferSchemaType<typeof CatSchema>;
  // => {
  //  name: string;
  //  age: number;
  // }
```

として、 repository では

```diff_typescript
-  import { CatDocument } from './cats.schema';
+  import { CatDocument, CatPayload } from './cats.schema';
  // 略
  async create() {
-    const cat = new this.CatModel({
+    const cat = new this.CatModel<CatPayload>({
        name: 'nyan',
        age: 10,
      });
      await cat.save();
    }
  // 略
```

という形で指定すれば良い。

存在しないフィールドを指定すると ts でエラーになる。

```ts
const cat = new this.CatModel<CatPayload>({ name: 'nyan', age: 10, microchipping: false });
//                                                                 ~~~~~~~~~~~~~~~~~~~~
// Argument of type '{ name: string; age: number; microchipping: boolean; }' is not assignable to parameter of type 'Cat'.
// Object literal may only specify known properties, and 'microchipping' does not exist in type 'Cat'
```

注意点として、あくまで Type Check しているだけなので、 MongoDB 側で Schema 定義と異なる制約が設定されていたら TypeCheck 上エラーにはならないが、 `save()` 時にランタイムエラーが発生する (当たり前だしこれは RDB でも一緒) 。

Mongoose のインスタンス生成時にエラーを発生させるのではなく、データの永続化のタイミングでランタイムエラーを発生させるという挙動自体は JavaScript や Ruby のようなインタプリタ言語であれば扱いやすいので、このような仕様になるのは仕方がない。まずからのインスタンスを作ってからちょっとずつフィールドを足していって最終的に valid な状態になったら save したほうが良いケースもあるので、Type Check させたいかどうかはユースケース次第。

他に良い方法があれば教えて下さい。
Windowsでフォルダーのセキュリティ（ユーザー or グループ）情報をコマンド（bat）で取得

# 概要

下記のユーザー or グループが正しく設定されているか確認したい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/bf8ed81b-be1e-93d9-2e1d-1ab6b9e4bb5e.png)

フォルダーを一つ一つ『右クリック ⇒ プロパティ』で見ていくのは面倒。
コマンドでサクッと確認したい。
（コマンドならtxt出力にも対応できるで、資料や台帳作りしたい場合も楽になる）

# やり方

```bat:サンプルコマンド
icacls "C:\Users\d\Desktop"
```

 ↓ 結果サンプル。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/357830d3-0982-dff4-e5e9-c37167d55546.png)

# フォルダーパスの末尾に『\』付けると例外

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/cb044604-fa6e-6353-5a67-6ec2fa0cd2f9.png)

# ヘルプ

* (I)(OI)などが何を意味しているのか。
* 他にどんなオプションがあるのか。

を知りたい時は下記。

```bat:icaclsのヘルプコマンド
icacls /?
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/bd82e251-59dd-321a-e739-9ba7fc000b56.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/9d8adfdc-e735-b63a-7cc9-4674f697fe92.png)

# caclsは非推奨

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/42701871-b47a-437d-c1a6-44610681cd86.png)

# 参考サイトさん

https://webbibouroku.com/Blog/Article/file-access-controll

# バージョン

Windows 10 Pro 21H2 OSビルド 19045.2364
fatal: Authentication failed for 'https://github.com/...'の対処法

<h1>初めに</h1>
git push を行ったら、以下のエラーに遭遇したので対処法を記載します。<br>
fatal: Authentication failed for 'https://github.com/...'

<h1>実際のエラー文</h1>

```
git push -u origin main
Username for 'https://github.com': username
Password for 'https://xxxxxx@github.com': password
remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/xxxxxxx'
```
push後、UsernameとPasswordが聞かれます
原因は、Passwordにありました。

<h1>対処法</h1>
Personal access tokensを作成し、Passwordに入力<br>
以下のリンクから作成できます<br>

[Personal access tokens](https://github.com/settings/tokens)

```
Password for 'https://xxxxxx@github.com': ここに作成したトークン
```

<h1>まとめ</h1>
Passwordと聞かれたらログインパスワードを記入すると思いきや、アクセストークンを記載する必要があります。
Passwordじゃなくて、Access Tokenに変更してほしいですね。
Dockerでお手軽にStable Diffusionを試す

# 概要
ローカルPCでStable Diffusionを動かすためのあれこれ

# 試した環境
Windows11 WSL Ubuntu 22.04.1 LTS
CPU:i7-12700F
GPU:NVIDIA GeFORCE RTX 3070Ti
MEM:64GB

# やったこと
・WSLからGPUを見えるようにする
・GitHubからcloneしてきてお手軽にWebUIを起動するだけ

# 手順
## GPU周りのセットアップ
[Docker を使用した NVIDIA CUDA のセットアップ](https://learn.microsoft.com/ja-jp/windows/wsl/tutorials/gpu-compute#setting-up-nvidia-cuda-with-docker)を参考にしながらWSL上でコマンドをたたく

```
$ distribution=$(. /etc/os-release;echo $ID$VERSION_ID)
$ curl -s -L https://nvidia.github.io/nvidia-docker/gpgkey | sudo apt-key add -
$ curl -s -L https://nvidia.github.io/nvidia-docker/$distribution/nvidia-docker.list | sudo tee # /etc/apt/sources.list.d/nvidia-docker.list
$ sudo apt-get update
$ sudo apt-get install -y nvidia-docker2
```
ここまでおわったら、コマンドプロンプトでwslを一度終了させる

```
> wsl --shutdown
```

再びWSL上でwebuiリポジトリを持ってきて構築・起動する
構築に30分ぐらいかかった（多分ほぼダウンロード時間。ネット回線が細い…

```
$ git clone https://github.com/AbdBarho/stable-diffusion-webui-docker
$ cd stable-diffusion-webui-docker
$ docker compose --profile download up --build
$ docker compose --profile auto up --build
```
メッセージが色々流れるが最終的に
`webui-docker-auto-1  | Running on local URL:  http://0.0.0.0:7860`
これが表示されれば動いているはず
ブラウザで`http://0.0.0.0:7860`にアクセスすれば色々遊べます

# 動作確認
イケメンになるのは難しいですね…
![Screenshot_191.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217092/2377944a-3f5b-1779-775e-1272545fb4ca.png)

# おまけ
GPUを思いっきり使えていますね
![Screenshot_192.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217092/01b6d2ad-dfbf-20a9-ab66-ebdf9fc338d8.png)


# 参考
https://learn.microsoft.com/ja-jp/windows/wsl/tutorials/gpu-compute

https://docs.nvidia.com/cuda/wsl-user-guide/index.html#getting-started-with-cuda-on-wsl

https://note.com/npaka/n/nc8b0e9a91d97

https://github.com/AbdBarho/stable-diffusion-webui-docker/wiki/Setup
AWSロードバランサー（ALB）のアクセスログをS3に保存する

EC2で運用しているALB（Application Load Balancer）のアクセスログを確認したい事態が発生したが、そもそもログを設定していなかったので設定する。

1. 予めS3にログ保存用のバケットを作成しておく。
これはこれからログを取得したいALBの設定されているEC2と同じリージョンに作成すること。
2. AWSコンソールで`EC2` →`ロードバランサー`→対象のロードバランサー名をクリックする。
3. ロードバランサーの`説明`タブ内`属性`セクションにある`アクセスログ`を確認。
→`無効`になっていれば未設定なので`アクセスログを設定`ボタンをクリックする。
4. ダイアログ`アクセスログを設定`で、以下を設定する。
	* `アクセスログの有効化`チェックボックスをON
	* `間隔`5分か60分かのどちらかを選択します。トラフィックが比較的多い場合はログを探索する対象ファイルを絞り易いので60分を選択した方が良いでしょう。
	* 手順1で予め作成しておいたログ保存用のバケットを指定します。
	* `この場所の作成`チェックボックスをON

![F8B00B7D-A505-405D-BD4C-A2BEA9EC762C-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5319/3188b86b-eb86-9b7e-6f8b-a169f5c9e875.png)

これで5分ごとに指定バケット以下に自動的に日時でディレクトリが作成され、ロードバランサーのアクセスログが出力されます。

以上
PHPのバージョンを切り替える

# remi リポジトリを追加する

```bash:bash
yum install http://rpms.famillecollet.com/enterprise/remi-release-7.rpm
```

# PHP 5.6 7.2 7.3 をインストールしてみる

```bash:bash
for v in 56 72 73 ; do yum -y install php$v php$v-php-{gd,xml,mbstring,mysqlnd,opcache,pecl-apcu,common,fpm,embedded,pear} ; done
```

# 本体の場所の確認

```bash:bash
$ ls -l /opt/remi/
total 0
dr-xr-xr-x. 3 root root 32 Feb 15 12:17 php56
dr-xr-xr-x. 3 root root 32 Feb 15 12:18 php72
dr-xr-xr-x. 3 root root 32 Feb 15 12:18 php73
```

:::note
本体のシンボリックリンクが置かれる場所
上記の本体のシンボリックリンクは「/usr/bin/」に置かれる。
:::

# 設定ファイルの場所を確認

### 7.xの場合
find /etc/opt/remi/ -type f -name php.ini
/etc/opt/remi/php72/php.ini
/etc/opt/remi/php73/php.ini

### 5.xの場合
find /opt/remi/ -type f -name php.ini
/opt/remi/php56/root/etc/php.ini

# php-fpmの自動起動を有効化しておく

# 

https://qiita.com/centipede/items/0a5e2f55ec3f66dc6bd9
草莽Erlang ── 08. 標準入出力

口で言うより行うことがErlang習得への近道と信じています。

https://qiita.com/mnishiguchi/items/9237780e849d80a85e11

## 標準入出力関連の関数

標準入出力関連の関数は、[io](https://www.erlang.org/doc/man/io.html) モジュールにあります。いくつか取り上げてみます。

### キーボード入力された文字列を取得

[io:get_line/1](https://www.erlang.org/doc/man/io.html#get_line-1) で標準入力にキーボード入力された文字列を取得できます。

```erlang
> Input = io:get_line("名前を入力してください: ").
名前を入力してください: Inoki
"Inoki\n"
```

[string:chomp/1](https://www.erlang.org/doc/man/string.html#chomp-1) で文字列の末尾に改行文字を改行文字を削除します。

```erlang
> string:chomp(Input).
"Inoki"
```

### 標準出力へ印字

いろんな技があるようです。

[io:put_chars/1](https://www.erlang.org/doc/man/io.html#put_chars-1)を使うと文字列を印字できます。文字列じゃないとエラーになるので注意が必要です。

```erlang
> io:put_chars(["hello", $\n]).
hello
ok

> io:put_chars("闘魂\n").
闘魂
ok

% 文字列じゃないのでエラー
> io:put_chars({1, 2}).
** exception error: bad argument
     in function  io:put_chars/1
        called as io:put_chars({1,2})
        *** argument 1: not valid character data (an iodata term)
```

[io:format/2](https://www.erlang.org/doc/man/io.html#format-2)を使うといろんな型のデータに対してフォーマットを整えて印字できます。

文字列を直接渡すことができます。Erlangの文字列はリストです。

```erlang
> io:format("Hello, world\n").
Hello, world
ok

> io:format("闘魂, world\n").
闘魂, world

> io:format([[["闘", "魂"], ", ", "world"], $\n]).
闘魂, world
ok
```

`s`で文字列を整えることができます。

```erlang
% 文字列の最初の５文字だけ印字
> io:format("~5s~n", ["hello world"]).
hello
ok

% 文字列を５文字分の範囲で右よせ
> io:format("|~5s|~n", ["123"]).
|  123|
ok

% 文字列を５文字分の範囲で左よせ
> io:format("|~-5s|~n", ["123"]).
|123  |
ok
```

`s`で多バイトの文字に対応するためにはUnicode translation modifier（`t`）を指定する必要があります。

```erlang
% 何もしないと多バイトの文字がエラーを引き起こす
> io:format("~s~n", ["闘魂"]).
** exception error: bad argument
     in function  io:format/2
        called as io:format("~s~n",[[38360,39746]])
        *** argument 1: failed to format string

% Unicode translation modifierをつけて一件落着
> io:format("~ts~n", ["闘魂"]).
闘魂
ok
```

`f`で浮動小数点数を整えることができます。初期設定では小数点以下６桁が印字されます。

```erlang
> io:format("~f seconds~n", [30.99]).
30.990000 seconds
ok

> io:format("~.3f seconds~n", [30.99]).
30.990 seconds
ok
```

`p`で何でも印字。ただしコードが印字されるイメージなので注意。文字列については専用の`s`を使ったほうがよさそうです。

```erlang
% タプル
> io:format("~p~n", [{1, 2, 3}]).
{1,2,3}
ok

% マップ
> io:format("~p~n", [#{id => 123, name => "Inoki"}]).
#{id => 123,name => "Inoki"}
ok

% 数字
> io:format("~p~n", [123]).
123
ok

> io:format("~p~n", [123.45]).
123.45
ok

% 文字列
> io:format("~p~n", ["hello"]).
"hello"
ok

> io:format("~p~n", ["闘魂"]).
[38360,39746]
ok
```

標準出力に印字せず、フォーマットされた文字列を生成したいだけの場合は、[io](https://www.erlang.org/doc/man/io.html) モジュールの代わりに[io_lib](https://www.erlang.org/doc/man/io_lib.html)モジュールを使うといいかもしれません。

```erlang
> io_lib:format("My number is ~p", [123]).
[77,121,32,110,117,109,98,101,114,32,105,115,32,"123"]
```

文字列操作のための関数は`string`モジュールにあります。

https://www.erlang.org/doc/man/string.html

## Elixirにも挑戦したい

闘魂ElixirシリーズとElixir Schoolがオススメです。

https://qiita.com/torifukukaiou/items/3b65e5c04fa8c55f526e

https://elixirschool.com/ja

https://qiita.com/piacerex/items/09876caa1e17169ec5e1
トップのフォルダからサブフォルダまで一律同じアクセス権を設定する

トップのフォルダからサブフォルダまで一律同じアクセス権を設定したい、
というのは当たり前によくあること。
でも、フォルダ・ファイルの数が多いと時間もかかるので、コマンドで実行するのがおすすめ。

以下のコマンドをコマンドプロンプトから実行する。

# コマンド

```
rem /c アクセス拒否エラーを無視して操作を続行する
rem (OI) フォルダに対する継承アリ
rem (CI) ファイルに対する継承アリ
rem (F)  フルコントロール
rem (M)  変更
rem (RX) 読み取り
icacls "アクセス権を付与したいターゲットフォルダ" /c /grant ユーザー・グループ名1:(OI)(CI)(F) /grant ユーザー・グループ名2:(OI)(CI)(M)
```

ついでに、アクセス権の付与状況を取得するコマンドは以下
```

icacls "アクセス権を取得したいターゲットフォルダ" > "結果出力先ファイル"
```
PowerShellからIBM Watson Speech to Text / Text to Speech を使ってみた

## 初めに
PowerShellからIBM Watson Speech to Text および Text to Speech のAPIを呼び出して、音声認識、人工音声作成をしてみたので、その結果をご紹介いたします。

## 前提
IBM Cloud にて、Watson Speeh to Text および Text to Speech のサービスを作成済みであること

## 参考情報
IBM Cloud API Docs
Speech to Text : https://cloud.ibm.com/apidocs/speech-to-text
Text to Speech : https://cloud.ibm.com/apidocs/text-to-speech


## Speech to Text の実行
上記参考資料を参照すると以下のような実行サンプル例があります。

```
curl -X POST -u "apikey:{apikey}" --header "Content-Type: audio/flac" --data-binary @audio-file2.flac "{url}/v1/recognize?word_alternatives_threshold=0.9&keywords=colorado%2Ctornado%2Ctornadoes&keywords_threshold=0.5"
```

これを参考に、PowerShellのRestAPIを呼び出す、「Invoke-RestMethod」を使用すると以下のようになります。
{apikey}と{url}は、サービスの資格情報の実際の値に置き換えてください。
auido-file2.flacは、https://watson-developer-cloud.github.io/doc-tutorial-downloads/speech-to-text/reference/audio-file2.flac からダウンロード可能です。
ポイントは、３行目、４行目で、認証情報をCredetialオブジェクトに変換し、Invoke-RestMethodのCredentialオプションで指定しているところになります。

```
$user = "apikey"
$pass = "{apikey}"
$secpasswd = ConvertTo-SecureString $pass -AsPlainText -Force
$cred = New-Object System.Management.Automation.PSCredential($user, $secpasswd)
$endPoint = "{url}"
$audioFile = "audio-file2.flac"
$result = Invoke-RestMethod -Method POST -Credential $cred -Headers @{"Content-Type"="audio/flac"} -InFile $audioFile -Uri "$($endPoint)/v1/recognize?word_alternatives_threshold=0.9&keywords=colorado%2Ctornado%2Ctornadoes&keywords_threshold=0.5"
$result.results | ForEach-Object {Write-Host $_.alternatives.transcript}
```

実行結果は、以下のようになります。

```
a line of severe thunderstorms with several possible tornadoes is approaching Colorado on Sunday
```


## Text to Speech の実行
上記参考資料を参照すると以下のような実行サンプル例があります。

```
curl -X POST -u "apikey:{apikey}" --header "Content-Type: application/json" --header "Accept: audio/wav" --data "{\"text\":\"Hello world\"}" --output hello_world.wav "{url}/v1/synthesize?voice=en-US_AllisonV3Voice"
```

これを参考に、PowerShellのRestAPIを呼び出す、「Invoke-RestMethod」を使用すると以下のようになります。
{apikey}と{url}は、サービスの資格情報の実際の値に置き換えてください。
ポイントは、Speech to Text と同様に、３行目、４行目で、認証情報をCredetialオブジェクトに変換し、Invoke-RestMethodのCredentialオプションで指定しているところになります。
また、６行目から８行目で、音声に変換したい文字列を、ハッシュテーブルをJSONに変換し、さらにutf8にエンコードして、Invoke-RestMethodのBodyオプションで指定しているところになります。

```
$user = "apikey"
$pass = "{apikey}"
$secpasswd = ConvertTo-SecureString $pass -AsPlainText -Force
$cred = New-Object System.Management.Automation.PSCredential($user, $secpasswd)
$endPoint = "{url}"
$body = @{"text"="Hello world"}
$jsonData = $body | ConvertTo-Json
$utf8JsonData = [System.Text.Encoding]::UTF8.GetBytes($JsonData)
$audioFile = "hello_world.wav"
Invoke-RestMethod -Method Post -Credential $cred -Headers @{"Content-Type"="application/json"; "Accept"="audio/wav"} -Body $utf8JsonData -OutFile $audioFile -Uri "$($endPoint)/v1/synthesize?voice=en-US_AllisonV3Voice"
```

実行結果は、Hello worldと発言された音声ファイル「hello_world.wav」が生成されます。
Container Desktopを試してみた

## 初めに
Docker Desktopが有償になったので、代替えとして、「[Container Desktop](https://container-desktop.io)」を試してみました。

## 導入
前提条件：dockerエンジンの起動に、WSL2を使用しているため、WSL2が導入可能な環境である必要があります。

1. [GitHub](https://github.com/container-desktop/container-desktop/releases/latest)から最新版をダウンロードします。

2. ダウンロードした「ContainerDesktopInstaller.exe」を実行します。

3. インストール画面が表示されるので、「Install」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1740352/14cdd829-2dda-7d5f-9f27-4331772d9a86.png)

4. インストールが開始されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1740352/ef360eec-c7b9-9971-c659-f70d662c6e59.png)

5. インストールが終わると、再起動の確認画面が出るので、「はい」をクリックし、再起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1740352/727ede9f-90f9-344d-38fa-59e85bde8a4d.png)

6. 再起動後、ログインするとタスクトレイ上に、「Docker Desktop」のアイコンが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1740352/0836349f-740c-a84d-e29d-3156374ee0c5.png)
※アイコンを右クリックすると、メニューが表示され、Dockerエンジンの停止・起動等が行えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1740352/d3794c38-7af4-ed02-b57d-805cf99fd2c4.png)

## dockerコマンドの実行
導入が終わると、コマンドプロンプトからdockerコマンドを実行することができます。
試しに、nginxのコンテナを実行してみました。

```
c:\>docker pull nginx
Using default tag: latest
latest: Pulling from library/nginx
3f4ca61aafcd: Pull complete
50c68654b16f: Pull complete
3ed295c083ec: Pull complete
40b838968eea: Pull complete
88d3ab68332d: Pull complete
5f63362a3fa3: Pull complete
Digest: sha256:0047b729188a15da49380d9506d65959cce6d40291ccfb4e039f5dc7efd33286
Status: Downloaded newer image for nginx:latest
docker.io/library/nginx:latest

c:\>docker images
REPOSITORY   TAG       IMAGE ID       CREATED       SIZE
nginx        latest    1403e55ab369   2 weeks ago   142MB

c:\>docker run -d --name nginx -p 8080:80 nginx
69918a7dd397222668453b9706f439542b18d43e3c7c70152bf6d93e1153e42c

c:\>docker ps -a
CONTAINER ID   IMAGE     COMMAND                  CREATED          STATUS         PORTS                                   NAMES
69918a7dd397   nginx     "/docker-entrypoint.…"   11 seconds ago   Up 6 seconds   0.0.0.0:8080->80/tcp, :::8080->80/tcp   nginx
```

ブラウザを開いて、アクセスすると、nginxのページが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1740352/12ae7091-3281-9c41-f3ad-a2b41ea5873f.png)
Elixirから覚えるJavaScript シリーズ

僕は普段はElixirを使ってます
必要になったのでJavaScriptの勉強をはじめました
題名はElixirから覚えるJavaScriptですが、逆もできるかも？

というシリーズを作りたいと思います

https://qiita.com/t-yamanashi/items/237377588d675829c2e9

https://qiita.com/t-yamanashi/items/850bb03afd811264ecd5

https://qiita.com/t-yamanashi/items/693319825f7c7b3cfb53

https://qiita.com/t-yamanashi/items/bc783e89b20d74c90f43

https://qiita.com/t-yamanashi/items/1cc9ebcffaa660900c87

https://qiita.com/t-yamanashi/items/2f778f445fd169b9cc76

https://qiita.com/t-yamanashi/items/57d4580246eb4752eacf
【Laravel】フォームの日付入力のデフォルト値を今日にする

## フォームの日付入力のデフォルト値を今日にする
ユーザーに入力をしてもらうフォームを作る際、日付を手入力で入れてもらうのですが、
意外と面倒だったりするなと思い、デフォルト値を設定することとしました。

今日のトレーニングメニューだったり今日の体重を入力することが主なので、
ある程度固定で今日をデフォルト値としていいというフォームを作る前提です。

### 考え方
inputタグの中にあるvalueに今日の日付を入れてあげればOK
```
<input type="date" name="tr_date" class="form-control" value="2022-12-22">
```
ただこれだと固定で12月22日になってしまうので、
phpを使って書いていきます。

### 実際のコード
```
<input type="date" name="tr_date" class="form-control" value="<?php echo date('Y-m-j');?>">
```

valueにphpの関数を入れてあげるだけです。
これでデフォルト値に今日の日付を入れてあげることができるようになりました。

### 日時だけでなく時刻も登録したい
もし、日時だけでなく時刻も判定したい場合は`datetime-local`を使ってあげます。
さらにvalueの中身を`Y-m-j` から`Y-m-j H-i`としてあげます。

```
<input type="datetime-local" name="tr_date" class="form-control" value="<?php echo date('Y-m-j H:i');?>">
```

ただこれだとフォーム画面上でUTFでの時刻がデフォルト値として表示されてしまいます。
DBに登録する場合はあまり気にしないかもしれませんが、
ユーザーが入力をするフォームということを考えるとあまりよろしくありません。

その場合は以下のように記載をし、現在時刻をとってきてあげます。

##### TrRecordController
```
    public function create() {

        $date1 = strtotime('+9 hour');
        return view('trrecords.create', compact(
            'date1',
        ));

    }
```
##### create.blade.php
```
<input type="datetime-local" name="tr_date" class="form-control" value="<?php echo date('Y-m-j H:i', $date1);?>">
```

Controllerにて時刻(hour)に9を足したものを変数($date1)に入れてあげてます。
それを使って、`value="<?php echo date('Y-m-j H:i', $date1);?>">`のように
date関数の第2引数にセットしてあげればOKです。
これでフォームの初期値(デフォルト値)に現在時刻をセットすることができます。

![スクリーンショット 2022-12-23 17.41.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/589286/e4d06241-0462-1aa8-074b-16a2a2492a54.png)
Elixirから覚えるJavaScript 〜every〜

僕は普段はElixirを使ってます
必要になったのでJavaScriptの勉強をはじめました
題名はElixirから覚えるJavaScriptですが、逆もできるかも？

今日はeveryを見てみたいと思います

お題
[1, 2, 3, 4, 5]の内容がすべて0より大きかったらtrue

# Elixir

```elixir
x = [1, 2, 3, 4, 5]
y = Enum.all?(x, fn x -> x > 0 end)
IO.inspect(x)                      
IO.inspect(y)
```

```elixir:実行結果
[1, 2, 3, 4, 5]
true
```

# JavaScript

```javascript
x = [1, 2, 3, 4, 5]
y = x.every((x) => x > 0)
console.log(x)
console.log(y)
```

```javascript:実行結果
[ 1, 2, 3, 4, 5 ]
true
```


無事に同じ結果になりました

https://qiita.com/t-yamanashi/items/263b53d889dc5f7ddf17
vimの矩形選択でLinuxのpasteコマンドっぽいことをする

# どういうことか
```
a
bb
ccc

A
BB
CCC
```
という二つのブロックがあるとして
それらを結合して
```
a A
bb BB
ccc CCC
```
という文字列を作りたいです。
正規表現から簡単に扱うためです。

# どうやったか

### 先頭にしたい文字列の末尾に区切り文字を付与する

```
a□
bb□
ccc□
※□はスペース
```

### 先頭にしたい側を矩形選択する
`Ctrl+v`で矩形選択＝ブロック選択

### ノーマルモードでAにカーソルをあて前方ペースト
`/A`からの`P`

---

他にいいやり方がある気がするのですが、一旦目的は達成できました。
Linux基礎2(学習用）

●ディレクトリ・・ファイルを格納する仕組み、ファイルを保存する場所。すべてのデータはファイルという形でどこかのディレクトリに格納されている。＊入れ子構造になっている。（子ディレクトリ、親ディレクトリ）

●構造・・ルートディレクトリ(/)を頂点とした階層構造になっている。これをディレクトリーツリーという。Linuxは一つのディレクトリーツリーしか持たない。マウントの仕組みがある。

●cd/・・/ディレクトリに移動(/は例)
●pwd・・今自分がいるディレクトリを表示
●ls・・ディレクトリ一覧を表示

●主要なディレクトリ・・
/bin・・一般ユーザー管理ユーザーのコマンドの実行ファイルを格納。重要度の高いコマンドの実行ファイルを格納。
/dev・・デバイスファイル（ハードウェアをファイルとして扱えるようにしたもの）を格納
/etc・・設定ファイルを格納
/home・・ホームディレクトリを格納
/sbin・・管理者ユーザ向けコマンドの実行ファイルを格納
/temp・・一時的なファイルを格納
/user・・各種アプリケーションとそれに付随するファイル
/var・・変化するデータを格納

●cdコマンドで特別なコマンドへの移動
①カレントディレクトリ・・現在自分がいるディレクトリ・・(.)
②親ディレクトリ・・一つ上の階層のディレクトリ・・(..)
③ホームディレクトリ・・「/home/ユーザー名」ディレクトリ・・(~)
④ルートディレクトリ・・「/」ディレクトリ・・(/)

●pwdコマンド・・今いるコマンドがわからなくなったらこのコマンドで確認
●lsコマンド・・ファイルやディレクトリの一覧を表示
＊パス名展開を用いると複数のファイルを一度に指定できる（*、?)

●オプション・・ハイフンに何かの記号をつづける形の引数をオプションという。コマンドにオプションを与えると機能が多様になる。
①-l・・ファイルの詳細情報を表示
②-a・・隠しファイルを含めたすべてのファイルを表示
③-F・・ファイルの種別を表示

●mkdirコマンド・・ディレクトリを作成するコマンド、深いディレクトリ（一気にディレクトリ）を作成することもできる

●rmdirコマンド・・空のディレクトリを削除するコマンド、

●パス・・ディレクトリやファイルの住所情報。ディレクトリの階層の区切りを「/」で表示。

●絶対パスと相対パス・・絶対パスはルートディレクトリ(/)から始まるパス。相対パスはカレントディレクトリから始まるパス。
パス表記においてはカレントディレクトリを（.)親ディレクトリを(..）で表記することができる。

●コマンドの使い方
①helpコマンド・・<コマンド> --help でコマンドのヘルプメッセージを表示
②manコマンド・・man<コマンド>。--helpより詳しい
Reactで@emoji-mart （表示はunicodeからの変換で）

自分用のメモとして


## 作成にあたり困ったこと
直接絵文字を表示するのではなくemojiの型にあるunifiedから値を取って表示したかった・・・が、
unicodeを定数としてconstで扱いReactで表示するのは色々と困難な模様
一応[こちらの記事](https://stackoverflow.com/questions/48471323/array-of-html-entities-xf101-how-to-print-as-unicode-not-working)で解を見たのでそちらを使わせていただき表示できるところまでメモ

なお、dataはなくても表示できてるみたい（理由については調べてないのでどなたか知っていれば是非）

## 下記セットで使用するテンプレ（加工必要）
importはファイルの配置場所で変えてもらって
使いたい場所にEmojiSetHookedコンポーネント配置で利用可


### カスタムフック
useEmoji.ts
~~~javascript

import { useCallback, useState } from 'react';

type ReturnValue = {
  isShow: boolean;
  printEmoji: string;
  switchEmojiList: () => void;
  onEmojiSelect: (data: Emoji) => void;
};

export const useEmoji = (): ReturnValue => {
  const [edata, setEdata] = useState<Emoji>();
  const [isShow, setIsShow] = useState(false);
  const targetUnicode =
    edata?.unified != null ? `&#x${edata?.unified};` : '&#x231b;';
  const arrUnicode = Array(targetUnicode);
  const printEmoji = String.fromCodePoint(
    parseInt(arrUnicode[0].replace(/&#x|;/g, ''), 16)
  );
  const switchEmojiList = () => {
    setIsShow((pre) => !pre);
  };

  console.log('use:', isShow);
  const onEmojiSelect = useCallback((data: Emoji) => {
    // console.log(data);
    // setUser({ ...user, name: user.name.concat(data.native) });
    // openEmojiDrawer();
    setEdata(data);
  }, []);

  return { isShow, printEmoji, switchEmojiList, onEmojiSelect };
};

const emojiSamole = {
  id: 'stuck_out_tongue',
  name: 'Face with Tongue',
  native: '😛',
  unified: '1f61b',
  keywords: [
    'stuck',
    'out',
    'prank',
    'childish',
    'playful',
    'mischievous',
    'smile',
  ],
  shortcodes: ':stuck_out_tongue:',
  emoticons: [':p', ':-p', ':P', ':-P', ':b', ':-b'],
};
type Emoji = typeof emojiSamole;

~~~

EmojiSetHooked.tsx
### カスタムフックの利用先
~~~javascript
import { FC } from 'react';
// import data from '@emoji-mart/data'; //サイズが大きいので無くて表示問題ないならない方がいいのかも？
import Picker from '@emoji-mart/react';
import { useEmoji } from 'hooks/useEmoji';
export const EmojiSetHooked: FC = () => {
  const { isShow, printEmoji, switchEmojiList, onEmojiSelect } = useEmoji();

  console.log('hooked:', isShow);

  return (
    <>
      <button
        style={{
          background: ' rgba(255,0,0,0)', // 最後の0で背景透過
          fontSize: '50px',
          padding: 0,
          border: '0px',
        }}
        onClick={switchEmojiList}
      >
        {/* ↓初期値 */}
        &#x1f600;
      </button>
      <p style={{ fontSize: '50px' }}>{printEmoji}</p>
      {isShow ? (
        <Picker
          //   data={data}
          onEmojiSelect={onEmojiSelect}
        />
      ) : null}
    </>
  );
};


~~~
駆け出しエンジニアへ：ドメインについて知ろう！

未経験からエンジニアになりたい人は、プログラミングから始める人が多いと思いますが、
エンジニアの仕事は、プログラミングだけではありません。そして、プログラミングだけでは、エンジニアになれません。同時にプログラミングが苦手でも、システム構成や開発の流れを理解するとエンジニアに近づきます！
今回はドメインについてです。
![インスタスライド_202301012.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/439fd7e8-5558-512d-56ec-16e6bce5b8f1.gif)


# ドメインとは
www.yahoo.co.jp、google.co.jp等の人が理解できる形式でのサーバーの名前をドメインと言います。
裏では、コンピュータが得意なIPアドレスという形式で管理されています。

# IPアドレスとは
IPアドレスは、世界中で唯一ユニークな番号でサーバーやPCに割り当てられます。
これで通信ができる事になります。
最近では、数字が足りずにIPV6という新しいものを出てきました。
（従来は、IPV4）

# DNSとは
ドメイン名からIPアドレスへ
変換する役割を持っているサーバーをDNSといいます。
Domain Name Server

# サービスを公開するには
インターネット上にサービスを公開するには、ドメイン名を取得し、サービスのIPアドレスと取得したドメイン名をDNSやサーバーに登録する必要があります

ドメインは自由な名前で取得できます

# まとめ
・ネットでアクセスする時に使われるURLには、ドメインが使われている
・ドメインは、IPアドレスに変換される
・変換はDNSが管理している
・ドメイン名は自由な名前で取得できる
自分だけのドメイン名を取得してサーバーに設定してみると楽しいですね！

# 最後に
未経験の皆さん、若手エンジニアの皆さん、勉強方法について悩みがあればなんでも気軽に質問して下さい！
これからも記事を書いていきますので、モチベーションアップのためフォロー、イイねお願いします。