OmniAICreator/Qiita-1.07M huggingface dataset:
はじめてのウェブサイト運用備忘録　第一弾

#はじめてのウェブサイト運用
未経験からIT業界に携わった若造ですが、今回機会があってサーバーを立てて運用してみることになりました。
正直サーバー運用の右も左も分からないくらいなので、色々調べながら進めていこうかなと思います。
最終的にはウェブサイトを作成してアップするところまで進める予定です。

#レンタルサーバー探し
初心者なのでやっぱりかんたんなやつじゃないと手も足もでなさそうだ、ということで調べてみた。
参考URL
https://biz-server.net/for-bigginner/
https://techacademy.jp/magazine/1230
いろいろな評価サイトとかを見てみるとなかなか絶望させられるのですが（それは実際見に行ってみてください）、とりあえず評判が一番良かったロリポップを使ってみようかと思います。

#申し込み
まずドメイン取得からスタートする驚き。
<img width="500" alt="application1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556712/ab6beeea-7066-6226-189d-fd021c69ce47.png">
今回は灰色に隠されている部分に、ドメインが表示されます。
メールアドレス、パスワードのところは任意で入力してください。
そのあと、電話認証による確認、個人情報入力などが続いてようやく利用がスタート

#サンプルページを上げてみる
今回はページをアップロードすることが目的なので、なんの面白みもない一枚のHTMLを作成
上げ方を見ていきます

##アップロードページへ
<img width="500" alt="upload1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556712/b3f9b7d7-6d1b-a496-30a7-093b3bb6293f.png">
マイページにこんなページが表示されています。
まず「データをアップロードする」ボタンをクリックします。
すると、こんなページになります。
<img width="500" alt="upload2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556712/c2110396-ff4b-60b9-4dff-95aa43d6e612.png">
このページの赤枠（矢印で指しているところ）をクリックすると、ファイルをアップロードできる画面に進みます。

##ページをアップロード
<img width="500" alt="upload3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556712/24b099cd-6091-6726-1cd6-54fe44894ab4.png">
まずアップロードする場所（パスと言います）を決めます。
今回は大したページでも無いのでそのあたりの設定は触りません。
「ファイルを選択」ボタンで、アップロードしたいファイルを選びます。今回はルートパスにSample.htmlを配置します。
選択できたら、「アップロードする」ボタンでアップロードします。

##アップロードしたページの確認
今回は、自分のドメイン、mmww-original.boo.jpのルートにこのファイルを置いたので、URLはこれになります。
http://mmww-original.boo.jp/Sample.html
実際確認しに行ってみると……
<img width="500" alt="Samplepage.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556712/6ef35c54-2f99-73bc-2236-5a56bbff2e09.png">
なんの面白みも無いページが表示されているのが確認できました。

#第二弾は……
今回はHTMLページをあげただけで、本来のウェブサイトではそれだけで事足りることはほとんどありません。
CSSだったりPHPだったりいろいろなファイルを参照して初めて私達が見慣れているページは完成します。
というわけで、次回はフォルダをアップロードしてCSSが実装された（とはいってもまだ実験なので見た目のいいページにするつもりも無いのですが……）ページを実現したいと思います。

では第二弾でお会いしましょう。
レンタルサーバーを信じるべきでないという話:バックアップをとろう

さくらのレンタルサーバーの件が炎上していますね。
消されたあの文章の真偽の判断は、魚拓を見ればよいわけですから私がどうこう言うのはやめておきます。

ただ、ひとつ言えることは、 *レンタルサーバーを信じるべきでない* ということです。

# なぜ信じないべきか?
どのような状況でサーバーが管理されているかわからないからです。
従業員が職場に不満を抱えているかもしれませんし、あまり練度の高くない人が管理しているかもしれません。あるいは、突然会社がつぶれるかもしれません。
実際、規模がそれなりに大きい会社のサービスであってもデータが消えることはあります。
データが消えることがある以上、サービスを過信すべきではないということです。


# なぜ問題か?
実際問題、オリジナルのデータがサーバー上にしか存在しない運用が行われていることはしばしばです。しかも重要なデータなのに、何のバックアップもない。問題意識もない。
もし、データが消えたらどうするのでしょう？
従業員が狂って、斧でハードディスクを割り始めるようなことを想定すれば、いかに一か所にデータを置いておくのが危ないかわかるでしょう。

# どうすべきか？
- 自動で物理的に別の環境へバックアップしよう
- 定期的にバックアップを手動でやろう
- すぐ別の会社のサーバーに移せるように備えておこう

