OmniAICreator/Qiita-1.07M huggingface dataset:
RetroPie をピクセルパーフェクト環境に

#ドット絵を正しく美しく

RetroPieにてNESやSNESをいわゆるピクセルパーフェクトで描画する設定の紹介です。
![mappy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/268041/b36df4f6-7a7f-198a-3d46-de52cfa3b808.png)
レトロパイの初期設定では、アスペクト比がファミコン画面の縦横比とは異なるため、ドットバイドットが維持されず、当時のドット絵の美が正しく再現されない残念な状態になってしまいます。そう、例えば１ピクセルが部分的に２画素で描かれたりするのです。これをファミコンとスーファミに合うよう設定変更します。

```/opt/retropie/configs/all/retroarch.cfg
# アスペクト比を 8:7 (256:224) に
aspect_ratio_index = "15"

# 拡大は整数倍で
video_scale_integer = "true"

# 画面端にできる隙間を許容
video_crop_overscan = "false"

# スクショは無加工のまま
video_gpu_screenshot = false
```

変更点のみ抜粋しています。RaspberryPi Zero W を家庭用TVに接続して確認しました。

`aspect_ratio_index`の`15`番が`8:7`を示す点については、ゲームプレイ中に`[HOTKEY]+[X]`で開くメニューから`Settings > Video > Scaling > Aspect Ratio`を開くと、どの比率が何番目なのかを知ることができるので、ファミコン以外のコンソールにも対応できます。その場合は`/opt/retropie/configs/(対象コンソール)/retroarch.cfg`を編集する方が良いかもしれません。
Zoomをミュートする物理ボタンを作る

Zoomのマイクミュートの切り替えがめんどくさい&今ミュートなのか不安になるので、
物理的に切替可能で、見た目にもわかりやすいボタンをATOM Matrixで作りました。

※仕組みはただのショートカットキーなので、切り替えられるか&本当に今ミュートかどうかは保証できません
## できたもの
![movie.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208118/09be50d4-ccb9-8c6f-9019-58abfdb16c93.gif)

## ソース

```cpp:Arduino:Hoge.ino
#include "M5Atom.h"
#include <FastLED.h>
#include <BleKeyboard.h>

#define NUM_LEDS 25

#define LED_PIN 27

CRGB leds[NUM_LEDS];
BleKeyboard bleKeyboard("MUTE BUTTON");

const uint8_t cmd[] = {KEY_LEFT_SHIFT, KEY_RIGHT_GUI, 'a'};
bool isMute = true;

void sendCmd(){
    int length = sizeof cmd / sizeof cmd[0];
    for (int index = 0; index < length; index++) {
        bleKeyboard.press(cmd[index]);
    }
    delay(100);
    bleKeyboard.releaseAll();
}

void setColor(CRGB c){
    CRGB converted = CRGB(c.g, c.r, c.b);
    for (int index = 0; index < NUM_LEDS; index++){
        leds[index] = converted;
    }
    FastLED.show();
}

void setup() {
    M5.begin(true, false, true);
    bleKeyboard.begin();

    FastLED.addLeds<WS2812, LED_PIN>(leds, NUM_LEDS);
    FastLED.setBrightness(15);
}

void loop() {
    M5.update();
    if(bleKeyboard.isConnected()){
        if(M5.Btn.wasPressed()){
            sendCmd();
            isMute = !isMute;
        }
        setColor((isMute) ? CRGB::Red : CRGB::Lime);
    }else{
        setColor(CRGB::Black);
    }
    delay(10);
}
```

