OmniAICreator/Qiita-1.07M huggingface dataset:
【WordPress】お問い合わせフォームを設置する

# 前回の記事

前回の記事では、Webサイトに地図を表示する方法を見てきました。

https://qiita.com/raptony110/private/57c857bf2ae7ba1edf5a

今回は、お問い合わせフォームを設置してみましょう。
訪問者の声を聞く方法はいくつかありますが、コメントなどでのコミュニケーションを取れますが、記事の中で閉じてしまいます。一番扱いやすいのが問い合わせフォームでしょう。

僕のAdvent Calendarを読み終わって、
「へぇ簡単なんだなぁ〜　自分もWordPress使ってサイト作ってみようかな〜」って思うあなたがそこにいたのなら、、、、
読むだけで、頭の中WordPress化しちゃったんだよッ！！！！

https://qiita.com/advent-calendar/2022/wordpress-output

# プラグイン「Contact Form by WPForms」をインストールする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/834b7673-a2a2-afce-1e20-1603f1c4d615.png)
プラグイン>新規追加メニューを開き、検索窓に「Contact Form」と入れると検索結果に表示されます。
インストールして、有効化しましょう。

# フォームを作成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/760d45da-bea2-8b9c-5287-e55ebb14feaa.png)
最初のフォームを作成ボタンを押して、早速フォーム画面を作成していきます。
## フォームタイトルを入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/ea538201-c44c-54d0-1102-36454ee84eb2.png)

## テンプレートを選択します。
はじめから作成する場合は、空白のフォームを選択しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/08635ac6-5100-d58c-2aad-471a13373165.png)
今回は、お問合せフォームで、テンプレートがありますので、「簡単なお問合せフォーム」を選択します。

## 項目を決定する
テンプレートを選択すると以下のような画面になります。ここに、追加が必要な項目を追加していきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/1e161e2e-1cfd-b753-cc2a-8e0c41ab57f4.png)

## 通知設定を行う
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/8c33aeb4-cf5a-cc3e-06c6-dc33406a38b2.png)
お問合せフォームに入力があった際に、メール通知を行うことができます。通知先や、送信元のメールアドレスを設定します。

## 送信後のメッセージを設定する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/2d0c37e9-e203-f2ce-5fcc-78cec5822e03.png)
お問合せフォーム送信後に表示するメッセージを設定することができます。

## お問合せページを作成する
右上の保存ボタンを押して、設定を保存したら、固定ページを作成しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/ef7bc966-d96e-672c-fe20-65b73431aabe.png)
埋め込むボタンを押すと、既定ページに作成するのか、新規ページを作成するのかという選択肢が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/45a7037f-bbd2-f07a-6df1-77c2db71b912.png)

ここでは新規ページで作成してみます。固定ページ名を入力しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/6ed59861-5c0e-509f-f250-5976e9313625.png)

このように固定ページの作成画面に遷移します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/30746430-4d13-39d8-1553-4f5afcd2097c.png)
右上の公開ボタンを押して作成完了です。

# メニューに問い合わせフォームを設定する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/1a53d2f8-a2c4-a818-3876-97367cc01adb.png)
外観>メニューから、作成したお問合せページを追加しましょう。
そうすることで、Webサイトメニューにお問合せが表示されます。

# お問合せがメニューに表示されていることを確認する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/74889866-0f67-817d-eabb-5dfcaff60ac8.png)

# おわりに
いかがでしたでしょうか。今回の記事でお問合せフォームの作成方法を説明しました。

次回は、SNSアイコンの設置について見ていきましょう！
初めてchromeの拡張機能を作ってみた話

光栄なことにAdvent Calenderをやるから書かないかと誘っていただいたはいいものの、ネタに困っていた新卒が初めてchrome拡張機能を作る記事です
内容はとても薄いです

# このchrome拡張機能をつくってみた背景

昔はよく顔文字に使われていたキリル文字ですが、最近はホモグラフ攻撃[^1]に使用されているそうです(ﾟДﾟ)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954384/4e0cf0cb-b372-d8af-6ce1-2aec4501328d.png)
上記の画像はまったく同じURLに見えますが片方にはキリル文字の"і"が含まれています  
これを肉眼で見分けられる人はいないと思います  

そしてそのようなサイトがGoogleの広告枠を購入することで検索結果の上位に表示されてしまいクリックしてしまうということです  
詳しくはこちらの記事を参考にしてください [link](https://gigazine.net/news/20221101-google-dangerous/)

# 実装内容

## フォルダ構成

```
append_test
|
|- manifest.json
|- content_script.js
```

## 各ファイルの役割

- manifest.json
    - 拡張機能の情報や説明を書きます、ファイル名は固定で必ずmanifest.jsonで作ってください
- content_script.js
    - webページに付け加えるスクリプトをここに書きます

## manifest.json

```
{
  "name": "url_checker",
  "manifest_version": 3,
  "version": "0.1",
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content_script.js"]
  }]
}
```

以上がmanifest.jsonの中身となります、一つ一つ見ていきましょう

### name

このchrome拡張機能の名前を決める項目になります、好きな名前で問題ありません

### manifest_version

このmanifestファイルがどの形式で書かれているかを示すものになります、現行は3なので3にしましょう

### content_scripts

どのサイトにアクセスしたときにどのスクリプトを実行するかを決めるところになります  
今回は全てのサイトでcontent_script.jsを実行しています  

## content_script.js

```
document.onselectionchange = function() {
  let text = window.getSelection();
  var regex = new RegExp(/[^(\w!?:/+\-_~=;.,*&@#$%()'[\]ぁ-んァ-ヶｱ-ﾝﾞﾟ一-龠\t\s\n　、。（）「」・<>› - ー【】—？！)]+/)
  if (regex.test(text)) {
    console.log('match: ' + text);
    alert("不適切な文字が含まれています");
  }
}
```

以上がcontent_script.jsの中身です  

流れとしましては気になるurlを以下のように選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954384/bb1dfafb-3ff1-76fd-fe50-6506637adcbf.png)

ドラッグし、青くハイライトされた部分がコードでいうtextに入ります  
その後regexで定めた正規表現を用いてマッチするか判定をするといった流れになります

選択範囲内に変な文字が含まれていた際にはアラートが出ます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954384/8bba1954-8084-ba33-6541-1206957958e0.png)

# まとめ

URL部分のみを選択しないと不適切な文字が入りやすいですが、URL部分のみを選択するのがなかなか現実的ではないので流石にもっとスマートな方法を考えればよかったなぁといった感想です

ただchrome拡張機能を初めて作ってみましたが、ここまで簡単にできるとは思っていませんでした
何か日ごろの不便を感じる部分があればぜひ作ってみてください

https://github.com/maguchipq/chromeexpand_adventcalender

[^1]:ホモグラフ攻撃: あるサイトのURLと見た目が酷似している文字を用いることで偽のサイトに誘導する攻撃
sinとcosだけで実現するよさげな背景

# はじめに
この記事は[長野高専 Advent Calender 2022](https://qiita.com/advent-calendar/2022/nnct "長野高専 Advent Calender 2022") 9日目の記事です。

自分でもなんでそうなるかよくわからないけどいい感じの背景を共有します。

背景はこれ↓
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">よさげな背景 <a href="https://t.co/tL7hCC6Kyp">pic.twitter.com/tL7hCC6Kyp</a></p>&mdash; たのれん (@ninjinnokakoi) <a href="https://twitter.com/ninjinnokakoi/status/1601242553205936130?ref_src=twsrc%5Etfw">December 9, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# コード
Siv3Dで書いたサンプルです。
```C++:main.cpp
# include <Siv3D.hpp> // OpenSiv3D v0.6.5

void Main()
{
	// 背景の色を設定 | Set background color
	Scene::SetBackground(ColorF{ 0.8, 0.9, 1.0 });

	while (System::Update())
	{
		for (double x : step(Scene::Width() / 5))
		{
			for (double y : step(Scene::Height() / 5))
			{
				int xd = x * 5;
				int yd = y * 5;
				double si = sin(y * y + x / y - Scene::Time() * 7.0);
				double co = cos(pow(y, 5) - x / y * 9.0 + Scene::Time());
				double cop = pow(co, 3);
				double width = (si + cop) * y / 15.0;
				RectF rect = RectF{ Arg::center(Vec2(xd, yd)), width, 5};
				rect.draw(ColorF(1, 0.75));
			}
		}
	}
}
```

# 説明
次の式で与えられる幅の四角形を画面全体に描画しているだけです。
i, jはそれぞれ四角形のx座標, y座標を、tは経過時間を表しています。
```math
\left\{\sin\left(j\times j+\frac{i}{j}-t\times7\right)+\left(\cos\left(j^5-\frac{i}{j}\times6+t\right)\right)^3\right\}*\frac{j}{15}
```

見ての通り、sinとcosだけで実現できます。
なんで？

# 参考文献
[95 by yonatan | Dwitter](https://www.dwitter.net/d/10765)
指定した期間の集計表示

PowerBIxyzさんの記事を参照しています。
設計された算出方法が、とてもわかりやすいです！

https://qiita.com/PowerBIxyz/items/5f26ceb2648f8221f5ce

:::note warn
「計算開始日」と「期間」を指定して
「指定した区間」の「単月の受注額」と、期間中の「累計の受注額」を計算します。
**「指定した区間」が変わるたびに、累計値が、再度、計算されて変化します。**
:::

「開始年月」から「何か月目まで：期間」をそれぞれスライサーで指定します。


　①2022年の1年間、すべての期間を表示します。
　　　開始年月＝2022年1月から、期間＝12ヵ月間
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2350540/4ac80c40-811e-b137-7921-9590d6aa281b.png)


　②指定した期間を表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2350540/bee8d427-81d1-0f35-2c11-77ff6218916f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2350540/22016d80-9bfc-e16e-c4ec-df2b536e6da7.png)

