OmniAICreator/Qiita-1.07M huggingface dataset:
[React] Reactの学習をします（1-4）Web アプリの公開

#Reactの学習をします（1-4）

Reactの学習をしてみることにしました。
前回の記事　：　[[React] Reactの学習をします（1-3）式の埋め込み](https://qiita.com/IwashiMorino/items/7df6143bc429d32fa980 "[React] Reactの学習をします（1-3）式の埋め込み")

##教材

[Reactチュートリアル1：犬画像ギャラリーを作ろう](https://zenn.dev/likr/articles/6be53ca64f29aa035f07#%E6%9D%A1%E4%BB%B6%E5%88%86%E5%B2%90 "Reactチュートリアル1：犬画像ギャラリーを作ろう")

likr さんが公開している「Reactチュートリアル1：犬画像ギャラリーを作ろう」という記事を教材に学習させて頂きます。

素晴らしい教材をありがとうございます。

##学習日記

本日は「条件分岐」～「Web アプリの公開」までやりました！

無事、公開することができました！

（これで、「Reactチュートリアル1：犬画像ギャラリーを作ろう」の学習は完了です。）


##条件分岐

※ 教材から箇条書き的に抜粋させて頂きます。

>・Dog API からの応答を受け取ってはじめて画像の一覧を表示することができるようになります。そのため、画像を取得し終わるまでは別の内容を表示しておかなければいけません。例えば、「loading」などと表示しておくと、まだデータを読み込み中であることがわかるでしょう。

>・さて、データの取得が終わっているかどうかに応じて画面の表示内容を切り替える必要が出てきました。条件分岐によってそれを実現しましょう。

```javascript:App.js
if (urls == null) {
  return <Loading />;
}
```

（一部抜粋させて頂きました。）

##サーバーからのデータ取得

※ 教材から箇条書き的に抜粋させて頂きます。

>・新たに src/api.js を作成し、そこに Dog API から画像取得を行う fetchImages 関数を作成します。

ここで、サンプルプログラムに async や await というのが出てきます。async や await 何となく聞いたことがあるのですが、何だったけ？　と思ったので検索しました。

検索しますと、Qiita で @soarflat さんという方が書かれた記事が出てきました。読ませて頂きました。ありがとうございます。

[async/await 入門（JavaScript）](https://qiita.com/soarflat/items/1a9613e023200bbebcb3 "async/await 入門（JavaScript）")

さて、チュートリアルを続けます。

>・React のコンポーネントは、アプリケーションの状態が同じであれば常に同じ JSX 式を結果として返すべきです

>・アプリケーションの状態から JSX を組み立てることがこの関数の主作用となります。

>・Web アプリケーションでは、アプリケーションの状態を更新するための副作用も発生します。例えば、外部のサーバーにリクエストを送ることなどが副作用にあたります。

>・useEffect 関数は、時間の経過や外部サーバーからのリソース取得結果を処理するなど、コンポーネントの副作用を表現するために使われます。

Main コンポーネントを useEffect を使うように、書き換えていきます。

>・useEffect の第 1 引数には、副作用を起こす関数を渡します。

>・useEffect の第 2 引数には、その副作用が依存する値のリストを配列で渡します。

##状態の変更

※ 教材から箇条書き的に抜粋させて頂きます。

>・コンポーネントの状態を扱うためには useState 関数を使います。まずは、src/App.js の先頭で useState をインポートしましょう。

>・次に、Main コンポーネントを以下のように書き換えます。

サンプルプログラムの通りに書き換えますと、Dog API から画像を取得を取得できるようになります！

##フォームの操作とイベントハンドリング

※ 教材から箇条書き的に抜粋させて頂きます。

>・今は柴犬の画像のみを表示していますが、Dog API は様々な犬種の画像を提供しています。表示する画像の犬種を選べるようにしてみましょう。

>・フォームが送信されたときの処理を追加します。form要素において、フォームが送信されるときには submit イベントが発生します。React では、イベントを起こす要素にイベントを処理する関数を渡すことで行います。

>・今回は、select要素で選択された値を引数として親コンポーネントから渡された onFormSubmit 関数を呼び出すことにします。

>・select要素の値を受け取って処理する関数を reloadImages として作成します。関数の中身では、fetchImages 関数を呼び出して新しく取得した画像 URL のリストでurlsを更新します。


※ ここまでやりますと、このWebアプリケーションは完成です！！

##Web アプリの公開

※ 教材から箇条書き的に抜粋させて頂きます。

>仕上げに、開発した すばらしい 犬画像ギャラリーを、世界中の人がアクセスできるように公開しましょう。Web アプリの公開にはいくつもの方法がありますが、今回はNetlify を利用します。

##成果物

Netlifyに公開させて頂きました！素晴らしいチュートリアルをありがとうございます！！

こちらです　→　[Cute Dog Images](https://lucid-carson-5d0b4e.netlify.app/ "Cute Dog Images")
初ハッカソンでコロナ感染状況を可視化するサイトを作って、運良く最優秀賞を頂いた話

# はじめに
こんにちは。
先日、レッドインパルス株式会社主催のFirebaseオンラインハッカソンで最優秀賞をいただきました！
以前に、私が所属する[Ruten株式会社](https://ruteninc.com/)でオンラインハッカソンを開催したことがあるのですが、参加するのは今回が初めてでした。
1週間という短い時間と、チームメンバーが普段の業務を抱えているという状況を踏まえると、うまくやりきれたと思います。
この記事では、開発したものの紹介や、期間中に考えたことや、主催する側と参加する側の両方を経験したことでわかったことなどを書いていきたいと思います。

# 何を開発したのか？
私たちが開発したのは、コロナウイルスの感染状況をポップに可視化してくれるサイト「コロナ君」です。
![coronakun-ogp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011646/f2c90309-55ef-3995-5b18-b0469b61df80.png)
デプロイしたものは[「コロナ君」](https://reactors-42879.firebaseapp.com/)で見られます。
当日の発表スライドは[「コロナ君発表スライド」](https://docs.google.com/presentation/d/1mzsa4amOEqeqimksPwA68va71OOLkj2LTRN4knn6s0M/edit?usp=sharing)で見られます。
コロナ君の公式Twitterは[こちら](https://twitter.com/KQwfMUm6Ec8bn7S)です。

## コロナ君の特徴

![for-qitta.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011646/95012318-132e-4714-d910-eac0f228454f.jpeg)




+ コロナウイルスの新規感染者発生状況によって、表示されるコロナ君の個体数が変動する. -> 感染状況を視覚的に理解できる。
+ より新規感染者が多い都道府県上に、よりコロナ君が集まるようになっている。 -> 一目で感染者の分布を理解できる。
+ 都道府県と日付の絞り込みで、ピンポイントで正確な情報が得られる。 -> 視覚的な理解から正確な数値へ、と理解を深めることができる。

## 使用技術
- フロントエンド
    - React.js(SPA)
- バックエンド
    - Firebase Cloud Functions(Node.js)
- インフラストラクチャ
    - Firebase Hosting
    - Firebase Cloud Storage
- データリソース
    - 日本政府が公開している[オープンデータ](https://corona.go.jp/dashboard/)

## 構成
![スクリーンショット 2021-01-19 19.58.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011646/3e4155b3-9204-1ac7-00d0-2f0f1bc006ab.png)
React.jsベースのSPAがCloud Functionのエンドポイントを叩くと、Cloud Functionが日本政府のAPIを叩きに行って、データの整形をして返してくれるようにしています。
データの処理はできるだけCloud Functionで行うようにして、フロントの処理を軽くしようという意図があります。

# 企画や開発時に考えていたこと
- (チームメンバーの得意な分野が幸いにもバラバラだったので、)共通の仕様だけ決めたら、後は完全に任せちゃう。
- (チームメンバーが作業できる時間が限られていたので、)時間に対するレバレッジが効くように選択と集中をしよう。
    - 評価項目(アイデア、技術力、プレゼン)のうち、アイデアとプレゼンで稼ごう。
- 早めに、アイデアを実現した最低限のものを開発してデプロイしてしまおう。
- 発表スライドの見栄えから逆算して、デザインと機能の選択を行おう。

# 主催する側と参加する側の両方を経験したことでわかったこと
- 評価はプロダクトというより発表時の印象に大きく左右される。
- 時間の制約を考慮した意思決定をしているチームは強い。
- 参加チームの中でユニークな技術を使っていると評価されやすい。
- ハッカソンを通して自分の相対的な技術力や企画力を認識できて、内省する機会が得られる。

# 最後に
今回、このハッカソンに参加したことで内省することができたのが一番の収穫でした。内省したことについて詳しくは以下に書いたので、興味があればご覧ください。
[「初めてのハッカソンで、運良く最優秀賞を頂けて、色々と感慨深くなった話~プログラミング初心者に届け~」](https://note.com/hoy/n/n444865d9c53d)
今回一緒にチームを組んだメンバーである[太一](https://twitter.com/DbEzb9)と、[大地くん](https://twitter.com/dainabeblog)が、それぞれフロント開発とデザインを担当してくれました。彼らが私の苦手なところを素晴らしい仕事で補ってくれたので、良い結果を出すことができました。感謝します。
ハッカソンは受賞すると景品がもらえますし、受賞しなくても内省する機会が得られるので、是非参加してみてはいかがでしょうか？
![アセット 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1011646/7897b8a5-c872-aad8-bb27-91dc8ed7b382.png)
docker-composeのMySQLのパスワードなどを変えたくなったとき

表題の通り、こんな感じでmysqlのパスワードを設定しているときの設定値の変え方です。


```yaml:docker-compose.yml
  mysql:
    image: mysql:5.7.32
    ports:
      - "3306:3306"
    volumes:
      - mysql_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: root_pass
      MYSQL_DATABASE: db_name
      MYSQL_USER: user1
      MYSQL_PASSWORD: user1_pass

volumes:
  mysql_data:
```

普通にdocker-compose.ymlを変更したのち、次のコマンドを実行すると設定値が反映されます。

```bash
docker-compose down --volumes
docker-compose up -d
```

普通にdownしてupしただけだと、パスワードが設定済みのMySQLのデータが使われてしまうのでうまくいきません。
そこで前述のコマンドのようにボリュームを削除させる必要があります。
JavaScript EC6【基本文法】～Part1～

#初めに
最近、Reactを始めたのですが、そもそもJavaScriptのJaの字も分からなかったので
基本的すぎるかもしれませんが、アウトプットの練習をかねて、勉強した内容を分けて投稿しようと思います。

#目次
###・変数
###・HTMLファイル内でJavaScriptファイルを読み込む
###・データ型（プリミティブ型）


##変数
###・`const`


再定義と再代入ができない変数

```javascript
const x = 1;
console.log(x); //-> 1
x = 2;
console.log(x); //-> 1
const x = 1; //->　Error
```

###・`let`

再定義ができない変数

```javascript
let x = 1;
console.log(x) //-> 1
x = 2;
console.log(x) //-> 2
let x = 1; //->　Error
```
###・`let`と`const`の厳密性
`{}`内で`let`と`const`を定義した場合、`{}`内でのみ参照できる。

```javascript
const x = 1;
if (x === 1) {
    let y = 2;
    const z = 3;
    console.log(y); // -> 2
    console.log(z); // -> 3
}
console.log(y); // -> undefined
console.log(z); // -> undefined
```

###・`var`
再定義も再代入も出来るが、それ故に意図しない再定義や再代入を引き起こすため
基本的に使わない。

##HTMLファイル内でJavaScriptファイルを読み込む
HTMLファイル内でJSファイルよ読み込みたい場合は以下の通りに書く。
今回は同じディレクトリにある`index.js`というファイルを読み込む事にする。

```html
<html>
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <script src="./index.js"></script>
</head>
<body></body>
</html>
```
##データ型（プリミティブ型）
プリミティブ型（基本型）の値は一度作成すると値自体を変更する事ができないイミュータブル特性を持つ。

| 型名 | 値 |
|:-----------|------------:|
| number   | 数値|
| string     | 文字列|
| boolean       | 真偽値   |
| underfined          | 値が定義されていない          | 
| null       | 値が存在しない| 
| symbol       | 一意で不変な値のデータ型| 

```javascript
console.log(typeof false);// => "boolean"
console.log(typeof 91110); // => "number"
console.log(typeof "JS"); // => "string"
console.log(typeof Symbol("シンボル"));// => "symbol"
console.log(typeof undefined); // => "undefined"
console.log(typeof null); // => "object"
```
※`null`の型名が`object`になるのは歴史的経緯のあるバグらしい。
（詳細はこちらの記事から->https://2ality.com/2013/10/typeof-null.html）

##参考記事
https://qiita.com/Fendo181/items/cca476da99e8f09b6b97
https://jsprimer.net/basic/data-type/#fn_1
https://qiita.com/soarflat/items/b251caf9cb59b72beb9b
multiprocessingを使ってflask起動後に他の処理を立ち上げる


### きっかけ
flaskを起動しつつ、他の処理をさせたいことがあったので、なんとかならないかなと書いてみました。とりあえず動いたので公開します。長時間の検証はしていません。

### 動作環境
Python 3.9.1
flask 1.1.2

```flask_hogehoge.py
from flask import Flask
from multiprocessing import Process
import datetime
import time

app = Flask(__name__)

@app.route('/')
def index():
        return "Hello World!"

def hogehoge():
    i = 0
    while True:
        print("{}, {}".format(i, datetime.datetime.now()))
        i += 1
        time.sleep(10)

def run(**kwargs):
    app.run(**kwargs)

if __name__ == '__main__':
    server = Process(target = run, kwargs = {'host': '0.0.0.0', 'port': 5001, 'threaded': True})
    server.start()

    hogehoge()
```

### 解説
* `def hogehoge()`に、flask起動後に処理したい内容を書きます。
* `    server = Process(...`
のところは、
`target = app.run, kwargs = {...`
と書いたのですが、app.runにうまく引数が渡せなかったので、
`def run(**kwargs)`で`app.run`とし、
`target = run, kwargs = {...`としています。
enum で性別選択欄作ってみた

##新規投稿の時に性別を選択できるようにする

①　enumを使用する時のデータ型は　gender:integer にする

②　enum gender: { man: 0, woman: 1 } をモデルに記述

③　view 作成


```
 <%= f.label :man %>
 <%= f.radio_button :gender, :man %>
 <%= f.label :woman %>
 <%= f.radio_button :gender, :woman %>
```

完成:blush:

なんだけど、これだと　viewでは　man か woman と出でしまうので、

私は
enum gender: { 男: 0, 女: 1 } 

```
 <%= f.label :男 %>
 <%= f.radio_button :gender, :男 %>
 <%= f.label :女 %>
 <%= f.radio_button :gender, :女 %>
```

という風にしました。
いいのかわかんないけど:sweat:

英語を日本語にするgemを使った方かいいのかな？？
【Swift】UITableViewでcellを長押しして画面遷移する

###はじめに
UITableViewでcell長押しによる、画面遷移の実装に少し詰まったので、
longPressGestureRecognizerを用いて画面遷移する方法を記載します。

###実装方法
まずViewDidloadにてUILongPressGestureRecognizerの宣言を行います。


```
override func viewDidLoad() {
        super.viewDidLoad()

        // UILongPressGestureRecognizerの宣言
       let longPressRecognizer = UILongPressGestureRecognizer(target: self, action: #selector(ViewController.longPress(longPressGestureRecognizer:)))

        // tableViewにrecognizerを設定
        self.view.addGestureRecognizer(longPressRecognizer)
        }
```

次にcellの長押しが実行された際の処理を記載します。

```
@objc func longPress(longPressGestureRecognizer: UILongPressGestureRecognizer) {
            // 長押しが開始されたら処理
        if longPressGestureRecognizer.state == UIGestureRecognizer.State.began {
            // peformSegueで遷移先へ移動
            performSegue(withIdentifier: "遷移先のid", sender: self)
        }
    }
```

###参考

UIGestureRecognizerについてはこちらの記事を参考にしました。
[UIGestureRecognizerの種類](https://qiita.com/taketomato/items/e0e45f0d768109abef2f/)

###最後に
ご覧頂き有り難うございました！
ご指摘などありましたら、お気軽にコメントください。
改行が含まれる文字列をそのまま表示する方法

## 困ったこと
改行が含まれている文章がそのまま表示されない。。（改行が空白になる。）

```html:
<div>
  {{content)}}
</div>
```

```
今日はピクニック。 楽しいな
```

## スタイルを当てよう


```html:test.html
<div class="content">
  {{content)}}
</div>
```
```sass:test.css
.content {
  white-space: pre-wrap; // 要素内のホワイトスペースをどのように扱うか。今回は変更させない。
  word-wrap: break-word; // 日本語の単語をどう扱うか。今回は改行させる。
}
```

```
今日はピクニック。
楽しいな
```


できた
go.modの補足　パッケージ

<a href=https://qiita.com/flymywife/items/f04c4b4337b71a9aff22>前回</a>の続きです。


```[go.mod]
module example.com

go 1.15

require github.com/labstack/echo/v4 v4.1.17
```

上記のgo.modの一番上の
```module example.com```
の部分ですが、ここがimportして自分のパッケージを使う時の名前になります！
以下のような構成のプロジェクトの場合↓

test
　|--samplea--aaaaa.go
　|--sampleb--bbbbb.go
　|--main.go
　|--go.mod
　|--go.sum

```[main.go]

package main

import(
"example.com/samplea"
"example.com/sampleb"
)
```
このようにして使います。
ディレクトリの名前とモジュールの名前を同じにしたければ

```[go.mod]
module test
```
にします。
【Android】APIのレベルによるエラーの対処方法

#プログラミング勉強日記
2021年1月19日
最近Android開発をしていて、普段と違うAndroid端末を利用したときにエラーが出た。その解決方法を示す。

#エラー内容
　Android端末のAPIよりもプロジェクトのAPIの方が新しく、このエラーが出た。なので、プロジェクトのAPIをAndroid端末のAPIに合わせることで解決する。

```
Session 'app': Installation did not succeed. 
The application could not be installed: INSTALL_FAILED_OLDER_SDK
```

#解決方法

##1. 必要なSDKをインストールする
　`ツール→SDKマネージャー→Android SDK`から選択して端末と同じSDKをインストールする。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/58bc76f9-ac54-3978-1677-97ffa8171e8b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/356f98ae-8dae-fceb-3dce-e6318243a5c7.png)

##2. SDKを適用する
　`ファイル→プロジェクト構造→モジュール→デフォルト構造`の`最小SDKバージョン`にAndroid端末と同じSDKを適用する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/35724224-22c3-7f82-f6c0-c1600fef3c30.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/642821/73171725-8684-487f-e1f4-3e44db6e11f3.png)
Material Icons Guide の使い方

#Material Icons Guide とは？
Googleが提供しているアイコンフォントです。
アイコンは無料で使用できます。

#Material Icons Guideの使い方
HTMLのヘッダー内（head要素内）に下記のコードを入れます。

```
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
```

次に公式サイトから使いたいアイコンをクリックして選択します。
[Material Icons Guide　公式サイト](https://material.io/resources/icons/?style=baseline)

左下の　`Selected Icon` ボタンをクリックすると以下のようなコードが表示されるので、コードをコピーしてHTMLの表示したいところに貼り付けます。
（アイコンのクラス名は全て同じなので、 `favorite` の部分でどのアイコンが表示されるかが決まります。）


```
<span class="material-icons"> favorite　</span>
```

選択したアイコンが表示されれば成功です。
Material Iconsはアイコンフォントなので、CSSで色やサイズを変更することができます。
[Node.js]docker-compose upで気楽に開発環境構築

# 前提
- 筆者はMac環境（試してないがWindowsでも動くと思う）
- dockerコマンドが使える状態
- npmコマンドが使える状態
- nodeコマンドが使える状態
- Dockerの基本的知識（イメージやコンテナの概念）を有する

# 対象
- 環境構築を手っ取り早くしたい人
- Node.jsをdockerで動かしたい人

# 環境
```bash:bash
$ docker -v
Docker version 20.10.2, build 2291f61

$ npm -v
6.14.5

$ node -v
v13.11.0

$ pwd
~/{project_name}
```

# ファイル構成
```bash:project
{project_name}
 ├─ node_modules
 |   └─ ...
 ├─ src
 |   └─ index.js
 └─ docker-compose.yml
 └─ Dockerfile
 └─ package.json
 └─ package-lock.json
```
`node_modules`の中身は割愛

# Dockerfileの設定
基本的には[こちらの公式ドキュメント](https://nodejs.org/ja/docs/guides/nodejs-docker-webapp/)通りにやれば良いが、楽に開発したいたので修正する

```dockerfile:{project_name}/Dockerfile
FROM node:12

# アプリケーションディレクトリを作成する
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
# Dockerfileが置かれているディレクトリ以下をコピー
ADD . /usr/src/app

# アプリケーションの依存関係をインストールする
COPY package*.json /usr/src/app
RUN npm install
# 本番用にコードを作成している場合
# RUN npm install --only=production

# アプリケーションのソースをバンドルする
COPY . /usr/src/app
```

- `FROM node:12`：`12`の部分は[こちら](https://hub.docker.com/_/node)を参考に自身の好きなバージョンで！
- `WORKDIR /usr/src/app`：dockerコンテナの作業ディレクトリを指定  
（変更する場合はDockerfileと後に紹介するdocker-compose.ymlに書かれた`/usr/src/app`を全て変更する必要あり）


# docker-compose.ymlの設定
```docker:{project_name}/docker-compose.yml
version: '3'
services:
  app:
    build: .
    command: bash -c 'node src/index.js'
    image: node_test
    volumes: .:/usr/src/app
    ports: "8080:8080"
    tty: true
```

- `command: bash -c 'node src/index.js'`：`docker-compose up`コマンドでコンテナ起動の際に呼ばれるコマンド
- `image: node_test`：image名は任意で変更（分かりやすいプロジェクト名とか）
- `volumes: .:/usr/src/app`：ローカルのファイルとdockerコンテナ内のファイルを同期させる
- `ports: "8080:8080"`：ローカルとコンテナ両方とも8080番ポートを使用
- `tty: true`：`docker-compose up`でコンテナが終了しないようにする

# （index.jsの設定）
基本的に自身の環境による
以下は[こちら](https://nodejs.org/ja/docs/guides/nodejs-docker-webapp/)の雛形

```javascript
'use strict';
const express = require('express');

// Constants
const PORT = 8080;
const HOST = '0.0.0.0';

// App
const app = express();
app.get('/', (req, res) => {
  res.send('Hello World');
});

app.listen(PORT, HOST);
console.log(`Running on http://${HOST}:${PORT}`);
```

# 起動
```bash:bash
$ docker-compose up
```

Have fun !!

※ イメージができてない場合、コンテナ起動までに時間がかかる

# 参考文献
> - [Node.js Web アプリケーションを Docker 化する](https://nodejs.org/ja/docs/guides/nodejs-docker-webapp/)
- [Docker Hub Node](https://hub.docker.com/_/node)
- [Node.js を動かす Dockerfile のサンプル - Qiita](https://qiita.com/niwasawa/items/9673d31ee2a6c532dc5b)
- [【初心者向け】Dockerで手軽にNode.js開発環境構築 (1) - Qiita](https://qiita.com/yukin01/items/f597f06cb5a05b3fe82e)
Azure IoT Hub に Node.js で subscribe

Ubuntu 20.10 で確認しました。

```js:azure_subscribe.js
#! /usr/bin/node
// ---------------------------------------------------------------
//	azure_subscribe.js
//
//					Jan/19/2021
//
// ---------------------------------------------------------------
'use strict'

const { EventHubConsumerClient } = require("@azure/event-hubs");

const eventHubsCompatibleEndpoint = "sb://ihsuprodkwres017dednamespace.servicebus.windows.net/"

const eventHubsCompatiblePath = "iothub-ehub-iot-aa-344012-58f0095d47"

const iotHubSasKey = "QThy0z2eiCOzKcv2Ni5DZCnHL8Gtabcdefghd4pj5D4="

const connectionString = `Endpoint=${eventHubsCompatibleEndpoint};EntityPath=${eventHubsCompatiblePath};SharedAccessKeyName=service;SharedAccessKey=${iotHubSasKey}`;

var printError = function (err) {
  console.log(err.message);
};

var printMessages = function (messages) {
  for (const message of messages) {
    console.log("Telemetry received: ");
    console.log(JSON.stringify(message.body));
    console.log("");
/*
    console.log("Properties (set by device): ");
    console.log(JSON.stringify(message.properties));
    console.log("System properties (set by IoT Hub): ");
    console.log(JSON.stringify(message.systemProperties));
    console.log("");
*/
  }
};

async function main() {
  console.log("IoT Hub Quickstarts - Read device to cloud messages.");

  const clientOptions = {
  };

  const consumerClient = new EventHubConsumerClient("$Default", connectionString, clientOptions);

  consumerClient.subscribe({
    processEvents: printMessages,
    processError: printError,
  });
}

main().catch((error) => {
  console.error("Error running sample:", error);
});

// ---------------------------------------------------------------
```

必要な値の取得方法

Event Hub-compatible endpoint

```bash
az iot hub show --query properties.eventHubEndpoints.events.endpoint --name {
your IoT Hub name}
```

Event Hub-compatible name

```bash
az iot hub show --query properties.eventHubEndpoints.events.path --name {your
 IoT Hub name}
```

Primary key for the "service" policy to read messages

```bash
az iot hub policy show --name service --query primaryKey --hub-name {your IoT
 Hub name}
```

Portal にアクセスして、connectionString　を読み取ることもできます。
「イベントハブ互換エンドポイント」になります。
![iothub_endpoint_jan20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/572e33bd-780d-af10-d6cb-46e6549929de.png)


実行コマンド

```bash
export NODE_PATH=/usr/lib/node_modules
./azure_subscribe.js
```

参考ページ
[Hub からテレメトリを読み取る](https://docs.microsoft.com/ja-jp/azure/iot-hub/quickstart-send-telemetry-node#read-the-telemetry-from-your-hub)
C++17 でも pprint したいメモ

Python `pprint` とか便利ですよね.

C++ で `operator<<` オーバーロードとかめんどい...

C++17 でもぺろっとお手軽に pretty print やりたいですね!
(C++11, 14 でもできなくはないが, 17 のほうがいろいろできる)

## ライブラリ

https://github.com/p-ranav/pprint

https://github.com/tcbrindle/pretty_print.hpp

ありがとうございます!

## 欠点

テンプレートなのでコンパイル時間がかかります...
(`p-ranav/pprint` のほうがよりかかる)
Express Tour #2 Express application generator

素早くExpressアプリケーションのスケルトンを作るために、express-generatorを使いましょう。

## 検証環境
lubuntu 20.04
node.js 14.15.3
express 4.16.1

## express-generator のインストール

まず下記コマンドでexpress-generatorをグローバルインストールします。

```
$ npm install -g express-generator
```

## アプリの作成

次にアプリケーション用のディレクトリを作ってそこに移動しましょう。

```
$ mkdir exg-test
$ cd exg-test
```

express -h コマンドを打つと各オプションについて確認できます。

```
$ express -h
```

実行結果

```
  Usage: express [options] [dir]

  Options:

        --version        output the version number
    -e, --ejs            add ejs engine support
        --pug            add pug engine support
        --hbs            add handlebars engine support
    -H, --hogan          add hogan.js engine support
    -v, --view <engine>  add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
        --no-view        use static html instead of view engine
    -c, --css <engine>   add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
        --git            add .gitignore
    -f, --force          force on non-empty directory
    -h, --help           output usage information
```

デフォルトではviewエンジンとしてJadeがインストールされるのでJadeを使いたくない方はオプションを指定してあげる必要があります。
(cssのデフォルトは普通のcssです。)

例として、viewエンジンにEJS, stylesheetエンジンにsassを指定したい場合は以下のコマンドで作成します。

```
$ express --view=ejs --css=sass
```

以下のような構成でアプリが作成されます。

```
 ./
 ../
 app.js
 bin/
 package.json
 public/
 routes/
 views/
```
## 依存関係のインストール

npm install で依存関係のあるライブラリをインストールします。

```
$ npm install
```

## アプリの起動

以下のコマンドを打つと htttp://localhost:3000/ でアプリが起動します。

```
$ npm start
```

## 参考

https://github.com/expressjs/generator#readme
fprintdで指紋登録時にパスワードが要求される時の対処法

Arch Linuxでfprintdを使っていたら，突然指紋を登録する際に特権を要求されるようになったので調べてなんとかしました。

## 変更部分
```xml:/usr/share/polkit-1/actions/net.reactivated.fprint.device.policy
<action id="net.reactivated.fprint.device.enroll">
  <description>Enroll new fingerprints</description>
  (中略)
  <defaults>
    <allow_any>no</allow_any>
    <allow_inactive>no</allow_inactive>


-   <allow_active>auth_self_keep</allow_active>

+   <allow_active>yes</allow_active>


  </defaults>
```

\<allow_active\>の要素を"auth_self_keep"から"yes"に書き換えてください。

その後，polkitデーモンを再起動(systemd環境なら `systemctl restart polkit.service`)すればパスワードなしで指紋が登録できるようになるはずです。
[Splashtop]mac→win接続時のキー操作について


# まえがき
「Splashtop」を利用してテレワークを実施した際、真っ先に困ったことがあります。
それは利用する側の環境依存の問題、**mac(接続元)とWindows(接続先)のキーボード配列の違い**です。
テレワーク開始当初はこの違いによって次のようなキー操作がわからず、
生産性を著しく低下させる要因となっていました。

- Windowsには存在してmacには存在しないキー
- Windowsとmacのどちらにも存在するが機能が異なるキー

本稿では、**SplashtopでmacからWindowsを利用する際のキー操作**をまとめます。

# 環境
接続元OS：macOS Big Sur 11.0.1
接続先OS：Windows10 Pro 64bit
Splashtop：Splashtop for CACHATTO 1.0.0.2

# キー操作
SplashtopでmacからWindowsを利用する際のキー操作では、
「Windowsで押下したいキー」と「macで押下するキー」が異なります。

| No | winで押下したいキー | macで押下するキー | 使用例 |
|:-:|:--|:--|:--|
| 1 | Alt | Option | アクティブウインドウ切替：Option + Tab |
| 2 | Win | Command | 画面ロック：Command + L |
| 3 | CapsLock | 英数 | CapsLock切替：Shift + 英数 |
| 4 | 半角/全角 | CapsLock | 日本語入力切替：CapsLock |

※上記に該当しないキーに遭遇した場合は、
**スクリーンキーボード(command+Ctrl+O)**を使用するとWindows配列のキーボードで操作が行えます。

# あとがき
本稿では、SplashtopでmacからWindowsを利用する際のキー操作をまとめました。
しかし、このまとめはmacとWindows双方のキー割当がデフォルトの場合に限り適用されます。
このようなキー操作を新たに覚えるのは大変だなと感じる方には、キー割当を変更する方法をオススメします。

自身に合った作業環境を整えて、出社時よりも生産性が向上するテレワークライフを目指しましょう！
要素間でフォーカスを移したときblurイベントとfocusイベントは同期的に実行される

ChromeとFirefoxの最新版で確認済。仕様通りの挙動なのだろうか。

```html
<input name="input1" />
<input name="input2" />
```

```javascript
document.querySelectorAll('input').forEach((input) => {
  input.addEventListener('focus', (e) => {
    console.log(`Focus: ${e.target.name}`);
    setTimeout(() => {
      console.log(`Focus async: ${e.target.name}`);
    }, 0);
  });
  input.addEventListener('blur', (e) => {
    console.log(`Blur: ${e.target.name}`);
    setTimeout(() => {
      console.log(`Blur async: ${e.target.name}`);
    }, 0);
  })
})

```

input1からinput2にフォーカスを移したときのコンソール出力は

```
Blur: input1
Focus: input2
Blur async: input1
Focus async: input2
```

となっていた。

# サンプル
https://plnkr.co/edit/315T56FzA9MzQArg?open=lib%2Fscript.js
[Vue.js] 画像をプレビュー表示する

#今回の題
ユーザーがformに入力した画像をプレビュー表示する機能を実装してみようと思います。

#デモ
https://jsfiddle.net/kuzira/6eo4k391/37/

# 実装
## 1 fileアップロード用のinputを作成。
changeイベントとプレビューを表示するための関数を結びつけ、画像が選択されたら処理が発火するようにする。refを使用してファイルオブジェクトを取得できるように。

```html
<input type="file" ref="image" @change="showPreview">
````

## 2 プレビュー用の関数の作成
`this.$refs.image.files[0]`でユーザーが選択した画像のファイルオブジェクトを取得。
[createObjectURL](https://developer.mozilla.org/ja/docs/Web/API/URL/createObjectURL)を使用してファイルオブジェクトURLを作成。


```js
methods: {
  showPreview: function() {
    if (this.imageUrl) {
      URL.revokeObjectURL(this.imageUrl) 
    }
    const file = this.$refs.image.files[0]
    this.imageUrl = URL.createObjectURL(file)
    }
}
```

>すでにオブジェクト URL が生成されている場合でも、 createObjectURL() を呼び出す度に、新しいオブジェクト URL が生成されます。 必要がなくなったら URL.revokeObjectURL() を呼び出して、それぞれを解放してください。
[createObjectURL](https://developer.mozilla.org/ja/docs/Web/API/URL/createObjectURL)から引用

だそうなので、２回目以降のアップロードの際は最初のif文で既存のものを解放してあげます。

## 3 作成したオブジェクトURLを管理するプロパティの作成。

```js
data: {
  imageUrl: null
}
```

## 4 プレビューを表示するimgタグを配置
オブジェクトURLを管理するプロパティとsrc属性をバインド。
v-showでオブジェクトURが存在する場合のみ表示するように設定しました。

```html
<img :src="imageUrl" v-show="imageUrl" width="100" height="100">
```

# 全体コード
```html
<div id="app">
  <img :src="imageUrl" v-show="imageUrl" width="100" height="100">
  <input type="file" ref="image" @change="showPreview">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
  el: '#app',
  data: {
    imageUrl: null
  },
  methods: {
    showPreview: function() {
      if (this.imageUrl) {
      	URL.revokeObjectURL(this.imageUrl) 
      }
      const file = this.$refs.image.files[0]
      this.imageUrl = URL.createObjectURL(file)
    }
  }
});
</script>
```

以上！！
クラスと構造体の違いってなんだろう？？？

#はじめに
今回は、クラスと構造体の違いを備忘録としてまとめようと思います。

#クラスと構造体
クラスと構造体は`値の受け渡し方法`によって、`値型`と`参照型`の2つに分けることができます。

ここでいう「型」というのはString型やInt型といったものではなくて
`あるオブジェクトをどのように扱うべきかが事前に決まっている仕組み`のことを表します。

そして、この2つの最大の違いは`変更をほかの変数や定数と共有するかどうか`にあります。

・値型は`変更を共有しない` (例: struct, enum)
・参照型は`変更を共有する` （例：class）

実は、値型は構造体だけではなく`列挙型(enum)`も該当します。

#値型
`インスタンスが値への参照ではなく値そのものを表す型`。

つまり、一度、代入したインスタンスは
`再代入を行わない限り不変であり、その値が予測可能`というメリットがあります。

コードで動きを見てみましょう。

色をRGB型で表すColor型という構造体のインスタンスの受け渡しがどうなるのかを見ていきましょう。

まず、struct Colorを定義して3つの変数を用意します。
そして、変数aに先ほど定義したColorを代入します。
その後、変数bにaを代入してaのredの値を変更します。

```swift
struct Color {
   var red: Int
   var blue: Int
   var green: Int
}

var a = Color(red: 255, blue: 0, green: 0) // 変数aに対して赤色を代入
var b = a // 変数bにaを代入

a.red = 0 // aのredを変更して黒色に変更する

// 結果↓

//aは黒になったが...
a.red // 0
a.blue // 0
b.green // 0

//bは赤のままである!
b.red // 255
b.blue // 0
b.green // 0
```
結果を見てみると、aを変更してもbに`影響はありません`。
ここで分かることは、aをいくら変更してもbは影響を受けないということですね。

以上の例えから、値型は`変数・定数への代入や関数への受け渡しのたびに値をコピーしている`ことが分かります。

#参照型
`インスタンスが値への参照を表す型`。

値型と違って`変数・定数への代入時や関数への受け渡し時にはインスタンスのコピーが発生しないので、効率的なインスタンスへの受け渡しができる`というメリットがあります。

例えとして、Int型の値をプロパティとして持つ参照型のクラスを見てみましょう。

変数aに対して定義したIntBoxクラスを代入し、変数bにaを代入します。

変数bにaを代入するという事は、`aが参照しているインスタンスIntBox(value: 1)をbも参照している`
という事になります。

つまり、変数aとbは`同じ1つのインスタンスIntBox(value: 1)を持っている`ということになるんですね。

なので、下記のように変数aのvalueを変更すると、変数bの値も一緒に変わります。

```swift
class IntBox {
  var value: Int

  // 初期化
  init(value: Int) {
    self.value = value
  }
}

var a = IntBox(value: 1) // aはIntBox（value: 1）を参照する
var b = a // bはaと同じインスタンスを参照する

// 両方とも1である
a.value // 1
b.value // 1

// a.valueに対して2を代入すると...
a.value = 2

// b.valueの値も2に変わる！
a.value // 2
b.value // 2
```

#値型と参照型はどう使い分ければいいのか?

じゃあ、実際に開発する際にこの2つをどうやって使い分けるのでしょうか？
私も詳しいことはよく分からないので調べてみました。

色々、調べてみると分かりやすい記事がいくつかあったので載せておきますね↓
[Swiftで構造体とクラスを使い分ける方法(ポイント)](https://swift.tecc0.com/?p=289)
[【Swift】構造体とクラスの使い分け](https://qiita.com/Howasuto/items/57acf33b40dbf4604397)
[Swiftのクラスと構造体の使い分けについてのメモ](https://qiita.com/mini_house/items/22b7b88794b9f8a32381)

#おわり
間違っている部分があれば、遠慮なくコメントして下さると有り難いです。
GitHub Actionsで create-react-appをFirebaseへ自動デプロイする🔥

[OS:windows]　結果を先に。ポエムは最後。

ブラウザでGitHubの該当レポジトリのアクションタブをクリックし、"New workflow"をクリックし.ymlファイルを作成します。

以下.ymlのコード

``` yml:masterDeploy.yml
name: masterDeploy CI

on:
  push:
    branches:
      - master
jobs:
  deploy:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [15.x]
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - name: Install yarn Packages
        run: yarn install
      - name: Build page
        run: yarn build
        env:
          CI: false
      - name: use release
        run: yarn firebase use release --token xxxxx
      - name: deploy to Firebase Hosting
        run: yarn firebase deploy --token xxxxx

```

上から説明します。

```yml
jobs:
  deploy:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [15.x]
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
```
masterbranchがpushされたら実行。
OSはubuntu-latest
Node.jsはver15.xを使用する。
(Node.jsにyarnも入っているみたいので、指定後普通に使用できます)
下記のテンプレをコピペして使った感じなので、まだ完全に理解していません
https://docs.github.com/ja/actions/guides/building-and-testing-nodejs

```yaml
      - name: Install yarn Packages
        run: yarn install
      - name: Build page
        run: yarn build
        env:
          CI: false	
```
yarn installしてビルドします。

現在のプロジェクトは大漁warningなので
CI:falseしないとビルドエラーが発生します。
(CI:trueで通るプロジェクトにはしたいと思っているよ。いつやるかは分からんけど。)

```yml
      - name: use release
        run: yarn firebase use release --token xxxxx
      - name: deploy to Firebase Hosting
        run: yarn firebase deploy --token xxxx
```
yarn でfirebaseを呼び出し実行します。
実行する時、トークンが必要なので
自分のPCのcmd等で```firebase login:ci```を実行してトークンを入手。
xxxxに記入します。
(GitHubActionにシークレット定数入力する設定あるみたいなので、本当はそれ使う方が良いんだと思う)

ブラウザ上のGitHubでActionの動作確認した後、vscode等でプロジェクトをpullします。
このままだとpushする時workflowの権限がないというエラーが出るのでworkflowの権限等を有効にしたtokenを取得します。方法は下記リンク参照
https://docs.github.com/ja/github/authenticating-to-github/creating-a-personal-access-token

windowsだと、タスクバーの検索から資格情報マネージャーを起```git:https://github.com```を現在のユーザー名とパスワードをtokenにすればOK。
これで、ローカルからmastarにプッシュすればアクションが自動で実行されるはず。

---
現在、物語構築支援WEBツールなるものをReact & firebase で開発中です。
開発進捗等twitter：https://twitter.com/dicebook_dev

生活の事情で母艦PCをノートでリモートして開発していたのですが、母艦の電源が突然落ちたりして前々から気になっていたGitHubActionsを試してみました。無料枠もかなりあるので、個人で使用する分には十分。開発と本番環境の切り替えのいい方法が見つかって良かったです。（切り替えられると言ったわけではない。ブランチとAction(具体的にはコピー)を組み合わせた運用で試してみたい）
怪我の功名。ちなみにPCはUSBデバイス全部とグラボを抜いたら安定稼働してる。母艦はRyzen3900Xなので、グラボ抜いたらリモートデスクトップ使えないのかと思ってました。
普通に使えるのね。何かあったときはきついけど、RTX3060を買うまで耐えていきたい。
mat-iconでremove_red_eye outline の出し方


remove_red_eyeさんの白目の出し方がわからず苦戦しました。
[![outline_remove_red_eye_black_18dp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528526/6786b397-2f96-e40f-0702-56905b69cfb9.png)
](https://material.io/resources/icons/?icon=remove_red_eye&style=outline)👆こいつです。

## ダメなやり方
```html
<mat-icon>remove_red_eye_outline</mat-icon>
```

このやり方だと出ないみたいです。infoとかは出るんですけどねえ。
他の`xxx_outline`で、表示されないやつは同じノリでいけるかもしれません。

## 出し方

```diff:index.html
- <link
-  href="https://fonts.googleapis.com/icon?family=Material+Icons"
-  rel="stylesheet"
- /> 
+ <link
+  href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
+  rel="stylesheet"
+ />
```

```html
<mat-icon fontSet="material-icons-outlined">remove_red_eye</mat-icon>
```

## 参考
https://material.io/resources/icons/?icon=remove_red_eye&style=outline
https://github.com/angular/components/issues/11544
[Tableau] PDF へ出力 いろいろ

#こんなときに
わけあって PDF でレポートを出さないといけなくなったとき
Tableau Viewer ライセンスが足りなかったり、Tableau 何それ？ みたいな人が多かったり、など

#環境
* Tableau Desktop : 2020.3.0
* データソース : サンプル - スーパーストア (Tableau に入っているサンプルです。)
* サンプル Viz は以下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177920/dcc1ceb3-52f5-e67d-3959-166a1b951064.png)

#ページ設定

* ここでPDFに出力する際の設定が可能

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177920/9b44732c-cfc8-c345-c7cc-572a43c47837.png)

* PDF上での いろいろ表示・非表示が選択可能

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177920/ecd748b8-fa94-ee78-e566-afbc09c5e0e1.png)

* 凡例を置く場所などレイアウトの調整も可能
* キャプションに Tableau 上での操作説明など Tableau のみでの情報を入れておけば、このチェックボックスで PDF での表示・非表示のコントロールが可能。PDF でのレポートには必要無い記述などはキャプションでコントロールするとGood

  以下の例では、PDF出力後、凡例が下に出力される

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177920/5d2060cc-8731-4a5f-ffc0-47a3c6550693.png)

#PDFへ出力

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177920/6aaaa064-135b-8f5a-5fb7-edc895d43719.png)

#その他

レポートが縦長になってしまうので、ヘッダーを上部へ表示したい、といった場合は、こちらをご参照
[[Tableau] ヘッダー（横軸）の上表示](https://qiita.com/Tak_F/items/d4bbe9460d42f98fa683)



あとは、いろいろ調整して試してください！
1つのMagic Trackpadを複数台のMacで使う

1つのMagic Trackpad やMagic Keyboardを複数台のMacで使いたいことがある。

ただ、これらは複数のMacとペアリングする機能がない。
MacのBluetooth設定からペアリングを切り替えるのも、元のMacのペアリングを解除する必要があるので手軽ではない。また、うまく繋がらないことも多い。

ちょっと面倒だが確実に切り替えられる方法を発見したのでメモ。

## 解決策
つなぎ変えたいMacに対し、数秒だけMagic Trackpadを有線接続する。

Magic Trackpad は、有線接続すると無線のペアリングも改めて接続先のMacに対して行われる。そのため切り替えたのと同じことになる。Magic Keyboardも同様のことができる。

MacのBluetooth設定から切り替える場合うまくつながらないことがあるが、この方法では一度も切り替えに失敗したことはない。

## 確認環境
- MacBook Pro (16-inch 2019)
- macOS Catalina 10.15.7
- Magic Trackpad 2 MJ2R2J/A
- Magic Keyboard (日本語配列)　MLA22J/A
Python 時間帯と実行頻度を指定してスケジュールを実行する方法

指定した時間で実施する、もしくは指定した間隔で実行する説明が多いですが、
時間帯と実行頻度を同時に指定する事例が見当たらなかったため、以下の方法で実装しました。
もっと良い方法があれば、ご教示いただけますと幸いです。

    import datetime
    import time
    import schedule

    # 開始のジョブ
    def startJob():
        # 10分毎に実施するジョブ登録
        schedule.every(10).minutes.do(runJob)
        print('startJob：' + str(datetime.datetime.now()))

    # 実際に実行したいメイン処理
    def runJob():
        print('runJob：' + str(datetime.datetime.now()))

    # 終了のジョブ
    def endJob():
        print('endJob：' + str(datetime.datetime.now()))
        for jobV in schedule.jobs:
            if 'runJob()' in str(jobV):
                # メイン処理のジョブを削除
                schedule.cancel_job(jobV)
                break

    # 開始するジョブと終了するジョブを定義する
    schedule.every().day.at("12:00").do(startJob)
    schedule.every().day.at("13:00").do(endJob)

    while True:
        schedule.run_pending()
        time.sleep(1)
NotesとAccessを比較してみた

HCL NotesユーザーがMicroSoft Accessを3日ほど触ってみたので、その感想を書いてみます。

#設計の違い
設計の差異は、ざっくりと以下の表になります。
文書管理を目的としたデータベースのNotesとデータ管理を目的としたデータベースのAccessは、共通している箇所も多いのですが、根本的な部分で異なっていました。
![hikaku.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/983034/a3c98250-2911-3082-2b81-0def9b88ae80.png)

##レコードと文書
AccessのレコードはNotesでは文書に該当します。
レコードはテーブル/レポート/フォームなど用途に合わせて表示されますが、Notesでは文書＝フォームになります。
Accessではレコードに必要最小限のデータを登録して、用途に応じてクエリでレコードのフィールドを組み合わせて利用しますが、Notesではフォームに詰め込めるだけのデータを詰め込みます。これは、文書（レコード）をリスト形式で表示するNotesのビューとAccessのクエリの違いによるためです。

##クエリとビュー
NotesもAccessもリスト形式で文書（レコード）を表示するとき、条件による抽出をすることができます。しかし、Accessがクエリに計算用の列を追加して、その中でデータの計算処理をした結果を表示させることに対して、Notesでは計算用の列を追加することは推奨されていません。
理由は大量のデータがある場合に、Notesではリスト形式で一覧を表示する時間がかかるためで、計算が必要な場合はフォームで行っておくのが作法となっています。
また、Notesは文書管理データベースであるため、ビューはスレッド形式のビュー表示やアイコン表示などが可能であり、Accessのクエリ―とよりはOutlookの画面に近いです。
![setumei.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/983034/fa08885c-1755-0eae-238a-1288c9209ea8.png)

##エージェント
Notesはクライアントサーバーモデルというシステム設計になるため、サーバー側でマクロをJCLのように実行することができます。Accessはローカルで利用することが前提のデータベースだと思われるので、このような機能が標準では実装されていないようです。

##コーディング
Notesは文書管理データベースになるため、文書をどのように取得するかという方法について多彩な方法があります。AccessのRecordsetは、NotesではDocumentCollectionであったりNotesViewであったり、サーバーサイドで処理するかユーザー操作で処理するかでSessionになったり、UIWorkSpaceになったりで、用途に応じた書き分けが必要になります。（クラスの上下関係が明確なので、きれいなコードは書きやすいと思います。）
また、Notesであれば親の顔よりも見ることになる以下の構文とAccessは無縁です（多分）。

````VB
  Set doc = dc.GetFirstDocument()
  While Not(doc Is Nothing)
    "処理の内容"
    Set doc = dc.GetNextDocument(doc)
  Wend
````

##最後に
NotesからExcel、ExcelからNotesという事例は多いが、Accessとのデータ連携に関しては事例を聞いたことがなかったが、親和性はNotesとExcelのほうがあるのではないかと、Accessを短い時間しか使っていないが実感しています。
C++のラムダ式で再帰呼び出し[追記：処理系依存のため非推奨]

#(追記：2021/01/19 20:51) <font color="Red">注意！！！</font>
当記事のラムダ式の再帰処理は**特定の環境でしか再現できない**ことがわかりました。
再現できる環境であっても移植性の問題や修正される可能性もありますので、**お勧めしません**。
コメント欄にてご指摘くださった@kazatsuyu様、ありがとうございました。

ラムダ式の再帰処理については、先駆者様の記事 [C++ : ラムダ式のみでの再帰文 - Qiita](https://qiita.com/niwatori/items/79cb22e5678b46961797) 等をご覧ください。

**[追記：2021/01/19 23:33]**
他所様の記事に丸投げなのもどうかと思ったので、Wandbox(gcc, clang)で動作するコードを置いておきます。(要C++14以上)
先駆者様の記事やコメントで触れられていた、第一引数に自分自身を渡す手法です。やっぱり素直に実装するのが一番ですね...。

```cpp
#include <iostream>

auto factrial = [](auto f, size_t x) -> size_t {
	return x <= 1 ? 1 : x * f(f, x - 1);
};

int main(int, char**)
{
    std::cout << factrial(factrial, 10) << std::endl;
    return 0;
}
```

**(以下、元記事)**

#はじめに
C++の勉強中に、ふと「ラムダ式で再帰呼び出しってどうするんだ？」と思ったので、やり方を調べてみました。
この記事では、とりあえず再帰関数の王道(?)である自然数の階乗を計算するラムダ式を実装してみることにします。

- 環境
 - Windows 10 Home
 - Microsoft Visual Studio Community 2019 (std:c++latest)

#まずは普通の関数で書いてみる

```cpp
size_t factrial(size_t x) {
    return x <= 1 ? 1 : x * factrial(--x);
}
```
書き方は色々あると思いますが、今回は条件演算子を用いることにしました。
[Wikipedia](https://ja.wikipedia.org/wiki/%E9%9A%8E%E4%B9%97)によると**0! = 1**らしいので、これで一応は問題ないかと思います。

#ラムダ式で書いてみる
次は先ほどの関数をラムダ式に書き直してみます。とりあえず直感的に書いたのが以下のコードです。

```cpp
int main(int, char**) {
    auto factrial = [](size_t x) -> size_t {
        return x <= 1 ? 1 : x * factrial(--x);  //Error!
    };

    auto result = factrial(10);
}
```
しかし、このコードではコンパイルを通りません。
原因は、ラムダ式内で**factrial(size_t)**を呼び出そうとしてしまっていることです。
ここでは、ラムダ式が関数オブジェクトの定義であり、**factrial**がその関数オブジェクト型の一時変数ですから、ラムダ式内で**factrial**が呼び出せないのは、よくよく考えれば当然のことでした。

では、ラムダ式の中で自身を呼び出すためには、どのように記述したら良いでしょうか。
ここで、そもそもC++におけるラムダ式とは何か？ということを[cpprefjp](https://cpprefjp.github.io/lang/cpp11/lambda_expressions.html)で確認してみると、その中に以下のようなことが書いてありました。

>ここでは、\[](int a, int b) { return a + b; }というコードがラムダ式に当たる。(中略)
>このラムダ式によって、その場に以下のような関数オブジェクトが定義される：
>
>```cpp
>struct F {
>   auto operator()(int a, int b) const -> decltype(a + b)
>   {
>       return a + b;
>   }
};
>```

つまり、ラムダ式はoperator()をオーバーロードした関数オブジェクトを作る糖衣構文と考えてよさそうです。
ということは、先ほどのコードは以下のように書き換えられます。

```cpp
int main(int, char**) {
    auto factrial = [](size_t x) -> size_t {
        return x <= 1 ? 1 : x * operator()(--x);
    };

    auto result = factrial(10);
}
```

自身を呼び出す箇所で**operator()(size_t)**を呼び出しています。
このコードであればコンパイルも通り、ラムダ式による再帰処理が実装できるようです。
ただ、自分で書く分にはいいですが、他人のコードを見ているときに急にoperator()が出てくると「何だこれ？」となりそうだなとも思いますが...。

#おわりに

ラムダ式の再帰処理については、[C++ : ラムダ式のみでの再帰文 - Qiita](https://qiita.com/niwatori/items/79cb22e5678b46961797)くらいしか関連記事が見つけられず、そちらでもoperator()については触れられていなかったので、初めての投稿のテーマにしてみました。
記事内に間違い等あれば、コメント頂けると幸いです。
sedコマンド で、-iオプションと-eオプションを付けたときに不要なファイルができるバグ


問題
-
例えば以下を実行すると

```bash
sed -i -e 's/# gem "rails"/gem "rails"/' ./Gemfile

```

`Gemfile-e`という名前の不要なファイルが作成されてしまうんですね。


解決策
-
`-i`オプションの後ろに、`""`を入れます。

```bash
sed -i "" -e 's/# gem "rails"/gem "rails"/' ./Gemfile

```
VS Code でファイル検索したあとに、検索結果の一覧にfocusするショートカット

VS Codeの数あるショートカットから、知られていなさそうだけど、自分が便利に使っているものを紹介します。

よく使う機能の中に、workspace内の全ファイルで検索があるのではないでしょうか？私は息を吸うように、`⇧⌘F`で全文検索しています。

`⇧⌘F`の検索結果となる該当ファイルを開く時、キーボードから手を離さず開きたいのですが、みなさんはどうしているでしょうか？

### Focus Next Search Result
デフォルトのkey bindingを眺めると、`F4`を押すことで検索結果のファイルを開けることがわかりました。
https://code.visualstudio.com/docs/getstarted/keybindings#_search

次々と検索結果のファイルを開きたい場合は、このショートカットは適していそうですが、自分の場合は検索結果の一覧で、開くファイルを目で確認してから開きたいというモチベーションがありました。検索結果の一覧へfocusできるショートカットがあれば、やりたいことが実現できそうです。

### Search: Focus List
ということで、探してみるとズバリ `Search: Focus List` というCommandがありました。https://github.com/microsoft/vscode/issues/53696

![image](https://user-images.githubusercontent.com/2225257/42654425-344d58ca-8636-11e8-8154-113706138046.gif)


私はこのCommandにショートカットを割り当て

- 検索後にショートカットで、検索結果一覧へfocus
- 開きたいファイルを一覧から目星をつけて、Enterでそのファイルへfocus移動
- もう一度、検索結果一覧に戻りたいときに、ショートカットで検索結果一覧へfocus

このような形で検索ライフを過ごしています。他に便利な方法があれば教えてください。
pandasひらがな→カタカナ変換

pandasを利用してCSVを編集する場合、特定の列全体の値を変換したいです。
ネット上で調べて半角文字→全角文字へ変更する処理がありますが、ひらがな→カタカナ変換する処理が見つかりませんでした。
changeKanaのメソッドを作って、maketrans経由でchangeKanaを呼ぶように実装しました。

    df = pandas.read_csv(file, encoding='cp932', engine='python', dtype=object)

    半角→全角
    df[列名] = df[列名].str.translate(str.maketrans({chr(0x0021 + i): chr(0xFF01 + i) for i in range(94)}))
    ひらがな→カタカナ
    df[列名] = df[列名].str.translate(str.maketrans({chr(x):changeKana(chr(x)) for x in range(12353, 12436)}))

    # パターン1:半角→全角
    # パターン2:ひらがな→カタカナ
    def changeKana(in_Word):
        # 本当は半角→全角の変更は不要
        changeWord = jaconv.h2z(in_Word)
        changeWord = jaconv.hira2kata(changeWord)

        return changeWord
[Tableau] ヘッダー（横軸）の上表示

#こんなときに
わけあってスクロールが入ってしまう縦に長い Viz を作るケースがあり、ヘッダーをスクロール前に見せたいとき（上部にできれば見せたい）

#完成イメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177920/1d7e6734-f6fa-a75d-2477-c68e2008dbfc.png)


#用意するもの
* データソース : サンプル - スーパーストア (Tableau に入っているサンプルです。)

#環境
* Tableau Desktop 2020.3.0

#準備
ここまで作ってください。

* 列にカテゴリ、サブカテゴリ
* 行に売上合計

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177920/302421b2-def1-bdd4-06ad-bcce20bedd33.png)

#ここから手順です

### Step1
 * 計算フィールドの作成
 * 中身は[サブカテゴリ] のみ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177920/338b638d-e53c-3418-9cc6-e42527098ffb.png)

### Step2
 * 列に追加

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177920/e169ded9-6708-493b-8242-9baaec4c9bdf.png)

### Step3
* 列のフィールドラベルの非表示

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177920/b1088976-3e8a-a9c3-4bcc-784a97543a30.png)

### Step4

* 作成した[サブカテゴリ2]のヘッダー表示のチェックを外す

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177920/fabe6f54-0d93-e245-c002-098bce103089.png)

### 完成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177920/fbdf1e90-b920-7ec8-f9b0-d3bc7ac436f9.png)


おつかれさまでした。
社会人がサブスキルとしてプログラミングを学ぶならpython一択の理由

# はじめに
私は、プログラミングで生計を立てようとは思っていません。
電気系とはあまり関係の無い仕事に就いています。
ある程度、本職のスキルを極めたら　サブスキルを学ぶ事で
より幅を持たせることができるのではないだろうか？

そう考えると　プログラミングは　サブスキルとしても
とても有用な技能の一つとです。
なぜなら、現代においては　ほとんどの仕事でコンピュータと
縁があるからです。

　しかし、プログラミングを始めると言っても　プログラミング言語は
たくさんあります。それぞれ文法も単語もバラバラなので　どの言語を
習得するか非常に迷います。
特に社会人には時間がありません。

私はpythonを選びました。
同じような悩みを持つ人の参考になればいいなと思って　記事にしました。

※　一部、知識が浅く間違った表現があるかもしれません。
私の主観に基づいた判断・感想で書きました。
「違う！」という方がおられましたら、ご容赦ください。


# 前提となる条件
　社会人がサブスキルとして　趣味と実益を兼ねて学ぶので、
以下の条件を定義した。会社でも家でも使えるって条件です。

一般的に会社に普及しているWindowsのアプリが作成できる。
出来れば、MACでも動く事もできる。
ipad/iphoneやandroidでも　動く。
Linuxは、趣味や専門的な部署でなければあまり無さそうなので対象外。
（個人的には趣味でいじってみたいけど。。。）

office製品の操作やRPA的な事もできる。
gameも簡単なものなら作れる。

と、考えました。


# いろいろなプログラミング言語の長所・短所
python
 良い点：今流行っている。（流行っているという事は皆がいろいろな記事を出してくれるという事）
　　　　可読性が高く、学習コストが低い。
　　　　ライブラリが豊富で、エクセルや他のソフトとも親和性が高い。
　　　　Windows・ＭＡＣ・ipad/iphone・androidのどれでも動く。
　　　　商業利用でも無料。
　悪い点：動作が遅い傾向がある。

VisialBasic
 良い点：Excel等と親和性が高い。
　　　　Excelに付随しているので、インストールとか不要。すぐに始められる。
　　　　学習コストが低め。
　　　　本や記事が豊富。
　　　　商業利用でも無料。
　悪い点：動作が遅い傾向がある。
　　　　　Excel等office製品以外との連携が苦手。

C言語
　良い点：何でもできる。
　悪い点：学習コストが極めて高い。
　　　　　開発ツールが~~有料。~~ (VSC等無料ツールが使えるようです。）
　　　　　基本的にどのOSでも動くが、os毎にプログラムを変える必要がある。

Swift
　良い点：新しい言語なので、機能が豊富。
　　　　　学習コストはそこそこ高い。
　悪い点：基本的にapple用。Windowsアプリも2020/9月から開発可能になったみたい。
　　　　　ただ、新しい分　Windowsアプリの制作に関するドキュメントが少なそう。
　　　　　androidでは動作するのか　不明。

JavaScript
　良い点：習得難易度が低め。
　　　　　web作成には欠かせない。
　　　　　どんなosでも動く。ブラウザ無くても、サーバで動くものもあるようです。
　　　　　商業利用でも無料。
　悪い点：基本的にインタネットブラウザ上でしか動かない。
　　　　　Excelやメールソフトを動かす様な場合には使えない。

Java
　良い点：最も人気が高い。つまり、ドキュメントや記事が多い。
　　　　　どんなosでも、ほぼなんでもできる。
　悪い点：習得難易度が高い。
　　　　　少し、時代遅れ感が出てきた。

Ruby
　良い点：日本人が作ったので　ドキュメントも文法もわかりやすい。
　　　　　学習コストが非常に低い。
　　　　　web系に強い。
　悪い点：人によって異なる記述でコードが書けるので、混乱しそう。



# 選考過程
今回は「サブスキル」としてプログラミングを学びます。
つまり、汎用性が高い事が重要です。
様々なosで使用できる。様々なアプリをコントロールできる（RPAとかも将来視野に入れたい）。
そして、本職の学習ではない為、コストは少ない方が良い。（お金・時間）
まずは、小さなプログラムが簡単に　少し　動くまでに、どれだけ時間がかかるか？が重要です。

逆に、アプリケーションが限られていたり、web限定だと　用途が限られる為不向きです。


上記から考えると、

VisialBasic；基本的にoffice製品限定なので、落選。
C言語：学習コストが高いので、落選。
Swift：学習コストが高いので、落選。
JavaScript：web専用では、困るので落選。
Java：学習コストが高いので、落選。

となりました。
残るは、python と　Ruby　です。
共に、学習コストが低く　汎用性もあります。

個人的には　国産言語のRubyを選びたい気もします。
しかし、今　世の中で中で注目を集めているのはどちらか？といわれれば、
pythonに軍配が上がります。
しかも、**ビジネス書や日経新聞等でもpythonはちょくちょく名前が出てきます。**
プログラミングを学んでいない（学ぶ気もない）会社の上司様方も　「プログラミング？
うーんITだね。DXだね。これからは必要だよね。よくわからないけど、必要そうだね。」
って　感じの印象は残っていそうです。
残念ながら　Rubyは、IT業界に近い方々にしか知られていません。

つまり！**（何も知らない系の　PCに疎い系の）上司とかお偉いさんに　アピールできる！！**
のです。
社会人には、上司へのアピールは重要です。
仮に　プログラミングを途中で挫折してもOKです。
アピールした事で　新しい仕事が廻ってくるかもしれませんが、それはそれで
業務範囲が広くなるのですから　チャンスです。
広くなった業務範囲の分だけ、給料や権限を挙げてもらいましょう！


# 結論
以上の選考を経て　サブスキルとして社会人がプログラミングを学ぶなら、python　一択。
と、なりました。

しかし、何かやりたいことが決まっている方は　それに向いた言語を選択しましょう。

会社で　本業以外に広報としてwebページ作成してとか言われて学習するような場合は、
サブスキルでは無くて本職スキルですから、pythonじゃなくてJavaScriptとかが
選択肢になるかもしれません。

　私の場合は　あくまで　サブスキル。何かやりたい事があったわけではなく、
何ができるの？的に　学習を開始しています。
後で　何かやりたくなった時に　ある程度なんでもできる言語という点が重要でした。

ちなみに、pythonは　Windows・MAC・Linuxでexe化もできます。iphone・ipadでも
pythonistaとか購入すればアプリの様に動かせます。
【Laravel】artisanコマンドでやりたいこと、ここで見つかる

## はじめに
**「この記事を見れば<font color="red">お目当てのartisanコマンド</font>が（だいたい）全て見つかる！」**っていう記事です。

以前書いた**[Gitでやりたいこと、ここで見つかる](https://qiita.com/shimotaroo/items/b73d896ace10894fd290)**のartisanコマンドバージョンです。

僕自身が**「あのartisanコマンドどう書くんだっけ？」**ってなった時に見返す用でもありますのでストックしておくと便利かなと思いますw

※この記事では全てのartisanコマンドを網羅したわけではありません。


## .envのAPP_ENVを表示

```
$ php artisan env
```

## APP_KEYを作成

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

## Laravelのバージョン確認

```
$ php artisan --version
```

## Laravelの内蔵サーバーを起動（PHPのビルドインサーバー）

```
$ php artisan serve
```

## DBとの接続状況を確認
```
$ php artisan migrate:status
```

## コントローラー作成
```
$ php artisan make:controller {任意の名前}Controller
```

## コントローラー作成（主要7アクションを自動的に生成）
```
$ php artisan make:controller {任意の名前}Controller --resource
```

## シングルアクションコントローラー作成
```
$ php artisan make:controller {任意の名前}Controller --invokable
```

## マイグレーションファイル作成（テーブル作成用）
```
$ php artisan make:migration create_{テーブル名}_table —-create={テーブル名}
```

## マイグレーションファイル作成（カラム追加用）
```
$ php artisan make:migration add_column_{テーブル名}_table —-table={テーブル名}
```
※ファイル名の付け方には個人差あり
※これがデファクトスタンダードではない

## マイグレーション実行
```
$ php artisan migrate 
```

## 現在のテーブルを全削除してマイグレーションやり直し
```
 $ php artisan migrate:fresh
```

## データベース全体を作り直す

```
$ php artisan migrate:refresh
```

## マイグレーション実行＆シーディング実行
```
$ php artisan migrate --seed
```

## マイグレーションロールバック（最後に実行したマイグレーションを元に戻す）
```
$ php artisan migrate:rollback
```

## 全てのマイグレーションをロールバックする
```
$ php artisan migrate:reset
```

## シーダーファイル作成

```
$ php artisan make:seeder {任意の名前}Seeder
```
※`{任意の名前}TableSeeder`にする場合もアリ

## シーディング実行
```
$ php artisan db:seed
```

## 特定のシーダーファイルを実行
```
$ php artisan db:seed --class={実行するシーダーファイル}
```

## モデル作成

```
$ php artisan make:model {任意の名前}
```
（例）テーブル名が`users`なら{任意の名前}は`User`にする

## モデルとファクトリーを同時に作る

```
$ php artisan make:model {任意の名前} —-factory
```
（例）テーブル名が`users`なら{任意の名前}は`User`にする

## ルーティング一覧を表示
```
$ php artisan route:list
```

## フォームリクエスト作成（バリデーションに使用）
```
$ php artisan make:request {任意の名前}Request 
```

## ポリシー作成
```
$ php artisan make:policy {任意の名前}Policy --model=Article
```

## 通知クラス作成
```
$ php artisan make:notification {任意の名前}Notification
```

## ファクトリー作成（モデルと対応させる）
```
$ php artisan make:factory {モデル名}Factory —-model={モデル名}
```

## テスト作成
```
$ php artisan make:test {任意の名前}ControllerTest
```

## tinker起動
```
$ php artisan tinker
```

## さいごに
順次追記予定です
【Vue.js】slotタグを使ってhtmlタグを親コンポーネントで定義し、子コンポーネントに渡す【slot】

#参考
Udemy参考動画：https://www.udemy.com/course/vue-js-complete-guide/
講師 : よしぴー(Yoshipi)さん

__Vue.js__で__slot__タグを使って__htmlタグを親コンポーネントで定義__する方法をご紹介します。



#通常
子コンポーネント : __ChildComponent__

```Vue
//ChildComponent

<template>
  <div>
    <p>{{ title }}</p>
  </div>
</template>


<script>
export default {
  data() {
    return {
      title,
    };
  }
};
</script>
```

親コンポーネント __App.Vue__

```Vue
//App.Vue

<template>
  <div>
    <ChildComponent :title="タイトル"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from "./components/ChildComponent.vue";

export default {
  components: {
    ChildComponent,
  },  
};
</script>
```

##結果

```
タイトル
```

__値__や__プロパティ__を渡し、__タグ__は__子コンポーネント__で定義する。

#スロット
* タグを__親コンポーネント__で__定義__できる
* 対応 : ver2.6.0~


子コンポーネント : __ChildComponent__

```Vue
//ChildComponent

<template>
  <div>
    <slot></slot>
  </div>
</template>
```

親コンポーネント : __App.Vue__

```Vue
//App.Vue

<template>
  <div>
    <ChildComponent>
　　　 <template>
          <p>タイトル</p>
      <template>
    </ChildComponent>
  </div>
</template>
```
##結果

```
タイトル
```

コンポーネント内の__templateタグ__と子コンポーネントの__slotタグが対応__

#デフォルト
__slotの数__だけ__templateが生成__されるため、__slotタグを複数置く__と同じ__内容が連続__して表示される

デフォルトの仕様ということで__フォールバックコンテンツ__と呼ばれる。

例えば、
子コンポーネント : __ChildComponent__

```Vue
//ChildComponent

<template>
  <div>
    <slot></slot>
    <slot></slot>
    <slot></slot>
    <slot></slot>
  </div>
</template>
```

##結果

```
タイトル
タイトル
タイトル
タイトル
```

#スコープ
* インスタンス内（親コンポーネント内）
* CSSは例外 : 親コンポーネントのスタイルが優先的に働く


#名前付きslot
* __slot__ : name属性（子コンポーネント）
* __template__ : v-slot（親コンポーネント）

__name__の値と__v-slot__の引数が__対応__
注意：nameは__値__、v-slotは__引数__

子コンポーネント : __ChildComponent__

```Vue
//ChildComponent

<template>
  <div>
    <slot name="title"></slot>
    <slot name="name"></slot>
  </div>
</template>
```

親コンポーネント : __App.Vue__

 ```Vue
//App.Vue

<template>
  <div>
    <ChildComponent>
　　　 <template v-slot:title>
          <p>タイトル</p>
      <template>
      <template v-slot:name>
          <p>太郎</p>
      <template>
    </ChildComponent>
  </div>
</template>
```

##結果

```
タイトル
太郎
```