OmniAICreator/Qiita-1.07M huggingface dataset:
初心者によるプログラミング学習ログ 156日目

# 100日チャレンジの156日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

156日目は、

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>156日目<br><br>progateのjavascript講座改変アウトプット<br>寝落ちしてもーた。。。<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> <a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a> <a href="https://twitter.com/hashtag/javascript?src=hash&amp;ref_src=twsrc%5Etfw">#javascript</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1193263766076448773?ref_src=twsrc%5Etfw">November 9, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

# 学習したことの一部

```practice.js

//メソッド:インスタンスの動作のようなもの
class Book {
    constructor(title, subtitle, number) {
      this.title = title;
      this.number = number;
      this.subtitle = subtitle;
    }
    
    // booktitle()メソッド追加
    booktitle() {
      console.log("プログラミング本");
    }

    // titlename()メソッド追加
  　titlename() {

      //booktitle()メソッド呼び出し
      this.booktitle();

    　console.log(`題名は${this.title}です`);
    　console.log(`サブタイトルは${this.subtitle}です`);
    　console.log(`巻数は${this.number}巻です`);
   }
  }
  
  const book = new Book("javascript", "初心者向け", 1);
  
  console.log(`タイトル: ${book.title}`);
  console.log(`サブタイトル: ${book.subtitle}`);
  console.log(`ナンバー: ${book.number}`);
  
  
  // bookに対してbooktitleメソッド呼び出し
  //book.booktitle();

// Bookクラスの継承: Novel
class Novel extends Book {
    //getNovelbook()メソッド追加
    getNovelbook() {
        return this.title + this.subtitle;
    }

}
   const novel = new Novel('ruby', '中級者向け', 4);

novel.titlename();

  // title()メソッド呼び出し
  book.titlename();
  
//定数novelsを定義:定数novelに対してgetNovelbookメソッド呼び出し
 const novels = novel.getNovelbook();
 
console.log(`本のタイトルは、${novels}です`);


//pushメソッド:配列の最後に新しい要素を追加
const names = ["サトウ", "スズキ", "タナカ", "イケダ"];

console.log(names);

// pushメソッドを使用し、配列に文字列を追加
names.push("フジタ");

console.log(names);

//forEachメソッド:配列の中の要素を1つずつ取り出し、全ての要素に繰り返し処理
const names1 = ["sato","suzuki","tanaka"];
names1.forEach((name1) => {
  console.log(name1);
});


```

以前に投稿したものに追加。
#AWS の ElasticBeanStalk とはそもそも何なのか？Webアプリの実行と管理ができると AWS マネージメントコンソールは言った。

マネージメントコンソールに1行のコメントが表示される。そうか、総合環境の構築だと思っていたけれど、Webアプリ限定の環境なのだろうか。



![image](https://user-images.githubusercontent.com/13635059/68536153-8f725f00-0391-11ea-9b7a-275319aafb61.png)
![image](https://user-images.githubusercontent.com/13635059/68536154-90a38c00-0391-11ea-9638-5fecfb9e8f09.png)

# 説明ページでさえ

いろいろと書かれていて、結局なにができるのかよくわからないよな。


![image](https://user-images.githubusercontent.com/13635059/68536171-cc3e5600-0391-11ea-9790-394f7c401bc1.png)

あーよく見るとウェブアプリケーションって明記されてた。

![image](https://user-images.githubusercontent.com/13635059/68536178-eed06f00-0391-11ea-8282-1e416a4ecc93.png)


# 結論

サービス概要がよく分からなかったら AWS マネージメントコンソールの1行説明を読めば良いかもしれない、というごく限定的なハック。

だれか1行まとめの一覧を作ってほしい。




# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2694








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
dbpediaの研究 その31


#概要

dbpediaが難解なので、手出してみる。
vbsで、取得してみた。

#環境

windows7 64bit

#サンプルコード


```
Dim http
Dim url
Dim data
Set http = CreateObject("WinHttp.WinHttpRequest.5.1")
url = "http://ja.dbpedia.org/sparql"
data = "query=SELECT+DISTINCT+*+WHERE+%7B+dbpedia-ja%3A%E3%83%87%E3%83%BB%E3%83%88%E3%83%9E%E3%82%BD+dbpedia-owl%3Aabstract+%3Fabstract+.%7D"
With http
	.Open "POST", url, False
	.SetRequestHeader "Content-Type", "application/x-www-form-urlencoded"
	.SetRequestHeader "Content-length", "132"
	.Send data
	msgbox .ResponseText
End With

```

以上。
Node.js (3)ウェブサーバー連携

<h1>ウェブサーバー作る</h1>
先ずはhttp要求とport設定を書き込む、そして、node.jsのウェブサーバー機能を組み立てる。

```app.js
var http = require('http'); 
http.createServer(function (request,response){
   //requestとresponseにつてデータ転送文ここに書く
          .
          .
          .
}).listen(8080)

```
テータ転送の基本の概念はブラウザからウェブサーバーにrequest請求を届く、request請求の中身はパケットですから、いろいろな転送データをここに入れる、反対の方向はresponse請求と言われる、response請求はウェブサーバーからブラウザにデータパケットを届いてブラウザの上にデータを表示する。

<img width="849" alt="螢幕快照 2019-11-10 10.17.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475097/782916d4-9869-2667-5173-0b272b36f968.png">

次はrequestとreponse文を試す、先ずはrequestの情報を表示して、node.jsサーバーはreponseの内容をブラウザで示す。

```app.js
var http = require('http');
http.createServer(function (request,response){
    console.log(request.url);  //urlの情報
    //writeHead関数の引数は一つ目はHTTP状態番号、二つ目は転送データ条件のオブジェクト
    response.writeHead(200,{"Content-Type":"text/plain"});//200:ok data-type:plain
    response.write('hello!!');  //表示する文字
    response.end();//請求終わる
   
}).listen(8080);

```
urlはホームページ、favicon.icoはブラウザiconの情報。

```terminal:terminal
$node app.js
/
/favicon.ico
```
<img width="836" alt="螢幕快照 2019-11-10 10.58.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475097/9d1ab84d-8188-7d4e-2ede-e4dcf19ee3a3.png">

他の例も試す。

```app.js
var http = require('http');
http.createServer(function (request,response){
    console.log(request.method);  //HTTPのメソッド
    //writeHead関数の引数は一つ目はHTTP状態番号、二つ目は転送データ条件のオブジェクト
    response.writeHead(200,{"Content-Type":"html"}); //200:ok data-type:html
    response.write('<h2>apple!!</h2>');
    response.end();//請求終わる
   
}).listen(8080);

```

```terminal:terminal
$node app.js
GET
GET
```
<img width="836" alt="螢幕快照 2019-11-10 14.33.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/475097/6de76069-5cba-59ea-55fc-f3ed4158984c.png">
#AWS ElasticBeanStalk で SCP 接続して サーバーのファイルをローカルにコピーする

```
eb ssh
```

```
eb ssh <env-name>
```


```
INFO: Attempting to open port 22.
INFO: SSH port 22 open.
INFO: Running ssh -i /Users/yumainaura/.ssh/pup.pem ec2-user@ZZZ.ZZZ.ZZZ.ZZZ
Last login: Sat Nov  9 22:57:33 2019 from XXX.XXX.XXX.XXX
 _____ _           _   _      ____                       _        _ _
| ____| | __ _ ___| |_(_) ___| __ )  ___  __ _ _ __  ___| |_ __ _| | | __
|  _| | |/ _` / __| __| |/ __|  _ \ / _ \/ _` | '_ \/ __| __/ _` | | |/ /
| |___| | (_| \__ \ |_| | (__| |_) |  __/ (_| | | | \__ \ || (_| | |   <
|_____|_|\__,_|___/\__|_|\___|____/ \___|\__,_|_| |_|___/\__\__,_|_|_|\_\
                                       Amazon Linux AMI

This EC2 instance is managed by AWS Elastic Beanstalk. Changes made via SSH
WILL BE LOST if the instance is replaced by auto-scaling. For more information
on customizing your Elastic Beanstalk environment, see our documentation here:
http://docs.aws.amazon.com/elasticbeanstalk/latest/dg/customize-containers-ec2.html
[ec2-user@ip-YYY-YYY-YYY-YYY ~]$ pwd
/home/ec2-user
```


これで ssh 接続コマンドがわかるので、scp用にコマンドを加工して使う。


```
scp -i /Users/yumainaura/.ssh/pup.pem ec2-user@ZZZ.ZZZ.ZZZ.ZZZ /home/ec2-user:/path/to/file ./
```

# Original by Github issue

https://github.com/YumaInaura/YumaInaura/issues/2693








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
dbpediaの研究 その30

#概要

dbpediaが難解なので、手出してみる。
c,c++で、取得してみた。

#サンプルコード


```
#include <arpa/inet.h>
#include <assert.h>
#include <errno.h>
#include <netinet/in.h>
#include <signal.h>
#include <stdlib.h>
#include <stdio.h>
#include <string.h>
#include <sys/types.h>
#include <sys/socket.h>
#include <sys/wait.h>
#include <netdb.h>
#include <unistd.h>

#define SA          struct sockaddr
#define MAXLINE     4096
#define MAXSUB      300
#define LISTENQ     1024
extern int h_errno;
ssize_t process_http(int sockfd, char *host, char *page, char *poststr) {
	char sendline[MAXLINE + 1], recvline[MAXLINE + 1];
	ssize_t n;
	snprintf(sendline, MAXSUB, "POST %s HTTP/1.0\r\n" "Host: %s\r\n" "Content-type: application/x-www-form-urlencoded\r\n" "Content-length: %d\r\n\r\n" "%s", page, host, strlen(poststr), poststr);
	write(sockfd, sendline, strlen(sendline));
	while ((n = read(sockfd, recvline, MAXLINE)) > 0) 
	{
		recvline[n] = '\0';
		printf("%s", recvline);
	}
	return n;
}
int main(void) {
	int sockfd;
	struct sockaddr_in servaddr;
	char **pptr;
	char *hname = "ja.dbpedia.org";
	char *page = "/sparql";
	char *poststr = "query=SELECT+DISTINCT+*+WHERE+%7B+dbpedia-ja%3A%E3%83%87%E3%83%BB%E3%83%88%E3%83%9E%E3%82%BD+dbpedia-owl%3Aabstract+%3Fabstract+.%7D";
	char str[50];
	struct hostent *hptr;
	if ((hptr = gethostbyname(hname)) == NULL) 
	{
		fprintf(stderr, " gethostbyname error for host: %s: %s", hname, hstrerror(h_errno));
		exit(1);
	}
	printf("hostname: %s\n", hptr->h_name);
	if (hptr->h_addrtype == AF_INET && (pptr = hptr->h_addr_list) != NULL)
	{
		printf("address: %s\n", inet_ntop(hptr->h_addrtype, *pptr, str, sizeof(str)));
	}
	else 
	{
		fprintf(stderr, "Error call inet_ntop \n");
	}
	sockfd = socket(AF_INET, SOCK_STREAM, 0);
	bzero(&servaddr, sizeof(servaddr));
	servaddr.sin_family = AF_INET;
	servaddr.sin_port = htons(80);
	inet_pton(AF_INET, str, &servaddr.sin_addr);
	connect(sockfd, (SA *) & servaddr, sizeof(servaddr));
	process_http(sockfd, hname, page, poststr);
	close(sockfd);
	exit(0);
}

```

#成果物

https://paiza.io/projects/AOpAtukbwavu25FBzpR8Gg
https://paiza.io/projects/GlN5CwW_GoTSR4oTvmnwKA

以上。
すぐ分かる Nullish Coalescing と短絡評価の違い

# TL;DR

- JavaScript には `null`, `undefined` の他にもいくつか falsy な値がある
- `||` で短絡評価させる場合、 falsy な値なら何でも `[falsyな値] || [default]` で結果が `[default]` になる
- Nullish Coalescing の `??` を使う場合、 `null ?? [default]`, `undefined ?? [default]` においてのみ、結果が `[default]` になる

# falsy な値

JavaScript には、Boolean コンテキストでは false と評価されるような値がいくつかあります。`false`は当然そうですが、他にも**`null, undefined, 0, NaN, ""`**などがあります。

https://developer.mozilla.org/ja/docs/Glossary/Falsy

短絡評価はこの性質を利用したものです。

```js
null || "Hello World!"       // "Hello World!"
undefined || "Hello World!"  // "Hello World!"
false || "Hello World!"      // "Hello World!"
0 || "Hello World!"          // "Hello World!"
NaN || "Hello World!"        // "Hello World!"
"" || "Hello World!"         // "Hello World!"
```

これを利用して、「変数 `hoge` に、もし正しく値が入っていなかったら、デフォルトで `fuga` を使う」というような意図で `hoge || fuga` というコーディングをすることがありました（どれほど一般的なのかはよく分かりませんが、私は記憶にあります）。  
しかし、`null`, `undefined` ならともかく、数字の `0` や空文字の `""` を「正しく値が入っていない」とみなすのは、状況によっては不適切です。

# Nullish Coalescing

TypeScript 3.7 では Optional Chaining のような素晴らしいシンタックスが入りましたが、その他にも、**Nullish Coalescing** というものが入りました。Nullish Coalescing は、いわば、短絡評価を null と undefined に制限したものです。

```js
null ?? "Hello World!"       // "Hello World!"
undefined ?? "Hello World!"  // "Hello World!"
false ?? "Hello World!"      // false
0 ?? "Hello World!"          // 0
NaN ?? "Hello World!"        // NaN
"" ?? "Hello World!"         // ""
```

こちらの方がより意図に適っている場合が多いと思います。

# Reference

- [tc39/proposal-nullish-coalescing: Nullish coalescing proposal x ?? y](https://github.com/tc39/proposal-nullish-coalescing)
- [Announcing TypeScript 3.7](https://devblogs.microsoft.com/typescript/announcing-typescript-3-7/)
- [ES proposal: Nullish coalescing for JavaScript](https://2ality.com/2019/08/nullish-coalescing.html)
ShellScript 関数を定義する

# 目的

- ShellScriptで関数を定義する方法と関数をよび出す方法をまとめる。

# 書き方の例

- 関数は定義を先に行わないと呼び出して使用することができない。
- スタンダードな関数の定義方法を下記に記載する。

    ```bash
    #!/bin/bash

    function 関数の名前 () {
        関数としてまとめたい処理
    }
    ```

- 関数の呼出方法下記に記載する。

    ```bash
    #!/bin/bash

    関数の名前
    ```

# より具体的な例その1

- 「Hello World」を出力為る関数を作成する。
- 関数名を`echoHelloWorld`とする。
- 下記に関数の定義方法と呼出方法を記載する。

    ```bash
    #!/bin/bash

    #関数の定義
    function echoHelloWorld () {
        echo "Hello World"
    }

    #関数の呼出
    echoHelloWorld

    >Hello World
    ```

# より具体的な例その2

- 「Hello 関数の第1引数 関数の第2引数」を出力する関数を作成する。
- 関数名を`echoHelloInput`とする。
- 下記に関数の定義方法と呼出方法を記載する。

    ```bash
    #!/bin/bash

    #関数の定義
    function echoHelloInput () {
    echo "Hello $1 $2"
    }

    #関数の呼出
    echoHelloInput miri miriwo

    >Hello miri miriwo
    ```
tensorflow2.0 + VScodeでintellisenseが働かない問題

##概要
tensorflow2.0 + VScodeでコード補完が機能せず、その解決に手こずったという話。
[ここ](https://github.com/tensorflow/tensorflow/issues/32982)で報告されており、一応の解決法もあったので試したら上手くいきました。


開発環境
windows10
VScode==1.40.0
tensorflow==2.0.0

##詳細
1.　tensorflowのインストールディレクトリ(ほとんどの場合site-packages/)にtensorflowとtensorflow_coreがあるのでtensorflowを適当にrenameし、('tensorflow → tensorflow_back'など)tensorflow_coreをtensorflowにrenameする。
2. tensorflow/\_\_init\_\_.py(元はtensorflow_core/\_\_init\_\_.py)に以下を追記。

```
from .python.keras.api._v2 import keras
from tensorflow_estimator.python.estimator.api._v2 import estimator
```
これだけです。
ただ、2のimport文の追記はなくても問題なかったとの書き込みもあったので確認していませんがrenameだけでもいいのかもしれません。

またライブラリ自体に変更を加えない方法もあったので紹介しておきます。
1. tensorflow_coreへのシンボリックリンクをtensorflowという名前で作成する。
2. VScodeの設定で作成したリンクがあるディレクトリのパスを以下のように指定する。

```
"python.autoComplete.extraPaths": [
        "/path/to/dir"
    ],
```

ライブラリ自体をいじるのはなるべく避けたほうがいいと思ったので最初はこの方法を試してみましたが、自分の環境ではうまくいかなかったので仕方なくrenameする方法をとりました。
Macでパッケージ版Node.jsのアンインストール


# 概要

Mac OS Mojaveでパッケージ版Node.jsを。

# 環境

* Mac OS Mojave 10.14.6
* Node.js v4.5.0 (どんだけ古いねん!)

# 状況
1. 色々なサイトで書かれている下記ではNo such file or directoryエラー 

    ```
lsbom -f -l -s -pf /var/db/receipts/org.nodejs.node.pkg.bom \
| while read i; do
sudo rm /usr/local/${i}
done
```

# 手順

  ```
npm uninstall -g npm
sudo rm -rf /usr/local/lib/node_modules
sudo rm -rf ls /usr/local/include/node
sudo rm /usr/local/bin/node
sudo rm /usr/local/share/man/man1/node.1 
sudo rm /usr/local/lib/dtrace/node.d 
sudo rm -rf /usr/local/share/doc/node/
sudo rm /usr/local/share/systemtap/tapset/node.stp 
```

#参考
https://stackoverflow.com/questions/9044788/how-do-i-uninstall-nodejs-installed-from-pkg-mac-os-x?noredirect=1&lq=1
imgタグで画像が読み取れなかったときになにも表示しないようにしたい

`<img>`タグを使って画像を表示したときに、読み込めないとこんな感じになる。

```html
<img src="https://example.com/noimage.png" alt="プロフィール" />
```

![スクリーンショット 2019-11-10 9.20.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/4febffe9-ff83-0f72-9a60-c1e159f1a078.png)

読み込めない場合に、こんな感じで、なにも表示しないようにしたかったときの備忘録。

![スクリーンショット 2019-11-10 9.25.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/6b308bea-be92-c356-a8f2-14ffb4f03988.png)

### やり方はこんな感じ。

```html
<img
  src="https://example.com/noimage.png"
  alt
  onerror="this.onerror = null; this.src='';"
/>
```

ポイントは以下の2点

1. `alt`を空文字で設定
2. `onerror`で**srcを空にして**、**onerrorをnullにする**

##### 1. 「`alt`を空文字で設定」について

画像が表示されなかった場合に、代わりにalt属性のテキストが表示してくれる
このalt属性がなかった場合、読み取り不可の画像が表示されてしまう。

![スクリーンショット 2019-11-10 9.33.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/6022bae1-1d80-bd08-a97a-9fd659e34787.png)

なので、alt属性に空文字を指定しておくことで、
「**画像が表示されなかった場合に、代わりに空文字を表示する**」ようにしている。

##### 2. 「`onerror`で**srcを空にして**」について

`onerror`属性を設定しておくと、画像の読み取りに失敗した場合に、
何らかの処理をすることができる。

[この記事](https://qiita.com/yuji38kwmt/items/ff3e6faf19760366a787#%E8%80%83%E5%AF%9F)によると、srcとaltがともに空文字だと、読み取り不可の画像が表示されないよう。
> Firefox, Chrome, IEで、バツ印を非表示にするには、以下のいずれかの状態にする必要があります。
> ・src属性が空文字 AND alt属性があり/空文字
> ・src属性がなし

なので、onerrorを使って、画像が読み取れなかったときに`src`を空にしている。

##### 3. 「**onerrorをnullにする**」について

また、srcを空文字にすると依然として、画像が読み取れない状態が続くため、
`onerror`が繰り返し呼び出されるため、`onerror`が無限に呼ばれ続けることになる。

そのため、srcを空にするのとあわせ、`onerror`を初期化して呼ばれないようにしている。

# おわりに

とりあえず、目的は達成できたので、良い感じ。

ただ、

- srcが空なのでエラーのまま
- altが空文字

など、よくなさそうなところがあるので、

- エラー画像に差し替えたり、
- JavaScriptで`<img>`自体を表示しないようにする

などのほうがお行儀の良いHTMLになりそう。

## こんなのつくってます!!

積読用の読書管理アプリ 『積読ハウマッチ』をリリースしました！
[積読ハウマッチ](https://tsundoku.site)は、Nuxt.js+Firebaseで開発してます!

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/572d4947-f40b-e4dc-1c9c-bc584cd2a66c.png" width="200"/>

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント([@MemoryLoverz](https://twitter.com/MemoryLoverz))や開発者([@kira_puka](https://twitter.com/kira_puka))まで♪

# 参考にしたサイト
- [imgタグでエラー時の画像をonerror属性で設定する方法 - Qiita](https://qiita.com/yamaguchi_takashi/items/7019e2e8074bf094333c)
- [img要素の「画像がないことを表すマーク」の表示/非表示 - Qiita](https://qiita.com/yuji38kwmt/items/ff3e6faf19760366a787)
- [JavaScript - HTMLの画像読み込み時にonerrorを使用した際の無限ループを回避したい。｜teratail](https://teratail.com/questions/15682)
【RPA】2種類の適用業務 - 「効率化できた業務」「人手では無理だった業務」

RPAは様々な業種の様々な業務に適用されているが、業種/業務の内容にかかわらず、RPAの事例をいろいろと聞いていると、適用した業務の種類には大きく2種類の性格があることがわかる。それは「**効率化できた業務**」「**人手では無理だった業務**」である。RPAを導入中のユーザーは、効果をどう測ろうか悩んでいる場合もあるだろう。その際に、適用しようとしている業務がどちらの性格のものかを考えて、それに応じたKPIを設定してみるとよい。

# "効率化できた業務"
おそらく読者の皆様が想像する多くの事例はこちらになるかもしれない。いわゆる、「●●時間かかっていた業務を削減できた」「●●人分の仕事を削減できた」というやつである。今までの仕事がどれくらいの人数と時間で行われていたかを測り、RPA適用前、適用後で比べてみることになる。

ただし、RPA適用のための業務整理の段階で、必要ない仕事だとわかってやらなくなるなどRPAツールの直接的な効果ではないもの (変革プロジェクト全体としては成果だが)や、いったん削減した後は継続的にどのように効果を出しているように見せるのか、などの課題をクリアする方法を考える必要がある。

**適用業務例:**

* 全部門の請求書の処理
* 全社員の給与計算
* 入金情報から回収予定表の作成、入金消込等の自動化
* 経費精算における領収書との照合作業
* 交通費精算における運賃と行先との照合
* 人事システムから従業員への通知メール送信
* 過重労働の従業員を上長および本人にメール通知
* 部品の安全性検査
* 顧客からのメールに添付されている見積もり依頼をAIで自動判定して見積書を作成
* 取引先への申請、発注業務。各メーカーサイトへの登録作業自動化。
* 電子納品後の証拠書類の提出
* 減価償却仕訳入力
* 資産情報から会計システムへの入力。SAPやAS400などの基幹システムの操作。
* 税務署へ提出する償却資産税申告書データの作成
* ITシステムの管理、ログの出力と報告/通知
* センサーなどのデバイスデータの自動集計 (IoT)。
* 商品在庫補充の発注業務
* 各社内システムから情報収集し、経営向けレポート作成
* POSデータの自動収集と分析システムへの自動登録
* ソフトウェアのテスト業務


### 「年間2万時間の業務時間の削減」は大きいか小さいか
[最近の日経コンピュータの特集](https://tech.nikkeibp.co.jp/atcl/nxt/column/18/01042/102400006/)によると調査した90社のRPA導入企業のうち8割は年5万時間未満の削減、約半分の40社程度は年2万時間未満の削減にとどまったようだ。ここで**年間2万時間**の意味について考えてみよう。2万時間というと大きな数のように思えるかもしれないが、これは何人分なのかということを考えてみると、1人当たりの年間営業日は240日程度、1日8時間労働とすると1,920時間、つまり約2千時間が1人分ということになる。そうすると、**2万時間は10人分**ということになる。

この年間10人という数字が大きいのかどうか、会社によって違うだろうが、調査対象になっているのがほぼ従業員1,000人以上の大企業であるので、**全体からすると1%未満のインパクト**ということになる。果たしてそれが経営者にとってうれしいのかどうか、現状のRPAの導入方法だと限界があるだろう。しかも、有期雇用でない限り日本企業は簡単に従業員を解雇できない。削減案と同時にどの仕事に再配置するのか、教育をどうするのかなどを考える必要がある。

# "人手では無理だった業務"

もう1つのパターンは、RPA導入により「できることが広がった業務」「人手では無理だった業務」である。季節変動など突発的なもの、人による作業では動機づけが難しい、人による作業だと時間がかかりすぎるもの、人的ミスを抑えたいもの、など、人間の従業員の特性上の限界によりいままで不可能だったことがRPAにより新たな価値が生まれたものである。この場合は、この「新たな価値」を定量化して時間やお金と比較をすることで可視化することになるだろう。RPA導入の際は、このパターンの業務への適用も同時に検討できるとよいだろう。

また、「RPAに業務を任せたことで、毎日の細かい作業から解放され、心が救われた」という意見も意外と多いようだ。従業員の働き方改革にもつながり、プライスレスな部分かもしれない。これは例えば昔は飛脚で走って届けていた荷物をいまはトラックで運ぶといったように、人間がやる仕事ではないことから人間を解放することになり、人間がより高付加価値な業務に集中するためには不可欠な過程であろう。

**適用業務例:**

* 外部サービスで利用していないアカウントの全数チェックと削除
* 特定キーワードに関するニュースの検索エンジン上での定期監視とレポートの頻度を毎日に
* 監査や性能チェックのために収集されたデータをサンプリング調査から全数調査へ
* コールセンターにおけるオペレーターと上司の間のリアルタイムな情報仲介
* ディープラーニングに提供するデータの収集業務 (より広範囲から収集) 

# まとめ
RPA導入にあたっては、「効率化できた業務」「人手では無理だった業務」のどちらの種類の業務であるかを考え適切なKPIを設定しよう。
Node-REDのfunctionノードでjsライブラリをrequireする方法（備忘録）

# 概要
　Node-REDのfunctionノードで、jsライブラリ(node-module)を読み込んで使いたい場面が出てきました。

functionノードで直接”**require**”できないので苦戦し、なんとか利用できたので備忘録として残します。

# 方法
##1. ターミナルを開き利用したいライブラリをnpmでインストール
このとき、Node-REDのシステムファイルがある「**.node-red**」にインストールします。
　

```
cd ~./.node-red
npm install　インストールしたいライブラリ名
```

例えば、fs-extraを読み込みたい場合は次のコマンドです。

```
npm install fs-extra
```

##2. settings.jsを編集
settings.jsは次の場所にあります。（windowsの場合）

```
C:\Users\ユーザ名\.node-red\settings.js
```

例）fs-extraを読み込む場合

```javascript:settings.js
 functionGlobalContext: {
        fs:require('fs-extra'), // <--追記   
        // os:require('os'),
        // jfive:require("johnny-five"),
        // j5board:require("johnny-five").Board({repl:false})
    },
```

##3. functionノードに読み込み
functionノードの記述例

```javascript:functionノード
var fs = new global.get(`fs`);
return msg;

```
デモができる無料のラボサイト

# デモができる無料のラボサイト

自分のための備忘録。
随時アップデートしていきます。

| サイト名 | URL | 概要 |
| :-- | :-- |:--|
| katacoda | https://www.katacoda.com/ | Docker, Kubernetes, Openshift, Jenkins, Ansible, GitHub,など |
| RedHat Openshift | https://learn.openshift.com/ | Openshiftの操作、アプリデプロイなど |
| RedHat Openshift | https://www.openshift.com/trial/ | クラウド上のOpenshift操作 |
| RedHat Openshift 4 playground| https://www.openshift.com/learn/courses/playground/ | Openshift4のデモ |
| VMware | https://secure.vmware.com/jphol | vShpere, vRO, vSAN, NSX, Horizonなど|
| Explore Red Hat Enterprise Linux 8 | http://lab.redhat.com/ | Red Hat Linux 8 操作|
| IBM Demos | https://www.ibm.com/demos/ | IBMの様々な製品で無料で使用できる。IBMidを作成する必要あり |
| Kubernetes | https://kubernetes.io/ja/docs/tutorials/kubernetes-basics/create-cluster/cluster-interactive/ | Kubernetesのコマンド操作 |
|  IBM Cloud Pak for Multicloud Management | https://www.ibm.com/demos/collection/Cloud-Pak-for-Multicloud-Management/?lc=en | IBMのマルチクラウド管理製品。画面下のHands on Labsから可能 |
| QWIK Lab | https://run.qwiklabs.com/?qlcampaign=intro-labs-sm | AWSとGoogle Cloudのラボサイト |
Bigqueryで、時系列データを操作する

忘れがちなので、メモしとこ。
Bigqueryで、時系列データを操作する方法
前提：
　日足のデータで処理してます。
　データは、こちらでダウンロードしました。
　https://jp.investing.com/indices/japan-225-futures-historical-data
　先に、エクセルとかで日付のフォーマット変換してます。）

LAG (close, 1) OVER (ORDER BY date)　は、1日前（1行上）の終値
LEAD (close, 1) OVER (ORDER BY date)　は、１日後（1行下）の終値
AVG (close) OVER ( ORDER BY RN RANGE BETWEEN 19 PRECEDING AND CURRENT ROW) as SMA20 #単純移動平均２０本


陰線が３本続いたら、翌日は陰線か陽線か確認するなら、こうかな？
if(close - open < 0 
      and LAG (close, 1) OVER (ORDER BY date) - LAG (open, 1) OVER (ORDER BY date) < 0 
      and LAG (close, 2) OVER (ORDER BY date) - LAG (open, 2) OVER (ORDER BY date) < 0 
   , LEAD (close, 1) OVER (ORDER BY date) - LEAD (open, 1) OVER (ORDER BY date)
   , 0) as Simulation #今日、昨日、一昨日が陰線なら、明日の値動きはどうなる？ 

間違ってたら、突っ込み歓迎

[実行結果のリンク](https://docs.google.com/spreadsheets/d/1NqiuttT4rPqnktoWN-dzHtUOXN_aPyTidaGvCYa2muM/edit?usp=sharing)

ＳＱＬは以下

```sql
#ソート＋行番号付与
with T1 as (
select 
 date
 , open
 , close
 , high
 , low
from ???
order by date
)
, T2 as (
select 
 ROW_NUMBER() OVER () as RN
 , date
 , open
 , close
 , high
 , low
from T1
order by RN
)

select 
 RN
 , date
 , high
 , low
 , open
 , close
 , LAG (close, 0) OVER (ORDER BY date) as Today_close_LAG #今日の終値(LAG)
 , LAG (close, 1) OVER (ORDER BY date) as Yesterday_close_LAG #前日の終値(LAG)
 , LEAD (close, 0) OVER (ORDER BY date) as Today_close_LEAD #今日の終値(LEAD)
 , LEAD (close, 1) OVER (ORDER BY date) as Tomorrow_close_LEAD #明日の終値(LEAD)
 , AVG (close) OVER ( ORDER BY RN RANGE BETWEEN 19 PRECEDING AND CURRENT ROW) as SMA20 #単純移動平均２０本
 , close - open as neugoki_0#今日の値動き（Close - Open）
 , LAG (close, 1) OVER (ORDER BY date) - LAG (open, 1) OVER (ORDER BY date) as neugoki_m1 #昨日の値動き
 , LAG (close, 2) OVER (ORDER BY date) - LAG (open, 2) OVER (ORDER BY date) as neugoki_m2 #一昨日の値動き
 , LEAD (close, 1) OVER (ORDER BY date) - LEAD (open, 1) OVER (ORDER BY date) as neugoki_p1 #明日の値動き
 , if(close - open < 0 
      and LAG (close, 1) OVER (ORDER BY date) - LAG (open, 1) OVER (ORDER BY date) < 0 
      and LAG (close, 2) OVER (ORDER BY date) - LAG (open, 2) OVER (ORDER BY date) < 0 
   , LEAD (close, 1) OVER (ORDER BY date) - LEAD (open, 1) OVER (ORDER BY date)
   , 0) as Simulation #今日、昨日、一昨日が陰線なら、明日の値動きはどうなる？ 
from T2
order by RN
```
sWebMachineGun.exe のHTTPセッションのタイムアウトチェック

# sWebMachineGun.exeの動作モード(タイムアウトチェック)

今さら(2019年)、HTTP セッションのタイムアウトなんか気にすることはないんだけど、一応実装した。

## リクエストの例

以下のリクエストを例とする。

### リクエストタブで、送信メッセージを準備する

画面は、「Request」タブで、送信するリクエストのテンプレートを準備する

1発目は、「/login.cgi」へ送るリクエスト

![sessionTimeout01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182822/3d756d88-af89-a43c-edf5-8d4edab0c352.png)

2発目は、「/home.cgi」へ送るリクエスト

![sessionTimeout02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182822/f8d7290f-b938-4513-4179-f800190b28c1.png)

この「1→2」「/login.cgi→/home.cgi」を "セッション" と呼ぶことにする。

つまり、「/login.cgi」で認証情報渡してログイン。次の「/home.cgi」のリクエストを遅延させてHTTPセッションがタイムアウトしたかどうかを確認する。

ということ。

つまり、上図では判定対象は「1」なので「/home.cgi」のレスポンスの変化でHTTPセッションがタイムアウトしたかどうかを評価する。

### タイムアウトチェックのモードにする

![sessionTimeout03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182822/66b0379e-1732-b8e2-c146-03ad1ad02adf.png)

タイムアウトチェックのモードにするには、こんな感じ
指定するのは、最小値(分)と最大値(分)
上図では4分から120分の間で調べるという事になる

### タイムアウトチェックの判定方法を設定する

他のモードと異なり、専用のタブを用意した

![sessionTimeout04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182822/38a1e87c-c5aa-3c71-7f4e-398f66f4dcbd.png)

こちらの図はタイムアウトしたかどうかを判定する方法を決める画面(TimeoutCheckタブ)。
単純な文字列比較や、正規表現、スクリプトによる判定、方法は3つある。

## 実行

後は「Execute」ボタンを押すだけ

1. インターバル無しで、アクセスして、タイムアウトしていないレスポンスを取得
2. 最小値のインターバル(例では「/home.cgi」に4分スリープして)でアクセス。
3. 倍にしてアクセス。
4. タイムアウトしていなければ、3に戻る
5. タイムアウトしていれば、これを最大値、直前の値を最小値にして、その中間値のインターバルでアクセス。

というのを繰り返して、1分単位まで絞り込む。

## 注意事項

判定結果が出るまで、時間がかかるので、(診断用のテストアカウントとは別に)タイムアウトチェック用の専用のアカウントを用意してもらった方がいいだろうね。

# sWebMachineGun.exe Index

[sWebMachineGun.exe の動作モード](https://qiita.com/tomoki0sanaki/items/ecb697ad856d433a32fa)

[sWebMachineGun.exe のメインメニューに戻る](https://qiita.com/tomoki0sanaki/items/e2b7767551a576b1dbd3)
現場で使えるRubyonRails5　速習実践ガイド　７−８−２　Sidekiq::Logging がuninitializedというエラーが出る時



https://github.com/mperham/sidekiq/wiki/Logging

より
>The old Sidekiq::Logging class was removed in Sidekiq 6.0. You should not be accessing any Sidekiq internal classes to use the logger. Use logger directly in your Worker or use Sidekiq.logger elsewhere.

ということでSidekiq::logging.loggerではなくSidekiq.loggerで書いたらエラーがなくなりました。
form_with あんたはすごい。 ❏Rails❏

#form_withさん
フォーム作成の際に非常に便利なことで知られるform_withさん
使い方を簡単にまとめます。

---
```new.html.erb
<%= form_with model: @user do |form| %> 
  <%= form.text_field :name %>
  <%= form.submit %>
<% end %>
```
①コントローラーで作成したインスタンスをform_withの後ろにセットします。
→model: @user

②好きなフォームを中に入れ込みます。カラムもセット。
→<%= form.text_field :name %>

③送信すると、あとはform_withさんが勝手にやってくれます。postとかpatchとか書かなくてOK。有能。
→新インスタンスならcreateアクションへ
→既存インスタンスならupdateアクションへ
<br>
<br>
フォームはたくさん種類があるので、気になった方はこちらへ。
> https://www.pikawaka.com/rails/form_with
可能と不可能の間

よく、「技術的には可能」とか「現実的に不可能」とか、修飾語付きで「可能」「不可能」ということもあるかと思います。今回は、いろんな「可能」「不可能」を分類してみました。

## 理論的に不可能

[チューリングマシンの停止問題](https://ja.wikipedia.org/wiki/%E5%81%9C%E6%AD%A2%E6%80%A7%E5%95%8F%E9%A1%8C)が有名な例ですが、ある種の問題については、どれだけリソースを使おうとも**実現できないことが証明されています**。

逆を返せば、そういったタスクでないものについては、リソースを用意すれば少なくとも解決できる可能性はある、ということになります。

## 物理的に不可能

こなすべきタスクが計算にとどまらない場合、当然ながら適切な入出力を行う機構が必要となります。「iPhone本体だけでA4の紙に必要事項を出力する」というのは、物理的に不可能です。

## 計算量的に不可能

理論的には解決方法があっても、それを実現するためのリソースが確保できない、ということも考えられます。たとえば、128ビットの暗号を総当たり攻撃するとした場合、1秒間に1兆通り試せたとしても500京年かかる計算となり、太陽の寿命のほうがずっと先に来てしまいます[^1]。このように、現代のコンピューターで使われる暗号は総当たり攻撃に対する対策を、「現実的に試せるレベルを遥かに上回る組み合わせにする」という**計算量的安全性**によっています。

[^1]: もちろん、運良く当たりを引ければもっと早く解決するかもしれませんが、その確率は調べた数に比例するので、人間が実行可能な尺度で当てることは、全く見込めません。

## 所定の枠内では不可能

### 企業の方針で不可能

App Storeで公開するアプリには、細かな[基準](https://developer.apple.com/jp/app-store/review/guidelines/)が設けられていて、この基準に引っかかるアプリはリジェクトされ、一般公開ができません。また、APIによっては使い方にルールがある場合もあって、ルールに抵触するような使い方はできません。

### セキュリティ的に不可能

App Storeの審査にもそのような側面がありますが、ブラウザ内などユーザーサイドで実行させる機能については、セキュリティ上可能なことに制約がかかっている場合が多いです。インターネット上のWebページから、ユーザーのディスクの任意のファイルを検索するようなことは、（ブラウザのセキュリティホールがないなら）不可能です。

### プログラミング言語の記法としては不可能

多くのプログラミング言語はチューリング完全なので、機能的にはやりたいことを実現できるはずです。ただ、それをすんなり書けるのかどうかという問題はあります。

たとえば、C言語で「指定された名前の変数にアクセスする」というような実装は、（マクロで豪快に組めばもしかしたらそれっぽいことはできるかもしれませんが）基本的に不可能です。

## 技術的には可能だけど

さて、特定のことが実装可能とわかったとしても、それを実用できるかはまた別問題です。

### 法的・民事的な問題

他人の作ったコードを使うにはライセンスに従う必要がありますが、使いたい利用形態とライセンスが齟齬をきたした場合、当該のソフトウェアを使うことはできません。また、スクレイピングなどは最悪の場合業務妨害という犯罪になる危険もありますし、利用規約で禁止されているところに行えば損害賠償の対象ともなりえます。

### リソースの問題

アメリカ政府が総力を上げたプロジェクトに動員できる、ハードウェア的・人的資源と、個人開発のそれでは、もちろん遥かに違ってきます。個人開発では自分の寿命以上に作成時間がかかって完結不能、ということも考えられます。

また、企業が何かしらの開発に取り組む場合、企業は営利目的の事業体なので、当然ながら何らかのメリット[^3]を見込むこととなります。見込まれるメリットと開発コストが見合わなければ、プロジェクトは中止となることも考えられます。

### 実用性はあるのか

状況によっては、いちおう動かすことはできるものの、安定性・再現性がないために実用プログラムに組み込めないことも考えられます。逆に、すでに確立したライブラリがある分野では、同等のものを自分で書いても（学習目的としてはともかく）実用品まで持っていくのは労力の無駄遣いになってしまうケースもあります。

[^3]: 直接的にそのプロダクトから収益を得るだけではなく、「社員のスキル開発」「省力化・コスト削減」「宣伝・求人に役立てる」「社会貢献」などのような要素も考えられます。
サイト制作は根性？

文字数は何文字で、記事数はいくらで、記事のジャンルは・・・。ECサイトから一般のHPまでよく言われることだ。サイト制作現場ではとにかくクオリティ重視の時代になっている。500文字しかないページはゴミかスパム扱い。英語になっているとさらにスパム判定の色が濃くなる。それもGoogleの意向でしかない。500文字で良いのはECサイトぐらいだ。許されているのは、そのジャンルでのオーソリティを認められたものだけ。<a href="https://kegawa-kaitori.net/" >毛皮コートランキング比較買取</a>
一般のHP製作者では500字で良くはない。2000字でも少ないというくらいだ。しかし文字数で足し算のSEOができる時代は終わった。

<a href="https://ja.wikipedia.org/wiki/HyperText_Markup_Language?wprov=srpw1_0" >HTMLのWIKI</a>によれば、1990年代から使われていたことで2020年になってもまだ使われている。これは拡張し続けているので、時代が変わっても残りそうだ。

SEOの専門文献とはなにか？Googleが公開した内容だけではふじゅうぶん。

ではこれからは？クオリティはほかに費やすしかない。ページ数を50から500にするような努力だ。それも自動で作ったものが認められるのはECサイトだけであり、その他のHPでは自動化されたものはスパム扱い。ここに超えられない壁がある。ECサイトなら許されることは、一般のサイトでは許されない。
[Swift5]初心者向け画像のみでラジオボタン作成[ライブラリ無し]

# はじめに
- アプリにラジオボタンが必要になった時ライブラリでの実装を検討したことがある方いらっしゃると思います。
- 今回ライブラリ無し、画像のみで実装するラジオボタンを自作いたしましたので紹介いたいと思います。
- 少しコードを変えるだけで複数選択も可能です。
誰かの選択肢の一つになればと思います。

# このようなものを作ります
<img width="274" alt="スクリーンショット 2019-11-10 06.04.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487744/9d423f18-f74f-56a4-6239-e9583cb8fbc7.png">

# 1.準備
- ■四角い画像
- ✔︎チェック画像

これらを無料素材サイトなどからダウンロードしておきます。

# 2.StoryBoardに並べる
画像をStoryboard上に並べます。
### 例）
<img width="260" alt="スクリーンショット 2019-11-10 06.20.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487744/26fd1e03-5763-9ce8-1b35-8155b116823b.png">

- ■四角画像はUIButtonとして配置します
- ✔︎チェック画像はUIImageとして配置します
- ✔︎チェック画像にtagを１〜４を設定しておきます

# 3.チェックの初期化

ViewDidLoad内などに以下を記述してチェックボタンの初期表示を設定します

- 例）falseのみチェックボタン表示

```swift
        self.view.viewWithTag(1)?.isHidden = false
        self.view.viewWithTag(2)?.isHidden = true
        self.view.viewWithTag(3)?.isHidden = true
        self.view.viewWithTag(4)?.isHidden = true
```
# 4.タップで１つのみ選択できるようにする

実装例）isHiddenで単純に表示非表示しています

```swift
    @IBAction func whiteButton(_ sender: Any) {
        self.view.viewWithTag(1)?.isHidden = false
        self.view.viewWithTag(2)?.isHidden = true
        self.view.viewWithTag(3)?.isHidden = true
        self.view.viewWithTag(4)?.isHidden = true
    }
    @IBAction func blueButton(_ sender: Any) {
        self.view.viewWithTag(1)?.isHidden = true
        self.view.viewWithTag(2)?.isHidden = false
        self.view.viewWithTag(3)?.isHidden = true
        self.view.viewWithTag(4)?.isHidden = true
    }
    @IBAction func yellowButton(_ sender: Any) {
        self.view.viewWithTag(1)?.isHidden = true
        self.view.viewWithTag(2)?.isHidden = true
        self.view.viewWithTag(3)?.isHidden = false
        self.view.viewWithTag(4)?.isHidden = true
    }
    @IBAction func pinkButton(_ sender: Any) {
        self.view.viewWithTag(1)?.isHidden = true
        self.view.viewWithTag(2)?.isHidden = true
        self.view.viewWithTag(3)?.isHidden = true
        self.view.viewWithTag(4)?.isHidden = false
    }
```

# 5.選択情報を保存する
UserDefaultsに選択情報を保存する場合の例です。

- 保存ボタンを作成し、それをクリックしたら以下が発動するようにすれば良いでしょう。
- 以下の例では1~4番をチェックされた箇所ごとに振ってdataArrayに入れています。

```swift
        if self.view.viewWithTag(1)?.isHidden == false{
            dataArray.append(1)
        }else if self.view.viewWithTag(2)?.isHidden == false{
            dataArray.append(2)
        }else if self.view.viewWithTag(3)?.isHidden == false{
            dataArray.append(3)
        }else if self.view.viewWithTag(4)?.isHidden == false{
            dataArray.append(4)
        }
        UserDefaults.standard.set(colorArray, forKey: "color")
```

# まとめ
- SwiftはtagとisHiddenで簡単に判定が行える
- CSSと違いButtonの上に画像を配置してもボタンの判定がある

これらのメリットを利用して簡単に画像配置だけでシンプルにラジオボタンを実装しました。
複数選択もコードを少し変えて実装できます。

### 書いた経緯
プライベートで自作アプリを作成中ラジオボタンが必要になり、自作してみました。
ネット上で実装方法を検索したところライブラリでの実装の記事ばかりでしたので、この記事がどなたかの参考になればと思い、情報整理がてら投稿いたしました。
もし参考になればいいねくださると励みになります。
過去のアドベントカレンダーの記事一覧をJSONに変換して取得する。

## 概要
今年も[Advent Calendar](https://qiita.com/advent-calendar/2019)の季節が近づいてきました。

毎年、興味のあるトピックのAdvent Calendarにちょいちょい参加させてもらっているのですが、時々「私が投稿しようとしている記事は過去に投稿されている内容とネタが被っているのでは...？」と考えてしまうことがあります。
そこで今回は、過去のアドベントカレンダーの記事一覧を取得するスクリプトを作成してみました。

## アドベントカレンダーの記事一覧取得

スクリプトは以下のGistに置いてあります。

 * [furandon-pig/advcal_list.rb](https://gist.github.com/furandon-pig/f912bac44097fbcde2c9d86cfff53342)

RubyがインストールされているUNIX系OSの環境であれば、以下の手順で実行できます。

```sh 
$ curl -s -OL https://gist.githubusercontent.com/furandon-pig/f912bac44097fbcde2c9d86cfff53342/raw/6ca9e288db2d4a421eff65990bbf023f25185682/advcal_list.rb
$ ruby advcal_list.rb -h
advcal_list.rb [--year <YYYY>] -name <CALENDAR_NAME>

指定可能オプション：
  -y <YYYY>, --year <YYYY>
    ...アドベントカレンダーの年を指定します。

  -n <CALENDAR_NAME>, --name <CALENDAR_NAME>
    ...アドベントカレンダーの名前を指定します。

  -h, --help
    ...ヘルプを表示します。
$
$ ruby advcal_list.rb -n netbsd | jq .
```

取得した記事一覧はJSONフォーマットに整形して出力されます。

```json
{
  "url": "https://qiita.com/advent-calendar/2018/netbsd",
  "list": [
    {
      "date": "12 / 1",
      "username": "furandon_pig",
      "title": "NetBSD上に最小限のデスクトップ環境を用意する＋VNCでアクセスできるようにする",
      "url": "https://qiita.com/furandon_pig/items/2730cc6c370ae0f212f1"
    },
...
  ]
}
```

必要に応じてjqコマンド等で出力を加工できます。

```sh 
$ ruby advcal_list.rb -n netbsd | jq '.list[] | .date,.username,.title' | paste - - - 
"12 / 1"        "furandon_pig"  "NetBSD上に最小限のデスクトップ環境を用意する＋VNCでアクセスできるようにする"
"12 / 2"        "furandon_pig"  "NetBSDでUSBメモリをフォーマットしてみる"
"12 / 3"        "furandon_pig"  "NetBSDのカーネルモジュールサンプルを試してみる"
```

## まとめ
Advent Calendarのネタが被らないようにするため、過去の記事一覧を取得するスクリプトを作成してみました。このスクリプトを使用して興味のあるAdvent Calendarの過去記事への一覧リンクを作成するという応用もできそうです。
LaravelProjectをGitからPullしてからlocalhostで表示するまでの流れ

#初めに
どうもこんにちは、お久しぶりです。
一年ほど記事を書かない間に社会人になってしまいました。
今回、開発でLaravelを使うことになり、プロジェクトをPullしてから、画面表示できないという問題に直面しました。
その時に行った対処を記述していきたいと思います。
##前提条件
1. Git上に自分のブランチが作成されていること
2. プロジェクトに招待されていること（当たり前ですが。。。）
3. ソースツリーの設定が完了されていること（設定されていると楽です）

#今回の流れ
1. ブランチ作成、チェックアウト
2. Composerダウンロード
3. homebrewをInstall
4. php -v を7.2.Xにする
5. composer install

大まかな流れはこんなところになると思います。

##ブランチの作成
branch作成

```
$git branch ブランチ名
```
branch checkout

```
$git checkout ブランチ名
```
上記のコマンドでブランチ作成、チェックアウトまで行えます。

##Composerダウンロード
**詳しい説明は下記のリンクを参考にしていただけると幸いです**
https://qiita.com/atwata/items/d6f1cf95ce96ebe58010

**Composerのダウンロードサイトは下記になります。**
https://getcomposer.org/download/

**また、下記をコピペしていただけるとコンポーザーをダウンロードできます。**

```
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === 'a5c698ffe4b8e849a443b120cd5ba38043260d5c4023dbf93e1558871f1f07f58274fc6f4c93bcfd858c6bd0775cd8d1') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240422/9c5e2198-e4f8-599b-78fc-04d883b04628.png)
上記の画像の場所に配置していただければと思います。
~htdocs/Laravel/composer.phar←ここに作成
Composerはダウンロードした時、composer.pharという名前ので

```
mv composer.phar composer
```
上記のコマンドでリネームすることができます。
##homebrewをInstall
homebrewについては下記のリンクを参考にしていただけると幸いです。
https://qiita.com/omega999/items/6f65217b81ad3fffe7e6

**homebrew installサイト**
https://brew.sh/index_ja
このコマンドをinstallしないとPHPのバージョンアップが大変だったのでinstallすることをお勧めします。

##PHPのバージョンアップ
私はここで詰まりました。。。
現在環境 PHP 7.1.3
エラーコードで7.2以上にあげてくださいとおっしゃっておりましたので、PHPのバージョンをあげることにしました。

```
brew install php@7.2
```
PHP7.2.Xの**インストール**ができました！
※ここ要注意です。
※インストールしただけで反映されていません。
##設定の反映
設定を反映するコマンドは以下になります。

```
$ echo 'export PATH="/usr/local/opt/php@7.2/bin:$PATH"' >> ~/.bash_profile
$ echo 'export PATH="/usr/local/opt/php@7.2/sbin:$PATH"' >> ~/.bash_pro
```
このコマンドを入力したら、**ターミナル**を再起動してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240422/eb13fbd6-6afa-00c1-7817-9d52c867bbe5.png)
上記の様な形でバージョンが上がって入れば成功です。
ここで終わり。。。じゃ無いです笑
いよいよcomposer installです。
##composer install
最後です。
composerと同じ階層のディレクトリで、

```
$php composer install
```
を実行します。
すると**vendor**をはじめとした必要なファイルがインストールされます。
composer周りの設定は以上になると思います。

最後にアプリケーションキーを設定します。

```
$php artisan key:generate
```

以上で、プルしてきたLaravelProjectが動くと思います。


ソースコード管理、初期から学ぶとかなり大変。。。
てかLaravelが結構特殊な気がするけどどうなんでしょう笑
抜けてる部分やわかる範囲で質問があれば答えていこうと思います。

今回はここまでです。
[メモ]Docker コンテナで定期的に任意のコマンドを実行する

例えば以下のように書けば `date` コマンドを10秒ごとに実行する

```bash
$docker run -d alpine /bin/sh -c "while :; do sleep 10; date; done"
a7758deaa636b2910696d940d1c30281e3e5ddb4e973c7a8749081ba724940cf

$docker logs a7758deaa636b2910696d940d1c30281e3e5ddb4e973c7a8749081ba724940cf
Sat Nov  9 20:07:39 UTC 2019

```

`while do done` で無限ループさせている
Laravel 6系でmake:authを使う方法

# make:authが使えない
いつも通り認証機能を実装しようと、Laravelで用意されている「php artisan make:auth」コマンドを実行すると...
![スクリーンショット 2019-11-10 2.30.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379873/97cbce38-e50f-74b1-8c83-71bb75e9c1e7.png)

上記のようにmake:authコマンドなんて存在しないとエラーになった。
調査するとLaravel6系を使っていることが原因で5系まで使えていたmake:authが使えなくなっていた。
細かい変更な気がしますが、最新のバージョンを使う時は一通りドキュメント読むべきでした。

他にも変更点があるので下記リンクを参考にしてください。
[Laravel6 authentication](https://laravel.com/docs/6.x/authentication)

# Laravel6系で認証機能を実装する

それでは実装していきます。

はじめにパッケージのlaravel/uiをcomposerで追加する。

```
$ composer require laravel/ui --dev
```

ついでに、今まで標準でVue.jsやBootstrapが使えていましたが、6系からはこのパッケージを追加して使えるui artisanコマンドでインストールする必要があります。(reactもこの方法)


```
// Bootstrap
$ php artisan ui bootstrap

// Vue.js
$ php artisan ui vue

// React
$ php artisan ui react
```

認証機能は上記のコマンドに「--auth」を追加する事でmake:authと同様に利用できるようになります。

今回は、5系でデフォルトでは組み込まれていなかったreactで実行してみます。

```
// --authを追加する
$ php artisan ui react --auth
```

実装するとpackage.jsonにreactが追加されています。

```js:packgage.json
"devDependencies": {
        "@babel/preset-react": "^7.0.0",
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0"
    }
```

npmでインストールとビルドする

```
$ npm install
$ npm run dev
```

Laravelの画面を見てみると、右上にLogin Registerが追加されています。

![スクリーンショット 2019-11-10 3.55.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379873/c30287fc-864d-acd9-56d1-16c037edce41.png)

ログイン画面はこんな感じで表示され、Auth系のリソースも追加されています。
![スクリーンショット 2019-11-10 3.51.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379873/48c4d70e-e0d5-ec11-d914-7928446da10b.png)

今回の経験で、バージョンによる違いをもっと意識する必要があると感じました。
以上です。
# 参考
[Laravel6 認証](https://readouble.com/laravel/6.x/ja/authentication.html)
[Laravel6 authentication](https://laravel.com/docs/6.x/authentication)
今更理解するSafariデベロッパーツール

先日、誰もSafariのデベロッパーツールの存在を知らないんじゃないか？という疑問に唐突に駆られたのでその存在を紹介すべく今この記事を書いています。

## デベロッパーツールを有効にする
Safariにもデベロッパーツールがあるのを知った僕ですが、最初はいまいち有効にする方法がわかりませんでした。[Appleサポート](https://support.apple.com/ja-jp/guide/safari/sfri20948/mac)によると
Safari>環境設定>詳細　からメニューバーに開発ツールを表示するようです。![スクリーンショット 2019-11-09 19.16.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517124/1164ec8f-b7ce-aed7-6de2-cf5d4975b219.png)

## デベロッパーツールの機能
![スクリーンショット 2019-11-09 19.58.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517124/8ca2b613-570b-fa7e-aa73-92f31ee6b659.png)
デベロッパーツールはこのようになっています。この画像を見ればこのツールが何をできるのかはだいたい想像ができると思いますが、この記事では以下のような項目を解説していきます。

1. レスポンシブデザインモード
2. スニペットエディタ
3. Webインスペクタとタイムライン
4. 要素選択

### レスポンシブデザインモード
![スクリーンショット 2019-11-09 20.35.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517124/da65d674-be44-45b5-1d32-4a279e13ee70.png)
上の写真はappleのページをレスポンシブデザインモードで開いたものです。見て分かる通りにwebページをIpad、Iphoneなどの端末サイズで表示しているのを見られるようになっています。この端末たちのイメージをダブルクリックすると横向きの端末でWebページを表示しているのを見られます。さすがApple純正のブラウザだけある、といったところでしょうか。

右上のSafariというところをクリックすると(多少遅いですが)ユーザーエージェントをGoogle ChromeやFireFox、Microsoft Edgeにも変えることができます。

### スニペットエディタ
![スクリーンショット 2019-11-09 20.44.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517124/f93cdc0a-929f-9422-5608-8f6bf289fa56.png)
このツールではわざわざコードエディタを開かなくてもコードを直に入力することでHTMLやCSSの表示の簡単な確認ができます。画像ではpタグを作ってCSSでテキストの大きさを変えています。私はプログラミング初心者なのでそこそこ多く使う機能です。私は主にWebサイトで紹介されているcssの見た目を試すために使っています。

### Webインスペクタ
![スクリーンショット 2019-11-09 20.52.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517124/6e324511-ba49-0e72-c5ad-b1a60b05046a.png)

このツールを起動すると上のようなごちゃごちゃした画面がフルディスプレイで出てきます。ここからページのリソースやコンソール、デバッグ、タイムラインなどの機能が使えるようになっています。ここら辺は触っていればすぐに慣れるようになると思います。
![スクリーンショット 2019-11-09 21.00.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517124/3b892071-78e1-38d6-9da2-ba5371315195.png)
これがWebインスペクタからも入れるタイムラインです。開発タブのタイムラインの「記録を開始」ボタンを押すことによってWebページに起こったイベントやCPUについてリアルタイムに確認することができます。私はCPUの挙動については全く知りませんが楽しいのでよく眺めます。

### 要素選択

![スクリーンショット 2019-11-09 21.24.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517124/6d9c90b6-6511-7811-ed1d-fa19e9946776.png)
これが一般的に最もよく使われるツールなのではないでしょうか。このツールに関してはChromeのそれとほぼ同じであると断言して構わないと思います。開発タブから「要素選択を開始」を押したら好きなエレメントを選んでクリックすれば、そのエレメントに該当するコードを見ることができます。

## まとめ
Safariのデベロッパーツール、如何だったでしょうか。Chromeのツールのほうが使いやすい、という方に少しでもSafariの開発ツールの良さを知ってもらえれば良いと思っています。
Windows版VSCodeで秘密鍵の位置に関係なくSSHログインするには

普段、Windows版**VSCode**のリモートエクスプローラから開発する人は、sshの**秘密鍵**をどこに保管しているだろうか。
というのも、秘密鍵が他者から容易に見られる状態にあると、VSCodeではエラーになってサーバに接続できない。

```:エラーメッセージ例
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@         WARNING: UNPROTECTED PRIVATE KEY FILE!          @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Permissions for 'C:\\XXXXX\\YYYYY\\zzzzzz.pem' are too open.
It is required that your private key files are NOT accessible by others.
This private key will be ignored.
Load key "C:\\XXXXX\\YYYYY\\zzzzzz.pem": bad permissions
xxxxx@yyy.zzz.com: Permission denied (publickey).
プロセスが、存在しないパイプに書き込もうとしました。
```

なお、UNIX系（macOSを含む）だと `chmod 600` で解決する。

Windowsだとユーザーフォルダの下に置くのが正解のようだが（ACLを適切に設定したら突破できるかもしれないけど未確認）、ときとして、そこに置きたくない場合もあるだろう。
そんなときは**シンボリックリンク**で対処できる。

そう、あまり知られていないが、Windowsもシンボリックリンクを作成できるのだ。

```:コマンド例
mklink C:\Users\xxxxx\.ssh\zzzzzz.pem E:\MW_Documents\開発\Aプロジェクト\設定情報\zzzzzz.pem
```

管理者として起動したコマンドプロンプトから投入すること。
UNIXの`ln`コマンドとは引数が逆になるので注意。

```
mklink  リンク名  実ファイル
```

アイコンの見た目は、ショートカットと同じになる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236222/dfb42a41-cc2e-a6f9-1774-a637d3592ce6.png)

---

:grinning:「ファイル名を指定して実行」で Ctrl＋Shift＋Enter すると管理者で実行できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236222/208e245e-c1d1-22ac-9541-9452d932fcd2.png)
【React Native】Base64文字列を画像で表示する

Imageタグのsource属性にBase64文字列を指定したかった時に少し迷ったのでメモ

```

export default class App extends React.Component {
    state = {
        base64Str: "data:image/png;base64,R0l..."
    }

    render() {
        return (
            <View>
                <Image source={{uri: `${this.state.base64Str}`}} />
            </View>
        );
    }
}
```
【AWS】DirectConnect

2019/11/9時点

#DirectConnectとは
- データセンターやオフィスを専用線を介してAWSへプライベート接続するサービスである。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530635/730ee38b-99c8-98bf-b752-f22e4a652eb6.png)

#DirectConnectとVPNの比較
- データセンターやオフィスからAWSへプライベート接続する方法としてDirectConnectの他にVPNがある。
- コスト、開始までの期間、帯域・品質から適切な接続を選択することが重要である。

|        |       DirectConnect  |    VPN    |
|:-----------------|:------------------|:------------------|
| コスト|キャリアの専用線サービスの契約が必要 | 安価なベストエフォート回線も利用可能|
| 開始までの期間 |  数週間  |       即時       |
| 帯域 | 専有型：1Gbps/10Gbps<br>共有型：~10Gbps| 暗号化のオーバーヘッドにより制限あり |
| 品質| キャリアにより高い品質が保証されている|インターネットベースのため経路上のネットワーク状態の影響を受ける|

#基本構成
- ユーザは、DirectConnectロケーションを介してAWSと接続する。
- DirectConnectロケーションまでは、APN認定パートナーの専用線を利用するか、ユーザが自ら専用線を引きこむ必要がある。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530635/a85b7374-94a3-e031-6393-e0e07ad583a7.png)

#クロスアカウント利用
- 物理接続（Connection）は、複数のVIF（仮想インターフェース）に分割できる。
- 分割したVIFは、物理接続（Connection）を所有するAWSから他のAWSアカウントに提供することが可能である。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530635/ed4ee005-dd44-d5ff-be4e-99fed581daa5.png)

#DirectConnectGateway
- 通常は、VIFあたり1つのVPCとしか通信できない。また、DirectConnectで接続したリージョンのVPCとしか通信できない。
- DirectConnectGatewayを利用することで、複数のVPC、またはDirectConnectで接続してないリージョンのVPCとも通信可能となる。（中国リージョンを除く）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530635/db776a4b-41a2-311f-a964-39c557407b3d.png)

- DirectConnectGatewayを利用してもデータセンターからデータセンターや、VPCからVPCの通信はできない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/530635/5c9bb09e-d6aa-3a1e-2d57-200830778cd7.png)


#参考
[AWS Direct Connect](https://d1.awsstatic.com/webinars/jp/pdf/services/20170127-aws-blackbelt-directconnect.pdf)
[TypeScript/React Hooks] useReducer + useContextで死ぬほど簡単にグローバルなストアを作る

```tsx
import React, {
    createContext,
    FC,
    useContext,
    useEffect,
    useReducer,
} from 'react'

type NewStateAction = Partial<S> | ((prevState: S) => Partial<S>)
type ContextValue = {
    globalState: S
    setGlobalState: (newState: NewStateAction) => void
}

type S = typeof initialState

const initialState = {
    count: 0,
}

export const Store = createContext({} as ContextValue)

export const Provider: FC<{}> = ({ children }) => {
    const [globalState, setGlobalState] = useReducer(
        (prev: S, newState: NewStateAction) => {
            const _newState =
                typeof newState === 'function' ? newState(prev) : newState
            return { ...prev, ..._newState }
        },
        initialState,
    )

    useEffect(() => {
        // count が変更された場合の処理
    }, [globalState.count])

    return (
        <Store.Provider value={{ globalState, setGlobalState }}>
            {children}
        </Store.Provider>
    )
}
```

おわり。勢いで書いたのでどっか間違ってるかもしれません。

コンポーネントでは以下のように使います。

```tsx
const Component = props => {
    const { globalState, setGlobalState } = useContext(Store)

    globalState.count // get

    setGlobalState({ count: 1 }) // set
    setGlobalState(({ count }) => ({ count: count + 1 })) // set
}

const App = () => (
    <Provider>
        <Component></Component>
    </Provider>
)
```

useEffect など通常の React Hooks の API が使えるので統一感があっていいですね！！
PHPWord+TCPDFでWord→PDF変換

PHPWordを使ってWordファイルを作成していたところ、PDFファイルが欲しいという要望があり、WordからPDFの出力を試しました。変換方法はすぐに記事が見つかりましたが、日本語フォントの設定方法が意外と見つからなかったので合わせて紹介します。

環境
Windows 10
PHP 7.3.10

# ライブラリのインストール

```
composer require tecnickcom/tcpdf
composer require phpoffice/phpword
```

# フォントのダウンロード(必要な人のみ)

TCPDFではいくつか日本語の標準フォントが用意されています。以下参考
http://www.t-net.ne.jp/~cyfis/tcpdf/tcpdf/SetFont.html

標準以外のフォントを使用したい場合は、別途用意する必要があります。
IPAフォントダウンロードページ
https://ipafont.ipa.go.jp/old/ipafont/download.html

# 実装
PDF出力に関連する箇所のみ記載しています。

```
$phpWord = new /PhpOffice/PhpWord/PhpWord();
$template_processor = $phpWord->loadTemplate('template/sample_word.docx');
$word_file_name ='template/template.docx';
$template_processor->saveAs($word_file_name);

Settings::setPdfRendererName(Settings::PDF_RENDERER_TCPDF);
Settings::setPdfRendererPath('../vendor/tecnickcom/tcpdf');

$loadWord = IOFactory::load($word_file_name, 'Word2007');
$pdfWriter = IOFactory::createWriter($loadWord, 'PDF');
// $pdfWriter->SetFont('kozminproregular', '', 12); // 標準の日本語フォントを使う場合はこれでOK
//使用するフォントを指定
$font = new TCPDF_FONTS();
$ipagFont = $font->addTTFfont('../vendor/tecnickcom/tcpdf/fonts/ipag.ttf'); //フォントは別途用意
$pdfWriter->SetFont($ipagFont, '', 12);
//PDFファイルを保存
$pdf_file_name = 'pdf/convert_pdf.pdf';
$pdfWriter->save($pdf_file_name);
```

Word→PDF変換できるのは文字や表のみで、画像が入る場合、正しく変換されず画像無しのファイルとなってしまうようです。

# 参考
標準日本語フォントの一覧
http://www.t-net.ne.jp/~cyfis/tcpdf/tcpdf/SetFont.html

TCPDFの仕様(バグ?)で半角スペースが入っていると改行されてしまう時がある問題の解決方法
https://nakatsuyasuhiro.hatenadiary.org/entry/20100401/p1
【UE4】マウスホイールでカメラとキャラクターの近さを変更する

# 最初に

この記事はUE4のブループリントを使用して、マウスホイールによるカメラとキャラクターの距離調節を行う方法の記事となります。間違いや更に良い方法があった場合にはそっとTwitter( [@ろっさむ](https://twitter.com/4_mio_11) )やコメント、修正リクエストなどでお知らせ頂けるととても有難いです。



## 作業環境

記事内で使用する作業環境は以下の通りとなります。

- Unreal Engine：4.23.1



# 手順

## Input設定を追加

UE4エディタの`Edit`から`Project Settings...`を開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/0946ba08-37a2-14fb-2e9c-136621d8e897.png)



設定群の中から`Input`を開いてください。`Axis Mappings`という項目で`CloseUp`を足して、`Mouse Wheel Axis`（ホイールを前方向に回す）の場合は`1.0`、`Mouse Wheel Down`（ホイールを後方に回す）の場合は`-1.0`とします。



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/c8987498-0c08-f1b0-7a8d-edb39a3c4112.png)



## ブループリント上での処理

対象となるキャラクターBPを開きます。`Spring Arm Componet`の下にある`Camera Component`を、`SetRelativeLocation`を使用して、`X`の値を変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/5e4304ed-fcb8-7f76-6f40-c9a3bc089e34.png)



キャラクターブループリント側で`CloseUp`という`Axis Events`を追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/6e61b16c-40cf-1edc-1334-4045998401fb.png)



ここでさすがに`1.0`ずつカメラ位置を変更するのは操作感が悪いので、数値に`×10`をします。そこで出来た値を現在のカメラの`Relative Location`の`X`の値に足し、新しい位置を`SetRelativeLocation`をセットしてあげます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/f9d80384-d2f3-90a8-9574-4e14cee2b1a4.png)



ここの`Relative Location X`の値が一定以上/一定以下であれば、それ以上の加算/減算は行わないといった処理を付け足すことでカメラ距離の限界も設定が可能です。



# 最後に

これだけの手順で、MMORPGなどでよくありがちなマウスホイールでのカメラ距離調整を行えます。カメラ距離調節はキャラクター自体を愛するユーザーにとっても大事な要素なので、実装しておきたい機能ではあります。是非追加してみてください。