OmniAICreator/Qiita-1.07M huggingface dataset:
3.3.1 ローカル・ロードバランサーを使うには？

（2016年時点での内容をアーカイブとして掲載しているため、一部の掲載内容が最新情報とは異なる場合がありますので、ご了承ください。最新のIBM Cloudのアップデート情報は[IBM Cloud アップデート情報](https://www.ibm.com/cloud-computing/jp/ja/cloud-update/) や [柔らか層本](https://ibm.ent.box.com/v/ibmcloud-yawaraka)をご参照ください。）

概要
ローカル・ロードバランサーの注文や設定は、カスタマーポータル上から行います。 具体例として、注文の仕方と、2台のウエブサーバーにHTTPのバランシング設定をする方法を説明します。
 

ローカル・ロードバランサーの注文方法
注文は、ロードバランサーの一覧画面で行うので、カスタマーポータル上の「Network」->「Load Balancing」->「Local」をクリックします。 ページ右上の「Order Local Load Balancer」をクリックします。

注文画面では「Location」のプルダウンメニューからロードバランサーを追加するデータセンターを選びます。 「Select VIP」から、注文したいロードバランサーをクリックします。 ここでは次の画面のように「Load Balancer 250 VIP Connections」をクリックし、「Continue」ボタンを押して、注文を進めます。

確認画面ではチェックボックスにチェックを入れ、「Place Order」をクリックすると注文は完了します。 そうすると、次の画面のようにロードバランサーの注文が進行中と表示されます。


それから、ブラウザの再起動ボタンをクリックすると、ロードバランサーの情報が新しく追加されていることが分かります。 「VIP Address」はロードバランサーが持つIPアドレスです。 IPアドレスをクリックして、設定画面に進めます。


バランシング設定の入れ方
バランシング設定行うためには、サービス・グループを作成したあと、バランシング対象となるサーバーの登録を行います。 例として、HTTPという名称のサービス・グループを作成し、2台のサーバーにバランシング設定を入れる方法を見ていきます。

ロードバランサーの一覧画面から、設定したいロードバランサーのIPアドレスをクリックすると、次のように初期画面が表示されます。 サービス・グループの作成は、「Add Service Group」をクリックします。

次に開く画面は、バランシングの詳細設定で、バランシング方式の選択や、ポート番号の指定ができます。 HTTPの設定がデフォルトで指定されているので特に変更しませんが、「This Groups %」の入力欄に「100」と入力します。 複数のサービス・グループを作成するときは、どのグループにアクセスを振り分けるか考えますが、今回の例ではHTTPのみですので、100としました。 追加するには「Add」ボタンを押します。

これでサービス・グループの登録が完了しました。 引き続き、バランシング先のサーバー登録を行います。

サービス・グループの「Add Service」ボタンをクリックして、どのサーバーに振り分けるかの設定を行います。 次の画面のように「IP Address」にはバランシングしたいサーバーのIPアドレスを選択し、「Port」は「80」と入れ、「Health Check Type」は「HTTP」を選び、「Add」を押します。


そうしますと、先ほどのサービス・グループの画面上に、設定したサーバーのバランシング設定が入っています。 複数台のサーバーでバランシングを行うには、必要なサーバーの数だけ「Add Service」から同様に登録します。

ロードバランサーが正常に動作しているかどうかは、ロードバランサーのIPアドレスにアクセスして確認できます。 たとえば、振り分け先サーバーがCentOS（LAMP構成）2台だったとして、SSHでサーバーにログインし、Apacheの起動と、ホスト名をファイルに出力します。
 
```
# service httpd start

Starting httpd:                                            [  OK  ]
# hostname > /var/www/html/index.html
```

それから、別のサーバーからcurlコマンドを使い、ロードバランサーのVIPにアクセスを試みます。 curlの実行結果で、次のようにホスト名が両方表示されていれば、正常に機能していることが分かります。
 
```
$ curl http://50.23.117.86
z-web01.example.com
$ curl http://50.23.117.86
z-web02.example.com
```

ローカル・ロードバランサーは、SSLオフロード機能付きを注文することができます。 SSLサーバー証明書をカスタマーポータル上で登録するだけで、ロードバランサー配下のウェブサーバーがSSL通信を利用できる便利な機能です。 SSLサーバー証明書は、一般のSSL証明書発行機関から購入できるほか、SoftLayerのカスタマーポータルからも購入できます。
Remote Desktopで"お使いの資格情報は機能しませんでした"と表示される場合の対処法

##概要##
Remote Desktopを使おうとしたときにクライアント側で"お使いの資格情報は機能しませんでした"と表示され、使用できなかったという問題に当たったので、どのように対処したかメモ程度に書いておきます。

##この対処法が有効である可能性のある対象者##
* Microsoft Accountを使用している(ローカルアカウントを使っていない)
* いつもWindows Hello, またはPIN でログインしていてパスワードで普段ログインしない人
* お使いの資格情報は機能しませんでした　と表示されている人（この表示をそもそも見たころなければ原因は違うところにあります。）

##環境##
＜接続先＞
Windows10 Pro
Version: 1909 
OS ビルト: 18363.720

＜クライエント側＞
Windows10 Pro
Version: 1909 
OS ビルト: 18363.720
（たぶん今回の問題はクライアント側は関係ない）

※接続先、クライアント側ともに同じバージョンです。

##対処法##
接続したいパソコンのログイン画面でサインインオプションを選択、パスワードの入力でのログインを選択し、パスワードでログインする

一回パスワードでログインしてみると、リモートデスクトップが嘘のように使えるようになります。

考えられる原因は、パソコン側が自分のマイクロソフトアカウントの資格情報を記憶していなかった、ということが考えられます。
一回パスワードでのログインを実行すると、資格情報をマイクロソフト側から取得して認証され、保存されるようです。
要するにWindowsバグですね。。

##これ以外の対処方法##
これ以外に考えられる可能性は
* そもそもユーザー名、パスワードが間違っている
* 資格管理の設定を変えなければならない
ということが考えられます。

以下のページを確認してみてください。
https://paddling-blog.com/%e3%80%8c%e3%81%8a%e4%bd%bf%e3%81%84%e3%81%ae%e8%b3%87%e6%a0%bc%e6%83%85%e5%a0%b1%e3%81%af%e6%a9%9f%e8%83%bd%e3%81%97%e3%81%be%e3%81%9b%e3%82%93%e3%81%a7%e3%81%97%e3%81%9f%e3%80%8d%e3%81%a8%e8%a1%a8
https://qiita.com/SkyLaptor/items/57bd36235a898a1351e3
VirtualboxのゲストOSにホストOSから（SSH）接続する


## ホストOSからゲストOSに（SSH）接続する

Virtualbox上のCentOSを直接操作することもできますが、ターミナル上でコピペができないなど、なにかと不便なのでホストのターミナルからゲストにログインし操作できるようにします（実運用ではよく行われる方法となります）。

しかし、Virtualboxでは標準ではホストOSとゲストOSが直接接続できない仕様になっているため、設定変更を行います。
またホストOSからゲストOSに接続するための方法はいくつかありますが、ここでは一旦「ポートフォワーディング」機能を利用してみます。

>その他の方法については[こちら](https://qiita.com/zaburo/items/e446f8655a7a28a93d58)を参考にしてください。

### ポートフォワーディングの設定

まず、ゲストOSが選択された状態で[設定]をクリックします。


![スクリーンショット_2020-03-30_8_02_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/9e33dcd0-5c7b-532c-77ed-3ff15f983cc2.png "スクリーンショット_2020-03-30_8_02_18.png")


[ネットワーク]を選択肢、続いて[高度]メニューを展開します。


![スクリーンショット_2020-03-30_8_02_41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/937e3351-6556-e7c9-a719-ae90cf664b18.png "スクリーンショット_2020-03-30_8_02_41.png")


下部にある[ポートフォワーディング]をクリックします。


![スクリーンショット_2020-03-30_8_02_51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/1202603a-f5f7-f3ed-84ec-54f4d12b0328.png "スクリーンショット_2020-03-30_8_02_51.png")


右上の[+]ボタン（わかりにくい）をクリックしルールを追加します。


![スクリーンショット_2020-03-30_8_04_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/2141f7eb-baaa-a8c8-b904-ee5eb1d72a75.png "スクリーンショット_2020-03-30_8_04_08.png")


設定が終わったらホストOSでターミナルを起動し、ホストにログインしてみます。
以下のようにローカルホストの2222ポートに対してssh接続をしてみます。

```bash
ssh -p 2222 root@localhost
```

するとゲストOSへのログインが成功するはずです。


![スクリーンショット_2020-03-30_8_07_26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55188/6a73f02d-fd18-cfa3-437b-a0693715a4ee.png "スクリーンショット_2020-03-30_8_07_26.png")


## マシンのIPアドレスを知る方法

### CentOS(7.x以上）

```bash
ip a
```


### macOS

```bash
ifconfig
```

## 考えよう

* ポートフォワーディングとは何か？
* ブリッジとは何か？（ホストオンリーアダプターとは何か？）
* ポート番号とは何か？
* システムポート、ユーザーサポート、ダイナミックポートとは？
HULFT IoT EdgeStreamingでプラグインを作成してみた【セットアップ編】(1/3)

#はじめに
こんにちは。よろず相談担当　すぎもん:yum:です。
今回は、HULFT IoT EdgeStreamingのSDKを使用したコンポーネント（アダプタ）の開発をやってみようと思います。全3部作で完結するよう記載してます。


#今回やること
今回は、第1弾としてHULFT IoT EdgeStreaming SDKを使用するためのセットアップ編として環境準備をしてみようと思います。既に環境あるよ～って方は、読み飛ばしていただき下記の【開発編】、【実行編】の記事を参考にしてみてください。

:arrow_forward: HULFT IoT EdgeStreamingでプラグインを作成してみた【セットアップ編】(1/3)
:arrow_forward: [HULFT IoT EdgeStreamingでプラグインを作成してみた【開発編】(2/3)](https://qiita.com/sugimon/items/67bdd6f610e03cdfcef2)
:arrow_forward: [HULFT IoT EdgeStreamingでプラグインを作成してみた【実行編】(3/3)](https://qiita.com/sugimon/items/93f47d7bd472a8b18e54)

#環境準備
今回、プラグインを作成してみた際に事前に必要となる事項を記載します。
※Windows PCを使用して試しています。

###必要なソフトウェア
各ソフトウェアをダウンロードし、インストールします。

|ソフトウェア|今回インストールしたバージョン|
|:--|:--|
|JDK|AdoptOpenJDK 11 (HotSpot)|
|ビルドツール|Apache ant 1.10.0 以降|
|Golang|Go 1.13 以降|
|EdgeStreaming|HULFT IoT EdgeStreaming Ver.2.1.0|
|SDK|HULFT IoT EdgeStreaming-sdk Ver.2.1.0|

ちなみにですが、私が試した環境は以下のとおりです。
・JDK（jdk 11.0.6.10 HotSpot)
・ビルドツール（Ant 1.10.7）
・Golang（1.13.7）
・HULFT IoT EdgeStreamingとHULFT IoT EdgeStreaming SDK（2.1.0）

###環境変数の設定
各インストールしたソフトウェアの環境変数を設定します。

・JDKのパスを設定します。
JAVA_HOMEに、JDKがインストールされているパスを指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458288/f39302de-a43f-7f90-e86e-a8fd23ede886.png)

・ビルドツールのパスを設定します。
ANT_HOMEに、ANTがインストールされているパスを指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458288/e939fee6-d869-b191-9577-ea0d9118dd9a.png)

・Golangのパスを設定します。
GOROOTにGolangがインストールされているパスを指定します。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458288/16d45ccf-ecf5-4926-28d6-0457f4785496.png)

