OmniAICreator/Qiita-1.07M huggingface dataset:
SearchGPTの登場でGoogle検索はどう変わる？

SearchGPTは、新しい検索エンジン技術として注目を集めています。その革新的なアルゴリズムとAIベースの検索手法は、Googleにとっての競争相手となり得るでしょう。長年にわたり、Googleがこの分野でのリーダーシップを維持してきましたが、新たな挑戦者が登場しています。それがSearchGPTです。SearchGPTは、GPT（Generative Pretrained Transformer）技術をベースにした検索エンジンで、従来のアルゴリズムに依存しない新しい検索のアプローチを提供します。

> https://openai.com/index/searchgpt-prototype/
July 25, 2024
We’re testing SearchGPT, a temporary prototype of new AI search features that give you fast and timely answers with clear and relevant sources.
> We’re testing SearchGPT, a prototype of new search features designed to combine the strength of our AI models with information from the web to give you fast and timely answers with clear and relevant sources. We’re launching to a small group of users and publishers to get feedback. While this prototype is temporary, we plan to integrate the best of these features directly into ChatGPT in the future.

### SearchGPTとは何か？

- 技術の背景: GPT（Generative Pretrained Transformer）の説明と、それがどのようにして検索エンジンに応用されているか。
- 特徴と利点: SearchGPTが提供する主要な機能と、それがGoogleに対する優位性を持つ理由。
- AIの役割: 自然言語処理（NLP）と機械学習（ML）がSearchGPTの検索アルゴリズムにどのように組み込まれているか。

### Googleとの比較: SearchGPTの競争力

- 検索結果の精度と関連性: Google検索のアルゴリズムとSearchGPTのアプローチの比較。
- ユーザーエクスペリエンス: インターフェース、検索速度、結果のカスタマイズ可能性など。
- AIの進化と検索技術の未来: AIがどのように検索エンジンの未来を形作るか、そしてSearchGPTがGoogleにどのような影響を与えるか。

3. SEOの観点から見たSearchGPT

- SEO最適化戦略: SearchGPT向けのSEO戦略と、Google検索エンジンに対するSEOの違い。
- コンテンツの最適化方法: SearchGPTのアルゴリズムに基づいたコンテンツの作成方法と、それがGoogle検索にどう影響するか。
- リスティングとオーガニック検索結果: SearchGPTでのリスティング方法とその影響力。

SearchGPTは、検索エンジン業界において新しい風を巻き起こす可能性があります。Googleが長年にわたり支配してきたこの分野において、AIベースの新技術がどのように進化し、どのように競争を激化させるかは興味深いテーマです。SearchGPTがGoogleとどのように共存し、または競合していくのか、これからの動向に注目が集まります。

### waitlist 募集中 https://chatgpt.com/search
Chrome拡張機能の審査でいつも拒否されるのは

# はじめに
これまで、いくつかのプラグインを公開してきました。プラグインのバージョンがv2からv3になり、作り方のハードルも高くなり、また、公開への審査も厳しくなりました。
そのため、最近は審査でよく「拒否」されることが多くなりました。
セキュリティの確保やプライバシーを侵害していないかの審査で引っかかることが多くなりました。それらとともに、基本的な重要要件としての「単一機能」の審査があります。
最近は、この審査に引っかかることが多くなりました。
ここで、少し、この「単一機能」要件について記述したいと思います。

# 「単一機能」要件とは
文字通り、プラグインの機能は、ひとつでなければなりません。これまでは、独立した機能が含まれていても通過していたように思います。それは、おそらく審査漏れだったのかもしれません。
しかし、ここ最近は特に審査が厳しくなったように思えます。
おそらく、審査のためのプラグインのテストに時間をかけているように思えます。従来よりも審査結果が出てくるまでに時間がかかっています。

また、この「単一機能」の判断基準がデベロッパー側には見えませんので、何をもって拒否されたのかの詳細は教えてもらえません。ただ「単一機能」ではありません。という返信メールが来るだけです。
そのため、デベロッパーとしては、複数の機能が入っているのかを調べることになります。
調べてみると、確かに関連性のない独立した機能が含まれていました。
こういうことの繰り返しが起こります。最近は2,3回「拒否」されることも多くあります。

# 「単一機能」の範疇を考えてみると
デベロッパーとしては、どこまでが「単一機能」として許されるのかということです。出来れば、ある程度の関連する機能は含めたいということがあります。それは、ユーザーの利便性を考えてのことです。もし、その要件が厳格の場合は、関連する複数の機能でも別々にプラグインを作成しなければなりません。それは、ユーザーの利便性に、反することになります。
実は、プラグインを審査する側でも、ユーザーの利便性については要件として挙げています。それを考えると、「単一機能」と言っても、関連するサブ機能は含めてもいいのではないかと思っています。この大きなくくりとして考えるとひとつの「単一機能」になると思っています。

# これから審査を受ける予定のプラグイン
今、作成中のプラグインには、関連するサブ機能があります。youtube動画のプレーヤーを作成していますが、この機能の中に、動作モードという概念を取り入れ、ふたつのモードで動作することを考えています。
一つは、ランダムリストモードでもうひとつはリスト選択モードです。

このプレーヤーで、モードを指定して、いずれかのモードで動作できるようにしたいと思っています。この全体を「単一機能」として審査を受けようと思っています。

# おわりに
審査の結果がどうなるのかは、これからですので、もう少し先の話になります。
おそらく、通過するのではないかと思っています。なぜなら、その動作モードを指定しなければプレーヤーが動作しないので、どう考えてもひとつの機能だと言えると思います。
BlenderのバージョンによるPythonからの頂点カラーレイヤーの追加方法の違い

# 概要
BlenderのPythonスクリプトから頂点カラーレイヤーを追加する場合、
Blender3.3以前では **bpy.ops.mesh.vertex_color_add()** と記述し、
Blender3.4以降では **Mesh.data.vertex_colors.new()** と記述します

### Blender 3.3以前
```Python
import bpy

Mesh = bpy.context.view_layer.objects.active    # 選択されているメッシュを取得

# メッシュに頂点カラーレイヤーが無かったら追加する
if not Mesh.data.vertex_colors:
    bpy.ops.mesh.vertex_color_add()             # ★Blender3.3以前の頂点カラーレイヤー追加方法
```

### Blender 3.4以降
```Python
import bpy

Mesh = bpy.context.view_layer.objects.active    # 選択されているメッシュを取得

# メッシュに頂点カラーレイヤーが無かったら追加する
if not Mesh.data.vertex_colors:
    Mesh.data.vertex_colors.new()               # ★Blender3.4以降の頂点カラーレイヤー追加方法
```
Windowsのgitコマンドで(ssh-agentをサービス起動しているのに)毎回パスフレーズを聞かれる対策

## 一言で
「Windows内に ssh.exeが複数ある時は注意だ！」

## はじめに
「sshでサーバーに入るときはパスフレーズ覚えていてくれるのに、ssh経由でgit pushしようとすると毎回パスフレーズきかれて面倒……」というそこのあなた！

ネットで検索して、```.ssh/config```や sshの引数で```-i secret_key```をつけたけど全然効果がなかったそこのあなた！

もしかして鍵ファイルの形式が問題なのかと ecdsaや ed25519や、はたまた rsaに戻って鍵ファイルを作り直してはサーバー側に設定してもダメで困り果てたそこのあなた！


……全部わたしだ！！

というわけで、もしかしてこれで対処できるかもしれません

## 原因
　単純に、普段つかっている ssh.exeと、gitが呼び出している ssh.exeが別物かもしれません。ですので、フルパスで指定します。

```cmd.exe
git config --global core.sshCommand "C:\\Windows\\System32\\OpenSSH\\ssh.exe"
```
もしくは
```cmd.exe
git config --global core.sshCommand "C:\\Windows\\System32\\OpenSSH\\ssh.exe -i c:\\Users\\oreore\\.ssh\\id_ed25519 "
```
を試してみてください。

　実際にマシン内を探してみるとssh.exeが複数あり、opensshで入れたものではない ssh.exeが使われた結果、(OpenSSHの)ssh-agent daemon(service)を見に行かず、その結果毎回パスフレーズを聞かれるはめになっていました。

　```.git/config```は普通にsshアクセスになっていれば大丈夫で、こちらは何もしなくても大丈夫でした。
 
 ```.git/config
 [remote "origin"]
	url = ssh://host-or-host_alias/repos/project.git
	fetch = +refs/heads/*:refs/remotes/origin/*
```

## おわりに
　沼にハマるときって、どうしてこうもコロンブスの卵と言いましょうか、気づけば「なぁんだ」ということばかりなのでしょうねー？
Steamlitでブラウザ更新後もセッションIDを保持する

変更前`st.session_state`だとブラウザ更新の度にセッションIDが変わってしまうため`st.query_params`を使用してセッションIDを永続化

* 変更前
```python
import streamlit as st
import uuid

if "session_id" not in st.session_state:
    st.session_state.session_id = str(uuid.uuid4())

st.markdown(st.session_state.session_id)
```
* 変更後

```python
import streamlit as st
import uuid

if "session_id" in st.query_params:
    session_id = st.query_params.session_id
else:
    session_id = str(uuid.uuid4())
    st.query_params.session_id = session_id

st.markdown(st.query_params.session_id)
```

