OmniAICreator/Qiita-1.07M huggingface dataset:
AI Programmerの作法 その5

# 概要
AI Programmerの作法、調べてみた。
atcoderやってみた。

# 投入したソースコード
- C++
- 10000円札と、5000円札と、1000円札が合計でN枚あって、合計金額がY円であった。このような条件を満たす各金額の札の枚数の組を1つ求める問題です。

# 実行結果

```
10000円札と、5000円札と、1000円札が合計でN枚あって、合計金額がY円であった。このような条件を満たす各金額の札の枚数の組を1つ求める問題です。

#include <bits/stdc++.h>
using namespace std;

int main() {
    int N, Y;
    cin >> N >> Y;

    for(int a = 0; a <= N; a++) 
    {
        for(int b = 0; b <= N - a; b++) 
        {
            int c = N - a - b;
            if(10000 * a + 5000 * b + 1000 * c == Y) 
            {
                cout << a << " " << b << " " << c << endl;
                return 0;
            }
        }
    }

    cout << "-1 -1 -1" << endl;
    return 0;
}

```

# paiza.io
# 入力

```
7
20000
```

# 実行結果

```
1 1 5
```

# 成果物

https://paiza.io/projects/VbQEDduz5We2T_XGECmuAQ

以上。
twilioでsms送信


AWSのSMSサンドボックス外すの結構めんどくさいですよね。
twilioならすぐですよ。15分くらいで出来上がります。

インストールする


```
composer require twilio/sdk
```

トークンを取得して使う。


```php:twilio-sms.php
<?php

// composer require twilio/sdk

// Update the path below to your autoload.php,
// see https://getcomposer.org/doc/01-basic-usage.md

require __DIR__ . '/vendor/autoload.php';
// require_once '/path/to/vendor/autoload.php';

use Twilio\Rest\Client;

// Find your Account SID and Auth Token at twilio.com/console
// and set the environment variables. See http://twil.io/secure
$sid = "xxxxxx";
$token = "xxxxxxx";
$twilio = new Client($sid, $token);

$message = $twilio->messages
                  ->create("+送信先の電話番号", // to
                           ["body" => "Hi there", "from" => "+送信元の電話番号"]
                  );

print($message->sid);
```


送信元の電話番号は取得して、合わせてあげる必要あります。
送信できました。paypalで支払えば、無駄なトライアルの文字も送られないでクールになります。

```
php twilio-sms.php
```


### 関連用語

・オプトイン
オプトインは同意を取る方式のこと。
例えばメルマガでメールを定期で送っていいのかを同意をとって、その後に定期的にメールを送るようにするやり方のことをオプトインという。
AWSなどはオプトインの方式を入れないと申請を通せないので、比較的厳しい方式を採用されている。


・オプトアウト
オプトインの逆。
同意を取らないで送りつけて、拒否される方式。




https://www.twilio.com/blog/create-sms-portal-laravel-php-twilio-jp


https://www.twilio.com/ja/docs/sms/send-messages


https://www.twilio.com/docs/libraries/php

https://cloudapi.kddi-web.com/magazine/twilio-lesson/send-sms-using-programmabel-sms
４０代おっさんPythonを勉強する。

## 本記事について

この記事はプログラミング初学者の私が学んでいく中でわからない単語や概要を分かりやすくまとめたものです。
もし不正などありましたらコメントにてお知らせいただければ幸いです。

## Pythonの基礎

- Pythonのすべて（基本のデータ型、大きなデータ構造、関数、プログラムなど）がオブジェクトとして実装されている。
- 一貫性かつ便利な機能
- 変数に値やデータを代入できる（変数とはコンピューターのメモリの中にある値を指す名前）
- 変数名（識別子という）
変数名は
    - 数字は変数名の先頭で使えない
    - アンダースコアが先頭になっている変数名は特別扱いする
        - クラス内の変数やメソッド：慣例的な意味合い
        - 関数：システム的な制約を受ける場合がある
    - 予約語は関数名として使えない

予約語の確認

```python
import keyword
keyword.kwlist
```

## 基本的なデータ型

- 整数型（int）
- 不動小数点数型（float)
- 文字列型（Str）Python3からはすべてUnicode
- バイト列型（bytes）
- 論理型（bool）
- 関数型(function)

## コンテナ型（Container Type)

- リスト型(list)
構成部分は何でもいい。
違う方が混ざっても大丈夫。
内部の値は変更可能(mutable)

- ダブル型(tuple)
構造を持っている。
一度構築したら内部の値は変更不可(immutable)

- 集合型(set/frozenset)
重複の値を許さない。
構築の時重複の値は消される。
setの内部の値は変更可能。
frozensetは変更不可。

- 辞書型(dict)
連想配列とも言う。
key:valueの対で構築される。
内部の値は変更可能。
keyは変更不能なデータ型しか使えない。

＊ コンテナ型は買う方により()の使い方に違いがあるので注意


## 参考

https://www.kitakyu-u.ac.jp/news/2022/08/003215.html
【Docker】Nginxコンテナを非特権ユーザーで起動する方法

## Dockerfile
Dockerfileを以下の内容で作成します。
```Dockerfile:Dockerfile
FROM nginx:1.22.0

ENV TZ=Asia/Tokyo

RUN rm -f /etc/nginx/conf.d/*
RUN chown -R nginx /var/cache/nginx

USER nginx

EXPOSE 80

CMD ["/usr/sbin/nginx", "-g", "daemon off;", "-c", "/etc/nginx/nginx.conf"]
```

`nginx:1.22.0`内で既に作成されている`nginx`というユーザーで起動する内容にしています。

## nginx.conf
nginx.confを以下の内容で作成します。

```nginx.conf

worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /tmp/nginx.pid;


events {
    worker_connections  1024;
}


http {
    client_body_temp_path /tmp/client_temp;
    proxy_temp_path       /tmp/proxy_temp_path;
    fastcgi_temp_path     /tmp/fastcgi_temp;
    uwsgi_temp_path       /tmp/uwsgi_temp;
    scgi_temp_path        /tmp/scgi_temp;

    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}
```
デフォルトの内容から変更している点は以下のとおりです。

- `user nginx;`の削除
- `pid /var/run/nginx.pid;`を`pid /tmp/nginx.pid;`に変更
- `http`に以下を追記
```
    client_body_temp_path /tmp/client_temp;
    proxy_temp_path       /tmp/proxy_temp_path;
    fastcgi_temp_path     /tmp/fastcgi_temp;
    uwsgi_temp_path       /tmp/uwsgi_temp;
    scgi_temp_path        /tmp/scgi_temp;
```

## compose.yml
compose.ymlを以下の内容で作成します。
```compose.yml
services:
  web:
    build: .
    volumes:
      - type: bind
        source: ./.docker/web/nginx/nginx.conf
        target: /etc/nginx/nginx.conf
    ports:
      - 80:80
```

## 上記以外の方法

上記の作業についてはDockerfileに以下のように記述しても実現できます。

```Dockerfile:Dockerfile
# syntax=docker/dockerfile:1
FROM nginx:1.22.0

ENV TZ=Asia/Tokyo

RUN rm -f /etc/nginx/conf.d/*
RUN <<-EOF
    set -e
    sed -i 's,listen       80;,listen       8080;,' /etc/nginx/conf.d/default.conf
    sed -i '/user  nginx;/d' /etc/nginx/nginx.conf
    sed -i 's,/var/run/nginx.pid,/tmp/nginx.pid,' /etc/nginx/nginx.conf
    sed -i "/^http {/a \    proxy_temp_path /tmp/proxy_temp;\n    client_body_temp_path /tmp/client_temp;\n    fastcgi_temp_path /tmp/fastcgi_temp;\n    uwsgi_temp_path /tmp/uwsgi_temp;\n    scgi_temp_path /tmp/scgi_temp;\n" /etc/nginx/nginx.conf
    chown -R nginx /var/cache/nginx
EOF

USER nginx

EXPOSE 80

CMD ["/usr/sbin/nginx", "-g", "daemon off;", "-c", "/etc/nginx/nginx.conf"]
```
【C言語】10進数から16進数への変換【備忘録】

# 10進数を16進数に変換するプログラム

AtCoderで「0～255の整数を2桁の16進数表記に変換してください」という問題を解いていました。

>問題：
>0 以上 255 以下の整数 N を、必要に応じて先頭に 0 を加えることでちょうど 2 桁の 16 進表記に変換してください。
>
>（AtCoder Biginner Contest271より引用）

問題は無事に解答できました。

さらに練習として、問題にある整数の範囲0～255よりも広い **10桁以内の10進数から16進数に変換するプログラム** を書いてみたので、自分用メモとして残しておきます。


### 文字列終端の確認
```diff_c
#include <stdio.h>
int main(void)
{
    char str[5] = {'a', 'b', '\0', 'd', '\0'};
    
    printf("%s\n", str);//ab（dは表示されない）
    printf("%c\n", str[2]);//（何も表示されない）
    
    str[2] = '0';
    printf("%s\n", str);//ab0d
    printf("%c\n", str[2]);//0（文字0が表示される）

    str[2] = NULL;
    printf("%s\n", str);//ab（dは表示されない）
    printf("%c\n", str[2]);//（'\0'は何も表示されない）
}
```

