OmniAICreator/Qiita-1.07M huggingface dataset:
ChatGPTによるタイトル改善！バズるようQiitaのタイトルを添削してもらった

# 概要

｢せっかく書くならバズりたい｣とQiita投稿者なら思うこともあるかもしれません.

なので過去のバズった記事を参考に, ChatGPTにタイトル文を添削してもらうコードを書きました･
(ChatGPTで遊びたいと思っていたことですし......)

# 全体の流れ

全体としては

1. QiitaAPIを用いてバズった記事の収集
1. 類似文章抽出(入力したタイトルに関係の有りそうな記事の抽出)
1. ChatGPTによるタイトルの添削

といった流れで進めていきます.

## QiitaAPIを用いてバズった記事の収集

まず初めにQiitaAPIを通じてバズった(｢あとで読む｣が100以上の)記事を最新10,000件ほど取得しました.
```python
token = "himitsu"

def getTitles(page):
    url = 'https://qiita.com/api/v2/items'
    headers = {'Authorization': 'Bearer {}'.format(token)}
    query_params = {# クエリパラメータの設定
        'page': page,         # ページ番号
        'per_page': 100,    # 1ページあたりの件数（最大100まで指定可能）
        'query' : 'stocks:>100' #あとで読むの件数が100件以上
    }

    response = requests.get(url, params=query_params, headers=headers)
    data = response.json()
    
    return [item['title'] for item in data]
    
titles = []
for i in tqdm(range(1,100)):
    titles += getTitles(i)
```
これを実行することで, Qiitaのバズったタイトル一覧が取得できます.

## 類似文章抽出(入力したタイトルに関係の有りそうな記事の抽出)

本来なら, この10000件全てをChatGPTのプロンプトに突っ込みたいところですが, ChatGPTには文字数(トークン)制限があります.
そのため, 入力した(添削してほしい)タイトルと関連性の深いものtop50を抽出しました.

