OmniAICreator/Qiita-1.07M huggingface dataset:
横スクロール カード素材 css

横スクロールしたいやん。
で、カード的なデザインにしたいやん。
cssでできるやん。

コピペで動くよ。


```sytle.css

    /* 横スクロールカード素材 */
    .card-horizontal-list {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding: 0 0 0 10px;
    }

    .card-horizontal-list li {
        /* 横スクロール用 */
        display: inline-block;
    }

    .card-horizontal-list li > a {
        margin: 5px;
        width: 150px;
        background: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 5px #ccc;
        display: inline-block;
    }
    .card-horizontal-list li > a > img {
        border-radius: 5px 5px 0 0;
        /*max-width: 100%;*/
        /*height: auto;*/

        object-fit: cover;
        height: 102px !important;
        width: 150px !important;
    }
    .card-horizontal-list li > a > div {
        padding: 15px;
    }
    .card-horizontal-list li > a > div > h3 {
        font-size: 12px;
        text-align: center;
        margin-top: 0;
        padding-top: 0;
        color: #333;
    }
    .card-horizontal-list li > a > div > p {
        color: #777;
        font-size: 10px;
        line-height: 1.5;
        word-wrap: break-word;
        white-space: normal;
    }

```


カードhtml


```


        <ul class="card-horizontal-list">
            <li>
                <a v-touch="$root.linkTo('/contact-show/')">
                    <img src="http://webcreatorbox.com/sample/images/bear.jpg">
                    <div>
                        <h3>Web</h3>
                        <p>ラーメン</p>
                    </div>
                </a>
            </li>
            <li>
                <a v-touch="$root.linkTo('/contact-show/')">
                    <img src="http://webcreatorbox.com/sample/images/bear.jpg">
                    <div>
                        <h3>Web</h3>
                        <p>ラーメン</p>
                    </div>
                </a>
            </li>
            <li>

                <a v-touch="$root.linkTo('/contact-show/')">
                    <img src="http://webcreatorbox.com/sample/images/bear.jpg">
                    <div>
                        <h3>Web</h3>
                        <p>ラーメン</p>
                    </div>
                </a>

            </li>
        </ul>



```
Nuxt.jsでSlackにメッセージをPOSTする際にCORSを回避する

# 背景

[クロスオリジンリソースを共有するには？
](https://ja.nuxtjs.org/faq/http-proxy/)など公式ドキュメントには色々書いてあるが、POSTする際に手間取った。

## 結論

HeaderからContent-Typeを削除してPOSTする。

## 対応

```js
const url = 'https://hooks.slack.com/services/{YOUR_WEBHOOK}'
const data = {
  "text": "hoge",
}
this.$axios.post(url, JSON.stringify(data), {
  withCredentials: false,
  transformRequest: [(data, headers) => {
    delete headers.post["Content-Type"]
    return data
  }]
})
```

## 参考

[CORS issue using axios with Slack API
](https://stackoverflow.com/questions/41042786/cors-issue-using-axios-with-slack-api)そのまんま載せているだけです。
Watson APIを使うための前準備: サービスの作成と資格情報の取得

IBMが提供するAIサービスWatson。RESTのAPIでネットワークに繋がる環境ならどこからでも呼び出して使うことができます。IBM Cloud以外で動くアプリからももちろん呼び出し可能です。ここではWatson APIを使うための前準備としてサービスの作成方法と資格情報の取得方法を説明します。

#0. 前提はIBM Cloudのアカウントがあること
前提は有効なIBM Cloudのアカウントがあることです。
お持ちでないかたは [こちら](https://cloud.ibm.com/registration?cm_mmc=Email_Events-_-Developer_Innovation-_-WW_WW-_-nishito\tokyo\japan&cm_mmca1=000019RS&cm_mmca2=10004805&cm_mmca3=M99938765&cvosrc=email.Events.M99938765&cvo_campaign=000019RS
) から取得お願いします。
取得方法の動画はこちらです: https://youtu.be/Krn1jQ4iy_s


#1. Watson サービスの作成
まずは使いたいWatsonサービスをIBM Cloudから作成しましょう!

###1.1: IBM Cloudにログイン
https://cloud.ibm.com よりIBM Cloudにログインします。

###1.2: 「カタログ」をクリック　（「リソースの作成」をクリックでもOK）
ダッシュボードが表示されるので、上部のメニューにある「カタログ」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/5211fea7-efa9-878d-2327-c246297f2047.png)



###1.3: 左側のメニューから「サービス」→カテゴリ「AI/Machine Lerning」 をクリックし、使いたいWatsonのサービスをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/adbae643-a8d7-6048-4ebf-4856107b8955.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/f22f4233-9d7f-29d0-fb3c-b6865e5afd13.png)



または検索フィルターで使いたいサービス名を入れて検索してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/70489811-1cb9-6f9e-69bb-e2131bec0f3a.png)

ここではLanguage Translatorを選択しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/29f1c995-aea8-fb6d-d589-5b10b649e05a.png)




###1.4: 「リージョンの選択」は指定や好みがあれば変更します。
**Lite Planが選択可能なサービスのみ無料で使用可能ですので、作成をクリックする前に利用プランを確認するようにしてください。**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/99406095-39bb-3431-e52f-190c4c824c71.png)

##1.5: 最後に「作成」をクリックします。

#2. サービスの資格情報取得
APIで使用する際に使う、サービスの資格情報

- API KEY(API鍵)
- URL

はIBM CloudのWeb画面から取得できます。
尚、アプリ別など個別に権限を設定して作成も可能です（ここでは説明しません）。

###2.1 ダッシュボードを表⽰(左上のIBM Cloudロゴをクリック)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/28e60d4c-47ba-7c04-9004-545d7942020e.png)

###2.2 リソースの要約の「サービス」をクリックし、表⽰されたリソースリストからから資格情報を取得したいWatson のサービス名をクリック

以下は「Language Translator」のサービスを選択する例です：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/feb2850b-bb62-6e9e-360e-2622bab1d54a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/3b9836ce-1cec-ec40-45d8-219d065a0069.png)


###2.3 左のメニューの「管理」（通常最初はこの画面の場合が多い）をクリックすると、資格情報にAPI鍵(API KEYのこと)とURLが表示される。
必要に応じてコピーアイコン（右側の四角アイコン)をクリックしてコピーして使用する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294516/37670d1d-3f0f-ab0b-bec0-624c3a619d97.png)


以上です。

APIの詳細はhttps://cloud.ibm.com/docs?tab=api-docs&category=ai から確認できます。いろいろな言語のサンプルがのっているのでぜひお試しください！
世界一雑なNode.jsの説明

# Node.jsとは

Node.jsは、**npmパッケージの実行環境**です。
とりあえず、:point_up:これだけ覚えておきましょう[^node]。


[^node]: 実際にはJavaScriptの実行環境ですが、実質的にNode.js向けに作成されたソフトウェアはほぼnpmパッケージとなります

## 以下、世界一雑な補足

### 「実行環境」って?

次の表を見れば、「実行環境」がどんなものか分かると思います。

| 対象(実行したいもの) | 実行環境                         |
|:--------------------|:--------------------------------|
| MP3ファイル         | 音楽再生アプリケーション[^mplayer] |
| Javaアプリケーション | Java実行環境[^jre]               |
| npmパッケージ       | Node.js :point_left:             |

