OmniAICreator/Qiita-1.07M huggingface dataset:
【Mathpix Snip】数式画像を爆速でLaTeX変換してNotionやQiitaに書く方法


# LaTeXでの式の入力が面倒！

QiitaやNotionなどMarkdown形式のサービスで数式を書きたい場合、LaTeX形式に変換する必要がある。
コピペしたい数式が元々LaTeX形式であれば楽だが、pdfや手書き画像などの場合、なかなか骨が折れる。
そこでここではMathpixを使って簡単に画像から数式をLaTeXに起こす方法を紹介する。

# 手順

実際に手順を追うのがわかりやすいので具体的にみていこう。

## 1. 数式画像を用意する

例えば以下のXGBoostの論文に出てくる数式をLaTeXで書きたいとしよう。

https://arxiv.org/abs/1603.02754

![スクリーンショット 2024-09-06 22.46.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547532/ea4b9444-f075-fcab-0111-98df09f57e43.png)



これはなかなか手入力するのがしんどそうだ。。

## 2. Mathpix Snipを入れる

以下からMathpix Snipを入れる。

https://mathpix.com/snip

自分はMacを使っているのでapp storeから入れたが、webからそのまま使うこともできる。
今回はMacのアプリから使ってみよう。

アプリを立ち上げて左上の"Create Snip from Screenshot"の四角いアイコンを押すとスクショができるので、変換したい数式をスクショする。
すると以下のように画像が取り込まれた上でLaTex変換の選択肢が複数提示されるので、適当に一番上とかをコピーする。

![スクリーンショット 2024-09-06 22.51.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547532/7c556c0e-2757-861c-3d16-bcfabca72d96.png)


ブラウザ版の方はスクショ済みの画像をdrag&dropするだけで使える。
ただし文字数制限が100文字までなので、長い数式などを変換したい場合はアプリ版の方が良さそう。
（元画像の数式だと100文字超えてしまったので、以下は別の数式の変換例）

![スクリーンショット 2024-09-06 22.58.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547532/58d56ad2-3280-cf19-0c8d-49e564b3b4b7.png)




## 3. NotionやQiitaに貼り付けてみよう

### Qiitaの場合

以下のように\```math```で囲って貼り付けるだけでOK.

![スクリーンショット 2024-09-06 23.01.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547532/d08195ee-1805-c0c5-8963-304a681acea1.png)

```math
\tilde{\mathcal{L}}^{(t)}=\sum_{i=1}^n\left[g_i f_t\left(\mathbf{x}_i\right)+\frac{1}{2} h_i f_t^2\left(\mathbf{x}_i\right)\right]+\Omega\left(f_t\right)
```
綺麗に表示できた！

### Notionの場合

/mathと打つと"式ブロック"が選べるので選択する。

![スクリーンショット 2024-09-06 23.04.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547532/a940f64a-c265-ee83-610d-11f590bafd6d.png)

あとは先ほどコピペした式を貼り付けるだけ。
楽！

![スクリーンショット 2024-09-06 23.04.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/547532/1ed6135e-7e71-939d-2a2f-a2c9da1b1a8f.png)

# まとめ&最後に

- Notionなどで勉強した内容をまとめる際、画像の数式をすぐにLaTeX形式で変換できるのはすごい便利
- 無料版だと使える回数などに制限があるみたいなので、頻繁に使う場合は課金を検討してもいいかも
SEOとは？

SEO（Search Engine Optimization、検索エンジン最適化）は、検索エンジン結果ページ（SERP）でウェブサイトの可視性を高めるための戦略と技術の集合です。このプロセスによって、ウェブサイトはより多くのトラフィックを獲得し、その結果、リード、顧客、売上へとつながる可能性が高まります。ここではSEOの基本となる要素、手法、そしてその効果について詳しく説明します。

1. SEOの基本
SEOは大きく分けて「オンページSEO」と「オフページSEO」に分類されます。

オンページSEO
オンページSEOは、ウェブサイト自体の最適化を指します。これには、コンテンツの質、キーワードの選定と配置、メタタグの最適化、内部リンク構造の改善などが含まれます。主な目的は、特定のキーワードで検索された際に高いランキングを獲得することです。

キーワード最適化: ターゲットとなるキーワードを適切に選び、コンテンツに適切に組み込むことが重要です。ただし、過剰にキーワードを盛り込む「キーワードスタッフィング」はペナルティの原因となるため避けるべきです。
メタデータ: タイトルタグやメタ記述タグを最適化することで、クリックスルーレート（CTR）の向上が見込めます。これらのタグは検索結果に表示され、ユーザーのクリックを促します。
コンテンツの質: ユーザーに価値を提供するオリジナルで関連性の高いコンテンツを作成することが重要です。コンテンツは定期的に更新し、新鮮さを保つべきです。
オフページSEO
オフページSEOは、ウェブサイト外部からの評価を高める活動です。これには、リンクビルディングやソーシャルメディア戦略、ブランディングなどが含まれます。

バックリンク: 他サイトからのリンク（バックリンク）は、Googleに対する信頼性の指標です。ただし、リンクの質も重要で、信頼できるソースからのリンクが評価されます。
ソーシャルシグナル: ソーシャルメディアでの言及や共有も、検索エンジンに対する信頼性の指標となり得ます。積極的なソーシャルメディア戦略が推奨されます。
2. テクニカルSEO
テクニカルSEOは、ウェブサイトの技術的側面の最適化を指し、検索エンジンがサイトを効率的にクロールし、インデックスできるようにすることを目指します。

サイトの速度: ページのロード速度はユーザー体験に直接影響し、SEOランキングにも影響します。画像の最適化、キャッシングの利用などにより改善できます。
モバイルフレンドリネス: グーグルはモバイルファーストインデックスを導入しており、モバイルでの利用適性が検索ランキングに影響します。レスポンシブデザインの採用が推奨されます。
セキュリティ: HTTPSへの移行は、ユーザーの安全を守ると同時にSEOの観点からも推奨されます。
3. 成果測定と改善
SEOの効果は、Google AnalyticsやGoogle Search Consoleなどのツールを用いて定期的に測定し、改善策を継続的に実施することが重要です。キーワードのパフォーマンス、トラフィックの変動、バウンス率の改善など、具体的なメトリクスに基づいて戦略を調整します。

SEOは一朝一夕に効果が出るものではなく、継続的な努力が必要です。最新のSEOトレンドに常に注意を払い、Googleのアルゴリズム更新に対応するために、戦略を柔軟に調整することが成功の鍵です。

https://camp.tanabesports.com/
ECRを使ってVoicevoxのDockerイメージをApp Runnerにデプロイした話

## はじめに
この記事は、「**ハッカソンでデプロイしたアプリでもvoicevoxを使いたい！**」という気持ちから、実際にAWSのApp Runnerにデプロイしたものを忘備録的に残しておこうというものです。

## 注意点
AWSは色々な無料枠を用意してくれていますが、App Runnerには無料枠がありません！（2024/09/06時点現在）
発生するお金に関してはご自身の責任でお支払いください。

## なぜApp Runner
- 今回参加したハッカソンではデプロイにはAWSを使う必要があったため
    - 開発期間中は開発用のクレジットがもらえたため、金額などは気にしなくてよかった
- できる限りお手軽にデプロイしたい！
    - できる限り設定をしたくない
- 「**新しいことに挑戦したい！**」

これらの理由でApp Runnerを選んでデプロイしました！

「ECSじゃダメなの？」というかた、試してはいませんが多分いけます！（是非試して記事にしてください！）

## 事前準備
下記の2つは他の記事などを参考に設定を終わらせておいてください。
1. AWSへの登録
1. AWS CLIの導入、設定

## デプロイ

### Dockerfileの準備
今回は次のような簡単なDockerfileを使ってvoicevoxをデプロイします。
ベースイメージは[こちら](https://hub.docker.com/r/voicevox/voicevox_engine)のものをお借りしています。
```Dockerfile
FROM voicevox/voicevox_engine:cpu-ubuntu20.04-latest

EXPOSE 50021
```

### ECRにイメージをデプロイ

#### ECRのリポジトリの作成

以降の${}は適宜自分のものに適宜置き換えて使ってください。

まず、AWS CLIを使ってECRのリポジトリを作成します。

リポジトリネームは適当な名前をつけ、リージョンに関しても使いたいものを指定してください。

```bash
aws ecr create-repository --repository-name ${REPOSITORY_NAME} --region ${AWS_REGION}
```

リポジトリが作成されたかを、GUIでも下記のコマンドでも良いので確認してみましょう。

```bash
aws ecr describe-repositories --region ${AWS_REGION}
```

#### ECRにデプロイするDockerfileの準備
確認したら、次はDockerの準備をしましょう。
Dockerイメージをpushするためにawsにログインする必要があります。
何個かやり方があるらしいのですが、今回は[公式サイト](https://docs.aws.amazon.com/ja_jp/AmazonECR/latest/userguide/docker-push-ecr-image.html)を参考に、下記のコマンドでログインをすることにします。

```bash
aws ecr get-login-password --region ${AWS_REGION} | docker login --username AWS --password-stdin ${AWS_ACCOUNT_ID}.dkr.ecr.${AWS_REGION}.amazonaws.com
```

ログインしたら、pushするイメージファイルの準備をします。

ECRにpushするdockerイメージのレジストリ形式は次のようになります。

`${AWS_ACCOUNT_ID}.dkr.ecr.${AWS_REGION}.amazonaws.com/${ECR_REPOSITORY_NAME}:${TAG}` 

これをpushする予定です。（tagは指定しなければlatestになります）

Dockerfileがあるディレクトリに移動し、下記のコマンドを実行してください。（今回はtagをv1とさせていただきます）

```bash
docker build -t ${AWS_ACCOUNT_ID}.dkr.ecr.${AWS_REGION}.amazonaws.com/${ECR_REPOSITORY_NAME}:v1 .
```

#### DockerイメージをECRにpush
ビルドが完了したら、下記のコマンドでECRにpushしましょう。

```bash
docker push ${AWS_ACCOUNT_ID}.dkr.ecr.${AWS_REGION}.amazonaws.com/${ECR_REPOSITORY_NAME}:v1
```

pushしたら、GUIか下記のコマンドで確認してみましょう。

```bash
aws ecr list-images --repository-name ${ECR_REPOSITORY_NAME} --region ${AWS_REGION}
```

イメージのpushが終わったら、App Runnerの画面に移動しましょう！

### App RunnerでECRのDockerイメージからデプロイ
AWSのApp Runnerのトップ画面から「サービスの作成」→「コンテナレジストリ」→「Amazon ECR」→「参照」でpush先のリポジトリ名を選択し、タグ（今回ならv1）を選択し、「続行」を押してください。

デプロイトリガーは「手動」、ECRアクセスロールに関しては、一度もApp Runnerを触ったことない方は「新しいサービスロールの作成」を選び「次へ」を選択してください。

#### サービス設定に関して
サービス名は適宜決めていただき、CPU、メモリに関しても使う分だけ設定してください。
今回はあまり使わない予定なので、
- 仮想CPU「0.25vCPU」
- 仮想メモリ「0.5GB」
- port:50021
と設定しました。

それ以外の設定はしませんが、必要な場合は適宜行ってください。

「次へ」を選ぶと確認画面が出るので、問題なければ「作成とデプロイ」を押してください。

これでデプロイ完了です！

## エラーが出た場合
下記のようなエラーが出た方へ（自分も出ました）

```bash
exec /entrypoint.sh: exec format error
```

[参考](https://qiita.com/OmeletteCurry19/items/fd057a7448aa3072fd1e)：これが出たら、build時に--platform linux/amd64を追加すれば問題なく動作します。

```bash
docker build --platform linux/amd64 -t ${AWS_ACCOUNT_ID}.dkr.ecr.${AWS_REGION}.amazonaws.com/${ECR_REPOSITORY_NAME}:v1 .
```
Google Cloud Next Tokyo'24の振り返り

はじめに
--------------------------------------
かなり時間が経ってしまいましたが、2024/8/1～2にパシフィコ横浜にて開催された、Google Cloud Next Tokyo'24についての振り返りです。
特に個人的に記憶に残った内容を記載します。

Cloud Run で構築する 生成 AI アプリと RAG の実践
---------------------------------------------
アプリ開発者が生成AIアプリやRAG ワークフローを構築するのに役立つ 　Cloud Runの使い方が紹介されていました。

Cloud Run の有用性
　・コンテナをデプロイするだけで外部から到達可能なURLが発行される
　　→インフラ知識のないエンジニアでも、生成AI アプリを容易に公開が可能
　・O~Nヘトラフィックに応じて高速にスケーリング
　　→呼び出される頻度が低い、高いに限らず、コスト最適化な運用が可能
　・イベント駆動で処理を実行
　　→イベント駆動のデータ取り込みが可能
  　　(Cloud Storage にファイルが置かれたら起動、など)
　・高度なトラフィック管理が統合
　　→新しいモデルやプロンプトの検証、ロールバックが容易

上記の様なCloud Runの特徴から、生成AI開発に有用であることが紹介されていました。
その他、生成 AI アプリの開発について、
　・従来アプリ開発のループに生成AIの機能を追加する考えで始めると良い
　・データ分析や質の高い回答生成のために RAG を活用
　・ユーザーフィードバックを収集し、評価と改善を繰り返す
　・一連のフィードバックループを含めたアプリ開発をすることで、
 　　ユーザーのニーズの変化や新しい技術に対応できるようになる
といった考え方で進めるよいとの事でした。

Google Cloud のインフラ ストラクチャ構成のベスト プラクティス
-------------------------------------------
多くの話題がありましたが、特に便利と思ったものを記載します。
・ハイブリッドNAT
　オンプレミスのアドレスがVPCサブネットのアドレスと重複してしまう場合
　ハイブリットNAT機能により、アドレス範囲が重複していても通信できる
・ハイブリッドサブネット
　オンプレミスのネットワークとVPCネットワークで同じサブネット帯域を
　利用したい場合、ハイブリッドサブネットにより実現できる
・Private Service Connect
　オンプレミスからGoogleCloudサービス内のVM等に接続する際に、
　プライベートアドレスの重複を許容でき、接続することができる

また、ロードバランサーの選択のベストプラクティスとして、
• 外部ロードバランサ
　レイヤ７
　・グローバルを最初に検討
　・理由がある場合はリージョンを検討
　レイヤ4
　・グローバルかつTCPならプロキシを検討
　・リージョンまたはUDPならパススルーを検討
• 内部ロードバランサ
　レイヤ7:クロスリージョンを最初に検討
　レイヤ4:(外部と同じ)
といった内容が紹介されていました。

GKEの事例紹介
--------------------------------------
GKEとCloud Service Mesh(CSM)、AlloyDBを使った事例が紹介されていました。
　GKEにCloud Service Mesh(CSM)を組み合わせることで、
　・AutopilotモードでのNode管理自動化
　・セキュリティ設定がデフォルトで有効化
　を実現されているとのことでした。
 
　Cloud Service Mesh（CSM）は、監視可能で安全な
　マイクロサービス間通信を実現するアーキテクチャで、
　・トラフィックコントロール
　・ロードバランス
　・オブザーバビリティ（監視）
　・セキュリティ（暗号化通信）
　を行うことができるとのことでした。
　
　AlloyDBは、
　・System Metrics、QueryInsightsが使える
　・高可用性とスケーラビリティ
　・ゼロダウンタイムでのスペック変更
　・CloudSQLと比べて設定が簡単
 とのことで採用されたとのことでした。
Kubernetesを商用で実現する構成として参考になると思いました。

その他
---------------------------------------
　会場では「クイズチャレンジ」がありました。PCでクイズ（試験問題）に答え、70点以上得点できると、景品がもらえます。AI、DevOpなど６種類のジャンルがあり、すべてクリアすると、おまけでもう一つ（下の写真の真ん中）がもらえました。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822494/84e7ff05-cb51-4b3a-66c2-323ac392d734.png)

最後に
----------------------------------
最近注目されているコンテナ技術やAI技術は、Googleを起点としているものが結構多いと感じます。
今後コンテナ技術やAI技術のさらなる進展があることが予想される時代、益々Googleの動きに注目すべきと思いました。
（今回初めての投稿となりますため、多少不備などがあるかもしれません。このところご容赦ください）
OpenCV,OpenGL,Eigenが使えるC++プロジェクトを作るためのCMakeListを作る

chatGPTに協力してもらいながら、作ったら意外と簡単。


```
cmake_minimum_required(VERSION 3.10)

# プロジェクト名を変数として定義
set(PROJECT_NAME MyOpenCV_Eigen_OpenGL_Project)

project(${PROJECT_NAME})

# C++17を使用する
set(CMAKE_CXX_STANDARD 17)

# OpenCVのパッケージを見つける
find_package(OpenCV REQUIRED)
include_directories(${OpenCV_INCLUDE_DIRS})

# Eigenのパッケージを見つける
find_package(Eigen3 3.3 REQUIRED NO_MODULE)
include_directories(${EIGEN3_INCLUDE_DIR})

# OpenGLのパッケージを見つける
find_package(OpenGL REQUIRED)
include_directories(${OPENGL_INCLUDE_DIR})

# GLFWのパッケージを見つける
find_package(glfw3 REQUIRED)
include_directories(${GLFW_INCLUDE_DIRS})

# ImGuiのソースコードを追加
set(IMGUI_DIR "${CMAKE_SOURCE_DIR}/external/imgui")
file(GLOB_RECURSE IMGUI_SOURCES "${IMGUI_DIR}/*.cpp")
file(GLOB_RECURSE IMGUI_HEADERS "${IMGUI_DIR}/*.h")

# ソースファイルを自動的に追加する
file(GLOB_RECURSE SOURCES "src/*.cpp")
file(GLOB_RECURSE HEADERS "src/*.h")

# ヘッダーファイルのインクルードパスを追加
include_directories(${IMGUI_DIR})

# 実行可能ファイルを作成
add_executable(${PROJECT_NAME} ${SOURCES} ${HEADERS}
               ${IMGUI_DIR}/imgui.cpp ${IMGUI_DIR}/imgui_draw.cpp 
               ${IMGUI_DIR}/imgui_widgets.cpp ${IMGUI_DIR}/imgui_tables.cpp 
               ${IMGUI_DIR}/backends/imgui_impl_glfw.cpp 
               ${IMGUI_DIR}/backends/imgui_impl_opengl3.cpp)

# ImGuiのソースコードとヘッダーファイルをグループ化
source_group(TREE "${IMGUI_DIR}" PREFIX "imgui" FILES ${IMGUI_SOURCES})
source_group(TREE "${IMGUI_DIR}" PREFIX "imgui" FILES ${IMGUI_HEADERS})

# ソースコードとヘッダーファイルをグループ化
source_group(TREE "${CMAKE_SOURCE_DIR}/src" PREFIX "src" FILES ${SOURCES})
source_group(TREE "${CMAKE_SOURCE_DIR}/src" PREFIX "src" FILES ${HEADERS})

# リンカオプションを設定
target_link_libraries(${PROJECT_NAME}
    ${OpenCV_LIBS}
    ${OPENGL_LIBRARIES}
    glfw
)

# デバッグビルドのために、コンパイラオプションを追加する場合
# set(CMAKE_CXX_FLAGS_DEBUG "${CMAKE_CXX_FLAGS_DEBUG} -DDEBUG")
```
テスト114

```vb

Sub Test_Pic()

Dim shp As Shape
Dim str_Addr As String

With ThisWorkbook.Sheets("画像判定")
    
    'シート内に画像以外のオブジェクトが存在した場合(2個以上)は終了
    If .Shapes.Count > 1 Then
    
        MsgBox "○○ファイルには画像が2つ以上存在します。確認をお願いします。", _
                      vbCritical, "中止"
        Exit Sub
    
    End If
    
    For Each shp In .Shapes
        
        If shp.Type = msoPicture Then
            'シート内に画像がある場合、その画像の右下のセル番地を取得
            str_Addr = shp.BottomRightCell.Address
            MsgBox str_Addr
            Exit Sub
            
        End If
        
    Next shp

End With


End Sub
[備忘録]PythonプログラムでHugging faceへのログイン処理に失敗する

# 症状
notebook形式で次のコードを実行すると、hugging faceにログインすることができます。


```py: hugging face にログインする
from huggingface_hub import notebook_login

notebook_login()
```

しかし、私の場合は次のエラーが出力されてログインに失敗しました。

```
[WinError 2] 指定されたファイルが見つかりません。
```


# 解決策
Git Bash をインストールすることで解決されます。

https://git-scm.com/downloads

Git Bash のインストール後、再起動して再びログインを試すと、次が出力されます。

```: 成功例
Token is valid (permission: write).
Your token has been saved in your configured git credential helpers (manager).
Your token has been saved to C:\Users\ユーザ名\.cache\huggingface\token
Login successful
```
IntelliJ IDEAでインポートをワイルドカードにまとめる設定を避けるべき理由とメリットについて

IntelliJ IDEAでは、インポートをワイルドカードにまとめる設定がある。

設定のやり方は
[IntelliJのリファレンスへGO](https://www.jetbrains.com/help/idea/creating-and-optimizing-imports.html)

先日、OSSのコミッターを行っている際にレビューで指摘されて、プライベートのPCでワイルドカードインポート設定になってしまっていたため、

下記にIntelliJ　IDEAの
***【インポートをワイルドカードにまとめる設定】***
について、自分が思う避けるべき理由とメリットを記載しようと思う。

## ワイルドカードインポートを避けるべき理由

### 読みやすさの低下
ワイルドカードを使用すると、どのクラスが実際に使用されているのかが不明確になる。
特に大規模なコードベースでは、同じ名前のクラスが異なるパッケージに存在する場合があり、どのクラスがインポートされているのかがわからず、混乱を招く可能性がある。

### 静的解析やコード補完の問題
IDEの静的解析やコード補完の機能は、明示的なインポートがあることで最適に機能する。
ワイルドカードを使用すると、これらの機能が正しく動作しない場合があり、
コードの理解や保守性に影響を与えることがある。

### リファクタリングの困難さ
明示的なインポートがないと、クラスのリファクタリング（名前変更や移動など）が困難になる。
特にIDEを使用して自動的にリファクタリングする場合、ワイルドカードインポートは正確なリファクタリングを妨げることがある。

### 競合のリスク増加
ワイルドカードインポートを使用すると、インポートされるクラスが不明確になり、パッケージ間で名前が競合するリスクが高まる。これにより、コンパイルエラーや予期しない動作が発生する可能性がある。

### 依存関係の可視性が低下
ワイルドカードインポートを使用すると、コードが依存している具体的なクラスが見えにくくなり、コードの理解やレビューが難しくなる。特に新しいチームメンバーがコードを読むときに障害となることがある。


***個人的には、共同開発時に非常にネックになる印象***

## ワイルドカードインポートのメリット

### インポートの簡潔さ
多くのクラスを同じパッケージからインポートする場合、ワイルドカードインポートはコードを簡潔に保ち、インポートステートメントの行数を減らすことができる。
これにより、コードが少し短く見えて視覚的にシンプルになる。

### クリーンな見た目
インポートリストが長くなると、クラスファイルの先頭部分が雑然として見えることがある。ワイルドカードを使用することで、これを軽減し、インポート部分がクリーンに見えるようになる。

### 一定のコードスタイルやポリシーへの準拠
一部のプロジェクトやチームでは、スタイルガイドとしてワイルドカードインポートを許可または推奨している***場合がある。***
この場合、ワイルドカードインポートを使用することで、プロジェクトの一貫性を保つことができる。

### メンテナンスの簡易化
同じパッケージから複数のクラスを頻繁に追加・削除する場合、ワイルドカードインポートを使用すると、インポート文を個別に追加・削除する必要がなくなる。
これにより、特に大規模なリファクタリングの際にメンテナンスが少し楽になる。

### パフォーマンスへの影響がない
一部の人が懸念することとして、「ワイルドカードインポートはパフォーマンスに悪影響を及ぼす」と誤解されることがあるが、コンパイル済みのバイトコードには影響しない。
ワイルドカードインポートはコンパイル時の問題であり、実行時のパフォーマンスには影響は与えない。

## まとめ

IntelliJ IDEAで***インポートをワイルドカードにまとめる設定***には、簡潔さや見た目のクリーンさなどのメリットがあるが、読みやすさやリファクタリングの困難さ、依存関係の可視性の低下などのデメリットも存在する。
プロジェクトの規模やチームのポリシーに応じて、

***どちらの設定を採用するかを慎重に検討することが重要。***

要はプロジェクトの郷に入っては郷に従えということでmm
MAMP 7で「Error: Apache couldn't be started. Please check your MAMP installation and configuration.」エラーが出る

# 原因

MAMP 7.0.0では、fcgi-binフォルダに必要なファイルが不足しているためです。

# 対処

:::note info
MAMP 7.1.0では発生しないため、最新版を再インストールすることでも解決できます。
:::

1. ターミナルで以下を実行して、不足しているファイルを作成します
    ```
    cd /Applications/MAMP/fcgi-bin
    sed 's/8\.3\.1/8\.2\.20/g' php8.3.1.fcgi  > php8.2.20.fcgi
    sed 's/8\.3\.1/8\.3\.9/g' php8.3.1.fcgi  > php8.3.9.fcgi
    ```
1. MAMPをStartさせます（既にStartしている場合は一度StopしてからStart）
Common Lisp風のLISPを作ってみる（１２．条件）

今回は、なんと、`if`だけです。なぜかというと、`and`, `or`, `cond`はスペシャルオペレーターではなくマクロだからですね。大丈夫です。もうmy-lisp2の中には`and`, `or`, `cond`をマクロとして入れることができましたので、今回はサラッと流していきましょう。
[ソースコード](https://github.com/haruo-wakakusa/my-lisp2/tree/main/chapter12)
# built_in_func.c
`op_if`関数はスペシャルオペレーター`if`の実体です。
```built_in_func.c
void *op_if(void *args, void *env_func, void *env_var) {
    void *test_form = car(args);
    void *then_form = car(cdr(args));
    void *else_form = car(cdr(cdr(args)));
    void *val;
    size_t len = list_length(args);
    if (len <= 1) {
        fprintf(stderr, "IF: 引数が少なすぎます\n");
        state = STATE_ERROR;
        return 0;
    } else if (len >= 4) {
        fprintf(stderr, "IF: 引数が多すぎます\n"); 
        state = STATE_ERROR;
        return 0;
    }   
    val = eval(test_form, env_func, env_var);
    if (!val) return 0;
    if (val != NIL) {
        return eval(then_form, env_func, env_var);
    } else {
        return eval(else_form, env_func, env_var); 
    }   
}
```
# 動かしてみよう
`if`だけ増やしても、大したことはできないです...
```
> (if 1 2 3)
2
> (if nil 2 3)
3
> (if (> 2 1) "おめでとう" "残念")
"おめでとう"
```
SwiftData のテーブル構造を SQLite コマンドでみる


SwiftData で Todo というモデルを一つ作って、

シミュレーター にて眺めます。

https://x.com/maochanz/status/1832013744341172433

実際にどう構成されているか雰囲気が掴めるでしょう。

シミュレーターの対象ファイルの位置。

```
/Users/{USER_NAME}/Library/Developer/
  CoreSimulator/
  Devices/{DEVICE_ID}/
  data/Containers/Data/Application/{APP_ID}/Library/
  Application Support/
```

「Application Support」 ディレクトリ以下に該当ファイルがある。

```
default.store
default.store-shm
default.store-wal
```

いざ。

```sql
$ sqlite default.store

SQLite version 3.43.2 2023-10-10 13:08:14
Enter ".help" for usage hints.

sqlite> .tables
ACHANGE             ATRANSACTIONSTRING  ZTODO               Z_MODELCACHE
ATRANSACTION        Z_METADATA          Z_PRIMARYKEY

sqlite> .schema ZTODO
CREATE TABLE ZTODO ( Z_PK INTEGER PRIMARY KEY, Z_ENT INTEGER, Z_OPT INTEGER, ZTIME TIMESTAMP, ZTEXT VARCHAR );

sqlite> .headers on
sqlite> .mode column

sqlite> select * from ZTODO;
Z_PK  Z_ENT  Z_OPT  ZTIME             ZTEXT
----  -----  -----  ----------------  -----------------------------------------------------------
11    2      1      727759392.308872  2. Do, or do not. There is no try.
12    2      1      727759392.914907  3. Most things look better when you put them in a circle.
13    2      1      727759393.191901  4. Could not get advice.
14    2      1      727760485.069984  0. You're not that important; it's what you do that counts.
15    2      1      727760485.781123  1. Most things done in secrecy are better left undone.
16    2      1      727760486.503812  2. When in doubt, just take the next small step.
17    2      1      727760487.112024  3. Have a firm handshake.
```

しっかりとした雰囲気で、内部的なテーブル群も自動で作成され構成されています。

メモリー、キャッシュ、ストレージ、データベース というデータ記憶位置の確認するためにも必要では?

# 🤔 参考

https://android.benigumo.com/20240125/swiftdata-store-file/
Ruby on Rails：タスクライブラリ

こんばんは。

今日は「Ruby on Railsのタスクライブラリ」について説明します。

Railsでは、Rakeタスクを使ってカスタムタスクを定義し、コマンドラインから実行することができます。これにより、データベースのメンテナンスやデータの移行、カスタムスクリプトの実行などを自動化できます。

# Rakeタスクの定義方法

## Rakeファイルを作成

Rakeタスクは通常、`lib/tasks`ディレクトリ内のファイルで定義します。例えば、`lib/tasks/my_tasks.rake`というファイルを作成します。

## Rakeタスクを書く

Rakeファイル内で、taskメソッドを使ってタスクを定義します。以下はシンプルな例です：

```ruby
# lib/tasks/my_tasks.rake
namespace :my_tasks do
  desc "サンプルタスクです"
  task :sample_task => :environment do
    puts "こんにちは、Rails！"
  end
end
```

この例では：
- namespace :my_tasksでタスクの名前空間を定義します。これにより、関連するタスクをグループ化できます。
- descでタスクの説明を追加します。
- task :sample_task => :environmentでsample_taskという名前のタスクを定義し、:environmentタスクに依存していることを示します。これにより、タスクが実行される前にRails環境がロードされます。

# Rakeタスクの実行方法

カスタムRakeタスクを実行するには、rakeコマンドを使い、名前空間とタスク名を指定します。上記の例の場合は：

```bash
rake my_tasks:sample_task
```

# タスクの追加機能

- タスクの依存関係: タスクが他のタスクに依存することを指定できます。以下のように、タスクのブロックの前にタスク名の配列を渡します：

```ruby
task :my_task => [:db, :environment] do
  # タスクの処理
end
```

- 引数: タスクは引数を受け取ることができます。以下のように定義します：

```ruby
task :greet, [:name] do |t, args|
  puts "こんにちは、#{args.name}さん！"
end
```

このタスクは以下のように実行します：

```bash
rake greet[太郎]
```

- エラーハンドリング: タスク内で例外処理を行うことができます。標準のRubyのエラーハンドリングを使用します：

```ruby
task :sample_task do
  begin
    # エラーが発生する可能性のあるコード
  rescue => e
    puts "エラー: #{e.message}"
  end
end
```

# 例：よく使うタスク

## データベースのバックアップ

```ruby
namespace :db do
  desc "データベースのバックアップを取ります"
  task :backup do
    timestamp = Time.now.strftime("%Y%m%d%H%M%S")
    backup_file = "db/backup_#{timestamp}.sql"
    system("pg_dump -Fc --no-acl --no-owner -h localhost -U myuser mydb > #{backup_file}")
    puts "データベースのバックアップが#{backup_file}に保存されました"
  end
end
```

## 古いレコードの削除

```ruby
namespace :cleanup do
  desc "古いレコードを削除します"
  task :remove_old_records => :environment do
    old_records = Model.where("created_at < ?", 1.year.ago)
    old_records.destroy_all
    puts "#{old_records.count}件の古いレコードを削除しました。"
  end
end
```

## 通知メールの送信

```ruby
namespace :notify do
  desc "通知メールを送信します"
  task :send_emails => :environment do
    User.where(notified: false).find_each do |user|
      UserMailer.notification_email(user).deliver_now
      user.update(notified: true)
    end
    puts "通知が送信されました。"
  end
end
```

RakeタスクはRailsアプリケーションのライフサイクルを自動化する強力なツールです。開発や運用の際に便利なので、ぜひ活用してみてください。

今日は以上です。

ありがとうございました。
よろしくお願いいたします。
仮想環境とは ~Pythonを始めるにあたって必須の知識~

# 仮想環境とはそもそも何か？

### 1. **仮想環境とはそもそも何か？**

仮想環境とは、コンピュータ内で実際のシステムから隔離された**独立した環境**を作成する技術です。この環境には独自の設定、依存関係、ライブラリ、アプリケーションが含まれ、メインのシステムに影響を与えることなく動作します。
仮想環境はOS全体を仮想化する仮想マシン(VM)とは異なり、軽量で特定のプロセスやアプリケーションのために**専用の環境**を用意することが目的です。

### 仮想環境とは、自分のPCの中に複数の仮のPCが入っているイメージです。

#### 仕組み:
仮想環境は、ホストシステム上で動作するが、特定のディレクトリ内にライブラリや依存関係を管理します。これにより、同じホストシステムで動作している他のプロセスやアプリケーションとは完全に独立して動作します。

#### 具体例:
例えば、あるアプリケーションXがPythonのversion3.1.1，numpy(Pythonライブラリ)のバージョン1.0を使用し、
別のアプリケーションYがPythonのversion3.1.2，numpyのバージョン2.0を必要としている場合、
仮想環境を使えばそれぞれのアプリケーションが異なるバージョンを使用でき、互いに干渉することがありません。

<イメージ図>
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3795703/5988cce8-5fae-b739-1da4-3649decbc118.png)


---

### 2. **仮想環境を導入するメリットは何か？**

メリットは大きく3つあります

- **依存関係の衝突を避ける**  
  異なるプロジェクトが異なるバージョンのライブラリを必要とする場合、仮想環境を使うことで、それぞれのプロジェクトに専用の環境を提供できます。これにより、ライブラリのバージョンや依存関係が衝突することなく運用可能です。

- **セキュリティ**  
  仮想環境は、メインのシステムから隔離されているため、アプリケーションやライブラリの動作がホストシステム全体に影響を与えるリスクが減少し，そして安全にパッケージの追加や変更ができます。
特に実験的なソフトウェアや、信頼性が確認できない外部ライブラリを試す場合に有用です。

- **プロジェクトの再現性，移植性**:  
  仮想環境を使用すると、`requirements.txt`や`Pipfile`などを使って、他の開発者が同じ環境を簡単に再現できるようになります。これにより、同じ環境で動作確認や開発を進められ、共同作業が円滑に進みます。  




# Pythonの仮想環境にはどんな種類があるのか？

Pythonにはいくつかの仮想環境管理ツールがあります。それぞれの特徴を簡単に紹介します。

- **venv**:  
  Pythonに標準で付属している仮想環境ツールで、軽量かつシンプルな環境を作成できます。追加のインストールが不要で、特定の依存関係がないプロジェクトに向いています.
</br>

- **virtualenv**:  
  `venv`よりも高度なカスタマイズが可能なツールで、古いPythonバージョンとも互換性があります。開発者が細かく環境を設定したい場合や、多くの依存関係を持つプロジェクトに便利です。
</br>

- **conda**:  
  データサイエンスや機械学習のプロジェクトでよく使われるツールです。`conda`はPythonだけでなく、Cライブラリや他の依存関係も管理でき、Anacondaディストリビューションに含まれています。NumpyやPandasなどの科学計算ライブラリが必要なプロジェクトに最適です。
[Anaconda パッケージリポジトリが「大規模な」組織では有償となっていた](https://qiita.com/tfukumori/items/f8fc2c53077b234384fc)
しかし上記の記事のような背景があるので，今から新しくPythonの導入を考える方は
- **Miniconda + conda forge**
- **Docker**
のどちらかで環境構築をすることをお勧めします．
（Dockerはコンテナ型仮想化と呼ばれるソフトウェアなので，ここに載せるのは少し違うかもしれませんが，本筋とずれるので，一旦説明は割愛します．）

尚，Miniconda + conda forge　のインストール方法は以下の記事を参照してください．
[ガチ初心者のためのPythonチュートリアル　～AI・データサイエンティストへの第一歩～]()
コメント表示/非表示切替の実装

# はじめに
ユーザーたちがコメントして交流できるようにしたい！という思いでコメント機能を実装したものの、コメントによってネタバレが起きてしまったり、コメントは表示させたくない！というユーザーのニーズに応えるため、コメントの表示/非表示切替を実装しました！

※教材7-6コメント機能をつけてみよう が完了している前提の記事になります！


# HTMLの記述(今回showページに記述)
```Ruby:show.html.erb
#showのコメントの部分を以下のように訂正

<div class="comment-wrapper">
        <button id="toggle-comments" class="btn btn-secondary">
            コメントを表示
        </button>
        <div id="comments" style="display: none;">
            <p>コメント一覧</p>
            <% @comments.each do |c| %>
                <div>
                    <%= c.user.name unless c.user.blank? %>
                    <br>
                    <%= c.content %>
                </div>
                </br>
            <% end %>

            <% if user_signed_in? %>
                <%= form_with(model: [@〇〇(変数名), @comment], local: true) do |f| %>
                    <%= f.text_area :content %>
                    <%= button_tag type: "submit" do %>
                        <i class="far fa-comments"></i> コメントする
                    <% end %>   
                <% end %>
            <% end %>
        </div>
    </div>
    
    ※以下省略
```


# javascript/packs/application.jsに下記を追加
```javascript:application.js

document.addEventListener('turbolinks:load', () => {
    const toggleButton = document.getElementById('toggle-comments');
    const commentsDiv = document.getElementById('comments');
    if (toggleButton && commentsDiv) {
        toggleButton.addEventListener('click', () => {
            if (commentsDiv.style.display === 'none') {
                commentsDiv.style.display = 'block';
                toggleButton.textContent = 'コメントを非表示';
            } else {
                commentsDiv.style.display = 'none';
                toggleButton.textContent = 'コメントを表示';
            }
        });
    }
});
```
これらの記述が完了すると、コメントを表示/コメントを非表示というボタンが追加されると思います！
是非やってみてください！


# おわりに
やってみてね！
【Error】古いCSSやjavascriptがのこっていてうまくいかない

# はじめに
今回はなぜか古いファイルが残ってしまい、新しいファイルが反映されない問題が起こったので、（一応？）解決までの流れを、次回の為にも残しておきたいと思います

## 環境
- Windows, WSL
- Docker
- Ruby 3.2.3
- Rails 7.1.3


## おこったこと
app/javascript/application.jsに前のコードを消し、新しいコードを入力しました。
そして以下の流れ
```ruby
bin/dev
docker compose down
docker compose up
```

これで古いのは抹消されたかと思いきや、いきていました。

## さらに試したこと
### **1. ブラウザのキャッシュをクリアする**

ブラウザは、表示を早くするためにキャッシュを使うことがあるそうで、新しいファイルが反映されない場合、まずはブラウザのキャッシュをクリアしてみました。

- **Chromeの場合**:
    1. ブラウザの右上にある3つの点をクリック。
    2. 「その他のツール」→「閲覧履歴の消去」を選択。
    3. 「キャッシュされた画像とファイル」にチェックを入れ、「データを消去」をクリック。

### 2.上記だけでは解決しなかった 
開発ツールのConsoleでまだ、古いのが残っていて、エラーが出ていました。
そして以下を実行することで何とか解消
```ruby
rails assets:clobber # 古いアセットを削除
rails assets:precompile # 新しいアセットを生成
```

この後再びローカルサイトを訪れても反映されていなかったので再度
```ruby
bin/dev
docker compose down
docker compose up
```

で何とか古いファイルはなくなった（はず。エラーは出ていないから）

# さいごに
人に尋ねることで開発ツールで出ていたエラー内容を理解し、解決までは自分で何とかできましたが、、さらなるエラーが待っていました。
開発ツールからエラー内容を正確に読み取るにはまだまだ時間がかかりそうですが、頑張る！！
今回の記事が何かの参考になれば幸いです。
しばらく使わなくなったディレクトリ達へ

よく整理されてはいるけど利用頻度がとてつもなく低いディレクトリ達をまとめて圧縮してしまうと、何がなんだかわからなくなるので、ディレクトリごとにサッと圧縮するということをした。
```sh
#!/bin/sh
cd 対象ディレクトリ || exit
for dir in */; do
  base="$(basename "$dir")"
  dir="${dir%/}"
  tar -cvzf "${base}.tar.gz" "${dir}"
  rm -rf "${dir}"
done
```

少々安全面に問題はあるが、まるで使わなくなったものがgrep, findの対象から外れるという点も良い。
たまに必要になった際に探しやすく必要なものだけ解凍できるので気に入っている。
httpからhttpsに対応したら急にjavascriptの何かが動かなくなった。

Djangoでwebアプリを作成中の出来事。
先程までできていたカレンダーから選択する機能が使えなくなっている。
そういえばさっきhttpsに変更したわ。

コンソール画面を確認するとエラーメッセージが来ている。
```Mixed Content:load all resources via HTTPS to improve the security of your site```とのこと。混在コンテンツ？こちらを調べてみる。

https://developer.mozilla.org/ja/docs/Web/Security/Mixed_content

つまり、せっかくwebページ全体をHTTPS通信で安全に扱っているのに、一部でHTTP通信を使っているせいでそこから悪いやつがアタックして、例えばjavascriptのコードを書き換えたりできちゃうってことみたい。

そこでコードを見てみると

```
<script src="https://code.jquery.com/jquery-1.10.0.min.js"></script>

```
あった、このjqueryのCDNだけhttpとなっていた。
これをhttpsに書き換えたらいいの...かな。

これでgit pullっと。よし！カレンダーが戻ってきた！🤩

![スクリーンショット 2024-09-06 19.19.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3879680/299bcbb3-36d6-ce87-b54c-554b1a583f17.png)

このs一文字で大きく変わってしまうんだなあと痛感し、しっかりサーバー内部で起こっていることを深く学習したいと思う出来事でした。
LaravelでGemini APIを使おう

## はじめに
ChatGPTもいいけどGeminiもアツいよね、ということで使おうとしたのですがどうにも資料が少なくずいぶん苦労したのでやり方をまとめました。

## 環境
```
$ php -v
PHP 8.2.20 (cli) (built: Jun  4 2024 13:22:51) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.2.20, Copyright (c) Zend Technologies
    with Zend OPcache v8.2.20, Copyright (c), by Zend Technologies

$ php artisan --version
Laravel Framework 11.22.0
```

## 手順
### 1. Google Cloud Platformへの登録＆APIキーの発行
・[Google Cloud Platform](https://console.cloud.google.com/)にユーザ登録
・「APIとサービス」の「Generative Language API」を有効にする
・「APIとサービス」の「認証情報」からAPIキーを作成する
　・このとき、APIの制限で「Vertex AI API」と「Generative Language API」にチェックを入れておく
　　・Generative Language APIのみで良い可能性あり

### 2. Laravelプロジェクトへライブラリをインストール
``` bash
$ composer require google-gemini-php/laravel
$ php artisan gemini:install
```

### 3. envの設定
.env に追記
```
GEMINI_API_KEY={1.で作成したAPIキー}
```

### 4. クラスの作成
```
<?php

namespace App\Libs;

use Gemini\Laravel\Facades\Gemini;

class GeminiApi
{
    /**
     * Gemini API 呼び出し
     */
    public function callGeminiApi(string $prompt): string
    {
        return Gemini::geminiPro()->generateContent($prompt)->text();
    }
}
```

## まとめ
ChatGPTのAPIを使用したときはなんだかんだcurlになったのですが、Geminiの場合は専用のライブラリがあり実際に記述するコード量も非常に少なくなりました。
が、やっぱり資料の少なさが非常にネックですね。

この記事が誰かの一助になれば幸いです。
（誤字脱字発見時のお願い）編集リクエスト歓迎です！せっかくなのでやり方のご案内

## 今日言いたいこと
:::note warn
- 勉強会で講義を聞くこと（インプット）はできても、アウトプットをしないと知識の定着が難しいよ！
- 手っ取り早いアウトプットは「質問をする」こと。アウトプットの量は（あればいいけど、慣れないうちは）重要ではない
:::

## 発端
ちゃんと私の意見を言っておいた方がいいなー、と思ったのでQiitaでの記事編集リクエストについて、歓迎ですよ！という話を発信するためだけの記事です。
（一部、コミュニティメンバー向けに書いているのでLinuC Open NetworkのOrganizationを入れてます。コミュニティ活動の意思表示の一つとしてご活用いただければと思っています）

## 記事編集リクエストとは？
昨今、コミュニティも賑わってきて良い流れができているので、発信について気になったところや記事で分からなかった部分について、補足をもらえると助かります。
（そして、私自身が完全な記事を書いて出せていると思っておらず、どこかでウッカリやらかしもしてます…）

そこで、本稿の左側にもあるこちらの「記事編集リクエストを送る」より修正箇所をご案内いただけると嬉しいです！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/122800/1b0c3b5b-227a-5700-27d0-03a0519ba103.png)

ぜひお願いします！

### いただいたコメントへのスタンスについて
昨今の風潮なのでしょうが、相手の発言に対して指摘をする／自分の発言に対して指摘をされる事に「自分や相手への否定」という思考があることを感じています。
私が古いのかエンジニア文化に染まったのかは分かりませんが「自分の代わって改善点を教えてくれている善意の人」という思考であるため、いただいた内容を否定・悲観していないので、ぜひ交流の一つと考えて（私が気づいていない事を）教えていただけると幸いです。

### もし悪意や期待しない状態になったら？
もし悪意を感じることがあればQiitaに書く事は控えますし、コメント欄で私以外のユーザーとのコミュニケーションで発散されているようなら、記事自体を非公開または削除して問題箇所を対応する事も考えます。
そうしていない記事については基本的に何でもアリというスタンスです。

特に何かしらの理由で話題になり、通常ありえない規模のアクセスが発生した場合などぐらいかな、と思ってます。

### コメントは結構見落とす（見てない or 見てるけど対応を忘れて、どの記事にコメントがついていたか確認できなくて諦めてる）
率直にお話しすると、私の書く記事は他の人のためになるように記事を書こう！というモチベーションが根本的に欠落しています。
ナレッジライティングの知見を獲得するために書く、というモチベーションの方が強いのです。

昔はコメントやリアクションで一喜一憂したり、色々議論したいという気持ちもあったのですが、長く生きていると良くも悪くも話題の渦中に巻き込まれるということの一つや二つは経験するもので、周囲の人の反応を気にして身の振り方を変えるのは馬鹿馬鹿しくなっていきました。
たとえば、ちょっと他の人からコメントやSNSを通じて何か言われたからと言って生活が変わるわけでもないですし、ましてやエンジニアリング系の記事の在り方で揉めて不特定多数に取り上げられる、という話も聞いた事はないので、誤解を恐れずにいうと些末ごとを気にして生きていくのは勿体ないなと。
（その結果が「この人は急な連絡は取れない時がある」という認識に広がってるんだろうな、という部分では一抹の申し訳なさもありつつ）

とまぁ、こういう状態ですので発信がやたら多いですし、受け手側がどのように感じるか、というのはビジネスや私生活で気にする事はあっても、オンラインでまでやってられないという考えでいます。
もちろん、人を無碍に扱おうとしているとかそういう話ではなく、自身から声掛けをする以上は礼儀も尽くすべきですし、アポ無し（記事にコメントなど）であるなら自分の対応のために相手の時間を奪うべきではない、という思想であるため、リードタイムは最小になるよう努力しています。

### その上で、編集リクエストで送って欲しい
というのが、私のお願いです。
Qiitaに限った話をすると、せっかく編集リクエストというわざわざコメント以上に見やすい位置に通知できる仕組みがあり、また変更がわかりやすいものがあるのだから是非使って欲しいな、と思っています。
これはコミュニティメンバー限定になってしまって恐縮ですが、Qiitaに慣れていない方は、私を相手に編集リクエストの練習をして欲しいと思っています。
（編集リクエストを送る事自体はコミュニティへの参加は不問ですが、練習にはお付き合いが難しいですよ、ということで、ひとつ）

## インプットとアウトプットを同時に行い、質を高める方法を追求しよう
という活動の一環で、本稿でした。
一人でできないことは、協力者を探してみると結構簡単に見つかるので、ぜひ気になった事、何気ない事でも発信してみてください。
音声認識システムを構築してみた

今回はあるお客様より音声で装置（オシロスコープ）を動かしたいと
要望を頂いた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339052/e1acfa81-af8c-55ec-2000-e85ca99bdf31.png)

オシロスコープを使用しているときは、両手が塞がるため、音声で操作をしたいらしい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339052/9c7ec0e6-1b54-8009-1ca7-b0cc0601dd1d.png)

よって今回は音声認識モジュールとESP32を使用して、
音声によるオシロスコープ操作システムを構築した！
出来上がった試作機は↓これ
![IMG20240910103232.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339052/49a84407-7f43-872f-6bd2-60d2925109f0.jpeg)


## ハードウェア
・EasyVR3（音声認識モジュール）
・ESP32-C3
・ケース（電池ケース付き）
・スピーカー

## 手順
１、まずはEasyVR3を設定するためのソフトウェアをダウンロードする必要がある。
動作確認用に「EasyVR Commander」
音声設定用に「QT2SI Lite Software」をインストールする。

２、EasyVR Commanderは以下のURLよりダウンロード。インストール手順に従ってインストールするが途中でT2SI-Liteもインストールするか確認されるため必ず「はい」を選択する。
https://www.fortebit.tech/download/13195/

３、QT2SI Lite Softwareは、有償ソフトウェアなので以下のサイトからライセンスを購入する必要がある。購入後はライセンスシートが発送されるためそのシートに従ってライセンスを取得。
（指定サイトに飛んでライセンス登録する必要がある）
https://www.fortebit.tech/qt2si-lite-software/

４、EasyVR Commanderをインストールすると自動的に音声設定用ソフトが「QuickT2SI」という名称でインストールされる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1339052/59ca642b-b848-d8cd-7ca2-da580a6f06ae.png)

５、QuickT2SIを起動し、音声プログラムを作成。
６、EasyVR Commanderにて作成した音声プログラムの動作確認。
７、ArduinoIDEにてプログラム開発。

案件の詳細が開示できないためここまでしか記事にできませんが、
音声で計測器や測定機器、装置、機械などを動かせれば、
かなりの作業効率化が図れます。
（完成品を納入したお客様は作業効率が30%上がったらしいです。）

音声でいろんな物を操作したい方はお気軽にご相談くださいー！(^o^)
HTTPメソッドの使い分けと意図の明確化について


## 【これを書くに至った経緯】
<br>

これまで、開発の中でHTTPメソッドは**GET**と**POST**しか使用しておらず、「GETはサーバーからデータを取得し、POSTはリクエストをサーバーに送信する」という認識だけで十分だと感じていました。他のHTTPメソッドの利用シーンが想像できず、GETとPOSTだけでほとんどの要件を満たせると思っていたのです。

しかし、書籍やテックブログを読むうちに、その認識が誤りであることに気づきました。HTTPメソッドにはそれぞれ明確な役割があり、使い分けることでコードの意図がはっきりし、保守性も向上します。そこで、自分の学びをアウトプットとして整理するために、この記事を書こうと思いました。
<br>
<br>
## 【HTTPメソッドの役割とサーバー処理への影響】
<br>

HTTPメソッドにはそれぞれ異なる役割が割り当てられており、リクエストの意図を明確に伝えるために存在しています。たとえば、**POST**は新しいリソースの作成に使用され、**PATCH**は既存リソースの部分的な更新に使用されます。しかし、これらのメソッド自体がサーバー上のデータ処理（登録や更新）に直接影響を与えるわけではありません。実際のデータ処理は、サーバー側のプログラムやデータベース操作によって実行されます。

つまり、HTTPメソッドはサーバーでの処理内容を厳密に変えるものではなく、クライアントがサーバーに対して何をリクエストしているかという意図を伝えるための手段です。たとえば、PATCHリクエストが「部分的な更新」を意味するものの、実際にその更新処理がどのように行われるかは、サーバー側のロジックに依存します。サーバーは受け取ったリクエストに基づいて適切なデータ処理を実行します。

このように、HTTPメソッドはサーバー処理の挙動を決定するのではなく、リクエストの性質や意図を明示するための通信プロトコルにおける表現方法ということです。
<br>
<br>
## 【HTTPメソッドの使い分けの目的】
<br>

HTTPメソッドの使い分けは、主にリクエストの意図を明確に伝えるためにあります。サーバー処理においては、**POST**や**PATCH**、または他のHTTPメソッド（**PUT**、**DELETE**など）を使ってもデータ処理が可能ですが、それが正しい意図を反映しているかどうかが重要です。

たとえば、データを新規に作成する際には**POST**を使い、部分的な更新には**PATCH**を使うことによって、コードを読んだ他の開発者が一目でそのリクエストの目的を理解できるようになります。
<br>
<br>
## 【HTTPメソッドの挙動の違い】
<br>

HTTPメソッドは、リクエストの目的だけでなく、その挙動にも違いがあります。ここでは主要なHTTPメソッドについて、その役割と特徴を説明します。

### 1. GET
- **役割**: サーバーから指定されたリソースのデータを取得します。
- **特徴**: 副作用がなく、繰り返し実行しても結果は同じ。リクエストがサーバーに変更を加えず、何度実行しても同じ結果が得られます。
  - **例**: ユーザー情報を表示するためにデータを取得する操作。

### 2. POST
- **役割**: サーバー上に新しいリソースを作成します。
- **特徴**: 結果が毎回異なる可能性があり、サーバーの状態に影響を与える。リクエストを繰り返すと、新しいリソースがそのたびに作成される可能性があります。
  - **例**: 新規ユーザー登録のためのフォーム送信。

### 3. PUT
- **役割**: 指定されたリソースを新規作成するか、既存のリソースを完全に置き換えます。
- **特徴**: リクエストを繰り返しても結果は同じだが、サーバーのデータが変更される。同じリクエストを何度送っても、リソースが同じ状態に更新されます。
  - **例**: ユーザーの情報を全体的に更新する操作。

### 4. PATCH
- **役割**: 指定されたリソースの一部を部分的に更新します。
- **特徴**: 結果が異なることがあり、リクエストごとにリソースが変更される。一部のデータのみが更新され、サーバーに変更を加えます。
  - **例**: ユーザーのメールアドレスだけを変更する操作。

### 5. DELETE
- **役割**: サーバー上の指定されたリソースを削除します。
- **特徴**: リクエストを繰り返しても、一度削除されたリソースは再度削除されない。削除が一度成功すると、以降のリクエストはリソースが存在しない状態です。
  - **例**: 特定のユーザーを削除する操作。

### 6. HEAD
- **役割**: リソースの内容ではなく、そのメタデータ（ヘッダー情報）を取得します。
- **特徴**: GETメソッドに似ているが、リソース本体を返さない。繰り返し実行しても、サーバーの状態は変わりません。
  - **例**: リソースの存在確認やサイズを取得するリクエスト。

### 7. OPTIONS
- **役割**: 指定されたリソースに対して、使用可能なHTTPメソッドの一覧を取得します。
- **特徴**: サーバーの状態には影響を与えない。リソースに対して許可されているメソッドを確認するために使用されます。
  - **例**: リソースがGET、POST、PATCHなどのどのメソッドに対応しているかを確認する操作。

### 8. TRACE
- **役割**: クライアントとサーバーの間の通信経路を追跡します。
- **特徴**: 主にデバッグ用のメソッド。クライアントからサーバーに至るルートを調べ、サーバー上には変更を加えません。

### 9. CONNECT
- **役割**: 通信トンネルを確立し、プロキシとして通信を中継します。
- **特徴**: SSL/TLSなどのセキュアな通信に使用される。クライアントとサーバーの間に安全な通信路を確立します。
<br>
<br>

## 【適切なメソッドを選択する理由】
<br>

仮に、新規データの登録に**DELETE**メソッドを使用しても、技術的にはデータベースにリクエストを送信し、登録処理を実行することは可能です。しかし、**DELETE**は本来リソースを削除するためのメソッドであり、これをデータ登録に使用すると、他の開発者がコードを見た際に「削除の処理だ」と誤解してしまう可能性が非常に高くなります。このため、データを新規作成する際には**POST**を使用することが推奨されます。
<br>
<br>

## 【まとめ】
<br>

HTTPメソッドの使い分けは、サーバー処理自体を決定するものではなく、リクエストがどのような意図で行われているのかを明確にするためのルールであり、メソッドにはそれぞれ異なる**べき等性**や**安全性**といった性質も備わっているため、これらを理解した上で適切に使い分けて今後開発に励みます。
Claude Engineerの革新的な音声モード：AI開発支援の新時代

## はじめに

ソフトウェア開発の世界では、効率的なツールが成功の鍵を握ります。その中で、AnthropicのClaude Engineerが、開発者コミュニティに新たな革命をもたらしています。最新のアップデートで導入された音声モードは、AI支援型開発の概念を一新し、より直感的で効率的な開発環境を実現しました。

## Claude Engineerとは

Claude Engineerは、AnthropicのClaude 3およびClaude 3.5モデルを活用した高度なコマンドラインインターフェース（CLI）ツールです。幅広いソフトウェア開発タスクを支援し、最先端の言語モデル技術と実用的な開発ツールを融合させています。

## 音声モードの革新性

<blockquote class="twitter-tweet" data-media-max-width="800"><p lang="ja" dir="ltr">Claude Engineerに音声モードがあったので使ってみた！<br>思ったよりもハンズフリーでの指示は楽！！<br>これならトイレでも風呂でも料理中でもアイデア出た瞬間にコーディングできちゃう！！<br>＊日本語には未対応（LLMのために英語の勉強するか）<br>＊２回目の指示ができないなどバグがある模様。。。 <a href="https://t.co/7Qv7dIJLoG">https://t.co/7Qv7dIJLoG</a> <a href="https://t.co/JmpSGkekEs">pic.twitter.com/JmpSGkekEs</a></p>&mdash; Maki@Sunwood AI Labs. (@hAru_mAki_ch) <a href="https://twitter.com/hAru_mAki_ch/status/1831982989796155816?ref_src=twsrc%5Etfw">September 6, 2024</a></blockquote>

### 1. ハンズフリー操作

新しい音声モードの最大の特徴は、完全なハンズフリー操作です。開発者はキーボードから手を離し、声だけでAIアシスタントと対話できるようになりました。これにより、コーディング中の思考の流れを中断することなく、アイデアや質問をスムーズに伝えることが可能になります。

### 2. マルチタスキングの効率化

音声モードを使用することで、開発者は複数のタスクを同時に進行させることができます。例えば、コードをレビューしながら、音声でバグの修正案を求めたり、新機能のアイデアをブレインストーミングしたりすることが可能です。

### 3. アクセシビリティの向上

この新機能は、身体的な制約のある開発者にとって特に重要です。キーボード入力が困難な場合でも、音声を通じてAI支援を受けられるようになり、開発プロセスへの参加がより容易になりました。

## 音声モードの使用方法

1. Claude Engineerを起動します。
2. プロンプトで「voice」と入力し、Enterキーを押します。
3. マイクを使って、AIアシスタントに直接話しかけます。
4. 通常のテキストモードに戻るには、「exit voice mode」と言います。

## 音声モードの活用シーン

- **コードレビュー**: コードを読みながら、音声で疑問点を投げかけ、即座にフィードバックを得ることができます。
- **デバッグ支援**: エラーメッセージを読み上げるだけで、AIが問題の解決策を提案します。
- **ドキュメンテーション**: コードを書きながら、音声でコメントやドキュメントの内容をディクテーションできます。
- **アイデア創出**: 新機能のアイデアを音声で説明し、AIと対話しながら具体化していくことができます。

## 他の新機能との相乗効果

音声モードは、Claude Engineerの他の強力な機能と組み合わせることで、さらなる効果を発揮します。

- **プロンプトキャッシング**: 頻繁に使用するコマンドや質問をキャッシュし、音声での呼び出しを迅速化します。
- **マルチファイル読み取り**: 複数のファイルを同時に分析しながら、音声で質問や指示を出すことができます。
- **動的システムプロンプト**: 音声モードでの対話履歴を基に、AIの応答をより適切にカスタマイズします。

## 今後の展望

音声モードの導入は、AI支援型開発ツールの新たな可能性を切り開きました。今後は、音声認識の精度向上や、より複雑なコマンドの音声実行など、さらなる機能の拡張が期待されています。

## まとめ

Claude Engineerの音声モードは、開発者とAIの対話方法に革命をもたらしました。キーボードから解放されることで、より自然で効率的な開発プロセスが実現し、創造性と生産性の向上につながっています。ソフトウェア開発の未来は、まさに私たちの声とAIの知性が織りなす新たな協働の形へと進化しているのです。

音声モードを活用し、あなたの開発プロセスをさらに進化させてみませんか？Claude Engineerが、あなたの声を通じて、革新的なソリューションの創出をサポートします。

 <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
カオスの描写とPython

# はじめに
微分方程式や漸化式を用いることで、過去や現在の状況から近未来の状況を予測することができる。しかし、かなり先の未来は、それらの数式によっては予想不可能な程不規則に変化する場合がある。それをカオスといい、初期条件が少し変化しただけで結果が大幅に変化してしまうことがある。今回は、質点の運動方程式（微分方程式）であるローレンツ方程式と、ロジスティック写像という漸化式を用いることで、複雑な模様を描写する。
# ローレンツ方程式

## 導入
ローレンツ方程式は、気象における大気の循環や対流の運動を簡略したモデルの微分方程式であり、以下のような単純な式で表すことができる。

```math
\begin{equation}
\left\{ \,
    \begin{aligned}
    & \frac{dx}{dt} = -px+py\\
    & \frac{dy}{dt} = -xz+rx \\
    & \frac{dz}{dt} = xy-bz
    \end{aligned}
\right.
\end{equation}

```

ただし、質点の座標を$(x,y,z)$とし、$p,r,b$を定数とする。

ここで、この単純な微分方程式は、初期条件や微分方程式の係数が少し変化するだけで、質点の運動の挙動が大幅に変化してしまう。また、運動の様子ですらかなり複雑である。

## プログラム
以下のようなプログラムを書く。

```python Lorenz.py
import numpy as np
import matplotlib.pyplot as plt
import math
import japanize_matplotlib

#定数設定
p=10
r=28
b=8/3
#初期条件 (x,v,a)=(位置,速度,加速度)
x=np.array([1,0,0])
#斜め上に発射
v=np.array([0,2,1])

#3次元のグラフ（散布図）を描くための設定
fig = plt.figure()
ax = fig.add_subplot(projection='3d')

#初期時間
t=0
#微小時間の時間間隔(小さくするほど精度は上がるが計算時間が比例して増大する)
delta_t=0.01
while(t<10):

    #位置の微小変化
    x=x+v*delta_t
    #微分方程式
    v=np.array([-p*x[0]+p*x[1],-x[0]*x[2]+r*x[0]-x[1],x[0]*x[1]-b*x[2]])

    #時間の更新
    t=t+delta_t
    #print(x)
    #粒子の位置を記録
    ax.scatter(x[0], x[1], x[2], color='blue')
#グラフを保存する
plt.savefig("Lolez.png")
#グラフの表示
plt.show()
```

これを実行すると以下のような画像が出力される。

![Lolez.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686019/874e9e28-1089-08ea-7450-3d4e6fbebdbc.png)

このように、大気の循環のような複雑な軌道を示す。

# ロジスティック写像（分岐図）

## 導入

以下のような数列を考える。

``` math
x_{n+1}=ax_n(1-x_n)
```
## プログラム
ここで、$2.0<a<4.0$の範囲で定数$a$を動かしていった場合の$x$を描写するプログラムを書くと以下のようになる。

``` python logi.py
import numpy as np
import matplotlib.pyplot as plt
import math
import japanize_matplotlib

n=30000

x=0.8
a =np.linspace(2.0, 4.0, n)

for i in range(n):
  x=a*x*(1-x)
  plt.plot(a[i],x[i],"c.", markersize=1.7)

plt.savefig("logi.png")
plt.show()
```
これを実行すると以下のようになる。

![logi3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686019/35b90571-9f8f-e9a3-20b8-245622a65c5b.png)

このように、生物学の進化系統図のようなグラフを得ることができる。
ただし、このプログラムを見れば分かるが、漸化式の計算に再帰を使用せずforループを用いている。これは、再帰計算だと計算量が膨大になってしまうためである。

# まとめ

今回はPythonを用いて、微分方程式や漸化式を解き、運動などを描写するプログラムを書いた。これによって、カオスな模様を描写することができた。このような模様は、初期条件や問題設定を少し変化させることによって多種多様に変化させることができると考えられる。
【Rails7】button_toの挙動の変更の対応

## 問題
Rails6.1までは、button_toで生成されるHTMLはinputタグでしたが、Rails7からbutton_toでHTMLのbuttonタグが生成されるようになりました。
これにより、アップデート前に設定していたinputタグのCSSやJavaScriptが効かなくなります。

## 解決方法
CSSなどのinputタグをbuttonタグに変更することで対応できますが、以下の設定をconfig/application.rbに入れることで、button_toがRails6.1までの挙動に戻ります。
```ruby
class Application < Rails::Application
  config.action_view.button_to_generates_button_tag = false
end
```

## 参考
https://blog.saeloun.com/2021/08/24/rails-7-button-to-rendering/
共有メールボックスを Office 365 ユーザー メールボックスに変換する方法は次のとおりです

共有メールボックスを Office 365 ユーザー メールボックスに切り替えることは、グループ電子メールから自分の電子メール アカウントにアップグレードすることに似ています。これは、個人設定や共同作業のための優れたツールなどの高度な機能を備えたメールボックスを各人が利用できることを意味します。この変更により、誰にとっても作業がより簡単かつ効率的になり、スムーズなコミュニケーションとコラボレーションが可能になります。したがって、このガイドでは、共有メールボックスを Office 365 ユーザー メールボックスに変換するための最適なソリューションを検討します。

<h2>共有メールボックスを Office 365 ユーザー メールボックスに移行する理由</h2>
共有メールボックスからユーザー メールボックスへの移行には、いくつかの要因が関係します。同じことについて知らなくても、心配する必要はありません。以下の点を理解してください。

1. アクセス権、権限、セキュリティ設定をきめ細かく制御して、データ管理を改善します。
2. カスタマイズ可能な設定、署名、環境設定により、各ユーザーに合わせたエクスペリエンスが提供されます。
3. カレンダー、連絡先、タスク、メモへのアクセスにより、メールボックス内のタスク管理が合理化されます。
4. リアルタイムの共同編集、Teams の統合、SharePoint へのアクセスにより、チームワーク機能が強化されます。
5. メールボックスのアクティビティと特定の個人との明確な関連付けにより、責任と透明性が強化されます。
6. ポリシーと設定を個々のアカウントに直接適用して、管理を簡素化します。
7. 高度な脅威保護、データ損失防止、暗号化によりメールボックスのセキュリティ対策を強化します。
8. 組織の拡大に伴い増大する電子メール通信とコラボレーションのニーズに簡単に対応します。
9. デバイス間での均一なアクセスと設定により、シームレスなユーザー エクスペリエンスが保証されます。
10. コンプライアンス対策、保持ポリシー、監査をきめ細かく制御することで、規制順守が強化されます。

<h2>共有メールボックスを Office 365 ユーザー メールボックスに手動で変換するにはどうすればよいですか?</h2>
移行を開始する前に、タスクを続行するために Microsoft が提供する信頼できるネイティブ メソッドがないことに注意することが重要です。ただし、次のガイドラインに従って、共有メールボックスを同じテナント内の Office 365 ユーザー メールボックスに移行できます。

1. サインインし、管理者の資格情報を使用して、Office 365 管理センターに移動します。
2. Exchange 管理センターを見つけてアクセスします。
3. [受信者] タブに移動し、[共有] を選択して共有メールボックスを表示します。
4. リストから目的の共有メールボックスを見つけます。
5. [通常のメールボックスに変換] または同様のオプションを選択します。
6. プロンプトが表示されたら、変換を確認します。
7. 必要に応じてライセンスを割り当てます。
8. メールボックスがユーザー メールボックスになったことを確認します。
9. メールボックスが適切に機能していることを確認します。
10. ユーザーアクセスに必要な権限を調整します。

<h3>共有メールボックスをデータとともに Office 365 ユーザー メールボックスに移行する方法を学ぶ</h3>
上記のことから、「共有メールボックスを Office 365 ユーザー メールボックスに手動で変換する」ことが簡単な作業ではないことは明らかです。さらに、<a href="https://www.systoolsgroup.com/updates/office-365-tenant-to-tenant-migration-step-by-step-complete-guide/">Office 365 tenant to tenant migration</a> を実行したい場合、Microsoft はそれを実行するための方法を提供していません。したがって、インターネット上で利用可能なさまざまなツールから何を選択すればよいか迷った場合は、インターネット上で利用可能な自動ソリューションを選択することをお勧めします。

次に、これがソリューション SysTools (Office 365 から Office 365 移行ツール) です。これを使用すると、同じテナント内および別のテナント内で Office 365 を同時に移行できます。さらに、デルタ移行 (新しく到着したデータ用)、日付フィルター <a href="https://www.systoolsgroup.com/office365-express-migrator.html">Office 365 to Office 365 Migration</a>、Windows および Linux マシンとの互換性など、いくつかの高度な機能を提供します。このソリューションを入手するのは非常に簡単で、公式 Web サイトを開いて、ダウンロード ボタンをクリックしてプログラムを実行するだけです。その後、次のセクションで説明する手順に従います。
<h3>Instructions to Convert Shared Mailbox to Office 365 User Mailbox</h3>
以下は、共有メールボックスを Office 365 ユーザー メールボックスに数分で移行するための簡単なガイドラインです。

ステップ 1. ソースおよびターゲット プラットフォームとして Microsoft Office 365 を選択します。 
ステップ 2. 移行タスクのカテゴリを選択し、日付フィルター オプションを使用して特定のデータを選択することもできます。 
ステップ 3. その後、管理者の資格情報を入力して、ソースおよびターゲットのテナントにログインします。 「検証」ボタンをクリックします。
ステップ 4. 次のウィンドウでは、ユーザーのタスクのマッピングに使用できる 3 つのオプションが表示されます: ユーザーの取得、ユーザーのインポート、およびテンプレートのダウンロード。いずれかを選択したら、「検証」ボタンをクリックします。
ステップ 5. 最後に、「移行開始」ボタンを押して移行を実行します。
<h3>
すべてをひとつにまとめる</h3>
現在、ユーザーはクエリ、つまり共有メールボックスを Office 365 ユーザー メールボックスに変換する方法を検索しています。しかし、彼らは、このタスクを開始するために Microsoft が提供する手動の解決策がないことを知りません。そこで、この問題を回避するために、移行手順を簡単に実行できる効率の良い賢いソリューションを見つけました。それで、何が待っているのでしょうか？このソリューションを選択し、迅速かつ確実に移行を進めてください。
cordovaのビルド時に発生したエラーのメモ

久々にcordovaビルドを走らせたらだいぶエラー祭りだったのでメモ。


1. Cannot read property 'toString' of nullと表示される
→おそらくプロジェクトのcordovaバージョンとインストールしたcordovaバージョンが違うとき、設定値読み込みで起きている。プロジェクトを新規作成し直してビルドするとでなくなる。(githubにはリポジトリから引っ張ってきたときにファイル破損かなにかで起きた事例?があった)

1. Could not reserve enough space for 2097152KB object heapと表示される
→メモリサイズ不足。ハイスペ端末だと起きないかも？2GBくらいは余裕あるはずだが出ているのでちょっと謎……。
cordovaのビルド時設定のうち、gradleにかかるプロパティを指定すればでなくなる。
'org.gradle.jvmargs': '-Xmx2048m',→'org.gradle.jvmargs': '-Xmx512m',
なおファイルの場所は下記。
node_modules\cordova-android\lib\config\GradlePropertiesParser.js

1. Could not resolve com.android.tools.build:gradle:8.3.0.と表示される
→gradleがJDK11以降を要求しているときに表示されている。JDKの指定が古いcordova環境だと1.8とかになりがちなので注意。
具体的にはJAVA_HOMEの指定をJDK22にすることででなくなった。

ソース

https://github.com/apache/cordova-android/issues/936  

https://forum.tkool.jp/index.php?threads/%E3%80%90%E8%A7%A3%E6%B1%BA%E6%B8%88%E3%80%91cordova%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%AE%E3%83%93%E3%83%AB%E3%83%89%E6%99%82%E3%81%AB%E3%83%87%E3%83%BC%E3%83%A2%E3%83%B3%E3%83%97%E3%83%AD%E3%82%BB%E3%82%B9%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E7%99%BA%E7%94%9F%E3%81%99%E3%82%8B%E3%80%90androidstudio%E5%88%A9%E7%94%A8%E3%80%91.4505/
第九回: Webサイトを作ってみよう その1

こんにちは、[株式会社カスタマトリックス](https://www.customatrix.co.jp/)の寺尾です。

こちらは **新卒社員と学ぶWEBプログラミング** 企画になります。
可能な限り毎日更新していくのでご期待ください。

本日は第九回、ついに「**Webサイトを作ってみよう**」です。

前回はこちら
https://qiita.com/r-terao/items/f3c8f81897cdace152c6

第一回はこちら
https://qiita.com/r-terao/items/e6237c4dc59db9e96ec6

# 準備
### コード管理
複数人で作業を行う際、現場ではGitHubなどのバージョン管理ツールを使う事が多いですが、今回はその辺の学習は後回しにしたいため、VSCodeの**LiveShare**という拡張機能を使いたいと思います。

これは誰かのPCにあるファイルを複数人で同時にシェア開発できる便利な拡張機能です。

1. VSCodeの拡張機能からインストールする
1. ホストになる人が開発先フォルダをVSCodeで開く
1. ホストになる人が「**Share（Read/Write）**」を選択(GitHubかMicroSoftのアカウントが必須)
1. ゲストになる人が「**Join**」を選択
1. ホストからURLを貰ってゲストが接続する

### Webサーバ
本来であれば完成したコードがどうなっているかを確認するためにWebサーバを用意する必要があるのですが、これもVSCodeの拡張機能で解決します。今回使うのは**LiveServer**になります。
簡単にHTMLなどを実行でき、さらに編集時の自動更新も可能です。

1. VSCodeの拡張機能からインストールする
1. HTMLファイルを開く
1. ファイルのいずこかを右クリックし、「**Open with Live Server**」を押下する

### ポートの共有
LiveServerを開くとURLの最後に「`:5500`」などの数字が表示されているかと思います。
これはポートといって、使っているPCの該当番号にWebサイト（サーバ）の出入口を割り当てている状態です。

LiveShareのゲスト側の人はコードを実際に持っているわけではないので自力でHTMLをプレビューするのが難しい状態です。
これをLiveShareの機能で解決します。

ホスト側の人がLiveShereのタブから「**Shared Servers**」を探し、追加します。
名前を設定しポートを追加すると、ゲストもアクセスができるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2273193/44cf1004-7f53-7b0e-7cf3-492e92e4db31.png)

これで簡単に共同作業が開始できるようになりました。

# 今回作るもの
エンジニアがコーディングできるようになって最初に作るものと言えば、「**Todoリスト**」ですよね。
という事で作ってみましょう。

とはいえ、現段階ではHTMLとCSSしか覚えていないため見た目を作ってみます。

### 今回の要件
- リスト画面と詳細画面の2画面
- 3個のアイテム
- リストには「タイトル」「ステータス」「期限」を最低でも表示する
- 詳細には「タイトル」「ステータス」「期限」「詳細内容」「編集ボタン」「削除ボタン」を最低でも表示する

### ワイヤーフレーム（仮）
あまり凝ったデザインでなくても良いですが、白黒ではないデザインが良いです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2273193/f3b3362f-3542-17b1-f2db-de7f3595fe6d.png)

これまで多くの人がTodoリストを作ってきているので、参考にすると良いと思います。

# まとめ
- LiveShareとLiveServerを利用すると共同作業を非常に簡易に開始できる

ついに開発が開始しました。
弊社の新人たちのコードが出来上がった頃に、次はJavaScriptやレスポンシブについて学んでいきます。

# おまけ
株式会社カスタマトリックスはエンジニアを募集しています！
完全未経験でも可！

- 新卒の方
https://www.customatrix.co.jp/newgrads/index.html

- 中途の方
https://customatrix.co.jp/career/index.html

https://www.instagram.com/cmx_pr/
Pythonのインストールすべきバージョンについて　　　2024年版（2024年9月現在）　

# 記事を読む前に
この記事は，新規にPythonを導入する方向けの記事となっています．
既存のプロジェクト，Pythonコードを動かすためにPythonを導入しようと考えている方は，そのプロジェクトのPython環境に合ったversionをインストールすることをお勧めします．
（異なるversionで実行すると，エラー発生の原因になり得る）

# この記事のゴール
- 2024年現在のpythonのversion事情について理解する
- インストールすべきversionを理解する
- 既にインストールされているversionの確認方法を知る


# Pythonのバージョンについて
結論，

### Pythonのおすすめのバージョンは3.12です！


#### ※ただし，これは新しくPythonを導入する方はです！（上記参照）

Pythonの現在の最新バージョンは**3.12**です．
以下は[Pythonの公式HP](https://devguide.python.org/versions/)に掲載されているversion情報です．

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3795703/f585aaf9-1c0b-40aa-2c56-53978177410f.png" width="600">

参考[https://devguide.python.org/versions/]
<br/>


画像について詳しく説明します
まず，それぞれのversionの状態を表す用語についてですが，

- <font color="Blue">feature</font>：開発段階だからバグも多いかもで，修正しながらだけど，めちゃめちゃ新しいし，新機能を体験できます！
<br/>

- <font color="Green">prerelease</font>：もうそろそろリリースしますよ！リリースしたら皆からのバグやセキュリティ，機能修正に応じます！

<br/>

- <font color="MediumSpringGreen">bugfix</font>：安定な状態ですよ！新機能も追加するしバグやセキュリティの修正にも応じます！
<br/>
 
- <font color="Gold">security</font>：セキュリティ面は保証します！機能やバグ修正はもうしません

<br/>

- <font color="Red">end-of-life(eol)</font>：バグ修正しないし，セキュリティ面も保証できません

また下の数字はいつリリースされて，いつeolになってしまうかを示しています．
（例えば,3.12であれば，大体2023年末にリリースされて2028年末にeolになり得るって感じです．）

ちなみに，「Python 3.12.xx」のようにxxについても色んなversionがあると思いますが，
基本一番数字が大きいversion（最新version）を使っていれば大丈夫です！

このような事情を踏まえて改めて言うと

### Pythonのおすすめのバージョンは3.12です！


# Pythonのバージョン確認方法

インストールされているPythonのバージョン確認方法は，

Windowsであれば「コマンドプロンプト」
MacやLinuxであればお好みの「ターミナル」
を開いて，（アプリの検索バーで上記のように打てば出てきます）

```python:【入力】
python3 -version
```
もしくは
```python:【入力】
python3 -V
```

と打てば確認できます！！
[GitHub] GitHub CLI コマンド一覧

# 一覧
## リポジトリ操作
~~~terminal:terminal
# リポジトリの作成
$ gh repo create [<name>] [flags]

# リポジトリのクローン
$ gh repo clone <repository> [<directory>] [flags]

# リポジトリのフォーク
$ gh repo fork [<repository>] [flags]

# リポジトリ内容の閲覧
$ gh repo view [<repository>] [flags]
~~~


## プルリクエスト操作
~~~terminal:terminal
# プルリクエストのブランチへのチェックアウト
$ gh pr checkout {<number> | <url> | <branch>} [flags]

# 現在のブランチからのプルリクエストの作成
$ gh pr create [flags]

# プルリクエストのクローズ
$ gh pr close {<number> | <url> | <branch>} [flags]

# プルリクエストの差分を確認
$ gh pr diff {<number> | <url>} [flags]

# プルリクエストの一覧を取得
$ gh pr list [flags]

# プルリクエストをマージ
$ gh pr merge [<number> | <url> | <branch>] [flags]

# プルリクエストにレビューを追加
$ gh pr review [<number> | <url> | <branch>] [flags]

# プルリクエストの内容を閲覧
$ gh pr view [<number> | <url> | <branch>] [flags]

# 自分に関係のあるプルリクエストのステータスを閲覧
$ gh pr status [flags]

# ドラフトのプルリクエストをレビューに変更する
$ gh pr ready [<number> | <url> | <branch>] [flags]

# クローズしたプルリクエストを再度オープンにする
$ gh pr reopen {<number> | <url> | <branch>} [flags]
~~~

## イシュー操作
~~~terminal:terminal
# イシューの作成
$ gh issue create [flags]

# イシューのクローズ
$ gh issue close {<number> | <url> | <branch>} [flags]

# イシューの一覧表示
$ gh issue list [flags]

# イシューの再オープン
$ gh issue list [flags]

# 自分の関連するイシューのステータス確認
$ gh issue status [flags]

# 指定のイシューの閲覧
$ gh issue view {<number> | <url>} [flags]
~~~


# 参考リンク
- [gh repo](https://cli.github.com/manual/gh_repo)
- [gh pr](https://cli.github.com/manual/gh_pr)
- [gh issue](https://cli.github.com/manual/gh_issue)