OmniAICreator/Qiita-1.07M huggingface dataset:
【Rails】QRコードを表示する

RailsアプリでQRコードを表示したい案件があったので、その時に利用したGem: [rqrcode](https://github.com/whomwah/rqrcode) について紹介します。

# バージョン情報

* ruby 2.6.2
* rails 6.0.3.7
* rqrcode 2.0.0

# Gemのインストール

Gemfileにrqrcodeを追加して、bundle installを実行します。

```ruby:Gemfile
gem "rqrcode", "~> 2.0"
```

```shell:ターミナル
$ bundle
```

# QRコードの生成

Viewに表示したいので、HelperにQRコード生成用の処理を記載します。
SVG、PNG、ANSI形式がありますが、今回はSVG形式で表示します。

```ruby:helper.rb
def qrcode
  qrcode = RQRCode::QRCode.new("https://github.com/")
  svg = qrcode.as_svg(
    color: "000",
    shape_rendering: "crispEdges",
    module_size: 6,
    standalone: true,
    use_path: true
  ).html_safe
end
```

```ruby:html.erb
<%= qrcode %>
```

画面にQRコードが表示されました!

![QRコード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237203/e05d576e-a59c-f17b-dbab-b266279b4d48.png)


## SVGのオプション

各オプションが何なのか気になったので調べました。

### offset

QRコード周りのパディングをpx単位で指定出来ます。デフォルトは`0`です。

### fill

QRコードの背景色を指定出来ます。デフォルトは`なし`です。
例) 青を指定

```ruby
qrcode = RQRCode::QRCode.new("https://github.com/")
qrcode.as_svg(
  fill: "0000FF",
  color: "000",
  shape_rendering: "crispEdges",
  module_size: 6,
  standalone: true,
  use_path: true
).html_safe
```
![QRコード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237203/d8be2e3c-8bad-c841-e586-f78f31ae9b65.png)

### color

QRコードの色を指定出来ます。 デフォルトは`000`です。
例) 緑を指定

```ruby
qrcode = RQRCode::QRCode.new("https://github.com/")
qrcode.as_svg(
  color: "008000",
  shape_rendering: "crispEdges",
  module_size: 6,
  standalone: true,
  use_path: true
).html_safe
```
![QRコード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237203/78c05538-f3a2-bd0e-1c08-5b5c6d6ff47f.png)

### module_size

QRコードのサイズをpx単位で指定出来ます。 デフォルトは`11`です。

### shape_rendering

SVGのshape-rendering属性を指定出来ます。 デフォルトは`crispEdges`です。
shape-rendering属性は、SVGをレンダリングするときにどのようなトレードオフを行うかを指定する属性のようです。
下記4種類から選択します。

* auto: バランスよくレンダリングを行います
* crispEdges: アートワークのエッジのコントラストを重視します
* optimizeSpeed: レンダリング速度を重視します
* geometricPrecision: 幾何学的な精度を重視します


左から auto, crispEdges, optimizeSpeed, geometricPrecision です。
(QRコードだと違いがあまり分からない...)
![QRコード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/237203/805f608c-8a13-69b0-485d-9d7f14b2e78c.png)

### standalone

完全なSVGファイルとして扱う(`true`)か、他のsvgファイルに埋め込むためのSVGとして扱う(`false`)かを選択します。
デフォルトは`true`です。

### use_path

SVGのレンダリングにパスで描画する(`true`)か四角形で描画する(`false`)かを選択します。
デフォルトは`false`です。(将来のバージョンではデフォルトは`true`になる予定)
パスの方がサイズを大幅に削減でき、品質が向上するらしい？

### viewbox

`svg.width`と`svg.height`を`svg.viewBox`に置き換えるか選択します。
デフォルトは`false`です。

### svg_attributes

カスタムでSVGの属性を設定できます。デフォルトは`{}`です。
[JavaScript] 16進数表現の罠