・PATH環境変数の設定 
コマンドの実行パスを通すためPATH環境変数を設定します。
`%JAVA_HOME%\bin`
`%ANT_HOME%\bin`
`%GOROOT%\bin`

（設定例）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458288/eb5231d7-e33f-49e8-b68a-9ce8595fe65e.png)

コマンドプロンプトから、各ソフトウェアのコマンドを実行し実行パスの確認をします。
`java –version`
`ant –version`
`go version`

（実行結果）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458288/5c1809b1-19c3-7d2b-768e-d1b48a973f67.png)

画像のように、それぞれのバージョンが表示されていれば問題ありません。

###HULFT IoT EdgeStreamingのパスを設定
SDKを解凍した先にある「$SDK_HOME\dev\build.properties」ファイルを編集します。
dataspider.homeプロパティに、`HULFT IoT EdgeStreaming Ver.2.1.0`をインストールしたディレクトリパスを設定します。

```
######################################################################
# Build Configuration
#
#dataspider.home=<dataspider.server.installed.directory>
#encoding=<file.encoding>
#
######################################################################
dataspider.home=C:\\EdgeStreaming-v210
encoding=UTF-8
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458288/811ef71b-f262-f3cd-1640-97208a2bfd62.png)



##　
ここまでで、プラグイン作成の環境準備が完了しました。
次回以降、実際にプラグインの開発をしていきたいと思います。

#最後に
今回は、プラグイン作成前に必要となる環境構築をやってみました。必要となるソフトウェアのセットアップとパスが通れば開発環境の準備が完了です。開発編の方で実装をしてみたいと思います。

このブログでは、今後も技術の「よろず相談窓口」で相談を受けた内容や、誕生したワザをご紹介していけたらな、と思っています。

これからも是非チェックいただき、宜しければフォローをお願いします。

それでは、また！
ローコード開発ツールからAngularプロジェクトを自動生成

#Magic xpaとは？

Magic xpa Application Platform　(以下、Magic xpa)は、ローコード開発ツールといわれる開発ツールのひとつです。言語によるコーディングが不要で、アプリケーションの設計情報（モデル、テーブル、ロジック、画面設計など）をリポジトリに定義することで業務アプリケーションを開発できます。

「Magic xpa」の最新バージョン、「Magic xpa 4.6」の**Web Client**機能により、Magic xpaで開発した業務アプリケーションのWeb UI部をAngularプロジェクトとして自動生成できるようになりましたので、その概要ついてご紹介します。


## Web Client機能の特長

- Angularを搭載したSPA型のWebアプリケーションを簡単に作成できます
- ローコード開発により、高品質、スピーディーにSPA型のWebアプリケーションを構築できます
- １クリックだけで、Magic xpaで定義されたリポジトリ情報を元にAngularプロジェクトを自動生成します
- 純粋なJavaScript、HTML5、およびCSS3で構成され、ブラウザから動作します
- Angularの豊富な機能、ライブラリ、HTML5の技術をフル活用できます
- 
![angularPRJ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156846/5eff4d5b-3f50-7e75-a3b7-92f66bfecfb1.png)


###Web Clientを利用するための準備
以下のものを、インストールします
1．Node.js
	https://nodejs.org/en/download/

2．Angular CLI（※現在はAngular v8推奨）
	コマンドを実行→npm install -g @angular/cli@8.3.25

3．Visual Studio Code
	https://code.visualstudio.com/

4．Chromeブラウザ

5．Magic xpa 4.6

###Web Client 開発の大まかな流れ

- Magic xpaでのプログラミング
    - Magic xpaの開発環境（IDE）である、Magic xpa Studioで業務アプリケーションを作成します
    - ロジックの開発はMagic xpaでローコード開発で行います（各リポジトリを定義）
    - Magic xpa Studioの[Webアプリケーションの作成]を利用して画面のレイアウトを生成
        - ＊.css、＊.ts、＊.html の3ファイルが生成されます
        - 生成された画面コントロールとロジックとの紐づきは保持されています
        - コントロールの位置、大きさ、色などの設定はここではできません

- 外部エディタでの画面完成
    - 上記で自動生成されたAngularプロジェクトをベースに画面を編集します
    - ＊.css と ＊.html を外部エディタで編集（Visual Studio Code 推奨）し、UIデザインを仕上げます

##まとめ

Magic xpaのWeb Client機能により、B to B、B to Cの向けのSPA型のWebアプリケーションを効率よく作成することができます。UIデザインにはAngularの自由さを活かしながら、DB定義やバックエンド処理ロジック、Web UI間のセッション管理や暗号化、などはローコードで高速に開発することができます。
QuickSightのEmbedのバックエンドフロー

### QuickSightのEmbedのフロー

こんな感じかな。自分用メモ
userArnでいろいろな認証を指定することができサポートしているようだ

<img width="1194" alt="スクリーンショット 0002-03-30 9.10.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27932/f409ff3a-a4e2-af81-09bf-ad0e63c6ca17.png">

#### GetDashboardEmbedUrl

https://docs.aws.amazon.com/quicksight/latest/APIReference/API_GetDashboardEmbedUrl.html

UserArn
Amazon QuickSightユーザーのAmazonリソースネーム（ARN）。QUICKSIGHTIDタイプで使用します。 これは、次のいずれかとして認証されたアカウント内のすべてのAmazon QuickSightユーザー（リーダー、作成者、または管理者）に使用できます。

* Active Directory（AD）ユーザーまたはグループメンバー
* 招待された非フェデレーションユーザー
* SAML、OpenID Connect、またはIAMフェデレーションを使用したフェデレーションシングルサインオンを通じて認証されたIAMユーザーとIAMロールベースのセッション。
App Service Tips - タイムゾーンの設定

#概要
App ServiceのデフォルトのタイムゾーンはUTCとなっていますが、
これを変えたいケースがたまにあります。
その設定の備忘録。

App ServiceのホストOSがWindows ServerかLinuxかによって、
設定値が変わるんですね・・・。
⇒なんとなく仕組みを考えたら、そうだろうなーとは思うんですが。

※日本の標準時を設定する場合を例に書いています。

#参考ページ
ここを見てください。
https://docs.microsoft.com/ja-jp/azure/app-service/faq-configuration-and-management#how-do-i-set-the-server-time-zone-for-my-web-app


#設定方法
###App Service
App Serviceの「構成」を開き、アプリケーション設定で「新しいアプリケーション設定」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/a90db83d-540a-7cc4-46ed-25c3f12e5207.png)

以下のような画面が表示されるので、
名前にWEBSITE_TIME_ZONE、値にTokyo Standard Timeをセットし、OKをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/24d0dd55-623c-e9a4-ba33-d39e3ac0386d.png)

最後に保存をクリックし、設定を反映します。

なお、ここで設定する値は、以下のページに記載されている表の「Timezone」列の値を設定するとのこと。
https://docs.microsoft.com/en-us/windows-hardware/manufacture/desktop/default-time-zones


###App Service on Linux
App Serviceの「構成」を開き、アプリケーション設定で「新しいアプリケーション設定」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/a90db83d-540a-7cc4-46ed-25c3f12e5207.png)

以下のような画面が表示されるので、
名前にWEBSITE_TIME_ZONE、値にAsia/Tokyoをセットし、OKをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146789/2b973510-9ad2-8963-56bb-1cb48cc416c2.png)

なお、ここで設定する値は、以下のページに記載されている表の「TZ database name」列の値を設定するとのこと。
https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
備忘録メモ(github)

最近githubを使い出したのでここにメモ！
基本的には2-5のループ作業！(1は初回作成のみ)
###1.まずはローカルPC(作業していたPC)でローカルリポジトリを作成！

```
mkdir ディレクトリ名　←mkdrは新しくディレクトリを作成するコマンド
cd ディレクトリ名　←cdはディレクトリを移動するコマンド
git init　←git initはGitリポジトリを新たに作成するコマンド
```

###2.作成したコードのファイルをgitのインデックス(ローカルリポジトリ)に追加しよう！
※インデックスとはリポジトリにコミットする準備をするために変更内容を一時的に保存する場所のこと

```
git add コード(html,css,js....)
```

###3.インデックスに追加されたファイルをコミットしよう！
※コミットとは、ファイルやディレクトリの追加や変更をリポジトリに記録する操作のこと

```
git commit -m "add new file"　←ここでコメント残しとくと後で戻るときに楽。
```

リポジトリに対してファイルの追加が記録される。

ファイルが追加されたか確認する場合は

```
git status
```

###4.リモートリポジトリに反映させる前に、リモートリポジトリの情報を追加します。
※この情報は、GitHub上に作成した際の、リモートリポジトリのアドレスです。今回は例を使います。

```
git remote add origin https://github.com//awesome.git
```

###5.ローカルリポジトリをプッシュしてリモートリポジトリへ反映させる！

```
git push origin master
```

GitHubのユーザ名とパスワードを尋ねられる。
これで、GitHubへプッシュしてリモートリポジトリへ反映させることができた。
Select2のtagsの日本語入力のバグ解消方法

# 公式サイトもバグってる

<img width="1263" alt="スクリーンショット 2020-03-30 8.35.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264073/e14a7580-8a91-9190-8a51-c834aca4d291.png">


[公式サイト](https://select2.org/tagging)

## 原因はバージョン

原因はバージョンなので、バージョンをダウングレードしましょう。調査したら4.0.2まではバグが発生しないので、バグが発生しない最新バージョンの**4.0.2**を使いましょう！

```html
<!doctype html>
<html lang="ja">
  <head>
    <!-- Select2 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
  </head>
  <body>
  </body>