調べてみると、`'\0'`は文字という値ですが、`NULL`はポインタという別物のようです。

>多くのコンピュータでは '\0' も NULL も同じ値(ビットフィールドがすべて 0 である)として扱われているため正しく動作しますが、 正確に文法をチェックすると間違ったプログラムとなります。(コンパイラによってはWarningを出します。)
>（コンピュータによっては、NULLをビットフィールドをすべて 0 としていないものもあるようです）
>
>（引用した記事：http://kis-lab.com/serikashiki/C/C01.html）

まだポインタについて勉強できていませんが、現時点では文字列の終端には\0を使うのがいいということが分かりました。

## 16進数に変換するプログラム
方針：
・変換用に一時的に使うテンポラリ変数(temp)を用意する
・変換したい10進数をテンポラリ変数に代入する
・テンポラリ変数が0になるまで以下の処理を繰り返す：
　**16のx乗の位 = テンポラリ変数 % 16
　テンポラリ変数 = 現在のテンポラリ変数 / 16**

最初は、ループ条件（whileの部分）をループ処理の内容よりも先に書いていたため、10進数の値が0のとき一度も処理がされずに答えが「無」になってしまいました。そこで`do {処理} while (temp != 0);`という順番にすることで対応しました。

::: note info
文字列（char配列）の終わりのしるしとして`\0`を入れる
（このため配列の長さは文字数より1多くなる）
:::

::: note info
特定の文字コードを文字型に代入したいときは、`char変数名 = '文字';`という風にシングルクオーテーション`'`で文字を囲んで表現する
:::

```diff_c
#include <stdio.h>

int main(void)
{
    int n, i, j, temp;
    int num[10];
    char answer[10];

    //入力を受け取る
    scanf("%d", &n);

    //各桁の値を求める（num[0]が1の位）
    i = 0;
    temp = n;
    do {
        num[i] = temp % 16;
        temp = temp /16;
        i++;
    } while (temp != 0);
    
    //値が10以上になる桁をA~Fに変換する（answer[i-1]が1の位）
    for (j = 0; i > j; j++) {
        if (num[i - j - 1] > 9) {
            answer[j] = num[i - j - 1] + 'A' - 10;
        }
        else {
            answer[j] = '0' + num[i - j - 1];
        }
        answer[j + 1] = '\0';
    }

    //出力する
    printf("16進数に変換すると %s です\n", answer);
}
```
2022/10/5実施
参照先：AtCoder

https://atcoder.jp/contests/abc271/tasks/abc271_a

#### 今後の課題
・文字コード(A～F)を代入するときのスムーズな方法
・16進数に直したint型配列(num)がchar型配列(answer)と桁の並び順が逆になっていて分かりづらい
PlayCanvas Editorでシーンを起動すると「Cannot read properties of null (reading 'getGuid')」エラーが出る

先日、エラーが発生して少しハマったため記事にします。この記事はエラーにハマった人向けの記事です。
PlayCanvasでシーンを起動時にこのようなエラーが出る場合について

### エラー画像 
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/909ea9a8-b70a-86b1-5675-3aa9ee18f348.png)

### エラーメッセージ
```
TypeError: Cannot read properties of null (reading 'getGuid')
    at SceneParser._openComponentData (https://code.playcanvas.com/playcanvas-1.56.0.dbg.js:49198:39)
    at SceneParser.parse (https://code.playcanvas.com/playcanvas-1.56.0.dbg.js:49146:11)
    at SceneHandler.open (https://code.playcanvas.com/playcanvas-1.56.0.dbg.js:51003:26)
    at i.open (https://launch.playcanvas.com/editor/scene/js/launch.js:1:60805)
    at ResourceLoader.open (https://code.playcanvas.com/playcanvas-1.56.0.dbg.js:29903:21)
    at AssetRegistry.load (https://code.playcanvas.com/playcanvas-1.56.0.dbg.js:30839:36)
    at AssetRegistry.add (https://code.playcanvas.com/playcanvas-1.56.0.dbg.js:30728:30)
    at d (https://launch.playcanvas.com/editor/scene/js/launch.js:1:66658)
    at https://launch.playcanvas.com/editor/scene/js/launch.js:1:67589
    at Array.forEach ()
```

### 考えられる原因
Windowsの環境でZipを解凍しない状態でアップロード（ドラックアンドドロップ）をしたことにより発生しておりました、PlayCanvasに0バイト(PlayCanvas EditorがParse出来ない)objファイルをアップロードするとTypeがSceneとしてアップロードされます。このアセットが含まれる場合には正常にシーンの読み込みができなくなります。

![screenshoot-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/a36bce9c-b230-829b-fcf9-d10ea736acdb.png)

###　解決策
- PlayCanvas Editorのアセットからobjファイル（TypeがScene)のファイルを削除する
Excelマクロは属人化するから使うな！

かなり煽り要素の強いタイトルですが、巷で言われる表題の件についてググった内容と併せて私の意見をまとめてみました。


# なぜExcelマクロは嫌われるのか

>その半面、一部有識の経験で作られているがゆえに、その担当者が退職・異動の後、第三者がマクロが組まれているExcelを理解できず、修正ができないといった問題が生まれました。

https://www.uniritaplus.co.jp/mediaituniplu/de-individualization


Excelを利用していればおそらくどの職場でも発生している問題かと思います。
実際、私の職場でもExcelマクロのみならず、batにACCESSにスケジューラと絡んで壮大なピタゴラスイッチができあがっており、トータルでメンテナンスできる人材はかなり希少です。


# BIツールを使うんだ！
これ実際に私の職場でExcelマクロ属人化問題に対して提唱された案です。

意図として

「excelマクロは属人化するからノーコード系ツールに載せ替えたい」

とのことでしたが。本当に載せ替えたらこのExcelマクロ属人化問題は解決するのか？
ノーコードツールになってエンドユーザーに優しくなったら属人化問題は解決するのでしょうか？

私は懐疑的に見ています。
おそらくBIツールを導入してから数年後には

「BIツールは属人化するから使うな！」

が提唱されはじめるのではないかと思います。
きっとExcelマクロも当初は(今も？)エンドユーザーが使うことを想定したうえでリリースされていたはずで、時代が繰り返されるだけになるのではと思っています。


とはいえ、BIツールがエンドユーザーに優しく、そのカバー領域では機能的にも優れているのは事実で一部を置き換えていくはありかと思います。



# システムやサービスに置き換えろ！
これだけ世の中に業務用システムやサービスが出回ってる以上、よっぽど特殊な業務をしてない限りは必ず世の中にでているサービスのカバー領域に入っているはず。

現在Excelマクロが担っている部分を置き換えることで、
従来の「属人化」部分をサービス、システムが担ってくれることになります。

とはいえ、だいたいExcelマクロで組んでいる領域は**システム化する際にカバーしきれなかった領域**を自前でこさえた結果だったりするので、置き換えるとなるとその周辺領域を巻き込んでごっそりということになる。

骨折り損のくたびれもうけ
牛刀をもって鶏を割く

になりかねないのであまり現実的ではない。
(どのみち新たに生まれるカバーしきれない領域を自前でこさえる新たな属人化の再生産が起こる)


そもそも、
**既存のシステムでカバーできない　を疑う**が一番現実的でローコストかもしれません。
誰も触ってない機能、使われてない機能が実はExcelマクロでカバーしてることそのものだったなんてことも往々にしてあるかもしれません。
(特にパッケージシステムや完全自社開発でのシステムなどではどんな機能があるのか、その機能に対してどの機能をどう活用してるのかが明示的になっておらず、車輪の再開発のような似たことが起こってるのでは)



# Excelマクロが悪ではない

Excelマクロが　というよりはそのExcelマクロの周辺に「属人化」の要因があるのではと思います。

・仕様書がない
・目的がわからない
・コードが複雑で解読できない

これらが満たされていれば、ある程度の属人化は回避できるのではと思います。


また以下の要素も大きいのではないかなと思いますが、
**Excelマクロへの過剰な業務押し付け**


マクロに限らずRPAでも同じことがいえますが、柔軟性が高く何でもできるがゆえ不必要にExcelマクロ化してしまってるケースもあります。
具体的には役割分担が適切にされずすべてExcelに押し付けられてる状態のことです


Excelマクロの話とはずれますが、巷で言われている神Excelなどが上記に当てはまると思います。
https://www.itmedia.co.jp/news/articles/2203/31/news064.html

他の例だとどう考えてもExcelマクロで組んだほうが簡単な操作を無理やりRPA上で実装しようとしたりだとか
(これ実際に見た例で行・列コピーして別シートに貼り付けて、フィルタをかけて、csvに保存してまた別のフィルタをかけて～をRPA上で壮大な工数をかけて実現しようとしていました。後日、Excel上でVBAで組み直してRPAからマクロをキックする形に修正)


# まとめ

**役割分担と仕様書作成をしっかりやろう**

ということなのだと思います。
いくつか記事を読みましたが、役割分担がまず第一　と記載されてるものが多い印象で私もその派です。
BIツールのカバー領域はBIツールへ、システムのカバー領域はシステムへ、Excelマクロのカバー領域はExcelマクロで。

