OmniAICreator/Qiita-1.07M huggingface dataset:
UbuntuでSSL対応

## 前提
- DNSが設定されていることが前提。
ドメインを取得したサイトで、UbuntuサーバーのIPアドレスと設定したいドメインを紐づけておく。
- ドキュメントルートは`/var/www/html`で、ここに`index.html`などサイトデータ一式が格納されている状態とする。

## Apache2のインストール

Ubuntuでは`httpd`ではなく`apache2`の名前で配布されている。

```shell
sudo apt-get install -y apache2 #インストール
sudo systemctl start apache2 #起動
```

## confファイルの設定
`/etc/apache2/sites-enabled/`にApacheの設定ファイル`000-default.conf`があるので、そこにドメインを設定しておく。
（元データは`000-default.conf.old`のように名前をつけてバックアップしておく）

```shell
sudo vi /etc/apache2/sites-enabled/000-default.conf
```

```000-default.conf
<VirtualHost *:80>
        # The ServerName directive sets the request scheme, hostname and port that
        # the server uses to identify itself. This is used when creating
        # redirection URLs. In the context of virtual hosts, the ServerName
        # specifies what hostname must appear in the request's Host: header to
        # match this virtual host. For the default virtual host (this file) this
        # value is not decisive as it is used as a last resort host regardless.
        # However, you must set it for any further virtual host explicitly.
        ServerName ドメイン名を記載

        ServerAdmin webmaster@localhost
        DocumentRoot /var/www/html

        # 略
</VirtualHost>
```


## 80番・443番ポートを開放
HTTPプロトコル（80番）、HTTPSプロトコル（443番）を受け付けるように、該当のポートを開放

```shell
firewall-cmd --zone=public --add-service=http --permanent
firewall-cmd --zone=public --add-service=https --permanent
firewall-cmd --reload
```

この時点で、HTTPプロトコルによるアクセスは可能に。

## Certbot のインストール

```shell
sudo apt install certbot python3-certbot-apache
```

## Apache 用の SSL 証明書を取得

```shell
sudo certbot --apache
```

1. 使用するドメインを番号で選択
2. HTTP → HTTPS リダイレクト設定をどうするか設定

証明書が無事取得されると、下記のディレクトリにそれぞれ証明書・秘密鍵のファイルが保存される。

- 証明書本体: /etc/letsencrypt/live/ドメイン名/fullchain.pem
- 秘密鍵: /etc/letsencrypt/live/ドメイン名/privkey.pem

## SSLモジュールのインストール

```shell
sudo apt-get install -y mod_ssl #インストール
sudo a2enmod ssl #有効化
```

mod_sslがインストールされると、`/etc/apache2/sites-available`に設定ファイル`default-ssl.conf`が作成されるので、vimなどでこのファイルを開いて先程の証明書と秘密鍵のパスを書き込む。
（元データは`default-ssl.conf.old`のように名前をつけてバックアップしておく）

```shell
sudo vi /etc/apache2/sites-available/default-ssl.conf
```

```default-ssl.conf
<IfModule mod_ssl.c>
  <VirtualHost _default_:443>
    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html

    SSLEngine on
    # 下記はテスト用の証明書・秘密鍵なのでコメントアウト
    # SSLCertificateFile      /etc/ssl/certs/ssl-cert-snakeoil.pem
    # SSLCertificateKeyFile   /etc/ssl/private/ssl-cert-snakeoil.key

    # 先程取得したCertbotの証明書・秘密鍵のパスを追加
    SSLCertificateFile      /etc/letsencrypt/live/ドメイン名/fullchain.pem
    SSLCertificateKeyFile   /etc/letsencrypt/live/ドメイン名/privkey.pem

  </VirtualHost>
</IfModule>
```

## SSLの有効化・Apache2の再起動

```shell
sudo a2ensite default-ssl
sudo systemctl reload apache2
```

Apacheを再起動したら、`https:://ドメイン名`にアクセスして、HTTPSプロトコルでアクセスできるか確認。
CSSが当たらないのを生成AIで解決する方法

## はじめに

 フロントエンドを開発していると、CSSの問題がポツポツと出てくる。
 特にコンポーネントのライブラリを使用すると、うまくCSSが変わってくれないときや、逆に変な枠線が出てきたりと、HTMLやCSSを解析する必要がある。
 CSSは色々と制限、制約がある。親子の関係だったり、設定の優先順位など、設定する項目によっていろいろ条件がある。そんなことをすべて覚えているわけではない。
 
 そんなときは生成AIを使用して確認すると、それなりに解決してくれる。

 その手順を記述します。

 ## 準備

 * Chrome DevToolsを使用します。
 * DevToolsの設定で言語を英語にします。(2025/05/27 現時点で日本語は対応していないが、日本語では答えてくれる)
 * 問題のあるページを表示して、Elementsで対象のタグを選択する。


## 生成AIでの確認方法

* ページを表示して、右クリックで「検証」を選択などし、「Elements」で調査していタグを選択します。
* メニューを表示して「Ask AI」を選択します。 

![スクリーンショット 2025-05-27 144819.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1371938/519584c6-6270-434e-9861-a9a209e12d64.png)

* 日本語設定の場合は、エラーが表示されます。

![スクリーンショット 2025-05-27 144611.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1371938/923ba1b3-79d9-40c4-926a-11064337a78d.png)

* 生成AIのテキストボックスでCSSなどについて質問します。

![スクリーンショット 2025-05-27 145220.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1371938/547af2ea-6031-4598-a151-43ef72dbc6ff.png)

* 今回は、コンポーネントライブラリを使用したときに、丸角になってしまっており、それを尖ったものに直したく、角なしに設定したが、全然効かなかったとき、生成AIに確認しました。
* 生成AIの答え通り、親コンポーネントにも設定したところ、無事な治りました。
* 日本語で答えてとプロンプトを与えてください。日本語で答えてくれます。

## 最後に

* 使った感じ、最近のAIはよくできているので、大体は答えてくれる。
* Chrome DevToolsを使っているが、Geminiなどの設定が必要なのかは不明です。
* 無料で使えている。
* いつも使っているツールで使えるのでありがたいです。
* 結構、前から使えたが、今回記事にした。
【AtCoder】入茶してませんが振り返ります ~何もできていない気がするあなたへ~

## はじめに
皆さん、競プロしてますか？
いろんな記事でこの挨拶をされていましたので、先人に倣い定型句を使わせていただきます。


もちろん私は競プロをしていますよ。参りましたか。

## この記事は何？→私の現状整理！
入茶を目指して素人に毛が生えた程度の私は、私なりに精進しているつもりです。
しかし自分の中で「次何をやれば良いっけ…」と路頭に迷ってしまったため、一度記事を書きながら整理することにいたしました。

また私自身あまりセンスがない自覚もあり、競プロを始めること自体が遅かった中で、先人の方々の記事に助けられることが多々ありました。
中途半端なレベルの私の記事でも、誰かの一助になるかもしれないと、この記事を書くことにいたしました。


稚拙な文章ですが、お付き合いいただければ幸いです。

