OmniAICreator/Qiita-1.07M huggingface dataset:
laravelとReactの連携方法

# laravelとReactの連携方法の手順

## 1. Laravelプロジェクトの作成

まず、新しいLaravelプロジェクトを作成します。
```
composer create-project --prefer-dist laravel/laravel example-app
cd example-app
```
## 2. Laravel UIパッケージのインストール
Laravel UIパッケージをインストールし、Reactを設定します。
```
composer require laravel/ui
php artisan ui react --auth
npm install
npm run dev
```

## 3. Reactコンポーネントの作成
Reactコンポーネントを作成します。例えば、resources/js/components/Example.js に以下のように記述します
```
import React from 'react';

function Example() {
    return (
        <div>
            <h1>Hello, React!</h1>
        </div>
    );
}

export default Example;
```

## 4. Laravel Mixの設定
Laravel Mixの設定を行います。webpack.mix.js ファイルを開き、以下のように設定します。

```
const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .react()
   .sass('resources/sass/app.scss', 'public/css');
```

## 5. Bladeテンプレートの更新
BladeテンプレートにReactコンポーネントをレンダリングするための設定を行います。例えば、resources/views/app.blade.php に以下のように記述します。

```
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel & React</title>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app"></div>
    <script src="{{ asset('js/app.js') }}" defer></script>
</body>
</html>

```

## 6. Reactコンポーネントのレンダリング
最後に、Example.js コンポーネントをapp.blade.php にレンダリングするように設定します。

```
if (document.getElementById('app')) {
    ReactDOM.render(<Example />, document.getElementById('app'));
}

```
これでLaravelとReactの連携が完了しました。これで、LaravelのバックエンドとReactのフロントエンドが統合され、シングルページアプリケーションを構築する準備が整いました
量子コンパイラを作る。 その19

# 概要
量子コンパイラを作る。
elixirで論理回路アセンブラをコンパイルして、qiskitを生成できるが、結局、論理回路が書けるのかが、問題になる。（人材の問題、それなりの人の育成、、、）
そっちに、対策を取る。
論理回路アセンブラから、論理回路を生成して、ビジュアルでシュミレーションするエディタを開発する。どうだ。
実装編

# 成果物

https://embed.plnkr.co/plunk/Rbr1Dt2RaJwUP51n

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/8203659f-3507-1202-0fed-4d1b38f3a07f.png)
 
# 投入したソース
半加算器
```
make 4
in 0 1
xor 0 1 2
and 0 1 3
out 2 3

```

# 手順

ソースを書いて、RUNをクリックする。

この写真は、トグルボタンが両方とも押されている。
トグルボタンをマウスでクリックすれば、シュミレーションできる。

以上。
エンジニアで英語が初めて役にたったと思った話〜Issueを書くことのすすめ

