OmniAICreator/Qiita-1.07M huggingface dataset:
Qiipediaを爆速で作った物語【無料】【簡単】

**Qiitaのユーザが技術用語の説明を書いたら、分かりやすいプログラミング辞書ができるのではないか？**

# 作ったもの（Qiipedia）


![qiipedia.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/352865/7448a084-eec9-0bf4-a702-a33f23416099.png)

# 実現したいこと(動機) ＝ 投稿者に負担をかけないQiitaの閲覧性向上

はじめての技術を学ぶときに、 **wikipediaの内容が1%も分からずに、Qiitaに助けられる** ことが多い。

つまり、**Qiitaには既に有用な技術用語の解説記事が多数存在する。**

しかし、Qiitaでの解説記事の検索は、**外部のgoogle頼りで辿り着く**しかない。

一方で、技術情報の技術情報をアウトプットはハードルが高いため、**解説を意識すると記事のアウトプットが少なくなってしまう懸念**がある。

Qiipediaというプログラミング辞書の実現は、投稿者にとってQiitaの記事投稿に極力近い方法が望ましい。

# Qiipediaで実現できること

-　投稿者は**通常の記事投稿とまったく同じ操作**でQiipediaの執筆ができる
-　対象についての説明記事を**「ストック数」という評価順で**取得できる
-　編集リクエスト機能によって、Qiitaユーザ間でタイポ修正や加筆が可能

# Qiipediaの使い方

## Qiipediaへの寄稿の仕方

Qiipediaへの寄稿は簡単です。

あなたが作成した記事の説明対象の`タグ`を付与し、合わせて [タグ説明](https://qiita.com/tags/%E3%82%BF%E3%82%B0%E8%AA%AC%E6%98%8E) タグを付与して投稿して下さい。

## Qiipediaの参照の仕方

### TOPページ

https://qiita.com/tags/%e3%82%bf%e3%82%b0%e8%aa%ac%e6%98%8e

以下のUserScriptを設定すると、先頭の画像のようなTOPページになります。
~~ただ、Qiipediaのヘッダを付けるだけ~~

<details><summary>UserScriptの内容を確認する。</summary><div>

``` Qiipedia.js
// ==UserScript==
// @name         Qiipedia
// @namespace    http://tampermonkey.net/
// @description  Qiitaのタグ説明
// @author       j5c8k6m8
// @match        https://qiita.com/tags/%e3%82%bf%e3%82%b0%e8%aa%ac%e6%98%8e
// ==/UserScript==
const tagShow = document.querySelector('div.p-tagShow');
console.log(tagShow)
tagShow.insertAdjacentHTML(
    'afterbegin',
    '<div class="px-2 px-1@s pt-4 pt-1@s" style="max-width: 1100px; margin: 0 auto;">' +
      '<div class="px-4 py-2" style="background-color:#fff; border: solid 1px #55c500; border-radius :4px;">' +
        '<p>' +
          '<span class="mr-2" style="font-size: 28px; color:#3f9200">Qiipedia</span><span style="font-size: 18px;">へようこそ</span></p>' +
        '<p class="pt-1">' +
          '<span class="ml-1">Qiipediaは</span>' +
          '<span class="ml-1"><a href="https://qiita.com/j5c8k6m8/items/6214d551900aa5b3a8ef" style="color:#3f9200">誰でも編集できる</a></span>' +
          '<span class="ml-1">エンジニアのための</span>' +
          '<span class="ml-1">プログラミング辞書です</span>' +
        '</p>' +
      '</div>' +
    '</div>'
);
const tagShowContainer = document.querySelector('div.p-tagShow_container');
tagShowContainer.classList.remove("pt-4")
tagShowContainer.classList.add("pt-3")
```
</div></details>

### 検索ページ

https://qiita.com/search?q=tag%3A%E3%82%BF%E3%82%B0%E8%AA%AC%E6%98%8E+title%3A%E6%A4%9C%E7%B4%A2%E3%81%97%E3%81%9F%E3%81%84%E3%82%BF%E3%82%B0%E5%90%8D

上記の検索ページを開き、`検索したいタグ名`部分を調べたい単語に変更して検索ボタンを押して下さい。

ストック数で並び替えを行いたい場合は、デフォルトの「関連順」を「ストック数順」に変更して再検索してください。

## もっと詳しい使い方

より詳しい情報は[こちら](https://qiita.com/j5c8k6m8/items/2359627ff8c3778d95f6)のページを参照ください。

# 【爆速】【無料】【簡単】を実現するために使ったもの

- Qiitaのタグ機能
- Qiitaの検索機能
- その他Qiitaの機能
- UserScript(TOPページのヘッダ用)

~~ほぼ意味のない~~ヘッダの付与以外、全てQiitaの機能を使用したことで、UserScript作成のみ(約1時間)という【爆速】【無料】【簡単】な開発を実現しました。
~~これが、本当のサーバレス開発~~

# tl;dr
[Qiita夏祭り](https://qiita.com/official-events/0e872f8893283d4fd212)に乗じて、「タグ説明」タグの使い方を記事にするため、UserScriptを書いた。


# さいごに

本記事は`ポエム`ですが、(TypeScriptの静的型付けのような)省略可能なQiitaの仕様です。
本仕様を採用した実装が増え、タグ安全なQiitaの実現に可能性を感じています。
賛同いただけた方は「LGTM」するか「タグ説明」記事を書いて、タグ安全なQiitaの実現に協力して下さい。
[Rust] Shift_JISをUTF-8に変換する

# 試作品
Shift_JISのテキストファイルを読み込み、UTF-8に変換～保存するプログラムをRustで書いた。

```Rust
use encoding_rs;
use std::fs;
use std::io::Write;

fn main() {
    // 読み込むファイルパスの設定
    let path = "test_sj.txt";
    // 出力先ファイルパスの設定
    let mut file = fs::File::create("output.txt").unwrap();

    // 読み込み
    let s = fs::read(path).unwrap();
    // Shift_JISのバイト列(Vec<u8>) を UTF-8の文字列(String) に変換
    let (res, _, _) = encoding_rs::SHIFT_JIS.decode(&s);
    let text = res.into_owned();
    // 出力
    file.write(text.as_bytes()).unwrap();
}
```

# 要点

+ UTF-8以外の文字コードは文字列（`String`, `&str`）として扱えないので、バイト列（`Vec<u8>`）として読み込む。つまり`.read_to_string()`ではなく`.read()`を使う。
+ バイト列 → UTF-8 の変換には`encoding_rs`クレートを使う。
+ 上記コード中`res`は`Cow<str>`型になるので、`.into_owned()`で`String`に変換する。

# `Cow`について
初めて見る型だったので公式ドキュメントを読んだ。

https://doc.rust-lang.org/std/borrow/enum.Cow.html

>
```Rust
Enum std::borrow::Cow
pub enum Cow<'a, B> 
where
    B: 'a + ToOwned + ?Sized, 
{
    Borrowed(&'a B),
    Owned(<B as ToOwned>::Owned),
}
```
A clone-on-write smart pointer.

「参照（`&str`）と所有（`String`）のどちらでも対応可能な型」とのこと。
`.into_owned()`メソッドにより純粋な所有型（`String`）に変換できる。

https://docs.rs/encoding_rs/0.8.23/encoding_rs/struct.Encoding.html#method.decode
>
```Rust
pub fn decode<'a>(
    &'static self,
    bytes: &'a [u8]
) -> (Cow<'a, str>, &'static Encoding, bool)
```
Decode complete input to Cow<'a, str> with BOM sniffing.

そして`encoding_rs`の`.decode()`の返り値は`Cow`を含むタプル型である。
パターンマッチで必要な要素のみを取り出してから`.into_owned()`で変換すれば、UTF-8の`String`が得られる。

単純な文字コード変換で使う分には、`Option`型や`Result`型の返り値を`.unwrap()`で処理するのと同じようなものと思えば良さそう。

# 参考
Rustプログラミング入門（オーム社）
https://www.ohmsha.co.jp/book/9784274224355/

Stack Overflow - How do I use the SHIFT-JIS encoding in Rust?
https://stackoverflow.com/questions/48136939/how-do-i-use-the-shift-jis-encoding-in-rust

docs encoding_rs
https://docs.rs/encoding_rs/0.8.23/encoding_rs/index.html

docs std::borrow::Cow into_owned()
https://doc.rust-lang.org/std/borrow/enum.Cow.html#examples-4

Pythonでやる場合の例
https://dev.classmethod.jp/articles/python-encoding/
誰でもCSSでレスポンシブを整えられる！

# メディアクエリとは？
まず、「メディアクエリ」という言葉を知っていますか？
以前のWebはPCで見ることが前提でしたが、今はタブレットやスマホといったものが出てきているので、様々な媒体でしようされます。
そのため、メディア・タイプを拡張し”媒体の特性”まで判断できるようにしたのがメディアクエリです。

## メディアクエリの書き方
2通りあるのでやりやすい方でやってみてください。。

###スタイルシートに指定する場合
必ず、「大きい→小さい」か「小さい→大きい」の順番通りに指定するようにしましょう。

```css

/*
@media以外の所は全てのサイズで読み込まれます。
*/
p {
 color: red;
}
@media screen and (min-width:480px) { 
    /*　画面サイズが480pxからはここを読み込む　*/
p { color:#ededed;}
}
@media screen and (min-width:768px) and ( max-width:1024px) {
    /*　画面サイズが768pxから1024pxまではここを読み込む　*/
p {}
}
@media screen and (min-width:1024px) {
    /*　画面サイズが1024pxからはここを読み込む　*/

}
```

###link要素として指定する場合
この方法はhtmlのheadタグの中に記述する方法です。従来のCSSファイルを読み込む方法と違いがありません。

```application.html.erb

<head>
<link rel="stylesheet" href="style.css" media="screen and (max-width:480px)">

 中略
</head>
```

## グリッドシステムとは？
レイアウトを行う際、画面上に架空の縦横線をガイドラインとして引き、そのブロックごとに文字や図版を配置し、無駄なくスッキリした画面を作る手法。
指定する数値の単位に「px」以外に「fr」という単位も使います。
指定したものに余白を可変幅で適用させてくれます。

###基本的な使い方
親要素に以下を記述することで、列・幅を設定できます。
grid-template-rowsは各行の幅をしているもので、grid-template-columnsは各列の高さを表しています。

```css

body {
  /* これは絶対記述しないといけないもの */
  display: grid;

  /* 3行の均等な幅に設定されている */
  grid-template-rows: auto auto auto;

  /* 可変幅の列、700pxの列、可変幅の列と設定されている */
  grid-template-columns: 1fr 700px 1fr;
}
```

※repeat()記法を使うことで、トラックのすべてまたは一部を繰り返し表記することができます。
この記法では、「auto-fill」と「auto-fit」という値が使えます。簡単にいうと、、
・auto-fillでは、親要素にスペースが余る場合、空のグリッドが作られます
・auto-fitでは、親要素にスペースが余る場合、グリッド・アイテムの幅が変わってスペースが埋められます


```css

body {
  display: grid;

  /* repeatで書くとこうなる */
  grid-template-rows: repeat(3, auto);

  /* auto-fillの場合 */
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  /* auto-fitの場合 */
　grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
```

##使えるグリッドシステムの知識集

###gapプロパティ
指定した分、隙間をあけることが出来る。

```css

body {
　　display: grid;
　/* 視認性を高めるために間隔を追加 */
　　grid-gap: 10px;
}
```

###grid-auto-rows/grid-auto-columns
サイズリストでは不明確なグリッドトラックの縦方向のサイズを指定する際に使用します。
つまり、行や列が何行かが明確でないときに使います。

```css

body {
  display: grid;

　/* 100pxごとに自動で行を設定してくれる */
  grid-auto-rows: 100px;

　/* 100pxごとに自動で幅を設定してくれる */
  grid-auto-columns: 100px;
}
```

###ラインの番号で指定する
grid-row: アイテムが占める行のラインの番号をスラッシュ区切りで指定する
grid-column: アイテムが占める列のラインの番号をスラッシュ区切りで指定する


```css

.box1 {
　/* 左から1〜３行を占める */
  grid-row: 1 / 3;

　/* 左上から1〜２列を占める */
  grid-column: 1 / 2;

  background: #f88;
}

.box2 {
　/* 左から1〜2行を占める */
  grid-row: 1 / 2;

　/* 左上から2〜3列を占める */
  grid-column: 2 / 3;
  background: #8f8;
}
```

###grid-auto-flow
グリッドアイテムを並べる方向を row または column で指定します。dense を指定すると、空きスペースをなるべく埋めるように配置します。

```css

.grid-container-row {
  display: grid;
  grid-auto-flow: row;
}

.grid-container-column {
  display: grid;
  grid-auto-flow: column dense;
}
```

###grid-template-area
グリッドで区切られた領域に名前をつけます。

```css

body {
  display: grid;
  grid-template-areas: 
            "a a a"
            "b c c"
            "b c c";
}

.box1 {
  background-color: red;
  grid-area: a;
}

.box2 {
  background-color: blue;
  grid-area: b;
}

.box3 {
  background-color: green;
  grid-area: c;
}
```
主なステータスコードまとめ

自分用メモです。

| ステータスコード |  シンボル            |    意味                    |
|:----------------|------------------------:|:----------------------:|
| 200             | :ok                  |        成功
| 201             |:created              |       リソースの作成に成功
| 301             |:moved_permanently    |       リソースが恒久的に移動した
| 302             |:found                |       リソースが一時的に移動した
| 303             |:see_other            |       リソースが別の場所にある
| 401             |:unauthorized         |      認証を要求
| 403             |:forbidden            |アクセスが禁止されている
|404              |:not_found            |リソースが存在しない
|405              |:method_not_allowed   |Httpメゾットが許可されていない
|500              |:internal_server_error|サーバーエラー

※恒久的（こうきゅうてき）とは不変であることをいう。

###簡単に覚えたい方はこちら

1XX(情報)
2XX（正常・成功）
3XX（リダイレクト）
4XX（クライアントに起因する異常・エラー）
5XX（サーバーに起因する異常・エラー）

参考：[ステータスコード](https://qiita.com/disapalt/items/65bec9207abbd04b3d0d)


プチ宣伝
公開日記というwebアプリを作りました。名前の通り毎日の日記を公開できるアプリです（公開しないことも可能）。現在利用者が自分しかいません。使ってください。お願いします😭。

https://public-diary.herokuapp.com/
Not Null制約とバリデーション(presence: true)の違い

- DB自体にNotNull制約をつける
- モデルへのバリデーション(presence: true)

の違いは何かについて記述していきます。

## NotNull制約とバリデーションの違い

結論から言うと、
**DB自体にNotNull制約をつける**
nillを拒否する(rollback)

**モデルへのバリデーション(presence: true)**
nil && 空文字("")を拒否する(rollback)

という違いがあります。
つまり、NotNull制約はnillは拒否するが、空文字が拒否しないということになります。
それでは、DB自体にNotNull制約をする必要はないのではないかという疑問が生まれます。

しかし、モデルへのバリデーションだけでなく、合わせてDB自体にもNotNull制約を記述する必要はあります。

## DBにNotNull制約を記述する理由
様々な理由があるようですが、その中から抜粋して紹介させていただきます。

[参考にした記事](https://oshiete.goo.ne.jp/qa/1927522.html)

- **プログラムのバグ等により、データに誤ってNullが入ってしまわないようにするため**
- **データとプログラムを切り離すため(もしもNullが入った場合に、DBエラーなのかプログラムのエラーなのかを知るため)**
Dockerでよく使うコマンド集


# 基本的なコマンド

## イメージ作成系

#### Current Directory 内の Dockerfile をビルドしてイメージ作成

```
$ docker build ./
```

#### ビルドを最初からやり直し

```
$ docker build --no-cache .
```

## コンテナ作成系

#### イメージからコンテナを作成（起動はさせない）

```
$ docker create イメージ名
```

## コンテナ起動系

#### 作成済みコンテナを起動

```
docker start コンテナ名
```

#### イメージからコンテナの起動＋接続

````Console
$ docker run -it イメージ名 bash

#### イメージからコンテナを起動（名前付き）＋接続
```Console
$ docker container run -it --name コンテナ名 イメージ名名 bash
````

#### 起動済みコンテナへ接続

```Console
$ docker exec -it コンテナ名 bash
```

## 確認系

#### イメージの確認

```Console
$ docker images
```

#### 起動中コンテナの一覧表示

```Console
$ docker ps
```

#### 起動中コンテナの ID のみ表示

```Console
$ docker ps -q
```

#### ポートフォワードの関係性

```
$ docker port コンテナ名
```

## コンテナの操作

#### ホストの/var/www をコンテナ内の/var/html からアクセスできるように共有

```Console
$ docker run -it -v /var/www:/var/html イメージ名 bash
```

#### ホスト 8080 番 port への通信をコンテナ 80 番 port へ転送

```
docker run -it -p 8080:80 イメージ名 bash
```

## 停止

#### コンテナの停止

```Console
$ docker stop コンテナID
```

#### 起動中コンテナをすべて停止

```Consle
$ docker stop $(docker ps -q)
```

#### コンテナの再起動

```
$ docker restart コンテナ名
```

## 削除

#### コンテナを削除

```
$ docker rm コンテナ名
```

#### イメージを削除

```
$ docker rmi IMAGE
```

## DockerHub 関連

#### イメージの pull

```Console
$ docker pull ユーザ名/レポジトリ名
```

#### イメージの push

```Console
$ docker push ユーザ名/レポジトリ名
```
画面の文字を極限まで小さくしてしまいました。

どうも、プログラミング初心者の白乃です。今日は勉強中に起きた事件と解決法について書いていこうと思います。
# やらかしてしまった事件
僕は日ごろコードを書くときVSCodeをつかっています。いつも通りコードを書いているときあるやらかしをしてしまいました。それはコマンドの打ち間違いです。そのコマンドが文字の縮小(ctrl+-)これを打ってしまい小さくなってしまいました。
それだけならよかったのですが焦ってそのコマンドを連打してまいました。![スクリーンショット (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657514/fd0e4e87-f24f-e075-ada0-87159a6e9a7f.png)
めーちゃくちゃ小さいですね。なにも読めません。もちろん焦ってしまいました。その時思いだしたのはプログラミングは検索力が大切という言葉でした。そこで冷静になって検索してみました。
# 実際の解決方法
検索して出てきたのは画像付きの説明文でした。悲しいことに文字が見えないのでさがせません。終わった…と思いましたがよくみてみると解決策がみつかってきました。
まずは外観の大きさのリセット　
こちらコマンドで直せます　文字が見えなくても大丈夫です
ctrl+NumLockの0　です
ここさえ直してしまえばあとは説明に沿うだけです
これだけだとコードのフォントは小さいままです。そこで次に行うのが表示（view）からコマンドパレット（Command Palette）を選んで検索ボックスにzoomと打ち込みエディタのフォントのズームをリセット(Editor Font Zoom Reset)を押すだけで元に戻ります。
直せましたでしょうか？困っている方の役に立てたなら幸いです。
今後も実際困ったことやその解決方法を書いていく予定なのでぜひともフォローよろしくおねがいします。
写真1枚で高精度な3D画像簡単作成やってみた【-1】。(隠れた領域が、本当に見えるのか？)

#概要
**写真1枚で** **高精度な3D画像↓　簡単作成**できるよう。
githubは、以下。https://github.com/vt-vl-lab/3d-photo-inpainting

論文『3D Photography using Context-aware Layered Depth Inpainting』
Meng-Li Shih1　さんらは、以下。https://arxiv.org/pdf/2004.04727.pdf

下記抜粋のabstractによると

**元のビューで遮られた領域に幻覚の色と奥行きの構造を含む、新しいビュー合成**

となっています。

論文のabstract（Google翻訳ママ）
>
738/5000
単一のRGB-D入力画像を3D写真に変換する方法を提案します。これは、元のビューで遮られた領域に幻覚の色と奥行きの構造を含む、新しいビュー合成のマルチレイヤー表現です。 基本的な表現として明示的なピクセル接続を備えた階層化深度画像を使用し、新しいローカル色と深度のコンテンツを空間コンテキストを意識した方法で閉塞領域に合成する学習ベースの修復モデルを提示します。 結果の3D写真は、標準のグラフィックエンジンを使用してモーションパララックスで効率的にレンダリングできます。 挑戦的な日常のさまざまなシーンでのメソッドの有効性を検証し、最先端の技術と比較してアーティファクトを少なくします。

↓**この記事のテーマは、以下の１点のみ。**

#隠れた領域が、本当に見えるのか？
「隠れた領域が、本当に見えるのか？」に関しては、特別な復元技術を用いない場合、見えないことは検証するまでもないですが、
実際の様子を以下に示します。
ここでは、**うまくいかない例**を示します。

(元の1枚の画像）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635153/f16fadd8-cf0c-ca59-bfc3-cbfbac26c880.jpeg" width=480>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635153/ee751f7c-31bc-9b03-036d-e1856e7e3fef.gif" width=480>
(元の1枚の画像）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635153/cbd18236-cb71-d990-f0cf-fc31b19a640a.jpeg" width=480>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635153/fed9db53-8af9-7c90-0a46-c07e4eb37196.gif" width=480>
(元の1枚の画像）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635153/02907b5e-ca86-c3d0-9004-082ccb541aed.jpeg" width=480>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635153/2ba9c9ca-3baf-05ea-c594-560e3942b392.gif" width=480>



⇒　特別な見解はありません。
　このようなうまくいかないケースがある状況に、ふつう、どう感じるのかな？？と。

　タイトルの『**隠れた領域が、本当に見えるのか？**』
　　⇒　**当然、見えません。**
　　⇒　総合的な技術で、見えないところも見えるようにするのが、
　　　　　将来、一般化されると想像します。(技術というか、インターフェースというか。）

#まとめ
このようなうまくいかないケースがある技術の扱いがよくわからないので、
記事に明示しました。
（このような事象が嫌いで、近づかない人もいるのでは？）

**コメントなどあれば、お願いします。**

参考。
[写真1枚で高精度な3D画像簡単作成やってみた【1】。(depthがPNGで編集できるようになりましたよ。)](https://qiita.com/torinokaijyu/items/aca0dc6fb038dcd023d7)

[写真1枚で高精度な3D画像簡単作成やってみた【2】。(depthをnumpyで加工してみる)](https://qiita.com/torinokaijyu/items/e761c00c87d6a00b8c30)
[](https://qiita.com/torinokaijyu/items/6889598b732851c2e8fd)

[写真1枚で高精度な3D画像簡単作成やってみた【3】。勝手にdepthのみ 別の手法（intel-isl のMiDaS他）。](https://qiita.com/torinokaijyu/items/6889598b732851c2e8fd)

:star2:  [写真1枚で高精度な3D画像簡単作成やってみた【0】。(空間の捉え方を確認した)](https://qiita.com/torinokaijyu/items/d93b83b6a135f1b9a660)

#役立つかもしれない情報（一連の記事【-1】～【3】総合）
【1】
・GFORCE GTX1050Ti（専用GPUメモリ4.0GB)では、
  **GPUのメモリ不足で動かない場合あり**。
　これは、**画像サイズに依存するのではなく**、
　おそらく、画像の中身で3Dの表現に必要なメモリ量の関係か何か。
　解決策、見つけていません。パラメータ変更等でなんとかなるのかも。
  赤い車ので、専用GPUメモリ3.4GB程度、白のは2.7GB程度使用されていました。
　このメモリ問題に関しては、とりえず、Google Colabとかを使うのがいいのでは？
・PNGによるdepth情報の編集を示しましたが、確か、デフォルトはnumpy?。
　そのデータ(numpy)をガタガタ扱うのができる方は、そちらを編集するのもありかも。
・PNGで表現されたdepthの情報は、どこかで正規化されている気がする。PNGのdepthのレンジを
　　変更しても結果が同じだった気がする。:star:

【3】
・全面が壁のような画像の場合、垂直面がうまく検出できないような気がする。
　　（簡単だと思うので、不思議。）depthの手法をいくつか試したが、
　　いまのところ良いものに出会ってない。
android:backgroundで躓いた話

普段何気なく使っていた、`android:background`で少し躓いたので、その解決策を記録に残します。

# 何が起こったか
```activity_main.xml
...
    <data>

        <variable
            name="colorResId"
            type="Integer"
            />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@{ colorResId }"
        tools:context=".MainActivity"
        >
...
```

```MainActivity.kt
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding: ActivityMainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        binding.colorResId = R.color.colorBlack
    }
}
```
```colors.xml
<resources>
    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>
    <color name="colorBlack">#000000</color>
</resources>
```

DataBindingを用いてresourceに定義されているcolorをbackgroundに反映させるようなコードを書いた時に、指定しているcolorになってくれなかった（今回は`R.color.black`)。

上記を実行すると、
<img width= 200 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/289190/ea2b54da-f27c-6d21-4bbc-99496be42a69.png">
なぜか背景が黒くなってくれない…

# 原因
`android:background`について調べることになるとは思わなかったが、調べてみました。 何やら、`android:background`は、引数に`Drawable`を期待しているらしい。 おそらく、colorのresourceID（整数値）を渡すことを想定していないので、思い通りの挙動をしてくれない。（意識して使ってなかったが、思い通りの挙動をしてくれた時もあったような…）

# 解決策
解決策として、BindingAdapterを作成することにしました。

```BindingAdapter.kt
@BindingAdapter("colorResId")
fun View.setColorResId(@ColorRes colorResId: Int?) {
    colorResId?.let {
        val color = this.context.getColor(it)
        this.setBackgroundColor(color)
    }
}
```
```activity_main.xml
<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        colorResId="@{ colorResId }" // 作成したBindingAdapter
        tools:context=".MainActivity"
        >
```
作成してBindingAdapterで行っていることは、
1. colorResIdを受け取る
2. colorResIdからcolorを取得
3. backgroundにcolorをセットする
最後に作成した、BindingAdapterをxmlに書くだけ。
C#のみを使ってコンパイラを作ってみた(途中経過)

#コンパイラとは#
**原始プログラム(任意の言語)から目的コードを生成するものを言います**
メタプログラミングの究極ともいわれたり言われてなかったり
#注意#
手探りで作成していますので間違っている部分もあると思います


#何を使うのか#
今回はC#だけを使います
もちろんライブラリは.net freamwork標準のものだけです
それ以外は使いません

#どのような処理か#
処理の流れは以下のようになっています

**字句解析
↓
構文解析
↓
意味解析
↓
最適化(最近はされないものも多い)
↓
コード生成**

##字句解析##
その名の通り文字をトークン(token)で分けます
その時文字情報とともにトークンの情報を持っておきます
##構文解析##
構文解析は構文を木構造にして構文情報をまとめます
##意味解析##
型のチェックや構文解析では調べきれなかった部分を調べます
##最適化##
中間コードに変換後に実行速度を上げるための処理です
##コード生成##
コード生成はwindowsであればexeを生成するわけです

#現在の進捗#
現在私のコンパイラは構文解析ができたところです
コンパイラの作成においてある程度の機能をある程度少しづつ実装した場合がよいと思います

#最後に#
コンパイラが完成し次第作成方法などを詳しく書きたいと思います
名古屋駅侵攻作戦：ブリーフィング資料を支える技術 ※パワポネタ

ネタ投稿です🦔
以下のパワポを作って遊んでいました。
会社で作ったら怒られる系のアニメ多用ですね。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">学習を回している間、PowerPointで遊んでいました🦔<br>「こんな資料も作れる。そう、パワポならね。」と言うセリフが脳内に浮かびました。 <a href="https://t.co/Xr9icVLGE7">pic.twitter.com/Xr9icVLGE7</a></p>&mdash; 高橋 かずひと (@KzhtTkhs) <a href="https://twitter.com/KzhtTkhs/status/1271801840464625665?ref_src=twsrc%5Etfw">June 13, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


思いのほか質問を受けたので、使用機能を簡単にまとめています。
※表現上の細かい調整はいくらかしていますが、、、

# 地図
Google Map の Create map Style にて、Aubergineテーマ、ラベル無しで地図スタイルを用意します。
https://mapstyle.withgoogle.com/
![2020-06-20 (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140207/89f8d5f7-b935-3356-7bab-efa593a1ae37.png)

# エリア名表示
![01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140207/8dced3bb-8320-1de9-8630-c60f0ed93e04.gif)
オートシェイプ(テキストボックス)に対して、開始アニメーションのワイプを設定しています。

# 侵攻ルート表示
![02.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140207/c304beae-7456-87e8-7ac8-2acf79fc1766.gif)
こちらもワイプです。
オートシェイプ(矢印)に対して、開始アニメーションと終了アニメーションのワイプを設定しています。

# エリア拡大
![04.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140207/4a91eadd-4d74-67c3-c9f5-d6cbad1ccfa1.gif)
スライドの切り替えにスライドズームを使用しています。
「挿入」→「ズーム」→「スライド ズーム」
![2020-06-20 (10).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140207/d27eef67-a32e-2eed-ddab-4c8db9173783.png)

以上。
chshでzshに切り替わらない……echo $SHELLもzshなのになんで？って思っていたら。

# よくあるzshに切り替える方法

```.sh
chsh -s /bin/zsh
```

これを実行すれば、シェルが切り替わるとだいたいどのサイトにも書いてある。
確認もした。

```
echo $SHELL
/bin/zsh 
```

よし切り替わったなと思っていた。

# 切り替わってなかった
再起動すれば読み込まれるというので、ターミナルを再起動するのだが、切り替わっていない。

なんで？？？

知識が少ないなりにいろいろ調べた。/etc/passwd~が関係あるんじゃないかとか、いろいろ。

# 答え
デフォルトのログインシェルを利用する設定になってないだけだった。

<img width="666" alt="スクリーンショット 2020-06-20 16.58.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/219573/228cf8a2-f0c4-7f58-d9eb-62073aa5b21d.png">

罠だと思う。

この画面は、ターミナルを開き、[ターミナル環境設定>一般]と進むと行ける。
ここで、デフォルトのログインシェルのラジオボタンをクリックしてターミナルを再起動したらzshになった。

同じことで時間を潰してしまっている人に届くことを祈りたい。

~おわり~
【TypeScript】【React】Could not find a declaration file for module ‘react’.の対処について


#はじめに

>import * as React from ‘react’;

Projectディレクトリ内のReactを読み込んでいるところ全てで、

>Could not find a declaration file for module ‘react’. ‘/Users/username/projects/project-name/node_modules/react/index.js’ implicitly has an ‘any’ type.
  If the ‘react’ package actually exposes this module, consider sending a pull request to amend ’https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/type

というエラーが表示されるようになった。


#"noImplicitAny": false　は違うのではないか、、

エラーのキーワードで調べてみると、


tsconfig.jsonに、

> “noImplicitAny”: false,

を追加する、という方法が見つかったが、ちょっと怪しいと感じた為、検索してみると、

[TypeScriptでこれは設定しとけっていうコンパイラーオプション(noImplicitAnyオプション)](https://qiita.com/hiro-hori/items/8ed49788477b75596c40#noimplicitany%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3)

こちらの記事に、すごくわかりやすく書いて下さっていました。ありがとうございます。

>　TSでは型定義がない変数はany型になってしまいます(暗黙のany型)。それを禁止します。


自分の場合、今のTypeScript学習段階では、any型をスルーしてしまうと型の理解に繋がらないのでアウトだと思いました。

#原因・対処

reactは typescriptで書かれてない上、型提供も元パッケージでしていないので型を別でインストールする必要がありました。

> yarn add -D @types/react

これで、型をインストールする。

型情報は、リリース時のパッケージには含める必要がないので
**-D**オプションをつけて、devDependencies にインストールする。

これで、すべてのエラーが消えた。


**devDependencies**:開発用の依存関係。開発ワークフローのどこかで必要で、コードの実行時には必要のない依存関係.

#終わりに。
最後まで読んで頂きありがとうございます:bow_tone1:
転職の為、未経験の状態からReact,TypeScriript,Docker,Rails等を学習しております。正しい知識を着実に身に着け、実力のあるエンジニアになりたいと考えています。継続して投稿していく中で、その為のインプットも必然的に増え、成長に繋がるかと考えています。
今現在、初心者だからといって言い訳はできないですが、投稿の内容に間違っているところや、付け加えるべきところが多々あるかと思いますので、ご指摘頂けると幸いです。この記事を読んで下さりありがとうございました。
Windows Terminal でエクスプローラーのカレントディレクトリを開く

アドレスバーに以下の文字列を入力して、[Enter] キーを押下するだけです：

```bat
wt -d .
```

![wt-current.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463374/b421387e-8acb-c8c8-7522-d03b0667f21e.gif)

Visual Studio Code のターミナル（PowerShell）からも同様に開くことができます<del>が、表現を少し変えましょう。バックグラウンドプロセスとして起動した方が便利だからです</del>。いつの間にかバックグラウンドプロセスであることを明示しなくてもターミナルへ戻るようになっていましたが、参考までに記載を残します：

```powershell
Start-Process wt -ArgumentList "-d ."
```

## コンテキストメニューから開く

[Add a context menu entry to "Open Windows Terminal here"](https://github.com/microsoft/terminal/pull/6100) という PR が Preview v1.1.1671 にてマージされています。
<del>問題が無ければ無印でも利用できるようになるでしょう</del>。[v1.4.3141.0](https://github.com/microsoft/terminal/releases/tag/v1.4.3141.0)で正式に利用可能になりました。

## 参考リンク

* [Windows ターミナルに対するコマンド ライン引数を使用する](https://docs.microsoft.com/ja-jp/windows/terminal/command-line-arguments?tabs=windows)
WSL2でdockerの環境構築


windows10のWLS2の構築と、WSL2上のdockerの構築をしましたので、手順を記載します。
## 環境
- Windows10 pro version 2004 os build 19041.329  
  *WSL2を設定するにはversion 2004以上が条件
- WSL2
- ubuntu 20.04 LTS
- docker 19.03.11

## WSL2の構築
### 1. Windowsの`Linux実行オプション`を有効化
PowerShellでコマンド実行 *管理者権限必要

```powershell
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
```

### 2. Windowsの`仮想プラットフォームオプション`を有効化
PowerShellでコマンド実行 *管理者権限必要

```powershell
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart
```

### 3. カーネルの更新
[wsl_update_x64.msi](https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi)から`msi`をダウンロードし、実行
参考：[WSL 2 Linux カーネルの更新
](https://docs.microsoft.com/ja-jp/windows/wsl/wsl2-kernel)

### 4. WSL2を既定のバージョンに設定
```powershell
wsl --set-default-version 2
```

### 5. Linxのセットアップ
Linxのディストリビューションを[Microsoft Store](https://aka.ms/wslstore)から選択
<img width="866" alt="microsoftstore.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/ca95acde-5620-0856-ef90-25f18b30171d.png">
<img width="840" alt="ubuntu.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/4ab05b2d-95dd-1fd0-517c-531b1f757f95.png">

インストール完了後、アカウントパスワードを設定し、セットアップ完了
<img width="609" alt="ubuntu_acp.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/adef8ae0-77f0-7081-daa3-35b0d4dd4dc9.png">

### 6. WSL2での確認
セットアップしたディストリビューションは以下のコマンドでWSL2からも確認可能

```powershell
wsl --list --verbose
```

ディストリビューションは以下のコマンドで操作可能

```powershell
# 稼働しているディストリビューションのリスト
wsl --list --running 

# ディストリビューションの終了
wsl --terminate <ディストリビューション名> 

# ディストリビューションの破棄
wsl --unregister <ディストリビューション> 
```

### 7. VSCodeからリモート接続
VSCodeの左下のマークから、`Remote-WSL:New Window`でリモート接続できます。
<img width="71" alt="vsdcode.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/a952cfee-e51f-c491-3118-d0d0d1a40e9b.png">
<img width="469" alt="vscode2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469859/1c752986-6a90-1990-6bb0-2af67187550c.png">

## Dockerの構築
リモート接続しているVScodeのターミナル上で、dockerをインストールします。

### 1.必要モジュールのインストール
```bash
sudo apt-get install \
   apt-transport-https \
   ca-certificates \
   curl \
   gnupg-agent \
   software-properties-common
```

### 2.docker公式リポジトリと連携
docker公式のGPGキー取得し、aptのキーに設定

```
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
```

dockerの公式URLをaptリポジトリーに追加し、最適化

```
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
sudo apt-get update
```

### 3.dockerのインストール
```bash
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-compose
```
dockerの開始が出来れば、セットアップ完了

```
sudo service docker start
```

# まとめ
旧来の`docker desktop for windows`は動作が重かったり、制約があり、使いにくかったですが、  
WSL2-dockerは構築も簡単で、軽快に動作します。
使いたいときに、起動、実行ができるため、開発環境として素晴らしいと感じました。
今後も活用したいと思います。

# 参考サイト
[WSL をインストールし、WSL 2 に更新する](https://docs.microsoft.com/ja-jp/windows/wsl/install-win10)

[WSL 2 Linux カーネルの更新
](https://docs.microsoft.com/ja-jp/windows/wsl/wsl2-kernel)
CSSで変数が使える！！？

# CSS変数というものがあるらしい。。
CSS 変数とは、正式には「カスケード変数のための CSS カスタムプロパティ (CSS custom properties for cascading variables)」と定義されています。従来の CSS では、変数は Sass や LESS のような CSS プリプロセッサを使わなければ利用できませんでしたが、多くのブラウザでサポートされたことにより利用可能になりました。ただし、Internet Explorer など一部のブラウザは対応していません。また、Edge はサポートしていますが、バグが多発している報告があるため、クロスブラウザでテストする場合は注意が必要です。もしも非対応ブラウザも含めてサポートする場合、後述する @supports ブロックを使う方法があります。

## 使い方のルール

###1.変数の定義は :root セレクタで行う
変数の先頭には -- (ハイフン 2 つ) を付ける。

```css

:root {
    --color-red: red;
}
```

###2,変数の呼び出しには var() 関数で行う
変数は大文字・小文字の区別するので注意する。

```css

:root {
    --color-red: red;
}

.hoge {
    color: var(--color-red);
}
```

※変数は別の値が設定された場合、要素の子要素は新しい値を継承する。

```css

.hoge {
  /* 変数未定義の場合はblueが適用される */
  color: var(--color-red, blue);
}
```
C#でクロージャを使いたかっただけ

複数の入力があって、数値の時と文字の時で処理するクラスを選択したくて、
入力が多くなると無駄なので処理するクラスのnewは一回だけにしたくて、
入力が全部数字だったりするときに文字の方をnewしたくない
そしてインスタンス管理のためのクラスを作りたくなくて、
処理の本筋の流れにごちゃごちゃ書きたくない

という時にクロージャを使った関数で実装してみる

```csharp
//本筋
public void Main(List<dynamic> args)
{
    var func = GetMethod();

    args.ForEach(input => func(input).Work(input));
}
```


```csharp
//本筋に書きたくない部分
public Func<dynamic,IWorker> GetMethod()
{
    IWorker human = null, robot = null;

    return (input) =>
    {
        return input is int 
        ? (human ?? (human = new Human()))
        : (robot ?? (robot = new Robot()));
    };
}
```


使ったクラス

```csharp

public interface IWorker
{
    void Work(dynamic value);
}

//数字の時に働く
public class Human : IWorker
{
    public Human() => Console.WriteLine("Human new!!");

    public void Work(dynamic value) =>  Console.WriteLine("human " + value);
}

//文字の時に動く
public class Robot : IWorker
{
    public Robot() => Console.WriteLine("Robot Created!!");

    public void Work(dynamic value) => Console.WriteLine("robot " + value);
}

```

入力

```csharp
var values = new List<dynamic> { 1, "1", 2, "test", 3, 4, "5" };
```

結果

```console
Human new!!
human 1
Robot Created!!
robot 1
human 2
robot test
human 3
human 4
robot 5
```
composer global require laravel/installer を実行するとエラーが出た

## 開発環境
ホストOS: Windows10 home
ゲストOS: WSL2 Ubuntu20.04
php7.4.7

##発生したエラー

 composer global require laravel/installer を実行すると以下のエラーが発生した。

```
 Problem 1
    - Installation request for laravel/installer ^3.1 -> satisfiable by laravel/installer[v3.1.0].
    - laravel/installer v3.1.0 requires ext-zip * -> the requested PHP extension zip is missing from your system.

```

どうやらphpのモジュールであるzipがインストールされていないとのこと。
しかしすでにzipはインストール済み

```
which zip

/usr/bin/zip
```

…だと思ったがモジュールのインストール時にバージョンを指定していなかった。

そこで、バージョンを指定して再度インストールする。

```
sudo apt install php7.4-zip
```

モジュールが追加されているか確認

```
php -m

[PHP Modules]
bcmath
.
.
(省略)
.
.
zip
zlib
```

問題なくインストールされている。
この状態で再度コマンドを実行すると問題なく実行することができた。

## まとめ

phpのモジュールをインストールする際はバージョン指定を忘れずに行う。
[PHP]一覧のデータを一つを抽出する方法

先日、記載した記事でデータベースを取得したデータを一覧にして表示を行なった。

今回は、これらの記事の詳細を見れるのようなプログラムを作成する。

始めに、
新しくprofile.phpとprofile.tpl.phpを用意する。

まず、profile.phpにてデータベースとリンクさせる設定を行う。

```php
<?php 
$pdo=new PDO('mysql:host=localhost;dbname=mydb;charset=utf8','root','root');
$message='トレーニングマックス';
$sql='SELECT dbPractice.id,dbPractice.name,dbPractice.bench,dbPractice.deadlft,muscle.model FROM dbPractice 
INNER JOIN muscle ON dbPractice.body_id =muscle.body_id
WHERE dbPractice.id=:id';
$statement=$pdo->prepare($sql);
$statement->bindValue(':id',$id,PDO::PARAM_INT);
$statement->execute();
$human=$statement->fetch(PDO::FETCH_ASSOC);
$statement=null;
$pdo=null;
require_once 'view/profile.tql.php';
?>
```
通常のデータベースの読み込みと違う部分は、全てを取得するのではなく、id一つ分を取得する。よって、sql文が

```php
$sql='SELECT dbPractice.id,dbPractice.name,dbPractice.bench,dbPractice.deadlft,muscle.model FROM dbPractice 
INNER JOIN muscle ON dbPractice.body_id =muscle.body_id
WHERE dbPractice.id=:id';//WHERE dbPractice.id=idにより一つ分のid変数を指定する
```
WHERE dbPractice.id=idにより一つ分のid変数を指定する
そして、

```php
$statement->bindValue(':id',$id,PDO::PARAM_INT);
```
によって変数idをバインドする。

また、変数idの指定を

```php
if(isset($_REQUEST['id'])){
    $id=$_REQUEST['id'];}
```
とリクエストがあった場合に変数idを定義させる。

そしてデータを取得する際に、

```php
$human=$statement->fetch(PDO::FETCH_ASSOC);
//fetch()で一つのデータを取得
```

これでデータが取得出来たのであとは、
profile.tpl.php,profile.tql.phpにて
詳細画面の追加と詳細画面へ遷移するボタンの実装を行う

```php　profile.tpl.php

<?php include('header.tpl.php');?>
<body>
   <h1><?php echo $message;?></h1>
     <ul>
     <li>NAME:<?php echo $human['name']?></li>
     <li>BP:<?php echo $human['bench']?></li>
     <li>DL:<?php echo $human['deadlft']?></li>
     <li>type:<?php echo $human['model']?></li>
     </ul>
  <p><a href="sql.php">リストに戻る</a></p>
 
</body>
```

```sql.tpl.php
<?php include('header.tpl.php');?>
<body>
   <h1><?php echo $message;?></h1>
   <table>
   <tr>
        <td>名前</td>
        <td>BP</td>
        <td>DL</td>
        <td>bodymake</td>
        <td>詳細</td>
     </tr>
   <?php 
   foreach($result as $value){?>
     <tr>
        <td><?php echo $value['name']?></td>
        <td><?php echo $value['bench']?></td>
        <td><?php echo $value['deadlft']?></td>
        <td><?php echo $value['model']?></td>
        <td><a href="profile.php?id=<?php echo $value['id']; ?>">詳細はこちらから</a></td>
     </tr>
  <?php }?>
   </table>
 
</body>
```

これで詳細画面を見ることが出来るようになった。
<img width="1440" alt="スクリーンショット 2020-06-20 15.56.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612642/ac0fc6b3-6467-e40c-736d-7b207b36e17d.png">
<img width="1440" alt="スクリーンショット 2020-06-20 15.56.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/612642/c45ce142-0eb3-1b3f-f18b-8ac03090d5b2.png">

ブログのタイトル一覧から詳細へ見れるような機能が実装出来そうですy（＾＾）y
Person.java

class Person {
  public static void printData(String name, int age, double height, double weight) {
    System.out.println("私の名前は" + name + "です");
    System.out.println("年齢は" + age + "歳です");
    System.out.println("身長は" + height + "mです");
    System.out.println("体重は" + weight + "kgです");
    double bmi = bmi(height, weight);
    System.out.println("BMIは" + Math.round(bmi) + "です");

    if (isHealthy(bmi)) {
      System.out.println("標準値です");
    } else {
      System.out.println("標準値の範囲外です");
    }
  }

  public static String fullName(String firstName, String lastName) {
    return firstName + " " + lastName;
  }

  public static String fullName(String firstName, String middleName, String lastName) {
    return firstName + " " + middleName + " " + lastName;
  }
  
  public static double bmi(double height, double weight) {
    return weight / height / height;
  }
  
  public static boolean isHealthy(double bmi) {
    return bmi >= 18.5 && bmi < 25.0;
  }
}
Main.java

import java.util.Scanner;

class Main {
  public static void main(String[] args) {
    Scanner scanner = new Scanner(System.in);
    
    System.out.print("名前：");
    // 文字列の入力を受け取ってください
    String firstName = scanner.next();
    
    System.out.print("名字：");
    // 文字列の入力を受け取ってください
    String lastName = scanner.next();
    
    System.out.print("年齢：");
    // 整数の入力を受け取ってください
    int age = scanner.nextInt();
    
    System.out.print("身長(m)：");
    // 小数の入力を受け取ってください
    double height = scanner.nextDouble();
    
    System.out.print("体重(kg)：");
    // 小数の入力を受け取ってください
    double weight = scanner.nextDouble();
    
    Person.printData(Person.fullName(firstName, lastName), age, height, weight);
  }
}
collection_radio_buttonsでモデルからラジオボタンを一気に生成する、かつenumの値を利用する

##　試したこと
タイトルの通りなのですが、こんな構造のenumがありまして、

```ruby
enum parking: {
    available: 1,
    not_available: 2,
    unknown: 0,
  }
```
ここから、こんな感じのフォームを生成したいと思っていました。

<img width="251" alt="コメント 2020-06-20 151608.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393888/2429926f-1606-fb1e-d8b2-0b0eac857e81.png">

個人的には、かなりつまづいてしまったので、それまでの過程をメモします。

## 前提条件
本記事の実装には以下の条件が必要です。

1. Railsのデフォルトの言語設定が日本語になっている
1. gem 'enum-help'が入っている

これらについては拙著ですがこちらをご覧ください。

[【初心者向け】i18nを利用して、enumのf.selectオプションを日本語化する[Rails]](https://qiita.com/tanutanu/items/d44a92425188a4489ec6)

## collection_radio_buttonsを使う
結論から言うと、書いたコードはこちらです。

```Ruby
= f.collection_radio_buttons :parking, Shop.parkings_i18n, :first , :last 
```
`f.collection_radio_buttons` のオプションに指定しているのは下記の要素です。

```
= f.collection_radio_buttons [データを保存するカラム], [コレクション], [ラジオボタンのvalue値] , [ラジオボタンのテキストになる値]
```
フォームの中で使わずに、`collection_radio_buttons`だけで使う場合は、こうなります。以下、[APIドキュメント](https://railsdoc.com/page/collection_radio_buttons)からの引用です。

```
collection_radio_buttons(オブジェクト名, コレクション名, メソッド名, value値 [, オプション])
```

## どういう仕組みなのか

```Ruby
= f.collection_radio_buttons :parking, Shop.parkings_i18n, :first , :last 
```
こちらのコードの中身はというとこのようになっています。

```
p Shop.parkings_i18n
=> {"available"=>"有り", "not_available"=>"無し", "unknown"=>"不明"}
```

`gem 'enum_help'`が入っているため、`_i18n`を末尾につけるだけで、日本語のenumを持ってくることができます。（←ここでかなりはまった）

そして、上記のコードにより、` {"available"=>"有り", "not_available"=>"無し", "unknown"=>"不明"}`というハッシュが得られるので、

最初の要素を`value`値に、最後の要素をテキストにすればOKです。

## classなども付与したいとき

ところで、最終的なコードは、class要素も付与したかったので、以下のようになりました。

```Ruby
= f.collection_radio_buttons :parking, Shop.parkings_i18n, :first , :last do |b|
  = b.label(class: "radio_button") { b.radio_button(class: "radio_button") + b.text }
```

これで、ラベル付き、クラス付きのラジオボタンが生成されました＾＾

## 余談：enumでもう一つはまったところ

ところで、enumでもう一つ動かない！！となっていた点があって…

```yml:ja.yml
enums: # 複数形！！
  facility:
    parking:
      available: "有り"
      not_available: "無し"
      unknown: "不明"
```

上記で、`enums`が`enum`になっていたため、なかなかenumの翻訳情報が読み出せずにおりました＾＾；（enum_helperを介さないところは`enum`でも動いたので。。。）

複数形にするの、忘れないようにしたいと思います。

## 参考：チェックボックスの場合

ところで、以前チェックボックスで似たようなものも作ったことがあり、よろしければこちらもご覧ください。

[【初心者向け】チェックボックスの書き方あれこれ[Ruby][Rails]](https://qiita.com/tanutanu/items/b86c4adc26ae464c71fd)

### その他の参考記事

こちらの記事には大変お世話になりながら作成しました！
[[RAILS]ENUMの値を日本語化してラジオボタンに突っ込む](https://cpx.business/blog/how-to-create-radio-button-using-enum/)
食費最適化　〜338 円（税込）で1日分の五大栄養素〜

# 概要

pythonライブラリの[PuLP](https://pypi.org/project/PuLP/)を使い、栄養を過不足なく摂れるという条件の下で食費最適化計算をしてみました。結論として、**338 円（税込）で1日分の五大栄養素を摂取できる**事が分かりました。

# PuLP

[PuLP](https://pypi.org/project/PuLP/)とは線型計画問題を解けるpythonライブラリです。以下の様にして線型計画問題を解く事ができます。

```python:python
import pulp

# 問題を作成
problem = pulp.LpProblem("最小化問題", pulp.LpMinimize)

# 変数を作成
x = pulp.LpVariable(f'var0')
y = pulp.LpVariable(f'var1')

# 目的関数を設定
problem += x + y

# 制約条件を設定
problem += 2 * x + y >= 1.5
problem += x + 2 * y >= 1.5

# 解く
problem.solve()

# 結果を表示
print(
f'''
最小値：{pulp.value(problem.objective)}
x：    {pulp.value(x)}
y：    {pulp.value(y)}
'''
)
```

```:output
最小値：1.0
x：    0.5
y：    0.5
```

今回行った食費最適化計算では次の様な問題を解きました。

|項目|値|
|---|---|
|問題の種類|最小化問題|
|変数|食品の数量（ご飯〇〇gなど）|
|目的関数|食品の価格の合計値|
|制約条件|・栄養成分の合計値が[食事摂取基準](https://www.mhlw.go.jp/stf/newpage_08517.html)の推奨量を超える<br/>・栄養成分の合計値が[食事摂取基準](https://www.mhlw.go.jp/stf/newpage_08517.html)の耐容上限量を超えない<br/>など<br/>|

※ 制約条件の基準値には、`男性` `53kg` `18~29歳代` `身体活動レベル2（通勤など軽い運動をする）`における値を使用しました。

ちなみに、[PuLP](https://pypi.org/project/PuLP/)の詳細は[この記事](https://qiita.com/samuelladoco/items/703bf78ea66e8369c455)に分かりやすく書かれています。

# 計算結果

次の組み合わせで1日分の五大栄養素を摂取できる事が分かりました。合計 338 円（税込）です。

|食品名|数量|価格（税込）|
|---|---|---|---|
|ご飯|912g（炊いた状態）|150|
|きな粉|76g|57.2|
|カットわかめ|2g|8.56|
|だし入り味噌|30g|8.56|
|ほうれんそう|31g|19.8|
|塩|0.3g|0.0291|
|スキムミルク|24g（粉の重量）|31.8|
|オリーブオイル|15g|14.7|
|えごま油|6.6g|26.2|
|ネイチャーメイド スーパーマルチビタミン&ミネラル|1粒|14.8|
|ネイチャーメイド ベータカロテン|1粒|5.41|

食品ごとの役割は次の通りです。

|食品|役割|
|---|---|
|ご飯|炭水化物とたんぱく質の主な供給源です。|
|きな粉|重量の9割以上が炭水化物・タンパク質・脂質で構成されています。特に食物繊維が大量に含まれています。その量なんと重量の17%。|
|ネイチャーメイド スーパーマルチビタミン&ミネラル|1粒で大半のビタミン・ミネラルを摂取できるサプリです。|
|えごま油|6割がオメガ3脂肪酸で構成されています。|
|その他|栄養成分の調整用です。|

# 最後に

本記事で紹介した食費最適化の詳細を [Githubで公開しています。](https://github.com/Biscuit01/food-cost-optimization)READMEに詳細を記載しています。また、この食費最適化で使用したipynbファイルを併せて公開しています。変数となる食品や、栄養成分の制約条件を変更しやすい形にしてあります。

また、制約条件の基準値として使用した、厚労省が公表している[食事摂取基準](https://www.mhlw.go.jp/stf/newpage_08517.html)をCSVにしたものを[Githubで公開しています。](https://github.com/Biscuit01/Dietary-Reference-Intakes-for-Japanese-2020-csv)

---

※ この記事はステマではありません。

# 追記（余談）

- この献立だと洗い物が楽です。えごま油とオリーブオイルはスプーンで飲めばOKで、他は油っこくないためです。
- きな粉は水に溶けやすいです。なので、プロテインと同じ様に飲むと楽です。
- きな粉1kgは3Lタッパーに収まります（1kgでは袋にチャックがついていない場合が多いです）：
  ![IMG_4375.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656622/bebb4d22-74c6-fabd-73d8-fc38b2dfc325.jpeg)



- 画像にしてみました：
  <img width="845" alt="スクリーンショット 2020-06-24 午後10.46.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/656622/78591b24-c21a-72df-8d28-64da5e8ed097.png">
Docker 基本コマンドメモ


##前提

Docker Hubにアカウント登録

##コマンド
###DockerHubにログイン
`docker login`

###コンテナイメージをプル
`docker pull　コンテナ名`

###Dockerイメージの一覧表示
`docker images `

###イメージからコンテナを作成する
`docker run コンテナイメージ`

###コンテナを全ての表示
`docker ps　-a `

###コンテナの起動
`docker run -it コンテナID シェル`

###停止中のコンテナの起動
`docker restart　コンテナID`

###Docker image名の変更
`docker tag 変更元　変更先`

###Docker HubにPush
`docker push リポジトリ名`

###イメージの削除
`docker rmi Dockerイメージ`

###停止しているコンテナを全て削除
`docker system prune`

###Dockerイメージから名前をつけてコンテナを実行する
`docker run --name コンテナ名 イメージ名`

###exit後にコンテナを削除する
`docker run --rm `
Knockout.jsチュートリアル4

##まとめ


##挙動の追加
この例の最後に、最後の動作を追加してみましょう："last name "の値を大文字にするボタンです。

##ビューモデルの更新
まず、この動作を実装するために、viewmodelにcapitalizeLastName関数を追加します。

```js:ViewModel
function AppViewModel() {
    // ... 変更しない。前回のコードは残す。

    this.capitalizeLastName = function() {
        var currentVal = this.lastName();        // Read the current value
        this.lastName(currentVal.toUpperCase()); // Write back a modified value
    };
}
```

**注意!**
観測可能な値を読み書きするには、関数として呼び出す必要がある。

**ビューの更新**
次に、クリックバインディングを使って、先ほど追加したビューモデル関数にクリックを関連付けるために、ボタンをビューに追加する。

```html:View
<button data-bind="click: capitalizeLastName">Go caps</button>
```

##コード

```js:ViewModel
function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");

    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();    
    }, this);

    this.capitalizeLastName = function() {
        var currentVal = this.lastName();        // Read the current value
        this.lastName(currentVal.toUpperCase()); // Write back a modified value
    };    
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());
```

```html:View
<! -- これは *view* - UI の外観を定義する HTML マークアップです。-->

