OmniAICreator/Qiita-1.07M huggingface dataset:
electron-builderで作成したwindows用インストーラーで、デスクトップとスタートメニューにショートカットを追加する方法

# 状況
electron-builderデフォルトのSquirrel.Windows形式だと、スタートメニューすら作られないのでどう起動したらいいかわからなくなる。

# 環境
- electron 1.6.6
- electron-builder 7.24.0
- (app側のpackage.jsonに) electron-squirrel-startup 1.0.0

# 解決方法 

electron-squirrel-startupというパッケージを入れて、main.jsの最初の方で読み込んでやると良い。
これだけ

```javascript
if(require('electron-squirrel-startup')) return;
```

別の方法として、NSISというパッケージ形式を使うと、デフォルトで追加してくれる。
自動アップデート機能ももっているが、NUTSサーバーは未対応なので、自前で配置してやる必要がある。

```javascript
"build": {
        "target": [
                "nsis"
        ]
}
```

# スタートメニューのディレクトリがundefinedになる場合

一見指定できるオプションが無いように見えるが、package.jsonのauthorが空だと発生する。
なお、electron-buildが推奨するpackage.jsonの配置だと、app側のpackage.jsonもauthorをちゃんと書いておく必要がある。

- [StartMenu Directory Name · Issue #14 · mongodb-js/electron-squirrel-startup](https://github.com/mongodb-js/electron-squirrel-startup/issues/14#issuecomment-244538309)
- [[Feature Request] Ability to set author/CompanyName programmatically · Issue #455 · electron-userland/electron-builder](https://github.com/electron-userland/electron-builder/issues/455)

## electron-packagerの場合
- [squirrel.windows - Creating Shortcuts for an Installed Electron Application - Stack Overflow](https://stackoverflow.com/questions/36116638/creating-shortcuts-for-an-installed-electron-application)
angular  テスト作成前エラー解決メモ


## エラーメッセージと、解決方法をメモ

### ● Failed: Template parse errors: Can't bind to 'formGroup' since it isn't a known property of 'form'.
テストクラスにReactiveFormsModuleを追加する。

```html:sample
  import { ReactiveFormsModule } from '@angular/forms';

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      providers: [ xxxService ],
      declarations: [ xxxComponent ],
      imports: [ xxxModule, ReactiveFormsModule]
    })
    .compileComponents();
  }));
```
### ● Error: No provider for Http!
テストクラスにHttpではなく、HttpModuleを追加したら解決！

```html:sample
import { HttpModule } from '@angular/http';

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      providers: [ xxxService ],
      declarations: [ xxxComponent ],
      imports: [ xxxModule, HttpModule ]
    })
    .compileComponents();
  }));
```


### ● Error: No provider for ActivatedRoute!
RouterTestingModuleを追加したら解決。

```html:sample
import { RouterTestingModule } from "@angular/router/testing";

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      providers: [ xxxService ],
      declarations: [ xxxComponent ],
      imports: [ xxxModule, RouterTestingModule]
    })
    .compileComponents();
  }));
```

### ●Failed: Template parse errors:
'app-xxx' is not a known element:
1. If 'app-xxx' is an Angular component, then verify that it is part of this module.
2. If 'app-xxx' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<app-xxx (onTodoCreated)="receiveTodoItem($event)"></app-xxx>

そのコンポーネントを使用するテスト全部にCUSTOM_ELEMENTS_SCHEMAを追加したら解決

```html:sample
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
      providers: [ xxxService ],
      declarations: [ xxxComponent ],
      imports: [ xxxModule, RouterTestingModule]
    })
    .compileComponents();
  }));
```

### ●Can't bind to 'ngModel' since it isn't a known property of 'select'
FormsModuleをインポートしたら解決

```html:sample
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      ......
      imports: [ xxxModule, FormsModule]
    })
    .compileComponents();
  }));
```
参考
https://stackoverflow.com/questions/41019109/error-no-provider-for-router-while-writing-karma-jasmine-unit-test-cases
https://stackoverflow.com/questions/42656195/cant-bind-to-ngmodel-since-it-isnt-a-known-property-of-select
高さが16px以下の画像を指定の位置に表示させたいのに、余計な隙間ができる。

高さが16px以下の画像を指定の位置に表示させたいのに、余計な隙間ができた場合は、

1. imgをmargin: 0;にする。
2. divをdisplay: inline;にする。

それでも解決しないときは、

1. imgをdisplay: block;にする。
2. divをfont-size: 0; または、vertical-align: top;にする。


inline-blockはその挙動になります。
その次に重要なのが何がblock要素、何かinline-block要素、何がinlineなのかというところになってきます。

HTML5ではその境界がなくなったと言われていますが、それはあくまで新要素であるsection, article、navなどの事でありまだその概念はしっかり残っています。
「Pythonでk-db.comから株価の時系列データを取得する」プログラム環境作成メモ

#Cloud9開発環境にて、jupyterをインストールしてその環境で、k-db.comからの株価取得プログラムを動作させる。

追記　2018.2.22
k-dbが2017年末でサービス終了とのことでした。

deep learningを勉強中で、株のデーターを用いて株価予想をするプログラムを考えています。
しかし、色々と探しても５分足で東証全銘柄のデーターを取得する方法が殆どありません。そして、やっと見つけたのがk-db.comです。
こちらのサイトは４日分ですが個別銘柄の５分足の情報が掲載されています。しかし、これをいちいちダウンロードして編集するには大変な時間がかかってしまいます。そしてこちらのサイトから自動的に５分足での株価データーを取得するプログラムを発見しました。それが下記のＵＲＬにあります。

k-db.comから株価を取得するプログラム
「Pythonでk-db.comから時系列データを取得する」プログラムはこちらを使用させていただきました。
http://qiita.com/sawadybomb/items/03c3814268d3e2904e6c
cloud9 , python初心者でなかなかうまく行きません。

##環境
cloud9(有料版）
jupyter
python 3.5.3

##手順
###まずはanacondaやjupyterの環境作成。
こちらを参考
http://qiita.com/KenjiKitagawa/items/e0225d9be10ea3dbdafc

###k-db.comからの株価取得プログラムのダウンロード、展開
https://github.com/sawadyrr5/pykdb
こちらからプログラムをＰＣにダウンロードして、cloud9のjupyter配下に展開。

###setup.pyというファイルを起動
ダウンロードしたファイルのsetupを実行する。
python setup.py install　をコマンドラインから実行

### example　フォルダー配下の「tutorial_stocks.ipynb」をjupyterから起動したところちゃんと動作しました。

しかし、銘柄によっては、データーが抜けている部分があり、取得元のk-db.comを見てもやはりデーターが入っていませんでした。
対処法は下記に書きました。


プログラム実行結果　NANがデーターがない部分
![stock1.jpg](https://qiita-image-store.s3.amazonaws.com/0/188563/3829e4c4-1e6b-44ce-205e-c1a02649bed3.jpeg)


##データの一部がNANとなってしまう場合の対策法の例
k-db.comの元データがNANとなっているので、データーを取得することは不可能です。
このデータは人工知能のdeep learningに使用するために本来はちゃんとした数値が必要ですが、NANの個数が少ないことから前後の数値から数値を予想して（線形数値）入力することにしました。

exampleディレクトリ配下にある、サンプルプログラム中のdf=obj.hoge 配下に df= df.interpolate(hoge　を入れる。
例
```
df = obj.price(date_from=start, date_to=end, symbol=i_old, freq=stock_freq)   
df = df.interpolate(method='index') #NANのデータを前後の線形数値で補間する
```

補完後
![stock2.jpg](https://qiita-image-store.s3.amazonaws.com/0/188563/a0a8054b-85b1-cf52-e3b8-ab0b1044a247.jpeg)
PhantomJS で Screenshot を取る方法

## 流れ
- まずは PhantomJS をいれます
- スクリプト書きます
- `phantomjs foo.js` で実行します

Mac で動かします

## Step1. まずは、brew で　PhantomJS をインストール。

```bash:install_by_homebrew
$ brew install phantomjs
$ brew list phantomjs
# /usr/local/Cellar/phantomjs/2.1.1/bin/phantomjs
# /usr/local/Cellar/phantomjs/2.1.1/share/phantomjs/ (45 files)
```

## Step2. スクリプトを書きます。

```js:screenshot_phantomjs.js
var url = 'http://www.metro.tokyo.jp/'

// headlessブラウザを作る
var page = require('webpage').create();

page.viewportSize = { width: 1200, height: 600 };
page.clipRect = {
  top: 0,
  left: 0,
  width: 1200,
  height: 600
};

// 指定したURLを開く
page.open(url, function(status) {
  console.log("Status: " + status);
  if (status === "success") {
    page.render('./image_phantomjs.png');
  }
  phantom.exit();
});
```

## Step3. コマンドを叩いて画像ができることを確認します。

```bash
$ phantomjs screenshot_phantomjs.js
Status: success
```

無事、同じディレクトリに、画像ができました。
<img width="1000" alt="スクリーンショット 2017-07-28 12.11.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/45822/c34d1ff4-45a6-1d04-e676-b1306a8d0906.png">


### おまけ1. 切り取り位置の指定

`clipRect` を調整すれば、狙った箇所を切り取ることができます。

```js
page.clipRect = {
  top: 200,
  left: 720,
  width: 500,
  height: 250
};
```

### おまけ2. Docker コンテナにいれる場合

以下の sh スクリプトを Dockerfile で叩いていれています。

```sh:install_phantomjs.sh
apt-get update
apt-get install build-essential chrpath libssl-dev libxft-dev -y
apt-get install libfreetype6 libfreetype6-dev -y
apt-get install libfontconfig1 libfontconfig1-dev -y
cd ~
export PHANTOM_JS="phantomjs-2.1.1-linux-x86_64"
wget https://github.com/Medium/phantomjs/releases/download/v2.1.1/$PHANTOM_JS.tar.bz2
tar xvjf $PHANTOM_JS.tar.bz2
mv $PHANTOM_JS /usr/local/share
ln -sf /usr/local/share/$PHANTOM_JS/bin/phantomjs /usr/local/bin
phantomjs --version
```

以上です。ありがとうございました。

Headless Chrome で同じようなことをしてみたいです。🚶🏼
プルリクエスト時に競合した時の対処方法

プルリクエスト(Pull Request)をしようとした時に競合してて、マージができない場合の対処方法を調べたのでメモしておきます。

## 前提

developブランチに対してfeature/hogeブランチをプルリクしたとき、競合が発生したものとします。

競合を解決するまでdevelopにfeature/hogeブランチをマージすることはできませんので、この記事では`rebase`を使って事象を解決します。([参考](https://gist.github.com/wakamsha/c12997121c1179463205))

## 手順

1. developブランチを`pull`して最新の状態にする

    ```
    $ git checkout develop
    $ git pull origin develop
    ```

1. feature/hogeブランチに切り替える

    ```
    $ git checkout feature/hoge
    ```

1. feature/hogeブランチに対してdevelopブランチを`rebase`する

	```
	$ git branch
	=> カレントのブランチがfeature/hogeであることを念のため確認
	$ git pull --rebase origin develop
	```
	
	途中でコンフリクトが発生すると、そこでrebase処理が中断されます。

1. 競合箇所を修正する

1. 修正が完了したら`add`して`rebase`を再開する

	```
	$ git add .
	$ git status
	=> コンフリクトが解消されていることを確認する
	$ git rebase --continue
	```
	
	rebase処理が再開されます。再びコンフリクトが発生するとrebase処理が中断されます。

1. コンフリクトが発生しなくなるまで修正と`rebase`を繰り返す

1. 全てのコンフリクトが解決したら、`-f`オプションを追加した上でリモートリポジトリに`push`する

	```
	$ git status
	=> rebaseが完了していることを確認する。完了していればrebasingのようなメッセージが出なくなるはず
	$ git push -f origin feature/hoge:feature/hoge
	```
    (因みにリモートリポジトリにfeature/hogeを作っていない場合は最後の`push`操作は不要です)

注) git操作は自己責任でお願いしますm(_ _)m

---
[参考] 

- [Pull Request 時にコンフリクトが発生してしまった際の対処法](https://gist.github.com/wakamsha/c12997121c1179463205)
- [プルリクエストの画面でMerge出来ない事がわかった場合にどうすればよいか考える。](http://qiita.com/mapyo/items/a3ab9ef0c011b6757d49)
ListをDataTableに変換する

忘れないように

``` sample.cs
public static DataTable ToDataTable<T>(this List<T> data)
    {
      var properties = TypeDescriptor.GetProperties(typeof(T));
      var table = new DataTable();
      foreach (PropertyDescriptor prop in properties)
        table.Columns.Add(prop.Name, Nullable.GetUnderlyingType(prop.PropertyType) ?? prop.PropertyType);
      foreach (T item in data)
      {
        var row = table.NewRow();
        foreach (PropertyDescriptor prop in properties)
          row[prop.Name] = prop.GetValue(item) ?? DBNull.Value;
        table.Rows.Add(row);
      }
      return table;
    }
```
HadoopでWordCountをやってみる

## 概要
Hadoopを使ってWordCountを実行してみます。
同じ単語が何回出現したかを数えます。

## 目次
1. [Apache Hadoopのインストール手順](http://qiita.com/Esfahan/items/39fd1e2f8b755eacec65)
2. [Apache Hiveのインストール手順](http://qiita.com/Esfahan/items/a6f2107876e5a712a72c)
3. HadoopでWordCountをやってみる

## 環境
- CentOS 7.1
- Hadoop 2.8.0
- MariaDB 5.5.52
- java 1.8.0
- Hive 2.3.0
- HBase 1.3.1

## テキストファイルを用意する
以下のようなテキストファイルを作成します。
こちらの文字列を対象としてWordCountを実行します。

```text:sample.txt
red blue yellow red
```

ファイルの保存先（HDFS）となるディレクトリを作成します。

```
$ $HADOOP_HOME/bin/hadoop fs -mkdir /input
```

テキストファイルを、/inputの下にコピーします。

```
$ $HADOOP_HOME/bin/hadoop fs -put sample.txt /input
```

コピーされたことを確認します。

```
$ $HADOOP_HOME/bin/hadoop fs -ls /input
Found 1 items
-rw-r--r--   1 vagrant supergroup         20 2017-07-28 05:38 /input/sample.txt
$ $HADOOP_HOME/bin/hadoop fs -cat /input/sample.txt
red blue yellow red
```

### WordCountを実行する
実行

```
$ $HADOOP_HOME/bin/hadoop jar $HADOOP_HOME/share/hadoop/mapreduce/hadoop-mapreduce-examples-2.8.0.jar wordcount /input /output
```

ファイルが生成されたことをを確認します。

```
$ $HADOOP_HOME/bin/hadoop fs -ls /output
Found 2 items
-rw-r--r--   1 vagrant supergroup          0 2017-07-28 05:47 /output/_SUCCESS
-rw-r--r--   1 vagrant supergroup         22 2017-07-28 05:47 /output/part-r-00000
```

/output/part-r-00000が結果が出力されたファイルです。

```
$ $HADOOP_HOME/bin/hadoop fs -cat /output/part-r-00000
blue	1
red	2
yellow	1
```

それぞれのwordが何回出現したのか、結果が出力されています。

以上

## 参考
- [CentOSでHadoopとHiveを試してみる（2015年秋編）](http://qiita.com/zaburo/items/202abc3be628301b277e)
ActiveRecordで全てのString型カラムの文字コードをバリデーションする。

:ice_cream: :relaxed: :shaved_ice:

レガシープロジェクトでは、DBにShift_JISやEUC-JPなど、UTF-8文字コードを使っていることがあります。

でも、我らがActiveRecordはDBにRead/Writeする時に文字コードを自動変換してくれるので、文字化けが起こることはありません！

しかし、もちろん、Shift_JISに含まれない文字を保存することはできないので、
フォームに「⛄️」を入力してしまったときには、バリデーションエラーにしなければなりません。

# カスタムバリデータ

そこで、文字コードをチェックするためのバリデータを作りました。

文字コードチェックは、全ての文字列型カラムで行わなければなりませんが、
いちいちカラムを指定するのは面倒なので、自動で検出するようにしています。

```rb
class DatabaseEncodingValidator < ActiveModel::Validator
  def initialize(options, &block)
    super(options, &block)
    @encoding = options[:encoding]
    raise "'encoding' parameter is required" if @encoding.blank?
  end

  def validate(record)
    string_attributes(record).each do |attribute|
      value = record.read_attribute_for_validation(attribute)
      next if value.blank?

      begin
        value.encode(@encoding)
      rescue Encoding::UndefinedConversionError => e
        record.errors.add(
          attribute, :encoding_incompatible_char,
          encoding: @encoding.to_s.upcase,
          error_char: e.error_char
        )
      end
    end
  end

  private

  def string_attributes(record)
    record.class.columns.select { |c| c.type == :string }.map(&:name)
  end
end
```

## 使い方

ApplicationRecordに仕込めば、全モデルで文字コードチェックが行われるようになります。

```rb
# app/models/application_record.rb
class ApplicationRecord < ActiveRecord::Base
  ...

  # 全てのモデルクラスで、全ての文字列型カラムの、バリデーションを行う
  validates_with DatabaseEncodingValidator, encoding: Encoding::Shift_JIS
end
```

メッセージを日本語化するために、ja.ymlにも追加します。

```yaml
# config/locale/ja.yml
---
ja:
  errors:
    messages:
      encoding_incompatible_char: に%{encoding}では使用できない文字「%{error_char}」が含まれています
```

## 補足と課題

DBの文字コードは `ActiveRecord::Base.connection_config[:encoding]`でも取得できるのですが、`encoding: Encoding::Shift_JIS`と明示するようにしています。例えば Oracle DB では文字コードが "sjis" (JA16SJISTILDE) でも、実際にはCP932の文字を保存することができたりするためです。

また、カラムが文字列型かどうかを `record.class.columns` で判定していますが、全てのケースでうまく動くかは自信がありません。もっと一般的な判定方法があるかもしれません。
CheckIO (Python) > House Password > 実装してみた > PEP8: do not assign a lambda expression, use a def

https://py.checkio.org/mission/house-password/
詳細はリンク先を参照 (手抜き)。

[Python > 実装 > 数値が入っているか | alphabet(upper and lower case)が入っているか > sum(), map(), str.isalphaの使用](http://qiita.com/7of9/items/b5a307fed35f333f1d29)にて@SaitoTsutomu さんに教えていただいた方法を使用しました。

## v0.1

PEP8準拠してません。

```py
numlower = lambda s:sum(map(str.islower, s))
numupper = lambda s:sum(map(str.isupper, s))
numdigit = lambda s:sum(map(str.isdigit, s))

def checkLowerUpperDigit(data):
    return (numlower(data) >0 and 
       numupper(data) >0 and
       numdigit(data) >0)

def checkio(data):
    print(data)
    if len(data) < 10:
        return False
    if checkLowerUpperDigit(data) == False:
        return False
        
    return True

#Some hints
#Just check all conditions


if __name__ == '__main__':
    #These "asserts" using only for self-checking and not necessary for auto-testing
    assert checkio('A1213pokl') == False, "1st example"
    assert checkio('bAse730onE4') == True, "2nd example"
    assert checkio('asasasasasasasaas') == False, "3rd example"
    assert checkio('QWERTYqwerty') == False, "4th example"
    assert checkio('123456123456') == False, "5th example"
    assert checkio('QwErTy911poqqqq') == True, "6th example"

```

```txt:run
A1213pokl
bAse730onE4
asasasasasasasaas
QWERTYqwerty
123456123456
QwErTy911poqqqq
```

全assertionをパスした。

## v0.2

PEP8のWarning対応

http://pep8online.com を使用。

以下のWarningは残っている。

> Line1, Column 1: do not assign a lambda expression, use a def
> Line2, Column 1: do not assign a lambda expression, use a def
> Line3, Column 1: do not assign a lambda expression, use a def


```py
numlower = lambda s: sum(map(str.islower, s))
numupper = lambda s: sum(map(str.isupper, s))
numdigit = lambda s: sum(map(str.isdigit, s))


def checkLowerUpperDigit(data):
    return (numlower(data) > 0 and
            numupper(data) > 0 and
            numdigit(data) > 0)


def checkio(data):
    print(data)
    if len(data) < 10:
        return False
    if checkLowerUpperDigit(data) is False:
        return False

    return True

# Some hints
# Just check all conditions


if __name__ == '__main__':
    # These "asserts" using only for self-checking and
    #   not necessary for auto-testing
    assert checkio('A1213pokl') is False, "1st example"
    assert checkio('bAse730onE4') is True, "2nd example"
    assert checkio('asasasasasasasaas') is False, "3rd example"
    assert checkio('QWERTYqwerty') is False, "4th example"
    assert checkio('123456123456') is False, "5th example"
    assert checkio('QwErTy911poqqqq') is True, "6th example"

```

### link

https://stackoverflow.com/questions/25010167/e731-do-not-assign-a-lambda-expression-use-a-def

> In my opinion this rule better be avoided and broken when it makes sense, use your judgement.
Rでas.POSIXlt関数を用いて時刻のデータをすべて経過時間に変換する

# 概要
R(version3.3.2)にて、データ解析中に時刻データを経過時間に変換するのに苦労したので備忘録としてまとめます。

# 背景
RでCSVファイルを読み込んでデータ解析しているとき、開始時刻・終了時刻というカラムがありました。

| 開始時刻  |終了時刻 |
|:--------:|:------:|
| 1:39     |3:01    |
| 2:05     |3:55    |
| 1:21     |1:50    |
| 2:11     |2:45    |
| 2:38     |3:11    |


これらから下のテーブルの一番右のように経過時間を求めて追加する必要がありました。

| 開始時刻  |終了時刻 |経過時間(分)|
|:--------:|:------:|:---------:|
| 1:39     |3:01    |82 |
| 2:05     |3:55    |110|
| 1:21     |1:50    |29 |
| 2:11     |2:45    |34 |
| 2:38     |3:11    |33 |

しかし、開始時刻、終了時刻カラムはすべてCSVを読み込むとき時刻データとしてではなく、文字列として読み込まれており、単純に引き算で計算する事ができませんでした:thinking_face: 

# 対処
そこで、as.POSIXlt関数を用いて文字列として扱われている開始時刻・終了時刻を時刻データの1つであるPOSIXltに変換しました。上のデータフレームの名前をdとする時、以下のように実行することで変換ができました。

```R:上の例のデータフレームを作成
start.time <- c("1:39", "2:05", "1:21", "2:11", "2:38")
end.time <- c("3:01", "3:55", "1:50", "2:45", "3:11")
d <- cbind(start.time, end.time)
d
     start.time end.time
[1,] "1:39"     "3:01"  
[2,] "2:05"     "3:55"  
[3,] "1:21"     "1:50"  
[4,] "2:11"     "2:45"  
[5,] "2:38"     "3:11"   
```

```R:文字列データの時刻データへの変換
col1 <- as.POSIXlt(d[, 1], format="%H:%M")
col2 <- as.POSIXlt(d[, 2], format="%H:%M")
```

as.POSIXlt関数の引数formatで柔軟に変換ができるのが助かりますね！
POSIXltオブジェクトは$を使うことで日・時間・分など個別のデータを取り出すことができます。

```R:POSIXltオブジェクトの参照
> col1
[1] "2017-07-28 01:39:00 JST" "2017-07-28 02:05:00 JST" "2017-07-28 01:21:00 JST" "2017-07-28 02:11:00 JST"
[5] "2017-07-28 02:38:00 JST"
> col1$hour
[1] 1 2 1 2 2
> col1$min
[1] 39  5 21 11 38
```

この性質を利用して以下のようにすれば経過時間(分)を計算することができます。

```R:経過時間を計算する
> elapsed.time <- (col2$hour * 60 + col2$min) - (col1$hour * 60 + col1$min)
> elapsed.time
[1]  82 110  29  34  33
```

---

2017年8月2日追記
tayohei@githubさんから以下の経過時間の計算方法を教えていただきました。
こちらのほうが楽ですね！tayohei@githubさんありがとうございました！

```R:経過時間を計算する(tayohei@githubさんバージョン)
> elapsed.time <- as.numeric(col2-col1, units="mins")
> elapsed.time
[1]  82 110  29  34  33
```

---

なお、今回の例ではないですが24時をまたぐ場合は補正が必要です。

```R:補正する
for (i in 1:length(elapsed.time)) {
    if (elapsed.time[i] < 0) { 
        elapsed.time[i] <- elapsed.time[i] + 60 * 24
    }
}
```

最後に、cbindでデータフレームに追加すれば完成です！

```R:データフレームに追加する
> d <- cbind(d, "elapsed.time"=elapsed.time)
> d
     start.time end.time elapsed.time
[1,] "1:39"     "3:01"   "82"        
[2,] "2:05"     "3:55"   "110"       
[3,] "1:21"     "1:50"   "29"        
[4,] "2:11"     "2:45"   "34"        
[5,] "2:38"     "3:11"   "33"        
```

# 最後に
以上でRでas.POSIXlt関数を用いて時刻のデータをすべて経過時間に変換する方法の紹介を終わります。文字列を切り取る関数を使ってちまちま計算するスクリプトを書く必要があるかなぁと思っていたのでパパッと終わって助かりました。

ぜひ皆様のRライフの助けになれば幸いです。ここまでお読みいただきありがとうございました。
HTML5のvideoの動画を任意の秒数で停止させる方法


currentTimeプロパティに秒数を設定することでvideoタグの動画を任意の秒数で停止させることが可能です。
HTML例は次のようになります。

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title></head>
<body>
<div>
  <video width="320" height="240" id="video">
    <source src="YOUR_VIDEO.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
</div>
<div>
  <button onclick="play()">play</button>
  <button onclick="pause()">pause</button>
  <input type="text" id="time" placeholder="秒" value="0">
  <button onclick="seek()">seek0</button>
</div>


<script>
    var myVideo = document.getElementById("video");

    function play() {
        myVideo.play();
    }
    function pause() {
        myVideo.pause();
    }

    function seek() {
        var time = document.getElementById("time").value;
        myVideo.currentTime = time;
    }
</script>

</body>
</html>
```
Javaでディレクトリ以下を再帰的に削除

Files#walkが、ディレクトリの上から辿ってPathオブジェクトを返してくれるので、それを利用すると、割りときれいに書けるようです。

ファイル関連はtry-with-resourcesをするのが鉄板の模様

https://stackoverflow.com/questions/35988192/java-nio-most-concise-recursive-directory-delete

```
Path dir = Paths.get("/temp");
try(Stream<path> walk = Files.walk(dir, FileVisitOption.FOLLOW_LINKS))
{
                walk.sorted(Comparator.reverseOrder())
                .map(Path::toFile)
                .forEach(File::delete);
dir .toFile().delete();
} catch (IOException ie) {
 System.out.println(ie);
}
```
VBS Excelファイルのパスワードを解除し、パスワードがなければパスワードをかける

#スクリプト

```vbnet:OpenxlWorkBooks.VBS
Option Explicit
'Excel 2013 Later Japenese Version Available
'REF: 
'REF: 
'''///---定数の設定Set Enumuragion---///'''
Const PWD="PASS"
Const msoLanguageIDInstall = 1
'''///---変数の宣言---///'''
 Dim objArgs, I , strFile
 Dim objFile, objFolder,objPath,strScr
 Dim xlApp,Wb
 Dim objWShell : Set objWShell = Createobject("WScript.Shell")
 Dim FSO : Set FSO = Createobject("Scripting.FileSystemObject")

'''///---ファイル処理開始 Start Document File Conversion---///'''
Set objArgs = Wscript.Arguments
For I = 0 to objArgs.Count-1
  set objFile = FSO.GetFile(cstr(objArgs(I)))
   If Lcase(Left(FSO.GetExtensionName(objFile.Path) ,3) )="xls" Then
     Set xlApp =CreateObject("Excel.Application")
     If xlApp.Version < 14 Then xlApp.Quit: Set xlApp = Nothing:wscript.Quit
     xlApp.DisplayAlerts=False
     xlApp.Visible = True
     set wb=xlapp.WorkBooks.Open(objFile.Path,0,false,,PWd,,True,,false,false,,true,true)
     if wb.HasPassword=true then
        wb.Saveas objFile.Path,,"","",False
     else
        wb.Saveas objFile.Path,,Pwd,"",False
     End if
     wb.close
     set wb=nothing
   End If
Next
xlApp.DisplayAlerts=True
xlApp.Quit
set xlApp = Nothing
```

# 注意点

 - [VBS Wordファイルのパスワードを解除し、パスワードがなければパスワードをかける](http://qiita.com/Q11Q/items/0cb4a4f95c184cb60542)もあるのでExcel版を作りました。
 - 定数Pwdに定めたパスワードで開き、パスワードがかかっていない場合はPWdで決まったパスワードをかけます。
 - 読み取り専用推奨などもキャンセルして解除します。
 - 書き込みパスワードはナシの前提です。必要なときは改造してください。
 - Excel2013以降で作動します。

# 閉じたExcelのパスワードを判定する

[閉じているエクセルファイルがパスワードで保護されているか、を見分ける関数](http://yamav102.cocolog-nifty.com/blog/2015/08/post-e7a8.html)
本当はこれをVBSにしたかったけどちょっと複雑なので手を抜きました。
PHPのDateTimeに足し算引き算できる関数

特定のDateTimeに1年足したりとか、5時間引いたりとか。

```php
    /**
     *
     * @param DateTime $src_datetime
     * @param String $sign '+' or '-'
     * @param int $amount
     * @param String $unit 'days','hours'...
     * @return \DateTime
     */
    protected static function calc_time($src_datetime, $sign, $amount, $unit)
    {
        $dist_datetime = $src_datetime->modify($sign . $amount . ' ' . $unit);

        return $dist_datetime;
    }
```
CSS確認のためにBootstrapのTooltipを常に表示する

# TooltipのCSSを確認したいけど、、、
BootstrapのTooltipを使用している時、そのCSSを確認/編集するために、ChromeのDev Toolsを使用して内容を確認したい時があります。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/12152/a2025bd9-30d5-717a-3bab-537596c44bac.png)

しかし困ったことに、このTooltipはデフォルトではマウスオーバーした時のみ表示されるため、肝心のDev Toolsを使用しようとマウスカーソルを移動させると、Tooltipが消えてしまいます。

![4b663079ff696394bdb75119ea860835.gif](https://qiita-image-store.s3.amazonaws.com/0/12152/cf39fa3c-73d8-17d2-add5-d5b5644b2004.gif)

下の画像のようにDev toolsのhoverなどを有効にしても、Tooltipは表示されません。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/12152/0ac3a6f5-9194-0748-6522-e31f883bcb27.png)

そのため、[`trigger`を変更するなどのトリック](https://teratail.com/questions/41045)が用いられることが多いかと思います。
しかしこの記事では、オリジナルのファイルを変更することなくTooltipを常に表示させる方法を紹介します。

# Dev Toolsを使用してTooltipを常に表示する
今回紹介する方法では、Google ChromeのDev Toolsを使用します。
(基本的にはChromeの使用を前提としていますが、Firefoxでも同様の方法が使用できます)

以下に、手順を説明します。

## 1. Tooltipがセットされている要素にフォーカスを合わせる
まず、BootstrapのTooltipがセットされている要素にフォーカスを合わせます。フォーカスを合わせる方法は、以下のいずれの方法でもかまいません。

* 要素をクリックする
* Dev ToolsのSelectorを使用する (下画像を参照)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/12152/48fe4f90-4d10-9ee7-64dc-a1f7b31b4fe0.png)


## 2. `mouseenter` イベントを発生させる
BootstrapのTooltipは、デフォルトでは`mouseenter`イベントによって表示されるようになっています。そのため、Tooltipがセットされた要素に対して`mouseenter`イベントを発生させることで、Tooltipを表示させることができるようになります。これは、Dev ToolsのConsoleで、以下のコマンドを実行させることにより実現できます。

```js
$($0).trigger('mouseenter')
```

先頭の`$`はjQueryのセレクタですが、パラメータとして渡している`$0`は、[最後に選択した要素(DOM)への参照](https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3#0_-_4)を意味します。つまり、フォーカスを合わせた要素に対して、`mouseenter`イベントを発生させるということになります。

こうして、マウスオーバーしているかどうかに関わらず、Tooltipが常に表示されます。やったね！:joy:

### 補足
要は、対象の要素をセレクトする方法がわかっていればイベントを発生させることはできます。そのため`id`などがセットしてある場合、フォーカスを合わせずとも以下のようにしてイベントを発生させることができます。

```js
$('#something').trigger('mouseenter')
```
iOSアプリのエントリーポイントを調べる手順書

## 前提

- Xcode 8.2.1で確認した
- 探す対象
    - `UIApplicationDelegate`を実装した使用するクラス
    - 最初に使用する`UIViewController`系クラス
        - 必然最初に使用するStoryboardも

## 本題

### `UIApplicationDelegate`を実装した使用するクラスを探す

#### Objective-Cの場合

1. `main.m`を探す
2. `UIApplicationMain()`の引数になっているクラスを調べる
    - Xcodeでプロジェクト作成直後の場合
        - `UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]))`
        - `AppDelegate`がApplicationDelegateとして使用される

#### Swiftの場合

##### `main.swift`がない

1. プロジェクト全体に対して`@UIApplicationMain`の検索をかける
2. プロジェクト全体に対して`@main`の検索をかける
    - Deployment Target iOS 14 以降の場合

##### `main.swift`がある

1. `main.swift`を開く
2. `UIApplicationMain()`の引数になっているクラスを調べる
    - 例えば
        - `UIApplicationMain(Process.argc, Process.unsafeArgv, nil, NSStringFromClass(AppDelegate))`
        - `AppDelegate`がApplicationDelegateとして使用される

### 最初に使用する`UIViewController`系クラスを探す

#### 1. Projectを開き、Targetを調べたいアプリに指定する

- ![スクリーンショット 2017-07-28 13.31.01.png](https://qiita-image-store.s3.amazonaws.com/0/42032/3b8f32c9-0382-ae91-e9da-3a311be035c5.png)


#### 2. Build Settingsから`Packaging -> Info.plist File`の項目を確認する

- ![スクリーンショット 2017-07-28 13.21.03.png](https://qiita-image-store.s3.amazonaws.com/0/42032/df9f2905-3444-d4ab-4d45-ee1ff9bf0d8d.png)
- Xcodeでプロジェクト作成直後の場合
    - `プロジェクトディレクトリ名/Info.plist`

#### 3. Info.plistを開き`Main storyboard file base name`の項目を確認する
- ![スクリーンショット 2017-07-28 13.32.40.png](https://qiita-image-store.s3.amazonaws.com/0/42032/c46ff5a2-553d-ce4a-2c40-0b883614c8f4.png)
- Xcodeでプロジェクト作成直後の場合
    - `Main.storyboard`
- ちなみにInfo.plistを開き`Launch screen interface file base name`の項目を見ると、Launch時に使用するファイルの名前が確認できる。

#### 4. 起動時に使用されるStoryboardを開き、Initial View Controllerを探す

- ![スクリーンショット 2017-07-28 13.22.04.png](https://qiita-image-store.s3.amazonaws.com/0/42032/9eefcf30-7d13-8b5c-d119-aae8e23b2b62.png)
- Xcodeでプロジェクト作成直後の場合
    - 素のViewControllerがある

#### 5. Initial View ControllerのCustom Classを見る
- ![スクリーンショット 2017-07-28 13.22.26.png](https://qiita-image-store.s3.amazonaws.com/0/42032/50bc3691-6de8-af3b-1a42-7d7142c02d88.png)
- Xcodeでプロジェクト作成直後の場合
    - `ViewController`
Cognos のバッチをコマンドプロンプトから起動する

##概要
Cognos BI & Analyticsに、指定時刻にレポートを実行するスケジュールの機能があると思いますが、時刻指定ではなく、コマンドから呼び出して、レポート実行を行う事ができるか、と聞かれる事が結構ありますので投稿しておきます。

トリガーという機能で可能です。

##設定手順
実行したいレポートの「スケジュール」アイコンを選択します。
![001.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/52a1b63f-325e-2885-c494-9659b026a891.png)

スケジュールの設定画面で、頻度から「トリガー」タブを選択し、トリガー名を記載します。
保存形式の指定などは、通常通り下の方で行ってください。
![002.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/5575a35a-bdd5-9800-a1c0-503a5ffdebd7.png)

Cognosが導入されているノードの、以下のフォルダにトリガーを呼び出すためのコマンドがあります。
C:\Program Files\ibm\cognos\c10_64\webapps\utilities\trigger

コマンドは以下のような形式になります。※Unix系の場合、trigger.shです。
※hostname、ポート番号、username、password、LdapNameSpaceなどは環境に応じて変更下さい。
※最後のReport01PDFは、先に指定したトリガー名称です。
\> trigger.bat http://hostname:9300/p2pd/servlet/dispatch username password LdapNameSpace Report01PDF

結果、レポートがPDF保存実行されました。
![003.PNG](https://qiita-image-store.s3.amazonaws.com/0/147246/a3902dbc-6406-a00c-0096-0ec7eb9869a3.png)

ちなみにこのコマンドを実行すると、
**Trigger: Report01PDF fired successfully**
というメッセージが返ってきますが、見ての通り"fired"なので、バッチの成否自体は見ていませんので、この点はご注意下さい。

##参考
**How to fire a trigger using the Trigger.bat utility**
http://www-01.ibm.com/support/docview.wss?uid=swg21340069
ソフトウェア変更作業 > 図 > ソフトウェア間ブロック図(仮称)

- 複数のソフトウェア同士が通信をしている
- データ構造に変更が必要になった
- どのソフトウェアを変更するか知りたい

これを1枚の図で知りたい。

### ソフトウェア間ブロック図(仮称)

draw.ioで作成 (5分)
https://drive.google.com/file/d/0B-b9m8ugUmdlX1B3djFqY2p5YUk/view?usp=sharing

![2017-07-28_13h09_24.png](https://qiita-image-store.s3.amazonaws.com/0/32870/28f3d2d1-19b8-2931-85c5-aca77897dcae.png)

(各ソフトウェアの正式名称を記載して使う）

上の図から分かること

- ソフトウェア間の通信の有無
- データ構造の変更がどのソフトウェア変更作業に波及するか
- （チェックボックスを追加して）全体の作業進捗
    - データ構造変更と関連実装変更
    - 通信の実装変更
- 作業の優先順位
    - どのソフトウェアを変更するとテストしやすいか
    - 例: エミュレータVと組込みソフトBが最初、など

分からないこと

- 見積もり
    - 個々のソフトウェア変更がどれくらいの作業量になるかは詳細を把握した別資料が必要
- 変更すべき共用ファイル
    - 共用の.hファイル、.cファイルなど
    - [Visual Studio code map](https://msdn.microsoft.com/ja-jp/library/jj739835.aspx)のようなものを簡略化してA4一枚で作れないだろうか

### UMLコミュニケーション図

上記の図はUMLコミュニケーション図として描けるかもしれない。
http://www.itsenka.com/contents/development/uml/communication.html
   
接続線とは別に矢印を追加して、そこに文字を追加すると読みやすいかどうか。
 
矢印と接続線はdraw.ioでは別コンポーネントなので、ブロックを移動時に矢印が追従しない(接続線は追従する)という編集時の手間がある。

### 探していた図など

[UML図](http://www.itsenka.com/contents/development/uml/)やソフトウェアデザインに関する本を100冊程度ざっと本屋で見てみたが、自分が欲しい図は見つからなかった。
(google検索でも見つからず)。

一方で、センサー同士のブロック図は見たことがあり、それをベースとして上記の図を作った。

現在探している図は、「変更作業で実際に変更することになる.cファイル, .cppファイル、.hファイルがそれぞれのソフトウェアでどのように関連しているかが分かる」図。
マインドマップで作ってみたが、いまいち見やすいものはできなかった。
その図の目的は、共用ファイルの追加・変更をどのようにすれば将来読みやすい構造になるかを把握すること。

短時間でエッセンスだけを把握できる資料作りの技術はこれからも向上させたい。
PowerShellでGitのstash番号を指定するコマンドを実行するとエラーになる

PowerShellで `git show stash@{0}` のようなstash番号を指定するコマンドを実行するとエラーになる。

```
PS C:\repo> git show stash@{0}
fatal: ambiguous argument 'stash@': unknown revision or path not in the working tree.
Use '--' to separate paths from revisions, like this:
'git <command> [<revision>...] -- [<file>...]'
```
波括弧（ `{} `）は、PowerShellではブロックや変数表記に使われるため、コマンド引数として指定したつもりでも、PowerShell構文として解釈されてしまう。

このような場合、stash番号をダブルクォーテーションかシングルクォーテーションで囲めばよい。

```
git show "stash@{0}"
```
Ruby 2.3.0 → 2.4.1 にした時に Rails が動かなくなった.



```
 $ rbenv install 2.4.1
ruby-build: definition not found: 2.4.1

The following versions contain `2.4.1' in the name:
  rbx-2.4.1

See all available versions with `rbenv install --list'.

If the version you need is missing, try upgrading ruby-build:

  cd /Users/_user_name_/.rbenv/plugins/ruby-build && git pull && cd -
  
```



```
 $ cd /Users/_user_name_/.rbenv/plugins/ruby-build && git pull && cd -
```

rubyをビルドするruby-buildのバージョンが最新版になってなかったみたい.

```
 $ bundle install
rbenv: bundle: command not found

The `bundle' command exists in these Ruby versions:
  2.3.0
  2.4.0
```

ふむふむ、2.4.1のbundlerが入っていないみたい!

```
 $ sudo gem install bundle
```

なるほど！Railsのinstallし直さないと行けない!!

```
 $ gem install rails
 $ rails s
=> Booting Puma
=> Rails 5.0.4 application starting in development on http://localhost:3000
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.9.1 (ruby 2.4.1-p111), codename: Private Caller
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://0.0.0.0:3000
Use Ctrl-C to stop
```

動いた！！
Yahooタグマネージャー内で無理やりjQueryを使う方法

jQueryが存在しないページにおいて、[Yahooタグマネージャー](https://tagmanager.yahoo.co.jp/)内でjQuery入りのコードをどうしても動かしたいときの方法。

例えば、jQuery入りのカスタムタグを複数ページに設置しなければならないのに、
その内一部のページにのみjQueryが入っていない、そしてhtml本体の編集は諸々の事情でできない、と言ったときに有効な手段。prototype.jsとの競合も防げる。
（あるいは突然jQueryが外されたときの為の保険としても使える。）

このやり方は以下のYahooタグマネージャーの挙動を利用する。
> **jQuery**
> イベントがタグの中に構成されたとき、Yahoo!タグマネージャーはjQueryと呼ばれるJavaScriptライブラリーを使⽤し、イベントバインディングを実⾏します。
多くのサイトが既に、イベントとして追跡したいフォームやボタン操作などのインタラクティブなメニューを設置するためにjQueryを使⽤しています。
もし既にjQueryを使⽤している場合は、Yahoo!タグマネージャーはページにあるライブラリーを感知して使⽤します。もしページからjQueryライブラリーを感知できない場合は、ウェブサイトにある他のライブラリーと対⽴する可能性のないバージョンのjQueryを読み込みます（Yahoo!タグマネージャーはページにイベントが含まれる場合、感知されたときもしくは必要なときのみjQueryライブラリーを活⽤します）。
>
> [Yahoo! タグマネージャーご利⽤ガイド<上級編>](https://tagmanager.yahoo.co.jp/download/) 28ページより

#手順

サービスタグ管理画面を開き、「サービスタグを追加」を選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/103957/9dbd2f44-06fc-7f4c-9c00-c40af35a217e.png)

タグカタログからスマートカスタムタグを選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/103957/e5d1d094-d0ac-1fa2-287b-e8dc9c90d5e7.png)

サービスタグ情報内のコード中に以下のような形で即時関数を作成し、`$`変数に`BrightTag.jQuery`を割当てる。
これにより[即時関数](http://qiita.com/katsukii/items/cfe9fd968ba0db603b1e)の内部で$によりjQueryを呼び出すことができるようになる。

```html:
<script>
!function($){

  /** ここにjQuery入りの処理を記述 */
  console.log($('#id').text());

}(typeof jQuery !== 'undefined'? jQuery : BrightTag.jQuery);
</script>
```

`BrightTag.jQuery`はページにjQueryが存在しないときのみ使用することができるので、既にjQueryがあるときはそれを使うようにしている。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/103957/6a4bbcd4-9171-e039-1bf6-1102741f784e.png)

2017/07/28現在、Yahooタグマネージャーの`BrightTag.jQuery`により呼び出されるjQueryのバージョンは1.5.1である。
このため、[`on`メソッド](http://js.studio-kingdom.com/jquery/events/on)などは非対応であり、利用することができない。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/103957/1285ec2d-ed50-0d7c-c05c-4f23e2df96ab.png)

公式に推奨されているやり方ではないので、いつどのような形で動かなくなるのか分からないので注意。最後の手段。
ちゃんとjQueryを設置して利用した方が安全。

#お役立ちリンク
[prototype.js入門(1)$関数 | サイブリッジラボブログ](http://labs.cybridge.jp/programming/javascript/549.html)
Angular(2以降)で数値を桁区切りで表示させたり、小数点以下の桁数表示を指定する

htmlに渡す数値のデータを桁区切りで表示させたい場合

```
<p>{some_variable | number}</p>
```
このようにすれば、`some_variable=1192`の場合、`1,192`と表示される

また、小数点についてはnumberを使った場合デフォルトでは小数点以下3桁まで表示されるが、これを例えば2桁にしたい場合については

```
<p>{some_variable | number:'1.2-2'}</p>
```
このようにすれば、`some_variable=3.141592`の場合は`3.14`と表示される

<hr>
numberに与えるオプションについては以下のようになっている

```
number:`{表示する最小桁数(整数)}.{表示する最小桁数(小数点以下)}-{表示する最大桁数(小数点以下}`
```

なので、`some_variable=3.111`の場合に

```
<p>{some_variable | number:'1.0-2'}</p>
<p>{some_variable | number:'1.5-10'}</p>
<p>{some_variable | number:'2.0-0'}</p>
```
このようにすると結果としては以下のようになる

```
3.11
3.11100
03
```


ただしブラウザによってはnumberが適用されずに変数に入っている素の値がそのまま表示されることもあるっぽい
なので、厳密に表示させたい場合はcomponentかserviceの中で処理して、それをhtmlに渡したほうがいいかもしれない
Markup Engineerの表に出ないスキルセットについての分析

## 概要
マークアップエンジニアのスキルが人によって違いすぎると感じることありませんか。
一人でサイトを組むということに関してのアウトプットとしてはそこまでの差はないと思います。
（運用の場合はメンテナブルにしておかないと後で大変なことになるけど）
大規模サイトを一緒に作る場合など、想違った組み方をされたりすると自分の仕事が増えたりするので、先にどの程度できるのかを把握するための分析を考えました。

## スキルセット
単純に使用できる言語だけで考えると下記のことがわかっているかを知っておきたいです。

- html
- haml
- css
- sass/scss
- php
- js
- git

## 表に出ないスキルセット
その人の実際のスキルとしては、下記のようなことをどこまでできる人なのか知ると共同作業での負荷が減ります。

1. CSSのタグを知っている
2. サイトをデザインデータ通りに組みことができる
3. BEMやSMACSSなどを構造化の仕方をわかっている
4. カプセル化などの知識があり、適時使い分けることができる
5. サイト表示のスピードやSEOの知識から最適なコーディングを提案できる

## まとめ
Markup Engineerは実は深い職種です。
共同作業では上記のことがわかると、後からトラブルになることが少ないです。
それと最初にペアプロしておくと相手のスキルがわかって良いかも。

また、この後のスキルとしてはServerサイドのことも知っておいた方がよく、AWSにGitでどうやって繋ぐかなどもわかっていた方が良いです。そっちはサーバーサイドエンジニアの仕事かもしれませんが、わかっていない人だと普通にふってきます。私はもともとデザイナーですが、まるっとある程度まではわかるようになりました。

## おそらく役立つ情報 
痒いところに手が届くかもしれない記事を書いています。
フォローしてくれるとやる気になります！

- Qiita　プログラミングに関する情報はこちら
http://qiita.com/nadonado


- Twitter　日々のつぶやきはこちら
https://twitter.com/hironado
[JS初心者]#5 テスト＆デバッグ編 JavaScriptを学ぶ

# [JS初心者]#5 テスト＆デバッグ編 JavaScriptを学ぶ

## JavaScriptでのデバッグ方法

JavaScriptでこれまではconsole.log()しかdebugで使ってなかったですが、他にも色々なdebug方法があったので紹介します。

| メソッド名   |    機能 |
|:-----------------|:-----------------|
|assert() | テスト結果で異なっていた場合にメッセージ（エラー）を出力| 
|count() | 通過した回数を出力| 
|debug() |メッセージを出力 | 
|dir() | オブジェクトのプロパティと値を出力| 
|dirxml() | HTML/XML要素のXMLツリーを出力| 
|error() |メッセージ（エラー）を出力 | 
|group() | メッセージのグループ化開始| 
|groupCollapsed() |メッセージのグループ化開始（折りたたみ） | 
|groupEnd() | メッセージのグループ化終了| 
|info() | メッセージ(info)を出力| 
|log() |メッセージ(フォーマット指定可能)を出力 | 
|profile() | プロファイリング開始| 
|profileEnd() |プロファイリング終了 | 
|time() |タイマー開始 | 
|timeEnd() | タイマー終了・表示| 
|trace() | Stack Traceを出力| 
|warn() | メッセージ(warn)を出力| 

```html
<div class='hoge1'>hoge1</div>
<div class='hoge2'>hoge2</div>
<div class='hoge3'>hoge3</div>
<script>
window.onload = function() {
  var a = 'hoge';
  var b = 'fuga';
  var c = 1;
  var d = 2;
  var e = 1;

  console.assert(c == e);
  console.assert(c == d);

  console.debug('Debug Message');

  console.error('Error Message');

  console.info('Info Message');

  console.log('Log Message');
  console.log("%s Message %s Message", a, b);
  console.log(a + " Message " + b +" Message");

  console.warn('Warn Message');

  console.trace();

  console.dirxml(document.body);
  for (var i = 0; i < 3; i++) {
    console.count();
  }

  console.group('Group Message');
  console.log('Log Message in Group Message');
  console.warn('Warn Message in Group Message');
  console.groupEnd();

  console.groupCollapsed('Group Message Collapsed');
  console.log('Log Message in Group Message');
  console.warn('Warn Message in Group Message');
  console.groupEnd();

  console.time('timer');
  console.timeEnd('timer');

  console.profile();
  var div = document.querySelectorAll('div.hoge1, div.hoge2');
  for (var i = 0; i < div.length; i++) {
    window.alert(div[i].innerHTML);
  }
  console.profileEnd();

}
</script>
```

![スクリーンショット 2017-07-23 16.49.53.png](https://qiita-image-store.s3.amazonaws.com/0/52154/73fa84f0-e4b9-afe2-3ff0-7e45f1bc662d.png)

## これまでのページ

- [[JS初心者]#1 イベント編 JavaScriptを学ぶ](http://qiita.com/zwirky/items/d58922441764718a5446)
- [[JS初心者]#2 DOM編 JavaScriptを学ぶ](http://qiita.com/zwirky/items/aec423775da01070e8c9)
- [[JS初心者]#3 ウィンドウオブジェクト編 JavaScriptを学ぶ](http://qiita.com/zwirky/items/5f0f86a9db5c771e6340)
- [[JS初心者]#4 セレクタAPI編 JavaScriptを学ぶ](http://qiita.com/zwirky/items/a26a69f97852e87c0e44)
- [[JS初心者]#5 テスト＆デバッグ編 JavaScriptを学ぶ](http://qiita.com/zwirky/items/838e1b50c6afe5bdc9b3)
Docker Desktop for Macの裏で動いている仮想マシン(Linux)に直接アクセスする方法

Docker Desktop for Macは裏で仮想マシン(Linux)が動いており、そのLinux上のDockerと通信してあたかもMac上で動作しているかのように見せています。

その裏で動いている仮想マシン(Linux)に直接アクセスする方法を示します。

## 新しい接続方法 (2021.4.8 追記)

Docker Desktop for Mac の新しいバージョンではttyファイルが無くなったため、 **以前の方法** では接続ができなくなりました。
新しいバージョンでは `debug-shell.sock` 経由でアクセスする必要があるとのことです。

参考: https://gist.github.com/BretFisher/5e1a0c7bcca4c735e716abf62afad389

```sh:新しい接続方法その1
socat -d -d ~/Library/Containers/com.docker.docker/Data/debug-shell.sock pty,rawer
# 別ターミナルセッションで
screen /dev/ttys0xx
```

`ttys0xx` の部分は `socat` コマンドを実行した時に作成される `ttys004` のような数字に置き換えて実行する必要があります。


もしくは、dockerコマンド経由でアクセスすることもできるようです。

```sh:新しい接続方法その2
docker run -it --rm --privileged --pid=host alpine:edge nsenter -t 1 -m -u -n -i sh
```

こちらのほうが手軽でよいかもしれません。

## 以前の方法

ターミナルを起動して以下のコマンドを実行すると、Docker (Desktop) for Macで稼働している仮想マシンにログインできます。

```bash
screen ~/Library/Containers/com.docker.docker/Data/com.docker.driver.amd64-linux/tty
```

screen を終了する時は C-a k (controlキーを押しながら`a`を押下し、controlキーを放して`k`を押下) した後 `y` を押下します。

参考: https://forums.docker.com/t/connect-directly-to-container/18828/3
【いまさらですが】package.jsonのversion指定

package.jsonの`dependencies`や`devDependencies`に依存するパッケージを指定することができます。
いまさらですが、そのパッケージのversionの指定方法についてまとめます。



##version
指定したversionと正確に一致するバージョンがインストールされます。

```json
{
  "dependencies": {
    "foo": "1.0.0"
  }
}
```
上記の場合は、`1.0.0`のバージョンがインストールされます。


##>version
指定したversionより大きいバージョンがインストールされます。

```json
{
  "dependencies": {
    "foo": ">1.0.0"
  }
}
```
上記の場合は、`1.0.0`より大きいバージョンがインストールされます。
また、`<`、`>=`、`<=`の比較演算子を使用した場合も、その比較演算子が持つ意味通りのバージョンがインストールされます。


##version1 - version2
範囲指定を行なうことができます。
`version1 - version2`と表記すると、`>=version1 <=version2`と同じ意味となります。

```json
{
  "dependencies": {
    "foo": "1.0.1 - 1.2.0"
  }
}
```
上記の場合は、`1.1.0`以上、`1.2.0`以下のバージョンがインストールされます。



##X, ＊
X(もしくはx)や＊をワイルドカードとして使うことができます。

```js
{
  "dependencies": {
    "foo": "*",     // どんなバージョンでもOK
    "bar": "1.1.x", // >=1.1.0 and <1.2.0 
    "hoge": "1.X",  // >=1.0.0 and <2.0.0
    "huga": ""      // "*"と同じことになる = どんなバージョンでもOK
  }
}
```

4番目の`huga`パッケージのように、バージョンを何も指定しないと、`"*"`の場合と同じ意味となります。


##~version
`Tilde(チルダ)`記号を用いたときです。
versionのうち、minorバージョンが明記されている場合はpatchバージョン部分の更新ができ、そうでない場合はminorバージョンの更新がされます。
(バージョンの構成は `major.minor.patch` となっています。)

```js
{
  "dependencies": {
    "foo": "~1.1.1",  // >=1.1.1 and <1.2.0
    "bar": "~1.1",    // >=1.1.0 and <1.2.0
    "hoge": "~1"      // >=1.1.0 and <2.0.0
  }
}
```



##^version
`Caret(キャレット)`記号を用いたときです。
`major.minor.patch`のうち、一番左の0以外の数字のバージョンを更新しないような、更新が可能です。


```js
{
  "dependencies": {
    "foo": "^1.1.1",  // >=1.1.1 and <2.0.0
    "bar": "^0.1.1",    // >=0.1.1 and <0.2.0
    "hoge": "^0.0.1"      // >=0.0.1 and <0.0.2
  }
}
```



###公式サイト
- https://docs.npmjs.com/files/package.json
- https://docs.npmjs.com/misc/semver
【ターミナル】よく使うコマンド一覧

## 概要
たまにしか使わないのでいつも忘れてしまうからメモ（デザイナーのため）。
使う項目が出てきたら、再度追加していきます。

|キー  |説明  |
|---|---|
|cd |自分の位置を移動 |
|ls |内容を表示 |
|mv |ファイルを移動 |
|source |リロード・ファイルの実行 |
|curl|アップロード・ダウンロード |
|exit |終了 |
|control + c   |終了  |




## vim
ターミナルからファイルを直接触るときに使います。

### 検索
|キー  |説明  |
|---|---|
|/hogehoge |hogehogeを今の位置から下に検索 |
|?hogehoge  |hogehogeを今の位置から上に検索  |

### モードの切り替え
|キー  |説明  |
|---|---|
|a,i  |ノーマルモードから入力モードへ |
|esc, Ctrl + [, control + c  |入力モードからノーマルモードへ  |

### 終了
|キー  |説明  |
|---|---|
|ZZ  |上書き保存して終了 |
|:w  |保存  |
|q!  |保存しないで終了  |
Node-REDを認証付きでAzure WebAppsにデプロイ

# はじめに 
Node-REDのエディターに誰でもアクセスされると困るので認証付きでホストします。
まずは以下の手順にしたがってWebAppsにデプロイします。
[Azure Web AppでNode-REDを動かす手順](http://qiita.com/zuhito/items/50fc450ad9b827e98d11)

**ここで注意!**
デプロイオプションの「リポジトリのURL」は
https://github.com/jmservera/node-red-azure-webapp.git
に変更します。

#認証の設定
Node-RED自体はデプロイできたので、Web AppsのURLにジャンプするとエディターが表示されることを確認します。
次に認証画面が表示されるように設定します。

Azure PortalでNode-REDをホストしているWeb Appsのブレードの「App Service Editor (プレビュー)」を選択します。
![1.png](https://qiita-image-store.s3.amazonaws.com/0/149212/dd507c9b-ad92-3257-5810-e8b58789be09.png)

「移動」を選択すると別タブが開きます。
![2.png](https://qiita-image-store.s3.amazonaws.com/0/149212/3d380f3a-6700-b053-982c-953cb204ec16.png)

別タブで表示されたWebエディターの階層ツリーのようなところから「settings.js」を選択します。
![3.png](https://qiita-image-store.s3.amazonaws.com/0/149212/7fb237ee-1c07-867e-a573-322dc802ef6a.png)

「adminAuth」の構造体がコメントアウトされているのでコメントを外します。(コードは文末にあります。)
![4.png](https://qiita-image-store.s3.amazonaws.com/0/149212/a5f9cff9-71a8-1321-312e-7f9d498be434.png)

Azure PortalでWeb Appsを再起動します。
![5.png](https://qiita-image-store.s3.amazonaws.com/0/149212/25a34a50-fe7e-e8fd-5233-29dee550ea9d.png)

再起動完了後、先ほどと同じURLにジャンプすると認証画面が表示されます。
この説明通りに行うと
・Username : admin
・Password : password
でログインできます。
![6.png](https://qiita-image-store.s3.amazonaws.com/0/149212/1073ab3d-02ef-fbe8-ab19-8b6dbd8b5cef.png)

#認証設定について
今回設定した

``` javascript
adminAuth: {
        type: "credentials",
        users: [{
            username: "admin",
            password: "$2a$08$zZWtXTja0fB1pzD4sHCMyOCMYz2Z6dNbM6tl8sJogENOMcxWV9DN.",
            permissions: "*"
        }]
    },
```

はフルアクセス権限を持ち、*password* というパスワードの *admin* というユーザーを定義しています。
パスワードはハッシュ化されています。
ハッシュ値の生成や、その他の詳しい設定の説明は[こちら](https://nodered.jp/docs/security)にあります。
【FileMaker】まだまだ進化してほしいスクリプトエディタ

他言語にどっぷり浸かってからFileMakerに浸かったので、他言語で便利なものがFileMakerにはなくて唖然としたことがいくつかありますが、開発している中でやっぱりきになるスクリプトエディタを。

単にチマッとしたスクリプトを書いて自家用で動かすのなら別に今のままでいいと思いますが、仕事としてスクリプトを書いてメンテナンスをしていくには、統一された実装方法が必要です。

FileMakerの最近のバージョン(15とか16)にしても、関数を一文字書いたら関数の候補リストが出るとかデータビューア出ますとか言っても、そんなの他言語世界ではもう10年以上前には無料（全部ではありませんし、ゲーム開発環境では無料でないものが多数派）で開発環境が用意されていた訳で、環境の差にびっくりでした。

もちろん、FileMakerを使ってほしい層は、がっつりITに精通した開発者ではなく、どちらかというと一般的な人がちょっと勉強すれば自分専用のアプリが作れますよ、というところにフォーカスを当てているので、エディタ方面がスカスカになるのは仕方ないです。

仕方ないけど、開発をしてお金を得ている側としては、いかに効率よく仕上げるかにフォーカスしたいし、作るスクリプトの数も半端ではありません。

「スクリプトを作るときは、初期処理入りのこのスクリプトをコピってね」

なんて言う、人の判断にゆだねると、たまたま「＋」ボタンを押してスクリプトを書き始めてしまったら最後。
初期処理入りのスクリプトにまた書く（コピるとか）なんて時間の無駄です。
人的ミスを発生させないようにアプリを作っているのに、開発する側が人的ミスを生んでいるんです。

悲しいですよね〜。

各社独自のローカルルールのスクリプトの書き方を、既存のスクリプトを閲覧することで得るのではなく、自動でローカルルール入りのスクリプト（テンプレート）が出てきてくれるところまで来てほしいんです。

他言語での開発環境では、予め設定をしておくだけで、スクリプト（ソースコード）を新規作る時には、ローカルルール入りのスクリプトがボタンを押すだけで出来上がります。
これをFileMakerで実現するだけで、開発者はミスをしなくなり、あとでコードを追加する人も迷うことなくコメントを書いてくれます。

<img width="899" alt="qiita20170728.png" src="https://qiita-image-store.s3.amazonaws.com/0/60538/48782997-ff24-64f3-42bc-a16ed8774a7a.png">

せっかく、サクサクーっと独自のアプリが作れる環境で迅速に仕上がって短納期でお客様に提供できるので、もっと開発環境を整備して、メンテナンスも楽になるツールであってほしいです。

他言語開発環境では、「コア部分を作るのが好き」な人が多いので、「こんなaddon作った！」「これあると便利だよね」と、自作して公開して、みんなに使ってもらって大きく育てる、という文化があるところが多いと思いますので、一概には言えませんが、FileMaker界隈でも、スクリプト方面がニッチな要求（？）を汲んでくれて成長して使い勝手がさらによくなればいいなぁ、、、と思いながら日々仕事をしています。
【Laravel】ログインした後、固定ページに飛ばさずにログインボタンを押した画面に戻りたい。

# ことの発端（ほったん）
色々な仕事があるわけで… (^^;
通常の管理画面とか必ず認証が必要なサイトであれば、

1. 最初にログイン画面を出す。
2. ログイン処理を行う。
3. トップページに遷移する。

でいいですが、こんな仕様もあったりします。

1. ゲスト（未ログイン）でもサイトを参照できる
2. 各ページの右上とかにログインボタンがある。
3. 好きな時にログインボタンからログインできるが、ログイン後はボタンを押したページに戻りたい。
4. 認証が必要なページに行った場合は自動的にログイン画面になり、ログイン後は目的のページに遷移したい。
5. ログインすると、各画面でユーザ情報が参照できる。

とりあえず、1 と 5 は作りの問題。4 は laravel の機能でできますが、
3 は、標準機能で、そのまま実装すると / に戻ってしまいます。

# いろいろ解説
## LoginController 解析
make:auth で作られる app\Http\Controller\Auth\LoginController.php はほぼ空っぽで
中味は、フレームワークの Illuminate\Foundation\Auth\AuthenticatesUsers で実装されています。

AuthenticatesUsers を見てみると
ログインできた後は redirect()->intended($this->redirectPath()); を呼んでいます。

これは、認証フィルターでキャッチされる前にアクセスしたURLへリダイレクトさせる処理です。
このため、上の「こんな仕様」の４番は、ログイン後に目的のページにリダイレクトできるのです。

# intended 解析
intended は「意図された」という意味ですが、機能は以下です。

- セッションの 'url.intended' に値が設定されていたらそこにリダイレクトする。
- 値が設定されていなかったら '/' にリダイレクトする。

# 今回の問題と対策
認証フィルターはキャッチ前に 'url.intended' に参照元URLを設定しているわけですが、
ログイン画面が直接呼ばれた場合は、その値が設定されないため '/' 画面に固定で遷移してしまうわけです。
であれば、ログイン画面に遷移した際に 'url.intended' を設定してやれば認証フィルターでキャッチされたと同様の流れになるはずです。

# 実装
ログインフォームを表示する showLoginForm メソッドを LoginController.php にオーバーライドします。
直前画面を 'url.intended' セッションに設定します。
これで認証フィルターと同じ流れになるはずです。

```php:LoginController.php

    /**
     * Show the application's login form.
     *
     * @return \Illuminate\Http\Response
     */
    public function showLoginForm()
    {
        // ここから
        if (array_key_exists('HTTP_REFERER', $_SERVER)) {
            $path = parse_url($_SERVER['HTTP_REFERER']); // URLを分解
            if (array_key_exists('host', $path)) {
                if ($path['host'] == $_SERVER['HTTP_HOST']) { // ホスト部分が自ホストと同じ
                    session(['url.intended' => $_SERVER['HTTP_REFERER']]);
                }
            }
        }
        // ここまで追加
        return view('auth.login');
    }
```
これで、どの画面でログインボタンを押しても、元の画面に戻れるようになりました。

[- 目次 -](https://qiita.com/search?q=laravel+nekyo)
各行の一番最初にヒットした1文字だけを置換する

テキストデータを編集する時、サクラエディタやSublime Textの正規表現置換を多用しています。
今回悩んだのは「各行の一番最初にヒットした1文字だけを置換する」パターンです。
※ 試行錯誤の結果ですので、もっとスマートな方法があれば教えてください。

# 具体例

次のようなデータがあるとします。

AAABAAABBAAAA
BCCCCBCCCCCCB
DBBDBDDDDDBBB

このデータ内の `B` を置換したいと思います。
普通に検索すれば、すべての `B` がヒットします。

AAA **B** AAA **BB** AAAA
**B** CCCC **B** CCCCCC **B**
D **BB** D **B** DDDDD **BBB**

しかし、今回は「各行の一番最初にヒットした `B` だけ」を置換したいので、次のようにヒットさせたいです。

AAA **B** AAABBAAAA
**B** CCCCBCCCCCCB
D **B** BDBDDDDDBBB

## 検索条件

次の正規表現で検索します。

```
(^.*?)(B)
```

この正規表現は、2つのグループから構成されています:

1. `(^.*?)` : 行頭から次に指定する文字（ `B` ）までの間の最短の文字
1. `(B)` : 指定する文字

1つ目のグループは `$1` （または `\1` ）で、2つ目のグループは `$2` （または `\2` ）で参照することができます。

## 置換

`B` を `#` に置換したい場合、次の置換文字列を指定します。

```
$1#
```

この置換文字列は、1つ目のグループの後ろの文字を `#` に置換せよ、という意味になります。
先ほどの検索条件で指定したとおり、1つ目のグループの後ろの文字は `B` になるので、結果的に `B` が `#` に置換されます。

## 結果

AAA **#** AAABBAAAA
**#** CCCCBCCCCCCB
D **#** BDBDDDDDBBB
5分でできるSeleniumを使ったブラウザテストをまとめてみた

# はじめに

- 新卒用の入門ページとして作成しました。
- 準備から実行まで自身でやってみたところ、4分43秒でした。

# 準備

## FireFoxのインストール

```text
brew cask install firefox
```

## Selenium IDEのインストール

[アドオン](https://addons.mozilla.org/ja/firefox/addon/selenium-ide/)を追加します。

# テストケースの作成

## Selenium IDEの起動

ブラウザ上部の[ツール] > [Selenium IDE]を選択します。

## ケースの追加

- 色々と方法ありますが、今回は画面右部の[ソース]タブをクリックして、ソースを直接編集して追加していきます。
- 基本的なHTMLを知っていれば難しくはないはずです。

# これだけ覚えていけばだいたい事足りるはず

## 指定のページにアクセスする
```text
<tr>
    <td>open</td>
    <td>{ページURL}</td>
    <td></td>
</tr>
```

## ページに指定の要素が正常に出力されているか確認する

- 検索結果に１件出力されているか
- ページ上にID=page内のpタグに1件中1～1件表示があるか

```text
<tr>
    <td>open</td>
    <td>{ページURL}</td>
    <td></td>
</tr>
<tr>
    <td>assertText</td>
    <td>css=#pager &gt; p</td>
    <td>1件中1～1件表示</td>
</tr>
```

## 指定のページにリダイレクトされるかを確認する
```text
<tr>
    <td>open</td>
    <td>{ページURL}</td>
    <td></td>
</tr>
<tr>
    <td>assertEval</td>
    <td>this.page().getCurrentWindow().document.location</td>
    <td>{リダイレクト先URL}</td>
</tr>
```

# 実行

- 実行するとブラウザが勝手にテストケース通りにページアクセスをし始めるはずです。

# 経験上の注意点

- 1テストケースあたりあまり多い（１０００件以上）と、ブラウザがフリーズしてしまう場合があります。
- 場合によってはスリープをいれないと、PCやサイトのスペックによっては、Seleniumの実行が追いつかない場合があります。

# まとめ

- もっと、色々試したい方は[公式ドキュメント](http://oss.infoscience.co.jp/seleniumhq/docs/04_selenese_commands.html)をご参照ください。