OmniAICreator/Qiita-1.07M huggingface dataset:
【備忘録】自分がフロントエンドで使っているツール

はじめまして、にへーと申します。

私は、フロントエンドエンジニアを経験後に専門学校講師を仕事にしています。

趣味は、コーディング。他の人の書いたソースを眺めていられるそんな人です。

今回、自分自身がフロントエンドを作っていく際に使っているツールをまとめておきます。

## 1.Visual Studio Code
前職で使っていたのですが、とにかく軽い。
Microsoftが開発しているので、TypeScriptとかとも相性がバッチリみたいです。

アカウント連携が結構良くて、複数環境で開発を行っている人にはとても使いやすいと思います。
Windows、Ubuntu、Macを使う人にはもってこいです。

## 2.NeoVim
Vimなどは使ったことがなかったのですが、最近使うように心がけています。
VSCodeなどGUIアプリケーションがない場合にも対応できるよう、現在勉強中です。

プラグインもNeoVimは豊富にあるようなので、これから実験していこうと考えています。

## 3.Google Chrome Developer Tool
エンジニアの人からしたら「あたりまえ!」と思われると思いますが...
検証作業には必須です。
レイアウト調整や、CSSの詳細度、JavaScriptの動作確認などに使っています。

## 4.Node.jsとGulp
ツールというのは微妙なラインですが、Gulpで画像圧縮などのめんどくさい作業をタスクランナーにしたりしていました。
今は、あんまりGulpは使っていないですが、とにかく便利です。

 ## 5.Whats Runs(Google Chrome)
Google Chromeの拡張機能です。
他の人が運営しているサイトでどんなシステムが動いているか確認できるツールです。
「あ、この人PHPだ」「お！このサイトNext.jsじゃん!」とかを調べることができます。

サーバーもApacheとかNginxとかも見れます。

## まとめ
ざっくりとまとめてみましたが、意外と数が少なかったです。
他にも思い出したらあると思うので、またなにかあれば別記事を作成してみようと思います。

初めての投稿でした。なにか参考になれば幸いです。
WordPressでパーマリンクの非表示化

ワードプレスのテーマtwentytwentyを基盤に、管理者画面の投稿編集画面に表示されるパーマリンクを非表示にする実装を行ったので、備忘録的にこの記事を残す。

# 環境情報

PHP：version 7.3.12
WordPress：version 5.5.3
WPテーマ：twentytwenty

# パーマリンクの非表示

下記の内容をテーマの中にある「functions.php」に追記して「if文」の中の「post_type_name」の部分を実際に使用しているカスタム投稿名に変えれば投稿編集画面の「パーマリンク」の項目は表示されなくなります。

```functions.php
add_action('current_screen','hide_permalink');
function hide_permalink(){
    $current_screen = get_current_screen();
    if(isset($current_screen) && $current_screen->post_type === 'post_type_name') {
        $style = '<style>#edit-slug-box {display: none !important; }</style>';
        echo $style;
    }
}
```
WordPressで「プレビュー」、「ゴミ箱へ移動」ボタンの非表示化

ワードプレスのテーマtwentytwentyoneを基盤に、管理者画面の投稿編集画面に表示されるプレビューボタンとゴミ箱へ移動を非表示にする実装を行ったので、備忘録的にこの記事を残す。

# 環境情報

PHP：version 7.3.12
WordPress：version 5.5.3
WPテーマ：twentytwentyone

# 作業

```function.php
//「プレビュー」と「ゴミ箱へ移動」ボタンを非表示
add_action('admin_print_styles', 'admin_preview_delete_css_custom');
function admin_preview_css_custom() {
    $current_screen = get_current_screen();
    if(isset($current_screen) && (
    $current_screen->post_type === 'company' ||
    $current_screen->post_type === 'office'
    ) ) {
        $style = '<style>#preview-action {display: none;}</style>';
        $style .= '<style>#delete-action{display: none;}</style>';
        echo $style;
    }
}
add_action('admin_print_styles', 'admin_preview_delete_css_custom');
```

カスタム投稿タイプ名が「company」と「office」の時はプレビューとゴミ箱へ移動を非表示にするようにしている。
エラーメッセージ


|種類|分類内容||例|
|---|---|---|---|---|
|業務メッセージ|実行結果を伝える||「登録しました。」<br>「現在登録はできません。」|
|確認メッセージ|内容を確認し、処理を行う||「登録しますか。（はい/いいえ）」|
|警告メッセージ|処理は継続されるが、問題がある||「確定日が入力されていません。」|
|エラーメッセージ|オペレーションで回避できる|単項目|「数値で入力してください。」|
|||関連|「確定の場合は、確定日を入力してください。」|
|システムエラーメッセージ|オペレーションで回避できない||「問い合わせてください。」|
テーブルデータに使えるNNモデルの備忘録（PyTorch）

# はじめに
この度、kaggleのMoAというコンペに会社の同僚と参加し4,384チーム中35位を獲得することができました。テーブルデータのコンペは初めてだったのですがチームメンバーのおかげで楽しく学びをもって取り組むことができました。この記事ではこのコンペに取り組む中で見つけたテーブルデータに使えるNNモデル(PyTorch)を備忘録としてまとめます。
https://www.kaggle.com/c/lish-moa/overview

# TabNet
このコンペではこちらのモデルを使っている人も多かったのではないでしょうか？安定していい性能を発揮するので便利でした。
TabNet: Attentive Interpretable Tabular Learning. arXiv preprint arXiv:1908.07442.) 
https://arxiv.org/pdf/1908.07442.pdf.
https://github.com/dreamquark-ai/tabnet

このモデルはGoogle CloudAIチームによって開発されているもので、Google Cloud AI Platformでも採用されているとかいないとか...
論文によるとこのモデルの真価を発揮するためにはlabelを使わないSelf Pretrainingをする必要があるようなのですがPyTorch Tabnetのレポジトリにはまだその機能は実装されていません（開発中のようなのでいつか追加されると思います。）なので今回のコンペでは開発中のbranchを利用して自分で実装したものを使いました。実際、Pretrainingを使うとモデルが大きくなっても過適合せずにキチンと学習が進みました。
https://github.com/hirune924/tabnet
使い方
https://www.kaggle.com/hirune924/pytorch-tabnet-pretraining-step3-many-fe-train

# DeepFMとその仲間たち
CTR predictionの分野ではNNでテーブルデータを使う研究が盛んなのでしょうか？今回のコンペではカテゴリカル特徴がほぼ無かったので結局は使いませんでしたが、カテゴリカルデータ多い問題であれば使えたかもしれないなと思っています。
https://github.com/guokr/TorchCTR
https://github.com/shenweichen/DeepCTR-Torch
https://deepctr-torch.readthedocs.io/en/latest/
https://github.com/jrzaurin/pytorch-widedeep
 
# DeepInsight
こちらはテーブルデータというかゲノミクスなどの非画像データ（特に高次元でスパースな非画像データ）をkPCAやt-SNEを使用して画像化してCNNで扱うという方法です。思い切った方法ですが精度は意外といいです。しかし、わざわざ画像にして扱うのでモデル学習時間やモデルサイズがテーブルデータと比べると大きく増加するのが欠点かなと思います。今回のコンペでもモデルがヘビーになってしまって実験サイクルのスピードが落ちてしまいそうだったので採用しませんでした。
https://www.kaggle.com/markpeng/deepinsight-efficientnet-b3-noisystudent
https://www.kaggle.com/markpeng/deepinsight-transforming-non-image-data-to-images

# GrowNet
こちらは自分は使わなかったので説明は省きますが、複数の小さなNNモデルを勾配ブースティングのように積んでいく感じでしょうか
https://github.com/sbadirli/GrowNet
https://www.kaggle.com/gogo827jz/multi-label-pbestpre-inference-grownet-pl

# NODE
こちらも自分は使わなかったので説明は省きますが、NNモデルを使った決定木みたいな感じでしょうか
https://github.com/Qwicen/node
https://www.kaggle.com/gogo827jz/moa-public-pytorch-node
Pull Requestとは何なのか、実際に使ってみた

#はじめに
Pull Requestは、チーム開発において欠かせない存在です。
エンジニアとして、覚えておかなければいけない知識の一つだといえるでしょう。

そこで、この記事では、
「Pull Requestとは何か？」
ということを実際に使いながら解説していきます。

#対象者
・Pullリクエストに興味がある人
・Pullリクエストを使ってみたい人

#環境
GitHub

#Pullリクエストとは？
一言で言えば、**「実際にコードを反映させる前に、チームメンバーからのレビューを受けること」**です。
誤ったコードを本番コードに書いてしまうことを防ぎ、信頼性が担保できます。

#実際に使ってみた

###まずは、コードレビューしてもらう人の側の操作

GitHubのファイル画面から、コード内容を変更したいファイルを選択します。
そして、コードの右肩部分にある『鉛筆マーク』をクリック。

![スクリーンショット 2020-12-03 8.33.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689079/00ed8704-f631-6832-4efd-fa0fba306add.png)

今回修正したいのは、赤枠で囲ったコードです。

![スクリーンショット 2020-12-03 8.35.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689079/059e714e-637d-817e-15aa-46f0f825cf6a.png)

It以下の『' '』で囲った英語表記を、可読性を上げるために日本語表記へと変更しました。

![スクリーンショット 2020-12-03 8.36.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689079/bb06d9d0-f3e9-020f-020a-9b396a0cf7f5.png)

赤丸で囲った『Create a new branch for this commit and start apull request』を選択します。

![スクリーンショット 2020-12-03 8.37.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689079/6328b0cc-5018-882b-bf0d-7ab5e9729a98.png)

画面が切り替わるので、コードレビューをしてくれる人に向けてコメントを書いてから、『Create pull request』をクリック。

###ここからはコードレビューしてくれる人の側の操作

![スクリーンショット 2020-12-03 8.45.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689079/1ec4009c-0348-af65-f30d-7870c31bc3c4.png)

GitHubの画面から『File changed』タブを選択します。
コードの変更前と変更後の表記が表示されています。
色使いが分かりやすいですね！