</html>
```

<img width="714" alt="スクリーンショット 2020-03-30 8.29.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264073/9a78385e-bce0-5d9d-c8e9-41bcc3c1af0b.png">


参考記事:[select2 v4で日本語対応してtagsのバグを回避した方法（根治ではない](https://qiita.com/bomber1201/items/e705c08def14132950c5)
Buffaloの古いルーター

HardoffのジャンクによくあるBuffaloのちょっと大きめの古いルータを並べてみました。これらはメモリやFlashが大きくZRouterの格好の餌食です。Ethernetは全て1Gigaです。

# WZR-HP-G300NH

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/104066/b39e35fd-0877-15bd-d02e-4d4321626549.png)

この機種はSOCにAR9132を使ったモデルでEthernet Switchには前期のRTL8366SRを使ったものと後期のRTL8366RBを使ったものがある。AR9131は2ポートethernet ifで両方ともSwitchに接続されています。FlashはCFIです。基板にはSDカードコネクタのパターンがありますが、どこに接続されているのか不明で使えません。おそらくこのモデルがこの筐体で最初だったのではないかと思われます。この筐体はアンテナが直付けで、HardOffのジャンクは、壊れていることが多いです。これより前のモデルはメモリが多くても32Mが一般的でしたが、このモデルは64Mもメモリを積んでいて、Flashも大きくなっています。TP-LinkのTL-WR1043ND v1と似た構成になっているようです。

HarfOffではアンテナ部分が壊れているものが散見されます。これはプラスチックの作り込み寄るところがあり、後々の機種ではコネクタに変更されています。

# WZR-HP-G301NH

この機種はSOCにAR9132を使ったモデルでEthernet SwitchにはRTL8366RBを使ったもので300HNの後期と同等のようです。

# WZR-HP-AG300H

この機種はSOCにAR7161を使ってEthernet SwitchにはAR8316を使ったものです。AR7161は2ポートEthernet IFで両方ともSwitchに接続されています。FlashはSPIで16Mが2個付いています。ここにあげた4つの機種でこの機種だけ筐体はデザインは似ているのですが違っていてACジャックも違います。NATルーターで使ってスループットも良いので、この並びでは一番オススメです。

WZR-HP-G301NHを同じような形なのですが、作り込みが違います。WZR-HP-G301NHは基板が上向きで空けられるのですが、WZR-HP-AG300Hは下向きになり、取り扱いが面倒です。

ちょっと残念なのはLEDがほとんど、WIFIチップ側についていて制御できない事です。

# WZR-HP-G302H

この機種はSOCにAR7242を使ってEthernet SwitchにはAR8316を使ったものです。AtherosのSOCはAR7240から100M Ethernnet switchを内蔵するようになったのですが、AR7242もSwitchが入って2ポートEthernet IFなのですがSwitchに接続されたEthernet IFは使えずAR8316に接続されたIFのみ使用できます。WAN/LANを作るにはSwitchにVLANを設定する必要があります。FlashはSPIです。シリアルポートは無効にされていて、ブラウザから有効にする必要がありました。

# WZR-600DHP

WZR-HP-AG300Hと同じハードウエアで、Firmwareが違うもののようです。

AtherosのSOCの型番は1桁目の2/5の頃はmips 4kで、7/9で24kになりました。型番は2桁目がジェネレーション3桁がバージョン4桁がレビジョンのような構成になるように思われます。このためAR9132->AR7161->AR7242の順に開発されたのではないかと思われます。古い時代にはAtherosはSwitchのソリューションを持っていなかったので、他社製品をリファレンスボードなどで使っていましたが、AR7242はSwitchを内蔵していますし、Switch単体のチップも作るようになりました。Atherosのmips 24kはこの後AR933xまで開発され74kでAR934xを開発してQualcommに買収されました。
Select2の日本語化 「No results found」

<img width="539" alt="スクリーンショット 2020-03-18 18.44.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264073/2bc54329-d175-2364-3f4c-3778ea7f4a73.png">


Select2の日本語化のCDNを読み込ませると良い。

```html
<!doctype html>
<html lang="ja">
  <head>
    <!-- Select2本体 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
    <!-- Select2日本語化 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/i18n/ja.js"></script>
  </head>
  <body>
  </body>
