OmniAICreator/Qiita-1.07M huggingface dataset:
Flutter初心者 – テキストフォームを表示する

# コード例

`flutter create` した後の `main.dart` で `Widget build` の内容だけをフォームに差し替えたもの


```dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

@override
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text("Form"),
      ),
      body: Form(
        child: TextFormField(
          decoration: InputDecoration(labelText: 'Title'),
        ),
      ),
    ));
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

```

# 表示例

<img width="772" alt="image" src="https://user-images.githubusercontent.com/13635059/210624197-2e50686e-bfcf-4e6c-98b1-ef84aa54b77e.png">



# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# Twitter

https://twitter.com/YumaInaura
Docker Compose と Amazon ECS を利用したソフトウェアデリバリの自動化 のエラー解決

# エラー内容
[Docker Compose と Amazon ECS を利用したソフトウェアデリバリの自動化](https://aws.amazon.com/jp/blogs/news/automated-software-delivery-using-docker-compose-and-amazon-ecs/)を手順通り実行していくと、CodePipelineの `ExecuteChangeSet` でエラーとなる。

![98.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/e8fe0a9a-1edf-440a-71f1-2f753c5cc7c1.png)
![99.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/78e08f31-e942-b161-fe3e-27535aff5083.png)

```cmd:状態の理由
Resource handler returned message: "User is not authorized to perform that action on the specified resource (Service: Efs, Status Code: 403, Request ID: hogehogefugafuga)" (RequestToken: hogehogefugafuga, HandlerErrorCode: GeneralServiceException)
```

# 解決策

`pipeline` フォルダ内の `cloudformation.yaml` 184行目付近に `arn:aws:iam::aws:policy/AmazonVPCFullAccess` を追加する。

```yaml:cloudformation.yaml
  ExtractBuildRole:
    Type: AWS::IAM::Role
    Properties:
      ManagedPolicyArns:
        - "arn:aws:iam::aws:policy/AmazonEC2ContainerRegistryReadOnly"
        - "arn:aws:iam::aws:policy/AmazonVPCFullAccess"
      AssumeRolePolicyDocument:
        Statement:
          - Action: sts:AssumeRole
            Effect: Allow
            Principal:
              Service: codebuild.amazonaws.com
          - Action: sts:AssumeRole
            Effect: Allow
            Principal:
              Service: cloudformation.amazonaws.com
        Version: "2012-10-17"
```

## フォルダ構成

```
.
├── LICENSE
├── README.md
├── application
│   ├── docker-compose.yml
│   └── frontend
│       ├── Dockerfile
│       ├── myweb
│       │   ├── app.py
│       │   ├── static
│       │   │   ├── blue.png
│       │   │   ├── green.png
│       │   │   └── style.css
│       │   └── templates
│       │       ├── health.html
│       │       └── index.html
│       └── requirements.txt
├── infrastructure
│   └── cloudformation.yaml
└── pipeline
    └── cloudformation.yaml
```

# GitHub

GitHubにソースコードを公開しています。

https://github.com/ryomeblog/demo-app-for-docker-compose
コミット→プッシュ→マージ


# コミットまで

1.現在のブランチを確認
```git
$ git branch
```

2.ブランチを切ってそのブランチに移動
```git
$ git checkout -b (作成するブランチ名)
```

３．作業を行う

４．修正したファイルの確認
```git
$ git status
```

5.ソースコードを確認
```git
$ git diff
```

6.全てステージングに追加する
```git
$ git add -A
```

７．コミットを行う
```git
$ git commit -m "コミットメッセージ"
```

８．コミットログを確認
```
$ git log
```

# プッシュをおこなう

1.githubへプッシュ
```git
$ git push origin 現在のブランチ名
```

# マージを行う

１．masterブランチに移動
```
$ git checkout master
```

２．masterブランチへマージ
```
$ git merge マージしたいブランチ名
```

３．リモートブランチの更新
```
$ git push origin master
```      

githubを使ってマージした場合はローカルのmasterブランチを更新するため2,3は飛ばして以下コマンドを使用
```
git pull origin master
```

これの繰り返しで作業を行う。
Google Colaboratoryでテストメソッドを指定してunittestを実行する方法

`Google Colaboratory` でテストメソッドを指定して `unittest` を実行する方法を調べたので書いておきます。

サンプルのテスト対象を作っておきます。テストクラスが2つ、テストメソッドは合計4つです。

```py:サンプルのテスト対象
import unittest

def add(x, y):
  return x + y

class AddTest(unittest.TestCase):
  def test_add(self):
    self.assertEqual(add(1, 2), 3)

class TestStringMethods(unittest.TestCase):
  def test_upper(self):
    self.assertEqual('foo'.upper(), 'FOO')

  def test_isupper(self):
    self.assertTrue('FOO'.isupper())
    self.assertFalse('Foo'.isupper())

  def test_split(self):
    s = 'hello world'
    self.assertEqual(s.split(), ['hello', 'world'])
    # check that s.split fails when the separator is not a string
    with self.assertRaises(TypeError):
      s.split(2)
```


まず、全部のテストを実行するには、 `unittest.main` に下記のようなパラメーターをつけて実行します。
```py:全部のテストを実行
unittest.main(argv=[''], verbosity=2, exit=False)
```
```:実行結果
test_add (__main__.AddTest) ... ok
test_isupper (__main__.TestStringMethods) ... ok
test_split (__main__.TestStringMethods) ... ok
test_upper (__main__.TestStringMethods) ... ok

----------------------------------------------------------------------
Ran 4 tests in 0.018s

OK
```

テストクラスを指定して実行するには、 `unittest.main` の `argv` の2番目以降にクラス名を書きます。（ `argv` の1番目の値は使われないようです。）
```py:指定したテストクラスを実行
unittest.main(argv=['', 'TestStringMethods'], verbosity=2, exit=False)
```
```:実行結果
test_isupper (__main__.TestStringMethods) ... ok
test_split (__main__.TestStringMethods) ... ok
test_upper (__main__.TestStringMethods) ... ok

----------------------------------------------------------------------
Ran 3 tests in 0.007s

OK
```

指定したテストメソッドを実行
 `unittest.main` のargvの2番目以降にクラス名.メソッド名を書く

```py:指定したテストメソッドを実行
unittest.main(argv=['', 'TestStringMethods.test_upper', 'TestStringMethods.test_split'], verbosity=2, exit=False)
```
```:実行結果
test_upper (__main__.TestStringMethods) ... ok
test_split (__main__.TestStringMethods) ... ok

----------------------------------------------------------------------
Ran 2 tests in 0.010s

OK
```


`Google Colaboratory` で動くものも貼っておきます。

https://colab.research.google.com/drive/1QZPOgil-aaBS4-nftxQuZcXJ6aTzvBrQ#scrollTo=r6Pic0Tbt7KQ
JSONとは


# JSONとは


JSONは、データ記述言語です。
オブジェクト、配列などのデータを記述することができます。

多くの言語でライブラリが用意されており、プログラミング言語間でデータを受け渡すことができます。
例えば、バックエンドのrubyのプログラムからjsonデータをフロントに渡し、そのデータをフロントでjavascriptを使って活用するなどです。



WebサービスではAjax通信におけるデータフォーマットとして主に使われています。


# まとめ

JSONは、データを記述できる言語です。

異なるプログラミング言語間で、データを受け渡すことができます。
Flutter – VsCode 開発でホットリロードする

# Dart 拡張をインストールする

![image](https://user-images.githubusercontent.com/13635059/210610967-f579c8b4-9206-4969-b24f-f42a1babfa52.png)

# 右上の再生ボタンでFlutterを起動する

もしくは Start Debugging コマンドを実行する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89618/1eadca66-eb6f-4f04-b8a7-b5a17355980c.png)

# コード変更

コードを変えて保存すると即反映される

![image](https://user-images.githubusercontent.com/13635059/210611221-f5a4567b-2a23-405d-8073-77845659d07f.png)



# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# Twitter

https://twitter.com/YumaInaura
PowerAutomateでSharePointにファイルを格納する

## 概要
PowerAutomateで手動トリガーを使用して、SharePointにファイルを格納する際の備忘録です。
また今回は同じファイルをアップしても、ファイル名が重複しないようguid関数を使用してファイル名を自動生成させてます。（テストする際に何回もアップロードする際など、とても便利です。）

## やること
1. 手動トリガーを使用してファイルを選択・インポート
1. 選択・インポートしたファイルをSharePoint上に格納

## PowerAutomate完成イメージ
![PowerAutomate_sharepoint_import.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/130969/a827868f-ea13-f253-3e1c-acdde1debdaa.png)

## 手順
1. トリガー
    1. 「手動でフローをトリガーします」を選択
    1. 入力を追加で、「ファイル」を選択
1. ステップ1：SharePoint
    1. 「ファイルの作成」を選択
    1. サイトアドレス：格納したい「チーム」を選択
    1. フォルダのパス：格納したい「フォルダ」を選択（※1）
    1. ファイル名：適当（※2,3）
    1. ファイルコンテンツ：トリガー起動時にインポートした「ファイルコンテンツ」を選択


※1：今回はチャンネル1の直下
※2：今回はファイル名に「```guid()```」を用いて、自動生成している。
※3：ファイル名の例：```concat(guid(), '.xlsx')```
Windows11ProでBitLockerを有効にする

## 新しいPCが届いたので、Windows11ProでBitLockerを有効にします。

:::note info
BitLocker」は、PCのドライブを暗号化する機能。
PCが盗まれたとき、BIOS、OSのパスワードを掛けていてもHDDやSSDを別の端末で直接つなぐと中身が
読み取られる能性があるが、「BitLocker」によってHDDやSSD自体を暗号化しこれを防ぐ。
「BitLocker」で暗号化だけしていても意味がないのでBIOS、OSの強固なパスワード、ロックアウト設定など
他のセキュリティ対策が不要になるわけではないので悪しからず。
:::
<h3>設定方法</h3>

「設定画面(Windowsキー＋I)」→「プライバシーとセキュリティ」→「デバイスの暗号化」の順に選択し、
「デバイスの暗号化」のスイッチをONにする。

画面下の関連に表示される「BitLockerドライブ暗号化」をクリック
オペレータティングシステムドライブの下にある「BitLockerを有効にする」をクリック

![btl_002.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086747/55bd0ef1-ee31-6fb1-9b37-a266aff1d04a.jpeg)

回復キーのバックアップ方法を以下の３つから選択する。
- [ ] 「Microsoftアカウントに保存する」　→　私はローカルアカウントを使用しているのでこれは無し
- [x] 「ファイルに保存する」　　　　　　　→　これを選択。暗号化されているドライブには保存できない模様。今回は外付けHDDに保存。保存するときのファイル名はどのPCのどのドライブかがわかるようにしておいた。
- [ ] 「回復キーを印刷する」　　　　　　　→　プリンタまだ入れてない。

![btl_003.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086747/6c445005-e60c-b541-6624-6b4ab2da01fe.jpeg)

これでBitLockerが有効になりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3086747/e401d5af-9813-81cb-d97c-a111a28a6fc1.png)

以上
ABC251 A Dif:9 『AtCoder ABC251～275 ARC140～151 灰・茶・緑問題 超詳細解説』サンプル

この記事は 『AtCoder ABC251～275 ARC140～151 灰・茶・緑問題 超詳細解説』 のサンプルです。

値段：300円(Kindle Unlimited対象)
【kindle】
https://www.amazon.co.jp/dp/B0BRNTM9Z4

【booth(pdf)】
https://sano192.booth.pm/items/4455120

ARC140～151の部分のみ抜粋した廉価版 もあります。
値段：200円(Kindle Unlimited対象)
【kindle】
https://www.amazon.co.jp/dp/B0BRNRXPCV

【booth(pdf)】
https://sano192.booth.pm/items/4455133

【サンプル一覧】
ABC251 A：https://qiita.com/sano192/items/810a4a7d5cf61321bb05
ABC262 B：https://qiita.com/sano192/items/8a9cc91d73a798de6a54
ABC256 C：https://qiita.com/sano192/items/c52d24d0cdf3797a77d7
ABC259 D：https://qiita.com/sano192/items/e39d3636c1ea5d62c1bb

「ものすごく丁寧でわかりやすいABC解説」シリーズをベースに【キーワード】【どう考える？】【別解】を追加し、【解説】と【実装のコツ】を分けることでよりわかりやすく、具体例や図もより豊富に全ての問題の解説を書き直しました！
さらにQiitaでは公開していないARC140～151の灰・茶・緑問題も解説しています！
緑を目指す灰・茶コーダーの方へおすすめ！

https://qiita.com/sano192/items/54accd04df62242b70f0

https://atcoder.jp/contests/abc251/tasks/abc251_a

**【キーワード】**
なし

**【どう考える？】**
Sの文字数によっていくつSをくっつけるかを確認して条件分岐する。文字列の扱い方、ifの使い方がわかっていれば簡単。

**【解説】**
Sの文字数を数えて条件分岐する。
・1文字→Sを6個くっつける
・2文字→Sを3個くっつける
・3文字→Sを2個くっつける

文字数の確認方法などは【実装のコツ】を参照。

**【実装のコツ】**
**<文字数の確認>**
文字数はlen(文字列)とすることで確認できる。
lenはlength(長さ)の意味。

**<文字の連結>**
文字列についても足し算や掛け算の記号が使える。
すなわちSを3個くっつけるなら
S+S+S
か
S*3
と書けばいい。

**\<ifの書き方>**
if 条件:
　　処理内容
elif 条件:
　　処理内容
else:
　　処理内容

if,elifは「条件を満たせば」→「処理内容を行う」という意味。コードの上から順に処理を行っていく。
elseは「そうでなければ」すなわち「if,elifの条件が満たされなければ」→「処理内容を行う」という意味。

**【提出】**

```python:
# 入力の受け取り
S=input()

# 文字数が1の場合
if len(S)==1:
    # Sを6個くっつけて出力
    print(S*6)
# 文字数が2の場合
elif len(S)==2:
    # Sを3個くっつけて出力
    print(S*3)
# それ以外(文字数が3の場合)
else:
    # Sを2個くっつけて出力
    print(S*2)
```
npmモジュールの"reload"で簡単ホットリロード開発環境

# こちらが最新の記事です！！

2024/5/4追記
viteを使ったほうが本記事の内容はすぐに達成できます。こちらをご参照ください。

https://qiita.com/e_a_s_y/items/582e17d7799839454419

# 以下、元記事の本文

久々に超簡単アプリをフレームワーク無しで作ろうかな～と思った際にwebpackを組むのがめんどくさいなと思いました。
昔組んだwebpack 4のものはあったんですが、今やwebpackも5だし、なんならwebpackもそろそろ終わりかなと思い…。([参考](https://qiita.com/access3151fq/items/42b38635d81aad786e60))
そんな折、別方法を探していて[reload](https://github.com/alallier/reload)というものを発見しました。

npmモジュールであり、使い方も非常に単純そうだったため試しに使ってみた体験談です。

# 構成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385410/4766c185-50aa-4d83-3d03-439c71247317.png)

パッケージマネージャはyarnです。
src以下にアプリ用ソースコードは配置しています。
src以下は最終的ないろいろ検証で複数ファイルが置いてありますが、ひとまずindex.htmlだけでもいいです。

# インストール

今回はローカルインストールをします。

```sh
yarn add reload -D
```

これだけ。

# HTMLの準備

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <div>test!!</div>
  </body>
</html>
```

ひとまずこれだけ。
うまくいけば「test!!」とだけ表示されるはずです。

# 起動

## まずは失敗例

```sh
yarn reload -b
```

とREADMEに則ってコマンドを打ったのですが、デフォルトではカレントディレクトリのindex.htmlを探すようで、勝手にsrcとディレクトリを切っていた私の構成では当然何も表示されませんでした。そりゃそうだ。

## 成功例

というわけでREADMEをもっと読んだところ、ちゃんとオプションがありました。

> -d, --dir [dir]                The directory to serve up. Defaults to current dir.

-dオプションで起動時のページを指定できるそうです。
※ちなみに-bはブラウザを自動で起動させますよとのこと。

```sh
yarn reload -b -d src
```

これでlocalhost:8080でちゃんと「test!!」と表示されました。

index.htmlを編集したらちゃんとすぐリロードされて反映されます。

# jsファイルもちゃんとwatchしてるのか？

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <div>test!!</div>
    <button id="test-btn">ボタン</button>
    <a href="./page2.html">ページ２</a>

    <script src="./index.js"></script>
  </body>
</html>
```

```index.js
const btn = document.getElementById("test-btn");
btn.addEventListener("click", () => console.log("hello"));
```

```page2.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <div>page 2</div>
  </body>
</html>

```

上記のようにjsファイルと、さらに2ページ目も追加してみました。
変更を加えるとちゃんとリロードされます。えらい！
今回はやってないですがcssも対象のようです。

ちなみにwatch場所の指定ができるオプションはあります。

> -w, --watch-dir [watch-dir]    The directory to watch. Defaults the serving directory.

node_modulesがwatchされていたら大変だなと思っていたのですが、ちゃんとserving directoryになるとのこと。

# 終わりに

超簡単でしたね。
ちょろいウェブアプリ組むのにwebpackは面倒だしいろいろバンドラ追加したりで重くなるくらいなら、とりあえずHot reloadだけでもあれば最低限いいかって人向け。

にしてもググラビリティが悪い…
DHCPデーモンのログ


DHCPデーモンのログは、標準のログシステムに出力され、旧来ではsyslogによって/var/log/messagesに出力されていました。systemdを採用したシステムでは、syslogに代わる仕組みとしてjournaldを用いたログ管理が行われており、ログの保管場所も変更となっています（/var/run/log/journal、ただし再起動で消える。再起動後も保存するには設定が必要。）。
ただし、現時点ではRedhatなどではrsyslogも使い、同じ内容を/var/log/messagesにも反映しているため、旧来と同じようにそちらで確認することもできます。
journaldのログを管理するコマンドはjournalctlです。journalctlは、オプションを指定せずに実行すると、システムログが表示
Yarnは2022年においてきた！！yarnをやめるまでの軌跡


みなさん、JavaScriptのパッケージマネージャーは何を使っていますか？

私は以前は仕事でも個人開発でもyarnをメインで使っていたのですが、2022年5月に転職してから仕事ではnpmを使うようになりました。

それでも個人開発はわざわざnpmに移行するほどでもないと思っていたのでyarnを使い続けていました。
しかし、2022年にyarnがらみのエラーに数回遭遇し、2022年末についにyarnを卒業しました。

ちなみに個人開発ではyarn v1とv2+を使っていましたが、主にv2+で色々ハマりました。

https://yarnpkg.com/

# dependabotが使えない
yarn v2+で[Zero-Installs](https://yarnpkg.com/features/zero-installs/#gatsby-focus-wrapper)を使っていたのでcacheもコミットしていたのですが、GitHubのdependabotがcacheを更新してくれないのでdependabotが使えなりました。

その時のツイート

https://twitter.com/hamchance0215/status/1481065339580731392

# エディターに特別な設定を入れないとタイプチェックなどがうまく動かない

VS Codeなどを使っていると、自動でタイプチェックやlintをしてくれるので便利ですよね。
ただし、yarn v2+の場合は特別な設定が必要になります。

https://yarnpkg.com/getting-started/editor-sdks

私の設定の仕方が悪かっただけかもしれませんが、VS Codeで一度設定しても定期的にうまく動かなくなり、その都度再設定していたのでとても面倒でした。

# TypeScriptのバージョンをあげたらnext buildが動かなくなった

ある日、TypeScriptのバージョンをあげたらnext buildが動かなくなりました。
TypeScriptやNext.jsを中心に調査していても全然原因がわからず、結局原因はyarnでした・・・

https://twitter.com/hamchance0215/status/1502267728723595267

# Jestも動かなくなった

next buildと同じタイミングでjestも動かなくなりました。
こちらも調査を進めると、原因はyarnでした・・・

https://twitter.com/hamchance0215/status/1502664931560521728

# commitやpushが重い

Zero Installだとcacheをコミットするのでパッケージが更新された時のcommitやpushに結構時間がかかります。
これが結構ストレスでした。

https://twitter.com/hamchance0215/status/1523321412249096192

# 仕事ではnpmを使うようになったのでyarnのコマンドを忘れ始めた

仕事での開発量 > 個人開発量なので、仕事でnpmを使うようになったことでyarnの使用回数が減り、yarnではどうやるんだっけ？と考える時間が増えました。

https://twitter.com/hamchance0215/status/1593632221448937473

# npmに比べてインストールが手間

わずかな差ではあるのですが、npmはnodeをインストールすれば良いだけなのに対して、yarnはさらに一手間必要なのでインストールが面倒に感じるようになりました。

# またTypeScriptをバージョンアップしたら動かなくなった

またTypeScriptをバージョンアップしたら動かなくなりました。
yarnの移行を本気で考えました。

https://twitter.com/hamchance0215/status/1603404985500585984

# Remove yarn

年末大掃除の時期、満を持してyarnからnpmへ移行しました。
その時のプルリクです。cacheも丸ごと削除しているのですごい差分になっています。

![スクリーンショット 2023-01-05 0.05.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83424/71b96d13-fb79-5693-b79d-d8fae71912ab.png)

# 最後に

こうして私が頻繁に触るフロントエンドコードからはyarnが消えました。
yarn、今までありがとう！そして、さようなら！！！
Javascript 関係のツールまとめ(?)

# はじめに

最近趣味で少し ReactJS を触って時があるのですが、その際に Javascript 関係のツールがよくわからなかったのでざっとまとめてみた、というメモです。 もっと分かりやすくて正確な良い記事が他にも色々あると思いますが、自分用のメモということで。

# Javascript 関係のツールたち

-   node.js &#x2026; Javascript ランタイム。ブラウザから独立して動作するので、サーバーサイドや CLI ツールの実行などに使われていると思う、たぶん。
-   nvm &#x2026; node version manager, node.js のバージョン管理ツール。
-   npm &#x2026; A javascript package manager, Javascript のパッケージマネージャー
-   npx &#x2026; パッケージを実行するツール。npm と違うのはパッケージをローカルにインストールしなくてもパッケージを実行できること、らしい。 (参考記事: <https://qiita.com/sivertigo/items/622550c5d8ec991e59a6>)

# おわりに

本当に一言二言で各ツールを説明しただけの内容薄い記事になってしまったけどまとめました。
「今って令和何年だっけ・・？」は俺に任せろッ！

## 背景

『今って令和何年だっけ・・？』

「ええっと、、、待ってくださいね、、、」
（Googleで「令和　何年」っと）
「5年ですねッ！」

『あぁ、もう分かったからいいよ〜』


## 開発

現在の和暦を返すnpm cliツールを作成しました〜。

https://www.npmjs.com/package/wareki_cli

nodeが入っていれば以下のコマンドで動きます！
```bash
# return <現在の和暦/mm/dd>
npx wareki_cli
# return 平成12/1/1
npx wareki_cli 2000-01-01
```

にしてもJavaScriptすごいですね。こんなことが出来るんですね。。。

https://qiita.com/shisama/items/cb0abb5435fac82e87d6

皆さんも和暦聞かれたらコマンドで解決しちゃってください🤞
gpgでファイルの暗号と復号

## 過程：
システムBで暗号化するファイルをシステムAで復号化する：<br>
1. Aの公開鍵をエクスポート
2. Aの公開鍵をBに送る
3. 公開鍵をBにインポート
4. Bでデータファイルを公開鍵で暗号化する
5. BのデータファイルをAに送る
6. Aの私有鍵で復号化する

## gpgインストール
パッケージ管理ツールでダウンロードとインストールする可能：<br>
* Linux:<br>
```
yum install gpg
```
* ubuntu
```
apt-get install gpg
```
* MacOS:
```
brew install gpg
```

## gpgの使用
gpgのバージョンによって、オプションは違う可能性がある。操作メニューを参照してください。
```
gpg -help
```
### 鍵の作成
```
gpg --full-generate-key
```
作った鍵を表示：
```
gpg --list-secret-keys
```
### 公開鍵のエクスポート
```
gpg -a -o public.key --export [key id]
```
key idでは--list-secret-keysで調べられる(pubの行)。<br>
上の例の場合、public.keyというファイルはエクスポートした公開鍵ファイル。

### 公開鍵のインポート
まず公開鍵ファイルを目標のシステムに転送する。<br>
インポート：
```
gpg --import [PATH]/public.key 
```

### 暗号化
```
gpg -e -o [出力のファイル]　-r [ユーザー標識] [暗号化のファイル]
```
ユーザー標識は鍵を作成した時に決められ、--list-secret-keysで調べられる(uidの行)。


### 復号化
公開鍵でファイルを暗号化すると、対応の私有鍵がないと、理論上で復号化できない。
暗号化のファイルを目標のシステムに転送(公開鍵をエクスポートしたシステム)<br>
```
gpg -d -o [出力のファイル] [暗号化のファイル]
```
ここで出力されるファイルは復号するファイルです。
【備忘録】online-judge-toolsのサンプルテストをタスク自動化する【AtCoder】

# 背景

やりたいことはタイトルの通りです。
サンプルテストを*Ctrl+Shift+B* でできるようにします。

# この記事を読んで得られる知見

+ tasks.jsonの書き方がなんとなく分かる

# 環境・使用ツール

+ VSCode 1.74.2
+ OS Linux x64 5.15.0-56-generic
+ Bash .1.16(1)-release (x86_64-pc-linux-gnu)
+ python 3.10
+ atcoder-cli,online-judge-tools導入済み

:::note
atcoder-cliの導入方法は[こちら](http://tatamo.81.la/blog/2018/12/07/atcoder-cli/)から
online-judge-toolsの導入方法は[こちら](https://github.com/online-judge-tools/oj/blob/master/docs/getting-started.ja.md)
:::

## task.jsonの中身
```json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "oj t",
      "type": "shell",
      "command": "/home/{ユーザー名}/.local/bin/oj t -c 'python3 ${file}' -d ${fileDirname}/tests",

      "options": {
        "cwd": "${workspaceFolder}"
      },
      "problemMatcher": [],
      "group": {
        "kind": "build",
        "isDefault": true
      }
    }
  ]
}
```

tasks.jsonファイルは*Ctrl+Shift+B*をすると、未作成の場合は初期化してくれます。

自動化しているのは下記のコマンドです。
-cオプションの後の実行コマンドは各自使用する言語に置き換えてください。
```bash
oj t -c "python3 main.py" -d tests
```
パスの問題か、そのまま`"command"`に記載しても実行できませんでした。

下記のようにパス変数を利用してあげましょう。

:::note
${file}：実行時にアクティブなファイルのパス変数

${fileDirname}：実行時のディレクトリのパス変数

ojのパスが必要なときはwhereisコマンドなどで調べましょう！
:::

# 最後に
サンプルテストのコマンドは長くて打つの面倒ですよね。
エイリアスでもいいのですが、折角なのでタスクにしました。
精進だけでなく、快適な環境を作るのも大事ですね〜
【Mac】コマンドで文字を読み上げる方法

## `say`コマンド

`say`コマンドを使用することで文字の読み上げができます。  
以下のコマンドを実行すると`こんにちは`が読み上げられます。  

```terminal
say "こんにちは"
```

引数を渡さない場合には標準入力から取得します。  

```terminal
echo "こんにちは" | say
```

次のように実行するとファイルの内容を読み上げます。  

```terminal
$ cat sample.txt 
こんにちは

$ say -f sample.txt
```

再生速度を変更するには`-r`を使用します。  

```terminal
say -r 200 "こんにちは"
```

また読み上げる音声を変更できます。  
次のコマンドは`Kyoko`で`こんにちは`を読み上げます。  

```terminal
say -v 'Kyoko' "こんにちは"
```

使用できる音声一覧を表示するには次のコマンドを実行します。  

```terminal
$ say -v '?'
Albert              en_US    # I have a frog in my throat. No, I mean a real frog!
Alice               it_IT    # Salve, mi chiamo Alice e sono una voce italiana.
Bells               en_US    # Time flies when you are having fun.
Boing               en_US    # Spring has sprung, fall has fell, winter's here and it's colder than usual.
Bubbles             en_US    # I sure like being inside this fancy computer
Carmit              he_IL    # שלום. קוראים לי כרמית, ואני קול בשפה העברית.
Cellos              en_US    # Doo da doo da dum dee dee doodly doo dum dum dum doo da doo da doo da doo da doo da doo da doo
Damayanti           id_ID    # Halo, nama saya Damayanti. Saya berbahasa Indonesia.
Daniel              en_GB    # Hello, my name is Daniel. I am a British-English voice.
Daria               bg_BG    # Здравей, казвам се Дария и съм български глас.
Wobble              en_US    # I sure like being inside this fancy computer
Jester              en_US    # Please stop tickling me!
Ioana               ro_RO    # Bună, mă cheamă Ioana. Sunt o voce românească.
Jacques             fr_FR    # Bonjour, je m’appelle Jacques.
Joana               pt_PT    # Olá, chamo-me Joana e dou voz ao português falado em Portugal.
Junior              en_US    # My favorite food is pizza.
Kanya               th_TH    # สวัสดีค่ะ ดิฉันชื่อกันยา
Karen               en_AU    # Hello, my name is Karen. I am an Australian-English voice.
Kathy               en_US    # Isn't it nice to have a computer that will talk to you?
Kyoko (Enhanced)    ja_JP    # こんにちは! 私の名前はKyokoです。
Kyoko               ja_JP    # こんにちは、私の名前はきょうこです。日本語の音声をお届けします。

```
fsockopenとstream_socket_clientの違い【UNIXドメインソケット】

https://www.php.net/manual/ja/function.fsockopen.php

https://www.php.net/manual/ja/function.stream-socket-client.php

stream_socket_client() 関数もこれと似ていますがより豊富なオプションを持っており、 非ブロック接続をしたりストリームコンテキストを提供したりする機能があります。ジェネリックfsockopenのstream_socket_clientは、PHP5から登場しナウいのでオススメ
ペアプロあるある「記号書けるけど読めない」状態を回避するために読みにくい記号をRubyでの使用例と共にまとめてみた

## はじめに

最近ペアプロでナビゲーター役(指示役)をすることが多いのですが、普段自分がコーディングで利用している記号でも「読み方がわからずに伝えられないもの」や「相手に伝わらない言い方」があることに気付きました。

そこで、ペアプロをやる中で私が「書けるけど読めない」「相手が理解しにくい」と感じた記号についてRubyでの使用例と共に抜粋して紹介します。

## 読みにくい記号と読み方一覧

| 記号 | 主な読み方 |
|:-:|:-:|
| ()  | 丸括弧(まるかっこ)、パーレン  | 
| []  | 角括弧(すみかっこ)、ブラケット  |
| {}  | 波括弧(なみかっこ)、中括弧(ちゅうかっこ)、ブレース  |
|>|大なり|
|<|小なり|
|:|コロン|
|;|セミコロン|
|~|チルダ|
|^|キャレット、ハット|
|\\ |バックスラッシュ|
|\||縦棒、パイプ|
|*|アスタリスク|

## 使用例

### ()：丸括弧(まるかっこ)、パーレン

メソッドの宣言や呼び出し、複数の式をまとめる際に使用します。
括弧というとこちらの記号をイメージする人が多いと思うので、丸括弧と言わずに括弧と言うだけで通じることが多いです。
(私だったらパーレンなんて言われてもポカーンとしてしまう)


```ruby
# メソッドの定義
def method(argument)
 # dosomething
end

# メソッドの呼び出し
method(argument)

# 式をまとめる
a > 0 || (b > 0 && c > 0)
```


### []：角括弧(すみかっこ)、ブラケット

配列やHash(連想配列)の操作に使用します。
Rubyで配列系を扱う際は角括弧を使うと覚えておくと良いでしょう。

```ruby
# 配列を宣言する
array = [1, 2, 3]

# 配列から値を取得する
array[0]

# Hashから値を取得する
hash[key]

# Hashに値を設定する
hash[key] = value
```

### {}：波括弧(なみかっこ)、中括弧(ちゅうかっこ)、ブレース

Hashの宣言やブロックの記述、式展開に使用します。
ペアプロの際は相手がRubyの経験者であれば「Hashを宣言して〜」、「eachでループして〜」と言えば自然と使ってくれると思います。
もし伝わらない時は波みたいな括弧や吹き出しみたいな括弧と言えば伝わるかもしれません。

```ruby
# Hashの宣言
{key: value}

# ブロックの利用
array.each{|a| p a}

# 文字列の式展開
"数字は#{number}です"
```


### >：大なり

比較演算子に使用します。小なり(<)と間違えやすいので注意してください。
ペアプロでは大なり小なりを間違えることはよくありますが、間違えても逆だと伝えてあげれば済む話なので無理して覚えなくてもカバーできると思います。

```ruby
# aが0より大きい時にtrueとなる
a > 0
```

### <：小なり


比較演算子に使用します。大なり(>)と間違えやすいので注意してください。
その他にも配列の要素追加でもよく使用します。


```ruby
# aが0より小さい時にtrueとなる
a < 0

# 配列の要素追加
array << 1
```

### :：コロン

Hashの宣言や三項演算子で使用します。

```ruby
# Hashの宣言
h = {key: value}

# 三項演算子(下の例ではaが0より大きいならば1を返し、そうでないなら0を返します)
if a > 0 ? 1 : 0
```

### ;：セミコロン

改行を入れたい際に使用します。

```ruby
# ブロックの中で改行をしている
array.each{|a| a += 1; p a}
```

ただし、実際にプログラムを書く際は普通に改行をしてあげたほうが可読性が高いことが多いので、個人的には上の例のような書き方をすることはあまりないかな〜と思いました。


### ~：チルダ

正規表現のマッチングで使用します。
ペアプロで通じない時はニョロニョロとか波とか言えば気合いで通じそうな気もします！笑

```ruby
# 文字列内のabcのマッチ位置を取得する
/abc/ =~ string
```

### ^：キャレット、ハット

正規表現で先頭にマッチしたい際に使用します。
ニコニコした顔文字「^-^」の目の部分ですね。

```ruby
# 文字列の先頭がabcにマッチするか判定する
/^abc/.match?(string)
```

ちなみに上の例では`start_with?`というメソッドを利用することでキャレットを使わない実装を行うことも可能です。うまく伝わらない場合はそういった代替案を使うのも手ですね。

### \：バックスラッシュ

文字列のエスケープで使用します。
バックスラッシュですが、記号は通じても初心者の場合はタイピングできないことがあるかもしれません。macの場合はoptionキーを押しながら、¥キーを押すと入力できます。

```ruby
# 文字列の中にダブルクォーテーションを含める
puts "I say \"Hello!\""
```

### |：縦棒、パイプ

or演算子や自己代入、ブロック変数（ブロックパラメータ）の区切りで使用します。


```ruby
# or 演算子
a > 0 || b > 0

#　ブロック変数(i)の区切り
5.times{|i| p i}
```

### *：アスタリスク

掛け算や正規表現の繰り返しで使用します。
私はアスタと省略して呼んでいますが結構通じます。


```ruby
# 掛け算
2 * 3

# 正規表現
/ab*c/.match?(string)
```

## おわりに

普段プログラムで書いている記号でも意外と読めない記号ってあるものですね。
日本人であれば一度は感じたことがある「漢字読めるけど書けない」現象と似ていて面白いと感じました。

特にリモートワークでのペアプロとなると対面のようにジェスチャーを使って記号を伝えることができないので、言葉だけで意思疎通ができるように気を遣う必要があります。
そこで、ペアプロ前に一度記号や用語について擦り合わせを行っておくとスムーズに意思疎通ができると思いました。

また、プログラミング初心者の方は記号と実装のイメージができていないと思うので、「この記号はこういう時に使う」ということを事前にインプットしておくとペアプロがやりやすくなると思います。
反対に経験者の方であれば記号は読めなくてもプログラムの目的を伝えることでうまくいくかもしれませんね。

お互いの経験に合わせてやり易い方法を模索するのもペアプロの楽しみだと実感しました。
Docker + Wordpressでテーマ・プラグイン開発用のローカル環境を構築する。

Wordpressのローカル環境を用意するのは [Local](https://localwp.com/) を利用したり、いくつか方法があるが、
色々試してみた結果、その中で一番簡単なのはDockerで構築する方法が一番簡単だと思っている。

手っ取り早く使いたければこちら。

https://github.com/niku-usagi-chan/docker-wordpress

## メリット
 * エディタでプラグインやテーマのファイルを開いてそのまま編集したい
 * Git管理したい

など。

[docs.docker.jp](https://docs.docker.jp/compose/wordpress.html) にもdocker-composeの内容が記載されているが、
localhostだと、テーマファイルエディタなどは使えないので、



このままだとエディタで編集した内容が反映されないので、下記の2つをしてあげる必要がある。

 * プラグインやテーマのファイルをマウントしてあげる。
 * working directoryを指定してあげる。

```
/
├ themes/
├ plugins/
└ docker-compose.yml
```

のようなディレクトリ構造にし、themesとpluginsを、
コンテナ内にマウントしてあげる。

Working directory は `/var/www/html/` を指定してあげる。

以下の内容になる。

```docker-compose.yml
version: '3'

services:
  db:
    image: mysql:5.7
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: somewordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress

  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    ports:
      - "8000:80"
    restart: always
    working_dir: /var/www/html/
    volumes:
      - ./themes:/var/www/html/wp-content/themes
      - ./plugins:/var/www/html/wp-content/plugins
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
volumes:
  db_data:
```

## 参考
 * [クィックスタート: Compose と WordPress — Docker-docs-ja 20.10 ドキュメント](https://docs.docker.jp/compose/wordpress.html)
AWS DataSyncとAzure File Sync 比較 ～前提条件定義編～

あけましておめでとうございます。
本年もよろしくお願いします。
新年一本目の記事です。

AWS DataSync(以下、DataSync)と Azure File Sync(以下、File Sync)シリーズの2本目の記事です。
1本目は記事はこちら
[AWS DataSyncとAzure File Sync 比較 ～共通点と相違点～](https://qiita.com/hidekko/items/9610ef551999f6ea1f37)

前回の記事ではDataSyncとFile Syncの共通点と相違点についてまとめました。
結果、**<font color="Orange">DataSyncはクラウド(AWS)へのデータ移行専用ツール</font>、<font color="Blue">File Syncはクラウド(Azure)へのデータ移行のみならず、Azureとオンプレミス両方を使ったハイブリッド環境での利用も想定したサービスである</font>**、と結論付けました。
分かりやすいかと思いAWS、Azure、それぞれのサービスのイメージカラーで文字を色付けしてみました。
それでは次に構築方法を比較してみたいのですが、その前にまずは本記事で前提条件を確認しましょう。

# 想定利用ユーザ既存環境
AWS WorkSpacesとAzure Virtual Desktopの比較記事の時のように、サービスを比較する想定ユーザの既存環境を設定します。
今回もエンタープライズユーザへの導入を想定したいので、
1. Active Directoryが既に導入済みである
1. ファイルサーバがWindowsで構築されており、ファイルサーバ内の共有フォルダはネットワーク共有とNTFSアクセス権が付与されている

この2点を想定利用ユーザの既存環境としてDataSyncとFile Syncを比較していきます。
当然この2点は構築後の動作確認でも検証していきます。

# 構築の条件
DataSyncもFile Syncもデータを同期させるサービスであり、実際にデータを保持するための格納先はDataSyncもFile Syncも共にストレージサービスが必須になります。
AWSであれば以下の3つがストレージサービスとして挙げられます。
1. S3
1. Amazon EFS
1. FSx for Windows File Server

Azureであれば以下の3つがストレージサービスとして挙げられます。
1. Blob Storage
1. Azure Data Lake Gen2(ADLS Gen2)
1. Azure Files

今回は想定利用ユーザ既存環境の項目でも記載したようにNTFSアクセス権が設定できなければならないため、<font color="Orange">**AWSであればFSx for Windows File Server**</font>、<font color="Blue">**AzureであればAzure Files**</font>をストレージサービスとして選択します。
AWSもAzureも他のサービスでNTFSアクセス権の設定できるサービスとしてNetAppが存在します。
NetAppでしか満たすことのできない大容量やIOPSを要求される場合も当然エンタープライズユーザではあり得ますが、**毎回検証を自腹で行っているため<font color="Red">デプロイするだけで高額な費用の掛かるNetApp系のサービスは検証の対象外とします。</font>**
<font color="Red">どなたかご寄付頂ければ検証します。</font>
S3もBlob StorageもオブジェクトストレージなのでNTFSアクセス権に対応しておらず、Amazon EFSはNFSでの共有なのでLinuxでのファイル共有、POSIXに対応していますが裏を返せばNTFSアクセス権には対応しておらず、ADLS Gen2はBlob Storageの拡張版なのでNTFSアクセス権には対応していません。
S3、Blob Storage、ADLS Gen2はIAMでのデータアクセス権限の制御は可能ですが、これもNTFSアクセス権とは全く別です。
これらのサービスもそれぞれ比較してみるのも面白いと思いますが、結構深そうなのでここではなく別の比較シリーズ記事として掲載できればと考えております。

結論的には繰り返しになりますが記載しておくと、AWSはFSx for Windows File Server、AzureであればAzure Filesをストレージサービスとして選択します。
せっかくなので表にしましょう。

|パブリッククラウド|データ移行サービス|ストレージサービス|
|:---:|:---:|:---:|
|<font color="Orange">AWS|<font color="Orange">DataSync|<font color="Orange">FSx for Windows File Server|
|<font color="Blue">Azure|<font color="Blue">File Sync|<font color="Blue">Azure Files|

**また前提条件としてはFSx for Windows File ServerとAzure Filesは構築済みとしますので、これらの構築手順は割愛します。**

追加で既存のファイルサーバのフォルダ構成について言及しておきます。
これはまぁ組織に拠るんですが、今回は以下の図のようなフォルダ構成を考えました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643392/a7328df1-e9c2-fe95-d040-31b2402e10a2.png)
ファイルサーバにアクセスすると各事業部単位でフォルダが出てきてそれぞれの事業部単位でNTFSアクセス権が設定されていて、A事業部のユーザは01_A_Divisionのフォルダにしかアクセスできず、B事業部のフォルダである02_B_Divisionフォルダにはアクセスできない、という設定です。

本日は仕事始めで、当然業務終了後から本記事を執筆しているので体力的にかなり厳しいです。
明日もお仕事ですし、少し短いですが本年一本目の記事はここまで。
クラスの分割とAPIの活用

# はじめに
今回はインプレス社が出版しているスッキリわかるjava入門についての練習問題を説明し、クラスの分割とAPIについての個人的な解釈を記述します。今回は第６章の練習問題を参照して、先生と生徒の対話を作り出します。


# 動作環境

- Window 11
- Java SE 11

# ソースコード
```java
package comment;

public class Main{
	
	public static void main(String[] args) throws Exception {

		Student.problem();
		Teacher.solution();
		Student.worries();
		Teacher.encouragement();

	}

}



```
```java
package comment;

public class Student {
	public static void problem() {
		System.out.println("生徒：社会の勉強ってどうすればいいんですか？");
	}
	public static void worries() {
		System.out.println("生徒：そうなんです。覚えればいいってことは分かるんですけど、どうしても集中できないんです。");
	}
	public static void think() {
		System.out.println("生徒：わかりました。ありがとうございます。");
	}
}
```
```java
package comment;

public class Teacher {

	public static void solution() {
		System.out.println("先生：教科書の中の大切なところをノートに写して憶えるといいよ。");
	}

	public static void encouragement() throws InterruptedException {
		System.out.println("先生：それがわかっていれば、あとはやる気の問題だと思うよ。");
		System.out.println("先生：自分を信じて");
		Thread.sleep(5000);
		Student.think();
	}
}

```
# 実行結果
```
生徒：社会の勉強ってどうすればいいんですか？
先生：教科書の中の大切なところをノートに写して憶えるといいよ。
生徒：そうなんです。覚えればいいってことは分かるんですけど、どうしても集中できないんです。
先生：それがわかっていれば、あとはやる気の問題だと思うよ。
先生：自分を信じて
（５秒後）
生徒：わかりました。ありがとうございます。
```

# まとめ
- 複数のクラスに分けて記述することには開発を分担し、それぞれが並行して開発することができます。今回の練習は３クラスに分けて整理します。
- main()から呼び出す際にはStudentのproblem()やTeacherのsolution()のように、明確に示す必要があります。
- クラスThreadにはたくさんのメソッドが存在していますが、今回は現在実行中のスレッドを５秒にスリープするだけです。
- スリープを実行した後、encouragement()の中にStudentのメソッドを書き忘れないよう注意してください。
- mainクラスはStudent.think()を呼び出さないように注意してください。

# 参考サイト
-『スッキリわかるjava入門（第３版）』P224～P267｜株式会社インプレス（中山清喬/国本大悟　著）
-　[java.lang.Thread](https://docs.oracle.com/javase/jp/11/docs/api/java.base/java/lang/Thread.html#sleep(long,int))
PowerPointで化学イラスト作成：ビーカー（図形の結合; 頂点の編集）

# 概要
化学関連の発表資料用に作図をしたいという方向けに
PowerPointを使った化学イラストの作成方法を紹介していきます

今回は「ビーカー」の作成です。
主に使う機能は、「図形の結合」と「頂点の編集」です。

完成イメージは以下の通り
<img alt="投稿画像_ビーカー完成図.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/753878/2325ee07-bbc2-ec0a-f5a3-a3be36d86ffc.png" width="30%">

# 作成法概略
![投稿画像_作成方法概略.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/753878/88701df6-4301-d97d-6a0d-772d905c3b14.png)

# 各パーツの作成法詳細
### **パーツ①：下側のみ丸い四角**
- 「四角形：角を丸くする」および「正方形/長方形」を挿入
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/753878/3b244451-9527-51bf-deed-70b78c0680ff.png)
- `Ctrl`キーを押しながら「四角形：角を丸くする」⇒「正方形/長方形」の順に選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/753878/cef5eaa8-76c3-4bb3-f4d8-078feb693381.png)
- 「図形の書式」⇒「図形の結合/単純型抜き」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/753878/e0f40929-824f-f500-7d32-55bc0152b275.png)
- 完成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/753878/8b035e17-03ba-ab4c-0d8b-9b9915bd8845.png)

### パーツ②：角の丸い台形
- 「台形」を挿入
- 「台形」を選択した状態で「図形の書式」⇒「頂点の編集」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/753878/8b166df2-68d3-2070-b109-42b16ad6159e.png)
- 頂点に現れる■をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/753878/61b9822a-d1f7-c1dc-46c0-889709d55d6c.png)
- `Shift`キーを押しながら□をクリック（形を調整したい場合はそのままドラッグ）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/753878/40b6ddcd-243a-573b-686c-6cff3124712c.png)
- もう一つの角でも同様の操作をして完成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/753878/0db25b95-d7c0-7bc1-12eb-1fc7382b545a.png)

### パーツ③：フラスコ（①＋②）
- パーツ①とパーツ②を重ねる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/753878/cc07e76d-42f6-f9d7-9448-e25cb13ed8da.png)
- 二つのパーツを選択した状態で「図形の書式」⇒「図形の結合/接合」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/753878/f5bacee0-1573-e493-abe9-399d417ae8f4.png)
- 完成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/753878/78140b54-4329-e567-6827-7aecdb72341b.png)

