OmniAICreator/Qiita-1.07M huggingface dataset:
Raspberry Pi Google Spreadsheet連携

## Raspberry Pi & Google Spreasheet 連携
### Raspberry Pi 4 Model B について
<p>Distributor ID: Raspbian <br />
Description: Raspbian GNU/Linux 12 (bookworm) <br/>
Release: 12<br />
Codename: bookworm</p>

### SpreadsheetとGoogle Apps Scriptの構築
1. Spreadsheet作成後、拡張機能 > Apps Script選択
![スクリーンショット 2024-09-05 075403.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676163/dc3e4116-31f9-49d3-e323-7aedf8ed7b2b.png)

2. 作成したSpreadsheetのIDをコピー
下記画像では~~~/d/ここがシートID/edit?gid=0~
![スクリーンショット 2024-09-05 075537.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676163/1eb90ce5-6cbe-e711-01ea-201a52f659c4.png)

3. Apps Scriptタブからプロジェクトの設定タブを選択
![スクリーンショット 2024-09-05 075649.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676163/1af5c5ee-63c3-c4b6-de92-424c32a0e1fb.png)

4. スクリプトプロパティに「プロパティ（変数名）」と「値（シートID）」を貼り付けし保存
![スクリーンショット 2024-09-05 075849.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3676163/0cc97aed-3f38-0b15-90b4-911c384b6736.png)


Google Apps Scriptコード
```javascript
function doPost(e) {
  try {
    // POSTリクエストペイロードをJSONとして解析
    var data = JSON.parse(e.postData.contents);

    // スクリプトプロパティにスプレッドシートIDは保存している
    const PROPERTY_SHEET_ID = PropertiesService.getScriptProperties().getProperties().SHEET_ID;
    var ss = SpreadsheetApp.openById(PROPERTY_SHEET_ID);
    var sheet = ss.getActiveSheet();

    // POSTされた情報を新規行に出力
    sheet.appendRow([data.timestamp, data.pingResult]);

    return ContentService.createTextOutput(JSON.stringify({"status": "success"})).setMimeType(ContentService.MimeType.JSON);
    
  } catch(error) {
    
    return ContentService.createTextOutput(JSON.stringify({"status": "error", "message": error.toString()})).setMimeType(ContentService.MimeType.JSON);

  }
}
```

GAS側で上記コードを組み込んだら「デプロイ」を行う。
ウェブアプリケーションを左の⚙から選択しWeb appは「自分」
アクセスは「誰でも」にしデプロイを完了させる。

成功するとWeb App URLが表示されるためコピーする。

### Raspberyy Pi側
ターミナルを開きvenvで仮想環境を構築
```python
python3 -m venv myenv # myenvは任意の仮想フォルダ名
```
上記実行すると現在のフォルダにmyenvという仮想フォルダが構築される。
構築できたら下記コマンドを実行し作成した仮想フォルダのアクティベーションを行う
```python
source myenv/bin/activate
```
アクティベーションが完了したらラズパイにデフォルトで備わっているPython IDE環境Thonnyを開き
下記Pythonコードを書き込み「main.py」となるようにファイル名を作成する。
保存先は「myenv/src/main.py」とする
```python
import os
import json
import requests
from datetime import datetime

# Web App URL of Google Apps Script
WEB_APP_URL = 'デプロイ時に確認したWebAppURLを張り付ける'

# Set Ping Command
response = os.popen('ping -c 4 8.8.8.8').read()
print(response)

# Get Timestamp
timestamp = datetime.now().strftime('%Y-%m-%d %H:%M:%S')

# Structure Data
data = {
    'timestamp': timestamp,
    'pingResult': response
    }

# POST Request
headers = {'Content-type': 'application/json'}
result = requests.post(WEB_APP_URL, data=json.dumps(data), headers=headers)

print(f'status: {result.status_code}, Response: {result.text}')
```

上記コードの作成及び保存完了後ターミナルで下記コマンドを実行しスプレッドシートにコマンドの実行結果が反映されるか確認
```python
python src/main.py
```

実行が成功したらスプレッドシートにコマンド実行日時とpingの情報が出力される。
技術士一次試験の受験申込をしてみたら驚きの連続だったのでまとめてみた

# 事の起こり
技術士という技術系の資格としては最高峰、最難関と言われる国家資格が有ります。筆者は研究開発職としてソフトウェア開発に関わっているため、ゆくゆくは技術士(情報工学)を取得したいと思っています。そのためにはまず一次試験に合格する必要が有ります。よって、受験申込をやった結果。。。それはそれは驚きの連続でした。。。

# そもそも技術士一次試験とは？
技術士は技術系の国家資格としては、最難関にして最高峰の資格と言われています。(公式HPでもその様に紹介されています。)この試験は合格までの道程がとても長いという特徴が有ります。実は筆者はJABEE認定課程を大学で修了しているため、下図の経歴3のルートで実は技術士試験二次試験に挑戦できます。しかし、大学の専攻が電気電子工学だったため、二次試験で一部科目免除が(情報工学部門で受験した場合)受けられません。よって一次試験を受験することにしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469079/b7f2e6c9-9276-8c4a-c36e-24f7bfe3e76a.png)

* 参考

https://www.engineer.or.jp/c_topics/000/attached/attach_83_1.pdf

https://www.engineer.or.jp/c_topics/000/000011.html

# 申込受付期間と実際の試験日が約半年も空いている？
技術士一次試験は例年11月の下旬に実施されます。よって申込期間は10月中か、早くても9月中ぐらいだろうと昨年は油断してしまい、受験することが出来ませんでした。何と6月中(今年は6月12日〜26日)なのです。半年前に締め切ってしまって試験までの期間そんなに準備に時間を要するのでしょうか？全くの謎です。試験の申込から試験当日までこれだけの期間が空く試験を筆者は少なくこれまで受験したことが有りません。

# 6/7に受験申込様式ネット配布開始のはず。。。しかし。。。
6/7から公式HPで受験申込様式が配布されるとアナウンスされていたのですが、筆者が確認した時は有りませんでした。。。後日確認したらいつの間にかページが更新されていて、アップされていました。

* 参考

https://www.engineer.or.jp/c_topics/010/010177.html

# DXが叫ばれているご時世に。。。恐ろしきペーパーワーク。。。
何とインターネット申込などというハイテク？？システムには対応していません。紙ベースの申請です。後述しますが、専用のファイルが用意されていて、それに入力して印刷して。。。しかも、受験料は銀行振込のみ対応です。クレジットカード決済は非対応です。もう少しこのご時世に合わせて柔軟なシステムにして欲しいと思うのは筆者だけでしょうか？情報工学部門を受験することになっているのですが、このシステムを見ると少し不安になりました。。。:scream: :scream_cat: ただ、国家資格の申請は怒濤のペーパーワークは珍しく有りません。情報処理安全確保支援士登録を行った時も怒濤のペーパーワークでした。

https://qiita.com/y-vectorfield/items/0dbe6e246206175e43d5#it%E7%B3%BB%E8%B3%87%E6%A0%BC%E3%81%AE%E7%AD%88%E3%81%AA%E3%81%AE%E3%81%AB%E3%83%9A%E3%83%BC%E3%83%91%E3%83%BC%E3%83%AF%E3%83%BC%E3%82%AF%E5%A4%A7%E5%A5%BD%E3%81%8D%E5%95%8F%E9%A1%8C

# 申込書類は凄まじい神Excel。。。
申込書類は先述の通り紙ベースでした。ではその申込申請書は手書きなのかというと専用のExcelファイルが用意されています。しかも実際に利用した感触だと怒濤のExcel VBAの塊の様なファイルです。最新のExcelまで対応されているとアナウンスされています。しかし、Mac版Excelは非対応で、以下の様なエラーが出るばかりで解消せず、仕方が無いのでWindowsのVM上で編集しました。。。このファイルを最新のExcelに合わせてメンテナンスするぐらいなら、Webベースで申込出来るシステムを構築した方が良い様に思うのは筆者だけでしょうか？Excel VBAは今後Pythonに置き換わることがアナウンスされています。この「神Excel」はいつまで生き残るのでしょう。。。今のご時世とはかけ離れている様な気がします。。。そして、このExcelファイルは入力後に、申込書作成というボタンをクリックすると、専用の書類(形式は入力フォームと微妙に異なっている)がPDFとして出力されてきます。。。ある意味ガラパゴス化していると言えなくもないです。。。:scream: :scream_cat: 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469079/38acaa9f-e4e7-46d2-850d-a1891f382b4b.png)

* 参考

https://www.engineer.or.jp/c_topics/010/010227.html

因みにWindowsの環境や対応しているExcelが用意できない、ファイルが正常に動作しないなどの事態が発生した場合は以下のPDFを印刷して手書きで記入して提出という救済措置？？が用意されています。

https://www.engineer.or.jp/c_topics/010/attached/attach_10227_3.pdf

# まとめ
愚痴、嘆きの様な内容のまとめ記事になりましたが、DXが叫ばれているご時世にあまりにあまりなペーパーワークのオンパレードと高度に？ガラパゴス化された神Excelに技術系最高峰の資格と言われる技術士の一次試験申込で驚かされるとは正直思っていませんでした。よって、記憶が薄れないうちに誰得なのか最早分からない記事を投稿したのでした。
【VSCode】TypeScript の型情報を全て表示する方法

`TypeScript Explorer` という拡張機能を使用することで TypeScript の型情報を全て表示することができます。

https://marketplace.visualstudio.com/items?itemName=mxsdev.typescript-explorer

