OmniAICreator/Qiita-1.07M huggingface dataset:
Power BIの複数利用ケースにおけるフィールドの項目（ディメンション項目・メジャー項目）の多言語表示可否に関する調査

## 概要
Power BIには、フィールドの項目を多言語で表示可能とする翻訳機能があり、利用できるケースを整理します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/cad135d7-d861-e51f-f2b7-409348e12d6a.png)

下記表に調査結果を記載します。Power BI Services上で表示する場合にはPower BI Premiumが必須ですが、Power BI Desktopから接続する場合にはPower BI Premiumが必須ではないようです。グローバルでの利用を行う場合には、レポート作成者のためにも、翻訳機能の設定を検討してもいいかもしれません。

| 番号 | ケース                                                         | 翻訳の実施可否 |
| ---- | ------------------------------------------------------------ | -------------- |
| 1    | Power BI Premiumであるワークスペース上で表示した場合   | 〇             |
| 2    | Power BI Premiumでないワークスペース上で表示した場合   | ×              |
| 3    | Power BI Premiumであるワークスペース上のデータセットにPower BI Desktopから接続した場合 | 〇             |
| 4    | Power BI Premiumでないワークスペース上のデータセットにPower BI Desktopから接続した場合 | 〇             |

検証結果の画面と翻訳の設定手順を紹介します。

### 翻訳機能
翻訳機能とは、Analysis Servicesで利用できる機能であり、特定のカルチャー（言語）で項目をマッピングした翻訳ファイルを登録することで、データモデリング利用時に指定の言語で表示で表示できる機能です。Power BIにおいても、XMLAエンドポイント機能が有効になったことで利用できるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/59b2ab21-3a13-e26b-2653-2ec2505efc87.png)
引用元：[Analysis Services テーブルモデルでの翻訳 | Microsoft Docs](https://docs.microsoft.com/ja-jp/analysis-services/tabular-models/translations-in-tabular-models-analysis-services?view=asallproducts-allversions)

## 検証結果
### 1. Power BI Premiumであるワークスペース上で表示した場合の結果
翻訳されていることを確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/88f60148-972b-8013-9865-fab0f24b3f00.png)

### 2. Power BI Premiumでないワークスペース上で表示した場合の結果
翻訳されないことを確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/a85985d5-4480-fea5-b587-7924aa78c272.png)

### 3. Power BI Premiumであるワークスペース上のデータセットにPower BI Desktopから接続した場合の結果
翻訳されていることを確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/2a3e34d3-9b33-f0aa-bbef-6ab4f8ca5104.png)

### 4. Power BI Premiumでないワークスペース上のデータセットにPower BI Desktopから接続した場合の結果
翻訳されていることを確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/3f23cd30-045a-5839-ca3f-778536e0bd44.png)


## Powre BI Desktopでの実施手順
### 1. Power BIレポートをPower BI Desktopで表示後、"Tabular Editor"を起動。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/cc5c5ea7-647b-85d4-7c08-578a18bf9624.png)

### 2. "Translations"を右クリック後、"New Translation"を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/5e7f559c-beb0-2c7e-6960-b3bdaec4d50d.png)

### 3. "Select Culture"ウィンドウにて、"ja-Jp - Japanese(Japan)" -> "OK"を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/8309aed5-54c2-cb02-9a44-a72c1fc7dc7b.png)

### 4. 翻訳対象の項目を"Tables"にて選択し、"Translated Names"にて適切な項目（例：テスト①）を入力し保存。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/f8763d6c-276c-1094-0215-dc322b1d7d3b.png)

### 5. 項目が翻訳されたことを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24031/ef6b5bdc-5acc-312e-d1b4-99bfb7a01603.png)

## 備考
特になし。
スライドショーの作り方 (コピペOK)

2つのファイルと同じディレクトリにpicsというサブディレクトリを置き、そのpicsにjpegファイルを入れてあげれば良し。あとは、index.phpにアクセスするだけ。

```index.php
<?php
$dh = new DirectoryIterator("pics");

$files = array();
foreach($dh as $file){
  if(preg_match("/[.]jpg$/", $file)) $files[] = "$file";
}
?>
<html>
<head>
<title>スライドショー</title>
<style>
body {background: black;}
#thumbnails {height: 140px; width: 100%; overflow: auto;}
#pic {text-align: center; height: 400px; padding: 20px;}
</style>
<script>
var image_list = [
<?php $first = true; foreach($files as $image){ ?>
<?php echo ($first ? "" : ", "); ?>"<?php echo ($image); ?>"
<?php $first = false; } ?>
];

var curimage = 0;

function switchimg(ind){
  var image = image_list[ind];
  var obj = document.getElementById("selimg");
  obj.src = "scale.php?image="+image+"&y=400";
  curimage = ind;
}

function nextimage(){
  curimage++;
  if(curimage >= image_list.length) curimage = 0;
  switchimg( curimage );
}

window.setInterval("nextimage()", 2000);
</script>
</head>
<body>
<div id="thumbnails">
<table width="100%">
<tr>
<?php $ind = 0; foreach($files as $image) {?>
<td width="160" nowrap align="center">
<a href="javascript:switchimg( <?php echo($ind); ?> )">
<img height="100" src="scale.php?image=<?php echo($image); ?>&y=100" border="0" />
</a>
</td>
<?php $ind++;} ?>
</tr>
</table>
</div>
<div id="pic">
<img id="selimg" height="400" src="scale.php?image=<?php echo($files[0]);
   ?>&y=400" />
</div>
</body>
</html>

```
```scale.php
<?php
$image = $_GET["image"];
$maxy = $_GET["y"];

$im = imagecreatefromjpeg("pics/".$image);
$curx = imagesx($im);
$cury = imagesy($im);
$ratio = $maxy / $cury;
$newx = $curx * $ratio;
$newy = $cury * $ratio;
$oim = imagecreatetruecolor($newx, $newy);
imageantialias($oim, true);
imagecopyresized($oim, $im, 0, 0, 0, 0,
        $newx, $newy, $curx, $cury);
header("content-type: image/jpeg");
imagejpeg($oim);
?>
```
よく使うVimの操作

# 概要

よく使うvimのキーバインドを整理してみました。

# モード切り替え

| コマンド | 内容 |
|:-:|:-:|
| ESC | ノーマルモードへ  |
| i | 挿入モードへ  |
| v | ヴィジュアルモードへ  |
| : | コマンドモードへ |

# ファイル操作

| コマンド | 内容 |
|:-:|:-:|
| :q!  | 保存せずに閉じる  |
| :w  | 保存  |
| :w!  | 保存して閉じる  |
| :w ファイル名  | 名前をつけて保存 |

# カーソル移動

| コマンド | 内容 |
|:-:|:-:|
| k  | 上のウィンドウに移動 |
| j  | 下のウィンドウに移動 |
| l  | 右のウィンドウに移動  |
| h  | 左のウィンドウに移動  |
![スクリーンショット 2020-12-14 19.44.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/81113/fad2f0e2-a4b8-34bf-1ea5-782953523b34.png)

| コマンド | 内容 |
|:-:|:-:|
| 0  | 行頭に移動 |
| ^  | 行頭の空白以外の文字に移動 |
| ＄  | 行末に移動 |
| CTRL+u  | 半画面UP  |
| CTRL+d  | 半画面DOWN  |
| gg  | 先頭行に移動  |
| CTRL+g  | 最終行に移動  |
| 数字+g  | 数字行目に移動  |

| コマンド | 内容 |
|:-:|:-:|
| w | 次の単語に移動 |
| b | 前の単語に移動 |
| % | 対応する括弧に移動 |

# ウィンドウ

| コマンド | 内容 |
|:-:|:-:|
| :split | 上下に分割  |
| :vsplit | 左右に分割  |
| CTRL+w k  | 上のウィンドウに移動 |
| CTRL+w j  | 下のウィンドウに移動 |
| CTRL+w h  | 右のウィンドウに移動  |
| CTRL+w l  | 左のウィンドウに移動  |

# 検索と置換

| コマンド | 内容 |
|:-:|:-:|
| /文字列 | 文字列を検索  |
| n | 次の候補を検索 |
| N | 前の候補を検索 |
| * | カーソル位置の単語を検索  |

# コピー（カット）＆ペースト

| コマンド | 内容 |
|:-:|:-:|
| dd | 現在行をカットする  |
| 数字dd | 数字行分をカットする  |
| yy | 現在行をコピーする  |
| 数字yy | 数字行分をコピーする  |
| p | カーソルより後ろにペーストする |
| P | カーソルより前にペーストする |

# その他

| コマンド | 内容 |
|:-:|:-:|
| CTRL+p | 単語を補完  |
Google Colab の Rノートブックでggplot2グラフに日本語を表示

Google Colab でRを動かすと、はじめは ggplotのグラフで日本語が文字化けしてしまいます。