# あとがき
初投稿のため見苦しい点が多いかと思いますが、何かの役に立てば幸いです。
少しずつ難易度の高い作図を投稿していきたと思います。
ご要望等あればぜひお願いします。
composer.lockを.gitignoreに追加しないで

https://getcomposer.org/doc/01-basic-usage.md#commit-your-composer-lock-file-to-version-control

# `composer.lock`ファイルをバージョン管理にコミットする
このファイルをバージョン管理にコミットすることは重要です。なぜなら、プロジェクトをセットアップする人が、あなたが使用している依存関係とまったく同じバージョンを使用することになるからです。CI サーバー、運用マシン、チーム内の他の開発者など、すべての人が同じ依存関係で実行されるため、展開の一部にのみ影響するバグの可能性が軽減されます。単独で開発した場合でも、6 か月後にプロジェクトを再インストールすると、依存関係がその後多くの新しいバージョンをリリースしたとしても、インストールされた依存関係がまだ機能していると確信できます。(コマンドの使用については、以下の注を参照してください`update`。)

:::note info
ライブラリの場合、ロックファイルをコミットする必要はありません。
[ライブラリ - ロックファイル](https://getcomposer.org/doc/02-libraries.md#lock-file)も参照してください。
:::
Leetcode 290. Word Pattern

https://leetcode.com/problems/word-pattern/description/

## 難易度
### Easy

## アプローチ
### Brute-force

```java
class Solution {
    public boolean wordPattern(String pattern, String s) {
        HashMap<Character, String> map = new HashMap<>();
        String[] arg = s.split(" ");
        int length =  pattern.length();
        if(arg.length != length){
            return false;
        }
        
        for (int i = 0; i < length; i++) {
            char p = pattern.charAt(i);
            if (map.containsKey(p)) {
                String value = map.get(p);
                if (!arg[i].equals(value)) {
                    return false;
                }
            } else {
                if(map.containsValue(arg[i])){
                    return false;
                }
                map.put(p, arg[i]);
            }
        }
        return true;
    }
}
```
Zig言語でAppKitのコードをフルスクラッチで書くのはかなり骨が折れそうだと思った件

冬休みの自由研究に AppKitを`C言語`でフルスクラッチ記述している [jimon/osx_app_in_plain_c](https://github.com/jimon/osx_app_in_plain_c) をzig言語で写経してたのですが、ハマりどころをメモとして残しておきます。

## 事象

`Objective-C`のメッセージ送信は最終的に`objc/message.h`で宣言されている`objc_msgSend`に行き着くが、このプロトタイプ宣言が

```c
void objc_msgSend(void);
```

であり、使用用途に応じて関数ポインタを型キャストして使用してねというスタンスの模様。

例えば、NSWindowのインスタンス化なら、

```c
id objc_msgSend(id, SEL, NSRect, NSUInteger, NSUInteger, BOOL) {

}
```

となる。

これならzigのcomptime活かせそうだと思い、comptimeな展開結果を意識して

```zig
fn new_window_msgSend(self: id, selector: SEL, arg1: NSRect, arg2: NSUInteger, arg3: NSUInteger, arg4: BOOL) id {
    const FuncType = fn (@TypeOf(self), @TypeOf(selector), @TypeOf(arg1), @TypeOf(arg2), @TypeOf(arg3), @TypeOf(arg4)) callconv(.C) id;

    var func = @ptrCast(FuncType, objc_msgSend);

    return @call(.{}, func .{ id, selector, rect, arg1, arg2, arg3, arg4 });
}
```

としたところ、なぜかウインドウが表示されない・・・。

また

```
2023-01-04 22:00:28.375 osx_app_in_plain_ziglang[52798:1855657] NSWindow does not support nonactivating panel styleMask 0x80
2023-01-04 22:00:28.375 osx_app_in_plain_ziglang[52798:1855657] NSWindow does not support utility styleMask 0x10
```

なログが実行時に表示される始末。

## 原因

`zig言語`では最適化の兼ね合いでstructを引数に渡す場合、参照渡しにするというのがあり。
ここにモロに引っかかった模様

https://ziglang.org/documentation/master/#Pass-by-value-Parameters

## 対処

comptimeの道を諦め、`C言語`で

```c
id new_window_msgSend(id alloc, SEL selector, NSRect rect, NSUInteger styleMask, NSUInteger backing, BOOL defer) {
	return ((id (*)(id, SEL, NSRect, NSUInteger, NSUInteger, BOOL))objc_msgSend)(alloc, selector, rect, styleMask, backing, defer);
}
```

を用意しておいた上で、

`zig言語`からが`extern関数`で参照するという泥臭い方法をとった。

```zig
extern "C" fn new_window_msgSend(self: id, selector: SEL, arg1: NSRect, arg2: NSUInteger, arg3: NSUInteger, arg4: BOOL) id;
```

`extern関数`であれば、`C ABI`が採用されるためうまくいった模様。

## レポジトリ

写経結果は、

https://github.com/ritalin/osx_app_in_plain_ziglang

に残しておいた。

コメントほとんど書いていないので読めた代物ではないが、`zig言語`での`Binding`の足がかり程度に見て貰えば幸いである。

あと、`Application Bundle`のために作ったbuild taskは有用かも。

### 2023/01/18 追記

以下のissueですでに報告され、修正が`master`ブランチにはすでに取り込まれている模様。

https://github.com/ziglang/zig/issues/13597

現時点のstableである`0.10.0`にはまだ反映されていないが、2023/01/18付で公開された`master`のプリビルド[^1]で反映されていることを確認した。

[^1]:もしかしてNightly Buildで毎日公開されてる？
Stripe で銀行振込のサブスクリプションを実装する際の注意点


# Stripeで銀行振込のサブスクリプションを実装する際の注意点

## 参照記事
https://qiita.com/hideokamoto/items/e03984b982574ab01c31#サブスクリプションを作成するコード

## 結局のところ
銀行振込でサブスクリプションを始めるのは、様々な状況を想定した上で実装する必要がある

## 銀行振込のサブスクを申し込みを受け付けるときに利用できないstripeの機能
1, 支払いリンクによる申し込み受付 (ダッシュボードから3回くらいクリックするとできるやつ)
2, クリエイトセッションでの受付 (checkout->sessions->create でできるやつ)

どちらのUIも綺麗で、実装の手間も少ないものですが、どちらも銀行振込のサブスクでは現時点では利用できません。
そのため他の方法で申し込みを受け付ける必要が発生します。

＊クリエイトセッションの場合、1回払い (mode=payment)の場合は利用できます。
##### 参考記事
https://qiita.com/hideokamoto/items/d6b583724abf5ae74169

## サブスクリプションで銀行振込を開始する場合
1, サブスクリプションを作成する
```$stripe->subscriptions->create```
2, 作成したサブスクリプションからインボイスが作成されるので、インボイスをファイナライズする(メールも送信されます)
```$useInvoice = $stripe->invoices->finalizeInvoice('in_')```
3, ファイナライズしたインボイスから、支払い情報が表示できるURLが取得できるので、該当ページに遷移する
```header("Location: " . $useInvoice->hosted_invoice_url)```
もしくは、支払い情報を取得してオリジナルのページを作成する
```$stripe->customers->createFundingInstructions('cus_',[])```
#### この時点で作成したサブスクリプションは有効、インボイスはオープンのステータスです


## webhookでインボイスのステータス管理を行う
##### 下記については、webhookで各種準備する必要がありそうなものです。

##### 1回目の請求書
1-1, 入金された場合、サービスを提供できるようにする (申込段階では未払いのため)
1-2, 未入金のままの場合は、サブスクリプションのステータスを無効化にする
1-3, 過払いの場合は、スタッフによるフォローが行えるようにする

##### 2回目以降の請求書
2-1, 請求書が送信された後に、未入金の場合は、催促のメールを送信するようにする
2-2, それでも未入金の場合は、サブスクリプションのステータスを無効化する
2-3, 過払いがあった場合は、スタッフによるフォローが行えるようにする

銀行振込のサブスクを一言で実装すると言っても、顧客側がアクションを起こして支払いをおこなうため、
様々なことを考慮する必要があります。
手動の銀行振込と比べて、入金管理がなくなる分、考えなければならないシチュエーションも多いなぁ！！

## ちなみに、、
振込手数料を気にされるお客様から、まとめて多めに支払うたいという要望も上がりそうですが (過払い)、stripeの残高として保持できる期間(日本では 60 日間)が決まっています。
そのため、月額1万円のサービスを提供したときに、まとめて5ヶ月分 (5万円) 一括で払うよ！ってなっても、時期が来たらstripeから返金手続きが始まります。
別途、年払いや半年払いのサービスを準備する必要がありそうです。
GodotにてIIS上にhtml5エクスポートしたファイルを配置した際に"Failed loading file 'index.pck'"エラーが発生したときの対処法

# 遭遇した事象
GodotにてHTML5エクスポートしたファイルをWebサーバ(IIS)上に配置してアクセスしたら、"Failed loading file 'index.pck': Not Found"のエラーが発生し、エクスポートしたゲームがプレイできない。

↓このような感じでエラーが発生してしまう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354808/a5b25531-223b-6f9b-4d8d-13731c4a3d56.png)

# 対応手順
.pckファイルのMIMEタイプの設定がされていないことが原因。  
設定を行うことで対応できる。
具体的には、.pckファイルのMIMEタイプに"application/octet-stream"を設定する。  
対応手順は以下の通り。

1. "MIMEの種類"の設定を開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354808/ba979ade-5fc8-1fa0-b17d-e56c23a71e8e.png)

