OmniAICreator/Qiita-1.07M huggingface dataset:
オブジェクト指向でなぜ作るのか（2019年改）

#はじめに

20年前のIT業界のバズワードである**「オブジェクト指向」。**
昨今では当たり前の概念になっている。
一方で初学者が「オブジェクト指向」という言葉自体を聞くことも随分減ったと思われ、また「ポリモーフィズム」や「カプセル化」等の用語を聞くことも随分減ったと思われる。

最も、昨今のSPA全盛&サーバレス&NoSqlの時代感においてオブジェクト指向を学ぶ意味とは....?

#そもそも、オブジェクト指向を学ぶ必要はあるのか？

#####はい。（断言）
全てのIT技術は「巨人の肩にのっており」技術の経緯を学ぶ必要がないことはありません。（もちろん限界はありますが...）

#オブジェクト指向でなぜ作るのか（いきなり結論）
#####1.ユーザもしくはビジネスサイドとコミュニケーションが取りやすいから
#####2.エンジニア同士でのコミュニケーションが取りやすいから

#そもそも、昨今のITシステム開発の流れは？
前近代的なウォーターフォール的な開発はだいぶ廃れ、アジャイルひいてはDevOpsが当たり前。
すなわち開発はどんどん**効率化**を求められており**エンジニアにとっては辛い。**
![Untitled.001.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242700/3879cdde-80a7-e107-bb04-1afe57531393.jpeg)
当たり前ではあるが、開発をより効率化するために、それぞれのロールでの**コミュニケーション**がより求められている。
具体的には、**ビジネスサイドとエンジニアサイド**とのコミュニケーション（下記図の①）
及び、**エンジニア同士**のコミュニケーション（下記図の②）。
![Untitled.002.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242700/c7b7ad2f-ac3d-470a-acba-c1400ede61c3.jpeg)
#で、オブジェクト指向って何？
![Untitled.003.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242700/6174776d-3e1c-c5fb-04a2-2e0dca90f1a2.jpeg)
オブジェクト指向自体は**開発思想**のことで、大きくは**UML（Unified Modeling Language）をベースとした設計**と**オブジェクトプログラミングをベースにした実装**（デザインパターンを参考にすることもある）に分けれる。
#さて、いい感じのITサービスを作るには？
まず、UMLをベースとした**ビジネスサイドとのコミュニケーション**が必須であると考える。
（すなわちオブジェクト指向必須）

そのため下記のような図(UML)を必ず書く。
（どれを書くかはPJによって異なり、ホワイトボードに殴り書きの場合のこともあるが必ず書く。）