Bluetoothキーボードとして認識させるために[ESP32-BLE-Keyboard](https://github.com/T-vK/ESP32-BLE-Keyboard)を、
LEDの制御に[FastLED](https://github.com/FastLED/FastLED)を使用します。
それぞれインストールしてください。

ボタン(正面のLEDマトリクスのところ)を押すたびに、`⌘ + ⇧ + A`を入力し、Zoomのマイクミュートを切り替えます。

※Zoomを表示していないときにも切り替えるためには、Zoom側でグローバルショートカットを有効にする必要があります。
![shot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208118/9b9a6450-c63b-ae2c-61fa-ac1980187a6b.png)


---
USBで繋いでるのにBLE経由なのが悲しい…技術力が足りませんでした。
気づいたこと、気になったことをコメントしていただけると励みになります。
SwiftUIからUIKitのUILabelを表示する。

# はじめに
SwiftUIからUIKitの利用を理解する為の最初の一歩として
最低限の実装方法を記載したものです。

![スクリーンショット 2021-02-14 8.34.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16101/78ead9a6-7974-b870-024c-97472c59e9e3.png)


# 環境
macOS Big Sur 11.1
XCode 12.4
Swift 5

# 実装
SwiftUI上でUIKitのUILabelを表示するだけのソースコードです。
値の受け渡し、コーディネーターは使っていません。

[1].UIViewRepresentable
　SwiftUIでUIKitのViewを使用するために必要。
　[2], [3]の実装は必須。
[2].makeUIViewメソッド
　SwiftUI側に返却するUILabelのインスタンスを返却する。
[3].updateUIViewメソッド
　（今回は何もしない。）

```swift:ContentView.swift
import SwiftUI

struct ContentView: View {
    
    var body: some View {
        ZStack {
            // SwiftUI -------------
            VStack {
                Text("HelloWorld (SwiftUI)")
                    .frame(maxWidth: .infinity)
                Spacer()
            }
            .background(Color.blue)

            // UIKit ---------------
            HelloWorldUIKitLabel()
                .frame(height: 100)
        }
    }
}

struct HelloWorldUIKitLabel:UIViewRepresentable { // [1]

    func makeUIView(context: Context) -> UILabel { // [2]
        let label = UILabel()
        label.text = "HelloWorld (UIKit)"
        label.backgroundColor = UIColor.red
        label.textAlignment = NSTextAlignment.center
        return label
    }

    // 最低限の事しかやらないので、update処理は特に何もしません。
    func updateUIView(_ uiView: UILabel, context: Context) { // [3]
    }
}

```

次回は値の受け渡しなど
を記事にする予定
Jetson Nano 4GB(A02/B01)、2GBの比較情報 (※随時更新)

# はじめに
Jetson Nano 4GB(A02/B01)と2GBの大きな差分はメモリ容量ですが、細かな部分で差分があるのでメモを残しておきます。

### メモリ容量
Jetson Nano 4GB(A02/B01): 4GB
Jetson Nano: 2GB

# 拡張端子番号
4GB(A02/B01)はカメラコネクタ(J13)や40ピン拡張ヘッダー(J41)など主な拡張端子番号は同じでしたが、2GBの拡張端子番号は大きく異なる(カメラコネクタ(J5)や40ピン拡張ヘッダー(J6)など)ので注意が必要です。

Jetson Nano 4GB(A02)
![Jetson_Nano_4GB_A02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/c7aa830a-0ac3-16be-b2a4-91461df9934d.jpeg)

Jetson Nano 4GB(B01)
![Jetson_Nano_4GB_B01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/4f07a74d-1afa-d403-7352-d4b4e655b47e.jpeg)

Jetson Nano 2GB
![Jetson_Nano_2GB.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/7dd9e6ae-5cd1-3ea4-0ae3-b62257dc3dab.png)

# セットアップ手順
セットアップ手順でJetson Nano 2GBはスワップの有無を選択する必要があります。
![スクリーンショット 2021-02-22 9.53.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/5e297541-43a2-610b-1553-3e6c064ed767.png)

### Jetson Nano 2GBセットアップ手順 (動画)
https://youtu.be/O8eowJpmgOU

# デスクトップ環境
Jetson Nano 4GB(A02/B01)はUnityデスクトップ環境ですが、Jetson Nano 2GBは軽量なLXDEデスクトップ環境になりました。

Jetson Nano 4GB(A02/B01)
![desktop_4GB.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/c893d8da-fab9-9798-9496-03fb1522d931.png)

Jetson Nano 2GB
![desktop_2GB.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/163a1718-e5c5-f950-1603-de53873656bf.png)

# INA3221チップの有無
tegrastatsコマンドを実行して出力結果に差分(電流/電圧/電力の数値)があったので調べてみたら、そもそも2GBにはINA3221チップが搭載されていませんでした。

![power_monitor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/0d59718e-8cea-b209-4c45-f55a61ac42d7.png)

Jetson Nano 4GB(A02/B01): 有
![4GB_INA3221.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/77b10c78-6ef2-d078-fb76-fdad265f8dd5.jpeg)

Jetson Nano 2GB :無
![2GB_INA3221.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/f372d480-26f7-cf36-f00b-e71cb9b732e2.jpeg)


# Jetson Nano 2GBの新旧
追加で購入したJetson Nano 2GBにはJ7 FANピンヘッダが付いていたので、後からハンダづけする必要がなくなりました。

(旧: ハンダづけ前)
![Jetson_Nano_2GB_評価ボード.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/f2e622b0-6c88-bbe3-80a7-15bab7902d46.jpeg)

(旧: ハンダづけ後)
![2GB_J7_PIN.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/6d9acddb-2104-550c-76ea-2f3aa95c1626.jpeg)

(新)
![Jetson_Nano_2GB_評価ボード2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/b1dc3e4f-8b8f-7432-0401-b11831b1d503.jpeg)
【Laravel初心者】Bootstrapテンプレートを使ってみた

Laravel初学者です。
オリジナルアプリを作成しているのでその過程を記事にしています。

理解が曖昧なところも多いため、ご指摘等ありましたらご連絡いただければ幸いです。

今回はBootstrapのテンプレートを用いてviewを作成したので記録として残します。


## 環境

|                | Version     |
|:---------------|------------:|
| PHP            | 7.4.14      |
| Laravel        | 8.24.0      |
| mysql          | 8.0.23      |
| docker         | 20.10.2     |
| docker-compose | 1.27.4      |


## Bootstrapを選んだ理由

- Laravelで使えるようになっているから
- レスポンシブ対応が簡単
- 簡単にお洒落になる
- 時間短縮

view考えるのも好きなので自分で１から作りたい気持ちはありますが...
本当に簡単すぎてテンプレート提供してくれている方に感謝しかないです。


## テンプレート選び

`「Bootstrapテンプレート 無料」`みたいな感じで検索して自分がいいなと思うものを探しました。

私の場合は[こちらの記事](https://blog.codecamp.jp/bootstrap-template-howto)を参考にさせて頂き[Start Bootstrap](https://startbootstrap.com/)を選びました。

![スクリーンショット 2021-02-11 10.56.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051152/87283e0e-921f-bfca-0ef0-5265fc2e561e.png)

こちらがトップ画面です。
右下の矢印のところに`Pro`と`Free`というのがあるので無料でやりたい場合は`Free`にしましょう。

![スクリーンショット 2021-02-11 11.04.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051152/c06817c2-7bae-47a2-d89d-96ece704b333.png)

たくさん出てきます。
この中から自分にあったものを探します。

## ダウンロード

![スクリーンショット 2021-02-11 11.06.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051152/19d3d502-27b1-e1a8-833c-4f97d9c0c601.png)

一つ選んだら上記の画像のようにGithubにいきます。

![スクリーンショット 2021-02-11 11.09.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051152/f222f282-9269-74e7-85fc-85270abbff6f.png)

Githubにやり方が書いてあります。
今回の場合は`npmするか`、`リポジトリでダウンロードやクローンするか`という感じです。
私はダウンロードを選びました。

![スクリーンショット 2021-02-11 11.12.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051152/0c16e436-6f95-227f-d274-4f1f6e372c8e.png)

上記の画像のように`Code`を押して

![スクリーンショット 2021-02-11 11.14.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051152/fd7dcec5-f16c-80e8-0b67-ccbef8fc0234.png)

上記の画像のように`Download ZIP`を押してダウンロードします。

![スクリーンショット 2021-02-11 11.17.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051152/13f3bd44-b949-3ece-47c7-34f55c2816af.png)

ダウンロードすると上記のようなフォルダになっていました。
それぞれを自分のプロジェクトのフォルダに入れていきます。

## コードの配置場所

ここで問題なのが`どこに配置したらいいのか分からない`ということでした。
[こちらの記事](https://qiita.com/takaking216/items/5223e1087c79248250b7)を参考にさせて頂きました。
ありがとうございます！

>ビューファイルは、resources/viewsの中に入れることで読み込む。
>css,jsなどは、publicに入れることで読み込む。

ということです。
通常ダウンロードした`index.html`をviewに配置して拡張子を変更し`index.blade.php`にするようですが
私の場合はこのテンプレートの一部だけ使いたかったので
cssやjsやimgはそのままpublicフォルダに配置し、indexは使いたい部分だけコピーして自分のビューファイルに貼り付けました。

## パスの変更

そのまま配置しただけだとパスが違うためviewに反映されません。
直していきます。

```PHP:
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />
```

例えば初期の状態は上記のようなパスになっています。
`public`フォルダに入れたので`assets`を変更します。

```PHP:
<link rel="icon" type="image/x-icon" href="public/img/favicon.ico" />
```

上記のように一つ一つ直していき完成です。

以上です。
これから学ぶ言語の用途・特徴

#HTML
##HTMLとは
- HTMLはHyper Text Markup Languageの略である。
- Webページを作る際に、マークアップ言語という視覚表現や文章構造を記述するための最も基本的な言語が使われるが、HTMLはこのマークアップ言語のうちの一つである。
- Webサイトやアプリ、電子メールなどを適切に表示するために使用されている。

##HTMLでできること
- ホームページビルダーなどのWeb制作ツールがなくてもWebサイトを制作できる。
- 無料配布されているWebサイトのテンプレートを自分なりにアレンジすることができる。

#CSS
##CSSとは何か
- CSSはCascading Style Sheetsの略である。
- 先述したHTML文章に、装飾やレイアウトを施すために使用される。

##なぜCSSが必要か
- Webページの見た目はHTMLでも指定することができるが、HTMLだけで行うとWebページの情報構造が乱れ、検索エンジンに理解されにくく、ブラウザによって表示のされ方が変わってしまう。
- そのため、HTMlとは別のファイルでCSSによってスタイルを管理すれば、検索エンジンがWebページの構造を理解しやすくなる。

##CSSでできること
- テキストの色を変更する
- テキストで強調したい部分にマーカーを引く
- テキストにマウスソーカルを合わせた時の背景色を変更する。
- 挿入した画像の大きさを調整する

#JavaScript
##JavaScriptとは
- JavaScriptを使うことによって文字や色、写真にレイアウトなど表示されるコンテンツに動きをつけることが可能である。
- サーバーサイドに対し、クライアントサイドで使われる言語で、フロントエンドの開発や静的サイトを作成するときによく使われる。
- クライアントで使われていたJavaScriptが、サーバーサイドでも使用されることで、一つのWebアプリケーションをJavaScriptで一貫して開発できるようになった。

#Ruby
##Rubyとは
- Rubyはサーバーサイド・スクリプトの言語の一つで、Webアプリケーションの中でサーバーサイドの処理を行うためのプログラムを作成するための言語である。
- 動的なサイトを作るには、静的なサイトを作るときに必要とされる先述のHTML、CSS、JavaScriptなどのプログラミング言語に加えてRubyなどのサーバーサイドのプログラミング言語が必要になる。

##Rubyの３つの特徴
###記述量が少ない
- 他のプログラミング言語に比べて非常にシンプルな文法で記述されているため、開発を早く行うことができ、覚えることも少なくて済む。

###オブジェクト指向
- オブジェクト指向とは、一つのテーマを持ったデータと処理の集まりであるオブジェクトのシステムによってプログラミングを行うことである。
- このメリットは、ある程度の集まりに対してまとめて指示を行うため、処理がとてもシンプルで、プログラミングに多く伴う変更にとても強く、バグの発生を抑えやすくする。

###スクリプト言語
- CやJavaといったコンパイラ言語が、人間が書いたプログラムをコンピュータが理解できる形式に変換するプログラム言語であるのに対し、スクリプト言語はこのような手続きが一切不要である。
- そのまま実行できるため、コンパイラ言語に比べてプログラミングを手軽に行うことができるという特徴がある。

##Rubyでできること
###Webアプリ開発
- Rubyを使うメリットとして、Ruby言語を使ったRuby on RailsというWebアプリケーションフレームワークを使うことげできるという点を挙げることができる。
- このRuby on railsを使うとWebサイトやWebベースの業務システムを効率よく開発でき、比較的簡単にオリジナルのアプリケーションを作成することができる。

###スマホアプリ開発
- RUBYMOTIONを利用することで、スマホアプリを開発することができる。

###スクレイピング
- Webサイトから情報を加工するというスクレイピングという手法を使用することで、他のwebサイトから情報を取得することが容易に行うことができる。

#Ruby on Rails
##Ruby on Railsとは
- Rubyで構築された、webアプリケーション開発のための「フレームワーク」である。

##フレームワークを使用するメリット(Ruby on Railsにかかわらず）
###①生産性の向上
- 汎用的に使用する機能や、基本的な構造が既に仕上がっているため、フレームワークを使用するとしないのでは、記述量に差が生まれる。

###②メンテナス性
- フレームワークにはそれぞれルールがあり、作業はそれに従ってコーディングするため、コードの一貫性が維持しやすく、不具合や仕様変更があった際にどこに問題があるのかを特定しやすくなる。

###③品質の維持
- フレームワークは基本的にオープンソースであり、多くの人の手により利用実績が積み上げられ、テストも実施されているため、信頼性は高いと言える。
Django3+DjongoでMongoDBを触ってみた

## TL;DR
 - REST API Frameworkとセットで使うなら良いライブラリだと思います
 - MongoDBとしての機能を使いこなすのは少し難しそう

## 概要
簡単なWebアプリを作る時に最近の流行りだったらNuxt.js+FastAPIないしDjango+REST API Frameworkかなあと思ったのですが時間も手間も無いのでMTVモデルでDBをDjangoに据えてやってみた感想

## Djongoとは
 - https://www.djongomapper.com/
   - MongoDBでORMできるスゲーやつ
 - 使い方は公式のリファレンスが簡潔にまとまっている
   - https://www.djongomapper.com/get-started/
 - PyPIでのDevelopment Statusは3(Alpha)[^1]
   - 確認時のリリースバージョンは1.3.4
 - 有償サポートあり
   - Discord／メール／追加機能へのアクセス
 - [AGPLv3ライセンス](https://github.com/nesdis/djongo/blob/master/LICENSE)

## 良いと思った所
 - スキーマレス
 - OneToOne/OneToManyのモデルの定義に対しても良い感じに振る舞ってくれる
   - Aggreation pipelineを書く手間が省ける 
 - JSON型のサポート[^2]
   - 何でも突っ込めるので雑に設計しても困らない
 - MongoDBに依存したコード(Djongo/Pymongo実装のクラス)が少なければデータベースの変更が容易

## 不満が残る所
 - Transactionが未サポート( `'ATOMIC_REQUESTS'=True` も効かない)
    - MongoDBを使う以上単一のドキュメントで処理が完結できるような設計にした方が良さそう
    - 有償版なら使えるというパターン
        - https://www.djongomapper.com/djongonxt-database-transactions/
 - ModelにIndexを張ってmigrate…みたいな事が出来ない
   - Modelに適当にIndexに対する定義を書いておいてCommandでスキャンしたModelの該当の箇所を読んでpymongoのcreate_index関数でIndex作成……みたいな事をするか、手動でIndexを張るクエリを発行する必要あり
     - 有償版のDjongoNxtなら出来るよ！
 - `$search` や一部クエリの未サポート
    - 有償版の（略）[^3]
 - AUTO_INCREMENTな採番処理はもちろん使えない[^6]
 - MTVモデルでの使われ方をあまり考慮されていない
    - ObjectIdのフィールド( `_id` )をTemplateから使うにはフィールド名をゴニョるために一工夫要るとか
    - Djongoのフィールドとして提供されているArrayField等のいわるゆJSON型のカラムをFormに埋め込むのがメチャクチャハマる
        - 基本的にやり取りはJSONで行われている前提で考えられているのでMTVモデルでDjongoを使おうと思った場合はフレームワークとライブラリの恩恵に与れない事は理解しておく必要がありそう
 - シャーディングできない気がする
   - Modelにそういうメタデータあったらいいんだけど
 - コミュニティが弱い
    - Django3.1をサポートしていない
      - 2021.2.1リリースのバージョンでの依存関係は `>=2.1,<=3.0.5`
      - 新しいリリースに対する依存関係のサポートはあまり強くない
      - `Django` や `Djongo` のバージョン下げたら治った、みたいな強烈なIssue[^4][^5]があったりする
    - GitHubのIssueは結構Openステータスのものが残っている
      - 使い込んでゆくと色々出てきそう
    - 有償版の存在によってコミュニティが分断されている気がする。
        - ○○できない->有償版なら出来る（contributeの機会が無い）
        - ○○がバグってる->「……」

## 結論
プロトタイピングなら最適。

[^1]: https://pypi.org/project/djongo/
[^2]: https://www.djongomapper.com/using-django-with-other-fields/#the-list-field
[^3]: https://www.djongomapper.com/djongonxt-model-query/
[^4]: https://github.com/nesdis/djongo/issues/491#issuecomment-720131080
[^5]: https://github.com/nesdis/djongo/issues/444#issuecomment-662860814
[^6]: どうしても必要なときはPymongoの `find_one_and_update` で採番テーブルからインクリメントされた値を取るような実装を自分で書く必要があるhttps://pymongo.readthedocs.io/en/stable/api/pymongo/collection.html?highlight=find_one_and_update#pymongo.collection.Collection.find_one_and_update
間違えたくない英単語

# はじめに

実際に出会って知った, 綴りや読み方を間違えたくない英単語を, リストにしたい, 育てたい, そんなポエム. 誰かを非難するものではなく, 人を見て自分を正したい. 
和製英語については難しく, 調べてみたら和蘭語だったということもあるかも.
みんなオラに力を分けてくれ. エンジニア界隈限定で, 例えばコンセントは和製の何かとかは必要ないです.

[Explore the Cambridge Dictionary](https://dictionary.cambridge.org)

## ポエムについて

ポエムとは, 自由気ままにお気持ち表明できる一方で, 批判されるとライフで受けないといけない, 諸刃の剣である.
マサカリは論理的な反論なので, "間違いでした, ごめんなさい, 訂正して, 割腹します"で済む話.

# 単語

## 綴り

| 語 |   |
| :-- | :-- |
| deactivate | disactivateでも間違いではないらしいが,<br />WPFぐらいでしか見かけない. |
| license | UKではlicenceと使い分ける人もいる.<br />この業界ではlicenseが一般的. |
| technique | 古い綴りとしてtechnicもあるらしい.<br />HiNativeでは, "technicを使うやつは馬鹿"という過激な投稿もある.|

## 読み

| 語           |                  |
| :--          | :--              |
| asynchronous | /eɪˈsɪŋ.krə.nəs/ |
| editor       | /édɪtə/. エディッタでもいいとは思いますが, 気持ちが悪いです. |

## 間違い

| 語 |   |
| :-- | :-- |
| register| 本気でregistと思っているパターンと, 省略のパターンがありそう.<br />名詞として使う場合は, registrationと少し意味が異なる. |
| through | 無視するという意味はない. `isThroughTestMode` の意味を反対に理解してしまった,<br />どう見てもtrueならテストモードになるでしょ（激おこ）.|
| smith | 鍛冶や鍛えるという意味.<br />Unreal EngineのDatasmithに人名が入っているという説を見たため.|

## 和製英語

| 語        |      |
| :--       | :--   |
| under-bar | この世に存在しない単語.<br />和製かもわからない, 起源を探しています.<br />under-bar研究を参照のこと. |
| notebook-pc | laptop-pc. なんとなく通じると思われるが,<br />相手に考えさせる時点でダメ.<br />と思っていたけど, notebookでも通じるらしいJobsも使ってるやん.|

## 固有名詞

| 語        |      |
| :--       | :--   |
| C++ | 作者の著書によると++の発音はつねに'プラスプラス' |

# まとめ

特筆することなし. 和製英語の項だけ正誤が逆ですね, どうしたら分かり易いでしょうね.

# under-bar研究

この項は私的研究で全て妄想です.

ASCIIでは, underlineと呼んでいることがわかります（[ISO-IR-006 ASCII PDF注意](https://www.itscj.ipsj.or.jp/iso-ir/006.pdf)）. 英語のunderlineの意味は, "単語や文節に下線を引いて強調すること", 転じて"何かを強調すること"を意味します. ASCIIがこのように呼んでいるのは, タイプライターが起源だと思っています. タイプライターでは, 本当に文字の下に線を入れることができました, ヘッドを１文字戻して"underline"をタイプするとunderlineできるわけです.

しかし, 計算機の時代になり, 名前として"underline"がASCIIに残るものの, 本当にunderlineすることができなくなります. このあたりで計算機の世界に, 字の形を表現する"underscore"や"low-line"が現れたと思っています.

時は流れ, 黎明期のUNICODEだのワイド文字だの全部ぶっとばしまして（関わりたくないし）, 合字という概念が導入されたUnicodeでは, めでたく本当のunderlineが返ってきます, ただの下に線のある字形はlow-line, 直前の字に下線を引く文字をunderlineと, 区別されています.

2014年発刊の[The New Hacker's Dictionary](https://www.outpost9.com/reference/jargon/jargon_16.html)に載っているらしいが, つまりそういう言葉を使うやつがいるという認識があるだけと思っています.

結論として, under-barなど歴史上存在したこともないですし, これからも存在しません.

# 変更履歴

- softarkさんより, register/registを追加.
    - GitHubの自分のアカウントを調べてみました `user:taqu regist` が, ノーヒットでした.
        - でも書こうとしたことはあったと思います. 必ず調べて名前を付けるので, 間違いに気づいているのでしょう.
        - C/C++ではregisterが予約語だから気付かなかったのかな
    - GitHub全体だと多過ぎます. 最初の３ページほど見てみましたが, 中国人か日本人のコードっぽいです.
        - Web系が多いので, 予約語と衝突するという言いわけは通らなそうです.
    - Linux Kernelだと17個, registerの省略でしょうか.
- `notebook-pc`に変更, 対称になるように.
[Swift] 重ね合わせの色を生成する（アルファブレンドする）

Swiftで、**アルファ付きの色同士を重ねたときの色を取得する（アルファブレンドする）**処理の実装方法。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95499/ef2798e1-3e7a-2133-ef91-4c4cff1c67ea.png" width="320">

## 実装

```swift:UIColor+overlayColor.swift
extension UIColor {
    /// 色を重ね合わせたときの色を生成する
    /// 参考 https://ja.wikipedia.org/wiki/アルファブレンド
    func overlayColor(_ otherColor: UIColor) -> UIColor {
        /// 背景
        var (dstR, dstG, dstB, dstA) = (CGFloat(0), CGFloat(0), CGFloat(0), CGFloat(0))
        /// 前景
        var (srcR, srcG, srcB, srcA) = (CGFloat(0), CGFloat(0), CGFloat(0), CGFloat(0))

        getRed(&dstR, green: &dstG, blue: &dstB, alpha: &dstA)
        otherColor.getRed(&srcR, green: &srcG, blue: &srcB, alpha: &srcA)

        let outA = srcA + dstA - dstA * srcA
        let outR = (srcR * srcA + dstR * dstA * (1 - srcA)) / outA
        let outG = (srcG * srcA + dstG * dstA * (1 - srcA)) / outA
        let outB = (srcB * srcA + dstB * dstA * (1 - srcA)) / outA
        return UIColor(red: outR,
                       green: outG,
                       blue: outB,
                       alpha: outA)
    }
}
```

## 生成された色

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95499/feaddf3d-dbe9-dbac-1a1a-c4caa944a725.png" width="320">

矢印で示された部分が今回作成したメソッドで計算された色です。


## サンプルコード

Playgroundを作成しました。動作確認をしたい方はこちらからどうぞ。
https://github.com/zrn-ns/OverlayColor/

## 謝辞

実装は下記のサイトを参考にさせていただきました。

- [アルファブレンド - Wikipedia](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%AB%E3%83%95%E3%82%A1%E3%83%96%E3%83%AC%E3%83%B3%E3%83%89)
vs2010でmfc その3

#概要

vs2010でmfcやってみた。
zundokoやってみた。

#手順

- mfcアプリケーション、ダイアログベースでプロジェクト名は、mfc0で作る。
- IDD_MFC0_DIALOGを開く
- edit controleを貼る。
- OKボタンをクリック。
- コードを書く。
- 実行。

#サンプルコード

```
void Cmfc0Dlg::OnBnClickedOk()
{
	CString str;
	int a = 0;
	int b = 0;
	do
	{
		if (a == 0)
		{
			b++;
		}
		else
		{
			b = 0;
		}
		a = rand() % 2;
		if (a == 0)
		{
			str += "ズン\r\n";
		}
		else
		{
			str += "ドコ\r\n";
		}
	} while (!(a == 1 && b > 4));
	str += "キ・ヨ・シ！！";
	SetDlgItemText(IDC_EDIT1, str);	
}
```

以上。
manimの作法 その48

#概要

manimの作法、調べてみた。
complex_to_R3使ってみた。

#サンプルコード

```
from manimlib.imports import *

class test(ThreeDScene):
	def construct(self):
		self.set_camera_orientation(phi = 75 * DEGREES, theta = 30 * DEGREES)
		axes = ThreeDAxes()
		self.add(axes)
		w = 1
		surface_01 = ParametricSurface(lambda u, v: v * complex_to_R3(np.exp(1j * w * u)), u_min = 0, u_max = TAU, v_min = 1, v_max = 3, checkerboard_colors = None, fill_color = BLUE_B, fill_opacity = 0.8, stroke_color = BLUE_A, resolution = (60, 10))
		self.play(ShowCreation(surface_01))
		self.wait()
		self.remove(surface_01)
		surface_02 = ParametricSurface(lambda u, v: v * complex_to_R3(np.exp(1j * w * u)) + OUT * u / PI * 2, u_min = 0, u_max = TAU, v_min = 1, v_max = 3, checkerboard_colors = None, fill_color = BLUE_D, fill_opacity = 0.8, stroke_color = BLUE_A, resolution = (60, 10))
		self.play(ShowCreation(surface_02))
		self.wait()
		self.remove(surface_02)
		r = 2
		w = 4
		circle = ParametricFunction(lambda t: r * complex_to_R3(np.exp(1j * w * t)), t_min = 0, t_max = TAU * 1.5, color = RED, stroke_width = 8)
		self.play(ShowCreation(circle))
		self.wait()
		self.remove(circle)
		spiral_line = ParametricFunction(lambda t: r * complex_to_R3(np.exp(1j * w * t)) + OUT * t, t_min = 0, t_max = TAU * 1.5, color = PINK, stroke_width = 8)
		self.play(ShowCreation(spiral_line))
		self.wait()
		self.remove(spiral_line)
		theta = PI / 4
		curve_02 = lambda y: np.array([1, y, y * np.tan(theta)])
		w = 2
		surface_func_02 = lambda u, v: complex_to_R3(complex(*curve_02(v)[0:2]) * np.exp(1j * w * u)) + curve_02(v)[-1] * OUT
		surface_by_rotate_02 = ParametricSurface(surface_func_02, u_min = 0, u_max = TAU, v_min = -2, v_max = 2, checkerboard_colors = None, fill_color = BLUE, fill_opacity = 0.8, stroke_color = WHITE, stroke_width = 2.5)
		self.play(ShowCreation(surface_by_rotate_02))
		self.wait()
		self.remove(surface_by_rotate_02)
		line_func = lambda y: np.array([1, y, y * np.tan(theta)])
		surface_func = lambda u, v: complex_to_R3(complex(*line_func(v)[0:2]) * np.exp(1j * u)) + line_func(v)[-1] * OUT
		surface_by_rotate = ParametricSurface(surface_func, u_min = 0, u_max = TAU, v_min = -2, v_max = 2,)
		self.play(ShowCreation(surface_by_rotate))
		self.wait()
		self.remove(surface_by_rotate)

		c_func = lambda y: np.array([1, y, y * np.sin(theta)])
		surface_func = lambda u, v: complex_to_R3(np.exp(1j * u)) + c_func(v)[-1] * OUT
		surface_c = ParametricSurface(surface_func, u_min = 0, u_max = TAU, v_min = -2, v_max = 2,)
		self.play(ShowCreation(surface_c))
		self.wait()
		self.remove(surface_c)




```

#生成した動画

https://www.youtube.com/watch?v=7CKSoBCxXpo

以上。
初心者　三つの整数　特定の差がある場合の現し方

本日な問題はこちらでした。

メソッドに3つの整数a b cを与えます。
・「aとbの差が1」または「aとcの差が1」であり、かつ「bとcとの数値の差が2以上」の場合はTrue
・それ以外はFalse
と出力するメソッドを作りましょう。

出力例：
close_far(1, 2, 10) → True
close_far(1, 2, 3) → False
close_far(4, 1, 3) → True

absメソッドを使いましょう。


回答がこちらです。

```ruby
def close_far(a,b,c)
  x = (a-b).abs
  y = (a-c).abs
  z = (b-c).abs

  if x == 1 && z >= 2
    puts "True"
  elsif y == 1 && z >= 2
    puts "True"
  else
    puts "False"
  end
end
```
まず、初めの記述で、abcそれぞれの差分を算出し、絶対値に変換します。

x == 1 && z >= 2で、「aとbの差が1」であり、かつ「bとcとの数値の差が2以上」を検討しています。
y == 1 && z >= 2で、「aとcの差が1」であり、かつ「bとcとの数値の差が2以上」を検討しています。

条件式は、以下のようにまとめて記述することもできます。

```ruby
if (x == 1 && z >= 2) || (y == 1 && z >= 2)
  puts "True"
else
  puts "False"
end
```

初心者の私にはまだ難しい問題でした。
このような条件式が直ぐに思いつく日はやって来るのでしょうか？
いい勉強法、集中力が続く方法があればいいです。
manimの作法 その47

#概要

manimの作法、調べてみた。
TexMobject使ってみた。

#サンプルコード

```
from manimlib.imports import *

class test(Scene):
	def construct(self):
		tex = TexMobject("(25^\\circ\\text{C}, 101 \\text{ kPa})")
		self.play(Write(tex))
		self.wait()
		self.remove(tex)
		tex = TexMobject(r"f(x)=\ln (2x)-\frac12 x+5")
		self.play(Write(tex))
		self.wait()
		self.remove(tex)
		tex = TexMobject("\\vec{\\textbf{v}}")
		self.play(Write(tex))
		self.wait()
		self.remove(tex)
		tex = TexMobject("\\sum_{k=1}^n k^3")
		self.play(Write(tex))
		self.wait()
		self.remove(tex)
		tex = TexMobject("\\frac{(n^2+n)^2}{4}")
		self.play(Write(tex))
		self.wait()
		self.remove(tex)
		tex = TexMobject("dx = 0.01 \\Rightarrow (dx)^2 = 0.0001")
		self.play(Write(tex))
		self.wait()
		self.remove(tex)




```

#生成した動画

https://www.youtube.com/watch?v=3Tqb7Qh67Z0

以上。
Java → Kotlinのチートシート

## はじめに
この記事は「**JavaからKotlinへの移行の際にこうすれば便利かな**」というものを軽く纏めてみたものです。
Qiitaで初めて記事を書くので至らない点もあると思いますが、温かい目で見てもらえればと思います。
また、「ここはどうなんだ？」って所があれば教えていただけると助かります。

### 環境
**Java**: 1.8.0_281
**Kotlin**: 1.4.20

## `Integer.parseInt`, `Long.parseLong` ...
ユーザーから受け取った引数を数値型に変換したい時のアレです。
これにはエラー処理が含まれてないので[数値型かどうか検証](#数値型かどうか検証)も見てみると良いかもしれません。
### Java
```java
String str = "123";
Int i = Integer.parseInt(str);
Long l = Long.parseLong(str);
```

### Kotlin
```kotlin
val str = "123" // String
val i = str.toInt() // Int
val l = str.toLong() // Long
```

## 数値型かどうか検証
この例ではString型からInt型へのキャスト・エラーハンドリングですが、他の数値型でも同じような感じで行けます。
### Java
```java
String str = "123abc";
try {
    // Int型へのキャストに成功
    Int i = Integer.parseInt(str);
} catch (NumberFormatException e) {
    // Int型へのキャストが失敗
    System.out.println("Error!");
    e.printStackTrace();
}
```

### Kotlin
```kotlin
val str = "123abc" // String
val i = str.toIntOrNull() ?: kotlin.run {
    // Int型へのキャストが失敗
    println("Error!")
    return
}

// ↓ Int型へのキャストが成功したときの処理
```

## `instanceof`
### Java
```java
String str = "hogefuga";
System.out.println(str instanceof String);
// → true
```

### Kotlin
```kotlin
val str = "hogefuga" // String
println(str is String)
// → true
```

## `instanceof` とキャストのあわせ技 (Smart Cast)
スマートキャストについては[こちら](https://kotlinlang.org/docs/reference/typecasts.html)を見るほうが分かりやすいです。
### Java
```java
String str = "hogefuga";
if (str instanceof String) {
    String msg = (String) str;
    // str がString型の時
} else {
    // str がString型ではない時
}

// もしくは
if (!(str instanceof String)) {
    // str がString型ではない時
}

// str がString型の時
String msg = (String) str;
```

### Kotlin
```kotlin
val str = "hogefuga" // String
if (str is String) {
    // str がString型の時
    // Kotlinではisが通った場合、自分でキャストしなくてもその型に自動でキャストしてくれます。
} else {
    // str がString型ではない時
}


// もしくは
if (str !is String) {
    // str がString型ではない時
}

// str がString型の時
// この場合も自動でキャストしてくれます。


// こんなのも
// String
val msg = str as? String ?: kotlin.run {
    // str がString型ではない時
    return
}

// str がString型の時
```

## 文献
ありがとうございます…！
**Type Checks and Casts: 'is' and 'as'**: https://kotlinlang.org/docs/reference/typecasts.html
Reactのevent poolingとは何だったのか

## はじめに
現在のReactのバージョンは17ですが、バージョン16以前はevent poolingという機能がありました。(ReactNativeでは現在もあるみたいです)

event poolingがどういう機能だったのか、なぜ削除されたのかについて書いていきます。

## Eventオブジェクトが使えなくなる機能？
``` jsx
const Component = () => {
  const [text,setText] = useState("");
  const onChange = (e) => {
    setText(state => e.target.value);
  }
  return(
    <input type="text" value={text} onChange = {onChange}
  );
}
```
このコードはReact16以前では`"target" is not defined`となり、思った通りに動作しません。

エラーを解決するには、`e.persist()`が必要になります。

``` jsx

const onChange = (e) => {
  e.persist();
  setText(state => e.target.value);
}
```

## event poolingの役割
なぜ、Eventオブジェクトが使えなくなるという不便な機能があったのでしょうか。

実は、event poolingにはReactのパフォーマンスを向上させるという役割があったのです。

event pooling のeventはDOMイベントのことを指します。
clickとかonchangeのようなイベントですね。
このDomイベントのオブジェクトをpoolingするわけです。
（object poolingデザインパターンです。オブジェクトを使いまわすことによってメモリの使用量を減らします。）
https://qiita.com/len/items/fe77090d5e63c32ae30e

Clickやonchangeのようなイベントだと、発火される回数は少ないですが、dragイベントのような高発火イベントだと大量にEventオブジェクトが生成されます。

Eventオブジェクトのガーベジコレクションによって、パフォーマンスが悪くなるのを防いでいるのです。


``` javascript
const onChange = (e) => {
  setText(state => e.target.value);
}
```
`setText`のような非同期の関数にコールバックすると、`e.target.value`を処理するときにはEventオブジェクトは使いまわしのためにリセットされてます。
`"target" is not defined`はこれが原因です。

`e.persist()`はEventオブジェクトをリセットしないようにする関数です。

## なぜ、React17で削除されたのか
event pooling が削除されたのは二つ理由があります。

一つはReactを使うときに混乱を招くこと

もう一つは、最新のJSエンジンではガーベジコレクションの最適化のためにevent poolingをしなくてもパフォーマンスにほとんど違いがないこと。

event poolingにもわずかではありますが、オーバーヘッドがあります。

将来的にはevent poolingをしない方がパフォーマンスが良くなるかもしれないそうです。
pp は require 無しで使える

# pp とは

pen-pineapple のことではない。
Ruby のメソッドで，ややこしいオブジェクト[^yy]もいい感じに表示してくれるもの。
用途は `p` メソッドと同じだが，それよりもっと分かりやすくきれいに表示してくれることになっている。メソッド名は pretty print から。

`p` と `pp` でどう違うかはよく知らないけど，たとえば要素数が多いハッシュを表示させると，後者では改行を入れてくれるようだ（小さいハッシュだと変わらない）。

```rb
p "A".upto("K").with_index.to_h
# => {"A"=>0, "B"=>1, "C"=>2, "D"=>3, "E"=>4, "F"=>5, "G"=>6, "H"=>7, "I"=>8, "J"=>9, "K"=>10}

pp "A".upto("K").with_index.to_h
# => {"A"=>0,
#     "B"=>1,
#     "C"=>2,
#     "D"=>3,
#     "E"=>4,
#     "F"=>5,
#     "G"=>6,
#     "H"=>7,
#     "I"=>8,
#     "J"=>9,
#     "K"=>10}
```

[^yy]: 「ややこしいオブジェクト」というのは，「ハッシュの配列」みたいなのとか。

# require 必要？

`pp` はメソッド名だがライブラリーの名称でもある。

`pp` ライブラリーは組込みではなく「標準添付ライブラリー」だ。だからインストールは必要ないが，`require` が必要となる。
なのだけれど，実は Ruby 2.5 以降では[^rb25]，`pp` メソッドが最初に呼ばれたときに `pp` ライブラリーを裏で自動的に `require` してくれるようになっている。
だから，「`require` が必要」なのは嘘ではないけれど，「ユーザーにとっては不要」なのだ。

（ユーザーにとって）`require` が不要，ということは公式リファレンスマニュアルにも書かれている：
[Kernel.#pp (Ruby 3.0.0 リファレンスマニュアル)](https://docs.ruby-lang.org/ja/latest/method/Kernel/m/pp.html)

Ruby 2.5 リリース時に公開された @jnchito さんの以下の記事にも書かれている。
[サンプルコードでわかる！Ruby 2.5の主な新機能と変更点 Part 2 - Qiita](https://qiita.com/jnchito/items/0d2d17a79a3e82fe3815)

[^rb25]: [Ruby 2.4 系のサポートは 2020-04-05 に切れている](https://www.ruby-lang.org/ja/news/2020/04/05/support-of-ruby-2-4-has-ended/) ので，現在サポートされているすべての Ruby バージョンに当てはまる。

# 記事を書いたきっかけ

以下の記事を読んでいて，「おや」と思った。
[週刊Railsウォッチ（20210209後編）Rubyでミニ言語処理系を作る、Kernel#getsの意外な機能、CSSのcontent-visibilityほか｜TechRacho（テックラッチョ）〜エンジニアの「？」を「！」に〜｜BPS株式会社](https://techracho.bpsinc.jp/hachi8833/2021_02_09/103838)

ここに

> 「ちなみに`pp`は`require`しないと使えないんですよ」

という台詞が出てくる。
そういえば，いろいろなところで「`require` が必要」と書かれているなあ，と思ったのがこの記事を書いたきっかけ。
いま改めて上記の記事を見に行くと，本件は既に @ima1zumi さんが指摘されていて，記事の訂正も済んでいた。

なお，「週刊Railsウォッチ」は面白くて役に立つので毎回楽しみにしている。
【jquery,js】csvからリンクリストを生成する [replace] [js01_20210211]

####  <font color='orange'>処理の概要</font>
表示しているcsvからリンクリストを生成して表示する

##### 処理のフロー：
　(1)実行ボタンを押下する
　(2)テキスト1から文字列を取得する
　(3)文字列からURLを取り出してリンクするように置換する
　(4)改行コードを変換
　(5)テキスト2に文字列を表示
　(6)div領域に生成したリンクを表示する

####  <font color='orange'>画面イメージ</font>
画像１の実行ボタンを押すと画像２のようになります。

#####画像１
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647299/ac4eb9ec-74ea-e977-1e91-fadb5b383db7.png" width="300px">
#####画像２
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/647299/a8f69def-3036-da80-7d88-58196fa1d4fb.png" width="300px">

####  <font color='orange'>ソースコード</font>
```html:index.html
<body>
	<textarea  id="userText">
グーグル,https://www.google.co.jp/
ヤフー,http://www.yahoo.co.jp/
フェイスブック,https://www.facebook.com/
	</textarea>
	<br>
	<input type="button" id="execButton" value="実行"><br>
	<textarea id="output"></textarea>
	<div id="tranceLinker"></div>
</body>
```


```javascript:main.js
// DOMの準備後に実行する内容
$(function() {
	// ［実行］ボタンを押した時の処理を設定
	$("#execButton").click(function() {
		// 文字列を取得
		var text = $("#userText").val();
		// リンクに変換
		text = text.replace(/^(.+?),(.+?)$/gm, function(s, s1, s2) {
			return '<a href="' + s2 + '">' + s1 + '</a>';
		});
		// 改行を変換
		text = text.replace(/\n/g, "<br>\n");
		// 文字列を出力
		$("#output").val(text);
		// プレビュー
		$("#output2").html(text);
	});
});
```
####  <font color='orange'>ポイント</font>
html：
(1)テキストエリアに表示するcsvは、タブを入力すると後々おかしくなる。
js：
(1)replaceの書式は、パラ1が検索が一致した部分の全体の文字列。パラ2が１番目の丸括弧内の文字列、パラ3は２番目の丸括弧内の文字列…丸括弧で一致した文字列を1つずつ得られる。
(2)リンクの生成は、ダブルとシングルで変数をセットする
(3)「$("#execButton").click(function() {…})」は無名関数の使用

```
 text = text.replace(/^(.+?),(.+?)$/gm, function(s, s1, s2) {
            return '<a href="' + s2 + '">' + s1 + '</a>';
```

####  <font color='orange'>参考資料</font>
JavaScript(仕事の現場でサッと使える！デザイン教科書)　p160
PHPで形態素解析を行う（Yahoo!のAPIを使用します）

以前「[PHPで分かち書きをする意識低い方法](https://qiita.com/emesh/items/d54723b6253a6f37a77e)」というエントリーを書いていましたが、今回は[Yahoo!](https://developer.yahoo.co.jp/webapi/jlp/ma/v1/parse.html) 版です。使用する際には1日50000回以下で収まる用途であること（越えるとエラーになる）と、クレジットも必要です。それらの制約が無い場合には選択肢に入るかと思います。

#準備
といっても、Yahoo!のサイトから[アプリケーションを開発をする]ボタンをクリックして所定の項目を入力するだけです。

#コード
APIキーを取得した際にClient IDとシークレットが提示されるかと思いますが、Client IDをつかいます。
レンタルサーバーなどで、simplexml_load_fileが使えないこともあるでしょうからCurlを使います。

```php
<?php
$appId = "Client ID";
$sentence = "今日は海の日。夏だ一番ドラえもん祭り。吾輩は猫である。名前はまだ無い";

$url = "https://jlp.yahooapis.jp/MAService/V1/parse?appid=" . $appId . "&results=ma&sentence=" . urlencode($sentence);

//XMLの解析
$xml_data = "";
$cp = curl_init();
curl_setopt($cp, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($cp, CURLOPT_HEADER, false );
curl_setopt($cp, CURLOPT_URL, $url);
curl_setopt($cp, CURLOPT_TIMEOUT, 60);
$xml_data = curl_exec($cp);
curl_close($cp);
$original_xml = simplexml_load_string($xml_data);

$xml = get_object_vars($original_xml);

//結果を出力
foreach($xml['ma_result']->word_list->word as $cur){
	echo $cur->surface . "|";
}

?>
```

## 結果

```
今日|は|海|の|日|。|夏|だ|一番|ドラえもん|祭り|。|吾輩は猫である|。|名前|は|まだ|無い|
```

# 参考文献
* [レンタルサーバでsimplexml_load_fileが使えないときのcURL](http://kiddikn.php.xdomain.jp/kiddikn/simplexml_load_filetocurl/)

* [Yahooの日本語形態素解析APIをPHPで使ってみる](https://thr3a.hatenablog.com/entry/20130930/1380515588)
Build input file cannot be found: hogehoge　となったときの対処法

# なぜ起きたか
プロジェクトを作成した時の、AppDelegateやMain.storyboardなどが入っているファイル名を変更したから。


# 対処法
![スクリーンショット 2021-02-11 9.44.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586415/b40b17d6-3a20-a959-5364-9e3704350b48.png)


このように、hoge/info.Plistという風に合わせます。

当初作ったプロジェクト名が`Coffee`であれば`Coffee/info.plist`となっています。
そしてAppDelegateやMain.storyboardなどが入っているファイル名は`Coffee`です。

しかしながら画像のように、そのフォルダ名を`Utils`に変更した場合
`Coffee/info.plist とUtils`で食い違いが発生しているわけです。
なのでそういう時は画像のように、パスを合わせる(`Coffee/info.plistをUtils/info.plistに変更`)ことでこのエラーは解消されます。
PRML　演習問題 13.20（標準）　解答 

## 問題
> (2.115)の結果を用いて(13.87)を証明せよ。
> 
```math
\begin {align*}
\begin{array}{c}
\int \mathcal{N}\left(\mathbf{z}_{n} \mid \mathbf{A} \mathbf{z}_{n-1}, \mathbf{\Gamma}\right) \mathcal{N}\left(\mathbf{z}_{n-1} \mid \boldsymbol{\mu}_{n-1}, \mathbf{V}_{n-1}\right) \mathrm{d} \mathbf{z}_{n-1} \\
=\mathcal{N}\left(\mathbf{z}_{n} \mid \mathbf{A} \boldsymbol{\mu}_{n-1}, \mathbf{P}_{n-1}\right)
\end{array}
\tag{13.87}
\end {align*}
```  

## 参考
$\mathbf{x}$の周辺ガウス分布と、$\mathbf{x}$が与えられた時の$\mathbf{y}$の条件付きガウス分布が次式与えられたとする、

```math
\begin {align*}
p(\mathbf{x})=\mathcal{N}\left(\mathbf{x} \mid \boldsymbol{\mu}, \mathbf{\Lambda}^{-1}\right)
\tag{2.113}
\end {align*}
```  

```math
\begin {align*}
p(\mathbf{y} \mid \mathbf{x})=\mathcal{N}\left(\mathbf{y} \mid \mathbf{A} \mathbf{x}+\mathbf{b}, \mathbf{L}^{-1}\right)
\tag{2.114}
\end {align*}
```  

この時$\mathbf{y}$の周辺分布は

```math
\begin {align*}
p(\mathbf{y})=\mathcal{N}\left(\mathbf{y} \mid \mathbf{A} \boldsymbol{\mu}+\mathbf{b}, \mathbf{L}^{-1}+\mathbf{A} \mathbf{\Lambda}^{-1} \mathbf{A}^{\mathrm{T}}\right)
\tag{2.115}
\end {align*}
```  

で与えられる。

## 解答
(13.87)において、

```math
\begin {align*}
p(\mathbf{z}_{n} \mid \mathbf{z}_{n-1})=\mathcal{N}\left(\mathbf{z}_{n} \mid \mathbf{A} \mathbf{z}_{n-1}, \mathbf{\Gamma}\right) 
\tag{13.22.1}
\end {align*}
```  

```math
\begin {align*}
p(\mathbf{z}_{n-1})=\mathcal{N}\left(\mathbf{z}_{n-1} \mid \boldsymbol{\mu}_{n-1}, \mathbf{V}_{n-1}\right)
\tag{13.22.2}
\end {align*}
```  
と置くと、(13.87)の左辺は、

```math
\begin {align*}
\int p(\mathbf{z}_{n} \mid \mathbf{z}_{n-1}) p(\mathbf{z}_{n-1})\mathrm{d} \mathbf{z}_{n-1} =　p(\mathbf{z}_{n})
\tag{13.22.3}
\end {align*}
```  
と変形できる。この時、(2.113)と(13.22.2)、(2.114)と(13.22.1)を見比べながら、
$\mathbf{z}_{n}$の周辺分布を(2.115)をもとにして考えると、

```math
\begin {align*}
\begin{array}{c}
\int \mathcal{N}\left(\mathbf{z}_{n} \mid \mathbf{A} \mathbf{z}_{n-1}, \mathbf{\Gamma}\right) \mathcal{N}\left(\mathbf{z}_{n-1} \mid \boldsymbol{\mu}_{n-1}, \mathbf{V}_{n-1}\right) \mathrm{d} \mathbf{z}_{n-1} \\
=\mathcal{N}\left(\mathbf{z}_{n} \mid \mathbf{A} \boldsymbol{\mu}_{n-1}, \mathbf{P}_{n-1}\right)
\end{array}
\tag{13.87}
\end {align*}
```  

を導くことができる。
初心者　Linuxコマンド　練習問題

知人にアプリを使ってもらいたかったのに、herokuでのデプロイができませんでした。。  
デプロイができないと使ってもらうことすらできないのだと、改めて気付き基礎からしっかり固めようと決めました。
目標は何をしているか理解した上でES2の設定を15分でできるようになることです。
これから1週間はインフラ強化週間として一から学んでいきたいと思います。

## 基礎の基礎(練習問題)


<練習用ディレクトリを作成し全てコマンドを使用すること>
file(ファイル)、sample(ディレクトリ)
1. file1(ファイル) を作成
2. sample(ディレクトリ)を作成
3. sample2(ディレクトリ)を作成 & 3つできたか確認
4. sampleにfile2を作成
5. file2をfile3にコピー
6. file3をsample2に移動
7. file2の更新日付を保ったままfile4にコピー & 同じ時間か確認
8. file2を編集できるコマンドで開く
9. file2にabcdを書く
10. 保存し閉じる
11. もう一度開きaaaaと書く
12. 保存せず閉じる
13. file2の中身を見る(編集できないやつ)
→abcdが表示されていればOK
14. file2の中身に行数を合わせて表示させる



## Linuxコマンドの概要

コマンド(何をするか)・オプション(どのようにするか)・引数(何に対して)

例：　```cat -n sample.tex```

ファイルを開く(cat)・行数を表示する(-n)・sample.txtに対して


## 練習問題で使うコマンド


```console

% ls -l
total 0
-rw-r--r--  1 root root  0  2 11 06:36 file1
(アクセス権限/このファイルがリンクされている数/所有者/グループ名/ファイルサイズ/タイムスタンプ/ファイル名)


% cd sample
(移動/sampleに)


% cd ..
(一つ上のディレクトリに移動)


% mkdir sample
(ディレクトリを作成/sampleという名の)


% touch file
(ファイルを作成/fileという名の)



% cp file2 file3
(コピー/コピー元/コピー先)



% cp -p file2 file4
(更新日付を保ったままコピーされる)



% mv file2 ../sample2  
(移動/file2をsample2に)



% vi file2
(編集する/file2を)

iで入力可能
esc →　:wq 保存し閉じる(:w保存、:p閉じる)
esc →　:q! 保存せず閉じる



% cat file2
(開く/file2)



% cat -n file2
(開く/行数をつけて/file2を)
Amazon ECRからローカル環境にコンテナイメージをPullする方法 メモ

* ステージング環境などにデプロイ中のイメージを使ってローカル環境でアプリの動作確認したいケースがあったため、備忘録として手順をメモする。

## 手順

### 前提条件

* AWS CLI及びdockerはインストール済みであるものとする。
  * ECRへアクセス可能なIAMユーザーからアクセスキー/シークレットを払い出し、`aws configure`コマンドで事前に認証情報をセットしておくこと。

### 1. ECRログイン用パスワードを取得し、dockerログインする。

```sh
aws ecr get-login-password --region ${your_region} | docker login --username AWS --password-stdin ${your_aws_account_id}.dkr.ecr.${your_region}.amazonaws.com
```

* `aws ecr get-login-password`でログイン用パスワードを取得する。
* dockerコマンドの`--password-stdin` オプションを利用し、取得したパスワードを標準入力から読み込ませる。



### 2. ECRからイメージをプルする

dockerコマンドでイメージをpullする。

```shell
docker pull ${your_aws_account_id}.dkr.ecr.${your_region}.amazonaws.com/your_base_image:latest
```



### 3. Pullしたイメージを確認する

```shell
docker images
REPOSITORY                                                     TAG                 IMAGE ID            CREATED             SIZE
${your_aws_account_id}.dkr.ecr.${your_region}.amazonaws.com/your_base_image   latest              789a2179dc34        About an hour ago   500MB
```



### 4. Dockerfileからイメージを参照する

```dockerfile
FROM ${your_aws_account_id}.dkr.ecr.${your_region}.amazonaws.com/your_app:latest
```



## 参考情報

* [プライベートレジストリの認証](https://docs.aws.amazon.com/ja_jp/AmazonECR/latest/userguide/registry_auth.html)
発色が良すぎる Figma デスクトップアプリの色空間の変更（Mac）

Figma でデザインしている時とブラウザで見た時とで色が違うのが気になっていたのですが、ずっと放置していました。

ツールバー（メニュー）の [Figma] > [Color Space] > [sRGB] にすることで、通常の Chrome と同じ色で表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202008/e4a180b0-b0e9-fa37-9d67-17e06f3a2bc8.png" width="370">
たぶん Mac のデフォルトの色の再現が HDR で、標準色域のカラーより発色が良いからですかね・・・（知りませんが）。
WEBデザインをするなら、デザイナーは sRGB に設定していないと、出来上がったサイトを見てみたら想定より色あせてる、という事態になるのでは。

・・・以上です。
PHP 簡易掲示板作成　削除機能実装編 #3

[PHP 簡易掲示板作成　表示編 #2](https://qiita.com/yuyawatanabe1028/items/f62c6555cc723b083914)の続き
データの保存内容

```:test.txt
1<>yuya<>完成<>2021/2/8 10:13:16
2<>yuya<>完成<>2021/2/8 10:13:22
3<>yuya<>完成<>2021/2/8 10:13:25
```

#目標
削除機能を実装する
1.　削除対象番号を送信
2.　削除対象番号を受信
3.　受信した削除対象番号を変数に代入
4.　ファイルを開く
5.　ファイルの中身を1行1要素として配列変数に代入する
6.　ファイルの行数の数だけ繰り返し処理を行う
7.　処理の内容：区切り文字「<>」で分割
8.　処理の内容：投稿番号の取得
9.　処理の内容：投稿番号と削除対象番号が一致していない場合、書き込む
10.　ファイルを閉じる


#削除機能を実装する
1.　削除対象番号を送信

```html:HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>簡易掲示板</title>
</head>

<body>
    <form action="" method="post">
        <input type="number" name = "delete" placeholder="削除対象番号">
        <input type="submit" name="submit" value = "削除">
    </form>
</body>
</html>
```

2.　削除対象番号を受信
3.　受信した削除対象番号を変数に代入

```php:PHP
$delete = $_POST["delete"];
```

4.　ファイルを開く
削除対象ではない投稿だけを上書きすることで削除を実現したいから、
オープンモードは`"w"`

```php:PHP
$fp = fopen( $filename, "w");
```


5.　ファイルの中身を1行1要素として配列変数に代入する

```php:PHP
$lines = file($filename,FILE_IGNORE_NEW_LINES);
```


6.　ファイルの行数の数だけ繰り返し処理を行う
・始めの値： `$i`を`$lines`のインデックス番号として扱う
　　　　　　インデックス番号[0]から順番に取得したので0→`$i = 0`
・条件式 ：インデックス番号　<　要素の数
count関数を使って配列の要素の数を出す→`$i < count($lines)`
・増減式 ：処理一回ごとに、値を1ずつ増やす→`$i = $i + 1`→→`$i++`

```php:PHP
for ($i = 0; $i < count($lines); $i++){
    //処理の内容
}
```

7.　処理の内容：区切り文字「<>」で分割

```php:PHP
$line = explode("<>", $lines[$i]);
```
```php:具体例
$line = explode("<>", $lines[0]);
print_r($line);
```
```:結果
Array ( [0] => 1 [1] => yuya [2] => 完成 [3] => 2021/2/8 10:13:16 )
```
8.　処理の内容：投稿番号の取得

```php:PHP
$postnum = $line[0];
```

9.　処理の内容：投稿番号と削除対象番号が一致しない場合、書き込む

```php:PHP
if ($postnum != $delete){
    fwrite($fp, $lines[$i].PHP_EOL);
}
```


10.　ファイルを閉じる

```php:PHP
fclose($fp);
```

#まとめ

```php:PHP
<?php
    // 削除対象番号を受信受信した削除対象番号を変数に代入
    $delete = $_POST["delete"];

    // ファイルを開く
    $fp = fopen( $filename, "w");

    // ファイルの中身を1行1要素として配列変数に代入する
    $lines = file($filename,FILE_IGNORE_NEW_LINES);

    // ファイルの行数の数だけ繰り返し処理を行う
    for ($i = 0; $i < count($lines); $i++){

        // 区切り文字「<>」で分割
        $line = explode("<>", $lines[$i]);
        
        // 投稿番号の取得
        $postnum = $line[0];

        // 投稿番号と削除対象番号が一致しない場合、書き込む
        if ($postnum != $delete){ 
            fwrite($fp, $lines[$i].PHP_EOL);
        }
    }

    // ファイルを閉じる
    fclose($fp);
?>
```
Elasticsearchにkuromojiをインストール＋kibanaでデータ閲覧

# TL;DR
Elasticsearchに、日本語解析のプラグインである[kuromoji](https://www.atilika.com/ja/kuromoji/)をインストールし、可視化ツールである[kibana](https://www.elastic.co/jp/kibana)からデータを閲覧してみました。
環境構築の手順を記載します。
（内容は、ほぼほぼ備忘録です）

# Elasticsearchの準備
GitHubのソースをGradleでビルドしたモジュール(Ver.8.0.0)では、対応するkuromojiのモジュールが存在せず、インストールできませんでした。
そのため、リリースされているモジュールを[公式サイト](https://www.elastic.co/jp/downloads/elasticsearch)ダウンロードし、Elasticsearchの環境を構築しました。
モジュールをダウンロードし、`tar`コマンドで解凍

```
wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.10.2-linux-x86_64.tar.gz
tar -zxvf elasticsearch-7.10.2-linux-x86_64.tar.gz
```
起動方法は、GitHubのソースからビルドした場合と同様

```
cd elasticsearch-7.10.2
./bin/elasticsearch
```

# kuromojiのインストール
`elasticsearch-plugin`で、kuromojiをインストールします。

```
# インストールの実行
./bin/elasticsearch-plugin install analysis-kuromoji
# インストールの確認
./bin/elasticsearch-plugin list
```

# kibanaの準備
kibanaの環境を作ります。GitHubにソースコードもありますが、今回は公式のリリースモジュールをダウンロードして環境構築しました。
（kibanaのビルド手順の中で、`nvm`を使用する場面があるが、筆者の開発環境では`n`でnodeを管理しており、nodeの管理ツールがバッティングすることが怖いため）

手順は、Elasticsearchの場合と同様です。まず、リリースモジュールをダウンロードします。

```
# モジュールをダウンロード
wget https://artifacts.elastic.co/downloads/kibana/kibana-7.10.2-linux-x86_64.tar.gz
# tarコマンドで解凍
tar -zxvf kibana-7.10.2-linux-x86_64.tar.gz
# 解凍したディレクトリに移動
cd kibana-7.10.2-linux-x86_64
```

デフォルトでも起動できますが、localhost以外からもアクセスできるように、config配下にある設定ファイル、`kibana.yml`を編集します。

```kibana.yml
# 外部からのアクセスを許可
server.host: "0.0.0.0"
```
設定完了後、以下のコマンドでkibanaを実行。

```
./bin/kibana
```
kibanaの起動後、ブラウザから`http://localhost/5601`にアクセス。

# kibanaからデータの閲覧
データの閲覧は、Discoverタブから行います。データを閲覧するにはindexを指定する必要があるため、index Patternsの設定を行います。
詳しい手順は、参考サイトを参照。

# 参考サイト
- [Kibanaを使ったデータの閲覧](https://thinkit.co.jp/article/14083)
[rails]renderメソッドのついて

#renderメソッドとはなにか
呼び出すテンプレート（ビュー）ファイルを指定するメソッドです。
コントローラー・ビューで使うことができます。
今回はビューでのrebderについて説明します

#renderメソッドの使い方
ビューファイルではこのようにつかいます

```
<%= render 'ファイル名' %>
```

しかし、ビューファイルでrenderメソッドを使うときは部分テンプレートを呼び出す場合がほとんどです。

#部分テンプレートとは
部分テンプレートとは複数のビューファイルの共通部分として作成するビューファイルです。
部分テンプレートを使えば、同じHTML構造の部分を共通化することができます。

#部分テンプレートの作成
部分テンプレートとしてビューファイルを作成する時は__tweet.html.erbのようにファイル名の前に＿（アンダースコア）をつける必要があります。

このようなファイル名で作成すると部分テンプレートとして使うことができます。

#部分テンプレートを呼び出す
<%= render partial: ‘tweet’ %>
_と拡張子除いた形で呼び出します。
partialは部分テンプレートを明示的に指定するオプションです。

#部分テンプレートで変数を使う
<%= render partial: ‘tweet’, locals: { tweet: @tweet } %>
localsオプションを用いて、
locals: { 部分テンプレート内で使いたい変数: 持っていきたい値 }
となります

#まとめ
renderメソッドは呼び出すテンプレートファイルを指定できるメソッド
オプションを使うと様々な方法で呼び出すことができる
partialは部分テンプレートを明示的に指定するオプション
localsは { 部分テンプレート内で使いたい変数: 持っていきたい値 }
[デイリーコーディング] 文字列内の各アルファベットを10個後のものに変換する

#今日の問題: 文字列内の各アルファベットを10個後のものに変換せよ

ord()とchr()を使って解決していきます。

```python:回答(Python3)
from icecream import ic # デバッグ用にicecreamをインポートしています。

def move_ten(st):
    result = ""
    for i in st:
        ordI = ord(i)
        if ordI >= 113:
            result += chr(ordI - 16)
        else:
            result += chr(ordI + 10)
    return result

ic(move_ten("testcase")) # "docdmkco"
ic(move_ten("codewars")) # "mynogkbc"
ic(move_ten("exampletesthere")) # "ohkwzvodocdrobo"
ic(move_ten("returnofthespacecamel")) # "bodebxypdroczkmomkwov"
ic(move_ten("bringonthebootcamp")) # "lbsxqyxdrolyydmkwz"
ic(move_ten("weneedanofficedog")) # "goxoonkxyppsmonyq"
ic(move_ten("qeneedanofficedog")) # "goxoonkxyppsmonyq"
```

```python:結果
ic| move_ten("testcase"): 'docdmkco'
ic| move_ten("codewars"): 'mynogkbc'
ic| move_ten("exampletesthere"): 'ohkwzvodocdrobo'
ic| move_ten("returnofthespacecamel"): 'bodebxypdroczkmomkwov'
ic| move_ten("bringonthebootcamp"): 'lbsxqyxdrolyydmkwz'
ic| move_ten("weneedanofficedog"): 'goxoonkxyppsmonyq'
ic| move_ten("qeneedanofficedog"): 'aoxoonkxyppsmonyq'
```

ベターな回答:

```python:BetterCode
def move_ten(st):
    return ''.join(chr(ord(i)+10) if i<'q' 
        else chr(ord(i)-16) for i in st)
```

参照: Move 10 \([Codewars](https://www.codewars.com/)\)
可変長引数と省略できる引数

今回は引数の個数を指定せず取ることができる可変長引数と初期値を設定することができる（省略可能な）引数についてです。

この方法を知っていれば引数で迷うことは少なくなります！
ではいきましょう。


## 可変長引数

引数の後ろに...をつけるだけで、引数は配列型になり、いくつでも入れることが可能になります。
もちろん0個でもオッケーです。

```swift
func totalPrice(prices: Int...){
  var total: Int = 0
  for price in prices {
    total += price
  }
  return total
}
```

```swift
let goukei = totalPrice(prices: 100,200,300)
print(goukei)

// 600
```

## 引数に初期値を設定する

引数に初期値を設定することによって、渡す引数を省略することができます。

```swift
func person(name:String, age:Int = 12){
  print("私の名前は\(name)です、\(age)歳です")
}
```

ageに12という初期値が設定されているのがわかります。
この場合ageに何も渡さない時はデフォルトで12が入ります。

```swift
person(name: John)

// 私の名前はJohnです、12歳です
```


以上、可変長引数と引数に初期値を設定する方法でした。
rails db:createエラーの解決例

routes.rb:6:syntax error,unexpected keyword_end
こちらのエラーはroutes.rbの6行目に何らかの文法エラーが存在するという内容です。

routes.rbの6行目の記述の末尾に「,」が入力されていました。
「,」はアクションの間に記述するので末尾にある場合はエラーになります。
PHP 自作のコレクション(リスト)クラスを実装する

[Laravel](https://laravel.com)の[Collection](https://readouble.com/laravel/8.x/ja/collections.html)クラスのような、`foreach`可能なオブジェクトを作ります。
実装の幅が広がるので覚えておいて損はないです。

## 環境

- PHP 8.0.1

## 前提知識: IteratorAggregate

コレクションクラス(イテレート可能なオブジェクト)を作成するためにはPHPが用意している `IteratorAggregate` インターフェースを契約する必要があります。
https://www.php.net/manual/ja/class.iteratoraggregate.php

```php
IteratorAggregate extends Traversable {
    abstract public getIterator(): Traversable
}
```

## Let's try!

- Task.php (入れ物に入れる物)
- TaskList.php (入れ物)
- main.php (お試し実行用のファイル)

3つのファイルを作ります。

### Task.php

何でもいいのですが、例として`Task`クラスを作ります。

```php:Task.php
<?php
declare(strict_types=1);

final class Task
{
    public function __construct(private int $id)
    {
    }

    public function name(): string
    {
        return 'task' . $this->id;
    }
}
```

### TaskList.php

Taskクラスを格納するTaskListコレクションクラスを実装します。

```php:TaskList.php
<?php

declare(strict_types=1);

/**
 * @implements IteratorAggregate<int, Task>
 */
final class TaskList implements IteratorAggregate
{
    public function __construct(private array $attributes = [])
    {
    }

    public function getIterator(): ArrayIterator
    {
        return new ArrayIterator($this->attributes);
    }
}
```

コレクションとなるクラスは `getIterator()` メソッドを実装していればokです。

### main.php

```php:main.php
<?php

declare(strict_types=1);

require('./Task.php');
require('./TaskList.php');

$taskList = new TaskList([
    new Task(1),
    new Task(2),
    new Task(3),
    new Task(4),
    new Task(5),
]);

foreach ($taskList as $task) {
    echo $task->name() . PHP_EOL;
}
```

`main.php` を実行してみます。

```shell-session
$ php main.php
task1
task2
task3
task4
task5
```

`TaskList` クラスを`foreach`で回してTaskクラスのインスタンスを取得して`name()`メソッドを実行できました。

## 補足: add(), count()

`add()`, `count()` を追加するとより便利に使えます。
[`Countable`インターフェース](https://www.php.net/manual/ja/class.countable.php)を契約して`count()`メソッドを実装するとより良いです。

```php
<?php

declare(strict_types=1);

/**
 * @implements IteratorAggregate<int, Task>
 */
final class TaskList implements IteratorAggregate, Countable
{
    public function __construct(private array $attributes = [])
    {
    }

    public function getIterator(): ArrayIterator
    {
        return new ArrayIterator($this->attributes);
    }

    public function add(Task $task): void
    {
        $this->attributes[] = $task;
    }

    public function count(): int
    {
        return count($this->attributes);
    }
}
```

`add(Task $task)` メソッドでは型宣言しているので、配列追加時にTaskのインスタンスを安心して追加できます。

```php:main.php
<?php declare(strict_types=1);

require('./Task.php');
require('./TaskList.php');

$taskList = new TaskList();
$taskList->add(new Task(1));
$taskList->add(new Task(2));
$taskList->add(new Task(3));
echo $taskList->count() . PHP_EOL;
echo count($taskList) . PHP_EOL;
```

`Countable`インターフェースを実装したクラスは`count($taskList)`と[`count()`](https://www.php.net/manual/ja/function.count.php)関数を使用できます。

```shell-session
$ php main.php
3
3
```

## 参考

- https://qiita.com/Hiraku/items/14722922441f9ed3fbbb
- https://stackoverflow.com/questions/22272280/proper-phpdoc-comment-for-iteratable-object