OmniAICreator/Qiita-1.07M huggingface dataset:
Vue.js dataの配列はforループでpushしても問題なさそう

# 概要

ソースレビュー中に「あれ、これって良いんだっけ？」と思ったコード。実際のソースコードを貼るわけにはいかないので、下記はイメージ。だいたいやってる処理は同じ。ソースは Vue.js + TypeScript 。

```TypeScript
@Component
export default class Computed extends Vue {
  // dataに配列を持つ
  listOdd: number[]  = [];
  listEven: number[] = [];

  /**
   * クリック時に配列の更新を行う
   * forでループして、iの値によって別のlistにpushする
   */
  onClick() {
    for (let i = 0; i < 100; i++) {
      if (i % 2 === 1) {
        this.listOdd.push(i);
      } else {
        this.listEven.push(i);
      }
    }
  }

  // それぞれ配列の算出プロパティ
  get backOdd() {
    return this.listOdd[this.listOdd.length - 1];
  }
  get backEven() {
    return this.listEven[this.listEven.length - 1];
  }
}
```

# 疑問に思ったこと

あれ？と思ったのはソースのここ。

```typescript
for (let i = 0; i < 100; i++) {
  if (i % 2 === 1) {
    this.listOdd.push(i);
  } else {
    this.listEven.push(i);
  }
}
```

プロパティに毎回 push をしている。ループが走るごとに data が更新されてしまっている。

* 算出プロパティが無駄に更新されてしまわないか？
* レンダリングがループのたびに発生しないか？

とか思ってしまった。特に、最近の JavaScript の書き方を使えばリスト処理は for を使わなくてもかけるので、 for でゴリっと書かれていた処理に違和感があったのも事実。

# 問題ないか確かめてみる

console を仕込んで、computed,updated がどのタイミングで呼ばれるか確認した。

```typescript
onClick() {
  for (let i = 0; i < 100; i++) {
    console.error("loop"); // console
    if (i % 2 === 1) {
      this.listOdd.push(i);
    } else {
      this.listEven.push(i);
    }
  }
}

updated() {
  console.warn("updated"); // console
}

get backOdd() {
  console.warn("backOdd"); // console
  return this.listOdd[this.listOdd.length - 1];
}
get backEven() {
  console.warn("backEven"); // console
  return this.listEven[this.listEven.length - 1];
}
```

# 結果 ➡️ 問題なかった

ちゃんとループが終わってから computed も updated も実行された。どうやらイベントが終わるまでは更新を待ってくれているらしい。ソースレビューでの不安は杞憂に終わった。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10499/0b934a14-3888-b99c-a3eb-f3dd6b6622ba.png)
GCP-ACE試験対策[請求先アカウントを作成する]

> 請求先アカウントを作成する

今回は、これについて。

GCPでは、GCPの費用の請求先アカウントを作成し、GCPの利用が出来る。
複数の請求先アカウントを作成できるが、１プロジェクトに１つのみリンク可能。
１アカウントが複数のプロジェクトとのリンクは可能。

組織ノードを使用してGoogle Cloud リソースを管理している場合、新しい請求先アカウントを作成する場合は、権限が必要 → billing.accounts.create

組織ノードを使用せず、プロジェクトで、リソースを管理している場合は、特に権限は必要ない。
URL を比較して差分画像を生成する CLI ツールを作りました

2つのウェブサイトのブラウザ上での見え方を比較したい時があると思います。例えばプロダクションと開発用のウェブサイトなど。そんな時に使える CLI を作りました。

https://www.npmjs.com/package/wwwdiff

`wwwdiff` は 2つの URL を引数に指定して、ブラウザ上でのレンダリング結果の差分画像を生成するツールです。

## インストール

インストールと実行には Node.js が必要です。パッケージマネージャーの npm 経由で `wwwdiff` をインストールできます。

```shell
$ npm install wwwdiff -g
```

インストールが完了すると `wwwdiff` コマンドが利用できるようになります。


```shell
$ wwwdiff -v
1.1.10
```

## 実行

比較したい2つのウェブサイトの URL を用意して下さい。例えば WordPress のデフォルトテーマで2つのポストを作って比較してみます。

| サンプル1                     | サンプル2                   |
| :-------------------------- | :-------------------------- |
|![sample-a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125062/c3cd6510-9b10-83c6-48ed-cf5203a583fe.png)|![sample-b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125062/2c876b60-8fe4-c96b-d685-4f6cb108eed9.png)
|

これらの URL を引数に与えて`wwwdiff` を実行すると、ブラウザでのレンダリング結果を差分画像として出力することができます。差分画像は標準出力で得られますのでリダイレクトしたり他のコマンドにパイプするなどして下さい。

```shell
$ wwwdiff URL1 URL2 > diff.png
```

| 差分画像                   | 
| :-------------------------- | 
|![sample-diff.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125062/ef314628-10a3-3b69-62e4-95581f88e6b4.png)|

グローバルに余計なツールをインストールしたくない場合は、 `npx` コマンドで即時実行することができます。ただし、毎回 Chromium ブラウザ （120MB程度） をダウンロードすることになる場合がありますのでご注意ください。 

```shell
$ npx wwwdiff URL1 URL2 > filename.png
```

### オプション

カラーオプションでハイライトを変更できます。

```shell
$ wwwdiff -c blue URL1 URL2 > filename.png
```

| 差分画像                   | 
| :-------------------------- | 
|![blue.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125062/d45cbe58-949e-29d4-aa02-9657639047a0.png)
|

## リポジトリ

リポジトリはこちらです。
https://github.com/kamataryo/wwwdiff
2つの円の共通接線の接点を求める(sympyの行列)

																										
pythonの関数、引数、戻り値の使い方を教えて下さい。																													
おすすめの参考のページを教えてもらうと助かります。																													
もっと短くなると、思います。																													
よろしくお願いします。																													
																													
「離れている場合のみ　　　　　　･･･　接線は4本」																													
のところ、以下のプログラムは、1本のみ計算																													
r1r2の大小が関係するかもしれません。r1<r2を想定しています。																													
																													
(参考)2つの円の共通接線を求める																													
https://qiita.com/tydesign/items/0100c49c6335695e6990																													
																													
```																																																				

# 【例】中心(10,12) 半径2と中心(50,42) 半径30の円の共通接線を求める																													
from sympy import *																													
var('x1 y1 r1 x2 y2 r2 tx ty co si sx1 sy1 sx2 sy2')																													
sx1=0																													
sy1=r1																													
sx2=sqrt((x1-x2)**2+(y1-y2)**2-(r2-r1)**2)																													
sy2=r2																													
v=solve([co*sx1-si*sy1+tx-x1,																													
              si*sx1+co*sy1+ty-y1,																													
              co*sx2-si*sy2+tx-x2,																													
              si*sx2+co*sy2+ty-y2],																													
             [co,si,tx,ty])																													
A=Matrix([																													
           [v[co],-v[si],v[tx]],																													
           [v[si], v[co],v[ty]],																													
           [    0,       0,    1]																													
])																													
B=Matrix([																													
          [sx2],																													
          [  0] ,																													
          [  1]																													
])																													
AB=A*B																													
print("---------------------------------------")																													
print(tx)																													
print(ty)																													
print(AB[0])																													
print(AB[1])																													
print("---------------------------------------")																													
print(v[tx].subs({x1:10,y1:12,r1:2,x2:50,y2:42,r2:32}),																													
v[ty].subs({x1:10,y1:12,r1:2,x2:50,y2:42,r2:32}))																													
print(AB[0].subs({x1:10,y1:12,r1:2,x2:50,y2:42,r2:32}),																													
AB[1].subs({x1:10,y1:12,r1:2,x2:50,y2:42,r2:32}))#
```																																										
結果途中省略
10 10										
50 10																													

																																																						
# 接線の方程式は(未)																													
# classでintersectionの方法が早い気がしてきました。(未)
ファイルとディレクトリのパーミッションの違い

##&nbsp;&nbsp;ファイルのパーミッション
- **R:**&nbsp;ファイルを読み込むことができる。
- **W:**&nbsp;ファイルを上書きできる。
- **X:**&nbsp;ファイルを実行できる。

##&nbsp;&nbsp;ディレクトリのパーミッション
- **R:**&nbsp;ディレクトリ内のファイルが表示されるか(lsで表示されるか)
- **W:**&nbsp;ディレクトリ内のファイルを新規作成, 消去できるか(存在するファイルの読み書きは可能)
- **X:**&nbsp;ディレクトリ内に入れるか(cdできるか)

##&nbsp;&nbsp;特殊例

testdir/
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└ testfile.txt


testdir&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;=> --x
testfile.txt => rwx

ディレクトリ、ファイルの設定が上記のとき
testdir内でtestfile.txtは表示されない(lsを使えない)が、testfile.txtは編集できる。
(vim testfile.txtのように)

ディレクトリ内のファイルを編集されたくない場合はディレクトリ自体に実行権限を付与しないようにするか、内部のファイルの権限を正確に設定する必要がある。
GCP-ACE試験対策[Stackdriver ワークスペースをプロビジョニングする]

> Stackdriver ワークスペースをプロビジョニングする

今回はこれについて。

Stackdriverとは
> Google Cloud のオペレーション スイート（旧称 Stackdriver）は、クラウド インフラストラクチャ、ソフトウェア、アプリケーションのパフォーマンスをモニタリングしてトラブルシューティングを行い、パフォーマンスを向上させるために設計されています。ワークフローを効率的に構築して実行し、アプリケーションのパフォーマンスと可用性を維持できます。

え？旧称って名前変わったんですか。

やれることの整理
・ログ管理
・ログの分析情報
・予防的なモニタリング
・カスタムの可視化
・ヘルスチェックのモニタリング
・サービスのモニタリング
・レイテンシ管理
・デバッグ
・パフォーマンス管理とコスト管理
・セキュリティ管理

タクサンアルアルネ...

今回は、機能の整理だけにして、詳細は後ほど。

![スクリーンショット 2020-05-09 21.43.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/623009/46366674-7a2a-c7b7-209b-dc6241289631.png)

こんな感じで、オペレーションの枠に諸々入っており、特に以前のようにワークスペースを登録する必要はなさそう。
uGUIのToggleを使ってみる


<h2>uGUIで何か作ろうとした</h2>
久しぶりにuGUIで何か作ろうとしたらすっかり忘れていました。

例えばToggleボタン…
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633612/547fded3-ffc9-e8f6-4070-1b67a6089e69.png" width="500">
こうゆうのです。

適当なメソッドを作っておいて…

```c#:ToggleButton.cs

    public void OnClickToggleButton(bool isOn)
    {
    // Toggleのチェックボックスがクリックされた時に値を取得する
        Debug.Log("Toggleの値: " + isOn);

    }
```


ToggleコンポーネントのOnValueChangedのところに設定します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633612/5d94a5cd-4da5-c7a4-8bf1-6e2f95f53aae.png" width="500">
この時に上のほうにあるメソッドを選択するとToggleの値が取得できます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633612/3aafefa8-9cec-6e3d-1377-e2fae135ed25.png" width="679">
下にあるOnClickToggleButton(bool)だとチェックしているか否かの値は取得できません。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/633612/722e92e0-e632-3b34-3a9f-33bf02d51be2.png" width="589">
Inspector上で設定された値になります。
PHPで初めてのWebアプリケーション開発　実装方法の検討　備忘録3　

#前提
PHPを使ったWebアプリケーションの開発知識が必要になったので、開発過程の備忘録、知識のインプット・アウトプットを目的としている。

##アプリケーションの概要
アプリケーション名「なな板」
スケジュール・出欠管理アプリ

##実装したい機能
- 新規ユーザ登録
- ログイン機能
- プロフィール編集
- スケジュール追加・編集
- スケジュールに対する出欠登録
- スケジュールに対する出席表
- ユーザ一覧表示

#備忘録3　目次
- 機能の実装方法の検討
- 開発手順の検討
- HTML/CSSで骨格の作成

#機能の実装方法
###アプリケーションの表示部分
HTML/CSSで骨格の部分を作る

###機能の実装方法
PHPのフレームワークである「Laravel」を利用して実装する。

#開発手順(予定)
1. 始めに、HTML/CSSで骨格の部分を作る
2. Laravelを導入
3. 機能の実装
4. デプロイ

#html/cssで骨格の作成
Laravelには独自のテンプレートエンジン「Blade」が用意されているが、勉強も兼ねて一旦HTML/CSSで作成する。
Laravel導入後に適宜変更を加えていくつもりである。

###HTML/CSSで作成した画面
![なな板プロトタイプ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593561/6145a411-3ddf-074c-9e01-e8685accfabc.png)
![なな板プロトタイプ2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593561/d584f048-a84f-57b1-58ca-8c7dfd894be5.png)
![なな板プロトタイプ3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593561/73bfa679-ec49-de4c-8b40-f2c547538aab.png)
![なな板プロトタイプ4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/593561/44e87f4f-969a-3a79-9522-d70f5cbbde82.png)

拙いデザインでソースコードの需要はないと思うので割愛させていただきます。

自分でレイアウトを整えられると思い通りに出来るのでいいです。技術力の高い人が自由度の高いツールを好む理由がわかりました。

###画面作成方法
エディター　ATOM
ブラウザ　chrome