######ユースケース図
![download (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242700/2713e1db-5cd5-47ac-3537-4f42b6809e7a.png)
######業務フロー図
![download (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242700/e66906f7-0f49-634d-2dca-12a0873f1af2.png)
######ER図
![download (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242700/77402e85-e153-fdc3-c208-f4ac8880a310.png)
######シーケンス図（概念）
![download (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242700/5eb9aada-0a86-6689-0558-7a12efb30d04.png)
######シーケンス図（詳細）
![08_diagram_sequence.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/242700/0c60d793-e592-4e6a-b016-e1a968289868.png)

#それで、効率よく高速に開発を行うには？
オブジェクト指向の概念をベースとした**エンジニア同士のコミュニケーション**が必須であると考える。
ひいては、**ビジネスサイドから要請されるであろう今後の拡張を鑑みて、設計・実装する必要**がある。

そのためにはオブジェクト指向の知識は必須。
(オブジェクト指向プログラミング自体は今となっては当たり前であり、通常のフレームワークの中に組み込まれており難しくない。)

参考：15分でわかる かんたんオブジェクト指向
https://qiita.com/koher/items/6878c80014992900add7

#結局、オブジェクト指向でなぜ作るのか？
#####1.ユーザもしくはビジネスサイドとコミュニケーションが取りやすいから
オブジェクト指向と密接に結びつくUMLは、ノンエンジニアとのコミュニケーションのためにIT業界の先人が作りだした英知の結晶であり今後もなくなることはない。

#####2.エンジニア同士でのコミュニケーションが取りやすいから
UMLをベースにした設計、ひいてはビジネスサイドからの要請を先回りして設計・実装する際に、エンジニア同士の共通言語としてのオブジェクト指向プログラミングへの知識は欠かせない。


##補足
1.歴史的名著である下記はエンジニアであれば誰もが一読すべき。
「オブジェクト指向でなぜつくるのか 第2版」
https://amzn.to/2XNCE6B

2.私は「高速で開発すること」＝「なんでも自動化する」といった関係に違和感を持っております。自動化できることには必ず限界があるので、「高速で開発する」にはビジネスサイドを先回りした設計が何よりも重要であると思ってます。

3.自分で書いておきながら「オブジェクト指向　概要」の絵は、かなりあやしい...。

4.そもそも全くこのエントリー自体「オブジェクト指向」をほぼ全く説明していない...。
【Kotlin】wifiをon,offしてみる【AndroidStudio】

Design
wifi切り替えボタン一つ配置のシンプルなもの
![2019_07_07-003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456227/d03df743-d219-866d-9fc2-b03864c2d657.png)



```xml:AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.example.wifitoggle">
    
    <!-- wifiの操作権限 -->
    <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/>
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>

    <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:roundIcon="@mipmap/ic_launcher_round"
            android:supportsRtl="true"
            android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>

                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>

</manifest>
```

```kotlin:MainActivity.kt
package com.example.wifitoggle

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.Toast
import android.net.wifi.WifiManager

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val wifiManager : WifiManager = getApplicationContext().getSystemService(WIFI_SERVICE)as WifiManager


        val toastButton: Button = findViewById(R.id.button_01)
        toastButton.setOnClickListener {

            if (wifiManager.isWifiEnabled) {
                Toast.makeText(this, "wifiオフ", Toast.LENGTH_SHORT).show()
                wifiManager.isWifiEnabled = false;
            } else {
                Toast.makeText(this, "wifiオン", Toast.LENGTH_SHORT).show()
                wifiManager.isWifiEnabled = true;
            }
        }
    }
}

```
実行画面

<img width="400" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/456227/2bce3fcd-276d-107b-d7e0-e29e5230e55b.png">
SAStruts 基本 index

#index
- SAStrutsは、Webアプリケーションのルートにアクセスすると、ルートパッケージ.action.IndexActionというクラスがあれば、自動的にそのアクションに遷移します。

```java:IndexAction.java
package tutorial.action;

import org.seasar.struts.annotation.Execute;

public class IndexAction {

    @Execute(validator = false)
    public String index() {
        return "index.jsp";
    }
}
```

- アクションに遷移した後、@Executeのついた実行メソッドが呼び出されます。

- メソッドの戻り値は遷移先になります。IndexAction#index()の場合は、index.jspに遷移します。

#参照
- http://sastruts.seasar.org/tutorial.html
athrill でLチカしてみる

#概要
athrill で手軽に組込みプログラミングを試せるように，Lチカ用のサンプルプログラムとLチカ状態を動的に表示できるツールを作りましたのでご紹介します．

#準備
athrill とは何かを知りたい方は，以下を参照ください．

https://qiita.com/kanetugu2018/items/1f2ef93c9e1fa7a29f97

athirll の開発環境のつくり方については，以下を参照ください．

https://qiita.com/Maeda-Shoota/items/4b1be75a6c4993522ab1

Lチカ用のサンプルプログラムは，athrill開発プロジェクトのサンプルとして，以下で公開しました．

https://github.com/tmori/athrill/tree/master/sample/edu/dio_sample/led

#デモ内容
公開しているデモ・プログラム内容は，sample.c 内にあります．
プログラムの内容は，以下の通りです．

```c
/*
 * 0.5 sec cycle
 */
void sample_program(void)
{
    uint8 data = sil_reb_mem(DIGITAL_REG_ADDR);

    if ((data & DIGITAL_LED1) != 0) {
        data &= ~DIGITAL_LED1;
        sil_wrb_mem(DIGITAL_REG_ADDR, data);
    }
    else {
        data |= DIGITAL_LED1;
        sil_wrb_mem(DIGITAL_REG_ADDR, data);
    }
    return;
}
```

athrill上で，このサンプルプログラムを動作させると，
athrillのデジタル出力状態が 0.5秒周期でON/OFF切り替わります．

ただ，これだけだとON/OFF状態が周期的に切り替わっている様子が
わからないので，「ledコマンド」を用意しました．

#デモ
論より証拠，以下にデモしている様子をお見せします．
画面左下が，athrill を起動する端末です．
画面右下が，LED状態を表示するための端末です(初期状態はLED1がONの状態です)．

![Lチカ_vscode1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244147/0132b469-bac0-18b7-79a4-c94f24884539.gif)

#最後に
マイコンシミュレータで手軽に組込みプログラミングの勉強する上で，
Lチカツールはきっと役に立つはずだと思います．

ぜひご利用ください！
Visual Studio Codeの拡張機能をバージョン管理したい

拡張機能のアンインストールで痛い目を見たので、同じことを繰り返さないようにメモします。

## 経緯

Visual Studio Codeの拡張機能って便利ですよね。ただ、新しい機能を追加した後、それまで動いていた他の機能が動かなくなることがあります。
久しぶりにMarkdown Preview Enhanced でフローチャートを描いたのですが、全然表示されませんでした。
どの拡張機能を追加したり削除したりしたかをバージョン管理できれば、原因の特定に役立つのではないでしょうか

## 注意

Gitとbatchは全然慣れていないので間違ってたらごめんなさい。

## やりたいこと

- インストールしてある拡張機能の一覧をテキストファイル(以下、拡張機能一覧と呼びます)として出力する
- 拡張機能一覧をバージョン管理する
- Visual Studio Codeを拡張機能一覧の通りに構成しなおす

## 環境

- Windows10 1803
- Visual Studio Code 1.36.0

## 方法

### 拡張機能一覧の出力

まず、拡張機能一覧を出力します。

コマンドプロンプトを開き、拡張機能一覧を保存したい場所にカレントディレクトリを変えてから以下のコマンドを実行します。ファイル名は好きに変えてください。

```
code --list-extensions > extension_list.txt
```

### 拡張機能一覧をバージョン管理

最初の一度だけgitにレポジトリを追加

```
git init (拡張機能一覧を保存するディレクトリ)
```

後は拡張機能を追加/削除するたびに先ほどの拡張機能一覧の出力とgit addとgit commitを繰り返すだけです。「なんか改行変だよ」ってgitに言われますが、無視して大丈夫そうです(多分)

```
git add extension_list.txt
git commit extension_list.txt
```

いちいちコマンド叩くのがめんどくさいので、バッチにまとめてスタートアップに置きことにしました。

```
@echo off
REM 拡張機能一覧を置いてあるディレクトリ
cd "C:\Users\hoge\vs_extension"
code --list-extensions > extension_list.txt

REM 拡張機能一覧を更新するのを待つ
timeout /t 15

REM 前回のコミットとの差分を取得
REM 変数は毎回初期化しないと、次にバッチを実行したときに前回の値が残ってしまう
set diff=
FOR /F %%i in ('git diff') do set diff=%%i

REM 差分が出ていればコミット
REM コミットメッセージには差分をそのまま使用
REM 複数個の拡張機能に変更を加えていても一つしかコミットメッセージに表示されないので注意
if not "%diff%" == "" (
    git add extension_list.txt
    git commit extension_list.txt -m %diff%
) 
```

これで自動化できる...あれ？できてないぞ

```
code --list-extensions > extension_list.txt
```

これ以降のコマンドが全く実行されません。
原因が分からなかったので、このコマンドだけ別のバッチに分けて
スタートアップに入れました。
詳しい人、どうしてなのか教えてください。

### Visual Studio Codeを拡張機能一覧の通りに構成しなおす(力尽きた)

これもバッチでできるようにしたかったのですが力尽きました。ここからは手動です。

#### まず入っているものをアンインストール

最終的に同じ形になっていれば、どう入力しても同じです。
一行ずつ入力するのがめんどくさいので、以下のような入力方法ででやりました。

拡張機能一覧をコピー
先頭に「code 」と入力。(スクショだと抜けていますが、スペースが必要です。)
![スクリーンショット (16).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227939/f34f66e8-22a3-e909-c818-684431e04df2.png)

2行目から最後まで「Ctrl+Alt+↓」でカーソルを広げる
![スクリーンショット (25).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227939/f9d8cca7-ead8-3db6-cae8-04125298c990.png)

「--uninstall-extension 」をコピー&ペースト
![2019-07-07 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227939/b5c3c613-cc5a-9693-f491-6dd684718fad.png)

キーボードの「end」で行末へ移動し、スペースを入力
![2019-07-07 (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227939/c8810793-aa79-6b3b-a4fc-9eda4d55fd06.png)

キーボードの「home」で行の先頭へ移動
![スクリーンショット (18).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227939/740d930b-b63e-3c46-e10d-6473021264d7.png)

BackSpaceで一行にする
![スクリーンショット (19).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227939/6dc44241-eaa4-c65d-85c0-a0129d368662.png)

コマンドプロンプトに貼り付けて実行

#### 再インストール

gitで拡張機能一覧を戻したいバージョンにしてから、ほぼ同じことをします。コピー&ペーストするのが「--uninstall-extension 」の代わりに「--install-extension 」になるだけです。

## やってみた感想

バッチみたいな、いかにも「私めはSIerで働かせていただいております!」って感じの技術じゃなくて、シャレオツな言語でスクリプト組めるようになりたい。
MySQLが起動できない「drwxr-xr-x  31 _mysql          _mysql  992  4 21 21:31 mysql」

MySQLをターミナルで起動しようとした際、なぜか起動できない問題が発生しました。
（すみません、、エラー文を撮り忘れたので、原因と対処方法をまとめておきます）

参考記事
https://qiita.com/gcyata/items/ebbb98602eafc149abb2

#原因
色々と調べると「パーミッション」という権限の問題で、MySQLが起動できないご様子。

#対処方法
MySQLが居るであろうディレクトリまで、cdコマンドで移動（ターミナル上）

`cd usr/local/var`

`pwd`コマンドで自分が今いる、ディレクトリを確認

```
/usr/local/var
```
OK！


次に下記のコマンドをターミナルで叩く

`ls -ll`
そうすると`usr/local/var`配下で起動中と思われるプロセスが表示

```
total 0
drwxrwxr-x   4 [ここは自分のユーザー名]  admin   128  4  3 20:58 homebrew
drwxr-xr-x   4 [ここは自分のユーザー名]  admin   128  4 21 08:45 log
drwxr-xr-x  31 _mysql               _mysql  992  4 21 21:31 mysql
drwx------  26 [ここは自分のユーザー名]  admin   832  7  7 08:13 postgres
drwxr-xr-x   2 [ここは自分のユーザー名]  admin    64  4 21 08:43 run
```

↑なんか１つだけ **_mysql**  が管理者になってるプロセスが居るぞ〜！

これを下記のコマンドで管理者変更させる
`$ sudo chown -R [ユーザー名] mysql`

もう１度、`ls -ll`

```
total 0
drwxrwxr-x   4 [ここは自分のユーザー名]  admin   128  4  3 20:58 homebrew
drwxr-xr-x   4 [ここは自分のユーザー名]  admin   128  4 21 08:45 log
drwxr-xr-x  31 [ここは自分のユーザー名]  _mysql  992  4 21 21:31 mysql
drwx------  26 [ここは自分のユーザー名]  admin   832  7  7 08:13 postgres
drwxr-xr-x   2 [ここは自分のユーザー名]  admin    64  4 21 08:43 run
```

ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!

この状態で、`mysql.server start`すれば無事にMySQLが起動できますた。
HTMLでテーブルのヘッダー（上部と左部）を固定してスクロールさせる実装


##はじめに
テーブルのヘッダー（上部と左部）を固定してスクロールさせる実装でプラグインなどを比較したため、備忘録を含めまとめたいと思います。


##position:stickの実装方法
まず、大前提として本来であれば`position:sticky`を使用することが望ましいかと思いました。
こちらの方の記事が大変わかりやすいです。
https://qiita.com/s0tter/items/14fb4ec2600828a21a22
CSSのみで完結するため上記手法が望ましいかと考えておりますが、2019年7月7日時点でIEに対応しておりません。IEのユーザーもアプリを活用されることが予想されるため、採用を見送りさせていただきました。
https://caniuse.com/#search=position%3A%20sticky
###position:sticky対応状況
<img width="1270" alt="スクリーンショット 2019-07-07 17.43.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226787/e1b92cc6-dd86-59a3-e440-141c7202e914.png">


可能であれば、`position:sticky`を使用したいのですが、今回はIEの関係で採用が難しいため、以下のプラグイン等を比較いたしました。

##プラグインを比較してみました。
当方Macしかパソコンを持ち合わせていないため、virtualBoxでIEを立ち上げて
動作状況を確認してみました。

###・DataTable
Github:https://github.com/DataTables/DataTables
https://datatables.net/extensions/fixedcolumns/examples/initialisation/two_columns.html
最終更新:2018年6月23日
####IEでの動作状況
![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226787/e725aec0-6b62-f1ff-8469-4ae93117cd33.gif)

###・fixedTblHdrLftCol
Github:https://github.com/nkmrshn/fixedTblHdrLftCol
http://nkmrshn.com/fixedTblHdrLftCol/samples/sample_3_sync.html
最終更新:2014年6月13日
####IEでの動作状況
![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226787/f18cb9af-381d-90dc-7cc7-3a6f3a6b125e.gif)



###・FixwdMidashi
http://hp.vector.co.jp/authors/VA056612/fixed_midashi/manual/index.html
最終更新:2018年12月3日
####IEでの動作状況
![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226787/c5b3dcc6-9e19-f49b-8fcc-c427502f2fcd.gif)



###・Grid
（まだまとめている最中です。）

IEで最も綺麗に動作しているのが、FixwdMidashiだったように思えます。
他に良い方法などございましたら、一声かけていただけますと幸いです。

少しずつ追加させていただきます。
ご参考になれば幸いです。
bit

1bitで、0,1 の２値を表すことができる。
2bitで, 00,01, 10, 11の４値。
3bitで, 000, 001, 010, 011, 100, 101, 110, 111の８値。
4bitで、0000, 0001, 0010, 0011, 0100, 0101, 0110, 0111, 1000, 1001, 1010, 1011, 1100, 1101, 1110, 1111の１６値
5bitで、32値
6bitで、64値。
7bitで、128個。
8bitで、258個。

昔、リモコンは4bit cpuで構成した。
ON, OFFの２値。
あるいは、0から９までの10値と、+-/*=の５演算子で成り立つ。
小学2年生にプログラムをさせてみた

#きっかけ
同僚と飲んでいる時、こんな話がありました。

>**同僚A**
>「うちの子供（小２）にそろそろプログラムさせようかな？」
>**同僚B**
>「いいねぇ。自由研究の課題でDNSサーバーとか作らせるとかw」
>**私**
>うちも小２だからやらせようかな
>でも何からやればいいかなー

という話をぐだぐたしていました。

それから数週間後、夏休みの自由課題の話になり、パチンコ作るとか、楽器作ってみるとか、小学生らしい話になってみましたが、、、
ふと、「プログラムやってみる？」と言ったところ、「やってみる！」という話に。
ということで、やってみました。

##家族構成(2019年時点)
私:SE
嫁:Webデザイナー
息子(兄):小学２年生
息子(弟):年中さん


##環境
mac Mojave 10.14.5
JavaScript
HTML
Visual Studio Code
Chrome

##業務要件
・ぐーちょきぱーを選べる
・対戦相手はコンピューター

##ソースコード（随時更新）
[こちら(GitHub)](https://github.com/fu-jimoto/MySon-s-Program)

##最初にやったこと
まずは「変数」というものを教えてみました。「なんか箱なんだよ」という軽めの説明。
自分でタイピングして画面に出してみせました。

```javascript
var i;
i= "ぐー";
document.write(i);
```

息子:おおぉ！
反応はよさそうです。じゃんけんゲームを作る事に。
ここでとりあえず、「ちょき」とか「ぱー」とか画面にでるようにコードをかかせてみました。
タイピングの練習も兼ねています。普段、スマホでぐぐるくらいはできるようになっている為、わりとキーボード入力もすぐ慣れました。
ローマ字入力をまだ覚えていないので、それっぽいローマ字で。

```javascript
var a;
a="cyoki";
document.write(a);
var b;
b="pa";  
document.write(b);
var c; 
c="guu";
document.write(c); 
```
ここまでは何とか理解できたようです。
![66399956_10211338830825460_1643360074925604864_o.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/69b7f9fe-4544-48fb-8b5d-f1cc0bb1ca47.jpeg)


##if文にチャレンジ
じゃんけんする以上、条件分岐は必須です。とりあえずだらだら書きながら説明してみました。

```javascript
if(i=="ぐー" && j=="ぐー"){
  document.write("どっちもあいこになりました");
}
```
まぁちょっとこのあたりはまだ理解できないかもですね。。。

##UI/UXに挑戦
次にゲームをする為には画面が必要です。とりあえずどんな画面にするか考えさせました。
UI/UXの講師はWebデザイナーのママです。
(この間に私は弟の散髪屋に）
![66324002_10211339871851485_3930939216749395968_o.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/131e4fed-36c2-8794-c3cc-11e0b584aa98.jpeg)
それなりに画面遷移について議論があったようです。

2019/7/9追記
議論ポイントは「ぐーちょきぱーを選んだあとに変更できるか？」
嫁：変更できない。じゃんけんは勢いで出してすぐ勝負がきまる。あと1クリック増えるとわずらわしい。
子：変更できる。いろいろ悩んで決定したい。
とのこと(笑)



本日はここまで(2019/7/7)

次回は、HTMLで画面を作ります。

##HTMLで画面づくり
HTMLで画面を作っていくんだよという事を教えました。
このタイミングでマウスも使わせてみましたが、手が小さくてまだうまくクリックできないようです。。。

```html:index.html

<html>
<button>パー</button>
   
</html>
<button>ぐー</button>
<button>チョキ</button>

えらぶ

```
htmlの閉じタグの位置がおかしいのはまあいいでしょう。
とりあえずボタンを作らせてみました。
![スクリーンショット 0001-07-10 20.36.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/300377/0537ae30-b50b-62f0-b20e-a96e1549fd6e.png)

これだけでもけっこう苦労しました。マウス操作、ローマ字入力等慣れない事をやるのでこのあたりですぐ挫折しちゃうかな？とも思いました。
ですが、まだまだやる気はあるようです。

本日はここまで(2019/7/9)

次回はbuttonからfunctionのコールをやろうと思います。

#続編
長くなってきたので[こちら](https://qiita.com/fu-jimoto/items/6c017e065b8a4fb84ca3) にその２を書き始めました。
EC2とELBで、URLごとに別のサーバにルーティングする

## イントロ

[EC2で構築したUiPath Orchestrator サーバを、自己署名じゃない証明書でSSLで公開する(Certificate ManagerとELBを使用) ](https://qiita.com/masatomix/items/e220d09f5de1341e0494) のつづきです。
自己署名証明書で動いているIISのOrchestratorサーバを、ELBを用いて正式な証明書を使ったサーバとして公開するところまでをやりました。

残りは、URLが「https://ela.example1.xyz/ 」の時は、Elasticsearchサーバへルーティングする設定の追加です。
![cont.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73777/3ce5a4ac-8c15-da2b-dd53-41c651da5854.png)


もろもろ前提などは、[前回の記事](https://qiita.com/masatomix/items/e220d09f5de1341e0494#%E5%89%8D%E6%8F%90) をご確認ください。

## やってみる

ロードバランサの設定画面で「ルールの表示/編集」をクリック。
![e01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73777/4e1b0540-fff6-221a-c6fd-d418c7081312.png)

ルーティングを追加するために上部の「プラス」をクリック。
![e02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73777/ba84f508-0316-607b-9c8f-81e4bfc690a4.png)

ルールを追加するために「ルールの挿入」をクリック。
![e03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73777/fc61296d-d894-7666-af46-a5786ea5be76.png)

**URLが 「https://ela.example1.xyz/ 」の時だったら** を追加するため、プルダウンから「ホストヘッダー...」を選択。
![e04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73777/d9d8b8a9-2cb5-f411-90e1-3c1b15f482d9.png)

「ela.example1.xyz」と入力しチェックマークをクリック。
![e05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73777/a9d97f11-93f9-86d2-e0f0-978c1d05e6a9.png)

IF(左側)が確定しました。続いてTHEN(右側です) ですが、プルダウンから「転送先」を選択し、転送先のターゲットグループとして前回作成した「ela」を選択。チェックマークをクリックすると、、
![e06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73777/c7b13164-8d9b-73d4-657e-3ca21d14d033.png)

「アクセス先が ela.example1.xyz だったら、ターゲットグループ ela に転送する」という設定が追加されました。右上の「保存」をクリックします。
![e07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73777/72c0a68b-ed3f-b4fb-a4c7-2c7d85fa3876.png)

追加されました！
![e08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73777/b20144b5-f945-ebcb-a243-d0d2b56870ef.png)

さて https://ela.example1.xyz/ へアクセスしてみると、、表示されましたねーーー。。
![e09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73777/713bac0a-0541-9ee0-10f6-e9dac15b0350.png)


この Application Load Balancer の ホスト名ベースのルーティング機能によって、一台のロードバランサを使って、様々なサーバにリバースプロキシできるわけですね。とても便利です。
UiPath Orchestrator の構築の観点からも、メインのOrchestratorサーバとElasticsearchサーバを、一台のロードバランサでURLで振り分けできることが確認出来ましたね。

おつかれさまでした。

## 関連リンク

- [EC2で構築したUiPath Orchestrator サーバを、自己署名じゃない証明書でSSLで公開する(Certificate ManagerとELBを使用) ](https://qiita.com/masatomix/items/e220d09f5de1341e0494) 前回記事
- [ELB(SSL)の内側に配置したEC2のUiPath Orchestrator(IISサーバ)をポート80で運用したい→ 妥協](https://qiita.com/masatomix/items/33be7e4e1d3eadc49918) 次回記事
- [ALBのHost-based routingを試してみた](https://dev.classmethod.jp/cloud/aws/tried_hostbased_routing/)
【SourceTree】diff画面でテキストファイルの日本語が文字化けした

# diff画面のテキストファイルの文字化け対処
# 筆者レベル＋目的
　仕事でOfficeを使う程度の非エンジニアで，プログラミングはドットインストールでHTML&CSS，jQuery等を行った程度の初学者です．
　いずれポートフォリオを作りたいと思っており，バージョン管理主流とされるGit・SourceTreeを学習しようとして躓いたので，似たような境遇の方に対処サンプルの１つとなればなと．
# 事象
メモ帳で作成したテキストファイルをベースにして，作業ディレクトリ～masterにマージを行おうとした際，diff画面（History右下のファイル内容が記載されているエリア）で日本語の文字化けが発生しました．
#環境
OS:Windows10
SourceTree:Version 3.1.3(2019/07/07現在)　※ 使用言語：日本語
使用ファイル形式:テキスト ドキュメント (.txt)
#対応
[ツール]－[オプション]－[全般]より
「デフォルトの文字コード」を「utf-8」に設定．

　これでほとんどが対応可能とされるようですが，筆者のケースの場合これだけで解決せず，下記の対応を試みました．

① バージョンの確認[ツール]－[オプション]－[Updates]＋再起動
② 「デフォルトの文字コード」を日本語を含む文字列のコードである「shift-jis」に変更
![sample image.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/434223/fcdb784e-1050-263e-3e20-b8d011a421f9.png)


②の段階で文字化けが解消し，その後デフォルトの「utf-8」に戻しても問題なく動作しました．
#その他
素人に加え投稿経験が薄いため至らぬ点も多々あるかとは思いますが，選択肢の１つとしてご参考ください．最後まで読んで頂きありがとうございました．
react native expoをゼロから実機で確認するまでの手順


２年前に[詰将棋アプリ](
https://apps.apple.com/jp/app/%E8%A9%B0%E5%B0%86%E6%A3%8B%E3%82%89%E3%81%A3%E3%81%97%E3%82%85/id1280287606)をUnityで作っていた。
そろそろ新しいアプリを作ろうと思って調べてみたところ[Expo](https://expo.io/)が良さそうだったので使えるようになるまでの設定。

### Expoを選んだ理由

- 詰将棋のアプリなのでネイティブでしか触れないような機能は使わない。
- 自分がiPhone持ちでswiftで書こうと思ったが、最近リアルで将棋指すことがあってandroidユーザもそこそこいたのでクロスプラットフォームでやりたくなった。


## 環境

macOS mojave(10.14.5)
Homebrew 2.1.6

実機はiphone7です。


## nodejsをインストール

```bash
# nodebrewを入れる
brew install nodebrew
# 安定版をインストール
nodebrew install-binary stable
Fetching: https://nodejs.org/dist/v12.5.0/node-v12.5.0-darwin-x64.tar.gz
Warning: Failed to create the file 
Warning: /Users/kzfm/.nodebrew/src/v12.5.0/node-v12.5.0-darwin-x64.tar.gz: No 
Warning: such file or directory

curl: (23) Failed writing body (0 != 1058)
``` 
エラーになってしまう...
[ここ](https://stackoverflow.com/questions/34104883/cant-install-node-with-nodebrew)を参考に権限付きのディレクトリを作る

``` bash

mkdir -p ~/.nodebrew/src
nodebrew install-binary stable
Fetching: https://nodejs.org/dist/v12.6.0/node-v12.6.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully
```

インストールできた。

```bash

nodebrew use v12.6.0
use v12.6.0
```
パスを通す

```
echo "export PATH=\$HOME/.nodebrew/current/bin:\$PATH" >> ~/.bashrc
# 再起動
source 
# コマンドが通るか確認
node -v
v12.6.0
# 同じようにnpm (node package managerも入っている）も確認
npm -v
6.9.0
```

## TypeScriptのインストール
```
npm install -g typescript
tsc -v
Version 3.5.2
```

## Expoのインストール

```bash
# npm install は npm iでも同じらしい
npm i -g expo
```

実機側にアプリ（Expo Client)を入れてアカウントを作っておく。


```
# sampleディレクトリにプロジェクトを作成
expo init sample
# CLI入れるか聞かれるのでYを選択
This command requires Expo CLI.
Do you want to install it globally [Y/n]? y

Choose a template: (Use arrow keys)
  ----- Managed workflow -----
❯ blank               minimal dependencies to run and an empty root component 
  blank (TypeScript)  same as blank but with TypeScript configuration 
  tabs                several example screens and tabs using react-navigation 
  ----- Bare workflow -----
  bare-minimum        minimal setup for using unimodules 

{
   "expo": {
     "name": "sample",
     "slug": "sample"
   }
 }
```

## 型チェックを入れる

`npm i -D @types/react @types/react-native` 

ここはよく分かっていないので `tsconfig.json` の設定と一緒に記事にしていきたい。

## アプリを起動
```
cd sample
npm start
```

でQRコードが出てきてiphone側で読み込んでアプリを起動すると画面が表示される。

## まとめ

ざっとインストールして実機確認までできた。
Unityと違ってコンパイルの時間も少ないし、すぐに実機で確認できるのはすごい。
コードを変更するとすぐに反映する。

次回は `react` の仕組みや基本を学んで記事にしていきたい。
論文arxiv1302.5843 実装その１

#1. 本記事の概要

NPな色々な問題に対してIsingで定式化した論文arxiv1302.5843があります。
D-waveの勉強がてら、それを実装してみようというもの。

https://arxiv.org/abs/1302.5843

#2. 本記事の想定読者

- 最適化がなんとなくわかっている
- 理屈はいいから使えればいいや
- Pythonなんとなくわかる

レベルの人

#3. 対象の問題
その１で対象とするのは、論文の「2.1 Number Partitioning」。

N個の正の整数が $ S = \{n_1, . . . , n_N \}$で与えられる。 この時、2つの集合$R$ と$S-R$を作成する。要素の合計が同値となる集合$R$を求めよ。

イジングモデルで考えると（具合がよく）、Nこの正の整数を$n_i$、どちらの集合に属するかをスピン$s_i$で決定すると、

$$ n_1*s_1 + n_2*s_2 ... n_N*s_N = 0 $$

の時、分割できたと定義できる。同値でない場合は、0以外の何らかの数値となる。つまり、$ n_1*s_1 + n_2*s_2 ... n_N*s_N$2乗することで、最小値(0)を求める最適化問題と定義することができる。

これを数式で簡潔に記すと
$$ H=(\sum_{i=1}^{n} n_is_i )^2$$

#4. D-waveを使用する最適化プログラム

いきなり実装ですが、以下になります。
なお、Normalizeは以下から借用しました。

https://qard.is.tohoku.ac.jp/T-Wave/?p=1136


```python:NumberPartitining
from pyqubo import Array, Sum
from dwave.system.samplers import DWaveSampler
from dwave.system.composites import EmbeddingComposite
import random

def normalize(exp, vtype='SPIN'):
    if vtype != 'SPIN' and vtype != 'BINARY':  # 変数のタイプがイジング・QUBO表現でない場合、終了
        print("vtype must be 'SPIN' or 'BINARY'.")
        return
 
    model = exp.compile()
    if vtype == 'SPIN':
        compiled_h, compiled_J, offset = model.to_ising()
        norm = max(abs(max(compiled_h.values())),
                        abs(max(compiled_J.values())),
                        abs(min(compiled_h.values())),
                        abs(min(compiled_J.values())))

    else:
        compiled_qubo, offset = model.to_qubo()
        norm = max(abs(max(compiled_qubo.values())), abs(min(compiled_qubo.values())))

    # 絶対値が最大の係数で各成分を割ることで、[0,1.0]に正規化
    return exp / norm * 1.0

## 問題を定義
P_SIZE = 40
n = [random.randint(1,20) for i in range(P_SIZE)]

## ハミルトニアンを定義
s = Array.create('s',P_SIZE,'SPIN')
H = Sum(0,P_SIZE, lambda i: n[i] * s[i])**2

#ISINGを作成
model_i = normalize(H).compile()
compiled_h, compiled_J, offset = model_i.to_ising()

##Dwaveで実行
sampler_i = EmbeddingComposite(DWaveSampler(solver='DW_2000Q_VFYC_5'))
response_i = sampler_i.sample_ising(compiled_h, compiled_J, num_reads=200)

##サンプリングした中の最良解
print(response_i.first)

##定義した問題形式へDecode
result_i = []
result_i = model_i.decode_dimod_response(response_i)
```

結果確認

```python:結果確認
for j in (-1,1):
    tmp=0
    for i in range(P_SIZE):
        if(result_i[1][0]["s"][i] == j):
            print(n[i], end=" ")
            tmp += n[i];
    print(":{}".format(tmp))
```

19 18 7 9 11 20 12 8 5 4 19 1 10 8 17 5 16 10 7 20 3 2 13 10 1 9 :264
18 20 12 16 16 15 16 4 20 13 12 18 5 10 15 8 5 16 8 13 4 4 3 4 :275

うーむ、どうやらOceanを使って何も考えずに埋め込むと精度が悪いというのは本当のようですね。
楽でいい結果がでるEmbedding方法教えてください！
Docker + macでLittleSLAMを動かす

SLAM入門: ロボットの自己位置推定と地図構築の技術（友納 正裕） のサンプルコード、[LittleSLAM](https://github.com/furo-org/LittleSLAM)をMacのDockerで動かす。
gnuplotを使っているので、ホストにXQuartzを用意してXを表示する。

# Prepare files

## Clone the repo
```shell-session
$ git clone --recursive https://github.com/furo-org/LittleSLAM.git
```
もしくは

```shell-session
$ git clone https://github.com/furo-org/LittleSLAM.git
$ cd LittleSLAM
$ git submodule init
$ git submodule update
```

## Download the dataset
https://github.com/furo-org/LittleSLAM の通り、支持されたリンクからデータセットをダウンロードする。
`LittleSLAM/dataset`ディレクトリに置くことにする。

```shell-session
$ cd /path/to/LittleSLAM
$ mkdir dataset
$ cd dataset
$ wget https://furo.org/software/little_slam/dataset.zip
$ unzip dataset.zip
```

`path/to/LittleSLAM/dataset`以下に `*.lsc`ファイルが置かれる。

# Prepare X11
dockerコンテナ内からgnuplotで描画したのをホスト（Mac)のGUIで見れるよう、Xを準備する

参考: http://raphine.hatenablog.com/entry/2018/08/14/004634

## Install XQuartz
1. https://www.xquartz.org/ からXQuartzをダウンロード→インストール
2. インストール後、macからログアウト→ログイン

## Enable X11

1. XQuartzのメニュー→「環境設定」→「セキュリティ」タブ→「ネットワーク・クライアントからの接続を許可」にチェック
2. XQuartzを終了→起動
3. この後起動するdockerコンテナからのXの接続を許可

  ```shell-session
  $ xhost + 127.0.0.1
  ```

# Run LittleSLAM in a docker container

## Launch a docker container

```
$ docker run -it \
-e DISPLAY=docker.for.mac.localhost:0 \
-v /path/to/LittleSLAM:/workspace \
-w /workspace \
--name little-slam \
debian:stretch bash
```

* `-e DISPLAY=docker.for.mac.localhost:0`: Xの接続
* `/workspace`: コンテナ内の作業ディレクトリを指定。好きな場所を指定すればよい。
* `--name little-slam`: dockerコンテナの名前を指定。好きな名前を付ければよい。
* `debian:stretch`: この例では`debian:stretch`イメージを利用。好きなイメージを使えばよい。

以下は、上記で起動したdockerコンテナ内での作業となる。
https://github.com/furo-org/LittleSLAM/blob/master/doc/install-linux.md の通りに進めていけばよい。

## Build LittleSLAM
```
# apt update
# apt install build-essential cmake libboost-all-dev libeigen3-dev gnuplot gnuplot-x11
# mkdir build
# cd build
# cmake ..
# make
```

## Run LittleSLAM
```
# cd /workspace/build/cui
#  ./LittleSLAM ../../dataset/corridor.lsc
```
HTML の 入れ子 について

# 目的
- 入れ子について簡単にまとめる。  
※予備知識が増え次第追記を行う予定。  
※本記事は主にHTMLの入れ子について記載する。

# 入れ子
- 要素を要素で囲むこと  

HTMLでのリストの記載を抜粋した画像で説明を行う。
赤枠の部分がul要素である。
黄枠の部分がli要素である。
このときul要素がli要素を包み込んでいることになる。
このような状態を「入れ子」という。
入れ子の関係を見た目で分かりやすくするためにインデントを用いる。

HTMLでのリストの記載を抜粋した画像を記載する。
![説明概要_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/bc09458b-d7e8-d8e5-69bb-6e6b8f0ede6c.png)


# 親要素と子要素
- 入れ子での各要素の名称。  

HTMLでのリストの記載を抜粋した画像で説明を行う。
赤の部分がul要素である。
黄の部分がli要素である。
このときul要素がli要素を包み込んでいることになる。
外側の要素を「親要素」と呼ぶ。
内側の要素を「子要素」と呼ぶ。

HTMLでのリストの記載を抜粋した画像を記載する。
![説明概要_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/4adafa5f-0df2-c520-d8ef-1df7e56d9c24.png)
Content Security Policyにより外部リソースが参照されない

# 概要
- Google Analyticsが"過去 48 時間に受信したデータはありません"のまま変化しない
- Bootstrapのメニューアイコンが表示されない

| 正常な表示 | アイコンが表示されない |
|:--:|:--:|
|<img width="157" alt="navicon_success.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336552/1dcf2bc9-5441-d7b2-7db6-6044b5327fa6.png">|<img width="157" alt="navicon_fail.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336552/baf59f86-8437-fb9a-0bcb-0fa3f34a5f41.png">|

# 環境
- Nginx: 1.16.0
- Rails: 5.2.1.1
- google-analytics-rails: 1.1.1
- Bootstrap: 4.3.1

# 調査
最初はRailsのアセットパイプラインを怪しんでRailsの方を変えたりしていましたが、なかなか治らない。
Google Chromeのコンソールを確認すると下記の表示が。
<img width="373" alt="console_error.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/336552/3f99c294-076d-e032-a9e6-674ac67bdba2.png">

エラーメッセージで検索すると、どうやらContent Security Policyの設定が原因でした。

# 修正
Nginxを使用していルため、`/etc/nginx/conf.d/default.conf`を修正します。

```config:修正前
add_header Content-Security-Policy "default-src 'self'";

```
```config:修正後
add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://www.google-analytics.com 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://www.google-analytics.com;";
```

修正後、Nginxを再起動し、無事にBootstrapもGoogle Analyticsも使えるようになりました。

# 参考
- Google Analytics
    - https://support.google.com/optimize/answer/7388531?hl=ja
- Bootstrap
    - https://github.com/twbs/bootstrap/issues/25394
Pythonで小数を取り扱う話

# はじめに
Pythonで、というかコンピュータは小数の扱いが苦手です。
というのもコンピュータは2進数を基準に計算しており、小数を取り扱うのが難しいからです。

多くの場合、コンピュータは小数を扱うとき、その値の近似値を表します。

そのため、次のような計算を行うと、正確な数を計算することができません。

```python
A = 0.33
B = 10.0
print("ans: " + str(A * B))

# ans: 3.3000000000000003
```
これはつまり、次のような事に注意が必要という事です。

```python
A = 0.33
B = 10.0

if(A * B == 3.3):
    print("一致")
else:
    print("不一致")

# 不一致
```

というわけでpythonで小数を取り扱うようなライブラリを調べてみました。

# decimal
decimalはpythonの標準ライブラリです。
10進数の浮動小数点のための計算を行うために設計されています。

この型を使用すると、人間の感覚に近い計算が行えます。

Doc: https://docs.python.org/ja/3/library/decimal.html

```python
from decimal import *

x = Decimal("0.33")
x10 = x * 10

print("ans: " + str(x10))
print("type: " + str(type(x10)))

# ans: 3.30
# type: <class 'decimal.Decimal'> 
```
Decimal型の変数はintとの計算では明示的にキャストする必要はありません。

```python
x2 = x + 1
print(x2)

# 1.33
```
だたしfloat型は明示的にキャストをする必要があります。

```python
x2 = x + 0.003
print(x2)

# TypeError: unsupported operand type(s) for +: 'decimal.Decimal' and 'float'

x2 = x + Decimal(0.003)
print(x2)

# 0.3330000000000000000624500451
```

あれ？
## float型からDecimal型へのキャストは注意が必要
float型からDecimal型にキャストすると、うまく動作しないようです。

float型は小数の近似値をDecimal型に渡すので、その近似値を正確にDecimal型が読んでしまため、このような処理になったものと思われます。
なので、この場合はstr型を経由して、Decimal型にキャストすると良いでしょう。

```python
print(Decimal(0.003))
# 0.003000000000000000062450045135165055398829281330108642578125

print(Decimal(str(0.003)))
# 0.003
```


# 終わりに
冒頭で失敗していた比較の演算は次のようになります。

```python
A = Decimal(str(0.33))
B = Decimal(str(10.0))

if(float(A * B) == 3.3):
    print("一致")
else:
    print("不一致")

# 一致
```
TerraformでFargateを扱う際にはまったポイントまとめ

## はじめに

Terraformでインフラ構築(AWS)を勉強していて、Fargateを扱う際にはまったポイントをまとめました。

## バージョン

- Terraform v0.12.1

## はまったポイント

### エラー内容

```
Error: ClientException: No Fargate configuration exists for given values.
```

### 原因

タスク定義でFargate起動タイプを選択している場合、CPU, Memoryは以下の組み合わせから選ばなくてはならないが、

```
  cpu = 128
  memory = 256
```

のように設定していた。


|CPU value|Memory value (MiB)|
|:--|:--|
|256 (.25 vCPU)|512 (0.5GB), 1024 (1GB), 2048 (2GB)|
|512 (.5 vCPU)|1024 (1GB), 2048 (2GB), 3072 (3GB), 4096 (4GB)|
|1024 (1 vCPU)|2048 (2GB), 3072 (3GB), 4096 (4GB), 5120 (5GB), 6144 (6GB), 7168 (7GB), 8192 (8GB)|
|2048 (2 vCPU)|Between 4096 (4GB) and 16384 (16GB) in increments of 1024 (1GB)|
|4096 (4 vCPU)|Between 8192 (8GB) and 30720 (30GB) in increments of 1024 (1GB)|


### 参考

No Fargate configuration exists for given values
https://code.thebur.net/2018/05/11/no-fargate-configuration-exists-for-given-values/

指定された CPU またはメモリの値が無効
https://docs.aws.amazon.com/ja_jp/AmazonECS/latest/developerguide/task-cpu-memory-error.html

---

### エラー内容

```
Error: ClientException: Fargate requires task definition to have execution role ARN to support ECR images.
```

### 原因

- `execution_role_arn`を指定する必要があった

### 参考

terraformのmoduleで定義したresouseにアクセスするにはoutputしないとダメ
http://www.mpon.me/entry/2016/12/13/030907

https://github.com/ContainerSolutions/unifi-fargate

---

### エラー内容

```
Error: InvalidParameterException: Network Configuration must be provided when networkMode 'awsvpc' is specified.
```

### 原因

- `network_configuration`を設定する必要があった

### 参考

https://github.com/ContainerSolutions/unifi-fargate


---


### エラー内容

```
Error: Incorrect attribute value type
Inappropriate value for attribute "subnets": element 0: string required.
```

### 解決方法

flattenを用いる

### 参考

Terraform 0.12 + vpc module v2.2 (Inappropriate value for attribute "subnet_ids": element 0: string required.) #271
https://github.com/terraform-aws-modules/terraform-aws-vpc/issues/271


## その他はまったポイント

### 0.11と0.12での記述の仕方の違い

- 主に **ブロックタイプ** (attr { … } という波括弧で記述する属性)と **マップ**  (attr = { key = value } という記述をする属性) ではまりました
- 参考
    - Terraformを0.11から0.12に移行するときの注意点とは
    - https://apps-gcp.com/terraform-011-to-012/#i-2

### タイポ

- 疲れていると謎のタイポをしています
HTML で リスト (箇条書き) を 作成する ～HTML ulとli～

# 目的
- HTMLでリスト(箇条書き)の作成方法をまとめる。  

# 押さえるポイント  
- リストで箇条書きにしたい内容をliタグで囲む。  
- liタグをulタグで囲む。  
- ulタグとliタグにはインデントを用いて入れ子の関係をわかりやすくする。

# 書き方の例

``` html
<ul>
  <li>(リストとして記載したい内容を記入する-1)</li>
  <li>(リストとして記載したい内容を記入する-2)</li>
  <li>(リストとして記載したい内容を記入する-3)</li>
</ul>
```
〜実際の表示〜

<ul>
  <li>(リストとして記載したい内容を記入する-1)</li>
  <li>(リストとして記載したい内容を記入する-2)</li>
  <li>(リストとして記載したい内容を記入する-3)</li>
</ul>

# 注意するポイント
- liタグはデフォルトだと内容の前に黒点が自動で追加される。  
- ulタグが親要素、liが子要素。
- 入れ子の関係を見た目でわかりやすくするため、インデントを利用する。

# より具体的な例
挨拶に関するリストを作成する。  
リストに箇条書きする内容は、おはようございます。こんにちは。こんばんは。とする

〜サンプルコード〜

```html
<ul>
  <li>おはようございます。</li>
  <li>こんにちは。</li>
  <li>こんばんは。</li>
</ul>
```

〜プレビュー画面〜

<ul>
  <li>おはようございます。</li>
  <li>こんにちは。</li>
  <li>こんばんは。</li>
</ul>
[Blender2.8] Pythonで板ポリを生成する。BMesh利用しない版と利用する版。

BlenderPython3日目。BlenderでPythonを用いてモデリングするために、頂点とインデックスの生成をおさえる。もちろん、ツール上に存在するプリミティブに関しては専用の関数があるため、それで問題ない場合はそちらで。

##作るもの
サイズ1.0の板ポリ。v1 から v4 の順で頂点を生成し、v1,v3,v2とv2,v3,v4で面を張る。
![quiita1 copy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/346396/fea1be26-aae7-d3fd-f68b-cf8a6b73a96c.png)


##オブジェクトのメッシュに直接アクセスする方法
これが楽。mesh.from_pydataで空の配列を渡している2つ目の引数は辺のインデックス。点、辺、面がBlenderにおいての基本要素。

```python
import bpy

vertsData = [(-0.5, -0.5, 0), (0.5, -0.5, 0.0),(-0.5,0.5, 0.0),(0.5,0.5,0.0)]
facesData = [(0,2,1),(1,2,3)]
 
# Create Mesh
mesh = bpy.data.meshes.new("mesh")
mesh.from_pydata(vertsData, [], facesData)  
mesh.update()

# Create Object
obj = bpy.data.objects.new("ItaPoly", mesh)
obj.data = mesh

# Add Object
scene = bpy.context.scene
scene.collection.objects.link(obj)
```


##Bmeshを利用する方法
頂点とインデックスをもたせるだけであれば、Bmeshでやる必要はなさそう。

```python
import bpy
import bmesh

verts = [(-0.5, -0.5, 0), (0.5, -0.5, 0.0),(-0.5,0.5, 0.0),(0.5,0.5,0.0)]

# Create Empty Mesh & Object
mesh = bpy.data.meshes.new("mesh")
obj  = bpy.data.objects.new("ItaPoly", mesh)

# Add Object
scene = bpy.context.scene
scene.collection.objects.link(obj)

# Create Bmesh
bm = bmesh.new()

bm_verts = []
for v in verts:
    b_v = bm.verts.new(v)
    bm_verts.append(b_v)

v1 = bm_verts[0]
v2 = bm_verts[1]
v3 = bm_verts[2]
v4 = bm_verts[3]

bm.faces.new([v1,v3,v2])
bm.faces.new([v2,v3,v4])

# QUAD
#bm.faces.new([v1,v2,v3,v4])

bm.to_mesh(mesh)
bm.free() # Release Bmesh
```

## まとめ
Blenderでは、頂点とインデックスのデータを用意し、mesh.from_pydataに渡せばメッシュが生成できる。

##参考 (Blender2.8では動かない箇所あり)
[Blender 2.80: Scene and Object API](https://wiki.blender.org/wiki/Reference/Release_Notes/2.80/Python_API/Scene_and_Object_API)
[create mesh then add vertices to it in python](https://blender.stackexchange.com/questions/61879/create-mesh-then-add-vertices-to-it-in-python/61893)
[different-ways-to-create-mesh-objects](https://blenderartists.org/t/different-ways-to-create-mesh-objects/496955/2)
csvファイルの重複行を削除して出力する

#したいこと
DBにCSVファイルからデータ取り込みしようとしたら重複があってエラーになったので取り込み前にクレンジング

#使用するコマンドレット|
|コマンドレット|内容|
|:------|------:|
|Get-Content|csvを読み込む|
|Sort-Unique|ソートして重複削除|
|Sort-Object|ソート|
|Get-Unique|重複削除|

**2通りの方法がある** 

* Sort-Unique を使う方法
 
* Get-Unique を使う方法
 こちらを使う場合はソートそしてからじゃないと削除できないので
 Sort-Objectと併用する

#サンプルコード
```
#取込みファイルフルパス
[string]$filepath = $inifilefldr + $imptfile

#Sort-Uniqueを使う場合 
Get-Content -Path $filepath | sort -Unique

#Get-Uniqueを使う場合
Get-Content -Path $filepath | Sort-Object | Get-Unique -AsString
```
【PyQuery】リクエストにヘッダを含める

# はじめに
Pythonのpyqueryを用いてWebスクレイピングを行っているが、GETクエリ等にユーザーエージェント情報の含めたくなって調べたので備忘録として残しておく。

# 方法
pyquery関数にヘッダ情報を含める事ができるので、そこに設定する。

```python
from pyquery import PyQuery as pq
profile_query = pq(requests.get(profile_url, headers={'user-agent': 'pyquery'}).content)
```

# 参考
[こちら](https://pythonhosted.org/pyquery/scrap.html)の公式ドキュメントを参考。
LeetCode / Two Sum

（[ブログ記事](https://mhiro216.hatenablog.com/entry/2019/07/07/183244)からの転載）

19/7/7時点でLeetCodeの第一問目に掲載されている問題ですが、シンプルでいてなかなか歯ごたえのある良問。

[https://leetcode.com/problems/two-sum/]

Given an array of integers, return indices of the two numbers such that they add up to a specific target.

You may assume that each input would have exactly one solution, and you may not use the same element twice.

Example:

Given nums = [2, 7, 11, 15], target = 9,

Because nums[0] + nums[1] = 2 + 7 = 9,<br>
return [0, 1].

リスト中の2つの異なる要素を足してターゲットの値となる要素のインデックスを求めろ、という問題です。

#### 回答・解説

##### 解法1
まず、THE 力技。

```python
class Solution:
    def twoSum(self, nums, target):
        for i, n1 in enumerate(nums):
            if target - n1 in nums:
                for j, n2 in enumerate(nums):
                    if i != j and n1 + n2 == target:
                        return [i,j]
                        break
        return []
```

これは分かりやすいですね。単純にループを回していくだけです。<br>
ただ、時間計算量が$O(n^2)$になるのが難点。これを改良したのが次の解法。

##### 解法2

```python
class Solution:
    def twoSum(self, nums, target):
        d = {}
        for i,n in enumerate(nums):
            d[n] = i
        for i,n in enumerate(nums):
            tmp = target - nums[i]
            if tmp in d.keys() and d[tmp] != i:
                return [i,d[tmp]]
        return []
```

辞書（ハッシュテーブル）を用意し、一端各要素の値とインデックスをkey:valueとして格納しておいた後、targetと各要素の値を引いた値がkeyとして存在するか、参照していきます。<br>
これだと時間計算量は$O(n)$になります。ただ今度は空間計算量も$O(n)$に増してしまうのが難点ではあります。<br>
より簡潔に次のように書くこともできます。

##### 解法3

```python
class Solution:
    def twoSum(self, nums, target):
        d = {}
        for i,n in enumerate(nums):
            tmp = target - nums[i]
            if tmp in d.keys():
                return [i,d[tmp]]
            d[nums[i]] = i
        return []
```
VS Code拡張の開発に@types/vscodeが必要になった

久しぶりに[VS Code拡張](https://marketplace.visualstudio.com/items?itemName=PrsPrsBK.symbol-by-ctags)を修正しようとしたら`import`で`'vscode' モジュールなどない` というエラーを告げられてしまった。型情報が一切ない。

`node_modules/`を調べると存在したはずの型定義ファイルがなく、何か変更があったなということでリリースノートを見た。型定義ファイルを別のパッケージにしたという。

[Extension authoring - Visual Studio Code June 2019](https://code.visualstudio.com/updates/v1_36#_extension-authoring)

![2019-07-07_vscode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/223517/b26cfc0a-fe47-6e34-50a7-aca92c311dfc.png)

そういえば先に`yarn upgrade`していた。`yarn add @types/vscode -dev`したら問題解消した。したが、もうちょっと気づきやすくなっていてほしかった(書いてくれるだけありがたいが)……。

(追記) `package.json`の`engines`と型定義ファイルのバージョンを合わせる必要がある。面倒なので`engines.vscode`の方を`1.33.0`から`^1.36.0`に上げたが、最新版ではないVS Codeをサポートしたい場合は、今後うかつに`@types/vscode`のバージョンを上げられないということであり、多分忘れるなと思った。
RasbianでVDI風設定

# RasbianでVDI風に使用

我が家のRaspberryPiには、モニタを接続していない。
iPhoneやMacからXを使用するために、RDPの設定を入れる。

## パッケージインストール

今回は、Rasbian Lite構成でインストールしているためXが入っていません。
Xをインストールするところから、始めます。

```Linuxコマンド
sudo apt-get install --no-install-recommends xserver-xorg xinit
sudo apt-get install raspberrypi-ui-mods
sudo apt-get install xrdp
```

以上のコマンドで、rdpが使えるようになります。

## 日本語関係

```Linuxコマンド
sudo apt-get install fonts-ipafont fonts-ipaexfont fonts-takao ibus-mozc
```

日本語用フォントと入力IMEをインストールしておきます。

## ロケールの変更
```
sudo dpkg-reconfigure locales
```
 # ja_JP.UTF-8を指定する。
StringからDateに変換するときにException吐いてたのをどうにかした話

# はじめに
Android Studioでテストコード走らせているときは問題なかったのに、端末にインストールして動かしたら動かなかった。

# 対応(修正前)
タイムゾーンも入れていて、Patternを指定していたのが以下。
`"yyyy/MM/dd'T'HH:mm:ss.SSSX"`
もともと`"yyyy/MM/dd'T'HH:mm:ss.SSSZ"`って指定していたのだけど、Zがダメっぽくて上記のように対応していた。
これはテストコードでは動いていた。

# 対応(修正後)
最終形が以下。
`"yyyy/MM/dd'T'MM:dd:ss.SSSZZZZZ"`

# 終わりに
増やしたらいけるとかよくわからないが、Androidのソース依存ぽい。
「origin」って何ぞ？

```fatal: remote origin already exists.```というエラーが出た時に調べていたら
```origin```が既に存在しているので消してから再度登録してくださいとの解決策がありました。

この```origin```って何ぞ？となったので深掘りも込めて調べてみました。

参考
https://reasonable-code.com/git-origin/

originとは

リモートリポジトリのアクセス先に対してGitがデフォルトでつける名前です。

```$ git push origin master```
```$ git pull origin master```
```master```はデフォルトのブランチ。メインのブランチ。

つまり
```$ git push origin ブランチ名```
```$ git pull origin ブランチ名```

上記のようになります。

一度```origin```を設定すると更新はできない？のか、
削除してから再登録するのが、今のところ自分の解決策となっています。
StoryboardでScrollView

# contenViewをxibに
1.contenViewをxibにする
2.ViewControllerにはコードでaddsubView&制約追加

# contentViewをcontainerViewに

# 


# 参考記事
**・[【UIScrollView】Autolayoutで縦スクロール【Xcode8.x】 - Qiita](https://qiita.com/fromage-blanc/items/d480f2a45f0f60474531)**
・**[StoryboardでUIScrollViewを用いる際、ContainerViewを使うと便利](https://qiita.com/aryzae/items/c8356f9b7b048fc4dbea)**
・**[Storyboard 上で UIScrollView を AutoLayout を使って設定する](http://xyk.hatenablog.com/entry/2017/03/08/125132)**
・**[@1amgeekさんのツイート](https://twitter.com/1amageek/status/1020156491486015488?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1020156491486015488&ref_url=https%3A%2F%2Fqiita.com%2Faryzae%2Fitems%2Fc8356f9b7b048fc4dbea)**
**・[[iOS] Storyboard上でUIScrollViewを設定する : 雑食プログラミング備忘録](http://chicketen.blog.jp/archives/50471550.html)**
itertoolsで一つのリストから要素が同一のものも含めて重複を避けて組み合わせを作る

#やりたいこと
複数(例えば二つ)のリストから重複を避けて組み合わせをつくる．
ただし要素が同一のものも許すとする．
例えば`a = [1, 2, 3, 4]`という配列があるとき．

```python
a = [1, 2, 3, 4]
#このとき，こうしたい
result = [(1, 1), (1, 2), (1, 3), (1, 4), 
          (2, 2), (2, 3), (2, 4), 
          (3, 3), (3, 4)
          (4, 4)]
```
#よくある間違い
こういう時のために`itertools.product`があるんでしょと思って下のように書くと重複があることに気づく．

```python
a = [1, 2, 3, 4]
print(list(itertools.product(a, repeat=2))

#実行結果
[(1, 1), (1, 2), (1, 3), (1, 4), 
 (2, 1), (2, 2), (2, 3), (2, 4), 
 (3, 1), (3, 2), (3, 3), (3, 4)
 (4, 1), (4, 2), (4, 3), (4, 4)]
```

`(1, 2)`と`(2, 1)`などが重複している．
だからと言って`combinations`を使っても`(1, 1)`とかの同一ペアが取り出せないしな．．．という葛藤

#解決方法
リスト内の要素の組み合わせを`itertools.combination`であらかじめ指定してから直積をとる．
ただし二重の`itertools`なので実行速度的にはまずいのかもしれない．

```python
#二つ以上の組み合わせならcombinations第二引数の2を変えればよい
ans = []
for i, k in itertools.combinations(range(len(a)), 2):
    for x, y in itertools.product(a[i], a[k]):
        ans.append((x, y)]
print(ans)

#実行結果
[(1, 1), (1, 2), (1, 3), (1, 4), 
 (2, 2), (2, 3), (2, 4), 
 (3, 3), (3, 4)
 (4, 4)]
```

#まとめ
正直言って`combinations`よりも今回みたいに取り出したい時の方が多い気がするので，結構重宝するのではないかと思っている．
もっと早いやり方があったりしたら教えていたただきたいです．
Dockerの開発環境構築の方法

# はじめに
先日Dockerの開発環境構築をする機会があったのでその方法を忘れないようにまとめておきます。なお、必要になる技術や環境は以下の通りです。

・使用PC：MAC
・テキストエディタ：Visial Studio Code

# Dockerの開発環境構築の方法
## 1. Docker Hubからイメージをダウンロードする
① Docker Hub(https://www.docker.com/products/docker-hub) にアクセスしてDockerをダウンロードする。
② Finderを開き、Dockerを『ダウンロード』から『アプリケーション』にドラッグ＆ドロップする。
③ Dockerアプリケーションを起動させる。
④ 起動させるとクジラとコンテナの画像がでてくるので、クジラの絵をコンテナにドラック＆ドロップする

## 2. Visial Studio CodeからDockerを操作する
① 『command + shift + @』でターミナルを出す。
② Dockerの動作を確認する

```
docker version
```

③ Docker Hubからイメージをダウンロードする(今回は例としてubuntuというイメージをダウンロードします)

```
docker pull ubuntu:16.04
```

④イメージがダウンロードできているか確認する

```
docker images
```

⑤コンテナをつくり、名前をつける(ここでは『first-ubuntu』と命名)

```
docker run -it -d --name first-ubuntu :ubuntu:16:04
```

⑥起動しているコンテナを確認して、⑤でつくったコンテナが起動しているか確認する

```
docker ps
```

⑦⑤でつくったコンテナに入る

```
docker exec -it first-ubuntu pwd 
```
⇒ 『/(ルート)』が表示されれば⑤のコンテナのフォルダの頂点に入れたことになる

⑧⑤でつくったコンテナの中身を参照して、コンテナのフォルダに入れたか確認する。

```
docker exec -it first-ubuntu ls 
```

# おわりに
これでコンテナの中身を操作できます。細かい操作コマンドは別の記事でまとめます。
C#学習　-ラムダ式-

C#学習中のため、学習内容をメモしていく。
間違いやアドバイスがあればコメントからよろしくお願いします。

#ラムダ式
メソッドの引数としてメソッドを引き渡すことができたりする。
匿名メソッドを短く、簡単にしたものをラムダ式という。

指定した文字列を[]で囲んで表示を行うプログラムを、匿名メソッド、ラムダ式の場合で表すと以下のようになる。

匿名メソッドの場合

```C#
    class Program
    {
        static void Main(string[] args)
        {
            var data = new[] {"あいうえお", "かきくけこ", "さしすせそ" };
            var lt = new Program();

            // 匿名メソッド
            lt.ArrayWalk(data, delegate (string d)
            {
                return $"[{d}]";
            });
        }

        void ArrayWalk(string[] data, Func<string, string> output)
        {
            foreach (var val in data)
            {
                Console.WriteLine(output(val));
            }
        }
    }
```

delegateキーワードを利用してメソッドを直接埋め込んでいる。

ラムダ式の場合

```C#
    class Program
    {
        static void Main(string[] args)
        {
            var data = new[] {"あいうえお", "かきくけこ", "さしすせそ" };
            var p = new Program();

            // ラムダ式
            p.ArrayWalk(data, (string d) =>
            {
                return $"[{d}]";
            });
        }

        void ArrayWalk(string[] data, Func<string, string> output)
        {
            foreach (var val in data)
            {
                Console.WriteLine(output(val));
            }
        }
    }
```

delegateキーワードの代わりに=>で引数とメソッドの本体をつないでいる。

ラムダ式は条件によりさらに簡素化することができる。

・メソッド本体が一文の場合{ }を省略可能
・式の戻りがそのまま戻り値と見なされるので、return命令を省略可能

```C#
            p.ArrayWalk(data, (string d) => $"[{d}]");
```

・引数の型は暗黙的に推論されるので、ラムダ式では省略可能

```C#
            p.ArrayWalk(data, (d) => $"[{d}]");
```

・引数が1個の場合は、引数をくくるカッコも省略可能
　ただし、引数がない場合はカッコの省略は不可

```C#
            p.ArrayWalk(data, d => $"[{d}]");
```


#参考した本
独習C#


おわり。
Mobility 3.0読んだ時のメモ


クラウドコンピュータが出てエンジニア開発しやすくなるように、
車体システムがクラウド化されてエンジニアが参入できる日も来るのかもしれない。
これ以降メモ。

# 自動運転

caasは自動車業界の変化点の４つ。詳細はこちら。
https://www.toishi.info/car/case.html 

# 有名な会社

Uber Waymo
https://jp.techcrunch.com/2019/07/03/2019-07-02-waymo-is-now-allowed-to-transport-passengers-in-its-self-driving-vehicles-on-california-roads/


自動運転ランキング1位Waymo、2位GMクルーズ。トヨタは9位に。
https://www.news-caravan.com/automated-driving-vehicles-ranking-2018-by-navigant-research/


# 運送の変化

## GO-SEND
一般ドライバによるバイク便。
https://www.go-jek.com/go-send/

## GO-FOOD

フード配達。
https://mata-log.com/magazine/life/how-go-food/

## GO-MED
薬配達。
https://thebridge.jp/2017/05/go-jek-integrates-go-med-halodoc-app-20170517

## その他
エンジニアがサーバーを借りれるように、
車体のシステムを借りれる日も近い。

最近は
走行中に充電できるみたい。

車両保険は事故が減ると業界的に縮小。


# 事業ドメイン

グローバル　ローカル　デジタル　リアルで分けてプロットしていた。
マーケの指標に使える

グローバル×デジタルの領域はgafaがシェアを抑えてる。
ローカル×リアルの領域にairbnb uber Ola Grab ラクスルなどが進出。
リアルビジネスの領域に侵食し始めてる。
ドイツのインダストリー4.0で工場のIOT化が進んでいる。

gafaなどプラットフォーマーはデジタルで完結するビジネスから他も模索。
ローカル×リアルで今まで取れなかったデータを分析し、従来の領域とは異なる価値を創出できる。

# 車載システム android-auto
googleがandroid-autoを出してる。

https://japanese.engadget.com/2019/05/07/android-auto/

Android Automotive
https://monoist.atmarkit.co.jp/mn/articles/1905/08/news045.html

Android Automotiveと車故障検知システムOBD2をつなぐ。


#その他サービス

道路舗装の状況を可視化
https://drivenxdesign.com/NOW/project.asp?ID=16874

太陽の状況のAR
http://www.googblogs.com/sun-surveyor-shines-with-street-view/
複数移動時の経路探索
https://exmachina.ch/technical/multimodal-routing/

- スマートコインパーク

空いてることろを自分で登録する
https://api.smartparking.com/
日本版
https://apps.apple.com/jp/app/%E9%A7%90%E8%BB%8A%E5%A0%B4-%E3%82%B3%E3%82%A4%E3%83%B3%E3%83%91%E3%83%BC%E3%82%AD%E3%83%B3%E3%82%B0%E6%A4%9C%E7%B4%A2%E3%81%AA%E3%82%89-%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%91%E3%83%BC%E3%82%AD%E3%83%B3%E3%82%B0/id1091141986
Vue, Nuxtで使いそうな CSS フレームワークをまとめてみた

# はじめに

今後、新しいプロジェクトで、Vue,Nuxtを使いそうなので、調べたところ今時のフロントエンドはいい感じのライブラリーがたくさんあることを知りました。
どれが、どのようにいいとかが正直わからかったので、とりあえず公式サイトまとめを作ってみました。

# 対象読者

- Vue(Nuxt)を始めるよって人
- フレームワークたくさんあるので、ドキュメントをまとめたものをみたいって人

# フレームワークたち

更新
ここに全部のってました😂
https://codezine.jp/article/detail/11566

## Boostrap
言わずと知れた。
その昔、サイトのデザインを見ればこれはBootsrapでできているってわかったなぁ。

[公式サイト](https://getbootstrap.com/)

## Bulma
Flex Box レスポンシブ対応
[公式サイト](https://bulma.io/)

## Tachyins
軽量cssフレームワーク
[公式サイト](http://tachyons.io/docs/)

参考記事
[手軽にコーディングするならやっぱりBootstrapよりTACHYONSだなぁ](https://qiita.com/goqsystem_nagaoka/items/404a59cca1953621eac3)

## Element UI

デスクトップ用のフレームワーク(レスポンシブではない)

[公式サイト](https://element.eleme.io/#/en-US)

## iView
中華製のフレームワーク
Element UI と似ている
[公式サイト](https://www.iviewui.com/)

参考記事
[Vue.jsのUIデザインフレームワークにiViewを導入する](https://qiita.com/watkazuki/items/e31f35a998e1f9583fc4)
[Who's using iView](https://www.iviewui.com/docs/guide/introduce-en)

## vuetify
日本語記事が多い印象

[公式サイト](https://vuetifyjs.com/ja/)
参考記事
[Vueでもっと幸せになりたいあなたへ。VueのUIコンポーネントライブラリVuetifyのススメ](https://techblog.kayac.com/2018/12/12/080000)

## Buefy
Bulma をベースにした、vue用のフレームワークらしい
Bulmaと何が違うのかな？軽量なのかな？
[公式サイト](https://buefy.org/)

## Ant desing
管理画面用のフレームワーク
https://ant.design/docs/spec/introduce

## Tailwind CSS
UIをコンポーネントで提供するのではなく、classで提供している
いい感じのを作って欲しいという、ふんわりとした要件に使いやすいかも

参考サイト
[Nuxt.js + Tailwind CSS で爆速コーポレートサイト作成](https://medium.com/fabric-tokyo-engineering/nuxt-js-tailwind-css-%E3%81%A7%E7%88%86%E9%80%9F%E3%82%B3%E3%83%BC%E3%83%9D%E3%83%AC%E3%83%BC%E3%83%88%E3%82%B5%E3%82%A4%E3%83%88%E4%BD%9C%E6%88%90-da2564d73f90)


# 終わりに

パッとみ、簡素な記事になってしまった。。。
もっとUIを考えたいと思った記事でした。

### twitterもフォローよろしくおねがいします。 ！
https://twitter.com/yoshixj