OmniAICreator/Qiita-1.07M huggingface dataset:
最小構成のvue.jsの環境をvue cli使わずに構築する

## はじめに

vue cliは便利なんですが、どういう処理されてるのかがブラックボックス化されてしまうので、基本はすべてスクラッチで必要なものを書いていくスタイルで環境構築をしてみました。そのときの手順をまとめています。

## プロジェクトのディレクトリを作成する

```shell
$ mkdir simple-vue
$ cd simple-vue
```

## 最初に必要なパッケージをインストールする

```shell
$ npm init
$ npm i -D vue typescript webpack webpack-cli ts-loader
```

npm init も package.json を自分でつくればいいんですが、バージョンなど書くのが面倒なので、ここだけnpmコマンドでサボってしまいました。

インストールしたパッケージは下記です。

- vue
    - Vue.js本体です
- typescript
    - TypeScriptで書かれたファイルのコンパイラです
- webpack、webpack-cli
    - vueをブラウザで表示できるようにするためのモジュールバンドラーです
- ts-loader
    - webpackからtypescriptファイルをコンパイルします

```shell
$ ls
node_modules		package-lock.json	package.json
```

うん、シンプルでいいですね。ここから、必要なファイルなどをつくっていきます。

## webpackの設定をする

webpack.config.jsを simple-vue/直下に作成します。


```shell
$ touch webpack.config.js
$ vi webpack.config.js
```

```javascript:webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js"
  },
  resolve: {
    extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js']
  },
  module: {
    rules: [
      { test: /\.tsx?$/, loader: 'ts-loader' }
    ]
  }
}
```

webpackは3系と4系で書き方が変わるので要注意です。これは4系での書き方です。


## TypeScriptの設定をする

webpack.config.jsと同じくtsconfig.jsonを simple-vue/直下に作成します。

```shell
$ touch tsconfig.json
$ vi tsconfig.json
```

```json:tsconfig.json
{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "lib": ["dom", "es5", "es2015.promise"]
  }
}
```

## index.htmlをつくる

vue.jsのspaのindex.htmlをつくります。

```shell
$ touch index.html
$ vi index.html
```

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Simple Vue</title>
</head>
<body>
  <div id="app"></div>
  <script src="dist/bundle.js"></script>
</body>
</html>
```

## TypeScriptのエントリーファイルをつくる

TypeScriptのファイルをつくります。

```shell
$ mkdir src
$ touch src/index.ts
$ vi src/index.ts
```

```typescript:index.ts
import Vue from 'vue'

let app:Vue = new Vue({
  el: '#app',
  render: (h)=>h('p', 'Hello, world.')
});
```

## webpackを実行

webpack実行したときに、./dist配下にjsファイルを出力させるためにディレクトリをつくっておきます。

```shell
$ mkdir dist
$ $(npm bin)/webpack
Hash: de7f2490defacf8571ad
Version: webpack 4.19.1
Time: 1098ms
Built at: 2018/09/21 12:56:49
    Asset      Size  Chunks             Chunk Names
bundle.js  65.4 KiB       0  [emitted]  main
Entrypoint main = bundle.js
[0] (webpack)/buildin/global.js 489 bytes {0} [built]
[2] ./src/index.ts 124 bytes {0} [built]
    + 4 hidden modules

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
```

これで、./dist/bundle.jsがつくられます。


## 表示

ブラウザで、simple-vue/index.html を開くと、Hello Worldが出力されます。

以上です！
ツールボックスにSpire.Barcodeコントロールを追加する方法

[Spire.Barcode for .NET](https://www.e-iceblue.com/Introduce/barcode-for-net.html)は、.NET開発者用に設計されたプロのバーコードコンポーネントで、主に1Dまたは2Dバーコードの生成、読み取り、表示に使用されます。 この記事では、ツールボックスにSpire.Barcodeコントロールを追加する方法について詳しく説明します。
手順1：Visual StudioでWindowsフォームプログラムを作成し、バーコードに設定する。
![1.jpg](https://qiita-image-store.s3.amazonaws.com/0/278784/a2abb314-5c5e-c1d2-02b7-1eda5dc497f0.jpeg)
ステップ2：ツールボックスの空白部分を右クリックして、[タブの追加]を選択し、[バーコードコントロール]という名前を付けます。
![2.jpg](https://qiita-image-store.s3.amazonaws.com/0/278784/bd9c6bea-c642-f652-28c6-98a563d9583b.jpeg)
ステップ3：バーコードコントロールの空白を右クリックし、「アイテムの選択」→「.NET Frameworkコンポーネント」→「ブラウズ」を選択し、Spire.Barcodeの「Bin」フォルダに移動し、「.NET 4.0」→「Spire」を検索します。 Barcode.dll "→"開く "。
![3.jpg](https://qiita-image-store.s3.amazonaws.com/0/278784/7603c221-3264-7d1c-3958-43cd830acc50.jpeg)
ステップ4：[OK]をクリックします。 下の図に示すように、Spire.Barcodeコントロールがツールボックスに追加され、使用するForm1にドラッグアンドドロップします。
![4.jpg](https://qiita-image-store.s3.amazonaws.com/0/278784/225169bf-21dc-79f5-0481-df5382980b42.jpeg)
【ACCESS】コマンドボタンの背景色の指定ができない？

備忘録として残します。

ACCESS嫌いなので、結論しか書きません。
どぞー
#結論
*.accdb形式　＝　指定できる。
*.mdb形式　＝　指定できない。


正確に言うと、プロパティ上での値指定はできる。
ボタンのコントロールのプロパティにはばっちり`「背景色」`があるのになぜか指定しても反映できません。
バグなのかわからんけど、本当に意味わからん。


ちなみに完全余談ですけどにピクチャ指定あるじゃないですか？
あれも自分で好きなBMP形式の画像を指定できるんですけど、透過されている画像はなぜか指定できなくてエラー吐きます。
しかもそのエラーメッセージもBMP形式の画像を指定してください的な事を言ってきます。
支離滅裂。
せめてきちんとエラーメッセージ出してくれ。

以上です。
SESの営業って何してるの？

#
と、言っても書けることはあくまで私の場合なので、一般的なSES営業とは異なるかもしれません。
営業とエンジニア(SES)を兼務しています。
※案件を探す場合、自社社員に限ります（外注を自社受注案件以外に入れることはありません）。


##新規取引先の開拓
- 名刺交換会、交流会への参加
- 知り合いのエンジニアさんからの紹介（私の場合はこれが主）

##要員確保
- 取引先へメールする。とにかくメールする
- ダメもとで知り合いのエンジニアさんをあたってみる
- マッチングサイトを利用する（有料枠登録済み）

##参入先確保
- 社内で増員できる案件がないか確認（大抵これで決まる）←本人が行きたいか次第
- 取引先へメールする。とにかくメールする

※社内の案件状況は常に把握しておくこと

##面談付添い（自社要員）
###面談に同席できる場合
- 技術者が説明しきれていないアピールポイントなどフォローを入れる
- 技術者視点で聞ききれてないところを聞いたり
- 面談後に技術者には退席してもらい、面談の感触を伺う
- 面談後に技術者と面談の感触をヒアリングする

###面談に同席できない（引き渡しのみ）場合
- 面談が終わるまで待って、面談終了後合流し面談の感触とやりたいかやりたくないかをヒアリングする（案件内容も把握する）
- 同席いただいた会社の営業さんに連絡して感触を伺う（技術者とのヒアリング結果も伝えられれば伝える）

##面談同席（自社案件）
- 基本的に案件説明等は面談担当社員（案件に従事してる人）に任せる（出だしだけ、今日の面談をどう進めるか言うときもある）
- SES面談用のチェックシートを作成しているので、面談担当社員が質問しきれていない部分について追加で質問する
- 面談後、営業さんだけ残ってもらって感触を話す。単価の話とかもここでする。


##アフターケア
案件へ入れて終わりではないってことで。

- 基本的に、外注さんは社員の入ってる現場以外は入れないので、一緒に入ってる社員にお願いする（外注さんだけ入れるということはしない）
- 外注さんでも自社の季節ごとの懇親会などに招待する
- 社員が外部へ一人で入っている場合、基本的には帰社日の報告で済ませるが、帰社できないとか懸念材料がある場合は、ランチに行ったり飲みに行ったりして状況のヒアリングする
- 勤怠、稼働に関しても気にしておく
- 稼働が高い場合は営業的調整を入れる
- 休日出勤が発生している場合は代休を取れるよう調整する


##その他
- 作業報告書の確認（主に精算があるか、稼働が高すぎないかとか）
- 請求書の作成
- 定期的に飲みに行く営業さんもいる（情報交換する）
- 知り合いのエンジニアさんとも定期的に飲み行くようにする

---
といった感じです。SNSはEightしか活用してないです（活用しきれてはいないです）。
お願いしてる外注さんも少ないですし、社員に関しても人数少ない上にあまり案件がばらけていない（複数人で入っている）ので、自分もエンジニアとして外部にでつつ営業も兼務できている状態です。
営業職のみって方から見たらまだまだ足りないことがあるかもしれません。
昔担当だった営業さんは「月一で必ずランチに行くようにしているから最高でも18人くらいしか対応できない。それ以上のエンジニアを抱えてる人を私は信用しない」って言ってました（フリーランスだけ扱う会社の方でした）。このあたりは会社の方針とか、信念とかが関係してくるので一概に正しいとは言えないですけどね。そういう考えもあっていいなと思ってます。

まぁ、実際のところ、手元にあるスキルシートと流れてくる案件情報を照らし合わせてメールするだけっていう営業もいます。
他社から流れてきた案件情報を取引先に流すだけっていう営業もいます。
手を抜こうと思えばいくらでも手を抜ける職業でもあるんですよね…。


##社員募集中です
こんなSES営業がいる会社で働いてみたいなって思った方がいらっしゃったら嬉しいです。
[GA][レポート]日付ディメンションで出したユーザー数はデイリーUU

#Question
`期間指定：9/1〜9/20
ディメンション：日付
指標：ユーザー
`
という条件で抽出したときに、
表で出てくる日ごとのユーザー数は、
**その日のデイリーユニークのUU数**なのか？
**20日間の期間ユニークのUU数**なのか？（20日間の中で初回のみカウントとか）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/281922/3fd426a1-d4a5-e267-1bb0-49cf01920b7b.png)

#Answer
**その日のデイリーユニークのUU数**が正

#Verification
日の足し上げ数 > 月の数
なので、ディメンションにかかっていると思われる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/281922/a4c47c9c-e464-5d44-ae62-ad17b240594d.png)
GAE/Java8へ切り替える際に検討すること

## はじめに

GAEのJava7ランタイムのサポートが廃止されるため、Java8ランタイムへの以降が必要。
https://cloud.google.com/appengine/docs/deprecations/java7

## 参考資料

JDK 8の互換性ガイド
http://www.oracle.com/technetwork/jp/java/javase/overview/8-compatibility-guide-2156366-ja.html

Migrating from Java 7 to Java 8 Runtime
https://cloud.google.com/appengine/docs/standard/java/migrating-to-java8

## 対応方針

- 使える機能は維持したほうがスムーズ
- 使えなくなる機能は廃止または置き換えが必要

## 互換性の問題に気付く方法

1. コンパイルエラーになる
    - コンパイルが通らない箇所を修正してテストが通ればOK
2. 実行時に例外が発生パターン
    - テストコードが失敗する
    - 互換性ガイドに記載されているクラスやメソッドをGREPで検索
    - それ以外は手動テストで確認
3. 実行結果が異なるパターン
    - テストコードが失敗する
    - それ以外は手動テストで確認

## 対応箇所

- Java7からJava8で変更となる箇所の対応
- GAE/Java7からGAE/Java8で変更となる箇所の対応
- 利用しているライブラリの対応

## Java7からJava8で変更となる箇所の対応

プロジェクトで使っている機能によるため、それぞれ使っている箇所の検索、対応を行う。
例）
removeAll, retainAll
https://bugs.java.com/bugdatabase/view_bug.do?bug_id=8021591
HashSet, HashMap
https://docs.oracle.com/javase/8/docs/technotes/guides/collections/changes8.html

## GAE/Java7からGAE/Java8で変更となる箇所の対応

ガイドの通り対応する。
Migrating from Java 7 to Java 8 Runtime
https://cloud.google.com/appengine/docs/standard/java/migrating-to-java8

## 利用しているライブラリの対応

Slim3のslim3-genを利用している場合、slim3-gen-jsr269へ置き換え。
元からslim3-gen-jsr269を利用していれば問題なし。
理由：slim3-genが使っているaptがJava8で廃止となるため。
https://bugs.java.com/bugdatabase/view_bug.do?bug_id=7041249

参考：https://qiita.com/suzutatsu/items/2cc2c33b456a993890dc

## その他のハマりどころ

### ハマった例１

Cursor文字列は毎回異なる生成文字列が付くようになった。

```java:旧
assertThat(result.getEncodedCursor(), is("true:3")); // 成功
```

```java:新
java.lang.AssertionError: 
Expected: is "true:3"
     but: was "true:a38aea87-3"
    at org.hamcrest.MatcherAssert.assertThat(MatcherAssert.java:20)
    at org.hamcrest.MatcherAssert.assertThat(MatcherAssert.java:8)
