OmniAICreator/Qiita-1.07M huggingface dataset:
Aさんの暴走を止める勤怠通知とメモ機能のLINEBot

店長からのミッション：「Ａさんの暴走を止めてくれ！」

こんにちは。小売業で販売課長をしている石ゴリです。
私の部下であり、うっかりもののAさんが出勤時間を間違えるという問題が多発。
店長からのミッションであるAさんの勤怠間違いを改善すべく、
Make初心者の私が１週間で何ができるのかチャレンジしてみました！

※詳細記事はこちら
https://note.com/brainy_clover709/n/n5e2874e9deec

#目次
[1.使用ツール](#1-使用ツール)
[2.できたこと](#2-できたこと)
[3.私のつまづきポイント](#3-私のつまづきポイント)
[4.以下、参考文献です](#4-以下、参考文献です)
[5.追記](#5-追記)








**#1. 使用ツール**
●Make
●LINEBot
●Googleスプレッドシート

**#2. できたこと**
勤怠通知機能を作りたいと思ったため
「安心してください！スケジュール教えますよ！！」
といったLINEBotを作成しました。
●LINEに「/」を含む日付を入力するとその日の出退勤時間が返ってくる。
⇒正しい出退勤時間の確認ができる。
ここまで順調に作成することができたため、＋αの機能として３歩くと忘れてしまうＡさんに
間易的なスプレッドシートを利用してメモ機能を追加したいと思いました。
●LINEに「メモ」と入力するとスプレッドシートにメモの後の言葉が記入される。
⇒うっかり防止のメモ機能を搭載
結果２つの機能をLINEBotに持たせることができました。

![Screenshot_20230706-094600_LINE (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471031/e51dec85-10f0-90c2-d156-41dabaac320a.jpeg)


**Makeシナリオ**

Makeシナリオはこちらです。
![スクリーンショット 2023-07-05 233641.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471031/7fff9913-6092-6502-d13f-7bb22bf53df2.png)

こちらはLINEに「/」を含む日付入力をするとその日の勤怠が返ってくる、
モジュールとフィルターの詳細画像です。（※Make画像の上半分のイメージ）

![タイトルなし.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471031/74586c75-51a4-acab-7e5e-d5125c4ce945.jpeg)
																			
こちらはLINEに「メモ」と入力するとスプレッドシートにメモの後の言葉が記入される、
モジュールとフィルターの詳細画像です。（※Make画像の下半分のイメージ）

![②.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471031/189a5879-8dc1-120a-e52b-a8eeff1d895f.jpeg)

**これで完成！！**

**#3. 私のつまづきポイント**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3471031/a06a9c28-6d1f-06c0-ae57-4a81a1767b4c.png)

**フィルター設定が重要です**
例えばフィルター設定でEqual toを選択してしまうと「●●に等しい」
という設定になるためスプレッドシートに書かれた１日の日付条件しか対応しなくなります。
ここで私はつまづきました。

今回のフィルター設定の際には、
Text Operetors:Containsを選択「●●を含まれています」を選択しました。
これだと「/」を含むとなるため日付入力で「/」を入れると
スプレッドシートに入力された日付全てに対応してくれます。みなさんに伝われ～。

色んな人の手助けがあり完成しました。本当に感謝です。
そして実際にAさんにこのlineBotを使ってもらってもらいました。
１つ目の勤怠を返す機能のリアクションとしては・・・
「課長凄いしょ！これはいいわ～！」→よし！☺
２つ目のメモ代わりのスプレッドシートは・・・
「課長凄い！けど、このメモが記入されたシートはどこにあってどう使うの？」
→必死にパソコンのデスクトップをAさんは探してました。。。
改めて実用レベルに落とし込むソフト作成の難しさを身に染みる石ゴリでした。

**結論：勤怠の暴走を防止することはできましたが、うっかり防止はまだ時間がかかりそうです。**




****#4. 以下、参考文献です****

●switch(true) イディオム考察
https://qiita.com/t_uda/items/1969e09a970d71e4cfd6
●勤怠リマインドしてほしい！文系初心者のノーコードLINEbot作成録（Make）
https://qiita.com/88Eqv/items/9ca66d28599b9712b9b9
●Qiita書き方メモ
https://qiita.com/sakekasunuts/items/c498654481e2c83497d3
●猫のトイレ回数をLINEで送信し、自動でGoogleスプレットシートに転記する仕組みを作りました
https://qiita.com/NagaharaHitomi/items/c1d3a171306ca5add194
●「私の代わりにみんなの様子と面接希望日を聞いてきてほしい！」退職率を減らせ！対話型LINE　Bot作成
https://qiita.com/katourina0120/items/cbb1885f5e0c55ddc313

**#5. 追記**
●7/9　LINEBot名称の意味、メモ機能追加の意味、Aさんに実際に使ってもらったストーリー、目次を追記しました。
マクドナルドのテーブルスタンドの仕組み

少し前に梅田のヨドバシの地下にあるマクドナルドでハンバーガーを食べたらこんなものがありました。


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518724/c7bdb7e6-5eac-b574-86fa-6525b4a9bd2f.jpeg" width="300px">


一見普通の番号札ですが中を見ると...

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518724/731a9979-cc31-e9b3-68b0-57f5e6d8ace8.jpeg" width="400px">

技適マークやFCマークなどがあります。ということはこの番号札は何かしらの電波を発しているということですね。
ACRELECというメーカーのテーブルロケーターです。

![E0835230-8ECC-403E-8919-8F0AD7606D2E.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518724/f790f998-09ff-737f-89f7-5075dc113658.jpeg)

https://www.tele.soumu.go.jp/giteki/SearchServlet?pageID=js01

技適の番号を総務省の「技術基準適合証明等を受けた機器の検索」ページで調べてみるとMicrochip Technology社のもので型番はRN4020とわかりました。汎用品ですね。また、種類が相互承認(MRA)による工事設計認証なのと米国のFCマークやEUのCEマークが記載されていたことから全て一括で認証しているものと思われます。
![3E32E743-6B61-47F3-AF0D-8BA04540E9E0.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518724/512e89d0-433b-593a-fce5-f314d48fd577.jpeg)

https://www.tele.soumu.go.jp/j/sys/equ/mra/mra/

型番でググるとBLE(Bluetooth Low Energy)で通信するモジュールのようです。BLEは通常のBluetoothより省電力で電池が長持ちするのでこの手の製品には結構使われているのではと勝手に思っています。(ネスカフェバリスタのBluetooth連携ができるのもBLE)

Bluetoothの電波の強さなどから席の位置を割り出しているのでしょうか？もしくは専用ビーコンみたいななんかがあるとか。現時点でわかるのはここまでです。また新たな情報が分かり次第（たぶん）追記します。
Google ColabでPythonの位置情報を扱えるライブラリGeoPandasが最初から入るようになった話

## 概要
GeoPandasはちょっとインストールが厄介なパッケージで、入門者がローカル環境に入れるのは結構しんどい（Windowsは特に）。でも、位置情報を扱うのに便利なパッケージなので、使いたい。紹介したい。でも、環境作成大変だし・・・ってのがありました。

それがGoogle Colabにプリインストールされて凄い便利になりました。実はちょっと前まで、GeoPandas以外のパーツまでそろっていたのに、GeoPandasは入っていない状態を見てなんでだろうな？と思っていたのですが、最近入ったようです。

その状況を疑問に思った私のツイートは６月９日に行われてるので、それからすぐ入ったっぽい。
https://twitter.com/OgawaHideyuki/status/1667107337851793408


pip listで確認するとあります。
![geopandas.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85433/537cb062-fac3-ae74-575b-f2f234feae12.png)

## ちょっとした使い方の紹介

GeoPandasの紹介もしておきます。GeoPandasは表形式のデータ＋位置情報が扱えるライブラリです。pandasプラス位置情報という感じでいろいろ便利に扱えます。
https://geopandas.org/en/stable/index.html

ちょっと使ってみましょう。ここのコードをすべて実行したColabのリンクは次の通りです。
https://colab.research.google.com/drive/17dz-gePQcF9mj9TvWShoI5Z-HcoK-Mw7?usp=sharing

まず、サンプルデータを持つライブラリgeodatasetsと位置情報の可視化のためにmapclassifyというライブラリをインストールします。


```python
!pip install geodatasets #位置情報のサンプルデータ https://github.com/geopandas/geodatasets
!pip install mapclassify # 可視化ツール https://github.com/pysal/mapclassify
```

次にライブラリをインポートします。pandas同様、データを扱うのも容易なことを紹介するために、可視化ライブラリplotly expressも用います。

```python
import geopandas as gpd
from geodatasets import data, get_path
import plotly.express as px #データ可視化ツール
```

サンプルデータを全部確認してみましょう。

```python
print(data)
```

次のような感じで出力されます。

```
{'geoda': {'airbnb': {'url': 'https://geodacenter.github.io/data-and-lab//data/airbnb.zip', 'license': 'NA', 'attribution': 'Center for Spatial Data Science, University of Chicago', 'name': 'geoda.airbnb', 'description': 'Airbnb rentals, socioeconomics, and crime in Chicago', 'geometry_type': 'Polygon', 'nrows': 77, 'ncols': 21, 'details': 'https://geodacenter.github.io/data-and-lab//airbnb/', 'hash': 'a2ab1e3f938226d287dd76cde18c00e2d3a260640dd826da7131827d9e76c824', 'filename': 'airbnb.zip'}, 'atlanta': {'url': 'https://geodacenter.github.io/data-and-lab//data/atlanta_hom.zip', 'license': 'NA', 'attribution': 'Center for Spa
```

最初にあるair bnbのデータを読み込みます。データの詳細は[リンク先](https://geodacenter.github.io/data-and-lab//airbnb/)を参照ください。次のような77行21列のデータが表示されます。

```python
bnb = gpd.read_file(get_path('geoda airbnb'))
bnb
```

![geop2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85433/57e9fa76-852f-e4c0-8623-0c41b8e8a945.png)

レイティングと犯罪数を散布図でプロットしました。

```
fig = px.scatter(bnb, x='num_crimes', y='rev_rating')
fig.show()
```

![geop3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85433/db450522-66d5-b797-1f13-2e35897d22b8.png)

次にGeoDataFrameのexploreメソッドを使って、コロプレス図を作成します。コロプレス図に使いたい列名を渡すだけです。簡単。

```
bnb.explore('rev_rating')
```
![geop.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85433/16101dc3-492f-c434-42ee-e1fae77e666d.png)

ツールチップが全部見えて嫌な場合は、引数tooltipに表示したい列名を渡せば、見たいものだけ見られます。

```
bnb.explore('rev_rating', tooltip=['response_r', 'accept_r', 'rev_rating', 'price_pp'])
```
![geop4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/85433/e674e969-a8b1-5cb9-f216-0fe695787e11.png)


## まとめ
というわけで、こんな感じで位置情報が扱えるGeoPandasがColabから簡単に使えるようになった話でした。
「車輪の再発明」と「歴史から学ぶ」を混同してませんか

<h1>はじめに</h1>
私がDirectX9で自作ライブラリを作ってる中でふと疑問に思ったので色々調べてみました。
<h1>本題</h1>
車輪の再発明と歴史から学ぶは違う意味だと思う。
車輪の再発明で良く言われるのは他の閉鎖された空間で同じものを作ってしまうというニュアンスがありますが、
これは無駄かもしれません。
しかし、道具の歴史を学ばずに道具を使って能力を100%発揮できてない人とかいませんか。
実際にwebエンジニアの業界で数年間新人を教育してますが、基礎&一からFW無しでWebアプリを作る。（webアプリの概念）をやらずにフレームワークを弄る人は大体挫折してるのを見かけます。
<h1>要するに</h1>
これを気になんでも車輪の再発明はダメと言わずに詰まったら歴史から学んでみてはどうでしょうか。
リンクの開かれ方(同窓・別窓)を判定したい


### やりたいこと
ページAからBへの遷移時、同窓で開かれたか、別窓（別タブ）で開かれたかを判定して表示内容（ボタン）を切り替えたい。

---

バージョン：Vue 3 （あんまり関係ないですが一応）
`<script setup>` 構文（ https://v3.ja.vuejs.org/api/sfc-script-setup.html ）

---

#### 遷移元のページにリンクを貼る
```html: pageA.vue
<!-- 同じ窓で開く場合 -->
<a href="URL">ページBへ</a>

<!-- 別窓で開く場合 -->
<a href="URL" target="_blank" rel="noopener noreferrer">ページBへ（別窓)</a>
```

#### ボタンのテキストを切り替えたい
```vue: pageB.vue
<!-- 同窓 -->
<button id="btn">前のページへ戻る</button>

<!-- 別窓 -->
<button id="btn">このページを閉じる</button>
```

### これで判定しよう
```javascript: js
// 直前に閲覧していたページのURLを取得
document.referrer

//ブラウザの履歴リストのURLの数を取得
window.history.length
```

https://developer.mozilla.org/ja/docs/Web/API/Document/referrer
https://developer.mozilla.org/ja/docs/Web/API/History/length

### 実際のコード
```vue: pageB.vue
<template>
    <button id="btn" @click="clickEvent" v-html="btnLabel"></button>
</template>
<script>
const clickEvent = () => {
    if(document.referrer && window.history.length > 1) {
        //同窓
        btnLabel = "前のページへ戻る";
    
        //ブラウザバック
        history.back();
    
    } else {
        //別窓
        btnLabel = "このページを閉じる";
    
        //ウィンドウを有効化して、閉じる
        window.focus();
        window.close();
    }
}

</script>
```
File not found: /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/lib/arc/libarclite_iphonesimulator.aエラーについて

# 問題発生
バグの原因調査のため、gitから二ヶ月前のコードをチェックアウトしてビルドしたところ表題のエラーが発生した。

# 原因
Xcode14.2->Xcode14.3で'libarclite_iphoenesimulator.a'が削除されたことが原因で、
Xcode14.2でビルドしていた時のコードが'libarclite_iphoenesimulator.a'に依存していたことによってエラーが発生した。

# 解決方法
Podfileのpost_installを以下のようにする
```ruby
post_install do |installer|
  installer.generated_projects.each do |project|
    project.targets.each do |target|
      target.build_configurations.each do |config|
        config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '13.0'
      end
   end
  end
 installer.pods_project.targets.each do |target|
   flutter_additional_ios_build_settings(target)
 end
end
```
## 参考
https://zenn.dev/ischca/articles/a00c3adf626ea0
C#のプログラム内にSQL文をいい感じに埋め込む

~~~SQL:SQL
SELECT 名前,ID,年齢
FROM ユーザー 
WHERE "年齢" = age or "ID" = UserID
~~~
上記のSQL文をC#内に書き込む場合は

~~~C#:C#
string sqlString = $@"SELECT 名前,ID,年齢
                   FROM ユーザー 
                   WHERE ""年齢"" = {age} or ""ID"" = {UserID}";
~~~
このように書くのが見やすくてスマートな方法だと思います。

ポイントはSQL文冒頭に使われている特殊文字`@`と`$`です。
`@`をつけると逐語的文字列（原文をそのまま解釈してくれる）として機能し、改行にも対応できるようになります。ただし、ダブルクォーテーションのみ `""` といった形で連続で書く必要があります。エスケープ文字は機能しません。

`$`をつけると文字列補完として認識し、文字列内に変数を埋め込めるようになります。変数や式は`{}`で囲みます。

また、この両方を使う場合は`$@`の順番で書きましょう。逆だとエラーになります。

https://learn.microsoft.com/ja-jp/dotnet/csharp/language-reference/tokens/verbatim

https://learn.microsoft.com/ja-jp/dotnet/csharp/language-reference/tokens/interpolated
「良いモノを作る」なんて傲慢だ！というお話。

この記事は[Qiita Engineer Festa 2023](https://qiita.com/official-campaigns/engineer-festa/2023) 参加記事です。

# はじめに
タイトルは釣りです。
釣り針大きくしましたが、あながち嘘ではありません。
いつも**自分に言い聞かせている**こと。そんなポエムを書きます。

# 「良いモノを作る」なんて傲慢だ！というお話。

## モノづくりの原体験
エンジニアとして仕事をしている人は、原体験として

* 自分が作ったモノが思い通りに動いた経験
* 自分が作ったモノが（自分を含む）誰かの役に立った経験

を持っているような気がしています。
　
「もっといろんなモノを作れるようになりたい」
「もっと良いモノを作って誰かの役に立ちたい」
　
そんな思いから、技術力を向上させるために勉強したり、実践して成功や失敗を繰り返し成長していると思います。
技術知識や経験が備わってくると自分でできることも増え、引き出しも増え、やりたいことも増えてくるはずです。

## 「良いモノを作る」は正しいのか？

これ自体は、まったく間違っているとは思っていませんし、「良いモノを作るんだ！」という熱い想い・情熱・矜持は忘れてはいけないと思っています。
良いモノを作り続けることによってのみ、原体験の延長線上にある達成感を得ることができると思っています。

## では、なぜ「良いモノを作る」なんて傲慢だ！と自分に言い聞かせているのか？

自分の限られた知識・経験の中で考える「良いモノ」が **「使う人にとって本当に良いモノなのか？」は使ってもらうまで分からない** と考えているからです。
思考に集中していると、「自分が考え抜いた良いモノは、みんなにとっても良いモノだ！」と錯覚してしまいがちです。
（いつもいつも反省の日々です。）

また、使い古された言葉ですが、変化が多く変化が早い時代です。
「自分の考えた良いモノ」が「使う人にとっても良いモノ」だったとしても、作り始めてから、こだわりを持って作り込んでいるうちに時代や状況が変わり、 **リリースするタイミングでは「良いモノ」の定義が変わっていること** もあると思っています。
だからこそ、アジャイルという考え方が生まれ、ウォーターフォールという開発の方法から、MVPという考え方のもとで細かくデリバーして仮説検証をする開発の方法へ転換していったのでは？と理解しています。

自分の掲げた「良いモノを作る」という熱い想い・情熱・矜持は、「プロフェッショナルとしてのこだわり」か「発案者としてのとらわれ」か？
そう自分に冷静に問うことで **「本当に良いモノを作る」という目的** をブラさないように心がけています。
（と言いつつ、熱くなりやすいので、いつもいつも反省の日々です。）


# 傲慢にならずに「本当に良いモノを作る」ためにはどうすればよいか？

## 「本当に良いモノ」かを決めるのは自分ではないと認識する

**作ったモノが「本当に良いものか？」を決める・判断するのは、（時に自分も含む）利用者である**と思っています。
考えても結論がでないことに対して時間を費やして「本当に良い（と思われる）モノ」を目指すよりも、一定ラインまで達したら実際に使ってもらってフィードバックを得る方が良いと考えます。
フィードバックを元に、「更に良いモノにするには？」を考えて、仮説を立て、実行していく流れです。

**「自分が良いと思うモノを作り込む」のではなく、「利用者と一緒に良いモノに育てていく」** イメージが近いです。

## 「良いモノに育てていく」ためにはどうすればいいのか？

やり方は複数あると考えています。
さらに言えば、プロジェクトの特性によってもやり方は変わってくると考えています。
とはいえ例を一つあげてみたいと思います。

私は現在、SREやDevOpsをテーマに開発組織を支援するミッションを担当しています。
SREという文脈では「オブザーバビリティ」という言葉もあり、我々の現在のチームではOODAループで「良いモノに育てていく」方法が一番あっているのではないか？と考えていたりします。

:::note info
OODAループ（ウーダループ）とは
ジョン・ボイドという方が提唱した、「**O**bserve（観察）」「**O**rient（状況判断）」「**D**ecide（意思決定）」「**A**ct（行動）」というプロセスを循環させていく考え方です。
:::

最低限のモノを作ってリリースをした上で、
* 利用状況や使われ方、ポジティブ反応・ネガティブ反応を**観察**し
* 観察結果から課題や過剰なモノは何かを**判断**し
* 改善点を考え改善方法を**意思決定**し
* 実際に対応を**行って**、改善版をリリースする

というプロセスを繰り返していくことで、「自己満足とも言える思い込みによって考え抜いた良いモノを作る」なんて傲慢な状況を回避し、使う人とともに**良いモノを育てていく**ことができればよいな〜と考えています。

# まとめ
「良いモノを作る」それ自体は間違っていないと思いますし、私自身も目指し続けたい、挑戦し続けたいと思っています。
ただ、自分の作るモノ・作りたいモノが **「本当に良いモノなのか？」** と冷静に自分に問い続け、 **「自分の考える良いモノは使う人にとっても良いモノのはずだ！」** と傲慢にならず、本来不要なとらわれにならないように気をつけていきたいと考えています。
【Microsoft Bing Chat】のあの三つのモードが消えた！？


　どうも、カーブミラーです。

　ゆうべ（2023/07/05）、
　　気付いたんですけど、
　　　Microsoft BingのChatの
　　　　あの三つのモードが
　　　　　消えました。

　・創造的に
　・バランスよく
　・厳密に
　　　というヤツです。

　おとといは、
　　まだまだ
　　　変わっていなかった
　　　　気がします。

　代わりに、
　　「GPT4」への
　　　切り替えスイッチが
　　　　用意されました。

　私、スマホアプリ版の
　　Bingなのですけど、
　　　パソコンのエッジも
　　　　変わりましたかねぇ？
***
　ちなみに、
　　GPT4にすると、
　　　以前と同じ感じに
　　　　処理が進みます。

　GPT4を切ると
　　速度が早くなりますねぇ。
　　　GPT4組み込み前の
　　　　状態なのかな？
***
　これは私感ですけど、
　　あの三つのモードに
　　　慣れてしまったためか
　　　　今回のこれは、
　　　　　改悪に感じます。

　それに
　　Microsoftから
　　　お知らせもなかった。

　変更するなら
　　金をくれ！（古）
　　　じゃなくて、
　　　　知らせて欲しいですよねぇ。

　今後、
　　どうやって、
　　　モードを変えたら、
　　　　いいんでしょうか？

　プロンプトに
　　文言を書き込む
　　　しかないですよねぇ。
　　　　なんて書き込むんでしょう？
***
　2023/07/14現在、
　　以前の形に戻っていました。

　ここで書いたのが
　　良かったのかしら？
AWSの使用はどういう時に料金がかかるのか

:::note 
目次
1. [はじめに](#はじめに)
2. [AWS料金の基本](#AWS料金の基本)
3. [EC2 (仮想サーバー)](#EC2 (仮想サーバー))
4. [S3 (オブジェクトストレージ)](#S3 (オブジェクトストレージ))
5. [RDS (リレーショナルデータベースサービス)](#RDS (リレーショナルデータベースサービス))
:::

# はじめに

インフラを構築する際にはAWSを使う機会も
多くなるのではないかと思います:point_up:

しかしながら、学習をしていく中で
AWSに触れ始めた段階だとAWSに料金が
かかることがあるのは知っていても、
具体的にどこで料金がかかるのか分からず
不安もあると思います。

ですので、AWSの料金について整理したいと思います。

- **どのサービスにお金がかかるのか**
- **具体的にどんなときにお金がかかるのか**

という視点で見ていきたいと思います:raised_hands:


# AWS料金の基本

まずAWSの料金体系についてです。

**AWSでは主に「従量課金制」が採用されています。**

これは、使用した分だけ料金が発生するというシステムで、
例えばサーバー(EC2)を1時間稼働させたら1時間分の料金、
ストレージ(S3)に1GBのデータを1ヶ月保存したら
1GB・1ヶ月分の料金が発生します。

また、AWSは「無料利用枠」を提供しています。
これは入会後12ヶ月以内の新規ユーザーが
AWSのサービスを試すことができる制度で、
一定の範囲内であれば無料で利用することができます。

ただし、**無料利用枠はサービスごとに異なります。**

サービスによっては仮想のマシンには無料利用枠があるけど、
ストレージには無料利用枠がないというように、
無料利用枠だけで0円で必ずしも利用できるわけでもないので、
注意が必要です:bow_tone2:

# EC2 (仮想サーバー)

EC2は自分だけのコンピューター（サーバー）を
クラウド上に作るサービスであり、
料金は主に次の要素によって決まります

<details><summary>インスタンスタイプ</summary>

```:
CPU、メモリ、ストレージの性能に応じて
様々なインスタンスタイプがあり、その性能によって料金が変わります。
```
</details>

<details><summary>稼働時間</summary>

```:
稼働させている時間に応じて料金が発生します
停止している時間は基本的に料金は発生しません。
```
</details>

<details><summary>ストレージ</summary>

```:
使用するストレージの種類（EBSやインスタンスストア等）と
サイズ(容量)により料金が発生します。
```
</details>

:::note 
**無償で利用する条件**
- t2.microまたはt3.microインスタンスを月間750時間以内で使用
- 複数のインスタンス使用の場合はそれらの合計時間となります
:::

:::note warn
EC2をウェブサーバーとして利用してAWS外部への
データ転送する場合には料金がかかります

ユーザーのブラウザにウェブページの
データ（HTML、CSS、JavaScript、画像など）を送信する場合などです
:::

# S3 (オブジェクトストレージ)
S3はファイルや画像などのデータを
保存するためのオンラインの保管箱のようなものとなります。
これについての料金の要素は
以下によって決まります

<details><summary>ストレージ量</summary>

```:
保存しているデータの量に対して料金が発生します。
```
</details>

<details><summary>ストレージクラス</summary>

```:
よく使うデータ、たまにしか使わないデータ、ほとんど使わないデータに対して、それぞれ適した保存場所を選べば、費用を節約できます
```
</details>

<details><summary>データ転送</summary>

```:
AWS外部へのデータ転送量により料金が発生します。
```
</details>

:::note 
**無償で利用する条件**
- ストレージを5GB以内で使用
- GETリクエストが月間20000回、PUT/COPY/POST/LISTリクエストが月間2000回以内。
:::
:::note warn
EC2と同じくユーザーのブラウザにウェブページのデータ（HTML、CSS、JavaScript、画像など）を送信する場合などでAWS外部へのデータ転送する場合には料金がかかります
:::

# RDS (リレーショナルデータベースサービス)

これは管理が簡単なオンラインの
データベースを提供するサービスです。

こちらの料金の要素は以下により決まります



:::note warn
RDSのストレージには無料利用枠がなくストレージの使用料が発生します。
ですので、インスタンス単体には無料利用枠がありますが、
サービスの利用に際して料金が発生するのは避けられません
:::


<details><summary>データベースインスタンス</summary>

```:
DBインスタンスの種類（MySQL, PostgreSQL, Oracle等）とその性能（CPU, メモリ, ストレージ）により料金が発生します。
```
</details>

<details><summary>稼働時間</summary>

```:
データベースインスタンスが稼働している時間に対して料金が発生します。
```
</details>

<details><summary>ストレージ</summary>

```:
使用するストレージの種類（汎用SSD, プロビジョンドIOPS SSD等）と
サイズにより料金が発生します。
```
</details>

<details><summary>バックアップ</summary>

```:
バックアップの保存期間や量により追加料金が発生することがあります
```
</details>

:::note 
**無料利用枠**
- db.t2.microインスタンスを月間750時間以内で使用
- 対応するデータベースエンジン（MySQL、PostgreSQL、MariaDB、Oracle BYOL、SQL Server Express edition）を使用。
:::

-----------------------

以上のようにEC2とS3は開発やテストの場面では、
無料利用枠内で無償で利用することも可能です。

料金が発生するというと、
どのくらいの請求がくるのかとかこわいですが、
自分のAWSの使用目的(学習用？サイト公開？)に沿った
利用をすれば料金を抑えることが出来ます:point_up_2:

AWSは便利で人気があるサービスなので、
使いこなせるようになりたいですね！

お疲れ様でした:relaxed:
これらは新システム必須です。(画像拡大ツール,ダウンローダー,ビデオ圧縮ツール,パフォーマンスオプティマイザ,メモリを最適化)

**Final2x - 無料でオープンソースの画像拡大ツール** 
```
https://github.com/Tohrusky/Final2x/
```

**Gopeed - 全てのプラットフォームをサポートするダウンローダー**
```
https://gopeed.com/
```

**ビデオ圧縮ツール**
```
https://handbrake.fr/
```

**オプティマイザー - Windows システム上で最も使いやすいパフォーマンスオプティマイザと言います！**
```
https://github.com/hellzerg/optimizer
```

**memreduct - 自動的にメモリを最適化・クリーニングするツール**
```
https://github.com/henrypp/memreduct
```
俺的ITエンジニア情報源を集めただけ

# 最初に
情報サイトって結構人それぞれだと思いますが、人が見ている情報サイトから発見があると思います。
私もそこそこ取捨選択したので、その共有です。
順番に意味はないです。

私の興味のバイアスもかかっているので、ロボットとかAIが中心かも？ちなみにどちらの専門家でもないです。

# twitter
言わずと知れたみんな使ってるやつ ~~(筆者は齢29にして最近情報源としての新鮮さや便利さを再確認して本格的に使い始めました・・・)~~ 
最近は一時的な規制とかなんとかあって、逆にMetaが新しいtwitterもどきをリリース予定だとか。
様子は見てもいいかもね。

https://pc.watch.impress.co.jp/docs/news/1513600.html

#私のツイートは一切ないですが、私がフォローしている人が気になる方向けで ~~(誰得？)~~ 

user_instanceってID?でやってます。

twitter.com/user_instance

# Qiita
ここやん。
7時19時で更新されるトレンドとか、登録してたら火曜日か水曜日かにもらえるメールも結構いい記事あるのよね。嫌なタイプじゃない、むしろ嬉しいメーリングサービス。

https://qiita.com/

# @IT
ITmediaという括りの一つです。
クラウド、AI、DevOps、セキュリティとか

https://atmarkit.itmedia.co.jp/

# MONOist
これもITmedia系のやつ
製造業にフォーカスしてる。
ロボットとかFAとか。

https://monoist.itmedia.co.jp/

# ログミー
最近知った。
AIとか色々。
講演のログなので話口調な文
ここではlogmiTechのみを添付。

https://logmi.jp/tech

# 金子邦彦研究室
この方が誰と聞かれてもプロフィール以上のことは知りません。
でも、3次元シミュレータの理解のところで大変お世話になりました。しかも、結構トレンドの情報も更新していていいじゃんって。
知り合いでも何でもないです。本当です。
記事として良いと思っただけです。本当です。

https://www.kkaneko.jp/

# github trend
githubっていうとどこから見たらわからないって人も多いのでは？
とりあえず目下注目の物を見てみよう

https://github.com/trending

# huggingface trend
huggingfaceは知ってるけど、どんな所か分からないって人も多いと思うので、とりあえず目下注目の物を見て、触ってみよう。
huggingfaceではdemo版であったり、dataであったりAIに特化した情報が集まるところ、みたいなイメージです。


https://huggingface.co/spaces

spaceっていうのはdemo版が触れるところです。とりあえず最新の物を触ってみると楽しくなっちゃうかも？
面白そうなdemoを紹介する記事も今後書こうと思ってます。
トレンドには残っていないけど、面白いものや、ちょっと時間が過ぎてトレンド落ちしたけどまだすごいものとかいっぱいあります。
※筆者はAIの専門家でもなんでもないです。

# メインじゃないやつ
自分はあまり使っていないけれども、自分の畑じゃなかったりするサイト。
でも、いい記事が多いことも確かで、リンクからよく飛ぶことが多い。
あとネタ枠。
## Zenn
言わずと知れたところ

https://zenn.dev/

## ナゾロジー
ネタ枠
暇にな時にでもどうぞ

https://nazology.net/

## Publickey
ほぼ見ない

https://www.publickey1.jp/

# DevelopersIO
たまに見る

https://dev.classmethod.jp/

# JSer.info
私はほぼ見ないけど、刺さる人には刺さる
javascript特化

https://jser.info/

# 未確認飛行C
ほぼ見ない。

https://ufcpp.net/

# 最後に
他に面白いサイトがあればぜひ教えて欲しいです！！
全部見ると大変なので、自分の興味や分野で取捨選択して最新情報をとらえ続けることが大事ですよ～。
ChromeのWebGLのコンテキスト数の上限を変更する

# 概要
Chromeで16を超えるWebGLコンテキストを同時に描画するためのTipsです

# 結論
Chromeの起動オプションに`max-active-webgl-contexts`を指定するとWebGLの描画コンテキストの上限を変更することができます。

## コマンドライン実行の例
以下の例は、コマンドラインでWebGLコンテキストの上限を32にする例です。
```
open -a /Applications/Google\ Chrome.app --args --max-active-webgl-contexts=32
```

## GUIで実行する
以下のサイトを参考にしながら、上記の処理をGUIから実行する方法をまとめました。

http://chrome.half-moon.org/43.html#l8d870ec

### Windowsの場合
Windowsの場合は、新規にChromeの起動ショートカットを作成し、そのリンク先の中に起動オプションを書くことでGUI実行できます。

### macOSの場合
macOSの場合は、Automatorでアプリケーションを作成し、シェル実行に前述のコマンドを登録し、ショートカットを作成することで、GUI実行ができるようになります。

# 経緯
Chromeで16を超えるWebGLコンテキストを同時に描画しようと試みたところ、`WARNING: Too many active WebGL contexts. Oldest context will be lost. `という警告が出力され、古いWebGLコンテキストがら削除されてしまいました。

[WebGLで画像を表示する際の注意点（WebGLコンテキストの最大数）](https://self-development.info/webgl%E3%81%A7%E7%94%BB%E5%83%8F%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E9%9A%9B%E3%81%AE%E6%B3%A8%E6%84%8F%E7%82%B9%EF%BC%88webgl%E3%82%B3%E3%83%B3%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AE/)

上記のサイトによると、Chromium系のブラウザ（Chromium, Chrome, Edge, etc...）のWebGLコンテキストの最大数は16に制限されており、対処方法がないかの調査に至りました。

## まとめ
Chromeに`max-active-webgl-contexts`をつけることで、WebGLコンテキストの上限を変更することができました。しかしながら、この手法は自身がコントロールできる環境でしか実行できないため、公開サービスとして活用する場合はWebGLの描画を制御する処理が必要となります。

# 参考
https://bugs.chromium.org/p/chromium/issues/detail?id=771792

https://groups.google.com/a/chromium.org/g/graphics-dev/c/fmNedEEAYpA?pli=1
スケジュールされたJobの詳細を検索する

[まとめページに戻る](https://qiita.com/Keiji_otsubo/items/60afc2a8d211b6f7d89f)
[まとめN～Z](https://qiita.com/Keiji_otsubo/items/92f92bb9f668ca9688be)



+ [データのバックアップについて:終了（日）」をいつにしたのかを調べる方法](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V000075tsUp)

スケジュール済みジョブでは申請済み/開始/次の実行スケジュール/種別しか分かりません

:::note
Jobの詳細は別のオブジェクトみたいです。

```
SELECT Id, NextFireTime , CronJobDetail.JobType FROM CronTrigger 
```
 
CronJobDetail.JobTypeの1がデータエクスポートのようです。


1—Data Export

[CronJobDetail](https://developer.salesforce.com/docs/atlas.en-us.object_reference.meta/object_reference/sforce_api_objects_cronjobdetail.htm)


弊社の環境ではレポートがたくさん登録されていました。
:::

+ [スケジュールトリガーフロー・Apexスケジュールの実行者を確認する方法](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V000079RKjj)

```
SELECT Id, CronJobDetail.Name, NextFireTime, OwnerId, CronJobDetail.JobType FROM CronTrigger WHERE OwnerId = 'XXXXXXXXXXXXXXXXXX'
```

+ [スケジュール済みにしたApexクラスの実行ユーザを変更する方法](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V000079RQb9)

:::note
スケジュールされているジョブを削除して、実行したいユーザで再度スケジュールを設定する手順みたいです。

I would do it in two steps:

1) Delete current schedule process: Setup -> Scheduled Jobs -> Search your scheduled job and delete it

2) Create scheduled job again: Log in as the user who will execute the process -> Setup -> Apex Classes -> Click on 'Schedule Apex' -> set previous values.

https://developer.salesforce.com/forums/?id=9060G0000005fUmQAI
:::

+ [更新のスケジュール済みのダッシュボード一覧に対して、終了日を一覧表示させる方法](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007LqQBfSAN)

:::note
CronTriggerオブジェクトを検索して表示できるようです。

CronJobDetail.JobTypeは3が— ダッシュボードの更新ですね。

https://developer.salesforce.com/docs/atlas.ja-jp.object_reference.meta/object_reference/sforce_api_objects_cronjobdetail.htm

```
SELECT EndTime, CronJobDetailId, CronJobDetail.Name FROM CronTrigger WHERE CronJobDetail.JobType = '3'
```

https://salesforce.stackexchange.com/questions/202241/how-to-get-the-end-date-of-a-scheduled-job-which-was-scheduled-via-system-schedu

開発者コンソールのクエリエディターを使うとSOQLを実行できます。

開発者コンソールのクエリエディター
https://help.salesforce.com/s/articleView?id=sf.code_dev_console_tab_query_editor.htm&type=5
:::
Vusual studio 2022からGit

事前にVisual StudioからGithubにログインしておいてください。

新しいプロジェクトを起こしたら

まずは、ビルド

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501860/b6e36faa-4f9e-c5cc-aac4-eca5839f391a.png)

ここをクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501860/426d660e-8153-f301-e965-23e66a74e91e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501860/31fca523-b3d5-e5da-05d2-f27f120df420.png)

Gitのペインを開く

公式はここから

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501860/54816667-60c5-13b8-132c-fd3d32330798.png)

https://learn.microsoft.com/ja-jp/visualstudio/version-control/?view=vs-2022&wt.mc_id=visualstudio_inproduct_vshelplinks



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501860/7a9ae774-5dde-f0b2-bc79-0146735cc00a.png)



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501860/a5fb2ae4-2009-90cb-bbb5-dc18f3c25ced.png)

ここをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501860/6ef62270-20a7-1a35-cec1-175c39704299.png)

ここをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501860/4b22e131-2e01-89ac-d70c-b9f49d71052c.png)

ここから、自分のGithubへ飛べます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501860/3f39402c-4852-e96d-d09b-875221f6703e.png)

最初のコミット

コミットの前に、既定の .gitignoreは消しておきましょう。

すると、こんなかんじです

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501860/9ac3b705-499c-aa1a-db67-5dcbeba6fac1.png)

このあたりを右クリックから

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501860/fedf0dd2-6fe5-0f89-ad83-c24d39f5f5f4.png)

これらのローカル項目を無視、に指定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501860/b55d3a4c-6381-ab4c-70bf-d5df4c3d02bb.png)


.gitignoreが新しくできてます
開いて少し手直し

```
################################################################################
# この .gitignore ファイルは Microsoft(R) Visual Studio によって自動的に作成されました。
################################################################################

/.vs/ConsoleApp12
/ConsoleApp12/obj/Debug/net6.0
/ConsoleApp12/obj
```
これを

```
################################################################################
# この .gitignore ファイルは Microsoft(R) Visual Studio によって自動的に作成されました。
################################################################################

/.vs/
/ConsoleApp12/bin
/ConsoleApp12/obj
```


すると

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/501860/2fa4916a-e02e-86ec-12a9-db1fb6f473dc.png)

こんな感じなので、ステージング中をコミットしてプッシュします。
'Test '+i のようにスペースを追加しないと合格しない


解答例として

:::note
Please find below a little fix for your issue.

The problem was the space between Test and the number you had : Test0, Test1.... and what was necessary was Test 0, Test 1,

```
public class StringArrayTest {
    
    public static List<String> generateStringArray(Integer n)
    {
        List<String> myArray = new List<String>();
        for(Integer i=0;i<n;i++)
        {
           myArray.add('Test '+i);
           System.debug(myArray[i]);
        }
        return myArray;
    }
```

https://developer.salesforce.com/forums/?id=906F0000000AvPBIA0
:::

+ [Executing the 'generateStringArray' method failed. Either the method does not exist, is not static, or does not return the proper number of string](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007XIZ25SAH)

+ [Why am I facing this issue](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V000077BmZm)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/5cbc15b0-f309-8436-417d-321ec4ed2415.png)


:::note
Please add ';' at the end of the code.

```
StringArrayTest.generateStringArray(3);
```
:::


+ [I DONT UNDERTAND HOW RESOLVE THIS POINT](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007ajBO5SAM)

```
List<String> stList = StringArrayTest.generateStringArray(3);
```
DataRaptor



+ [DataRaptor 変換: 数値を通貨に変換する](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007Ji8OkSAJ)

:::note
マッピングの実行中に、出力データ型として通貨を選択できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/26a830a8-c64c-cdbc-9851-c4f1edc46241.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/06b47e9a-2504-cfbc-6dca-e80ce7f4c760.png)
:::

#  {"DATARAPTOR":[],"INTEGRATION_PROCEDURE":["IPA","IPB","IPC"],"OMNISCRIPT":[]}". 

+ [omniscript metadata deploy failed due to Couldn’t find dependent components](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000JgJFd)

:::note
please inactive IPs and activate them again, and then try to deploy Omniscripts. Please let me know if it works.
:::


# 未解決

+ [SPLIT function in Dataraptor Formula](https://trailhead.salesforce.com/trailblazer-community/feed/0D54S00000JeiXwSAJ)
+ [DataRaptor のロードの失敗/取り消し](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007JiEAj)
TerraformでAWS Provider Versionが低くて困った話

## この記事は何？
Terraformでコード管理しているAWS環境にて、Aurora Serverlessのリソースを追加作成しようとした際に遭遇したエラーとその対応メモ。

## Terraform環境
```terminal
$ terraform --version
Terraform v0.12.29
+ provider.aws v3.37.0
```

## 経緯
AuroraServerlessのコーディング後、planはOKだったため、問題ないと思ったが、applyするとエラーに遭遇した。serverlessv2_scaling_configurationはサポートされていないとのこと。

```terminal
│ Error: Unsupported block type
│ 
│   on rds.tf line 115, in resource "aws_rds_cluster" "serverless-stg-db-cluster":
│  115:   serverlessv2_scaling_configuration {
│ 
│ Blocks of type "serverlessv2_scaling_configuration" are not expected here.
```
確認するとserverlessv2_scaling_configurationは、AWS Provider4.12.0から追加されたリソースタイプのため、現在のAWS Providerのv3.37.0では実行できないことが判明した。
> 4.12.0 (April 28, 2022)
>ENHANCEMENTS:
>resource/aws_rds_cluster: Add serverlessv2_scaling_configuration argument to support Aurora Serverless v2 (#24363)

https://github.com/hashicorp/terraform-provider-aws/blob/release/4.x/CHANGELOG.md#:~:text=serverlessv2_scaling_configuration


公式ドキュメントでもv3.37.0にはserverlessv2_scaling_configurationのリソースタイプが存在しないので、エラーになるのは必然でした。。
https://registry.terraform.io/providers/hashicorp/aws/3.37.0/docs/resources/rds_cluster

## 対応
AWS Providerのバージョン変更
```diff_terraform
provider "aws" {
- version = "~> 3.37.0"
+ version = "~> 4.12.0"
}
```

バージョンアップを適用させようとするも、今度はv4.12.0のプラグインがないと怒れられる。
```terminal
$ terraform init -upgrade
Initializing provider plugins...
- Checking for available provider plugins...

No provider "aws" plugins meet the constraint "~> 4.12.0".

The version constraint is derived from the "version" argument within the
provider "aws" block in configuration. Child modules may also apply
provider version constraints. To view the provider versions requested by each
module in the current configuration, run "terraform providers".

To proceed, the version constraints for this provider must be relaxed by
either adjusting or removing the "version" argument in the provider blocks
throughout the configuration.
```
terraformのv0.12.29との互換性が影響しているのかと思い、v0.12.31にアップグレードさせるとProvider Versionをv4.12.1にアップグレードできた。

```terminal
$ terraform --version
Terraform v0.12.31
+ provider.aws v4.12.1
```
applyが実行されエラー解消、Aurora Serverlessのリソースも無事作成できた。
## 最後に
terraformやAWS Providerのバージョンが低いことで、AWSのリソース作成のエラーになることが経験できた。
公式ドキュメントで、サポートされているリソースタイプか事前に確認することと、planが通っても安心してはいけないことを学んだ。
['ubuntu.exe' の起動時にエラー 2147944320 (0x80070780) が発生しました] のエラーの解決方法

最近Windows11のPCを新しく買ったのですが、WSL2を入れてdockerも入れたタイミングから、Ubuntuが表題のエラー文を表示して動かなくなったり、Windows自体も設定画面が開かなくなったり、Windowsのボタンを押してもうんともすんとも言わない状態になってしまいました。

結論としては、このような症状になった時には、TerminalのアプリケーションのデフォルトのプロファイルがWSLになっていることが原因のようでした。

細かい原因はわかっていないのですが、Windowsが立ち上がるタイミングでWSL2の起動ファイルの場所を見つけられないせいっぽいです(?)

そのため、上記のようなエラーが出た時には、TerminalのデフォルトプロファイルをCMDなどに変更してから再起動してみるとよさそうです。
three.jsでanimation system その10

# 概要
three.jsでanimation systemを、理解したかった。
練習問題、やってみた。

# 練習問題
vrmの表情を決めよ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/62e2bcf0-f4de-a6ea-e2b3-fd0e220942b9.png)


# サンプルコード

```


let currentVrm = null;
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(25, 500 / 400, 0.1, 1000)
camera.position.set(0, 1.3, -1.9)
camera.rotation.set(0, Math.PI, 0)
const renderer = new THREE.WebGLRenderer()
renderer.setSize(500, 400)
document.body.appendChild(renderer.domElement)
const directionalLight = new THREE.DirectionalLight('#ffffff', 1)
directionalLight.position.set(1, 1, 1)
scene.add(directionalLight)
const loader = new THREE.GLTFLoader();
loader.load('https://drumath2237.github.io/three-vrm-test/models/undefined-chan-toon.vrm',
	(gltf) => {
		THREE.VRM.from(gltf).then((vrm) => {
			currentVrm = vrm;
			scene.add(vrm.scene);
			const i = Math.random();
		  if (i < 0.7)
			{
				vrm.blendShapeProxy.setValue(THREE.VRMSchema.BlendShapePresetName.Joy, 1.0);
				//vrm.blendShapeProxy.setValue(THREE.VRMSchema.BlendShapePresetName.Blink, 1.0)
				//vrm.blendShapeProxy.setValue(VRMSchema.BlendShapePresetName.A, 0.95)
				//vrm.blendShapeProxy.setValue(VRMSchema.BlendShapePresetName.I, 0.85)
				//vrm.blendShapeProxy.setValue(VRMSchema.BlendShapePresetName.A, 0.95)
				//vrm.blendShapeProxy.setValue(VRMSchema.BlendShapePresetName.Fun, 1.0);
				//vrm.blendShapeProxy.setValue(VRMSchema.BlendShapePresetName.Sorrow, 1.0);
			}
			vrm.blendShapeProxy.update();
		});
	},
	(progress) => console.log('Loading model...', 100.0 * (progress.loaded / progress.total), '%'),
	(error) => console.error(error)
)
function tick() {
	requestAnimationFrame(tick)
	renderer.render(scene, camera)
}
tick()


```

# 成果物

https://embed.plnkr.co/plunk/gR0NdNjjN4BIcEsR


以上。
three.jsでanimation system その9

# 概要
three.jsでanimation systemを、理解したかった。
練習問題、やってみた。

# 練習問題
vrmのポーズを決めよ。

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/9984e886-05e4-563d-ac41-5d27c8473e53.png)


# サンプルコード


```

let currentVrm = null;
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(45, 500 / 400, 0.1, 1000)
camera.position.set(0, 1.2, -1.9)
camera.rotation.set(0, Math.PI, 0)
const renderer = new THREE.WebGLRenderer()
renderer.setSize(500, 400)
document.body.appendChild(renderer.domElement)
const directionalLight = new THREE.DirectionalLight('#ffffff', 1)
directionalLight.position.set(1, 1, 1)
scene.add(directionalLight)
const loader = new THREE.GLTFLoader();
loader.load('https://drumath2237.github.io/three-vrm-test/models/undefined-chan-toon.vrm',
	(gltf) => {
		THREE.VRM.from(gltf).then((vrm) => {
			currentVrm = vrm;
			scene.add(vrm.scene);
			const pose = {	
				hips: {
					rotation: [0.0, -0.454, 0.0, 0.891]
				},
			};
			vrm.humanoid.setPose(pose);
		});
	},
	(progress) => console.log('Loading model...', 100.0 * (progress.loaded / progress.total), '%'),
	(error) => console.error(error)
)
function tick() {
	requestAnimationFrame(tick)
	renderer.render(scene, camera)
}
tick()


```

# 成果物

https://embed.plnkr.co/plunk/DEnoWXJ5Qm8nZr1N


以上。
Docker版rsyslogのtimezoneをJSTに

## 環境
+ ホストOS: Ubuntu 20.04 LTS
+ Docker: 24.0.2
+ rsyslog: 8.36.0([rsyslog/syslog_appliance_alpine](https://hub.docker.com/r/rsyslog/syslog_appliance_alpine))

## 要約
`rsyslog/syslog_appliance_alpine`のtimezoneをUTCからJSTに変更する際の要点は以下の3つ。
1. `/etc/localtime`にJSTの情報を持つファイルを設定する。(ホストの`/usr/share/zoneinfo/Asia/Tokyo`を流用するのが簡便。) 
2. `/config/container_config`内の`export TZ=UTC`を`export TZ=/etc/localtime`にする。
3. コンテナの設定で環境変数`TZ`に`JST`を指定しても無意味。

## 動機
1. rsyslogで収集したログファイルのオーナーを一般ユーザーにしようとしたら`/etc/rsyslog.conf`の設定でrsyslogの動作権限を変更しないといけないことが判明[^1]。
1. ホストで動作するrsyslogに特権を与えるのはセキュリティ的にどうかと考え、docker化を決意。[rsyslog](https://www.rsyslog.com/)公式の`rsyslog/syslog_appliance_alpine`をベースに構成。
1. TimezoneがUTCで固定されていることが判明。JSTにしたいと思った。

## 試して失敗したこと
### コンテナの環境変数設定
[コンテナのGitHubページ](https://github.com/rsyslog/rsyslog-docker/tree/master/appliance/alpine)に環境変数`TZ`を設定すると書いてあったので、他のdockerイメージのように環境変数`TZ`に`JST`を設定してみた。

`date`コマンドの出力はtimezone部分がUTCからJSTに変化したが、時刻自体はUTC時刻のままだった。この状態でもログのタイムスタンプには`+00:00`で記録される。

### tzdataのインストール
`rsyslog/syslog_appliance_alpine`には`tzdata`が入っていないので、上記環境下で`tzdata`を追加インストールしたが解決しなかった。
`TZ`に`Asia/Tokyo`や`Japan`を設定しても解決せず。

### /etc/localtimeを設定
[Alpine Linux でタイムゾーンを変更する](https://qiita.com/dtan4/items/8359e389b95cbc60952d)に書かれている方法を試したところ、`date`コマンドの出力は日本時間になった。
しかし、ログに書き込まれる時刻はUTCのままであった。

## 解決法
1\. [このページ](https://github.com/rsyslog/rsyslog/issues/2054#issuecomment-358644564)に記載されているが、`TZ`に`/etc/localtime`を設定する。ただし、Dockerfileなどでの環境変数設定は無意味で、コンテナから`/config/container_config`を一旦コピーしてきて、
```
export TZ=UTC
```
となっている行を、
```
export TZ=/etc/localtime
```
に変更し、改めて`/config/container_config`に配置するよう設定する。

2\. [Alpine Linux でタイムゾーンを変更する](https://qiita.com/dtan4/items/8359e389b95cbc60952d)に書かれている方法でもいいのだが、(やや邪道になるが)ホストOSの`/usr/share/zoneinfo/Asia/Tokyo`がコンテナの`/etc/localtime`に来るようにvolumeを設定しても機能する。

3\. コンテナをbuildする。 

## 動作確認
ホストのtimezoneファイルを流用する方法でコンテナを構成したところ、`date`コマンドの表示が日本時間で表示され、ログに記録される時刻も`(日本時間)+09:00`になった。

## 考察
コンテナイメージの最終更新が5年前と表示されていたり、[非公式コンテナのGitHubページ](https://github.com/JPvRiel/docker-rsyslog/blob/master/README.md)にはrsyslogにバグがある(から非公式コンテナを作った)ような書き方をしていたため、rsysylog公式イメージは古いバグがそのままになっているのかなという印象を受けて、修正できない問題と思い込むところだった。

## おまけ
`rsyslog/syslog_appliance_alpine`については起動してみたという記述くらいしか見かけないので、実際に使用する方法について書いておくと、ホストOSと違って`/etc/rsyslog.conf`に`$IncludeConfig /etc/rsyslog.d/*.conf`がないので、フォルダにファイルを放り込む方法は使えない。一方で、
```
include(file="/config/droprules.conf" mode="optional")  # this permits the user to easily drop unwanted messages
```
という行があり、`/config/droprules.conf`のオリジナルはコメント行だけなので、このファイルを`/etc/rsyslog.d/*.conf`に入れるような内容にしても(本来の使い方からは外れているかもしれないが)動作する。

ちなみに、ここでフィルタリングされないログは`/logs/hosts/<ホスト名>/messages.log`に格納される。

`514:514/UDP`と書くところを`514:514`と書いてTCPしかポート開放されておらずハマったのはナイショ。

## 愚痴
投稿するのボタンの仕様が右下で下書きと投稿を切り替える方式から、「右下にある」[公開設定]のボタンを押した後に「切り替わったキャンペーンの選択をする画面で」「右上にある」ボタンを押す方法に変わっていて、投稿が1日遅れた。
「公開設定」のボタンを押す前の画面の「右上にある」[投稿する]ボタンはドロップダウンメニューで、投稿する機能がないので余計に気づきにくかった。
投稿方法の説明などの記述は変わっていなかったので分からず、もう少しで不具合報告を書くところだった。

## 改訂履歴(表現の修正などは除く)
+ 2023/3/1: 失敗してしばらく封印
+ 2023/7/5: 初版
+ 2023/7/6: 投稿。少し愚痴る。

[^1]: logrotateを使えばできると思うが、今回はrsyslogの設定でオーナー・アクセス権の変更と保存形式の指定を一本化したかった。
（メモ）法務省登記所備付地図データ(GeoJSON又はSHP形式)をベクトルタイルにする（gdalとtippecanoe）

# はじめに
## 動機
法務省登記所備付地図データをウェブ地図で見るためにベクトルタイルにしたかったのでやり方をメモしておきます。

G空間情報センターから自分でダウンロードしたデータ（GeoJSON又はSHP形式）をベクトルタイルに変換しました。

## 環境
* Raspberry Pi 400 （ベクトルタイル変換ツールtippecanoeが私のWindows PCで上手く使えないため）
  * Raspberry Pi OS
  * unvt/equinox をインストール済み （こちらご参照ください → https://github.com/unvt/equinox ）

# 手順
## データダウンロード
G空間情報センターからGeoJSON形式かshapeファイル形式のデータをダウンロードしてきます。このフォーマットは公共座標系のものしかありませんので注意しましょう。
ここからダウンロードしてくるデータは緯度経度で座標が格納されているので後続の処理も簡単になります。（投影変換については考えなくてよい。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/679143/0035d46d-d274-f458-1d9b-952678e39884.png)

保存してきたデータを作業フォルダに入れます。**0_src** というフォルダに入れておきます。

## コマンド実行
bashで以下のコマンドを走らせます。以下はGeoJSONファイルを使っている例ですが、シェープファイルの場合は最初のgeojsonをshpにします。

＜説明＞
gdal(ogr2ogr)を使って、0_srcに入れたファイルをGeoJSON Sequenceとして標準出力する。
それをパイプでベクトルタイル変換ツールtippecanoeに渡している。

```bash
for f in 0_src/*geojson; do ogr2ogr -f GeoJSONSeq -lco RS=YES /vsistdout/ ${f};done | tippecanoe -o output.pmtiles -Z10 -z15 --no-feature-limit --no-tile-size-limit -l fude
```
すると、output.pmtilesというファイルが出来てきます。
* zxy形式でほしい場合は-oオプションを-eにしte.pmtilesをとりましょう。zxyのときは--no-tile-compressionオプションもつけましょう。
* ズームレベルは-Z10と-z15を変更すると調整できます。（今は10-15）
* レイヤ名はfudeというレイヤです。
* 私は数個のファイル出試しましたが、入力ファイルが多いときは処理が重くなるので工夫が必要かもしれません。
* ソースフォルダに入れたデータの座標値は緯度経度で格納されています。座標が違うデータが入っていると上手くいきませんので気をつけましょう（別途処理が必要）。


# まとめ
法務省登記所備付地図データをベクトルタイルにする方法をメモしました。結構すぐに変換出来るので便利です。
GeoJSONで50MB近いデータで試したのですが、ベクトルタイルにする10MB以下でした。

# おまけ
テンプレートも作りました
https://github.com/ubukawa/fude-template

# 参考ページ
https://front.geospatial.jp/

https://qiita.com/hfu/items/8792cf354faebf9b0efb
ウインドウのスナップを用いて整列した際にウインドウ一覧を表示しないように設定する

# はじめに
- ウインドウのスナップを使用して整列した際に表示されるウインドウ一覧（キャプチャの赤枠の部分）を非表示にします
- ウインドウのスナップはショートカットキー「Windowsキー」＋「右矢印」or「左矢印」にて実施できます
- Windows 10 Pro（22H2）で確認しています
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39684/f0316e66-0f7b-6376-f235-443c69586a6c.png)

# 設定方法
1. スタートメニュー「設定」→「システム」を開く
1. サイドメニューより「マルチタスク」を選択
1. 「ウインドウをスナップしたときに横に配置できるものを表示する」のチェックボックスを外す
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/39684/d57c9706-265d-5c99-b0f2-13bd425497fe.png)

以上です。
変数宣言を半自動的に作成するツールを作成してみました。

タイトルの通り、変数宣言を半自動的に作成してくれるツールを作成してみました。

# ◆ 背景
現場で仕事をしている際、たまに似たような変数定義を大量に作成しなければいけない時がありました。
その時、

>・「コピペした後違うところ消したりするのめんどくさい...」
>・「英語調べて自分でキャメルケースにしたりケバブケースにするのめんどくさい...」

といっためんどくさい作業が多発したので、
簡単に作れるようにできないかなと思い、作成しました。

<br>
<br>

# ◆ 完成品

**画像**

![スクリーンショット 2023-07-06 0.30.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754263/440819a2-eea2-4be9-122b-e5b5666cd595.png)

<br>

**リンク**

https://fb7f239e.vdag.pages.dev/

<br>
<br>

サイト名は`VDAG`です。

`Variable Definition Automatic Generation　（変数　定義　自動　生成）`

を直訳英語にして頭文字をとっただけの安直なネーミングです。
![スクリーンショット 2023-07-06 0.43.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754263/84b9b680-edec-16f8-9e4b-9f062e0bfe3b.png)

（直訳英語もあってるのか微妙です...）

# ◆ 使用言語

`Vue.js`のみです。
使用した理由は現場がVueしているので、練習がてら使用しました。

<br>
<br>

GitHubにソースは上げています。

<br>
<br>

https://github.com/TaikiWakabayashi/VDAG

<br>
<br>

サーバーは`CloudFire pages`を使用しました。
理由は無料でやれることが多いからです。

<br>
<br>

https://zenn.dev/catnose99/scraps/6780379210136f


# ◆ 使い方

## ①使用したい設定を選択

![スクリーンショット 2023-07-06 0.46.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754263/cb180cad-5e27-0170-16f1-a1046c220c5d.png)


<br>

設定の中から利用したいものを選び、`追加`ボタンをクリックしてください。

<br>
<br>

# ◆ 並び替え

選択したものが`追加リスト枠`に表示されます。
ドラッグアンドドロップで並び替えができるので、出力したい順番で並び替えてください。

![スクリーンショット 2023-07-06 0.48.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754263/4a1e9453-3d1e-9f69-35d5-172063b00f92.png)

<br>
<br>

# ◆ 変数名設定

![スクリーンショット 2023-07-06 0.50.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754263/62623c44-5f9e-592b-d2a7-8d389ef56a51.png)

好きな変数名をテキストボックス欄に入力し、`追加`ボタンを押して追加してください。

追加した変数名は後から編集・削除が可能です。

このあと最後に命名規則の設定（キャメルケース・ケバブケースなど）がありますので、
<font color="orange">反映させたい場合は、変数名をスペース区切りで設定してください。</font>

# ◆ 命名規則 + 完成

最後に命名規則を設定し、`生成`ボタンをクリックしてもらえれば完成です。
コピペして利用してください。

![スクリーンショット 2023-07-06 0.55.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754263/58c29c05-f72b-b442-aa6b-fda1f33802cd.png)

<br>
<br>

# ◆補足

# 型の選択について

## ◆ 型を配列にしたいとき

![スクリーンショット 2023-07-06 0.58.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/754263/599b22cc-89f4-6633-d04d-6994ed6c1201.png)

利用したい型を選択した後、`配列`にチェックを入れてもらえれば、
追加時に`[]`をつけて出力します。

<br>
<br>

## ◆ 型（カスタム）について
入力制限のない<font color="red">なんでもあり</font>のテキストボックスになります。
お好きな値を記入いただいて大丈夫です。

<br>
<br>

## ◆ $付けについて
$付けも特にバリデーション等は設けていないので、つけようと思えば他のどの設定を追加していても付けられます。

ただ`$`は変数宣言では`PHP`くらいしか利用する機会がないと思いますので、$を使う時は他の設定は不要だろうと思い敢えて特に何もしませんでした。

<br>
<br>

# 最後に

使う機会は正直限られるかなとは思いますが、宜しければ使ってみてください！

簡単な作りのものですが、
誰かの`「めんどくさい」`が解消されればいいなと思っております！💦
Mac + GoogleChrome – Webサイトで異様に文字入力やドラッグ・コピー・ペーストが遅い理由は 英字IMEだったっぽい 

# 追記

最終的にはこちらで解決した

# Mac のキーボードで 英数キーを押した時に Google 日本語入力 ( Google IME ) の英数を使うようにする

https://qiita.com/YumaInaura/items/87db2897ba3886f8a9fa

以下は変換学習をリセットして対策した時のログ


# 例

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89618/34ff2023-f004-2ca4-7821-4a163dde80cb.png)

# 問題

何が原因か分からないがとにかく遅い。
たまに文字入力中に1分ぐらい画面が固まることさえある。

いろいろ試しているとMac標準のIMEを使っている時は激しく遅く、Google日本語入力だと速いことに気づいた。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89618/1b3a64dd-f8ea-1892-72a1-494d9c757ae9.png)



# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ
品名を入れるだけ！商品内容がすぐにその場でわかっちゃう！初心者が作るLINE Bot！

# 40秒で支度しな！
**私は小売店の店員**なのですが、自身の周りで
**「あれ…そういえばこの商品ってどんな特徴だっけ…？？」**
と案内に時間がかかっているうちにお客さんが帰ってしまうという事態に…。
**なるべくお客さんの時間を奪わずに、従業員のみんなの不安も解消したい！**
そんな事態を減らすために今回のLINE Botを作りました。

# 3分間待ってやる！（完成したもの）

https://twitter.com/BonVoyagi1999/status/1676592249759576066

# 使用ツール
:::note info
1. LINE Developers（LINEとサービスの連携ができます）
2. LINE Official Account Manager（LINEの各種設定ができます）
3. Make（旧Integromat。アプリを連携できるノーコードツールです）
4. Google Spread Sheets（インターネットを介する共有Excelです）
:::

参考にさせていただいた記事
* のびすけさん（LINE DevelopersとLINE Official Account Managerの作り方）

https://qiita.com/n0bisuke/items/ceaa09ef8898bee8369d

* かわださん（Makeのシナリオ関連）

https://qiita.com/takeshijranpb/items/54f58ee6636055c69028

# 使い方と使用想定シーン
商品名をLINEに入力すると、
**事前に紐づけした文章を返信してくれる**という機能になります。
例：入力➡まくら（知りたい商品名）
　　返信➡自然に立った姿勢をそのまま横になって～～（商品説明）

お客さんに声をかけられた後に不安であれば、
**バックヤードで素早く確認してお客さんにご説明する**
という使用想定をしております。

# 読める！読めるぞ！（作り方）
**Makeのシナリオ**がこちらです。
![Makeシナリオ画像](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/0d71388f-328c-48d3-1d9d-8d726f1385b4.png)

<details>
<summary>👈長いのでシナリオやモジュールデータの詳細は

　　　こちらをクリックください。折りたたんでおります。</summary>

Google Spread Sheetsのデータがこちらです。
![Google Spread Sheetsのデータ画像](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/4971036f-bd14-43d0-1b0d-d8e8687196dd.png)


Makeのモジュール内のデータがこちらです。
まずGoogle Spread Sheetsのモジュールデータです。
![Makeのモジュール内のデータ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/c40712d4-0143-1a93-975b-3a08a7783061.png)

LINEの返信モジュールがこちらです。
こちらは事前に登録した商品名が入力された場合の返信モジュールです。
![LINEの返信モジュール　登録済み](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/6cf2c396-e986-2da9-2ed4-e3948e86ef11.png)

こちらは登録外の商品名が入力された場合の返信モジュールです。
![LINEの返信モジュール　登録外](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3458545/66c31098-00fe-d330-b01e-ecc6d3311de3.png)

</details>

# 今後の課題
:::note warn
Makeのシナリオに不備があるのか、
LINEに商品名を入力した際に安定動作しない場合や、
登録外商品名を入力した際の返信文章が表示されない場合や、
商品説明の文章量が多いと返信が表示されないことがあり、
文章量に制限があるのかもしれません。
:::

# これから
入力したキーワードに対して設定した文章を返信してくれる機能は
割といろいろなケースに応用が利くと思いました。
はじめて作成したのですが、動作は不安定な部分があるものの
満足感がありました！わーい！~~アプリ制作は私にお任せください！~~

できるかどうかはさておき、
作れたらなーという案は15個ほど妄想できたので、
自分のレベルを上げて再戦したいと思います！
CORSってなんだっけ…？

※随時アップデート予定

# CORSとは
CORS(オリジン間リソース共有)とは、
`異なるオリジン間で通信をする`際に`通信元が許可されている相手であれば`通信を可能にする仕組み

オリジン：プロトコル + ドメイン + ポート番号 
例: https(プロトコル)://yahoo.co.jp(ドメイン):443(ポート番号)

下記パターンでの通信は制約が入り、通信ができない。
- ローカルファイル(file://)プロトコル
- 許可されていない別オリジンへの通信

# エラーパターン

## ローカルのHTMLファイルから読み込みでエラー
```
Access to script at 'ファイルパス' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
```

## なぜ起こる？
エラーメッセージを和訳
```
オリジン「null」から「ファイルパス」のスクリプトへのアクセスは、CORS ポリシーによってブロックされました: クロスオリジンリクエストは、プロトコル スキーム: http、data、isolation-app、chrome-extension、chrome、https、chrome-untrusted でのみサポートされます。
```
ローカルファイルにアクセスする(file://)プロトコルから別オリジンリソースへのアクセスは禁止されてる
プロトコル スキーム: http、data、isolation-app、chrome-extension、chrome、https、chrome-untrusted
上記がCORSで通信許可されるプロトコル。
なので通信するならローカルサーバを立ててHTTPで接続する必要あり。

# 参考
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

https://qiita.com/att55/items/2154a8aad8bf1409db2b

https://zenn.dev/syo_yamamoto/articles/445ce152f05b02
SlackにGithub Actionsのステータスを通知する 通知内容をちょっとだけ変更

# 概要

- 下記の記事でActionsの結果をSlackに通知する機能を作ったが、若干結果がわかりにくい、成功したらチェックマーク、成功以外の時は赤いバツ印を表示したい

https://qiita.com/miriwo/items/d0d6a2058d07e773d3e2

# 方法

- ワークフローファイルを下記のように変更する。（これは三項演算子を用いた記載方法）

    ```yaml
    name: 'do PHP-CS-Fixer'
    
    on:
      pull_request:
        types: [opened, reopened, synchronize]
      
    jobs:
      do_php-cs-fixer:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v3
          - name: init
            run: make use_actions_init
          - name: lint-check
            run: make use_actions_lint_all_fix_plan
          - name: Notify Slack
            if: always()
            uses: rtCamp/action-slack-notify@v2
            env:
              SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK_URL }}
              SLACK_COLOR: ${{ job.status }}
              SLACK_MESSAGE: "do PHP-CS-Fixer ${{ (job.status == 'success') && ':white_check_mark:' || ':x:' }}"
              SLACK_USERNAME: Github Actions
              SLACK_ICON_EMOJI: ':eyes:'
    ```

https://docs.github.com/ja/actions/learn-github-actions/expressions#example

![Cursor_と_式_-_GitHub_Docs.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/978274e6-ca98-1edf-3d95-400fb243323c.png)

- actionsのyamlの三項演算子は下記のようなルールらしい。

    ```yaml
    ${{ (式　true or false) && trueの場合の処理 || falseの場合の処理 }}
    ```

- ちなみにPHPの三項演算子はこんな感じ。

    ```php
    (式 true or false) ? trueの場合の処理 : falseの場合の処理;

- 下記のように通知される。

    ![Cursor_と_02_notice_git_hub_actions_-_DokuPro_-_1_個の新しいアイテム_-_Slack.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/7c35e70e-9d43-85fc-b8a6-b7eae0e5bd6a.png)


# 参考文献

https://github.com/scotch-io/All-Github-Emoji-Icons/tree/master

https://docs.github.com/ja/actions/learn-github-actions/expressions

https://docs.github.com/ja/actions/learn-github-actions/contexts#job-context

https://docs.github.com/ja/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idif
巷で噂のオシャンQRコード作ってみた

# はじめに
最近 Twitter や ブログ でおしゃれなQRコードを作成している人をよく目にしますね。
こういうやつです。
![F0Q8vO1agAAwryi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982074/3d13abed-1610-f37e-5cfe-89c9b4ec478f.png)
なんかよくわかんないけどいい:sunglasses:！！！

どうも調べてみると、 <font color="red">**STOCKIMG.AI**</font>  というツールで、AIがプロンプトに応じた画像を生成し、かっこいい感じのQRコードにしてくれるそうです。
**※最初の一回だけ無料です**


最近のAIブームに大きく乗り遅れている私ですが、興味のあるところから試してみようってことでやってみました。

# 作成方法

## (1) STOCKIMG.AI へアクセス
https://stockimg.ai/qrcode/ にアクセスします。
もしくは、上のお寺っぽい画像のQRコードからもいけます。

## (2) Prompt を入力します
QRコードに含めたい画像を英語で入力します。

例) space, dynamic lighting and cinematic shot, hyper detailed, 
Unreal Engine, fantasy art, matte painting, HD

## (3) Content を入力します
スキャンされた時に飛びたいリンクを入力します
例） https://stockimg.ai
![スクリーンショット 2023-07-05 23.19.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982074/c3b3bdf5-e1a1-d4f6-ca22-18324638b026.png)

## (4) QRコードを生成します
- Generate をクリック
- Export をクリックして、画像をダウンロード

作成手順は以上です。

# サンプル
では、試しに生成してみましょう。
やはり、ここは私の好きな **柴犬** をQRコードに出現させてみます。

パッと思いついた以下のプロンプトを入力して、Generate します。
```
Japanese dog, shiba
```

![スクリーンショット 2023-07-05 23.42.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982074/5d715cc4-6a47-3ba6-b70f-a9cc4a40ac2c.png)

あれ・・・？ キミ何犬？？

# まとめ
- QRコードどうしても欲しい時に、一撃で試してみる価値はある
- 2回目以降はお金払いましょう
- 私のようにプロンプトを入力する人間がしょぼいとイメージ通りの画像ができない可能性もある