参考：[st.query_params](https://docs.streamlit.io/develop/api-reference/caching-and-state/st.query_params)
SQL CASE句の基本的な書き方と注意点

## はじめに

SQLの`CASE`句は、条件に応じて異なる値を返すための強力なツールです。例えば、ポイントプログラムのランクや、天気予報に基づくお勧めの服装など、様々な条件分岐で利用できます。

### 基本的な構文

```sql
SELECT
    CASE
    　 --(いつ)　　　　　　　　(その時に)
        WHEN 条件1 THEN 結果1
        WHEN 条件2 THEN 結果2
    --(それ以外)
        ELSE デフォルト結果
    END AS 列名
FROM テーブル名;
```

この構文では、条件が一致する場合にその結果を返し、どの条件にも一致しない場合には`ELSE`の後に指定したデフォルトの結果が返されます。

## 具体例1: ポイントプログラムのランク分け

たとえば、顧客の累計購入金額に応じて、顧客をランク分けする場合を考えてみましょう。

```sql
SELECT
    顧客名,
    累計購入金額,
----
    CASE
--------    
        WHEN 累計購入金額 >= 100000 THEN 'プラチナ'
        WHEN 累計購入金額 >= 50000 THEN 'ゴールド'
        WHEN 累計購入金額 >= 10000 THEN 'シルバー'
        ELSE 'ブロンズ'
    END AS 顧客ランク
FROM 顧客テーブル;
```

この例では、累計購入金額が100,000円以上の顧客を「プラチナ」ランク、50,000円以上の顧客を「ゴールド」ランク、10,000円以上の顧客を「シルバー」ランク、それ以外を「ブロンズ」ランクに分類しています。

## 具体例2: 天気予報に基づくお勧めの服装

天気予報に基づいて、その日の服装をお勧めする場合を考えます。

```sql
SELECT
    日付,
    天気,
    CASE
        WHEN 天気 = '晴れ' THEN 'Tシャツ'
        WHEN 天気 = '曇り' THEN '長袖シャツ'
        WHEN 天気 = '雨' THEN 'レインコート'
        ELSE 'ジャケット'
    END AS お勧めの服装
FROM 天気予報テーブル;
```

この例では、天気が「晴れ」の場合には「Tシャツ」、曇りの場合は「長袖シャツ」、雨の場合は「レインコート」、その他の場合は「ジャケット」をお勧めします。

#### 注意点

1. **ネストは避ける**  
   `CASE`句は他の`CASE`句内にネストして使うことが可能ですが、読みやすさを保つためには避けた方が良い場合があります。コードが複雑になりがちなので、できるだけ簡潔に書くようにしましょう。

2. **NULLの扱いに注意**  
   SQLでは`NULL`は特別な値として扱われます。例えば、`NULL`値を`CASE`句でチェックする場合には`IS NULL`を使いましょう。次の例では、天気が不明の場合には「情報なし」と表示します。

   ```sql
   SELECT
       日付,
       天気,
       CASE
           WHEN 天気 IS NULL THEN '情報なし'
           WHEN 天気 = '晴れ' THEN 'Tシャツ'
           ELSE 'ジャケット'
       END AS お勧めの服装
   FROM 天気予報テーブル;
   ```

3. **パフォーマンスへの影響**  
   大規模なデータセットに対して複雑な`CASE`句を使用すると、クエリのパフォーマンスに影響を与える可能性があります。条件を簡潔にし、必要に応じてインデックスを活用することで、パフォーマンスを改善できます。

4. **可読性の確保**  
   `CASE`句が長くなると、コードの可読性が低下する恐れがあります。条件を分かりやすく整理し、必要に応じてコメントを追加して、他の開発者が読みやすいコードを書くことを心がけましょう。

## まとめ

SQLの`CASE`句は、さまざまな条件に基づいてデータを分類したり、変換したりするための強力なツールです。この記事を通じて、`CASE`句の基本的な使い方と注意点を理解し、より柔軟で効率的なクエリを書くためのヒントを得ていただけたら幸いです。
Snowflakeの内部ステージ、完全に理解した

Snowflakeのステージは外部ステージしか使ったことがありません。

そんな状況でSnowPro Coreのための勉強で内部ステージについて調べていたら、内部ステージは以下3種類があると。
[公式ドキュメント：ローカルファイルに対する内部ステージの選択](https://docs.snowflake.com/ja/user-guide/data-load-local-file-system-create-stage)

+ user stage（ユーザーステージ）
+ table stage（テーブルステージ）
+ named stage（名前付きステージ）

ドキュメントを読んで触りながらまとめました。

# user stage（ユーザーステージ）
>各ユーザーには、デフォルトでファイルを保存するためのSnowflakeステージが割り当てられています。このステージは、ファイルが1人のユーザーのみによってアクセスされるが、複数のテーブルにコピーする必要がある場合に便利なオプションです。
>ユーザーステージには、次の特性と制限があります。
>・ユーザーステージは @~ を使用して参照されます。たとえば、 LIST @~ を使用して、ユーザーステージのファイルを一覧表示します。
>・名前付きステージとは異なり、ユーザーステージは変更またはドロップできません。
>・ユーザーステージは、ファイル形式オプションの設定をサポートしていません。代わりに、 COPY INTO <テーブル> コマンドの一部としてファイル形式とコピーオプションを指定する必要があります。

なるほど。やってみます。

```
list @~;	--listの部分はlsでも可
```

| name | size | md5 | last_modified |
|:-----------|:------------|:------------|:------------|
| worksheet_data/2ff67368-5339-46b3-9b9b-cf29f2650263 | 240 | bbfcac20153975136b379d304f686ec0 | Wed, 9 Nov 2022 09:23:59 GMT |
| worksheet_data/metadata |432      | 262df0fc198efaa3fb2413e253d23311 |Wed, 9 Nov 2022 09:24:03 GMT |

ワークシートのデータが入っているみたい。
でもワークシートの数だけあるわけではない。（実際ワークシートはいっぱいあるので。）

# table stage（テーブルステージ）
>各テーブルには、デフォルトでファイルを保存するためのSnowflakeステージが割り当てられています。このステージは、複数のユーザーがファイルにアクセスでき、単一のテーブルにコピーするだけでよい場合に便利なオプションです。
>テーブルステージには、次の特性と制限があります。
>・テーブルステージの名前はテーブルと同じです。たとえば、 mytable という名前のテーブルには、 @%mytable として参照されるステージがあります。
>・名前付きステージとは異なり、テーブルステージは変更またはドロップできません。
>・テーブルステージは、ロード中のデータの変換をサポートしません（つまり、クエリを COPY コマンドのソースとして使用）。

なるほど。やってみます。

```
list @%TEST_TABLE;	--listの部分はlsでも可
```

| name | size | md5 | last_modified |
|:-----------|:------------|:------------|:------------|

　クエリで結果が生成されませんでした

このテーブルステージにファイルをアップロードしたことがないので結果0件でOK。

# named stage（名前付きステージ）
>名前付きステージは、データのロードに最大限の柔軟性を提供するデータベースオブジェクトです。
>・ステージで適切な権限を持つユーザーは、任意のテーブルにデータをロードできます。
>・ステージはデータベースオブジェクトであるため、すべてのオブジェクトに適用されるセキュリティ/アクセスルールが適用されます。ステージを使用する権限は、ロールから付与または取り消すことができます。さらに、ステージの所有権は、別のロールに移譲することができます。

なるほど。やってみます。
Snowsightでステージを開くと「TEST_INTERNAL_STAGE」という内部ステージがありました。
多分1年くらい前に自分で作ったやつです。

```
list @TEST_INTERNAL_STAGE;	--listの部分はlsでも可
```

| name | size | md5 | last_modified |
|:-----------|:------------|:------------|:------------|
| test_internal_stage/test.csv | 32 | 65af850f5d11e29af7cece20dad1afba | Wed, 2 Aug 2023 01:31:38 GMT |

1年くらい前にアップロードしたcsvが出てきました。

# 感想
ドキュメントを読むだけじゃなくて自分で触ってみると完全に理解できます。

# 補足
SnowPro Core試験対策メモ。
ステージ参照の正解を選ばせる問題が来たら「show」じゃなくて「list」「ls」を選ぶべし。

```
show  @TEST_INTERNAL_STAGE;
```

:::note warn
SQLコンパイルエラー：
位置 6 の構文エラー行 1 、予期しない「@TEST_INTERNAL_STAGE」。
:::
Socket.ioのemitの動きを理解したい

:::note warn
ここではWebSocketの詳細な話はしません。下記の記事がわかりやすいのでWebSocketについて知りたい方は下の記事から🙇
:::

https://qiita.com/mt_tashi/items/9b90e39e0ecc1f2d532f

## Socket.ioとは？
WebSocketの実装を容易に行うことができるライブラリです。公式チュートリアルではJavaScriptを用いて説明されていますが、JavaやPythonなど、JavaScript以外にも実装可能みたいです。でも基本的にExpress.jsと一緒に動かすパターンが多いんじゃないかな？と個人的に思ってます。

## socket.emit()やsocket.to(room).emit()の動き
WebSocketを実装をしていてよく理解していなかったのが、この **`emit()`** の動きです。

https://socket.io/docs/v3/emitting-events/

この **`emit()`** というのがイベント発火のためのメソッドで、クライアントからサーバーへの送信は言わずもがな、**サーバーからクライアントへの送信もできるというところ** がHTTPとの大きな違いでもあると思います。

自分はこの **`emit()`** を以下のように認識していました。

```javascript
// サーバーと接続しているクライアント全てにsend_messageイベントを発火
socket.emit('send_message', msg)
// JOINしているユーザー全てにイベントを発火
socket.to(roomId).emit('send_message', msg)
```

どちらも **誤認識** でした。

## 前提
socket.ioでは、接続した全てのユーザーに対して **一意の `socketId`** が割り振られます。この socketId を利用してイベントを発火させたりします。

### socket.emit('event_name')
`socket.emit('event_name')` は、サーバーとWebSocketを通じて接続している全てのユーザーではなく、**`socket` のオブジェクトに含まれているsocketIdに対してのみ** イベントを発火するみたいです。つまりこれは一人のユーザーにしか発火しません。

```javascript
io.on('connection', (socket) => {
  // このsocketは接続した一人のユーザー
  socket.on('receive_chat_message', msg => {
    // だからemitするのも、リクエストをしてきたユーザーに対してイベントを発火させている
    socket.emit('send_messsage', msg);
  });
})
```

なので、ここの **`socket.emit()`** は、**リクエストをしてきたユーザーに対してのみイベントを発火させるもの** 。


### socket.to(room).emit('event_name')
じゃあどうやって他のユーザーに対してイベントを発火させるの？チャットアプリとか開発する時に、送信した内容が自分にしか返ってこないなら意味ないじゃないか！

それがsocket.ioの **`room`** 機能になります。

```javascript
io.on('connection', (socket) => {
  socket.on('room_join_request', () => {
    const roomId = "hoge";
    // "hoge"というroomにjoinする
    socket.join(roomId);
    // "hoge"というroomにjoinしている'このsocketのユーザー以外の'ユーザーにのみイベントを発火する
    socket.to(roomId).emit('send_message', 'User joined "hoge" room!!');
  })
})
```

上記のコードでは、"hoge"というroomIdを用意し、`room_join_request`のイベントをemitしてきたユーザーを"hoge"にjoinさせ、最終的に"hoge"に所属しているroomのユーザー全てに対して"新しいユーザーが入室したことを伝える"イベントを発火させています

この時注意することは、`socket.to(roomId).emit(...)` はそのroomに所属している全てのユーザーに対してイベントを発火させるのではなく、**`socket`オブジェクトのユーザー以外のroomに所属しているユーザー** に対してのみイベントを発火させるのです。

つまり、上記のコードで言う
```javascript
socket.to(roomId).emit('send_message', 'User joined "hoge" room!!');
```
の部分は、`socket`以外の"hoge"に所属しているユーザーに送信しているということです。
ここが個人的に引っかかった部分でありました。

`socket.to(roomId)` と記述しているくらいだから、そのroomに所属している全てのユーザーに対して行うと思いませんか？でも実際は異なって、正確に説明（合っているか分からないが）すると、

**ある `room` に対して、`socket` オブジェクトにある `socketId`以外の、 `room` に属している全ての`socketId` に対してイベントを発火させる**

ということになるはずです。

## 最後に
WebSocket然りsocket.ioについてまだ理解に甘々な部分が多々あると思うので、引き続き勉強していきたいと思います。
（おおよそ）作成順にソートできるGUID（.NET 9）

## 参考
この記事は、以下の動画を参考にしています。
詳しくは、動画をご覧ください。

https://youtu.be/nJ1ppFayHOk?si=l9BKgbg5kYB9ClQy

リファレンス

https://learn.microsoft.com/en-us/dotnet/api/system.guid.createversion7?view=net-9.0

以下のサイトも参考にしています。

https://ja.wikipedia.org/wiki/UUID

https://uuid.ramsey.dev/en/stable/rfc4122/version7.html

## UUID Version 7

.NET 9で追加される`Guid.CreateVersion7`メソッドを使って`Guid`を作ると、ミリ秒単位の時間を含む、UUID Version 7の値が作られる。

- `Guid.NewGuid`メソッドなどで作る`Guid`（UUID Version 4）の値は、ほぼ完全に**ランダム**である
- `Guid.CreateVersion7`メソッドで作る`Guid`（UUID Version 7）は、ランダムであるものの、時間を含んでいるため、（1ミリ秒以上の間隔があいていれば）作成順に**単調増加**する

UUID Version 4の値は、そのランダムさゆえに、データベースのプライマリーキーとして使うのは、パフォーマンスの点から好ましくない。

おおよそ単調増加するUUID Version 7の値なら、プライマリーキーとしてを使っても問題がない。
Prettier導入手順

## アジェンダ
Prettierを導入し、適用する手順を以下にまとめました。
これにより、コードフォーマットを統一し、コーディングスタイルを維持することができます。

## Prettierの導入手順

### 1. プロジェクトのルートディレクトリで、Prettierをインストール

まず、Prettierをインストールします。プロジェクトのルートディレクトリで以下のコマンドを実行してください。

```sh
npm i -D prettier
```

### 2. スクリプトをpackage.json に追加
package.json ファイルにPrettierを実行するスクリプトを追加します。

```json
{
  "scripts": {
    "format": "prettier --write ."
  }
}
```
これにより、npm run format コマンドでプロジェクト全体のコードをフォーマットできるようになります。

### 3. Prettierの設定ファイルを作成

プロジェクトのルートディレクトリに `.prettierrc` というファイルを作成し、以下の内容を追加します。

```json
{
  "bracketSpacing": true,
  "semi": true,
  "singleQuote": true,
  "useTabs": false
}
```

この設定は以下を意味します：
- `bracketSpacing: true`: オブジェクトリテラルの括弧内にスペースを入れる (`{ foo: bar }`)。
- `semi: true`: ステートメントの最後にセミコロンを付ける。
- `singleQuote: true`: 文字列リテラルにシングルクォートを使用する。
- `useTabs: false`: インデントにタブではなくスペースを使用する。

### 4. `.prettierignore` ファイルを作成

プロジェクトのルートディレクトリに `.prettierignore` というファイルを作成し、フォーマットの対象外にしたいファイルやディレクトリを指定します。例えば、以下のように設定します。

```plaintext
node_modules
build
dist
```

### 5. フォーマットの実行

設定が完了したら、プロジェクトのルートディレクトリで以下のコマンドを実行することで、npm run format を使ってプロジェクト全体のコードをフォーマットできます

```sh
npm run format
```

### オプション: エディタの設定

VSCodeなどのエディタを使用している場合、保存時に自動でPrettierが実行されるように設定できます。`settings.json` ファイルに以下を追加します。

```json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
```

## まとめ

これで、Prettierを導入し、指定された設定をプロジェクトに適用することができます。エディタの設定を行うことで、保存時に自動的にコードがフォーマットされるため、コーディングの効率が向上します。

## 参考
- [Prettierの導入方法 - フロントエンド開発で必須のコード整形ツール - ICS MEDIA](https://ics.media/entry/17030/)
- [Prettier でソースコードを整形する|【React/Redux】カンバンボードを実装して Web フロントエンド上級者を目指そう！|Techpit](https://www.techpit.jp/courses/99/curriculums/102/sections/766/parts/2679)
- [Next.jsにPrettierを導入して設定する](https://zenn.dev/shimakaze_soft/articles/57642e22124968)
- [【VSCode】Prettierの使い方＆おすすめ設定を紹介｜北海道札幌市のホームページ・Web制作・システム開発会社｜株式会社マーベリックス](https://ma-vericks.com/blog/vscode-prettier/)
SSD1306の記事の紹介(テキスト、点、線、長方形、円、三角形、全体反転)


x ふるいので読みかえが必要。　だいたい、合っている。


●インストール


Adafruit_SSD1306.hの編集は、いらない


ただし、setup(　の直上のSCREEN_ADDRESSの変更とSCREEN_HEIGHTの確認は、いる


```c++


#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 64 // OLED display height, in pixels
#define OLED_RESET     -1 // Reset pin # (or -1 if sharing Arduino reset pin)
#define SCREEN_ADDRESS 0x3C ///< See datasheet for Address; 0x3D for 128x64, 0x3C for 128x32
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);


```


https://qiita.com/jakalada/items/8f83d07291d984a31633



●テキスト、点、線、長方形、円、三角形、全体反転のしかたが書いてある。


https://qiita.com/jakalada/items/793a6cf5ff2796db4e86
Discordで朝起きたら勝手にいろんなサーバーに参加させられているメン爆の対処方法！

こんにちは、りょうです。
今回はメン爆と呼ばれるものについての解説です。
ではれっつごー👍

## メン爆とは
簡単に言うとBOT認証をした時に記録した情報を使って他のサーバーに参加させてメンバーを増やす行為のことをいいます。
突然入った覚えのないサーバーがリストにたくさん出てくる。これがメン爆です。
これをやられてしまうと短時間に大量のサーバーに参加しているスパムやBOTだという判定を受けて最悪アカウントが停止することもあるやばいやつです。

最近よく使われているメン爆BOTです↓

**ベッドロック** `ベッドロック#5023`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818367/7c7b078d-d975-37ab-3455-4af0a35798d9.png)

勝手に参加させられたときの様子

![Screenshot_20240820-075243.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818367/a26f2e8e-565a-b5d6-c9d0-8712ae1d6675.png)

## 勝手に参加させられるまでの経緯
まずBOT認証(webページに飛ぶタイプのやつですね)をやります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818367/44210ccf-bbaf-eec6-3f09-baeb7f808174.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818367/44e467cc-f706-5635-a4ea-3250772e4292.png)

このときにアクセストークン(Oauth2Token)とよばれるものが記録されます。
(ちょっとここは知識が曖昧なので間違ってたらごめんなさい)
これを使って勝手にサーバーに参加させられているわけです。

:::note warn
これはユーザーTokenとは別物なのでアカウントが乗っ取られているわけではありません。
安心してください
:::
気になる人はソースコードが公開されてるので自分で見てください

https://github.com/taka-4602/Discord-Backup-Bot
## 対策
これによってサーバーに参加させられることを防ぐことはできます。
まず、認証後すぐにユーザー設定に移動します。
そこから**連携済アプリケーション**という項目に移動して先ほど認証を行ったBOTの認証解除をするだけです。
これによって勝手に参加させられることはなくなります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818367/1225e099-d294-5e2d-3f3c-2457b6decbb9.png)

また、安全だとわかっているBOT以外ではここを見て、リダイレクトするタイプの認証はしないようにすることも対策になります。
IPアドレスを抜かれたり今回のようにメン爆として利用されることが多いです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818367/d7bd75b3-ee78-4734-c947-99189fcbe489.png)

## 追記
現在は、ユーザーからの要望があったからかBOTによってサーバーに追加された際に公式からこのようにメッセージが来るので、それに従って認証の取り消しを行うようにしてもらえれば問題ないと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3818367/287cab1d-883a-ff73-e033-d45829b1f318.png)

## まとめ
今回はやられたら厄介なメン爆BOTの対処方法についての解説でした。
昨日被害にあって困っている人からDMを貰ったので書きました。
参考になると幸いです。

わからないことあったら書いてくれれば答えていきます。

**Discordにいる荒らしの情報や対策方法の共有をしている自鯖です**
ぜひ参加お願いします↓↓↓↓

https://discord.gg/ESRGwGQhxc
【fastlaneエラー解消】[!] Your current version () does not respect the format A or A.B or A.B.C 

## 解決方法
#### info.plistにCFBundleShortVersionStringとCFBundleVersionを追加する｡



#### info.plistをコードで開く
![スクリーンショット 2024-08-20 8.56.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883687/0028dac4-fee5-643b-a1f3-0f6c640e5257.png)

<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883687/7ca7d928-ddc8-ae2a-c2d4-2bfb7898de9c.png">


#### CFBundleShortVersionStringとCFBundleVersionを追加
```
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<!--ここから追加-->
    <key>CFBundleShortVersionString</key>
    <string>1.0.0</string>
    <key>CFBundleVersion</key>
    <string>1</string>
<!--ここまで追加-->
    <key>UIApplicationSceneManifest</key>
    <dict>
        <key>UIApplicationSupportsMultipleScenes</key>
        <false/>
        <key>UISceneConfigurations</key>
        <dict>
            <key>UIWindowSceneSessionRoleApplication</key>
            <array>
                <dict>
                    <key>UISceneConfigurationName</key>
                    <string>Default Configuration</string>
                    <key>UISceneDelegateClassName</key>
                    <string>$(PRODUCT_MODULE_NAME).SceneDelegate</string>
                </dict>
            </array>
        </dict>
    </dict>
</dict>
</plist>
```
これでタイトルのエラー解消できました｡



### 1. **`CFBundleShortVersionString`**
   - **値**: `1.0.0`
   - **説明**: これは、アプリのマーケティングバージョン、つまり一般ユーザーに公開されるバージョン番号です。ユーザーがApp Storeで見るバージョン番号で、通常「1.0.0」形式で表現されます。この値は、アプリの機能やリリースを示すものとして使われます。

https://developer.apple.com/documentation/bundleresources/information_property_list/cfbundleshortversionstring



### 2. **`CFBundleVersion`**
   - **値**: `1`
   - **説明**: これは、アプリのビルド番号を表します。`CFBundleVersion`は、アプリの内部バージョン管理に使われるもので、通常は開発者やビルドシステムが使用します。毎回のビルドでインクリメントされることが一般的です。この番号は、同じマーケティングバージョンでも複数のビルドが存在する場合に、ビルドごとに異なるものとして管理されます。

https://developer.apple.com/documentation/bundleresources/information_property_list/cfbundleversion
OACワークブックでデータのエクスポートを禁止する

# はじめに
OAC（**Oracle Analytics Cloud**）で作成したビジュアライゼーションは、ファイルにエクスポートすることができます。
CSV等にエクスポートしたデータを、別のツールでさらに加工することが可能です。

とはいえ、場合によってはデータのエクスポートを許可したくないケースもあるかと思います。
そこで、エクスポートを禁止する方法を紹介します。

# サンプルワークブックでデフォルトの動きを確認
このサンプルを使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/1d9e9321-668f-5f87-ee73-13e06503ebae.png)

右上のツールバーを見ると、「エクスポート」アイコンがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/2b50562b-a075-a180-7caa-f35c7d8fa28c.png)