</html>
```


参考記事:[select2 v4で日本語対応してtagsのバグを回避した方法（根治ではない](https://qiita.com/bomber1201/items/e705c08def14132950c5)
Linux Mint でFolding@Homeして新型コロナウイルスの解析に貢献する

## 概要

Folding@Homeはウイルスのタンパク質解析などを行うために、個人が持っているPCの処理能力を使って解析しようというプロジェクトです。昔、UFOからの電波を解析する似たような考え方のプロジェクトがありましたね。

プログラムを実行するとFolding@Homeから解析するユニットを割り当てられ、それをダウンロードして解析処理を実行、終わったら結果をアップロードすることの繰り返しとなります。

Folding@Home自体は必ずしも新型コロナウイルス（COVID-19）に特化したものではなく、それ以前からあるようですが、現在は対象をデフォルトの `Any` に設定しておくと新型コロナウイルスを優先的に解析するようです。私も少しでもCOVID-19に早く終息してほしい、罹患しても薬で早く治って命を落とす人がいなくなればいいと思って自宅のLinuxPCで参加しています。

Windowsでやる方法は [Folding@Home Setup](https://qiita.com/Tayu0404/items/97fee464c58080b6c682)に書いておられますので、そちらを参照。
ここではLinux MintやUbuntuで貢献する手順を記します。


## インストール

必要なパッケージをダウンロード

```
$ wget https://download.foldingathome.org/releases/public/release/fahclient/debian-stable-64bit/v7.5/fahclient_7.5.1_amd64.deb
$ wget https://download.foldingathome.org/releases/public/release/fahcontrol/debian-stable-64bit/v7.5/fahcontrol_7.5.1-1_all.deb
$ wget https://download.foldingathome.org/releases/public/release/fahviewer/debian-stable-64bit/v7.5/fahviewer_7.5.1_amd64.deb
```

```
$ sudo dpkg -i --force-depends fahclient_7.5.1_amd64.deb
$ sudo dpkg -i --force-depends fahcontrol_7.5.1-1_all.deb
$ sudo dpkg -i --force-depends fahviewer_7.5.1_amd64.deb
```

自分はユーザー登録とかはせずに匿名で参加しました。
インストールが完了すると、デーモンモードで自動的に走ります。私はコマンドラインで行いたいのでサービスは止めておきます。

```
$ sudo systemctl stop FAHClient.service
$ sudo systemctl disable FAHClient.service
```
## CPUで実行

私のマシンは6コア12スレッドであるため、以下のように実行します。

```
$ FAHClient --client-threads=12 --smp=true --cpus=12
```

ちなみにユーザー登録してpasskeyを取得済みの場合は以下のように実行

```
FAHClient --client-threads=12 --smp=true --cpus=12  --user=<username> --passkey=<passkey>
```

`<username>` と `<passkey>` には自分が登録したユーザー名と、そのときメールで送られてきたpasskeyを指定。

ほどなくして、folding@homeのサーバーからユニットをダウンロードして解析が始まります。
解析が終わると結果がfolding@homeにアップロードされ、自動的に次のユニットのダウンロードに入ります。私のマシン（ 6コア / 12スレッド / 2.60GHz [ 最大4.50GHz ] / 12MBキャッシュ）では約１時間弱で１ユニット分の解析が終わります。

本当にちゃんとコアを使いこなしているか確認したいときはtopコマンドを見ればだいたいわかります。
左のターミナルで実行しているtopで `FAHCore_a7` のCPU使用率がが1200%近い数値を出しているので間違いなさそうです。 
![Screenshot from 2020-03-29 12-34-46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/13835/5642feda-531b-1415-b8fa-ef8c698f7a58.png)

止めたいときは `Ctrl-C` 、 走らせたいときは上記コマンドで走らせておけばいいです。
GPUで走らせるともっとは早いと思いますが、それには色々めんどくさそうなのでまた機会があれば。
【Homebrew】Homebrewで入れたものをコード化して管理する方法

## はじめに
Homebrewのコード化する方法を知ったので、備忘録として残します。
**PC入れ替えや不意な故障**で再度環境構築する際に非常に便利ですね:point_up:

※現在**Homebrewを使用中**の方が対象です:bulb:

## 環境
```yaml
OS: macOS Catalina 10.15.3
Homebrew: 2.2.11
```
## 手順
### 1. バックアップ
現在すでに`brew install`したものをBrewfileに書き出します。

```shell
$ brew bundle dump
```

※特に新しく入れる必要がなければ以降は無視でOKです、

### 2. 入れたいものをBrewfileに記入
例えば、`git`を入れたいなら以下のようになります。

```ruby:Brewfile
# ...略
brew "git"
# ...略
```

### 3. インストール
Brewfileに記載されていて、未インストールのものを入れます。

```shell
$ brew bundle 
```

以上です！超簡単！

あとは**Brewfile**を**Gitで管理**などバックアップ取っておけばPCがクラッシュしてもすぐ復旧できます:blush:

---
### オプション
#### Brewfile内のものをコマンドラインで確認

```shell
$ brew bundle list
```

#### Brewfile内にないものを一括アンインストール

```shell
$ brew bundle cleanup
```

#### Brewfile内でインストール/アップグレードすべきものがないかの確認

```shell
$ brew bundle check
```

---

### 参考：Brewfileの中身ってどんなん？

#### 公式より

```ruby:Brewfile
tap "homebrew/cask"
tap "user/tap-repo", "https://user@bitbucket.org/user/homebrew-tap-repo.git"
cask_args appdir: "/Applications"

brew "imagemagick"
brew "denji/nginx/nginx-full", args: ["with-rmtp-module"]
brew "mysql@5.6", restart_service: true, link: true, conflicts_with: ["mysql"]

cask "firefox", args: { appdir: "~/my-apps/Applications" }
cask "google-chrome"
cask "java" unless system "/usr/libexec/java_home --failfast"

mas "1Password", id: 443987910

