OmniAICreator/Qiita-1.07M huggingface dataset:
Xplenty入門 Part7: スケジュール設定

こんにちは。今回はXplentyでのスケジュールの設定方法について紹介します。Xplentyでは、スケジュール設定時にいつどのタイミングで実行するかだけでなく、クラスターのパワーを設定します。（<font color="Crimson">注：コネクターベースの料金プランを選択されている場合、Nodeを追加購入した場合のみ、Node数（クラスターのパワー）の増加が可能です。</font>）

#1. スケジュール設定
###簡易なスケジュール設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/81f69f15-ff56-3f02-69b1-bc87a1ae7f70.png)


###Cron Expressionによるスケジュール設定
Xplentyでは、きめ細かいスケジュール設定のために通常の簡易なスケジューリング設定に加えて、Cron Expressionによる設定をサポートしています。
例えば、毎朝UTC8時（日本時間17時）にジョブを実行する場合、以下のように設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/c1a120c3-2220-0d56-0909-4d928c4e3235.png)

**Allow concurrent schedule executionsについて**
同一スケジュールで実行された前のジョブが実行中の場合、新しく同一スケジュールで実行されたジョブの同時実行を許可するかどうかをコントロールするオプションです。
デフォルトでは、同じスケジュールで実行された前のジョブが実行中の場合、次の同一スケジュールはジョブの実行を行いません。前のジョブの状態に関係なくジョブを実行させたい場合は、同時実行を許可する「Allow concurrent schedule executions」オプションにチェックを入れてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/84d0aa24-3744-04a8-7136-fb75b92cdee7.png)

#2. Cluster設定
クラスター設定では、以下を設定します。
1. クラスターのパワー(Node数)をスライドで設定する
2. スケジュールで設定されたジョブが完了後どれくらいでクラスターをTerminateするかを決定する
3. クラスターのReuse(再利用ポリシー)の設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/e2b478ac-0bb1-5d0e-c357-76448d80bb8b.png)

ここでは、上記の中で最もわかりづらい、「3.クラスターのReuse(再利用ポリシー)の設定」について解説します。
クラスターを起動するには、最低30秒ほどの時間がかかります。そのため、スケジュール実行時にすでに起動済みのクラスターで、かつスケジュールで設定したノード数と同じかそれ以上のパワーを持つクラスターが存在する場合、新しくクラスターを起動せずに、既存のクラスターで処理するというオプションです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/65461/e0cab396-cf1f-053c-1c30-bebe705c3d13.png)

| 再利用オプション      |      説明 |    
|:-----------------|:------------------|
| Any similar created by this schedule|同一スケジュールで起動されたクラスターが起動している場合、それ使用してスケジュールを実行します。|
| Any similar cluster           |例えば、スケジュールで2ノードと設定されたスケジュールを設定した場合、このスケジュールAが実行される際に別スケジュールBですでに3ノードのクラスターが起動していた場合、スケジューラAは新規に２ノードのクラスターを起動するのではなく、既存のクラスターを利用して処理を実行します。|
| Never           |クラスターを再利用せず、毎回クラスターを新規に起動する。|
**ヒント：**
上記3のReuse設定と上記２のどのタイミングでTerminateするかの設定をうまく利用することで、月間の最大利用可能ノード時間を効率的に使うことができます。
[javascript] クエスチョンマーク2つの演算子って何？

# こんなやつ

```js
false ?? 'hoge'
=> false
```

検索しづらいけど調べると、Null合体演算子というやつらしい。

 `||` と違って、`null` と `undefined` 以外の値の時は左の値を返す。
左辺が `''` や `0` の場合は左の値を評価して返す演算子。

## いろんなパターン

```js
null ?? 'hoge' // => 'hoge'
undefined ?? 'hoge' // => 'hoge'
false ?? 'hoge' // => false
0 ?? 'hoge' // => 0
'' ?? 'hoge' // => ''
NaN ?? 'hoge' // => NaN
```

参考：
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
IBM Cloud Object Storage(ICOS)にcurl+HMACでアクセスする

#はじめに

 IBM Cloud Object Storage(ICOS)に対する認証方式にはIAMとHMACの２通りがあることは、[ここ](https://qiita.com/khayama/items/abe223073f286d9ac16a)に記載されているとおりです。

HMACの場合は大抵はなんらかのツール（コマンドラインだと[IBM Cloud CLI](https://cloud.ibm.com/docs/cloud-object-storage?topic=cloud-object-storage-ic-use-the-ibm-cli
)とか[AWS CLI](https://cloud.ibm.com/docs/cloud-object-storage?topic=cloud-object-storage-aws-cli)とか[s3fs](https://cloud.ibm.com/docs/cloud-object-storage?topic=cloud-object-storage-s3fs)など。GUI系ツールだと[Cyberduck](https://cloud.ibm.com/docs/cloud-object-storage?topic=cloud-object-storage-cyberduck)とか[Cloudberry](https://cloud.ibm.com/docs/cloud-object-storage?topic=cloud-object-storage-cloudberry)とかWinSCPなど）を使うことが前提となっており、IBM Cloud docsにもHMACでのcurl呼び出しは記載はありませんでした。[IAM前提でのcurlの利用方法](https://cloud.ibm.com/docs/cloud-object-storage?topic=cloud-object-storage-curl)はあるんですけどね。

というので、HMACを利用したcurlによるICOSへのアクセス方法（とりあえずデータ取得）についてサンプルスクリプトを書いてみました。

#結論

こんな感じ。環境変数部分は自分で書き換えてください。

```bash:icos_access.sh
#!/bin/sh

#Environment
icosendpoint=s3.private.jp-tok.cloud-object-storage.appdomain.cloud
bucket=xxxxx
filename=xxxxx
ACCESS_KEY=xxxxxxxxx
SECRET_KEY=xxxxxxxxx

#Execution
resource="/${bucket}/${filename}"
contentType="text/html"
dateValue=$(date -R)
stringToSign="GET\n\n${contentType}\n${dateValue}\n${resource}"
signature=$(echo -en ${stringToSign} | openssl sha1 -hmac ${SECRET_KEY} -binary | base64)
curl -sO "https://${icosendpoint}/${bucket}/${filename}" \
     -H "Authorization: AWS ${ACCESS_KEY}:${signature}" \
     -H "Date: ${dateValue}" \
     -H "Content-Type: ${contentType}"
```

```shell-session:実行例（上記スクリプトのファイル名にindex.htmlを指定）
$ rm index.html
$ ./icos_access.sh
$ cat index.html
Hello World!
```
SCORM1.2コンテンツの検証ツール Reload SCORM1.2 Playerを使えるようにする

#概要
SCORM1.2コンテンツの検証に便利な「Reload SCORM1.2 Player」のインストール方法です。
マニアックすぎて需要ないかと思いますが、新しいPCへのセットアップついでに記録に残します。

#Reload SCORM1.2 Playerのダウンロード
http://www.reload.ac.uk/new/scormplayer.html
ここから「Download SCORM 1.2 Player version 1.2.2 cross-platform Install (9.64 mb)」をクリックしてダウンロードし、zipファイルを展開します。

※注意
検索エンジンで検索すると、1.2.1という古いバージョンのページが検索上位に挙がってくることがあります。それはバグがあり動かないので、トップページからたどって最新版を入手することをおすすめします。
おそらく、もう1.2.2からバージョンアップはされないと思いますが。

#Javaのダウンロード
https://java.com/ja/download/
ここの「無料Javaのダウンロード」からダウンロードし、インストールします。
Javaのソフトウェアは、SDK,JDKとかいろいろバージョンがありますが、シンプルにここからインストールするものだけで十分です。

#起動
Javaのインストールができていれば、```reload-scorm-player.jar``` がJavaアイコンに代わっているので、ダブルクリックすれば起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24420/aa6cd343-2ca6-3fad-4634-a76a1cef8952.png)

起動した画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24420/25a0f4bd-4a65-df8b-9324-24c6e8bebbe1.png)


以上。
このソフトの使い方は割愛します。
jQueryのanimate()で透明度を付けて背景色だけを変える

# 背景色をふわぁーっと変えたい
`animate()`をつかう。

以下の例だと子要素まで透明にしてしまうので、文字も透明にしてしまう。
`opacity`ってそういうやつなんだって。

```javascript

$("#test").mouseover(function(){
  $(this).animate({ 
    backgroundColor: "#ffffff",
    opacity: 0.5
  }, 1000, 'linear');
});

```
# 文字を透明にせず、背景のみ半透明なものをアニメーションする