先日の[PHP版](https://qiita.com/Yggdrasil-Leaves/items/5876c7d6b2e96e90eeb4)のついでに。
似たような事情ではありますが、こちらはわりと歴史的な現象のようで。
しかし今まで気にしたこともなかった驚愕の事実。

## 大きい値が浮動小数扱いな件
```javascript:underflow.js
console.log((0xfedcba98765438ff).toString(16));
console.log((0xfedcba9876543cff).toString(16));
```
fedcba9876543800
fedcba9876544000

符号+仮数部の53bitで下側が消滅します。
さらに、四捨五入というか零捨一入で上側まで破壊される問題もあり。


## そもそもintがsigned 32bitな件
```javascript:msb.js
console.log(1<<31);
```
-2147483648

しかし16進数表記はより大きい値でも受け入れるので、ややこしい事態に…


## なんか壊れてる件
```javascript:broken.js
console.log((0x40000000<<1).toString(16)); // 80000000 になってほしいのに 
console.log((0x80000000>>1).toString(16)); // c0000000 になってほしいのに 
console.log((0x80000000|1).toString(16)); // 80000001 になってほしいのに 
```
-80000000
-40000000
-7fffffff

### 論理演算自体は正常
```javascript:ok.js
console.log(0x40000000<<1); // 80000000 → -2147483648 
console.log(0x80000000>>1); // c0000000 → -1073741824 
console.log(0x80000000|1); // 80000001 → -2147483647 
```
-2147483648
-1073741824
-2147483647

toString(16) が符号外して処理されるようで。
16進表記が符号なしで解釈されるなら、必然的な仕様といえるでしょう。

## というわけで…

32bit前提なら、int→16進文字列変換さえ正常化すれば何とか。

```javascript:dexhex32.js
var dechex32=function(src){
	// 16bitずつ文字列化作戦 
	var h=(src>>16)&0xffff;
	var l=src&0xffff;
	// 上側が0なときは下側だけ表示 
	if(!h)return l.toString(16);
	// 上側があるとき下側は必ず4桁 
	return h.toString(16)+('000'+l.toString(16)).slice(-4);
};

console.log(dechex32(0x40000000<<1));
console.log(dechex32(0x80000000>>1));
console.log(dechex32(0x80000000|1));
```
80000000
c0000000
80000001
Rails データベース作成時に出たエラー

# エラー

```
========================================
  Your Yarn packages are out of date!
  Please run `yarn install --check-files` to update.
========================================
To disable this check, please change `check_yarn_integrity`
to `false` in your webpacker config file (config/webpacker.yml).
yarn check v1.22.10
success Folder in sync.
Done in 0.10s.
yarn check v1.22.10
error "vue-loader#@vue/component-compiler-utils#lru-cache#yallist" is wrong version: expected "^2.1.2", got "3.1.1"
error Found 1 errors.
info Visit https://yarnpkg.com/en/docs/cli/check for documentation about this command.
```

## エラーの解決

エラー文の以下の内容から、`` yarn.lock (Gemfile.lockの様なもの) `` の内容と別のバージョンが入っている可能性があったので、一旦インストール済みのものを全て削除して再インストールして整合性を取る。つまり、`` node_modules `` ディレクトリを削除してから `` yarn install `` を実行する。

```
error "vue-loader#@vue/component-compiler-utils#lru-cache#yallist" is wrong version: expected "^2.1.2", got "3.1.1"
```

## node_modules ディレクトリ削除のコマンド

``` rm -r node_modules ```
個人勉強メモ(docker,kinux等)

# メモ
個人勉強メモ。
## docker
PCにコンテナと呼ばれる仮想環境を構築できるやつ。
##### PCにあるコンテナの情報(コンテナの名前など)の一覧を取得
```
docker ps -a
```
#####  コンテナに入る
```
docker exec -it contena_name bash
```
#####  コンテナを抜ける
```
exit
```
#####  コンテナ起動
```
docker start contena_name
```
#####  コンテナ停止
```
docker stop contena_name
```
#####  コンテナ作成例
```
docker container run --name=contena_name --ipc host --shm-size=512m -v /home/roowada:/workspace -p6006:6006 -it nvcr.io/nvidia/tensorflow:21.03-tf1-py3
```
##### マウントパスの確認
```
docker inspect コンテナID
```
を実行してマウントのところで見れる。
## `pip`と`pip3`について
補足： pip3 -> pip と読み替えたのは意味があります。
pip3は、python2用と見分けるため、「python3用のpip」という意味でこういう命名になっています。
一方 pip -V をしたところ、バージョンに3.5と出てきたので、こちらもpython3用だと分かりました。
おそらく pipはpip3のエイリアス（別名）であろう、つまり両者はイコールな存在だと推測しました。
・・・という考えでやっているので、動かないコマンドをまったく適当に無視しているわけじゃないです。考えた上で、時に大胆にドキュメントを無視することがあります。
(`pip3`を`pip`で実行した時の上司談)

## 長いコードの折り畳みテンプレ

<details><summary>実行結果はこちら</summary><div>

```c++

```

</div></details>
Nuxt.jsとYubinBangoを組み合わせて使う

郵便番号からの住所検索をいい感じに実装したくて調べたが、どれもこれも帯に短し襷に長しのよう。
自分の要件にFitしそうな↓をベースにしました。
- https://ryus.dev/articles/2020-12-01-auto-zipcode

まずはscriptタグでyubinbango-core.jsを読み込み。

```nuxt.config.js
  head: {
    script: [
      {
        src: "https://yubinbango.github.io/yubinbango-core/yubinbango-core.js",
      },
    ],
  },
```

ロジックはpluginsに置くことにする。Promiseでいい感じにしておく。

```plugins/yubinbango.js
import Vue from "vue";

const yubinbango= function (zipCode) {
  return new Promise(
    (resolve) => new YubinBango.Core(zipCode, (address) => resolve(address))
  );
};

Vue.prototype.$yubinbango= yubinbango;
```

で、書いたコードをpluginsに追加。

```nuxt.config.js
  plugins: [
    { src: "~/plugins/yubinbango.js" },
  ],
```

動く。

```sample.vue
<template>
  <label>郵便番号<input v-model="zipCode" type="input" /></label>
  <label>住所<input v-model="address" type="input" /></label>
</template>

<script>
export default {
  data: () => ({
    zipCode: "",
    address: "",
  }),

  watch: {
    zipCode(zipCode) {
      this.$yubinbango(zipCode).then(
        (addr) => (this.address = addr.locality + addr.street)
      );
    },
  },
};
</script>


```
◆電子書籍と紙の書籍、実用性の比較

## はじめに

**学習に使うとしたら、電子書籍と紙の書籍、それぞれの実用性・効率具合はどんな違いがあるだろうか。**

ということで、電子書籍と紙の書籍のメリット・デメリットを記載してみました。

オンラインコミュニティで議題が出た部分も参考にしつつ、
今回、自分の感性を記事にしてみたいと思い、初めてのQita記事を掲載いたします。

自分が本を購入する時の軸でもあるので、同じ悩みを持つ人がいたら参考にしてもらえたら良いかなと。

## ＜電子書籍＞
### メリット
#### ◎　何十冊もの書籍を一度に持ち歩ける
ページ数が多くとも、大型本であっても、物として積まれず、重量もない。
データとしての容量管理が必要なくらいで、数十冊の書籍を持ち込める。

#### ◎　検索機能が使える
関連用語へのページジャンプや索引に載っていない用語をネット検索することもできる。

#### ◎　マーカーやブックマークの付け外しができる
マーカーを付けるだけでなく外すこともできるため、穴埋め的な学習方法をとる際も有効。

#### ◎　コピー＆ペーストができる
ソースコードの記載が多い技術書は、検証の都度、コピー＆ペーストができると大幅な時間短縮にも繋がる。

#### ◎　レイアウトを変えられる
文字の大きさや画面の明るさなどを調整し、個人の好みの環境に合わせられる。

#### ◎　読み放題サービスの対象書籍なら低コストで即時試し読みができる。
Kindle Unlimitedのように月額サービスを使って、技術書を含め多くの分野で書籍が読める。
読者レビューを参考に書籍の全体像が掴める。

#### ◎　電子書籍ー読み上げ書籍化(オーディオブック)
外の環境では使いづらいが、「書き言葉」を「話し言葉」に変えることで眼精疲労の抑制が期待できる。



### デメリット
#### △　電源供給やネット環境が必要。
スマホやノートPC、ポケットWi-fiのバッテリーに依存する。

#### △　集中力が散漫しやすい
スマホやPCなどのデバイス内で出来ることが多いため、マルチタスクになりやすい。
両手が塞がる心配のない分、ながら作業で読めてしまう。

#### △　速読のようなパラパラ読みが出来ない
著者の文章構成や図解の見やすさ、翻訳の正確性などで自分にとっての読みやすい一冊も変わってくる。
全体の試し読みができず、自分に合うかどうか、新品同様の価格で購入してから確認するのはリスクが高い。



# ＜紙の書籍＞
### メリット
#### ◎　読み貸し・譲渡ができる
中古での購入や売却、図書館での借り入れ等で購入費用を抑えることが可能。
特に、所持していた本の改訂版が発行された際には、第１版を売却⇨第二版を購入といった形で書籍のアップグレードが低コストとなる。

#### ◎　読み返しがしやすい
問題集や図解系の本は、前章での内容が登場したり、応用した部分が出ることもあるため、ページを跨いで読み比べるといった見直し学習ができる。

#### ◎　電子書籍よりも記憶が定着しやすい。
本に集中が向くため、シングルタスク化した学習ができる。

### デメリット
#### △　入手するまでの時間がかかる
通販での郵送日数であったり、直接購入のために書店に行く必要があったりと、入手までの手間がある。

#### △　書籍がインテリア化してしまい、積読の状態になってしまう
所有欲だけで購入しコレクション化してしまうと、本を開く機会自体が失われてしまう

#### △　劣化しやすい
太陽光での色褪せや汚れ、破れ、水濡れ等によって、書籍の安全性が保たれない。


# 終わりに
個人的な使い分けとしては、以下のような感じです。

**入門書に近い本は、紙の書籍でまずはお試し。読んで全体の構造に慣れることを意識して学習。（インプット主体）
↓
次のステップアップに初心者〜中級者向けの技術書を電子書籍で購入し、コピー＆ペースト等も活用しつつ学習。（アウトプット主体）**

**《その他》
周囲からのおすすめ本はベスト化してたりもするので、電子書籍で購入し、一生モノにする。**

## おわりに

技術書となると、初心者としては一冊一冊が高価に感じますし、読むからには効果的に活用していきたいものです。
それぞれの一長一短を使い分けて、無駄のない学習をしていきましょう。
文字のbyte配列変換について

文字コード表（UTF-8の場合）
ひらがなは、UTF-8だと3バイト文字と定義されている
「あ」を例にすると、以下のようになっている
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15241/0bf48eb4-a438-7e76-63c8-ab9ef0402de5.png)
http://orange-factory.com/sample/utf8/code3/e3.html#Hiragana


文字からバイト配列を取得すると、以下のようになる
3バイト文字なので、配列の要素数は3つとなり、各要素に、上記表の10進数値が格納されている
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/15241/6aedaadf-ce29-f4bf-fffb-87af2ec9f9ad.png)

文字列をバイト配列に変換するということはよくやるけど、
格納されている値の意味まできちんと考えたことが無かったので自分用にメモしておく
Twitter Filtered stream APIのオプションパラメータ備忘録

Twitter Filtered stream APIのオプションパラメータが複雑だったので、自分の忘備録としてメモしておきます。
分かったことは追記していく(つもりです)
体裁とかはのちのち整えておきます

また、Twitter APIは複雑で、いろんなところに定義が散らばってるので別の記事にまとめなおすかもしれません。その時はこの記事からリンクを貼るつもりです。

# パラメータのすべて
リファレンスページは以下のページになります。
https://developer.twitter.com/en/docs/twitter-api/tweets/filtered-stream/api-reference/get-tweets-search-stream

# Query parameters
## Expantions
デフォルトの情報以外の情報を取得するときにこのパラメーターを指定する。

### `author_id`

#### 追加されるデータ
`data.author_id`
`includes.users`

#### 得られる内容
ツイート作成者のID

#### 備考
RTだったらRTした人、リプライだったらリプライした人

ツイートを収集するときにこの値を使ってしまうと、元ツイとRTされたツイの作成者が別になってしまうため注意（RTを省くルールであったり、わざと使うのであればあまり問題ない）

### `referenced_tweets.id`

#### 追加されるデータ

`data.referenced_tweets.type`
`data.referenced_tweets.id`
`includes.tweets`

#### 得られる内容
元ツイID

#### 備考
取得したツイートが元ツイ（RTでもリプでもない）場合は`data.referenced_tweets`がない
RTされたツイートだった場合、`type="retweeted"`になる。
リプは試してないので分からない

### `referenced_tweets.id.author_id`
#### 追加されるデータ
たぶん
`includes.tweets[].author_id`

#### 得られる内容
元ツイの作成者

#### 備考
`tweet.fields`の`author_id`とどう違うのかは未確認
[React] Routerの使い方


#React Routerの簡単な使い方
まず、＜Router＞...＜/Router＞で全体を囲み、
ルーティング先のコンポーネントを＜Switch＞...＜/Switch＞で囲みます。例えばページ共通のヘッダーやフッターがある場合には＜Switch＞...＜/Switch＞の外に出しておきます。


```jsx:App.jsx
const App = () => {
  return (
    <Router>
      <Switch>
        // 店舗一覧ページ
        <Route
          exact
          path="/restaurants"
        >
          <Restaurants />
        </Route>
        // フード一覧ページ
        <Route
          exact
          path="/foods"
        >
          <Foods />
        </Route>
        // 注文ページ
        <Route
          exact
          path="/orders"
        >
          <Orders />
        </Route>
      </Switch>
    </Router>
  )
}

export default App
```

さらに、実際に１ページへのルーティングを表すのが＜Route＞...＜/Route＞です。
ここでは＜Restaurants /＞など１つずつを囲っているのが分かります。
そしてこの<Route>にpropsを渡すことでリクエストに対応して囲ったコンポーネントを描画します。

例えば以下では

```jsx:App.jsx
<Route
  exact
  path="/restaurants">
  <Restaurants />
</Route>
```