2. 右側の"追加"をクリックし、.pckファイルのMIMEタイプを追加。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354808/d0561821-a875-0f8a-dfd6-5a2e7d2edbb7.png)

3. この操作の後にエラー発生したURLに改めてアクセスする。
 →エラーが解消している。　　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/354808/c8036405-6103-78d4-0953-c2bd309e9bdd.png)


# 参考URL
["Failed loading file 'index.pck': Not Found" Error HTML5 export : godot](https://www.reddit.com/r/godot/comments/ox3j52/failed_loading_file_indexpck_not_found_error/)
Leetcode 520. Detect Capital

https://leetcode.com/problems/detect-capital/description/

## 難易度
### Easy

## アプローチ
### Brute-Force

```java
class Solution {
    public boolean detectCapitalUse(String word) {
        boolean check = false;
        for (char a : word.toCharArray()) {
            if (65 <= a && a <= 90) {
                check = true;
            } else {
                check = false;
                break;
            }
        }
        if (check) {
            return true;
        }

        for (char a : word.toCharArray()) {
            if (97 <= a && a <= 122) {
                check = true;
            } else {
                check = false;
                break;
            }
        }

        if (check) {
            return true;
        }

        int index = 0;

        for (char a : word.toCharArray()) {
            if (index == 0 && 65 <= a && a <= 90) {
                check = true;
            } else {
                if(65 <= a && a <= 90){
                    check = false;
                    break;
                }

            }
            index++;
        }

        return check;
    }
}
```
Railsのcolumn名の変更

Railsのカラム名を間違ってmigrateしてしまったので修正方法を書いておきます。
自分の理解度を高めるためのアウトプットです。

//誤りの記述
rails g model User nam:string age:integer 
カラム名をnameにしたかったがnamにしていた。

db:migrateの前に修正すればよかったが、気づかずmigrateしてしまった。

なので以下の処理を実施
1.migrationファイルを作成
$ rails generate migration rename_[変更前のカラム名]_column_to_[モデル名(複数形)]

2.migrationファイルを編集
生成されたファイルにchangeメソッドを追加し、そこに変更したいカラム名を記述する。
rename_column :テーブル名, :変更前のカラム名, :変更後のカラム名

class RenameNamColumnToUsers < ActiveRecord::Migration[7.0]
  def change
    rename_column :users, :nam, :name
  end
end

3.DBに反映
rails db:migrate

4.DBに反映されているか確認
$ rails dbconsole
$ .schema users(テーブル名)

("id" integer NOT NULL PRIMARY KEY, "name" varchar DEFAULT NULL, "age" integer DEFAULT NULL, "created_at" datetime(6) NOT NULL, "updated_at" datetime(6) NOT NULL);

nameに変更されていたので完了。

参考にした記事
https://qiita.com/libertyu/items/93acd8733e34b1d0a63c


model名も間違って作成したので以下の記事を参考に修正しました。
https://qiita.com/naitya0412/items/b6f6ef89f7b60309d5b1
【PHP】配列をjson_encodeするとlistじゃなくてobjectになる

# 結論

配列を操作した後にjson_encodeするときはindexを詰めてから行おう！

:::note alert
ダメなパターン
json_encodeした結果listではなくObjectになっている
:::

```php
$array = array(1,2,3,3,3,4);

配列を操作...

echo $array; 
// -> array(1,2,4)

echo json_encode($array);
// -> {"0":1,"1":2,"5":4}
```

:::note info
いいパターン
json_encodeした結果listのまま
:::

```php
$array = array(1,2,3,3,3,4);

配列を操作...

echo $array; 
// -> array(1,2,4)

// indexを詰める
$array = array_values($array);

echo json_encode($array);
// -> [1,2,4]
```

# array_valuesでやってること

> array_values() は、配列 array から全ての値を取り出し、数値添字をつけた配列を返します。

[PHPマニュアルより](https://www.php.net/manual/ja/function.array-values.php)

つまり、配列でも連想配列でもvalueのみを取り出し、数値添字のkeyを付け直しているって感じになる。
なので、以下のようにkeyがもともとある連想配列も消し去ることもできる。

```php
$ar = array(
    'hoge'=> 0,
    'fuga'=> 1,
    'temp'=> 2
);

echo print_r($ar, true). "\n";
/*
->Array
(
    [hoge] => 0
    [fuga] => 1
    [temp] => 2
)
*/

echo print_r(json_encode($ar), true). "\n";
// -> {"hoge":0,"fuga":1,"temp":2}

// indexを詰める
$ar = array_values($ar);

echo print_r($ar, true). "\n";
/*
->Array
(
    [0] => 0
    [1] => 1
    [2] => 2
)
*/

echo print_r(json_encode($ar), true). "\n";
// -> [0,1,2]
```


# 実際に使ったパターン

以下の手順で操作を行なった時にindex詰める作業をしないとjson_encodeで変換した時にObjectの文字列に変換されてしまう

1. 配列を定義する
1. 配列の特定の値を削除する(今回は3を削除)
1. indexを詰める
1. 配列をjson_encodeで文字列に変換する


```php

// step1 配列を定義する
$array = array(1,2,3,3,3,4);

// step2 配列の特定の値を削除する
foreach($array as $key => $value) {
    if($value == 3) {
        unset($array[$key]);
    }
}

// step3 indexを詰める
$array = array_values($array);

// step4 配列をjson_encodeで文字列に変換する
$tmp = json_encode($array);

// indexを詰めない場合
//     $tmp -> {"0":1,"1":2,"5":4}
// indexを詰めた場合
//     $tmp -> [1,2,4]

```

# 最後に

PHPも歴が浅く、記事も書き慣れてないので至らぬとこがあったらすんません。。。
Next.js(React) – sleepを実装するには setInterval と clearInterval を使えば良いようだ 

# コード例

1秒単位で現在時刻を書き換えてみる

`Example.tsx`

```js
import {useState, useEffect} from 'react'

const Sleep = () => {
  const [data, setData] = useState("");

  useEffect(() => {
    const interval = setInterval(() => {
      setData(Date().toLocaleString());
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return data ? <div>{data}</div> : <div>Loading...</div>;
}

export default Sleep;
```

ちなみに `clearInterval(interval)` を消すと1ループあたり2回処理されてしまう模様

# 動作例

1秒ごとに現在時刻が更新されていくのが分かる

![image](https://user-images.githubusercontent.com/13635059/210559772-8659cedc-0e4d-4e64-8229-1615c452a5e2.png)
![image](https://user-images.githubusercontent.com/13635059/210559786-645b48ae-d7b7-43a5-b8ca-024b2c004026.png)

# 環境

next@13.1.1


# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# Twitter

https://twitter.com/YumaInaura
突然始めるFlutter環境構築〜モバイル向け〜

# 動機
AndroidもiOSにも対応したアプリが作りたいなと思いまして。

# この記事の内容
1. Flutterを導入する
2. Android Studioを導入する
3. Xcodeを導入する
4. Android StudioでiOSシミュレータを起動する
5. デバッグ実行

# 環境
PC：MacBook pro(2017)
OS：Monterey

# 参考

https://qiita.com/akatsukaha/items/3b8a5a6d94a3cdb1e047

https://zenn.dev/kboy/books/ca6a9c93fd23f3/viewer/5232dc


# Flutter導入
ここはシンプルに公式が一番。

https://docs.flutter.dev/get-started/install

# Android Studioを導入する
これらを参考に。
導入後、PluginからFlutterとDartを別途インストール

https://developer.android.com/studio/install?hl=ja

https://akira-watson.com/android/adt-mac.html

# Xcodeをインストールする
App storeからのインストールが楽と思われる。

https://apps.apple.com/jp/app/xcode/id497799835?mt=12

# Android StudioでiOSシミュレータを起動する。

Android Studioの画面上部の実行Device一覧から「Open iOS Simulator」を選択

もしiOSデバイスが認識されなかったら↓

https://qiita.com/MaSaMuNe_68/items/8605a80972c805c83d1f

# デバッグ実行
緑色の三角ボタン（再生ボタン）を押すと、選択したDevice上でデバッグ（実行）が開始される。

# おわりに

以上です。
引っかかったのはiOSデバイスが認識されなかったところです。
PHPerが学ぶPython① 変数・配列・タプル

hi！豚野郎です。
明けましておめでとうございます。

Pythonの基礎の書物を1冊読んだので、解説していきます。
変数・配列・タプルの説明だけで記事1つ書けそうだったので、その説明からしていきます。

<font color="Red">※ 注意：内容はPHPか何かの言語を書いたことがある方向けなので、
説明を割愛している箇所は多々ありますので、ご了承ください。</font>

**バージョン：3.9.1**

# 1. 変数
※ 注意点は先頭1文字目に数字を使えないことです。
- NG
```test.py
# コメント
1test = 1

print(1test)
```
```
$ python test.py
File "パス/test.py", line 2
    1test = 1
     ^
SyntaxError: invalid syntax
```
数値の代入
```test.py
# コメント
test = 1

print(test)
```
```
$ python test.py
1
```
文字列の代入(シングルクォーテーションでも可)
```test.py
# コメント
test = "テスト"

print(test)
```
```
$ python test.py
テスト
```
- 演算子
計算時
```test.py
# コメント
test = 1 + 2

print(test)
```
```
$ python test.py
3
```
```test.py
# コメント
test = 1
test += 2

print(test)
```
```
$ python test.py
3
```
文字列を繋げる時
```test.py
# コメント
test = "テスト1" + "テスト2"

print(test)
```
```
$ python test.py
テスト1テスト2
```
```test.py
# コメント
test = "テスト1"
test += "テスト2"

print(test)
```
```
$ python test.py
テスト1テスト2
```
文字列を複数回繋げる
```test.py
# コメント
test = "テスト" * 3

print(test)
```
```
$ python test.py
テストテストテスト
```

# 2. 配列
```listTest.py
# 配列
list = ['one', 'two', 'three']

print(list[1])
```
```
$ python listTest.py
two
```
2から3番目の値出力。
[始点の添字:終点の添字+1]
```listTest.py
# 配列
list = ['one', 'two', 'three']

# two three
print(list[1:3])
```
```
$ python listTest.py
['two', 'three']
```
後ろから2番目以降を出力
```listTest.py
# 配列
list = ['one', 'two', 'three']

# two three
print(list[-2:])
```
```
$ python listTest.py
['two', 'three']
```
連想配列
```listTest.py
# 配列
list = {'one':1, 'two':2, 'three':3}

# 2
print(list['two'])
```
```
$ python listTest.py
2
```


# 3. タプル
配列とタプルの違いは、内容を変更できないことです。
```tupleTest.py
# タプル
tuple = ('one', 'two', 'three')

print(tuple[1])
```
```
$ python tupleTest.py
two
```
- 内容変更時(NG)
```tupleTest.py
tuple = ('one', 'two', 'three')

tuple[1] = 'NG'

print(tuple[1])
```
```
$ python tupleTest.py
Traceback (most recent call last):
  File "パス/tupleTest.py", line 3, in <module>
    tuple[1] = 'NG'
TypeError: 'tuple' object does not support item assignment
```


# 感想
今のところはPHPがわかれば、理解は容易ですね。