***
- [はじめに](#はじめに)
- [この記事は何？→私の現状整理！](#この記事は何？→私の現状整理！)
- [簡単な自己紹介](#簡単な自己紹介)
- [現状](#現状)
- [勉強方法](#勉強方法)
    - [AtCoder に登録したら次にやること ～ これだけ解けば十分闘える！過去問精選 10 問 ～](#atcoder-に登録したら次にやること--これだけ解けば十分闘える過去問精選-10-問-)
    - [アルゴ式](#アルゴ式)
    - [AtCoder problems](#atcoder-problems)
    - [NoviSteps](#novisteps)
- [おわりに](#おわりに)
***

## 簡単な自己紹介
初めまして、「てぃーじぇい」と申します。
三十手前の社会人、非IT企業の情シスですが、仕事でプログラムを書くことはほぼありません。
昨年10月ごろ、基本情報技術者試験を受けると決心した際に「アルゴリズムの勉強どうしようか」と考え、競プロというものがちょうど良さそうだったので、趣味になれば良いなと思いつつ始めることにしました。
どうやらファーストACは2024年10月8日とのこと。もう半年以上も経っているのか…。
  
## 現状
![Qiita_draft_20250527_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098794/c09b78e5-48de-499d-acba-c402a54b8fef.png)

前回のABC407を終えた時点で、レーティングは155の灰色です。そもそもコンテストに10回しか出ていないので、本来話はそれからなんですよね…。間3ヶ月ほどまるまる参加していないし。
AtCoderには下記の記載もありますので、とりあえず14回の出場を目指して頑張ります。

> 参加回数が14回に満たないため、推定される実力よりも若干低いレーティングとなっております。

## 勉強方法
まず競プロを始めた時点で、下記記事を参考に進めることを決めました。
https://qiita.com/ktateish/items/afe1494a5cccb1ef13c7

その後は下記に紹介するページを利用しております。使用した時期に関しては行ったり来たり、順不同です。

#### AtCoder に登録したら次にやること ～ これだけ解けば十分闘える！過去問精選 10 問 ～
https://qiita.com/drken/items/fd4e5e3630d0f5859067
後ほど紹介するNoviStepsの生みの親、けんちょん様（@drken）の記事です。大変お世話になっております。
まずは一通り解いた後、解けなかった問題について深掘りをしましたが、Greedyに関してはまだ納得できていないです。

#### アルゴ式
https://algo-method.com/
解答が丁寧、かつ競プロ以外の教材もあるので、競プロ以外の分野の学習にも使っております。
アルゴリズム初級：96%
アルゴリズム中級：69.8%
アルゴリズム上級：未解答

#### AtCoder problems
https://kenkoooo.com/atcoder/
こちらでは灰色のA問題とB問題をひたすら埋めていっています。
最新から順にABC160までさらいましたが、B問題で解けないものが15~20問ほど。
最近はちょっとずつ解けるC問題が増えています。

#### NoviSteps
https://atcoder-novisteps.vercel.app/
上記3つで詰まっていたときに始めました。現在最もお世話になっています。
5Qをほぼ解き終え、4Qで下記4分野を進めることにしました。
- バケット
- 集合（set型）
- 連想配列（型・型）
- ランレングス圧縮

自力で解けない「解説AC」がトータル16問ほど。解説を読み、理解はできているが解く際のフックになるポイントを身につけられていない感覚があります。
![Qiita_draft_20250527_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098794/bd3ee874-770b-44b3-b923-38964a587fb9.png)

解説を見てから二週間ほど間を空けた後、問題を解こうとしても解法が思い出せない・浮かばない。身についていないんですよね結局…。

## おわりに
以上、何の解決もオチもない記事です。


インプットができない…じゃあアウトプットしよう！と思い立ったはいいものの、書き終えてみるととても不安です。これが誰の何のためになるのか全く想像できません。


序盤で綺麗事を言っていた私は、どこへいってしまったのでしょうか。ウケる。

有識者の皆様、暇な時で構いませんので「こういうことやってみたら？」という話がございましたらコメントいただけると幸いです。

次の記事は入茶記事になるか、それとも入前に再度つまずくのか。乞うご期待！
# ChatGPTと二人三脚でWebアプリを作ってみた話   〜非エンジニアが10日で作る「ポケポケ対戦ログ」〜


# ChatGPTと二人三脚でWebアプリを作ってみた話  
〜非エンジニアが10日で作る「ポケポケ対戦ログ」〜

## 📌 はじめに

ポケポケを遊んでいて、  
「勝敗を記録したい」「デッキごとの勝率を見たい」  
と思ったことがきっかけで、Webアプリを作ることにしました。

とはいえ、プログラミングはそこまで得意じゃありません。  
今回は ChatGPT にガッツリ手伝ってもらって10日間で形にしてみた  
**個人開発プロジェクトの記録**です。

## 🛠 使用技術

- フロント：Blazor WebAssembly
- バックエンド：ASP.NET Core + WebAPI
- 認証：Googleログイン（外部認証）
- DB：PostgreSQL（Azure Database for PostgreSQL）
- ホスティング：Azure App Service
- CI/CD：Azure Pipeline 👈失敗

## 🤖 ChatGPTとの連携

ChatGPTには以下のような場面でサポートしてもらいました：

- Blazorのページ構成の設計
- Razorファイルの記述支援（イベントバインドやモーダル）
- DB設計とEntity Frameworkの使い方
- Google認証の実装方法（sub vs GUID問題の解消）
- UIのレスポンシブ調整
- エラー文の解釈と解決方法
- Azure Pipeline 👈失敗

1.口語とスクショでやりたいことを伝える
2.ソースをコピペする
3.1.に戻る

…かんたん！

## 📷 アプリのスクリーンショット

- ログイン画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098646/fd1d64df-6fe8-442c-81ce-96025d8b86b9.png)
生成画像でかっこいいログイン画面

- 勝敗カウンター
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098646/9071b3bf-009c-41df-bdc5-b44d49cf7693.png)
このボタンは右でこのボタンは下で…

- 結果集計
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4098646/a4b12b3c-029e-4605-a555-4172b39dec2e.png)
最低限の機能を満たします

## 🔗 公開URL

> https://pokepokelog.net

登録不要・無料で誰でも使えます。  
現状はシンプルな記録アプリですが、今後も改良予定です。

## 🙌 終わりに

「個人でアプリを作ってみたいけど難しそう…」と思っていた自分でも、  
ChatGPTがいたことで最後まで形にできました。

頼りになるパートナーですが、
深いエラーにはまったときは全然帰ってこれないやつでした。
(人間も同じ？)

もし何か作りたいアイディアがある人には、  
**ChatGPTを「雑談できる開発パートナー」として使ってみる**のをおすすめします！

**【この記事はChatGPTで作成されました】**
今更聞けないDDoS攻撃の定義をバルス祭りと一緒に学ぼう

## 目次
1. 前書き
1. サイバー攻撃
1. サイバー攻撃の種類
1. DDoS攻撃とは
1. バルス祭りとDDoS攻撃
1. まとめ
1. 

## 前書き
本日のトピックはセキュリティです！
研修の中でサイバー攻撃などを扱い、その中でDDoS攻撃の話を耳にした瞬間中の人は「これってバルスのあれじゃない、、、？」とふと思ったりしました。

DDoS攻撃って名前は知ってるけど何かよく知らない、、、などの方にも親しみやすいような記事を目指して書いてみます。

## サイバー攻撃とは

厳密にサイバー攻撃を定義すると、**人に対する傷害もしくは死、または物に対する損害もしくは破壊を引き起こすことが合理的に予期されるサイバー行動**をサイバー攻撃という。

そのため、我々が普段からサイバー攻撃だ！！って騒いでいる者はたいていの場合サイバー犯罪とかって定義されていることが多いですね。

## サイバー攻撃の種類

マルウェアとひとくくりにされることが多いですが、、、実はこんなに種類があるみたいですね。
|    | 感染メカニズム    |形態      |
|:-----------|:------------:|:------------:|
| ウイルス      | 第三者のプログラムやデータベースに対して<br>意図的に何らかの被害を及ぼすように作られたプログラム      | 他のファイルに寄生      |
|   ワーム | ネットワークを介して自己増殖していく     | 独立したファイル      |
| トロイの木馬   | ユーザーの操作によって実行、インストールされる    | 独立したファイル   |

いづれかの機能を持っていたら、コンピュータウイルスに該当するみたいですね。
● 自己伝染機能
● 潜伏機能
● 発病機能

ウイルスとワームの違いは分かりにくいですが、**自己増殖できるかどうか**が1つのポイントになりそうです。

本当は機能上の話もしたいですが、とりあえず**ランサムウェア**が**暗号化しちゃってPCなどを利用不可能にしてしまう**ということを押さえておけば一旦大丈夫だと思います。気になる人は、ボットやバックドアなども調べてみてください。


## DDoS攻撃とは

**DDoS攻撃：Denial of Service attack**<br>
一度に大量の通信を発生させて、サーバーダウンを試みる。

攻撃者が大量のデヴァイスを用いて、サービス停止に追い込むことですね。DoS攻撃なんて言葉も聞いたことあるかもしれませんが、こちらは1台のデヴァイスを通じて大量にアクセスして、過剰な負荷をかけてサーバーダウンを試みます。


要するに、「意図的に複数の機器を用いてアクセスしまくって、サーバーダウンさせてやろう！サービスを停止させてやろう！」というのが、DDoS攻撃です。

## バルス祭りとDDoS攻撃

そもそもバルス祭りとは？？という方もいらっしゃるかと思います。簡単に言うと、「天空の城ラピュタ」という映画に「バルス！」と滅びの呪文を唱えるシーンがあります。<br>
Twitterのユーザーが面白がって、その瞬間に一斉に「バルス！」とツイートをし始めます。

これだけみたら、お祭りみたいだねーということでバルス祭りなんて言われるようになったみたいですね。ちなみにこのお祭り、一時的にツイッターのサーバーがダウンしてみたり、秒間で最もツイートされた単語を記録してしまうほどだそうです。<br>


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3415165/e4ac975c-8a47-4cd6-aac2-94123ef6c411.png)
有名なシーン<a href ="https://flying-fantasy-garden.blogspot.com/2016/12/blog-post_39.html">空中庭園と幻の飛行船より</a>

さて、ここでDDoS攻撃と比べてみましょうか。DDoS攻撃は悪意をもってサーバーに負荷をかけてサービス停止に追いやっています。他方で、バルス祭りは悪意なく、みんなが一斉にツイートしたらサーバーに負荷がかかってしまい結果的にサービスが止まっていますね。


意図せず、DDoS攻撃のようなことをしてしまっていることになりますね()日本人はレアコイルのくだりもそうですが、団結すると恐ろしいですね、、、


## まとめ
DDoS攻撃について簡単に述べながらも、身近な例と比べることができました。誤植などあれば遠慮なくご指摘ください！最後までごらんいただきありがとうございま
FizzBuzz問題 いろんな解き方

今回はPaizaの「条件分岐 – FizzBuzz」問題にチャレンジ！過去に解いたことがあるけど、今度はほかの解き方も考えてみる！

<br><br>

## 🧩問題概要

整数 `N`が与えられたとき、

- 3 の倍数なら "`Fizz`"
- 5 の倍数なら "`Buzz`"
- 3 と 5 の両方の倍数なら "`FizzBuzz`"
- それ以外はそのまま `N` を出力
<br>

入力例：

    6

出力例：

    Fizz

<br>

https://paiza.jp/works/mondai/conditions_branch/conditions_branch__mod_boss

<br><br>

## ✅OKパターン①：シンプルなif文
```js
const rl = require('readline').createInterface({input:process.stdin});

rl.once('line',(input) => {
    const N = Number(input);
    
    if(N % 3 === 0 && N % 5 === 0){
        console.log("FizzBuzz");
    }
    
    else if (N % 3 === 0){
        console.log("Fizz");
    }
    
    else if (N % 5 === 0){
        console.log("Buzz");
    }
    
    else{
        console.log(N);
    }
        
    rl.close();

});
```
💡ポイント：複数条件が重なる場合は、一番厳しい条件を先に書く！

<br><br>

## ✅OKパターン②：文字列を連結するスタイル
```js
let result = '';
if (N % 3 === 0) result += 'Fizz';
if (N % 5 === 0) result += 'Buzz';
console.log(result || N);
```
🔹 メリット：コードが短く、冗長なif-elseが不要

<br><br>

## ✅OKパターン③：関数化して再利用しやすく
```js
function fizzBuzz(n) {
    if (n % 3 === 0 && n % 5 === 0) return "FizzBuzz";
    if (n % 3 === 0) return "Fizz";
    if (n % 5 === 0) return "Buzz";
    return n;
}

console.log(fizzBuzz(N));
```
🔹 メリット：他の問題でも使えるように、再利用可能なコードに
🔹 テストや別ロジックにも使えるので拡張性バツグン！

<br><br>

## ✅OKパターン④：三項演算子で1行にギュッと
```js
console.log(
  N % 15 === 0 ? "FizzBuzz" :
  N % 3 === 0 ? "Fizz" :
  N % 5 === 0 ? "Buzz" :
  N
);
```
🔹 メリット：コード1行で超スッキリ
🔹 デメリット：ネストが深いと読みづらくなるかも

<br><br>

## ✅OKパターン⑤：マップ（オブジェクト）活用で拡張しやすく
```js
function fizzBuzz(n) {
    let result = '';
    const rules = {
        3: 'Fizz',
        5: 'Buzz',
    };

    for (let key in rules) {
        if (n % Number(key) === 0) {
            result += rules[key];
        }
    }

    return result || n;
}
console.log(fizzBuzz(N));
```
🔹 メリット：7ならHoge、11ならFooとか簡単に追加できる！
🔹 柔軟性を重視！

<br><br><br>

## 📝気づきメモ
- `if-else`は条件の順序を絶対に意識する
- シンプルな問題でも、複数の正解パターンがある
- 書き方によって、可読性や拡張性が全然違う！
<br>

### ✨新しく学んだこと
- %（剰余演算子）を活用して条件をコントロールできる
- `||` を使った省略テク：`console.log(result || N)` で簡潔
- コードを関数化すると再利用性がUPする
- オブジェクト（マップ）による条件管理は拡張に最適
- ネストが深くなりすぎないよう、可読性を保つ意識が大事！

### 🎯まとめ

PaizaのFizzBuzz問題は「ただの3と5の話」で終わらず、分岐の考え方そのものを学べる最高の教材だった！

<br><br><br>[僕の失敗談(´;ω;｀)と解決法🐈](https://paizabeginner.wordpress.com/2025/05/27/paiza%e3%81%a7%e5%9f%ba%e6%9c%ac%e3%83%9e%e3%82%b9%e3%82%bf%e3%83%bc%ef%bc%9afizzbuzz%e5%95%8f%e9%a1%8c-%e3%81%84%e3%82%8d%e3%82%93%e3%81%aa%e8%a7%a3%e3%81%8d%e6%96%b9/)
Claude4がすごい！AWS試験用クイズアプリが一瞬でできた！

# はじめに

2025/05/22にClaude4がリリースされました！
ちょっと試してみたところ、ものすごい進化していたので感動を共有したいです！

# AWS試験用クイズアプリを作ってみた！

みんなで早押しクイズというアプリを使って楽しく試験勉強出来たらいいなと思い、以下のプロンプトを投げてみました。

```txt
AWS Documentを参照してAWS CLF試験向けの問題を作成してください。
問題は「みんなで早押しクイズ」に作成したいです。
自動的に作問するようにしてください。
```

::: note
AWS Documentation MCP Serverを使用しています。
https://awslabs.github.io/mcp/servers/aws-documentation-mcp-server/
:::

CSV形式のデータか、問題を作成してくれるスクリプトが生成されることを期待していましたが、なんと、オリジナルのReactアプリを生成してくれました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4026620/c81941e6-181e-4f60-94ca-790c543ca64c.png)

なんだか危機感すら感じてしまいますね。

さらに「リアルタイム問題生成機能を追加してください」とリクエストしてみたところ、AWSドキュメントからリアルタイムに問題を生成してくれるようになりました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4026620/fc37cb92-feac-4dae-a973-cab1efd17546.png)

最高ですね！

# 終わりに

生成AIの進化が止まらないですね！
誰でもアプリが簡単に作れてしまう時代が来ましたね！！

# 弊社では一緒に働く仲間を募集中です！
現在、様々な職種を募集しております。
カジュアル面談も可能ですので、ご連絡お待ちしております！

募集内容等詳細は、是非採用サイトをご確認ください。
https://engineer.po-holdings.co.jp/
JavaのDo-while文はなぜ現場であまり使われないのか？

こんにちは、DeepBlend45です。
Javaの制御文の中で、do-while文はあまり現場で使われていないと聞きました。
今回はその理由についての考察と、自分が学んだことをシェアします。

## 1. do-while文とは？
```java
do {
  // 処理
} while (条件);
```
・少なくとも1回は処理が実行される特徴がある
・条件判定が後ろにある
## 2. なぜ現場であまり使われない？（考察）

・条件判定が後ろにあるため、コードの読みやすさが低下する場合がある
・処理の流れが直感的に理解しづらいことが多い
・チームでコードを統一しやすいように、while文が好まれる傾向がある？
## 3. 学んだこと

・初心者は基本的にwhile文を使い、どうしても1回は処理したい場合にだけdo-whileを検討するのが良い。（現場のやり方に従うのが無難）

## まとめ

・do-while文は便利な場面もありますが、読みやすさや保守性を考えると現場ではあまり使われないようです。
・これからコードを書くときは、while文中心で考えると良さそうです。

## 最後に
最後まで読んでいただきありがとうございます！
これからも実際につまづいたところや感じた疑問について、自分なりにまとめて投稿していきます！
これからもどうぞよろしくお願いします！
FreeBSD包管理與系統升級

# 包管理與系統升級
FreeBSD同時提供了基於源碼編譯軟件包的`Ports`系統和基於預編譯二進制包的`pkg`包管理。

## pkg
`FreeBSD 10`之後引入了新的`pkg`工具用於管理軟件包，常用指令類似與`yum/apt/dnf`：

```html
# pkg search 軟件包名稱

<!-- 安裝刪除軟件包 -->
# pkg install 軟件包名稱
# pkg remove 軟件包名稱 <!-- 移除指定軟件包 -->
# pkg autoremove 軟件包名稱 <!-- 清理不需要的依賴 -->

<!-- 升級系統已經安裝的所有軟件包 -->
# pkg upgrade

<!-- 查看已安裝的軟件包信息 -->
$ pkg info <!-- 查詢所有已安裝的軟件包 -->
$ pkg info 軟件包名稱 <!-- 查詢某個已安裝軟件包的具體信息（包括軟件包的版本、來源、安裝選項等） -->

<!-- 依賴查詢理 -->
$ pkg info -d 軟件包名稱 <!-- 查詢指定已安裝軟件包的依賴信息 -->
$ pkg all-depends 軟件包名稱 <!-- 查找指定已安裝軟件包的依賴 -->
$ pkg rall-depends 軟件包名稱 <!-- 遞歸查找軟件包的所有依賴 -->
$ pkg required-depends 軟件包名稱 <!-- 查詢指定軟件包被哪些其它包依賴 -->

<!-- 展示手動安裝的軟件包 -->
# pkg prime-list
# pkg prime-origins <!-- 包含軟件包port路徑 -->
# pkg query -e '%a = 0' %o <!-- 直接通過屬性進行查詢 -->

<!-- 修改軟件包安裝原因 -->
# pkg set -A 1 軟件包名稱 <!-- 設置軟件包為自動安裝（可被pkg autoremove清理） -->
# pkg set -A 0 軟件包名稱 <!-- 設置軟件包為手動安裝 -->
```

## Ports
`Ports`系統提供了官方源內所有軟件包的**源碼樹**，編譯安裝前能夠定製編譯參數，控制依賴項。
Ports源碼樹位於`/usr/ports`目錄之，首次使用前需要初始化Ports樹，執行：

```
# portsnap fetch extract
```

之後更新Ports樹執行：

```
# portsnap update
```

編譯Ports樹下某個軟件包的源碼只需進入對應的源碼目錄中，執行以下步驟：

1. `make config` 進入交互式界面，配置編譯依賴
1. `make` 執行編譯操作
1. `make install` 編譯完成後執行安裝操作
1. `make clean` 安裝完成後清理編譯生成的臨時文件

使用源碼編譯的軟件包安裝後同樣受到`pkg`包管理器的管理。

## 安裝系統更新
FreeBSD使用`freebsd-update`獲取和安裝系統補丁：

```html
<!-- 獲取當前版本系統的更新，更新拉取完成後會進入文件變化的預覽介面，使用 q 鍵退出預覽 -->
# freebsd-update fetch

<!-- 安裝系統更新 -->
# freebsd-update install
```

FreeBSD常規系統更新僅接收當前版本號內的補丁性質更新，
普通系統更新**不會**改變主版本號以及副版本號。

## 系統版本升級
FreeBSD並非**滾動發行版**，系統有明確的版本劃分，
升級系統版本同樣使用更新工具`freebsd-update`。

升級系統到指定版本，執行指令：

```
# freebsd-update -r 目標系統版本 upgrade
```

當前支持的系統列表可從[FreeBSD官網](https://www.freebsd.org/releases/)查詢。

以`FreeBSD 10.1`正式版為例，執行指令：

```
# freebsd-update upgrade -r 10.1-RELEASE
```

之後系統會開始下載升級所需要的補丁，下載完成之後，執行更新指令：

```
# freebsd-update install
```

## 系統版本升級後pkg工具不可使用
問題說明：<br>
系統版本升級後，FreeBSD的包管理器pkg可能會出現動態鏈接庫缺失的問題，錯誤信息如下：

```
ld-elf.so.1: Shared object "libssl.so.111" not found, required by "pkg"
```

相關討論參考[FreeBSD Forums](https://forums.freebsd.org/threads/pkg-not-working-ld-elf-so-1-shared-object-libssl-so-111-not-found-required-by-pkg.68078/)。

解決方案：<br>
FreeBSD提供了pkg工具的靜態編譯版本`pkg-static`，可使用該工具重新安裝pkg：

```
# pkg-static install -f pkg
```
🔰 Swift初心者向け：If文（If Statements）の基本と使い方まとめ

今回はSwift初心者向け：If文（If Statements）の基本と使い方まとめました！　
ぜひ参考にしてください！！

プログラミングにおいて条件分岐はとても重要です。
if 文はアプリ開発で必ずと言っていいほど必要な事なので、必ず習得をしときましょう！

-----
まずは、

1. if ~ の文　基本の書き方


```swift  
if 条件 {
    // 条件がtrueのときに実行される処理
}
``` 

例：
```swift  
let score = 85

if score >= 80 {
    print("よくできました！")
}
``` 
------

🔄 2. else を使う

```swift 
let isRaining = true

if isRaining {
    print("傘を持っていこう！")
} else {
    print("今日は傘はいらないね！")
}

// 出力 "傘を持っていこう！"
``` 
------

🔀 3. else if を使う（複数条件）

```swift 
if 条件1 {
    // 条件1がtrue
} else if 条件2 {
    // 条件2がtrue
} else {
    // どれにも当てはまらないとき
}
``` 
例
```swift 
let temperature = 30

if temperature >= 35 {
    print("猛暑日です！")
} else if temperature >= 25 {
    print("暑いですね！")
} else {
    print("今日は涼しいです")
}

// 出力 "今日は涼しいです"
``` 
----

☑️ 4. 複数の条件を組み合わせる（&&, ||）

&&（かつ）：両方の条件がtrueのときに実行
例: 
False && True -> False

||（または）：どちらか一方でもtrueなら実行
例: 
False || True -> True

```swift 
let isSunny = true
let isWeekend = false

if isSunny && isWeekend {
    print("ピクニックに行こう！")
} else {
    print("今日は家でゆっくりしよう")
}

// 出力 "今日は家でゆっくりしよう"
``` 

まとめ
---
- if 条件
条件が true のときに実行される
---

- else
if の条件が false のときに実行される
---
- else if 条件
複数の条件を順番にチェックできる
---
- &&  /  ||（条件の組み合わせ）

   &&：すべての条件が true のときに実行される（AND）
   ||：どれか1つでも true なら実行される（OR）
FreeBSD概述及安裝配置

# 概述
`FreeBSD`是**開源**、**自由**的`Unix Like`操作系統。
FreeBSD繼承自`BSD`（`Berkeley Software Distribution`，伯克利軟件發行版）系列，
是正統的Unix分支，由於法律原因，FreeBSD不能稱爲Unix；
但內核中部分使用了FreeBSD的macOS(Darwin/XNU)，獲得了`UNIX 03`認證。

相比Linux，FreeBSD更加貼近傳統Unix的設計理念。

## 與 Linux 的比較
授權協議差異：

- Linux使用`GPLv2`許可證，許可證兼容性較差，內核二次開發需要繼續開源代碼，
直接導致一些使用其它許可證的開源技術無法併入Linux內核，如`ZFS`文件系統
- FreeBSD使用`BSD`許可證，許可證寬鬆，有多家公司基於FreeBSD進行商業性的二次開發，
如`Apple`的`macOS`、`Sony`的`Play Station 3/4`等

開發模式差異：

- Linux項目僅僅包含內核開發，開發迭代較快，
上游工具鏈由不同的團隊維護，同時有衆多基於Linux內核的**發行版**
- FreeBSD項目是完整的操作系統，包含內核、設備驅動、工具鏈、文檔等，
整個系統均由同一團隊維護，因而具有較高的一致性，但開發迭代較慢，衍生發行版也較少

社區規模差異：

- Linux商業宣傳優秀，社會關注度高，開發團隊龐大，對於新硬件、新技術有較好支持
- FreeBSD關注度和商業宣傳不如Linux，開發團隊規模較小，開發進度較慢，對新硬件的支持較爲緩慢



# 安裝與配置
[FreeBSD官網](http://ftp.freebsd.org/pub/FreeBSD)提供了鏡像下載。
`ISO-IMAGES`目錄下即爲正式發佈版本的鏡像，選擇匹配的CPU架構和版本即可。

鏡像命名規則如下：

```
FreeBSD-版本號-RELEASE-CPU架構-鏡像類型.img/iso
```

鏡像類型分爲以下幾類：

- `bootonly` 後綴名爲`iso`，僅供啓動引導使用
- `disc1` 後綴名爲`iso`，基本鏡像，包含基本軟件包
- `dvd1` 後綴名爲`iso`，包含大量常用軟件包
- `memstick` 後綴名`img`，刻錄使用鏡像，包含基本軟件包
- `memstick-mini` 後綴名`img`，刻錄使用鏡像，包含核心軟件包，最小化安裝使用

後綴名`iso`的鏡像用於虛擬機啓動，後綴名`img`的鏡像用於刻盤安裝。
刻錄鏡像使用`dd`指令，並需要添加部分參數，以`amd64`架構的`memstick-mini`鏡像爲例，刻錄指令如下：

```
# dd if='FreeBSD-版本號-RELEASE-amd64-memstick-mini.img' of='/dev/磁盤塊設備' bs=1M conv=sync
```

## UEFI引導
`FreeBSD 10`開始引入UEFI啓動支持，FreeBSD 10運行在UEFI模式下需要下載獨立的帶有`uefi`名稱的鏡像版本。
以`FreeBSD 10.3`爲例，對應的amd64刻錄鏡像名稱爲`FreeBSD-10.3-RELEASE-amd64-uefi-memstick.img`。
從`FreeBSD 11`開始，鏡像均支持UEFI啓動，不再區分是否帶有uefi。

使用`efibootmgr`可為手動生成引導菜單：

```html
<!-- 掛載ESP分區到 /boot/efi -->
# mount -t msdos ESP分區 /boot/efi

<!-- 複製引導efi到ESP分區 -->
# mkdir -p /boot/efi/ESP/FreeBSD/
$ cp /boot/loader.efi /boot/efi/ESP/FreeBSD/loader.efi

<!-- 創建引導項 -->
# efibootmgr -acl /boot/efi/EFI/FreeBSD/loader.efi -L FreeBSD
```

更多efibootmgr說明可參考[FreeBSD手冊](https://www.freebsd.org/cgi/man.cgi?query=efibootmgr)。
注意**不要**在chroot環境下使用efibootmgr創建引導項，chroot環境下生成的引導efi路徑可能不爭取。

## GRUB2引導
在`grub.conf`文件中爲FreeBSD創建啓動項，指定FreeBSD啓動文件`boot1.efi`的位置，配置如下：

```
menuentry 'FreeBSD' {
    insmod part_gpt
    insmod fat
    set root='hd0,gpt1'
    chainloader /EFI/FreeBSD/boot1.efi # FreeBSD efi文件的實際路徑
}
```

使用`boot1.efi`文件引導FreeBSD相比直接通過GRUB2啓動**BSD內核**的方式更加簡單，無需複雜的引導配置。
Qiitaの「連続投稿 Weekly」バッチはいつもらえるのか？

# 概要
本記事はQiitaの一機能であるバッジ機能について、いつ頃付与されるかが不明であるという点に関して、お問合せしてみたところ回答いただけましたという内容の共有になります

自分のように収集癖があって「連続投稿 Weekly」をコンプリートしたいという方向けの記事となっています

# 本題
結果から記載します
Qiitaサポートさんに「連続投稿 Weekly」の集計日、起算日について問い合わせたところ以下のように回答いただきました

> 「連続投稿 Weekly」バッジの判定期間につきましては、「月曜日〜日曜日」を1週間の単位としてカウントしております。
この期間内に1件以上の投稿を継続して行っていただくことで、バッジが付与される仕様です。

自分は以下の2パターンが考えられてしまったので、今回の問い合わせに至ったという経緯になります
- 固定で日曜〜土曜日までに1記事でも投稿すればバッジがもらえるのか
- 前回投稿した日付から1週間以内(前週の水曜日に投稿した場合は次週の火曜日)までなのか

# おわりに
短いですが、今回はここまでになります
同じように連続投稿 Weekly」のバッジ挑戦中ですや、これから挑戦しようと思ってましたという方の有益な情報になれば幸いです
こんなお仕事ありなのかしら

あたし、MML歴 30年なのね
でも、MMLだけで本格ピアノ曲を作れるようになったの

こんなのとかも

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

これ、フルでMMLで書かれているのね

その証拠に、掲示板に上げてあるのね
（しかもこれパブリックドメイン）

https://sakuramml.com/mmlbbs6/post.php?mml_id=2813

これだけ難しい曲をリアリティーに演奏したかのように
MMLで打ち込めるってことは

どれだけ仕事になるのかしら


その案件名はこれ

https://coconala.com/services/3722998

## ところで、MMLって
立派な言語です

c と書けば、とりあえず、ドの音がでる

関数もなかなか良い出来ばいになったので、こんな仕事を公開してみるのね
Azure IoT Hub から Azure Storage にメッセージルーティンした際のエンリッチの値を Databricks で参照する方法


## 概要

Azure IoT Hub から Azure Storage にメッセージルーティンした際のエンリッチの値を Databricks で参照する方法を紹介します。`Properties`列にて連携されるようです。本記事ではでエンリッチ機能にフォーカスした内容となっており、下記記事内容を前提としています。

- [Azure IoT Hub から Azure Storage にメッセージルーティンした device-to-cloud メッセージ(テレメトリー)を Databricks で参照する方法 #AzureIoTHub - Qiita](https://qiita.com/manabian/items/a98d3dfce27010affb62)


## メッセージルーティンの実施

### デバイスの接続と切断を実施

#### デバイスの作成と接続文字列の取得

Azure IoT Hub のリソース画面にて、`デバイス`タブを選択後、`+ デバイス`の追加を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/68298e55-1012-42d5-8bdf-cddf36ca0138.png)


`デバイス ID`に任意の値を入力し、`保存`を選択してデバイスを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/454f5851-6312-480d-84e5-347244dd4186.png)


作成したデバイスを表示して、`プライマリ接続文字列`値をコピーします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/b300bb26-0593-4a93-a1d8-17a3c4cf957c.png)


## メッセージルーティンの実施

### エンリッチの設定を実施

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/dd8a07bd-5b29-409a-9ff2-03b15e43f084.png)

### device-to-cloud メッセージ(テレメトリー)の送信

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/33444d7e-d3fb-402e-88b1-117423827ca9.png)


## Databricks におけるデータの読み込み

### Azure Storage からデータを取得

Azure Storage からデータを取得すると、`Properties`列に含まれていることを確認できます。

```python
storage_account = "iothubstorage123"
container       = "qiitatest"

abfs_path = f"abfss://{container}@{storage_account}.dfs.core.windows.net/"
abfs_path += "iot-hub-test-0001/*/*/*/*/*/*"
```

```python
src_df = (
    spark.read
         .format("avro")
         .load(abfs_path)
)
src_df.printSchema()
src_df.display()
```

```python
src_df.printSchema()
src_df.display()
```


```text
root
 |-- EnqueuedTimeUtc: string (nullable = true)
 |-- Properties: map (nullable = true)
 |    |-- key: string
 |    |-- value: string (valueContainsNull = true)
 |-- SystemProperties: map (nullable = true)
 |    |-- key: string
 |    |-- value: string (valueContainsNull = true)
 |-- Body: binary (nullable = true)
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/888a6295-488d-43f2-a33d-e4a1da9dea2a.png)
Geminiで杖を使う魔法少年を描いてみた。

# 概要

Geminiで杖を使う魔法少年を描いてみました。

# 実装

プロンプトと実行結果は以下の通りでした。

```
聖なる杖を使う魔法少年を描いてください。
```

![聖なる杖を使う魔法少年_20250527.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3192024/39997948-3212-4b54-ac37-b885c38cfc7f.png)

# まとめ

何かの役に立てばと。
Power Apps で 10以上20以下の時はA、その他の場合はB という切替をする方法

# はじめに
ごきげんよう、百合宮桜（Miyu）です(≧▽≦)
今日は Power Apps のキャンバスアプリで数字や日付・時間などの範囲によって表示する値を切り替える方法を説明します。いわゆる ○○ 以上 ×× 以下という表現での切り替えですね。

例えばテストの点数（30点満点）が
- 10点未満だったら、お疲れ様の画像

- 10点以上20点以下だったら、すごいよと誉める画像
    
- 20点以上なら、流石！と褒めたたえる画像

に切り替えるという形です。

# 実装方法
## 画像の追加
画像をアプリ内にアップします

1. 左側の・・・ > メディア をクリックします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/5ec10570-4cae-4a0c-9024-ea6bbc6fdc3c.png)

2. メディアの追加 > アップロード をクリックします

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/3d72b980-ec37-4eb1-9894-4003f129bbc3.png)

3. アップする画像を選択し、開く をクリックします

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/0d6401cd-8b83-4120-9373-ee0b5d3aa457.png)

4. 画像がアップロードされました

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/ca005500-5baa-4b8a-a60e-6dca2f469812.png)

## テキスト入力コントロールの配置
点数を入力する部分を作ります。

1. テキスト入力コントロール を挿入します

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/29c2555e-2443-4ed2-bd75-c74e3a56227a.png)

2. 既定のテキストを削除し、書式を「数値」に設定します

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/288964bf-e711-4bd2-a49f-58d1bd84c0bd.png)

3. 見た目を整えます

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/fafde3e3-6628-4a19-bd4b-b1c90588a335.png)

## 画像コントロールの配置
画像を表示する部分を作ります。

1. 挿入 > メディア > 画像をクリックします

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/ed648d94-240f-4148-ab83-b17003718853.png)

2. 画像コントロールの Image プロパティに以下の式を入力します

    ```
    If(
        Value(TextInput1.Text) <10, お疲れ様,
        Value(TextInput1.Text) <=20,すごい,
        さすが
    )
    ```

    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/dec12c06-bddb-4a8c-929b-72c352978900.png)
    
    TextInput1 は先ほど作った点数をいれるテキスト入力コントロールです。
    入力された数値はテキストとして処理されるので Value 関数で数値に変換します。
    IF 関数は条件1 が False の場合、条件2 へ行くという動きをします。
    つまり条件1である Value(TextInput1.Text) <10 が False の時点で TextInput1 の値は10以上であることが確定します。これを利用して、第2条件に Value(TextInput1.Text) <=20 と書く事で10以上20以下の時という範囲を指定した条件が作れます。

以上で完了です。
点数を入力して、動きを確認してみてくださいね！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/4c1cd5af-079b-4e3e-81c1-e00376187888.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/5ecba13d-c356-4d71-bec8-5cc406242e0c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3032705/62cba684-9aad-4e35-ab88-c2733cb33cad.png)

#  終わりに
 いかがでしたか？
 結構あっさりと作れたと思います(≧▽≦)
 このままだと、点数が未入力の時に「お疲れ様」の画像が出てしまう💦という問題もありますが、そこは画像コントロールの表示・非表示を切り替えるなど各自で工夫してみてください！
 それではごきげんよう♪
【Code for IBM i】Db2 for i のAI連携機能を使ってみました

# はじめに
VS CodeのIBM i 向け開発環境を提供するCode for IBM i は、さまざまな機能を提供していますが、今回はAIとの連携機能を試しに使ってみました。
Code for IBM i のインストールについては、この記事が参考になりますので、ぜひ一読ください。
    [Code for IBM i をぼちぼちはじめてみる①インストール編](    https://qiita.com/gomAnomalocaris/items/5fe85c25195d35e2bc6e "Code for IBM i をぼちぼちはじめてみる①インストール編")

設定方法については、こちらの情報を参考にしました。
[Code Assistant](https://codefori.github.io/docs/extensions/db2i/ai/code-assistant/ "Code Assistant")

# 前提条件
この機能を利用するためには、VS CodeにAIの拡張機能を導入する必要があります。
ガイドではGitHub CopilotとContinueの2つについて紹介されています。今回はGitHub Copilotを使ってみました。
GitHub Copilotの導入に際してはGitHub IDが必要になります。詳細はこちらの情報が参考になると思います。
[GitHub Copilot のクイック スタート](https://docs.github.com/ja/copilot/quickstart "GitHub Copilot のクイック スタート")
[GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot "GitHub Copilot")

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539469/c2a79cc0-3052-4020-9819-558ae2512734.png)

GitHub Copilot Chatも導入しましょう。

# 使い方
1. <img width="40" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539469/a64d59d2-5fb4-433c-be3c-1fc979c24e7f.png">アイコンからIBM iに接続します。
2. 以下の要領でCopilot Chatを開始します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539469/2fb58836-287e-4168-baab-b8254ccd18ed.png)
3. 開始するとこんな感じになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539469/d505e5ef-d356-479f-8645-3692630609c2.png)
このChatを使っていろいろ試してみます。
4. Db2 for i へ要求を投げる場合は、チャットの入力画面の最初に"@db2i"と入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539469/b083be51-ce6c-4520-b79d-aafaa1191502.png)
5. 例えば、「sample.employeeテーブルのカラム情報を得るにはどうしたら良いですか？」と入力してみると以下のような答えが返ってきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539469/5d442cb8-a5e1-4814-b24e-81796d31b71f.png)
6. もう少し高度なことをお願いしてみましょう。「sample.departmentテーブルを活用する方法を教えてください」と入力してみると以下のような答えが返ってきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539469/34464525-05a9-496a-b6f8-189925f4b3e6.png)
7. 試しにこんなことを聞いてみました。「sample.employeeテーブルのデータを表示してください」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539469/6c831214-9ec4-4a5c-bba3-0d05de78774d.png)
流石に教えてくれませんでした。
この機能の説明は以下のURLにありますが、この機能でできないこととして以下の記述があります。
[Code Assistant](https://codefori.github.io/docs/extensions/db2i/ai/code-assistant/ "Code Assistant")
・お客様のテーブル、ビュー、プログラムなどからデータを送信しません。
・IBM i システムからユーザー情報を送信しません。
・お客様のシステムから取得したデータを使用して外部サービスをトレーニングしません。
・ユーザーが AI 機能を使用していない場合、いかなるサービスに対してもリクエストを送信しません。

SQLの生成などのプログラミングのサポート機能としては使えそうな機能ですので、興味のある方は使ってみてはいかがでしょうか？
Arr::get()で注意すべき点


## FuelPHPでArr::get()をネストして使うと発生するエラーとその理由

以下のようなコードをViewに記述していたところ、エラーが発生しました。

```php
Arr::get(Arr::get($array_1, Arr::get($array_2, 'HOGE')), 'FUGA');
```

### 発生したエラー

```
First parameter must be an array or ArrayAccess object. in /fuel/app/classes/extend/arr.php on line 9
```

---

### ✅ Arr::get() の仕様について

FuelPHPの `Arr::get()` は、配列から値を安全に取得するための便利関数です。

```php
Arr::get($array, $key, $default = null);
```

この関数は以下のように動作します：

* `$array[$key]` が存在すれば、その値を返す
* 存在しなければ、第3引数 `$default`（省略時は `null`）を返す
* **存在しないキーでもPHPのNoticeやWarningを出さない**安全なアクセスが可能

[公式ドキュメント](http://fuelphp.jp/docs/1.7/classes/arr.html) にも仕様が記載されています。

---

### ❌ 今回エラーになった理由

今回のコードでは `Arr::get()` をネストして使用しています：

```php
Arr::get(Arr::get($array_1, Arr::get($array_2, 'HOGE')), 'FUGA');
```

このとき、次のような流れでエラーが発生します：

1. `Arr::get($array_2, 'HOGE')` の結果が `null` を返す
2. それをキーとして `Arr::get($array_1, null)` を実行
3. `Arr::get()` の第一引数が `null` になる可能性があり、FuelPHPではこの場合に `InvalidArgumentException` をスローする

つまり、**`Arr::get()` の第一引数が `null` や配列以外の型になった**ことが原因でエラーが発生しています。

---

### ✅ 対策

ネストを避けて、変数に一度代入してからチェックすることでエラーを回避できます：

```php
$key = Arr::get($array_2, 'HOGE');
$data = Arr::get($array_1, $key, []);
$value = Arr::get($data, 'FUGA', '');
```
または
```php
Arr::get(Arr::get($array_1, Arr::get($array_2, 'HOGE'), []), 'FUGA', ''); 
```

または三項演算子を使ってより安全に：

```php
echo ($key = Arr::get($array_2, 'HOGE')) && is_array($arr = Arr::get($array_1, $key))
    ? Arr::get($arr, 'FUGA', '')
    : '';
```


---

### ✅ まとめ

* `Arr::get($array, $key)` はキーが存在しなくてもエラーにならず安全に使える
* ただし、**第一引数が配列でない場合（nullなど）には `InvalidArgumentException` が発生**する
* ネストして使うと、途中の戻り値が `null` になりやすいため注意が必要
* **ネストを避けて中間変数に格納する**ことで、読みやすく安全なコードになる

---

ネストして一見スマートに見えるコードでも、FuelPHPでは意図しない例外の原因となるため、慎重に使いましょう。
バッチファイルからPowerShellを管理者で実行する

ps1ファイルの先頭で権限を上げて実行するコマンドを挿入するとか「-Verb RunAs」をつけるとか有りましたがそれだけだとうまく動かなかったので…。

コマンドプロンプトは管理者権限でなくても大丈夫。
管理者権限で開くときにカレントディレクトリがデフォルトのところになるので諸々のパスは絶対パスで指定する必要がある。

``` bat:実行.bat
powershell -Command "Start-Process powershell.exe -ArgumentList '-ExecutionPolicy Bypass -File \"%~dp0管理者権限で実行.ps1\"' -Verb RunAs"
```
PowerShellは普通に書けばOK
WordPressをローカル環境に移す際に発生するDB接続失敗パターンをまとめてみた

# 前回のあらすじ
下記の記事の続きになります。

https://qiita.com/tokunagaoun/items/d0616f2daf8e88f2f378

WordPressの本番サイトをローカル移行する際に、
DB周りで非常に悪戦苦闘しましたので、失敗パターンとしてまとめておきたいと思います。

使用している環境・サーバーは以下になります。
サーバー元の管理会社が異なると、今回のような失敗もまた変化すると思うので、
あくまでも私が試したパターンではエラーが発生したという理解で見ていた抱ければと思います。

**🛠️ 使用ツール・サーバー**
・Local by Flywheel（ローカル開発環境）
・phpMyAdmin（データベース管理）
・さくらインターネット（本番環境）



# 失敗パターン3選

## 1.プラグイン**All-in-One WP Migration**の限界
無料版の`All-in-One WP Migration`は、**512MBを超えるデータをインポート**はできないようです。
最初の段階では、DBデータを完全移行できると聴いていたので、`All-in-One WP Migration`を使用して移行作業を実施しようとしていました。
しかし、当初から既存テーマとElementorをふんだんに使ったノーコード開発をごりごりに行っていたので、DBがかなり重かったのと、無料版制限では早々に上限に達してしまい、移行がストップとなりました。

ちょっと（かなり）見込みが甘かったです...（笑）。

## 2.テーブルプレフィックスの変更
ここに一番時間を取られました💦。

事象としては、DB移行後の動作確認のときに本番サイトと同じ挙動をしないことでわかりました。 
`phpMySql`はデータのインポートが完了すると、`成功メッセージ`640 クエリを実行しました`が出ます。

ですが、ローカルでWordPressを立ち上げても何も表示されず...。
なぜかと思い、bashコマンドでテーブルとデータがあることを確認してみました。すると...。
```
wp db query "SHOW TABLES;"  
# → wp_posts, wp_options などは存在

wp post list
# → "Hello world!" のみ（本番投稿が見えない）
```

**テーブルだけが作成されて、データが何もインサートされていない状態になっていました（笑）。**

インポート作業自体は完了しているはずなのでどこがおかしいのか分からず、延々と悩んでいました。
Config.phpファイルの設定をもう一度確認してみると、**テーブルプレフィックス**の設定に問題があることに気づきました。

`テーブルプレフィックス`とは、**WordPressのデータベーステーブル名の先頭に付く文字列**です。

複数テーブルの名前衝突を管理するために存在するそうですが、どうやらここの変更を怠ったことが原因のようでした。

```php
$table_prefix = 'wp_';           # ローカル環境でのデフォルト値
$table_prefix = '本番のwp_値';    # カスタム（さくらの例）

# $table_prefix = 'wp_';　⇒　$table_prefix = '本番のwp_値'に変更。
```
table_prefixをローカル環境の値のままでしたので、データをインポートしても、「そんなテーブルはない！」状態がずっと続いていたようです。
これを本番環境のと同じにしたところ、うまくいきました。

## 3.文字コード問題
CLIでsqlデータをインポートするときに発生した問題です。
事象自体はシンプルで、文字コードが不適切だと言われてしまいました。
```
ERROR at line 1: Unknown command '\U'
```
しかしこの文字列問題は、どうやら`BOM`か改行コード（CRLF vs Unix LF）のどちらかに関わりそうな問題だったようで、つまるところ**.sqlのインポートデータ自体に問題があったようです。**

しかもこれ、**GUIではうまく動作するという**これまたよくわからない事象でした。

ここでも調査が長引きそうだったため、仕方がないので、問題を「回避」するためにGUIで実行することになりました。
前回のタイトルはCLIで謳ってましたけど、ここだけGUIでやっちゃいました。すんません:pray:！

しかし、できたであろう操作として、`WP-CLI`でBOMの除去と改行コードは操作できたと思っています。
サンプルですが、BOM除去と改行コードを変換するコマンドも貼っておきます。

- **BOM除去**
```bash
$content = Get-Content "database.sql" -Raw
$content = $content -replace "^\xEF\xBB\xBF", ""
$content | Out-File "database-clean.sql" -Encoding UTF8NoBOM

# そしてインポート
wp db import "database-clean.sql"
```
- **改行コード変換**
```bash
# Windows → Unix改行コードに変換
powershell -Command "(Get-Content 'database.sql') -join \"`n\" | Out-File 'database-unix.sql' -Encoding UTF8"

# そしてインポート
wp db import "database-unix.sql"
```


:::note info
BOMって？
**「このファイルはUTF-8だよ」という目印を文字列の先頭に付ける仕組みです。**
UTF-8では、主にBOM有りと無し二つに分類されます。
- UTF-8（BOMなし） ← 一般的
- UTF-8 with BOM ← Windows系でよく使われる
:::

# 終わりに
うっかりタイトル詐欺を暴露してしまいましたが、
WordPressのデータをインポートするだけでもいろいろなエラーに引っ掛かるものですね。

これからWordPressをローカルに移行したい人はこの失敗談を参考にしてみてくださいね！
（いずれAIで全自動できるかもですが。）
async/await (C#) の ConfigureAwait() とは？

コンピュータの中にはパラレルワールドが実在する！？
~~~plantuml:
box UI制約
participant UIを持つ人
end box
box 制約なし
participant Aさん
participant Bさん
end box
activate Aさん
activate Bさん
note left of UIを持つ人
私はUIを持ってるの
私の人生は1つだけ
end note
activate UIを持つ人
note right of Aさん
私はここよ
私はUIには無縁なの
end note
Aさん----->神様:　　　　　　　　　　　　　　　　async 時間のかかるお仕事お願いします
Aさん----->神様:　　　　　　　　　　　　　　　　　configureAwait(false=神様!私を好きにして!)
note left of 神様
汝、其方の願いを
聞き遂げよう！
Aさんには別の人生を！
目覚めたら貴方はもう、
そこにはいないだろう
end note
deactivate Aさん
note over of UIを持つ人
end note
Aさん<--神様:　　　　　　　　　　　　　　　　寿限無寿限無...
Aさん------>誰かの人生:　　　　　　　　　　　　　　　　　彼女は夢を見た。<<あぁぁぁぁ..え、っえ！>>
activate 誰かの人生
note over of 誰かの人生
あぁ、気のせいね。
私は...生きてるわ！
さぁお仕事、お仕事！
end note
note right of Aさん
誰か他人の半生
が始まる予感...
end note
神様<--UIを持つ人:　　　　　　　　　　　　　　　　　　　　　　　async 時間のかかるお仕事、任せたわ！
UIを持つ人-->神様:　　　　　　　　　　　　　　　　　　　　　　　configureAwait(true=私は私よ)
deactivate UIを持つ人
note left of 神様
汝、其方の人生は、其方のものだ
お主は、お主の人生を全うするのじゃ
end note
UIを持つ人<--神様
activate UIを持つ人
note left of UIを持つ人
あぁ、ひと段落ね
さぁお仕事、お仕事！
end note
Bさん-->神様:　　　async神様...お願いします
Bさん-->神様:　　　configureAwait(false=お呪いだそうです)
note left of 神様
汝、そちにも別の人生を授けよう！
目覚めたら貴方はもう、
そこにはいないだろう
end note
deactivate Bさん
Bさん<--神様:　　　　　　寿限無寿限無...
Aさん<--Bさん: 　　　　　人生の転換点！
activate Aさん
note right of Aさん
あれ、私、何してるの？
（そしてＢさんの新たな人生が始まるのだった...）
end note
~~~
AWSでSSL化① Route 53でカスタムドメインを取得する

学習用にデプロイしたWebアプリへHTTPS接続できるように、SSL化を試した時の記録です。
2つの記事に分けて記載していきます！

🌟本記事 → Route 53でのカスタムドメインの取得、DNSレコードの登録
◎別記事 → ACMでの証明書の発行、ELBへの適用


## 前提条件
- ALBにSSL証明書を適用する想定で記載しています。
- EC2やALBは構築済みの前提です。（Webアプリデプロイ済みのため）


## ドメイン取得について
:::note warn
Route 53でのカスタムドメインの取得は**有料**です！
:::

今回は以下の理由からRoute 53でカスタムドメインを取得しました。

- AWSが所有するドメイン(`.elb.amazonaws.com`など)に対しACMで証明書を発行できない
→そもそもカスタムドメインの用意は必須！

- 無料でカスタムドメインが取得できる「freenom」は現在使えない（2025年5月時点）
→参考：https://note.com/sopf/n/naab4f0859814

- Route 53では、ドメインにこだわらなければ最安で$3～から取得可能（2025年5月時点）
→参考：https://techblog.ap-com.co.jp/entry/2024/05/22/093000

## 手順
### 1. カスタムドメイン取得
- Route 53のトップ > 開始する から「ドメインを登録」をクリックする。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517310/243355d2-dc9e-4a04-bd24-a5f2669bfd8f.png)

- 入力したカスタムドメイン名が使用可能か確認する。年間料金も確認し、「チェックアウトに進む」をクリックする。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517310/6f0aeb57-30a8-4303-8524-2537c919069f.png)

- ドメインの利用期間と自動更新の有無を選択し「次へ」をクリックする。
※今回は検証用のため、1年・自動更新オフで設定。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517310/67e63931-ad3d-4720-91ef-c6c200152bc0.png)

- 個人情報を入力し、**「プライバシー保護をオンにする」にチェックを入れて**「次へ」をクリックする。

:::note warn
whois情報（ドメイン登録者の個人情報）が検索されないよう必ずチェックを入れる
:::
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517310/db402c19-bd48-44bb-a4ac-fd12a80960bd.png)

- リクエストが進行中になったことを確認する。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517310/c16a7927-9c3a-4f6f-a51b-1aaee50eddb5.png)

- 登録したメールアドレス宛に認証要求が来るため、URLリンクをクリックして認証する。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517310/76878bdb-f054-4a57-b358-be5c985c46eb.png)
認証すると、ブラウザで以下のように表示される。![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517310/0dcca65c-f90d-44f5-9c6b-fb6c8839f742.png)


- Route 53のトップ > リクエスト からカスタムドメインが登録されたことを確認する。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517310/900609bd-2c36-4ca8-9dd8-dd065729a3c0.png)


### 2. DNSレコード作成
- Route53のトップ > ホストゾーン から「ホストゾーンの作成」をクリックする。
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517310/9883d8a7-9278-44c6-b08b-3b713c73e844.png)

- 「レコードを作成」をクリックする。
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517310/12389b2a-55ba-4371-a8a2-49570e00bcab.png)

- レコードの内容を入力し、「レコードを作成」をクリックする。
※今回は構築済みのALBへルーティングするため、以下の通り設定。
　・レコードタイプ：Aレコード
　・エイリアス：チェックを入れる
　・トラフィックのルーティング先：構築済みのALBをｓ
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517310/425fcb91-e27f-4ef9-9fad-86f0a2ebef6c.png)

- レコードが正常に作成されたことを確認する。
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517310/a94ec3c1-248b-4469-9180-14a80c76d31d.png)


## 参考
https://qiita.com/mksamba/items/e50a423b8ab12271eb73

https://techblog.ap-com.co.jp/entry/2024/05/22/093000
Ubuntu: IPV6 を使えるように設定

ipv4 で次のコマンドが正常に動きます。

```bash
curl --insecure https://example.com/.well-known/acme-challenge/test.txt
```

ところが、ipv6 で接続すると、正常に動かない場合の修正方法です。

```bash
curl -6 --insecure https://example.com/.well-known/acme-challenge/test.txt
```

## 設定

addresses と routes は修正して下さい。

```yaml:/etc/netplan/50-cloud-init.yaml
network:
  version: 2
  ethernets:
    eth0:
      dhcp4: true
      dhcp6: false
      addresses:
        - 2400:8500:1302:701:133:130:142:26/64
      routes:
        - to: default
          via: 2400:8500:1302:701::1
      nameservers:
        addresses:
          - 2001:4860:4860::8888
          - 2001:4860:4860::8844
```

設定の反映

```bash
sudo netplan apply
```

## 確認

```bash
curl -6 --insecure https://example.com/.well-known/acme-challenge/test.txt
```

## DNS の確認

もし、次がだめの時は、ネームサーバーの設定を修正する必要があります。

ipv4

```bash
dig example.com +short
```

ipv6

```bash
dig example.com AAAA +short
```
Arrays（配列）の基本操作（追加・削除）をまとめてみた　Swif言語（初心者向け🔰）

Swiftの配列（Array）は、同じ型の複数のデータをまとめて扱うための便利なデータ型です。

今回は「配列の作り方」と「基本的な追加・削除の操作」を初心者向けに解説します！

----
varで宣言すると、配列の中身をあとから変更できます（追加・削除が可能）。

fruits は文字列の配列（String型の集まり）です。

```swift
 var fruits: [String] = ["リンゴ", "バナナ", "オレンジ"] 
```

varで宣言すると、配列の中身をあとから変更できます（追加・削除が可能）。

fruits は文字列の配列（String型の集まり）です。

----
2.要素の追加


2-1. appendメソッドで1つ追加
```swift
fruits.append("ぶどう")
print(fruits) 出力 // ["リンゴ", "バナナ", "オレンジ", "ぶどう"]
```

----
3. 要素の削除


3-1.remove(at:)で特定の位置の要素を削除
---
```swift
fruits.remove(at: 1)  // インデックス1の「バナナ」を削除
print(fruits) 出力 // ["リンゴ", "オレンジ", "ぶどう", "メロン", "キウイ"]
```
3-2.
removeLast()で最後の要素を削除
---
```swift
fruits.removeLast()
print(fruits)  出力// ["リンゴ", "オレンジ", "ぶどう", "メロン"] </pre>
```
3-3. removeAll()で全ての要素を削除
---

```swift
fruits.removeLast()
print(fruits)  出力// [] 
```

| 操作      | 書き方                            | 説明         |
| ------- | ------------------------------ | ---------- |
| 配列の宣言   | `var fruits: [String] = [...]` | 配列を作る      |
| 要素の追加   | `fruits.append("ぶどう")`         | 末尾に1つ追加    |
| 要素の削除   | `fruits.remove(at: 1)`         | 指定位置の要素を削除 |
| 最後の要素削除 | `fruits.removeLast()`          | 末尾の要素を削除   |
| 全要素削除   | `fruits.removeAll()`           | 全ての要素を削除   |


Swiftの配列はプログラムの中でとてもよく使うので、
これらの基本操作を覚えておくとコードを書くのがスムーズになります！🙌
discord.py で簡単bot作成

# 目的
pythonとdiscord.pyを用いて，テキスト送信を行うdiscord botを作成する．

# 手順
## discord ボットアカウントの取得と設定
### アカウント取得
[discord dev](https://discord.com/developers/applications)から"NewApplication"(画像参照) を押し，名前を入力する．ボットアカウントが作成され，表示される．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626637/7a195caf-ee06-4ef9-a786-5ce9f9e66899.png)．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626637/d50eeb67-5277-4dd2-aa45-5d1dd32dd90c.png)

### 招待URL発行
取得したら，左メニューからOAuth2に移動する．
下に移動すると招待URLジェネレータがあるので，適当に権限を設定後URLを作成する．後で使うので，保存すること．
ここではメッセージ送信を行うのみのbotを作成するため，Send Massages を許可する．権限はできるだけ必要十分であることが望ましい．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626637/aaefa37d-aa29-4a7e-8f8d-215bfcfd9872.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626637/0d656e5b-7222-4a56-9c7b-bda74835793b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626637/55f7dcff-dbbe-44b9-83d1-eccd33bdeb72.png)

### トークン発行
"Bot"欄を開き，Reset Tokenを押下して，TOKENを取得する．これは後で使うので**保存**すること．リセットすると以前のトークンは無効になる．
詳しくは: [Discord.py の Intents について](https://qiita.com/Erytheia/items/8b8e14f60fd7f266872b)
ついでに，イベントを取得するかを指定する hogehoge INTENT を有効にしておく．パフォーマンスにこだわるんだ! という場合は必要十分であるとよい．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626637/082718a6-3834-4108-b69c-594eda57e6b5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626637/c1ca1ed6-3c6d-4e73-8059-e2094d09eb09.png)

## 開発環境のセットアップ
### Python仮想環境の作成

```zsh
sudo apt install python3 pip python3-venv
python3 -m venv [venv_name=venv]
```
これで作成できる．venv_nameをお好きな名前にしよう（事情がなければ，venvとすればよい）．作成後はこのようにvenvというディレクトリが作成される．
activateすることで初めてその環境内に入れる．シェル出力の最初に`([venv_name])`と表示されるので，確認すること．activate/deactivateはそれぞれ
```
. ./[venv_name]/bin/activate
```

```
deactivate
```
である．deactivateは`. ./[venv_name]/bin/deactivate`でないことに注意．
実際に作る例:
```bash
example $ python3 -m venv venv
example $ ls -l
total 4.0K
drwxrwxr-x 5 rei rei 4.0K Feb 18 12:50 venv
example $ . ./venv/bin/activate
(venv) example $
(venv) example $ deactivate      
example $
```

## discord.py の準備
以降は仮想環境内で実行されているとする．
```
python3 -m pip install -U discord.py
pip install python-dotenv
```

これでpythonプログラム内で`import discord`できるようになる．

## テスト用プログラムの実行
コマンド`/on_rdy`を送信すると`running!`と返すプログラム:
bot.py
```python
import os
from dotenv import load_dotenv
import discord

load_dotenv()
token = os.getenv("DISCORD_TOKEN")

intents = discord.Intents.default()
intents.message_content = True
client = discord.Client(intents=intents)

@client.event
async def on_ready():
    print(f'We have logged in as {client.user}')

@client.event
async def on_message(message):
    if message.author == client.user:
        return

    if message.content.startswith('/on_rdy'):
        await message.channel.send('running!')

client.run(token)
```

.env
```
DISCORD_TOKEN="[YOUR_TOKEN]"
```
[YOUR_TOKEN]は先程発行したトークンにすること．
できたら，
```
python3 bot.py
```
で起動できる．

# 結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626637/537881ae-5cca-497d-b624-22f4d9538005.png)

# 結論
簡単，便利なdiscord bot――
【ChatGPT＋4o Image Generation】で、Google ストリートビューを背景に使う方法です。


　どうも、カーブミラーです。

　今回は、Google ストリートビューを背景に使う方法です。

:::note info
本記事は、ChatGPT（Plus版）
で行なっております。
画像はあります。　あしからず。
:::
　ChatGPT等の動作状況を知らせる
　　OpenAIのステータスページ。
　　　[OpenAIステータス](https://status.openai.com/)
***
　こちらも載せますね。
　　[ChatGPTが使えない？ログインできない・反応しない原因やエラー時の対処法を解説](https://aismiley.co.jp/ai_news/chatgpt-error-resolution-explanation/)
***
　著作権法については
　　こちらを参照するのが
　　　良いのではないかと。

　文化庁レポートをもとにした
　　著作権法についての動画（約20分）
　　　[かいちのAI大学　【警告】ChatGPTの画像生成は危険です...【4o Image Generation】](https://youtu.be/8VLUnG-iyo0?si=rAfjMboqmNqppDGq)
***
　まずは、【ニュース】です。

　OpenAIのCSOの
　　Jason Kwonさんがポスト。

　[Jason Kwonさんポスト](https://x.com/jasonkwon/status/1926839566301827477?t=dhK7ydxjGoBEiD8-f_cZFg&s=19)　　

***（GPT-4.1翻訳）***
家族の物語が深く韓国と結びついている私にとって、本日、ソウルにOpenAIオフィスを近く開設することを発表できたのは特別な意味がありました。

ChatGPTは韓国で驚異的な成長を見せており、週次ユーザー数は昨年比で4.5倍以上に増加。今では米国に次ぐ有料加入者数トップの国となっています！
***

　日本は、何位なんだろう？

***
　では、【本題】です。

　今回は、
　　4o Image Generationで
　　　Google ストリートビューを
　　　　背景に使う方法です。
　　　
　4o Image Generationで
　　背景を指定しても
　　　思った感じにならないことも
　　　　ありますよね。

　実際にある
　　風景写真があれば、
　　　とても楽です。

　そこにキャラなり
　　なんなりを描画して
　　　もらえばいいのですから。

　もちろん、
　　そういうことも
　　　4o Image Generationは得意。

　それでも
　　その写真を撮りに行くのは
　　　時間が掛かります。
***
　そこで
　　Google ストリートビューを
　　　使います。

　Googleマップの
　　いち機能ですね。

　私は都内を歩くことも多く、
　　スマホで、Googleマップを
　　　よく使いますが
　　　　Google ストリートビューを
　　　　　使うことは稀です。

　それでも
　　たまに使って、
　　　助けられたことも多々ありました｡
***
　では、手順です。

　まずは、背景にしたい場所を
　　Googleマップで特定します。

　特に指定せずに
　　Google ストリートビューが
　　　小さく表示されています。

　それをタップすると、
　　指定した場所のまわりが
　　　写真で出てきます。

　画面に触れて上下左右に動かすと
　　それに合わせて写真も動きます。

　場所を少し移動したい場合は
　　画面下方にある
　　　方向マークをタップします。

　ちなみに
　　この方向マークは
　　　車両が行ける方向です。
　　　　一方通行には入れません😅

　目的の場所と撮影角度を決めたら
　　画面をスクショしてください。
***
　そのスクショ画像を
　　レタッチアプリなどで
　　　加工します。

　　余分な情報を
　　　カットするためです。

　レタッチアプリは
　　数多ありますが、
　　　私は、Googleフォトを
　　　　使います。
　　　　　すでに入っていますので😅

　不要な部分をカットし、
　　さらに人物などを消します。

　　Googleフォトには
　　　消しゴムツールがあるので
　　　　これを使います。

　これでできたのが、こちら。
　　（都内池袋近くの公園）
![Screenshot_20250527-154204.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/db7f47cc-0e83-43cd-98bc-3e1561464674.png)

***
　ここから
　　ChatGPTを使います。

　できた写真を
　　ChatGPTにアップロード。

　写真に加えたいことを
　　Promptで指示、送信。

　これで
　　画像化は
　　　出来上がり。
![file_00000000525c61f899442b5afe501c2e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457238/f3ed2bd1-9117-4896-bdb8-8fa6c4acb8d2.png)

***
　さらにここから
　　動画化もできます。

　もちろん、
　　ここでは、Soraを使いますが
　　　ほかでも構わないと思います。

　画像とPromptを
　　入力・送信します。
　　　（ここでは
　　　　画像のPromptそのまま😅）

　できたのが、こちら。
　　Qiitaは動画アップできませんので
　　　X-Twitterのポストになります。

　[Soraで動画化](https://x.com/kabumira862571/status/1927260679238562004?t=0zrEKX6ufvfQRKvyDiTZpA&s=19)

　みなさんの
　　作品制作の糧に
　　　なれば、幸いです。

　今回は、ここまで。
Figmaで「誰でも使えるワイヤーフレームフォーマット」を作成した話


こんにちは！albedo Japanデザイナーチームです。 
今回は、**非デザイナーでも扱えるFigma用ワイヤーフレームフォーマット**を作成した経緯と工夫についてご紹介します。 

## このフォーマットが向いている人 
- ノンデザイナーでFigmaに不慣れなディレクター / PM 
- ワイヤーフレーム段階でも整った資料を作成したいチーム 
- 案件が多く、スピーディに構成を考える必要がある制作現場 

## 作成に至った背景 
弊社ではこれまで、ディレクターやPMがAdobe XDを使ってワイヤーフレームを作成していました。 
しかし、XDのサポート終了に加え、クリエイターチームがFigmaへ移行していたため、 
「そろそろFigmaに切り替えなければ…」 
「でも案件対応に追われて新しいツールを試す余裕がない…」 
という声が多く聞かれました。 

そこで、**誰でもすぐに使えるFigmaフォーマットを整備し、制作フローの円滑化を図ること**にしました。 


## Figma設計時のルール・方針
今回は「誰でも使える」ことを重視したため、以下のFigma機能はあえて使用しませんでした。 

- インスタンスの入れ替え 
- ブール型プロパティ（表示 / 非表示のON/OFFなど） 

その代わり、必要なバリエーションをすべてプロパティとして定義し、選択だけで切り替えできるシンプルな設計にしています。 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3924179/2c00fc12-22a9-43d8-bc4a-2f007c074b8b.png)


## フォーマットの構成 
Figmaファイルは以下の2ページ構成に整理しています。  

### ① レイアウトサンプルページ  

- TOPページ、LP、下層、記事一覧などの、主要構成パターンを掲載 
- PC / SP 両方のレイアウトに対応 

→ よく使う画面をテンプレートとしてコピペ活用を可能に。 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3924179/b4546e3c-11bb-45fd-a541-99fc405210e0.png)


### ② パーツ集ページ（コンポーネント一覧）  

- ヘッダー、フッター、カード、ボタン、フォームなど基本UIを一覧化 
- さまざまな状況に対応できるよう、各パーツのパターンを用意 
 （例：ボタンの見た目/アイコンの種類、カードの画像有無 など） 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3924179/1ab29b6b-432a-40ff-b865-06845b8549ba.png)


## パーツ設計の工夫 

### ① ボタンの種類と設計  

ボタンは主に以下の4種類に分類し、それぞれに必要なバリエーションを持たせました。 

- 塗りつぶしボタン 
- アウトラインボタン 
- テキストボタン 
- テキストリンク（ブルー） 

各ボタンには以下のプロパティを用意し、パターン化しています。 

- サイズ：S / M 
- アイコン：矢印 / 外部リンク / PDF / 戻る 
- デバイス：PC / SP

これにより、用途に応じたボタンがすぐに選べるよう設計しています。 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3924179/6e5446af-447f-4114-9bdb-184657e6134b.png)


### ②セットで使うUIパーツの扱い 

カルーセルやテーブル、FAQ（アコーディオン）などは、単体ではなくセットで使うことが基本です。 

そのため、 

- 「パーツ集ページ」：単体のUIパーツ 
- 「レイアウトサンプルページ」：UIパーツを組み合わせ済みのセットを掲載
（すぐコピペできる） 

という設計で分けています。 

**× Before：単体だけだと使いにくい**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3924179/37f7c186-dfc1-436e-a2b5-e7044805f445.png)

**◯ After：組み合わせ済みのパーツをすぐ使える**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3924179/893936f3-4e26-4532-9003-c0a1c9d545cb.png)


## おわりに 

このフォーマットは、ver.0.0として2025年4月に社内公開しました。 

利用したPMからは、 
「案件ごとに毎回パーツを作っていたけれど、構成だけに集中できるようになった！」 
といった嬉しい声をいただいています。 
同時に、「ここをもっとこうしたい」というフィードバックも得られており、今後も改善を続けていく予定です。 

誰でも迷わず使えるワイヤーフレームフォーマットとして、引き続きアップデートしていきます。 
こちらの記事が、みなさんの制作現場でも役立てば幸いです！