```

### ハマった例２

Cursorを使うクエリは前回の検索と同じ検索条件が必要で、そのチェックが厳格になった。

キーワードの順番、または、キーワードの変更があった場合、Cursor で管理されているクエリと一致しなくなり、エラーが発生する。
従来の SDK はクエリのキーワードと Cursor が一致しているかどうかのチェックが行われていなかったが、1.9.52以降はこのチェックが入っているため、同じクエリを再開する際にはキーワードを変更しないこと。

バージョンアップ後のSDKを使って`com.google.appengine.api.search.Index.search(Query arg0)`を呼び出したところ、`Cursor is incompatible with query`が発生した。

```text:コンソールに出力されたログ
6 13, 2018 8:15:51 午前 com.google.appengine.api.search.dev.LocalSearchService decodeCursor
重大: Cursor is incompatible with query: 3c958b65-2
```
TypeScriptで使う JSON 変換用のライブラリメモ

stringをmomentにしたりしたいがJacksonみたいなdecoratorで書きたい

* json2typescript https://github.com/dhlab-basel/json2typescript
* ta-json https://github.com/edcarroll/ta-json 
* json-typescript-mapper https://github.com/jf3096/json-typescript-mapper
* class-transformer https://github.com/typestack/class-transformer
【C++】ラムダ式を紐解く

ラムダ式と同じことをラムダ式を使わずに書いてみる。

まずはラムダを使った例

```C++
#include <iostream>
#include <string>
#include <vector>
#include <algorithm>

//vector の中から find_int を見つける
void test(std::vector<int>& v, int find_int)
{
    auto find = std::find_if(v.begin(), v.end(), [&](int i) { return i == find_int; });  //ここでfind_intへの参照をキャプチャしている
    
    if (find != v.end()) {
        std::cout << find_int << " FOUND!!\n";
    }
    else {
        std::cout << find_int << " NOT FOUND!!\n";
    }
}

int main()
{
    std::vector<int> v{1,2,3,4,5};
    test(v, 3);
    test(v, 9);
}
```

これを、ラムダを使わずに書くと・・・

```C++
void test2(std::vector<int>& v, int find_int)
{
    struct Pred {
        int& find_int;                  //これがキャプチャ！
        bool operator() (int i) {
            return i == find_int;
        }
    };
    Pred pred {find_int};
    auto find = std::find_if(v.begin(), v.end(), pred);
    
    if (find != v.end()) {
        std::cout << find_int << " FOUND!!\n";
    }
    else {
        std::cout << find_int << " NOT FOUND!!\n";
    }
}
```

つまりラムダ式とは、その場で無名の構造体を作ってoperator()を実装し、関数オブジェクトとしてインスタンス化したもの。

キャプチャされた変数は、関数オブジェクト内にある別のメモリ領域に保持される。
よって、参照やポインタでキャプチャしたものは、その関数オブジェクトが実際に呼ばれる際に、無効になっている可能性があるので注意が必要。

上記の例では、std::find_ifが即座に関数オブジェクトを呼ぶので問題ないが、タスクキューのような後から呼ばれるパターンでは、注意。（参照だから安全ということもない・・・！）



実行できるサンプル：
http://cpp.sh/94hzk
ReactでCSSを使う

# ReactでのCSS記述
React単体ではスタイリング機能は持っていません。そのため何らかのプラグインだったりを導入して実現させるのですが、個人的に一番しっくりきたCSS-Modulesについて解説します。

スタイル記述についての個人的要望は以下の通り。

* CSSは開発環境下では別ファイルで管理したい
* プラグイン独自のCSS記述ではなく通常の書き方で記述したい
* SCSSが使いたい

この要件を満たす書き方が出来るのがCSS-Modulesでした。

## webpackの記述
CSS-Modulesを組み込むにはwebpackを使ってCSSの読み込み方を少し変更する必要があります。
といってもReact自体がWebpackで書き出していると思いますのでそれほど問題はないと思います。
具体的なソースは以下の通り。

```webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options :{
              modules : true
            }
          },
          'postcss-loader','sass-loader'
        ],
      },
      /* ... 省略 ... */
    ]
  }
}
```

上記ソースは該当部分だけ書き出しています。
通常のSASS組み込みとstyle-loaderでソース内に含める記述に加えて、css-loaderのオプションで modules : true にすればOKです。

## CSS-Modulesの記述方法

CSS側は一般的なCSS（SCSS）記述でOKです。

```style.scss
.news{
  background-color:#eee;
  border:1px solid #aaa;
  padding:10px;

  li{
    font-size:2.0rem;
    border-bottom:1px solid #aaa;
    
    &.new{
      &:before{
        content:'new!';
        display:inline-block;
        background-color:#3333aa;
        border-radius:5px;
        padding:3px;
      }
    }
  }
}
```

Reactはimportでstyleファイルを読み込み、render内のclassName属性に{インポート名.クラス名}の形で記述します。

```newsComponent.jsx
import React from 'react'
import ReactDOM from "react-dom"

