OmniAICreator/Qiita-1.07M huggingface dataset:
TEdit 七変化

# TEdit の項目

あまり知られていないかも知れませんが、FireMonkey の TEdit には項目があります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12977/ace8388c-ad7a-de48-6bd9-bee714d10226.png)

これに言及しているページが下記しか見つからないのですが、Metropolis スタイルじゃなくても使えます。

[組み込みグリフを使った Metropolis UI 編集ボタンの作成](http://docwiki.embarcadero.com/RADStudio/Rio/ja/%E7%B5%84%E3%81%BF%E8%BE%BC%E3%81%BF%E3%82%B0%E3%83%AA%E3%83%95%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F_Metropolis_UI_%E7%B7%A8%E9%9B%86%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E4%BD%9C%E6%88%90)

FMX Style Viewer にも表示がありますね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12977/cc549001-dc0f-badf-b2b7-88bf726a3780.png)

ちなみに「ボタンの編集」は「Edit Buttons」を訳してしまったためと思われます…

## 項目全種紹介

### 1. TEditButton
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12977/5e7f040f-0d7c-b208-9e8b-630ec35dd18a.png)
ごく普通のボタンです。
Text プロパティに値を設定すれば、文字も表示できます（ここでは `test` という文字を入れました）。

### 2. TClearEditButton
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12977/8e3918d1-59a7-8c1b-0e4f-c0a7494af9e6.png)
×が表示されているボタンです。
クリックすると [TEdit.Text](http://docwiki.embarcadero.com/Libraries/Rio/ja/FMX.Edit.TEdit.Text) を削除する機能が実装されています。

### 3. TPasswordEditButton
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12977/8e025883-063a-3e39-2deb-f5cab19ae34f.png)
名前の通りパスワード用のボタンです。
押した時に [TEdit.Password プロパティ](http://docwiki.embarcadero.com/Libraries/Rio/ja/FMX.Edit.TEdit.Password)を False に、アップした時に True が入る機能が実装されています。

### 4. TSearchEditButton
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12977/17628c9c-a38f-3ec2-98d1-be589a3988a2.png)
こちらも判りやすい検索用のボタンです。
このボタンには何の機能も実装されていないので、OnClick で機能を自分で実装します。

### 5. TElliposeEditButton
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12977/b562b237-5719-b5f5-265c-735500a2bebe.png)
「･･･」３点ドットを表示するボタンです。
このボタンには何の機能も実装されていないので、OnClick で機能を自分で実装します。
パスの入力時にこれを押されたらファイル選択ダイアログを出したりすると良さそうです。

### 6. TDropDownEditButton
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12977/1076c136-d988-d8b2-37a5-e0161268183e.png)
これは下向きの矢印を表示するボタンです。
このボタンには何の機能も実装されていないので、OnClick で機能を自分で実装します。
ComboBox もあるので、あまり使い道は無いかも知れません。

### 7. TSpinEditButton
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12977/1daeaa7b-0c2f-a284-9f25-2d0a4025b158.png)
上下の矢印が表示されているボタンです。
スピンボックスみたいに使えそうです。
このボタンには何の機能も実装されていませんが、このボタンだけ `OnDownClick`, `OnUpClick` というイベントが用意されています。
それぞれ上側下側どちらかを押したときに呼び出されます。

## 項目の複数追加

上記に紹介したボタン類は全部同時に載せられる上、それぞれのボタンのインスタンスも複数設置できます。
例えば、TPasswordEditButton と TClearButton を同時に使ったり、TEditButton を複数載せて色々な機能を実装したりできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12977/5dd85357-1d00-7a0d-ae14-585097997f11.png)

もちろんこれらはスタイルも適用されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12977/d470dccc-9e7f-4c90-a582-b206aff7c6d3.png)


# まとめ
Edit にボタンを乗せる標準的な方法が提供されているので、リッチな Edit も簡単に作成できますね。
AWS認証を社内のActive Direcoryと連携

v0.7

# ミッション
* 社内Active DirecoryをAWS VPCと接続し、AWSマルチアカウント間の認証に利用する。
* 社員の部署移動、退職時に社内AD設定変更のみで権限管理ができる。


# 社内 Domain Controler

* IP: 192.168.1.2
* Directory Serviceで認証に使うユーザ(Connector account)作成
* Group: Connectors
* User: aws-ad-connector
  * 参照: http://docs.aws.amazon.com/ja_jp/directoryservice/latest/admin-guide/cloud_prereq.html
  * AD Connector の前提条件: https://docs.aws.amazon.com/ja_jp/directoryservice/latest/admin-guide/prereq_connector.html
  * [権限をサービスアカウントに委任する]がポイント


# AWS VPC
* カスタマーゲートウェイ: 社内VPNと接続　AWSから社内サーバのプライベートIPに接続できる。
* 社内VPN設定などは割愛


# AWS Directory Service
* Type: AD Connector
* ID: d-xxxxxx
* Connected directory
    * domain: acme.local
    * NetBIOS name: acme-dc
* Access URL: acme-dc-aws3.awsapps.com
* On-premises DNS Address: 192.168.1.2（社内DC）
* Size: Small
* Availability zones: ap-northeast-1b, ap-northeast-1c: vpc-xxxxxx
    * Subnets: subnet-xxxxxx1, subnet-xxxxxx2
* AD Connector IP addresses: 10.0.3.xxx, 10.0.1.xxx
* Connector account username: aws-ad-connector
* アクセス: https://acme-dc-aws.awsapps.com/console

* ADのグループとroleをマッチング
  * Enabled apps & services -> AWS Console Access
* AWSカウント間のリンク方法は既存roleと同様
* セッションタイムアウト調整: MAX12時間
  https://docs.aws.amazon.com/ja_jp/directoryservice/latest/admin-guide/ms_ad_management_console_access.html#console_session
    1. In the AWS Directory Service console navigation pane, choose Directories.
    2. On the Directories page, choose your directory ID.
    3. On the Directory details page, select the Application management tab.
    4. Under the AWS apps & services section, choose AWS 
    5. Management Console.
    5. In the Manage Access to AWS Resource dialog box, choose Continue.
    6. In the Assign users and groups to IAM roles page, under Set login session length, edit the numbered value, and then choose Save.


# IAM Role AWSアカウント間のスイッチロール
* 各アカウントにて権限指定のロール作成
  * 例1. devadmin: 管理者グループ
  * 例2. devuser: 開発グループ
* 信頼関係

```json
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": {
        "AWS": "arn:aws:iam::{123456789}:role/devadmin"
      },
      "Action": "sts:AssumeRole"
    }
  ]
}
```

![2019-10-23 18.45.19 ap-northeast-1.console.aws.amazon.com afc0edefee91.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249425/c0619695-701c-5360-55ad-0955f3481fcf.png)


#メモ
だいぶ楽になった・・・
AWS Managed Blockchainの歩き方 #2 環境構築〜Peerの冗長化編

#はじめに
[前回](https://qiita.com/ksukenobe/items/fde330ccdf6ef7031050)は、AWS Managed Blockchainでネットワークを構築して、最初のトランザクション実行まで行いました。

\#2では、チェーンコードやチェーンコードを呼び出すためのプログラムについて書こうと思ったのですが、Peerの冗長化について触れたいと思います。

というのも、AWS Managed Blockchainでデモアプリを作っていたのですが、ある日突然データが取れなくなり、Peer Nodeが死んだという衝撃的なことが起こりました。

デモアプリというのもあって、Starter Editonで、最小インスタンスタイプで、単一ノードで、みたいなゆる〜い構成にしていた自分がすべて悪かったというだけの話です。しかしながら、野良アプリを作る場合、誰でもゆる〜い構成になりがちだと思います。そこで、いくら野良アプリとはいえ、最低限やったほうがいい冗長化について書きたいと思います。

#Peer Nodeが落ちるとは
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319797/c239324b-ad53-ed52-a9ec-69cecca80a94.png)

このように、StatusがFailedになります。メモリ不足などの問題によって、ネットワーク疎通性が失われた状態です。いったんこうなってしまうと、復旧不可となります。

>The peer node has an issue that has caused Managed Blockchain to add it to the deny list on the network. This usually indicates that the peer node has reached memory or storage capacity. As a first step, we recommend that you delete the instance and provision an instance with more capacity.
Source：[Work with Peer Nodes in a Managed Blockchain Network](https://docs.aws.amazon.com/managed-blockchain/latest/managementguide/managed-blockchain-hyperledger-peer-nodes.html)

なお、FailedになったPeer Nodeは、上述のとおり一切アクセスできない状態となるのですが、削除するまで有効数としてカウントされるみたいです。例えば、Starter Editionでは、メンバーシップごとに 2つまで Peer Node を追加可能なのですが、削除せずに２個めを作成しようとすると、エラーになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319797/e26a1fab-b1f4-30ec-98e9-a333f65fe6b3.png)

#Peerを冗長化する
そこで今回は、こんな構成で応急処置を行いました。この構成は、すでに公開されているクイックスタートのテンプレートとHyperledger Fabric(HLF) Clientのyamlを使っているので、それほど苦労せず再構築ができます。

![pic1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319797/1a71f23e-5a7f-8436-5f80-024bd920281a.png)

