OmniAICreator/Qiita-1.07M huggingface dataset:
HTML > headタグに記載した内容がbodyタグ内に移動してしまっている

### 状況
何でも良いのですが、以下のようなhtmlファイルがあるとします。

```
<!DOCTYPE=html>
<html>
<head>
　<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
テスト
<body>
</html>
```

上記をブラウザで表示すると、以下のようにheadタグ内に記載した内容がbodyタグに移動してしまっている。
<img width="514" alt="スクリーンショット 2019-03-29 23.57.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/23789/0963fbd6-f646-1d48-e90c-f5c769e940a6.png">

### 原因
headタグ内に全角スペースが入力されているから。

ASP.NETで既存のWEBページにあとからmasterpageを設置するという作業でハマった。
masterpageが原因かという思い込みにとらわれてしまった・・・。
既存のページは単にheadタグの記載がbodyにずれるだけだから、
表示自体には問題がなかっただけ。

ちなみにVisual Studioでエディタにスペースを表示させる方法は、
メニューバーの［編集］－［詳細］－［スペースの表示］を選ぶ。
Google関係のWEBページ、WEBドキュメントを簡単に英語版に変更する方法（小技）

##〇概要
Androidアプリ開発などGoogle関係の仕事をしていますが、最近はWEBページやWEBドキュメントを日本語版も用意してくれているので、とても助かります。

しかし、日本語のドキュメントは更新が遅かったり翻訳の内容が間違っていたりで、最新の情報が欲しい場合は英語版を読まないといけません。
かといって設定から切り替えるのは面倒です。

そんなときは、パラメータに
・言語を変更
**<font color="blue">hl=en</font>**


・地域を変更
**<font color="blue">gl=US</font>**

と設定すれば、一時的に簡単に変更できます。

・言語コード一覧
https://ja.wikipedia.org/wiki/ISO_639-1%E3%82%B3%E3%83%BC%E3%83%89%E4%B8%80%E8%A6%A7
・地域コード一覧
https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2

（例）

https://developer.android.com/google/play/developer-api
https://developer.android.com/google/play/developer-api?hl=en

##〇WEB検索の場合
英語だと日本語の10倍情報が得られると言われています。
日本語だと日本人向けの解説サイトが上のほうに表示されやすいですね。