import styles from './style.scss'

class NewsComponent extends React.Component {
  render(){
    return(
      <div className={styles.news}>
        <ul>
          <li className={styles.new}>お知らせ3</li>
          <li>お知らせ2</li>
          <li>お知らせ1</li>
        </ul>
      </div>
    )
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<NewsComponent />, rootElement);

```

これだけです。めちゃくちゃ簡単でコードもシンプル！

### クラスの複数指定
複数クラスを割り当てたい場合は、単純にテンプレートリテラルの記述で対応できます。

こんな感じ。↓

```multi.jsx
<div className={`${styles.item} ${styles.new}`}>
```

## レンダリング結果

実際これをレンダリングすると、header内の<style></style>タグにCSSが記述され、body内のclassNameのところにはクラス名が記述されます。
ただしクラス名にはランダム文字列っぽい名称が割り当てられ、それによってCSSの名前空間が確保されるようです。
逆に言えば、***CSSを読み込んだコンポーネント内でのみ、そのクラス名のCSS記述は有効になります。***ただしHTMLタグ要素に直接指定しているスタイルはすべて有効となるので、上位コンポーネントにてreset.CSSのようなものを読み込めば、そのルールは下層コンポーネントにも反映されます。

書き出されるソースはこんな感じ↓

```index.html
<div class="eqhQs48VWk9seAoZQCOHV">
  <ul>
    <li class="LLe7eCuHxMDShinsdvEWu">お知らせ3</li>
    <li>お知らせ2</li>
    <li>お知らせ1</li>
  </ul>
</div>
```

## まとめ
CSS-ModulesはClassNameにクラスを指定するだけで、CSS自体の書き方も独自ルールが不要なことから、導入の閾値はかなり低いのではないでしょうか。また読み込んだファイルの範囲で名前空間が確保されるので、コンポーネントを超えたスタイルの不具合が発生しにくく通常のHTMLの感覚に近い扱い方が出来ます。
HTMLコーディング上がりの方や、デザイナーと分業で構築される方にはオススメです。
mattermost CLI利用

# mattermost CLI利用

gitlab付属のmattermostに対してシステムコンソールで操作できないものがあり、ちょっとはまる。
CLI使おうと思ったが、やりかたがわからない。というか、mattermost単独でインストールしても良かったような…。

## mattermost Ver
Version: 3.7.0

## 対象コンテナを調査する。
docker-compose.ymlがあるディレクトリで。

```
[root]# docker-compose ps
           Name                          Command               State               Ports             
----------------------------------------------------------------------------------------------------
dev_crowd_1       /bin/tini -- /home/crowd/d ...   Up      8095/tcp                      
dev_db_1          docker-entrypoint.sh postgres    Up      5432/tcp                      
dev_gitlab_1      /assets/wrapper                  Up      22/tcp, 443/tcp, 80/tcp       
dev_jenkins_1     /bin/tini -- /usr/local/bi ...   Up      50000/tcp, 8080/tcp           
dev_ldap_1        /container/tool/run              Up      0.0.0.0:389->389/tcp, 636/tcp 
dev_nginx_1       /bin/sh -c echo "REVERSE_P ...   Up      0.0.0.0:80->80/tcp            
dev_registry_1    /entrypoint.sh /etc/docker ...   Up      5000/tcp                      
```
## dockerコンテナの中に入る。

```
[root]# docker exec -it dev_gitlab_1 bash
root@dev:/# su - mattermost
$ bash
mattermost@dev:~$
```
## あとはこれ。
https://qiita.com/emudome/items/4bd40b16481fb8c7f10e

## 余談
CLIコマンド自体は↓なんだけど、流し読みだとconfig.jsonを見落としてた。

https://docs.mattermost.com/administration/command-line-tools.html
Rails5/webpacker/ECMAScriptメモ

rails5でwebpackerを使ったりviewに直接jsを書いたりしてます。どこでどの仕様までのjsを使っていいのかいつも迷うので纏めておくもの

## ECMAScript

- 実装であるjavascriptに対し、言語仕様を指してECMAScriptと呼ぶ
http://kangax.github.io/compat-table/es6/

### es5
- IE11でもほぼ動く、安心
- babelで変換する先

### es6(=es2015)
- IE以外ならbabelしなくてもだいたい動く
- ```let```や```const```が使える
- ```{ }```でスコープが切れる（スコープのためだけに即時関数いちいち書かなくていい）
- アロー関数が書ける```() => {}```
- ```for (const elem of array)```
- ```Promise```
- テンプレート文字列（文字列リテラルでの式展開）
- ```array.map()/array.reduce()```などpythonスタイルの配列処理

### es2016(es7と呼んではいけない)
- ```array.includes()```
- 冪乗演算子

### es2017
- ```await/async```
- ```object.values()```

## webpackerデフォルト設定でどの仕様まで使ってよいか
https://github.com/rails/webpacker/blob/master/docs/es6.md

- ほとんどの場合にうまく動く設定にしてあるよ！babel-preset-envにまかせてるよ！```@babel/polyfill```も入ってるから使いたければ使ってね！とのこと
    - babel-preset-envは何も設定しないとlatestになるので、現時点だとbabel-preset-es2017 + babel-preset-es2016 + babel-preset-es2015になる
        - 要はes2017まで使っていい。実際にincludesを使ってIE11で動いたので少なくともes2016は大丈夫っぽい

## rails5のアセットパイプラインはどこまでやってくれるのか
- 残念ながらes6以降からes5へのコンパイルはrails5でもデフォルトでは面倒みてくれないようです
- hamlやassets/javascriptsに書くjsはes5で書くかjqueryに全部任せるように気を付けましょう
プログラミング開発者はキャッシュに気をつけよ！！

プログラミング開発者はキャッシュに気をつけましょう。


うわあああ！！！なんでできへんねや！！！！

ってなったとき、だいたい原因はキャッシュでした。。。

コード修正したのになぜ更新されないんだ？？
そう思ったらキャッシュを疑いましょう！


# google chromeのキャッシュ1

ローカル開発環境で、コード修正したのに更新されない場合、
google chromeのキャッシュを消しましょう。

これを参考にキャッシュを削除してみてください

http://www-creators.com/archives/504



# chromeのキャッシュ2

検証モードにしたときに、キャッシュを削除できます。
僕は、ローカル開発環境ではできていたのに、ステージング環境にアプライするときになぜか更新されていませんでした。

それは検証機能のキャッシュで解決できます！


networkにdisableキャッシュっていうのがあります。

http://www.takunoko.com/blog/chrome%E3%81%AE%E6%A4%9C%E8%A8%BC%E9%96%8B%E7%99%BA%E8%80%85%E3%82%BF%E3%83%96%E3%81%A7%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5%E3%82%92%E7%84%A1%E5%8A%B9%E3%81%AB%E3%81%99%E3%82%8B%E3%80%82/

これで解決できます。



以上！！！キャッシュに気をつけよ！でした！
ElectronでOSC通信

ElectronでOSC通信（送受信）を実装する必要だったので実装内容のメモ。


### 開発環境
Windows 10
Electron 3.0.2


### 実装内容
1. OSC通信には、[node-osc](https://github.com/MylesBorins/node-osc)を使用。
2. OSC通信行うには、メインプロセス側で通信を行う必要がある。（レンダープロセスから直接OSC通信はできない）
3. レンダープロセスでOSC信号を受け渡しするには、メインプロセスとレンダープラセス間を通信するIPC通信を利用する必要がある。
4. IPC通信とOSC通信を値の橋渡しは、メインプロセスでおこなう。


### 通信の流れ

```
Electron ( メインプロセス ← IPC通信 → レンダープロセス )
    ↑
OSC通信 
    ↓　
外部アプリ
```


### 実装サンプル
ElectronでOSC通信を行うサンプル。
サンプルコード [Github](https://github.com/yoshihitofujiwara/Sample_Electron_OSC)
アプリの使い方 [README](https://github.com/yoshihitofujiwara/Sample_Electron_OSC/blob/master/README.md)
[windows版](https://github.com/yoshihitofujiwara/Sample_Electron_OSC/tree/master/package/OSC-win32-x64) / [mac版](https://github.com/yoshihitofujiwara/Sample_Electron_OSC/tree/master/package/OSC-darwin-x64)

1. 上記のアプリのpackageフォルダ内にアプリデータあるので、OSに合わせたアプリを設置。
2. IP/Portの設定ファイルの更新
3. アプリを立ち上げると、最初に受信ログ部分に設定ファイル内容が出力されます。
4. あとは、IP/PORTがつながっていれば、相互にメッセージが送受信できます。
※ OSC通信では、アドレスとint型のパラメーターしか渡していません。
アプリに応じて受け渡しする値を調整する際は、下記Dev環境をカスタムして使用してください。


### 実装コード概要
#### メインプロセス
###### 送信
レンダープロセスから受け取った値を、 文字列をバッファに変換して送信しています。

##### 受信
最初にレンダープロセスからIPC通信を行い、
レンダープロセスとメインプロセスが相互に通信できるように設定する。
OSC通信で送られてきた、バッファオブジェクトを文字列に変換し、
IPC通信でそのままレンダープロセスに送る。


#### レンダープロセス
レンダープロセスでは、IPC通信を介してOSC通信を送受信しています。

###### 送信メッセージ
テキストエリアに入力した文字列をICP通信でメインプロセスに送られます。

###### OSC受信ログ
メインプロセス側で行ったOSC通信のメッセージを
IPC通信を介して受け取りテキストエリアに出力しています。


### その他
サンプルはOSC通信で扱う値は、アドレスと数値のみですがアプリに応じて値を変えて最適化すれば扱いやすくなります。
Python で Yahoo!ローカルサーチAPI をコールするサンプルコード

## ソースコード

```python
import json
import socket
import urllib.error
import urllib.request

# ローカルサーチ
class LocalSearch:

