OmniAICreator/Qiita-1.07M huggingface dataset:
【Java】MVCモデル基本

#MVCモデルとは
* ソフトウェア開発で画面を作る(Web UI/iOS/Androidなど)時に重要な考え方
* オブジェクト指向的プログラミングができた当初からある
* 良いソフトウェアコードの考え方
    * **高凝集性(High Cohesion)**：責任範囲が明確
    * **疎結合性(Low Coupling)**：お互いに依存していない

* 画面を作る時に適用して考え以下の状態を目指す
    * **画面作るための機能別に役割を分ける**(=結合度を下げる)
    * **分けた時に各モジュール（class,file）がある1つの目的を持って分割**されている

##画面表示の機能を分割する
* ３つの役割に分けて考え、役割が被らないよう綺麗にする
    * **Model** 
    * **View**
    * **Controller**
![spring2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282755/a28dccaa-1809-10a4-d756-ec8780065459.png)

##Model 
* **ロジックを担当する、つまりデータ元**
* Javaのclassが役割を担う
* ex：DBからデータの取得や計算など
*  データを供給する機能のみ持っていてこれ以外の目的を持っていないことが大事=**凝集性高い**

##View
* **受け取ったデータを画面に表示する責務をもつ**
* DBへのアクセスはしない。あくまでもらってきたデータをどう表示するかのみ
* Htmlが役割を担う

##Controller
* **ユーザからリクエスト受けてModelクラスに処理を依頼する機能**(Rest Controllerなど)
* **返答結果に応じてどのViewをユーザに表示するのか決定する**
* Javaのclassが役割を担う
* ex：/helloworlsのエンドポイント叩かれた→画面”hello world!”の画面を返す(図①④)
* コントローラの中でDBへのアクセスはせずモデルに頼む

###凝集性と結合度のバランスを考慮した設計が重要！
* これ以上Controllerや機能を無理やり分けると結合度が低くなるが、機能としては１つになっていないので凝集度が低くなる
* MVC、デザインパターンなどのテンプレートメソッドの役割でobjectを分けてあげる
* ありもののパターンを覚えることが重要
Railsチュートリアル 第11章 SendGridでの送信者ID未認証による、メールが送信できない事象と対応


##事象
Rails tutorialの「11.4 本番環境でのメール送信」において、herokuからユーザ登録のためのメール送信を実行してみたところ、「We're sorry, but something went wrong.」と表示された。

`heroku logs`でログを確認すると、以下のようなエラーログが表示されており、
メールの内容等の情報が出力されていたので、SendGridによる送信処理の部分にエラーがありそう。

```
Net::SMTPFatalError (550 The from address does not match a verified Sender Identity. Mail cannot be sent until this error is resolved. Visit https://sendgrid.com/docs/for-developers/sending-email/sender-identity/ to see the Sender Identity requirements)
```

##調査
現在チュートリアルの記載そのままで設定しているので、送信元として設定している「noreply@example.com」が認証されず、SendGridからメールが届かない？
ググってみるものの、Railsチュートリアルで同様の事象は見つけられなかった。

試しに`heroku run rails console`より以下コマンドを実行するが、上記と同じエラーが発生し、メールが届かなかった。

```
ActionMailer::Base.mail(from: "noreply@example.com", to: "<受信用メールアドレス>", subject: "subject", body: "body").deliver_now
```

ログに示されたURL等を見て色々調べてみたが、SendGridでの送信元の認証が必要であるよう。
https://sendgrid.com/docs/for-developers/sending-email/sender-identity/
https://sendgrid.com/docs/ui/sending-email/sender-verification/

ただ、「noreply@example.com」は自分で作成したドメインであるわけでもなく、このアドレスでの認証の仕方が不明なので、今回は個人用のアドレスを送信元に設定し、送信することとした。

##対応

個人で使用しているメールアドレスを送信用メールアドレスとして、SendGridで送信元として認証し、使用する。

以下の記事を参考に、SendGridへログインし、「Single Sender Verification」を設定。
https://sendgrid.kke.co.jp/docs/Tutorials/B_Marketing_Mail/marketing_campaigns1.html

認証後、以下のコマンドを実行すると、送信用メールアドレスから受信用メールアドレスにメールが届いた。

```
ActionMailer::Base.mail(from: "<送信用メールアドレス>", to: "<受信用メールアドレス>", subject: "subject", body: "body").deliver_now
```


そのため、メール送信部の処理は下記の通り変更し、テスト部の送信元も併せて変更したところ、heroku上で事象が解決し、メール送信が問題なく動作した。

```ruby:/sample_app/app/mailers/application_mailer.rb
class ApplicationMailer < ActionMailer::Base
  default from: "<送信用メールアドレス>"
  layout 'mailer'
end
```

##私見
実際のwebサービスでは、所有するメールアドレスやドメインを送信元として使用すると思われるため、所有しない「noreply@example.com」による送信は、解決を見送りました。

ただ、所有しないアドレスでの送信の可否等、まだまだ理解が追いついていないので、何か見つけた時は追記します。
https-portalコンテナのタイムゾーンをJSTに変更する