<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>

<p>Full name: <strong data-bind="text: fullName"></strong></p>

<button data-bind="click: capitalizeLastName">Go caps</button>
```


**コード解説**

##実際の画面
[![Screenshot from Gyazo](https://gyazo.com/dd22402b747e85832ed8df339fc12e35/raw)](https://gyazo.com/dd22402b747e85832ed8df339fc12e35)

##参考にした記事（いつもありがとうございます。）
http://learn.knockoutjs.com/#/?tutorial=intro
Main.java

// java.util.Scannerを読み込んでください
import java.util.Scanner;

class Main {
  public static void main (String[] args) {
    Scanner scanner = new Scanner(System.in);
    
    System.out.print("名前： ");
    
    // 変数nameを定義し、コンソールから文字列を受け取って代入してください
    String name = scanner.next();
    
    // 「こんにちは◯◯さん」と出力してください
    System.out.println("こんにちは"+name+"さん");
  }
}
//コンソールから文字列を受け取る
options_from_collection_for_selectを理解する（プルダウンリストを簡単に作りたい）[Rails]

## とても長い名前のヘルパーメソッド

Railsガイドを読んでいて、`options_from_collection_for_select` という長い名前のヘルパーに出会いました。

以前、`options_for_select`を使って、プルダウンリスト（以降、Railsガイドの表記に習いセレクトボックスと呼びます）を作った時に

▼こちらです
[【初心者向け】form_with, haml, enumを使ってselectによるプルダウンリストを作った話[Rails]](https://qiita.com/tanutanu/items/1bb5f12ac8ae90e71352)

調べはしたけれども、よくわからなくて放置していたのでした＾＾；
今はRailsガイドを読んでしっかりわかるようになったので、自分なりに噛み砕いたことを発信したいと思います。

## まずは options_for_select で作ってみる

まず、上記の記事でも作成している、`options_for_select`タグを使った、セレクトボックスの作り方のコードがこちら

```Ruby
= options_for_select([['London', 1], ['Tokyo', 2], ['Beijing', 3]])
```

ただ、上記のコードだといちいち配列を列挙しなくてはいけないのが面倒くさい。
そのため、配列をモデルから生成することもできる。

```ruby
- array = City.all.map{ |city| [city.name, city.id] }
= options_for_select( array )
```

これでももちろんよいのだけど、二行になるのがちょっとダサい。
というわけで、もうコレクション（ここではモデル）から一気に選択肢をせいせいしてしまうのが、`options_from_collection_for_select` ヘルパーです

## options_from_collection_for_select の使い方

```Ruby
= f.select :where_to_go, options_from_collection_for_select( City.all, :id, :name)
```
`options_from_collection_for_select` はセレクトタグの中のoption要素しか生成しないので、全体を`select`タグで囲む必要があります。

必要な引数は以下の通りです。

```Ruby
options_from_collection_for_select( コレクション, [optionタグのvalueとなる値], [選択肢のテキスト])
```

そのほか、加えられるオプションや、classを加えるときはどうするの？？という方はこちらをご参照下さい。

[APIドキュメント](https://apidock.com/rails/ActionView/Helpers/FormOptionsHelper/options_from_collection_for_select)
[ruby on railsでselectのクラスが設定できない！](http://yamadagenki.hatenablog.com/entry/2015/12/27/022921)

最近はいろいろな形のフォームを作っているので、また何かあれば記事にしたいと思います。

### 追記（エラーが出たときや編集画面で入力ずみの内容を引継ぎたい時）
↑上記の内容で実装をしていたのですが、上記だと、編集画面や、入力内容にエラーがあって元の画面に戻るときに、すでに入力ずみの内容を引き継げないという不具合がありました。
そのため、下記のような形で `option`にデフォルト値を設定しました。

```ruby
= f.select :where_to_go, options_from_collection_for_select( City.all, :id, :name, @city.id)
# @cityはその時、コントローラーからViewに渡っている変数。ここでは仮に@cityとしました
```
Linux(Ubuntu)にphp7.4をインストールする方法

WSL2 Ubuntu20.04にPHP7.4をインストールする手順です。

##開発環境

ホストOS: WIndows10 home
ゲストOS: WSL2 Ubuntu20.04 

##インストール手順

以下のコマンドを実行します。

① パッケージのアップデートを確認

```
$ sudo apt update 
```

② software-properties-commonパッケージをインストールする。

```
$ sudo apt install software-properties-common
```

③でリポジトリを追加したいのですが、デフォルトではリポジトリを追加するためのコマンドがインストールされていません。ここでインストールしたパッケージはリポジトリを追加するためのものです。


③ リポジトリを追加する

```
$ sudo add-apt-repository ppa:ondrej/php
```

④ 再度パッケージをアップデートする。(①同じ手順です)

⑤ PHPをインストールする

```
$ sudo apt install php7.4
```

バージョン確認をして以下のように表示されればきちんとインストールできています。

```
$ php -v

