OmniAICreator/Qiita-1.07M huggingface dataset:
MyGPTを使ってみた

### はじめに
遅れながらもChatGPTでMyGPTを作っていきます。今回は簡単に画像を作るサイトをGPTを作りたいと思います。

### 操作開始
①MyGptsから＋アイコンを押下
![スクリーンショット 2023-11-28 22.14.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/a304ec72-05f7-7c00-a285-21bf6a146c38.png)

②必要な情報を打ち込む
![スクリーンショット 2023-11-28 22.16.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/673a82c2-de8b-6ee7-85f9-3e14a1ca8895.png)

③会話する
作ってほしい画像の単語を入れてみます。
![スクリーンショット 2023-11-28 22.17.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/3ebcf9d5-b374-64e0-0ffa-1e7b76a74106.png)

④画像作成
![スクリーンショット 2023-11-28 22.18.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/1f5c3fa9-0711-7e12-6b2e-d18e41d7a1a7.png)
おお、すごい。こんな簡単に作れるんですね。

⑤公開
![スクリーンショット 2023-11-28 22.19.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/ba879e41-e56f-0ee5-2baa-b1cd8447fd93.png)

⑥公開を確認
![スクリーンショット 2023-11-28 22.19.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/3692ea9a-2a04-0fdc-d257-cfa9a5076c5b.png)

⑦公開後、チャットで画像作成
![スクリーンショット 2023-11-28 22.21.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/b075b4db-622a-3bc2-26b1-3a56aeee28b4.png)


### 最後に
おおお、実際にできました。5分程度でできたので、このユーザ体験はすごいですね。
【SwiftUI】MapKitでストリートビューのような機能を使用する

# はじめに
昨日に引き続き、iOS17以降のMapKitに関することを調べてみました。

https://qiita.com/SNQ-2001/items/23cdfa74f4d554d174b0

今回はGoogleマップでいう「ストリートビュー」をAppleMapを使用して実装します。

# サンプルアプリ
![Simulator Screen Recording - iPhone 15 - 2023-11-28 at 22.08.56.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/69162a45-f6b3-433b-366c-e26702f05fed.gif)

# 実装
```swift
import SwiftUI
import MapKit

struct ContentView: View {
    // 東京駅の座標
    @State private var position: MapCameraPosition = .region(.init(
        center: .init(latitude: 35.681236, longitude: 139.767125),
        span: .init(latitudeDelta: 0.005, longitudeDelta: 0.005)
    ))

    @State private var lookAroundScene: MKLookAroundScene?

    @State private var isPresentedLookAroundPreview = false

    var body: some View {
        MapReader { mapProxy in
            Map(position: $position)
                .onTapGesture { location in
                    guard let selectedLocation = mapProxy.convert(location, from: .local) else { return }
                    requestLookAroundScene(selectedLocation: selectedLocation)
                    isPresentedLookAroundPreview = true
                }
        }
        .lookAroundViewer(isPresented: $isPresentedLookAroundPreview, scene: $lookAroundScene)
    }

    func requestLookAroundScene(selectedLocation: CLLocationCoordinate2D) {
        Task {
            let request = MKLookAroundSceneRequest(coordinate: selectedLocation)
            lookAroundScene = try? await request.scene
        }
    }
}
```

# 解説
今回使用されている新しい技術は3つです

1つ目は`MapReader`です。
`MapReader`の中に`Map`を入れて`onTapGesture`を実装するとタップした位置の座標が取れます。
```swift
MapReader { mapProxy in
    Map(position: $position)
        .onTapGesture { location in
            let selectedLocation = mapProxy.convert(location, from: .local)
        }
}
```

2つ目は`lookAroundViewer`です。
ここがストリートビューを表示している部分です。
```swift
.lookAroundViewer(isPresented: $isPresentedLookAroundPreview, scene: $lookAroundScene)
```

3つ目は`MKLookAroundSceneRequest`です。
ここで`LookAround`で使えるデータの型に変換してます。
```swift
Task {
    let request = MKLookAroundSceneRequest(coordinate: selectedLocation)
    lookAroundScene = try? await request.scene
}
```

# おわり
これを使えばめっちゃかっこいいアプリが作れそうです

# 公式ドキュメント
https://developer.apple.com/documentation/mapkit/mapreader

https://developer.apple.com/documentation/mapkit/lookaroundpreview

https://developer.apple.com/documentation/mapkit/lookaroundpreview/4231402-lookaroundviewer

https://developer.apple.com/documentation/mapkit/mklookaroundscenerequest
require: cannot load such file -- sassc-rails (LoadError)の解消

sassc-rails (LoadError)の解消方法をメモしておきます。



# エラーが出た状況

以下のコードの実行の際に起こりました。

~~~
bin/rails g model Task name:string description:text
~~~

# エラー内容
~~~
rubygems/core_ext/kernel_require.rb>:38:in `require': cannot load such file -- sassc-rails (LoadError)
~~~

この後にもエラー文章が続きましたが、一部だけ抜粋しました。


# 解決方法
gemファイルに以下の行を追加する。
```
gem 'sassc-rails'
```


bundleを行こなって更新する。

これでエラーが解決しました。
JointJS解説　～Graph編～

この記事は [JointJS Advent Calendar 2023](https://qiita.com/advent-calendar/2023/jointjs) の 3日目の記事です。

https://qiita.com/advent-calendar/2023/jointjs

この記事ではJointJSの重要な要素 `Graph` について書きます。

## Graphとは

Graphは、JointJSで描画する図の中にあるすべてのCell[^1]を保持するモデルです。JointJSで描画したい要素はすべてGraphに登録されている必要があります。

Graphは別で紹介するPaperに紐づけを行います。一度インスタンス化したGraphはJointJSでの描画が終わるまで保持しておく必要があります。

```js
const graph = new joint.dia.Graph({}, {cellNamespace: joint.shapes});
```

## Graphへの登録方法

要素をGraphへ追加する方法は2つあります。1つ目は`Graph`クラスの`addCell()`メソッドを呼び出す方法、2つ目は要素側のクラスから`addTo()`メソッドを呼び出す方法です。どちらも同じ動作となるため、コードの都合で使いやすい方を選択して使用しましょう。[^2]

```js
const graph = new joint.dia.Graph({}, {cellNamespace: joint.shapes});
const rect = new joint.shapes.standard.Rectangle();