![スクリーンショット 2020-12-03 8.51.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/689079/3a676f67-a0f4-1031-9966-701c233e3ace.png)

問題がなければ、『Conversation』タブを選択し、ページ下のほうにある『Merge pull request』をクリック。

こうすることで、レビューしてもらったコードが本番コードに追加されます。
以上で、Pullリクエストが完了です！

#終わりに

チームで開発する上では、欠かせない存在であるPullリクエスト。
ポートフォリオ作成を進めていく上でも、使い慣れておくと実務で活かせると思います。
ぜひ、使い方を覚えておきましょう！

#参考
【第4回】非エンジニア向けGitHub入門〜Pull Request（通称プルリク）とは？〜
https://seleck.cc/529
PowerAutomateでアンケート結果から会議招集を送る①

複数人の予定をきいて、会議招集を送ることが2週間に一度のペースで発生しており、
これめんどくさいな・・・と思ったのでPowerAutomateで自動化しました。

Outlookのスケジュールアシスタントを使えばいいのでは？という感じですが、
客先常駐で、客先では別のアカウントを使用しているような場合だと、
会社のアカウントのスケジュールには何も入ってない、ということも多々あり、やめました。

Outlookの便利なアドインもあるので、そっちを使うのもありかもしれません。
- [FindTime](https://support.microsoft.com/ja-jp/office/findtime-%E6%8A%95%E7%A5%A8%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95-4dc806ed-fde3-4ea7-8c5e-b5d1fddab4a6)

# 前提条件
- Office365を使用しており、以下のサービスは使用できる
    - Outlook
    - Excel
    - Teams
    - Forms
- CDS（Common Data Service）は使用できない

# 作ったPowerAutomate
以下のような流れになっています
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895455/c1323d87-9d3f-2cad-3f7a-14174cf57d16.png)

# 詳細
今回はFormsから値を取得する部分を記載します。

### 0.アンケートを作成する
PowerAutomate外ですが、以下のようなアンケートをFormsで作成します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895455/b94e9686-ba44-f700-13f5-31bed698252a.png)

最初は打ち合わせをしたい日を聞く方向でやろうとしていたのですが、
それだと「この日どうしても参加できない」を拾えないので、参加できない日を聞くスタイルにしました。
チェックなしでも回答できます。
また、打ち合わせの時刻は9：30-10：00で固定なので、時間は聞いていません。

### 1．トリガーを設定する
トリガーは「Forms」で「新しい応答が送信されるとき」にしました。
フローの新規作成時にダイアログで選ぶこともできますが、
トリガー名がわかってることが前提の検索になっているので、
スキップした先で検索して指定したほうが慣れないうちはいいかと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895455/d6a1ab86-550b-9e6c-0f3b-266bf8ab371d.png)

スキップした先はこのような画面なので、
「MicrosoftForms」を選ぶと、Formsで拾えるトリガーの一覧が表示されます。
Formsのトリガーは現状「新しい応答が送信されるとき」しかありません。
参考：[Microsoft Formsのコネクタ](https://docs.microsoft.com/ja-jp/connectors/microsoftforms/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895455/450aa3fe-71f8-71bc-56cb-b381e3bed848.png)

### 2.トリガーの詳細を設定する
「新しい応答が送信されるとき」のトリガーの詳細情報はアンケート名のみです。
ここで、トリガーにしたいアンケートを選択します。
アンケート名だけで何のアンケートなのかわかる必要があるので、
打ち合わせ日程調整系は「〇月〇週目」と入れるようにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895455/bcd1728b-5497-48c5-acbd-9b60dd1896aa.png)
設定したら「+新しいステップ」ボタンを押します

### 3.応答情報の詳細を取得するアクションを追加する
Formsの応答情報がないと何もわからないので、応答情報を取得します。
Formsのアクション「応答の詳細を取得する」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895455/1292ef68-9f1c-77c8-3060-7161ee78eef6.png)

アクションの詳細を設定します。
フォームIDの部分は、2で指定したアンケートを指定します。
応答IDの入力のところをクリックすると、「動的コンテンツ」として「応答ID」がでてくるので、
それを指定します。
「応答ID」をここで指定することで、あとからさらに詳細なアンケート項目の内容を得ることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/895455/0c8217e0-1aa2-f1b5-0bfc-94123772c80c.png)

# この記事はここまで
次回の記事ではデータを何に蓄積するのかを記載します。[次の記事はこちら](https://qiita.com/snow_sch/items/1be918a31140e6bb7bcf)
vagrant upに失敗した時の対応策



[DXを大幅に低下させるDocker for Macを捨ててMac最速のDocker環境を手に入れる \- Qiita](https://qiita.com/yuki_ycino/items/cb21cf91a39ddd61f484)

[Vagrantを使う「Mac最速のDocker環境」を初心者向けに解説【遅いMac for Dockerを卒業】 \- Qiita](https://qiita.com/necocoa/items/bd62ed3dba14b17552f2)

上記の記事を参考に`vagrant up`した所、以下のようなエラーが出ました。

```
The provider for this Vagrant-managed machine is reporting that it
is not yet ready for SSH. Depending on your provider this can carry
different meanings. Make sure your machine is created and running and
try again. Additionally, check the output of `vagrant status` to verify
that the machine is in the state that you expect. If you continue to
get this error message, please view the documentation for the provider
you're using.
```

解決方法を残しておきます。

## 1. Vagrantfileを修正

`mutagen`を使っている部分でエラーが出ているようなので、以下の部分をコメントアウトします。

```shell
Vagrant.configure('2') do |config|
  config.vm.box = 'ubuntu/xenial64'

  config.vm.hostname = 'vagrant01'

  config.vm.network :private_network, ip: '10.212.212.212'

  config.vm.provider :virtualbox do |vb|
    vb.gui = false
    vb.cpus = 4
    vb.memory = 4096
    vb.customize ['modifyvm', :id, '--natdnsproxy1', 'off']
    vb.customize ['modifyvm', :id, '--natdnshostresolver1', 'off']
  end

  config.disksize.size = '30GB'
  # ここからコメントアウトする
  # config.mutagen.orchestrate = true

  # config.vm.synced_folder './', '/home/vagrant/app', type: "rsync",
  #   rsync_auto: true,
  #   rsync__exclude: ['.git/', 'node_modules/', 'log/', 'tmp/']

  # config.vm.provision :docker, run: 'always'
  # config.vm.provision :docker_compose
  # ここまで
end
```

## 2. Vagrant up

Vagrantfileを修正した状態で起動すると成功します。

```sh
vagrant up
```

## 3. Vagrantfileを元に戻す

このままではコメントアウトした部分の設定が反映されてないので、virtualboxを停止してからVagrantfileを戻します。

```sh
vagrant halt
```

これで停止しますので、Vagrantfileのコメントアウトを外します。

## 4. Vagrant up

再度起動します。1回目より時間がかかります。

```sh
vagrant up
```

## 5. 確認

ssh接続できれば成功です。

```
vagrant ssh
```

私のPCにはもともと`~/.ssh/config`は存在していたのですが、実行後に再確認すると追記されていました。

## おまけ


```
vagrant validate
```

上記のコマンドでVagrantfileが正しく書かれているかチェックできます。  
私は`config.vm.hostname = 'vagrant_test'`という設定をしていた所、ハイフンとかアンダーバーは使えないよ的な警告を受けました。
enebularを使ってOmron環境センサーから環境データを取得してみる

# 背景

[Omron 2JCIE-BU](https://www.omron.co.jp/ecb/product-detail?partNumber=2JCIE-BU)は、温度、湿度、照度などいろいろな環境データをまとめてセンシングできる便利なセンサーです。

今回はこのセンサーからデータを取得するフローをenebular上で作成しenebular-agentにデプロイします。

# 使用するノード

[@uhuru/node-red-contrib-omron-2jcie-bu](https://flows.nodered.org/node/@uhuru/node-red-contrib-omron-2jcie-bu)

# 準備するもの

- Omron 2JCIE-BU

- enebular-agentをインストール済のRaspberry Pi
  - enebular-agentのインストール方法についてはここでは扱いません。公式のenebularの公式ドキュメントを参考にしてください
  - [インストレーションについて](https://docs.enebular.com/ja/EnebularAgent/Installation.html)

# 方法

## フローを作成する
enebularのWeb flow editorで、ノードパレットに「@uhuru/node-red-contrib-omron-2jcie-bu」を追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920522/fbf6ab3c-1d4a-b92b-b929-ac101cd011ea.png)

追加されたノードをエディタ画面に配置します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920522/76ee399b-4bdd-c3b6-790a-b828e696bd1a.png)

ノードの設定を開き、Portの設定を行います。
ここには、実際にセンサーを挿入して動作させる際のUSBポートを指定します。
（画像では一例として/dev/ttyUSB0となっています）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920522/a4999230-338e-ad45-2109-cf195a7341cb.png)

Injectノードとdebugノードを次のようにつなぎフローを保存します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920522/e302451e-16ad-e487-0a5f-d460b21637e8.png)

## フローをRaspberry Piにデプロイする

enebularのWeb flow editorでは、実際にはセンサーが接続されていないのでこのフローは動作しません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920522/eb033832-fd78-4926-b6d7-01e26654cdf4.png)

enebularのFlowメニューからDeployを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920522/6bbd1681-a9cc-d345-4194-01dd2a623fd4.png)

実際にセンサーが接続されたRaspberry Piを選択してデプロイします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920522/ed71b901-83ea-41b3-6871-1c5b1f46fcbf.png)

# デバイスログを確認する

debugノードの出力を確認し、センサーデータが取得できることを確認しました。
画像はenebularのデバイスログにて確認していますが、Raspberry PiにログインしNode-REDのコンソールから確認することもできます。
（※enebularからデバイスログを見るためにはenebularのデバイスを有償化する必要があります）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/920522/c3b0a283-88da-4fb7-3f97-ddadfb4e8f2e.png)
最もスリムなphx.new

```
mix phx.new app_name --no-ecto --no-html --no-webpack --no-dashboard --no-gettext
```