使用したテンプレートはこちらです。
[AWS での Linux 踏み台ホスト](https://aws.amazon.com/jp/quickstart/architecture/linux-bastion/)
[amazon-managed-blockchain-client-templates](https://github.com/awslabs/amazon-managed-blockchain-client-templates)

PeerはOrdererとは異なり、Managed Blockchainで管理される仕組みで動いていないため、開発者が対応・管理する必要があります。とはいえ、2019年7月現在では、Peer Nodeにログやヘルスチェックなどの機能はなく、健康維持が難しいですが、いつでも復旧可能な構成にする必要があります。

#さいごに
今回は、Peer Nodeの冗長化を行いました。
デモアプリだからといって冗長化せず、どんどん前に突き進んでしまう自分への教訓として、ブログに残しておこうと思います。
良い光ファイバアダプターを選ぶには？

光ファイバアダプタは、光ファイバコネクタのセンタリング接続です。 光ファイバアダプタは、送信ファイバからの光エネルギー出力を最大限に受信ファイバに結合することができるようにファイバの２つの端面を正確に接続することができ、同じまたは異なる光ファイバコネクタをドッキングしてほとんど損失なく実行することができる。 光路は滑らかです。

光ファイバ接続に光ファイバアダプタが広く使用されているため、さまざまな環境設置のニーズに対応するために、さまざまな異なるインターフェイスを備えた光ファイバアダプタを使用できます。 一般的なアダプタの種類は、LCアダプタ、FCアダプタ、SCアダプタ、STアダプタ、E2000アダプタ、MTP / MPOアダプタです。

そのような多種多様なアダプタに直面して、それは右と高品質のアダプタを選択することが特に重要です。 一般に、光ファイバアダプタを検討する際には、次の点を考慮する必要があります。

光ファイバアダプタに影響を与えるいくつかの重要な機能：
1.アダプターの難燃性レベル
燃焼性UL94規格は、プラスチック材料に最も広く使用されている燃焼性能規格です。 材料が着火した後に消火する能力を評価するために使用されます。 燃焼速度、燃焼時間、耐ドリップ性、およびビーズが燃焼しているかどうかによって様々な評価方法がある。 HB、V0、V1、V2は難燃グレードが異なり、グレードも異なり、難燃性試験方法も異なり、判定基準も異なりますが、難燃グレードはHB、V-2、V-1〜V-0です。 レベルの増加 市場にはUL94-V0規格を達成できる光ファイバアダプタはそれほど多くなく、HYCのLCデュアル/クワッドアダプタはUL94-V0規格に準拠しています。
![700_400_6.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463940/df4f7c0e-4d2b-aa8e-9f3a-f9f8e7a6458e.jpeg)

2. 挿入損失
挿入損失は一般に0.2dB以下であることが要求され、挿入損失が大きすぎると光の透過率に影響を与えます。

3. 再現性
アダプタは使用時に頻繁に挿抜する必要があるため、アダプタの耐久性が高く、通常の規格では挿入損失を保証せずに500回まで挿抜する必要があります。

4.働く温度
-40°C〜75°Cはアダプターの正常な使用範囲で、Yiyuantong HYCのこのLCアダプターの動作温度は-40°C〜85°Cです。

5.ファイバーアダプターの位置合わせ材料
光ファイバアダプタの最も重要な構成要素であるアライメントブッシングは、通常金属製またはセラミック製で、セラミック製の結晶構造は硬く変形が容易ではないため、高速アライメントと高速化が可能です。 精密ファイバ端面ドッキング.

光ファイバアダプタの選択では、上記の重要な性能を使用して、比較的高品質で安定性の高い光ファイバアダプタを選別することができます。 光ファイバアダプタは、通信機器室、FTTH家庭用光ファイバ、ローカルエリアネットワーク、光ファイバ通信システム、光ファイバ接続伝送機器、および防衛作業で広く使用されています。 光ファイバアダプタ製品は小型ですが、その品質は光ファイバリンク全体に直接影響するため、製品の品質は厳格かつ包括的でなければなりません。

HYC は光通信受動基本部品の研究開発、製造、販売およびサービスを専門とする国家ハイテク企業です。 同社の主力製品は、光ファイバコネクタ（データセンター高密度光コネクタ）、波長分割マルチプレクサ、光スプリッタ、およびその他の3コア光パッシブインフラストラクチャデバイスで、家庭用光ファイバ、4Gモバイル通信で広く使用されています。 インターネットデータセンター、防衛通信、その他の分野. 

HYC の公式ウェブサイトをご覧ください：http://www.hyc-system.com
RaspberryPi 3 Model B+ にUbuntu18.04を入れてみる　その2

# 初めて記事作ったら思いのほか量が増えた
[前の記事](https://qiita.com/frafrakki/private/cd50f586403eeb52e016)に全部書ききりたかったけど正気に戻った者の末路。
引き続きおつきあいください。~~何をするにもクソ重いラズパイ~~

## 1.言語設定
###日本語化
デフォルトだと英語環境なので、日本に染まっていただきましょう。
スタートボタンめいたものをクリックして、その中のPreferencesの下にLanguage Supportがあると思うので立ち上げてください。
立ち上がったらInstall/Remove LanguageをクリックしてJapaneseにチェックを入れてApplyします。
その後、日本語をEnglishの上にドラッグ&ドロップしてApply System-Wideをクリックします。
再起動すれば日本語化完了です。初回起動時にホームディレクトリを日本語化するか聞かれますが、個人的には英語のままのほうがいいと思います。
###IMEの設定
このままでは（多分）日本語での入力ができないので、設定しましょう。
先ほどと同様の手順で言語サポート設定を開いてください。
そのウィンドウの一番下にキーボード入力メソッドのようなものがあると思うので、そこをIBusにしてください。
あとは`Windows+Space`でいつもの日本語入力ができるようになっているはずです。できなかったらMozcがIBusに設定されていないだけだと思うので、設定してあげてくださいね。

## 2.時刻設定
お気づきでしょうが、時間がずれています。僕はずれていました。
デフォルトではNTPサーバへの接続ができないそうなので、その設定を行います。

```shell:
sudo su
apt -y install ntp
vi /etc/ntp.conf
```

これでNTPサーバを使うためのパッケージのインストールと設定ファイルのエディタが立ち上がりました。またviです。軽いんですよね。
ここは参考にさせていただいたサイト様のものをコピペします。神のごときわかりやすさだったので。

```vim

# 21行目：デフォルト設定はコメントにして自身のタイムゾーンのNTPサーバーを追記
#pool 0.ubuntu.pool.ntp.org iburst
#pool 1.ubuntu.pool.ntp.org iburst
#pool 2.ubuntu.pool.ntp.org iburst
#pool 3.ubuntu.pool.ntp.org iburst

# Use Ubuntu's ntp server as a fallback.
#pool ntp.ubuntu.com
server ntp.nict.jp iburst
server ntp1.jst.mfeed.ad.jp iburst
server ntp2.jst.mfeed.ad.jp iburst 

# 53行目：時刻同期を許可する範囲を追記
restrict 10.0.0.0 mask 255.255.255.0 nomodify notrap
```

適当に頑張りましょう（）
多分これで設定できているとは思いますが、一応動作確認として

```shell:
systemctl restart ntp
```
これでさっき追加した3つが見れればオッケーだと思います。
終わったら忘れずに`exit`しましょう。危ないので。

## 3.エディタのインストール
宗教戦争が勃発しがちなこのコーナーです。
viがダメというわけでは・・・わけでは・・・
まぁとりあえず自分はVSCodeが好きなのでこっちをインストールしていきます。
比較的軽い、なおかつ高機能なエディタなんですよ。すごいやつです。

```shell:
wget -qO - https://packagecloud.io/headmelted/codebuilds/gpgkey | sudo apt-key add -
sudo apt-get install code-oss=1.29.0-1539702286
sudo apt-mark hold code-oss
```
code-ossという、VSCodeのクロスプラットフォーム版をインストールしていきます。
実は、2019年7月25日現在の最新版1.32.0ではバグが存在するらしく、ウィンドウは出てきてもその中に何も表示されません。
なので、ひとつ前の1.29.0に戻すことで対応しています。
また、勝手にバグてんこ盛りのバージョンにアップデートされても困るので、アップデート対象外に設定してあります。
修正されたら

```shell:
sudo apt-mark unhold code-oss
```
してあげればアップデート対象になるので。

---
いかがだったでしょうか？
これでラズパイを使った開発ができるようになるかと思います！

ちなみにRaspbianだとデフォルトで入るであろうWiring Pi だとかのGPIOを使うためのものは何もインストールできていないのでこのままではただのクッソ重いUbuntuです。~~どんな縛りプレイですか？~~
またどこかのタイミングでGPIOを有効にする記事を書くと思います。多分

2019/07/26追記
[GPIOの記事書きました](https://qiita.com/frafrakki/private/3b14b0a318039e51dadd)。

## 穴が開くほど見たサイト様
[第564回　Raspberry Pi 3 Model B+にUbuntu 18.04 LTSをインストールする] (https://gihyo.jp/admin/serial/01/ubuntu-recipe/0564?page=2)
[NTP サーバー : NTPd の設定](https://www.server-world.info/query?os=Ubuntu_18.04&p=ntp&f=1)
[ラズベリーパイで Visual Studio Code を使う](http://dotnsf.blog.jp/archives/1073495828.html)
[RaspberryPiにVSCodeをインストールして起動してもウィンドウに何も表示されない問題](https://qiita.com/sh00t/items/af46724fabadef4fcfd0)
Nuxt+Vueで、SVGを使う方法がめっちゃ簡単だった件

ポートフォリオサイトを作ってみました。
その際、SVGを使うことがあったので、
知見として、記事にしておこうかと。

#nuxt-svg-loaderのインストール
まずは、nuxt-svg-loaderをインストールしていきます。
npm：[nuxt-svg-loader](https://www.npmjs.com/package/nuxt-svg-loader)

```javascript:
npm i -D nuxt-svg-loader
```

#基本設定
インストールした、nuxt-svg-loaderをnuxt.config.jsのmodulesに追記する。

```javascript:nuxt.config.js
  ....
  /*
   ** Nuxt.js modules
   */
  modules: [
    'nuxt-svg-loader'
  ],
  ....
```

#読み込みたいSVGを読み込む
pages/index.vueなどSVGを使いたいところページに下記ソースを記述。
importにSVGのパスを指定し、componentsに記述したcomponent名をtemplate内に追加。
これでnpm run devしたら読み込まれてると思います。
ワイ「めっちゃ簡単やんけ！！すごいな！！！」と感動しましたとさ。。。

```vuejs:index.vue
<template>
  <div class="svg">
    <SampleSvg />
  </div>
</template>

<script>
import SampleSvg from '@/assets/images/svg/sample.svg'

export default {
  components: {
    SampleSvg
  }
}
</script>
```
CentOSにRancherをインストールしてみる手順

## 前提条件
### OS

```
Ubuntu 16.04 (64-bit x86)
Docker 17.03.x, 18.06.x, 18.09.x
Ubuntu 18.04 (64-bit x86)
Docker 18.06.x, 18.09.x
Red Hat Enterprise Linux (RHEL)/CentOS 7.6 (64-bit x86)
RHEL Docker 1.13
Docker 17.03.x, 18.06.x, 18.09.x
RancherOS 1.5.1 (64-bit x86)
Docker 17.03.x, 18.06.x, 18.09.x
Windows Server 2019 (64-bit x86)
Docker 18.09
Experimental, see Configuring Custom Clusters for Windows
```

https://rancher.com/docs/rancher/v2.x/en/installation/requirements/

### HWリソース

小さいのなら

* vCPU:1
* mem:4 GB

https://rancher.com/docs/rancher/v2.x/en/installation/requirements/


### NW&port周り

https://rancher.com/docs/rancher/v2.x/en/installation/requirements/

## 導入手順

```
$ sudo -s
# yum -y install docker
# systemctl enable docker
# systemctl start docker
# sudo docker run -d --restart=unless-stopped -p 80:80 -p 443:443 rancher/rancher
```

実際にブラウザでアクセス

* https://IP
JavaScriptで２次元配列のtranspose(行列入れ替え)

## やりたいこと

2次元配列のX軸Y軸を転置したい場合に、Pythonのnumpyで使える「transpose」関数と同じことをJavaScriptで行う場合のメモ。

以下はPythonの例。

```python
import numpy as np

org = [[ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ]]

np.array(org).transpose().tolist()
# [[1, 4, 7], [2, 5, 8], [3, 6, 9]]
```

## JavaScriptでやる方法

[こちら](https://qiita.com/kznr_luk/items/790f1b154d1b6d4de398)の記事で紹介されているワンライナーで書く方法。ちょっとテクニカルな感じ。

```javascript
const org = [[ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ]]

const transpose = a => a[0].map((_, c) => a.map(r => r[c]))

transpose(org)
// [[1, 4, 7], [2, 5, 8], [3, 6, 9]]
```


[Lodash](https://lodash.com/)が使える場合、zip関数を使うと簡単。

```javascript
const org = [[ 1, 2, 3 ], [ 4, 5, 6 ], [ 7, 8, 9 ]]

_.zip.apply(null, org)
// [[1, 4, 7], [2, 5, 8], [3, 6, 9]]
```

おしまい。
技術資料をGoogle検索するテクニック

# はじめに
分からないことを検索で調べる（ググる）スキルはプログラマの必須スキルと言っても良いですが、適切な検索ワードを考えるテクニックについて解説しているサイトは意外と多くありません。

プログラミング中のググり方について、普段気を付けている内容をまとめてみました。

# 検索方針
## 辿り着きたいサイトに書いてありそうな単語をイメージする
Google検索はWebサイトを検索するツールです。
つまり、Webサイト上に存在しない検索ワードからたどり着くことはできません。
必要な情報が書いてあるサイトを探すためには、そのサイトに書いてありそうな単語をイメージすることが重要です。

## 検索ワードはできるだけ具体的にする
上記に関連しますが、ちゃんとした解説が載っているサイトは具体的なワードで説明されていることが多いです。

そのため、プログラミング中にエラーが出た時は
「Java エラー」
で検索するより
「Java エラー NullPointerException」
で検索した方が必要な情報に辿り着きやすいです。

エラー名以外にも

- フレームワーク名、ライブラリ名
- Java6, Java7, Java8 などのバージョン名まで含めた名称

などの具体的な名称を含むほど検索結果の精度が上がります。

ただしファイル名や変数名などの **「自分、またはチームの誰かが付けた名前」**を検索ワードに含めると逆に結果がヒットしなくなることに注意してください。

## 問題を切り分ける
Web上に情報を残してくれている人が自分と全く同じ環境・同じ問題で困っていることは少ないので、出来るだけ問題を切り分けてから検索しましょう。

#### 失敗例
たとえば
 **「JavaでDBからデータを取ってきて、画面に表示する」** 
という機能を作りたい場合、
「Java DB データ 表示」
といった検索ワードで検索しても必要な情報が出てくることはあまりないです。

サンプルコードがヒットするかもしれませんが、大抵の場合
「DBが違う」「画面に表示するためのフレームワークが違う」
などの理由でそのままコピペすると上手くいかなかったりします。

このような失敗は、問題を適切に切り分けできていないことが原因です。

#### 成功例
 **「JavaでDBからデータを取ってきて、画面に表示する」** 

だと問題が複合的なので、これを

 **「JavaでDBのデータを読み込む方法」**
**「Javaで画面にデータを表示する方法」** 

といった感じで問題の切り分けを行いましょう。

更に上述した「検索ワードを具体的にする」を適用して、

 **「JavaでMySQLのデータを読み込む方法」** 
 **「JavaのSpringフレームワークで画面にデータを表示する方法」** 

上記のように問題の切り分け・具体化を行うことで必要な情報が得られる可能性が上がります。

今回の場合、最終的には

 **「java mysql 読み込み」** 
 **「java spring 画面 表示」** 

といった検索ワードになると思います。

## コードの安易なコピペをしない
- コードを安易にコピペしない
- コピペする場合、コピペしてとりあえず動かしてみる
- 動いたコードについて、全ての行が何をやっているのか説明できるようになるまで更に調べる

上述したように、Web上に情報を残してくれている人が自分と全く同じ環境・同じ問題で困っていることは少ないです。

コードのコピペで起こりうる問題は、

- そもそも実行環境が異なっていて動かない
- 必要ないコードが混じっていて別の場所で悪さをする

主に上記の2つです。
これらを防止するため、まずはコピペで動くか試して、その後コピペしたコードが本当に過不足ないかを調べる、という手順が望ましいです。

コードが正しいか調べる場合は、大抵の場合使っている言語やライブラリ、フレームワークの公式ドキュメントを漁ることになると思います。

## 筋の悪い検索ワードはすぐに見切りをつける
- 検索結果のトップ10件に有用なサイトが1つもなければ検索ワードを考え直す
- 有用なサイトがあった場合、3ページ目まで掘り下げる
- 3ページ目までに必要な情報が揃わなければ検索ワードを変える

大抵の場合、上位に関係ないサイトが来るような検索ワードは掘り下げてもあまり得るものがありません。
また、たとえ効果的な検索ワードでも下位の結果まで漁るのは効率が悪いです。
上位3ページを見て情報が揃わなければ検索ワードを変更しましょう。

## 情報の鮮度に気を付ける
ライブラリやフレームワークなど、頻繁に更新がある対象について調べる場合はサイトの更新日時や実行環境に気を付ける必要があります。
過去のバージョンでは動くコードが最新のバージョンだと動かない、なんてことはよくある話です。

実行環境を書いていない記事、更新日時が古い記事は上手く動かない可能性があることに注意しましょう。

# 参考
## エラーの解決方法を探す
[エラーメッセージの読み方と対処, 検索や質問の原則](https://qiita.com/cannorin/items/eb062aae88bfe2ad6fe5)

エラーへの対処方法はいくつかテクニックがありますが、
既にまとまってるページがあったのでリンクを貼っておきます。
Swift：指定フォントサイズに対するUILabelとNSTextFieldの高さ

UILabelやNSTextFieldなどのコンポーネントの高さを指定して，中のテキストのフォントサイズを自動で調節しようと思い，フォントサイズを変化させた時のUILabelとNSTextFieldの大きさを見てみました．

# Playgroundでシミュレートして大きさを表示させてみた
## UILabel
```swift:UIKit.playground
import UIKit

let label = UILabel(frame: CGRect.zero)
label.text = "あいうえお"

for i in (1...50) {
    label.font = UIFont.systemFont(ofSize: CGFloat(i))
    label.sizeToFit()
    print("\(i), \(label.frame.height)")
}
```

## NSTextField
```swift:Cocoa.playground
import Cocoa

let label = NSTextField(labelWithString: "あいうえお")

for i in (1...50) {
    label.font = NSFont.systemFont(ofSize: CGFloat(i))
    label.sizeToFit()
    print("\(i), \(label.frame.height)")
}
```

# 結果
フォントサイズ１~50までの結果をプロットしてみました．

| フォントサイズ | UILabelのheight | NSTextFieldのheight |
|--:|--:|--:|
|  1 |  1.5 |  2.0 |
|  2 |  2.5 |  3.0 |
|  3 |  4.0 |  5.0 |
|  4 |  5.0 |  6.0 |
|  5 |  6.0 |  7.0 |
|  6 |  7.5 |  8.0 |
|  7 |  8.5 |  9.0 |
|  8 | 10.0 | 11.0 |
|  9 | 11.0 | 11.0 |
| 10 | 12.0 | 13.0 |
| 11 | 13.5 | 14.0 |
| 12 | 14.5 | 16.0 |
| 13 | 16.0 | 17.0 |
| 14 | 17.0 | 18.0 |
| 15 | 18.0 | 19.0 |
| 16 | 19.5 | 19.0 |
| 17 | 20.5 | 21.0 |
| 18 | 21.5 | 22.0 |
| 19 | 23.0 | 23.0 |
| 20 | 24.0 | 24.0 |
| 21 | 25.5 | 25.0 |
| 22 | 26.5 | 27.0 |
| 23 | 27.5 | 28.0 |
| 24 | 29.0 | 29.0 |
| 25 | 30.0 | 30.0 |
| 26 | 31.5 | 31.0 |
| 27 | 32.5 | 33.0 |
| 28 | 33.5 | 34.0 |
| 29 | 35.0 | 35.0 |
| 30 | 36.0 | 36.0 |
| 31 | 37.0 | 38.0 |
| 32 | 38.5 | 39.0 |
| 33 | 39.5 | 40.0 |
| 34 | 41.0 | 41.0 |
| 35 | 42.0 | 42.0 |
| 36 | 43.0 | 44.0 |
| 37 | 44.5 | 45.0 |
| 38 | 45.5 | 46.0 |
| 39 | 47.0 | 47.0 |
| 40 | 48.0 | 48.0 |
| 41 | 49.0 | 50.0 |
| 42 | 50.5 | 51.0 |
| 43 | 51.5 | 52.0 |
| 44 | 53.0 | 53.0 |
| 45 | 54.0 | 54.0 |
| 46 | 55.0 | 55.0 |
| 47 | 56.5 | 56.0 |
| 48 | 57.5 | 57.0 |
| 49 | 58.5 | 58.0 |
| 50 | 60.0 | 60.0 |

![スクリーンショット 2019-07-25 14.40.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67153/c4690064-e7b5-4405-d835-38b35c842d7a.png)

# コンポーネントの高さに合わせたフォントサイズの指定
トレンドラインの数式を元に今の高さにあったフォントサイズを出力します．

```swift:UILabel
func adjustUILabelFontSize() {
    let h = label.frame.height
    let fontSize: CGFloat = (2.0 * (h - 0.249) / 1.1934).rounded() / 2.0
    label.font = UIFont.systemFont(ofSize: fontSize)
    label.sizeToFit()
}
```

```swift:NSTextField
func adjustNSTextFieldFontSize() {
    let h = label.frame.height
    let fontSize: CGFloat = (2.0 * (h - 1.0278) / 1.177).rounded() / 2.0
    label.font = NSFont.systemFont(ofSize: fontSize)
    label.sizeToFit()
}
```

# 備考
UILabelの場合は`.adjustsFontSizeToFitWidth`という幅にあった大きさのフォントに調節するやつがあります．
navigationBar,navigationController優良記事まとめ[Swift]

# 基本
**・[ios - StoryboardのNavigation Barの存在理由 - スタック・オーバーフロー](https://ja.stackoverflow.com/questions/12606/storyboard%E3%81%AEnavigation-bar%E3%81%AE%E5%AD%98%E5%9C%A8%E7%90%86%E7%94%B1/12659)**
→`Navigation Bar`と`Navigation Controller`の違い・メリデメなど
**・[【Swift/iOS】ナビゲーションバーのカスタマイズ | カピ通信](https://capibara1969.com/933/)**
→詳し目なので**辞書がわり**に使うのがいいかも(`barTintColor`を適用すると)
**・[StoryboardでNavigationBarを表示する - Takahiro Octopress Blog](http://grandbig.github.io/blog/2015/05/10/storyboard-navigationbar/)**
→`button`の追加の仕方など
**・[[Swift] ナビゲーションバーのデザインを変更する - YoheiM .NET](https://www.yoheim.net/blog.php?q=20160705)**
**・[【Swift4.0】UINavigationControllerの文字色、背景色の変更や背景の透過方法【Objective-C】 | ニートに憧れるプログラム日記](http://program-life.com/61)**
→`UINavigationBar.appearance()`と`self.navigationController?.navigationBar`の違いなど

**・[【Swift】ヘッダー（ナビゲーションバー）の色を変更する - Qiita](https://qiita.com/Mujica/items/5f85870e624735d272a9)**
**・[[Swift] navigationBarを透明にする処理 - Qiita](https://qiita.com/mochizukikotaro/items/a4405701dcc706fd643e)**

# 応用
#### Swift
**・[ios - Navigation Bar Appearance barTintColor alpha component - Stack Overflow](https://stackoverflow.com/questions/33677706/navigation-bar-appearance-bartintcolor-alpha-component)**
→`UIImageExtension`を用いてnavigationBarの`barTintColor`の`alpha`を調整する方法など
**・[ナビゲーションバーを透明にする transparent UINavigationBar - ObjecTips](http://koze.hatenablog.jp/entry/2015/10/08/093000)**
→`tableView`との組み合わせなど
#### Objective-C
**・[ios – ステータスバーのアルファの変更 - コードログ](https://codeday.me/jp/qa/20190323/465896.html)**
**・[ios – ナビゲーションバーのアルファ値を変更する - コードログ](https://codeday.me/jp/qa/20190226/287089.html)**

#### ライブラリ
**・[forkingdog/FDFullscreenPopGesture: A UINavigationController's category to enable fullscreen pop gesture with iOS7+ system style.](https://github.com/forkingdog/FDFullscreenPopGesture)**
→遷移中のアニメーションをいい感じにしてくれるライブラリ


# 関連記事
`Status Bar`も気になる方はこちらもチェック
**・[Status Bar優良記事まとめ[Swift] - Qiita](https://qiita.com/jbnkk40/items/5e89597c77844244f80c)**
isucon8の予選の環境構築

# なぜこの記事を書いたか？
自分自身が環境構築で手間取ったため、もし同じような人がいた場合の助けになればと思い書きました
便利なスクリプトの存在なども、あとから気づいたので同じ轍を踏まないようにと備忘録的なことと
vagrantほとんどわからないところからいくつか学びがあったので、そのメモも兼ねています

解析編は[こちら](https://qiita.com/sora083/items/b48f3dd5fd27a9492f87)

# 前提
* MacBookPro
* vagrantインストール済み
* VirtualBoxインストール済み
* matsuuさんの[vagrant-isucon](https://github.com/matsuu/vagrant-isucon)を利用しての環境構築
* 今回の対象は[isucon8-qualifier](https://github.com/matsuu/vagrant-isucon/tree/master/isucon8-qualifier)
* 上記のページに説明が書かれていますので、そちらで充分な方はそちらを直接見ていただいたほうが早いかもしれません
* 実行対象のアプリケーションはgo

# vagrantでの環境立ち上げまで
1.Vagrantfileをclone

```bash
git clone https://github.com/matsuu/vagrant-isucon.git
```

2.ネットワーク設定を有効化

```
cd vagrant-isucon/isucon8-qualifier
vim Vagrantfile

※config.vm.network "private_network", ip: "192.168.33.10"のコメントを外す
```

3.vagrantを起動して変更をリロード

```
vagrant up

### 必要であれば
vagrant provision
```

# ログイン〜データベース初期化

1.アプリ用サーバにsshログイン

```
vagrant ssh webapp
```

2.isuconユーザーにスイッチ

```
sudo -i -u isucon
```

3.DB(mariadb)の起動

```
sudo systemctl start mariadb.service
```

4.データベース初期化、アプリが動くのに最低限必要なデータ投入

```
cd torb
./db/init.sh
```

# アプリケーションの起動
１．goのアプリケーションを起動

```
### おそらく初期でperlが動いているので停止
sudo systemctl stop torb.perl

sudo systemctl start torb.go
```

2.Webサーバ(h2o)の起動

```
sudo systemctl start h2o.service
```

3.ブラウザで確認
↓の結果で表示されたIPアドレスを入力して画面が出てくれば立ち上げ完了

```
ip addr
```

# ベンチの起動
1.ログイン

```
vagrant ssh bench
sudo -i -u isucon
```

2.ベンチアプリのコンパイル

```
cd torb/bench/
make deps
make
```

3.初期データ生成

```
./bin/gen-initial-dataset
```

4.ベンチマーク実行

```
./bin/bench -remotes=[アプリケーションのIPアドレス] -output result.json
```

5.ベンチ結果の確認

```
jq . < result.json
```

# おまけ
アプリログの確認

```
sudo journalctl -f -u torb.go
```

# 参考
https://github.com/matsuu/vagrant-isucon/tree/master/isucon8-qualifier
https://github.com/isucon/isucon8-qualify

### vagrant関連
https://teratail.com/questions/95371
https://qiita.com/srockstyle/items/233ef326a75362200a91
【R言語】もうggplot2の操作も怖くない!esquisseパッケージの効力が絶大だった件

#はじめに

Rユーザーの皆さん、ggplot2を快適に使用していらっしゃいますか？

ぼくはと言いますと大変に苦手でして、毎回RStudioを開いて可視化の処理を行うたびに「あれ、どうやるんだっけ？」状態です。
データクレンジングには興味があるので飲み込みに抵抗はないのですが、集計や可視化にはあまり関心がなかったので疎かになりがちだったんですよね。

で、どうしたもんかと調べていたらggplot2をGUI上で操作できるという夢のようなパッケージを発見した次第です。
これから紹介する「esquisse」パッケージはとても便利です！
ぼくと似たような悩みを抱えている方、より快適にggplot2を使用したいという方にはうってつけのツールですよ！
ちなみに「esquisse」はフランス語で「スケッチ」を意味するそうです。

#esquisseパッケージの使い方

パッケージの導入と使い方はとっても楽です。

```r:esquisse.r
# ライブラリ -------------------------------------------------------------------


pacman::p_load(esquisse)

# ソース本文 -------------------------------------------------------------------


esquisse::esquisser(iris)
```

これだけ。
パッケージの使用宣言をして、関数を実行するだけでGUIから操作ができてしまいます。
esquisser関数を使用すると以下の画面が出てきます。
ドラッグ&ドロップで見たい項目やグルーピング、色分け等が一瞬で出来ます。

![esquise_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162354/d9b4495c-02b5-7a59-2839-c8498d64c365.png)

たとえばirisのSpecies(種)別にPetal.Length(花弁の長さ)を表示させてみます。

![esquise_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162354/0430303c-b554-1a47-8b8b-d1dcc7f65aa5.png)

この通り。一瞬ですね。
ヒストグラムだけでなくデータセット項目の組み合わせにより箱ひげ図、散布図等も可視化することができます。

![esquise_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162354/61098c26-22c5-52d2-4eab-a27bc5b278be.png)

作成したグラフは画面下メニューでタイトルやオプション等を自由に設定できるほか、ソースコードをスクリプトに貼り付けることが出来てとっても便利！(ここ重要)

![esquise_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/162354/a7386055-17d1-0876-4b90-4318d9e0fa4b.png)

[Export & code]を選択し、[Insert code in script]をクリックするだけの簡単操作でスクリプトに貼り付けができます。**なんだこれ、すげえなesquisse**


#おわりに

何度も言いますが「esquisse」とってもとっても便利です。
ggplot2は初心者だという方も手練れの方も、ぜひ覚えていってください。
やっていきましょう。
0.1ぐらいから始めるProjectEuler@python　Problem 5

どもども、最近特に何もないとある学生です。
というわけで、5問目書いていきましょう。

```python:Problem_5.py
 #2520 は 1 から 10 の数字の全ての整数で割り切れる数字であり, そのような数字の中では最小の値である.
#では, 1 から 20 までの整数全てで割り切れる数字の中で最小の正の数はいくらになるか.
for a in range(2,3000000000,2):
    flag = "なんかの数字で割り切れた"
    for c in range(3,20):
        if not a % c == 0:
            flag = "割り切れてない"
            break
    if flag == "なんかの数字で割り切れた":
        print(a)
        break
```
解　232792560
はい、私はこう書きました。
####解き方の解説をしていきます。
aはrangeで2から適当に3十億までと行きたいところですが、
1から20までで割り切れる数ということは、確実に偶数であるため1ずつではなく2ずつにすると計算量が半分になります。
flagという関数を作り、割り切れたかどうかの管理をします。
cは1～20ですが、先ほども言ったように偶数確定なので2で割る必要がないので3,20にしています。
最後に割り切れたらflagを書き換えないで最後のif文を実行する感じです。

こんな感じですかねもしわからないことやアドバイス等あればコメントしていただければと思います。
というわけで気が向いたら次も見ていってください。よろしくお願いします。
rails_autolinkのリンクのはみ出し部分の折り返し

#はじめに
私のポートフォリオをスマホで見ているときにリンクがはみ出でいることに気が付きました。↓
gemの'rails_autolink'を使っています。

![auto_link.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348610/12c79498-ae15-0418-8228-f21701bd17c3.png)

#最終的なのコード

simple_formatでやってみましたが、リンクの折返し方がわからず、また、複数行改行しても反映されなかったため、以下のようにsimple_formatを使わずにヘルパーを使いました。
リンクの折返しは最終的にクラスを与えて、cssで解決しました。
参考↓↓↓
[長いURLが折り返してくれない！URLを折り返させるCSS](https://www.iscle.com/web-it/long-ulr-css.html)

```erb:views/blogs/_blog.html.erb
<%= auto_link(br(blog.body), :html => { :target => '_blank', :class => 'wrapper_link' }) %>
```
```rb:helpers/application_helper.rb
def br(str)
  h(str).gsub(/\R/, '<br>').html_safe
end
```
hはhtml_escapeのエイリアスみたいです。知らんかった😅
scivolaさんから教えてもらいました。

```assets/stylesheets/application.scss
.wrapper_link {
  word-break: break-all;
}
```

![auto_link2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/348610/65bfa2ec-4686-81dc-9939-545c003397e5.png)

ちゃんと折り返しました😆
リンクの色を変更していてわかりずらいですが...
Expo(で作ったプロジェクト)が動かない "Error: Cannot find module '../../tools/PackageManager'"

# はじめに
普段はReactやVueをゴリゴリ書いているフロントエンジニアですが、モバイルにも興味が出てきたのでReactNativeにも手を出してみようと思いExpoをインストールしてみました。
ですが起動の段階でタイトルのエラーに引っかかったので解決方法を共有します。

# 発生したエラー内容

Expoで作成したプロジェクトでyarn startをした時に発生しました。

```javascript
yarn run v1.12.3
$ expo start
Starting project at /Volumes/workspace/AwesomeProject
Expo DevTools is running at http://localhost:19002
Opening DevTools in the browser... (press shift-d to disable)
internal/modules/cjs/loader.js:638
    throw err;
    ^

Error: Cannot find module '../../tools/PackageManager'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/Volumes/workspace/AwesomeProject/node_modules/@react-native-community/cli/build/commands/install/install.js:10:46)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)

Metro Bundler process exited with code 1
Set EXPO_DEBUG=true in your env to view the stack trace.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```
# 結論と解決方法

Macのボリュームを大文字/小文字で区別していることが原因でした。
Macのデフォルトのボリュームを使うか、新たにパーティションを切って大文字/小文字を区別しない設定で作成することで回避出来ます。
<img width="895" alt="スクリーンショット 2019-07-25 13.16.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/327801/94e3dec2-8fc3-c4fa-634b-8a1394808c2e.png">
# 原因

WindowsやMacはデフォルトのボリューム設定ではファイルの大文字と小文字は区別しないため、下記のようなimportも可能です。

ディレクトリ構成

```javascript
./App.js
./packageManager.js
```

App.js

```javascript
// ファイルは名は小文字"p"だが、importのファイル名は大文字”P"
import PackageManager from "./PackageManager.js";
```

しかし、Linux等の場合はデフォルトで大文字小文字を区別するので、
*AWS環境にデプロイしたら大量のエラーが・・・*
なんて事が起こりえます。

そのため、私はMacのディスクユーティリティーからプログラミング用の大文字小文字を区別するパーティションを作成して、その中にワークスペースを作る習慣にしていたため今回の問題が発生しました。

# エラーは誰が出しているのか

エラー文の途中にも出力されていますが、 `@react-native-community/cli` が出力しています。
ただし、 `@react-native-community/cli` 自体の修正は 2019/4 の段階でマージされているのですが、マージされたタイミングで *メジャーバージョンが2.0* に上がりました。
expo-cliで生成されるpackage-lock.jsonを確認すると、 `"@react-native-community/cli": "^1.2.1"` となっているため、メジャーバージョンアップには対応出来ずバグが残ったままという結果となっています。  

expo/expo-cli -> expo/react-native -> @react-native-community/cli
という順で参照しているので、expo/react-nativeが@react-native-community/cliのv2.0に対応するまで気長に待つしかなさそうです。
AtCoder Regular Contest 005 C - 器物損壊！高橋君

# 器物損壊！高橋君

https://atcoder.jp/contests/arc005/tasks/arc005_3

全探索。まず、移動にかかるコストのリストを作る。
通路を通って移動する場合はコストはそのまま。壁を壊す場合は+1。最初はスタート以外のコストをinfにしておいて、より低いコストが書き込まれていた場合は探索終了。

下のコードでは書いていないが、探索終了後にgoal地点のコストが2以下の場合はTrueとなる。

```python

raw_input = input().split()
h = int(raw_input[0])
w = int(raw_input[1])
maze = raw_input[2:]
dist = np.full((h, w), np.inf)
queue = deque()
start = [0, 0]
queue.append(start)
par = start
dist[y][x] = 0
while queue:
    y, x = queue.popleft()
    cost = dist[y][x]
    for new_y, new_x in ([y+1, x], [y-1, x], [y, x+1], [y, x-1]):
        if 0 <= new_y <= w-1 and 0 <= new_x <= h-1:
            if maze[new_y][new_x] == '#':
                new_cost = cost + 1
            else:
                new_cost = cost
            if new_cost < dist[new_y][new_x]:
                dist[new_y][new_x] = new_cost
                queue.append([new_y, new_x])

```
例えば、以下の迷路に対して、dist（距離の行列）の出力は以下のようになる。

```
['s.........',
 '#########.',
 '#.......#.',
 '#..####.#.',
 '##....#.#.',
 '#####.#.#.',
 'g##.#.#.#.',
 '###.#.#.#.',
 '###.#.#.#.',
 '#.....#...']

array([[0., 0., 0., 0., 0., 0., 0., 0., 0., 0.],
       [1., 1., 1., 1., 1., 1., 1., 1., 1., 0.],
       [1., 0., 0., 0., 0., 0., 0., 0., 1., 0.],
       [1., 0., 0., 1., 1., 1., 1., 0., 1., 0.],
       [2., 1., 0., 0., 0., 0., 1., 0., 1., 0.],
       [3., 2., 1., 1., 1., 0., 1., 0., 1., 0.],
       [2., 2., 1., 0., 1., 0., 1., 0., 1., 0.],
       [3., 2., 1., 0., 1., 0., 1., 0., 1., 0.],
       [2., 1., 1., 0., 1., 0., 1., 0., 1., 0.],
       [1., 0., 0., 0., 0., 0., 1., 0., 0., 0.]])

```
JFreeChart-複数値チャート-UIで特定データを強調する


目次 ⇒ [JFreeChartサンプル](https://qiita.com/artery/items/3e9c63e5c14a9e965c97)

```java

package jp.avaj.lib.chart;

import java.util.ArrayList;
import java.util.List;
import java.util.Random;

import org.jfree.chart.ChartFrame;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.axis.CategoryAxis;
import org.jfree.chart.axis.NumberAxis;
import org.jfree.chart.plot.CategoryPlot;
import org.jfree.chart.plot.Plot;
import org.jfree.chart.renderer.category.ScatterRenderer;
import org.jfree.data.statistics.DefaultMultiValueCategoryDataset;

/**
■ JFreeChart-複数値チャート-UIで特定データを強調する


・複数のデータが表示されていると分かりにくいことがある。
・ArcCategoryPlotEmphasizeWinを使うと、データ選択画面が表示され、特定のデータを強調表示できる.
・強調の方法はArcEmphasizeに定義されており、以下の方法がある。
  ・ITEM ⇒ ポイントを大きく表示する。
  ・LINE ⇒ 線を太く表示する。
  ・BLINK ⇒ ブリンクさせる.該当データを本来の色とグレイで交互表示する。0.5秒間隔。
・本サンプルではITEMを使用する。


 */
public class Chart13_02 {
  // 目次-DefaultMultiValueCategoryDatasetを利用したチャート
  A_Chart13 a_Chart13;
  // 目次-Artery-JFreeChart用のライブラリ
  A_Chart00 a_LibChartSampeContents;

  public static void main(String[] args) {
    // 表示データの作成
    DefaultMultiValueCategoryDataset dataSet = null;
    {
      final int ROW = 3;
      final int COL = 4;
      Random ran = new Random();
      dataSet = new DefaultMultiValueCategoryDataset();
      List<Double> list;
      for (int row=0; row<ROW; row++) {
        for (int col=0; col<COL; col++) {
          list = new ArrayList<Double>();
          for (int i=0; i<3; i++) {
            list.add((double)ran.nextInt(100));
          }
          dataSet.add(list,"ROW"+row,"COL"+col);
        }
      }
    }
    // 軸の設定
    CategoryAxis xAxis = new CategoryAxis("商品");
    NumberAxis yAxis = new NumberAxis("売上");
    // レンダラの設定
    ScatterRenderer renderer = new ScatterRenderer();
    // Plotの作成
    CategoryPlot plot = new CategoryPlot(dataSet,xAxis,yAxis,renderer);
    //
    JFreeChart jfreeChart = new JFreeChart("ScatterRenderer",(Plot)plot);
    ChartFrame cFrame = new ChartFrame("ScatterRenderer",(JFreeChart)jfreeChart);
    cFrame.pack();
    cFrame.setVisible(true);
    //
    // UIを生成する
    new ArcCategoryPlotEmphasizeWin(cFrame,plot,ArcEmphasize.ITEM);
  }
}


```
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278568/60b14bdf-5356-40ab-abce-25b0a74e4b40.png)
windowsにpipenvを導入手順

pipenv公式: https://pipenv-ja.readthedocs.io/ja/translate-ja/index.html

# windowsにpipenvを導入する。

OS: Windows 10 Home(version 1709)
Python: 3.7

## pipenvをインストールする
```
$ pip install --user pipenv　
```

`python -m pipenv`でpipenvが動作します。

https://stackoverflow.com/questions/46041719/windows-reports-error-when-trying-to-install-package-using-pipenv

## 環境変数を設定する

pipenvの環境変数のパスを設定します。
僕の場合は` c:\users\ksait\appdata\roaming\python\python37\scripts`でした。

設定しないと以下のように`python -m`を毎回入力しないといけません。

```
$ python -m pipenv run python main.py
```



## pipenvを初期化する
```
$ cd myproject
$ pipenv install
```

## モジュールをインストールする
```
$ pipenv install numpy
```


## シェルに入る

```
$ pipenv shell
```

## スクリプトの登録

pipfileにスクリプトの登録を行う。

```
[scripts]
start = "python main.py"
```


## スクリプトの実行

```
$ pipenv run start
```



## リンク

- https://qiita.com/anvinon/items/5d9c128ef8b65b866dfe
- https://qiita.com/y-tsutsu/items/54c10e0b2c6b565c887a
- https://qiita.com/subarunari/items/dcbdad68ba1809b721b9
業務でよく使うツールBEST5

#アスペクト比計算ツール
これはレスポンシブ対応する際に、よく使うかも。
例えば、Youtubeのiframeタグの埋め込みで横幅をレスポンシブにしたい時とか、
背景画像をレスポンシブで画面幅どんなにあってもその分広がるようにする時に使うとか
横幅x縦幅を入力してポチッとするだけで、数値を出してくれる便利ツール。
リンク先：[アスペクト比計算ツール](https://aspect.arc-one.jp/)

#Screenpresso
無料で使えて、サクッとスクショ・録画が可能なツール
ディレクターやデザイナーに共有したい時、サクッとスクショして
編集機能もついているので、それを使って赤枠で加工したりも出来ます。

リンク先：[Screenpresso](https://www.screenpresso.com/ja/)

#Diffchecker
サクッと差分を出したい時によく使います。
HTMLとかCSS以外にも画像の差分とかも出せるので、便利。
Windowsの方は、[WinMerge](http://winmerge.org/?lang=ja)もおすすめです。

リンク先：[Diffchecker](https://www.diffchecker.com/)

#HTML Imagemap Generator
イメージマップは、作るのがかなりめんどうなので、
これで画像をポイッと投げて吐き出されたソースを使うだけなので、かなり便利。
短納期で画像でもおｋが出てる時はこれを使う。

リンク先：[HTML Imagemap Generator](https://labs.d-s-b.jp/ImagemapGenerator/)

#サブセットフォントメーカー
フォントの軽量化によく使います。
これに合わせて[WOFFコンバータ](https://forest.watch.impress.co.jp/library/software/woffconvert/)も入れておきましょう。
リンク先：[サブセットフォントメーカー](https://opentype.jp/subsetfontmk.htm)


以上！
業務でよく使うツールBEST5でした！
DNS(クライアント & サーバー)について『私が』『周囲の人に』知っておいてほしいことリスト

## これは何でないか
* 何かのオフィシャルではないし、何かを代表して公的に発言しているものではありません。

## これは何であるか
* 『私が』顧客とか、自社の人間に説明するとき、同じことを何度も書きたくないし、言いたくないためのメモです。

## DNSについて他人に説明するとき、気をつけてほしいこと
* コンテンツサーバ運用と、キャッシュサーバ利用の話をごっちゃにしてはいけない。
    * コンテンツサーバと、キャッシュサーバがそれぞれ何なのかくらいは、自分で調べてください。
    * 両方をまとめて「DNSサーバ」と呼ぶと、相手は混乱します。「DNSコンテンツサーバ」「DNSキャッシュサーバ」と呼ぶとよいでしょう。
* [コンテンツサーバ引っ越しの話](https://jprs.jp/related-info/guide/019.pdf)と、自身の管理しているゾーンの中のAレコード書き換え等のスコープをごっちゃにしてはいけない。
    * 早合点しない。相手のことばを遮らず、ちゃんと最後まで「本当は何をしたいのか」を聞く。
* 相手が納得いくまで、ちゃんと最後までケツを拭き、なんならトイレットペーパーを買い与えてやる、まで面倒を見るつもりがないのなら、説明してはいけない。
* 自分を不当廉売しない。お金を取るべきシーンではちゃんとお金を取る。

## 本題
* DNSは、多数のゾーン(管理責任範囲)を、多数の組織で、「分散して管理することができる」仕組み。
    * 分散しない選択もできる。
* 毎回問い合わせをしていたら、(リゾルバも、ルートサーバーも)負荷が恐しいことになる。なのでキャッシュという仕組みがある。
    * キャッシュが永遠に切れなかったら、設定変更できないので、TTLという仕組みがある。
    * TTLはレコードに対して設定されており、キャッシュサーバのキャッシュ機構(および、実装されていればスタブリゾルバのそれでも)の上で減算されていく。
    * TTLがたとえば「1日」と設定されている場合、そのキャッシュが捨てられるまでの時間も当然「1日」かかるので、コンテンツサーバ側でゾーンのレコードを修正して「5分」に変更したとしても、そんな事はキャッシュサーバは知りようがない。なので、「仮に、TTL短縮直前にクライアントがキャッシュした」と想定して、「1日」かかると考えておく。
* コンテンツサーバと、それに問い合わせをするキャッシュサーバは、まったく結合していない。つまり、push通知みたいなモノは無い。
    * だから、キャッシュサーバは、自分の好きなとき(クライアントからリクエストが来たとき)に問い合わせを送出してくるし、何かをキャッシュサーバ側に強制することは、コンテンツサーバ管理側にはできない。
        * たとえば、「今すぐキャッシュを破棄してTTLを5分ということにしてくれ！」みたいなことはできない。
* 「ドメイン管理」と「DNSゾーン管理」はほぼ同じことをやっている。NSレコード・グルーA書き換えという観点では。
    * これをわかるには、自分でドメインを取得して、親ゾーンA、子ゾーンBをそれぞれ別のDNSホスティングサービスに載せ、権限委譲設定をしてみるとわかりやすい。
    * おすすめはGoogle Cloud DNS。なぜかというと、同じサービスなのに、別ゾーンに対して異なるホスト名を割り振ってくれるので。
* [オライリーのバッタ本](https://www.oreilly.co.jp/books/9784873113906/) を読めば必要なことは凡そ書いてある。
    * 読みたくなければ、おカネを信頼できる業者に払って委託してください。
【VBA】プログレスバーを表示する

処理の中でプログレスバーを読んで表示させる自分用メモ。
これが
![aaa2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/460060/53d3d87b-745f-c820-da33-e2eed32da194.png)
こんな感じ。
![aaa1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/460060/d8da3584-1ebf-74d8-8a96-acecd89a8a6a.png)
以下ソース。



```VB




' 100 × 1000　のセルに「1000」と出力し続ける関数
Sub sampleProgram()

    Dim i As Integer            ' 行カウンタ
    Dim j As Integer            ' 列カウンタ
    Dim intNum As Integer       ' 出力する数字
    Dim intProgress As Long     ' プログレスバー
    
    ' プログレスバー最初は「0」
    intProgress = 0
    ' プログレスバーのあるユーザフォームを表示
    Call showProgress
    ' 処理開始
    intNum = 1000
    For i = 1 To 100
        For j = 1 To 1000
            ActiveSheet.Cells(i, j).Value = intNum
        Next
        ' 1行処理したらプログレスバーを一つ進める
        intProgress = intProgress + 1
        UserForm1.ProgressBar1.Value = intProgress
    Next
    ' ユーザフォームを消す
    Unload UserForm1
    MsgBox "処理終了"
End Sub

' プログレスバーを表示するユーザフォームを呼び出す関数
Sub showProgress()
    UserForm1.Show vbModeless
    UserForm1.ProgressBar1.Min = 0
    UserForm1.ProgressBar1.Max = 100

End Sub

' シートクリアするボタン
Sub shtClear()
    Cells.Clear
End Sub


```

###参考文献
[EXCELVBAでプログレスバーを作る](http://harunnium.net/createprogressbar/)
涼しい部屋でTVが観たいので仮想マシンでnasneの番組を観る話【失敗】→【成功】

#はじめに
みなさんいかがお過ごしでしょうか。暑いですね。こんな日は録画したTV番組を観るに尽きますね。
ということで今回は、エアコンの効いた涼しい部屋で録画した番組をゆっくり見たいので、Macでも[PCTV Plus](https://www.sony.jp/software/store/products/pctv-plus/)が使いたいの巻です。
デスクトップPCのWindowsマシンではPCTVPlusが動いていますので、Macで仮想マシン使えばいいんじゃないかと思って調べたら[n番煎じっぽい](http://dukicco.hatenadiary.jp/entry/2015/01/11/230235)です。
でも今でもこれができるかわからないし備忘録がてら記事に残しておこうと思います。
#仮想マシンを入れる
##VirtualBoxを入れる
今回はVirtualBoxを使いました。VMwareを使ってもいいと思いますがお好みです。
[ここからVirtualBoxを入れます。](https://www.virtualbox.org/wiki/Downloads)
##仮想マシンを作成する
ここはいつものように適当に。**ネットワークアダプタをNATからブリッジにするのを忘れない。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271301/99bcaf88-2874-8a42-ce5b-674064db7853.png)
##Win入れる
今回はWindows 10 32bitエディションを入れます。64bitエディションの方が本当はいいと思いますが、私のMBAのストレージが128GBしかないので、容量節約です…32bitなら最低16GBで動きますからね。[というわけで**日本語**Win10落とす。](https://www.microsoft.com/ja-jp/software-download/windows10ISO)
（ちなみに、Winのライセンスは学校のazureで無料でした。わっほーい。）![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271301/3984d879-4f5b-af6d-903f-7234f3019393.png)
##PCTVPlus入れる
[SONY公式HP](https://www.sony.jp/software/store/products/pctv-plus/)から入れます。インストール後に起動したら流れに沿って自分の使っているnasneを登録しましょう。ライセンスキーは最初はなくてもいいと思います。動いたのを確認後にライセンスキーを入力したらいいでしょう。
##TVを観て楽しむ！
ウェ〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜イ
#…のはずだったのに
~~…するはずでしたが、「ハードウェアアクセラレータが利用できません」とのエラーが出てダメでした。~~
→__追記:2020-04-07__
これはハードウェアアクセラレータの利用をPCTV Plus側で有効にしていたからっぽいです．まあ，どうせ激重で使い物になりません．
素直にBootCampするなりMac用DTCP-IPクライアント使うしかないと思います。
それか泥タブ買ってtornemobileにしようかなあ…既に持っているMiPad4 Plusは卒業研究で使ってるし。

→__追記:2020-04-07　うまく動きました！！！涼しい(今は寒いけど)部屋で動画が見れる！__
Parallels DesktopのWindowsで見事に再生できました．Macに移行したけれどPCTV PlusはWIndows版しかないし，ライセンスが余っていたのでどうしようか悩んでいましたが，本当に良かったです．WindowsもライセンスがWin10 Eduも一般版もあるしProもあるし有り余ってるのでMBAとMac miniのParallelsに使えました．宝(?)の持ち腐れにならなくてよかったです．
fish shell でgitレポジトリを一瞬でサーチ & ジャンプ

# 目的
複数のgitレポジトリをクローンして使っていると、どこからでもサクサク目的レポジトリに飛びたいもの。

# 準備
[`peco`](https://github.com/peco/peco)と[`ghq`](https://github.com/motemen/ghq)が必要。
Macなら

```
$ brew install peco
$ brew install ghq
```

でインストール。

# `config.fish` 
以下のように記述。

```fish
...
alias gj "ghq_jump" 
...
function ghq_jump
  cd (ghq list --full-path | peco)
end
...
```

`config.fish` をリロード。

```fish
$ source ~/.config/fish/config.fish
```


# 使い方

```
$ gj
```
でレポジトリ一覧が表示される。目的のレポジトリ名をfilterして選択してenterで飛べ！
【Flutter】Expanded vs Flexible

# Expanded vs Flexible
最近，Flutterにはまっています．FlutterはWidgetというものが数多くあって，非常にコードを書くことが楽しいのですが，時々使う「Flexible」と「Expanded」の違いが分からなくなりそうだったため，備忘録として投稿してみました（初投稿）．

## なぜ違いが分からなくなったのか
どちらのWidgetもRowやColumnの中で使用するのですが，どちらも**Row（Column）の中に配置されるWidgetの位置を調整するWidget**であり，役割が似ているため，時々違いが分からないということがありました．
今回の記事では，違いを分かりやすくするために，Textを色のついた箱で囲ってイメージしやすくしてみました．

## Expandedについて
ExpandedはRow（Column）の中のWidgetを固定の比率で配置するWidgetです．
以下は，Expandedを利用したコードとスクリーンショットです．
コードでは，それぞれの箱を1:2:3の比率で表示するようにしています．
スクリーンショットを見てみると，Expandedを利用した場合，Textの幅に関わらず，**固定の比率いっぱいまで表示しています**．

```dart:expanded.dart
Row(
   children: [
     Expanded(
       flex: 1,
       child: Container(
         color: Colors.blue,
         child: Text('Expanded\n\n(flex:1)'),
       ),
     ),
     Expanded(
       flex: 2,
       child: Container(
         color: Colors.orange,
         child: Text('Expanded\n\n(flex:2)'),
       ),
     ),
     Expanded(
       flex: 3,
       child: Container(
         color: Colors.green,
         child: Text('Expanded\n\n(flex:3)'),
       ),
     ),
   ],
 ),
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182606/fc172cba-a33f-6052-d352-77d37b3bac0d.png" width=40%>


## Flexibleについて
Flexibleは名前の通り，Widgetに応じて柔軟に比率を変更した状態で，それぞれのWidgetを配置します．
以下が，Flexibleを利用したコードとスクリーンショットです．
こちらもExpandedと同じように，比率は1:2:3で表示するようにしましたが，スクリーンショットを見てみるとわかるように，Flexibleを利用した場合，Textの幅に応じて**柔軟に比率を変更して表示しています**．

```dart:flexible.dart
Row(
   children: [
     Flexible(
       flex: 1,
       child: Container(
         color: Colors.blue,
         child: Text('Flexible\n\n(flex:1)'),
       ),
     ),
     Flexible(
       flex: 2,
       child: Container(
         color: Colors.orange,
         child: Text('Flexible\n\n(flex:2)'),
       ),
     ),
     Flexible(
       flex: 3,
       child: Container(
         color: Colors.green,
         child: Text('Flexible\n\n(flex:3)'),
       ),
     ),
   ],
 ),
```

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182606/f5f066ef-cac3-0ccb-6bb0-57afc35e3320.png" width=40%>

ちなみに，Flexibleを利用して，Textの文字数を多くした場合も検証してみました．以下がその場合のスクリーンショットです．
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/182606/931d8781-09d8-3d8b-c83c-be4d15e620a5.png" width=40%>

Flexibleの場合，Textの文字数を多くしてみると，1:2:3の比率は保つためにTextが折り返されたりすることで，比率が調整されます．柔軟ですね．

## 最後に
Flutterを始めてからまだ間もないですが，とても楽しいです．初投稿だったので拙い記事かもしれませんが，少しでもお役に立てると幸いです．あと，Flutterの公式ドキュメントはとても情報が豊富で助かりますね．

## 参考リンク
- [Expanded class](https://api.flutter.dev/flutter/widgets/Expanded-class.html)
- [Flexible class](https://api.flutter.dev/flutter/widgets/Flexible-class.html)
- [stack overflow: Expanded vs Flexible](https://stackoverflow.com/questions/52645944/flutter-expanded-vs-flexible)
業務でよく使うChrome拡張機能BEST5

#美しさを求めて。
![2019-07-25_10h56_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429968/1096399f-d41d-81f4-724c-76152dcc78be.png)
拡張機能：[Pesticide for Chrome](https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh?hl=ja)

この拡張機能は私が6年前からずっと愛用してるんですが、
レイアウトが崩れていたり、テキストがはみ出ていたりすると
「なんだこれは！？」ってなる時があると思うんです。
そういうときに使いますね。
私は、アドテク系の会社なので、サイト制作以外にも広告周りのデザインを担当することもあります。
広告のデザインをいい感じに整えるのによく使っています。
これのおかげで、デザイン周りはとても綺麗になるので、
デザイナーさんや営業さんから高く評価してもらえます。
デベロッパーツールと合わせて使うのをおすすめします。

#このサイトはこれを使ってるンゴねぇ
![2019-07-25_11h57_08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429968/6925bc55-e4c8-7174-ab59-991b703db6c4.png)
この拡張機能もめっちゃ便利です。
気になるサイトでこの拡張機能を使うと、「これWordPressでやってるんだー。」とか「このサイトはNuxt使ってるんだー。」とか
すぐにその場でわかるので、駆け出しエンジニアさんとかも使える機能だと思います。
ちなみに上の画像はQiitaのものです。

拡張機能：[Wappalyzer](https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl=ja)


#お！定時！帰るンゴ！気になるタブはこれでエイッ！！
![2019-07-25_12h46_36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429968/b7c595dc-2a57-5476-c365-066ee581d3f7.png)
エンジニアあるあるなのかもしれないですが、色々ググったりしてると
タブが30個以上になってることがあるんですよね。
気になるサイトが多すぎて翌日にまた同じサイトを見つけるのも大変だと思います。
この拡張機能は、お気に入りに入れるというのも手ですが、お気に入りに入れるほどでも無い時に役立つ便利ツールです。
一気に全タブをこれでエイッ！！とやって日報出して帰れます。笑
拡張機能：[OneTab](https://chrome.google.com/webstore/detail/onetab/chphlpgkkbolifaimnlloiipkdnihall?hl=ja)

#よっしゃ！オラ、デバッグすっぞ！！
![2019-07-25_12h54_21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429968/518cbcb7-2984-9903-8498-ceaeefc650d5.png)
デバッグするサイトを開いた状態で、The QR Code ExtensionをクリックするとQRコードをその場で出してくれる便利なやつ。
スマホのアドレスバーにポチポチ打つより、これでサクッとやっちゃいましょう！！

拡張機能：[The QR Code Extension](https://chrome.google.com/webstore/detail/the-qr-code-extension/oijdcdmnjjgnnhgljmhkjlablaejfeeb)

#サイト出来たンゴ！CSSのバリデーションかけるか！
![2019-07-25_13h12_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/429968/41cd1f80-52e1-628e-0403-c1b4ad952f3a.png)
HTMLのバリデーターは、基本的に[W3C Markup Validation Service](https://validator.w3.org/)でやってますが、
たまに、色々なエラーを出しくてれる[Another HTML Lint](http://www.htmllint.net/html-lint/htmllint.html)も使ってます。
CSSも色々なツールがありますが、前職の憧れの上司が作った拡張機能を使うようにしてます。
これを使うとまるで、その上司に指摘してもらえてる気がしてちょっと懐かしい気持ちになりながら
出ているエラーを潰していきます。
これもPesticideと同様で、デベロッパーツールと合わせて使うことをおすすめします。
HTML/CSSの効率的な教育として、駆け出しエンジニアさんにはいいかもしれません。

github：[style-validatorのリポジトリ](https://github.com/thrbrd/style-validator)
拡張機能：[Style-Validator](https://chrome.google.com/webstore/detail/style-validator/aaeahhnjkelemfcdmkcpaggdhfaffeod?hl=ja)

以上。
業務でよく使うChrome拡張機能BEST5でした！
「これも便利やで。」みたいなのがあれば、教えて下さい！！
フレッツV6オプションいわゆる構内網折り返し通信ってやつでscpが通らない問題

# 産業で説明
- フレッツV6オプションを使い、拠点間IPv6接続を試してみた。
- ssh でログインは出来るけれど scp や rsync を行おうとすると、ハングアップします。
- そのときに、いろいろ試してみた記録です。

# 症状
```sh:
 ssh V6ホスト名                             ・・・　問題なく出来る
 ssh V6ホスト名  ls                         ・・・ハングアップする
 scp 適当な小さなファイル V6ホスト名:         ・・・ハングアップする
 rsync -auv 適当な小さなファイル V6ホスト名:  ・・・ハングアップする
```
- 公開鍵認証を未設定の場合は、パスワードを聞かれて、パスワードを入れた直後にハングアップします

# 原因らしきもの
- 参考リンク等の情報によりますと、フレッツ光網の NGN網に DSCP値 (TOS値) が throughput の IPv6 パケットを送ると そのパケットは drop されるから、だそうです。
- sshコマンドの対話モードのときは DSCP値が lowdelayになっていて、バッチモードの時は throughput になるそうです。（ssh_configや ~/.ssh/config 等で設定変更は可能）
- これはNGN網の仕様のようなので、V6折り返し通信だけではなくIPoE接続なユーザーも影響を受けるかもしれません（あとで調査したい）



# 試したこと
-（１） /etc/ssh/ssh_config に以下の行を追加

```sh:ssh_config
Host *
   ・・・
   IPQoS 0x00
```
- 回避出来ました。

-（２） パケットフィルターで、強制的にsshのパケットのDSCP値を書き換える

```sh:
# ip6tables -A OUTPUT  -t mangle -p tcp --dport 22 -j DSCP --set-dscp 00
```
- この方法でも回避出来ました。

# それでもうまくいかない回線があった
- 原因は不明ですが、上記（１）、（２）のどちらを試しても症状が治らない回線がありました。
- 意味が分かりません。
- LinuxのVersionの異なるマシンに差し替えてみたり、NTTレンタル品HGWの代わりに市販ルーターを使ってNGN網に繋いだりと、やってみましたが、まったく症状が改善せず、~~原因不明のままです。~~ ---> 解決しました。
- 解決方法は、接続先Linuxサーバー(Ubuntuです)の /etc/ssh/sshd_config の最後に１行付け足します。
```sh:/etc/ssh/sshd_config
   ・・・
   ipqos none none
```
- 長年の謎が解けた。たぶん足掛け8年ぐらい。




# 備考
- V6直結は速いです。
- 同一県内ではPing値が異常に小さいです。3msとかになります。
- 但し、NTT西 管轄区同士、あるいはNTT東 管轄区同士のあいだでしか繋がりません。
- （東西をまたぐ接続は不可）両方IPoE契約している場合は当然接続出来ます
- ソフトイーサ様が行っているIPv6 DDNSサービスが名前解決方法として便利かもしれません。 
  https://i.open.ad.jp/howto/
- フレッツv6オプションは IPv6で繋いで flets-west.jp/ のようなサイトから直接申し込めば、工事費や月額費用は掛からず、わりとすぐに開通できるようでした。
 （IPoE v6接続やDSLite接続のプロバイダーをご利用の場合はすでにオプション申し込み済になっているかと思います）

# セキュリティに関する注意喚起
- NTTレンタル品のHGWではIPv6パススルーを入れた場合のファイアウォール機能が緩いです。
 （デフォルトでは、LAN内のパソコンのどれに対しても日本列島の半分側からはssh接続可能になります）
- 外部からの接続を遮断するには、

IPv6セキュリティのレベルの設定にて
- IPv6ファイアウォール機能	：有効
- IPv6セキュリティのレベル	：標準 ←これを「高度」にすると、LANの外側からのIPv6接続を拒否できる

-但し、古いHGWや廉価品の市販ルーターでは、そもそもIPv6セキュリティの設定項目自体が無いこともしばしば
- なので、Linux側でip6tables を使って通信相手以外からの接続を拒否するようにしたほうが良いです。
- 


# 参考リンク
- フレッツ光ネクスト + IPoE で scp, cvs, rsync の SSH通信ができない問題
- https://ch.nicovideo.jp/tsutsui/blomaga/ar1652866