// 以下は同じ挙動になる
graph.addCell(rect);
rect.addTo(graph);
```

## Graph生成時に指定できるオプション

Graphのコンストラクターでは、第2引数に指定するJSONの`cellNamespace`に、Graphに追加する図形の名前空間を指定します。JointJSの基本図形は`joint.shapes`に定義されているため、カスタマイズの図形を使用しない場合はこの値を指定しておけばOKです。

```js
const graph = new joint.dia.Graph({}, {cellNamespace: joint.shapes});
```

## Graphの代表的なメソッド

Graphオブジェクトの中でも使用頻度の高いメソッドを紹介します。

### `addCell(cell[, opt])`

第1引数の要素をGraphに登録します。`opt`の指定は任意です。`opt`にはJSON形式で以下のパラーメーターを指定できますが、多くの場合は指定不要です。

|キー名|意味|
|--|--|
|dry|`true`を指定すると、追加した`Cell`に対してグラフの参照を保持しなくなります。…なんですが、正直使い所がよくわかりませんでした。デフォルト値は`false`。|
|async|`false`を指定すると、追加した`Cell`を同期でレンダリングします。基本は未指定で非同期でレンダリングしたほうがパフォーマンス的に良いです。デフォルト値は`true`。どうしても要素の生成順をコントロールしなければならないなどの特殊な状況以外では指定しないほうが無難です。|
|sort|`false`を指定すると、追加対象の要素をGraph内で保持する`Cell`のコレクションの最後に追加されます。[^3]デフォルト値は`true`。|

### `addCells(cells[, opt])` / `addCells(cell, cell, ..[, opt])`

`addCell()`の複数バージョンです。

### `clear([options)`

Graphに登録された要素をすべて削除します。再描画が必要なときなどに使用します。

### `findModelsFromPoint(point)`

`point`で指定した座標に存在する要素を取得します。

### `getBBox(cell)`

引数に指定した`Cell`のBounding Box(＝領域の座標情報）を取得します。

### `getCell(id)`

引数に指定したidを持つ`Cell`を取得します。メソッドを呼び出す前にJointJSが内部的に生成したidを特定する必要があるため、使い所は限られるかもしれません。

### `getCells()`

Graphに登録されたすべての`Cell`を取得します。`Element`（要素）のみを取得する`getElements()`、`Link`（要素を繋ぐ線）のみを取得する`getLinks()`も用意されています。

## まとめ

JointJSを使用する上で必ず必要になるGraphについての解説でした。次の記事ではもう１つの重要要素「Paper」について解説していきます。

[^1]: JointJSでは図形などの要素やLinkをまとめてCellと表現します。
[^2]: 筆者のプロジェクトでは`Graph.addCell()`をメインで使用しています。
[^3]: 公式ドキュメント側に記載がないため、どちらを指定するのが良いのかは不明です。sortしないほうがパフォーマンス的には良さそうな気がしていますので、どこかで調査できたら追記します。
#p5js でステキな表現がいろいろできそうな p5.brush のメモ【p5.js】

> ※ 後付けで [p5.js Advent Calendar 2023](https://qiita.com/advent-calendar/2023/p5js) の 2日目の記事として登録してみました

既に、p5.js を使っている色々な方が試されてますが、タイトルに書いている [p5.js用のライブラリ「p5.brush」](https://p5-brush.cargo.site/)に関する情報をメモしようと思います。

## p5.brush とは？
p5.brush は、Alejandro さんが作られたライブラリで、以下のようなステキな見た目の描画が実現できるライブラリです。

### 公式ページトップの画像
![公式ページトップ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/cf503de4-f9fb-87f4-e8e3-e12749597bf5.png)

### 作者の方のポスト
https://twitter.com/acamposuribe/status/1724759035809853567

![作者のポスト2](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/d4eba6c8-3ae8-20e0-52ed-912e39f89d2a.png)

![作者のポスト3](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5dcd96b4-8b42-3381-986f-8e7c265fba71.png)

### 公式のページへのリンク
公式のページやリポジトリは、以下の通りです。

- リンク
   - [*p5.brush - Brush that canvas!](https://p5-brush.cargo.site/)
   - [acamposuribe/p5.brush: Unlock custom brushes, natural fill effects and intuitive hatching in p5.js](https://github.com/acamposuribe/p5.brush)

## p5.brush を試すには？
p5.brush を試してみたいという場合は、まずは公式ページのサンプルを動かしてみるのが手軽です。

公式ページの以下の部分に、サンプルが見られるページへのリンクがあり、さらにそこから p5.js Web Editor のページ（コードを書いたり、実行できたりするページ）でサンプルが実装されたものを試すこともできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/287ac401-b7d1-c92a-5ff5-2bc3e95dc45c.png)

### 自分のお試し
自分は、最初は上記の Example 1 を動かしてみて、少し書きかえたりしてみました。
（※ 軌跡を変更したり、ブラシを限定的にしてみたりなど）

https://twitter.com/youtoy/status/1725939926154543230

その後は独力で進めるのはなかなか大変そうだな、と思っていた中、[「p5.js勉強会（第九回）」というイベント](https://www.youtube.com/watch?v=G1BOsEz574g)の中で、解説や実装サンプルの提示が行われる機会に遭遇しました。
![p5.js勉強会（第九回）](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/1a974311-df64-ea73-85d7-db267cdf7a3d.png)


それで、そこで示されたサンプルに手を加えたものを作ってみたりしました。

https://twitter.com/youtoy/status/1728760226999083509

## おわりに
とりあえず、少しずつ p5.brush の機能の一部が見えてきたのがありつつ、見きれていない機能もたくさんあります。

引き続き、[公式のリポジトリ](https://github.com/acamposuribe/p5.brush)に書かれてている以下のリファレンスを読み解いたり、試してみたりしつつ、さらにお試しをやっていければと思います！
![リファレンス](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/25c695d5-7d5d-b71a-823b-bab3638cddc9.png)

### X での作例のポスト
あと、いろいろな方が p5.brush を使って作られているものを見るのには、[X で「p5.brush」をキーワードにした検索](https://twitter.com/search?q=p5.brush%20&src=typed_query&f=live)をやってみて、出てくるポストを見てみるのがオススメです！
【Tips】exam〇opicsに登録しないで問題集を解く方法

# はじめに
私はAWS SAPを所持しており、現在DOP-C02の勉強をしています。
勉強の際になるべく勉強にお金をかけずにやれないかと考えたところ、exam〇opicsにたどり着きました。
このサイトはAWSやAzure等のベンダー試験問題が載っている素晴らしいサイトなのですが、
しばらく問題と解いていると「登録しろ」といったメッセージが表示され問題が見れなくなります。

何とか登録しないで問題を解くことができないか調べていたところ、以下のページに裏技？が記載されていました。

[exam〇opicsで後半の問題を見るTips](https://qiita.com/kazu_kr/items/3ad2c46209a2ed28a7be)

このページの裏技を使えば無料で問題を解き続けることができるのでは・・・？
ということで、スクレイピングで特定の試験問題のURLを収集するコードを書きました。

# 注意事項
コードを動作させる場合、自己責任で使用してください。

# サンプルコード
```
from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.common.by import By

# chromedriverを自動的にインストールし、Webブラウザを起動する。
driver = webdriver.Chrome(ChromeDriverManager().install())

# examtopicsのURL
# ※ここではAWSの試験を指定しているため、他の試験を検索する場合はURLを変更すること
url = 'https://www.examtopics.com/discussions/amazon'

# urlが続く間繰り返す
while(url != ''):

    # ページを開く
    driver.get(url)

    # 要素を取得
    elements = driver.find_elements(By.CLASS_NAME, 'discussion-link')

    # 取得した要素を処理する
    for element in elements:

        # 取得した要素から、特定の試験を含むものを抽出
        # ※ここで取得したい試験のキーワードを指定する
        if ( '取得したい試験のキーワード' in element.text ):
            url = element.get_attribute('href')
            print('url:' + url)

    # 次ページがあるか確認
    elements_btn = driver.find_elements(By.CLASS_NAME, 'btn-sm')

    # 取得した要素を処理する（次ページのURLを探す）
    url = ''
    for element_btn in elements_btn:
        if ( 'Next' in element_btn.text ):
            url = element_btn.get_attribute('href')
            break

# ブラウザを閉じる。
driver.quit()

print('完了しました')
```

# まとめ
今回はexam〇opicsから特定の試験問題URLを抽出するスクリプトを紹介しました。
キーワード指定を変更するだけで他の試験問題が抽出できるため、応用がきくかと思います。
この記事が誰かの参考になれば幸いです。
新IDE『Cursor』使ってみたメモ

# まずAIにコードを書かせてみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/a3c6c194-bef4-de8b-51e3-251945aa705d.png)

> Ctrl + K

を押すとChatと会話ができる。
今回はFastAPIも学習中ということもあり、
一緒にFastAPIのシステムを作ってもらうことに

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/199745e3-11b8-2d85-a0c7-ac43f66b3cd7.png)

とても拙い英語で会話。
(日本語版もあるのでぜひ)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/2189f661-4d8d-cd25-164e-771a05e404c0.png)

すると書いてくれた。

> Ctrl + Enter

で採用。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/f99a315f-f43a-e601-69fc-879afd0f8081.png)

ただ文字色キモイ。
VSCODE使っている人ならそう思うはず。

# 文字色を変える

> Ctrl + Shift + P

でコマンドパレットを開き、「color」と入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/f4505aa6-eb8f-941b-5613-7428dce3ace8.png)

「Preference Color Theme」を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/ebbf5dad-3351-5de3-a6c8-b58660352f83.png)
「Dark modern」を選択
これがVSCODEっぽいのでは

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/bffd2b88-93d0-d5e2-d09d-e15f0e98332c.png)

いくつかプリセットが組み込まれているようなのでお好みで

# ソースコード自動生成実践

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/a16faa4d-8fd2-2c3d-421e-6c2590e984de.png)
sqliteのファイルを作成したいのに、
スクリプト上は対話とかはできないらしい。

そんな時には
『View』→『Open View』→『chat』
でchatタブが開ける。

いつも生成AIを使う時のように対話できる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/288d1bfe-782a-5a47-86f0-a20caf406675.png)

...と
**何気なくこのボタンを押したらびっくり！**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/89bf9f47-da94-a3d6-1979-9c0650e50256.png)

急にソースコードの書き換えが始まった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1573902/81a676a0-a4d1-0fe2-824e-497b90f3b585.png)

このようにして糧に書き換えてくれた。

### ポイント
- ソース自動生成実行は現在開いているファイルに対して適用される。　
　　ほかに記述があったらそのソースに加えて書き換えが走ってしまう。
  　(Ctrl+zで取り消し可能)
スクロールに合わせて、ヘッダーの表示/非表示を制御する

## はじめに
表題通り、スクロールに合わせて表示、非表示を制御するコードを記載します。

### 成果物

https://twitter.com/kkfactory0705/status/1729479955195781522

### 仕組み
現在のスクロール位置、スクロール後の位置を取得し比較。比較の結果、スクロールアップかダウンを検知し、それに合わせてCSSを変更する処理。聞いてみれば意外と単純。。。

### ソースコード

```html:index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>スクロールアップ</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>  
    <header id="header">ヘッダー</header>
    <main>
        <p>要素1</p>
        <p>要素2</p>
        <p>要素3</p>
        <p>要素4</p>
        <p>要素5</p>
        <p>要素6</p>
        <p>要素7</p>
        <p>要素8</p>
        <p>要素9</p>
        <p>要素10</p>
        <p>要素11</p>
        <p>要素12</p>
        <p>要素13</p>
        <p>要素14</p>
        <p>要素15</p>
        <p>要素16</p>
        <p>要素17</p>
        <p>要素18</p>
        <p>要素19</p>
        <p>要素20</p>
        <p>要素21</p>
        <p>要素22</p>
        <p>要素23</p>
        <p>要素24</p>
        <p>要素25</p>
    </main>
    <footer id="footer">ヘッダー</footer>
    <script src="script.js"></script>
</body>
</html>

```

```css:styles.css
body {
    padding: 0;
    margin: 0;
}
header {
    display: flex; /* Flexコンテナを使用して水平・垂直方向に中央揃えにする */
    justify-content: center; /* 水平方向の中央揃え */
    align-items: center; /* 垂直方向の中央揃え */
    position: fixed;
    background: #ddd;
    background-color: antiquewhite;
    padding: 0;
    width: 100%;
    height: 90px;
    margin-top: 0px;
    transition: margin 100ms;
}
footer {
    display: none;
    background: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

.scroll-down header {
    margin-top: -90px;
}
.scroll-up header {
    margin-top: 0px;
}


main {
    height: 200vh;
    background: #ccc;
    padding: 120px 30px;
}
```

```js:script.js
// スクロール前のスクロール位置を保持する変数
let lastScrollPosition = window.scrollY;
// 現在のスクロール位置を保持する変数
let currentScrollPosition = 0;
// requestAnimationFrameの実行中かどうかを保持する変数。過剰な発火を防ぐ
let ticking = false;

function scrollUpDown(scrollPos, lastScrollPos) {
    // 現在のスクロール位置が前回のスクロール位置よりも大きい場合、スクロールダウンを検知
    if (scrollPos > lastScrollPos) {
        // スクロールダウン
        document.body.classList.remove('scroll-up');
        document.body.classList.add('scroll-down');
        console.log('SCROLLING DOWN: scrollPos: ',scrollPos,"lastScrollPos", lastScrollPos)
    } else {
        document.body.classList.add('scroll-up');
        document.body.classList.remove('scroll-down');
        console.log('SCROLLING UP: scrollPos: ',scrollPos,"lastScrollPos", lastScrollPos)
    }
}

// ウインドウのスクロールイベントを監視
window.addEventListener('scroll', function (e) {
    // スクロールイベントが発火したら、現在のスクロール位置を保持する
    currentScrollPosition = window.scrollY;

    //スクロールイベントの過剰な実行を制御します。
    if (!ticking) {
        // requestAnimationFrameを使って、scrollUpDown関数を実行する
        window.requestAnimationFrame(function () {
            scrollUpDown(currentScrollPosition, lastScrollPosition);
            lastScrollPosition = currentScrollPosition;
            ticking = false;
        });

        ticking = true;
    }
});
```
JointJSでHello World

## はじめに

JointJSでHello Worldする方法は、JointJS公式チュートリアルの[Installation](https://resources.jointjs.com/tutorial/installation)のページに載っています。こちらのページの内容およびサンプルコードをベースにポイントとなる部分の説明を書いていきます。

## 準備①：依存ライブラリの読み込み

以下の記載の通り、JointJSを使用するためには`JointJS`本体の他に`jQuery`, `Lodash`, `Backbone`をそれぞれ読み込む必要があります。

> For your JointJS application to run, the JointJS library and its dependencies have to be included in the source HTML of your page. Our initial example used a CDN to link to the required source files for JointJS, jQuery, Lodash and Backbone:

これらはすべてCDNで提供されているため、ベタのHTMLでJointJSを実行する場合は以下のように書いておけばひとまず使えるようになります。

``` js
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.1/backbone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.7.7/joint.js"></script>
```

npmを使っているプロジェクトであれば、npmで`jointjs`パッケージをインストールすれば依存関係のライブラリも含めてインストールしてくれます。

``` bash
$ npm install --save jointjs
```

## 準備②：GraphとPaperの定義

JointJSで図や表を作成するためには、GraphとPaperを先に定義する必要があります。GraphとPaperについては別の記事で細かく調べた上で解説を書くつもりですが、一言で説明すると以下のようなイメージになります。

- Graph：描画する対象を定義して保持しておく場所
- Paper：実際に描画を行う領域

GraphとPaperの両方がないとJointJSで描画を行うことができないため、コードの最初の処理でこれらをインスタンス化します。

``` js
var namespace = joint.shapes;

var graph = new joint.dia.Graph({}, { cellNamespace: namespace });

var paper = new joint.dia.Paper({
  el: document.getElementById('myholder'),
  model: graph,
  width: 600,
  height: 100,
  gridSize: 1,
  cellViewNamespace: namespace
});
```

## 図形の生成

図形のオブジェクトをインスタンス化することで図形を生成します。インスタンス化した図形のオブジェクトは、準備②で用意した`graph`にaddすることで描画対象となります。

```js
// 1つ目の四角形
var rect = new joint.shapes.standard.Rectangle();
rect.position(100, 30);
rect.resize(100, 40);
rect.attr({
    body: {
        fill: 'blue'
    },
    label: {
        text: 'Hello',
        fill: 'white'
    }
});
rect.addTo(graph);

// 2つ目の四角形
var rect2 = rect.clone();
rect2.translate(300, 0);
rect2.attr('label/text', 'World!');
rect2.addTo(graph);
```

## Linkの追加

Linkを使うことで、図形同士を線でつなぐことができます。インタラクティブな操作を許可する場合、Linkで繋いだ線は、図形を移動したときに追随して伸び縮みします。

```js
var link = new joint.shapes.standard.Link();
link.source(rect);
link.target(rect2);
link.addTo(graph);
```

以上が、JointJSを利用して図を作成する流れとなります。各要素の詳細については別の記事で一つ一つ解説する予定です。


※この記事は [JointJS Advent Calendar 2023](https://qiita.com/advent-calendar/2023/jointjs) の記事です。他の記事を読む場合はカレンダーのページを参照してください。

https://qiita.com/advent-calendar/2023/jointjs
SVGの図を描けるライブラリ「JointJS」をざっくり紹介する

この記事は [JointJS Advent Calendar 2023](https://qiita.com/advent-calendar/2023/jointjs) の 1日目の記事です。

https://qiita.com/advent-calendar/2023/jointjs

## はじめに

この記事はライブラリ「JointJS」について、知らない人向けにざっくり紹介する記事となります。

実際のJointJSの使い方については次回以降の記事で紹介していきますので、使い方が知りたい方はそちらを参照してください。

## JointJSとは？

[JointJS](https://www.jointjs.com/)を一言で説明すると、JavaScriptでSVGの図や表を描くことができるライブラリです。

基本機能はオープンソースで、無料で使用することができます。拡張ライブラリの[JointJS+](https://www.jointjs.com/jointjs-plus)を使用する場合、料金が発生します。

## JointJSで作れる図の例

JointJSのHPに[デモ用サンプル](https://www.jointjs.com/demos)からいくつか抜粋して紹介します。（詳しく知りたい方はHPを直接見たほうが良いかと思います）

### シーケンス図

テンプレート化したノードのオブジェクトと、それらをつなぐ線で構成するような図はJointJSを使用すると描きやすいです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129526/914f2032-4b5c-c473-5354-b26617c41c13.png)

### ツリー

階層構造のあるようなデータでは、各ノードをカスタム要素として定義したり、データ構造をJavaScriptで制御することで、少ないコードでも複雑な図形を描くことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129526/0e70aa55-a582-6d60-d02e-fc575ccf2bf8.png)

### 図形描画ツール

生成したSVGの要素をドラッグ&ドロップで動かす、等の操作もできるため、図形描画ツールを作成することもできます。

![jointjs.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129526/7aaed107-2113-e07a-9572-534a47b411c2.gif)

## JointJSの長所と短所

JointJSを業務で使ってみて、個人的に感じたJointJSの長所と短所について書きます。

### 長所① 自由度が高い

描画対象をカスタマイズして独自の要素を定義することができるので、実現できる図の自由度が高いです。前述の図の例でも、描画されている図の表現の幅が広いことがおわかりいただけるかと思います。

### 長所② サンプルが豊富

公式で公開されているサンプルが豊富にあります。コードも公開されているため、自分の実現したい図はどんなコードを書けばよいのか、というのがわかりやすいです。

### 長所③ 再利用性が高い

カスタム要素を定義しておけば同じ図形を複数生成するような処理は同じカスタム要素で処理できるため、再利用性が高い設計ができます。

### 短所① リッチなサンプルはJointJS+が前提になっている

リッチな動作は有料版のJointJS+で提供されている場合が多いです。例えば「ポップアップメニューを出す」等はJointJS+での提供となります。

ちなみにJointJS+の利用料金は年間2,990ドルと、なかなか良いお値段します :money_with_wings: 

どこかのFAQで、「JointJS+はJointJSのラッパーライブラリなので、JointJS+で実現できることはJointJSでも実現可能」という回答を見た記憶がある[^1]ので、リッチなUIもJointJSで作れるはずです。

### 短所② 公式ドキュメントが痒いところに手が届いてない

公式ドキュメントを見ると、メソッドやクラスなど幅広く記載が書いてあり、一見親切そうなドキュメントに見えるのですが、メソッドの引数の形式などの細かい記載が抜けていることがあります。細かい設定が必要になる場合は、文脈から引数の型を予想して、実際に使ってみて動作を確認するといったような作業が発生します。

### 短所③ 大量要素描画時のパフォーマンス

大量の要素を描画するときに、遅いと感じます。[公式のFAQ](https://www.jointjs.com/faq)によると、JointJS+を使用する場合はパフォーマンス面の改善が入っているらしいです（が、JointJS使ったことがないのでわかりません）。

## まとめ

フロントエンドで、少し複雑な図形を扱ったり、図形に対してインタラクティブな操作が必要になるときにJointJSを導入するとうまくハマる場合があります。長所・短所両方を列挙しましたが、特に長所①の自由度の高さは他に代えがたいものであり、短所を受け入れても導入する価値があるものだと感じます。フロントエンドで図を作成するような要件がある場合は導入を検討してみてください。

[^1]: 記憶はあるのですが、どこのページなのかを記録しておりませんでした。。。もし見つけられたら追記します。
Where You Can Find Updated CertNexus AIP-210 Exam Questions?

重要な認定試験であるCertNexus AIP-210試験は、サイバーセキュリティでのスキルを証明したい個人を対象としています。この試験は、サイバーセキュリティの常に進化する分野でキャリアの展望を向上させたいプロフェッショナルにとって重要な資格です。CertNexus AIP-210試験の成功裏な合格者は、高度なサイバーセキュリティの概念に精通していることを証明する認定バッジを取得します。この試験は、脅威インテリジェンス、脆弱性管理、インシデント対応などの幅広いトピックを扱っており、これらの分野を習得することは、サイバーセキュリティの役割で成功を収めたいプロフェッショナルにとって不可欠です。CertNexus AIP-210試験では、脅威分析、リスク管理、インシデントハンドリング、サイバーセキュリティツールの使用など、さまざまなサイバーセキュリティの側面で候補者を評価します。この試験で成功するには、これらのドメインを包括的に理解し、最新のサイバーセキュリティの実践に精通している必要があります。準備には、練習試験の受験、CertNexusサイバーセキュリティドキュメントの学習、協力的なスタディグループへの参加、サイバーセキュリティシナリオでの実践経験の獲得が含まれます。CertNexus AIP-210認定を取得することは、高度なサイバーセキュリティの概念を習得していることを示し、この分野で非常に求められる専門家としての地位を確立します。信頼性のある準備の旅に乗り出すためには<a href="https://www.examskit.com/certnexus-exams/questions">CertNexus AIP-210 exam questions</a>に関するExamskitなどの信頼性のあるリソースに深入りすることが望ましいです.


CertNexus AIP-210試験を合格し認定を取得することにはいくつかの利点があります。認定を取得した人々は、CertNexus AIP-210資格の需要が増しているため、収入の可能性が向上しているだけでなく、サイバーセキュリティ業界で明確な競争上の優位性を持っています。この認定は洗練されたサイバーセキュリティの概念の知識を正当化し、IT業界での職業的な進展のための強力なツールとなります。さらに、激しい競争のある産業では、CertNexus AIP-210認定に伴う増加した仕事の安定性が広く受け入れられています。財政的な利点に加えて、認定はサイバーセキュリティの理解を深め、脆弱性の効果的な管理、脅威の評価、インシデントの対応などを効率的に行う能力を検証します。

サイバーセキュリティの分野では、CertNexus AIP-210試験、またはCertNexus AIP-210認定としても知られているものが、広範で利点のある資格となっています。ITの厳しい世界では、この認定は仕事の前進を早めつつ、同時に収入の可能性を増加させます。CertNexus AIP-210認定を取得することで、世界的な認知が得られ、プロフェッショナルは国境を越えて協力し、働くことができます。この認定は、複雑なサイバーセキュリティの問題を管理する成功の実績を示すことで、仕事の安定性を向上させます。財政的な報酬の他にも、サイバーセキュリティの理解を深め、脅威の分析、脆弱性の管理、インシデントへの効果的な対応などのスキルを提供し、サイバーセキュリティの常に変化する環境に先んじて活動するためのスキルを提供します。包括的な準備資料には、練習試験、オンラインコース<p> <a href="https://www.examskit.com/"> Examskit CertNexus Exam Questions</a> </p>トレーニングおよび認定ウェブサイト上の慎重に設計された学習経路、公式の試験ガイド、コミュニティフォーラムなどが含まれています 。信頼性
BunとNodeを同じjsコードで自前ベンチしたらBunの圧勝だった

この記事は、Bun Advent Calendar 2023　の12/5に参加しています。

https://qiita.com/advent-calendar/2023/bunjs


ここのところ Bun の記事を毎日書いてるのだけど、そういえば、速い凄いといいながら、まだ自前でベンチも取っていなかったなと反省して、軽く試してみた。

結果は、まぁBunの圧勝でした。

環境
-------------------------------------
クラウド： Azure VM (これはオンプレでも何でも良い)
OS：　Ubuntu 20.04.6 LTS (GNU/Linux 5.15.0-1050-azure x86_64)
Bun：　v1.0.14 ( https://bun.sh/blog )
Node.js： v20.9.0

もちろん、これでなければいけないという事はありません。

コードはこれ。
-------------------------------------

郵便局の郵便番号データ 18M のcsv(124,332行) を for で回しながら行数カウントするだけのスクリプトです。
```javascript:read-zip-from-csv.js
console.time('csv read'); // 計測開始
const fs = require('fs');

const path='./KEN_ALL-utf8.CSV';// 郵便番号データ

const csv =  fs.readFileSync(path, 'utf8');
const oj=csv.split('\n')
let count=0;

for(let i=0; i<oj.length;i++){
    let line=oj[i].split(',')
    count++;
}
console.log(count);
console.timeEnd('csv read'); // 計測終了
```
このコードを Node.js と Bunでやってみた。

結果はこう
-------------------------------------
上記のコードを単に node と bun を入れ替えて実行してみました。

```javascript:nodeで実行する
$ node read-zip-from-csv.js
124332
csv read: 333.014ms
```
```javascript:bunで実行する
$ bun read-zip-from-csv.js
124332
[119.25ms] csv read
```
<ul>
<li>node.js が <b>333.014ms </b>
<li>bun が  <b>119.25ms </b>
</ul>

ということで、何度やっても Bunの圧勝でした。

うーむ。まぁ、ベンチというものは目安に過ぎないとはいっても 同じJavaScriptのコードを使い、単純に node と bun を変えただけで、これ程の差が出ると、既存の Node.js コードの実行を Bun へ置き換えたくなってきました。

p.s. console.timeEnd の出力結果書式が、Node.js と Bunで少し違うのだな。
<ul>
<li>node.js が <b>csv read: 333.014ms</b>
<li>bun が  <b>[119.25ms] csv read</b>
</ul>

個人的には Bun の方が見やすいと思うけど、他にも微妙な違いはあるのかもしれない。

<b>P.S. この続きの記事です。各行ごとに速度を調べてみたら、const fs = require('fs'); を import fs from 'fs';に書き換えると更に速くなることが判りました。</b>

https://qiita.com/toshirot/items/74476af27e67d8534c5a
自衛官からエンジニアへ Elixirから始める Web開発 Part 2

この記事は「Elixir Advent Calendar 2023」２日目の記事です
東京にいるけどfukuokaexのYOSUKEです。

普段は 合同会社TheWaggle で教材開発・システム開発・研修講師などマルチに活動してます。

このシリーズでは、文系ですらない、体育会系でも始められるプログラミング学習　というテーマで元自衛官だった僕が
自衛官からエンジニアになってもらいたいという気持ちを込めて、普段は大人しいですが、このコラムシリーズでは、あえて、体育会系のノリで、貴様ら理屈で覚えるなら体で覚えろ！というノリで書いてみたいと思います。

なので、初学者向けですが、理論は後回し、まずは動かして体感しろってノリの第２回目です。

それでは、いくぞ！

---

## そもそもプログラミングの前に 「コンピュータ」 何買えば良い？

そんな貴方にとっておきの情報を「結論」から言うと Apple の Macを買おう。いや、Windowsや、なんならLinuxでも構わないといえば構わない。が、しかし！

敢えて言おう。Appleを買え！　Appleは高い、そうだ高い！ だがしかし、貴様らが戦闘訓練で銃の分解結合を新隊員に教える時に、扱う銃が全員バラバラだったらどう指導する？　面倒だろう？　WindowsはOSは共通かも知れないが、購入するメーカー毎に細部が異なる。　AppleはメーカーもOSも同じところが開発してる　だからサポートがしやすい！　

言わば、全員が同じ銃を持っている状態。　同じ手順で分解結合を教えられる。そういうことだ！

## 買ったらまずは、タイピングの練習だ

いいか、PCを買ったら、前回の続きをすぐにできると思うな！
まずはタイピングの練習だ。毎日やれ、キーボードを見なくても打てるようになるまで練習だ！
キーを１つ打ち間違える度に腕立て伏せ一回だ！　わかったな！

タイピングの練習の為には、ホームポジションを知る必要がある。
Google教官に「タッチタイピング　ホームポジション」で画像検索しろ　！　


![スクリーンショット 2023-11-28 20.34.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/7a132b7f-adbf-6376-80ed-594bd180d14c.png)

タイピングの練習の方法を知りたいだと？　甘ったれるな！ そんな奴は これでもやってろ！ 
→ [寿司打](https://sushida.net/)


## LivebookでElixirを実行
タイピングの練習はできたか？ よし、いいだろう。いよいよここからが本番だ。

いいか、次の画面の真ん中あたりにある「Distributed portals with Elixir」と書かれているカード型の表示をクリックだ！

![スクリーンショット 2023-11-28 20.41.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/7c1fdf28-a3ac-18f1-2fe5-9717e432f52e.png)

クリックすると、ここに情報が書かれている。これを見ながら学習しろ！　何？　英語が読めないだと！
甘ったれるな！　英語が読めないのではなく、貴様が読もうとしてないだけだ！

しかし、いいだろう！今回だけは特別だ。貴様らに特別に指導してやろう。　論よりRUNだ！　まずは動かせ！

![スクリーンショット 2023-11-28 20.44.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/b9c87ede-f4cb-abdf-6e40-ea623b6c2648.png)

ということで、まずは先ほどの画面に戻り、 [+ New notebook] をクリックだ。
![スクリーンショット 2023-11-28 21.02.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/a8df7e9e-2979-1683-9c24-cb5e00e099ca.png)

以下のような画面になったら、黒い部分をクリックして、次のプログラムを入れてみろ！
```IO.puts("Hello World!")```
![スクリーンショット 2023-11-28 21.01.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/c1751e02-1701-928c-b694-15441e9597bf.png)

入力したら、 Evaluate をクリックだ。　何？ Evaluate が表示されて無いだと？　貴様ら！情報は足で稼げ！　そういう時はマウスのカーソルを入力した黒い部分あたりを探ってみろ！
![スクリーンショット 2023-11-28 21.13.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/86220dc3-a8f0-8803-1978-635d04477b53.png)

無事に次のように:okと表示されたら成功だ！
![スクリーンショット 2023-11-28 21.14.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/6d0e274a-4204-f438-1d71-5832f93daa58.png)

もし、以下のようにエラーが出たらエラーメッセージをよく見ろ！

![スクリーンショット 2023-11-28 21.15.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/a8c16122-1322-ff21-fad5-fcf77be66cda.png)

間違えている箇所をわかりやすく教えてくれている。上記の場合には、```IO.puts("Hello World!"）```の最後の```)```　カッコ　が全角文字だからエラーだと言っている！

よし、今回はここまでだ！　それでは次回 Part3でまた会おう！
【Django】DBから取得したデータ＆必ず任意のデータを一つ加えたリストからランダムに取り出す

# 概要
Djangoにて、ORMにより特定の条件に一致するデータをDBテーブルから取得し、任意のデータを必ず一つ加えた上で、その中からランダムに一つの要素を取り出すコードを実装しました。

モデル定義は以下。

```py
class Country(models.Model):
    area_id = models.IntegerField(null=True, blank=True)
    name = models.CharField(max_length=100, null=True, blank=True)
    capital = models.CharField(max_length=100, null=True, blank=True)

    class Meta:
        db_table = 'country'
```

DBテーブルは以下のように登録してある前提です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710373/bdcc772e-89cd-3e1d-1ec2-689ae8e5ca3d.png)


# サンプルコード

```py
import  random
from sample.models import Country


values= Country.objects.filter(area_id=1)
print(values)
# <QuerySet [<Country: Country object (1)>, <Country: Country object (2)>]>

values = [value.name for value in values] + ["どこでもよし"]
print(values)
# ['Japan', 'China', 'どこでもよし']

value = random.choice(values)
print(value)
# Japan
```

これにより、`area_id`が`1`のものを取り出した上で、それらと`"どこでもよし"`を合わせたリストを作成し、その中からランダムに一つ取り出すことができました。

上記はリスト内包表記で実装しましたが、以下でも同じことができます。

```py
values = Country.objects.filter(area_id=1).values_list('name', flat=True)
values = list(values) + ["どこでもよし"]
value = random.choice(values)
print(value)
```

`values_list`などDjangoのORMが返す形式などを以前別記事でまとめたのでそちらも紹介します。
[【Django】ORMのvalues/values_list/flat=Trueなどの出力結果を11パターンのコードでまとめた](https://qiita.com/Ryo-0131/items/5f7721d980587b1520c8)
ChatGPTを使って名古屋駅付近にサウナ施設を建てることを相談してみた

## この記事をざっくり言うと
- udemyで勉強した事が書いてある
- ChatGPTのちょっとした使い方を紹介
    - 無料版でも使える方法を記載


## 学んだコース
https://www.udemy.com/course/chatgpt-business/

※この記事ではコースで出た一部の情報を紹介

## ChatGPTについて学ぼうと思ったきっかけ
- ChatGPTを使ってアイデアを考えていたが、良いアイデアが出なかった
- そんな時、社内のメンバーに「質問の仕方が良くないのでは?」という話になった
- なるほど！と思いつつ「質問の仕方?どう聞けば良いの?」と疑問になりコースを受講

## そもそもChatGPTとは
- 無難な質問には無難な質問しか返ってこない
- 条件や要望まで書いた方が具体的な回答が来る
- 例えば
    - 役割を与える（社長、学生、コンサルなど）
    - 前提情報を与える（やりたい事の背景、商品の特徴は✕✕など）
    - 制約条件（300文字程度、専門用語を使わないなど）

## 学んだこと：アイデアを考えたい時に使える方法
- 「名古屋駅近くにサウナ施設を建てること」をルフィに相談してみた！

### ①役割を与える（君はルフィだよ。と分かってもらう）
- 例文
```
君はワンピースのルフィです。ルフィはどのような性格か教えてください
```
- 実際の回答
     ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578844/d774959d-7a40-bd42-e948-8320a2d7829f.png)
     
さすがChatGPT。ルフィのことをちゃんと知っている。

### ②相談内容をぶつける
- 例文
```
あなたはルフィです。
入力文と制約に沿って懸案事項を提示してください
#入力文
名古屋駅の近くにサラリーマンをターゲットにしたサウナ施設を作りたい。競合である既存のサウナ施設に負けないように独自のサービスを入れたいが何をすればいいかな?
#制約
・会話調で返答する
・検討すべき点は箇条書きで表現する
・足りない情報があれば質問する
#出力
ルフィ：
```
- 実際の回答

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1578844/b2b28fff-e3ca-166a-0550-5eae24b75dd1.png)

最初と最後しかルフィの感じは無かったですが、、、
しかし、考えるべきポイントやアドバイスを提示してくれました。
ここから更に会話をやり取りしていけば、本当にサウナ施設を作れるかも！


## この記事で一番伝えたかったこと
- ChatGPTとコミュニケーションを取る為の下記テンプレです
- 「入力文」「制約」「出力」を変更してChatGPTとの会話を楽しみましょう！

```
あなたはルフィです。
入力文と制約に沿って懸案事項を提示してください

#入力文
名古屋駅の近くにサラリーマンをターゲットにしたサウナ施設を作りたい。競合である既存のサウナ施設に負けないように独自のサービスを入れたいが何をすればいいかな?
#制約
・会話調で返答する
・検討すべき点は箇条書きで表現する
・足りない情報があれば質問する
#出力
ルフィ：
```
引っ越したてのダンボールの片付け方をGoogle bard全投げしてみた〜AIと楽しく生きる〜

# 引越し早々片付かない部屋の現状
引っ越して1週間で40箱あったダンボールは20箱まで減りはしたものの、そのまま数ヶ月経っても残りのダンボールの数が変わらない。
どうにも片付ける気力が湧かないので、Google Bardに相談し、言われるがままに体を動かしてみようと思う。（できれば１日で片付け終わりたい）

## Google Bardに質問してみた
- Q. 引っ越したてで、段ボールが片付かなくて困っています
- A. ↓
 ```
引っ越し後の段ボールの片付けは、なかなか大変ですよね。ここでは、段ボールの片付けを効率的に進めるためのコツをご紹介します。

1. 整理と掃除をあらかじめしておく
段ボールを片付ける前に、まずは部屋の整理と掃除をしておきましょう。部屋が散らかっていると、ダンボールの場所が定まらず、片付けがさらに大変になります。また、掃除をしておけば、ダンボールを開封したときに、埃やゴミが舞い上がるのを防ぐことができます。

2. よく使うモノから収める
段ボールを開封したら、まずはよく使うモノを収納しましょう。よく使うモノは、すぐに取り出せる場所に収納しておくと、生活がしやすくなります。

3. 収納用品はまとめておく
収納用品は、あらかじめまとめておきましょう。収納用品が散らかっていると、ダンボールの整理に手間がかかります。

4. ダンボールは折りたたんで処分する
空になったダンボールは、折りたたんで処分しましょう。処分する前に、ダンボールに書かれている内容をチェックし、必要であれば処分前に処分するかどうかを判断しましょう。

5. 段ボールの処分方法を確認しておく
ダンボールの処分方法は、住んでいる地域によって異なります。ダンボールの処分方法は、引越し業者や自治体のホームページなどで確認しておきましょう。

具体的な手順としては、以下のとおりです。

部屋の整理と掃除をする
よく使うモノから収納する
収納用品をまとめておく
空になったダンボールを折りたたんで処分する
ダンボールの処分方法を確認する
また、段ボールの片付けを効率的に進めるためには、以下の点に注意しましょう。

1日で全部を片付けようとせず、少しずつ進めていく
段ボールの種類や中身をわかりやすくラベル付けする
家族や友人に手伝ってもらい、協力し合う
引っ越し後の段ボールの片付けは、時間と体力が必要ですが、一度で完璧にする必要はありません。少しずつ進めながら、自分なりのやり方で片付けていきましょう。
```
 > 1日で全部を片付けようとせず、少しずつ進めていく

やっぱり１日で片付けるなんて甘えるなということか。。。
この一行に心を打たれかけたがやっていくとする。

###  1. 整理と掃除をあらかじめしておく
これは引っ越したときに掃除済みのためOKとする（早速だめそうな予感がするが…）

### 2. よく使うモノから収める
最初に20箱解体したものがよく使うモノであり、その後数ヶ月経っても必要なものがないのでこれも良さそうである（さらに怪しい雲行き）

### 3. 収納用品はまとめておく
とりあえず箱やらラックやらをひとまとめにしてみた。（置き場がほとんどないが大丈夫だろうか）

### 4. ダンボールは折りたたんで処分する
いきなりクライマックス！！
Bard先生、そもそも処分するダンボールを作るところを教えてください！！
というわけで特にやることがなさそうなのでOKとする（アカン）

### 5. 段ボールの処分方法を確認しておく
これは引っ越してすぐ困った問題で、調べても自分の地域は処分方法が出てこなかった。

ここで私が実践した（ほぼ）確実な方法を伝えたい。

**お隣さんに引越しのご挨拶がてら処分方法を聞く**

ご近所付き合いがない最近だと引越しのご挨拶は難易度が高いと思うが、高確率でお隣さんは処分方法を知っている。
しかし私がご挨拶の時に聞いた時は
`「いつも主人が捨ててくれるので分からなくて…」`
とのことで処分方法を知ることができなかったのである。無念。
 　 
**市役所や区役所に電話で直接聞く**
お隣さんに処分方法を聞けなかったので仕方なく役所に電話をかけたところ、無事教えてもらうことができた。
こちらの方が難易度は高くない。

というわけで処分方法についてもOKだ。

## 結論
Google Bardでは当日中に段ボールが1箱も片付けることができなかった。

## と思いきや、最後まで読めばダンボールが片付く！？
Google Bard先生は最後に素晴らしいことを伝えてくれた。

>家族や友人に手伝ってもらい、協力し合う

これだ。最高の手段である。
というわけで友達を召喚して協力してもらい、なんと・・・5箱片付いた。
大きな進歩を成し遂げることになって嬉しい限りである。やったー！

Google Bardはまだ試験運用中なので私1人では段ボールが片付かなかったが、本運用されたら改めて質問してみようと思う。
その頃には質問しなくても残りの15箱が片付くことを祈りながら・・・
【Shopify】CLI 2.xから3.xへアップデート

## 環境
Microsoft Windows 11 Home
Microsoft Windows [Version 10.0.22621.3155]
ruby 3.1.3
node v19.7.0


## 旧バージョンのアンインストール
```:ターミナル
gem uninstall shopify-cli
```

## 再度インストール
```:ターミナル
npm install -g @shopify/cli @shopify/theme
```

## 確認
```:ターミナル
shopify version
```


### その他
VScodeでエラーがあったので、以下実行後アップグレードできました。


```terminal:エラーメッセージ
このシステムではスクリプトの実行が無効になっているため~
```

```terminal:ターミナル
# Set-ExecutionPolicy -ExecutionPolicy <実行ポリシー> -Scope <スコープ>
PS C:> Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process
```
```terminal:ターミナル
# 確認
PS C:> Get-ExecutionPolicy
RemoteSigned
```

<!-- [参考](https://zenn.dev/dollaga_saiore/scraps/98fcc5da6b1a26) -->
作業自動化に使えるPyAutoGUI紹介　【フェイルセーフ・カーソル位置取得】

## はじめに
前回に引き続き，自作RPAツールとして利用できる「PyAutoGUI」について紹介していきます．

「マウス操作」「キーボード操作」のコマンドはこちら
→ [作業自動化に使えるPyAutoGUI紹介①](https://qiita.com/suipy/items/a50c95293126c41bcca0)

「メッセージボックス機能」「スクリーンショット機能」「Locate機能」のコマンドはこちら
→ [作業自動化に使えるPyAutoGUI紹介②](https://qiita.com/suipy/items/15fe275d649c19a51a3e)

## PyAutoGUIとは
Pythonスクリプトでマウスとキーボードを制御して，「マウス操作の自動化」や「キーボード入力の自動化」を実現します．

## 動作環境
- Python 3.12.0
- PyAutoGUI 0.9.54

PyAutoGUIはpipを使用してインストールできます．
```
pip install pyautogui
```

## コマンド紹介
- position()
マウスカーソルの現在のxy座標を返す．
```python
import ppyautogui as pag

pag.position()
```

---
- size()
現在の画面解像度を返す．
```python
import ppyautogui as pag

pag.size()
```

---
- onScreen(x, y)
(x, y)が画面内にあればTrue，無ければFalseを返す．
```python
import ppyautogui as pag

pag.onScreen(x, y)
```

---
- フェイルセーフ
PyAutoGUIが呼び出されるたびに2.5秒の一時停止を設定します．
```python
import pyautogui as pag

pag.PAUSE = 2.5
```

フェイルセーフモードがTrueの場合，マウスを左上に動かすとpyautogui.FailSafeExceptionが発生し，プログラムを中断させることができます．
```python
import pyautogui as pag

pag.FAILSAFE = True
```

---
座標の位置を調べるためにマウスカーソルの位置を都度実行して調べることは大変だと思います．以下のPython3スクリプトは常にマウスカーソルの位置を出力します．
```python
import pyautogui, sys
print('Press Ctrl-C to quit.')
try:
    while True:
        x, y = pyautogui.position()
        positionStr = 'X: ' + str(x).rjust(4) + ' Y: ' + str(y).rjust(4)
        print(positionStr, end='')
        print('\b' * len(positionStr), end='', flush=True)
except KeyboardInterrupt:
    print('\n')
```

```
Press Ctrl-C to quit.
X: 1384 Y:  204
```
マウスカーソルを動かすと，上記のX，Y座標の数値がリアルタイムで変化します．
終了する場合は「Ctrl + C」を押してください．
Azure Static Web Apps に Next.js ver.14 をデプロイする

## やりたいこと
`Next.js ver.14.0.3` で作成した静的なWebアプリを `Azure Static Web Apps` にデプロイしたい。基本的には、ドキュメント通りやれば良く、GitHub Actions を通じてデプロイする流れ。エラーが発生したので、メモ残し。

> [静的にレンダリングされた Next.js の Web サイトを Azure Static Web Apps にデプロイする](https://learn.microsoft.com/ja-jp/azure/static-web-apps/deploy-nextjs-static-export?tabs=github-actions)

## エラー発生
GitHub Actions で build する際に、node のバージョンが古いと怒られてしまう。何も指定しないと node ver.16系が選ばれてしまうようだ。

Next.js 14系は、`Node.js 18.17+` が必要なので（[Next.js > Installation](https://nextjs.org/docs/getting-started/installation)）、build する際の node のバージョンを指定してあげる必要がある。

指定方法は、`package.json` や GitHub Actions の設定の yml

なのだが、その前に各種バージョン対応状況を調べる

## Node version support

### Node.js
- Node.js 18: MAINTENANCE
- Node.js 20: ACTIVE

なるべく20だが、18でも構わない。

> [Node.js - Previous Releases](https://nodejs.org/en/about/previous-releases)

### Azure
- Node.js 20: Preview
- Node.js 14-18: GA

GAって何？ギャランティ？現時点では、18系を利用するのが無難か。
> [Azure Functions でサポートされている言語](https://learn.microsoft.com/ja-jp/azure/azure-functions/supported-languages?tabs=isolated-process%2Cv4&pivots=programming-language-javascript)

### GitHub Actions
最新(20.10.0)まで全部サポートされている模様。

> [versions manifest](https://github.com/actions/node-versions/blob/main/versions-manifest.json)

## 対応する

今回は、`>=18.17.0` で行くことにする。

```json: package.json
{
  ...,
  "engine": {
    "node": ">=18.17.0",
  }
}
```

```yaml:.github/workflows/azure-static-web-apps-....yml
...
jobs:
  build_and_deploy_job:
  ...
  steps:
  - uses: actions/checkout@v3
    ...
  - uses: actions/setup-node@v4
    with:
      node-version: '>=18.17.0'
  - name: Build And Deploy
  ...
...
```

Azure で設定時に作成された yml ファイルをそのまま使い、build のステップの前に、設定した。今日時点では、`20.9.0` が選択された。

```
Environment details
  node: v20.9.0
  npm: 10.1.0
  yarn: 1.22.21
```

きっちりやりたい場合は、きっちり指定すれば良い。今回はきっちりしなくても良いので、このままにする。

おしまい。
富士通 A561シリーズ 分解・無線LAN基板搭載方法

::: note info
自己責任でお願いします。
:::

-  中古で調達した端末。左奥はLCDパネル換装待ち。
 
![1.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821882/33d949a9-4c8a-6b26-1d7b-4929f89de745.jpeg)
- 無線LANは内蔵してない物が多いですが取り付け部はあるので無線基板とアンテナを調達すれば無線化できます。(USB,PCMCIAによる無線化は出っ張るので避けたい)
　 
- まず、バッテリを外して、下の赤のネジを外す。
![2.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821882/22567829-4983-a41c-3ed3-d7c0b363cc9b.jpeg)
　
- 次に少し難関のパーツ外しで、赤線の部分を外しつつ、(反対側にもあり)
![3.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821882/cb2ee767-0266-7f41-a75a-09439a3968a9.jpeg)
　
- ここの部分を外す。慣れれば10秒も掛りません。
![4.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821882/6fa9e7ac-6863-50e5-6f71-72ee41444602.jpeg)
　
- そうすると下の様になります。(キーボードが違いますが)
![5.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821882/6275968c-ff04-0da6-11c8-381ce2ccbb71.jpeg)
ここまで来たら、後は楽々です。
　
- 次はキーボード外しです。キーボードは自分が知る限り二種類あって、下のキーボードの場合は、
![6.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821882/267eeace-b1f5-cd6a-1d0a-e5a9ee6da486.jpeg)
　
- 写真の通り、上部からベリベリと剥がします。両面テープで固定されていますが一気にキーボードを持ち上げるとフラットケーブルが切断されます。(経験者談)
- 赤矢印のところを二つ広げて解除してからフラットケーブルを外します。
- この状態でキーボード換装が可能。
![7.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821882/73af2c4b-271b-a720-25b5-ee6011444b99.jpeg)
　
- 下のキーボードの場合は赤の部品を外すとキーボードはネジ3-4箇所で止められるのでそれを外す。後は同じ。
- CRキーの隣は余計なスペースがあり意味不明。だったらCR,BSキーをもっと大きくすればいいのにと思う。
- このタイプのキーボードの方が外しやすい。
![8.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821882/0f2f8c10-e727-58ef-5245-1d4ab0da3c89.jpeg)
 　
- 無線ラン基板を搭載する場合は、数百円で買ったこの無線基板を、
　![10.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821882/51316c40-8e7f-f54a-d534-a9774a7eef29.jpeg)

ここの専用スペースに取り付けます。
![9.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821882/fa6cfed5-5da6-b89e-84dd-cab41208d4a8.jpeg)
　
- キーボードを戻して、無線ランケーブルを取り回し。ついでに赤の部分のネジを締めまわし。
![12.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821882/5cee39c5-0dd6-4635-80f4-f8400544e220.jpeg)
　
- 赤丸の保護ゴムを楊枝等で外して中にあるネジを外す。簡単に青の部品は外せます。この時点でLCDパネル換装が可能。アンテナケーブルは青の線の所を通して完了。

![13.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821882/ed25c4d9-f0d7-2757-68aa-ca46a727b7ea.jpeg)

- 裏面(参考)。クーリングファンも汚れてたら清掃。
![14.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821882/94c81aa9-9fc5-8ed0-a22a-dfa9321b0dec.jpeg)
　
- 非常にメンテナンス性が良い筐体です。5分足らずでキーボード、LCDパネル換装ができます。
- 2.5インチドライブに至っては3分も掛かりません。SSDに換装しました。
STM32G031とMCP3425で電圧を測る2(浮動小数点を使わない)(変換処理)


目的
軽量化
オンラインコンパイラでひな形を作る


オンラインコンパイラ



プログラム


```c++


#include <iostream>
using namespace std;

//10の割り算 0から1028までは、正しい。主に0から999
#define DIV10(n) ((n*205)>>11)

int main(void){
    // Your code here!
    
    int s;   //101
    int e;   //
    int g;
    char str1[9];

    //16ビットadcの4ビットの変換テーブル
    char bit4[16][4]=
    {"000" ,"062" ,"125" ,"187" ,
     "250" ,"312" ,"375" ,"437" ,
     "500" ,"562" ,"625" ,"687" ,
     "750" ,"812" ,"875" ,"937" };

    //s = read_data();
    s = ((1654*16)+8); //debug

    e=(s >> 4);

    g='0';
    if     ( e >= 2000 ) { e = e - 2000; g='2';}
    else if( e >= 1000 ) { e = e - 1000; g='1';}

    str1[0]=g;
    str1[1]='.';
  
    str1[4]='0'+(e-(DIV10(e)*10));e=DIV10(e);
    str1[3]='0'+(e-(DIV10(e)*10));
    str1[2]='0'+DIV10(e);

    str1[5]=bit4[s & 0xf][0];
    str1[6]=bit4[s & 0xf][1];
    str1[7]=bit4[s & 0xf][2];
    
    str1[8]=0;
  
    printf(str1);
    printf("\n");
    
}

```

結果


```

1.654500

```
特定のディレクトリ下のファイルを4桁の連番に名前を変更する

# 名前を４桁の連番に変更する

```python:main.py
import os
import glob

abs_path = os.path.dirname(__file__)

# ディレクトリのパスを指定する
dir_path = str(abs_path) + "/moto_kopikopi"

# 画像ファイルの拡張子を指定する
extensions = ["jpg", "png", "gif"]

# 連番の初期値を指定する
num = 1

# 指定したディレクトリにある画像ファイルを検索する
for ext in extensions:
    files = glob.glob(os.path.join(dir_path, "*." + ext))
    for file in files:
        # ファイル名と拡張子を分割する
        base, ext = os.path.splitext(file)
        # ４桁の連番にフォーマットする
        new_name = "{:04d}".format(num) + ext
        # 新しいファイル名のパスを作成する
        new_path = os.path.join(dir_path, new_name)
        # 同じ名前のファイルが存在しない場合は、リネームする
        if not os.path.exists(new_path):
            os.rename(file, new_path)
            print(f"{file} -> {new_path}")
        # 同じ名前のファイルが存在する場合は、スキップする
        else:
            print(f"{file} -> {new_path} (skipped)")
        # 連番を１増やす
        num += 1

```
【CSSTips】横並び配置で2つ目の要素は1つ目の残り全ての横幅

## はじめに
左側のスペースに合わせて右側は残り全部という事はよくあるのですが、CSSを実際にかけない事があったので、メモ程度に残しておきます。

![スクリーンショット 2023-11-28 20.34.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/599049/e3f29ed7-82d6-9f28-550a-661cb29a6e64.png)


```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Flex Wrap Sample</title>
</head>
<body>
    <div class="flex-wrap">
        <div class="left-column">左側</div>
        <div class="right-column">右で残り</div>
    </div>
    <div class="flex-wrap">
        <div class="left-column" style="width: 100px;">左側</div>
        <div class="right-column">右で残り</div>
    </div>
    <div class="flex-wrap">
        <div class="left-column" style="width: 200px;">左側</div>
        <div class="right-column">右で残り</div>
    </div>
    <div class="flex-wrap">
        <div class="left-column" style="width: 50px;">左側</div>
        <div class="right-column">右で残り</div>
    </div>
</body>
</html>
```

```css:styles.css
.flex-wrap{
    display: flex;
    outline: auto;
}
.left-column{
    white-space: nowrap;
    background-color: #ccc;
    outline: auto;
    padding: 10px;
}
.right-column{
    width: 100%;
    background-color: #eee;
    padding: 10px;
}
```
自衛官からエンジニアへ Elixirから始める Web開発 Part 1

この記事は「Elixir Advent Calendar 2023」1日目の記事です
東京にいるけどfukuokaexのYOSUKEです。

普段は 合同会社TheWaggle で教材開発・システム開発・研修講師などマルチに活動してます。

このシリーズでは、文系ですらない、体育会系でも始められるプログラミング学習　というテーマで元自衛官だった僕が自衛官からエンジニアになってもらいたいという気持ちを込めて、普段は大人しいですが、このコラムシリーズでは、あえて、体育会系のノリで、貴様ら理屈で覚えるなら体で覚えろ！というノリで書いてみたいと思います。

なので、初学者向けですが、理論は後回し、まずは動かして体感しろってノリですw

それでは、いくぞ！

## コンピュータ？何それ美味しいの？

美味しいに決まってるだろ。だから動かすんだよ。学ぶ？ いらん、そんなものは後だ。まずは動かせ。

という事で、一番簡単に動かせるものから始めよう。

### STEP1 
* [Livebook公式ページ](https://livebook.dev/) 
* [Livebookをオンラインで触ろう](https://fly.io/launch/livebook) ⇦ クリック
* アカウント作るの大変な場合はインストールしちゃうのが楽 → STEP1（インストール編へ）

![スクリーンショット 2023-11-02 20.21.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/bc6ed4ed-4d30-0bc4-fd75-082d801d708c.png)

1. Google アカウントを作って（もしくは既にあれば、Googleアカウントでログイン）ログインする

ログイン難しい？　というおまえら（自衛官） 甘ったれるな！と言いたいところだが、今回は特別に金に物を言わせる方法を教えてやろう。 Apple MacBook Proへインストールする方法を以下に示す！

MacBook Pro持ってない？ 貴様！　キャバクラにばかり金を使うな！  りんごを買え！

### STEP1（インストール編）

[Livebook Installページへ](https://livebook.dev/#install)

![スクリーンショット 2023-11-28 19.58.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/dc4387a8-91cf-9605-e998-c4db37ecd2a3.png)

Mac(Universal)をクリックして、ダウンロードに入った「LivebookInstall-latest-macos-universal.dmg」をダブルクリックし、Livebook のアイコンを Applicationsのフォルダにドラッグアンドドロップ用意！　はじめ！

![スクリーンショット 2023-11-28 20.03.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/12577dc0-576e-92b9-29a9-65b8867493b2.png)

インストールが完了したら、Launchpad を開いてLivebookのアイコンをクリックして起動しろ！
![スクリーンショット 2023-11-28 20.06.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/25b900e4-f041-6903-5a19-bdc430f27d2e.png)

初めて開くと以下のメッセージが表示されるが怖がるな！ 
![スクリーンショット 2023-11-28 20.06.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/ec9b58a2-d338-e1ae-2ee3-9541508b7e09.png)

無事にブラウザが開いて、次の画面が表示された準備よし！

![スクリーンショット 2023-11-28 20.08.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72962/a242c435-2b99-08a5-9dc4-366936408712.png)

これで準備完了だ。　それでは次回 Part2でまた会おう！
「お前のパソコンの画面なんか狭くない？」

# TL; DR

Windowsは初期設定状態で拡大表示になってしまっている。
気づかずに使っている人も多いので、教えてあげよう。

# ある日の気づき

WSLが登場して以来、開発マシンにWindowsが選択されることも珍しくなくなってきました。
また、非技術職のメンバーはそもそもWindowsが支給される場合も多いと思います。

そんなWindowsの皆さんの画面を（ミーティングの画面共有などで）見ていて気づいたことがあります。

![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151137/35e0650f-24a9-23f2-40c2-45c311176998.png)

### 「なんか画面狭くない…！？」

解像度が明らかにフルHD（1920x1080）に満たなそうに見えますが、そんな小さな端末は支給されていないはずです。

## 拡大設定になってしまっている

Windowsには、**ディスプレイの拡大に関する設定**があります。
これを上げると、テキストやアプリのUIなどが拡大され、視認しやすくなります。

![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151137/37083e8b-e787-84a6-6c1d-e3ddb98dc620.png)

しかしこれは、**活用できる有効な解像度が犠牲に**なっています。

具体的には、例えばフルHDモニタで拡大率を150%に設定すると、物理的な解像度は1920pxのまま、1280pxとしてエミュレートします。

### そして厄介なのが、これがデフォルトで150%に設定されてしまっていることです。

## 解像度が低いと何が悪いの？

解像度が低いと、Webブラウジングも表計算ソフトも見渡せる範囲が狭くなってしまい、作業効率が低下します。

拡大率を戻した状態と比較すると分かりやすいです。

||image|
|---|---|
|150%|![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151137/99bb439d-9865-bd59-1249-ca0447a72632.png)|
|100%|![スクリーンショット 2023-11-08 103326_edit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151137/8045b615-39b0-41f3-790d-bfd50838aedb.png)|

文字が大きくて一つ一つの要素を視認しやすいのは150%ですが、たくさんの情報を広々と表示できているのは100%のほうです。

150%の拡大によってどれだけの解像度を無駄にしているのか、さらにイメージしやすく表現すると…

![PXL_20231128_030658789.PORTRAIT_blur.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151137/50e612c2-9252-2f3e-6374-774e294d749a.jpeg)

ディスプレイが本来が持つ解像度のうち、上記写真の部分だけで作業しているようなものです。

仕事の作業をするパソコンとしては、この初期設定はとても非効率です。

## 「設定で戻せばいいだけじゃん」

はい。治す方法としては設定を変更するだけです。

ですが、**一番気をつけなければいけないことは、デフォルトの設定のまま作業していて、**

- **解像度が低い状態になってしまっている**
- **解像度が低いせいで作業がしづらい**
- **設定によって変更できるだろう**

**ということに気づけるのは一部の人間のみ**であるということです。

特に非技術職の方は、解像度がどうとか意識せず利用していたり、PCの設定をカスタマイズする習慣がなかったりするため、誰かが教えてあげない限りいつまでもデフォルト設定のまま使ってしまう恐れがあります。

## 周知しよう！

ということで、**自分の環境だけ設定を調整してヨシとするのではなく、一緒に働く皆さんにも「こんな設定あるよ」ということを周知してあげましょう。**

社内で数多くの人がこの設定によって非効率に作業を行っていたとしたら、**あなたがちょっと知識共有してあげるだけで、会社全体で結構な生産性向上につながるかも**しれません。

情シスのPCセットアップのフローで最初から調整してあげるのがよい気がします。

そして、この件はただの一例で、他にも自分では当たり前だと思っている知識でも、周りの皆さんにとって役立つ情報はまだまだあるかもしれません。

## 設定手順

最後に、実際の設定手順を記載します。

1. スタートメニューから「設定」を開きます。
2. 左カラムの「システム」を選択します。
3. 「ディスプレイ」を選択します。
4. 「拡大/縮小」を「100%」に変更します。

![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151137/d5afcffa-71e3-7f14-8408-d15fc5fa172a.png)

## 補足

- ※ 拡大率「100%」が全ての人や環境にとって最適とは限りませんので、視力やモニタ解像度などに合わせてご調整ください。結果的に初期値の150%が最適な場合もあるかと思います。
- ※ 全てのWindows搭載マシンの初期設定の拡大率が150%になっているかどうかは未確認です。（追記: 125%の場合もあるようです）

---

https://qiita.com/laineus/items/995957422f32383da00b