PHP 7.4.7 (cli) (built: Jun 12 2020 07:44:38) ( NTS )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
    with Zend OPcache v7.4.7, Copyright (c), by Zend Technologies
```

最後に一応phpのインストール場所も確認しておきます。

```
$ which php
/usr/bin/php
```

(findコマンドでは見つかりませんでした。なんでだろう…)
WindowsでRuby on Railsのブレークポイントが効く開発環境を構築する

# WindowsでRuby on Railsのブレークポイントが効く開発環境を構築する
## 開発環境
- Windows 10 64bit Ver.10.0.18362
- Visual Studio Code Ver.1.46.0
- ruby Ver.2.6.6
- Rails Ver.6.0.3.1

## Rubyのインストール
### Ruby+Devkit のインストール
Windows版のRuby+Devkitを[ダウンロード](https://rubyinstaller.org/downloads/)し、インストールする。デフォルトのインストールパスを変更した場合は、この後にインストールする一部のgemについて、別途設定変更が必要になるので注意。
### 必要なgemをインストール
Visual Studio Codeのターミナルから操作する。ターミナルはメニューの「ターミナル」から「新しいターミナル」を選択すると画面下部に開かれる。

```
gem install rubocop
gem install ruby-debug-ide
gem install debase
gem install rcodetools
gem install ruby-lint
gem install reek
gem install faster
gem install debride
```
## Visual Studio Codeの設定

### 拡張機能の追加
Visual Studio Codeの拡張機能から、「Ruby」をインストールする。
![ruby.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241999/cccb6958-42dc-0b98-c7c3-916a5e1a406f.png)

### setting.jsonの編集
メニューの「ファイル」から「ユーザー設定」、「設定」と進んで、「ruby」で検索を行う。「setting.jsonで編集」をクリックし、setting.jsonを以下のように編集する。

```setting.json
{
    "ruby.codeCompletion": "rcodetools",
    "ruby.format": "rubocop",
    "ruby.lint": {
        "reek": true,
        "rubocop": true,
        "ruby": true,
        "fasterer": true,
        "debride": true,
        "ruby-lint": true    
    },
    "ruby.intellisense": "rubyLocate",
    "ruby.locate": {
        "exclude": "{**/@(test|spec|tmp|.*),**/@(test|spec|tmp|.*)/**,**/*_spec.rb}",
        "include": "**/*.rb"
    }
}
```

### launch.jsonの編集

```launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Lical File",
            "type": "Ruby",
            "request": "launch",
            "program": "${workspaceRoot}/hoge.rb"
        }
    ]
}
```
ここまでで、.rbファイルを、ブレークポイントで止めながらデバッグ実行することが可能になる。ブレークポイントで止めるには、行番号の左側をクリックして赤いポイントを付ける。その上でメニューの「実行」から「デバッグの開始」を行う。
続いて、Ruby on Railsが動くように設定を行う。

## Railsのインストール

Visual Studio Codeのターミナルで以下を入力する。以下の例では、DBにPostgreSQLを指定している。「test_project」という名前のプロジェクトを作成し、最後の「rails s」でデバッグ実行する。

```
gem install bundler
install rails
rails new test_project -d postgresql
cd test_project
bundle install
rails s
```
何かが足りない場合はエラーが出るので、以下の手順を行う。

## webpacker、Node.js、Yarnのインストール

エラーメッセージを読んで、webpackerが足りないと言われているときは、以下でインストール。

```
rails webpacker install
```

Node.jsまたはYarnが足りないと言われているときは、ダウンロードしてインストールする。

[Node.jsのダウンロード](https://nodejs.org/ja/download/)
[Yarnのダウンロード](https://classic.yarnpkg.com/ja/docs/install/#windows-stable)

以上で、「rails s」により、ローカルサーバが立ち上がる。ブラウザで「localhost:3000」を開くとRailsのページが表示される。

![rails.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241999/6deca725-2139-f740-da9c-b836ce1e6260.png)

ポート番号3000が他のサービスと重複してしまってRailsが起動しない場合は、launch.jsonにポート番号の指定を追記すればOK。
Swift の文字列リテラルにおける特殊文字のエスケープ

Swift で以下のような特殊文字を文字列リテラルに含める時、皆さんどうしてますか？？

- `"`: ダブルクォーテーション
- `'`: シングルクォーテーション
- `\`: バックスラッシュ
- tab: タブ文字
- return: 改行文字 (`\n`)
- : null 文字
- 先頭: キャリッジリターン


例えば、以下のような JSON 文字列を文字列リテラルに入れようとしても上手く行かないですよね。

```json:exampleJson.json
{ "name": "Daichi", "age": 23 }
```

```swift:swift
let jsonString: String = "{ "name": "Daichi", "age": 23 }"
// コンパイルエラー (ダブルクォーテーションが文字列の終わりと認識されちゃう)
```

この記事では、

- バックスラッシュでエスケープする方法
- Extended String Delimiters を使う方法

の 2 つの対処法を紹介します。

## `\` バックスラッシュでエスケープする方法
Swift における特殊文字のエスケープは `\` (バックスラッシュ) を特殊文字の前に記述することで、文字列リテラル内で表現できます。

- ダブルクォーテーション → `\"`
- シングルクォーテーション → `\'`
- バックスラッシュ → `\\`
- タブ文字 → `\t`
- 改行文字 → `\n`
- null 文字 → `\0`
- キャリッジリターン → `\r`