自衛の対策はそこまで費用をかけずともできると思います。(クラウドストレージですらかなり安いご時世なので）
なんらかのトラブルは起きるであろうから、物理的に被害が及ばない環境にバックアップをとろう、という話。


# 惨事の例:
## ファストサーバー事件
### ニュース
 https://www.nikkei.com/article/DGXNASFK2600L_W2A620C1000000/
### 概要
多くの顧客の情報が消失し、復旧や運用に問題があったせいで、バックアップも消えてしまったようです。

## verelox
あまり有名な話ではありませんが、Verelox社が経営者の仲違いで結局会社ごと閉じられたということがありました。

### 参考
https://verelox.com/unavailable/
https://giovannimounir.net/archive/10617.html
https://web.archive.org/web/20170611145931/http://www.verelox.com/

### 概要
ある日突然、verelox社のホームページに「元管理者が全部データを消して、サービスが再開できない」と表示されていました。経営者の仲違いによるものです。結局、コンパネだけが消えていてバックアップは残っていたようなのですが、利用者には深刻な問題を与えたと思います。（私はデポジットが消えていました）

##Google
### ニュース
https://www.bbc.com/news/technology-33989384
### 概要
グーグルのデータセンターのデータが雷によって吹き飛び、一部のデータが永久に消えました。
## そのほか

- Yahoo!メール消失 : https://nlab.itmedia.co.jp/nl/articles/1509/06/news023.html
- 自治体のデータ消失 : https://www.nikkei.com/article/DGXMZO53425800W9A211C1TJ1000/ 
- 元会社員が勤めていた会社のデータを消した事件もありましたね: 
https://www.sankei.com/affairs/news/191125/afr1911250027-n1.html
java クラス、インスタンス、オブジェクト

今日はざっくりと書いて行きます。
クラス、インスタンス、オブジェクトについて簡単に書きます。

# プログラムの状態
プログラミングに置いて
データは一塊の状態で考えるものとします。
そこでよく使われ、よく混乱しやすい三つの用語について説明します。

* オブジェクト→紙
* クラス　　　→記入フォーマットが書かれた紙　(身体測定用紙など)
* インスタンス→記入フォーマットにデータが書き込まれた紙　(個人情報が書かれた身体測定用紙)

ざっくり書くとこんな感じです。


## オブジェクト

世の中にある状態と振る舞いを持つひとまとまりもの。

クラスとインスタンスは両方とも
オブジェクトになります。

例：紙を想像して下さい。

## クラス

オブジェクトの共通の状態と振る舞いを集めた一つの型。設計書。

例：記入フォーマットが書かれた紙を想像してください。
　　身長、体重、視力などの身体測定用紙がわかりやすいかと

## インスタンス
クラスから生成される実態。設計書から生成される実態。

例：身体測定用紙に個人情報が書かれた状態
[vue (electron-vue?)] createdに書いた処理が予期せぬところで呼ばれる

1年ぶり2回目のQiita投稿です。お手柔らかにお願いします。
表題の状況に遭遇し、色々調べてわかったことを書きます。

# 結論から言いますと

あるvueコンポーネントA内で、別のコンポーネントA'を参照・表示する場合、
コンポーネントAのライフサイクルと同時にコンポーネントA’のライフサイクルも実行されていた
という話でした。

分離されるものと思っていたので、結構ハマってしまいました…
ただ、このようなライフサイクルの多重実行が、どういう条件下で起こるのかはまだ明確に理解できていません。
(electron-vue独自のものなのか、コンポーネントA'の書き方、参照の仕方によって変わるのかなど)

# 開発環境

- Mac OS High Sierra
- vue: 2.5.16
- vue-electron: 1.0.6

# 発生した時の状況

簡易的ですが、以下のような状況でした。
ComponentAからDialogをダイアログ用のコンポーネントとして使うという感じです。

```ComponentA.vue
<template>
  <div>
    <button @click="showDialog = true">ダイアログ表示</button>
    <Dialog v-if="showDialog" @close="showDialog = false"></Dialog>
  </div>
</template>

<script>
  import Dialog from './Dialog'
  export default {
    name: 'ComponentA',
    components: {
      Dialog
    },
    data () {
      return {
        showDialog: false
      }
    }
  }
</script>
```

Dialog.vueに記載したcreatedが呼ばれるタイミングは、
「ダイアログ表示」のボタンを押して実際に表示される時だろう、と思っていました。

ですが、Dialogのcreated内で`console.log('hoge')`してみると、
ダイアログを表示する前からこの`hoge`が登場。

これにより、２つのコンポーネントのライフサイクルが同時に発動しているようだと理解しました。

# どうやって回避したか

今回はライフサイクルが同時に発動することでちょっと不利益があったので、
以下のようにボタンクリックでメソッドを呼び出し、メソッド内で当初Dialogのcreatedに書いていた処理を行うようにしました。

```ComponentA.vue
<template>
  <div>
    <button @click="onClick">ダイアログ表示</button>
    <Dialog v-if="showDialog" @close="showDialog = false"></Dialog>
  </div>
</template>

<script>
  import Dialog from './Dialog'
  export default {
    name: 'ComponentA',
    components: {
      Dialog
    },
    data () {
      return {
        showDialog: false
      }
    },
    methods: {
      onClick () {
        // ここにDialogのcreatedに書いてた処理を入れる
        this.showDialog = true
      }
    }
  }
</script>
```

# electronじゃないvueのプロジェクトで確認すると…

ついでで確認してみました。
この時のvueはv2.6.11で確認しました。
vue-cliでプロジェクトを作って同じようなコンポーネント構成を用意します。

この場合も同じように同時にライフサイクルが動くのだろう、と思ったのですが、
当初私が期待していたような、コンポーネント毎に分離したライフサイクルの実行になりました:thinking_face:

書き方によって変わってくるのか、はたまたelectron-vueでは二重になるのか、、
その辺はまだわからずです…

(この辺でもう疲れ切っているのですごく雑でスミマセン…)

# おわりに

最初盛大に勘違いしていたのですが、この現象が発生するのは
Dialogコンポーネント内のcreated内で特殊なgetterを参照していたからだと思っていました。
どんなgetterかといいますと、getters内でrootGettersを使って他のストアモジュールから値を参照するようなgetterです。

言葉だけじゃ限りなくわかりにくいと思うので、以下が例です。

```js
const getters = {
  hoge: (state, getters, rootState, rootGetters) => {
    return rootGetters['store/getter']
  }
}
```

ただこれは全然関係なかったです…
濡れ衣を着せてしまってごめんよ、getters... :bow:

アウトプットすると大抵自身の勘違いに気付くので、やっぱり書くのは大事ですね…
ただものすごくエネルギーを使います…(ヽ´ω`)
TJBot Zero Hatに Groveを採用してよかったこと

TJBot Advent Calendar 2019の空きがあったので書いてみました。

先日Seedの松岡さん（@matsujirushiからTJBot zeroの基板（の回路図）を書いてみました
というお話があり、境川さんから（@ssakaigawa）当方が過去に作ったものをご紹介頂けました
https://twitter.com/matsujirushi12/status/1186284784764375046?s=20

Raspberry Pi Zero用 自作AIロボットTJBot Zero HATを作ったよ Grove付
https://qiita.com/usashirou/items/c30f1a6c6fbec2717ecd

![TJBot.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/5fa88634-4c81-4bfb-b6a6-e45bc279a4f7.jpeg)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/ebe650e1-08af-15a1-0b9d-7f5fcfb52429.png)

TJBotはRaspberryPiを活用した完成品として触りやすく、安価です。
そして、Node-Redによる拡張性もあり、非常にいいプロダクトだと思っていました。

ただし、ブレッドボードという難点を当方が製作した基板で解決できるならばと思って作ったのが本基板でした。
さらに、拡張するには、I2Cの2.54ピンとGroveだなという考えで設計しましたが、SeedStudioの松岡さんが同じ思考をお持ちで非常にうれしい限りです。
（SeedとしてはGroveの普及も重要なので）

2020年は、みなさんに評価して頂いて、問題なければ一般公開に踏み切りたいと考えています

ちなみに、JetsonNanoでも使えるかも？
Jetbot for ROS Rotsonを作ろう! Jetson NanoでRplidar A1を使おう

先日Rplidarのセッティング資料を書いてほしいという要望を頂いたので記事にします。

以下サイトを参考にしています。
RPLIDAR A1をROSで動かしてみる
http://robonchu.hatenablog.com/entry/2018/09/15/092733

JetsonNanoのSDカードを製作し起動確認までを行います。

##ROSのセッティング
からあげさんの
Jetson NanoにROSをインストールする方法
https://qiita.com/karaage0703/items/aa54e086f0a2f165d3e9
を行います。

次に以下を実行していきます。

##環境構築

catkin buildをするフォルダに移動(今回は/home/nvidia/catkin_ws/src）
((echo $ROS_PACKAGE_PATHで確認できます )

```
cd /home/nvidia/catkin_ws/src
git clone https://github.com/Slamtec/rplidar_ros.git
catkin build
source ~/.bashrc
```
再起動をしましょう（しないとうまく動かないようです）
*なお、catkin buildでrplidar_rosがビルドされていない場合は、以下は動きません。

```
-l /dev | grep ttyUSB
sudo chmod 666 /dev/ttyUSB0
roslaunch rplidar_ros view_rplidar.launch
```

以上で起動できるはずです。
最後の、sudo chmod 666 /dev/ttyUSB0はUSBの使用権を与えるもので
入れないと起動してもRplidarが動きません。
launchファイルはA1だけでなくA2等もあるので使用可能なようです。
![Screenshot from 2019-12-25 23-06-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/4e3cac5b-3454-cb22-25b7-690429b86860.png)

なお、こちらのサイトの方がさらに詳しく書かれています。
安価な2DレーザスキャナRPLidar A2とROSでSLAMを試す
https://qiita.com/Kosuke_Matsui/items/1dd1a02cd36872965326
参考にどうぞ
iPadとapple pencilで作る手書きブログ

# iPadでとった手書きメモがそのままブログに！！

**東京グルメ紀行**
https://qiita.postach.io/

上のiPadで書いたブログのように、evernoteとApple pencilとEvernoteでとった手書きメモやお絵かき入りのノートを直接いい感じのブログにできます。

iPadと Apple pencilがあれば、簡単な表も手書きでパッと書いて公開できるので、**アルゴリズムの解説記事はevernoteで書いて公開した方が楽です。**
（Qiitaはお絵かきが挿入できないのがだるい）

# 手順

* Evernoteをインストール

Evernoteはテキストと手書きメモでノートを取れるアプリです。
使い方はググってください

* postach.ioに登録する

以下のリンクにアクセスし、登録します

https://postach.io


* postach.ioノートブック（登録したら勝手にできている）内にノートを作る。

このとき、publishedというタグを付けると公開されます。

# これで準備は完了です


postach.ioというノートブック内にノートを取り、publishedタグを付けてノートを取ると、ブログが投稿されます。

ノートを更新すると自動でブログに反映されます。

#### 超便利ですよね？自分の勉強がそのままブログになるので、モチベーション維持に欠かせないものになりました！！

# FAQ

* markdown記法はつかえるの？

markdownタグを付けるとできます。以下の記事もマークダウンで書かれてます。

この記事と全く同じ内容＋お絵かき入りのブログ

https://qiita.postach.io/post/ipaddetotuta-shou-shu-kimemo-gazi-dong-deburoguninarumian-qiang-fang-fa-gabu-risugirunodeyarifang-wojiao-emasu-evernote-postach-io


* アフィリエイトはできるの？

Google Adsense やAmazonのアフィリエイトは挿入可能です。

https://postach.io/blog/post/the-ultimate-guide-to-choosing-a-profitable-niche-for-your-blog

* twitterへの自動投稿はできるの？

Postachの設定→Edit addonsで設定出来ます。

* Google analytics はできるの？

上と同様の操作でUAを入力できる画面が出ます。

* 以上ですが何かあればコメント欄で聞いて下さい。
DB設計の備忘録

個人アプリの開発に伴いDB設計した。
アプリはチャット型の推理ゲームなのでこのように設計してみた。
## usersテーブル
|Column|Type|Options|
|------|----|-------|
|email|string|null: false|
|password|string|null: false|
|username|string|null: false|
|image|string||
### Association
- has_many :messages
- has_many :groups, through: :group_users
- has_many :group_users

## groups_usersテーブル

|Column|Type|Options|
|------|----|-------|
|user_id|integer|null: false, foreign_key: true|
|group_id|integer|null: false, foreign_key: true|

### Association
- belongs_to :group
- belongs_to :user

## groupテーブル
|Column|Type|Options|
|------|----|-------|
|title|string|null: false|
### Association
- has_many :user,  through:  :group_users
- has_many  :messages
-has_many :group_users

## messageテーブル
|Column|Type|Options|
|------|----|-------|
|image|string|
|text|text|
|user_id|integer|null: false, foreign_key: true|
|group_id|integer|null: false, foreign_key: true|
### Association
- belongs_to :user
- belongs_to :group

## positionテーブル
|Column|Type|Options|
|------|----|-------|
|master|string|null: false, foreign_key: true|
|insider|string|null: false, foreign_key: true|
|normal|string|null: false, foreign_key: true|
GCP+Docker+GPUでrosを動かす (2) ~ VNCで動くDocker+ros環境の作成 ~ 

以前、GPUを持っていない人が、GPUを用いた強化学習をrosのgazeboでするためにGCPで仮想的にGPU環境を作るという記事を書きました。ここでは試験的に[このサイト](https://github.com/ikeyasu/docker-reinforcement-learning)を参考にroboschoolを動かすところまでやりました。
本記事ではこの記事で作成した環境があることを前提に話をします。
以下の記事を参照してください。
[GCP+Docker+GPUでrosを動かす (1) ~ GCPでGPUとVNCを用いた環境の構築 ~](https://qiita.com/1222_takeshi/items/b1a3a700aeab7eb92a7a)

本記事では以下2つのDocker imageを参考にDocker + ros + gazebo + VNCを実現できるDocker imageを作成しましたので紹介いたします。
[dorowu/ubuntu-desktop-lxde-vnc](https://hub.docker.com/r/dorowu/ubuntu-desktop-lxde-vnc) 
[ct2034/docker-ubuntu-vnc-desktop](https://github.com/ct2034/docker-ubuntu-vnc-desktop)

#作成した環境
- ubuntu18.04
- ros melodic
- gazebo 9.0
- VNCで動作可能 

上記の環境を作成した理由としては、ubuntu16.04、ros kineticの環境はあったがすでにkineticからmelodicに移行している人が大半で、melodicでの環境を構築することに需要を感じたからです。

#Docker imageの使い方
以前の記事で作成した環境があれば、VNC Viewer for Google Chromeを用いて、GCPのVMのデスクトップに入ることができると思います。

**ここまでできていれば今回のはかなり簡単です！**

まずはDocker HubからDocker imageをpullする。

```
$ sudo docker run -it --rm -p 6080:80 mtakeshi1222/ros_gui
```
これでコンテナが立ち上がります。

次に、VNC Viewer for Google Chrome上のデスクトップからFirefoxを起動します。
起動したFirefoxでhttp://localhost:6080 に接続します。(前回のroboschoolと同様です)

これでubuntuのデスクトップが表示されます。
あとはデスクトップ上にあるTerminatorを用いて`roscore`なり`rviz`なり`gazebo`なりで試していただければいいと思います。
参考までにTerminatorはCtrl + Shift + Eでターミナルを縦に二分します。同様にCtrl + Shift + Eで横に二分します。

以下実装例です。
デスクトップが以下のようになっています。
![Imgur](https://i.imgur.com/qoS4K08.png)

Terminatorで以下のコマンドを入力する。このとき別々の端末を使用

```
$ roscore
```
別の端末を用意(Terminator上でCtrl + Shift + Eなどする)

```
$ rviz
```
![Imgur](https://i.imgur.com/zg71qVV.png)

同様のことを`gazebo`でもできる。
一度Terminatorを閉じて、再度開く。
Terminatorで以下のコマンドを入力する。このとき別々の端末を使用

```
$ roscore
```
別の端末を用意(Terminator上でCtrl + Shift + Eなどする)

```
$ gazebo
```
![Imgur](https://i.imgur.com/xNCzBSa.png)

端末画面を3つ用意すれば以下のように3つ同時に動かすことも可能

```
$ roscore
```
別の端末を用意(Terminator上でCtrl + Shift + Eなどする)

```
$ rviz
```
別の端末を用意(Terminator上でCtrl + Shift + Oなどする)

```
$ gazebo
```
![Imgur](https://i.imgur.com/hX2CcEb.png)

以上でGCPを用いてgazeboを動かすことができた。

#まとめ
GCPを用いることで固定資産に限らず様々な環境での実験をすることができることが分かった。次回はこの環境で強化学習を回すことを目指す。
githubやDocker Hubも共有するのでぜひスターお願いします。
また、コメントやプルリクもしていただけるととてもうれしいです。
github : [1222-takeshi/docker-ros-gazebo-vnc](https://github.com/1222-takeshi/docker-ros-gazebo-vnc)
Docker Hub : [mtakeshi1222/ros_gui
](https://hub.docker.com/r/mtakeshi1222/ros_gui)


###ひとこと
私の調べではubuntu18.04 + ros melodic + VNCの環境は世界でも初めてだと思う。なので、これを機にWindowsやMacのユーザも気軽にgazeboやrvizに触れられることを願っています。
Notionでドキュメントを公開する

[アルプ株式会社](https://thealp.co.jp/)でエンジニアをしています、集約のエンティティ@pictinyです。
これは[Notion Advent Calendar 2019](https://qiita.com/advent-calendar/2019/notion) 20日目のエントリです。
19日目は[Notionのいろいろな検索](https://qiita.com/pictiny/items/65bff63a81a0592af761)でした。

# 記事の公開
Notionのページはアクセス権限を設定することができます。
初期設定ではプライベートに設定されていますが、誰でも閲覧可能な権限にすることができます。

右上の`Share`から`Public Access`を有効にできます。

<img width="699" alt="Share1" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/427952/2bb4961b-4d25-b755-c5ff-586f475ede80.png">

検索エンジンへのクロールの許可を設定もできますので、公開する場合は設定しておくとよいでしょう。

# まとめ
Notionのアカウントを持っていない人に共有するときも、全世界に公開するときも使えますね！

公式ドキュメントは[Public pages & web publishing](https://www.notion.so/Public-pages-web-publishing-9a1cbda1c1b5438390b93a7ee0f481ae)にありますので、そちらもご覧ください。
転職活動で採用率を上げる小手先の技術

##はじめに
どこかの会社でエンジニアの採用担当をして幾年経った人です。

人脈もなく技術力に自信もない人に向けて、
次に選べる会社の選択肢が少しでも広がってほしいと思い記載します。
~~クリスマスに1人で生きることが辛く苦しいため、
せめて人の為に生きようと思ってこの記事を書きました。~~

**1分** で読めて明日から実践出来ます。


## 対象
転職サイトやエージェントでの転職活動がメインで、
技術力や経歴に自信があるわけでもなく、現状あまり上手くいってない方。

## やるべきこと
- 応募は絶対に企業サイトにある採用ページから行う。
- 転職サイトは「求人を出している企業を探す」用途のみに使う。
- エージェントは使わない。


## 理由
理由は採用にかかるコストです。

エージェントは成果報酬型です。
転職サイトは企業が掲載料を払っている以外に、成果報酬型のサービスがいくつかあります。

成果報酬とは、例えば成果報酬 **30%** 設定で、採用時の年収が **500万** だとすると、
企業は採用確定時に **150万円** を支払う事になります。額がこわい。

もし同技術力を持つエンジニアが **成果報酬なし** と **成果報酬あり** で応募しており、
採用枠が **1名** であった場合、採用コストの低い方が採用されます。

もし1名の採用に150万かけて、3か月～半年で辞められたら正直赤字です。
転職回数が多い人であるほど、この点で不採用になる可能性が高いです。

もし予算基準で採用人数を設定している会社であれば、
採用ページは **0円** なので、枠に関係なく採用してもらえる可能性が上がります。

もし即戦力ではない応募者の場合、採用時のコストは出来れば減らしたいです。
この場合も採用ページから応募してもらえれば、かなり採用ハードルは下がります。

### 転職サイトが成果報酬型がどうかの判断
対象とする転職サイトの「企業の方向け」ページを見れば分かります。
分からなければ応募しなければいいだけです。

### エージェントを「求人を出している企業を探す」用途に使わない理由
転職サイトと違って勝手に企業を探せないので、
エージェントから紹介してもらった企業に別手段でアプローチしたら、
求人を出している企業側が規約違反になる可能性が高いです。

もはやエージェント限定で求人を出している企業なんて稀なので気にしなくてもよい。
そうでなければ **相応のコストをかけた時にだけ採用したい職種** を掲載していると考えられ、
恐らく本記事の対象である方は、応募しても採用されない求人です。

## 余談
SEO強めの **転職サイトを利用するメリット・デメリット** を上げた記事などを見ると
クソみたいな理由しか書いてないので勢いで書きました。

転職サイトは経歴とか使いまわし出来るから確かに便利かもしれませんが、
その便利さと引き換えに無駄にお祈りメールを量産しているかも…。
Siemens#?=とはなに？

この記事はここにも乗っています↓
http://soup01.com/ja/2019/12/25/post-1990/

F1からみると、?=を使ってVariantの変数を参照変数として扱うことができます。
もしTagがVariantとして扱ってるときにその参照が有効だったら、参照がそのまま使えるですが、そうじゃない場合は値がNULLになります。
参照として扱ってるとき、その参照が有効かどうかをチエックする方法があります。LADとFBDの場合はENOの状態で判断することができます。もしENOが1なら有効で0なら無効です。STL、SCLの場合IS_NULLかNOT_NULLのFunctionを使えば有効かどうかをチエックできます。
##ルール
1.VariantがTempの変数NG。
2.Variantを参照するメモリエリアは必ず最適化されたメモリエリアです。
3.Variantを参照する変数は配列なら、必ず長さも一緒にしないといけません。例えば[0..9]配列のVariantが[0..10]の配列に参照することができません。
4.SCLの場合、a := b := cのようなマルチ与えができません。

##実装
では早速EXAMPLEを作りましょう。まず3つの構造体を作ります。
 
###Paras1
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154661/f52cb281-8f9d-064d-fcf2-2dd91841590e.png)
###Paras2
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154661/42f41312-6558-5839-9a83-51d412e04125.png)

###Paras3
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154661/bac7147a-2363-1444-4af7-170fbf5c6ad3.png)

###Function 
Interfaceは以下になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154661/14c8b83b-d33d-37c4-3e05-f38f9267d31f.png)

InputはVariantです。

Temp Areaを注目してください。REF_TOになりますね。これは先ずっと言ってた“”参照“です。3つの参照用の変数を作ります。
tparasの配列は単なるどっちの参照になるかを示すのFlagだけです。
 
####Program

Line2~12まではCase文とTypeOfのFunctionを使ってVariantがどっちのData Typeのものかを判断します。もしParas1ならVariantがtparas1を参照します…みたいな
Line14-16は各参照変数がNULLかどうかをCheckします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154661/0ff67010-3498-9a78-b450-6c8e3cc43ff2.png)
 
 
Line1-3はもしそれらのData Typeによって違う結果を出します。
^文は参照変数を使うときにつけないといけません。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154661/cd600068-8187-d7f9-e904-5c07bc288d74.png)

###Check
最後、試しましょう。Data Blockを作成します。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154661/ad250e69-769d-3db3-1d46-1ff18e2e31e7.png)

中には3つの変数があって、そして違う値が入っています。
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154661/74babb8c-dab9-83f6-6955-1fea8fb28c14.png)

 
最後は三回もFunctionを呼び出し、違う変数を入れてテストします。
Network1が入れるのは1と42でBlockの中はかけ算なので結果が42になります。
Network2が入れるのは1.99と5.32でBlockの中は引き算なので結果は-3になります。
Network3が入れるのは全てOnのBoolでBlockの中にANDの演算なので結果が1になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154661/66162bb6-c87e-645e-506c-69f70cb272a5.png)


はいーお疲れ様です。
これからスクラムを始める人に

## 概要
「はじめてスクラムに挑戦する人」
「スクラムやって間もない人」
など

スクラム初心者の方の情報収集のお役に立てれば。と

## 情報元サイト
[Fintan | アプリケーション開発ノウハウ・ツール](https://fintan.jp/)

## こんな人におすすめ！
* そもそもスクラムとはなんぞや？というあなたに！
 * [スクラム概論](https://fintan.jp/?p=949)

* プロダクトオーナーって何をすればいいの？というあなたに！
 * [プロダクトオーナーの役割](https://fintan.jp/?p=1244)

* スクラムを始めるにあたってプロジェクトの判断基準決めたいあなたに！（対顧客向けかも）
 * [クライテリア項目一覧/利用ガイド](https://fintan.jp/?p=950)

* AWS上にスクラムの開発環境をパパっと構築したいなというあなたに！
 * [Collaborage](https://fintan.jp/?p=335)

* よし、これからスクラム始めるぞ！開始できる準備が整っているか確認したいあなたに！
 * [スプリント開始条件チェックリスト](https://fintan.jp/?p=687)

* 毎スプリント時間が足りない、上手く見通しが立てられないあなたに！
 * [スプリントの見通し確認ガイド](https://fintan.jp/?p=1251)

* スクラムでの見積もりに不安を感じているあなたに！
 * [多点見積りとスケジューリングの実践](https://fintan.jp/?p=4201)

* 顧客とスクラム開発に挑戦するけど、ハマりポイントとか無いの？というあなたに！
 * [ゼロから始めるスクラムによる受託開発](https://fintan.jp/?p=5207)

## 最後に
今後もどんどんコンテンツが増えていく予定ですので、
スクラムも含め、システム開発のノウハウをお探しの方は是非 [Fintan](https://fintan.jp/) をご活用下さい。
BlenderのShader NodesにPythonからアクセスする

BlenderのShader Nodeの値をPython側から変更したかったのですが、意外とめんどくさかったので備忘録。

## 環境
Blender2.81
Windows10

## コード
こんな感じのshaderの値にアクセスします。
Blenderはズブの素人なので、詳しい人いたらコメントお願いします。

![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/250282/b7ee01fb-ed84-d0d3-7aa7-26e646418f34.png)

```python
import bpy

mat = bpy.data.materials[mat_name]           # get material
node_tree = mat.node_tree                    # node tree of material
nodes = node_tree.nodes                      # nodes array of material
bsdf = nodes.get("Principled BSDF")          # get shader node you want

bsdf.inputs['Metallic'].default_value = 1.0  # set value to inputs
bsdf.inputs['Roughness'].default_value = 0.0 
```
シェルスクリプト リダイレクト記号の位置

##### コマンドの引数の右側にリダイレクト記号を記述
これが最も（一般的）直感に合うかもしれません。

```bash
# file に "Yes" が記述される
echo Yes > file
```

##### コマンドの引数の左側にリダイレクト記号を記述
順番に読むと、”echo をリダイレクトします、file に対して、Yes を” のような解釈になります。
個人的にこれが最もピンとこないです。
上記のコマンドと結果は同じになります。

```bash
# file に "Yes" が記述される
echo > file Yes
```

##### コマンドよりも左側にリダイレクト記号を記述
順番に読むと、"リダイレクトします、file に、echo Yes を” のような解釈になります。
上記2つのコマンドと結果は同じになります。

```bash
# file に "Yes" が記述される
> file echo Yes
```

ちなみに以下だけだと、空のファイルが生成されます。

```bash
# touch file と同じ動作
> file
```
ブラウザ録画でユーザー行動分析できるLogRocketが予想以上にすごかった

## LogRocketというJavaScript

www.finddoctor.jp というヘルスケア系のCGM(Consumer Generated Media)をGo言語の勉強がてら作った後、次はマーケティングの勉強をしようということで、[1行のJavaScriptコードでユーザーの行動分析を動画で確認できる「LogRocket」](https://paiza.hatenablog.com/entry/2017/07/27/1%E8%A1%8C%E3%81%AEJavaScript%E3%82%B3%E3%83%BC%E3%83%89%E3%81%A7%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%81%AE%E8%A1%8C%E5%8B%95%E5%88%86%E6%9E%90%E3%82%92%E5%8B%95%E7%94%BB%E3%81%A7%E7%A2%BA%E8%AA%8D)を使ってみたら、相当すごかったので共有したいと思いました。

## LogRocketとは？

htmlのheadにJSコードを埋め込むだけで、サイトに訪れたユーザーの行動を動画で録画してセッションとして残しておいてくれます。無料枠は1000セッション&14日間のデータ保持までだそうです。

## 実際に使ってみる

![hitokage.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135794/04cb9150-5428-0f8a-b91e-c4fce14ca73f.gif)

ご覧の通り、ログはもちろん、テキストフィールに入力された文字まで取得できますね。素晴らしい。


## 導入方法

[1行のJavaScriptコードでユーザーの行動分析を動画で確認できる「LogRocket」](https://paiza.hatenablog.com/entry/2017/07/27/1%E8%A1%8C%E3%81%AEJavaScript%E3%82%B3%E3%83%BC%E3%83%89%E3%81%A7%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%81%AE%E8%A1%8C%E5%8B%95%E5%88%86%E6%9E%90%E3%82%92%E5%8B%95%E7%94%BB%E3%81%A7%E7%A2%BA%E8%AA%8D)をお読みください
QMLをこれから学習するならGalleryサンプルアプリがおすすめ

# 初めに

カレンダーが空いている為、投稿させていただきます。
私がAndroidの勉強を始めたAndroid Froyo～Gingerbreadの頃、画面の部品を覚えるのによく活用していたのが、Android SDKにバンドルされている「ApiDemos」という神サンプルアプリでした。いろいろな画面の実装例が入っていた為、通勤電車の中で触りまくって、「この機能の実装が知りたい」と思ったら、帰宅してサンプルコードを読む、ということを繰り返していました。
QMLの画面部品を覚えるのに、ApiDemosのようなサンプルがないかなーと思っていたらありました。
「Gallery」というサンプルアプリです。
そこで、簡単ではありますがGalleryサンプルアプリを紹介させていただきます。

# Windows10とAndroidで見比べてみる

Windows10とAndroidでそれぞれアプリを起動した画面を見比べてみます。
![GalleryDiff.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69678/bc41fc0e-66f1-fc24-2329-4d3c49f8c194.png)

ほとんど見た目が変わらないです。

# スタイル
デフォルトの設定だと、アニメーションがない（早い？）ようで、Android Studioで作成したアプリと比べると画面表示がパパっと表示されるイメージで少し違和感があります。このアプリは右上のボタンからスタイルを変更できます。（設定を変更したらアプリの再起動が必要）
![GallerySetting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69678/df9dc8af-85d7-f35d-d9f9-19d33722735f.png)

スタイルについては、[Qtのページ](https://doc.qt.io/archives/qt-5.11/qtquickcontrols2-styles.html)に説明があります。
Material Designは、AndroidでもiOSでも推奨されるデザインの一つなので、Material Designチックな設定ができるのはうれしいです。

# Navigation Drawer

画面の左側からスライドするとメニューが表示されます。いわゆるNavigation Drawerですね。
![NavigationDrawer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69678/5596b6ac-c291-7172-1b02-0e276ffc40d0.png)

# 最後に

簡単ではありますが、Galleryサンプルアプリを紹介させていただきました。
画面に関しては、まずは動くところを見て、興味がある画面部品があったら、QMLでどのように書いているんだろう、と見ていくのが覚える早道だと思います。
Qt Creatorのウィザードで作成されるQMLテンプレートだと正直微妙だなと思っていたのですが、Galleryサンプルをベースに、気になる部分をピックアップしてQMLのコードを書くという方法なら、QMLの学習も捗ると思います。
まずはAndroid端末（もちろんiOS端末も可）にインストールして、通勤電車の中で動かさなくては。
javascriptでdeepcopyのようなことをやってみる

#この記事でやること

pythonを触っているときにcopyを使えば二次元配列も簡単にコピーできることに感動しました。

以前にjavascriptで同じことをやろうと思ったときに詰まった経験があるので、
javascriptの二次元配列やオブジェクトの配列をコピーする方法を残しておこうと思います。

#はじめに
まず、javascriptである配列を別変数に代入した場合、その変数の値を変更すると元の配列にも影響します。

```javascript:deepcopy.js
    const arr1 = [0, 1, 2];
    const arr2 = arr1;
    arr2[0] = 5;
    console.log(arr1); // [5, 1, 2]
```

このパターンでよく使われるのがこちらです。

```javascript:deepcopy.js

    // パターン1
    const arr1 = [0, 1, 2];
    const arr2 = [].concat(arr1);
    arr2[0] = 5;
    console.log(arr1);  // [0, 1, 2]

    // パターン2
    const arr1 = [0, 1, 2];
    const arr2 = arr1.map( item => item);
    arr2[0] = 5;
    console.log(arr1); // [0, 1, 2]

    // パターン3
    const arr1 = [0, 1, 2];
    const arr2 = Array.from(arr1);
    arr2[0] = 5;
    console.log(arr1);  // [0, 1, 2]

    // パターン4
    const arr1 = [0, 1, 2];
    const arr2 = [...arr1];
    arr2[0] = 5;
    console.log(arr1);  // [0, 1, 2]

```

などです。
この他にもいくつか方法はあるかもしれません。

しかし、これらの方法でも二次元配列ではうまくいきません。

```javascript:deepcopy.js

    const arr1 = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8]
    ];
    const arr2 = [...arr1];
    arr2[0] = [1, 2, 3];
    console.log(arr1);
    // [[0, 1, 2],
    // [3, 4, 5],
    // [6, 7, 8]]
```

上記の例の場合では元の配列arr1には影響がありません。
しかし次の場合にうまく動作しません。

```javascript:deepcopy.js
    const arr1 = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8]
    ];
    const arr2 = [...arr1];
    arr2[0][0] = 5;
    console.log(arr1);
    // [[5, 1, 2],
    // [3, 4, 5],
    // [6, 7, 8]]
