OmniAICreator/Qiita-1.07M huggingface dataset:
ショートカットを活用しよう - 16 - Alt + (テンキー側の数値入力)

# <kbd><kbd>Alt</kbd> + <kbd>(テンキー側の数値入力)</kbd></kbd>の効果
入力した数値の文字コードを入力します。

ショートカットとはちょっと違うかもしれませんが例えば、<kbd>Alt</kbd>を押しながらテンキー側の数値を続いて入力し、最後に<kbd>Alt</kbd>を離すと、それまでに入力した数値を文字コードとして入力が行われます。

例えば、<kbd><kbd>Alt</kbd> + <kbd>6</kbd>, <kbd>5</kbd></kbd>と入力すれば、"A"が入力されます。

普段使う機会はあまりないかと思いますが、制御コードを入力したい場合や、入力しづらい特殊文字などを入力する場合に役立つかもしれません。

例えば、英語キーボード(101キーボード)でバックスラッシュの打ち方がわからなかった場合、<kbd><kbd>Alt</kbd> + <kbd>9</kbd>, <kbd>2</kbd></kbd>とするなどです。

なお、入力を受け付ける環境によっては、制御コードは入力されなかったり、逆にUTF-8での文字コードも入力できたりなどします。

例えば、Wordの場合、1文字選択状態にして<kbd><kbd>Alt</kbd> + <kbd>X</kbd></kbd>を押すとUTF-8の文字コードが表示されます。逆に、UTF-8の文字コードの数値を選択して<kbd><kbd>Alt</kbd> + <kbd>X</kbd></kbd>を押すと対応する文字に変換されます。
試しに、"あ"と入力して文字コードを確認すると"3042"が表示されます。
16進数なので、10進数だと 12354 ですから、<kbd><kbd>Alt</kbd> + <kbd>1</kbd>, <kbd>2</kbd>, <kbd>3</kbd>, <kbd>5</kbd>, <kbd>4</kbd></kbd>と入力すれば、Wordには"あ"が入力されます。
なお、16進数から10進数の確認などは次のような方法があります。（[電卓で16進数 と 10進数などの変換をさらっと確認する - Qiita](http://qiita.com/rrryutaro/items/dedfe095732b07b7e473)）


特定の文字の入力に困った場合、文字コードを調べて入力するなどでご利用ください。


以上

|前回|方針|次回|
|:--|:--:|--:|
|[(Excel)<kbd><kbd>Ctrl</kbd> + <kbd>(矢印キー, Home, End, PageUp, PageDown)</kbd></kbd>](http://qiita.com/rrryutaro/items/c3abbc5cab26cfbc6743)|[記事の方針](http://qiita.com/rrryutaro/items/74d60a6e31ff149c5710)|[(Excel)<kbd><kbd>Ctrl</kbd> + <kbd>1</kbd></kbd>](http://qiita.com/rrryutaro/items/00e3e52af52b394f1bb4)|
GitBucket でもファイルツリーで見たい

ギットバケッター(GitBucketを使っている人)の皆さん、いかがお過ごしでしょうか。
我々が日々、ギットハーバー(GitHubを使っている人)やギットラバー(GitLabを使っている人)をうらやましがる理由といえば、[Octotree](https://github.com/buunguyen/octotree)ですよね。
人のソースとか眺めるときにとても便利なので、知らなかった方はこれを機にチェックしてみてください。

さて、これはぜひともGitBucketにも欲しい、ということでクローンしたWEBブラウザアドオンを作ろうかと思ったのですが、我らがGitBucketにはアドオン機構が備わっています。
せっかくなので、こちらを利用してリポジトリをツリーで見られるアドオンを作成しました。

## できたもの
![screenshot.png](https://qiita-image-store.s3.amazonaws.com/0/111100/4171c24d-8de5-7266-ba76-c84468bdd56a.png)

https://github.com/tomoki1207/gitbucket-explorer-plugin

## 所感
Octotreeと比べてしまうと色々と粗が見えてくると思います。

- hover したときに色が変わらない
- 表示中のファイルの色が変わらない
- ロード中が分かりづらい
- アニメーションがない
- etc...

まぁその辺りは、PR出していただくとかIssue上げていただくとか、あとはPRなんか出してもらえるととても助かります。

それにしても、見た目統一のために今のGitBucket決め打ちでCSSを書いているんですが、AdminLTEから別のCSSフレームワークに替わったり、[この辺](https://github.com/gitbucket/gitbucket/issues/1279)が対応されたらどうするつもりなんでしょうね(他人事)。

## さいごに
今回も結局、書いたのはほとんどJavaScriptになりました。

## 参考
[GitBucketプラグインを作ってみよう](http://takezoe.hatenablog.com/entry/2016/08/06/202109)
[gitbucket community plugins
](https://gitbucket-plugins.github.io/)
多次元連想配列に対してキーを基準にunsetする関数が欲しい

あるいは多次元連想配列に対してキーを基準に対象配列の構造を維持したまま共通項の末端キーを削除したdiffを取る関数。

絶対どこかにあるだろうけど言語化の不自由と情報の海に埋もれてうまく検索できないシリーズ

# <i class="fa fa-code"></i> コード

```php

<?php

$haystack = [
    'A' => [
        'い' => 'i',
        'ろ' => 'ro',
        'は' => 'ha',
    ],
    'B' => [
        'one'   => '1',
        'two'   => '2',
        'three' => '3',
    ],
    'C' => [
        'い'   => 'a',
        'two' => 'b',
        'う'   => 'c',
        'A'   => ['...'], // もっと深くても良い
    ],
];

$needles = [
    'A' => [
        'い' => '',
        'は' => [],
    ],
    'B' => [
        'two' => null,
    ],
    'C' => false,
];

$unset = function ($needles, &$haystack) use (&$unset) {
    foreach ($needles as $key => $value) {
        // $needlesは完璧に$haystackの構造を把握しているものとしてみる
        if (!isset($haystack[$key])) {
            // TODO 例外がいいのか、どの例外がいいのか
            throw new OutOFBoundsException('Undefined index:' . $key . "\n" . 'haystack:' . print_r($haystack, true));
        }
        // 空配列にも対応しようとすると、ただのemptyでいい気がするけど、意図を、ね。trueとかも穴になるし。
        if (!is_array($value) || empty($value)) {
            unset($haystack[$key]);
            continue;
        }

        if (is_array($value)) {
            $unset($value, $haystack[$key]);
            continue;
        }
        throw new LogicException('value => ' . $value . "\n" . 'key => ' . $key);
    }
};

$unset($needles, $haystack);

print_r($haystack);

```

```:出力

Array
(
    [A] => Array
        (
            [ろ] => ro
        )

    [B] => Array
        (
            [one] => 1
            [three] => 3
        )

)


```


# <i class="fa fa-cubes"></i> 要件

* 多次元連想配列(以降haystack)の任意の階層にある任意のキーを任意個削除(`unset`)したい。
* 削除対象を指定する方法は、階層とキーが必要なので、`array`以外の値を考慮しない同構造の連想配列で指定することとする。(以降needles)
  * つまり、needlesの値が配列ならその配列を再帰調査、配列以外ならキーをまるごと`unset`。
* needlesは、haystackの構造を完全に把握しているとしてみる。
  * needlesには、 haystackに無いキーが現れてはならない。
  * 非配列のvalueを比較考慮しないのはneedlesを楽に書きたかったから。
* 非破壊が望ましいが、強くこだわらない。(できなかった…)
* haystackにスキーマ、構造、ルールは存在しない。(2次元目は一律hogeとhugaと～みたいな決まりは無い)
* haystackの値は同配列内でかぶる可能性があるし、任意の型である。(`array_flip`の排斥)

これらを上手くキーワード化できないので検索が厳しい。

# <i class="fa fa-cube"></i> 考えたこと

`foreach`とかで考えると潜るごとにキーを覚えていかないといけないから2次元ぐらいならともかくn次元はしんどそう

添字配列は値の振り直しとか考えちゃうからひとまず連想配列でいいや

needlesは値が配列じゃなかったら([キー => 使わないダミー値]とせずとも)値をキーとして`unset`ってすれば記述量が減りそうだけど、haystackと配列の見た目がミラーっぽくなくなる？

ある配列の中身が全部`unset`されて空配列になった場合はその配列も消すべき？でもhaystackを把握している前提なら全部消さずに上位のキーだけ指定すればいいし…

PHPのneedleとhaystackの並び順がばらばらな所、好きじゃないよ

`array_diff_key`単体では無理そうだけど`unset`でなく`array_diff_key`で新しい結果配列作ったりとかは出来そうなんだけど、
結果配列連れ回す引数増えそうとかで、
ってコード書いた後に見てみたらユーザーノートにいろいろあるし、`array_diff_assoc`ってのもあるらしい。書かれたコードにお目当てのものがあるかもしれないが、コードを一瞥して仕様を理解する能力はない。いくつか試して似ているがちょっと違うものだったので、一旦全部は調査せずに捨て置く。コメント頼み。

例外の使い分けは相変わらずむつかしい。
テキストファイルの行と列を入れ替え（シフトあり）

横長、かつ、行数は少ないテキストを縦長に変更したい。
それだけなら transpose などの Linux コマンドもあるようですし、スプレッドシート（LibreOffice Calc, MicroSoft Excelなど）を使える状況ならまさにその機能があります。

行列入替えに加えて、情報の位置がずれていてシフトする必要があったのと、Linux ターミナルで手軽に処理したかったのもあり、簡単な Perl スクリプトを書きました。
例えば、入力として下記のファイルが与えられとします。

```
A  B  C  D  E  F
-1 -2 0  1  2  3  4  5
1  2  3  4  5
0  1  2  3  4  5
```

これを行列を入れ替えつつ、２行めは冒頭の２つを削除して、３行目は冒頭に空白を挿入すると下記の出力を得ます。

```
	A	0		0
	B	1	1	1
	C	2	2	2
	D	3	3	3
	E	4	4	4
	F	5	5	5
```

この変換を下記の Perl スクリプトで行いました。

```transport_shift.pl
#!/usr/bin/perl

# Input Offset
@IOFS = (0, 2, -1);

# Output Offset (0 or more)
$OOFS = 0;

$i0 = 0;
$len1 = 0;
while(<>){
   @L = split(/\s+/, $_);
   $i1 = $IOFS[$i0] * -1;
   for($j1 = 0; $j1 < $i1; $j1++){ $LL->[$i0][$j1] = "" }
   foreach $l (@L) {
      if($i1 >= 0){ $LL->[$i0][$i1] = $l }
      $i1++;
   }
   if($len1 < $i1){ $len1 = $i1 }
   $i0++;
}
$len0 = $i0;

for($i1=$OOFS; $i1<$len1; $i1++){
   for($i0=0; $i0<$len0; $i0++){
      print "\t$LL->[$i0][$i1]";
   }
   print "\n";
}
```

4行目の `@IOFS` は入力テキストの各行について、いくつめのカラムから情報を有効にするかを指定します。
`@IOFS = (0, 2, -1);` の各値については以下のとおりです。
０はデフォルトで、入力をそのまま受け入れます。
2が指定されているのは、入力の下記の行で冒頭の「-1 -2 」の２つを無視することを指定しています。
>  ~~-1 -2~~ 0  1  2  3  4  5

-1 の指定は、入力行の先頭に空白を追加して、１つずらすことを意味しています。


7行目の `$OOFS` は出力の表示を途中から始めたい場合に 0 より大きい値を指定します。
例えば、`$OOFS = 1;`とすれば、出力の１行目が無視されて以下の出力になります。

```
	B	1	1	1
	C	2	2	2
	D	3	3	3
	E	4	4	4
	F	5	5	5
```

このスクリプトを本格的にコマンドにするなら、下記のようなブラッシュアップが必要かと思います。
　　o `@IOFS`、`$OOFS` を引数で与えられるようにする
　　o ヘルプを表示する
　　o "use strict" して、変数に local() を指定する


しかし、以下の理由でこのようなコードで完了としました。
　　o ワンライナーで頑張るのを断念したのでスクリプトにしたのが経緯
　　o その場の必要に応じて機能を追加することも想定

実際に自分がこれを作るに至った状況では、こちらに掲載したコードをベースに、出力データのあるカラムの値が指定値を超えたら警告を出すようにしたものを使っています。
javascriptで認証してTwitterAPIを利用する(署名作成編)

#javascriptでOauth認証してTwitterAPIを利用する。(署名作成編)

ハッカソンでtwitter apiを利用する機会があったのでまとめてみした。

##OAuth
OAuthとは権限認証を行うための規約のようなもの。
詳しくは
https://ja.wikipedia.org/wiki/OAuth

##署名の作成
署名とはurlとパラメーターを暗号化したものです。
送られてきた署名をapi側で照合することによって第三者による不正なリクエストを防いでいます。

手順としては

1. キーを作成
2. データの作成
3. キーとデータを署名に変更

という順序で実装していきます。

### 1 キーの作成。

キーは単純にaccess_token_secretとconsumer_secretをurlエンコードして"&"で結合したものです。

```signature.js
const access_token_secret = ""; //まだないので空でOK
const consumer_secret = "your_consumer_secret";
const signature_key = encodeURIComponent(consumer_secret) + "&" + encodeURIComponent(access_token_secret);
```

### 2 データの作成

apiに送るデータを作成していきます。
各種URLエンコードしたメソッド、パラメータ、リクエストURLを"&"で繋げたものを作成します。

```signature.js
const access_token_secret = ""; //まだないので空でOK
const consumer_secret = "your_consumer_secret";
const signature_key = encodeURIComponent(consumer_secret) + "&" + encodeURIComponent(access_token_secret);
//ここまでがキーの作成

const request_method = "GET";
const request_url = "https://api.twitter.com/oauth/request_token"
const params = {
 "name": "sample",
 "text": "sample",
}

const params_to_query = (params) => {
  return Object.keys(params).sort().map(key => {
          return encodeURIComponent(key) + "=" + encodeURIComponent(params[key]);
        }).join(",");
}
const signature_data = encodeURIComponent(request_method + "&" + encodeURIComponent(request_url) + "&" + params_to_query;

```

### 署名に変換

まずHMAC-SHA1方式のハッシュ値に変換し、
そのハッシュ値をbase64エンコードして署名の完成です。
crypto-jsを使って変換していきます。

```signature.js
import HmacSHA1 from 'crypto-js/hmac-sha1';
import Base64 from 'crypto-js/enc-base64';

const access_token_secret = ""; //まだないので空でOK
const consumer_secret = "your_consumer_secret";
const signature_key = encodeURIComponent(consumer_secret) + "&" + encodeURIComponent(access_token_secret);
//ここまでがキーの作成

const request_method = "GET";
const request_url = "https://api.twitter.com/oauth/request_token"
const params = {
 "name": "sample",
 "text": "sample",
}

const params_to_query = (params) => {
  return Object.keys(params).sort().map(key => {
          return encodeURIComponent(key) + "=" + encodeURIComponent(params[key]);
        }).join(",");
}
const signature_data = encodeURIComponent(request_method) + "&" + encodeURIComponent(request_url) + "&" + params_to_query;
//ここまでがデータの作成

const hash = HmacSHA1(signature_data, signature_key);
const signature = Base64.stringify(hash);

```

このsignatureという定数が署名です。

今回は一旦ここで区切ります。

参考
https://syncer.jp/Web/API/Twitter/REST_API/
Accessのクエリの結果

Accessのクエリの結果なのですが、1台のPCのAccessだけが異常な結果になってしまいます。

テーブルは「顧客情報」「血液型」です。
「顧客情報」のフィールドは
・顧客番号
・血液型コード
・生年月日
・氏名
で、「血液型」のフィールドは
・血液型コード
・血液型
です。

ここテーブルに対し、クエリデザインで、
顧客番号（顧客情報）
血液型コード（顧客情報）
血液型（血液型）
生年月日（顧客情報）
氏名（顧客情報）
として、クエリを実行すると、
顧客番号、顧客情報.血液型コード、血液型、生年月日、指名、血液型.血液型コード
のフィールドが表示されてしまいます。
SQLビューで見ると
「SELECT 顧客情報.顧客番号,顧客情報.血液型コード,血液型.血液型,顧客情報.生年月日,顧客情報.氏名, * FROM 顧客情報 INNNER JOIN 血液型 ON 顧客情報.血液型コード = 血液型.血液型コード」
となっています。

これは、意図している結果ではなく、
「SELECT 顧客情報.顧客番号,顧客情報.血液型コード,血液型.血液型,顧客情報.生年月日,顧客情報.氏名 FROM 顧客情報 INNNER JOIN 血液型 ON 顧客情報.血液型コード = 血液型.血液型コード」
に変更すると、クエリの結果も意図した結果のフィールドも
顧客番号、血液型コード、血液型、生年月日、氏名
と正常なクエリの結果になります。

1台のPCAccessだけがこの状態になるので、何かAccessの環境設定に問題があるのではないかと思うのですが、分かりません。

どなたか、ご教授下さい。
勤怠管理ができるLINEBOT『HATARA CLOCK』をリリースしました！

#『HATARA CLOCK』リリースしました！

LINEのMessagingAPIを使って、勤怠管理ができるLINEボット『HATARA CLOCK』をリリースしました！このボットは「出勤」「退勤」「勤務時間修正」を登録することができ「今月の勤務時間」「先月の勤務時間」を確認することができます。
![OFFICECLOCK_MasterIcon.jpg](https://qiita-image-store.s3.amazonaws.com/0/147291/53abaf49-532e-fe81-d874-aeeb292b834c.jpeg)

↓友達追加できます！
<a href="https://line.me/R/ti/p/%40ifp6879p"><img height="36" border="0" alt="友だち追加" src="https://scdn.line-apps.com/n/line_add_friends/btn/ja.png"></a>


##開発環境
開発の環境は以下の通りです。

- MessagingAPI
- PHP
- JavaScript
- さくらVPS
- MySQL

##『HATARA CLOCK』使い方

『HATARA CLOCK』には6つのボタンがあります。

![photo02.jpg](https://qiita-image-store.s3.amazonaws.com/0/147291/67fe39b1-5c07-50ac-aa79-6c2c4b2f2027.jpeg)


１：『出勤します』
出勤したとき、仕事がはじまったときにボタンを押してください。LINEのメッセージで『start』のメッセージが送信され、確認画面が出てきます。確認画面のボタンの「YES」を選択すると、ボタンを押したときの時間が出勤時間として登録されます。出勤時間の登録は1日に一回しか登録することができません。

![start.gif](https://qiita-image-store.s3.amazonaws.com/0/147291/c3b4d7ce-1058-4a33-52bb-7e0aaeb0c32a.gif)


２：『退勤します』
退勤するとき、仕事が終わったときにボタンを押してください。LINEのメッセージで『end』のメッセージが送信され、確認画面が出てきます。確認画面のボタンの「YES」を選択すると、ボタンを押したときの時間が退勤時間として登録されます。出勤時間が登録されていない場合は『出勤時間：9時00分』『退勤時間：ボタンが押された時間』が登録されます 。もしも、退勤時間が出勤時間の定時時刻（9時00分）よりも早い場合は、出勤時間と退勤時間が同時刻で登録されます。退勤時間は、出勤時間の登録時に「17時30分」をデフォルトで登録しています。

![end.gif](https://qiita-image-store.s3.amazonaws.com/0/147291/17ec9dea-92a4-16b5-5b33-c6da248bddc5.gif)


３：『今日は休みます』
仕事をお休みするときにボタンを押してください。LINEのメッセージで『TakeDayOff』のメッセージが送信され、「休む」「有給で休む」「やっぱりはたらく」の選択ボタンが出てきます。
①休む：私事、病欠のときに選択してください。休みが登録され、この日は勤務時間としてカウントされません。
②有給で休む：有給休暇をとるときに選択してください。有給が登録され、この日は定時時刻が登録されます。
③やっぱりはたらく：「頑張ってはたらきましょう！」のメッセージが返ってきます。![12950.jpg](https://qiita-image-store.s3.amazonaws.com/0/147291/1e72dd4a-052c-3545-d1da-b280c2163476.jpeg)

４：『勤務時間の修正』
過去の勤務時間を修正したいときにボタンを押してください。LINEのメッセージで『retouch』のメッセージが送信され、「出勤時間」と「退勤時間」が出てきます。それぞれのボタンを選択すると、その月の「出勤時間リスト」「退勤時間リスト」が表示されます。そのリストから修正したい「日/時間/分」をメッセージから入力すると、修正することができます。入力フォーマットは実際に使ってみてご確認ください。凡例も表示されています。

![ezgif.com-resize (1).gif](https://qiita-image-store.s3.amazonaws.com/0/147291/41483860-f8e5-d634-9479-251b5f8f6fea.gif)

５：『先月の出勤時間と退勤時間』
先月の出勤時間を確認したいときにボタンを押してください。LINEのメッセージで『OldAllPrint』のメッセージが送信され、先月に登録した出勤時間と退勤時間と、その日の勤務時間が表示されます。勤務時間については8時間以上働いている場合は1時間を休憩時間として計算されています。その月の合計の勤務時間も表示されるようになっています。

６：『今月の出勤時間と退勤時間』
今月の出勤時間を確認したいときにボタンを押してください。LINEのメッセージで『AllPrint』のメッセージが送信され、今月に登録している出勤時間と退勤時間と、その日の勤務時間が表示されます。勤務時間については8時間以上働いている場合は1時間を休憩時間として計算されています。その月の合計の勤務時間も表示されるようになっています。

![AllPrint.gif](https://qiita-image-store.s3.amazonaws.com/0/147291/b87bac55-22e4-8763-3a07-5c3dc27c15b8.gif)


##紹介ページ
以下のページに詳しい操作の説明を解説しています。友達登録をして、ぜひ使ってみてください！よろしくお願いします。
###『HATARA CLOCK』
http://tech-portfolio.org/

↓以下のボタンを押すと友達追加できます！
<a href="https://line.me/R/ti/p/%40ifp6879p"><img height="36" border="0" alt="友だち追加" src="https://scdn.line-apps.com/n/line_add_friends/btn/ja.png"></a>

↓以下のQRコードを読込むとを押すと友達追加できます！
![4QZNC_HtOn.png](https://qiita-image-store.s3.amazonaws.com/0/147291/5ece43da-f274-555a-4102-7a01695cc301.png)
意外と知られていないOutlookで開発する方法


社会人になるまでOutlookはただのメールクライアントであると思っていました。開発部に居ながらひたすらメール書く日々が続いて、コードを書く開発に飢えに飢えていたとき、たまたまOutlookでマクロを組めることを知りました。

Gmailでは標準についている機能でも、Outlookには無いものがあります。例えば「添付」と本文に書いたのに添付し忘れたら教えてくれる機能です。そこで、添付し忘れたらアラートを出すマクロを組んだら、営業部や企画部の人にすごく喜ばれました。

開発したくてしたくて堪らないのに、諸事情により業務でコードを書く機会がなくなった似た境遇にある人たちの少しでも開発する機会になり、またそれがバリューを生み出すきっかけになればいいなと思います。

-----


「開発」タブの表示
-----
Outlookでマクロを組むためには「開発」タブを表示する設定が必要になります。

まず、Outlookを開き、「ファイル」を押します。

![outlook01.png](https://qiita-image-store.s3.amazonaws.com/0/18207/17679c7d-312e-b200-6996-7d8844ead3c1.png)

その後に、「オプション」を選択します。

![outlook02.png](https://qiita-image-store.s3.amazonaws.com/0/18207/475176ec-596e-e937-566e-2c3907b71aec.png)

オプションを開いたら、「リボンのユーザー設定」を選択します。

![outlook03.png](https://qiita-image-store.s3.amazonaws.com/0/18207/78139bbb-b902-c739-1035-251c31a3ccea.png)

選択したら「開発」のチェックボックスが外れているので、チェックを入れます。

![outlook04.png](https://qiita-image-store.s3.amazonaws.com/0/18207/10f42909-2cfb-a5fd-6621-3e78d84ae1c8.png)

チェックを入れると表示タブのとなりに「開発」のタブが表示されます。

![outlook05.png](https://qiita-image-store.s3.amazonaws.com/0/18207/1209cf00-af2b-f8b2-cef6-cf7186410ba7.png)

-----


デジタル証明書の発行
-----

Outlookから離れるのですが、使っているWindows環境によってはマクロを使うために、デジタル証明書が必要になります。

発行方法は、マイクロソフトの[ヘルプページ](https://support.office.com/ja-jp/article/%E3%83%9E%E3%82%AF%E3%83%AD-%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AB%E3%83%87%E3%82%B8%E3%82%BF%E3%83%AB%E7%BD%B2%E5%90%8D%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B-956e9cc8-bbf6-4365-8bfa-98505ecd1c01?CorrelationId=84dba402-8e3b-4acd-8707-f5192904de66&ui=ja-JP&rs=ja-JP&ad=JP&ocmsassetID=HA010354312)に書いてありますが、内容の通り調べても必要なファイルが見つからない場合があります。

その場合の対処法が、[Office 2013 の「VBA プロジェクトのデジタル証明書」はどこに?](http://qiita.com/NAKADANobuhiro/items/ba8f8d61486d92231037)に詳しく書いてあり、非常に参考になります。

-----


おなじみの「HelloWorld」
-----

まず「Visual Basic」を押すことが最初の一歩です。

![outlook.png](https://qiita-image-store.s3.amazonaws.com/0/18207/1be5780d-46f3-7a84-d063-9e7399cfc0d9.png "outlook.png")

左上枠の「プロジェクト – Project1」を展開していき、真っ白なメモ帳みたいなのを表示します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/18207/562a7cb4-a3c2-53d2-0c79-cfa0f1c43fd6.png)

以下のコードで「Hello World」を表示するメッセージボックスを作成します。

```VBA
Public Sub HelloWorld()
    MsgBox "Hello World"
End Sub
```

「ツール」から「マクロ…」を選択します。すると、登録されたマクロの一覧が表示されます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/18207/d691ffae-3add-885c-dc36-1ebe8b8f1eb7.png)

マクロを実行して、画像のようなメッセージボックスが表示されたら完成です。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/18207/69fda6b7-b284-7544-7a6f-ca536f865a26.png)

もし上手く行かない場合は、Outlookを再起動してみてください。
アラートで「マクロを有効にする」を選択して、実行してみてください。
「マクロを無効にする」しかアラートに表示されていない場合は、以下の画像の赤丸で囲ったマクロのセキュリティを選択し、セキュリティレベルを調整してみてください。

![outlook.png](https://qiita-image-store.s3.amazonaws.com/0/18207/ea1e06cd-0369-4b0c-ffb8-98ef64304e60.png "outlook.png")

-----

Outlookのマクロ紹介
-----

冒頭で話した添付防止のマクロを組むときは、以下のサイトを参考にしました。

- [Outlook 2013で送信前に送信先と添付忘れを確認するメッセージを表示するの巻](http://www.eripyon.com/mt/2013/04/outlook_2013.html)

Outlookの開発はどうやら昔からあるらしく、沢山のノウハウが以下のURL先に詰まっています。深いマクロを組んでみようかなと思う方は必見です。

- [Outlook 研究所](https://outlooklab.wordpress.com/)

----------
あまり語られてないけどVRコンテンツで注意すべきこと

# この文書について

世の中VRじゃ酔い酔いばっかりだけど、そんな中語られていないことを中心にVRコンテンツの落とし穴についてメモしていくつもり。

# 無限遠は鬼門

IPDが実際より大きく設定されている場合、無限遠の物体の輻輳角がマイナスになり立体視できない。逆に実際より小さく設定されている場合は近くに認識される。なので遠距離の物体を立体視するためにはIPDを正確に計測する必要があるが必要とされる精度は遠距離なほど高くなる。

# 空中に物体を配置しても立体視できない

人間の立体感は輻輳角だけでできているわけではない。輻輳角は正しくないと立体視に寄与しないため空中に物体を配置してもそれだけでは立体視は困難で、事前にヒントとして形状や移動などによる距離情報が必要になる。

なので空中に物体を配置するのは避け、奥行きを持つ物体の近くに配置すると立体視しやすくなる。

# ただの面は避ける

面として認識されるためには特徴点の集合が必要になる。人間が特徴点のない面を面として認識できるのは「枠」から推測しているだけであり、直接に面を認識しているのではない。ただの面は立体視を妨げるし認識の負荷が高い。

なので故意に狙っているのでもない限り面には必ず遠くからでも認識できる模様を作る必要がある。これは現実でも同様なので壁紙を選ぶ時は部屋の反対側からでも模様がわかる壁紙にしよう。

# 遠距離に距離感なし

遠距離だと輻輳角が小さくなるので輻輳角に頼ったレベルデザインは避ける。遠距離では移動、比較対象、フォグ類などの方が距離感を作れる。
技術英語 > I'll show many examples of each, [with an emphasis on] lists.

@ Introducing Python: Modern Computing in Simple Packages by Bill Lubanovic
(No. 1114 / 12833)

> I'll show many examples of each, **<font color=red>with an emphasis on</font>** lists.

https://www.merriam-webster.com/dictionary/emphasis

<hr>
with anから関連して思い出したのは

http://qiita.com/7of9/items/7989425311500095ad24
> with an air of reserve / IMHO: in my humble opinion
質問：firewalldの構築について

# debianを利用して下の構成のネットワークとサーバーを構築したいです

![スライド2.png](https://qiita-image-store.s3.amazonaws.com/0/148796/73bc2181-0572-ce36-dcf2-39d457c62618.png)

debian...debian-8.5.0-amd64-netinst.iso

現在、上の図のようなネットワーク構成のサーバーを構築する練習をVirtualboxを利用しておこなっています。

ただ、firewalldの設定が上手くいかないため、質問させてください。

現在、GSVと書かれたサーバーの/etc/netwark/interfacesは下記となっております。

```
 This file describes the network interfaces available on your system
# and how to activate them. For more information, see interfaces(5).

source /etc/network/interfaces.d/*

# The loopback network interface
auto lo
iface lo inet loopback

# The primary network interface
allow-hotplug eth0
auto eth0
iface eth0 inet static
        address 172.22.1.100
        netmask 255.255.252.0
        network 172.22.1.0
        broadcast 172.22.3.255
        gateway 172.22.0.1
        # dns-* options are implemented by the resolvconf package, if installed
        dns-nameservers 172.22.255.1

auto eth1
iface eth1 inet static
        address 192.168.1.1
        netmask 255.255.255.0
        network 192.168.1.0
        broadcast 192.168.1.255

auto eth2
iface eth2 inet static
        address 192.168.2.1
        netmask 255.255.255.0
        network 192.168.2.0
        broadcast 192.168.2.255


```

また、firewalldの設定はfirewall-cmd --list-all-zonesより下記となっております。

```
block
  interfaces: 
  sources: 
  services: 
  ports: 
  masquerade: no
  forward-ports: 
  icmp-blocks: 
  rich rules: 
	
dmz (active)
  interfaces: eth1
  sources: 
  services: http smtp
  ports: 
  masquerade: yes
  forward-ports: 
  icmp-blocks: 
  rich rules: 
	
drop
  interfaces: 
  sources: 
  services: 
  ports: 
  masquerade: no
  forward-ports: 
  icmp-blocks: 
  rich rules: 
	
external (active)
  interfaces: eth0
  sources: 
  services: ssh
  ports: 
  masquerade: yes
  forward-ports: 
  icmp-blocks: 
  rich rules: 
	
home
  interfaces: 
  sources: 
  services: dhcpv6-client mdns samba-client ssh
  ports: 
  masquerade: no
  forward-ports: 
  icmp-blocks: 
  rich rules: 
	
internal (active)
  interfaces: eth2
  sources: 192.168.1.0/24
  services: mysql
  ports: 
  masquerade: yes
  forward-ports: 
  icmp-blocks: 
  rich rules: 
	
public (default)
  interfaces: 
  sources: 
  services: dhcpv6-client http ssh
  ports: 
  masquerade: yes
  forward-ports: 
  icmp-blocks: 
  rich rules: 
	
trusted
  interfaces: 
  sources: 
  services: 
  ports: 
  masquerade: no
  forward-ports: 
  icmp-blocks: 
  rich rules: 
	
work
  interfaces: 
  sources: 
  services: dhcpv6-client ssh
  ports: 
  masquerade: no
  forward-ports: 
  icmp-blocks: 
  rich rules: 

```


困っている点はeth2のmysqlへの送信元を192.168.1.0/24に絞ったにもかかわらず、localhostからmysqlにアクセスできてしまっているところです。
具体的にはmampを使って、phpからmysqlにつなげてデータを取得できてしまっています。
これは、firewalldの設定ミスですよね？
一体、どうすれば良いのでしょうか？
アドバイスよろしくお願いいたします。
ESLintの使い方とAtomでの初期設定など

AtomでESLintを使うときにやることをまとめました。

## 1. linterとlinter-eslintを入れる

まずは [linter](https://atom.io/packages/linter) と [linter-eslint](https://atom.io/packages/linter-eslint) を入れます。

```shell
$ apm install linter linter-eslint
```

## 2. プロジェクトにESlintを入れる

グローバルに入れるよりも、プロジェクトごとに管理したほうがいいと思います。

```shell
$ yarn add --dev eslint
$ ./node_modules/.bin/eslint --init
```

`./node_modules/.bin/eslint --init` するとこんな感じでインタラクティブに何を使うか選べます（上下キーで選びます）。

![](http://i.gyazo.com/05a222e4cdcfc47246c0880c7e957f80.gif)

個人的には [Airbnbのやつ](https://github.com/airbnb/javascript) が好きなのでそれを入れています。

```shell
$ ./node_modules/.bin/eslint --init
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Airbnb
? Do you use React? Yes
? What format do you want your config file to be in? JSON
Installing eslint-plugin-react, eslint-plugin-jsx-a11y, eslint-plugin-import, eslint-config-airbnb
```

他にも「Reactを使うか？」とか「ファイル形式をどうするか？」など聞かれます。

## 3. Atomで動作確認をする

標準の設定では、`.eslintrc`ファイルがあるときのみESLintによる解析をしてくれますが、読み込んでほしくないファイルがあるときは`.eslintignore`で管理したりします。

```:.eslintignore
node_modules/
test/
```

また、警告を消したいな〜と思ったら随時`.eslintrc`にいらない設定を定義して警告をでないようにしたりします。

```json:.eslintrc.json
{
  "extends": "airbnb",
  "plugins": [
    "react",
    "jsx-a11y",
    "import"
  ],
  "rules": {
    "react/jsx-no-bind": [
      2,
      {
        "allowBind": true
      }
    ],
    "react/prefer-stateless-function": [0]
  }
}
```
[quambu/.eslintrc.json at master · y-temp4/quambu](https://github.com/y-temp4/quambu/blob/master/.eslintrc.json)

その時、ファイルを更新しただけだとAtomからのエラーが消えなかったので、`control` + `alt` + `command` + `l`でAtomのウィンドウをリロードする必要があります（これがめんどい･･･）。

## 参考

- [ESLintをAtomに導入し、Reactの構文にも対応したAirbnbのJSスタイルガイドを使う | maesblog](http://mae.chab.in/archives/2874)
- [ESLintについてのメモ - Qiita](http://qiita.com/makotot/items/822f592ff8470408be18)
DeepMind-Atari-Deep-Q-Learner / debian8 jessie CUDA Install

# description
- https://github.com/kuz/DeepMind-Atari-Deep-Q-Learner
- cpuでは学習に100日は要する
- cudaをinstallし高速化する
- 細かい点は省く // 不足があるかもしれません

# 環境
- debian 8
- cpu : i7 2700k
- mem : 32G
- gpu : GTX750


# 事前作業
- 参考
    - http://docs.nvidia.com/cuda/cuda-installation-guide-linux/index.html#axzz4XCO7KUtT

- 既存のnvidia driverなどは削除する

# Insall driver
## install required packages 
```
sudo apt-get install build-essential gcc g++ cmake curl libreadline-dev git git-core libjpeg-dev libpng-dev ncurses-dev imagemagick unzip
# 存在しないpackageは削除して実行

sudo apt-get install linux-headers-$(uname -r)
# 適宜, install されている versionにそってinstall

```

# Install CUDA
## DL
- https://developer.nvidia.com/cuda-downloads
    - Linux
    - x86_64
    - ubuntu
    - 16.04
    - runfile

## Install
```
# xを落とす
sudo bash cuda_8.0.44_linux.run
ln -s /usr/bin/g++-4.9 /usr/local/cuda/bin/g++
```

``` ~/.bashrc
export PATH=/usr/local/cuda/bin:$PATH
```

# Learn
```
git clone https://github.com/kuz/DeepMind-Atari-Deep-Q-Learner.git
cd DeepMind-Atari-Deep-Q-Learner
sudo bash ./install_dependencies.sh
./run_gpu breakout 
```


# 結果
- gpuでは, 約7時間で 1M step
- cpuの10~15倍程度
- 1.5M step頃からまともにプレイし始める

# 補足
- 学習にGPUを専有させれば, さらに早いのかもしれない
- cpu/gpuともに旧世代なので遅いと思う
- i7 2600kだとcpuが頭打ちのようにも見える. 並列動作していないのもあると思われる.
nodejsで暗号ファイルを作る

node.jsを使って、暗号化ファイルをビルドする為のメモ。

一括変換ツールを作る時等は、sync系が扱いやすい。

nodeはバージョンによって機能があったりなかったりするので、
環境確認が面倒だけど、環境を選ばないのが素敵。

参照
https://nodejs.org/api/crypto.html


# 動作確認環境
- macOS 10.12.3
- npm -v 3.10.9
- node -v v7.2.0

# ファイルを暗号化

```js
function cipher(data, algorithm, password){
    var crypto = require("crypto");
    var cipher = crypto.createCipher(algorithm, password);
    return Buffer.concat([cipher.update(data), cipher.final()]);
}

var fs = require('fs');
var inData = fs.readFileSync(filepath);
var cipheredData = cipher(inData, 'aes-256-cbc', 'password');
fs.writeFileSync(filepath, cipheredData);
```

algorithmは、**aes-256-cbc**や**aes-256-ctr**等たくさんあるが、
使用可能な一覧の確認は、以下で可能

```js
console.log( crypto.getCiphers() );
```

# 改ざん検出用にHMACを入れてみる

```js
function hmac(data, algorithm, password){
    var crypto = require("crypto");
    var hmac = crypto.createHmac(algorithm, password);
    hmac.update(data);
    return hmac.digest();
}

var fs = require('fs');
var inData = fs.readFileSync(filepath);
var hmacData = hmac(inData, 'sha256', 'password');

// ファイルデータの先頭にHMACを挿入
inData = Buffer.concat([hmacData, inData]);
// HMACを含めたファイルデータをまとめて暗号化
var cipheredData = cipher(inData, 'aes-256-cbc', 'password');

fs.writeFileSync(filepath, cipheredData);
```

HMACの挿入は先頭でも末尾でも都合の良い方で問題無いと思う。

ハッシュ関数の選択によりHMACのサイズが変わるが、
今回は**sha256**にしてみたのでサイズは 256bit = 32byte

改ざん検出をする場合は、使用側で33バイト目からのデータでHMACを作って
1 - 32バイトのデータと比較すれば良い。


# 圧縮してみる

データサイズも気にしないとね。
zlib.deflateSync が便利。

```js
var fs = require('fs');
var inData = fs.readFileSync(filepath);

var zlib = require('zlib');
var deflatedData = zlib.deflateSync(inData);
```

先に圧縮してから暗号化した方がデータサイズが小さくなりやすいみたいだけど、
暗号強度下がるかな。。。

# LUAのコンパイルしてみる

ついでなので。
https://www.npmjs.com/package/luac

```js
var luac = require('luac');
luac.buildToFileSync(filepath, outFilePath);
```

# 組み合わせてみる

改ざん検出用ハッシュ付き暗号化圧縮コンパイル済みluaデータファイルの作成

```js
var luac = require('luac');
luac.buildToFileSync(filepath, filepath);

var fs = require('fs');
var data = fs.readFileSync(filepath);

// 圧縮データにする
var zlib = require('zlib');
data = zlib.deflateSync(data);

// ファイルデータの先頭にHMACを挿入
var hmacData = hmac(data, 'sha256', 'password');
data = Buffer.concat([hmacData, data]);

// HMACを含めた圧縮ファイルデータをまとめて暗号化
data = cipher(data, 'aes-256-cbc', 'password');

fs.writeFileSync(filepath, data);
```
【Spring】メッセージの外部化

Spring徹底入門の備忘録です。

# MessageSourceインターフェイスと実装クラス
Springでメッセージを外部定義から取得するための仕組みがあります。
"仕組みの中核を担う" --> 「***MessageSourceインターフェイス***」

***MessageSource***はメッセージの格納先を抽象化するためのインターフェイスで、
メッセージを取得するためのメッソド(*getMessage()*)を提供します。


# MessageSourceの利用
ResourceBundleMessageSourceを利用して、プロパティファイルに定義したメッセージを取得する方法。
ReloadableResourceBundleMessageSourceも同じ要領で利用可能。

MessageSourceをDIコンテナに登録。
BeanのIDが"messageSource"になるように定義することで、DIコンテナ(ApplicationContext)内で使用するMessageSourceとして自動検出される。

```java
@Bean
public MessageSource messageSource() {
    ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource();
    // Set a property file on the class path.
    messageSource.setBasename("messages");
    // Set UTF-8 as a default encoding code
    messageSource.setDefaultEncoding("UTF-8");
    return messageSource;
}
```

# メッセージの定義

```properties:messages.properties
# welcome.message=ようこそ、{0}さん！
```

```properties:application-messages.properties
# welcome.message=ようこそ！
```
プロパティキーに「メッセージコード」、プロパティ値に「メッセージフォーマット」を指定します。

# MessageSourceのAPI利用
DIコンテナに登録したMessageSourceをインジェクションして、getMessage()メソッドを呼び出します。

```java
@Autowired
MessageSource messageSource;

public void showMessage() {
    String message = messageSource.getMessage("welcome.message", new String[]{"〇〇"}, Locale.JAPANESE);

    System.out.println(message);
}
```
showMessage()を呼び出す、コンソールに「ようこそ、〇〇さん!」と出力される。

# MessageSourceResolvableの利用
「メッセージに埋め込む値」をプロパティファイルから取得する場合は
org.springframework.context.support.DefaultMessageSourceResolvableを使用する

```java
MessageSourceResolvable functionName = new DefaultMessageSourceResolvable("functionName.userRegistration");

String message = messageSource.getMessage("welcome.message", new MessageSourceResolvable[]{functionName}, Locale.JAPANESE);
```
プログラム上でハードコーディングしていた値（"〇〇"）は、プロパティファイルも定義します。

```properties:messages.properties
# functionName.userRegistration=〇〇
```

# ロケール別のメッセージ出力
クライアントに指定したロケールに対応したメッセージを出力するには、<sppring:message>要素を使用します。
メッセージはSpringが提供しているMessageSourceから取得する仕組みになっています。

メッセージの定義例（メッセージ定義用のプロパティファイル）

```properties
title.home=ホーム画面
```

JSPの実装例

```html
<spring:message code="title.home"/>
```

HTMLの出力例
```text
ホーム画面
```

<sppring:message>要素の主な属性

| 属性名       | 説明       |
|:-----------------|:-----------------|
| code      | メッセージを取得するめのコード（プロパティキー）を指定する |
| arguments | メッセージのプレースホルダ（｛インデックス番号｝形式）に埋め込む値を指定する。かんま区切りの文字列またはオブジェクトのコレクション（配列）の指定が可能 |
| text      | デフォルトメッセージを指定する。この属性を指定したメッセージは、code属性に指定したコードに対応したメッセージが見つからない場合に使用される。複数の言語サポートする際に、修験後をtext属性に指定するといった利用方法が考えられる。 |
【Tips】長いコマンドはaliasにすると便利

長いコマンド、例えばこんなのがあった場合

```
tail /very/long/path/yyyymmdd.log
```

このようにaliasにすると便利

```
alias log='tail /very/long/path/yyyymmdd.log'
```

さらに.bashrcや、.profileに上記aliasを書いておけば毎回aliasコマンド打たなくてもよい
Core Text の CTLine と 行の折り返し位置を取得する

# CTLine を作る

```swift:CTLine
public func CTLineCreateWithAttributedString(_ attrString: CFAttributedString) -> CTLine

public func CTLineCreateTruncatedLine(_ line: CTLine, _ width: Double, _ truncationType: CTLineTruncationType, _ truncationToken: CTLine?) -> CTLine?

public func CTLineCreateJustifiedLine(_ line: CTLine, _ justificationFactor: CGFloat, _ justificationWidth: Double) -> CTLine?
```

```swift:CTTypesetter
public func CTTypesetterCreateLineWithOffset(_ typesetter: CTTypesetter, _ stringRange: CFRange, _ offset: Double) -> CTLine

public func CTTypesetterCreateLine(_ typesetter: CTTypesetter, _ stringRange: CFRange) -> CTLine
```

## CTLineCreateWithAttributedString()

属性付き文字列 CFAttributedString から CTLine を作る。

## CTLineCreateTruncatedLine()

CTLine からトランケーション（省略）を適用した CTLine を新たに作る。

## CTLineCreateJustifiedLine()

CTLine から均等割付を適用した CTLine を新たに作る。

## CTTypesetterCreateLineWithOffset()

テキストの指定範囲内から CTLine を作る。

## CTTypesetterCreateLine()

`CTTypesetterCreateLineWithOffset()` の `offset=0` 版。

# 改行位置を得る

```swift:CTTypesetter
public func CTTypesetterSuggestLineBreakWithOffset(_ typesetter: CTTypesetter, _ startIndex: CFIndex, _ width: Double, _ offset: Double) -> CFIndex

public func CTTypesetterSuggestLineBreak(_ typesetter: CTTypesetter, _ startIndex: CFIndex, _ width: Double) -> CFIndex

public func CTTypesetterSuggestClusterBreakWithOffset(_ typesetter: CTTypesetter, _ startIndex: CFIndex, _ width: Double, _ offset: Double) -> CFIndex

public func CTTypesetterSuggestClusterBreak(_ typesetter: CTTypesetter, _ startIndex: CFIndex, _ width: Double) -> CFIndex
```

## 引数

- typesetter: CTTypesetter
- startIndex: typesetter における処理を開始する文字位置 
- width: 描画コンテクストにおける行の長さ（pt）
- offset: 描画コンテクストにおける行の開始位置（pt）

## CTTypesetterSuggestLineBreakWithOffset()

> 改行はテキストストリーム内のハードブレーク文字または指定された幅に文字を埋め込むことによってトリガされます。

つまりは Word break（単語単位の折り返し）のように振る舞います。欧文ではスペースで区切られた単語単位を維持しようとします。和文では行頭／行末禁止文字などを考慮した簡単な禁則処理が適用されるようです。

## CTTypesetterSuggestLineBreak()

`CTTypesetterSuggestLineBreakWithOffset()` の `offset=0` 版。

## CTTypesetterSuggestClusterBreakWithOffset()

> 指定された幅 `width` に基づいて、タイポグラフィクラスタの改行位置を返却します。このクラスター改行は文字改行に似ていますが、言語クラスターを分割することはありません。他のコンテキスト分析は行われません。これは、ハイフネーションなどの異なる禁則処理を実装するために呼び出し元によって使用されます。タイポグラフィクラスタ改行は、テキストストリーム内のハードブレーク文字によってトリガされることにも注意してください。

つまりは Character break（文字単位の折り返し）のように振る舞います。欧文ではスペースで区切られた単語単位を無視して改行位置を返します。和文では禁則処理は施されません。

## CTTypesetterSuggestClusterBreak()

`CTTypesetterSuggestClusterBreakWithOffset()` の `offset=0` 版。
vagrant上からgithubにプッシュしようとした


#vagrant上で以下の様にプッシュしようとしたら怒られました．

```
[vagrant@localhost docker]$ git push origin master
error: The requested URL returned error: 403 Forbidden while accessing https://github.com/[USERNAME]/docker.git/info/refs

fatal: HTTP request failed
[vagrant@localhost docker]$
```

以下ではアカウント名がないので
```
https://github.com/[USERNAME]/docker.git/info/refs
```

https:://の後に `[USERNAME]@ `を加えたものをgitのremoteにアカウントを追加しましょう．
```
$ git remote set-url origin https://[USERNAME]@github.com/[USERNAME]/rss.git
```


```
[vagrant@localhost docker]$ git push origin master
Password:
Counting objects: 16, done.
Compressing objects: 100% (12/12), done.
Writing objects: 100% (15/15), 5.09 KiB, done.
Total 15 (delta 2), reused 0 (delta 0)
remote: Resolving deltas: 100% (2/2), done.
To https://[USERNAME]@github.com/[USERNAME]/docker.git
   588effa..0df2e8f  master -> master
[vagrant@localhost docker]$
```


##ちなみに変更結果は以下で確認できます．
```
[vagrant@localhost docker]$ vim .git/config
```


まぁ，それ以前に秘密鍵を設定しろよって話なんですけどね.
JavaScript 挿入ソート

##挿入ソート(単純挿入方)
「データを抜き出して、正しい位置に挿入していく方法」
正しい位置に「挿入していく」ので「挿入ソート」と言われる。

**イメージ**
トランプで一枚ずつ配られるカードを、手持ちのカードに加えて順番に並べていく方法に似ている。

**手順**
1 配列の先頭(index0)を整列済みとして扱い、残りのカードを整列する基点になる。
2 残りのカードの先頭を取り出して変数「tmp」に入れる。変数に入れてから挿入する場所を探す。
3 整列済みのどこに置くか判定する。
4 「挿入する値」が小さければ、整列済みの値を後ろへずらしてスペースを空ける。
5 上記の処理を未整列の部分がなくなるまで繰り返す

**ポイント**
・「整列していない部分から、挿入する値を順番に１つずつ取り出す」繰り返し処理
・「取り出した値を、整列した部分のどこに挿入するのかを判断する」繰り返し処理
上記２つを行う

```script.js
//未整列の配列データ
var a = [10,3,1,4,2];

//未整列の部分から値を１つずつ取り出すfor文
for(var i = 1; i<a.length; i++){
    //「挿入する値」を変数に一時保存する
    var tmp = a[i];
    
    //「整列済みの部分」のどこに挿入すれば良いか後ろから前に向かって順番に判断する
    for(var j = i-1; j>=0; j--){
        //「挿入する値」が小さい場合、調べた値を１つ後ろへずらす
        if(a[j]>tmp){
            a[j+1] = a[j];
        }else{
            //小さくなければ、ずらす処理を止める
            break;
        }
}
    //ずらす処理が終わったところに「挿入する値」を入れる
    a[j+1] = tmp;
}
//ソート後のデータを表示
console.log(a)
```
LaravelのFormヘルパーでセレクトボックスにdisabledの選択肢を追加する


タイトルがわかりにくいので整理すると

1. Laravel CollectiveのFormヘルパーでselectboxを実装すると「一番最初にvalueがnullでdisableでselectedなoption」が作れない
2. 最終的に作りたいのは以下のようなHTMLだが、これだと`old()`処理をいちいち書くのはめんどくさい

```html
<select name="color" multiple>
  <option value="" disabled selected>選択してください。</option>
  <option value="red">Red</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
</select>
```

`Form::macro()`を使うといいらしい。

## サービスプロバイダーを追加する
```bash
$ php artisan make:provider FormMacroServiceProvider
```

```php:app/Providers/FormMacroServiceProvider.php
<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

class FormMacroServiceProvider extends ServiceProvider
{
  /**
   * Bootstrap the application services.
   * @return void
   */
  public function boot()
  {
  	// 追記
    require base_path() . '/resources/macros/selectbox.php';
  }
  
  /**
   * Register the application services.
   * @return void
   */
  public function register()
  {
    //
  }
}
```


```php:config/app.php
  'providers' => [
    App\Providers\FormMacroServiceProvider::class,
  ]
```

## macroの作成
```php:resources/macros/selectbox.php
<?php
Form::macro('mySelectBox', function($name, $options, $attributes = []) {
  $old = old(preg_replace('/(\[\])\z/', '', $name));
  
  $html = '<select name="' . $name . '"';
  foreach($attributes as $attribute => $value) {
    $html .= ' ' . $attribute . '="' . $value . '"';
  }
  $html .= '><option value="" disabled selected>選択してください。</option>';
  
  foreach($options as $value => $text) {
    $html .= '<option value="' . $value . '"';
    
    if(is_array($old)) {
      $html .= (in_array($value, $old) ? ' selected="selected"' : '');
    } else {
      $html .= ($value == $old ? ' selected="selected"' : '');
    }
    
    $html .= '>' . $text . '</option>';
  }
  
  $html .= '</select>';
  
  return $html;
});
```

## 作ったmacroを使う

```php
{!! Form:: mySelectBox('colors[]', ['Red' => 'red', 'Blue' => 'blue', 'Green' => 'green', ['multiple' => true]]) !!}
```


## 参考
https://laravelcollective.com/docs/5.3/html#custom-macros
u-boot＠i.MX7でのクロック周波数変更

# 目的
i.MX7のu-bootでのクロック周波数を変更し、処理性能向上を確認する。
i.MX7D SABRESDボードにて実測する。


# u-bootのビルド方法
ビルドPC：Ubuntu14.01環境
arm-none-eabi-gccをインストール

```js
>sudo apt-get install arm-none-eabi-gcc
>export CROSS_COMPILE=arm-none-eabi-
>make mx7dsabresd_defconfig
>make all

u-boot.imxが同一フォルダ上にできるので、以下のコマンドでSDカードへ書き込む

>sudo dd if=u-boot.imx of=/dev/sdb bs=1k seek=1 && sync
````

# 起動後ログ

```js
U-Boot 2015.04imx_v2015.04_4.1.15_1.2.0_ga+gede7538 (Feb 02 2017 - 05:38:51)

CPU:   Freescale i.MX7D rev1.2 at 792 MHz
CPU:   Temperature 30 C
Reset cause: POR
Board: i.MX7D SABRESD RevA
I2C:   ready
DRAM:  1 GiB
PMIC: PFUZE300 DEV_ID=0x30 REV_ID=0x11
MMC:   FSL_SDHC: 0, FSL_SDHC: 1
*** Warning - bad CRC, using default environment

No panel detected: default to TFT43AB
Display: TFT43AB (480x272)
Video: 480x272x24
In:    serial
Out:   serial
Err:   serial
```
クロック値（デフォルト）

```js
=> clocks
PLL_CORE         792 MHz
PLL_SYS         480 MHz
PLL_NET        1000 MHz

IPG           67500 kHz
UART          24000 kHz
AHB          135000 kHz
AXI          332307 kHz
DDR          264000 kHz
USDHC1       196363 kHz
USDHC2       196363 kHz
USDHC3       196363 kHz
```
このクロック値のうち、PLL_COREを1GHzに、DDRを528MHzするのが目標である。
※DDR値はDDR Controllerなので、DDR PHY(512MHz）の1/2である必要がある。
　よって264MHzでよい。

#DDR3アクセスタイミング修正
DDR3メモリのアクセスタイミング計算シート
https://community.nxp.com/docs/DOC-152468





#PLLツリー修正
以下のファイルを修正

```arch\arm\cpu\armv7\mx7\clock.c

以下の関数を追加
static int enable_pll_arm(void)
{
        u32 reg = 0;
        ulong start;
        u32 div_sel;

        reg = readl(&ccm_anatop->pll_arm);

        div_sel = (reg & CCM_ANALOG_PLL_ARM_DIV_SELECT_MASK) >>
           CCM_ANALOG_PLL_ARM_DIV_SELECT_SHIFT;

        writel( CCM_ANALOG_PLL_ARM_DIV_SELECT_MASK,
                &ccm_anatop->pll_arm_clr);

        printf("%d\n",div_sel);
        writel( 83, &ccm_anatop->pll_arm_set);

        /* Wait lock */
        start = get_timer(0);   /* Get current timestamp */

        do {
                reg = readl(&ccm_anatop->pll_arm);
                if (reg & CCM_ANALOG_PLL_ARM_LOCK_MASK) {
                        /* Enable PLL out */
                        writel(CCM_ANALOG_PLL_ARM_ENABLE_CLK_MASK,
                                &ccm_anatop->pll_arm_set);
                        printf("ARM pll change\n");
                        return 0;
                }
        } while (get_timer(0) < (start + 10)); /* Wait 10ms */

        printf("Lock ARM timeout\n");

        return 1;
}

テスト用に、clocksコマンド内に追記
/*
 * Dump some core clockes.
 */
int do_mx7_showclocks(cmd_tbl_t *cmdtp, int flag, int argc, char * const argv[])
{
        u32 freq;

        printf("test\n");
        enable_pll_arm();

```

ビルドした結果を書き込み、clocksコマンドの結果を確認

```
PLL_CORE         996 MHz
PLL_SYS         480 MHz
PLL_NET        1000 MHz

IPG           67500 kHz
UART          24000 kHz
AHB          135000 kHz
AXI          332307 kHz
DDR          264000 kHz
USDHC1       196363 kHz
USDHC2       196363 kHz
USDHC3       196363 kHz
```
想定通り、ARM Core 996MHzに変更されている。

# 今後のTODO
・カーネルブート時間の差異を確認する
[rails5] postgresqlを選択した時のdb:create エラーとspring起因のエラー。

##1. db:create エラー

macにて作業。

```bash
ruby -v
# => ruby 2.4.0p0
rails -v
# => Rails 5.0.1
```

```rb
rails new myapi --api -T -d postgresql
rails db:create
#  could not connect db (brabrabra)
```
みたいなエラーが出た。ググってみるといろいろな意見があり、例えば「`config/database.yml`のユーザ名とパスワードがデフォルトではコメントアウトされてるからだ」、とか「データベースの所有者にCREATEDB権限がないから付けてみたら」とかいろいろ。実際にそれに従って試したらエラーは解消されたが、最終的にnewしたrailsプロジェクトを全部消してからやり直したら今度はエラーが出なかった。

よくよく考えたら、自分の場合は、postgresqlをインストールすらしていなかった。他にも次のような要因が考えられた。

- たぶんpostgresqlをインストールしていなかったせい？で`pg`というgemの新しいバージョンのインストールが失敗したのであとで無理やり入れた。そこらへんでpostgresqlの設定が変になったのかも？
- postgresqlを起動させていなかった。railsコマンドが勝手にdbを起動してくれる、と思い込んでいた。

以上を踏まえて再度postgresqlをbrew uninstallし、関連ディレクトリも全部消してやり直したらエラーは出なかった。

```bash
brew uninstall postgresql
rm -rf /usr/local/var/postgres/
brew install postgresql
rails new myapi --api -T -d postgresql
cd myapi
rails db:create
# => created database 'myapi_development'
# => created database 'myapi_test'
```

##2. springが起因と思われるエラー

```bash
cd myapi
rails g scaffold ...
```
と実行したら、長時間プロンプトがフリーズしてspringのエラーが十数行ぐらい出た。
springを再起動したら今度は動いた。

```bash
pwd
# => /../../.../myapi
spring start
spring stop
```
MSYS2でgitのsshがPermission denied (publickey)


Git for WindowsからMSYS2へ乗り換えて`git push`等をしようとしたら、エラー`Permission denied (publickey)`が発生した。

## gitのエラーの調査
参考: [Git - 環境変数](https://git-scm.com/book/ja/v2/Git%E3%81%AE%E5%86%85%E5%81%B4-%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0)

環境変数`GIT_TRACE`を設定すると、gitは処理の詳細を表示する。
例えば`git push`のエラー箇所を調べたい場合は下記のように実行する。

```
$ GIT_TRACE=true git push
```

sshが`Permission denied (publickey)`でコケていた。
`~/.ssh`配下の公開鍵などが読めていないっぽい。

## sshのエラーの調査
参考: [githubにsshで接続しようとした時にはまった - WhereToStart](http://futabooo.hatenablog.com/entry/2014/02/01/012822)

オプション`-v`を設定すると、sshは処理の詳細を表示する。
例えば`bitbuket.org`へのアクセス時の動作を確認したい場合は下記のように実行する。

```
$ ssh -vT bitbucket.org
```

`/home/ymdymd/.ssh`配下のファイルを読んでいた。`$HOME`はそこじゃないのに。

## sshが~/.sshを参照するようにする
参考: [msys2での$HOMEとOpenSSHでのホームディレクトリの違い - Qiita](http://qiita.com/nana4gonta/items/622571c66bfe7f1c7150)

ホームディレクトリを変更したくて`$HOME`を設定していたが、MSYS2のsshは、それを認識してくれないらしい。
ユーザー名ymdymdの場合、以下を実施した。

1. 旧ホームディレクトリ`/home/ymdymd`を削除する
2. `D:/MyHome`を新`$HOME`としたいので、`/etc/fstab`に`D:/MyHome /home/ymdymd`を追記する

※ `/etc/fstab`設定後は`/home/ymdymd`で`D:/MyHome`にアクセスする筈

これでOpenSSHが`$HOME/.ssh/config`を読んでくれるようになった。
しかしもう一つすることがある。

## ~/.ssh 以下ファイルのパーミッションを変更する
参考: [SSHが鍵認証されないとき、パーミッションを疑え。 - それマグで！](http://takuya-1st.hatenablog.jp/entry/20090216/1234742055)

`~/.ssh`等が他人から変更可能だと危険なので（危険だと判断してsshがコケるので）パーミッションを変更する。

```
$ find ~/.ssh | xargs chmod 755
```

では確認してみよう。

```
$ ssh -vT bitbucket.org
OpenSSH_7.3p1, OpenSSL 1.0.2j  26 Sep 2016
debug1: Reading configuration data /home/MyHome/.ssh/config
:
略
:
debug1: Exit status 0
```

アクセス成功。この後めちゃくちゃ`git push`した。

## git-credential-manager for Windows を入れて認証を省略
参考: [Git Credential Manager for Windows (GCM) のアップデート(v0.9 Beta) | OPC Diary](https://opcdiary.net/?p=30485)

おまけ。認証情報を管理してくれる仕組み。
Git for Windowsだと標準で入っていたが、MSYS2に乗り換えたので自分で入れる。

[GitHub - Microsoft/Git-Credential-Manager-for-Windows: Secure Git credential storage for Windows.](https://github.com/Microsoft/Git-Credential-Manager-for-Windows)

Releaseから`gcmw-<バージョン>.zip`をDLし、下記どちらかを実施する。

+ `install.cmd`を実行
+ `install.cmd`、`LICENSE.TXT`、`README.md`以外の9ファイルを`/usr/lib/git-core`に配置する

通常はどちらでもよいのだろうが、自分の場合はGit for Windowsのインストール情報をレジストリに書いてしまっていたため、`install.cmd`が期待通り動作しなかった。
RecyclerViewのメソッドの備忘録



###onCreateViewHolder
ViewのInflate(レイアウトXMLからのViewインスタンスの生成)とViewHolderを作成します。

###onBindViewHolder
ViewHolderに対してデータをセットします。

###getItemCount
RecyclerViewで表示するアイテムの数を返します。

###recyclerView.setHasFixedSize(true);
RecyclerView自体の大きさが変わらないことが分かっている時、
このオプションを付けておくと、パフォーマンスが改善されます
暗号系の安全性検証ツール“EasyCrypt”の導入法

# はじめに

[EasyCrypt](https://www.easycrypt.info/trac/wiki)は暗号プロトコルや暗号技術の安全性を検証するためのツールである。この文書ではEasyCryptをmacOSへインストールするための方法について述べる。

# インストール

## OPAMのインストール

まずOCamlのパッケージマネージャーである[OPAM](https://opam.ocaml.org/)を次のようにインストールする。

```console
$ brew install opam
```

opamをインストールしたあとは指示に従って、`opam init`や``eval `opam config env` ``を入力する。
そして、OPAMからEasyCrypt用のOCaml環境を次のコマンドで用意する[^ocaml_version]。

```console
$ opam switch create easycrypt 4.05.0 easycrypt
```

[^ocaml_version]: 最新のOCamlは4.04であるが、EasyCryptの[README](https://github.com/EasyCrypt/easycrypt)には4.02系が書かれているので、念のため4.02系の最新を選んだ。

これを実行するとOCamlが環境が整う。

## EasyCryptの必要要件のインストール

次にEasyCryptが必要とするパッケージをインストールする。まずはOPAMのリポジトリに追加を行うために、次のコマンドを実行する。

```console
$ opam repository add easycrypt git://github.com/EasyCrypt/opam.git
$ opam update
```

そして、EasyCryptに使われる外部ソルバーを次のコマンドでインストールする。なお、SMTソルバーである[Z3](https://github.com/Z3Prover/z3)のコンパイルに相当の時間がかかることに注意して欲しい。

```console
$ opam install ec-provers
```

## Why3の設定ファイルの作成

[Why3](http://why3.lri.fr/)の設定ファイルはSMTソルバーを更新したり追加した場合に作り直す必要がある。設定を作成するためには、次のコマンドを実行すればよい。

```console
$ why3 config --detect -C ~/.why3.conf
```

この設定によりEasyCryptからSMTソルバーが利用できるようになる。

## EasyCryptのインストール

```console
$ opam install easycrypt
```

これでEasyCryptを実際に使えるようになる。

## EasyCrypt用のProof Generalのインストール

EasyCryptで証明を記述したり検証する場合、EmacsのプラグインであるProof Generalのフロントエンドが用意されているので、こちらを使うとよい。まずはProof Generalを次のようにインストールする。

```console
$ opam install proofgeneral
```

そしてEmacsの設定ファイルである`~/.emacs`または`~/.emacs.d/init.el`に次を追加する。

```el:init.el
(load-file "<OPAM_PREFIX>/share/proofgeneral/generic/proof-site.el")
```

ただし、`<OPAM_PREFIX>`には次のコマンドで表示された場所を入力する。

```console
$ opam config var prefix
```

これでEmacsが正常に起動すればインストールは終了である。

# 証明の検証

これでEmacsから証明を検証できるようになったので、さっそく簡単な証明を用いてテストしてみる。

```coq:test.ec
type plain.
type rand.

op zero : plain.
op(+): plain -> plain -> plain.

axiom xor0p: forall (x:plain), zero + x = x.
axiom xorC (x y:plain): x + y = y + x.
axiom xorA x y z : x + (y + z) = (x + y) + z.

lemma xorp0 x : x + zero = x by smt.
```

これをファイルに保存して、Emacsでエラーなく開ければインストールは成功である。EasyCryptの[Examples](https://github.com/EasyCrypt/easycrypt/blob/1.0/examples/)の中から何かをダウンロードして実行してみるのもよいだろう[^FMap]。

[^FMap]: EasyCryptのExampleの中には`FMap`を用いているものがあるが、これを`SmtMap`に書き換えないと正しく検証できない。

# まとめ

このようにしてEasyCryptをインストールして動かしてみることができる。さらに興味がある方は文献を読むとよいかもしれない。

# 文献

- [暗号系の安全性検証 — 入門から計算機による証明まで](http://www.cs.bham.ac.uk/~kawamoty/ComputerSoftware2016.pdf)
- [数理的技法による情報セキュリティ](http://amzn.asia/2ylQ9uX)
イラレを使わずにmock-up designしてみる [by.XD]

# 目的

アプリのmock-up designを作成すること。

今回は、あるアプリ作成依頼を受け、
まだ、システム概要が決まっていないため、
先にdesign作成から入ることにしました。

デザインするにあたり、今後の部品活用なども考慮して、
マテリアルデザイン(風:Fu-)を採用することにします。
作成に用いるツールはイラレではなく、
mock-up designに特化した[XD][]というツールを使います。

# 動作環境

★ローカル環境
MacBook Pro (13-inch, Mid 2012)
プロセッサ: 2.5 GHz Intel Core i5
メモリ: 4 GB 1600 MHz DDR3

# デザインする前の心得 5つ
※注意 デザインを学んだことがないので、基本を知りません。間違っていたり、こうするといいなどがあれば、コメントください。
1. デザインだけではなく、コーディング時も各使い回しする予定の部品は一箇所で、更新が可能なように設定、考慮すること。
2. スマホデザインは最小画面と最大画面で、切り分けることがないように考慮すること。
3. mock-upや実際の動作も含め、動作前と後を考慮し、画面遷移を極力しないデザインを意識すること。もし画面遷移で切り分ける必要がある場合などは、メイン色を変更して、画面が切り替わってるように見せる。
4. 画面構成の文字含め、カラーは、極力少ない数でデザインする。(5〜10[MAX]くらい？)
5. 情報量は少なく、統一性、一貫性のあるデザインを考慮する。

# 実際にデザインしてみる
![XD作成画面](https://qiita-image-store.s3.amazonaws.com/0/12007/c805064d-53d5-1de9-9b12-a646210dc4d4.png)

XDには、シンボルという機能があり、初めにメインとなる画面を作成して、
作成した部品は、画面上部のDesign Boardにシンボル化して各部品ごとに切り分けておく。
こうすることで、各画面で利用されてる部品を一気に変更が可能となる。
テキストなども同様に同一内容のテキストを利用する箇所が多い場合は、
シンボル化して、Design Boardに突っ込んでおくことで、一箇所の更新だけで済む。
最初の作業は手間だが、仕様変更やデザイン変更などの時は、
大いに役立つ。
(※なお、今回はクライアント様に許可を得ておりませんので、一部モザイクをかけております。)
## 画面割り


| 画面割り | Color割り|
|:-:|:-:|
| ![Home-認証済の画面](https://qiita-image-store.s3.amazonaws.com/0/12007/3347b724-c342-ec14-e9d7-746d542e7989.png) |  ![Color割り](https://qiita-image-store.s3.amazonaws.com/0/12007/bf2075d8-3684-65c2-8c8a-1693ccf39c0e.png)|

今回の画面構成としては、「低い(最背面:background)→高い(最前面:firstfront)」で構成しています。
理由としては、マテリアルデザインは各部品の切り分けをボーダーではなく、シャドーで切り分けるようなので、ボーダーの役割を果たしてほしいため、濃い色をわざと上にあげてます。
最前面は、文字となるため、あえて白にしています。
また、最前面よりも上位にあげれるように、グレー色の文字も用意しています。
これで、文字色含め、5色でカラーが構成されています。

おまけとしては、すりガラスをメイン画面上に加え、その上に表示させます。
こうすることで、メイン画面よりも重要であることを強調させます。
![Home-News-I.png](https://qiita-image-store.s3.amazonaws.com/0/12007/686911d6-0cb7-6920-ea13-700d79dd7765.png)

# 予備

次回は、この画面構成を元に、アプリの設計を行なっていきます。
なお、その他のデザインについては、時間があれば投稿予定とします。


<!-- Link一覧 -->
[XD]:https://blogs.adobe.com/creativestation/web-how-to-play-with-adobe-xd
[]:
[]: