OmniAICreator/Qiita-1.07M huggingface dataset:
40代プログラミング初心者がPython＋FlaskでQiitaとZennとはてブのトレンドまとめサイト作ってみた

作ったサイト名：話題のテック　下がサイトです

https://wadainotech.com

Qiitaの記事にいいねをしてくれると、勉強のやる気が出るのでお願いします

40代の初心者のモチベーション応援してね

https://qiita.com/usagipy/items/3cedb356702c1301028b

<b>40代のプログラミング初心者が8ヶ月目webサービスを作りたい


Webサービスとかめんどくさいだろうなぁ。。。どうやってつくるのかなぁ


<b>よし、本を買おう！買いました


Pythonではじめる Webサービス&スマホアプリの書きかた・作りかた

この本のコンセプト

<b>リリースしろ
たくさん作れ

<b>1/3を読んだ時点でとりあえず作ろうと思いました

この本はpythonのフレームワークのFlaskを使っています。

Flaskってなんて読むの？フラスクでいいの？

ついでにFlaskの本も2冊購入しました

リリースしろたくさん作れのために、アイデアの引き出し用に本はあっても困らないので

この段階では何を作るか決まっていないとりあえず本を買う

Pythonフレームワーク Flaskで学ぶWebアプリケーションのしくみとつくり方

Python FlaskによるWebアプリ開発入門 物体検知アプリ&機械学習APIの作り方


<h2>めんどくさい！はプログラミングの最高のアイデアになる

1時間ほどネットサーフィンしながら思ったこと

- Qiitaのトレンドまでの遷移がめんどくさい
- zennのトレンドもみたいけどアクセスめんどくさい
- はてブのテクノロジー系の記事もみたい

じゃあ自分用にQiitaとzennとはてブのテクノロジーのリンク集サイトを作ればいいじゃん

っということで作りました

話題のテック　下がサイトです

https://wadainotech.com

下はイメージです

![FireShot Capture 009 - 話題のテック - wadainotech.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2603269/6afa4903-21cb-7529-9a25-2db5548ec202.png)


話題のテック　https://wadainotech.com




<h2>実装環境とか使ったものとか

レンタルサーバ：conoha WING
独自ドメインも取得
データ収集：各サイトRSS
データ保存：CSVファイル

MYSQLにデータを保存するか悩んだけど、とりあえずリリース前提で簡単にしたかったので最新のRSS情報をCSVファイルに保存することにしました

サーバはレンタルサーバをWordPress用にかりたので、それを使いたい！

<h3>ファイル関係</h3>

Flaskで作ったpythonのプログラミングファイルとHTMLファイル
- pythonファイル：Fllask用ファイル1つ、RSSを読み込んでCSVに保存するファイル1つ 計2つ
- テンプレートのHTMLファイル：2つ プライバシーポリシー用1つ
- RSSから必要な情報を抽出したデータをサービスごとに1つずつ：計3つのCSV
- コードの行数：pythonとHTMLとCSSをあわせて200行前後だと思います

RSSで最新のデータを更新させるのでcronで定期実行かけてます

ページ構成は4ページ
TOPページ
├はてなのリンク集ページ
├Qiitaのリンク集ページ
└zennのリンク集ページ

<h2>FlaskはテンプレートのHTMLを簡単に使い回せるからめっちゃ楽！！

flaskなら小規模サイト量産できるじゃん！！感動しました

<h3>どれぐらいで開発できた？４日で完成</h3>

- アイデア１時間
- Pythonで実装２日
- サーバー設定とプログラムの調整１日
- css1日

css本当に嫌だったので、適当に本を買ってやった

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

ベストセラーなのでかった

classじゃなくてidを同じやつたくさん使ってたりしたのであとから直した

微妙なズレとか気になるほんとやだ

フロントエンドエンジニアよりもバックエンドエンジニアになりたい

なんかやってて楽しい　

サーバ設定わけわからんけど、なんか自分強くなってる感がある

カタカタカタターン！！っていうの楽しい

<h3>レンタルサーバよりVPSのほうがいい気がする

作ったコードだとうまくConohaWINGで動かなかったので、いろいろコードを書き直して調整しました開発環境と本番環境で挙動が変わるので大変ということを学びました

そもそもレンタルサーバなので、制限があり、その環境にあわせるのは大変でした。何度かやめようかと思ったけど、ネットで出来てる人がいるから絶対に諦めないでなんとか乗り越えました

<h3>それでも規模が小さいならレンタルサーバで対応できる

でも、のちのちのことを考えてインフラ周りも勉強したいのでVPS借ります

herokuは無料なくなるしね

AWSは使った文だけで安くできるらしいのでそっちも学習がてらやりたいと思う

でも、万が一バズったりしたら料金がやばいっていう記事も見たので

嬉しい悲鳴が欲しい・・・

ついったー：　https://twitter.com/usagipycom
ブログ

https://usagipy.com/
天気予報APIを改良してみた #protoout

＃protoout

<b>天気予報は生活するうえで重要な情報だから、もっと詳しく知りたいと思った</b>
私たちが毎日気にするものの一番は、朝起きたときの空の明るさと気温だと思
うんです。そして毎日手にするスマホでは詳しい情報があれば、その日はなん
となくやれそうな気になると思って天気予報APIを改良してみました。

:::note info
■作成したもの
　地名コードをあらかじめGoogleSpreadSheetに登録して
　詳細な情報を返すようにした。

　お天気API
　make(iPaas)
　LINE Messaging API
　Google Sheets API

:::


LINEに天気予報が知りたい「地名」を打ち込むと詳細なテキストが返されます。
入力は気象台がある地名になりますが、主要な都市は確実にヒットします。

![RPReplay_Final1662460200-コピー.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784966/61b1b0ef-0979-208d-c7fb-e42719991087.gif)
***
<b>make</b>
![LINbot-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784966/12ad08c1-c1b3-dbe7-e0fc-db5834d13cf8.png)
LINEモジュール Watch Eventで文字入力を検知
Google Sheets module Search Rows で入力された文字から合致するお天気API用の数字文字列を検索
HTTPモジュール Make a request で設定したURL+数字文字列を使ってお天気APIにリクエストを送信する 
JSONモジュール module Parse LSON でお天気APIからレスポンスされたデータを解析して使用しやすくする
LINEモジュール Send a reply message で解析されたデータを使用してメッセージを作成し、line側に出力する
Google Sheets module Add a Row でどのような検索が行われたのかをログとして保存する

LINEで知りたい「地名」の天気予報が表示される

google spread sheetでで検索されたログを収集したい。

:::note info
■解決した課題
天気予報を知りたい人が使用すると想定した場合に、地名の「数字列」で検索するのは
不便で、一般に地名に対応した「数字列」を知る人はいないでしょう。
➡　この課題を解消すべく「地名」での検索が出来るように改良しました。
:::

①利便性の課題
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784966/f09ddade-0e3c-d584-f53b-c8ca2e161eb5.png)



②データ収集の課題
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784966/888ddb2e-7a12-2cec-6c46-136898919d9a.png)
これを利用した人が、いつどんな時に、どんな地名について情報を収集したのか記録
しておくことを考えました。
→それには検索ログをgoogle sheetに記入し、利用データを蓄積出来るようにしました。

:::note info
■モジュールを組めばエラーの連続で完成まで緊張とイライラの連続でした。
　同僚のアドバイスと校長先生のフォローアップのおかげでどうにか形にすることがで
　きました。素直に感謝です。

　ありがとうございました。

:::

:::note info
■参考したリンク先　：　Google Sheets でデータに基づいて意思決定
　https://www.google.com/intl/ja_jp/sheets/about/
:::
***
<b>将来はLINE botとGoogleSpreadsheetと社内SQLサーバーを連携したい</b>
トラブルのときの対応方法をLINEに条件入力するだけで、過去にこんなことがことがあったよ
なんて返してくれたら現場は重宝すると思うんです。
社内にはSQLサーバーに詳しい方がいて、いろいろな可能性を生き生きと説明してくれます。
実際にその方が組んだSQLサーバーを使用していますが、ほしいデータがマッハにダウンロー
ドできてとても助かっています。これをどうにか現場の従業員が使える形になればいいと思
って今回Google Spreadb sheetを活用してみました。

:::note info
SQL Serverは正式名称「Microsoft SQL Server」と呼ばれます。
Microsoft SQL Server とは、マイクロソフトが開発しているリレーショナルデータベース管理システム (RDMS) です。
簡単にいうとマイクロソフトのデータベース製品となります。Windows環境でとても使いやすく、人気が高いです。
特徴としては「Microsoft SQL Server Management Studio」という管理ツールがあること。
そのためSQL Server の設定、管理、開発等をとても行いやすいです。
そしてクエリーを書くには、「T-SQL (Transact-SQL)」という SQL 言語を使用します。
:::
【PHP基礎復習７】掛け算②

[問題]
ユキさんは、部屋の壁にポスターを貼ろうとしています。
1枚で幅Acmのものを4枚貼ると、幅は合計何ｃｍになるでしょうか。

# コード
```PHP
$input = fgets(STDIN);
echo $input*4, PHP_EOL;
```

↓　30と入力

# 結果
```
120
```
コンテナとは何か？

１、コンテナとは？
一言で言うと、「プログラムの実行空間を隔離する技術（アプリケーション本体、設定ファイル、ライブラリなど）の総称」。
コンテナの英単語自体が、「容器」を意味する。
「容器」と同じように、コンテナ自体も一度作成してしまえば、他の環境でも載せ替えて実行することが可能です。