    def __init__(self, appid):
        self.appid = appid

    def search(self, query):
        baseurl = 'https://map.yahooapis.jp/search/local/V1/localSearch'
        params = {
            'query': query,
            'output': 'json',
            'results': '3',
            'sort': 'score',
        }
        url = '{}?{}'.format(baseurl, urllib.parse.urlencode(params))
        headers = {
            'User-Agent': 'Yahoo AppID: {0}'.format(self.appid),
        }
        req = urllib.request.Request(url, headers=headers)
        with urllib.request.urlopen(req, timeout=3) as res:
            body = res.read()
            return self.__json2pois(body)

    def __json2pois(self, data):
        ydf = json.loads(data)
        features = ydf['Feature']
        result = []
        for f in features:
            if f['Geometry']['Type'] == 'point':
                ll = f['Geometry']['Coordinates'].split(',')
                poi = {'name':f['Name'], 'lat': ll[1], 'lon': ll[0]}
                result.append(poi)
        return result

try:            
    appid = 'YOUR APPLICATION ID' # アプリケーションIDを指定
    query = '東京タワー' 
    pois = LocalSearch(appid).search(query)
    for poi in pois:
        print(poi['name'])
        print(' {lat}, {lon}'.format(lat=poi['lat'], lon=poi['lon']))
        print()
except socket.timeout as err:
    print('timeout: {0}'.format(err))
except urllib.error.URLError as err:
    print('URLError: {0}'.format(err))
except Exception as err:
    print('Exception: {0}'.format(err))
```

## 実行結果

```
$ python --version
Python 3.7.0b3

$ python localsearch.py 
宇明屋東京タワー店
 35.658591944444, 139.745463333333

東京タワー
 34.729707500000, 136.519455833333

マザー牧場ＣＡＦＥ東京タワー店
 35.658591944444, 139.745463333333
```

## 参考資料

- [YOLP\(地図\):Yahoo\!ローカルサーチAPI \- Yahoo\!デベロッパーネットワーク](https://developer.yahoo.co.jp/webapi/map/openlocalplatform/v1/localsearch.html)
- [Yahoo\!デベロッパーネットワーク:WebAPIの使い方\(GETリクエスト\) \- Yahoo\!デベロッパーネットワーク](https://developer.yahoo.co.jp/appendix/request/rest/get.html)
- [19\.2\. json — JSON エンコーダおよびデコーダ — Python 3\.6\.5 ドキュメント](https://docs.python.jp/3/library/json.html)
- [21\.6\. urllib\.request — URL を開くための拡張可能なライブラリ — Python 3\.6\.5 ドキュメント](https://docs.python.jp/3/library/urllib.request.html)
- [21\.9\. urllib\.error — urllib\.request が投げる例外 — Python 3\.6\.5 ドキュメント](https://docs.python.jp/3/library/urllib.error.html)
- [18\.1\. socket — 低水準ネットワークインターフェイス — Python 3\.6\.5 ドキュメント](https://docs.python.jp/3/library/socket.html)
sendmail 再送関連についてまとめ

# 設定ファイルについて
まずは設定について簡単にまとめておきます。

### sendmail.cf
sendmailの設定ファイル。sendmail.mcで定義したものをm4コマンドを使ってsendmail.cfへ変換する。

### sendmail.mc
sendmail.cfを作成するためのテンプレートファイル。このファイルで定義した設定をm4コマンドを使ってsendmail.cfを作成する。

| 設定項目   | 内容                       |
|---        |---                        |
| VERSIONID | sendmail.cfのバージョン指定   |
| OSTYPE    | OSの種類                   |
| DOMAIN    | サイト固有の設定（通常はgeneric）|
| Dw        | メールサーバーのホスト名        |
| Dm        | メールサーバーが属するドメイン    |
| MAILER    | メーラーの定義               |
| define    | パラメーターの定義            |
| FEATURE   | 拡張機能の定義 　　　　           |

### 設定ファイル作成方法
sendmail.mcに記載した内容を`m4`コマンドで変換します。

```bash:変換方法
$ sudo m4 sendmail.mc > sendmail.cf
```

# キューの確認

溜まったキューを確認する方法です。

```bash:確認
$ mailq
```

溜まっているメールは/var/spool/mqueueにあります。

```bash:確認
$ ls -l /var/spool/mqueue
```

ここで確認できるファイル名はメールのQIDと一致します。
なので特定のキューを消したい場合はそのQIDのファイルを削除すればOKです。

```bash:削除
$ rm /var/spool/mqueue/<QID>
```

# 再送間隔

再送間隔は`sendmail.mc`または`/etc/sysconfig/sendmail`で設定することができます。

```conf:sendmail.mc
define(`confMIN_QUEUE_AGE', `30m')dnl
define(`confTO_HOSTSTATUS', `30m')dnl
```

**・confMIN_QUEUE_AGE**
メール送信ができずに/var/spool/mqueue/に溜まった場合の再送信間隔。
単位はm(分)、h(時)、d(日)の３種類。デフォルトは0。

**・confTO_HOSTSTATUS**
配信失敗した際の再試行間隔。
デフォルトは30分。

この2つで再送間隔を設定できるみたいです。

また、パラメータを設定していると、queueに入って一定期間経過したメールは、再送を諦めて返送されます。

```conf:sendmail.mc
define(`confTO_QUEUERETURN', `5d')dnl
```

**・confTO_QUEUERETURN**
キューに溜め込んだメールの保存期間。
指定した期間を過ぎるとメールは削除され、送信者へその旨報告。
デフォルトは5日。

```conf:/etc/sysconfig/sendmail
QUEUE=1h
```


# キューの再送

`sendmail`コマンドに`-q`オプションをつけて実行。
`-v`も追加することで詳細表示。

```bash:再送
$ sendmail -q -v
```

| オプション | 説明            |
|---      |---             |
| -q      | メッセージ処理間隔 |
| -v      | 詳細モード       |

強制再送を行いたい場合は以下のコマンドを実行します。

```bash:再送
$ sendmail -q -v -OTimeout.queuereturn=0 -OTimeout.connect=5s -OTimeout.initial=5s -OTimeout.aconnect=5s -OTimeout.mail=5s -OTimeout.helo=5s -OTimeout.rcpt=5s -OTimeout.command=5s
```
`-O`オプションを利用することで`sendmail.mc`内のパラメータとは違う値で実行できます。
ついでなので`sendmail.mc`でのパラメータと一緒に表にしておきました。

| sendmail.mc           | -Oオプション=(デフォルト)    | 説明           |
|---                    |---                     |---            |
| confTO_QUEUERETURN    | Timeout.queuereturn=5d | 配送エラーでメッセージを返すまでの期間|
| confTO_CONNECT        | Timeout.connect=0      | 初回接続が完了するまでの待ち時間 |
| confTO_INITIAL        | Timeout.initial=5m     | 初回接続タイムアウト待ち時間 |
| confTO_ACONNECT       | Timeout.aconnect=0     | TCPコネクト待ち時間を5秒 |
| confTO_HELO           | Timeout.helo=5m        | HELOまたはELOコマンドのレスポンス待ち時間 |
| confTO_RCPT           | Timeout.rcpt=1h        | RCPTコマンドのタイムアウト待ち時間 |
| confTO_COMMAND        | Timeout.command=1h     | SMTPコマンドのタイムアウト待ち時間 |

**参考**
http://www.rinneza.com/junya/tech/solaris8_x86/sendmail_8.12.10_cf_setup.html
https://www.sendmail.org/~ca/email/doc8.12/cf/m4/tweaking_config.html
https://www.nic.ad.jp/ja/materials/iw/1997/proceedings/tutorial3/6sendmail-adm.pdf
https://tanaka.sakura.ad.jp/home/sendmail/intro-3.html
Visual Studio Codeを使ったPython and Djangoのチュートリアル

# この記事は
PythonのWEBフレームワーク "Django" でWEBアプリを開発するときに、
PythonとJavaScriptを行ったり来たりするので、

> Shell開いたり、Chromeデバッガ開いたり、
> あっちいったり、こっちいったり、
> こんな効率悪いことしてたら、寿命が尽きてしまう。

そう感じておりました。

そこで、Visual Studio Code を使うとスッキリできそう。

[Python and Django Tutorial in Visual Studio Code](https://code.visualstudio.com/docs/python/tutorial-django)

というメモなのでした。

PyCharmでも同じようなことできるんでしょうかね？？
調べてみたいと思います。
作業環境を前職と比べてみた。


こんにちは。streampackチームのtsuchiです。
先月からJoinしました。Splatoonが大好きです。

# はじめに

初回の記事ということで、普段の作業環境において、
前職との違いが色々あったので、自分なりにまとめてみたいと思います。

何か参考になる部分があれば幸いです。


# 目次

[0. 私について](#0-私について)
[1. 作業端末OS](#1-作業端末os)
[2. 社内メール](#2-社内メール)
[3. 社外メッセージ](#3-社外メッセージ)
[4. ファイル共有](#4-ファイル共有)
[5. パスワード管理](#5-パスワード管理)
[6. タスク管理](#6-タスク管理)
[7. 構成図](#7-構成図)

## 0. 私について
**【前職】某SIerのインフラ担当**
**【現在】動画配信基盤チームのサポートエンジニア**

前職では顧客常駐として、大手SIerで勤務していました。
後述しますが、基本的に**Microsoft Office製品**を使うのがベースの作業環境でした。

## 1. 作業端末OS
<img width="639" alt="スクリーンショット 2018-09-21 1.10.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/277934/5d53adf0-d336-55fe-5bf6-20ca23218811.png">
**【前職】Windows**
**【現在】Mac**

現在の会社では、**使いたいOSを自由に選べます**。
自分のチーム内ではみんなMacだったので、Windowsから鞍替えしました。

これまでWindowsしか使ってきていなかったのですが、
**Macの使いやすさに惚れ惚れしている**今日この頃です。

## 2. 社内メール
<img width="493" alt="スクリーンショット 2018-09-20 13.42.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/277934/c03e07cc-cca5-8c36-a74b-8fab9890db3f.png">

**【前職】Microsoft Outlook**
**【現在】slack**

利便性向上を実感するトップ1はこれ。**本当に快適。**
このためだけに転職してよかったと思える程にslackを愛しています。

**「お疲れ様です」**と打つ頻度が極端に少なくなったし、
「誰々をTOに、関係者をCCに…」とか考えないで済むのは、かなり**ストレスフリー**。

## 3. 社外メッセージ
<img width="688" alt="スクリーンショット 2018-09-21 0.12.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/277934/ad23711d-2f2d-f4e0-f037-41f81eeb9ac4.png">

**【前職】Microsoft Outlook**
**【現在】slack, Chatworkなど**

前職では、Outlook一択でした。
現職では、代表的なのは上の2つ。あと**Gmail**も使っています。
（利用するツールはお客さん次第なところがあります）

ただ、slackにしてもChatworkにしても、
**Franz**で一括して管理することができるので、便利です。
<img width="511" alt="スクリーンショット 2018-09-21 0.21.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/277934/542b844b-4d36-f012-d512-008371bf8265.png">

## 4. ファイル共有
<img width="457" alt="スクリーンショット 2018-09-21 0.40.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/277934/c3932928-5ff9-14a2-8acf-7ec5540a55e2.png">

**【前職】ファイルサーバ** 
**【現在】box**


名前は聞いたことがあった**box**、使ってみるととても便利でした。

自分だけが閲覧・編集できるフォルダをbox上に作成するのはもちろん、
限られた人に特定の権限を渡して管理することもできるので、非常に使いやすいです。

また、ファイルの種類や更新日付で検索ができたり、
フォルダごと、ファイルごとの権限設定も可能です。

## 5. パスワード管理
<img width="463" alt="スクリーンショット 2018-09-21 0.41.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/277934/b12461cf-2a06-43b1-38ed-72a0447be50a.png">

**【前職】特になし（自己管理）**
**【現在】PingID**

現職では、業務で使用する諸々のサイトが**シングルサインオン**で利用でき、
わざわざパスワードを管理してログインする必要がなくなりました。

ただ、個人のスマホを**多要素認証（MFA）**として利用しているので、
スマホを紛失したり、家に忘れると仕事にならないので注意が必要。

## 6. タスク管理
<img width="470" alt="スクリーンショット 2018-09-21 0.46.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/277934/3be34084-0372-dbc1-a981-a3bed6c4876e.png">

**【前職】Excel**
**【現在】backlog**

案件管理や設定変更、エラー調査をする場合も、
backlogで課題を立てて、そこにまとめていくという文化があります。

各課題は**「担当者」**や**「キーワード」**で検索が可能のため、あとで参照する際も便利です。
また、インスタンスなどの環境情報もbacklogの**Wiki**で管理しています。

## 7. 構成図
<img width="700" alt="スクリーンショット 2018-09-21 1.00.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/277934/0ab9e3cd-55d2-4310-2b5e-24c9254b6824.png">

**【前職】PowerPoint, Visio**
**【現在】Cacoo, draw.ioなど**

前職ではAWSの構成図を書く機会がありましたが、
ここでもOffice製品を使って書くのが定番でした。

現在の会社では特に決まりはないですが、色んなテンプレートが用意されていたり
他の人が描いた構成図もあって参考にしやすいので、私は**Cacoo**をよく使っています。

# おわりに

全体として、ストレスなく作業できる環境が整っているなと感じています。

今後も記事を書いていくので、よろしくお願いします。
jQuery UIのDialogを使い、確認ダイアログをいい感じに実装する

# 課題
フォームを登録する前など、何らかの処理を行う前に確認ダイアログを出したいケースはよくあります。
その際、jQuery UIのDialogを使い実装すると大体以下のような感じになると思います。

```javascript:register.js

	//登録ボタン押下時
	$("#register").click(function () {
            //確認ダイアログを表示
            $('#confirm').dialog('open');
	});

	//確認ダイアログ
	$("#confirm").dialog({
		buttons : {
			"OK" : function() {
    				//バリデーションなどの登録前処理
                     
    				//フォームを送信
    				$('form').submit();
			},
			"キャンセル" : function() {
				//キャンセル時処理
			}
		}
	});
```
しかしこのような実装方法だと、登録前処理や登録後処理を登録ボタン押下時のイベント下に記述できず、確認ダイアログのイベント下に登録処理を記述しなくてはならないため見通しが悪くなってしまいます。
また引数なども素直に渡すことができないため工夫する必要がありました。

# 対応策
jQuery.Deferredを使い以下のような拡張プラグインを作成しました。

```javascript:jquery-ui-dialog-extend.js
(function($) {
	$.confirm_jquery_ui_dialog = function(options) {
		var setting = $.extend({
			msg: '',
			dialog_id: '',
			ok_word: 'OK',
			cancel_word: 'キャンセル',
		}, options||{});

		if(setting.dialog_id == ''){
			throw "do not set dialog_id";
		}

		var d = new $.Deferred;
		var buttons = [
			{
				text: setting.ok_word,//OKボタン押下時
				click: function() {
					$(this).dialog('close');
					d.resolve();
				}
			},
			{
				text: setting.cancel_word,//キャンセルボタン押下時
				click: function() {
					$(this).dialog('close');
					d.reject();
				}
			},

		];

		$(setting.dialog_id).dialog({
			buttons : buttons,
		});

		$(setting.dialog_id).text(setting.msg);
		$(setting.dialog_id).dialog('open');
		return d.promise();
	};
})(jQuery);

```

```javascript:register.js
        //登録ボタン押下時
	$("#register").click(function () {
		$.confirm_jquery_ui_dialog({
			msg: "登録しますか？",
			dialog_id: "#confirm",
		}).done(function(){
				//バリデーションなどの登録前処理
                     
				//フォームを送信
				$('form').submit();
		}).fail(function(e){
			//キャンセル時処理
		}).always(function(){
			//OKボタン押下時とキャンセルボタン押下時の共通処理
		});
	});
```
こうすることで登録ボタン押下時のイベント下に素直に登録処理を記述できるので、見通しがよくスッキリとした形になりました。
以上参考までに。
yamllint で特定のルールを抑止する方法

# 状況
Ansible向けに作成したYamlのスタイルチェックにyamllintを使っています。
文字数制限でErrorが出てしまいますが、使いやすさの問題からErrorを無視したいと思い調べたのでメモします。
※エラー出てしまうと、自動テストとかに組み込みづらいので

# 抑止前（エラー発生時）
```
$ yamllint misc.yaml
misc.yaml
  3:81      error    line too long (163 > 80 characters)  (line-length)
  4:81      error    line too long (165 > 80 characters)  (line-length)
  5:81      error    line too long (177 > 80 characters)  (line-length)
  6:81      error    line too long (161 > 80 characters)  (line-length)
  7:81      error    line too long (161 > 80 characters)  (line-length)
  8:81      error    line too long (161 > 80 characters)  (line-length)
  9:81      error    line too long (163 > 80 characters)  (line-length)
  10:81     error    line too long (165 > 80 characters)  (line-length)
  11:81     error    line too long (177 > 80 characters)  (line-length)
  12:81     error    line too long (161 > 80 characters)  (line-length)
  13:81     error    line too long (161 > 80 characters)  (line-length)
  14:81     error    line too long (161 > 80 characters)  (line-length)


Process finished with exit code 1
```

# 抑止方法
ファイルの上部に以下を追記

```
---
# yamllint disable rule:line-length
```

ファイル全体でrule:`<抑止したいルール>`に記載したルールを抑止します
※`disable-line`を利用すると特定行の抑止も可能


# 抑止後

```
$ yamllint misc.yaml

Process finished with exit code 0
```


# 参考
以下を参照しました

https://yamllint.readthedocs.io/en/latest/disable_with_comments.html#
[sequelize] hasManyのforeignKey, targetKey, sourceKeyについて

## foreignKey
belongsToを定義しているテーブルのカラム名を両テーブルのforeignKeyに定義する

## targetKey
hasManyを定義しているテーブルのカラム名をbolongsToのtargetKeyに定義する
※hasManyを定義しているテーブルのカラム名を変更している場合（例: field: `****`）は**変更後**の名前を定義する

## sourceKey
hasManyを定義しているテーブルのカラム名をhasManyのsorceKeyに定義する
※hasManyを定義しているテーブルのカラム名を変更している場合（例: field: `****`）は**変更前**の名前を定義する
最近触ったgit branchだけを表示するlbranchというgitのサブコマンドを作りました

##はじめに
"最近作ったあのbranchなんて名前だったかなー"みたいなことありませんか? 私は割とあります :innocent: 

というわけで, そういうときに便利な,最近触ったbranchだけを一覧で表示してくれる [git-lbranch](https://github.com/shuheiktgw/git-lbranch) というgitのサブコマンドを作りました.

##使い方
[案内](#インストール方法)に沿ってインストールしたら

```bash
git lbranch
```

するだけで,以下のように直近(デフォルトは5日以内)にコミットがあったブランチの一覧を表示します.


```bash
$ git lbranch
  master
  test-branch-first
  test-branch-second
```

##オプション

### `--days value, -d value`
lbranchに遡ってほしい日付を選択してください. デフォルトでは5日以内にコミットがあったブランチの一覧を表示します.

`ex: git lbranch --days 10`

### `--through -t`
branchに関する詳細な説明を表示します. 具体的にはbranch名に加えて, 最新のコミットのハッシュ値とコミットの日付を表示します.

`ex: git lbranch --through`

##インストール方法

MacOSユーザーであれば以下のようにHomebrewからインストールできます.

```bash 
$ brew tap shuheiktgw/git-lbranch
$ brew install git-lbranch
```

また,Golangをお使いでしたら,以下のように `go get` 経由でもインストールできます.

```bash
$ go get -u github.com/shuheiktgw/git-lbranch
```

それ以外の場合は[リリースページ](https://github.com/shuheiktgw/git-lbranch/releases) から最新のバイナリーをダウンロードし,パスを通してください :pray: 

##その他
[git-lbranch](https://github.com/shuheiktgw/git-lbranch) はGolangを使って書きましたが, gitは実行可能ファイルに `git-` というプリフィックスがついていると,勝手にgitのサブコマンドとして認識してくれるんですね. 便利.
revert -mオプション!!!


あ、やべ。変なとこにコミットマージしちゃった。って時に、やり直したいなぁ、と。
ざっくりと、やり直したいところまで戻れるという事は聞いていたのでやってみた。
そこで行き詰った「このコミットを取り消す」。

私はGitをコマンド入力ではなく、Source Treeを使って操作しています。

![名称未設定-1.png](https://qiita-image-store.s3.amazonaws.com/0/269200/87c67e7a-491d-0ef0-d1e6-f85bad294ba7.png)

戻りたいコミットの所で右クリック（Windowsの場合）して「このコミットを打消し...」を選択・実行するだけなんだけどもなんとエラーが！

<pre>
error: Commit xxxxx is a merge but no -m option was given.
fatal: revert failed
</pre>

（スクショ撮るの忘れた）

mオプションが指定されてませんよ。してください。みたいな内容。
mオプション？revert -mオプションて何や？という事で調査。

どうやらRevert（既存のコミットを元に戻すためのコマンド）をつかってコマンド入力でやるしかないらしい（..ざわ..ざわ...）

<pre>
$ git revert -m 1 xxxxx
</pre>

無事、戻る事ができました:clap:。（もちろん誰かに見てもらいながら:baby:）

-m オプションとはメインラインの事で、通常はそちらを指定しておけば大丈夫との事。

`git show`コマンドや`git log`コマンドで親の数字が確認できる（知らなかった）。
<pre>
$ git show
commit xxxxx (HEAD -> ブランチ, origin/ブランチ)
Merge: aaaaa bbbbb
Author: 自分
Date:   Thu Dec 10 16:19:52 2020 +0900
</pre>


とはいえ、1とか2のどっちを指定するのが正しいのかは、分かっていないと大惨事になりかねないので、基本的なブランチだとかコミットだとかの概念に戻り復習。
こちらのサイトが分かりやすかったです（https://backlog.com/ja/git-tutorial/stepup/stepup7_2.html）
Source Treeを使うと視覚的にできてしまって、なかなか基本的な部分で「分かった気になる」のでダメですよね。反省:persevere:

弊社はブランチ並行して行う事が多く、毎回「面倒な事起こるなよぉ～・・・」と祈りながら進めています。

Gitって説明だけ聞いてると、何が便利なんだろう？むしろめんどくさいんじゃん、って思ってた。
けど、履歴が終えたり大量のデータを軽く保存できたり、同時並行の作業ができたり。
使い方によっては便利ですね。
「バカとハサミは使いよう」って母さんと婆っちゃが言ってた。

####コミットを元に戻すのに参考にさせていただいたサイト
- https://blog.toshimaru.net/git-revert-mainline/
- http://blog.dalt.me/827
- https://backlog.com/ja/git-tutorial/stepup/stepup7_2.html
substr() で length指定するとき、元の文字列長チェックは不要

こんなコードを見かけた。

```php
define('STR_LENGTH_MAX', 255);
$str = getSomeLongString(); //何か長いかもしれない文字列を返す関数
if (strlen($str) > STR_LENGTH_MAX){
    $str = substr($str, 0, STR_LENGTH_MAX);
}
```

実装した人はおそらく素朴に「規定の文字列長以上だったら切り詰める」を実装したのだろう。

もちろんこれでも動くが、そもそもこんなことしなくても

`substr()` の第3引数で指定した文字列長より、第1引数で渡した文字列が短い場合  
`substr()` は元の文字列をそのまま帰すので、この実装は単純に

```php
define('STR_LENGTH_MAX', 255);
$str = substr(getSomeLongString(), 0, STR_LENGTH_MAX);
```
でOK。

念のため、実証コードを掲載。

```
$ cat test.php
<?php
error_reporting(E_ALL);

$str = 'abcdefghijklmn';
for ($i = 1;$i<20;$i++){
    echo substr($str,0,$i), PHP_EOL;
}

$ php test.php 
a
ab
abc
abcd
abcde
abcdef
abcdefg
abcdefgh
abcdefghi
abcdefghij
abcdefghijk
abcdefghijkl
abcdefghijklm
abcdefghijklmn
abcdefghijklmn
abcdefghijklmn
abcdefghijklmn
abcdefghijklmn
abcdefghijklmn
```

`$str` の文字列の長さより、`substr()` の第3引数のほうが大きい場合
`$str` そのものが返却されていることがわかる。
エラーも特におきない。
PivotalTracker — 見積りポイント設定を変更する

## Project Settings > Iterations and Velocity > Point Scale

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/0c2574ac-3a08-87ff-246d-749af4bf08b2.png)

## Links

- [Estimating stories](https://www.pivotaltracker.com/help/articles/estimating_stories/)








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Windows環境でのAnacondaのアップデート

## はじめに

Windows 環境での Anaconda や 各種パッケージのアップデート手順となります。

## 前提

- Windows 10 x64 での手順となります。

- Anaconda Prompt を管理者で実行して作業を行います。

> Anaconda Prompt を管理者で実行しないと、アップデートなどの最中にUACのダイアログが何度も表示される場合があります。

- Anacondaの下記パスが環境変数PATHに設定されていること。
    - C:\インストールパス\Anaconda3
    - C:\インストールパス\Anaconda3\Scripts

> 環境変数パスが正しく設定されていない場合、"block should really be the equivalent of"のようなエラーが発生する場合があります。

## Anaconda本体をアップデートする

```
> conda update -n base conda
```

## Anacondaのすべてのパッケージをアップデートする

```
> conda update --all
```

> アップデート対象のパッケージが一覧表示されます。アップデートする場合は(y)を入力して続行します。

## Anacondaの特定のパッケージをアップデートする

```
> conda update パッケージ名
```

## Anacondaの特定のパッケージを検索する

```
> conda search パッケージ名
```

## AnacondaのPythonをアップデートする

```
> conda update python
```

## Anacondaに特定のバージョンのPythonをインストールする

```
> conda install python=3.7
```
Jetson Xavier に Timeshift をインストールした

# Nvidia Jetson Xavier に Timeshift をインストールした
## Jetson Xavierの環境を構築しているところですが試行錯誤するためある程度安定した時点でのバックアップをとることが目的です。
sudo apt install timeshift では Arm64 の Xavier 上で動かないためソースからビルドしてみました。
timeshift 18.9.1, 18.9 で確認。

参考:
　http://shibafu3.hatenablog.com/entry/2018/02/15/124959
　https://github.com/teejee2008/timeshift

```shell
# 依存ライブラリなど
$ sudo apt install libgtk-3-dev valac libgee-0.8-dev libvte-2.91-dev libjson-glib-dev rsync checkinstall
# git clone or download zip file from https://github.com/teejee2008/timeshift
$ cd timeshift-18.9.1
$ make
$ sudo checkinstall
```
[Laravel5.7]controllerでのmiddleware指定方法(部分指定など)

Laravel5系で、controllerにmiddlewareを指定する方法をまとめた。
例としてauthミドルウェアを使う。

# コントローラー全体への指定
コントローラー全体にミドルウェアを指定する場合、このようにコントローラーのコンストラクタに書く。

```php
class UserController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth');
    }
```

# コントローラー一部への指定
onlyで指定したコントローラーメソッドにだけミドルウェアを設定できる。
自分の意思で追加するまでミドルウェアが設定されて欲しく無い場合や、見てわかりやすいなどといった利点がある。

```php
class UserController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
            $this->middleware('auth')
                 ->only(['create', 'store', 'edit', 'update', 'destroy']);
    }
}
```

# コントローラー一部だけ指定しない
exceptで指定したコントローラーメソッドにはミドルウェアが設定されない。
authなどの、場合によって非公開にしたい情報が漏れる可能性がある場合、指定漏れが無いように安全側に倒したい。
その場合、exceptを使った方が良い。

```php
class UserController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
            $this->middleware('auth')
                 ->except(['index', 'show']);
    }
}
```

# まとめ
- (指定なし): 全体を指定したい場合
- only: 一部を指定したい、且つ自分で明確に指定するまで設定されて欲しくないミドルウェアを使う場合
- except: 一部を指定したい、且つ指定漏れがあってはいけないミドルウェア(特にauth)を使う場合

以上の3パターンを場合分けも含めて紹介。
ObserviumをCentos6.7にインストール

# 概要
ObserviumをCentos6.7にインストール

## 構成
|Software    |Version   |
|:-----------|---------:|
|CentOS      |6.7       |
|Apache      |2.2       |
|PHP         |7.1       |
|MySQL       |5.1.73    |
|Observium CE|18.9.9420 |

## 参考手順
http://windowslinuxbsd.blogspot.com/2014/07/observium-installation-in-centos-6-rhel.html

# 手順
- リポジトリを追加

```
# yum install -y epel-release
# rpm -ivh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm
```

- Apache、fping、MySQL、SNMPをインストール

```
# yum install -y httpd mysql-server fping net-snmp net-snmp-utils
```

- PHP7.1をインストール

```
# yum install -y --enablerepo=remi,remi-php71  php php-mysql php-pear
```

- MySQLを起動

```
# service mysqld start
# chkconfig mysqld on
```

- Observium用データベースを作成

```
# mysql -uroot
mysql> CREATE DATABASE observium;
mysql> GRANT ALL PRIVILEGES ON observium.* TO 'observium'@'localhost' IDENTIFIED BY 'observium';
mysql> exit
```

- /optに移動

```
# cd /opt
```

- Observiumパッケージをダウンロード

```
# wget http://www.observium.org/observium-community-latest.tar.gz
# tar zxvf observium-community-latest.tar.gz
```

- /opt/observiumに移動

```
# cd /opt/observium
```

- config.phpをコピー

```
# cp config.php.default config.php
```

- config.phpを編集

```
# vi config.php
```
```config.php
$config['db_user']      = 'observium';    # CHANGE
$config['db_pass']      = 'observium';    # CHANGE

$config['fping'] = "/usr/sbin/fping";     # ADD
$config['login_remember_me'] = FALSE;     # ADD
```

- 初期データをデータベースに挿入

```
# ./discovery.php -u
```

- RRD用のディレクトリを作成

```
# mkdir /opt/observium/rrd
# chown apache:apache /opt/observium/rrd
```

- Apacheのログ用のディレクトリを作成

```
# mkdir /opt/observium/logs
# chown apache:apache /opt/observium/logs
```

- httpd.confを編集

```
# vi /etc/httpd/conf/httpd.conf
```
```/etc/httpd/conf/httpd.conf
#ServerName www.example.com:80
ServerName localhost:80                   # ADD

### ADD ###
<VirtualHost *:80>
    DocumentRoot /opt/observium/html/
    ServerName observium.domain.com
    CustomLog /opt/observium/logs/access_log combined
    ErrorLog /opt/observium/logs/error_log
    <Directory "/opt/observium/html/">
        AllowOverride All
        Options FollowSymLinks MultiViews
    </Directory>
</VirtualHost>
### ADD ###
```

- Apacheを起動

```
# service httpd start
# chkconfig httpd on
```

- Observiumの初期ユーザを追加

```
# ./adduser.php observium observium 10
```

- 監視対象デバイスを追加

```
# ./add_device.php centos60 public v2c
```

- 追加した監視対象デバイスを読み込み

```
# ./discovery.php -h all
```

- 監視対象デバイスから情報を取得

```
# ./poller.php -h all
```

- cron設定

```
# vi /etc/cron.d/observium
```
```/etc/cron.d/observium
33 */6 * * * root /opt/observium/discovery.php -h all >> /dev/null 2>&1
*/5 * * * * root /opt/observium/discovery.php -h new >> /dev/null 2>&1
*/5 * * * * root /opt/observium/poller-wrapper.py 1 >> /dev/null 2>&1
```

- cronをリロード

```
# service crond reload
```

- Observiumにアクセス
	- http://localhost/
	- Username `observium`
	- Password `observium`
自分用: tscのtarget optionで排出されるClass形式纏め

## はじめに
npmパッケージで提供されたes6形式のclassをextendsした際にハマったのでこの辺を整理してみようと思う

## ソースファイル

```typescript
class Base {
}