じゃあ、`opacity`を消して
`#ffffff00` みたいな感じで透明度を付けようとしても反映されないンゴ。
そんな時は、`rgb(0,0,225,0.5)`的な感じにすると透明度が設定できるようになる。
  
```javascript

$("#test").mouseover(function(){
  $(this).animate({ 
    backgroundColor: "rgb(0,0,225,0.5)"
    // opacity: 0.5 ← opacity は不要！
  }, 1000, 'linear');
});

```
そうすれば半透明の背景のみをアニメーションをつけて表示非表示できるようになる！文字も透明にならない！
コードレビュー入門

ソーシャルゲーム業界で何年かコードレビューをやってきた中で、 **「よく指摘するポイント」** や **「間違えやすい箇所」** などが少し見えてきましたのでご紹介できたらと思います。

##### 内容
- コードレビューでどこから見ていいかわからない方。
- コードレビューでバグの見逃しが多い方。

##### 注意
- 個人的主観でポイントをご紹介しています
- 紹介している内容がチェックできていれば問題ないという趣旨ではありません

## レビューポイント
- 既存変数名の利用
    - 意図的であれば問題ないのですが、気づかず同じ変数名をつけていませんか？
- ループ処理
    - ループ内で同じDB取得や計算をおこなっていませんか？
- 取得するデータ、または加工するデータは最小限にしましょう
    - 最終的に10件のデータしか表示しないのに100件のデータ取得をおこなったり、100件分の付属情報を計算したりするのは非効率です
- DBがMaster-Slave構成をとっている場合は、適切に選択できているか
    - 不必要にMasterを利用しすぎていないでしょうか？
    - Slaveのレプリケーション遅延は考慮できているでしょうか？
- エラーハンドリング
    - DBやCacheなどのコネクションエラーや更新/追加処理が中途半端に進んでいないかなどエラーを適切に扱えているか？
- 境界判定
    - 0, false, null などを混在して扱っていないか？
- エラー時の挙動確認
    - エラー時の処理に不具合がないか？
- 取得値のチェック
    - get や post で受け渡している値を適切にチェックしているか？
- エラー出力
    - 適切なエラーが出力されるか？（実際にエラーが起こった際に問題箇所の特定が容易か？）
- 不必要なコード削除
    - 可読性やメンテナンス性が下がるため、使用していないコードは極力削除しましょう

※現在もコードレビューをする機会は多いため不定期で更新いたします。
ApolloServerのPlaygroundでクエリは発行できるがDocsが真っ白の時の対処法

introspectionがデフォルトでfalseなので、trueにしたら動いた。

```js
new ApolloServer({
  // ...
  introspection: true,
});
```

## 参考
https://www.apollographql.com/docs/apollo-server/api/apollo-server/
競技プログラミング練習記 No.14【ABC143練習】