各々のシステムに分割する場合はそれらのつながりを網羅できる設計書・仕様書を作成

機能ごとに分割せず何か一つのツールで業務を自動化するにしても、大大前提として目的を記載した仕様書は忘れずに。


(22/11/01)
コメントをいただいた内容を基に自戒を込めて追記します。
「仕様書を作る」これはおそらく誰もが作ったほうがいいだろうと思いながらも仕様書自体は即効性をもった工数削減効果が見出しづらいため、優先度低めにしがちと思います。
リリースした後に時間があるときに作っておこうと思いながら結局つくらない。

〇対策
後々組織への大きな負債としてのしかかることを前提に設計段階から目的を記した仕様書を作っておくべきです。
WBSの頭に「仕様書作成」を用意してもいいかもしれません。
ツールと仕様書はセットであるべきものとして、仕様書なくしてリリースさせずというルールを課すことが後世の平和への第一歩かもしれません。。。




# 参考
以下を参考にさせていただきました

https://www.products.nsd.co.jp/service/etransporter/list/?id=6523

https://www.justsystems.com/jp/lab/efficiency/excel-free.html

https://www.uniritaplus.co.jp/mediaituniplu/de-individualization
MacにXAMPP7.2.3がインストールできない

備忘録です。

# 前提
OS: macOS Big Sur

# 結論
Xcodeのバージョンを12未満に切り替える

# 原因
Xcode12のアプデでPHP7.2以下のコンパイルができなくなったらしい
参考：https://zenn.dev/ttskch/articles/67816d2819e38c
Next.jsでfullcalendarを使う際のWarningをDynamicImportで回避する

## fullcalendar