書籍「一冊で全て身につく　HTML&CSSとWebデザイン　入門講座」と[Progate](https://prog-8.com/dashboard)、サルワカさんの[Webデザイン入門](https://saruwakakun.com/html-css/basic)でさっと学習して、画面を作成しながらわからないところは都度googleで調べるという形で行った。

####感想
HTML&CSSはサンプルコードやサイトテンプレート、良質な無料教材がネットから手に入るので、本買う必要なかったですね。
サイトのデザインはとても楽しかったが、凝りだすといくらでも時間をかけられるので引き際が大事かなと。
コーディングしていて、効率的に出来ていないと痛感。コーディング技法的なものを勉強しなければならない。
自分で見直しても見にくいので、今後は見やすい、わかりやすいコーディングしようと決意。

いい記事があったのでリンク　→　[いいコードを書く術（まとめ）](https://qiita.com/NoriakiOshita/items/e60ab5bb01b90d927ae5)

本当に大まかに画面作成しただけなので、都度修正を加えていく予定です。

#おわりに
次回はLaravelを導入し、Laravelに標準で搭載されているテンプレートエンジンBladeを使って、画面表示までを行いたいと思う。
MaskRCNNをtensorflow ver2で走らせるための実行環境及びエラー解決方法について

備忘録として。

#実行環境
GPU:RTX2080
tensoflow:2.0.0
CUDA:10.1
cuDNN:7.6.5.32

注意点として、下記の対応表だとtensoflowは2.1.0を使えとのことなんですが、model.pyを修正した上でdemoプログラムを走らせてみると「Failed to get convolution algorithm. This is probably because cuDNN failed to initialize, so try to see if a warning log message was printed above.」とのエラーがでました。試しにtensoflowを2.0.0にしてみたら、エラーが出ずに実行できました。
https://www.tensorflow.org/install/source?hl=ja#gpu_support_2



#model.pyの修正
エラー解決には下記を参考にしてmodel.pyを編集しました。
https://github.com/matterport/Mask_RCNN/issues/1797
https://github.com/matterport/Mask_RCNN/pull/1817/files
GCP-ACE試験対策[プロジェクトで API を有効にする]

> プロジェクトで API を有効にする

今回はこれについて。

色々調べてみた結果、Cloud Console または、gcloudで有効にすることで、初めてそのサービスが利用出来ることがわかった。
GCPでは(どのクラウドベンダでもそうかもしれないが)、APIを通じてサービスを利用する。
GCPでは、そのAPIをそもそも有効にしないとダメなようだ。


```bash:gcloud
gcloud services enable SERVICE_NAME
```
gcloudの場合

※APIが表示されない場合は、そもそも権限があるのかを確認する
5 月 LeetCode 挑戰, W2D2, Valid Perfect Square (二分搜尋 / Binary Search), in Swift

資料結構與演算法： `Binary Search`

- 挑戰頁面 - [Valid Perfect Square](https://leetcode.com/explore/challenge/card/may-leetcoding-challenge/535/week-2-may-8th-may-14th/3324/)
- 原題目頁面 - [367. Valid Perfect Square](https://leetcode.com/problems/valid-perfect-square/)

## 思考方式

題目是要求確認輸入的值是不是完全平方數，是則回傳 true ，否則回傳 false 。

### 走到二分搜尋為止的思考步驟

- 從 1 開始一個一個取平方直到和 num 相等為止
- 但是這樣太慢，降這種線性走訪的方式就是二分搜尋了

### 二分搜尋

- 如果正中間的平方值和 num 相等就回傳
- 小於就改找右半邊，因為目前的值太小，需要找更大的值
- 大於就改找左半邊，因為目前的值太大，需要找更小的值

## 程式碼

``` swift
class Solution {
    func isPerfectSquare(_ num: Int) -> Bool {
        // 題目有說只會有「正數」，所以從 1 開始
        var left = 1
        var right = num

        // 二分搜尋 binary search 為基礎的變形
        while left <= right {
            let middle = left + (right - left) / 2
            let square = middle * middle

            if square == num {
                return true
            } else if square < num {
                left = middle + 1
            } else {
                right = middle - 1
            }
        }

        return false
    }
}
```

## 複雜度分析

n 為 num 的值。

- 時間複雜度： O(logn)
  - 即二分搜尋 binary search 的複雜度
- 空間複雜度： O(1)
  - 常數個變數宣告

## 執行結果

``` text
Runtime: 0 ms (beats 100%)
Memory Usage: 20.5 MB
```
cordova-plugin-firebasexをCordova CLIでビルドする場合について

現在、Firebase でプッシュ通知などを行う場合、[cordova-plugin-firebasex](https://github.com/dpa99c/cordova-plugin-firebasex) がよく使用されています。

`cordova-plugin-firebasex v9.0.1` 以降からは、Cordova CLIでビルドするためのバージョンが用意されています。詳しくは、[Cordova CLI builds](https://github.com/dpa99c/cordova-plugin-firebasex#cordova-cli-builds) を参照してください。

Cordova CLIでビルドするためのバージョンには、バージョン名に `-cli` が付いています。

Monacaで提供しているリモートビルドサーバでは、Cordova CLIが利用されているため、[cordova-plugin-firebasex](https://github.com/dpa99c/cordova-plugin-firebasex) を使用する場合は、このCordova CLIでビルドするためのバージョンを使用する必要があります。

# 設定方法

MonacaプロジェクトでCordovaプラグインを `有効` にする方法には、MonacaクラウドIDEのメニューにある、`設定 > Corodvaプラグインの管理 > Cordovaプラグインのインポート` から以下の3つが提供されています。

 - ZIP/TGZ
 - URL
 - パッケージ名


## ZIP/TGZ

ZIPやTGZで cordova-plugin-firebasex を有効にする場合は、[releases](https://github.com/dpa99c/cordova-plugin-firebasex/releases) から `-cli` が付いているバージョンのファイルをダウンロードして、`Cordovaプラグインのインポート` からダウンロードしたファイルをインポートして有効にします。


## URL

URLでcordova-plugin-firebasexを有効にする場合は、`Cordovaプラグインのインポート` から

```
設定例：9.1.1-cliの場合

https://github.com/dpa99c/cordova-plugin-firebasex.git#9.1.1-cli
```

のように指定して有効にします。


## パッケージ名

パッケージ名でcordova-plugin-firebasexを有効にする場合は、`Cordovaプラグインのインポート` から

```
設定例：9.1.1-cliの場合

cordova-plugin-firebasex@9.1.1-cli
```

のように指定して有効にします。


# おわりに
これまでビルドできていた cordova-plugin-firebasex がビルドできなくなった場合は、一度、Cordova CLIでビルドするためのバージョンを試してみてください。
v-dialogの再び開いたダイアログのスクロール位置を初期値に戻す

# 概要
Vuetify でスクロールのある大きめなダイアログを [v-dialog](https://v15.vuetifyjs.com/ja/components/dialogs) で実装している場合。

1. ダイアログを開いてスクロールする
2. ダイアログを閉じる
3. またダイアログを開く

とすると、2回目のダイアログのスクロールがTopに戻っておらず、1回目に開いたときのスクロール位置を保持したままになってしまいます。

※ Vuetify は v1.5 の場合です

# 解決方法

issueにあった解決策を参考に実装を行いました。ダイアログが Active になると `v-dialog--active` class がついた div タグができるので、それの scrollTop を 0 にするとスクロール位置が元に戻りました。ダイアログが Active になったタイミングで scrollTop = 0 をする必要があるので、 updated() を利用しました。

* [Dialog scroll position does not reset on subsequent shows #1687](https://github.com/vuetifyjs/vuetify/issues/1687)

```vuejs
<template>
  <div>
    <v-dialog v-model="dialog">
      <!-- 省略 -->
    </v-dialog>
  </div>
</template>

<script lang="ts">
@Component
export default class MyDialog extends Vue {
  updated() {
    const elements = document.getElementsByClassName('v-dialog--active');
    if (!elements || !elements.length) {
      // 要素が取得できなかった場合は終了
      return;
    }
    elements[0].scrollTop = 0;
  }
}
</script>
```

getElementsByClassName が失敗したときの処理を書かないと、コンソールでエラーが表示されるので注意です。
Excelで同じ行を増やす操作をブラウザ上で実行する

# Excelで同じ行を増やしたい
Excelを使っている際に、以下のように各行を繰り返し表示させたいことがあるかと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316736/510be137-75a8-e61b-b62b-afc672ff31b6.png)
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316736/3ac3ac0d-04f8-8678-b852-6a285af0a494.png)

方法としては、以下のリンクで解説されているように
・隣の行に連番を振って、繰り返したい行数分コピペする
・VBAで何とかする
https://teratail.com/questions/48056
といった方法があるかと思います。
ただたくさんコピペしたり、マクロを作るのは面倒だ、という人もいるのではないでしょうか。

# ブラウザ上で実行できるようにする
上記を簡単に実行するために、javascriptを使ってブラウザ上で動くツールを作ってみました。
※基本PC向けです
※Windows10 Chrome, Firefox, Internet Explorer, Edgeで動作確認済

### ツール
- https://infinite-retreat-55196.herokuapp.com/

### 使い方
- Inputのテキストエリアに繰り返したい文章を入力し、Repeat timesに繰り返したい回数を入れる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316736/3a5cc817-8a9d-181d-30a4-db205e8c88d6.png)

---------
- See resultボタンを押して、Repeat timesに記載した回数分各行を繰り返し表示する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316736/7fcb1b64-7e99-b0b1-6f22-6b8711ab761e.png)


---------
- download text fileボタンを押して、結果をtxtファイルでダウンロードする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316736/839b79fe-a418-5215-8c5e-77518b200dfa.png)
Laravel のルーティングの仕様について

## 環境
Laravel 6.x

## resource()->onlyの使い道について

laravelを使って下記のようにルーティングを定義していたところ
うまく反映されなかった

```
Route::resource('/answers', 'AnswerController')->only(['create, store, destroy'])->middleware('auth');
```

route:listを確認してもどこにもない。。

そう言う時には決まってこれ

```
php artisan route:clear
```

全く効果なし。


## 解決　

色々試したけどどうやらLaravelの場合
resource()->only()の引数は一つだけしか指定できないみたいです

```
Route::resource('/answers', 'AnswerController')->only('create')->middleware('auth'); ⬅️これならOK
```

仕方ないのでresource()->except()で対応

```
Route::resource('/answers', 'AnswerController')->except('index', 'show' ,'edit' ,'update')->middleware('auth');
```

これで無事反映。

Railsの場合はonlyメソッドに複数の引数を指定できていたので
え？？なんで？？ってなり、焦りました。

## 追記
他の記事では普通に使ってました
ただ自分のヴァージョンでは適用されませんでした

```
Route::resource('posts', 'PostsController', ['only' => ['create', 'store', 'show']]);
```
Ionic5にCapacitorとElectronを導入し、デスクトップアプリとしてビルドする手順

# Ionicプロジェクトの作成
Ionicプロジェクトを新規作成します。
作成時の選択項目は適当な物を選んでおきます。

```
$ ionic start my-project
```
プロジェクトのルートディレクトリに移動しておきます。

```
$ cd my-project
```
# Capacitorのインストール

```
$ npm install --save @capacitor/cli @capacitor/core
```
# Electronのインストール

```
$ npm install ngx-electron electron
$ npm install electron-packager --save-dev
```
# アプリの初期設定
例としてアプリ名はexample、アプリIDはcom.example.appとします。

```
$ npx cap init example com.example.app
```
# src/index.htmlの修正
後々、Electronアプリを起動した際にコンソールエラーが出てしまうので、`src/index.html`のbaseタグを下記のように修正します(スラッシュの前にドットを付ける)。

```src/index.html 
<base href="./" /> 
```

# Electronアプリの起動
1. Ionicプロジェクトをbuildします。
2. CapacitorにElectronをプラットフォームとして追加します。
3. buildした中身(`/www`配下)をCapacitorにコピーします。
4. Electronアプリとして起動できます。  

```
$ ionic build
$ npx cap add electron
$ npx cap copy
$ npx cap open electron
```
2回目以降のbuild時は、2.の手順「npx cap add electron」は省いてよいです。

# Electronアプリのbuild
## package.jsonの編集
package.jsonに下記を追記します。
アプリ名はExampleとします。

```package.json
"scripts": {
 //中略
"electron:mac": "electron-packager ./electron Example --overwrite --platform=darwin --arch=x64 --prune=true --out=release-builds",
"electron:win": "electron-packager ./electron Example --overwrite --asar=true --platform=win32 --arch=ia32 --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName='Example Electron App'"
}
```
## buildコマンド
下記コマンドを打つと、それぞれmac版とwin版のデスクトップアプリとして、`/release-builds`配下にアプリがbuildされます。

```
$ npm run electron:mac
$ npm run electron:win
```
QMK ConfigratorとQMK Toolboxで自作キーボードのキーマップを書き換えた話

こんにちは！自作キーボードやってますか？

いつもは40%キーボードでふんすふんす言ってる私ですが、
Steamのゲームをやるときに物理数字キーが欲しくなることがあります。
なので所有しているキーボードのなかで一番キー数の多い[UraNuma ver.冬コミ](https://booth.pm/ja/items/1740838)に数字を追加してみます。

---

サリチル酸さんの記事通りにやり、つつがなく完了しました。ありがとうございます。

- [（初心者編）QMK Configuratorを使ってキーマップを書き換えよう](https://salicylic-acid3.hatenablog.com/entry/qmk-configurator)
- [（初心者編）自作キーボードにファームウェアを書き込む](https://salicylic-acid3.hatenablog.com/entry/qmk-toolbox)

---

それだけだと話が終わってしまうのでキーマップの内容などをお話します。
[QMK Configurator](https://config.qmk.fm/)でuranumaを選択して次のようなキーマップを作成。
ポイントは数字を入れてその他を犠牲に。ゲーム用に割り切った内容にしました。
IMEの切り替えはctrl+spaceに割り当てているのでなんとかなります。

レイヤー0
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70350/0e5a4fd1-424f-cf7d-22b8-609ca8556ec6.png)
レイヤー1
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70350/b65b2061-0a9c-56c2-4433-1fa5b31aed36.png)

コンパイルが完了したらファームウェアのダウンロードをしてください。

[QMK Toolbox](https://github.com/qmk/qmk_toolbox/releases)のバージョンは0.0.17を使いました。WIN10環境で問題なく動作。

先ほどダウンロードしたファームウェアのhexファイルを読み込んで、
Auto-Flashにチェックを入れピンセットでリセットしてスルッと書き込みが完了します。
便利な時代になりました。めっちゃ楽。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70350/9cad24dd-687c-b028-8067-3661e7a28afe.png)

こんな感じでざっくりとした内容でしたが、今回は短時間でヌルっと書き換えが完了しました。満足です。
これでPCゲームで数字うちこむの楽やで！……と思ったらいつも使ってる配列と違うせいか慣れが必要そうです。ﾋｪ

![IMG_0827.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/70350/b938b4ac-b039-86a3-cca0-88474e4264ec.jpeg)

この記事はcorne cherryで書きました
rails ルーティング確認

# rails ルーティング　

アプリケーションに設定されているルーティングを調べることができます。


```:ターミナル

$ rake routes
$ rails routes  # またはこちらのコマンド
```

下の図の通り出ていれば、設定の確認が出来ます。

```:ターミナル
　　　　　　　　　　　　　　
                   Prefix Verb URI Pattern                                                                              Controller#Action
                     root GET  /                                                                                        tweets#index
                   tweets GET  /tweets(.:format)                                                                        tweets#index
                          POST /tweets(.:format)                                                                        tweets#create
                new_tweet GET  /tweets/new(.:format)                                                                    tweets#new
       rails_service_blob GET  /rails/active_storage/blobs/:signed_id/*filename(.:format)                               active_storage/blobs#show
rails_blob_representation GET  /rails/active_storage/representations/:signed_blob_id/:variation_key/*filename(.:format) active_storage/representations#show
       rails_disk_service GET  /rails/active_storage/disk/:encoded_key/*filename(.:format)                              active_storage/disk#show
update_rails_disk_service PUT  /rails/active_storage/disk/:encoded_token(.:format)                                      active_storage/disk#update
     rails_direct_uploads POST /rails/active_storage/direct_uploads(.:format)                                           active_storage/direct_uploads#create

```
SD破損に備えて、RaspberryPiのディスクイメージを保存しよう！

RaspberryPiは、OSを含めたデータをSDカードに保存しますが、SDカードのデータが破損する事が時々ありますm(_ _m)RaspberryPiが起動しなくなって最初は何が起きたのかと思いますが、SDカードのデータの破損が原因だったりします。
その度にOSのインストール、再設定やインストールしたアプリケーションの再インストールをするのはきついし、いつ破損するのかわからないので不安ですよね。

そこで、解決策として、ディスクイメージのバックアップを取っておくことをお勧めします。SDカードのディスクイメージを保存しておくことで、環境をまるごととっておくことができますし、ディスクイメージを作成するのはかなり簡単なことです。方法を解説しますので参考にしてください(^^)

# 環境
使用するパソコン：Windows10
使用するアプリケーション
①Win32 Disk Imager -1.0
②7-Zip（保存したディスクイメージを圧縮しておきたい方にお勧めします。）
※Win32 Disk Imagerと7zipは、RaspberryPiの公式ページでも紹介されているアプリケーションです。
　https://www.raspberrypi.org/documentation/installation/installing-images/windows.md
　https://www.raspberrypi.org/documentation/installation/installing-images/README.md

# この記事の内容
以下の順に解説します。
1.ディスクイメージの作成
　①Win32 Disk Imagerのインストール
　②ディスクイメージの作成の手順
　③<補足> 7-Zipでディスクイメージを圧縮
2.ディスクイメージをSDに書き込み

# 1.ディスクイメージの作成
①Win32 Disk Imagerのインストール
　こちらからダウンロードできます。
　https://sourceforge.net/projects/win32diskimager/

②ディスクイメージの作成の手順
　　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630930/df22f779-64dd-9839-1984-1c4050ad6a65.png)
　【アプリケーション操作】
　・SDカードをパソコンに挿入して、アプリケーションを起動してください。
　・Image Fileの欄に、保存先のパスを設定します（フォルダアイコンから選択してファイル名を決定）
　・DeviceにRaspberryPiのSDカードが入っているドライブを選択します。
　　（パーティションが設定されていて2つドライブが認識されているときはどちらでも大丈夫です。）
　・それ以外は変更不要です。
　・保存先（Image File欄）と読み込み対象（Device）を確認して、良ければ"Read"を押してください。
　・時間がかかりますが、あとは放置するだけです。
　　（完了するとこんな画面が出ます。）
　　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630930/5ef0094a-884e-f708-90d9-fd35f4309165.png)


③<補足> 7-Zipでディスクイメージを圧縮
　ディスクイメージは、SDカードの容量分のサイズ（32GのSDを使っていれば約32Gということです！）
　になるため、そのままだとかなりかさばります。
　やり方は簡単なので、7-Zipというアプリケーションを使って圧縮することをおすすめします。
　
　・7-Zipインストール
　　こちらからダウンロードできます。
　　https://sevenzip.osdn.jp/

　・圧縮
　　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630930/b4d2a044-f897-a89b-94d8-ba87da68bab8.png)
　　【アプリケーション操作】
　　　作成したイメージファイルを選択して右クリックすると図のように、"7-Zip"という項目が表示されます。
　　　その中から"[ファイル名]7zに圧縮"を選びます。
　　　これにもちょっと時間がかかりますが、あとは放置するだけです。
　　　ちなみに、圧縮中はこんなウインドウが出ます。
　　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630930/7db141b8-51ed-0ff4-fa92-b03804dbacfc.png)

　　【結果】
　　　完了すると圧縮中に出ていたウインドウが静かに消えます。
　　　確認すると圧縮できていることがわかります。（約31Gから約2.5Gになっています！）
　　　※圧縮前のファイルは不要なので消しておきましょう。
　　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630930/8e8f0ae1-6921-b411-0ed6-340c3be0b010.png)


# 2.ディスクイメージをSDに書き込み
　　![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/630930/df22f779-64dd-9839-1984-1c4050ad6a65.png)
　【注意点】
　ディスクイメージ作成のときとほぼ同じなのですが、デバイスへの書き込みをするため
　他にデバイスをつないでいる場合は、Device欄をよく確認してから行ってください。

　【アプリケーション操作】
　・SDカードをパソコンに挿入して、アプリケーションを起動してください。
　・Image Fileの欄に、読み込むディスクイメージのファイルを選択します。
　　（フォルダアイコンから選択します。）
　・Deviceに書き込み対象のSDカードが入っているドライブを選択します。
　・それ以外は変更不要です。
　・イメージファイル（Image File欄）と書き込み対象（Device）を確認して
　　良ければ"Write"を押してください。
　・時間がかかりますが、あとは放置するだけです。


# まとめ
SDカードのデータが壊れてOSの再インストールや再設定、その他必要なものの再インストールをするのはかなり手間です。最初は、そういったことが何度かありましたし、実際のところ、SDカードのデータは時に破損することが前提くらいに思っておいた方がいいと思います。RaspberryPiに関して、イメージファイルのバックアップはかなり有効だと思いますし、簡単なのでよかったらやってみてください。
それでは(^o^)
GCP-ACE試験対策[Cloud Identity でのユーザーの管理（手動および自動）]

> Cloud Identity でのユーザーの管理（手動および自動）

今回は、これについて。

Cloud Identityとは
> Cloud Identity とは
Cloud Identity は IDaaS（Identity as a Service）ソリューションであり、企業向けモバイル管理（EMM）サービスです。G Suite で利用できる ID サービスとエンドポイント管理をスタンドアロン型のサービスとして提供します。Cloud Identity を利用することで、管理者は Google 管理コンソールからユーザー、アプリ、デバイスを一元管理できます。

※GCPのサービスではなく、Google Cloudのサービス

要は、ID(メールアドレス?)を発行して、それを基に、様々なGoogleのアプリケーションの利用/管理できるよってこと？

こやつをGCPで使う利点
→ 個人用のメールアドレス等でGCPにログインしている場合、折角会社で管理できるプラットフォーム（Ｇ Suiteとか）持っているのに、管理の手が届かない。Cloud IdentityでもGCPにログインできるし、管理簡単になるよ。
v-ifでコンポーネントを消してもdestroyedが呼ばれない

# 概要
v-if でコンポーネント表示を切替したとき、非表示になったコンポーネントの destroyed() が呼ばれない場合があったので調査した。

# 🙆‍♂️想定通りの振る舞い

flag が false になったら Child.destroyed() が呼ばれるのを確認した。

```vuejs
<template>
  <div>
    <Child v-if="flag"></Child>
  </div>
</template>
```

# 🙅‍♂️想定外（destroyedが呼ばれなかった..）

flag の切替で別の Child コンポーネントを描画した場合は、Child.destroyed() は実行されなかった。

```vuejs
<template>
  <div>
    <Child v-if="flag"></Child>
    <Child v-else></Child>
  </div>
</template>
```

# 何が原因だったか

stack overflow で全く同じ疑問に対する回答があった。

* [why component is not destroyed under v-if](https://stackoverflow.com/questions/53085722/why-component-is-not-destroyed-under-v-if)

こちらの記事によると Vue の意図した振る舞いであるらしい。内部的にはコンポーネントを使い回している様子。

もし意図的に destroyed() を呼ばせたい場合は key に別の値を設定すれば良い。

```vuejs
<template>
  <div>
    <Child key="A" v-if="flag"></Child>
    <Child key="B" v-else></Child>
  </div>
</template>
```

flag 切替のたびに Child.destroyed() が呼ばれていることを確認できた。
【Flutter基礎】Expandedについて

# 概要

FlutterのWidgetの1つであるExpandedについて説明します。

# Expanded 

ExpandedというWidgetは、RowやColumnの子Widget間の隙間を目一杯埋めたいときに使います。

また、実装者は、Expandedを必ずRow、Column、Flexの子要素として配置します。
隙間を埋めるためのWidgetなので、そりゃそうだろうという感じですね。

実際に、Expandedを使用してみた実装、画面が以下になります。

```dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ExpandedPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Expanded"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Container(
                  height: 100,
                  color: Colors.blue,
                  child: Text("fix")
                ),
                Expanded(
                    child: Container(
                      color: Colors.orange,
                      child: Text("expanded"),
                    ))
              ],
            ),
            Expanded(
                child: Container(
                    color: Colors.grey
                )
            )
          ],
        ),
      ),
    );
  }
}
```

![Screenshot (2020_05_09 20_28_41).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/441085/3e641a3a-1a53-8097-e688-4798265a3ad6.png)

オレンジと灰色の部分が、Expandedの力によって目一杯隙間を埋めている部分になります。

# もう少し実用的な例

もう少し実用的な例だと、列状に一覧表示したいWidgetを、下のWidgetにぶつかるまで目一杯広げたい、という場面があるのではないかなぁと思います。
そんな場合だと、ExpandedとListViewというWidgetを使って、以下のように表現できます。

```dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ExpandedListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ExpandedList"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Expanded(
              child: ListView(
                children: <Widget>[
                  Text(
                    "item1",
                    style: TextStyle(fontSize: 30),
                  ),
                  Text(
                    "item2",
                    style: TextStyle(fontSize: 30),
                  ),
                  Text(
                    "item3",
                    style: TextStyle(fontSize: 30),
                  ),
                  Text(
                    "item4",
                    style: TextStyle(fontSize: 30),
                  ),
                  Text(
                    "item5",
                    style: TextStyle(fontSize: 30),
                  ),
                  Text(
                    "item6",
                    style: TextStyle(fontSize: 30),
                  ),
                ],
              ),
            ),
            Container(height: 500, color: Colors.grey)
          ],
        ),
      ),
    );
  }
}
```

![Screenshot (2020_05_09 20_29_21).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/441085/1e3decd8-e472-31fe-dd70-d04697209638.png)

下の灰色の部分は固定になっていて、ExpandedのおかげでListViewはそれより上の領域を目一杯使えるようになっています。(item6は隠れていますが、スクロールすれば確認できます)
Bootstrapとfont-awesomeをRailsにインストールするやり方　GitHubを参考に

# はじめに
Railsにデザインを整えるBootstrapとアイコンを使えるようになるfont-awesomeのgemを導入する方法を紹介します。それぞれのgemのGitHubのページを参考にしました。
#Bootstrapの導入方法
まずGemfileにgemを追加します。

```ruby:
gem 'bootstrap', '~> 4.4.1'
```
`sprockets-rails gem` がv2.3.2以上であることを確認しておいてください。
次に、`bundle insall`を実行して、サーバーを再起動します。

次はマニフェストファイルである`app/assets/stylesheets/application.scss`に読み込ませます。拡張子が.scssになっているか確認しとく。

```application.scss
@import "bootstrap";
```

Bootstrap JavaScriptはJQueryに依存しているので、Rails 5.1以上を利用している場合は、`jquery-rails` gem をGemfileに加える必要があります。

```ruby:
gem 'jquery-rails'
```
Bootstrapのツールチップ機能とポップオーバー機能は`popper.js` に依存していて、Bootstrap gemは`popper_js`に依存しているので、マニフェストファイルである`application.js`に次のように書き加える。

```application.js
//= require jquery3
//= require popper
//= require bootstrap-sprockets
```
`//= require jquery3`よりも前に`//= require_tree .`を記載するとエラーになるケースがあるので注意する。`//= require_tree .`で読み込んだファイルでjqueryのコードを参照していると`jquery3`が読み込まれる前に評価されるためメソッドが未定義となりエラーになる場合がある。

#font-awesomeの導入方法
まずはGemfileに追加する。

```ruby:
gem 'font-awesome-sass', '~> 5.12.0'
```
で、`bundle insall`をする。

font-awesomeをマニフェストファイルである`app/assets/stylesheets/application.scss`に読みこませる。（ここではscssを利用しているので、拡張子がscssになっています）

```application.scss
@import "font-awesome-sprockets";
@import "font-awesome";
```
`font-awesome-sprockets`ファイルには、フォントファイルへのパスを見つける機能が入っています。

#最後に
`application.scss`に読み込ませる際には、行末に`;`を忘れないでください！
`；`ではないです。大量のログを前に、筆者はこのミスを発見するのに1時間くらい費やしました。VScodeのサジェストがあったにもかかわらず、、、僕のようにはならないでください。

読んでくださり、ありがとうございます。

#参考文献
[GitHubのfont-awesomeインストール方法案内ページ](https://github.com/FortAwesome/font-awesome-sass#b-compass-without-rails)
[GitHubのBootstrapのインストール方法案内ページ](https://github.com/twbs/bootstrap-rubygem)
あなたはどのエンジニアの日常ルーティンに近い？

最近、 Youtubeで1日の日常ルーティン動画を観るのにハマってるんですが、あれ面白くないですか？
特に忙しい人がどんな感じで仕事をしているのか、どんな生活をしているのか、秘密を知れて面白いと思います。何か盗めるものがあれば盗みたい。。。
個人的にはHIKAKINさんの密着動画がかなり好き。

ただ、異業種の人なのであくまで観る側としては「ほえーすげー」って感じで終わってしまいます。
しかし、これが同じ業種のエンジニアの人なら？
特に、自分より大きい会社に勤めている会社のエンジニアの人なら？ちょっと覗いてみたくないですか？
後、最近Qiitaでもエンジニアを目指してる学生が多くなってきているので、会社でエンジニアってどういう風に仕事してるの？って感じで参考にしていただければなと。

## Twitter社のエンジニアの場合 / Day in the Life of a Twitter Software Engineer

[Twitter社のエンジニアの1日密着動画 / Day in the Life of a Twitter Software Engineer](https://youtu.be/sS6O7Yp5xmg)
![alt](http://img.youtube.com/vi/sS6O7Yp5xmg/sddefault.jpg)

- 06:30　起床
- 07:45　ジム
- 08:00　仕事へ行く準備
- 08:40　会社出勤
- 09:00　会社で朝食
- 09:20　コーディング（多分仕事開始
- 12:00　昼食（ビュッフェ形式で食べてる
- 12:40　昼食終わって仕事してるぽい
- 14:35　休憩
- 14:50　仕事再開
- 16:30　仕事終了
- 17:30　彼女とデート
- 22:15　友達と合流
- 00:45　帰宅
- 01:00　就寝

みんな大好きTwiiterのエンジニアの様子。
観るだけで大分リア充生活！！！

出勤時間とかは、自由っぽい感じがしますが時間帯自体は日本とそんなに変わらない感じ。ただ、撮影日が金曜だからってのもあるかもしれないですが、仕事終わるの4時って早すぎひんか？？？
後は大企業ってことがあると思いますが、社内？に食堂があったり、オフィスがオシャレだったり、かなり自由度が高い感じ。

## Instagram社のエンジニアの場合 /  Day In The Life of an Instagram Software Engineer
[Instagram社のエンジニアの1日密着動画 / Day In The Life of an Instagram Software Engineer
](https://youtu.be/3YrjvaWlbFA)
![alt](http://img.youtube.com/vi/3YrjvaWlbFA/sddefault.jpg)

- 07:20　起床
- 07:25　軽食
- 07:45　出勤（自宅出る
- 08:00　ジム
- 09:10　会社へ到着
- 09:50　朝食を食べたりシャワー浴びたり
- 10:00　仕事開始
- 12:20　昼食
- 13:00　会議
- 13:35　休憩（ボードゲームしたり、テレビゲームしたり
- 14:00　仕事再開
- 18:00　仕事終了
- 18:15　帰宅
- 18:30　運動？
- 20:30　夕食
- 11:30　就寝

お？？ちょっと親近感湧いてきたよ！
仕事へ行く時間だったり、就業時間だったりは日本とほとんど変わらない。
仕事中の風景とかも日本のIT企業と対して変わらない感じ。強いていうなら会社にボードゲームがあったり、テレビゲームがあるのはいいですね。エンジニアって仕事に集中すると、全く人と話さず1日が終了してることもあるので、コミュニケーションの場にはすごい良いですね。うちの会社も卓球台かビリヤード台置いてくれへんかな...。

## バンダイナムコスタジオ社員のゲームプログラマーの場合
[【朝から晩まで完全密着】バンダイナムコスタジオ社員の1日](https://www.youtube.com/watch?v=e_TxH59MclA&t=155s)
![alt](http://img.youtube.com/vi/e_TxH59MclA/sddefault.jpg)

- 08:15　起床
- 09:10　出勤（自宅出る
- 09:50　会社到着
- 10:00　仕事開始
- 12:00　昼食
- 13:00　仕事再開
- 10:00　仕事開始
- 14:00　ミーティング
- 14:30　小休憩（昼寝
- 17:00　ミーティング
- 18:00　日報作成とか
- 19:00　仕事終了
- 19:30　飲み会
- ??:?? 　帰宅
- ??:?? 　趣味の時間
- 00:00　就寝

...親近感しかない！！！（日本の企業だから当たり前）
大体の日本の企業の勤務体制とかほぼこんな感じだと思います。
バンダイナムコっていう大企業なので、オフィスが大きかったり、昼寝スペースがあったり、飲み物が無料で自由に飲めるとかは羨ましいですね。


### あなたに近いエンジニアの日常ルーティンは？
この記事で紹介したのは、3社3人分のものだけですが、youtubeではまだまだ色々な人のルーティン動画が見れるのでオススメです。(【検索ワード】day in the life engineer / エンジニア 密着 とかで出ます)
UberとかGoogleなどの社員の動画とかもあるので気になった人は検索してみたください。（ちな検索1位にいる方はおそらく日本人の女性の方っぽい。再生回数が飛び抜けてすごい）

へーエンジニアってこういう風に仕事してるんか！って参考にしていただけたら。（最初に紹介したTwitter社のものを基準と思うと大変な思いをすると思うので、あくまで参考程度に）


Qiitaは会社自体でやってるところも多いと思うので、弊社のエンジニアの1日ルーティンはこんな感じですよ！オフィスはこんな感じですよ！とか名乗りでて頂ければ嬉しいです。コメントでも「弊社はこんな感じやで！」ってものを大募集。自分に合った日常・目指したい日常を見つけようー！

...自分も仕事前にジム行こうかなあ。
PLEN Control ServerをViVi PLEN2に対応させる

ViVi PLENのキャリブレーションをTCP通信でコマンド直打ちでやっていたのだが、あまりにもまどろっこしいので、純正のPLEN Control Serverで行えないかを試してみた。
いくつか試行錯誤はあったが、何とか動くところまでこぎつけたので記録。

PLEN Control Serverとは：
PLEN2は無線通信をBlueToothによるシリアル通信で行っているが、その通信を請け負い、かつWebサーバとしてふるまうことでアプリケーションの開発を容易にできるもののようだ。

アプリケーション版とPython版の２種類があるが、当然ながらアプリケーション版は動かず。
そこでPython版をGithubから落としてきて中身を見てみた。
https://github.com/plenprojectcompany/plen-ControlServer

結論から言ってしまうと、次の３点を修正すればとりあえず動いた。
1.Control ServerとPLEN2の間のシリアル通信を確立させるのに、デバイス'Arduino Micro'をサーチし、接続を行っていた。ViVi Plenとの接続は有線シリアルなので、返り値として(自分の環境では)'COM3'を決め打ちにする。
2.通信速度の設定が自動で調整されない。115200で決め打ち。
3.自分の開発環境がPython3であったためと思われる違いを修正。
　Print分の構文
　Serial.write()に与える値がUTFでエラーを吐くため、Strに変更。Serial.write(str.encode())

しかしここで問題が発生。
現在のPLEN2とViVi PLENでは、ベースになっているバージョンが違うらしく、モーションファイルをViViにダウンロードさせようとしても出来なかった。

PLEN2のファームについて、該当部分をViVi PLENに移植を検討。

2020/05/10追記
ViVi PLENでは、モーションファイルをSPIFFSのファイルとして扱う。
それが2Mb、ほかのファイルが合計8Kb使うので、ArduinoIDEの設定でFSを3Mb確保する必要がある。

2020/05/16追記
firmware.ino
void setMotionHeader()内のm_header_tmpへの代入をオリジナルに合わせて変更

Protocol.cpp
30,   // MOTION HEADER
を
35,   // MOTION HEADER
に変更

JointController.cpp
組み立て説明書通りだとピンの位置とサーボの位置が一致しなかったので、
const unsigned char servo_map[PLEN2::JointController::SUM] = {16, 7, 6, 5, 4, 3, 2, 1, 0, 18, 19, 20, 17, 8, 9, 10, 11, 12, 13, 14, 15, 21, 22, 23};
の３番目と４番目の値を入れ替え
const unsigned char servo_map[PLEN2::JointController::SUM] = {16, 7, 5, 6, 4, 3, 2, 1, 0, 18, 19, 20, 17, 8, 9, 10, 11, 12, 13, 14, 15, 21, 22, 23};

これでシリアル経由だがPLEN Control ServerとViViが繋がった。
[Ruby]繰り返し処理のやり直し redo


Rubyで便利な繰り返し処理について、やり直したい時に使える"redo"の使用方法について、まとめてみました。

***


```
friends = ['キム','リー','アルフォンソ']
friends.each do |friend|
 print "#{friend}は一番の親友ですか? => "
 rank = ['ベストフレンド','中の上','よっ友'].sample
 puts rank

 #ベストフレンドでなければ、もう一度聞き直し無理やりベストフレンドと言わせる
 redo unless rank == 'ベストフレンド'
end
```

```
キムは一番の親友ですか? => 中の上
キムは一番の親友ですか? => よっ友
キムは一番の親友ですか? => 中の上
キムは一番の親友ですか? => ベストフレンド
リーは一番の親友ですか? => 中の上
リーは一番の親友ですか? => ベストフレンド
アルフォンソは一番の親友ですか? => ベストフレンド
```

上記のように、ベストフレンドというまで、何度も同じ質問が続きます。

##無限にやり直しを避けるために、_count_を使う

```
friends = ['キム','リー','アルフォンソ']
count = 0
friends.each do |friend|
 print "#{friend}は一番の親友ですか? => "
 # わざとベストフレンドと答えないようにする
 rank = ['中の上','よっ友'].sample
 puts rank

 
 count += 1
 #やり直しは3回までにする
 redo if rank != 'ベストフレンド' && count < 3

 #カウントをリセット
 count = 0
end
```

```
キムは一番の親友ですか? => よっ友
キムは一番の親友ですか? => よっ友
キムは一番の親友ですか? => 中の上
リーは一番の親友ですか? => 中の上
リーは一番の親友ですか? => よっ友
リーは一番の親友ですか? => よっ友
アルフォンソは一番の親友ですか? => 中の上
アルフォンソは一番の親友ですか? => よっ友
アルフォンソは一番の親友ですか? => よっ友
```
やり直しの回数をcountを使って制限できた。

##無限ループに気をつける
```
friends = ['キム','リー','アルフォンソ']
count = 0
friends.each do |friend|
 print "#{friend}は一番の親友ですか? => "
 # わざとベストフレンドを答えないようにする
 rank = ['中の上','よっ友'].sample
 puts rank

 
 count += 1
 #やり直しは3回までにする
 redo if rank != 'ベストフレンド' && count < 3

end
```
redo if rank != 'ベストフレンド' && count < 3行の下に、
  "count = 0" を入れ忘れると、無限ループする。




```
friends = ['キム','リー','アルフォンソ']
friends.each do |friend|
 print "#{friend}は一番の親友ですか? => "
 rank = ['ベストフレンド','中の上','よっ友'].sample
 puts rank

 #firstではなければ、もう一度聞き直し無理やりベストフレンドと言わせる
 redo unless rank == '親友'
end
```
また、カウント制限なしで、redoを使う際
redo unless rank == '親友'　のように配列の要素にない値を指定すると、これまた無限ループするので注意が必要です。
試してみたら、見事に無限ループしました、、、


>プロを目指す人のためのRuby入門
GNOME 3.32のパフォーマンス（Ubuntu 19.04）

これはUbuntuのデスクトップチームのDaniel Van Vugtが投稿した「[GNOME 3.32 performance (Ubuntu 19.04)](https://discourse.ubuntu.com/t/gnome-3-32-performance-ubuntu-19-04/10208)」を[許可をもらって](https://discourse.ubuntu.com/t/gnome-shell-performance-improvements-in-ubuntu-20-04/15972/10)日本語に翻訳したものです。Ubuntuのデスクトップのパフォーマンスにおいて、どんな改善が行われていたかがよくわかります。

内容的には短いのですが、19.10と20.04の同様の記事の前段階として読んでおくといいかもしれません。

# GNOME 3.32のパフォーマンス（Ubuntu 19.04）

すでにご存知の通り、GNOME 3.32では `gnome-shell` と `mutter` に対してパフォーマンスの改善が行われました。これらは4月にリリースされるUbuntu 19.04にもすべて取り込まれています。

しかしながらいくつかのものは、ここで説明しておきましょう……

:ballot_box_with_check: 3.32には以下のパフォーマンス改善策が取り込まれています：

* [アイコンスプリングのアニメーション（訳注：Super+Aなどでアプリ一覧を表示する際のアニメーション）がスムーズになりました](https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/253)（[19.04と18.10にもパッチを適用しており、18.04にも間もなく反映される予定です](https://launchpad.net/bugs/1750197)）
* [より大きなフレームレートのモニターのサポート](https://gitlab.gnome.org/GNOME/mutter/merge_requests/171)（[19.04と18.10にもパッチを適用しており、18.04にも間もなく反映される予定です](https://bugs.launchpad.net/ubuntu/+source/mutter/+bug/1763892)）
* [デスクトップの拡大鏡を用いたズームアウト処理が滑らかに](https://gitlab.gnome.org/GNOME/mutter/merge_requests/117)（[19.04と18.10にもパッチを適用しており、18.04にも間もなく反映される予定です](https://bugs.launchpad.net/ubuntu/+source/mutter/+bug/1767648)）
* GUIのスムーズさの邪魔になっていた[これ](https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/318)や[これ](https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/319)などのブロッキングIOを回避しました
* 見逃しているかもしれない他の人々による修正など

:x: 以下は3.32には **取り込まれていません** ：

* レイテンシーの改善策（[これ](https://gitlab.gnome.org/GNOME/mutter/merge_requests/168)や[これ](https://gitlab.gnome.org/GNOME/mutter/merge_requests/281)）、[フレームのドロップ](https://gitlab.gnome.org/GNOME/mutter/merge_requests/281)（とあとにわかった[これ](https://gitlab.gnome.org/GNOME/mutter/merge_requests/363)）[一部についてはUbuntu 19.04にパッチとして提供するつもりです](https://salsa.debian.org/gnome-team/mutter/merge_requests/27)
* [カーソルの移動時のCPU使用率の大幅な削減](https://gitlab.gnome.org/GNOME/mutter/merge_requests/189)
* [Waylandセッションにおけるマルチモニターサポートのハイパフォーマンス化](https://gitlab.gnome.org/GNOME/mutter/merge_requests/73)
* [スタッタリング](https://trello.com/c/Q6JYXPPs)や[CPUを使用しすぎる](https://trello.com/c/pe5mRmx7)問題への対応
Railsで別名の外部キーを設定する方法

#Railsで別名の外部キーを設定する方法

1対多のリレーションで別名の外部キーのカラム名を設定した記録です。

##背景
通常、1対多のリレーションではTeamモデルにはuserと書くことが多いが、
Teamの所有者であることを強調したいので別名カラム__owner__を設定する必要がありました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526570/659d672e-297c-e067-cd65-c34ee1873056.png)

## 目次
* [動作環境](#動作環境)
* [結論](#結論)
* [ポイント](#ポイント)
* [おわりに](#おわりに)

---------------------------------------
## 動作環境
`OS : macOS Mojave 10.14.6`
`ruby : 2.6.3p62`
`rails : 5.2.4`

## 結論
以下のステップで実現できました。
### STEP1.別名カラムをTeamsモデルに作成
#### マイグレーション

__1. 新規テーブルの場合__

```ruby:migrationfile1.rb
class CreateTeams < ActiveRecord::Migration[5.2]
  def change
    create_table :teams do |t|
      t.string :name
      t.integer :owner_id, index: true

      t.timestamps
    end
    add_foreign_key :teams, :users, column: :owner_id
  end
end
```
__2. 既存テーブルに追加する場合__

```ruby:migrationfile.rb
class AddUserRefToTeams < ActiveRecord::Migration[5.2]
  def change
    add_reference :teams, :owner, foreign_key: { to_table: :users }
  end
end
```

__マイグレーションの実行__

```bash:
rails db:migrate
```
```ruby:schema
  create_table "teams", force: :cascade do |t|
    t.string "name"
    t.integer "owner_id"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.string "icon"
    t.index ["owner_id"], name: "index_teams_on_owner_id"
  end

  add_foreign_key "teams", "users", column: "owner_id"
```

### STEP2.UserモデルとTeamモデルにリレーションを設定

```ruby:user.rb
class User < ApplicationRecord
  has_many :teams, foreign_key: :owner_id
end
```
```ruby:team.rb
class Team < ApplicationRecord
  belongs_to :owner, class_name: 'User', foreign_key: :owner_id
end
```

## 結果
以下のようにteam.ownerでチーム所有者のuser情報が取り出せています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526570/92a0d454-bf9a-49fa-b508-aaf9f444166c.png)

## ポイント

### リレーションにクラス名をつけること

userカラムの場合はteamモデルにclass_nameはつけませんが、
別名の場合はclass_nameをつけないとエラーになってしまいました。

```ruby
belongs_to :owner, class_name: 'User', foreign_key: :owner_id
```

## おわりに

今回の件で以下のことを学びました。
__別名外部キーの設定方法__
nodejsプロセスのデーモン化

# nodejsをサーバサイドで起動して常駐プロセス化する場合の選択肢
※expressなどのWebサーバとしての用途ではない場合

* [forever](https://www.npmjs.com/package/forever)を使う
* 別途OSレベルのデーモン化を行う。  
centos,ubuntuなら、Systemdに登録して運用とか。  
この場合は、pacakge.jsonもデプロイ先に配置して依存ライブラリをインストールする。  
dependencyをちゃんとruntimeに必要なもので整理する。
クラウド初心者のAWS入門(第1回)

# 第1章 AWSで構築しよう!!
クラウドスキル0の現行SESインフラエンジニアが、スキルアップのためにAWSを用いて、Webサーバを構築したいと思います。Qiitaへ投稿させていただくことや、マークダウン記述も初めてです。

見苦しい点が多々あると思いますが、よろしくお願いいたします。

## 記載に到る経緯とか
10年以上同じ現場(客先常駐)で、オンプレのインフラ構築を現在進行中で実施しています。
客先の人と作業環境さえ我慢すれば特に不満はありません。(これは不満かも)

また、インフラ構築だけでなく、工事業者さんや物流業者さんと作業内容の調整を行ったり、導入インフラの要件定義、エンドユーザ調整や運用保守も実施しています。
なので、基本的なインフラ構築の知識は広く浅く持っているつもりです。

以下のような方への足掛かりになれれば幸いです。
* クラウドインフラをはじめてみたいけど、何からはじめたら良いかわからない人
* 同じような境遇で転職やスキルアップのためにとりあえずAWSにふれてみたい人

## 進め方
以下のように進行していきます。

* [第0回 day1対応](https://qiita.com/Jerid/items/9f3df0e119b298e1f67a)
* 第1回 これ
* [第2回 ネットワーク構築](https://qiita.com/Jerid/items/d512adcf22abe05b3d49)
* [第3回 パブリックサブネット構築(1/2)](https://qiita.com/Jerid/items/066a3387dbf05f673fba)
* [第4回 パブリックサブネット構築(2/2)](https://qiita.com/Jerid/items/7b1b278773c4f863f310)
* [第5回 仮想サーバの構築](https://qiita.com/Jerid/items/12566ac83301e8f32c30)
* [第6回 Apacheのインストール](https://qiita.com/Jerid/items/075092451420451bc4e9)
* [第7回 DNSの設定](https://qiita.com/Jerid/items/b6fe1e8ad61aafb2b9cd)
* [第8回 プライベートサブネットの構築](https://qiita.com/Jerid/items/3e0ca58deeb4c1ae1299)
* [第9回 NATゲートウェイの構築](https://qiita.com/Jerid/items/ced7af415545a82f431d)
* [第10回 MariaDBのインストール](https://qiita.com/Jerid/items/dc5c029831e3b1b31f71)
* [第11回 WordPressのインストール](https://qiita.com/Jerid/items/92bddc99df6f6f509204)

次回から本格的に始めていきます。

# 参考文献
以下参考書をベースに勉強しながら投稿をさせていただきたいと思います。

[Amazon Web Services 基礎からのネットワーク&サーバー構築](https://shop.nikkeibp.co.jp/front/commodity/0000/231260/)

# 後書き
2020年6月13日に記載内容を修正しております。
Xcodeでの外部ファイルの扱い方

# Xcodeで外部ファイルにアクセスするには？
Xcodeで作成したアプリは、通常設定では、外部ファイルにアクセスできません。
そこで、Xcodeの設定をいじって、外部ファイルにアクセスする方法を紹介します。

#手取り早く紹介
##まずはXcodeに権限を与える
![スクリーンショット 2020-05-09 19.59.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634761/8731f76a-52f2-0f38-702d-60d7993ca341.png)
環境設定のセキュリティとプライバシーを選択し、フルディスクアクセスにXcodeを加えます。

##次にXcode側の設定を行う
![スクリーンショット 2020-05-09 20.04.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634761/9cf304b3-6d62-8995-f379-29e01f848992.png)
Xcodeを開き、コーディング画面を開いたら、「〜.entitlements」を開き、
![スクリーンショット 2020-05-09 20.04.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634761/142032b9-bb87-5ca8-0353-e86ab8a09bc0.png)
App SandboxのValueを「NO」にします。

##完了!
あとは、Coding!
csvファイルを読み込みたいときは、

```ruby:Swift
var str = ""
var importURL:URL = URL(fileURLWithPath: "絶対パス.csv")
        do {
            str = try String( contentsOf: importURL, encoding: String.Encoding.utf8 )
        } catch {
            print(error)
        }
```

csvファイルを書き出したいときは、

```ruby:Swift
var exportURL:URL = URL(fileURLWithPath: "絶対パス.csv")
do {
    let exportString = "ハンターハンターは、いつ再開するのでしょうか？"
    try exportString.write(to: exportURL, atomically: true, encoding: .utf8)
} catch {
    print(error)
}
```

こんな感じで書けると思います。
FlaskのHTMLテンプレートの設定

# はじめに

ここでは、FlaskのHTMLテンプレートファイルの作成方法について解説します。


# HTMLファイルにおける変数、関数の埋め込み

HTMLファイル内で、`{{ 変数名 }}`とすると、ビュー関数から渡された変数をHTMLファイル内に埋め込むことができます。
また、`{% 関数名(引数1 引数2 ...) %}`とすることで、関数を用いて表示内容を制御することもできます。


## レコード一覧の表示

レコード一覧を`{% for %}`を用いて一つずつ取り出して、表示します。

```html:app/samplemodel_list.html
{% for sample in table %}
    <h1>{{ sample[char_sample] }}</h1>
    <p>{{ sample[text_sample] }}</p>
{% endfor %}
```


## 個々のレコードの表示

個々のレコードは`テーブル名[カラム名]`とすることで表示することができます。

```html:app/samplemodel_detail.html
<h1>{{ sample[char_sample] }}</h1>
<p>{{ sample[text_sample] }}</p>
```


# まとめ

ここでは、FlaskのHTMLテンプレート作成の基本について解説しました。
次回は、テンプレートの継承やカスタムタグの作成について取り上げる予定です。
Git初心者に伝えたい現場で最低限覚えておきたいコマンド

# はじめに

未経験から自社開発企業に入社して、約半年が経ちました。今は、ありがたいことに開発のプロジェクトに参画して、コードを書く仕事をさせてもらっています。

現場で使っているうちに自然と覚えていったGitコマンドを、「ブランチを切って、マージリクエスト（プルリクエスト ）を出す」までの一連の流れで、紹介しようと思います。

ただでさえ覚えることが多すぎて困っているのに、どのコマンドを覚えれば、という方の参考になれば、と思います。

間違い等がある場合ご指摘いただけれると幸いです。

前提条件として、
1. Gitをなんとなく知っている
2. ローカルとリモートの違いを知っている
3. 対象のリポジトリをgit clone済み
ぐらいであると、本記事を参考にしやすいと思います。

## 1. ローカルでブランチを切り、そのブランチに切り替える。
```
git checkout -b ブランチ名
```
masterブランチでこのコマンドを実行すると、記入した「ブランチ名」のブランチが作成され、同時にその新しいブランチに切り替わります。

```
git checkout hogehoge
```
は現在すでに存在する、ブランチ名が「hogehoge」のブランチに切り替えるという意味になります。

これに、オプションである-bを付け足すことで、新規のブランチが作成され、そのブランチに切り替わる挙動になります。

## 2. 変更されたファイルを確認する。
```
git status
```
このコマンドによって、自分が変更を加えたファイルを列挙してくれます。
これから変更をコミットする（記録する）の事前準備で、自分が触ったファイルの確認を行います。

## 3. ファイルの差分を確認する。
```
git diff ファイル名
```
2の「git status」コマンドによって、列挙されたファイルで自分がどういう変更を行ったかの差分を確認できます。

これによって、デバッグ関数の消し忘れなど、意図しない変更が混入していないかをチェックすると良いでしょう。

## 4. コミットするファイルを選択する。
```
git add ファイル名
```
2の「git status」と3の「git diff」コマンドによって、自分がファイルに加えた変更、もしくは新しく作成したファイルが、コミットできるものだと確認できたら、このコマンドで「コミットリスト」に登録するわけです。

＊コミットリストという言葉はあくまで例えです。

## 5. メッセージ付きでコミットする。
```
git commit -m "文章"
```
4の「git add」によって選択された新規ファイルや変更をログとして記録します。

コミットを何度もしていると、何を修正したかわからなくなる、なんてことがあるので、「-m」というオプションをつけることで、メモ代わりにしたり、他の開発者に自分の変更意図を伝えることができます。

あと、コミットをこまめにしておくと、後々解消したいコミットが出てきた場合、修正する労力が少なくて済みます。

## 6. 最後にリモートにプッシュする。
```
git push
```
もし、リモートに今のブランチがなければ、

``` 
git push --set-upstream origin ブランチ名
```
を実行してください、とメッセージが出ると思いますが、このコマンドを実行して大丈夫です。


以上で、紹介したい必要最低限のgitコマンドは終わりです。

上記のコマンドだけでとりあえず、自分の変更したブランチをリモートに送ることができます。

あとは、リモートで、マージリクエスト（GitLab）、もしくはプルリクエスト （GitHub）を出しましょう。


## オマケその１〜プッシュする前にコンフリクトをローカルで解消する。
自分の変更したファイルを、他の開発者の方もいじっていた時に、コンフリクトが生じてしまうことがあります。

GitLabやGitHubでは、マージリクエストを出すとコンフリクトが生じていることを検知して知らせてくれますが、先にローカルでコンフリクトの有無を調べておきたい場合の対処法を紹介したいと思います。


特に、長期的に一つのブランチを持ってしまっていて、マスターにどんどん変更が加えられていっている場合は、これを定期的に実行しても良いかと思います。

### 1. 今のブランチからマスターに切り替える
```
git checkout master
```

### 2. リモートのマスターブランチの内容をローカルに反映する。
```
git pull
```

### 3. 元のブランチに切り替える。
```
git checkout ブランチ名
```

### 4. ローカルのマスターブランチを、今のブランチにマージする。
```
git merge master
```

この時点でコンフリクトがある場合、コンフリクトが生じているファイル名を表示してくれます。

## オマケその２〜知っておくと便利なコマンド
自分で使っていて覚えてしまったコマンドで、知っておくと便利かもというものを紹介します。

### 1. 今ローカルにある全ブランチを表示する。
```
git branch -a
```

### 2. リモートにあるけど、ローカルにはないブランチを持って来たい。
```
git fetch
```

### 3. コミットの履歴を見たい。
```
git log
```
メッセージ分とコミットのIDを表示してくれます。
### 4. 特定のコミットをなかったことにしたい。
```
git revert コミットのID
```