```r
library(ggplot2)

qplot(1:5, 1:5) +
  xlab("エックス軸") + ylab("ワイ軸") + ggtitle("タイトル")
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80588/664870aa-9c6f-7c93-5692-d5b767dad0b5.png" width="500">


これは、日本語フォントがインストールされていないためです。ColabはUbuntu上で動いているので、`apt-get` コマンドを使ってフォントを追加することが可能です。Rノートブックではシェルマジックが使えないので、`system` 関数を用います。

```r
system("apt-get install -y fonts-noto-cjk")
```

フォントの一覧を表示。

```r
systemfonts::system_fonts()
```

<a href="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80588/a4e08b68-6702-5a15-5a5d-d6e622a8ff93.png"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80588/a4e08b68-6702-5a15-5a5d-d6e622a8ff93.png" width="800"></a>

実際にはまだまだありますが省略。基本的に "CJK" が付いているフォントは日本語に対応しています（**C**hinese **J**apanese **K**orean の略なので）。

例えば、"Noto Sans CJK JP" をフォントに指定すると、ちゃんと日本語が表示されます。

```r
qplot(1:5, 1:5) +
  xlab("エックス軸") + ylab("ワイ軸") + ggtitle("タイトル") +
  theme(text=element_text(family="Noto Sans CJK JP"))
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80588/1cf89245-2f98-8060-ee15-4e9b6f23f28f.png" width="500">

"Serif" フォントを選ぶと明朝っぽくなります。


```r
qplot(1:5, 1:5) +
  xlab("エックス軸") + ylab("ワイ軸") + ggtitle("タイトル") +
  theme(text=element_text(family="Noto Serif CJK JP"))
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80588/cfe38890-0668-aeb9-ce1e-600c0d4a29a0.png" width="500">

`theme_update` を使って、指定のフォントをデフォルトに設定することも可能です。

```r
theme_update(text=element_text(family="Noto Sans CJK JP"))
qplot(1:5, 1:5) +
  xlab("エックス軸") + ylab("ワイ軸") + ggtitle("タイトル")
```
物作り個人勢の販売サイトを作りルート構築しよう

中古機械修理をしてのネットでの販売を生業としている者です。
仕事の都合上調べたので共有。


![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247563/35c569a8-c7c2-2d88-6344-8fd354d5cd5d.png)



個人で物を作って世の中に出して反応を見てみたいなと思う事があるはず。
でも、どうやって販売すればいいのか分からない。
そこで販売の手軽さ、大量の販売のし易さを販売規模で考え書く。



#前提
今回メジャー所を主に検討し、既製品でなく自身で作った物を売るのを前提に話を進める。
手数料は年々上がっている。2020/12の情報を元に記載。

法律に関して、
電気部品を作るなら無線類は技適、コンセント有はPSEが必要になる。
取得になると、時間、手間、お金が掛かるため、初めの人はやらないほうがいい。現状どこの際とも厳密に追及をしていなく実際問題出品はできて、いつ厳密かされるか分からないし法律違反なので守るべき。
電源に関してUSB給電はPSE無しでOK。




#内容
図で示すと以下の通り。
![glaf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/247563/3627428b-f667-ed9b-5ef0-feb9f6190ee1.png)

フリマサイト（メルカリ、ヤフオク、ラクマ）
自社サイト（BASE, STORES ,shopfiy）
完全自作(wordpress等)
Amazon
ヤフーショッピング店
楽天

#それぞれの特徴

フリマサイト(手数料7-10%)
開設が非常に簡単。情報もたくさんある。

メルカリ：
手数料が10%だが、送料の割引が効いている。全国一律。急成長。オークション形式はなく、即決のみ。
ヤフオク：
手数料8.8-10%　日本一の利用数のフリマ。オークション形式あり、長い期間やっているため、外部委託で発送業務の受理をしているところあり。　

ラクマ: 
手数料(税込みで7%ぐらい)　2020/12月に手数料が上がった。利用者は他の2つに比べ少ないのに元々送料の割引がないのに、追い打ちのようになり利用が更にへりそう。

・自作サイト
サイト自体を自分の好みで作れる。支払システムやapi周りがある。サーバーを用意しなくてよい。
テンプレがあり、完全自作よりかなり手軽にできる。
規模が大きくなった際の発送手続きの手間がネック。
Amazon、楽天、ヤフショ等のプラットフォーマの急な手数料上昇、出品物の制限などがない。

BASE：
手数料(税込みで7%ぐらい)　パソコンをいじれない主婦でも簡単に自分のページを作れる。
	
STORES:
0-2000+3.6-5%
倉庫発送手続きがある。

Shopfiy:
3000+3.6-5%
海外でかなり使われている。最近日本語の説明サイトがふえてきた。
マルチチャネル販売に対応様々なAPIがある。色々できる分設定は他の２つより難しめ。
物販を運営する会社が使用するレベル。


・完全自作(wordpress等を使う)
自分でやるので何でもできるが、自分でサーバを用意したり、支払いシステムのapiを引っ張ってきたり手間が掛かる。販売用のテンプレも存在するが、Shopfiy等より、かなり少ない。わざわざやるのはテンプレだと困る場合など相当な理由がない限り、やるのはどうかと思う。

Amazon：
5%-25%
SEOが強い。初期登録や、ページの見方を理解するまで少々時間が掛かる。
登録は副業でもＯＫ。身分証の確認で行ける。
サポートデスクがかなり優秀で、分からなかったら、電話を掛けると30秒以内で出てくれるので、調べて分からなかったら聞くのがよい。ネットに情報が転がっている。
量が少ない時は小口契約（売るたび100円＋％）で自己配達でやり、大量に売れてきてら、大口（月5000円売るたび%）で自動発送（ＦＢＡ）を利用するとよい。


ヤフーショッピング：
６％
SEOが強い。開設時納税証明書などが必要。2020・12月に出店要件が出るとの事。外部委託で発送業務を依頼できる。

楽天：
数万＋％（色々プラン有）
ＳＥＯが強い。出店が元々売上がないといけない。副業レベルだと出店は無理。法人・個人事業者を持って行うべき。外部委託で発送業務を依頼できる。


#他販売先
手作り感が強いなら、Creema
アニメ系、2次元はbooth
等、自分の作品に近い物が売っている所で売る事で広告を少なくできる。
なおBoothは発送までやってくれ、送料代はお客持ちなので利益的には増える。
スイッチサイエンス（個人での出品可能との事、敷居があるか調べ切れていない。）
モバオク（フリマ）規模がラクマより小さい。




#販売規模を大きくするには
個人で物を全く売った事がないなら、
まずは売る感覚、流れを知るため簡単にできるフリマサイトをやり、どういった物が売れるのかを知る。

その後、売る物の需要に合わせて、需要が少ない物でネットでの知り合いに売るならフリマ、
第三者にも販売を考えるなら、ショップ開設を考える。
販売個数が伸びてきて自分で自己発送が大変になってきたら発送サービス込みの販売元を検討。
配送までしてくれるのは、Amazonが有名（FBA）。他STORESも配送サービスがある。スイッチサイエンスも配送までやってくれる。
メルカリも30点までなら、自動発送サービスを始めた（2020/12/８に開始）

ショップを開いて、外部サービスと組み合わせて発送手続きをやってくれるのもある。
フリマ以外で自社サイトでapiを用いて外部での発送業者が行ってくれるサービスがある。


#売り上げを伸ばすにあたって
第三者に売る幅を広げていくにあたって、
どんなに、いい物を作っても集客ができないと売れない。
新商品を作っても世の中に数千万の商品があるので、確実に埋もれる。SNSマーケティングや各サイトのプロモーションを使う事が必須。
SEO的に強いのは、Amazon,ヤフーショッピング、楽天。ググった際に一番上に出てくるほど強い。またサイト内でも広告をうちサイト内でのページの優先性を取れる。

自社サイトだとマーケティングが必要。
または、売る物に合わせ販売先を合わせることで、ついでの買いを期待できる。
C#, System.Timers.Timerクラスの安全な破棄方法

# 目的
- 定期的にバックグランドスレッドで何か処理するようなSystem.Timers.Timerを破棄するとき、破棄したタイミングでは絶対に処理が終わっていて欲しい、という要件を満たすラッパークラスを作る
    - TimerはStopやDisposeをしても、実行中処理が終わるのを待つわけではないので、スレッドが残っていることになります。
    - 特にユニットテストでは終了後にスレッドを残したくないです。スレッドが残っているとテストが不安定になることがあります。

# コード
- いきなりコードです。
- 説明はコードコメントにて
- もっといい方法がある、こんなもの必要無い、という方、返信お待ちしております。

```c#
using System;
using System.Timers;

namespace yourownnamespace
{
    /// <summary>
    /// 繰り返し処理専用のTimerラッパー
    /// Dispose後は実行中の処理が必ず無い状態となる
    /// 開始後は破棄のみ可能
    /// IDisposableのsnippestはほぼ、そのまま残してある
    /// </summary>
    internal class SafelyDisposableTimer : IDisposable
    {
        private bool disposedValue;
        // 定期的に実行したい処理
        private Action callbackAction;
        private Timer timer = new Timer();
        private object lockObject = new object();