[https-portal](https://github.com/SteveLTN/https-portal)をDockerコンテナで運用していますが、タイムゾーンがUTCのままになっているコンテナがあることに気が付いてしまいました。
ログ見るときに困るのでJSTに変えたいと思います。

* https-portal

タイムゾーンはUTCになっています。

```
$ docker-compose exec https-portal sh
# date
Sun Oct 25 03:36:07 UTC 2020
```

docker-composeで設定してみます。

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

services:
  https-portal:
    container_name: https-portal
    image: steveltn/https-portal:1
    ports:
      - '80:80'
      - '443:443'
    restart: always
    environment:
      DOMAINS: 'example.net -> https://kusanagi01_httpd:8443 #production, example.com -> https://kusanagi02_httpd:8443 #local'
      ERROR_LOG: stderr
      ACCESS_LOG: stdout
      CLIENT_MAX_BODY_SIZE: 16M
      TZ: Asia/Tokyo                                                #追加
    networks:
      - shared-network

networks:
  shared-network:
    external: true
```

コンテナを作り直します。
JSTに変更されたことを確認できました。

```bash
$ docker-compose stop
Stopping https-portal ... done
$ docker-compose up -d
Recreating https-portal ... done
$ docker-compose ps
    Name       Command   State                    Ports                  
-------------------------------------------------------------------------
https-portal   /init     Up      0.0.0.0:443->443/tcp, 0.0.0.0:80->80/tcp

$ docker-compose exec https-portal sh
# date
Sun Oct 25 12:49:10 JST 2020
```
【GitHub Actions】workflow_runで呼び出し元のworkflowの結果を取得する

# 概要

GitHub Actionsのトリガーに`workflow_run`というものがあります。
workflow_runはあるworkflowが完了したり、呼び出されたら起動するイベントトリガーです。

# 問題点

workflow_runは呼び出し元の結果によって起動するかどうかを`on`のパラメータ中で指定できません。
なので、呼び出し元の結果がfailureでもcancelledでも起動します。

# 解決方法 (呼び出し元のworkflow結果の取得方法)

workflow_runの呼び元のworkflowの結果をジョブ内で取得します。
具体的な方法としては、${{ github.event.workflow_run.conclusion }}で取得します。conclusionが呼び元の結果です。

以下の例では呼び元のworkflow名をBuildとします。

```yaml
name: Workflow Run Trigger

on:
  workflow_run:
    workflows:
      - Build
    types:
      - completed

jobs:
  main:
    name: Main job
    runs-on: ubuntu-latest
    # 呼び元のworkflowの結果がsuccessであればmain jobを実行
    if: ${{ github.event.workflow_run.conclusion == 'success' }}
    steps: ...
```

# Use Case

スキップされるかもしれないジョブに依存しているジョブがあり、そのジョブは必ず実行したい場合に有効です。
例えば以下のように、ECSのデプロイでイメージビルドとサービスの更新のCDを分割させたいケースがあります。
ECSの1タスクで複数のイメージをビルド&プッシュケースでもneedsを多用せずにシンプルにworkflowを記述できるようになります。一つでもbuildに失敗すればデプロイは実行されませんし、あるイメージビルドがスキップしてもデプロイステージを実行できます。

![plantuml (11).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173064/208d2f2f-cce5-71a8-c59c-754a376013e6.png)

# 終わりに

needsで複雑になったworkflowやスキップジョブにも依存しているジョブがある場合はworkflow_runで分割して、それぞれでシンプルになるように工夫してみてはいかがでしょうか

# Reference

- https://docs.github.com/en/free-pro-team@latest/actions/reference/events-that-trigger-workflows#workflow_run
【Java】Thymeleaf基本 (SpringBoot)

#Thymeleafとは
* SpringBootで標準で使われるテンプレートエンジン
* テンプレートエンジンを使うことでWebアプリケーション(MPA)を作るのに必要な機能が追加される
* 例えばHTMLファイルの中に`[[]]`でJavaの変数名`[[${modelValue}]]`を書くことができる
* これで画面が表示される時に、HTMLファイルがテンプレートとなって、Placefolder(=置き換わる場所)をSpringフレームワークが書き換えてくれる
* テンプレートの機能を果たすものをThymeleafという
![timeleaf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282755/351b4dfc-4199-38af-d3f6-3a532f0f194b.png)

##使用方法
* build.gradleファイルのdependenciesにThymeleafが定義がされていることを確認

```Java
dependencies {
	compile('org.springframework.boot:spring-boot-starter-thymeleaf')
}
```



##テンプレートファイルの呼び出し
* デフォルト設定では`/resources/templates/【Controller の戻り値】.html `配下にテンプレートファイルを記述
* 以下の例はMain.javaで`HelloController`を呼び出し、クラスパス以下のテンプレートファイルが探索され`src/main/resources/templates/hello.html` がテンプレートファイルとして利用される。

```Java:main.java
package sample;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Main {

    public static void main(String[] args) {
        SpringApplication.run(Main.class, args);
    }
}
```

```Java:HelloController.java
package sample.thymeleaf.web;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HelloController {

    @GetMapping("/hello")
    public String hello(Model model) {
        model.addAttribute("message", "Hello Thymeleaf!!");
        return "hello";
    }
}
```
```html:hello.html
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8" />
        <title>Hello Thymeleaf</title>
    </head>
    <body>
        <h1 th:text="${message}"></h1>
    </body>
</html>
```
##テンプレートファイルでテキストを埋め込み
* `th:text=【出力する値】`そのタグのテキスト要素を出力
*  `<h1 th:text="'hello world'"></h1>`
* `<h1>[['hello world!!']]</h1>` で直接テンプレート上に値を出力することもできる

```java:HelloController.java
package sample.thymeleaf.web;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HelloController {

    @GetMapping("/hello")
    public String hello() {
        return "hello";
    }
}
```
```html:hello.html
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8" />
        <title>Hello Thymeleaf</title>
    </head>
    <body>
        <h1 th:text="'hello world'"></h1>
    </body>
</html>
```
ASP.NET Core モデルのプロパティをView(cshtml)で表示する

ASP.NET Coreのビューでモデルのプロパティを表示する方法です。

## モデルの作成

コンタクトフォームのモデルを作成します。`[DisplayName("お名前")]`は、モデルのプロパティに付与できるデータアノテーションです。指定の仕方によって、オプションの様に様々な機能や制約を付与することができます。

```C#:Contact.cs
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace asp_blog.Models
{
    public class Contact
    {
        [Required]
        [DisplayName("お名前")]
        public string ContactName { get; set; }

        [Required]
        [DisplayName("メールアドレス")]
        public string ContactEmail { get; set; }
        
        [DisplayName("件名")]
        public string ContactTitle { get; set; }

        [Required]
        [DisplayName("お問い合わせ内容")]
        public string ContactDetail { get; set; }
    }
}

```
##Viewの作成

`@model`に続けてモデルを指定することで、ビューの中で名前解決してモデルを呼び出し、データをバインドします。

```C#:Contacs.cshtml
@model asp_blog.Models.Contact

<table>
    <tr>
        <th>@Html.LabelFor(model => model.ContactName)</th>
        <td>@Html.TextBoxFor(model => model.ContactName)</td>
    </tr>
    <tr>
        <th>@Html.LabelFor(model => model.ContactEmail)</th>
        <td>@Html.TextBoxFor(model => model.ContactEmail)</td>
    </tr>
    <tr>
        <th>@Html.LabelFor(model => model.ContactTitle)</th>
        <td>@Html.TextBoxFor(model => model.ContactTitle)</td>
    </tr>
    <tr>
        <th>@Html.LabelFor(model => model.ContactDetail)</th>
        <td>@Html.TextBoxFor(model => model.ContactDetail)</td>
    </tr>
</table>

```
google.ukで検索

## 目的
googleの検索結果で海外サイトをメインで表示させたい時に使います。

## 手順
##### 1. アドレスバーにgoogle.co.ukを入力
![input.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427688/d689fcc4-2956-317d-8e57-1f79204bf4b8.png)

　<span style="color: #d61b09">※アメリカの場合はgoogle.com</span>
 
##### 2. 適当な単語を検索して、「検索設定」を選択
![setting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427688/061aa4c6-4fe8-8142-1ea7-47087ed57ed0.png)


##### 3. 地域の設定をイギリスに変更
![change.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427688/f4eaf3c1-0886-2a36-1950-459c9ef1adea.png)

##### 4. 検索言語を選択
![select.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427688/a77c1cbd-2515-b70a-810e-e9193f76fbfd.png)


##### 5. Englishに変更
![english.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427688/957ddcfd-429c-238f-dec0-179dfd3efa7d.png)


やったぜ。
rubyで簡単に基本型と参照型を感じる

## 背景
メソッドの中で引数を変更してもその変更はメソッド外に影響を及ぼさないと思っている人がいますが、違います。
そこで、メソッド外に影響を及ぼす場合と及ぼさない場合をそれぞれ書いてみます。

## 実行方法
macのターミナルでRubyを起動

```shell
   irb
```

##\#基本型 メソッドの引数の持つ値が変わらない場合
```ruby
a=1
def method_primitive(a)
   a=2
end
method_primitive a #2
a #1 #変わってない
```

##\#参照型 メソッドの引数の持つ値が変わる場合
```ruby
temp={}
temp[1]=1
def method_reference(temp)
	temp[1]=2
end
method_reference temp #2
temp[1] #2 #変わっている
```
GDriveをCLIで使う　- skicka -

## skickaとは
golangで作られたGDriveをコマンドラインで使うためのツール。
ちなみにGoogle製なのでご安心を。
※Gsuiteには対応していないようです

## 早速インストール手順！
最初にgoをインストールしてGOPATHを通しておく。
[これとか参考に](https://qiita.com/yosemite2307/items/08dce692894c92ae08ee)
[goenvも入れておきましょう](https://qiita.com/tomlaw/items/f37ea2ddb5d0d77b8eab
)

goの環境構築が終わったらskickaを入れましょう！

```sh
$ go get github.com/google/skicka
 ```
 
 結構時間かかるけど、インストールできます！
 （-vでバーバスモードにできるのでせっかちな方は見てね（私です））

```sh
# bash/zsh
$ export PATH=~/go/bin;$PATH
 
# fish
$ set -x PATH ~/go/bin $PATH
```

インストールできたら設定ファイルを初期化。

```sh
$ skicka init
```

適当なコマンドを打つとブラウザが立ち上がるので認証します。

```sh
# ↓これとか
$ skicka ls　
```

認証に成功したら設定おしまいです！


## 使い方（チートシート）
- `skicka df`　GDriveの使用状況を表示してくれる
![df.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427688/198c9de5-6b29-31ad-ea23-b92334529817.png)

---

- `skicka ls`　GDriveのディレクトリ一覧を表示してくれる
![ls.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427688/eee46946-4bf3-5347-c8ef-9ec2a7bd9b87.png)


---

- `skicka mkdir`　GDriveのディレクトリを作成してくれる
![mkdir.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427688/19496dfa-c2bc-fbb1-c3fe-7bc349deef11.png)


---

- `skicka upload` GDriveの指定したディレクトリにローカルの ファイルorフォルダ をコピーする
![upload.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427688/a2a6dafc-861a-243e-b8ad-5d80d7b7a4ab.png)


---

- `skicka cat` **これが神機能。**アップロードされているファイルの中身を見られる。

1. こういうのがよくあるけど...
![fishconig.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427688/6c3ae869-2a46-22ff-fa72-101a66678676.png)


2. ダウンロードせずともコマンドラインから見られるんじゃよ :older_man: 
![cat.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427688/5677ee81-bd81-3032-13f4-b34a6e3f6d7d.png)


- 他にもいろいろあるので試してね
![help.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427688/4e22a995-82c0-6749-c511-b86b3f6e732c.png)




##### 参考資料
https://dev.classmethod.jp/tool/skicka-google-drive-cli/
HTTP認証 概要

今更ながら、HTTPで用いられる認証方式の概要をまとめる。
## 一般的な HTTP 認証の流れ

1. サーバーは１回目のクライアントからのリクエストに対して、 `401` (Unauthorized) レスポンスを返却し、 `WWW-Authenticate` レスポンスヘッダーを含めて認証方式に関する情報を提供する。

2. クライアントは `Authorization` リクエストヘッダーに資格情報を含めることで、サーバーに自身の認証を要求する。

   ![http_authentication.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586535/147ab745-4162-1112-5995-fee34fc7c145.png)


## 用語

### WWW-Authenticate

* リソースへのアクセスに使用する認証メソッド(Basic,...)を指定する。
* このヘッダーを参照し、クライアントは資格情報の提供方法を認識する。

```http
WWW-Authenticate: <type> realm=<realm>
```

* `<type>`:認証方式名。`Basic`などが指定される。 
* `realm` :保護領域を説明する。これは、「本番アプリへのアクセスである」などをメッセージに設定することで、ユーザーが、どの領域にアクセスしようとしているかを通知する。

### Basic認証

* Base64 でエンコードした資格情報(IDとパスワード)を`Authorization:Basic `ヘッダーに付与する方式。
* 可逆エンコードのため、HTTPSでの送信必須。

### Bearer認証

* OAuth 2.0 で保護されたリソースにアクセスするためのベアラートークンを`Authorization: Bearer `で指定する方式。

### Digest認証

* IDとパスワードをMD5でハッシュ（ダイジェスト）化して送る方式

その他、Negotiate認証などいろいろある模様。


## 参考情報

* [HTTP 認証](https://developer.mozilla.org/ja/docs/Web/HTTP/Authentication)
CRA v4でセットアップしたプロジェクトで typescript のパスエイリアスを使う

先日 create-react-app 4.0.0 がリリースされました

このバージョンでは

- react-refresh が標準搭載
- react 17 のサポート
- typescript 4 のサポート

など他にもたくさんの update がされています．

# この記事の内容
[issue](https://github.com/facebook/create-react-app/issues/5634) にもあるように create-react-app でセットアップされたプロジェクトはパスエイリアスの設定をサポートしていないので 3系で作成したプロジェクトでは tsconfig.json とは別に tsconfig.paths.json などの別のファイルを用意し extends を使うことで問題を [回避](https://github.com/facebook/create-react-app/issues/5118#issuecomment-464025389) していました．


新しいバージョンで作成したプロジェクトではこの回避方法で起動しようとするとエラーが発生し起動できなくなっています．

この記事では別の回避方法で起動する手順を紹介したいと思います．


# エラーの原因

- [react-scripts start](https://github.com/facebook/create-react-app/blob/aeaf575d2793de665cdab944ce450c7b1cce56a9/packages/react-scripts/scripts/start.js#L31) 内で [verifyTypeScriptSetup](https://github.com/facebook/create-react-app/blob/aeaf575d2793de665cdab944ce450c7b1cce56a9/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js#L46)  を呼び出す．ここでは tsconfig を読み込んで期待する中身かどうかをチェック．そうでなければ設定値補正する
  - `paths` が設定された tsconfig は期待していないので [ここで](https://github.com/facebook/create-react-app/blob/aeaf575d2793de665cdab944ce450c7b1cce56a9/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js#L218) 中身を補正しようとする際にエラーが発生する
  - （readonly なプロパティに値を代入しようとしている動きなので bug っぽい...?）


# 方針
- 1. verifyTypeScriptSetup が呼ばれるタイミングでは react-scripts が期待している tsconfig の中身のまま実行させる
- 2. webpack の設定を構成する際に ForkTsCheckerWebpackPlugin が参照する tsconfig の中身をパスエイリアス設定済みのファイルを参照するように差し替える
  - そうしないと型チェック時のモジュール解決ができません

# 1. react-app-rewired のインストールと設定

```bash
$ yarn add -D react-app-rewired
```

また package.json の起動コマンドを適宜修正します

# 2. tsconfig.json の修正

create-react-app で生成された tsconfig.json を別の名前にリネームします．ここでは tsconfig-react-scripts.json としましたが別の名前でもOKです．
この tsconfig は react-scripts が期待している中身にしておきたいので何も手を加えないようにします．

```file:tsconfig-react-scripts.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
    .... 生成された tsconfig.json の中身のままにする
}
```

それとは別で tsconfig.json も用意します．これは tsconfig-react-scripts.json を extends しつつパスエイリアスを設定します．


```file:tsconfig.json
{
  "extends": "./tsconfig-react-scripts.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": ["src/*"]
    }
  }
}
```

# 3. config-overrides.js の修正

```js
const path = require('path');