`path="設定したいPATH"`となります。またexactというpropsはデフォルトではfalseになっており、ここをtrueにする(exact={true}と明示しなくても、exactとするだけでOK)ことで、PATHの完全一致の場合にのみコンポーネントをレンダリングします。この場合localhost:3000/restaurantsで＜Restaurants /＞がレンダリングされます。しかし、localhost:3000/restaurants/1の場合には無視されます。もしexactにしていなければ、localhost:3000/restaurants/1の場合にもマッチしてしまいますので注意しましょう。

#ルーティングした時にpropsを渡す方法
フード一覧ページでは、一つ手を加える必要があります。
　
フード一覧ページのURLは/restaurants/${restaurantsId}/foodsとします。その場合に<Foods />はrestaurantsIdをpropsとして受け取らなければなりません。restaurantsIdをもとにAPIコールをするのが<Foods />の役割だからです。

では、React RouterでどうやってPATHからパラメーターを抽出してコンポーネントに渡せばいいのでしょうか？まずは/Foods.jsxでpropsを受け取って画面に表示するように修正します。

propsとは親・子コンポーネント間でのデータの「受け渡し口」のようなものです。
親コンポーネントから渡したいデータをpropsという箱に入れ、子コンポーネントもpropsという箱を受け取れるようにし、子コンポーネントの中でpropsの箱の中のデータを参照します。
このpropsには２つの書き方があります。

```jsx
export const ChildComponent = (props) => {
  // (1) props.idの方法で取得する方法
  const hoge = () => { props.id }
}
```

```jsx
export const ChildComponent = ({ id }) => {
  // (2) { id },と直接key名を指定してデータを参照する方法
  const hoge = () => { id }
}
```

以下では例えばhttp://localhost:3000/restaurants/1/foods/
のようなURLでアクセスが来た場合に、
「restaurantsIdは 1 です」という文字列が画面に表示されることを期待します。

```jsx:Foods.jsx
import React, { Fragment } from 'react';

export const Foods = ({
  match
}) => {
  return (
    <Fragment>
      フード一覧
      <p>
      restaurantsIdは {match.params.restaurantsId} です
      </p>
    </Fragment>
  )
}
```

React Routerの場合matchオブジェクトを受け取り、match.params.hogeのかたちでパラメーターを抽出することができます。

そして、export先のApp.jsxもこのように変更します。

```jsx:App.jsx
<Route
  exact
  path="/restaurants/:restaurantsId/foods"
  render={({ match }) =>
    <Foods
      match={match}
    />
}
/>
```


とすることで、コンポーネントにmatchというpropsを渡しながら、設定したPATHに対応するリクエストがあった場合にパラメーターと一緒にコンポーネントをレンダリングします。

path="/restaurants/:restaurantsId/foods"という部分は、パラメーターとして設定したい部分は「:paramsName」と、:を付けます。
Wiresharkで許可がないと言われたとき【備忘録】

##　動機
Wiresharkのキャプチャをしようとしたら「許可がない」と言われたので解消。
##　環境
- Archlinux
- Wireshark 3.4.6

## 理由
おそらくログインしているユーザーが`wireshark` を使用する権限を持っていない　(作成時の`sudo`や`root`が使えない理由と同じと思われる。)。

## 解決
ユーザーに権限を渡す
###　1.　まず権限を確認
```bash
$ id {username}
```

`${username}`は`wireshark`を使用したいユーザー名に変更して下さい。
ここで

```bash
wireshark:x:{num}:{username}
```
のような記述がある場合、別のものが原因なのでその場合はまた調べてみてください。
また

```bash
$ id {username} | grep {username}
```
などで簡潔に表示させても問題ないでしょう。

### 2.権限を追加
1　で権限がないことが確認できたら、`usermod`を用いて権限を追加します。

```bash
$ sudo usermod -aG wireshark {username}
```
1と同じコマンドで確認して`wireshark`から始まるものが追加されていれば無事権限が追加されているのでキャプチャがうまく動作するはずです。

