OmniAICreator/Qiita-1.07M huggingface dataset:
CSS3でなんちゃってグリッチエフェクトもどきを実装する

CSS3が好きなへっぽこエンジニアです！
以前、CSSを使ってグリッチエフェクト(ジジッ…ジジッ…みたいな動きをする、ノイズのようなエフェクト)もどきを作ってみたので、備忘録として投稿します。
opacityとtransformだけで実装した、簡単に作れるなんちゃってエフェクトです。

##こういうの
<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="yyko" data-slug-hash="ExYZomY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="ExYZomY">
  <span>See the Pen <a href="https://codepen.io/yyko/pen/ExYZomY/">
  ExYZomY</a> by y-yoshino (<a href="https://codepen.io/yyko">@yyko</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
かなりざっくりした作りなのですが…
見ての通り、opacityとtranslate3dのアニメーションを細かく設定し、それっぽくなるようにしているだけです。
本当に簡単なので誰でも作れます！

##応用
![ダウンロード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/485322/90c73451-5c30-2d53-e99e-822495883a73.png)
レイヤーが重なっているように見える要素を、::beforeと::afterの疑似要素を用いて作成しました。
これに上記で作ったアニメーションを使って、ちょっとした仕掛けをつけてみます。

<p class="codepen" data-height="526" data-theme-id="0" data-default-tab="html,result" data-user="yyko" data-slug-hash="xxKqXXq" style="height: 526px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="xxKqXXq">
  <span>See the Pen <a href="https://codepen.io/yyko/pen/xxKqXXq/">
  xxKqXXq</a> by y-yoshino (<a href="https://codepen.io/yyko">@yyko</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
疑似要素で作ったレイヤーと、テキストにアニメーションをつけ、表示される際にバグが起きているようにしてみました。

例では動きをつけたい要素全てに同じ動き（guritti-anim）を設定し、animation-delayで遅延させ、表示速度を変えているだけの簡易な作りなのですが、それぞれの要素に異なる動きをつけても面白いかもしれません。


使用する場面は限られそうですが、何かの参考になれば幸いです！
初心者によるJavaScriptによるinput関連の操作の学習

inputなどのフォーム等の操作についてのメモです。

inputの中身を取得するには

```JavaScript:main.js
document.querySelector('input[type="text"]');
```
となる。
`<input type="text" value="○○">`のところを`'input[type="text"]`と[]を使って書くのは覚えておきたいです。

テキストエリアの場合は

```JavaScript:main.js
document.querySelector('textarea');
```
ですね。

取得した要素について

```JavaScript:main.js
  element.focus(); // フォーカスをあてる
  element.select(); // フォーカスをあて、全選択しておく
  element.disabled = true; // 入力させない
```
なんかもあります。
ワンライナーでパイプから受け取った数値をインクリメント

## Overview

Unique なユーザー ID を設定する必要があり、以下のコマンドで最も大きな数値が使われている ID の絞り込みまではできたけど、そこからワンライナーでインクリメントするのに手間取ったのでメモ。

```bash
dscl . -list /Users UniqueID | awk '{print $2}' | sort -ug | tail -1
> 610
```

## One Answer: awk を使う

もう一回 awk 使えばいけました。

```bash
dscl . -list /Users UniqueID | awk '{print $2}' | sort -ug | tail -1 | awk '$0++'
> 611
```

awk を連発するのははコストが高いのかな...
もっといい書き方知ってるよという方いたら教えてください。

### AWK についてメモ

オーク。プログラミング言語の一つ。 
開発者であるアルフレッド・エイホ、ピーター・ワインバーガー、ブライアン・カーニハンの3人の苗字の頭文字で「AWK」。
テキストファイル、特に空白類（スペースの他、タブなど）やカンマなどで区切られたデータファイルの処理を念頭に置いた仕様となっているが、 一般的なプログラミングに用いることも可能。

AWKは、ベル研究所における UNIX 開発の過程で、 sed や grep のようなテキスト処理ツールに演算機能を持たせた拡張ツールとして開発された。

いろいろと機能の拡張が行われた結果、汎用のプログラミング言語と比べても遜色が無いほどの機能を持つようになり、テキスト処理だけではなく、プログラミングもできる。現在でもCSV形式のファイルを簡易に処理する、などの目的で広く使用されている。

### さらに xargs を使えばいい感じ

xargs で最後にパイプで渡された値を指定できるので、ワンライナーで ID の指定までできる。

```bash
dscl . -list /Users UniqueID | awk '{print $2}' | sort -ug | tail -1 | awk '$0++' | xargs dscl . -create /Users/hoge UniqueID
```
HTMLのボックスの概念を整理しておく

#ボックスとは

HTMLには、「ボックス」という概念があり、ブロックレベルの要素に対して適応される。

ブロックレベル要素
-
見出し・段落・表など、文書を構成する基本となる要素。

```
<div>
<form>
<h1>-<h6>
<ul>
<p>
<table>
```

インラインレベル要素
-

インライン要素は、ブロックレベル要素のコンテンツ（中身）として用いられる要素。

```
<a>
<br>
<code>
<i>
<img>
<input>
<label>
<select>、
<span>
<strong>
```
(win)Batを用いて音量調節のショートカットを作成、Logicoolマウス G502に割り当てる(個人メモ)

キーボード操作もマウス移動も行わず、音量バーを表示してホイール操作で音量調節するためのもの。

```音量.bat
@echo off
cd /d %~dp0
::コマンドプロンプトを最小化状態で実行する
if not "%X_MIMIMIZED%"=="1" (
    set X_MIMIMIZED=1
    start /min cmd /c,"%~0" %*
    exit
)
::数値を0にすると左上表示
call %windir%\System32\SndVol.exe -f 49825268
```
![Logicoolソフトウェア設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381378/22399cf2-005f-c060-6eb6-fa8f0aef578f.png)
![Logicoolソフトウェア.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381378/fe17db08-5c54-259b-e8a3-3f93d7547b87.png)
![デスクトップ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381378/45aa96dc-da0f-0a68-a5f7-3a5390f6e48b.png)
priority_queueのカスタム比較 【AtCoder Beginner Contest 137 D - Summer Vacation】

初投稿ですので、至らない所があればご指摘ください。

この問題は`priority_queue`のカスタム比較をしなくても解けますが、自分は本番中にハマって、検索しても適当なものが出てこなかったので書いておきます。

# `priority_queue`のテンプレート
```cpp:priority_queue 

namespace std {
  template <class T,
            class Container = std::vector<T>,
            class Compare = less<typename Container::value_type>>
  class priority_queue;
}
```
[priority_queue - cpprefjp C++日本語リファレンス](https://cpprefjp.github.io/reference/queue/priority_queue.html)

## 通常の利用法

```cpp
    priority_queue<int> pq;
    pq.push(1);
    pq.push(2);
    pq.push(3);
    // [ 3 2 1 ]
```
`push`メソッドで追加された要素は降順に並ぶ。

## 並び順を昇順にしたいとき

```cpp
    priority_queue<int,
                   vector<int>,
                   greater<int>> pq;
    pq.push(1);
    pq.push(2);
    pq.push(3);
    // [ 1 2 3 ]
```
`Compare`に`greater<int>`を指定することで要素は昇順に並ぶ。

# 本題：並び順をカスタムしたいとき

並び順をカスタムしたいときは`Compare`を自作する。
## `class Compare`とは何か
`Compare`は、**比較演算関数オブジェクト**を指定する。デフォルトの比較演算関数オブジェクト`less`のテンプレートは以下のようになっている。

```cpp:less
  // C++14
  template <class T = void>
  struct less {
    constexpr bool operator()(const T& x, const T& y) const;
    using first_argument_type  = T;
    using second_argument_type = T;
    using result_type          = bool;
  };
```

[less - cpprefjp C++日本語リファレンス](https://cpprefjp.github.io/reference/functional/less.html)
つまり、比較演算関数オブジェクトに必要なのは、**引数2つを取り、返り値が`bool`型である`operator()`**ということになる。

# カスタム比較を使用してABC137Dを解く
[D - Summer Vacation](https://atcoder.jp/contests/abc137/tasks/abc137_d)

2種類の`priority_queue`を使用する。1つ目は`pair`の昇順、2つ目は`pair.second`の降順->`pair.first`の降順としている。

```cpp:abc137d.cpp

#include <bits/stdc++.h>
using namespace std;
using ll = long long;
using ull = unsigned long long;

struct comp2{
    bool operator()(const pair<int,int> &p1,const pair<int,int> &p2) const {
        if (p1.second == p2.second) {
            return p1.first < p2.first;
        } else {
            return p1.second < p2.second;
        }
    }
};

int main(void)
{
    int n,m;
    cin >> n >> m;
    priority_queue<pair<int,int>,
                   vector<pair<int,int>>,
                   greater<pair<int,int>>> pq1;
    priority_queue<pair<int,int>,
                   vector<pair<int,int>>,
                   comp2> pq2;
    
    for(int i = 0; i < n; i++) {
        int a,b;
        cin >> a >> b;
        pq1.push(make_pair(a,b));
    }

    int ans = 0;
    for(int i = 1;i <= m ; i++) {
        while(!pq1.empty() && pq1.top().first <= i) {
            pq2.push(pq1.top());
            pq1.pop();
        }
        if (!pq2.empty()) {
            ans += pq2.top().second;
            pq2.pop();
        }
    }

    cout << ans << endl;

    return 0;
}

```
職業プログラマーになる最短の方法

未経験からプログラマーとして就職するのは意外と難しかったりします。
人手不足により企業は人を欲していますが、案外内定をもらえない事も多いです。
その理由は、プログラマーの挫折率の高さ(80%位は平気で挫折)と秘密保持の点から、すぐ辞められたり顧客情報を公開されたら会社側は困るからです。

## 基本的なプログラミングを学ぶ
これは当然ですが、基本的なプログラミングを学ぶ必要があります。[Progate](https://prog-8.com/)を使えば簡単に"基本"は学べます。(ここでいう"基本"とは、順次処理・条件処理・繰り返し処理の事を指す)
ここまで3日以内を目安に行いたい。(有料サービスはやる必要なし)

## やりたい事は何かを決める
自分が仕事としてやりたい事は何かを決める。プログラマーと言っても、ゲームを作る人だったりWebサイトを作る人だったり、アプリを作る人だったり、機械を作る人だったりと様々な選択肢がある。
だから自分がやりたい事は何か、そしてお金をもらってやるなら何が良いか、お金が欲しいのか楽しさを優先するのか等を考えながら、決めていきたい。

## 問題演習をする
問題をやる。基本的な事を理解できずにプログラマーを名乗るのはおこがましい。。
例えば電話番号を半角で必ず入力してくださいという入力フォームを作っていて、入力チェックをしなければいけないとすれば、普通は「半角数字かチェックする、入力されているかチェックする、規定の文字数あるかチェックする」みたいな感じだと思います。
しかし、そういった事を考えつきもしないという事は一番まずいので、そういった事を考えつくように問題演習は少しでもしておくようにしましょう。

## 作品を作る
作品を1つ以上作るようにしましょう。そしてその作品にはどんな風にコードを書いているのかを話せる位に理解できている作品を作れると良いです。
下記のサイトを活用すると作れると思います。(どちらも有料ですが、1000円2000円ぐらい良いでしょ...)
[teckpit](https://www.techpit.jp/)
[udemy](https://www.udemy.com/ja/)

## 作品のコードをGithubに公開
Githubに公開する事でどんなコードを書いているか企業側はわかるので、その人の実力がどんな程度かを判断する材料となります。
またGithubを使えるようになっておく事で企業からも信用されやすくなります。(Gitを使う事はかなり必須なので)

## 勉強期間が重要
プログラミングの勉強期間は長すぎても短すぎてもいけません。
僕が思うベストは作品を作るまでに１ヶ月半です。そこまで集中してやってから作品を提げて、面接にいきましょう！
ちなみに勉強期間が３ヶ月以上かかって作品を仕上げるのは辞めた方が良いでしょう。例え作品に不十分な所があったとしても、より早く面接までいけるようになると内定をもらいやすくなると思います。
勉強期間をなるべく短くする理由は単純に、その方がやる気,誠意の証明となるからです。

## 自分に合う所を
兎にも角にも一番重要な事は、内定はゴールではないという事です。だからこそ我々にも会社を選ぶ権利がある事をお忘れなく。絶対に合う会社はあります！
恩はあれども会社を踏み台にするのもアリです。自分の人生、苦しまないで生きていきましょう。

これは宣伝ではないですが、独学はムリそうと思ったら無料のプログラミングスクールに通うというのもアリです。(人材紹介によりお金を得ているので無料で出来る)
一応その内の１つを紹介します。→[LIKE IT](https://job.likeit.tech/)

**自分のペースでコツコツと**
Dialogflowを使ってプログラミングなしでbot作成

#はじめに

業務でちょっとしたHangoutChatのbotを作成する必要がでてきまして
以下のエントリを読んだりしていました。

Hangouts Chatbotをdialogflowを利用してもっとbotらしくする
https://qiita.com/h-r-k-matsumoto/items/306f02c30529e7aa43d2

とりあえずdialogflowを使ってみようということで
Googleアカウントでログインしてみます。

#HangoutChat連携できる

Agents、Intents、Entitiesとかを分かった気になりつつ
Integrationsを見てみると…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315284/368200b4-0545-c94d-3de5-7d38cc015df3.png)

HangoutChatが連携対象としてあるではありませんか。
GASでAPI叩いて連携させないで済むかも…！と期待しつつ、試してみました。

#各設定内容

やりたいことは
これどこ？と聞かれたらそのURLを返してあげるという感じです。

Agentsの名称を適当に設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315284/6378c3bf-74e1-cd03-f6ed-c3c8f6cbc9ac.png)

次にEntitiesを設定します。（かなりボカしました）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315284/88cde03d-1a7b-d863-e22e-e9fc99d13d00.png)

次にIntestsを設定していきます。
Training phrasesで、文章パターン例を設定するのですが、入力後ダブルクリックして選択という
やり方が最初はピンときませんでした。（こちらの画像も修正入れたので分かりにくい点はご了承ください）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315284/081050da-a7fb-c92d-601e-0ee88ee400aa.png)

Action and parametersとResponsesも設定します。
ここは直感でいけそうな感じです。

ここまで出来たら右上にある Try it now に想定する問いかけを入力してみます。
想定通りの返答が来れば良し、あんぽんたんな返答になる場合は上記の設定がうまくできていないということになります。

#HangoutChat連携

IntegrationsからHangoutChatを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315284/2fe170c4-a284-a675-d1d1-c52c1be0ec86.png)

GCPのAPI設定画面が開くので、使わせたい人、グループ、または自ドメイン全体などを選択します。


#社内向けのお知らせ

社内用なので自ドメイン内での公開となります。

社内申請のURLを返してくれるはず…です。

Hangout ChatのBotを検索を開くとドメイン限定のところに「URLinquiry」があるので追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315284/77ea6fd2-b1ad-049f-12c1-c1af8fc1a71a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/315284/06d60405-c7da-60db-8f52-92b32122abfd.png)


ご要望等ありましたらお知らせください。反映できる保証はありませんが極力がんばります。

#おわりに

現場からは以上です。

:christmas_tree: [FORK Advent Calendar 2019](https://qiita.com/advent-calendar/2019/fork)
:arrow_left: 01日目 [Terminalizerのススメ](https://qiita.com/howking/items/2741808da0abeae85376) @howking 
:arrow_right: 03日目 [Teleportでのクラスタ管理（GCP編）](https://qiita.com/shuhei4009/items/d6ec14c68f2b221abf59)@shuhei4009
PythonのワンライナーでHtmlを参照文字に置換する

クリップボードの中のHtmlを参照文字に変更する。

```shell
cat hoge.html | python -c "import sys, html; print(html.escape(sys.stdin.read(), quote=False));"
```

quoteはデフォルトではTrue。Trueだと `'`、`"` が置換対象になる。
Rails6 Bootstrap4 を使って Heroku で Deploy

#### 経緯
Rails6 で、Bootstrap4を利用していました。開発環境ではBootstrap4 が効いていたのですが Heroku へ Up した際にBootstrap4　が効かなくなってしまいました。解決できたのですが手順を忘れないようのメモです。

#### 参考
- [Rails6 のちょい足しな新機能を試す40(Webpacker Bootstrap編)](https://qiita.com/suketa/items/3f5ff1c7d0d7d215a532)
- [RailsでBootstrapとFont-AwesomeはWebpackerで今時っぽく使おう](https://qiita.com/rhistoba/items/f724dae231d7e28bf477)

### 環境
- Ruby: 2.6.3
- Rails: 6.0.0
- Heroku: 7.29.0 linux-x64 node-v11.14.0

## 1. yarn add で Bootstrap を追加する
※ Rails で 何かしの Project は、作成してあることを前提にします。 `Rails new` して･･･などは割愛します。

Bootstrap jQuery Popper.js を yarn で追加します。

```
$ yarn add bootstrap jquery popper.js
```

## 2. config/webpack/environment.js を編集する
`config/webpack/environment.js`を編集して、jQuery と Popper.js を追記します。

```diff:config/webpack/environment.js
const { environment } = require('@rails/webpacker')


+ const webpack = require('webpack')


+ environment.plugins.append('Provide', new webpack.ProvidePlugin({
+    $: 'jquery/src/jquery',
+    jQuery: 'jquery/src/jquery',
+    Popper: ['popper.js', 'default']
+ }))

module.exports = environment
```

※開発環境では、この追記がなくても Bootstrap4 が効いてくれたのですが、なしで Heroku へ Deploy した際は、Bootstrap4 が効きませんでした。おそらくこの追記が大事だと推測しています。理由としては、「[Rails5.1 + Webpacker で Bootstrap4-beta を読み込む](https://qiita.com/mokuo/items/6d792986e63598370b30)」に記載してある

> jQuery と Popper がグローバル変数として参照できないと、Bootstrap のエラーが console.log に吐かれて正常に読み込まれない。

なのかなー？と思っています･･･。
※ 違う可能性もおおいに高いので詳しい方いたら良ければコメントで教えていただけると光栄です。

## 3. app/javascript/packs/application.js を編集する
Bootstrap4 を import します。

```javascript:app/javascript/packs/application.js
import "bootstrap"
import "../stylesheets/application"
```

##4. app/javascript/stylesheets/application.scss を作成する。
`app/javascript/` ディレクトリ内に、`stylesheets` フォルダを作成、その中に `application.scss` ファイルを作成し下記を追記します。
※ `app/javascript/packs/application.js` に import させる記述と合わせればフォルダ名とファイル名は任意で大丈夫だと思います。

```scss:appjavascript/stylesheets/application.scss
@import "~bootstrap/scss/bootstrap";
```

##5. app/views/layouts/application.html.erb の Head 内の stylesheet_link_tag を書き換える。
記載されている `stylesheet_link_tag` を 'sylesheet_pack_tag' に書き換えます。


```diff:app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <%= display_meta_tags(default_meta_tags) %>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
-    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= render 'layouts/header' %>
    <%= yield %>
  </body>
</html>
```

---

以上の状態で、`git push heroku master` したところ、ちゃんとBootstrap4が効いている状態になりました。実際、なぜ効いていなかった原因については良く分かっていなません。

詳しい方、教えていただけると光栄です。
Blender からUnityへMaterialt付きでExportする方法

#BlenderからUnityへそのままExport
Blenderで苦労してModelingし、その後UV展開して、Texture貼り付けて、node設定して、、、いざ完成し
UnityへFBXでExportしたら、Textureが貼り付けられてない！？

検索で色々調べても良い方法がなく途方にくれたので、同じところで詰まった方への助けに慣れればと思い記事にしました。

##動作環境
Blender v2.8
MacOs v10.14.5
Unity 2019.1.14f

##FBXではなくてGITFを使うと上手くいった
結局FBXでのExportは諦めてGITFでexportする事に。

![スクリーンショット 2019-08-26 17.59.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464190/14dcf4b5-a29a-bb94-ca98-119669b7290f.png)
![スクリーンショット 2019-08-26 18.02.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464190/391c25ed-25d3-7f92-c710-b0952c99ae7b.png)

上のように選択して、適当なところに .glb fileを作ります。

そしてGoogleで
![スクリーンショット 2019-08-26 18.04.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464190/693c3c23-30ea-98f4-9321-cfaa369bddab.png)


と検索し、以下の
![スクリーンショット 2019-08-26 18.05.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464190/9a1ae282-864b-bf13-ab03-515524361914.png)

UniGLTF-1.27.unitypackageをインストール。

Unity側で 
Assets -> import package -> custom package 
と選んで先ほどダウンロードしたUniGLTF-1.27.unitypackageをインストールしてください。

するとUnityの上のメニューバーに以下のように表示されるはずです。
![スクリーンショット 2019-08-26 18.10.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/464190/dc039ed8-7036-7513-1191-017b34e60aa7.png)

ハンバーガーメニューからImportを選択し、先ほどBlenderからExportした.glbを選択！
すると、Blenderで作ったままの姿でUnityに反映されます！

よかったら試してみてください！
ドルフロ　ビンゴイベント　当選番号種類数の期待値計算

###概要
ビンゴイベントで運悪く発表番号が重複し、カッとなって生み出されたウンコード。
数学はよくわからないので、試行回数で実際の期待値に近づける。

ビンゴの仕様については下記の通り

- 6x6　の36マス 
- 1~36の番号が振られている
- 発表番号は重複する（1が呼ばれた次の発表でもう一度1が呼ばれることもある）

###目的
筆者は24枚中17種取得、7枚重複という結果。
これは運がいいのか悪いのか、期待値から判断する。

###ソースコード
```php
    /**
     * 期待値を計算する。
     * @param $cardMaxNum ビンゴカードの番号最大数。今回の場合36
     * @param $drowCount ビンゴを回した数
     * @param $roopNum 試行回数。大きいほど正確な期待値に近づく。
     * @return float 当選番号の種類数の期待値
     */
    private function getBingoExpectValue($cardMaxNum, $drowCount, $roopNum) {
        $kindList = [];
        for ($i=0; $i<$roopNum; $i++) {
            $openedNums = [];
            for ($j=0; $j<$drowCount; $j++) {
                $openedNums[] = rand(1, $cardMaxNum);
            }
            // 重複削除
            $kindList[] = count(array_unique($openedNums));
        }

        return array_sum($kindList) / $roopNum;

    }
```

下記で呼び出して出力

```
    echo($this->getBingoExpectValue(36,24,30000));
```

###出力結果
17.709133333333

###結論
そんなに運悪くなかった。ドルフロは神ゲー
PHP：Javascriptからの非同期処理対応時に、ディレクトリが存在していても、file_existsがfalseを返却する。

# 処理

- JavascriptのXMLHttpRequestにてファイルを非同期で連続してアップロード。
- 1リクエストではなく、非同期で複数リクエスト。
- サーバサイドは、PHPで、ファイル保存用のディレクトリを動的に作成。
- ディレクトリの所有者に書込権限を与える
- フォルダ作成時に、すでにフォルダが存在していれば、作成をスキップするようにする。

```php:make_dir.php

//ディレクトリが存在していれば処理スキップ。
if (file_exists($path)) {
   return;
}

mkdir($path, 0750, true);

```

# 現象

- 2回目のフォルダ作成時に、file_existsがfalseになるが、mkdirのときに「mkdir(): File exists」のエラーが発生する。
- 権限はクリアしているので、１回目のディレクトリ作成、ファイル作成はできている。

```php:make_dir.php

//ディレクトリが存在していれば処理スキップ。
if (file_exists($path)) {
   return;
}

//2回目の処理で、ディレクトリがあるのに、file_existsがfalseになり、
//このステップが処理されるが、ファイルが存在するためエラー。（mkdir(): File exists）
mkdir($path, 0750, true);

```

# 原因の推測

- 非同期で複数リクエストのため、file_existsとmkdirが並行で走り、file_existsで遅延がおきているのか？

# 回避方法

- ErrorExceptionの例外を補足し、ファイルが存在しているためディレクトリを作成できないというエラーの場合のみエラーを潰す。
- エラーコードが定義されていないため、「'mkdir(): File exists'」がErrorException::getMessage()に存在するかで潰すエラーを判別。
- 例外を潰したとしても、そもそも、存在していればフォルダを作る必要もないため問題はない。

```php:make_dir_with_handling_error.php

       define('MKDIR_ERROR_MSG', 'mkdir(): File exists');

        //ディレクトリの存在チェック
        if (file_exists($path)) {
            //存在していれば終了
            return;
        }
        //非同期処理の場合、ファイルが存在しても、file_existsがfalseになる事があるので
        //例外を捕捉
        try {
            mkdir($path, 0750, true);
        } catch (\ErrorException $e) {
            if (false === strpos($e->getMessage(), self::MKDIR_ERROR_MSG)) {
                //ディレクトリ作成以外のエラーの場合は例外を再スロー
                throw $e;
            }
        } catch (Throwable $t) {
        //上記以外の例外も再スロー
            throw $t;
        }
 

```

# 発生背景

- オンラインでWebページを編集できるJavascriptライブラリ、[GrapesJs](https://grapesjs.com/docs/modules/Assets.html) のAssetManagerをつかってファイルを連続アップロード。
- Laravelにて、上記のファイルを受け取る。
- ディレクトリ関連処理は、Storage関連メソッドでも同じ現象。標準関数でも同様の現象のため、上記のコードで記載。
Unity Editor のスクリプトファイルを VSCode で開く方法

# はじめに
Unity Editor上でのコンパイルエラー ( ファイルパス ) をダブルクリックすると、
デフォルトで設定された Visual Studio 2017 が起動するのですが、個人的に、
VSCodeでコーディング作業を進めたいので、標準エディタ設定を変更してみます。

# 事前準備
- Unity 2019.1+  ( ```インストール済み``` )
- Visual Studio Code ( ```インストール済み``` )

# 導入手順 ( 5mins )
1. Unity 2019.1+ を立ち上げます。
<img src="https://img.esa.io/uploads/production/attachments/3505/2019/07/07/10862/2b327aaa-4d71-40af-9d5d-149f00902a77.png" width="550">

2. 最上部のメニューから [```Edit```] > [```Preferences...```] を開きます。
3. [```External Tools```] > [```External Tools```] > __[External Script Editor]__ へと進み、<font color="red">__「Visual Studio Code」__</font> を選択します。

<img src="https://img.esa.io/uploads/production/attachments/3505/2019/07/07/10862/9009bb01-b63d-432d-85bf-d7ca2f4365fe.png" width="550">

※ Visual Studio Code インストール先 ( Default ) は、以下の通り。
```
[YourUserName]\AppData\Local\Programs\Microsoft VS Code\Code.exe
```

4. Unity Editor 上から、スクリプトファイル ( C# ) を開いてみます。

<img src="https://img.esa.io/uploads/production/attachments/3505/2019/07/07/10862/608b496c-da32-47c3-8962-635d9b6f6527.png" width="550">


5. 無事、__Unity__ から __Visual Studio Code__ を立ち上げることが出来ました。
<img src="https://img.esa.io/uploads/production/attachments/3505/2019/07/07/10862/fd83db53-3673-43cd-adad-feeaf90da0d5.png" width="550">

6. VS Code には、C#の拡張機能 ( エクステンション )があるので、インストールすると便利です。

<img src="https://img.esa.io/uploads/production/attachments/3505/2019/07/07/10862/370d75e4-2b4c-48c4-abfa-efae3b06e7b2.png" width="550">


# さいごに
簡単に __Unity__ から __Visual Studio Code__ を開くことが出来ました。
Ubuntu 19.04 で TouchPad の TappingDrag を disable にする方法

# TL;DR

```
$ gsettings set org.gnome.desktop.peripherals.touchpad tap-and-drag false
```

# 経緯

- `libinput` 経由で使う TouchPad には `Tapping Drag` という機能がある。
  - 2回連続で tap (トントン) としてから指を動かすと Drag しているとみなされる。
  - が、この機能はたくさんあるチェックボックスを連続でチェックするような場合などに誤操作しまくりになり、はっきりいって不便。
- `Tapping Drag` を GNOME3 環境で外す方法を記載するよ。


# disable TappingDrag

## gsettings

- この方法が安全確実。
  - ただしこの方法だと `libinput` から TouchPad だと認識されたデバイス全てで同様の設定を行なってしまうので注意。

```
$ gsettings set org.gnome.desktop.peripherals.touchpad tap-and-drag false
```

## xorg.conf

- `libinput` の設定を変更するには `xorg.conf` に記載する方法もある。
- ただしこの方法だと GNOME3 が設定を上書きしちゃうので、意図通りの設定ができない。
  - GNOME3 以外の環境(KDE や Xfce など)だとこの方法が安全確実なのかもしれない。

```/etc/X11/xorg.conf.d/99-libinput-custom-config.conf
Section "InputClass"
        Identifier "libinput TouckPad"
        MatchIsTouchpad "on"
        MatchDevicePath "/dev/input/event*"
        Option "Tapping" "on"
        Option "TappingDrag" "off"
        Option "TappingDragLock" "off"
        Driver "libinput"
EndSection
```


# See Also

- [libinput \- libinput\-based X\.Org input driver \- man page](https://www.mankier.com/4/libinput)
- [libinput \- Gentoo Wiki](https://wiki.gentoo.org/wiki/Libinput)
- [gnome \- How to disable the "tap dragging"\-feature in Ubuntu 18\.04 \(libinput\) without disabling "tap to click"? \- Ask Ubuntu](https://askubuntu.com/questions/1032459/how-to-disable-the-tap-dragging-feature-in-ubuntu-18-04-libinput-without-dis)
【C++】連続する正の整数で約数の和が等しいペアを探すプログラム

### はじめに
前から何回かこのサイトを覗きお世話になることはありましたが、登録して記事を投稿させていただくのは初めてです。
そのためプログラムの内容ももちろんそうですが、そもそも記事の書き方に不慣れであることをご了承ください。

僕は学校でプログラムをやっているわけでも、数学を専攻しているわけでもない、ただの機械工学科生です。
しかし学校でほんの少しだけc++を習ったので今回それを用いて表題のようなプログラムを書いてみました。動機については後述します。
なので、数学的表現やプログラムの書き方に大いに問題があると思います。
実際あれだけ使うなと言われているgoto文を使用しています。使わずに処理を進める方法があれば教えてください。自分では思いつけませんでした。

普段やってる方からしたら笑ってしまうような記述もあると思います。
どれだけ細かいことでも改善点やおかしいところ等あればどんどん指摘して欲しいです。
今回投稿させていただくのは普段プログラムやってる方に見てもらって添削してもらえたら幸せだなぁという願望もあるので、ぜひよろしくお願いします！

### 動機
ある日、暇潰しにwikipediaの数字のページを眺めていました(数字のページっていうのはこういうやつです[1 | wikipedia](https://ja.wikipedia.org/wiki/1))。
ちなみに、このページに今回の題目である各数の約数の和が記載されています。
1から順番に数を大きくしていってそれぞれの数字が持つ性質に感心していたわけですが、14の次に15に飛んだ瞬間にあることに気が付きます。

14の約数の和と、15の約数の和が同じ24なのです。

これってすごくないですか？だから何？と言われてしまえばそこで終わってしまうことなのですが、自分はこういうどうでもいいことに感動してしまう人間なので気付いたときビックリしました。
他にこの組み合わせってないのかな？と思ったのですがwikipediaには約数の和が等しい数字のページは用意されていませんでした。
そこで、学校で昔c++を習ったことを思い出し、プログラムを使って他の組み合わせを発見することってできないのかな？と思ったのが動機です。
もしかしたら他にこんな数字の組み合わせないんじゃないか？とすら思いました(ありました)。
その数自身を含めなければ友愛数というとても素敵な名前が与えられているんですけどね。
なんでその数を約数に含めた瞬間こんなに影が薄くなっているんだろう？
もしかしたら自分はすごい変なことしてるかもしれないんですが、初めて自分でプログラム考えて書いたので記念に残しておきます。

### c++のコード

```cpp


#include<stdio.h>

int main()
{
	int i,i2,num,num2;
	int m= 0,m2=0;
	int answer;
	
	for (num = 1;; ++num) {

		int m = 0, m2 = 0;

		//約数を求める

		printf("%dの約数は ", num);
		for (i = 1; i <= num; ++i) {
			
			//次の組み合わせを探すが選択された際にここまでgotoでジャンプしてきます
			next:

			if (num%i == 0) {
				printf("%d ", i);
				//約数を求めた

				//約数の和を求める
				m = m + i;
				//約数の和を求めてそれをmに代入した
			}
		}
		printf("この数の約数の和mは%d", m);

		//連続する整数なのでnumに+1する
		num2 = num + 1;
		printf("\n連続する整数は%d\n", num2);

		//約数を求める
		printf("連続する数%dの約数は ",num2);
		for (i2 = 1; i2 <= num2; ++i2) {


			if (num2 % i2 == 0) {
				printf("%d ", i2);
				//約数を求めた

				//約数の和を求める
				m2 = m2 + i2;
			}
		}

		printf("この数の約数の和m2は%d\n",m2);
		printf("連続する整数は%d,%dで",num, num2);
		printf("その約数の和は%d,%d\n\n\n", m, m2);
		
		if (m == m2) {
			while (1) {
				printf("次の組み合わせを探しますか？\n探す場合は1、終了する場合は0を入力してください。\n");
				scanf_s("%d", &answer);

				switch (answer) {

					case 0:	exit(0);

					case 1:	goto next;
							//次の組み合わせを探すために処理の先頭にジャンプしています
							break;
					
					default:printf("入力された値が不正です。\n");

				}
			}
				
		}
	}

	return 0;

}

```

多分、というか絶対慣れてる人から見たら変なことだらけだと思います。ご指摘お待ちしております。
BlazorのClient側でポーリングする

Blazorの Client-Sideでポーリングする仕組みを作ります。実装は難しくありません。

##デフォルトプロジェクトのFetchData.razorを改造
クライアントに初めから作成されている、FetchData.razorを改造し、一定間隔でデータを更新する処理を作成します。

Task.Delay()を使い一定間隔で動作させ、this.StateHasChanged()で画面更新します。

```C#:FetchData.razor
    protected override async Task OnInitializedAsync()
    {
        while (true)
        {
            await Task.Delay(1000);

            forecasts = await Http.GetJsonAsync<WeatherForecast[]>("weatherforecast");

            this.StateHasChanged();
        }
    }
```

##動作画面
![ezgif-5-4d51b012c8dd.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110304/812924f6-f0aa-1ee4-eef1-7cec5ed2279a.gif)
LINE WORKS Bot API のバージョンアップ対応 (v2.6)

2019 年 7 月のアップデートで LINE WORKS の Bot API の構造が変わりました。

変更点と対応ポイントについてまとめましたので、参考にしてください。

# 主な変更ポイント
主なポイントは 3 点です。特に、1 の REST API 化に伴う対応は、1年以内 (できればなるはや) に実施する必要がありますので注意してください。

### 1. REST API 化
Bot の登録、変更やメッセージ送信など、API 全体の REST 化が行われました。
これに伴い、URI の構造も変更されてバージョン番号が "v1" にリセットされたことも注意が必要です。
### 2. Quick Reply の追加
全てのメッセージ形式で、Quick Reply を追加できるようになりました。
QuickReply の追加方法については[別の記事](https://qiita.com/KIchiyanagi/items/9664d5d716240d54e0b6)に記載しています。
### 3. カルーセル、リッチメニューなどのコンテンツ追加
LINE WORKS でもようやくカルーセルやリッチメニューなどのリッチな表現が使えるようになりました。新しいコンテンツは、旧APIからは利用できないので注意が必要です。

# 既存の Bot の移行ポイント
API がバージョンアップしても、すでに登録済みの Bot に対して手動でバージョンアップや再登録の作業は不要です。
Bot No. もそのままで新しい API を利用できます。
最小の工数で新しい API に移行するための作業は以下です。

## メッセージ送信
送信先 URL とリクエスト ボディ内の botNo. の指定方法が変わります。

旧 URL
**https://apis.worksmobile.com/{API_ID}/message/sendMessage/v2**

新 URL
**https://apis.worksmobile.com/r/{API_ID}/message/v1/bot/{botNo}/message/push**

>* botNo はリクエスト ボディではなく URL 内に記述するよう変更されました。
* REST 対応済み API では API ID の前に /r/ が入ります。(わかりやすさ？なのかな。。)

リクエストボディは、botNo パラメータだけ削除すれば OK です。

## メッセージ受信
受信形式に変更ありません。

## Bot 登録 / 修正 / 削除
これまで Bot の登録や修正にはそれぞれ個別の URL が割り当てられていましたが、REST化にあわせてHTTP メソッドで指定する形に変更されました。

新 URL
**https://apis.worksmobile.com/r/{API_ID}/message/v1/bot/{botNo}**

| 操作       |      新 API の HTTP メソッド| 旧 API の URL       |
|:-----------------|------------------:|:------------------:|
| 登録             |              POST |        ~/regiserBot/v4        |
| 修正           |          PUT   |       ~/updateBot/v4       |
| 削除             |              DELETE |         ~/removeBot       |
| 照会              |                GET |        ~/getBotList/v4 , /getBotInfo/v4          |

>照会は、botNo の引数がなければ Bot リスト照会、botNo があれば Bot 詳細情報の照会となります。

#その他の注意点
* 固定メニューと新規に追加されたリッチメニューはどちらか片方しか指定できません。
* メッセージ受信サーバー追加やBot 利用メンバーの登録 / 削除など一部の API はまだ REST 化されていません。
storybookのstoryshotとemotionでsnapshotテストする方法

## 経緯:runner_tone4:
storybookの[storyshot](https://github.com/storybookjs/storybook/tree/master/addons/storyshots)でsnapshotテストを導入しました。
そこで[emotion](https://emotion.sh/docs/introduction)を使っていて、この子がランダムなクラス名を自動生成してくれるのですが、実際に適応されるcssが同じでもクラス名が以下のように変わってたり変わってなかったりします(ロジックまでは見てないので、どうして同じパターンもあるのかはわからない)。

```ts
exports[`Storyshots button 1`] = `
<button
  className="css-z0t02t-Button ej1mrh80"
  type="button"
>
  button
</button>
`;
```

これではテストごとに失敗する可能性があり、失敗した理由がわからないのでテストの意味があまりない。。。:cry:
で、いい方法はないかな〜と思ってやってみました。

## 設定方法:pencil2:

storyshotを入れていない人は、まず[readme](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core)に従って設定してください。

[jest-emotion](https://www.npmjs.com/package/jest-emotion)を使います。

```sh
npm install --save-dev jest-emotion
```

`initStoryshots()`を以下のように修正

```typescript
import initStoryshots from '@storybook/addon-storyshots';
import serializer from 'jest-emotion';

initStoryshots({
  snapshotSerializers: [serializer]
} as any);
```
でsnapshotを作成すると

```typescript
exports[`Storyshots button 1`] = `
.emotion-0 {
  margin-right: 16px;
}
<button
  className="emotion-0 emotion-1"
  type="button"
>
  button
</button>
`;
```

これでクラス名は固定されて、スタイルの差分がでるので確認しやすくなりました:sunny:
他にいい方法もありそうな気がしているので、知ってたら教えてくださいm(_ _)m

#### initStoryshotsでオブジェクトをanyにしてるわけ。

ドキュメントには`snapshotSerializers`がoptionとして載っているのですが、型定義には以下のようになっています。(2019/08/26現在)

```ts
export interface InitOptions<Rendered = any> {
    configPath?: string;
    suite?: string;
    storyKindRegex?: RegExp;
    storyNameRegex?: RegExp;
    framework?: string;
    test?: Test;
    renderer?: (node: JSX.Element) => Rendered;
    serializer?: (rendered: Rendered) => any;
    integrityOptions?: {};
}
```
となっているので、anyで逃げました:sweat_smile:
> https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core#snapshotserializers
console-badgeを使って、作ったWebサービスのConsoleを華やかにしてみた

[@omuriceman](https://twitter.com/iijima_wataru)さんの記事を見て、おもしろそうだと思い、
最近作った[積読用の読書管理サービス](https://tsundoku.site)に取り込んでみたときの備忘録。

- [ブラウザのデバッグコンソールにshields.io風のログを簡単に出力できるOSS「console-badge」 ](https://omuriceman.hatenablog.com/entry/console-badge)

## こんな感じになりました♪

<img width="722" alt="スクリーンショット 2019-08-26 5.03.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/7cf9a245-3da1-e583-fed2-91946e29c104.png">

コンソールが可愛い感じに(*´ω｀*)　続きもあるので、
ぜひ「[積読ハウマッチ](https://tsundoku.site)」のコンソールをのぞいてみてください♪

## console-badgeをつかうと簡単に!

使ったのは[記事](https://omuriceman.hatenablog.com/entry/console-badge)で紹介されている[console-badge](https://github.com/dennis47528/console-badge)。


## 使い方

### インストール

まずはnpmでインストール。

```console
$ npm i -S console-badge
```

### 簡単なサンプル

冒頭のスクリーンショットにあるコードはこんな感じ。

```javascript
import * as consoleBadge from 'console-badge';

consoleBadge.log({
  leftText: "遊んでくれて...",
  leftBgColor: "#776f59",
  leftTextColor: "#FFFFFF",
  rightText: "ありがとうございます🎉🎉🎉",
  rightBgColor: "#FFFFFF",
  rightTextColor: "#58595B"
});
```

`consoleBadge`をインポートして、使えばOK。簡単(*´ω｀*)


### 使い方: ログレベル

基本的には`console.log`などの拡張のため、ログレベルを指定できる。

- `consoleBadge.log()`
- `consoleBadge.info()`
- `consoleBadge.warn()`
- `consoleBadge.error()`

### 使い方: 設定項目とデフォルト値

[公式ドキュメント](https://github.com/dennis47528/console-badge/blob/master/docs/API.md)に書いてある設定項目とデフォルト値はこんな感じ。

デフォルトのままだと、こんな表示に(*´ω｀*)

![スクリーンショット 2019-08-26 5.14.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/70ab7afd-91da-db29-78a1-b4e01ea0ca54.png)

```javascript
consoleBadge.log({
  mode: "default",          // スタイルの設定. "default"と"shields.io"を選択可

  leftText: "Lorem",        // 左側のテキスト
  leftBgColor: "#555555",   // 左側の背景色
  leftTextColor: "#FFFFFF", // 左側の文字の色

  rightText: "Ipsum",       // 右側のテキスト
  rightBgColor: "#0366d6",  // 右側の背景色
  rightTextColor: "#FFFFFF" // 左側の文字の色
});
```

構成としては、
1. 左右に文字を表示できて、
1. 全体のスタイルと、
1. 左右それぞれにテキスト/背景色/文字の色を指定できる

これらの設定値を好きなものに設定すると、すこし華やかになる♪
Nuxt.jsで作ったサービスでは、defaultのlayoutにあるmounted関数に書いて表示するようにしています！

以上!! 簡単(*´ω｀*)

# こんなのつくってます

最近、積読用の読書管理アプリ「積読ハウマッチ」をリリースしました!
今回のconsole-badgeを使ったメッセージもあるので、ぜひ見てもらえると(*´ω｀*)

[積読ハウマッチ](https://tsundoku.site)は、Nuxt.js+Firebaseで開発してます!

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478782/572d4947-f40b-e4dc-1c9c-bc584cd2a66c.png" width="25%"/>

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント([@MemoryLoverz](https://twitter.com/MemoryLoverz))や開発者([@kira_puka](https://twitter.com/kira_puka))まで。

# 参考にしたサイト
- [ブラウザのデバッグコンソールにshields.io風のログを簡単に出力できるOSS「console-badge」 - omuriceman's blog](https://omuriceman.hatenablog.com/entry/console-badge)
- [dennis47528/console-badge: 🎨 Create simple badges in the browser console](https://github.com/dennis47528/console-badge)
GoでNewRelicまわり

# 基本

公式参照

>Go 用 New Relic のインストール | Degica x New Relic (New Relic 日本代理店)
https://newrelic.degica.com/docs/agents/go-agent/get-started/get-new-relic-go

# [smacker/newrelic-context](https://github.com/smacker/newrelic-context)

httpのContextベースでトランザクションを設定して、RDBやRedis等のセグメント計測を行ってくれる。便利。

`gorm.DB`や`redis.Client`インスタンスをcontextを使ってWrapする必要があるので予め想定したアーキテクチャにしておく。



# gocraft/work用middleware

```go
func NewrelicJobQueueMiddleware(appname, license string) (work.GenericMiddlewareHandler, error) {
	app, err := newrelic.NewApplication(newrelic.NewConfig(appname, license))
	if err != nil {
		return nil, err
	}
	return func(job *work.Job, next work.NextMiddlewareFunc) error {
		txn := app.StartTransaction(job.Name, nil, nil)
		defer txn.End()

		return next()
	}, nil
}

//...

nm, _ := NewrelicJobQueueMiddleware("your_app", "YOUR_LICENSE")
pool.Middleware(nm)
```
qiitaに投稿するときに画像が回転しちゃう現象はpythonで３行で直せる

#背景
[他の記事](https://qiita.com/daikiclimate/items/29ad639e7b8e8a1a5263)を書いている際に、縦向きの写真が横向きになる現象に遭遇。
（自分の記事へのリンクを貼るという姑息さ）

Markdownで直したかったが機能せず、[検索して出てきた記事](https://qiita.com/gecko655/items/ea860c6fa32ff97eff89)は何をやっているかよくわからなかった。(Rubyわかりません...)
この記事によるとEXIFという写真に撮った時の向きを保存することができるらしいのだが、それが結局よくわからない働きをしているらしい。

#Target
![pic.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404462/41680a20-2595-4703-5e89-15554a903240.jpeg)

こいつはダウンロードしてひらくとこうなる。
<img width="548" alt="スクリーンショット 2019-08-26 16.50.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404462/872a827c-5838-506d-145a-94aa834a3530.png">

なんでやねん！
さっきまで横だったのに縦に戻ってるやん！

これをpythonでさくっと直します。

#方法

Opencv入ってない人はターミナルから入れておきましょう。

```
pip install opencv-python
```

あとは以下のようにコードを書くだけです。会話モードでも大丈夫です。

```
import cv2
a = cv2.imread("pic.jpeg")
cv2.imwrite("pic2.jpg")
```

開いて保存するだけです。同じフォルダでpic2.jpgが保存されているかと思います。

![test.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404462/b9a5c9ab-57f8-4284-2019-38650b9ef278.jpeg)


おそらくですが、これによりスマホから撮影時に付与されていたExif情報含め諸々なくなります。これにより勝手に向きを直されることがなくなるのかと思います。

#ひとりごと
わざわざpythonでやりましたが、普通に適当な画像編集ソフトやなんかで再保存することで解決可能かと思われます。
ただし、Exif情報を読み込まれて、そのまま再保存されては意味がないので、その点だけご注意を。
equals()メソッドとhashcode()メソッドについて

java初心者です。

今回Informationというクラスを作り、その中に
**・address(住所)[String]**
**・phone(電話番号)[String]**
というフィールドを作りました。
また、それぞれの項目にgetter及びsetterを用意しました。

次に、連絡先の検索機能を作るために、Personクラスを作り、その中に、
**・name(名前)[String]**
**・birthDay(誕生日)[int]**
**・information(情報)[Information]**
というフィールドを作り、コンストラクタの因数で名前と誕生日と情報をセットするようにして、それぞれのgetterを用意しました。

次に、Informationクラスに以下の３つのメソッドを追加しようとしました。
**・toString()**
**・equals()**
**・hashcode()**

このときInformationが正しいというのは、住所と電話番号が一致していることとしました。
また、toString()では、すべてのフィールドを文字列にして返すようにしました。

toString()、equals()はネットの情報などを頼りに、なんとなくですが完成させました。
しかし、hashcode()がいまいちよくわからず、苦戦しています。

現在私が作成したコードは以下のものとなっています。
hashcode()以外にも、至らない点がたくさんあると思うので、その点に関してもコメントいただけたら嬉しいです。


```ruby:Person.class

public class Person {

  private String name;
  private int birthday;
  private Information information;

  public Person(String name, int birthday, Information information) {
    this.name = name;
    this.birthday = birthday;
    this.information = information;
  }

  public String getName() {
    return this.name;
  }

  public int getBirthday() {
    return this.birthday;
  }

  public Information getInformation() {
    return this.information;
  }
}
```

```ruby:Information.class

public class Information {

  private String address;
  private String phone;

  public Information() {}

  public String getAddress() {
    return this.address;
  }

  public String getPhone() {
    return this.phone;
  }

  public void setAddress(String address) {
    this.address = address;
  }

  public void setPhone(String phone) {
    this.phone = phone;
  }

	public String toString(){
    String str = address+","+phone;
    return str;
  }
  
  public boolean equals(Object other) {
    
     if (this == other) { 
            return true;
        }

     if (!(other instanceof Information)) { 
            return false;               // 
        }

        Information otherInformation = (Information) other;
     if ((this.address == otherInformation.getAddress()) && (this.phone == otherInformation.getPhone())){ 
            return true;
        }
        return false;
    }
  
	public int hashcode(){
   //わかりません。
  }

}
```
【DynamoDB】KeyConditionExpressions must only contain one condition per keyの対応

DynamoDBで下記のような抽出条件を実施する。
`KeyConditionExpression: 'id = :id and startAt >= :startAtAfter and startAt <= :startAtTo',`

そうすると、次のようなエラーが発生
`KeyConditionExpressions must only contain one condition per key`

重複した項目を抽出要件に含められないとのこと。次のようなクエリにして対応した。
`KeyConditionExpression: 'id = :id and startAt BETWEEN :startAtAfter  AND :startAtTo'`
Node.jsを使ってChatworkに画像をアップロードをする

## 動機
ChatworkAPIで画像をアップロードしたいときにcurlを使えばサクッとできますが、Node.jsで使いたい場合のケースもあると思います。
ただ、検索してみるとPythonとChatworkAPIの説明は有志ある方があるけれども、**Node.jsとChatworkAPIを使っての画像アップロードの方法についての説明が中々ない・・・**
という思いをきっかけに書いてみました。

（´-`）.｡oO（頑張ってアップロードできるコードを書いてみよう・・・）

## コードを書く前に確認
* request, fsを使うため、npmにてインストールされていること

## サンプルコード
``` js
/**
 * chatworkにAPI経由で画像をアップロードするテスト（Node.js）
 */
var con = require('./const.js');
var req = require('request');
var fs  = require('fs');

var formData = {
    'file' : {
        'value'   : fs.createReadStream('./hogehoge.png'), // アップロードしたいファイルを指定してください
        'options' : {
            'filename'     : 'hogehoge.png', // ファイル名は任意でどうぞ
            'Content-Type' : 'image/png'     // 画像ファイルに合わせて変更してください
        }
    },
    'message'        : 'hogehogeをnode.js使って送るよ！' // 一緒に送信したいメッセージはこちらに。なければ省略可。
};

var options = {
    'url'      : 'https://api.chatwork.com/v2/rooms/' + con.room_id + '/files',
    'formData' : formData,
    'headers'  : {
        'X-ChatWorkToken' : con.token_id,
        'Content-Type'    : 'multipart/form-data'
    }
};

req.post(options, function (error, response, body) {
   console.log(body);  // 送信後の処理はこちら
});
```
※room_idとtoken_idは別のjsにmodule.exportsで記載しています

## 解説
ChatworkAPIリファレンスにあるリクエストボディイメージ（例）ですが、
このフォーム部分の準備をformData変数で行っています。
>
--------------------------f295b94a5560e2eb
Content-Disposition: form-data; name="file"; filename="hogehoge.png"
Content-Type: image/png
abc012....binarydata....789de
...
--------------------------f295b94a5560e2eb
Content-Disposition: form-data; name="message"
hogehogeをnode.js使って送るよ！
--------------------------f295b94a5560e2eb--

## 実行した後のチャット画面
以下のようになります。
やった、、、あがった！ε-(´∀｀*)ﾎｯ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/133913/6c173da3-fbc7-033c-b89d-3fc56f59cfca.png)

## 最後に
例外処理とか色々実装する必要がありますが、ひとまずアップロードするという目標達成のために割愛させて頂いてます。。。
送信ユーザーを別にするなどはまたどこかの機会で。

## 下記サイト様の内容を参考させて頂きましたm(_ _)m
* Chatwork API ドキュメント：チャットに新しいファイルをアップロード
    * http://developer.chatwork.com/ja/endpoint_rooms.html#POST-rooms-room_id-files
* ChatWork に画像をアップロード in Python
    * https://qiita.com/Doarakko/items/b7f44c227cd712da1051
* Node.js requestモジュールでmultipart/form-dataをPOSTしてファイルアップロード
    * https://www.sawalemontea.com/entry/2019/05/10/205204
* node.jsのrequestモジュールを使って別サーバにFileをPOSTする
    * https://teratail.com/questions/67531
Oculus QuestでOVRPlayerControllerが動かない時

#OculusQuestでOVRPlayerControllerが動かない時
OculusQuestでFiled上にOVRPlayerControllerを配置し、いざBuild！　
してみても、全くプレイヤーが動かない。コントローラを動かしても反応しない！！！

色々な設定を見直したり、UnityのVersionを更新してみたり、OculusIntegrationをインストールし直したり、、、、、（毎回めちゃ時間かかる）
めっちゃくちゃ時間を浪費しても結局治らなかった。。。

同じように困った方がいた時のために書きました。

##最終的な解決方法
結局　https://framesynthesis.jp/tech/unity/oculusquest/
の方が、Questで両手のコントローラーが出るようにする方法というところで
>
OVRCameraRig にアタッチされている OVR Manager の Target Devices の “Gear Vr Or Go” を “Quest” に変更する
以下のメニュー操作で Asset/Plugins/Android/AndroidManifest.xml を作る
Oculus > Tools > Remove AndroidManifest.xml
Oculus > Tools > Create store-compatible AndroidManifest.xml
>
そして生成された AndroidManifest.xml の
```
<category android:name="android.intent.category.INFO"/>
```
のところを
>
```
<category android:name="android.intent.category.LAUNCHER"/>
```
と書き直す
>

上記の書き換えをするとすんなり上手く行きました。

ほんと、なんなんだよもう。Defaultで設定しといてくれよ。。。。。。。
AWS SAM 構文を利用した CloudFormation による Lambda と API Gateway の作成

#はじめに
今回は AWS SAM 構文を利用し、 Hello を返す API を作成しました。
AWS SAM 構文を利用すると、シンプルな設定のみでAPIを作成できます。

今回作成するシステムの構成図を以下に示します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390035/361b280f-652c-929b-d78c-d68253782e64.png)


# 開発環境
- AWS-CLI 1.16.158
- Microsoft Windows 10 Home

※AWS CLI のインストールをしていない場合は、以下を参考にインストール、認証を行ってください。
[AWS CLI のインストール](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-chap-install.html)
[AWS CLI の認証](https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-chap-configure.html)

#yaml ファイルの作成

この yaml ファイルに API Gateway と Lambda の設定を書き込みます。
今回使用した yaml ファイルは以下の通りです。

```yaml

AWSTemplateFormatVersion: '2010-09-09'

#AWS SAM構文をCloudFormation用に変換する宣言
Transform: 'AWS::Serverless-2016-10-31'

#スタックの説明
Description: test-stack
Resources:
  hellofunction:
    Type: 'AWS::Serverless::Function'
    Properties:
      #用意したPythonファイル名を.lambda_handler前に付ける
      Handler: Hello.lambda_handler

      #作成されるLambda関数名
      FunctionName: HelloFunction
      
      #Lambda関数に記述されるコード
      CodeUri: Hello.py

      #ランタイム設定
      Runtime: python3.7

      #Lambda関数の説明
      Description: 'Hello api'
      
      #メモリサイズ設定
      MemorySize: 128

      #タイムアウト時間設定
      Timeout: 30

      #イベントを設定
      Events:
        helloapi:
          #イベントを決定
          Type: Api
          Properties:
            #APIのパスを決定
            Path: '/hello'
            #メソッドを設定
            Method: get


```

#Pythonコードの作成
ただ、Hello を返すコードを記述しました。


```Python
import json

def lambda_handler(event, context):
    return {
        'statusCode': 200,
        'body': json.dumps('Hello')
    }
```

#各ファイルをパッケージ化し、テンプレートとしてs3にアップロード
以下のコマンドで、各ファイルをパッケージ化し S3 にアップロードします。
このパッケージは、この後 CLoudFormation にデプロイするために利用します。

```
aws cloudformation package --template-file 作成したyamlファイル名 --s3-bucket パッケージを保存するS3バケット名 --output-template-file 作成するテンプレートファイル名.yaml
```

#デプロイ
作成したテンプレートを以下のコマンドでデプロイします。
先ほどのコマンドの実行結果からコマンドをコピペします。
--stack-nameには任意のスタック名を入力し、末尾に--capabilities CAPABILITY_IAMを付けて実行します。
--capabilities CAPABILITY_IAMは IAM 関連の処理を行う際に必要になります。

```
aws cloudformation deploy --template-file C:\xxx\作成したyamlテンプレートファイル名 --stack-name 任意のスタック名 --capabilities CAPABILITY_IAM
```

# 作成されたAPIの確認
実際に、作成されたAPIをたたくと以下のように Hello と表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390035/c76b4f73-640b-802c-51ca-8265e129fdf2.png)
# おわりに
今回はAWS SAM 構文を利用して、API を作成しました。
AWS でサーバーレスアプリケーションを構築する際は、CloudFormation の構文を利用するより、SAM 構文のほうがシンプルに書けるので試してみてください。
Ubuntu,Dockerで私がよく使うコマンド

# はじめに
仕事でブロックチェーン基盤の一つ、HyperledgerFabricを触り始めた。
fabricの知識を得るのにQiitaの諸先輩方の記事をたくさん参考にさせていただいた。
で、私も何か投稿したくなったのでとりあえず何か投稿しようと思い、まずは覚書だけでも。

fabricはUbuntu上で構築したが、UbuntuというかLinuxもほぼ初めてだったのでPC上にはUbuntu、Dockerのコマンドメモでいっぱいに。
マークダウン記法の勉強もかねてまずはこれを書いてみようと思う。

## 覚書
### Ubuntuで使えるコマンド

- ubuntuの環境変数を表示

```
ubuntu@ns-ubuntu:~$printenv
LANG=ja_JP.UTF8
OLDPWD=/home/ubuntu
USER=ubuntu
GOPATH=/opt/gopath
PWD=/opt/gopath/src/github.com/hyperledger/fabric-samples/first-network
HOME=/home/ubuntu
GOROOT=/opt/go
XDG_DATA_DIRS=/usr/local/share:/usr/share:/var/lib/snapd/desktop
SSH_TTY=/dev/pts/0
MAIL=/var/mail/ubuntu
TERM=xterm
SHELL=/bin/bash
LOGNAME=ubuntu
PATH=/opt/go/bin:/opt/gopath/bin:/opt/go/bin:/opt/gopath/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/opt/go/bin:/opt/gopath/bin
LESSOPEN=| /usr/bin/lesspipe %s
_=/usr/bin/printenv

```

- ファイル移動

カレントディレクトリの`test.go`を`20190708/`ディレクトリに移動する

```
mv test.go 20190708/
```

- カレントディレクトリ内ファイルに含まれる文字列の正規表現置換

カレントディレクトリ内のファイル全て(*で指定)内の、"BankA"を"BankB"に置換。
置換前のファイルは名前末尾に`.bak`を付与してバックアップ保存

```
grep -l BankA * | xargs sed -i.bak -e 's/BankA/BankB/g'
```

### Dockerで使えるコマンド

- コンテナ内でviが使えないとき(インストールされていないとき)
以下コマンドでviをインストール

```
apt-get install vim
```

- dockerコンテナ操作

```
#コンテナ停止
docker stop `docker ps -a -q`
#コンテナ削除
docker rm `docker ps -a -q`
#CCのdocker imageを削除
docker rmi `docker images --filter=reference='dev-peer*' -q`
```

# おわりに
最初はこんなんでいいんだ、と言い聞かせて投稿。
いつか構築したHyperledgerFabricについて書きたい、、、
fish で $PATH 設定（追加、確認、削除）

```
Add path:
  export PATH=$HOME/.nodebrew/current/bin:$PATH
```

nodebrew 使いたくて上みたいに出てきたときに、fish でやる方法。


# 追加

```
$ set -U fish_user_paths $HOME/.nodebrew/current/bin $fish_user_paths
```

# 確認

```
$ echo $fish_user_paths | tr " " "\n" | nl
     1	/Users/mochizuki/.nodebrew/current/bin
     2	/usr/local/opt/fzf/bin
```

これでインデックスが見れる

# 削除

たとえばインデックスが `3` だとすると

```
$ set --erase --universal fish_user_paths[3]
```

# 参考

- https://superuser.com/questions/776008/how-to-remove-a-path-from-path-variable-in-fish/1091983#1091983
Google Chrome 76 〜の autoplay-policy設定

軽く困ったのでメモ。

# 環境
macOS Mojave 10.14.2
Google chrome 76.0.3809.100（Official Build） （64bit）

# 現象
とある案件の開発デバッグ用に、 自動再生ポリシーを変更していいたが、chromeアップデートによって無効になってしまった。
（craetejsでmp3を自動再生していたが、createjs内でエラーがでて最初の音だけ鳴らなくなった）




# 解決方法
コマンドライン引数を追加してchromeを起動する（terminalのプロセス閉じると共倒れするので注意）
`/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --autoplay-policy=no-user-gesture-required
`
※winは手元に環境がないので確認はしてないんですが、多分
`"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --autoplay-policy=no-user-gesture-required`
~~的な感じで行けると思います。。。（自分で調べてね！あしからず！）~~ 
これで起動するそうです、ありがとうございます！

※ちなみに起動中のchromeのプロセスは一旦全部閉じてから、コマンドラインから起動する必要があります。

# 参考
https://www.reddit.com/r/chrome/comments/ck5jql/where_did_chromeflagsautoplaypolicy_go/
https://stackoverflow.com/questions/57455849/chrome-autoplay-policy-chrome-76
https://peter.sh/experiments/chromium-command-line-switches/

# 参考）以前の設定方法
chromeの設定chromeのURLバーに以下を打ち込み
`chrome://flags/#autoplay-policy` 
→No user gesture is required.を選択してchrome再起動
Laravel を deployer でデプロイ時に LogicException が出た

# 追記

## 2019/08/30

こちらの記事ですが、元々仕事で使ってる deployer のレシピがいささか古く、最近これが最新のものにアップデートされたことで、以前は 5.6 以降では実行されていなかった `artisan optimize` が 5.7 以降では実行されるよう変更されていたため起きた現象でした。
deployer のレシピは随時アップデートするなり更新チェックするなりした方がよさそう。

---

deployer に限った話ではないですが。

# 環境

- PHP 7.1
- Laravel 5.7.28

# 起きた現象

`artisan route:cache` を実行した時に出た。
ルーティング中にクロージャがあるとキャッシュできないよ、という例外メッセージ。

```
[LogicException]
Unable to prepare route [foobar] for serialization. Uses Closure.
```

# 解決方法

こんな感じの記述が `routes/api.php` とか `routes/web.php` にあったら
Controller を呼び出す形に直してあげる必要がある。

```php
// Before
Route::get('/user', function (Request $request) {
    return $request->user();
});

// After
Route::get('/user', 'MyController@user');
```

# 参考

- [laravel Unable to prepare route \.\.\. for serialization\. Uses Closure \- Stack Overflow](https://stackoverflow.com/questions/45266254/laravel-unable-to-prepare-route-for-serialization-uses-closure)
kubernetesで起動したPod(container)に Failed to set up the root directory for shared mount propagation: Operation not permitted と表示されたときにやること

[securityContext](https://kubernetes.io/docs/tasks/configure-pod-container/security-context/)で、[privileged](https://kubernetes.io/docs/reference/generated/kubernetes-api/v1.15/#securitycontext-v1-core)をtrueに設定する。

```yaml
containers:
  securityContext:
    privileged: true
```
VSCodeでもMacのカーソル移動とかがしたい！

emacs風のキーバインドをVSCodeにも導入する．
# 対象
Windowsを対象にしている．(Macでは何もしなくてもできるため)

# やること
 - emacsのカーソル移動，文字削除とかをできるようにしたい．
 - VSCode内の本来の機能はできるだけ失わないようにしたい．

# 変更
VSCode内のkeybindings.jsonの中をいじってキーバインドを変更する．
既存のキーと衝突するときは既存のものにAltを足して回避する．

```json:keybindings.json
[
  {
    "key": "ctrl+p",
    "command": "cursorUp",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+alt+p",
    "command": "workbench.action.quickOpenNavigateNext",
    "when": "inQuickOpen"
  },
  {
    "key": "ctrl+alt+p",
    "command": "workbench.action.quickOpen"
  },
  {
    "key": "ctrl+n",
    "command": "cursorDown",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+alt+n",
    "command": "workbench.action.files.newUntitledFile"
  },
  {
    "key": "ctrl+f",
    "command": "cursorRight",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+alt+f",
    "command": "defaultSettings.action.focusSearch",
    "when": "defaultSettingsEditor"
  },
  {
    "key": "ctrl+alt+f",
    "command": "actions.find"
  },
  {
    "key": "ctrl+b",
    "command": "cursorLeft",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+alt+b",
    "command": "workbench.action.toggleSidebarVisibility"
  },
  {
    "key": "ctrl+a",
    "command": "cursorHome",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+alt+a",
    "command": "editor.action.selectAll"
  },
  {
    "key": "ctrl+e",
    "command": "cursorEnd",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+alt+e",
    "command": "workbench.action.quickOpenNavigateNext",
    "when": "inQuickOpen"
  },
  {
    "key": "ctrl+alt+e",
    "command": "workbench.action.quickOpen"
  },
  {
    "key": "ctrl+k ctrl+k",
    "command": "deleteAllRight",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+d",
    "command": "deleteRight",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+h",
    "command": "deleteLeft",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+alt+h",
    "command": "editor.action.startFindReplaceAction"
  },
  {
    "key": "ctrl+h",
    "command": "-editor.action.startFindReplaceAction"
  }
]
```

# 感想
今のところなにも違和感なく使うことができている．ただウィンドウ内検索するときなど何も考えずに**ctrl+f**を押してただカーソルが動くだけの時が時々発生する．

よく使う既存のショートカットは別に割り当てるのも必要なのかもしれない．

# 参考にしたサイト
- [Macに隠されたEmacsキーバインドでテキストを高速に編集](https://qiita.com/KeitaNakamura/items/dd322958db784e54d2ba)
- [Visual StudioCodeにMacのEmacs風キーバインディングを追加する](https://qiita.com/morizotter/items/444c6f7017e504a86852)
- [Emacs のキーバインドが忘れられない VisualStudio ユーザーに捧げる のVSCode 版](https://qiita.com/daiyama/items/113865bc8e49fcf3f3e5)
Pythonコマンド自分用

pythonインタプリタ抜け方`exit()`
実行中のコマンド止める`ctrl-c`
タプル型は変更不可`tuple(*) or *,*,* or (*,*,*)`
リスト型は変更可能`list(*) or [*,*,*]`
pythonのライブラリや関数の詳細を調べる
`help(＊任意の関数) や help(*.任意の属性)`
↑組み込み関数の場合（勉強してて’自分で作った関数.知りたいやつ’みたいな状態）、type（）でその関数の型調べてその結果をhelpにぶっこむ