２、なぜコンテナが必要なのか？
持ち運びがしやすい、起動・処理の高速化等が理由です。
コンテナはホストOSを利用しての実行なので、その分処理がしやすいのが特徴です。

３、コンテナの種類
１）システムコンテナ
OS全体をコンテナ化したものです。

２）アプリケーションコンテナ
特定のアプリケーションをコンテナ化したものです。Dockerが代表例です。

４、コンテナとdocker-compose.yml
開発においては、複数のコンテナを同時に起動・管理する必要もあります。
こうした複数のコンテナを管理する際に使用するファイルがdocker-compose.ymlです。
このファイルでコンテナ間の依存関係やネットワーク等を設定することが可能となります。

５、参照URL
https://www.skyarch.net/column/container/
https://www.amazon.co.jp/%E3%82%B5%E3%83%BC%E3%83%90-%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AE%E5%9F%BA%E6%9C%AC%E3%81%8C%E3%81%93%E3%82%8C1%E5%86%8A%E3%81%A7%E3%81%97%E3%81%A3%E3%81%8B%E3%82%8A%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8F%E6%9C%AC-%E9%A6%AC%E5%A0%B4-%E4%BF%8A%E5%BD%B0/dp/4297119447
mod_rewriteについて

<h2>はじめに</h2>

普段サーバーを触ることのない人がApache HTTP Serverの設定をやった備忘録です。
Apache2.4x、AmazonLinux2環境下での内容です。

<h2>公式</h2>

https://httpd.apache.org/docs/2.4/en/

ディレクティブ一覧
https://httpd.apache.org/docs/2.4/mod/directives.html

<h2>前提</h2>

rewrite_moduleが読み込まれている必要があります。
`httpd -M`等で確認します。
```
Loaded Modules:
 … 略 …
 rewrite_module (shared) 
```
もしなければ以下をconfに追記します。

<i>LoadModule rewrite_module modules/mod_rewrite.so</i>

この時、IncludeOptionalディレクティブを追加して別のconfファイルに記述しておくことで管理しやすくなります。
分割した場合は読み込まれているかを確認しておきます。
`httpd -t -DDUMP_CONFIG`

設定後のテストにはIfModuleディレクティブが便利です。
https://httpd.apache.org/docs/2.4/en/mod/core.html#ifmodule

また、ログ出力はver2.2と違いRewriteLog・RewriteLogLevelは使えません。
私の環境ではデフォルト値はwarnになっていましたので、設定中は最も詳細に出力するよう上げておきます。

<i>LogLevel debug rewrite:trace8</i>

各レベルの詳細や特定のモジュールのレベルを上書きする方法などは以下に書かれています。
https://httpd.apache.org/docs/2.4/en/mod/core.html#loglevel

confの変更を反映する場合は再起動が必要です。
`sudo systemctl restart httpd.service`

<h2>書き方</h2>

htaccessファイルに設定することもできますが、理由が無ければconfに直接記述します。
confのDirectoryブロック内に記述することとhtaccessに記述することは同じ効果が得られるようです。
https://httpd.apache.org/docs/2.4/en/howto/htaccess.html
この場合、AllowOverrideを変更する必要はありません。

Directoryのパスを指定する際は、まずDocumentRootディレクティブの指定先を確認しておきます。
もしここが"/var/www/html"のような絶対パスになっていない場合、ServerRootも確認しましょう。

例えば、以下のようにDirectoryディレクティブで括ったブロックはドキュメントルート直下のhogeディレクトリ以下に対するアクセスにマッチします。

<i>\<Directory /hoge></i>
<i>RewriteEngine on</i>
<i>RewriteCond %{REQUEST_URI} ^.*/fuga/index\\.html$</i>
<i>RewriteRule .\* https:\//fuga.com</i>
<i>\</Directory></i>

RewriteCondはRewriteRuleを適用する条件を指定します。
パターン部分にコロンなどを記述する場合はエスケープが必要です。
RewriteCondを複数記述した場合はデフォルトでand条件となります。
or条件に変更するには、
<i>RewriteCond %{REQUEST_URI} ^.*/index\.html$ [OR]</i>
のように末尾にフラグを追加します。

Locationディレクティブも同様にマッチしますが、Directoryが先に適用されるため注意が必要です。
iCloudのカスタムメールドメインをLaravelの送信メールSMTPに設定してみた


## この記事について



Appleのサイトには下記の様に書かれていた のですが、これ通りにはできず、悩んだので、ココに記載します。


https://support.apple.com/en-us/HT202304

> ### SMTP information for the outgoing iCloud Mail server
>
> * Server name: smtp.mail.me.com
> * SSL Required: Yes
>   *If you see an error message when using SSL, try using TLS or STARTTLS instead.*
> * Port: 587
> * SMTP Authentication Required: Yes
> * Username: Your full iCloud Mail email address (for example, johnappleseed@icloud.com, not johnappleseed)
> * Password: Use the app-specific password that you generated when you set up the incoming mail server.
> * 

## 結論



.envに下記の様な設定を入れることで送信できました。

```php
# email
MAIL_MAILER=smtp
MAIL_HOST=smtp.mail.me.com # ホスト
MAIL_PORT=587  # ポート番号
MAIL_USERNAME=metis_selen@icloud.com
MAIL_PASSWORD=ebhlnzfiyrpqjjeu #ハイフンなし
MAIL_ENCRYPTION=tls #sslではつながらず、tlsで接続しました。
MAIL_FROM_ADDRESS=metis@selen.tokyo # 送信元メールアドレス
MAIL_FROM_NAME="${APP_NAME}" # 差出人名前
```



* ユーザー名は`icloud.com`のものを使用する
* パスワードはハイフンなしで使用する
* tlsを使用する
* 送信元メールアドレスにカスタムドメインを設定するとそのドメインから送信去れる
* ` php artisan config:cache`コマンドで`.env`を編集した後はキャッシュをクリアする



そんなところです。





色々試行錯誤して接続できましたが、

## 蛇足



取得したドメインのDNSレコードを変更し、ICroudからカスタムドメインのメールが受信できるように設定していることを前提とします。



### APP用パスワードを発行方法



下記のURLから行う。

https://appleid.apple.com/



サインインし、APP用パスワードの詳細を表示する。




![image-20220906201213274.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631741/14f6b296-794d-05be-019d-94e847ab8da7.png)


すると下記の様な画面が開く。

![image-20220906201236660.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631741/da052f7f-05cc-8df1-804b-9236f17d2f79.png)





+ボタンから追加できる。





![image-20220906201305100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631741/0a698092-d4ed-a4fb-f590-95c447ef36ca.png)


適当な名前をつけパスワードが発行する。





この発行されるパスワードのハイフンなしで設定します。

ハイフンなくていいとかどこにも書いてないんですが・・・



### エラー

ちなみに`tsl`ではなく`ssl`を使用すると下記の様なエラーが発生しました。

```
 Connection could not be established with host smtp.mail.me.com :stream_socket_client(): SSL operation failed with code 1. OpenSSL Error messages:
error:1408F10B:SSL routines:ssl3_get_record:wrong version number {"exception":"[object] (Swift_TransportException(code: 0): Connection could not be established with host smtp.mail.me.com :stream_socket_client(): SSL operation failed with code 1. OpenSSL Error messages:
error:1408F10B:SSL routines:ssl3_get_record:wrong version number at C:\\Users\\selen.domein\\Documents\\02_project\\test\\laravel_react_template\\vendor\\swiftmailer\\swiftmailer\\lib\\classes\\Swift\\Transport\\StreamBuffer.php:261)
[stacktrace]
```
LPC812で800KHzを作る


x なぜかまちがっている


x mbed2リビジョン144
x リビジョンの変更ができる人むけ



目的
GPIOのテスト




```c++



//GPIO_800KHz_812_1

#include "mbed.h"


//         TX    RX
//Serial pc(P0_4, P0_0); //812


//GPIOA->ODR    7,995Mhz 010

DigitalOut myled(P0_7);

#define io_def 0x80

//             654321009876543210
#define on1    0b0000000010000000
#define off1   0b0000000000000000

//メイン関数
int main() {

    //__disable_irq(); // disable interrupt
    //__enable_irq(); // enable interrupt

    //pc.printf("%x\r\n", (LPC_GPIO_PORT->DIR0) ); //0x80

    //GPIO bkup
    //int ii  = LPC_GPIO_PORT->DIR0;

//    //                        1234567890123456
//    int on1  = LPC_GPIO_PORT->DIR0 | 0b0000000000010000;
//    int off1 = LPC_GPIO_PORT->DIR0 & 0b1111111111101111;


//while(1){}


   //1:1
    while(1) {


        LPC_GPIO_PORT->DIR0 = on1;
        LPC_GPIO_PORT->DIR0 = on1;
        LPC_GPIO_PORT->DIR0 = on1;
        LPC_GPIO_PORT->DIR0 = on1;
        
        LPC_GPIO_PORT->DIR0 = on1;
        LPC_GPIO_PORT->DIR0 = on1;
        LPC_GPIO_PORT->DIR0 = on1;
        LPC_GPIO_PORT->DIR0 = on1;

        LPC_GPIO_PORT->DIR0 = on1;
        LPC_GPIO_PORT->DIR0 = on1;
        LPC_GPIO_PORT->DIR0 = on1;
        
        
        

        LPC_GPIO_PORT->DIR0 = off1;
        LPC_GPIO_PORT->DIR0 = off1;
        LPC_GPIO_PORT->DIR0 = off1;
        LPC_GPIO_PORT->DIR0 = off1;

        LPC_GPIO_PORT->DIR0 = off1;
        LPC_GPIO_PORT->DIR0 = off1;
        LPC_GPIO_PORT->DIR0 = off1;
        LPC_GPIO_PORT->DIR0 = off1;

        LPC_GPIO_PORT->DIR0 = off1;
        LPC_GPIO_PORT->DIR0 = off1;
        LPC_GPIO_PORT->DIR0 = off1;


    }//while


// 0.3 0.3 0.3 0.3 0.3 0.3 0.3 0.3 0.3 0.3 0.3 0.3 0.3 0.3 

/*
   //0.3us 800khz
    while(1) {




    }//while
*/


// 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1

/*
   //1us 800khz
    while(1) {



    }//while
*/


}//main





```



![o_con833.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/840352/ac1abb70-6d9a-8ba5-69c4-80832ceb5d9c.jpeg)


-13-
GitHub備忘録[四進編]

# はじめに
　ゲームが楽しすぎてプログラム作成が全く進まないという贅沢な悩みを抱えています。
　久しぶりにプログラムをWindowsで組んでいるとLinuxとは違うソフトが使える点に、すごく便利だと感動しました。そこで、そういえばWindowsを触っている時にGitHubを触ったことがないなと思い当たり、GitHubの使い方を調べてみました。
　その備忘録です。

# Gitのダウンロード

　次のサイトからGitのインストーラーをダウンロードします。

https://gitforwindows.org/

　適当に「次へ」を連打してインストールを完了させてください。

# コマンド

　インストールが完了すれば、次のコマンドを使用して、ちゃんとインストールされていることを、もしくはコマンドが環境変数に適応されていることを確認してください。

```
git --version
```

　僕がインストールした環境であればgit version 2.37.3.windows.1と表示されました。
　これからgitへのpushだとか、githubへのpushはlinuxと同様のコマンドです。

# 終わりに
　CUIに慣れてしまっているため、下手にGUIに移したくないとは思うところだったので、Windowsでもlinuxと同様に使用できるのはありがたいです。
【PHP基礎復習6】最大値と最小値

[問題]
5つの入力値のうち、最大値と最小値を出力させなさい。

# コード
```PHP
$input_1 = fgets(STDIN);
$input_2 = fgets(STDIN);
$input_3 = fgets(STDIN);
$input_4 = fgets(STDIN);
$input_5 = fgets(STDIN);
echo max($input_1, $input_2, $input_3, $input_4, $input_5);
echo min($input_1, $input_2, $input_3, $input_4, $input_5),PHP_EOL;
```

↓　3、5、4、9、6と入力

# 結果
```
9
3
```

☆最大値を求める
max(＄a, ＄b, ＄c);

☆最小値を求める
min(＄a, ＄b, ＄c);

☆配列の要素の最大値・最小値を求める場合は、以下のようにする。
```php
$array = [1,5,6,4];
echo max($array);
```
↓　結果
```
6
```
Reactエンジニアに向けたReact Nativeのすゝめ

## はじめに
株式会社Another worksでインターンをしている、ハッケイと申します。
業務では主にTypeScript, ReactNativeでモバイルアプリの開発をしています。（1年半くらい）
4月から株式会社Another wokrsにて正社員として働きます。

## ReactNativeという選択肢
ReactNativeではReactで培った知識や技術の多くを活かすことができます。
React経験者は、手軽にnative開発ができます。

Reactエンジニアに向けてReactとReactNativeの共通点やReactNativeのメリット等紹介できたらと思います。

## ReactNativeとはなにか
javascriptでnative層(ios, android)のuiを動かしている、nativeのコンポーネントを抽象化している存在といえます。

JavaScriptを使用して各プラットフォームのAPIにアクセスし、UIの外観と動作を記述します。
内部でネイティブのレンダリングAPIが呼び出されるので、WebViewではなく、ネイティブのUIが描画されます。基本的にOSに準拠したUIになります。

ざっくり言うと、javascriptを通してネイティブのUIを構築/操作しているイメージです。

*flutterなどはdartで実装されたuiを表示しているらしい。（ネイティブのUIではない）


公式にわかりやすい図がありました。

|reactnative|android|ios|
|:---|---:|:---:|
| Image|ImageView|UIImageView|
| Text|TextView|UITextView|

![スクリーンショット 2022-03-30 16.25.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1628649/2e98fb3d-ea56-ccdf-d375-1d1ad8f29abb.png)
参考：https://reactnative.dev/docs/intro-react-native-components


## web開発と共通している部分

- JSXでUIの構築
ほとんどReactの知識でUIの作成ができます。
関数コンポーネント、hooksを使うことができます。

- CSSに近いスタイリング
基本的に今まで培ってきたCSSの知見が活かせます。
yoga layoutが採用されており、flexも使えます！
ただし、webとは少し違う部分もあるので注意は必要。
キャメルケースでstyleを記述する。flex-gapは使用できないなど

- chromeのdevelopperToolが使える
consoleやnetwork、performanceのデバッグが可能
ReactnativeDebuggerを使えば、ReduxDevtoolsなんかも使える。


- Hot reloadによるwebに近い開発体験
ソースコードを保存するたびに自動でリロードが行われます。
expoを利用することでurlを読み取るだけで実機開発も可能。


- TypeScriptが使える
型は正義


## expoという最強の相棒
expoとは、ReactNativeアプリの開発やビルドを支援してくれるサービス。
様々なライブラリを提供しており、どれもクオリティが高い印象。ドキュメントもかなり読みやすい。
更新頻度もとても早くて、信頼しています。

json形式の設定ファイルを記述するだけでios/androidの設定をexpo側でやってくれるのが本当にありがたい。

https://docs.expo.dev/


## ２種類のworkflow
expoを利用する場合、2種類のworkflowを選択できる。
最初はManaged workを利用するのがおすすめ。

__Managed workflow__
expoがネイティブ開発の複雑な部分を管理してくれるので「managed」
Managed　Workflowを利用すればネイティブのコードをほとんど書かずに開発することができる。
その代償として、ネイティブに依存した複雑な実装ができなかったりもするが、途中でBareに切り替えることも可能。

__Bare workflow__
expoの管理から外れたworkflowなので「bare(裸)」
ネイティブレイヤーのコードを自由に変更することが可能。
管理から外れた代償として、ネイティブ関連の設定を自分で行わなければならない。
BareからManagedに移行することはできない。


## ReactNativeのメリット
・クロスプラットフォームなので開発がはやい
・社内でReactの知見やロジックを共有できる
・React経験者なら学習が容易
・expoを使えば証明書周りがとても簡単

## ReactNativeのデメリット
・情報が少ない（特に日本語の情報は全然ない）
・コミュニティ・ドリブンなので「これ使っとけばOK！」といった決定版のライブラリが少ない
・ネイティブ言語での開発（swift, kotlin）に比べてパフォーマンスが劣る
・ライブラリを多用するのでアップデートの際に依存関係がバグる

## 学習のすゝめ
まずはチュートリアルから触れてみるのがおすすめです！
https://reactnative.dev/docs/tutorial
【Swift】アプリがバックグラウンドからフォアグラウンドに切り替わった事を検知する

# はじめに
フォアグラウンドになった事を判定することがあったので記事に残しておきます。

# 実装
```swift
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        NotificationCenter.default.addObserver(
            self,
            selector: #selector(foreground),
            name: UIApplication.willEnterForegroundNotification,
            object: nil
        )

    }
    
    @objc func foreground() {
        print("フォアグラウンド")
    }
}
```

# おわり
`NotificationCenter`を有効活用できたらできることの幅が広がりそうなので今度調べてみようと思います。
zip版の #vscode で #anaconda の仮想環境下での #python の開発環境構築(てこづったとこのみ) #プログラミング

本内容を利用した場合の一切の責任を私は負いません。

検索したけど、OSユーザー全体ではなく、仮想環境ごとにvscodeの環境を作る方法がなかなかわからなかったので。

# バージョン
- OS  
OS 名:                  Microsoft Windows 10 Home  
OS バージョン:          10.0.19043 N/A ビルド 19043  
システムの種類:         x64-based PC
- Anaconda3
Navigator 2.1.4
- vscode(zip版)
VSCode-win32-x64-1.38.1
- vscodeのpython拡張機能
2020.2.64397 (21 February 2020)

# 前提
Anacondaはインストール済み。
Anacondaの仮想環境作成済み。
vscodeは展開済み。
vscodeのワークスペース作成済み。
vscodeのpython拡張機能インストール済み。

# 本題
複数バージョンのAnacondaを使うことは稀だと思うので、vscodeの設定で下記のAnaconda絡みの設定はユーザータブにする。

- python.condaPath
スタートメニューからAnaconda Promptを起動し、「where conda」で出てきた一番上のパス
- Python: Venv Path
うろ覚えだが、Anacondaをインストールしたところのサブフォルダーに「envs」というのがあり、それ。
その中に作成済みの仮想環境名のフォルダーがある。

次にワークスペースタブに下記を設定する。

- python.pythonPath
上記の仮想環境フォルダーの下にその仮想環境用のpythonがある。
そのパス。
もしくは、Anaconda Promptを起動し、「conda activate <仮想環境名>」で仮想環境をアクティブにした後、「where python」で出てきた一番上のパス。
(多分、これによって、デバッガを起動した際に、自動的にその仮想環境をアクティブにする。
パスの中に仮想環境名が入っているので。)

