OmniAICreator/Qiita-1.07M huggingface dataset:
OGPについて


# はじめに
この記事は[Webの基礎をおさらいカレンダー Advent Calendar 2022](https://qiita.com/advent-calendar/2022/basic_review)です。
このカレンダーでは、なんとなくわかった気になっている、Webの知識をおさらいするカレンダーです。
興味をもし持ってくださった方は、購読いただけると嬉しいです！

今回はOGPについて説明いたします！

## OGPとは
Open Graph Protocolの略で、SNSでシェアした際に、Webページの詳細情報を伝えるためのHTMl要素のことです。

OGPを設定することで、リンクを共有した時にユーザーへの訴求が強くなります。
metaタグとして`<head>`要素の中に記載します。

共通用の設定を書いた後、SNSでの必要な設定を記載します。

### 記載方法

共通用の設定としてまず下記を記載します。

```html
<head prefix="og: http://ogp.me/ns#  fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta property="og:url" content=" ページURL" />
<meta property="og:type" content=" ページの種類" />
<meta property="og:title" content=" ページタイトル" />
<meta property="og:description" content=" ページ説明文" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content=" サムネイル画像のURL" />
```

* URLには絶対パスを記載する
* typeにはwebsiteもしくはarticleを入れます。

#### twitter用の設定

```html
<meta name="twitter:card" content="Twitterカードの種類" />
<meta name="twitter:site" content="@から始まるTwitterID" />
<meta name="twitter:player" content="@から始まるTwitterID" />
```

カードの種類には`"summary"、"summary_large_image"、"app"、"player"`のどれかを入れます。
 
# おわりに
以上、OGPについての説明でした！

[Webの基礎をおさらいカレンダー Advent Calendar 2022](https://qiita.com/advent-calendar/2022/basic_review)でした。
興味をもし持ってくださった方は、購読いただけると嬉しいです！

## 参考文献
[Twitter 開発者プラットフォーム](https://developer.twitter.com/ja/docs/tweets/optimize-with-cards/guides/getting-started)
【Rails】コメント削除ボタンをコメントしたユーザーのみ表示させるには。

# はじめに
プログラミング初学者の者です。オンラインでプログラミングを学習させて頂いてるのですが、さらに理解を深めていきたいと思い、学習したことを備忘録として、残して理解を深めていきたいと思います。
また、間違った点など、ありましたら、ご指摘いただけると幸いです。よろしくお願いします。

# コメント削除ボタンをコメントしたユーザーのみ表示させるには。
現状下記の状態では全ユーザーに削除ボタンが現れてしまい、削除できる状態でした。
```app/views/recipes/show.html.erb
<div class="recipe-comments">
      <% @comments.each do |comment| %>
      <div class="comments_list">
        <div class="comments-title">
        <%= comment.user.user_name %>さんの投稿
        </div>
        <%= comment.content %>
        <%=link_to "削除", recipe_comment_path(comment.recipe,comment), method: :delete %>
      </div>
      <% end %>
      <%= form_with model: [@recipe, @comment], local: true do |f| %>
      <div class = 'form-group'>
        <%= f.text_area :content, class: "form-control", id:"comment_content", placeholder: "コメントを記入してください" %>
      </div>
        <%= f.submit "コメントする", class: "btn btn-primary" %>
      <% end %>
  </div>
```
# if文で条件分岐させます
```app/views/recipes/show.html.erb
<div class="recipe-comments">
      <% @comments.each do |comment| %>
      <div class="comments_list">
        <div class="comments-title">
        <%= comment.user.user_name %>さんの投稿
        </div>
        <%= comment.content %>
       <% if current_user == comment.user %>  ###←追記
        <%=link_to "削除", recipe_comment_path(comment.recipe,comment), method: :delete %>
       <% end %> ###←追記
      </div>
      <% end %>
      <%= form_with model: [@recipe, @comment], local: true do |f| %>
      <div class = 'form-group'>
        <%= f.text_area :content, class: "form-control", id:"comment_content", placeholder: "コメントを記入してください" %>
      </div>
        <%= f.submit "コメントする", class: "btn btn-primary" %>
      <% end %>
  </div>
```
削除ボタンのlinkの部分に「<% if current_user == comment.user %> 」
現在ログインしているユーザーとコメントしたユーザーが一致した場合、表示させる分岐を行います。
micro:bitで気軽にネオピクセルLED(砲弾型)を試してみる

テープ型のネオピクセルをmicro:bitで使おうとするとはんだ付けやコネクタなど色々と準備が必要です。
秋月電子で売っている砲弾型のネオピクセルLEDをmicro:bitで使ってみました。

# 購入品
秋月電子で販売している１つ40円とお手軽な「マイコン内蔵ＲＧＢＬＥＤ　８ｍｍ　ＰＬ９８２３－Ｆ８」を購入しました。

https://akizukidenshi.com/catalog/g/gI-08412/

# MakeCodeに拡張機能の導入
neopixelで検索すれば出てくる下記モジュールを導入します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/58610af3-316e-c9c9-f9a6-cfc64f16be6e.png)

#micro:bitとの接続

1番左端の4DINをmicro:bitの端子0、3VDDを3Vに、1GNDをGNDに接続します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/e98fa089-d36a-a44a-2e12-01544c1c7582.png)

# 1点だけ注意事項
このLEDに内蔵されているICは"WS2811"です。
neopixelの拡張機能のブロックではデフォルトがRGB(GRB順)になっていますが、"WS2811"の設定にするため、ここはRGB(RGB順)に変更してください！
ここを間違えると指定した色と違う色が出てしまいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/73fec914-35c0-3ac5-12e9-cf97d872cda2.png)

# 実際のコード
A、B、A+Bで赤、青、緑が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/40349621-6f0f-f650-49e9-950cad830a80.png)


#動作ビデオ
<iframe width="560" height="315" src="https://www.youtube.com/embed/hPpGqB8y4sM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
TailwindとLinariaを書き比べたら、圧倒的にLinariaの方が良かった

# はじめに
初めまして。HITOTSU株式会社の大塚正樹です。[HITOTSUアドベントカレンダー](https://qiita.com/advent-calendar/2022/hitotsu)の２日目担当します！

Gatsby x Tailwindでサイトを作った数ヶ月後に、別プロジェクトでGatsby x Linariaを使いました。TailwindとLinariaを比べるような形となったのですが、圧倒的にLinariaの方が良かったシェアします。

# Tailwindとは
ユーティリティファーストのCSSフレームワークです。 ユーティリティファーストとは、素のcssを使わずに、Tailwind CSSが用意しているユーティリティクラスを主に使ってスタイリングしていく考え方です。

# Linariaとは
ゼロランタイムのCSS in JSライブラリです。
ゼロランタイムとは、CSS in JSのの構文でスタイルを書きますが、そのCSSはビルド時にCSSファイルに生成されるというもの。
CSS in JSとは、JavaScriptを用いてCSSを記述するアプローチです。CSSはコンポーネントに定義され、外部のCSSファイルに依存することなく、コンポーネント単体で独立します。

# tailwindのここが嫌い
・詳細度が考慮されてない
Tailwindで開発している中で1番大変だったのが、詳細度の問題。gatsbyが生成するCSSに負けることが多々あり、importantを多用する羽目に。。。


・レスポンシブ対応するとインラインのクラスが読みにくくなる。
Tailwindのレスポンシブ対応は、下記のように`sm:`や`md:`に続けて書くのですが、読みにくい。都度都度mdを書かなければいけなかったり、flexやmxなど意味で分けると、mdやsmが交互に混じりこむ形に。。。
`<div className="flex flex-col md:flex-row items-center justify-around md:mt-12 mx-9 sm:mx-40 md:mx-0">`

# Linariaのここが好き
・読みやすさ
htmlとCSSがコンポーネント化されており、個人的にはインラインよりも読みやすいと感じました。
```import { styled } from '@linaria/react';
import { families, sizes } from './fonts';

// Write your styles in `styled` tag
const Title = styled.h1`
  font-family: ${families.serif};
`;

const Container = styled.div`
  font-size: ${sizes.medium}px;
  color: ${props => props.color};
  border: 1px solid red;

  &:hover {
    border-color: blue;
  }

  ${Title} {
    margin-bottom: 24px;
  }
`;

// Then use the resulting component
<Container color="#333">
  <Title>Hello world</Title>
</Container>;
```
・やはり速い！
ゼロランタイムともあり、速いと感じます！実際に、Linariaで作った方はpagespeed insightでtailwindよりも高い評価を記録しました！（もちろん作ったサイトのコンテンツが違うので一概には言えませんが。）

# まとめ
Tailwindは個人的には好きにはなりませんでした。特に詳細度の問題には気をつけて頂ければと思います。一方、Linariaはおススメです！是非使ってみてください！
次のアドベントカレンダーの担当は、知識の幅がすごい@miyatomoさんです！
Unityでボイスチャットをしよう！【TencentCloud】

# 概要
Unityでボイスチャットを行う際の方法はいろいろあると思いますが、今回はTencentCloudのサービスであるGaming Multimedia Engineを使ってみたいと思います。

ちなみに、TencentCloudの本人認証がまだ通っていないため、実際にボイスチャットが動作するところまで行えていません。
あとはTencentCloudのキーが発行できれば動くので、あとはキーを書き足すところまでを解説したいと思います。

# 環境
Unity2019.4.24f1
（Unityのバージョンは2020以下を利用してください。）
Windows10
（Macの方は追加の作業が必要となります。）

# やり方
1.　まず、TencentCloudに登録します。
以下リンクから「今すぐ使用する」を押して登録します。

https://www.tencentcloud.com/jp/products/gme?from_qcintl=click_common_product_center_level14-no.1_item1_nav&ext1=%E3%82%B2%E3%83%BC%E3%83%A0%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9&ext2=Game%20Multimedia%20Engine

2.　次にTencentCloud上でアプリケーションの登録を行います。
以下リンクより「Create now」を押します。

https://console.tencentcloud.com/gamegme

そうすると以下の画面が出てきます。
適当にApplication nameを決め、ボイスチャットを行うために必須のReal-time Voice ServiceをEnableにします。
他のオプションはつけてもつけなくても大丈夫です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1303271/8714bceb-180c-abbd-640c-55a4b1d4d9d1.png)