class SubClass extends Base {
}
```

## target es6 && esnext && es2018
```javascript
class Base {
}
class SubClass extends Base {
}
```

## target es5
```javascript
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var Base = /** @class */ (function () {
    function Base() {
    }
    return Base;
}());
var SubClass = /** @class */ (function (_super) {
    __extends(SubClass, _super);
    function SubClass() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    return SubClass;
}(Base));
```

## target es3
```javascript
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var Base = /** @class */ (function () {
    function Base() {
    }
    return Base;
}());
var SubClass = /** @class */ (function (_super) {
    __extends(SubClass, _super);
    function SubClass() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    return SubClass;
}(Base));
```

## 結論
targetがes6以上で指定されているソースのclass(npm_modules配下の奴とか)を継承した場合、こちらのtargetがes5以下の設定だと完全に死ぬっぽい。
classを関数として呼ぼうとしましたってエラーで。
無償キャンペーン未実施のPCでもWindows10にアップグレードできた

家族の個人使用のために、比較的程度の良い Thinkpad X230/X240 の中古ノートを２台買いました。
SSDに換装して快適に使えているのですが、OSは全てWindows7 64bitでしたので、Windows10へアップグレードするために情報を集めていたらこんなサイトを見つけました。

- [無償キャンペーン未実施PCで2018年Windows10にアップグレードできるか](https://www.ikt-s.com/2018-windows10upgrade/) 

Windows10無償アップグレード キャンペーンは、2016年7月29日で終了したのですが、上記サイトの情報によれば、2018年2月現在まだ Microsoftのダウンロードサイトからアップ・グレードインストールプログラムがダウンロードできるようです。

## キャンペーン中に作っておいたメディアでもアップグレードに成功
じつは、こんなこともあろうかと考えて、無償アップグレードキャンペーン期間中にアップグレードインストールメディアをUSBで作っておいたので、今回それを使って試してみた処、すんなりとアップグレードが完了しました。

このアップ・グレードに伴う認証処理は、オンラインではなくてデジタル認証という仕組みです。詳しくはわからないのですが、インストールメディアさえあればいつでもアップ・グレードできそうです。

Microsoftの下記のダウンロードページは、いつ消えてしまうかわからないので、今後のためにも今すぐダウンロードしてメディアに保存しておいたほうが良さそうです。

- [Windows 10 のディスク イメージ (ISO ファイル) のダウンロード](https://www.microsoft.com/ja-jp/software-download/windows10ISO) 

## インストールメディアの種類
アップグレード用のダウンロードファイルは、インストールされているOSの種類によって変わるみたいです。

- Homeエディション か Proエディション かで異なる
- 32bit か 64bit かで異なる

今後は、CD/DVDドライブのないPCが多くなるので、インストールメディアはUSBがいいと思います。知り合いのいろんな人の面倒を見て上げるのなら４種類のメディアを作っておくのがいいです。

## クリーンインストールするために
まだ自分では実施して確認できていないのですが、いきなりクリーンインストールすると認証されないという情報です。クリーンインストールするには、一度上書きアップグレードしてから再度クリーンインストールするとできるとの情報もあるので機会があれば試してみようと思います。
Webpacker3.5.5にアップデートしたら、webpacker:compile で NODE_ENVが反映されない

# 環境・前提
- webpacker 3.5.5
- React
- rails

今関わっているプロジェクトでは、以下のような感じで`DefinePlugin`と`NODE_ENV`を使って、APIのURLなどの環境毎に異なるものを設定しています。

```
let apiUrl = '';
switch(env.NODE_ENV) {
  case 'staging':
    apiUrl = 'http://staging.com';
    break;
  case 'production':
    apiUrl = 'http://production.com';
    break;
  default:
    apiUrl = 'http://localhost:3000';
    break;
}

