OmniAICreator/Qiita-1.07M huggingface dataset:
Storybook v6.0新機能まとめ

#はじめに
https://storybook.js.org/releases/6.0
2020年8月10日にStorybook6.0がリリースされました。
5.3からアップグレードを行う際に調べた新機能や変更点などを自分なりにおおまかにまとめてみました。
基本的にはドキュメントや公式の記事に書いてある内容になるので詳しく知りたい方は[こちら](#参考)へ

**※間違いなどがありましたらご指摘お願いします。**

#Storybook 5.3からの主な変更点
##ざっくり
- セットアップが爆速でできるようになった
- ストーリーの再利用性があがった
- 複数のStorybookを一つにまとめられるようになった
- ドキュメントが充実

## Zero-config
公式がconfig書かなくていいよ！と言っている通り、セットアップが非常に簡単になりました。
具体的には以下になります。

- Typescriptのサポート
- Storybook Essentialsの登場

### Typescriptのサポート
Typescriptサポートが組み込まれました。これにより、プロジェクト内のTS固有のwebpackやbabel構成を削除できるようになりました。指定がない限りは各フレームワークの基本構成を使用するそうです。わかりやすい。

### Storybook Essentials
開発チームが厳選した、ほぼ必須アドオン達のよくばりパックです。もちろん面倒な設定を書く必要はありません。
Storybookには公式アドオンの他に多くのサードパーティアドオンがあり、カスタマイズ性がありましたが、ありすぎるが故にセットアップが困難になる可能性がありました。
このEssentialsはinitをしただけで勝手に追加され、よしなに動いてくれます。どれだけわかりやすいんだ。



## Storybook Args
ArgsはStorybookの記法であるComponent StoryFormat(CSF)の新しい概念です。
コンポーネントのpropsの初期値の宣言や再利用ができるようになります。
### こうかいていたのが
```js
export const Default = () => (
  <Button label="hello" backgroundColor="#222222" />
);

export const Disabled = () => (
  <Button label="hello" backgroundColor="#222222" disabled={true} />
);

export const Large = () => (
  <Button label="hello" backgroundColor="#222222" size="large" />
)
```

### Storybook Argsの場合こうやってかけます

```js
const Template = (args) => <Button {...args} />;

export const Default = Template.bind({});
Default.args = { label: "hello", backgroundColor: "#222222" };

export const Disabled = Template.bind({});
Disabled.args = { ...Default.args, disabled:true };

export const Large = Template.bind({});
Loading.args = { ...Default.args, size: "large" };
```

propsの数が多くなればなるほど、恩恵を受けることができます。
また、この書き方はもはやStorybookに依存していないためJestやその他ツールなどでも利用できます。
便利です。


## Controls
Storybook上からコンポーネントを動的に編集することができる新しいアドオンです。Essentialsに含まれており、特別なセットアップは必要ありません。
Storybook Argsで書いた場合コントロールが自動生成されます。べんり。
![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/784722/1b93fd14-f17b-4d34-eb9f-63d4fd0c61e7.gif)

## Composition
複数のStorybookを１つにまとめる事ができます。
異なるフレームワークを使用したプロジェクト間でも、Storybookを切り替えることなく共通デザインシステムを参照したり、全体感を確認できるようになりました。
筆者はまだ試せていないので、詳細は[こちら](https://storybook.js.org/docs/react/workflows/storybook-composition)へ

## 公式ドキュメント
v6.0に合わせて一新されました。
チュートリアルやガイドが非常に充実していて、わかりやすかったです。

#まとめ
v6.0からの新機能や変更点をおおまかにまとめてみました。
これ以外にも非推奨になったAPIやアドオンがあったり、変更された仕様などがあるので確認したい方は公式マイグレーションガイドを参照してください。

#参考
- [公式ドキュメント](https://storybook.js.org/)
- [公式ブログの6.0紹介記事](https://medium.com/storybookjs/storybook-6-0-1e14a2071000)
- [公式マイグレーションガイド](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md)
アセンブラーを作る。 その２

#概要

アセンブラーを作る。
俺cpuの、命令を拡張した。

#拡張した命令。

dup,ld,st,call,ret

#成果物

https://embed.plnkr.co/plunk/zPX4iOe6vl4ZQ6ju

以上。
MySQL導入の備忘録


## 説明
MySQLをbrewで導入し、補完を効かせたいので「mycli」も導入。
コマンド省略のためエイリアスの設定までを備忘録として残しておきます。

## 注意

ユーザー名を`naginx`としてコード内に記述しています。
ユーザー名を各自で置き換えてご利用ください。

`$`はターミナル内で打つコマンド、
`mysql>`はMySQL内で打つコマンドです。

各項目の詳細は`参考`の項目に記載しています。

## 環境
仕様シェル zsh
macOS Catalina ver10.15.6
brew 2.5.6
mysql 8.0.21
mycli 1.22.2

## 手順
- MySQLの導入
- mycliの導入
- ユーザーの作成
- エイリアスの設定


## MySQLの導入

```
$ brew install mysql
```

```
// MySQLがスタートできることを確認
$ mysql.server start

// MySQLに入れることを確認
$ mysql -u root -p
```

```
// MySQL内に入れたら終了して抜ける
mysql> exit
```

## mycliの導入
```
$ brew install mycli
```

```
// mycliコマンドでMySQLにrootで入る
$ mycli -u root
```

## ユーザーの作成
mycliでMySQLに入れたら以下手順

```
// ユーザーを表示して確認
mysql> SELECT host, user FROM mysql.user

// 事前にパスワードの文字数制限を緩和
mysql> set global validate_password.policy = "LOW";

// MySQLのlocalhostにユーザーを作成
mysql> CREATE user 'naginx'@'localhost' identified by 'password1234'

// 新規作成できてるかユーザーを表示して確認
mysql> SELECT host, user FROM mysql.user

// 設定反映のおまじない
mysql> FLUSH PRIVILEGES
```

デフォルトのパスワード字数制限が面倒なので緩和しています。

## エイリアスの設定
`.zshrc`内に追記して反映

```
# mysql系
alias myroot='mycli -u root'
alias mynaginx='mycli -u naginx'
```

## mycliの設定を変更
バックグラウンドが黒だと青色が認識しづらいので変更
`~/.myclirc`内

```
syntax_style = rrt
```


## 参考サイト
[Mac へ MySQL を Homebrew でインストールする手順 - Qiita](https://qiita.com/hkusu/items/cda3e8461e7a46ecf25d)
[mysqlのクライアントmycliが便利だった。 - Qiita](https://qiita.com/connvoi_tyou/items/9f734a738f09522b455e)
[MySQLにパスワードポリシーで怒られるときの回避策 - 外部ブログ](https://blog.pinkumohikan.com/entry/workaround_for_mysql_password_policy)
【python】sortとsortedの違い (Colaboratory)

#【python】sortとsortedの違い

pythonのsortとsortedの違いについて。
どちらも昇順ソートするアルゴリズム。

違いは破壊的かどうか。

sort：破壊的（元のデータが変わる）
sorted: 破壊しない（元のデータはそのまま）


```python:
#sortの場合
a = [2,3,4,5,1]
a.sort()
print(f'a:{a}')

#a:[1, 2, 3, 4, 5]
```

sortは元のデータ自体が変わる。

```python:
#sortedの場合
b = [2,3,4,5,1]
c = sorted(b)
print(f'b:{b}')
print(f'c:{c}')

#b:[2, 3, 4, 5, 1]
#c:[1, 2, 3, 4, 5]
```

sortedでは元のデータはそのまま。


<br>
ちなみに、**sortはメソッド、sortedは組み込み関数**。



<br>
##Colaboratoryとは？
googleの提供するオンラインのpython解析ツール。
pythonのコード実行結果を確認するときに便利。

JupyterNotebookも便利だが、インストールなど手間がかかる。Colaboratoryはページを開くだけなので簡単。

https://colab.research.google.com/notebooks/welcome.ipynb?hl=ja


・ノートブックを新規作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/51ad8a20-d60a-b326-4a5d-508989a956e3.png)


・画面上部の＋でコードやテキストボックスを追加できる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/23ae2b2b-1a76-a255-cc75-a453ab1bb7ab.png)

コードの実行は`Shift+Enter`


スプシなどと同様に他の人と共有できる。ボックスにコメントを記載できたりと何かと便利。
Swiftを使ってsinxの近似値を求める

## なぜSwiftなの？
Swiftを使うために環境構築を行うが必要ないため,すぐに始められる。MacかiPadがあれば[Playgrounds](https://apps.apple.com/jp/app/swift-playgrounds/id1496833156?mt=12)をインストールするだけで使うことができる。
また,Playgroundsには**ステップ実行**や**ゆっくり実行**という機能があり,for文やwhile分をステップごとに実行し,実行されている時の値の変化を確認することもできる。
さらに,**ビューア機能**を使えば変数の変化の様子を勝手にグラフ表示してくれる。
![2020-10-14 11.16のイメージ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/3f40f66a-ab98-7ef8-49ec-8bec9a137f2d.jpeg)

## sinxのマクローリン展開

$sinx$をマクローリン展開すると,
$$
sinx = x - \frac{x^3}{3!}+\frac{x^5}{5!}-\frac{x^7}{7!}+⋯+\frac{(-1)^{n-1}x^{2n-1}}{(2n-1)!}+⋯ 
$$


と表されるのであった。この記事では$sinx$の近似値をプログラミングを使って求めていく。


## 1.変数を用意する

マクローリン展開は何回でも微分できる関数$f(x)$を$x$の冪乗関数の級数の展開式の和で近似させるものであるのであった。この記事では$sinx$の値を`sum`として,`sum`にだんだん値を加えていく。

```swift
var sum = 0
print(sum)    //0
sum += 1
print(sum)    //1
```

また,近似する$x$を入れる定数も用意しなければならない。この時近似する値として$\pi/6$や$\pi/3$などの値を用いたいので,$\pi$が使えるよう`import Foundation`を書いておく。

```Swift
import Foundation
var sum = 0
let x = Double.pi/2
```

さらに,項として更新され続ける変数を用意する。

```Swift
var item = x
```

第一項は定数と同じになるので,`x`を入れておく。

最終的なコードは以下のようになる。



## 2.x=π/2として,第二項までコーディングする

コーディングをする上で小さな値から始めることや具体的な値で試行錯誤することは重要だと思う。(個人の見解)。この記事でもその理念に則り$x=\pi/2$として第二項まで,つまり
$$
sinx=x-\frac{x^3}{3!}
$$
までコーディングする。

```Swift
import Foundation
var sum = 0.0  //int型とdouble型は足算できないので,0.0と書きdouble型にする。
var x = Double.pi/2

sum += x
sum += -(x*x*x)/Double(3*2*1)
```

`sum`に$x$を加え,次の行で$-\frac{x^3}{3!}$を加えている。

最後に真値と比較する`print`文を加える。

```Swift
import Foundation
var sum = 0.0  //int型とdouble型は足算できないので,0.0と書きdouble型にする。
var x = Double.pi/2

sum += x
sum += -(x*x*x)/Double(3*2*1)

print(sum)//近似値0.9248322292886504
print(sin(Double.pi/2))//真値1.0
```

`Double(3*2*1)`としているのはInt型をDoule型に変換しているのだが,この記事では本質的な部分ではないので説明は割愛。

## 3.一般化しやすいように工夫する

さっきは第二項を`-(x*x*x)/3*2*1`としたが,これでは項数が増えるたびに$x$を増やさなければならない。項数が増えても短くコーディングすることができるように工夫を加える。

```Swift
import Foundation
var sum = 0.0  //int型とdouble型は足算できないので,0.0と書きdouble型にする。
var x = Double.pi/2

sum += x

for i in 2 ..< 3{
    x *= -(x*x)/Double((2*(i-1))*(2*i-1))
    sum += x
    print(x)
}

print(sum)//近似値0.9248322292886504
print(sin(Double.pi/2))//真値1.0
```

`for`を使い,項と変数`i`を対応させた。(1回しか実行されないが。)この場合第二項のみしか行わないので,`for i in 2 ..< 3`としている。一般化しているが,計算としては同じであるので2で出した答えと同じになるはずだ。

## 4.項数を増やす

一般化することによって項数を増やしても対応できる。

```Swift
import Foundation
var sum = 0.0  //int型とdouble型は足算できないので,0.0と書きdouble型にする。
let x = Double.pi/2
var item = x

sum += item

for i in 2 ..< 6{
    item *= -(x*x)/Double((2*(i-1))*(2*i-1))
    sum += item
}

print(sum)//近似値1.00000035425842861
print(sin(Double.pi/2))//真値1.0
```

第6項までの近似,つまり
$$
sinx= x-\frac{x^3}{3!}+\frac{x^5}{5!}-\frac{x^7}{7!}+\frac{x^9}{9!}-\frac{x^{11}}{11!}
$$
ではほとんど誤差が無いことがわかる。
MacにPython開発環境をインストールする

Windowsへのインストール方法は[こちら](https://qiita.com/suke_masa/items/ba147bd9a7f9da6c3481)

# 最終更新日

2021年7月2日

検証を行ったmacOSのバージョンは下記です。

- macOS Big Sur 11.4
    - Intel版でもM1（Apple Silicon）版でもOKです

インストールするもののバージョンは下記です。

- Python 3.9.2
- Visual Studio CodeのPython Extension（Visual Studio Code自体のインストールは別記事にて → [MacにVisual Studio Code（VSCode）をインストールする](https://qiita.com/suke_masa/items/9579eb7fab7b42dea673)）

> この記事が古くなった場合、下記の手順は最新のインストール手順とは異なっている可能性があります。

# 事前にインストールが必要なもの
- Homebrew
    - [公式サイト](https://brew.sh/index_ja)に書かれているコマンドでインストール
- Xcode Command Line Tools
    - Homebrewインストール時に一緒にインストールされるので、特に作業は必要なし

# Python
## インストール
(1) `brew install python@3.9` を実行してください。

(2) `python3 --version` を実行してください。Python 3.9.2がインストールされたことが確認できます。

```bash
$ python3 --version
Python 3.9.2
```

# Visual Studio CodeのPython Extension
> Visual Studio Code自体のインストールは別記事にて → [MacにVisual Studio Code（VSCode）をインストールする](https://qiita.com/suke_masa/items/9579eb7fab7b42dea673)

## インストール
(1) Visual Studio Codeを起動してください。

(2) Extensionの検索画面を開いて「python」で検索→MicrosoftのPythonエクステンションをInstallしてください。

![スクリーンショット 2021-07-02 13.03.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58650/6ec4727c-aa56-45c5-d887-fc90ac3c7400.png)
bat(バッチ)ファイルを起動すると文字化けする現象の対策

どうやら上手くコピー出来ていないみたい・・・
調べて見たらバッチファイルを起動すると、コマンドプロンプト画面では日本語が文字化けしていた為、対象のファイルが見つかりませんという事でした。

テスト用バッチファイル。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442974/153edd50-7a31-80ba-ce53-96e8965938ac.png)
実行結果。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442974/6033c39e-66bf-0e6d-1c42-230753a421c0.png)

ご覧の通り、バッチファイルの日本語部分のみ文字化けしています。
そしてエラーメッセージの日本語が正常に表示されている事から、コマンドプロンプトがus(英語)モードになっていたりはしていませんし、日本語表示出来ないフォント設定になっている訳ではありません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442974/d5ffe67d-2231-89eb-bf67-e1512d448109.png)
バッチファイルをWindowsのショボショボメモ帳で開いて編集していたので気付かなかったのですが、テキストエディタで開いたら
エンコードが思いっきりUnicode(UTF-8)って表示されていましたwww
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442974/1d908cb4-07a1-09ef-c193-06b0cad066df.png)
エンコードをShift-JISにして保存すれば・・・
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/442974/953fe07a-8ae6-d431-caab-eb57515e917f.png)
ほらこの通り♪
パスが見つからないエラーが出ているのは、そんなフォルダを作っていないからですw
文字化けテストなので、バッチファイルが文字化けしない事がチェック出来れば良かったので・・・

From
https://emotion92.blog.fc2.com/blog-entry-200.html
擬似コード、計算量とO表記法について

プログラミング初歩の初歩の専門用語メモ。


##擬似コードとは？

人間が理解できるように自然言語で表現したコード。


（例）プログラミングを日本語に翻訳したもの

```python:コード
if x > 10:
 print("xは10より大きい")
else:
 print("xは10以下")
```

```:擬似コード
もし、x > 10なら「xは10より大きい」を出力。
もし、x=1なら「xは１0以下」を出力。
```




<br>
##時間計算量と領域計算量について
最適なアルゴリズムを選ぶ際の選択肢。

・時間計算量
プログラム実行にかかる時間

・領域計算量
プログラム実行時に使用するメモリの量



<br>
##O（オー）表記法とは？
入力データ量と計算量の関係を記号で表したもの。

O(n): 入力データサイズと計算量が比例
O(n2): 入力データサイズに対し、計算量は２乗に比例

()内を**オーダー**と呼ぶ。
上記の例だと、オーダーはn、またはn2。

O(n)の方がO(n2)よりも処理量が少ないため、効率がいいアルゴリズム。




<br>
##データサイズと計算量について
計算量が同じでも、データの内容によって処理時間が変わるパターンがある。

例えば、100個の数字を上から順位確認し8を選ぶ場合、データが１から並んでいる場合と、100から並んでいる場合で処理量が大きく異なる。

計算量の算出は**最善・平均・最悪**の３パターンがあり、一般的には**最悪を用いて算出**する。

最悪を見積もっておけば、それ以上の処理時間を考慮する必要がないため。
【zsh】direnvで環境変数管理【初心者】

# データベースの環境変数を管理管理する

どうも皆さんこんにちは！:sun_with_face:
筆者は現在railsでwebアプリケーションを作成しているのですが、
データベースの環境変数を定義する際に便利に使えるものがないか探していました。
そこで見つけたのが、direnv(GitHub: [github.com/direnv/direnv](https://github.com/direnv/direnv))という環境変数管理ツールです！
今回はdirenvを使って簡単にできる、環境変数定義の紹介をします:information_desk_person_tone1:


# 前提条件
OS: MacOS, Catalina(バージョン10.15.7)
パッケージインストーラ: Homebrew
バージョン管理: git

# direnvのインストール

パッケージインストーラとしてHomebrewを使っているので、
ターミナル(zsh)で以下のコマンドを実行するだけでよいです:relaxed:

`brew install direnv`

なお、筆者がMacを購入した時には既にzshが標準で設定されていたので、
bashから切り替える必要はありませんでした！

zsh以外のインストール方法については [こちら](https://github.com/direnv/direnv/blob/master/docs/installation.md) :point_left:から

# hookする

direnvをきちんと使うにはシェルスクリプトとしてhookする必要があるようです。
一度hookを設定してしまえば、シェルを再起動するだけでdirenvが有効化されます！

vimを使って.zshrcファイルを編集します。以下のコマンドを実行します:point_down:
`vi ~/.zshrc`

その後、ファイルの最後部に以下のような一文を加え、保存します。

```:.zshrc
eval "$(direnv hook zsh)"
```

## 何をやっているのか
  
* `eval "$変数名"`: 変数の内容をコマンドとしてシェルに実行させる
* シェルスクリプトとしてフックする: コマンドの結果などを取得するための方法（要調査）


#ファイルの編集

config配下の以下のファイルを編集します！

```:database.yml
username: <%= ENV['DB_USERNAME'] %>
password: <%= ENV['DB_PASSWORD'] %>
```

`touch .envrc` で.envrcファイルを新規で作成し、以下のように編集します。

```:.envrc
export DB_USERNAME=ログイン名
export DB_PASSWORD=パスワード
```

また、以下のコマンドを実行します（実行しないとエラーが出ました）。
`direnv allow`


ターミナルを再起動し、
作業ディレクトリへ移動した際に以下のようなログが流れれば設定は成功です！:sunglasses:

```:ターミナル(zsh)
direnv: loading ~/（作業ディレクトリ）/.envrc                                                                                                                                           
direnv: export +DB_PASSWORD +DB_USERNAME
```

#.gitignoreに.zshrcを追加

このままだと、gitに.zshrcファイルが反映されてしまい
せっかく環境変数を設定しても意味がなくなってしまうので、
.gitignoreファイルに`.zshrc`を追加しましょう！


# 終わりに

最後までご覧いただきありがとうございました。
シェルスクリプトってめちゃ便利なんですね:relieved:
エイリアスなども簡単に設定できるようなので、
Dockerを使う際にも効率化のために導入してみたいと思ってます！

筆者はシェル初心者なので、誤った記載などあれば指摘くだされば幸いです。
それではまたどこかで！:walking_tone1:

# 参考にしたサイト
[Macで環境変数を管理するためのdirenvの設定方法](https://note.com/shimakaze_soft/n/n53949cc818d1)
[【eval】コマンド - 文字列を評価、連結して実行する](https://www.atmarkit.co.jp/ait/articles/1712/22/news019.html)
windowsでiverilog その76

#概要　

windowsでiverilogやってみた。
俺cpuに、間接アドレシングを導入した。

#ld命令

スタックトップをアドレスとして、メモリーからスタックトップに積む。

#st命令

スタックトップをアドレスとして、スタックネクストをデータとして、メモリーに書き込む。

#サンプルコード


```
mem[12'h000] = 16'h1055;//       push  85
mem[12'h001] = 16'h1008;//       push  8
mem[12'h002] = 16'h9000;//       st
mem[12'h003] = 16'he000;//       out
mem[12'h004] = 16'h1008;//       push  8
mem[12'h005] = 16'h8000;//       ld
mem[12'h006] = 16'he000;//       out
mem[12'h007] = 16'h4007;//bye:  jmp  bye
mem[12'h008] = 16'h0048;//a:  0x0048
mem[12'h009] = 16'h0049;//b:  0x0049
mem[12'h00a] = 16'h0050;//c:  0x0050
```

#iverilog実行結果


```

0xxx xxxx xxx zzzz x xx
0000 0000 xxx zzzz 0 00
0000 0000 000 zzzz 0 00
0001 0000 000 zzzz 0 00
0001 0000 000 1055 0 00
0001 0000 000 0055 0 00
0001 0055 001 0055 0 00
0001 0055 001 zzzz 0 00
0002 0055 001 zzzz 0 00
0002 0055 001 1008 0 00
0002 0055 001 0008 0 00
0002 0008 002 0008 0 00
0002 0008 002 zzzz 0 00
0003 0008 002 zzzz 0 00
0003 0008 002 9000 0 00
0003 0008 008 9000 1 00
0003 0008 008 zzzz 1 00
0003 0055 008 zzzz 1 00
0003 0055 008 0055 1 00
0003 0000 003 0055 0 00
0003 0000 003 zzzz 0 00
0004 0000 003 zzzz 0 00
0004 0000 003 e000 0 00
0004 0000 003 e000 1 00
0004 0000 003 0000 1 00
0004 0000 004 0000 0 00
0004 0000 004 zzzz 0 00
0005 0000 004 zzzz 0 00
0005 0000 004 1008 0 00
0005 0000 004 0008 0 00
0005 0008 005 0008 0 00
0005 0008 005 zzzz 0 00
0006 0008 005 zzzz 0 00
0006 0008 005 8000 0 00
0006 0008 008 8000 1 00
0006 0008 008 zzzz 1 00
0006 0000 008 zzzz 0 00
0006 0000 008 0055 0 00
0006 0055 006 0055 0 00
0006 0055 006 zzzz 0 00
0007 0055 006 zzzz 0 00
0007 0055 006 e000 0 00
0007 0055 006 e000 1 00
0007 0055 006 0055 1 00
0007 0000 007 0055 0 55
0007 0000 007 zzzz 0 55
0008 0000 007 zzzz 0 55
0008 0000 007 4007 0 55


```

以上。
Vue.jsの概念

Vue.jsは、インタラクティブな（双方向性の）UIを構築するためのJavaScriptのフレームワーク。
MVVMモデルの設計思考（ソフトウェアアーキテクチャ）を採用している。
コンポーネント指向のUIを設計することができる。

## MVVMモデルとは？
MVVMモデルとは、プログラムの処理を以下の3つの役割に分類して開発するモデル。

- Model
- View
- ViewModel

それぞれの頭文字を取ってMVVMモデルと呼ばれる。
基礎的なアーキテクチャであるMVC、及びViewとModelについては[こちらを参照](https://qiita.com/OhshimaRyo/items/310a098418cb09b24285)。

![ITエンジニアホワイトボード.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665389/86916d47-3bfb-ed15-06cf-ed2bc131dbea.jpeg)


### ViewModel
ViewModelは、ModelとViewを紐付ける接着剤の役割。

1. Viewからリクエストを受ける
2. ViewModelにリクエストが反映される（ViewModelのデータが書き換えられる）
3. Modelに処理を命令
4. 書き換えられた値をViewに反映

という処理を行う。値の変更が即時的にViewに反映されるのが特徴である。脊髄反射的なイメージ。

### データバインディング
MVVMモデルを支えるのが、データバインディングである。

データバインディングとはデータをバインド（結びつける）ことで、ViewとViewModelを結びつけることである。
データバインディングは、ViewとView Modelどちらかの値が変化するたびにViewとView Model、両方の値が変更される。

これが「データが双方向性を持って反映されるUI」を構築するVue.jsの最大の特徴である。

## コンポーネント指向とは？

![mokei_puramo_boy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/665389/7896e07e-f67d-e569-bdd4-3244292e8b4f.png)


コンポーネント（Component）とは、部品という意味である。

コンポーネント指向とは、様々な機能をそれぞれ1つのコンポーネントとして切り出し、複数のコンポーネントを組み合わせることで、1つのサービス、アプリケーション、WEBサイトなどを作り上げる考え方である。

サービスをガンプラとすれば、コンポーネントは1つ1つのパーツである。ガンプラを組み立てるようにサービスを作り上げるのがコンポーネント指向である。

### メリット
- 設計・開発・テストなどがコンポーネント単位でできる
- パーツを共通化することで、複数ページに渡る同じような実装を1つのコンポーネントで対応することができる

### デメリット
- 表示されるページ数に対して必要なファイル数が多くなる
- コンポーネントが共通化されている場合、1つのコンポーネントを変更すると別のページで不具合が発生する可能性がある

## 参考
-  https://digitalidentity.co.jp/blog/creative/mvc-mvvm.html#MVVMMVC
-  https://gihyo.jp/dev/serial/01/vuejs/0001
-  https://qiita.com/nabepon/items/723dc53ad584b3457ea7
Docker 操作メモ

# 使用環境
VirtulBox : 6.1
ホスト OS :Ubuntu 18.04
Docer : docker-ce 19.03.13
※ docker のホスト OS は VirtualBox 上で動かしている仮想環境

# イメージの実行
## CentOS を特権を付けて起動する場合。
```
$ sudo docker run -itd --privileged --name PROCESS_NAME IMAGE_NAME /sbin/init
$ sudo docker run -itd --privileged -p 8080:80 --name PROCESS_NAME IMAGE_NAME /sbin/init
                                       ↑ポートを指定する場合はこんな感じ
```
※docker グループに実行するユーザを入れていれば sudo は必要ない。

# コンテナのステータス確認
### ストリームさせる
```
$ sudo docker stats centos8
```
### ストリームさせない
```
$ sudo docker stats centos8 --no-stream
```
# 起動した後でメモリリミットを設定する
いろいろ躓いたが以下を実行することで成功。

```
$ sudo docker update -m 1G --memory-swap -1 CONTAINER_ID
```

## 以下躓いたことなど
初めは以下のコマンドを実行したがエラーとなってしまった。

```
$ sudo docker update -m 1G CONTAINER_ID
Your kernel does not support swap limit capabilities or the cgroup is not mounted. Memory limited without swap.
```
grub の swap 設定を変更することで解決。

```
$ sudo vi /etc/default/grub
$ sudo update-grub
grub.cfg をアップデートしてホスト OS を再起動。
```
再起動後に再度実行したところ以下のエラーとなった。

```
$ docker update -m 1G 917f3986a06b
Error response from daemon: Cannot update container 917f3986a06bb9f99b095af4f3e5334ce125f596f9926db2733bdb4d20868b47: Memory limit should be smaller than already set memoryswap limit, update the memoryswap at the same time
```

そこで、「--memory-swap -1」オプションを設定し実行したところ成功。

以下のようにメモリに負荷をかけたところ 1G の制限が掛かっていることが確認できる。

```
$ docker exec -it centos8 /bin/bash
# /dev/null < `yes`
```
```
$ docker stats centos8 --no-stream
CONTAINER ID        NAME                CPU %               MEM USAGE / LIMIT   MEM %               NET I/O             BLOCK I/O           PIDS
917f3986a06b        centos8             106.50%             1GiB / 1GiB         100.00%             15.4kB / 10.4kB     52.3MB / 4.1kB      229
```
visual studio2019でプログラムを発行できない問題を解決　 署名中にエラーが発生しました: signtool error: invalid option: /fd

#はじめに#
visual studio2019でプログラムを発行しようとしたら
**署名中にエラーが発生しました: signtool error: invalid option: /fd**

というエラ―が出てしまい、解決するのに苦労したので記事にしようと思います。 

#試したが解決できなかった方法#
まず、署名中のエラーでは  

**プロジェクトの署名の期限切れ**

もあるようですが、期限は問題なかったです。


次に、
**SignTool.exeが見つかりませんでした**
と表示される場合の対処法である
**「ClickOnce Publishing」 の追加インストール**を試してみました。

「SignTool.exeが見つかりませんでした」とは表示されていませんでしたが、
Visual Studio Installerを起動して「個別のコンポーネント」を確認したところ
**「ClickOnce Publishing」**がインストールされていなかったのでインストールしました。
![vs installer 検索.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572466/833ad112-27fa-ead9-3777-79c2a52fce61.png)

![ｖｓi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572466/6804d79e-efd5-6b2c-b870-52622ce9a12a.png)

![個別のコンポーネント.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572466/9c4ef6e7-a942-ddf5-3f91-a037af380a7f.png)




しかし、インストール後も発行しようとすると同様のエラーが出て発行できませんでした。

ここまでの参考記事 
VSエラー：署名中にエラーが発生しましたの対処方法
https://dianxnao.com/vs%E3%82%A8%E3%83%A9%E3%83%BC%EF%BC%9A%E7%BD%B2%E5%90%8D%E4%B8%AD%E3%81%AB%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E7%99%BA%E7%94%9F%E3%81%97%E3%81%BE%E3%81%97%E


#解決できた方法#
その後調べていくとこんな記事を見つけました。
 <signtool error: inval> clickonce visual studio
https://ameblo.jp/08128888/entry-12580129210.html  

 
・visual studio2008がインストールされている

・visual studio2017,2019がインストールされている

上記の条件にあてはまる場合に起こる症状のようです。


上の記事に英語のQAのリンクが貼られており
https://social.msdn.microsoft.com/Forums/en-US/a39b9f82-aaec-4bbd-8cb2-3cade50796ba/an-error-occurred-while-signing-failed-to-sign-bindebugapppublishprogramexe-signtool-error

google翻訳で読んでみたところ
**VisualStudio2008のSigntoolを参照してしまう**
のが原因のようです。

解決策の１つとして
**・Visual Studio 2008とそのすべてのコンポーネントを削除する**
という方法もあるようですが、こちらではなく

**・-C：\ Program Files \ Microsoft SDKs \ Windows \ v6.0A \ Bin \ signtool.exeの名前を
別の名前（たとえばsigntool.not_exe）に変更する**

という方法を試したところ解決しました！
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/572466/6cb6f24e-17cc-64b2-239c-17faac06cec3.png)



ただし、
**Visual Studio2008への署名はおそらく壊れます**

とのことなので、Visual Studio2008を今後も使用する場合に
 signtool.exe の名前をもとに戻せば再び署名、発行できるとは限らないので注意してください。
Linux　一般ユーザーへのsudo 権限付与

##１「wheel」グループに「abcde」ユーザーを追加します。

```
usermod -G wheel abcde
```

##２visudoを編集

```
visudo
```

##３コマンドの意味を理解しましょう

```
## Allow root to run any commands anywhere
root    ALL=(ALL)       ALL
```

root  rootユーザーは
ALL=  全てのホストから
(ALL) 全てのユーザーとして実行でき
ALL   全てのコマンドが実行できる
```

##４rootではなくwheelグループに対して権限を追加します

先頭の「#」を外してこの行を有効にします。

```
# Allows people in group wheel to run all commands
%wheel  ALL=(ALL)       ALL
```

##５　権限が効いてるか確認します。
rootをログアウトしてabcdeユーザでログインします。

ここではcatで実行が許可されていないコマンドを実行してみましょう。
通常の方法では権限がないためabcdeユーザで実行しても「許可がありません」とエラーが表示されます。

```
cat /var/log/secure
```

では続いてsudoを最初に用いて同じコマンドをたたいてみましょう。

```
sudo cat /var/log/secure
```

実行できていれば権限付与終了です
アルゴリズムとは？小学生でもわかるようにわかりやすく説明（初心者向け）

##アルゴリズムとは？

アルゴリズムという言葉はよく耳にし、概念的には理解しているがいざ説明しようとするとシンプルにできないので、改めて調べてみた。

アルゴリズムとは**問題の解決手順**のこと。


<br>
##わかりやすい例

例題) 東京から大阪までの行き方

＜アルゴリズム＞
・各駅停車の電車で行くか
・新幹線で行くか
・羽田空港まで行って、飛行機で大阪空港まで行くか
・車を使って高速道路で行くか
・車を使って下道で行くか
・高速バスを使うか
など

上記のように問題解決のための手段をアルゴリズムと呼ぶ。人により選択肢は異なる。

その中で最適だと思われる解を選ぶのが、最適なアルゴリズムを選ぶということ。



###数学も同じ
小学校や中学校の数学の問題も、解を求める時に人によって求め方が異なる。

例えば組み合わせを求める時に、
・全てを書き出して求める
・全体からありえない組み合わせを引く
・公式を使う方法
があるが、それら一つ一つがアルゴリズム。


###まとめ
アルゴリズムと聞くと学術的で専門家が使う難しいもののイメージがあったが、言葉の定義自体は小学生でもわかるとても簡単なものだった。
launchファイルからrostopic pubする

launchファイルを起動するたびにロードしたいメッシュファイルなどのマーカがある場合，別のターミナルから `rostopic pub` を使ってpublishするのが面倒だったため，launchファイルに記述できないかを調査した．

# 環境

- Ubuntu 18.04
- ROS Melodic (rviz: 1.13.13-1bionic)

# やりかた

`pkg="rostopic"`, `type="rostopic"` で `args` にJSONを指定すれば可能．このとき `&quot;` で全体を括る必要がある．

# launchファイルのサンプル

この例は， `world` 座標系に紐付けて球形（楕円体）のマーカをpublishする．見易さのためにインデントを付けているが，全て一行に記述しても問題はない．

なお，`type` の数字を変えることで別のジオメトリを表示することが可能．
http://wiki.ros.org/rviz/DisplayTypes/Marker

```xml
<?xml version="1.0"?>
<launch>
  <node name="rviz" pkg="rviz" type="rviz" />

  <node name="marker_publisher" pkg="rostopic" type="rostopic"
    args="pub -s /markers visualization_msgs/MarkerArray &quot;{
      'markers': [
        {
          'header': {
            'stamp': 'now',
            'frame_id': 'world',
            'seq': 0
          },
          'ns': 'sample',
          'id': 0,
          'type': 2,
          'action': 0,
          'pose': {
            'position': { 'x': 0.1, 'y': 0, 'z': 0.25 },
            'orientation': { 'x': 0, 'y': 0, 'z': 0, 'w': 1 }
          },
          'scale': { 'x': 1.5, 'y': 0.5, 'z': 0.5 },
          'color': {
            'r': 0.93, 'g': 0.67, 'b': 0.61, 'a': 0.75
          }
        }
      ]
    }&quot;" />
</launch>
```
Laravel PHP 三項演算子の戻り値部分の記載で苦労した

# 目的

- Laravelのbladeファイルの記載で三項演算子を用いて「文字列+DBのデータ」を表示分岐していたところ非常に苦労したのでメモとしてまとめる

# 実施環境

- ハードウェア環境

| 項目 | 情報 |
| --- | --- |
| OS | macOS Catalina(10.15.5) |
| ハードウェア | MacBook Pro (13-inch, 2020, Four Thunderbolt 3 ports) |
| プロセッサ | 2 GHz クアッドコアIntel Core i5 |
| メモリ | 32 GB 3733 MHz LPDDR4 |
| グラフィックス | Intel Iris Plus Graphics 1536 MB |

- ソフトウェア環境

| 項目 | 情報 | 備考 |
| --- | --- | --- |
| PHP バージョン | 7.4.8 | Homebrewを用いてこちらの方法で導入→[Mac HomebrewでPHPをインストールする](https://qiita.com/miriwo/items/cd54077aad7e139cf518) |
| Laravel バージョン | 8.6.0 | commposerを用いてこちらの方法で導入→[Mac Laravelの環境構築を行う](https://qiita.com/miriwo/items/adaaaeecae69d6392e08) |
| MySQLバージョン | 8.0.19 for osx10.13 on x86_64 | Homwbrewを用いてこちらの方法で導入→[Mac HomebrewでMySQLをインストールする](https://qiita.com/miriwo/items/ef6a064bc545fbea29d9) |

# 問題箇所

- 下記のように記載し三項演算子の真の部分にデータを入れ込みたかった。

    ```php
    @inject('ContentService', 'App\Services\ContentsService')
    <p>{{真偽判断の式 !== 0 ? 'コンテンツの数は{{$ContentService->getContent(Auth::id())}}件です' : 'コンテンツはありません'}}</p>
    ```
- 簡単に解説すると「真偽判断の式」が真のときのみp要素で「コンテンツの数は〇〇件です」（〇〇はDBから認証中ユーザIDを引数に取得したデータ）のように表示したかった。
- 中括弧が不足している旨のエラーが出て当該ページを表示する事ができなかった。

# 原因

- 単純明快な原因である。文字列連結がうまくできていないだけだった。
- 本来PHPで文字列を連結するときは下記のように`.`を使用する。

    ```php
    //「おはようございます」と出力される
    echo 'おはよう' . 'ございます'
    ```
- エラーが出た箇所は下記の部分である。

    ```
    'コンテンツの数は{{$ContentService->getContent(Auth::id())}}件です'
    ```
- 落ち着いて見るとエラーが出るのは当たり前である。文字列部分とデータ部分の連結部分似誤りがある。正しく記載すると下記のようになる。

    ```
    'コンテンツの数は' . $ContentService->getContent(Auth::id()) . '件です'
    ```
- 上記の内容を踏まえてp要素部分を正しく記載する。

    ```php
    @inject('ContentService', 'App\Services\ContentsService')
    <p>{{真偽判断の式 !== 0 ? 'コンテンツの数は' . $ContentService->getContent(Auth::id()) . '件です' : 'コンテンツはありません'}}</p>
    ```
【Rails】pry-byebugがブレークポイントをスルーして止まってくれない問題

# 開発環境
Docker: v19.03.13
Ruby: v2.5.7
Rails: v5.2.4.4
pry: v0.13.1
pry-byebug： v3.9.0
PostgreSQL: psql (PostgreSQL) 13.0 (Debian 13.0-1.pgdg100+1)

## 内容
Docker環境にて、Ruby on Rails の Gem `Pry-byebug`を導入し、処理を止めて変数やパラメータ、処理の流れを確認していたりしてたのですが急に止まってくれなくなりました。。。
本当に。急に。
コンソール上の表示では、ブレークポイントで`=>`マークは付くのですが下のように停止してくれずにブレークポイントをスルーしてレンダリングが始まってしまう状況に陥りました。
![スクリーンショット 2020-10-14 9.47.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/613376/765d44ac-af9b-0b4e-a5f1-f0b7ac4fcc16.png)
`[1] pry(#<HomesController>)>`と、デバッグ時のコマンド入力できそうな部分も表示はされるのですが何もしていないのにそのままスルーされてレンダリング...
初めての挙動でしたので、ネット上で色々と調べてみたのですがどこにも情報が載ってなく、2日程ハマりました...

## 解決策
結論から申し上げますと、アプリケーションルートフォルダ直下にある`tmp`を削除することで正常動作するようになりました。
どうして、tmpフォルダを削除したのかというところですがネット上で他の言語も含めて情報を見ていたら`キャッシュ`が`tmp`に保存されていると知りまして、「もしや、この影響で不具合が起きてるのでは?? キャッシュなら削除したって問題ない??Gitで管理してるし不具合起きたら戻せば良いよね...」と思い、削除してみたら当たりました。笑
tmpって、Temporary File(=一時ファイル)を指しているんですね...勉強になります。笑
こういうフォルダやファイルのネーミングからヒントを得られましたね。意味を知っておくことも重要なんだなと感じました。

Railsガイドを見ても、同じようにアクションキャッシュなどを格納するフォルダと書いてあります。
ただ、失敗したなと思うのは Railsガイドには

> rails tmp:cache:clearで、tmp/cacheを空にします。
rails tmp:sockets:clearで、tmp/socketsを空にします。
rails tmp:screenshots:clearで、tmp/screenshotsを空にします。
rails tmp:clearで、cache、sockets、screenshotディレクトリを空にします。
rails tmp:createで、cache、sockets、pidsのtmpディレクトリを作成します。

と、記載してありました。

一気にフォルダを消すのではなく、このコマンドを実行して切り分け行えたらもっと理解を深められたなぁと反省しております。
正常動作に戻ってしまったので原因に関しては掴めませんでしたが、同じような状況になられましたらお試し頂けたらと思います。
Unityの条件分岐色々※随時更新

##ゲームオブジェクトがアクティブかどうか
GameObject.activeSelf を使う。
activeSelf は、ゲームオブジェクトのアクティブ状態を読み取る専用のメソッド。
参考: [GameObject-activeSelf - Unity スクリプトリファレンス](https://docs.unity3d.com/ja/2019.4/ScriptReference/GameObject-activeSelf.html)

```
if(A.activeSelf == true)
{
  Debug.Log("Aがアクティブな場合表示される");
}
```

アクティブ状態に関するメソッドに、SetActive が存在するが、こちらはアクティブ状態の切り替えに使用されるため、アクティブ状態を利用した条件分岐には使えない。

```
// NG例
if(A.SetActive == true)
{
}
```
Azure DevOps Tips - Pipelineが削除できない場合の手順

#概要
Azure Pipelineを削除しようとしたら、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/ccf94854-c137-783f-c951-c8d59e1111ae.png)
「One or more builds associated with the requested pipeline(s) are retained by a release. The pipeline(s) and builds will not be deleted.」
というメッセージが表示されて、Pipelineが消せなかった時の対応方法の備忘録。

#背景
Azure Pipelineを使って、Azure Reposにコミットしたプロジェクトを
自動でAzure App Serviceにデプロイされるようにしていたのですが、
設定に誤りがあって作り直そうと思って・・・。
で、Azure DevOpsから該当するPipelineを削除しようとしたら消せなくて。

#試したこと（読み飛ばしてOK）
ちゃんとエラーメッセージを読めばわかるやんというツッコミが出そうです（汗）。

メッセージを直訳してみたら
「要求されたパイプラインに関連付けられた1つ以上のビルドは、リリースによって保持されます。パイプラインとビルドは削除されません。」
と変換されました。

ん？リリースによって必ず一つ以上のビルドが保持されるから、削除できないの？
別のPipelineを作ってビルドしてリリースしたら保持されなくなるのかなーと考えて、
作って試してみるけど・・・削除できない。

とりあえずメッセージをGoogleさんで検索してみる。
英語のページばかりで挫けそうになる（笑）。

#方法
メッセージが言いたいことは、
「リリースがパイプラインに関連付けられたビルドを保持してるので削除できないよ」
ということらしく、
PipelineのReleasesの中にあるビルドされたものを、先に削除する必要があります。

ということで、Releasesを確認します。Azure DevOpsにログインし、左側メニューからPipelineのReleasesを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/403a0cac-f215-11ba-e9bb-037c8c01acc1.png)

該当Pipelineのリリースを選択し、右上にあるアイコンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/3978d5ec-7c23-6579-92e1-e61e46acae4a.png)

メニューが表示されるのでDeleteを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/98967e0d-9987-eca9-4e76-279611e11c41.png)

確認画面が表示されるので、必要に応じてコメントを入力し、OKをクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/6702eca9-e3bc-5a27-40b3-03f12de1fcc5.png)

Releasesに該当Pipelineのリリースが無くなったことを確認し、
左側メニューからPipelineのPipelinesを選択します。
その後、該当Pipelineの右側メニューからDeleteを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/bafdd4e4-6633-9deb-cb08-b717d59e8453.png)

確認メッセージが表示されるので、Pipeline名を入力してOKをクリックすると、今度はちゃんと削除できました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/855dc190-76b7-2ca8-3bdb-c4fdfba87cd1.png)
[Vue.js]自前でv-forとv-ifを同時に利用しないスライダーを実装する

# この記事で書くこと
ソースの公開。

# この記事を書く理由
Nuxtでアプリケーションを作成している時に、「スライダーを実装したいけど、モジュールを入れるほどじゃない、、」と思った時、いくつか記事をみたのですが、以下のように実装されているものが多かったです。

```vuejs

<div>
  <transition :name="slider">
    <div :key="idx" v-for="(content, idx) in contents" v-if="content.id== idx"/>
       // 中身
    </div>
  </transition>
</div>
```
この実装は、うまく表示されますが、一つ問題があります。それは、v-ifとv-forを同時に使用していることです。
Vue.jsのドキュメントにあるように、これは非推奨となっています。:disappointed_relieved:（[Vue.jsドキュメント](http://qiita.com)）
なので、タイトル通り、v-forとv-ifを同時に利用しないスライダーを実装してみました。

# ソース

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="js,result" data-user="RyoTa0222" data-slug-hash="OJXLjxX" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="vue-slider">
  <span>See the Pen <a href="https://codepen.io/RyoTa0222/pen/OJXLjxX">
  vue-slider</a> by RyoTa (<a href="https://codepen.io/RyoTa0222">@RyoTa0222</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


改良の余地等あるかもしれません。コメントいただければ幸いです！:pray:
UIFlow で固定IPアドレスを使う

## はじめに
UIFlow からWi-FiのIPアドレスを表示，変更する方法です。
V1.64現在，公式ブロックに無いためTipsとして残します。

## 開発環境
・M5Stick-C
・UIFlow(Bata1.63)　Micropython v1.11
　2020/10/14 確認
　M5Stack シリーズは特に問わないと思います。

## Flow
標準では IPアドレスに関するブロックは見つかりませんでした。
SSIDとPASSを使いWi-Fiに接続します。
A/Bボタン イベントにてIPアドレスを変更しています。
ip, subnet, gateway, dns の順に指定できます。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186241/d24acd51-36c9-36c6-5f2e-73d52f1b10ee.png)

``` sample.py
# IP アドレスを変更
# AbstractNIC.ifconfig([(ip, subnet, gateway, dns)])

# 192.168.1.91
  wifiCfg.wlan_sta.ifconfig(('192.168.1.91', '255.255.255.0', '192.168.1.1', '192.168.1.1'))
# 192.168.1.92
  wifiCfg.wlan_sta.ifconfig(('192.168.1.92', '255.255.255.0', '192.168.1.1', '192.168.1.1'))

```
## まとめ
IPアドレスの変更，私の環境では一瞬で切り替えできました。
UIFlow で出来ないと感じた時はMicroPython のライブラリを調べましょう。

## 参考資料
https://docs.micropython.org/en/latest/index.html
https://docs.micropython.org/en/latest/library/network.html
Padrinoで開発時のRACK_ENVを変更するなどしてVIEW（テンプレート）が再読み込みされない場合は reload_templates を enable にしてやる

PadrinoというRailsとSinatraの中間ぐらいのRubyのフレームワークを使っているのですが、Reloader がうまく効いてくれず、コントローラーは再読み込みされるのにビューが再読み込みされなかったので調べました。

原因は `RACK_ENV` を `development_xx` のように変更していたことで、
解決方法は app.rb で以下のように指定してやることです。

```ruby
enable :reload_templates if RACK_ENV =~ /^development/ 
```
Padrino、そんなに大きくないしWebに情報がそんなにないので、ソースでそれっぽいところを読むのが最短かもしれません。

参考： http://sinatrarb.com/intro-ja.html
[windows] pipenvの使い方

#pipenvとは
仮想環境を作る。
#インストール
```
C:>pip install pipenv
```

#pipenv起動

pipenvを使うファイルを作る。

```
C:>mkdir newdir
```

上で作ったファイルに移動

```
C:>cd newdir
```

仮想環境を作る

```
C:\newdir>pipenv shell
```

以下のように仮想環境が作れた

```
(newdir) C:\newdir>
```

#pipenv を使ってインストール
```
(newdir) C:\newdir>pipenv install (インストールしたいもの)
```
3.スプレッドシートにデータ保存GASコーディング

チャンネル指定してSlack投稿を取得
文字をざっくり検索して指定ワードがあったら
Googleスプレッドシートに保存する勤怠記録したいメモ

##作業流れ

- :one:認証用スクリプト記載したGAS準備
 - https://qiita.com/mmt/items/c899ef5420b51227fbfe

- :two: SlackAPP構築とGASでSubscription認証
 - https://qiita.com/mmt/items/54b522b50064237a59da

- :three:スプレッドシートにデータ保存GASコーディング(いまここ:construction_worker:)
 - https://qiita.com/mmt/items/1ae5ef27f5e2b935f80b

##APPの導通をチェック

下記のコードをGASに記載し、SlackAPPをインストールしたチャンネル投稿

GASを「公開＞ウェブアプリケーションとして導入」を行う、いろいろ聞かれるがOKな感じですすめる

下記画像の赤枠はだれでも実行可能が必要

![NoName_2020-10-14_9-11-46_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/a77ebddc-e975-9f9c-ae6f-143a0a013a25.png)

``` 
function doPost(e) {
  //シート1はシート名に応じて変更
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('シート1');

  //送られてきたトークンが正しければ勤怠を記録する
  //parameterは必要に応じて変更してください
    var datetime     = new Date();
    var date         = (datetime.getFullYear() + '/' + ('0' + (datetime.getMonth() + 1)).slice(-2) + '/' + ('0' + datetime.getDate()).slice(-2))
    var time         = (('0' + datetime.getHours()).slice(-2) + ':' + ('0' + datetime.getMinutes()).slice(-2));
    var user_name    = e.parameter.user_name;
    var trigger_word = e.parameter.trigger_word;
    var text         = e.parameter.text;

    //追加する配列を作成
    array = [date,time,user_name,trigger_word,text];

    //シートの最下行に配列を記述
    sheet.appendRow(array);

  return
}

```

![NoName_2020-10-14_9-19-47_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/76d3ea89-1057-c965-7999-d11f2e54f951.png)


![NoName_2020-10-14_9-16-51_No-00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48015/afbe5cb7-2d12-2b54-450b-3e5a92e25cb2.png)


上記のように日時だけ表示されると思われる

今後は、SlackAPPに権限を付与してユーザー名やチャンネル名などを表示できるようにする必要がある


####権限の公式サンプル


リアクション追加
https://api.slack.com/methods/reactions.add/test
作成したAPPにをチャンネルのメンバーに追加しないと動作しないでした

ユーザー情報の取得
https://api.slack.com/methods/users.info/test
チャンネル情報の取得
https://api.slack.com/methods/conversations.info

##参考サイト
google apps script でシートがなかったら作成してシートのオブジェクトを返す。
https://qiita.com/crawd4274/items/13120429cb3328e8ace2
【初心者向けGAS】スプレッドシートのセル・セル範囲とその値を取得する方法
https://tonari-it.com/gas-spreadsheet-range-value-values/
UIFlow でWi-Fi の電波強度を表示する

## はじめに
UIFlow からWi-Fiの電波強度を確認する方法です。
V1.64現在，公式ブロックに無いためTipsとして残します。

## 開発環境
・M5Stick-C
・UIFlow(Bata1.63)　Micropython v1.11
　2020/10/14 確認
　M5Stack シリーズは特に問わないと思います。

## Flow
標準では RSSI に関するブロックは見つかりませんでした。
コードを実行により，python コードを記載します。stと言う変数に代入します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/186241/98b49804-3ceb-a43d-4ad6-075e0003f5d1.png)

``` sample.py
#rssi を取得
st=wifiCfg.wlan_sta.status('rssi')
#IP を取得
st=wifiCfg.wlan_sta.ifconfig()
# MACアドレスを取得
st=wifiCfg.wlan_sta.config('mac')

```
## まとめ
UIFlow で出来ないと感じた時はMicroPython のライブラリを調べましょう。

## 参考資料
https://docs.micropython.org/en/latest/index.html
https://docs.micropython.org/en/latest/library/network.html
競技プログラミング基礎問題　問題名：正直者

#競技プログラミングの前提
自分が解いている[atcoder](https://atcoder.jp/contests/abc002/tasks/abc002_1)では基本的には
***何かしらの入力があって、出力を回答として返す***というのがルールになっています。
多分どの競技プログラミングもそうですが。。

具体的には以下の流れになります。

```
入力をgetsで受け取る
↓
何かしら処理をする
↓
putsで回答を出力
```
いかに具体的な問題文と解答を載せています。


#問題文
```
いま、神の恵みで高橋くんにお金が与えられます。
神は高橋くんに 2 つの金額を提示します。
正直者の高橋くんは、常に大きな金額を選択します。
そこで、与えられた2 つの整数のうち、大きい方の値を出力するプログラムを書いてください。
```

#ルール
![スクリーンショット 2020-10-14 8.50.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596035/5ad9884f-55fc-ef5a-63b9-8fad81dd8e9b.png)

#入出力のサンプル
```
以下の例１では10 11という文字列をgetsで受け取って、11をputsで返せばいい。ということになります。
```
![スクリーンショット 2020-10-14 8.50.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/596035/0cffb67c-0eae-7d2a-3740-d7e4ad74f127.png)

#回答例
とってもわかりやすく書いた時

```sample1.rb
# getsで入力を受け取ります。
input = gets # "10 11"が入る

# 文字列をsplitで空白で区切って配列に格納する。
input_array = input.split(' ') # input_array = [10,11]となっている

# わかりやすくするために2つの変数に置き換える
x = input_array[0] # "10"
y = input_array[1] # "11"

# 比較するためにstringからintegerに変換
x = x.to_i # 10
y = y.to_i # 11

# xとyでどちらが大きいか比べる
if x > y # xの方がyより大きい時
  puts x # xを回答として出力
else     # yの方がxより大きい時
  puts y
end
```
シンプルに書いた場合

```sample2.rb
x,y = gets.split(' ').map{|i| i.to_i}
puts x > y ? x : y
```

getsとsplitをつなげて書いたり三項演算子を使うことですっきり纏まっています。
この記載量では問題ないですが、上のプログラムのように変数を手当たり次第定義すると処理速度が落ちたりします。
まずは正確な回答ができることが第一ですが、余裕があればリファクタリングをしてスッキリ書けるといいかと思います！

#まとめ
競技プログラミングではgetsで始まりputsで終わる。
スッキリ書くと処理速度が上がる。
文字列から、JSONオブジェクトを正規表現で抽出

こんにちは。

文字列からJSONオブジェクトを正規表現で抽出したくなった事ってありませんか？

例えばAPIから返ってきたレスポンスが、下のような文字列だったとします。


```
string(102) "[
  {
    "id": 230,
    "content": "ブレイクアウトルーム",
  },
  {
    "id": 100,
    "content": "zoom",
  }
]"
```

JSON形式の部分だけ抽出して配列に代入できたら、操作が楽ですよね。

やってみると意外と大変だったので、備忘録として書いておきます。


## サンプルコード

```

$pattern = '/\{[\s\S]*?\}/';
preg_match_all($pattern, $response, $matches );
```
抽出結果

```
array(1) {
  [0]=>
  array(2) {
    [0]=>
    string(59) "{
    "word_id": 230,
    "surface_form": "ブレイクアウトルーム",
  }"
    [1]=>
    string(48) "{
    "word_id": 100,
    "content": "zoom",
  }"
  }
}
```

各配列の要素は、文字列ですがPHPでは、`json_decode($matches[0][0], true)`を使うと、連想配列に変換できます。



### 正規表現

ポイントは、正規表現の書き方です。

`'/\{[\s\S]*?\}/'`

#### 説明

`[\s\S]`

改行とそれ以外の文字にマッチ。
- \s ：空白、タブ、フォーム フィードなどの任意の空白文字
- \S：空白文字以外の任意の文字

`*`

直前の文字に0回以上マッチ。

`?`

- 最短マッチ。デフォルトでは最長マッチなので、全てのオブジェクトが一つの要素として取れてしまう。

## 参考
- [
正規表現：改行を含めて、複数行でマッチングする方法
](https://www-creators.com/archives/2589)
- [正規表現：最短一致でマッチさせる表現](https://www-creators.com/archives/1804)
DAC(任意アクセス制御)とMAC(強制アクセス制御)、RBAC(ロールベースアクセス制御)の違い

## 勉強前のイメージ

linuxのファイルユーザやプロセスに対してのアクセス制限のイメージ
任意と強制の違いは分からない

## 調査

### DAC(任意アクセス制御)

Discretionary Access Control の略
一般ユーザーが自分でシステム上のアクセス制御を行う方法です。
ユーザー自身が作成したファイルの 読み取り・書き込み・実行 についての制限を自由に設定可能です。
また、所有者やグループも変更することができ、作成したファイルのアクセス制限のすべての権限が与えられている状態です。
ただしユーザの自由度は高いが、管理者はすべてのユーザにファイル管理の権限を与えているためセキュリティ面ではあまり効果が期待できません。

### MAC(強制アクセス制御)

Mandatory Access Control の略
管理者一人がアクセス制限を行う方法です。
管理者以外のユーザはルールの変更が出来ないのが特徴です。
ユーザそれぞれに権限を与えているわけではないので自由度は低いが、セキュリティ面に関しては任意アクセス制御方式よりもセキュリティレベルは高くなります。
多くのアクセス制御において強制アクセス制御は使われており、[SElinux](https://qiita.com/miyuki_samitani/items/afecc0cb7733eff71bf8)などが有名です。
サブジェクト(ユーザーの操作等)とオブジェクト(システムやファイル等のリソース)のセキュリティレベルの設定を行い制限を行います。

### RBAC(ロールベースアクセス制御)

Role-based access control の略
DAC(任意アクセス制御)とMAC(強制アクセス制御)の中間的なアクセス制御がロールベースアクセス制御です。
サブジェクト(ユーザーの操作等)とオブジェクト(システムやファイル等のリソース)でアクセス制御をするのはMAC(強制アクセス制御)と同様ですが、
サブジェクト・ユーザーの操作等に対して制限を行うことで、全てを制限するのではなく一部アクセスの制御を行う方式です。


## 勉強後のイメージ

DAC(任意アクセス制御)はユーザのファイルとかに対する権限
　　「adminユーザのtest.txtは testユーザでは見れないよ」とか。
MAC(強制アクセス制御)はシステム全体に対する制限
　　SElinuxとか、サーバ全体的システム全体のイメージ
RBAC(ロールベースアクセス制御)は特定のユーザに特定のリソースを許可する制限
　　運用管理者だけ/var/www/html配下触れるとかの制限のイメージ
何となく今までそういう制限があるってのは触っててわかってたけど、こういう分け方がされているのは知らなかった。


## 参考

- [任意アクセス制御と強制アクセス制御](https://www.jpcert.or.jp/tips/2007/wr071001.html)
- [【図解】アクセス制御の種類,モデル/方式(任意/強制/RBAC)と実装例〜ネットワークシステムセキュリティの基礎〜](https://milestone-of-se.nesuke.com/nw-basic/as-nw-engineer/access-control/)
- [アクセス制御とは？基本的な機能やモデル方式の種類について紹介！](https://www.techdevicetv.com/ch_cybersecurity/34/)
javaでwebApi備忘録

#事前準備
・エクリプスの最新版

①eclipsのインストール方法
https://snome.jp/framework/springboot-install-win/
SpringBootの使用の前までで完了
ワークスペースのなぞ？
Eclipse はワークスペースとして指定されてディレクトリに “.metadata” という隠しディレクトリを作るので、これを検索します。
②Javaコンパイラの設定
特に設定しなくてもOK
③WEBAPIの作成方法
　サンプルを元にマーベンのPOMを変更
　https://codezine.jp/article/detail/11380?p=3
　
　④Java Spring Boot JSONの送信と受信のサンプル
　https://itsakura.com/java-springboot-json#s7
ハローワールドの出し方
https://qiita.com/kuro227/items/d7da647e9f3be78a5f92
アクセスするURL
http://localhost:8081/hello/
リファレンスAPI　スプリング
https://spring.pleiades.io/guides/tutorials/bookmarks/
マーベンのPOM
https://mvnrepository.com/search?q=javax.validation
spring boot で web api サーバを作る
https://qiita.com/kuro227/items/d7da647e9f3be78a5f92
修正点
・HelloWorldController.java
・Syain.java


ファイル(test.html)
```java

でマッピング
    @RequestMapping(method = RequestMethod.GET)
    public String getHello() {
        return "hello world!";
    }
file:///C:/Users/shimizu/Desktop/test2.html
でここにマッピングされる
    @RequestMapping(value = "/index",method = {RequestMethod.POST})
	@ResponseBody
	public Syain output1(
			@RequestBody Syain syain) {
				System.out.println(syain.getBangou());
				System.out.println(syain.getName());
				return syain;
	}

```
awk で html エスケープ

# awk で html エスケープする

[これ](https://www.kusaremkn.com/memo/pg/htmlescape) の awk 版を作ろうと思って。

```awk:html.awk
#!/usr/bin/awk -f

{
  gsub("&", "\\&amp;");
  gsub("'", "\\&#x27;");
  gsub("`", "\\&#x60;");
  gsub("\"", "\\&quot;");
  gsub("<", "\\&lt;");
  gsub(">", "\\&gt;");
  print;
}
```

# 遺言
置換先文字列の `\\&` を `\&` て書いてて悩んでたらカップ麺がのびた。
Ubuntu20.04の新規VMへanyenvやnodenvやphpenvをセットアップした時のコマンド履歴

備忘のための記録なので解説などは無し。
(※ 2021-06-21:phpenvのセットアップ部分で間抜けな記述をしていたことに気づいたのでちょっと修正した)

```
###################################
## https://cloud-images.ubuntu.com/minimal/releases/focal/release/
## のような minimal版のUbuntuを使う場合はgitとcurlを先にインストールしておく
###################################
sudo apt update
sudo apt upgrade
sudo apt install git curl


###################################
##  anyenv のセットアップ
###################################
git clone https://github.com/riywo/anyenv ~/.anyenv
echo 'export PATH="~/.anyenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(anyenv init -)"' >> ~/.bashrc
~/.anyenv/bin/anyenv install --init
exec $SHELL -l
~/.anyenv/bin/anyenv init
mkdir -p ~/.anyenv/plugins
git clone https://github.com/znz/anyenv-update.git ~/.anyenv/plugins/anyenv-update
git clone https://github.com/znz/anyenv-git.git ~/.anyenv/plugins/anyenv-git
anyenv update

###################################
##  nodenv, node, yarn のセットアップ
###################################
anyenv install nodenv
echo 'export PATH="$HOME/.nodenv/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(nodenv init -)"' >> ~/.bashrc
exec $SHELL -l
mkdir -p "$(nodenv root)"/plugins
## 次行を実行した結果、「already exists and is not an empty directory.」とか言われるかも。そしたら node-build は既にセットアップ済みなので実行不要。
## git clone https://github.com/nodenv/node-build.git "$(nodenv root)"/plugins/node-build
git clone https://github.com/nodenv/nodenv-update.git "$(nodenv root)"/plugins/nodenv-update
nodenv update
touch $(nodenv root)/default-packages
nodenv install 14.13.1
nodenv rehash
nodenv versions      ### 確認
nodenv global 14.13.1
node -v
npm -v
npm install -g yarn
nodenv rehash
yarn -v

###################################
##  phpenv, php7.4系 のセットアップ
###################################
anyenv install phpenv
exec $SHELL -l
echo 'export PATH="$(phpenv root)/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(phpenv init -)"' >> ~/.bashrc
exec $SHELL -l
phpenv --version
mkdir -p $(phpenv root)/plugins/php-build
git clone git://github.com/php-build/php-build.git $(phpenv root)/plugins/php-build
phpenv install --list
phpenv versions
sudo apt -y install build-essential
sudo apt -y install libxml2-dev libssl-dev libbz2-dev libcurl4-openssl-dev libjpeg-dev libpng-dev libmcrypt-dev libreadline-dev libtidy-dev libxslt-dev autoconf pkg-config libsqlite3-dev libonig-dev libzip-dev
phpenv install -i development 7.4.16
phpenv global 7.4.16
php -v


```
かんたんMarkdown を改良、すぐビルドできるdockerイメージも用意しました。

## すぐ使いたい方

* https://tukiyo.github.io/program/KanTanMarkdown/

## きっかけ

* [raugisu/KanTanMarkdown](
https://github.com/raugisu/KanTanMarkdown) の プレビュー時メニュー非表示版 が最高に良かったので、ここからforkしました。


### 改良

* [docker-KanTanMarkdown](https://github.com/tukiyo/docker-KanTanMarkdown)
* [tukiyo/KanTanMarkdown](https://github.com/tukiyo/KanTanMarkdown)

改良内容

* 閲覧モード
    * 見た目をQiitaっぽくしました。
    * スマホ表示に対応
    * codeタグをPotmumっぽくしました。
    * 記事が目立つような見た目にしました。(Potmumを参考)
    * info, warn, alert を bootstrap 4っぽくしました。
    * フローチャートとシーケンス図が左寄せだったので、中央揃えにしました。
* 編集モード
    * マウスクリックしても見出し同期するようにしました。
    * スクロール時に閲覧モードもスクロールするようにしました。
* 画像編集モード
    * ボタン表記を日本語にしました。
    * 青色を追加しました。
    * ボタンへのアクセスキーを追加しました。Altキーを押しながら( )内のキーを押してください。

その他の改良内容については詳しくは[Github](https://github.com/tukiyo/KanTanMarkdown)を参照してください。

閲覧モード
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/0ab82bc2-ab04-bcfd-7efd-d363931d5cf3.png)
編集モード
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/98a997c3-b8a1-36ee-d636-2663ff7d39b4.png)

----

## ビルド環境

```sh
git clone "https://github.com/tukiyo/docker-KanTanMarkdown"
cd docker-KanTanMarkdown

# ./KanTanMarkdown/ 内を改良する

sh run-build.sh
```

```sh
# 開発用。./KanTanMarkdown/src/ を編集すると自動でビルドされる
sh run-grunt.sh
```

![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/25728/639cbfb5-fea0-f02c-dc84-87b0cc106003.png)

```sh
# ビルド実施
sh run-grunt-build.sh
```

## IEについて

* IE8までは動作しない。IE9で確か動作した気がする。
作成済のRailsアプリケーションのView部分をReactに置き換えてみる

初めてのRailsアプリケーションを作成してから数か月、Reactの学習を兼ねて　View を編集していこうと思います。

### Railsアプリの確認
既に忘れている部分も多いのでまずはディレクトリ内の確認

直下に
package.json

他は rails new で作成されたものだと思う。

yarn が必要だという事なので確認

nvm -v 
  not found
npm -v
  6.14.7
yarn -v
  1.22.4


bin/ にインストールされているみたい。いつインストールしたのかは記憶にない。

次は gem webpacker が必要という事

```ruby:Gemfile
gem 'webpacker'
```

追記したら　

```
$ bundle install
```

必要なファイルの作成＆インストール

```
$ bin/rails webpacker:install
```

作成された　app/javascript/　app/javascript/packs/ ディレクトリ内にファイルを作成していくみたいです。

### React のインストール

```
$ bin/yarn add react react-dom
```

### JSX を使用する

デフォルトでは JSX は使用できないようです。

```
$ bin/rails webpacker:install:react
```

Webpacker now supports react.js:tada: って出た。
あーさっきのコマンドで初めてwebpackerがreactを認識するんですね。
JSX は使えなくて当然でした・・・。

app/javascript/packs/ に　hello_react.jsx が作成された。

app/views/layouts/application.html.slim 内に
 
```html:app/views/layouts/application.html.slim
<head>
  = javascript_pack_tag 'hello_react'
</head>
```

で　サンプルが表示される。

### 最後に MaterialUi をインストール

```
$ bin/yarn add @material-ui/core
$ bin/yarn add @material-ui/icons
```

次回から少しずつ変更していこうと思います。
Docker, java, vscodeの開発環境を構築

##前回の記事
[初心者がdocker for macをインストールしてphp7.0の動作環境を用意する](https://qiita.com/RubyLrving/items/2f22ecdbabd94dff05c0)

##この記事
前回はphp7.0の動作環境を用意しました。
今回はjavaを用意してみます。
目標はdocker + java + vscode。

##参考記事
[Visual Studio CodeのRemote DevelopmentとDockerで快適な開発環境をゲット
](https://tech-lab.sios.jp/archives/18677)

##Remote Development
Remote Developmentの拡張機能をインストール

##Microsoftが公開してるテストプロジェクトのクローンを用意
```cmd:git
git clone https://github.com/Microsoft/vscode-remote-try-java
```

##テストプロジェクトを開く
Visual Studio Codeの左下の緑のボタンをクリック＞Remote-Containers: Open Folder in Container＞gitのクローンフォルダを選択

##dockerでコンテナが起動しているか確認
![スクリーンショット 2020-10-14 8.17.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626801/d9efbbf8-e8db-5937-35a7-dc43a8808800.png)

##ビルドしてプロジェクトが動作するか確認
![スクリーンショット 2020-10-14 8.20.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/626801/c769de1d-fdaf-3075-469b-9e92b981446f.png)

##まとめ
前回の記事の方法よりRemote Developmentを使用するのが簡単ですね。
javaのバージョンも選択できるみたい。
ありがとう、Microsoft！！
WorkSpacesの全ユーザーのデスクトップにアイコンを表示する(Windows10)

WorkSpacesを利用する際に社内システムやネットワークドライブのURLを同ドメインの全ユーザーに表示したいことがあるかもしれません。その場合は「C:¥Users¥Public¥Public Desktop」にショートカットを置き、イメージを作成してバンドルを作成してユーザーに割り当てれば、そのバンドルのユーザーが参照可能となります。

Windowsとしては常識かもしれませんがいくつか試したので残しておきます。
(デフォルトでFireFoxのショートカットが置いてあります)
【rails】三項演算子

三項演算子について学習したためアウトプットいたします。

この記事を読むと三項演算子の意味、使い方を理解できます。

#前提条件として
条件式を分岐させる「if, else」の使い方を知った上で記事を読むことをオススメします。
わからない方は検索してみてください。

#三項演算子とは？
三項演算子とは、条件を分岐させるをif, else, ~endを使わずに記述する方法です。

メリットとしては、コードの量を少なくしてすっきりさせることができます。

一方デメリットとしては、
・視覚的に見てわかりにくい。
・式が複雑化すると非常にわかりにくい。が挙げられます（あくまで個人的な感想です）


#三項演算子の使い方
【真偽値式】 ? 【真の場合に評価する式】 : 【偽の場合に評価する式】

これだけだと意味がわかりませんよね。例を出していきます。

```csharp
<%= @group.name.blank? ? "このグループの名前はありません" : @group.name %>
```

【真偽値式】 　
ここの部分は真偽を確かめる式を入れる場所です。
この場合は@groupにnameがついていないか？と検証しています

【真の場合に評価する式】
真偽値式の場所で定義した式が正しかった場合の式を書きます。
この場合は「@group.name.blank?」が正しい場合。つまりグループに名前がない場合どのようなことを表すかです。
今回は"このグループの名前はありません"と定義しています

【偽の場合に評価する式】
真偽値式の場所で定義した式が正しくなかった場合の式を書きます。
この場合は「@group.name.blank?」が正しくなかった場合。つまりグループに名前があった場合どのようなことを表すかです。
今回は@group.nameと定義しています

#if elseで表すとよりも遥かにコードが少ない
if~ elseを使っても同じことを表せます。

```csharp
<% if @group.name.blank? %>
  <p>このグループの名前はありません<p>
<% else %>
  <p><%= @group.name %></p>
<% end %>
```

三項演算子が１行で済んだのに対し、こちらは４行かかってしまいます。
ここが大きな違いです。

ただ、個人的には、if~else~endの方が視覚的にコードが理解できるので私はこちらを使います。
（三項演算子はコードを見てじっくり考えないと気づかなかったです😅）

以上になります。