3.　続いてSDK及びデモのDLを行います。
以下リンクの一番下に行き、UnityのSDKとDemoのダウンロードを行います。
今回はDemoのみを用いるのでDemoだけでも大丈夫です。

https://www.tencentcloud.com/jp/document/product/607/18521

4.　UnityHubを立ち上げてダウンロードしたDemoをリストに追加します。
この際、Unityのバージョンを2020年以前に設定します。
（2020年以前に設定する理由として、Androidを対象にしたビルドの際、Demoプロジェクトのままだとエラーが出るためです。）
![s2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1303271/0dd0b618-6a96-9933-ee90-330340495584.png)

5.　開くと大量のエラーに驚くと思いますが、対応していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1303271/bf703f4a-7b2a-802a-a937-c2f42a524696.png)
Projectタブを開き、Assets→Scripts→Demoの中の、UserConfig.csを開きます。

6.　31行目を探し、そこにTencentCloud側で作ったアプリケーションのAppIDを
36行目を探し、そこにAppKeyをそれぞれ入力します。![s3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1303271/59ea1680-e352-e1a2-d410-719eaf287540.png)

![AppID](https://main.qcloudimg.com/raw/545ee256ab3c2b08c65a8bf3cf2d1cbd.jpg)
（AppIDの画像はTencentCloudHPより引用）

7.　最後にUnityのオーディオ設定をいじります。
Edit→ProjectSetting→Audio→System Sample Rateを48000にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1303271/c97394c6-13ce-9395-3215-36567333c87a.png)



# デモ実行
1. ProjectタブのScene→Demo内のEnterRoomSceneを開きます。
1. 以下の画面が開くと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1303271/2ce833b7-76c9-fa9a-014f-8060dd0301f5.png)

上には適当なルームIDを入力して、JoinRoomを押してください。
するとChatSceneに入り、チャットができるようになります。

# 参考リンク

https://www.tencentcloud.com/jp/document/product/607/18521

https://www.tencentcloud.com/jp/document/product/607/39521



# PS
本人認証が通り次第、使用感を記述していこうと思います！
metaタグについて