初回 -> [はじめに](https://qiita.com/easychoco/items/a9ae28aca97cfe47091f)

[ABC143](https://atcoder.jp/contests/abc143)を解きました。
4完です。
E問題は解説を見て解きました。

|問題|時間|アルゴリズム|実行時間
|:-:|:-:|:-:|:-:|
| A |  1min |-|1ms|
| B |  3min |畳み込み|1ms|
| C |  4min |std::unique()|2ms|
| D | 25min |二分探索|60ms|
| E | - |ワーシャルフロイド法|90ms|



## A
```c++
	int a, b;
	cin >> a >> b;
	cout << max(0, a - 2 * b);
```
やるだけ

## B
``` c++
	int n;
	cin >> n;
	vector<int> d(n);
	for(int i = 0; i < n; ++i)
	{
		cin >> d[i];
	}

	int ans = 0;
	for(int i = 0; i < n; ++i)
	{
		for(int j = i + 1; j < n; ++j)
		{
			ans += d[i] * d[j];
		}
	}
	cout << ans;
```
やるだけ
`O(N^2)`ですが、畳み込みの計算なので高速化すると`O(N)`で解けます。
（ここではやりません）
詳しくは[こちら](https://atcoder.jp/contests/atc001/tasks/fft_c)

## C
``` c++
	int n;
	string s;
	cin >> n >> s;
	s.erase(unique(s.begin(), s.end()), s.end());
	cout << s.length();
```
`std::unique()`関数が問題文の通りの操作をしてくれます。
つまり、隣り合う重複要素を削除してくれます。
座標圧縮問題などでも使える便利関数ですね。

## D

``` c++
	int n;
	cin >> n;
	vector<int> l(n);
	for(int i = 0; i < n; ++i)
	{
		cin >> l[i];
	}

	sort(l.begin(), l.end());
	
	ll ans = 0;
	for(int i = 0; i < n - 2; ++i)
	{
		for(int j = i + 1; j < n - 1; ++j)
		{
			vector<int>::iterator iter = lower_bound(l.begin(), l.end(), l[i] + l[j]);
			ll size = iter - l.begin();
			ans += size - j - 1;
		}
	}
	cout << ans;
```
三角形の3辺のうち2つを先に決めて、条件に合う3つ目の辺を探します。
これは二分探索でみつかりますね。`lower_bound()`関数を使いましょう。
イテレータで返ってくるのですが、イテレータ同士の減算`iter - l.begin()`により先頭から何番目かが分かります。

## E

```c++
	const ll INF = 1LL << 60;
	ll cost[301][301];
	ll tank[301][301];

	ll n, m, l;
	cin >> n >> m >> l;
	for(int i = 0; i < n; ++i)
	{
		for(int j = 0; j < n; ++j)
		{
			cost[i][j] = INF;
		}
		cost[i][i] = 0;
	}

	ll a, b, c;
	for(int i = 0; i < m; ++i)
	{
		cin >> a >> b >> c;
		a--; b--;
		cost[a][b] = cost[b][a] = c;
	}

	for (int k = 0; k < n; k++){			// 経由する頂点
		for (int i = 0; i < n; i++) {		// 始点
			for (int j = 0; j < n; j++) {	// 終点
				cost[i][j] = min(cost[i][j], cost[i][k] + cost[k][j]);
			}
		}
	}

	for(int i = 0; i < n; ++i)
	{
		for(int j = 0; j < n; ++j)
		{
			tank[i][j] = (cost[i][j] <= l) ? 1 : INF;
		}
	}

	for (int k = 0; k < n; k++){			// 経由する頂点
		for (int i = 0; i < n; i++) {		// 始点
			for (int j = 0; j < n; j++) {	// 終点
				tank[i][j] = min(tank[i][j], tank[i][k] + tank[k][j]);
			}
		}
	}

	int q;
	cin >> q;
	int s, t;
	for(int i = 0; i < q; ++i)
	{
		cin >> s >> t;
		s--; t--;
		cout << (tank[s][t] == INF ? -1 : tank[s][t] - 1) << endl;
	}
```
ワーシャルフロイド法ですね。初めてコンテストで使いました。
ただワーシャルフロイド法を使うのではなく、応用的な使い方をしています。
ゆくゆくは自分で思いつけるようになりたい。まずはお試しとしての初体験でした。

以上です。ありがとうございました。
Twitterで新しく録音したものを共有できるようになったみたいなので（大雑把に）仕様を調べてみた

#はじめに
こんにちは。あなたは Twitter してますか？
僕はほぼサービス開始当初から初めてほぼ毎日ツイートしています。（たぶん）
（とはいえ当時のアカウントなどは残っていたりしませんが）
また、当記事は画像が多めになることを先に書いておきます。

#環境
iPhone SE 第2世代 64GB ホワイト iOS 13.4.1
Twitter 公式クライアント バージョン 8.23
https://apps.apple.com/jp/app/twitter-ツイッター/id333903271

#それはおいておいて
<img width="375" alt="IMG_0542.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227415/b5d3e618-18f2-da5e-e88b-21d7117157af.png">
本日未明、iPhone で Twitter を起動して、ツイートしようと思ったら、見慣れないアイコンが増えていることに気づきました。
画像だけじゃ分かりにくいですね。
![IMG_0542のコピー.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227415/f2b2feee-07b3-0183-4307-d08461758332.png)
画像に注釈を入れました。
これで分かりやすいことでしょう。
これは何なのかな。ということでタップしてみると、
このような画面に遷移しました。
どうも、音声を録音できるようです。
<b>（これいる？）</b>
<img width="375" alt="IMG_0543.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227415/35994cd0-b1f5-ece8-8099-322f06163196.png">
実際に録音してみたものがこちら。
僕の
汚い
声は流れません。安心してください。
どうやら、動画ファイルとして扱われた上でアップロードされるようです。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">録音したものの共有テスト <a href="https://t.co/dkFouirJqr">pic.twitter.com/dkFouirJqr</a></p>&mdash; ゆり (@F_Y_lix) <a href="https://twitter.com/F_Y_lix/status/1273403576539205632?ref_src=twsrc%5Etfw">June 17, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<img width="1296" alt="スクリーンショット 2020-06-18 9.15.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227415/9c83f8dd-db1e-fb24-daa2-d89f20226d34.png">
録音して音を検知している間はこのように自分の Twitter アイコンの周りに波形（というのか？）が出ます。
<img width="375" alt="IMG_E076AA9C2C59-1.jpeg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227415/5ed59a0d-10a5-090d-3d41-cd6211d270e7.jpeg">
一時停止もできます。
<img width="375" alt="IMG_0548.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227415/5e45d4b5-27dc-3a62-bd83-2a273f5b48e5.png">
動画として扱われる以上（Twitterの仕様上）、2分20秒を超えるとそれ以上の録音はできませんが、
2つ目の録音ファイルとして自動で続けて録音してくれるようです。
<img width="375" alt="IMG_0549.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227415/05e0e293-6b08-c247-8e89-8d200b2dcfe7.png">
完了で確定でき、録音したファイルのトリミング（編集）はできません。（なんで？）
<img width="375" alt="IMG_0550.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227415/23a2032b-e2cc-2bc2-1f40-23b6574157a9.png">
リプライとして音声をツイートすることはできないようですね。
<img width="375" alt="IMG_0552.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227415/fa3da690-6519-af65-c8f2-aab3b4a51870.png">
なお、端末自体のカメラロールには保存されないようです。
<img width="375" alt="IMG_0551.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227415/ef9e3dc0-bb53-a84f-443b-4f0bf9579030.png">
#最後に
僕みたいな一般人的には<b>これいる？</b>とは思いますけど、僕の応援してる声優さんとかがこれを利用して、何かしらの楽しいことしてくれたら嬉しいですよね。

ただ、2分20秒って短いよね。

Twitter公式のヘルプページはこちら。
https://help.twitter.com/en/using-twitter/voice-tweet
日本語ページは存在しませんが、まあ簡単な英語で書かれているので誰でも読めることでしょう。

<b>※この記事を寄稿する6時間前ぐらいには使えるようになっていたみたいです。
※下記参照</b>
https://www.theverge.com/2020/6/17/21294481/twitter-audio-tweets-now-available-iphone-ios
snippet: https OpenSSL 関連

## Let's Encrypt

* [メモ: Let's Encrypt でhttps化してくれるコンテナ - Qiita](https://qiita.com/tukiyo3/items/590f3284d992fe5d03fa)

## 自己署名証明書

* [Windows XP SP3のIE6でも閲覧出来る自己署名証明書の作成方法とnginx (enable-weak-ssl-ciphers) - Qiita](https://qiita.com/tukiyo3/items/340d5e18b6db6404c02c)
* [自己署名証明書でhttpsアクセスができるコンテナ - Qiita](https://qiita.com/tukiyo3/items/3d1634a1fa0477976f74)
* [クライアント証明書を要求するサイトの構築（Apache+OpenSSL）その1 - Qiita](https://qiita.com/tukiyo3/items/b5e8b3efce800b0fd269)


## OpenSSL

* [XP IE6でhttps閲覧できるのはOpenSSL 1.0.2まで ( DES-CBC3-SHA ) - Qiita](https://qiita.com/tukiyo3/items/d42c5ec55a34c02347d7)
2.SlackAPP構築とGASでSubscription認証[SlackAppで勤怠記録したい]

チャンネル指定してSlack投稿を取得
文字をざっくり検索して指定ワードがあったら
Googleスプレッドシートに保存する勤怠記録したいメモ

##作業流れ

- :one:認証用スクリプト記載したGAS準備
 - https://qiita.com/mmt/items/c899ef5420b51227fbfe

- :two: SlackAPP構築とGASでSubscription認証(いまここ:construction_worker:)
 - https://qiita.com/mmt/items/54b522b50064237a59da

- :three:スプレッドシートにデータ保存GASコーディング
 - https://qiita.com/mmt/items/1ae5ef27f5e2b935f80b

##新規APP作成
ワークスペースを指定してAPPを新規作成
https://api.slack.com/apps

##EventSubscriptions設定

### EventSubscriptionsを開く
![NoName_2020-6-11_17-52-3_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/13d51dc3-29e8-27ec-45b1-18708885364a.png)

### EnableEventをON
![NoName_2020-6-11_17-52-19_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/c764ff54-ad4c-89e1-4805-021d1e266adb.png)

### GASで生成されたURLを入力
認証が完了するとValifiedが表示
![NoName_2020-6-11_17-55-10_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/60de5b2b-d86e-532b-5953-9cc576d11ff2.png)

### Subscribe to bot events権限追加
Slackに投稿されたメッセージを受け取れる権限を追加

```
message.channels
```

![NoName_2020-6-11_17-56-20_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/84752125-de2f-76a6-d246-af316c0f67d8.png)

##APPインストール

### OAuth & Permissionsからインストール

#### 初回は下記の表示
![NoName_2020-6-11_17-58-41_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/b8fec98e-675a-2ba4-4055-1695ee34179c.png)

2回目以降はToken表示されます
![NoName_2020-6-11_17-58-56_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/a2a69831-6bb9-3cbb-ebe3-42aabdb797f4.png)

ここで生成されたTockenをGASで利用するのでメモ

##参考サイト
【GAS】SlackのEvent APIを用いて、投稿などをGASで受け取って処理してみよう！
https://www.pnkts.net/2020/03/28/slack-event-api
1.認証用スクリプト記載したGAS準備[SlackAppで勤怠記録したい]

チャンネル指定してSlack投稿を取得
文字をざっくり検索して指定ワードがあったら
Googleスプレッドシートに保存する勤怠記録したいメモ


##作業流れ

- :one:認証用スクリプト記載したGAS準備(いまここ:construction_worker:)
 - https://qiita.com/mmt/items/c899ef5420b51227fbfe

- :two: SlackAPP構築とGASでSubscription認証
 - https://qiita.com/mmt/items/54b522b50064237a59da

- :three:スプレッドシートにデータ保存GASコーディング
 - https://qiita.com/mmt/items/1ae5ef27f5e2b935f80b

##認証用スクリプト記載したGAS準備

GoogleDriveでスプレッドシートを新規作成
###ツール>スクリプトエディタ　下記のコードを記載
![NoName_2020-6-18_9-14-15_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/9f03d3b2-68fd-93f8-1252-ae4b50f778a2.png)


```
function doPost(e){
  //バリデーション用
  var params = JSON.parse(e.postData.getDataAsString());
  return ContentService.createTextOutput(params.challenge);
}

function doGet(e){
  doPost(e);
}
```

![NoName_2020-6-17_10-9-42_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/050dbd38-8663-8c50-f7bc-a1deea131daa.png)

###公開>ウェブサプリケーション公開　を実行

![NoName_2020-6-18_9-21-10_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/3b449f31-287e-4df0-f12f-17145cbe2eeb.png)

###赤枠の箇所をAnyoneにするとSlackからアクセス可能になるようです
![NoName_2020-6-18_9-22-42_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/e7e569b2-2d33-371b-ff6a-b93bc5c4e701.png)

###Current web app URL:をメモ
ここで生成されたURLをSlackAPPのSubscriptionで認証させます
![NoName_2020-6-18_9-21-23_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/ace90d34-a3ce-141e-0b3a-3dc52de5b2b0.png)
アウトプットとは

「アウトプットは大事」とよく言われます。ですが、「具体的にアウトプットってどうしたらいいの？」と問われたら、即答できますか？（私はできませんでした。）

[アウトプット大全](https://www.amazon.co.jp/dp/4801400558)より、アウトプットの具体例をまとめます。

## 対象読者

「具体的にアウトプットってどうしたらいいの？」という方

## 定義

- インプット

  - 入力：脳内世界が変化
  - 具体例
      - 読む
      - 聞く

- アウトプット
  
  - 行動：現実世界が変化
  - 具体例
      - 書く
      - 話す
      - ToDoを作成する
      - 問題を解く

- **フィードバック**

  - 修正：適切に行わないと成長につながらない

難しく考えることはありません。**インプットされた物を元に出力する行為全て**がアウトプットに当たります。

ただし、**フィードバックは適切に行ってください**。

※ あくまで[著者](https://kabasawa3.com/blog/)の見解です。上司の見解とは違う可能性があります。

## アウトプットなくして成長なし

アウトプットを行うことで、「身につく」ことが容易になります。理想的なインプットとアウトプットの比率は**3:7**といわれています。

効率的な成長を実現するためにも

![cycle.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609106/3bedf8bd-2cd5-ea03-5306-6c336683d2ca.png)

のサイクルを回してください。

- インプットだけの場合の問題点
    - 「分かったつもり」で終わる可能性がある
    - 思った以上に記憶に残らない
- フィードバックがない場合の問題点
    - 誤った方向に突き進む可能性がある
    - 堂々巡りを繰り返す可能性がある

## 今日からできるアウトプット

### 話す

昨日の出来事を話すだけでもいいです。

  - 自分の意見・気付きを盛り込むこと
  - ネガティブな言葉・愚痴は禁止
    - ネガティブ思考になる
    - ネガティブな言葉は成功に結び付かない

### 説明する

公式等を、説明の為のエピソードに変換すると記憶に残りやすいです。

### 「気付き」をメモする

「気付き（アハ！体験）」の持続時間は30秒～1分といわれています。その間にメモするようにしましょう。

### ToDoリストを作る

ToDoリストを作るメリットは以下のようなものです。

- 1日の流れが確認できる
- 作業が終わるごとに集中力が途切れない
- うっかりミスを防ぐ
- 仕事が効率化する
    - 一つの仕事に集中できる -「あれもこれも」と予定等を考える必要がない

### 行動する

実際に行動することで「自己満足」を「自己成長」に繋げます。ToDoをDoすることが重要です。Doしないと「自己満足」のままです。

### 始める

車のエンジンをかけないと暖気できないのと同じく、作業を開始しないと「作業興奮（ノッている状態）」は起こりません。
「作業興奮」が起こるまでの時間は5分です。

### 完成させる

完成度は100点満点中30点でよいから、まず完成させましょう。直し・ブラッシュアップで100点へ持っていけばいいです。

### 続ける

以下に、「続ける」ためのTipsをまとめます。

- 「今日やること」だけを考える
    - 先のことは考えない
- 楽しみながら実行する
- 目標を細分化する
    - 難易度を「頑張ればなんとかなりそうなレベル」にする
- 結果を記録する
- 結果が出たらご褒美を与える

### 日記を書く

ポジティブな内容で書いてください。満足度があがります。

以下にTipsをまとめます。

- まずは「5分」「3行」から始める
- ポジティブ日記を書く
- 質・量ではなく、毎日書く
- 制限時間を決める
- ネガティブな内容をポジティブな内容に変換する

### 時間管理する

以下にTipsをまとめます。

- 制限時間を決めてアウトプットする
    - 例：集中して15分
- スキマ時間の活用する
- アウトプット量を稼ぐ
    - 場合によってはインプット量を減らす
      - 重要度：アウトプット＞インプット

### おまけ

#### 上手な文章を書く

**「たくさん読んで、たくさん書く」のが結局は近道です。** [アウトプットのサイクル](#アウトプットなくして成長なし)を回しましょう。

## 終わりに

アウトプット等の定義とともに、実行のハードルが低いと思われるアウトプットの例をまとめました。皆さんも、どんどんアウトプットして成長につなげましょう。

## 参考

[アウトプット大全](https://www.amazon.co.jp/dp/4801400558)

https://qiita.com/Shinji-m/items/250421a81b319f24576c

https://qiita.com/terra_yucco/items/74d5782ac130dce92814

https://qiita.com/H-Bayashi/items/808cb42aa25b0e2478fa
embot で三々七拍子

embot というプログラミング教材があります。
https://www.embot.jp/education/

youtube にもいくつか紹介動画がアップされています。
先日(2020-06-14)の動画 https://www.youtube.com/watch?v=LP_kU-ibjk0
では、三々七拍子の動作をさせるお題が出されていました。

私なりにこの課題に取り組んでみました。
解決例の動画で示されているものものより構造的にできたと思っています。
https://www.youtube.com/watch?v=W-lfmB54KEI

![wmbot-001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14958/d42ec283-da70-318c-bd0f-bb9de0097d25.png)

下側にある　function1 の中身が "手拍子",function3 の中身が "1休拍", function8 
の中身が "拍手"です。

![wmbot-002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14958/4371c6a7-1a7c-cf74-ca31-5a64d04c0c9a.png)

![wmbot-003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14958/7edc3720-401e-2908-b478-54ae4a31c4e2.png)

![wmbot-004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14958/68558aaf-9df6-a4ec-ae1f-f1a7137ae3e8.png)

function4, function5 は "手拍子" の呼び出し、function6, function7 は "1休拍" の呼び出しです。

スタート 直後の function9 は ""倣え"　で最初のポーズをとるものです。

![wmbot-005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/14958/b227e3c6-caf1-a94e-6cbc-ec99a67916d8.png)

最初の画面の右端真ん中にある　３　という部分はプログラム中ではポストイットトという部分の値になります。この値を変化させることで手拍子の速度を調節できるようにしています。
3 拍子を 2 回繰り返し、そのあと 7 拍子、ということがプログラム上で明示的にいます表れています。そしてそれを 3 回繰り返して最後に拍手をするということも。
windowsでiverilog その33

#概要

windowsでiverilogやってみた。
sin、書いてみる。

#サンプルコード


```

module sin(input clk, rst, output [7:0] out);
	reg [7:0] out;
	reg [7:0] sine[29:0];
	integer i;
	initial 
	begin
		i = 0;
		sine[0] = 0;
		sine[1] = 16;
		sine[2] = 31;
		sine[3] = 45;
		sine[4] = 58;
		sine[5] = 67;
		sine[6] = 74;
		sine[7] = 77;
		sine[8] = 77;
		sine[9] = 74;
		sine[10] = 67;
		sine[11] = 58;
		sine[12] = 45;
		sine[13] = 31;
		sine[14] = 16;
		sine[15] = 0;
		sine[16] = -16;
		sine[17] = -31;
		sine[18] = -45;
		sine[19] = -58;
		sine[20] = -67;
		sine[21] = -74;
		sine[22] = -77;
		sine[23] = -77;
		sine[24] = -74;
		sine[25] = -67;
		sine[26] = -58;
		sine[27] = -45;
		sine[28] = -31;
		sine[29] = -16;
	end
	always@ (posedge(clk))
	begin
		out = sine[i];
		i = i + 1;
		if (i == 29)
			i = 0;
	end
endmodule

module test();
	reg clk;
	reg rst;
	wire [7:0] out;
	sin u(.clk(clk), .rst(rst), .out(out));
	initial
	begin
		$monitor("%d", out);
		clk = 0;
		rst = 1;
		#10
			rst = 0;
		#10
			rst = 1;
		#300
			$finish;
	end
	always
	begin
		#5
			clk = 1;
		#5
			clk = 0;
	end
endmodule




```

#実行結果


```


  x
  0
 16
 31
 45
 58
 67
 74
 77
 74
 67
 58
 45
 31
 16
  0
240
225
211
198
189
182
179
182
189
198
211
225
  0
 16
 31


```

以上。
Python超初心者の超初心者のためのPython #インデックス、スライス

環境
windows7　（Mac Book Pro 16inch欲しい）
Visual Studio Code
chrome
python ver3.8.3

この記事はプログラミング初心者かつPython初心者に向けて記述します。

##インデックス

前回、リストを学習しましたが「リストってただ`print`で出力するならテキストでそのまま内容書けば良いんじゃないの？」と初学者のツイートで散見されます。
はい私もそう思ってました。
そこで今回はそのリストを使ってこんな事しますよーの前の前知識としてまずは`インデックス`を解説したいと思います。

```python:index.py
japanese_syll=['あ','い','う','え','お']
#変数を除いて[   ]だけ表示しその下に対応する'インデックス'を記します。
['あ','い','う','え','お']
[ 0    1    2    3    4]
[ -5  -4   -3   -2   -1]

```

インデックスは`0`から始まります。
マイナスは最後尾から`-1`と始まります。
文字列`あ`を取り出したい時は

```python:list.py

japanese_syll=['あ','い','う','え','お']

print(japanese_syll[0])
#あ
print(japanese_syll[-5])
#あ
```

と、このようになります。
ここまでインデックスの説明でしたが、スライスも登場しました。

##スライス
スライスは上記の様にリストの一部の要素を取り出す操作です。　


```python:list.py
mmaker_list = ["peach", "princess", "kuppa", [1, 2, 3, 4, 5], "mario"]

list_x = mmaker_list[0]
print(list_x)
#インデックス番号0の要素を取り出します。
#peach

list_x = mmaker_list[1:3]
print(list_x)
#インデックス番号1から3の前までの要素を取り出します。
#['princess', 'kuppa']

list_x = mmaker_list[:2]
print(list_x)
#インデックス番号2の前までの要素を取り出します。
#['peach', 'princess']

list_x = mmaker_list[3][4]
print(list_x)
#多重リストの要素を取り出すには、最初にインデックス番号の3と
#多重リスト中のインデックス番号4で取り出します。
#5
```

####ちょこっと応用
リスト中の中身を書き換えることが出来ます。

```python:list.py
mmaker_list = ["peach", "princess", "kuppa", [1, 2, 3, 4, 5], "mario"]

mmaker_list[2] = "ghost"
print(mmaker_list)
#['peach', 'princess', 'ghost', [1, 2, 3, 4, 5], 'mario']

```


fin

##目次

[Python超初心者の超初心者のためのPython #Hello World](https://qiita.com/Macchino5/items/ddc0f4abc6168bab3448)

[Python超初心者の超初心者のためのPython #こんがらがりやすいとこ](https://qiita.com/Macchino5/items/25862df5f851d09e55d4)

[Python超初心者の超初心者のためのPython #型（type）と型（type）の確かめ方](https://qiita.com/Macchino5/items/caf4d6936f274cd7502a)

[Python超初心者の超初心者のためのPython #型（type）を変換する方法：str編](https://qiita.com/Macchino5/items/23183f8b2a945d8ecc5e)

[Python超初心者の超初心者のためのPython #型（type）を変換する方法：int、float編](https://qiita.com/Macchino5/items/9d14ab0c50d228464eac)

[Python超初心者の超初心者のためのPython #.txtファイルを作業中の.pyで読み込む](https://qiita.com/Macchino5/items/6675f1079e9c9ed945bb)

[Python超初心者の超初心者のためのPython #関数1](https://qiita.com/Macchino5/items/c403a2a997a0247adc96)

[Python超初心者の超初心者のためのPython #関数2](https://qiita.com/Macchino5/items/95750957b6ce266add50)

[Python超初心者の超初心者のためのPython #len関数]
(https://qiita.com/Macchino5/items/a64347f9e832406d3c24)

[Python超初心者の超初心者のためのPython #リスト](https://qiita.com/Macchino5/items/ccdb61e0caf75c1d523c)
React 学習①（Buttonクリック時にTextの値を渡す。）

#1 Buttonクリックしたときに、テキストの値を受け取りたい。

■やりたいこと

［テキストフィールド］［ボタン］

ボタンクリックした時に、テキストフィールドの値を受け取りたい。
https://ja.reactjs.org/docs/forms.html

理解したイメージ
1.大枠のクラスの中にstateとして、変更される値（今回はテキストフィールドの値）を保持する入れ物を作成する。
2.handleChangeファンクションを作成して、テキストの値を変更したら、その値がstateの値を変更するようにする。この時、handleChange側に渡す引数のeは省略して書くと、あとでerrorのeと混同してしまうのは、まだ自分がjavaScriptに慣れていないからなのかもしれない。
3.ボタン側のイベントとしてhandleClickを用意する。handleClickで大域変数的なstateの値を利用することによって、ボタンで部品の値を受け取ることが可能。

```Sample1.js
import React, { Component } from 'react';
import { Form, Button, Popover } from 'react-bootstrap'

class Sample1 extends Component {
    constructor(props) {
        super(props);
        this.state = {//使いたい値を入れる箱
            drink: null,
        };
        this.handleDrinkChoice = this.handleDrinkChoice.bind(this);
        this.handleDrinkClick = this.handleDrinkClick.bind(this);
    }

    handleDrinkChoice(event) {
        this.setState({ drink: event.target.value });
    }

    handleDrinkClick() {
        alert("your choice is :" + this.state.drink + ".");
    }

    render() {
        return (
            <div>
                <Form>
                    <Form.Group>
                        <Form.Label>coffe or tea</Form.Label>
                        <Form.Control type="text" placeholder="Input your choice."
                            value={this.state.drink} onChange={this.handleDrinkChoice} />
                    </Form.Group>
                </Form>
                <Button variant="primary" onClick={this.handleDrinkClick}>Submit</Button>
            </div>
        );
    }
}

export default Sample1;
```



*参考
https://www.it-swarm.dev/ja/javascript/reactjs%E3%81%A7%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B/1046096180/
【ReactNative】API経由でデータを取得する

##①APIのアカウントを取得する

##②Axiosをインストール（ターミナルで）
https://github.com/axios/axios

##③axiosをインポートする

##④APIのエンドポイントを定義する
const URL =
`http://newsapi.org/v2/top-headlines?country=jp&apiKey=APIキー`;
※ここではNewsAPIを使用

##⑤APIを叩いて、中身を取得するメソッドの作成
```
//APIを叩いて、ニュースを取得するメソッド
//非同期の場合はasyncを用いる
const fetchArticles = async () => {
try {
const response = await axios.get(APIのURL);
setArticles(response.data.articles)
} catch (error) {
console.error(error);
}
};
```

##⑥コンポーネントがマウントされた時に実行する
jQueryの考え方

# はじめに

この記事では、jQueryを初めて扱う人向けに作成したものです。
もし、ご興味ある方は是非読んでみてください。

# jsファイルの注意点

jQueryは、js（javascript）ファイルに記載するものなのですが、ファイルを読み込む際は注意が必要です。例として、htmlファイルにjsファイル（sample.js）を読み込む場合は

```html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
    <script type="text/javascript" src="sample.js"></script>
  </head>
  <body>
    <p>jsファイルに読み込ませる文章</p>
  </body>
</html>
```
というように記載する（jQueryを使用するため、scriptタグがもう一つあります）のですが、htmlファイルを読み込んだ際に「jsファイルに読み込ませる文章」という文を変更させる場合に、もしsample.jsが

```javascript
$("p").text("文章が変化するかも")
```
となっていると、
#### 文章は変化しません！

・・なぜかといいますと、javascriptはhtmlファイルを読み込んでhtmlの要素（pタグなど）を識別できるようになってからでないと要素を認識してくれないので、htmlファイルが読み込み終えた後に起動する場合は、以下のように書きます。

```javascript
// この中に実行したい内容を入れると、実行される
$(function(){
  $("p").text("文章が変化するかも")
})
```

もし、気になる方は２つのケースでhtmlファイルを開くとどうなるかみてみてください！

# jQueryの構文

さて、ここまでで実行した内容の方に目がいった方がおられると思われますので、そちらの解説をいたします。まず、jQueryの基本的な構文といたしましては、次の通りです。

```javascript
$("セレクタ（要素名、クラス名など）")・・・（この後には、セレクタに実行するメソッドが付いてきます）
```
これは実はと言うとCSSと似ていて、最初にセレクタで指定した後にどんな処理を行うかを書いていくスタイルをとっております。そのため、先ほどのjsファイルの中身は

```javascript
  $("p").text("文章が変化するかも")
　→　pタグを指定して、その中の文章（text）を「文章が変化するかも」に変える
```

というようになります。（セレクタに$を付けることで要素が取得され、jQueryのメソッドが使えるようになります）

# セレクタに関する注意点

後は慣れていくと自然と使えるようになると思うのですが、ここで気をつけて欲しいのがセレクタがかぶることです。どういうことかといいますと、例えば

```html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
    <script type="text/javascript" src="sample.js"></script>
  </head>
  <body>
    <p>赤色にしたい！</p>
    <p>青色にしたい！</p>
  </body>
</html>
```

というhtmlファイルがあり、sample.jsを次のように書きます。

```javascript
$(function(){
 $("p").css("color","red")
 $("p").css("color","blue")
}) 
```
 このように書いてしまうと、

#### 全ての文章が青色になります。

理由といたしましては、pをセレクタにすると全てのpタグが指定された状態になり、その全てに色を変化させるように指示してしまっているからです。そのため、別々に指定したい場合には、クラス名かid名などを使用するようにしましょう。

```html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
    <script type="text/javascript" src="sample.js"></script>
  </head>
  <body>
    <p id="red">赤色にしたい！</p>
    <p id="blue">青色にしたい！</p>
  </body>
</html>
```
```javascript
$(function(){
 $("#red").css("color","red")
 $("#blue").css("color","blue")
}) 
```

# 【補足】 Railsにおけるクラス名の指定方法

Railsにおいて、最初にクラス名を「コントローラー名_アクション名」としておくと便利です。
例えば、mainsコントローラーのindexアクションであれば、

```ruby
class = "mains_index"
```
というように、ファイルの一番上のタグに指定しておけば、他のファイル内のクラス名とかぶらなくていいかなと思います。
Windows Master File Table($MFT) をElasticsearchにimportする

# Overview

[Windows EventLogをElasticSearchにimportする](https://qiita.com/sumeshi/items/491891d83c3aca224880)
[Windows EventLogをElasticSearchにimportする(のを100倍早くする)](https://qiita.com/sumeshi/items/cb2fbafe59c2c83e3085)
[Windows EventLogをjson形式に変換する](https://qiita.com/sumeshi/items/f3e87f0412f9b05f85a3)

このへんの記事のMFT版です :sushi: 

DFIRをする際に, たまにMFT(Windowsのファイル管理テーブル)を調査する必要があるので自分用にライブラリ化しました.
内部でRust製ライブラリを使用しているのでなかなかに高速です.

僕のようにフォレンジック以外の用途として, ファイルを高速に検索するサービスを作ってる人もいるようです(凄い!).
Pythonで検索サービスなんかを作る際にはぜひ活用していただけると嬉しいです.

[社内ドキュメントを検索できる『検索君』というシステムを、MFT 高速 Index × Elasticsearch にアップグレードしている話](https://qiita.com/kikuchi_kentaro/items/536bdb3606fd8dffcd50)


# Usage

コンソールから使ったり

```bash
$ mft2es /path/to/your/MFT
```

Pythonスクリプトからインデックスすることもできます

```python
from mft2es import mft2es

if __name__ == '__main__':
  filepath = '/path/to/your/MFT'
  mft2es(filepath)
```

おまけ機能として, json形式へのエクスポートもサポートしています

```bash
$ mft2json /path/to/your/MFT /path/to/output/target.json
```

詳しいオプションなどは[github](https://github.com/sumeshi/mft2es)のほうに書いてありますので, そちらを御覧ください.


また, この手の$MFTなどのファイルは通常の方法では取り出せない(もしくは面倒)ので, AccessDataが無償で提供しているFTK Imagerなどを使うとマウスでカチカチするだけで取り出せていい感じなのではないかなと思います！ :thumbsup: 

https://accessdata.com/products-services/forensic-toolkit-ftk/ftkimager

色々方法はあるので, 自動化したいなどの場合はググって見ると良いです, 
日本語の記事は少ないですが...


# Installation

https://github.com/sumeshi/mft2es

pipでインストールしましょう

```bash
$ pip install mft2es
```


# Evaluation

インデックスのサンプルとして, 
[omerbenamram/mft](https://github.com/omerbenamram/mft) のsampleとして公開されている10MB程度のMFTファイルを使用しました.


```
$ mft2es ./MFT
> 00:12
```

```
$ mft2json ./MFT ./output.json
> 00:02
```

jsonへの変換は約2秒とそこそこ速いです.
`mft2es` の方が極端に遅いのは, macOS版DockerのElasticsearchを使用していることも要因っぽいですね.
あくまで目安ということで！

お わ り
画像の拡張子を付け替えるAppleScript

Classic Mac OSでは拡張子よりもCreator TypeやFile Typeでファイルを識別していました。
そのせいか、**社内ルールのオリジナル**の拡張子をつけた画像もありました……

さて、時代が流れて令和になったいまでもeps拡張子のpsdデータなど見かけることがあります。
Twitterでも同様なデータで困っている方がいらっしゃるようで公開してほしいと要望いただきました。

もともと自分用に書いたのでエラー処理などしていません。
画像の拡張子となっていますが、exiftoolでデータが取れれば他の種類のデータでも付け替えてしまいます。
付け替えたファイルにはラベルをつけるようにしていますが、不要なら該当行を削除やコメントアウトしてください。

※要[ExifTool](https://exiftool.org/)
サイトかhomebrewでインストールしてください。


``` AppleScript
on open dropList
	repeat with aFile in dropList
		my main(aFile)
	end repeat
end open


on main(aFile)
	--現在の拡張子
	set currentExtension to my getExtention(aFile)
	
	--内部の拡張子
	set shcmd to "/usr/local/bin/exiftool -T -Filetypeextension " & quoted form of POSIX path of aFile
	set contentExtension to do shell script shcmd
	
	if contentExtension is "" then return
	
	--現在のファイル名
	set nowName to name of (info for aFile)
	--リネーム後のファイル名
	set newName to my myDelimiters(nowName, currentExtension, contentExtension)
	
	if currentExtension is not contentExtension then
		tell application "Finder"
			--リネーム処理
			set (name of aFile) to newName
			--ラベルを設定
			set label index of aFile to 1
		end tell
	end if
	
end main


on getExtention(aFile)
	set aExt to name extension of (info for aFile)
	log aExt
	set aExt to do shell script "echo " & aExt & " | tr A-Z a-z"
	return aExt
end getExtention


on myDelimiters(theStr, FindStr, repStr)
	set OriginalDelimiters to AppleScript's text item delimiters
	set AppleScript's text item delimiters to FindStr
	set theStr to text items of theStr
	set AppleScript's text item delimiters to repStr
	set theStr to theStr as string
	set AppleScript's text item delimiters to OriginalDelimiters
	return theStr
end myDelimiters

```
Let's Encrypt でhttps化してくれるコンテナ (https-portal)

日本語のREADME

https://github.com/SteveLTN/https-portal/blob/master/README-ja.md

## 通常

```sh:docker-compose.yml
https-portal:
  image: steveltn/https-portal:1
  ports:
    - '80:80'
    - '443:443'
  restart: always
  volumes:
    - ./certs:/var/lib/https-portal
  environment:
    #STAGE: 'production'
    #FORCE_RENEW: 'true'
    DOMAINS: >-
      example.com -> http://111.111.111.111
```

### 複数ドメイン

```sh:docker-compose.yml
https-portal:
  image: steveltn/https-portal:1
  ports:
    - '80:80'
    - '443:443'
  restart: always
  volumes:
    - ./certs:/var/lib/https-portal
  environment:
    #STAGE: 'production'
    #FORCE_RENEW: 'true'
    DOMAINS: >-
      example.com -> http://111.111.111.111
      ,example2.com -> http://111.111.111.112
```


### 443のポートを変える場合

```sh:docker-compose.yml
https-portal:
  image: steveltn/https-portal:1
  ports:
    - '80:80'
    - '10443:443'
  restart: always
  volumes:
    - ./certs:/var/lib/https-portal
  environment:
    #STAGE: 'production'
    #FORCE_RENEW: 'true'
    DOMAINS: >-
      example.com -> http://111.111.111.111
```


## NAT下の場合

```sh:docker-compose.yml
https-portal:
  image: steveltn/https-portal:1
  ports:
    - '80:80'
    - '443:443'
  restart: always
  volumes:
    - ./certs:/var/lib/https-portal
  # NAT下の場合、hostsを使えばいけるっぽい？
  extra_hosts:
    - 'example.com:127.0.0.1'
  environment:
    #STAGE: 'production'
    #FORCE_RENEW: 'true'
    DOMAINS: >-
      example.com -> http://111.111.111.111
```

## コンテナとリンクする場合

```sh:docker-compose.yml
https-portal:
  image: steveltn/https-portal:1
  ports:
    - '80:80'
    - '443:443'
  links:
    - nginx
  restart: always
  volumes:
    - ./certs:/var/lib/https-portal
  environment:
    #STAGE: 'production'
    #FORCE_RENEW: 'true'
    DOMAINS: >-
      example.com -> http://nginx

nginx:
  image: nginx
```


## テスト段階では production を使わないほうが良い

* [レート制限 - Let's Encrypt - フリーな SSL/TLS 証明書](https://letsencrypt.org/ja/docs/rate-limits/)に引っかかる可能性がある
   * 1時間毎に 5 に制限 (stagingだと1時間ごとに60)


## 公式

* [steveltn/https-portal - Docker Hub](https://hub.docker.com/r/steveltn/https-portal/)

Certbotでの認証は以下がある。[チャレンジのタイプ - Let's Encrypt - フリーな SSL/TLS 証明書](https://letsencrypt.org/ja/docs/challenge-types/)

* HTTP-01
    * Webサーバの認証用ファイルを80番ポートでアクセスしてもらい、発行されたワンタイムトークンと検証する。
    * セキュリティの観点から80番ポートを変える気はないとのこと。
* DNS-01
    * ワンタイムトークンを対象ドメインのTXTレコードに登録し検証する。
* TLS-SNI-01
    * HTTP-01 の 443ポート版。[使われなくなった。](https://community.letsencrypt.org/t/march-13-2019-end-of-life-for-all-tls-sni-01-validation-support/74209)
* TLS-ALPN-01
    * 開発中の様子。Apache、Nginx、Certbotにはまだ対応していない。

`steveltn/https-portal`はHTTP-01に対応している。

## basic認証

* https://hub.docker.com/r/steveltn/https-portal

```sh
https-portal:
  # ...
  environment:
    DOMAINS: 'username:password@example.com -> <upstream>'
```
ウェブアプリケーション開発がしたい！

皆さん初めまして。tkseと申します。
2020年5月末からウェブアプリケーションを開発することを目標にRuby,Railsを勉強中です。

ここにはメモ書きのような形で日々の勉強の中で気づいたことや疑問を残していこうと思います。
訳のわからないことを言い出すかもしれません。その時はご指摘いただけると嬉しいです。
windowsでiverilog その32

#概要

windowsでiverilogやってみた。
zundoko、書いてみる。

#サンプルコード


```

module zundoko(input clk, input rst, output [7:0] char, output [3:0] state, output [3:0] n);
	localparam NEXT = 4'b0000;
	localparam DONE = 4'b1111;
	reg [7:0] r;
	reg [3:0] n;
	reg [7:0] char;
	reg [3:0] state = NEXT;
	always @(posedge clk or negedge rst)
	begin
		if (!rst)
		begin
			state <= NEXT;
			r <= 234;
			n <= 0;
		end
		else if (state == NEXT)
		begin
			r <= r * 5 + 1;
			state <= state + 1;
		end
		else if (state != DONE)
		begin
			if (n == 4)
			begin
				case (state)
				1:
				begin
					char <= "d";
					state <= state + 1;
				end
				2:
				begin
					char <= "o";
					state <= state + 1;
				end
				3:
				begin
					char <= "k";
					state <= state + 1;
				end
				4:
				begin
					char <= "o";
					state <= state + 1;
				end
				5:
				begin
					char <= "k";
					state <= state + 1;
				end
				6:
				begin
					char <= "i";
					state <= state + 1;
				end
				7:
				begin
					char <= "y";
					state <= state + 1;
				end
				8:
				begin
					char <= "o";
					state <= state + 1;
				end
				9:
				begin
					char <= "s";
					state <= state + 1;
				end
				10:
				begin
					char <= "i";
					state <= DONE;
				end
				endcase
			end
			else if (r < 127)
			begin
				case (state)
				1:
				begin
					char <= "z";
					state <= state + 1;
				end
				2:
				begin
					char <= "u";
					state <= state + 1;
				end
				3:
				begin
					char <= "n";
					state <= state + 1;
				end
				4:
				begin
					char <= " ";
					n <= n + 1;
					state <= NEXT;
				end
				endcase
			end
			else 
			begin
				case (state)
				1:
				begin
					char <= "d";
					state <= state + 1;
				end
				2:
				begin
					char <= "o";
					state <= state + 1;
				end
				3:
				begin
					char <= "k";
					state <= state + 1;
				end
				4:
				begin
					char <= "o";
					state <= state + 1;
				end
				5:
				begin
					char <= " ";
					n <= 0;
					state <= NEXT;
				end
				endcase
			end
		end
	end
endmodule

module test();
	reg clk;
	reg rst;
	wire [7:0] char;
	wire [3:0] state;
	wire [3:0] n;
	zundoko u(.clk(clk), .rst(rst), .char(char), .state(state), .n(n));
	initial
	begin
		$monitor("%s", char);
		clk = 0;
		rst = 1;
		#10
			rst = 0;
		#10
			rst = 1;
		#1000
			$finish;
	end
	always
	begin
		#5
			clk = 1;
		#5
			clk = 0;
	end
endmodule




```

#実行結果


```


d
o
k
o

d
o
k
o

z
u
n

d
o
k
o

d
o
k
o

z
u
n

z
u
n

z
u
n

d
o
k
o

z
u
n

d
o
k
o

d
o
k
o

z
u
n

z
u
n

z
u
n

z
u
n

d
o
k
o
k
i
y
o
s
i


```

以上。
Zshの複数行プロンプトでコマンド実行後は1行だけ残す

# やりたいこと

Zshの複数行プロンプトで、例えばGitのワーキングツリー状態などを出している場合、コマンド実行後は画面に残したくないんです。
<img width="572" alt="スクリーンショット 2020-06-13 8.29.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48289/8bd6b416-39b1-8e39-fee2-179fa34384fd.png">
Git情報は入力受付中のプロンプトにだけ出ていればよくて、コマンド実行後はGit情報を消して1行だけのプロンプトを画面に残したいわけです。

# やりかた

複数行プロンプトを設定する際、あらかじめ1行版のプロンプトを変数に入れておき、それ以外の行と連結する形で$PROMPTを設定しておきます。下記の例では、普段は1行のプロンプトですが、Gitリポジトリ内部にいるときのみ1行目がGit情報・2行目が通常のプロンプトとなるようにしています。

```zsh
# 1行版のプロンプトの中身を $BASE_PROMPT 変数に入れる
case $TERM in
    xterm*)
        BASE_PROMPT=$'%{\e]0;[%n@%m:%~]\a%}'$'[%n@%m%{\e[00m%}]%(5~,%-1~/.../%1~,%~)%# '
        ;;
    *)
        BASE_PROMPT=$'[%n@%m%{\e[00m%}]%(5~,%-2~/.../%2~,%~)%# '
        ;;
esac

# Gitが公式に配布している git-prompt.sh を利用
source ~/.zsh/git-prompt.sh

# プロンプト表示前にGitの状態を検知してプロンプトを書き換える
precmd () {
    local git_prompt="$(__git_ps1 '%s')"
    if [[ -n "$git_prompt" ]]; then
        # Gitリポジトリの内部にいるとき、ワーキングツリーの状態によって色を切り替える
        local color=34 # blue
        if [[ $git_prompt == *'*'* ]]; then
            color=31 # red
        elif [[ $git_prompt == *'%'* ]]; then
            color=33 # yellow
        elif [[ $git_prompt == *'+'* ]]; then
            color=32 # green
        elif [[ $git_prompt == *'$'* ]]; then
            color=35 # magenta
        fi
        PROMPT=$'\e['"$color"$'m(\ue0a0 '"$git_prompt"$')\e[0m\n'"$BASE_PROMPT"
    else
        PROMPT="$BASE_PROMPT"
    fi
}

# git-prompt.sh 用のオプション設定
GIT_PS1_SHOWDIRTYSTATE=1
GIT_PS1_SHOWSTASHSTATE=1
GIT_PS1_SHOWUNTRACKEDFILES=1
GIT_PS1_SHOWUPSTREAM=""
GIT_PS1_DESCRIBE_STYLE="branch"
GIT_PS1_SHOWCOLORHINTS=0
```

ここまでだけなら、ただの複数行プロンプトです。次が本記事のポイントで、コマンド実行後にプロンプトを1行だけ残す部分です。

```zsh
# Enter を打った時に実行する関数
function my_accept_line() {
    # プロンプトにgit状態も表示されている場合、git状態の表示を消す
    if [[ ${#PROMPT} -ne ${#BASE_PROMPT} ]]; then
        local saved_prompt=$PROMPT
        PROMPT=$BASE_PROMPT
        zle reset-prompt
        PROMPT=$saved_prompt
    fi
    zle accept-line
}
zle -N my_accept_line
bindkey '^M' my_accept_line
```

ZLEの機能を使って、Enterを打った際にプロンプトを書き換えます。一時的にプロンプトを1行版プロンプトにし、 `zle reset-prompt` によってプロンプトおよび入力されたコマンドを再描画するのがミソです。なお、再描画後はプロンプトを元の複数行版に戻しています。

# 結果

画面から不要な情報が消えてスッキリしました。
<img width="574" alt="スクリーンショット 2020-06-13 8.32.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48289/fde8ca39-fe34-b4a7-a619-5f45ebf7fd4a.png">
windowsでiverilog その31

#概要

windowsでiverilogやってみた。
乱数、書いてみる。

#サンプルコード


```


module rand(input clk, rst, output [7:0] out);
	reg [7:0] out;
	always @(posedge clk or negedge rst)
	begin
		if (!rst)
		begin
			out <= 234;
		end
		else
		begin
			out <= out * 5 + 1;
		end
	end
endmodule

module test();
	reg clk;
	reg rst;
	wire [7:0] out;
	rand u(.clk(clk), .rst(rst), .out(out));
	integer i,
		j;
	initial
	begin
		$monitor("%d", out);
		clk = 0;
		rst = 1;
		#10
			rst = 0;
		#10
			rst = 1;
		#300
			$finish;
	end
	always
	begin
		#5
			clk = 1;
		#5
			clk = 0;
	end
endmodule




```

#実行結果


```

  x
234
147
224
 97
230
127
124
109
 34
171
 88
185
158
 23
116
 69
 90
195
208
 17
 86
175
108
 29
146
219
 72
105
 14
 71
100


```

以上。
[Nuxt.js] cross-envを使い環境に応じてbaseURLを分ける

## cross-envを導入

```
yarn add cross-env
```

## 環境変数を作成

`env` ディレクトリを作成し、環境変数として使う値を作成する。今回はBASE_URLのみとする。

```vim:env/local.ts
module.exports = {
  BASE_URL: '/'
}
```

Github Pagesならリポジトリ名を入れる

```vim:env/production.ts
module.exports = {
  BASE_URL: '/somethings/'
}
```

## package.jsonのscriptsを編集

devやbuildコマンドにcross-envを仕込む

```json:package.json

{
  "scripts": {
    "dev": "cross-env NODE_ENV=\"local\" nuxt-ts --port=3003",
    "build": "cross-env NODE_ENV=\"production\" nuxt-ts build"
  }
}
```

## nuxt.configで参照する

```javascript:nuxt.config.ts
const environment = process.env.NODE_ENV || 'local'
const env = require(`./env/${environment}.ts`)

// 気になればログ吐いてデバッグ
console.log(env)

module.exports = {
  router: {
    base: env.BASE_URL
  }
  env: env
}
```

## 参考

[Nuxtでcross-envを使い環境ごとに環境変数を分ける - Qiita](https://qiita.com/TakahiRoyte/items/c152ad8baa191ed1f8ae)
(自分用)Flask_2(リストとfor、extends、その他少し)

# 項目
1. py内で作ったリストをhtmlに渡す
2. html内でpython形式のfor文
3. `extends`とか`block content`とかでhtmlの頭を省略
4. 雑記

# 1.py内で作ったリストをhtmlに渡す
```python
from flask import Flask, render_template
app = Flask(__name__)

@app.route("/")
def hello_world():
    name = "Flask"
    players = ["勇者", "戦士", "魔法使い"]
    return render_template("index.html", name_value = name, players = players)
```
- リスト自体は通常通り作成
- htmlへの渡し方も他変数と同様

# 2.html内でpython形式のfor文
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    {% for player in players: %}
        <p>{{ player + "はモンスターを戦った" }}</p>
    {% endfor %}
</body>
</html>
```
- for文の書き方自体は、前回のif文同様に`{% ~~ %}`で囲む
- 最後に`{% endfor %}`を入れて締める

# 3.`extends`とか`block content`とかでhtmlの頭を省略
py側で`index.html`を参照していた場合

```html:index.html
{% extends "layout.html" %}
{% block content %}
    <h1>aiueo</h1>
{% endblock %}
```
```html:layout.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    {% block content %}
    {% endblock %}
</body>
</html>
```
- テンプレート元として使いたいhtmlは、`<body>`の中で`{% block content %}`の直後に`{% endblock %}`を置く
- テンプレートを使いたいhtmlは、`{% extends "~~.html" %}`で、参照する相手を選択する
- その後`<head>`や`<body>`とかのタグを消して、代わりに入力したいものを`{% block content %}`と`{% endblock %}`の中に入れる
- `index`内で入力したものが`{% block content %}`というワープゲートを通って、`layout`の`{% block content %}`の所へ転送されたイメージ

# 4.雑記
- 似たような形式で表示されるものは、html側は１つに纏めちゃって、py側で下みたいに変数とかパスとか変えてやると楽そう

```python:python
player = "プレイヤー"

@app.route("/walk")
def walk():
    message = player + "は荒野を歩いていた。"
    return render_template("action.html", player = player, message = message)

@app.route("/attack")
def attack():
    message = player + "はモンスターと戦った。"
    return render_template("action.html", player = player, message = message)
```
```html:html
{% extends "layout.html" %}
{% block content %}
    <h1>{{ player }}のアクション</h1>
    <p>{{ message }}</p>
{% endblock %}
```
- 慣れるまでこういうの思いつかなそう

# 5.終わりに
- Flaskやる時間が全然無い、週末と来週に期待
初心者によるプログラミング学習ログ 348日目

#100日チャレンジの348日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
348日目は、
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>348日目　2.0h<br>・架空LP15日目2.0h(<a href="https://twitter.com/ririru_123?ref_src=twsrc%5Etfw">@ririru_123</a>)<br>・hover時のボタンのアニメーション<br>・ナビ領域外クリックでナビ閉じる<br>・ipad版着手<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1273348263693828096?ref_src=twsrc%5Etfw">June 17, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
TechAcademy フロントエンドコース / 学習記録

#【学習記録】
PHP/Laravelコースを経て、今回はフロントエンドコース。本命。
サイトをつくってみたい！という思いがあって勉強を始めたため「Lesson10 オリジナルサービス」完了までいけたら本望だけど、せめてLesson9までのインプットはカバーしたい:sweat_drops:


Lesson0 事前準備 目安2時間
Lesson1 フロントエンドの概要 目安1時間
Lesson2 HTML/CSS 目安12時間
Lesson3 JavaScript 目安20時間
Lesson4 jQuery 目安20時間
Lesson5 Bootstrap 目安5時間
Lesson6 外部ライブラリ 目安5時間
Lesson7 Web API 目安10時間
Lesson8 BaaS 目安30時間
Lesson9 Vue.js 目安20時間
Lesson10 オリジナルサービス 目安35時間
Lesson11 更に学ぶために 目安0時間

##6/13
**Lesson0 事前準備 目安2時間 0:10（lesson内累計0:10）**
**Lesson1 フロントエンドの概要 目安1時間 0:30（lesson内累計0:30）**
**Lesson2 HTML/CSS 目安12時間 1:00（lesson内累計1:00）累計1:40**
15日から始められるように、事前準備。

Lesson0 さくらレンタルサーバーは無料期間があるらしいから、すぐ登録したほうがいいのか、確認してからにしよう。

Lesson1 どんな内容の学習になるのか記載されている。チョットモチベーション上がる:sparkles:

Lesson2　HTML/CSS　はPHP/Laravelコースと同じ内容みたい。復習出来ずにいたからちょうど良かった。

HTMLまで復習。課題のところで、cloud9のファイルがPHPのままであることに気が付き、新しいメンタリングのメンターに挨拶がてら問い合わせる。
「ワークスペースを別に作る。そして質問は他のチャットの方を利用するように」との返答。
ワークスペース。。。？
っとここで聞き返すのも何だから了解とだけ返答して、チャットで改めて聞き直したら、同じメンタリングのメンターさんから
「すでにお答えしましたが、新しいワークスペースを作ってください。作り方はカリキュラムに記載されています。」と今回はURL付きで返信いただいた。
:confused:
なんだかなー。。。確かにLesson０にやり方はかかれていた。前回（PHPコース）と同じ内容だと判断して流し見したため見落とした。さくらレンタルサーバーの単語は以前なかったから、しっかり目を通した。。。その他はまるっきり一緒に見えた。。。
私が悪かったわなぁ。
９０％同じ内容なら、コースで申し込まれている方は、ここが追加、変更になる箇所ですってなっていたら、親切だったなぁ。
まぁ私が悪かったよ。
:unamused:
この人が私のメンターかぁ:pensive:

##6/14
**Lesson2 HTML/CSS 目安12時間 0:00（lesson内累計1:00）累計1:40**
OFF

##6/15
**Lesson2 HTML/CSS 目安12時間 2:00（lesson内累計3:00）累計3:40**
CSSの復習

##6/16
**Lesson2 HTML/CSS 目安12時間 3:00（lesson内累計6:00）累計6:40**
CSS課題提出(＋youtubeにてJavaScriptのチョイ予習。眠かった:dizzy_face:)
フロントエンドコース初のメンタリング。自己紹介などなど。
いい人そうでよかったー:tired_face:
PHP/Laravelが中途半端になってしまったためフロントエンドやりながらとりかかるべきか相談したところ、
「混同してしまいどっちも中途半端になりかねないから、一回フロントエンドに完全シフトさせて、余裕ありそうならPHPも頑張ったらいいと思う。」と、真っ当なアドバイスを頂戴しました。:thumbsup_tone2:そうします:ok_hand_tone2:
明日からJavaScript。頑張ろう:muscle_tone2: