OmniAICreator/Qiita-1.07M huggingface dataset:
【備忘録】コマンドラインAPIのいろは

## Introduction
普段から使っていたchromeのあのコマンドライン、調べてみたら実は便利機能が沢山あったのでメモ。▶︎<a href="https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference?hl=ja" target="_blank">コマンドラインAPIリファレンス</a>

テストで使ったページ
▶︎https://www.pokemon.co.jp/ex/shirts/

<img width="755" alt="スクリーンショット 2019-04-20 20.00.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199554/a1addae1-8241-3d65-70a8-463f1440fff7.png">

## chapter 01  - 検証と解説 - 

### $(selector)
>$(selector) は、指定された CSS セレクターを含む最初の DOM 要素への参照を返します。この関数は、document.querySelector() 関数のエイリアスです。

jQueryっぽい。document.querySelector()のエイリアスですが、結果としては、画像の通りです。

<img width="512" alt="スクリーンショット 2019-04-20 20.22.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199554/fa820c53-1acc-6e6f-c4c2-350206c976de.png">

### $$(selector)

document.querySelectorAll()的な感じですが、明らかに簡単に書けるので良いですね。同じ結果で比較してますが、これくらい楽になります。

<img width="511" alt="スクリーンショット 2019-04-20 20.23.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199554/80ac91e0-2ba8-bd6d-8fde-961d297a24bd.png">

### $x(path)

xpathを用いて、表示しているページのソース内のa要素を持つp要素みたいな、絞った取得ができます。開発テストに良い気がします。

<img width="511" alt="スクリーンショット 2019-04-20 20.29.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199554/ce878017-e3c1-7b1a-3007-d5bd68e39e8d.png">


### copy(object)

コピーできます。便利。

<img width="721" alt="スクリーンショット 2019-04-21 1.54.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199554/1aad8058-63ee-3ea4-0e11-077c443ba64a.png">


### getEventListeners(object)

>指定されたオブジェクトに登録されているイベント リスナーを返します。戻り値は、各登録済みタイプ（"click"、"keydown" など）の配列が含まれているオブジェクトです。各配列のメンバーは、各タイプに登録されているリスナーを記述するオブジェクトです。たとえば、次のメソッドは、ドキュメント オブジェクトに登録されているすべてのイベント リスナーのリストを表示します。

これも開発に便利そうですね。

<img width="511" alt="スクリーンショット 2019-04-20 20.35.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199554/b7d19b7a-4953-cad4-0d00-9f1eb549fba8.png">

### table(data[, columns])

見やすくなって よいすね◎

<img width="511" alt="スクリーンショット 2019-04-20 20.39.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199554/d583821c-1abc-bddd-a573-3d59c52b9d7b.png">
<img width="522" alt="スクリーンショット 2019-04-20 20.40.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/199554/cc7b4ca7-41a1-5579-8eb6-21497847c209.png">

## last chapter
意外と簡単なので、是非知識として使っていきたいです。
monacaのローカル開発環境構築

monacaのライブプレビュー便利ですよね
でも好きなエディタ使ったり、Gitで構成管理しながらやりたい所

monaca-cliを使えばそんな事も出来ます！！！！

Vimで編集、Chromeでレイアウト確認している例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266455/7621dc38-19de-593d-b7e9-7765462b15b2.png)



## ローカルで編集するメリット
- 好きなエディタで編集しながらブラウザでライブプレビューが出来る
- Gitなどの他のシステムとの連携もしやすい

## ローカルで編集するデメリット
- スマートフォン毎のレイアウト確認ができない

## Nodejsをインストールする
- npmでmonaca-cliをインストールするために必要
- Nodejs v8.11.0で動作確認済
- [ここ](https://nodejs.org/ja/)からダウンロードできます

## monaca-cliをインストールする

コマンドラインで以下コマンドを実行

```shell

$ npm install -g monaca --unsafe-perm
```

※rootユーザーでの実行時には--unsafe-permが必要な場合あり

## monaca-cliでmonacaにログインする

```shell
$ monaca login
# メールアドレスとパスワードを聞かれるので入力してEnter
```

## monacaのプロジェクトをローカルにクローンする

```shell
$ monaca clone
# どのプロジェクトか聞かれるので選んでEnter
# 作成するディレクトリ名を聞かれるので、入力してEnter
# ディレクトリ名を入力しない場合はプロジェクト名と同じ名前になります。
```

## ローカルの変更を適用する

```shell
$ cd [プロジェクトディレクトリ名]
$ monaca upload
```

## ローカルのプロジェクトを最新の状態にする

```shell
$ cd [プロジェクトディレクトリ名]
$ monaca download
```

- 変更のあったファイルのみダウンロードされて配置される様です

## サーバーを起動

```shell
$ cd [プロジェクトディレクトリ名]
$ npm run dev
```

## レイアウトを確認する

- サーバーを起動した状態で行います
- http://localhost:8080に接続する事で確認できます
- サーバー起動中にソースを変更した場合、ブラウザで表示しているページも即座に更新されます（ライブプレビュー）

### ローカルサーバを使ってレイアウト確認した時
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266455/13da1aab-1769-dcd0-d154-defc36c4f8d7.png)

### monacaのサイトを使ってレイアウト確認した時
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266455/b6c3cda9-0581-8403-af80-86ccdb9820eb.png)

## 所感
- ライブプレビューできるの良い
  - browsersyncのおかげ
- monacaいらなくない？
  - 初期テンプレートや各デバイスに向けて簡単にデプロイ出来るのはやはり便利だと思います
JavaとPythonを比較してみた！

[未来電子テクノロジー](https://www.miraidenshi-tech.jp/intern-content/program/)でインターンをしている@yuka_ponです。

Pythonを勉強していてJavaとよく似ているなと思ったことはありませんか？
コードの意味や書き方など、共通点はたくさんあります。
よく使われる言語としてJavaとPythonが挙げられますが、それと関係しているのでしょうか？

そこで、今回はJavaとPythonを比較して、それぞれの特徴をまとめてみました！

#JavaとPythonの関係
##Javaの特徴
そもそも、Javaにはどのような特徴と文法があるのでしょうか？

Javaは、携帯電話やスマホから銀行システムまで、幅広いアプリケーションやシステムに使われている言語です。
**Google三大言語**の一つでもあり、よく業務システムとして使用されることが多いです。
例えば、在庫管理システムで使われています。
その他にも、インターネットとの相性の良さからTwitterと連携してWebサービスの開発にも利用されています。

##Pythonの特徴
一方、Pythonの特徴は何でしょうか？

Pythonも、**Google三大言語**の一つです。
そのPythonは、データ解析やデータ分析でよく使われます。
それは、Pythonがプログラミング言語の中で最もシンプルな文法を用いるという特徴があるためです。
他の人が書いたコードを読めやすくさせるので、そのシンプルさから解析や分析サービスに使われるのです。
例えば、YouTubeやInstagramなどに利用されています。


#JavaとPythonの比較
##文法から見る勉強のしやすさ
さて、二つの言語のうち、どちらが勉強しやすいのでしょうか？

Javaは、**データ型**と呼ばれるものを使って、最初に指示を固定させるような文法を取ります。**（静的型付）**
一方、Pythonは、データ型をプログラムが実行されているときに指示を出す文法を取ります。**（動的型付）**

この二つが持つ文法の特徴は、上記で記した利用状況に基づいています。
Javaはシステム開発向けに使われる言語なので、最初に指示だしをする型を使い、Pythonは、解析や分析向けの言語なので、プログラムの実行中に応用の効くような指示を出す型を使うのです。

これらから、初心者にとって学びやすい言語は**Python**と言えます。
システム開発用のJavaは、汎用性が高い代わりに覚える量がたくさんあるためです。
それに比べて、Pythonは他の人が読めるようなコードを使用することから、非常に覚えやすく書きやすい特徴があります。

よって、勉強しやすいのは**Python**だと言えるのです。


以上より、JavaとPythonを比較してみました。
詳しくは、[コチラ](https://www.sejuku.net/blog/36782)。
Visual Studio Codeで「PHP実行可能ファイルが設定されていないため...」とエラーが出る場合の対処法

# 便利だけどいろいろ難しいVisual Studio Code

最近PHPの勉強を始めて、会社のお昼休みに勉強するだけでは物足りなくなり、PCを購入した。
早速PHPの開発ができる環境をつくって、いざVisual Studio CodeでPHPの記述をしていたところ、
Visual Studio Codeの画面下にこんな通知が出てきた。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402509/ef60ac69-6589-ecb5-0ae6-13243f2bca05.png)

クリックし、詳細を確認してみるとこんな感じ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402509/dc39ebdf-db1f-f0bf-57c3-21594a4e9a07.png)

ほう、、そういうことか。

要は、Visual Studio Codeくん
『ぼく、PHP実行ファイルの場所教えてくれないと、PHPのコード間違って記述しても注意できないよ？』
ってことみたい。

だから私たちは何をしたらいいかというと、
通知文に書いてある通り
「設定'php.validate.executablePath'を使用して PHP 実行可能ファイルを構成」すればいいということだ。

①画面上部の[ファイル]を開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402509/ec01b137-6082-1450-95e7-1987ab5f89a2.png)

②[基本設定]を開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402509/5fa33548-1297-13ed-dc75-a63ddf449504.png)

③[設定]を開く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402509/c13bf161-b71f-d872-63fe-7e6740ab8144.png)