今回寄稿するのが[エンジニアで英語が初めて役にたったと思った話 Advent Calendar 2024](https://qiita.com/advent-calendar/2024/english)なので，私の目線で，(私は正確には，ソフトウェアを専門とする，大学に在籍する研究者・教員ですが)エンジニアとして英語が初めて役に立ったと思った時の話をしてみたいと思います．

英語学習シリーズ

- [parcel に Pull Request を送って merge されるまでの顛末記〜生まれてはじめて国際的に OSS への貢献をしてみたら，とても歓待された](https://qiita.com/zacky1972/items/0ce05454b67506edc634)
- [ソフトウェア技術者のための英語習得法の案](https://qiita.com/zacky1972/items/7114bfe8c6d203c3d67e)
- [続・ソフトウェア技術者のための英語習得法の案](https://qiita.com/zacky1972/items/6a3bc8d41dff1ae9d9bf)
- [「ソフトウェア技術者のための英語習得法の案」を試すまでたどりつかない人のための英語習得法の案](https://qiita.com/zacky1972/items/cacec82e865968c300b7)
- [英語版 Wikipedia の Software Engineering の第1段落を解説してみた](https://qiita.com/zacky1972/items/963c988eee133aa21e7e)
- [TechConfにて英語で発表しよう〜ElixirConf US/EUを題材に〜その1 すごい技術を発明しないとElixirConfで発表できないのか？](https://qiita.com/zacky1972/items/62c427ea4e06e9489f17)
- [TechConfにて英語で発表しよう〜ElixirConf US/EUを題材に〜その2 Talk Descriptionの書き方](https://qiita.com/zacky1972/items/a2c3b8b91a8aadb52022)
- [TechConfにて英語で発表しよう〜ElixirConf US/EUを題材に〜その3 Bio(自己紹介文)の書き方](https://qiita.com/zacky1972/items/6212a4c227ae7df9bc24)

## 私はかつて英語が苦手だった

今から30年ほど前の学生時代には，私にとって英語は苦手科目でした．高校では赤点を取り，大学では英語が原因で留年しかけました．一方で，研究者・大学教員になったので，英語とは一生付き合わないといけません．そこで，辛抱強く，英語と向き合ってきました．

その甲斐あって，今では，英語でのプレゼンテーションは，日本語でのプレゼンテーションとは違うスタイルで，伸び伸びと出来るようになりました．特に苦手だった質疑応答も，それほど怖くなくなりました．

私のElixirConfでの最初の英語プレゼンテーションを紹介します．

<iframe width="560" height="315" src="https://www.youtube.com/embed/lypqlGlK1So?si=Ll272NZZrM4LWyh7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

私の最初のElixirConfでの英語プレゼンテーションです．日本人初のElixirConfでのプレゼンテーションです．拙い英語ですが，司会者の機転もあり，この時から，とてもリラックスして，伸び伸びとプレゼンテーションできていました．

このプレゼンテーションでは，Distopiaというようなイメージを，しつこくしつこく繰り返していますが，それは，ずいぶん昔に見た「電波少年的松本人志のアメリカ人を笑わしに行こう」で結論としていたアメリカ人にウケるギャグフォーマットに由来します．「電波少年的松本人志のアメリカ人を笑わしに行こう」では，仮説を検証する実験として，バナナでコケる古典的ギャグをしつこくしつこく繰り返すことでアメリカ人を大爆笑させることに成功し，その後，アメリカ人にはバカウケするが，日本人には全くウケないギャグを開発することに成功します．

あと，アメリカの誇る文化といえば，ハリウッド映画なので，著作権に抵触しない範囲で，ハリウッド映画のワンシーンを引用しています．ただまあ，最後の"I'll be back"と親指を立てるシーンは，同じターミネーターでも作品が違いますね．

いずれのアプローチも大成功し，拍手喝采を受け，「このイベントのBest presentationだ」という趣旨のお褒めの言葉をたくさんいただきました．このプレゼンテーションにより，私は，アメリカでは，日本におけるElixirの第一人者であるというように認識されるようになりました．

## エンジニアとして英語が初めて役に立ったと思った時の話

[parcel に Pull Request を送って merge されるまでの顛末記〜生まれてはじめて国際的に OSS への貢献をしてみたら，とても歓待された](https://qiita.com/zacky1972/items/0ce05454b67506edc634)で紹介していますが，OSSにIssueを書いたときに，エンジニアとして英語が初めて役に立ったと実感しました．

Issueの書き方をまとめた記事として，[オープンソースソフトウェア(OSS)へのIssueの書き方〜Elixirの例を題材に](https://qiita.com/zacky1972/items/6dc0485884d24263df97) という記事も書きましたので，ご紹介しておきます．

https://qiita.com/zacky1972/items/6dc0485884d24263df97

今では，息を吸って吐くように，何か問題に遭遇したら，ごく自然に，Issueを書いています．研究室の学生にもIssueを書くことについて指導をしています．

学生の皆さん向けのメッセージですが，いわゆるガクチカ(学生時代に力を入れていたこと)として，Issueを書くことをお勧めしたいなと思っています．またIssueを書くことのようなことを高く評価してくれるような情報産業や，公開勉強会で企業ロゴを掲載しているような情報産業に就職すると，技術力の高い学生にとっては幸せな就職ができるのではないかと思っています．
Neovimで開発用サーバーを建てる

:::note info
これは[Vim駅伝](https://vim-jp.org/ekiden/)の297本目の記事です。
:::

こんにちは！中学生プログラマーの苔コッコーです。HTML、CSS、Javascriptのみで簡易的なサイトを作る際、それだけのためにテキストエディタを閉じて`python -m http.server 8000`するの面倒じゃないですか？
そこで今回は、Neovimから抜けずに開発用サーバーを建てるためのプラグインを開発しました。
(Node.jsやVite、Jekyllなどには対応しません)

https://github.com/Kokecoco/serve.nvim/tree/main

# 簡単に説明
依存プラグイン：plenary.nvim
Python3が必要
`:Serve [port]`でlocalhostのサーバーを起動、デフォルトのポートは8000
`:ServeStop`でサーバーを停止。
Neovimの終了時に自動でサーバーを停止。異常終了の場合(fishでのCtrl-zなど)ではサーバーは停止しないので、適宜プロセスをkillしてください。

詳しくは[README](https://github.com/Kokecoco/serve.nvim/blob/main/README-jp.md)を参照してください。

# 開発で躓いた点
最初は、plenaryのserver_job:shutdown()でサーバーを停止する仕様にしていたのですが、なぜかうまく停止しなかったので、pidを取得してからkillで終了するようにしました。(ChatGPTに感謝です)

# 最後に
以上でserve.nvimの紹介を終わります。静的なHTMLのみの開発は現在珍しいかとも思いますが、ぜひ使ってみてください！
RaspBerryPi Pico 2 WとPWM

#### Raspberry Pi 2 W で PWM送信

C/C++におけるPWM出力の実装を行いました。目指すところは赤外線リモコンの搬送波である38kHz、1/3DutyのPWM波です。MicroPythonと違って色々難解で理解に手間取りましたが、ようやく納得のいく形に収める事ができました。今回の立役者は、[こちら](https://lipoyang.hatenablog.com/entry/2021/12/12/201432)の方です。本当にありがとうございました。

### はじめに
まず、PWMモジュールの使用に当たり、次の変更を加えます。
```CMakeLists.txt
# Add any user requested libraries
target_link_libraries(KeIR 
        hardware_spi
        hardware_i2c
        hardware_dma
        hardware_pio
        hardware_interp
        hardware_timer
        hardware_watchdog
        hardware_clocks
        hardware_pwm     ←ココ
        pico_cyw43_arch_lwip_threadsafe_background
        )
```
これを加えると、`#include "hardware/pwm.h"`が通るようになります。

### 実装
いきなり実装です。今回も、先ほどのサイト丸パクリとなっております。
```Main.c
    // f=38kHz / Duty=1/3のPWM波形出力
    gpio_set_function(PIN_PWM0, GPIO_FUNC_PWM);             // PIN_PWM0 を PWM として使用
    uint pwm_slice_num = pwm_gpio_to_slice_num(PIN_PWM0);   // PIN_PWM0 をスライス(チャネル？)0に設定

    int16_t wrap = 788;
    pwm_set_clkdiv(pwm_slice_num, 5);                       // 周期 38kHz
    pwm_set_wrap(pwm_slice_num, wrap);                      // 1/788
    pwm_set_chan_level(pwm_slice_num, PWM_CHAN_A, wrap/3);  // デューティ比 1/3

    pwm_set_enabled(pwm_slice_num, true);                   // PWM 有効
```
となります。

メインクロックをsysclock、PWM分解能の設定値をwrap、分周比をclkdiv とすると、
PWM周波数 f = sysclock / ((wrap+1) ⋅ clkdiv)
ですので、そのように各パラメータを計算(筆者の場合はExcelに式入れて所望の値が出るまで当てずっぽうでやったわけですが）します。

### 罠
ここで注意したいのが、sysclkです。Raspberry Pico/ PicoW では sysclk=133MHz なのですが、Pico2/Pico2Wではsysclk=150MHzです。PWM周波数がsysclkに依存するので、ソースそのままでPico2に移行、は難しいかもしれません。クロックアップされている方等は慣れっこでしょうけど、乗換組さんたちは躓くかもしれません。
当然上のコードは Pico/PicoWでは調整をすることになります。裏で自動計算？しません～

### 波形確認
38kHz出ています。
![NewFile1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3977217/44f4f881-ec83-9c7b-6f4c-c3ee68d0595f.png)

だいたい1/3デューティでしょうか？
![NewFile2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3977217/cc9be3eb-1310-f8d2-717f-71e736e6f562.png)

### 終わりに
頭悪いので他の方のやり方見ても全然理解できなくて、あのサイトを見つけるまで苦労しました。例外まで出しちゃって…
本当は赤外線送信まで含めるつもりだったんですが、面倒だったんでいずれ。
ソースの構造上受信から説明しないといけないので…

やりたいことは、TVチューナー(CATV)の音量ボタンで中華アンプの音量を変えることです。波形変換ですね。
MicroPythonの方ではほぼできているんですが、こちらはまだまだですね。
受信の方ですが、MicroPython版と違って受信波形データ化がめちゃ正確なんです。これがC/C++の醍醐味ですね。しばらくはC/C++に噛り付いてみようと思います。


いじょ
Go言語 × Gormでシンプルかつ効率的なモデル構築方法を学ぶ！新聞モデルを例に解説

## 概要

Go言語でデータベース操作を行う際、Gormを利用したモデル構築は非常に重要です。この記事では、新聞を管理するモデルを例に、Gormを活用したモデルの作り方を徹底解説します。

この記事を読めば以下のことがわかります：

- **Gormを用いた基本的なモデル構築方法**
- **JSON変換機能の実装例**
- **Create、Read、Update、Delete（CRUD）操作の方法**

## モデル構築の基本：Gormの活用

Gormでは、データベースのテーブルとGoの構造体を対応させることで、SQLを書くことなくデータを操作できます。  
以下は「Newspaper（新聞）」モデルの実装例です。

### 新聞モデルの定義

以下のコードは、Newspaperモデルを定義し、Gormを利用したCRUD操作を実現しています。

```go
package models

import (
	"encoding/json"

	"go-api-newspaper/api"
)

type Newspaper struct {
	ID         int
	Title      string
	ColumnName string
}

// 構造体をJSONに変換する
func (a *Newspaper) MarshalJSON() ([]byte, error) {
	return json.Marshal(&api.NewspaperResponse{ // api.NewspaperResponse に詰め替える
		Id:         a.ID,
		Title:      a.Title,
		ColumnName: a.ColumnName,
	})
}
```

### コード解説

#### `MarshalJSON` で構造体をJSONに変換

Goでは、`MarshalJSON` をカスタマイズすることで、構造体のJSON表現を自由に変更できます。この例では、別の構造体 `api.NewspaperResponse` に詰め替えています。

```go
func (a *Newspaper) MarshalJSON() ([]byte, error) {
	return json.Marshal(&api.NewspaperResponse{
		Id:         a.ID,
		Title:      a.Title,
		ColumnName: a.ColumnName,
	})
}
```

## CRUD操作の実装

以下は、新聞モデルに対してCRUD操作を行う関数群です。

### 新聞の作成（Create）

```go
func CreateNewspaper(title string, columnName string) (*Newspaper, error) {
	newspaper := &Newspaper{
		Title:      title,
		ColumnName: columnName,
	}
	if err := DB.Create(newspaper).Error; err != nil {
		return nil, err
	}
	return newspaper, nil
}
```

**解説**: 
- `DB.Create` を利用して新しい新聞レコードをデータベースに保存します。
- 保存された結果を返します。

### 新聞の取得（Read）

```go
func GetNewspaper(ID int) (*Newspaper, error) {
	var newspaper = Newspaper{}
	if err := DB.First(&newspaper, ID).Error; err != nil {
		return nil, err
	}
	return &newspaper, nil
}
```

**解説**: 
- `DB.First` を利用してIDで新聞を検索します。
- レコードが見つからない場合はエラーを返します。

### 新聞の更新（Update）

```go
func (a *Newspaper) Save() error {
	if err := DB.Save(&a).Error; err != nil {
		return err
	}
	return nil
}
```

**解説**: 
- `DB.Save` を使用して、現在のオブジェクトをデータベースに保存します。
- 更新が成功すると `nil` を返します。


### 新聞の削除（Delete）

```go
func (a *Newspaper) Delete() error {
	if err := DB.Where("id = ?", &a.ID).Delete(&a).Error; err != nil {
		return err
	}
	return nil
}
```

**解説**: 
- `DB.Where` を利用して条件付きで削除を行います。
- 該当するレコードが見つからない場合はエラーを返します。

## まとめ

この記事では、Gormを利用した新聞モデルの構築方法を紹介しました。以下のポイントを押さえましょう：

- **構造体の定義を通じてテーブル操作をシンプル化**
- **カスタムJSON変換でAPIの柔軟性を向上**
- **Gormを利用したCRUD操作の実装**

この記事のコードを活用して、あなたのプロジェクトで効率的なモデル設計を実現してください！
Javaで「パネルを作成する」の動作を確認してみた。

# 概要

Javaで「パネルを作成する」の動作を確認してみました。
以下のページを参考にしました。

https://www.javadrive.jp/tutorial/jpanel/index1.html

# 実装

以下のファイルを作成しました。

```Sample.java
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JLabel;
import javax.swing.JTextField;
import java.awt.BorderLayout;

class Sample extends JFrame{
  public static void main(String args[]){
    Sample frame = new Sample("MyTitle");
    frame.setVisible(true);
  }

  Sample(String title){
    setTitle(title);
    setBounds(100, 100, 728, 400);
    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

    JPanel panel = new JPanel();

    JLabel label = new JLabel("Name");
    JTextField text = new JTextField(20);
    panel.add(label);
    panel.add(text);

    add(panel, BorderLayout.CENTER);
  }
}
```

以下のコマンドを実行しました。

```
$ javac Sample.java
$ java Sample 
```

# まとめ

何かの役に立てばと。
AI駆動開発を考える_要件定義

# はじめに

昨今、システム開発にAIを利用することは一般的になりつつあります。
今回は、要件定義で使用できそうなAIサービスの調査や、要件定義作成の方法について考えたいと思います。

# 要件定義で活用できるAI・ツール

## AIチャットサービス

### ChatGPT

ChatGPTとは、OpenAIが開発した、人間と自然な会話ができるように設計された大規模言語モデル（LLM）の一種です。会話形式でユーザーとやり取りしながら、質問の回答や作業のサポートをしてくれます。

### Gemini

Geminiは、Googleが開発した大規模言語モデル（LLM）です。Googleの検索エンジンやその他のサービスから得られる膨大なデータを学習することで、高度な性能を実現しています。

### メモ

チャット系のAIサービスを使って、
ChatGPTやGeminiは画像を読み取って内容を分析することが可能。
画像を読み取れるのでOCRのような使い方ができそう。

## 資料作成

### **python-pptx (スライド)**

pythonでパワーポイントを操作するライブラリです。これを使用してパワーポイントの資料を自動生成できます。

https://python-pptx.readthedocs.io/en/latest/

### **Marp (スライド)**

Markdownでスライドが作れるツールです。VSCodeの拡張機能としてもあります。

https://marp.app/

# AI駆動の要件定義について考える

### 要件定義前の事前情報

要件を決めるために以下などに対してAIチャットサービスを使用した分析を行います。

- 現行の業務や現行システム
- 新しい業務
- 業務知識・ビジネスルール

上記で分析した情報を要件定義するための事前知識として活用します。
事前情報をAIチャットサービスにインプットしておくことで、ハルシネーションの問題をできるだけ回避できると考えます。

※ハルシネーション: AI(人工知能)が誤認や論理の矛盾を含む事象や事実とは異なる情報を作り出してしまう現象

### 要件定義書作成

要件を決めるために、AIチャットに指示を出していきます。
試しにTODOアプリの要件定義書を書いてもらいました。
事前情報を入力したあとに、要件定義を指示すると事前情報を含めて要件定義をしてくれました。

1. 事前情報入力
![スクリーンショット 2025-01-04 16.45.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3868196/6122edbb-d7c7-ec95-a3c7-917479d9bd4a.png)

2. 要件定義出力
![スクリーンショット 2025-01-04 16.46.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3868196/8c75efb0-acef-bdf9-38a5-84ceb1bded5e.png)

![スクリーンショット 2025-01-04 16.46.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3868196/f7bdb680-ade0-4eae-0b1b-dec8af4abb73.png)

![スクリーンショット 2025-01-04 16.46.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3868196/35927e91-8a6e-308e-3dbb-a6996e6ccbf2.png)



各プロジェクトで同様の内容が要件定義に入ってくることも多いと思うので、事前情報入力用の雛形を作っておいて事前情報の入力に活用するのも良いと思いました。

### メモ

基本設計、ソフトウェア設計のために要件定義書の書き方やフォーマットなどを検討するのが良さそう。
もしくは、作られた要件定義書から次のフェーズで使いやすい形式のファイルを出力できるようにしておく。

# まとめ

今回は、AI駆動で要件定義について考えてみました。インターネットで情報を探してみると要件定義やソフトウェア設計にAIを活用しているところも多くあり、今後一般的になってくると感じました。
今後もコーディングだけでなく、要件定義や設計にもAIを活用していく方法を検討していきたいと思います。
(コーディングはDevinなど自律的にコードを書いてくれるAIが将来使われそう)
2025/1/5主にITとかセキュリティの記事

AIサイバー攻撃の増加、カスペルスキー:戦うために技術と教育を組み合わせる必要がある(1/2)
https://voi.id/ja/teknologi/447539

ますます進化するサイバー攻撃に直面した無数の政府宿題(1/3)
https://voi.id/ja/bernas/447752

サイバー攻撃とは　銀行や病院、機能停止も(1/3)
https://www.nikkei.com/article/DGXZQOUA020VK0S5A100C2000000/

【2024年最新】ChatGPTの利用が禁止されている国！規制状況について解説(1/3)
https://xrcloud.jp/blog/articles/business/26926/

米国 NSA、CISA、FBI他 イスラム革命防衛隊（IRGC）関連のサイバー犯罪者が、米国の上下水道システム施設を含む複数のセクターのPLCを悪用 (2024.12.18)(1/3)
http://maruyama-mitsuhiko.cocolog-nifty.com/security/2025/01/post-f8df79.html

AIチャットボットを使用する際のリスク回避のための安全なガイド(1/3)
https://voi.id/ja/teknologi/447818

ドコモ、「d払い」検索などで半日障害　サイバー攻撃で(1/2)
https://www.nikkei.com/nkd/industry/article/?DisplayType=1&n_m_code=134&ng=DGXZQOUC020JM0S5A100C2000000

ドコモのシステム障害復旧　「goo」などがサイバー攻撃によりアクセスしづらい状況に(1/2)
https://news.livedoor.com/article/detail/27876666/

NTTドコモのシステム障害 復旧(1/2)
https://news.livedoor.com/article/detail/27876690/

サイバー攻撃  日本の著名な通信会社や航空会社で混乱(1/2)
https://www.arabnews.jp/article/business/article_137877/

サイバー攻撃　銀行や病院、機能停止も(1/3)
https://www.nikkei.com/article/DGKKZO85835050T00C25A1NN1000/

ドコモ「d払い」一時障害　サイバー攻撃(1/3)
https://www.nikkei.com/nkd/industry/article/?DisplayType=1&n_m_code=142&ng=DGKKZO85832570S5A100C2TB0000

ドコモにサイバー攻撃 一部サービス障害(1/3)
https://txbiz.tv-tokyo.co.jp/txn/news_txn/post_310038

ドコモ、「goo」など一部サービスに不具合　サイバー攻撃原因(1/2)
https://news.livedoor.com/article/detail/27875615/

ドコモのサイト障害が解消(1/2)
https://nordot.app/1247493812035797077?c=110564226228225532

NTTドコモ 一部サービスの不具合 おおむね解消と発表(1/2)
https://www3.nhk.or.jp/shutoken-news/20250102/1000112703.html
https://www3.nhk.or.jp/lnews/shutoken/20250102/1000112703.html

NTTドコモ　サイバー攻撃で検索サイトなど一部サービスで不具合(1/2)
https://newsdig.tbs.co.jp/articles/withbloomberg/1647413

ブロックチェーンハッカーバンディットは51.000イーサリアム盗難を新しいウォレットに送ります(1/2)
https://voi.id/ja/teknologi/447569

フォルクスワーゲンデータ漏洩が数カ月で800,000の電気自動車の場所を明らかに(1/2)
https://voi.id/ja/teknologi/447552

フォルクスワーゲン子会社で大規模データ漏洩　80万台のEV所有者の位置情報が数か月間露出(1/2)
https://www.epochtimes.jp/2025/01/273221.html

AIエージェントとは？仮想通貨とウォレットで広がる可能性(1/4)
https://coinpost.jp/?p=584600

クレジットカードの不正利用が増えています(1/3)
https://www.city.fukuyama.hiroshima.jp/koho-detail13/koho-202501/349566.html

OpenAI ChatGPT新たな脆弱性、Bad Likert Judge手法でAI防御機能を突破(1/3)
https://innovatopia.jp/cyber-security/cyber-security-news/45977/

AIが民主主義にもたらすのは、悪い影響だけではない──特集「THE WORLD IN 2025」(1/2)
https://wired.jp/article/vol55-algorithms-are-coming-for-democracy-but-its-not-all-bad/

【徹底解説】Browser Useの仕組みや安全性、設定方法までまるっと解説！(1/2)
https://chatgpt-lab.com/n/ncbfc0b1aeae4

次世代ブラウザBrave（ブレイブ）とは？｜仮想通貨BATの稼ぎ方やリスクを解説(1/3)
https://coinpost.jp/?p=549630

PCテクノロジートレンド 2025 - CPU編「Intel」と「AMD」(1/3)
https://news.mynavi.jp/article/20250103-3099225/

iPad「Bluetoothペアリング」やり方とは？ できない時の対処法まで紹介(1/2)
https://moov.ooo/article/5dc36d1532fd1d7138c85c19

健康保険証発行停止から1カ月　「マイナ保険証」 従来の保険証と何が違う？(1/3)
https://nordot.app/1247686423833886834

【香港】政府、重要インフラ・サイバーセキュリティ法案発表。事業者に義務と刑事責任(1/3)
https://sustainablejapan.jp/2025/01/03/hong-kong-protection-of-critical-infrastructure-law/109545

年末年始のDDoSによるサイバー攻撃は誰が何の目的におこなっているのか、そして今後は？(1/3)
https://news.yahoo.co.jp/expert/articles/10e8142691a8c955d3b478ec1d3f6e1133c0f306
JavaScriptでネストの深いObjectの初期化を一括で行う

# やりたいこと
以下のようにネストが深いハッシュの場合、親が`undefiend`になるので一括で初期化ができない。hash['a']のキーが存在するのか不明な時はめんどくさい。
```javascript
const hash = {}
hash['a']['b']['c'] = 1
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192137/83aadb11-4009-f403-6a6e-34fa3ab9f966.png)

# 愚直にやるなら
各階層でキーが存在するかを確認し初期化する必要がある。めんどくさい。
```javascript
const hash = {}
if(!hash['a']) hash['a'] = {}
if(!hash['a']['b']) hash['a']['b'] = {}
hash['a']['b']['c'] = 1
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192137/f3c4dc4a-af0e-9cf4-4147-87fe6dab2906.png)

# Object.assignを使う
@akebi_mh 様からコメント頂きました。Object.assignを使うとワンライナーで実現できます。

```javascript
const hash = {};
Object.assign(hash, {a:{b:{c:1}}});
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192137/3d3be61f-a1da-917f-e7ad-76a8f052451e.png)


# 再帰関数を使う
再帰関数を使って初期化していく方法。

:::note warn
この関数には問題があります。後半の「この解決策の問題点」を必ず参照してください
:::

```javascript
// hashオブジェクトに対して値が無ければ初期化する関数
const setProperty = (obj, ...keys) => {
  const key = keys[0]

  // 次のキーが無ければ終了
  if (keys[1] === undefiend || keys[1] === null) {
    obj[key] = {}
    return
  }

  // プロパティがなければ初期化する
  if (!obj[key]) {
    // 次の値が数値ならば配列にする
    if (Number.isInteger(keys[1])) {
      obj[key] = []
    } else {
      obj[key] = {}
    }
  }

  setProperty(obj[key], ...keys.slice(1))
}
```

## 使用例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192137/baa262c2-b665-d1f9-2a02-073fee7cd06b.png)

## 解説
### 三点リーダ
「...」は可変長引数。使用例のようにsetPropertyに複数の引数を与えることができる

### Number.isInteger
数値かどうか判定する。`'0'`は文字列、`0`は数値と分けてくれる。

### .slice(1)
部分配列を返す。1なので、2番目の値以降の部分配列にする

# この解決策の問題点
`obj`は引数で取っているが、関数内で更新している。そのためESLintの`no-param-reassign`が発生してしまう。解決策求ム。

https://eslint.org/docs/latest/rules/no-param-reassign

# まとめ
あとちょっとでもっといい感じにできそう。良いアイディアお待ちしています。
使っていないDockerイメージ・コンテナの大掃除をしよう

恐ろしいほどイメージやコンテナが溜まっていたので、消す方法を調べてみました。

- 宙ぶらりんイメージ(他のコンテナから参照されておらず、タグもなし)の削除
```
$ docker image prune
```
- 使われていないイメージ全ての削除
```
$ docker image prune -a
```
`--filter`を使うことで一部のイメージのみを削除することもできる
```
$ docker image prune -a --filter "until=24h"
　# 24hよりも前に作成したイメージのみ削除
 
$ docker image prune --filter="label=maintainer=john"
　# maintainerがjohnに設定されているイメージのみ削除
```

`image`を`container`に置き換えればコンテナの削除も同様にできる。

## 参考
https://docs.docker.jp/config/pruning.html

https://docs.docker.jp/engine/reference/commandline/container_prune.html
yarnとnpmの違い

こんにちは！はちゃんです！
初学者による初学者向けの
つまづいたところを記録に残していきます！


プログラミングを始めたばかりの方にとって、
「npm」と「yarn」って、ちょっと
聞きなれない言葉かもしれませんよね。


今回は、そんな2つの
パッケージマネージャーについて、
初学者の方にもわかりやすく、
お話ししますね！



そもそもパッケージマネージャーって何？
プログラミングでは、他の人が作った
「便利なツールやコード」
を使うことが多いんです。



例えば、Webアプリを作るときに使う
「axios」や、
日付を簡単に操作できる
「moment.js」など。
これらは「パッケージ」と呼ばれています。

でも、「パッケージ」を一つひとつ
手動で管理するのはとっても大変…。

そこで活躍するのが、npmやyarnのような
「パッケージマネージャー」なんです！

これを使えば、
簡単にパッケージをインストールしたり、
アップデートしたりできますよ♪

npmとは？

npm（Node Package Manager）は、
Node.jsをインストールすると
一緒に使えるようになる
公式のパッケージマネージャーです。

npmの特徴
初心者にも使いやすい！
シンプルなコマンドで操作できます。

Node.jsの公式ツールなので、
信頼性があります。
世界中の開発者が作った便利な
パッケージがたくさんそろっています。

npmの使い方の例

パッケージをインストールする例


```
#　axiosをインストール
npm install axios

# 依存関係をまとめてインストール
npm install

# パッケージを削除
npm uninstall axios
```
 yarnとは？

次にご紹介するのがYarnです。
これは、Facebook（現Meta）が
開発したツールで、

「npmより速くて便利に！」

という目標で作られました。

yarnの特徴
とっても速い！
パッケージのインストールが
npmよりも早いんです。

これ、大きなプロジェクトで
作業するときに助かりますよ。

yarnは依存関係を正確に管理してくれるので、
プロジェクトが複雑になっても安心です。


ネットがなくてもOK！
一度インストールしたものなら、
オフラインでも再利用できます。


Yarnの使い方の例

パッケージをインストールする例
```
# axiosをインストール
yarn add axios

# 依存関係をまとめてインストール
yarn install

# パッケージを削除
yarn remove axios
```

npmとyarnの違いを
わかりやすくまとめました！


開発元	
(npm)Node.js公式
(yarn)Facebook（Meta）

速度	    
(npm)やや遅い	
(yarn)高速

依存関係の管理     
(npm)package-lock.jsonで管理	
(yarn)yarn.lockで管理

オフライン作業	 
(npm)基本的にできない	
(yarn)キャッシュを使えば可能

コマンドのシンプルさ	
(npm)初心者でもわかりやすい	
(yarn)少し慣れが必要ですが便利



結局、どちらを選べばいいの？

npmが向いている方

プログラミング初心者さん
→ npmはNode.jsに最初から入っているので、
　特別な準備がいりません。

シンプルな作業をしたい方

→ 小さなプロジェクトならnpmで十分です。

yarnが向いている方

大きなプロジェクトを進める方
→ 依存関係が複雑でも、yarnならしっかり管理してくれます。

作業を素早く終わらせたい方
→ パッケージのインストール速度がとっても速いです。

ネット環境が不安定な方
→ オフラインモードがあるので便利です！

最初はnpmから始めてみると使いやすいかもです！
使っているうちに、
「もっと速くインストールしたいな」

「管理をしっかりしたいな」と感じたら、

yarnを試してみるといいですよ♪

どちらも便利なツールなので、
自分に合ったものを見つけてみてくださいね！

プログラミングの道が
もっと楽しくなるように、応援しています！😊

```
//コードブロック例

console.log("Hello, npm and Yarn!");
```
記事を読んで「なるほど！」と思っていただけたら、
ぜひ「いいね」やコメントをお願いします♪
【Android】AndroidでGif画像を使用する【Kotlin】



# 使用方法
build.gradleに以下のライブラリを追加。
この記事を書いている現在では
```build.gradle4.16.0が最新だったので最新を使用しています。
dependencies {
  implementation 'com.github.bumptech.glide:glide:4.16.0'
}
```

Gifをセットしたいタイミングで以下のようにImageViewに対してGif画像を読み込ませます。
"XXXXXX"としているところにGif画像の場所を設定します。
```
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    val imageView = findViewById(R.id.my_image_view)
    Glide.with(this).load(XXXXXX).into(imageView)
}
```
# 参考

https://github.com/bumptech/glide
正規表現_よく使う正規表現30選

# よく使う正規表現30選

正規表現は、文字列のパターンマッチングや検索・置換で頻繁に使われる強力なツールです。以下に、よく使用される正規表現とその用途を例示します。
**・基礎編(10選)**
**・応用編(20選)**

# 基礎編 (10選)

正規表現（RegEx）は文字列のパターンマッチングに使用される強力なツールです。以下に、正規表現の基礎を押さえるための重要な10項目を紹介します。

## 1. ドット（.）

ドット `.` は任意の1文字にマッチします。改行を除くすべての文字と一致します。

例:
- 正規表現: `a.b`
- マッチ対象: `aab`, `acb`, など

## 2. キャレット（^）とドル記号（$）

- `^` は行の先頭にマッチします。
- `$` は行の末尾にマッチします。

例:
- 正規表現: `^abc`
- マッチ対象: `abcdef`, ただし `xyzabc` にはマッチしません。

## 3. バックスラッシュ（\）

バックスラッシュ `\` は特別な意味を持つ文字をエスケープするために使用されます。

例:
- 正規表現: `\\`
- マッチ対象: バックスラッシュ (`\`)

## 4. 角かっこ（[]）

角かっこ `[]` は、文字クラスを定義します。中に書かれた任意の1文字と一致します。

例:
- 正規表現: `[abc]`
- マッチ対象: `a`, `b`, `c`

## 5. ハイフン（-）

ハイフン `-` は範囲指定に使用されます。`[a-z]` は小文字アルファベットの任意の1文字にマッチします。

例:
- 正規表現: `[0-9]`
- マッチ対象: `1`, `5`, `9` など

## 6. アスタリスク（*）

アスタリスク `*` は直前の文字が0回以上繰り返される場合にマッチします。

例:
- 正規表現: `ab*c`
- マッチ対象: `ac`, `abc`, `abbc` など

## 7. プラス（+）

プラス `+` は直前の文字が1回以上繰り返される場合にマッチします。

例:
- 正規表現: `ab+c`
- マッチ対象: `abc`, `abbc`, ただし `ac` にはマッチしません。

## 8. クエスチョンマーク（?）

クエスチョンマーク `?` は直前の文字が0回または1回現れる場合にマッチします。

例:
- 正規表現: `ab?c`
- マッチ対象: `abc`, `ac`

## 9. 中括弧（{}）

中括弧 `{}` は直前の文字が特定の回数繰り返される場合にマッチします。

例:
- 正規表現: `a{2,4}`
- マッチ対象: `aa`, `aaa`, `aaaa`

## 10. パイプ（|）

パイプ `|` は「または」を意味します。複数のパターンのどれかにマッチします。

例:
- 正規表現: `abc|def`
- マッチ対象: `abc` または `def`



---
# 応用編(20選)

## 1. **メールアドレスのマッチ**
```
^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$
```
**用途**: メールアドレスの形式チェック。

---

## 2. **電話番号（日本国内）のマッチ**
```
^\d{2,4}-\d{2,4}-\d{4}$
```
**用途**: 日本の電話番号（ハイフン付き）を検出。

---

## 3. **郵便番号（日本）のマッチ**
```
^\d{3}-\d{4}$
```
**用途**: ハイフン付きの日本の郵便番号を検出。

---

## 4. **URLのマッチ**
```
^https?://[a-zA-Z0-9.-]+(?:\.[a-zA-Z]+)+
```
**用途**: HTTPまたはHTTPSで始まるURLを検出。

---

## 5. **IPアドレスのマッチ**
```
^(?:\d{1,3}\.){3}\d{1,3}$
```
**用途**: IPv4形式のIPアドレスを検出。

---

## 6. **日時（YYYY-MM-DD形式）のマッチ**
```
^\d{4}-\d{2}-\d{2}$
```
**用途**: 年-月-日形式の日付を検出。

---

## 7. **数字のみを検出**
```
^\d+$
```
**用途**: 文字列が数字のみで構成されているかを確認。

---

## 8. **英数字のみを検出**
```
^[a-zA-Z0-9]+$
```
**用途**: 文字列が英数字のみかを確認。

---

## 9. **先頭と末尾に空白を含む文字列の検出**
```
^\s+|\s+$
```
**用途**: 文字列の両端の空白を検出（およびトリミング）。

---

## 10. **全角文字を検出**
```
[^\x00-\x7F]+
```
**用途**: 全角文字（日本語、漢字、ひらがな、カタカナなど）を検出。

---

## 11. **半角カタカナを検出**
```
[\uFF61-\uFF9F]+
```
**用途**: 半角カタカナを検出。

---

## 12. **重複する単語の検出**
```
\b(\w+)\b(?:\s+\1\b)+
```
**用途**: 重複する単語（例: "test test"）を検出。

---

## 13. **HTMLタグを検出**
```
<[^>]+>
```
**用途**: HTMLタグ全般を検出。

---

## 14. **JSONキーを検出**
```
"([a-zA-Z0-9_]+)"\s*:
```
**用途**: JSON内のキー部分を抽出。

---

## 15. **クォート文字列を検出**
```
(['"])(.*?)\1
```
**用途**: シングルまたはダブルクォートで囲まれた文字列を検出。

---

## 16. **パスワード強度を確認**
```
^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$
```
**用途**: 英小文字、大文字、数字、特殊文字を含む8文字以上のパスワードを確認。

---

## 17. **任意の改行を含むテキストを検出**
```
[\s\S]+
```
**用途**: 改行を含むすべてのテキストを一致させる。

---

## 18. **先頭に特定の文字列を持つ行を検出**
```
^ERROR:
```
**用途**: "ERROR:" で始まる行を検出。

---

## 19. **末尾が特定の拡張子（例: .jpg/.png）のファイル名を検出**
```
^.+\.(jpg|png|gif)$
```
**用途**: 特定の画像形式を検出。

---

## 20. **文字列のネストされた括弧を検出**
```
\(([^()]*)\)
```
**用途**: 一重の括弧内の内容を抽出。

---
【Go言語入門】-ステートメント編-

## はじめに

今回はステートメントについてまとめておきます。

## if文
```
	num := 6

	if num == 6 {
		fmt.Println("OK")
	}

    // 出力結果
    OK
```
elseあり
```
	num := 6

	if num == 7 {
		fmt.Println("OK")
	} else {
		fmt.Println("NG")
	}

    // 出力結果
    NG
```

else if
```
	num := 6

	if num == 7 {
		fmt.Println("OK if")
	} else if num == 6 {
		fmt.Println("OK else if")
	} else {
		fmt.Println("NG")
	}

    // 出力結果
    OK else if
```

&&
```
	x, y := 10, 20

	if x == 10 && y == 20 {
		fmt.Println("OK")
	}

     // 出力結果
     OK
```

||
```
	x, y := 10, 20

	if x == 10 || y == 10 {
		fmt.Println("OK")
	}

    // 出力結果
    OK
```





## for文
```
	for i := 0; i < 5; i++ {
		fmt.Println(i)
	}
 
    // 出力結果
    0
    1
    2
    3
    4
```

for文中に`continue`を記載すると処理が終わり、次のループに入ります。
```
	for i := 0; i < 5; i++ {
		if i == 2 {
			continue
		}
		fmt.Println(i)
	}
 
    // 出力結果
    0
    1
    3
    4
```

for文中に`break`を記載するとその時点で処理が終わります。
```
	for i := 0; i < 5; i++ {
		if i == 2 {
			break
		}
		fmt.Println(i)
	}

    // 出力結果
    0
    1
```

range
```
	array := []string{"Taro", "Ken", "Yuki"}

	for i, v := range array {
		fmt.Println(i, v)
	}

    // 出力結果
    0 Taro
    1 Ken
    2 Yuki
```

中身だけ取り出したい場合
```
	array := []string{"Taro", "Ken", "Yuki"}

	for _, v := range array {
		fmt.Println(v)
	}
 
    // 出力結果
    Taro
    Ken
    Yuki
```

## switch文
```
	name := "Taro"

	switch name {
	case "Taro":
		fmt.Println("Taro")
	case "Ken":
		fmt.Println("Ken")
	case "Yuki":
		fmt.Println("Yuki")
	}
 
  // 出力結果
  Taro
```

## defer
```
	defer fmt.Println("defer")
	fmt.Println("Hello")
 
    // 出力結果
    Hello
    defer
```

Stacking defers
```
	fmt.Println("Hello")
	defer fmt.Println("1")
	defer fmt.Println("2")
	defer fmt.Println("3")
 
    // 出力結果
    Hello
    3
    2
    1
```

## log
```
	log.Println("log")

     // 出力結果
     2025/01/05 01:42:24 log
```

Fatalはそれ以降の処理を実行しない
（以下だと、`Hello`は出力されない）
```
	log.Fatalln("Fatal")

	fmt.Println("Hello")
 
    // 出力結果
    2025/01/05 01:43:24 Fatal
```
エラーハンドリングの例
```
	err := os.Chdir("test")

	if err != nil {
		log.Fatalln("Error")
	}

    // 出力結果
    2025/01/05 01:55:34 Error
```

panic
```
func test2() {
	panic("Error")
}

func test() {
	test2()
}

func main() {
	test()

}

// 出力結果
panic: Error

goroutine 1 [running]:
main.test2()
	/Users/go-app/hello.go:12 +0x2c
main.test()
	/Users/go-app/hello.go:16 +0x1c
main.main()
	/Usersn/go-app/hello.go:20 +0x1c
```

recover
```
func test2() {
	panic("Error")
}

func test() {
	defer func() {
		fmt.Println(recover())
	}()
	test2()
}

func main() {
	test()
}

// 出力結果
Error
```
## おわりに

今回はこのあたりまでまとめました。
logなどはよく使いそうなので覚えておきたいです。
リアルタイムでの会議文字起こし：効率化の鍵とは？

# リアルタイムでの会議文字起こし：効率化の鍵とは？

ビジネスの現場では、会議の内容を正確に記録することが欠かせません。しかし、手動でのメモ作成は時間と労力がかかり、重要な情報を見逃してしまうリスクもあります。そこで注目されているのが「リアルタイム会議文字起こし」です。この技術は、AIを活用して会議中の発言をその場で文字化し、効率的な情報共有を可能にします。

## リアルタイム会議文字起こしの仕組みとは？

リアルタイム会議文字起こしは、音声認識AIを用いて、会議中の発言を瞬時にテキストに変換する技術です。これにより、会議中に議事録を作成する手間を省き、内容をリアルタイムで共有できるため、会議の効率が大幅に向上します。特に以下のような場面で活用されています：

- オンライン会議での議事録作成  
- 多国籍メンバーとの会議における言語サポート  
- トレーニングやセミナーの内容記録  

## リアルタイム会議文字起こしのメリット

1. **時間と労力の削減**  
   議事録作成のために会議を振り返る必要がなくなり、その場で内容を記録できます。これにより、後処理の負担を大幅に軽減します。

2. **正確な記録**  
   AIは会話内容をほぼ漏れなく文字化するため、発言の取り違いや重要なポイントの抜け漏れを防ぎます。

3. **即時共有が可能**  
   リアルタイムで文字起こしが行われるため、会議参加者全員がその場で記録を確認でき、議論の透明性が向上します。

## Soro.jp：リアルタイム会議文字起こしのおすすめツール

リアルタイムでの文字起こしを効果的に行うためには、信頼性の高いツールが必要です。その中でも注目されているのが**Soro.jp**です。このツールは、会議中の音声をリアルタイムで正確に文字化し、参加者全員に即座に共有できる機能を提供しています。特に日本語に特化した音声認識技術を採用しているため、日本国内のビジネスシーンにおいて優れたパフォーマンスを発揮します。  

また、[Soro.jp](https://soro.jp/)はシンプルな操作性を重視しており、専門知識がなくても誰でも簡単に利用できます。これにより、ツールの導入や活用のハードルが低く、多忙なビジネスパーソンにとって理想的な選択肢となっています。

## まとめ

リアルタイム会議文字起こしは、会議の効率化を目指す企業や個人にとって重要な技術です。正確で迅速な記録により、後処理の負担を軽減し、会議の透明性や生産性を向上させます。中でも**Soro.jp**のようなツールを活用すれば、さらに高い利便性と正確性を実感できるでしょう。ぜひ、次回の会議で活用してみてください。
AtCoderの参戦日記＃1

<h2>やったこと</h2>
Atcoderのテスト「AtCoder Beginner Contest 387（Promotion of AtCoderJobs）」に参加したので軽く振り返りをする(Twitterやめたので、こっちにかく)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927880/1a5159d2-07f3-1c2e-ea66-c48101b7c2f9.png)

順位はこんな感じ↑

<h2>良かった点</h2>
１つめ、２つめは余裕で解けた

<h2>悪かった点</h2>
3つ目の問題は解法が全く分からなかった
問題文の趣旨は理解できたが、どうやってそれを表現したらいいか分からなかった

解説をみると、数式が書かれていて断念した

今の自分の実力だと足りないレベルなんだと自覚した
次回までに何とかしたいが、できるのだろうか・・・

あと、ライブラリやどういう風に数値列を文字列に変換したりするかなどに手間取った
慣れて覚えていきたい

<h2>まとめ</h2>
継続的に参加していく
１，２はすぐできるようにしていく
3以降は次回の課題
4以降の問題も見て、できそうなものから解いていくのがいいかもしれないと思った

数学的なところは中学高校数学から見直した方がいいかもしれない・・・
タイトル: ChatGPTでタロット占いをする方法：2025年最新ガイド

#### はじめに
AI技術の進化により、ChatGPTを使ってタロット占いを気軽に楽しむことが可能になりました。この記事では、**ChatGPTでタロット占いを行う具体的な方法**をステップバイステップで解説します。さらに、[**「ChatGPTでタロット占いを行う方法について」**](https://tarotap.com/ja/blog/chatgpt-tarot-reading-guide)のガイドも参考にしながら、AIタロット占いの魅力を探ります。

---

### 1. ChatGPTでタロット占いを始める手順

ChatGPTを使ったタロット占いは、以下の手順で簡単に始められます。プロンプトを活用することで、まるで実際のタロットリーダーと対話しているかのような体験が可能です。

#### ステップ1: プロンプトの入力
まず、以下のプロンプトをChatGPTのダイアログボックスに入力します。これにより、ChatGPTがタロットリーダーとして振る舞うように設定されます。

```plaintext
あなたは経験豊富なタロットリーダーです。以下の手順でタロット占いを行ってください：

1. 質問の確認: 私の質問や知りたい事柄を明確に述べます。あなたはそれを理解した後、「承知しました。ご質問をお聞かせください。」と返答します。

2. スプレッドの選択: 以下のスプレッドから1つを提案してください：
   - 1枚引き: 現状や問題の核心を素早く把握するために。
   - 3枚引き（過去・現在・未来）: 時間的な展開を理解するために。
   - セイントトライアングル: 問題の様々な側面を深く掘り下げるために。

3. シャッフルとカットの過程: カードをシャッフルし、カットする過程を言葉で説明します。

4. カードの引き方: 選択したスプレッドに基づいて、カードを引く順番や位置を指定します。

5. カードの解釈: 引かれたカードの意味を解説し、ポジションごとの解釈を提供します。

6. 総合的な解釈: すべてのカードを総合的に解釈し、質問に対する洞察やアドバイスを提供します。

7. 追加の質問: 解釈が終わった後、さらに質問を受け付けます。

以上の手順に従って、タロット占いを進めてください。
```

#### ステップ2: 質問の入力
プロンプトを入力した後、具体的な質問をChatGPTに伝えます。例えば、「将来のキャリアについて知りたい」や「人間関係の悩みを解決したい」など、明確な質問を用意しましょう。

#### ステップ3: スプレッドの選択
ChatGPTが提案するスプレッドの中から、自分に合ったものを選びます。例えば、3枚引きを選ぶと、過去・現在・未来の時間軸に沿った解釈が得られます。

#### ステップ4: カードの解釈
ChatGPTは、引かれたカードの意味を解説し、質問に対する洞察を提供します。例えば、「1枚目は『愚者』です。これは新しい始まりや冒険を象徴しています。」といった形で解釈が行われます。

#### ステップ5: 総合的なアドバイス
すべてのカードを解釈した後、ChatGPTは総合的なアドバイスを提供します。これにより、質問に対する深い理解が得られます。

---

### 2. ChatGPTタロット占いの特徴

ChatGPTを使ったタロット占いには、以下のような特徴があります。

- **手軽さ**: 物理的なカードや専門知識がなくても、気軽にタロット占いを体験できます。
- **カスタマイズ性**: プロンプトを調整することで、占いのスタイルや解釈の深さを自由に変更できます。
- **エンターテイメント性**: 未来を予言するというよりも、新しい視点やインスピレーションを得るためのツールとして活用できます。

---

### 3. より深く学びたい方へ

ChatGPTを使ったタロット占いの詳細な手順や、プロンプトの活用方法についてさらに学びたい方は。このガイドでは、ChatGPTタロット占いの具体的な手順や、AIタロット占いの可能性について詳しく解説しています。

---

### 4. 注意点

ChatGPTを使ったタロット占いは、あくまでエンターテイメントとして楽しむことを目的としています。重要な決定を下す際には、専門家のアドバイスや自身の判断を優先してください。

---

### まとめ

ChatGPTを使ったタロット占いは、AI技術を活用した新しい形の占い体験です。手軽に始められるため、興味のある方はぜひ試してみてください。また、より深く学びたい方は、[**「ChatGPTでタロット占いを行う方法について」**](https://tarotap.com/ja/blog/chatgpt-tarot-reading-guide)を参考に、AIタロット占いの世界を探求してみましょう。

---

**関連キーワード**: ChatGPTタロット, AI占い, タロット占いガイド, Tarotap
ai-gradioでGroqを試してみた！高速なLLMをGradioで簡単に使用

## はじめに

最近、AI開発のエコシステムで注目を集めているGroqが、ai-gradioライブラリでサポートされるようになりました。今回は、このai-gradioを使ってGroqの高速なLLMを試してみたので、その経験を共有したいと思います。

<blockquote class="twitter-tweet" data-media-max-width="800"><p lang="ja" dir="ltr">ai-gradio で groq が対応したので使ってみた！<br>アーティファクト機能がこの数行で使えるのってマジでエグイ。。。 <a href="https://t.co/c4FCPYRWaS">https://t.co/c4FCPYRWaS</a> <a href="https://t.co/g78gCf8cBn">pic.twitter.com/g78gCf8cBn</a></p>&mdash; Maki@Sunwood AI Labs. (@hAru_mAki_ch) <a href="https://twitter.com/hAru_mAki_ch/status/1875574730822140140?ref_src=twsrc%5Etfw">January 4, 2025</a></blockquote> 

## Groqとは？

Groqは、最近話題の高速なLLMプロバイダーです。特に、LLaMA 2やMixtralなどのオープンソースモデルを最適化して提供しており、その処理速度の速さが特徴です。

## ai-gradioの特徴

ai-gradioは、複数のAIプロバイダーのモデルを簡単にGradioインターフェースで利用できるようにするPythonパッケージです。以下のような特徴があります：

- OpenAI、Google Gemini、Anthropic、Groqなど15以上のAIプロバイダーに対応
- テキストチャット、音声チャット、ビデオチャットなど多彩な機能
- マルチモーダル入力のサポート
- CrewAIを使用した協調AIタスクの実現

## セットアップ方法

### 1. インストール
まず、Groqサポート付きでai-gradioをインストールします：

```bash
pip install 'ai-gradio[groq]'
```

### 2. API キーの設定
Groqのサービスを利用するために、API キーを環境変数として設定します：

```bash
export GROQ_API_KEY=<あなたのGroq APIキー>
```

Pythonコード内で直接設定することもできます：

```python
import os
os.environ['GROQ_API_KEY'] = 'あなたのGroq APIキー'
```

## 基本的な使い方

以下のコードで、シンプルなチャットインターフェースを作成できます：

```python
import gradio as gr
import ai_gradio

gr.load(
    name='groq:llama-3.3-70b-versatile',  # Groqが提供するモデルを指定
    src=ai_gradio.registry,
    title='Groq Chat'
).launch()
```

## 利用可能なGroqモデル

現在、ai-gradioでは以下のGroqモデルが利用可能です：

- llama-3.2-70b-chat
- mixtral-8x7b-chat
- llama-3.3-70b-versatile（最新版）

## 実際に使ってみた感想

Groqの特徴である高速なレスポンスは、実際に使ってみても体感できました。特に以下の点が印象的でした：

- レスポンスの生成速度が非常に速い
- Gradioのインターフェースとの相性が良く、スムーズな対話が可能
- コードの生成や技術的な質問への回答が的確

## 注意点

- API利用にはGroqのアカウントとAPIキーが必要
- 使用量に応じた課金が発生するため、利用状況の監視が重要
- モデルによって得意分野や特徴が異なるため、用途に応じた選択が必要

## まとめ

ai-gradioを使うことで、Groqの高速なLLMを簡単に利用できるようになりました。特に：

- セットアップが簡単
- 直感的なインターフェース
- 高速なレスポンス
- 様々なモデルの選択肢

といった点が魅力です。AI開発やプロトタイピングの現場で、新しい選択肢として検討する価値があると感じました。

## 参考リンク

- [ai-gradio GitHub](https://github.com/your-username/ai-gradio)
- [Groq公式サイト](https://groq.com)
- [Gradioドキュメント](https://gradio.app)

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
デザイナーからデザインエンジニアになるためにReactの勉強を始めた話

## はじめに
初めまして、UX/UIデザイナーとして活動しているKikoといいます。
デザインエンジニアになることを目標に、今年の1月からReactの勉強を始めました。これは決意表明として残しておく文章です。

## 現状

過去には制作会社でWEBデザイナーを担当していた経験があり、HTML/CSS/JavaScriptには一定の知見があります。ただし業務でコードを読む機会は少なく、主に体験設計やFigmaを使った上流工程の業務が中心です。

## 学習を始めたきっかけ

UI / UXデザイナーとしてデザインシステムを作成する中で、業務スコープを広げることで成果物のクオリティが向上すると考えたためです。また、個人開発にも挑戦し、自分でアプリを作ってみたいという思いもあります。

さらに開発者とのコミュニケーションを円滑にするためにも、エンジニアリングの知識は不可欠だと感じています。デザインと開発の橋渡しができることで、よりスムーズなプロジェクト進行が可能になると考えています。

## なぜReactを選んだのか

Figmaのコンポーネントをはじめとしたデザインシステムは、Reactを標準ベースとして設計されているためです。また、StorybookやGitHubとの連携を補助するプラグインが豊富に揃っていることも大きな理由の一つです。

https://www.figma.com/blog/introducing-figma-to-react/

加えて、Reactはフロントエンド開発において広く採用されており、学ぶことでより多くのプロジェクトに関われる可能性が広がります。エコシステムが充実しており、実践的な学習がしやすいのも魅力的に思えました。

## 目標

### 短期

課題をやり切り、正しい知識を身につける

### 中期

デザインとエンジニアリングを両立できるスキルを習得する

### 長期

自分のサービスを開発し、それを軸に生計を立てられるようになる 🍚🍚🍚

### 追加の目標

- Reactを活用して、デザインシステムの構築・運用を実践する
- 個人開発の第一歩として、小規模なアプリをリリースする
- フロントエンドの知識を深めつつ、バックエンドとの連携も学ぶ
- コードの品質を向上させるため、テストやパフォーマンス最適化についても学習する

学習を継続し、デザインと開発の両面で価値を提供できるエンジニアを目指します！
class-transformer を使ってネストしたエンティティをDTOに変換する

nestjs で TypeORM とかのfetch結果を nextjs から取得するって場合、エンティティをそのまま返してもいいのだけど n:n な関連は 1:n に置き換えたほうがフロントエンドで扱いやすいので適当なDTOに詰め替えてから返す、って操作はありがち。

しかしそんな操作をいちいち手書きしているととても面倒なので class-transformer とか使う。

## エンティティ定義

Book, BookGenre, Genre による n:n 構造を作る。

```typescript
@Entity("books")
export class Book {
    @PrimaryGeneratedColumn()
    id: number;

    @Column()
    title: string;

    @Column()
    author: string;

    @Column('text')
    description: string;

    @Column()
    publishedYear: number;

    @Column()
    genre: string;

    @OneToMany(() => BookGenre     , bookGenre => bookGenre.book)
    bookGenres: BookGenre[];
}

@Entity()
export class BookGenre {
    @PrimaryGeneratedColumn()
    id: number;

    @ManyToOne(() => Book, book => book.bookGenres)
    book: Book;

    @ManyToOne(() => Genre, genre => genre.bookGenres)
    genre: Genre;
}

@Entity()
export class Genre {
    @PrimaryGeneratedColumn()
    id: number;

    @Column()
    name: string;

    @OneToMany(() => BookGenre, bookGenre => bookGenre.genre)
    bookGenres: BookGenre[];
}
```

## DTO

構造を単純にするために BookDto, GenreDto の2つにしぼり、 1:n の構造を作る。

```typescript
export class BookDto {

    @Expose()
    id: number;
    @Expose()
    title: string;
    @Expose()
    author: string;
    @Expose()
    publishedYear: number;
    @Expose()
    description: string;
    
    @Expose({ name: 'bookGenres' })
    @Type(() => GenreDto)
    @Transform(({ obj }) => 
        obj.bookGenres.map((bookGenre: BookGenre) => plainToInstance(GenreDto, bookGenre.genre))
      )
    genres: GenreDto[];

}

```

Transform で bookGenres:BookGenre[] を genre:GenreDto[] に展開する。

## 変換

```typescript
        const books = await this.repos.find({
            relations: ['bookGenres', 'bookGenres.genre'],
            order: { id: 'ASC' },
        });
        const dto = plainToInstance(BookDto, books);

```

変換はこれだけ。

## その他

AutoMapper を使おうとしたけど pojos ストラテジーではベースのプロパティも forMember() ですべて記述する必要があるみたいで、さすがにそれだったら books.map(...) したほうがましだと思って不採用とした。
PyInstaller+PyQtでタスクバーアイコンを設定する

# 序

PyQtで作成したデスクトップアプリケーションに、タスクバーアイコンを設定する方法

この記事は9割がた[この記事](https://qiita.com/y-tsutsu/items/a8cc1578dd2f930e5439)を参考にしています

※ 元記事では`.spec`ファイルを変更しているが、その部分がそのままでは動作しなかったため、調べたところpyinstallerの引数で対応できたので備忘録として書いています

# 実装

## 1. アイコンファイルの準備

- .ico形式
    - pngでも問題ないが、exeアイコンにもしたいので、[サイト](https://ao-system.net/alphaicon/)で変換しておく
- `main.py`と同じディレクトリに配置しておく
- サイズ: 128x128とか


## 2. リソースパスの設定
PyInstallerでexe化した際にもアイコンファイルを正しく読み込めるよう、リソースパス取得用の関数つくる

```python
def resource_path(relative):
    if hasattr(sys, '_MEIPASS'):
        # PyInstallerでexe化した場合のパス
        return os.path.join(sys._MEIPASS, relative)
    # 通常実行時のパス
    return os.path.join(os.path.abspath('.'), relative)
```

## 3. アプリケーションへのアイコン設定

```python
app = QApplication(sys.argv)
app.setWindowIcon(QIcon(resource_path('image.ico')))
```

ちなみに実行時にステートによってアイコンを変更するみたいなことも可能

## 4. PyInstallerでのexe化
アイコンファイルを含めてexe化する際は以下のようにデータとして追加する必要がある

```bash
pyinstaller --add-data "image.ico;." --icon=image.ico -F -w main.py
```

オプションの説明：
- `--add-data`: リソースファイルの追加
- `--icon`: exe自体のアイコン設定
- `-F`: 単一ファイル化
- `-w`: コンソールウィンドウを非表示

# 終わり

タスクバーアイコンが無印だと何動かしてるのか分からないので、できると便利
[個人開発]Web畑で育った人間がiOSのゲームアプリを爆速で作ってみた！

#### はじめに

私は普段、Web系フロントエンドエンジニアとしてReact,TypeScriptを用いた開発をしていますが、今回の挑戦は **iOSアプリ開発** です。  
これまでWeb技術ばかり触れてきた私が、AIを駆使してiOSアプリを作った過程や学びをシェアします！


---

#### 開発の背景

Web技術だけでなく、モバイルアプリにも挑戦したいと思ったきっかけは以下の3つです：

1. **モバイルによる広告収益が欲しい！！！！**
　やっぱこの思いが一番ですよはい
 　

2. **App Storeへのリリースを経験したい**  
   個人プロジェクトを世の中に出してみたかった

---

#### 完成したアプリ

今回開発したのは、 **「Memorie(メモリエ)」** です！  

記憶力を鍛えるゲームで、ランダムに点灯するマスを順番通りにタップしていくゲームになります！
前半こそ簡単ですが後半はなかなか難しくなっています、、、！

見た目や使いやすさを重視したシンプルなデザインに仕上げました。

暇な時間にサクッと記憶力を鍛えれるゲームになってますのでぜひインストールして遊んでみてください！

https://apps.apple.com/jp/app/memorie-%E3%83%A1%E3%83%A2%E3%83%AA%E3%82%A8/id6739940886

---

![Simulator Screenshot - iPhone 16 Pro Max - 2024-12-27 at 21.24.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3796827/c20406b9-2dfa-8b3a-2c60-3d87a80760c4.png)


![Simulator Screenshot - iPhone 16 Pro Max - 2024-12-27 at 21.25.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3796827/a5511472-6107-5fc0-a043-9438f1b54e8a.png)


#### 使用技術・ツール

- **言語**: Dart,Flutter,GitHub Copilot
- **開発環境**: VSCode,Xcode(ビルド時のみ)
- **デザイン**: Figma
- **AI支援**: ChatGPT,GalileoAI(デザインの初期構想に使用)
- **テスト端末**: 自分のiPhone 13Pro,Simulator  

---

#### 具体的な開発プロセス

1. **アプリのアイデア出し**
   - ChatGPTと問答しながらアイデアをブレインストーミング
　
2. **UI/UX設計**
   - Figmaでアプリのワイヤーフレームや具体的なデザインを作成
   - デザイン知識はないなりにいいなと思ったアプリのUIとか参考にして頑張りました

   
   こんな感じ。簡単な導線しかないためシンプルな構成です。
   ![スクリーンショット 2025-01-05 0.33.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3796827/f18687b7-2a08-6276-5b97-0cd13a901ae1.png)


3. **開発スタート**
   - 正直FlutterやDartの文法を一から覚えようって気はなく、CopilotとGPT o1が頑張ってくれればいいやといった感じでした。結果爆速開発(トータル30hくらいでしょうか？)でした

4. **App Storeへのリリース**
   - Apple Developer Program(12,000円くらい😢)に登録し、リリースプロセスを学習

+で広告表示のためのGoogle AdMobへの登録であったりの作業がありました。調べつつですぐできました！



---

#### 最後に

この記事が、同じようにiOSアプリ開発に挑戦したいと考えているWebエンジニアの方の参考になれば嬉しいです！  
質問やフィードバックがあれば、ぜひコメントしてください！
【Docker】5分でできるLaravel + Next.js開発環境構築

#【Docker】5分でできるLaravel + Next.js開発環境構築

Docker Composeを利用して、LaravelとNext.jsによる開発環境をサクッと構築する手順をまとめました。  
**GitHubリポジトリはこちら：** [https://github.com/softjapan/laravel-nextjs-dev-environment](https://github.com/softjapan/laravel-nextjs-dev-environment)

---

## はじめに

この記事では、**Laravel（バックエンド）** と **Next.js（フロントエンド）** をDocker上で手軽に立ち上げる方法を紹介します。あらかじめ用意されたイメージとDocker Composeファイルを使うことで、**5分ほど**で開発を始められます。

### 前提条件

- **Docker** および **Docker Compose** がインストール済みであること
- **Laravel** と **Next.js** の基礎知識があること
- コマンドライン操作に慣れていること

---

## 1. リポジトリをクローンする

まずは以下のコマンドで、リポジトリをローカル環境へクローンします。

```bash
git clone https://github.com/softjapan/laravel-nextjs-dev-environment.git
```

---

## 2. Laravel バックエンドの作成

次に、クローンしたディレクトリに移動して、Laravelバックエンドを作成します。  
ここではデフォルトでMySQLが使われ、マイグレーションは後ほど行います。

```bash
cd laravel-nextjs-dev-environment
docker run --rm -it -v "$PWD:/app" softjpn/laravel-nodejs-dev laravel new laravel-backend
```

---

## 3. Laravel Breeze と依存パッケージのインストール

Laravel Breeze（APIスキャフォールド）をインストールします。この段階ではマイグレーションは実行しません。

```bash
cd laravel-backend
docker run --rm -it -v "$PWD:/app" softjpn/laravel-nodejs-dev composer require laravel/breeze --dev
docker run --rm -it -v "$PWD:/app" softjpn/laravel-nodejs-dev php artisan breeze:install api
```

---

## 4. Next.js フロントエンドの作成

Laravel BreezeのNext.js版をクローンしてフロントエンドとして利用します。

```bash
cd ..
docker run --rm -it -v "$PWD:/app" softjpn/laravel-nodejs-dev git clone https://github.com/laravel/breeze-next.git next-frontend
```

---

## 5. フロントエンドの依存パッケージをインストール

Next.js側の依存パッケージをインストールします。

```bash
cd next-frontend
docker run --rm -it -v "$PWD:/app" softjpn/laravel-nodejs-dev npm install
```

---

## 6. 環境変数ファイルの設定

`.env` ファイルをLaravelとNext.js用にコピーします。  
各種データベース接続などの情報が記載されているため、必要に応じて編集してください。

```bash
cd ..
cp ./envfiles/laravel-backend/.env ./laravel-backend/.env
cp ./envfiles/next-frontend/.env ./next-frontend/.env
```

---

## 7. Dockerコンテナの起動

準備が整ったら、Docker Composeを使ってコンテナを立ち上げます。

```bash
docker compose up -d
```

---

## 8. データベースマイグレーション

コンテナが稼働し、`.env`ファイルが正しく設定されていることを確認したら、マイグレーションを実行します。

```bash
docker exec -it laravel-backend php artisan migrate
```

---

## 9. フロントエンドにアクセス

ブラウザを開いて、以下のURLにアクセスしてください。

```
http://localhost:3000
```

ログイン画面やトップページが表示されればOKです。

---

## 10. Dockerコンテナを停止する

開発を終了する際は、以下のコマンドでコンテナを停止・削除できます。

```bash
docker compose down
```

---

## スクリーンショット

本リポジトリには、実行時のイメージとして以下のようなスクリーンショットが含まれています。

![screenshot](https://raw.githubusercontent.com/softjapan/laravel-nextjs-dev-environment/main/screenshot.png)

---

## まとめ

これで、LaravelとNext.jsのDocker開発環境を素早く構築できます。  
詳細なコードや環境変数の設定、その他のカスタマイズなどはリポジトリを参考にしてください。

- GitHub: [softjapan/laravel-nextjs-dev-environment](https://github.com/softjapan/laravel-nextjs-dev-environment)

---

## License

本プロジェクトは [MIT License](https://github.com/softjapan/laravel-nextjs-dev-environment/blob/main/LICENSE) のもとで公開されています。

---

## Contributing

バグ報告や機能追加の提案などは、Pull RequestやIssueでお気軽にご連絡ください。

---

## お問い合わせ

不明点や追加のサポートが必要な場合は、リポジトリのIssueにてお知らせください。

---

ぜひ、この環境を活用してLaravel + Next.jsの開発をスピーディに始めてみてください！
ゲームプログラマー志望の大学一年生を弟子にとって、うまくいかなかった例のnoteを読んで思ったこと

<h2>概要</h2>
ゲームプログラマー志望の大学生を弟子に取ったnoteがバズっていた

↓これである

https://note.com/tecopark/n/nb250723afbf6

ざっくり、概要を書くと「ゲームプログラマーの人が大学生を弟子にとって、育成プログラムを課すものの学生側のモチベーションが落ちて、師弟関係が終わった話」である

開始時点でプログラミングスキルはほぼ０である初心者が今回の弟子
育成プログラムは大きく2つ

```
・プログラムの課題を出して、週１で進捗を確認
・技術書を月一冊読んで、説明する
```

noteに記載されていた育成プログラムは以下である(そのまま引用)

```
・C言語の初心者向けの技術書を読んでほしい。
・C言語でCUI上でうごくじゃんけんゲームを作って
・C言語でCUI上でうごくトランプのブラックジャックを作って
・C言語でCUI上でうごくトランプのポーカーを作って
・作ったポーカーを改造して、存在しない7枚版ポーカーを作ってほしい。オリジナルの役を考えて実装してほしい。
```

と書かれていた
それらの内容について自分なりに取り込めるところがあると思ったので書いていく

<h2>プログラムの課題を出して、週１で進捗を確認</h2>
技術的なものを成長させる成長プログラムで、内容の是非はネット上でいろいろ書かれている。ゲーム作りから遠すぎるとか

とはいえ、週一で振り返りがあるプログラム作成を行うことを習慣にすると良いと思った

師弟関係とかなしに個人的にやるのであれば、目的や進捗を週ごとのスプリントで振り返りを行っていくみたいな

現状自分はAtcoderをやっているものの、週に一回のコンテストに出るだけ

それとは別に成果物を積み上げて作るみたいなことを習慣として持つのが良いだろう

<h2>毎週本を読んで説明する</h2>

読書する習慣が学生時代以降あんまりなくなっていたことを、ふと思い出した

強いエンジニアと言われる人は月に一冊以上は本を読んでいることは想像に難くない

自分も月に一冊読む習慣をつけていこうと思った

誰かに本の内容を説明するみたいなことは、Qiitaに書いたりしてアウトプットすることで自分なりにこの師弟関係の機能を再現できると考えた

文章をアウトプットする練習にもなるのでぜひ取り入れていきたい

Udemyなどのネットの教材じゃなく本であるというのは、体系的に学べるのと情報の質を担保する意味があるのだろう

<h2>モチベーション管理について</h2>

定例的に学習を振り返って、進捗や学習の目的、目の前の目標を明確するようなことが必要だと思った

マインドセット的なところは、この師弟関係では何もされていないようで、それが原因で師弟関係がダメになってしまっている

これは個人でやるときも同様で、厳しいことをする習慣をするほど、モチベーション管理をしっかりとしていく必要があると思った

それを自分が一人でやる際にはモチベーション管理をしていかないといけないが、モチベーション管理するモチベーションみたいなことが非常にめんどくさい事例が発生する

モチベーションとする源泉は人それぞれであるが、自分は少し前の自分より成長していると感じられるとモチベーションが上がる

週一で振り返りを行うとともに、書いたコード量や取り組んだ時間など定量化しやすい指標を使って自分のモチベーションを維持できればと思う

また、noteのように師弟関係があると、〆切感がでて必死になるとは思うが、義務感がでてきそうであんまりやりたくないなとは思った

凄まじいモチベーションがあれば、師弟関係やそういうコミュニティに入ることで、環境による強制力はかなり強くかかるが、自分でやるとき続くか分からない

最初は緩いコミュニティとかに入ると良いかもと思った

<h2>まとめ</h2>
noteの内容はネットでいろいろな批判を受けていたものの、成長するためのプログラムとしては良いと思った

プログラムの内容や本の説明、モチベーション管理などは一人用にチューニングする必要はあるが、上手く習慣にできれば成長できるだろう

一気に習慣化しようとすると失敗するので、簡単な本を読むというところから習慣化していきたい

ちょうど店頭に、「技術書」の読書術という書籍があったので購入してきた

https://www.shoeisha.co.jp/book/detail/9784798171548

<h2>参考</h2>

https://note.com/tecopark/n/nb250723afbf6

https://note.com/tecopark/n/n1bcb65902e9e

https://togetter.com/li/2481747
MacでUbuntuを入れる方法

# 概要
- MacにUbuntuを入れてLinuxをいじれる環境を構築する
- 単純にダウンロードして開くのではなく、UTMを用いてダウンロードしたファイルを開く必要がある

# 普通にやるとエラーになる
- まずは自分のMacの動作環境を調べる
```
$ uname -m
arm64
```
- arm64版のubuntuを手に入れる
    - https://ubuntu.com/download/server/arm
- しかし、このisoファイルを直接開くとエラーになる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3339625/ebcc91f0-fd0b-cd60-fce1-cd4aff7fc924.png)

# 解決法
UTMを用いてisoファイルを開けばよい。以下の記事を参考に、UTMを使えば環境構築ができた。
- https://envader.plus/article/66a
AWS Certified Solution Architect Associate (SAA-C03) 合格体験記

## 🎉 試験結果
- **試験日**: 2024/12/13  
- **スコア**: 724/1000  
- **合格ライン**: 720/1000  
- **結果**: 合格 🎉  

## 🕒 試験準備期間
- **期間**: 約2週間（毎日1～2時間程度学習）

## 📚 使用した教材・リソース
1. **Udemy**  
   - [【SAA-C03版】AWS 認定ソリューションアーキテクト アソシエイト模擬試験問題集（6回分390問）](https://www.udemy.com/course/aws-knan/?couponCode=NEWYEARCAREERJP)を使用。問題演習を繰り返し行い、出題形式に慣れました。  
   - 特に間違えた問題は解説を熟読して理解を深めるようにしました。
   - 本番試験と同等の難易度だった気がします。

3. **その他の参考リソース**  
   - Ping-tも利用していましたが、途中で利用を中断しUdemyにフルコミットしました。

## ✏️ 学習内容
### 1. 基本概念の理解
- CLFを取得してすぐに学習をスタートしたため、特に行いませんでした。ハンズオン等も行っていません。

### 2. 問題演習
- Udemyの問題集をひたすら解きまくりました。各模擬問題で9割近い正答率を出せるまで反復しました。
- 問題と答えを覚えるのではなく、なぜこの答えになるのかを意識して取り組みました。

## 📝 試験中の感想
- 「まずい、、、全然わからない、、、」という状態で解いてました...。Udemy問題集の類似問題がほとんど出ませんでしたが、2択か3択には持ち込めたので、「このシチュエーションは多分これかな、、、？」みたいな感じで気合で解いてました笑
- 時間配分は5問おきに少量の休憩を挟み、見直しを含めても若干時間が余りました。

## 💡 所感・反省点
### 所感
- AWSの基本的な設計について学ぶことができました。
- 基本的に問題文が長文だったので、文字を読むのが若干早くなった気がします。

### 反省点
- ギリギリの合格だったので、こなす問題の量をもっと増やすべきでした。Udemyだけでは足りないのでPing-t等も利用するべきだったと反省。CLFはUdemyで事足りたので、SAAも余裕だろうと完全に油断してました...笑
- 設計に関する試験なので絶対ハンズオンで学習したほうが良かったと痛感。
- 全体的に知識を深めるための学習というよりかは資格に受かるための学習になってしまったこと。
- 試験終了時は多分落ちたなぁ...と思っていましたが、当日の夜に合格のメールが届いて発狂しました笑

## 📆 次の目標
- LPICかCCNAあたりを受験するかDocker周辺を学習したいと思っています。試験でもECSやEKSが多く出題されたのでDockerあたりは必修科目かなぁと思いました。
- 正直SAPを取得するモチベーションがないので、ハンズオンで実際に手を動かして理解を深めたいと思います。今の理解度だと3年後の再試験で不合格になる自信しかないので、ハンズオンでイメージを固めて問題の量をもっともっとこなして余裕を持って合格できるようにしたいと思います。
Linux上のVSCodeでsudoが必要なプログラム(C言語)をデバッグする

## 背景
RaspberryPiでpigpioライブラリを使うC言語で書いたプログラムを実行するにはsudoが必要となる。
VSCodeで通常の手順でデバッグするとsudoができないのでデバッグできない。
printfデバッグに限定してもよいが、通常デバッグできると便利。

## 手順の概略
手順の概略は以下の通り。

1. VSCodeで通デバッグするための通常の設定をする
1. sudo でVSCodeを起動する（そのための設定を事前に行う。）
1. デバッグする

sudo でVSCodeを起動すると、そこから起動されるデバッグ対象のプロセスもroot権限を行使できる。
しかし、VSCodeをsudoするのはあんまりよくないようだが、まあ仕方が無い。


ディレクトリ構成や実行可能ファイルは以下の通りと想定する
- ソースコードとかMakefileがあるディレクトリ: ~/develop/hello
- 実行可能ファイル: hello

なお、実行可能ファイルはデバッグ情報などを付与しているものとする(-g -O0オプション指定済み)

## 実際の作業手順
### 1.通常のデバッグするための設定を行う
別記事で書いたので、こちらを参照（https://qiita.com/hase-k0x01/items/a01226de51b2747586fe）
Makefileとかソースコード一式をフォルダにまとめておくこと

### 2. sudoでVSCode起動するための設定をおこなう
この記事で紹介する方法では、VSCodeをsudoで起動する。
sudoでVSCodeを起動すると、ユーザ設定データを保存するためのディレクトリを指定しなければならない。
そのディレクトリをあらかじめ作成しておく(.debug という名前にしておく)
```
$ cd ~/develop/hello
$ sudo mkdir .debug
```

### 3.VSCodeをsudoで起動する
VSCodeをsudoで起動する。
そのためには、オプション --no-sandbox と --user-data-dir を指定する必要がある。
--user-data-dir は、VSCodeの設定データ等を保存するためのディレクトリのようだ。
わかりやすいように、Makefileやソースコード一式があるのと同じディレクトリに配置しておくとよさそう。ファイルがたくさんできるので、ディレクトリ(.debug)を作ってそれを指定しておくとよさそう。

```
$ sudo code --no-sandbox --user-data-dir ./.debug/ ./
```


### 4.VSCodeの設定を行う
この方法でVSCodeを起動すると、VSCodeが全く設定されていない状態になる。
今まで使っていた環境設定とは別の環境設定で起動する。その設定は.debugに保存されているとおもう。
今までの設定が破棄されたわけではなく、ただ単に切り替わっているだけだと思われる。

なので、エクステンションなどのインストールや設定が必要。
最低限の設定だけでもしておくとよい

### 5. デバッグを開始する
VSCodeの設定ができたら、通常の手順でデバッグを開始する。

VSCodeがroot権限で実行されているので、起動されるプロセスもroot権限になるから、root権限が必要なプログラムも問題無くデバッグできる。

以上