OmniAICreator/Qiita-1.07M huggingface dataset:
enebularで湯婆婆を実装してみる

# はじめに
原作者(元ネタ)様の記事：[Javaで湯婆婆を実装してみる - Qiita](https://qiita.com/Nemesis/items/c7192a7c510788d2cba2)

何番煎じか分かりませんが、
執筆時点(2020/11/13)でenebularで実装して記事にされている方がいなかったので、実装してみました。

# 1. 湯婆婆ノードを追加する
右上のハンバーガーメニューから「パレットの管理」をクリックします。

![s100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/bfd71859-4549-c793-9621-9393a10e5fdc.png)

「ノードを追加」タブをクリックして、検索窓に `yubaba` と入力します。出てきた `node-red-contrib-yubaba` のノードを追加します。

* [node-red-contrib-yubaba](https://flows.nodered.org/node/node-red-contrib-yubaba)
 
![s101.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/10afec45-786e-ace9-37c1-b1de72a3e51a.png)

# 2. ノードを配置する
左側メニューの共通カテゴリにある `inject` ノードをドラッグ・アンド・ドロップします。ダブルクリックしてプロパティ画面を表示してから、ペイロード部分のプルダウンメニューを文字列に選択してお好きな名前を入力します。

![s102.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/ef784d6d-38fd-01b5-995b-eea4594c2a95.png)

湯婆婆カテゴリにある `湯婆婆` ノードをドラッグ・アンド・ドロップして、先の `inject` ノードとつなげます。

![s103.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/97507437-436c-558e-df5b-5972e1a89592.png)

出力カテゴリにある `play audio` ノードをドラッグ・アンド・ドロップして、 `湯婆婆` ノードとつなげます。

![s104.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/30918248-4b1f-7116-58e1-6ac533d7d4f3.png)

# 出力結果
デバッグノードとつないで、デプロイして、実行するとスピーカーから音声が流れます。

![s105.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/d5a86964-9a4f-700c-9579-ce630dea4dd9.png)

# ノード例
```json
[{"id":"6ab1c02a.d3b3f","type":"tab","label":"湯婆婆","disabled":false,"info":""},{"id":"babf54bc.40daf8","type":"inject","z":"6ab1c02a.d3b3f","name":"","topic":"","payload":"山田太郎","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":120,"y":140,"wires":[["667741b0.56de2"]]},{"id":"667741b0.56de2","type":"湯婆婆","z":"6ab1c02a.d3b3f","name":"","x":300,"y":140,"wires":[["ed99e4b9.b54ac8"]]},{"id":"ed99e4b9.b54ac8","type":"play audio","z":"6ab1c02a.d3b3f","name":"","voice":"","x":490,"y":140,"wires":[]}]
```
【流出解析】シリーズ　第5回　実蒸発散量の推定―補完法―

# 移転のお知らせ

こちらの記事は下記のサイトに移転しました。

> [NNテックブログ](https://nnhiroba.xsrv.jp/nnTechBlog/Article/Article?ID=37)
[PHP] Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? という警告

##どんな警告か？
この警告は、forループ内のswitch文で「**continue**」を記述した場合に表示されます。
switch文内部では「**continue**」が「**break**」と同じ動作となるそう。
以下、公式リファレンスを引用

>注意: PHP では、continue の動作に関しては switch 文がループ構造とみなされます。 
>continue に引数を渡さなかった場合の動きは break と同じですが、間違いの元なので警告が生成されます。
>switch がループ内にある場合、 continue 2 とすると、外側のループの次回の処理から続行します。

引用元：[PHP公式リファレンス](https://www.php.net/manual/ja/control-structures.continue.php)


##じゃあどうすればいいの？
forループ内のswitch文で「**continue**」を使用したい場合、
「**<font color="OrangeRed">continue 2</font>**」と指定します。
これで、「**<font color="OrangeRed">continue 2</font>**」は、switch文の外にあるforループを対象とします。
以下、参考コード

```example.php
for ($i = 0; $i < 10; $i++) {
    switch (true) {
        case $i % 2 == 0 :
            // 偶数のときだけ実行する処理
            break;
        default:
            // 奇数のときはスキップされる
            continue 2;
    }
}
```

以上です。
Anaconda 仮想環境が作れなくなった時

## はじめに
Anaconda Navigatorを使って仮想環境の作成や削除を試していたら、仮想環境作成ができなくなってしまった。
直し方を忘れそうなのでメモとして残しておく。

　※Anaconda環境における仮想環境の作成は [**こちら**](https://qiita.com/smiler5617/items/d7dbe2e4dd4fda278177) を参考に

## 実行環境
【ローカルPC環境-OS】
　　・Windows 10 Pro　

【ソフト・パッケージ】
　　・Anaconda3-2020.07-Windows-x86_64

## 内容

作成した仮想環境を『Remove』ボタンより実行すると、Navigator画面上からは表示が消えるが、同じ名前でまた仮想環境を作ろうとすると作れない。
![Qiita-no020_img01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654767/c2f7ee5f-e7d2-eefe-520b-25aafd267580.jpeg)


原因としては、Navigatorからの表示が消えただけで、仮想環境ディレクトリ自体は完全に削除されていないためだった。
デフォルト通りの設定でインストールをしていれば、`ユーザーディレクトリ\anaconda3\envs` の中に作成した仮想環境名のディレクトリが残っているので、それを削除すれば再度作成が可能となる。
　※Navigatorを一旦落とさないとダメかも
Nuxt.js【@nuxtjs/pwa】開発環境(localhost)でworkboxを試す方法

Nuxt.jsのpwa用ライブラリ【@nuxtjs/pwa】にて、開発環境（localhost）でworkboxを試す方法になります。

## nuxt.config.jsにオプションを追加

```js:nuxt.config.js
pwa: {
  workbox: {
    /* workbox options */
    dev: true /* 追記 */
  }
}
```
`nuxt.config.js`のworkboxの設定に`dev: true`を追記することで、開発環境でworkboxを試すことができます。

## workbox設定例

```js:nuxt.config.js
pwa: {
    workbox: {
      /* workbox options */
      dev: true 
      skipWaiting: true,
      runtimeCaching: [
        {
          urlPattern: 'https://demo/.*', //url以下
          handler: 'StaleWhileRevalidate',
          strategyOptions: {
            cacheName: 'assets',
            cacheExpiration: {
              maxAgeSeconds: 72 * 60 * 60
            },
            cacheableResponse: {
              statuses: [200]
            }
          }
        },
        {
          urlPattern: 'https://demo/.*.(png|gif|jpg|jpeg|svg)', //特定の拡張子
          handler: 'StaleWhileRevalidate',
          strategyOptions: {
            cacheName: 'assets',
            cacheExpiration: {
              maxAgeSeconds: 72 * 60 * 60
            },
            cacheableResponse: {
              statuses: [200]
            }
          }
        },
        {
          urlPattern: '.*api.*', //apiのリクエスト
          handler: 'StaleWhileRevalidate',
          strategyOptions: {
            cacheName: 'api',
            cacheExpiration: {
              maxAgeSeconds: 72 * 60 * 60
            },
            cacheableResponse: {
              statuses: [200]
            }
          }
        }
      ]
    }
  }

```
## 補足
@nuxtjs/pwaのバージョンを`"@nuxtjs/pwa": "3.2.2"`に上げたら設定の仕方が変わっていたので、下記にまとめました。
[Nuxt.js【@nuxtjs/pwa】キャッシュの設定メモ](https://qiita.com/TK-C/items/56fd03de8f463e938d9f)
cloudfront とは何が出来るの？

## 勉強前イメージ

webでよく使われる感じ。
一番レイテンシーの低いサーバにアクセスが行く

## 調査

### cloudfrontとは？

AWSのCDNのサービスです。

### そもそもCDNとはなに？

CDNとはコンテンツデリバリーネットワークの略で、負荷分散をするためのコンテンツを配信するためだけのネットワークのことを指します。
単にファイル(画像やZIPファイル等)をダウンロード配信するための技術になります。

CDNはwebサーバを並べるだけとは違い、
アクセス元から見て一番近くにあるサーバを自動で選択してダウンロードさせることで表示が高速化されます。
アメリカの赤丸の人は一番近いキャッシュサーバにアクセスすることで、ロシアのキャッシュサーバにアクセスするより高速な通信が可能になります。

![CDNUntitled Diagram.drawio - diagrams.net - Google Ch.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/6d637646-7879-b5c8-18a8-52bc48b69d19.png)

CDNのキャッシュサーバは、アクセスされたキャッシュサーバにキャッシュがなかったらオリジンサーバ(稼働している元のwebサーバ)にアクセスを行い、
データを取ってくることで、webサーバのようにすべてのサーバに同じデータを置かなくても良いのです。

### cloudfrontの特徴

- 高パフォーマンス
	- 世界中の主要都市のほとんどに設置されているエッジロケーションを介してコンテンツ配信を行うことで高速な通信が可能になります。

- 可用性の向上
	- エッジロケーションを通してコンテンツ配信を行うことにより、オリジンサーバーのワークロードを減らし、アプリケーションの可用性を高めることができます。

- セキュリティ
	- SSL機能がデフォルトで有効となっており、コンテンツに対するアクセス制限を設けたり、AWSの各種機能と連携することで対策することが可能です。

- コスト削減
	- 従量課金制で、使用した分のみの支払いとなります。


## 勉強後イメージ

めちゃくちゃアクセスくる静的webサーバとかだったらめっちゃ使えるって感じ？
自分で設定してみたいなぁ...あんまり資料見ただけじゃしっくりこない

## 参考

- [Amazon CloudFront は何ができるのか？ AWSを使う上で知っておきたい知識を解説](https://tracpath.com/works/cloud/amazon-cloudfront/)
- [第１回 ＣＤＮ の 仕組み （CDNはどんな技術で何が出来るのか）](https://blog.redbox.ne.jp/what-is-cdn.html)
- [Amazon CloudFront 概要](https://qiita.com/KWS68810828/items/7a81d0104b46cdd0d3d2)
- [Amazon CloudFront を利用するメリットとS3との違いについて](https://www.acrovision.jp/service/aws/?p=1441)
【GitHub】リモートmasterブランチを過去の情報にすり替える方法（個人開発のみ推奨）

備忘録です。
リモートmasterブランチを過去の状態に直し復活させることを実現します。

#経緯
デプロイ時に全く予測のできないエラーと遭遇し、ログを読み仮説・検証をしても解決されませんでした。全くエラーの原因が予想できなかったため、エラーが起きる直前に戻したいと思いました。しかし、個人開発ということもあり、簡単にたくさんのマージしてしまった（慎重に行うべきでした、反省です）ので、masterブランチを過去の状態に戻すしか方法が考えられませんでした。

#注意
この方法は個人開発のみ推奨です。チームで開発の場合は推奨しません。
(そもそも過去の情報にすり替えることは推奨されません。)←ここ重要！

また、マイグレーションファイル（あるいはschemaやその他）の情報とのズレに気をつけてください。テスト環境でデータベースが壊れた場合や、syntax errorが起きて手に負えなくなった場合、database.yml等を修正して、他のデータベースを作成して、そこで保存する様にしてください。

私自身約2ヶ月前にプログラミングの勉強を始めたばかりの初学者です。
実行した行動を思い出しながら書いているため、内容に誤りがあると思いますので、今後内容修正するかもしれませんが、ご理解の程よろしくお願いいたします。

#やり方
GitHubの画面から、Settings→Branchesをクリックし、Default Branchの設定画面に飛ぶ。
![スクリーンショット 2020-11-13 16.16.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/770386/ee87740f-7d4f-e09a-e888-f904f464cb3c.png)


デフォルトのブランチ（masterブランチ）がセットされた状態では削除できないため、masterブランチ以外を選択。なお、ここでは新しくmasterとして扱いたいコードを持つブランチを選択しUpdateすると良いでしょう。

そして、以下のコマンドを実行し、元々のmasterを削除する。

```terminal
% git push origin :master
```


Github Desktop上で、元々のmasterブランチを選択した状態で以下のコマンドを実行し、任意の名前に変える。
（元々のmasterはもう必要ないので、本当にテキトーな名前で大丈夫です。）

```teminal
% git branch -m ＜任意の名前＞
```


次に、masterブランチにしたい情報を持つブランチをCurrent Branchとしてセットした状態で、以下のコマンドを実行する。

```teminal
% git branch -m master
```

新しいmasterブランチとしてプッシュする

```terminal
% git push origin master 
```

これで、過去に作ったブランチの情報を元に、新しいmasterを生成することができました。

リモートリポジトリを確認すると
![スクリーンショット 2020-11-13 16.59.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/770386/a00857a9-a30d-b19e-f5fc-91b339d6a5f5.png)


masterの元となるブランチと、新しく作ったmasterブランチの情報が等しくなりました。
再度Default Branchの設定画面で、ブランチを新しいmasterに切り替えておくおことを忘れない様にしましょう。


# 新しいmasterのFetchとPushについて

今回の様な形で新しくmasterを作った場合は、通常通りの方法でPushができなくなります。
masterを最新の状態にする場合は、必ず新しいブランチを用いて下記の手順を踏んでください。


① masterブランチを選んだ状態で、Choose a branch to merge into master

![スクリーンショット 2020-11-13 18.24.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/770386/0b5e68ac-68a0-494a-4ea5-f2e0e5ee28a0.png)

② 更新した最新のブランチを選択して、Merge 最新のブランチ into master

![スクリーンショット 2020-11-13 18.29.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/770386/99c34273-1a04-882d-39ce-8ebc310e9bf0.png)

#補足
今までデプロイをしてきた場合、過去の情報にすり替えたもので上書きすることはできません。そういった場合は、デプロイしたアプリを一度削除し、再度アプリをデプロイし直す必要があります。
また、冒頭でも述べました様に、マイグレーションファイル等とのズレが起きてしまう可能性があることを留意し実行してください。

#参考記事
https://qiita.com/suin/items/96c110b218d919168d64
https://qiita.com/pugiemonn/items/34b56b1aa757e33133e4
Figmaで要素の距離を一定にする方法

最近デザインを学んでいるんですが、デザインツールにはFigmaを使用しています。
一定の距離感で要素を配置するのに非常に便利な方法を見つけたので、もしまだ一つずつ要素を配置している人は是非実践してみてください。
![figma.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592040/dc9636a5-f9e9-931b-f88b-69105220534f.gif)


#1.要素を準備する
![a86dbaa5acbd5cc6d2af1a99625b9b83.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592040/6deb6a6e-c15d-0d18-60d5-4fc1611f5381.png)

#2.複数選択をして、高さを揃えます
![a323a68d73c087a3ee1e1f568352763f.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592040/080f41e9-8ab8-d352-3c0f-9b597ca8d169.png)

#3.Tidy Upで要素を間隔を揃える
![89b185c82bee5e04a0fe24f081d7b4ea.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592040/dd0d79c6-1317-02a4-0ea5-834a2e6500c6.png)

#4. 余白を調整する
![dab3479376814a54441d6a3af0f5f742.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592040/7a88ed3b-3b26-e8ba-20a5-1cb20f638f6e.png)

このように調整することができます。
![figma2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/592040/0d7842a7-95d6-b728-5244-a5450b167691.gif)


#まとめ
今までこの方法を知らずに一つずつ調整しており非常に非効率でした。
この方法はかなり使えるので是非使ってみてください！
WebAPIにアクセス時なぜか403エラーが発生する時の対処法

##概要
chromeの拡張機能である[Talend API Tester](https://chrome.google.com/webstore/detail/talend-api-tester-free-ed/aejoelaoggembcahagimdiliamlcdmfm)でWebAPIにリクエストを送信した際、なぜか403 Forbiddenが発生した。curlコマンドを使用してリクエストを送信した場合は、正常にリクエストを送信できていたので少し戸惑った。

そこで、上記課題の解決策(?)があったので(より良い方法があるかもしれませんが...)まとめておきます。

#####
```
METHOD: GET
PATH: http://example.com/sample.txt

---- 下記をHEADERSに追加する ----
HEADERS: Origin: http://example.com ← 接続先のURLをここに追加する
```
Webブラウザー上のAPIテストツールを使用する場合は注意していきたいです...。
Vue.js 3 : 複数項目のInputで、最後のInputが入力されたら自動的に次のInputを追加する


フォームを作っていると、次のように、入力された数が増えた時に、入力欄を自動で追加してほしいことがあります。

> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25846/53ee9d9d-4821-9214-fe4f-273d6e59e544.png)

これを Vue.js でやる場合のコードを紹介します。

## コード

```html
  <form action='/send_email' method='post'>
    <p>
      メールを送ります。
      送信先のメールアドレスを入力してください。
    </p>
    <div id="email_list">
      <div class="row" v-for="(email, index) in emails">
        {{index + 1}}: <input type="email" name="email[]" v-model="email.value">
      </div>
    </div>
    <button type="submit">Submit</button>
  </form>
  <script>
    Vue.createApp({
      data() {
        return {
          emails: [{value: ''}]
        }
      },
      beforeUpdate() {
        const emails = this.$data.emails
        if (emails[emails.length - 1].value.trim()) emails.push({value:''})
      }
    }).mount('#email_list')
  </script>
```

`beforeUpdate` を使って入力値の状態をチェックして入力欄を増やしています。

`beforeUpdate` は、 データが変更されるとき、DOM が適用される前に呼ばれます。

`renderTriggered({key, target, type})` というのもあり、そちらで変更することもできます。 詳しくは Vue.js のライフサイクルのページに載っています。

## 環境

* Vue.js 3.0.2
Redis の WebAPI (Bottle)

こちらで定めた仕様を満たすサーバーサイドのプログラムです。
[Redis の WebAPI を作成](https://qiita.com/ekzemplaro/items/1746b31beef382023f2d)

インストール

```bash
yay python-redis
yay python-hiredis
```

```py:bottle_redis.py
#! /usr/bin/python
#
#	bottle_redis.py
#
#						Nov/13/2020
#
# --------------------------------------------------------
from bottle import route, run, post, request
import redis
import json
import sys
# --------------------------------------------------------
@post('/read')
def read():
	key = request.forms.get('key')

	json_str = ""
	try:
		rr = redis.Redis(host='localhost', port=6379, db=0)
		json_str = rr.get(key).decode()
	except Exception as ee:
		sys.stderr.write("*** error *** in rr.get ***\n")
		sys.stderr.write(str(ee) + "\n")

	return json_str
#
# --------------------------------------------------------
@post('/insert')
def insert():
	key = request.forms.key
	json_str = request.forms.value
#
	sys.stderr.write(key + "\n")
	sys.stderr.write(json_str + "\n")
#
	if json_str != "0000":
		rr = redis.Redis(host='localhost', port=6379, db=0)
		rr.set(key, json_str)
#
	str_out = ""
	str_out += key + " *** "
	str_out += json_str + " *** "

	return str_out
#
# --------------------------------------------------------
@post('/list')
def list():
	keys = []
	json_str = ""
#
	try:
		rr = redis.Redis(host='localhost', port=6379, db=0)
		keys = rr.keys('*')
	except Exception as ee:
		sys.stderr.write("*** error *** in rr.keys ***\n")
		sys.stderr.write(str(ee) + "\n")
#
	keys_str = []
	for key in keys:
		key_str = key.decode('utf-8')
		keys_str.append(key_str)
#
	try:
		json_str = json.dumps(keys_str)
	except Exception as ee:
		sys.stderr.write("*** error *** in json.dumps ***\n")
		sys.stderr.write(str(ee) + "\n")
#
	return json_str
#
# --------------------------------------------------------
run(host='localhost', port=8080, debug=True)
# --------------------------------------------------------
```

サーバーの起動

```text
$ ./bottle_redis.py 
Bottle v0.12.19 server starting up (using WSGIRefServer())...
Listening on http://localhost:8080/
Hit Ctrl-C to quit.
```

読み出し

```bash
curl -X POST -d key=t1855 http://localhost:8080/read
```

書き込み

```bash
curl -X POST \
	-d key=t1855 \
-d value='{"name": "宇都宮","population": 87516,"date_mod": "2001-3-16"}' \
http://localhost:8080/insert
```

key の一覧

```bash
curl -X POST http://localhost:8080/list
```
PHP復習 文字列結合、switch、配列（連想配列）、for、whileよくばりセット

最近、あまりPHP書いてないので、なまらないように見直す。
ついでに後で見返すようにまとめ！:dancer_tone3::dancer_tone3::dancer_tone3:

#文字列結合
`.`

```php
$fruits = 'orange';
echo $fruits.'ジュース'
```

#変数展開
`"{$変数}"`
:warning:出力するときは**ダブルクオーテーション**で囲む。
シングルクオーテーションだと{$変数}がそのまま文字列として出力される

```php
$food = burger;
echo "{$food}ください";
```
##かつ、または
かつ`&&`
または`||`
#switch文
あんまり使わない？らしい

```php
    switch (条件式){
      case 0:
        echo '大吉です。';
        break;
      case 1:
        echo '中吉です。';
        break;
      default:
        echo '凶です。';
        break;
    }
```
breakがないと次のbreakが現れるまで、後のcaseも処理されてしまうので、忘れないように
defaultは当てはまるcaseがないときに処理される。
caseの部分にbreakを一つも設定していないと、下のcaseまで処理される。breakを忘れてはいけない。
##よくわからないところ
###defaultは該当するcaseがない場合に処理されるもの。と書いてあったけど・・・？
下のコードはあえてbreakを書き忘れたもの。


```php
$num = 0
    switch ($num){
      case 0:
        echo '大吉';
      case 1:
        echo '中吉';
      default:
        echo '凶';
        break;
    }
//実行結果：大吉中吉凶
```
本来なら、case0で大吉が出力される。けど、breakがないので次のcaseも処理される。

 + 大吉中吉　と出力されてしまう   ←わかる
 + 大吉中吉凶　と出力されてしまう ←わからない

defaultは該当するcaseがない場合に処理される。（しつこい）
ので、今回case0で該当したから、defaultは処理されない！と思っていた。switch文わからない:joy:
そもそも条件式のところにいきなり数字を入れても、急に変数を定義してもどうにかなってしまうのよくわからない。。。
#配列
`$変数(配列)名 = array(配列中身１,配列中身２)`

```php
$names = array('やまだ','たなか','さとう');
echo '僕は'.$names[2];
$names[] = 'きむら';      //　配列の末尾に追加
```
##foreach文(配列ver)
`foreach(連想配列 as 配列を一つずつ入れる用変数){処理}`

```php
foreach ($names as $name){
echo $name;
}
//やまだたなかさとうきむら
```


#連想配列
`$配列名 = array('キー名' => '値１,・・・)`

```php
    $student1 = array(
      'num'=> 1,
      'name'=> 'Ann',
      'age'=> 14);

      $student1['club'] ='tennis';       //追加

      echo '名前：'.$student1['name'];
      //名前：Ann
      echo "{$student1['age']}歳";
      //14歳

```
##foreach文(連想配列ver)
`foreach(連想配列 as キー名が入る変数 => 値が入る変数){処理}`

```php
    foreach($student1 as $key => $value){
      echo $key.':'.$value.'<br>';
    }
      //１周目　num:1 ２周目　name:Ann　３周目　age:14　club:tennis
```
#fot文
`for($i=初期値;ループ条件;$iの更新){繰り返す処理}`
#while文
`$i=初期値;while($iループ条件){繰り返す処理;$iの更新}`
ループ条件はいつかfalseになるようにしないと、無限ループになってしまうので注意。
#continue
breakでは完全にループを抜けてしまう。
一定以上では処理を止めたいときはbreak、
一定の条件だけ処理をしたくないとかってときはcontinueを使う。
フッターを下部に固定する方法

# はじめに
フッターをウィンドウの下部に固定する方法をまとめました。
ページのコンテンツ量が少ない場合でもフッターが下部に固定されるようにします。

# 方法
まずはHTMLを用意します。

```html:html
<body>
~略~
  <div class="footer-box">
    <span>Copyright © MSY Inc., Ltd. All rights reserved.</span>
  </div>
</body>
```

次にCSSを用意します。

bodyを画面の大きさにしておきたいのでmin-height: 100vhを設定します。
positionでbodyの子要素であるフッターをbottom: 0で最下部に位置するようにします。
このままだとコンテンツがはみ出てしまうので、フッターの高さ分 padding-bottomを与えます。今回はリセットCSSで指定しているのここでは記述していないが、bodyにbox-sizing: border-box; でpaddingを含めた高さになるようにします。

```css:css
body {
  min-height: 100vh;
  position: relative;
  padding-bottom: 46px;
}

.footer-box {
  width: 100%;
  text-align: center;
  background-color:  #e7e7e7;
  padding: 15px 0;
  position: absolute;
  bottom: 0;
}
.footer-box span {
  font-size: 12px;
}
```
axiosでエラー情報を取得

##概要
axiosでAPI通信を行い、APIの方でエラーが発生した場合のエラー情報の取得方法についてまとめていきたい。

#####catchで取得したエラーの中身をみていく
```typescript:axios

axios.get('https://example.com', params)
.then(function(response) {

    //正常時にAPIから返却されるレスポンスデータ
    return response;
  })
  .catch(function(error) {
    
    //エラー時にAPIから返却されるレスポンスデータ
    error.response.data();
  });
```
キャッチしたHTTPステータスコードをフロント側で処理することも可能そうです。
Intellij IdeaでPowerShell Scriptの開発環境づくり

#はじめに
Jetbrain製品でPowerShell Scriptが書きたい。
ヒントありでコードを書いて、コンソールにWrite-Hostで出力させることが目標です。

#開発環境
New ProjectでJavaを選択。
ないも選択せずにNextを選択。
テンプレートも選ばないで、Nextを選択。
Project nameを決めて、Finishを選択。

右クリックからPowerShell Scriptを選択して、新規ファイルを作る。

```test.ps1
Write-Host "PowerShell Start"
```

メニューからRun/Debug...でRunでtest.ps1を選択。
これで、コンソールに出力できました。

#課題

あれ、もうちょっとスマートだったような気がしたんだけどなぁ。
srcフォルダとかあるし。
とりあえず、ザクザクはかけそうだけど。
【HTML&JavaScript】canvasでアニメーションを作る方法

#プログラミング勉強日記
2020年11月13日
[10月の記事](https://qiita.com/mzmz__02/items/4fb3f4b9232723725b9d)でHTMLでcanvasを使うと図形を描ける方法を扱ったが、JavaScriptと組み合わせることでアニメーションを作れると知ったのでその方法をまとめる。

#アニメーションを作成する方法
　Canvasはまず、HTML内にCanvasタグを用いてアニメーションを描画する範囲を指定する必要がある。タグを指定して、JavaScriptで動的な動きをかく。


```html
<!--idがCanvasの100×100の大きさのCanvasを作成する -->
<canvas id="Canvas" width="100" height="100"></canvas>
```

#サンプルコード

```html:HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="sample.js"></script>
    <style>
      #canvas{
        background:#999;
      }
    </style>
  </head>
  <body>
    <!-- Canvasタグでキャンバスを描写する -->
    <canvas id="canvas" width="100" height="100"></canvas>
  </body>
</html>
```

```js:JavaScript
var can = document.getElementById("canvas");
var ctx = can.getContext("2d");

//アニメーションカウンター
var count = 0;
var timer = setInterval(function(){
  ctx.fillStyl = "#fff"; // 消去時の色
  ctx.clearRect(0,0,300,300);  // 消す
  ctx.fillStyle = "#f00"; // 塗りつぶし色を赤に
  ctx.fillRect(30 + count, 30 + count, 30, 30);
  count++;
  if(count > 200){
    clearInterval(timer);
  }
},100);
```

#参考文献
[Canvasを覚える！HTMLでアニメーションを作成する方法【初心者向け】](https://techacademy.jp/magazine/9784)
Ubuntu20.04,22.04,24.04 で マウスカーソルを大きくする

# 20.04・22.04の場合

## 設定

「設定」-「ユニバーサルアクセス」で設定できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/268f5524-116e-4d9c-a7d4-17b804d6c22a.png)

ここでは最大、特大、大、中、デフォルトの5段階で選ぶことができます。

## dconf エディター

先の「設定」画面ではプリセットの 5 つから選択するだけでしたが、dconf エディター を使うと数値で入力できます。

インストール

```

sudo apt-get install dconf-tools
```

起動して、

/org/gnome/desktop/interface/cursor-size
で指定できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/29096ec0-ef56-95b9-9765-9a6a27d22d55.png)

先の「ユニバーサルアクセス」の設定は単にここに数値を入れているだけみたいです。
「ユニバーサルアクセス」で「最大」に設定した場合、ここの数値は 96 になりました。
しかしこれだと画面が乱れてしまったので「特大」の 64 で設定をしました。


設定後の反映には OS の再起動が必要です。
多分ログアウト & ログインでもOKかな？

# Googel Chorme 

デスクトップ設定をしても、各デスクトップアプリケーションでマウスカーソルのコントロールをしている場合はアプリケーションウィンドウ内部だと設定が反映されません。

僕の使用頻度の高い Googele Chrome も、20.04の場合マウスカーソルを独自に制御しているようで、その上で希望のマウスカーソルにするために拡張を入れました。

「Cust![Screenshot from 2020-11-13 16-31-07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/e810d6c1-bec3-71a5-c817-3e1751a64f1e.png)
om Cursor」のボタン

![Screenshot from 2020-11-13 16-31-07 (コピー).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/8aeaf3dd-ed6a-0068-0aa8-229b3f21b069.png)

を押すとゲージが出てきます。


![Screenshot from 2020-11-13 16-33-25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/2e54a891-5ad9-a746-d8af-cd839add5c11.png)

ここでの設定も、デスクトップ設定と同様に一番大きい設定にすると画面が乱れてしまいました。

OS で「特大」サイズ( 64 設定 ) との大きさとの兼ね合いで、最大から 2つ下げるようにしました。

こちらも、Chrome を再起動しないと何かと問題みたいです。


# 24.04の場合

「設定」で同様にカーソルのサイズを変更できますが、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/babea27c-1c52-4dbe-98fd-d1a5c2a5d1c0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/eeac3f9f-8583-488b-9253-30cb5c5e878a.png)

gsettings の値について指定できるのは 24, 32, 48, 64 ぐらい？

```
gsettings set org.gnome.desktop.interface cursor-size 64
```
【Rails】 button_toメソッドを初めて活用してみた

#はじめに
Railsでオリジナルアプリを作成しています。indexアクションで表示されるページから直接updateアクションを実行したく、button_toメソッドを活用しました。

※今まで作ったアプリは、ツイートなどの登録一覧情報があるindexから詳細(show)ページに遷移します。そこから編集ページ(edit)に遷移して、情報を更新(update)します。このshow、editアクションを割愛して直接updateアクションを行いました。

**開発環境**
ruby 2.6.5
Rails 6.0.3.4

#目次
1.button_toの使い方
2.link_toとの違い

#1.button_toの使い方
よく使うlink_toと似ていて、リンクではなくボタンを作成できます。中身はシンプルでボタン名、パスやアクションそしてオプションで構成されます。デフォルトのHTTPメソッドはpostです。

```ruby:○○.html.erb
<%= button_to "ボタン名", { パス or コントローラー名とアクション名 }, { オプション } %>
```

今回作成したのは下記の通り。suggestion_path(suggestion.id)はupdateのルーティングで設定したパスです。updateアクションのHTTPメソッドはpatchなので、デフォルトのpostから変える必要あり。

```ruby:index.html.erb
<%= button_to "掃除完了", suggestion_path(suggestion.id), method: :patch, class: "register-blue-btn" %>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703987/3c771472-4b1b-259a-f341-fc47083f5e83.png)

#2.link_toとの違い
link_toのデフォルトHTTPメソッドはgetです。またlink_toはaタグを使ったリンクの生成に対し、button_toはフォームを生成します。

参考ページ
[【Rails】button_toの使い方をどこよりもわかりやすく解説！](https://pikawaka.com/rails/button_to#link_to%E3%81%A8%E3%81%AE%E9%81%95%E3%81%84)
以上

**所感**
まだこの辺りきちんと理解できてないけど、アクションを実行したいならbutton_toなのかな？コントローラーも指定できることから、他コントローラーのアクションも実行できるようです。
Visitor Pattern

<font color="#00f">Composite Patterの要素を取得する</font>

[Design Pattarm MENU](https://qiita.com/old_cat/items/852d980bedb9100dd7e3)

以下のクラス構成で確認します

|クラス|説明|
|-----|----|
|interface<br>face|型とaccept()を定義する|
|faceImple.class|faceを実装する|
|faceList.class|faceを実装する<br>Listを持つ<br>Listのiteratorを発行するメソッドを持つ|
|Visitor.class|Visitor Patternを提供する|
|user(Main.class)|動作を確認する|

＊user　他の開発者がこのパターンを利用する、という意味合いを含みます

```java:interface_face
interface face{
  void accept(Visitor visit);
}
```
```java:faceImple.class
class faceImple implements face{
  public void accept(Visitor visitor){
         System.out.println("."+this);}
}
```
```java:faceList.class
class faceList implements face{
  List ls = new ArrayList();
  void      add( face fc){ls.add(fc);}
  public    void accept(Visitor visit){
            visit.visitor(this);}
  Iterator  iterate(){return ls.iterator();}
}
```
```java:Visitor.class
class Visitor{
      void visitor( faceImple imple ){
           imple.accept(this);}
      void visitor( faceList list ){
           Iterator it = list.iterate();
           while(it.hasNext()){
                 face fc = (face) it.next();
                 System.out.println("/"+fc);
                 fc.accept(this);
           }
      }
}
```
```java:user(Main.class)
public static void main(String[] args){
       faceList f1 = new faceList();
       faceList f2 = new faceList();
       faceList f3 = new faceList();
       f3.add(new  faceImple());
       f3.add(new  faceImple());
       f2.add(new  faceImple());
       f2.add(f3);
       f1.add(f2);
       f1.accept(new Visitor());
}
```
【Flutter】Firebase環境構築（iOS/Android）

##参考文献
 - [Flutter アプリに Firebase を追加する](https://firebase.google.com/docs/flutter/setup?hl=ja)
 - [cloud_firestore 0.13.6 ](https://pub.dev/packages/cloud_firestore/versions/0.13.6)
 - [firebase_core 0.5.2](https://pub.dev/packages/firebase_core/install)
 - [64K を超えるメソッドを使用するアプリ向けに multidex を有効化する](https://developer.android.com/studio/build/multidex)
 - [【Flutter実践】Firebase環境構築と、Firestoreのデータを取得してアプリで表示](https://www.youtube.com/watch?v=IiEsyHiIwxc)
 - [firebase_core](https://pub.dev/packages/firebase_core/install)
 - [cloud_firestore](https://pub.dev/packages/cloud_firestore/install)
 - [provider](https://pub.dev/packages/provider/install)
 - [firebase_auth](https://pub.dev/packages/firebase_auth/install)
 - [image_picker](https://pub.dev/packages/image_picker/install)
 - [firebase_storage](https://pub.dev/packages/firebase_storage/install)
 
#iOS編

###1. Firebaseプロジェクト作成
[![Image from Gyazo](https://i.gyazo.com/ffa6c7e669476505a072551306086564.png)](https://gyazo.com/ffa6c7e669476505a072551306086564)


###2. iOSアプリの追加

[![Image from Gyazo](https://i.gyazo.com/679b98eff0015aa199e7647f2ac7fcc3.png)](https://gyazo.com/679b98eff0015aa199e7647f2ac7fcc3)


 - iOSバンドルID

[![Image from Gyazo](https://i.gyazo.com/d7509f0cb63860b41b7af3abc9a8d220.png)](https://gyazo.com/d7509f0cb63860b41b7af3abc9a8d220)


###3. GoogleService-Info.plist 

[![Image from Gyazo](https://i.gyazo.com/d26cd8b0113fd06a35f7332b4646cff0.png)](https://gyazo.com/d26cd8b0113fd06a35f7332b4646cff0)


 - Xcodeプロジェクトに追加

[![Image from Gyazo](https://i.gyazo.com/3af4b99eb2235241cbe493bd9e4bbe2e.png)](https://gyazo.com/3af4b99eb2235241cbe493bd9e4bbe2e)


###4.FlutterFire プラグインを追加する

 - firebase_core導入

```
dependencies:
  firebase_core: ^0.5.2
```

[![Image from Gyazo](https://i.gyazo.com/bca3526366eb6f6e203dd490e5e9d7dd.png)](https://gyazo.com/bca3526366eb6f6e203dd490e5e9d7dd)

 - cloud_firestore導入

```
dependencies:
  cloud_firestore: ^0.14.3
```

[![Image from Gyazo](https://i.gyazo.com/0ce5b408df704352a1d76c64f6a88f0e.png)](https://gyazo.com/0ce5b408df704352a1d76c64f6a88f0e)


#Android編

###1.Androidアプリの追加

[![Image from Gyazo](https://i.gyazo.com/255f3b338ab4b4866e7ec49ae7cf968f.png)](https://gyazo.com/255f3b338ab4b4866e7ec49ae7cf968f)


 - Androidパッケージ名

```AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="sample">
```

###2.google-services.jsonの追加

[![Image from Gyazo](https://i.gyazo.com/e6d0863310cd764d2780c87482f87630.png)](https://gyazo.com/e6d0863310cd764d2780c87482f87630)


```
android/app
├── build.gradle
├── google-services.json  //追加
└── src
```


###3.Firebase SDK の追加

```android/build.gradle
dependencies {
    classpath 'com.google.gms:google-services:4.3.4'  //追加
  }
```

```android/app/build.gradle
apply plugin: 'com.google.gms.google-services'  //追加
```

```android/app/build.gradle
android {
    defaultConfig {
        ...
        minSdkVersion 15
        targetSdkVersion 28
        multiDexEnabled true
    }
    ...
}

dependencies {
  implementation 'com.android.support:multidex:1.0.3'
}
```
Google Workspaceの監査ログの活用例

# 前知識

Google Workspaceとは？
　→旧G Suite。組織用のGoogleアカウントでGmailやスプレッドシートやDriveを利用できるサービス。

監査ログとは？
　→「いつ」「誰が」「何をした」を後から追跡するために残すログ。

---

# Google Workspaceの監査ログの例

| 種類 | 説明 | 例 |
|:--|:--|:--|
|管理コンソール  | Google 管理コンソールでの管理アクティビティを確認する|○○の設定を△△から□□に変えた  |
|グループ   | グループとグループ メンバーに対する管理コンソールでの操作を確認する|○○さんをグループに追加した、グループを削除した  |
|ログイン   | ユーザーのログイン アクティビティを確認する|○○さんがログイン成功した、ログイン失敗した、ログアウトした  |
|ドライブ   | ユーザーの Google ドライブ アクティビティを確認する|○○さんが△△ファイルを閲覧した、編集した、共有権限を変えた  |

その他、以下の種類に対応。
カレンダー、デバイス、トークン、SAML、Google Chat、Currents、Voice、Google Meet、ユーザー アカウント、アクセスの透明性、LDAP、Password Vault、コンテキストアウェア アクセス、ルール、データポータル、Groups Enterprise

---

# 管理コンソールで監査ログを閲覧する

![スクリーンショット 2020-11-12 9.25.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175280/a85febf2-0f1f-e15e-e9dd-a18a9dc59f9b.png)

---

# 活用例

1. [Qiita - Google Workspace(G Suite)で特定の条件を満たした時に任意の宛先へ通知メールを送る](https://qiita.com/suzutatsu/items/9b616bac40683a343e62)
   * Google Workspaceには、監査ログに出力されるイベントを起点として、メール通知の機能がある
   * 不審なログインとか、特定のアカウントでログインするたびに通知できる
   * リアルタイムではなく、遅れて見えるようになるので注意。あくまで後追い用。
   * [公式ブログ](https://cloud.google.com/blog/ja/products/identity-security/logs-based-security-alerting-in-google-cloud)に同じ話があった
2. [Google Workspace(G Suite)のログが消えないように対処する](https://qiita.com/suzutatsu/items/7017b7a973bd87f79796)
   * 基本的に6ヶ月で消えるので、監査ログをGCPに退避することで長期間の保存が可能
   * BQへのエクスポート機能はG Suite Enterpriseエディションのみだったが、Cloud Logging経由ならエディション不問
項目をランダム選択しその結果(good/bad)もランダムにする。ただしbadの上限あり

こんにちは。@mashiです。

この記事は一応この記事( https://qiita.com/mashi/items/93a088c90839251ef820 )の続きです。

【大項目/小項目/結果(good/bad)という表があり、各大項目にて1つの小項目を選択し、good/badもランダムにする】というものです。

文章だけではよく分からないため、下記の出力イメージです。
技術・勤怠・コミュニケーションにてそれぞれ小項目1つをランダムで選び、goodかbadもランダムにするというものです。
badの個数も0～1の間でランダムです。

|大項目  |小項目  |good |bad |
|---|---|---|---|---|
|技術  |速度  |||
|技術  |品質  |〇||
|技術  |納期  |||
|技術  |ドキュメント  |||
|勤怠  |遅刻  ||〇|
|勤怠  |勤怠忘れ  |||
|コミュニケーション|挨拶|||
|コミュニケーション|タスク共有|〇||
|コミュニケーション|会議内容|||

前回のコードを用いて実装すると下記のような感じになりました。(実際に動作しているコードとは異なるためちょこちょこ端折ってます)

<pre>
// ランダム出力する大項目の個数
$major_items_num = 3;
// badの数は0～1個
$bad_num = rand(0, 1);
// 大項目の配列
$major_items_array = array('skill', 'attendance', 'communication');
$bad_major_items_array = array();

if ($bad_num > 0) {
    $random_array = array();
    shuffle($major_items_array);

    // badの大項目
    $bad_major_items_array[] = array_slice($major_items_array, 0, $bad_num);
}

for ($i = 0; $i < count($major_items_array); $i++) {
    // 各大項目にて小項目の選択とgood/badの決定
    if (in_array($major_items_array[$i], $bad_major_items_array, true)) {
        $evalution = 'bad';
    } else {
        $evalution = 'good';
    }
    // 〇を付けるセルの位置(選択された小項目かつgood/bad)
    $cell_coordinate = getMajorItemCell($major_items_array[$i], $evalution);
}

function getMajorItemCell ($item_name, $evalution) {
    $col_num = '';
    $row_num = '';
    $skill_base_row = [技術の開始行];
    $attendance_base_row = [勤怠の開始行];
    $communication_base_row = [コミュニケーションの開始行];

    if ($evalution == 'bad') {
        $col_num = [badの列番号];
    } else {
        $col_num = [goodの列番号];
    }

    // 選択された小項目の行番号
    switch ($item_name) {
        case 'skill': // 技術
            $row_num = rand(0, 1) + $skill_base_row;
            break;
        case 'attendance': // 勤怠
            $row_num = rand(0, 4) + $attendance_base_row;
            break;
        case 'communication': // コミュニケーション
            $row_num = rand(0, 1) + $communication_base_row;
            break;
        default:
            break;
    }

    $cell_coordinate = $col_num . $row_num;

    return $cell_coordinate;
}
</pre>

なんだかんだ長いコードになってしまったので、もっとスッキリできそうな予感がします。
時間がある時に見直して修正します。

コメントがあればいただければ幸いです。
PHPのインクルード4つを解説

#まえがき、インクルードとは？

PHPにはインクルードという便利な処理があります。

**各htmlページに同じ処理を何度も書く手間を省いて、共通事項になっている処理を別所から参照できる機能**でもあるし**1つのページの複雑化/長文化を避ける為に別所にソースコードを仕分ける機能**とも言えます。
特に大きくなってしまったウェブページ/サイトを修正する手間を効率化してくれるものと言えるでしょう。


しかし、このPHPのインクルード処理は4種類もの処理があります。そしてそれらは微妙に使い方が違ってきますのでそれを解説したいと思います。

読み込みエラーがある場合で、その後のデータを処理する/しない。
そして、1度だけ読み込む/何度でも読み込む
の、違いで4種類に分かれています。


#「include」…読み込みに失敗しても処理継続するインクルード

例えば、includeを使って、「text.php」を開こうとした際に、「text.php」が無いと言う時、そのIncludeはエラーと処理して、その後の処理を読み込んでいきます。
下記の例だと、

```php:test.php
<? include('./text.php'); ?>
<p>エラー後読み込みテスト</p>

```

という処理で、

```txt:test.php

Warning: include(test.php): failed to open stream: No such file or directory in C:\xampp\htdocs\index.php on line 11

Warning: include(): Failed opening 'test.php' for inclusion (include_path='C:\xampp\php\PEAR') in C:\xampp\htdocs\index.php on line 11

エラー後読み込みテスト

```

と出ます。最後の「エラー後読み込みテスト」の部分がちゃんと読み込まれている所がミソです。


エラーがあってもとりあえず処理を継続させたい時に使います。

#「require」…読み込みに失敗したらそれ以上の処理をしないインクルード

requireを使って、「text.php」を開こうとした際に、「text.php」が無いと言う時、エラーと処理してしまいます。
下記の例だと、

```php:test.php
<? require('./text.php'); ?>
<p>エラー後読み込みテスト</p>

```

という処理で、

```txt:test.php

Warning: require(test.php): failed to open stream: No such file or directory in C:\xampp\htdocs\index.php on line 11

Fatal error: require(): Failed opening required 'test.php' (include_path='C:\xampp\php\PEAR') in C:\xampp\htdocs\index.php on line 11

```

と出ます。
「<p>エラー後読み込みテスト</p>」読み込まれていませんね。

確実にエラーに気づきたい、もしくは予期せぬ動きが出たときに容赦なくエラー処理にしたいならこちらを使います。

#1度だけ処理する「include_once()」「require_once()」

最後に紹介するのは、同じスクリプトの中で、1度限り処理するinclude/requireの、「include_once()」「require_once()」です。

実は、includeもrequireも、2回記述がある場合、2回読み込んでくれます。何度でも読み込んでくれるのです。

しかし、そういう処理をさせたくはないという時は、この「include_once()」「require_once()」を使うと、1回限りの利用に抑えてくれます。


関数の定義などを行う場合、この「require_once()」が便利です。関数定義は1度しか読み込まない前提ですから、万が一の定義上書きを避ける事ができます。


#まとめ

「include()」…読み込みに失敗してもとりあえず処理継続。
「include_once()」…読み込みに失敗してもとりあえず処理継続。1度しか読み込まない。
「require()」…読み込みに失敗したらエラー扱い。
「require_once()」…読み込みに失敗したらエラー扱い。1度しか読み込まない。
[Alfred] Alfredのアプリが表示されない問題を解決した話

# 問題提起
AlfredをSpotlight検索の代わりに使用していたのだが、検索時にexcelなどが開けない問題が起きた。
そのときに試したことと解決した方法を書く。

# 対象
・Alfredを使っているが、特定のアプリが検索できない人

#環境
・macOS Catalina version10.15.7
・Alfred4
・SHELL : bash

# 解決した方法
結論から言うと、Spotlightの除外する項目からMacintosh HDの項目を削除することだった。
いつ勝手に項目が追加されていたのやら。

システム環境設定→Spotlight→プライバシー→-

これでおｋ。

![スクリーンショット 2020-11-13 16.03.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/1a0b5016-c6f9-f0c3-87de-37a97eb7a3e0.png)


# 試したこと
以下、他のサイトで紹介されていた方法で試したことを羅列する。
## 1. Application Cache の消去

Alfredのアプリから
Advance →  Clear Application Cache

![スクリーンショット 2020-11-13 15.58.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656158/7bfbc6e1-6f9a-e8b3-ee7f-bab81ae81fc0.png)

これでは治らなかった。

## 2. macOSのrebuild
Alfredのアプリから
Advance →  Rebuild macOS Metadata
を選択して実行する。
この方法は良うわからんエラーが出されただけだった。

##3.Alfredの再起動
普通に効果なかった。

##4.Alfredの再インストール
これも普通に意味なかった。

#予想
恐らくAlfredはSpotlightの情報をもとにアプリケーションなどを探索しているのではないかと考えられる。
使えるようになるとmacの操作が何倍にも早くなるのでぜひ同じエラーで困っている方いたら実践してみてください。
【解決】さくらのサーバ上の MediaWiki でアップロードしたファイルが見られない問題

# MediaWiki で画像をアップロードしたのに見られない
と、いうことがありました。どうやらファイルはちゃんとアップロードされているのにウェブブラウザ上で見られない。`images/` 以下のそれっぽいところにファイルの実体はあるし、URI も間違ってないのに `Internal Server Error` がでて見られない。

## 環境
* MediaWiki 1.35
* さくらのレンタルサーバ
  * 2020/11/13 に確認・解決

# 解決方法
`images` ディレクトリに最初から入っている `.htaccess` ファイルを編集して解決。
`Options +FollowSymLinks` をコメントアウトする。

```sh:.htaccess
<IfModule rewrite_module>
        RewriteEngine On
        RewriteOptions inherit
        # Fix for bug T64289
        # Options +FollowSymLinks ## 最初はコメントアウトされていない
</IfModule>
```

# 原因
どうやらさくらのレンタルサーバでは `.htaccess` の `FollowSymLinks` が指定できないようなので、そのために問題を生じたようであった。(参考 : [.htaccessによるアクセス制御 - さくらインターネット サポート情報](https://help.sakura.ad.jp/206054622/))

# 参考
* [Maniphest T64289 - images .htaccess file makes images inaccessible](https://phabricator.wikimedia.org/T64289)
VSCodeのIntegrated Terminalで単語削除のキーバインドを設定する

keybinding.json

```json
[
  {
    "key": "ctrl+w",
    "command": "deleteWordLeft",
    "when": "terminalFocus"
  },
  {
    "key": "alt+backspace",
    "command": "deleteWordLeft",
    "when": "terminalFocus"
  }
]
```

<key>control + w</key> か <key>option + delete</key> で前の単語1つ分を削除するキーバインドを設定。
SMTの基本理解 - 同時マルチスレッディング

#プロセス・スレッドの復習
* **プロセスは実行中のプログラム**
    * 1つのプロセスには、1つのメモリ空間 
    * プロセス実行する時に必要なデータはメモリで保持されている
* **スレッドはプログラムを命令を逐次実行する部分**
    * CPUコアを利用する最小単位
* **プロセスは1つ以上のスレッドを持つ**
* **CPU**がプロセスを実行
    * プロセスが持っているメモリデータに対して演算する
    * OSがCPUからはメモリだけを見ればいいようにしてくれている！
* プロセスは**専用のメモリ領域**を使う
* スレッドは**共有のメモリ領域**を使う

参考
[【Java】マルチスレッド処理](https://qiita.com/suema0331/items/cdc033fab973d1bb3638 "【Java】マルチスレッド処理")
>マルチスレッドの意義は独立に動かし、かつ同じプロセス内のメモリ空間を共有することができること

#SMT (同時マルチスレッディング)とは
* **ある瞬間で並行して実行されている命令数**
* Intelでは**ハイパースレッディング**という
    * **1個のコアで複数のCPUをもつ**（CPUは通常だと1コアに1個）

###CPU構造
* 基盤の上に**アドレスバス、データバス**があって、**CPUがバス上に乗っている**
* CPUの中に**回路**がいっぱいあって中の回路の数で性能が変わってくる
    * 計算ごとに回路がある（整数演算、浮動小数演算など）
* CPU内のコードにより**一度に使える回路数は決まっている　**


###CPU中の回路全部使ってることはない
*  勿体無い。
* 理由としては、 **制御部+演算部に別れていてCPUの制御部は1個しかないから。**
* **ここで擬似的に1個のコアに制御部を２つ持たせる**
* 注意：イメージ図！

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282755/f8f0dfff-3c06-26ed-1d63-d3a207e6b951.png)


* 1個の制御部でいくつかの演算器を使ってもう1個の制御部で空いてる演算器を使う
* こうすると物理的にコア1個でも論理的には2個に見える。**これをSMTという**

##性能は単純に二倍ではない
* 4コア8スレッドの場合でも、4コアよりは早いが8コアより遅いなど性能は単純比例しない
    * ハイパースレッディングの方がコンテキストスイッチは減る
* 1コア2スレッドの場合、2スレッドでCPUを占有できるのでベスト
    * 追加でもう1スレッド立ち上げるなど、**受け手側＝コア側のキャパ超えたら処理は早くならない**

##シングルスレッド/マルチスレッド
* 1プロセスで複数のスレッドを使うかどうかは、アプリケーションの作り方
* **シングルスレッド**は枝分かれしない処理であり、CPUコアをたくさん搭載しても、意味がない
* **マルチスレッド**は 1プロセスで複数の処理を並行実行可能
    * マルチスレッドでは、**あるプロセスに所属するスレッドはメモリ領域を共有**するので注意
    * **排他制御**を行う必要がある
    * スレッドのデータは親プロセスのメモリ領域に保持
    * スレッド切り替えで**利用する仮想アドレス空間の切り替えが起きない**（TLBフラッシュ不要）


参考
[【Java】マルチスレッド処理 - 排他制御](https://qiita.com/suema0331/items/22237b0119947cc52184 "【Java】マルチスレッド処理 - 排他制御")
>処理途中で他スレッドの割り込み発生すると結果が正しく反映されない
>synchronizedブロックで排他制御

##コンテキストスイッチとは
* **SMT**：ある瞬間で並行して実行されている命令数
* **マルチタスク**：短い時間で並行して実行されているプログラムの数
    * マルチタスクによって実行するアプリケーションを細かく切り替え、**同時に動いているように見せる**ことができる
    * **CPUのコンテキスト**がプロセスに紐づいてて**プロセスで最後に実行した状態**が保存される
    * また順番が回ってきたらその**コンテキスト情報を元に処理を継続**
* **コンテキストスイッチ**：マルチタスク実行時の処理切替のこと
    * 例：**割り込み処理で一定間隔でタイマー割り込みをかけている**時（Thread0~2使用）
        * Thread0で0番目の処理が終わった段階で、**タイマー割り込み処理**をかける
        * CPUは**割り込みが入ったことで処理を止めて、割り込みプログラム書いたところに処理を飛ばす**
        * 終了後、 CPUは**コンテキストスイッチ**をかけることで次のThread1に処理を移し処理を実行
        * Thread1が終わったらコンテキストスイッチでThread2へと、順にくりかえず
    * これを**高速にやるとCPUは一度に一個の処理しかできないのにあたかも複数の処理ができるように見える**


![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282755/6287fa36-a1dd-67e3-27b8-d8947ed352bf.png)

##MMU（Memory Management Unit）とは
* プロセス毎に**専用の物理メモリ領域を確保し、その物理領域にアクセスするための仮想アドレスを用意**
    * メモリにデータを読み書きする際には**1つ1つメモリのアドレスを指定**する
    * 競合しないよう、**他のプロセスが使っていないアドレスを探す**必要がある
    * このメモリ管理の仕事を、プロセッサ内のMMUが行なっている 
* プロセスからは**仮想アドレスを指定してメモリアクセス**を行い、**MMUが仮想アドレスから物理アドレスへの解決**を行う

##TLBフラッシュとは
* プロセスを切り替えると、**仮想アドレス/物理アドレスのマッピングを切り替える**必要
* MMUが**一回アドレス解決した結果はキャッシュ**が残っている
* よってプロセスを切り替えるには**MMUのキャッシュをクリア**（**TLBフラッシュ**）する必要
* パフォーマンスへの影響大
SPSS Modelerで横持ちデータを縦持ちデータにしたい

SPSS Modelerで、横持ちデータを縦持ちデータに変換することは行列入替ノードを使って行うことができます。


■サンプル
サンプル・ストリームは以下に置きました。
https://github.com/hkwd/spsssample/raw/master/201113%E8%A1%8C%E5%88%97%E5%85%A5%E6%9B%BF%E3%83%8E%E3%83%BC%E3%83%89/201113%E8%A1%8C%E5%88%97%E5%85%A5%E6%9B%BF%E3%83%8E%E3%83%BC%E3%83%89.str


# 行列入替ノード
以下のような変換を行います。
カードIDで1レコードのデータを、行列入替ノードを使って、購入価格、年収、年齢の各列が3レコードになるデータに変換します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223763/35ec6ad9-e8f4-c6fa-f93f-e3ff15156f77.png)

* 行列入替方法を「フィールドからレコードへ」に設定します。
* 索引にデータを一意に識別できる列を設定します。また、縦変換したくない列も合わせて設定します。
* 値にレコード化したい列を指定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223763/9138dd62-f17d-d86c-5178-9284f5fb0aa9.png)

結果をユニークIDでソートした結果が以下です。
カードID10150のデータが3レコードに展開されています。
列名は汎用的なvariableとvalueという列名で自動的に作成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223763/44981f27-1bf7-e5d1-0fd1-d0ba95724366.png)

なお、valueのデータ型はそろえられてしまうので、文字列型と数値型は混在ができません。「選択したすべての値フィールドのストレージ タイプは同じでなければなりません (数値または文字列)」というエラーになります。
もし混在させたい場合はあらかじめ数値型を文字列型に変換して、文字として扱ってください。

なお、この縦持ち変換はSQLプッシュバックが効かないことには注意が必要です。

# 参考

* 行列入替ノードのオプションの設定
 * https://www.ibm.com/support/knowledgecenter/ja/SS3RA7_18.2.2/modeler_mainhelp_client_ddita/clementine/transposenode_settings.html

* 逆に縦持ちデータを横持ちデータに変換する例は以下にあります。
 * SPSS Modelerの再構成ノードをPythonで書き換える。購入商品カテゴリごとの集計 - Qiita 
 * https://qiita.com/kawada2017/items/8c35ca78bfe568cb0e76

■テスト環境
Modeler 18.2.2
Windows 10 64bit
vue component の 配列データを更新したのに値がviewに反映されない。

LTするまでもないが、簡単なのにVue ですげーハマった話。

## 問題
- vue component の Array data に対して、代入更新を行ったのに、template に反映されない。

## 解決
直接代入を行っても、vue側のレンダリングトリガーを引くことができないため、規定のレンダリングトリガーに対応したmethod を call する必要がある。

push, splice, shift… など。

これが起きた時には、 this.$nexttik は有効に働かないので、上記のトリガーを引かせる。
直接代入はやめようぜって話だった。

参考になったlink
- https://aqua-engineer.com/vue-js-reactve/
- https://jp.vuejs.org/2016/02/06/common-gotchas/
WebStromでWebpackでの開発環境作り

#はじめに
https://qiita.com/kawamurashin/items/29b789c96a612fb15575
この環境とおなじtsconfig.jsonのmodule:"es2015"でwebpackを使う感じで。


#環境
OS Windows 10
Webstrom

#設定方法
WebStormで新規プロジェクトを制作

右クリックメニューからpackage.jsonを作る

ターミナルを開き、各種インストール
（ターミナルを開くときにショートカットを覚えずに、いつもシフトを2回押し
どこでも検索機能でterと打ち、そこからターミナルを選んでいます。）

```
npm i -D webpack webpack-cli typescript ts-loader source-map-support
```
package.jsonをscriptsを追加、編集

```package.json
｛
  ...
  "dependencies": {},
  "scripts": {
    "build": "webpack",
    "watch": "webpack -w"
  },
  "devDependencies": {
  ...
}
```

右クリックメニューからtsconfig.jsonを追加。

```tsconfig.json
{
    "compilerOptions": {
      "sourceMap": true,
      "target": "es5",
      "module": "es2015"
    },
    "exclude": [
        "node_modules"
    ]
}
```

webpack.config.jsを追加

```webpack.config.js
module.exports = {
    //mode: 'production',
    mode: 'development',
    entry: './src/Main.ts',
    output: {
        path: `${__dirname}/script`,
        filename: "ts.js"
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
            },
        ],
    },
    resolve: {
        extensions: [
            '.ts', '.js',
        ],
    },
    devtool : "source-map",
    watch : true
};
```

TypeScriptファイル、src/Main.tsを作る。
起動確認のためにconsole.log("TypeScript Start");と入力。

index.htmlを作り、JavaScriptの読み込みの追加。

```
<script src="script/ts.js"></script>
```

ターミナル以下を入力して、ts.jsを生成。

```
npm run build
```

index.htmlをRun/Debug"index.html"でコンソールに出力されていることを確認。
run/Debug...を選び、edit configuration。
+でnpmを追加。scriptsにwatchを選択。

settingsからTools /Startup Tasksで、右側の+からwatchを選択してOKをクリック。

再度デバックして、うまく行ってればザクザク開発できる。

#参考

git
https://github.com/kawamurashin/ws_ts_webpack_source-map_template


最新版TypeScript+webpack 5の環境構築まとめ
https://ics.media/entry/16329/
ImportError: This function requires the python the python library graphviz, along with binaries. The easiest way to install all of this is by running "conda install -c conda-force python-graphviz"が出たときの対処法

# pipenv + pyenvで環境管理してる方に向けて

エラーコードの最後を見てわかるように

```
ImportError: This function requires the python the python library graphviz, along 
with binaries. The easiest way to install all of this is by running

     conda install -c conda-force python-graphviz
```

とありますが，まずはTerminal上で

```Terminal
$ brew install graphviz
```

続いて使用している仮想環境内で

```Terminal
$ pipenv install graphviz
```

これで

```Termainl
$ conda install -c conda-force python-graphviz
```

をせずに対処することができました．
EXCEL_ショートカットキー(shortcut key)

Excel セルに静的な日付や時刻を挿入する
--
◾現在の日付を挿入するには、Ctrl キーを押しながら ; (セミコロン) キーを押します。
 2020/11/13
◾現在の時刻を挿入するには、Ctrl キーを押しながら : (コロン) キーを押します。
 15:25
◾現在の日付と時刻を挿入するには、Ctrl キーを押しながら ; (セミコロン) キーを押し、Space キーを押します。次に、Ctrl キーを押しながら : (コロン) キーを押します。
2020/11/13 15:25
OpenChain: spec v2.1 の紹介 第3回 / Commentary of spec v2.1 vol.3, §3.2

# OpenChain Specification v2.1 の紹介 §3.2

本日は、ISO/IECに申請中のOpenChain Specification v2.1の中身の紹介第3弾（2章）です。著者の適当な和訳ですので、本格的にOpenChain Specを知りたい方は巻末のリンクより原文をお読みください。

また、このページから見た方は [OpenChain Japan Advent Calendar 2020](https://qiita.com/advent-calendar/2020/openchainjapanwg) より他の記事もご覧ください。他の章や関連する情報が書かれています。

## §3.2 Relevant Tasks Defined and Supported

2章では、OSS に関連する業務の定義とそれを実行するための支援に関する内容が書かれています。大きくは2つです。

### §3.2.1 Access

2.1章は、"Access"という章題で、外部からの問い合わせ対応に関する章です。

1. 外部からOSSに関する問合せるための方法（たとえば専用のメールアドレスとか）が公開されている。
1. 問い合わせがあったときにどう回答するかの手続きを規定した文章が組織内部にある。

といったことが規定されています。つまり、OSSライセンスコンプライアンスに関して第三者がその組織にコンタクトできる合理的な手段があり、またその組織が当該問合せに対してきちんと対応するように準備がされている必要があります。

### §3.2.1 Effectively resourced

2.2章は、"Effectively resourced"という章題で、リソースに関する章です。

コンプライアンスプログラム関連役割への適切な人員・十分な活動資源の割り当て、法律専門家のアサイン、懸案事項解決プロセスの整備を行うことが必要です。
OSSライセンスコンプライアンスは今後もより重要になってくるものであると考えられますが、リソースを確保するためには、経営層にその重要性を認識して頂く必要があります。つまり、

1. コンプライアンスプログラムの業務が明確で確実に実行するために役割／担当／組織が決まっている
1. 業務を実行する時間と十分な予算が配分されている
1. ポリシーと支援業務に関して、レビューして更新するプロセスがある
1. 必要なときにオープンソースのコンプライアンスについて法的な内容を話し合える専門家がいる（すぐ話せる相手がいる）
1. オープンソースのコンプライアンス問題が発生した際に、それを解決するためのプロセスが規定されている

といったことを満たす必要があります。

## つづく

明日は、そのような啓発活動を官民で行った例について、Promotion SGの遠藤さんから紹介いただきます。

# OpenChain Specification v2.1, Clause 2.

Today I am writing about the third part of the OpenChain Specification v2.1 Chap 3.2 (that is under the ISO/IEC pending). If you want to know the OpenChain Spec 
correctly, please read the original documents from the linke at the end of this page.

Chapter 3.2.1 is about dealing with external inquiries, and requires that a third party has a reasonable path to contact the organization for OSS license compliance, and that the organization is prepared to respond to such inquiries.

Chapter 3.2.2 is about resources. Adequate staffing and resources should be allocated to compliance program-related roles, legal experts should be assigned, and a process for resolving concerns should be maintained.

OSS license compliance will continue to become more important, but it is necessary to make executives aware of its importance in order to ensure resources are available.

Tomorrow, Mr. Endo of Promotion SG will share with us some examples of such educational activities conducted for the public and private entities.

# Resources (Links) / 関連リンク

- OpenChain Specification (執筆時点 v2.1): [https://www.openchainproject.org/contribute-to-the-standard](https://www.openchainproject.org/contribute-to-the-standard)
- OpenChain Specification 日本語訳 (v2.0 RC-1): [https://github.com/OpenChain-Project/Specification-Translation-JP/tree/master/RC-1/v2.0](https://github.com/OpenChain-Project/Specification-Translation-JP/tree/master/RC-1/v2.0)
Windows10 ブートエントリ名の変更

<h2>前書き</h2>
Windows10をマルチブートで正：Windows10リリース版、副：Windows10 Insiders Preview Slow版を使用しています。
機能アップデートのたびにブートエントリ名が"Windows 10"に戻ってしまい識別に毎回困ってブートエントリ名を変更しているのですが、そのコマンドのメモ。
※半年に一度の事なので、覚えていられない。(汗)

<h2>環境</h2>

- Windows10 20H2 19042.630

<h2>参考</h2>
[ブート エントリのフレンドリ名の変更](https://docs.microsoft.com/ja-jp/windows-hardware/drivers/devtest/changing-the-friendly-name-of-a-boot-entry)

<h2>コマンド</h2>
※すべて管理者権限のコンソールを使用すること。
<h4>確認</h4>

```PowerShell
bcdedit --% /enum
```
or

```cmd
bcdedit /enum
```

- 「Windows ブート ローダー」で「device」が「partition=C:」になっている方が現在使用しているWindows 10。
- 「identifier」と「description」を確認する。
- 「description」がブート時に表示されるブートエントリ名。

<h4>変更</h4>

```PowerShell
bcdedit --% /set {current} description "Win10 Pro 20H2"
```
or

```cmd
bcdedit /set {current} description "Win10 Pro 20H2"
```

- 現在使用中のWindows10以外のブートエントリ名を変更する際は、``{current}``の箇所を対象のブートローダーのidentifierに変更する。``{}``を忘れずに付けること。
- 変更後は念のため、上記の方法でdescriptionが変更されたことを確認する。
- Windows10を再起動し、ブートエントリ名が変更されていることを確認する。

<h2>後書き</h2>
そもそも開発者でもない限りマルチブートで使用することはまず無いと思いますので自分用のメモにしかならない気もします。
複数バージョンのWindows10でそれぞれ検証するなら、ハードウェア構成同一の別機器を使用するのが王道とは思いますが、ご参考までに。