④下にスクロールしていくと、「settings.jsonで編集」と出てくるのでクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402509/4ab21752-22a5-ebfc-9ab1-275e188b6826.png)

⑤settings.jsonに以下のように入力する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402509/be2a2f4b-5bfe-a7fc-5347-45740c6d8049.png)
→上記は私の例だが、php.exeがあるパスを指定してあげるのが正解。私はxamppをインストールしたので
xamppの中にあった。

これでコードがカラフルになって、ちゃんとVisual Studio Codeくんが間違いを教えてくれるように！！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402509/e1ba416d-2c10-e8df-8ea8-eb87bb995709.png)
ありがとう。。

これでまともにコードが書けそう。。
PythonのO365パッケージでメール一覧を取得する


# 目的

Microsoft GraphおよびOffice 365 APIと対話するためのシンプルなPythonライブラリ
[python-o365 A simple python library to interact with Microsoft Graph and Office 365 API\.](https://github.com/O365/python-o365)
を使ってメール一覧を取得してみます。



# 実践

[README\.md](https://github.com/O365/python-o365/blob/master/README.md)そのままです。

## インストール

```
pip install O365
```

## アプリケーションの登録

- [Azure App Registrations](https://portal.azure.com/#blade/Microsoft_AAD_RegisteredApps/ApplicationsListBlade)へアクセス
    - `＋新規登録`をクリック
       - 名前 `mail_receive`任意で入力
       - `任意の組織のディレクトリ内のアカウントと、個人用の Microsoft アカウント (Skype、Xbox、Outlook.com など)`を選択
       - リダイレクト URI ドロップダウンリスト「Web」のまま
       - `https://login.microsoftonline.com/common/oauth2/nativeclient`を入力
       -  `登録`をクリック（画面遷移が失敗することもあるけれど無視）
       -  `アプリの登録（プレビュー）`をクリックしてトップに戻る
    -  表示名`mail_receive`をクリック
       -  `アプリケーション (クライアント) ID`をコピーしてどこかにメモ
    -  `証明書とシークレット`をクリック
       -  `＋新しいクライアントシークレット`をクリック
       - 説明を`never`（任意）と書いて有効期限`なし`を選択して`追加`をクリック
       - 作った`クライアントシークレット`をコピーしてどこかにメモ（ここのコピー忘れたら作り直し）
    - `APIのアクセス許可`をクリック
       - `＋アクセス許可の追加`をクリック
           - `Microsoft Graph`をクリック
               - `委任されたアクセス許可`をクリック
               - `Mail.ReadWrite`,`Mail.Send`,`User.Read`,`offline_access`にチェックを入れて`アクセス許可の追加`をクリック

## アプリケーションの認証

```py:myauth.py
from O365 import Account
credentials = ('<メモした上記アプリケーション（クライアント）ID>', '<メモしたクライアントシークレット>')
account = Account(credentials)
account.authenticate(scopes=['basic', 'message_all'])
```

```
$ python3.6 -m venv venv
$ source venv/bin/activate
(venv) $ pip install O365
(venv) $ python myauth.py
Visit the following url to give consent:
<URLが出てくるのでここにブラウザでアクセス>
Paste the authenticated url here: 
```

- アカウントをクリック、`承諾`をクリック
- 空っぽのページが表示されるので、ブラウザのアドレスバーに表示されているURLをコピー
- `Paste the authenticated url here:`のところにURLを貼り付けてEnter

```
Paste the authenticated url here:<ブラウザのアドレスバーに表示されているURL貼り付け>
```

- `Authentication Flow Completed. Oauth Access Token Stored. You can now use the API.`と表示されれば成功


## アプリケーション実行

```py:app.py
from O365 import Account
credentials = ('<メモした上記アプリケーション（クライアント）ID>', '<メモしたクライアントシークレット>')
account = Account(credentials)

mailbox = account.mailbox()
inbox = mailbox.inbox_folder()
for message in inbox.get_messages(limit=5):
    print(message)
```

```
$ python app.pl
Subject: 適当なメール１
Subject: 適当なメール２
Subject: 適当なメール３
Subject: 適当なメール４
Subject: 適当なメール５
```

以上　\e
Pythonで月名を表示

基本的に自分用のメモとして作成。

初めてPythonを触ったので練習として
「入力した数値に該当する数値の月名（英語3字）で表記する」
というものを作成。
<br>



以下、作成したコード。

```python:month.py
#月名タプル
MONTH = ( 'Jan', 'Feb', 'Mar', 'Apr',
           'May', 'Jun', 'Jul', 'Aug',
           'Sep', 'Oct', 'Nov', 'Dec' )

#入力	   
print('数値に該当する月の英語名を表記します')
num = int(input('数字を入力してください：'))

#出力判定
if 1 <= num <= 12:
	print(MONTH[num-1])   #月名出力
else:
	print("その月はありません")  #エラー
```

<br>
<br>




実行するとこんな感じ。
（入力値：2）

```
数値に該当する月の英語名を表記します
数字を入力してください：2
Feb
```
<br>

1～12以外の数値を入力するとこう表示される。
（入力値：14）

```
数値に該当する月の英語名を表記します
数字を入力してください：14
その月はありません
```


<br>

入力を数字のみに制限するのは今後の課題かな。



<br>
<br>



-----------------------
2019/04/21
編集リクエストを頂いたためコードを編集しました。
全体的にすっきりして、見やすくなりました。
コメントについては敢えて多めに残しておきたいと考えてます。
色々とアドバイスを頂きありがとうございます。
VirtualBox HostOnly Networkの設定　はまった個所

下記を基にこの記事は書いています。

書籍：ハッキング・ラボのつくりかた
環境：VirtualBox6.0 + Windows10 + Kali-Linux-2019.1-vbox-amd64

書籍ベースで環境構築を行っていたのですが、ホストオンリーアダプターの設定が書籍通り出来ず、困っていました。

色々調べているとバージョンのアップデートごとに設定方法が違うことがわかりました（本にもありましたが、それでも探らないといけない）

私の場合は、Kali上でLANアダプターの設定はできなかったです

VirtualBoxマネージャーを開き、「ファイル」→「ホストネットワークマネージャー」より
作成及びプロパティの変更が可能でした
AngularJS（JavaScript）の非同期処理うざすぎ問題

今月から新規案件としてAngularJSを使っている開発案件に参画しました。
そこで個人的になんやねんこの仕様…と思ったポイントを適当にメモって今後に活かせればみたいなやつです。

※筆者はJavaScriptの知識ほぼなしです。（なんで参画できたか謎です。）

#非同期処理がうざい
JavaScriptの仕様として非同期処理ってのがあるみたいです。
うまいことPromiseとか使えば回避できそうなのですが既にできてるシステムの保守開発なのでそこまで大改造もできず困ってます。

###ポップアップブロックされるやつ
Chromeのポップアップブロックはオフにしているのにブロックされちゃう、って話です。
どうもclickイベントで発火した処理に非同期処理が入るとブロックされるみたいです。

```hoge.js
$scope.hogeButton = function() {
  $scope.getNanka.then(function(arg) {
    window.open("http://hogehoge.com/" + arg)
  });
}

$scope.getNanka = function() {
  //RESTでサーバーからデータ取ってくる
  return result;
}
```

こんな感じの処理書いておくとブロックされます。ChromeさんはクリックイベントはhogeButtonやろ！？ってなってブロックしちゃうみたいです。賢い。
めんどくせーと思いながら調べたところ一応の回避策としてボタンを置いた画面を開いた時点リクエストを投げてURLを作っておけばいいみたいです。一覧系の画面なのであんまり現実的ではないです。
なんやかんやあってこの対応はお蔵入りになりました。ポップアップ許可すれば一応開けるし。。。

#とりあえず
画面の挙動うまくいかんな～と思ったら非同期処理でうまいこといってないことが多かったです。
思った通りに動いてくれるJavaさんすき。ハムとハム太郎くらい違うって話は本当だったんですね。

今後もなんか気になったことあれば書いていきます。
Azureの無料アカウントでできることと注意点

# はじめに

アウトプットの訓練をするためにQiitaを始めました。
最初の投稿は、Azureの無料アカウントについて。
これからAzureを学ぶ人の手助けになれば嬉しいです。

# 無料アカウントとは

すべて公式のFAQに書いているのですが、
体験談を踏まえつつ、かみ砕いて解説してみたいと思います。

[Azure 無料アカウント FAQ](https://azure.microsoft.com/ja-jp/free/free-account-faq/)

- お試しで使える期間は最大30日間
- ¥22,500 のクレジットが付いてくる
- 一部サービスは無料で使える（例えば、B1Sサイズの仮想マシンなど）

試用期間が終了する条件は次のいずれかです。

- ¥22,500分使い切ってしまった場合
- 30日を経過した場合

最初、私は勘違いしていたのですが、
¥22,500分使い切ってしまったら、30日経ってなくても無料枠の範囲内のサービスすら使えなくなります。
とはいえ、使い切るにはよっぽどスペックの高いインスタンスを起動しっぱなしにしないと、って感じなので
個人での学習範囲であればこまめに停止しておけば余裕だと思います。

無料アカウントの登録にはクレジットカードが必須ですが、
使い始めただけでは課金されることもありませんし、試用期間が終了しても
サービスが使えなくなるだけで、勝手に課金開始されることもありませんので、安心して体験できます。

# 試用期間が終了するとどうなるの？

サービスが使えなくなり、「無料クレジットの期限が切れました」のタイトルで
以下のような通知メールが送られてきます。

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402286/7227ed65-ced0-375a-3702-c52d7994f3db.png width=70%>

「今すぐアップグレードする」から従量課金プランに更新ができます。
が、その時点から**試用期間中に作成したリソース**が課金対象になりますので注意が必要です。
まず、不要なリソースは削除してしまうことをオススメします。

なお、メールにも書かれているとおり、30日間は猶予があり、
試用期間中に作成したリソースが削除されることはありません。

# アップグレードせずに放置していたらどうなるの？

無料アカウントは削除され、「継続していただけず残念です」のタイトルで
以下のような通知メールが送られてきます。

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/402286/601c4b9b-c69c-2253-a283-7d00f4f3c27c.png width=70%>

もちろん、作成したリソースはすべて削除されます。
見落としがちですが、サポートリクエストの履歴も削除されます。（あれば）

「アップグレードするつもりだったのに！」と思ってもアカウントを復活させることもできません。
改めて、従量課金プランを新規で契約することになります。

# 無料アカウントの注意点

大きな注意点はありませんが、個人的には次の2点かと思います。

- ご利用は計画的に

¥22,500分もあれば、あれこれ実際に作って触って試せるので
AWSの無料枠と比較しても無料の範囲で試せることが多く、Azureのメリットでもあるのですが、
試せるのが30日に限られるので、当たり前ですが時間が取れる時期に計画的に利用すると効率が良いです。

- 仮想マシンのvCPUコア数の上限

無料アカウントの場合、vCPUコア数が「4」までしか仮想マシンを作成することができません。
例えば、BシリーズのVMの場合、以下のような構成であればOKです。

・B1S * 4台
・B1S * 2台 と B2S * 1台
・B2S * 2台
・B4ms * 1台

| サイズ | vCPU | 
|:------|------:|
| B1S   |     1 |
| B2S   |     2 |
| B4ms  |     4 |

上限を超えて仮想マシンを作成しようとするとエラーになります。
VMSSの自動スケール設定でスケールアウトさせた場合も同様です。

これはあくまで無料アカウントの制限であり、
通常は「20」が既定の制限で、サポートに申告すれば制限を引き上げてもらうことが可能です。

[Azure サブスクリプションとサービスの制限、クォータ、制約](https://docs.microsoft.com/ja-jp/azure/azure-subscription-service-limits)

仮想マシンのvCPU以外に無料アカウントの制限がないのかサポートに問い合わせてみたのですが、
公開情報はないそうです。

経験上、他に制限に引っかかったことはありませんので、それほど気にしなくても良さそうです。
Tera Termのおすすめ設定

Tera Termは非常に便利なんですけど、たまに「?」と思う挙動があってその度にググって設定変えてるのでメモ。メニューでの設定とTERATERM.INIの記述を併記してます。

#1.必須
##Deleteキーの挙動を直す
設定>>キーボードの設定>>DELを送信するキーの"Deleteキー"のチェックを外す

```
; transmit DEL by Delete key (on/off)
DeleteKey=off
```

##ビープを鳴らさずにターミナル画面をフラッシュさせる
Wimdows10がビープの代わりに鳴らす音がうっとうしいので。メニューには見当たらず…。

```
; Beep by BEL (on/off/visual)
Beep=visual
```
##貼り付け時に末尾の改行を消す
プロンプトに貼り付けするとたまに改行までペーストして実行してしまうので。
設定>>その他の設定>>コピーと貼り付け>>"貼り付け時に末尾の改行を削除する"のチェックを外す

```
; Trim trailing new line character when pasting
TrimTrailingNLonPaste=on
```
##画面リサイズ時の画面クリアを無効化
設定>>その他の設定>>全般>>"ウィンドウサイズ変更時に表示内容をクリアする"のチェックを外す

```
; Clear screen when window is resized
ClearOnResize=on
```
#2.ログ関係
仕事で使う時には必須。

##自動的にログ採取を開始する
設定>>その他の設定>>ログ>>"自動的にログ採取を開始する"をチェック

```
; Auto start logging with default log file name.
LogAutoStart=on
```

##標準ログファイル名
デフォルトだと分かりにくいしすぐ消えるので。以下は良く見かける設定。
設定>>その他の設定>>ログ>>標準ログファイル名を"%Y%m%d-%H%M%S-&h.log"

```
; Default Log file name. You can specify strftime format to here.
LogDefaultName=%Y%m%d-%H%M%S-&h.log
```
##ログにタイムスタンプを付ける
設定>>その他の設定>>ログ>>"タイムスタンプ"をチェック

```
; timestamp flag for Log (on/off)
LogTimestamp=on
```

##ログ取得時に表示されるダイアログを消す
設定>>その他の設定>>ログ>>"ダイアログを非表示"をチェック

```
; without transfer dialog flag for Log (on/off)
LogHideDialog=on
```

#3.人による
##リンクを開くブラウザをChromeにする
(メニューに見つからない…)

```
; Launched Browser
ClickableUrlBrowser=chrome
ClickableUrlBrowserArg=
```

##メニューバーを隠す
メニューはCtrl+左クリックで出来る
設定>>ウィンドウ>>"メニューバーを隠す"をチェック

```
; Hide menu bar and enable popup menu (on/off)
PopupMenu=on
```

#最後に
他にも役に立つ設定あれば教えてください
char*とchar[]についてのメモ

###概要
C言語の文字列変数の`char*`と`char[]`の違いを検証したので、その結果をメモとして残します。
検証結果についてはメモとして残しているだけなので`#include <stdio.h>`などは省略し、要点のみを記載します。

###環境
- Windows 10 Home
- gcc (MinGW.org GCC-6.3.0-1) 6.3.0

###検証結果

[C言語はメモリ上では4つの領域に分かれています。](http://oresi.hatenablog.com/entry/2014/04/24/133315)

`char*`で宣言された変数に代入されるのは**定数領域上**の"name"文字列の先頭アドレスです。
~~`char[]`で宣言された変数に代入されるのは**スタック領域上**にコピーされた文字列の先頭アドレスです。~~

**修正**
char[]`で宣言された変数に代入されるのは定数領域上の文字列からコピーされた{'n', 'a', 'm', 'e', '\0'}です。

@fujitanozomuさん、ご指摘ありがとうございます。

```c
    char *literal  = "name"; // 定数領域上に生成された"name"文字列の先頭アドレスを代入
    char stack[]   = "name"; // スタック領域にコピーされた"name"文字列を代入
```

変数の配置されたアドレスを表示させると、配置されているアドレスがそれぞれ異なることが分かります。

```c
    char stack[] = "foo";
    char _stack[] = "bar";
    char* literal = "foo";
    char* _literal = "bar";

    printf("%p\n", stack);
    printf("%p\n", _stack);
    printf("%p\n", literal);
    printf("%p\n", _literal);
```

`char*`型で宣言された変数には下記の性質があることが確認出来ました。

- ポインタの保持しているアドレスを操作できる。
- 文字列に対する操作は不可。

```c
    char *literal  = "name";
    
    ++literal;       // インクリメントされたポインタは先頭アドレスの次(a)の値をさす
    --literal;       // ポインタの保持しているアドレスを先頭(n)に戻す

    // ++(*literal); // 定数領域の文字列に対してインクリメントを行うため、実行時エラー
```

`char[]`型で宣言された変数には下記の性質があることが確認出来ました。

- ポインタの保持しているアドレスを操作できない。
- 文字列に対する操作は可能。

```c
    char stack[] = "name";

    // ++stack;    // 配列に対してインクリメントは不可
    ++(*stack);    // 向き先の値に対して操作可
```

またどちらで宣言されていても読み取りは出来ます。

```c
    char *literal = "name";
    char stack[] = "name";

    printf("%c\n", literal[1]);
    printf("%c\n", stack[1]);
    printf("%c\n", *literal + 1);
    printf("%c\n", *stack + 1);
```


- 参考記事
    - https://qiita.com/1024chon/items/f17ee5afc6644cfd33f1
    - http://www9.plala.or.jp/sgwr-t/lib/strrchr.html
    - http://www.kusa.ac.jp/~kajiura/c/hairetsuto/newpage1.htm
    - http://d.hatena.ne.jp/yasutomo57jp/20091022/1256185486
IntelliJ 設定覚書

#エンコード
* Global Encoding
* Project Encoding
* Default encoding programing files
* Native to Ascii
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202844/c9ada7d8-ee0b-2b39-f558-525583225c80.png)

#改行設定
* Line separator
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202844/0d078c34-4d84-c17e-ae90-0e9eab083d09.png)

#自動ビルド
* Build project automatically
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202844/c9a42717-1a9c-a434-1742-ab00a62b5484.png)
* compiler.automake.allow.when.app.running
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202844/7a5ad9bf-9702-07cc-5bcd-30f23854f2e5.png)
* Run/Debug configurations
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/202844/80d99888-9ae2-a0db-08e2-0c8d80a33725.png)

#Git接続設定
![IntteliJでGit接続(Qiita別ページ)](https://qiita.com/kotaroxx0909xx/private/a3318c485e085c60edf7)

#Lombok設定
Spring bootのプロジェクト作成時などにLombokを選択していない場合、個別にIntteliJにLombokのプラグイン設定が必要。
1. CTRL+ALT+SでSettingsを表示する。
1. 左ンペインよりPluginを選択する。
1. 「Blowse Repositories」を押す。
1. 「lombok」で検索する。
1. 「Lombok Plugin」をInstallする。
Apex 纏め一覧

#作成 
- [HttpCalloutMock と StubProvider のお試し](https://qiita.com/xuwenzhen/items/bc76b99562225eed8b65) 
- [テストクラスにApex電子メール送信の検証方法](https://qiita.com/xuwenzhen/items/696f0183323bb061de38)
- [Apex で組織の設定情報取得方法について](https://qiita.com/xuwenzhen/items/09ffe0cd3d4f7bc3813b)
- [HTML5 の canvas で電子サインのお試し](https://qiita.com/xuwenzhen/items/62a3a4580a564035ca21)
- [Apex OrgLimits クラスで組織制限を取得する](https://qiita.com/xuwenzhen/items/2fcda26c07665f085e38)
- [Apex Design Patterns(Facade)](https://qiita.com/xuwenzhen/items/7969c92b7d702c7856f3)
- [Apex Design Patterns(Template)](https://qiita.com/xuwenzhen/items/ee73498a332b3be8180c)
- [Apex Design Patterns(Strategy)](https://qiita.com/xuwenzhen/items/e6b6df9eb9b9b1d62a79)
- [Apex Design Patterns(Singleton)](https://qiita.com/xuwenzhen/items/42ff88456b73ab0c2ccb)
- [Apex Limits クラスで実行ガバナ制限を取得する](https://qiita.com/xuwenzhen/items/b81764e6106dd1dc0f71)
- [実行コンテキスト判定について](https://qiita.com/xuwenzhen/items/8d650d32dff444868b5d)
- [Apex テスト 備忘録](https://qiita.com/xuwenzhen/items/95a0e1fe768b4d5db7dd)
- [Apex アノテーション備忘録](https://qiita.com/xuwenzhen/items/76f3b09cfedfb86a06d8)
- [Apexログ出力制御について](https://qiita.com/xuwenzhen/items/4ea3c778043f082bfd92)
- [Apexテストデータ作成の汎用化](https://qiita.com/xuwenzhen/items/b810e7ed1f62a2c6dc31)
- [Apex Trigger Lightweight Framework](https://qiita.com/xuwenzhen/items/38b6b642ea64b86e949a)

#参照
- [Salesforce Schema.系 まとめ](https://qiita.com/s_hayashida/items/517da55c05c6099805dc)
- [Apex テストクラス](https://qiita.com/TaigarAndDragon/items/343dad5ed06fd538a711)
- [Salesforceガバナ制限を回避するためにやってきたこと](https://qiita.com/comefigo/items/48f05d8fe4a3959911f4)
- [[Apex] なぜ Account account = new Account(); と書いてはいけないのか](https://qiita.com/TaaaZyyy/items/f92c73c2a79366d3fa64)
Next.js を使って Chrome からインストール可能な PWA(desktop PWA) 環境を2秒で作ります(ついでに now で remote でも動かせるようにします)

この blog は下記へ移行しました。しかるべき期間が過ぎたらこちらの記事は削除しようと思います。
https://lidqqq.dev/blog/c63921c81b27ca419b21
Rails モデル データベース 基礎

#Rails基礎知識

+ データベース
+ モデル

###データベース
ある特定の条件に当てはまる「データ」を複数集めて、後で使いやすい形に整理した情報のかたまりのことを表します。
例えば、ジムの会員情報をデータベースで扱うなら「会員番号」「名前」「住所」「会員タイプ」等の情報の保存が必要になります。
この情報を元にデータベースのテーブルを作成してその中のカラムとレコードに情報が格納されていくようなイメージです。

※ジムのテーブルを作成したとします。

|会員ID |名前  |住所  |会員タイプ|
|------|------|------|------|
|1  |山田　太郎  |〇〇県〇〇市 |フルタイム|
|2  |田中　誠一  |〇〇県〇〇市 |ナイトタイム|
|3  |佐伯　敬太  |〇〇県〇〇市 |デイタイム|

##テーブル
上記の表の塊がテーブルといいます。
###カラムとレコード
表の縦の列をカラムといい、横の列をレコードといいます。
###DB設計
アプリケーション開発において大半のデータはデータベース内に保持されます。どのようなデータをどういう形式で設計するかによって、品質は大きく左右されます。例えば、設計図なしに家や車はつくれないのと同様に、データベース設計なしにデータベースを作成するとサービスの重要な部分が成り立たなくなります。
####DB設計の手順

+ テーブルの抽出
+ テーブルの定義
+ テーブルの構造を整理
+ ER図(テーブルの図)の作成

今回は、簡単なつぶやき投稿アプリの為、3つのテーブルを作成します。
##モデル
コントローラでモデルを利用してテーブルからデータを引き出し、ビューに渡すことになります。
モデルファイルを使用するとRailsで、データベースのデータを簡単に扱えるようになります。
###モデルを生成する
それでは早速、モデルを生成していきましょう。Railsで、生成するコマンドは以下でしたね。

```
$ rails g
```
モデル生成の場合は、

```
$ rails g model モデルクラス名(全て小文字)
```
コントローラー同様にこのコマンドを実行するだけで簡単に生成できます。
app/models/〇〇.rb
###謝って作成したモデルを削除する場合

```
$ rails d model モデル名
```
###マイグレーション
モデルを生成したときに「テーブルの設計図」となるマイグレーションファイルも自動で生成されています。ここまででは、まだテーブル生成されていなく、マイグレーションを実行してはじめてテーブルが生成されます。
db/migrate/
##マイグレーションファイルにテーブル設計記述

```
class Tweet < ApplicationRecord
  def change
    create_table :tweets do |t|
      t.string :name
      t.text   :text
      t.text   :image
      t.timestamps null: true
    end
  end
end
```
tweetテーブルにname、text、image、timestampのカラムを設計する記述ができました。
設計ができたら、コマンドでマイグレーションを実行してテーブルを作成しましょう。

```
$ rake db:migrate
```
これで、テーブルが生成されました。
##カラムの型について

|型の種類 |説明  |用例  |
|------|------|------|
|integer  |数字  |ユーザーIDなど |
|string | 文字(少) | ユーザー名、パスワードなど|
|text  | 文字(多) |投稿文など |
|boolean  |真か偽か  |真偽グラフ |
|datetime  |日付と時刻  |作成日時、更新日時など |
###スキーマファイル
スキーマファイルは、マイグレーションファイルを実行した際に更新がおこなわれます。そして最新のマイグレーションファイルのバージョンが記録されます。
db/schema.rb
##GUIを使ってデータベースを確認する

+ Sequel pro
+ Tableplus

MYSQLを扱うならどちらかがおすすめです。使い方については割愛します。
##Railsコンソールを使ってデータを操作してみる
ターミナルで下記のコマンドを実行すると立ち上がります。

```
$ rails c
```

```
[1] pry(main)> exit
```
で抜けることができます。
#ActiveRecordの知識
RubyのGemの一種です。このGemはモデルとテーブルをつなぎ合わせることで、Railsからテーブルのレコードにアクセスできるようにします。これから出てくるメソッドは、ApplicationRecordというクラスを継承しており、そのクラスにメソッドが定義されているから使用できるようになっています。
###allメソッド
allメソッドはApplicationRecordを継承したモデルと結びつくテーブルのレコードを全て取得します。

```
pry(main)>user = User.all
```
###newメソッド
newメソッドはクラスのインスタンスを生成するメソッドです。

```
pry(main)>user = User.new(〇〇)
```
###saveメソッド
saveメソッドを実行するとテーブルに保存されます。
newメソッドを保存することに使われることが多いです。

```
pry(main)>user.save
```
###createメソッド
newとsaveメソッドを一括でおこなってくれます。

```
pry(main)>user = User.create(〇〇)
```
###find()メソッド
id番号を取得する際に使います。

```
pry(main)>user = find(idの数値)
```
###find_byメソッド
id以外のカラムを取得します。

```
pry(main)>user = find_by()
```
【Mac】SourcetreeにGitFlowのアイコンが無いときの設定方法

新しい現場で、SourcetreeにGitFlowのアイコンがなく、どうやって設定していたのか思い出すのに時間がかかったので、忘備録も兼ねて紹介。
【注】Macでの設定方法なので、Windowはこのとおりでないかもしれません

## GitFlowのアイコンがない・・・
Sourcetreeをインストールして初期設定を終え、「さてこれでcloneすればOK」と思っていた矢先、ツールバーにGitFlowのアイコンが無いことに気がつく。
メニューの「リポジトリ」からいちいちGitFlowの操作をするのは正直面倒い・・・
![スクリーンショット-2019-04-20-23.35.25.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275589/f7a35818-2053-03b5-c9b5-06dc03975686.jpeg)
自分のMacのSourcetreeには赤い点線のあたりにアイコンが有るのだが・・・

設定に関するところを見てみたがGitFlowのアイコンの表示・非表示を切り替えるようなメニューは見つからず・・・（どっかにあるのかもしれないが）

## 実はツールバーを直感的に操作するそうです...
「完全に忘れた〜。思い出せない・・・」と思いながら、なんとなくSourcetreeのツールバー上で右クリックしたら「ツールバーをカスタマイズ」という期待のできる項目を発見！
*ちなみにツールバーは「コミット」とか「ブランチ」とかのメニューアイコンが並んでいる上の部分です。
![スクリーンショット-2019-04-20-23.41.17.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275589/650a6ba4-8a08-4e8e-56a5-1226737167e8.jpeg)
ということで、「ツールバーをカスタマイズ」をクリックするとカスタマイズ項目が表示されます。
![スクリーンショット-2019-04-20-23.42.43.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275589/fea39f4d-26d8-9354-0f0a-85d1c406adaa.jpeg)
「Git Flow」のアイコンを発見！

あとは、ツールバーの好きなところへアイコンをドラッグアンドドロップで配置！
<img width="230" alt="スクリーンショット 2019-04-20 23.45.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275589/ba8a5cef-49ee-3279-19ef-c48da0e10cd3.png">
これで、GitFlowの操作がアイコンからできます！
Node.jsの、コードの実行時間を計測

　![alt](https://user-images.githubusercontent.com/26253721/39765058-e8d0eae4-531b-11e8-9305-4c852f269517.png)
Node.jsで書かれたコードのパフォーマンスを測定する必要があった。

その際、コードの実行速度を計測するのに良さげな方法を見つけたので、共有する。


## setTimeoutで、コードを遅延させ、実行速度を計測してみる。

## まずは、一般的なDateを使った方法から！

```js
var start = new Date()
var simulateTime = 1000

setTimeout(function(argument) {
  // execution time simulated with setTimeout function
  var end = new Date() - start
  console.info('Execution time: %dms', end)
}, simulateTime)
```

結果は

```
Execution time: 1002ms
```

と表示される
一般的にはこれで十分だ。なぜなら、jsでコードを書く場合msまで計測できればパフォーマンスの計測としては必要十分だからだ。

## しかし、エンジニアには時にもうちょっと精度よくコードのパフォーマンスを計測したい時がある。
そのための仕組みがnodeには標準装備されていて、 process.hrtime()という
これは、[seconds, nanoseconds] というArrayを返す関数だ。
使い方は、ちょっと変わっていて、計測開始の、process.hrtime()の返り値を、計測終了のprocess.hrtime()の引数として渡してあげる必要がある。

```js
var start = new Date()
var hrstart = process.hrtime()
var simulateTime = 5

setTimeout(function(argument) {
  // execution time simulated with setTimeout function
  var end = new Date() - start,
    hrend = process.hrtime(hrstart)

  console.info('Execution time: %dms', end)
  console.info('Execution time (hr): %ds %dms', hrend[0], hrend[1] / 1000000)
}, simulateTime)
```

結果は、以下のように表示される。

```
Execution time: 7ms
Execution time (hr): 0s 6.858948ms

Execution time: 6ms
Execution time (hr): 0s 6.285195ms
```

まあ、標準で、こういう関数「使える」関数が用意されてるのが、nodeが世界中で使われる理由の一つなんだと思いました。
以上酔っ払いからのレポートでした
anaconda と pyenv は相性が悪い

pyenv と anaconda は相性が悪い。
pyenv-virtualenv をインストールすると期待通りに動作する。

## 筆者の環境

* anyenv を使ってます

```
anyenv 1.1.0
pyenv 1.2.11
conda 4.6.14
```

## 問題

`conda activate` というコマンドがないと言われる

```console
> conda activate my_env
CommandNotFoundError: Your shell has not been properly configured to use 'conda activate'.
To initialize your shell, run

    $ conda init <SHELL_NAME>

Currently supported shells are:
  - bash
  - fish
  - tcsh
  - xonsh
  - zsh
  - powershell

See 'conda init --help' for more information and options.

IMPORTANT: You may need to close and restart your shell after running 'conda init'.
```

指示通り `conda init fish` してみたが変わらない

## 原因

この記事でも紹介されているとおり、 conda と pyenv が相性が悪いっぽい
https://qiita.com/y__sama/items/f732bb7bec2bff355b69

対処法の3で紹介されている、 pyenv-virtualenv をインストールしたら問題が解消された。

## 対処法

```console
> brew install pyenv-virtualenv
```

```fish:~/.config/fish/config.fish
status --is-interactive; and pyenv virtualenv-init - | source
```

シェルをリロード

```console
> conda create -n my_env
Collecting package metadata: done
Solving environment: done

## Package Plan ##

  environment location: /Users/billthelizard/.anyenv/envs/pyenv/versions/anaconda3-2019.03/envs/my_env



Proceed ([y]/n)? y

Preparing transaction: done
Verifying transaction: done
Executing transaction: done
#
# To activate this environment, use
#
#     $ conda activate my_env
#
# To deactivate an active environment, use
#
#     $ conda deactivate
> conda activate my_env
> conda info --envs                                                                (my_env)
# conda environments:
#
base                     /Users/billthelizard/.anyenv/envs/pyenv/versions/anaconda3-2019.03
my_env                *  /Users/billthelizard/.anyenv/envs/pyenv/versions/anaconda3-2019.03/envs/my_env
```

環境の削除

```console
> conda deactivate                                                                (my_env)
> pyenv uninstall anaconda3-2019.03/envs/my_env                             (anaconda3-2019.03)
pyenv-virtualenv: remove /Users/billthelizard/.anyenv/envs/pyenv/versions/anaconda3-2019.03/envs/my_env? y
```
Javaで条件分岐if-else文を簡略化したい

# はじめに
初投稿になります。
筆者はプログラミングを4月から始めた素人です。この記事は備忘録のつもりで書いたものなのですが、厳しく教えていただけたら幸いです！

# if-else文の省略形を使ってみた！
なんとな～く研修していてたらこんなコードを書くことになった。

```java:samp0.java
import java.util.Arrays;

public class MyJava {
	public static void main(String[] args) {
		int[] a = { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 };
		int[] b = new int[a.length];

		for (int i = 0; i < a.length; i++) {
			// a の i 番目の要素の偶奇判定
			if (a[i] % 2 == 0) {
				b[i] = 0;
			} else {
				b[i] = 1;
			}
		}
       // 本題とずれるけどprintfメソッド覚えると便利です
       // Arrays.toString(array)は、配列を出力したいときにforを回さなくていいので便利です。
		System.out.printf("b配列の中身は %s です。\n",
									Arrays.toString(b));
	}
}

```

# if-else文簡略化ver,1
この程度の処理で層が深くなるの気持ち悪いなあ…
なんていうふうに思って調べていると…

あれ？
これってif文の中に入ったらcontinueすればいいんじゃね？
else文減るやん！
ってわけで以下のコードです。

```Java:samp1.java
import java.util.Arrays;

public class MyJava {
	public static void main(String[] args) {
		int[] a = { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 };
		int[] b = new int[a.length];

		for (int i = 0; i < a.length; i++) {
			// a の i 番目の要素の偶奇判定
			// 偶数なら 0 、奇数なら 1 を代入する
			if (a[i] % 2 == 0) {
				b[i] = 0;
				continue;
			}
	        b[i] = 1;
		}

		System.out.printf("b配列の中身は %s です。\n",
									Arrays.toString(b));
	}
}
```
# if-else文簡略化ver,2
できたけど今度は奇数のときの判定がポツンとしてて読みにくいなあ、、、

んんん！？これは、、、！？
####if-else文を簡略化した書き方
> hoge ? fuga : foo

なんぞこれは？

> hoge がTrue のとき fuga が、False のとき fooが実行される。

なるほど！変に層を作らないでも済むんだな！よし！

```Java:samp2.java
import java.util.Arrays;
public class MyJava {
	public static void main(String[] args) {
		int[] a = { 1, 2, 3, 4, 5, 6, 7, 8, 9 };
		int[] b = new int[a.length];

		for (int i = 0; i < a.length; i++) {
			b[i] = a[i] % 2 == 0 ? 0 : 1;
		}

		System.out.printf("b配列の中身は %s です。\n",
									Arrays.toString(b));
	}
}
```
ふう、すっきり！
#あとがき
初投稿なのでつたない文章失礼しました。これからも少しずつ学んだことを記録していきたいので、是非「もっとこうしたほうが読みやすい！」などお声いただけたら幸いです！ここまで読んでいただきありがとうございました。
#参考サイト
Javaの道さま 代入演算子とその他の演算子
(http://www.javaroad.jp/java_operator6.htm)
PHPでバージョンの比較を行う時はversion_compare使うと便利

タイトルに書いてあることで全てなのですが、[version_compare](https://www.php.net/manual/ja/function.version-compare.php)を使うと簡単に判定ができるので便利です。

> デフォルトでは、version_compare() の返り値は 最初のバージョンが 2 番目のバージョンより小さい場合に -1、 同じ場合に 0、そして 2 番目のバージョンのほうが小さい場合に 1 となります。

```php
php > $version1 = '1.1.0';
php > $version2 = '1.2.0';
php > echo version_compare($version1, $version1);
0
php > echo version_compare($version1, $version2);
-1
php > echo version_compare($version2, $version1);
1
```

最近知ったのですが、アプリのバージョンを判定する場合などに使えて便利
Asanaは日本語設定にすると分かりやすくなる

## Asanaは日本語設定にすると分かりやすくなる件
とあるプロジェクトでAsanaを使っているのですがデフォルトの言語設定は英語です。
このままだと例えば締め切りはTuesdayまでというように、日本語と英語がごちゃごちゃになってしまいます。
右上のアイコンをクリックして、言語を日本語に変更することでとてもAsanaが使いやすくなります。
ぜひ参考にしてください。
## 終わりに
私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
        [無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話](https://note.com/kenroda/n/n814347fbdcd7)
【Vue.js】Safariでテキストエリアの改行・空白が無効になった話

Vue.jsで作ったフォームをAndroid ChromeとiOS Safariでテストしていたら、Safariだけでテキストエリアの改行や空白が無効になる事象を発見。
どんなに検索しても類似の話題がヒットせず調査に時間がかかったのでまとめてみました。

#何が起こったのか
こうやって入力したかったのに・・・
<img width="266" alt="理想.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350481/f85a64a4-ca81-7ba4-07f3-0689118a82d0.png">

こうなった
<img width="261" alt="現実.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350481/a719addb-b62a-301f-62ca-84f9c064378a.png">
※テキストエリアはVuetifyを使用

アルファベットは理想通りだが、文字を入力するそばから改行やスペースが消えていってしまった。
このほか、スペイン語や韓国語などの文字をランダムで試したところアルファベットと同様の挙動で、
中国語は日本語と同様だった。

なんで・・・？？

#原因調査
##１．前提の確認
普段はAndroidユーザーなので、念の為iOS Safariで前提を確認。

１．iOSのメモ帳で改行できること
２．HTMLのtextareaで改行できること
３．Vuetifyのv-textareaで改行できること

いずれも改行・空白が有効であることを確認。

##２．改行が有効なコードと無効なコードを比較

改行が有効なコード（Vuetify公式サンプルより抜粋）

```html:Vuetify.vue
<v-textarea label="Label" value="value"></v-textarea>
```
改行が無効なコード（自分のコードより抜粋）

```html:MyCode.vue
<v-textarea label="Label" v-model.trim="value"></v-textarea>
```
→`v-model.trim` が怪しそう・・・

##３．VuetifyのCodePenをSafariで操作
さっき正常に動いたVuetifyのvalueをv-model.trimに変えると・・・
**改行できなくなった！！！**
さらにv-modelだけにすると・・・
***改行できた！！！***

```html:MyCode.vue
<!--これだと改行・スペースが無視される-->
<v-textarea label="Label" v-model.trim="value"></v-textarea>

<!--これだと改行・スペースが無視されない-->
<v-textarea label="Label" v-model="value"></v-textarea>
```
スペースについても、同様の挙動。

#解決方法
`v-model.trim="str"`を使わずに、`v-model="str"`と`str.trim()`を使う

#おわりに
Safariでは`.trim`を使うと、日本語入力した際に改行やスペース入力が無効になる場合があるようです。
（英語だと発生しないので、どんなに英語で検索しても出てこないはず・・・）
本当は入力値全体の前後の空白だけ除去する機能のはずですが、なぜ入力中に即時で除去していくのでしょうか？
さらに詳しい原因は`.trim`の仕様やSafariのテキストエリアの挙動や２バイト文字について調べる必要がありそうですが、一旦覚書まで・・・。
ご存知の方がいらっしゃいましたら、ご教示いただけますと幸いです。
Safari(Mac)で動画をPIPモードで見る

## 動機
ブックマークから簡単にPIPモードに入れるコードの紹介です。
プライムビデオをPIP(Picture in Picture)モードで見たかった。
動作確認しているサイト

- Youtube
- ニコニコ動画
- Amazonプライムビデオ



## 使い方
1.適当なブックマークを作成してください
2.ブックマークバー->アドレスを編集->以下をペースト

```
javascript:function%20startPiP(){var%20videos=document.getElementsByTagName('video');for(vid%20in%20videos){if(videos[vid].src){videos[vid].webkitSetPresentationMode("picture-in-picture");}}};startPiP();
```

3.動画再生後、作成したブックマークをクリック

## 参考
https://github.com/mulian/amazon-safari-pip-mode
携帯端末で意図的に hosts を変更させる proxy を用意する

# 目的

開発において検証を行いたいが、
Mac や Windows であれば、 hosts ファイルを直接書き換えればよいが
携帯端末は書き換えることができない。

DNS の A レコードを変えれば対応できるが、
リリース迄に、携帯実機を使って、事前に動作確認を行いたい場合の対応方法です。

# こんな感じにしたい

![squid-mac.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/218682/7a60a04d-6ff5-9489-2e09-b9ea22ebf79b.png)


# 注意点

- Mac の環境が用意できていること
    - ごめんなさい、Windows での対応方法は知りません。 Windows の人怒らないで。
- Mac に homebrew を導入していること
- Mac の Firewall などから port 3128 からのアクセスが許可できること
- Mac の /etc/hosts ファイルに書き込める権限があること
- Mac と 携帯が同じネットワークに存在していること
- 携帯端末で proxy の設定ができること
- コマンドラインを怖がらないこと

# 手順

## Mac

ターミナルなどコマンドラインの画面を開きます

```
echo '111.111.111.222 example.com' | sudo tee -a /etc/hosts 
brew install squid

brew services start squid

ifconfig|grep -B2 "inet "
# proxy サーバとなる Mac 自体の ip を確認
```

携帯端末に上記で確認した IP と port 3128 をプロキシとして設定し、
携帯のブラウザで `example.com` にアクセス

想定している環境にアクセスできているかをこれで確認できます。

検証が終わったら、携帯端末の proxy の設定を外しましょう。

## DNS の向き先を変更する場合

```
sudo $EDITOR /etc/hosts 

brew services stop squid
ps aux|grep squid|grep -v grep
# squid の process が消えていることを確認

brew services start squid
```

上記設定後、DNS キャッシュを削除するために、携帯を再起動します。
UUIDは安全か？

# 概要

ここでは、 *正しくない実装をされた* UUID を使うことによる安全性の検討をします。
特に言及のない場合は UUIDv4 の話となります。（乱数による生成）

実装がメインの話となります。

以下の用途での検討を行います。

- UUIDv4 である

# 正しい UUID

正しい UUID は、耐衝突性に優れます。

詳細は下記記事に詳しいですが、「鳩の巣原理」「誕生日攻撃」の2つは乱数の耐衝突性を考えるうえで重要です。
[UUID(v4) がぶつかる可能性を考えなくていい理由](https://qiita.com/ta_ta_ta_miya/items/1f8f71db3c1bf2dfb7ea)
[鳩の巣原理](https://ja.wikipedia.org/wiki/%E9%B3%A9%E3%81%AE%E5%B7%A3%E5%8E%9F%E7%90%86)
[誕生日攻撃](https://ja.wikipedia.org/wiki/%E8%AA%95%E7%94%9F%E6%97%A5%E6%94%BB%E6%92%83)

上記の記事内にありますが、衝突までの期待値は $N$ をビット数とした $ f(N) = 2^{N/2} $ となります。
UUIDは $ N = 122 $ から$ f(122) \simeq 2.3 * 10^{18} $となります。

# 正しくない UUID

ここでは、 *正しくない* 実装をされた UUID を考えてみます。
個々のライブラリがただしいかは議論せず、一般的理論にとどめます。

#### 推測可能

一般的な疑似乱数（Random等）は前後の値を推測可能です。
これは、疑似乱数が一定の周期で繰り返しているため、前後の値が一意にきまっているためです。

そのため、特定の UUID を解析すれば、その前後の値が生成可能ということになります。

わかりやすい例では、ゲームのRTAにおいて敵へのダメージから現在の乱数番地を特定するようなものです。

#### 周期の不足

UUID の生成過程において、十分な周期を持てない場合があります。

UUID は122ビットの空間を持ちます。
しかし、生成に用いる疑似乱数は122ビットの空間を持たない場合が多いです。
32ビットや、64ビットの疑似乱数装置から生成されます。

そのため、これら短周期の疑似乱数装置を利用した場合、鳩の巣理論により期待する空間を埋められません。
32ビットの場合は $ f(32) \simeq 6.6 * 10^{4} $となり、
64ビットの場合は $ f(64) \simeq 4.3 * 10^{4} $となります。

#### 時刻ベースの初期化

一般的な疑似乱数は、初期化を時刻によって行います。
処理系の開始時刻から、おおよそのSeedを特定できます。

時刻をミリ秒で処理する系で、1分間にとり得るSeedの数は $ 60s * 1000ms = 60,000 \simeq 2^{16}$ となります。
この場合は、 $ f(16) \simeq 256 $ となります。

#### 不適切な暗号論的乱数の使用

上記の問題は、擬似乱数に起因する問題です。
これらの問題は、暗号論的乱数の使用により解決されます。

[暗号論的疑似乱数生成器](https://ja.wikipedia.org/wiki/%E6%9A%97%E5%8F%B7%E8%AB%96%E7%9A%84%E6%93%AC%E4%BC%BC%E4%B9%B1%E6%95%B0%E7%94%9F%E6%88%90%E5%99%A8)

しかし、暗号論的乱数にも弱点があります。

暗号論的乱数は外部雑音を エントロピーとして利用しますが、エントロピーがたまらない状態では十分に安全な乱数が生成されません。

一般的に、下記状態ではエントロピーが不足している状態となります。

- 仮想サーバーである
    - 仮想サーバーでは高品位のエントロピーを得ることが難しい場合があります
    - [Is it appropriate to use haveged as a source of entropy on virtual machines?](https://security.stackexchange.com/questions/34523/is-it-appropriate-to-use-haveged-as-a-source-of-entropy-on-virtual-machines)
- 起動直後である
    - 起動直後はエントロピーが十分に蓄積されていない場合があります。 
    - [乱数生成](https://wiki.archlinux.jp/index.php/%E4%B9%B1%E6%95%B0%E7%94%9F%E6%88%90)


# まとめ

UUID は、十分な耐衝突性を持っていますが、その効果を得るためには暗号論的に正しいUUIDを利用する必要があります。
【さくらのVPS】DBサーバを外部に置いたWordpress構築（事前準備）

#はじめに

表題の通り、DBサーバとWebサーバを別々にしてWordpressの環境を構築します。
意外とすんなりまとまった情報が出てこないので自分でやってみました。

契約しているVPS同士でローカル接続を行うにはスイッチが必要になります。
また、さくらのVPSの標準OSは現時点でCentOS 6（x86_64）になっている為、CentOS7のインストールを行います。
**※ 最新の情報は[さくらのVPSの仕様](https://vps.sakura.ad.jp/specification/)を確認して下さい。**


この記事ではローカル接続用のスイッチの作成と、サーバへの割り当て、OSのインストールまでの流れ記します。
あくまで自分用の記録なので参考程度にご覧下さい。

##環境

- さくらのVPS(東京リージョン２契約)
- CentOS7
- Apache
- MariaDB

※ 本検証の為にVPSを追加でお試し契約したので、記事中のimageにその旨のMsgが記載されていますが気にしないで下さい。

#作業概要

- さくらのVPSの管理画面にログイン
- ローカル接続スイッチの作成
- ローカル接続用スイッチにサーバを割り当てる
- CentOS7のインストール

#さくらのVPSの管理画面にログイン
まず[さくらのVPSの管理画面](https://secure.sakura.ad.jp/vps/#/login)にログインします。

#ローカル接続用スイッチの作成
以下のような画面が出るので左側の"スイッチ"をクリックします。
![image_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391107/774c81a3-147a-3061-fe8b-57ad55e2dec2.png)

次の画面に遷移したら右上のスイッチ作成をクリックします。
![image_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391107/7fb252f5-388d-5c56-a7a3-a445d28cf350.png)

次の画面に遷移したら、以下の対応をしてください。

- "名前"に任意のスイッチ名を入力します。
- "ゾーン"は契約しているリージョンを選択して下さい。
- "スイッチを作成する"をクリックします。

**※ さくらのVPSでローカル接続を行うには、契約しているVPSが同じリージョンである必要があります。**
![image_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391107/dc68e62d-84b7-9004-246b-914a1d5138a5.png)

スイッチの作成が完了した旨のMsgが出力されればOKです。
ローカル接続用スイッチの作成が完了しました。

#ローカル接続用スイッチにサーバを割り当てる
**構築に使用するサーバ２台に以下の対応を行って下さい。**

左側メニューから"サーバ"をクリックして、今回構築に使用するサーバをクリック、画面が切り替わったら右上の"各種設定"から"ネットワーク接続"をクリックします。
**※ サーバが起動中だとスイッチの割り当てが出来ませんので、起動している場合はシャットダウンして下さい。**
![image_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391107/46aea215-4583-ee4e-5e4e-f051c4f01106.png)

eth1に先ほど作成したスイッチを割り当て、画面下部にある"接続先を変更する"ボタンをクリックします。
**※ セットアップ完了後に必要に応じてDBサーバ側のインターネット接続は"接続しない"に変更しましょう。**
![image_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391107/47dc9f94-9bbe-70f2-b3c5-a64154b3dc65.png)

ローカル接続用のスイッチの作成と各サーバへの割り当てが完了しました。
これでサーバのセットアップ後にローカル通信を行う事が出来ます。

#CentOS7のインストール
**構築に使用するサーバ２台に以下の対応を行って下さい。**

先ほどと同様に左側のメニューから"サーバ"を選択し、画面が遷移したら対象サーバをクリックします。
その後、右上の"各種設定"から"OSインストール"を選択します。
![image_6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391107/9ea76679-b390-de8a-3fec-29ddb19e02d9.png)

任意でカスタムOSも利用可能ですが、そういう方はこの手順を見ないと思います。
こちらは"標準OS"を選択して下さい。
インストールするOSは"CentOS7 x86_64"
次に"新しいユーザのパスワード"と確認入力に出来るだけ強固な任意のパスワードを入力して下さい。
スタートアップスクリプトは使用しません。
"設定内容を確認する"をクリックすると確認の画面がポップアップしますので、内容を確認し"インストールを実行する"をクリックして下さい。

![image_7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391107/f25f243d-ae6b-85f6-942a-2a70c45f3e0d.png)

画面に記載される通り、数分してサーバのステータスが稼働中となればインストール完了です。
![image_8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/391107/085f41ea-148b-21bb-97ef-888a00e515a9.png)

以上でOSインストール作業が完了しました。
[次の記事](https://qiita.com/siba4848/private/b10c0504df369b45180a)ではWebサーバのセットアップを行います。
Day008 webエンジニアへの道 - rails tutorial 第3章、第4章の半分まで完了-

こんにちは。
webエンジニアを目指す[tomo](https://twitter.com/tomo_tech_)です。

エンジニアの勉強をしている日々の学びを記録しています。

私自身の頭の整理と今後迷った時のリファレンスも兼ねて書き連ねていきますが、同じようにエンジニア転職を考えている方の参考にもなればと考えています。
また、「ここ間違ってる！こっちが正しい！」といったご指摘もあれば頂けると嬉しいです🙏

#Day008のまとめ

*今日の気づき & 今後調べることなど

###コマンドミスでファイルを作成した場合の対応について

- `git status`で関連ファイル含め、どのようなファイルが作成されたか確認する。

- rails generateで行った変更は以下の処理で戻すことができる。

```commandline:
$ rails generate controller [controller名] [action名]
  ↓ 戻す
$ rails destroy controller [controller名] [action名]
```

```commandline:
$ rails generate model [model名] [model項目]
  ↓ 戻す
$ rails destroy model [model名]
```

- migrateで行った変更は以下の処理で戻すことができる。

```commandline:
$ rails db:migrate
  ↓ 戻す
$ rails db:rollback

# 最初の状態に戻す場合は
$ rails db:migrate VERSION=0
```

###springプロセスの確認と削除について

プロセスの確認

```commandline:
$ ps aux | grep spring
```

プロセスの削除

```commandline:
$ kill -15 [プロセスid]
```

###unless文について

if文と処理条件の真偽が反対になる。

```ruby:
unless "条件式" then
　#条件式が偽の場合に実行する処理
else
　#条件式が真の場合に実行する処理
end
```

###式展開の条件について

ダブルクオート中のシングルクオートであれば式展開される。

```ruby:
string = "sample_text"
p "The string '#{string}' is nonempty."

# => "The string 'sample_text' is nonempty."
```

###その他

- railsで`Template`とは`view`のこと。

- touchコマンド → ファイルが存在しない場合にはファイルを作成する。 

- Rubyにはhashの内容を統合するmergeメソッドがある。
  [参考]　[instance method Hash#merge](https://docs.ruby-lang.org/ja/2.6.0/method/Hash/i/merge.html)

##今日のひとこと

Rubyを使った変数や配列の操作がパズルのようで楽しい。
Ruby本も並行して進めていきたい！

---

twitterもやっているので、宜しければフォローお願いします！
[@tomo_tech_](https://twitter.com/tomo_tech_)
「Team Geek」の心響く言葉

- 技術者は時として頑固であり、考え方もそれぞれ異なる。
　　優秀な人間ほど自分を曲げなかったりするものだ。
　　だが、良い製品を完成させるというゴールのためには、同じ価値観を持つ必要がある。
　　価値観といっても、必ずしもまったく同一のものである必要はない。
　　ただ、技術への愛、技術の持つ可能性への夢、そのような価値観は共通であるべきだ。チームをまとめるリーダーも同じだ

-  ソフトウェア開発の「人間的な」側面を扱ったものである。人間は複雑だ。
　　ぼくたちはよく「人間は断続的なバグの大きな塊だ」と言っている

-   いつも1人でやっていると、失敗のリスクが高くなる。そして、成長の可能性が低くなる
　　早い段階で設計ミスをしやすくなるし、車輪の再発明をする可能性があるし、だれかと協力するメリットが失われる

-  検証を重視した「早い段階で、高速に、何度も失敗せよ」の精神を忘れないようにしよう

-  早い段階で成果を共有することで、躓きを回避したりアイディアを検査したりできるようになるが、プロジェクトのバス係数を高めることもできるようになる

-  三本柱HRTの原則　　謙虚（Humility） 、　尊敬（Respect）、信頼（Trust）

-  あらゆる人間の衝突は、謙虚、尊敬、信頼の欠如によるものだ

-  組織（開発チーム）を使う必要があることを認識し、組織を自分の仕事に使うことを学べば、組織を自分の要求に合わせられるようになる

- プロのソフトウェアエンジニアリングの世界では、批判は個人的なものではなく、優れたプロダクトのプロセスの一部にすぎない

- 君は君の書いたコードではない

- 失敗は選択肢の一つ

- エンジニアは、チームリーダーがチームの文化を作ると勘違いしている。これは真実とはほど遠い。

- オープンソースの世界では、クリーンでエレガントで保守性の高いコードを書くことに集中すると、クリーンでエレガントで保守性の高いコードを重視する人たちが興味をもってくれる

- 採用ミスを回避するため、技術インタービューの前に、文化のインタビューをする会社もある

優秀なエンジニアは、自分で運転できるパスに乗りたいからだ

- コミュニケーションの原則は、同期コミュニケーション（ミーティングなど）の人数を減らし、非同期コミュニケーション（メールなど）の人数を増やすこと

- コミュニケーションとプロセスを充実させていけば、新来者がチームに入りやすくなる

- TL（チームリード）とTLM（テクニカルリードマネージャ）
　TLはプロダクトのすべての技術的な方向性に責任を持つ。TLMはそれに加えて、チームにいるエンジニアのキャリアや幸せにも責任を持つ

- チームの幸せと生産性を高めることがマネジメントの仕事の指標になる

- ピーターの法則
　階層的な組織に属する人間は、必ずその人の無能レベルまで昇進する

- マネジメント病の治療法は「サーバントリーダーシップ」である

- サーバントリーダーが管理するのは技術的な側面とチームの人間関係である

- Aランクの人はAランクの人を採用する、Bランクの人はCランクの人を採用する

- リーダーの仕事はチームの合意形成や方向性の決定を支援することであり、目標の達成方法はプロダクトを作る人が決定すべきことだ

- ミスをしたとき謝る

- 会社の組織図は歯車のように見ればいい　P79
　CEOが一番おおきな歯車であり、CEOの歯車を動かせば、糸巣rうしないにかかわらず、そこにつながる小さな歯車を拘束に動かせるのである

- 委譲せよ、ただし手を汚せ

- エンジニアによって、成長にひつようなものは違う

- HRTをベースにした強い文化はかけがえのないものである。技術的に貢献できる人は、確実に交換可能だ

- FitzがGoogleに入社した最初に週に、Gmailのタイポをみつけたことがある。ソースコードを開いて、タイポを修正して、Gmailチームにパッチをメールすると、心から感謝してもらえた。大企業であっても摩擦のないところはあるのだ

- 許可を求めるより関与をもとめるほうが簡単
　　
- 道がないなら道を作る

- 誰かを説得するときには、あらかじめ賛同してくれる人を探しておいて、対象となる相手との会話の中でアイディアについてふれてもらうと成功率が上がる自分のアイディアが自分以外の人の口から出てくるのを耳にするのは苦痛かもしれない。でも、それがアイディアを広める勇逸の方法だったりする

- 組織の悪い習慣を排除するのは難しい。悪い習慣をやめることはできない、良い習慣と置き換えなければいけない

- エンジニアとしては、何よりもプロダクトのローンチにエネルギを注ぐべきだ

- 「攻撃的」な仕事と「防御的」な仕事
　　ぼくたちは、技術的負債がどれだけあっても、防御的な仕事に時間や労力の1/3~1/2をかけないというルールを作っている。それ以上は政治的自殺行為に繋がるからだ

- 運のよい人はチャンスに気が付く

- 正しいことをして、解雇されるのを待とう！
　　
- ユーザーに集中すれば、ほかのことはすべてういてくる

- 利用のハードルを下げて、ユーザーのプロダクトの最初の体験が超重要

- ユーザーではなく、利用を計測する

- 利用を上げてユーザーを満足させるには、レイテンシーを改善するのが一番だ、Googleの創業者たちも「速度は機能だ」といっている

- ユーザーは自分の意見を聞いてほしいだけだ。無意味な提案や根拠のない不満を言ってきても、そのことを認知することが重要である。議論や開発のプロセスに参加してもらえれば、ユーザーはそれだけ忠実で幸福になっていく

- ユーザーとやり取り時の基礎：信頼と喜び
　信頼はもっとも大切なリソースだ、残高に気を配ろう。何か行動するときには、必ず残高への影響を考えよう
Dart x Flutter Web x VSCode を Docker 上に構築 (1)

Dart x Flutter_Web の開発環境を Docker上に構築できたので、メモ。 AWS Cloud9 のように、クラウド上で開発できて、その場で動作確認とかできます。
また、VSCode x Dart Plugin の Auto Complete などの開発補助機能を使えます。

(0) Dockerfileをかく

```dockerfile

FROM ubuntu:18.04

RUN apt-get update
RUN apt-get install -y curl wget gnupg less lsof net-tools git apt-utils -y


# WORKDIR
RUN mkdir /works
WORKDIR /works

# DART
RUN apt-get install apt-transport-https
RUN sh -c 'curl https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -'
RUN sh -c 'curl https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_stable.list > /etc/apt/sources.list.d/dart_stable.list'
RUN apt-get update
RUN apt-get install dart -y
ENV PATH="${PATH}:/usr/lib/dart/bin/"
ENV PATH="${PATH}:/root/.pub-cache/bin"

RUN pub global activate webdev
RUN pub global activate stagehand

#
# CODE-SERVER
RUN wget https://github.com/cdr/code-server/releases/download/1.939-vsc1.33.1/code-server1.939-vsc1.33.1-linux-x64.tar.gz
RUN tar xzf code-server1.939-vsc1.33.1-linux-x64.tar.gz -C ./ --strip-components 1


# FLUTTER
RUN apt-get install xz-utils -y 
RUN wget https://storage.googleapis.com/flutter_infra/releases/stable/linux/flutter_linux_v1.5.4-hotfix.2-stable.tar.xz
RUN mkdir /works/development
WORKDIR /works/development
RUN tar xf ../flutter_linux_v1.5.4-hotfix.2-stable.tar.xz
ENV PATH="${PATH}:/works/development/flutter/bin"
RUN flutter precache




#
# FLUTTER CODE
RUN git clone https://github.com/flutter/flutter_web.git
WORKDIR /works/development/flutter_web/examples/hello_world/
RUN flutter packages upgrade
RUN pub get


```

(1) Docker Image を build/run  
 
```
# git clone https://github.com/kyorohiro/my-code-server.git
# cd my-code-server/dart_flutter_web
$ docker build . -t dart_flutter_web
$ docker run -p 8443:8443 -p 8080:8080 -it dart_flutter_web bash
```

(2) VSCode を起動する

```
/works/code-server /works/development/flutter_web/examples/hello_world  --allow-http --no-auth
```

(3) 'http://127.0.0.1:8443/' をブラウザーで開く

![root_page.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54192/082715d1-aed7-316d-63a3-ce4706e7d565.jpeg)



## Webdev

(1) VSCode上で、Terminal -> New Terminal 

(2) 以下を入力

```
root@8e5699b9caa4:/works/w# pub get
root@8e5699b9caa4:/works/w# webdev serve --hostname=0.0.0.0
```

(3) 'http://127.0.0.1:8080/' をブラウザーで開く

![sample_web.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54192/43a64aff-fcb6-9a91-3936-d06f5393689f.jpeg)


終わり


## PS

#### 以下を拡張した

https://qiita.com/kyorohiro/items/888f969c8f5887ec7cc6


#### コードは以下
https://github.com/kyorohiro/my-code-server/tree/master/dart_flutter_web
RUBYOPT="" でtd-agent3を動かすと死ぬ

タイトルが全てです
可能ならunsetしましょう
ElasticBeanstalkのruby環境を使ってる場合は注意

# 一応経緯など
awsのElasticBeanstalkのruby環境にtd-agent3をインストールして
`$ curl -L https://toolbelt.treasuredata.com/sh/install-amazon1-td-agent3.sh | sh`
confもデフォルトのまま起動するも
`$ sudo /etc/init.d/td-agent start`
どうも動いてないみたい

ログを確認すると

```text:/var/log/td-agent/td-agent.log（抜粋）
2019-05-10 12:45:05 +0000 [info]: Worker 0 finished unexpectedly with status 0
2019-05-10 12:45:05 +0000 [info]: Worker 0 finished unexpectedly with status 0
2019-05-10 12:45:06 +0000 [info]: Worker 0 finished unexpectedly with status 0
2019-05-10 12:45:06 +0000 [info]: Worker 0 finished unexpectedly with status 0
2019-05-10 12:45:07 +0000 [info]: Worker 0 finished unexpectedly with status 0
2019-05-10 12:45:07 +0000 [info]: Worker 0 finished unexpectedly with status 0
2019-05-10 12:45:08 +0000 [info]: Worker 0 finished unexpectedly with status 0
2019-05-10 12:45:08 +0000 [info]: Worker 0 finished unexpectedly with status 0
2019-05-10 12:45:09 +0000 [info]: Worker 0 finished unexpectedly with status 0
2019-05-10 12:45:10 +0000 [info]: Worker 0 finished unexpectedly with status 0
2019-05-10 12:45:10 +0000 [info]: Worker 0 finished unexpectedly with status 0
2019-05-10 12:45:11 +0000 [info]: Worker 0 finished unexpectedly with status 0
```

`-vv` 付けても何も出ない。全然わからん。
foregroundで動かすとエラーも出ず、しかし何も始まらない。全然わからん。

で、調べたところ、環境変数 `RUBYOPT` が空文字になっていると、worker processをspawnする際、argsに余計な `""` が入ってバグるっぽい。

先述のElasticBeanstalkのruby環境は初期化スクリプトで `export RUBYOPT=` などとしていた

ruby素人なのでRUBYOPTのことはよくわからないです。
`export RUBYOPT=` とやるのが大事なことならごめんなさい。

~~とにかくぼくはElasticBeanstalk使うのをやめたい~~