module.exports = {
  ・・・
  plugins: [
    new webpack.DefinePlugin({
      'apiUrl': JSON.stringify(apiUrl),
    }),
  ],
  ・・・
};
```

# webpacker3.5.5にアップデートしてハマったこと

```
bundle exec rake webpacker:compile NODE_ENV=staging
```

を実行しても `NODE_ENV=production` で実行されてしまう。

これでは、stagingでもapiのURLが本番用になってしまうので、動作確認できない・・・

# 原因
ソースコードを見ると常に`production`で実行されるようです・・・。

↓v3.5.5の`webpacker:compile`

```
namespace :webpacker do
  desc "Compile JavaScript packs using webpack for production with digests"
  task compile: ["webpacker:verify_install", :environment] do
    Webpacker.with_node_env("production") do
      ensure_log_goes_to_stdout do
        if Webpacker.compile
          # Successful compilation!
        else
          # Failed compilation
          exit!
        end
      end
    end
  end
end
```
https://github.com/rails/webpacker/blob/v3.5.5/lib/tasks/webpacker/compile.rake#L21

# 対策
とりあえず、`RAILS_ENV`の値を使うようにして逃げた。

`env.NODE_ENV` を `env.RAILS_ENV` に変更。
シンボリックリンクを作る権限がないPCで.vimrcをgit管理したかった

### mklinkする権限がない

私は(勤め先)のwin機にも.vimrcを同期させようと思って以下のコマンドを打ち込みました。

```
cd C:\Users\kaisya
git clone git@hugefugapiyomoge/dotfiles
mklink C:\Users\kaisya\.vimrc C:\Users\kaisya\dotfiles\.vimrc
```

```出力
この操作を実行するのに十分な特権がありません。
```

ｵ゛ｫ゛ﾝ゛……

### 仕方がないので

これだけのために上司に管理者パスワードを求めるのも面倒です。
なのでこうしました。

```$HOME\.vimrc
source C:\\Users\\kaisya\\dotfiles\.vimrc
```

誰か他にいい方法をご存知でしたら教えてください。
PHPUnitの実行をさっさと終わらせたいとき

よくあることですが、PHPUnitでテストを書いている場合、テストケースが増えてくると徐々に実行速度が気になってきます。テストの量が増え、完了するまでの時間が単純に増えていくためです。

そんなとき、とにかくテストをさっさと終わらせるためのtipsです。

## テストする量を減らす
ローカルで開発するときは毎回すべてのテストを実行する必要はないかと思います。そんなときはテストする量自体を減らしましょう。

`filter` や `group` オプションを使用し特定のテストだけ実行すると、実行テストの総量が減り完了までの時間は短くなります。

参考: [PHPUnit で指定したのテストのみを実行する](https://qiita.com/msysyamamoto/items/0c4dc0f0999a30d86154)

また、PhpStormなどのエディタの機能を使えば特定のテストを実行することがエディタ上で可能になります。

参考: [Testing with PHPUnit](https://www.jetbrains.com/help/phpstorm/enabling-php-unit-support.html)

## カバレッジを計測しない

`filter` や `group` の他に、実行時間を短縮する可能性のあるオプションが一つあります。

`--no-coverage` オプションです。

開発環境やCI環境であれば、デバッグ用途であったりコードカバレッジの計測のため`XDEBUG` がインストールされていると思います。このとき、コードカバレッジの計測がデフォルトで有効になっていると、毎回カバレッジの計測を行うため時間がかかります。
下記の例だと、オプションがない場合 **5分**、オプションを付けた場合 **35秒** 程度。8倍以上速度に差があることがわかります。

**オプションがない場合**
![領域のキャプチャ_20_waku.png](https://qiita-image-store.s3.amazonaws.com/0/37036/36e569a9-a422-b6e0-53b7-3f406482d8c8.png)

**オプションがある場合**
![領域のキャプチャ_21_waku.png](https://qiita-image-store.s3.amazonaws.com/0/37036/1eef8bd3-eee8-2bcf-1bcd-db28e849fdec.png)

デフォルトの変更をしたいけれどやんごとなき事情ですぐに変更できない、けれどテストをさっさと終わらせたい、といった場合は、 `--no-coverage` オプションをつけるとテストが捗ります。

## CIで工夫してリリースを早める
また、CIでカバレッジを計測して [Coveralls](https://coveralls.io/) や [Codecov](https://codecov.io/) などにレポートを送信している場合、本番/STG環境へのリリース時はカバレッジを計測しないという手段が取れると、リリースまでの時間を短縮することが可能になります。

CircleCIであれば、特定ブランチで行うテスト用の処理を切り替えてやれば可能になります。

参考
- [Configuring CircleCI#branches](https://circleci.com/docs/2.0/configuration-reference/#branches)
- [Configuring CircleCI#filters](https://circleci.com/docs/2.0/configuration-reference/#filters-1)

この方法を取ると、同じ環境でもオプションの有無だけで速度を改善するということが可能になるため、諸々の管理コストが省けるようになると思います。(他に良い方法があれば追記・修正したいと思います)

## おわりに
テストの時間を短縮する方法は他に、並列化したり、 `XDEBUG` を必要なときだけ有効にするなどあると思います。組織によって環境は異なってくるかと思うので、必要に応じて良い方法を取捨選択できるとよいかなと思います。

他参考
- [PHPUnitのコードカバレッジが遅いからってあきらめずに、並列実行ためしてみる](https://qiita.com/imunew/items/691d0f8cd7a484a77ca1)
- [CircleCIでmasterブランチのみカバレッジを測るようにphpunitを実行する](https://polidog.jp/2015/06/28/circleci/)