[^jre]: [Java Runtime Environment](https://ja.wikipedia.org/wiki/Java_Runtime_Environment)
[^mplayer]: iTunesやWindows Media Playerなど


### 「npmパッケージ」って?
Node Package Manager[^npm]で管理されているソフトウェアが、「npmパッケージ」です[^package]。
「npmパッケージ」は、`npm install 〇〇`コマンドで導入することができます。
以下に著名な「npmパッケージ」を挙げておきます。

 - [webpack](https://webpack.js.org/)
    - https://www.npmjs.com/package/webpack
 - [Babel](https://babeljs.io/)
    - https://www.npmjs.com/package/Babel
 - [TypeScript](https://www.typescriptlang.org/)
    - https://www.npmjs.com/package/typescript

おそらく、多くの人がNode.jsを学ぶきっかけとなったものだと思います。

[^npm]: [npm](https://ja.wikipedia.org/wiki/Npm_(%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E7%AE%A1%E7%90%86%E3%83%84%E3%83%BC%E3%83%AB))
[^package]: ソフトウェア(ツールやライブラリ、モジュール等)に管理用のメタ情報(package.js)を付与すると、Node Package Managerで管理できるようになります

# この記事を書いた動機
初心者がNode.jsを学び始めると、まず以下のような文言に出会うことでしょう。

- Google Chromeで使われているJavaScriptエンジン(V8)
- サーバサイドでプログラムを実行
- スケーラブルなネットワークアプリケーションを構築できる
- ノンブロッキングI/O処理
- イベントドリブン、シングルスレッド

しかし、ただ必要に駆られてNode.jsを使うことになった初心者にとって、上記は余り必要な情報ではありません[^tool]。また、この分野は粗悪な記事もネット上に散見され、これらのキーワードを散りばめただけのイイカゲンな内容となっているものも多々あります。
そこで、**とりあえず既存のnpmパッケージを使うだけならば、そんなにややこしいことを気にしなくても良い**ということを知って貰い、イイカゲンな記事に翻弄される人が一人でも減ることを願って、この記事を作成しました。

[^tool]: 特に上記のようなツール系(コマンドとして使用する)パッケージの場合、これらの情報は不要なノイズでしかありません。中でも「サーバサイドでプログラムを実行」は顕著に混乱を招きます。
Ubuntu 18.04にElasticsearch 7.3を導入する(aptコマンドでインストール)

参考
https://www.elastic.co/guide/en/elasticsearch/reference/current/deb.html

1ノード構成でElasticsearchクラスターを構築する時の導入手順のメモです。
以下、rootユーザーで実行しています。

# 1. Elasticsearchのインストール

```
wget -qO - https://artifacts.elastic.co/GPG-KEY-elasticsearch | apt-key add -
echo "deb https://artifacts.elastic.co/packages/7.x/apt stable main" | tee -a /etc/apt/sources.list.d/elastic-7.x.list
apt update
apt install elasticsearch
```

# 2. jvm.optionsの編集
-XmsXXと-XmxXXのパラメータを、OSメモリの半分に値に変更します(以下は4GBの場合)。

```/etc/elasticsearch/jvm.options
-Xms2g
-Xmx2g
```

# 3. elasticsearch.ymlの編集
以下のパラメーターを追加します。

```/etc/elasticsearch/elasticsearch.yml
network.host: XX.XX.XX.XX # 自身のIPアドレス
discovery.type: single-node
```

# 4. 起動
```
systemctl start elasticsearch
```

# 5. 動作確認
```
curl http://XX.XX.XX.XX(network.hostに設定したIPアドレス):9200
{
  "name" : "cloudclt1",
  "cluster_name" : "elasticsearch",
  "cluster_uuid" : "U1IGG-fURIWGXH1EcWYWtA",
  "version" : {
    "number" : "7.3.0",
    "build_flavor" : "default",
    "build_type" : "deb",
    "build_hash" : "de777fa",
    "build_date" : "2019-07-24T18:30:11.767338Z",
    "build_snapshot" : false,
    "lucene_version" : "8.1.0",
    "minimum_wire_compatibility_version" : "6.8.0",
    "minimum_index_compatibility_version" : "6.0.0-beta1"
  },
  "tagline" : "You Know, for Search"
}
```
もしくは、ブラウザで
http://XX.XX.XX.XX(network.hostに設定したIPアドレス):9200
にアクセスして、下記のような画面が表示されることを確認します。
![Screenshot_2019-08-15 Screenshot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478819/70fbf71f-b67b-441a-fd4f-638bac884797.png)
AWS EKSにNLB入れて動かす

## はじめに

gRPCのアプリケーションを外部に公開したかったので、EKSにNLBを立てて、Nginxでアクセスできるようにしてみました。

EKSのクラスタ構築は[AWS EKS をはじめてみる](https://qiita.com/foursue/items/7d207f2bc13feaa8f3a9)を参考にどうぞ。

## Deployment

まずはNginxの`Deployment`を作ります。

```yaml
apiVersion: extensions/v1beta1
kind: Deployment
metadata:
  name: nginx
  namespace: default
spec:
  replicas: 1
  template:
    metadata:
      labels:
        app: nginx
    spec:
      containers:
      - name: nginx
        image: nginx:1.7.5
        ports:
        - containerPort: 80

```

上記、内容のファイルを`nginx.yaml`として保存して、下記kubectlで実行します。

```bash
$ kubectl create -f nginx.yaml
$ kubectl get pod
NAME                     READY   STATUS              RESTARTS   AGE
nginx-6c496b6b85-xrb5q   0/1     ContainerCreating   0          8s
$ kubectl get pod
NAME                     READY   STATUS    RESTARTS   AGE
nginx-6c496b6b85-xrb5q   1/1     Running   0          15s
```

`Running`になったらOK

## Service

`Service`でNLBを立てます。

```yaml
apiVersion: v1
kind: Service
metadata:
  name: nginx
  namespace: default
  labels:
    app: nginx
  annotations:
    service.beta.kubernetes.io/aws-load-balancer-type: "nlb"
spec:
  externalTrafficPolicy: Local
  ports:
  - name: http
    port: 80
    protocol: TCP
    targetPort: 80
  selector:
    app: nginx
  type: LoadBalancer
```

上記内容でファイルを`aws-nlb.yaml`として保存して、下記kubectlで実行します。

```
$ kubectl create -f aws-nlb.yml
```

NLB自体はすぐに出来上がりますが、Nginxに繋がるまで数分かかるので待ちます。

出来上がったら、下記コマンドを叩いて`LoadBalancer Ingress`をブラウザのURLに入力して、`Welcome to nginx!`が表示されたら、完了です。

```bash
$ kubectl describe svc nginx
Name:                     nginx
Namespace:                default
Labels:                   app=nginx
Annotations:              service.beta.kubernetes.io/aws-load-balancer-type: nlb
Selector:                 app=nginx
Type:                     LoadBalancer
IP:                       10.100.104.52
LoadBalancer Ingress:     aaaaaaaaaaaaaaaaaaaaaaaaaaaaa-bbbbbbbbbbbbb.elb.ap-northeast-1.amazonaws.com
〜省略〜
```
※上記だと、`aaaaaaaaaaaaaaaaaaaaaaaaaaaaa-bbbbbbbbbbbbb.elb.ap-northeast-1.amazonaws.com`です。
CreateJSでの継承

いつも書くたびに継承の書き方を忘れてしまうので備忘録。


# CreateJSの継承(prototype)
私は基本prototypeでの継承しか使わないので、こちらをメモ。

```js

var ViewContainer = function(name){
  this.Container_constructor();

  // 好きな初期化処理を書く
  this.name = name;
}
// これをいつも忘れてしまいがち
createjs.extend(ViewContainer, createjs.Container);
createjs.promote(ViewContainer, 'Container');

ViewContainer.prototype.setBGColor = function(color){
  // hogehoge......
}
```

いつも

```js
createjs.extend(ViewContainer, createjs.Container);
createjs.promote(ViewContainer, 'Container');
```
の記法を忘れてしまいます。
ここは継承したいCreateJSのクラスと、継承する自作のクラスに好きに差し替えてください

# CreateJSの継承使いどころ
CreateJSでUIとかを描画するときにはView・Buttonなどのオブジェクトを毎回作るのは面倒なので、Containerを継承させてクラスを作成しておくと便利です。
よく私が作っているクラスをサンプルで置いておきます。

```ViewContainer.js
/**
 * @classdesc View生成用のContainer
 * @param {string} name 
 */
var ViewContainer = function(name,width,height)
{
  this.Container_constructor();
  this.name = "view_container";
  this._name = name;
  this._width = width;
  this._height = height;
}
createjs.extend(ViewContainer, createjs.Container);
createjs.promote(ViewContainer, 'Container');

/**
 * @param {string} color - 背景用のカラーコード #000000 ~ #FFFFFF
 */
ViewContainer.prototype.setBGColor = function(color)
{
  if(this.bg_shape != undefined) container.removeChild(this.bg_shape);
  var graphics = new createjs.Graphics();
  graphics.beginFill(color);
  graphics.rect(0,0,this._width,this._height);

  this.bg_shape =  new createjs.Shape(graphics);
  this.addChild(this.bg_shape);
}
```

```ButtonContainer.js

/**
 * @classdesc Button生成用のContainer
 * @constructor
 */
var ButtonContainer = function()
{
  this.Container_constructor();
}
createjs.extend(ButtonContainer, createjs.Container);
createjs.promote(ButtonContainer, 'Container');

/**
 * @param {number} width 
 * @param {number} height 
 */
ButtonContainer.prototype.setSize = function(width,height)
{
  this._width = width;
  this._height = height;
}
/**
 * @param {string} color - 背景用のカラーコード #000000 ~ #FFFFFF
 */
ButtonContainer.prototype.setBGColor = function(color)
{
  if(this.bg_shape != undefined) this.removeChild(this.bg_shape);
  var graphics = new createjs.Graphics();
  graphics.beginFill(color);
  graphics.rect(0,0,this._width,this._height);
	
  this.bg_shape =  new createjs.Shape(graphics);
  this.addChild(this.bg_shape);
}

/**
 * @param {callback} callback
 */
ButtonContainer.prototype.onClick = function(callback)
{
  this.removeAllEventListeners('click');
  this.addEventListener('click', callback);
}
```
ffmpeg(1) で DV-VIDEO フォーマットのファイルを作成する

IEEE1394 いわゆる i.LINK 端子で NTSC 等の映像及び音声信号を扱うためのファイルに形式変換するための覚書

```text
% ffmpeg -i INPUT.mov -vf "scale=720:480,pad=720:480:0:0:black" -r ntsc -pix_fmt yuv411p OUTPUT.dv
```
このスイッチでは入力された画素数を 720x480 に固定し、フレームレートをに 29.97 (30000/1001) に減らし、各フレーム事にオーディオデータを挟み込む事を行っている。
出力の拡張子を、必ず dv とするのが肝。
webarenaでubuntu その10

#概要

webarenaでubuntu18.04やってみた。
bindやってみた。
セカンダリネームサーバに、zone転送してみた。

#申し込み

http://dns.maihama-net.com/

#named.confの修正

```
allow-transfer { 
	160.16.54.90;
	153.120.38.37;
};
```

#セカンダリの設定

ipアドレスとドメインを入力する。

#テスト

```
dig @ns1.maihama-net.com hoge.com any
```

以上。
Laravelでプルダウンメニューを作ってみた。(忘備録）

##はじめに
Laravelでポートフォリオを作成する際にプルダウンメニューを利用したので実装手順を忘備録として残すために書きました。独学でLaravel学習中なので初心者向けです。

##データを作る
まず、プルダウンメニューのデータを準備するのですが、モデルに配列でデータを書くとモデル内がゴチャゴチャするので今回はconfig下にデータを入れたファイルを作りconfig('ファイル名')で呼び出すようにしました。
Laravelではconfig下に好きなファイルを作成でき、定数的な使い方ができる。

```php:score.php
<?php
  return array(
    '1' => ['label' => '☆'],
    '2' => ['label' => '☆☆'],
    '3' => ['label' => '☆☆☆'],
    '4' => ['label' => '☆☆☆☆'],
    '5' => ['label' => '☆☆☆☆☆'],
  );
?>
```

##ビューでプルダウンメニューを表示する

```php:score.blade.php
<select>
 @foreach(config('score') as $key => $score)
   <option value="{{ $key }}">{{ $score['label'] }}</option>
 @endforeach
</select>
```
メニューバー
![スクリーンショット 2019-08-15 14.55.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290033/56bef6c0-77b6-0202-5a31-5b5363b4fdb6.png)
メニューのデータ
![スクリーンショット 2019-08-15 14.55.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290033/2b825312-ba96-e14a-44f8-d9b1604a0883.png)
DBにはプルダウンのデータを数字で保存したかったので

```
<option value="{{ $key }}">{{ $score['label'] }}</option>
```
 keyに数字を設定し、score['label']で['label']を利用して文字を表示するようにしました。

##まとめ
もっと簡単な方法があるかもしれませんが、プルダウンメニューを複数実装する際はconfig下にファイルを作成して呼び出すようにした方がコードがスッキリして便利だなと感じました。

他に良い方法がありましたら教えていただけるとありがたいです。
macOS Mojave で libxml-ruby のインストールに失敗するときは Command Line Tools for Xcode を入れてみる

## 問題点

macOS Mojave (10.14) で Rails の `bundle install` などの際、下記のエラーが出て止まることがあります。

```
An error occurred while installing libxml-ruby (3.1.0), and Bundler cannot continue.
Make sure that `gem install libxml-ruby -v '3.1.0' --source 'https://rubygems.org/'` succeeds before bundling.
```

エラーメッセージを少し遡って読むと、次のような行が見つかる場合の対処法です。

```
checking for libxml/xmlversion.h in
/opt/include/libxml2,/opt/local/include/libxml2,/usr/local/include/libxml2,/usr/include/libxml2... no
*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers.  Check the mkmf.log file for more details.  You may
need configuration options.
```

## 解決策

libxml2 が見つからない、と言われています。

これは `/usr/include` にあることが期待される[ヘッダーファイルが存在しないことによるもの](http://kane-please.hatenablog.com/entry/2018/11/07/001823)で、Xcode の SDK ファイルをインストールすればよいのです。環境によっては `/Library/Developer/CommandLineTools/Packages/macOS_SDK_headers_for_macOS_10.14.pkg` というファイルが既に存在する場合もあるそうなので、まずそれがあるか確認してみてください。

私の場合は見つかりませんでした。この場合、Appleのデベロッパサイト https://developer.apple.com/download/more/ に行ってログインし、（もしデベロッパアカウントを持ってない場合はここで規約に同意して作成し、） Command Line Tools (macOS 10.14) for Xcode 10.x を探してダウンロード／インストールしましょう（ただし 10.x はあなたのマシンの Xcode のバージョン）。すると先ほどのディレクトリ `/Library/Developer/CommandLineTools/Packages/` に `macOS_SDK_headers_for_macOS_10.14.pkg` というファイルができています。

`macOS_SDK_headers_for_macOS_10.14.pkg` をダブルクリックしてインストールしましょう。

これで例えば 

```bash
$ gem install libxml-ruby -v '3.1.0' --source 'https://rubygems.org/'`
``` 

としてみて（バージョンはインストールしたいバージョンに合わせてください）、成功するかどうか確認してみてください。

## 参考
* [【macOS Mojave】macOS MojaveにアプデしたらCのヘッダーファイルが読み込まれなくなった件 - 空飛ぶセロ弾き](http://kane-please.hatenablog.com/entry/2018/11/07/001823)
* [Fixing missing headers for homebrew in Mac OS X Mojave | The caffeinated engineer](https://silvae86.github.io/sysadmin/mac/osx/mojave/beta/libxml2/2018/07/05/fixing-missing-headers-for-homebrew-in-mac-osx-mojave/)
* [fatal error: 'libxml/xmlversion.h' file not found · Issue #68 · mitmproxy/mitmproxy](https://github.com/mitmproxy/mitmproxy/issues/68)
* [rubygems - Bundle install fails to install libxml-ruby - Stack Overflow](https://stackoverflow.com/questions/53222641/bundle-install-fails-to-install-libxml-ruby)
不要なものをpushしてしまった時に戻す方法

取り消したいcommitのハッシュ値を確認

```shell
$ git log --oneline
```
以下のコマンドで「commitを取り消すcommit」を作成

```shell
$ git revert <取り消したいcommitのハッシュ値>
```

この瞬間にすでに,add,mergeは実行されているので、あとはpushするだけ

```shell
$ git push origin develop
```

# 特定のcommitの特定のファイルのcommitだけ打ち消したい時
基本的には、[ここ](https://mementomori.info/git%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%A7%E7%89%B9%E5%AE%9A%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%A0%E3%81%91%E9%81%8E%E5%8E%BB%E3%81%AE%E3%82%B3%E3%83%9F%E3%83%83%E3%83%88/)にある通りです。

まずは、git logに戻したいファイル名を指定し、特定のファイルのコミットログのハッシュ値を確認

```shell
$ git log ファイル名(相対パス)
```

次に、以下のコマンドで、ファイルをそのコミットログのハッシュ値の場所まで戻す

```shell
$ git checkout ハッシュ値 ファイル名(相対パス)
```

この場合、このあとは、commitしてからpushしたらOK.
vue.js 横スクロールメニュー を css だけで

横スクロールメニューやりてぇ。
やり方わからねぇ。


あ、CSSでいけるかも。
↑正解！



```hoge.css


    .horizontal-list {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding: 0;
    }

    .horizontal-list li {
        /* 横スクロール用 */
        display: inline-block;
    }



```

```Hoge.vue

        <h2>人気占い師</h2>

        <ul class="horizontal-list">
            <li>
                <div>
                    <img src="https://uranaibako.com/gcp_storage/photo_300x300_6515.jpg" class="icon-64" />
                </div>
            </li>
            <li>
                <div>
                    <img src="https://uranaibako.com/gcp_storage/photo_300x300_6515.jpg" class="icon-64" />
                </div>
            </li>
            <li>
                <div>
                    <img src="https://uranaibako.com/gcp_storage/photo_300x300_6515.jpg" class="icon-64" />
                </div>
            </li>
            <li>
                <div>
                    <img src="https://uranaibako.com/gcp_storage/photo_300x300_6515.jpg" class="icon-64" />
                </div>
            </li>
            <li>
                <div>
                    <img src="https://uranaibako.com/gcp_storage/photo_300x300_6515.jpg" class="icon-64" />
                </div>
            </li>
            <li>
                <div>
                    <img src="https://uranaibako.com/gcp_storage/photo_300x300_6515.jpg" class="icon-64" />
                </div>
            </li>
            <li>
                <div>
                    <img src="https://uranaibako.com/gcp_storage/photo_300x300_6515.jpg" class="icon-64" />
                </div>
            </li>
            <li>
                <div>
                    <img src="https://uranaibako.com/gcp_storage/photo_300x300_6515.jpg" class="icon-64" />
                </div>
            </li>
        </ul>


```
Pythonでリトライ処理を実装した

# はじめに
APIの呼び出しにおいて、一時的あるい頻繁にエラーを返す場合などがあります。
そういった場合に、**Exponential Backoff(指数関数的後退)**と言った指数関数的にリトライ間隔を後退させるアルゴリズムが使われます。
つまり、２秒後、４秒後、８秒後、１６秒後などのようにリトライ間隔を後退させて行きます。
最近、使ったとあるAPIが１回のリクエストで中々activeになってくれないという事象が発生したので、リトライ処理の実装を行いました。
そうようなリトライ処理をPythonではデコレータを用いて簡単に実装する事ができました。
# 環境
 - Python 3.6.5

# ライブラリ
retry
https://pypi.org/project/retry/

# 実装

```python
from retry import retry

@retry(tries=3, delay=2, backoff=2)
def zero_division():
    try:
        return 10 / 0
    except ZeroDivisionError as ex:
        print("error")
        raise

```
October CMS (Laravel) でアンイストールしたはずのServiceProviderをロードしようとしてエラーになる

Laravel duskを composer.json から削除して`composer update`でアンインストールし、自分のソースコードでもduskを使用していないことを確認したが、アプリを実行したら下記エラーが出る。

```
Class 'Laravel\Dusk\DuskServiceProvider' not found
```

問題は`storage/framework/packages.php`に`DuskServiceProvider`が登録されていたためだった。
このファイルは自動生成されるファイルなので、削除しても問題ないので、削除。これで解決。


下記のように、`remove`コマンドを使えばこのような問題は起きないのかな？未確認。

```
composer remove laravel/dusk
```
sudo create-react-appとしてストレスが溜まった話

###結論
これで直った。
[npmがsudoでしか実行できない時の対処法](https://qiita.com/htano/items/f107cf0921a5127cb02f)

###何がそんなにストレスか
sudo create-react-appってすると今後の作業全部にsudoしなきゃいけないです。
![Screenshot from 2019-08-15 14-38-41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/443834/329021c3-2a77-d9fc-72d3-54032b18adb6.png)
当然編集して保存するのもsudoですし何でもかんでもsudoです。
vscode使ってるとsu権限で起動するのオプションつけないといけないし、つけずにやると
ファイル作ったつもりがなんかできてないってファイルを探すためにfindとか打って探して何でないんだと２０分悩みました。

###解決方法
一番上の記事が参考です。
記事の手順を踏まない場合、create-react-appがsudoなしでは打てません。
なので記事の手順を踏み、sudoなしで色々できるようにしてください。
そうすれば全て解決します。![Screenshot from 2019-08-15 14-43-42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/443834/98e3f736-0ecb-ae07-366c-87912b366fef.png)

sudoでcreate-react-appした後作成されたファイルの権限を変更すればいいだけでは？
ってツッコミは受け付けません。

終わり。
基本情報技術者試験の道のり[2](初学者編)

#試験概要と対策
まずは午前試験の内容についてです
午後試験はギリギリまでやらないつもりです


次は試験に出題される範囲です
#**テクノロジ系(50問)**
1．基礎理論
(離散数学・応用数学・情報理論・通信理論・計測制御理論)
2．アルゴリズムとプログラミング
(データ構造・アルゴリズム・プログラミング・プログラム言語・マークアップ言語など)
3．コンピュータ構成要素
(プロセッサ・メモリ・バス・入出力デバイス・入出力装置)
4．システム構成要素
(システムの構成・システム評価指標)
5．ソフトウェア
(オペレーティングシステム・ミドルウェア・ファイルシステム・開発ツール・オープンソースソフトウェア)
6．ハードウェア
(ハードウェア全般)
7．ヒューマンインターフェイス
(ヒューマンインターフェイス技術・インターフェイス設計)
8．マルチメディア
(マルチメディア技術・マルチメディア応用)
9．データベース
(データベース方式・データベース設計・データ操作・トランザクション処理・データベース応用)
10．ネットワーク
(ネットワーク方式・データ通信と制御・通信プロトコル・ネットワーク管理・ネットワーク応用)
11．セキュリティ
(情報セキュリティ・情報セキュリティ管理・セキュリティ技術評価・情報セキュリティ対策・セキュリティ実装技術)
12．システム開発技術
(システム要件定義・システム方式設計・ソフトウェア要件定義・ソフトウェア方式設計・ソフトウェア詳細設計・ソフトウェア構築・ソフトウェア結合/ソフトウェア適格性確認テスト・システム結合/システム適格性確認テスト・導入・受入支援・保守・廃棄)
13．ソフトウェア開発管理技術
(開発プロセス手法・知的財産適用管理・開発環境管理・構成管理・変更管理)

#**マネジメント系(10問)**
14．プロジェクトマネジメント
(プロジェクトマネジメント・統合マネジメント・ステークホルダマネジメント・スコープマネジメント・タイムマネジメント・コストマネジメント・品質マネジメント・資源マネジメント・コミュニケーションマネジメント・リスクマネジメント・調達マネジメント)
15．サービスマネジメント
(サービスマネジメント・サービスの設計/移行・サービスマネジメントプロセス・サービスの運用・ファシリティマネジメント)
16．システム監査
(システム監査・内部統制)

#**ストラテジ系(20問)**
17．システム戦略
(情報システム戦略・業務プロセス・ソリューションビジネス・システム活用促進・評価)
18．システム企画
(システム化計画・要件定義・調達計画・実施)
19．経営戦略マネジメント
(経営戦略手法・マーケティング・ビジネス戦略と目標・評価・経営管理システム)
20．技術戦略マネジメント
(技術開発戦略の立案・技術開発計画)
21．ビジネスインダストリ
(ビジネスシステム・エンジニアリングシステム・e-ビジネス・民生機器・産業機器)
22．企業活動
(経営組織論・OR/IE・会計財務)
23．法務
(知的財産権・セキュリティ関連法規・労働関連/取引関連法規・その他の法律/ガイドライン/技術者倫理・標準化関連)

ここまでまとめてみると、プログラム知識から経営戦略までかなり広範囲な分野から
出題されることがわかりました（涙）

そして午前・午後ともに150分の長時間の試験も鬼門ですね、集中力もつかな、、、
ただ6割以上の正答率で合格なので意外にいけるかもと思っている部分もあります

#合格までのロードマップ

さてここまでを振り返ってみると
各項目で8割目標くらいでいいかなと思いますので
テクノロジ系40問、マネジメント系8問、ストラテジ系16問の正答を目標ということになりますね

ただ自分が今まで経験してきたことや勉強してきた部分もあるのでマネジメントやストラテジの分野については割と知識があるかなと思いますので個人的にはテクノロジ系の勉強がメインになるかなと思います

まあ、テクノロジ系の比重が高いので実質テクノロジ系を極めればほとんど合格できるかなって思います。

では、実際のロードマップを計画してみると
Week1 08/19 ~ 08/25
Week2 08/26 ~ 09/01
Week3 09/02 ~ 09/08
Week4 09/09 ~ 09/15
Week5 09/16 ~ 09/22
Week6 09/23 ~ 09/29
Week7 09/30 ~ 10/06
Week8 10/07 ~ 10/13
Week9 10/14 ~ 10/20

W1 ~ W4 『参考書を周回し土日に過去問解く』
W5 ~ W8 『過去問解きまくる』

案の定めちゃ単純になってしまった
次の投稿でもっと詳しく書けたら書きます
Surfaceで0xc0000098エラーが起こったとき

## 概要
SurfaceのOSしたら、以下のエラー画面が！結構最近買ったのに！！！
![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239750/33f8c556-074c-ddff-8c6f-39af86b5a160.png)


リカバリポイントから戻ることもなかったので、OS再インストール。OSの再インストールのため、**データはすべて消える**し、USB回復ドライブからの復旧のため、**USB TypeC -> USB変換が必要**。
したことは以下の通り。

- 回復ドライブの作成/再インストール
- Sモードの解除

## 手順
### 回復ドライブの作成/再インストール
- [Surface の USB 回復ドライブの作成と使用](https://support.microsoft.com/ja-jp/help/4023512/surface-creating-and-using-a-usb-recovery-drive)の手順に従い、USB回復ドライブを作成する
- Surface自体は動作しないので、他のWindows10マシンを準備する。
- [ダウンロードページ](https://support.microsoft.com/ja-jp/surfacerecoveryimage)から工場出荷状態イメージのダウンロード。
- 左下の「ここに入力して検索」から`recovery`と入力、`回復ドライブの起動`を起動。（このとき管理者権限が必要）
- 「システムファイルを回復ドライブにバックアップします。」のチェックを外す。
- フォーマット済のUSBを挿す。容量は16GB以上必要。
- USB作成完了後、前手順でダウンロードした工場出荷状態イメージをzip解凍し、解凍されたすべてのファイルを作成したUSBのトップディレクトリにコピーする。
- USB回復ドライブの作成完了したため、作業をSurfaceに移行。作成したUSB回復ドライブを挿す。
- 音量の下げるボタンを押したまま、電源ボタンを押下。下げるボタンは、Windowsのロゴが出るまで押し続ける。
- [トラブルシューティング]、[ドライブから回復する] の順に選択し、[このドライブをスキップする] を選択。
- [ファイルの削除のみ行う] を選択。
  - Windowsを起動するを選択。このとき、無限にこの画面をループする場合は、Surfaceの電源をOFFし、USBを抜いて再起動する。
- あとはウィザードに従い、Windowsインストールする。
  - **このときおなじみ、Cortanaが爆音でしゃべるので注意**

### Sモードの解除
- 解除しないとストアのアプリしか使えないのでとりあえず設定する
- [Windows 10 の S モードを解除する](https://support.microsoft.com/ja-jp/help/4456067/windows-10-switch-out-of-s-mode)のまんまで、アプリストアで取得するのみ。


### その他
あとは[Chocolatey](https://chocolatey.org/)入れました。
今までOneDriveとかの同期系のサービスはしないようにしてましたが、データが飛ぶのはやっぱり嫌なので素直に設定しました。バックアップの大事さを再認識しました！！！皆様も気をつけてください！！！！
【React】styled-componentsのGlobalStyleがデプロイすると効かなくなるときの対処法

# 問題

Styled Components v4で実装されたAPI、`createGlobalStyle`でグローバルスタイルを適用します。

```jsx
const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    @import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
    font-family: 'Noto Sans JP', sans-serif;
  }
`;
```

すると、ローカル環境では正常に機能するが、デプロイするとグローバルスタイルが適用されないというケースがあります。

# 原因

ざっと調べた限りでは、これという原因はわかりませんでした。
たびたび[issue](https://github.com/styled-components/styled-components/issues?utf8=%E2%9C%93&q=is%3Aissue+global+style+not+work)でも取り上げられているようです。

ただ、`@import`の挙動が不安定ということらしいので、上記のコードの例に限っては、body内で`@import`しているところが怪しそうです。

# 対処法

`@import`をトップレベルに移動してきます。

```jsx
const GlobalStyle = createGlobalStyle`
  @import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
  * {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans JP', sans-serif;
  }
`;
```

これで私の環境では問題は解消されました。
ただ、できれば`@import`は使わないほうがいいかもしれません。
【デバッグ】Google Chromeから接続しているOculus Questのコントローラーの情報を取得する。

## WebVRをやる際のOculus Questのデバッグ方法を考える
Oculus Questのデバッグ方法がわからなくて少し詰まったので共有します。  

※この方法は現在私の知っている最新のものを記述していきます。新しい情報が分かり次第更新します。

# セットアップ
## STEP1 Oculus Questを開発者モードにする
Oculus Questのアプリから開発者モードを`ON`にします。
![VR.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/233dbbe9-b727-f63c-c57e-29cb91643846.png)

[Introduction to Oculus Browser](https://developer.oculus.com/documentation/oculus-browser/latest/concepts/browser-intro)
## STEP2 PCとOculus Questをつなぐ
[Debug Your Browser Content](https://developer.oculus.com/documentation/oculus-browser/latest/concepts/browser-remote-debugging)
このページが参考になります

1. Oculus QuestとパソコンをＵＳＢケーブルでつなぎます
Oculus Questには購入したときにUSB Type-C to Type-Cのケーブルがついています。パソコンにUSB-Type-Cを指すことができない場合には別途必要

2. [Android Platform Tools](https://dl.google.com/android/repository/platform-tools-latest-windows.zip)をダウンロードしてadbコマンドが打てるようにする(パスを通す)
  
3. `adb devices`でOculusが接続されていることを確認、ここで見つからない場合はケーブルをつなぎなおし、Oculus側でPCが接続することを許可をするとできるようになります。

## STEP3 Chromeでリモートデバイスをデバッグする
1.  Chromeの開発者モードを`F11`を押して開きます。
2. `3つの点が縦に並んでいるボタン`　→ `More tools` → `Remote devices`を開きます。
![RemoteDevices](https://user-images.githubusercontent.com/39250588/63067026-9279c280-befc-11e9-8f4e-dde30ad203d3.PNG)
3. 開発時に使用しているブラウザを`Inspect`で開きます。  

これでOculus見ているウェブブラウザにアクセスすることができました。こちらからVRのデバイスの確認であったり、コントローラの確認をすることができるようになりました。

※ゲームパッドの接続には別途WebVRの手順が必要です
VRのディスプレイが有効になっている状態で`window.navigator.getGamepads`で接続されているゲームパッドを確認する

<img src="https://user-images.githubusercontent.com/39250588/63069518-ade9cb00-bf06-11e9-9c32-cf07d87d3dd4.PNG" width=800 />


これで現在接続されているOculusのコントローラーの情報を確認できるようになりました
<img src="https://user-images.githubusercontent.com/39250588/63069618-1fc21480-bf07-11e9-8318-1471bdb274f5.PNG" width=800 />

# 補足
Oculus Questで開発をしているとどうしても `VR`⇔`現実`‘での開発必要となります。

## STEP4 Oculus Quest本体を頭につけたまま少しずらす
Oculus Questで開発をしているとどうしても `VR`⇔`現実`‘での開発必要となります。Oculus Questは外してから一定時間たつとブラウザの表示が切れてしまい、コントローラーの出力がブラウザで受け取れなくなってしまいます。

その為にOculus Questを45度くらいずらすと、Oculus Questの接続を保ったままの状態を作り出せます。　　
45度ずらして、`Oculus Quest` ⇔ `エディタ`を繰り返えすとかなりよい開発者体験が生まれました。　　

## STEP5 ソースコードを反映

ソースコードに変更があったらリアルタイムに、Oculus Quest側のブラウザを自動的にリロードをするようにしています。  Oculusで開発する際にはソースコードの変更を検知してブラウザをリロードしてくれる機能をのあるもの、私は`PlayCanvas`で開発をしているので、エディター上で直接いじってしまっておりますが`webpack` `gulp`でも同様の機能があると思いますので、そちらを使用して開発をするとかなり開発をしやすいです。
質問です。

二つ質問します. 
以下[このサイト](http://t-juniors.mimoza.jp)のhtml, cssについての質問です. 

質問❶は解決しました. 
####質問❷スマートフォン(iphone7)からサイトを見たときに画面右のブログの下部がブロックからはみ出してしまう. 
html


>@media(max-width: 768px){
.flexbox{
 -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
}
.tsukurebajs-title{
width:10%;
}
.flexbox .Main-tsukurebajs{
width: 100%;
}
.flexbox .Side-tsukurebajs{
width: 100%;
Margin:auto;
}
.blog{
width:300px; }
}

このcssによってpc上ではのブラウザの画面サイズを変更したときサイトの見た目が反映されます。（macbookのブラウザの開発からpc上でiphoneの画面を再現した場合も反映される。）
原因が知りたいです. 
（@ mediaの後にscreen を記述するとpc上でさえ反映されないので消しました. 何か影響しているのでしょうか. ）
![IMG_6554.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479915/c766fb2b-9ad5-f024-8797-ed6e68288933.png)


#####❶サイト内に別のサイトを表示したところfooterが消えてしまう

html
> div class="Side-tsukurebajs"
div class="blog"
span class="title-side"　つくればジュニアのブログ!
　/span
iframe src="http://tsukureba-j.sblo.jp" height="1280px" overflow="scroll"
/div
/div

このようにiframeを使うと
![スクリーンショット 2019-08-15 14.14.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/479915/fe22bdf7-ac1e-41b4-3adc-d43501a9b034.png)
footerが消えてしまうので原因が知りたいです. 
（現在代わりにfooterと同じ内容を画面左下部に表示しています.）
クレイジーな JavaScript からおさらば！ PHP でダイナミックなフロントエンド書こうぜ！な livewire

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332028/4ce3c109-9635-2da0-8d4b-35006a3603dd.png)

> > 最近の JavaScript はクレイジーだ。ただモーダルやロードスピナーを出すためだけにコードと複雑性の山を持ってこないといけない。そうじゃないよな？
>
> オーケー、話を伺おう...
>
> > Livewire に挨拶だ！
>
> こんにちは、 Livewire！
>
> > Livewire はダイナミックなフロントエンドを(文字通り) vanilla PHP と同じくらい簡単に書ける Laravel 用のフルスタックフレームワークだ。
>
> 興味が出てきたぞ。
>
> > 君がいままでに見たことがなくても、コードを見るだけでまるわかりさ。シュノーケルをつけていざ飛び込もう。
>
> ...浮いてる!

https://laravel-livewire.com/

言いたいことはわかりますね。モーダルのようなちょっとした動きを付けるためだけに、数十MB、数千ファイルの node_modules をダウンロードしてきて、ビルドして packing しないといけない時代です。つらい。そうじゃない。

そういう人のためのフレームワークだそうです。

コードを見るとわかりやすい。

Vue.js でカウンターを作るとこう。

```vue:counter.vue
<script>
    export default {
        data: {
            count: 0
        },
        methods: {
            increment() {
                this.count++
            },
            decrement() {
                this.count--
            },
        },
    }
</script>

<template>
    <div>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>

        <span>{{ count }}</span>
    </div>
</template>
```

うん、まあ至ってシンプルなものですが、このコードをちゃんと描画するためには色々面倒が必要です。

Livewire を使うと、こう。

```php:/app/Http/Livewire/Counter.php

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function decrement()
    {
        $this->count--;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}
```

```php:/resources/views/livewire/counter.blade.php
<div>
    <button wire:click="increment">+</button>
    <button wire:click="decrement">-</button>

    <span>{{ $count }}</span>
</div>
```

ほら、 PHP だけでカウンターが実装出来ました。どうでしょう？

裏ではどう動いているのでしょうか。

Vue.js や React.js とそうやっていることは変わりません。

1. Vue は `@click="increment"` でクリックしたことを受け取る
1. Vue は `increment` メソッドを呼んで、カウントを更新する
1. Vue はテンプレートを再描画し DOM を更新する

Livewire は大体同じことをしているが、裏で 2 の追加ステップを踏んでいる。

1. Livewire は `wire:click="increment"` でクリックしたことを受け取る
1. **Livewire は ajax リクエストを PHP に送信する**
1. PHP は `increment` メソッドを呼んで、 `$count` を更新する
1. **PHP は Blade template を再描画し、 HTML を返す**
1. Livewire はレスポンスを受け取り、 DOM を更新する

クールじゃない？

---

というのが公式ページの紹介です。

Vue.js の全てを置き換えることは出来ない(ajax リクエストを経由するので少し遅いため、アニメーションなどは難しい)が、ほとんどのユースケースで有効ではないか、ということ。

Laravel Blade Template エンジンに乗っかっているので、 Laravel ユーザフレンドリーなことは良いですね。

- [ドキュメントはこちら](https://laravel-livewire.com/docs/2.x/quickstart)
- [ソースコードはこちら](https://github.com/livewire/livewire)

まだプレリリース段階なので、恐らくバグや機能不足もあると思いますが、昨今の JavaScript に辟易している Laraveller にはオススメかもしれません！
SQLで条件分岐

# 条件分岐で使うCASE文
SQLでの条件分岐にはCASE文を使用する。

### 基本的な使い方
基本的な構文は以下となる。

```sql
 CASE
   WHEN 条件 THEN 合致した場合に返す値
   ELSE 合致しなかった場合に返す値 END
```

もちろん、WHENは複数記載することが可能。


例：

```sql
SELECT
 CASE
   WHEN 5000 < price THEN 'high'
   ELSE 'low' END
FROM ・・・
```


# UPDATE
UPDATE文でも使えるので便利。

```sql
UPDATE テーブル名 SET
PRICE =
 CASE
   WHEN 5000 < price THEN 'high'
   ELSE 'low' END
```


# ネスト
入れ子にすることも可能。

```sql
SELECT
 CASE
   WHEN 5000 < price THEN 
     CASE WHEN 5000 < Profit THEN 'high_high'
       ELSE 'high_low' END
   ELSE 'low' END
FROM ・・・
```
ある夏休みのメモ

# HTML文字コード指定

HTMLの文字コード指定が短くなっているのに、今更ながら気付きました。
昔は、たまに文字化けしているサイトを見かけることがあった。
開発ツールでファイルの雛形が自動生成できるので、間違えが減ったのかも知れませんね。
当時は間違えないようにと、コピー＆ペーストしていた事を思い出し、なんとなく記事を残すことにしました。

## HTML4

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0.1 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html";charset=UTF-8">
  <title>タイトル</title>
</head>
<body>
コンテンツ
</body>
</html>
```

## HTML5

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
</head>
<body>
コンテンツ
</body>
</html>
```

# 自身のエレメント削除

```javascript
var divs = document.getElementsByTagName("div");
var size = divs.length;
for(i=0;i<size;i++){
  // 削除で要素が減るので最初になった要素を削除すれば良い
  console.log(divs[0]);
  // 自分自身を親経由で削除
  divs[0].parentNode.removeChild(divs[0]);
}
```


http://shanabrian.com/web/javascript/remove-element.php
iPhoneでリンクが開かない。Failed to load resource: The operation couldn’t be completed. Protocol error

# amazon-linux-extrasを使用してhttpdを入れ、ALBを使用するとiPhoneでエラーになる

iPhoneのシミュレータを使用して、ローカル環境と接続しデバッグすると表示されるエラー。

```
Failed to load resource: The operation couldn’t be completed. Protocol error
```

## ALBの設定を変更する回避方法

![スクリーンショット 2019-08-15 13.58.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/52386/342cd07a-4718-fd1f-8a31-d693895232d9.png)

ALBの設定で、HTTP/2が有効になっているのを外す。

## Apacheの設定を変更する回避方法

```/etc/httpd/conf.modules.d/10-h2.conf
# LoadModule http2_module modules/mod_http2.so
```

```
sudo systemctl restart httpd
```

## まとめ

Apacheのほうで設定するほうが、HTTP2の恩恵を受けれるものが多いのでそちらのほうがいいかもしれません。
また、その方法だけだとうまくいかない場合、ALBの設定変更の方法を手元の環境では試しています。
Railsで汎用的に使っている Gemfile まとめ

# 概要
Rails 開発時に汎用的に使っている Gemfile

# 前提条件

- Ruby 2.5.5
- Rails 5.2.3

# 最終型

<details><summary>Gemfileはこちら</summary><div>

```ruby:/Gemfile

```

</div>
</details>
## 画面
### Administrate
```

```
## テスト
### FactoryBot
```
group :development, :test do
  # FactoryBot
  ## https://github.com/thoughtbot/factory_bot_rails
  gem 'factory_bot_rails'
end
```
### RSpec
```
group :test do
  gem 'rspec-rails'
end
```

## 開発
### XRay-rails
```
group :development do
  # XRay-rails
  ## https://github.com/brentd/xray-rails
  gem 'xray-rails'
end
テーブル結合をするためのメソッドなど （#20190815）

#本記事について
学んだことを日々アウトプットしていますよ、シリーズです。

##joins
joinsはテーブル同士を内部結合して検索するためのメソッド
内部結合とは、各テーブル同士で関連づけられたidが一致しているものだけを使って新しいテーブルを作ること
なので、idが一致しないものは切り捨てられる
userが複数のpostもつような関係が設定されている場合は

```
User.joins(:posts)
```

を実行すると

```実行されるSQL
SELECT "users".* FROM "users" INNER JOIN "posts" ON "posts"."user_id" = "users"."id"
```

というSQLが走り、idが一致しているカラムだけが取り出されて、そのほかは切り捨てられる

##select
joinsでselectメソッドを使うことによって、特定のカラムを選択して表示できる
select(テーブル名.カラム名)で、特定のカラムだけを選んで表示できる

```
User.joins(:posts).select("users.name")
```

```実行されるSQL
SELECT users.name FROM "users" INNER JOIN "posts" ON "posts"."user_id" = "users"."id"
```

##where
joinsとwhere句を組み合わせることによって、内部結合した後に条件を指定してデータ取り出せる

```
User.joins(:posts).where(posts: { month: 8 })
```

```実行されるSQL
SELECT "users".* FROM "users" INNER JOIN "posts" ON "posts"."user_id" = "users"."id" WHERE "posts"."month" = ?  [["month", 8]]
```


##参考文献
https://www.sejuku.net/blog/26522#joins
webarenaでubuntu その9

#概要

webarenaでubuntu18.04やってみた。
bindやってみた。
zone転送、許可してみた。

#ポートを開放

```
tcp:53,53,ip4:0.0.0.0/0
```

#named.conf修正

```
allow-transfer { 
	any; 
};
```

#テスト

```
dig @ns.hoge.com hoge.com axfr
```

以上。
OpenGLとは

#OpenGL
- ハードウェアの持つコンピュータグラフィックス(3DCG)関連の演算機能をソフトウェアから呼び出すための規約を定めたインターフェース(API)標準の一つ。
- もともと旧Silicon Graphics社(SGI)が自社ソフトウェア向けに開発していたIRIS GLをオープン化したもの。
- 様々な機種やハードウェア、OSなどに対応した汎用のグラフィックスライブラリで、平面上の2次元グラフィックス(2DCG)、立体的な3次元グラフィックス(3DGC)を描画するための豊富な機能が用意されている。

#参考
http://e-words.jp/w/OpenGL.html
Biocontainersにない、Biocondaのツールを入れたコンテナを作る

# 概要

Biocontainers で探したがみつからない
しかし、 bioconda のパッケージは存在する場合は、わりと簡単にコンテナを作ることができる。

# まとめ

もととなる、biocontainersのコンテナを探してくる
BioContainers Community
https://biocontainers.pro/#/tools/biocontainers

```
docker pull biocontainers/biocontainers:v1.1.0_cv2
```

BioContainers Community
https://biocontainers.pro/#/tools/bustools


```
conda install -c conda-forge -c bioconda bustools==0.39.3--h4f7b962_0
```

これをコピーする

ただこれでうごかなかったので

```
conda install -c conda-forge -c bioconda bustools==0.39.3
```

`Dockerfile`

```Dockerfile
FROM biocontainers/biocontainers:v1.1.0_cv2
RUN conda install -c conda-forge -c bioconda bustools==0.39.3
```
【Java】Processのstdinに入力する

# やりたかったこと
ffmpeg(ffprobe)では、以下のようにしてstdin(pipe:0)に入力したファイル情報をprobeすることができます。

```bash
cat a.mp4 | ffprobe -hide_banner -v error -print_format json -show_streams -i pipe:0
```

これを利用して、`SpringBoot`でフロントからPOSTされた`MultipartFile`をファイルとして保存することなく`ffprobe`の処理を行いたいと考えました。

## 環境

| OS | Java | ffprobe |
|:----------|:----------|:----------|
|macOS Mojave 10.14.6|1.8.0_181|4.1.4|

# やり方
ざっくり以下のやり方で一応できます（問題点は後述、Processのstdinに入力することはできていると思います）。

`Process`の`OutputStream`に書き込みを行うことでファイル内容を渡せます。
`org.apache.tika.io.IOUtils`を使っていますが、`InputStream`に出力される処理結果を文字列に変換しているだけなので、自力実装するかライブラリを導入するかすればできると思います。

```java
import org.apache.tika.io.IOUtils;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.Arrays;
import java.util.List;
import java.util.concurrent.TimeUnit;

public static String probeMultipartFile(MultipartFile multipartFile) {
    List<String> commands = Arrays.asList(
            "ffprobe",
            // configure オプションやライブラリのバージョンを出力しない
            "-hide_banner",
            // ffprobe の内容だけ表示
            "-v", "error",
            // JSONで出力
            "-print_format", "json",
            // ファイルに含まれるビデオ・オーディオの情報を配列で出力
            "-show_streams",
            // パイプに入力される情報を処理する
            "-i", "pipe:0"
    );

    Process process = null;

    try {
        process = new ProcessBuilder(commands).start();

        // stdinへの書き込み
        OutputStream os = process.getOutputStream();
        os.write(multipartFile.getBytes());
        os.flush();
        os.close(); // waitFor前にcloseしないと終わらなくなるパターンが有った

        // 5秒待って終わらなければ処理を終了してnullを返す
        boolean result = process.waitFor(5, TimeUnit.SECONDS);
        if (!result) {
            process = null;
            return null;
        }
    } catch (IOException | InterruptedException e) {
        e.printStackTrace();
    } finally {
        // IOException Broken pipeとなっていても取れている場合があるのでfinallyでreturnする
        if (process != null) {
            try {
                // processがnullでなければ標準出力を文字列としてreturn
                return IOUtils.toString(process.getInputStream());
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        return null;
    }
}
```

## 問題点
このやり方でファイルを処理してみたところ、手元にあったmp4やwmvファイルで`java.io.IOException: Broken pipe`となってしまう現象が起き、正常系で処理を完結することができませんでした（一応Broken pipeとなるパターンでもファイル指定で実行したprobe結果と同様のものは得られます）。
この問題はどうもファイル容量等には関係なく拡張子に依存して起きているように見えました。

調査は打ち切ってしまったので原因は把握できていませんが、どうもファイルによって以下のように反応が分かれるようです。

- `Process`が適切なタイミングで`OutputStream`を閉じる
- `OutputStream`が閉じず、書き込み待ちになってしまうため、Java側から閉じないと終了しなくなる
- `OutputStream`が異常なタイミングで閉じられてしまい、`java.io.IOException: Broken pipe`となる

上2つは正常系内で処理が閉じますが、最後は正常系外で処理を行わなければならないようです。

これ以外にも、stdinから書き込んだ内容に対する処理結果がおかしくなる問題は度々発生しているようなので、大人しくファイルとして保存してから処理を行う方が当たり障りがなくていいのかなと思っています。
Windows 10 で Arduino IDE のエディタフォントの変更方法

Windows 10 上の Arduino IDE のエディタフォントは、インストール直後だとＭＳ ゴシックです。
これをもう少しいい感じのフォントに変更する方法になります。

## フォントのインストール

ここが一番のハマりポイントです。
フォントは、フォントファイルを右クリックした際に表示されるコンテキストメニューの **すべてのユーザーに対してインストール** でインストールしてください。 (`C:\Windows\Fonts` にインストールされます)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22754/1aa7246e-1692-c743-eb2c-20f5f49243b9.png)


ログインユーザーのみに対するインストール (`C:\Users\[USERNAME]\AppData`)では、Arduino IDE がフォントを見つけられません。

また、ドラッグアンドドロップで `C:\Windows\Fonts` にインストールしても、自動的に AppData 側にインストールされますので、ここもご注意。必ず右クリックのコンテキストメニューからインストールしましょう。

## フォントの名前を得る

Windows設定 > フォント設定で指定したいフォントの **完全名** をメモします。
図の例だと `Myrica Monospace` が対象となります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/22754/ba6085e7-6d89-6f05-93a1-0acc6657aac1.png)

※左上の `Myrica M` でも動く場合があるようです。完全名でうまく指定できなかった場合は左上の名前でも試してみてください。


## フォントを指定する

`C:\Users\[USERNAME]\AppData\Local\Arduino15` の中にある `preferences.txt` を開き、 `editor.font` を指定します。
また同時に `editor.antialias` も *true* にしておくと良いでしょう。
（存在している場合は更新します）

```ini
editor.font=[メモしたフォントの完全名],plain,14
editor.antialias=true
```

例:

```ini
editor.font=Myrica Monospace,plain,14
editor.antialias=true
```

以上で終了です。
Arduino IDE を立ち上げれば指定されたフォントでエディタの表示がされます。

トラブルシュートとしては

* フォントのインストール方法
* フォント名の指定

といったところを確認します。

### おすすめフォント

Arduino IDE なら [Myrica](https://myrica.estable.jp) が合ってる感じです。

## あとがき

原稿、がんばってます。

EoT
bashのスクリプトを書くときはshebangで-xeを指定するよりset -xeした方がよさそう

例えばこういうスクリプトを書いたとします。

```bash:tmp.sh
#!/bin/bash -xe

ls | grep 'ababababababa'

echo 'abcd'
```

grepは存在しなければexit codeとして1を返します。なので下のechoは実行されないはずです。

しかし以下のように実行するとechoが実行されてしまいます。

```sh
bash tmp.sh
```

bashをつけて実行するとshebangの指定は無視されるみたいです。以下のようにsetで指定する方がよさそうです。

```bash
#!/bin/bash

set -xe

ls | grep 'ababababababa'

echo 'abcd'
```

今までどっちも同じやろ位にしか思っていなかったのですが、set派に改宗することにします。
NULLをカウントする

# 前提
mysqlの話。

# COALESCE関数を使う
引数を順番に評価し、
NULLと判定されない最初の値を返す関数。
引数がすべてNULLの場合はNULLを返す。

これを使って、
以下のようなUsersテーブルがあった場合、

| ID | ユーザー名 | 所属 |
|:-----------------:|:------------------:|:------------------:|
| 1 | aaa | 1 |
| 2 | bbb | 1 |
| 3 | ccc | 2 |
| 4 | ddd | 3 |
| 5 | eee | NULL |
| 6 | fff | NULL |

```sql

select 所属,count(COALESCE(所属,'')) as カウント from users group by 所属
```

| 所属 | カウント |
|:-----------------:|:------------------:|
| 1 | 2 |
| 2 | 1 |
| 3 | 1 |
| NULL | 2 |

とできる。
iOS 13ではCLLocationManagerでrequestAlwaysAuthorizationを呼んでも常に許可という選択肢はでない

## iOS 12まで
ジオフェンスなどで常に位置情報を取りたいときは以下のコードで常に許可を得るようにしていました。

```swift
var locationManager = CLLocationManager()
locationManager.requestAlwaysAuthorization()
```

上記コードで常に許可の選択肢をユーザーに押してもらえればOKです。

## iOS 13から
iOS 13から上記コードでは
![IMG_1380.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290902/4859ad45-3253-4beb-df7b-58b39d95b9da.jpeg)
このような聞かれ方になって「常に許可」という選択肢がなくなっています。「1度だけという選択肢が増えています」
ちなみに「1度だけ許可」という状態は常に許可と近い状態になるようでジオフェンスも正常に働きました。もちろんしばらくすると使えなくなるのですが。

ここからユーザーに常に許可を得るにはまずは「Appの使用中は許可」を選択してもらいます。
それでジオフェンスなどのを動かして、実際に必要になる時が来るとOS側で勝手にユーザに常に許可のダイアログを出してくれます。
<img width="375" alt="IMG_1379.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290902/0d995708-34a2-62f5-7de4-ce4d9e6ac8cf.jpeg">
見てもらえればわかると思うのですが、アプリ内ではなくホーム画面にあるときにアラートが表示されます。この画像のように常に許可の選択肢が出て、ようやくここで常に許可を取得することができます。
環境はiOS 13 beta 6で試しています。
必要になった段階で確認が入るので便利かと思います。ただこの確認が遅れる可能性もあるのでそこは注意すべきとこかと思います。
動作確認のみして、特にコードの変更はなく済みました。

この辺の内容はWWDCの[ビデオ](https://developer.apple.com/videos/play/wwdc2019/705/)
の2分〜7分くらい見ればわかるので確認してみてください。日本語字幕も入っているのでわかるかと思います。

## 定期的な位置情報許可設定確認のダイアログ
*2019/10/24 追記*
<img width="375" alt="IMG_0008.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/290902/71b56f9f-4c8b-d928-e8fd-901b2d975212.jpeg">
常に位置情報を取得するよう許可を得た後も、上記画像が定期的に出現する。
ユーザーになんのために位置情報を取得しているか明示しておかないと、ここで拒否されてしまう可能性が高いため、運用方法には注意したい。
phpmyadmin 並びかえできない

phpmyadminのバックアップを復元したら並び替えできなくなった。。。

といっても、phpの設定ミスだが。

ページのフォーム 1000個以上のフィールド

ってエラーがでた。

`find / -name "*php.ini*" -print` でファイルを探し、


```php.ini

max_input_vars を 3000 に。

```


```

service php-fpm restart
nginx -s reload

```

これで反映させれば
・並び替えができる。
Lambdaでboto3動かすサンプルコード　TargetGroupの変更

自分用のメモです。
boto3はpythonでAWSを操作するためのライブラリです。
AWSの公式SDKなので安心して利用できます。

##目的
・ALBでオンプレ環境のWEBサーバをあえてAct-Stbの構成としたい。

##環境
・AWSとオンプレ環境をDirectConnectで接続。（VGW
・ALBでオンプレ環境のWEBサーバを負荷分散。
・TargetGroupにオンプレのWEBサーバをIPで登録。
・CloudWatchで該当TargetGroupのHealthyHostCountが0になったら
　Alartを発行しSNSで通知。
・SNSでLambdaを実行するトピックを作成。
・Lambdaで関数を作成し、以下のコードを登録。
　ターゲットグループの入れ替えをしています。

・boto3の公式リファレンスのリンク
　いろいろ載ってるので参考に。
 [リンク](https://boto3.amazonaws.com/v1/documentation/api/latest/reference/services/index.html)

##サンプルコード
```python

import boto3

def lambda_handler(event, context):
    client = boto3.client('elbv2')

    #ターゲットグループへスタンバイのサーバを登録します。
    response = client.register_targets(
     TargetGroupArn='対象のターゲットグループのリソース番号を記載',
     Targets=[
        {
            'Id': '172.16.1.1',
            'Port': 80,
            'AvailabilityZone': 'all'
        },
     ]
    )

    #ターゲットグループからアクティブのサーバを削除します。
     response = client.deregister_targets(
     TargetGroupArn='対象のターゲットグループのリソース番号を記載',
     Targets=[
        {
            'Id': '172.16.1.2',
            'Port': 80,
            'AvailabilityZone': 'all'
        },
     ]
    )
```

##最後に
今回はTargetGroupのターゲットの入れ替えによって実現しましたが、
Act-Stb構成としたい場合は、以下の方法でも検討の余地があります。

・HealthCheckのステータスで切り替え。
・リスナールールで切り替え。
XAMPPでLaravelの開発環境構築

## XAMPPでLarabelを使いたい


1. Composerをインストール
 https://getcomposer.org/doc/00-intro.md

1. コマンドでxamppのhtdocsに移動して `composer create-project laravel/laravel プロジェクト名 --prefer-dist "5.8.*"`
 `5.8.*`はバージョンに応じて指定　https://ja.wikipedia.org/wiki/Laravel
 `プロジェクト名`は作成したいプロジェクト名に変更

## DB接続
`.env`の設定を変更

```:.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret
```

`DB_DATABASE` `DB_USERNAME` `DB_PASSWORD` あたりを必要に応じて変更。
`DB_CONNECTION` `DB_HOST` `DB_PORT` はデフォルトのままなら変更する必要はないはず。

## XAMPPのバージョンに注意（DB接続が必要な場合）
https://readouble.com/laravel/5.8/ja/migrations.html
>Laravelはデータベース中への「絵文字」保存をサポートするため、デフォルトでutf8mb4文字セットを使っています。バージョン5.7.7より古いMySQLや、バージョン10.2.2より古いMariaDBを使用している場合、マイグレーションにより生成されるデフォルトのインデックス用文字列長を明示的に設定する必要があります。AppServiceProvider中でSchema::defaultStringLengthを呼び出してください。

https://ja.wikipedia.org/wiki/XAMPP
XAMPPのバージョンが7.3.6以下の場合はデフォルトのインデックス用文字列長を明示的に設定する必要があります。

```php:AppServiceProvider

use Illuminate\Support\Facades\Schema;

public function boot()
{
    Schema::defaultStringLength(191);
}
```

## VirtualHostを設定

VirtualHostは設定しなくても動きますが、基本的にはLaravelのpublic以下がドキュメントルードになるので設定しておきます。

### 以下windownの場合（xamppはcの直下にあると想定）

`C:\xampp\apache\conf\extra\httpd-vhosts.conf` の最後に以下を追加

```:httpd-vhosts.conf
<VirtualHost *:80>
DocumentRoot "C:/xampp/htdocs/ディレクトリ名/public"
ServerName ディレクトリ名.localhost
</VirtualHost>
```
DocumentRoot :ディレクトリ名はcomposerで作成したプロジェクト名
ServerName :適当に設定

`C:\Windows\System32\drivers\etc\hosts` の最後に以下を追加
（管理者権限でファイルを開く必要があります。）

```:hosts
127.0.0.1       ディレクトリ名.localhost
```

プロジェクト名.localhost :
 `C:\xampp\apache\conf\extra\httpd-vhosts.conf` で設定したServerNameを指定

上記のファイルが変更できたら、apacheを再起動します。
shinyapps.ioでshinyアプリをクイックデプロイ

### 概要

- 5つくらいコースがあるみたい
- 無料のやつの仕様は、5アプリ & 25アクティブ/Hまで

  

### クイックスタート

1. アカウント作成
   - googleアカウントでログイン可
2. パッケージインストール
   - devtools
   - rsconnect

3. rsconnectの設定

    ```
   rsconnect::setAccountInfo(name="<ACCOUNT>", token="<TOKEN>", secret="<SECRET>")
    ```

4. deployApp()

### 詳細

https://docs.rstudio.com/shinyapps.io/index.html