OmniAICreator/Qiita-1.07M huggingface dataset:
DockerにRootlessモードが入ったぞ！という話

# 概要
DockerのデーモンをLinux上で実行するためには、通常はroot権限を渡す必要がありましたが、Docker Meetup TokyoのオーガナイザーをやっているNTTの須田さんによる[こちらのコミット](https://github.com/moby/moby/pull/38050)によって、Dockerをroot権限なしに実行できるようになりました。

より詳しくは、[Dockerのエンジニアリングブログ](https://engineering.docker.com/2019/02/experimenting-with-rootless-docker/)を御覧ください。

# 試してみた

## Rootless dockerのインストール

- 試した環境
  - Ubuntu 18.04

```bash
$ curl -sSL https://get.docker.com/rootless | sh
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 54.0M  100 54.0M    0     0  9624k      0  0:00:05  0:00:05 --:--:-- 11.9M
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 13.3M  100 13.3M    0     0  5584k      0  0:00:02  0:00:02 --:--:-- 5582k
# systemd not detected, dockerd daemon needs to be started manually

/home/inductor/bin/dockerd-rootless.sh --experimental --storage-driver vfs

# Docker binaries are installed in /home/inductor/bin
# WARN: dockerd is not in your current PATH or pointing to /home/inductor/bin/dockerd
# Make sure the following environment variables are set (or add them to ~/.bashrc):

export XDG_RUNTIME_DIR=/tmp/docker-1000
export PATH=/home/inductor/bin:$PATH
export PATH=$PATH:/sbin
export DOCKER_HOST=unix:///tmp/docker-1000/docker.sock
```

出てきた環境変数を `.bashrc` などに登録しておきます。

## Docker daemonの起動

[Mobyのドキュメント](https://github.com/moby/moby/blob/master/docs/rootless.md#usage)の通りに起動してみる。

```bash
$ dockerd-rootless.sh --experimental
+ [ -w /tmp/docker-1000 ]
+ [ -w /home/inductor ]
...
...中略
...
INFO[2019-03-02T09:43:30.951521529+09:00] Daemon has completed initialization
INFO[2019-03-02T09:43:30.980047655+09:00] API listen on /tmp/docker-1000/docker.sock
```

ダエモンさんのInitializeが終わって、APIがListenし始めたよ！と表示されました。
Docker daemonが起動してsocketのlistenが行われているのがわかりますね！

ここからDockerを実際に動かすためには、CLIを使って起動されたDaemonとおしゃべりする必要があります。
また、何らかのシステム管理用のDaemon(systemdとか)にちゃんと設定は入れておいたほうがよさそうです(デフォだと上手く入ってくれませんでした)。

Docker CLIで以下のようにSocketを明示的に指定してあげることで、`nginx`のイメージをPullしてRunすることができます。

```bash
$ docker -H unix://$XDG_RUNTIME_DIR/docker.sock run -d -p 8080:80 nginx
```

すごい。本当にユーザー領域で動いた！

# どうやって動いてるのか

基本的には、[RootlessKit](https://github.com/rootless-containers/rootlesskit)というOSSがベースとなっています。
GitHubの概要には
>made for mainly running Docker and Kubernetes as an unprivileged user

と書かれていて、要するに、KubernetesやDockerのDaemonを特権ユーザーでなくとも動かせるようにするためのツールです。
実はこのOSSが存在するrootless-containersのOrganizationの中には[usernetes](https://github.com/rootless-containers/usernetes)というプロジェクトもあって、こちらは、DockerではなくKuberntesをユーザー領域で動かそうというプロジェクトです。こちらも、Docker rootless modeと同じくNTTの須田さんが主に動いて開発しています。

一通り動かせるのがわかったので僕は満足したので、誰かもうちょい詳しいエントリーをお願いします（他力本願）
情報処理安全確保支援士 平成29年度春 午後1 問3

下記の問題集を参考させていただいでおります。
[午後(I・II)に集中！情報処理安全確保支援士精選17問](https://www.amazon.co.jp/%E5%8D%88%E5%BE%8C-I%E3%83%BBII-%E3%81%AB%E9%9B%86%E4%B8%AD%EF%BC%81%E6%83%85%E5%A0%B1%E5%87%A6%E7%90%86%E5%AE%89%E5%85%A8%E7%A2%BA%E4%BF%9D%E6%94%AF%E6%8F%B4%E5%A3%AB%E7%B2%BE%E9%81%B817%E5%95%8F-%E6%9E%97%E7%A7%80%E6%A8%B9-ebook/dp/B07B7LHCVN/ref=sr_1_21?s=books&ie=UTF8&qid=1551168594&sr=1-21&keywords=%E6%83%85%E5%A0%B1%E5%87%A6%E7%90%86%E5%AE%89%E5%85%A8%E7%A2%BA%E4%BF%9D%E6%94%AF%E6%8F%B4%E5%A3%AB)

#設問1
**・接続元IPアドレスがF社のグローバルIPアドレスではないこと**
問題文に「(従業員が利用する)端末からクラウドサービスを利用する際にはプロキシサーバを経由する」とあるため接続元IPアドレスはF社のIPアドレスに限定されます。
また、不正アクセスの原因の1つに「F社のIPアドレス以外からクラウドサービスへのログインが可能になっていた」とあるため、ここに脆弱性があり、今回の攻撃発生を招いてしまったと想像がつくと思います。

#設問2
**(1) a：ウ b：エ c：ア d：イ**
SAMLについて勉強する。

**(2) e：処理1**
SPはIdPに認証を要求するSAMLRequestとリダイレクト先URLをクライアントに返す(中継させる)

**　　f：処理4**
「ｆ」において必要なIdPのディジタル証明書、とあることからディジタル証明書の処理を行っていることがわかる。
その処理を行っているのは処理4

**(3) g：ウ**
リダイレクト先URLと組み合わせられるものはクエリというURLパラメータ(？)

**(4) h：IdP i：改ざん**
処理③からIdPが利用者認証を行った後、様々な情報に対するディジタル署名を含めたSAMLResponseを生成され、SPに沿う島されます。
SPではディジタル署名がIdPによって署名されていることを確認します。
ディジタル署名はデータの**改ざん**がないことを保証するものです。

**(5) 認証に関する情報を利用者端末のWebブラウザが中継するから**
SPとIdP間は直接やりとりすることはなく、利用者端末のWebブラウザが中継することで信頼関係を築いています。

#設問3
**交通費精算サービス**
**番号：(3)**
**理由：社外からIdPへの通信がファイアウォールによって遮断されるから**
「社外から社内ネットワークへの通信はファイアウォールによって遮断される」
「IdPは社内に設置」
と問題文に記載があり、上記のことから社内と社外の境界である図1(3)で拒否されるのがわかります。

**グループウェアサービス**
**番号：(1)**
**理由：クラウドサービス側で接続元IPアドレスの制限が行われているから**
「グループウェアサービスだけは、接続元IPアドレスを制限する機能を備えていた」
と問題文には記載があり、クラウドサービス側で接続元IPアドレスがF社内のIPアドレスであるかどうか判断が可能ということ。
このため、サービス提供をしているSPで判断が可能であり図1(1)で制御を行うことが可能です。
【WordPress】カスタム投稿タイプを他の投稿タイプの入れ子にしてサブメニューとして表示させる方法

カスタム投稿タイプを通常の投稿や固定ページの入れ子にする方法を書いていきます。

## `show_in_menuパラメータ`を利用する
メニューのどこに表示するかを設定する場合は、`menu_positionパラメータ`を利用しますが、何かのサブメニューとして表示させる場合は`show_in_menuパラメータ`を使います。

```php:functions.php
function create_custom_post_type() { 
    register_post_type('custom_post_type',
        array(
            'labels' => array(
            'name' => 'カスタム投稿タイプ',
            'singular_name' => 'カスタム投稿タイプ'
        ),
        'public' => true,
        'show_ui' => true,
        'has_archive' => true,
        'supports' => array('title','editor','author','thumbnail','excerpt','custom-fields','comments'),
        'show_in_menu' => 'edit.php' //通常の投稿タイプのサブメニューとする場合
        )
    );
}
add_action('init','create_custom_post_type');
```

上記コードは、通常の投稿タイプのサブメニューとする例です。他の投稿タイプのサブメニューにしたい場合は、`edit.php?post_type={任意の投稿タイプ名}`と指定すればいい形となります。
なので、固定ページのサブメニューにしたい場合は以下のように指定します。

```php
'show_in_menu' => 'edit.php?post_type=page'
```

## 参考
- [関数リファレンス/register post type - WordPress Codex 日本語版](https://wpdocs.osdn.jp/関数リファレンス/register_post_type)
Linux(Ubuntu)のルート直下のディレクトリの役割について調べた

UbuntuやMacOSのルートディレクトリ直下に存在するファイルは短縮形で書かれていて，読み方や役割を正確に把握していなかったので，調べてまとめる．

ちなみに実際のルートをtreeコマンドで表示するとこんな感じ(Ubuntu 14)．

```shell
$ tree -L 1 /
.
├── bin
├── boot
├── build
├── dev
├── etc
├── home
├── lib
├── lib64
├── lost+found
├── media
├── mnt
├── opt
├── proc
├── root
├── run
├── selinux
├── sbin
├── srv
├── sys
├── tmp
├── usr
├── var
```

## /bin

読み: ビン (スラ・ビン)
コンピューター全員で用いる基本的なバイナリファイル（実行ファイル）を格納するディレクトリ．**bin**はBinary Codeのこと．OSの働きの根幹に関わるような役割をもつコマンドが入っている．（ユーザが新たにインストールすることは，推奨されていない）

類似のディレクトリに，`/usr/bin`, `/usr/sbin/`などがある．前者はユーザが一般的に使用するコマンド(git, vim, emacs, etc)，後者はシステム管理コマンドを保存する．

ログインしているユーザに依存するプログラムやツールを作った時は，`~/bin`(`$HOME/bin`)に置くことが推奨される．

ちなみに，`cd`や`pwd`コマンドは，内部コマンドと呼ばれるシェルの機能として提供されている．

## /var

読み: ヴァー
常に変化するファイルを格納するディレクリ．`/var/log`や`/var/spool`など，各種システムログファイルや，プリンターやメールシステムのスプールデータ，キャッシュデータなどが保存される．意味的には`/tmp`と同じだが，こちらは再起動しても消去されずに残り続ける．

## /lib

読み:リブ
`/bin`や`/sbin`のコマンドの実行に必要なファイルが配置されている．共有ライブラリの保存場所．64bit用の共有ファイルは`/lib64`というディレクトリにある．

## /lost+found

読み: ロストファウンド
オプション，システムのバックアップや復元用のファイルが格納される．意図しない再起動やシャットダウン時に利用される．

## /boot

読み: ブート
ブートに必要なファイルが格納されている．

## /home

読み: ホーム
オプション．ユーザのホームディレクトリ

## /proc

読み: プロック
プロセスIDのついたディレクトリが配置される．プロセス独自の情報を格納することからプロセスディレクトリと呼ばれる．psコマンドなど．

## /root 

読み:
オプション．root用ホームディレクトリ

## /sbin

読み: エスビン
再起動やファイルシステムの操作などシステム管理者用のコマンドが配置されている．

## /tmp

読み: テンプ
テンポラリデータの保存場所．メモリ上の一時ファイルを保存する．再起動時に消去される．

## /usr

読み: ユーザー
各ユーザが共通して利用するプログラム，ライブラリのデータを保存する．ソースからコンパイルしたソフトなど．重要．

## /mnt

読み: 
一時的なマウントポイント

## /opt

読み: オプト
パッケージ管理システムのインストール先．複数のユーザで利用する場合に使う？

## /etc

読み: エトセ
ほとんどの設定ファイルが配置されている．カーネルから追加された各ソフトまでさまざなま設定ファイルが配置されているため，ファイル数が膨大．

## /dev

読み: デブ
デバイスファイルが配置されている．デバイス／ハードウェアをファイルとして扱うUNIXの思想設計からきている？？

# 感想

思ったより読みが直球で安心した．

# 参考にしたページ

* [各ディレクトリの役割を知ろう(ルートディレクトリ編)- ITmedia Inc](https://www.atmarkit.co.jp/ait/articles/0108/07/news002.html)
* [Linuxの/bin、/usr/bin、$HOME/binのそれぞれの役割](https://qiita.com/totzyuta/items/84d610f56129a186f0c5)
* [Linuxの基本の基本。Linuxの基本的なディレクトリ構成](https://oxynotes.com/?p=5987#15)
少しでも安全にngrokを使用する(Basic認証)

## 概要

前回ngrokの記事を書いて,実機での動作確認に活用できます~みたいなこと書きましたが,
よくよく考えてみればランダムにサブドメインが設定されているとは言え,アクセス制限などされていないので普通にセキュリティ上良くない....ので
今回はngrokを少しでも安全に利用できるようにBasic認証を使用する方法書いてきます。

### ngrok環境構築

細かい環境構築は[ngrok 導入方法](https://qiita.com/da-sugi/items/fc51b85b2c915125cbba)を参考にしてください。

## Basic認証使用手順
### ngrokアカウント登録

まずはhttps://ngrok.com/ でアカウント登録をしてください。
※無料版で大丈夫です。

### authtokenをローカル環境で登録
#### authtoken取得

↓のngrokのダッシュボードで `Auth` をクリックする
https://dashboard.ngrok.com/get-started

遷移先に `Your Tunnel Authtoken` という項目にトークンが表示されるのでそいつをコピーする。

#### authtoken登録

ngrokをインストールしているローカルの環境でサイトにも書かれているように↓のコマンドを実行する

```bash
$ ngrok authtoken {authToken}
```

### Basic認証用のユーザ名,パスワードを設定してngrokを起動する

以下の用にアクセスした際に求められるユーザ名,パスワードを入力して,ngrokを起動する

```bash
$ ngrok http -auth="ユーザ名:パスワード" ポート
```

### 実際にアクセスしてみる

ngrokを起動した際に提供されたURLにアクセスして↓のようなログインのユーザ名,パスワードの入力画面が表示されたらOK
先程起動時に -authオプションで設定したユーザ名とパスワードを入力すればアクセスできるようになります。

<img width="1076" alt="スクリーンショット 2019-02-27 19.17.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/133737/d4b6a52c-643e-4e87-9bbb-d2b5e990936a.png">


これで何も制限がない状態よりは少しは安全になったかと思います。
ただし完全に安全という訳ではないのでご注意を

### おわり
WordPressで管理バー（wp_admin_bar）で項目別に非表示する方法

WordPressの管理画面の上部に表示される、wp_admin_barですが、管理者で表示されるの良いんですが、実際つかうエンドユーザー（投稿や編集者権限）に表示されるのは、なんとなく嫌なので、いつも非表示にしています。

で、いつも非表示にするときググるのでいい加減メモを残そうと思い、本投稿をします。

早速ですが、サンプルソースを。

## サンプルソース

functions.phpに以下を記載する。

```php5
/**
 * wp管理バーの削除します。
 */
function my_remove_adminbar_menu( $wp_admin_bar ) {
    $wp_admin_bar->remove_menu( 'wp-logo' );      // WPロゴ
    $wp_admin_bar->remove_menu( 'site-name' );    // サイト名
    $wp_admin_bar->remove_menu( 'view-site' );    // サイト名 -> サイトを表示
    $wp_admin_bar->remove_menu( 'dashboard' );    // サイト名 -> ダッシュボード (公開側)
    $wp_admin_bar->remove_menu( 'themes' );       // サイト名 -> テーマ (公開側)
    $wp_admin_bar->remove_menu( 'customize' );    // サイト名 -> カスタマイズ (公開側)
    $wp_admin_bar->remove_menu( 'comments' );     // コメント
    $wp_admin_bar->remove_menu( 'updates' );      // 更新
    $wp_admin_bar->remove_menu( 'view' );         // 投稿を表示
    $wp_admin_bar->remove_menu( 'new-content' );  // 新規
    $wp_admin_bar->remove_menu( 'new-post' );     // 新規 -> 投稿
    $wp_admin_bar->remove_menu( 'new-media' );    // 新規 -> メディア
    $wp_admin_bar->remove_menu( 'new-link' );     // 新規 -> リンク
    $wp_admin_bar->remove_menu( 'new-page' );     // 新規 -> 固定ページ
    $wp_admin_bar->remove_menu( 'new-user' );     // 新規 -> ユーザー
    $wp_admin_bar->remove_menu( 'my-account' );   // マイアカウント
    $wp_admin_bar->remove_menu( 'user-info' );    // マイアカウント -> プロフィール
    $wp_admin_bar->remove_menu( 'edit-profile' ); // マイアカウント -> プロフィール編集
    $wp_admin_bar->remove_menu( 'logout' );       // マイアカウント -> ログアウト
    $wp_admin_bar->remove_menu( 'search' );       // 検索 (公開側)
}
add_action('admin_bar_menu', 'my_remove_adminbar_menu', 201);
```

## サンプルソース（管理者権限を除く）

functions.phpに以下を記載する。

なんとなく、管理者権限（自分ですよね）は、すべて表示された方が気持ちいいです。


```php5
/**
 * wp管理バーの削除します。
 */
function my_remove_adminbar_menu( $wp_admin_bar ) {
    if ( current_user_can( 'administrator' ) ) {
        return; // リターンさせちゃいましょう
    }
　　// 以下、省略
}
add_action('admin_bar_menu', 'my_remove_adminbar_menu', 201);
```

## まとめ

これでコピペでいける。ググる時間短縮です！

参考URL
【WordPress】管理バー(admin bar)のメニュー項目を削除する方法 | よしあかつき
https://yosiakatsuki.net/blog/remove-menu-admin-bar/
Googleドライブとパソコンを同期する「バックアップと同期」の使い方

# Googleドライブとパソコンを同期する「バックアップと同期」の使い方
**Google ドライブ**は無料で15GBを利用できるクラウドサービスで、WebはもちろんiPhoneやAndroid用のアプリからもアクセスできるのでとても便利ですが、ブラウザやアプリからアクセスするにはインターネットに接続しなくてはなりません。

**「バックアップと同期」**を使えばパソコンにバックアップ（パソコンをバックアップ）でき、インターネットに接続してなくてもファイルを閲覧や編集が可能になり、インターネットに接続したときに自動的に同期して最新の状態にしてくれます。

## ダウンロードとインストール
[Google ドライブをダウンロード](https://www.google.com/intl/ja_ALL/drive/download/)にアクセスすると「パーソナル」と「ビジネス」の２つの枠が表示されるので、「パーソナル」の枠内の**「ダウンロード」**をクリックします。

「Google ドライブ利用規約」が表示されるので**「同意してダウンロード」**をクリックします。

「名前をつけて保存」ダイアログが表示されるので保存場所を指定して**保存**します。

ダウンロードが終わったら**「installbackupandsync.exe」**をダブルクリックして起動します。

インストーラーが起動し必要なファイルをダウンロードしインストールしてくれるので**「インストールが完了しました。」**と表示されるまで待ちます。


## 使ってみる
インストールが終わるとタスクトレイに**「Googleのバックアップと同期」**が追加されてます。（無い場合はスタートメニューから**「Backup and Sync from Google」**を起動します。）

はじめて使う場合は「バックアップと同期 へようこそ」という画面が表示されるので**「使ってみる」**をクリックします。

- ステップ1/3 **ログイン**  
ログインまたはアカウントを作成します。
- ステップ2/3 **マイノートパソコン**
デフォルトで「デスクトップ」、「ドキュメント」「画像」の３つにチェックが入ってますが同期したいフォルダを**選択**及び**解除**ができます。

- ステップ3/3 **Googleドライブ**
クラウド上のGoogleドライブと同期するフォルダを指定します。
デフォルトでは`C:\Users\ユーザー名\Google ドライブ`ですが`C:\Users\ユーザー名\Desktop\クラウド`などに変更もできます。
ここで**開始**をクリックすると同期が始まります。

## 新しいアカウントを追加
最大3つのアカウントを追加することができます。
タスクトレイのアイコンをクリックしてポップアップの右上の**「⋮」**をクリックしプルダウンした設定メニューから**「新しいアカウントを追加」**を選択します。

新しいアイコンがタスクトレイに追加されるので[使ってみる](#使ってみる)で設定したように新しいアカウントを追加します。
Rust: Unit-like構造体と関連型を用いたMixinのパターン

RustでもScalaとかのようにカッコよくMixinを決めたいよね。
MixinでDIやりたいよね。

## やりかた

### `XxxService`トレイト
まずサービスのインターフェースを定義する。

```rust
pub trait HelloService<T> where T: ?Sized {
    fn hello(this: &T, to: String) -> ();
}
```

このジェネリクスが重要になる。
サービスのインターフェースは`Self`を使わず、代わりにジェネリクスで受け取った型を持つ`this`を第1引数に取る。`this`を受け取らないメソッドは定義しない。

### `MixinXxxService`トレイト
続いて、インターフェースと対になる、サービスをMixinするトレイトを定義する。

```rust
pub trait MixinHelloService {
    type Impl: HelloService<Self>;

    fn hello(&self, to: String) -> () {
        Self::Impl::hello(self, to);
    }
}
```

キーワードの一つ、関連型が現れた。
この関連型`Impl`はサービスを実装した型を示している。しかも、先程定義したインターフェースのパラメータに`Self`を渡している。知っての通り`Self`はこのトレイトを実装した具象型だ。

また、このトレイトはサービスのインターフェースで定義した`this`を`self`で置き換えたメソッドを定義し、デフォルト実装で関連型`Impl`にプロキシしている。

JavaScriptを触ったことのある人なら、`this`を退避した`self`という名前の変数を作ったことがあるかもしれない。この二つのトレイトは、名前こそ逆だけれど同じことを、型レベルで行っていると考えていい。

なぜ`Self`を退避して渡す必要があるか？　この二つのトレイトを実装する具象型は異なるからだ。

いよいよサービスを実装しよう。

### `XxxServiceImpl`型
```rust
pub struct HelloServiceImpl;

impl<T> HelloService<T> for HelloServiceImpl
{
    fn hello(_this: &T, to: String) -> () {
        println!("Hello, {}!", to);
    }
}
```

二つ目のキーワードであるUnit-like構造体が現れた。フィールドを持たない構造体は型レベルで何かするときに便利。Variantの無いenumも使用できるけれど、そこはまあ好みだよね。

この空の型にサービスを実装する。
`this`を単に捨てているのは、この実装では不要だからだ。`this`を参照する実装も作ることができる(割愛)。

### Mixinと利用
ここまででサービスの実装を作り具象型を与えた。
あとはこのサービスをMixinして利用するだけだ。

```rust
struct Base;

impl MixinHelloService for Base {
    type Impl = HelloServiceImpl;
}

fn main() {
    let base = Base {};

    do_something(base);
}

fn do_something<S>(base: S) -> ()
where
    S: MixinHelloService,
{
    MixinHelloService::hello(&base, "World".to_string());
}
```

見ての通り、何か適当な型に`impl`で関連型として実装を与えるだけのお手軽仕様。実装を差し替えたい場合もここで関連型`Impl`に別の型を指定する。Mixinとしては上々のゆるさだ。

利用するときも、Mixinした型のインスタンスを静的ディスパッチによって伝搬し、サービスを使いたい場所でトレイト境界に`MixinHelloService`を指定すればいい。実装が何であるかは意識せずサービスを利用できる。

### サービスの依存関係
ここまでの説明では`Self`を伝搬する必要がまったくなかった。
この仕組みはサービスに依存関係が生じたときに威力を発揮する。

まず、先程同様にサービスのインターフェースとMixin用のトレイトを用意する。

```rust
pub trait WorldService<T>
where
    T: ?Sized,
{
    fn hello_world(this: &T) -> ();
}

pub trait MixinWorldService {
    type Impl: WorldService<Self>;

    fn hello_world(&self) -> () {
        Self::Impl::hello_world(self);
    }
}
```

そして実装を作る。
このとき、伝搬された`Self`に対して追加の要求を宣言できる。

```rust
pub struct WorldServiceImpl;

impl<T> WorldService<T> for WorldServiceImpl
where
    T: MixinHelloService,
{
    fn hello_world(this: &T) -> () {
        MixinHelloService::hello(this, "World".to_string());
    }
}
```

ここでは`MixinHelloService`が実装されていることを要求し、実装の中で`this`を使って呼び出している。
`Self`が伝搬することによって、Mixinする対象に制約を掛けることができたわけだ。

`WorldService`自体は`HelloService`に依存していないことにも着目してほしい。実装次第で依存する対象は変わりうる。`HelloService`に依存しない実装も可能だ。

このサービスをMixinしたら、利用するときは単に`MixinWorldService`を要求すればいい。

```rust
fn do_something<S>(base: S) -> ()
where
    S: MixinWorldService,
{
    MixinWorldService::hello_world(&base);
}
```

そう、サービスの実装の依存関係が外に漏れ出さないのだ。
関連型は暗黙的に利用できるため、余計な型引数もなく非常にすっきりした形で`where`節を書ける。

もちろんこれは静的ディスパッチで型情報を全て伝搬できる時の話であって、動的ディスパッチが絡むと壊れる。そういうとこやぞRocket。
Watson Visual Recognitionで物体検出（Object Detection）

Watson Visual Recognition(VR)で新機能 Custom Object Detectionのベータ版が提供されたので試してみました。こちらの[リンク](https://ibm.biz/cod-beta)から申請をすることで順次使用開始のメールが送られてきます。[Documentation](https://console.bluemix.net/docs/services/visual-recognition/object-detection.html#custom-object-detection-beta-)にも使用方法が記載されています。

# Custom Object Detectionとは
これまでVRで可能な学習機能は画像の「分類」のためのもので、以下のように画像にクッキーが写っていることは分かりますが、画像上の位置を特定することはできませんでした。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/23af217b-0b01-ace4-88ce-9c757ecfbca4.png)

Custom Object Detectionでは以下のようにクッキーであるという分類と共に、その位置も「検出」できるようになります。物体の位置を特定する、あるいは数をカウントすること等ができるので、これまでの「分類」のユースケースに比べると使い道がグッと増えることになります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/e2156365-aa7d-bef4-1382-3a05ba5dd910.png)

# 実際に試してみた
物体検出に関してはこれまで以下のような記事を公開していますが、今回も同じデータを使って画像から新旧Watsonのロゴを検出してみたいと思います。

- [Watson Studio で YOLO V3 カスタム物体検出](https://qiita.com/schiyoda/items/1e1578fc605aea88abcd)
- [Watson Studio（Cloud版） の Notebook を GPUで動かす](https://qiita.com/schiyoda/items/af9f61e222b63e11080e)

物体検出のための学習データを用意するためにはアノテーションツールで画像にアノテーションしたものが必要です。VRの場合はWatson Studioでアノテーションをすることができます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/400baf7a-4f37-dc37-a932-05bf00175866.png)

アノテーションした情報はJSON形式で、アノテーション箇所の分類（ラベル）と位置（left,top,width,height）を保持しています。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/993e740c-3187-c683-4f65-4967e091fff0.png)

アノテーションが完了したら、Watson Studioで「Train Model」ボタンをクリックすると学習が開始します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/5638cb0f-ee03-3c7c-5e26-a11006741c41.png)

学習完了後、テストもWatson Studio上で可能です。テスト画面でテスト用の画像をドラッグ&ドロップすると、検出結果がconfidenceと共に表示されます。全体的にはそれなりに検出ができているように見えます。一番右の画像は検出対象が小さいためか検出に失敗しており、製品としての限界がどのくらいかも今後見極めて使っていく必要がありそうです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/235649/32100c9a-cadd-bfd6-4316-19566db353c2.png)
[簡単すぎる]Rails + jQueryで文字数カウント

##RailsでjQueryを使う準備

簡単３ステップです。

```:gemfile
gem "jquery-rails"
```

```:/app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
```

```:/app/views/layouts/application.html
<%= javascript_include_tag "application" %>
```

これだけです。最後のapplication.htmlに関しては元から用意されてるので実質2ステップです。


##カウンターを作っていこう






<img width="575" alt="スクリーンショット 2019-02-27 18.35.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/297896/cd2b3aaf-ae91-840a-d12e-7767eac8be57.png">

###今回は上の画像のように文字数カウンターを作ります。

1.app/assets/javascriptでnew fileを作成します。
この時の命名規則で語尾に.jsと付けてください。
私はform.jsとしました。


2.コードを書いていきます。

```:_form.html.erb
<%= form_for (@post) do |f| %>
  <div class="post_form">
    <div class="form-group">
      <%= f.label :タイトル %>
      <%= f.text_area :title, class: "form-control", rows: 1 %>
    </div>

    <div class="form-group">
      <%= f.label :本文 %>
      <%= f.text_area :text, class: "form-control", id: "input-text",rows: 4 %>
      <p id="counter">0文字</p>
    </div>

    <div class="form-submit">
      <%= f.submit "投稿する", class: "form-button" %>
    </div>
  </div>
<% end %>

```
キーとなる大事なものは
input-textとcounterです。


```:form.js
$(function(){
 $("#input-text").on("keyup", function() {
   let countNum = String($(this).val().length);
   $("#counter").text(countNum + "文字");
 });
});
```

これで完成です。

form.jsの解説をすると
2行目: 対象となるinput-textセレクタを指定します。

3行目: countNumという変数を定義してここに合計数の処理を代入します。
文字列と数値は合わせれないのでStringを指定します。
ここの(this)は[input-text]を表しており、入力された数を表す。

4行目: 合計値を表示するcounterセレクタに合計数を表すcountNumをツッコミ完成です。
ubuntu+nodejs+express+socketioでサンプルページ

備忘録

目的：herokuへのアップロードのテストをするために、通信のできるサンプルページを作る

やりかた：
virtualboxとubuntuのディスクをダウンロード
仮想マシンを作成、起動
右クリック→端末を起動
下記を順に実行していく

```
$sudo apt-get install nodejs npm
```
　//nodejsとnpmをインストールする、バージョンは知らない

```
$npm install -g express
```
　//expressをインストールする、バージョンは知らない

```
$express hoge[任意のフォルダ名]
```
　//任意のフォルダを作成する

```
$cd hoge
```
　//hoge内に移動

```
$ls hoge
```
　//hogeフォルダの内容を表示
　//app.js bin package.json public views routes となっていたらOK

```
$npm install --save socket.io
```
　//socket.ioをインストール

//いじる場所はviews/index.jadeと、bin/www

bin/wwwの末尾に以下を足す(サーバー側の処理になる）

```ruby:bin/www（追記）

var io = require('socket.io').listen(server);

io.sockets.on('connection', function(socket) {

  socket.emit('greeting', function (a) {
    console.log('connection clear');
    console.log(a)
  });

  socket.on('client_to_server', function(){
    var tom ='hello';
    console.log('button pushed');
    socket.emit('server_to_client', tom);

  })
});
```
io.sockets.on('connection')は接続がうまく行ったときにサーバーに送られる'connection'に対して起動している
各処理はこの中に書くと動く


index.jadeを書き換える、テスト用のソースを以下に記載

```ruby:views/index.jade
doctype html
html
  head
    title Socket.IO Test
    script(src='//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js')
    script(src='/socket.io/socket.io.js')
    script.
      var socket = io.connect();
      
      socket.on('greeting', function() {
       console.log('hello world')
      });

      function button(){
      console.log('pushed')
      var a=1
      socket.emit('client_to_server',a)
      }

      socket.on('server_to_client', function(tom){
      console.log(tom)
      })


  body
    h1 Socket.IO Test
    input(type='button', onclick='button()', value='叩いてコンソールを出力')
```

scriptの二行目で、socket.ioを読み込んでいる。詳しいことはわからない。

//いじる

```
$ npm start
```
　//自家サーバーを起動、

ブラウザから
http://localhost:3000
を開くと、ページが表示されている

（もし、

```
Error: Cannot find module 'static-favicon'
```
とかが出てきていたら、

```
$ npm install
```
で、必要なモジュールが全部インストールされる。）

ボタンを押すと各種コンソールが出力される

これをherokuにあげたいぞ
Puppet Boltを使ってnginxをインストールする

[Puppet Bolt](https://puppet.com/products/puppet-bolt)はタスク実行ツールです。 Puppetのタスクやマニフェストを実行することができます。この記事は[こちらの原文](https://puppet.com/blog/introducing-masterless-puppet-bolt)を元に作成しています。

# 環境
- **Puppet BoltとPuppet Development Kitのインストール先OS** : macOS Mojave 10.14.2
- **nginxのインストール先OS** : ubuntu 4.15.0-1027
- **Puppet Boltのバージョン** : 1.11.0
- **Puppet Development Kitのバージョン** : 1.9.0

# 手順
Boltをインストールします。

```bash
$ brew cask install puppetlabs/puppet/puppet-bolt
```

PDKをインストールします。

```bash
$ brew cask install puppetlabs/puppet/pdk
```

Puppetのモジュールを新規に作成します。質問には全てデフォルトで答えて最後にyesと答えます。

```bash
$ cd ~/.puppetlabs/etc/code/modules
$ pdk new module profiles
省略
Metadata will be generated based on this information, continue? Yes
pdk (INFO): Module 'profiles' generated at path '/Users/hisashi_yamaguchi/.puppetlabs/etc/code/modules/profiles', from template 'file:///opt/puppetlabs/pdk/share/cache/pdk-templates.git'.
pdk (INFO): In your module directory, add classes with the 'pdk new class' command.
```

作成したモジュールディレクトリの直下にplansディレクトリを作成します。

```bash
$ mkdir ~/.puppetlabs/etc/code/modules/profiles/plans
```

plansディレクトリにPuppetのマニフェストを作成します。

```vim
$ vi ~/.puppetlabs/etc/code/modules/profiles/plans/nginx_install.pp
plan profiles::nginx_install(
  TargetSpec $nodes,
  String $site_content = 'hello!',
) {
  # Install puppet on the target and gather facts
  $nodes.apply_prep

  # Compile the manifest block into a catalog 
  apply($nodes) {
    package { 'nginx':
      ensure => present,
    }

    file { '/var/www/html/index.html':
      content => $site_content,
      ensure  => file,
    }

    service { 'nginx':
      ensure  => 'running',
      enable  => 'true',
      require => Package['nginx'],
    }
  }
}
```

Boltでマニフェストを実行します。-nでホスト名を、-uでsshのログインユーザを指定します。

```bash
$ bolt plan run profiles::nginx_install -n ubuntu --modulepath ~/.puppetlabs/etc/code/modules/ -u hisashi_yamaguchi --run-as root
Starting: plan profiles::nginx_install
Starting: install puppet and gather facts on ubuntu
Finished: install puppet and gather facts with 0 failures in 73.96 sec
Starting: apply catalog on ubuntu
Finished: apply catalog with 0 failures in 26.5 sec
Finished: plan profiles::nginx_install in 100.48 sec
Plan completed successfully with no result
```

Chromeでhttp://<ホスト名>にアクセスします。hello!が表示されれば成功です。
awslogs-agent-setup.pyの設定

CloudWatch Log agentを設定するときにオプションについて探すことになったのでメモ
Metricsを使う気がなかったので統合バージョンでない以前のバージョンのCloud watch log agentです。
対話形式でも設定できます。ただし、対話形式だとたくさん設定するときは面倒です。

# コマンド
インストールプログラムをダウンロードします。

```shell
curl https://s3.amazonaws.com/aws-cloudwatch/downloads/latest/awslogs-agent-setup.py -O
```


後述するCloudWatch Log用の設定ファイルをあらかじめどこかに作っておきます。
/home/hoge/hogehoge.conf

```shell
sudo python ./awslogs-agent-setup.py -n -r ap-northeast-1 -c /home/hogehoge.conf
```
これでOK。

# オプションとインストールについて
参考リンク

- https://qiita.com/morozumi_h/items/a1cb930203ca8e4d1a93
- https://qiita.com/takahashi-kazuki/items/5b3a659c845edf81f2c4


|オプション|省略形|説明|
|---------|------|---|
|--only-generate-config|-o|configファイルを作成するだけで設定はしない。|
|--non-interactive|-n|対話形式を使わずconfigファイルを読み込んで設定。|
|--region|-r|AWSのリージョンの指定。|
|--configfile|-c|configファイルのローカルまたはS3またはURLのパスの指定。|
|--plugin-url|-u|CloudWatchLogsプラグインのURLの指定。|
|--python|-p|Pythonのバージョンの指定。無指定は`/usr/bin/python`にあるバージョンを使用。|
|--http-proxy|なし|CloudWatch Logsとの通信に用いるhttpプロキシの設定。|
|--https-proxy|なし|CloudWatch Logsとの通信に用いるhttpsプロキシの設定。|
|--no-proxy|なし|カンマで区切ったプロキシを使用するべきではないドメイン拡張子のリスト。|

# Configファイルの作り方

例は以下の通り。

```config:/home/hoge/hogehoge.conf
[general]
state_file = /var/awslogs/state/agent-state

[/var/log/access.log]
datetime_format = %Y-%m-%d %H:%M:%S
file =  /var/log/access.log
buffer_duration = 5000
log_stream_name = access.log
initial_position = start_of_file
log_group_name = {instance_id}

[/var/log/error.log]
datetime_format = %Y-%m-%d %H:%M:%S
file =  /var/log/error.log
buffer_duration = 5000
log_stream_name = error.log
initial_position = start_of_file
log_group_name = {instance_id}
```

参考リンク
https://qiita.com/szk3/items/5e9d09635139d08eadc6
NASAなどのサイトにある、天体の位置、形状、表面の三次元データ

# はじめに
　先日、以下の記事ではやぶさ2の軌道アニメーションを描いた。

 - Gnuplotで、はやぶさ2の軌道アニメーションを作ってみた  
https://qiita.com/mkunu/items/7f82fef8e06b6274a5a7

　他にも様々な天体の軌道を自分で描いてみた。その際利用したデータの出典と使用例を以下にメモしておく。特に、三次元のデータを描く際、デザインに凝り始めると位置だけでなく、形状や表面など様々なデータが必要となる。

## 目次
1. 天体の位置のデータ
    1. ダウンロード方法
    2. データの整形
    3. Gnuplotでプロットした例
2. 天体の形状のデータ
    1. ダウンロード方法
3. 天体の表面のデータ
    1. ダウンロード方法
4. 位置、形状、表面のデータを使ってみる
    1. three.jsでプロットした例


# 1. 天体の位置のデータ
　既存の天体の位置情報を使いたい時とかに必要。
## 1.1 ダウンロード方法
　以下のNASA JPLのサイトからダウンロードする。

 - HORIZONS Web-Interface  
https://ssd.jpl.nasa.gov/horizons.cgi

　余談だが、Wikipediaで調べたところ、こういったデータを**ephemeris（天体暦）**というらしい。
>天体暦（てんたいれき、ephemeris）とは、天体（太陽・月・衛星・惑星・恒星及び人工天体）の運行位置・軌道及び天象（日食、月食、天体の出没など）を推算した予報を書き下した情報である。天文暦、暦（れき）、軌道暦、天文年鑑(astronomical almanac)とも言う。
by [Wikipedia 天体暦](https://ja.wikipedia.org/wiki/%E5%A4%A9%E4%BD%93%E6%9A%A6)

　下へスクロールすると設定画面があるので、例えば以下のように設定する。（完成例ではTime SpanのStepを1ヶ月ごとにした。そのため以下とは少し異なっているが、それ以外はほぼ同じ設定である。）
![settings.png](https://qiita-image-store.s3.amazonaws.com/0/282333/be6d9143-df82-b873-ed5c-769e7db4a074.png)

|各行|設定の意図|
|:--|:--|
| Ephemeris Type | X,Y,Zの3成分にした方が扱い易いと感じたので、デカルト座標系にした。 |
| Target Body | データが欲しい天体を選んだ。 |
| Coordinate Origin | 中心は太陽。 |
| Time Span | 1年ごと、1977年から現在2019年まで。 |
| Table Settings | quantities code=1 はX,Y,Zの3成分のみを出力、CSV format=YES は,（カンマ）区切りの形で出力をそれぞれ表す。その他は気分です。 |
| Display/Output| Generate Ephemeris ボタンクリックで即txtファイルをダウンロードできるようにした。 |

## 1.2 データの整形
　各行末に,（カンマ）が入っているので例えばこのままgnuplotでプロットしようとすると、All points x value undefinedと言われる。
　行末の,を削除するのにsedコマンドを使えば良いらしい。しかし、調べたところどうやらMacだとsedの使い方が特殊らしい。色々調べて出てきたやり方を試してみても、sedコマンドがうまく機能しなかった…
　そのため、結局Macにデフォルトで入っているNumbers（Excelみたいなもの）で各ファイルを１つ１つ開いて最終列を削除するという作業を行った。

## 1.3 gnuplotでプロットした例
　例えばgnuplotで以下のようなものが描ける。[はやぶさ2のデータで描いた以前の記事](https://qiita.com/mkunu/items/7f82fef8e06b6274a5a7
)と同じ要領でプロットする。
　[GitHubにおいたフォルダ（名称は「NASA」）](https://github.com/m-kunugi/gnuplot/tree/master/NASA)をダウンロードする。ターミナルを開き、このディレクトリへ移動し、以下のようにコマンドを打つ。

```
$ gnuplot
gnuplot> load "probe.plt"
```
　下に載せたGIF画像 **"probe.gif"**が同じディレクトリに出力される。

 - パイオニア10号・11号, ボイジャー1号・2号（＋木星, 土星, 天王星, 海王星）の位置（1977年〜1990年）
![probe.gif](https://qiita-image-store.s3.amazonaws.com/0/282333/61398cb7-a525-f603-9631-c8826dfa1284.gif)

# 2. 天体の形状のデータ
　探査機の3Dデータが欲しい時とかに必要。
## 2.1 ダウンロード方法
　以下のNASAのサイトからダウンロードする。

 - Models | 3D Resources  
https://nasa3d.arc.nasa.gov/models

# 3. 天体の表面のデータ
　球体の表面に惑星の画像をマッピングしたい時とかに必要。
## 3.1 ダウンロード方法
　NASAではないが、three.jsで球体に惑星の画像を貼り付ける場合とかには以下の方が上手くいく（経験談）。

 - Planet Earth Texture Maps  
http://planetpixelemporium.com/earth.html

　または、以下のNASAのサイトからダウンロードする。

 - Images | 3D Resources  
https://nasa3d.arc.nasa.gov/images

# 4. 位置、形状、表面のデータを使ってみる
　実際にこれらのデータでどんなものが作れるのかを、以下に挙げていく。
## 4.1 three.jsでプロットした例
　例えばthree.jsで以下のようなものが描ける。

 - パイオニア10号・11号, ボイジャー1号・2号（＋木星, 土星, 天王星, 海王星）の位置（1977年〜1990年）  
**以下の画像が実際のページへのリンクとなっている。**  
※各探査機はかなりの大きさ、惑星は実際の1000倍に拡大してある。 探査機の向きとか細かいことは気にしないでもらいたい。
[![probe.jpg](https://qiita-image-store.s3.amazonaws.com/0/282333/421982e8-88cb-56c9-f620-2a23b2aee84d.jpeg)](https://pioneer10-11-voyager1-2.glitch.me/)
プログラミング学習記録11〜インターネットとウェブの違いについて確認〜

##今日やったこと
- Udemyの「Web開発入門完全攻略コース - プログラミングをはじめて学び創れる人へ！未経験から現場で使える開発スキルを習得！」のセクション1、２を受講
- TED-Edの「World Wide Web とは？-- トゥワイラ・キャンプ」を視聴
- サルワカさんの「URLのwwwとはどんな意味？Webとは？わかりやすく解説」でインターネットとウェブの違いを確認

今日は主にUdemyの講座を受けていました。

以下、セクションごとにとったメモです。

###セクション１（コース概要）
####１.コース概要
コースの全体像に関する解説。
１８時間でいろいろ学べるコースだということがわかりました。

####2.学習の進め方
わからないところはQ&Aで質問できるらしいです。
他の人がした質問も見れるのはいいですね。

####3.ビデオ速度の変更
Udemyの動画プレーヤーの使い方について。
速度調節して聴けます。
この講座の中村先生の動画は1.5倍速がちょうどいいです。

####4.添付ファイルのダウンロード方法
ファイルのダウンロード方法の解説。
PC初心者の方に向けた内容ですね。

####5.Q&Aコーナーについて
あくまでも質問はレクチャーの内容の範囲内でお願いします、とのことです。


####セクション１全体の感想
Udemyの基本的な使い方についてざっくり学びました。特にわからないことはなかったので、このまま進みます。

###セクション２フロンドエンド開発概要
####6.イントロダクション-フロントエンド 開発概要
このセクションの概要についての動画になっています。

####7.開発環境の構築
開発環境「Google chrome」「Atom」
のインストール方法の解説動画。

この２つはすでにインストール済みなので、特に問題なし。一応最後まで見ましたが、インストール済みの方は見なくても大丈夫です。

####8.インターネット入門
インターネットの歴史やIP、ドメインなどの基本的な用語の確認をしました。
動画内で紹介されていたWWWの解説動画がわかりやすかったです。こちらの動画です↓
https://www.youtube.com/watch?v=J8hzJxb0rpc&feature=youtu.be
「設定」から日本語字幕を出せるので、英語がわからなくても見れます。

TED-Edの他の動画も見てみたのですが、めちゃわかりやすくていいですね。

また、WWWとインターネットの違いについてはサルワカさんのブログ記事がわかりやすいです↓
「URLのwwwとはどんな意味？Webとは？わかりやすく解説」
https://saruwakakun.com/it/web/www





####9.フロントエンド開発で重要な3要素
フロントエンド開発でよく使われるHTML、CSS、JavaScriptとはなにかついての解説動画。
フロントエンドは見た目、バックエンドは中身と考えるとわかりやすいです。

動画中に出てくる「フロントエンド とバックエンドの概念図」がわかりやすかったです。

####セクション２全体の感想
動画でわかりやすくフロントエンド、バックエンドの違いが解説されていて、非常にわかりやすかったです。

また、何気なく接していたインターネットやWWWなどの言葉も確認することができました。

意味を忘れてしまった時は、TED-Edの動画やサルワカさんのブログを見て確認しようと思います。


という感じで、明日からも引き続きプログラミング学習を頑張っていきたいと思います。

おわり
PostgreSQLのパラメータを確認する

# ログイン
```postgres:cmd
C:\Users\xxx>psql -U postgres`
ユーザ postgres のパスワード:
```
# パラメータの確認
```postgres:pgsql
postgres=# show all;
                  name                  |                       setting                       |                                                          description
----------------------------------------+-----------------------------------------------------+-------------------------------------------------------------------------------------------------------------------------------
 allow_system_table_mods                | off                                                 | Allows modifications of the structure of system tables.
 application_name                       | psql                                                | Sets the application name to be reported in statistics and logs.
 archive_command                        | (disabled)                                          | Sets the shell command that will be called to archive a WAL file.
 archive_mode                           | off                                                 | Allows archiving of WAL files using archive_command.
 archive_timeout                        | 0                                                   | Forces a switch to the next WAL file if a new file has not been started within N seconds.
```


```postgres:pgsql
postgres=# select name, setting, unit from pg_settings;
                  name                  |                       setting                       | unit
----------------------------------------+-----------------------------------------------------+------
 allow_system_table_mods                | off                                                 |
 application_name                       | psql                                                |
 archive_command                        | (disabled)                                          |
 archive_mode                           | off                                                 |
 archive_timeout                        | 0                                                   | s
```
JQueryでhtmlをincludeする

いまさらJQuery。

# 概要
html内でフッターやヘッダーなどの共通部分のhtmlをincludeするコード。
htmlを記述する際に同じ部分をたくさん書かずに済む。メンテも楽！

(2019/3/13追記)
[もうちょっと実用的な関数](https://qiita.com/kihoair/items/4c59d5e65cab0cbb0bb5)を後日作りました。

# コード 

共通部分を呼び出したいhtmlファイルの一部。共通部分は`<div class="target"></div>`の中に展開されます。

```html:index.htmlの一部

<script type="text/javascript" src="includeTemplateHTML.js">
IncludeTemplateHTML("div.target","/Path/Of/templateHTML.html");
</script>
<div class="target"></div>
```

共通部分を呼び出すためのJS関数。

```js:includeTemplateHTML.js
function IncludeTemplateHTML(selector,filepath){
	$(function (){
		$.ajaxSetup({cache:false});
		$(selector).load(filepath);
	});
}
```

#補足

template自体が共通部分なのでさらにその中の一部分を呼びたい、ということはほとんどないと思いますが、
引数のfilepathを

```
filepath="/Path/Of/templateHTML.html div#hogehoge"
```
にかえてやればtemplateHTML.htmlのdivタグのid="hogehoge"の内容だけをselectorにインクルードさせることができます。



# 参考

- [jQuery load() を使って別のページの見出しを表示する](http://www.webdesignleaves.com/wp/jquery/1593/)
- [load( url, data, callback ) - jQuery 日本語リファレンス](http://js.studio-kingdom.com/jquery/ajax/load)
- [.load() | jQuery 1.9 日本語リファレンス | js STUDIO](http://semooh.jp/jquery/api/ajax/load/+url,+data,+callback+/)
JavaScriptについての個人的まとめ

#この記事について#
自分の備忘録として、JavaScript全般についての自分の考えや調べたことを記載していきます。
ほぼリンク集として使用。
経験が浅いので、間違っていることもあると思いますがご容赦ください。


#小技

| 事項       |       説明|       参照|
|:-----------------|:------------------|:------------------|
|イベント処理|イベント、イベントハンドラについて|[イベント処理/JavaScript](https://beginners-hp.com/javascript/event.html)|
|イベントリスナー一覧|イベントリスナーについて|[イベントリスナー一覧/JavaScript](https://beginners-hp.com/javascript/event_listener/#input)|
|JQuery-入力チェック|jQuery Validation Engine<br>を使った入力チェック|[jQueryで簡単！フォームをリアルタイムで入力チェック](https://allabout.co.jp/gm/gc/420327/)<br><br>[サンプルコード](https://kitano-daichino-gijyutuya.hatenadiary.jp/entry/2015/06/12/174204)|
|ブレークポイントによるデバッグ|-|[ChromeのデベロッパーツールでJSをデバッグする方法(2018年版)](https://ics.media/entry/11735)|
|要素に紐づくイベント確認|ボタンを押したらどのイベントが動くかを確認|[JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め](https://qiita.com/shgkt/items/0054670269e1d3aa49b8)|

#エラー対応

| 事象       |       説明|       参照|
|:-----------------|:------------------|:------------------|
|資源が読み込めない|Failed to load resource: the server responded with a status of 404 (Not Found)|[Jqueryがテストサーバーで動いていたけど、本番環境で動かない場合](https://step-by.work/custom/37)|
Sakura EditorでGit管理フォルダを除外してGrepする

#経緯
サクラエディタでGrep検索時、Git管理フォルダ(.git)を除外して検索したい
↓
フォルダを除外すればよいはず
↓
ググラビリティ不足なのか見つからない
↓
**ヘルプ見てみたらちゃんと書いてあった！**

>ファイルパターンの先頭に#を付ける(例: #*.svn)と、そのパターンに当たるサブフォルダをGrep対象から外します。(sakura:2.1.0.0以降)

***
と、いうことで以下のようにファイルパターンを指定すればちゃんと除外できました。

```ファイル名指定
#*.git *.*
```

他のバージョン管理フォルダ(.svn等)や、ログフォルダなどもこれでうまいこと除外できます。
ヘルプ記載の通り、バージョン2.1.0.0以降を使用する必要があります。
composer requireで怒られた。[but these conflict with your requirements or minimum-stability.]

## カーボン入れようとして、なんか怒られた
```
＄composer require nesbot/carbon
Using version ^2.14 for nesbot/carbon
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Your requirements could not be resolved to an installable set of packages.

Problem 1
    - laravel/framework v5.5.45 requires nesbot/carbon ^1.26.0 -> satisfiable by nesbot/carbon[1.26.0, 1.26.1, 1.26.2, 1.26.3, 1.26.4, 1.27.0, 1.28.0, 1.29.0, 1.29.1, 1.29.2, 1.30.0, 1.31.0, 1.31.1, 1.32.0, 1.33.0, 1.34.0, 1.34.1, 1.34.2, 1.34.3, 1.34.4, 1.35.0, 1.35.1, 1.36.0, 1.36.1, 1.36.2] but these conflict with your requirements or minimum-stability.
 (省略) 
```

## 原因
Ver2.14見つけけど、フレームワークは 1.26.0から1.36.2を要求してるから矛盾してるよ!!という事らしい

## 対応

バージョン指定してあげる

```
$ composer require nesbot/carbon:1.36.2
```
受け取ったrsyslogの要素を出力する

## 目的

``rsyslog``で受け取ったsyslogメッセージを他Appで解析する際になーんかうまく解析できねーぞと。
そのApp側で要素をdebug出力してくれればいいんだけど、開発チームと試験チーム、構成管理チームが別々だとそんな依頼すんのも面倒くさい。構成管理チームで一時解析してやろーじゃねーかと。

もしくは、どっかの誰かがうちのサーバにsyslogを送りつけてきやがる。犯人探したろ！みたいなとき。

## 環境

```
# cat /etc/redhat-release
CentOS release 6.6 (Final)

# rpm -qa rsyslog
rsyslog-5.8.10-10.el6_6.x86_64
```

## 実現方法

``rsyslog``のフォーマット(テンプレート)機能を使う。
デフォルトのフォーマット(テンプレート)には``%HOSTNAME%``はあるけど``%fromhost-ip%``が入ってない。不親切。

```/etc/rsyslog.d/abcdefg.conf
$template template_out, "---------------\ntimestamp  :%TIMESTAMP%\nfromhost-ip:%fromhost-ip%\nhostname   :%HOSTNAME%\nfacility   :%syslogfacility-text%\nseverity   :%syslogseverity-text%\nsyslogtag  :%syslogtag%\nmsg         :%msg:::drop-last-lf%\n"
*.* /tmp/out.log;template_out
```

上記のように編集して``rsyslog``を再起動。

```
# service rsyslog restart
システムロガーを停止中:                                    [  OK  ]
システムロガーを起動中:                                    [  OK  ]
#
```

指定した「/tmp/out.log」をtailしてみる。

```
# tail -F /tmp/syslog_out.log
---------------
timestamp  :Mar 16 05:45:17
fromhost-ip:127.0.0.1
hostname   :localhost
facility   :daemon
severity   :info
syslogtag  :systemd[1]:
msg         :Started Session 6 of user root.
---------------
timestamp  :Mar 16 05:45:17
fromhost-ip:127.0.0.1
hostname   :localhost
facility   :auth
severity   :info
syslogtag  :systemd-logind[671]:
msg         :New session 6 of user root.
---------------
timestamp  :Mar 16 05:45:17
fromhost-ip:127.0.0.1
hostname   :localhost
facility   :authpriv
severity   :info
syslogtag  :sshd[9200]:
msg         :pam_unix(sshd:session): session opened for user root by (uid=0)
```

満足するまで確認したら``/etc/rsyslog.d/abcdefg.conf``を消して``# service rsyslog restart``しておく。

### ちなみに

良くある問い合わせが「``logger``で送出したテストsyslogがうまく解析できない」なんて言われて確認すると
``# logger -p user.err "test: hogehoge"``なんて感じでシスログタグをmsgに入れ込んでたりする。
ホントによくある。人生でもう5回以上別の人から聞かれた。そんなに知らんもんかねみんな。
GitHubでフォークしてプルリクしてOSSにコントリビューションする

最近GitHubでフォークしてプルリクすることを覚えたのでそのやり方のメモです。他の人の成果物に貢献することがとても簡単にできます。

この記事は[WebSphere LibertyのDockerfile](https://github.com/WASdev/ci.docker/blob/master/ga/18.0.0.4/kernel/Dockerfile)に小さな間違いを見つけてを直してもらったときの例です。このDockerfileはApache License 2.0であり、一応、OSSにコントリビューションしたことになるのではないでしょうか。自分はインフラ寄りのエンジニアでありOSSへのコントリビューションとは無縁だと思っていましたが、プログラマでなくても例えばドキュメントなど、けっこう簡単にOSSにコントリビューションできるのではという印象です。

## 手順

以下の手順でフォークしてプルリクします。

### フォーク

[対象のリポジトリ](https://github.com/WASdev/ci.docker)へ行き、右上のForkボタンを押します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/86449/08dbdafc-2f1b-746e-402d-2b896078d2b2.png)

### クローン

フォークした自分のリポジトリをクローンします。

```shell
git clone git@github.com:sotoiwa/ci.docker.git
```

### upstreamを追加

リモートを確認します。

```shell-session
$ cd ci.docker
$ git remote -v
origin	git@github.com:sotoiwa/ci.docker.git (fetch)
origin	git@github.com:sotoiwa/ci.docker.git (push)
$
```

フォーク元リポジトリをupstreamとして追加します。

```shell
git remote add upstream git@github.com:WASdev/ci.docker.git
```

確認します。

```shell-session
$ git remote -v
origin	git@github.com:sotoiwa/ci.docker.git (fetch)
origin	git@github.com:sotoiwa/ci.docker.git (push)
upstream	git@github.com:WASdev/ci.docker.git (fetch)
upstream	git@github.com:WASdev/ci.docker.git (push)
$
```

### フォーク元リポジトリとフォークしたリポジトリの同期

フォーク元リポジトリが更新された場合に、フォークしたリポジトリを同期するには以下のようにします。

```shell
# ブランチをmasterに変更
git checkout master
# upstreamからpullしてローカルのmasterを更新
git pull upstream master
# ローカルのmasterをoriginにpush
git push origin master
```

### ブランチ作成

ブランチを作成してそのブランチをチェックアウトします。

```shell
git checkout -b fix/default-login-shell
```

### 修正してcommitしてpush

今回はuserのログインシェルが間違っていたのを修正しました。commitしてpushします。

```shell
git add .
git commit -m "Specify correct login shell when adding user"
git push --set-upstream origin fix/default-login-shell
```

### プルリク作成

フォーク元、フォークした自分のリポジトリどちらに行っても、「Compare & pull request」ボタンが現れるので、ボタンを押してプルリクを作成します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/86449/fd4c0977-91a6-9d8a-3041-fad1f5f7fa36.png)

base repogitryがフォーク元のリポジトリのmasterブランチ、head repogitoryがフォークしたリポジトリの修正ブランチであることを確認します。

Issueに対する修正の場合はIssueの番号を書くと関連づけされます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/86449/377ac085-d66a-2637-5b15-44c1096ae1d1.png)

- https://github.com/WASdev/ci.docker/pull/214

### マージ

無事にマージされました。もし何か指摘された場合は修正してコミットすればいいはずです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/86449/aed377e3-16bf-844d-62ac-6a0a00678b1d.png)

### ブランチとフォークの削除

ブランチが必要なければGitHubでプルリクに表示される「Delete branch」ボタンで消しておきます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/86449/6a69b4b9-0e4f-36cb-17d5-b358fa8520a1.png)

フォークしたリポジトリ自体も不要なら「Delete fork」ボタンで消します。

### おまけ

マージされるとそのリポジトリのcontributorsに載ります。ちょっと嬉しいです。

- https://github.com/WASdev/ci.docker/graphs/contributors

OSSライセンスはいろいろよくわかっていなかったので以下の本を読んで勉強しているところです。

- [OSSライセンスの教科書](https://amzn.to/2NAE0Kp)

## 参考リンク

- [Github で Fork してから Pull Request をするまでの流れ](http://kik.xii.jp/archives/179)
PlayFabのアップグレードが自分で出来るようになりました

原文は[こちら](https://blog.playfab.com/blog/self-serve-tier-upgrades-now-available)

### Essential からのアップグレードがPlayFabチームへの連絡なしで行えるようになりました

要はリリースされて本番利用されるタイミングをいちいちPlayFabチームとやり取りしなくても、ポータル上から変更できるようになりましたよ
というお話し

現状の価格帯は下図の通り
![playfabup_01.png](https://qiita-image-store.s3.amazonaws.com/0/313446/f5ced5c9-3c58-adcf-e7e9-28235cb053c3.png)

Essentialで利用した際の制限としては以下の通り
Essentialはあくまで開発用レベルなので、このままお客様に提供するサービスのバックエンドとして使うのは難しいですよね
・ほとんどのPlayFabサービスに対する比較的低い制限
（例：プレーヤーごとのデータストレージ、プレーヤーインベントリのサイズ、リーダーボードの数）
・サービスレベルアグリーメント（SLA）や専用サポートプランがない
・新しいプレミアムサービスを利用する機会がない
（例：マルチプレイヤーサーバーホスティング、統合データウェアハウス)

現在のデータ利用状況は 「設定」 -> 「制限」 から確認可能
![playfabup_02.png](https://qiita-image-store.s3.amazonaws.com/0/313446/5d9bb690-da8b-1ffb-d91f-c50618662d3f.png)


### で、どうやったら変更できるの？

ゲームマネージャ(PlayFab管理画面)の該当のスタジオ設定から変更可能
![playfabup_03.png](https://qiita-image-store.s3.amazonaws.com/0/313446/e6364c63-afac-2108-b0af-4d7f9e1ea284.png)

変更したいプランを選んでクリック
![playfabup_04.png](https://qiita-image-store.s3.amazonaws.com/0/313446/cfcd499d-59c7-e18c-335d-817a71740b08.png)

住所とクレジット情報を入力して「次へ」をクリック
![playfabup_05.png](https://qiita-image-store.s3.amazonaws.com/0/313446/57a2f113-2eb9-2e59-a6e7-f47a96f1a249.png)

支払いプランとして「従量課金制」か「予約済」を選択することができます。
「予約済」はある程度大規模もしくは接続者数が安定してる場合に選択したほうがよく、基本的には「従量課金制」を選択したほうが良いそうです
スクショでは切れてますが、下の方にある「次へ」をクリック
![playfabup_06.png](https://qiita-image-store.s3.amazonaws.com/0/313446/7367f40a-54ed-a459-1795-ef3739b3a34e.png)

表示されている情報に間違いがなければ「Upgrade」をクリックすることで反映されます
(連絡先情報はあえて消してますが、実際は表示されます)
![playfabup_07.png](https://qiita-image-store.s3.amazonaws.com/0/313446/1a7960f7-ed16-80a5-f335-34e61945f707.png)
SQL Serverで領域に含まれるフィーチャーを取得する

~~ArcGIS ServerのREST APIでデータを取得するのが面倒だから~~ArcGIS Serverを介さずにデータを取得できないか試してみたらできました．

<br />

例えばフィーチャーを格納するテーブルがあって

```sql
CREATE TABLE SAMPLE_FEATURE(SHAPE geometry NULL);
```

こんな感じにデータが格納されているとします．

```sql
INSERT INTO SAMPLE_FEATURE(SHAPE) VALUES(geometry::STPointFromText('POINT(133 33)', 4326));
INSERT INTO SAMPLE_FEATURE(SHAPE) VALUES(geometry::STPointFromText('POINT(133 34)', 4326));
INSERT INTO SAMPLE_FEATURE(SHAPE) VALUES(geometry::STPointFromText('POINT(134 33)', 4326));
INSERT INTO SAMPLE_FEATURE(SHAPE) VALUES(geometry::STPointFromText('POINT(134 34)', 4326));
INSERT INTO SAMPLE_FEATURE(SHAPE) VALUES(geometry::STPointFromText('POINT(135 34)', 4326));
INSERT INTO SAMPLE_FEATURE(SHAPE) VALUES(geometry::STPointFromText('POINT(135 35)', 4326));
INSERT INTO SAMPLE_FEATURE(SHAPE) VALUES(geometry::STPointFromText('POINT(135 36)', 4326));
INSERT INTO SAMPLE_FEATURE(SHAPE) VALUES(geometry::STPointFromText('POINT(136 35)', 4326));
INSERT INTO SAMPLE_FEATURE(SHAPE) VALUES(geometry::STPointFromText('POINT(136 36)', 4326));
INSERT INTO SAMPLE_FEATURE(SHAPE) VALUES(geometry::STPointFromText('POINT(136 37)', 4326));
INSERT INTO SAMPLE_FEATURE(SHAPE) VALUES(geometry::STPointFromText('POINT(137 36)', 4326));
INSERT INTO SAMPLE_FEATURE(SHAPE) VALUES(geometry::STPointFromText('POINT(137 37)', 4326));
```

<br />

全件取得する場合はこんな感じです．

```sql

SELECT SHAPE.STX AS X, SHAPE.STY AS Y FROM SAMPLE_FEATURE;
```

```text
|  X  |  Y |
|-----|----|
| 133 | 33 |
| 133 | 34 |
| 134 | 33 |
| 134 | 34 |
| 135 | 34 |
| 135 | 35 |
| 135 | 36 |
| 136 | 35 |
| 136 | 36 |
| 136 | 37 |
| 137 | 36 |
| 137 | 37 |
```

<br />

ある領域に含まれるフィーチャーのみを抽出したい場合は，領域をあらわすポリゴンと交差するかを判定します．

```sql
DECLARE @extent_wkt nvarchar(1000) = 'POLYGON ((134 36,136 36,136 34,134 34,134 36))'
DECLARE @polygon geometry = geometry::STGeomFromText(@extent_wkt, 4326)

SELECT SHAPE.STX AS X, SHAPE.STY AS Y FROM SAMPLE_FEATURE WHERE SHAPE.STIntersects(@polygon) = 1;
```

```text
|  X  |  Y |
|-----|----|
| 134 | 34 |
| 135 | 34 |
| 135 | 35 |
| 135 | 36 |
| 136 | 35 |
| 136 | 36 |
```
Laravel インストール

まずは、Composerのインストール
 1.windowsの場合
  https://getcomposer.org/download/
![image.png](https://qiita-image-store.s3.amazonaws.com/0/368688/6de75d03-e2c2-0cab-1fea-2253d98621f0.png)

2.Macの場合

次に、Laravelのインストール
コマンドプロンプトで下記を実行
※インストールまで少し時間がかかります。

```composer
composer global require "laravel/installer=~1.1"
```

最後に、環境変数passの設定
1.コントロールパネルを開き、『詳細設定』タブの「環境変数」ボタンを押す
![image.png](https://qiita-image-store.s3.amazonaws.com/0/368688/58d628b7-0a69-46ed-8aa7-788a600d44fa.png)

2.『システム環境変数』のリスト中から「Path」を探し編集
![image.png](https://qiita-image-store.s3.amazonaws.com/0/368688/309cd345-83c6-a926-3380-256edbb6331b.png)

以下を先頭に追加
![image.png](https://qiita-image-store.s3.amazonaws.com/0/368688/aac500e1-1f11-2722-8764-759c7a87bcc4.png)
※binの後に「;」を加える
※編集ウインドウがリストになっている場合は『新規』ボタンを押し、上記を追加する。


以上でインストールは終了です。
誤りなどあればコメントお願いします。
Fetch APIで取得したjsonを任意の型で取得する

Fetch API使っていますでしょうか？便利な反面、取扱いが面倒な点もあります。

「そもそもFetch APIってなに？」って方はこちらをご参考ください。
https://qiita.com/tomoyukilabs/items/9b464c53450acc0b9574

## Fetch APIの面倒な点

- せっかくTypeScriptを使っていても、レスポンスのjsonがany型になる
- いちいちresponse.okで出し分けをする等の処理が必要になる

そこで、fetchをそのまま使うのではなく、fetchをラップして上記の課題を解決した(レスポンスを型を付けつつ便利に安全に取り出す)ものを共通的に使い回すようにしたいというのが今回のモチベーションです。

*なお、個人的にReactでSSRしているのでクライント・サーバー両方で使えるisomorphic-unfetchを使っていますが、普通のFetch APIでも同じだと思います。(たぶん。。違っていたら教えてください)*

## fetchをラップする

`fetch(input: RequestInfo, init?: RequestInit)`のreturn typeは`Promise<Response>`になるので、そいつをラップする関数を作ります。response.okで出し分けし、jsonを取得できた場合のみresolveとし、それ以外の全ての場合はrejectとします。こうすることで、このラップされたfetchを使用する側では、単純にthenかcatchでレスポンスの結果を振り分けることが可能になります。jsonの型は型引数(T)で指定できるようにします。

```typescript:fetcher.ts
// Tはレスポンスのjsonの型を指定する
const wrap = <T>(task: Promise<Response>): Promise<T> => {
  return new Promise((resolve, reject) => {
    task
      .then(response => {
        if (response.ok) {
          response
            .json()
            .then(json => {
              // jsonが取得できた場合だけresolve
              resolve(json)
            })
            .catch(error => {
              reject(error)
            })
        } else {
          reject(response)
        }
      })
      .catch(error => {
        reject(error)
      })
  })
}
```

あとは、本来のfetchを上記の関数でラップするだけです。

```typescript:fetcher.ts
import fetch from 'isomorphic-unfetch'

// const wrap = ...

const fetcher = <T = any>(
  input: RequestInfo,
  init?: RequestInit
): Promise<T> => {
  return wrap<T>(fetch(input, init))
}

export default fetcher
```

使用する側ではこうなります。例ではQiitaの記事を取得するAPIを叩いています。実際にVSCode等のエディタで動かしてみるとわかりますが、itemsの型が`QiitaItems`になっていてArrayのメソッドであるforEachが使えていますし、その要素のitemの型もきちんと取得できているので、item.idやitem.titleといったコード補完も効きます。

```typescript
import fetcher from './fetcher'

// レスポンスの型を定義
type QiitaItems = Array<{
  id: string
  title: string
  url: string
}>

function getQiitaItems() {
  // レスポンスの型を指定
  fetcher<QiitaItems>(
    `https://qiita.com/api/v2/authenticated_user/items?per_page=5`,
    {
      headers: {
        Authorization: `Bearer ${process.env.QIITA_ACCESS_TOKEN}`
      }
    }
  )
    // item.idやitem.title、item.urlが参照できる
    .then(items => items.forEach(item => console.log(item.id)))
    .catch(err => console.log(err))
}
```

## リポジトリ

記事を読んでいただきありがとうございました。

最後にリポジトリを載せておきます。
https://github.com/masaki-koide/my-portfolio/blob/master/src/app/api/fetcher.ts

ここでは更に、timeoutという関数でラップしてfetch通信のタイムアウトを設定できるようにしています。仕組みとしては、setTimeoutで指定ミリ秒数後にrejectするpromiseと本来のタスクを行うpromiseをPromise.raceさせています。良ければ参考にしてみてください。
2019-02-27 Excel (Office 365) > 平均の仕方によって平均値は異なる > A. 300個平均(3.155899443), B. 60個平均を5個平均(3.144454011) > 誤差(0.011445431)

```txt:動作環境
Windows 8.1 Pro (64bit)
Excel Office 365 (Excel 2016)
```


## 計算が合わない

- A. 3600個のデータの平均
- B. (60個のデータの平均)の60個の平均

Excelを使うと、上記のAとBが整合しない。

手計算(自分のソフト)ではAもBも整合する。

## EXCELの誤差

### 試したこと

下記を試した。

- 300個のデータセット
    - 299個は3.14159265358979
    - 1個は4.0
- A. 300個の平均
- B. (60個の平均)の5個の平均

### 結果

A. 3.155899443
B. 3.144454011

誤差|A-B| = 0.011445431

### 備考

300個すべての値を`3.14159265358979`とした時はAもBも同じ結果でした。


### まとめ

- EXCELで平均計算するときは計算の仕方に気を付けましょう
- 手計算とEXCEL計算が合わない理由は上記の状況のためかもしれません

### 提供情報1

EXCELの誤差については、Qiitadonで下記のように教えていただきました。

https://qiitadon.com/@hidao/101662908455757065
@hidao さんWrote
> Excelは数値を内部的に2進数で保持しているので、小数使うと誤差出ます。
建築屋の兄が言うので間違いないと思います。

続けて@hidaoさん、@7of9、@real_yaruo さんの関連Tootは上記のリンク先を参照ください。

### 提供情報2

Excelの誤差について、@hidaoさんから関連情報を教えていただきました。

情報感謝です。

https://qiitadon.com/@hidao/101663047773685004
@hidaoさん Wrote
>Excel誤差のMSによる公式見解
>
>https://support.microsoft.com/ja-jp/help/78113/floating-point-arithmetic-may-give-inaccurate-results-in-excel

上記記事の英語版は下記のようです。
https://support.microsoft.com/en-us/help/78113/floating-point-arithmetic-may-give-inaccurate-results-in-excel

@hidaoさん、情報感謝です。


### 記載内容について

@hidaoさん
@real_yaruo さん

記載内容に問題があればご連絡ください。
対処いたします。

あるいは、補足情報がありましたら、編集リクエストください。