* databaseも使わない
* htmlも使わない
* webpackも使わない
* dashboardも使わない
* gettextも使わない（多言語対応するわけでもない）

そんな場合には前述のコマンドを実行すると最もスリムなPhoenixプロジェクトが作成される。

`Phoenix v1.4.15`
「好みの問題」 存在しない説

# はじめに

皆さん、コードレビューで「好みの問題ですが、〜」と言ったことや、言われたこと、ありませんか？

あるいは、言いはしなくとも
「（これは好みの問題だから指摘しなくてもいいか…）LGTM！」
と片付けてしまったことはありませんか？

「好み」と言われると、蕎麦とうどんどっちが好き？みたいな話に聞こえますが、
実際はそんな好き嫌いで片付けずとも、みんなちゃんとコードの書き方にロジカルな理由を持っているんじゃないか？

とたまに思うことがあります。

多分「好みの問題」と曖昧に片付けられてしまうケースの多くは、
**コードを書いている本人としても、「なぜ自分はその書き方にしたいのか？」が明確になっていない**のかもしれません。

**「好む」ということは、きっと何かしらの好む理由（そちらのほうが優れたコードであると思う理由）があるはず**で、
それを明確にしていけば、自分にとっても理解が深まるし、より良いコードレビューができるんじゃないか？

というのがこの記事で伝えたいことです。

# 例

新人エンジニアAさんが、以下の仕様を実装したときのコードレビューを例に考えてみます。

```
仕様書: 「掲示板を作る」
・ログインしないと投稿できないようにしたい
・成人向け掲示板も作りたい（未成年は投稿できない）
```

上記仕様を満たすために、「メッセージを投稿できるか？」を返却する `canPostMessage` というメソッドをつくりました。

```js
class {
  constructor () {
    this.me = getLoggedinUser()
  }
  canPostMessage (bbs) {
    if (!this.me) return false
    if (this.me.age < 20 && bbs.forAdult) return false
    return true
  }
}
```

さっそくレビューに出してみると…、

先輩エンジニアBさん: 「こうすると1行ですっきり書けます！」

```js
canPostMessage (bbs) {
  return this.me && (this.me.age >= 20 || !bbs.forAdult)
}
```

新人エンジニアAさん: 「………。」

新人Aさんはなんとなく自分が書いたコードのほうが良いと思いましたが、あくまでなんとなくです。

これが例の「好みの問題」でしょうか？

新人Aさんは少しモヤモヤしつつも、
「大きな問題じゃないし、先輩に言われてしまったし、黙って提案を受け入れるか」と、
提案をソースコードに適用してしまいました。

（↑これがめっちゃ勿体無い！）

## もっと掘り下げよう！

皆さんはどちらのコードが「好み」でしたか？
そして、それはなぜでしょうか？

この記事では、どちらのコードがより優れているかはそんなに重要ではありません。

重要なのは、新人Aさんが自分のコードの方が良いと思っていることと、
恐らく先輩Bさんにはその理由が伝わっていないということです。

「好みの問題」で片付けてしまった場合、このレビューはAさんの中にあるAさんのコードの良さが明らかにならないまま終わります。

新人Aさんがやるべきだったことは2つです。

- **なぜ自分の書いたコードのほうが良いと思ったのか、自分の中で明確にする**
- それをBさんに説明する

## 新人エンジニアAさんの考え

新人Aさんは、以下のようなイメージで、「文脈での分かりやすさ」を重視して書きました。

```:新人Aさんのコードin日本語
投稿できる？ (掲示板) {
  もし (ログインしていないなら) 投稿できません。
  もし (私が未成年なら、成人向け掲示板には) 投稿できません。
  それ以外の場合、投稿できます。
}
```

Bさんのコードも同じく文にすると、以下のような感じです。

```:先輩Bさんのコードin日本語
投稿できる？ (掲示板) {
  ログインしていて、私が成人済みか、その掲示板が成人向け専用でないなら、投稿できます。
}
```

前者は、確かに3行使ってしまいますが、
仕様書をそのまま英語（プログラミング）にしたかのようで、意図を汲み取るのが容易です。

後者は、「ログインの有無」と「成人向け掲示板の制約」という異なる要素に対する条件が一文に混在してしまっているので、頭の中で分解しながら読み進めなければいけません。

「`this.me.age >= 20 || !bbs.forAdult`」
の部分も、頭の中で条件を逆転させて初めて「未成年は成人向け掲示板に書き込めない」という仕様を理解できます。

また、将来このメソッドに新しい条件を足すことになったときにも、前者のほうが綺麗に追加できそうです。

## 先輩Bさんに説明できたら？

もし先輩Bさんがこの説明を聞いて納得し、彼も新人Aさんのコードのほうが良いと感じたとすれば、
これは「好みの問題」ではなかったと言えないでしょうか？

そして先輩Bさんは新しい考えに出会うことができたし、新人Aさん自身も「なんとなく」だった自分のコードのメリットを明確にすることができました。

もし説明を聞いて意図を理解したうえでも、やはり先輩Bさんはすっきり1行で書くほうに魅力を感じるのであれば、

………それは「好みの問題」だと思います。

説立証ならず。

それでも、お互いが感じているメリットデメリットが曖昧なままレビューを終わらせるより、ずっと良いはずです。

# おわりに

あらためて、僕が伝えたかったことは、

「なぜ自分はこの人の提案を採用したくないか」／「なぜ自分はこの人にこの提案をしたいのか」は、
まず自分の中で整理すれば、「好みの問題」で終わらせずにちゃんと説明できるケースが多いんじゃないか、

そうすると、コードレビューの質はより良くなるんじゃないか、ということでした。
Github Actionsでプロジェクトに新しく追加されたgemを通知する

## はじめに

プロジェクトに新しいgemが追加された場合、そのgemの追加が本当に適切かコードレビューで見るべきポイントの一つだと思います。
とくにレビュアーが知らないgemの場合は、そのgemがどの程度活発にメンテされているか、技術的負債に繋がりかねないレガシーなgemでないか等、気にするべきポイントは多いと思います。
そんな訳で新しく追加されたgemをコードレビュー時に確認しやすくする為に作ったgithub actionを紹介します。

## 何が出来るの？

pull_requestイベントのアクションとして実行することで、gemが新しく追加されたら作者・概要・最終更新日・ホームページといった情報をコメントで通知してくれるようになります。