詳細としては, [学習済みモデル](https://huggingface.co/sonoisa/sentence-bert-base-ja-mean-tokens-v2)で｢添削してほしいタイトル｣｢バズったタイトル一覧｣それぞれをベクトル化します.
次にこのベクトル間のcos類似度が高いものtop50を抽出します.

## ChatGPTによるタイトルの添削

プロンプトは↓のようにしました。もっと良い手法とかあったら教えてください
```python
prompt = PromptTemplate(
    input_variables=["titles_buzz", "title"],
    template="""{titles_buzz}

上記の内容はバズった技術記事のタイトル一覧です。
この内容を踏まえ、よりバズりやすいようタイトルを直すことをしてください

あなた:符号化を楽にするツールについて→文字列のエンコード・デコードを瞬殺するencodeMaxを作りました
お気に入りのfont-family→個人的なかわいいCSSのfont-familyランキングを発表
{title}→""",
)
```
下2行は, 事前にいくつか具体例を事前に示すfew-shot learningという手法です.

```python
title = "ここをよしなにする"
titles_buzz = "ここに関連度の高い記事タイトル50をかく"

llm = OpenAI(temperature=0)
chain = LLMChain(llm=llm, prompt=prompt)
print(chain.run(title=title, titles_buzz=titles_buzz))
```

# 実際に添削してもらった

自分の過去の記事をChatGPTに添削してもらいました.

|  オリジナル |  添削後 |
| ---- | ---- |
|  二択を繰り返すことで新しい本と出逢えるwebアプリを作った  |  「選ぶのが面倒なら二択で決めちゃおう！新しい本と出逢えるwebアプリを作りました」|
|  【水曜日のダウンタウン】所持金5連続UP企画で適当に声をかけるとどうなるか、手計算で検証してみた |  【水曜日のダウンタウン】所持金5連続UP企画で適当に声をかけるとどうなるか、実践検証してみた|
| 文章がどの作家に似ているか判別するモデルを作った話 | 作家の筆致を分析するAIモデルを開発しました！自分の文章がどの作家に似ているかチェックしてみよう|
| 変分オートエンコーダでそっくりな漢字ランキングを作った|新しいオートエンコーダで漢字のそっくり度をランキング化してみた！
|OpenCVで写真をドット絵調にする|OpenCVで写真をドット絵風に変換する方法を解説！手軽にオシャレなアート作品を作ろう|
|Wordleで最適解での平均手数を概算してみた|Wordle攻略！最短手数で解くための平均手数を概算してみました【数式解説付き】|
|トンパ文字をスタンプ感覚で送れるプログラムを作った|LINEでトンパ文字を簡単に送信！スタンプ感覚のトンパ文字プログラムを作りました|
|あみだくじの横線は何本引くべきか|あみだくじの横線の本数を決める方法を解説します|
|物理学で理解するグラフフーリエ変換|グラフ理論と物理学を融合した、離散フーリエ変換の理解を深める方法を紹介します|
|譜面からDance Dance Revolutionの難易度を推し量るモデルをDNNで作った|Dance Dance Revolutionの難易度を簡単に推測するモデルをDNNで実装しました！|

全体的に, 軽い文章でキャッチーになっていますね.
恥ずかしくて自分ではかけない文章です.
たまに文意を取り違えているものもありますが, タイトル決めの参考になりそうです.

# 最後に

本来は, こういったことはもうちょっとちゃんとした自然言語処理(スタイル変換?)でやったほうがいいんだろうなと考えています.
機会と時間があればそちらも挑戦してみたいです.
Solidityとスマートコントラクト: 投資分配を例に

# Solidityとスマートコントラクト: 投資分配を例に

こんにちは、みなさん。今回はJavaScriptの経験があるけれどもSolidityやスマートコントラクトは初めてという方向けに、具体的なスマートコントラクトの一例を通じて、その基本的な概念と作成方法について解説します。

## まず、スマートコントラクトとは？
スマートコントラクトは自己実行契約で、契約条件の適用をコードで書くことでデジタル的に追跡し、検証することができます。これらは、トランザクションとともにブロックチェーンに格納され、不変であり、検証可能です。

## Solidityとは？
Solidityは、Ethereumブロックチェーン上でスマートコントラクトを作成するための主要なプログラミング言語です。JavaScriptと似た文法を持ち、オブジェクト指向プログラミングをサポートしています。

では、実際に具体的なスマートコントラクトの一例を見てみましょう。

```Solidity:FundDistribution.sol
pragma solidity ^0.8.0;

contract FundDistribution {
    address owner;
    uint    totalFunds;
    bool    projectSuccess;

    constructor() payable  {
        owner = msg.sender; //msg sender represents address that is being called
        totalFunds = msg.value; //msg value tell us how much ether is being sent
        projectSuccess  = false;
    }

    modifier onlyOwner {
        require(msg.sender == owner);
        _;
    }

    modifier mustBeSuccessful {
        require(projectSuccess == true);
        _;
    }

    address payable[] investors;

    mapping(address => uint) investments;

    function setInvestment(address payable wallet, uint amount) public {
        investors.push(wallet);
        investments[wallet] = amount;
    }

    function payout() private mustBeSuccessful {
        for(uint i=0; i< investors.length; i++) {
            investors[i].transfer(investments[investors[i]]);
        }
    }
    
    function projectSucceeded() public onlyOwner {
        projectSuccess = true;
        payout();
    }
}

```
##### イメージ図
![スクリーンショット 2023-06-16 午前5.54.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3479750/a296cb01-b922-45b3-0748-f260603323e3.png)

## スマートコントラクトの資金分配管理

このスマートコントラクトは、あるプロジェクトの資金分配を管理します。プロジェクトのオーナーが投資家とその投資額を設定します。そして、プロジェクトが成功したら（これは `projectSucceeded` 関数を呼び出すことで示されます）、オーナーは投資家に利益を分配することができます。

### 重要な変数と関数

- `owner`: コントラクトを作成（デプロイ）したアドレス。このアドレスのみがプロジェクトの成功を宣言したり、投資を設定することができます。

- `totalFunds`: コントラクトの作成時に送られるEtherの量。これはプロジェクトの総資金です。

- `projectSuccess`: プロジェクトが成功したかどうかを表すブール値。初期状態は `false` ですが、オーナーが `projectSucceeded` 関数を呼び出すと `true` になります。

- `investors`: 投資家のアドレスのリスト。

- `investments`: 各投資家の投資額を記録するマッピング。キーは投資家のアドレスで、値はその投資額です。

- `setInvestment`: 投資家とその投資額を設定する関数。この関数を呼び出すと、指定されたアドレスと投資額が `investors` リストと `investments` マッピングに追加されます。

- `payout`: プロジェクトが成功した場合にのみ呼び出される関数。この関数を呼び出すと、すべての投資家にその投資額が返されます。

- `projectSucceeded`: プロジェクトが成功したことを宣言し、投資の返済を開始するためにオーナーが呼び出す関数。

## スマートコントラクトの流れ

このスマートコントラクトの流れは次の通りです：

1. プロジェクトのオーナー（コントラクトの作成者）が各投資家とその投資額を設定します。
2. プロジェクトが成功したら、オーナーが `projectSucceeded` 関数を呼び出します。これにより `projectSuccess` が `true` に設定され、`payout` 関数が呼び出されます。
3. `payout` 関数は、各投資家に対してその投資額を返します。

## まとめ

この例を通じて、Solidityを使用してスマートコントラクトをどのように作成するかを学びました。このスマートコントラクトはシンプルながら、Ethereumブロックチェーン上でトランザクションを行い、状態を管理し、様々なアドレス間でEtherを転送するといった基本的な機能を示しています。

実際には、もっと複雑なロジックや安全対策が必要な場合が多いですが、この基本的な例がSolidityとスマートコントラクトの世界への入門となることを願っています。

以上、読んでいただきありがとうございました。
Emacsのfeature/androidとTermux

# GNU Emacsのfeature/androidを使ってみたい
2022年の大晦日に、Emacs開発者Po Luさんによって[feature/androidブランチが立ち上がり](https://git.savannah.gnu.org/cgit/emacs.git/commit/?h=feature/android&id=cfbc8a5dbcd362b69b37b4e6832ae4a31834364c)ました。

以前からAndroid上で動作するLinuxクローンである[Termux](https://wiki.termux.com/wiki/Main_Page)でEmacsは使っていたんですが、AndroidネイティブなアプリとしてEmacsが使えるとなるとユーザーとしてはとてもありがたい話しです。

このfeature/androidポートですが、既に[F-Droidでバイナリが配布](https://f-droid.org/ja/packages/org.gnu.emacs/)されています。ただAndroidの制約上、アプリが別アプリのデータを参照したり実行することはできないらしく、termuxのコマンドやファイルを参照できません(root化した端末であればAndroidのネイティブコマンドを叩けると思います)。これでは松山朋洋さんの良記事、[Emacsは死んだ](https://qiita.com/akmiyoshi/items/1c19d1484049683b4cec)で示されている外部コマンドの使用という特性を活かせません。

そんな折、redditのr/emacs経由でTermuxと色々シェア可能(以下面倒くさいので共存可と略)なEmacsの-[記事](https://marek-g.github.io/posts/tips_and_tricks/emacs_on_android/)を見つけました。

私はこの記事の手順では実際に共存はできなかったんですが、この記事で入手した情報に触発されて色々と試行して、とりあえず共存可能なバージョンを作れたので紹介します。

## 前提
- Androidの開発スキルやEmacs開発スキルは持ち合わせていません(Emacsの野良ビルド経験だけは豊富)ので、その点を踏まえて(ry

- 以下手順では独自に署名を行いますが、同一アプリ別者署名アプリは弾かれる（　´_ゝ\`)当然だろ?)ので、ここで作るTermuxと元々インストールされていたTermux(Google Play StoreやF-Droidからインストールしたもの)は共存できず、故にアンインストールして再インストールすることになります (； ･`д･´)ﾅﾝ…ﾀﾞﾄ!?   …ご利用は計画的に

- 上流を取り込めるようになるべくソース(ビルド用スクリプト類含む)を変えずに主にGithub Actionsのworkflow内で書き換えを行っているので、保安上の不安がある方は上流とのソースのdiffだけではなくworkflowの中も確認してください(foo.ymlを元としたmy_foo.ymlで色々やっています)。

## やっている事の概要
自分で色々やってみたところ、共存するためにいくつかの要件を満たす必要があることがわかりました。

- パッケージ名(javaのclasspath)は共通していること
GNU Emacsはorg.gnu.emacs、Termuxはcom.termux.*なので、org.gnuかcom.termuxのいずれかに統一する必要があります。[help-gnu-emacsの回答](https://lists.gnu.org/archive/html/help-gnu-emacs/2023-05/msg00024.html)によると、com.termux.*側をorg.gnu.emacsに寄せる方法が紹介されていますが、termux側のprefixを変えるとpkg installでインストールできるパッケージをリビルドしてアーカイブをローカルなりリモートなりに別建てしなければならないので、今回はTermux側に寄せました。

- 共有ユーザーID(sharedUserID)は共通していること
これもTermux側に寄せてcom.termuxに。

- 署名に使うキーは共通していること
こちらはfeature/androidに含まれるemacs.keystoreを使いました(Google Play StoreやF-Droidのキーが入手できればTermux関連の手順はいらなくなりますが、入手できませんよねえ)。

## 手順
### Emacs
サンプルは https://github.com/ayatakesi/termux-emacs です。

- レポジトリをfork
本家はsavannahですが、こちらからだとgithubのウェブUI上で上流を取り込めないので、emacs-mirrorのemacsをforkします。

- feature/androidブランチから自分用のブランチをcut
ローカルにcloneしたらfeature/branchをcheckoutして、そこからmy/feature/androidをcut。

- patchを当ててワークフロー作成およびソース修整
patch -p1<my_feature_android.patchでpatchを当てる。

- Github Actionsに書き込み権限を付与
githubのレポジトリのsettingのactionsのgeneralでread and write permissionsを選択。

- pushすればリリースが作成される筈

### Termux
基本的にEmacs側と同じです。サンプルは https://github.com/ayatakesi/ のemacs-compat-termux-app(本体)とemacs-compat-termux-*(プラグイン)です。

- レポジトリをfork
- masterブランチからmy/masterブランチをcut
- patchを当ててワークフロー作成およびソース修整
- Github Actionsに書き込み権限を付与
- pushすればリリースが作成される筈

以上です。
【React】Next.js13のLinkコンポーネントで「target="_blank"」を設定する

## 概要
Next.js12までのLinkコンポーネントでは[Next.jsでの外部リンクおよびリダイレクト](https://dev-k.hatenablog.com/entry/how-to-link-to-external-pages-with-Next-js-dev-k)の記事にある通り、Linkコンポーネント配下にaタグの設定が必要でした。`target="_blank"`の設定もaタグで行えばよいという形になります。
ただ、Next.js13では[Next.js13からnext/linkのLinkコンポーネントが常にaタグをレンダリングするようになったので共有します](https://zenn.dev/k_kazukiiiiii/articles/5e8a72ec1a5d27)の記事の通り、Linkコンポーネント配下にaタグの設定が不要になりました。では、Next.js13のLinkコンポーネントで`target="_blank"`の設定をどう行えばよいかと言うのをメモ書きします。

## 対応方法
Next.js13では、[How to open a link in a new Tab in NextJS?](https://stackoverflow.com/a/75621276)のstackoverflowの記事にある通り、Linkコンポーネントに直接`target="_blank"`が設定できるようになっています。

## 実装サンプル
念のため、Linkコンポーネントに`target="_blank"`を設定した実装サンプルをのせておきます。

```react
<Link href={`/sample/open_tab`} rel="noopener noreferrer" target="_blank">
  別タブリンクサンプル
</Link>
```
ServiceNow - GlideRecord使用方法

### 1.Scripts - Backgroundを開く
[System Definition] > [Scripts - Background]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2843998/eb1aeb22-cabc-4e13-0991-282dac5a087a.png)
任意のScriptを実行できるモジュール。これでGlideRecordの動作を確認する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2843998/eb5c31f1-e9db-73d0-7002-39c43af415ef.png)

### 2.GlideRecordクラスの変数を作成する
変数宣言時にテーブルを指定する。
今回はIncidentテーブルを検索する。
```ruby:Script
var gr = new GlideRecord('incident');
```

### 3.検索条件を設定する
「Short Description = "TEST" and Priority = 1 - Critical」の条件を設定する。
```ruby:Script
var gr = new GlideRecord('incident');
gr.addQuery('short_description', 'TEST');
gr.addQuery('priority', '1');
```

### 4.検索を実行する
query()で実際に検索が行われる。
また、実行確認用のScriptも追記する。
```ruby:Script
var gr = new GlideRecord('incident');
gr.addQuery('short_description', 'TEST');
gr.addQuery('priority', '1');
gr.query();

gs.info("[Number], [Short Description], [Priority]");
while (gr.next()) {
	gs.info(gr.getValue('number')
	+ ", " + gr.getValue('short_description')
	+ ", " + gr.getValue('priority'));
}
```

### 5.確認
[Scripts - Background]にて、Run scriptボタンを押下し、Scriptを実行する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2843998/dfefad88-6db9-893c-de8b-2cbe989f2ce9.png)

一覧画面での検索結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2843998/62691985-17c9-2ac7-5bdc-ba75ec956961.png)
eve-ngv5.0.xをGoogleCloudに導入した際のイメージ化に関する注意点

## 1.はじめに
以前にeve-ng CE(CommunityEdition) v2.0.xをGoogleCloud(旧GoogleCloudPlatform)Compute Engine上に導入する[記事](https://qiita.com/aoi96/items/9c3d3040a50eb5dd053e "EVE-NGv2 on GCE")を書いていましたが、
2022/05にリリースされたEVE-NG CE v5.0.xだと
BaseのOSがUbuntu 16.04からUbuntu20.04に変わった影響からか
公式のCookbookに従ってeve-ngをGCE上のVMにインストールした後イメージ化して、
イメージからeve-ngのVMを作成するとEVE-NGのブラウザでのログイン時にapiエラーを吐くようになっていたので
対応方法をまとめた備忘録になります。
~~network周りに時間がかかるのかインスタンスの起動に5m分弱かかるという問題があるけどまあ動くからいいか~~

## 2.対応手順
[公式のCookbook](https://www.eve-ng.net/index.php/documentation/community-cookbook/ "community-cookbook") p44記載の3.4 Google Cloud Platformに従ってインストールをしていき、
p49にある3.4.5 EVE-NG-Community installatio内のStep 3: Update and upgrade your new EVE-COMMの後に以下のコマンドを実行する。
```
sudo apt-mark hold ntp
sudo apt-mark hold eve-ng
```
上記のコマンドを実行後Step 5. Reboot EVE. Allow some time for reboot and then press “Reconnect”のrebootの手順を実施する。
上記コマンドで解決する理由と原因はいかに書いておきます。

## 3.原因
GCEのコンソールログを見てみる以下のGCEの仕様?が理由でイメージからの起動がうまくいかなかったようです。
- NTPの機能がEVE-NGの依存パッケージであるNTPからchronyに変更されている。
    - Compute EngineのVM初回起動時のcloud-initでapt update&apt upgrade&apt autoremoveされるようでVMの初回起動時にchronyがinstallされて,ntpとntpを依存パッケージとしているeve-ngがuninstallされる。

## 4.対応
[apt-holdコマンド](https://manpages.ubuntu.com/manpages/focal/ja/man8/apt-mark.8.html
 "manpages.ubuntu")でntpとeve-ngを削除されないように変更する。
ServiceNow - スクリプトインクルード作成方法

### 1.モジュールを開く
[System Definition] > [Script Includes]
以下はIncidentでの例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2843998/050e45c1-0978-37b3-0fcc-bde7f3b3dcb2.png)

### 2.新規作成フォームを開く
一覧のNewボタンを押下する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2843998/9f5ee7a0-1c30-92d2-4a61-da089bebbbed.png)

### 3.クラス作成
クラス名(Name)を設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2843998/e39767db-cfaf-baf9-02f5-7f9868a7bb8c.png)

### 4.必要な関数を作成
関数を作成する。
画像の例では、現在から3日後の日付を取得する処理を実装しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2843998/88b7cc5c-b7d5-2644-9216-109fcfc629f7.png)
唯一無二！！サーバーレスメモリキャッシュサービス Momentoから Momento Web SDK が登場！

# はじめに

2023年5月に Momentoから、web SDK が提供され始めました。

# Momento とは
がちのサーバレスキャッシュサービスが Momento です。
実際に使ってみても分かるように、キャッシュの実装がとても簡単にでき、かつ、プロビジョンやスケーリング等の管理は不要で、サクッとキャッシュできる機能を持っております。これ本当にすごい。。

https://qiita.com/yoshii0110/items/3bd0f14ff62ee9313be7

https://qiita.com/yoshii0110?page=1

# Momento Web SDK

* 今回公開された Momento web SDK は web ブラウザ上で実行され momentoの裏側と直接通信するjavaScript コードを記述することが可能になるというものです。
* なので、Momento と web ブラウザ間でキャッシュやpub/subの呼び出しを仲介するWebサービスを自分で構築したり、運用するデメリットを回避することができます。
* あとは単純に、自作したwebサーバーを経由してMomento側とやりとりする必要が今まではありましたが、直接通信することができるようになることで、ネットワーク経路を1ホップ減らすことができるというのも良い点です。

# SDK で公開された新機能

* チャネルベースのWebSockets
* クライアントとサーバー間の共有キャッシュ
* ブラウザ間通信
* APIトークンのプログラマティックな生成

## APIトークンのプログラマティックな生成 とは？？

* 今までは、ユーザーは Momento Console にログインし、GUI から有効期限付きの API トークンを生成することができました。設定可能な時間でたとえば1時間が経過すると、API トークンは無効化され、使用できなくなります。
* ただ、コンソールから手動でこれらのトークンを取得するのは大変ですよね？
* そこで、ブラウザで安全なトークンの使用をサポートするため、Node.js SDKを改修し、期限切れトークンをプログラムからリフレッシュすることを可能にしました。
* プログラム的に生成されたトークンは、キャッシュの作成、キャッシュの削除、他のAPIトークンの作成などのコントロールプレーン操作にアクセスすることができません。


# 公式ドキュメントで提供されているサンプルアプリ

https://github.com/momentohq/example-chat-app

## サンプルコードの確認

* どうやら、Next.js と Momento SDK で作成されたリアルタイムチャットアプリケーションのようです。
* ユーザが Websocketとして、Momento Topics を使用し、一時データストアとして Momento Chache を使用するような作りだそうです。


![スクリーンショット 2023-06-15 16.16.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/4be8070f-23a2-7267-a197-4ccb92a7c9d1.png)

![how-it-works.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/c4cb462f-8414-46e4-a895-d8bd7eb4e798.png)

(引用元: https://github.com/momentohq/example-chat-app)

## サンプルアプリの動き

1. ユーザーがアプリケーションにログインすると、認証エンドポイントから一時的な認証トークンを受け取ります。
2. 認証トークンを受け取ると、アプリケーションは Momento Web SDK を初期化し、チャットルーム作成用のトピックをサブスクライブします。
3. ユーザーが新しいチャットルームを作成すると、メッセージがトピックに公開され、チャットルームリストを開いて更新するよう他のすべてのブラウザに通知されます。
4. ブラウザは、利用可能なチャットルームのリストを含むキャッシュアイテムを Momento から取得します。

## 注意事項

* サンプルアプリ内に.envファイルを作成し、環境変数 NEXT_PUBLIC_AUTH_BASE_URL を追加する必要がある。
* ここで NEXT_PUBLIC_AUTH_BASE_URL に記載するURLは、nodeなどで作成した generateAuthToken を返すことができるバックエンドAPIを自作し書く形となります。

* なお、現時点(2023年6月15日時点)では、generateAuthToken を利用できる言語に限りがあるので、注意が必要です。
 
![スクリーンショット 2023-06-16 2.11.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563635/f9c8131c-db2d-ec15-6b48-fd072c76f038.png)

https://docs.momentohq.com/ja/develop/api-reference/language-support


# 参考資料

https://www.gomomento.com/blog/hello-world-introducing-the-momento-web-sdk

https://docs.momentohq.com/ja/develop/sdks/web

https://github.com/momentohq/example-chat-app
【SQL】テーブルに「INSERT」でデータを挿入する

# はじめに
「INSERT」はテーブルにデータを挿入するときに使います。
その基本的な使い方についてご説明します。

# 例として使用するテーブル
今回の例として以下のmembersテーブルをご用意しました。

**membersテーブル**
|id|name|age|team_number|
|---|---|---|---|
|1|hitomi|39|2|
|2|nibe|25|1|
|3|mikuni|21|3|
|4|yosoya|31|2|

# INSERTの基本構文
基本となる構文は以下の通りです。
```.sql
INSERT INTO テーブル名 (カラム名1,カラム名2,・・・)
     VALUES (カラム1に入れるデータ,カラム2に入れるデータ,・・・);
```
今回の例では(カラム名) は「id」「name」「age」「team_number」、 (テーブル名)は「members」です。
試しにデータを挿入してみましょう。
```sample.sql
INSERT INTO members (id, name, age, team_number)
     VALUES (5, 'ikarugi', 42, 1);
```
データが挿入されたか、SELECTで確認してみましょう。
（SELECTについては下記の記事をご参照ください。）

https://qiita.com/Takahiro_Nago/items/e4db0d22c420da589378
```sample.spl
SELECT * FROM members
```
出力結果は以下のようになります。
|id|name|age|team_number|
|---|---|---|---|
|1|hitomi|39|2|
|2|nibe|25|1|
|3|mikuni|21|3|
|4|yosoya|31|2|
|5|ikarugi|42|1|

新しくデータが挿入されているのがわかります。

## カラム名の省略について
先ほどの構文は、カラム名を省略することができます。
```.sql
INSERT INTO テーブル名 VALUES (カラム1に入れるデータ,カラム2に入れるデータ,・・・);
```
試しにデータを挿入してみましょう。
```sample.sql
INSERT INTO members
     VALUES (6, 'mutsuki', 29, 3);
```
データが挿入されたか、SELECTで確認します。
```sample.spl
SELECT * FROM members
```
出力結果は以下のようになります。
|id|name|age|team_number|
|---|---|---|---|
|1|hitomi|39|2|
|2|nibe|25|1|
|3|mikuni|21|3|
|4|yosoya|31|2|
|5|ikarugi|42|1|
|6|mutsuki|29|3|

新しくデータが挿入されているのがわかります。

### 省略形の注意点
こちらの省略形は一見便利なようですが、仕様変更によりテーブルのカラム数が変わるとデータの数が合わず、エラーの原因となります。基本的には省略せず明示的に描くことが推奨されています。
Rでグラフの凡例の幅が大きくなってしまう現象とその回避策

Rで出力したグラフに`legend()`関数を使って凡例を書き込んだところ、凡例のボックスの幅が広がって文字列の右側に余白ができてしまう現象にハマった。そのワークアラウンドです。

**実行環境**
R 4.3.0, macOS 12.6.5

サンプルのコードはこれです。今回プロット領域の外側にも凡例を書きたいので、1行目の`par`関数で引数`mar`を指定し、プロット右側のマージンを8に設定しました[^1]。さらに`xpd=TRUE`を指定して凡例のボックスがプロット領域でクリップされないようにします。
[^1]: マージンの指定順序は、bottom, left, top, right。

```R
op <- par(mar=c(5.1,4.1,4.1,8), xpd=T)
items <- c("sample A 12", "sample B")
colors <- c("red", "blue")
boxplot(15:75,30:90,5:35,2:30)
legend("topleft", inset=c(1.01,0), legend=items, fill=colors)
legend("topright", legend=items, fill=colors) 
legend("left", inset=c(1.01,0), legend=items, fill=colors)
legend("right", legend=items, fill=colors)
legend("topleft", legend=items, fill=colors)
legend("bottomleft", legend=c("sample A 12345", "sample B"), fill=colors)

par(op)
```

このスニペットをRのコンソールにコピペして実行すると、
![01_console.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/ef114c15-7711-0a62-8645-7adbcc180ca7.png)
凡例のボックスの幅が項目の長さに応じて自動的に調整されました。これは期待どおりの結果です。
![01_result_console.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/d6ca367b-5bc4-30d0-7b7c-d00d9c75c463.png)
次に、上記のスニペットをファイルに保存し、コンソールから`source()`関数でこのスクリプトを読み込ませて実行してみましょう。
![02_source_command.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/d80144a9-2493-c7ca-62d1-5f2c802687fb.png)
結果は下図のとおり。凡例のボックスの幅が広がって文字列の右側に大きな余白ができています。さらに、プロット領域の外側に配置した凡例はウインドウの右端でクリップされ、ボックスの右側が欠けてしまいました。
![02_legend_width_incorrect.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/d5bbb58d-6fbc-a506-ae2b-217b2a06a924.png)
なぜ`source()`で実行した場合は凡例のサイズが正しく調整されないのでしょうか？コンソールにコードを直接入力した場合と`source()`とで、何か実行のタイミングの違いが影響してそうです。そこで、`legend()`の呼び出しのタイミングを遅らせて試したところ、問題は解消しました！以下、その方法です。

### 方法1. プロンプトを表示して処理を一時停止する
最初に試した方法。Rがグラフをプロットする前にプロンプトを表示して処理を一時停止し、Returnキーを押すとグラフが表示されるようにしてみます。プロンプトを表示するには、1行目の`par()`の引数に`ask=TRUE`を追加するだけです。

```R
op <- par(mar=c(5.1,4.1,4.1,8), xpd=T, ask=T)
```

このように修正したスクリプトを`source()`から実行してみます。
![03_prompt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/604f66c6-ef7c-311b-74f4-65893a0da498.png)
最初ブランクのQuartzウインドウが表示されますが、Returnキーを押すとグラフが表示されます。結果、凡例のボックスは期待どおりのサイズで表示され、コンソールにコードを打ち込んだ場合と同じになりました。
![03_legend_delay.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469745/d47a8942-84d9-e72c-03b6-b02a1b1e5c10.png)

## 方法2. legend()の前にSys.sleep()を入れる
グラフをプロットした後、最初の`legend()`を呼び出す前に`Sys.sleep()`関数を呼んでRの処理を一時停止します。サンプルのコードでは、`boxplot()`の直後に`Sys.sleep()`を入れます。

```R
boxplot(15:75,30:90,5:35,2:30)
Sys.sleep(0.5)
legend("topleft", inset=c(1.01,0), legend=items, fill=colors)
```

この方法でも正しく表示できました（図は省略）。ただし、`Sys.sleep()`の引数に指定する秒数が短すぎると効果がありません。今回試した環境では、0.1秒では効果がなく、0.2秒以上で正しく表示できました。


**参考**
- [Legend box width not correct when using par](https://stackoverflow.com/questions/15436720/legend-box-width-not-correct-when-using-par)
- [How to Draw a Legend Outside of a Plot in R](https://www.statology.org/legend-outside-plot-r/)
- [R] Time Delay / Wait: https://stat.ethz.ch/pipermail/r-help/2010-November/259566.html
ファビコンを取得する方法

## 取得方法

以下のURLにファビコンを取得したいサイトのドメインまたはURLを末尾に追記するとファビコンが別のタブで表示されます。

```
http://www.google.com/s2/favicons?domain=ファビコンを取得したいサイトのURL
```
ファビコンのサイズは16x16ですが、表示されたタブのURL末尾の`size=`の値を変更することで別のサイズを取得できます。

```
https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=ファビコンを取得したいサイトのURL&size=64

```

上記の場合には64x64が表示されます。
将棋のゲームの開発について小人(開発者)2人をChatGPT GPT-4モデルに建てて脳内会議させた

# 脳内会議させてみた。

※筆者はこの出力がされている間はずっと味噌ラーメンをすすっていました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559034/3d2a00e3-e0b0-a2f0-eb1e-19f8477c2339.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559034/ee32b6fd-2aa1-048a-020e-1cd7548e0982.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559034/30bfddb7-0f06-aa48-89f5-710ad4c2ef5e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559034/3f8df69d-2d7f-7eff-5ef5-1baa4934d99c.png)

### 開発会議がちゃんとできてるぅぅううううううううう！！！人生タジマハ＼(^o^)／
(実はオワタなのかもしれないけど..という恐怖すら感じる)

# 詳細を開発させてみた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559034/30a69e33-6e5f-386e-0d40-fc248c3b30fe.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559034/477859cf-d267-2e8e-360d-b42282e64422.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/559034/178eb13b-8b72-012c-8610-1556e83a7279.png)

省略部分は骨が折れるので、割愛。

## おわり。
vitesse-webext でのエラー Cannot read properties of undefined (reading 'fingerprint')

# 困ったこと
[vitesse-webext](https://github.com/antfu/vitesse-webext) という Chrome 拡張開発用のテンプレートを利用して開発していたところ、下記のようなエラーが起こった

### エラー発生箇所
```src/contentScripts/index.ts
import { sendMessage } from 'webext-bridge/background'

sendMessage('get-backlog-ticket', { ticketId: matches[0] }) // エラー
```

### ブラウザでのエラー
```
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'fingerprint')
```

なかなか原因が分からずハマりました。

# 解決策
単純に import 元が間違っていました。

```src/contentScripts/index.ts
import { sendMessage } from 'webext-bridge/content-script' // NG: background 

sendMessage('get-backlog-ticket', { ticketId: matches[0] })
```

型エラーなども出なかったのでなかなか気づきませんでした。

前にも一度ハマったし、またハマりそうなのでここにメモしておきます。

# 参考
同じことしている人を見つけました。

https://github.com/zikaari/webext-bridge/issues/57#issuecomment-1556541939
拡張機能ストアのロゴ素材の配布場所

↓拡張機能の説明ページでこういうのを見たことがあるかもしれません。これらの素材は公式で配布されています。

![Screenshot_20230616-005514.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420120/c038ab28-7d00-f947-357f-fb586d702f36.png)

素材は次のWebページからダウンロードできます。素材にはそれぞれのライセンスやガイドラインが適用されます。

## Chrome Web Store

- [Branding Guidelines - Chrome Developers](https://developer.chrome.com/docs/webstore/branding/)

## AMO（Firefox） 

- [Promoting your extension or theme | Firefox Extension Workshop](https://extensionworkshop.com/documentation/publish/promoting-your-extension/)

## Edge

:::note warn
以下のロゴはMicrosoft Storeで配布されているソフト向けの素材です。Edgeの拡張機能に利用できるかは明記されていません。[App Developer Agreement](https://query.prod.cms.rt.microsoft.com/cms/api/am/binary/RWZqKf#license_to_mark)の「License to Microsoft Marks」と「EXHIBIT F: TERMS AND CONDITIONS FOR MICROSOFT EDGE EXTENSIONS」を読んだ感じでは使えそうではありますが、ご自身で確認の上使ってください。
:::

- [Microsoft Store のアプリ向けマーケティング ガイドライン - Windows apps | Microsoft Learn](https://learn.microsoft.com/ja-jp/windows/apps/publish/app-marketing-guidelines)
VSCodeのExtensionをGitで管理するためのスクリプトを時代の潮流に合わせて改修したというお話

# 概要
筆者は随分前に以下の記事で複数環境のVSCodeの拡張機能を同期するためのスクリプトの作り方を投稿しました。当時VSCodeには複数環境で拡張機能を同期する機能は有りませんでした。しかし、時代は流れて3年程、Microsoftアカウントによる同期に対応しました。よってスクリプトも過去の物。。。と思いきや、自宅のPCのVSCodeと業務用のPCのVSCodeでの同期には相変わらずMSアカウントは流石に使えません。。。 :sweat: よって時代の潮流に合わせたスクリプトに改修することにしました。

https://qiita.com/y-vectorfield/items/0afc1e82b90e21470b5a

# スクリプトの作り方
以下の様にスクリプトファイルを記載するだけです。自宅のPCでこのスクリプトを実行すれば、`install_extensions.sh`が作成され、インストール済の拡張機能同期用のスクリプトファイルが作成されます。これをGitで管理すれば同期は容易に実行出来ます。もしもの時のためのインストール済拡張機能リストのバックアップにもなります。

:::note
前回はWindows用Batファイル作成用スクリプトも作りましたが、WSL2環境下でスクリプトが実行出来る時代となったため、廃止することにしました。
:::

```bash
#!/usr/bin/env bash

echo "#!/usr/bin/env bash" > install_extensions.sh
echo "" >> install_extensions.sh
code --list-extensions | xargs -Iex_name echo "code --install-extension ex_name --force" >> install_extensions.sh
chmod +x install_extensions.sh
```

# Reference
https://shinya131-note.hatenablog.jp/entry/2015/07/02/202334
Microsoft Certified Azure Solutions Architect Expert 完了

- AZ-305 完了　882
    - Microsoft Learn サイト閲覧＞要点書き出し
    - Udemy 学習２周
    - 試験問題切替タイミングに当たらなければUdemy丸暗記だけでも問題無し
    - Microsoft Azure Administratorより若干ソリューション寄りの内容ではあるけど、AWSSAA＞AWSSAP程の難度差は無し

- 上期は以上、10月情報処理の後、会社推奨資格、CompTIA　Cysa＋の予定、昨年取得出来ていれば業務合わせでGCP資格の方に手を付けられたのだけど。
- 維持が必要な資格が増えてきたので、更新忘れそう。
Linuxコマンド

#### Linuxの基礎コマンドまとめ

`* cdコマンド(change directory)`
ディレクトリを移動する。ディレクトリ名をcdの後に指定する。

`* pwdコマンド(print name of working directory)`
自分の今いるディレクトリ（カレントディレクトリ）を確認する。

`* lsコマンド(list)`
今いるファイルやディレクトリ内の一覧を表示するコマンド

`* mkdirコマンド(make directory)`
ディレクトリを作成するコマンド。ディレクトリ名は日本語だと文字化けしたりする恐れがあるので、英語で作成するのがおすすめ。

`* catコマンド(concatenate)`
ファイルの中身を表示するコマンド。

`* lessコマンド(less-opposite of more)`
ファイルの中身をスクロール表示するコマンド。
長いファイルの中身を見たい時に使うコマンド。catコマンドだと一画面で収まらず、長すぎて見えにくい。そんな時にlessコマンドを使えば別のスクロール上で表示してくれるので長くても支障なく見れる。
`* tailコマンド`
指定したファイルの末尾10行を標準出力に表示する。表示する行数やバイト数を指定することもできる。複数のファイルを指定した場合は、ファイル名がファイル内容の前に表示される。

`* touchコマンド(touch)`
空のファイルを作成するコマンド。本来タイムの日時を更新するためのコマンド。間違って存在しているファイルを指定しても上書きしたりしないから安全。

`* rmコマンド(remove)`
ファイル・ディレクトリを削除するコマンド。rmコマンドを実行すると、ごみ箱に行くのではなく本当に削除されるので気を付けよう！

`* mvコマンド(move)`
ファイルの移動、ファイル名を変更するコマンド。
mv 移動元　移動先
移動先がファイル名→ファイル名が変わる
移動先がディレクトリ名→ファイルの場所が変わる
ディレクトリかファイルかは、システムが自動で判断する。

`* cpコマンド(copy)`
ファイル・ディレクトリをコピーするコマンド。
cp コピー元　コピー先
コピー先のファイルが既にあると上書きするので気を付けよう。

`* lnコマンド(link)`
リンクを張るコマンド。
ln リンク元ファイル名　リンク名

リンクを張るってどういうことか(・・?
Linuxではファイルに別名をつけることができ、別名をつけることを「リンクを張る」という。
Windowsでいうショートカットのようなもの。
ハードリンクと、シンボリックリンクがある。

`* findコマンド(find)`
ファイルを検索するコマンド。
find 検索開始ディレクトリ　検索条件　アクション
ファイルがどこにあるか探す時findコマンドを使うと便利。

`* chmodコマンド(change mode)`
ファイルやディレクトリのパーミッションを設定する

`* chownコマンド(change owner)`
ファイルやディレクトリの所有者を変更するコマンド。

`* psコマンド(process status)`
実行中のプロセスを表示するコマンド。

`* killコマンド(kill process)`
ジョブやプロセスを終了させるコマンド。
WEB+DB vol.133のTypeScript最新活用を読んだメモ

TypeScriptの学習をはじめようとしたところ、「WEB+DB vol.133のTypeScript特集も読むといいよ」と教わったので読んでみました。
その特集の中で気になったツールや単語をメモっていきます。

```
ちなみに、自分はKotlinを使ったAndroidアプリ開発者で、TypeScriptはほぼ書いたことがありません。
（node.jsはある程度書けるが...）

そのため、当記事はTypeScript初心者向けとなります。
```

## ESLint

- JavaScriptのためのリンタ
- リンタのデファクトスタンダード
- カスタマイズしやすいのが特徴
- 設定は共有可能
- フォーマッタとしても使えるが、Prettierのほうが貫したコーディングスタイルを強制できる
- 欠点は、、、
  - Prettierと組み合わせると複雑になり、初学者が設定でつまずく要因となる
  - 大規模プロジェクトになるとパフォーマンスに問題がでてくる

## Prettier

- フォーマッタのデファクトスタンダード
- JavaScriptだけでなくやTypeScriptだけでなく、HTMLやCSS，GraphQLやMarkDownもサポートしている
- 設定項目が少ないのが特徴
- 欠点は、、、
  - Prettierのコーディングスタイルが気に入らない場合はそれを無効化できない
    - （カスタマイズ性が低い？）
  - 大規模プロジェクトになるとパフォーマンスに問題がでてくる

## Rome

- **Rust製**
- フロントエンドの開発のオールインワンツール
- 現在のフロントエンドのツール郡を置き換えることを目標としている
- パフォーマンスが良い
- 2023年６月時点ではまだ開発中
- フォーマッタとリンタのみリリースされている

## Deno

- JavaScript/TypeScriptランタイム
- 開発に必要なツールをビルトインで提供している
- フォーマッタ `deno fmt` とリンタ `deno lint` が紹介されていた
- **Rust製**
- リンタは主にDenoをターゲットとしており、ESLintを置き換えるわけではないらしい


## トランスパイル

- TypeScriptコードをJavaScriptに変換する工程のこと
- なぜなら、TypeScriptコードをブラウザは実行できない

## トランスパイラ

- トランスパイルしてくれるプログラムのこと
- Babelが有名
- 昔は新しいJavaScript構文を古い構文に変換してた
  - IE対応や、ES6をES5に変換など
- 現在は新たな役割として以下に使われている
  - TypeScriptのトランスパイル
  - JSXのトランスパイル

## Babel
- トランスパイラとして有名
- プラグインシステム（独自の定義）のを追加が便利らしい
  - 便利すぎてプラグインブーム？になったようだ
- JavaScript製で、**パフォーマンスに懸念がでてきている**

## バンドラ

- フロントエンド開発の欠かせないツール
- importやexportで分割されたコードを解決しつつ、１つのJavaScriptファイルに変換する
- ホットリロードの役割も持っている
- 変換速度の高速化が求められているため、GoやRust製のツールが出始めている

## SWC

- Vercelという会社が開発したトランスパイラ
- **Rust製で高速**
- BabelのかわりにSWCを選ぶプロジェクトも出始めている
- BabelをSWCに置き換えるとビルド時間が35％削減されたらしい
- 次のデファクトスタンダードを期待される期待の星らしい

## turbopack
- Vercelという会社が開発したバンドラ
- **Rust製で高速**
- 現時点ではアルファ版
- webpackを置き換えるのが目的らしい？

## esbuild

- トランスパイラとバンドラが合体したツール
- Go製で高速
- Bubelやwebpackより高速化なのが売り
- TypeScriptとJSXのトランスパイルもサポート済み
- このツール１つでトランスパイラとバンドラが実行できるのが便利らしい

## webpack

- バンドラのデファクトスタンダード
- loaderという拡張機能でCSSや画像ファイルをimportして使用できる
- ツールの設定の自由化がとても高い
- JavaScript製で、**パフォーマンスに懸念がでてきている**

## ES Module
- 分割されたJavaScriptファイル（モジュール）をimport/exportでつなぐしくみのこと
- import/exportでつながったモジュールは非常に遅いため、バンドラで１つのJavascriptファイルにしておくのが定番

## AST
- Abstract Syntax Tree（抽象構文木）
- ソースコードを扱いやすいように加工されたデータ構造のこと
- ESLintやPrettierの構文チェックで使わている
- Babelやwebpackも使っているが、両者でASTが異なるため、無駄な変換が発生してパフォーマンスが遅いらしい
- SWC + turbopack の組み合わせで同じASTフォーマットを扱えれば、高速化が期待できるらしい
- esbuildも同じASTフォーマットなので？高速らしい


## 最後に感想

- Rust製のツールがかなり高速なようで、期待値がかなり高いらしい
- **将来はRust製ツールが主流になる**、と筆者は述べていた
- Goも早いが、Rustはもっと早い
- プラグインをRustで書く時代がくるかもしれないため、Rust覚えるといいかも

フロントエンドに**Rustの波**が徐々にきてます！
まずはSWCから慣れて行きましょう！
ServiceNow - UI アクション作成方法

### 1.モジュールを開く
[System Definition] > [UI Actions]
または、
対象テーブルフォームのコンテキストメニューからアクセスする。
以下はIncidentでの例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2843998/482d7da9-5bf0-5fa7-7ab4-fd46b691d9f3.png)

### 2.新規作成フォームを開く
一覧のNewボタンを押下する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2843998/090ea922-62ba-08c3-d95d-0eee91e54107.png)

### 3.各種設定
フォーム上部にボタンとして配置するため、[Form button]フィールドにチェックを入れる。
レコード編集フォームのみ表示させるため、[Show update]フィールドにチェックを入れ、[Show Insert]フィールドのチェックを外す。
Adminユーザのみに表示させるため、[Condition]フィールドに条件Scriptを記載する。
※[Client]フィールドのチェックを入れると、Client側の処理となる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2843998/4ecaf591-6db4-c7de-2413-36d79e8063eb.png)
NANO Pi NEO で、ラズベリーパイpico用のnuttxをビルドする件


http://sea.sunlake.nu/~w3/build_nuttx_on_nano_pi_neo/
NANO Pi NEO で、ラズベリーパイpico用のnuttxをビルドする件
　　　　　　　　　　　　　　　　　　2023/6/15  takkejan

nano pi neo で、ラズベリーパイpico用のnuttxをビルドしようとして、
はまったことと、解決した手順を以下に記述します。

nano pi neoのOS：
　　Armbian 23.02.2 Jammy with Linux 5.15.93-sunxi

nano pi neoで、インターネット上のサイトに掲載されていた
情報から、以下の手順を実施。

cd /mnt/proj01/   (私の開発環境の場所）

apt install kconfig-frontends

apt install gcc-arm-none-eabi

git clone -b 1.1.2 https://github.com/raspberrypi/pico-sdk.git  

export PICO_SDK_PATH=/mnt/proj01/pico-sdk

git clone https://github.com/apache/nuttx.git nuttx

git clone https://github.com/apache/nuttx-apps.git apps

cd nuttx

make distclean

./tools/configure.sh -l raspberrypi-pico:usbnsh

上記の後に、以下の手順を追加で実行。（注１）

cd /mnt/proj01/nuttx/include
rm math.h
rm -rf machine
ln -s ../libs/libm/newlib/include/math.h math.h
mkdir machine
cd machine
ln -s ../../libs/libm/newlib/include/machine/ieeefp.h ieeefp.h
cd /mnt/proj01/nuttx/

その後、makeを実行。

make

コンパイルが通り、nuttx.uf2が生成された。

以上

注意事項：
　nano pi neoは、かなり熱くなるので、先にCPUにヒートシンクを
　付けてからやったほうがいいと思います。

　　　：
【FORTRAN】日刊工業新聞社「プログラミング実習シリーズ① FORTRAN 」のレビュー

## はじめに
日刊工業新聞社より1989年に出版された、「プログラミング実習シリーズ① FORTRAN 」を一通り読ませていただきました。

本の詳しい情報について、インターネットで調べても得られませんでしたので、記録として残しておきます。

また、サンプルプログラムについて、私なりに解いたものを[こちらに公開しています。](https://github.com/onodera-g/ISBN4-526-02560-7)

## 実行環境
MacBook Air 2020(M1)
VsCode 1.79.0
Docker(OS:Debian 10.2.1-6)
gfortran 10.2.1 

## 概要
学生向けの講義に使われることを意識した本です。(1989年当時)
キーボードやディスプレイ等の基本的な使い方や、アルゴリズムとは何か、プログラムとは何かなどの基本的なことから書かれてあります。

内容について、序盤はサンプルプログラムの一行ごと丁寧な解説があります。
終盤になるに従って、解説は要点を絞ったものになります。

## 収録内容(目次)
<details><summary> 長いので折りたたんでいます</summary><div>

- 【１章】コンピュータと対話するためには
    - ファイルの実行
    - キーボードモニタの使い方)
- 【2章】プログラミングの基礎となること
    - アルゴリズムとは
    - プログラムとは
    - フローチャート
- 【3章】基本的なFORTRANプログラムを見る
    - プログラムの書き方
    - アルゴリズムとは
- 【4章】機能の基本的なことを知る
    - 変数、定数
    - 配列
    - READ文
    - 関数
    - IF文
    - DO文
    - 編集記述子     
- 【5章】プログラミングを容易にする機能
    - サブルーチン
    - 文関数(Function)
- 【6章】知っていると便利な機能
    -　データの型
    -　入出力 
    -　PARAMETA文、IMPLICT文
- 【7章】プログラム例
</div></details>


## 注意点
- プログラムの終了判定に、キーボード入力時のEND指定子が使われています。
~~私の環境では、キーボード入力次にEND指定子が入れられませんでしたので、一部分をTXTからの読み込みで対応しました。~~
<font color="red">Control + D でEND指定子を挿入することができます。(@cure_honey 様にご指摘いただきました。ありがとうございます。)</font>

- PROGRAM F7X2 で SUBROUTINEに引数Aを渡すと、原因不明のメモリエラーになりました。(SUBROUTINE内でAを定義することで回避しました。)
- PROGRAM F7X7 の３３行目の終了判定が `X+H .GT. XEND`　になっていますが、このままだと１回分出力が少なくなってしまいます。
終了判定を `X .GT. XEND`　にして対応しました。

- ~~WRITEでの出力の初めに、`' 1'`が入れられているプログラムがあります。
書籍内での実行結果には出てこないので、`' '`に置き換えて対応しました。(当時の実行環境の仕様？なんでしょうか)~~
<font color="red">当時のキャリッジ制御用の文字であり、出力の際の改ページ、スペースの挿入等を制御しているみたいです。(@cure_honey 様にご指摘いただきました。ありがとうございます。)</font>

調べたところ、Oracleで公開されている FORTRAN 77 言語リファレンス(表5.4)に該当する記述がありました。以下のサイトです。

https://docs.oracle.com/cd/E19957-01/806-4841/io.html
AWSでRDSからMySQLを起動するまでの流れ【完全な自分用】

## はじめに
この記事は完全に自分用に投稿しております。

## MySQLを起動するまでの手順
SSHでサーバーにアクセスします。
キーペア、アクセス先サーバーのユーザ名、パブリックIPアドレスを指定します。
EC2では、初期設定のユーザ名は必ず「ec2-user」です。@の左側に「ec2-user」、右側にパブリックIPアドレスを指定します。私の場合は下記のようなコードになります。
~~~
ssh -i ~/.ssh/practice-aws.pem ec2-user@#######
~~~
###　の部分は「パブリック IPv4 アドレス」を記載する。
<details><summary>パブリック IPv4 アドレスの場所</summary>

AWS→EC2→インスタンス→起動したインスタンスにチェック→ネットワーキング→ネットワーキングの詳細　にあります。
</details>
<details><summary>コーディング時の注意点</summary>

@のあとにスペースを入れるとエラーが起きます。
</details>

### MySQLに接続する
次に、下記のコードを記入します。
~~~
[ec2-user@ip-xx-xx-xx-xx ~]$ mysql -u root -p -h rds-mysql-server.xxx.ap-northeast-1.rds.amazonaws.com
Enter password:
~~~
「mysql」コマンドで接続します。コマンドは、以下のような構造になっています。
**mysql -u （マスタユーザ名） -p -h （エンドポイント）**
「-u」はユーザ名、今回はrootにしています。
「-p」はパスワードの入力、「-h」は接続先の情報を表すオプションです。
エンドポイントの場所は下記に記載します。
実行後に「Enter password:」とパスワードを要求されます。
「パスワード」は、「マスターパスワード情報」で設定したパスワードを入力します。
※ パスワード入力時に、文字や伏せ字は画面表示されません。
このため、何も入力されていないように見えていても、問題なく入力されています。

<details><summary>エンドポイントの場所</summary>

RDS→データベース→DB 識別子の名前をクリック→接続とセキュリティ→エンドポイント
</details>

<details><summary>「マスターパスワード」の保管場所</summary>

https://passwords.google.com/?hl=ja
</details>

これで、MySQLに接続することが確認できました。
EC2側の仕様変更により「Welcome to the MariaDB monitor.」と表示される等、出力が異なる場合がありますが「Welcome to the ...」から始まるメッセージが
出力されていれば、問題なくMySQLに接続できています。

なお、MySQLから切断するには、「exit」を入力するか、Ctrl + Dを押してください。

以上
PySimpleGUIでフレームを横並びにする

## はじめに
左にボタンや入力欄を置いて値を入力し、右に結果を表示するケースは頻発しそうなので、やり方をまとめる

## 実装サンプル
```Lua
import PySimpleGUI as sg

leftFrame = sg.Frame('leftFrame', [[sg.Text("left")]], size=(300,500))
rightFrame = sg.Frame('rightFrame', [[sg.Text("right")]], size=(300,300))

layout = [
    [
        leftFrame, rightFrame
    ],
    [
        sg.Button('Exit')
    ]
]

window = sg.Window('sample', layout, resizable=True)

while True:
    event, values = window.read()

    #clese btn
    if event in (sg.WIN_CLOSED, 'Exit'):
        break

window.close()
```
上のコードを実行する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3473989/c89e7ccf-feba-67bb-d93f-8a143d4ee9eb.png)
イメージとして、配列がレコードになっていて、配列の値ひとつひとつがフィールドになる。
`,`で改行されて、ひとつ下に行を挿入する（コードだと[sg.Button('Exit')]の部分）イメージ。
なお、デフォルトだとrightFrameが中央寄せになってしまうが、上寄せで使いたいことの方が多いと思う。その場合は
`vertical_alignment="top"`を指定する。なお、このvertical_alignmentの指定にはenumでAlign.Top的な指定はできず、stringで直接指定しないといけない。t,c,rのように一文字もいけるらしいが、ぱっと見わかりにくそうなのできっと使わない方が良さげ
> vertical_alignment: Place the Frame at the 'top', 'center', 'bottom' of the row (can also use t,c,r). Defaults to no setting (tkinter decides)

```Lua
rightFrame = sg.Frame('rightFrame', [[sg.Text("right")]], size=(300,300), vertical_alignment="top")
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3473989/0ed5993a-97f7-33df-e903-150d4ea7e2fc.png)

## おわりに
配列一つがレコード、改行==配列追加と覚えておくと頭の中で整理しやすいので、そのように覚えておく
【App Store】サブスク関連のリジェクト事例とその対処法

# はじめに
先日、アプリの審査でサブスクに関するリジェクトを受けました。この記事ではその時のリジェクト内容と対処法を紹介します。

# リジェクト内容
リジェクトされたときのメッセージは以下の通りです。

<details><summary>Guideline 3.1.2 - Business - Payments - Subscriptions</summary><div>

We noticed that your app did not meet all the terms and conditions for auto-renewing subscriptions, as specified in Schedule 2, section 3.8(b) of the Paid Applications agreement. 

We were unable to find the following required information in your app's binary:

– A functional link to the Terms of Use (EULA)
– A functional link to the privacy policy

We were unable to find the following required item(s) in your app's metadata:

– A functional link to the Terms of Use (EULA)
– A functional link to the privacy policy

Next Steps

To resolve this issue, please add this missing information. If the above information is present, please reply to this message in App Store Connect to provide details on where to locate it. 

If you are using the standard Apple Terms of Use (EULA), you will need to include a link to the Terms of Use in your App Description. If you are using a custom EULA, add it in App Store Connect.

Resources

- Learn more about offering auto-renewable subscriptions on the App Store.
- Review the Paid Applications agreement (App Store Connect login required).

---
</div></details>

# 対処法
対処法は以下の二つです。
- アプリ内に利用規約とプライバシーポリシーのリンクを追加する
- アプリの説明欄に利用規約のURLを記述する

## 利用規約とプライバシーポリシーのリンクを追加する
SwiftUIでは、このようにリンクを追加できます。

```swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            // markdownでリンクを追加
            Text("""
            [利用規約](https://www.apple.com/legal/internet-services/itunes/us/terms.html)と[プライバシーポリシー](https://cool-jujube-302.notion.site/Crisp-Zoom-Camera-0e113d2acfad4b91a91977b23d8edebd?pvs=4)
            """)
            .padding()
        }
    }
}
```

利用規約を用意していない場合、[標準のApple利用規約](https://www.apple.com/legal/internet-services/itunes/us/terms.html)を使用することができます。
また、Notionを使うと簡単に利用規約やプライバシーポリシを公開できるのでおすすめです。

## アプリの説明欄に利用規約のURLを記述する
![スクリーンショット 2023-06-16 0.09.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366249/05c0cf28-e10b-8894-7e94-e70eb0815a87.png)


# おわりに
サブスクを導入するときは、アプリ内に利用規約とプライバシーポリシーのリンクを追加し、アプリの説明欄に利用規約のURLを記述することを忘れないようにしましょう！
BPMSとは

# はじめに
毎週1本様々な技術に関する記事を投稿しています。
もし興味のある方は下のリンクから他の記事も見ていただければ幸いです。
 [@7_inai_](https://qiita.com/7_inai_)


# BPMとBPMS
- BPM(Business Process Management)：
`組織がビジネスプロセスを効率的に管理するための総合的なアプローチや方法論`
- BPMS(Business Process Management System/Suite)：
`BPMを実現するためのソフトウェアやテクノロジーの統合セット`

# BPMSが注目される背景
様々な理由から、昨今は特にBPMSの注目度が向上していますが、その理由を以下に記載します。

- 顧客中心アプローチの重要性
製品のコモディティ化、サブスクリプションの増加により、競合他社との差別化を図るために、__顧客中心のアプローチ__ が重要視されています。BPMSを活用することで、顧客の満足度を向上させることができます。
- DXの推進
多くの組織が[DX](https://qiita.com/7_inai_/items/c365a3dfc8637d35c014)を進めており、ビジネスプロセスの効率化と柔軟性の向上が求められています。BPMSは、ビジネスプロセスの自動化と最適化を通じて、組織のデジタル化を促進するのに役ちます。

# BPMSの主な機能
- プロセスモデリング
ビジネスプロセスをグラフィカルにモデル化し、可視化するためのツールを提供します。これにより、プロセスの理解や改善が容易になります。
- ワークフロー管理
タスクの割り当て、進捗の追跡、優先順位の設定など、プロセスの実行と管理を支援します。
- ルールエンジン
ビジネスルールの定義と適用を可能にし、プロセスの自動化や決定の自動化をサポートします。
- イベント処理
リアルタイムのイベント監視と処理を提供し、例外処理や通知などのアクションを実行します。
- レポートと分析
プロセスの実行データを収集し、分析やレポート作成に使用します。これにより、ボトルネックや改善の機会を特定することができます。

# 終わりに
BPMSは、組織のビジネスプロセス管理を効率化し、顧客体験の向上に貢献する重要なツールです。顧客中心のアプローチの重要性が高まっている現在、BPMSは特に注目を浴びています。BPMSを活用することは今後の企業にとって非常に重要なポイントになるでしょう。


最後までお付き合いくださりありがとうございました。
ServiceNow - ビジネスルール作成方法

### 1.モジュールを開く
[System Definition] > [Business Rules]
または、
対象テーブルフォームのコンテキストメニューからアクセスする。
以下はIncidentでの例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2843998/080eede9-a04c-be99-d4d5-c27dce32bdff.png)

### 2.新規作成フォームを開く
一覧のNewボタンを押下する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2843998/c666b169-e61a-26ba-8390-40bba09cc94b.png)

### 3.実行タイミングと条件の設定
[When to run]タブを選択する。
画像の例では、新規登録前で[Priority]フィールドが"1 - Critical"のときに実行される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2843998/532a7cce-1cb2-4ef5-a04e-5ba038f39214.png)
* [When]フィールド
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2843998/f636fd6b-523b-be4b-6617-afb939e8c439.png)
before：Submit前
after：Sumit後
async：非同期
display：画面表示時

* 画像右のチェック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2843998/93bd9f9e-6964-6112-6066-74afbba53d38.png)
Insert：新規登録時
Update：更新時
Delete：削除時
Query：検索時(一覧画面で使用)

### 4.アクションの作成
[Actions]タブを選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2843998/b7f46092-7dee-8f55-402a-ef5ba38ebdd1.png)
Set field values：対象フィールドとそれに設定する値を設定する
Add message：画面に表示するメッセージを設定する
Abort action：処理を中止する
pandasが出力するHTMLテーブルを高機能にする

pandasのデータをHTMLで出力したいときってありますよね。
Excelよりもブラウザのほうが軽快なので、ちょっと見るだけならHTMLのほうが早いです。
ですが、以下のようなコードが出力するHTMLは全然イケていません。

```python
import pandas as pd

URL = "https://opendata.ecdc.europa.eu/covid19/casedistribution/csv" # 世界各国別データ（ECDE オープンデータ）
df = pd.read_csv(URL).iloc[:100, :]
df.to_html('hoge.html')
```

出力したHTMLファイルをブラウザで開くとこんな感じ

![before.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2591762/fa20c82f-6995-8147-dded-764ca4ceac51.png)


装飾が全くなく、無骨すぎます。

そこで、[こちらの記事](https://qiita.com/twrcd1227/items/d3f8db42235d70d24bf7)で紹介されていたJavaScriptのライブラリ-[DataTables](https://datatables.net/)-の力を借りて、高機能かつ見栄えをよくします。
一例ですが、以下のような関数を定義して使います。

```python
def write_html(df, output):
    scripts = """
    <link href="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.13.4/datatables.min.css" rel="stylesheet"/>
    <script src="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.13.4/datatables.min.js"></script>
    <script>$(document).ready(function() {$('.my-table').DataTable({});})</script>
    """

    html = df.to_html(classes='my-table')
    html = scripts + html
    with open(output, mode='w') as f:
        f.write(html)

write_html(df, 'fuga.html')
```

ポイントはdf.to_htmlメソッドではHTMLファイルを出力しないことです。
テーブルタグのみの文字列を作り、その文字列の先頭にDataTablesを読み込むタグを追加したあと、ファイルに出力します。

これだけで画像のようなフィルター、ソート、ページング機能がついた整ったテーブルになります。ちなみにShiftを押しながらカラム名を押すことで、複数列のソートができます。超便利ですね。

![after1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2591762/a30d1134-5f7a-c473-5018-d228a8803010.png)

最後に私のおすすめ設定を晒しておきます。
script変数を以下に変更することで、テーブルが見やすくなり、またフィルター機能も強化されます。

```python
    scripts = """
    <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" rel="stylesheet"/>
    <link href="https://cdn.datatables.net/v/zf/jq-3.6.0/dt-1.13.4/b-2.3.6/b-html5-2.3.6/date-1.4.1/fh-3.3.2/sb-1.4.2/datatables.min.css" rel="stylesheet"/>
 
    <script src="https://cdn.datatables.net/v/zf/jq-3.6.0/dt-1.13.4/b-2.3.6/b-html5-2.3.6/date-1.4.1/fh-3.3.2/sb-1.4.2/datatables.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>

    <script>
        $(document).ready(function() {$('.my-table').DataTable({
            select: true,
            displayLength: 25,
            buttons: ['copy'],
            fixedHeader: true,
            dom: 'iQrtBlp',
        });})
    </script>
    """

```
![after2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2591762/c32b5804-34fe-0238-90b8-ccb7f269d231.png)

どうぞお試しあれ^^
達人に学ぶDB設計を読んで

# はじめに
エンジニアになって結構経ちますが、
キャリアが主に組み込みエンジニアだったせいか、
これまであまりデータベースを利用することがありませんでした。

そんな私もWeb/モバイル開発の会社に転職し、
少しずつデータベースに触れることが増えてきたので、
ちょっとくらいお勉強しようかなと
達人に学ぶDB設計という本を読みました。

本記事は読書で得た知見や印象的だったところについてまとめたものです。

# データベースの種類が異なっても基本的に設計の方法は変わらない。
結構意外でした。
同僚からNoSQLはNULLやカラムが空だったり色々大変と聞いていたので、
RDBやNoSQLで設計方法は多少変わるものと思っていました。


# 最初にデータがある。プログラムはその次にできる
これはちょっと違いますが、常日頃私が意識していることに近いと感じました。
実業務をモデルとしてデータベースやシステムに落とし込むわけで、
結局そのデータや業務がどう振る舞うのかが一番大切で、
そこをおろそかにしてはいけないと常々感じています。

# 論理設計のステップ
1.　エンティティの抽出
2.　エンティティの定義
3.　正規化
4.　ER図の作成

よく手順を飛ばしてER図からやっていることが多い気がします。
これは言い訳ですが、ドキュメントとコードを別々に書くとメンテナンスが大変なこともあるので、
コードからドキュメントを生成する手法にしてます。
いい方法考えたいですね。


# 差分バックアップ
恥ずかしい話。実現方法を把握していませんでした。
完全バックアップはデータを全てコピーしますが、
差分バックアップはデータベースに対する変更履歴を元に操作を再現することで実現するそうです。


# テーブル名は英語なら複数形で書ける。そうでなければそのテーブルにはどこか間違いがある。
これよく困っている気がします。
データにアクセスする時にUser.idなのかUser.idsなのか複数形ではないほうが直感的ではあります。
あくまでも本では複数形にできると紹介されており、複数形の命名をしろとは書いてありません。

# 可変町の文字列をキーに使用しない
自由に設定できるのでちょっとしたことで意図しない動作につながるそうです。
なるべく制約をもたせ、無法地帯とならないようにすることが大切だと思いました。
(私も禁忌を犯す！とかいいながらアンチパターンやることがまれに良くあります)


# 正規化はレベル5まであるが普通は3まで理解すれば十分
4、5いらないの！？

# 配列型を使用できるがなるべく使用しないほうがいい
機能として提供されているので何も知らなければ使ってしまいますね。
ダメな理由としては配列になっているとキーを元に一意の値としてレコードを取得できないからだそうです。
RDBにの思想に反していて、負債になるって感じですかね。


# ダブルミーイング
現場でみたく○設計。
ほんとひどい。


# 終わり
以上です。
もっと色々勉強になることがわかりやすく書いてある良い本でした。
ぜひご一読ください。
個人的にはバッドノウハウやグレーノウハウの章が特に面白かったと思います。


# 参考文献
読んだ本です。

https://www.amazon.co.jp/%E9%81%94%E4%BA%BA%E3%81%AB%E5%AD%A6%E3%81%B6DB%E8%A8%AD%E8%A8%88-%E5%BE%B9%E5%BA%95%E6%8C%87%E5%8D%97%E6%9B%B8-%E3%83%9F%E3%83%83%E3%82%AF-ebook/dp/B00EE1XPAI/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=
ServiceNow - UI ポリシー作成方法

### 1.モジュールを開く
[System UI] > [UI Policies]
または、
対象テーブルフォームのコンテキストメニューからアクセスする。
以下はIncidentでの例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2843998/6f900007-c720-1548-8f17-c5e67d2693f1.png)

### 2.新規作成フォームを開く
一覧のNewボタンを押下する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2843998/adc5d1e5-2fd9-0dbc-8281-295ca5cc53f1.png)

### 3.適用条件の設定
[Conditions]フィールドで条件を設定する。
画像の例では、Incidentフォームにて、[Priority]フィールドが"1 - Critical"のときに適用されるよう実装しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2843998/983e1491-162d-e1e0-94c3-c5bfdfaaec67.png)

### 4.アクションの作成
* 画像のNewボタンからアクション作成フォームを開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2843998/daa47357-55eb-7c5a-4c92-f6372c3bb6ef.png)

* [Field name]フィールドに対象とするフィールドを指定し、画像右の選択肢から動作を指定する。
画像の例では、[Description]フィールドを必須化し、編集可能と実装しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2843998/45604e9a-a93e-c5e6-04d7-47bf5a39f0f2.png)
Mandatory：必須化
Visible：表示非表示
Read only：編集可不可
空白で分割された一行の標準入力をそれぞれ数値としてゲット

標準入力で
4 5 6 10
のように与えられていたとする

この時、内包表記を使用することでそれぞれ変数として使うことができる

```python
A, B, C, D = [int(i) for i in input().split()]
print(A + B + C + D) 

# 25
```
Scala.jsを使ったコードからJavascriptコードを生成

[こちら](https://qiita.com/OtonakiKewa/items/69dddff62864c6a8d6c4)の記事で、説明したマルチプロジェクトの構成が前提です。
(Akka version 2.7.0 以降はライセンスが変更になって、有料になることを教えていただいたので、Akka-HTTPはせっかくだが変えたいところ。)

今回はScala.jsでJavascriptをトランスパイルするという話。

Scala.jsが使えるように、ScalaとNode.jsは入れましょう。

# 環境
OS: Windows 11
Java : Open JDK 17.0.7
Scala : 3.3.0
sbt: 1.9.0
node.js: v16.16.0
npm: 8.11.0
scala.js: 1.13.0
Akka : 2.7.0
Akka-HTTP: 10.5.2

``` project/plugins.sbt
addSbtPlugin("com.github.sbt" % "sbt-native-packager" % "1.9.16")
addSbtPlugin("com.vmunier" % "sbt-web-scalajs" % "1.2.0")
addSbtPlugin("org.portable-scala" % "sbt-scalajs-crossproject" % "1.2.0")
addSbtPlugin("org.scala-js" % "sbt-scalajs" % "1.13.0")
addSbtPlugin("org.scalameta" % "sbt-scalafmt" % "2.5.0")
```

# コード
今回トランスパイルするScalaコードは下記のよう。
``` client/src/main/scala/com/isageek/hakushimeita/xnote/client/ClientApplication.scala
package com.isageek.hakushimeita.xnote.client

import com.isageek.hakushimeita.xnote.shared.SharedMessages
import org.scalajs.dom

@main def ClientApplication(args: String*): Unit = 
  dom.document.getElementById("scalajsShoutOut").textContent = SharedMessages.itWorks
```
# やること
https://www.scala-js.org/doc/project/building.html

こちらの記事を参考に
`sbt fastLinkJS`
を実行しただけ
`client\target\scala-3.3.0\client-fastopt`配下に`main.js`が生成されました。

# 予定
欲を言えば生成された`main.js`を`shared`プロジェクト内に置けるようにしたい
またScalaだけで書くという、ネタみたいなプロジェクトを立ち上げているので、ScalaCSSを使って、CSSを書くなどしたい。
ScalaHTMLというのもあるそうなので、ScalaコードからHTMLを生成できそう。無ければ作るか(できるのか？)と思っていましたが、探せばあるものですね。みんなすごい…すごくないの自分だけ。
忘れていた。Scala.jsではLaminarフレームワークを使いたい。
Javascript, CSSのライブラリも使いたいところだが、上手くいくのだろうか…
Bingチャットにバッチファイルを作ってもらう

# ダミーファイルを自動でたくさん作る
そんなバッチファイルがほしい
[Bing AI - 検索](https://www.bing.com/search?q=Bing+AI&showconv=1&FORM=hpcodx)で聞いてみた
## 質問
```
ダミーのファイルをバッチファイルで一度にたくさん作成したい。
処理の条件は以下の通り
・作成するファイルの数は100個
・拡張子は".docx", ".xlsx", ".pptx", ".txt", ".pdf"の5種類
・ファイル名は"00"から"99"までの2桁の整数を順に使用する
・バッチファイルを実行したフォルダにファイルを作成する
```

## 回答
```
ダミーファイルをバッチファイルで一度にたくさん作成する方法はいくつかありますが、ここではfsutilコマンドを使う方法を紹介します123。

まず、メモ帳などのテキストエディタで以下の内容を書き込みます。
@echo off
setlocal enabledelayedexpansion
set /a count=0
for %%a in (.docx .xlsx .pptx .txt .pdf) do (
  for /l %%b in (0,1,99) do (
    set num=0%%b
    fsutil file createnew !num:~-2!%%a 0
    set /a count+=1
  )
)
echo %count% files created.
endlocal
コピー
このバッチファイルは、拡張子が".docx", “.xlsx”, “.pptx”, “.txt”, ".pdf"の5種類の空ファイルを、ファイル名が"00"から"99"までの2桁の整数を順に使用して、合計500個作成します。
バッチファイルの名前は任意ですが、拡張子は".bat"にしてください。ここでは"dummy.bat"として保存します。
バッチファイルを実行したいフォルダに移動して、ダブルクリックするか、コマンドプロンプトやPowerShellで"dummy.bat"と入力して実行します。
バッチファイルが正常に実行されると、指定したフォルダにダミーファイルが作成されます。また、コマンドプロンプトやPowerShellには作成したファイルの数が表示されます。
以上がダミーファイルをバッチファイルで一度にたくさん作成する方法です。ご参考になれば幸いです😊
```

## 全体像
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2846175/29698063-93f5-2380-ddfc-4676300e4532.png)
![無題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2846175/ae220c66-2c6d-5e22-5623-2705eaf29844.png)

引用元を確認することができます。

# 作成したバッチファイル
```batch:dummy.bat
@echo off
setlocal enabledelayedexpansion
set /a count=0
for %%a in (.docx .xlsx .pptx .txt .pdf) do (
  for /l %%b in (0,1,99) do (
    set num=0%%b
    fsutil file createnew !num:~-2!%%a 0
    set /a count+=1
  )
)
echo %count% files created.
endlocal

```

# 実行結果
![無題3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2846175/069b55b6-01f3-4b04-2bad-6d832f39354d.png)
ファイルがたくさんできました。

# 総括
楽ちん