# はじめに
この記事は[Webの基礎をおさらいカレンダー Advent Calendar 2022](https://qiita.com/advent-calendar/2022/basic_review)です。
このカレンダーでは、なんとなくわかった気になっている、Webの知識をおさらいするカレンダーです。
興味をもし持ってくださった方は、購読いただけると嬉しいです！

今回はmetaタグについて説明します！

## metaタグとは
Webサイト自体の情報を記載するタグのことです。
検索エンジンや他のクライアントに伝えるために使用されます。
例えば、Googleでは[こちら](https://developers.google.com/search/docs/crawling-indexing/special-tags?hl=ja)のmetaタグをサポートしています。

`<head>`要素に記載します。

この記事では、よく使われるmetaタグについて説明します。


| metaタグの種類 | 内容|
| ------ | ---|
| charset|文字コードの指定。文字化けを防ぐために指定。基本的にutf-8|
| robots |検索エンジンへのインデックスを調整するための記述。noindex nofollowで検索結果に表示させない。|
| viewport|ページの表示領域を指定する。PCやスマートフォンなどでデバイスサイズが異なるので、指定する|
| description|ページの説明・概要を記述する。検索結果の説明項目に使用されたりする。|
| og|SNS向けの表示内容の調整。Twitterの設定を行うと、リンクを紹介した時にカード型のリンクとして表示されたりする。|


# おわりに
以上、metaタグについての説明でした！

[Webの基礎をおさらいカレンダー Advent Calendar 2022](https://qiita.com/advent-calendar/2022/basic_review)でした。
興味をもし持ってくださった方は、購読いただけると嬉しいです！
セールス職がSQLを使えるようになるまで🐢_SQL基礎知識

# これはなに
こちらは非エンジニアでセールス職の僕がSQLを使いこなせるようになる（絶賛勉強中です）までの過程を備忘録的に記録するものです。
非エンジニアだけどSQLを使えるようになりたい！もしくはこれからエンジニアになるために1からインプットしたい！という方は僕と一緒に頑張りましょう🙌

この記事は僕がSQLを学ぶにあたり一番最初にインプットした基礎知識についてまとめさせていただきました。
とっっっても初学者的な情報となりますが、非エンジニアがエンジニアリングに奮闘する様を応援してやってください・・！


## 少しだけ自己紹介
Qiita株式会社にて企画営業を担当しております。
SQLの勉強はQiita記事や社内の勉強会資料、コードを書く部分については[Progate](https://prog-8.com/)を使わせていただいています。

最近の楽しみはポケモン（スカーレット）です！
相棒はなんかほっとけなかったのでホゲータを選びました。

それでは本題に入っていきます！

## SQLとは？
データベース（テキスト、数値などの情報を保存するためのツール）から情報を活用するための言語です。

## データベースの仕組み
データベースとは下の図（ポケモン図鑑SV：zukansv）のような表でデータを管理しています。
表のことを`テーブル`と呼び、縦の列のことを`カラム`、横の行のことを`レコード`と呼びます。

| id| name | type1 |type2|
|:-----------:|:------------:|:------------:|:------------:|
| 1        | ニャオハ         | くさ        |-|
| 2       | ニャローテ         | くさ        |-|
| 3        | マスカーニャ         | くさ        |あく|
| 4        | ホゲータ         |ほのお         |-|

また、データベースでは、必要に応じて複数のテーブルを作成することが可能です。
例：ポケモンを管理するモンスターテーブル、道具を管理する道具テーブルなど


## クエリについて
データベースにある情報を活用するには`クエリ`を使います。
**データベースへ送る命令=クエリ**です。

以下を使ってクエリを書いていきます！


### SELECT  
データベースから、特定のデータを取得するためには`SELECT`を用います。
文字通りこの`SELECT`を用いて、「どのカラムのデータを取得するか」を選びます。

例：ポケモンの名前を抽出するとき
```sql
SELECT name
```

### FROM
データベースには複数のテーブルが存在する場合があります。
そのため、`FROM`を用いて、`SELECT`で選んだカラムが「どのテーブルのカラムか」を指定する必要があります。

例：SVのポケモンの名前を抽出するとき

```sql
SELECT name
FROM zukansv
```
### 複数のカラムからデータを取得するとき
以下の通り、カラム名をコンマ（,）で区切ることで複数選択できます。
全てのカラムのデータを取得する場合は（*）を使うことで全選択ができます。

```sql
SELECT id,name

SELECT *
```

### 特定のデータを取得するとき
どこのという意味である「WHERE」を使います。
※SELECT、FROMにてどのテーブルの、どのカラムかは指定されている状態のため、WEHREではレコードの情報を取得できます。

```sql
WHERE type1 = ○○
```

#### データ型
データベース内にてテキスト、日付、数値データなどを見分けるための「データの種類を見分けるルール」です

テキスト、日付には`クオーテーションマーク(" ")`をつかいます。
※数値データには`" "`を付けてはいけないため注意

例、ポケモン図鑑SVの中からくさタイプを取得する

```sql
SELECT *
FROM zukansv
WHERE type1 = 'くさ' 
```

#### 比較演算子
WHEREの条件では「=」の他に比較演算子（大小比較の企業）を利用することもできます 。

```sql
< （より小さい）
<= （以下）
> （より大きい）
>= （以上）
```

#### LIKE演算子
特定の文字を含むカラムからデータを抽出する際には～のようなという意味をもつ「LIKE」を使います。

##### ワイルドカード
「ワイルドカード」とは、どんな文字列にも一致することを指す記号を指します。
LIKE演算子では`%`をワイルドカードとして使用します。

```sql
%○○%（部分一致）
例：%コイル% → コイル〇、レアコイル〇、ジバコイル〇

○○%（前方一致）
例：レジ% → レジスチル〇、レジアイス〇、レジロック〇、電子レジスター×

%○○（後方一致）
例：%コイル → コイル〇、レアコイル〇、ジバコイル〇、コイル材×
```

#### NOT演算子
○○に一致しない、○○を含まないといった条件でデータを取得する際は「NOT」を使います。

例：名前にコイルを含まない
```sql
WEHRE NOT name LIKE %コイル%
```

#### AND演算子
`WHERE 条件１ AND 条件２`
WHERE以降の条件をともに満たすデータを抽出します

```sql
WHERE name =  'ニャオハ'
AND type1 = 'くさ'
```

#### OR演算子
`WHERE 条件１ OR 条件２`
WHERE以降の条件のいずれかを満たすデータを抽出します

```sql
WHERE name = 'ニャオハ'
OR name = 'ニャローテ'
```

## まとめ
上記はSQLを書くための基礎なので、しっかりと覚えて今後の学習に役立てていきたいです。
引き続き備忘録的にアウトプットしていきますので優しく見守っていただけると嬉しいです！

※もし誤りがあればご指摘いただけると嬉しいです:pray:
Azure VPN クライアント エラー対応

AzureVPNクライアントでVPN接続できないときのエラー対応をここに記録していく。

# システム時刻が異常にズレている
```
エラーの理由　Server did not respond properly to VPN ControlPackets. SessionState: リセットが送信済み
```
上記エラー文言がでているときはOSのシステム時刻を疑ったほうがよい。
過去ヘルプデスクで対応した２件すべてがシステム時刻が大幅(40分ぐらい）にズレていた。
ズレの修正は指定しているNTPサーバーの確認・同期できているかをチェックしてみる。
Microsoft Sentinel分析ルールの紐解き（User login from different countries within 3 hours (Uses Authentication Normalization)）

Microsoft Sentinelにおいてもともと準備されている分析ルールについてクエリの中身や注意点等を紐解いていく。

:::note warn
警告
なお、このルールは利用環境によっては過検知が多発するためチューニングが必要である。
例えば
- 他国と判定されたIPアドレスが日本国内でメジャーであるVPNサービスである場合は検知除外する（リスク受容する）
- Identity Protectionの判定結果を加味するようにクエリをチューニングする

である
::: 

# 1. ルール概要
|項目|説明|
|--|--|
|重大度|高|
|ルール名|User login from different countries within 3 hours (Uses Authentication Normalization)|
|ルールの種類|Scheduled|
|ルールの頻度|3時間ごとにクエリを実行|
|ルールの期間|過去3時間のデータ|
|バージョン|1.2.2|
|説明|このクエリは、3時間以内に異なる国からのユーザーのログインが成功したかどうかを検索します。（by DeepL）|
|Ref|https://github.com/Azure/Azure-Sentinel/tree/master/Parsers/ASimAuthentication|

# 2. 活用するテーブル
|テーブル名|概要|参考URL|
|--|--|--|
|imAuthentication|正規化された認証イベントログ|<https://github.com/Azure/Azure-Sentinel/tree/master/Parsers/ASimAuthentication>|

# 3. クエリ解説
```Kusto:User login from different countries within 3 hours (Uses Authentication Normalization) / version1.2.2
// 分析対象の期間
let timeframe = ago(3h);
// 検知する国の種類のしきい値
let threshold = 2;
// パーサーによって正規化された認証イベントを対象にする
imAuthentication
// 分析対象期間内のイベントに絞り込む
| where TimeGenerated > timeframe
// ログオンイベントかつログオンが成功しているイベントに絞り込む
| where EventType=='Logon' and EventResult=='Success'
// ログオン時のIPの国情報フィールドのデータが空でないものに絞り込む
| where isnotempty(SrcGeoCountry)
// ユーザーID、名前、タイプを主キーとして最も古いログオン日時、最も新しいログオン日時、認証ログ出力元のベンダー、プロダクト名、国情報の種類を表示する
| summarize StartTime = min(TimeGenerated), EndTime = max(TimeGenerated), Vendors=make_set(EventVendor), Products=make_set(EventProduct) , NumOfCountries = dcount(SrcGeoCountry) by TargetUserId, TargetUsername, TargetUserType
// 国情報の種類が2種類以上のものに絞り込む
| where NumOfCountries >= threshold
// タイムスタンプフィールドに最初のログオン日時、アカウントエンティティフィールドに対象ユーザーを格納
| extend timestamp = StartTime, AccountCustomEntity = TargetUsername
```
(補足) Web Chat がサポートするレスポンス・タイプ

[Web Chat カスタマイジング](https://qiita.com/yanagih/items/286d077a81d71a254f77)に関する補足記事です。

[Qiita Advent Calendar](https://qiita.com/advent-calendar/2022/wanclcfc_enjoy) にて Web Chat 機能を取り上げましたが、紹介しきれなかった機能をご紹介します。

# レスポンス・タイプ
<img src="https://i.ibb.co/PWVS9BD/2022-12-25-22-43-45.png" alt="2022-12-25-22-43-45" border="0">

### ユーザー・レスポンス・タイプとして使用できる標準機能

* Video
* Audio
* iframe

アクション内の**ステップ**にて、定義することが可能です。
<img src="https://i.ibb.co/JcY8JHn/2022-12-25-22-56-42.png" alt="2022-12-25-22-56-42" border="0">

### カスタム・レスポンスとして使用できる機能

* IBM Carbon Design System

# IBM Carbon Design System の例

React, Vue, Angular をサポートしています。
<img src="https://i.ibb.co/1ztQQHs/2022-12-25-22-47-16.png" alt="2022-12-25-22-47-16" border="0">
[コンポーネント・インデックス](https://carbondesignsystem.com/community/component-index/)が見れます。

# 参考情報

### Web Chat 関連

https://web-chat.global.assistant.watson.cloud.ibm.com/docs.html

https://github.com/watson-developer-cloud/assistant-toolkit/tree/master/integrations/webchat

### IBM Carbon Design System 関連
https://carbondesignsystem.com/

https://carbondesignsystem.com/community/component-index/

https://github.com/carbon-design-system/carbon
【PHP】nヶ月後の日付を計算したい！

## とりあえず書いてみる
突然ですが、与えられた日付のnヶ月後を表示する必要が発生しました。
とりあえず書いてみます。

```php
function addSomeMonthsToTargetDate($targetDate, $months)
{
    return date('Y-m-d', strtotime("+{$months} month", strtotime($targetDate)));
}

$result = addSomeMonthsToTargetDate('2022-10-25', 2);
var_dump($result); // 2022-12-25
```
一回strtotimeでUNIXタイムスタンプに変換して、計算してから戻せば良さそうです。
ただ、strtotimeは2038年問題が発生するので避けたほうが良いと聞いたことがあります。
とりあえず確認します。
```php
$result = addSomeMonthsToTargetDate('2037-10-25', 3);
var_dump($result); // 1970-01-01
```
ダメでした。
## 改めて、とりあえず書いてみる
DateTime系統なら2038年問題は発生しないようなので、とりあえず書いてみます。
```php
function addSomeMonthsToTargetDate($targetDate, $months)
{
    $dt = new DateTime($targetDate);
    return $dt->modify("+{$months} month")->format('Y-m-d');
}

$result1 = addSomeMonthsToTargetDate('2022-10-25', 2);
$result2 = addSomeMonthsToTargetDate('2037-10-25', 3); 
$result3 = addSomeMonthsToTargetDate('2022-05-03', 50);

var_dump($result1); // 2022-12-25
var_dump($result2); // 2038-01-25
var_dump($result3); // 2026-07-03
```
良い感じです。もう少し続けてみます。

```php
$result4 = addSomeMonthsToTargetDate('2022-10-31', 1);
$result5 = addSomeMonthsToTargetDate('2022-10-30', 4);

var_dump($result4); // 2022-12-01
var_dump($result5); // 2023-03-02
```
かなり怪しい結果が出てしまいました。
計算後の日付がその月の最後の日を過ぎた場合は、翌月に繰り越して計算しているようです。
日常生活で10/31の一か月後は12/1だと思わないので、人間の直感には反します。

## もう一度、とりあえず書いてみる
計算後の日付が月の最終日を超えている場合は、その月の最終日を返すようにしたいです。
とりあえず書いてみます。
```php
function addSomeMonthsToTargetDate($targetDate, $months)
{
    // シンプルにmodify()を行った場合
    $dt1 = new DateTime($targetDate);
    $simplyModifiedTime = $dt1->modify("+{$months} month")->format('Y-m-d');
    $dt1->modify('first day of this month');

    // その月の月初からmodify()を行った場合
    $dt2 = new DateTime($targetDate);
    $dt2->modify('first day of this month')->modify("+{$months} month");

    // 上記の結果が一致しなければ、月だけで計算して月末を取得。
    if ($dt1->format('Y-m-d') === $dt2->format('Y-m-d')) {
        return $simplyModifiedTime;
    } else {
        return $dt2->modify('last day of this month')->format('Y-m-d');
    }
}
$result1 = addSomeMonthsToTargetDate('2022-10-25', 2);
$result2 = addSomeMonthsToTargetDate('2037-10-25', 3);
$result3 = addSomeMonthsToTargetDate('2022-05-03', 50);
$result4 = addSomeMonthsToTargetDate('2022-10-31', 1);
$result5 = addSomeMonthsToTargetDate('2022-10-30', 4);

var_dump($result1); // 2022-12-25
var_dump($result2); // 2038-01-25
var_dump($result3); // 2026-07-03
var_dump($result4); // 2022-11-30
var_dump($result5); // 2023-02-28
```
`$dt2`で必ず求めたい月にたどり着くようにして、`$dt1`の行き着いた月とずれがある場合は`$dt2`の月の月末を返すようにしました。
かなり無理やりな感じはしますが、挙動は問題なさそうです。

もしより良い実装があればぜひ教えてください。
DoctrineとEloquent比較大全20: viewの利用

day20（から5日遅れ）の今日はビューを利用する方法を見ていきます。

下記のような著者ごとの著作数を表すビューに対して、それぞれのORMでデータを読み出すやり方を示します。
```sql
CREATE VIEW `author_stat` as select authors.id, authors.name, count(books.id) as books_count from authors left join books on books.author_id = authors.id group by authors.id, authors.name;
```

## Doctrine

```php:Entity/AuthorStat.php
<?php

declare(strict_types=1);

namespace App\Entity;

use Doctrine\ORM\Mapping as ORM;

#[ORM\Entity(readOnly: true)]
#[ORM\Table(name: 'author_stat')]
class AuthorStat
{
    #[ORM\Id]
    #[ORM\Column(type: 'integer')]
    private ?int $id;

    #[ORM\Column(type: 'string')]
    private ?string $name;

    #[ORM\Column(name: 'books_count', type: 'integer')]
    private ?int $booksCount;

    public function getId(): ?int
    {
        return $this->id;
    }

    public function setId(?int $id): void
    {
        $this->id = $id;
    }

    public function getName(): ?string
    {
        return $this->name;
    }

    public function setName(?string $name): void
    {
        $this->name = $name;
    }

    public function getBooksCount(): ?int
    {
        return $this->booksCount;
    }

    public function setBooksCount(?int $booksCount): void
    {
        $this->booksCount = $booksCount;
    }
}

```

```php
<?php

declare(strict_types=1);

use App\Entity\AuthorStat;
use Doctrine\ORM\EntityManagerInterface;

require __DIR__.'/../vendor/autoload.php';

/** @var EntityManagerInterface $entityManager */
$entityManager = require __DIR__.'/bootstrap.php';

/** @var AuthorStat[] $stats */
$stats = $entityManager->getRepository(AuthorStat::class)->findAll();
foreach ($stats as $stat) {
    echo sprintf('%s(%d)', $stat->getName(), $stat->getBooksCount()).PHP_EOL;
}
```

- viewをreadonlyなEntityとして定義し、通常のEntityと同様にRepositoryやQueryBuilderを使ってレコードを取得できます。


## Eloquent

```php:Models/AuthorStat.php
<?php

declare(strict_types=1);

namespace App\Models;

use Illuminate\Database\Eloquent\Model;

/**
 * App\Models\AuthorStat
 *
 * @property int $id
 * @property string $name
 * @property int $books_count
 */
class AuthorStat extends Model
{
    public $table = 'author_stat';
}
```

```php
<?php

declare(strict_types=1);

use App\Models\AuthorStat;

require __DIR__.'/../vendor/autoload.php';
require __DIR__.'/bootstrap.php';

/** @var AuthorStat[] $stats */
$stats = AuthorStat::all();
foreach ($stats as $stat) {
    echo sprintf('%s(%d)', $stat->name, $stat->books_count).PHP_EOL;
}

```

- viewをModelとして定義し、通常のModelと同様にModelのクエリ系メソッドを使ってレコードを取得できます。
ハッカソンで作ったもの紹介（ミツケタ）

# はじめに
この記事は[**ハッカソン Advent Calendar 2022**](https://qiita.com/advent-calendar/2022/hackathon)の25日目の記事です
本日は、ハッカソンで作ったアプリ**ミツケタ**を紹介します！

## ミツケタとは
一言でいうと、『**ウイルス感染リスクを可視化するサービス**』です！

## サービス概要
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1719666/d4842997-d7eb-2463-c328-53cf91f2ef45.png)

## システム構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1719666/471e7fbe-44e7-ef43-eb6d-6a7535705243.png)

## 参加したハッカソン

https://sites.google.com/view/one-japan-hackathon/%E9%81%8E%E5%8E%BB%E3%81%AE%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88/6th?pli=1

# おわりに

このハッカソンは私が初めて参加したハッカソンでした
当時の私はほぼプログラミング未経験（半年研修を受けた程度）だったので、アイデア出しのやり方も開発の進め方も分かりませんでした。。。
周りのメンバーにおんぶにだっこ状態でしたが、とても楽しく参加できました
しかし、ほぼ何も貢献できなかったという**不甲斐なさ**を痛感した記憶があります
エンジニアになってもうすぐ3年が経ちますが、開発のモチベーションを保てているのはハッカソンのおかげかな～と少し思っています
ハッカソンはたくさんの良い刺激をもらえるので、来年もたくさん出る予定です！
来年は自分の開発タスクで手一杯にならず、チームのマネジメントをもっと上手くできるようになりたいです！
SEOについて

# はじめに
この記事は[Webの基礎をおさらいカレンダー Advent Calendar 2022](https://qiita.com/advent-calendar/2022/basic_review)です。
このカレンダーでは、なんとなくわかった気になっている、Webの知識をおさらいするカレンダーです。
興味をもし持ってくださった方は、購読いただけると嬉しいです！

今回はSEOについて説明します
## SEOとは
Search Engine Optimizationの略で検索エンジン最適化を意味します。

検索エンジンには色々種類がありますが、
国内ではGoogleとYahoo　Japanが大多数を占めています。([検索エンジンシェア](https://lucy.ne.jp/bazubu/search-engine-japan-42218.html))
(Yahooも内部の仕組み的にGoogleの検索エンジンを採用しているので90%以上がGoogleの検索結果に依存している)

この検索エンジンに対して保有しているWebサイトの集客を増やしていくことをSEOと呼びます。

Googleは検索エンジンとしてどのようなものを評価しているかの[ガイドライン](https://static.googleusercontent.com/media/guidelines.raterhub.com/ja//searchqualityevaluatorguidelines.pdf)を出しているので
ガイドラインに則ってサイトを構築していくことが大事です。

### SEO対策

大きく分けてSEO対策は三つに分けられます。

* オンページSEO
* オフページSEO
* テクニカルSEO


#### オンページSEO
ユーザーに表示するコンテンツの最適化です。
狙ったキーワードでの表示順位を上げる上で最も重要だと言えます。

Needs Metという評価基準があり、どれだけユーザーのニーズにマッチしているコンテンツか、ということを重視します。

#### オフページSEO
主に被リンクです。
他のページからたくさん言及や紹介されればされるほど、信頼性が高いサイトだと認識されます。

#### テクニカルSEO
サイトの構造を正しく伝えるための最適化です。
パンくずリストを作成して、サイト構造を正しく伝えたり、構造化マークアップを使用してページ内構造を正しく伝えます。
 
# おわりに
以上、SEOについての説明でした！

[Webの基礎をおさらいカレンダー Advent Calendar 2022](https://qiita.com/advent-calendar/2022/basic_review)でした。
興味をもし持ってくださった方は、購読いただけると嬉しいです！
Figma初心者の私がよく使うプラグイン紹介

## これはなに
[エイチームライフデザイン](https://qiita.com/organizations/ateam-life-design)でデザイナーをしている @hamburger_esaki です。
初心者からwebデザイナーになり2年弱の私ですが、最近やっとFigmaを触り始めています。
今回はFigma初心者の私が、特によく使う便利なプラグインをご紹介できればと思います。
最近Figma使い始めて、作業効率を上げたいと思っている方の参考になれば嬉しいです。



## [Illustrator + SVG Import](https://www.figma.com/community/plugin/1110823324890582795/Illustrator-%2B-SVG-Import)
Figmaで.aiや.epsファイルが開けます。
Illustrator上でクリッピングマスクを使ったイラストや図形などを、マスクが崩れることなくFigmaへimportできます。
コピペでimportできるので、パーツごとに持って来れたりして便利です。
![BDD589EC-2F4E-40BB-99EA-1259E0DD8E85.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032823/f92464b9-21ad-a8dc-0dac-9bdee4812fcc.jpeg)



## [Font Preview](https://www.figma.com/community/plugin/890494567122693015/Font-Preview)
Figmaに入っているフォントをリアルタイムでプレビューできます。
![7D4EA3E7-6339-480A-8A43-8229EF6F1AA3.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032823/b798ae0e-8932-8331-98d4-1eb83185ba7f.jpeg)


## [To Path](https://www.figma.com/community/plugin/751576264585242935/To-Path)
パス上にテキストやオブジェクトを這わせて並べられます。
ちょっと動きが欲しいデザインなどに使えるので便利です。
![7EC060DE-51C1-4605-B034-425854FC1162.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032823/7968e896-04d9-18e7-d08d-cffef90baa45.jpeg)


## [Material Design Icons](https://www.figma.com/community/plugin/740272380439725040/Material-Design-Icons)
良さげなアイコンセットです。
自分が所属しているチームでは、基本的にここのiconを使ってデザインしようというように決めています。
icon系のプラグインは色々なものありますが、私がよく使うのはこれです。
![D4957335-82B4-4397-8FF7-A2285020BE44.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032823/e44608a1-b3bd-edc1-8372-3f92175a5db7.jpeg)


## [Insert Big Image](https://www.figma.com/community/plugin/799646392992487942/Insert-Big-Image)
スクリーンショットを貼りたい時に便利なプラグインです。
サイズが大きい画像をそのままコピペなどで貼り付けるとサイズが変わってしまったり、画質がガビガビになってしまいます。
これ経由で貼り付けると、画像が分割されてサイズと画質が保たれたまま張り付けができるのでとても良く使います。
![179DB26E-00C5-4A45-964F-D4FA7520DA17.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032823/091eedc0-c1f1-9c9f-6191-9452bdbca59b.jpeg)






## 最後に
いかがでしたでしょうか！
今回は特に業務や制作でよく使うプラグインを5つ紹介しました。
まだまだFigma勉強中なので、引き続き良さそうなプラグインは試して使いこなせるようになっていきたいです。
最近自チームのマーケターやエンジニアからFigma触ってみたいと言う声を聞いていたので、今回初めてアドカレに挑戦し、Figmaの記事をかいてみました。
今後もアウトプット癖をつけられるように頑張ります。
ではではメリークリスマス＆良いお年を！🎄🎍🎄🎍
誰でも作れるBetterJSONトランスパイラを作ってみる

# 概要

(厳密な)JSONはイメージとは裏腹に手で書くには思ったより不便な仕様になっています。

- コメントが書けない。
- Trailing comma(末尾のカンマ) は認められていない。(=手で追加する際にカンマを意識する必要が出て面倒)
- (ダブルコーテーションの代わりに)シングルコーテーションは使えない。
- キー名もダブルコーテーションで囲む必要がある。

などなど・・・

というわけで、JavaScriptのオブジェクト表記のようにゆるく書けてなおかつそのままJSONに変換できるトランスパイラを作ってみる。

# 誰でも作れる

ちょこっとコードを付けて`eval(new Function)`して`JSON.stringify`で出力するだけです。

node.jsなら追加のモジュール一切不要で実現できます。

```bjson.js
const fs = require('fs');

if(process.argv.length < 3) {
    const path = require('path');
    jsfile = path.basename(process.argv[1]);
    console.log('usage: node ' + jsfile + ' [-p] srcpath [outpath]');
    process.exit(-1);
}

try {
    var pos = 2;
    var pretty = false;

    for (let i = 2; i < process.argv.length; i++) {
        if(process.argv[i].indexOf('-') === 0) {
            if(process.argv[i].charAt(1).toLowerCase() === 'p') {
                pretty = true;
            }
            pos += 1;
        } else {
            break;
        }
    }

    let filedata = fs.readFileSync(process.argv[pos]);

    let prettycode = pretty ? ', null, 2': '';

    let code = 'let jsondata = ' + filedata + '; let result = JSON.stringify(jsondata' + prettycode + '); return result;';

    let result = new Function(code)();

    if(process.argv.length <= pos + 1) {
        console.log(result);
    } else {
        fs.writeFileSync(process.argv[pos+1], result);
    }
} catch (err) {
    console.error(err.message);
    process.exit(1);
}
```
WordPressをローカル環境に構築してみた　 ～その3、WordPressをインストールしてみた～

WordPressをローカル環境に構築する最後の設定です。

1,XAMPPの「Apache」と「MySQL」を起動させます。「Start」ボタンを押下すると、下記の
画面キャプチャのようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646863/5a088fb7-1faf-9b83-42d8-4ee886dbfe66.png)

2,「http://localhost/wordpress」のURLへリンクを貼り付け、ページに飛びます。

※他のところで、http://localhost:80/wordpress
がありますが、
現在のWordPressはhtaccessが含まれていないため、「/wp-admin/install.php」にアクセスしないとセットアップ画面は表示されないとのこと。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646863/8f3188ce-f8fd-fbdd-968e-295ba9be9898.png)


3,上記の画面が表示されるので、必要事項を記載します。
　「送信ボタン」を押下すると、以下の画面が表示される。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/646863/d6657d4b-cef5-03d8-2bab-002d757adfc7.png)


これで、ローカル環境にWordPressが構築できました。
お疲れ様でしたー。
よい、WordPressライフをお送りください。
[Unity]PlasticSCMリポジトリをUnityCloudBuildでビルドするとエラーが出た時の話

# 概要
PlasticSCMリポジトリをUnityCloudBuildでビルドするとスクショのようなエラーが出ました。

```
Cloud Build encountered an error while validating your Build. Cannot start build - configured source control is unreachable. Plastic: Authentication has expired. Please reconfigure your source control settings.
```

![スクリーンショット 2022-12-25 16.30.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/433caf80-312e-a392-af64-4fbaf40bcd14.png)

# 本文
エラーコードに書かれているようにPlasticSCMの再設定が必要になります。

①[Unity Gaming Services](https://dashboard.unity3d.com/gaming/)にログイン
②左のメニューからDev Opsを選ぶ
③一つ右隣のメニューからConfigurationsを選ぶ
④Source control & Project settingsタブを押す
⑤スクショのような画面が表示されたら、(既に設定を入力済みなら)内容は変更する必要はありません。Saveボタンを押せばエラーは出なくなります。

![スクリーンショット 2022-12-25 21.28.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/617265/b314f312-0c33-e4cb-70bb-c82b41ab6497.png)


# 補足
解決しなかった場合は以下リンクの記事も参考にしてみてください。
PlasticSCMもだいぶ安定して使えるようになった気がしますが、まだ少しバグが残っているようですね。
https://forum.unity.com/threads/build-failures-due-to-plastic-scm-connection-issue.1270040/
ハッカソンで作ったもの紹介（ピースマップ）

# はじめに
この記事は[**ハッカソン Advent Calendar 2022**](https://qiita.com/advent-calendar/2022/hackathon)の24日目の記事です
本日は、ハッカソンで作ったアプリ**ピースマップ**を紹介します！

## ピースマップとは
一言でいうと、『**紛争が起きている地域をリアルタイムで確認できる世界地図アプリ**』です！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1719666/b96842f6-cb4d-1837-acf3-b03b58a55ed4.png)


## システム構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1719666/66fb1a9c-9e5f-09e0-6fdb-3c0637d65f6a.png)


## 参加したハッカソン

https://ueqareer.connpass.com/event/243877/

# おわりに

このハッカソンはいつもと違うメンバーで参加しましたが、なんとかデモができる状態までもっていくことができ良かったです！
技術力を高めて、いつかひとりでハッカソンに出てみたいな～と思っています🙄
RESTについて


# はじめに
この記事は[Webの基礎をおさらいカレンダー Advent Calendar 2022](https://qiita.com/advent-calendar/2022/basic_review)です。
このカレンダーでは、なんとなくわかった気になっている、Webの知識をおさらいするカレンダーです。
興味をもし持ってくださった方は、購読いただけると嬉しいです！

今回はRESTについて説明します！
## RESTとは
REpresentational State Transferの略で主にWebサービスを構築する際のアーキテクチャスタイルです。
次の6つを組み合わせたアーキテクチャスタイルをRESTと言います。

* **クライアント/サーバー**: ユーザー側とサーバー側で分けて処理を分散させる。
* **ステートレス性**: 状態を持たない。前後のやり取りの影響を受けず、やりとりが1回ごとに完結すること。
* **キャッシュ**: キャッシュが可能であること。
* **統一インタフェース**: 予め定義された方法でやりとりすること。HTTPメソッド/JSON形式でやりとりする。など予め定義する。
* **階層化システム**: プロキシサーバーやロードバランサーの設置が可能など、階層的にシステムを構築できること。
* **コードオンデマンド**: プログラムをクライアント側で実行する。JavaScriptなど。

以上の要件を全て満たすものをRESTfulと言ったりします。


 
# 終わりに
以上、RESTの説明でした！

[Webの基礎をおさらいカレンダー Advent Calendar 2022](https://qiita.com/advent-calendar/2022/basic_review)でした。
興味をもし持ってくださった方は、購読いただけると嬉しいです！
User CSS で Dark Mode

## 私には眩しすぎた

日が暮れると、目に突き刺さる白背景のサイトたち。Dark Mode がないと目が潰れてしまう。深刻。
Google Chrome には、強制的にDark Mode にしてしまう実験的オプションがあるが、自分の作っているサイトまでDark Modeにされると困ってしまう。なので、 UserCSS を使って、よくアクセスするサイトを暗くした。

当然、そのサイトを作っている組織には、デザイナーさんがいて、考え抜かれた配色になっているのだろうし、勝手に色を変えるなんて失礼だとは思ったけど、もうとにかく眩しすぎて耐えられないので、CSS の勉強という体で暗くした。ごめんなさい。



## Dark Mode にしたサイト

- Qiita
- Google Calendar

この2つは、日が暮れてもよくアクセスするため、特に私の目に厳しい。速やかに Dark Mode にする必要がある。

Google Calendar は、Google Search には Dark Mode があるので、そのうち対応するのかな？と思いつつ、ヘッダーで弊社ロゴマークのアスペクト比を勝手に変えるという許せない点があったので、変えた。

Qiita は、やらない方針みたいなので、やった。やりながら、まぁ確かに両方提供するのはしんどいと思った。

## 便利なセレクター

Google Calendar のサービスには、タグに色々なAttribution がついているので、それを使うと簡単に選べる。

```css
div[role="dialog"],
div[role="listbox"],
div[role="presentation"] {
  background-color: var(--surface);
  color: #fff;
}
```

Qiita は、ちょっとデザインが変わったら崩れちゃうんだろうな感があるけど、```:nth-child()```, ```[id^="xxx"]```, ```[id$="yyy"]```, ```:not()``` などが活躍した。

```css
.p-items_main > div:nth-child(2) * {
  border-color: var(--hairline);
}
div[id^="UserMainPage-"] * button[aria-label$="Page"] {
  background-color: var(--cursor);
}
blockquote *:not(code) {
  color: var(--text-white);
}
```

## 結果

![Screen Shot 2022-12-25 at 19.29.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245908/8311cd53-5858-a2fa-c354-5535aeff055f.png)
![Screen Shot 2022-12-25 at 19.33.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245908/152102cb-1e2f-e7e1-ac35-7e4fcc13be18.png)

かなり私の目に優しくなった。ここは改善が必要とか色々あるけど切りがないのでいったん終了。まぁ焼け石に水デスネ。

https://github.com/kurab/tooShiny4Me

気が向いたらアップデートしていくかも知れない。

メリー・クリスマス^^
IAMユーザー、IAMグループ、IAMロール、IAMポリシー

## IAMユーザー、IAMグループ、IAMロール、IAMポリシー
IAMは（AWS Identity and Access Management）の略で「IDとアクセス管理」と訳します。

IAMは、大まかにIAMユーザー、IAMグループ、IAMロール、IAMポリシーに分類され、それぞれ使い方が異なるため若干ややこしいです。
ということで、メモ書きですが、まとめました。

## 結論

- **IAMユーザー** ... 人に対して与えるIAM
- **IAMロール**   　...サービス、プログラムに与えるIAM
- **IAMグループ**  ...同じ権限を与えたいIAMユーザをまとめる機能
- **IAMポリシー**  ...実行者（IAMユーザー、IAMロール、IAMグループ）がどのサービスにアクセスできるのか決まり事を設定する機能

IAMユーザーとIAMロールはそれぞれ人とサービスに対し**アクセス管理を行います。**

IAMグループはIAMユーザをまとめる**便利機能です。**

IAMポリシーは権限を設定する機能で、ユーザやロールに紐づけて使います。

## IAMポリシーについて
他のIAM機能はなんとなくイメージがつきやすいと思うので、IAMポリシーに絞って解説します。

IAMポリシーは、　
何に対して（EC2のサーバやS3のフォルダなど）に、
どのような操作（起動や停止、書き込みや読み込みなど）を
許可するかしないか設定します。

実行者（ユーザ、ロール、グループ）が「何をできるか」を設定することができますし、

例）
- S３バケットに対し、ユーザAにはフルアクセスを許可するが、ユーザBは閲覧のみ
- 特定の場所（IPアドレス）のみ操作可能

操作されるサービス（サーバ、フォルダ）に対し「何を許可するか」も設定することができます。

例）
- EC2からS３にアクセス許可を出す
- API GateWayからLambdaのアクセス許可を出す

## IAMロールを設定する時

IAMロールには**カスタムポリシー**と**AWS管理ポリシー**があります。

AWS管理ポリシーはよく使われるポリシーがAWSによって用意されており例えばS３の「読み書きのみ許可」などを選ぶだけでポリシーをIAMユーザやIAMロールにつけることができます。

カスタムポリシーはAWS管理ポリシーにはない細かい設定をすることができます。

基本的にはAWS管理ポリシーを用いて、賄えない箇所はカスタムポリシーを使うのがいいでしょう。


## 参考

https://docs.aws.amazon.com/ja_jp/IAM/latest/UserGuide/id_roles_compare-resource-policies.html

https://www.amazon.co.jp/%E5%9B%B3%E8%A7%A3%E5%8D%B3%E6%88%A6%E5%8A%9B-Amazon-Web-Services%E3%81%AE%E3%81%97%E3%81%8F%E3%81%BF%E3%81%A8%E6%8A%80%E8%A1%93%E3%81%8C%E3%81%93%E3%82%8C1%E5%86%8A%E3%81%A7%E3%81%97%E3%81%A3%E3%81%8B%E3%82%8A%E3%82%8F%E3%81%8B%E3%82%8B%E6%95%99%E7%A7%91%E6%9B%B8-%E5%B0%8F%E7%AC%A0%E5%8E%9F/dp/4297108895
ハッカソンで作ったもの紹介（そとねる）

# はじめに
この記事は[**ハッカソン Advent Calendar 2022**](https://qiita.com/advent-calendar/2022/hackathon)の23日目の記事です
本日は、ハッカソンで作ったアプリ**そとねる**を紹介します！

## そとねるとは
一言でいうと、『**野外で安全に野宿できるスポットを検索できる地図アプリ**』です！

## システム構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1719666/40da2701-339a-ca8d-6efa-6fef4ef4f6da.png)


## プロモーション動画も作成しました！

<iframe width="560" height="315" src="https://www.youtube.com/embed/R0YSCByOVMQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

## 参加したハッカソン

https://tsukuaso.com/

# おわりに

使い慣れたシステム構成になっているので、次回ハッカソンでは新しい技術に挑戦したいです！
テストコード書こうと思ったらテスト出来なくてビビった話

## オチ
テストする関数の先頭に**test**の文字列が入っていなかった。

## 経緯
1. Xcodegenでプロジェクトファイル作成
1. テストコード作成
     ```swift:HogeTest.swift
     @testable import HogeProject
     import XCTest

     class HogeTest: XCTestCase {
         func validate_正常な値が入力されているとき() {
             let validator = Validator()
             let isValidate = validator.validate(str: "aaa@aa.aa")
             XCTAssertTrue(isValidate)
         }
     }
    ```
3. Targetちゃんとチェックついている
3. スキームもちゃんとある
3. 実行しようと思っても、関数の左にダイヤの実行ボタンが付いていない…←めっちゃ焦った
3. Xcodegenの設定が悪いのかと思って色々修正したが実行ボタンは出てこず…。
3. そういえば、色々な記事見たけど全部先頭にtestってついてるな
3. いやまさかそんなね…。
3. 実行ボタン出てくるやんけ！！

## あとがき
そんなん分からんやん、普通…。
言っていてや！testって先頭に必要なら…。
（シンプルに自分の勉強不足）
KB5020276 - Netjoin: ドメイン参加の強化の変更

今更なんですが 10 月の累積セキュリティ更新プログラムを適用後に起こる、コンピューターのドメイン参加時の動作について書きたいと思います。

## 2022 年 10 月以降の累積更新プログラム適用後のドメイン参加時の動作

公開情報はこちら。

https://support.microsoft.com/ja-jp/topic/kb5020276-netjoin-%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E5%8F%82%E5%8A%A0%E3%81%AE%E5%BC%B7%E5%8C%96%E3%81%AE%E5%A4%89%E6%9B%B4-2b65a0f3-1f4c-42ef-ac0f-1caaf421baf8

記載している内容が少しわかりにくいので要約して書きますと、10 月以降の累積セキュリティ更新プログラムをクライアントに適用すると、Active Directory 上に事前にコンピューター アカウントが存在する場合、ドメインへの参加が失敗するようになります。
ただし、以下のケースでは例外としてドメイン参加が許可されるようになります。
・コンピューター アカウントの所有者がドメイン管理者の場合
・コンピューター アカウントの所有者がドメイン参加を行おうとしているユーザーと同一の場合

事前にコンピューター アカウントを作成しておいて、ユーザーにドメイン参加させるような運用をされている環境もあるのではないかと思いますが、この運用を行っている場合、例えばこのコンピューター アカウントの作成作業を Account Operator などの権限のユーザーで行っている場合、上記例外に合致しない形となり、ユーザー側でのドメイン参加ができなくなるという事態が発生します。

あまり良い表現ではないですが、コンピューター アカウントを事前にセキュリティが強固な GPO を設定している OU 上に作成しようとしていて、アカウント作成についても厳密に権限を与えて実施している環境ほど罠にはまりやすい動作変更のようです。
ただ、KB5020276 の中に記載されているレジストリを使った回避策は、公開情報にも記載されていますが CVE-2022-38042 に対する脆弱性を残したままになるため、個人的にはおすすめしないです。

公開情報の内容的には CVE-2022-38042 対策として実施された動作変更であり、意図した動作変更のように思われるのですが、以下の Windows Release Health をみると既知の問題の中に記載されており、今後の取り扱いについては注視しておいたほうがいい内容のものではないかと思います。

https://learn.microsoft.com/ja-jp/windows/release-health/status-windows-10-21h1#2940msgdesc
Web API -The Good Parts- を読んでみて　内容まとめ

はじめに
-
自分のポートフォリオを作成する際に外部のAPIをとってくるという作業があり、いい機会なので知人から紹介されてたこちらの書籍「Web API -The Good Parts-」を読んでみることにしました。

私の情報としてAPIの使用に関して最低限の情報をYouTubeなどの動画で視聴したことがある程度です。

内容を単にまとめるだけでなくわからなかった語句や単語もまとめていきたいと思います。

![my image](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2852310/eba87f93-1cdc-5ea9-cfe9-a7eb4ff5c1f7.jpeg)

第1章
-
### APIとはなにか？

プログラムからアクセスしてそのデータを機械的に利用するためのもの
「機械的に」　＝　人間がブラウザを使用して直接アクセスすることを目的としたURLではないこと

**重要なポイント**

これらの情報がブラウザでWebページを表示する際に用いるHTMLではなくJSON形式になっているということ

すなわち

**「ブラウザで直接表示する前提としたものではないということ」**



### WebAPIの重要性
2003年AmazonがAPIを公開
このAPIはアフィリエイトと紐付いておりネットブログ黎明期だったこの頃に自身のブログに様々な人がAmazonのAPIを使用
その結果Amazonは収益を大きく伸ばした


他の例としてTwitterが挙げられる
Twitterは２００６年からAPIを公開。その頃のTwitterはシンプルな機能が多かった分周辺のサービスが多く作られた。
(Ex.)Twitter投稿分析サービス/bot/自動フォローシステム


**疑問点**
自社の開発したサービスのAPIを公開するということは自分達が資金を投じて作ったものを公開することは損ではないのか？


第2章
-
ここで第2章を読み始めたのですが内容が専門用語が多くこんがらがってしまいました
そこでまずは手を動かそうと考え以下のYouTubeを視聴しイメージを掴みました
リンクは貼っておきます

https://www.youtube.com/watch?v=6_zIN-bByB4

https://www.youtube.com/watch?v=9HXcaDQyWxA&list=LL&index=1

　以上の動画を視聴すると見る前に比べてとてもイメージがつきやすく本の内容がすんなり入ってきました。

また以下の動画はこの書籍の第1章から度々登場してきたRESTという言葉について詳細に解説されておりおすすめです!

https://www.youtube.com/watch?v=rEGmSRZ-dWY&t=1098s
2022年の振り返り@Rails Girls

この記事は、[Rails Girls アドベントカレンダー2022](https://qiita.com/advent-calendar/2022/railsgirlsjapan) 最終日の記事です。
Ruby3.2、リリースされましたね。

今年は、Rails Girlsが日本で開催されて10周年（祝！）です。
といいつつ、このアドベントカレンダーでは、今年のRails Girlsに関する振り返りをざっくり書いていこうと思います。
（私にとっての10周年は来年なので、10年については来年にとっておこうかと・・・）

###  いちおうねんのため自己紹介
- Rails Girls Nagoya 1st〜5th オーガナイザー
- Rails Girls JPメンバー
- Rails Girls Nagoya more!などに出没。
- クマ好き。特にくまモンが好き。
- 自作キーボード作ったり使ったり。
 
### 2022年のRails Girls振り返り
- オンサイトでのRails Girls開催！
  - 鹿児島と東京で開催。COVID-19の感染が拡大している時期でもあったのですが、様々な感染対策を立てつつ開催できたのはとても大きかったなと思います。
    - 来年以降も少しずつ、状況を鑑みながらオンサイト開催ができるようになるといいなとおもっている次第・・・。
- Rails Girls Gathering 12/23に無事開催！
  - スピーカーの皆様、参加いただいた皆様、スタッフの皆様、全方面に向かってありがとうございました！

### 自分自身のRails Girls振り返り
- Rails Girls more！の活動
  - 例年どおりNagoyaなどのmore!に参加した
- mruby girlsの活動
  - キーボード活動。キーバインド周りをごにょごにょやってました・・・（というかそれしかやってない・・・） 
- Rails Girls Gathering スタッフ
  - これも去年に引き続き、という感じ。

### 2023年に向けての抱負
- オンサイト開催のRails Girlsが増えるといいなあ。
  - 名古屋でもできれば・・・！
- 去年の抱負であげていた、今年できなかったことに再チャレンジしたい。
  - mruby girls。小さい自作キーボードを（基板から）つくってみたい・・・。

### 最後に
- 私自身にとって、Rails Girlsと関わるようになって、来年がちょうど10年なので、
来年は10年まとめてふりかえろうかな、と思います・・・！
DoctrineとEloquent比較大全19: n+1を避ける

day19（を6日過ぎた）今日はn+1問題を避けるためにまとめてデータを取得する方法を見ていきます。

## Doctrine

```php:Entity/Author.php
<?php

declare(strict_types=1);

namespace App\Entity;

use Doctrine\Common\Collections\ArrayCollection;
use Doctrine\Common\Collections\Collection;
use Doctrine\ORM\Mapping as ORM;

#[ORM\Entity]
#[ORM\Table(name: 'authors')]
class Author
{
    #[ORM\Id]
    #[ORM\Column(type: 'integer')]
    #[ORM\GeneratedValue(strategy: 'AUTO')]
    private int $id;

    #[ORM\Column(type: 'string', length: 255)]
    private string $name;

    #[ORM\OneToMany(mappedBy: 'author', targetEntity: Book::class, fetch: 'EAGER')]
    private Collection $books;

    public function __construct()
    {
        $this->books = new ArrayCollection();
    }

    public function getId(): int
    {
        return $this->id;
    }

    public function setId(int $id): void
    {
        $this->id = $id;
    }

    public function getName(): string
    {
        return $this->name;
    }

    public function setName(string $name): void
    {
        $this->name = $name;
    }

    public function getBooks(): Collection
    {
        return $this->books;
    }

    public function addBook(Book $book): void
    {
        if (!$this->books->contains($book)) {
            $book->setAuthor($this);
            $this->books->add($book);
        }
    }
}
```

```php
<?php

declare(strict_types=1);

use App\Entity\Author;
use Doctrine\ORM\EntityManagerInterface;

require __DIR__.'/../vendor/autoload.php';

/** @var EntityManagerInterface $entityManager */
$entityManager = require __DIR__.'/bootstrap.php';

/** @var Author[] $authors */
$authors = $entityManager->getRepository(Author::class)->findAll();

foreach ($authors as $author) {
    echo $author->getName().PHP_EOL;
    foreach ($author->getBooks() as $book) {
        echo $book->getTitle().PHP_EOL;
    }
}

// 実行されたSQLのログ
// doctrine.DEBUG: Executing query: {sql} {"sql":"SELECT t0.id AS id_1, t0.name AS name_2, t3.id AS id_4, t3.title AS title_5, t3.price AS price_6, t3.description AS description_7, t3.author_id AS author_id_8 FROM authors t0 LEFT JOIN books t3 ON t3.author_id = t0.id"} []
```

- `Author::$books` に `fetch: 'EAGER'` を設定すると、SQL的にはjoinした状態で取得したものをAuthorエンティティとBookエンティティとして構築してくれます。

## Eloquent

```php
<?php

declare(strict_types=1);

use App\Models\Author;

require __DIR__.'/../vendor/autoload.php';
require __DIR__.'/bootstrap.php';

$authors = Author::with('books')->get();
foreach ($authors as $author) {
    echo $author->name.PHP_EOL;
    foreach ($author->books as $book) {
        echo $book->title.PHP_EOL;
    }
}
```

- modelに指定するのではなく取得時に指定します。
格安VPSを固定IP代わりにしてVPN接続した自宅ノードを公開する

⭐今回、記事を書くに至った経緯⭐

▼プロバイダ固定IP取得の難しさ
　プロバイダによる固定IPサービスの価格を調べてみると意外と高価です。
　私のところでは月額￥3000〜￥4000、初回手数料￥3000と聞いて、
　他の手段を考えるしかない、と思いました。
　（色々な人に聞くとこれでも昔より安いらしい）

▼ノード環境すべてをVPSで賄う金銭的負担
　ネットワークが使用されていく過程でノードのデータ容量も軽くはなくなりつつあり、
　ノード運営の採算を考えるなら、サーバのレンタル代こそが出費の大部分となります。


⭐上記２点に対して良い方法がありました⭐

▼サーバはどうするの？
・処理は自宅PCをサーバ化する
　→CPUの処理速度、メモリ搭載量、SSD等のデータ保管領域等、自分の匙加減で調整可能。
　→自宅PCに余裕がある人は有効活用できる！
　
▼固定IPはどうするの？
・格安VPSを借りてノード処理は自宅サーバ、通信の出入り口をVPSで実施。
　→VPSをレンタルすると固定IPも同時に振られるのでお得。
　→処理は自宅サーバで行うので月額￥349の格安サーバで対応可能です。
　→ドメインを取得してノードを運用している方はVPS側のipをドメイン登録すると良いでしょう。
　※格安VPS　−　WebARENA Indigo
　　https://web.arena.ne.jp/indigo/
　
▼どうやってVPSと自宅サーバを一体化させるの？
・WireguardというモジュールをVPS側とノード側の双方に設定し、
　秘密鍵と公開鍵を使って双方を接続します。
　※もなかさんの記事の参考に設定を行います。
　　https://qiita.com/monakaJP/items/032ccba08331b172853c
　※別参考　−　Wireguardとは
　　https://www.websiterating.com/ja/vpn/glossary/what-is-wireguard/


⭐何からやってみるか⭐

▼Ubuntuマシンを構築してノードを建ててみる
　づ〜さんの以下のサイトを参考にノードを構築しました。
　手作業中心ですが何が必要なのかが分かりやすいので大変おすすめです。
　まずはテストネットで試しにやってみましょう。
　　https://qiita.com/dusanjp/items/7410700885deea0f5b0b

　この際、現時点での自宅環境でどのようなIPになっているか知っておくと良いかもしれません。
　　https://www.cman.jp/network/support/go_access.cgi

▼もなかさんの記事を参考に格安VPSを借りて自宅ノードにVPN接続する
　月額￥349のVPSを借りて固定IPを取得し、自宅ノードとVPN接続します。
　VPSがノード端末にとってのインターネットの出入り口となってくれます。
　通信の出入りをVPSに任せてノード処理そのものは自宅のノード端末で行うイメージです。
　　https://qiita.com/monakaJP/items/032ccba08331b172853c

▼結果どういうところが良かったか。
　冒頭で触れた固定IPを仮に無理して取得していた場合、費用面以外でも少々気になる部分があります。
　それは自宅の外部IPが固定された上で外向けに公開されてしまうということです。
　今回の方法では、まずVPSが接続先となるためVPNで接続している自宅にまで入ろうとすると、
　VPSのセキュリティを突破せねばならず、そういった意味でもこの方法は有意義です。

▼メンテナンスの方法
　TeratermやTurmux等のツールを用いて、自宅外からノードをメンテナンスする際にどうするか。
　まず、VPSに対して接続、その後でsshコマンドで自宅ノードに付与したVPNipに対して接続します。

▼最後に
　ノード構築に至ってはづ〜さん、今回の方法についてはもなかさん。
　先人の方々の功績をたどって実現することができました。
　本当にどうもありがとうございました。
【ハッカソン】作品をProtoPediaに登録しよう

# はじめに
この記事は[**ハッカソン Advent Calendar 2022**](https://qiita.com/advent-calendar/2022/hackathon)の22日目の記事です。
本日は、**ProtoPedia**について書きます。

https://protopedia.net/

## ProtoPediaとは
一言でいうと、『**ハッカソン等で作った作品を公開できるサービス**』です！

公式サイトの説明
> PtotoPediaとは、ITものづくりに関する作品を記録・公開できるWEBサービスです。

https://protopedia.gitbook.io/helpcenter/

## ProtoPediaに作品を登録するメリット

### 1. 作品を記憶できる
サーバ代がかかってしまうなどの理由でせっかく作ったアプリを削除することはしばしばあると思います
そんな時は**ProtoPedia**に登録しておくことで、アプリを削除したとしても後で見返すことができます！

### 2. 作品にリアクションがもらえる
「いいね・コメント」機能があるので、開発のモチベーションにつながります！

### 3. いろいろな人と交流できる
Twitter等のSNSと連携しているため、面白い作品を作った人に話しかけるなんてこともできます！


# おわりに
私も**ProtoPedia**をよく利用しています
他の人の様々な作品を見て、新たなアイデアが浮かんでくることもあります！
使い勝手も良く、とてもオススメなサービスです！
【Android】Jetpack Compose でThemeを設定する【Kotlin】

# はじめに
今回はJetpackCompose について勉強する機会があったので、使わないで忘れてしまう前に記事にしておこうと思います

# Themeの要素
Themeではcolors、typography、shapesをそれぞれ設定できます
colorsは　テーマに使う色
typographyは　文字のフォント・太さ・サイズなど（スタイル）
shapesは　形（角を切り落としたりできる）

それぞれ設定できる

# 使用例
>Codelab　より引用
```
@Composable
fun MaterialTheme(
    colors: Colors,
    typography: Typography,
    shapes: Shapes,
    content: @Composable () -> Unit
) {
```
こうしてテーマを作成しておくことで
```
@Composable
fun MyTheme(content: @Composable () -> Unit) {
  MaterialTheme(content = content)
}
```
MaterialThemeをラップしてテーマを作成しておくことで
テーマを一部カスタマイズしてそれぞれの画面やプレビューするとき（@Preview）に簡単に再利用することができる

# 参考
https://developer.android.com/codelabs/jetpack-compose-theming?hl=ja#0

# おわりに
今回はJetpackCompose の基本的なことを記事にしましたが、JetpackCompose を使いこなせるようになって応用的な部分も記事にできたらいいなと思います。
そのためにはJetpackCompose を使う機会を増やしてなるべく触れていかないといけませんが・・・
これから業界でも中心になってきている技術なので、触る機会が早めに訪れることを願いつつも　それまでに先にマスターしておきたいですね
Google UXデザイン：画面サイズに基づいてレイアウトを適応する

# はじめに

わたしが[Google UX Design Certificateで得られた素晴らしい体験][google]を、特に重要だと思われるポイントを小さく分割して、わかりやすく簡潔に紹介していきます。

興味があれば、ぜひ Google UX Design Certificateを受講してみてください。

[google]: https://qiita.com/mapami/items/7a0d0a3d4661c50f8bec

https://www.coursera.org/professional-certificates/google-ux-design

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/6a4c4f5e-8148-b120-42be-7acb1cd54a86.png" width="800">

<details><summary>これまでの振り返り</summary>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/d371bce4-836a-0ba5-fd7d-9d2e55f1b909.jpeg" width="700">

</details>

# どの小さな画面サイズに対応するレスポンシブ・レイアウト

デスクトップ用のウェブサイトを小さな画面に対応させようとすると、アイコンや画像、テキストを配置するためのデジタル領域がページ上で少なくなってしまいます。

つまり、アクセシビリティの基準を満たし、優れたユーザーエクスペリエンスを実現するためには、細部のサイズを小さくする必要があります。また、最小の画面に収まるように、ウェブサイト全体のテキストのサイズを小さくして、見栄えをよくする必要がある場合もあります。

一般的で簡単に認識できる要素やコンポーネントを使用すれば、ユーザーが直感的に製品を操作できるようになります。次に、代表的なものをご紹介します。

## ハンバーガーメニュー

ハンバーガーメニューは、ナビゲーションメニューの一種で、3本の線が入ったアイコンで表現されています。このアイコンをクリックすると、横からスライドしてきたり、ページ全体を占領したりして展開され、ページ内を移動するためのオプションメニューが表示されます。

***<font color="MediumVioletRed">『ユーザーの注意をウェブページの主要コンテンツに集中させるために、情報を隠すのに有効』</font>***


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/b546e28b-9731-d0e4-e33e-5ab5d1abd55f.png" width="400">

## カード

カードは、1つのテーマに関するコンテンツとアクションを含む表面です。カードは、関連性のある実用的な情報を探すために、簡単にスキャンできるものでなければなりません。また、テキストや画像などの要素は、階層を明確に示すように配置する必要があります。

***<font color="MediumVioletRed">『カードを一貫したパターンで配置することで、ユーザーがページを素早くスキャンしやすくなる』</font>***

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/9a21b416-81d4-1db8-e529-1b25b547f691.png" width="400">

## カルーセル（スライドショー)

カルーセルは、画像やカードをスクロールして表示するもので、クリックすると表示内容が切り替わったり、ページ移動中に自動でループしたりします。

***<font color="MediumVioletRed">『写真ギャラリーのような画像を多く含むウェブサイトでよく使われ、折り目の上に多くの画像を配置するのに役立つ』</font>***

また、カルーセルは、モバイルサイトでもよく使われ、小さな画面サイズに合わせてレイアウトを凝縮するのに役立ちます。それでは、例をご覧ください。ここでは、Webサイトの注目商品を紹介するためにカルーセルを使用しています。

***<font color="MediumVioletRed">『Eコマースサイトやオンラインショップでは、消費者が購入した最も人気のある商品をユーザーに見せるためにカルーセルを使用する』</font>***

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/6d17809f-7189-b8c3-472b-8da40084e63a.png" width="６00">

## CTA（コール・トゥ・アクション）ボタン

CTAボタンとは、ユーザーにクリックを促す、インタラクティブで魅力的なボタンのことです。CTAボタンは通常、デザインの中で他の部分と異なる色やフォントを使うことで強調されます。

- ECサイトでは、"カートに入れる"や "今すぐ購入"を促すためにCTAボタンがよく使われています。
- レスポンシブデザインでは、"申し込む "や "確認 "など、ユーザーに特定の行動をとってもらうためにCTAボタンが頻繁に使用されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/dcfcfa35-7f88-2164-ce26-0e265f5e07da.png" width="500">

レスポンシブデザインでは、CTAボタンはあらゆるスクリーンサイズに対応します。しかし、その見た目や機能は、それぞれのデバイスに依存します。
- モバイル端末では、デスクトップよりもCTAボタンがより大きなスペースを占めるかもしれません。
- タッチスクリーンを搭載したモバイル端末では、単純なクリックだけでなく、より微妙なジェスチャーが可能になるため、CTAボタンがよりインタラクティブになるかもしれません。

# 参考

https://learn.microsoft.com/en-us/windows/apps/design/layout/responsive-design

https://uxplanet.org/5-ui-patterns-navigation-that-makes-good-ux-sense-92a65df7485d