例えば `Button` コンポーネントをクリックすると以下のようにサイドバーに型情報が表示されます。

![スクリーンショット 2024-06-12 23.53.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/ac6ce78f-f9d1-564a-9254-002ad5cc9d0e.png)

また、型情報の右側に表示される 「→」 をクリックすると型定義にジャンプします。

![スクリーンショット 2024-06-12 23.55.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/8fa59bfb-f2d8-1076-fbf6-8eb24cb71245.png)
Google IO ２０２４ まとめ

# AI Overview:
Google検索の生成AI機能「AI Overview」（旧SGE）が改良されました。リアルタイム情報、ランキング、品質システム、新しいエージェント機能を備えています。
マルチステップリーゾニングで、1つの質問で複数ステップの結果を提示します。
動画での検索「Ask with Video」も実現しています。

# GoogleフォトのAI機能:
Googleフォトに「Ask Photos with Gemini」機能が追加されました。
ユーザーが質問を投げかけるだけで過去に撮影した写真や動画を簡単に検索できるようになります。

# Gemini 1.5 ProとGemini 1.5 Flash:
Gemini 1.5 Proは100万トークンのコンテキストウィンドウを備え、翻訳やコーディング、推論などで品質を向上させました。

Gemini 1.5 Flashは小型モデルで、価格も手頃。

# Project Astra:
Google DeepMindの「Project Astra」はリアルタイムのマルチモーダルAIアシスタントです。
Googleが映像と音声を理解して質問に答える

# Imagen 3:
テキストから画像を生成するAIモデル「Imagen 3」が登場し、よりリアルで細部まで豊かに表現できるように。

# 音楽ループ生成ツール「Music AI Sandbox」:
テキストから音楽ループを生成できるAIツール。

# テキストから動画を生成する「Veo」:
1080P動画をテキストや画像から生成可能。

# 参照
　https://io.google/2024/
 　https://wired.jp/article/everything-google-announced-at-io-2024/
【備忘録】Markdown記法とは何なのか？＋よく使う記載方法5選！！！

## はじめに
 Qiitaの記事を書く際に必ずと言っていいほど使用するMarkdown記法、このMarkdown記法とはなんだ？となりましたので、簡単にですが調べてみました。
 そして、今後記事を投稿する上で、個人の備忘録として使用頻度が高いであろうMarkdown（マークダウン）記法をまとめておきます。

 以下記事を参考にしていますので、こちらもぜひ覗いてみてください！
https://qiita.com/Kangaskhan/items/b740abd439723ee7bbc4
https://qiita.com/choco_joulu/items/30c130e64f8964e43b7c



 ## Markdown（マークダウン）記法とは
Markdown記法とは、文章を記述するためのマークアップ言語の一つです。
マークアップ言語とは、「Webサイト文章といったテキストに目印付けを行い、コンピューターに認識させるための言語」で、コンピューターに文章をそのまま渡しても、見出しや引用文など人間だと当たり前にできるような判断ができないので、目標を付けてここが見出しですよと教えてあげてます。
WEBサイトを作成する際によく使用される「HTML」もマークアップ言語だったりします。

基本的にMarkdownで入力する文字は<font color="red">半角</font>です！！！
全角だと反映されないので気をつけてくださいね！

また、この記事のMarkdownどうやって描いてるんだろうなと気になった時は
該当の記事を開いて、左側のタブからMarkdownで本文を見るをクリックすると
Markdownの記載が確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3744133/8d52b764-a9bc-0eca-7c27-2ba0c34e871c.png)


# 使用頻度が高いMarkdown（マークダウン）記法　５選！！！

## 見出し（文字のサイズを大きくできる）
※シャープと見出し文字の間には**半角**スペースを入力する必要があります。

〜記述例〜

~~~
# #が1個
## #が2個
### #が3個
#### #が4個
##### #が５個
###### #が６個
####### #が7個だと反映されない！
~~~
〜表示例〜
# #が1個
## #が2個
### #が3個
#### #が4個
##### #が５個
###### #が６個
####### #が7個だと反映されない！



## 太字&斜体
*が偶数だと太字になり、奇数だと斜体になります。
*が３個以上の奇数だと太字＋斜体になります。
斜体わかりづらいなけど、よくみたら斜めになってますね
〜記述例〜
~~~
アスタリスクに挟まれてません
*アスタリスク1個に挟まれてます(斜体)*
**アスタリスク2個に挟まれてます**
***アスタリスク3個に挟まれてます(斜体)***
****アスタリスク4個に挟まれてます****
*****アスタリスク5個に挟まれてます(斜体)*****
~~~

〜表示例〜
アスタリスクに挟まれてません
*アスタリスク1個に挟まれてます(斜体)*
**アスタリスク2個に挟まれてます**
***アスタリスク3個に挟まれてます(斜体)***
****アスタリスク4個に挟まれてます****
*****アスタリスク5個に挟まれてます(斜体)*****



## リンクの貼り付け
リンクの一行上を空白にしておくとリンクをいい感じに目立たせれます！
いい感じ、、、適当な言葉が思いつかない、、表示例確認してください！

〜記述例〜
~~~
この行に何か入力されていると通常のリンクになるよ
https://qiita.com/Kangaskhan/items/b740abd439723ee7bbc4

https://qiita.com/choco_joulu/items/30c130e64f8964e43b7c
~~~

〜表示例〜
https://qiita.com/Kangaskhan/items/b740abd439723ee7bbc4

https://qiita.com/choco_joulu/items/30c130e64f8964e43b7c


## リンクの埋め込み
[　]に表示させたい文字、(　)にURLを貼り付ける