###　備考
- `-aG`は補助グループ群に追加しかつ他グループからの削除を行わない`-append`と追加するグループしていをする`-group`を同時にオプションで指定しています。(参考：[ユーザーとグループ - Archwiki](https://wiki.archlinux.jp/index.php/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%81%A8%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97))
- ユーザーが所有している権限の一覧は`/etc/group` に記載されているはずなのでそちらも確認するといいかもしれません。
- この記事作成にあたり参考にしたサイト　[UbuntuにWiresharkをインストールする。](https://www.khstasaba.com/?p=348)
「SwiftUI 徹底入門」の CHAPTER 12 の エラーの解消方法

# 環境

@2021/6/29
Xcode 12.5

# エラー内容

kindle で購入した [SwiftUI 徹底入門](https://www.amazon.co.jp/dp/B082XNM5Q5/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1) という本の CHAPTER 12 にあるサンプルアプリの``Preview.swift``というファイルを作成し、プレビューを見ようとしたが、``Cannot preview in this file - Tapioca milk tea crashed`` というエラーが出た。

# 解消方法

[Apple公式のチュートリアル](https://developer.apple.com/tutorials/swiftui/interfacing-with-uikit) に記載のコードに直すと解消された。
この本の発売日が 2019/12/20 で時間が経過しているため、バージョンの違いによる可能性がある。

修正箇所は以下
``PageViewController.swift``：全てコピペして上書き
``PageView.swift``：``Apple公式のチュートリアル``の書き方に直す
``HomeView.swift``：``PageView``の引数に``page:``を付ける
Sprockets::DoubleLinkError エラー

ものすごく初歩的なところでミスしてしまっていたので今後のことも兼ねて
メモとして残したいと思います。

#エラー内容
```
Sprockets::DoubleLinkError
```
railsにてerbファイルを作成して、rails sでサーバーを起動してcssを読み込もうと思ったところでこのようなエラーに遭遇しました。

ターミナルにてエラー箇所の内容を確認してみたところ下記のような記述がありました。

```ruby
ActionView::Template::Error (Multiple files with the same output path cannot be linked ("application.css")
In "/Users/OO/projects/websiteapp/app/assets/config/manifest.js" these files were linked:
  - /Users/OO/projects/websiteapp/app/assets/stylesheets/application.css
  - /Users/OO/projects/websiteapp/app/assets/stylesheets/application.scss
):
```

調べてみたところrails newで新規でアプリケーションを作成する際に自動生成されるview/layout/application.html.erbを参照しているようです。

```ruby
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
```

#原因
特に何も考えずscssファイルを作成していたのが原因だったようです、application.cssに実装したい記述を書いてみたら無事に反映されました。
CakePHP2のController, Componentのコールバック実行順序

CakePHP2のController, Componentのコールバック実行順序を以前どこかでみかけたと思ったんですが、発見できなかったので改めて調べました。

1. Component:initialize  
2. Controller:beforeFilter        
3. Component:startup     
4. Controller::アクション
5. Controller:render              
6. Component:beforeRender
7. Controller:beforeRender        
8. Component:shutdown
9. Controller::afterFilter

参考
[CakePHP アプリケーション実行の流れをシーケンス図で書いてみた - Shin x blog](https://www.1x1.jp/blog/2008/12/cakephp_dispatcher__invoke_sequnce_diagram.html)
（時期的にcakephp1.x系かな？見比べてみるとbeforeRenderの順序が調べたのとは逆でController->Componentだなぁ）

[CakePHPのControllerとComponentの実行順序 - Qiita](https://qiita.com/ran/items/52a6060bcfbeec69dc34)
（タグはcakephp3となってた）
GMailをGoogle Docsに変換して保存するGoogle Apps Script(GAS)

#1 はじめに
　Gmailを共有するためにGoogle Driveに保存したいというニーズがあったので対応しました。
　Gmailの中でラベルを付ければできることなのですが、機密性が高く宛先を制限せざるを得ないメールの受信者が退職したら見れなくなったという問題があったので開発しました。

#2 処理内容
```JavaScript
  const label_name = "ラベルの名前"

  const query = "label:" + label_name;
  const threads = GmailApp.search(query);
  const label_data = GmailApp.getUserLabelByName(q_label);
  const dest = "保存先のID"; // Google Driveの"folder/"以降の文字列を代入
```
ここは、条件を指定してメールを検索します。変数queryにはラベル以外にも期間、タイトルなども含めることができます。[こちら](https://support.google.com/mail/answer/7190?hl=ja)に詳細な条件があります。

```JavaScript
  for(let n in threads){
```
複数のメールを保存するためにforループを回してます。

```JavaScript
    let thread = threads[n];   
    let msgs = thread.getMessages();
```
getMessages関数でメールのデータを取得しています。msgsにはGMailのデータが格納されています。
今回使用したのはgetId関数とgetPlainBodyだけですが、機能拡張したら追記していきます。

関数 | 分類 | 取得できる情報
---|---|---
getFrom() | アドレス | 送信元アドレス
getTo() | アドレス | Toアドレス
getCc() | アドレス | Ccアドレス
getBcc() | アドレス | Bccアドレス
getReplyTo() | アドレス | 返信先のメールアドレス
getSubject() | 文章 | 件名
getPlainBody() | 文章 | テキスト形式のメール本文
getRawContent() | 文章 | HTML形式のメール本文
getBody() | 文章 | HTML形式のメール本文
getAttachments() | 添付ファイル| 添付ファイル
getDate() | その他 | 送信日時
getHeader(name) | その他 | ヘッダ
getId() | その他 | ID

```JavaScript
    for(let m in msgs){
      let msg = msgs[m];
      let subject = msg.getSubject();
      let description = msg.getPlainBody();
      let date = Utilities.formatDate(msg.getDate(), 'JST', 'yyyyMMdd_HHmm');
```
メール1件ごとに件名、本文、送信日時を取得しています。ファイル名は件名だけでも良いのですが、いつ贈られたかをソートしたかったので日付を追加しています。

```JavaScript
      let doc = DocumentApp.create(date + "_" + subject);
      doc.getBody().setText(description);
      let docid = doc.getId();
      let file = DriveApp.getFileById(docid);
```
取得したメール情報を使ってGoogle Doc形式で保存します。今回は本文の文章だけが必要なのでgetPlainBody()関数を使っています。HTMLの解析をして必要な部分を取り出すとかするのであれば、getBodyを使っても良いのかと思います。

```JavaScript
      thread.removeLabel(label_data);
    }
  }
```
保存したプログラムに貼ってあったラベルを外します。これをやらないと以前に保存したものまで対象になるからですね。


このままのプログラムだと、GASのあるドライブにファイルがたまっていくので、特定のフォルダに保存した場合は、以下のように保存したファイルを移動する必要があります。

```JavaScript
const folder = DriveApp.getFolderById("");
file.moveTo(folder);
```
destにはGoogleのフォルダIDを設定してください。以下の部分です。

#### https://drive.google.com/drive/u/1/folders/{フォルダID}

# 3 最後に
手動でラベルを貼らなければいけないという手間はかかりますが、件名や日付などでフィルタリングできない場合には便利かと思います。

# 4 参考サイト
https://qiita.com/a_yasui/items/e563f81114d8f54ad5f0

https://qiita.com/tetsurotayama/items/7f328cab697be45c90aa
【Rails】 アソシエーションの種類

# アソシエーションの種類

|  メソッド                   |  用途                                     |
| ------------------------ | ---------------------------------------- |
|  belongs_to              |  1対1                        |
|  has_one                 |  1対1          |
|  has_many                |  1対多                             |
|  has_many :through       |  多対多(中間モデル)                              |
|  has_one :through        |  1対1(中間モデル)                                  |
|  has_and_belongs_to_man  |  他方のモデルと「多対多」のつながりを作成する。through:を指定した場合と異なり、第3のモデル(結合モデル)が介在しない  |
【エラー対処】Undefined symbol: _OBJC_CLASS_$_XXX


# 環境
- macOS : 11.4
- Xcode : 12.5.1
- ライブラリ管理ツール : CocoaPods

# 状況
- Firebaseを利用
- ビルド時に以下のエラーが発生

### エラー内容
```swift:
Undefined symbol: _OBJC_CLASS_$_GULAppEnvironmentUtil
```
# 対処方法
- ターミナルで以下のコマンドを実行。

```
pod update
```

- Firebase間のバージョン相違により生じるエラーであったようで、更新したところ解決。

#参照
https://teratail.com/questions/144557
Rails6でフォントをカスタマイズしたい

作成中のアプリで手書き風の表示にしたかったので、フォントを導入したかったんです。

https://qiita.com/kamataku/items/69df48ee04878c773d73

手順はめちゃくちゃ簡単

### 1.フォントをダウンロードする

お好きなフォントをダウンロードしてください。
使用するのはttf,otfと言う拡張子のファイルです。

### 2.app/assets配下にfontsディレクトリを作成する

ぶっちゃけfontsじゃなくても良いですが、わかりやすいディレクトリ名にしましょう

### 3.ダウンロードしたフォントファイルをfontsディレクトリに配置

### 4.application.scssの変更

```app/assets/stylesheets/application.scss
 *= require_tree .
 *= require_self
 */
 
 @font-face {
  font-family: "huifont";　＃好きな名前でOK
  font-style: normal;
  src: asset_url('HuiFont29.ttf');
}
```

これであとは実際のcssでfont-familyで設定したクラス名を指定してあげれば適用できます。
unity5.2の作法 その7 fizzbuzz

#概要

unity5.2の作法、調べてみた。
fizzbuzzやってみた。

#makefile

- menu->file->new sceneする。
- menu->file->save sceneでfizzbuzzとする。
- menu->gameobject->create emptyする。
- menu->assetes->creates->c# scriptでfizzbuzz.csつくる。
- ダブルクリックして、コードを書く。
- ヒエラルキーのgameobjectに、コードを重ねる。
- 三角で実行。

#サンプルコード

```
using UnityEngine;
using System.Collections;

public class fizzbuzz : MonoBehaviour {

	// Use this for initialization
	void Start () {
	
	}
	
	// Update is called once per frame
	void Update () {
	
	}
    void OnGUI(){
        GUI.color = Color.yellow;
        int i;
        string res = "";
        for (i = 1; i < 100; i++)
        {
            if (i % 15 == 0)
            {
                res += "fizzbuzz ";
            }
            else if (i % 5 == 0)
            {
                res += "buzz ";
            }
            else if (i % 3 == 0)
            {
                res += "fizz ";
            }
            else
            {
                res += i.ToString() + " ";
            }
        }
        GUI.Label(new Rect(10, 10, 400, 400), res);
    }
}




```

以上。
Jamstack事例～スイス連邦政府機関のラジオ番組分析アプリの場合～

今回も前回に引き続きBejamas社が取り組んだJamstackの事例についてご紹介したいと思います:loudspeaker:

Bejamasは基本的にはJamstackを中心としたウェブ開発を行っていますが、場合によっては、やり慣れた仕事の範囲を飛び出して、スイスの連邦機関のために作ったラジオ番組分析アプリのような興味深いプロジェクトに取り組むこともあります。

著者：Gracjan Opiela 2020年11月3日
原文：https://bejamas.io/blog/web-app-case-study/

![5.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242415/02862dda-aa01-7de3-4ccb-8c928f4f91ce.jpeg)

ウェブ開発ソリューションの世界は広大です。そのため、技術の道に留まる必要はありません。簡単に言えば、新しいアプローチを模索して学ぶことで、人としても開発者としても成長し、進化していくのです。

LINK Instituteと協力してRadio Program Analysisのアプリを構築したことは、チームが未知の領域に踏み込み、アプリ作成のさまざまなアプローチを模索し、その結果、大きな喜びと報酬を得ることができた輝かしいプロジェクトの内のひとつです。

通常のウォークスルー型のケーススタディではなく、異なる方法で今回は行いたいと考えました。そこで、LINK InstituteのIT開発部門の責任者であるKai Wasternack氏に、ラジオ番組分析アプリのプロジェクトにおいて、直面した問題、楽しかったこと、見つけた解決策などについて話を聞きました。

![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242415/467bd5d5-c70c-04b4-bfa0-454d51d5b838.png)

![2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242415/c673320f-36bb-2e02-94a9-d2a760610135.png)

![3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242415/1ba692b2-338a-99a5-6b13-5040d875987f.png)

![4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242415/2403600e-576a-6e67-2e9e-d68dccac8a13.png)

![5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242415/32578d13-6d9e-f83c-cfe8-4b45575499b3.png)

![6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242415/26b76334-fc3a-bc8a-90e5-e4a0afc16652.png)

![7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242415/0644580a-bf3a-968c-eae3-3caf7e0bb231.png)

![8.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242415/ea9c6147-ce14-4ef3-a111-062dc1866b6d.png)

![9.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242415/df95ce2b-ee25-43d6-2b1f-d451945db473.png)

![10.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242415/fcc3a1ab-ab7e-9dc6-ecac-1f6f85f1434a.png)

![11.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242415/30f913c8-9917-857b-3f01-5a67f9cb7a4a.png)

![12.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242415/32ccb32a-7fef-3a5b-bfd4-9fd669d5c9e6.png)

![13.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242415/1a9564c4-f174-62a2-1b1b-0f9c4eeac6ce.png)

ゲームをプレイするとき、最大の目標はそれをクリアすることです。しかし、あなたが受けるサブクエスト、つまりクリアするために上を目指すようなサブクエストは、ゲームをより良いものにしてくれます。

アプリ作りの荒野に足を踏み入れたことは、私たちにとってまさにそのサブクエストでした。

最後まで読んで下さり、ありがとうございました:bow_tone1:

Jamstackに関心がある方はこちらまでお問合せください！
**株式会社ヒューマンサイエンス
https://www.science.co.jp/**
kintone UI Componentのドロップダウンの文字色を変える

今回は、kintone UI Componentのドロップダウンの文字色を変更します。
※DOM操作をするので、kintone UI Componentの仕様が変わると使えなくなる場合があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/bfb84a28-638b-48b4-ddfc-236217aabe7d.png)


# アプリの準備

スペースフィールドを設置します。
要素IDは`spDropdown`としておきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/4e1336ed-3dad-e2f3-d989-e8e97e2cecc8.png)

# JavaScript

kintone UI Componentは↓こちらを参考に導入して下さい。
※本記事で使用したバージョンは1.0.3

https://kintone-ui-component.netlify.app/docs/getting-started/quick-start.html

## ドロップダウンの設置

```js
// ドロップダウンを設置するスペースフィールドの要素を取得
const spDropdown = kintone.app.record.getSpaceElement("spDropdown");

// ドロップダウンをつくる
const drColors = new Kuc.Dropdown({
  label: "ドロップダウン色変え",
  items: [
    { label: "あか", value: "red" },
    { label: "あお", value: "blue" },
    { label: "みどり", value: "green" },
    { label: "だいだい", value: "orange" },
    { label: "くろ", value: "black" },
  ],
});

// スペースフィールドにドロップダウンを置く
spDropdown.appendChild(drColors);
```

## ドロップダウン選択
単純に、3つ目の`<span>`タグだったので2としています。
※kintone UI Componentの仕様が変わると動かなくなる可能性があります。

```js
// ドロップダウンを選択したときのイベント
drColors.addEventListener("change", (e) => {
  const b = drColors.querySelectorAll("span");
  b[2].style.color = e.detail.value;
  b[2].style.fontWeight = "bold"; // お好みで太字に
});
```

## ドロップダウンの色

setIntervalで色設定しています。色はvalueに持たせている値をそのまま使っています。

```js
// ドロップダウンの色設定
const set_interval_id = setInterval(() => {
  const lis = drColors.querySelectorAll("li");
  lis.forEach((e) => {
    e.style.color = e.getAttribute("value");
    e.style.fontWeight = "bold"; // お好みで太字に
  });

  clearInterval(set_interval_id);
}, 100);
```

# まとめ

ドロップダウンを目立たせたい・・・！そんな時に用法用量を守ってお使いいただければと思います。

![iro.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/7a5ba5f5-2f21-48e2-54b4-74c7f633e752.gif)
Nuxt.jsで開発時だけconsole.log()するplugin

#やりたいこと

タイトルの通り。経緯としては

- なんだかんだ言いつつconsole.log()は便利なので使ってしまう。
- でもコード内に直書きしてしまうと後で消すのが面倒。
- ESLintの警告が出るのでconsole.logそのものは少なくしておきたい。

といった感じ。なので開発時だけconsole.logして、それ以外のときは一切何も出ないようにしたい。
ついでにinjectionしていちいちimport文を書かなくてもいいようにする。

# 環境
- Node.js v14.16.0
- nuxt: "^2.14.12"
- @nuxt/typescript-runtime": "^2.0.1",

# 手順

1. dev環境かどうかを判別できるようにする
1. dev環境のみconsole.logする関数を作る。
1. 作った関数をpluginsでinjectionする。

# 実際のコード

## dev環境かどうかを判別できるようにする
nuxt.config.jsにはdevプロパティがある。
[API: dev プロパティ - Nuxt.js](https://develop365.gitlab.io/nuxtjs-2.8.X-doc/ja/api/configuration-dev/)

>nuxt コマンドを使うときは dev は強制的に true になります
>nuxt build、nuxt start、nuxt generate コマンドを使うときは dev は強制的に false になります

本来の用途は違うのだが、今回はこのプロパティを使って判別を行うことにした。
もっといい方法があったら教えてほしい。

```javascript:nuxt.config.js
export default {
  dev: process.env.NODE_ENV !== 'production', // これを追加する
  telemetry: false, // ちなみにこのオプションをつけると開始時の質問が消える。
  // 省略
  }
```

## dev環境のみconsole.logする関数を作る。
devプロパティは@/nuxt.configをimportすることで読み込める。

```typescript:plugins/debugLog.ts
/* eslint-disable no-unused-vars */
import { Plugin } from '@nuxt/types'

import nuxtConfig from '@/nuxt.config'

const isDev: boolean = !!nuxtConfig?.dev

if (isDev) {
  // eslint-disable-next-line no-console
  console.log('this app is runnning on Dev mode.')
}

export function debugLog(...args: any[]): void {
  if (!isDev) return
  // eslint-disable-next-line no-console
  console.log('[デバッグ]:\n', ...args)
}
```
isDevフラグがtrueのときのみconsole.logが実行される。


## 作った関数をpluginsでinjectionする。 

あとはこの関数をinjectionするためのコードを書いて

```typescript:plugins/debugLog.ts
declare module 'vue/types/vue' {
  interface Vue {
    $debug(...args: any[]): void
  }
}

declare module '@nuxt/types' {
  interface NuxtAppOptions {
    $debug(...args: any[]): void
  }
}

declare module 'vuex/types/index' {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  interface Store<S> {
    $debug(...args: any[]): void
  }
}

const myPlugin: Plugin = (_context, inject) => {
  inject('debug', (...args: any[]): void => debugLog(...args))
}

export default myPlugin
```

nuxt.config.jsでpluginとして登録する。

```javascript:nuxt.config.js
export default {
  plugins: [
    // 他のpluginもあれば書く
    { src: '@/plugins/debugLog.ts', mode: 'client' },
  ],
  // 省略
  }
```

# 使い方

実際に使用する際はthis.$debug("hoge")でよびだせる。

```html:sample.vue
<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data(): LocalData {
    return {
      // 省略
    }
  },
  methods: {
    async doPoripori() {
      await doSomothing().catch((error)=>{
        this.$debug(error) // こんな感じ
      })
    },
  },
})
</script>
```

injectionしているので当然middlewareでも呼び出せる。

```typescript:middleware.ts
import { Middleware } from '@nuxt/types'

const ebi: Middleware = (context): any => {
  context.app.$debug('こうやって使う')

}

export default ebi
```

# 参考資料
- [dev プロパティ - NuxtJS](https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-dev)
- [プラグイン - Nuxt TypeScript](https://typescript.nuxtjs.org/ja/cookbook/plugins)
【Google Cloud Day'21】「世界中のお客様の声を収集・AI で分析し、日々全社員が意思決定！Customer Driven の新しい経営の形」を視聴して

世界中のお客様の声を収集・AI で分析し、日々全社員が意思決定！Customer Driven の新しい経営の形
https://cloudonair.withgoogle.com/events/google-cloud-day-digital-21/watch?talk=d1-da-02
ファーストリティリンググループでは、有明プロジェクトを通じて、お客様中心とした商品開発、生産、販売を実施しており世界中のお客様の声を集約・分析・可視化することで日々の意思決定に活用しています。この取組みを実行するために、Google クラウドの技術を活用し、店舗スタッフから経営に至るまでグローバル全社員が活用している情報分析基盤の取組を紹介します。本セッションでは、膨大な世界中のお客様の声をリアルタイムに収集、分析、可視化し Google Cloud 技術を使って作り上げたかを紹介します。

<table>
	<tr>
		<th>質問</th>
		<th>回答</th>
	</tr>
	<tr>
		<th>マスキングしていると話してましたが、DLP API使用されていますでしょうか。</th>
		<td>はい。DLP APIも使っていますが、それに加えて追加の対応もやっています。</td>
	</tr>
	<tr>
		<th>定量データから、より顧客の声など定性データを活用するようにシフトした大きなきっかけなどあれば、教えていただきたいです</th>
		<td>よりお客様一人一人に応えていくために、総量で見るだけではなく、個別のお客様の声に真剣に向き合うことが必要だというのが事業側の強い要望でこれに応えた形になります。</td>
	</tr>
</table>

<table>
	<tr>
		<th>切り口</th>
		<th>内容</th>
	</tr>
	<tr>
		<th>ファーストリテーリングについて</th>
		<td></td>
	</tr>
	<tr>
		<th>今後のビジネス展開</th>
		<td>例えば、企画の段階で客の購買の傾向を機械学習で分析している。製造は無駄なものを作らないようにするため、機械学習を使って連動している。販売側は顧客との密接な関係があるのでUX体験を新しく作っていく。これをやるには膨大なデータが必要で、処理を円滑にする必要がある。</td>
	</tr>
	<tr>
		<th>課題と解決</th>
		<td>膨大なデータを円滑に処理し、意思決定のサポートをしたかった。</td>
	</tr>
	<tr>
		<th>アーキテクチャ</th>
		<td>Firebaseを使い、よりよいUX体験をできるようにしている。</td>
	</tr>
	<tr>
		<th>導入効果</th>
		<td></td>
	</tr>
	<tr>
		<th>GCPを使った理由</th>
		<td></td>
	</tr>
</table>
ポートフォリオの作り込みについて【ほぼ自分に向けたメモ】

単純にアプリ作って、デプロイして終わり、ではなく、実際に転職にあたって企業に提出する。
そして企業に提出するにあたって、企業側は素人のポートフォリオなんざ大して見ない。
もしかしたらURLすら開いてくれない可能性すらある。
何故なら自分は実務未経験で、パッと見た経歴からして、エンジニアという職業に対して良いかもと思わせる要素がひとつもない。

例えば

- 年齢が20代前半で、大学がそこそこ有名大学の理系で、数学を勉強していた
- デザインの専門学校に通っていた
- 社内SEのような役回りをしていた
- AWSなどの資格を持っている

といったバックグラウンドが一目でわかるほどであれば、良いのかもしれない。
しかし自分には年齢(32歳)という大きなビハインドと経歴も営業職→コールセンター運営というぱっと見一つもなく、エンジニアに役立つ資格もない、経歴を見て

「あ〜この人は...う〜ん...」

ってなってる人事担当の顔が容易に想像できる。

となると、どこで勝負するかと言えば、ポートフォリオ。

## アピール面

いくつか考えています。

### READMEの作り込み

当然ながら、しっかりと書き込む。テーブル関係はもちろん、インフラ構成図、アプリ作成の背景。

### アプリの宣伝LP画像の作成

![スクリーンショット 2021-06-29 10.54.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1603537/4597b3d3-68fe-2ba4-74ff-ed27437ec827.png)

こういうやつですね。

自分の中で他の選考者との差別化をするとしたら「ビジネスとしての経験があること」だと思います。
単なるポートフォリオ、ではなく、世に出すアプリケーションということも前提として作成する。
当然アプリを作れば、宣伝用のLPも作成するので、この辺りも考えていきたいところ。

### 要件定義書の作成

どういう機能があって、どういうユーザーユースを想定していて、なぜ実装したのか。

### アプリケーションの使用動画の作成

上述の通り、もしかしたら採用担当者は自分のポートフォリオのURLすら開いてくれるかどうかって話です。

「Rails/HTML/CSS/Javascriptを使用して作成しました。」

というアプリがあったとしましょう。
こんなの採用担当者は腐るほど見てきてるわけです。

「あ〜ユーザー登録して、投稿して、なんかそれが見れたり、コメントできたりするんでしょ？？？で、Bootstrapでちょっと見た目整えて...」

っていうことはアプリを見なくても、想像ができちゃうわけです、だって現に素人の自分ですら想像できるんですから。
そんなアプリをわざわざURL開いてみるのか？って話です。

万が一、そうなった時のことを考えて、使用動画を作成しておけば、開かなくても「こんなアプリなんだよ！！！！！」ってことは伝えられますよね。

そこからアプリを実際に開いてくれれば、なお良し。

### ポートフォリオサイトの作成

これらのアピールポイントを全てのアプリで実施したとしても、今度は動線をどうするか、という問題です。
GithubのURLを採用担当に送り付けて、それを開いて、ひとつひとつリポジトリを開いてくれる....

そんなことするわけないですよね。
これらの要素を一つのサイトにまとめておけば、そこからアプリのURLもGithubのリポジトリも確認できる、と。

## まとめ

少々ネガティブに考えすぎなところもあるかもしれませんが、採用担当の立場になって考えてみると、このような考え方になるのは至極当然な気がします。
よく面接は最初の5分で9割決まると言いますが、逆にその前の書類選考も同じくだと思います。
最初の5分で決まる。
となるとその5分を最大限自分のアピールにつなげるためにも、自分の作り上げたポートフォリオを良いなと思ってもらう5分にしたいと思います。
ただGithubのリポジトリを見て5分終わるよりも、採用担当者に自分のアプリを体験してもらう5分にしたいです。

### 追記

最近、ちょっと話題になっていた、「実務未経験者のポートフォリオにDocker、AWS、circle CIを組み込む必要があるのか」という問題について、触れてない理由は「実際、わからないから」です。
ぶっちゃけ言うと、Docker、AWS、circle CI使ってポートフォリオ作りました！って言ってもそれが採用担当者に伝わらなければ意味がないとは思います。

上述の通り、職務経歴書、履歴書を見て、採用担当者がポートフォリオをしっかり見てみようという気持ちにさせなければ、ポートフォリオは見てもらえません。
仮に上記のようなアピールポイントを行わず、GithubのURLだけ送りつけた場合、わざわざリポジトリを開いてREADMEまで読むだろうか...というのは疑問に感じます。
となると、Docker、AWS、circle CI使用しました！ってのも伝わらないですよね。
伝わらなければ、0点です。

特に自分の場合は、経歴がイケてないので、Githubなんて見てもらえることなんてないだろう、と踏んでます。
それよりかは採用担当者がより簡単に自分のアプリを体験できる動線と方法を考えて、まずは採用担当者に自分のアプリを体験してもらう、それで実際Github見てもらってDocker使ってますってのがわかれば
「へー、Dockerも使ったことあるんだー」
とプラスポイントになると思うんです。

なので、自分は技術云々はもちろん必要な部分は取り入れますが、まずは自分が作ってきたポートフォリオを確実に採用担当者が体験すると言うことを最優先に考えていきたいと思っています。
【Google Cloud Day'21】「日本最大級の医療従事者専用サイト m3.com を運営するエムスリーのアンケートシステムのアーキテクチャーをご紹介　 〜マイクロサービスの分割とアンケートデータのやりとり〜」を視聴して

日本最大級の医療従事者専用サイト m3.com を運営するエムスリーのアンケートシステムのアーキテクチャーをご紹介　 〜マイクロサービスの分割とアンケートデータのやりとり〜
https://cloudonair.withgoogle.com/events/google-cloud-day-digital-21/watch?talk=d1-da-09
エムスリーでは医療従事者向けにアンケートを実施しています。アンケートと一口に言ってもやるべきことは多岐にわたり、配信や督促、アンケート回答画面、データ分析など、様々なステップを経てクライアントへその結果が届けられます。そして、それらを実現するシステムは、ステップごとに責務を分けたマイクロサービスとして構成しています。本セッションでは全体のアーキテクチャの説明に加えて、Cloud Pub/Sub を利用した依存関係の整理や、データベースの使い分けなどについて紹介します。

<table>
	<tr>
		<th>質問</th>
		<th>回答</th>
	</tr>
	<tr>
		<th>マイクロサービスのような仕組みにすると、データの複製がある程度システム間にできてしまうと思いますが、データの不整合などの不具合は発生していないでしょうか？</th>
		<td>インフラの障害（ネットワークエラーなど）で不整合が発生するケースは今の所ありませんが、同期ロジックのバグで不整合が発生するケースはありました。データはアンケート回答システムをメイン、他はそのコピーという位置づけで運用していて、不具合がある場合は同期ロジックの修正後、再同期という形で修正しています</td>
	</tr>
	<tr>
		<th>Pub/Subを経由する場合のエラーハンドリングについてどのようにやっているか教えてください。</th>
		<td>送信側はPublishできるところまで確認しています。受信側の処理が失敗した場合はACKを返さないことで、メッセージをPub/Subから再取得できるようにしています。</td>
	</tr>
	<tr>
		<th>Pub/Subを経由する場合、大量データを扱う際にデータの欠損、取りこぼし等は発生しないのでしょうか？</th>
		<td>大量データはAPIのURLをデータとして受け渡すことで対処しています。取りこぼしについてはPub/Sub側のリトライにまかせています</td>
	</tr>
	<tr>
		<th>ETLでデータを同期するバッチが動いていると思いますが、失敗したときにはどのようにリカバリしていますか？</th>
		<td>基本的に日次で同期している処理と、毎時の処理の2種類を動かしています。毎時の処理は失敗しても許容していて、日次のものは失敗時に通知で問題にきづけるようになっています。また、日付を指定して再実行できるようになっています。</td>
	</tr>
	<tr>
		<th>アンケート定義・回答DBもSpannerを使用しているのですか？</th>
		<td>アンケート定義・回答DBとしてはpostgreSQLを利用しています</td>
	</tr>
</table>

<table>
	<tr>
		<th>切り口</th>
		<th>内容</th>
	</tr>
	<tr>
		<th>M3について</th>
		<td></td>
	</tr>
	<tr>
		<th>アンケートシステムのアーキテクチャ</th>
		<td></td>
	</tr>
	<tr>
		<th>システム構築時のポイント</th>
		<td></td>
	</tr>
	<tr>
		<th>GCPを利用した理由</th>
		<td>効率よく情報を抽出できるようになった。コンパイル・起動が高速なのはサーバーレスな構成にするときにも大きなポイントになった。一般的なWEBサーバに近づけることができたので、ピーキーな使い方はしなくていい。</td>
	</tr>
</table>
unity5.2の作法 その6 hello

#概要

unity5.2の作法、調べてみた。
helloworldやってみた。

#方針

ヒエラルキーは使うが、インスペクターは使わない。
2Dでやる。
スクリプトは、一個だけ。
makefile、手順を書く。

#makefile

- newする
- プロジェクト名test13とする。
- ２Dを選択、クリエイトする。
- フォルダAssets,Library,ProjectSettingsが作られる。
- menu->file->save sceneでhelloとする。
- assetsに、hello.unityできる。
- ヒエラルキーに、main cameraがある。
- menu->gameobject->create emptyする。gameobjectができる。
- menu->assetes->creates->c# scriptでhello.csつくる。
- ダブルクリックして、コードを書く。
- ヒエラルキーのgameobjectに、コードを重ねる。
- 三角で実行。


#サンプルコード

```
using UnityEngine;
using System.Collections;

public class helo : MonoBehaviour {
    public float hSliderValue = 0.0F;
    void Start()    {
    }
    void Update()    {
    }
    void OnGUI()    {
        GUI.color = Color.yellow;
        GUI.Label(new Rect(10, 10, 100, 20), "Hello World!");
        GUI.Box(new Rect(10, 50, 50, 50), "A BOX");
        GUI.Button(new Rect(10, 110, 70, 30), "A button");
        hSliderValue = GUI.HorizontalSlider(new Rect(20, 220, 100, 30), hSliderValue, 0.0F, 10.0F);
        GUI.Label(new Rect(20, 250, 100, 20), "value: " + hSliderValue);
    }
}


```

以上。
【Javascript】reduceメソッドー学習ノート

# 初めに
javascriptのreduceメソッドについて学習した内容のoutput用記事です。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。
※こちらの記事はあくまでも個人で学習した内容のoutputとしての記事になります。

# reduceメソッド
高階関数の一つ。引数として関数を取り、対象の配列の要素をその関数の処理した結果に処理を重ね凝縮した一つの値を出力する。

# 使ってみる
filterやmapとは違ってcallback関数の引数は「累積値,現在値,インデックス,配列」順になります。また、reduceメソッド自体も第２引数として初期値を設定することができます（第一引数はcallback関数です）。

```javascript
const changes = [100, 400, -300, 120, -50, -330, 1400, 500];

const accChanges = changes.reduce(function (acc, value, i, arr) {
  return acc + value;
}, 0);    //初期値を0にする
```
関数の結果は配列の合計値になります。

```javascript
1840
```
indexは0番から始まり、累計は次のように表示することができます。

```javascript
const accChanges = changes.reduce(function (acc, value, i, arr) {
  console.log(`累計${i}: ${acc}`)   //追記
  return acc + value;
}, 0);
```
初期値を0にしたため、0番目の値は0になっていることが分かります。

```javascript
累計0: 0
累計1: 100
累計2: 500
累計3: 200
累計4: 320
累計5: 270
累計6: -60
累計7: 1340
```

これはfor of文を使えば次のように書くことができます。

```javascript
let total = 0;
for (const change of changes) total += change;
console.log(total);
//1840
```
配列の中から最小値を求める時にもreduceメソッドを使うことができます。

```javascript
const min = changes.reduce(function (acc, value) {
  if (acc < value) {
    return acc;
  } else {
    return value;
  }
}, changes[0]);

console.log(min);
//-330
```

# 参考サイト
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
QGISで格子辺属性を作成する

# 概要
件名のとおりです。

# 手順

## 手順１：格子データを作成する

「ベクタ＞調査ツール＞グリッドを作成する」から領域を指定して10mメッシュの格子を作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90108/006af28c-5389-d009-2217-e82d40527a2d.png)


## 手順２：格子辺に分割する
「プロセッシングツールボックス＞ベクタジオメトリ＞ポリゴンを線に変換」で手順１で作成した長方形ポリゴンを格子辺の線に変換します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90108/1fae5758-d8ad-9a26-f1e0-1e4a3061c82b.png)

作成された格子辺の線プロパティでラベルとして"id"を表示すると以下のようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90108/254c8179-4dc7-eb54-fd70-a2aa408d4547.png)


## 手順３：水涯線
格子辺に水涯線が保有する値を結合します。
「ベクタ一般＞属性の空間結合」で以下の設定で実行します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90108/ab55cb32-fb16-1d84-3311-d2f11739227d.png)

出力されたレイヤは、格子辺に水涯線データの属性が付与されたデータです。属性テーブルを確認すると"id_2"に水涯線idが付与されていることが確認できます。水涯線と交差しなかった格子辺にはNULLが入っています。NULLを除いて、水涯線idで格子辺を色付けしてあげると以下のような絵を作成することができます。

事前に水涯線データに堤防天端高などの値を設定しておくと、それを格子辺属性に設定することが可能になるなど工夫次第で様々な利用が可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90108/6e8a929c-9511-3d91-1d89-02ac4a18f55a.png)


以上です。
【Rails】チェックボックスで✅した内容を”配列から出して”保存する方法

# 自己紹介
初めまして！2021年5月からプログラミングの勉強を始めた、THEプログラミング初心者です。

今回初めて記事を書かせて頂きます。
主に自分用の備忘になりますが、
もし同じ悩みを持つプログラミング初心者の方がいれば、少しでも力になれたら嬉しいです。
また、何か間違い等ありましたらご指摘頂けますと幸いです。

## はじめに
[サイト](https://www.sejuku.net/blog/27132)を参考に、アレルギー表示のためのチェックボックスを実装しました。
※「複数のチェックボックスを作成する方法」の前半を基に作成しました。

![チェックボックス.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1348114/a430f6e9-3e6d-ab01-4d1e-28dfa76f42e7.png)
チェックボックスにチェックをするまでは良いのですが、
そのチェックしたテキストを表示する際に、配列[　]に入ったまま表示されてしまいました。

![配列ver.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1348114/fcb4933b-b713-100a-bccb-16a7e71a75e1.png)

（そもそも↑記事では配列に入れるよう指定していると後に分かるのですが…）
**どうしても配列から出して、文字列だけで表示したい！**と思い、少し手を加えたものを備忘として残します。

## 開発環境
ruby 2.6.3
rails 5.2.5

## チェックボックス作成
今回、ECサイトの管理者が、商品追加投稿欄でアレルギー表示をチェックします。
商品に関わるコントローラーをitems_controller.rbとしています。


**（1）item.rb (itemモデル) にアレルギーカラムを追加**

```ruby:itemsテーブルにallergiesカラム追加
class AddColumnItems < ActiveRecord::Migration[5.2]
  def change
    add_column :items, :allergies, :text
  end
end
```

**（2）投稿画面を作る　※一部省略**

```new.html.erb
<%= form_with model: [:admin, @item], local:true do |f| %>
  <table>

〜省略〜

  <tr>
　　 <th>アレルギー表示</th>
    <td colspan="2">
      <% %w(卵 牛乳 小麦 大豆 なし).each.with_index do |allergy,i| %>
        <label>
        <%= check_box_tag 'item[allergies][]', allergy, false, id: "item_allergies_#{i}" %>
        <%= allergy %>
        　</label>
      <% end %>
    </td>
  <tr>

〜省略〜

  </table>

<& end %>
```
 
**（3）コントローラー記述 ※一部省略**

```ruby:items_controller.rb
class Admin::ItemsController < ApplicationController
  before_action :authenticate_admin!
  # ↓これが必要
  before_action :allergy_string, only: [:create, :update]

  def new
    @item = Item.new
  end

  def create
    @item = Item.new(item_params)
    if @item.save
      redirect_to admin_item_path(@item.id)
    else
      render 'new'
    end
  end

  def show
    @item = Item.find(params[:id])
  end

  def update
    @item = Item.find(params[:id])
    if @item.update(item_params)
      redirect_to admin_item_path(@item.id)
    else
      render 'edit'
    end
  end

  private
  # もしアレルギー表示が一つでもチェックされたら、配列内の文字列をjoin（結合）し半角スペースを開ける
  def allergy_string
    if params[:item][:allergies].present?
      params[:item][:allergies] = params[:item][:allergies].join(" ")
    end
  end

  def item_params
    params.require(:item).permit(:image, :name, :information, :genre_id, :price, :is_active, :allergies)
  end

end
```
<br>
**（4）完成**
![成功ver.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1348114/b986e6e1-ef54-0586-3814-a1d9685574de.png)
これで無事に配列から解放されました！笑
<br>
### ちなみに…
参考サイトでは、配列に入れるよう指定されていました。

```ruby
def item_params
 params.require(:item).permit(:image, :name, :information, :genre_id, :price, :is_active, allergies:[])
end
```

どうやら、allergies:[ ]が配列に文字を入れるという意味の一つだと思われます。（viewの表記にも配列に入れるっぽいのがあるが）
だからといってallergy_stringの定義なしに、:allergiesにすると今度は値自体が保存されないので、
上記のようにするのが、現時点ではベストだと判断しました。

## 終わりに
今回は以上です。
この方法だとテキスト（卵 牛乳とか）自体は保存され、”アレルギー表示は卵と牛乳と小麦”と表示されますが、**”チェックを入れた状態”は保存されない"**ので注意が必要です。

冒頭にも述べましたが、ご指摘やアドバイスがありましたらコメントして頂けますと幸いです。
[Ruby] AtCoder Beginner Contest 206 B問題

##はじめに
AtCoder Beginner Contest 206のB問題を解いてみました。
様々な答えはあるかとは思いますが、自分の回答を説明していきたいと思います。
問題文は下記リンクから飛んで確認してください。
それではよろしくお願いします！

https://atcoder.jp/contests/abc206/tasks/abc206_b

##B - Saving

まずは入力を受け取る文です

```Ruby
n = gets.to_i
```

まずは空の貯金箱と日にちをカウントしてくれる変数を用意します。
1日目から始めるのでdayにはあらかじめ1を入れときます。

ポイントは**dayは日数と貯金する額の両方の役割がある**ことです。


```Ruby
n = gets.to_i

bank_balance = 0
day = 1
```

次に入力された数字（目標貯金額）以上、貯金箱にお金が貯まった時に、それが何日目かを出力することが求められているので、bank_balanceがn円以上になるまで繰り返し処理でdayに1円ずつ足していきます。

day = その日に貯金する額なので、dayをbank_balanceに掘り込んでいきます。

bank_balanceがn円以上になったら処理を止めて、dayを出力させます。

```ruby
n = gets.to_i
bank_balance = 0
day = 1

while n > bank_balance do
  bank_balance += day
  if n <= bank_balance
    puts day
  else
  day += 1
  end
end
```
if文で条件分岐をし、貯金額（bank＿balance）がnを上回らないうちはひたすらelseにふって、+=1しまくります。
これで完成です。

##最後に
他にもっと簡略化できる方法や、わかりやすい方法があれば教えていただけると幸いです。
自分では気づかないんですが、なんでこんな処理してるのか指摘されて初めて気付く鈍感野郎なので、ガンガン指摘してください！

よろしくお願いします。
Docker 使ってみる

# はじめに

難しい事はさておき、まずは Docker を使ってみたい。
そんな自分自身のために色々やってみた過程をまとめてみました。

環境は、Mac上でDockerにてPython3系の環境を利用しました。



#1. Dockerについて

###1-1.Dockerとは

「難しい事はさておく」とはいえ、Dockerがどういうものか少しだけ触れておきます。

Dockerとはコンテナ型の仮想化環境です。VirtualBoxやVMWareといった仮想化ソフトウェアと違い（コンテナ技術を用いているため）起動が早い、サイズが小さいなどのメリットがあります。
また、Dockerはミドルウェアのインストールや各種環境設定をコード化して管理します。

- 設定がコード化されている
- 軽量・配布しやすい
- 動作が軽い

などが Docker を利用するメリットになります。


###1-2.Dockerイメージ
コンテナを立ち上げるために必要なミドルウェアなどの設定やコマンドが、ひとまとめになったものです。

###1-3.コンテナ
Dockerイメージをもとに作られたWebサーバやDBサーバなどが動く仮想環境のです。

この理解が正しいかわかりませんが、オブジェクト指向でいうところのクラスがイメージでオブジェクトがコンテナと考えると、（私にとっては）理解しやすいです。



###1-4.Docker Hub（レジストリ）

多くのDockerのイメージが公開されているサイトです。
ここから用途にあったイメージをダウンロードして利用したり、さらに設定を加えたイメージを作成しアップロードすることもできます。



###1-5. もっと深く知るために

もっと深く知りたいという方のために、参考URLを記載しておきます。
とても良くまとまっていると思います。

参考：[【図解】Dockerの全体像を理解する -前編- ](https://qiita.com/etaroid/items/b1024c7d200a75b992fc)
参考：[【図解】Dockerの全体像を理解する -中編- ](https://qiita.com/etaroid/items/88ec3a0e2d80d7cdf87a)
参考：[【図解】Dockerの全体像を理解する -後編- ](https://qiita.com/etaroid/items/40106f13d47bfcbc2572)
参考：[Dockerとは何かを入門者向けに解説！基本コマンドも](https://udemy.benesse.co.jp/development/system/docker.html)



#2.  Docker をインストール

公式サイトからダウンロードして起動する。
https://docs.docker.com/docker-for-mac/install/

インストールできたらバージョンを確認してみます。

```shell
$ docker --version
Docker version 20.10.0, build 7287ab3
```


#3. イメージをダウンロードする

Docker hub から python3.8 が使えるイメージをダウンロードします。

```shell
docker pull python:3.8
```


イメージの一覧を表示するコマンド

```shell
$ docker images

REPOSITORY     TAG        IMAGE ID        CREATED        SIZE
python         3.8        ffb0799a2ad9    6 days ago     882MB
```

イメージを削除するコマンド

```shell
docker rmi python:3.8
```





#4. コンテナを起動する

ダウンロードしたイメージからコンテナを作成し起動します。
docker run コマンドでコンテナを作成し、ログインできます。

```shell
docker run -it --name container_name python:3.8 /bin/bash
```

コンテナが起動したので、Pythonのバージョンを確認してみます。

```shell
python --version

Python 3.8.6
```

Docker環境から退出

```shell
exit
```

参考：[Dockerを用いてPython3系の環境をコンテナで起動してみた](https://qiita.com/kosments/items/e98b95d13f8c3966e545)



#5. コンテナを確認する

```shell
docker ps -a
```

```shell
CONTAINER ID  IMAGE       COMMAND      CREATED  STATUS  PORTS   NAMES
e6939bc803dd  python:3.8  "/bin/bash"  ・・・    ・・・           test
```


コンテナを削除

```shell
docker rm test
```
cURL

```php
// 1. 初期化 
$c = curl_init ([ string $url = NULL ] );
// 2. オプション設定
curl_setopt ( resource $cURLハンドル , int $オプション , mixed $値 );
// 3. 実行
curl_exec ( resource $cURLハンドル )
// 4. 終了
curl_close($c);
```

```php
// URLを定数に格納
define('SLACK_WEBHOOK', 'https://hooks.slack.com/services/xxx/yyy/zzz');

// メッセージの設定
$message = array('payload' => json_encode(array('text' => 'hello world!')));

// 1. 初期化
$c = curl_init(SLACK_WEBHOOK);
// 2. オプション設定
curl_setopt($c, CURLOPT_SSL_VERIFYPEER, false);
// 3. オプション設定(続き)
curl_setopt($c, CURLOPT_POST, true);
// 4. オプション設定(続き)
curl_setopt($c, CURLOPT_POSTFIELDS, $message);
// 5. 実行
curl_exec($c);
// 6. 終了
curl_close($c);
```

```php 
CURLOPT_SSL_VERIFYPEER
// SSL を使用する際に設定します。
// falseを設定すると、cURL はサーバー証明書の検証を行いません。
// cURL 7.10 以降、デフォルト値は true なので、false に明示的に設定する必要があります。

CURLOPT_POST
// TRUE を設定すると、HTTP POST を行います。
// POST は、 application/x-www-form-urlencoded 形式で 行われます(一般的なものです)。データは、CURLOPT_POSTFIELDS で連想配列にして設定します。

CURLOPT_POSTFIELDS

```
備忘録：herokuについて

heorkuにてアプリケーションを立ち上げるのに丸二日苦労したので忘れないように残しておく。

基本的な流れ
1．herokuでデータベースなどをセットアップ
2．公開したいアプリケーションをgithubなどからローカルにプル
3．ローカルからコミット&プッシュ


1について
herokuでアプリケーションを作成しデータベースを作成
ブラウザでアプリをcreateしたらresourcesのfind-more-addonsでポスグレを追加
アプリケーションのsettingで以下の${}に対応するkeyとvalueを設定

```
spring.datasource.url=${DATABASE_URL}
spring.datasource.username=${DB_USERNAME}
spring.datasource.password=${DB_PASSWORD}
```


2について
自分のpc上で任意のディレクトリを作成しそこにgithubなどから公開したいアプリケーションをプル
pom.xmlがある階層まで降りたらherokuにログイン
以下のコマンドをcmdかpowershellで実行

```
heroku login
```

次に以下のコマンドでherokuのリモートリポジトリをherokuという名前で登録

```
git remote add heroku <herokuのgitあどれす>
```

commitする

```
heroku git:remote -a <app-name>
```

javaのbuildpacksをセットする

```
heroku buildpaks:set heroku/java
```

herokuはデフォルトでjdk8でビルドするらしいのでjdk8以外を使っている場合はpom.xmlと同じ改装にsystem.propertiesというファイルを置いて以下の内容を書きこむ

```
java.runtime.version=11
```
私はjdk11を使用していたので上記の内容をかいた

そしたら次に以下のコマンドをたたく

```
git add .
git commit -am "commit message"
git push heroku master
```
これで公開できる
[Bootstrap][Font Awesome]文字＋アイコンをリンクにする

こんな感じのナビゲーションバーにリンクを埋め込みます。
お家、クリップ、人のアイコンはFontAwesomeで取り入れています。

![スクリーンショット 2021-06-29 10.04.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1633266/87117751-9214-c15a-0d2d-12db40463392.png)


まず、リンクなしの状態。

```
<ul class="navbar-nav ml-auto">
    
    <li class="nav-item mr-3"><i class="fas fa-home">About</i></li>
    <li class="nav-item mr-3"><i class="fas fa-paperclip">About</i></li>
    <li class="nav-item mr-3"><i class="fas fa-user-plus">sign up</i></li>
    <li class="nav-item"><i class="fas fa-sign-in-alt">login</i></li>
</ul>

```

リンクを埋め込む


```
<ul class="navbar-nav ml-auto">
    
    <li class="nav-item mr-3"><%= link_to "Home","/",class:"fas fa-home text-light" %></li>
    <li class="nav-item mr-3"><%= link_to "About","/home/about",class:"fas fa-paperclip text-light" %></li>
    <li class="nav-item mr-3"><%=link_to "sign up",new_user_registration_path,class:"fas fa-user-plus text-light" %></li>
    <li class="nav-item"><%=link_to"log in",new_user_session_path,class:"fas fa-sign-in-alt text-light" %></li>
</ul>

```

参考にさせていただいた記事

https://qiita.com/maru_katy/items/5d352951161ebd9b2e3a