```

この場合は元の配列に影響を及ぼしてしまいます。

#二次元配列の場合

そこで二次元配列の場合は次のようにします。

```javascript:deepcopy.js

    // パターン1
    const arr1 = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8]
    ];
    const arr2 = arr1.map( item => [].concat(item));
    arr2[0][0] = 5;
    console.log(arr1);
    // [[0, 1, 2],
    // [3, 4, 5],
    // [6, 7, 8]]

    // パターン2
    const arr1 = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8]
    ];
    const arr2 = arr1.map( item => [...item]);
    arr2[0][0] = 5;
    console.log(arr1);
    // [[0, 1, 2],
    // [3, 4, 5],
    // [6, 7, 8]]
```

このようにするとうまくいきます。
オブジェクトの配列なども同様にすれば良いです。

```javascript:deepcopy.js
    const arr1 = [
      { name: 'hoge', age: 19 },
      { name: 'fuga', age: 25 },
      { name: 'foo',  age: 22 }
    ];
    const arr2 = arr1.map( item => Object.assign({}, item));
    arr2[0].name = 'fuga';
    console.log(arr1);
    // {name: "hoge", age: 19}
    // {name: "fuga", age: 25}
    // {name: "foo", age: 22}
```
#まとめ
これをdeepcopyと読んでも良いのでしょうか？

javascriptでそのような配列を取り扱い、またコピーする必要がある機会に出くわすかはわかりませんが、次元が大きくなるにつれコードがとんでもなくなりそうです。
わざわざ他の言語より使いにくく作った言語、esolang

みなさん、esolangのことご存知でしょうか。

面白そうなので、今回話してみようかと思います!わーい

#Esoteric programming language
わざわざ他のプログラミング言語に比べて使いにくく作った言語の話です。

##なんで作る?
制作理由はだいたいがコンピュータプログラミング言語とプログラマーのメンタルの限界をテストするために（笑)
絶対に実用的なプログラミングに適用するための意図ではないです。

##esolangの要素
ループ文、代入文、条件文みたいな正常な文法構造がほぼなくて、ポインタ、スタック、キュ、メモリ構造みたいな資料構造に直接接近する言語がほとんどです。

###brainf＊＊k
代表的なeslang. 1993年ウアーバンミューラーが制作したもので、制作したファイルの拡張 .b/.bf.です。開発目的は一番小さいコンパイラーで具現できるチューリング完全プログラミング言語を作ること。世の中で一番単純で一番複雑な言語が会う言語で、プログラミングで使用される文字は+-][><,. の８文字だけらしいです。

>\> : ポインター増加
< : ポインター減少
+ : ポインターが指すバイト値を増加
- : ポインターが指すバイト値を減少
. : ポインターが指すバイト値をアスキーコード文字に出力
, : ポインターが指すバイトにアスキーコードの値を入力する。簡単にゆうと入力される役割
[ : ポインターが指すバイトの値が０になるとペアになる]に移動する。
] : ポインターが指すバイトの値が０にじゃナイトペアになる[に移動する

以外に空白、改行などのその他の文字は全て処理されないです。

```ruby:helloworld出力コード
++++++++++
[>+++++++>++++++++++>+++>+<<<<-]
\>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.
```

まーこんな感じらしいです。宇宙語感。。
気になる方はこちらを参考してください
https://ja.wikipedia.org/wiki/Brainfuck
個人的にニャルコという派生言語が可愛かったです（笑）


###韓国語のesolang
また、韓国語で作られたesolangもあります。
これを記事に書こうとした理由は、韓国語だけど読めない言語だからです。
アヒ(아희)という言語です

```ruby:helloworld出力コード
뱔뿌둬뱺쀠더빠뚜
터벚봃떠빠뷹붏뼤
나퍄따쀄븈뵳두받
붏타볻뚜벓탸볐밢
떠볽뻐뷦투희맣어
```


これ、まるで文字化けの形になっています。
ハングルだけでプログラミングできるハングルプログラミング言語で、ハングルで出来たプログラミング言語のなかで一番目に発表されたesolangでもあります。アヒはハングル字形のデザインを活かせるプログラミング言語という目的を持って作られたそうです。ただ、ハングルでプログラミングすることで、韓国語ではないので知らずみたら外界語、そのものになります。

どの構成なのか説明しようとしたら、ハングルの講座みたいなことになっちゃうので、、
今回の記事はここまでですー

#参考
https://ja.wikipedia.org/wiki/%E9%9B%A3%E8%A7%A3%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E8%A8%80%E8%AA%9E esolang
https://ja.wikipedia.org/wiki/Brainfuck brainf***
https://namu.wiki/w/%EC%95%84%ED%9D%AC ahi
Dockerのトラブルシュートのときに使うコマンド

これはdockerを使う際に個人的によく使っているトラブルシュート時のコマンドです。
ただのメモとして自分がよく使うものだけ取り扱っています。

## コンテナの状態を確認する

```
//起動しているコンテナを確認する。
docker ps
```
みんな知っている基本的なコマンド。しかし、トラブルシューティングをする場合はそのままではなく、オプションを使うことが多いです。

```
//すべてのコンテナ(起動していないものも)を確認する
docker ps -a
```

コンテナが大量にある場合はフィルタリングをする。

```
//終了しているコンテナだけ表示する
docker ps --filter status=exited
```

## 使用メモリを確認する

dockerで使用しているコンテナに対してメモリが足りないと正常に動かないので、一応確認する。

```
//すべてのコンテナのメモリを確認する
docker stats -a
```

CPU使用率やメモリ使用量、I/Oなども確認できるので挙動がおかしい場合はとりあえず確認してみる。

## logを確認する

とりあえずログを見るとわかることがあるので、ログを眺める。

```
//コンテナのログをタイムスタンプをつけて表示し続ける
docker logs -f -t <コンテナ名> 
```

docker-composeを使って複数のコンテナを立ち上げているとき、すべてのコンテナのログを流したい場合はこうする。

```
//docker-composeでたてたコンテナのログすべて見る
docker-compose logs -f
```

しかし、`-f`つけるとその端末が使えないので別の端末を立ち上げておきます。

## コンテナの中に入る

ボリュームマウントなどしているときは実際にコンテナの中に入って確認するのが一番です。

```
// bin/shを使ってコンテナに入る場合
docker exec -it <コンテナ名> /bin/sh
```

`/bin/sh`の箇所はコンテナ内で使えるシェルを指定してください。
めんどくさいことに、ここは環境依存するので使用しているイメージによって変わります。

## 詳細情報を得る

コンテナの詳しい情報を得ることはたまに役に立ちます。

```
//詳細情報を確認
docker inspect <コンテナ名>
```

むしろ、特定のコンテナに接続したいなどの時にIPアドレスを確認するの使うことのほうが多い気がします。

```
//-formatにはいろいろな出力形式が指定できる
docker inspect -format="{{ .NetworkSettings.IPAddress }}" <コンテナ名>
```

~~ほかにもいろいろできるけどあんまり使ったことない~~

## そもそもイメージちゃんとあるの？

コンテナばっかり見てないでイメージもちゃんと確認しましょう。

```
// 存在するイメージを確認する
docker images
```

`docker images list`でも取得できるけど、文字数が少ないほうがいいですよね。
docker-composeを使っている場合はこちら。

```
//docker-compose でたてたコンテナのイメージを確認する
docker-compose images
```


## よくわかんなくなったら消す

Dockerのいいところは消して作り直してのハードルが低いところ。
問答無用に消していきましょう。

```
//対象のコンテナを消す
docker rm <コンテナ名>
```

イメージも消しましょう。

```
//対象のイメージを消す
docker rmi <イメージ名>
```

なんかエラーが出るときは`-f`オプションをつけて無理やり消します。

```
//すべての警告を無視して力づくで消す
docker rm <コンテナ名> -f
```

ちなみに、コンテナ名もしくはイメージ名は複数指定が可能です。

```
//対象のイメージを消す
docker rmi <イメージ1名> <イメージ2名> ・・・
```

消したり作ったりしていると、未使用なイメージなどのごみが増えてきます。
なのでごみは消します。

```
//noneのイメージを一括削除
docker image prune
```

docker-composeの場合は一気に消せます。

```
//docker-composeでたてたコンテナを停止する
docker-compose down
```

イメージも消したいとき

```
//docker-composeでたてたイメージも削除する
docker-compose down -rmi all
```

ちなみに、`-v`をつけると`<none>`などのアノニマスボリュームも消してくれる。

とりあえず、以上です。
Code Chrysalis Culture!!

こんにちは！最近Code Chrysalisに入社したIkuです。
今日は私が感じるCode Chrysalisのカルチャーについてお話しします。

##始めに
簡単に自己紹介します。
私は現在Code Chrysalisで入学手続き関連の仕事をしており、入社したのは12月上旬です。
2年ほどIT企業で働いていましたがエンジニアとしての経験はなく、1月からFoundations（プログラミング初心者向けのコース）に参加します。
プログラミング経験が全くないので不安もありますが、とても楽しみです！

##Code Chrysalisのカルチャーって？
私が感じているCode Chrysalisのカルチャーは（１）オープンであること、（２）自主的・自立していること、（３）人想いであること、です。

まず（１）オープンであることですが、スタッフの皆さんは思ったことをはっきりその人に伝えます。これは日本の和を乱さない文化に反すると思いますが、相手が本当にどう思っているのか、何を自分にしてほしいのかはっきり直接教えてもらえた方が変に勘ぐることもないですし、また大人になってから正直な意見を伝えてくれる人は少ないのでとてもありがたいことだと感じています。
文章で書くとそこまでインパクトがないですが、最初あるスタッフが他の人にフィードバックしているのを見たときはビシバシ意見をいってたので大分びっくりしました笑
もし彼らからフィードバックをもらったとき、自分を批判・否定しているのではなく、どうすれば良くなるのかを考えて伝えてくれているのだということを私も忘れないようにしたいです。また、誰だって相手が嫌かもしれないと感じることを伝えるのは好きではないことも忘れないようにしたいですね！

（２）自主的・自立していることは初めて面接にいったときも今も持っている印象です。それぞれ自分が今何をする必要があるのか、何を改善できるか、どうすればよりCode Chrysalisのサービスを向上できるかを考えて行動しています。
（１）と少々被りますが、何か思った、感じたことは自発的に行動し、他の人からフィードバックをもらった場合はそれに賛成でも反対でもきちんとその人の意見を聞きます。
それぞれが自立していてもチームワークで働くこと、また他人の意見を聞くこと（他人の意見を自主的に聞きもします！）を忘れないことは大事だなと改めて再認識させられました。

最後に（３）人想いであることですが、誰かがCode Chrysalisに興味を持ちスタッフメンバーと面談をする際、「Code Chrysalisで学んでこの人はどうやってその経験を活かせるだろうか」ということを考えて面談していることが挙げられます。
もちろんCode Chrysalisで学んでほしいですが、Code Chrysalisのコースを受講後、本当にこの人にとって一番いい結果が出せるのか面談をする中でみていきます。面談にきた人に最終的なゴールは何かを聞き、そのゴールを聞いた上でCode Chrysalisのコース内容がマッチしない場合は率直にお伝えしています。
私はこの姿勢がとても好きです。
今までCode Chrysalisと話して「そんなこと感じられなかった！」という人もいるかもしれませんが、スタッフの皆さんは何がその人にとって一番いいか、どうすれば何が改善できるかを考えながら接しているということを是非知っていただければと思います。

##雰囲気にご興味がございましたら是非一度お越しください♪
Code Chrysalisのカルチャーはユニークだと思いますので、ご興味がございましたら是非一度足を運んでみてください！
受講生の方々がどう過ごしているかまで当記事では書いていませんが、皆さんも自由に過ごしており（自由時間にギターを弾いたり、歌ったり、ジャグリングをしたり…等々）より雰囲気を掴めるかと思います。

入社してまだ間もないですが、私もCode Chrysalisの一員として一緒にどんどん成長していけるよう頑張っていきます！
GitHubでmasterを守るための設定項目を調べた

## 前置き

Github-flowに従うプロジェクトにおいてmasterブランチは神聖な場所であり、そこにはプルリクエスト上で以下の声を掛けられたソースコードだけが到達され得るべきであります。

* レビュワーによる***「LGTM!」***
* CIによる***「All checks have passed」***

なので、ローカルPCからmasterブランチへ直接Pushを行うなど、言語道断の所業です。

また、上記２つの声を掛けられていないにも関わらず、プルリクエストをマージすることもあってはならないのですが、人間社会というのは止事無き事情がまま起きてしまう業の深い場所ですので、

* ~~レビュワーによる 「LGTM!」~~
* CIによる「All checks have passed」

という最低限の条件の下、可及的速やかにmasterへマージできることも、時には認めざるを得ません。

## 失敗

ご承知の通り、GitHubには `Branch protection rule` という設定項目が存在し、これを使うとmasterブランチへの（に限らずお好きなブランチへの）コードの無秩序な流入を食い止めることが可能です。

そんな訳で`Require pull request reviews before merging`にチェックを付けます。そこにはこんな説明があります。

> When enabled, all commits must be made to a non-protected branch and submitted via a pull request with the required number of approving reviews and no changes requested before it can be merged into a branch that matches this rule.
>
> （この設定が有効な場合、全てのコミットは（ルールが適用されていない）その他のブランチに対して行った上で、該当ブランチにマージする前に、プルリクエスト経由で必要な数の承認レビューが必要です。）

やれやれ、これでmasterは守られたと思っていたのです。
（しかも、Admin権限があれば（CIの目視チェックだけは作成者に課すにしても）強制的にmasterへマージできることも経験的に知っていました）

ところがこの設定だけだと、Admin権限を持っていればローカルPCからmasterへ直接Pushができるということを最近になって知りました・・・。さすがにそれはマズいわぁ、何とかしたいわぁ、という訳で調査した結果がこの記事です。

## 調査

以下、GitHubのFreeプラン・Publicリポジトリで検証しましたが、Teamプランであっても雰囲気は同じだと思います（たぶん）。

調査内容としては、`Branch protection rule`の設定を付けたり消したりしながら、各権限のユーザーでどういった操作が可能であるかを一つ一つ調べました。

### 1. デフォルトの状態

* Branch protection ruleには何も設定していない

|     権限     | masterへ直接Push | レビューのないプルリクからのMerge |
|:------------:|:----------------:|:---------------------------------:|
|     Owner    |         ○        |                 ○                 |
| Collaborator |         ○        |                 ○                 |
|    その他    |         ×        |                 x                 |

### 2. レビューを必須にした状態

masterブランチに対して、

* `Require pull request reviews before merging` にチェック

|     権限     | masterへ直接Push | レビューのないプルリクからのMerge |
|:------------:|:----------------:|:---------------------------------:|
|     Owner    |       ○ (*1)      |               △ (*2)              |
| Collaborator |         ×        |                 ×                 |

### 3. 管理者もルールの適用対象にした状態

masterブランチに対して、

* `Require pull request reviews before merging` にチェック
* `Include administrators` にチェック

|     権限     | masterへ直接Push | レビューのないプルリクからのMerge |
|:------------:|:----------------:|:---------------------------------:|
|     Owner    |         ×        |                 × (*3)                 |
| Collaborator |         ×        |                 ×                 |


## 結論

表をきちんと精読した人には分かったと思いますが、結論、前書きに出てきたわがままボディを満足させる設定は、探し当てることができませんでした。が〜〜〜ん。ここまで読んでいただいたにも関わらず申し訳ございません。 :bow: 

以下、表中の備考です。

* (*1) これだけを防ぎたかったのが今回の記事の目的です。
* (*2) Merge画面で `Use your administrator privileges to merge this pull request.` にチェックを付けるだけです。
* (*3) 止事無き事情によりこれはできて欲しい。


#### 本当の目的

こんな設定を知ってるよ〜、を教えてください :bow:
FileMakerで工事契約情報を管理する(3)

#目的
新着確認機能の作成。
現在勤務する会社では、工事を契約すると報告書を紙で回覧しています。ファイルメーカーを使用すればデータを共有することができ紙の回覧をなくすことができます。
しかし、回覧をなくすと、いつ新規契約があったかが分からないという人たちが出てくると思われます。そこで今回は新規で契約した情報がわかるようにします。


#環境
windows10(windows7からのアップグレード)
FileMaker 16 pro

#サンプルファイル
https://www.dropbox.com/s/c6ho4dbbrw8xc6a/%E5%B7%A5%E4%BA%8B%E5%A5%91%E7%B4%84%E7%AE%A1%E7%90%86%E3%81%9D%E3%81%AE3.fmp12?dl=0


#0.前提条件
新規に金額工期情報が登録された場合のみ対応しています。
＊情報が変更された場合には対応していません。

#作成手順
##1.ユーザー、テーブル、フィールドの作成
###1-1.ユーザーの作成
自分が作成したレコードは新着確認の必要がないのでそのためユーザーを必要な数だけ作成します。
下記のように2つユーザーを作成します。
名前:admin、パスワード:admin
名前:user1、 パスワード:user1




###1-2.契約新着確認テーブル作成
ユーザーが契約情報を確認したかを保存するテーブル作成します。フィールドは画像の通りです。
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213168/b8f13171-9b44-6481-04a4-2454f2fc05e5.png)


###1-3.新着確認レイアウトを作成する。
オカレンスは「TO_01a1_工事台帳_契約新着確認情報」

###1-4.金額工期情報テーブルにg_ユーザー名フィールドを追加

###1-5.ユーティリティテーブルにg_is_layout_enter_契約情報一覧フィールドを追加
初回起動時に契約情報一覧を表示した場合には、自分以外が作成したレコードの未確認情報だけを表示したいので条件分岐のためのフラグとして使用します。


##2.オカレンスの追加
###2-1.契約新着確認オカレンスの作成とリレーション設定
画像のように設定します。

![2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213168/8019fba5-9982-3aa0-b7d2-a1da1ed62c25.png)


![3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213168/973f785d-925d-e6ab-e788-54cd59320279.png)


##3.スクリプトの作成
###3-1.initializeを編集
上記で追加したg_ユーザー名フィールドにアカウント名を設定します。
また、g_is_layout_enter_契約情報一覧フィールドを初期化します。

###3-2.契約情報一覧_詳細表示スクリプトを追加する。
詳細はファイル確認お願いします。

###3-3.LayoutTriggerスクリプトを追加する。
詳細はファイル確認お願いします。

##4.レイアウト編集
###4-1.新着情報かわかるように目印を配置する。
非表示の条件として下記のように設定します。

TO\_01a\_工事台帳_金額工期_金額工期情報::g_ユーザー名 = TO\_01a1\_工事台帳_契約新着確認情報::作成者 or 
TO\_01a\_工事台帳_金額工期_金額工期情報::g_ユーザー名 = TO\_01a\_工事台帳_金額工期_金額工期情報::作成者



##5.全体の流れ
詳細はファイルを見た方が分かりやすいと思いますので、動作の流れをざっくりまとめます。

1.起動時にアカウント名をグローバルフィールドに保存
2.契約情報一覧を初めて表示する際に、自分が新着確認したレコード以外　かつ　自分が作成したレコード以外を検索して未確認情報のみを表示する。
3.契約情報一覧から未確認情報をクリックすると、新着情報テーブルにアカウント名と金額工期情報IDを登録して新着確認をし、工事の詳細を表示する。
＊契約情報一覧から工事の詳細を表示したレコードのみを対象として処理を行っているので、詳細表示した状態でレコード送りしても新着確認はされません。
Flutterをサクッと動かしてみた。

この記事は [JSL (日本システム技研) Advent Calendar 2019](https://qiita.com/advent-calendar/2019/jsl) 25日目の記事です。

# はじめに
Flutterの環境構築とサクッとアプリを起動してみようと思い、メモを残してみました。
この記事は、MACを使用しての環境構築を行いますのでご了承ください。

# Flutterとは（メモ程度に残しますね）
Google 社が開発しているオープンソースのモバイルアプリケーションフレームワークです。
言語は、Dartになります。
iOSやAndroidが開発可能なマルチプラットフォームに対応しています。

# 開発環境を構築します。
インストールするものは、以下のとおり、

- Flutter SDK
- Xcode
- Android Studio

1. [Flutter SDK](https://flutter.dev/docs/get-started/install/macos)をインストールします。
アクセスしたときの最新のインストールを行いましよう。
![スクリーンショット 2019-12-25 20.58.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171737/9003fe05-1dbd-a677-cb3b-be09972a3c27.png)

公式ドキュメントに書かれているのは、「~/development」の場所になっています。
そこにダウンロードしたZipファイルを展開します。

```
$ cd ~/development
$ unzip ~/Downloads/flutter_macos_v1.12.13+hotfix.5-stable.zip
```
~/.bash_profile ファイルにパスを追加します。(hogehogeは、ユーザー名のフォルダ名を示します）

```
export PATH=/Users/hogehoge/development/flutter/bin:$PATH
```
定義したファイルの再読み込みを行います。

```
$ source $HOME/.bash_profile
```

２. [Android Studio](https://developer.android.com/studio/?hl=ja)をインストールします。
![スクリーンショット 2019-12-25 21.28.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171737/432ed886-b53a-c9ef-44a9-c70d2c4513e4.png)

３. Flutterのプラグインをインストールします。
起動画面で「Configure > Plugins」を選択します。
<img width="555" alt="スクリーンショット 2019-12-25 21.35.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171737/e5f4c254-ef2a-3572-084a-b3acb7e31e0b.png">

インストール途中で「Dart Plugin」をインストールしますかと聞かれるので「Yes」を選択します。

４. 「Restart Android Studio」をクリックし、再起動を行います。 

# Flutterを動かしてみる
1. 「Start a new Flutter project」をクリックします。
<img width="478" alt="スクリーンショット 2019-12-25 21.48.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171737/9a36ce72-f34f-2223-11b7-3c96dc707110.png">

２.　「Flutter Application」 を選択し、「Next」をクリックします。
最初なので画面では特に変更せずに、「Finish」をクリックします。

３.　Androidエミュレータを設定し、実行するとこのような画面が表示されます。
Androidエミュレータは、「Nexus 5X　Android８．１」を使用しました。

Flutter プロジェクトを作成後、メニューの「Run」 > 「Run 'main.dart'」を実行すると、Flutter アプリケーションが起動します。

<img width="1274" alt="スクリーンショット 2019-12-25 22.14.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171737/8bed3b49-c8b3-c7d2-27b8-8c7ea6f13f6f.png">


# 最後に
いつかやってみようと購入しました [Flutter×Firebaseで始めるモバイルアプリ開発入門](https://booth.pm/ja/items/1040806)を参考にやってみました。
ありがとうございました。
久しぶりにAndroid Studioを使ったので思い出しを含め、Flutterを始めるのに簡単に動作しました。

みなさんも試してみては？
世界最高のチームを作るためにナルトの多重影分身の術をForkしてみた！

私には夢があります。
「宇宙一最高なチームを作って最高にいい仕事をすること。」です！

そんな夢を掲げながら、数年前はうまく出来なかったことも多々あって、
結構凹んだり、悩んだりしてたのですが、トライと改善をし続けた結果、
少しずつ成功体験も増えてきているここ最近です。

そんな夢のために、毎日様々な実験を繰り返しているのですが、
今年最も良かった取り組みをお伝えします！！

その前に、今年取り組んで良かったチームビルディングの実験を挙げてみます。

## 今年取り組んで良かったチームビルディングの実験

- 超自立駆動型チームのための「全員経営会議」の毎月実施
    - 自分たちの活動がどのように数値結果として反映されるか完全オープン化
- 些細な悩みや課題も超高速解決のための「1on1ミーティング」の毎月実施
    - 椅子ガタガタ問題、PCリニュアール、各人が輝くプロジェクト参画へ etc...
- 会社全体をよくするための「会長キャンペーン」の全力実行！
- 定期的にはみんなで飲もうぜ！な会（予算コントロール）
- パートナーさんとの垣根を超えるため「みんな仲間だ」な仕掛け！
    - 第一回、PizzaHeadも開催
- 【今年BEST】ナルトの影分身の術からインスピレーションをもらった仕掛け！！

他にも色々実験しながら取り組んでいきましたが、
twitterなどで他のチームの取り組みなどからヒントを得つつ、
実際やってみて、その結果から独自カスタマイズを繰り返しています。

メンバーとの1on1ミーティングでのフィードバックで、新たな取り組みに発展させたりもしてました。

## デイリーミーティングを最高のものにしたかった

チームでデイリーミーティングをしているのですが、
せっかくみんなが朝集まって大切な時間を使うので、
その時間を最高のものにしたいと思っていました。

単純なタスクの共有の場ではなく、
「よっしゃ！」今日もやるぜ！ っていう雰囲気でその日の1日を始めたかったのです。

## 実験したこと

そこで僕はtwitterをみたり、ヒロ前田さんのPodCastなどを聞いたりしながら、
ヒントを探しました。

以下のような実験をしてみました。

- 今年取り組む新しいサービスを考えてシェアする
- 世の中にあるサービスを研究して良いと思うサービスをシェアする
    - heyの光本さんの話で出てきたのでパクってみた
- チームで購入したい本のプレゼンテーション
- 最近あった自分のニュース

などなど。

悪くはなかったと思うのですが、何か自分ごとに捉えられにくくて、
聞いて、いいねーってなるだけのような感じで、私たちチームにはもう一歩な感じでした。

## 毎日じゃなくて1週間という時間軸が出来たことが発明の始まり

毎日実験をしていたのですが、僕らにとってちょっとしっくりしないものが続いたので、1週間に一度何かコンテンツを差し込んでみようかという流れになりました。

これが、今年一番の発明コンテンツの始まりでした。
1週間という時間軸が出来たことで、その切り口で考えてみました。

みんなそれぞれ日々仕事をしていると、たくさんの課題にぶち当たり、
それを乗り越え、たくさんのことに気づきます。

その気づきって結構価値があるものじゃないか！！
そのみんなの気づきを全て自分のものに出来たら、みんなの時間を自分のものにできるやん！！
みんなの莫大な時間を自分が経験したことに出来たら、爆速に成長できるやん！

あっ！！
そうだ、ナルトが自来也と技を習得するときに、
多重影分身の術を使って分身の経験も自分が経験したことにできる特性を使って、
不可能だと思ってた期間で、すげー技を習得してた！

っていうインスピレーションが湧きました。

圧倒的なスピードでの成長と圧倒的なスピードでの成果をチームで出せたら、
すごいな！と思い、
多重影分身の術的な考えで、チームのみんなを自分の分身として経験を取り込む仕掛けを始めてみました。

## 「気づきカンファレンス」を発明

毎週金曜のデイリーミーティングで、今週自分が仕事で経験した気づきのうち、
一番みんなに伝えたい経験をシェアしあうことにしました。

やってみるとすぐに、結構いいじゃんってなりました。

- 単純にいい経験を伝えられてみんなの成長のきっかけに使える
    - いい経験とか成果とか大変だったことなどのシェアを漏らしがち問題を解決！
    - いい経験だったとしても、誰に言ったか忘れちゃって、価値あるものを自然と捨てちゃってることもある
- チームメンバーがどこで苦しんでたりそれをどう乗り越えたか分かる
    - 普通のミーティングで課題ありますか？ってなっても「ない」って言いがち問題を解決！
    - 気づきを誰かのためにシェアしよう！という切り口にすることで課題もナチュラルにシェアできるようになった。
    - 自然とその場でアドバイスもできる

今まで捨ててしまうこともあった、価値あるいい経験をタイムリーに自然にみんなに伝えらえるようになりました。みんなの成長のために、気づきを共有しよう！というスタンスなので、ナチュラルに価値ある情報が行き来する場となりました。

しかも、実際にチームで仕事している中での気づきなので、
自分ゴトにしやすいというのは良かったです。

みんなの成長のために、気づきを共有してくれた！ということで、
毎回シェアしてくれた時に、拍手して有難うの気持ちを込めて、
「ナイス気づき！」って言ってます。

## 「気づきカンファレンス」の今後

今では、今週みんなどういう気づきがあったのかなーって結構毎週楽しみになっています。
こういうのって、やり始めたけど続かないとかよくありますが、
発明してから半年くらいは開催し続けているので、
今年一番のチームビルディングの発明じゃないかなって思っています！

今後は、他のチームとの気づきカンファレンスコラボをして、
さらに多重影分身の術の経験インポート機能を強力にしたいなーとかも思ってたりします。

あとは、口コミでちょっと広がってきて、
その気づきカンファレンスの内容をチーム以外の人にもシェアしてよ！ってなったりして、
最近、社内の「10分間イノベーション」（毎日10分間は革新的なことを考える時間にしようっていうコンセプト）っていうチャットグループにHeadLine的にシェアも始めてみました。
反応は今のところ、上々です。

ぜひ、みなさんのチームビルディングにも参考になればと思います！

ただ僕もそうでしたが、他のチームや他の会社でやっている取り組みが、
そのままハマるかと言われるとそうでも無いことは多いと思います。
（おそらく企画の背景とかその企画を始めるにあたったストーリーとか、背景にあるチームのカルチャーが大事なんだと思います）

なので、ぜひ実験してカスタマイズして、自分たちのチームにあった、
最高のチームビルディングの発明をして頂ければと思います！！

来年も、最高のチームになるために、実験しまくります！！！！！！！！！！！
研修はチームみんなで受けよー 

##メリークリスマス★

エンジニア向け研修を担当したりしてます、まあまあ大きいIT企業の人事です。
Advent Calendarでどこもかしこもエンジニアが盛り上がってるので、滑り込み！

先週とある部署から研修の組み立ての相談を受けまして、
「個人で研修受けに行ってもその人がチームに広める力がないとチームは変わらないよね。」
「チームみんなが同じ研修受けるのがいいと思う！」
という話をしたりして盛り上がったので、ちょっとそのへんの考えをまとめてみたいと思いました。

特にアジャイル開発においては、同じマインドセットで動けることが大切なのかなと思うので、アジャイル開発のAdvent Calendarにお邪魔させて頂きます。
ブログとか普段あまり書かないし、Qiitaのアカウントも今作りました(すいません)が読んでもらえたら嬉しいです。

すでに同じような話をしてる人もたくさんいるかもですが、そのへんは気にせず（すいません）思ったことをつらつらと書いてみます。


##個人で研修を受けると
個人でスキルをあげるために研修を受けることももちろん素晴らしいことなのですが、チームで研修を受けるほうがぐっと効果があるなーという場面を何度も見てきました。

研修を受けた個人にチームを巻き込む力があればいいのですが、そうじゃない場合は、自分の意識は変わったけどそれを周りにうまく伝えられなくて苦しんでる人になってしまったりすらします。

僭越ながら、いくつかの会場で「どうやって周りを巻き込むのか」というような内容を講演をさせてもらったことがありますが、それを聞いてくださった方々の反響を見て、こんなに悩んでる人がいるんだなーと驚きました。

それなら、同じマインドセットで動ける人にみんなでなれるように、チームや関係者みんなで研修を受けたらいいんじゃないでしょうか？


##チームで研修を受けるといいこと
- 講師がチームみんなのマインドセットを上手に変える手助けをしてくれる
- チームで同じことを学び共通のマインドセットを持ちやすくなる
- 取り入れることとそうじゃないことをチームの状況に合わせて一緒に決められる
- チームの状況に合わせたコンテンツに調整してくれる講師も多い　
- 一般的なことを学ぶだけじゃなくチームの抱えてる問題の議論になったりする
- 研修中にチームメンバーの知らなかった一面が知れたりする
- 研修を通してチームビルディングにもなる　　　　　　　　　　　　　などなど
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 

##できればこれも
- 開発チームだけじゃなくてプロダクトオーナーや事業側も一緒に受けられるといい
- 数ヶ月たってから講師に状況を見てもらい、継続的に数回アフターケアをしてもらえるといい

例）研修中に講師がチームの状況を聞いてそれに合った改善方法を提案し、数ヶ月後に実際にチームがやってみた結果を聞き、それに対してまたアドバイスをもらい、ということを行ったら生産性が上がりました。

##ハードルが高いなら
そうはいってもチームの大人数が同時に抜けるなんて無理！という方には、

- チームを複数に分けて同じ内容の研修に参加させる
- 各自時間のあるときにオンラインの講座や本などで、同じものを学ぶ

例）「アジャイルサムライ」をチームみんなに読ませているという素敵なマネージャーを社内に見つけました。

そもそもチームみんなを誘うなんて無理！という方には、　

- 話を通してくれそうな上司、周りを巻き込むのがうまいメンバー、に相談してみる
- 興味を持ってくれそうな人だけ誘ってみる
- 研修より時間が短い勉強会やミートアップから始めて見る

焦らず小さく始めることをいつもオススメしております。
あ、結局どうやって人を巻き込むかという話がまた始まってしまった…

##おしまい

先週のお話は
「(とあるサービスの)開発系の部署全体で同じ研修受けてもらいたいね。」
「勉強会も開いて、忙しい人や事業側の方々にも、短時間で少し知ってもらえるといいね。」
なんてところで落ち着きました。
これから実現できるといいですが。

つらつらと書いたら意外とまあまあな量になりました。また機会があったら何か書くかも。
読んで頂いた方、ありがとうございました。
Vuex + VeeValidateでのState更新

# 目的
VeeValidate + Vuexの実装でいろいろ詰まったので、うまくいった実装例を残す。

# 背景
VeeValidateはv-modelが前提になっているっぽい。
http://vee-validate.logaretm.com/v2/concepts/components.html

Vuex + value + @inputの組み合わせの事例はいろいろあったが、
Vuex + v-modelの組み合わせは見つからなかったので、うまくいった実装例を残す。

# Vuex + VeeValidate でうまくいかなかったこと
v-modelを使わずvalue + @inputの組み合わせだと、手動で入力を伴わずにstateの値を書き換えた場合に、うまくVeeValidateに値の修正が伝わらない。

```vue:message.vue
<input name="message" :value="message" @input="message = $event" v-validate="'required|min:5'" type="text">
```

※VeeValidateを使ってなければ上記実装で特に問題はないが

# Vuex + VeeValidate でうまくいった実装例
v-modelと算出プロパティのsetterを使う。

```vue:message.vue
<input name="message" v-model="message" v-validate="required|min:5" type="text">