モデル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2350540/f47b146c-2c9b-3f92-264f-0a380c166ba6.png)

「累積の受注額」を算出します。
　スライサーで指定した開始日から、カレンダーの最大日まで、
　単月の受注額を累計します。
~~~
累積_受注額 = 
VAR CumulativeTotal =
    CALCULATE(
        [単月_受注額],
        FILTER(
            ALL( 'カレンダー'[Date] ),
               'カレンダー'[Date] >= [FirstDateInPeriod]
            && 'カレンダー'[Date] <= MAX( 'カレンダー'[Date] )
        )
    )
RETURN
    CumulativeTotal
~~~
次に「指定した期間だけ」の集計にしたいので、
次のメジャーを作成します。
~~~
IsSelectedDates = 
IF(
      MAX( 'カレンダー'[Date] ) >= [FirstDateInPeriod]
   && MAX( 'カレンダー'[Date] ) <= EOMONTH( [FirstDateInPeriod], [SelectedDuration] - 1)
    , 1, 0
)
~~~
　指定した開始日から、{指定した開始日から(指定した期間-1か月後の)}月の最終日までの間に
　カレンダーの日付が存在する時"1"、存在いないとき"0"とする。

　フィルターで"1"の時に累積値を表示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2350540/28087051-c76d-0b7a-d9d4-57dfc04a8cb1.png)
その他のメジャー作成は、参照記事をご確認ください。

## 最後に
お世話になった方々や、この記事を見てくださったあなたに、ありがとうございます。
データを分析するために必要な基本的な内容を身につけることを続けようと思います。

上記の「指定した区間」の構文を用い、2022年12月からPower BIで利用できるように
なった新DAX関数「WINDOW」を試した、次の記事を投稿しました。
お時間あれば読んでみてください。

https://qiita.com/mido-ri/items/311b10a52da02b729eed
Azure Application Gatewayの主な機能

●Azure Application Gatewayの主な機能
■Webアプリケーションふぁいあーうぉーる
WEbアプリケーションファイアーウォール機能を使用するには、WAFのSKUUのAzure Applicagtion Gatewayが必要。

■Secure Sockeets Layer(SSL/TLS)ターみネーション

■URLベースのルーティング
使用すると、HTTPリクエストのURLパスに基づいてバックエンドの特定のサーバープールにトラフィックをルーティングする。

■複数サイトのホスティング
Azure Application Gatewayでは、同じアプリケーションゲートウェイ上の複数のWebアプリケーションに対して、ドメイン名またはホスト名に基づくルーティングを構成できる。

※複数サイトのホスティングでは、ドメイン名またはホスト名に基づくルーティングを行う。この機能は、マルチサイトリスナーの構成で使用される。

■自動スケール

●Azure Application Gatewayの主なコーポネント
・フロントエンドIPアドレス
・りすなー
・要求ルーティング規則（ルール）
・HTTP設定
・バックエンドプール
・正常性プローブ
[interactions.py] Discord Botの作り方 #02 - Button・SelectMenu

# はじめに
この記事ではinteractions.pyというモジュールを使用してDiscord Botを作りたい人向けです。

#02ではButtonとSelectMenuについて解説していきたいと思います。

# Buttonの実装
では今から前回作ったプログラムにボタンを追加していきます。
前回作った `async def test...` から下を全てこれに置き換えましょう。

```python
async def test(ctx: interactions.CommandContext):
  button = interactions.Button(
    style=interactions.ButtonStyle.PRIMARY, 
    label="ボタン", 
    custom_id="primary"
  )
  
  await ctx.send("ボタンが押されました", components=[button])

bot.start()
```
これは `button = interactions...` のところでボタンの外見を設定し、 `components=[button]` でメッセージに実際に実装しています。
ボタンの種類もいくつかあり、
```python
interactions.Button(style=interactions.ButtonStyle.PRIMARY, label="青ボタン", custom_id="blue")
interactions.Button(style=interactions.ButtonStyle.SECONDARY, label="灰ボタン", custom_id="gray")
interactions.Button(style=interactions.ButtonStyle.SUCCESS, label="緑ボタン", custom_id="green")
interactions.Button(style=interactions.ButtonStyle.DANGER, label="赤ボタン", custom_id="red")
```
の4種類があります。

## 実際にBotを実行してみる
早速実行してみましょう。
![AF2A138D-FCFC-47A1-B53C-4FE67DB66086.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039218/575ec80e-897d-f599-5174-06b3845e3f25.jpeg)
`/test` と打った時にこのような物が出れば成功です。
ただ、このままではボタンがあるだけになってしまうので、ボタンが押された時の処理を追加していきましょう。

## ボタンを押された時の処理
以下のコードがボタンが押された時の処理のプログラムです。
```python
@bot.component("primary")
async def button_component(ctx: interactions.ComponentContext):
  #ここに処理を追加
```
`Primary` のところに先ほどのボタンで指定した `custom_id` を書き込みます。
どのような処理をするかは3行目の `async def...` の下に書きましょう。

上手く出来るとこの様になります。
今回は試しに自分にしか見えないメッセージを送信する様にしました。
![AAC03DDB-C166-45E3-A665-558ECFD9314B.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039218/f7250952-e3de-cf0c-2830-bddf17331297.jpeg)

# SelectMenuの実装
では、今からSelectMenuを追加していきたいと思います。
先ほどのbuttonと同じ位置に以下の物を書き込みましょう。
```python
  se1 = interactions.SelectMenu(
      options=[
        interactions.SelectOption(label="🔎 テスト", value="test1"),
        interactions.SelectOption(label="👾 テスト", value="test2")
     ],
      placeholder="テキストを選択",
      custom_id="select-menu",
  )
  
  await ctx.send("メニューが設置されました", components=[se1])
```
これはoptionsの部分に選択肢を追加していき、その下のplaceholderで選択肢の文字を変更します。
理解できたら実際にBotを実行してみましょう！

## 実際にBotを実行してみる
成功するとこの様になります。
![10E5C5F8-EF30-4498-AB5B-9A199231373D.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3039218/4723511b-1659-b58b-b2a8-20449318de4d.jpeg)
選択肢がちゃんと表示されていますね。
では今から選択肢が選ばれた時の処理を書いていきます。

## 選択肢が選ばれた時の処理
```python
@bot.component("select-menu")
async def select_component(ctx: interactions.ComponentContext, response: str):
  #ここに処理を書く
```
先程と同様、`Primary` のところに先ほどのメニューで指定した `custom_id` を書き込みます。
どのような処理をするかは3行目の `async def...` の下に書きましょう。
好きな処理をかけたら完成です。お疲れ様でした。


# 最後に
今回はButtonとSelectMenuについて解説しました。
次回はmodalについて解説していきたいと思います。

もし分からないところがあれば Azusa#5812 に気軽にDMしてください。

# Discordサーバー

この度、bot開発者が話し合えるようなDiscordサーバーを開設しました！
ぜひ見に来てください！

https://discord.gg/nxBsFDgbFJ
PHPとは？用途は？メリット・デメリットを解説！（初心者向け）

私はPHPエンジニアになってまだ5年目。
周りには10年続けている人もいたりして、つよつよエンジニアが多い印象を受けている。
そのため5年PHPエンジニアやっているだけでは「まだまだ」だと思う。

PHPエンジニア界隈ではひよっ子レベルの私だが、今回は皆さんにもPHPの面白さを分かってもらいたいので、PHPとは何か？という簡単なところから、どんなことができるのか？といった基本的なことを書いていきたいと思う。

また、デフエンジニアの会も学生や社会人になって間もない方々も何人かいるため、彼らにも分かるように書いていきたい。

# PHPとは
では、PHPとは何か。
Wikiによると、こう書いてある。

>"The PHP Group" によってコミュニティベースで開発されているオープンソースの汎用プログラミング言語およびその公式の処理系であり、特にサーバーサイドで動的なウェブページを作成するための機能を多く備えていることを特徴とする。

このことからも分かるように、PHPは主にWEB周辺で使われることが多いように思われている。
実際、PHPはもともと最初から動的なホームページを作るために開発された言語でもある。

しかし、PHPはCやPerl, Javaなどのプログラミング言語に強く影響を受けていることからもWEBに限らず色々な分野で多く使われている。
そのため、仕事にあぶれることもないという話まである。

## PHPの用途
では次に、PHPの用途はどんなものがあるか。

これについては先ほども述べた通り、PHPはもともとは動的なホームページを作るために開発された言語であるからして、やはりWEB周辺に色々な用途がある。

その主なものとしては、

- Wordpressカスタマイズ
- お問い合わせフォーム作成
- 予約フォーム作成
- SNS作成
- 検索フォームの作成

などである。

## PHPのメリット・デメリットとは

では、ここからはPHPのメリット・デメリットを書いていく。
PHPはWEBの分野で多く使われ、また敷居が低いために広く親しまれている。
そして仕事も食いっぱぐれない言語の１つだと言われているが、そんなPHPでもメリットやデメリットはある。

### PHPのメリットとは

次に、PHPのメリットとは何か。これは多くの方々があちこちで書いているのであえて書くことはないかもしれないが、あえて書くなら

- 自由度が高い
- フレームワークが多い
- エンジニアが多く、お互いに学び合いやすい

などである。
では逆にデメリットは何か。

### PHPのデメリットとは

デメリットは、

- 自由度が高いゆえに、記述方法が色々とありまとまらないことがある
- 実行速度が遅い（あくまでもコンパイラ言語と比較した上で）

などが挙げられる。

ちなみに、自由度が高いために記述方法が色々とありまとまらないというのは、言い換えれば「メンテナンスが大変」ということでもある。
そしてこれはVBAとも似ているらしい。（だとするとVBAも大変なんだな・・）

# PHPエンジニアの就職状況

ここまでで、初心者にも分かりやすいようにPHPとは何かを書いてきた。
では次に、実際の所PHPエンジニアの就職状況はどうなのだろうか。

PHPはかなり昔から使われている言語であり、ある意味では「古い」かもしれない。
しかし、WEBがまだまだ全盛期である今の時代、やはりPHPができるということは重宝がられている。

また、PHPは敷居の低い言語であるため、色々と学びやすい。
かつ、案件もかなり多く、少しググっただけでもそこかしこに求人が多くあふれている。

更に言えば、PHPエンジニアは増えても増えても案件はそれよりももっともっと多くあるため困ることはないと言われている。

それに、WEBだけでなくゲームやサーバーサイドなど至る所にも就職口はある。

従って、PHPさえ身につければあちこちで就職できる可能性はとても高い。

### PHPエンジニアの給与状況

これははっきりいってどんなPHPエンジニアであってもやはり会社の状況に左右されるので、一概にこういう状況ですと言うことはできない。
 
しかし、案件が多くある分安定しており、それによって給与も安定して得ることはできる、と言えるだろう。
あいまいな言い方になってしまったが、もうこれは本人の技術や会社によるところも大きいためそこまで具体的なことは言えない。

## まとめ

ここまでで、PHPエンジニアとは何か？メリット・デメリットは何があるのか？そして就職状況についてはどうなのか？など色々と書いてきたが、伝わっただろうか。

PHPは今後もあらゆる言語で使われ、また案件も安定して多くあるため、誰でも身につけておいて損はないと思う。

以上。
Javaオーバーロード　型は数で認識されるのか順番で認識されるのか

# はじめに
スクールでメソッドやコンストラクタを呼び出す際、引数名と型が違えば同名のメソッドやコンストラクタを定義して呼び出せる`オーバーロード`を学習しました。その際に出てきた疑問を整理して以下の例題で検証してみました。

```java
public class Overload {
//引数なし
public void sayHello() {
	System.out.println("こんにちは！");
}
//引数name
public void sayHello(String name) {
	System.out.println("こんにちは！私の名前は" + name + "です。");
}
//引数name, hobby
public void sayHello(String name, String hobby) {
	System.out.println("こんにちは！私の名前は" + name + "です。趣味は" + hobby + "です。");
}

public static void main(String[] args) {
	//Overloadクラスをインスタンス化
	Overload over = new Overload();
	//引数なし
	over.sayHello();                   //
	//引数name                         //
	over.sayHello("山田太郎");         // オーバーロード
	//引数name, hobby                  //
	over.sayHello("山田太郎", "釣り"); //
}
//演算結果
//こんにちは！
//こんにちは！私の名前は山田太郎です。
//こんにちは！私の名前は山田太郎です。趣味は釣りです。


```



# 引数名が違う・型は同じ　→　×
以下のようにしても、型が同じなのでエラーになりました。
つまり型が同じものの場合は`個数`で区別しているらしい。
```java
public void sayHello(String name, String hobby)
public void sayHello(String hobby, String name)
```

# 引数名が同じ・型は違う　→　〇
以下のようにすれば可能だった。つまり`変数名はあまり関係ない`ようである。
が、引数名のお作法的にアウトでしょｗ

```java
public void sayHello(String name, String hobby)
public void sayHello(int name, int hobby)
```

# 順番が違う　→　〇
ここが一番気になったところである。以下の通りに新たに作って検証。
結果はどちらも正常に出力された。
つまり`個数は同じでも順番が違えば`区別してくれる。

```java
public void sayHello(String name, int age) {
	System.out.println("こんにちは！私の名前は" + name + "です。年齢は" + age + "です。");
}

public void sayHello(int age, String name) {
	System.out.println("こんにちは！私の名前は" + name + "です。年齢は" + age + "です。");
}
```

# まとめ
オーバーロードにおいて、`どの型がどの順番になっているか`でJavaは区別している。
意外と細かく見てくれているのね。
node js で JWT をエンコード・デコードしてみる 

# コード例

```js
const jwt = require('jsonwebtoken')

const payload = {
  id: 333,
  name: "Alice",
  email: "example@example.com"
}

const token = jwt.sign(payload,'secret_signature')
console.log(token)

var decoded = jwt.verify(token, 'secret_signature');
console.log(decoded)
```

# 結果例

実行するたびにトークンは変わる(ドットで区切られた最後のゾーンが変わる)がデコード内容は同一になる。
ただしiatの値も毎回違う。

```
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MzMzLCJuYW1lIjoiQWxpY2UiLCJlbWFpbCI6ImV4YW1wbGVAZXhhbXBsZS5jb20iLCJpYXQiOjE2NzA1OTk2NjB9.uC438ol9Ac4KZX-3Bj9OW2HQxY05dTXHUdxAmovFw3Y

{
  id: 333,
  name: 'Alice',
  email: 'example@example.com',
  iat: 1670599660
}
```

```
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MzMzLCJuYW1lIjoiQWxpY2UiLCJlbWFpbCI6ImV4YW1wbGVAZXhhbXBsZS5jb20iLCJpYXQiOjE2NzA1OTk2NzZ9.sfR46mweeDxBbpZ5Gkr21Dmi9fnX7Gu4A7hjixlyLfo
{
  id: 333,
  name: 'Alice',
  email: 'example@example.com',
  iat: 1670599676
}

```


# チャットメンバー募集


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

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# Twitter

https://twitter.com/YumaInaura
Azure KinectでSandScapeを再現してみる

![IMG_7724.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961940/1ea090a2-6e45-412a-0885-1fe1b519bedd.jpeg)


# イントロ
砂場を3Dスキャンして、高さ情報をリアルタイムでプロジェクションすることで、砂の等高線を表示するデバイスを作ってみる。Microsoftが提供する3DスキャナーAzure Kinectと、GrasshopperプラグインAzure Kinect GHを使う。

# セットアップ
![IMG_7718.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961940/28dc9286-05c7-a9da-1056-5f2c50aca705.jpeg)

### ハードウェア

- [Azure Kinect](https://azure.microsoft.com/en-us/products/kinect-dk/#overview)
- プロジェクター ([Epson EB-1771w](https://www2.epson.jp/support/manual/data/elp/eb1776w/U_GUIDE_1776W.PDF))
- ラップトップ
- ディスプレイ
- 単管フレーム（1500x1500x1500 mm）
- 砂場

### ソフトウェア
- [Rhinoceros 7](https://www.rhino3d.com/)
- [Azure Kinect GH](https://www.food4rhino.com/en/app/azure-kinect-gh)


# 手順
1. 砂場と、デバイスを設置するためのフレームを用意する
1. Azure Kinect GHの[ウェブサイト](https://www.food4rhino.com/en/app/azure-kinect-gh)に従い、プラグインをインストール
1. Azure Kinectを開封し、ラップトップに接続
1. 制作した単管フレーム、[プロジェクター](https://www2.epson.jp/support/manual/data/elp/eb1776w/U_GUIDE_1776W.PDF)、[スキャナーのレンズ位置、角度](https://learn.microsoft.com/ja-jp/azure/kinect-dk/hardware-specification)、をGrasshopper内でモデリングし、物理的な情報をデジタイズし、リアルとフィジカルのモジュールを統一する。（この際、RhinocerosのNamedViewport機能を利用して、プロジェクターのレンズ位置を保存しておくと便利）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961940/1be20454-0004-c57f-25b4-ecac7b5e3d93.png)

    > 緑：プロジェクター投影角
      赤：Azure Kinect のスキャンエリア（NarrowとWideそれぞれ六角形と円形の2種類）

1. Azure Kinect GHを用いて、点群情報をリアルタイムで取得し、各点の高さ情報を、色情報に変換する（ラップトップのスペックや必要なスキャン範囲に応じて、解像度、レンズ角度、更新頻度も設定できる）![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961940/8ddc3ba6-765a-ca96-8629-ae3076d3580d.png)


1. Rhinoceros内、Floating Viewportを使って、色情報を付与された点群をプロジェクトする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961940/54941773-2936-4869-cfc2-dd1f5eb9962e.png)

1. 砂いじりをする
1. 5-7を繰り返す

# 所感
当時タンジブルメディアとして最先端の研究だったSandScape2013がデスクトップスケールまでカジュアルダウン。今まで展示会場で目にする対象だったものが、スキャナー到着後、一日とたたずにセットアップが完了し、再現できた。Azure Kinect GHもリリースが2022年の1月と、比較的新しく、これまで[Firefly](https://www.food4rhino.com/en/app/firefly)などが担っていた、Kinect v2とGrasshopperのコミュニケーションがソフト、ハードとともにアップデートされたよう。今回のスキャンは砂が対象だったため触れていないが、プラグインにはボディートラッキング機能もデフォルトでついており、気軽に人の動きをデジタイズできるのも魅力的。ただ、点群に色を付けて、表示し続けると、処理が追い付かず、タイムラグが生じることもあり、PCのスペックなどと相談しつつ、バランスの取れた解像度と更新頻度を選択する必要がありそう。
ここまで障壁なく、リアルタイム3Dスキャニングとそのデータ処理ができることは、非エンジニアのデザイナーなどにとってアクセスしやすく、制作の幅が広がりそう。

# 参照
https://tangible.media.mit.edu/project/sandscape/

https://www.youtube.com/watch?v=XpyJcN3Tyzg
子育て中のママが5日間でiOSアプリを開発→リリースした話

これはWEBCAMP ENGINEER COMMUNITY Advent Calendar 2022の12日目の記事です！
（私事ながら結婚記念日なので今日を選びました！祝って〜！）

## はじめに

おがまりと申します。
現在IT愛好家という肩書きを勝手に名乗り、Web制作代行やIT関連講師などを行っています。
今年の5月に娘を出産しました！

## 作ったアプリ
[託児サービス付店舗検索アプリ meimei](https://meimei-app.studio.site/)というアプリを作りました。
現在iOS版のみですが、[こちら](https://apps.apple.com/jp/app/meimei-%E8%A8%97%E5%85%90%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E4%BB%98%E3%81%8D%E5%BA%97%E8%88%97%E6%A4%9C%E7%B4%A2-%E3%82%81%E3%81%84%E3%82%81%E3%81%84/id6444382754)からダウンロードできます！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305538/bbfa89ca-f899-39b5-1af6-22aff8f9fc75.png" width=50%>

このアプリでは、託児サービスが併設されたお店をさまざまな条件で検索できます！
（託児付き美容院、託児付きマッサージ、などなど）
データはまだまだ少ないのですが、頑張って追加していきます...！

### 作った背景
産後美容院に行くにもマッサージに行くにも「娘を...預けなければ...」というのが悩みの種でした。
一時預かりも高いし、お店までの移動時間が勿体無いし...お店に託児サービスがあればいいのに！
と思って検索すると、実は結構あるんです！でも、いちいち「美容院 託児付き　東京」「マッサージ 託児付き　東京」とかで検索しないといけない。
出産して思ったんですけど、 **ママ向けの情報は散らばりすぎている！** んですよね。
そこで私は「いろんな条件で横断検索できたら嬉しい！」と思い立ち、このアプリを開発することにしました！

### 使用技術
ノーコードのみです！
- アプリ開発：Adalo
- LP：STUDIO
- 画像など：Canva

## 開発からリリースまで

2022/11/12に開発に着手し、その4日後の16日にはリリース完了しました！

| ステータス | 日時 |
| --- | --- |
| 開発着手 | 2022年11月12日 16:00頃 |
| 提出準備中 | 2022年11月13日 10:38 |
| 審査準備完了 | 2022年11月15日 0:04 |
| 審査待ち | 2022年11月15日 6:00 |
| 審査中 | 2022年11月15日 14:24 |
| 却下済み | 2022年11月15日 17:06 |
| 提出準備中 | 2022年11月15日 17:49 |
| 審査準備完了 | 2022年11月15日 18:51 |
| 審査待ち | 2022年11月15日 18:51 |
| 審査中 | 2022年11月16日 14:21 |
| 配信準備完了（ストアにリリース！） | 2022年11月16日 16:31 |

### 最初の審査まで

12日の夕方から開発に着手し、狂ったように作り続け、翌朝には初回Publishが完了しました。
その後いくつかTestFlightでバグを発見しては潰しで、初回審査は11/15になってすぐ提出しました。
いつ審査待ちステータスになるかドキドキして寝たら、翌朝には進んでいました。
ただ、そこから審査中になるまでが長くて（と言っても8hくらいですが）何度も画面をリロードしていました。（メールが来るのにも関わらず...）

### 最初のレビューは「却下」
一発で通るってことはないと思っていましたが、案の定Rejectを食らいました。
理由は「退会ボタンがない」ということ...確かに！作り忘れてた！
急いで退会ボタンを追加し、再提出。
「ちゃんとテストしてくださってるんだ...！」という感動がありました。
却下済みになったのが17:06で、再提出したのが17:49ですwそんなに焦らなくても...！

### ２度目の申請でついにリリース！
申請から審査中にステータスが変わるまでが18時間くらいと、これまでで最長の待ち時間でした。
ただ、審査中になってからレビュー完了までが2時間程度と早く、無事リリースされていました！
（審査に通った場合、即リリースするかリリースタイミングを選ぶかできたのですが、私は前者の設定をしていました）
AppStoreで自分の作ったアプリが出てくるのは結構な感動でした！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/305538/37ecc2cf-6708-674c-9cd5-b19772464935.jpeg" width=50%>

評価してくださった方、ありがとうございます...！

## 提出までに引っかかったポイント
### プレビュー画像
ストアに表示されるアプリのプレビュー画像が足りずに申請できなかったことがありました。
2パターンの画角で用意しなければならないところ、1パターンしか用意していなかったためです。
プレビュー内に入れる端末の画像は画角に合わせたものを入れなきゃいけないとどこかで見たので、モックアップを２種類用意するのが少し面倒でした...

モックアップは https://app.shotsnapp.com/ で作りました。

### アプリのアイコン設定
私はてっきりApp Store Connectの方でアイコンを設定すると思い込んでいたのですが、Adalo側で設定しないといけませんでした。なので一度「アイコン追加」だけでビルド→publishしています。
時間のロスになりました...

## まとめ

### 5日間でできた理由

今思えばなんであんなに取り憑かれたように作ってたんだろうという感じですが、

- シンプルな仕様だった
- Adaloを触ったことがあった（とは言え1ヶ月くらいの歴でしたが...）
- データベース設計の経験があった
- 家族の協力があった
- 「何かをリリースしたい欲」がすごかった

というような理由から、このスピード感になったのかなと思います。

### meimeiのこれから

とにかく圧倒的データ不足のため、データ追加を頑張ります！
仲間を探すのか、自分の時間を確保できるように他の案件を調整するのかは未定ですが、もっとたくさんの情報を全国のママに届けられるように頑張ります！

### ノーコード最高〜！
ノーコードじゃなかったらこんなに早いリリースにはならなかったです！
作っている時もLP含めとっても楽しかったです。ノーコードでネイティブアプリ作れるって素晴らしいですよね！
今後もノーコードでいろんなものを作っていきたいと思います〜！
RDBのインデックス必要？不要？判断基準殴り書き

このインデックス、必要？不要？と聞かれ「いらなそうだけど、何が根拠になるのかな」と調べてふむふむと思ったこと。

## 複合インデックスは先頭以外のカラムだけ指定すると使われない
columnA
columnB
というインデックスがあったとして、
where columnB = 1
のようにしても、上記インデックスは利用されないらしい。

図で見るとわかりやすい。
検索上位にきた↓のサイトで、インデックスがどう格納されているのかイメージついた。
[複合インデックスの落とし穴](https://www.gatc.jp/gat/it/it02dbindex.html "複合インデックスの落とし穴 | がっとな日々 | ガットコンピューター")
(厳密には違うかもしれないが、カラムの一部だけだと使用されないことを一旦了解できれば良いので)

columnAの値が1の場合、columnBの値には10,20,30がある。
columnAの値が2の場合、columnBの値には10,20,30,40がある。
…
という格納がされているなら、columnBを指定してもインデックス使えないのは当然。

SQLで1個目のカラムを指定しないなら意味ないよね、という話。

↓Oracleのドキュメント。
[索引および表クラスタに関するガイドライン - A.1.4 コンポジット索引の選択に関するガイドライン](https://docs.oracle.com/cd/E96517_01/tgsql/guidelines-for-indexes-and-table-clusters.html#GUID-25634EC4-E4FA-48E9-A03C-AB5BDA59DE42 "索引および表クラスタに関するガイドライン")

## カーディナリティを考える
カラムに格納されているデータの種類数をカーディナリティというらしい。
いわゆるdistinctして何件残るか、がカーディナリティ。

以下引用:[カーディナリティについてまとめてみた](https://qiita.com/soyanchu/items/034be19a2e3cb87b2efb "カーディナリティについてまとめてみた")

>インデックスを作る時の目安は特定のカラム値を指定した時に、全体の 5%程度に絞り込めるだけのカーディナリティがあることである。

ふむふむ、なるほど。
>性別の場合男女どちらを選んでも 1 / 2 = 50%となるので、インデックスを作成する意味はないし、むしろマイナスになるだろう。

うんうん。50%に絞り込んだらむしろ遅くなりそう。
フルスキャンってぐあーーって一気に読み込むけど、
索引経由だと飛び飛びのデータを選んで読み込むことになるよね。

…という解釈では曖昧すぎるので、調べてみると。
シーケンシャルアクセスとランダムアクセスっていうらしい。Silver DBAでやったなー。覚えてない。
[津島博士のパフォーマンス講座　 第6回　パフォーマンスの基礎である索引について 2011.04.20公開](https://blogs.oracle.com/otnjp/post/tsushima-hakushi-6 "津島博士のパフォーマンス講座　 第6回　パフォーマンスの基礎である索引について 2011.04.20公開")

引用の続き。
>複合インデックスを貼る時は、 カーディナリティの高い順に貼っていくのが大事で、適当な順番にしてはいけない。

カーディナリティが低いと絞り込みの役割まるで果たしてない、ってよくわかりました。


## 件数が少ないならフルスキャンでよくね？
フルスキャンすぐ終わるのにわざわざ索引アクセスする必要ないよね、っていう。

ざっくり1万件、って情報。
[適切なインデックスを張るために](https://qiita.com/kodai-saito/items/541e4fe46c2d3edc9634 "適切なインデックスを張るために")

## まとめ
仕事してると作業多めでこういうの考える機会なくて、鈍ってるなーと思いました。

先日もアーキテクチャわからなくてトンチンカンになったことがあり、慌てて[絵で見てわかるOracleの仕組み](https://www.amazon.co.jp/dp/B07MXHGMTZ/ "絵で見てわかるOracleの仕組み 新装版")をぽちったのである。(半年前、以前の版読んで救われたので)

今日届いてちらっと読んだのですが、やっぱりわかりやすいので、アーキテクチャ学びたい方に超オススメ。
寝る前にぼちぼち進めたいなー。
ここが辛いよAWS CDK

AWS CDKはとても便利で、その便利さは色々なところで語られています。今回は敢えてAWS CDKを実際のプロジェクトで使ってみて辛かった点を書いてみます。

# L2コンストラクトでは指定できない設定値がある

L2コンストラクトはL1コンストラクトを使う場合よりもコードの実装量が少なくて済む便利なものです。その反面、（このような便利なものにありがちのデメリットかと思いますが）指定できない設定値があります。開発の途中で自分が指定したくなった設定値が指定できないことに気がついた場合にはその時点からL1コンストラクトで書き直すことになり、辛いです。

とはいえこの辛さは緩和できる方法があります。AWS CDKにはL2コンストラクトから直接アクセスできない設定値を上書きする方法があります。具体的な方法は、こちらの記事が分かりやすいです。

https://qiita.com/tmokmss/items/55d1c464d1b80da5b4fc

ただし、L2コンストラクトが自動生成するLambda関数の設定など、設定値の上書きが難しいものもあります。そこまで指定しようと思う場合にはL1コンストラクトで書き直すかCDKコード外での解決（手動で設定するとか）を考えることになります。

# L3コンストラクトでは大幅な手戻りが発生する可能性がある

L3コンストラクトはL2コンストラクトを複数集めてパターン化したようなものです。L2コンストラクトを使うよりもさらにコードの実装量が少なくて済む便利なものです。その反面、指定できる設定値はL2コンストラクトよりもさらに少ないです。また、アーキテクチャーの修正のような設定値の変更以上の修正をしたくなった場合には、L2コンストラクトで書き直すことになり大幅な手戻りが発生し、辛いです。

L3コンストラクトの導入は慎重に、基本はL2コンストラクトを使っていくのがよさそうです。

# 特定のコマンドのときだけ前処理/後処理をすることができない

例えば、cdk deployの時だけ特定のファイルをとあるディレクトリから別のディレクトリにコピーするといったようなことができません。

特定のコマンドではなくすべてのコマンドのときに前処理/後処理が実行されてもよい場合にはcdk.jsonに下記のように記載すれば前処理としてpre.sh、後処理としてpost.shを実行できます。

```json:cdk.json
  "app": "sh pre.sh && npx ts-node --prefer-ts-exts bin/app.ts && sh post.sh"
```

# コードがCloudFormation的な書き方になってしまう

私がこれまでCloudFormationを使ってきたせいか、コードがCloudFormation的な書き方になってしまいます。私はTypeScriptでAWS CDKを書いているので、もっとTypeScript的な書き方をしてかっこいいコードを書きたいと思うものの、なかなかその書き方に慣れません。また、ググって出てくるAWS CDKのコードもCloudFormation的な書き方のものが多く、参考にできるコードが少ないです。


# 最後に
とはいえAWS CDKの書き心地は最高なので、これからもガシガシ使っていきたいです。
MVCモデルについて復習する

　MVCモデルについて学習したことはあるが、なんとなく曖昧だったので、勉強した。
以下の画像を用いて説明する。
![スクリーンショット 2022-12-09 23.50.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884270/eb8bed00-b153-16a8-73ff-bef76600dd67.png)
　まず、ブラウザにURLを打ち込むと、DNS（ドメインネームシステム）によってIPアドレスに変換される。IPアドレスとは現実世界で言う住所のようなものだ。
![スクリーンショット 2022-12-09 23.52.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884270/c790760f-84a9-8a26-fe44-a1836faeddcb.png)
　WEBサーバにリクエストを送る際、**HTTP通信**という方法でリクエストが送られる。すると今度はWEBサーバが「あぁ〜これはここから情報をもってくればいいのね！」と判断してくれて、index.htmlやらxxxx.pngなどの文字情報や画像、動画などがレスポンスとしてHTTP通信を介して送られる。

<details><summary>関連：HTMLはレスポンスされた状態だとただのテキストデータである</summary>

[JavaScriptの基礎をおさえる　番外編　〜innerTextとinnerHTMLの違いとは？　DOMって何？〜](https://qiita.com/takumi19910112/items/31a33c48a7aceee708e9)
でも書いたが、HTMLはそのままではただのテキストデータである。DOMによってタグ情報やCSSの情報などが整理されて、見やすいページに表示される。
</details>

で、WEBサーバが「あ、これRailsだ！」と判断して初めてRoutingに情報が送られる。
![MVCモデル 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2884270/54e36b34-42d8-41ca-308d-fc1c0ef98ce8.png)

Routingを通って、まずはリクエストに応えるため、適切なアクションをControllerから探す。Controllerは司令塔のような役割を果たしているから、直接Viewに働きかけてページを表示するよう指示することもあれば、Modelに働きかけてDBとのやりとりを行わせ、その結果をController→View→Controllerの順に情報が流れる。最終的にHTTP通信を用いてブラウザに出力される。
　このように一口にMVCモデルといっても、実はコンピュータのさまざまな動きと連携してなされていることであり、機械的にMVCの役割を言うことができたとしても、それが周りとどう関係しているか、をおさえることが肝要だと感じた。
## まとめ
　MVCモデルについて初めて勉強したときは、無機質に「Mはモデルで、データベースとのやりとりを行なって、Vはビューで、情報を表示するための場所で・・・」と暗記のように頭に叩き込んだが、今回のように調べたり人に聞いたりしていくと、なるほどコンピュータはこうやって動いているのか、と合点のいく場所が何箇所もあった。
　ちなみに、「なぜDNSでドメインをIPアドレスに指定するの？最初からIPアドレス入力したらいいじゃん」と最初は思ったのですが、IPアドレスは数字の羅列で人間には「この数字が何を意味するのか？」はわからない。ドメイン名があることで、「あぁこれは〜のサイトだ」と判断できるわけである。また、フィッシング詐欺等にもドメイン名が正しいか見ることで対応できるのではないかと思った。（google.comがあったとして、gooogle.comは似ているけど違うサイト）
　また、これらの知識はAWSでデプロイをする際にわけもわからず見よう見まねで行ったことの復習にも通じている。「８０番ポートって何？」「localhost3000って何者？」という部分も自分なりに調べることで納得がいった。
Stimulus リファレンス: ターゲット

:::note
この記事は[Google翻訳](https://translate.google.co.jp/)の結果を編集したものです。
:::

https://stimulus.hotwired.dev/reference/targets

ターゲットを使用すると重要な要素を名前で参照できます。

```html
<div data-controller="search">
  <input type="text" data-search-target="query">
  <div data-search-target="errorMessage"></div>
  <div data-search-target="results"></div>
</div>
```

# 属性と名前

`data-search-target`属性はターゲット属性と呼ばれ、その値は`search`コントローラーで要素を参照するために使用できるターゲット名のスペース区切りのリストです。

```html
<div data-controller="s​earch">
  <div data-search-target="results"></div>
</div>
```

# 定義

静的ターゲット配列を使用してコントローラークラスでターゲット名を定義します。

```javascript
// controllers/search_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = [ "query", "errorMessage", "results" ]
  // …
}
```

# プロパティ

静的ターゲット配列で定義されたターゲット名ごとにStimulusは次のプロパティをコントローラーに追加します。`[name]`はターゲットの名前に対応します。

| 種類 | 名前 | 値 |
| :-- | :-- | :-- |
| 単数 | `this.[name]Target` | スコープ内で最初に一致するターゲット |
| 複数 | `this.[name]Targets` | スコープ内のすべての一致するターゲットの配列 |
| 存在 | `this.has[Name]Target` | スコープ内に一致するターゲットがあるかどうかを示すブール値 |

**注：** 単一のターゲットプロパティにアクセスすると一致する要素がない場合にエラーがスローされます。

# 共有ターゲット

要素は複数のターゲット属性を持つことができ、ターゲットが複数のコントローラーによって共有されるのが一般的です。

```html
<form data-controller="search checkbox">
  <input type="checkbox" data-search-target="projects" data-checkbox-target="input">
  <input type="checkbox" data-search-target="messages" data-checkbox-target="input">
  …
</form>
```

上記の例ではチェックボックスは`search`コントローラー内でそれぞれ`this.projectsTarget`および`this.messagesTarget`としてアクセスできます。

チェックボックスコントローラー内で`this.inputTargets`は両方のチェックボックスを含む配列を返します。

# オプションのターゲット

コントローラーが存在するかどうかわからないターゲットと連携する必要がある場合、存在するターゲットプロパティの値に基づいてコードを調整します。

```javascript
if (this.hasResultsTarget) {
  this.resultsTarget.innerHTML = "…"
}
```

# 接続および切断されたコールバック

ターゲット要素のコールバックを使用するとコントローラーの要素内でターゲット要素が追加または削除されるたびに応答できます。

`[name]TargetConnected`または`[name]TargetDisconnected`をコントローラーでメソッドを定義します。`[name]`は追加または削除を監視するターゲットの名前です。このメソッドは要素を最初の引数として受け取ります。

Stimulusは`connect()`の後、`disconnect()`ライフサイクルフックの前にターゲット要素が追加または削除されるたびに各要素のコールバックを呼び出します。

```javascript
export default class extends Controller {
  static targets = [ "item" ]

  itemTargetConnected(element) {
    this.sortElements(this.itemTargets)
  }

  itemTargetDisconnected(element) {
    this.sortElements(this.itemTargets)
  }

  // Private
  sortElements(itemTargets) { /* ... */ }
}
```

**注** `[name]TargetConnected`および`[name]TargetDisconnected`コールバックの実行中、`MutationObserver`インスタンスはバックグラウンドで一時停止されます。これはコールバックが一致する名前を持つターゲットを追加または削除した場合、対応するコールバックが再度呼び出されないことを意味します。

# 命名規則

ターゲット名はコントローラーのプロパティに直接マップされるため、常にcamelCaseを使用してターゲット名を指定します。

```html
<span data-search-target="camelCase" /> 
<span data-search-target="do-not-do-this" />
```

```javascript
export default class extends Controller {
  static targets = [ "camelCase" ]  
}
```
【おとなの社会学】ポイント経済の仕組み

# ➊ ポイント経済圏とは
「国内ポイントサービス市場規模」は、2022年度`2.3兆円`と予測され、年々増えているそうです。


### ■ポイ活してまっか？
あなたは「`ポイ活`」していますか？
「`ポイ活`」とは、ゴミをポイポイ平気で捨てる人………ではなく、**ポイントを貯めたり、たまったポイントを活用することです**。

![kawaii](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/0f8ab76a-8a60-84da-7216-4ce4e6694803.gif)
カイヌシは「**ポイ活**」、ワンコは「**クン活**」に必死🐶

### ■ポイント経済圏とは
同じ企業グループに属するサービスを利用することで、ポイントが貯まり、それをグループ内でお金がわりに使えるような閉じた経済を「`ポイント経済圏`」と呼びます。

例えば、楽天ポイントとか、ポンタとか、様々な「**ポイント経済圏**」が存在し、しのぎを削っています。
![ポイント経済圏](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/79317b00-c491-43ab-9951-c26a2d790650.png)

👉効率的に「`ポイ活`」するには、「`ポイント経済圏`」選びが、**とても重要**ですよね。

# ➋ ポイント経済の仕組み
ポイント経済圏により細かなところは色々違うと思いますが、大まかな仕組みは以下の通りです。

**ポイント経済のポイント**は（ダジャレじゃないです^^;）、`運営事業者がポイント代を支払わず、加盟店がポイント代を支払っている`ところです。

![ポイントの仕組み](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/6e951ff6-dce0-7322-9cde-048b264c0dc6.png)

① `ユーザ`が、会員の申込みを行います。
② `運営事業者`が、ユーザを会員登録します。
③ `会員`が、ポイント加盟店でお買い物をします。
④ `ポイント加盟店`は、商品を会員へ渡します。
⑤ `ポイント加盟店`は、そのとき売上の1%(規約により変わる)をポイント代として運営事業者へ支払います。
⑥ `運営事業者`は、会員へポイントを払い出します。
⑦ `会員`が、ポイントで商品を購入します。
⑧ `ポイント加盟店`は、商品を会員へ渡します。
⑨ `運営事業者`が、ポイント加盟店に溜まったポイントを買い取ります。
⑩ `運営事業者`が、買い取ったポイント代を支払います。

# ➌ 有効期限に気をつけろ！
知らぬ間に消えてしまうポイントに気をつけましょう。例えば、楽天ポイントであれば以下の通り1年ちょっと放っておくと消滅してしまうそうです。ここがお金と違うとこですね。

> ポイントの有効期限は、ポイントが付与された月の翌年同月の前月末日までです。期限までに新たに通常ポイントを獲得すれば有効期限が切れることはありません。

# ➍ なぜアウトプットしたのか？
なぜこれを書こうと思ったのかというと、『**`これ考えたひと凄いシステム作り出したなぁ、システム開発するみんなにも知ってもらいたいなぁ`**』と思ったからです。加盟店を増やすだけでも利益が得られますし、有効期限切れや会員退会などにより取り残されたポイントは、そのまま運営事業者の儲けになるし、利用されていないポイント資金を運用するだけでも、多大な利益を出せそうでウシシですよね。

ミクロなシステム開発が多いですが、こういいうマクロ視点での巨大な「`ポイント・エコシステム`」のシステム開発も面白そうです。

あなたが作るシステムにも、こういう**儲かる仕組み**を入れると、より利益が得られるかもしれません😉トラタヌかもｗ

# ➎ 以上
いまのところ3年連続でAdvent Calendarに参加しております。
今年も記事を読んで頂き、ありがとうございました。
お疲れ様でした😊！
辞書ソースのつかっていないカラムの話 その2

## はじめに

[Sudachi](https://github.com/WorksApplications/Sudachi) の辞書ソースにはつかわれていない、あるいは何につかわれているかがあまり説明されていないカラムがいくつかあります。何回かにわけてそういったカラムについて説明していきます。(その1は[こちら](https://qiita.com/kazuma-t/items/59f5ea7a3ff5e5fb41d1))

## 17カラム目の話

今回は17カラム目 (0はじまりで) のお話です。このカラムはユーザー辞書の[ドキュメント](https://github.com/WorksApplications/Sudachi/blob/develop/docs/user_dict.md)には「未使用」でアスタリスク(*)を入れておくようにと書かれています。

もともとこのカラムには直前にある2つのカラム、A単位分割情報、B単位分割情報につづいて語構成情報が記載されるはずでした。

複合語は内部に構造をもち一般につぎの図のように木構造をとります。

```mermaid
%%{init:{"theme":"neutral","wrap":false}}%%
graph TB
  県立美術館前停留所 --> 県立美術館前
  県立美術館前停留所 --> 停留所
  県立美術館前 --> 県立美術館
  県立美術館前 --> 前
  県立美術館 --> 県立
  県立美術館 --> 美術館
  美術館 --> 美術
  美術館 --> 館
  停留所 --> 停留
  停留所 --> 所

  classDef aunit fill:#7a3;
  classDef bunit fill:#fa3;
  classDef cunit fill:#cc6;
  class 県立,美術,館,前,停留,所 aunit
  class 美術館,停留所 bunit
  class 県立美術館前停留所 cunit
```

[Sudachi](https://github.com/WorksApplications/Sudachi) の複数粒度分割はこの構造のサブセットに当たり、いちばん上をC単位[^1]、中間ノードの一部をB単位、末端ノードをA単位として出力するよう辞書に分割情報を記述します。

[^1]:例であり「県立美術館前停留所」はシステム辞書には登録されていません。

サブセットではなくこの構造全体を記述したい、というのが語構成情報になります。語構成情報は分割情報とおなじく配列で、その語の直下にくるノードを順番に記述します。「県立美術館前停留所」であれば「県立美術館前」と「停留所」、「県立美術館前」は「県立美術館」と「前」というように再帰的に分割していくことにより木構造をすべて表現することができます。

と、仕様設計のときは志高くはじめたのですが、C、B単位語の分割情報の記述すらままならない中、語構成情報の整備まで手が回らず未使用カラムとして塩漬けになっているのが現状です。しかし実装はされており、17カラム目に記述された情報は辞書に書き込まれ `WordInfo.getWordStructure()` で取り出すことができます。

いつかこの語構成情報が日の目をみるときがくるよう辞書整備をつづけていきます。

ではよい Sudachi life を。
n=1で始めた生活改善withデータ


[クリスマスに向けデータに関する想いや技術をぶっちゃける Advent Calendar 2022](https://qiita.com/advent-calendar/2022/sinkcapital)の12/10分として書かせていただきます。

## はじめに

はじめまして！
おかべと申します。人間です。大学院生です。
不均衡データ分析や判別に関して興味を持っています。

最近はtorchと戯れています。

## 記事の背景

某ウイルスが流行り始めたあたりで、心身ともに体調を崩しがちになってしまったこともあったり、睡眠をトラッキングできたら面白いなと思って、2021/9/21からfitbitで自身の睡眠トラッキングを始めました。
つけてるだけで勝手に睡眠のデータをとってくれるので楽しいです。
ちょっと前に何がわかるんだろうと思ってプレミアム会員に登録しました。

それと同じくらいのタイミングでお家をスマートにし始めました。
朝カーテンが自動で開いたり、家に帰ったら勝手に電気がついたり、太陽が昇るタイミングでエアコンが勝手についたり...

## データを溜める

iPhoneのヘルスケアアプリがとても優秀です。
動いた歩数もAppleWatchで記録された心拍も、体重計で測った体重も全部記録されています。

基本的にはAppleWatchで活動量だったり心拍と睡眠、iPhoneで歩数とかを記録していますが、この辺は特に何も考えなくても勝手に溜まっていってくれるので嬉しいです。

自ら行動して記録/手元に持ってくる必要があるのは体重のデータや部屋の温度のデータかなと思って、それらは次の方法によって溜めています。
あと、fitbitもAPI使ってとってこないといけないですね。

### 体重を記録しよう

体重は昔買った1byoneの体重計を使っています。
BluetoothでiPhoneに記録できるので便利です。

こんなものも出してくれるので減ってる感を実感できます。
![IMG_4807.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62741/53ef1915-5357-81ba-2255-fa3ed05f929b.jpeg)



### 部屋の温度を記録しよう

室温の記録はNatureRemoとswitchbotの温度計を使っています。

Natureremoは10分おきにAPIを叩いて温度を取得しています。
特に意味はないですが、cronではなくPythonの[schedule](https://schedule.readthedocs.io/en/stable/)を使いました。
そして、とってきた温度はSQLite3のデータベースに入れています。
コードは[ここ](https://github.com/mokab/roomtemp)にあります。

### fitbitのデータを持ってくる

fitbitのデータはAPIを使って落としてきて、1日分ずつpickleで保存しています。
コードは[ここ](https://github.com/mokab/DLfitbitData)にあります。
(間に合わせで公開した感MAXですが...)

## 睡眠時の心拍
良い睡眠(未定義)を達成するために、まずは睡眠時の心拍数に着目してみました。

### バカ食いをして寝てみた

深夜に奈良にあるとあるラーメン屋に行った後に寝た日、次の日の寝起きは全く寝たきがせずに最悪な気持ちです。
fitbitで計測された心拍数は次の図の通りでした。
![IMG_4809.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62741/c34d898e-9fb9-5a92-31a4-a979e781dbf9.jpeg)
これは寝た気がしませんね。
消化のために身体が頑張りっぱなしでした。


## 冬に布団から出るために
今年はなんかバタバタしていて、衣替えのタイミングがよくわからなかったという問題がありました。
まだ布団のシーツを冬仕様にできていません。

そしたらなんか体調がよくない期がやって、布団から出られなくなってしまいました。
解決策として、起床時の室温を上げたいのですが、夜からずっとエアコンつけっぱなしはよくないと思ったので、太陽が上がるあたりのタイミングでエアコンがつくように設定しています。
その設定にiPhoneのショートカットアプリが便利でした。
デフォルトのトリガーとして日の出が使えるのはとても良いです。
参考までにこんな感じに設定しています。
(夏もどうにかしたいけど、夏はちょっと冷えたらいいから冬をどうにかする必要があるんだろうなあと思っています。)

![スクリーンショット 2022-12-09 23.05.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/62741/408855dd-7151-d993-c71c-627a9897060e.png)

今後の課題としては、気持ちとしての睡眠の気持ちよさを何かしらの方法で記録できないかな...ってところです。

## 今後の課題とおわりに

データをどう溜めたらいいんかなっていうのがいまいちよくわかっておらず、なんとなくでやっているという状況です。
とはいえ、n=1だから困ってはいないのかな...という状況でもあります。

そして、コードも雰囲気で書いたので、ちゃんと整備されているものではないので、いずれは綺麗にしたいなという気持ちです。

このポエムの内容は少し前に自分の中で楽しいなと思っていてデータを溜めていく環境を作ったところなんですが、そっから放置されているので、自身の良い生活のためにこっから何かしていきたいとは思っています。
感覚的に、ダイエットを経て睡眠時の心拍数が下がったな...って気持ちなんですが、データからちゃんと調べておきたいなあというのが今後の課題です。
室温と睡眠時心拍とかは見てみたんですが、いまいちコレという結果も得られず...ちまちま睡眠改善をしていきたいと思っています、

[@booklin_sc](https://twitter.com/booklin_sc)、声をかけていただきましてありがとうございました。
OpenShiftについて整理した

# はじめに
社会人1年目で、現場に入ってから6か月が経過しました。
そこで現場で得た知識を備忘録もかねてまとめてみたいと思います。

# OpenShiftとは

OpenShiftは、Red Hatが提供するソフトウェアになります。

![openshift.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629115/aee30eee-9e0e-fe9c-4472-8c23e2a30303.png)

これらを利用するときには、ocコマンドと呼ばれるもので簡単に作成することもできますが、詳細な設定を行いたい場合にはマニフェストファイルと呼ばれるものに設定を記述して作成することもできます。
以下が構築をするときに必要なリソースの一部になります。

##### Pod
Podの中に複数のコンテナを乗せて使用する。

##### Deployment
Podの情報などをマニフェストファイルに定義して使用する。

##### Service
Routeから流れてきたものをPodに振り分ける。

##### Route
Serviceを外部に公開するときなどに使用する。

流れとしては以下のような感じです！
![RouteHTTPS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629115/e50da2ca-7984-f0ef-45db-267bea0b4bf5.png)

# まとめ
簡単にですがOpenShiftについてまとめさせていただきました。
まだまだ設定できるものなど、知らないものも多いのでこれからいろいろ知っていきたいと思います。
JavaとgRPCで2Dバーチャルオフィスっぽい何かを作る ②gRPC bidirectional streaming

:::note info
この記事は [TLB Enjoy Developers Advent Calendar 2022](https://qiita.com/advent-calendar/2022/tlb-enjoy) 9日目の記事です。
:::

## 概要
前回に引き続き、2Dバーチャルオフィスっぽいツールを作っていきます。
[JavaとgRPCで2Dバーチャルオフィスっぽい何かを作る ①概要編](https://qiita.com/kdr250/items/7a82ceaea3ae4a0ec917)

## 今回の目的
今回はgRPCの双方向通信を用いてプレイヤー同士が位置を共有する方法について書きます。
調べたところ同期方式にもいくつかの選択肢があるようですが、今回は**非同期でクライアントからサーバーに位置を送信する**ような方式を選択しました。多人数が接続する上に対戦する訳ではないので、厳密な同期は不要と判断したからです。

また同期間隔について、多人数参加型のオンラインゲームなどでは1フレーム事に同期を取っているわけではなく、数フレームごとに同期を取ることでわずかなラグを許容しているようです。したがって今回は**60FPSで10フレームごとにクライアントからサーバーに同期**するような実装を目指します。

以下のサイトが参考になりました。

- [[CEDEC 2010]ネットゲームの裏で何が起こっているのか。ネットワークエンジニアから見た，ゲームデザインの大原則](https://www.4gamer.net/games/105/G010549/20100905002/)
- [同期ズレってなーに？](https://squid-ink-cafe.com/lag/lag-basic-03/)

## 試しに作ったもの
![qiita1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710108/092f3b43-183f-021d-4e35-616cfda4c837.gif)

未完成ですが、ソースコードは以下になります。
https://github.com/kdr250/grpc-2d-sample

## gRPC Spring Boot Starter
[gRPC Spring Boot Starter](https://github.com/yidongnan/grpc-spring-boot-starter)を使用しました。
[チュートリアル](https://yidongnan.github.io/grpc-spring-boot-starter/en/server/getting-started.html)に従って、インターフェース定義用のプロジェクト、サーバープロジェクト、クライアントプロジェクトのようにマルチプロジェクト化しています。

## protobufによるインターフェースの定義
gRPCのインターフェース定義はprotobufで行います。
`generateProto`タスクを実行することでjavaファイルが自動生成されます。

<details><summary>Player.proto</summary><div>

```protobuf
syntax = "proto3";

option java_multiple_files = true;

option java_package = "com.example.shared";

option java_outer_classname = "PlayerProto";

service Player {
    rpc Initialize (GrpcPlayer) returns (AddEvent);
    rpc Sync (stream PlayerSyncRequest) returns (stream PlayerSyncResponse);
}

message PlayerSyncRequest {
    GrpcPlayer player = 1;
    repeated string otherPlayerIdList = 2;
}

message PlayerSyncResponse {
    oneof event {
        AddEvent addEvent = 1;
        MoveEvent moveEvent = 2;
    }
}

message AddEvent {
    GrpcPlayer otherPlayer = 1;
    repeated GrpcImageType imageType = 2;
}

message MoveEvent {
    GrpcPlayer otherPlayer = 1;
}

message GrpcPlayer {
    string id = 1;
    string name = 2;
    GrpcLocation location = 3;
}

message GrpcLocation {
    int32 x = 1;
    int32 y = 2;
}

message GrpcImageType {
    string name = 1;
    string base64Image = 2;
}
```
</div></details>

## gRPC bidirectional streamingについて
bidirectional streamingで永続的にstreamを維持する方法がわからず苦戦したのですが、クライアント側で以下の手順を踏む事で解決しました。
1. 最初にクライアント側のスタブでリクエストする。
1. スタブの戻り値のStreamObserverを変数化して保持しておく。
1. 以降、2で保持したStreamObserverを使ってサーバー側に送信する。


以下のサイトが参考になりました。
- [gRPC Bidirectional Streaming](https://www.vinsguru.com/grpc-bidirectional-streaming/)

## 感想
gRPC難しい...！
自分が使い始めた頃にあまり知らなかった機能 [Unity]

# はじめに
自分がUnityを触り始めた頃には気づきにくかった機能を並べてみます。

# Grid and Snap
macではcommand+左クリックしたままドラッグで、windowsではcontrol+左クリックしたままドラッグで使える機能です。
`Edit/Grid and Snap Settings`内の`Move`に設定した値にスナップしてゲームオブジェクトをドラッグできます。
1単位ずつ動かしたい時などに便利です。
![Snap2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178660/bafe330b-166c-6c12-302e-c83187b080fd.gif)

![スクリーンショット 2021-05-28 20.48.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178660/7b4e51de-0bab-67c9-41ae-c27eb1e95496.png)

# 頂点スナップ
ゲームオブジェクト選択中にvを押し続けることで、ゲームオブジェクトの頂点を持って動かすことができます。
この状態で動かすと、他のゲームオブジェクトの頂点にスナップする形になるため、きっちり並べたい時などに使えます。
![VSnap.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178660/8f4f321b-cea3-87f8-67c0-ea37a290bb2b.gif)

# Shading Mode
シーンビュー左上のメニューから、シーンビューでの描画モードをワイヤフレームなどに変更できます。
![スクリーンショット 2021-05-28 21.28.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178660/5646c53a-61e2-8c5b-5388-1a034d4b8760.png)

# Mute Audio
Gameビュー内の`Mute Audio`を選択することでゲーム再生時に消音することができます。
![スクリーンショット 2021-05-28 21.09.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178660/2fae9921-7ecc-c4e0-0ecf-8a1a2b933a10.png)

# インスペクタロック
インスペクタビュー右上の鍵マークをクリックすることでインスペクタをロックすることができます。
この状態では選択している対象を変更しても、ロックした際に表示していた対象のインスペクタをそのまま表示し続けるため、例えばゲームオブジェクトをまとめてインスペクタ内のフィールドにアタッチしたい時などに重宝します。
![スクリーンショット 2021-05-28 21.15.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178660/f38cb725-402b-f9da-4e4f-ee98655cae3f.png)

# ナンバリングの規則を変更
気づきにくかったというか自分が使い始めた頃には無かったような気がするのですが、ゲームオブジェクト複製時のナンバリングや、アセットの命名規則を変更することができます。
![スクリーンショット 2022-12-09 23.46.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987563/7f4a0dbf-5c35-49d6-4acb-5c386e3dadcd.png)
`Project Settings/Editor`から調整できます。
例えば`Game Object Naming`を`Prefab_1`に、`Game Object Digits`を`2`に変更すると、複製時に以下のようにナンバリングされるようになります。
![スクリーンショット 2022-12-09 23.52.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987563/1bf4d8a3-0488-b867-913a-e25564b0feec.png)

# ゲームオブジェクトを常に原点に配置する
Unityエディタで共有する設定である`Preferences`を開き、`Scene View`の`Create Objects at Origin`にチェックを入れることでゲームオブジェクトを常に原点に配置することができるようになります。
![スクリーンショット 2022-12-09 23.54.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987563/f6af68bf-00ff-8e66-64ef-543b734f7159.png)


# 開発者モードに変更
Unityを開発者モードに変更することで、スクリーンショットなどを撮る機能が追加されます。
![スクリーンショット 2022-12-01 23.42.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2987563/f3b1eaa0-91b1-3c2d-a602-0c6c26d85495.png)

初日のこの記事の最後の方で紹介しています。

https://qiita.com/tanikura/items/d46507946e23f1b7fe6f
Windowsバッチファイルでインターネットショートカットを作成しファイルをダウンロードする方法

# 1. はじめに
今回は、自分自身への備忘録を兼ねて、Windowsバッチファイルでインターネットショートカットを作成しファイルをダウンロードする方法を、お伝えしたいと思います

- 参考文献：[.urlファイル(インターネットショートカット)の作成・記述](http://taichistereo.sblo.jp/article/53446031.html)
- 参考文献：[令和4年（2022年）CSVデータ](https://www.city.hakodate.hokkaido.jp/docs/2022020900014/)

# 2. この記事を読んでできること
- Windowsバッチファイルでインターネットショートカットを作成しファイルをダウンロードすることができるようになる

# 3. 注意事項
- ダウンロードURLに、函館市のオープンデータ CSVファイルを利用させていただいております。（感謝）

# 4. 必要なもの
- Windows OS PC（Windows11を想定）
- テキストエディタ（サクラエディタを利用）

# 5. インターネットショートカットを作成しファイルをダウンロードするバッチファイル
- .batファイルを作成し、実行する

```bat:InternetDownload.bat
@echo off
cd /d %~dp0
setlocal enabledelayedexpansion
rem DOSバッチでインターネットショートカットを作成し、ファイルをダウンロードする方法

rem URLを設定
set DOWNLOAD-URL="https://www.city.hakodate.hokkaido.jp/docs/2022020900014/files/nennreibetsuR0401.csv"

rem インターネットショートカットファイル名を設定
set FILE-NAME=InternetShortcut.url

rem インターネットショートカットファイルを作成
echo [InternetShortcut]> %FILE-NAME%
echo URL=%DOWNLOAD-URL%>> %FILE-NAME%

rem インターネットショートカットを実行し、ファイルをダウンロードする
call %FILE-NAME%

rem 終了
endlocal
exit /b

```

---

# 6. おわりに
いかがでしたでしょうか？Windowsバッチファイルでインターネットショートカットを作成しファイルをダウンロードすることができたのではないかと思います
今回の記事が、みなさまの学習の参考になれば幸いです

2022/12/09 TAKAHIRO NISHIZONO

---
もういくつ寝ると、2022年13月1日元旦

はじめに
---
これは、[Visual Basic Advent Calendar 2022](https://qiita.com/advent-calendar/2022/vb) の9日目の記事です。
今更記事にする内容でもないのですが、カレンダーの隙間を少しでも埋められればと、、、

愉快なDateSerialメソッド
---
VB.Netの`DateSerial`メソッドは、年月日を表す3つの`int`を引数にとり、`DateTime`型の値を返す。（VBAでも同様に使える）

例えば、こんな風に、
```vb:Program.vb
Sub Main()
    Dim dt = DateSerial(2022, 13, 1)
    Console.WriteLine(dt)
End Sub
```
え？13月？

出力は、
```
> 2023/01/01 0:00:00
```

である。
年が1年繰り上がって月は12を引いて1月となる。
2022年13月1日は元旦か。しかし、これでは年が明けた気がしないなあ:sweat_smile:

続いて、これはどうか？
```vb:VB.Net
dt = DateSerial(2022, 0, 1)
Console.WriteLine(dt)
dt = DateSerial(2022, -1, 1)
Console.WriteLine(dt)
```

```
> 2021/12/01 0:00:00
> 2021/11/01 0:00:00
```
なるほど、0で12月なんだな。

更に、
```vb:VB.Net
dt = DateSerial(2022, 24, 1)
Console.WriteLine(dt)
dt = DateSerial(2022, -12, 1)
Console.WriteLine(dt)
dt = DateSerial(2022, -24, 1)
Console.WriteLine(dt)
```

```
> 2023/12/01 0:00:00
> 2020/12/01 0:00:00
> 2019/12/01 0:00:00
```

プラスは12を引いて、引いた数だけ年を繰り上げる。
マイナスは12を足して、足しただけ年を繰り下げる。

で、これは、
```vb:VB.Net
dt = DateSerial(2022, 12, 365)
Console.WriteLine(dt)
```

```
> 2023/11/30 0:00:00
```

何でも受け入れてくれるんだね。

C#で使う場合
---
C#で使うと、`Microsoft.VisualBasic`名前空間の`DateAndTime`クラスのメソッドだとわかる。
例えばこんな風に、
```csharp:C#
using Microsoft.VisualBasic;

var dt = DateAndTime.DateSerial(2022, 12, 24);
Console.WriteLine(dt);
```
出力は、
```
> Merry X'mas!
```
お、すげ〜な、C#　

もちろん冗談ですw
:christmas_tree::santa_tone1::christmas_tree::santa_tone1::christmas_tree::santa_tone1::christmas_tree::santa_tone1::christmas_tree::santa_tone1::christmas_tree::santa_tone1::christmas_tree::santa_tone1::christmas_tree:

■DateAndTime.DateSerial(Int32, Int32, Int32) メソッド
---

https://learn.microsoft.com/ja-jp/dotnet/api/microsoft.visualbasic.dateandtime.dateserial
Sensor Watch (SAM L22ボード)で物理エオルゼア時計を作る

# はじめに
やっぱりみなさんも、エオルゼア時計(以下略)
というわけでこちらは @nora_wanko さんの「[スマートウオッチ作る (1) SAM L22ボードの入手・組付け](https://qiita.com/nora_wanko/items/858071e6bf2fc2e4f393)」に便乗した記事です。

なお実機は注文しましたがまだ発送もされていないので、動作検証はエミュレータでのものを紹介します。

# 前提条件
- Sensor Watchの開発環境を構築済みであること

# Faceの追加
下記のコマンドで行えます。

```
cd movement/template/
python3 watch_face.py <フェイスタイプ> <フェイス名>
```

今回は下記のようなコマンドを実行します。
```
cd movement/template/
python3 watch_face.py clock eorzea_clock
```
※cファイル及びヘッダファイル名は、フェイス名の末尾に「_face」がついたものになります。

:::note warn
このコマンドを実行することにより新フェイスのcファイルとヘッダファイルが生成される他、必要ファイルへの追記が行われます。
すでに存在するフェイスのcファイルとヘッダファイルをコピーするなどして作成すると、`make` および `emmake make` に失敗します。(失敗しました)
:::

# エオルゼア時間をFaceに表示する

エオルゼア秒はいつものように、日本時間における週内経過秒を求めてそれを「1440 ÷ 70」倍したエオルゼア秒から求めます。
念のため計算機資源に気を使ってみました。

```c:eorzea_clock_face.c(抜粋)
const int ONE_DAY_SEC = 60 * 60 * 24;
const int ONE_HOUR_SEC = 60 * 60;
const double MULTIPLIER_TO_EORZEA_SEC = (double)1440 / (double)70;

typedef struct {
    uint8_t hour;
    uint8_t minute;
    uint8_t second;
} eorzea_clock_hms_t;

static void _date_time_to_hms(eorzea_clock_hms_t *date_time_eorzea, watch_date_time date_time) {
    unsigned int weekday_index;
    double week_sec;
    unsigned int eorzea_week_sec;
    weekday_index = _get_weekday_index(date_time);
    week_sec = (ONE_DAY_SEC * weekday_index) + (ONE_HOUR_SEC * date_time.unit.hour) + (60 * date_time.unit.minute) + date_time.unit.second;
    eorzea_week_sec = (unsigned int)(week_sec * MULTIPLIER_TO_EORZEA_SEC);

    date_time_eorzea->hour = (eorzea_week_sec / ONE_HOUR_SEC) % 24;
    date_time_eorzea->minute = (eorzea_week_sec / 60) % 60;
    date_time_eorzea->second = eorzea_week_sec % 60;
}
```

あとは画面更新用の関数を作成して、毎Tickごとに呼び出されるようにすれば完成です！
なお例によってエオルゼア秒は、精度とTickが荒いので非表示としています。
```c:eorzea_clock_face.c(抜粋)
static void _update(movement_settings_t *settings, eorzea_clock_state_t *state) {
    char buf[11];
    watch_date_time date_time = watch_rtc_get_date_time();
    eorzea_clock_hms_t eorzea_time;
    _date_time_to_hms(&eorzea_time, date_time);

    sprintf(&buf[0], "%s  %02d%02d--", "ET", eorzea_time.hour, eorzea_time.minute);
    watch_set_colon();
    watch_set_indicator(WATCH_INDICATOR_24H);
    watch_display_string(buf, 0);
}
```

# エミュレータでの実行結果
![実行結果の画像](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2066798/24d5f538-e548-a920-4f06-e2b6f36a9f8c.jpeg)

# 今後の課題
- 12時間/24時間表示を切り替えられるようにする
- RTCが日本時間以外に設定されている場合の考慮

# さいごに
楽しいスマートウォッチ生活を！