OmniAICreator/Qiita-1.07M huggingface dataset:
Slackのワークフロービルダーでメンバを褒める仕組みを作ってみた

これは[ディップ Advent Calendar 2019](https://qiita.com/advent-calendar/2019/dip-dev) の7日目の記事です。

# はじめに
[Slack](https://slack.com/)のワークフロービルダー機能を使って、メンバを褒める仕組みを作ってみたお話です。
以下のポイントを軸に、チーム内のコミュニケーションのカイゼンを目指しました。

1. 送り手の不安を解消すること。
    - 「リアクションがないとコメントを見てくれているか不安...」
    - 「お願いしたことはちゃんとやってくれたかな...」
    - 「過去のコメントについたリアクションをいちいち確認するのも地味に面倒くさい...」
2. 受け手のポジティブな感情を引き出すこと。
    - 「リアクションするのがちょっと楽しい！確認したらちゃんとリアクションしよう！」
    - 「些細なことでも褒めらるとちょっと嬉しい！積極的に対応しよう！」
3. 何より、なるべくサクッと実現できること。


# 背景
うちでは[Slack](https://slack.com/)をいろんなシーンで活用しています。
仕事や技術の話だけでなく、ちょっとした雑談も、アラート等さまざまなツールとの連携も...

ちょっとしたお願いなどをSlackで投げることも多いのですが、
そのコメントに対し「誰が」「いつ」対応してくれたかを把握するのに、ちょっと不便さを感じていました。

そんな折、2019年10月にSlackの「ワークフロービルダー」機能がリリースされ、
これを活用すればサクッと解決できるのでは？と思い、早速使ってみることにしました。


# やったこと
**Slackのワークフロービルダーの設定**

これだけです。コーディングなし。数分で完了！
より具体的な設定方法や事例は[公式](https://slackhq.com/intl-ja-jp-automate-tasks-in-slack-with-workflow-builder)にも載っているので、ここでは省略します。

今回おこなった具体的な設定は以下の通り。

- チームの会話用チャンネルで、
- 特定のリアクション(今回は`済`のカスタム絵文字)を押した時に、
- 「たいへんよくできました」と、スレッドに自動的にメッセージが送信される。

設定画面ではこんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50410/c725b844-3e2a-3d38-7b57-6e5a8d08c72e.png)


で、実際の活用例はこんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50410/0029f25a-f0bf-afd3-2d89-5179e17cbeb0.png)



# 何が嬉しいの？
作ったものはとてもシンプルなのですが、実際に使ってみてこんなメリットが実感できています。

1. リアクションを押したタイミングでメッセージが送信される(残る)ので、**いつリアクションしたかが分かる**
2. メッセージ内に`リアクションしたメンバー`を埋め込むことで、**誰がリアクションしたかが分かる**
3. スレッドにメッセージが送信されることで通知が受け取れ、**送り手がリアクションに気付きやすい**
4. メンション付きでメッセージが送信されるので、**自分宛に褒めてもらえた受け手はちょっと嬉しい気持ちになる**



# まとめ
Slackの便利機能が増えていくのは嬉しいし、利用してカイゼンしていくのは楽しい！

用意されているテンプレートも活用したいと思いつつ、未着手...
他にもアイデアや活用事例があればぜひコメントで教えてください!


ちなみに、この機能は一度リアクションを外してもう一度付けると、再び褒めてもらえます。
何度もやると何度もメッセージが送られて、それはそれでちょっとウザいのが玉に瑕...笑
NEMの十八番、アグリゲートトランザクションについて

NEMは他のブロックチェーンプラットフォームと比べて、比較的機能が洗練されている印象を持っています。（僕だけ？笑）

その中でも、アグリゲートトランザクションは機能性を高める上で、重要な要素の一つとなっています。最近、アグリゲートトランザクションについて触れる機会があったので、NEMに特化したアドベントカレンダーということもあり、アグリゲートトランザクションについてまとめてみようと思います。

# アグリゲートトランザクション
アグリゲートトランザクションは、複数のトランザクションをまとめて（アグリゲートして）一つのトランザクションとして処理してしまうタイプのトランザクションです。

イーサリアムだと、ERC20やERC721などの規格で発行したトークンを送信するのに、一つひとつトランザクションを処理しなければいけなかったので、ERC1155のような規格によって一括送信できるようになりました。NEMではこれが最初からついているイメージでしょうか。

## もしもトランザクションの中にエラーがあったら？

アグリゲートトランザクションは、複数のトランザクションをまとめます。そのため、まとめた中にエラーが存在したまま実行されると中途半端な状態で実行されてしまいます。それでは困るので、アグリゲートトランザクションでは、関係するトランザクションにエラーが存在していると、アグリゲートトランザクション自体を失敗（破棄）します。このようにしてアトミック性を維持しています。

# アグリゲートボンディッド

アグリゲートトランザクションは、複数のトランザクションを内包するトランザクションですが、そのトランザクションの中に相手方の署名が必要なものが含まれている可能性があります。その時には、アグリゲートボンディットと呼ばれます。

例えば、送信した相手に別の相手へモザイクの転送を要求したい時やトランザクションの順番を指定したい時などには、このタイプのトランザクションが実施されます。

また、この際には、LockFundsTransactionが発信されます。これは、ネットワークに対して担保となる資金を預けておき、アグリゲートトランザクション自体が成功すると預けた資産が戻ってくるという仕組みになっています。これはスパムを予防するという意味で有効だとみられています。

# モザイクの使い方はアイデア次第！

NEMのモザイクはかなり自由の効くもので、アイデアの限りさまざまな活用ができるようになっています。そのため、アグリゲートトランザクションを利用することで、より自由度を高めることができていると思います。

NEMはcatapultを経て今後ともより使い勝手のよくなるブロックチェーンプラットフォームになると思うので、ぜひ触ってみてはいかがでしょうか？
Reactで作る汎用的なシンプルアコーディオン

## 背景

クリックしたら開いて閉じるというただ単純な実装が、色々なコンポーネントに散乱しだしていたので、汎用的にその機能を使えるコンポーネントを実装してみました。

## 実装

```react
import React, { useState } from 'react'

const SimpleAccordion = ({
  defaultShow = false,
  onOpen,
  onClose,
  ...props
}) => {
  const [show, setShow] = useState(defaultShow)
  const toggle = () => {
    const toggled = !show
    setShow(toggled)
    toggled ? onOpen && onOpen() : onClose && onClose()
  }
  const display = show ? 'block' : 'none'
  return (
    <React.Fragment>
      {props.children.map((child, idx) =>
        child.props.name === 'SimpleAccordionSummary' ? (
          <div key={idx} onClick={toggle}>
            {child}
          </div>
        ) : child.props.name === 'SimpleAccordionDetails' ? (
          <div key={idx} style={{ display }}>
            {child}
          </div>
        ) : null
      )}
    </React.Fragment>
  )
}

const SimpleAccordionSummary = ({ children }) => (
  <React.Fragment>{children}</React.Fragment>
)

const SimpleAccordionDetails = ({ children }) => (
  <React.Fragment>{children}</React.Fragment>
)

SimpleAccordionSummary.defaultProps = {
  name: 'SimpleAccordionSummary'
}

SimpleAccordionDetails.defaultProps = {
  name: 'SimpleAccordionDetails'
}

export { SimpleAccordion, SimpleAccordionSummary, SimpleAccordionDetails }
```

## 実用例

```react
const Sample = () => (
  <React.Fragment>
    <SimpleAccordion>
      <SimpleAccordionSummary>
        <p>概要</p> {/* ここをクリックすると開いたり閉じたりする */}
      </SimpleAccordionSummary>
      <SimpleAccordionDetails>
        <p>詳細</p>
      </SimpleAccordionDetails>
    </SimpleAccordion>
  </React.Fragment>
)
```
【サルが書く】令和のクソアプリ作った

わきゃ

[クソアプリ Advent Calendar 2019](https://qiita.com/advent-calendar/2019/kuso-app) の5日目です。

今年、平成が終わり、2019年5月1日から新元号「令和」が始まりました。

今年を締めくくる12月には令和のクソアプリを作るしか無いねー。
私はこう考えました。

# 令和(れいわ)を記念して0○(れいわ)のクソアプリを作ろう

![output.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177293/1b62ccc5-0c80-a207-24a2-630f9a934e9e.png)

令和と聞いて、0(零)と○(輪)って似ているよな〜
それを見分けるアプリケーション作ったら令和味があるな〜
そんな考えから0と○を見分けようと思います〜

## できた

<img width="1440" alt="スクリーンショット 2019-12-05 3.08.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177293/77200d39-c5bb-a9f0-00d8-4667ef7c7edd.png">

https://hajimasa.github.io/fuck_application/

無数の回転している"0"と"○"があるので、"0"を探して、クリックしてください。
alertで正解がどうかが表示されます！
それだけです!

技術面では、Next.jsを使用して、GitHubにリポジトリを作り、GitHub actionsでGitHub Pagesに公開をしています。
Next.jsを初めて使ったということと、CIとかの構築が楽しくなっちゃって、肝心のアプリケーションのほうがクソになったのもクソアプリっぽいですね!

## "0"と"○"が似ているフォントがなくて困った
動作推奨環境はMacOS **"のみ"** になります。
その理由としては、このアプリを作成するにあたって、"0"と"○"のフォントが似ているフォントを探す必要がありました。
探した結果、MacOSに標準で使われている **"Wawati TC"** が一番似ているのではないかとという結論になっています。
https://support.apple.com/ja-jp/HT206872

ちなみに"0"と"○"のフォントが似ているかどうかの比較は[wordmark](https://wordmark.it/)を使用しました。
自分で設定した任意の文字で比較できるのでとても便利でした。
<img width="269" alt="スクリーンショット 2019-12-05 3.30.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177293/15ef2d7b-b34f-6208-f83e-4ef88c77aaf7.png">

また、その他端末にできるだけ対応するため、[googole web fonts](https://fonts.google.com/)で"0"と"○"が似ているフォントを探しました。その中で **"M PLUS 1p"** を選択しました。
<img width="431" alt="スクリーンショット 2019-12-05 3.32.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/177293/1d6d7abd-8961-2167-1065-9500eda9d843.png">

## 令和初のまとめ

とにかくNext.jsが便利で、サッとアプリケーションを作ることができた、という印象がとても強かったです。
また、GitHub actionsとGitHub Pagesもめっちゃ便利。
モックアップ作る時にも重宝しそうです！

最終的には自分は何をしているのだろうという、なんとも言えない感情に襲われましたが、令和パワーで乗り切りました。

それでは次の元号で会いましょう。 **おつか令和。**

## 参考文献
React Next アプリを GitHub Actions で GitHub Pages にデプロイ
https://qiita.com/peaceiris/items/9c569125b25fc090c515

Next.js 公式ドキュメント日本語翻訳プロジェクト
https://nextjs-docs-ja.netlify.com/

CSS で回転させる方法
https://hirashimatakumi.com/blog/4816.html
[ Android ] ブロードキャストでIntentを送受信する

今回はAndroidでブロードキャストの送受信する方法について記す。

##目的
私が目的とするプログラムはAsyncTaskを継承したクラスからブロードキャストを送信し、メインアクテビティでそれを受信するプログラムである。

##必要なクラス
ブロードキャストはアクティビティやサービスクラスから送信できる。
一方受信するにはBroadcastReceiverを継承したクラスが必要である。

##実装

###登録
まずBroadcastReceiverを継承したクラス（MyReciever）をマニフェストに登録しなければならないので、以下を追記する。このクラスは一クラスとして定義してもよいが、インナークラスとして定義することが多いらしい。本記事では、受信クラス（メインアクティビティ）内で定義している。またアクション名も定義しなければならない。本記事では”testとしている。”

~~~xml
<application>
<receiver android:name=".MainActivity$MyReceiver">
    <intent-filter>
        <action android:name="test" />
    </intent-filter>
</receiver>
</application>
~~~

###送信側
送信にはIntentを使う。アクション名を使ってIntentを生成し、そこに送信したい内容を詰め、送信メソッドで送る。

~~~java
Intent intent = new Intent("test");
intent.putExtra("ブロードキャストテスト", "OK");
applicationCommon.sendBroadcast(intent);
~~~

###受信側
「登録」で述べたように、MyRecieverをMainActivityのインナークラスとして定義する。
このインナークラスは、引数なしのコンストラクタを持てないので、static修飾する必要がある。気を付けて頂きたい。
ブロードキャストが送信されると、マニフェストに登録されたレシーバクラスのonReceive()が動く。
そのメソッド内に行いたい処理を書けばよい。

~~~java
MainActivity {
	onCreate(){

	}

	public static MyReciever extends BroadcastReceiver {
		@Override
    		public void onReceive(Context context, Intent intent) {
                    //Intentから値を取得する
		}
	}
}
~~~


##参考URL
http://mitoroid.com/category/android/android_broadcast_receiver.php
【React】マウント時に自動でfocusあてるhooks

```tsx:useAutoFocus.ts

import * as React from 'react';

export default function useAutoFocus<RefType extends HTMLElement>() {
  const inputRef = React.useRef<RefType>(null);

  React.useEffect(() => {
    const node = inputRef.current;
    if (node) {
      node.focus();
    }
  }, []);

  return inputRef;
}
```

使う側

```tsx
function Hoge(props: Props) {
  const [code, setCode] = React.useState('');

  const inputRef = useAutoFocus<HTMLInputElement>();

  return (
    <TextInput
      value={code}
      onChange={(e) => setCode(e.target.value)}
      ref={inputRef}
    />
  );
}
```
モンティホール問題

#前書き
モンティホール問題というのをこないだ知ったので，実際にプログラムで解いてみた.

#Monty hole problem
確率に関する問題，例題は以下の通り

- プレイヤーの前には3枚の扉があり一枚にはアタリである車が，残り二枚にはハズレであるヤギがいる．
- プレイヤーは一つ扉を選ぶ．
- すると出題者がプレイヤーが選んでいない二枚の扉の中からハズレの扉を一枚開いて見せる．
- 最後にプレイヤーはそれを見てから，先ほど選んだ扉をもう一枚の扉に変えるかどうか決めることができる．

この問題では最後に二枚から一枚を選んでいるため一見当たる確率が50%に見えるが，実は選択する扉を変えると当たる確率が66%になる．

以下C言語による実装

```monty.c
#include <stdio.h>
#include <stdlib.h>
#include <time.h>
#define coc 1 //選択を変えるか否か

void main(){
    int car, choise, sheep;
    int cnt=0, num=10000;
    srand((unsigned)time(NULL));

    for(int i=0; i<num; i++){
        car = rand()%3; //当たりを決める,ドアは0,1,2の三枚
        choise = rand()%3; //一回目の選択する
        if (choise != car) sheep = ((car+1) ^ (choise+1)) -1; //選択がハズレなら出題者が見せるハズレの扉は自ずと決まる（排他的論理和）
        else if((rand()%2+1)==1) sheep = (car+1)%3; //1/2の確率でchoiseの一つ次か一つ前かが決まる
        else sheep = (car+2)%3;

        if(coc==1){ //選択を変える場合なら一回目の選択とハズレの排他的論理和を取る
            choise = ((sheep+1) ^ (choise+1)) -1;
        }

        if(choise == car){ //統計
            cnt++;
        }
    }

    printf("当たった確率:%.1f%%", (double)cnt/num*100);
}
```


正直簡単だが，個人的に面白かったのは
すでに二つの扉の値が与えられており，あと一つの扉の値が欲しい場合にXORを使うところ．
もちろん高級なライブラリとかを使えばこうしなくても良いのだろうが．．．
プルリクエストって何？

####Pull-Request（プルリクエスト）とは？
自分のローカルブランチで行った作業を別の人に確認（ソースレビュー）してもらう為の機能になります。
個人的に優れていると思う点は以下の2点になります。
1. ソースの改変が一目でわかる
2. 各コードに対してのコメントが入れられる

####Pull-Requestの操作方法
- ローカルブランチの作業をコミットする 

```console
$ git checkout feature/add-function
$ git add -A
$ git commit -m"修正内容"
```
- リモートブランチへプッシュする

```console
$ git push origin feature/add-function
```
- プルリクエストを行う

gitHubのリポジトリ画面より「Pull requests」タブをクリックします。
Pull requests画面より「New pull request」（赤枠）をボタンを押下します。
<img width="1086" alt="スクリーンショット 2019-12-04 16.03.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67968/ebf7fb08-d3f9-227a-a6b7-f860f6d26423.png">

- 対象のブランチを選択する

左（base）にマージするブランチを指定します。
右（compare）に作業分のブランチを指定します。
<img width="1026" alt="スクリーンショット 2019-12-04 16.12.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67968/2ce877fe-f2d6-39fc-f20a-de571322f3fc.png">

- コメントを入力してプルリクする

タイトルとコメントを入力して「Create pull request」ボタンを押します。
<img width="758" alt="スクリーンショット 2019-12-04 16.27.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67968/1dd67d66-6727-7265-0b00-25b8ae6ea516.png">

####まとめ
今まで使用したことがなかった為、自分のメモ用としてまとめてみました。
私もこれを機にプルリクエストを使っていきたいと考えています。

####参考サイト
[プルリクエストとは？｜サルでもわかるGit入門【プロジェクト管理ツールBacklog】](https://backlog.com/ja/git-tutorial/pull-request/01/)
[チーム開発を変える「GitHub」とは？〜Pull Requestの使い方〜](https://seleck.cc/635)
[ぼくが実際に運用していたGitブランチモデルについて](https://havelog.ayumusato.com/develop/git/e513-git_branch_model.html)
bootstrap4での便利なクラス

アプリケーション作成中に色々なbootstrap4のクラスを使わせていただいたので自分なりのまとめです。
といっても、アプリの中で使わせていただいたものに限定しています。
今後、項目を増やしていく予定です。

## 注意
- bootstrap4のみのメモとなりますのでbootstrap3で排除されたクラスについては記述しません。

- フロントは基本的にhamlで記述しているのでhamlの方式で書かせていただきます。
HTMLにする場合は、

```sample.html.haml
.sample.d-flex.align-items-center
```

```sample.html
<div class="sample d-flex align-items-center"></div>
```
のように「.」ではなく、スペースで離して記述してください。

## ブレークポイント
bootstrap4のグリッドシステムのブレークポイントは

|デバイスの幅|極小<br>縦モバイルサイズ<br><576px|小<br>横モバイルサイズ<br>≥576px|中<br>タブレットサイズ<br>≥768px|大<br>デスクトップサイズ<br>≥992px|特大<br>大画面サイズ<br>≥1200px|
|:--:|:--:|:--:|:--:|:--:|:--:|
|クラス名|.col-|.col-sm-|.col-md-|.col-lg-|.col-xl-|
というように別れていますが、例えば、下に記述しているような上下中央寄せのクラスを極小サイズだけには適用させたくない時は

```sample.html.haml
.sample.d-md-flex.align-items-center // 元々はd-flex(全サイズ適用)をd-md-flexにして小サイズ以上に適用させている
```
のようにクラス名の中にブレークポイントの記述を組み込めばだいたいなんとかなります。

## 1. 上下中央寄せ
```sample.html.haml
.sample.d-flex.align-items-center // .d-flex.align-items-centerで上下中央寄せ
```
この場合は、sampleクラス内の要素を上下中央寄せ

## 2. 左右中央寄せ
```sample.html.haml
.sample.mx-auto
```
sampleクラス内の要素を左右中央寄せ

## 3-1. 左寄せ(d-flex)
```sample.html.haml
.sample.d-flex
  .box1
    hako1
  .box2
    hako2
```
css3から使えるflexboxプロパティをクラス指定で使えるようになっている。
親要素であるsampleクラスにd-flexを記述するだけで子要素のbox1・box2クラスが自動的に左寄せになる。
d-flexはこれ以外にも様々な効果があるので[このサイト](https://shared-blog.kddi-web.com/webinfo/bootstrap4/flexbox/)も参考にしてみてください。

## 3-2. 左寄せ(float-left)
```sample.html.haml
.sample.float-left
```
cssでもおなじみのfloatで、こちらは要素単体に使うようなイメージでしょうか。

## 4. 空白の挿入
```sample.html.haml
.sample1.col-4
  sample1
.sample2.col-4.offset-4
  sample2
```
この場合、sample2の左に4カラム分の空白ができます。
![](https://gyazo.com/318ebebdad22c605c34f617ee2685f20.png)

## 5. 表示・非表示
```sample.html.haml
.sample1
  sample1
.sample2.d-none.d-md-block
  sample2
.sample3
  sample3
```
d-◯◯で表示・非表示の指定ができます。
sample2は、極小~小サイズでは非表示で、中サイズ以上では表示させています。

|極小~小サイズ|中サイズ以上|
|:--:|:--:|
|![](https://gyazo.com/1c60d1f66184e542d6eea417f89007ed.png)|![](https://gyazo.com/dd564cb79e7292de9dcb1cb8687da362.png)|


## 参考サイト
[上下中央寄せ(上寄せ・下寄せあり)](http://clue-design.com/bootstrap4/bootstrap-jyouge-tyuuou)
[左右中央寄せ(左寄せ・右寄せあり)](http://clue-design.com/bootstrap4/bootstrap4-block-left-right-center)
[d-flex](https://shared-blog.kddi-web.com/webinfo/bootstrap4/flexbox/)
[空白の挿入](https://webnetamemo.com/coding/bootstrap4/201902227791)
[表示・非表示](https://www.junk-works.science/display-control-bootstrap4/)
SQLSTATE[HY000]: General error: 1005 Can't create table 'hoge.#sql-935_2e' (errno: 150) のエラーが出たときの対処法

<h2>問題</h2>
migration実行時に
```SQLSTATE[HY000]: General error: 1005 Can't create table 'hoge.#sql-935_2e' (errno: 150) (SQL: alter table `m_answer_options` add constraint `m_answer_options_question_id_foreign` foreign key (`question_id`) references `m_questions` (`id`))```
のエラーが出た。

<h2>原因</h2>
外部キーを設定するときに、参照先のテーブルがBIGINT、参照元がINTになっている。

(例)
【参照先のマイグレーションファイル】
yyyy_mm_dd_061000_create_m_questions_table.php
`$table->BigIncrements('id');`

【参照元のマイグレーションファイル】
yyyy_mm_dd_061032_create_m_answer_options_table.php
`$table->foreign('question_id')->references('id')->on('m_questions');`
 
<h2>対応方法</h2>
参照先テーブルを作成するマイグレーションファイル(yyyy_mm_dd_061000_create_m_questions_table.php)のbigIncrementsをincrementsに変更した。

(例)
【修正前】
$table->BigIncrements('id');

【修正後】
$table->increments('id');

<h2>参考ページ</h2>
https://github.com/laravel/framework/issues/28793
条件によってテキストが変わるコンポーネントを分割して共通スタイルを適用する

こちらは、[弁護士ドットコム Advent Calendar 2019 - Qiita](https://qiita.com/advent-calendar/2019/bengo4com)  の 21 日目の記事です。

## 要望
条件によって中身が変わるからコンポーネントは分けたいけど、スタイルは共通化したい。
JS によるロジックは特にない。

## 具体的なケース
ユーザーの権限によってテキストが変わるコンポーネント。

共通のスタイルを使用したいのですが、一つのコンポーネントにまとめようとすると `v-if` の嵐になってしまい、可読性がかなり落ちてしまいます。

```html:イメージ
<p v-if="condition" class="style1">◯◯権限を持っているので、☓☓が出来ます。</p>
<p v-else class="style1">◯◯権限を持っていないので、☓☓が出来ません。</p>

<p v-if="condition" class="style2">△△権限を持っているので、□□が出来ます。</p>
<p v-else class="style2">ただし△△権限を持っていないので、□□が出来ません。</p>

<p class="style3">どのユーザーも☆☆は出来ます。</p> <!-- どの権限でも同じ -->
```

## 解決策
条件ごとにコンポーネントを分け、条件分岐・共通スタイル定義を親コンポーネントで行います。

スタイルを共通化させると、`v-if` をコンポーネントの切り替えの 1 つだけにできるので可読性が上がります。

### 実装
親コンポーネントにスタイルを持たせて、条件によって子コンポーネントを切り替えるようにします。

```vue:親コンポーネント
<template>
  <div class="wrapper">
    <component :is="componentName" v-bind="propData" />
  </div>
</template>

<script>
import Component1 from './Component1.vue'
import Component2 from './Component2.vue'

export default {
  components: {
    Component1,
    Component2
  },
  props: {
    condition: {
      type: String,
      required: true
    },
    username: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      propData: {
        username: this.username
      }
    }
  },
  computed: {
    componentName() {
      switch (this.condition) {
        case 'cond1':
          return Component1
        case 'cond2':
          return Component2
        default:
          return null
      }
    }
  }
}
</script>

<style scoped>
.wrapper >>> .style1 {
  font-size: 20px;
}
.wrapper >>> .style2 {
  font-size: 16px;
}
.wrapper >>> .style3 {
  font-size: 16px;
  font-weight: bold;
}
</style>
```

```vue:Component1.vue
<template>
  <div>
    <h1>{{ username }}さん</h1>
    <p class="style1">閲覧権限を持っているので、プロパティの閲覧が出来ます。</p>
    <p class="style2">ただし編集権限を持っていないので、プロパティの編集が出来ません。</p>
    <p class="style3">どのユーザーもログインは出来ます。</p>
  </div>
</template>

<script>
export default {
  props: {
    username: {
      type: String,
      required: true
    }
  }
}
</script>
```

```vue:Component2.vue
<template>
  <div>
    <h1>{{ username }}さん</h1>
    <p class="style1">閲覧権限を持っているので、プロパティの閲覧が出来ます。</p>
    <p class="style2">編集権限を持っているので、プロパティの編集が出来ます。</p>
    <p class="style3">どのユーザーもログインは出来ます。</p>
  </div>
</template>

<script>
export default {
  props: {
    username: {
      type: String,
      required: true
    }
  }
}
</script>
```

## 注意
`>>>`（ディープセレクタ）は子孫要素すべてを対象とするので、scoped にしているからといって同じクラス名を使っているとスタイルがあたってしまいます。
コンポーネント名を prefix として付ける、BEM などの命名規則を適用する、などの対策が必要です。

また、SCSS 等を使用している場合は、`>>>` ではなく `/deep/` を使用する必要があります。

## 他の選択肢
### CSS を外部ファイル化して `@import` で読み込む
HTML, CSS, JavaScript が一緒に管理できる SFC の利点が消えてしまうので見送りました。
「全く違う場所で利用するコンポーネントだけどスタイルは共通化させたい」というときは Minxin 的に使えるかもしれません。

### 共通化しない
個々のコンポーネントとして取り扱えたほうがいいことが往々にしてあるので、選択肢としてはありだと思います。
今回は、共通に定義したスタイルを片方だけ変更するということが基本的にないことがわかっていたので、共通化したほうが後々楽だと判断しました。

## あとがき
自分が実装したケースではこのやり方がフィットしましたが、子コンポーネント側のコードが二重管理になってしまうので、ケースごとに検討することが必要だと思います。

他に同じような悩みを抱えている人の糧になれば幸いです。

## 参考
* https://qiita.com/resessh/items/b618e77fbe7649be03a6
* https://teratail.com/questions/176202
Windows で Textbringer-presentation を使いたい

## 概要
Ruby で作られたテキストエディタ Textbringer (<https://github.com/shugo/textbringer>)にはプレゼンテーションモード(<https://github.com/shugo/textbringer-presentation>)があります。これを Windowsで使いたいと思います。

## 環境

Windows と言っても Windows10 で WSL を使うのであれば簡単です。以下の環境で行います。

* Windows 10 Home 64bit バージョン 1903
* WSL（Windows Subsystem for Linux）を利用
* Ubuntu 18.04 LTS
* WSLtty
* rbenv
* ruby 2.6.5p114 (2019-10-01 revision 67812) [x86_64-linux] 

## Textbringer のインストール

<https://qiita.com/kurod1492/items/c759c1533ae98d937d95>の記事に書いていますのでご覧ください。

## Textbringer-presentation のインストール

gem でインストールすることができます。

`$ gem install textbringer-presentation`

textbringer で markdown ファイルを開き `M-x presentation` を実行すればプレゼンテーションを開始することができます。
q を押すとプレゼンテーションを終了します。

## mlterm のインストール

WSLtty では画像を表示することができませんでした。mlterm を使えば表示できたので、mlterm を使うことにしました。
apt でインストールします。

`$ sudo apt install mlterm`

mlterm で使うときの設定が Textbringer の README(<https://github.com/shugo/textbringer/blob/master/README.md>)に書かれていますのでそのようにします。

## libsixel、imagemagick のインストール

画像を表示するために libsixel と imagemagick が必要のようで、以下のようにパッケージでインストールします。

`sudo apt install imagemagick libsixel1 libsixel-bin`

これで画像を表示することができます。
以下の画像は mlterm で Textbringer の README の Screenshot のスライドを表示しているスクリーンショットです。

![wsl-mlterm-textbringer-presentation-fig.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219745/a4c561f0-00d0-6ed6-ef9b-a7bcab91a414.png)
git初心者から見たmergeして衝突(CONFLICT)したときの対処法

# ブログを書くにあたって
Qiita初投稿でブログを書くのもあまり経験がございません。
この記事を読むときはどうかお温かい目で読んでくださいませm(__)m
~~あと文章を書く力もございません~~

# 実行環境
### コンソール 
- cygwin 3.1.0

### エディタ 
- sublime Text 3 
- visual studio Code
(バージョンはまた今度調べます)


# mergeしてみた
`git merge origin`とコマンド打つと以下のような実行画面になった。
<img width="301" alt="merge.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545092/3e6f7491-23d9-967a-cb91-cdaacd5c1533.png">
小さくて読みづらいが、`CINFLICT`の文字が見える

# 衝突(CONFLICT)したファイルを開いてみる
以下のキャプチャは、衝突したファイルの中身である。
<img width="478" alt="HEAD.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545092/8ddffe44-4bb5-21b9-717b-3bc33b71f1f7.png">
<img width="306" alt="origin.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545092/3df05831-e47d-3e35-f4a8-de3b80a363df.png">
すると、ソースコードの所々にある`<<<<<<< HEAD` (15行目)や `=======` (46行目)や`>>>>>>> origin` (69行目) があるのがみてとれる。
これを直さずにそのまま放置するとエラーを吐くので、早急に対処する必要がある。

# <<<<<<< HEAD や ======= や >>>>>>> origin の意味するものとは？
調べてみたところ、`<<<<<<< HEAD` と `=======` の間の部分(16行目～45行目)が作業ブランチの(自分が変更した)内容で
`=======` や `>>>>>>> origin` の間の部分(46行目～69行目)が他の人が変更した内容だということがなんとなくわかった。
`<<<<<<< HEAD` と `=======` の間の部分を消して `=======` や `>>>>>>> origin` の間の部分は残しておくことにした。

# 備考

この記事は他の人が読むほどの質の高い記事ではないと自分では思っています。
私が得た知識をアウトプットする練習のために書きました。

# 参考
- https://ja.wikipedia.org/wiki/%E3%83%9E%E3%83%BC%E3%82%B8_(%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E7%AE%A1%E7%90%86%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0)#3.E3.82.A6.E3.82.A7.E3.82.A4.E3.83.9E.E3.83.BC.E3.82.B8
- https://techacademy.jp/magazine/10264
- https://qiita.com/te2u/items/c23f82ec84cf65564554
DB( データベース) 設計をしよう！！

#はじめに

この記事は、2019/11/1からプログラミング学習を始めた学生がプロのプログラマーになるまでのアウトプットする為の書き込みの場である。

#DB設計とは？
作成するサービスやシステムに必要な情報をどのようにデータベースで管理するかを決める作業です
初めにDB設計をする事により作業の効率化にもつながります

#データベースを構成する要素
- サービスで扱う概念（エンティティ）
- エンティティの属性
- エンティティ同士の関係性（リレーション）

##サービスで扱う概念（エンティティ）
エンティティとは、サービスで扱う情報を指します
例えば、twitterなどのSNSの場合、「ユーザー」、「投稿内容」、「コメント」がそれにあたります

##エンティティの属性
エンティティを細かくしたもの、「ユーザー」の場合、「名前」、「メールアドレス」、「パスワード」、「プロフィール」が属性になります
属性は、エンティティが実際に持つ情報である

##エンティティ同士の関係性（リレーション）
エンティティとエンティティとの間に存在する関係性のことです
例えば、投稿内容には、その投稿を行なったユーザーがいます。こういった場合ユーザーと投稿内容の2つのエンティティには関係性があります

#データベース設計の手順
1. データベースで管理するデータ（エンティティ）を決める
2. それぞれのデータの持つ属性を決める
3. エンティティ同士の関係性を決める（リレーション）
4. データを実際にデータベースのテーブルとして定義する

##感想

２日間投稿する事ができず毎日投稿することのきビシさを知った
また、毎日投稿を長年続けて居る方々の凄さを知った
これからは、毎日アウトプットしていきます


##終わりに

もっとこうした方が良いよなどご指摘頂けると幸いです
情報システム担当とはなにか

はじめに
---
[Leverages（レバレジーズ）Advent Calendar 2019](https://qiita.com/advent-calendar/2019/leverages) 9日目担当の [@db666](https://qiita.com/db666) です。
Advent Calendarって聞いて、クリスマスを楽しみにお菓子が入ってたりするカレンダーで何するの？
とエンジニア文化を知りませんでした。（ちなみに半年ほど前までエンジニアがいない会社にいました...今は飛び交う単語がも全く違うｗ）

で、こういうの書いたことないしどうしようかな...と考えた末、いったい情シスって何なの？
というテーマで自社内の情シスの実情を書きたいと思います。

ちなみに私は広報デスクをやっていたところ、ひょんなことから入社2か月ほどで情シスの人になりました。
その後、情シスの人として転職を2回。現在に至ります。

情シスのイメージ
---
社内で発生したシステム周りの問題を解決する縁の下の力持ち
→自社の情シスってなんか楽そう、好きなことできそう

新卒で入社したLSI設計会社でレイアウト設計を行っていた私はまさしくそんなイメージを持っていました。
PC設定して、ライセンス管理以外、なにかドカンとイベントがない限り暇そうって。

情シスの実情
---
1. **情シスって他部署と一緒になっていることが多い**
    ちなみに経理、総務、法務、人事と何かしらの管理部門の部署と一括りにされてきました。
    
2. **自社の情シスは怒鳴られる**
    自分が悪くないのに怒られることは多々あります。
    システムがベンダーのミスで止まると社内でひたすら謝るのは情シス。
    「PCが遅い！」と毎日シャットダウンせずに更新が蓄積。原因は自分なのに理不尽に怒鳴られたこともあります。
    社内の人間だから遠慮なく厳しく言えますからね～。
    
3. **関係ない仕事も降ってくる可能性大**
    人手不足だからという理由で組織上経理だったため、経理の仕事をさせられたり。
    固定電話の管理をさせられたり、コーポレートサイトの修正や更新をしたり。
    なんでもやりました。
    
4. **神様になれる**
    エンジニアがいない会社では神様
    トイストーリーのエイリアンがクレーンを崇めるように”神様””先生”と相談してくる

5. **感謝される**
    感謝される機会が多いと思います。
    ちょっと問題を解決してあげると「ありがとう」と感謝されます。

そして、トラブルが起きない環境づくりって大変！！！
これは日々感じます。

前職にて、イメージと違うと泣きながらやめていく派遣さんもいました。。。
実際は毎日地味な作業が多かったり、なんでも「（やってくれるよね前提）できる？」って　聞かれますしね。

   
情シスは金食い虫
---
はっきり言うとお金がかかることばかり。
しかも、お金を生み出す部署ではないのに定期的に保証終了などで高額な費用が掛かります。

近年、攻めの情シスという記事や講演を見かけますがなかなか社内稟議がうまい事いかないのが実情。
エンジニアのいない企業では、上司に説明してもなかなか理解してもらえないことが多々ではないでしょうか。
お金の部分ばかり突かれることが多いと思います。

    
情シスやっていく上に大事ものは
---
自社の情シスとして感じる大事なことはコミュニケーション。
技術的なものも大事だが、社内外上下関係なく人と関わります。

- **ヘルプデスク業務**
    
    「なんか動かない」等もやっとした表現で言われます
  どうしたのかな～と話を聞いてあげましょう。
コンセントが抜けていただけの事案でも「そういうことありますよね、気を付けてくださいね」と。
ふざけんな！と思っても優しく接しましょう。心象は大事！
優しくしすぎると図に乗ってなんでも頼んでくるので程よい距離感も忘れずに。

- **システム導入などのお金がかかる話**
    周りを巻き込んで味方を増やしましょう。さりげなく誘導して仲間に。
どこの会社にも社内インフルエンサーがいるはず！インフルエンサーを囲い込んで流れを作るの大事。
会社のこれからも考えて動かなければならないことが多いので、会社の動きを把握し先を読むのも大切。

さいごに
---
情シスって楽そうだけどはっきり言って超面倒なことが多い！！！
技術を追うのも必要とされるし、色んな人にに理解してもらうように説明しなきゃいけない。どこの会社もそうだと思いますが自社の情シスは何でも屋。
これしかやりたくない！って人には向いていないと感じます。

でも、色んなことに携われるし、やる気があればいろんな経験ができて後に武器になる。
調整力が備われば、大きな致命的トラブル対応以外は自分でコントロールでき自分の時間を邪魔されることもありません。

情シスだけではなく、結構エンジニアってコミュニケーションって大事だと思います。
Advent Calendarを会話のネタに12月は過ごしてはいかがでしょうか。
form_forのselectタグでRequiredを適用させる

### やりたいこと
railsのフォームで`required: true`を記述すると、空の送信を防げる。
selectタグでも同様のことをしたい。

### やること
```:erb
<div>
  <label for="category">お問い合わせカテゴリ<br>(リストから選択してください。)</label>
  <%= f.select :category, [["弊社サービス・お見積りについて", 1], ["採用について", 2], ["その他", 3]], :include_blank => "選択してください ▼", :required => true %>
</div>
```

上記のコードだとなぜか`required`が効かない。

```:erb
<div>
  <label for="category">お問い合わせカテゴリ<br>(リストから選択してください。)</label>
  <%= f.select :category, [["弊社サービス・お見積りについて", 1], ["採用について", 2], ["その他", 3]], { :include_blank => "選択してください ▼" }, :required => true %>
</div>
```

上のコードだと`required`が効くようになる。
railsでのテーブルの作り方、カラム追加、カラムの型替えの方法

#はじめに
railsでのDBテーブルの作成方法、カラムの追加など一連のデータベース操作についてまとめます。

#railsでのテーブルの生成方法

テーブルを生成しましょう。
①テーブルのmigrationファイルを作成します。具体的な作成コマンドとしては以下になります。

```
$ rails g model モデル名 フィールド:型


※例えばpostモデルでnameカラム（string型）とuser_idカラム（integer型）を作成したい場合は以下になります。
$ rails g model Post name:string user_id:integer
```



②コマンドを打ち込むとmigrationファイルが新規で出来上がっているはずなのでそれを以下のコマンドで実行します。
実行後はdbサーバー上にpostsテーブルが出来上がります。

```
$ rails db:migrate
```


#カラム追加方法
既に作成したテーブルにカラムを追加したい場合は下記の手順で追加します。

①追加したい項目を下記のようにコマンド入力する。

```
rails g migration Addカラム名Toテーブル名 カラム名:データ型

# 例えば既にあるpostテーブルにcategoryカラム（integer型）を作成したい場合は以下になります。
rails g migration AddCategoryToPosts category:integer
```

②db/migrateフォルダにマイグレーションファイルが出来上がっていますので、確認、必要があれば追記してください。
下記ファイルにはhogehogeカラムを追記しています。

```
class AddCategoryToPosts  < ActiveRecord::Migration[5.2]
  def change
    add_column :posts, :category, :integer
    add_column :posts, :hogehoge, :text #追記
  end
end
```

③編集終わりましたら、以下のコマンドで実行します。
これでテーブルにカラムが追加されます。

```
$ rails db:migrate
```


#カラムの型の変換
既にあるテーブルのカラムの型を変えたいときは以下の手順で変更を行います。
カラム追加と似た手順となります。

①型変更したいカラムを下記のようにコマンド入力しmigrationファイルを作る。

```
$ rails g migration change_data_カラム名_to_テーブル名

# 例えばpostテーブルのhogehogeカラムを型変更したい場合は以下になります。
rails g migration change_data_hogehoge_to_posts
```

②db/migrateフォルダにマイグレーションファイルが出来上がっていますので、class内に以下のメソッドを追加してください。

```
def change
  change_column :posts, :hogehoge, :integer
end
```
③編集終わりましたら、以下のコマンドで実行します。
これでテーブルにカラムが追加されます。

```
$ rails db:migrate
```

#終わりに
この記事で誤っている箇所や追記したほうが良い点がありましたらコメント欄などでご指摘いただけますとありがたいです！
ActiveRecordと通常のsqlコマンドは書き方違うので勉強必要ですね・・
スクロールビュー

#動作環境



#コード

```

func scroll(){
        //スクロール処理
        scrollView = UIScrollView(frame: CGRect(origin: .zero, size: view.bounds.size))
        imageView = UIImageView(image: UIImage(named: name))
        scrollView.contentSize = imageView.bounds.size
        scrollView.addSubview(imageView)
        view.addSubview(scrollView)
    }
    func zoom(){
        //ズーム機能
        scrollView.minimumZoomScale = 0.005
        scrollView.maximumZoomScale = 50
        scrollView.delegate = self
    }
    
    
    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return imageView
    }

```

#github
[githubのリンク](https://github.com/tbskgm/ScrollViewZoomTouchView)
blueqatで2量子ビットの操作

## この記事に関して
ここではpythonライブラリのblueqatを用いて量子プログラミングを行っていこうと思います。
内容は公式の[チュートリアル](https://github.com/Blueqat/Blueqat-tutorials/tree/master/tutorial-ja)を元に作成しています。
今回は複数量子ビットの操作を説明していきます。

## 回路の作成
まずは2量子ビットの回路を作成してみましょう。
`Circuit()`の`()`に数を入れるとビット数を指定できます。[^1]
[^1]: 何も書かない場合はゲートを施しているところのみを自動的に調べます。
まずは何もゲートを入れずに観測してみます。

#### 実装

``` python:sample.ipynb
from blueqat import Circuit

c = Circuit(2)
c.m[:].run(shots=1000)

結果
Counter({'00': 1000})
```
よって 00 が観測されることがわかりました。

ベクトルを観測する場合

``` python:sample.ipynb
from blueqat import Circuit

c = Circuit(2)
c.run()

結果
array([1.+0.j, 0.+0.j, 0.+0.j, 0.+0.j])
```
ベクトルが $(1, 0, 0, 0)$ よりきちんと $\left|0\right>\otimes\left|0\right>$ が取れました。

## 複数ビットの量子ゲート
今回は 2 量子ビットのゲートを考えて見ます。
CX ゲートを施して見ましょう。
CX ゲートは1量子ビットが $\left|1\right>$ ならば、2量子ビット目にXゲートを施すものでしたね。

回路は以下のように書きます。

``` math
\begin{array}{cccccc}
\left|0\right>&-&-&*&-&- \\
\ & & &|& &  \\
\left|0\right>&-&-&\large{X}&-&-
\end{array}
```
0番目のビットを1番目に作用させているのがわかります。(0番目から始めます。)

CXゲートは回路に`.cx[a, b]`をつけるとできます。
`a`は $\left|1\right>$ を判別するビットの位置を、`b`は Xゲートを施すビットの位置を入れます。

#### 実装 1
上の例のように0番目のビットを見て1番目にXゲートを施してみます。
計算上は $CX\left|0\right>\otimes\left|0\right> = \left|0\right>\otimes\left|0\right>$ より 00 が100%観測されるはずです。
普通に値を観測する場合

``` python:sample.ipynb
from blueqat import Circuit

c = Circuit(2).cx[0, 1]
c.m[:].run(shots=1000)

結果
Counter({'00': 1000})
```
100%できちんと00が取れました。

ベクトルを観測する場合

``` python:sample.ipynb
from blueqat import Circuit

c = Circuit(2).cx[0, 1]
c.run()

結果
array([1.+0.j, 0.+0.j, 0.+0.j, 0.+0.j])
```
ベクトルが $(1, 0, 0, 0)$ よりきちんと $\left|0\right>\otimes\left|0\right>$ が取れました。

#### 実装 2
次は0番目のビットが $\left|1\right>$ のときを実装してみます。
計算上は $CX\left|1\right>\otimes\left|0\right> = \left|1\right>\otimes\left|1\right>$ より 11 が100%観測されるはずです。
1ビット目を $\left|1\right>$ にするので1番目にXゲートを施して反転させてからCXゲートを施します。

普通に値を観測する場合

``` python:sample.ipynb
from blueqat import Circuit

c = Circuit(2).x[0].cx[0, 1]
c.m[:].run(shots=1000)

結果
Counter({'11': 1000})
```
100%できちんと11が取れました。

ベクトルを観測する場合

``` python:sample.ipynb
from blueqat import Circuit

c = Circuit(2).x[0].cx[0, 1]
c.run()

結果
array([0.+0.j, 0.+0.j, 0.+0.j, 1.+0.j])
```
ベクトルが $(0, 0, 0, 1)$ よりきちんと $\left|1\right>\otimes\left|1\right>$ が取れました。

#### 実装 3
次は3量子ビット以上を実装してみます。
今回は4量子ビットの全てに Xゲートを施そうと思います。

計算上では
$X\left|0\right>\otimes X\left|0\right>\otimes X\left|0\right>\otimes X\left|0\right> = \left|1\right>\otimes\left|1\right>\otimes\left|1\right>\otimes\left|1\right>$ より 1111 が100%観測されるはずです。
状態ベクトルは長くなるので値の観測のみ実装します。

``` python:sample.ipynb
from blueqat import Circuit

c = Circuit(4).x[0].x[1].x[2].x[3]
c.m[:].run(shots=1000)

結果
Counter({'1111': 1000})
```
100%できちんと1111が取れました。

## まとめ
今回はblueqatを用いて複数量子ビットの回路の作成の仕方を説明しました。
次回は量子の重ね合わせを実装してみます。
p5.js　初めてやってみる人に読んでもらえたら嬉しいです

#はじめに
初めてp5.jsを始める方に向けて書いています。
p5.jsで最初に出てくる関数など紹介してきます。

##canvasの大きさや色
初めてp5のサイトを開くと、すでに画面の大きさやある程度までのコードが記入されて表示しています。
これを(▶︎)押して右の表示欄に表示させながらコードを書いていくことが出来るので、このサイトではHTMLやscriptの設定をせずにJavaScriptをどんどん書いていくことが出来ます。
下図のコード。。。

```mysketch.js
function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
}
```
’createCanvas’で文字通りキャンバスを生成しています。
windowWidthで横幅を設定、windowHeightで高さを設定しています。ここの文字は他にも習得する方法がたくさんあります。

![スクリーンショット 2019-10-04 0.11.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428245/b98fd987-0448-15ef-03f9-630b34b16a44.png)
widthの習得↑

![スクリーンショット 2019-10-04 0.11.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/428245/f020facd-e37a-c098-f9ce-a7a0b1475013.png)
heightの習得↑

上記の表にあるコードを自分のWEBサイト表示サイズに合わせて書き換えていくと良いです。
他にも収得方法はあり、下記のような記述にするとcanvasのサイズも自由自在です。

```mysketch.js
function setup() {
	createCanvas(800, 800);//800pxずつの正方形でcanvasが現れます。
	background(100);
}
```
数値で入力すると画面全体ではなく、一部表示も可能になるので用途はいろいろになります。

##backgroundの色指定
```mysketch.js
function setup(){
    createCanvas(windowWidth, windowHeight);
	background(100);//グレーが表示される
}
```
backgroundの色指定は、学生の頃に美術とかで習ったRGBやCMYK・HSBがありますが、p5も同じ方法で指定することが出来ます。
上記コード内に書かれているbackground(100);はRGBで指定されていて、このままだとグレーが表示されます。ここの数字をいろいろ調べて好きな色に変えることは可能なので、色彩のサイトで色を探して指定してもいいですし、無ければ自分でこの辺がこんな色かな？って考えながら入力しても楽しいと思います。
【参考サイト】
https://www.colordic.org/

ここまでがsetup()関数になります。

##描画する形はいろいろ
```sketvh.js
function draw() {
	ellipse(mouseX, mouseY, 20, 20);
}
```
次に出てくるのは、draw()関数です。
こちらは、canvasに描画出来るものを指定することが出来ます。
上記コード内ではellipse(円)が指定されていますが、この他にも三角や四角・直線にしたり、繋げたりしてスライムみたいな形を描画することも出来ます。
JavaScriptと同じようにコードを書くと自動で描画したり、マウスに付いてきて描画させるなど他にも沢山の描画方法が思いついたコードやググったりして指定することが出来ます。

p5のコードや参考のものはサイトを開いて検索できるようになっているので、他の人が書いているコードでわからないことがあってもrefarenceなどで調べて見るといいですよ。
【参考サイト】
https://p5js.org/reference/
https://developer.mozilla.org/ja/

##最後に
本当に初めてp5.jsをやってみようかなと思った方へ書いてみました。
ちょっとでも力になれたら幸いです。
p5.js以外でもJavaScriptに関連している〇〇.jsとかあるので、自分がやってみたいアニメーションのイメージと合うものをやっていくととても楽しいと思います。
最後までお読み頂きありがとうございました。
JLPT N5を取りました

過去2週間、何も書いていないのが残念

JLTPの勉強に時間を割きました。

私の夢は日本に住んで働くことなので、1月から日本語の勉強を始めました。

先週末、JLPT N5のためにメキシコシティに飛びました。

私は驚いた、試験を受けている人がたくさんいた。

私は良いことをしたと思いますし、うまくいけば合格点を得ることができます。幸運にもキットカットを購入しました。


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">きっと勝つ <a href="https://twitter.com/hashtag/JLPTN5?src=hash&amp;ref_src=twsrc%5Etfw">#JLPTN5</a> <a href="https://twitter.com/hashtag/JLPT2019?src=hash&amp;ref_src=twsrc%5Etfw">#JLPT2019</a> <a href="https://twitter.com/hashtag/jlpt?src=hash&amp;ref_src=twsrc%5Etfw">#jlpt</a> <a href="https://t.co/rEWlxIMRNK">pic.twitter.com/rEWlxIMRNK</a></p>&mdash; ダビッド トレス (@DabiddoKun) <a href="https://twitter.com/DabiddoKun/status/1201203131368931328?ref_src=twsrc%5Etfw">December 1, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



私はオンラインの学校の仲間に会う機会さえ得ました。全体としては素晴らしい経験でした。

しかし、N4試験は7月であるため、休む時間はありません。
つまり、私は勉強するのに6か月しかなく、12月にN3を準備するのに1年しかありません。

幸運を祈ります。
dem-bones のメモ


blendshape や pose list から skinning(linear blending skinning, LBS, いわゆる vertex skinning)を生成してくれるツール

https://github.com/electronicarts/dem-bones

とりあえず Alembic と FBX を optional にしてビルドしやすくした fork を作りました.

https://github.com/syoyo/dem-bones

## TODO

* [ ] .obj 連番 reader
* [ ] glTF reader/writer
* [ ] Maya で example pose を多数生成して, export するスクリプトを生成する.
* [ ] https://github.com/dgovil/MLDeform と比較する(Dense layer で機械学習ベース)
【Linux Nginx】Webサーバ初期設定で使うコマンド集

# ファイアウォールの設定



```bash

HTTP(TCPの80番ポートを空ける)を利用（現在の設定を変更して保存）
[user@host]$ sudo firewall-cmd --add-service http
[user@host]$ sudo firewall-cmd --add-service http --permanent
success

HTTPS(TCPの443番ポートを空ける)を利用（現在の設定を変更して保存）
[user@host]$ sudo firewall-cmd --add-service https
[user@host]$ sudo firewall-cmd --add-service https --permanent
success
```

# nginx導入

```

インストール
sudo yum install nginx
途中で以下の質問があるのでyと回答
Total download size: 4.3 M
Installed size: 14 M
Is this ok [y/d/N]: y

```

# nginx操作

```bash

開始
[user@host]$ sudo systemctl start nginx
終了
[user@host]$ sudo systemctl stop nginx
再起動
[user@host]$ sudo systemctl restart nginx
設定ファイル再読み込み
[user@host]$ sudo systemctl reload nginx
状態表示
[user@host]$ sudo systemctl status nginx -l

```

### nginx エラーログの場所

```
/var/log/nginx/error.log
```

### nginx 設定ファイル コメントアウト

シェルスクリプト同様「#」でコメントアウトが可能です。


# 参考
* https://qiita.com/ymgd-a/items/76ff33d226442fa2f0c9
Gmail振分け・携帯/PCメンテナンス

#必要最小限のセキュリティ
社内や友達向けの共有記事。
なお、iphone6sしか持ってないのでそれ以外の機種については詳しくはわかりません。あしからず。

##携帯のパスワードロック
携帯のパスワードロックは必ず設定しましょう！
指紋認証やtouch IDでもOKです。
**自分だけでなく、同僚、友達の個人情報も危険にさらされます！！**
社会人の責任として、必ずロックの設定をしましょう！

###iphoneの設定方法
https://support.apple.com/ja-jp/guide/iphone/iph14a867ae/ios

###androidの設定方法
https://support.google.com/android/answer/9079129?hl=ja

##変なメールは無視しましょう
だいたい日本語がおかしいのでわかりやすいのですが、眠い時とかは騙されやすいかも！
あとはSMS(ショートメッセージ)で来る場合もあるので注意！

apple、amazon、microsoft、楽天、佐川急便、日本郵便など。
巧妙に偽装された偽メールや、偽サイトが作られてます！

###あやしいメールの例
https://www.jc3.or.jp/topics/virusmail.html

####こんな件名のメールが来たら要注意！！！

```
* お客様のApple IDはロックされました。
* お客様のAmazon ID情報は不足か、正しくないです。
* アカウント情報を更新、確認してください。
* 【重要】楽天株式会社から緊急のご連絡
```

###あやしいSMSの例
https://www.jc3.or.jp/topics/smsphishing.html

####こんな感じのSMSが来たら要注意！！！

```
お客様宛に荷物をお届けしましたが、不在のため持ち帰りました。
下記よりご確認ください。http://***(謎のURL)
```

その他の手口についてもっと知りたい人は、こちらをご確認ください。
https://www.jc3.or.jp/info/heads-up.html

# メールの振分け
gmailの振分け設定をして、作業を早くしましょう！

###必要なもの
* ネット接続ができるパソコン
* ない場合は携帯から

###手順はこちら
https://blog.coubic.com/management/gmai/

#携帯の高速化設定
最新スマートフォンを使っている方、古い機種を使っている方。
色んな方がいると思いますが、初期設定のままだと仕事には必要ない機能がONになっている場合があります。
ぬるっとしたアニメーションや、透明化処理など。
これらの見た目に関する部分を犠牲にすることで、見た目は少々レベルが落ちてしまうけど体感速度が結構かわります。
やってみて「前の方がよかったな～」という場合は、逆の手順で元に戻せるので一度やってみましょう！
※iphone6sではきびきび動作するようになりました

###iphone編
※iOSバージョンや携帯の機種によっては、場所が違う場合があります！
　その場合は設定画面から検索！

* ソフトウェアアップデートは最新のものにしよう
* 設定>一般>アクセシビリティ>視差効果を減らすをオン
* メッセージのエフェクトを自動再生をオフにしても効果がある
* 設定>一般>アクセシビリティ>コントラストを上げる>透明度を下げるをオン
* siriを使ってないなら、設定>Siriと検索>検索の候補を無効化
* siriを使ってないなら、設定>Siriと検索>検索とSiriからの提案>オフ
* siri本体をオフ 設定>一般>機能制限>Siriと音声入力>オフ
* 重いアプリ(Facebookとかyoutubeとかゲーム)は再インストールすると早くなる時がある
* Bluetoothを使ってないなら、設定から完全オフにする
* 設定>一般>リセット>キーボードの変換学習をリセット>変換学習をリセット(キーボード遅いなら)
* 設定>サウンドと触覚>キーボードのクリック>オフ
* ブラウザの履歴消去>なにつかってるか知らんけど、Safariなら設定>Safari>下から上にスワイプして履歴を消す
* 位置情報サービスの見直し 設定>プライバシー>位置情報で個別にオフ
* 使ってないアプリは消そう
* 携帯の空き容量はある程度開けておこう⇒理想は4GB以上開けておこう

###Android編
Androidは持ってないので、以下を参考にしてください
https://blog.endstart.net/article/android-highspeed.html

##Windows編
以下の作業をしてみましょう(Macはわからないので、各自調べてみてください)

・ディスククリーンアップ
https://support.microsoft.com/ja-jp/help/4026616/windows-10-disk-cleanup

・ディスクデフラグ
https://support.microsoft.com/ja-jp/help/4026701/windows-defragment-your-windows-10-pc

それぞれどういう意味なの？というのは以下を参照
https://enjoy.sso.biglobe.ne.jp/archives/defrag_cleanup/

・いらないソフトのアンインストール
https://askpc.panasonic.co.jp/beginner/guide/ten07/7017.html
これなんやろ？というソフトがあれば、ソフトの名前で検索してみてください。
システム関係のやつならそのまま残しておいた方が賢明です。
Leaflet + Vue.js で 地図の表示位置を切り替えられるサンプルサイトを作ってみた

> この記事は、 [North Detail Advent Calendar 2019](https://qiita.com/advent-calendar/2019/northdetail) の4日目の記事です。

> 2020/04/02 追記
> 本記事は、NorthDetail ブログにも投稿しています。
> https://www.northdetail.co.jp/blog/441/

弊社は最近地図を扱う業務が増えたので、ここ数ヶ月ほど学習がてらに ["Leaflet"](https://leafletjs.com/) を使ってみてます。
もともと ["Vue.js"](https://jp.vuejs.org/index.html) でのサイト構築も多いので、両方を合わせるとどうなるか、というのを試してみたいと思います。

デモサイト: https://sample-leaflet-tacck.netlify.com/
ソースコード: https://github.com/tacck/sample-leaflet

## 画面でみると

こういう感じで表示されます。
<img width="630" alt="20191204_001.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10784/270a8ce7-94b9-7577-b521-83c807e36f56.png">

初回は **"位置情報提供の許可"** が求められるので、 **"許可"** の方を選択してください。
<img width="322" alt="20191204_003.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10784/fec4188d-9d7e-c6ab-1d0d-2a0f9a3cde5a.png">

「現在地」のボタンをクリックすると、ブラウザ経由で取得した位置情報の地点を地図上で表示します。(ここは弊社)
<img width="627" alt="20191204_002.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10784/30dfdc84-2b18-e265-8ca7-5a1db32d8ddd.png">

## 解説

Vue.js や Leaflet.js それぞれの詳しい扱い方は専用のサイトにお任せします。

ここでは、少し工夫したところを。

### 情報の更新

#### 現在地取得と反映

Mainコンポーネントの中に、 Tabコンポーネント(ボタンのある領域) と Mapコンポーネント(地図のある領域) を持つ形にしています。
Mapコンポーネントは、Mainコンポーネントから与えられた緯度経度を中心に地図を表示する(変更があれば更新する)だけ、という作りです。

緯度経度の変更されるタイミングは、次の二つになります。

* ボタンが押された場合
* ボタンが「現在地」の時にブラウザから与えられた位置情報が `navigator.geolocation.watchPosition()` 経由で更新された場合

#### ボタンが押された場合

Tabコンポーネント の中には TabButtonコンポーネント が二つ並んでいます。
TabButtonコンポーネント は、クリックされたら "クリックされたよ" というイベントを Tabコンポーネントに返すだけです。
どちらのボタンがクリックされたかは、 Tabコンポーネント の責任範囲として、ここからさらに Mainコンポーネント へイベントを投げます。
Mainコンポーネントへは "どちらのボタンが押されたか" がわかるものを引数として渡しています。

Mainコンポーネントは、受け取った値を使って緯度経度を更新し、 Mapコンポーネントへ(props経由で)情報を渡します。

``` TabButton.vue
(snip)
    <b-button @click="$emit('click')" size="lg" :variant="status">
(snip)
```

``` Tab.vue
    <TabButton
      @click="clickStation"
      id="sation"
      :status="stationVariant"
      label="札幌駅"
    ></TabButton>
(snip)
    clickStation() {
      this.stationVariant = "info";
      this.hereVariant = "";

      this.$emit("changeActive", "static");
    },
```

``` Main.vue
(snip)
    <Tab @changeActive="setActive"></Tab>
(snip)
    setActive: function(location) {
      console.log("active:" + location);
      this.lat = this.geosObject[location][0];
      this.lon = this.geosObject[location][1];
    },
(snip)
```

#### 地図へ反映

Mapコンポーネントでは、緯度経度の情報が更新されたこと(正確にはpropsで持つ 'lat' の値が更新されたこと)がわかるように、 `watch` を使っています。

``` Main.vue
(snip)
    <Map :lat="lat" :lon="lon"></Map>
(snip)
```

``` Map.vue
(snip)
  methods: {
    updateCurrentPosition: async function() {
      if (this.map) {
        this.map.panTo([this.lat, this.lon]);
      }
      if (this.currentCircle) {
        this.currentCircle.setLatLng([this.lat, this.lon]);
      }
      if (this.currentPoint) {
        this.currentPoint.setLatLng([this.lat, this.lon]);
      }
    }
  },
  watch: {
    lat: function() {
      this.updateCurrentPosition();
    }
  }
(snip)
```

## まとめ

Vue.js のコンポーネントの一つとして、 Leaflet を使った地図を使うことが簡単にできました。
Mapコンポーネントの外から位置情報を与えられるので、各種サービスと連携して地図表示することも気軽にできそうです。
新卒デザイナーだけど自動テストと仲良くしたい理由


新卒1年目のUXデザイナーが、自動テストについて思うことをしたためたお気持ちポエムです。
すみません、タグ何つけたらいいかわからない…

# 私について
くふうカンパニーの[株式会社みんなのウェディング](https://www.mwed.co.jp/) で、[みんなのウェディング](https://www.mwed.jp/)というサービスを作っているUXデザイナーです。新卒です。最近は、あるキャンペーンページの改修デザインをして、マークアップまですることが多いです。おそらく他のデザイナーさんよりはちょっとだけマークアップヂカラが高いのかな？と最近は思っています。言うて大したことはないです。

# 弊社の自動テスト
どのような構成かなどは[ここ](https://blog.mwed.info/posts/migrate-performance-plan.html)に書いてます。私は書いてることはあまりよくわかりません。

# 同期に教えてもらった自動テストの話
自動テストでは、このコードによって正しく動作するか？をテストしています。
何か変更が行われた時、テストが落ちるのは自然なことです。なぜなら、当初想定していた動きと違うことが起きるような変更がされているからです。なので、新しい変更では、その変更内容が正しく動作するかのテストも書かなければならない…と解釈しています。
同期に、デザイナーとして業務をする中で、私が関わりそうなテストとして`feature spec` と `system spec` のことを軽く教えてもらったことがあります。
この辺のテストでしていることとしては、Chromeなどのブラウザで、自分で操作をしてみてちゃんと動いてるかな？と確認するのを、自動化している、そういった確認の上での作業指示を書いているイメージ、と教えてもらいました。だから、当然テストで指定しているclassが書き換わったらテストは落ちます。なので、例えばフォームなどの見た目の改修を行っただけでも、テストを書き換えなければならなくなる、というわけですね。
弊社では、このあたりを`capybara`で書いていて、これを参考にするといいよ！というリンクも教えてもらいました。良い同期だ…

# 本題
では、なぜ私が自動テストに興味を持っているのか、仲良くしたいと思っているのかを書いていきます。
大きく分けて理由は2つです。

## 自分の変更が影響する箇所はなるべく自分で直したい
まず、先ほども述べましたが、マークアップなどの些細な変更でも、テストが落ちることがあります。その際、テストが落ちることはなんなのか 何を意味しているのかを知ることがまず重要だと感じています。
テストが落ちたけど、なぜかわからない。エンジニアに教えてもらおう、エンジニアに解決してもらおう…という流れは良くないと思っていて、自分が行った変更なのに、なんだかわからないけど動いているところがあるぞ、という状態になってしまうと感じています。
もちろん、共同開発などで、エンジニアにしかわからない箇所がある、とか、デザイナーにしかわからないデザインの話がある、とかは当然だと思います。でも、例えばこのページの見た目をなおしたら、テストが落ちてしまった…エンジニアさん助けて＞＜となるのは、正直悔しい気持ちもあります。ある意味自分でできる範囲を増やしたい、という欲求なのかもしれません。
当然、自分だけではわからない時もあるし、そういう時は素直に聞きにいくことも大事です。でも、聞かなくてもできるようになると、自分のできる範囲が増えて自信につながるような気がします。

## エンジニアに頼らないとできないことを減らしたい
私は、自分ができないことを減らすということは、誰かに頼ることが減ると考えています。
自動テストの話でいうと、エンジニアに頼ることが減ると考えています。
なぜ、エンジニアに頼ることを減らしたいのかというと、単純に弊社のエンジニアは忙しいからです。いや、多分どこ行ってもどの職種でも忙しくない人はいませんけど…とにかく、質問しに行って教えてもらう、という時間をあまりたくさんエンジニアに取らせたくないなあと思っています。
特に、自動テストのちょっとした小さい対応でも、積み重なれば大きな工数となるなあと思っているので、がっつり実装していく期間なんかはそれで毎回聞きにいくとかを避けたいという気持ちです。
さらに、聞きにいくことがあったとしても、「全くわからない」状態で行くのは本当に避けたいので、ある程度知っていたいとも思います。
実際、自分が誰かに何かを教える立場になった時。「なんだかよくわかんないけど、なんかおかしいんだよね」と言われるのと、「こういうことをしたらここがおかしくて、よく読んだらここがおかしいかもしれないけど対処法がわからないんだよね」と言われるのとでは、後者の方が原因を考えやすいです。そして、私は後者の状態でエンジニアに聞きにいきたい。そのために自動テストに歩み寄っていきたいな…と思います。


# 終わりに
将来的な自分のスキルとしても、自動テストに関しては「書けないけど、なんで必要なのか、どんなことをするためのものなのか」なんかは知っているのが良いかな、と思います。
もちろん、「下手に触っておかしくするならエンジニアに任せてくれ！」という人や、「え、それってデザイナーやらなくて良くない？」みたいな考え方もあると思います。
でも私は、単純な興味もあるので、少しでも歩み寄っていこうと思います。なお、デザイナーだってこうであるべきだよね！みたいなことは考えておらず、あくまでも私がこうですよ、という話ですのでそこはご了承ください。

あまり、私以外の人が読んでも何かを得られる記事にはなりませんでしたが、ここまで読んでいただきありがとうございました。
くふうカンパニーには燃えるわくわく新卒デザイナーがいるぞという印象だけでも持っていただけたら幸いです。
git cloneの時に鍵がないと怒られた時の対処法

#git cloneの時に鍵がないと怒られた時の対処法
先日とあるプライベートレポジトリをcloneしたのですがこのようなエラーメッセージが出て失敗してしまいました。

```
git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.
```

鍵がないよと言われてそうなので鍵を生成してgithubにアップロードします。


```:shell
$ ssh-keygen -t rsa -C "githubに登録してあるメールアドレス"
```
で鍵を生成した後~/.ssh/に生成されるid_rsa.pubというファイルをgithubにアップロードします。
gitへのアップロードは
https://github.com/settings/keys
から行います。

その後~/.ssh/configに

```:~/.ssh/config
Host github.com
  HostName ssh.github.com
  IdentityFile ~/.ssh/id_rsa
  User git
```
と書き込めばcloneできるようになります。

##参考
http://tusukuru.hatenablog.com/entry/2018/08/29/021651
kusanagi update cert で失敗するときの対処

# KUSANAGI update cert で失敗するあなたへ
kusanagi でWordpressを運用する際に、SSLを有効にしますが、そのときにSSL自動更新をOnにしているのにも関わらず、失敗するケースがあります。

```
# kusanagi update cert
```

その際は、

```
kusanagi ssl --email test@sample.jp profile_name
```

と、もう一度 プロファイルに対して、SSLの設定を行うとなぜか通ります。
で自動更新は有効ですよと言われます。
意味がわかりません。

でも、これで大丈夫そうです。
古い設定のものがダメっぽいですね。

なので、

```
# yum update
```

をやって、kusanagi関連すべてUpdateしておきましょう。


無理やり以下のコマンドで更新はやめましょう。

```
/usr/local/certbot/certbot-auto renew --force-renewal
```
【初心者】javascriptでシャークネードのミニゲームを作りたい①

#何を作るか
javascriptの勉強がてら、サメを迎撃するシャークネードのミニゲームを作ってみたいと思います。
イメージとしては、UNDERTALEのアンダイン戦の矢印が飛んでくるやつみたいな。

　　　　　　　　　　↓
　　　　　　　　　　↓
　　　　　　　　　　―
　　　　　→　　　　 ♥　　　　　　←



↑こんなのです
さて、どこから手をつければいいことやら・・・

##実装すること
・中心にいる人（おなじみフィン・シェパード）
・キーボードの矢印キーで動くチェーンソー
・上下左右から飛んでくるサメ
・当たり判定（サメがチェーンソーに触れれば消滅、フィンに触れればゲームオーバー）
・スコア表示（1匹倒すごとに100点）

##できれば実装したいこと
・レアサメ（1匹倒すと500点）
・ハイスコア記録機能（10位くらいまで記録。
　昔のアケゲーみたいにプレイヤー名も3文字くらいでのこせるようにしたい）


こんなことをできるようになりたいな―と思います。
がんばります。
[UE4] ゲーム実行時のカリングを確認する方法

カリング処理は処理負荷を軽減させるために不必要なものをあらかじめ取り除く処理のことです。
例えば以下のようなゲームプレイ画面があったとします。
![2019-12-04_13h02_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363894/d3f3d51c-b2e7-0754-cb5c-0a1c05aca17f.png)

次のGIF動画はカリング処理がない場合と、カリング処理がありの状態の比較です。
ゲーム上カメラに映らないものが省かれている様子がわかるかと思います。
![cullingGIf.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363894/4dbcd8c5-a29a-1239-33aa-ae078cfc99a6.gif)!

実際のゲーム実行時には、まずCPU側で不必要なものを判断し(CPUカリング)、その後にデータがGPUに送られます。レンダリング時にはGPU内でもカリング(GPUで描画処理が不必要なものを判断し描画対象から取り除く)が行われますが、実際に描画はされなくてもデータとしてはGPUに送られてしまうので、メモリや処理負荷に影響を与えます。  

## FreezeRenderingコマンドとToggleDebugCameraコマンド

CPUカリングについて、適切に行われているか確認するための方法として、FreezeRenderingコマンドとToggleDebugCameraコマンドが存在します。FreezeRenderingに関してはカメラ情報をその場で止めてしまうコマンドで、ToggleDebugCameraについては、ゲームで設定しているカメラとは別に自由で動けるDebug用カメラを使用するモードに切り替えるコマンドです。コマンドはゲーム中に"@"キーを押すことで入力用のコンソールが表示されるので、こちらに入力することで不要なものが残っていないか確認する事が可能です。
![freezeRenderingGIf.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363894/baee8316-9445-21fd-8440-518237cdfd8e.gif)


## 対策方法
GPUに不必要なものを送らないための対策としては、メッシュのBoundsを適切に設定することが必要です。
(Boundsをもとにカリングを行っています。)
Boundsはメッシュごとに自動で設定されていますが、Sphereで近似されるため細長いメッシュだと非常にでかくなり、常にGPUに送られてしまうといったケースが存在します。
Boundsは、**[表示] > [詳細設定] > [バウンズ]** で表示が可能です。
![2019-12-04_15h08_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363894/c211dfc4-953a-59be-865c-db78f509d9a9.png)

対策としては細長いモデルについては分割する方法や、メッシュの設定で**[詳細] > [Rendering] > [Bounds Scale]**よって調整を行います。
![2019-12-04_15h20_30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363894/249d9a66-b2ad-7a9d-97db-18f70de8bbd5.png)


## おわりに
適切にモデルの設定を行い処理負荷を軽減しましょう。
crontabで、改行コードがCR+LFだと動かない模様

#この記事について
先日現場で、掲題の原因によるトラブルが起こったので覚書として。

crontabで、**行末の改行コードがCR+LFだと正常に動作しない**模様。
無論、Linux環境で作業している限り改行コードはLFとなるはずで、このようなことは普通起こらないが
Windows環境で作成したファイルをLinux環境に転送し、crontabに読み込ませると起こりうる。
ファイルの読み込み時に**エラーも表示されず、登録されてしまう**。

改行コードに限らず、文字コード等の問題もあるので
そもそも**Windowsでcrontabファイルを作成して適用するような運用には注意**が必要だろう。

#現場で実際に起きた事例
複数台で運用中の本番環境APサーバのうちのいくつかに、ある担当者がcrontabを設定したが、それが動かない。
担当者はcrontab登録済の他のAPサーバの設定内容を見ながら、Windwosの開発端末のメモ帳で同一内容の設定ファイルを作成して
本番環境に転送し、crontabに適用するという手法をとっていた。

設定した内容は、以下であると仮定する。

```bash:crontab
05 * * * * sh /home/hogeuser/example1.sh
10 * * * * sh /home/hogeuser/example2.sh
15 * * * * sh /home/hogeuser/example3.sh
```

##原因判明までの手順
事象発覚後、以下の手順で調査実施。

- `/etc/rc.d/init.d/crond status`にてcrondが起動しているかどうか確認 → 起動していた
- 実行させるシェルスクリプトのパスが正しいか確認 → 正しかった。スクリプトの実行権限も問題なし
- 既存のAPサーバではジョブが動いているか確認 → 動いていた。動いていないのは今回crontabの設定を行ったサーバのみ
- crontabのエラーログについては、root権限が必要だったので確認できず
- シェルスクリプト以外なら動作するのか確認するため`*/1 * * * * echo test >> test.txt`のジョブをcrontabに追加
 - 結果`'test.txt'$'\r'`という異常な名前のファイルが生成された。ここで改行コードの問題を疑う
- `crontab -l > crontab.txt`で登録内容をファイルに出力し`od -c crontab.txt`で改行コードを確認
 - 案の定、改行コードがCR+LFだった

##対応
既存のAPサーバでcrontabに登録されているジョブの内容を`crontab -l > crontab.txt`で出力。
生成されたcrontab.txtを事象発生中のサーバに転送し、`crontab crontab.txt`で登録しなおした。
結果、登録したジョブが定刻通りにエラーなく実行されるようになったことを確認。

#おわりに
最初に記載した通り、**Windowsで作成したファイルをcrontabに適用するような運用は要注意**です。
本記事で述べた改行コードの件のみならず、文字コードの不一致という問題も起こり得ます。
また、**ファイル最終行に改行をつけ忘れる**という問題も発生する可能性があります。

これはUNIX使いの方には「そんなの当たり前だろ」と言われてしまうかもしれませんが
シェルスクリプト等をWindowsで作成し、それをサーバに転送して実行するようなことは
結構、各所で行われているんですよね…。

[以前私が作成した記事](https://qiita.com/hiro0236/items/a0f08c43722032b85002)にも記載していますが、crontabへのジョブ登録は`crontab -e`では行わず、
常にファイルを読み込ませる方式で行うべきと考えていましたが、このような問題も起こり得るということを今回認識しました。
日々是精進ですね。

# 参考記事
cronでシェルスクリプトが動作しない時に確認すべきこと：https://qiita.com/halpas/items/74e8c2ed2b94588cb362