先程の JSON をこの方法を使って `String` 型変数に突っ込むとこうなります。

```swift
let jsonString: String = "{ \"name\": \"Daichi\", \"age\": 23 }"
print(jsonString)
// This wiil print out "{ "name": "Daichi", "age": 23 }"😁.
```

これによって文字列内のダブルクォーテーションがエスケープされ、一つの文字列として認識されます。

## Extended String Delimiters を使う方法
Swift には Extended String Delimiters という拡張文字列リテラルが用意されています。
これは `#` (シャープ、数字文字) を使った方法です。
文字列リテラルを `#` で囲むことで特殊文字が**そのまま**文字として利用できます。

```swift

let jsonString: String = #"{ "name": "Daichi", "age": 23 }"#
print(jsonString)
// This wiil also print out "{ "name": "Daichi", "age": 23 }"😁.
```

複数行リテラルでも同じです。

```swift

let string: String = #"""
{ "name": "Daichi", "age": 23 }
"""#
```

いちいち `\` でエスケープしなくていいので、ダミー用の JSON を用意するときとか便利じゃないですか！？

### 文字列リテラルに変数を含めるには？
Extended String Delimiters を使うと、普段どおり変数を文字列リテラルに含めようとしても、`\` がエスケープされてしまうので埋め込めません。

```swift

