OmniAICreator/Qiita-1.07M huggingface dataset:
Slack+Colaboratoryでワードウルフするスニペット

随分リモートワークも定着してきたご時世＋新入生・新入社員も多い季節なので、リモートでもサクッとできるレクリエーション「ワードウルフ」をサポートするプログラムを作ったのでメモしておきます。

プログラムとしてはなんら難しいことはしてないのですが、Slack・Colaboratoryを連携すると色々応用ができそうなのでTipsをまとめておきます。

# ワードウルフ

細かいルールは他サイトを検索してください。こことか。
[【全てわかる】『ワードウルフ』少数派探しゲームを徹底紹介](https://boku-boardgame.net/wordwolf)

やることとしては、

- 2つのワードを選ぶ
- 参加者を”狼”と”市民”に分ける
- 参加者それぞれにワードを通知する → SlackのDMにする
- 最後に結果を通知する

# Colaboratory上での実装

最終的には図のようになります。

- 最初にSlack通知の設定
- 次に参加者とテーマの候補の入力
- 最後に答え合わせ


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83530/874ee6f3-d123-8ce7-befc-03384888ce5c.png)


## 事前準備部分

```
#@title BOT設定
!pip install slackweb

import slackweb
import random

slack = slackweb.Slack(url="https://hooks.slack.com/services/xxxxxxx/xxxxxxx/xxxxxxxxx")

username="\u30EF\u30FC\u30C9\u30A6\u30EB\u30D5\u901A\u77E5" #@param {type:"string"}
icon_emoji=":wolf:" #@param {type:"string"}
```

### Webhooks