<script>
computed: {
  message: {
    get () {
      return this.$store.state.message;
    },
    set (val) {
      this.$store.commit('UPDATE_MESSAGE', val);
    }
  }
}
</script>
```

https://baianat.github.io/vee-validate/examples/vuex.html



# Vuex + VeeValidate + v-for
算出プロパティのsetterだとv-forのindexを渡せないので、setterで指定した配列箇所のstate更新が実現できない。
そのため、v-modelではstateのコピーを利用してstateは更新せず、別途@inputを定義してstateを更新する。

```vue:message.vue
<input v-for"(book index) in books" name="book" v-model="book.title" @input="input(index, $event)" v-validate="required|min:5" type="text">

<script>
computed: {
  books() {
    return this.$store.state.books.map(v => Object.assign({}, v));
  }
}

methods: {
  input(index, value) {
    this.$store.commit("changeTitle", index, value)
  }
}
</script>
```

```javascript:store.js
const store = new Vuex.Store({
  state: {
    books: []
  },
  mutations: {
    changeTitle(state, index, value) {
      state.books[index].title = value;
    }
  }
})
```
皆さんいつもお疲れさまです。

#皆さんお疲れさまです。
##本日で最後になりましたのでまとめとします。
とりあえず言えることはネット右翼に対して自分たちは的であることは確かです。
あと言えることはFacebookもあまり最近はボランティアには向かなくなってきているということです。
GPDAやCCPAで規制にかかりやすいことがわかりました。
Slackは使い慣れないしと思った結果ですが。
TwitterもFacebook同様な規制がかかると考えると日本の一番安定できるSNSであるNoteでこれからは行いたいと思います。
そのためにはボランティアしたい人はNoteのアカウントの取得をお願いしたいと思います。
##クライシスマッピングについて
今後も行っていきますが今現状私自身が大変忙しい状況になっております。
実はある大型Web案件の基盤部分の構築及び実装試行を行っているためこれからは残業が増えると思われます。
みなさんが気がついて行っていただければ大変助かります。
私自身もボランティアへの協力依頼は上司には行う予定でいますがなかなか難しい状態です。
これからはみなさんが主だって動いていただけると自分の力の継続への余裕も増えると思います。
これからもご協力の程宜しくお願い致します。
Beetle - The Smallest Arduino 買ってみた

ちょっとした小物を作るのに便利かと思い，物色して見つけたこれを買ってみた。
回路図には2013/10/23って書いてある。もう6年も前なんだ。

# これは何？
- Arduino Leonardo の小さいの，と思えばいいみたい（本家は使ったことないけど）。外に引き出されている端子が必要最低限になっている。

![alt](https://dfimg.dfrobot.com//data/DFR0282/190619%20Update/IMG_1380.jpg?imageView2/1/w/564/h/376)

切手サイズです。実物はすごくかわいいです。Beetleっていう名前がわかります。でも端子が大きくて，使いやすそうです。

# とりあえず初期情報
- 製品ページ
    - https://www.dfrobot.com/product-1075.html
- 回路図
    - http://image.dfrobot.com/image/data/DFR0282/Beetle%20Sch.pdf
- ピンアウト図
    - Wikiにあり
    - https://wiki.dfrobot.com/Beetle_SKU_DFR0282

# 使うための初期情報 その他
- とりあえず Micro USB に接続すれば単体で使えそう
- [+]のラベルがついた端子から5Vを供給しても良い。
    - 保護等などはないので，同時接続時に注意必要。
    - 上記wikiにも注意事項記載あり
- (User) LED 1個あり。スイッチなし。リセットスイッチもなし。
- 注意事項
    - Wikiにあり。UARTがロックされてスケッチが書けないときの手順が書いてある。

# とにかく使ってみた
- Arduino IDE 1.8.10
- ボードを "Arduino Leonardo" にする。
- Mac直結で，ドライバーインストールは不要だった。`/dev/usbmodem***`が出てくる。
- スケッチ例の Blink は無改造で動く。`LED_BUILTIN` は13番ピンで，大抵のArduinoはそこにLEDがついてる，とのこと（出典は忘れました）
- スケッチ例 - Fade は LED定義を`13`または`LED_BUILTIN`にすることで動いた。
- シリアルのところもスケッチ例で動かせた。
- ほか，Arduino Leonardo互換ということで，タイマー等の情報はすぐに見つかるだろう。自分用に保管しなくても良さそうだ。

# おまけ 開封画像

わりとおしゃれなオレンジの箱に入っていました。いろいろ使ってみたいし，送料がもったいないので，3つ一気に買ってみました。
![P_20191225_204743_vHDR_Auto.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533274/94130d4e-1fe7-e61e-84d0-0eb50fa1498a.jpeg)

公式ページから直接購入。20日ほどで届きました。2019.10 って書いてある。生産日？ 検査日？
![P_20191225_204855_vHDR_Auto.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/533274/01c7f9a1-a031-329f-96af-5ed501f53293.jpeg)

ちなみに Beetle BLE なるものもあるようです。このサイズ感でBLE付きは面白いかもしれませんね。

https://www.dfrobot.com/product-1259.html


さて何作ろう（決めてないんかい！ > 自分）