let name = "Daichi"
let age = 23
let jsonString = #"{ "name": "\(name)", "age": \(age) }"#
print(jsonString)
// This wiil print out "{ "name": "\(name)", "age": \(age) }"🥺.
```

この場合は、バックスラッシュと開き括弧の間に `#` を入れて `\#(変数)` という風に書くと期待の結果が得られます。

```swift

let name = "Daichi"
let age = 23
let jsonString = #"{ "name": "\#(name)", "age": \#(age) }"#
print(jsonString)
// This wiil print out "{ "name": "Daichi", "age": 23 }"😆.
```

やったぜ。

## おわり
個人的には

- 特殊文字が多い時: Extended String Delimiters を使う
- 変数が多い時: バックスラッシュでエスケープする

のように使い分けてあげると、文字列リテラルがあるコードをパッと見た時にノイズが少なくて良いのかな〜〜なんて思います。

### 参考
- [Strings and Characters, Apple](https://docs.swift.org/swift-book/LanguageGuide/StringsAndCharacters.html)
vimの設定変更

#vimの設定を変更する

vimの設定を変更するには、コマンドラインモードで次のコマンドを実行する。

```
:set (no)hoge 
```

例えばvimの編集画面で行番号を表示する場合は

```
:set number
```

を指定する。設定を解除する場合はnonumberと指定する。

###永続的に設定するには、vimの設定ファイルにset内容を記述する
（全体）/etc/vimrc
（ユーザー毎）~/.vimrc
**※viはデフォルトで~/.exrcを読み込む**

###（例）/etc/vimrc
![asas.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552559/87dd9da5-10c9-6db2-9edb-df4923b8515f.png)