whalebrew "whalebrew/wget"
```

:arrow_down:参考までに、僕が`brew bundle dump`した直後はこんな感じでした。

```ruby:Brewfile
tap "homebrew/bundle"
tap "homebrew/cask"
tap "homebrew/cask-fonts"
tap "homebrew/core"
tap "homebrew/services"
brew "readline"
brew "awscli"
brew "fd"
brew "git"
brew "git-flow"
brew "python"
brew "graphviz"
brew "kubernetes-cli"
brew "libiconv"
brew "libxml2"
brew "libxslt"
brew "lua"
brew "mysql@5.7"
brew "nodebrew"
brew "peco"
brew "postgresql", restart_service: true
brew "ruby-build"
brew "rbenv"
brew "redis"
brew "telnet"
brew "tfenv"
brew "tig"
brew "tmux"
brew "tree"
brew "vim"
brew "wget"
brew "yarn"
brew "zplug"
brew "zsh"
brew "zsh-completions"
```


## おわりに
最後まで読んで頂きありがとうございました:bow_tone1:

どなたかの参考になれば幸いです:relaxed:

## 参考にさせて頂いたサイト（いつもありがとうございます）
- [GitHub - Homebrew/homebrew-bundle: 📦 Bundler for non-Ruby dependencies from Homebrew, Homebrew Cask and the Mac App Store.](https://github.com/Homebrew/homebrew-bundle)
【Day39】積み上げ日記

##予定
■予定をマインドマップに書き出し
■現役WEBエンジニアの方に相談
■JavaScript
−Ajax
−JSON

##完了
■予定をマインドマップに書き出し
■現役WEBエンジニアの肩に相談
■JavaScript
−Ajax
−JSON

##学習時間
４h

##学習ポイント
■Ajax
ー非同期で通信を行い、ページ遷移をすることなく更新すること
例、旧ガラケー表示のマップ→Googleマップ

■JSON
ー画面遷移をしないため「データをたくさん詰め込んだもの」
ーJSONがないと、htmlファイルで画面遷移をしてしまう。

■WEBの従来と現代の違い
○従来
・レスポンスがHTML
・ページ全体がレンダリング
○現代
・レスポンスがJSON
・必要なところだけレンダリング

●現役エンジニアのおすすめ
○第２新卒市場で勝負
○勉強します、話せますPR
○オンラインサロン →人生逃げ切りサロン、雑食系サロン

##計画通り進んだか？
進んだ。現場で活躍されている方の意見はすごく参考になる。というのも、言語としてはJavaだがそれ以外の言語を勉強中であるということ。つまり、将来性うんぬんよりもまずはWEB業界に飛び込んで、実務を積むことが他言語習得やお金を稼ぐ上で大事な一つの要素だと感じた。
HTMLとCSSの基礎　学習記録３日目

![スクリーンショット 2020-03-30 6.13.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/609807/3e32a876-be8f-3989-a209-b34bbee3f2cd.png)

とりあえずドットインストールのはじめてのHTMLとCSSを終わらせた。
ただ説明聞いて打っただけなので、自分のためになっているのかな。

日記状態なのでNOTEでやったほうがいいのかもしれません
初心者によるプログラミング学習ログ 276日目

#100日チャレンジの276日目
twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
276日目は、

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">おはようございます<br>276日目<br>・xdデザインカンプからのサイト模写<br>・FLOU設計にあわせて、コード整理<a href="https://twitter.com/hashtag/%E6%97%A9%E8%B5%B7%E3%81%8D%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#早起きチャレンジ</a><a href="https://twitter.com/hashtag/%E9%A7%86%E3%81%91%E5%87%BA%E3%81%97%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%A8%E7%B9%8B%E3%81%8C%E3%82%8A%E3%81%9F%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#駆け出しエンジニアと繋がりたい</a><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a></p>&mdash; ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) <a href="https://twitter.com/yudapinokio/status/1244354779758747649?ref_src=twsrc%5Etfw">March 29, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
CakePHP4ドキュメントの翻訳手順

# 概要

CakePHP4がリリースされましたが、

CakePHP4の英語ドキュメント
https://book.cakephp.org/4/en/index.html
に比べ、CakePHP4の日本語ドキュメント
https://book.cakephp.org/4/ja/index.html
はまだ、CakePHP4に対応していない箇所が多く、CakePHP3の内容のままです。

実装に携わった箇所からCakePHP4の翻訳を進めているので、
その手順をまとめておくことにしました。

# 翻訳手順

CakePHPドキュメントは、以下のGitHubリポジトリで管理されています。
https://github.com/cakephp/docs

## ドキュメントページから直接修正

typo等の簡単な修正であれば、ドキュメントページから直接修正するのが早いです。

以下で詳しく解説されています。
https://qiita.com/Gro/items/f0b6846ff2a9498dcad3

※現在は、事前にforkしなくても、自動的にforkまでやってくれるようです。
※cakephp/docsにマージできる権限があると、PR作成されずに直接マージされてしまうらしい。

## git cloneして修正

ドキュメント全体を更新する場合は、実際に生成されたhtmlの体裁確認が必要になるため、git cloneしてhtmlをビルドして確認します。

### 参考にしたもの

- https://github.com/cakephp/docs/README.md
  - Dockerでのhtmlビルド方法が記載されている
- https://devblog.thebase.in/entry/2018/02/13/163843
  - Dockerでのhtmlビルド方法について詳しく解説されている

### 手順

- リポジトリをfork
- forkしたリポジトリをclone
  - `git clone git@github.com:[your-name]/docs.git`
- 4.xブランチに切り替え
  - `git checkout 4.x`
- 4.xをベースにブランチを作成
  - `git branch 4.x_ja_core-libraries_time`
- 翻訳作業を行い、commitする
- Dockerでhtmlをビルド
  - 詳細手順は後述 
- forkしたリポジトリにpush
  - `git push origin 4.x_ja_core-libraries_time`
- GitHub上でPRを作成

### Dockerでのhtmlビルド手順

※最初の1回目はdocker buildが必要です。

```
cd docs
docker build -t cakephp/docs .
```

Mac、Linuxでのビルド

```
docker run -it --rm -v $(pwd):/data cakephp/docs make html-ja
```

Windowsのビルド

git bashの場合

```
docker run -it --rm -v /$PWD:/data cakephp/docs make html-ja
```

Power Shellであれば、Windowsのフルパスを指定すればビルドできます。

```
docker run -it --rm -v C:\Users\your-name\docs:/data cakephp/docs make html-ja
```

docs/build ディレクトリにhtmlが生成されるので、ブラウザで確認します。

### forkしたリポジトリの更新手順

PRがマージされると、4.xブランチが更新されるので、forkしたリポジトリにも反映しておきます。

https://github.com/cakephp/docs をupstreamとして登録します。

```
git remote add upstream git@github.com:cakephp/docs.git
```

forkしたリポジトリを更新します。

```
git pull upstream 4.x
git push origin 4.x
```

# 翻訳時に気を付けていること

日本語ドキュメント
https://book.cakephp.org/4/ja/index.html
はまだCakePHP3の内容のままなので、
英語ドキュメント
https://book.cakephp.org/4/en/index.html
の内容を参考に、翻訳していきます。

git cloneした場合は、enディレクトリとjaディレクトリの差分を比べるのが良いと思います。

特に以下の点は変更されているので注意して確認します。

- 3.xの各マイナーバージョンごとの変更点
  - deprecated等も含む
- コード例
  - 関数の型宣言等のPHP7対応

翻訳の単語選定に迷った場合ですが、私は、
jaディレクトリ内をそのキーワードで検索して多い方を採用しています。
（多少不自然な訳でも、英語原文に忠実に訳しているパターンが多いようです）

Google翻訳等の翻訳ツールを併用することが多いと思いますが、
最近出たDeepL
https://www.deepl.com/translator
は、翻訳精度が高いのでオススメです。
Theme.AppCompat.Light.NoActionBar を使っているアプリの Toolbar のテキスト、アイコンの色を白くする。

こんばんは。普段業務と個人で Android をゴリゴリ書いています。
今回、Toolbar の icon を白くしようとして少しハマったのでその備忘録です。
かなり限定的な場面で使用するので需要はそんなにないかと思いますが、同じ場面ではまった方の力になれば幸いです。

## アプリの設定

```xml:AndroidManifest.xml
    <application
        android:allowBackup="false"
        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"
            android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
```

```xml:style.xml
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
```

上記のコードを見ていただければわかるのですが、ActionBar 無しのテーマを全体に適用し、構成しています。
使用しているのは `Theme.AppCompat.Light.NoActionBar` ですので、文字の色とアイコンの色は黒くなってしまいます。

##結論
結論ですが、 `Toolbar` に別で作成した `Toolbar` 用の スタイルを `android:theme` に設定してあげます。

```xml:style.xml
    ...

    <!-- Toolbar のタイトルを白くする -->
    <style name="Toolbar.Light.Text" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
        <item name="android:background">@color/colorPrimary</item>
    </style>
```

```xml:activity_main.xml
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- style ではなく theme に設定します -->
    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Toolbar.Light.Text"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
```

ポイントは `android:style` ではなく `android:theme` に `style.xml` に作成したスタイルを追加するところです。

`android:style` に設定した場合は指定した `View` （今回は `ViewGroup`)に**だけ**作用します。
一方、 `android:theme` に設定した場合は、特に `ViewGroup` の場合は、その子ビューに対しても作用します。

これでテキストとアイコンは白くなります。

##最後に
なんだかAndroidはアプリ内リソースを簡単に管理できるところは良いのですが、ちょっと複雑だなぁと改め思いました。
見ていただきありがとうございます。
GS2が使いやすくなったぞ！～CloudWeaveの紹介～

以前[GameServerServicesで魔法石を実装するv2](https://qiita.com/piffett/items/0a98f58d3087dc39d1f4)という記事を書かせていただきましたが、今回GS2のアップデートで、CloudWeaveと呼ばれる機能が追加され随分と使いやすくなりました。機能追加とあわせて紹介します。

## 良くなったところ

・いままでブラウザーのコンソールに入って様々な設定をしていたが、Unity側である程度用意してくれるようになったので、クライアントベースで開発できる

## 環境

## 利用方法

CustomパッケージのimportであたらしいSDKをimportします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106327/7956caf5-ecfb-f8b1-8099-34cd33e5da74.png)

GS2のメニューが追加されるので、そこからインストールを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106327/82a4f3c0-3eac-0f9a-0947-9dd5efdd2af6.png)

ログイン画面がでてくるのでログインします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106327/04ed3342-b038-9e2b-e1f6-8128ec3d7a73.png)

プロジェクトを選択します。

![コメント 2020-03-30 015742.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106327/9bc28c04-943d-4852-a304-c33321f1dae2.png)

チュートリアル画面が出てきます。これを読んでおけば大丈夫です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106327/a58c2ded-4c83-c201-48ae-45ed302d24f2.png)


## アカウント作成

　ここからCloudWeaveの紹介をします。

CloudWraveを選択します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106327/c1ad961b-9d42-ee1e-121c-671f23bb890d.png)

いろいろ出てきます。今回はアカウントのログイン機能を試しましょう。CloudWeave Loginを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106327/54c4925c-394e-5f12-57fc-ca9e0f3bc782.png)

チュートリアルが出てきます。これに従ってもらえばいいのですが、雰囲気を伝えるために作業を紹介します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106327/9742504b-5a1e-04bf-89cb-462df369bb8b.png)

Credentialオブジェクトを選択し、サインインして、プロジェクト選択などをします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106327/80eb94e0-051e-f6e5-b522-080a651ff20f.png)

インストールをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106327/cb02005f-091b-a2cf-1f64-890bbdf4fdd1.png)

設定値をサーバから取得を押して、スクリプトのpublic変数に必要なデータを入れます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106327/b9a7f1b6-6728-dbbe-6d3e-ddd7b33009c6.png)

ログインオブジェクトを選択してインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/106327/275d5c26-b9e4-faa7-2e02-de743ba78add.png)

あとは普通にSceneを動かしたらそれっぽい動作になるので、カスタマイズしてログインページを作りましょう！


## 総括

Inspector上で操作がほとんど完結するので、かなり使いやすくなりました。ぜひ試してみてください。
Docker-compose+Rails

# はじめに
Laravelで環境を構築するときは、Laradockが使えてとても楽だった。だけどrailsになると自分で作成しないといけないので、備忘録として作った。

## 目標
使いたいホストユーザーに合わせてユーザーを作成し、そのユーザーにsudo権限を付与したい。

## 環境構築
それでは環境を構築していく。パートは以下のように分かれる。
1.[下準備](#下準備)
2.[コマンド実行](#コマンド実行)
### 下準備
フォルダとファイルを用意していく。またここで使いたいユーザーを確認しておく。

```
$ mkdir ディレクトリ名
$ cd ディレクトリ名
$ touch Dockerfile
$ touch Gemfile
$ touch Gemfile.lock
$ touch docker-compose.yml
$ id
uid=xxx(ユーザー名) gid=xxx(グループ名) groups=xxx(グループ名)
```

次に、`Dockerfile`と`Gemfile`に書き込んでいく。
(vimを使っても良いが今回は省略)

```:Dockerfile
# コメントは削除してください
FROM ruby:2.5.3

# ユーザーを作成
ARG DOCKER_UID=1000 # IDとUSERは好みで変えてください
ARG DOCKER_USER=ubuntu
RUN useradd -m --uid ${DOCKER_UID} --groups sudo ${DOCKER_USER}

# インストールはrootで行う
RUN apt-get update -qq && \
    apt-get install -y build-essential \
                       libpq-dev \
                       nodejs

RUN mkdir /app # アプリ名は好みで変えてください
ENV APP_ROOT /app
WORKDIR $APP_ROOT

ADD ./Gemfile $APP_ROOT/Gemfile
ADD ./Gemfile.lock $APP_ROOT/Gemfile.lock

RUN bundle install

# 作成したユーザーに切り替える
USER ${DOCKER_USER}

ADD . $APP_ROOT
```

```:Gemfile
source 'https://rubygems.org'
gem 'rails', '5.2.2'
```

`Gemfile.lock`は空で良いので特にいじりません。

```docker-compose.yml
version: '3'
services:
  db:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: root
    ports:
      - "3306:3306"

  web:
    build: .
    command: rails s -p 3000 -b '0.0.0.0'
    volumes:
      - .:/app # アプリ名は対応さててください
    ports:
      - "3000:3000"
    links:
      - db
```

これで準備は完了です。

### コマンド実行

```
$ docker-compose run web rails new . --force --database=mysql --skip-bundle
```

ここで`database.yml`を修正します。ファイルは`config`というフォルダの中に入っています。

```database.yml
default: &default
  adapter: mysql2
  encoding: utf8
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: password # 追加
  host: db # docker-composeに合わせて変更
```

コンテナのビルド

```
$ docker-compose build
$ docker-compose up -d
$ docker-compose run web rails db:create
$ docker-compose up -d
```

このままではRailsのコマンドを叩くことができません。なのでそのためにコンテナに入ります。

```
$ docker ps
CONTAINER ID   IMAGE     PORTS                   NAMES
xxxxxxxxxxxx   app_web  0.0.0.0:3000->3000/tcp  app_web_1
# ここのコンテナIDをコピーしておいてください

$ docker exec -it xxxxxxxxxxxx /bin/bash
又は
$ docker exec -it app_web_1 /bin/bash
rootで入りたいときは
$ docker exec -it --user=root app_web_1 /bin/bash

# 以下のようになれば成功
ユーザー名@英数字12桁:/アプリ名$ railsのコマンド打ち込めます

# よく使うもの
$ docker-compose up -d # 起動
$ docker-compose restart # 再起動
$ docker-compose stop # 停止
```

## おわりに
プログラミング初心者でもroot権限というのはなんか怖い。
抜けや、これは危ないんじゃないかというところはあると思うので、気づいた方はコメントお願いします。


## 参考
1.[丁寧すぎるDocker-composeによるrails5 + MySQL on Dockerの環境構築(Docker for Mac)](https://qiita.com/azul915/items/5b7063cbc80192343fc0)
2.[とにかく簡単にDockerでRuby on Railsを動かしてみる(初心者向け)](https://qiita.com/ngo275/items/eedb7df1216df8890aa1)
3.[Docker コンテナ内に一般ユーザーを作成する](https://zukucode.com/2019/06/docker-user.html)
Pythonで毎日AtCoder #20

### はじめに
[前回](https://qiita.com/taxfree_python/items/82e0f9bb02bd096567d2)
投稿忘れてました。すみません。

### #20
[問題](https://atcoder.jp/contests/abc061/tasks/abc061_b)

**考えたこと**
道の両辺の町をカウントすればいいので、collectionsを使う

```python
import collections

n, m = map(int,input().split())
road = []
for _ in range(m):
    s = list(map(int,input().split()))
    road.append(s[0])
    road.append(s[1])

c = collections.Counter(road)
for i in range(1,n+1):
    print(c[i])
```
collectionsはlistと違って1から始まることに注意

### まとめ
ねむいので寝ます。おやすみなさい
AtCoder初参加で覚えていたらよかったと思ったコード（次回への反省１）

2020年3月28日。初めてAtCoderに参加してみた。

参加したコンテスト
AtCoder Beginner Contest 160
A～Cの３問を解き、Dで時間切れ。
思ったよりできなくて悔しかったので、
復習もかねて、ぱっとかければよかったと思ったコードをまとめる。

#すぐに書けるようになりたいコード集

##１行の標準入力に複数の数値が入力されるとき
```python
temp=input()
A=temp.split(" ")
A=[int(i) for i in A]
```
入力された数値のリストAをとする
![cap1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403057/aca34546-447e-3ea9-3722-234413a0af16.png)


##ループで空のリストに値を追加していく
```python
N=5
L=list()

for i in range(N):
  L.append(i)

print(L)
```
![cap2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403057/f60c5d0a-8253-9cc6-d49b-f924f29a3573.png)

##リスト内の最大値とそのインデックスを返す
そのまえに・・・
######ついでにランダムの数値リスト生成
```python
import random
random.seed(0)

L=[random.randint(0, 100) for i in range(5)]
print(L)
```
![cap3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403057/074ffd44-aa53-bc79-cc85-864a355a4f0b.png)



###最大値のインデックス
```python
#最大値
print(max(L))

#インデックス
maxind=L.index(max(L))
print(maxind)
```
![cap4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403057/064e1a15-ee83-fe0a-5a7b-225522ca4321.png)

###２次元配列の初期化
```python
#5行×4列
D = [[0] * 4 for i in [1] * 5]
print(D)