〜記述例〜
~~~
[ようつべにとべるよ](https://www.youtube.com/)
[googleにGO！](https://www.google.com/?authuser=0)
~~~

〜表示例〜
[ようつべにとべるよ](https://www.youtube.com/)
[googleにGO！](https://www.google.com/?authuser=0)



## 画像の張り付け
貼り付け方法はいくつか方法がありますが、一番簡単そうなコピー&ペーストを紹介します。
画像をコピーして貼り付けると記述例のような文字が記載され、画像を貼り付けることができます。

〜記述例〜

~~~
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3744133/985b4f74-bb83-0518-7ab0-0f1f6a6ad7f6.png)
~~~

〜表示例〜
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3744133/f0e003c3-72c0-102c-c209-c7d12d941f9b.png)

## さいごに
よく使う記載方法をまとめてみましたが、まだ慣れていないので意外と大変でした。
先に文章を記載してから、Markdown記法を追記するのが楽だと思います。
まだまだMarkdown記法で表現できることはたくさんあるので、
次回はかっこよく表現できる記載方法についてまとめる予定です！

 ## 参考
https://un4navi.com/prologue/20079/
https://hnavi.co.jp/knowledge/blog/markup-language/
https://qiita.com/tbpgr/items/989c6badefff69377da7#%E5%AE%9A%E7%BE%A9%E5%8F%82%E7%85%A7%E3%83%AA%E3%83%B3%E3%82%AF
https://qiita.com/Kangaskhan/items/b740abd439723ee7bbc4
https://qiita.com/choco_joulu/items/30c130e64f8964e43b7c
ILI9431液晶を LovyanGFX v2 で使ってみる 


「ILI9431液晶を LovyanGFX で使ってみる」https://qiita.com/nanbuwks/items/5db51632ff0db894a062
の記事を書きましたが、2024年6月12日現在では通らない感じ。
LovyanGFX Ver.2 になったからかな?

改めて、作り直してみます。


# インストール

Arduino ライブラリマネージャから LovyanGFX ライブラリを読み込みました。

# LCD
このLCDです。
「ESP32で ILI9341 TFT液晶を動かす」
https://qiita.com/nanbuwks/items/72503cf93c5f2ed0deeb
タッチスクリーンなしのタイプです。

# プログラム
LovyanGFX は自動認識機能があり、V2になって更に高度になっているようです。
しかしながらメーカー製の液晶一体タイプのようなものを使っていないときのプログラムとして、

「ファイル」-「スケッチ例」-「カスタムライブラリのスケッチ例」-「LovyanGFX 」-「HowToUse」-「2_user_setting」
を試してみます。




動きました。

```
#include <LovyanGFX.hpp>

// ESP32でLovyanGFXを独自設定で利用する場合の設定例

/// 独自の設定を行うクラスを、LGFX_Deviceから派生して作成します。
class LGFX : public lgfx::LGFX_Device
{
  lgfx::Panel_ILI9341     _panel_instance;
  lgfx::Bus_SPI        _bus_instance;
  lgfx::Light_PWM     _light_instance;
public:
  LGFX(void)
  {
    {
      auto cfg = _bus_instance.config();
      cfg.spi_host = VSPI_HOST;
      cfg.spi_mode = 0;
      cfg.freq_write = 40000000;
      cfg.freq_read  = 16000000;
      cfg.spi_3wire  = true;
      cfg.use_lock   = true;
      cfg.dma_channel = SPI_DMA_CH_AUTO;
      cfg.pin_sclk = 18;
      cfg.pin_mosi = 23;
      cfg.pin_miso = 19;
      cfg.pin_dc   = 17;
      
      _bus_instance.config(cfg);
      _panel_instance.setBus(&_bus_instance);
      }

    {
      auto cfg = _panel_instance.config();
      cfg.pin_cs           =    5;
      cfg.pin_rst          =    16;
      cfg.pin_busy         =    -1;
      
      cfg.panel_width      =   240;
      cfg.panel_height     =   320;
      cfg.offset_x         =     0;
      cfg.offset_y         =     0;
      cfg.offset_rotation  =     0;
      cfg.dummy_read_pixel =     8;
      cfg.dummy_read_bits  =     1;
      cfg.readable         =  true;
      cfg.invert           = false;
      cfg.rgb_order        = false;
      cfg.dlen_16bit       = false;
      cfg.bus_shared       =  true;
      
      _panel_instance.config(cfg);
    }

    {
      auto cfg = _light_instance.config();
      cfg.pin_bl = 4                                              cfg.invert = false;
      cfg.freq   = 44100;
      cfg.pwm_channel = 7;
      
      _light_instance.config(cfg);
      _panel_instance.setLight(&_light_instance);
      }
    setPanel(&_panel_instance);
}
};

LGFX display;

void setup(void)
{
  display.init();

  display.setTextSize((std::max(display.width(), display.height()) + 255) >> 8);


  display.fillScreen(TFT_BLACK);
}

uint32_t count = ~0;
void loop(void)
{
  display.startWrite();
  display.setRotation(++count & 7);
  display.setColorDepth((count & 8) ? 16 : 24);

  display.setTextColor(TFT_WHITE);
  display.drawNumber(display.getRotation(), 16, 0);

  display.setTextColor(0xFF0000U);
  display.drawString("R", 30, 16);
  display.setTextColor(0x00FF00U);
  display.drawString("G", 40, 16);
  display.setTextColor(0x0000FFU);
  display.drawString("B", 50, 16);

  display.drawRect(30,30,display.width()-60,display.height()-60,count*7);
  display.drawFastHLine(0, 0, 10);

  display.endWrite();

  int32_t x, y;
  if (display.getTouch(&x, &y)) {
    display.fillRect(x-2, y-2, 5, 5, count*7);
  }
}
```
これで動きました。
ndarrayのindex参照より、item()のほうが早かった

会社で「asscalar()が使えなくなった」という叫びが聞こえました。

勉強不足だったのですが、asscalar()なんて初耳で、
調べてみるとnumpy v1.23.0でたしかに消えてました。

    The alen and asscalar functions have been removed.    
    (gh-20414)
    
https://numpy.org/doc/stable/release/1.23.0-notes.html

このasscalar()は、コードコメント（実行時のワーニング）を見ると、
どうやらndarray.item()に置き換えるのが良さそう...

     DeprecationWarning: np.asscalar(a) is deprecated since NumPy v1.16, use a.item() instead

しかし、私は思いました。index指定のほうが早いんちゃう？と。
関数コール挟むよりアドレス参照したほうが早いでしょ？と。（C言語脳）

そんなわけで、会社の叫んでいた人に、
「公式的にはitem()だけど、index指定のほうが早いで」
と布教するために実測することにしました。

# 検証コード

    import numpy as np
    import datetime
    
    def print_time(func, func_name, n=100000):
        start_time = datetime.datetime.now()
        for i in range(n):
            func()
        end_time = datetime.datetime.now()
        elapsed_time = end_time - start_time
        print("処理時間:", func_name + "\t", elapsed_time, "/", n )
    
    
    a = np.array([[[123]]])
    
    print_time(lambda: np.asscalar(a), "asscalar")
    print_time(lambda: a.item(), "item  ")
    print_time(lambda: a[0, 0, 0], "index ")


# 結果

実行環境; Ubuntu18.04(!) Python 3.7(!!) のレガシーすぎる環境において

    処理時間: asscalar 0:00:00.310041 / 100000
    処理時間: item  	 0:00:00.028772 / 100000
    処理時間: index 	 0:00:00.050342 / 100000

となりました。
なんとitem()のほうが早かったのです。
やっぱり調べて実測してみないとわかんないもんですね；；
反省です。

ちゃんとitem()を布教するようにします。

ちなみにitem()の実装がどのようになっているかも調べたかったのですが、コード見つけれず時間切れでした。。
（numpyの達人の方、情報いただけるとありがたいです・・・！）
Vue.jsのslot要素の使い方

## はじめに
転職して、TypeScript、Vue.js、Nuxtを初めて使うようになり、slotについて調べたことを、備忘録兼アウトプットとしてまとめることにしました。少しでも誰かのお役に立てたら幸いです。

## 概要
Vue.jsのslot要素の説明と使い方について、サンプルコード付きでまとめました。

## slot要素とは
slotはコンポーネントにカスタムコンテンツを挿入するためのプレースホルダーとして機能します。
親コンポーネントから子コンポーネントにコンテンツを動的に渡すために使用されます。コンポーネントを使用する際に、その中に挿入されるコンテンツを指定することができます。この場合、slotは、親コンポーネントが渡すどんなコンテンツでもこの位置に挿入されることを示します。

## サンプルコードと解説
親コンポーネントから子コンポーネントに、テキストコンテンツを渡して挿入するサンプルコードを用意しました。
- 親コンポーネント：AlertSample.vue
- 子コンポーネント：AlertComponent.vue

### サンプルコード
AlartComponentがSample.vueから以下のように利用されたとします
```vue:AlartComponent.vue
<template>
    <v-card >
        <v-card-text>
            <v-row>
                <v-icon>
                    mdi-alert-circle-outline
                </v-icon>
                <span><slot /></span>
            </v-row>
        </v-card-text>
    </v-card>
</template>
```
```vue:AlertSample.vue
<AlertComponent>
  この部分が警告メッセージとして表示されます。
</AlertComponent>
```

この場合、AlartComponent内のslotは、"この部分が警告メッセージとして表示されます。"というテキストで置き換えられます。つまり、最終的な出力は次のようになります。

```html
<v-card>
  <v-card-text>
    <v-row>
      <v-icon>
        mdi-alert-circle-outline
      </v-icon>
      <span>この部分が警告メッセージとして表示されます。</span>
    </v-row>
  </v-card-text>
</v-card>
```

このようにして、コンポーネントの再利用性が高まり、さまざまなコンテンツを動的に表示することが可能になります。

## 参考
- [Slots - Vue.js : Vue.js公式ドキュメント](https://vuejs.org/guide/components/slots)
ゼロから始めるstimulus入門3(古いブラウザを考慮した設計)

## はじめに
今回は古いブラウザを考慮したstimulusの設計をドキュメントを見ながら、学んでいこうと思います。

過去回↓
第1回：[ゼロから始めるstimulus入門1(ファーストコンタクト)](https://qiita.com/shinry/items/de697c4a679e14a41ffa)
第2回：[ゼロから始めるstimulus入門2(現実的なものを作る)](https://qiita.com/shinry/items/34ca225c098aeb91b160)

## 古いブラウザを考慮した設計
クリップボード APIは現在のブラウザでは十分にサポートされていますが、古いブラウザを使用するユーザーも少なからずいます。
また、ネットワークの接続不良、CDNが利用できない、jsの一部またはすべてが読み込まれない場合があります。
そうしたブラウザを考慮した設計をstimulusで行うことができます。

## 実装

### clipboard_controller.js
- static classes = [ "supported" ]というものを定義
- connect()の中で`"clipboard" in navigator`の部分でブラウザがクリップボードAPIをサポートしているかを確認
- 確認出来たら、supportedClass(supportedは定義したもの)をthis.elementに追加する
```js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "source" ]
  static classes = [ "supported" ]
  connect() {
    if ("clipboard" in navigator) {
      this.element.classList.add(this.supportedClass);
    }
  }

  copy(event) {
    navigator.clipboard.writeText(this.sourceTarget.value)
  }
}
```

### html
- `data-clipboard-supported-class="clipboard--supported"`はコントローラーがクリップボード操作をサポートしていることを検出した場合に追加するクラス名を指定
- `clipboard--supported`が付与されたら、`clipboard--supported .clipboard-button`のルールが適用されるので`display: initial;`でボタンが表示される。
```html
<div  data-controller="clipboard" data-clipboard-supported-class="clipboard--supported">
  PIN: <input data-clipboard-target="source" type="text" value="1234" readonly>
  <button data-action="clipboard#copy" class="clipboard-button">Copy to Clipboard</button>
</div>

<style>
.clipboard-button {
  display: none;
}

.clipboard--supported .clipboard-button {
  display: initial;
}
</style>
```

## 実際の画面
正常な場合の画面表示は以下になります。
jsが読み込まれるので、クリップボードAPIが動作します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1328154/3f9ed3f1-e46d-0de6-6ef4-a462d5d095aa.png)



次に、jsをすべてコメントアウトして、画面をリロードしてみてください。
以下のようにjsが読み込まれないため、コピーボタンが非表示になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1328154/31babb69-5c02-07ec-fe0a-da097b2cf1fa.png)


## 次回
古いブラウザを考慮した設計を学ぶことができました。
ドキュメントをさらに読み進めます。
デザイン基礎

# 1.概要
Udemyを視聴して学んだことを書いていきます。
視聴Udemyは以下です。
[【グラフィックデザインの教科書】デザインの基本と知識を学ぶ、デザイナー1年生のための初心者講座](https://www.udemy.com/share/106pEQ3@1VurgpgyqB8vnvtyzOi6rgoRkzqJ3tq0hOw66V_9WXRTcBEqwJMoc1ONU1BA9RGukQ==/)

# 2.制作準備
デザインは、情報の整理から行う。

## 2.1.考慮すべき要素
* 意義
* 対象者
* 時期
* 場所
* 受け手
* 内容
* 方法

## 2.2.コンセプトを決める
上記の要素を踏まえて「コンセプト」を決定する。
このコンセプトがデザインの方向性を決定づける。

コンセプトは**デザインの指針**となる。

## 2.3.デザインの流れ
1. 情報整理
2. レイアウト構成
3. フォント選択
4. タイポグラフィー調整
5. 色彩選択

# 3.レイアウト
## 3.1.デザイン領域
テキストや画像を配置するスペースの特性：
- 広い領域：活気や楽しさを表現
- 狭い領域：静けさや高級感を演出

![fig-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889120/c0ccdc29-bd4b-3ea5-1089-c88aa84fde7c.png)
出典：[月刊エディトリアル vol.5](https://www.a-m-i.co.jp/monthly-editorial/05.php)


### 3.1.3.ポイント
- 上下左右のバランスを考慮
- 基本的には枠内に収める
- 意図的なはみ出しで強調効果
    

## 3.2.段組とグリッドレイアウト
### 3.2.1.段組
![wd06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889120/86394640-62b9-24a2-d264-3ed08d1b6504.jpeg)
出典：[Word文章を2段組みレイアウトでスマートに表す](https://www.sikaku.gr.jp/ns/library/wd/wd06.php)

段間の適切な余白設定で可読性が向上する。

### 3.2.2.グリット
グリッドを基準にしたレイアウト手法。
**メリット**
- レイアウトの効率化
- 一貫性の確保

<img width="300px" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889120/2894d740-03e3-9277-0fd6-404e7876b4ee.png">

## 4.デザインの4つの原則
### 4.1.整列
要素の位置を揃えることで、統一感と美しさを創出。
グリッドシステムの活用や、縦横のラインの意識が重要。

縦と横の比率が違うオブジェクトの場合は。
下を揃えると安定してみる。
大きさは揃えなくても良い。
テキストスペースのセンターに画像を揃える。

ガイド線を引いてレイアウトすると、揃える意図が伝わるようになる。

## 4.2.近接
関連性の高い要素を近づけて配置する。
近いものを同じグループと認識する。

別のグループとは余白を開けて配置する。

十分に余白が取れない場合は、以下で対応する。
* 仕切り線を入れる
* 囲みケイ線を入れる
* 色で分ける（名称の名前の背景色とか）
* 背景色で囲む

![スクリーンショット 2024-06-12 0.14.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889120/ac89d40e-83fa-6d90-0427-9259cdd674fa.png)
出典：[【デザインの4原則】わかりやすいデザイン作成の基本](https://carabao.co.jp/blog/design-4-principle/)


## 4.3.反復
規則性を持たせて、反復して配置する。
デザインに統一感が生まれる。

グループ内の全ての要素に反映させること。

![スクリーンショット 2024-06-12 0.14.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889120/13ac4eed-6b54-e9bc-d45e-1dc8235e485d.png)
出典：[【デザインの4原則】わかりやすいデザイン作成の基本](https://carabao.co.jp/blog/design-4-principle/)

## 4.4.対比
要素間の差異を強調し、重要性や階層を表現。
フォントサイズ、余白、色彩などを活用。

対比のさせ方
* フォントの大きさ、太さ
* 空白を使う
* 画像と文字を使う
* カラーによる対比

何を強調するかを明確にする必要がある！

![スクリーンショット 2024-06-12 0.16.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2889120/8838cee2-d900-b2cb-54ab-fd7f60e9adfe.png)
出典：[【デザインの4原則】わかりやすいデザイン作成の基本](https://carabao.co.jp/blog/design-4-principle/)

## 4.5.余白
空白スペースの戦略的使用する。
- 少ない余白：力強さや存在感
- 多い余白：洗練された印象や高級感

# まとめ
レイアウトの基本はグリッドであること、何を伝えたいか、どういう印象を与えたいかなどによって、余白や文字の大きさ、色などを調整することを学びました。
実際に比較しながら見ると、同じ情報でも感じ方が違って面白いと感じた引き続き学んでいきます。

視聴Udemy
[【グラフィックデザインの教科書】デザインの基本と知識を学ぶ、デザイナー1年生のための初心者講座](https://www.udemy.com/share/106pEQ3@1VurgpgyqB8vnvtyzOi6rgoRkzqJ3tq0hOw66V_9WXRTcBEqwJMoc1ONU1BA9RGukQ==/)
安心を得るためにラズパイで室温と湿度を監視する

# はじめに
自分はうさぎを飼っているのですが、うさぎは室温管理が大事なので、夏にクーラーが故障したりすると大問題。
出かける時も部屋の温度や湿度が分かれば安心するので、監視できるアプリを作ってみようと思う。
まず初めにラズパイで室温と湿度を測定して出力する実装をしてみる。

# 用意したもの
・Raspberry Pi 3B+
・温湿度センサー（AM2320）
・ブレッドボード
・リード線（オスーメス）

macとラズパイを接続しておく。
https://qiita.com/atjjnnn/items/42250a97f11220d8d62c

# 温湿度センサーとラズパイを接続
以下の写真のように配線

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529381/276c292f-8189-48a4-21c8-b1ec18f786f2.png)

以下の図と同じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529381/f3f0aa1b-93bd-9a64-ff20-f311d823513d.png)


# ラズパイの設定

```bash
sudo raspi-config
```

以下の設定を行い、I2C通信の機能を有効にする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529381/054a7a8c-e8eb-dde0-b92c-cfd63e039a44.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529381/7bc6a3fc-3e7a-f78e-28de-ed68971746aa.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529381/7c167783-ec86-9877-3802-baa3cb51dc3a.png)

i2cが有効かdetectコマンドを実行して確認

```bash
i2cdetect -y 1
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529381/c8a7dea7-c641-33a1-51c8-e00c868fa0cf.png)

一応データシート確認

https://www.kyohritsu.jp/eclib/OTHER/DATASHEET/SENSOR/am2320.pdf

この辺に記載あり

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529381/6833e4de-8a48-0caf-cbaa-ab10b84467e2.png)

最下位の1bitはr/wなので上位7bitでは0x5Cがアドレスであっている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529381/b94ca8d4-5990-1299-e656-96013d355ce5.png)


# 実装してみた

デフォルトで入っているThonnyというPythonのIDEを起動する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529381/8fc78856-92ea-1157-a57a-4dc1ca4489c1.png)

実装してみた。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2529381/47e0df8f-5f1f-f91a-542d-6367fe7959e2.png)


27℃に空調してる部屋なので正確に出てそうな感じ。


# おわりに

次はこれらを数時間おきに自分のLine宛に送信するように実装する。


# 参考
https://www.kyohritsu.jp/eclib/OTHER/DATASHEET/SENSOR/am2320.pdf
https://rtc-fukushima.jp/wp/wp-content/uploads/2020/02/20200303_dualwareII_1.pdf
https://www.fabshop.jp/denshikousaku-onshitudosensa/
Markdown AI 使ってみる

## はじめに
Qiita Engineer Festa 2024 の記事投稿キャンペーンの一つです！
筆者のマークダウン知識はQiitaがかけるくらい...
さてMarkdown AIで何ができるのかな！

## Markdown AIとは
URLは以下。
(~~余談だがスクロールして下に説明があることに気づけず、このアプリケーションの説明とかなしなのかい！？強気だ...と初め思ってしまった~~)

https://mdown.ai/content?id=335b81b2-bcb0-4dbb-83d0-531aa132181f

**簡単にホームページが作れる！** らしい。
作成から公開まで１つの画面で完結し、公開前のプレビュー表示も簡単にできる。
エンジニアが簡単に情報交換するだけでなく、子供たちが簡単にホームページを作成、世界中の人々と交流することをコンセプトにしている、みたい。

入力も簡単、テキストでも書ける。テーマ選択、JavaScript記述、サイト設定機能などの補助昨日も充実しているみたい。

## 事前準備
googleアカウントを準備しよう。

## いざやってみる！
![スクリーンショット 2024-06-12 22.46.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812987/d070a76f-eee1-aba7-0d20-73ea50a5d728.png)

...英語か...
子供たちというのは英語が読める子たちみたい。

好奇心でプラスボタンとテンプレートを作ってくれるっぽいところをクリックしたらそれっぽいマークダウンが出てきた！

![スクリーンショット 2024-06-12 22.47.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3812987/d1cde8ca-e54f-902b-dc82-f6d2d785dcb5.png)

このテンプレートを見れば簡単にマークダウンが作れるよ！というわけですね〜
確かにいつもマークダウンを描く時はMarkdown記法 チートシートを見ながら作っているわけですから嬉しいですね。

## こうなったらいいのにな...
1. 導線が難しい。UIUXが気になりました
2. 作業中の内容に関して常に完成絵がみたい
    QiitaがそうであるようにViewでの切り替えをなくして横に出してあげたらいいのにと思いました
3. デザインが殺風景。これはただの趣味ですが、保存された時のアニメーションとかあってもいいのかも？
    そこまでとは言わなくても、なんかもっとワクワクするようなデザインだとやる気が出るなと思います。わざわざマークダウンかこう！って時に使いたいなとはならないかも
4. "AI"というのはどんな要素だったのだろう...そこまで扱いきれなかった(悔い)

## ここはいいよね！
色々文句言ってしまいましたが、子供向けなのであればこうやって簡単にテンプレートが出てきて簡単にそれっぽいwebページが作れるのは嬉しいかもしれないです。
書くのが楽しくなればアウトプットも増えてより良い相乗効果があると思いました。
あとは生成AIとの組み合わせで色々なテンプレートに合わせたサジェストや、補助文章の推薦、次こんなこと書いたらどうですか〜みたいなこと言ってくれたり、
自分が作ったマークダウンに対して点数で評価してもらうとかも面白いかも！
（何をもってして良いとするかは謎）

## さいごに
まだまだ改善の余地がたくさんあるアプリケーションだと感じましたが、このQiitaのイベントで多くの改善を寄せられてより良いものになっていくのだと感じています！
自分もアップデート情報を敏感にキャッチして新しい情報が得られたらまた記事を作成しようと思います！
Pygwalkerで生成したグラフを画像保存する

# はじめに
Tableauに似たGUIで図表を作れるPythonライブラリ「Pygwalker」で作ったグラフを画像として保存する方法について紹介します。

# 準備
今回はサンプルデータとして、ChatGPTに作ってもらった「ペットを飼っている人の属性データ」を使います。

↓pygwalkerの起動まではこんな感じ↓
```Python
import pandas as pd
import pygwalker as pyg

# サンプルデータの作成
data = {
    "年齢": [30, 25, 40, 35, 28],
    "性別": ["男性", "女性", "男性", "女性", "男性"],
    "年収": [6000000, 5000000, 7500000, 5500000, 5800000],
    "ペットの種類": ["犬", "猫", "鳥", "犬", "猫"]
}
# DataFrameの作成
df = pd.DataFrame(data)

walker = pyg.walk(df)
```
pygwalkerのGUI上で以下のようにグラフを作成します。
（pygwalkerの操作については[こちら](https://qiita.com/ak-sakatoku/items/9ee42b252dd6ff94bcfa)が参考になります）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3601602/bcb5fd87-8df5-9807-09cb-53653c7fc0da.png)

# グラフを画像として保存
作成したグラフのみ画像データとして保存するには、以下のように画面左上に記載のチャート名(今回はデフォルト値の`Chart 1`)と保存ファイル名を指定します。
``` Python
chart_name = "Chart 1"             # Pygwalker上でのチャート名
output_path = "pygwalker.png"      # 画像を保存したいファイルパス
walker.save_chart_to_file(chart_name, output_path)
```

# グラフをバイナリとしてエクスポート
作成したグラフをバイナリデータとして書き出すこともできます。
``` Python
chart_name = "Chart 1"             # Pygwalker上でのチャート名
binary = walker.export_chart_png(chart_name)      
```

# 参考資料
本記事の執筆はpygwalkerの公式ドキュメントを参考にしました。より詳しく知りたい方はこちらも見てみてください。

https://github.com/Kanaries/pygwalker
Cast of Object /Script/CoreUObject.Default__Object to Actor failed

## 概要
UE5でC＋＋のアクターコンポーネントを作成した後、ライブコーディングがOKにも関わず、どこにもそのコンポーネントをアタッチしていないのにタイトルのエラーが出てクラッシュする現象に遭遇

 ## やった事
 ### キャッシュのクリアとエディタの再起動
 　キャッシュのクリア: エディタの DerivedDataCache フォルダを削除してキャッシュをクリアします。

### ソリューションをクリーン
Visual Studio のメニューバーで「Build」メニューをクリックし、「Clean Solution」を選択します。

### ソリューションをビルド
次に、「Build」メニューから「Build Solution」を選択します。

その後、ライブコーディングを実行して、UEを再起動したら復旧した
Azure.Identity 使うなら、AccessToken の更新はお任せした方がよかった話

# 背景

あるサンプルを拡張していたら、ある時から、数日経つと認証が通らなくなることがあった際の記録

https://github.com/Azure-Samples

# 状況と現象

- python/Flask 
- Azure OpenAI 
- Azure OpenAI を使った、langchain 

現象としては
- デプロイ直後は、どちらも問題なし
- 数日すると、openai ライブラリの認証が通らなくなる
- langchain は、同一リソース利用してるが問題なし

langchain 動いてるのになぜだーって思ったけど
一定期間で認証キレるってことで、Token 更新時の問題だろうとは予想

で、調べたところ・・


# 原因

- ChatClient として、SearchClient などと同様に共通化しようとして、更新が伝搬されなくしていた為だった。


```python: 実際の更新処理
def ensure_openai_token():
    global openai_token
    if openai_token.expires_on < int(time.time()) - 60:
        openai_token = azure_credential.get_token("https://cognitiveservices.azure.com/.default")
        openai.api_key = openai_token.token
```

:::note
\- 60 の符号は反転が正しい
:::

- ChatClient として、<code>openai.ChatCompletion.create()</code> を使いまわした為、Token 更新が効かなくなっていた。

# 対策

そもそも、Azure.Identity で AccessToken の自動更新はやってくれるようになってるので、その設定を利用する

具体的には、[get_bearer_token_provider()](get_bearer_token_provider) を利用して、api_key を渡さずに、勝手にやってもらうようにすればおしまい。

ってことで、冒頭にあげた、<code>ensure_openai_token()</code> も用無しへ :laughing: 

```python: 利用例
token_provider = get_bearer_token_provider(azure_credential, "https://cognitiveservices.azure.com/.default")
openai_client = AsyncAzureOpenAI(
  api_version=api_version,
  azure_endpoint=endpoint,
  azure_ad_token_provider=token_provider,
)
```

https://learn.microsoft.com/en-us/python/api/azure-identity/azure.identity?view=azure-python#azure-identity-get-bearer-token-provider

# あとがき

token.token が api_key に設定されていて、
普通にこれで動作するってのがビックリでした :thinking:  

ManagedID の場合、意味ないかと思ってたってのも、今回の躓きの原因でした :sweat:
スループットとWindow size見積もり

![title](https://raw.githubusercontent.com/legitwhiz/legitwhiz.github.io/master/technology_memo/images/1000007322.jpg)

## 0. 目的
 
スループットとlatencyとWindow sizeの関係について理解し、設計フェーズにてスループット、Window sizeを見積もりできるようになりたい人に観て欲しい。

## 1. スループットとlatencyとWindow sizeの関係について

### 1.1. 最大スループット

ローカルネットワークとの通信のみであれば、そこまで気にする必要はないが、WAN越えの通信となるとlatencyによる影響は、微量であってもスループットへの影響は大きいことを意識してください。

それは、以下の式から証明出来きます。
※本来RTTは往復での遅延時間、latencyは片道での遅延時間を指すが、ITでは往復でないと通信が確立出来ないから、RTTはlatencyとITでは、ほぼ同義です｡

```
最大スループット(bps)=(Window size*8)/(RTT(ms)/1000)
```

なお、式の8をかけているのはbyteをbitに直し、1000で割ってをいるのはミリ秒を秒に直すために入れてます｡

window size 256KBの場合、RTT2ms以下であれば1Gbps以上となる為、I/Fが1Gbpsなら問題ないですが、RTTが5msとなったら最大スループットが400Mbpsとなってしまいます。RTTが20msともなると100Mbpsしかスループットが出ない。

以下に一例としてWindow sizeとlatencyからThroughputを求めた記載します。

|WindowSize|latency|Throughput|
|-----------:|-------:|-----------:|
|256KB|10ms|200Mbps|
|256KB|5ms|400Mbps|
|256KB|2ms|1000Mbps|
|512KB|10ms|400Mbps|
|512KB|5ms|800Mbps|
|512KB|2ms|2000Mbps|
|1024KB|10ms|800Mbps|
|1024KB|5ms|1600Mbps|
|1024KB|2ms|4000Mbps|

スループットが出ないならどうするか？

### 1.2. 必要なスループットからWindow sizeを算出するには

RTT20msでI/F速度(1Gbps)と同じスループットがWANでも必要な場合、WindowSizeを算出するには以下の式になり

```
Window size=(最大スループット*(RTT(ms)/1000))/8
```

なので、必要なI/F速度(1Gbps)とした場合は、WindowSizeは「262KB」となります。

```
Window size=(1Gbps*1024*1024*1024*0.002)/8
```

というように、環境のlatency(RTT(ms))と必要とする最大スループットからWindow sizeが求めることができましたね。

では、そのWindow sizeをどうやって設定したらいい？

### 1.3. Window sizeの設定

一時的に設定する場合は、/proc配下に設定すればいいですが、一時的に設定はあまりないでしょうから割愛します。

なのでカーネルパラメーターの設定していきます。

まず、送信(wmem)なのか受信(rmem)なのかで設定項目が分かれますので、必要なのはどちらか見きわめてください。

```
・ net.ipv4.tcp_rmem: TCPソケットの 最小, デフォルト, 最大受信サイズ

・ net.ipv4.tcp_wmem: TCPソケットの 最小, デフォルト, 最大送信サイズ
```

必要なスループットを維持できるだけの送受信のWindow sizeを最大サイズとします。

最大は、求めたWindow sizeとします。
最小は、変更せずdefault(4KB)のままでいいです。
デフォルトは、目安として送信(wmem)の場合は、最大値の1/256倍。受信(rmem)の場合は、最大値の1/48倍。

### 1.4. 送受信バッファサイズの設定

次に送受信に使用するバッファサイズもWindow sizeに合わせて設定変更する必要があります。

注意なのが、バッファサイズは大きくすれば、それだけメモリを使うことを認識しておいてください。

```
・net.core.rmem_default: デフォルト受信ソケット・バッファ・サイズ

・net.core.rmem_max: 最大受信ソケット・バッファ・サイズ

・net.core.wmem_default: デフォルト送信ソケット・バッファ・サイズ

・net.core.wmem_max: 最大送信ソケット・バッファ・サイズを指定
```

デフォルトは、[「1.3. Window sizeの設定」](#1.3.-window-sizeの設定)で求めた値を設定してください。
最大も同様に、[「1.3. Window sizeの設定」](#1.3.-window-sizeの設定)で求めた値を設定してください。

### 1.5. クライアント側での送受信バッファサイズの調整

SCPやFTP,NFSなどのクライアント側で送受信バッファサイズをできるものも多いので、大容量ファイルを送受信する運用がある場合は、特に意識してください。

## 2. 最後に

MTUやMSSを理解すべきなのでしょうが、今回はスループットやWindow sizeは見積もりできるようになったかと思います。

latencyの注意点は、簡単出来るからといってpingの応答時間をlatencyと勘違いしないようにしてください。
pingは、送信したパケットサイズと同じサイズで応答するので、pingで64KBのパケットを送った場合、RTTの値は64KBの往復値つまり128KBの時間となります｡
latencyの詳細は、iperf(iperf3)などのツールを使って調べるようにしてください。

ちなみにRHEL9のカーネルパラメーターのデフォルト値は以下となりますが、latencyが50msともなるとデフォルトではI/F速度のスループットが保てなくなります。

```RHEL9デフォルトWindow size
net.ipv4.tcp_rmem = 4096  131072  6291456
net.ipv4.tcp_wmem = 4096  16384   4194304
```

latencyが50msの場合、各I/F速度に合わせた送信Window sizeは以下となります。

|I/F|Min|default|Max|
|------:|------:|---------:|---------:|
|default|4K|16K|4M|
|1G|4K|32K|8M|
|10G|4K|256K|64M|
|40G|4K|1M|256M|
Powershell Scriptを使ってWindowsの画面ロックが掛からないようにする方法

まだ先ですがVBScriptがデフォルトで無効になるとのことで
VBScriptを使ってWindowsの画面ロックが掛からないようにする方法
https://qiita.com/vantline/items/251adf0d96e058e495bf
こちらをPowershellで動かすようにしたものです。

~~~powershell
param (
    [int]$sleepTime = 60000,
    [string]$sendKey = '{F16}'
)

function Check-Processes {
    param (
        [string]$scriptName
    )
    $query = "SELECT * FROM Win32_Process WHERE (Name = 'powershell.exe' OR Name = 'pwsh.exe') AND CommandLine LIKE '%$scriptName%'"
    return Get-WmiObject -Query $query
}

function Stop-Script {
    param (
        [string]$key,
        [int]$sleepTime
    )

    Add-Type -AssemblyName System.Windows.Forms
    $wshell = New-Object -ComObject wscript.shell
    while ($true) {
        $wshell.SendKeys($key)
        Start-Sleep -Milliseconds $sleepTime
    }
}

$key = $sendKey
$sleepTimeInSeconds = $sleepTime / 1000
$processes = Check-Processes -scriptName $MyInvocation.MyCommand.Name

if ($processes.Count -gt 1) {
    $message = "送信処理を停止します。"
    $result = [System.Windows.Forms.MessageBox]::Show($message, "確認", [System.Windows.Forms.MessageBoxButtons]::YesNo, [System.Windows.Forms.MessageBoxIcon]::Question)

    if ($result -eq [System.Windows.Forms.DialogResult]::Yes) {
        $cnt = 0
        foreach ($process in $processes) {
            $cnt++
            if ($cnt -ne $processes.Count) {
                $process.Terminate()
            }
        }
        exit 0
    }
} else {
    $message = "$sleepTimeInSeconds 秒毎に $key を送信します。"
    $result = [System.Windows.Forms.MessageBox]::Show($message, "確認", [System.Windows.Forms.MessageBoxButtons]::YesNo, [System.Windows.Forms.MessageBoxIcon]::Question)

    if ($result -eq [System.Windows.Forms.DialogResult]::Yes) {
        Stop-Script -key $key -sleepTime $sleepTime
    }
}

exit 0
~~~

ショートカットを作成、リンク先を
~~~
powershell.exe -WindowStyle Hidden -ExecutionPolicy Bypass -File "C:\Scripts\SendKeyScript.ps1"
~~~
などにする。
用法用量を守って正しくお使いください。
データサイエンスをアクションの企画段階で考慮してもらうには？

# はじめに
私は、意思決定支援のための分析をすることが多いデータサイエンティストです💡
よく、マーケティング施策を実施したあとに「キャンペーンの効果出したんやけど！」と相談されます。

これを、企画段階で効果測定まで考えてもらうには？というのがテーマです！

# 実際どうよ？
データサイエンスに関する言葉はカタカナも多く、専門用語が多くなりがち＝拒絶感、聞く体制にならないケースが多いです・・・・。

# どうするとよさそう？

ざっくり語れるか？＝自身の理解度

　という記事を知り、

「ざっくり語って、納得してもらう」

が、筋のよさそうな方向だと考えました。

記事
https://note.com/tokyo_harbor/n/n32f6e1478f63

記事に出てくる元ネタ
https://togetter.com/li/746312

★関西弁に直すだけでも、不思議と入ってくる。　やっぱり、話し言葉だからいいのかもしれませんね✨

# やってみた
・効果測定はいきあたりばったりじゃあ間違うで！
・A/Bテストは、AとBを作ったらOKやないで！
・キャンペーン効果を比較するって、全員対象やったらできやんで！
というようなエッセンスを、踏まえて社内に説明して、なんとなく考慮しないとな～感覚を植え付けることに成功しました！

## 余談
一冊丸ごと関西弁で書いた本があったら、するする入ってきて面白いかも？笑
Adaptive Typography - Figma から CSS へ

## この記事の概要

デザイントークンとしてタイポグラフィスケールを定義する手法はかなり市民権を得てきました。

しかし、あくまでそれぞれのトークンは固定値であることが多く、Web デザインで言えばデバイスサイズごとの最適化はあまりなされていないように思います。

Figma の variables を使いビジュアルとして整理し、その後 CSS に移植するまでの流れを記事にしてみます。

## Figma での定義

### タイポグラフィスケール（グローバル）

あくまで 1 つの基準ですが、Lighthouse にて「フォントサイズが 12px 以下だと読みづらい」といったメッセージが出ます。

そのため 12px を下限とし、スケールをつくってみたいと思います。

今回はこの式を用いて、n = 3 からスタートします。

```math
f_n = 12 \times 2^{\frac{n}{6}}
```

すると、次のような結果が得られます。

- 12
- 13
- 15
- 17
- 19
- 21
- 24
- 27
- 30
- 34

一旦 34 を上限として、Figma 上でデータにおこしてみます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/e84991a4-635d-9fdf-4cba-7371f1fb45e2.png)

等差数列や等比数列では得られない、良い具合の変化だと思います。

こちらを variables に当てはめます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/16988898-042c-d081-30ad-e88b94769b25.png)

数式でいえば n = 3 からスタートしていましたが、デザインデータとして扱いやすいよう、マイナス 2 して番号を振りました。

### タイポグラフィスケール（エイリアス）

次に、先ほど設定したものをグローバルトークンとして、エイリアストークンを設定します。

今回はテストで作るだけなので、4 種類だけを作ります。

- sm: 1
- base: 3
- lg: 5
- xl: 7

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/12243f48-eede-3cdf-f4a8-a08a28dc1d1c.png)

更に、デバイスサイズごとに割り当てを変えます。
デバイスサイズが大きくなるごとに、サイズ大きく＆ジャンプ率高くなるように調整します。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/21a782ba-3798-ee9f-51e1-dbd1df4c29bf.png)

そうして作ったものをおおよそ実際のデバイスサイズに当てはまるとこのようになります。
左から順に、モバイル、タブレット、デスクトップの想定です。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/8eac8724-dcc9-8abc-b471-f573a04e7014.png)

モバイルに揃えるとデスクトップが小ぶりに見え過ぎて、デスクトップに揃えるとモバイルで全然収まらなくなりがちですが、ちょうど良い塩梅になったと思います。

:::note warn
説明の都合上一本道で作業を進めていますが、実際は多少行ったり来たりを繰り返しています。

ある程度トークンを作ったらデバイスごとに当てはめてみて、適切でなければ最初の数式をアップデートする……などの調整はごく当たり前に発生するものと思っていてください。
:::

## CSS への移植

Figma にて見た目と variables の設定ができたら、後は CSS にて再現するだけです。

まずは、グローバルトークンを定義します。

```css
:root {
  --font-size-1: 12px;
  --font-size-2: 13px;
  --font-size-3: 15px;
  --font-size-4: 17px;
  --font-size-5: 19px;
  --font-size-6: 21px;
  --font-size-7: 24px;
  --font-size-8: 27px;
  --font-size-9: 30px;
  --font-size-10: 34px;
}
```

そして、デバイスサイズごとのエイリアストークンを定義します。

```css
@media (width <= 640px) {
  :root {
    --font-size-sm: var(--font-size-1);
    --font-size-base: var(--font-size-3);
    --font-size-lg: var(--font-size-5);
    --font-size-xl: var(--font-size-7);
  }
}

@media (640px < width < 960px) {
  :root {
    --font-size-sm: var(--font-size-2);
    --font-size-base: var(--font-size-4);
    --font-size-lg: var(--font-size-6);
    --font-size-xl: var(--font-size-9);
  }
}

@media (960px <= width) {
  :root {
    --font-size-sm: var(--font-size-2);
    --font-size-base: var(--font-size-4);
    --font-size-lg: var(--font-size-7);
    --font-size-xl: var(--font-size-10);
  }
}
```

最後に、今回はユーティリティクラスのような形式でフォントサイズ指定用クラスを定義します。

```css
.text-xl {
  font-size: var(--font-size-xl);
}

.text-lg {
  font-size: var(--font-size-lg);
}

.text-base {
  font-size: var(--font-size-base);
}

.text-sm {
  font-size: var(--font-size-sm);
}
```

これにて、コードでもアダプティブなスケールを再現できました。

## 余談

Figma から CSS へ移植するだけと言っても、variables の数が多いとなかなか大変です。

プラグインで解消できるような気もするので、作ったらそれも記事にしてみようと思います。
ノートパソコンをサーバーとして利用したい場合に画面を開いたままの状態でも消灯する方法

# 方法
色々とネットで調べたら方法自体はあるっぽいが結局一番使いやすかった方法を見つけたので忘れても大丈夫なように書いておくよ

crontabとかで起動時実行するようにしてみるのもありかもしれないですね

## OFFにする場合
```bash
if [ $# -eq 0 ]; then
    sleep 0
else
    sleep "$1"
fi

su -c "echo 0 > /sys/class/backlight/intel_backlight/brightness"
```

## ONにする場合
```bash
su -c "echo 0 > /sys/class/backlight/intel_backlight/brightness"
```

## まとめ
バリ簡単ですね！！！
他にもいいやり方がたくさんあると思うので皆さん教えて下さい。

最後にTwitterのフォローや他の記事もよろしくお願いします。
C_TS422_2021 SAP Certified Application Associate SAP S/4HANA Production Planning and Manufacturing対策（4/100）

【4日目】
トピック1：SAPS/4HANAサプライチェーン計画の概要（4/6）

≪問題4≫
内製と外部調達の両方をサポートする新しいMRP関連品目を登録した場合、MRP実行では何が起こりますか。
□MRP実行で外部調達が前提とされる。
□MRP実行で品目が考慮されない（品目をインタラクティブに計画する必要がある）。
□見積が作成された場合のみ、MRP実行によって品目が計画される。
□MRP実行で内製が前提とされる。

≪解答≫
□MRP実行で外部調達が前提とされる。
□MRP実行で品目が考慮されない（品目をインタラクティブに計画する必要がある）。
□見積が作成された場合のみ、MRP実行によって品目が計画される。
■MRP実行で内製が前提とされる。

≪解説≫
◆MRPにおいては、調達数量によってロットがまとめられた後、調達タイプを使用して品目を内製する（計画手配）のか、外部から調達する（購買依頼）のか決定します。
◆調達タイプとして内製と外部調達の両方が許可されている場合、資材所要量計画は内製から開始されます。
Decision Record（コンテキスト）のすすめ。安定的にサービスを運用し続けるためのコンテキスト文化の構築

私のコミットしているプロジェクトでは「Decision Record」を残すこと心がけております。
私は現在のプロジェクトに参加するまで「Decision Record」すら聞いたことない状態だったので記事を読んでくださる皆さんに知ってもらえればと思います！

:::note
【この記事に書くこと】
- 「Decision Record」とは何か？
- 「Decision Record」を残すとチームにとって何が良いのか？
- 「Decision Record」の運用方法について
:::

## 「Decision Record」とは？
一般的には「Architecture Decision Record (ADR)」と言われるものです。
プロジェクトチームではArchitectureの部分を省いて「Decision Record　（DR）」と読んでいます。
※以後DRと記載します。

プロジェクトでは、アーキテクトの決定のみならず…
- プラグインの導入決定理由
- コンポーネントのデザイン実装方針について

など様々な決定事項、コンテキストを残すことにしたので`Architecture`の「A」をとって「DR」と呼ぶことになりました。

:::note alert
ただ、「DR」だと似たような言葉が多くあります…
- Disaster Recovery...復旧や回復策を策定・実行するプロセス
- デザインレビュー
他にチームやプロジェクトで使われているユビキタス言語も含めるともっとあるかもしれません。

なので文字で伝える場合には「Decision Record」と書くか、他の命名にするかが良いかもと思っています…
:::

## 「Decision Record」を残すとチームにとって何がいいのか？
チームはハイコンテキスト、つまり阿吽の呼吸で動けるのが一番良いとは思います。

:::note alert
ただ、サービスの運用歴が長くなればメンバーだけでなく技術も変わります…
:::

そんな時DRが残っていれば…
- 何を考えて現在のフレームワークを選んだのか
- どんな理由で実装されているコンポーネントなのか
- どのような意図で構築された構成なのか（インフラを含めるアプリケーション等の構成）
- なぜデザインはそうなっているのか

などを知るための手掛かりになります！

:::note alert
私は10年以上運用されたサービスにJoinして開発してきました。
なぜそうなっているのか？が分からずにどのように修正するのが良いのか判断の難しい場面によく出会いました…
:::

DRが残っていない中修正したコードはやがて負債と言われ、改修の容易性やコードの見通しを悪くすることにつながり「生産性の低下」という形で**現場の工数を逼迫する原因になる可能性が高い**です…

DR（コンテキスト）が残っていれば、フレームワークをアップデートしようとした時やコードをリファクタリングする時に
- アップデートするのか
- 別のフレームワーク、ライブラリに替えるのか
- 修正 or 削除すべきか
- 共通化すべきか

:::note
その時の状況に応じた適切な判断を現場に生み出すための一助になるのがDRだと考えています！
:::

## 「Decision Record」の運用方法について
運用方法について紹介します！

### 運用までの準備について
githubの「Discussions」を使います！
リポジトリーに入って、メニューの「Pull requests」の横にあります！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/280f155c-099c-f338-aab9-fce0a457afc5.png)

:::note warn
設定できてないと「Discussions」の項目は表示されないのでgithubのドキュメントを確認しながら行なってください！
:::

https://docs.github.com/en/discussions/quickstart

Discusionsのページが表示されたら、画面右あたりにある「New discussion」で作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/c97b8603-bb06-5176-87b4-13e0453fc979.png)

次にカテゴリーを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/69f4ca25-0c3b-2045-8623-a754b030b708.png)

デフォルトで様々なカテゴリーが用意されています。
「Decision Records」は新しくカテゴリーに追加する必要があります。

### 運用方法
運用方法はシンプルです。

1. `General`のカテゴリーを選択して議論したい内要をタイトルにして`Discussion`を作成する
1. `General`カテゴリーの`Discussion`で結論が出たら新しく`Decision Records`カテゴリーで`Discussion`を作成する

詳細な運用方法については後で触れますが、たったこれだけです！

:::note
Discussionにはラベルをつけられます。
チームでは　デフォルトで定義されているのに加えて「frontend」と「backend」を追加して、絞り込めるようにしています！
:::

#### 運用方法の詳細について

議論用のDiscussionには下記のような項目で内要を記載します！
- 背景・前提
    - フレームワークの導入についての議論であれば導入によって得たいメリットやなぜフレームワーク導入を検討しているのかの背景を記載します
- 検討事項
    - 比較したフレームワークそれぞれの特徴など検討に必要な情報をまとめます
- 結論
    - 最終的な結論を記載します

上記の項目を記載したら、メンバーに意見を募ります。
コメントとして意見が投稿されるので、追加調査や再検討します。

最終的に検討事項がなくなったら`Decision Records`のラベルをつけて`Discussion`を作成します。

:::note
基本的にチャットなどの非同期で行いますが、最終決定する時はMTGを設けて口頭で意見交換をします。
:::

## 【まとめ】Decision Record（コンテキスト）のすすめ

DR、コンテキストを残すことの大切さが少しでも伝われば幸いです。
DRを残すことは未来の開発者にとって唯一の道標になります。

ただ、**Discussionを作るだけ作って放置されてしまう**こともあります…。
なので意識的にチームで見直す時間を設けて運用するのが良いかと思います！

:::note
関わったサービスが安定的に持続していくために、まずDiscussionを作ってみることから始めてください！
:::
chatGPTで事業計画を時短で考える

## はじめに
今回、chatGPTを使って事業計画を速攻で考える方法を試しました。新技術・手法とかではないですが、ビジネスモデルを考えるのには使えると思います。

## 早速ビジネスモデルを考えてもらった
早速ですが、chatGPTにビジネスモデルキャンバスを作ってもらいました。

![スクリーンショット 2024-06-12 222423.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3680875/7e84e5d0-503b-c97f-ca35-e5c49b630fea.png)

![スクリーンショット 2024-06-12 222535.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3680875/e2f8aa13-cf4d-18ef-629a-9669e23dfa1d.png)

すると、こんな感じでビジネスモデルキャンバスを一瞬で作ってくれます。
ビジネスモデルキャンバスの型は、こちらを参考にさせてもらいました↓
[ビジネスモデルキャンバスとは？具体例付きのテンプレートも無料配布](https://www.unprinted.design/articles/business-model-canvas/)

## メリット４つ
さて、使ってみて感じたメリットが４つあります。

#### 1.たたき台を速攻で作れる
上の実演では、gpt-4oがビジネスモデルの９つの要素について30秒ぐらいで作り終えてくれます。これを実際に我々が考えようとすると、意外と時間がかかって大抵30分ぐらいかかります。
よって、これだけで30分カットできます。

#### 2.情報のスコープが広い
例えば写真1枚目で、顧客セグメントにビジネスコンサルタントを挙げてくれています。

 「興味無い領域をちゃんと考えてくれて、ビジネスモデルキャンバスを埋めてくれる、そんなwebサイト」という強みに関して
確かに言われてみれば、このツールはコンサルにとって使えると気づきます。

ですが、私が自分で考えたときにはコンサルに有用とは思いつきませんでした。私が顧客を想定するのが苦手な可能性もありますが、人間誰しも考えるのが苦手・または単純に知らない領域はたくさんあるもの。AIの情報の広さは、苦手な領域を60点の回答で埋めてくれるという面で助けになると考えます。

#### 3.こちらが欠点を突く側に回れる
ビジネスモデルをAIに作らせた後に、そのデメリットを突くように質問しました。

![スクリーンショット 2024-06-12 225225.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3680875/23977532-ab65-b55c-72e9-a70f3efc359a.png)

今までならば私がビジネスモデルを考えて誰かに発表し、その人にデメリットを突いてもらうことで、そこを詰めていって企画を強化していったと思います。ですが色々デメリットを突かれると、人間なので否定されまくってると感じてどうしてもテンションが下がります。
それが今回は、AIが作ったものを私が批評しデメリットを突きまくれると気づきました。面白いことに攻めに回ると、いくらでも欠点を思いつくことができます。

それに対するAIの回答にキレのあるものはありませんでしたが、一応あの手この手で対応策を提案してくれました。

#### 4.結果としてデメリットのピックアップを素早く行える
AIの提案に対して、さらに質問を続けました。
![スクリーンショット 2024-06-12 230318.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3680875/e9d0b62e-1d3d-1134-c9a6-d90c641c7727.png)

これまでのように以降もデメリットを突きまくりました。
[会話全文](https://chatgpt.com/share/69d9a6bc-ec32-40a5-a1be-8d52fd12feaf)

結果として、AIの提案にキレのあるものはほぼありませんでした。
しかし自分でどんどん欠点を探すので、デメリットのピックアップはとても早く終わったと思います。

そのピックアップしたデメリットの中に致命的なものが無い or 自分で解決策を思いつけば、その企画は行けると判定できます。致命的なデメリットがあった場合はその企画は捨てて、少し変えた企画にしようという風に仮説検証が高速で行えることに気づきました。

## 欠点３つ
検証なので、感じた欠点も書いていきます。

#### 1.最初のアイディアは人間が考えるしかない
今回で言えば、
「興味無い領域をちゃんと考えてくれて、ビジネスモデルキャンバスを埋めてくれる、そんなwebサイト」
というアイディアです。強みに関しては人間が考えて、他の項目を60点で埋めてもらうという使い方が良さそうです。

#### 2.情報のスコープは広くても、キレのある解決策はないことが多い
知識に偏りがなくスコープも広いものの、思考の浅い回答が多いと感じました。強みや解決策を考えるときは、どうしても深く考えて本質を見つける必要があります。
よって、AIに詰問して返ってきた「浅いけど広いスコープの解決策」を参考にして、解決策は人間が考える使い方が良さそうです。

#### 3.方針決定の相談はできない
![スクリーンショット 2024-06-13 095625.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3680875/1785e515-54ef-1105-d545-ed6661dbe8e0.png)

![スクリーンショット 2024-06-13 095645.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3680875/d4d818cf-99a9-3c02-51f5-827151e1db45.png)

例によって詰問してみましたが、いつも場合分けをして無難な回答をしてきます。
思い切った決断や損切りは、まだ人間にしかできないなと感じました。

## まとめ
ここまでの考察は現状の、しかもchatGPTに限った話になります。claudeを使うとかプロンプトを工夫するとか新たなGPTsが現れるなどで、現状の欠点が簡単に克服されていくと思ってます。
ScalaCheckでプロパティベーステストしてみる(1)

# 概要

Scalaチェックとは、プロパティベーステストを行うためのライブラリです。
通常の単体テストとは異なり、ScalaCheckでは関数やメソッドの特性（プロパティ）を定義し、それらのプロパティが様々な入力に対して成り立つことを確認します。

プロパティベーステストには次のようなメリットがあります。

* 【広範な入力の自動テスト】
手動でテストケースを作成するのではなく、様々な入力データに対してプロパティが成り立つかどうかをチェックできます。
これにより、エッジケースや予期しない入力に対してもテストが可能になります。
* 【簡潔なテストケースの記述】
  具体的な入力に依存しないテストケースを作成できます。これにより、テストの可読性が向上します。
ソースコード自体も事例ベースのテストと比較して短くなることもあります。
* 【バグの早期発見】
  ランダムな入力に対するテストにより、通常の単体テストでは見逃されがちなバグを早期に発見できます。

# max関数

以下は、最大値を求める関数`java.lang.Math.max`に対してプロパティベーステストを行うコードです。

```scala
import org.scalacheck.Prop.forAll
import org.scalacheck.Properties

object MathProps extends Properties("Math"):
  property("max") = forAll {
    (x: Int, y: Int) =>
      val z = java.lang.Math.max(x, y)
      (z == x || z == y) && (z >= x && z >= y)
  }
```

`java.lang.Math.max`関数は、forAllを使って次のようにテストされます。

`forAll`に渡している関数の引数`(x: Int, y: Int)`には、ScalaCheckで生成されたランダムな値が渡されます。
`forAll`内の関数本体では、`java.lang.Math.max(x, y)`を使って`x`と`y`のうち大きい方の値を取得し、それを`z`に代入します。
次に、`(z == x || z == y) && (z >= x && z >= y)`という条件をチェックします。

この条件が満たされていることを確認することによって、`java.lang.Math.max`が最大値を返すことが確認できます。
【markdown AI】使ってみた正直な感想と注意事項（2024/06/12時点）

# TL;DR

タイトルの通り、使ってみた正直な感想（≒直してほしい）ところを書きます。

# 本題

## UI、導線

主な画面構成は「記事一覧」と「プロフィール」なのですが、<font color=red>プロフィール画面から記事一覧への移動が[TOP]ボタン</font>ということが初見で分かりづらかったです。[記事一覧]みたいなボタンを一生懸命探してました。。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252806/c82e3826-607e-cbe6-0cc3-c8d1e0e1ad7f.png)

##  保存方法

記事の方法はManualとAutoがあります。デフォルトではManualになっています。最初、これに気付かずそこそこ長めのドキュメントを書いていて、ページを移動してしまったときに保存されていなかったという少し悲しい思いをしました。。。
同じ思いをしないためにも、<font color=red>保存方法の設定はAutoをお勧め</font>します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252806/0a5a4d32-e5dc-6280-020c-602966d085da.png)


## 保存方法（その２）

一つ前で「保存方法の設定はAutoをお勧めする」といったそばからその保存方法の文句になるのですが、Manual/Autoに関わらず記事を保存したときに下図のようなトーストUI?が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252806/24f1f8cd-333d-b349-1677-602fee03ec27.png)

この<font color=red>トーストが出ている間</font>もテキストの入力はできるのですが、<font color=red>スライドバーやボタンが利かなくなります</font>。これがちょっとストレスです。


## Markdownとプレビューを横並びにしたい
そのままです。
今はMarkdownビューとプレビューの切り替えのみなので、並べられるといいです。

## スクロールバーが細い
今でもスクロールがあるのですが、細い。。。
この画像で伝わるかは分かりませんが、ちょっと細い。。。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252806/6bae3988-8f03-a4f1-573d-44e4faf9211b.png)


## コピペで画像を挿入（アップロード）したい

今は[Image]ボタンをクリック > [+]をクリック > ファイルを選択　という流れですが、せっかく「手軽にドキュメントを書けるサービス」というコンセプトなので、ここも手順を省略できるとなお良しですね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252806/abb69e34-4511-58ac-dbaa-2bf01f734d27.png)


## ドキュメントの公開手順

ドキュメントの公開手順は [View]ボタンをクリック > [URL] ボタンをクリック > [Publish]...
となるのですが、ここももう少し手順を省けると嬉しいかも。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252806/5137e0b8-2f58-97d7-33a8-1a305874995f.png" width=32%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252806/f4b329dd-7373-aa39-170e-ece7fd0baffa.png" width=32%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252806/f0e25a37-108f-5763-b35b-55ccc4b0b041.png" width=32%>




## 一度公開（Publish）したドキュメントを編集してもURL先のコンテンツが更新されない

これはちょっと致命的だと思うですが、<font color=red>一度公開したドキュメントを編集してもURL先のコンテンツが更新されません</font>。一度非公開にしても同じです。
今の段階では公開後に修正が必要になったら新しい記事を作成して中身をコピペして修正、公開という流れになりますね。

## 良いと思ったところ

[Image]ボタンをクリックしたときに、アップロード済みの画像が一覧になっていいるので、再度追加したい場合などは使いやすいUIだなぁと思いました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/252806/359d2203-d98b-5473-8f76-d247e8cbf44e.png)


# まとめ

ここに書いたものがじきに修正され、また新しい機能が追加されることに期待しています。
契約開始日を取引先に更新するSalesforceフロー作成方法

契約オブジェクトのレコードが作成された際、「契約開始日」が最新のものを取引先に更新する方法


## 前提　取引先にカスタム項目がある

今回取引先に作成したカスタム日付項目「ContractStartDate__c」を作成し、ここに契約オブジェクトの契約開始日を入れるようにします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/24bb7342-6f50-2c55-e444-2f7413ca921e.png)




## フローその1 契約作成時更新時を考慮

契約作成時更新時に取引先の「ContractStartDate__c」を最新の日付にするフローはこちらです


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/8851f9f9-aad5-967d-0b6f-5b9d5d0c1a6b.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/95bb78ab-5f3d-1a30-2275-94ca10565524.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/327b2aa5-ff96-5142-e758-9337ba233e57.png)


こちらのフローで契約作成時更新時に取引先の「ContractStartDate__c」が更新されます


## フローその2 契約削除時を考慮

契約削除時に取引先の「ContractStartDate__c」を最新の日付にするフローはこちらです

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/fa0b3248-27b5-043b-b0d2-883efd7c21e7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/cf5ac6cc-ec2d-b7eb-3b74-c48d899efbec.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/646d6471-1482-6af5-d740-eb2fdae09db6.png)