module.exports = {
  webpack: function (config, env) {
    const forkTsCheckerWebpackPlugin = config.plugins.find(
      (plugin) => plugin.constructor.name == 'ForkTsCheckerWebpackPlugin'
    );

    if (forkTsCheckerWebpackPlugin) {
      // 方針2: ForkTsCheckerWebpackPlugin が参照する tsconfig の中身をパスエイリアス設定済みのファイルを参照するように差し替える
      forkTsCheckerWebpackPlugin.tsconfig = path.resolve('./tsconfig.json');
    }

    config.resolve.alias['~'] = path.resolve('./src');

    return config;
  },
  paths: (paths, env) => {
    const overridePaths = {
      ...paths,
      // 方針1: verifyTypeScriptSetup が参照する tsconfig のパスを差し替える
      appTsConfig: path.resolve('./tsconfig-react-scripts.json'),
    };

    return overridePaths;
  },
};
```

これで dev server が起動できるようになります．

jest を使う時にはもう一工夫必要なので今回の記事の内容を含めたサンプルのリポジトリを作成しました．参考にしていただければと思います．
https://github.com/Yama-Tomo/cra-v4-with-alias-import
intellijの日本語化設定 （mac）


https://mergedoc.osdn.jp/#pleiades.html#PLUGIN
から自分のOSに適したzipファイルをダウンロード

解凍し
controlを押しながらクリック（開発元不明でエラーが発生することを防ぐため）


![20052616-28-15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313771/f2cc4f67-9b23-7cd7-9268-949765654c19.png)

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3331333737312f36623234383637392d623732652d376539662d376133322d3261636162613935373439352e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313771/563c3dde-c37f-1ad0-cf9a-408843fbfbeb.png)

![20052616-24-38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313771/449fe0fb-9ce0-f5c7-7577-3c7a03c1e5d8.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/313771/4354c970-6ee6-f239-800f-eb4add0386dc.png)





SmaSurf クイック検索
【WIP】Java変数

記事を書いた目的：Javaの基本、変数について調べ知識を整理する。

#変数とは？

- データ値を格納するための入れ物です。（コンテナとも呼ばれます）
- Javaには、たとえば次のようなさまざまなタイプの変数があります。


- ***<font color="red">String</font>***："Hello "のようなテキストを格納する。文字列の値は二重引用符で囲まれている。
- ***<font color="red">int</font>***：123 や -123 のような小数を含まない整数 (整数) を格納する。
- ***<font color="red">float</font>***:19.99や-19.99のような小数を含む浮動小数点数を格納します。
- ***<font color="red">char</font>***：は 'a' や 'B' のような単一の文字を格納します。文字値は単一引用符で囲まれています。
- ***<font color="red">boolean</font>***：値を格納し、2つの状態: true または false を指定します。
PHP初心者もできる else句を使わない読みやすいコード ※追記

業務でネストの深いIF文を見ると、追うのが大変でうんざりすることがあります。
大体の場合、ちょっとした修正のために付け加えていって肥大化したパターンです。
これを予め防ぐ、簡単な工夫を一例として示します。

ちなみに、未経験でエンジニア求人に応募するときも、
実際にこのような記法を知っていれば、保守性について話せてポイントが高いと思います。

# 早期リターン＆ガード節
以下は与えられた値の型を判断するだけのコードです。

```php
$value = [1,2,3];

function judgeType($value) :string //タイプヒンティング；この関数がstringを返すことを明示
    {
        if (is_string($value)) {
            $result = $value . ' is string.';
        } else if (is_int($value)) {
            $result = $value . ' is integer.';
        } else {
            $result = $value . ' is neither string nor integer.';
        }
        return $result;
    }
    
echo judgeType($value); // Given value is neither string nor integer.
```
この程度の量なら読めなくはないですが、無駄があります。
これを下記のように書き換えることが出来ます、

```php

$value = [1,2,3];