https://www.google.com/
で検索
![search1.png](https://qiita-image-store.s3.amazonaws.com/0/252283/dfc17662-08e2-d377-c75d-37c751707f61.png)

https://www.google.com/?hl=en
で検索(gl=USもつけるとより英語サイトが上に表示されます)
![search2.png](https://qiita-image-store.s3.amazonaws.com/0/252283/792853bd-2de2-eb6e-d434-dbc81cedc9bf.png)

##〇Google Play ストア検索の場合

Google Play Storeの表示も、海外では何が流行っているのか分かります。
レイアウトも違うようです。
（日本はゲームばかり・・・）

https://play.google.com/store/apps
![game1.png](https://qiita-image-store.s3.amazonaws.com/0/252283/50337ef2-7782-1ad4-99c0-1be2d016658b.png)

https://play.google.com/store/apps?gl=US
![game2.png](https://qiita-image-store.s3.amazonaws.com/0/252283/314c0e10-0129-d903-d714-2e91dec72dc7.png)
Java SE 8 Silverに受かったので色々紹介

初めての投稿なので[こちら](https://qiita.com/uu64/items/93baa456abc95c4e0ab6)の書き方を少し真似てます

#結果
まずは試験結果

- 得点率 91%

中２にしてはそこそこ良い方だと思います(多分)

#難易度
基本的なことを奥底まで理解できているかを問う問題が多い印象がありました。なので、まだJavaの基本構文やオブジェクト思考、ラムダ式の基本的な使い方を理解していない様であれば[ドットインストール](https://dotinstall.com/lessons/basic_java_v2)を取り敢えず一通り終えるといいと思います。

#使った教材
- [徹底攻略 Java SE 8 Silver 問題集](https://www.amazon.co.jp/dp/4844339931/ref=cm_sw_em_r_mt_dp_U_RFDNCbFSHZQ8W)  
これの解説を読んで、なぜその様な答えになるかをしっかりと理解しておけば合格できるでしょう。

#勉強方法

解く毎に、[間違えた,偶然合った,迷った]のどれかに該当すればその問題に印をつける。

- 取り敢えず登校時の電車での移動時間などの隙間時間を利用して1周目(正答率４５％くらい)
- 1周目に間違えたものをやり直す
- 2周目をする(正答率７０％くらい)
- 2周目に間違えたものをやり直す
- 印が付いた問題を重点的に最終確認を行う(解説の中で重要な所が所々あるので、そこも合わせて読んでおく。例えばswitch文に入れる事が出来る型の一覧や正規表現の表など)  

以上

#試験中に意識していたこと
自分が常に意識していたことをまとめておきます。

- プログラムの実行順序を落ち着いて確認する
- エントリーポイントが`public static void main(String[] args){}`になっているか
- アクセスしているフィールドやメソッドの修飾子を確認する
- そのオブジェクトの参照先がどこにあるのか
- 到達不可能なコードがないか
- NullPointerExceptionが発生しないか
- 多様性、キャストを正しく実行できるか
- 不変オブジェクトかどうか
- コンストラクタを正しく実行できるか

#試験時間
試験時間は２時間３０分で77問なのでかなり余裕があります(自分は1時間で終わりました)。なので、時間に関しては気にせず、ミス無くじっくりと解けば良いと思います。

#例題
本の中で印象に残っている問題はこんな感じの問題

```java:Main.java
public class Main {
	public static void main(String[] args){
		int i=0;
		while(i++<1) {
			++i;
		}
		System.out.println(i);
	}
}
```
<details><summary>何が表示されるか</summary>
答え：３
もし0と答えた人は引っかかってます。`i++<1`かの判断時に`i=i+1`されてます。
もし１と答えた人は後置インクリメントを理解しましょう。説明は[こちら](http://blog.o-kay.biz/?p=349)
もし２と答えた人はいい線いってます。自分も最初はこうでした。最初は`i++<1`の時に`i=i+1`になっていることに気付けているんですが、while内の処理を終えた後もう一度`i++<1`の判断をしているのでこちらも`i=i+1`されて、`i=3`になっています。最後まで油断禁物。
</details>

レベル的に難しい問題

```java:Main.java
public class Main{
	public static void main(String[] args){
		Sample s=new SubSample();
		s.test("Hello");
	}
}

interface Sample {
	void test(String s);
}

class SubSample implements Sample{
	void test(String s) {
		System.out.println(s+"!");
	}
}
```
実行すると、、、

A:Hello!と表示される
B:Mainクラスでコンパイルエラーが発生する
C:Sampleインターフェースでコンパイルエラーが発生する
D:SubSampleクラスでコンパイルエラーが発生する
E:実行時に例外が発生する

<details><summary>答え</summary>
答え：D
もしAと答えた人はインターフェースの詳しい仕様を理解しましょう。自分も最初はこれを選んでました。クラスは継承時にメソッドをオーバーライドする時、メソッドの修飾子はスーパークラスのメソッドの修飾子よりも厳しくする事が出来ません。また、インターフェースのメソッドは修飾子が無いと勝手にpublicが付いた状態になります。それを踏まえるとSampleインターフェースではtestメソッドの修飾子がpublicなのに、それを実装しているSubSampleクラスではtestメソッドの修飾子が無しとなり、より修飾子が厳しくなっているのでコンパイルエラーが発生します。
もしBを選んだ人は多様性について理解しましょう。説明は[こちら](http://blog.o-kay.biz/?p=349)
もしCを選んだ人はインターフェースを理解しましょう。説明は[こちら](https://www.sejuku.net/blog/25772)
もしEを選んだ人はコンパイルエラーなのか例外なのかをしっかりと区別できる様にしておきましょう。例外はカツ丼にケチャップをかけて食べるイメージで(見た目では美味いか不味いか分からないが、食べてみると不味かった)コンパイルエラーはカツ丼にお酢をぶっかけて食べるイメージ(見た目からして不味いのが分かる)。余計分かりにくくなった人はすみません(笑)
</details>

ここまで全問不正解の人も安心して下さい。こんな感じの問題が出てくるときもあれば、単純に基本構文を理解しているかを聞いてくるときもあります。この様な問題も黒本にすべて載っているので黒本を解説含めてしっかりと理解すればいずれは正解出来る様になります。

#申し込み
[こちら](https://takakisan.com/java-certification-silver-application/)を見て申し込みをしました。CertViewは自分は直後に行っても問題ありませんでした。試験結果は速攻で返ってきます。会場を出てトイレ行っている間に返ってきました。
Google フォント(日本語)でttfフィルを取得する方法

## Google フォント(日本語)でttfフィルを取得する方法
例えば、`https://fonts.googleapis.com/earlyaccess/nicomoji.css`を使っている場合は、`https://fonts.googleapis.com/earlyaccess/nicomoji.css`にアクセスしてください。
`https://fonts.gstatic.com/ea/nicomoji/v1/NicoMoji-Regular.ttf`が見つかるはずです。

注意: この方法が適さないフォントもあるようです。
## 終わりに
私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
        [無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話](https://note.com/kenroda/n/n814347fbdcd7)
Laravel のバリデーションルール exists に Eloquent を使う v2

以前に書いた [Laravel のバリデーションルール exists に Eloquent を使う](https://qiita.com/mikankari/items/7c1415f3663196443eb3)の強化版です

## 背景

以前書いた記事ではカラムやその値の無意識化を目的に、コンストラクタでモデル名を受け取り、存在をクエリするカスタムバリデーションルールを定義しました。

```php
$this->modelName::where($this->propertyName, $value)->exists()
```

しかし、この解決策には次の問題がありました

- 渡された値と DB 上の値の型が一致しないと SQL エラーになる場合がある
- 整数の場合に負数を渡してもクエリが走る

ルールをいくつか追加すると解決できますが、複数のエラーは出せないなどアプリの仕様に影響する、カラムやその値の無意識化を目的としているので避けたいところです。

```php
'id' => [
    'required',
    'integer',
    'min:1', // 主キーのカラムは 1 以上
    'max:2147483647', // 主キーのカラムは DB の integer の範囲
    'bail', // どこかで失敗したら Exists はバリデートしない
    new Exists(Hoge::class),
],
```

標準の exists では[例外的に他のルールで失敗したらバリデートはしない](https://github.com/laravel/framework/blob/5.7/src/Illuminate/Validation/Validator.php#L559)対応をしているようです。
カスタムバリデーションルールでは他のルールの失敗を得られないため、別の対応が必要そうです。

## 新しい解決策

悩んだうえ、できた新しいルールのソースコードが次
ほとんど主キーで探すことが多いので、対象を integer の主キーに絞ることで解決を図りました。

```php
<?php

namespace App\Rules;

use Illuminate\Contracts\Validation\Rule;

class ExistsKey implements Rule
{
    protected $modelName;

    const INTEGER_MAX = 2147483647;

    public function __construct(string $modelName)
    {
        $this->modelName = $modelName;
    }

    public function passes($attribute, $value)
    {
        // 整数でないときはバリデートしない。エラーは別のルールで出す。
        if (validator(['value' => $value], ['value' => 'integer'])->fails()) {
            return true;
        }

        if ($value < 1 || $value > self::INTEGER_MAX) {
            return false;
        }

        return $this->modelName::whereKey($value)->exists();
    }

    public function message()
    {
        return ':attribute はデータが存在しません';
    }
}
```

## 使い方

リクエストで渡された値がモデルの主キーとして存在するか調べます。

```php
use App\Hoge;
use App\Rules\ExistsKey;
```

```php
'hoge_id' => [
    'required',
    'integer',
    new ExistsKey(Hoge::class), // これ
],
```


## 追伸

使ってみるとそこそこ使えますが、対象を主キーに絞ったので、主キー以外のカラムで調べるときは別にクエリして調べる必要があります。

また内部的には整数であるかのバリデーションを 2 回することになります。
もっといい方法はないものか。
Auto resizing label

##文字の長さに合わせ自動でサイズが縮小される
```
let numbersLabel = UILabel()
numbersLabel.font = UIFont.systemFont(ofSize: 32)
numbersLabel.adjustsFontSizeToFitWith = true

addSubview(numberslabel)
numbersLabel.fillSuperview(padding: .init(top: 0, left: 32, bottom: 0, right: 32)) 

```
今更ながら Ruby on Rails Tutorial をやってみた (その9)

## この記事について…

普段はRuby on Railsと無縁なプログラマなんですが、今更ながら**面白そう**という単純な理由から[**Ruby on Rails Tutorial**](https://railstutorial.jp/)をやってみようと思い立ちました。今回は[前回の記事](https://qiita.com/hideki0145/items/424e4839f252a08f771d)の続きで第9章をやっていきます。
尚、Rails 5.1に対応した第4版を用いて、かつHyper-V上にインストールしたUbuntu 18.04の環境で進めていきます。

## 第9章 発展的なログイン機構

この章では第8章のログイン機構を発展させて、ログイン情報をブラウザのcookiesに記憶することで「ブラウザ再起動後でもすぐにログインできる機能(remember me)」を追加します。

今回のログイン機構の仕組みは、第6章で扱ったパスワード認証処理と似ていて、

「データベースに保存したダイジェスト(ハッシュ値)と、**cookiesに保存した値から計算したダイジェスト**が一致するかどうか」

を確認することで自動ログインするかどうか判断しています。
パスワード認証処理では

「データベースに保存したダイジェスト(ハッシュ値)と、**ユーザーがエディットコントロールに入力した値から計算したダイジェスト**が一致するかどうか」

でしたね。

ただ、パスワード認証処理ではRailsのメソッドである`has_secure_password`を呼び出すだけで面倒な記述をすることなく実装が完了していました。
今回は自身でコードを書く必要がありますが、`has_secure_password`の内部で何をやっているのか理解するのにとても良いと思います。

少し理解に時間が掛かったのは、「渡されたトークンがユーザーの記憶ダイジェストと一致することを確認します。」の部分。
[secure_passwordのソースコード](https://github.com/rails/rails/blob/master/activemodel/lib/active_model/secure_password.rb)に

```ruby:rails/activemodel/lib/active_model/secure_password.rb
BCrypt::Password.new(password_digest) == unencrypted_password
```

という箇所があるというのですが、2019/03/29現在そのような箇所はないような…？

少し追っかけてみると、2012年4月のコミット`ffa974d`の時点ではTutorialの通りの箇所がありました。
しかし、2014年12月のコミット`a928928`で

```ruby:rails/activemodel/lib/active_model/secure_password.rb
BCrypt::Password.new(password_digest).is_password?(unencrypted_password)
```

と修正されたようです。==演算子が再定義されている為 結局は同じなのですが、修正後の方が一目見て理解しやすい記述になっているなーと個人的には思います。

Railsに限りませんが、ソースコードがGitHub等で公開されている場合は参考にするのもいいなと感じます。勉強にもなりますしね。

それでは、次回 第10章から再開したいと思います。
[Go]小数点第Nで四捨五入する

## 追記
この記事の方法では丸め誤差がでるため、以下の記事を参考にしてください。
https://qiita.com/fujiwaram/items/f877a03114a1a47adc7d

## 概要
小数点第2、第3...と四捨五入する方法。

### floatからstring
```sample.go
v := fmt.Sprintf("%.2f", 12.3456)
fmt.Println(v) // "12.35"

v = fmt.Sprintf("%.3f", 12.3456)
fmt.Println(v) // "12.346"
```

### floatからfloat
```sample.go
v := 12.3456
fmt.Println(math.Round(v*100) / 100)   // 12.35
fmt.Println(math.Round(v*1000) / 1000) // 12.346
```

## 参考
https://yourbasic.org/golang/round-float-2-decimal-places/
数も数えられないなんて、あなたは疲れてるに違いない。

今回は`JavaScript`でクイズを出します。
回答に間違った人は、ブラウザのConsoleで実行して、実際に確認してみてくださいね。
それでは早速、クイズです。実行結果を予測してください。問題を良く見てくださいね！

```JavaScript
"ABCDEFGHĲKLMNOPQRSTUVWXYZ".length
```

正解は、、、`25`です。間違った人は、もう一度よく見直してくださいね！
では、次の問題！

```JavaScript
"abcdefghĳk㏐nopqrstuvwxyz".length
```

正解は、、、`24`です。また間違った人、疲れてませんか？文字が二重に見えているとか？？

それでは次は、短い文字列のサービス問題です。

```JavaScript
"ﬂight".length
```

正解は、、、`5`です！

、、、もうお気づきでしょうが、今回は2文字を1文字に合成(リガチャ)しているUnicodeの文字を使ってみました。私の[三つ前の記事](https://qiita.com/uniqode/items/a00b5f81933a6fb18045)で作成したAPIに `char=Ĳ` などとして下記の情報を得られます。

```JavaScript
{"name":"LATIN CAPITAL LIGATURE IJ","desc":"# 0049 004A","char":"Ĳ","code":"0132","block":"Latin Extended-A"}
{"name":"LATIN SMALL LIGATURE IJ","desc":"* Dutch # 0069 006A","char":"ĳ","code":"0133","block":"Latin Extended-A"}
{"name":"SQUARE LM","desc":"# <square> 006C 006D","char":"㏐","code":"33D0","block":"CJK Compatibility"}
{"name":"LATIN SMALL LIGATURE FL","desc":"# 0066 006C","char":"ﬂ","code":"FB02","block":"Alphabetic Presentation Forms"}
```

同様に

```JavaScript
"㍻㍼㍽㍾".length
```
も、答えは`4`です。ほかにも、Unicode表を眺めていると「㏽」「㍧」「㍇」などの面白いコードポイントが見つかるはずです。

では、もう間違えることはありませんね！最後の問題です！

```JavaScript
"a​​​​​​​​​​​​​​​​​​​​​​​​z".length
```

正解は、、、`26`でした！ヒントは`U+200B`です。

UnicodeのコードポイントをランダムにつぶやくBot [@BotUnicode](https://twitter.com/BotUnicode)を運用しています。ぜひフォローして、面白い字を見つけてみてください。

それではまた。
JavaScriptの標準入力って何ぞや？

# はじめに

[Paizaラーニング](https://paiza.jp/works) のスキルチェックに挑戦しようとしたが、JSの標準入力ってどうすんの？となったためメモ

# 他の言語だと
cなんかだと`scanf`ってのが最初から組み込まれているし
JacaだとScannerクラスをimportすればよい

JSはどうやら`Node.js`を使う必要があるみたいだ。

# JSで標準入力を受け取る方法

`Node.js`のを使い、入力用のライブラリ`readline`を呼び出す。
下記サンプルコードは[Paizaラーニング]( https://paiza.jp/works/js/primer/beginner-js3/8106/1 )で書いたもの。

```js
// 複数行の標準入力を取得する

process.stdin.resume();
process.stdin.setEncoding('utf8');

var lines = [];
var reader = require('readline').createInterface({
    input: process.stdin,
    output: process.stdout
});
reader.on('line', (line) => {
    // ここで入力を処理する
    lines.push(line);
});
reader.on('close', () => {
    // ここで出力する
    for(var i =0; i<lines.length; i++){
      console.log(lines[i]);
    }
});
```

# おわりに

駆け出しなのでまだまだですがよろしくお願いします。
データポータルを使ってみた。for Qiita

# 概要
- Qiitaのアクセスログを、以前よりGoogleAnalyticsで蓄積していました。
- データポータル（DataStudio)というBIツールを知り、使ってみた結果を示します。
- GoogleAnalyticsのダッシュボードでもいいんじゃない？っていうのはなしの方向で

# データポータル
- 下記のデータポータルから新しいレポートを開始からレポートを作ります。
- GoogleDocsやSpreadSheetのように非常に使いやすいです。
![qiita_20190329.JPG](https://qiita-image-store.s3.amazonaws.com/0/148213/3e863117-fd0a-5f95-937f-380f7fdcdb3f.jpeg)

# レポート作成
- GoogleAnalyticsを選択して、各フィールドデータをレポートに追加します。
![SnapCrab_NoName_2019-3-29_20-48-4_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/148213/cb8b9a8f-7a67-84b8-3e4b-d3adef53b02a.png)

![SnapCrab_NoName_2019-3-29_20-48-57_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/148213/8c0d1613-d615-c875-94ac-e161c0791777.png)

# 可視化
- あとはGUIで追加したいグラフを選択し、ディメンション・指標を入力し、スタイルを調整して完成です。
- 今回は、ページビューに対して、どの地域からのアクセスが多いか可視化してみました。
- ![SnapCrab_NoName_2019-3-29_22-10-51_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/148213/145ea3c5-e93b-4c9c-bd32-56c34333b5e9.png)

- グラフだけでもこんなにある・・・しゅごい・・・
<img src=https://qiita-image-store.s3.amazonaws.com/0/148213/c663bc2d-2e83-74b7-a8de-a3c65470ac43.png width=50%>
<img src=https://qiita-image-store.s3.amazonaws.com/0/148213/76f0dccf-252a-36b4-eeaa-0bf6988f7e5a.png width=50%>
<img src=https://qiita-image-store.s3.amazonaws.com/0/148213/8dab3f90-241f-bde8-4070-a49488170400.png width=50%>

# まとめ
- 昨今の見える化はもうこれでいいんじゃないか？だめか？
- 今更1から見える化システムを作るのは車輪の再発明ではなかろうか？
【機械学習】統計学の用語（質的データと量的データ、離散値と連続値）

#概要
- 機械学習で、分類と回帰を行うにあたって、抑えておくべき統計学の用語(質的データと量的データ、離散値と連続値)について勉強したいと思います。

# 統計学の用語(質的データと量的データ)
## 質的データ 
- 性別の区分、順序など分類できるデータのことです。
- 名義尺度と順序尺度に分類できます。

###名義尺度
- 性別、血液型など区分に分類できるデータのこと
- このデータは、四則演算などの計算対象外です。

###順序尺度
- 1位、2位、3位などの順序、病院内での症状の区分(気分が良い、少し気分が良い、普通、少し気分が悪い、とても気分が悪い)に意味を持たせる事が出来るデータのこと
- このデータは、四則演算などの計算対象外です。順序の比較は行います。

##量的データ
- 数値として測ることが出来るデータとして、比例尺度、間隔尺度があります。

###比例尺度
- 順序、身長、年齢、売上高、販売数量など物理的数量を測定したもの。比較することにより意味を持たせる事が出来るデータのこと。
- 例えば、売上高を例に取ると、先日の売上高と本日の売上高を比較するようなことです。
- 四則演算できます。

###間隔尺度
- 温度や西暦など一定の等間隔を持たせたデータに意味を持たせる事が出来るデータのこと。
- 例えば、 水の温度が50度から60度に上がったとき、その10度上がったことに意味を見出すこと。
- 足し算、引き算の計算が出来ます。

# 統計学の用語(離散値と連続値)
##離散値と連続値
- 量として計算できるデータはさらに離散値と連続値に分類できます。
- 離散値は、整数として表現されるデータです。人数、個数など
- 連続値は、時間と比例して連続して続くようなデータ。身長、体重など

#機械学習のお話（分類と予測）
##分類
- 機械学習で「分類」を行うことが出来るのは、質的データと量的データ（そのうちの離散値）です。
- 性別の場合、「男」、「女」に分類
- 順序の場合、「1位」、「2位」、「3位」に分類

##予測
- 機械学習で「予測」を行う対象は量的データのうちの連続値です。
- 例えば、機械学習の予測で、先週の売上高から今週の売上高を予測できます。

###説明変数と目的変数　2019.03.31追記
- 統計学においては、予測を回帰により分析します。
- 求める予測結果を「目的変数」、求めるに当り必要なデータを「説明変数」といいます。
    - 例えば、「明日の天気」を予測する場合、「過去の雨雲レーダーのデータ」を元にして予測するとしたら、「明日の天気」＝「目的変数」、「過去の雨雲レーダーのデータ」＝「説明変数」となります。
- 「目的変数」をY、「説明変数」をXとしたとき以下のモデルが成立します。

```math
Y = f(X) 
```


- 回帰は、「目的変数」Y、「説明変数」Xとの間にモデル(f)を当てはめる事です。この回帰を使って分析する事を回帰分析といいます。
- 回帰分析には、「線形回帰」、「非線形回帰」と呼ばれるモデルが有りますが、これについては、後日、記載していきたいと思います。
ML ライブラリの覚書き

# MLライブラリ(Python)
分野別
## 
## Deeplearning
Apache MXNet
Caffe/Caffe2
Chainer
Deeplearning4j
darch
deepnet
deepr
h2o
Keras
Microsoft Cognitive Toolkit
nnet
Pylearn2
PyTorch
TensorFlow
Theano

## Network
NetworkX 
hmmlearn 
PyHTK

## ベイズ
PyMC3 
TensorFlow Probability 
Pyro 
Edward2 
PyStan

## 時系列
Prophet 
scipy.signal 
statsmodels 

## クラスタリング
python-louvain 
scipy.cluster.hierarchy 
sklearn.cluster.*
sklearn.mixture.GaussianMixture 
Somoclu 

## 勾配ブースティング
LightGBM 
sklearn.ensemble 
XGBoost 

## ランダムフォレスト
sklearn.ensemble

## SVM
LIBSVM 
sklearn.svm 

## 一般線形モデル
sklearn.linear_model.Ordinary Least Squares 
sklearn.linear_model.Ridge 
sklearn.linear_model.Lasso 
sklearn.linear_model.Elastic Net
## ロジスティック回帰
sklearn.linear_model
## Kmean
Annoy 
faiss 
FLANN 
sklearn.neighbors
【Swift】TableViewでセルの高さを変更しよう

##1. セルの高さを一定の値に固定したい場合

`tableview.rowHeight = 高さ`　とする。

もしくはUITableViewDelegateを継承している場合、以下の書き方でもセルの高さを固定させることができる。

```swift
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 高さ
    }
```

##2. セルの高さを可変にしたい場合

`tableView.estimatedRowHeight = 高さ`
` tableView.rowHeight = UITableViewAutomaticDimension` の2つを追記する

##まとめ

```swift

class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource {
    
    @IBOutlet var commentTableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        commentTableView.delegate = self
        commentTableView.dataSource = self
        
        let nib = UINib(nibName: "CommentTableViewCell", bundle: Bundle.main)
        commentTableView.register(nib, forCellReuseIdentifier: "cell")

        //1. 固定にしたいとき
        commentTableView.rowHeight = 100
        
        //2. 可変にしたいとき
        commentTableView.estimatedRowHeight = 66
        commentTableView.rowHeight = UITableViewAutomaticDimension
     
    }

   //1. UITableViewDelegateを継承している場合
   func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 100
    }
}
```
Gitはどうやってテキストファイルとバイナリファイルを自動識別しているのか？

# tl;dr

先頭 8000 バイト以内に `NUL` が有ったらバイナリファイル。

# Gitの実装

Gitの内蔵diffは `FIRST_FEW_BYTES` だけ検索するようになっている。

- https://github.com/git/git/blob/6e0cc6776106079ed4efa0cc9abace4107657abf/xdiff-interface.c#L187

```c
#define FIRST_FEW_BYTES 8000
int buffer_is_binary(const char *ptr, unsigned long size)
{
	if (FIRST_FEW_BYTES < size)
		size = FIRST_FEW_BYTES;
	return !!memchr(ptr, 0, size);
}
```

## 8000 ?

なんで8192とかじゃないんだろうか。この数値はGitが自前のdiffを備えた当初から8000に設定されている。

- https://github.com/git/git/commit/3ce8f08944e614813c7dfb212a88b7c4e3b443bc#diff-ab603fc6eadf618560316097522fe585R235

```c
#define FIRST_FEW_BYTES 8000
static int mmfile_is_binary(mmfile_t *mf)
{
	long sz = mf->size;
	if (FIRST_FEW_BYTES < sz)
		sz = FIRST_FEW_BYTES;
	if (memchr(mf->ptr, 0, sz))
		return 1;
	return 0;
}
```

(前掲した現状のコードでは `memchr` の返値を `!!` でブール値にして返しているが、最初は `return 1` と `return 0` の分岐だったようだ。)

このコミットログでは、

>  - Detect and punt binary diff like GNU does;

のように書かれていて、この手法がGNU diffに由来することがわかる。

# GNU diff

GNU diffで現在の形のアルゴリズムが導入されたのは'92年に遡る。

- http://git.savannah.gnu.org/cgit/diffutils.git/commit/src/io.c?id=8f4db99c5fe1b1bc0f9cb522e10289592acec0e0

```diff
-static int
-binary_file_p (buf, size)
-     char *buf;
-     int size;
-{
-  while (--size >= 0)
-    if (!textchar[*buf++ & 0377])
-      return 1;
-  return 0;
-}
+#define binary_file_p(buf, size) (memchr (buf, '\0', size) != 0)
```

それまではprintableな文字かどうかを気にした実装だったが、急にゼロを検索する現在の形に替えている。

ちなみに、直後にGNU創始者であるリチャード・ストールマンは標準準拠でない `memchr` 実装を気にしたのか `size!=0` のチェックを追加しているが、 **このコードは結局元に戻されていて現存しない** のはちょっと面白い。

- http://git.savannah.gnu.org/cgit/diffutils.git/commit/src/io.c?id=1818943fac21d52fa810717c8f174ef137677b90

```diff
-#define binary_file_p(buf, size) (memchr (buf, '\0', size) != 0)
+#define binary_file_p(buf, size) (size != 0 && memchr (buf, '\0', size) != 0)
```

# libgit2

ちなみにlibgit2も当初は以前のGNU diffのようなprintableな文字かどうかを気にした実装になっていたが、今はGit互換のアルゴリズムを採用している。

- https://github.com/libgit2/libgit2/issues/2176
  - Libgit2 binary detection does not match core git
- https://github.com/libgit2/libgit2/pull/2319/files#diff-938eea6140bea02d453ac7deb182615aL175
  - 以前のlibgit2のバイナリファイル判定を削除し、Git互換のものに置き換えたPR
  - 従来は `git_buf_text_is_binary` で、printableかどうかの判定を行っていた

...そもそも何で最初は真面目にprintable判定をしたんだろうか。

# 妥当性

このアルゴリズムの問題は `NUL` が無いバイナリファイルを検出できない点となる。 ...そんなもん普通は無いだろうと言って良い気もする。そういうファイルを救おうとしてprintable判定を入れると、今度はUTF-8テキスト等をバイナリとして誤判別する可能性がある。

逆に、バイナリフォーマットを設計するときは意図的に `NUL` を入れるべきなのかもしれない。この目的で `NUL` を採用しているフォーマットはあんまり無い気もするが、例えば [PNGは必ずIHDRチャンクから始まるためファイルの先頭にNUL文字が常に入る](https://ja.wikipedia.org/wiki/Portable_Network_Graphics#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%83%98%E3%83%83%E3%83%80) ことになる。同様に、executableの類もファイル内部に大抵ポインタの形で適当な数値を持っていてゼロに近い値が入るだろうし、圧縮ファイルであればランダムデータになるのでそれなりの確率でゼロが来ることが期待できる。

UTF-16とかは。。まぁ使わないで。。
プログラミング学習記録41〜Bootstrap導入を諦め、CSSでレスポンシブ化を目指す〜

##今日やったこと
- RailsにBootstrap導入を試みる
- Progate Railsで作ったアプリのヘッダーをハンバーガーメニューに切り替える

今日は時間をかけた割にはあまり進みませんでした。

まず、昨日に引き続きRailsにBootstrapを導入することを試みたのですが、どうやってもCSSと競合してしまい、上手くいきませんでした。

Qiitaが検索上位に来てることが多いですが、意外と上位のページでも間違っていることがあることがわかったので、原文を読んで問題解決に取り組みました。

しかし、Google翻訳を使いながら、BootstrapのHPを見てその通りにやってみてもダメでした。

なので、ちょっと面倒くさいですがCSSでレスポンシブ化していきたいと思います。

<br>
あと、ハンバーガーメニューも意外と曲者で（というよりCSSをだいぶ忘れていて）手こずりました。

HTMLのdivがどこにかかっているかは確認してからじゃないと、二重、三重にCSSで修飾することになり、レイアウトが崩れてよくわからないことになるので、構造を確認→CSSで修飾という流れでやった方がいいですね。

<br>
いろいろ詰まることが多い1日でしたが、作ることに夢中になれて楽しい１日でもありました。

また、明日も引き続きプログラミング学習頑張りたいと思います。

おわり
プログラミングの学習をはじめました

#はじめに
はじめまして[未来電子テクノロジー](https://www.miraidenshi-tech.jp/intern-content/program/)でインターンをしている<@yuusuket57>です。
理系での大学生でありながらプログラミングから逃げてて、「そろそろ勉強しておいたほうがいいな」という軽い気持ちではじめました。
4月から新しい研究がはじまるということで、シュミレーションでプログラミングが必要となってきます。しっかり勉強して半年で使えるようになればと思っています。
##目標
目標としては、**実務レベルで使えるスキルを身に着ける**ことです。
まずはプログラムの基本であるHTML、CSSを身に着けて、最終的にはPythonを身に着けることができればと考えています。

またプログラミングは初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください！
Option<T> を serde(with="...")するイディオム

## 追記: [chrono 0.4.10](https://github.com/chronotope/chrono/blob/main/CHANGELOG.md#0410) 以降の場合

`chrono` の場合は [`chrono::serde::ts_milliseconds_option`](https://docs.rs/chrono/0.4.10/chrono/serde/ts_milliseconds_option/index.html) で [できるようになりました](https://github.com/chronotope/chrono/pull/302)

```rust 
use chrono::{Utc, DateTime};
#[derive(serde::Deserialize, serde::Serialize, Debug)]
struct A{
    #[serde(skip_serializing_if = "Option::is_none")]
    #[serde(with = "chrono::serde::ts_milliseconds_option")]
    #[serde(default)]
    pub time: Option<DateTime<Utc>>,
}
````

--------------------------



# `Option<T>` を `serde(with="...")` するイディオム

```ts
type UnixTimeMillis = number;

interface Job {
    started_at: UnixTimeMillis;
    ended_at?: UnixTimeMillis;
}
```

のような JSON を [`chrono::serde::ts_milliseconds`](https://docs.rs/chrono/0.4.6/chrono/serde/ts_milliseconds/index.html) でシリアライズ｜デシリアライズしたい。



直感的に書くと以下のようになるが、 `ended_at` の `???` の部分はどうしたらよいのか、という問題が起きる。

```rust
#[derive(Serialize, Deserialize)]
pub struct Job {
    #[serde(with = "::chrono::serde::ts_milliseconds")]
    pub started_at: DateTime<Utc>,
    #[serde(skip_serializing_if = "Option::is_none")]
    #[serde(with = "???")]
    pub ended_at: Option<DateTime<Utc>>,
}
```

現状の serde では [Option などにラップされた型を with を使ったカスタムシリアライザで扱うことができない](https://github.com/serde-rs/serde/issues/723) ためである。

そこで、 [以下のような `Helper` 構造体を介してパースしてやると良い](https://github.com/serde-rs/serde/issues/1301#issuecomment-394108486) 。

```rust
#[derive(Serialize, Deserialize)]
pub struct Job {
    #[serde(with = "::chrono::serde::ts_milliseconds")]
    pub started_at: DateTime<Utc>,
    #[serde(skip_serializing_if = "Option::is_none")]
    #[serde(with = "option_ts_milliseconds")]
    #[serde(default="default_opt_date")]
    pub ended_at: Option<DateTime<Utc>>,
}

fn default_opt_date() -> Option<DateTime<Utc>> {
    None
}

mod option_ts_milliseconds {
    use serde_derive::*;
    use chrono::{Utc, DateTime};
    use serde::ser::{Serialize, Serializer};
    use serde::de::{Deserialize, Deserializer};
    
    pub fn serialize<S>(value: &Option<DateTime<Utc>>, serializer: S) -> Result<S::Ok, S::Error>
    where
        S: Serializer,
    {
        #[derive(Serialize)]
        struct Helper<'a>(#[serde(with = "::chrono::serde::ts_milliseconds")] &'a DateTime<Utc>);
        value.as_ref().map(Helper).serialize(serializer)
    }
    pub fn deserialize<'de, D>(deserializer: D) -> Result<Option<DateTime<Utc>>, D::Error>
    where
        D: Deserializer<'de>,
    {
        #[derive(Deserialize)]
        struct Helper(#[serde(with = "::chrono::serde::ts_milliseconds")] DateTime<Utc>);
        let helper = Option::deserialize(deserializer)?;
        Ok(helper.map(|Helper(o)| o))
    }
}
```

__※ `skip_serializing_if` を使う場合は Default で None を返すようにしてやる必要がある__

## 参考
* Using de/serialize_with inside of an Option, Map, Vec - https://github.com/serde-rs/serde/issues/723
* (De)serialize remote struct with Option<T> fields - https://github.com/serde-rs/serde/issues/1301#issuecomment-394108486
EBSスナップショットからファイル復旧してみます(xfs)

## はじめに
クラスメソッドさんのブログ「[[素朴な手順]EBSスナップショットからファイル復旧してみます](https://dev.classmethod.jp/cloud/aws/recovery-files-from-ebs-snapshot/)」を参考にやってみましたが、 mount する部分がうまくいかなかったため、対応方法をメモとして残します。

## 違う点
なお私が対応したOSは `AmazonLinux2` のため、ファイルシステムは `xfs`となります。
クラスメソッドさんの記事で対応していたボリュームのファイルシステムは`ext4`だったので、そこがなにかしらの原因なのかもしれません。

## 対応方法
マウントしようとしたら以下のエラーが発生。

```console
[root@ServerName 18:03:17 ~]# mount -t xfs /dev/sdf1 /mnt
mount: /mnt: wrong fs type, bad option, bad superblock on /dev/nvme1n1p1, missing codepage or helper program, or other error.
```

ググったところ、`nfs-utils`パッケージがないんじゃないの?みたいな記事がありましたが、今回対応しているサーバーにはインストール済みでした。

次に`/var/log/messages`を調べたところ、以下のようなメッセージが出ていました。

```
Mar 28 17:56:34 ip-192-168-178-236 kernel: XFS (nvme1n1p1): Filesystem has duplicate UUID d224eff3-ac37-4a24-a33d-b499ca34c533 - can't mount
```

`UUID`が重複しているとな?
理由はよくわかっていませんが、そういうことであれば`UUIDを無視`すればよいと思い、オプションを付与して再度mountを試みました。

```console
[root@ServerName 18:03:17 ~]# mount -t xfs -o nouuid /dev/sdf1 /mnt
```

としたところ、うまくマウントすることができました！
地味に30分ぐらいハマってました…
Cognos のリストやクロス集計で文字列データを意図した場所で改行する

#文字列データを意図した場所で改行したい

リストやクロス集計のレポートを作って、列幅指定して製品ラインみたいな文字列データアイテムを置いた時に、こんな感じに中途半端な場所で改行されてしまって、どうも気になるわ～という場合の対応方法です。
![001.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/466cd812-91ec-6eb5-8cd8-2fd837a6b981.jpeg)

まあ、たいした工夫ではないのですが、こんな感じにcase文書いて、「アウトドア用保護用品」の場合、CR(CHR(13))とLF(CHR(10))の改行コード入れた文字列に書き換えてしまうだけです。

![003.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/a0c5ae50-9713-4c40-1313-af6fe8f7a026.jpeg)

はい、指定した場所で改行しました。
![002.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/4f4d232d-9514-bff5-94be-482abf8ca28d.jpeg)

case文の条件はコード番号の方がスマートですかね。
![004.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/a32c4f06-99b6-46ee-d77f-4224aed5afc2.jpeg)

ご活用下さい！
セキュリティ機構 SSP について（自分用メモ）

# はじめに
とある[CTF](https://ja.wikipedia.org/wiki/%E3%82%AD%E3%83%A3%E3%83%97%E3%83%81%E3%83%A3%E3%83%BC%E3%83%BB%E3%82%B6%E3%83%BB%E3%83%95%E3%83%A9%E3%83%83%E3%82%B0)(Capture The Flag)の問題を解いている際に`SSP`に振り回されたため，次回以降の自分用メモぐらいのノリぐらいで書いて行こうと思います．間違い等ありましたら，ご指摘いただけると幸いです．

一応，出てくる話はLinuxでx86アーキテクチャを想定しています．

# SSPとは？
[IPAが発行した資料](https://www.ipa.go.jp/files/000013695.pdf)によると，`SSP`(Stack Smashing Protector)はバッファオーバーフロー攻撃を検出するためのセキュリティ機構だそうです．

`SSP`は`gcc`ではデフォルトで有効であり，コンパイルの際に次のようにオプションをつけることで無効化することができます．

```sh
$ gcc -fno-stack-protector test.c
```

# 仕組み
`SSP`が有効な実行ファイルでは，関数呼び出し時に`カナリア(以下「canary」)`と呼ばれる値がローカル変数とリターンアドレスの間に挿入され，関数終了時に`canary`が変更されていないかチェックする機能が追加されます．そうすることで，ローカル変数が予め用意されたバッファの大きさを溢れても，`canary`が上書きされるため関数の処理前後で`canary`の値を比較することでバッファオーバーフローを検知することができます．
SSPありとなしのスタックの状態を示します(退避されたebpの値などは省略しています)．

* SSPなし

|スタック
|---
|・・・
|ローカル変数
|リターンアドレス
|・・・

* SSPあり

|スタック
|---
|・・・
|ローカル変数
|canary
|リターンアドレス
|・・・

<br>
## canaryの特徴
1. `canary`の最初の1バイトは必ずNULL文字(0x00)となる．<br>これは，NULL文字終端しない文字列操作などでcanaryの値が漏れることを防いでいます．
2. 実行ファイルが再起動するたびcanaryの値は変化する．<br>逆の言い方をすると再起動するまでは変化しないとも言えます．この特徴が弱さにつながることもあります．

# 手元で確認してみる
次のサンプルコードを`-fno-stack-protector`オプションありとなしでコンパイルし，実行ファイルにどのような違いが出るのか調べてみます．

```c
#include <stdio.h>

void func(void) {
    char buf[16];
    fgets(buf, 16, stdin);
    puts(buf);
}

int main(void) {
    func();
    return 0;
}
```
ディスアセンブル結果は次のようになりました．

## SSP有効時のfunc()

![SSP有効](https://qiita-image-store.s3.amazonaws.com/0/247877/795e2313-493a-105d-85c4-e312b9c74477.png)

## SSP無効時のfunc()
![SSP無効](https://qiita-image-store.s3.amazonaws.com/0/247877/d43c5750-df4b-863c-86a8-ec47c31d4c35.png)

SSP有効時と無効時の画像を比較すると，有効時には`___stack_chk_fail`の処理が存在することに気が付きます．これは，`canary`の値が変化していた場合に呼び出されます．まず，`0x080484C1~0x080484C7`の部分でスタックに`canary`がセットされます．今回は`large gs:14h`から`ebp+var_C`にセットされます．そして，関数終了時の`0x080484F3~0x080484F6`の部分で`canary`の値が変化していないかチェックします．`ebp+var_C`からレジスタeaxに値を取り出しeaxと`large gs:14h`とxorをとります．xor(排他的論理和)は同じ値でをとると0となるという特徴があります．同じ値，つまり変化しなかった場合は処理が`0x08048504`にジャンプするという流れになっています．


# SSPの弱点
`SSP`はバッファオーバーフローを利用した攻撃を防ぐことができます．しかし，万が一`canary`の値がわかるとSSPを回避される可能性もあるそうです．

* `canary`をリークさせる方法
[Improper Null Terminationを利用したSSP回避](http://inaz2.hatenablog.com/entry/2014/06/16/001809)

* ブルートフォースで`canary`を特定する方法
[byte-by-byte bruteforceによるSSP回避](http://inaz2.hatenablog.com/entry/2014/06/27/012435)

# まとめ
いままで，ちょこちょこ調べてたことをまとめました．<br>インターネット上にある様々な記事を参考にさせていただきました．ありがとうございます．

~~自分では`large gs:14h`の部分がわからないため，どなたか教えていただきたいです．~~

* 追記しました．

おそらく`master canary`と関係していると考えています．

## 追記
コメントでColumbineさんからセグメントによるアドレス指定について教えていただきました．ありがとうございます．

>この記事にあるようにcanaryの値を保存しているのだと思われます。(url1)
GSというのはGセグメントの事で、基底アドレス指定方式みたいにGSのアドレスに14hを足したアドレスを指しているようです。(url2)


# 参考
[オープンソース・ソフトウェアの セキュリティ確保に関する調査報告書 - IPA](https://www.ipa.go.jp/files/000013695.pdf)
[Improper Null Terminationを利用したSSP回避](http://inaz2.hatenablog.com/entry/2014/06/16/001809)
[byte-by-byte bruteforceによるSSP回避](http://inaz2.hatenablog.com/entry/2014/06/27/012435)
borg で gitbucket のデータの差分バックアップをするまでの道のり


2019/03/28 現在

## 背景

gitbucket が壊れて、復帰するのに難儀したので、差し戻しが出来る様に、
バックアップしたい。


CentOS7

tomcat/gitbucket を利用。

- borg1.1 系
- /usr/share/tomcat/.gitbucket を /root/backups に差分バックアップする。
- クローズドなので、暗号化なんかは端折る。
- ログとかも無視。

-----

# インストール

```
$ wget https://github.com/borgbackup/borg/releases/download/1.1.9/borg-linux64
$ sudo chown root:root borg-linux64
$ sudo chmod 755 borg-linux64
$ sudo mv borg-linux64 /usr/local/bin/borg
```

# 最初のバックアップ

以下、root で作業

```
# pwd
/root
# mkdir -p bakups
# borg init -e none /root/backups
# brog create /root/backups::gitbucket-2019032819 /usr/share/tomcat/.gitbucket
```

init で保存場所の宣言、create で、gitbucket-2019032819 のレポジトリを作成

# 定期実行

残すのは、直近7日、2週前までの二つ、1月前までの一つ

```
# cat /root/scripts/borg.sh
#!/bin/bash

borg_exe=/usr/local/bin/borg
date=$(date "+%Y%m%d%H" )
src=/usr/share/tomcat/.gitbucket
dest=/root/backups

$borg_exe create ${dest}::gitbucket-${date} ${src}                        > /dev/null 2>&1
$borg_exe prune --keep-within=7d --keep-weekly=2 --keep-monthly=-1 ${dest} > /dev/null 2>&1
```

実行してみて、確認する[^1]。

[^1]: もちろん、既存のbackupと被らない様に、$dateは適当に編集。

```
# bash /root/scripts/borg.sh
```

で、夜中の23時に差分バックアップするには、root の crontab に

```
0 23 * * * /bin/bash /root/scripts/borg.sh
```

と書けばいい。

# メモ

復帰させるときは、

```
// tomcat の停止
# systemctl stop  tomcat
// 壊れた gitbucket のデータを削除
# rm -rf  /usr/share/tomcat/.gitbucket
// 復帰
# borg extract /root/backups::gitbucket-YYYYMMDDhh /usr/share/tomcat/.gitbucket
// tomcat のスタート
# systemctl start  tomcat
```

あたりでいいのかな？
ChromiumでChromeの古いバージョンを取得する方法



# Chromiumとは

Chromiumは、Chromeとほぼほぼ同等なWebブラウザ（OSS）です。
ChromeとChromiumの違いについては、[マイナビニュース](https://news.mynavi.jp/article/20161205-a064/)にまとめられているので、
よければ見てみてください。
Chromeの古いバージョンは入手ができませんが、
Chromiumは古いバージョンが公開されているので、
Chromeの古いバージョンが必要な時はChromiumで該当バージョンを探すのが良いでしょう。

# Chromiumの取得方法
少しやっかいかつ日本語訳がなかったので、ここにまとめます。

今回は**バージョン62**がほしい、という前提で話を進めます。

- [chromeのリリースサイト](https://googlechromereleases.blogspot.com/search/label/Stable%20updates)にアクセスする
- バージョン62の記載を見つけ、バージョンの詳細をメモる
（今回なら、ピンク色部分の **62.0.3202.97** )
 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/88533/3bcd9fae-5c6d-a8de-15c5-c63fcc031cc8.png)


- [OmahaProxy](https://omahaproxy.appspot.com/)で、先ほどメモったバージョンを入力して、Lookupボタンを押す
 ![image.png](https://qiita-image-store.s3.amazonaws.com/0/88533/8c9d09aa-c49c-3178-e053-344cb0fd0148.png)


- オレンジ色で出てきた箇所にある「Branch Base Position」をメモる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/88533/a5d1f0df-953b-09d0-3ebb-2664cdf9ac92.png)

・・・あれ！？このスクショには、Branch Base Positionが記載されていませんね（笑）
そんな時は、[chromeのリリースサイト](https://googlechromereleases.blogspot.com/search/label/Stable%20updates)から、
バージョン55の別の詳細バージョンで試してみてください。


今度こそありました！
![image.png](https://qiita-image-store.s3.amazonaws.com/0/88533/04785975-56d8-c232-91ab-5544a34f1cfc.png)

- 「Branch Base Position」（今回なら**499098**）をメモる
- [chromium-browser-snapshots](https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html)にアクセスして、自分が使っている端末を選ぶ<br />（Macの場合はMac） 
- Filterに先ほどメモった「Branch Base Position」を記入し、Enterキーを押す
![image.png](https://qiita-image-store.s3.amazonaws.com/0/88533/39269b12-fd63-7c79-935d-f2796b443ed0.png)

- 出てきたファイルから**chrome-mac.zip**をクリックする
![image.png](https://qiita-image-store.s3.amazonaws.com/0/88533/437fce9b-949f-dcca-fdc0-9a473deafbe5.png)

- ダウンロードしたファイルを開くと、Chromiumが無事ダウンロードできました！

![image.png](https://qiita-image-store.s3.amazonaws.com/0/88533/ca6b4fee-ab5e-5d35-9632-445a7dd4770a.png)


# 参考資料

https://www.chromium.org/getting-involved/download-chromium
Unityでアバターの腕・足の動きをLookAtだけでVRIKっぽく制御する

#VRIKらしきこと

[VRIK](https://assetstore.unity.com/packages/tools/animation/final-ik-14290)は、VRHMDとコントローラからアバターの動きを良い感じに調整してくれるアセット(色々語弊がある)ですが、最近はVIVEトラッカーが潤沢に使える環境にあるので、自分でも似たようなのが作れんじゃね、と考えた

#使うのはLookAtだけ
前提はこう
1. 頭や首は簡単なHMD追従
2. そこから肩・太腿の位置は得られている

基本的なロジックはこう
1. コントローラがの位置と向きから肘or膝がある点を求める
2. その点に向かって肩or太腿のオブジェクトをLookAt
3. そして肘・膝のオブジェクトをコントローラにLookAt
4. 手のオブジェクトはコントローラの向きにセット

ということで以下がコード

```cs:IKSets.cs
using UnityEngine;

public class IKSets : MonoBehaviour
{
    public Transform FirstPoint;
    public Vector3 FirstFix = new Vector3(0,90,0);


    public Transform SecondPoint;
    public Vector3 SecondFix = new Vector3(0, 90, 0);

    public Transform EndPoint;
    public Vector3 EndFix = new Vector3(0, 90, 0);

    public Transform IkTarget;



    private float _f2sDistance;
    private float _s2eDinstance;

    void Awake()
    {
        SetDistances();
    }

    private void SetDistances()
    {
        _f2sDistance = Vector3.Distance(FirstPoint.position, SecondPoint.position);
        _s2eDinstance = Vector3.Distance(SecondPoint.position, EndPoint.position);
    }

    private void Update()
    {
        SetObjs();
    }

    private void SetObjs()
    {
        var middlePoint = GetMiddlePosition();
        FirstPoint.LookAt(middlePoint);
        FirstPoint.Rotate(FirstFix);


        SecondPoint.LookAt(IkTarget);
        SecondPoint.Rotate(SecondFix);

        EndPoint.eulerAngles = IkTarget.eulerAngles;
        EndPoint.Rotate(EndFix);
    }

    private Vector3 GetMiddlePosition()
    {
        var distance = Vector3.Distance(IkTarget.position, FirstPoint.position);
        if (distance >= _f2sDistance + _s2eDinstance)
        {
            return IkTarget.position;
        }

        return -IkTarget.forward * _s2eDinstance + IkTarget.position;
    }
}
```
単純なベクトル計算なので説明は省略。

hogeFixってついているVector3に関しては、アバターごとの座標軸の違いに対応するための値。
VRMアバターなら全部(0,90,90)にすれば大丈夫、Unityちゃんなら順に(90,90,0), (90,90,0), (0,90,0)
#動かしてみた
実際に使っている動画が次の2つ。
![ezgif-1-d744c7bf1ff1.gif](https://qiita-image-store.s3.amazonaws.com/0/254776/e4442410-d3f4-b5ce-df12-48cc6be0c5c2.gif)
![ezgif-1-78052c005f9c.gif](https://qiita-image-store.s3.amazonaws.com/0/254776/ad3e1dd9-6c24-6e85-6c46-bd4fd38aa676.gif)

何をどこにアタッチするかは上記を参照。
まあ、FirstPointに根元のオブジェクト、SecondPointに肘とか膝の中間ポイント、EndPointに手や足先みたいな端のオブジェクト、IKTargetに対応するコントローラかトラッカーを入れてあげればいい。SteamVRのコントローラは向きが変だから気を付けるように。

違和感はもちろんあるし、足に適応したらすごい変だったけど、まあ無料のVRIKと思えばクオリティ的にはこんなもんかってレベル

#「えっ？VRIKいらなくなるの！？」そんなわけではない

違和感があるとはいえVRIKに代替できそうな気がするけど、これは四肢が完全にトラッキングできている前提なので、例えばトラッカーがなくて足のトラッキングできないときとかは使えない

それに腰に関して一切考えてないので、お辞儀やや首を捻るとかができない

VRIKがすごいのは、コンポーネントとしてアタッチするだけでほぼ全部のことをやってくれること、特に多脚キャラクターの足の動きを制御してくれるのは凄い
外部ユーザーを招待する前に、先方ドメインがOffice365を使っているか調べる

組織向けのOffice365には「外部ユーザーの招待」がある。Teamsでも、Sharepointでも外部ユーザーを招待してファイルなりチャットができればいろいろ便利（組織のセキュリティポリシーが許してくれれば、だけど）。

外部ユーザーを招待するにあたり、先方がOffice365を使っているか、そうでないかによって準備や条件が変わってくる。先方がOffice365ユーザーなら、先方のアカウント管理者がアカウントを管理してくれているので退職すればアカウント削除してくれるはずだし、アクセス元制限かけているケースも多いはず。

先方が法人向けのOffice365を使っていないなら、マイクロソフトアカウントを作成してもらい、そのマイクロソフトアカウントに対して共有するしかない。マイクロソフトアカウントは個人のものなので、退職しようが何しようがとりあえずは使えちゃうし、アクセス元制限もない。

というわけで、先方ドメインが365を使っているかを(ある程度）確認してみる。


# MXレコードを確認する

MXレコード見て、<domain>.mail.protection.outlook.com.というレコードか、確認する。
<domain>のところは、ドメイン名のドットをハイフンに置き換えたものになっている。

例えばcontoso.comなら、"contoso-com.mail.protection.outlook.com."という記述だけならおおむね使ってる。

ただし、メールセキュリティサービスを入れている場合は、違う場合がある。実はさっきのcontoso.comだけど、"mail.global.frontbridge.com."となっていた。そういう場合は、TXTレコードも確認する。


# TXTレコードを確認する

TXTレコードで見る場所は2か所。SPFレコードと、TXT="MS=xxxxxx"という個所。

SPFレコードに"include:spf.protection.outlook.com"という文字列が含まれていれば、送信元にOffice365が含まれている可能性が高い。

Office365にドメイン登録する際にドメインの所有者確認でTXT="MS=xxxxxx"(xxxxxxは365管理センターで指定された数字の羅列）を使うケースが多いので、これが含まれていたらOffice365を使っている可能性が高い。

# 注：あくまで可能性でしかない

MXレコードやTXTレコードが当てはまる場合、可能性が高い。
ただし、あくまで可能性なので「昔使ってたけど今使っていない」ケースもありうる。

# 注：招待したらマイクロソフトアカウントでログインされちゃった

「招待メールのリンクをひらいたらサインアップ求められたので、サインアップしたらそれはマイクロソフトアカウントでした」とか、「わざわざ招待のURLのリンクを開いてマイクロソフトアカウントで開いたよ」ということも十分ありうる。

その場合はいろいろとめんどくさいけど、社内の365管理している人に依頼して、Azureポータルでゲストユーザーを調べてもらう。"外部のAzure Active Directry"となっていれば安心だけどそうじゃないなら要注意。
Dockerのrunコマンドはスクリプト化しておこう

最近ようやくdockerを使い始めました。
そんな超初心者がハマった点とその解決策を2点メモしておきます。

# Dockerfileのファイル名はDockerfileだよ問題
dockerイメージを作るためのDockerfileはファイル名もDockerfile（拡張子なし）でなくてはいけません。
なので、ファイル名でそのDockerfileに何が書かれているか表現することが出来ません。
これを解決する方法として、以下の手法を取ると良いみたいです。

**一つのディレクトリの中にDockerfileは一つだけしかない状況を作る**

これはDockerの公式リファレンスでも推奨されている方法です。
http://docs.docker.jp/engine/articles/dockerfile_best-practice.html#dockerignore
こうすればディレクトリ名でDockerfileの中身を表現できます。

# コンテナを立ち上げる時のコマンド引数を忘れがち問題

また、そのDockerfileで作られたイメージからコンテナを立ち上げる時に必要なコマンド引数など、つい忘れがちだと思います。
それを解決するために、そのディレクトリの中にもう一つ、``docker.sh``を作って、その中に必要な引数を書いた``docker run``コマンドを書いておきましょう。

```sh:docker.sh
# example
docker run -it --name container-name image-name /bin/bash
```

そうすると、起動したいイメージを作ったDockerfileがあるディレクトリに``cd``した後に、``bash docker.sh``とするだけで、Dockerfileを作った時に意図したオプションをちゃんと再現できます。
【Microsoft Flow】フローで日本時間の現在時刻を取得する式

#はじめに

フローで日本時間の現在時刻を取得する際の方法メモ。

#結論

UTC（世界標準時）に時差９時間を追加すればいいので、
`addHours(utcNow(), 9, 'yyyy/MM/dd HH:mm:ss')`
と式を記述すれば取得できる。

#例

編集画面
![image.png](https://qiita-image-store.s3.amazonaws.com/0/258416/e85bca89-8d4c-10ac-c8d9-ec823c40f3dd.png)

実行結果画面
![image.png](https://qiita-image-store.s3.amazonaws.com/0/258416/df34cc5a-450e-9cdb-2b8d-babb63eac14b.png)

#addHours()式とは

フロー内で表示されるaddHours()式のTIPより

>addHours(timestamp: string, hours: integer, format?: string)
必須。時刻を含む文字列。
渡された文字列のタイムスタンプに時間数を表す整数を加算します

以上
Cognos リストでグループ化されたアイテムでの行番号を表示する

#グループ化された列の行番号を表示する
この様な行番号を表示したい要件への対応です。
最少粒度は「年」単位の数量なので、普通に![image.png](https://qiita-image-store.s3.amazonaws.com/0/147246/5206122e-d9ed-0506-d278-4c85fbdd9bdb.png)のアイテムを置いてみると、最少粒度に合わせた行番号表示になってしまいます。
今回の場合、最少粒度ではなく、1段階グループ化された「製品タイプ」のレベルでの行番号を振っています。

![001.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/14e8d37c-6b4f-5800-b665-1f5f85751a8e.jpeg)

#実装方法
リストで使用するクエリーのデータアイテムは以下です。
「行番号」もデータアイテムとして作成していて、以下のように設定します。
**running-count(distinct [製品タイプ])**
※distinctが無くても同じ行番号表示になりますが、超遅いのでdistinctは入れて下さい。
![003.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/b5cddd8e-7ef6-d75e-c55c-234a51b39f5e.jpeg)

リストの「行番号」のリスト列の本体のプロパティで、「グループの幅」で「製品タイプ」を選択します。
![002.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/730ef537-3785-c257-ce58-7d24e8f8c1bd.jpeg)

以上でレポートを実行すると、先の行番号表示になります。
ご活用下さい！
Google Tag Managerの運用について

# GTMの運用について
## 経緯
- BさんのWebサイトのイベント計測をAさんのGoogleAnalyticsアカウントで行いたい。
- BさんはWebサイトの情報を好き放題トラッキングされたくない。
- GoogleTagManager360は使用しない。
    - 承認ワークフロー機能は使えないものとする。

## 必要なもの
- AさんのGoogleAnalyticsアカウント（GAアカウント）
- BさんのGoogleTagManagerアカウント（GTMアカウント）

## 解決策
BさんのGTMアカウントにAさんのユーザの権限を`承認`に設定し、追加する。

承認：　バージョンとワークスペースを作成したり編集したりできるが、公開することはできない。

タグマネージャヘルプ - ユーザと権限
https://support.google.com/tagmanager/answer/6107011?hl=ja

## 運用
1. Aさんがトラッキングしたい内容をBさんのGTMコンテナを利用して作成する。
2. AさんはGTMのプレビュー機能を利用し、トラッキングを確認する。
3. 問題なければバージョンを作成し、Bさんに連絡する。
4. Bさんは作成されたバージョンをプレビュー機能で確認する。
5. Bさんは実際に作成されたタグ、トリガー、変数などを確認する。
6. 問題なければAさんが作成したバージョンを公開する。
std::stackの内部構造に何を指定するか

# 要約

`std::stack`を使うときは内部データ構造に`std::vector`を指定した方が良いことが多いので、必ず一考すること。

# 本文

STLに入っている`std::stack`では内部で用いるデータ構造を指定することができる。何も指定しなければ`std::deque`になるが、パフォーマンスを気にする場合は注意しなければならない。

`std::deque`のパフォーマンス特性は次のページが詳しい。

[C++ benchmark – std::vector VS std::list VS std::deque](https://baptiste-wicht.com/posts/2012/12/cpp-benchmark-vector-list-deque.html)
[そろそろstd::dequeについて語ろうか](https://kikairoya.hatenablog.com/entry/20100718/1279465696)

`std::deque`の実装は処理系定義だが、[unrolled linked list](https://ja.wikipedia.org/wiki/Unrolled_linked_list)のような実装がなされていると考えればよい。そのため、`std::vector`と`std::list`の中間くらいの性能をしている。`std::vector`の弱点であるランダムな位置への挿入・削除は`std::deque`ではある程度緩和される。しかし、`std::stack`の内部実装として用いる場合は末尾への挿入・削除しか行われないため、この利点は生かされない。

`std::stack`に`std::vector`を用いたときにパフォーマンス上の問題が生じるとすれば主に以下の２つが原因である。

+ `push`により要素数がかなり大きくなる
+ 要素のムーブ（あるいはコピー）のコストが高い

これらの点を勘案してプロファイリングをしながら`std::stack`に使うデータ構造を決めていけばよい。上で挙げたベンチマークでは要素サイズが4KiBのときでも`std::vector`と`std::deque`の末尾挿入がトントンであるから、ほとんどの場合は`std::vector`が良い選択になると思われる。

# 参考

- [C++ benchmark – std::vector VS std::list VS std::deque](https://baptiste-wicht.com/posts/2012/12/cpp-benchmark-vector-list-deque.html)
- [そろそろstd::dequeについて語ろうか](https://kikairoya.hatenablog.com/entry/20100718/1279465696)
- [Unrolled linked list - Wikipedia](https://ja.wikipedia.org/wiki/Unrolled_linked_list)
- [std::stack - cpprefjp](https://cpprefjp.github.io/reference/stack/stack.html)
- [std::deque - cpprefjp](https://cpprefjp.github.io/reference/deque/deque.html)
かっこよくコンソールに出力したい

プログラミングをしていて、今変数に何が入っているのか知りたいというときがあります。そんなときさくっとコンソールに出力して確認したりすると思います。

例えば、こんな感じ。

```
Str name = "デーモン小暮"
int age = 100053

print(　name + "さんの年齢は" + age + "歳です" )
```

なんかこう……文字列を強引にひっつけている感じがして読みにくくてダサいですね。いろいろな言語で変数展開をするフォーマットやら書き方が用意されているのですが、いつもどう書くんだっけ？　とか思いつつ、調べるのがめんどくさくて、結局 + で連結……みたいなことを繰り返してきました。

そこで、今回は各言語における変数展開とかformat系メソッドの書き方を調べてみました。さくっとコンソールに出力したいというのが目的ですので、型はとりあえずString型にキャスト、変換でいいということにします。

Java

```Java
String name = "デーモン小暮";
int age = 100053;
System.out.println(String.format("%sさんの年齢は%s歳です。", name, age));
// または（最後に改行して）
System.out.printf("%sさんの年齢は%s歳です。%n", name, age);
```
thx: @saka1029さん

C#

```C#
string name = "デーモン小暮";
int age = 100053;
Console.WriteLine($"{name}さんの年齢は{age}歳です。");
```

Python

```Python
name = 'デーモン小暮'
age = 100053
print('{}さんの年齢は{}歳です。'.format(name,age))
# または
print('%sさんの年齢は%s歳です' % (name,age))
# または
print(f'{name}さんの年齢は{age}歳です。')
```
thx: @QUANONさん


Ruby

```Ruby
name = "デーモン小暮"
age = 100053
puts "#{name}さんの年齢は#{age}歳です。"
# または
puts "%sさんの年齢は%s歳です。" % [name, age]
```

thx: @scivolaさん

JavaScript

```javascript
var _name = "デーモン小暮";
var age = 1000053;

console.log(`${_name}さんの年齢は${age}歳です。`);
// または
console.log("%sさんの年齢は%s歳です。", _name, age)
```
thx: @hogefugaさん

PHP

```php
$name = "デーモン小暮";
$age = 1000053;

echo "{$name}さんの年齢は{$age}歳です。"
```

Rust

```rust
let name = "デーモン小暮";
let age = 100053;
println!("{}さんの年齢は{}歳です。", name, age);
```
thx: @scivolaさん

Kotlin

```kotlin
val name = "デーモン小暮"
val age = 100053
println("${name}さんの年齢は${age}歳です。")
```

thx: @sdkeiさん

これであなたもかっこよくコンソールに出力できますね。
kill -QUIT `cat tmp/pids/unicorn.pidでUnicornを停止できない~~

###unicornのプロセスに問題があるから、停止させたい！

でもkill -QUITcat tmp/pids/unicorn.pidでできない場合

できない理由は、capistarnoを導入したり、その他ディレクトリ・プロセスを管理するためのパッケージを導入すると、

unicorn.pidの所属するディレクトリが別の場所に移ってしまうため、 できない

なのでまずは

```ターミナル:terminal
$ ps aux | grep unicorn
//プロセス番号を調べる
```
　　　　　　　　　　　　　　　　



```ターミナル:terminal
//実行結果
[ex2-usr@ip-***-**-**-*** ~]$ps aux | grep unicorn
ec2-user 5077 18.3 11.1 409700 113312 ?       s1  07:09 0:02 unicorn master -c ~~~~
ec2-user 5135 0.0  9.8  409700 100572 ?       s1  07:09 0:00 unicorn worker[0] -c ~~~~
ec2-user 5135 0.0  0.1  110484 2024 pts/0     s+  07:09 0:00 grep --color=auto unicorn
```

ps aux | grep unicornコマンドの実行結果のうち、unicorn masterと表示されているプロセスが対象のプロセスなのです。

```ターミナル:terminal
$ kill -9 5077(<=今回の場合は5077)
```


で調べたプロセス番号を使って、Unicornを停止。

これできっとうまくいくと思われます
Laravel $model->relation() と $model->relation　の違い

```php

$model->relation() //returns the relationship object

$model->relation //returns the result of the relationship
```

下記のリレーションある場合は

```php
class Store{

    public function distributors(){
        return $this->hasMany('Distributor');
    }
}
```

下記２つの書き方は同じもの

```php

$store->distributors()->get()

$store->distributors  //dynamic relationship property

```
AWS CodeDeployでいつまでも「AllowTraffic」が終わらなかった原因

株式会社[NoSchool](https://corp.noschool.asia)でCTOをしている@mejilebenです。
今日はCodeDeployでハマったところとして、「AllowTraffic」が終わらなかったときの原因を残しておきます。

# 起こったこと
CodeDeployでデプロイしているとき、下記のようにデプロイの段階ごとにイベントが発生していて、その進捗をコンソールから見ることができます。
<img width="565" alt="スクリーンショット 2019-03-29 18.39.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/156567/a6269a06-0587-fdd8-2e2b-4fe17bfb6f4e.png">

下から2番めに「AllowTraffic」というのがありますが、ここのイベントで急に動作が止まり、それまでのイベントで合計しても10分程度で進んできたのに、1時間弱待っても進まないということが起きました。

# 原因を見つけたやり方
CodeDeployのデプロイ先がELBだったので、ロードバランサのターゲットグループを見に行きました。

<img width="485" alt="スクリーンショット 2019-03-29 18.43.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/156567/81110a11-cc12-2082-78aa-6bc42eed42a8.png">

この画像ではステータスが「healthy」になってますが、このときは両方共「unhealthy」となっており、（i)をマウスでホバーするとステータスが「401」であることが読み取れました。

# ELBのバックエンドのEC2が401になっている原因
今回はEC2にNginxを利用してBasic認証を掛けていたのが原因でした。

Basic認証を掛けていたのでヘルスチェックが通らなくて、結果的にデプロイ後のトラフィックを通すところで詰んでいたというわけです。

開発中だったので、すっかりヘルスチェックの遷移を見ていませんでした。

応急処置としてBasic認証を外すことで事なきを得ました（今はとりあえず2台構成で組んでいます）。

ターゲットグループのヘルスチェックはその後見事に改善しました。
<img width="884" alt="スクリーンショット 2019-03-29 18.47.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/156567/0f291327-f632-d69d-90e8-6b606f6d5ef2.png">

同時に、デプロイもさくっと終わりました。
<img width="1046" alt="スクリーンショット 2019-03-29 17.27.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/156567/e4a5f1a1-6444-41da-24e3-7972a2023cf2.png">


# 検討課題
Nginxを利用しているので、特定のパスに対してBasic認証外に逃がしてあげて、ヘルスチェックの設定でそのパスを向くようにすると良いと思います。

で、それ以外のパスに対してはBasic認証をかければヘルスチェックを回避しつつアプリケーションにはBasic認証をかけることができます。

CodeDeployには他にも散々苦しめられたので、小出しで記事書いていきたいなと思っています。

# 最後に
僕が働いている[NoSchool](https://portal.noschool.asia/)では仲間を募集中です！
創業期真っ只中、社員は僕と社長の2人きり（+副業メンバー3人）でEdTechを変えに行ってます！

興味あればお茶でもしましょう。Twitterからの連絡でも大歓迎です！
https://www.wantedly.com/companies/noschool
Confluenceの表作成で「何件表示」をやってみる

#Confluenceの表作成で「何件表示」をやる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/257191/fc0b7b02-4fe1-b78c-46fe-57eb62aedcd4.png)
こんなやつです。

　仕事でConfluence（以下コンフル）をよく使います。チケット管理をしたりページを作成してチーム内で情報共有したりするアレです。
コンフルページの中にHTMLのコードを記述することができるので、息抜きで遊んだりしています。今回はその中の一つを紹介します。

##表の表示件数を制御したい。
　よくコンフルでは表の作成はパワポ並み簡単にできますが、ページのレイアウト上から10件だけ表示とかできたら便利だなーと思い調べてみると、コンフルのマクロ機能にはあるのですがどうやら有料だそうで...便利な機能はお金がかかるんですね。
そこでJavaScriptを用いて実装してみました！
ただ、結構DOM操作が複雑でして苦労したのでかなり汚い実装の仕方になっています。この記事を見て試してみる人がいれば幸いですが、こうしたほうがもっとよい！というご意見あればご教示いただきたいです。

##早速やりましょう。

####１．表を作成する。

####２．作成した表のheader部分（グレーの部分を消す）
　→　**これ重要です。**

####３．headerがほしい場合はお手数おかけしますが、表の一番上をグレーにするなどしてheaderぽくする。

####４．３の対応をした表の中に
```html

<input type="hidden" id="targetTable" value="これは消さないで。">
<!--これは消さないでは、ページの編集する人が間違って消さないようにするためです笑 -->
```
というHTMLを入れる。
こんな感じに入れます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/257191/a98004ce-4c8e-3b92-383f-a4616ee63dcb.png)


####５．セレクトボックスを作成する

```html

<p>
 <select id="list-num" onChange="change_table();">
    <option value="3" >3件</option>
    <option value="5" selected>5件</option>
    <option value="10">10件</option>
 </select>
</p>
```

####６．表の下に以下の関数を置く

表の下にこれを置きます。
`表の下`というのがみそでDOM操作にもかかわるので必ず「表の下」においてください。

```js

<script>
  function change_table(){
    // 要素抜き出し
    var o_list_num_elm = document.getElementById("list-num");
    var o_list_table_elm = document.getElementById("targetTable").parentNode.parentNode.parentNode.parentNode;
    // 表示数取得
    var i_list_num = parseInt(o_list_num_elm.value);
    // tableのtr要素を抜き出し
    var a_tr_items = o_list_table_elm.children;

    // 全てのtr要素に対して処理(※見出しの1行分に注意)
    for(i=0; i<a_tr_items.length; i++){
      if(i<(i_list_num + 1)){
        a_tr_items[i].style.display = 'table-row';
      } else {
        a_tr_items[i].style.display = 'none';
      }
    }
    return true;
  }
  // 読み込み時にも発火
  change_table();
//
</script>

```

このやたらと親要素をたどっているのが今回のポイントです。
表に埋め込んだidタグからtableのtbodyを取得するためにいったん、要素をさかのぼって
そこから子要素を取得しています。

```js

var o_list_table_elm = document.getElementById("targetTable").parentNode.parentNode.parentNode.parentNode;
```
これで表示件数を昇順で（表の上から何件表示）ができます！！

`今回ハマったことがあるのでメモ`
※getElementByIdでは要素自体を取得できるが、classではオブジェクトが返ってくるので
子要素の数を配列に入れて対応。。。

もともとのheaderから親要要素へとさかのぼるとセレクトした時に発火具合がおかしくなってしまったので、
一旦headerを消して、手作業でグレーにするというかっこ悪い方法。

最終的にはこんな感じになればOKです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/257191/d7b48933-a069-e51a-4d32-12efab52a01d.png)


結構使える場面があるかと思いますので
ぜひ使ってみてください！！
TortoiseSVNでリモートに新規ブランチを作成し、ローカルにチェックアウトする方法

TortoiseSVNでリモートに新規ブランチを作成＆ローカルにチェックアウトする方法の覚書きです。

##対象ツール
TortoiseSVN

##リモートに新規ブランチを作成する
1. ローカルの任意のディレクトリで右クリック > TortoiseSVN > Repo-browser
2. 小ウィンドウが起動するので、URL欄にtrunkのURLを入力する
3. trunkフォルダの上で→右クリック > Copy to 
4. コピー先（のURL）を作成するCopy to小ウィンドウが立ち上がるので、<br>
「trunk」を「branches/○○/」（○○は任意のブランチ名））に変更し、「OK」を押下
5. Enter Log Message小ウィンドウが起動したら、Messageを入力し、「OK」を押下
6. リモートに4で指定したURLにブランチが作成される（表示されない場合は一度Repository Browserを閉じて再度開く）

##ローカルにチェックアウトする
1．ローカルの任意のディレクトリで、右クリック > 「SVN Checkout」
2. Checkout小ウィンドウが起動したら、「URL of Repository」にリモートに作成したブランチのURLを入力し、「OK」を押下(必要に応じて、他の項目も編集）
3. 別ウィンドウが起動し、チェックアウトが始まる
4. ステータスが「Completed」となれば完了

##ポイント
1. リモートに新規ブランチを作成する際、Copy to の後に、URLの「trunk」を<br>
  「branches/○○/」に書き換えること
2. ローカルにチェックアウトする際は一部のディレクトリのみチェックアウトも可能<br>
→全体のボリュームが大きく、チェックアウトに時間がかかる or <br>
 ローカルにおくと大量のストレージを使う場合などに有効<br>
→チェックアウトしたいディレクトリをローカルに作成し、チェックアウトすること<br>
→→そうでないと、ディレクトリ配下のみがチェックアウトされてしまう