上記でデバッガを起動すると、ターミナルで「conda activate <仮想環境名>」が実行されるのがわかる。

# 備考
多分、zip版のvscodeの場合、インストールではないためにAnaconda NavigatorのEnvironmentにvscodeが表示されない。
検索だとそこから起動とある。
検索だとPowerShellの設定があるが何もしなかった。
ただ、本件とは別にPowerShellを使っているため、その設定があるために何もしなくてもできてたのかも。
NoxPlayerZ - 2022年、新しいモバイルゲームプラットフォームが登場!

NoxPlayerのサービス開始以来、 過去7 年間、Androidエミュレーターの領域で真剣に取り組んできた株式会社Nox Limited は、2022年にNoxPlayerZをリリースすることを決定した。

NoxPlayerZはPCでモバイルゲームをプレイするための新しいプラットフォームである。軽量で使いやすく、どんなデバイスでも問題なくモバイルゲームやアプリを起動できる。また、今後公開されるAndroid 12もNoxPlayerZで利用できるになる予定で、モバイルとPCのゲームプレイにとっては大きな一歩となる。これまでAndroid9に対応し、200万以上のアプリをPCで利用可能にしてきたが、Android 12への対応により、Android 9以降のアプリも利用可能になる。今後はより多くのタイトルに対応していくとしている。
![noxzjp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784576/aae62375-894b-93f1-c9cb-2665611be55c.png)

NoxPlayerZは、NoxPlayerとは異なり、「Androidエミュレーターの軽量化」を目指しており、シンプルな操作性が最大の特徴としている。さらに、NoxPlayerZでは、ゲームに最適なAndroidバージョンを自動的に起動するという仕組みを備えており、多数の人気ゲームを楽しみたい方にとっては一番の選択といえるだろう。

## 特徴・オススメポイント ##
<img src="https://i.ibb.co/S6nK2Mm/noxjp2.png" alt="noxjp2" border="0">

### 1、ワンクリックで使える＆メモリ占用が少ない ###
ワンクリックで様々なアンドロイドエンジンから最適なものが選べる！32bitや64bitアンドロイドアプリ対応のAndroid7エンジン、または64bitアンドロイドアプリ対応のAndroid9エンジンで、ご利用のPC環境に最適なプレイ環境を提供する。動作が軽くてメモリ占用も少なく、低パフォーマンスと高CPU使用率などの問題に悩む必要がない。すべてのゲームアプリのダンロードはGooglePlay経由なので、安心して使用できる。

### 2、最高のゲーム体験と互換性
キーボードで文字入力に対応、キーボードやマウスをこのまま使用しアプリの使用が可能！さらに、ゲームパッド・コントローラーも多数対応。Android7(32bit&64bitのアンドロイドアプリに対応)&Android9をベースとし、X86やAMDに対応しており、最も安定かつスムーズなゲーム体験を提供する。

### 3、軽量なゲームプラットフォーム
小さなパッケージをインストールするだけで、優れたAndroidモバイルゲームプラットフォームをでPCで利用できる。このプラットフォームには、数千のアプリが含まれており、完璧に起動できる。

MiscosoftとGoogleは、2021年からAndroid用Windowsサブシステム(WSA) とPC版Google Playゲームを相次いで発表した。このことは、Z世代のプレイヤーにとって、スマホだけでは満足できず、より良いゲーム体験のために、複数のプラットフォームでゲームをプレイすることが主流になっていることも示している。エミュレーター分野において長年の経験を持つNoxは、プレイヤーに新しい選択肢を提供しようとしている。

さらに詳しい情報は、NoxPlayerZの公式ホームページよりご確認ください。

NoxPlayerZ公式ホームページ: https://jp.bignox.com/noxplayerz/
SingleLineなInputFieldに改行のある文字をペーストしたときの表示が違う

`InputField`を`Single Line`にしていても、コピペで改行自体は入力できてしまう。  

ただその表示のされ方が、以下のように1行の中に文字を小さくして2行で表示されることもあれば、
![スクリーンショット 2022-09-06 18.28.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178486/a0b41b89-97fd-dc25-4c76-61d93b60902d.png)
文字を小さくせずに、重ねて表示されたりする。  
![スクリーンショット 2022-09-06 18.42.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178486/8b54f68a-a2ca-d556-7e28-e3ccec1c773a.png)


タネは`InputField`ではなく実際に表示している`Text`の方で、
![スクリーンショット 2022-09-06 18.40.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178486/b272f4d0-c104-0ffc-d55a-a69b8253664a.png)


ここの`Line Spacing`が`1`だと2行で表示され、`0`だと1行に重ねて表示される。
![スクリーンショット 2022-09-06 18.41.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/178486/c8eb1be9-dd52-5476-44d7-c131a610e5c2.png)


`Single Line`にしてるんだから、改行が入力されたら勝手に削除してほしい。
`Content Type`が`EMail Address`だったりしたときはペースト時に改行を削除してくれるんだから、同じような感じで頼みたい。ぜひ。頼む。
Laravel Pint コードスタイル自動整形ツールのルール設定

## Laravel Pint

Laravel Pint(ピント)はコードスタイルの自動整形ツールPHP-CS-Fixerのラッパーライブラリです。

- GitHub: https://github.com/laravel/pint
- ドキュメント: https://readouble.com/laravel/9.x/ja/pint.html
- PHP-CS-Fixer: https://github.com/FriendsOfPHP/PHP-CS-Fixer
- PHP-CS-Fixer Configrator: https://mlocati.github.io/php-cs-fixer-configurator

## インストール

[Laravel v9.3.0](https://github.com/laravel/laravel/releases/tag/v9.3.0) からLaravelに標準搭載されています。

古いLaravelに導入する場合は下記のコマンドからインストールします。

```shell-session
$ composer require laravel/pint --dev
```

## Pintの使い方

```shell-session
$ ./vendor/bin/pint
```

ルールに基づいてコードスタイルを適用します。

```shell-session
$ ./vendor/bin/pint -v
```

`-v` 詳細表示してくれます。

```shell-session
$ ./vendor/bin/pint --test
$ ./vendor/bin/pint --test -v
```

`--test` を指定するとルールは適用されずチェックのみ実施してくれます。

## Pintの設定

デフォルトは`laravel` プリセットが使用されるのですが、私の好みで少しルールを追加してます。
よければ参考にどうぞ。

```json:pint.json
{
    "preset": "laravel",
    "cache-file": ".pint.cache",
    "exclude": [
        "database/migrations"
    ],
    "rules": {
        "concat_space": false,
        "date_time_immutable": true,
        "declare_parentheses": true,
        "declare_strict_types": true,
        "final_class": true,
        "global_namespace_import": {
            "import_classes": true,
            "import_constants": true,
            "import_functions": true
        },
        "mb_str_functions": true,
        "new_with_braces": true,
        "no_superfluous_phpdoc_tags": true,
        "not_operator_with_successor_space": true,
        "phpdoc_align": {
            "align": "left"
        },
        "phpdoc_separation": false,
        "php_unit_attributes": true,
        "php_unit_data_provider_static": true,
        "php_unit_test_case_static_method_calls": {
            "call_type": "this"
        },
        "simplified_if_return": true,
        "simplified_null_return": true
    }
}
```

- `.pint.cache` キャッシュファイルが作られるので `.gitignore` に追加してください。
- `final_class` を設定してるので、`app/Http/Controllers/Controller.php` を `abstract class` に変更してください。

`laravel` プリセットの内容はPintのGitHubで確認できます。
https://github.com/laravel/pint/blob/main/resources/presets/laravel.php

`laravel` プリセットになく、好みで追加したいルールを設定してます。
個々のルールについてはこちらのドキュメントから内容を確認できます。

https://mlocati.github.io/php-cs-fixer-configurator

## 補足: 特定のディレクトリのみ適用するオプションはない

ディレクトリやファイル名、特定のファイルパスを除外したい場合は下記のように設定できます。

```json:pint.json
{
    "exclude": [
        "my-specific/folder"
    ],
    "notName": [
        "*-my-file.php"
    ],
    "notPath": [
        "path/to/excluded-file.php"
    ]
}
```

ただし、現時点ではincludeのオプションは存在しないようです。

https://github.com/laravel/pint/issues/81

特定のディレクトリだけ実行させたい場合はコマンドの引数としてディレクトリを指定するしか今のところ方法なさそうです。

```shell-session
$ ./vendor/bin/pint app/Console
```

## 関連

https://qiita.com/ucan-lab/items/7d4180462347a42009d5
【nginx】リクエストボディのサイズ上限を変更する

## 結論
`nginx`をWebサーバに採用、かつWebアプリケーションにファイルアップロードなどの機能を持たせる場合は`client_max_body_size`を適切な値に設定すること。

## 理由
`nginx`で受け付けるリクエストボディのサイズ上限を設定する、`client_max_body_size`のデフォルト値は1MBのため。
デフォルト値のままにしてデフォルト値を超えるファイルをアップロードしようとすると、HTTPステータス`413` `Payload Too Large`が返ってきてしまいます。

## 設定例

```/etc/nginx/nginx.conf
http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

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

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 4096;
    client_max_body_size 100m; # <- ここ

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

    # Load modular configuration files from the /etc/nginx/conf.d directory.
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　︙
```

## 終わりに
あまりWebサーバの設定を触ることがなかったので勉強になりました。

## 参考
http://nginx.org/en/docs/http/ngx_http_core_module.html#client_max_body_size
https://developer.mozilla.org/ja/docs/Web/HTTP/Status/413
Too many open files エラーで止まってしまう (Ubuntu)

### 結論：初期設定のファイルハンドラの上限数を超えてファイルを開こうとしていた
#### ・開けるファイルの上限数を調べるには
~~~
$ ulimit -aS | grep open
~~~
設定変更をしていない場合の結果（Ubuntu 22.04では n=1024)
~~~
open files                          (-n) 1024)
~~~
#### ・上限数を変えるには (1024->32768にする場合)
~~~
$ ulimit -n 32768
~~~
.bashrcなどに書き込んでおいても良い

#### 経緯
SWAN (波浪予報モデル)を20 coreの並列モード(openmpi)で実行
  → 最後でエラーを吐いて停止。ログを見ても計算自体は問題なし
  → 事前に"ulimit -n 32768"を入力することで回避
　(終末処理で、多数のファイルを開いていた模様）
[Flutter]Row内でTextのwidthとfontSizeをOverflowしないように動的に変更する

# これが作りたい
![](https://storage.googleapis.com/zenn-user-upload/75ac68d9754e-20220906.png)

- 文字数の予想できない`Text`と`Icon`を要素として持つ`Row`
- `Text`は一列で全て見せたい(省略なく)
- テキストの真横に`Icon`を配置したい(空白なく)
- `Icon`のサイズは変えたくない

## 使うWidget

### [FittedBox](https://api.flutter.dev/flutter/widgets/FittedBox-class.html)
▼解決する課題
- 文字数の予想できない`Text`と`Icon`を要素として持つ`Row`
- `Text1`は一列で全て見せたい(省略なく)
今回は省略せずに全ての文字列を表示したいので、親のサイズに応じてテキストを縮小する。
省略、改行してもいい場合はText　widgetのoverflowを指定

### [BoxConstraints](https://api.flutter.dev/flutter/rendering/BoxConstraints-class.html)
▼解決する課題
- テキストの真横に`Icon`を配置したい(空白なく)
- `Icon`のサイズは変えたくない
サイズが指定されていない`Row`の中で`FittedBo`xを使うとoverflowの警告が出ます。
![](https://storage.googleapis.com/zenn-user-upload/dcd44616f806-20220906.png)
`SizedBox`で`width`を指定しても良いですが、`hight`も指定しないと文字サイズが無限に大きくなるため`BoxConstraints`を使う。(これに関しては他にもいい方法が有るかも)

## デモ
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="vYjOmdw" data-user="skllll06" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/skllll06/pen/vYjOmdw">
  Flutter Dynamic Width Demo</a> by Shunsuke Kataoka (<a href="https://codepen.io/skllll06">@skllll06</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
Golangで多言語対応ライブラリのようなものを作ってみた

## 背景
+ Golangを学習中で、実践的なコードを書きたかった
+ JSONファイルでエラーメッセージなどを管理できると良さそうと考えた
## 作ったもの
作ったものは至ってシンプルで、JSONファイルを読み込み、キーを指定することで定義したメッセージを取得できる。  [Githubのリンクはこちら。](https://github.com/capybara-alt/msgutil)
```json:en.json
{
    "errors": {
        "validate": {
            "null": "column.a cannot be null",
            "invalid-value": "Column {{0}} must be {{1}}"
        },
				"login": {
					"fail": "Login fail"
				}
    },
    "info": {
        "login": {
            "success": "Login success!!"
        }
    }
}
```
```json:ja.json
{
    "errors": {
        "validate": {
            "null": "column.aはnullにできません",
            "invalid-value": "項目 {{0}} に入力できる値は {{1}} のいずれかです"
        },
				"login": {
					"fail": "ログイン失敗"
				}
    },
    "info": {
        "login": {
            "success": "ログイン成功!!"
        }
    }
}
```
``` go: main.go
package main

import (
	"fmt"
	"log"

	"github.com/capybara-alt/msgutil"
)

func main() {
	if err := msgutil.Init("./sample/*.json"); err != nil {
		log.Fatal(err)
	}

	msg, err := msgutil.GetMassage("ja", "errors", "login", "fail")
	if err != nil {
		log.Fatal(err)
	}
	fmt.Println(msg)
}
```
実行結果
```
~$ go run main.go
ログイン失敗
```
また、引数を指定して、動的にメッセージを作成することも可能。
``` go:main.go
package main

import (
	"fmt"
	"log"
	"strings"

	"github.com/capybara-alt/msgutil"
)

func main() {
	if err := msgutil.Init("./sample/*.json"); err != nil {
		log.Fatal(err)
	}

	msg, err := msgutil.GetMessageArgs([]string{"ja", "errors", "validate", "invalid-value"}, "テスト", strings.Join([]string{"\"テ\"", "\"ス\"", "\"ト\""}, " もしくは "))
	if err != nil {
		log.Fatal(err)
	}
	fmt.Println(msg)
}
```
実行結果
```
~$ go run main.go
項目 テスト に入力できる値は "テ" もしくは "ス" もしくは "ト" のいずれかです
```
【VSCode】Finderで選択したフォルダをVSCodeで直接開く方法

## はじめに
MacのFinderで選択したフォルダをターミナルなどを介することなく直接VSCodeで開く方法について記載します。

## 設定方法
ショートカットAppを使用してFinderからVSCodeで直接フォルダを開けるようにします。

https://apps.apple.com/jp/app/%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%AB%E3%83%83%E3%83%88/id915249334

ショートカットアプリを開き以下の内容で新規作成します。


![スクリーンショット 2022-09-06 18.27.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/b5e80ddb-f5d5-ca8e-3d1b-6269b9a8dcb0.png)

「シェルスクリプトを実行」の「入力」は「ショートカットの入力」に設定し、種類「フォルダ」、入手「ファイルパス」に設定します。
また「入力を渡す方法」は「引数として」を選択してください。
![スクリーンショット 2022-09-06 18.43.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/30aeafd5-512a-82f8-a966-788fdeec7397.png)

```zsh:シェルスクリプトの内容
open -a "iTerm" "$@" 
for f in "$@"
do
	code "$f"
done
```

上記のうち`open -a "iTerm" "$@"`はiTermを開くための記述です。
VSCodeのみ開ければいいのであれば不要です。

上記の設定をした後にFinderでフォルダを右クリックし「クイックアクション」を選択すると先ほど作成したショートカット名が表示されます。
これをクリックすることで選択したフォルダをVSCodeで開けます。

![スクリーンショット 2022-09-06 15.58.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/55996af0-9730-b48b-b004-7cd8008abc20.png)

![スクリーンショット 2022-09-06 15.59.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/6d8ff3ea-f651-c08a-6ec5-1856ffa0097d.png)

複数のフォルダを同時に開くこともできます。

またコマンドでのキーボードショートカットでの実行も可能です。
上記どおりの設定であればフォルダを選択して`^` + `C`でVSCodeとiTermが起動します。

さらにフォルダを選択していない場合には以下のようなフォルダを選択するウィンドウが開きます。
ここからフォルダを選択することでVSCodeとiTermが起動します。
![スクリーンショット 2022-09-06 19.09.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/99c41944-7b08-beb8-5b7d-4d40f4fa4349.png)


フォルダを選択していない場合のフォルダを選択するウィンドウが正しく動作しない場合にはショートカットの内容を以下のとおり変更することで正常に動作します。

![スクリーンショット 2022-09-06 19.06.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/7f0a7d1e-edaf-c04a-3412-57a436036570.png)
MDN Web Docsの修正の仕方

## 対象読者
* MDN Web Docsでtypoを見つけた
* MDN Web Docsの変更をやったことがない
* gitを知っている
* GitHubアカウントを持っている

## 導入
先日MDNであるWeb APIについて調べていましたすると...

![mdn_performance.mark.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129479/2f69628c-e2dc-c0ec-2f87-094c09ddf722.png)

変換ミスdesu. 誰か修正してくれないかな～と思いましたがページ下部まで見てみると、どうやらGitHubで修正できるようです。[ガイドライン](https://github.com/mdn/content/blob/main/README.md)も提示されているので自分でできるところまでやってみようと思いました。

## ガイドライン
### Simple changes
ガイドラインにいろいろ書いてありますが、今回やりたいことは変換ミスの修正という単純な変更です。ずばり[Simple changes](https://github.com/mdn/content/blob/main/README.md#simple-changes) という項目があるのでそれを読んでみます。

単一ファイルでタイポのような単純な変更をしたいなら、GitHub UIが最も単純な方法らしいです。
※ガイドラインのTipにはMDNページ下部のSource on GitHubのリンクから、GitHubの対象ファイルが開けるとありますが、そこからさらに鉛筆アイコンで編集画面を開く必要があります。Edit on GitHubのリンクからなら編集画面が開けるのでこの方が楽だと思います。

直接編集できる訳ではなく、リポジトリをフォークしてプルリクエストすることになります。GitHub UIは自動的にフォークして、変更をブランチにコミットしてくれるそうです。

### pull request etiquette section
> Note: See the [pull request etiquette section](https://github.com/mdn/content/blob/main/README.md#pull-request-etiquette)

とあるので、そちらも見てみましょう。大体以下のようなことが書かれていました。

1. PRすると自動テストが実行される。もし失敗したらあなたの責任で解決すること。
1. 衝突があればあなたの責任で解決すること。メインブランチをpullして、あなたのブランチにマージし、更新したブランチをあなたのフォークにpushすることで行える。
1. 別の方法としてrebaseすることでも行えるが、履歴を書き換えることになり、GitHubからの通知がなくレビュワーを混乱させることになる。
1. 各プルリクエストには一つの論理的な変更または、関連する変更をまとめる。大きすぎたり関連のない変更があるとレビューがしにくい。
1. 変更が複雑ならなぜ変更が必要なのか説明する。
1. レビュワーが閉じたら開きなおさない。

今回のような単純な変更であれば衝突時の解決方法に気を付ければよさそうです。

## 重複確認
ガイドラインには書いていないようですが、見つけた問題のPRがすでに作成されていないか確認しておきます。
今回のケースなら日本語のtypoなので[is:open label:l10n-ja typo](
https://github.com/mdn/translated-content/pulls?q=is%3Aopen+label%3Al10n-ja+typo)で検索するといいと思います。

今回のケースでは見当たらなかったのでPRすることにしました。

## 編集手順
### リポジトリのフォーク
対象ページ下部のEdit on GitHubをクリックします。するとGitHubが開き、以下のように表示されます
> You need to fork this repository to propose changes.
> Sorry, you’re not able to edit this repository directly—you need to fork it and propose your changes from there instead.
> Fork this repository
> Learn more about forks

ガイドラインの説明にあった通り、リポジトリをフォークします。
Fork this repositoryボタンをクリックするだけでフォークできました。

### 編集
フォークすると編集画面が表示されます。問題の個所を修正して、画面下部にコミットメッセージを入力します。
今回の場合なら「fix typo」でいいと思います。
修正してコミットメッセージも入れたら、Propose changesボタンをクリックします。

### プルリクエストの作成
Propose changesボタンをクリックすると変更差分が表示されます。変更内容が想定通りであるか確認します。問題なければCreate pull requestボタンをクリックします。

このリポジトリは日本語に限らないので、日本語話者のレビュワーに見て貰いやすい様にPRタイトルを「fix typo in ja」にしました。
変更内容が単純なので説明文は要らないかもしれませんが「変換ミスを修正」にしました。日本語ページのタイポ修正なので説明文も日本語で問題ないと思います。

タイトルと説明文を書いたら Create pull requestボタンをクリックします。

### 自動テスト結果を確認する
ガイドラインにもあったように、自動テストが実行されます。
しばらく待ってすべてのテストが通ることを確認します。

> Review requested
> All checks have passed
> This branch has no conflicts with the base branch

と表示されれば問題ないと思います。

※どうやら自動的に l10n-ja ラベルが付与されるようなので、タイトルに「in ja」とか入れなくてもよかったかも知れません。

## その後

今回PRしたのはこちらです。無事マージされました。

https://github.com/mdn/translated-content/pull/8291

コミットメッセージ、PRタイトル・説明など、これがベストか分かってないです。他にガイドラインなどあれば教えてください。
いつもお世話になっているMDNに少しでも貢献できたなら嬉しいです。
見ての通り簡単に変更PRが送れるので、もし間違いを見つけたらやってみるといいと思います。
iOSアプリリリース時、Guideline 4.3 - Designでリジェクト

# 概要
先日iOSアプリをリリースしようとした際、`Guideline 4.3 - Design`でリジェクトされたので、その時にやった事のまとめ。

# 大まかな流れ
AppStoreにアプリ提出(1回目)
↓
`Guideline 4.3 - Design`でリジェクト
↓
修正を加えて再提出(2回目)
↓
`Guideline 4.3 - Design`でリジェクト
↓
修正を加えて再提出(3回目)
↓
`Guideline 4.3 - Design`でリジェクト
↓
同じ機能セットを持つアプリはどれなのか質問
↓
`Guideline 4.3 - Design`でリジェクトはされず(これとは関係ない他の箇所を指摘された)
↓
指摘された箇所を修正し提出(4回目)
↓
無事リリース

# リジェクト内容
Google翻訳したものを掲載。

```
ガイドライン 4.3 - 設計

あなたのアプリは、App Store に提出された他のアプリと同じ機能セットを提供していることに気付きました。 内容や言語が異なるだけで、スパムの一種と見なされます。


このアプリの次回の提出には審査時間が長くなる可能性があり、この問題が解決されるまで、このアプリは優先審査の対象にはなりません。
```

# 結論
素直に修正するのではなく、同じ機能セットを持つアプリはどれなのか質問した方がいいのかも。
AgileStudio ウェビナー振り返り

##### はじめに

:tada: Qiita記事初投稿！ :tada: 

北國フィナンシャルホールディングス
デジタルバリュー の 奥村🌴 です！

昨日、永和システムマネジメントさんの AgileStudio ウェビナー に登壇させていただきました。

https://www.agile-studio.jp/post/webinar-hokkokubank-cross-agile

パネラーとして参加させていただいた心情みたいなものを熱が冷めないうちに書き残しておこうと思います🙂

**当日、いただいたコメント・質問で答えられなかったものやアンケートに対する回答記事 (2022/10/07 投稿しました！)**

https://qiita.com/okumura_jumpei/items/393646e7c47e86166935

**ウェビナーでモデレーターをしていただいた、永和システムマネジメント社長 平鍋さん のまとめ記事**

https://www.agile-studio.jp/post/thankyou-hokkokubank-cross-agile

#### 当日までの心情 😯

こんなオープンな場でプロジェクトのお話を共有する機会も今までなかったので、1週間前くらいからやっぱり緊張が続いていました笑

ただ、準備は今回一緒に参加させていただいた 永和システムマネジメント 橋本さん、ベーシック 安永さん とプロジェクトの合間を見て進めていったので、やりやすかった...

どうやったらうまく伝えられるだろう、テーマに対してどうアプローチするのが良いだろうみたいなことをぐるぐる3人で考えながら練っていました🤔

プロジェクトだけではなく、組織の考え・方針も前提のインプットとしてあったほうが事例紹介のほうもス～ッと入るかなぁというところで、多めに我々北國フィナンシャルホールディングスの説明に時間を多めに取らせていただきました。

#### ウェビナーを終えてみて 😌

スライドを使った緊張の前半部分を終えてからパネルディスカッションに移ったのですが、モデレーターをしていただいた平鍋さんのまわしのおかげで自然体でディスカッションすることができました！

パネルディスカッションはプロジェクトの中でもみんなでよく悩んでいたものがテーマだったりしたので、プロジェクトで利用している oVice を映したときにメンバーの皆さんが私たちのウェビナーを見守ってくれていて嬉しかった～ (驚きの密集率でした笑)

ウェビナー中にリアルでリアクションを取ってくれていたのが私から見ていてもとても面白かったです笑


話している最中にコメントでリアクションをもらえたりするのは、嬉しいし話しやすくなりますね💬

発表中に自分の意見やリアクションを表現できるのはオンライン開催ならではのメリット！


オフラインだと発表中に「そうそう！」 とか 「そうなんだー！」とかよっぽどではない限り言えないですからね笑

私も今後ウェビナーに参加するときはどんどんリアクションコメントを入れていこうと思えました👍

![cap.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2832083/8e19ccb5-11da-dc1e-5bf7-405605bb2df1.png)

#### プロジェクトメンバーからの反応 🙋‍♂️🙋

```
* スプリントフェスティバルの反応が良くて嬉しかったです
```

→ プロジェクトでのスプリントレビューのネーミングや取り組みがいいね！というコメントは多かったです！

```
* 改めてここ１年くらいでPJすごい変わったな。。と実感（体制もそうだし、マインド面も）
* 今までやってきたことを客観的に見られて良かった
```

→ チーム振り返りは毎Sprint毎にやっていますが、確かにプロジェクト全体を振り返る機会ってあまりなかったので、
　今回のウェビナーでのコメントやQAで外部の皆さんからみたプロジェクトの反応を一緒に共有できたのは嬉しかったです！

```
* 出演者も視聴者もすごく楽しそうだった！
```

→ これが伝わってよかった！！

#### 学び 📚

このウェビナーの中で、私の中で気がついていなかったことを知るきっかけがありました。

##### 「アジャイルのやり方も内製している」

ウェビナーの中でいただいた質問に応えている際に、

Q. 採用している大規模アジャイルのフレームワークはありますか

A. 特定のフレームワークを採用しているわけではなく独自の進め方でやっています

話しているうちに平鍋さんから「独自のやり方だと、やり方自身にも愛着がわきますよね」という言葉をいただいて「たしかに...」と私の中でも今まで当たり前に思っていたことへの視点が変わりました💡

アジャイルの進め方は独自でやっている。という表現をこれまでしていたのですが、アジャイルのやり方までも内製している私たちのプロジェクトの進め方にも愛着がわいてきました🥰

#### 何が言いたいかというと

##### 楽しかった

この一言に尽きます...

緊張はしますが、終わってみると組織外からのコメント・リアクションがもらえてとても収穫が多いイベントでした！


最後に、ウェビナーにご参加いただいてコメント・QAから一緒にウェビナーを盛り上げていただいた皆さん、企画・運営いただいた永和システムマネジメントの平鍋さん、橋本さん、藤本さん、川西さん そして急遽登場したプロジェクトメンバー すべての皆さんにありがとうございました！😺
【初心者メモ】The _imagingft C module is not installed の対処法

## 開発環境
Python3 (Anaconda3 + VSCode)

## 問題
wordcloudで画像作成しようとしたらThe _imagingft C module is not installedというエラーが出た。

## 解決法
対処法としてubuntuを使ったものが多く、調べるのに数時間かかったが、以下のサイトを参考にしてコマンドプロンプトでpillowをインストールしなおしたら直った。

```
pip uninstall pillow 
pip3 install pillow
```

## 感想
CSDNという中国語のプログラミング知恵袋的なサイトが結構役に立った。中国語は読めないけどコードは世界共通だから助かった。


## 参照サイト
https://blog.csdn.net/qq_36786467/article/details/126059096?spm=1001.2101.3001.6650.3&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3-126059096-blog-120734884.pc_relevant_multi_platform_whitelistv3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-3-126059096-blog-120734884.pc_relevant_multi_platform_whitelistv3&utm_relevant_index=4

https://blog.csdn.net/weixin_43694361/article/details/104320804?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166244948416782388022235%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=166244948416782388022235&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~times_rank-6-104320804-null-null.142^v46^control&utm_term=The%20_imagingft%20C%20module%20is%20not%20installed%E3%80%80python&spm=1018.2226.3001.4187

https://nakamura001.hatenablog.com/entry/20100726/1280091969
javascriptのprototypeの超簡単まとめ

# javascriptのprototypeについて
`prototype`は、javascriptの中でも理解しにくい概念でもあるが、実はjavasciptを理解するための重要な概念でもある。

`prototype`を理解することで、javascriptの仕組みを理解することができる。

# 基本的なprototypeと__proto__
以下はjavascriptの`prototype`の概念を図にしたものである。
開発者が`Person`というクラスを定義すると、内部では`Person`と`Person's prototype`の`obj`が生成される。この二つの`obj`はお互いに関連することを示すため`prototype`と`constructor`を持って相互参照する。

![スクリーンショット 2022-09-06 17.16.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2785890/87574fa6-7a42-5851-ebc5-17e4f8cd5467.png)

`constructor`は、`person`が何によって作られたのかを示すもの。`Person’ prototype`は`Person`によって作られたことを示すため、`constructor`は内部的に`Person`を参照する。

new キーワードをもって`Person`を生成すると、`person1`の内部には`__proto__`が自動生成される。そして、`__proto__`は`person1`の原型（Person）を示す`prototype`を参照する。

# つまり
簡単に説明はしたものの、これで理解できる人はあんまりないだろう。
結果的には何がどうなったのかを説明すると以下のことができるという意味である。

#### __proto__とclassのprototypeは以下の関係である。
```javascript:javascript
person1.__proto__ === Person.prototype //true
```

#### 表現を変えると以下のようにもできる
```javascript:javascript
person1.__proto__.constructor === Person //true
```

#### __proto__のconstructorがPersonクラスそのものを指すので以下のこともできる。
```javascript:javascript
const person2 = new person1.__proto__.constructor()
person2.__proto__ === Person.prototype //true
```

# Classとprototypeでのconstructorの違い
Classでのconstructorは、インスタンスの生成時に初期化するためのもの。ここでのthisはnewでインスタンスを生成する際にClassを指し、constructorで記載した変数は、インスタンスを生成時にセットされ、変数に代入される。

ptorotypeでのconstructorは、prototypeの元となるClassを指す。
LaravelでURLのクエリパラメーターを取得する二つの方法と注意点

はいさい！ちゅらデータぬオースティンやいびーん！

# 概要

Laravelでは、URLのクエリパラメーターを取得する二つの方法を解説しながら、注意点とベストプラクティスを紹介していきます。

また、`Blade`と`Controller`でのそれぞれの構文も添えておきます。

### 背景

クエリパラメーターを取得するのには二つの方法があるから、どれを使えばいいか迷います。

しかも、使う方法によって動作と、 **_ニュアンス_** が微妙に違います。

**ニュアンス** というのは、使ったメソッドによって、ソースコーで伝わる意図が変わるということです。

使った手段の結果が一緒でも、伝わる意図が変わるということは小さなことに思えて、実は重要なことです。

# - 方法１ - `Request::input`メソッド

最もよく使われている方法は`Illuminate\Http\Request`の`input`メソッドかと思います。

## 使い方

まず、使い方を簡単に紹介します。これらのロジックは以下のURLを想定しています。

`http://localhost:8080/?mad-max=GreatFilm`

### Blade

```html:blade.php
<h1>Is Mad Max any good?</h1>
<p>It`s a {{ request()->input('mad-max') }}</p>
```

### Controller等

```php:controller.php
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class FilmController extends Controller
{
    public function view(Request $request)
    {
        $greatFilm = $request->input('mad-max');
        dump($greatFilm); // 'GreatFilm'
    }
}
```

## 注意点

このメソッドは、クエリパラメーターだけでなく、`POST`リクエストの入力も取得できてしまいます。

**クエリパラメータとしての値が欲しいのか、`<form>`要素内の`<input name="mad-max">`の値が欲しいのか**、パッとみて**わからない**のです。

また、本当はクエリパラメーターを使いたかったのに、意図せずに入力情報を使ってしまうおそれもあります。

この方法はあまり明示的ではないので、筆者はクエリパラメーター取得の目的において、**推奨しません**。

# - 方法2 -`Request::query`メソッド

次に紹介したいのは、`query`のメソッドです。こちらは<a href="https://laravel.com/docs/9.x/requests#retrieving-input-from-the-query-string">正式ドキュメント</a>でも2番目にきますが、個人的に最もいい方法かと思います。

なぜかというと、明示的に **これはクエリから取るパラメーターだよ〜** という意図がソースコードを通して、チームメンバーに伝わるからです。

## 使い方

以下のURLを想定します。

`http://localhost:8080/?origin=google`

今回は、意見を聞くフォームに、どこでこのサイトを見つけたのかも聞くのですが、クエリパラメーターにもその値も入っているのです！

### Blade

```html:blade.php
<form method="post">
 <label for="opinion">Is Mad Max any good?</label>
 <input name="opinion" id="opinion" type="text">
 <label for="origin">Where did you find this site?</label>
 <input name="origin" id="origin"　value="{{ request()->query('origin') }}">
</form>
```

### Controller等

```php:controller.php
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class FilmController extends Controller
{
    public function create(Request $request)
    {
        $origin = $request->query('origin'); // これはクエリパラメーターに入っている値
    }
}
```

## おまけ : 全てのクエリパラメーターを取得する

おまけですが、全てのクエリパラメーターとその値を取得する方法を紹介します。

簡単です。`$request->query();`で **引数に何も指定しない** のです。

例えばい以下のようなURLだと、配列が出てきます。
`http://localhost:8080/?origin=google&reference=`

```php:controller.php
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class FilmController extends Controller
{
    public function create(Request $request)
    {
        $queryParameters = $request->query();
        dump($queryParameters); // ['origin' => 'google', 'reference' => null] 
    }
}

```

ここで気をつけた方がいいのは、`reference=`は空文字列の`''`ではなく、`null`になることです。

# まとめ

いかがでしょうか？クエリパラメーターを取得する時の落とし穴をご理解いただきましたでしょうか？

結果重視のプログラミングではなく、コミュニケーションとしてのソースコードを意識して書こうとすると、`input`という文字を使って、クエリパラメーターを取得することに違和感を覚えませんか？

筆者は、`input`は、`<input>`要素に直結するものです。つまり`$request->input('hoge');`を見ると、なんだかPOSTのイメージが強いのです。

やっぱり、`$request->query('hoge');`を見ると、<q>ああ、書いた人はクエリパラメーターから`hoge`君を取りたかったな</q>とすぐにわかるし、アプリケーションの観点から見ても間違いないでしょう。

このように、複数の方法がある時は、伝わる意図を考慮してコードを書きましょう！
専門用語に快感を覚えるか？


- 一時期かなり話題になった組織論の本があった。だがTwitterで作者を見ると何か嫌な感じがした。完全に悪口だが人間性が低い気がした。あとはけっこう太っていた。なのでちゃんと読むのはやめた。
- アジャイル開発の界隈は多用な専門用語を生み出している。ちょっと世間と乖離しすぎていないだろうか。
- 専門用語を使うことに少しでも快感を感じる場合はそれを使わないほうが良い。
- 360度評価はアテにならない。談合して評価を上げることが出来るからだ。だけどそもそも完璧な評価制度はない。直属の上司だけによる評価制度よりマシだととあるエンジニアは言っていた。
- 素直に分からないと言ったら「そんなことも分からないの？」と言われた経験がある。出来ないプログラマでごめんなさい。
- 「問題が起きているのに誰も教えてくれない」のは組織で往々にしてあることだ。
- Aをしている最中にBのことが頭をよぎる。それだけでスイッチングコスがかかる。
- コミュニケーションの93%は非言語であると言われる。だが何が93%なのか。この話を聞くたび変だと思ってた。93%とは感情が伝わる度合いらしい。「感情が伝わる度合いが非言語だ」なんて当たり前じゃないか。メラビアンの法則の誤解のされ具合はすごい。
- 考え事がある時に座禅を組むのは当たり前だ。だが座禅しても必ず答えが出るわけではない。だから僕は座禅を逆恨みしてしまう。
- 「楽しもう」という言葉が嫌いだ。どこかいかがわしく薄っぺらい感じがする。M1グランプリでのコント後に芸人が「楽しめました！」とコメントしていると何か違和感を感じる。僕自身が物事を楽しむことがものすごく苦手なのかもしれない。
- 鶏が先か卵が先か。会社は「成果を出せば給与を上げる」と言う。社員は「給与を上げれば成果を出す」と言う。
- 美容院に行ったら店員さんたちがやる気がなかった。店に入ったら「誰？」「なんで来たの？」みたいな雰囲気だった。シャンプーの時は「かゆいところはないですか？」などと聞かれるが声が小さくて聞き取れない。最後はエレベーターのドアが閉じるまでお辞儀をしてくれるのだが、単に体を折り曲げているだけだ。美容院に行くのは疲れる。
- たまに歩行者が歩いてるのに全く止まってくれない車がいる。いちど轢かれかけそうになった。
- Kindleのテキストコピー上限の仕様は正直腹に据えかえている。
- 座禅をして心が落ち着くまで時には30分ほどもかかることがある。その間はひたすらの辛抱だ。

# チャットメンバー募集


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

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


# Twitter

https://twitter.com/YumaInaura
財務諸表は企業のフトコロ具合を示す

今の財務体質とか今の損益状況などを確認できる資料が
```財務諸表```になる。

# 貸借対照表
資産、負債、資本を集計したものを```貸借対照表(パランスシート)```という。

### 負債
#### 流動負債
```1年以内```に返すお金

#### 固定負債
```1年より後```だけどいずれは返すお金

### 資本
#### 資本金
```会社設立の際に必要な資金```であり、```株主や投資家が出資したお金```です。
出典 https://business.ntt-east.co.jp/content/kaigyou_iten/column/capital/#:~:text=%E8%B3%87%E6%9C%AC%E9%87%91%E3%81%A8%E3%81%AF%E4%BC%9A%E7%A4%BE,%E3%81%AE%E7%9F%A5%E8%AD%98%E3%81%AF%E5%BF%85%E9%A0%88%E3%81%A7%E3%81%99%E3%80%82

#### 法定準備金
債権者を保護するため、会社法で```企業が積み立てることを義務付けられている準備金```
出典 https://www.smd-am.co.jp/glossary/YST2471/

#### 剰余金
* 株主資本の額から```資本金を差し引いた金額```であり、株主からの```払込みの金額と企業内に留保された利益```からなる。
    出典 https://kotobank.jp/word/%E5%89%B0%E4%BD%99%E9%87%91-533590#:~:text=%E5%89%B0%E4%BD%99%E9%87%91%E3%81%98%E3%82%87%E3%81%86%E3%82%88%E3%81%8D%E3%82%93,%E5%89%B0%E4%BD%99%E9%87%91%E3%81%A8%E3%82%88%E3%81%B0%E3%82%8C%E3%82%8B%E3%80%82
* 貸借対照表に記載されている```資本剰余金と利益剰余金の合計額```のこと。「純資産の部」の株主資本から資本金を差し引いた額になります。資本剰余金とは、```株主が払い込んだ資金のうち資本金に組み入れられなかった分```を積み立てたお金のことです。利益剰余金は```企業活動で得た利益のうち、分配せずに社内に積み立てたお金```のことで、内部留保とも呼ばれます。
    出典 https://www.smd-am.co.jp/glossary/YST3353/

# 損益計算書(ピーエル：P/L Profit ＆ Loss statement)
費用と収益を集計すことでその会計期間における利益や損失を明らかにしたもの。

# 経費の見方
```売上高```から```売上原価```を引くと```売上総利益```になる。
```売上総利益```から```販売費及び一般管理費```を引くと```営業利益```になる。
```営業利益```から```営業外収益```を引いて```営業外費用```を引いて```経常利益```になる。
```経常利益```から```特別利益```を足して```特別損失```を引いて```税引前当期純利益```になる。
```税引前当期純利益```から```法人税```を引くと```当期純利益```になる。
###  経常利益とは?
企業が```通常行っている業務の中で得た利益```のことで、本業の儲けである営業利益に営業外収益を加え、営業外費用を差し引いて計算します。
出典 https://www.smbcnikko.co.jp/terms/japan/ke/J0043.html#:~:text=%E7%B5%8C%E5%B8%B8%E5%88%A9%E7%9B%8A%E3%81%A8%E3%81%AF%E3%80%81%E4%BC%81%E6%A5%AD,%E3%82%92%E5%BE%97%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82

### 特別利益、損失とは？
特別損益は会社の経常的な業務内容とは関係なく、その期だけに```例外的に生じた多額な「損失」や「利益」```を意味します。
出典 https://biz.moneyforward.com/accounting/basic/48465/

### 法人税とは？
```法人が事業活動を行うことで獲得する所得に対して課税```される税金
出典 https://legalsearch.jp/portal/column/corporation-tax/#:~:text=%E6%B3%95%E4%BA%BA%E7%A8%8E%E3%81%A8%E3%81%AF%E3%80%81%E6%B3%95%E4%BA%BA,%E7%AD%89%E3%80%8D%E3%82%82%E5%90%AB%E3%81%BE%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82


出典　

https://gihyo.jp/book/2020/978-4-297-11781-8


# 気づき
これで一通り終わった。
これから問題を解いていく。
まだまだ大変だ。
Docker ffmpeg wav to m4a 

Docker for desktop 起動
コマンドプロンプト起動

```sh:イメージ所得
docker pull jrottenberg/ffmpeg:3.3-alpine
```


```sh:wav2m4a.sh
# UTF-8 改行コードLF で保存
# ↓ドライブ名は必ず小文字にする
INPUT_PATH=f/NHK-FM/
OUTPUT_PATH=f/NHK-FM/

FILE_NAME="名演奏 ピエール・ブーレーズの名指揮"

INPUT_FILE="${FILE_NAME}.wav"
OUTPUT_FILE="${FILE_NAME}_2.m4a"
OPTION=" -acodec libfdk_aac -profile:a aac_he_v2 -ab 48k -ar 48000 -ac 2 "

# コマンド終了時にコンテナを削除、ドライブのマウント、コーデック等
docker run --rm -v ${INPUT_PATH}:/input -v ${OUTPUT_PATH}:/output jrottenberg/ffmpeg:3.3-alpine -i "input/${INPUT_FILE}" ${OPTION} "output/${OUTPUT_FILE}"
```

```sh:実行
sh wav2m4a.sh
```
Stable DiffusionをColab上でCPUで動かす

# 概要
GPUで高速に生成するぜ！って使ってたら、
```
GPU バックエンドに接続できません
Colab での使用量上限に達したため、現在 GPU に接続できません。
```
とか言われて、利用制限にかかって何もできなくなって悲しくなります。復活までに12〜24時間くらいかかるっぽい。
CPUで低速でもいいから作りたいぜ！ということで動かしました。20分/枚くらい時間かかるけど、5並行まで動かしたら、数分/枚くらいの速度は出せます。

# コード
GPUで動作するとこまでは到達している前提(https://note.com/npaka/n/ndd549d2ce556 を参考にして設定しました)で記載します。

```
!pip install transformers scipy ftfy
!pip install git+https://github.com/huggingface/diffusers.git
# for cpu
!pip install torch torchvision torchaudio --extra-index-url https://download.pytorch.org/whl/cpu

YOUR_TOKEN="ここにトークンを入れる"
```
```
# 準備 (img2img)
from PIL import Image
from torch import autocast
from diffusers import StableDiffusionImg2ImgPipeline

pipe = StableDiffusionImg2ImgPipeline.from_pretrained(
    "CompVis/stable-diffusion-v1-4",
    use_auth_token=YOUR_TOKEN
).to("cpu")
```
```
# img2img
prompt = "perfect pupil of the eyes, anime style eyes, hyper detailed, cute girl, detail of anime"
init_image = Image.open("/content/drive/MyDrive/Colab Data/moenai.png").convert("RGB")
init_image = init_image.resize((512, 512))
# 200枚生成する
for num in range(200):
  images = pipe(
      prompt=prompt,          
      init_image=init_image, 
              strength=float(0.75), # 0.0〜1.0
              guidance_scale=10,   # 0〜20
              num_inference_steps=50,
              generator=None,
      )["sample"]
  images[0].save("/content/drive/MyDrive/Colab Data/output"+str(num)+".png")

```


input
![moenai.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76532/db35567c-25cb-238b-86e5-4216cbd2f7f9.png)

output
![output2_.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76532/75e1552f-4102-adb0-ae04-a5484eee7434.png)
とても惜しかった部分を少しだけ手で直してます。Promptあまり凝ってないので10〜20枚くらいに一個はこれくらいのが出てきそう。ただ、この構図は苦手っぽいので足が変になることが多いです。

txt2imgの場合も同様の感じでできます。


Enjoy.
カリー化とは

# 意味
- 関数を返す関数を作り、プログラムの共通化を図る。
- 言語に関係なく共通する概念であるが、ここではtypescriptで説明します。

# 例文
```typescript:typescript
const add = (x:number) => (y:number) => x + y
const add1 = add(1)
const result = add1(2) // 3
```

# 説明
関数addは引数xを受け取ると、`(y:number) => x + y`を返す関数。
add関数の引数として１を入れると、`(y:number) => 1 + y`の返すようになる。
返された関数の引数yに対して２を入れると、`(2) => 1 + 2`が成立され、３を返す。

# メリット
- 共通化によってバグを防ぐことができる。
- まとまった処理を分割することによって、複雑度を下げつことができる。

# 例文
```typescript:typescript
const add = (x:number, y: number) => x + y
add(1, 2)  //  3
add(1, 3)  //  4
add(1, 100)  //  101

```

# 説明
- 毎回第一引数として１を入れているため、バグが起きる恐れがある。
- 引数xに１を入れた関数を作れば、引数xに毎回１を入れなくても良い。