Next.jsで[fullcalendar](https://fullcalendar.io/)をつかうと、

```
Warning: Prop `id` did not match. Server: "fc-dom-16" Client: "fc-dom-2"
```

上記のようなWarningが出ます。
直訳すると、クライアントとサーバーのidがあっていないようですね。

Next.jsはSSR前提で動いているので、こういったことが起こる可能性があります。

こんな時は、Dynamic Importが役に立ちます。

```tsx
import Calendar from "./Calendar";
```
↓
```tsx
const Calendar = dynamic(() => import("./Calendar"), {
  ssr: false,
});
```
Calendarコンポーネントのimportを上記のように書き換えます。

Dynamic Importの書き方に{ssr: false}というオプションを渡してあげるだけで、「このファイルはSSRしない」とNextが判断するので、エラー回避することができます。

## SSRエラーの例

もっとわかりやすくすると、サーバー側で、ブラウザの機能は使えません。

```tsx
import React from "react";

const Test = () => {
  window.location.reload();
  return <div>Test</div>;
};

export default Test;
```

例えばこのようなコンポーネントを使おうとすると、

```
Server Error
ReferenceError: window is not defined
```

windowオブジェクトはクライアント側のjavaScriptが提供しているものです。

カレンダーと同じようにimportの方法を変えてやります。

```tsx
import Test from "./Test";
```

↓
```tsx
const Test = dynamic(() => import("./Test"), {
  ssr: false,
});
```

これでクライアントサイドレンダリングになり、無事windowオブジェクトは使用できます。

参考記事
https://stackoverflow.com/questions/72140065/warning-prop-id-did-not-match-server-fc-dom-171-client-fc-dom-2-when-u
#5未経験エンジニア〜面接で聞かれそうなことを言語化シリーズ①！〜

ご覧いただきありがとうございます。

表題の通り、面接で聞かれそうなことを言語化していきたいなと考えました！

現在、エンジニアになりたい為WEBサービス(ポートフォリオ)を作成しつつ、就活しています。

そのなかで、自信がないことが知識の「言語化」。（もちろん技術面も未熟ですが。）

というか、全く理解できていないのでは私。

例えば、

- ブラウザにURLが入力されて表示されるまでの流れを説明をしてください。
- MVCモデルの処理の流れを説明をしてください。
- JavaScriptの無名関数について説明してください。

などなど。

んー、 **私きちんと言語化できる？** 

そのため、これから1つずつ抜粋し、自分の言葉で知識の言語化を行っていきたいと思います！


## 読んでいただく対象者
- プログラミング初学者
- 初学者に対して教育を行っている方

## 筆者の状況
- エンジニア未経験
- フロントエンジニアを志望し転職活動中(2022.8~)
- ReactとPHPを使ってWEBサービス作成

## ブラウザにURLが入力されて表示されるまでの流れを説明をしてください

では、まず第一回目の質問はこちら。

**ブラウザにURLが入力されて表示されるまでの流れを説明をしてください**

こちらの質問に対して私の答えとqiitaで見つけた答えを紹介させていただきます。

### 私の答え

自分のためにも一度何も見ずに恥を偲んで記載します。

（温かく見守ってください・・・）

```
ブラウザの検索ボックスにURLを入れ、サーバーに送信される。
サーバーに送信された情報をブラウザが受け取り、ブラウザ上に表示される。
```

### 答え：Qiitaブログより抜粋

「ブラウザでURLを入力してWebページにアクセスする」についてまとめていた方の説明を拝借しました。

>　ブラウザでURLを入力してWebページにアクセスすると以下のような順で処理が走ります。
① DNSサーバーへのIPアドレスの問い合わせ
② IPアドレスの返答
③ Webサーバーへデータ要求
④ 要求されたページのデータ転送
[Qiita:Webページが表示される仕組み](URL "https://qiita.com/sugurutakahashi12345/items/3cc26f23b82f344fa188")


## 言語化を行なってみた感想

そこまで遠くなかったのかな〜とも思っていますが、、、いかがでしょうか？(汗)

ただ、きちんとした用語まで言えていたら知識はもちろん、説得力が増すのではと感じています。

実はこの質問は、面接時に聞かれたわけではなく*他の方のブログを拝見し*、１つ目に選びました。（なんか最初の問題っていう感じがしました）

なお、以前面接で質問を受けたのは「キャッシュとは何か」でした。

今後はその質問と回答も記載しようと思います！

このシリーズをやっていく上で、自分の知識が強固なるものになればいいと思います。

ご覧いただきありがとうございました。
GCP認定資格 Associate Cloud Engineerを取得したので勉強したことをまとめた

# はじめに

2022年10月5日にAssociate Cloud Engineerの試験を受けて無事合格することができたので、
自分が勉強したことを簡単にまとめたいと思います。ちなみに勉強期間は１ヶ月ほどでした。

## 前提
AWS認定資格 SAA, SOA, DVAを所持。
業務ではAWSを使っているのでGoogle Cloudにはほぼ触れていない状態でした。

# 勉強したこと

まずGoogle Cloudに関する知識が全くなかったので、ベースとなる知識を得るためこちらの書籍を読みました。

https://www.amazon.co.jp/dp/4297123010/

大体の概要を把握したところで、試験向けの対策としてtech stockのweb問題集をやりました。

https://techstock.jp/exam/ace/

web問題集で必要十分だとは思いますが、公式の模擬試験もやっておいて損はないです。

https://docs.google.com/forms/d/e/1FAIpQLSc7bkUHpDbFShBI5xE4u8OO2vl99DrP0htnswa-la9DQynToA/viewform?hl=ja

個人的な勉強法として忘却曲線を意識して繰り返し学習することを実践しています。
例として、
#1~5まで解いたら、また戻って#1~5を解く。#6~10を解いたら、また戻って#6~10を解いて、
翌日にまた#1~10を解く流れです。

# 試験の感想

GCPの全体像を把握してから問題集に取り組めば難なくいけると思います(個人の感想です)。

以上です。
.Net: Ubuntu 22.04 で dotnet 2.2 を使う方法

次の環境で確認しました。

```text
$ uname -a
Linux shimizu 5.15.0-48-generic #54-Ubuntu SMP Fri Aug 26 13:26:29 UTC 2022 x86_64 x86_64 x86_64 GNU/Linux

$ dotnet --version
2.2.207
```

次のようなエラーが出ます。

```text
$ dotnet run
No usable version of libssl was found
中止 (コアダンプ)
```

>これは、openssl 1.0 がないために起こるエラーです。

必要なライブラリーのダウンロード

```bash
wget http://security.ubuntu.com/ubuntu/pool/main/o/openssl1.0/libssl1.0.0_1.0.2n-1ubuntu5.10_amd64.deb
```

インストール

```bash
sudo dpkg -i libssl1.0.0_1.0.2n-1ubuntu5.10_amd64.deb
```
SAA-C03に落ちた話

# 目次
* はじめに
* 良かったところ
* 悪かったところ
* 次回への反省

# はじめに
今回はあまりよくない話です。
端的に言うと「**調子に乗ったら爆散した話**」です。
[前回](https://qiita.com/Daha/items/d44ff912ab736bdf70bb)は2週間でクラウドプラクティショナーを取れてしまったので、一段上のSAAは2倍の時間でいけるだろう、と鷹をくくっていました。
しかし段違いに難しく、見事不合格を持ち帰ってきました。

# 良かったところ
* 興味をもったことはとことん調べておく
CLFを学習した際にかなり深堀りしたので、各種サービスの特徴やメリットは大まかに理解したつもりでした。
これが良かったのか、SAAについてインストールを要することは少なく済みました。
（例：S3の種類、Well-Architectなど）
それでもEC2のインスタンスタイプやCloud watch派生など新しく覚えることは多く、心底「CLFで色々興味持っておいて良かったなー」と思っています。

* 自分の感情を大事にする
また、お金が関わる話はお得感があって好きなので、集中して勉強できました。
その自信が結果に繋がったことは実感しています。
逆に興味が薄かったり、理解が浅いところはしっかり悪い結果が出ていました。

# 悪かったところ

* ネットワーキング
実務経験が無い、というのが一番大きいですが、ネットワーキングがあやふやでした。
IPアドレスがよくわかってないままだと詰まる問題がありました。
早くエンジニアとして働きたいなあ。

* 過去問不足
頭に入れるまでが必死すぎて、過去問演習が足りなかったように思います。
実際、過去問で触れてない範囲が試験に出ると手も足も出ませんでした。
悔しい。

# 次回への反省
決して安いお金ではないので、次はしっかり準備して臨みます。
過去問演習と知識の整理、体系化が足りませんでした。
公式の過去問ですら物足りないと感じたので、CLFの3倍は演習が必要だと感じています。
ここまでで学習期間4週間、平均して1日2時間だったので、実働50時間ほどでした。
あと30時間は勉強してみます。
閲覧いただき、ありがとうございました。
【Xcode14】Storyboardを削除してコードベースで開発する

# はじめに
以前[Stroyboardを削除してコードのみで開発する方法](https://qiita.com/SNQ-2001/items/d680d8bb4a73106bdefb)の記事をあげましたが、Xcode14でやり方が変わっていたので紹介します。

# Storyboardを削除
「Main」を右クリックして「Delete」を選択
![スクリーンショット 2022-10-05 19.13.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/ff81293e-a969-7760-4735-68e3be33a287.png)
Move to Trashを選択
![スクリーンショット 2022-05-17 0.46.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/1e98c549-eb4c-fb73-41c2-910082437a58.png)

|Move to Trash|Remove Reference|
|-|-|
|完全に削除|Xcodeの参照を削除|

おそらくこんな感じの使い分けだと思います。

# Infoを編集
`Storyboard Name`を削除します。
① 「Info」を選択します
② 「Storyboard Name」を選択します
③ 「Storyboard Name」の「-」を押して削除します

![スクリーンショット 2022-10-05 19.15.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/9a5bfea8-412d-820e-7fb2-2827f2f8dfc9.png)

こうなります
![スクリーンショット 2022-10-05 19.17.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/ae75c99a-8237-c8e2-7f57-743234fd6da2.png)

# Mainの削除
① プロジェクトを選択します
② ターゲットを選択します
③ 「Info」を選択します
④ 「Main Storyboard file base name」を選択します
⑤ 「Main Storyboard file base name」の「-」を押して削除します
![スクリーンショット 2022-10-05 19.19.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/ddb6b81b-739d-99b6-b2dc-8f550e1c98bc.png)

こうなります
![スクリーンショット 2022-10-05 19.23.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/7a3ae933-8f1b-1f66-c1bb-336e192e301b.png)

# SceneDelegateを編集
① 「SceneDelegate」を選択します
② 赤線で囲んである箇所を変更します
![スクリーンショット 2022-10-05 19.28.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/1d25fca1-658d-7f0a-efc7-a2640269c802.png)
これが完成形です
![スクリーンショット 2022-10-05 19.29.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/c90f27ae-61c7-aba6-7384-31ea6c13afc5.png)

```diff_swift
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
-    guard let _ = (scene as? UIWindowScene) else { return }

+    if let windowScene = scene as? UIWindowScene {
+        let window = UIWindow(windowScene: windowScene)
+        window.rootViewController = ViewController()
+        self.window = window
+        window.makeKeyAndVisible()
+    }
}
```

# 完成
```diff_swift
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
+       view.backgroundColor = .systemPink
    }


}
```

![スクリーンショット 2022-10-05 19.33.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/466d3311-1936-0dbe-ce7f-3e418157112a.png)


# おわり
XcodeでUIが変わっており見つけるのに苦労しました笑
Twitter運用の方針について

会社のTwitterを始めました！
Twitter経由での採用や案件受注を目的としています。

アカウント設計や考え方など、企業Twitterを始めるにあたってのノウハウをまとめました。
SNSはアルゴリズムの変化が激しい分野なので、反応を見ながら随時改善していこうと思います。

## 目的
会社の認知向上
採用強化
案件受注

## ターゲット

経営者・役員層

受注のために経営者や役員層と繋がり、親しくなれば、紹介で案件を受注できる可能性がある。
今就職活動をしている人にリーチしても、就職活動をしている期間は一時的なので、次に繋がる出会いになりにくい。採用をする際はこちらからアプローチするので、ここをターゲットにしてアカウント設計する必要はなさそう。
経営者層をターゲットにすることで、優秀な人を取り込めるのではないか。

## ポジション
・アプリ開発会社勤務
・インスタグラマーとして活動中
・起業を目指している

「〇〇会社勤務」だけでは覚えてもらえないので、3本立てで頑張るキャラクターを演出。
「起業」という言葉を入れることで、経営者層の興味を引きたい。

## ツイートの内容の方針
【3H戦略】
Hero：人に共有したくなる
Help：困っている人に対して助けになる
Hab：価値観や世界観を共感してもらう

これらをバランスよく発信することで、ファン化を促す

## アカウントの作成からコンバージョン達成までのロードマップ

①アカウント作成
    プロフィールを整えて視認性を上げる。他のアカウントとの違いを明示する

②認知
    積極的ないいね、コメント、フォローにより、存在を知ってもらう

③フォロワー増加
    見ていて前向きになる、応援したくなる、安心する、、といったポジティブなアカウントを作りフォローをしてもらう

④ファン化
    楽しい、嬉しい、残念などの感情についてのツイートをして人間味を出す
    共感を呼ぶツイートをして、親近感を持たせる（画面の向こうの知らない人とコミュニケーションを取るSNSではかなり重要！）
    努力している姿を見せて、応援したい、力になりたい、と思わせる
		→名乗り出てきたら力を借りる
			→「認知的不協和」を利用する
    

⑤就活生の募集、案件受注
    「この人が言っているから正しそう」と感じさせる権威性がついたら、繋がりそうな人にDMで連絡をとる


## これまでの分析

・発信者のプライベートに関係のある文章→プロフィールの閲覧数が上がる
・発信者を想像させる文章→プロフィールの閲覧数が上がる
・発信者の気分に関する文章→いいねが多い
・短くて歯切れの良い文章→いいねが多いがプロフィールの閲覧数は高くない

リーチを上げつつプロフィール閲覧数を伸ばすには、歯切れ良く、自分のエッセンスを入れるのが良さそう？






## 気をつけること
①流れてくるツイートを見すぎない！
    →市場調査は大事だけど、受信者ではなく発信者としてtwitterを使うこと。
②炎上キャラにならない！
    →炎上すると、確かにリーチは伸びる。でも目的が達成できないアカウントになってしまう。
③プロフィールは作り込む！
    →視認性の高いプロフィールにするため改善し続ける。状況が変わったらすぐに更新する。
④リツイートをしすぎない！
    フォロワーが増えてもファンは増えない。
⑤会社の社風を発信する
    →自分のキャラクターだけではなく、会社についても発信して露出を増やす。

## 運用方針
とにかくgiveで愛されるアカウントを作る
ツイート編集機能の Twitter API の情報源

# ツイート編集機能とは

ツイート公開から30分間、数回まで編集できる機能で、Twitter Blue という課金ユーザーにのみ利用可能。
2022/10/4 から利用できるようになった。

但し、Twitter Blue は 2022/10/4 時点で日本国内では未提供。

>編集されたツイートはその旨がアイコンやタイムスタンプなどで示され、ほかのユーザーから修正されたことがわかるようになっている。また、ツイートにはバージョン履歴が表示されるため、編集された箇所がわかる。
[Twitterの「ツイート編集」機能、カナダやオーストラリアの「Twitter Blue」メンバーに向け提供開始 \- ケータイ Watch](https://k-tai.watch.impress.co.jp/docs/news/1444797.html)

この記事ではツイート編集機能に関する Twitter API の情報源をまとめておきます。

主に拙作の Twitter クライアント TwitPane に編集履歴表示機能を追加する際の情報源です。


# 編集されたツイートの例

- 1回編集されたツイート

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">hello<br><br>this is a test to make sure the edit button works, we’ll let you know how it goes</p>&mdash; Twitter Blue (@TwitterBlue) <a href="https://twitter.com/TwitterBlue/status/1575590534529556480?ref_src=twsrc%5Etfw">September 29, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

- 3回編集されたツイート

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">testing...testing...<br><br>edit Tweet functionality is rolling out for Twitter employees and select Twitter Blue members in CA, AUS, &amp; NZ...US later this week.<br><br>you can edit a Tweet up to 5x within 30 mins, see revision history, and there&#39;s an icon that denotes if Tweet was edited.</p>&mdash; Zach Mazzotta (@zchmz) <a href="https://twitter.com/zchmz/status/1577040381287374848?ref_src=twsrc%5Etfw">October 3, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


# Twitter API のツイート編集機能に関する情報源

## 概要
- [Supporting Edit Tweet functionality with new API metadata \| Twitter Developer Platform](https://developer.twitter.com/en/blog/product-news/2022/supporting-edit-tweet-functionality)
- [新しいTwitter APIメタデータで、ツイート編集（Edit Tweet）機能をサポートします](https://blog.twitter.com/developer/ja_jp/topics/tools/2022/twitterapi-edit-tweet)
※上記の日本語訳

## Twitter API v2
- [Edit Tweets \| Docs \| Twitter Developer Platform](https://developer.twitter.com/en/docs/twitter-api/edit-tweets)
    `edit_history_tweet_ids`と`edit_controls`が追加された。

## Twitter API v1.1 Standard

- [Edit Tweets \| Docs \| Twitter Developer Platform](https://developer.twitter.com/en/docs/twitter-api/v1/edit-tweets)
    `ext_edit_control` に `initial` や `edit` 等が追加された。

## Display requirements: Tweets
- [Display requirements – Twitter Developers \| Twitter Developer Platform](https://developer.twitter.com/en/developer-terms/display-requirements)
    編集済みツイートの表示に関する表示要件が追加された。
AWS ChatbotではSlackにメンション付きメッセージを送れない→(2023/9)送れるようになりました

:::note warn
2023年9月にAWS Chatbotでカスタム通知が実装され、メンション付きでメッセージを送ることが可能になりました。
[AWS Chatbot でカスタム通知が利用可能に
](https://aws.amazon.com/jp/about-aws/whats-new/2023/09/custom-notifications-aws-chatbot/)
:::
# やりたかったこと
 - AWS Chatbotを使ってサーバのCPU使用率の異常をSlackに通知したい。
 - その際Slackメッセージにはメンションをつけてすぐに把握できるようにしたい。

# 結論
 - 2022年10月時点で、`AWS Chatbot`を使ってSlackに`@here`や`@channel`等のメンションをつけてメッセージを送ることはできない仕様となっています。
 - メッセージ内容は全てAWS Chatbot側で設定され、ユーザー側で内容の変更をすることはできません。

# 対応策
 - メンションをつけたい、好きなメッセージ内容を送りたい場合はChatbotではなく`AWS Lambda`を使って自前でSlack通知処理を実装する。
 - メンションをつけるのを諦めて、全ての新しいメッセージを通知するようSlackのチャンネルに対し設定しすぐに把握できるようにする。
Shopifyテーマ「Dawn」のマイページでYubinBangoを実装する際に都道府県のプルダウンにも適用させたよという話

タイトルの通りだが、ShpopifyのOS2.0デフォルトテーマ「Dawn」でのマイページで使われている都道府県のvalueがローマ字表記のため、YubinBangoを使った都道府県選択がスルーされてしまう現象を解決してみました。

そこまでややこしい実装ではなかったですが、しばらくこの対応が続きそうなので備忘録として。
YubinBangoの使い方や設定の方法は、公式のgithubを見てください。

# アプローチ
* YubinBangoでキャッチした都道府県名をhiddenフィールドに保存
* 都道府県のselectタグからhiddenフィールドの値と合致するoptionを検出
* 検出したoptionに対してselectedを付与して選択状態にする

# リファレンス

YubinBango
https://github.com/yubinbango/yubinbango


# サンプルコード
YubinBangoの設定を行なった後、以下のコードを main-addresses.liquid の```<script>```内に設置してもらうと動きます。

YubinBangoで値を取得埋め込むタイミングをobserverで監視しようとも思ったけど、ひとまずsetTimeoutで逃げております。ツッコミは色々とありますが、ひとまず使えるコードにはなっているので、ぜひ改善案を欲しいところではあります！


```
function changeRegion(){

const addressForms = document.getElementsByTagName('form');
Array.prototype.forEach.call(addressForms, (item) => {
  if( item.classList.contains('h-adr') === true ){
    var postalCode = item.querySelector('.p-postal-code');
    var region = item.querySelector('.p-region');
    var provinceList = item.querySelector('.address-province').options;
    var timerId;
    var selectIndex;
    postalCode.addEventListener('keyup', (e)=>{
      clearTimeout(timerId);
      timerId = setTimeout(()=>{
        if( region.value != '' ) {
          Array.prototype.forEach.call(provinceList, (pref, i) => {
            if( pref.innerText === region.value ){
              selectIndex = i;
            }
          });
          provinceList[selectIndex].setAttribute('selected', true);
        }
      }, 300 );
    });
  }
});
}
window.addEventListener('DOMContentLoaded', changeRegion);
```
# 注意事項
* エラー処理などは書いていませんので、使用の際は適宜記述してください
* 設置の方法や不具合などのヘルプサポートは対応できかねますが、もっとこういうコードの方がいいですよというご意見はドシドシいただきたいです。
* 上記コードを使用した際に発生した不具合について責任を負いかねますのでご了承ください。
pythonで使えるモダンなGUIライブラリ　nicegui

<h1>記事を書こうと思ったきっかけ</h1>
<p>初めての投稿でtkinterを使っていましたが見た目が古くさい感じがしたので代わりに使えそうなGUIライブラリを探していると使いやすそうなライブラリを見つけたので記録として残そうと思いました。</p>

```python:
from nicegui import ui

ui.button()
ui.run()
```

<p>基本的な書き方はui.作りたい部品()、最後にui.run()で表示されます。<br>
ボタンだけでなく、チェックボックスやラジオボタンもui.checkbox(),ui.radio()で作成可能です。</p>


```python:
ui.button('check', on_click=lambda: print('hello world!'))
ui.run()
```

<p>ボタンなどに文字を表示させるときは引数に文字列を指定し、ユーザーからの入力後処理をさせたいときにはon_click, on_changeに処理をさせる関数を指定します。</p>

```python:
with ui.row():
    ui.button('click', on_click=lambda: output.set_text('ok'))
    ui.checkbox('check me!')
    ui.icon('home')
    output=ui.label('').classes('text-bold')
ui.run()
```
<p>作った部品を行方向に並べたいときはui.row()を使い,ui.column()を使えば列方向に並べることができます。</p>


```python:
with ui.card():
    with ui.row():
        ui.button('click')
        ui.checkbox('check me!')
        ui.icon('home')
    with ui.row():
        ui.button('click')
        ui.checkbox('check me!')
        ui.icon('home')

with ui.card():
    with ui.row():   
        ui.button('click')      
        ui.checkbox('check me!')
        ui.icon('home')
    with ui.column():
        ui.button('click')
        ui.checkbox('check me!')
        ui.icon('home')

ui.run()
```
<p>ui.card()を使えば、ボタンやチェックボックスをグループ分けして使うことができます。</p>


<h1>最後に</h1>
<p>niceguiは引数を変更するだけで様々な見た目に変更できるので、今後guiを使うときは活用したいと思います。<br>
ドキュメントにわかりやすく、いろいろな部品の説明がされているので是非見てみてください。
cron で /dev/null つけたら動かない？

### 現象

cron 起動の処理を下記のように出力を抑える設定にしたら、見た目上 動かなくなりました。

```
* * * * * php /foo/bar/test.php （動く）
↓
* * * * * php /foo/bar/test.php >/dev/null 2>&1 （動かない？）
```

### 原因

実際は動いていたのですが、プログラム内の二重起動チェックですぐに終了していたからでした。

二重起動チェックの方法は `ps` コマンドを発行して、test.php の行数を数えてました。
通常は、

```
362165 ?  R  0:00 php /foo/bar/test.php
```

この１行のみ出力されます。これは自分自身であり二重起動していないと判定して処理続行します。
しかし `/dev/null` をつけると、

```
362162 ?  Ss  0:00 /bin/sh -c php /foo/bar/test.php >/dev/null 2>&1
362165 ?  R   0:00 php /foo/bar/test.php
```

この２行が出力されてしまいます。
つまり自分自身を含めて２個の処理が動いていると判定して、終了していたのです。
（実際は１個なのに）

まあ手作りの二重起動チェックが厳密でなかったということでしょう。

### その他

例えば

```
* * * * * php /foo/bar/test.php 1
```

このように何か引数を追加するだけでは今回の問題は起きません。
`>/dev/null 2>&1` を追加すると /bin/sh を介して起動するので、二重起動に引っかかります。
【matplotlib】 figureとaxesの関係について

# はじめに
matplotlib に出てくる figure と axes の関係について、深くまで理解せずあいまいな解釈でコードを書いていたので根本的に理解することを目的にこの記事を残す　

# figureとaxes
figure は描画領域で、axes は個々のグラフである。
figure は「fig」,  axes は「ax」と略されることが多い。

### figureオブジェクト
* グラフの描画領域全体のこと。ここにさまざまなグラフ(axes)を描いていく。
* すべてのプロット要素の最上位コンテナである。
* グラフとして保存するときはfigure単位になる。大抵は figure 1つで事足りることが多い。
```
# 描画領域を生成する
fig = plt.figure()
```

### axesオブジェクト

* 一般的な英単語で使用される場合は「軸」という意味であるが、matplotlibにおいては1つのグラフのようなものと考えるとよい
* figureの中に複数のaxesを設定することができる


::: note warn
axesの読み方は「アクシーズ」で、axis(軸)の複数形である。
:::
## 描画領域をグリッド状に分割する
matplotlib において、一つの figure の中に複数の axes があるとき、それらを subplot という。figure を規則正しいグリッド状に分割して、その分割した一つ一つの領域に axes を追加していく。

### axes を1つずつ作成 or 1度に全部作成

* m × n 行列で分割した領域の中から位置を1つ指定し、axes を作成する場合
```
2x2 にグリッド上に分割した場合の index=3 の位置に axes を作成する。 引数に行数列数及び何番目かを指定できる。
plt.subplot(2, 2, 3)
plt.plot(x, y)
```
::: note

figure クラスの figure.add_subplot() でも同じことができる。

fig = plt.figure()
ax = fig.add_subplot(2, 2, 3)
ax.plot(x, y)

:::
<br />

* m × n 行列で分割した領域のすべてに axes を作成する場合
```
# ax には、axesオブジェクトの 2×1 のnumpy配列が格納される。
fig, ax = plt.subplots(2, 1)  
ax[0].plot(x1, y1)     
ax[1].plot(x2, y2)
```
::: note

figure.subplots() でも同じことができる。

fig = plt.figure()
ax = fig.subplots(2, 1)
ax[0].plot(x1, y1)
ax[1].plot(x2, y2)
:::

参考にしたサイト
https://pystyle.info/matplotlib-create-subplots/






# グラフを表示するまでの流れ
人によって使い方や考え方は異なるが、大まかには以下の通りである。

1. figure を生成する
1. 生成した figureに axes を生成、配置する
1. axes に描画データやグラフの詳細な情報、追加情報を設定する
1. 表示したり、画像として保存したりする

引用:https://www.python.ambitious-engineer.com/archives/2680

## まとめ
おおまかな流れの中における figure と axes の役割を知ることができた。それぞれの単語の役割に対して具体的なイメージが思い描けないとややこしく感じる部分でもあるので、今回は体系的に理解できるまで調べることができてよかった。matplotlibは今後の大学生活でも頻繁に使うライブラリなので、学んだことを研究に役立てていきたい。

## 参考文献
この記事は以下の情報を参考にして執筆しました。
https://pystyle.info/matplotlib-create-subplots/
https://www.yutaka-note.com/entry/matplotlib_figure
https://www.python.ambitious-engineer.com/archives/2680
Dockerで構築したLaravelの開発環境にXdebugを導入する

新規プロジェクトにアサインされた際**ソースコードがどのように実行されているか**を迅速に把握することが必要となります。
ソースコードを１から読むことも必要ですが、デバッガを使用しどのように動いているかを把握することで、仕様理解が一気に進みます。

私は今までいくつかの案件で環境構築をさせていただく機会があり、その中でもXdebug導入で何度も躓くことがありました。
そういった経験から得られた知見をまとめ、今後詰まった時の参考にするためまとめます。

# 環境
- php 8
- Laravel 8
- Xdebug v3.1.5
- Visual Studio Code 1.71.2

# Xdebugのバージョンについて
今回はバージョン３をインストールする

Xdebug導入について検索するとバージョン2と3の情報がヒットするが、全く記法が異なるので注意
自分が導入したいバージョンについて検索すること

バージョンによる記法の違いは以下を参照

https://marketplace.visualstudio.com/items?itemName=xdebug.php-debug#:~:text=Enable%20remote%20debugging%20in%20your%20php.ini%3A

# Xdebugをインストール
VSCodeでXdebugをインストール

https://n-archives.net/articles/vscode/php-debug-with-xampp-xdebug-vscode/2-vscode.html#i-1-2:~:text=%E3%81%B0OK%E3%81%A7%E3%81%99%E3%80%82-,PHP%20Debug%20%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB,-VS%20Code%20%E3%81%AB

# ファイルの編集
```dockerfile:Laravelインストール用のDockerfile
FROM php:8.0.8-apache
 (略)
RUN apt-get update \
 (略)
  && pecl install xdebug \  ←追加
  && docker-php-ext-enable xdebug　←追加
(略)
WORKDIR /var/www/html/
```

```ini:php.ini
[xdebug]
xdebug.client_host = host.docker.internal
xdebug.mode = debug
xdebug.start_with_request = yes
xdebug.discover_client_host = 0
xdebug.client_port = 9005
xdebug.log=/tmp/xdebug.log
```
xdebug.client_portは後述するlaunch.jsonのport指定と合わせる

# launch.jsonにXdebugの設定追加

https://amateur-engineer-blog.com/vscode-launchjson/#toc3:~:text=Copy-,launch.json%E3%81%AE%E4%BD%9C%E6%88%90%E6%96%B9%E6%B3%95,-%E3%81%BE%E3%81%9A%E3%81%AF%E3%83%87%E3%83%90%E3%83%83%E3%82%B0%E3%81%97%E3%81%9F

```json:launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "hostname": "0.0.0.0",
            "port": 9005,
            "pathMappings": {
                "/var/www/html": "${workspaceRoot}/src"
            }
        },
```
pathMappingをよく間違えるので注意
${workspaceRoot}はプロジェクトのルートなので、Docker関連のディレクトリが存在していることがある
Laravelのディレクトリ(今回はsrc)を指定すること

# 使ってみる
実際の使い方は以下の動画を参考

https://www.youtube.com/watch?v=Rnos6bMnTGo

# ブレークポイントで止まらないとき
### そもそもインストールされているかを確認
```
docker compose exec (docker composeで指定するサービス名) /bin/bash
root@aaaaaaaa:/var/www/html# php -v
PHP 8.0.8 (cli) (built: Jul 22 2021 02:26:57) ( NTS )
Copyright (c) The PHP Group
Zend Engine v4.0.8, Copyright (c) Zend Technologies
    with Xdebug v3.1.5, Copyright (c) 2002-2022, by Derick Rethans
```
Xdebugと書かれていない場合はインストールされていない
Dockerfileを確認する

### ログを確認する
今回だと/tmp/xdebug.logにログが出る設定にしている
Laravelコンテナにアタッチし、該当のログファイルを確認する
```
docker compose exec (docker composeで指定するサービス名) /bin/bash
root@aaaaaaaa:/var/www/html# cd /tmp
root@aaaaaaaa:/tmp# ls -a
.  ..  xdebug.log
root@aaaaaaaa:/tmp# cat xdebug.log
・
・
・
```

# 参考
https://hiro8blog.com/how-to-debug-laravel-container-by-xdebug/

https://yutaro-blog.net/2021/07/08/laravel-docker-xdebug-vscode/

https://maasaablog.com/development/backend/php/laravel/2308/

https://qiita.com/kamotetu/items/d486680a0cdcdffc2c08
failed to satisfy constraint: Member must have length less than or equal to 64


# 事象 : CloudFormationでEventBridgeのRuleを登録したらエラー
テンプレートファイルにEventBridgeのルールを追加して・・・

```yml:アップロードしたテンプレートファイル
# ...省略...
EventBridgeRuleCase1:
    Type: AWS::Events::Rule
    Properties:
      Name: !Sub ${AWS::StackName}-event-bridge-rule-long-long-long-long-name
      ScheduleExpression: 'cron(0 12 * * ? *)'
      Targets:
        - Arn: !GetAtt Cluster.Arn
          RoleArn: !Sub arn:aws:iam::${AWS::AccountId}:role/ecsEventsRole
          Id: !Sub ${AWS::StackName}-event-bridge-rule-long-long-long-long-name
# ...省略...
```

CloudFormationのスタックをテンプレートファイルで更新・・・しらたエラーになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1743295/cb878d5d-67eb-6fd8-7234-ba5014e7a08d.png)


```bash:エラーメッセージ
1 validation error detected: Value 'ecs-cluster-very-long-long-name-event-bridge-rule-long-long-long-long-name' at 'name' failed to satisfy constraint: Member must have length less than or equal to 64 (Service: AmazonCloudWatchEvents; Status Code: 400; Error Code: ValidationException; Request ID: 6xxxxx-xxxx-xxx-xxxxxx; Proxy: null)
```

## 原因 : ルールのNameは文字数上限が64文字までだから
擬似パラメーター`AWS::StackName`にはECSのクラスター名が入ります。
結果、ルール名は70文字近くになっていました。

> **Name**
> The name of the rule.
> Type: String
> Length Constraints: Minimum length of 1. Maximum length of 64.
> Pattern: [\.\-_A-Za-z0-9]+
> Required: No
> [Rule - Amazon EventBridge](https://docs.aws.amazon.com/ja_jp/eventbridge/latest/APIReference/API_Rule.html)

TargetのIdも同じく64文字まででした。

> **Id**
> The ID of the target within the specified rule. Use this ID to reference the target when updating the rule. We recommend using a memorable and unique string.
> Type: String
> Length Constraints: Minimum length of 1. Maximum length of 64.
> Pattern: [\.\-_A-Za-z0-9]+
> Required: Yes
> [Target - Amazon EventBridge](https://docs.aws.amazon.com/ja_jp/eventbridge/latest/APIReference/API_Target.html)

### 対応 : NameとIdを短くする

```yml:修正したテンプレートファイル
# ...省略...
    Properties:
      Name: !Sub ${AWS::StackName}-event-bridge-rule-name
# ...省略...
          Id: !Sub ${AWS::StackName}-event-bridge-rule-name
# ...省略...
```

1. テンプレートファイルを短い文字列へ修正
1. CloudFormationで今一度アップロードして登録
1. 成功
1. 戒め : 文字数制限はちゃんと確認する、特に擬似パラメーターを使うときは。
【Nuxt2】環境ごとに設定を切り替える

# はじめに
n番煎じかつNuxt2での環境変数の書き方です．

# .envファイルの作成
.envファイルを作成し，環境変数を記入する．Nuxt2では自動的にgitignoreになる．以下例
```.env
# ここはコメント
API_URL=http://example.com
API_KEY=abcdef
```
# nuxt.config.jsに環境変数を定義
nuxt.config.jsを編集し，page, layout, componentなどから参照できるようにする．
nuxtに元から入っているruntimeConfigを用いる．
```js:nuxt.config.js
export default {
  // 省略
  publicRuntimeConfig: {
    apiURL: process.env.API_URL
  },
  privateRuntimeConfig: {
    apiKey: process.env.API_KEY
  }
}
```

### publicとprivateの違い
publicはフロントエンドに公開してもいい環境変数．つまりSPAモードでもSSRでもSSGでも使える．
対してprivateはサーバサイドのみで使える．SSRやSSGモードで使う感じ．

# 各vueファイルで使う
runtimeConfigで設定された環境変数は，nuxt contextの$configプロパティに登録される．
[分割代入](https://qiita.com/akifo/items/19a4f2823fc99779dffc)などを用いていい感じに使う．以下例
```vue:example.vue
import axios from 'axios'
export default {
  async asyncData({ $config }) {
    axios.get($config.apiUrl + '/user', res => {
      // ...
    })
  }
```

## 参考文献
[dotenvはもう古い！最新Nuxtの環境変数管理方法](https://qiita.com/taai/items/cbc61b9b4a18aacad57e)
[Nuxt.jsのRuntimeConfigを使ってみる](https://cly7796.net/blog/javascript/try-using-runtimeconfig-in-nuxt-js/)
UNIXのコマンドまとめ①

Unixについてなんとなく書いていこうと思います。

第１回はUnixそのものについてと、ターミナルに表示される文字の意味について書いていきます。
実際のコマンドに関しては次回以降書いていけたらと思います。
<br><br>



**Unixとは**
・WindowsやmacOSと同じOSの一種。
・WindowsやmacOSが個人pc向けであるのに対し、Unixはインターネットを構成するサーバー用としてよく使用される。
・Unixの無料互換OSとして、BSD、Minix、Linuxなどがある。
・macOSもUnixが元となっているOSであるため、次回以降で紹介するUnixのコマンドはそのままmacOSでも使用可能。


<br><br>

**「~」や「%」の意味**![スクリーンショット 2022-10-05 17.23.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2836605/e02b429e-e819-18f2-9454-b43289af2c58.png)1. ログインユーザ名
2. 現在の階層(画像はログインユーザのホームディレクトリ)
3. ユーザ権限(zshの一般ユーザ)

<br><br>

以上

参考 : https://dotinstall.com/lessons/basic_unix_v3
Text Editの内側に影をつける方法〜Layer-List〜

Androidアプリの実装中にTextEditの領域の **内側** に影をつけたかった！
うまい実装方法に辿り着いたので備忘録としてここに残します。

#### elevationを試してみるが、うまくいかず・・・

入力欄の外側に影をつけるなら、XMLの中に **android:elevation="〇〇dp"**　を記述することで描画できる。

#### 次にgradient(グラデーション要素)を試したがこちらもうまくいかなかった

style要素としてgradientを使用して実装しようと思ったが、うまくいかず。（style…高さや幅、背景の色、文字についてなど外観についてまとめて記述できる要素。Viewファイルとは別に用意）
backgroundcolorで指定した白背景の上に、gradientでグラデーションをかける、という複数の要素を重ねて表示することができず断念。

## layer-list で解決した！

###### layer-list とは
画像などを、レイヤー構成で重ねることができるリソース。
 **複数の画像をひとつのリソースとして取り扱うことができる。** 
res/drawable内に作成。

●使い方
XML で作る場合は layer-listタグを使う。
そのタグの中に itemタグで要素を構成する。
**上に書いた順に描画される**ので、一番上の itemタグで定義した画像が一番下に表示される。

**実際に書いたコード↓**
![スクリーンショット_2022-05-25_16_47_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629197/d764682a-e0b4-adc9-8c43-303977fc8a15.png)

**実際の画面**
見辛いですが、内側にうっすら影がついています。
![スクリーンショット_2022-05-25_16_24_17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629197/ebcfb0de-8b23-e05a-3d31-a7a46db43104.jpeg)

影をつけたい部分の違いでさまざまな方法があるんですね。

参考記事
[Android Developer](https://developer.android.com/guide/topics/resources/drawable-resource?hl=ja#LayerList)
[How to make inner shadow shape in android studio [closed]](https://stackoverflow.com/questions/66039169/how-to-make-inner-shadow-shape-in-android-studio)
ショート動画がおすすめに乗る方法についてアルゴリズムを解る範囲で調べてみた。

## 調査した背景

先日自分の食べたもの記録用のinstagramでリール動画を作成してみたところ、フォロワー22のアカウントにも関わらず4000再生されていたので、どういう仕組みで乗るのかが気になりました。
そこで今流行りのindtagramリール/YoutubeShort/tiktokでおすすめに乗ったりするのってどんな時？というのをまとめてみました。
Short動画の再生数伸ばしたい方、投稿してみたい方の参考になれば幸いです。
![スクリーンショット 2022-10-05 17.30.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2318046/9c22f405-3996-768c-11f0-4d10765bdda0.png)

## YoutubeShortについて

Youtubeショートに関しては以下のような仕様になっていることがわかりました。

1. 投稿されたすべての動画は、一旦同じ回数フィードにて表示される。
2. 1の間のいいね数、再生率（最後まで再生されているか）、総再生によっておすすめに表示されるかを判定
3. 1と２の繰り返し

60秒を１回最後まで見てもらうか、短めの動画を何回も再生してもらうか、その辺が鍵となってきそうですね。

参考：https://www.tsusshinofudeblog.com/youtube-shorts-how-feed/2244/

## TikTokについて

ショート動画の代名詞のtiktok。こちらのおすすめ表示基準は以下になっています。

1. AIによる適切な動画かの審査
    1.規約違反では無いか
    2.不適切なコンテンツでは無いか
    3.シャドウバンされたアカウントでないか

2. 一定のユーザー(300~400)人のおすすめに表示

3. ２で表示されている間のエンゲージメントでおすすめに載せ続けるかを判定
    1.いいねやコメント数
    2.シェア数
    3.平均視聴時間・総視聴時間
4. 2と3の繰り返し

また、TikTokは傾向として若年層が多いらしいので（徐々に平均年齢は上がっているようですが）、若年層向けのコンテンツにターゲットを絞るのがいいのかもしれません。

参考：https://studio15.co.jp/media/tiktok-recommend-method/


## instagramのリール機能

こちらに関しては色々調べたのですが正直わからなかったです。
ただ、いいねの回数と再生数は比例しないので、新規投稿はタグ検索の時に出やすくなっているのかもしれないな。と予測は立てています。
社内のインスタに詳しい同僚に聞いたところ、フォロワー数が少ない人ほど再生されやすくはあるよ！とのことでした。
ちなみにおすすめから外されてしまうのは以下の投稿だということはわかりました。

- 低画質のリール動画
- 透かしの入った他のSNSからの転載動画
- 政治的な問題に焦点を当てた動画
- 政治家又はその人に代わって作られた動画

参考になれば幸いです。

## さいごに

次回は何かしら検証して、検証結果を上げれたらいいなとおもっています。
ちなみに私の食べ物しかあげていないインスタはこちらです。
再生数なんで伸びたかわかる方いたら教えてもらえるとうれしいです。

https://www.instagram.com/spring_piyo/
amazon light sail ポート開放 sslタイムアウト

amazonlinux2にはfirewall、iptablesがない。
ポートの開放は管理画面から。

letsencryptを導入してSSL設定したが、タイムアウトになる。
ということで許可の方法

amazon ssl 通らない
lightsailにログインして、vpsサーバーを選択後、 networkingを選択。


HTTPS	TCP	
443
Any IPv4 address


ipv4だけを上記の設定にすれば、ipv6もSSL通信できるようになる。
IPv6にも同様にやっておこう


HTTPS	TCP	
443
Any IPv6 address
【PowerShell】コマンドでPCハード情報を確認する

　
Windows PC のハード情報を記録しておくために使う PowerShell コマンドをまとめました。
全体的なスペック調査、使用パーツの確認などができます。


## シリアル番号, 製品名, 型番
```powershell
Get-WmiObject Win32_ComputerSystemProduct
```
　
実行結果例（一部書き換えてます）
```text
IdentifyingNumber : （シリアル番号が表示されます）
Name              : （製品型番が表示されます）
Vendor            : NEC
Version           : NEC_Product
Caption           : コンピューター システム製品
```

## OSバージョン
```powershell
(Get-WmiObject Win32_OperatingSystem).Caption
```
　
実行結果例
```text
Microsoft Windows 11 Pro
```

## CPU
```powershell
Get-WmiObject Win32_Processor
```
　
実行結果例
```text
Caption           : Intel64 Family 6 Model 165 Stepping 3
DeviceID          : CPU0
Manufacturer      : GenuineIntel
MaxClockSpeed     : 2904
Name              : Intel(R) Core(TM) i5-10400 CPU @ 2.90GHz
SocketDesignation : U3E1
```

## メモリ
```powershell
Get-WmiObject Win32_PhysicalMemory | select PartNumber,SerialNumber,ConfiguredClockSpeed,ConfiguredVoltage,Capacity,DeviceLocator
```
　
実行結果例（一部書き換えてます）
```text
PartNumber           : HMA81GU6DJR8N-WM    
SerialNumber         : （シリアル番号が表示されます）
ConfiguredClockSpeed : 2667
ConfiguredVoltage    : 1200
Capacity             : 8589934592
DeviceLocator        : ChannelA-DIMM1
```

## ストレージ
```powershell
Get-WmiObject Win32_DiskDrive
```
　
実行結果例
```text
Partitions : 3
DeviceID   : \\.\PHYSICALDRIVE0
Model      : SAMSUNG MZVLB256HBHQ-000L7
Size       : 256052966400
Caption    : SAMSUNG MZVLB256HBHQ-000L7
```

# 最後に
PowerShellをいちいち起動して...がめんどくさかったりするので、バッチ作成してクリックすればすぐ実行できるように以下のように使ってます。
```batch
Powershell -command "<PowerShellのコマンド>"
```
Clara Parabricks4.0を利用する　その3

# Clara Parabricks V4.0を利用する
## Clara Parabricksのgermlineワークフロー

germline ワークフローは fastqをリファレンス配列にマッピングしてVariantを抽出するツール

[Clara Parabricks4.0を利用する　その1](https://qiita.com/percipere/items/48214caf3f6d6143ae5d)　と　[Clara Parabricks4.0を利用する　その2](https://qiita.com/percipere/items/5c14fbf2be67c58bafd9)の処理を連続して実行するワークフロー

```
docker run \
    --gpus all \
    -u `id -u`:`id -g` \
    --rm \
    --volume ${PWD}/reference:/reference \
    --volume ${PWD}/variant:/variant \
    --volume ${PWD}/parabricks_sample/Data:/fastq \
    --volume ${PWD}/Parabricks4.0:/outputdir \
    --workdir /tmp \
    nvcr.io/nvidia/clara/clara-parabricks:4.0.0-1 \
    pbrun germline \
    --ref /reference/GCA_000001405.15_GRCh38_no_alt_analysis_set.fna \
    --in-fq /fastq/${SAMPLE}_1.fq.gz /fastq/${SAMPLE}_2.fq.gz \
    --knownSites /variant/Mills_and_1000G_gold_standard.indels.hg38.vcf.gz \
    --interval-file /reference/region.bed \
    --out-bam /outputdir/${SAMPLE}.bam \
    --out-variants ${SAMPLE}.vcf \
    --out-recal-file /outputdir/${SAMPLE}.BQSR-report.txt
```

パラメーターなどについては前回までのものと同じ

今回はここまで:smile:
JQueryでのDOM操作

## はじめに
JQueryでのDOM操作をすることが多いため、業務内で頻繁に使用したもの、また基本的な操作をまとめた。

## セレクタ
$('')の第一引数に操作したいDOMを指定
```
$('div')
```
IDを指定
```
$('#id')
```
クラスを指定
```
$('.class')
```
要素の絞り込み
```
element.find('#ID >class')
```
親子で絞り込み
```
$('parent > child')
```

## DOM操作
### 要素の取得
.html()：要素内のHTMLを取得
```
 element.html();
```
引数に要素を指定することでHTMLの書き換えもできる。
```
element.html('<p>新しいコンテンツを追加</p>');
```
### 要素の追加
.prepend()：指定した要素内部の先頭に追加
```
// 挿入先.prepend(追加したい要素)
element.prepend(target)

$(itemElement).find('.class').prepend('<span class="first"></span>');
```
⇄
.prependTo()
```
// 追加したい要素.prependTo(挿入先)
target.prependTo(element)
```

.append()：指定した要素内部の最後に追加
```
// 挿入先.append(追加したい要素)
element.append(target)
```
⇄
.appendTo()
```
// 追加したい要素.appendTo(挿入先)
target.appendTo(element)

$(itemElement).find('.class').appendTo(element);
```

.before()：指定した要素の前に追加
```
// 挿入先.before(追加したい要素)
element.before(target)

$(itemElement).find('.first').before($(itemElement).find('.second'));
```
⇄
.insertBefore()
```
// 追加したい要素.insertBefore(挿入先)
target.insertBefore(element)
```

.after()：指定した要素の後に追加
```
// 挿入先.after(追加したい要素)
element.after(target)
```
⇄
.insertAfter()
```
// 追加したい要素.insertAfter(挿入先)
target.insertAfter(element)
```

- 入れ子にしたい場合は.children()で繋ぐことができる
```
$('#itemElement　.element').append('<div class="third">')
    .children('div.third').append('<button class="btn">ボタン</button>');
```

### 要素の削除
```
element.find('.class').remove();
```

## おまけ(よく使うJSのDOM操作)

### 要素の確認
.includes()：要素が含まれているかどうかをbool型で教えてくれる。
```
txtOrderDate.includes('こんにちは');
```

### 文字列置換
.replace()：第一引数に第一引数に置換前、第二引数に置換後の文字列を挿入することで文字列を置き換えることができる。
```
element.replace('おはよう','こんばんは');

// 繋げることで複数の要素を置換できる
element.find('.hello').html().replace('おはよう','こんばんは').replace('ようこそ','さようなら')
```

### 要素の分割
.split():指定した文字列で配列に分割する。
```
element.html().split('/');
```

## 参考文献
https://api.jquery.com/category/manipulation/

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split
Docker Desktop を使わずに、WSL2にDocker環境を作る

# はじめに

Docker Desktop for Windows を利用できないプロジェクト（有償化）が出てきたので、
WSL2のUbuntuに、Docker環境を作る手順を確認しました。

# 前提
- WSL2にUbuntuを導入済み

# Docker Engineのインストール

公式サイトのマニュアルを見ながらインストールします。

https://docs.docker.com/engine/install/ubuntu/#install-using-the-repository

ここを参考に、「Install using the repository」から順に進めれば問題なくインストールできます。

一か所だけ、単純コピペできなかったのは

```bash
sudo apt-get install docker-ce=<VERSION_STRING> docker-ce-cli=<VERSION_STRING> containerd.io docker-compose-plugin
```
の部分で、Docker Engine のバージョンを選んでインストールする箇所ですが、一番新しい「5:20.10.18~3-0~ubuntu-focal」を、`<VERSION_STRING>` の部分に入れて、インストールしました。

## 権限付与
WSLを使う一般ユーザからDockerコマンドを使用できるようにするため、利用しているユーザを、dockerグループに追加します。
```bash
sudo usermod -aG docker $USER
```

## 自動起動の設定
Ubuntuを再起動した際、Docker Deamonを都度起動するのは面倒なので、WSLを利用するユーザの、.bashrcに以下を追加しておきましょう。

```bash
sudo /etc/init.d/docker start
```

## 動作確認
一度ターミナルを終了して、再度起動し、`docker run hello-world` を実行

```bash
$ docker run hello-world

Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
    (amd64)
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker ID:
 https://hub.docker.com/

For more examples and ideas, visit:
 https://docs.docker.com/get-started/
```

が表示されれば、OK

# Docker Composeのインストール
次にDocker Composeをインストールします。

https://docs.docker.com/compose/install/other/

こちらも公式のマニュアルから。On Linuxの手順を実行すればOK

完了したら以下の通り確認

```bash
$ docker compose version
Docker Compose version v2.10.2
```

# 最後に
意外とあっさりできました。


# 参考サイト
https://qiita.com/ohtsuka1317/items/617a865b8a9d4fb67989
AI Programmerの作法 その4

# 概要
AI Programmerの作法、調べてみた。
atcoderやってみた。

# 投入したソースコード
- C++
- 3つの整数値と文字列を1つ受け取り、整数値の和と文字列を一行に出力する問題です。

# 実行結果

```
3つの整数値と文字列を1つ受け取り、整数値の和と文字列を一行に出力する問題です。

#include <iostream>
using namespace std;

int main() {
  int num1, num2, num3;
  string str;
  cin >> num1 >> num2 >> num3 >> str;
  cout << num1 + num2 + num3 << " " << str << endl;
  return 0;
}
```

# paiza.io
# 入力

```
1
2
3
hello
```

# 実行結果

```
6 hello
```

# 成果物

https://paiza.io/projects/PMe2r7FbGC1kJs9hJ38aEw?language=php

以上。