![Demo](https://i.gyazo.com/7b87cc40ca21eb528b067fddb57ecc03.png)

## 使い方

Gemfileが更新された場合に通知する設定例。

```yaml
name: New gems

on:
  pull_request:
    paths:
      - Gemfile

jobs:
  new-gems:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: ruby/setup-ruby@v1
        with:
          bundler-cache: true
      - uses: aki77/new-gems-action@v1
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
```

## Marketplace

[New gems · Actions · GitHub Marketplace](https://github.com/marketplace/actions/new-gems)

良かったら使ってみてください。
vrmをdaeに変換しxcodeで表示する方法

#準備するもの
vrmをインポートできるblender
vrmファイル
xcode

#vrmをインポートできるblenderについて
blenderは標準だとvrmをインストールできないのでプラグインを入れます。以下手順。
1. 下記のurlにアクセス。
https://github.com/iCyP/VRM_IMPORTER_for_Blender2_8

2. 緑色のcodeボタンをクリックし、download for zipをクリック

3. blenderを開き、Edit -> Preferences をクリックする。

4. 画像右上にあるInstallから先ほどダウンロードしたZIPファイルを選択する。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/877696/84c0b2ec-df99-34d5-8b9e-1015f7bfe184.png" width=50%>

5. 画像の中央上部にあるTestingタブをクリックすると先ほど選択したファイルがあるので、チェックボックスにチェックを入れる。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/877696/ed907db3-97c8-34b4-eabc-68fd208e0763.png" width=50%>
これでvrmをインポートできるようになりました。

#blenderでvrmをdaeに変換
1. blenderを起動するとcubeなど余計なものがあるので削除（キーボード「A」-> 「X」 -> delete）

2. 「File」->「Import」->「vrm」で任意のvrmを選択する。（モデルに色がついてないがそれで問題ない。）

3. キーボード「A」で全選択して「File」->「Export」->「dae」を選択。

4. 右上にある歯車ボタンをクリックし、「Main」タブ->「Selection Only」にチェック、「Geom」->「Apply Modifiers」にチェックを入れ、「Render」に変更。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/877696/ad595998-cd67-f84d-da8a-8f84fc794916.png" width=40%><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/877696/6af7943b-33c3-ec2f-2b82-013533f4a768.png" width=40%>

5. 「Export COLLADA」をクリック。

daeファイルに変換できました。daeファイルの他にtex~というモデルに貼る画像がいくつか入ったフォルダも生成されます。Xcodeで使うには今変換したdaeファイルとtex~フォルダが必要になります。tex~フォルダは変換前のモデル（vrm）があった場所に保存されています。

#xcodeで表示し、モデルの色つけ
xcodeで新しくプロジェクトを作成し、左側のファイルがある場所にdaeとtex~フォルダをドラッグ&ドロップします。
daeをクリックするとモデルが表示されます。この時モデルの色が灰色や白であればOKです。


モデルの色つけしたい箇所をクリックし、「Diffuse」から画像を選択します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/877696/05e546f3-e096-2e70-eec7-94084b956167.png" width=40%>
「Shading」は「Constant」が一番元に近い色が出てると思います。

あとはscnに変換するなり、アプリに実装するなりで使えます。

疑問点
今回記事を書くにあたって幾つかのvrmモデルを試してみたのですが、うまくモデルに画像がつけられず元のモデルとは異なってしまうことがありました。
リポジトリ追加後にZypperが壊れたとき

# 概要

リポジトリを追加後に`zypper repos`などをするとエラーが出るようになってしまった。

```
Unexpected exception.
Unknown Error: Invalid path name component
```

# 対策

- `/etc/zypp/repos.d`の下にzypperのリポジトリ実体があるので、誤って追加したものを削除する.

```
deepdive777@localhost:~> cd /etc/zypp/repos.d/
deepdive777@localhost:/etc/zypp/repos.d> ll
合計 28
-rw-r--r-- 1 root root 195 12月  3 01:50 openSUSE-20201130-0.repo
-rw-r--r-- 1 root root 154 12月  3 01:50 repo-debug.repo
-rw-r--r-- 1 root root 156 12月  3 01:50 repo-non-oss.repo
-rw-r--r-- 1 root root 144 12月  3 01:50 repo-oss.repo
-rw-r--r-- 1 root root 157 12月  3 01:50 repo-source.repo
-rw-r--r-- 1 root root 148 12月  3 01:50 repo-update.repo
-rw-r--r-- 1 root root  88 12月  3  2020 vscode.repo
```
Xcode12にCarthageを導入する

## 概要
Carthageを利用してライブラリを導入しようとしていたところ、carthage updateのところがどうしても通らず苦戦したのでアウトプットしておきます。
## 手順
### Carthageのインストール
```terminal
$ brew install carthage
```
homebrewの導入は[こちら](https://qiita.com/zaburo/items/29fe23c1ceb6056109fd)から

### Cartfile作成
作成するアプリのディレクトリで以下のコマンドを実行

```terminal
$ touch Cartfile
```
### 作成したCartfileを記述

```terminal
$ vim Cartfile
```
今回はNuke、Rswift、KeychainAccessを導入しました。

```vim
github "mac-cain13/R.swift.Library"
github "kean/Nuke" ~> 9.0
github "kishikawakatsumi/KeychainAccess"
```
vimで編集&保存

### carthage.sh作成
```terminal
$ touch carthage.sh
```

```terminal
$ vim carthage.sh
```
vimで編集して以下の内容を記述します。

```vim
#!/usr/bin/env bash

# carthage.sh
# Usage example: ./carthage.sh build --platform iOS

set -euo pipefail

xcconfig=$(mktemp /tmp/static.xcconfig.XXXXXX)
trap 'rm -f "$xcconfig"' INT TERM HUP EXIT

# For Xcode 12 make sure EXCLUDED_ARCHS is set to arm architectures otherwise
# the build will fail on lipo due to duplicate architectures.
echo 'EXCLUDED_ARCHS__EFFECTIVE_PLATFORM_SUFFIX_simulator__NATIVE_ARCH_64_BIT_x86_64__XCODE_1200 = arm64 arm64e armv7 armv7s armv6 armv8' >> $xcconfig
echo 'EXCLUDED_ARCHS = $(inherited) $(EXCLUDED_ARCHS__EFFECTIVE_PLATFORM_SUFFIX_$(EFFECTIVE_PLATFORM_SUFFIX)__NATIVE_ARCH_64_BIT_$(NATIVE_ARCH_64_BIT)__XCODE_$(XCODE_VERSION_MAJOR))' >> $xcconfig

export XCODE_XCCONFIG_FILE="$xcconfig"
carthage "$@"
```

編集したcathage.shの権限を変更します。

```terminal
$ chmod +x carthage.sh
```

### ライブラリの更新
以下のコマンドを入力してCarthageのライブラリを更新します。

```
./carthage.sh update --use-submodules
```

ここから先はXcode11と同じ処理で追加できます。
[参考記事](https://qiita.com/tsuzuki817/items/8f6e2e0c2b3f9d197097)

## 参考
https://qiita.com/zaburo/items/29fe23c1ceb6056109fd
https://qiita.com/kilalabu/items/aa37a24f289ce381154f
https://github.com/Carthage/Carthage/issues/3019#issuecomment-665136323
https://qiita.com/shisama/items/5f4c4fa768642aad9e06
https://qiita.com/tsuzuki817/items/8f6e2e0c2b3f9d19709712
Rustと遺伝子解析

# はじめに

この記事は[Rust 3 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/rust3)の3日目です。

ここ一年ほどで、Rustの広まりを感じることが増えてきました。大手IT企業や先端的なベンチャーでの採用事例がよくニュースになりますが、個人的にはRustと縁遠いと思っていた分野で思いがけずRustのコードに出会う方が、より広まりを感じます。（RustはリポジトリルートにCargo.tomlがあるのですぐわかりますね）

この記事では、遺伝子解析の分野でのRustの利用について紹介します。

# 遺伝子解析とは

遺伝子解析とは、生物（ヒトだったり微生物だったりいろいろな研究対象があります）のDNAをシーケンサという機械で読み取ってデータ化したものを解析する、という分野らしいです。
よく行われる解析としては、あるDNAと別のDNAがどれくらい似ているかを調べたり、バラバラに断片化したDNAを元の一繋ぎに復元したり、というような感じのようです。（他にもいろいろあると思いますが、私はこれくらいしか知りません）

私はこの分野は全くの門外漢なのですが、最近会社の同僚が関わっているらしく、GitHubなどでそれらしいリポジトリを見かけて興味をもって覗いたりしているうちに、意外とRustが使われているらしいことに気づきました。

# Rustと遺伝子解析

Rustを使った遺伝子解析に関するツールとしては、以下のようなものが見つかります。
（どのツールがメジャーとかはわからないのでcrates.ioのダウンロード数の多いものを並べてみました）

https://github.com/sstadick/rust-lapper
https://github.com/onecodex/finch-rs
https://github.com/10XGenomics/rust-debruijn
https://github.com/rust-bio/rust-bio-tools
https://github.com/varlociraptor/varlociraptor
https://github.com/pkalivas/radiate

見ての通り「一人Rustが趣味の人がいる」というわけではなく、いろいろな人が使っているようです。
作者は大学の研究者といった感じの方が多いですが、例えば上で挙げたリポジトリにある[10XGenomics](https://www.10xgenomics.com)というのは遺伝子解析のベンチャー企業のようで、GitHub上には同社製のRustツールがいくつも見つかります。

充実したREADMEが書かれたツールも多く、実際に使われていることを感じさせます。
（大学だと研究室内で共有するようなことが多いのでしょうか）

Rustがなぜ遺伝子解析に使われるのかというと、扱うデータのサイズが大きく、解析時間の短縮が重要なためだと思われます。
多くのリポジトリで既存のツールに対しての速度向上がうたわれています。

マルチスレッドを生かした高速化の例も多いです。これまで高速なマルチスレッドプログラミングをするためにはC/C++を使うのが一般的でしたが、データ競合を避けつつバグのないマルチスレッドプログラムを書くのは、その道の専門家でも簡単ではありません。
それに対し、Rustではコンパイラがデータ競合をチェックできるという特性があります。そのためコンパイルを通すハードルは高いものの、実行時に再現性の低い原因不明のバグに悩まされる、といったことは少なくなっています。こういった点がRustが使われる要因の一つになっているのではないかと思います。

また、Rustには高機能な並列処理ライブラリとして[crossbeam](https://github.com/crossbeam-rs/crossbeam)や[rayon](https://github.com/rayon-rs/rayon)といったものがあり、これらを使ったツールもよく見られます。

# 実際の研究者の話

この記事を書こうと思ったのは、以下の記事を見て遺伝子解析分野でRustをよく見かけることを思い出したからです。

[Why scientists are turning to Rust](https://www.nature.com/articles/d41586-020-03382-2)

記事中では上で紹介したリポジトリでも活動されているJohannes Köster氏がなぜRustを使うようになったかについて答えています。

また、この記事を紹介する[redditのスレッド](https://www.reddit.com/r/rust/comments/k4jdvw/why_scientists_are_turning_to_rust_nature/)では、研究でRustを使っているらしい人が多数コメントしているので覗いてみると面白いかもしれません。
LambdaからDynamoDBを使うときの権限エラー解消メモ

### LambdaとDynamoDBをつなげようとしたときのIAMのエラー
AWSのLambdaの設計図から利用しようとして、意味も分からず、AWSにに沿って、進めていったら、下記のエラー。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/726018/d5af855a-61cb-cb25-4ff6-dd4d3bc7659c.png)

IAMユーザの設定が足りていなさそうだったので、追加。（ロール名のところがリンクになっているのでクリック）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/726018/aa5be4a8-1b83-1e29-135b-5a2d55c13f9b.png)

DynamoDBのアクセス用ポリシーを追加。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/726018/56b3aa72-b7fe-0982-731c-76dae21f8014.png)

これでエラーが解消しました！
CentOS8だとSNMP TRAPを受けられない件(net-snmp-perlの最新版をビルドする)

2021.1.12 追記

CentOS8.3.2011になってから？
普通に`dnf install net-snmp-perl`で取ってこれるので下は無視してOK。
なんかバグっている時は参考にしてください。

------

タイトルまんま。
CentOS8では`yum`で`net-snmp-perl`を持ってくることはできない。
ZABBIXのTrapレシーバはPerlで書かれており、これがないとお話にならない。


以下、RPMビルド手順の覚書。
ところどころ間違っているかもしれないから注意

## 適当なユーザで最新版ソースを持ってくる

    $ mkdir Net-SNMP
    $ cd $_
    $ git clone https://git.centos.org/centos-git-common.git
    $ git clone https://git.centos.org/rpms/net-snmp.git
    $ cd net-snmp/
    #### 持ってくるソースを確認
    $ git tag
    #### チェックアウト
    $ git checkout imports/c8/net-snmp-5.8-14.el8_2.1

## ビルドする

    $ sh ../centos-git-common/get_sources.sh
    #### できてるか確認。net-snmp-5.8.tar.gzかなんかあるはず
    $ ls -l SOURCES/
    $ rpmbuild --define "%_topdir `pwd`" --define '%netsnmp_check 0' -ba SPECS/net-snmp.spec 

### ビルドにコケたらこれを見て。

ビルドにはこれらが必要だった

    $ sudo dnf install bzip2-devel chrpath mariadb-connector-c-debel perl-generators python3-devel python3-setuptools perl-ExtUtils-Embed

## インストール！！！

    $ cd RPMS/x86_64/
    $ sudo dnf install net-snmp-agent-libs-5.8-14.el8.x86_64.rpm net-snmp-devel-5.8-14.el8.x86_64.rpm net-snmp-5.8-14.el8.x86_64.rpm net-snmp-utils-5.8-14.el8.x86_64.rpm net-snmp-libs-5.8-14.el8.x86_64.rpm  net-snmp-perl-5.8-14.el8.x86_64.rpm  --enablerepo epel


たぶんこれでOKなはず
ボロノイ図って何？+活用方法

# 概要、背景

* ボロノイ図とその活用方法について調べてまとめる
* 「[データサイエンティストスキルチェックリスト](https://www.datascientist.or.jp/common/docs/skillcheck_ver3.00.pdf)」の「データサイエンス力」項目で「ボロノイ図の概念と活用方法を説明できる」とあるため、勉強を兼ねて
* スタート時点：「ボロノイ図って何？」

# ボロノイ図の意味、活用方法

* 意味
  * **いくつかの点があるとき、「どの点に一番近い？」という基準で区分けされた図**
* 活用方法
  * **たくさんある点のうち、一番近い点を探す。**
  * **点に近い領域で区分けする**
  * **画像データ圧縮**
* 調べた内容は↓

# 調べたもの

## [ボロノイ図（Wikipedia）](https://ja.wikipedia.org/wiki/%E3%83%9C%E3%83%AD%E3%83%8E%E3%82%A4%E5%9B%B3)より

> ボロノイ図（ボロノイず、英: Voronoi diagram）は、ある距離空間上の任意の位置に配置された複数個の点（母点）に対して、同一距離空間上の他の点がどの母点に近いかによって領域分けされた図のことである。

* 色々点があって、「どの点に一番近い？」で区分けされた図

## 応用範囲

* まあ、わかる
  * 校区の設定
  * 最も近い PHS の基地局を探す
  * 新しい基地局をどこに作ればよいかの指標を得る
  * キタキツネの勢力範囲
  * 離散データの集約 = 散らばったデータを、いくつかの代表データにまとめる
  * 有限要素法の領域分割
* どう使う？？？
  * 画像データの圧縮

### 画像データの圧縮方法

* 調べたけど、あまり出てこない・・・
  * 圧縮効率を向上する論文は出てくるけど、そもそもの圧縮方法はあまり出てこない
* (想像)「元画像から、離散ボロノイ図の母点情報（この母点の領域はこの色）を作って情報量を圧縮し、展開時に元に戻す」とか？

# 参考にしたサイト

* Wikipedia
  * [ボロノイ図](https://ja.wikipedia.org/wiki/%E3%83%9C%E3%83%AD%E3%83%8E%E3%82%A4%E5%9B%B3)
  * [離散ボロノイ図](https://ja.wikipedia.org/wiki/%E9%9B%A2%E6%95%A3%E3%83%9C%E3%83%AD%E3%83%8E%E3%82%A4%E5%9B%B3)
  * [重心ボロノイ分割](https://ja.wikipedia.org/wiki/%E9%87%8D%E5%BF%83%E3%83%9C%E3%83%AD%E3%83%8E%E3%82%A4%E5%88%86%E5%89%B2)
* 高校数学の美しい物語
  * [ボロノイ図とその３つの性質](https://mathtrain.jp/voronoi)
* [離散ボロノイ図と波面法アルゴリズム - 鹿児島大学工学部](http://www.ics.kagoshima-u.ac.jp/~fuchida/edu/algorithm/voronoi-diagram/index.html)
* [離散ボロノイ分割を用いたフラクタル画像圧縮におけるレンジ分割法の改良](https://www.jstage.jst.go.jp/article/jceeek/2006/0/2006_0_374/_pdf)
TypeScript　公式ドキュメント

#公式ドキュメント（英語）：
https://github.com/Microsoft/TypeScript-Handbook


https://www.typescriptlang.org/docs/

アップデート情報：
https://github.com/microsoft/TypeScript-Handbook/tree/master/pages/release%20notes

#日本語版
http://js.studio-kingdom.com/typescript/


#暗黙の型変換
A+Bの時の実行結果。

左の欄がA、上の欄がBです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/684145/769f6a6a-e3fe-88e7-138b-0601a211b098.png)
※空白のところはエラーが出ます。
光速(盛)でカンタンにWF作れる「Balsamiq Wireframes」を触ってみた⇢いい感じ

## これです

[Balsamiq Wireframes](https://balsamiq.com/wireframes/)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74725/fe84c1f9-794b-ca52-49dc-59970c172f9b.png)

Top PageのFirst viewで、

**Quick and Easy Wireframing Tool**

と謳っています。使ってみるとその意味が分かります。

## 他のツールとなにが違うの？

### １. Componentめちゃ多いand使いやすい

デフォルトの作成画面がコレ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74725/afbb87f7-5197-e558-0ff1-737483bb447e.png)

上部に注目。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74725/9d532460-f2c6-de12-c1ec-a38c87294cb2.png)

こんな感じでComponentが並んでます。WF作成に必要十分なのが揃ってます。
Drag and Dropでファイルににポンポン放り込めます。

![a389a570-7f8a-1f85-9a21-8f708df19576.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74725/21e24678-45be-e96d-e41a-cc56724a58e7.gif)


### 2. ComponentがStateを持っている

たとえばフォームのText FieldでDefault、Focused（カーソルが当たってる時）、Disabled（無効⇢入力できない状態）　をSelect Boxで簡単に選べてそれがText Fieldのスタイルに反映します。

![bbcc922d-c0d6-9739-269a-ffff1a78a3cb.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74725/232eaffb-9137-71e7-1f70-e0effc988108.gif)


### 3. Componentがレトロでゆるくてかわいい⇢ヘタにデザインさせない

かわいい。。うんカワイイ。。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74725/2423e990-f5f0-ba9e-8ed4-394ff0687883.png)

ワイヤーフレームって凝りだすとデザインっぽいのやり出して自己満足で無駄な時間を過ごしがちですが、こういうコンポーネントが十分に揃っていればデザインせずに済む⇢ディレクターもデザイナーをハッピー。

## さて、気になるお値段は。。？

こんな感じです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/74725/55ec1a4f-3519-e752-b91a-5d924df4591e.png)

クラウドだとサブスクとかDesktop Clientだと買切りとかいろいろ選べます。
どのコースも30日間は無料でお試しできます。ちなみに私は会社にソフトウェア利用申請出しました。

## 以上

使い始めたばかりなのでまだまだステキな機能あるかもしれません。
興味のある方は触ってみて、感想とかコメントしていただけると嬉しいです。

では。
だれでもクソアプリを量産できるクソアプリを作ってみた

『クソアプリアドベントカレンダー 2020』の３日目の ヒカル@alclimb でございます。

なお、昨日の２日目は @nabettu さんによる「[誰が言ったかじゃなく何を言ったかでTwitterを見よう](https://nabettu.com/a61a0183828d473eaa9f4ada5e296cc9)」でした！毎度の Chrome 拡張で実現しているみたいです。詳しくは記事へ Go ！

さて、３日目担当としてやっていきましょー

## (1) どんなクソアプリを作ろうか

クソアプリを作るうえでアプリネタにするための**課題を探しました。**

```
① 事実: クソアプリアドベントカレンダーは毎年人気
↓
② 課題: きっとクソアプリを作りたい人は沢山いる(適当)
↓
③ 閃き: そうか！💡クソアプリを量産できるようにしよう✨(アホ)
```

**ターゲットはクソアプリを作りたい人**としました。

このクソアプリアドベントカレンダーは毎年人気ですし、きっとクソアプリを作りたい人は沢山いるのです(適当)
で、この記事のタイトルの通り **『だれでもクソアプリを量産できるクソアプリ』を作ることにしました。**



## (2) 作ったものはこちら

> みんなのゲームメーカー - お絵描きごはんルーレット
> https://game-maker.westa.io/roulette/?id=01ERJE4VPM0G9DW1A0MMTBJNKX


### ▼つくる側

① つくる側の人はイラストを描いて今日のご飯を決めるルーレットを作れます
![シーケンス 01_1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67192/d2ac2c90-2e00-972a-3dfe-3341eb9eb93f.gif)

② 作ったルーレットは共有ボタンから Twitter に投稿できます
![2020-12-03_04h46_32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67192/4c75d9ae-1a72-808a-cc46-a81b4a5a3451.png)

### ▼つかう側
『つかう側』の人は誰かが作ったごはんルーレットを回して今日のご飯を決めれます。
![シーケンス 01_2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67192/44858d2f-c43b-836b-bbdb-2d1a605dfd88.gif)

ご飯がごはん一粒だと切ないですね…😆

## (3) おわりに

このクソアプリでクソアプリを量産してくれたらうれしいです。ぜひ遊んでくれると嬉しいです！

> みんなのゲームメーカー - お絵描きごはんルーレット
> https://game-maker.westa.io/roulette/?id=01ERJE4VPM0G9DW1A0MMTBJNKX

明日は @takanakahiko さんによる『カメラに映っている人間にスーツ着せるアプリを作った』です！よろしくお願いします～
SmodeのUIを大雑把に紹介する(コンポジット篇)

UIについては__[YouTube](https://youtu.be/4UvyBhNpars)__でも解説しています。
また、このUIはコンポジット作成時のUIです。
プロジェクトの際はUIが変わります。

#UI全体像(と簡単なショートカット)
[Smode公式ドキュメント](https://smode.fr/doc/ref/user-interface.htm)より。
画像左上から大雑把に紹介していきます。

![Interface01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272258/1b570410-b011-6022-b169-372218e9b32e.jpeg)


![Interface02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/272258/0aca1eeb-d5c8-a301-5111-beaf018db2b4.jpeg)

#Menus
新規プロジェクトやコンポジット作成時、Preferenceを開くときなどはこちらから

#MEDIA DIRECTORIES
Windowsのエクスプローラーと対応しており、指定のフォルダを読み込んでくることができます。
読み込んだフォルダ内の画像/映像/3Dオブジェクト/etc...をSmode内で使用することができます。

#MEDIAS PRE-VIZUALISATION
MEDIA DIRECTORIESで読み込んだものをサムネイルで見ることができます。

#VIEWPORT
作成したものを見れたり、3Dモードでは各オブジェクトの位置関係を確認したりできます。

#TIMELINE/FUNCTION EDITOR
タイムラインです。ここに使用したいエレメントをD&D(ドラッグ&ドロップ)することでタイムライン制御できるようになります。

#Global parameters
左から

- Px/% Unit Selector
    - 2Dの単位表記を切り替えることができます
- LOCK
    - エレメントツリーを一斉にロックするボタン
- Active Profiling
    - エレメントツリーで各エレメントの処理負荷を確認することができます
- ON AIR
    - ON AIRモードにすることができます
- OUTPUT
    - 映像を設定したプロジェクターやLEDパネルに出力します
- Freeze Output
    - OUTPUTされた映像を一時停止します

#ELEMENT TREE
MEDIA DIRECTORIESで読み込んだファイルをここにD&DすることでSmode内で使用することができるようになります。
処理は上から順番に行われていくので、例えば同じサイズの画像を用意したとき、エレメントツリーで下にある方が優先的に表示されます。

#ELEMENTS PARAMETERS
ELEMENT TREEで選択しているもののパラメータが表示されます。
このパラメータの変更は即時反映されるのでVIEWPORTですぐに確認することができます。

#おわりに
とても大雑把にUIを紹介しました。
実際に使用するときはもう少し込み入った動きが必要になるので、Youtubeなどを参考にしていただくのが一番わかりやすいと思います。
わからないことは[Discord](https://discord.gg/k5KBHQH)でいつでも質問できるのでどんどん質問しましょう！
JS 関数　後編　(JSアウトプット)

##あいさつ
初めての人は初めまして！知っている人はこんにちは！
中学生バックエンドPGのAtieです！
今回は今までの奴と比べて難易度が跳ね上がります
それでは！

##匿名(無名)関数と関数式
匿名関数と関数式について解説していきます！

匿名関数とは”関数の名前がなくても実行できる関数”です
コールバック関数に一度きりで使われる場合によく使われます
普通の関数と匿名関数の文法を比べてみました！

```main.js
/*普通の関数*/
function 関数名 (仮引数1,仮引数2) {
    //処理
};

/*匿名関数*/
const 変数名 = function(仮引数1,仮引数2){
    //処理
};
```
違いは名前が関数名なのか変数名なのかの違いです
関数式は関数を変数に入れる式です

```main.js
const 変数名 = function(仮引数1,仮引数2){  //関数式
    //処理
};
```

匿名関数も変数名で実行できます

```main.js
変数名();
```
##コールバック関数
コールバック関数とは関数の引数に渡される関数のことです
**「ん？」**
例えばAという処理が終わったらBという処理をしたいとします
普通ならこう書きますよね？

```main.js
function A () {
    //Aの処理
}
function B () {
    //Bの処理
}
A()
B()
```
しかしコールバック関数を使うとこのような書き方ができます

```mian.js
function A (fn) {
    //Aの処理
    fn()
}
function B () {
    //Bの処理
}
A(B())
```
コールバック関数を使うとこのように書くことができます
先ほど「関数式」というのを習いましたよね？
関数式は変数に関数を入れることでしたが
今回は引数に関数を入れています

コードを例に解説すると
関数Aと関数Bを定義しました
関数Aの引数にはfn(functionの略)を入れておいて関数Aの処理が終わったら引数fnを実行します
関数Aを実行するときに引数に関数Bを渡しているので関数Aの中で実行されるfnは関数Bになります

これがコールバック関数です
そしてこの関数を引数として受け取る関数を高階関数といいます
なので構文はこのようになります

```mian.js
function 高階関数 (コールバック関数) {
    //処理
}
```

もちろんコールバック関数に引数を渡すこともできます

```mian.js
function A (fn,number) {  //第二引数にnumberという引数を受け取る
    //Aの処理
    fn(number)            //関数fnにnumberという引数を渡す
}
function B () {
    //Bの処理
}
A(B(),6)                  //第二引数に6を渡すことで関数fnに引数を渡せる
```
コールバック関数に匿名関数を入れることも可能です

```main.js
A(function () {
    //関数の処理
})
```
こうすることで引数に直で関数を書き込むことができます
もちろん実行できます

コールバック関数の実践的使い方は
例えばAという処理で実行するかどうかを聞いて関数Bを実行するなら実行する
実行しないなら実行しないということができます
少し実践的な関数です

```main.js
function CanYouRun (fn) {
    if (window.confirm("実行しますか？") === true) {
        fn()
    };
};
```
この関数は条件分岐をしています
window.confirmはOKかキャンセルを聞きOKだったらTrue
キャンセルだったらFalseが返ってくるのでifの条件式に「帰ってくる値がtrueだったら実行」としています
そしてtrueだったら引数に渡された関数fnが実行されます

##GithubのDeleteの関数を作る
今回はGithubのリポジトリ削除の挙動をまねします

使うのはwindow.promptです
このメソッドは実行すると画面に入力フォームを出し入力された文字列を戻り値とするメソッドです
では書いていきます

```delete.js
function deleteRipository () {
    console.log("削除しました");
};

function questionDelete (fn) {
    if (window.prompt("実行しますか?") === "実行") {
        fn();
    };
};

questionDelete(deleteRipository);
```
まずはリポジトリを削除する関数を定義し消すかどうかを聞く関数を定義しました
if分にwindow.promptを条件式にしました
実行と入力されたらif分はtrueになり関数fnが実行されます

##さいごに
最後まで読んでいただきありがとうございました！
今回はJSの関数です
わからなかったら一度で理解しようとせず何度もこの記事を読んでみてください
それでもわからなかったらぼくのTwitterにDMをください！
プログラミング学習の相談にのりますよ！
次回はwebAPiです！
では！また次回の記事で！

Twitterしています→[AtieのTwitter](https://twitter.com/Atie_BackendPG)


##学習、参考資料
[【JavaScript入門 #7】匿名関数、高階関数、コールバック関数を攻略せよ！【ヤフー出身エンジニアの入門プログラミング講座】](https://www.youtube.com/watch?v=B624WCMhLfA&list=PLwM1-TnN_NN7-zdRV8YsGUB82VVhfYiWW&index=7)
R 二項演算子で文字列を結合する

### Rでは二項演算子で文字列の結合が出来ない
Pythonでは`+`演算子で文字列の結合が出来ますが、Rでは出来ません。Rで文字列の結合を行う際には、`paste`あるいは`paste0`または`stringr::str_c`などを使う必要があります。
しかし、変数を使って文字列を生成したいときなどには関数内の引数として結合する要素を指定しなければならないため、たまに使い勝手が悪いです。

```example.R
# プロットのキャプション用の文字列
N <- 100
paste0("データ数は", N, "個である。")
### [1] "データ数は100個である。"

# 以下のように書きたいが、それは出来ない 
"データ数は" + N + "個である。"
###  "データ数は" + N でエラー:  二項演算子の引数が数値ではありません 
```

Rでも二項演算子で文字列を結合したい！


### 解決法：文字列を結合する二項演算子を自分で定義する
**なければ作っちゃえ！**が一つの解決法になります。

実はRでは二項演算子を定義することが出来ます。以下のサイトで例が紹介されています。

[RjpWIKI：二項演算子定義の例](http://www.okadajp.org/RWiki/?%E4%BA%8C%E9%A0%85%E6%BC%94%E7%AE%97%E5%AD%90%E5%AE%9A%E7%BE%A9%E3%81%AE%E4%BE%8B)

簡単に言ってしまえば、`%~%`の形の演算子に対して引数を2つとる関数を割り当てることが出来ます。この形でお気づきかもしれませんが、たしかmagrittrのパイプ演算子（`%>%` etc.）もこれを利用して作られています。

これを利用すると、

```example.R
"%s+%" <- function(x, y) paste0(x, y)

"データ数は" %s+% N %s+% "個である。"
### [1] "データ数は100個である。"
```

のように定義した二項演算子`%s+%`で文字列を結合することが出来ます。めっちゃ便利！
ちなみにベクトルを引数としてとった場合には、

```example.R
"データ数は" %s+% c(10, 100, 1000) %s+% "個である。"
### [1] "データ数は10個である。"   "データ数は100個である。" 
### [3] "データ数は1000個である。"

"データ数は" %s+% c(10, 100, 1000) %s+% c("だった。", "。", "個である。")
### [1] "データ数は10だった。"     "データ数は100。"         
### [3] "データ数は1000個である。"
```

のようになります。定義する際にオプションをうまく指定すれば、いい感じに使い勝手が良くなるのではと思います。

上記サイトの例では上書き代入や永続代入をしていて危なっかしい気もしますが、`paste0`であれば2つの文字列を結合して文字列を返すだけなので割と安心です。

---
ちょっと裏技的になってしまいますが、コードの可読性や対話的に作業する際の利便性の向上には役立ちそうです。挙動には十分注意する必要がありそうですが、興味があったらぜひ試してみてください！
未経験からIT企業のシステムエンジニア転職成功体験-その②

・準備
　実は学生時代からIT業界には興味があって、ブルーバックスのプログラミング本(JavaやC)を読んでました。当時は難しいという理由+必要性が感じられないという理由でまったく身につきませんでした。その後、新卒の会社でも「将来は理系の知識を活かした部署に行きたい」と思っていたので、Rやファイナンスの勉強をしていました。ここでも具体的な業務必要性がなかったので本格的な勉強はしていません。
　このようにもともと統計やらITには興味がありました。
　その後2社目3社目でも直接的にデータやITはやっていませんが、関係する仕事で自主的に勉強していました。

・やってよかったこと
　1.時間がかかってもいいのでコツコツ勉強する。
　　→半年や1年でスキルを習得することは難しいです。ITはプログラミングだけではないので周辺の知識や経験を身につけておくことでデメリットはひとつもないです。それに長期間継続的に勉強できなければIT適性がないのですぐの転職はあきらめましょう。

　〇私がやったこと
　・PythonやR、C、ネットワーク、サーバーなど本買って勉強する
　・日経プログラミングと日経Linuxを購読する
　・ラズパイやアルディーノをやる
　・お金を払っていても研修に参加する　ex.メーカー主催の研修や職業訓練がやっているセミナー

　〇やっていた方がよかったこと
　・イベント参加による人脈構築
　・SNSや動画発信

　2.少しでも現業務でITやプログラミングと関連することがあれば勉強しておく
　　→めちゃくちゃ重要。ITといっても顧客業務理解やビジネス理解は必須です。まったく関係ない業務であってもITとは切り離すことはできないので、逆にそれを強みにします。

　　例えば飲食店で働かれている方であれば、「廃棄材料が増えてしまって店の収支を圧迫していた。コストを下げたいと思い、最適なシステムを作りたいと思いプログラミングやデータサイエンスに興味を持った。自分で勉強し作成したもののスキルが足りないと思い、スクールに通って習得した。その中でITの重要性や発展性に興味を持って、転職を考えています。将来的には自分の飲食業界での経験を活かして、中小でノウハウがないような人たちに対してより効率的な店舗運営になどお手伝いができるビジネスをやってみたいです。」など。

　　ちまたでよく聞くのが、結局プログラミングスクールで学んだポートフォリトは誰でも同じですぐに面接官はすぐに見抜くということです。それよりも、自分で問題意識をもって、考えて、へっぽこでも何か生み出した人の方が転職市場では評価されます。評価しない会社や面接官は、それだけの会社です。もちろん意思を持たないロボット同然のプログラミング作業者がほしい企業は評価しないでしょう。そんな会社は人件費度返しの下請けしかやっておらず、間違いなくブラックで、成長できる環境ではないです。

・伝えたいこと

　転職市場は、営業と一緒です！いかに競合製品や競合会社(この場合は求職者)ではなく、自社を選んでもらえるか。数か月のプログラミングスクールで学んだスキルなどは誰でも同じです。そんなスキルは仕事やればすぐに逆転できます。個人の経験を活かして、オンリーワンの自分となり他の求職者に勝ちましょう！
git bashでpythonとpipを実行する方法

# git bashでPythonを実行する

py ファイル名.py

と記述するだけで実行できます

# git bashでpipを実行する


①本当にpipが入っていないか確かめる
py -m pip --version

入っていれば今入っているpipのバージョンが出てきます

②pipをインストールする
py get-pip.py

これでpipが使えるようになります

③pipを使う
py -m pip install パッケージ名

これでpipを実行できます

# 参考サイト
よりpipについて詳しい内容が載っています
https://pip.pypa.io/en/stable/
コレに決めた！Keynoteでスマートなベン図の描き方提案

Hello, World! あーみーです．

みなさん，コンピュータサイエンスの分野にいると，日常的にKeynoteでベン図を描きますよね？私も輪講資料の作成でよく描いていました．
でも，円にテキストをつけたいときって，スマートにベン図が描けないときってありますよね？そんな悩みを解決するのが，この記事です．

この記事の構成として，まずはじめに，基本的なベン図の描き方について説明します．
その後，スマートじゃないベン図の例を出したあとに，それを解決するスマートな描き方を紹介します．

## 基本的なベン図の描き方

入力$P$，$Q$についてそれぞれの論理演算を考えます．

### 論理和

|![qiita.001.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210077/2f1cb344-2ada-a23d-0f2d-ae627b96b979.jpeg)|
|---|

```math
P \lor Q
```

1. 同じ大きさの円を4つ作成する
2. 1で作成した円のスタイルを{カラー塗りつぶし，枠線なし}と，{塗りつぶしなし，線}がそれぞれ2つずつになるよう変更する
3. いい感じに配置する
4. {カラー塗りつぶし，枠線なし}のペアを両方選択し，ツールバーから`フォーマット`>`図形と線`>`図形を結合`とする
5. 4で作成したオブジェクトを再背面へ



### 論理積

|![qiita.002.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210077/5d215756-95bb-0c39-2dc0-cfe6061d2120.jpeg)|
|---|

```math
P \land Q
```

1. 同じ大きさの円を4つ作成する
2. 1で作成した円のスタイルを{カラー塗りつぶし，枠線なし}と，{塗りつぶしなし，線}がそれぞれ2つずつになるよう変更する
3. いい感じに配置する
4. {カラー塗りつぶし，枠線なし}のペアを両方選択し，ツールバーから`フォーマット`>`図形と線`>`図形を交差`とする
5. 4で作成したオブジェクトを再背面へ

### 非含意

|![qiita.003.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210077/b827e242-dd2f-2cf9-eb9b-dc501edf6a29.jpeg)|
|---|

```math
P \land \lnot Q
```

1. 同じ大きさの円を4つ作成する
2. 1で作成した円のスタイルを{カラー塗りつぶし，枠線なし}と，{塗りつぶしなし，線}がそれぞれ2つずつになるよう変更する
3. いい感じに配置する
4. {カラー塗りつぶし，枠線なし}のペアを両方選択し，ツールバーから`フォーマット`>`図形と線`>`図形を減算`とする
5. 4で作成したオブジェクトを再背面へ

> ※ 穴あけパンチの要領で，背面のオブジェクトを前面のオブジェクトで削るイメージ
手順4について，ここでは左の円が背面，右の円が前面



### 排他的論理和

|![qiita.004.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210077/5816a0b1-30ef-e1ef-0195-3aacda1beb2f.jpeg)|
|---|

```math
P \oplus Q
```

1. 同じ大きさの円を4つ作成する
2. 1で作成した円のスタイルを{カラー塗りつぶし，枠線なし}と，{塗りつぶしなし，線}がそれぞれ2つずつになるよう変更する
3. いい感じに配置する
4. {カラー塗りつぶし，枠線なし}のペアを両方選択し，ツールバーから`フォーマット`>`図形と線`>`図形を除外`とする
5. 4で作成したオブジェクトを再背面へ


## スマートじゃないベン図の例
先までの内容は，正直ちょっと調べればわかります．
ここからは，このベン図に「ラベルをつけたい」と思った時にスマートじゃなくなってしまう問題について紹介します．


### テキストの背景スタイルをカラー塗りつぶしにする
円の枠線の上にテキストを配置したいので，文字がしっかりと見えるように背景スタイルをカラー塗りつぶしにします．

|![qiita.005.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210077/d025831c-9737-730f-3774-34e1d8a20b8d.jpeg)|
|---|

せっかくの青で色を塗っている部分が台無しです．

### 枠線を減算で調整する
テキストを配置する部分の枠線だけ消したいので，枠線を新しいオブジェクトと減算をして凹ませてみます．

|![qiita.006.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210077/47fc3463-ea00-01e5-6af8-789749001ff6.jpeg)|
|---|

左の円は凹ました部分を青で塗って誤魔化してみましたが，右の円で確認できるように，誤魔化し方がとてもスマートとは言えないです．
また，塗りつぶしが半透明の場合などは誤魔化すことができなくなります．

## スマートなベン図の描き方の提案

今回のメインであるスマートなベン図の描き方について以下に提案します．


![Videotogif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210077/7965e87f-5ba2-ad05-7611-ec7c827b365d.gif)


1. 直線を作成し，消したい枠線部分ぐらいの長さにする
2. 1で作成した直線を選択し，右クリックで`編集可能にする`を押す
3. 直線の中心にカーソルを持っていくと選択できるようになるので，垂直に下ろすようにドラッグする
4. いい感じの円の大きさになるように調整する
5. optionボタンを押しながらドラッグをして4で調整した円をコピーし，いい感じに配置する
6. 4で調整した円とだいたい同じぐらいの大きさになるように色塗り円を作成する
7. 6で作成した円を再背面へ


完成図はこちら

|![qiita.007.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210077/f574e867-e125-b145-6dfe-1c2101e31faa.jpeg)|
|---|

スマートですよね．

## おわりに
スマートなベン図の描き方はどうでしたでしょうか？
今までIllustratorとか使ってベン図を描いていたという人は，より軽く生産性高めでこれからベン図を書いていけるのではないかなと思います．

それでは，Happy Hacking! :smile:
パッシブスキル「話しかけられ力」の作り方

[[Applibot Advent Calendar 2020]](https://qiita.com/advent-calendar/2020/applibot "Applibot Advent Calendar 2020") 3日目の記事になります。

前日は @yuucu  さんの
[これが無いと個人的に業務が辛いツール紹介(fzf, vim, tmux) ~ひきこもりターミナルライフ~](https://qiita.com/yuucu/items/03baae12d40f9699ec59) という記事でした!

[1日目](https://qiita.com/growsic/items/60928fc67c9efe373a73)、[2日目](https://qiita.com/yuucu/items/03baae12d40f9699ec59)と、技術寄りな話が続いたので、3日目の今回は趣向を変えてエンジニアの自分が、プロダクト開発で普段心がけている事を書きたいと思います。
とはいえ、志半ばというところではあるので目指すべき思想の話ということで読んでいただけると幸いです。

#はじめに
多職種を含んだプロジェクトで開発をしている場合は、メンバーとの対話で意思決定を行い、仕組み化などをして課題を解決していく事になると思います。
そんな中で、コミュニケーションが取りづらくなってしまう人の状況を整理したいと思います。
今回は、他職種（エンジニア外）から、

- 話かけにくい状態とは？
- 実践している解決方法

を紹介したいと思います。

#怒ってそうに見えているかも？
納期という締め切りに向かい、~~無茶振り~~難題に立ち向かい、頭をかかえ、黙々と作業に集中している状態は日常風景だと思います。
本人はそこまで意識していないけど、他職種から見ると_**阿修羅の形相で仕事しているように見られている可能性が高いです。**_
また、聞かれた事に対し**「もう少し整理して聞きに来てもらっていいですか？」**と、言った側は単なる提案を返したつもりであっても、
言われた側ではキツく捉えてしまい、それ以降ちょっとした相談もしにくい状況になっている可能性もあります。

#プロジェクトの意思決定を遅らせている？
_**「聞きたい事があるけど、忙しそうだからもうちょっと様子見てからにしよう...」**_
_**「相談レベルから聞いてみたいけど、もう少しこっちで調べてから聞こう...」**_

エンジニア目線では、ありがたい場面も多々あると思いますが、
プロジェクト目線では、**何かの意思決定を遅らせているかもしれません。**

何かに困っている人がいれば**「そりゃ助けたい」**あるいは**「頼ってもらいたい」「言ってくれたらもちろん協力する」**
と、思っている人がおそらく大半だと思いますが、
「頼ってもらう」「言ってもらう」には**「話しかけてもらう事で初めて成立する」**事だったりするので、
**話しかけられ力が弱いと仕事上で困っている人を救えない可能性が高い**と言えそうです。

#話かけられる力を作る空気とは？
**「空気」**という_目に見えないプロパティ_は確実に存在していて、この空気が良い印象悪い印象を司っていると思います。
**じゃあ、良い空気感はどうやって生み出すか？**

_**ランチを設定する、酒を飲みに行く、タバコを一緒に吸いに行く、ゲームをする、銭湯にいく、etc...**_

いろいろあると思いますが、もう少しハードルを下げて自分が普段やっている**日常でできる2つのこと**を提案したいと思います。

##その1 「雑談をする」
世の中の会話は要件を伝える会話**「意味のある会話」**と、それ以外の**「中身のないムダ話」**2種類に分類されると思います。
ムダ話をせず要件だけ伝える人はある意味実直な人かもしれませんが、その人の人となりを理解するまでは_「とっつきにくさ」_を感じると思います。

**アイスブレイク**という言葉があるように、機能開発オリエンなどの冒頭でアサインされたメンバー全員で適度に雑談を入れたり、オリエン後に少し雑談をしてみたりすると良いかと思います。
自分の場合はよく「洋服いじり」をします。_全身黒ですね_。とか、_超絶おしゃれですね_、とか、_**数多あるTシャツのなかでなぜそれを選んだんですか？**_とかはおすすめです。

##その2 「今、忙しいですか？の問いには "ヒマです" と答える」
わざとヒマそうにする必要はなくて、むしろ忙しそうにしていたとしてもよくて、
**話かけてきた人に対して全力で受け入れるという姿勢が大事**になってくるかと思います。
また、**「ヒマです」**という返しは、空気のほぐれもあるので**暗黙的ウェルカム**な状態を作れていると思います。
とはいえ、今はちょっと無理という場合は、
_「いつもだいたいヒマなんですが、いまだけヒマじゃないです。○○が終わったら声かけます。」と言うようにしています。_

#まとめ
**「話しかけられる事」**はコンテクストスイッチによるコストが発生して嫌だと思う人が多いと思います。
ことエンジニアに関しては、_**話しかけるなオーラ全開の人**_をよく見かけます。
自分も忙しい時、ハマった時、時間に追われた時、そのオーラはきっと出ていると思います。
ただ、プロジェクトとして複数人で開発をしている以上、メンバーが相談をしようとした時に躊躇してしまうのはむしろプロジェクト全体の進捗ではマイナスな場面もあるんじゃないか？は、頭の片隅においておくべきことだと思います。(自戒を込めつつ)

開発するプロダクトによっては、開発期間が長期間に及ぶものもあり、**最後は人と人とのコミュニケーションがプロジェクトの空気をつくり、プロダクトの品質を良くすると自分は思います。**
この記事の内容はエンジニアに限らず当てはまるもので、自身が普段専門としているスキルセットを**アクティブスキル**と捉えるならば、**話しかけられ力**は、常時発動している**パッシブスキル**としての側面が強いと思います。
プロジェクトメンバーがこのパッシブスキルを発動させることで**プロジェクト全体の安全性や生産性を高める**のではないかと考えています。

ちなみに、
_「今って忙しいですよね？」_の問いに対して、
_「いや、全然ヒマですよ。」_の返しは、空気が和むのでぜひ使ってみてください。

以上、
「[Applibot Advent Calendar 2020](https://qiita.com/advent-calendar/2020/applibot)」 3日目の記事でした！
明日は @taroshun  さんです！
README.orgの雛形

\![Mac OS X-10.15.7](<https://img.shields.io/badge/MacOSX-10.15.7-brightgreen>) \![ruby-2.7.1p83](<https://img.shields.io/badge/ruby-2.7.1p83-brightgreen>) 


# DONE equation<span class="timestamp-wrapper"><span class="timestamp">&lt;2020-10-28 Wed&gt;</span></span>

$$\frac{1}{4}$$


# qiita\_links<span class="timestamp-wrapper"><span class="timestamp">&lt;2020-10-14 Wed&gt;</span></span>

1.  [README.org](https://qiita.com/adchello/private/486a820b54a556098534)


# 授業内容リンク

[授業メモ1](https://qiita.com/adchello/private/3f05e37567f09f4a8f71)

[授業メモ2](https://qiita.com/adchello/items/c75ff7218c8e47d57da5)

[授業メモ3](https://qiita.com/adchello/items/ff4fe04930c5d174369f)

[授業メモ4](https://qiita.com/adchello/items/d6c7e847e6017129735b)

[授業メモ5](https://qiita.com/adchello/items/9f3ab28398f7373e4786) 

[授業メモ6](https://qiita.com/adchello/items/4fb0a1ab6959065ff891)



------
 - **source** ~/grad_members_20f/members/adchello/README.org
@IBAction,@IBOutletとは

Storyboardを使った開発では欠かせない`@IBAction`や`@IBOutlet`。
「Storyboard上のUIとコードを関連付けさせたいときに使うやつ」くらいの認識でしかなかったので、これらがどういう役割を担っているか調べてみました。

# Interface Builderとは
まず、これらについて理解するためにはInterface Builder(IB)についての理解が必要です。
Interface Builderとは[公式ドキュメントによると](https://developer.apple.com/jp/xcode/interface-builder/)
>XcodeのInterface Builderエディタを使用すると、コードを1行も記述することなく完全なユーザーインターフェイスを構築できます。ウインドウ、ボタン、テキストフィールド、その他のオブジェクトをデザインキャンバスにドラッグしてドロップするだけで、機能的なユーザーインターフェイスを作成できます。
ということで、コードを書かずにUIを構築することが出来るXcode内蔵のツールのことを指すらしいです。そしてそのInterface Builderの機能として提供されているのが、Storyboard, Assitant, Auto Layout, Previewらしいです。


# ＠IBAction,＠IBOutletとは
一つ前の章ではIBがInterface Builderの略であるということが分かりました。それではこれらが何を表すかについて調べていきます。

## そもそも＠とは
[公式ドキュメント](https://docs.swift.org/swift-book/ReferenceManual/Attributes.html)によると、
>An attribute provides additional information about the declaration or type.

宣言や型に関する補足情報を記述するために用意されたアトリビュート(attribute)と呼ばれる概念らしいです。(属性・修飾子とも呼ばれる)＠IBOutlet, ＠IBAction以外にはObjective-Cから利用可能であることを表す`@objc`とかAPIが利用できるかどうかを表す`@available`などがあるみたいです。([ここにいっぱい載ってます](https://qiita.com/shtnkgm/items/2cba98b545c913d990bc))

## ＠IBOutletとは
＠IBOutletは変数の宣言に付けられるAttributeで、変数宣言に直接影響を与えることは無いみたいです。しかし、Interface Builderがこの記述を発見した場合にStoryboardに配置されたUIと関連付けることさせることが出来るようInterface Builderが処理してくれるみたいです。

## ＠IBActionとは
＠IBActionは関数の定義の前に付けられるAttributeで、＠IBOutletと同様に直接的にコードに影響を与えることはありません。関数とStoryboard上のオブジェクトで発生したイベントを関連付けさせたいときに使うAttributeらしいです。


# まとめ
調べた結果これら事がわかりました。

- IBはInterface Builderの略でXcodeが提供しているノーコードでUIが構築できるツールのことを指す。
- @はSwiftのAttributeという機能で、宣言や型に関する補足情報を伝えるための構文 
- `@IBOutlet`はStoryboard上のオブジェクトにプログラムからアクセスするために利用される**変数につけるAttribute**
- `@IBAction`はユーザーがUIに対して行うアクションを関連付けるために利用する**関数につけるAttribute**

ふわっとした理解が結構深まった気がします。

# 参考文献
- [IBOutlets and IBActions in the Cocoa Touch framework](https://medium.com/@JanlCodes/iboutlets-and-ibactions-in-the-cocoa-touch-framework-dfcc9d6c77b2#:~:text=IBAction%20is%20a%20keyword%20and,to%20have%20a%20return%20value.)
- [Xcode - Interface Builder - Apple Developer](https://developer.apple.com/jp/xcode/interface-builder/)
- [Attributes — The Swift Programming Language (Swift 5.3)](https://docs.swift.org/swift-book/ReferenceManual/Attributes.html)
- [Swift5.1のattribute全解説｜全27種 - Qiita](https://qiita.com/shtnkgm/items/2cba98b545c913d990bc)
授業メモ1



# はじめに

　今回の授業からUbuntuを使うことになった.  これまで全く使ったことがないので授業に従って進めていく.


# 環境準備

　まずはmicrosoft storeからubuntuのインストールを行った.

>sudo apt update

と

>sudo apt install ruby-full

によりrubyをインストール.


# githubとｑiitaアカウントの作成

　授業を進めるにあたって,githubとqiitaのアカウントを作成した.

  どちらも使ったことのないコンテンツであったが,簡単に言うと　
  ・githubはプログラムなどのバックアップや共有が目的　
  ・qiitaはopen情報としての共有が目的のようだ.

　登録方法はどちらも良くあるフォーム入力からアカウント名を入力して作成.　どちらも無料で使うことができるっぽい.

　私のgithubアカウント>[githubアカウント](https://github.com/adchello)　私のqiitaアカウント>[qiitaアカウント](https://qiita.com/adchello/items/486a820b54a556098534)



------
 - **source** ~/grad_members_20f/members/adchello/test.org