Slackへの通知を送るためにwebhookのurlを取得しておく必要があります。
詳しい手順は [Slack での Incoming Webhook の利用](https://slack.com/intl/ja-jp/help/articles/115005265063-Slack-%E3%81%A7%E3%81%AE-Incoming-Webhook-%E3%81%AE%E5%88%A9%E7%94%A8) 等をご覧ください。

すでに何かしら自作アプリを設定している場合は [slack api | Your Apps](https://api.slack.com/apps) からアプリを選択し、Basic Information → Add features and functionality を選ぶとIncoming Webhooksの設定があります。

### ColabのTips

colaboratory独自の記述もあります。

まず、 `#@title` は説明を加える記載になります。上図のようにプログラムとは別に説明文章が表示されます。
`#@markdown` としてマークダウン形式で書いていくこともできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83530/62172c91-5f0c-c406-e779-e99b2bc7d5f0.png)

また、文の末尾に `#@param {type:"string"}` となっている部分は入力フォームを作るものです。
テキストボックス以外にも様々な入力フォームが用意されているので、興味がある方はこちらをどうぞ。

- [Forms](https://colab.research.google.com/notebooks/forms.ipynb)

ソースコードを隠すこともできる（ダブルクリックする）ので、非エンジニアの人でも使うだけならこうしておけば抵抗少ないかも。

2行目は必要なライブラリをインストールします（先頭に！つけるとコマンド実行できます）。今回はslack通知を楽にしてくれるライブラリを導入しています。


## 設定＋通知部分

```
#@markdown ##ワードウルフ設定

参加者 = "@user, @aaa, @bbb, @ccc, @ddd" #@param {type:"string"}
テーマ候補 = "\u5409\u91CE\u5BB6,\u677E\u5C4B,\u3059\u304D\u5BB6,\u306A\u304B\u536F" #@param {type:"string"}

user_all = [u.strip() for u in 参加者.split(",")]
theme_list = [t.strip() for t in テーマ候補.split(",")]


wolf_users = random.sample(user_all, 1) #人数も変えられるはず
wolf_word, other_word = random.sample(theme_list, 2)

for user in user_all:
  if user in wolf_users:
    theme = wolf_word
  else:
    theme = other_word

  slack.notify(text='あなたのテーマ： %s' % theme, channel=user, username=username, icon_emoji=icon_emoji)

```

参加者のユーザアカウント名を＠付きで記載します。また、テーマ候補も同様にカンマ区切りでリストアップします。

プログラムでやっているのは

- ランダムに狼を1人決める
- テーマの中からワードをランダムに2つ選び、片方を狼用・もう片方を市民用とする
- それぞれのユーザに通知

だけです。
例外処理とかはしてないです。


## 答えの通知部分

```
#@markdown ##答え合わせ

for user in user_all:
  if user in wolf_users:
    theme = wolf_word
    role = "狼"
  else:
    theme = other_word
    role = "市民"

  slack.notify(text='あなたは　%s でした。\nテーマは %s vs %s でした。' % (role, wolf_word, other_word), channel=user, username=username, icon_emoji=icon_emoji)

```

ゲーム後に通知する部分です。


順番に動かすと、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83530/3b9e989a-fb59-baa6-d854-5ad1cdef37b4.png)

こんな感じで通知されれば成功です。
視覚的・聴覚的に音楽をディグるWebアプリを作った

# そもそもディグるとは
dig = 掘る
レコードの山から良い楽曲を掘り探す事から、現在では良い物、情報などを探す事をディグるというスラングが成り立ちました。

# アプリを作った経緯

Spotifyのサジェスト機能は素晴らしく、毎日お世話になっています。
プレイリストの傾向を読み解き、フィットする楽曲をサジェストしてくれます。
しかし私は様々なジャンルの音楽を聴くので、サジェストの恩恵を最大限受ける為には細かくジャンル毎に分割されたプレイリストをたくさん作る必要がありました。

もう少し手軽に使えればな、と思い楽曲単位で同じテイストの楽曲をサジェストしてくれるアプリケーションを作りました。
ポートフォリオ作りの一環と言えばそれまでですが、、、
# 概要
![samplemove (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751195/20573926-640a-ebf1-f2a2-5c8bfa85b5af.gif)
#####ReactとSpotify APIで構築された楽曲検索webアプリです。
こちらから実際に触れます→[https://ronshex.com/](https://ronshex.com/)
モバイル版のUIにもこだわったのでPC・スマホお好みの方法でアクセス下さい。
#####ログイン不要で使えますので是非。
①曲名検索
②選ぶ
③おすすめ曲とグラフ表示
④プレビューを聞きながらグラフで比較しつつ楽曲をディグる
を簡単に実行できる様にUIの方向性を決めました。

## プロジェクト構成
・言語：Javascript
・フレームワーク：React
・見た目：Material-UI
・インフラ：firebase hosting
・アニメーション：React-Spring
・グラフ表示はReactChartjs2
・オーディオ再生はReactHowler
他にも様々なパッケージを利用しました。

小回りの効いた動作管理がuseStateで可能だった為ReactHowlerを利用しました。

コンポーネントを分ける上ではAtomic Designを意識しました。
　Atomsは画像、アニメーション
　MoleculesではAPIを叩くコンポーネント
　Organismsでは単体で画面に映るコンポーネント
など可読性を意識しました。

これらを身につける上で有益だったものを下の方でまとめましたのでよければ確認してください。

# アプリの動作
楽曲を検索して選択すると、Spotifyが持つ
・アーティスト情報
・楽曲パラメータ (BPM、踊りやすさ、明るさ...etc)
・詳細なジャンルデータ
を基に似ている曲を10曲サジェストします。
選択した楽曲のパラメータ数値を0-1.0の間に圧縮したものをグラフに描画します。
また、Spotifyが提供している３０秒のプレビュー再生機能も備えており
音楽を視て聴いて、探すことができます。

### Spotify API動作フロー
手軽さを重要視し、
４つある認証方法の中でもログイン不要の[Client Credentials認証](https://developer.spotify.com/documentation/general/guides/authorization-guide/)を選びました。
SpotifyAPIの認証についてはQiita記事も増えているので説明は割愛します。
![API.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/751195/9b7d6f37-4212-c8ed-f10a-ef74598f758a.png)

##勉強資料で特に有益だったもの

####①FullStackOpen
[https://fullstackopen.com/en/](https://fullstackopen.com/en/)
関連：React,Node.JS,Redux,GraphQL,TypeScript,ReactNative,GitHub ActionsによるCI/CD等々…
フィンランドのヘルシンキ大学が公開している、Web系のイケてる言語を学びましょう的なサイト。

このサイトでの成果物をフィンランドの然るべき所へ提出するとパートナー企業の面接を受けることが出来るそうです。(フィンランド国民限定)

内容はヘヴィですが、体系的にわかりやすく学べます。
1人でチャレンジしていたら僕は心が折れていたと思います。

僕は同じくプログラミングを学んでいる友達(@fishperson19)と一緒に挑戦しています
現在はpart9のTypeScriptの部分を勉強しています。
フィンランドに足を向けて寝れません。めちゃくちゃお世話になってます。

####②理解を深める上で役立ったQiita記事

[React hooksを基礎から理解する (useState編)](https://qiita.com/seira/items/f063e262b1d57d7e78b4)

[わかる！Firebase ～全てのサービスをおつまみ紹介～](https://qiita.com/dogwood008/items/fa95b62ad151f823af70)

####③React Example
[https://reactjsexample.com/](https://reactjsexample.com/)
Reactに適したパッケージを画像付きで紹介しているサイトです。
刺激的で素晴らしいパッケージが多く、いくつか取り入れました。

####④Coliss
[https://coliss.com/](https://coliss.com/)
CSS周りの詰まったところや、UIのヒントはこちらのサイトから着想を受けMaterial-UIに反映させました。
####⑤Atomic Designについて
[コネヒト開発者ブログ](https://tech.connehito.com/entry/learn-and-failure-atomic-design)さんのブログ記事がとてもわかりやすく、Atomic Designを取り入れることができました。
ありがとうございます。

# 締め
未経験で独学の荒削りな知識で記事を書いているので、不備や間違い等があればご指摘下さい。
アウトプットの習慣をつける為にこれから学んだことの技術記事を投稿していこうと思います。
HTML `<option>` タグの背景色を変更したのだけど、選択時の色がまったく変わらなくて、調べまくった結果、グラデーション指定なら効くという「はぁ？」な事態に遭遇したのでメモる


# HTML `<option>` タグの背景色`background`を変更したのだけど、選択時の色がまったく変わらなくて、調べまくった結果、グラデーションの指定 `linear-gradient()` なら効くという「はぁ？」な事態に遭遇したのでメモる

こんな感じ
red を指定しているのに、グレーのまま変わらない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107592/afd872dd-23a1-2b4a-b176-c31e7d04cddf.png)

確認用コード

```HTML
<style>
select option {
  background: blue;
}

select.A option:checked {
  background: red;
}
select.B option:checked {
  background: linear-gradient(red, red);
}
</style>
普通の色指定 'red' が効かなくて、
グラデーションの指定 linear-gradient(red, red) なら効くって、、、
明らかにバグっているよね<br>
<select class="A" size="5" style="width: 10em;">
  <option >aaa</option>
  <option >bbb</option>
  <option selected>ccc</option>
  <option >ddd</option>
  <option >eee</option>
</select>
<select class="B" size="5" style="width: 10em;">
  <option >aaa</option>
  <option >bbb</option>
  <option selected>ccc</option>
  <option >ddd</option>
  <option >eee</option>
</select>
```
# Codepen の実行結果

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="result" data-user="yamazaki3104" data-slug-hash="BapZJNM" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="option background linear-gradient 無いと効かないって！！！？？？"></p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

修正希望です。＞関係者様


# linear-gradient の詳細はこちら

https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient()

ちなみに、動作を確認した Chrome のバージョンは（2021-04-06の時点で最新）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107592/7645b38c-b26d-2bc1-6c7f-d923a076873a.png)

# 2022-12-14 追記（えっ？！なおってる？？）

赤く表示されてますね。修正をありがとうございました！！！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/107592/b7c461e9-92c2-0c30-5b27-6da6190acb96.png)
戦術か戦略か、アジャイルかウォーターフォールか

# 戦略と戦術
## 戦術
・技術を重視
・試行錯誤的で短期的な対処療法
・枝葉の問題を重視
・なぜなぜ分析での真因に相当
## 戦略
・業務を重視
・長期的視点で根本的な計画を立案
・表面的な問題より根本的な問題を重視
・なぜなぜ分析での根本原因に相当
***
# アジャイルとウォーターフォール
## アジャイル
・短期間にユーザ要件を実装
・ユーザ要件の変化に迅速に対応
**≒ 戦術的開発手法**
## ウォーターフォール
・長期的にユーザ要件を実装
・実装前に十分に要件を吟味する
**≒ 戦略的開発手法**
***
# 資本主義と社会主義
## 資本主義
・短期的なキャッシュフローを重視
・自由市場での見えざる手による支配
## 社会主義
・長期的な計画経済を重視
・目標に向かって統制的支配
***
# リスクとリターン
## 戦術志向
・低リスク低リターン
## 戦略思考
・高リスク高リターン
Salesforceでログイン時になにかしらの画面を表示させる設定

こんにちは
今回は「Salesforceでログイン時になにかしらの画面を表示させる設定」方法を記します

もしも毎日Salesforceをログインされている活況なSalesforce環境であれば


①社内イベントの告知をして出欠を取りたい場合
②社内情報や内部情報を確実に見ていただきたい場合

にお勧めの機能です。

今回は
①社内イベントの告知をして出欠を取りたい場合
の設定方法をご紹介します

完成ゴールとしてはこうなります。
ユーザがログインすると強制的にこのような画面が出ます

![画面フロー04051.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/dff51afc-cc81-fc45-68dd-c98f94ff9452.png)

そしてチェックが入った場合対象ユーザのユーザレコードにチェックボックスにチェックが入る
![チェックボックス04052.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/088cf8b8-67be-8925-ef15-1ae4c1fae70f.png)

これによりどのユーザが何をチェックしたかの集計が可能となります。

ステップ１
まずはユーザオブジェクトに項目作成
「出席」や「欠席」の状況を格納するための項目をユーザオブジェクトに作成します

ステップ２
フローを作成
フローの全体像はこのような形です
![フロー04051.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/73689014-7cd1-35a2-ac72-0e130c6f224a.png)

１つずつ確認しましょう
「決定」フローについて
![フロー04052.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/38a18f38-d537-2bd3-924e-a59029669d5f.png)
こちらではユーザ項目の「出席」や「欠席」項目について確認し、その値に基づき表示させる画面を決定します

「画面」フローについて
こちらで項目表示や文面の表示を行います
![画面フロー040502.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/4277a1dd-5d2c-cb57-dee8-2a0cd56ad3bd.png)

レコード更新について
画面フローのチェックによりユーザレコードの項目自動更新を行います
![レコード更新04053.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/53ecd141-1dbb-3c63-54eb-d6873fdd95df.png)

上記のようなフローを作成します。

ステップ３
ログインフロー作成
フロー完成後ログインフローを作成し、画面を表示させたいユーザのプロファイルごとに作成します。

![ログインフロー0405.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/f5c0518c-df75-3460-df09-7f9ef56831b7.png)

以上で設定は可能です。
この機能で社内イベントの出欠管理を確認してみてはいかがでしょうか。
Multipart/form-dataの仕様メモ

## はじめに
MIME-TYPEの中でも複雑かつ、あまり普段は意識しないのが、`multipart/form-data`。HTMLでformを作り、formタグの属性で`enctype="multipart/form-data"`を指定することで送ることができる。プリミティブなHTTPクライアントを使って、自前で`multipart/form-data`を投げようとして、いくつかハマったので、改めてRFCの仕様を読んだのでメモ。

https://tools.ietf.org/html/rfc7578

## サンプル

リクエストヘッダ

```
Content-Type: multipart/form-data; boundary=--hogehoge
```

リクエストボディ

``` 
--hogehoge
Content-Disposition: form-data; name="user_name"
Content-Type: text/plain

test
--hogehoge
Content-Disposition: form-data; name="email"

sample@mail.com
--hogehoge
Content-Disposition: form-data; name="gender"

male
--hogehoge
Content-Disposition: form-data; name="user_profile" filename="image.jpeg"
Content-Type: image/jpeg

\xff\xd8\....
--hogehoge--
```


### リクエストヘッダ部
`Content-Type: multipart/form-data; boundary=hogehoge;`

**MIME-TYPEの指定と、そのパラメータとして`boundary`の指定が必須となる**(MUST)。このboundary（と、先頭につけた--）によってリクエストボディの中身を区切ることができるようになる。

### リクエストボディ部
`Content-Disposition: form-data; name="user_name"`

この各Partのヘッダ情報をMIMEヘッダフィールドと呼ぶ。この**MIMEヘッダフィールドの文字コードはUS-ASCIIしか許容されない。****フォームの各部分には必ず`Content-Disposition`と、そのパラメータである`name`をつけなければならない**(MUST)。**また、改行コードは必ずCRLFを使用すること。**また、そのpartがファイルを表す場合、filenameパラメータをつけることが推奨される(SHOULD)。

`Content-Type: text/plain`

partごとに、mime-typeを設定することができる。デフォルトはtext/plainになっており、設定は任意(MAY)。ファイルを表すpartの場合、デフォルトはapplication/octet-streamとなるので、つけることが推奨される(SHOULD)。

### バイナリを送信する際


## あとがき
末尾のboundaryは、行の最後に--をつけることや、CRLFでないとならないことや、送信先のサーバがMUST以外のMIMEヘッダフィールドを必須にしてないか確認したりと色々ハマりポイントはあった。難しいですね。
StoreFrontとCsrfトークン

クロスサイトリクエストフォージェリ(CSTRF)対策のため、StoreFrontではCsrf Tokenを利用する機能が
実装されています。
SDKを確認すると、HTTP、HTTPSの両通信で必須となっており、GUIから無効にすることはできないのですが、
極稀にですが、Csrf-Tokenの利用を無効化したい場合があります。

NetScaler等の機器でこのCookieを削除するルール(Rewrite)を作成してStoreFrontのLB用VIPに適用すると
エラーが発生して利用できません。やはりCsrf-TokenのCookieは必須のようです。

Wiresharkでキャプチャしたパケットを眺めていると、ブラウザを経由せずにReceiverへサイトを登録して
接続するとCsrf-Tokenを利用していないことが判明しました。Csrf-Tokenは、Firefox等のブラウザで利用
した時だけ利用するような仕組みが実装されているようです。

`StoreWeb\Web.conf` の中身を調査していくと、気になる行が見つかりました。

`excludedUserAgents`とあるのでこの後に記述されている`UserAgentsはcsrfProtection`が無効になるような
雰囲気を醸し出しています。
Receiverから接続した際のUserAgentsはCitrixReceiverが設定されておりReceiverからの利用では
Csrf-Tokenが利用されていないのも納得できそうな雰囲気がします。

ちなみにMozillaを追加すると、ブラウザ経由で利用した時もCsrf-Tokenを利用しなくなりました。

Csrf-Tokenの利用の有無は、内部的に`IsCsrfProtectionEnabled()`関数で処理されており、
System.Text.RegularExpressions内のIsMatchメソッドで判断していました。
ILSpyを使うと内部構造がわかるので重宝しています。

Web.confを直接書き換えてしまうとメーカサポートが受けられなかったり、何かしらのタイミングで元に
戻る心配があります。
その場合には、直接ヘッダに含まれているUser-Agentを書き換えてしまえば解決します。
NetScalerをStoreFrontのLBとして利用している場合にはRewrite機能を利用します。
GUIでは説明が大変なのでコンソールより次のコマンドを実行します。

`add rewrite action replace_useragent_action replace "HTTP.REQ.HEADER(\"User-Agent\")" "\"CitrixReceiver\""
add rewrite policy replace_useragent_policy HTTP.REQ.IS_VALID replace_useragent_action`

作成したポリシーをVIPに割り当てます。
`bind lb vserver LB用VIP名 -policyName replace_useragent_policy -priority 100 -gotoPriorityExpression END -type REQUEST`

これでVIPに対するリクエストに含まれるUser-AgentをCitrixReceiverに書き換えます。
【Cloud9】This is taking longer than expected. The delay may be caused by high CPU usage in your environment, or your T2 or T3 instance is running out of burstable CPU capacity credits, or there are VPC configuration issues. Please check documentation.の対処法

<h2>症状</h2>
Cloud9で下記のエラーメッセージが出てしまい、操作ができなくなってしまいました。
ブラウザを更新しても変化しませんでした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/927880/8299ed33-4888-d541-3b35-6c925801ac18.png)


```
This is taking longer than expected. The delay may be caused by high CPU usage in your environment, or your T2 or T3 instance is running out of burstable CPU capacity credits, or there are VPC configuration issues. Please check documentation.

```

<h2>解決方法</h2>
インスタンスの停止→開始で治りました。

インスタンスのタイプを変えずに対応できてよかったです。

<h2>参考</h2>
AWS:Cloud9使用時にフリーズした時の対処方法。
https://qiita.com/Atsushi_/items/b38c18feac4708164696
Kotlinスコープ関数　使い分けの指針をシンプルに理解して、現場で使いこなそう

# スコープ関数って何？何のためにあるの？
Kotlinの世界では、`let`, `also`, `apply`, `run`, `with`はスコープ関数と呼ばれます。

スコープ関数は、操作対象のオブジェクトが`it`や暗黙的な`this`に割り当てられる、「一時的なスコープ」を作り出します。このため「スコープ関数」と呼ばれます。結果、そのオブジェクトを使うコードが簡潔で読みやすいものとなります。

例えば・・・

* その場でしか使わない使い捨ての変数にイチイチ名前をつける必要がなくなります。
* `targetObject.method()`のようにドット付きのコードを何度も書く必要がなくなります。

コードを簡潔で読みやすいものにすることが目的ですので、結果的にこれに反するようであれば、スコープ関数の使い方が間違っているか、あるいはスコープ関数を使わない方が良いでしょう。「スコープ関数を使えば何となくKotlinっぽくでイケてる」といった感覚で使うのはやめましょう（以前の私のように・・）。

# どのスコープ関数を使えば良いのか？
スコープ関数は以下の分類軸により分類されます。どれを使うべきかは、これらの分類軸を理解することで自ずと導かれます。割とシンプルなので、これだけでかなり現場で使いこなせるようになります。

具体的には、以下の【★】を確認し、ご自身の状況がどのケースに該当するかを確認しましょう。

## 分類軸その１

* 操作対象のオブジェクトは、ラムダのレシーバー(`this`)である
    * 【★】ラムダ内で、操作対象のオブジェクトのメソッドを呼び出したり、そのオブジェクトのプロパティをセットするケースに適しています。
    * `targetObject.method()`のようにドット付きのコードを書かなくても済むようにする、ということが主な目的の１つです。なので、ラムダの中で`this.method()`のように`this`を明示するのは本末転倒かと思います。
    * `apply`, `run`, `with`が該当します。
* 操作対象のオブジェクトは、ラムダの引数(`it`)である
    * 【★】ラムダ内で、操作対象のオブジェクトを別のメソッドの引数に渡す、といったケースに適しています。
    * 【★】ラムダの外側にある`this`を、ラムダ内でそのまま`this`として参照したいケースに適しています。
    * `let`, `also`が該当します。

## 分類軸その２
* 戻り値は、操作対象のオブジェクトそのものである
    * 【★】操作対象オブジェクトを、後続の処理で利用したいケースに適しています。
        * 特殊なケースとして、いわゆる「チェーン呼び出し」を実現することができます。
    * `apply`, `also`が該当します。
* 戻り値は、ラムダの結果である
    * 【★】ラムダの結果を、後続の処理で利用したいケースに適しています。
        * チェーン呼び出しの終端で、最終的な結果を得るためにも利用できます。
    * `let`, `run`, `with`が該当します。
        * ただし、[公式ドキュメント](https://kotlinlang.org/docs/scope-functions.html#with)では、`with`でラムダの結果を返すことは推奨されていません。実質的には上記の`apply`, `also`のグループに入りますが、それらの関数で代用できてしまうケースが多いのではないでしょうか。

# 各スコープ関数の使い方
世の中に山ほど良記事がありますので、そちらにお譲りします。

# 参考
[Kotlin公式ドキュメント「スコープ関数」](https://kotlinlang.org/docs/scope-functions.html)
結局React Routerで遷移先に送った値を受け取るにはuseLocation()が一番良さそう

## やりたいこと

React Routerを使うに当たり、遷移先に値を送信したい。

```jsx
<li>
  <Link to={{pathname: "/users/mypage/recommends", state: {books: this.state.books}}}>
    推薦図書一覧
  </Link>
</li>
```

公式を見る限りこのようにstateというキーを使うことで値を送ることができるっぽい
![React_Router__Declarative_Routing_for_React_js.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652172/89403d49-6cd0-12bc-03b9-05b9bd61e152.png)

しかし、ここで問題になるのが送った値を遷移先でどう受け取るか、という話。

ルーティングは以下のように設定してある

```jsx
<Route path="/users/mypage">
  <MyPage>
    <Route exact path="/users/mypage">
      <UserInfo></UserInfo>
    </Route>
    <Route path="/users/mypage/recommends">
      <MyRecommendedBooks></MyRecommendedBooks>
    </Route>
    <Route path="/users/mypage/edit">
      <EditUserInfo></EditUserInfo>
    </Route>
  </MyPage>
</Route>
```

サイドバーにリンクを設定して同一ページ内で表示を切り替えるような実装をしている。

## 検討したこと

### withRouterを使う

調べた限りclassコンポーネントだとwithRouterを使うことでlocation.state.books、のようにlocationプロパティを扱うことが
できるようになるらしい。

しかし今回はサイドバーで表示の切り替えをするだけなので全部のコンポーネントをクラスコンポーネントで扱うのは面倒。

## 結論…useLocation()を使おう

React Hooksの1種useLocationを使うとかんたんに関数コンポーネントでlocationプロパティを扱える

```jsx
// react-routerの読み込み
import { Link, withRouter, useLocation } from "react-router-dom";

export function MyRecommendedBooks() {
  const location = useLocation();
  if (location.state.books.length !== 0) {
    return (
      <ul>
          {location.state.books.map(book => {
            return <li key={book.isbn}>{book.title}</li> //returnがないと表示できない
          })} 
      </ul>
    )
    } else {
      return null
  }
}
```

こんな感じでモジュールをimportして、関数内でuseLocation()とするだけでlocationプロパティにアクセスできた。すげぇ便利だ…

後は先程のリンクで定義したstateを取り出してビューにレンダリングするだけ。

## 挙動
こんな感じでサイドバーのリンクをクリックすると同時にビューにDBから取り出した値を表示できた
![recommends7-1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/652172/d2e2351a-d461-169f-42ba-18cc94a23355.gif)




### 参考

React-Router公式
https://reactrouter.com/web/api/Link

qiita記事
https://qiita.com/h-yoshikawa44/items/aa78b6c7cd1ef43549bf
AWS CDKメモまとめ

## 参考

### 導入
[ソフトウェア開発者のためのAWS環境構築フレームワーク](https://pages.awscloud.com/rs/112-TZM-766/images/B-3.pdf) ... cdkの概念やできることの解説。日本語。
[Getting started with the AWS CDK](https://docs.aws.amazon.com/ja_jp/cdk/latest/guide/getting_started.html) ... 本家のコンセプト・導入手順。Google翻訳で和訳してもそんなに壊れていない。
[typescript workshop](https://cdkworkshop.com/20-typescript.html) ... 導入からデプロイまで一通り手を動かす
[typescript sample](https://github.com/aws-samples/aws-cdk-examples/tree/master/typescript) ... サンプル豊富
[cdk コマンドの機能を 実際に叩いて理解する](https://dev.classmethod.jp/articles/aws-cdk-command-line-interface/) ... cdk コマンドの解説。日本語。
### layer

[AWS CDK を使って node_modules を AWS Lambda Layers にデプロイするサンプル](https://dev.classmethod.jp/articles/aws-cdk-node-modules-lambda-layer/)
[AWS CDK で AWS Lambda Layers の 新しい LayerVersion が作成される条件はなにか調べた （ Node.js ）](https://dev.classmethod.jp/articles/aws-cdk-aws-lambda-layers-update-condition/)
Raspberry pi ＋ SHT31, SHT32 で温湿度測定

参考
秋月　Webページ
http://akizukidenshi.com/download/ds/sensirion/Sensirion_Humidity_Sensors_SHT3x_DIS_Datasheet_V3_J.pdf
Sensirion　Webページ
https://www.sensirion.com/jp/download-center/
Qiita
https://qiita.com/nishiwakki/items/877b10517c26a8a4b583

尚、投稿段階ではまだSQL、Grafanaはインストールしたのみで、使っていない

***
__Raspberry Pi OS Lite　をダウンロード__
https://www.raspberrypi.org/software/operating-systems/#raspberry-pi-os-32-bit
ダウンロードしたimgをmicroSDに書き込む

___OS起動後　SSHを有効にする　I2Cも有効にする___
`sudo raspi-config`   にてインターフェイス　SSH　及び　I2C　を有効にする

`sudo apt-get update
sudo apt-get install python3-smbus`
i2c-tools が入っていなかったら別途　`apt-get install i2c-tools`


__MySQL インストール__

```
sudo apt-get upgrade
sudo apt-get install apache2
apache2 -v                    (2021.3時点では  2.4が入る)
systemctl enable apache2

sudo apt-get install php     (2021.3時点では　7.3が入る)
php -v
nano  /var/www/html/phpinfo.php
   <?php   phpinfo();  ?>

sudo apt-get install mariadb-server
mariadb -V
```

mysql用rootパスワード設定

```
sudo mysql_secure_installation
 Enter current password for root (enter for none): enter
 Set root password? [Y/n] y
 Remove anonymous users? [Y/n] y
 Disallow root login remotely? [Y/n] n
 Remove test database and access to it? [Y/n] y
 Reload privilege tables now? [Y/n] y

mysql_unix_socketプラグイン無効化
sudo mysql -u root
 MariaDB [(none)]> use mysql;
 use mysql;
 select user,host,plugin from user;
 update user set plugin='' where user='root';
 select user,host,plugin from user;
 exit

sudo systemctl restart mysql
mysql -u root -p     #sudoをせずに入れるようになった
```

__Grafanaは以下を参考__
https://grafana.com/grafana/download?platform=arm
Raspberry-Pi 3 はArm v8 なので64で動くらしい、　Pi 2　はv7、　Pi　1　はv6用を入れるとよいかと


SHT32　及び　SHT31　での計測サンプルpython3コード

```
import time
import smbus

def tempChanger(msb, lsb):
    mlsb = ((msb << 8) | lsb)                                             
    return (-45 + 175 * int(str(mlsb), 10) / (pow(2, 16) - 1))            

def humidChanger(msb, lsb):
    mlsb = ((msb << 8) | lsb)
    return (100 * int(str(mlsb), 10) / (pow(2, 16) - 1))

i2c = smbus.SMBus(1)
SHT32_addr = 0x45                                                         
SHT31_addr = 0x44                                        #ADDR pin をGNDにショートさせアドレス変更

while 1:
    i2c.write_byte_data(SHT32_addr, 0x2C, 0x06)
    data  = i2c.read_i2c_block_data(SHT32_addr, 0x00, 6)

    i2c.write_byte_data(SHT31_addr, 0x2C, 0x06)
    data2 = i2c.read_i2c_block_data(SHT31_addr, 0x00, 6)

    print( "SHT32: " + str('{:.4g}'.format(tempChanger(data[0], data[1])))   + "C " + str('{:.4g}'.format(humidChanger(data[3], data[4])))   + "% " \
         + "SHT31: " + str('{:.4g}'.format(tempChanger(data2[0], data2[1]))) + "C " + str('{:.4g}'.format(humidChanger(data2[3], data2[4]))) + "%")

    time.sleep(1)
```
40代おっさんIAMを勉強してみた

## 本記事について

本記事はAWS初学者の私が学習していく中でわからない単語や概要をなるべくわかりやすい様にまとめたものです。
もし誤りなどありましたらコメントにてお知らせいただけるとありがたいです。

## IAMとは

AWS Identity and Access Management (IAM) は、AWS リソースへのアクセスを安全に管理するためのウェブサービスです。IAM を使用して、リソースを使用するために認証 (サインイン) され、許可された (アクセス許可を持つ) ユーザーを制御します。

## IAMの前提知識

### ユーザー

#### ルートユーザーとは

AWS使用開始時にメアド、クレジットカード、パスワードを登録してアカウントを制作します。そのメアドとパスワードを使用してログインできるアカウントをルートユーザーといい、フル権限を持っている。
AWSドキュメントでは日々の業務に使わないことと明記されている。

#### IAMユーザーとは

AWSではAWS範囲内で個別のユーザーを作りに権限を付与してそれを使うことを推奨している。その個別のユーザーをIAMユーザーと言う。
人間である必要がない（プログラムの場合もある）
ユーザー作成時には認証する情報を作成する必要がある
認証情報にはパスワードかアクセスキーかその両方化を選ぶ必要がある

### アクセスキー

アクセスキーID、シークレットアクセスキーが発行される。（両方ともランダムな文字列）
＊重要
これがあるとどこからでもAWSが操作できるようになる。
アクセスキーがもし他者に漏れてしまったら使われることになるので注意
（例えばAWS CLIの設定ファイルなどをGitHubなどに乗せてしまうとアクセスキーがバレてしまう）

### IAMグループ

複数のIMAユーザーのまとまり
正式な認証情報でないことに注意
複数のユーザに権限を付与できる便利なものと認識する

### IAMポリシー

AWSで操作できる権限を表したもの
実態はJSON形式で記述された設定ファイル、AWSに保管させる
評価を受ける主体（プリンシパル）にアタッチして使う、正確には認証主体（Identitiy)に対して許可、拒否をさだめる
ポリシーにはAWS管理ポリシーとカスタマー管理ポリシーがある

#### AWS管理ポリシー

AWSがあらかじめ用意したポリシー

#### カスタマー管理ポリシー

AWS管理ポリシーより詳細に設定できるポリシー
直接JSON記述して設定できる（ポリシージェネレータを使用してGUIから作成も可能）

### IAMロール

特定のアクセス権限を持ち、アカウントで作成できる IAM アイデンティティです。
＊ロール（役割、任務、役目といった意味）
ロールとはポリシーを複数アタッチして権限をひとまとめにしたもの
ロールには「信頼関係」「権限」を持っているがポイント

### AWS認定試験のIAM関連の用語について

#### リソース

「IAMユーザー、IAMグループ、IAMロール、IAMポリシー」であり、IAMで作成、編集、削除ができるもの

#### アイデンティティ（ID)

「IAMユーザー、IAMグループ、IAMロール」ポリシーを割り当てれるもの

#### エンティティ

「IAMユーザー、フェデレーションユーザー、IAMロール」AWSが認証に使用するもの
＊フェデレーションユーザー
例）Facebook

#### プリンシパル

「IAMユーザー、フェデレーションユーザー、IAMロール、AWSリソース」AWSにサインしたり、AWSにリクエストを出すもの
つまり、人間でもありアプリケーションでもある。そしてAWSサービスでもある
＊グループは正式なプリンシパルと認められていないので注意！！

## 最後に
またこの記事は AWS 初学者を導く体系的な動画学習サービス「AWS CloudTech」の課題カリキュラムで作成しました。
https://aws-cloud-tech.com/
初学者のプログラミング　form_withで保存できないときの対処法

form_withでパラメーターが送信されているけれど。DB保存されないときの対処について。
##対処法　create!メソッドの利用
まず困ったのが、エラー文が出力されないので、どう対応すべきかわからなかったこと。そこで、検索してみると、コントローラーに記述した、createメソッドをcreate!メソッドに変更する方法。こうすることで保存されない時はエラーメッセージが出力されるため、対応しやすいとのことだった。

```ruby
  def create
    @event = Event.create!(event_params) #<~ createから変更
    if @event.save
      redirect_to action: :index, notice: "イベントを作成しました"
    else
      render :new
    end
  end
```

するとエラー文がでた。

##エラーメッセージの確認
エラーメッセージを確認すると、"userがいませんよ＂と言う内容だったため、マイグレーションファイルの記述に`t.references  :user,   foreign_key: true`を追加。アソシエーションを確認して訂正したところ保存ができた。

##まとめ
エラー文がでない時は結構精神的にきつい(出てもきついけど)。けど同じように困っている人が多くいるので先人の知恵を借りるのが一番良い。

##参考
https://teratail.com/questions/121213

お世話になりました！

## さいごに
プログラミングの初学者です。その日に学んだことを学習の一環としてアウトプットしています。より深く学習していきたいと考えておりますので、内容に誤りがございまいたらご指摘等いただけますと幸いです。

参考図書：パーフェクト Ruby on Rails【増補改訂版】すがわらまさのり/前島真一/橋立友宏/後藤優一/五十嵐邦明
視界内判定

CheckPointがカメラの視界内にあるかどうかのチェック

ScreenToWorldPointとカメラの画角から求める

```C#
    public bool isInCameraSight(Vector3 checkpoint , Camera Cam)
    {
        float d = Vector3.Distance(checkpoint, Cam.transform.position);
        float fHeight = d * Mathf.Tan(Cam.fieldOfView * Mathf.Deg2Rad);
        float fWidth = fHeight * Cam.aspect;

        Vector3 LeftBottom = Cam.ScreenToWorldPoint(new Vector3(0, 0, d));
        Vector3 RightTop = LeftBottom + Vector3.right * fWidth + Vector3.up * fHeight;
        Vector3 RightBottom = LeftBottom + Vector3.right * fWidth;
        Vector3 LeftTop = LeftBottom + Vector3.up * fHeight;

        Vector3 ToLeftBottom = LeftBottom - checkpoint;
        Vector3 ToRightTop = RightTop - checkpoint;
        Vector3 ToRightBottom = RightBottom - checkpoint;
        Vector3 ToLeftTop = LeftTop - checkpoint;

        Vector3 cLBxRB = Vector3.Cross(ToLeftBottom, ToRightBottom);//下端
        Vector3 cRBxRT = Vector3.Cross(ToRightBottom, ToRightTop);//右端
        Vector3 cRTxLT = Vector3.Cross(ToRightTop, ToLeftTop);//上端
        Vector3 cLTxLB = Vector3.Cross(ToLeftTop, ToLeftBottom);//左端

        float dotVertical = Vector3.Dot(cLBxRB, cRTxLT);
        float dotHorizon = Vector3.Dot(cRBxRT, cLTxLB);

        return dotVertical > 0 && dotHorizon > 0;
    }

```

内外判定だけならWorldToViewportPointのほうが簡単ですが、誤差を出したくないときに使ってます
【Vue.js】for文で指定の回数だけループさせる方法

#はじめに
本記事では、配列などのデータをリストのようにレンダリングすることが可能な
**v-for**を使ってループの回数を指定する方法についてアウトプットします。

#使い方
v-forでは整数値を入れることで範囲指定が可能になります。
特定のデータを扱わず指定回数だけ繰り返したいときなどに有効です。

```html:html
<div id="range" class="demo">
  <span v-for="n in 5" :key="n">{{ n }} </span>
</div>
```

```javascript:Vue.js
Vue.createApp({}).mount('#range')
```

#出力

```
12345
```

#参考
[Vue.js List Rendering](https://v3.vuejs.org/guide/list.html#mapping-an-array-to-elements-with-v-for)
Python: 無限の猿定理を参考に「技術的には可能です」がどのくらい「現実的には不可能」なのかを見える化する

## 概要
「技術的には可能です」、がどのくらい「現実的には不可能です」なのかをお猿の打鍵理論で紐解く。

https://ja.wikipedia.org/wiki/%E7%84%A1%E9%99%90%E3%81%AE%E7%8C%BF%E5%AE%9A%E7%90%86

https://qiita.com/POPOPON/items/dd810f60256c809b9b3e

を参考にした。


## プログラム実行

```py
import random
import pandas as pd

PATTERN = ['お','さ','る']

# さるがおさるの三種類で打鍵し、おさるを返却する関数
def do_monkey():
    monkey_list = []
    while monkey_list[-3:] != PATTERN:
        monkey_list.append(random.choice(['お','さ','る']))
    return len(monkey_list)

# 1万回実行してリストに格納
monkey_len_list = []
for i in range(1, 10001):
    monkey_len_list.append(do_monkey())

# 実行結果の統計量
df = pd.DataFrame(monkey_len_list, columns=["monkey length"])
print(df.describe())
```

https://qiita.com/0NE_shoT_/items/bf700662b2c36aee0f8e#describe
> describe()は、DataFrameの基本統計量を表示します。上から、データ数（count）、平均値（mean）、標準偏差（std）、最小値（min）、第一四分位数（25%）、中央値（50%）、第三四分位数（75%）、最大値（max）です。

でまあ、その場合このくらい。

```
root@d545fa0ed72b:~/opt# python monkey.py
       monkey length
count   10000.000000 # データ数
mean       26.764600 # 平均値
std        24.185737 # 標準偏差
min         3.000000 # 最小値
25%        10.000000
50%        19.000000 # 中央値
75%        36.000000
max       240.000000 # 最大値
```

では、以下どうなる。

```py
import random
import pandas as pd

PATTERN = ['s','a','r','u']

# さるがsaruの4種類で打鍵し、saruを返却する関数
def do_monkey():
    monkey_list = []
    while monkey_list[-4:] != PATTERN:
        monkey_list.append(random.choice(['s','a','r','u']))
    return len(monkey_list)

# 1万回実行してリストに格納
monkey_len_list = []
for i in range(1, 10001):
    monkey_len_list.append(do_monkey())

# 実行結果の統計量
df = pd.DataFrame(monkey_len_list, columns=["monkey length"])
print(df.describe())
```

こうなる。

```
root@d545fa0ed72b:~/opt# python monkey.py
       monkey length
count   10000.000000 # データ数
mean      254.502600 # 平均値
std       245.504897 # 標準偏差
min         4.000000 # 最小値
25%        79.000000
50%       178.000000 # 中央値
75%       354.000000
max      1898.000000 # 最大値
```

どんどんゆこう。
これを 'o','s','a','r','u' にすると更にこうなり

```
root@d545fa0ed72b:~/opt# python monkey.py
       monkey length
count   10000.000000 # データ数
mean     3145.247400 # 平均値
std      3181.358275 # 標準偏差
min         5.000000 # 最小値
25%       915.750000
50%      2185.000000 # 中央値
75%      4344.750000
max     32088.000000 # 最大値
```

'm','o','n','k','e','y' では最大348252回でおさるは monkey にたどり着くのだった。

```
root@d545fa0ed72b:~/opt# python monkey.py
       monkey length
count   10000.000000 # データ数
mean    46172.005200 # 平均値
std     45393.360479 # 標準偏差
min         8.000000 # 最小値
25%     13683.750000
50%     32099.500000 # 中央値
75%     64138.000000
max    348252.000000 # 最大値
```

## まとめ
なーんてことをやっていけばいつかはシェイクスピアも書けるのが、「技術的には可能です」である。しかしそんなのは「現実的には不可能です」なので、こういう数字を持って、難しい話をするときには説明できたら良いのかななんて思うが、そんな余裕は大概ない。

というポエム。
Sequel Pro からMariaDBにアクセス

## 転載元
当記事は以下ブログからの転載です。
[TECH BACK](https://techback.info/sequel-pro-mariadb-access/)

## はじめに
Maria DBにアクセスするのに、Sequel Proがとてもお手軽で便利だったので、ご紹介。MacユーザでMaria DBを使っている方は是非！ Maria DBをよく使うのですが、 そういえば、MacになってからMaria DB用のクライアントツール使ってないな。。。と で、色々試してみたのですが、Sequel Proに行き着いたので、ご紹介。 ちなみに、Windowsで開発している時は、 HeidiSQLを使わせて頂いておりました。🙇🏻‍♂️ 最高に便利でした👏 
[https://www.heidisql.com/](https://www.heidisql.com/)

## Sequel Proのダウンロード → インストール

HPに行って 
[http://www.sequelpro.com/](http://www.sequelpro.com/)
DOWNLOAD ボタンからダウンロードして、インストールしましょう。
## 使ってみる

起動して、お持ちのMaria DBに合わせた接続情報で接続して使ってください。 [![](http://techback.info/wp-content/uploads/2021/04/img_6065f00ab30ec.png)](http://techback.info/wp-content/uploads/2021/04/img_6065f00ab30ec.png)

なんか、お手軽で最高でした。 もちろん、データの閲覧〜更新、等々も問題なくできますんで、ご心配なく。
MacからSSH接続しようと思ったら WARNING: UNPROTECTED PRIVATE KEY FILE!

## 転載元
当記事は以下ブログからの転載です。
[TECH BACK](https://techback.info/mac-ssh-unprotec…private-key-file/)

## はじめに
macからSSH接続でサーバに入って、メンテとうとうしようかな、と思ったら。。。。SSH接続さえできなかったので、対応まとめておきました。

## エラーの内容

sshのコマンドを打って、アクセスしようとすると、、、、 

```
<pre class="p1">% ssh <span style="color:">user_name</span>@<span style="color:">server_ip_address</span> -i <span style="color:">private_key_file</span> -p <span style="color:">port_no</span>
<span style="color:">@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@ WARNING: UNPROTECTED PRIVATE KEY FILE! @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@</span>
Permissions 0644 for <span style="color:">private_key_file</span> are too open.
It is required that your private key files are NOT accessible by others.
This private key will be ignored.
Load key <span style="color:">private_key_file</span>: bad permissions
<span style="color:">user_name</span>@<span style="color:">server_ip_address</span>: Permission denied (publickey).
```

秘密鍵が保護されてない！と、言うことですね。 アクセス権を見てみます。 

```
<pre class="p1"><span class="s1">% ls -l
</span> <span class="s1">-rw-r--r--@ 1 <span style="color:">mac_user</span><span class="Apple-converted-space">  </span>staff 1766<span class="Apple-converted-space">  </span>1 20 15:23 <span style="color:">private_key_file</span></span>
```

管理者以外がReadできちゃうってわけですね。 ## 秘密鍵の権限変更します

600に設定します。 

```
<pre class="p1"><span class="s1">% chmod 0600 ./<span style="color:">private_key_file</span></span>
```

こんな権限設定になります。

```
% ls -l 
-rw-------@ 1 <span class="s1"><span style="color:">mac_user</span></span> staff 1766 1 20 15:23 <span class="s1"><span style="color:">private_key_file</span></span>
```

## アクセスしてみます

sshコマンドを打って 

```
% ssh <span style="color:">user_name</span>@<span style="color:">server_ip_address</span> -i <span style="color:">private_key_file</span> -p <span style="color:">port_no
</span>Enter passphrase for key <span style="color:">private_key_file</span>:
```

パスワードの入力が求められました。 その後、パスワードを入力し、ちゃんと入れました。
Mac M1にDockerインストールしてみます

## 転載元
当記事は以下ブログからの転載です。
[TECH BACK](https://techback.info/mac-m1-docker-install-2/)

## はじめに
DockerのM1チップへの正式対応を待っていたのですが、そろそろ待ち切れなくなってきました。 Preview版を試してみようと思います。

## 環境

今回対応する環境です。 [![](http://techback.info/wp-content/uploads/2021/01/img_6005557cd3891.png)](http://techback.info/wp-content/uploads/2021/01/img_6005557cd3891.png)

Android Studioもエミュレータが使えないなど有りますが、私の場合特に問題なし。この調子で、Dockerを使っての開発もどんどん進めていきたいと思います。 ## 手順

### ダウンロード

Docker DesktopのPreview版をダウンロードします。 
https://www.docker.com/blog/download-and-try-the-tech-preview-of-docker-desktop-for-m1/ 下の画像の、Download！の文字リンクから、ダウンロード [![](http://techback.info/wp-content/uploads/2021/01/img_60056303644c3.png)](http://techback.info/wp-content/uploads/2021/01/img_60056303644c3.png)

で、インストールします。 グリっとドラッグして。。。 [![](http://techback.info/wp-content/uploads/2021/01/img_6005647a2ae2e.png)](http://techback.info/wp-content/uploads/2021/01/img_6005647a2ae2e.png)

OKボタンをクリック [![](http://techback.info/wp-content/uploads/2021/01/img_6005657e8202f.png)](http://techback.info/wp-content/uploads/2021/01/img_6005657e8202f.png)

Macに設定しているパスワードを入力して、ヘルパーをインストール [![](http://techback.info/wp-content/uploads/2021/01/img_600565bfc38ff.png)](http://techback.info/wp-content/uploads/2021/01/img_600565bfc38ff.png)

無事インストールできているようです。

[![](http://techback.info/wp-content/uploads/2021/01/img_6005664cb0843.png)](http://techback.info/wp-content/uploads/2021/01/img_6005664cb0843.png)

これから、Windowsで作成していたDockerファイルを動かしてみようと思います。
MacのAndroid Studioで':app:debugRuntimeClasspath'エラー

##転載元
当記事は以下ブログからの転載です。
[TECH BACK](https://techback.info/mac-android-stud…eclasspath-error/‎)

## はじめに
WindowsのAndroid Studioではちゃんと動いていたプロジェクトが、MacのAndroid Studioでは動かず。。。エラーに対応しました。

## 発生した、エラー・警告

もともとWindowsで開発していた、Android アプリ。Githubでコード管理していました。 コレを新しく買ったMacで開発しようと、 
1. Androd Studioをインストール
2. GithubでClone

そして、Android Studioで開くのですが、、、 なんかエラーやら警告やら。。。 [![](http://techback.info/wp-content/uploads/2021/01/img_6003197204186.png)](http://techback.info/wp-content/uploads/2021/01/img_6003197204186.png)

```
:prepareKotlinBuildScriptModel
　License for package Android SDK Build-Tools 29.0.2 not accepted.
　License for package Android SDK Platform 29 not accepted.
Could not resolve all dependencies for configuration ':app:debugRuntimeClasspath'
```

### Androidアプリのプロジェクトとして認識していないみたい

[![](http://techback.info/wp-content/uploads/2021/01/img_600324842e290.png)](http://techback.info/wp-content/uploads/2021/01/img_600324842e290.png)

## 対応

Android Studio -> Preferenes... 
[![](http://techback.info/wp-content/uploads/2021/01/img_60031eb4c17e9.png)](http://techback.info/wp-content/uploads/2021/01/img_60031eb4c17e9.png)

Appearance & Behavior -> System Settings -> Android SDK [![](http://techback.info/wp-content/uploads/2021/01/img_600326dda04b2.png)](http://techback.info/wp-content/uploads/2021/01/img_600326dda04b2.png)

SDK Tools タブを表示すると、警告のひとつ目に表示されていた、**Android SDK Build-Tools**がいますね。 右下のShow Package Detailsにチェックを入れると。 [![](http://techback.info/wp-content/uploads/2021/01/img_60031f58afd6e.png)](http://techback.info/wp-content/uploads/2021/01/img_60031f58afd6e.png)

細かくバージョンが出てきます。 
```License for package Android SDK Build-Tools 29.0.2 not accepted.```

と、警告が出ていたので、素直に29.0.2にチェックを入れ、下の**Apply**ボタンクリック [![](http://techback.info/wp-content/uploads/2021/01/img_60031f93a7f44.png)](http://techback.info/wp-content/uploads/2021/01/img_60031f93a7f44.png)

後はウィザードにしたがって進めていけばOKです。 [![](http://techback.info/wp-content/uploads/2021/01/img_6003270d09f0d.png)](http://techback.info/wp-content/uploads/2021/01/img_6003270d09f0d.png)

インストールが終わったら、**Invalidate Caches / Restart...**をしておきましょう。 [![](http://techback.info/wp-content/uploads/2021/01/img_6003202691f62.png)](http://techback.info/wp-content/uploads/2021/01/img_6003202691f62.png)

Androidアプリとして認識したようです。 あと、Mac(m1チップ)なので実機でデバッグ。。。OKでした。
[![](http://techback.info/wp-content/uploads/2021/01/img_6003219df013c.png)](http://techback.info/wp-content/uploads/2021/01/img_6003219df013c.png)

### ちなみに

他にも、警告・エラーが出ていましたが、上記対応で出なくなりました。
MacでAWS CLIをセットアップ

##転載元
当記事は以下ブログからの転載です。
[TECH BACK]( https://techback.info/mac-aws-cli-setup/)

##はじめに
今までWindowsで作業してきたので、もちろんWindowsの方ではAWSのCLIを設定して使用してきました。Macにデビューしたこともあり、こちらでもセットアップしてみようと思います。

## 参考にしたページ

というか、こちらの方法でセットアップしただけです。 
[https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/install-cliv2-mac.html](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/install-cliv2-mac.html)
## AWS CLI Version2をインストール

まずは、最新版をダウンロード 
https://awscli.amazonaws.com/AWSCLIV2.pkg 
で、実行してポチポチ進めて行けばOK 
[![](http://techback.info/wp-content/uploads/2021/01/img_5ff41786491c4.png)](http://techback.info/wp-content/uploads/2021/01/img_5ff41786491c4.png)

ターミナルを起動して、 
```aws```
とタイプしてEnter

 [![](http://techback.info/wp-content/uploads/2021/01/img_5ff41847df8de.png)](http://techback.info/wp-content/uploads/2021/01/img_5ff41847df8de.png)

ちゃんと認識しているようです。 バージョンも確認しておきますか
```aws --version```

[![](http://techback.info/wp-content/uploads/2021/01/img_5ff418d05a119.png)](http://techback.info/wp-content/uploads/2021/01/img_5ff418d05a119.png)
つぶやきOSPF



# OSPF(Open Shortest Path First)

* LSA(Link State Advertisement)という情報をもとに、ルーティング情報を作成していくプロトコルです。
* ネットワークに接続されたリンクをコストに換算し、そのコストが最小になるようにルーティングテーブルを作成していきます。
* このルーティングアルゴリズムは**リンクステートアルゴリズム**と呼ばれます。

[ルーティングテーブルの例：](https://www.furukawa.co.jp/fitelnet/f/man/60/command-show/show/show_ip_ospf_route.htm)

```
Router#show ip ospf route
============ OSPF network routing table ============
N     10.1.1.0/24         [10] area: 0.0.0.1
                          directly attached to port-channel0
N     20.1.1.0/24         [20] area: 0.0.0.1
                          via 10.1.1.2, port-channel0
N     30.1.1.0/24         [20] area: 0.0.0.1
                          via 10.1.1.2, port-channel0
N IA  40.1.1.0/24         [10] area: 0.0.0.1
                          via 10.1.1.3, port-channel0
N IA  40.1.2.0/24         [10] area: 0.0.0.1
                          via 10.1.1.3, port-channel0

============ OSPF router  routing table =============
R    192.168.30.4         [10] area: 0.0.0.1, ABR, ASBR
                          via 10.1.1.3, port-channel0

============ OSPF external routing table ===========
N E1  50.1.1.0/24         [20] tag: 0
                          via 10.1.1.3, port-channel0
```

## DR, BDR

* OSPFを適用するネットワークでは、そのセグメントの中で最も高いプライオリティ値をもつルータがDR(Designated Router: 指名ルータ)として選出されます。
* 次に高いプライオリティ値をもつルータはBDR(Backup DR)となります。
* ネットワーク内の各ルータは、代表ルータに対してルータLSAを送信し、代表ルータはそれをもとにネットワーク全体の情報（ネットワークLSA）を作成します。

## エリア

* OSPFにおいて、LSAを交換する範囲を**エリア**と呼びます。
* エリア０はとくに<b>バックボーンエリア</b>と呼ばれます。

## ５種類のパケット

(https://www.infraexpert.com/study/ospfz5.html より)

### タイプ１：Hello

* ネイバー（論理的に隣接したルータ）を検出するためのパケットです。
* ネイバー検出後、キープアライブ（生存確認）にも使われます。
* マルチキャストで送信されます(224.0.0.5)。
* このHelloパケットを出さないように設定された機器は**パッシブインターフェース**と呼ばれます。

### タイプ２：DBD

* 自身のLSDB(Link State DataBase)に含まれているLSAのリスト一覧が載っています。
* ネイバーとこのパケットを交換することで、自身のLSDBに不足しているLSAを認識します。

### タイプ３：LSR

* 自身のLSDBに不足があった場合、ネイバーにそのLSAを要求するために使用されます。

### タイプ４：LSU

* LSRによりネイバーから要求されたLSAを送信するために使用されます。

### タイプ５：LSAck

* LSUを受信したことを通知する確認応答として利用されます。
vuforia Waterオブジェクト、船を動作させる

1,　イメージターゲットを設定する
![A061F52E-C35C-4DF8-A747-20B3D909B0EF_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/e8812768-ffc9-e90c-0647-e986eb88e982.jpeg)

2, 水のオブジェクトを配置して、子オブジェクトにする
![8F70F486-8563-4C6C-9195-CD2EEC9BE28D_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/840935a4-9a0e-ff23-19e7-3e9e64cd4fbd.jpeg)

3, ShaderのTilingの数値を設定する
![23B3D0FA-ECA4-492C-A403-1ED6C634595D_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/32011d6f-a140-b099-c47b-28b677c32008.jpeg)

![3241BF71-FE77-4378-A8EB-907CD6E77F94_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/27f8790f-7d82-5b4b-8bf8-2b78cac69172.jpeg)

4, GameObjectを作成し中心に置く。ボートはGameObjectから位置を少しずらす
![A5C861C7-DA85-44F1-BE82-074C44DC0D21_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/defd40d3-5852-145e-da7b-9957534ad6e5.jpeg)

5, ボートをGameObjectの子オブジェクトにする。
![5F501793-D203-4C2D-937F-CE51658FD213_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/dea785a2-02f9-4add-5832-9f4e70500aa1.jpeg)

6,Rotate.csをつけ、数値を調整する
![E88EB3FC-B27E-4C37-8B81-60F59651DC26_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/940521/e4443407-1363-e64f-f2a9-9d95021f06ce.jpeg)
ReactでEnterキーが押された時の挙動を指定する


## やりたいこと
- このようなテキストボックスに文字をいれて、Enterキーを押したときに`DEPLOY`ボタンをクリックしたときと同じ動作になるようにしたい
- `DEPLOY`ボタンが押された際には、`handleClickStart`が呼ばれる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293481/5bfd338c-8b30-4103-70fc-d9e688f848a8.png)

## コード
- formに`onSubmit`を指定して、サブミットが走った時の動作を`handleSubmit`で指定する
    - `handleSubmit`が呼ばれた時に、`handleClickStart`を呼ぶようにする
    - `event.preventDefault();`はsubmit処理の規定の動作を防ぐもので、これがない場合、画面描画などの一般的な処理がこのタイミングで走る
    - `handleClickStart(values)`のように指定できるのは（引数としてvalues与をえなくていい）、valuesはグローバル変数というかこの関数内で使える変数になっているから
- `onClick`を指定すると、2重で呼ばれることになる
    - それは、明示的に指定しているonClickの動作とsubmitの動作での２回分 

```react
  const handleSubmit = (event) => {
    handleClickStart(values)
    event.preventDefault();
  };

  return (
    <React.Fragment>
      <Title>Today</Title>
      <form className={classes.root} noValidate autoComplete="off" onSubmit={handleSubmit}>
        <TextField
          id="standard-basic"
          label="Standard"
          onChange={handleChange}
          value={values}
        />
        <ResponsiveContainer>
          <Button
            type="submit"
            variant="contained"
            color="primary"
          // onClick={() => {
          //   handleClickStart(values);
          // }}
          >
            Deploy
        </Button>
        </ResponsiveContainer>
      </form>
    </React.Fragment >
  );
```

## 参考
https://ja.reactjs.org/docs/forms.html
tremaでHello,Trema!をやってみる

#はじめに
openflowに興味があり、tremaを触ってみようと思いましたが、環境構築に手間取ってしまったので、備忘録です。

#目次
1.VirtualVoxを使って環境構築
2.openvswitchをインストール
3.必要なもののインストール
4.Hello,Trema!をやってみる


#1.VirtualVoxを使って環境構築
##準備
ubuntu-20.04.2.0-desktop-amd64.isoファイルを使って仮想環境の構築をします。このファイルは[公式サイト](https://jp.ubuntu.com/download)にあります。

|メモリ|HDD|
|:--:|:--:|
|1GB|15GB|

|アダプター|ネットワーク|
|:--:|:--:|
|アダプター1|NAT|
|アダプター2|内部ネットワーク|
|アダプター3|内部ネットワーク|
|アダプター4|内部ネットワーク|
vmのネットワークは上記の表のように後で拡張しやすいように設定しました。

##インストール
user: openflow
passward: openflow
※日本語の設定にしました。

#2.openvswitchをインストール
##NATでWANに繋がっているかを確認します。

```
$ping 8.8.8.8
```

もしつながっていなければ、

```
$sudo nmtui
```
から接続をアクティベートするを選びenter。
　　　　　　　　　↓
Ethernet(enp0s3)を選びenter。
そして戻る→終了の手順をするとWANに繋がります。

##openvswitchをインストール
```
$sudo apt-get install openvswitch-switch
```
ついでに起動もしましょう!

```
$sudo systemctl start openvswitch-switch
```


#3.必要なもののインストール
```
$sudo apt-get install -y  gcc  ruby ruby-dev libpcap-dev rubygems
$sudo gem install trema
```
tremaのバージョン: 0.10.1
rubyのバージョン : 2.7.0p0

#4.Hello,Trema!をやってみる
[こちら](https://yasuhito.github.io/trema-book/)のサイトのhello_tremaをやっていこうと思います。
```
$mkdir -p hello_trema/lib
$cd hello_trema
```
この中にファイル追加します。

```lib/hello_trema.rb
# Hello World!
class HelloTrema < Trema::Controller
  def start(_args)
    logger.info 'Trema started.'
  end

  def switch_ready(datapath_id)
    logger.info "Hello #{datapath_id.to_hex}!"
  end
end
```

```trema.conf
vswitch { datapath_id 0xabc }
```

そしてすでにtremaはインストールされているので、実行してみます。

```
$trema run ./lib/hello_trema.rb -c trema.conf
Trema started.
Hello, 0xabc!
```

正しく実行されていることが確認できます。


私は、tremaをインストールするのに苦労したので、openflowをtremaでやりたい方は参考にしていただければ幸いです。

###参考にしたサイト
[https://yasuhito.github.io/trema-book/](https://yasuhito.github.io/trema-book/)
[https://www.atmarkit.co.jp/ait/articles/1306/11/news004.html](https://www.atmarkit.co.jp/ait/articles/1306/11/news004.html)
セッションタイムアウト2分前に表示されるメッセージの制御(Windows Server 2016)

XenAppやXenDesktopの製品名がCVADに変更されていました。
WinFrame、MetaFrameXP、MPS、CPS、XenApp&XenDesktopと製品名称が変更になり、
AppとDesktopが1つの製品ラインに変更されCVADとなったのでしょうか。
個人的にはXenApp、XenDesktopが好きなのでここではXenAppと表記します。

さて、無操作状態(アイドル)のタイムアウトの設定ですが、XenDesktopでは
Citrix側のポリシーで設定できるのですが、XenAppの場合は、グループポリシーで
設定する必要があります。
元々XenAppがMicrosoft RDSのアドオンとして開発された経緯があるのでその制限を
受けているのかと思います。
アイドルタイムアウトの設定ですが、残り2分を切るとポップアップが表示されます。
「あと2分で切れますよー」的な。
このメッセージですが、RDS(tcp:udp/3389)で接続している環境では制御できるのですが、
ICAで接続している場合には制御できません。
メッセージを制御しているのは「`fEnableTimeoutWarning`」が「`0`」の場合は非表示となり
「`1`」の場合には表示されます。

XenAppの場合はどうでしょう。RDSとは別のレジストリを参照しているようで、「0」を設定しても
メッセージがしつこく表示されてしまいます。

ICAセッションでログイン時に参照しているレジストリを調査してみました。
ログイン時、次のキーを参照していました。

`HKLM\SYSTEM\CurrentControlSet\Control\Terminal Server\DefaultUserConfiguration
名前：fEnableTimeoutWarning`

このレジストリはデフォルトで存在しない値なので新規に作成し「0」をセットしましたが
有効には働きませんでした。

もう一度確認すると、次のレジストリも参照しており、こちらもデフォルトでは存在しない
レジストリでした。

`HKLM\SYSTEM\CurrentControlSet\Control\Terminal Server\WinStations\ICA-CGP
名前：fEnableTimeoutWarning`

このレジストリ以外の「ICA-CGP-1,ICA-CGP-2,ICA-CGP-3,ICA-HTML5,ICA-SSL」には
`fEnableTimeoutWarning`が存在し、デフォルトで「1]が設定されているのですが、
「ICA-TCP,ICA-CGP」にはキーすら存在しませんでした。

長々と書きましたが、次のレジストリを設定すると、「あと2分で切れますよー」の
ポップアップが表示されなくなります。

`キー：HKLM\SYSTEM\CurrentControlSet\Control\Terminal Server\WinStations\ICA-CGP
名前：fEnableTimeoutWarning
種類:REG_DWORD
値：0`

「ICA-CGP-1,ICA-CGP-2,ICA-CGP-3,ICA-HTML5,ICA-SSL」に存在するレジストリには「1」が
デフォルトで設定されているのでこちらも「0」に変更しておきます。

XenAppインストール時、これらのキーを作成するために元となるレジストリが存在するはず
なのですが、この調査はまた気が向いたときにでも。
予想としては、
「`HKLM\SYSTEM\CurrentControlSet\Control\Terminal Server\DefaultUserConfiguration`」
に含まれている情報をマスターとして利用しているように思うのですが、真相は・・・。
【初投稿】IT業界分析

##自己紹介##
 どうも、初めまして。飲食業界からふとエンジニアになろうと思い立って２０２１年３月からテックキャンプで勉強はじめました。前職は６年間ほどイタリアンの調理師をしていました。転職活動するにあたりIT業界の当たり前やどんな仕事があるのかをまとめます。

##ITって?##
  **information technology(情報技術)**の略称です。インターネットテクノロジーじゃないです。
IT業界は多種多様ですが、５つに分けるとしたら**ソフトウェア業界、ハードウェア業界、インターネット業界、情報処理サービス業界（SI）、情報通信業界**に分けることができます。

##ソフトウェア業界##
  ソフトウェアとはOS(オペレーティングシステム)とアプリケーションソフトのことであり、顧客のニーズに応じてイチからソフトを開発する**「受託開発」**と、ユーザーのニーズなどを捉えて自社でパッケージ品を開発して販売する**「パッケージ開発」**の2つがある。また、クラウド、SaaS、CRMなど注目を集める分野に注目がされている。

##ハードウェア業界##
  PCの本体そのものやキーボード・マウス・ハードディスクなどの**物理的なパーツの総称**です。近年では**IoT（Internet of Things）もののインターネット**と言われPCだけでなくスマートフォンや家電製品など幅広くニーズが高まっている。


##情報処理サービス業界##
  いわゆるSI業界。様々な業界・企業の業務をよりスムーズになるような**独自のシステムを企画・開発・運用の全て**を担っています。

##情報通信業界##
  通信を繋ぐ回線の提供や通信機器の提供を行っています。

##業界規模は？##
  IT業界の規模としては１６.4兆円でした。と思ったらこれだけなく[業界の動向](https://gyokai-search.com/)

##どんな業種があるのか？##
**エンジニア**
　クライアントの業務分析から**システム設計、プログラミング、テスト、保守・運用までシステム運用における一連の業務**に幅広く携わります。フロントサイド、バックエンド、インフラ

**プログラマー**
　システムエンジニアが設計した**設計書をもとに、実際にプログラムを組むこと**です。

**ITコンサルティング**
  ヒアリング結果や業界や経営状況などから、**クライアントの問題を特定しそれを解決に導く**のがITコンサルタントの仕事です。


**営業**
  IT営業は、パッケージソフトウェアなどの製品、システム開発やWeb制作など**ITに関するサービスを営業し販売する**仕事です。扱う商品がやや特殊なだけで、お客様と対人関係を築いて商品を売り込む、アフターケアまでしっかりと行うなど、仕事内容は一般的な営業と大きく変わりありません。

##まとめ##
 私のITに対する認識は伸びている業界で今後日本や世界にとって主幹となるものといった漠然としたものでした。今回調べたことにより具体的に業界や業種の可能性がわかりました。次回は**エンジニア**について深掘りをしたいと思います。