function judgeType($value) :string //タイプヒンティング；この関数がstringを返すことを明示
    {
        if (is_string($value)) {
            return  $value . ' is string.';
        } 
        
        if (is_int($value)) {
            return $value . ' is integer.';
        } 
        
        return $value . ' is neither string nor integer.';
    }
    
echo judgeType($value); // Given value is neither string nor integer.
```

スッキリしましたね。
ポイントを整理すると

+ ```$result```というローカル変数が不要。
+ 各IF句に```return```があるので、条件に当てはまった場合関数は戻り値を返して終了する。
+ ```else```がなくても２つのIF句がスキップされ最終行の```return```が実行される。

このようにローカル変数を置かず即時に```return```を置くことを**早期リターン**と呼びます。
また、else句を使わず早期リターンする方法を**ガード節**といいます。

やっていることは単純なので、ぜひガード節を用いて保守性の高いコードを書くことを意識してみてください。

# 追記：2020年10月26日

コメントより、括弧を取る書き方もあるので追記します。

ただし、フレームワークやプロジェクトでPSR準拠させている場合は、
この書き方は避けたほうが良いとのことです。
確かに、メソッド書き足したりしにくそうですね。
他にも推奨されない理由があればぜひ教えていただきたいです。

>近頃のPHPのフレームワークはPSR準拠なんで
中括弧を省く構造文は勧めたくないですね。
https://qiita.com/hshimo/items/04be1f432240c58300f4

```php
function judgeType($value) :string //タイプヒンティング；この関数がstringを返すことを明示
  {
    if (is_string($value)) return $value . 'is string.';
    if (is_int($value)) return $value . 'is integer.';
    return $value . 'is neither string nor integer.';
  }
```
OwlgardenRPA - Install

## Owlgarden RPAインストール
- 以下よりトライアル版を申込み
    - [株式会社エクス](https://www.xeex.co.jp/products_services/owlgarden/rpa)
- ダウンロードしたインストーラを使ってインストール
![pic_01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340394/683d8808-635f-0bdf-b288-62ccdf007dd8.jpeg)

- 必要に応じて外部拡張機能を追加
![pic_02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340394/795cf7c6-86a2-3129-19d3-e205b7248db3.jpeg)

- インスト－ル後、シナリオエディタを起動
    - 但し、管理者として起動しなければうまく起動できないなど罠あり。
    - ウィンドウ自体は他社製品を参考にスッキリとまとめられている印象あり。
![pic_03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340394/3af54606-7366-13ca-a64d-4c26ed293953.jpeg)

## 簡単なシナリオ作成
1. Chromeを新しいウィンドウで起動
2. Google検索ページを表示
3. "月までの距離"と入力
4. 検索ボタン押下

![pic_02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340394/c44b226d-6bce-0bf1-88c1-9a5dc2b90a22.jpeg)

- 実行すると見事に失敗（笑）
    - テキスト入力時に現れた候補予測の上からクリックした模様
    - UiPathにあるクリックをエミュレートする機能はなさそう
    - クリックではなく、Enterキー押下で代用

![pic_03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/340394/c3cb5b01-cf9f-334c-d2e1-e992811358ef.jpeg)

## 直感的な所感

- Scratch風のGUIは慣れると使いやすそう＆楽しそう。
- 機能は絞られているため、複雑なことを実現するにはアルゴリズムの工夫が必要。
- アプリケーションのコマンド実行など、部分的には細かい設定ができる作りになっている。
- セキュリティソフトに邪魔をされたり、細かいトラブルがあったりなど改善の余地がある。
- 全体的に動作のもっさり感は否めない。
- が、遊んでみる価値は十分にある。
オリジン間リソース共有(Cross-Origin-Resource-Sharing、CORS) 概要

## オリジン間リソース共有(Cross-Origin-Resource-Sharing、CORS) とは

* あるオリジンで動作するウェブアプリに、異なるオリジンに存在するリソースへのアクセス権を与えるようブラウザに指示する仕組み。

  * オリジン
        * ウェブコンテンツにアクセスするために使われる URLのプロトコル、 ドメイン(ホスト)、 *ポート* によって定義される情報。
        * スキーム、ドメイン(ホスト)、ポートがすべて一致した場合、二つのオブジェクトは同一オリジンであると言える。
      * 例

      ```http
      http://example.com/app1/index.html
      http://example.com/app2/index.html
      ```

* オリジン間リクエスト例

  ![cors_image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586535/68d112c6-cd42-3c10-512d-18a08f7f854f.png)

  * `https://domain-a.com` で提供されているウェブアプリのフロントエンド JavaScript が`XMLHttpRequest` を使用して `https://domain-b.com/image-b.png` へリクエストを行う場合
    * セキュリティ上の理由から、ブラウザは、スクリプトによって実行されるオリジン間 HTTP リクエストを制限する。
    *  `XMLHttpRequest`や `Fetch`は同一オリジンポリシー(あるオリジンのリソースは、そのリソースから他のオリジンのリソースにアクセスできないように制限する)に従う。
    * 上述のAPI を使用するウェブアプリは、そのアプリと同一オリジンに対してのみリソースのリクエストを行うことができ、それ以外のオリジンの場合は正しい CORS ヘッダーを含んでいる必要がある。

## アクセス制御方法
### 単純リクエスト
* サーバー側でレスポンスヘッダー`Access-Control-Allow-Origin`にリクエスト元オリジンを指定して、レスポンスを返却する。
![CORS_simple_request.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586535/24f0f7bd-3a8a-77db-1ea2-7ebbe5fc61ab.png)


### プリフライトリクエスト
* `OPTIONS`メソッドを指定した HTTP リクエストを他ドメインのリソースに向けて送信し、実際のリクエストを送信しても問題ないかを確認する。
  * オリジン間のリクエストがユーザーデータに影響を与える可能性があるような場合に行う。
  * `Access-Control-Allow-Methods` ：リソースへのアクセス時に許可するメソッドを指定する。プリフライトリクエストのレスポンスで使用する。
  * `Access-Control-Allow-Headers` ：リクエストでどの HTTP ヘッダーを使用できるかを示すために、プリフライトリクエストのレスポンスで使用する。
  ![CORS_preflight_request.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586535/c1165cbd-2caf-2d6a-cdb9-5d9a894e1173.png)


### 資格情報付きリクエスト

* クッキー付きでリクエストする。

* サーバーはアクセスを許可する場合、`Access-Control-Allow-Credentials:true`を付与してレスポンスを返却する。
  * `Access-Control-Allow-Credentials` ：リクエストへのレスポンスを開示してよいか否かを示すヘッダー。プリフライトリクエストのレスポンスの一部として用いられたときは、実際のリクエストで資格情報を使用してよいかを示す。
![CORS_credential_request.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/586535/0b6af8d2-34c2-a797-046d-ef09ba608cde.png)


## 参考情報

* [オリジン間リソース共有 (CORS)](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS)
rebase完全に理解した

最近実務で初めてrebaseを使って「？？？？」となったので調べました。

以下の動画、記事が分かりやすかったです。
- [Git MERGE vs REBASE](https://www.youtube.com/watch?v=CRlGDDprdOQ)
- [マージとリベース](https://www.atlassian.com/ja/git/tutorials/merging-vs-rebasing)

## 具体例
今回は動画から引用してこのような場合を考えてみます。

1. m2まで作業が進んでいるmasterブランチからfeatureブランチへcheckout
2. featureブランチでf1をコミット
3. masterブランチにcheckoutしてm3をコミット
4. 再度featureブランチにcheckoutしてf2をコミット
![スクリーンショット 2020-10-25 10.58.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/575694/adb79854-97ec-a83f-0ac8-0f61e8c9719a.png)

## ここまでの各ブランチのlog

#### masterブランチのlog

```shell
m3
m2
m1
```

#### featureブランチのlog

```shell
f2
f1
m2
m1
```

## merge vs rebase
ここからfeatureブランチにて、masterブランチを`merge`, `rebase`するとそれぞれどうなるか見ていきます。

`git merge master`のlog

```shell
f2
m3
f1
m2
m1
```

`git rebase master`のlog

```shell
f2
f1
m3
m2
m1
```

`merge`では時系列に沿ってそのまま差分を統合しているのに対し、`rebase`ではfeatureブランチの先端がmasterで置き換えられています。
`rebase`を用いるとコミット履歴がすっきりしますね。

## rebaseのアンチパターン

[この記事](https://www.atlassian.com/ja/git/tutorials/merging-vs-rebasing)から引用します。

> リベースの特徴を理解できたら、次に最も重要なことは、実行してはいけないときを知ることです。git rebase の黄金律は、リベースを public ブランチでは決して使用しないことです。

masterブランチにて、自分の作業ブランチをrebaseしてしまうとmasterのコミット履歴が書き換えられてしまいます。
このように、他の人にも共有済みのブランチで`rebase`は使わないように注意しましょう。
Laravel8 Auth0のRoute/web.php

#Route/web.php
Laravelのバージョンが8になってRouteの書き方変わったので、Auth0のRouteの書き方も当然変わった。
公式には過去のバージョンの書き方しかないっぽいので下記の通り書けば動く。

```php

use App\Http\Controllers\Auth\Auth0IndexController;
use Auth0\Login\Auth0Controller;

Route::get( '/auth0/callback', [Auth0Controller::class, 'callback'])->name( 'auth0-callback' );
Route::get('/login', [Auth0IndexController::class, 'login'] )->name( 'login' );
Route::get('/logout', [Auth0IndexController::class, 'logout'] )->name( 'logout' );
```

にしてもLaravel8になってmoodelの場所も変わったし、Routeの書き方も変わったし回収大変かもね・・・。
vlc で wma ファイルを mp3 ファイルに一括変換するバッチファイル

音楽再生ソフトの VLC を使って wma ファイルを mp3 ファイルに一括変換するバッチファイル。
xxx.wma を ⇒ xxx.mp3 に変換する。
こんなん ぐぐればあるだろ、と思ったけど すぐに見つからなかったので作った。
せっかくなので置いとく。
曲名等の情報はひきつがれないので注意。

wma ファイルがあるフォルダに置いてダブルクリック。 管理者権限は要らない。
(Windows10, Window7 等)

```dosbatch:wma_mp3.bat
@echo off
color 1f
cd /d %~dp0
set VLC="C:\Program Files (x86)\VideoLAN\VLC\vlc.exe"
if not exist %VLC% set VLC="C:\Program Files\VideoLAN\VLC\vlc.exe"
if not exist %VLC% set VLC="C:\vlc\vlc.exe"
if not exist %VLC% (
  echo.
  echo.VLC.EXE がありません。
  echo.
  pause
  goto :eof
)

@rem エラー起きるときがあるのでダミー設定しとく。
set OUTFL=aa

echo.
echo.フォルダ内の wma ファイルを mp3 ファイルに変換します。
echo.
pause

@rem VLC が起動していると変換できないので強制的に終了させる
> nul 2>&1 taskkill /f /im vlc.exe

setlocal enabledelayedexpansion
for %%a in (*.wma) do (
  set INFL="%%a"
  set OUTFL=!INFL:~0,-5!.mp3"

  %VLC% --no-repeat --play-and-exit -I dummy -vvv !INFL! --sout #transcode{vcodec=none,acodec=mp3,ab=192,channels=2,samplerate=44100}:file{dst=!OUTFL!} vlc://quit
  if exist !OUTFL! (
    echo.!OUTFL!
  ) else (
    echo.失敗： !INFL!
  )
)

color 0f
pause
goto :eof
```

#### （無料 アプリ フリーウェア フリーソフト）
【PHP】クラスの private property・method に読み書き・実行する方法

# 概要
諸事情によりクラスのprivateなproperty、Methodを触る必要がありました。
その時のメモです。

# ReflectionClass
[ReflectionClass](https://www.php.net/manual/ja/class.reflectionclass.php)
ReflectionClass を使用することで指定されたクラスのことを調べることが可能です。

## サンプルコード
実際に ReflectionClass を使用してprivateなproperty、Methodに読み書き、使用してみる。

```php
<?php
class SampleClass
{
    /**
     * @var string プライベートプロパティ
     */
    private $text = 'text';

    /**
     * プライベート変数を出力
     */
    public function textOutput()
    {
        echo $this->text.PHP_EOL;
    }

    /**
     * !で囲う
     * @param @string $str 文字列
     * @return string
     */
    private function output(string $str):string
    {
        return "!{$str}!";
    }
    
    /**
     * num1とnum2を足す
     * @param int num1 足す数値
     * @param int num2 足す数値
     * @return int
     */
    private function sum(int $num1, int $num2):int
    {
        return $num1+$num2;
    }
}
 
$sample = new SampleClass();
$refrection = new ReflectionClass(get_class($sample));

// プライベートプロパティ text の内容を出力
echo 'Private Property Before--------------------'.PHP_EOL;
$sample->textOutput(); 

// ------プロパティの読み書き------
// 該当のプロパティを取得
$privateText = $refrection->getProperty('text');

// アクセス権限の取得
$privateText->setAccessible(true);

// 書き込み
$privateText->setValue($sample, "Change Text");

echo PHP_EOL.'Private Property After----------------------'.PHP_EOL;
// 読み込み
echo $privateText->getValue($sample).PHP_EOL;

// プライベートプロパティ text の内容を出力
$sample->textOutput();

echo PHP_EOL.'Private Method------------------------------'.PHP_EOL;

// ------メソッドの実行------
// 該当の関数を取得
$output = $refrection->getMethod('output');

// アクセス権限の取得
$output->setAccessible(true);
// 確認実行
echo $output->invoke($sample, 'Hello,World').PHP_EOL;

// 該当の関数を取得
$sum = $refrection->getMethod('sum');

// アクセス権限の取得
$sum->setAccessible(true);
// 確認実行 変数が複数の時
echo $sum->invoke($sample, 1, 2).PHP_EOL;
```

↓実行結果

```bash
Private Property Before--------------------
text

Private Property After----------------------
Change Text
Change Text

Private Method------------------------------
!Hello,World!
3
```


## 通常アクセスした場合

### private property
```
echo $sample->text;
```

↓実行結果

```bash
PHP Fatal error:  Uncaught Error: Cannot access private property SampleClass::$text
```

### private method
```
echo $sample->output('Hello,World');
```

↓実行結果

```
PHP Fatal error:  Uncaught Error: Call to private method SampleClass::output() from context
```

# 注意
本来 private になどにされて外部からアクセス出来ないようにされているのは何らかの理由があります。
これはそれを捻じ曲げて行う行為ですので注意してください。
本当にそこをいじるべきなのか、いじったらどんな影響があるかを考えてみてから使用したほうが良いです。

僕は本当にどうしようもなかったので使わざるを得なかったです。
3Dオブジェクトに行列を適用してX,Y,Z軸で回転させる - Three.js

`rotation`プロパティでの回転は、X,Y,Z軸について各1回しか回転させることができないので、複数回回転させる場合は、`Matrix`を使って回転させるのが楽。

<p class="codepen" data-height="530" data-theme-id="light" data-default-tab="result" data-user="kob58im" data-slug-hash="OJXWvee" style="height: 530px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="RotateByUsingApplyMatrix_ThreeJs">
  <span>See the Pen <a href="https://codepen.io/kob58im/pen/OJXWvee">
  RotateByUsingApplyMatrix_ThreeJs</a> by kob58im (<a href="https://codepen.io/kob58im">@kob58im</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# 【追加】箱を転がしてみる

R,G,B(赤,緑,青)がそれぞれX,Y,Z軸

<p class="codepen" data-height="450" data-theme-id="light" data-default-tab="result" data-user="kob58im" data-slug-hash="XWKpQje" style="height: 450px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="RollingBox-ThreeJs">
  <span>See the Pen <a href="https://codepen.io/kob58im/pen/XWKpQje">
  RollingBox-ThreeJs</a> by kob58im (<a href="https://codepen.io/kob58im">@kob58im</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

回転軸をずらしてみた。

## 解説

前提：
`geometry`（≒3Dオブジェクトの頂点の集合）に対する回転処理に関しては、`position`は影響しないようである。（`console.log(box.position.x)`で出力した値が変化しなかった。）
なので、`position`は無視して考えてよい。

X軸方向を回転軸として回転させているところの処理を図解してみる。

```js

function rotX(degX) {
  let signDegX = (degX<0)?1:0;
  let mat;
  mat = new THREE.Matrix4().makeTranslation( 0, boxSize/2, -boxSize*(1/2 + boardZpos - signDegX) );
  box.geometry.applyMatrix(mat);
  mat.makeRotationFromEuler(new THREE.Euler( Math.PI*degX/180, 0, 0, 'XYZ' ));
  box.geometry.applyMatrix(mat);
  mat = new THREE.Matrix4().makeTranslation( 0, -boxSize/2,  boxSize*(1/2 + boardZpos - signDegX) );
  box.geometry.applyMatrix(mat);
  redraw();
}
```


簡単のため、例として、`boxSize`=1，`degX`>0, `boardZpos`=2とした場合で考える。（下記）

```js

function rotX(degX) {
  let mat;

  mat = new THREE.Matrix4().makeTranslation( 0, 1/2, -(1/2 + 2) );
  box.geometry.applyMatrix(mat); // 回転軸にしたい頂点が原点にくるように平行移動

  mat.makeRotationFromEuler(new THREE.Euler( Math.PI*degX/180, 0, 0, 'XYZ' ));
  box.geometry.applyMatrix(mat); // X軸を回転軸としてで回転

  mat = new THREE.Matrix4().makeTranslation( 0, -1/2, (1/2 + 2) );
  box.geometry.applyMatrix(mat); // 元の位置に平行移動

  redraw();
}
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/438183/e781819b-dfb9-d886-bf58-4a8c9a9ab14b.png)

図の点線部分は地面。今回のプログラムでは、yの負方向に埋もれている分を`box.position.y = boxSize/2`でオフセットさせてy=0に来るようにしている。

# 参考サイト

 - [three.js - Three.js：オブジェクトの中心で回転します](https://python5.com/q/cswqmhha)

# すでに先駆者がおられました

 - [Three.jsで立方体を転がすサンプルを作ろう - Qiita](https://qiita.com/MasaoBlue/items/1ff943dde6ab5f53ef02)
oursとtheirsオプションを使ってコンフリ解消を便利にできる


# マージまで
他のブランチをマージしたいブランチにcheckoutし、それを最新にする。

```
git checkout 他のブランチをマージしたいブランチ
git pull
```

# コンフリ解消
　コンフリの発生。

```
git merge マージしたいブランチ
# コンフリする
CONFLICT (content): Merge conflict in コンフリが発生しているファイル名
```
　どちらのブランチを優先するか、またファイル単位ではどちらの内容を優先するかがわかっている場合にはいちいちエディタでコードを確認するよりも以下の方法を使った方がコンフリを速く解決できる。

## ブランチ単位でどちらの内容を優先すれば良いかが明白な場合
### 他のブランチをマージしたいブランチの内容を優先する場合
```
git merge -Xours
```
### マージしたいブランチの内容を優先する場合
```
git merge -Xtheirs
```
　以上でマージが完了する。

## ファイル単位でどちらの内容を優先すれば良いかが明白な場合
### 他のブランチをマージしたいブランチのファイルの内容を優先する場合
```
git checkout --ours ファイル名
git add ファイル名
```
### マージしたいブランチのファイルの内容を優先する場合
```
git checkout --theirs ファイル名
git add ファイル名
```

## 優先するブランチやファイルを間違えた場合
```
# マージを最初からやり直す
git merge --abort

# マージ自体を取り消す
git reset --hard ORIG_HEAD
```
[C言語]defineテーブル～複数の宣言、処理の一元管理～

#[C言語]defineテーブル～複数の宣言、処理の一元管理～

##概要
C言語のdefine定義を利用して複数の宣言、処理を一ヶ所で管理する方法です。

##構成
defineテーブルの宣言は、展開用define関数を複数定義する形で行います。複数行に定義する場合は行末に「\」が必要です。
defineテーブルの展開は、展開用define関数を宣言してからdefineテーブルを展開します。
1ファイル中で複数回展開することを考慮すると展開後にundefで展開用define関数を削除しておいた方が良いでしょう。
以下、enumの宣言と対応する名称文字列をdefineテーブルを利用して宣言するサンプルです。

```c
    //define tableを宣言する
    //名称(table,item)は任意の名称で構いません。
    //itemはdefine関数の呼び出しであり、展開したい内容を引数とします。
    #define table	\
    	item(a)		\
    	item(b)		\
    	item(c)		\
    
    //-------------------------
    //enumに展開する
    #define item(prm)	prm,	
    enum{
    	table
    };
    #undef item
    
    //-------------------------
    //enumの名称文字列に展開する
    #define item(prm)	#prm ,	
    char*enum_name[]={
    	table
    };
    #undef item
    
    #include<stdio.h>
    void main()
    {
    	printf("ENUM(%d):%s\n",a,enum_name[a]);
    	printf("ENUM(%d):%s\n",b,enum_name[b]);
    	printf("ENUM(%d):%s\n",c,enum_name[c]);
    }
```

tableの宣言のみでenumとその名称enum_nameの定義が行われています。
defineテーブルは関数内の処理にも展開可能なので、main関数は以下のように書き換えることもできます。

```c
    #define item(prm)	printf("ENUM(%d):%s\n",prm,enum_name[prm]);
    void main()
    {
    	table
    }
    #undef item
```

enum毎に名称を変更したい場合は以下のように展開用define関数の引数を増やし、展開時の宣言で利用する引数を変更することで個別の名称を利用することもできます。

```c
    #define table	\
    	item(a,"A")		\
```

##終わりに
C言語は定義間の関連付けをほぼ人力に頼っています。
しかし、定義を変更した際に関連する他の定義や処理を修正しなければいけないケースは多く、冗長な作業になることが多いと感じます。
このdefineテーブルを利用すると、一ヶ所で宣言の関連付けを行えるので、整合性の確保や修正作業の手間の削減に効果があると思います。
C言語でO/Rマッピングの様な事(構造体とSQL文の関連付け)をやりたい場合や、メンバ数の多い構造体でメンバ毎に処理が必要な場合などにも利用できます。

##※注意点
defineテーブルのコーディング方法はあまり一般的ではありません（というか人が使っているところを見たことがありません）。
会社や学校で利用する際には、利用して問題ないか確認を取ってからにしてください。
Mac PhpRedis PHP拡張をインストールする

# 目的

- PhpRedisのインストール方法とアンインストール方法をまとめる

# 実施環境

- ハードウェア環境

| 項目 | 情報 |
| --- | --- |
| OS | macOS Catalina(10.15.5) |
| ハードウェア | MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports) |
| プロセッサ | 2 GHz クアッドコアIntel Core i5 |
| メモリ | 32 GB 3733 MHz LPDDR4 |
| グラフィックス | Intel Iris Plus Graphics 1536 MB |

# 概要

1. インストール
1. アンインストール

# 詳細

1. インストール
    1. 下記コマンドを実行してインストールを実施する。
    
        ```terminal
        $ pecl install redis
        ```
    1. インストール中に下記を問われるが基本何も入力せずにEnterを押下する。
    
        ```terminal
        enable igbinary serializer support? [no] : 
        enable lzf compression support? [no] : 
        enable zstd compression support? [no] : 
        ```
    1. 下記の4行が表示されればインストールは完了しPhpRedis PHP拡張が有効になっている。
    
        ```terminal
        Build process completed successfully
        Installing '/usr/local/Cellar/php/7.4.11/pecl/20190902/redis.so'
        install ok: channel://pecl.php.net/redis-5.3.1
        Extension redis enabled in php.ini
        ```

1. アンインストール
    1. アンインストールしたいときは下記を実行する。
    
        ```terminal
        $ pecl uninstall redis
        ```
    1. 下記の二行が出力されればアンインストールは完了したことになる。
    
        ```terminal
        xtension redis disabled in php.ini
        uninstall ok: channel://pecl.php.net/redis-5.3.1
        ```
    1. 下記コマンドを実行してphp.iniファイルの場所を出力する。

        ```terminal
        $ php -r "echo phpinfo();" | grep "php.ini"
        ```
    1. 下記コマンドを実行してphp.iniファイルのバックアップを作成する。（下記コマンドは筆者の環境でのphp.iniファイルの場所を指しており、皆さんは先のコマンドで出力されたphp.iniのパスを指定してバックアップを作成していただきたい。）
    
        ```terminal
        cp /usr/local/etc/php/7.4/php.ini /usr/local/etc/php/7.4/php.ini_org
        ```
    1. 下記コマンドを実行してphp.iniファイルを開く。（下記コマンドは筆者の環境でのphp.iniファイルの場所を指しており、皆さんは先のコマンドで出力されたphp.iniのパスを指定してファイルを開いていただきたい。）

        ```terminal
        $ vi /usr/local/etc/php/7.4/php.ini
        ```
    1. ファイルに下記の記載があるはずなのでコメントアウト後に保存する。
        - 修正前

            ```/usr/local/etc/php/7.4/php.ini
            extension="redis.so"
            ```
        - 修正後

            ```/usr/local/etc/php/7.4/php.ini
            ;extension="redis.so"
            ```
[Flutter] 今はじめる人のためのDart 1編

## はじめに

こんにちは
FlutterはDartというプログラミング語を使っています。
今Flutterを始めて入門した人のためにDartの使い方を
書いたいと思います。

## 対象

- 初めてプログラミングという事をする方。
- Designer方
- Flutterを始めたい方

## IDE

- インストールIDE(Integrated Development Environment)は使いません。
- WEBベースのDartPadを使います。
- [DartPad](https://dartpad.dev/)はこちら

## Dart

- *A client-optimized language for fast apps on any platform*
- Goolgeでオープンソースで開発しています。
- https://dart.dev/
- https://github.com/dart-lang/sdk

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/0687d071-05f3-4714-7aea-aa231e70340c.png)

1. UI向けに最適化: ユーザーインターフェイスの作成ニーズに特化したプログラミング言語を使用して開発
2. 生産性:  繰り返し変更:  ホットリロードを使用すると、実行中のアプリケーションで結果をすぐに確認できます。
3. すべてのプラットフォームで高速:  モバイル、デスクトップ、およびバックエンド用のマシンコードをARMおよびx64にコンパイルします。 または、Web  用に  JavaScript  にコンパイルする

### DartPadは？

- DartPad is a free, open-source online editor to help developers learn about Dart and Flutter. You can access it at dartpad.dev. (DartPadは、開発者がDart and Flutterについて学ぶのに役立つ無料のオープンソースオンラインエディターです。 dartpad.dev からアクセスできます。)
- Goolgeでオープンソースで開発しているDartのWEBベースエディターです。
- https://github.com/dart-lang/dart-pad
- DartとFlutter両方試る事できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/137182/1c5aba55-6dc8-9fa3-b7db-c97faf6592ad.png)
画像アップロードでエラーメッセージの重要性を再認識した話

作成中のブログアプリで発生したエラーを解消した経緯です。画像をアップロードすると・・・ブログ記事と画像がデータベースに登録されてindex画面に移動するはずが、エラー表示。

```
Nil location provided. Can't build URI.
```
・・・というエラーメッセージが表示されます。早速原因究明です。

####エラーが出るまでにやったこと
・ImageMagickのインストール
・必要なgem(carrierwave と mini_magick）のインストール
・imageカラムの作成
・Uploaderファイルの作成と設定
・・・などの一連の作業をやっていましたが、特に問題点はなさそう。

####検証
①'Nil location provided. Can't build URI.'は、「locationが与えられていないからURIが作成できない」と言っているらしいが・・・いまいち意味が不明。

②Googleでこのメッセージを調べてみると、データの入っていないカラムがあるとこのメッセージが出てくるらしい。どうもこれが原因っぽい。

③rails consoleで 'Blog.all' でチェック。imageカラムを作成するより前にテストで投稿したブログ記事には画像を登録していない！

④imageカラムが空の記事を全て削除→症状変わらず

⑤新たに画像を登録したはずの記事について、再度コンソールで呼び出して確認。
![スクリーンショット 2020-10-22 21.45.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634245/cb97fb78-2705-f5d5-9303-b2f5fb4e057e.png)
タイトルと本文は登録できているが、画像が登録されていない。そのためエラーが発生している！ということのようです。

####コンソールのエラーメッセージ確認
登録自体はできているようなので、コンソールに出ている記述を確認してみました。そこに怪しい記述を発見。
![スクリーンショット 2020-10-22 21.20.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634245/2d33435b-1b43-4cef-bfe1-21f36a2e62f8.png)
image と image_cache が'Unpermitted parameters'と書かれていました。

permissionといえば・・・というのでcontrollerファイルを見直してみたところ、それらしき箇所がありました。strong parameterです。

```Ruby
def blog_params
  params.require(:blog).permit(:title, :content)
end
```
ここにimage と image_cache がない→パラメーターが許可されていない！ということのようです。

```Ruby
def blog_params
  params.require(:blog).permit(:title, :content, :image, :image_cache)
end
```
要素を追加して実行してみたところ、無事に画像のアップロードが成功しました。

エラーメッセージを丁寧に確認することがエラー解決への近道だということを身をもって経験したという話でした。
React入門#1 〜Reactの基礎知識〜

## はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ Reactの基礎知識について
→ Reactとは何か、Reactで何をするのか、Reactの特徴など

## Reactとは何か
Facebook社が開発したJavaScriptライブラリです。

## Reactで何をするのか
#### WebのUIを作る
UIには見た目（view）と、機能（Controller）の2つに分類されます。
コンポーネントは見た目と機能がセットになったもので、これを作るのがReactです。

※ 補足
フレームワークやSPAではありません
※ SPA（Single Page Application）の略で、Webページを移動せずコンテンツの切り替えを行うこと

## Reactの特徴

#### ・ Virtual DOM
Reactで管理をしているDOMです。通常のDOMはレンダリングで管理をしますが、Virtual DOMは通常のDOMとは別に管理をしますので、効率よくDOM操作を行うことができます。

```react
render(
  <div id='hoge'>fuga</div>
)
// renderというメソッドを使い、"hoge"のid属性を持つdiv要素を、fugaという中身で作る
```

#### ・ DOM（Document Object Model）
HTMLを解析し、解析したデータをツリー状に表現する仕組みです。解析されたデータを操作し、HTML構造・見た目・コンテンツなどを変更することができます。

```javascript
document.getElementById("hoge").innerText='fuga'

// "hoge"のid属性を持つ要素の中のテキストが'fuga'に変える
// これではブラウザのレンダリングに影響を与えるので、パフォーマンスが良くありません
```

#### ・ 差分描画
変更されたVirtual DOMの差分を再描画する
→ 変更のあった部分のみを書き換えるので、効率よくWebサイトの見た目を変えることができます。

![スクリーンショット 2020-12-19 10.33.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772631/1bc0e8b6-b756-fd22-19db-bf6fd247bc4f.png)

#### ・ JSX
JavaScript内でHTMLの様に記述できるので、HTMLを使っていた人にも馴染みやすい特徴があります。

```react
ReactDOM.render(
  <div className={hoge}/>
    <h1>Hello World!</h1>
  </div>
)
```

## 次の記事はこちら
[React入門#2 〜JSXについて〜](https://qiita.com/s79ns/items/da61ddd58e0ac0d2baf6)
QUERY関数でテーブルをjoinしたい

# 課題

下記の図のようなmembersテーブルとresults(何かのテストの点数のつもり)テーブルをjoinして、一番右のテーブルをつくりたい。
![g3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/64d49533-81a8-3dd3-f697-42e9dd638486.png)

SQLで書くなら

```sql
select results.日付, results.メンバーID, results.点数, members.社員名
from results join members on results.メンバーID = members.メンバーID
```

かと思うのですが、これをQuery関数で実現したい。

# これでどう？

H1セルに下記のように式を入れました。

![g4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/6f068d79-123f-cc77-30fa-dd5504a7f1ef.png)

```
=query(
  query(
    {D:F,arrayformula(vlookup(E:E,A:B,2,false))},
    "where Col1 is not null",
    1
  )
)
```

ワタシ的なポイントは `{ }` ← これをなんと呼ぶのだろうか。
なかなかググれなくて困った。「配列」でいいのかな。
見つけたオフィシャルのヘルプは [Google スプレッドシートで配列を使用する](https://support.google.com/docs/answer/6208276?hl=ja)

Query関数は

* Query(範囲,クエリ,[見出し]) の「範囲」の部分に「配列」を指定できる
* つまり **「結果として配列を返す関数」を「範囲」の中で使える**

という発想になかなか思い至らなかった。。。Googleすごい。

# 他にもネットを調べてみたらありました

そりゃそうですよね。joinしたくなりますよね。

* [【GAS】QUERY関数を使って複数の情報を横に結合する \- Qiita](https://qiita.com/ShishidoToru/items/daad2d5e305567b3c214)
* [Query関数を使ってデータを集計しよう – 其の弐 \| 🌴 officeの杜 🥥](https://officeforest.org/wp/2019/04/26/query%E9%96%A2%E6%95%B0%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E9%9B%86%E8%A8%88%E3%81%97%E3%82%88%E3%81%86-%E5%85%B6%E3%81%AE%E5%BC%90/)


# メンテナンスコストも考えると

私は業務としてQuery関数を多用しているのですが、そのスプレッドシートを複数の人が扱っていて、個々にメンテナンスが発生しうる状態なのであれば「一発で書ける関数」よりも「シンプルな関数の組合せ」というやり方のほうが実用的なこともあると思います。

例えば上の書き方を知って「おぉ！すげぇ！」と私は思うけど、将来の私および(私よりQuery関数に詳しくない)他人がみた時に「これわ、、、どういうことだ？」っていう **読解コスト** がかかると思うんです。

ですので、私は業務で使う時にはこうすることもあります。

![g6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/670d520c-0b31-f015-3191-1293668b4c2b.png)


**(A) H1セルには下記の記述**
D:Eをそのまま出力しているだけ。生データは生データとして残しておきたい(加工したくない)から。

```
=Query(D:F,"where D is not null",1)
```

**(B) K2セルに下記の記述**
(A)で出力したテーブルに対して、vlookupで「社員名」を抽出する列を追加する

```
=IFERROR(ARRAYFORMULA(VLOOKUP(I2:I,A2:B,2,false)),"")
```

これによって下記のメリットがあると思います。

* メンテナンスする関数が2つになっちゃうのだけれど、個々の関数はシンプルなので読解コストは低い。
* joinするテーブルが増えていく場合も「AとBをjoinした表Cを作って、Cに対してDをjoinして」というやりかたの方が「どこがおかしいか」の特定がしやすい。


未調査ですが、デメリットとして「データ量が増えた時に計算量(参照量？)が多くなって処理速度が遅くなる」かもしれません。
MathJaxを使ってWebページ上で数式をリアルタイムに表示しながら編集する

# やってみた

<p class="codepen" data-height="555" data-theme-id="light" data-default-tab="result" data-user="kob58im" data-slug-hash="wvWgOEZ" style="height: 555px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="DynamicEditMathText_UsingMathJax">
  <span>See the Pen <a href="https://codepen.io/kob58im/pen/wvWgOEZ">
  DynamicEditMathText_UsingMathJax</a> by kob58im (<a href="https://codepen.io/kob58im">@kob58im</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

1秒ごとに表示更新をしています。（入力テキストに変更がある場合のみ表示を更新。）

# 参考サイト

- http://docs.mathjax.org/en/latest/web/start.html
- http://docs.mathjax.org/en/latest/advanced/typeset.html?highlight=typeset#mathjax-in-dynamic-content
- http://docs.mathjax.org/en/latest/upgrading/v2.html
【絶対にやったらダメ】JavaScriptの勉強をしてたらバグった話


こんにちは。

未経験からエンジニア転職を目指している、現役体育教師のしろです。

今回は、JavaScriptの勉強をしていたときに起こった悲劇についての記事。

こちらをご覧ください。


![スクリーンショット 2020-10-25 9.38.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/812168/5d586a58-235b-8ed6-7aac-7c2adb8c608c.png)

お分かりでしょうか。笑

問題はここですね。


![スクリーンショット 2020-10-25 9.40.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/812168/766cd811-8f74-2feb-81c9-a3ca1325a1ac.png)

つまり、私は「0に対して2をかけ続けなさい！」というとんでもない指令を出していたのでした。

これをブラウザ上で出力したところ、しっかりとフリーズしました。

深く学ぶためにいろいろ値を変えて、出力してみたのがあだとなりました。笑

しかし、このことで「終わらない処理を出力してしまうとフリーズする」という学びを得ました。

みなさんも気をつけてくださいね。
ENTERを押す必要のないYes/No確認

# はじめに

スクリプト実行中にYes/No確認したくなる時がある。
なにかを削除するとか、注意が必要で無条件に実行したくない処理では、念のため確認したくなる。
でも、運用してると、「Y」「ENTER」とか「N」「ENTER」とか押すのが面倒になってくる。
「Y」「N」だけじゃダメなの? という気になる。
そして、「ENTER」を押さずにYes/No確認したい場合、こんな感じの関数を準備しておけば対応できる。

# コード例

```Python
import sys
import termios


def yesno():
    result = ''
    attribute = termios.tcgetattr(sys.stdin)
    temp = termios.tcgetattr(sys.stdin)
    temp[3] &= ~(termios.ICANON | termios.ECHO)
    termios.tcsetattr(sys.stdin, termios.TCSAFLUSH, temp)
    try:
        while True:
            char = sys.stdin.read(1)
            if char == 'y' or char == 'Y':
                result = 'Y'
                break
            elif char == 'n' or char == 'N':
                result = 'N'
                break
    except KeyboardInterrupt:
        result = '^C'
    termios.tcsetattr(sys.stdin, termios.TCSAFLUSH, attribute)
    return result


key = yesno()
# key: 'Y' or 'N' or '^C'
```

ここではPythonで書いたが、termiosを操作できる環境なら似たような記述ができるだろう。

# 補足

Pythonでtermiosを使うコード例で、 `fd = sys.stdin.fileno()` の記述があり、それ以降は `fd` を使ってるのを見かけることがある。
でも、 `sys.stdin` を使うのが好みだ。
ファイルディスクリプタが必要そうに見えるところに `sys.stdin` とか書いちゃうのは気持ち悪く感じるので嫌いだが、1行短くなるのは好きだ。

https://docs.python.org/3/library/termios.html
> All functions in this module take a file descriptor fd as their first argument. This can be an integer file descriptor, such as returned by sys.stdin.fileno(), or a file object, such as sys.stdin itself.

https://docs.python.org/ja/3/library/termios.html
> このモジュールの関数は全て、ファイル記述子 fd を最初の引数としてとります。この値は、 sys.stdin.fileno() が返すような整数のファイル記述子でも、 sys.stdin 自体のような file object でもかまいません。
alertメソッド、confirmメソッド、promptメソッドの違い

#はじめに
タイトルに記述した３つのメソッドは全て``window``オブジェクトのメソッド。
３つのメソッドの挙動が似ているためそれぞれの違いをまとめます。

## alertメソッド
> Window.alert() メソッドは、オプションの指定されたコンテンツと OK ボタンを持つ警告ダイアログを表示します。

```
<script>
  window.alert('アプリ連携が完了しました。');
</script>
```

実行結果
![alert.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700117/f3627016-c9ff-f684-1841-ed68fa6d914c.png)

## confirmメソッド

>Window.confirm() メソッドは、メッセージと、OK, キャンセルの 2 つのボタンを持つモーダルダイアログを表示します。

※モーダルダイアログ・・・閉じるまで親ウィンドウの操作ができなくなるダイアログのこと<br>（[「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典](https://wa3.i-3-i.info/word11433.html)）

```
<script>
  window.confirm('ゲームスタート！準備はいい？');
</script>
```

実行結果
![confirm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700117/ee313a25-cbbf-0ac0-9439-3bc54399d3ff.png)

・「OK」をクリックした場合は``true``、「キャンセル」をクリックした場合は``false``が返ってくる。


## promptメソッド

>ユーザにテキストを入力することを促すメッセージを持つダイアログを表示します。

```
<script>
  window.prompt('星座を入力してください。');
</script>
```

実行結果
![prompt.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700117/4152d363-c630-c9f2-af0a-850c32333d37.png)

第２引数を指定することで初期値を指定することも可能。

```
<script>
  window.prompt('星座を入力してください。', '蟹座');
</script>
```


実行結果
![prompt 初期値あり.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700117/f8997c8e-7d89-c872-11e6-98d0016dfbed.png)

・「OK」をクリックした場合のみ入力されたテキストが戻り値として返ってくる。(キャンセルの場合は何も返ってこない)<br>・空の状態で「OK」をクリックした場合はnillが戻り値となる。


##まとめ
alertメソッド → テキスト+OKボタン
confirmメソッド → テキスト+OKボタン+キャンセルボタン
promptメソッド → 　テキスト+テキスト入力ボックス+OKボタン+キャンセルボタン
### 参考記事
https://developer.mozilla.org/ja/docs/Web/API/Window/alert
https://developer.mozilla.org/ja/docs/Web/API/Window/confirm
https://developer.mozilla.org/ja/docs/Web/API/Window/prompt
GoogleColabでライブラリのバージョン確認・アップグレード・ダウングレード等

- google colabとローカルにおけるライブラリのバージョンの差異で悩まされることが多々ある。その際よく使用するものをまとめておく。

## ライブラリのバージョン確認
```python
print(tensorflow.__version__)
```
## 特定のバージョンをインストール
```python
!pip install tensorflow==1.2
```
## 最新バージョンにアップグレード
```python
!pip install --upgrade tensorflow
```

## 学習済みモデルにおいて使用されたライブラリのバージョン確認
```python
import h5py

with h5py.File("model.h5", "r") as fp:
    print(fp.attrs.get("keras_version"))
```