        /// <summary>
        /// コンストラクタ
        /// </summary>
        /// <param name="interlval">インターバル（ミリ秒）</param>
        /// <param name="callbackAction">定期的に実行したい処理</param>
        internal SafelyDisposableTimer(int interlval, Action callbackAction)
        {
            this.callbackAction = callbackAction;
            this.timer.Elapsed += this.TimerElapsedEventHandler;
            this.timer.Interval = interlval;
            // 繰り返し処理する
            this.timer.AutoReset = true;
        }

        /// <summary>
        /// タイマーを開始する
        /// </summary>
        internal void Start()
        {
            this.timer.Start();
        }

        /// <summary>
        /// 破棄
        /// </summary>
        /// <param name="disposing"></param>
        protected virtual void Dispose(bool disposing)
        {
            if (!disposedValue)
            {
                if (disposing)
                {
                    // TODO: マネージド状態を破棄します (マネージド オブジェクト)
                    this.timer.Stop();
                    this.timer.Dispose();
                }

                // TODO: アンマネージド リソース (アンマネージド オブジェクト) を解放し、ファイナライザーをオーバーライドします
                // TODO: 大きなフィールドを null に設定します
                lock (this.lockObject)
                {
                    disposedValue = true;
                }
            }
        }

        // // TODO: 'Dispose(bool disposing)' にアンマネージド リソースを解放するコードが含まれる場合にのみ、ファイナライザーをオーバーライドします
        // ~SafelyDisposableTimer()
        // {
        //     // このコードを変更しないでください。クリーンアップ コードを 'Dispose(bool disposing)' メソッドに記述します
        //     Dispose(disposing: false);
        // }

        /// <summary>
        /// 破棄
        /// </summary>
        public void Dispose()
        {
            // このコードを変更しないでください。クリーンアップ コードを 'Dispose(bool disposing)' メソッドに記述します
            Dispose(disposing: true);
            GC.SuppressFinalize(this);
        }

        private void TimerElapsedEventHandler(object sender, ElapsedEventArgs args)
        {
            lock (this.lockObject)
            {
                if (this.disposedValue == true)
                {
                    return;
                }

                // 処理を実行
                this.callbackAction();
            }
        }
    }
}

```
【CSS】transformプロパティについて【まとめ】

transformプロパティについて学習したことをまとめました

#transformとは

要素の回転、拡大縮小、傾斜、移動ができる

#とりあえず四角を用意する

```html:index.html
  <div class="box"></div>
```
```css:style.css
.box {
  height: 100px;
  width: 100px;
  background-color: red;
}
```

![スクリーンショット 2020-12-13 17.26.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/9fa28cbe-c1a6-7e5e-0eaa-04e70118764f.png)

##回転

```css:style.css
.box {
  height: 100px;
  width: 100px;
  background-color: red;

  transform: rotate(30deg)

}
```

![スクリーンショット 2020-12-14 22.24.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/d95db9b6-cae8-d2df-04a6-1686903b8c20.png)

##拡大縮小

`scaleX`、`scaleY`と指定することも可能

```css:style.css
.box {
  height: 100px;
  width: 100px;
  background-color: red;

  transform: scale(2, 0.5);

}
```

![スクリーンショット 2020-12-14 22.35.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/cb99fab2-e915-cedf-5c08-d2e0f56187d4.png)


##傾斜
`skewX`、`skewY`と指定することも可能

```css:style.css
.box {
  height: 100px;
  width: 100px;
  background-color: red;

  transform: skew(30deg, 20deg);

}
```

![スクリーンショット 2020-12-14 23.05.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/01d72e9e-6c7e-46f8-4e78-ec6ce4a588bd.png)

##移動
`translateX`、`translateY`と指定することも可能

```css:style.css
.box {
  height: 100px;
  width: 100px;
  background-color: red;

  transform: translate(100px, 100px);

}
```

![スクリーンショット 2020-12-14 23.11.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/635852/b88b4b85-889d-adec-290b-cb7132eb5014.png)
Java　命令実行の文


##はじめに
皆様こんばんは！
この記事が私にとって初投稿となります。
もし間違い等見つけられましたら、教えていただけると幸いです。
よろしくお願いいたします。
##命令実行の文とは
命令実行の文とは、Javaが用意してくれている様々な命令を呼び出すための文です。
ひとつ例を出してみると、Javaを勉強している方にとって最もわかりやすいのが、

**System.out.println();**

```Java
  public static void main(String[] args) {
     System.out.println("Hello World");   //命令実行の文
}

```

######結果

```Java
Hello World
```

です。JavaScriptで言うところの
document.write()
と似ていますね！

他にも見ていきましょう！！
###2つの値を比較して大きい方の値を代入する

**int m = Math.max(①, ②);**

```Java
public class Main {
  public static void main(String[] args){
    int a = 10;
    int b = 20;
    int m = Math.max(a, b);     //命令実行の文
    System.out.println(a + "と" + b + "で大きい方は..." + m)
  }
}
```

######結果

```Java

10と20で大きい方は...20
```

###乱数を生み出して代入する命令

**int r = new java.util.Random( ).nextInt(①);**

※①は、発生させる乱数の上限

```Java
public class Main {
  public static void main(String[] args){
    int r = new java.util.Random().nextInt(100);  //命令実行の文
    System.out.println("あなたの選んだ数字は..." + r + "ですね？");
  }
}
```

######結果
```Java
あなたの選んだ数字は...23ですね？

```

※今回の結果の23は、実行するたびに0~100までの数字からランダムで抽出される

###文字を入力した人から1行の入力を受け付ける

**String s = new java.util.Scanner(System.in).nextLine();**

```Java
public class Main {
  public static void main(String[] args){
    System.out.println("あなたの名前を入力してください");
    String name = new java.util.Scanner(System.in).nextLine();  //命令実行の文
    System.out.println("ようこそ、" + name + "さん！")
  }
}
```

######結果

※name に太朗と入力した場合

```Java
ようこそ、太朗さん！