#3行4列目に1を代入
D[2][3]=1
print(D)
```
![cap5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/403057/b64dd0b2-8c2a-d2b7-4389-777277f69893.png)


###最後に
実装途中だった問題Dを完成させよう

・無向グラフ
・BFS（幅優先探索）
のキーワードについて調べておこう。

####2020/4/1追記
途中まで作っていたプログラムを最後まで作ろうと頑張ったが、かなり複雑になったので残念。素直にアルゴリズムの勉強をします。
↓↓グラフ構造のお勉強のために、自分でグラフのクラスを作って描画してみた
[pythonで自前のグラフ構造のクラスとその描画を作る](https://qiita.com/HAOPI/items/6c1173399af06aa083ce)
Vue-CLIのJSON表示ではまったこと　{{ xxx }}とv-text=xxxのバインディングの違い

# ソースと事象

Vue-CLIでaxiosを使ったAPI呼び出しをして、結果（JSON）データをv-textで表示させようとしたところ、
`[object Object]`と表示されてしまった。

よくよく調べたところ、データバインドさせる際の以下の方法による仕様の違いであった。
`<p>{{jsonData}}</p>` ・・・　文字列を表示
`<p v-text="jsonData"></p>` ・・・　オブジェクトを表示

公式ドキュメントには上記2つの方法は「同じ」と記載されていたため、v-textでJSON文字列が表示されない違いが判らなかったため、本記事で解決経緯を記載。

https://jp.vuejs.org/v2/api/#v-text

# 詳細
以下のソースを実行した場合、`<p>{{jsonData}}</p>`はaxiosで呼び出したAPIのレスポンスのJSON文字列が表示された。
しかし、`<p v-text="jsonData"></p>`は`[object Object]`と表示された。

```
<template>
  <div id="app">
　　<p>{{jsonData}}</p>
　　<p v-text="jsonData"></p>
  </div>
</template>

<script >
export default {
  data() {
    return {
      info: ""
    }
  },
  methods: {
　  callApi: function () {
       this.axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
　　　　　.then(response => (this.jsonData = response))  
    }
  }
};
</script>
```

＜実行例＞

```
{ "data": {・・・・}}
[object Object]
```

# 原因と解決方法

公式ドキュメントをよく見ると「要求事項：String」とある。（以下、公式ページの抜粋）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/584916/b1506d41-71e1-5496-ac3e-b40fe407396b.png)

つまり、v-textに設定する値は文字列として解釈されるため、JSONオブジェクトを渡しても、オブジェクトの中身を解釈してくれなかった。

JSONオブジェクトを文字列に変換してからバインドすることで解決した。

```
this.axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
　.then(response => (this.jsonData = JSON.stringify(response)))
　　　　　　　　　　　　　　　　　　　　＾＾＾＾＾＾＾＾
```


# 参考にさせていただいたページ

https://teratail.com/questions/191053
Eclipse インストール時に Failed to create the Java Virtual Machine.

## はじめに

Mac に Eclipse をインストールしようとしたら "Failed to create the Java Virtual Machine." って怒られました。

<img width="532" alt="install-error.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145721/ca29075f-f12f-1da1-2a73-9c8a0cea096c.png">

インストール時にこんな屈辱を受けたのは初めてだ

もちろん Java は入ってる

結論から言うと、案の定いつものやつ

`-vm` を ini ファイルに設定するあれだ

## 手順

*最初に注意点*

原因がよくわからないが、 ini ファイルを vim で修正するとこんなエラーが出る。

<img width="532" alt="usodaro.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145721/b3c1f8d2-9fa0-ccf2-d01b-37fda5da9eb3.png">

vim でやる限り、何としてでも "Eclipse Installer.app" をゴミ箱にぶちこんでやらないと気が済まないらしい。

ふざけんな、という気持ちを押し込めつつ、GUI でやるとうまくいきます。

謎い

### 手順概要

1. "Eclipse Installer.app" を適当な場所にコピー
2. Finder で "Eclipse Installer.app" を右クリック > パッケージの内容を表示 > `Contents/Eclipse/eclipse-inst.ini` をテキストエディタで開く
3. `eclipse-inst.ini` に Java8 のパスを設定

### 1. "Eclipse Installer.app" を適当な場所にコピー

通常 eclipse-inst-mac64.dmg をダウンロードしてクリックすると、eclipse installer が `/Volumes/Eclipse Installer` にマウントされるはず。

で、その中に "Eclipse Installer.app" があるので、それを適当な場所にコピーする。

ここは GUI でも CLI でもいい。

なお、 `/Volumes/Eclipse Installer` 以下は Read Only なので、コピーしないと編集できません。

### 2. Finder で "Eclipse Installer.app" を右クリック > パッケージの内容を表示 > `Contents/Eclipse/eclipse-inst.ini` をテキストエディタで開く

ここは特に補足説明なし。

前述の通り vim でやらないように

### 3. `eclipse-inst.ini` に Java8 のパスを設定

`eclipse-inst.ini` にこの二行を追加する。

```
-vm
/Users/tommarute/.jenv/versions/1.8/bin/java
```

※ もちろん Java のパスはご自身の環境のものを設定してください

なぜ Java8 かというと、自分の環境の最新 (14) だとインストーラーが動かなかったから。

Java9 だと動くのか、とかは試していない。

Java8 がない場合はこんな感じで入れてください。

```
$ brew tap AdoptOpenJDK/openjdk

# 古いコマンド
$ brew cask install adoptopenjdk8
# 新しい方
$ brew install adoptopenjdk8 --cask
```

蛇足ですが、最新の Java が入っている場合は [jenv](https://github.com/jenv/jenv) などの管理ツールがあったほうが良いでしょう。

### インストーラーを再実行

ini ファイルの修正をしたら Finder から "Eclipse Installer.app" をダブルクリックしよう。

いつもの画面が見れるはず。

<img width="555" alt="installer.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/145721/7bd2e694-e9ad-6807-e72d-3a4fbff3375e.png">

Thanks,
qiitaの限定公開一覧をわかりやすく

qiitaの限定公開一覧がページネーションされてしまっていてタイトルを探しづらいので、
qiitaのAPIを利用して超簡易的に自分用に一覧を作りました。
{APIトークン} と {自分のユーザ名} の部分だけは書き換えてください。

```php
<?
$res = exec('curl -H "Authorization: Bearer {APIトークン}" "https://qiita.com/api/v2/items?per_page=100&query=user:{自分のユーザ名}');
$json = json_decode($res);
foreach($json as $a){

	$tags = [];
	foreach($a->{"tags"} as $t){
		$tags[] = "[".$t->{"name"}."]";
	}
?>
<a href="<?= $a->{"url"} ?>" target="_blank"><?= $a->{"title"} ?></a>　<?= implode(" ", $tags) ?><br>
<?
}
?>
```

これで自分の一覧がページネーションなしで表示されます。
スタイルも特に何も当てていないので適当に当ててください。
Mac NodebrewでNode.jsをインストールする

# 目的

- Mac端末にHomebrewを用いてNode.jsをインストールする方法をまとめる

# 実施環境

- ハードウェア環境

| 項目 | 情報 | 備考 | 
| --- | --- | --- |
| OS | macOS Catalina(10.15.3) ||
| ハードウェア | MacBook  Air (11-inch ,2012) ||
| プロセッサ | 1.7 GHz デュアルコアIntel Core i5 ||
| メモリ | 8 GB 1600 MHz DDR3 ||
| グラフィックス | Intel HD Graphics 4000 1536 MB ||

# 実施条件

- Homebrewが使用できる状態になっていること。

# 実施方法概要

1. Nodebrewのインストール
1. Node.jsのインストール
1. 設定

# 実施方法詳細

1. Nodebrewのインストール
    1. 下記コマンド実行してNodebrewをインストールする。

        ```terminal
        $ brew install nodebrew
        ```
    1. 下記コマンドを実行してNodebrewのインストールを確認する。

        ```terminal
        nodebrew -v
        ```
1. Node.jsのインストール
    1. 下記コマンドを実行して最新の安定バージョンをインストールする。(エラーが出た方はこちら→[Mac Nodebrewを用いてNode.jsをインストールした時にエラーが出た話](https://qiita.com/miriwo/items/6d756f225b285f5b8053))

        ```
        $ nodebrew install-binary stable
        ```
    1. 下記コマンドを実行してNode.jsのインストールを確認する。

        ```terminal
        $ nodebrew --version
        ```
1. 設定
    1. 先に実行したコマンド`$ nodebrew --version`の出力の「# use a specific version number」の下部に記載されているコマンドを実行する。(「vX.X.X is not installed」というエラーが出た方はこちら→[Mac Node.jsのバージョン有効化する手順でvX.X.X is not installedと出力された話](https://qiita.com/miriwo/items/f1d980476b2fd2eeaad1))(X.X.Xはバージョン名)

        ```terminal
        $ nodebrew use vX.X.X
        >use vX.X.X
        ```
    1. 下記コマンドを実行してインストールしたNode.jsのバージョンが有効化されている事を確認する。

        ```terminal
        $ nodebrew ls
        ・
        ・
        ・
        >current: vX.X.X
        ```
    1. 先にインストールしたバージョンが「current:」の後に記載されていれば導入完了である。
    1. 下記コマンドを実行してパスを通す。

        ```terminal
        $ echo 'export PATH=$PATH:~/.nodebrew/current/bin/' >> ~/.bashrc
        ```
    1. 「.bashrc」ファイルがログイン時に読み込まれるように設定していない場合は下記の手順を実施する。
        1. 下記コマンドを実行して「.bash_profile」ファイルを開く

            ```terminal
            $ vi ~/.bash_profile
            ```
        1. 下記の内容を追記する。

            ```~/.bash_profile
            source ~/.bashrc
            ```
    1. 下記コマンドを実行して「.bashrc」ファイルを読み込む

        ```terminal
        $ source ~/.bashrc
        ```
    1. 下記コマンド実行してパスが通っている事を確認する(command not foundにならなければOK)

        ```terminal
        $ npm
        ```
Qiitaの記事とストックをバックアップする

# はじめに

最近PowerShellを使っているので力試しにQiitaの記事とストックをバックアップするスクリプトを作りました。
LGTM一覧は残念ながらQiita APIにないのでWebページをスクレイピングしないと取得できなさそうです。

# 動作環境

* Windows PowerShell 5
* PowerShell Core 6
* PowerShell 7

# 使い方

## 記事のバックアップ

[qiita-item-exporter.ps1](https://gist.github.com/shiena/ccbb5f2a382cc16b616b5848594539c1#file-qiita-item-exporter-ps1)

1. ファイルの先頭に`$userId`を自分のアカウント名に変更します。
1. 記事中の画像ファイルのURLはデフォルトでファイル名のみに置換しますが他のURLに置き換えたい場合に設定します。  
  たとえば`$imageFolder = "https://example.com/images/"`にすると記事中の画像のURLが以下のように置換されます。
  * 変更前 `https://qiita-image-store.s3.amazonaws.com/0/00000/ffffffff-ffff-ffff-ffff-ffffffffffff.png`
  * 変更後 `https://example.com/images/ffffffff-ffff-ffff-ffff-ffffffffffff.png`

