OmniAICreator/Qiita-1.07M huggingface dataset:
日本語で いのちを輝かせる

・ヮ・）あ、おはようございまーす

突然ですが 日本語でプログラミングできる 「[なでしこ](https://nadesi.com/doc3/)」をご存知でしょうか？
~~<font color="DarkGray">私は以前から存在は知っていたのですが触ったことがありませんでした</font>~~

なでしこ3は JavaScript で実装されているらしく、プラグインを入れることで DOM操作 や canvas を使うことができます

今回は勉強を兼ねて こちら([htmlとcssでいのちを輝かせる](https://qiita.com/50m_regent/items/725ea995abe0c59e57dc))を参考に 日本語でいのちを輝かせてみようと思います！

## 方針

参考記事では css を使ってますが css だとなでしこ感がでない(日本語で書けない)ので
canvasを使って描いていきます！

## キャンバスを作る

```なでしこ
!『plugin_browser』を取り込む
# キャンバスを作成
「#nako3_canvas」のDOM要素取得
キャンバスはそれ

キャンバスの「width」に500をDOM属性設定
キャンバスの「height」に500をDOM属性設定

キャンバスへ描画開始
```

てにをは が若干おかしい気がしますが めっちゃ日本語ですね！

## 円を描く

「線色設定」関数「塗色設定」関数で色を指定した後に

[ **x** ,  **y** ]へ **r** の円描画
[ **x** , **y** , **x幅** , **y幅** , **回転** , **開始角** , **終了角** , **左回転か**]の楕円描画
を使って描きます

```なでしこ
赤色に線色設定
赤色に塗色設定

[70, 70]へ50の円描画
[270, 70, 30, 50, 0, 0, 360をラジアン変換, 0]の楕円描画
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348002/78a311b9-b4cc-22b7-cafc-5b7c37433d75.png)


## 体を描く

```なでしこ
# 体部分を描画
赤色に線色設定
赤色に塗色設定

[215, 62]へ50の円描画
[67.5, 164]へ50の円描画
[146.5, 195]へ50の円描画
[84.5, 264.5]へ62.5の円描画
[173.5, 409.5]へ45の円描画
[267.5, 420]へ67.5の円描画
[326.5, 82.5]へ65の円描画
[148, 115.5, 46.5, 50, 0, 0, 360をラジアン変換, 0]の楕円描画
[127.5, 342.5, 33, 55, 0, 0, 360をラジアン変換, 0]の楕円描画
[357, 347.5, 71.5, 64.35, 0, 0, 360をラジアン変換, 0]の楕円描画
[369.5, 238.5, 46.895, 56.5, 0, 0, 360をラジアン変換, 0]の楕円描画
[376.5, 163.5, 80, 40, 0, 0, 360をラジアン変換, 0]の楕円描画
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348002/e5dbbd51-ab28-8855-24be-84784264090d.png)


## 目玉を書き込む

```なでしこ
# 白目部分を描画
白色に線色設定
白色に塗色設定

[52.5, 155]へ25の円描画
[100, 275]へ28.5の円描画
[270, 445]へ23.5の円描画
[342.5, 57.5]へ26.5の円描画

[381.5, 353.5, 35, 31.5, 0, 0, 360をラジアン変換, 0]の楕円描画

# 黒目部分を描画
青色に線色設定
青色に塗色設定

[41, 149]へ11.5の円描画
[98.5, 260.5]へ13.5の円描画
[270, 458.75]へ10の円描画
[399.5, 346]へ14の円描画
[352.5, 46]へ12.5の円描画
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348002/901ddc08-27ac-6d65-e14a-777fcb35cf6e.png)

できた！

## 完成品

**nako3storage** にて [いのちの輝きくん](https://nadesi.com/v3/storage/show.php?app_id=288)のコードの確認と実行ができます！
NginxをWebアクセスの踏み台にする。(クライアントが任意に接続先を指定できるリバースプロキシサーバを立てる)

# はじめに
FortigateのSSL-VPNのWebモード接続の仕組みを見て、ふとNginxでこれを再現すれば社内Webサーバアクセス時の踏み台として便利に使えるのではと思い立ち、実装してみました。
丁度ISUCONでNginxをいじっていて、ある程度知見がたまってきたところだったということもあっての閃きでした。


# なにがしたいのか
複数のWebサーバにアクセスしなければならないがWebブラウザからの経路(ポート番号含む)は一本に絞りたい。と考え、リバースプロキシに一旦集約したかったのです。

この手の役割は通常、フォワードプロキシに任せるのが一般的だと思いますが、クライアントPCには社内からInternetに抜けるために別のプロキシサーバを既に設定していましたし、クライアントPCにはなにも設定せず扱えるような便利な仕組みを作りたかったのです。

# メリット

* Nginxを立てたサーバにさえアクセスできるようにすれば、そのサーバからアクセスできる場所へなら簡単にWebアクセスできます。
<!--
* クライアント-踏み台間がTLS接続ではなくなるので、WEBサービスとの通信をパケットキャプチャで検証しやすくなる。テスト環境におすすめ。  
  (下記で紹介するのはセキュリティを気にする必要のない環境で検証したのでSSLを解除する例になります)
* やろうと思えば、クライアント-Nginx間をTLS接続にできる。※別途設定が必要です。
  * 多少安全になるのと、HTTP2化して高速化できます。
-->

# Config

```
server {

    ...

    location ~^/http/(.*)$ {
        proxy_pass http://$1$is_args$args ;
        proxy_http_version 1.1 ;
    }
    location ~^/https/(.*)$ {
        proxy_pass https://$1$is_args$args ;
        proxy_http_version 1.1 ;
    }
}
```

# 使用例
前提として、Nginxをexample.comの8888番ポートに建て、
Nginxがあるサーバからはhttp://X.X.X.X:XXXX/hogehoge にアクセス可能であるとします。

ブラウザで以下のようにURLを指定します。

```
http://example.com:8888/http/X.X.X.X:XXXX/hogehoge
```

HTTP over TLSなら、

```
http://example.com:8888/https/X.X.X.X:XXXX/hogehoge
```

# 最後に
意外と便利です。
少し冗長な書き方な気がしますが、とりあえず動作確認をしたところまで。
他にもいい方法があったら教えてください。

# 追記
リモートワークで寝坊しても遅刻しないようにするTips


リモートワーク浸透してきて約半年。
みなさまの会社はどのように出勤、退勤を管理してますでしょうか。

弊社では勤怠管理ツールにて出勤ボタンを押して、Slackの勤怠報告チャンネルで「リモートワークを始めます」と投稿する流れになっています。

フレックスタイム制なので、一応いつ働いてもいいんですが（朝すぎたり、夜すぎたりはダメ）定刻は10:00 ~ 19:00です。
厳密には遅刻ではないんですが、僕は特別理由がない時は定刻通りで勤務しているので寝坊をすると遅刻した気持ちになります。

なので今回は寝坊した時、ちょっとゆっくりしてて10時に間に合わない時のために自動出勤報告システムを作っていこうと思います。

---

*〜ここまででもうわかるかもですが、ネタです。〜*

# Slack ワークフロービルダー

> ワークフロービルダーは、定型的なプロセスを Slack ワークフローへと簡単に変換できるツールです。ワークフローは、複数のステップからなるタスクやプロセスが自動化されたものです。

今回はワークフロービルダーの中の日時指定実行を使っていきます。

![スクリーンショット 2020-08-31 18.37.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137649/aeb3291e-9fd9-e4fd-e968-130806e4e2b5.png)

次の画面ではスケジュールを決めます。
使ってくれと言わんばかりに月曜日から金曜日までという指定方法があるので、使います。

![スクリーンショット 2020-08-31 18.38.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137649/0a2b030b-df49-1100-12a1-f98dd6045bde.png)

他にも毎月、毎年、など指定できたり、カスタム設定では終了のタイミングも設定できたりします。
Slackのリマインダーより楽かもですね。

![スクリーンショット 2020-08-31 18.41.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137649/3b7ade12-cff0-5670-48e1-653a10e23481.png)

実際にワークフロー作成に入るんですが、その前にBOTとバレないように設定を変更していきます。

![スクリーンショット 2020-08-31 18.49.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137649/efe4f118-0f4d-73ec-efd1-fb727e22faff.png)

名前とアイコンを自分のアカウントと同じに変更。
ステップを追加からメッセージを送信を選択、投稿するチャンネルの指定、メッセージの作成をします。

![スクリーンショット 2020-08-31 18.50.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137649/dca03d27-c33b-2dec-54ca-ae3b4c405f95.png)

プレビューを見ると名前の横に`ワークフロー`と入ってますが、朝はみんな眠いのでこのくらいは大丈夫です。

これで設定は終わりなので、公開をして稼働を確認します。

# 動作確認

10時に投稿されるかを確認するために、いつもより早く起きました（？）
投稿されなかったときのために準備をしてワークフローを待ちます（？）

![スクリーンショット 2020-08-31 19.03.15 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137649/f0a0730d-31fc-83df-0993-508cf6d2c04b.png)

無事投稿されました。これで安心して過ごすことができます。

# 事件

完璧に思えたんですが２点問題がありました。

1. 朝早く起きれてしまい、10時より前に始めたとき
2. 月曜日から金曜日の中に祝日や休暇があるとき

この対処法はワークフロービルダーには実装されていないため、自前で対処する必要があります。
10時より前に始めた場合は急いで公開を止めます。
祝日や休暇の時は前日に公開を止めておきます。

# おわりに

この記事を書いていたらこんな時間（午前2時）になってしまいました。
でも明日からは自動でリモートワークを始めてくれるから大丈夫、おやすみなさい。
【UE4】ガンビットAI的なことが簡単に出来るライブラリをOSSとして公開しました【宣伝】

#はじめに
記事の本体はBlogに投稿したのですが、Qiitaからでもヒットするようにこちらでも書いておきます

記事本体はこちら↓↓↓
[【UE4】ガンビットAI made in UE4を公開しました【自作ライブラリOSS】](http://johnnygamestudio.hatenablog.com/entry/2020/09/01/020727)

#この記事を読むにあたって参考になる過去記事（自分の）
[【UE4】C++プロジェクトでプラグインを追加する場合の手順](https://qiita.com/JGS_Developer/items/8345753fa13b81779d5b)
[【UE4】各要素の重さを考慮してランダムに取得するアルゴリズム](https://qiita.com/JGS_Developer/items/6653828bc5ba5e251ae2)

#あとがき
ほとんど自分用に作りましたが、誰か使ってみてくれたらうれしいです
firewalld がおかしくなったので、なんとか直してみた

# drop に記載したルールでなければ接続できない？！
いじり倒しているうちに、drop ゾーンに設定したサービスやIP、ポートでなければ接続を拒否するようになりました。

```bash
# firewall-cmd --get-active-zones
drop
   sources: xx.xx.xx.xx/xx
public
   interfaces: ethx
```

しかも、public が default のときに、--add-source=yy.yy.yy.yy/yy すると、drop と public の両方に追加される、あるいは remove すると、両方から消されるという状況

なんとか初期状態に戻そうとして、 man firewalld すると、良さそうなのがありました。

```bash
firewall-cmd --permanent --load-zone-defaults=drop
```

これをすると、drop が active でなくなり、設定内容がクリアされていました。

やっと元通り・・・・
想定通りに動いてくれました。
Firebase Realtime Databaseを使用する準備(備忘録）


#1. 概要

FirebaseのRealtime databaseを設定する手順です。
こちらが公式のページです。基本的にはこのサイトの通りに進めれば設定などできました。己への備忘録として記事を書きました。
https://firebase.google.com/docs/database/web/start?hl=ja

2020/8/29に設定したものです。

CLIで行う方法がありますが、今回はFIrebaseのコンソール画面から設定していきます。

##1-1.プロジェクトを作る
Firebaseのコンソール画面に入り、プロジェクトを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/10fae509-6274-7f61-7e5d-8e6f0bc5d996.png)

Realtime Databaseの項目をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/8a677a26-093b-7e42-91bc-ba9621515a18.png)

「データベースを作成」をクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/06ce038f-c78c-a38a-cf6f-65332ab292c5.png)

次に「ロックモード」と「テストモード」の選択画面が現れます。ロックモードでは認証されたサーバーのみアクセス可能のようです。詳しくは[Firebase Realtime Database ルールについて](https://firebase.google.com/docs/database/security?hl=ja)を参照。

今回はプロトタイプイング用として自分のみ利用しますので「テストモード」にします。

#
##1-2. プロジェクトの設定

「Realtime Database のルールを構成する」
現状はテストモードで作成している記述がされていています。詳細なルールを決めたいときに書くようです。

##1-3. Realtime Database JavaScript SDK を初期化する

[Firebase を JavaScript プロジェクトに追加する](https://firebase.google.com/docs/web/setup?hl=ja)

の使用可能なライブラリから、適切なものを選択します。今回はCDNを利用しました。
次のタグをhtmlファイルに記述します。

```
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-database.js"></script>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/10f68f7b-deb1-ac5b-edce-ec7502cf94bb.png)

次にfirebaseにアクセスするための設定（スぺニット)をコピーします。
ウェブアプリ用の設定スニペットを入手するには、

1. Firebase にログインし、プロジェクトを開きます。
2. [概要] ページで [アプリを追加] をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/3dd61367-749f-5940-c31b-66b4ef19c595.png)

3. [ウェブアプリに Firebase を追加] を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/98afc260-61d3-ae85-8a0a-f6b9b42ad17f.png)

4. スニペットをコピーしてアプリケーション HTML に追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183282/7c303a9f-382e-65cf-4d09-6786089d3e70.png)

```
const firebaseConfig = {
    apiKey: "API key",
    authDomain: "~.firebaseapp.com",
    databaseURL: "https://~.firebaseio.com",
    projectId: "~",
    storageBucket: "~.appspot.com",
    messagingSenderId: "~",
    appId: "~"
  };
```

この実装ではページのソースコードを見られると認証キーが全てばれてしまうので、Hosting等を行うようです。
[こちら](https://firebase.google.com/docs/cli?hl=ja)を参照。

#2. データベースへの書き込み
Webページの特定のボタンを押すと書き込みを行うコードです。
タイムスタンプを記録しています。

```
document.querySelector('button').addEventListener('click', () => {
        db.ref('timestamp/').set({
            timestamp: Date.now()
        });
    });
```

#3. データベースからの読み出し

```
const ref = db.ref('timestamp/');

    ref.on('value', (snapshot) => {
        console.log(snapshot.val());
    });
```

#参考
[Firebase ウェブでのデータの読み取りと書き込み](https://firebase.google.com/docs/database/web/read-and-write?hl=ja)
MacでLaravelの環境を構築した

# はじめに
最近研究室でMacを購入してもらったので、MacにLaravelの環境構築をしました。Laravelは最近本を参考にしながら勉強をしており、まだまだ初学者ではありますが、頑張ってます。レベルで言うとCRUD機能を作れるようになったくらいですね。この記事は備忘録程度でまとめておきます。

# brewのインストール
Laravelをインストールする前にMacを買ったらすぐに`brew`をインストールしましょう。すでにインストールしている方は飛ばしてもOKです。
brewのインストール手順は以下のサイトに詳しく手順が載っているので、そちらを参考にしながら行ってください。
https://brew.sh/index_ja

# composerのインストール
brewのインストールができたら、次はLaravelをダウンロードするために必要なパッケージ管理システムである`composer`をダウンロードしましょう。

```
$ brew install composer
```

インストールが終わったら、しっかりインストールできているか確認しましょう。

```
$ brew -v
Homebrew 2.4.15
Homebrew/homebrew-core (git revision f5d550; last commit 2020-08-31)
```

# PHPのインストール
composerがインストールできたら、次はPHPをダウンロードしましょう。Macの場合、買った時点でPHPがインストールされていますが、バージョンが古いとLaravelをダウンロードする時にエラーが出るため、PHPをアップグレードする必要があります。
PHPのアップグレードは以下のコマンドで行うことができます。

```
$ brew install php
```

さっきのcomposerとほとんど変わりません。

# Laravelのインストール
これでLaravelをインストールする準備が整いました。インストールは以下のコマンドでできます。

```
$ composer global require laravel/installer
```
インストールが終わるまで少し時間がかかりますが、ゆっくり待ちましょう。
終わったら先ほどと同じく、インストールされたか確認します。

```
$ laravel -v
zsh: command not found: laravel
```

「・・・あれ？エラー出るんだけど」
そうです。LaravelはComposerやPHPとは違い、このままではまだコマンドとして使えないのでPATHに通す必要があります。

# LaravelをPATHに通す
ではLaravelをPATHに通していきましょう。以下のコマンドを入力することで、PATHに通すことができます。

```
$ export PATH=$HOME/.composer/vendor/bin:$PATH
```

では、先ほどのコマンドを入力してインストールされたか確かめてみましょう。

```
$ laravel -v                                  
Laravel Installer 3.2.0
（以下略）
```

これでインストールは完了です。

# Laravelアプリケーションを作成してみる
では、Laravelを利用したアプリケーションを作成してみましょう。アプリケーションを作成したいフォルダに移動し、そこで以下のコマンドを入力します。今回は`TestApp`という名前のアプリケーションを作りました。

```
$ laravel new TestApp
```

これを実行すると、`TestApp`というフォルダの中にアプリケーションファイルが自動で生成されます。フォルダ内に移動して確かめてみましょう。

```
$ cd TestApp
$ ls
README.md		composer.json		package-lock.json	resources		tests
app			composer.lock		package.json		routes			vendor
artisan			config			phpunit.xml		server.php		webpack.mix.js
bootstrap		database		public			storage
```

このようなファイル・フォルダが生成されていると思います。

# ローカルサーバを起動してindexページを見てみる
最後にローカルサーバを起動して標準で用意されているページを見てみましょう。

```
$ php artisan serve
```

![スクリーンショット 2020-09-01 1.50.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/701186/981eb3c7-7cc1-6f97-e8c1-3f453e291a7e.png)

美しいデザインのページが出てきました。これで環境構築は終了です。お疲れ様でした。

# 参考サイト
[macにLaravelを導入](https://qiita.com/iczo32/items/c20ebd5cf40c8a376cd2)
[Wikipedia - Composer](https://ja.wikipedia.org/wiki/Composer)
[Homebrewのインストール](https://qiita.com/zaburo/items/29fe23c1ceb6056109fd)
クラス内部で std::thread を使う

# 環境
```
$ cat /etc/debian_version 
9.4
```

```
$ g++ --version
g++ (Raspbian 6.3.0-18+rpi1+deb9u1) 6.3.0 20170516
```


# 概要
### やりたいこと 
クラス内部で `std::thread` のコンストラクタを呼び出し，好きなタイミングで `std::thread::join` を呼び出す

```C++:
class MyClass
{
public:
    MyClass(void)
    {
        /* std::thread のコンストラクタを呼び出す */
    }
    void join(void)
    {
        /* コンストラクタで作られた std::thread のインスタンスの join を呼び出す */
    }
};

int main(void)
{
    MyClass my_class;

    /* 何らかの処理 */

    my_class.join();

    return 0;
}
```

`std::thread` のコンストラクタを呼び出したらインスタンスのスコープを抜けるまでに `std::thread::join` か `std::thread::detach` を呼び出さなければならないため，やりたいことを実現するためには ~~std::thread::swap を利用する必要がある．~~

以下で説明する `std::thread::swap` を利用しても実現できるが，[初期化子リストを利用](#例２初期化子リストを利用)したほう無駄のないコードが書ける．

# std::thread::swap
引数に指定した thread と *this を入れ替える．

```C++:
/* cpprefjp - C++日本語リファレンスより */
#include <thread>

int main()
{
  std::thread t1([]{ /*...*/ });
  std::thread t2;

  t1.swap(t2);

  t2.join();

  return 0;
}
```

上記のプログラムのように，t1 でコンストラクタを呼び出した後に `std::thread::swap` を使うことで t2 で thread を管理できるようになる．

参考：[cpprefjp - C++日本語リファレンス | std::thread::swap](https://cpprefjp.github.io/reference/thread/thread/swap.html)

# 例１（std::thread::swap を利用）

```C++:main.cpp
#include <thread>
#include <iostream>

class MyClass
{
private:
    std::thread m_t;

public:
    MyClass(void)
    {
        std::thread t([] { std::cout << "hello" << std::endl; });
        t.swap(m_t);
    }
    void join(void)
    {
        m_t.join();
    }
};

int main(void)
{
    MyClass my_class;

    /* 何らかの処理 */

    my_class.join();

    return 0;
}
```

```bash:コンパイル
$ g++ main.cpp -pthread
```

```bash:実行結果
$ ./a.out 
hello

```

MyClass のコンストラクタで `std::thread` のコンストラクタを呼び出した後に `std::thread::swap` で `MyClass::m_t` と入れ替えることによって，thread をクラスで管理できるようになる．

この方法には無駄な処理が含まれているため，次の初期化子リストを利用する方法の方が良さそうです．

# 例２（初期化子リストを利用）
そもそも `std::thread::swap` を使わなくてもできるとのご指摘をいただきました（@yumetodo さんありがとうございました）．

```C++:
/* @yumetodo さんのコメントより */
#include <thread>
#include <iostream>

class MyClass
{
private:
    std::thread m_t;

public:
    MyClass(void) : m_t{[] { std::cout << "hello" << std::endl; }}
    {}
    void join(void)
    {
        m_t.join();
    }
};

int main(void)
{
    MyClass my_class;

    /* 何らかの処理 */

    my_class.join();

    return 0;
}
```
zsh /etc/zshenv 用シェルスクリプト。テスト版

## 目的

bash、zsh用の/etc/profile /etc/zshenv シェルスクリプト作成。
MacOSXの path_helper を使わずにPATH生成をすることが目的。

## path_helperの問題点

mac版/usr/libexec/path_helperがシステムを異常動作に導く #Mac - Qiita
https://qiita.com/shiro_usagi/items/a35f445e1c8d2293d123
他。

## 仕様

MacOSX 10.6 〜10.9.x。
他は後日別途記載

## ホームディレクトリでテストプログラム作成。
テスト版

```
#!/usr/local/bin/bash　（/etc/profile /etc/zshenvでは書かない）
# (c) shiro_usagi 2020
# Mac用 /etc/prpfile 。
# path.d からPATHを取得し先頭側に文字列連結する。
# 動作保証はしない。筆者はいっさい責任を取らない。
# 上記の条件で非商用であれば自由に使って下さい。

export PATH=/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin

export PATHS_D=~/bin/etc/paths.d
unset FILES
unset line1

#echo $PWD      # Debug
for files in `/usr/bin/find "$PATHS_D" -maxdepth 1 -type f`;
  do
  #echo $FILES  # Debug
  while read line1
    do
    export PATH="$line1:$PATH"
    #echo $PATH # Debug
    #echo ""    # Debug
    done < $FILES
  done
#echo $PATH
export PATH

```

## 入力

```
paths.d $ pwd
/Users/xxxxxxx/bin/etc/paths.d
paths.d $ ls
gettext  ruby     ruby2.sh
paths.d $ more *
::::::::::::::
gettext
::::::::::::::
/usr/local/stow/gettext-021/bin
/usr/local/stow/gettext-021/bin
/usr/local/stow/gettext-021/bin
/usr/local/stow/gettext-021/bin
/usr/local/stow/gettext-021/bin
/usr/local/stow/gettext-021/bin
::::::::::::::
ruby
::::::::::::::
/usr/X11/bin:/usr/local/sbin
::::::::::::::
ruby2.sh
::::::::::::::
paths.d $
```

## 出力結果
zsh環境で期待した出力結果となった。

```
/usr/X11/bin:/usr/local/sbin:/usr/local/stow/gettext-021/bin:/usr/local/stow/gettext-021/bin:/usr/local/stow/gettext-021/bin:/usr/local/stow/gettext-021/bin:/usr/local/stow/gettext-021/bin:/usr/local/stow/gettext-021/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
paths.d $ vim

/usr/X11/bin:/usr/local/sbin:/usr/local/stow/gettext-021/bin:/usr/local/stow/gettext-021/bin:/usr/local/stow/gettext-021/bin:/usr/local/stow/gettext-021/bin:/usr/local/stow/gettext-021/bin:/usr/local/stow/gettext-021/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin

Press ENTER or type command to continue
```

## テスト１
/Users/xxxxxxx/bin/etc/paths.d ディレクトリのファイルを空にしても問題なく動作した。

--
OpenCL で非線形最小二乗最適化ライブラリのメモ

ぺろっとやりたいが, 既存ではあまりありません.

pyopencl と組み合わせた MOT くらいです.

https://github.com/robbert-harms/MOT

ドキュメントではまったく例がないのがつらいところです.

gpufit あたりを参考にして自前で実装するのがいいかもしれません.


https://github.com/gpufit/Gpufit
回帰曲線との距離に応じた点の色付け

#目的

- 回帰分析で求めた直線や曲線からの距離に応じて、
プロットする点の色、濃さを変える。
- 距離の分布を他の図でも可視化する。


#コード

```example.py
import numpy as np
import matplotlib.pyplot as plt
import seaborn as sns
sns.set()  #図がきれいに描画出来るおまじないらしい、私はいつも使っている

amp = 100    #振幅
frequency = 0.02     #周波数
offset = 1000       #オフセット

t = np.linspace(0,100,1000)
y_ = amp*np.sin(2*np.pi*frequency*t)+offset  #理論値=回帰曲線sin
y = np.random.poisson(y_)    #観測値=誤差付きsin

###メイン###
dis = abs( y_ - y )/ y_.max()   #理論値と観測値の差を0.0~1.0の値にスケーリング
color_list=[ [1-9*i,0,i*9,i*5] for i in dis ]   #RGBの値で色を指定

f = plt.figure(figsize = (12,6))
f.add_subplot(121)
plt.scatter(t,y_)
plt.xlabel('t')
plt.ylabel('y')

f.add_subplot(122)
plt.scatter(t,y,color = color_list)    
plt.xlabel('t')
plt.ylabel('y')
```
##結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373924/f318eaa7-5476-7838-e6a4-28e8fd3627e5.png)


#解説
　まず、データについてだが、各時刻のsin波の値を`np.random.poisson(y_)`に代入するこで、
**y** は誤差が平均 **y_**のpoisson分布に従うsin波になっている。であるから、大きな値では誤差が大きくなり、小さな値では誤差が小さい。
　
　今回のメインのグラデーションは、見ての通りfor文を用いてカラーを指定している。matplotlibでは、色の指定を[R,G,B,濃さ]=[r,g,b,c]で指定することが出来る。ただし、r,g,b,cは0.0~1.0の値を取る。
この仕組みを利用して、近距離では色が薄く、遠距離では濃くなるように四則演算をした。
今回の例では、近距離では薄い赤、遠距離では濃い青、になっている。
#注意点

- RGB値は0.0~1.0でなければならないので、係数でこの範囲に調整をしなければならないこと。
- 回帰曲線(回帰直線)付近は、当然、点が多いので、相当薄くしないと、点が重なり、密度が高いのか距離が近いのか区別できない。

#応用
今回の色指定は、回帰曲線からの距離を他の図でも可視化できる。
先程のコードを少し変更し、時間が進むにつれ誤差が大きくなる場合を考える。(コードは後述)
横軸 **t** ,縦軸 **y** 、横軸 **y_** ,縦軸 **y** の図を考えると、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373924/10b5285f-af5a-06e2-f3f4-1cf245db07b9.png)


左図より、一目で距離(誤差)の増加が確認できる。右図からは、**y**と**y_**の距離は**y_**との相関があることが分かる。
このように、プロットする軸を変えることでデータへの理解をさらに深めることが期待できる。
観測値**y**を決めるパラメータが多くなれば、もっと様々な見方を楽しめる。

##改変コード

```example2.py

import numpy as np
import matplotlib.pyplot as plt
import seaborn as sns
sns.set()

amp=100   #振幅
frequency=0.02 #周波数
offset=1000     #バイアス
t=np.linspace(0,100,1000)
y_=amp*np.sin(2*np.pi*frequency*t)+offset

y=np.random.poisson(y_+2.6*t)   ###変更行###

dis=abs(y_-y)/y_.max()
color_list=[[1-3*i,0,3*i,i] for i in dis]    ###変更行###

f=plt.figure(figsize=(12,6))
f.add_subplot(121)
plt.scatter(t,y,color=color_list)    
plt.xlabel('t')
plt.ylabel('y')

f.add_subplot(122)
plt.scatter(y_,y,color=color_list)
plt.xlabel('y_')
plt.ylabel('y')
```

#追加分
時間と理論値**y_**の比較
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/373924/169313a4-c5b3-cef2-48d3-81c0f7270b87.png)
折り返しの色の濃さは、おそらく点の高密度によるもの。
JuliaのインストールしてJupyterLabで動かす

昨年末、Juliaのインストールまでしていたのですが、放置していたので、ふと思い立って今日から再開しました。
とはいえ、インストールしたパソコンはもうリプレイスしていて、手元になかったので、新しいパソコンに一からインストールをしました。

ちなみに、jupyter自体はすでに入っている人も多いと思うので、割愛します。

**参考：Jupyter Notebookのインストール**
https://www.youtube.com/watch?v=pzm_wsqnxn4

# 環境
MacBook Pro (13インチ, 2019)
バージョン： 10.15.6
Julia: 1.5.1

# 手順
## Juliaをダウンロード
公式サイトからJuliaをダウンロードします
https://julialang.org/downloads/
![スクリーンショット 2020-09-01 0.45.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/9c67e2b0-1ee1-6a81-53d3-f4dc7bb2bc11.png)

ダウンロードしたら、ディスクイメージを開いて、「アプリケーション」フォルダに入れます。
![イメージ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/96dd4213-6437-1ec2-24ce-f6a26555dcde.jpeg)
これだけでOK!!

## pathを通す
ターミナルを開いて、pathを通していきます。

まずJuliaがちゃんとインストールされているか確認します。

```
$ ls -d /Applications/Julia*/
/Applications/Julia-1.5.app/
```

では、pathを通しましょう。
コマンド内のバージョン番号は適宜置き換えてもらえればと思います。

```
$ sudo ln -fs /Applications/Julia-1.5.app/Contents/Resources/julia/bin/julia /usr/local/bin/Julia
```

pathが通っているか確認も含め、Juliaを起動してみます。

```
$ julia
               _
   _       _ _(_)_     |  Documentation: https://docs.julialang.org
  (_)     | (_) (_)    |
   _ _   _| |_  __ _   |  Type "?" for help, "]?" for Pkg help.
  | | | | | | |/ _` |  |
  | | |_| | | | (_| |  |  Version 1.5.1 (2020-08-25)
 _/ |\__'_|_|_|\__'_|  |  Official https://julialang.org/ release
|__/                   |

julia> 

```

起動できました！

## JupyterLabで動くようにパッケージを導入

JuliaのREPLで、
]キーをタイプして、
Juliaパッケージマネージャに行き、add IJuliaコマンドを実行します。

```
$ julia
julia> 
( この状態で ]キー をタイプすると、左側が pkg> に切り替わります )
pkg> add IJulia
```

これで、パッケージインストール完了です。

## JupyterLabでJuliaカーネルを選択してnotebookを作成
JupyterLabのランチャーを開くと、Juliaが選択肢として、表示されていれば、インストール成功です。
![スクリーンショット 2020-09-01 1.07.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/7eb933f3-48d7-63ce-3609-98ff69de510c.png)

## 最後に……簡単にCSVを読み込んでデータフレームにします

CSV, DataFramesのパッケージをインストールして、以下を実行します。

```julia
download("https://bit.ly/32Fb6AV", "personal_info.csv")
using CSV, DataFrames
df = CSV.read("personal_info.csv");
head(df)
```
![スクリーンショット 2020-09-01 1.28.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8222/7dc596dd-4b41-fabf-bdc0-fc260f81b798.png)

このデータフレームを見ると、pandasみたいに色々やっていけそうな気が湧いてきました。
Nginxでリバースプロキシする時のメモ(前方一致)

# 目的

いつも混乱するのでメモ
前方一致についてだけ
(正規表現を含む場合はまた少し違ってくる)

### location /hogeにすると、/hogeも/hoge/hogeもマッチする
```
upstream foo {
    server example.com:80 ;
}
server {

    ...

    location /hoge {           # /hogeも/hoge/hogeもマッチ
        proxy_pass http://foo  # passを含まない場合、前方一致したパスも含め結合
    }
}
```
## location /hoge/にすると、/hogeにはマッチしない
```
upstream foo {
    server example.com:80 ;
}
server {

    ...

    location /hoge/ {          # /hoge/hogeにはマッチ
        proxy_pass http://foo/ # パスを含むと、前方一致したパスは省略されて結合
    }
}
```
iOS14でReact Nativeアプリをビルドすると、Imageが表示されない場合の対処

## はじめに
iOS14のbetaバージョンが配布され、アプリのiOS14対応を迫られている方もいるかと思います。
Xcodeのbeta版で普通にビルドして、iOS14のシミュレーターで起動するとどうやら画像が表示されない。
Imageがおかしいようですね。

## 9/17追記
XcodeのiOS14対応正式版がリリースされましたが、このXcodeでビルドしてしまうと
Imageが全て表示されないままのようです。
Xcodeをアップデートしていなければパッチを当てなくても大丈夫ですが、アップデート
してしまった方はパッチが必要です。

## 9/23 追記
React Native 0.63にすればこのパッチの修正が入る様ですが、firebaseあたりでビルドエラーが出る様なのでパッチ対応した方が良さそうです。
> Suggestions: Do not upgrade to 0.63 just patch. I tried upgrading, build failed due to firebase, code-push

## patchを当てよう
1.プロジェクトのルートディレクトリに、`patches`というフォルダを作ります。
2.作ったフォルダの中に`react-native+0.61.2.patch`というファイルを作ります。
3.作ったファイルの中身を入れます。
   
~~~patch
diff --git a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
index 01aa75f..4ef8307 100644
--- a/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
+++ b/node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m
@@ -269,6 +269,8 @@ - (void)displayLayer:(CALayer *)layer
   if (_currentFrame) {
     layer.contentsScale = self.animatedImageScale;
     layer.contents = (__bridge id)_currentFrame.CGImage;
+  } else {
+    [super displayLayer:layer];
   }
 }
~~~
4.プロジェクトのルートディレクトリで`npx patch-package`を実行
5.`node_modules/react-native/Libraries/Image/RCTUIImageViewAnimated.m`を開き、267行目付近が以下のようになっていることを確認する。

~~~javascript
- (void)displayLayer:(CALayer *)layer
{
  if (_currentFrame) {
    layer.contentsScale = self.animatedImageScale;
    layer.contents = (__bridge id)_currentFrame.CGImage;
  } else {
    [super displayLayer:layer];
  }
}
~~~

6.終了です。キャッシュをクリアしてビルドしてみましょう！

## 参考
https://github.com/facebook/react-native/issues/29279
ここにあるパッチだとうまくいかないことがあるので、別の回答をパッチ化しました。
ElmでHTMLを書く練習をしてみた

Elmに慣れるために、まずはインタラクティブではないHTMLをElmで書いてみる練習してみた。

## HTMLを生成する関数を練習
さっそくHTMLを生成する関数を練習してみる。
私は、最近札幌旅行にいったので、その日記をHTMLとElmで比べながら書いて比較した。

### まずHTMLで書く
HTMLのシンタックスでは、次のような構文で入れ子構造を構築する。

```html
<h2 id="sapporo">札幌の美味しいお店</h2>
```

| 用語                          | この例での指定         | 備考                                               　|
|-------------------------------|----------------------|-----------------------------------------------------|
| 要素(ノードともいう)            | `h2`                 | DOMは、要素によるツリー構造がメモリ上に保持されたもの。  |
| 属性                           | `id="sapporo"`       | 要素は0個以上の属性を指定できる。                      |
| 子要素                           | `札幌の美味しいお店`  | 要素は0個以上の子要素を持てる。                  |
| テキストノード                  | `札幌の美味しいお店`  | 要素の子要素として、ただの文字列を指定する場合、それはテキストノードとなる。 |

```html
<div>
  <h1>札幌旅行に行ってきました。</h1>
  <p>夏休みを利用して札幌へ行ってきました。
     コロナ禍ともあり他観光客は例年と比べて1/10の人の少なさ！
     東京と大阪の友達と札幌で現地集合現地解散の旅行で最高の旅が出来ました。</p>
  
  <h2>札幌の美味しいお店</h2>
  <p><a href="http://toriton-kita1.jp/" target="_blank">トリトン</a>という回転寿司がバカウマ！！ここは刺し身のネタが本当に良い！特にサーモン。これはどこの寿司屋よりもうまい！
    トリトンのライバルとして根室はなまるという寿司屋もあるがここまもめちゃくちゃうまい。しかし刺し身のネタはトリトンの勝ちかあ。しかしアラ汁は根室はなまるの圧勝です。</p>
 
  <h2>楽しかった思い出ランキング</h2>
      <ol>
        <li>モエレ沼公園</li>
        <li>トリトン</li>
        <li>モール系温泉</li>
      </ol>
 
</div>
```
CodePen: https://codepen.io/atsu6/pen/NWNvddP

### それをElmに変換

```elm
module Main exposing (main)

import Browser
import Html exposing (..)
import Html.Attributes exposing (..)

view :  Html ()
view =
    div []
        [ h1 [] [ text "札幌旅行に行ってきました。" ]
        , p [] [ text "夏休みを利用して札幌へ行ってきました。コロナ禍ともあり他観光客は例年と比べて1/10の人の少なさ！東京と大阪の友達と札幌で現地集合現地解散の旅行で最高の旅が出来ました。" ]
        , h2 [] [ text "札幌の美味しいお店"]
        , p [] 
            [ a [ href "http://toriton-kita1.jp/" 
                , target "_blank"
                ] [text "トリトン"]
            , text "という回転寿司がバカウマ！！ここは刺し身のネタが本当に良い！特にサーモン。これはどこの寿司屋よりもうまい！トリトンのライバルとして根室はなまるという寿司屋もあるがここまもめちゃくちゃうまい。しかし刺し身のネタはトリトンの勝ちかあ。しかしアラ汁は根室はなまるの圧勝です。" 
            ]
        , h2 [] [ text "楽しかった思い出ランキング" ]
        , ol []
            [ li [] [text "モエレ沼公園" ]
            , li [] [text "トリトン" ]
            , li [] [text "モール系温泉" ]
            ]
        ]
       
       

main = view
```

Ellie: https://ellie-app.com/9QZ9PvZZFNxa1

### つまづいたポイント
1. `h2 [] [text "札幌の美味しいお店"]` のように、HTML属性がないのに空リストを渡す必要があるかわからなかった。-> [解答] : h2は２つの引数を受け取るから、要素が0個だったとして空リストは指定しないといけない。これは関数には型があるからである。
2. リストを囲みすぎたり、なさすぎたりした。->  Elmでのリストの書き方になれていなかったのが原因(かも?)
3. テキストの文字列の中で、リンク化しようとしてしまった -> テキストノードという概念を意識していなかったから(かも?)

## 感想
今の所HTMLで直接書くほうが、楽と感じた。
しかしElmでHTMLを書くことを慣れればそちらのほうが曖昧さを許さないため安全性が高いらしい。
今後もうちょっと追ってみる！！
配列の引数をスプレッド構文で受け取り、かつデフォルト値を設定したい

# どこで使うか
配列をpropsとしてスプレッド構文で受け取りたいことは多々あると思う。

```jsx:親コンポーネント
const ParentComponent = () => {
    const user = ["Taro", 20]
    return (
        <ChildComponent user={user} />
    )
}
```

```jsx:受け取ったあとに再代入が必要な例
const ChildComponent = (props) => {
    const [name, age] = props.user
    return <p>{name}は{age}歳です。</p>
}
```

```jsx:スプレッド構文で受け取る例
const ChildComponent = ({user: [name, age]}) => {
    return <p>{name}は{age}歳です。</p>
}

// ちなみにreturnだけなら、１行で書く方が好き。
const ChildSuperComponent = ({user: [name, age]}) => <p>{name}は{age}歳です。</p>
```

しかし、上記の例だと、仮にuserというpropsが渡されなかった場合、スプレッドすることができずに以下のようなエラーとなってしまう。

```
Uncaught TypeError: Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
```

# スプレッド構文で受け取る場合のデフォルト値
そこで、下記のようにデフォルト値を設定することで、エラーを回避する。

```jsx:スプレッド構文で受け取る例(デフォルト値あり)
const ChildComponent = ({user: [name, age]=["name", 1]}) => <p>{name}は{age}歳です</p>
```

私はこれを以下のように書いてしまい解決に時間がかかってしまった。なんとなくできそうな気がしたのだが。。反省。

```jsx:間違い
const ChildComponent = ({user: [name="name", age=1]}) => <p>{name}は{age}歳です</p>
```
【Unity】Universal RPでARアプリ開発

Shader Graphを使ったARアプリを作ったのですが、情報があまりまとまってなかったのでまとめます。

作ったアプリについてはこっちで詳しく書いてます。
[【Unity】Shader GraphでVertex Animation Textureを使う](https://qiita.com/komakinex/items/07c0a75271ca886f0de5)

ARで表示するCGを、現実の空間に溶け込ませるための影や地面のオクルージョンについてはこちらの記事にまとめています！
[【Unity】ARで表示するCGを現実になるべく馴染ませる](https://qiita.com/komakinex/items/314ff94574b625fb2098)


#環境
Unity 2019.4.1f1
Universal RP 7.3.1
ARFoundation 3.0.1
ARKit XR Plugin 3.0.1

Macbook Pro 13 2017 Mid メモリ8GB
MacOS 10.14.6

iPhone XS
iOS 13.6


#参考にしたもの

AR FoundationをURPに対応させる一連の流れ
https://www.jyuko49.com/entry/2020/05/17/211358

URPでARFoundationを使う手順とエフェクトのかけ方
https://youtu.be/jyGQErgVE8E


#手順

##1. URPでファイル作る
URPが予めインポートされて楽です。


##2. iOSに変更
プラットフォームをiOSに変更します。

##3. Packageをインポート
Package ManagerからARFoundation、ARKit XR Pluginをインポートします。


##4. PlayerSettingの設定

Build Setting → Player Settings → Player/Other Settingsで
・Camera Usage Description : Camera required for AR
・Target minimum iOS Version : 12.0
・Architecture : ARM64
・Bundle Identifierの設定
　　Company Name：hoge
　　Product Name：TestApp
　　の場合
　　com.hoge.TestApp
を設定し、
Player/XR Plug-in Managementで
・iOSタブ/Plug-in Providers/ARKitにチェックを入れます


##5. Project、Sceneの変更
Assets/SettingのFowardRendererのRenderFeaturesにAR Background Renderer Featureを追加します。

SampleSceneのMain Cameraを消して、XR/AR Session OriginとXR/AR Sessionを追加します。


以上で、ARFoundationでShader Graphを使える準備が整いました。




##補足
ARの開発は実機テストに時間がかかるのがネックだと思うのですが、このアセットを使うとビルドせずに実機で確認できたのでめちゃくちゃ楽でした。$60の価値、あります。
[AR Foundation Editor Remote](https://assetstore.unity.com/packages/tools/utilities/ar-foundation-editor-remote-168773)
kaminariを使ったページネーションの実装

備忘録です！

##kaminariのインストール

まずは、kaminariをインストール

```
gem 'kaminari'
```
bundle installします。

##controllerの設定

```
def index
  @board = Board.all.includes(:user).order(created_at: :desc).page(params[:page])
```

・1ページあたりの表示件数は何件にするか(perメソッドを使用)
・何ページ目を表示させるのか(pageメソッドを使用)

これらをコントローラーで設定できます。

＊今回は、別の専用ファイルで、perメソッドを設定していません。

ちなみに、kaminariは配列に対しても使用可能で、

```
def index
  @board = Board.all.includes(:user).order(created_at: :desc)
  @board = Kaminari.paginate_array(@board).page(params[:page]).per(20)
end
```

このように、paginata_arrayメソッドを用いれば、配列にも使用できる。

##viewの設定

```
<%= paginate @board %>
```

こちらを追加する。

##専用の設定ファイルの作成と設定

まずは、専用ファイルを作成する。

```
rails g kaminari:config
```

専用ファイルを用いて設定値を決める。

```ruby:config/initializers/kaminari_config.rb
Kaminari.configure do |config|
  # config.default_per_page = 20      #1ページに表示される数
  # config.max_per_page = nil         #1ページの最大表示数
  # config.window = 4                 #現在のページの左右に表示する数
  # config.outer_window = 0
  # config.left = 0
  # config.right = 0
  # config.page_method_name = :page
  # config.param_name = :page
end
```

##bootstrapで実装

```
rails g kaminari:views ○○(ダウンロードしたいviewテンプレート)
```

とコマンドを打ち込むと、事前に用意されているテンプレートの中から、お好きな見た目を選択して使用することができますし、それらの編集も可能となります。

今回は、bootstrapのテンプレートを使用したいので、

```
rails g kaminari:views bootstrap4
```

とコマンドを打ち込むとテンプレートが生成されるので、特に変更を加えなくても、綺麗なページネーションを作成してくれる。
QTabWidgetの各タブに個別の.uiファイルを使う

## 概要

twitterで [そんな話が出た](https://twitter.com/yupom9/status/1300262425644552192) 。1, 2がすぐに思いついたけど、もしかしたら3じゃね？と思ったので書いておく。酔っぱらって帰ってきて書いているので何を書いているかよく分からない。
多分tab1でURL入力してボタン押すとtab2で文字列表示するとかそんな感じ。httpsが表示できないのはいつものこと。QWebViewが無くなっててチビった。
コードは [Github](https://github.com/Atsushi4/qt_users_tabwidgets_separated_ui) に置いておく。

分からないところがあればtwitterの [@Atsushi4](https://twitter.com/atsushi4) アカウントに投げると返信が有るかもしれないし無いかもしれない。

### その1 (sample1)

`ui->tabWidget->addTab(new MyWidget1, "tab 1");` する。
QTabWidgetの中身をcppで構築する方法。

1. UIファイルを開いてQTabWidgetを右クリック。「Xページ中のXページ目」→「削除」で全タブ削除。
2. MainWindowでaddTabする。

以上。

### その2 (sample2)

「格上げ」を使って、UIファイルで追加したタブのQWidgetを自前クラスに格上げする方法。

1. UIファイルを開き、オブジェクトインスペクタ（？）でQTabWidget内のtab(QWidgetクラス)を右クリック。「格上げ先を指定...」を選択。
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11596/ca424ea1-5e70-6378-4bac-41df7d5e760b.png)

2. クラス名 MyWidget1, ヘッダファイル mywidget1.h、グローバルにインクルードする にチェックして「追加」、そのまま「格上げ」。
   ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11596/456e28a5-3d52-083c-51e9-ca207ba6b131.png)

3. 同様にtab_2をMyWidget2へ格上げ。

以上。

### その3 (sample3)

さて、ここまで来て「そもそも件の質問は『各タブごとに.uiのファイルに分ける』と書かれていて、クラスに分けるとは言っていない」ということに気づいた。
つまりuiファイルだけを分けたいということかしら？ということで書いてみたのがこちら。

1. UIファイルをタブの数だけ作る。
2. 全部メンバに持って全部includeしてそれぞれsetupUiする。

以上。

できなくはないけど親ウィジェットの処理が膨らむし、メンバは増えるし見通しは悪いし、製品コードではクラスを分ける方が無難だと思いますよ・・・。
あと、複数のuiファイルで同じobjectNameのウィジェット作るととても残念なことになるのでお気をつけて。

### あとがき

ちなみに今回QWidgetを継承したMyWidgetXをQtCreatorから作成したら `#include <QtGui/QWidget>` ってなったので xxx って思った。(Qt Creator 4.10.2 Based on Qt 5.13.2(MSVC 2017, 32bit))
あと、フォームエディタのシグナル/スロットエディタで格上げしたtabとtab_2のシグナル、スロットが接続できなくて残念だった。(小並感)
Active Hashの落とし穴

##概要

今回、Active Hashに格納したデータを商品編集で呼び出す際に落とし穴にハマってしまったので共有しておきます。

qiita内を色々と検索かけてみましたが、なかなか解決せず、沼ってしまいました、、、

##実装内容

一度あらゆるデータを登録して出品したitemに、editアクションで編集する機能を実装します。

ポイントは、編集画面に遷移したら元々登録してあったデータがリセットされずに登録されていることです。

うまくビューファイルの呼び出し記述やモデルのアソシエーションの結びつけをできていれば問題ないのですが、しっかりエラーしまくりました。

##解決方法

先に解決方法から言っておきます。

今回のような機能を実装する場合、Active Hashにあるデータのカラム名は
**xxx_id**
としましょう。

例えばカテゴリーや配送元の都道府県などは固定のデータなのでActive Hashに記述します。ここで、itemのカラムと紐づける場合、しっかりとcategory_idやprefecture_idとしましょう。

逆にモデルでアソシエーションを組む際は、
belongs_to_active_hash :categoryのようになり、_idは記述しないで大丈夫です。

以下、コードをまとめておくのでそちらで理解していただければ幸いです。

##コード

```ruby:models/item.rb
---省略---
extend ActiveHash::Associations::ActiveRecordExtensions
  belongs_to_active_hash :category
  belongs_to_active_hash :condition
  belongs_to_active_hash :postage_type
  belongs_to_active_hash :prefecture
  belongs_to_active_hash :preparation_days
---省略---
```

```ruby:views/edit.html.erb
<div class="items-detail">
      <div class="weight-bold-text">商品の詳細</div>
      <div class="form">
        <div class="weight-bold-text">
          カテゴリー
          <span class="indispensable">必須</span>
        </div>
        <%= f.collection_select(:category_id, Category.all, :id, :name, {}, {class:"select-box", id:"item-category"}) %>
        <div class="weight-bold-text">
          商品の状態
          <span class="indispensable">必須</span>
        </div>
        <%= f.collection_select(:condition_id, Condition.all, :id, :name, {}, {class:"select-box", id:"item-sales-status"}) %>
      </div>
    </div>
```

マイグレーションファイルは以下のようになっています。
注目して欲しいのは、カラム名に_idがついているところです。

```ruby:○○_create_items.rb

class CreateItems < ActiveRecord::Migration[6.0]
  def change
    create_table :products do |t|
      t.string :name, null: false
      t.text :explanation, null: false
      t.integer :category_id, null: false
      t.integer :condition_id, null:false
      t.integer :postage_type_id, null:false
      t.integer :prefecture_id, null:false
      t.integer :preparation_days_id, null:false
      t.integer :value, null:false
      t.references :user, foreign_key: true
      t.timestamps
    end
  end
end
```

##最後に
僕はカラム名に_idがつかなきゃいけないことに気づかずに沼っていました。
コンソールとかをいじればこの理論がよくわかると思いますが、同じ初心者でエラー解決がまだ不得意で困っている方の助けになれば幸いです。
え!? Windows上でLinuxを動かす？できらぁ！！(WSL2を設定してUbuntu入れてみた)

## 作業者のスキル
- バックエンドが主戦場のPHPer
- 業務ではVagrant + ansibleでCentOSの仮想環境を構築
- インフラとか仮想化は苦手分野
- Docker難しい。まだまだこれから

## まずはWindows10のバージョン確認
Win + Rでファイル名を指定して実行が立ち上がるので"winver"と打ち込んでバージョン、OSビルドを確認しましょう。
![update完了.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196297/814f8889-a131-77b1-fdab-42b085a10a2c.png)
私が試したタイミングではバージョン2004にする必要があったため、[こちら](https://www.microsoft.com/ja-jp/software-download/windows10)からアップデートを行いました。(↑のキャプチャはupdate後のものです）

## "Linux 用 Windows サブシステム"オプションの有効化
公式ドキュメントより
> Windows 上に Linux ディストリビューションをインストールする前に、"Linux 用 Windows サブシステム" オプション機能を有効にする必要があります。
管理者として PowerShell を開き、以下を実行します。

```powershell
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
```
powershell開くときに管理者でちゃんと開きましょうね。管理者以外でやるとエラーになります（やりました）
![WSL有効キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196297/2a557c69-2f04-ede8-ba90-1391cd3b9f1f.png)

## "仮想マシン プラットフォーム" のオプション コンポーネントを有効にする
> WSL 2 をインストールする前に、"仮想マシン プラットフォーム" オプション機能を有効にする必要があります。
管理者として PowerShell を開き、以下を実行します。

```powershell
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
```
![仮想マシンプラットフォームの有効化キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196297/867283b7-19ae-3864-7456-9191c6664fee.png)

ここでいったん再起動します

## WSL 2 を既定のバージョンとして設定する
```powershell
wsl --set-default-version 2
```
こちら実行時に一度エラーになってしまいました（キャプチャ忘れ。。0x1bcとか出てた気がします）
どうもWSL2 Linuxカーネルの更新が必要みたいです。
[こっから](https://docs.microsoft.com/ja-jp/windows/wsl/wsl2-kernel)落として更新しましょう
![なんかアプデキャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196297/f3595fb3-72c3-8c3f-a93e-b9bef44d40e0.png)
無心でNext進めていけば更新されます。
更新完了すれば、改めてWSLの規定バージョンを設定
![wsl2デフォルト設定キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196297/881545b4-542e-78b6-c807-4a3edb2a7aec.png)
OKです。

## Ubuntuのインストール
Microsoft Storeを開いてUbuntuをインストールしましょう
![windowsストアキャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196297/afa3e5ba-db0b-439b-0ad4-baa7c83d46f3.png)
5分ほどインストールかかりました。
さっそく起動させてみます。
![ubuntuキャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196297/ed93c3c0-5209-570f-c311-3d4b4bbdf95c.png)
新規ユーザー名とパスワードを求められるので好きに設定しましょう。

以上で完了です。
Windows上でエンジョイUbuntuライフ:muscle:

## 参考
[Windows 10 用 Windows Subsystem for Linux のインストール ガイド](https://docs.microsoft.com/ja-jp/windows/wsl/install-win10)
[Windows Subsystem for Linux 2(WSL 2)をセットアップしてみた](https://dev.classmethod.jp/articles/how-to-setup-wsl2/)
Unityで空のエラー

# 現象
- Unityで3Dプロジェクトを新規で作成すると、コンソールウィンドウにメッセージのないエラーがでる
- この時、Editor.logに下記のエラーがでる（UnityEngine.TestRunner.dll以外にもコンパイルに失敗しているエラーが複数でる）  

```text:Editor.log
-----CompilerOutput:-stdout--exitcode: 137--compilationhadfailure: True--outfile: Temp/UnityEngine.TestRunner.dll
-----CompilerOutput:-stderr----------
Failed to initialize CoreCLR, HRESULT: 0x80004005
-----EndCompilerOutput---------------
```

- この状態で、playmodeにしようとするとコンソールウィンドウに下記のエラーがでる  
"All compiler errors have to be fixed before you can enter playmode!
UnityEditor.SceneView:ShowCompileErrorNotification() (at /Users/builduser/buildslave/unity/build/Editor/Mono/SceneView/SceneView.cs:3652)"

# 環境
- OS  
Mac OS Mojava 10.14.6
- Unity Hub  
2.3.2
- Unity  
2019.4.8f1 ※Unity Hub でインストール済み

# 原因
デフォルトで使っているCSCがよくないらしい

# 対処法
- Unityが使っているCSC以外のCSCを探す

```console
$ sudo find / 2> /dev/null | grep csc$
/Library/Frameworks/Mono.framework/Versions/6.12.0/bin/csc
/Library/Frameworks/Mono.framework/Versions/6.12.0/Commands/csc
/Applications/Unity/Hub/Editor/2019.4.8f1/Unity.app/Contents/Tools/Roslyn/csc
```
↑最後のやつがUnityが使っているCSC

- デフォルトのCSCを他のCSCに置き換える  
`/Applications/Unity/Hub/Editor/2019.4.8f1/Unity.app/Contents/Tools/RoslynScripts/unity_csc.sh` を書き換える

```bash:unity_csc.sh
#CSC_NET_CORE=$APPLICATION_CONTENTS/Tools/Roslyn/csc
CSC_NET_CORE=/Library/Frameworks/Mono.framework/Versions/6.12.0/bin/csc
```
Unityが使っているcscをリネームして他のにエイリアスを貼ってもいけるかもしれないけど試してない。
# 参考URL
[MacのUnityで空エラーがでた場合の対処方法(Unity2019.3.0f5)](https://qiita.com/br_branch/items/25e20ec170d8db48393d)
Adobe XDにして何が嬉しいの？

#はじめに
最近では当たり前になりつつあるXDですが以前まではillustratorやphotoshopなどでwebデザインを行ってきました。
しかし今ではほぼほぼXDでまかなえるほどのツールになってきました。
XD意外にも様々なツールがありますが、私自身がXDを使い始めてから今まで
嬉しかったことや残念だったことなどを書いていこうと思います。

#嬉しかった点

##動作が軽い
これがかなり自分にとって嬉しい点の一つです！
illustratorなら何個もアートボードを作成していたら、
動作が重くなり、作業に支障が出てきてしましますが、
XDに関してはかなりの数のアートボードを作成しても重くなることは今のところ感じたことがありません。

##アセット機能
これも便利！
webデザインするにあたっての色の統一化がこれで簡単にできます。
また、途中で色を変えたいときも元のアセットカラーを変更すれば
そのアセットカラーを使っている要素も一括に変更されるのでとても楽に変更することができる。
![スクリーンショット 2020-09-01 0.29.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536289/ad2be172-345b-d169-47e5-93537d81aa61.png)


##リピート機能
Webデザインをしていると同じ要素のくり返すことがよくあります。
その時に利用するのがこの機能です。

また１つ変更すれば全ての要素も変更されるので作業効率もアップします。
![スクリーンショット 2020-09-01 0.34.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536289/7327dc8e-fc14-bfb4-9b71-ab14e5667900.png)

##プレビュー機能
スマホのプレビューがリアルタイムで確認できる機能です。
またこちらも動作が軽く変更した内容がすぐに確認できるのでとても嬉しい機能です。
またプレビューの際にヘッダーやフッターを固定することもでき、よりリアルな確認ができるようになっています。

##アニメーション機能
開発の担当の人にボタンのアニメーションの仕方を説明する時以前までは
「ここはシュッって出てきて、フワって消えて欲しい」
というようにうまく説明ができなかったことがXDのアニメーション機能を使えば視覚的に伝わるのでとても便利になりました。
例えば


#残念だった点
そんなにないですが、強いていうなら…

##細かいデザインができない
やはり細かいシャドウやレイヤー効果をつけたいなって思ったら、
illustratorやphotoshopには負けてしまいます。

##Adobe製品なのでお金がかかってしまう
これに関してはadobeを使い慣れてる人ならXDは操作しやすいですし
機能も申し分ないと思いますので、正直問題ないっちゃないですけどね。


#まとめ
正直なところまだまだ使いこなせていないので(特にアニメーション系)
もっと勉強してマスターしていこうと思っています！
またXDはまだまだ新しいツールです。(まだ3年ほど)
どんどんこれからアップデートが行われていき、もっと便利になっていくと思います！
bash: syntax error near unexpected token `host'  が出た時はログインを忘れてる！！（初心者向け）

SQL8.0を操作しようとした時
bash: syntax error near unexpected token `host'
こんなエラーが出た人向けに書きます。



まずは結論からいうとMySQLにログインしていないことが原因です。

```
basic_django_mssql_graph yuya$  mysql.server start
```

SQLをスタートさせて


次が肝心のログインです。

```
basic_django_mssql_graph yuya$ mysql -u root
```


ちゃんと入れば




```
mysql> select user, host from mysql.user;
```


ちゃんとログインすれば
bash: syntax error near unexpected token `host'
こんなエラーなんか起きません。
rails メールアドレス　ドメイン制限

#ドメインを制限しよう！
###①devise追加
###②$ rails g devise:controllers users
###③ルーティングを設定
###④registrations_controller.rbに記入

## Devise導入方法
Gemfileにdeviseを追加

```rb:Gemfile
gem 'devise'
```
deviseインストール&Userモデルを生成

```
$ bundle Install
$ rails g devise:install
$ rails g devise User
```

## DeviseControllerのカスタマイズ方法

認証ユーザーのモデルが User であれば、app/controllers/users ディレクトリ以下にファイル作成

```
$ rails g devise:controllers users
```

で app/controllers/users/の中に
- `confirmations_controller.rb`
- `omniauth_callbacks_controller.rb`
- `passwords_controller.rb`
- `registrations_controller.rb`
- `sessions_controller.rb`
- `unlocks_controller.rb`
が作成されます
今回ドメイン制限は`registrations_controller.rb`
のファイルの中に設定してあげます

## ルーティング設定
生成したDeviseControllerのルーティングを設定します。

```rb:routes.rb
devise_for :users, :controllers => {
 :registrations => 'users/registrations'
}
```

#本日の主役！
先ほど作ったDeviseのコントローラーに予めドメインを設定してあげてそのドメインと違っていればサインアップ画面に戻りメッセージがいくようにします

```erb:registrations_controller.rb
class Users::RegistrationsController < Devise::RegistrationsController

#省略
  # POST /resource
  def create
    mailRegex = /.*@gmail.com/
    email = params[:user][:email]
    if !email.match?(mailRegex)
      redirect_to new_user_registration_path
      flash[:notice] = 'ドメインはgmail.comのみ有効です'
      return
    end
    super
  end

#省略
```
mailRegexでドメインを制限して、`!email.match?(mailRegex)`で指定されたものと異なっていれば`redirect_to`でまたSign_upの画面に戻るように設定します。そのときにflash[:notice]を利用し、ドメインが違っている人に対して優しいメッセージを送ってあげましょう。


![スクリーンショット 2020-09-01 12.06.03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619699/642bac08-fd9c-798c-634a-4426a60fdad0.jpeg)



###補足


:valueの値に@gmail.comを入力してあげると記入者が楽になります

```erb:views/devise/new.html.erb
  <div class="field">
    <%= f.label :email %><br />
    <%= f.email_field :email, autofocus: true, autocomplete: "email" ,:value => "@gmail.com"%>
  </div>
```

![スクリーンショット 2020-09-01 12.03.45.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619699/272d22f8-d948-1810-5c15-e32af10c6819.jpeg)
UnityでAsset Storeにログインできない

# 現象
Window -> Asset Storeをクリックして、Asset Store画面で'Sign In'ボタンをクリックすると、
'Install Unity Hub You must install the Unity Hub to sign in and use Unity services.'　とポップアップされる。

# 環境
- OS  
Mac OS Mojava 10.14.6
- Unity Hub  
2.3.2
- Unity  
2019.4.8f1 ※Unity Hub でインストール済み


# 対処法
'Sign In'ボタンではなく、'Create a Unity Account' を押して表示されるページからログインする
ヘルパーメソッドで条件分岐をする

 ##概要

今回は、ビューファイルを記述していく際に、ヘルパーメソッドを用いて条件分岐していく実装について書いていきたいと思います。

具体的には、
フリマアプリなどで「商品が購入されていない時」にはこの部分の表示がしたい。
だったり、
「ユーザーがログインしていない時」はこの表示は隠しておきたい。
と言ったような機能を実装します。


##例

```ruby:xxx.html.erb
<% if user_signed_in? && current_user.id == @product.user_id %>
```

これは、記述以下の部分を
「ユーザーがログインしている状態かつ、そのユーザーがこの商品を出品したユーザーだった場合のみ」
表示する記述です。

```ruby:xxx.html.erb
<% if @item.item_purchase.present? %>
```

これは、記述以下の部分を
「@itemのitem_purchaseカラムにデータが存在する場合のみ」
表示する記述です。

ここに書いただけでなく、様々な実装があるとは思いますが、作業した内容としてアウトプットしておきます。
dockerhubのrate limits

# Docker Hubで11月からデータ量制限が開始されると聞いたのでメモ
[Download rate limit](https://docs.docker.com/docker-hub/download-rate-limit/)
「Dockerは、Docker Hubでのプルリクエストのダウンロードレート制限を有効にしました。
レート制限を徐々に導入し、2020年11月1日から完全に適用されます。」とのこと

### 価格
お値段はこちら
[Docker Hub Pricing](https://www.docker.com/pricing)
Dockerコマンドチートシート

# このチートシートについて
網羅的な一覧ではなく、あくまで基本的な用途で使用するコマンド及びオプションの組み合わせになります。
１つ１つの意味が知りたい方は、以下を参考にするとわかりやすいかと思います。

### Reference
- [Docker理解](https://qiita.com/minato-naka/items/8b31d28823cabaa9487a)
- [Dockerコマンド一覧](https://paiza.hatenablog.com/entry/docker_intro#commands)

# Docker Compose
## コンテナ起動前
-  docker-compose.ymlの設定に従いコンテナを作成・起動

```
docker-compose up -d
```

- Dockerfileから作成

```
docker-compose up -d --build
```

- コンテナ起動・停止

```
docker-compose start
docker-compose stop
```

## コンテナ起動後
- コンテナ一覧表示

```
docker-compose ps
```

- コンテナ削除

```
docker-compose down
```

## トラブルシュート
- コンテナの確認(一度限りのコマンド実行)

```
docker-compose run (サービス名) (コマンド)
```

# Docker
## Dockerイメージ操作
- Dokcer Hubからイメージ取得

```
docker pull (イメージ名)
```

- イメージ一覧表示

```
docker image ls
```

- イメージ削除

```
docker image rm (イメージ名)
```

- Dockerfileからイメージ作成

```
docker build -t (イメージ名)　(Dockerfileがあるディレクトリパス)
```

## コンテナ起動前
- イメージからコンテナ作成

```
docker create --name (コンテナ名) (イメージ名)
```

- イメージからコンテナを起動

```
docker run --rm -it -v (ローカルディレクトリパス):(コンテナのディレクトリパス) -p (ローカルポート):(コンテナポート) (イメージ名) [(起動プロセス名)]
```

- コンテナ起動・停止

```
docker start (コンテナ名)
docker stop (コンテナ名)
```

## コンテナ起動後
- コンテナ一覧表示

```
docker ps -a
```

- コンテナにログイン

```
docker exec -it (コンテナ名) bash
```

## トラブルシュート
- コンテナのログ確認

```
docker logs -f (コンテナ名)
```
 
- コンテナが動かない場合

```
docker run --rm (コンテナ名) bash
```

- ディレクトリマウントを途中からしたくなった場合
    - 一度コンテナを止めて、スナップショットのイメージを取って、-vオプションを付けて再度コンテナ起動
    
```
docker stop (コンテナ名)
docker commit (コンテナ名) (イメージ名)
docker run (オプション) (イメージ名)
```
AtCoder ABC177C　Pythonで累積和を使わずに解く

#はじめに

ここ3回ほど、AtCoderに参加したばかりの初心者です。お仕事はCを書くことが多いのですが、他の言語にも慣れたくて、Pythonを使って解くことにしています。Pyhton(そしてQiitaも)初心者なので、コード上のアドバイスなどありましたら、コメントいただければ幸いです。

累積和を使わないで解答したのは、累積和というテクニックを知らず、コンテスト中にひねり出した答えだったからです。コンテスト後いくつか解説の記事を見てみたのですが、累積和を使用する解答が多く、記事として残しておくことにしました。


#問題概要

ABC177C「Sum of product of pairs」

$N$個の整数$A_{1},....A_{N}$で構成された数列が与えられる。
$1≤i<j≤N$を満たす全ての組$(i,j)(i,j)$についての$Ai×Aj$の和を$mod(10^9+7)$で求めよ。

ABC177Cの解説記事
https://qiita.com/rute_not_route/items/c6fbf3acfcfd93c9258d


#考え方
みなさん小学校で習ったので九九の表はご存知だと思いますが、九九の表全体の合計値はご存知ですか？
答えは2045です。シンプルに計算すると、次のように力技で解くことができます。
$$(1\times1) + (1\times2) + \cdots (9\times8)+(9\times9) = 2045 $$

しかし九九の総和は1から9までの合計を計算し、その合計を2乗することで計算することができます。
$$
(1+2+\cdots+9)^2=2045
$$

このアイディアを用いて、次のような方針で解いていきます。
①九九の表のように、入力配列の総和の2乗を計算する。これを$sum$とする。
②九九の表のように並べた場合の対角線要素(例:$A_iA_i$など)の和を計算する。これを$rem$とする。
③答えとして$(sum-rem)/2$を計算する。

イメージとしては、九九表に置ける以下のoで示した部分の合計を計算したいのです。
②でxの部分($rem$)の合計を計算します。
③で全体を2で割ることで、「oエリア」と「-エリア」を区別します。
※「oエリア」と「-エリア」の合計値は同じ。

```
  1 2 3 4 5 6 7 8 9 
1 x o o o o o o o o
2 - x o o o o o o o
3 - - x o o o o o o
4 - - - x o o o o o
5 - - - - x o o o o
6 - - - - - x o o o
7 - - - - - - x o o
8 - - - - - - - x o
9 - - - - - - - - x
```


#解答例
上記の考え方を使用しての解答例は、こんな感じです。

```Python
n = int(input())
a = list(map(int,input().split()))

max = (10 ** 9) + 7

#入力配列の総和
line = 0
for i in range (n):
    line += a[i]

#a11, a22, ...対角線要素の総和
rem = 0
for i in range(n):
    rem += a[i]*a[i]

sum = ((line*line) - rem) // 2

ans = sum % max

print(ans)
```

私がAtCoderに投稿したときには、実行時間は115msでした。
サーバー管理の業務について

サーバー管理の業務は、大きく`「必要なときに対応する受動的な業務」`と`「自ら積極的に対応する能動的な業務」`に分けられる。

能動的な業務については、主に以下の７点である。

####1. ID・リソースの管理
####2. セキュリティアップデート
####3. トラブルシューティング
####4. ライセンス管理
####5. バックアップ
####6. ログ監視、性能監視
####7. ドキュメントの保守、維持
[javascript]関数の使い方

#関数とは
関数(function)とは繰り返し使われる処理を一つにまとめたものです。
関数を使うと、同じ処理を何度も書く必要がなくなります。

基本的な形は以下のような感じです。

```
function 関数名(引数){
  処理
  return 戻り値;
}
```

関数を効率的に利用するには、「引数」と「戻り値」を理解する必要があります。
入力する値を「引数（ひきすう）」、出力される値を「戻り値（もどりち）」といいます。

関数に引数を渡したいときは、( )内に引数を書きます。

この関数の結果を出力したいときは、return内に戻り値を渡します。
これで、関数の処理結果が呼び出し元から利用できるようになります。

```app.js
// メイン
// 4.変数「alertString」へ関数の処理を代入
var alertString;
alertString = addString("World");

// 5.作成した関数を呼び出す
alert(alertString);

// 関数を定義
// 1.関数名「addString」を記述し、引数として「strA」を定義
// 2.変数名「addStr」に、「Hello 」の文字列と、関数の引数「strA」に設定されている文字列を結合
// 3.「addStr」を、関数の戻り値とし,returnを記述することで、出力結果を表示
function addString(strA){
  var addStr = "Hello " + strA;
  return addStr;
}
```