ビジュアライゼーションを右クリックしてみると、やはり「エクスポート」メニューが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/686e67df-9aa2-4eaf-77d6-1c5061edb483.png)

# エクスポートを禁止する
「表示」に移動します。
ツールバーの「エクスポート」チェックボックスをオフにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/44ff2aa7-82a0-6e77-e021-6d135978286c.png)

これで、ワークブックの右上に表示されていた「エクスポート」アイコンが表示されなくなります。

次に、左ペインを下の方までスクロールして、ビジュアライゼーション・メニューの「エクスポート」もオフにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/e4435622-fd68-6010-72bb-5156bf72a41f.png)

これで、ビジュアライゼーションを直接右クリックしても、メニューから「エクスポート」は表示されなくなります。

# 確認する
ワークブックを上書き保存してから、あらためてビューモードで開いてみます。
先程は表示されていた「エクスポート」アイコンが表示されなくなりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/6952e304-f18f-79e3-c4b0-4e8f7039838a.png)

ワークブック内のビジュアライゼーションを直接右クリックします。
こちらのメニューからも「エクスポート」は消えました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342206/91eba9ca-7859-067e-5a8e-6805e28c6ae9.png)

# システム全体でエクスポートを禁止する
ワークブック単位でエクスポートを禁止するのではなく、特定のユーザー（アプリケーションロール）に対してエクスポートを禁止したい場合は、こちらの記事を参考にしてください。
- [Oracle Analytics Cloud：カスタムのアプリケーションロールに権限を設定する](https://qiita.com/tyo38/items/5cd5bc13c21d2b037287)

公式ドキュメントにも設定例が記載されています。

- [BI Consumerロールを持つユーザーがワークブックを PDF にエクスポートできないようにする](https://docs.oracle.com/en/cloud/paas/analytics-cloud/acabi/configure-what-users-can-see-and-do.html#GUID-5389085A-04C7-47CD-9C4C-E0176E7E114F)
【fastlaneエラー解消】Exception caught. *** -[__NSArrayM insertObject:atIndex:]: object cannot be nil (-1010) [Application Loader Error Output]: The call to the altool completed with a non-zero exit status: 1. This indicates a failure.


Error uploading ipa file: [Application Loader Error Output]: Exception caught. *** -[__NSArrayM insertObject:atIndex:]: object cannot be nil (-1010) [Application Loader Error Output]: The call to the altool completed with a non-zero exit status: 1. This indicates a failure.
エラー解消
## 解決方法
私の場合は間違ったバージョン番号が使用されたことが原因でした｡

```
default_platform(:ios)

platform :ios do
  desc "Releaseビルド"
  lane :release_build do
    increment_build_number(xcodeproj: "TEST.xcodeproj")
    increment_version_number(bump_type: "patch")
    
    # アクションの呼び出し
    build_ios_app(
      project: "TEST.xcodeproj",
      scheme: "TEST",
      configuration: "Release",  # リリースビルドを指定
      clean: true,
      output_directory: "build",
      output_name: "myapp_release.ipa"
    )
  end
  
  desc "リリース"
  lane :release do
    increment_version_number(bump_type: "patch")
    # ここのインクリメントが原因
    
    build_app(scheme: "TEST")
    upload_to_app_store(
      username: ENV["FASTLANE_USER"],
      ipa: "./build/myapp_debug.ipa",
      skip_screenshots: true,
      skip_metadata: true,
      force: true
    )
    
    slack(
      message: "Successfully uploaded a new App Store build",
      slack_url: ENV["SLACK_WEBHOOK_URL"]
    )
  end
end





```


```
  desc "リリース"
  lane :release do
  
    increment_version_number(bump_type: "patch")
```
上記のリリース時に実行されるincrement_version_numberが原因で
ビルドしたときバーション番号と､リリース時にアップロードされるバージョン番号が異なっているためタイトルのエラーとなっていました｡

### 修正
```
  desc "リリース"
  lane :release do
    
    build_app(scheme: "TEST")
    upload_to_app_store(
        username: ENV["FASTLANE_USER"],
        ipa: "./build/myapp_debug.ipa",
        skip_screenshots: true,
        skip_metadata: true,
        force: true,
      )
    slack(
      message: "Successfully uploaded a new App Store build",
      slack_url: ENV["SLACK_WEBHOOK_URL"]
    )
  end
```
increment_version_number削除して実行､AppStoreにアップロードできました｡

![スクリーンショット 2024-08-17 23.39.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883687/25f22f75-a972-411a-fb37-6cb0afa4881a.png)

## 参考

https://github.com/fastlane/fastlane/issues/21462
令和6年度春期 ネスぺ体験記

# はじめに
令和6年度春期のネットワークスペシャリスト試験を受験して無事合格しました。
その体験談をここに記録しておこうと思います。

# 今までやってきたこと
- 高校1年の秋にITパスポート試験を受験 → **合格**
- 高校2年〜3年の間に基本情報技術者試験を3度受験 → **3度目でようやく合格**
- 大学1年の秋に応用情報技術者試験を受験 → **合格**
- 大学2年後期からCCNAの勉強を開始 → **ネットワークに関する知識をつけ始める**

# ネスぺを受験した動機
「応用情報まで取ったし、どうせなら高度試験まで揃えてみたいな...」と思い、興味のあるネットワーク分野なら勉強もなんとかできるのでは？と結論づけて挑戦し始めました。
これが地獄の始まりでした。

# 勉強期間と詳細
### 午前1試験
応用情報合格による**午前1免除**がギリギリ生きていたため勉強はしてません。
(助かった！)

### 午前2試験
試験日の8ヶ月前(夏休みくらい？)あたりから**午前2の教本**と、[過去問道場](https://www.nw-siken.com/nwkakomon.php)をちょこちょこやり始めました。
ちょうどCCNAの内容もやり始めた時期だったため、知識がどんどん入ってくる期間でもあり楽しかったです。

**良かったのはここまでです。**

### 午後1・2試験
やろうやろうと後回しにして気付けば年末になり、本腰を入れたのは1月あたまからでした。
午前2と同様に参考書も多数ありますが、**午前2教本の付録でついてきた過去問と解説のPDF**を印刷して勉強しました。

#### これが何より分量の多いこと！！！
午後1は**4〜5ページ**、午後2に至っては**8〜10ページ**もの問題文を読む必要があります！
2周目以降も含めると**午後1の過去問は約12年分**、**午後2の過去問は約10年分**を解きました。

# 試験当日
## 午前試験
令和6年4月21日、とうとう決戦の日です。
午前1免除を申請していたため、10:50から試験が開始しました。午前1から受けると9:30から開始なので、免除していて本当に良かったです。

部屋にはおそらく実務経験を積んだ社会人が大半だったと思います。
やはり高度試験、万全に準備した午前2試験ですら緊張しました...。
午前2に関しては過去問で見た顔が多数出題され、解くうちに不安もなくなり途中退室できました！

## 午後試験
**昼休憩を挟み、いよいよ午後試験です。**

**午後1**では3問中2問を選択して90分で解くのですが、
- **問1: コンテンツ配信ネットワーク**
- **問2: SD-WANによる拠点接続**
- **問3: プロキシサーバおよび負荷分散**
に関する内容で、問1と問2を選択しました。
手応えは五分五分で、続いて午後2に挑みます。
(この時点でもうヘトヘトで、頭が若干痛み出しました)

**午後2**では2問中1問を選択して120分で解くのですが、
- **問1: VXLAN**
- **問2: 電子メールセキュリティとDNS**
に関する内容でした。
『VXLAN！？！？』となりましたが、電子メール関連はもっと不安要素が多かったため、玉砕覚悟で問1を選びました。
(結果的に問2は問題不備があったようですが、SNSで賛否両論のため選ばなくて良かったなと...)

# 結果
**無事合格しました！！！！！**
![スクリーンショット 2024-08-19 21.23.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3042693/b1975f2b-f422-fff1-41fe-7c9f5ff866d0.png)
不安だった午後1はなんと70点！自己採点を大幅に超えてきました。
比較的新しい技術`VXLAN`が題材の問1を選んだ午後2は、なんとか60点を超えておりました。

応用情報に引き続き一発で合格できたことはとても嬉しいです！

# おわりに
午後問題対策を鬼のように進めた2〜4月がかなりしんどかったですが、勉強の過程で知識を深められたこと、合格したことによりその知識に箔がついたことが何より誇りです。

またこれからネスぺや高度情報試験にチャレンジする方は、午前1免除を活用すると楽に試験を進められますので、ぜひ**応用情報の合格**や**高度試験の午前1の合格**も戦略としていただければと思います！気持ちの余裕からなにまで本当に変わります！！
恐怖！Google Chromeのデベロッパーツール日本語化の罠

# はじめに

こんにちは。
皆さん、Google Chrome（以下Chrome）の「デベロッパーツール」をご存じ……なのはある程度経験のあるエンジニアあれば当たり前ですよね。
エンジニアにとって最早身体の一部と言っても間違いないであろうデベロッパーツールですが、
数年前から日本語を含む多くの言語で利用できるようになったのはご存じでしょうか。

:::note info
調べた範囲だと、約3年前から実装されたそうです（2021年）
:::

# 実装方法

簡単に変更の方法も説明しておきます。

1. Chromeのデベロッパーツールを開き、ツールの右上にある「歯車マーク」を選択して設定画面に飛びます（ツールのレイアウトには幾つか種類があるかと思いますが、どのレイアウトにおいても歯車マークは右上にあります）
2. 設定画面に切り替わりましたら（Settingsと大きく文字が表示されているので分かるかと思います）、一番最初に選択されているであろう「Preferences」タブの中にある「Language」のドロップダウンリストから「Japanese - 日本語」を選択します
3. 選択すると「Requires reload（再起動してください）」とメッセージが表示されるのでデベロッパーツールを再起動します（この際に設定画面を閉じると、デベロッパーツールの上部に設定が更新されたので、有効にするために再読み込みのボタンが表示されます。親切ですね！）
4. 今まで英語だった項目が日本語に変更されて設定完了です！

日本語化されて各タブはもちろんのこと、タブの中の項目も分かり易くなったかと思います。

:::note warn
元の設定のままのが英語に慣れる、という考えもあるのでそこはお好みで
:::

# そして罠にハマる

さて、私はこの日本語化対応が実装されてからこれまでずっと日本語で仕事をしていたのですが、先日ある罠にハマったのです。

私「Chromeで画面のスクリーンショットを撮りたいなぁ。確かデベロッパーツール上で可能だったはず！」

Google先生「Windowsでスクリーンショットを撮るならデベロッパーツールを開いた状態でCtrl + Shift + Pを入力して、その後にfullと入力するとできますよ」

私「よっしゃ！　………………あれ、できないが！？」

何度も試してみましたがスクリーンショットが撮れず、再度調べ直してもどこも同じ方法しか載せていない。
以前にもスクリーンショットは試したことがあり、その際は普通にできた記憶もあるので色々と混乱してしまいました。
そして悩んだ結果、とある推測に辿り着きます。

**以前（日本語化前）はできた。ということは……。**

そう、デベロッパーツールを日本語化したということは、つまり**コマンドの指示も日本語で入力してあげる**必要があったのです。
上記でも記載した「Ctrl + Shift + P」でコマンドを起動し、その後「スクリーンショット」と入力してあげると……。

サジェストに「スクリーンショット」の一覧が表示されました！　やった～！
今表示している画面、ページ全体、どれも問題なくスクリーンショットを保存できました！

# まとめ

Chromeのデベロッパーツールの日本語化対応は分かり易くて便利ですが、
コマンドなども全て日本語で指示をしてあげないといけない、というのは盲点でした。
肝心のプログラミング言語は変わらず英語なので今回の場合も英語のままでも大丈夫だと過信してしまいました。
指示する単語の日本語訳を一々調べるのも手間がかかるので、一長一短とはまさにこのことだと感じる出来事でした。
Vue.jsの環境構築

## はじめに
私が行った環境構築の方法をまとめました。
こちらの記事を参考にしています。
[Vue.js環境構築](https://qiita.com/yamayuri/items/06595bd6e0badaf33317)

## 環境構築の方法
### 1. Node.jsをインストールする
1. まず、Node.jsをインストールするために[公式サイト](https://nodejs.org/en/)にアクセスして、インストーラーをダウンロードします。
![スクリーンショット 2024-08-19 9.37.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3855936/eaca7db8-dfd3-2932-f2c5-04d0cbc1e668.png)
2. 次に、ダウンロードしたファイルをダブルクリックして開きます。
「続ける」や「同意する」を選択していくと、「インストール」が出てくるので、選択してインストールします。
下記の画面になったらインストール完了です。閉じるを選択します。
![スクリーンショット 2024-08-19 9.41.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3855936/b631a6c4-7116-93aa-59f2-f2abbceb4e39.png)
3. 次に、Node.jsがインストールされているか確認します。
```
node -v
```
とコマンドを叩くと
```
v18.17.0
```
とバージョンが表示されます。
バージョンの確認ができればOKです。

### 2. Vueファイルを作成する
1. 以下のコマンドを叩いてVueファイルを作成します
```
npm create vue@latest
```
いくつか質問されるので、それぞれ答えていきます。
`Ok to proceed? (y)`：作成を進めて良ければ`y`とコマンドを叩きます。
`Project name`：プロジェクトネーム（ファイルの名前）を指定します。
`Add TypeScript?`：TypeScriptを追加しますか？今回はYesにしました。
`Add JSX Support?`：JSXを追加しますか？今回はYesにしました。
`Add Vue Router for Single Page Application development?`：
SPA開発用にVueRouterを追加しますか？今回はYesにしました。
VueRouterとはSPA構築を行うためのプラグインです。
SPAを構築すると、別のページに移動する際に、ページ全体ではなくページ間で共通でない部分だけ読み込まれるようになり、ページの移動をスムーズにすることができます。
`Add Pinia for state management?`：
状態管理用にPinia追加しますか？今回はNoにしました。
PiniaとはVue.jsの状態管理のためのライブラリで、アプリのデータ管理を簡単にしてくれるものです。
今回作成するものはデータを多く扱うことがないので、Noにしました。
`Add Vitest for Unit Testing?`：
単体テストにVitestを追加しますか?今回はNoにしました。
Vitestとはテスト環境の設定を簡単にできるようにするものです。
今回はテスト環境を用意することはないと思うので、Noにしました。
`Add an End-to-End Testing Solution?`：
エンドツーエンドのテストソリューションを追加しますか?今回はNoにしました。
エンドツーエンドのテストソリューションとは、ページの機能や実際のネットワークリクエストを本番の環境と同じように構築された環境でテストすることだと思うのですが、今回はテストしないと思うので、Noにしました。
私も曖昧なので詳しく知りたい方はこちらの記事を参考にしてみてください。
[Vue公式ページ]()
`Add ESLint for code quality?`：
コード品質のために ESLint を追加しますか?今回はNoにしました。
EslintはJavaScriptやTypeScriptなどの静的解析ツールで、コーディングのルールを決められるものです。
複数人でコードを書くときなどに役立つみたいなのですが、今回は1人なのでNoにしました。
`Add Vue DevTools 7 extension for debugging? (experimental)`：
デバッグ用にVue DevTools 7拡張機能を追加しますか?今回はYesにしました。
Vue DevToolsはVue.jsの開発をサポートする Chromeの拡張機能で、consoleを開かなくてもコードのエラーやバグを見つけて修正することができます。
![スクリーンショット 2024-08-20 9.01.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3855936/f41e1fef-a907-51f3-2832-7b93035f319d.png)
2. 全ての選択が終わったら、`Project name`で設定した名前（今回はvue-todolist）のフォルダが追加されてるので確認してみてください。

### 3. npmをインストールする
1. 先程追加したフォルダに以下のコマンドを叩いて移動します。
```
cd フォルダ名
```
2.次に以下のコマンドを叩いてnpmをインストールします。
```
npm install
```
3.次にnpmがインストールされてるから確認します。
```
npm -v
```
とコマンドを叩くと
```
10.8.1
```
とバージョンが表示されます。
バージョンの確認ができればOKです。

### 4. ローカルサーバーを起動する
1. ターミナルで
```
npm run dev
```
とコマンドを叩くと、以下のようにターミナルに表示されます。

このhttp://localhost:5173/ がローカルサーバーにアクセスできるURLです。
ローカルサーバーにアクセスして以下の画面が表示されれば環境構築完了です。
![スクリーンショット 2024-08-19 9.27.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3855936/4b9af276-a7ef-7b71-50a8-cd5baca412b6.png)
【javascript】/初心者から見た様々なメソッドとその違い

## for()文
ループ処理をする構文で、どこまでループするのかなど終了条件など設定できる
（メソッドではないがよく使うため覚えておく）

for (制御変数; 条件式; 増減式){
    処理内容
}

```js:index.js
const array = [1,2,3,4,5];
let sum = 0;
// 変数sum(合計値)を0で初期化しておく
// 1-2
for (let i = 1; i <= array.length; i++){
    // 制御変数　forループを使用して変数iを１からはじめ、
    // 条件式　iがarray.length(配列の要素数)よりも小さいか等しい時、ループを繰り返す
    // 何が繰り返し処理されるか▶️sum + i;が。
    // 増減式　制御変数の初期値を増やす（↙️1ずつ増えた数を足す）
    sum = sum + i;
    // iの初期値は1で、array.length(配列の要素数)は5なので、iは1から5までの値を取る
    // ループ1回目 sum = 0 + 1 (1)
    // ループ2回目 sum = (1) + 2 (3)
    // ループ3回目 sum = (3) + 3 (6)
    // ループ4回目 sum = (6) + 4 (10)
    // ループ5回目 sum = (10) + 5 (15)
}
console.log(sum);
//15
```
ここでの変数iは（*）配列のインデックスではなく単に数値であるため（sum=0に１ずつ足しているだけ）、配列の中身が何であろうと`console.log(sum);`には15が表示される。

(*)配列のインデックス
...配列内の各要素の位置を示す番号。通常０から始まる。（０、１、２...）
array = [1, 2, 3, 4, 5]の場合、array[0]は１になる

## forEachメソッド
配列の各要素を最初から最後まで1つずつ取り出す
```js:index.js
// 1-3
const array = [1,2,3,4,5];
let sum = 0;
array.forEach(function(value){
    // valueという引数に配列の各要素を渡しておく
   sum = sum + value;
   // sumにvalueの値を順番に加える
});
console.log(sum);
//15
```
## mapメソッド
配列の各要素を最初から最後まで1つずつ取り出し、新しい配列として返す
```js:index.js
const mapArray = [1,2,3,4,5];
// 元の配列
const newArray = [];
// 新しい配列
const nextArray = mapArray.map(function(value){
// mapArrayの各要素がvalueとして渡され、
    return value * 2;
    // valueに入っているmapArrayの各要素に対して*2をした結果を返す
    // mapメソッドがreturnで返ってきた値を受け取り、それらで新しい配列を作る(nextArray)
});
console.log(nextArray);
//[2, 4, 6, 8, 10]
```

## filterメソッド
要素にフィルターをかけて、条件に一致した値を全て返す
```js:index.js
const filterArray1 = [1,2,3,4,5];
const newfilterArr1 = [];
const newfilterArr2 = filterArray1.filter(function(number){
    // fillterメソッドで、条件に一致した値を全て返す
    return number > 2;
    // 条件
});
console.log(newfilterArr2);
//[3, 4, 5]
```

## findメソッド
条件に一致した値の中の最初に当てはまった値のみ返す
```js:index.js
const findArray = [1,2,3,4,5];
const newfindArr = findArray.find(function(number){
    return number > 2;
});
console.log(newfindArr);
//3
// findメソッドでは1つしか値を取得できない（条件に合った中の、最初の値）
```
### 実践的な考え方
#### ①JavaScriptで動的に生成するもの
・初めからHTMLには書かず、JavaScriptで条件に一致した商品だけをHTMLに追加したりする
　→mapメソッド、findメソッドなど

#### ②既存のHTMLリストを操作
 ・事前にHTMLを作成しておき、JavaScriptでそのリストから条件に合った要素を操作する方法
 　→queryselector（要素取得）,filterメソッドなど
[Godot 4.2] AnimationNodeStateMachinePlayback.travel() では condition や expression が無視される

表題の通りです。悲しい。

AnimationNodeStateMachineTransition.advance_mode の説明を見るとわかりやすいです。
> Determines whether the transition should disabled, enabled when using AnimationNodeStateMachinePlayback.travel, or traversed automatically if the advance_condition and advance_expression checks are true (if assigned).

「travel を使うときに有効にするか、 advance_condition と advance_expression が true の場合に自動的に遷移させるか」だそうです。
travel を呼んだときに condition と expression を評価するとは書かれてないしそういう雰囲気でもありません。悲しい。

# 参考文献
[AnimationNodeStateMachinePlayback — Godot Engine (4.2) documentation in English](https://docs.godotengine.org/en/4.2/classes/class_animationnodestatemachineplayback.html#)
[AnimationNodeStateMachineTransition — Godot Engine (4.2) documentation in English](https://docs.godotengine.org/en/4.2/classes/class_animationnodestatemachinetransition.html#class-animationnodestatemachinetransition)
2024年のベストAIチャットボット比較：最適なツールを見つけよう

## 目次

1. [はじめに](#1-はじめに)
2. [ChatGPT: 汎用性に優れたAIチャットボット](#2-chatgpt-汎用性に優れたaiチャットボット)
3. [Microsoft Copilot: ChatGPTに次ぐ有力な代替ツール](#3-microsoft-copilot-chatgptに次ぐ有力な代替ツール)
4. [Claude: 人間らしい対話に特化](#4-claude-人間らしい対話に特化)
5. [Perplexity.ai: 検索機能に特化したAIチャットボット](#5-perplexityai-検索機能に特化したaiチャットボット)
6. [Jasper: ビジネスとマーケティング向けの特化型チャットボット](#6-jasper-ビジネスとマーケティング向けの特化型チャットボット)
7. [その他の注目すべきAIチャットボット](#7-その他の注目すべきaiチャットボット)
8. [AIチャットボットを選ぶ際のポイント](#8-aiチャットボットを選ぶ際のポイント)
9. [まとめ](#9-まとめ)

## 1. はじめに

AIチャットボットはここ数年で大きく進化し、特にChatGPTの登場以降、その多機能性と精度が話題となっています。この記事では、2024年に利用できる主要なAIチャットボットの特徴を比較します。この比較を通じて、最適なツールを見つけるための参考になれば幸いです。

## 2. ChatGPT: 汎用性に優れたAIチャットボット

### 概要

OpenAIが提供するChatGPTは、2024年5月の大規模アップデートでGPT-4oという最新の言語モデルを採用しました。このモデルにより、ChatGPTはより高い精度でテキスト生成やコーディングサポートなど、さまざまなタスクを実行できます。無料で利用できる範囲でも、非常に高性能です。

### 利点

- **無償利用が可能**: 無料プランでも多くの高度な機能にアクセス可能
- **多用途に対応**: テキストの生成からプログラムのコード生成まで、多岐にわたる用途に対応

### 欠点

- **混雑時の制限**: サーバーが混雑すると、無料ユーザーには制限がかかる場合があります

## 3. Microsoft Copilot: ChatGPTに次ぐ有力な代替ツール

### 概要

Microsoftが提供するCopilotは、GPT-4 Turboを搭載しており、ウェブ上の最新情報にアクセスできる点が特徴です。特に、ニュースやインターネット検索に強みを持っています。

### 利点

- **ウェブ検索機能**: 最新の情報を取得し、リンク付きで結果を表示
- **無料で利用可能**: 多くの機能が無償で提供されている

### 欠点

- **Bing依存**: Bingに依存しているため、検索結果が制限されることがあります

## 4. Claude: 人間らしい対話に特化

### 概要

Claudeは、Anthropicが開発したAIチャットボットで、非常に自然な会話が可能です。人間のような対話を目指して設計されており、質問に対して丁寧に対応する能力に優れています。

### 利点

- **高度な会話能力**: 人間のような自然な対話が可能
- **文書対応**: PDFや他のドキュメントをアップロードし、それに基づいて質問に答えることができます

### 欠点

- **使用制限が不明確**: 無料版での利用に制限がある可能性がありますが、その詳細は不明です

## 5. Perplexity.ai: 検索機能に特化したAIチャットボット

### 概要

Perplexity.aiは、AIチャットボットと検索エンジンの機能を融合させたユニークなツールです。検索結果に基づいた会話が可能で、ユーザーが必要とする情報を簡単に見つけられるよう設計されています。

### 利点

- **リンク付きの検索結果**: 検索結果に信頼性の高いリンクが提供されます
- **無料で利用可能**: 無料プランでも基本機能が利用可能

### 欠点

- **高度な機能は有料**: GPT-4を利用するには、有料プランへの加入が必要です

## 6. Jasper: ビジネスとマーケティング向けの特化型チャットボット

### 概要

Jasperは、ビジネスやマーケティング用途に特化しており、コピーライティングやSEO対策など、プロフェッショナル向けの機能が充実しています。豊富なテンプレートを活用して、効率的にコンテンツを作成できます。

### 利点

- **多彩なテンプレート**: ブログ記事やSNS投稿、ビデオスクリプトなど、50種類以上のテンプレートを提供
- **高度な編集機能**: コピーチェックやSEOインサイトなど、文章の質を高めるツールが豊富

### 欠点

- **コストが高い**: 月額$39からと、他のツールに比べて高額なプランが必要です。

## 7. その他の注目すべきAIチャットボット

- **You.com**: 複数のLLMを利用でき、テストや実験に最適
- **Chatsonic**: 最新のニュースや画像生成機能を備えた記事作成に強いツール
- **Gemini (旧Google Bard)**: Googleサービスとの高い統合性を持つユーザー向け
- **Socratic**: 子供向けの教育サポートに特化したツール
- **HuggingChat**: 開発者向けにカスタマイズ可能なオープンソースチャットボット

## 8. AIチャットボットを選ぶ際のポイント

AIチャットボットを選ぶ際には、以下の要素を考慮することが重要です。

- **価格**: 無料プランと有料プランがあり、それぞれ機能や利用可能な機能が異なります
- **言語モデル (LLM)**: 使用されているモデルにより、対応できるタスクや精度が異なります
- **インターネットアクセス**: 現在の情報にアクセスできる機能が重要です
- **信頼性のあるリンク提供**: 検索結果のリンクが提供されることで、情報の信頼性を確認できます

## 9. まとめ

2024年において最も優れたAIチャットボットは、多機能で高性能な**ChatGPT**です。しかし、特定のニーズや用途に応じて、他のチャットボットがより適している場合もあります。例えば、ビジネス用途にはJasperが最適であり、検索用途にはPerplexity.aiが適しています。

最後まで読んでいただきありがとうございます。この記事が、AIチャットボット選びの参考になれば幸いです。

---
#### 参考文献

- Ortiz, S. (2024, August 19). *I've tested dozens of AI chatbots since ChatGPT's stunning debut. Here's my top pick*. ZDNet. Retrieved from https://www.zdnet.com/article/best-ai-chatbot/
---
Pythonで自然言語処理 (NLP) を使って感情分析をしてみた

こんにちは！今回は、Pythonを使って簡単な感情分析を行う方法を紹介します。感情分析は、テキストデータがポジティブ（肯定的）かネガティブ（否定的）かを判断する技術です。これを通じて、NLP（自然言語処理）の基本を学びましょう。

# 1. 必要なライブラリのインストール
まず、必要なライブラリをインストールします。以下のコマンドを実行してください。

```
pip install numpy pandas scikit-learn nltk
```
これで、データの前処理や機械学習モデルの構築に必要なツールが揃います。

# 2. データの読み込み
次に、ユーザーレビューが格納されたCSVファイルを読み込みます。レビューには、テキストの内容とそれがポジティブかネガティブかを示すラベルが含まれています。
```
import pandas as pd

# CSVファイルからデータを読み込む
data = pd.read_csv('sentiment_reviews.csv')
print(data.head())
```
この段階で、データが正しく読み込まれているかを確認しましょう。

# 3. データの前処理
データを分析する前に、テキストの前処理が必要です。具体的には、テキストを小文字に変換し、不要な単語（ストップワード）を除去し、ステミング処理を行います。
```
import nltk
from nltk.corpus import stopwords
from nltk.stem import PorterStemmer
import re

# NLTKライブラリからストップワードをダウンロード
nltk.download('stopwords')

# テキストの前処理を行う関数
def preprocess_text(text):
    # テキストを小文字に変換
    text = text.lower()
    # 特殊文字を除去
    text = re.sub(r'\W', ' ', text)
    # ストップワードを除去
    text = ' '.join([word for word in text.split() if word not in stopwords.words('english')])
    # ステミング処理
    stemmer = PorterStemmer()
    text = ' '.join([stemmer.stem(word) for word in text.split()])
    return text

# テキスト列に前処理を適用
data['processed_review'] = data['review'].apply(preprocess_text)
print(data.head())
```
これで、レビューが分析に適した形に変換されます。

# 4. テキストの数値化
テキストデータを機械学習モデルで扱うためには、数値ベクトルに変換する必要があります。ここでは、TF-IDF（Term Frequency-Inverse Document Frequency）を使用します。

```
from sklearn.feature_extraction.text import TfidfVectorizer
# テキストをTF-IDFベクトルに変換
vectorizer = TfidfVectorizer(max_features=5000)
X = vectorizer.fit_transform(data['processed_review']).toarray()
```
これで、テキストデータが数値データに変換され、モデルに入力できるようになりました。
# 5. モデルの訓練
感情を分類するために、ロジスティック回帰（Logistic Regression）モデルを使用します。

```
from sklearn.model_selection import train_test_split
from sklearn.linear_model import LogisticRegression
from sklearn.metrics import accuracy_score

# データを訓練セットとテストセットに分割
X_train, X_test, y_train, y_test = train_test_split(X, data['sentiment'], test_size=0.2, random_state=42)

# モデルの初期化と訓練
model = LogisticRegression()
model.fit(X_train, y_train)

# テストセットで予測
y_pred = model.predict(X_test)

# 精度を計算
accuracy = accuracy_score(y_test, y_pred)
print(f'モデルの精度: {accuracy * 100:.2f}%')
```
モデルの精度を確認して、どの程度正確に感情を分類できるかを評価します。
# 6. まとめ
以上の手順で、簡単な感情分析のモデルを作成しました。これにより、テキストデータがポジティブかネガティブかを自動的に判定できるようになりました。PythonとNLPの組み合わせは非常に強力で、これを応用すれば、さまざまなテキストデータを解析することができます。

ぜひ、このコードをカスタマイズして、あなたのプロジェクトに役立ててください！
20240820

```
function listTomorrowEvents() {
  // 明日の日付を取得
  var now = new Date();
  var tomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
  var dayAfterTomorrow = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 2);
  
  // カレンダーの予定を取得
  var calendar = CalendarApp.getDefaultCalendar();
  var events = calendar.getEvents(tomorrow, dayAfterTomorrow);

  if (events.length === 0) {
    Logger.log('明日の予定はありません。');
    return;
  }

  // 取得した予定の情報を表示
  for (var i = 0; i < events.length; i++) {
    var event = events[i];
    Logger.log('タイトル: ' + event.getTitle());
    Logger.log('作成日: ' + event.getDateCreated());
  }
}

```
HTMLの自分用チートシート

# はじめに
HTMLのタグを忘れたとき用に。

# HTMLのタグまとめ
## 枠組み
|タグ|説明|
|:-:|:-:|
|html|HTMLの文書ということを表す|
|head|ブラウザには表示されず、ページのタイトルや説明文、外部ファイルのリンクなどの情報を記述|
|meta|ヘッダ内で文字コードや説明文を記述|
|title|タブやブックマークしたときのタイトルに表示される|
|link|CSSファイルなどの外部ファイルを読み込むときに使う|
|body|ブラウザで表示される部分|

## 表示部分
|タグ|説明|
|:-:|:-:|
|h1 ～ h6|見出し。数字が大きくなると見出しが小さくなっていく|
|p|段落を表す|
|img|画像の表示。src属性で画像を指定、alt属性で画像をうまく読み込めなかったときに表示するテキストを記述|
|a|リンクを貼る。リンク先はhref属性で指定|
|ul|番号なしの箇条書きリスト|
|ol|番号ありの箇条書きリスト|
|li|リストの項目|

## 表
|タグ|説明|
|:-:|:-:|
|table|表を表し、表全体を囲む|
|tr|表の1行を囲む|
|th|見出しのセルを作成|
|td|データのセルを作成|

## フォーム
|タグ|説明|
|:-:|:-:|
|form|フォームの作成|
|\<input type="text">|1行テキスト入力欄|
|\<input type="radio">|ラジオボタン|
|\<input type="checkbox">|チェックボックス|
|\<input type="submit">|送信ボタン|
|select|セレクトボックス|
|option|セレクトボックスの選択項目の作成|
|textarea|複数行テキスト入力欄|
|label|フォームのラベル。ラジオボタンやチェックボックスのテキスト部分もクリックできるようになる|

## グループ化
|タグ|説明|
|:-:|:-:|
|header|ヘッダー部分を作成|
|nav|ナビゲーションメニューを作成|
|article|記事部分の作成。ここだけを見ても独立したページとして成り立つ|
|section|1つのテーマを持ったグループ|
|main|ページのメイン部分|
|aside|本文ではない補足情報。メインコンテンツとは関連性が低い|
|footer|フッター部分の作成|
|div|意味を持たないブロック要素|
【TypeScript/JavaScript】オブジェクト省略記法を理解しよう【初心者向け】

## はじめに

TypeScriptとJavaScriptで使えるオブジェクト省略記法について解説します。

実務で何度も見る記法です。直感では少し分かりにくい記法かもしれませんが、初心者でも分かるように簡単な具体例を挙げて解説します。

## 先に結論

TypeScriptやJavaScriptでは、オブジェクトのプロパティ名と変数名が同じ場合、省略して記述することができます。
※正確にはECMAScript 2015（ES6）以降で導入された記法です

例えば、`{ name: name }` を単に `{ name }` と書けます！

この記法、最初は「え？これどういう意味？」って感じだったのですが、慣れてしまえばそこまで難しくありません。

## オブジェクト省略記法の基本
まずは、従来の書き方と省略記法を比較してみます。

初心者の方にも分かりやすいように、まずは一番シンプルで簡単なコードから説明します。
### 従来のオブジェクトの書き方
```typescript
const name: string = "Taro";
const age: number = 21;

// 従来の書き方
// オブジェクトを作成する際に、プロパティ名と変数名が同じになっている
const myProfile: { name: string; age: number } = {
    name: name, // nameプロパティにname変数の値を代入
    age: age    // ageプロパティにage変数の値を代入
};

console.log(myProfile);
// 出力: { name: "Taro", age: 21 }
```

### 省略記法を使った書き方
次に、同じ内容を省略記法を使って書いてみます。
```typescript
const name: string = "Taro";
const age: number = 21;

// 省略記法を使った書き方
const myProfile: { name: string; age: number } = { name, age }; // nameとageが自動的にプロパティとして追加される

console.log(myProfile);
// 出力: { name: "Taro", age: 21 }
```
スッキリしました！

## なぜ省略記法を使うの？🤔
省略記法を使う理由を考えてみると以下4つでしょうか？
1. コードの簡潔さ: より短く、スッキリしたコードになります。
2. 可読性の向上: 同じ名前の繰り返しが減り、読みやすくなります。
3. タイピング量の削減: キーボード入力が少なくなり、効率的です。
4. バグの減少: キーと値を間違えてタイプするミスが減ります。

## よく使われるシーン

### 関数の引数でのオブジェクト生成

関数の引数でオブジェクトを生成する時にもよく使われます。
```typescript
function createUser(name: string, age: number): { name: string; age: number } {
    return { name, age };
}

const user = createUser("Hanako", 25);
console.log(user); // 出力: { name: "Hanako", age: 25 }
```

### 実践的な例

もう少し複雑なケースでも使われます。

```typescript
interface User {
    id: number;
    name: string;
    age: number;
    email: string;
}

function getUserInfo(id: number): User {
    // データベースからユーザー情報を取得したと仮定
    const name = "Hanako";
    const age = 25;
    const email = "hanako@example.com";
    
    // idも含めてオブジェクト省略記法を使用
    return { id, name, age, email };
}

const user = getUserInfo(1);
console.log(user);
// 出力: { id: 1, name: "Hanako", age: 25, email: "hanako@example.com" }
```

上記の例では、id引数と取得したユーザー情報を組み合わせて新しいオブジェクトを作成しています。

## まとめ
オブジェクト省略記法は、コードをよりクリーンに、読みやすくするための書き方です。より効率的で保守しやすいコードを書くことができます。

### 覚えておくといいこと
- プロパティ名と変数名が同じ時に使える
- コードが簡潔になる
- タイプミスが減る
- モダンなJavaScript/TypeScriptでよく見かける書き方

最初は少し違和感があるかもしれませんが、慣れれば自然に書けるようになります。

## 参考資料

[MDN Web Docs: オブジェクトでの作業](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Working_with_objects)

[MDN Web Docs: オブジェクト初期化子](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer)

[TypeScript公式ドキュメント: オブジェクトリテラル](https://typescriptbook.jp/reference/values-types-variables/object/object-literal)
2024/8/20主にITとかセキュリティの記事

「〇〇〇（サイトのドメイン）が次の許可を求めています」というプッシュ通知を悪用した新しいサイバー攻撃の手法が増加(8/18)
https://dime.jp/genre/1836741/

OpenAI、米国の政治的な分断を狙うイラン関連アカウントを削除(8/18)
https://forbesjapan.com/articles/detail/73143

クラウド環境におけるデータ保護の重要性と課題とは？
https://cybersecurity-park.com/2632/

太陽光発電にサイバーリスク
脆弱IoTに侵入、不正送金に悪用　分散型電源の普及に影(8/18)
https://www.nikkei.com/article/DGKKZO82858830Y4A810C2EA2000/

防衛省 AI活用推進基本方針 (2024.07.02)(8/18)
http://maruyama-mitsuhiko.cocolog-nifty.com/security/2024/08/post-33457c.html

Optimism、セキュリティ監査後のハードフォークを計画(8/18)
https://crypto-times.jp/news-optimism-plans-hard-fork/

iPhoneのユーザ辞書とは？登録方法や注意点まで解説(8/18)
https://iphone-mania.jp/manual-584699/

【Vercel / Next.js】環境変数設定の注意点アレコレ(8/17)
https://zenn.dev/no215/articles/d0585982ba1116

韓国政府　19日から非常事態に備えた演習実施＝計58万人参加(8/18)
https://news.yahoo.co.jp/articles/4a39227458ece75722583f854f172f2490d6a0ac

英国 防衛科学技術研究所 AIとデータサイエンス:防衛科学技術能力, 国防AI戦略(8/18)
http://maruyama-mitsuhiko.cocolog-nifty.com/security/2024/08/post-37826f.html

Adobe AcrobatおよびReaderに重大な脆弱性、更新を(8/16)
https://news.infoseek.co.jp/article/mynavi_2801988/

認知度85％のDX、道路DXの代表格「xROAD」は10％(8/19)
https://xtech.nikkei.com/atcl/nxt/mag/ncr/18/00222/080600002/

ランサム感染で生産・受注が停滞　納期遅れがレンズ業界全体に飛び火 HOYA(8/19)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/020600011/080900162/

HOYAがランサム感染で生産・受注が停滞、納期遅れがレンズ業界全体に飛び火(8/19)
https://xtech.nikkei.com/atcl/nxt/column/18/01157/080900117/

車載通信で10メガEthernetが台頭、高速版CANより多機能でコスト安
23年ごろから自動車メーカーが前向きに、半導体メーカーやツールベンダーが続々提案(8/19)
https://xtech.nikkei.com/atcl/nxt/mag/ne/18/00001/00454/

システム開発への生成AI応用に潜む3大リスク、対策の第一歩はサービス仕様の見極め(8/19)
https://xtech.nikkei.com/atcl/nxt/column/18/02908/080100001/

本来はカーネルを指す「Linux」、気になるUNIXとのアプリ互換性(8/19)
https://xtech.nikkei.com/atcl/nxt/column/18/02898/072200001/

優秀な技術者は去って行く　中途採用者を終身雇用する愚(8/19)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/020600007/080600172/

フィジカルインターネット（Physical Internet）(8/19)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/020600009/080800175/
Flexboxでの比率設定について

# はじめに
webサイトの模写でFlexboxを使用した際に横並びの要素を1:2で配置する方法について調べました。
今回は'flex-grow',　'flex-shrink',　'flex-basis'の3つのプロパティについて紹介します。

## flex-grow
'flex-grow'は、フレックスアイテムが親コンテナ内で利用可能な余分なスペースをどの程度拡大するかを指定するプロパティです。

```
.content {
  width: 800px;
  display: flex;
}
  
.item1 {
  flex-grow: 1; /* 他のアイテムと比べて1倍のスペースを取る */
}
.item2 {
  flex-grow: 2;/* 他のアイテムの2倍のスペースを取る */
}
```

## flex-shrink
'flex-shrink'は、親コンテナ内のスペースが不足したときに、フレックスアイテムがどの程度縮小するかを指定します。

```
.content {
  width: 800px;
  display: flex;
}
.item1 {
  flex-shrink: 1; /* スペースが不足したときに縮小する */
}
.item2 {
  flex-shrink: 0; /* 縮小しない */
}
```

## flex-basis
'flex-basis'は、フレックスアイテムの初期サイズを指定します。'flex-grow'や'flex-shrink'が適用される前の基準となるサイズです。

```
.item {
  flex-basis: 100px; /* アイテムの初期サイズを100pxに設定 */
}
```

# まとめ
いかがだったでしょうか？Flexboxを使用すると、要素の比率を簡単に管理できます。ですが、単純な比率ではないため、各プロパティをしっかり理解して意図しない挙動を避けるように気をつけましょう。
GitでPush後の過去のコミットメッセージを修正

過去のコミットメッセージを修正する手順
## 1. コミットメッセージの修正:

最も直近のコミットメッセージを修正したい場合は、以下のコマンドを使用します。

```bash
git commit --amend
```
これで現在のコミットメッセージを修正できます。

さらに過去のコミットを修正したい場合は、rebaseを使います。

```bash
git rebase -i HEAD~n
```
nは過去にさかのぼるコミット数です。このコマンドを実行すると、インタラクティブなリベース画面が開きます。修正したいコミットの行にrewordと記入し、保存します。その後、指定したコミットのメッセージを変更できます。

## 2. 修正をプッシュ:

既にリモートリポジトリにプッシュ済みのコミットを修正した場合、強制プッシュが必要です。
```bash
git push --force
```
これは、リモートリポジトリの履歴を上書きするため、注意が必要です。特に他のチームメンバーが同じブランチで作業している場合、履歴の変更により競合や問題が発生する可能性があります。
## 強制プッシュが必要かどうか
強制プッシュは、リモートリポジトリの履歴を上書きするため、過去のコミットメッセージを修正した場合は基本的に必要です。強制プッシュを避けるために、リモートにプッシュする前にコミットメッセージを正確にするか、ローカルでコミットメッセージを修正した後に他のメンバーに周知し、問題がないことを確認してから実行するのが良いです。

強制プッシュは非常に強力な操作なので、実行する前に十分な注意を払う必要があります。
音楽ファイルの再生



# はじめに

初心者でもミュージックの再生、停止することは簡単だったので実装してみた。

# 機能

再生アイコンを押すと音楽が流れ始め表示がSTOPアイコンに切り替わるボタンの実装。

# 実装

```:HTML

<!DOCTYPE html>
<html lang="jp">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="content">
        <img src="images/play.png" id="icon" />
    </div>
    </div>

    <audio id="mySong">
        <source src="gameover.mp3" type="audio/mp3" />
    </audio>

    <script src="js/audio.js"></script>
</body>

</html>

```

```:Javascript

const mySong = document.querySelector('#mySong');
const icon = document.querySelector('#icon');

icon.onclick = function () {
    if (mySong.paused) {
        mySong.play();
        icon.src = "images/pause.png";
    } else {
        mySong.pause();
        icon.src = "images/play.png";
    }
};



```