```powershell:qiita-item-exporter.ps1
$userId = 'your-user-name'
$imageFolder = "" # replace image path
```

`qiita-item-exporter.ps1`を実行すると以下のような構造で記事と画像が保存されます。

```
- items
  +- readme.md                                   # 各記事へのリンク
  +- xxxxxxxxxxxxxxxxxxxx                        # 記事のID
     +- xxxxxxxxxxxxxxxxxxxx.md                  # ダウンロードした記事
	 +- readme.md                                # 画像のURLを置換した記事
	 +- ffffffff-ffff-ffff-ffff-ffffffffffff.png # 記事中の画像
	 +- meta.json                                # 作成日時、更新日時、タイトル、タグを保存したJSON
```

## ストックのバックアップ

[qiita-stock-exporter.ps1](https://gist.github.com/shiena/ccbb5f2a382cc16b616b5848594539c1#file-qiita-stock-exporter-ps1)

1. `$userId`と`$imageFolder`は`qiita-item-exporter.ps1`と同様の設定です。
1. ストックの総数はQiita APIで取得できないので[ストック一覧](https://qiita.com/stock)の一番下からページ数を確認して`$pages`を設定します。  
  このスクショでは`29`がページ数です。
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8995/54488712-1294-bef5-e3b4-865b6543ad25.png)

```powershell:qiita-stock-exporter.ps1
$userId = 'your-user-name'
$pages = 1 # your-stock-pages
$imageFolder = "" # replace image path
```

`qiita-stock-exporter.ps1`を実行すると以下のような構造で記事と画像が保存されます。

```
- stokcs
  +- readme.md                                   # 各記事へのリンク
  +- xxxxxxxxxxxxxxxxxxxx                        # 記事のID
     +- xxxxxxxxxxxxxxxxxxxx.md                  # ダウンロードした記事
	 +- readme.md                                # 画像のURLを置換した記事
	 +- ffffffff-ffff-ffff-ffff-ffffffffffff.png # 記事中の画像
	 +- meta.json                                # ユーザーID、ユーザー情報、タイトル、タグを保存したJSON
```

# さいごに

PowerShellは文法こそ独特なもののC#のLINQのようにパイプで文字列だけではなくオブジェクトを流せるのでデータの加工が楽でした。
Firebaseを分かりやすく説明するよ(｀・ω・)

この手の記事はたくさんあるのですが、自分用にちゃんと理解して説明できるように図解で分かりやすさを心がけて書いていきます。

# Firebaseってなんぞや
一言でいうと**「アプリを爆速開発できるクラウドサービス」**です。
2012年にFirebase社がサービス開始し、2014年にGoogle社によって買収されました。

## どんなアプリが開発できるの？
モバイルアプリケーションなら一通り作れます。
![スクリーンショット 2020-03-29 22.09.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288712/ef1a9179-490c-9290-728c-52fb695060e5.png)
![スクリーンショット 2020-03-29 22.09.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288712/7aa09516-0283-6d7c-28b2-20c5be2f7ee3.png)

引用：[ドキュメント｜Firebase](https://firebase.google.com/docs?hl=ja)

## なんで爆速で開発できるの？

Firebaseは「**mBaaS**(mobile Backend as a Service)」といわれるサービス提供モデルとなっています。
図の青色のボックスが自分で用意が必要なものです。
mBaaSはアプリケーション以外はFirebaseが用意してくれているため、面倒なサーバー設計や、構築作業などはすっ飛ばしてアプリケーション開発に着手できるのです。
![1c2f3573972edaa4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288712/6f0cb975-f5f8-49cb-f718-607e4677619f.png)

# Firebaseのプロジェクトについて
Firebaseの各エンティティは「Project > Application > Product」となっています。
Firebaseのプロジェクトを作成した時、内部的にはGCPのプロジェクトが作成されているため、課金や権限、識別子、削除操作などは共有されます。

![6cadb2cd-fe24-49cf-97aa-5b22f847c59bのコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288712/77cbb9f4-a3ca-688b-6af9-380a4665d3d0.png)

参照：[Firebaseのプロジェクトについて理解する｜Firebase](https://firebase.google.com/docs/projects/learn-more?hl=ja#best-practices)


# Firebaseのプロジェクト作成のベストプラクティス
重要な部分を抜粋。
> 1 つのプロジェクト内のすべてのアプリが、同じアプリケーションのプラットフォーム別のバリエーションとなるようにしてください。

例えば、２つのアプリケーションを提供していた場合。
![51731642-ec52-4083-b9a1-3597c7f99835.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288712/0c6a5696-cec8-25bf-e9c1-b2e9a36f2bf9.png)
アクセスするリソースは別々になるので２つのプロジェクトに分けましょうということですね。
![51731642-ec52-4083-b9a1-3597c7f99835のコピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288712/481bdfc4-444d-70a5-88b2-878e9f03ad20.png)


> アプリ間で同じデータと構成を共有しないのであれば、それぞれのアプリを異なる Firebase プロジェクトに接続することを強くおすすめします。

ここで言うアンチパターンは、アクセスするデータが別々なのに同じプロジェクトにまとめないでねと言うことですね。
![51731642-ec52-4083-b9a1-3597c7f99835のコピー2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/288712/19a2a883-b524-7300-bd93-1dae99220a9a.png)

参照：[一般的なベストプラクティス｜Firebase](https://firebase.google.com/docs/projects/learn-more?hl=ja#best-practices)

# まとめ
* Firebaseは「アプリを爆速開発できるクラウドサービス」
* モバイルアプリ開発なら一通り開発できる
* サービス提供モデルは「mBaaS」
* Firebaseプロジェクトを作成した時、内部的にはGCPプロジェクトを作成している
* Firebaseプロジェクトはアクセスするリソースごとに分けて作るのがベスト