```

##最後に
javaを使っているとよく使う System.out.println も命令実行の文の一つであり、
他にもまだ命令実行の文があります。
個人的には乱数を発生させる命令を初めて使った時は感動しました。
できないことできるようになるのは楽しいものですね。
最後までご覧いただきありがとうございました。
自作キーボード１ レイアウト検討

# 自作に至る前の余談

キーボード自作しようと思う前に、実は以下のキーボードを購入してみた。

Amazonで[Kinesis Advantage2](https://www.amazon.co.jp/Kinesis-Advantage2-KB600LFQ-%E3%80%90%E3%82%AD%E3%83%8D%E3%82%B7%E3%82%B9-%E3%82%A2%E3%83%89%E3%83%90%E3%83%B3%E3%83%86%E3%83%BC%E3%82%B82%E3%83%BB%E8%B5%A4%E8%BB%B8%E9%9D%99%E9%9F%B3%EF%BC%88%E3%83%94%E3%83%B3%E3%82%AF%E8%BB%B8%EF%BC%89%E3%80%91/dp/B07ND8362H/ref=sr_1_4?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=kinesis&qid=1607953595&sr=8-4)

1週間は辛抱してみたのだが、なれるまでにどうにも時間がかかりそうだった。
キー幅が日本人には大きすぎると感じた。肩こりは楽になりそうだったが、指が釣りそうになるし誤タイプが多くてあきらめた。

自作キーボードキットで日本語配列の分割キーボードを探してるのだが、なかなか89キーを単純に２つに分割してくれたものが見当たらない、、

# レイアウトイメージを可視化してみる。

こういうのが欲しいのだが、無い。

![gammy_basic.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/135714/b0844f07-ee5a-0cb5-03df-8571c3cfa397.png)

※後々回路図を作っていくので、対応がつきやすいように番号を便宜上振った

（要点）
* 癖のない一般的なキーピッチ、配列である
* 日本語配列である
* 一般的なテンキーレスを普通に左右に分割しただけで特殊な配列ではないこと
* 「6」、「Y」、「B」は右手で押す
* IME切り替えはトグルではなくMacのように「英数」、「かな」で独立したキー切替をする
* キーキャップにかな表記はいらない
* キーキャップに英語配列時の記号も小さく表記したい

という条件を満たす市販品がない。
少数派だが日本語配列の分割キーボードもあるにはあったが、
Home,End,PageUP,PageDown当たりの並びが特殊になってしまってたりする。

レイアウトは
http://www.keyboard-layout-editor.com/

で試行錯誤しながら作ったが、これめちゃくちゃ楽しい。
レイアウト思案し、何時間でも潰せてしまう。
github上でダイナミックに操作できるが、どうなってるんだコレ？作った人スゲーなと思った。
scala 配列の中のFutureを扱いやすくする方法

# 配列の中のFutureを扱いやすくする方法

開発の中で「配列の中の値がFutureで包まれていて思うように扱えない。」そんな経験はありませんか？
自分はこの問題にあたりFutureの便利メソッドの存在を知ったので、今回はその知見を残せたらと思います。

## Future.sequence

コレクションの操作をしている中で戻り値が `Seq[Future[Hoge]]`になった際にはFuture.sequenceを使用するとfor式で簡単に扱える形に変換することができる。

## 発生した問題

for式の中で、コレクションをmapして中の値一つ一つがDBとのやりとりを行いFuture型を戻り値にする場合には型がSeq[Future[Hoge]]になり非常に扱いづらい。

```scala
for {
  seqFutureInt <- Seq(1,2,3).map( int => Future.succcessful(int))
  //この後に処理を書きにくい
} ....
```

## 解決策：Future.sequenceを使用する

このメソッドを使用すると

`Seq[Future[Hoge]]`

を

`Future[Seq[Hoge]]`

に変換することができる。

この型にすればfor式で続きの処理も書きやすい。

```scala
for {
seqFutureInt: Seq[Future[Int] =  Seq(1,2,3).map( int => Future.successfull(int))
seqInt: Seq[Int]              <- Future.sequence(seqFutureInt)
seqIntDouble: Seq[Int]        <- seqInt.map( int => int * 2) //中の要素を2倍にする
} yield seqIntDouble
```

## 使用に際して

Future.sequenceの引数には `Seq[Future[Hoge]]`  を渡す。

Futureを使用するにはFutureのimportが必要になるので注意。

```scala
import scala.concurrent.Future
import scala.concurrent.ExecutionContext.Implicits.global // 必要なら
```

良いFutureライフを！
Eagle基板作成までの流れをざっくり

Eagleを利用した基板作成までの流れをざっとまとめる。
専門でもなくたまーにしかやらないため毎回忘れてしまうので振り返り用。

## 手順1：なんとなく回路を書く
いきなりEagleで回路を書き始める前に、まずは手書きやパワポでざっくりつくる。
今回はDynamixelのMX-64というモーターをPCから制御するための中継基板を作る。PCからDynamixelへの信号線と、電源からDynamixelへの電源供給ラインを実装する。
![回路.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581044/6a923cd1-b18e-b26d-506a-7bc9aa1a2464.jpeg)

## 手順2：schで回路を書く
Eagleを起動して回路を書き始める。
File>New>Project から新規でプロジェクトを作成。
作成したプロジェクト右クリック>newでSchematic（回路図）を選択する。

### ①Add partで部品を選択する
回路図は、部品配置→配線の順番で進めるため、まずは部品を追加する。
今回はまず電源12Vコネクタ用にVH 2極コネクタを追加する。ICデバイスやコネクタの場合、Eagleのパーツが用意されていることが多いので、大いに活用する。

(1) 公式サイトからライブラリをダウンロード
https://www.diymodules.org/eagle-show-library?type=shr&id=52
上記のサイトから「Eagle format」の方をダウンロードし「con-JST VH.lbr」をEAGLE\librariesフォルダに置く。

(2)一度Eagleを閉じて再度開く
Eagleを開いたままだとlibrariesフォルダを読み込んでくれないので必須。

(3)ライブラリを追加する
Add Part>Open libraty Manager > Available から「con-JST VH」を選択して「Use」にする。UseにするとEagleのライブラリとして使用可能になり、隣のIn Designタブから選択できるようになる。
![vh.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581044/d6bdb0eb-bc2a-4c0a-7df1-40c4b54613a2.png)
同じ要領で他の部品も追加する。

###②デバイス同士をつなぐ
デバイスを並べ終わったらNetを使ってピン同士を接続する。
VCCやGNDはデバイス同士を接続せず、Add Part>Supply1から部品として追加する。

## 手順3：brdでパターン図を作成する
回路作成が終わったら、brdをクリックしてパターン図に切り替える。

### ①部品を配置する
なるべく部品同士がストレート繋がるような位置に配置する。
![2020-12-14_18h47_46.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581044/eda8648f-4fef-f294-e86f-e42073c84ef1.jpeg)
### ②部品を配線する
Route Airwireを使い、黄色い線の上から配線する。デフォルトだと線が細すぎるので調整する。
### ③ベタパターンを塗る
VCCやGNDをベタパターンとして作成したい場合、Polygonで基板の周りに線を引いた後、ポップアップが出るので「VCC」や「GND」と命名する。すると回路図上でVCCやGNDとつながっているピンがベタパターンの一部として実装される。
![2020-12-14_19h06_08.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581044/24a86d40-8d59-e867-aee7-e04c7737cae0.jpeg)
## 手順4：基板データのアウトプット
Generate CAM data をクリックして基板データをアウトプットする。
zshのhistoryでコマンドの実行時刻を表示する

## 背景
bashではbashrcにHISTTIMEFORMATを指定すれば良かったので、zshrcにHISTTIMEFORMATを記載してみたものの反映されない。。。
調べると設定方法は別なんですね。

参考：[Unix 系 OS でコマンド実行時にタイムスタンプを付ける](https://orumin.blogspot.com/2017/10/unix-os.html)

## 環境
PC: MacBook Pro 2020
OS: macOS Catalina (10.15.5)
shell: zsh (5.7.1)

## 方法
```sh
setopt extended_history
```
これだけでOK。
ただし、タイムスタンプを反映させるには-iオプションが必要になります。そのため、

```sh
echo "alias history='history -i'" >> ~/.zshrc
source ~/.zshrc
```
のようにエイリアスを設定しておきます。

なお、historyコマンドのオプションとして、-Dで実行時間の表示、-数字で表示するコマンド数などを覚えておくと役立ちそうです。
![tsukimi_king___db_refseq_bacteria_all.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363491/22d2c846-7890-5d67-f4a3-d80ede0e4d27.png)
BigQueryのQuery is too complexにもう悩まされたくない

# はじめに
BigQueryを利用して分析、データ生成等を行われる方であれば一度は目にしたことがあるであろう以下の文字列

```
Resources exceeded during query execution: Not enough resources for query planning - 
too many subqueries or query is too complex
```

色々試行錯誤した結果たどり着いたいくつかの回避策をまとめます。
なお、今回の回避策はクエリを実行・結果を処理するプログラム側で頑張りすぎることを想定しておらず、可能な限りBigQuery上で完結することを目指しています。また、今回解決を目指すのはWITH句を多用する様なサブクエリが多く弾かれるケースで、Order byなどを利用することにより発生するケースは対象外とします。
なお、今回検証には[GitHub Activity Data](console.cloud.google.com/marketplace/product/github/github-repos)を利用します。

本記事は[ZOZOテクノロジーズ #3 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/zozo_tech3)の14日目の記事です。

# TL;DR
* できるのであれば中間テーブルごとにいい感じの単位でクエリを分割
* 事情でクエリを分割できないのであれば、擬似的に1クエリ内で中間テーブルを作る

# 1. 処理が大きくなりすぎない範囲で、クエリを分割・中間テーブルに吐き出す
WITH句で表現している一時テーブルを一度明示的に宛先テーブルに保存し、別のクエリから呼び出すことで分割する方法です。

```sql:query1.sql
CREATE TABLE `dataset-name`.resource-name.extracted (
  commit String,
  tree String
);

INSERT INTO `dataset-name`.resource-name.extracted
SELECT commit, tree FROM `bigquery-public-data.github_repos.sample_commits` LIMIT 10;
```


```sql:query2.sql
SELECT * FROM `dataset-name`.resource-name.extracted
```

上記例ではquery1で取得した結果をquery2で取得しています。

## メリット
* 無理がないので綺麗
* 中間テーブル単位でデバッグが可能  
  中間テーブルが実体のあるテーブルとして吐き出されるため、実際に中のデータを確認することが可能です

## デメリット
* クエリが複数に分かれる
* テーブルが複数に分かれるため、適切な生存期間を設定しないとお金がかかる  
  CREATE TABLE句で生成される宛先テーブルは、デフォルトの設定では自動で消えないため、適切に期限を設定する必要があります

# 2. 擬似的に中間テーブルを作り、1クエリで処理する
[CREATE TEMP TABLE句](https://cloud.google.com/bigquery/docs/reference/standard-sql/data-definition-language#create_table_statement)を用いて一時テーブルを用いる方法です。作成された中間テーブルはWITH句と同様24時間以内生存しますが、その後は自動で削除されます。
一方、WITH句と違い別のテーブル扱いとなるため、実行プランが別で計算されQuery is too complexの回避策として利用可能です。

```sql:query1.sql
CREATE TEMP TABLE extracted (
  commit String,
  tree String
);

INSERT INTO extracted
SELECT commit, tree FROM `bigquery-public-data.github_repos.sample_commits` LIMIT 10;

SELECT * FROM extracted;
```

## メリット
* 1つのSQLでデータが処理しきれる  
CREATE TABLE句を利用していたクエリが2つに別れていたのに対して、作成された中間テーブルを使ってその後の処理が可能なため1ファイルで全てを管理することが可能です。

## デメリット
* クエリで処理するデータ量が事前にわからない
![スクリーンショット 2020-12-14 22.25.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245174/f7843b6c-6f36-b500-6e4d-36884968e6d0.png)
CREATE TEMP TABLE句を利用してクエリを実行しようとすると、スクリプトでの実行となるため推定バイト数の計算が不可となります。

# 最後に
本投稿ではBigQueryのQuery is too complexを回避する方法を2つ紹介しました。用途によって使い分けていますが、個人的にはデータマートの可読性も含めて1の手法をとるケースが多いですし、BigQueryがクエリを解析できるためWITH句の最適化の恩恵を受けやすいのも理由の1つにあります。
RustでDocker APIを叩く

DockerはREST APIを提供しています。
```$ docker build``` や
```$ docker run```
といったコマンド操作は、内部的にはdocker deamonへの命令をREST API経由で行っており、
それはCLIだけでなくcurlやプログラムで直に叩くこともできます。

> Docker Engineは、
1. docker daemon
2. REST API
3. docker CLI
で構成されたクライアント&サーバ アプリケーションです。
https://docs.docker.com/get-started/overview/#docker-engine

[Docker公式のSDK（Go, Python）](https://docs.docker.com/engine/api/sdk/examples/)が提供されていますが、Rustの勉強がてらRustで叩いてみました。

## コード
```rust:main.rs
use std::error::Error;
use std::path::Path;

use futures_util::stream::TryStreamExt;
use hyper::{Client};
use hyperlocal::{Uri, UnixClientExt};

#[tokio::main]
async fn main() -> Result<(), Box<dyn Error + Send + Sync>> {
    let path = Path::new("/var/run/docker.sock");
    // API version はローカルにインストール済みのdockerのバージョンを確認する
    let url = Uri::new(path, "/v1.40/containers/json");
    let client = Client::unix();
    let response_body = client.get(url.into()).await?.into_body();
    let bytes = response_body
        .try_fold(Vec::default(), |mut buf, bytes| async {
            buf.extend(bytes);
            Ok(buf)
        })
        .await?;

    println!("{}", String::from_utf8(bytes)?);

    Ok(())
}
```

[hyperlocalのリポジトリのREADME](https://github.com/softprops/hyperlocal/blob/master/README.md)からほぼ引用のコードですが、そのままだと動作しなかったため、一部修正してます。


以下のコンテナの状況
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213222/8353068d-c4cb-59cb-5bd2-c9b27cec5ee6.png)
でプログラム実行してみると、こんな感じで返ってきます。（文字列で出してるので表示が雑ですが。。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213222/681a5ed2-13ed-1c9d-1c4b-9fa52138d056.png)

## hyperlocal
docker daemonはデフォルトでUNIX domain socket（/var/run/docker.sock）をリッスンするように設定されており、Hyper（RustのHTTPクライアント&サーバライブラリ）だけでなく、unixソケット通信を実現する [hyperlocal](https://github.com/softprops/hyperlocal) を使用する必要がありました。

## 参考
[公式Doc]
https://docs.docker.com/get-started/overview/#docker-engine
https://docs.docker.com/get-started/overview/#docker-architecture
[さわって理解するDocker入門](ogis-ri.co.jp/otc/hiroba/technical/docker/part6.html)
MacのgnuplotでPDFの文字がおかしくなる問題

# TL;DR

Macのgnuplotでは、pangoのバグ(?)に由来して、terminalにpdfやpngcairo等を指定すると文字がおかしくなる問題があったが、最新版(gnuplot 5.4、pango 1.48.0)では解決している。

# 現象

いつからかよくわからないが、Macのgnuplotではterminalとして`pdf`や`pngcairo`などを指定すると、文字がおかしくなる。これは、Cairoが裏で呼でいるPangoの問題。

```sh
$ brew info pango
pango: stable 1.46.1 (bottled), HEAD

$ gnuplot --versio
gnuplot 5.2 patchlevel 8
```

と、pango 1.46.1、gnuplot 5.2の状態で、以下のファイルを食わせてみる。

```txt:test.plt
set term pdf
set out "test.pdf"
p sin(x)
```

```sh
gnuplot test.plt
```

するとこうなってしまう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79744/22b6fbdb-0956-03ea-234c-ac9b526a5ab8.png)

例えば「-5」が、 ~~5~~のように重なってしまっているのがわかると思う。これはcairoの問題なので、出力に`pngcairo`を指定しても同じことがおきる。

これを、

```sh
brew uninstall pango gnuplot
brew upgrade
brew install gnuplot
```

等としてpangoとgnuplotをアップデートし、gnuplotが 5.4、pangoが1.48.0になった状態でもう一度実行すると、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/79744/ad7f745f-7335-1dff-597a-caecdb5d5e58.png)

ちゃんとなおってめでたい。

# 補足

おそらく多くの人の環境で

```sh
brew uninstall pango gnuplot
brew upgrade
brew install gnuplot
```

でいけると思うのだが、僕の環境ではgnuplotの再インストールに失敗した。もしかしたら似たようなエラーが出る人がいるかもしれないので、作業ログを残しておく。

<details><summary> 作業ログのまとめ</summary><div>

gnuplot再インストール時に、

```sh
$ brew uninstall gnuplot
$ brew install gnuplot
(snip)
==> Pouring python@3.9-3.9.1.big_sur.bottle.tar.gz
Error: An unexpected error occurred during the `brew link` step
The formula built, but is not symlinked into /usr/local
Permission denied @ dir_s_mkdir - /usr/local/Frameworks
Error: Permission denied @ dir_s_mkdir - /usr/local/Frameworks
```

と言われてこけた。そこでbrew doctorを実行して、その指示に従いながら問題を修正していった。

コマンドラインツールの再インストール。

```sh
sudo rm -rf /Library/Developer/CommandLineTools 
sudo xcode-select --instal
```

コマンドラインツールのアップデート

```sh
softwareupdate --all --install --force
```

brewのアップデート。

```sh
git -C "/usr/local/Homebrew/Library/Taps/homebrew/homebrew-core" fetch --unshallow
git -C "/usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask" fetch --unshallow
```

brew doctorの指示に従って、不要なものの削除。特に僕はpangoをなんとかしようとして手で入れたので、それを削除。

brew doctorに言われたこと。

```txt
Warning: Unbrewed dylibs were found in /usr/local/lib.
Warning: Unbrewed header files were found in /usr/local/include.
```

削除。

```sh
rm -rf /usr/local/include/pango-1.0 
sudo rm -rf /usr/local/include/pango-1.0  
rm /usr/local/lib/pkgconfig/pango.pc  
rm /usr/local/lib/pkgconfig/pangocairo.pc 
rm /usr/local/lib/pkgconfig/pangoft2.pc
```

brew doctorに「gdk-pixbufとlibrsvgを入れろ」と言われたので入れる。

```sh
brew install gdk-pixbuf librsvg
```

Qtへのパスを通せと言われたので通す(僕はzshで、ローカルの設定は.zshrc.mineに保存しているけど、適宜自分の設定で読み替えてｋください)。

```sh
echo 'export PATH="/usr/local/opt/qt/bin:$PATH"' >> ~/.zshrc.mine 
```

以上の設定をした上で、

```sh
brew info pango
brew info gnuplot
gnuplot --version
```

で、それぞれpangoが1.48.0、gnuplotが5.4になった状態で再度PDFを作ったらうまくいった。僕の環境では、brew infoとgnuplot --versionが異なるバージョンを指していた(自分でgnuplotをビルド、インストールしたっぽい)のでややこしいことが起きたが、普通に使っている人は大丈夫だと思う。

</div></details>
ExpoをDockerで動作させる

本記事は[東京学芸大学 櫨山研究室 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/hazelab)の14日目の記事になります．

# はじめに

本記事ではExpoを使ったReact Nativeでのアプリケーション開発にDockerを使用する際のTipsを紹介します．

# 概要

- ローカルのIPが変わるたびに`REACT_NATIVE_PACKAGER_HOSTNAME`で設定し直すのは面倒である．
- なのでシェルスクリプトでどうにかする💡

# Expoとは？

[Expo](https://expo.io/)はユニバーサルなReactのフレームワークです．
React Nativeのエコシステムに則っており簡単にクロスプラットフォームで動作するアプリケーションを作成することができます．

# Expoで作成したアプリケーションの実機での動作確認

Expoでは`yarn start`コマンドを実行すると以下のようにQRコードが表示されます．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/225901/6b3342f8-4a31-c122-66d2-9f6997ec1145.png)

iPhoneに[Expo Client](https://apps.apple.com/jp/app/expo-client/id982107779)アプリを入れておくことで開発中のアプリケーションの動作を実機で検証することができます．

このとき検証に用いる実機デバイス(iPhone)と開発マシン(PC)は同じネットワークに接続する必要があります．

よって開発環境に仮想マシンやDockerを使う場合では設定をする必要があります．

# ExpoをDockerで動作させる

とりあえずDockerfileを用意します．
JSのバージョンは14.0にしておきます．

```docker:Dockerfile
FROM node:14.4.0-alpine

WORKDIR /usr/src/

RUN apk update && apk add bash

RUN yarn global add expo-cli

ENV LANG C.UTF-8
ENV TZ Asia/Tokyo
```

またポートの設定も必要になるので以下のような`docker-compose.yml`を用意します．

```yaml:docker-compose.yml
version: '3.7'

services:
  expo:
    container_name: expo
    build:
      context: ./
      dockerfile: ./Dockerfile
    working_dir: /app
    volumes:
      - ./:/app:cached
    environment:
      - REACT_NATIVE_PACKAGER_HOSTNAME=${LOCAL_IP_ADDR}
    command: yarn start
    ports:
      - 19000:19000
      - 19001:19001
      - 19002:19002
```


ExpoをDockerで動作させる場合には動作させるコンテナの環境変数`REACT_NATIVE_PACKAGER_HOSTNAME`にローカルのIPアドレスを指定する必要があります．
docker-composeでは`.env`ファイルを用意しておくと読み取ってくれるので以下のように記述しておきます．

```:.env
 REACT_NATIVE_PACKAGER_HOSTNAME=ローカルIPアドレス
```

しかしmacbookなどの端末で開発していると移動先などでローカルIPが変わり少し手間になります．

そこでコンテナ起動時に`.env`ファイルのIPアドレスを書き換えることで対処します．

具体的には以下のようなシェルスクリプト`get-local-ip-addr.sh`を用意します．

```bash:get-local-ip-addr.sh
#!/bin/bash

IP=`ifconfig | grep inet | cut -d " " -f2 | grep "[0-9]*\.[0-9]*\.[0-9]*\.[0-9]*" | awk 'NR==2'`
sed -i".bak" -e "/LOCAL_IP_ADDR=/d" .env
echo "LOCAL_IP_ADDR=$IP" >> .env
```

行っているのは以下のような簡単な処理です．

1. `ifconfig`コマンドでIPアドレスを調べる．
2. `sed`コマンドで`.env`ファイルに記述されている環境変数`REACT_NATIVE_PACKAGER_HOSTNAME`の情報を削除する．
3. 1.で取得したIPアドレスを`.env`ファイルに書き込む．

このスクリプトを`docker-compose up`コマンドの前に実行する必要があります．
そこで`Makefile`を用意してタスクとして登録します．

```make:Makefile
expo:
	./get-local-ip-addr.sh
	docker-compose -f docker-compose.yml up --remove-orphans
```

これで以下のコマンドで立ち上げることができます．

```bash
make expo
```

# おわりに

Dockerを使ってExpoを動作させる際のTipsを紹介しました．

なお本記事のシェルスクリプトの記述はmacOS依存です，ご了承ください🙇‍♂️
【Visual Studio Code】 ブレイクポイントを張れない人が読む記事

# はじめに
今日Visual Studio Code開いてみたら、<font color="Red">『ブレイクポイントを張れない』</font>現象が数名で確認されたので、そちらの解決策をまとめます。
おそらく、Visual Studio Code 1.52.0アップデートでデフォルトがOFFになったので...

# 解決方法
1. ``Code > Preferences > Setting``を押します
![スクリーンショット 2020-12-14 22.38.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573011/8edebfbd-f6b8-9a5e-e004-4541054ab23c.png)


2. ``Allow Breakpoints Everywhere``し、一番上にチェックを入れます
![スクリーンショット 2020-12-14 22.40.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573011/515ecc2d-a7d5-aff3-0733-480a3fdfdcc0.png)

3. はい、完成！
![スクリーンショット 2020-12-14 22.43.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/573011/a43d8f9c-7d96-02e5-ca04-1f6975b8faff.png)
[Rails] HTTPメソッドGETは省略した記述ができる

目的
---
webアプリケーションのユーザーのログインとログアウト機能を実装中です。
"ログイン"をクリックしたらログインしたユーザー個人の画面へ遷移し、
"ログアウト"をクリックしたら"ログイン・新規登録"のどちらかしかできない（実装途中のため）
最初の画面へ遷移するようにしたいです。


学び
---
deviseを用いているのでapplication.html.erbに記述していきます。
コードを書いている途中で「"ログイン"のパスの後にはHTTPメソッドを記述しなくても正しく動く」ことがわかりました。
※"ログイン"のVerbはGET
※"ログアウト"のVerbはDELETE

```application.html.erb
<%= link_to "ログイン", new_user_session_path, 〜 %>
```
```application.html.erb
%= link_to "ログアウト", destroy_user_session_path, method: :delete, 〜 %>
```

これはRailsの仕様で、「GETはたくさん使うから、いちいち書かなくていいよ！」というルールだからだそうです。
なので

```application.html.erb
<%= link_to "ログイン", new_user_session_path, 〜 %>
　　　　　　　　　　　　　　　　　　　　　　　　　　↑
　　　　　　　　　　　　　　　　　　　　　#実際にはmethod: :getが記述してある
```

このような状態だということですね。
Routelingを確認してGET以外のVerbだった場合、記述し忘れないよう注意しましょう！
【IE11】先頭にハイフン2つのclass名でもIEで動作させたい

## 概要
きっかけはこちらの方の投稿です。
> [【IE11】先頭にハイフン2つのclass名はCSSが効かない](https://qiita.com/flatsato/items/32830b5c52b9083be3fb)

IEでは、ハイフン2つから始まるclass名はCSSが効きません。

```css:css
.--hoge { /* IEでは効かない */
    color: #f00;
}
```


将来的にハイフン2つから始まるclass名は許容される可能性があるようですが、
**どうしても今IEで動作させたい**場合のハックになります。

## 実装
セレクタの前方一致、後方一致、部分一致を使うことでIEでも動作させることが可能なようです。
モダンブラウザでも動作します。

```css:css
[class^="--hoge"] { /* 前方一致 */
    color: #f00;
}
```

```css:css
[class$="--hoge"] { /* 後方一致 */
    color: #f00;
}
```

```css:css
[class*="--hoge"] { /* 部分一致 */
    color: #f00;
}
```

## 結論と一応注意
[前方一致、後方一致、部分一致のセレクタはIE7から利用できるようになっており](https://caniuse.com/css-sel3)、IE11でも動作します。
今後IEへの対応が減っていくかもしれませんが、もしお役に立てればと思います。

また、きっかけとなった方の投稿のコメント欄にあるとおり、連続するハイフン始まりは勧告候補となっており、今後許容されることになる可能性が高いです。
が、現在正式な仕様にはなっていないためご利用は計画的に。
AWS CLI・SDKのデバッグログを有効にする・通信をキャプチャする

AWS CLI・SDKがコールするAPIのリクエスト・レスポンスを見る方法。

# AWS CLI v2

## 方法1. --debugオプション

```
aws s3 ls --debug
```

とするとリクエスト・レスポンスが表示される（`DEBUG - Sending http request:`と`DEBUG - Response body:`の部分）。

## 方法2. mitmproxyを使う
`mitmproxy -p 8888`で起動済みとする。

```
export HTTPS_PROXY=http://127.0.0.1:8888
aws s3 ls --no-verify-ssl
```

または

```
export HTTPS_PROXY=http://127.0.0.1:8888
aws s3 ls --ca-bundle ~/.mitmproxy/mitmproxy-ca-cert.pem
```

`~/.mitmproxy/mitmproxy-ca-cert.pem`が見つからない場合は、

```
curl -x 127.0.0.1:8888 'http://mitm.it/cert/pem' > mitmproxy-ca-cert.pem
```

で入手できるはず。


# AWS SDK
## 方法1. デバッグログを有効にする（AWS SDK for JavaScript v2）

```javascript
const AWS = require("aws-sdk");

AWS.config.update({
    logger: console,
});

// AWS.config.updateの後でnewしないとダメ。あるいはこのコンストラクタの引数にlogger:consoleを含めても良い
const lambda = new AWS.Lambda({ region: "ap-northeast-1" });

async function main() {
    await lambda.listFunctions({ MaxItems: 10 }).promise();
}

main();
```

上記コードを実行すると以下のようなログが表示される。

```
[AWS lambda 200 0.363s 0 retries] listFunctions({ MaxItems: 10 })
```

このログはメソッドが終了する直前に出されるらしく、リトライ中にプロセスが死んだりした場合には何も出力されない。
https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v2/developer-guide/logging-sdk-calls.html

## 方法2. mitmproxyを使う（AWS SDK for JavaScript v2）

公式ドキュメント[Node.js 用のプロキシの設定 - AWS SDK for JavaScript](https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v2/developer-guide/node-configuring-proxies.html)の通り。

```console
$ npm install proxy-agent
```

```javascript
const AWS = require("aws-sdk");
const proxy = require("proxy-agent");

AWS.config.update({
    httpOptions: { agent: proxy("http://127.0.0.1:8888") },  // プロキシを指定
    sslEnabled: false,  // SSLをオフにする。公式エンドポイントリストにHTTPSしか載っていなくてもHTTPで通るようだ（DynamoDBで実験済み）
});
```

`sslEnabled: false`にしないと

```
(node:37757) UnhandledPromiseRejectionWarning: Error: self signed certificate in certificate chain
```

というエラーになってしまった。
React HookでバックエンドのAPIを呼び出す例

## 公式ページ
https://ja.reactjs.org/docs/hooks-intro.html

## フック
- 16.8から導入された機能
- stateなどのReactの機能をクラスを使わずに利用することができる

## サンプル
```react
import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
```

### ステートフック
- `useState`がフック
- クラスの`this.setstate`にあたる
- `0` が初期値
- 初期値をセットする場合、最初のレンダリング時に初期値が呼ばれる
    - Nullなどをセットしておくとエラーになるので、catch~tryなどが必要？

```
const [count, setCount] = useState(0);
```

### バックエンドのAPIを呼び出す例
- `useStyles()`は、Hook用のCSSで、classなどで当てたCSSを上書きで被すことができる

```react
  const classes = useStyles();
  const [result, setPod] = useState([]);

  (async()=>{
      //非同期でデータを取得
      const request = axios.create({
          baseURL: "http://127.0.0.1:1323",
          method: "GET"
      })

      const result = await request.get('/getdomains');//Pod一覧を取得

      if(result.data) {
          setPod(result.data);
      }
  })();

```

## 呼び出す場合
このような感じ

```react
          {result.map((domain) => (
            <TableRow key={domain.id}>
              <TableCell>{domain.CreateDate}</TableCell>
              <TableCell>{domain.Name}</TableCell>
              <TableCell>{domain.Description}</TableCell>
              <TableCell>{domain.Description}</TableCell>
              <TableCell align="right">{`$${domain.ID}`}</TableCell>
            </TableRow>
```
renderメソッドとredirect_toの違い

＜この記事について＞
ビューの実装時に「renderメソッド」と「redirect_to」を混同してしまうことが多いので、備忘録として投稿！

[環境]
・Ruby 2.6.5,
・Rails 6.0.0
・macOS

●renderメソッド = 呼び出すビューファイルを指定するメソッド。
新たにリクエストされずにそのままビューを表示。
※コントローラー、ビューのどちらでも使用可。元のインスタンス変数の値が上書きされない
使用シーン：エラーメッセージを表示

●redirect_to = 新たなリクエストを送信した時と同じ動き。
ルーティング→コントローラー→ビューを表示
使用シーン：未ログイン状態のユーザーをトップページやログインページへ転送
※リダイレクト = 本来受け取ったパスとは別のパスへ転送
※「unless」（falseのときに実行する条件式）や「except（before_actionで使用できるオプション）」と組み合わせることあり。

＜終わりに＞
初学者ですがrailsを勉強していて、オプションやメソッド、構文などこれとこれは
何が違って、どのように使い分けるのか曖昧な理解になっているものが多いと感じた。
どんな些細なことでも、毎日1投稿を継続するので温かい目で見て頂ければと思います。
ちょっとしたコードの変更はVimでサクッとやってしまおう

# Vimでやりたい

硬派でカッコイイっぽいので。
しかし、しっかりコードを書こうと思うとVSCodeを使ってしまう。
せめてちょっとした変更くらいはサクサクとVimでやってしまいたい。あわよくばこういう積み重ねでVimの操作に慣れてしまおうという魂胆もある。

```terminal
$ vi ファイル名
```

## サクっと使いそうなコマンドまとめ

- 削除: `x`
- 行削除: `dd`
- 行頭に移動: `^`
- 行末に移動: `$`
- ファイルの先頭: `gg`
- ファイルの末尾: `G`
- アンドゥ: `u`
- 全選択してコピー `:%y`
- ペースト: `p`

---

また追加するかも。
静的ページ制作に技術やセンスはどこまで必要か問題

これは <a href="https://qiita.com/advent-calendar/2020/dwango2">第二のドワンゴ Advent Calendar 2020</a> 14日目の記事です。

社員でない上にもともと開発ではなかったのですが、 おかわり版が余ってるとのことなのでしゃしゃりでて技術のネタを書きます。第一は<a href="https://qiita.com/advent-calendar/2020/dwango">こちら</a>。



<h2>お前誰？</h2>

インターネットから背を向け異業種を志し続けるも、履歴書の元ドワと初級システムアドミニストレータのせいか「そういうの得意でしょ」と、むしろ在職時より技術に近くなった者です。インターネットの円環の理やばい。

技術のスキルセットは、HTML5/CSS3+”CMSをブチ込んだり、PHPやJavaScriptのそれっぽいコードを拾ってきてそれっぽく書き換えて動くよう祈る” です。

元は「何もしてないのに壊れました」と言う側のフレンズだったので、「ですよね～何もしてないのに壊れますよね～そういうことありますよね～」とそっと微笑むのが得意です。


<h2>何書くの？</h2>

なぜわたしがフロントエンド制作に手を出すようになったのか（なぜ他業種の事業会社で外注しないことが多かったのか）について書こうと思います。

静的ページの話です。そしてあくまで個人の感想です！

あと NoCode とか Ameba Ownd の話も出来たらなと思います。




<h2>ペライチのWebページはデザインとコーディングだけで出来ているんじゃないの</h2>

なぜ異業種でフロントエンドを？について、結論から書くと、
1、LPとかコーポレートサイトとか商品ページは、デザインとコーディングだけで出来ているのではない
2、稟議が下りない だったかなと思っています。

1.について。

技術さえあればWebページはつくれる、制作会社は山ほどある。しかしわたしが思うに、どうやら思った以上にいろんな会社のいろんな事業やサービスはふわふわのまま回っている気がします。

そのふわふわをWebページ化するのには
・構造化
　　誰に・何を・どこまで伝えるか。ページ内の見出し込みのサイトマップ
・ライティング
　　テキスト情報をどんな言葉やトンマナで伝えるか
・画像、動画
　　どんなイメージを持ってもらいたいか
が必要になると思うのですが、外注するにはふわっと回っている現状に対して社内で改めてコンセンサスを取る必要があります。

が、分かってないことを分かってない相手（たいてい偉い）に、外注ペースの時間制限つきでなんとなく分かっていることをしっかり分かっている状態へ持っていくのは難しさががあります。

わたしの立場としてはどんどんサクサク要件定義しちゃいましょー！なのですが、大切でこだわりのある商品やサービスや会社に対して中の人（たいてい偉い）がそうもいかないのも分かる。

アニメやドラマのLPだったり日時の決まっているイベントだったりだと、言うて日程のおしりがあるし（情報や素材来るの遅くて困ることはあれど）、それに一旦は終わりがあると思うのですが、

事業、とくにサービス系は基本的には中長期で続けるもので、メニューが変わったり「ウチのウリはxxだと思っていたけどやっぱりyyだ！」というのがあるあさ目覚めたら意思決定者の脳内に降りてきていることもあります。

そんなとき制作会社を背中から刺しかねないのが事業会社のWeb担当です！ごめんなさい！


<h2>で、一体いくら儲かるのん？</h2>

もちろんイケてるとされるクリエイティブエージェントさんや大手広告代理店系の制作会社さんだと、こう、ふわふわをスムーズに、オシャレに、「そう、ワシが考えてたんはこうゆうことなんや！」とえらい人が気分良くなるような具現化をしてくれるのでしょうが。

今度は 2.稟議が下りない が発生します。

結局のところバンバンTVCMを打てるような大企業だったり、シュッとすることを超重視している場合じゃなければ「で、そのサイト作っていくら儲かるの？」の方がよっぽど大切で。プロモーション効果うんぬんじゃ説明が足りないです。

「ボンビー！社長さんのために超かっこいいWebサイトを600万円で買ってきてあげたのねん！売上アップ間違いなしなのねん！」

「ボンビー！社長さんのために腕の良いカメラマンにおしごと依頼したのねん！1日拘束で40万円なのねん！」

状態になりかねません。もちろん正当な対価だと分かっていますが、説得できるかは別問題。ていうか力不足。重ね重ね申し訳ないです、お見積り頂いた方とか…

こういった背景で内製というか社内でなんとかしてるうちにフロントエンドを覚え、「このボタンのぬるっと動く挙動かっこいいすね！」とか「ありものの料理写真が来たときはやばいと思ったけど湯気をフォトショで足したら映えましたね！」とか、全体としては求められてないけど島の人たちとは必要だと感じることも多少楽しめるようになりました。

嘘ですイキりました、スクールでコソ勉もしました…！


<h2>最近おもしろかった制作の話</h2>

フロントエンド界隈でNoCodeうんぬんとか生き残るとか生き残れないとかが視界に入りますが、わたしは Wordpress.com と Ameba Ownd は便利だなと思い、STUDIO の決してコードを1文字たりともさわらせまいという頑ななスタンスにはキレそうになりました。それならレスポンシブの部分をちゃんとしてほしい。

Wordpress.com は現ドワや元ドワが集うSlackで教えて貰いました！皆さん勉強熱心です。
![IMG_1115.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29514/e5d1e02b-3657-16a0-6427-1fe7982d67fa.jpeg)

で、すごいなーと関心というか感動したのは、自分のホームページを欲しいとおっしゃる方がいて。Ameba Ownd で制作して納品し、スマホで運用するマニュアルをつけて方法を教えることにしたんですが、その背景が

・メニューの変更は多そう→自分で柔軟に運用できたほうがいいよね
・パソコン持ってない→アメブロと Instagram で集客して Zoom も使って商いやってるのに？！

むしろそれ全部スマホでやってたんだ…！と驚き、なんかもう未来キターって感じだし、やってて面白いです。

個人的には高単価でかっこいい周到に用意されたインターネットも、とりあえず窓口を開けたことで予期しない何かが始まるようなインターネットも素敵だと思います。

ではメリークリスマス＆よいお年を。
Online Ask An Expertを使ってAWSのプロフェッショナルに質問しよう！！

# 無料でAWSのエキスパートと相談できるサービスがあるのはご存知ですか？

AWS Loft Tokyoというサービスがあり、現在はコロナのため使用できませんが、

そのサービスの中にAsk An Expertというサービスがあります。

現在はこのサービスはオンラインとなっています。（ですが利用率が低いとこのサービスはなくなるそうです）

私自身このAsk An Expertに何度も助けられたことがあり、皆さんにも知って欲しいと思い、この記事を記載しています。

## サービス概要

https://awsloft.tokyo/

是非とも一度このページへアクセスしましょう！！

このサービスを利用するためにはまずはAWS Loft Tokyo のアカウントが必要になります。

このアカウントを有効化するにはAWSのアカウントが必要になります。

そしてこのアカウントを有効化の申請を実施します。

（この有効化には5営業日かかるとの記載でしたが、会社の先輩は5時間でできています）

そして有効化されるとオンラインの予約が可能になります。

オンライン予約はこんな感じになります（有効化されているのでこのページになります）

![スクリーンショット 2020-12-14 22.10.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253981/b4ce2cd8-c976-9ed3-00ac-2795d4fcbd9c.png)

オンライン予約は最初は次の日だけだったのですが、今は1週間分予約できるようになっています。

![スクリーンショット 2020-12-14 22.11.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/253981/863f0681-2042-afc2-c991-8d0e48faf1d3.png)

必要な物はAmazon Chimeが必要です。オンラインではZoomやGoogle Meetなどは使用していません。
Amazon Chimeが必須です。これはGoogle Chromeで一度動作しなくなったので僕はダウンロードしています。

https://aws.amazon.com/jp/chime/?chime-blog-posts.sort-by=item.additionalFields.createdDate&chime-blog-posts.sort-order=desc

## 費用

無料

## どんな質問ができるのか？

基本的にAWSのサービスについてはなんでも質問できます。

ただ時間が45分しかないため、とても深いサービスの内容とかはサポートに確認する必要があります。

巷では、AWSのメンターなどのサービスを実施している人もいますが、私は断然AWSのサポートを使用しています。

https://console.aws.amazon.com/support/plans/home?#/

料金プランとしては一番安いので月額3000円ほどです。
メンターを雇ってもいいとは思うのですが、個人的には１次情報の提供者に聞けるのであれば必ずそのようにします。

### 今まで僕が質問した内容

#### DeepRacerの車体をミニ四駆のように改造してもいいか？

これはミニ四駆のYoutubeを見た時にやってみたいなと思って質問した内容になります。

改造するとレースには出られないとの回答です。www

#### DynamoDBのConditionExpressionって強い整合性で読み込んでいるの？

これはサポート送りになったのですが、

https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/index.html

ここのdynamodbは基本的には結果整合性なのですが、条件式による書き込みの機能があってここが結果整合性による条件式の判断だったのか？強い整合性による判断なのか？ドキュメントに記載がなかったので確認しました。

この質問は結局サポートに聞いたのですが、それ以外にもドキュメントでこのように実施したらいいなど、専門家としての知見をたくさんいただくことができました。

ちなみにサポートからの回答は「強い整合性」です。

#### アプリケーションアーキテクチャの相談

これは新規に開発する時にこんな要件があって、こんな感じで開発しようと思うのですが、どうですか？
の質問です。

とても親身になって回答してくれます。
案外抜けている部分であったり、新しい技術があるのでこれ使うのお勧めですよ！！とアドバイスをいただけます。

例えばAmplifyでアプリケーション作成しようと思っているのですが、こんなアーキテクチャでいいですかね？とかの質問もOKです。

親身になって作りたいアプリへと導いてくれます。

#### 学習の進め方の相談

AWSのサービスを使用するに当たって、何を学習すればいいのかなどの相談も乗ってくれます。

例えば
・DynamoDBの設計を行うにはどうすればいい？
・AppSyncを理解するにはこれでいいかな？
などなど

とても親身になって回答してくれます。

よくあった回答としてBlack BeltのYoutubeであったり、ドキュメントのここに記載がありますなど、必要な情報が記載されている箇所を丁寧に教えていただけます（動画の視聴やドキュメントはしっかりと読みましょう！！）

## なぜこの記事を書いているかというと

利用率が低いとこのサービスがなくなるからです。
僕が質問できなくなってしまうのでそれは非常に困ります。
逆に利用率が上がればサポートの枠が増枠されるとのことです。（そうすればいつでも質問ができる環境ができます）

僕自身、このAsk An Expertのおかげで仕事ができている部分が多々あります。
皆さんもAWSでお困りの際は是非Ask An Expertを利用しましょう！！

是非ともよろしくお願いします。

## まずはAWS Loft Tokyoのアカウントを作成しよう！！そして質問してみよう！！

https://awsloft.tokyo/
GoのRealizeを使ってDocker-composeでホットリロードの開発環境を構築する

# はじめに
この記事は[ITRC Advent Calendar 2020](https://adventar.org/calendars/5535)の14日目の記事です。
前の記事→　[助けてドッカーマン(Network編)](https://www.notion.so/Network-eae890af73a44a7c8688f8376097d20c)
こんにちはRIN1208です今回はRealizeを使ってDocker-composeでホットリロードの開発環境を構築していきたいと思います。

# 必要環境
- docker-compose
- mac os

上記の環境で説明していきます


# 構築する

リポジトリは[こちら](https://github.com/oxequa/realize)

今回ホットリロードの開発環境を構築する上で必要なファイルは以下の５つです
- Dockerfile
- docker-compose.yml
- go.mod パッケージ管理
- .realize.yml  realizeの設定ファイルです
- goのプロジェクト

####まずはinstall
```
$ go get -u github.com/oxequa/realize
```

### Dockerfileを書く
まずはDockerfileの作成です。こちらではファイルのコピーなどは行いません。理由は後ほど説明します。

```dockerfile
FROM golang:1.14

RUN go get github.com/oxequa/realize 

ENV CGO_ENABLED=0 \
    GOOS=linux \
    GOARCH=amd64 \
    GO111MODULE=on

EXPOSE 8080

CMD ["realize", "start", "--build","--run"]
```

### docker-compose.ymlを書く
次にdocker-compose.ymlを書きます。
ここでvolumesを設定します。 
Dockerfileでコピーした場合コンテナのビルド時にコピーされてしまう為ホットリロードで開発できないので注意してください。 
自分は気づかずにハマりました

```yml
version: '3'
services:

  api:
    build: .
    ports:
      - "8080:8080"
    tty: true
    volumes:
      - ./:/app
    working_dir: /app
```
### .realize.ymlを書く
次に.realize.ymlを作成します。細かい説明はコメントにて説明していきます

```yml
settings:
  legacy:
    force: true
    interval: 0s
schema:
- name: test
  path: .
  commands:
    install: # ファイルが変更された際に実行されます。今回はbuildしてmainというファイルに指定しています
      status: true
      method: go build -o main main.go 
    run: # buildしたファイルを実行しています
      status: true
      method: ./main 
  watcher: # ここでは監視するファイルを選択しています
    extensions:
    - go
    - env
    paths: # ここでは監視するディレクトリを選択しています。/api配下のファイルのみ監視したい場合は/apiと変更すれば大丈夫です
    - /
    ignored_paths: # ここでは監視から除外するファイルを選択しています
    - .git
    - .realize
    - vendor

```
### goのプロジェクトを作成する
適当にgoのプロジェクトを作成します。今回はginを使ったapiサーバーを作成します

```go
package main

import (
	"github.com/gin-gonic/gin"
)

func main() {
	r := gin.Default()
	r.GET("/", hoge)
	r.Run() 
}

func hoge(c *gin.Context) {
	c.JSON(200, "hogeaaaaaae")
}
```

## 起動してみる
それでは起動してみましょう。


```
$ docker-compose build
$ docker-compose up -d 
```

上記のコマンドを実行しコンテナを起動します。
ブラウザやcurlでhttp://localhost:8080/ を確認してみるとhogeaaaaaaeと帰ってきます。
またhugaと変更すればhugaと帰ってくるようになっており、ホットリロードの開発環境が構築することができます

# 終わりに
ここまで読んでくださりありがとうございます。
Realize自体は半年以上前に触れていたのですが記事に書いていなかったので今回記事に書きました
Realizeを使ってDocker-composeでホットリロードの開発環境を構築しようとしている方の手助けになれば幸いです。
また間違っている点などがございましたらコメントなどで指摘していただけると助かります。