OmniAICreator/Qiita-1.07M huggingface dataset:
Spring Boot - セッションタイムアウト時間の設定方法

Spring Bootでセッションタイムアウト時間を設定する方法についての覚書。

# 環境とか
- Spring Boot v2.0.3 （※Spring Sessionは未使用）

# 設定方法

## JAR ビルドの場合

application.properties に以下の設定を追加するだけ。
ちなみに、server.servlet配下の設定は組み込みのアプリケーションサーバに対する設定らしい。

```properties:application.properties
server.servlet.session.timeout=30
```

## WAR ビルドの場合

application.properties の server.servlet 配下の設定は組み込みのアプリケーションサーバに対する設定なので、warデプロイの場合は使用されない。warデプロイの場合は以下のどちらかの方法で設定することができる。

### web.xml で設定する方法

web.xml を作成して設定する。

```xml:web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
         http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
    version="4.0">

    <session-config>
        <session-timeout>30</session-timeout>
    </session-config>

</web-app>
```

TOMCAT_HOME/conf/web.xml でアプリケーションサーバに対するデフォルトのセッションタイムアウト設定することが可能。ただし、ほとんどの場合はアプリケーション個別にセッションタイムアウトを設定したいことのほうが多いと思う。その場合は、アプリケーションプロジェクトに src/main/webapp/WEB-INF/web.xml を作成する。

ちなみに、eclipse(STS) を使用している場合は、プロジェクトのプロパティーの「デプロイメント・アセンブリー」で、/src/main/webapp を追加しておくとWTPでアプリケーションを起動する際にも、作成したweb.xmlが使用されてハッピー。

### HttpSessionListener で設定する方法

原始的な方法だけど、Session生成/破棄時に実行される、HttpSessionListenerで設定する方法もある。
ただし、単にセッションタイムアウト時間を設定したいだけの場合は冗長な気がするので web.xml で指定したほうがよいと思う。

```java:HttpSessionListenerImpl.java
public class HttpSessionListenerImpl implements HttpSessionListener {

    @Override
    public void sessionCreated(HttpSessionEvent se) {
        HttpSession session = se.getSession();
        // セッションタイムアウト時間を秒で設定
        session.setMaxInactiveInterval(1800);
    }

    @Override
    public void sessionDestroyed(HttpSessionEvent se) {
    }
}
```

```java:WebAppConfig.java
@Configuration
@Import({HttpSessionListenerImpl.class})
public class WebAppConfig {
    // ...
}
```
macでシンボリックリンク作る時のメモ

シンボリックリンクを作成します。
シンボリックリンクとは、実体は別なところに存在するファイルを参照するファイルで、実体へのパスを記録している。

```shell
ln -s リンク元 登録名

ln -s /Users/masahiroyanai/dev/src/github.com/yanap yanap
```

以上、おしまい
【N予備メモ】nodeを使ってHTTPサーバーを作る

※自分用のメモ要素が大きいです
## nodeを使ってHTTPサーバーを作る

**index.js**

     'use strict';
    const http = require('http');
    const server = http.createServer((req, res) => {
    res.writeHead(200, {
    'Content-Type': 'text/plain; charset=utf-8'
    });
    res.write(req.headers['user-agent']);
    res.end();
    });
    const port = 8000;
    server.listen(port, () => {
    console.log('Listening on ' + port);
    });

**解説**

    const http = require('http');

NodeにおけるHTTPのモジュールを読み込んでいる。
    
    const server = http.createServer((req, res) => {    
    res.writeHead(200, {    
    'Content-Type': 'text/plain; charset=utf-8'    
    });   
    res.write(req.headers['user-agent']);    
    res.end();    
    });
httpモジュール機能でサーバーを作成。
サーバーにはリクエストを表すオブジェクトの変数req、レスポンスを表すresを受け取る無名関数を渡す。

無名関数の中では、リクエストが来たときの挙動を実装。

    res.writeHead(200, {
    'Content-Type': 'text/plain; charset=utf-8'
    });
200という成功を意味するステータスコードとレスポンスヘッダを書き込んでいる。

    res.write(req.headers['user-agent']);
   resオブジェクトの、write関数はHTTPのレスポンスの内容を書き出している。
 リクエストヘッダのuser-agentの中身を、レスポンスの内容として書き出している。

     res.end();
endメソッド呼び出しレスポンスの書き出しを終了。

        const port = 8000;
    server.listen(port, () => {
    console.log('Listening on ' + port);
    });
HTTPが起動するポートを宣言し、サーバーを起動し、起動した際に実行する関数を渡している。

HTTPサーバーが起動する関数は**listen**関数という。


## おまけ

res,writeの中身をHTMLにしてhttp://localhost:8000で表示できるらしい
```
res.write('
	'<!DOCTYPE html><html lang="ja"><body><h1>Hello,World!</h1></body></html>'
')
```
お試しあれ
第25話 ブロカールの問題

この記事は[仮面ライダービルドの数式](https://qiita.com/izmktr/items/e26a624e79bce3edccc9)の第25話です。

```math
(n-1)!+1=n^2=25
```

この式自体はさほど難しくないです。

```math
(n-1)!=n^2-1\\
(n-1)!=(n-1)(n+1)\\
(n-2)!=n+1
```

後は順に数値を当てはめるとn=5だけで成り立ち、
n>5だと左辺の値が常に大きくなり解がないことがわかります。

元々の式はブロカールの問題と言って、こういう式です。

```math
n!+1=m^2
```

階乗に1を足したものが平方数になるのは、何個あるかという問題で、以下の答えが知られています。

```math
4!+1=5^2=25\\
5!+1=11^2=121\\
7!+1=71^2=5041
```

この問題はコンピュータで計算した上で、
nが10億以内ではこの3つしか見つかってません。
しかも、答えは有限個しかない、まではわかっています。

しかし、この3つ以外に存在しないか、という部分は未解決のようです。
ただ、強いABC予想が真ならば、この3つしかないようです。
オブザーバーパターンについてサクッとまとめてみた

簡単に言うと
監視者(Observer)と監視対象(observable)のオブジェクトがあって
監視対象の値が変わったときに監視者(Observer)のメソッドを呼び出して通知して上げること。
＊ここが一般的な考えと違う。監視者が自分で呼ぶわけではない。


それではもう少し説明
* 私はiOSエンジニアですが、見つけた記事が.NET向けだったのでその方向で進めさせていただきます。


# 学ぶ理由
そもそもObserverパターンを学ぶ理由は、RxSwiftを勉強しようと思ったけどまったくわからず、調べてるうちにオブザーバーパターンをまずは知ったほうがわかりやすいという記事にあたったからです。
＊そもそもデザインパターン全く知らんし

# 概要

Rx(Reactive Extension)の根幹となる考え方。
監視対象のオブジェクトに観測者オブジェクトを登録して、監視対象が変化したときに観測者のメソッドを呼び出すことで観測者に変更を通知する。
監視対象は観測者(の型)を直接知らないようにすることが重要で、そのために一般的にインターフェースが利用され、.NET  Framework4 では監視対象のインターフェースとしてIObservable<T>が観測者のインターフェースとしてIObserver<T>が使われた。

# 基本的説明

## IObservable<T>(←インターフェース)

Subscribeメソッドのみを持つ。Subscribeは通知先を登録するメソッド。
<img width="621" alt="54fdb8a5375d48dd19b0354fcbc9bcda.png" src="https://qiita-image-store.s3.amazonaws.com/0/261386/132457ae-db21-fb3f-9127-b9440fd04df9.png">


引数として変更の通知先であるIObservet<T>を要求。戻り値はIDisposableで、そのDisposeメソッドを呼び出すことで通知を止められるようにする。IObservet<T>の具象(インターフェースを採用した)クラスではその通知先を記憶(登録)することが求められる。変更の通知を行う必要がある場合、Subscribeメソッドで登録されたすべてのIObserver<T>の特定のメソッドを呼び出す。
swiftで書くならこんな感じ?

```swift
func subscribe(observer: IObserver<T>) -> IDisposable
```
 

## IOserve<T>(←インターフェース)

IObserver<T>には以下の3つのメソッドがある
<img width="625" alt="352180571825c63281050b376d4894d4 (1).png" src="https://qiita-image-store.s3.amazonaws.com/0/261386/20a8273e-67c5-81cd-5cb7-bd2b65632617.png">


これらはIObserverで定義されているメソッドでIObservable<T>(= 監視対象)がこれを呼ぶことで通知する。
状態が変化したことを通知する際はOnNextを呼ぶし、状態変化の通知(つまりOnNext)が完了したことを通知するにはOnCompletedを呼ぶ。また何らかのエラーが発生したことを通知する際にはOnErrorを呼ぶ。
このようにIObservable<T>(= 監視対象)は自身の状態の変化に応じてこれらを適切に使い分けて呼び出す必要が求められ、
IObserver<T>ではそれに適切に応答することが求められる

## いい記事みつけた

以上が基本的な説明。
間違っていたらすみません。

最後にわかりやすい記事をみつけたので貼って終わり。
https://53ningen.com/rxswift-observable/

要約するにおそらくそもそもはプロパティ監視で通知をしていたけれど
・一箇所でまとめて呼ぶことができない。
・通知先のオブジェクトが変更されたとき、通知元の実装も変更しなければならない。
・通知先のオブジェクトの種類が増えるとき、通知元の実装も追加しなければならない。
といった問題があったためにObserverパターンが生まれたのだと思う


で、そのObserverパターンには2種類あるらしい
① pull型Observerパターン
→ 上記の問題(複数の異なる通知先に状態変化を通知したい)は解決した。
→ しかし、状態が更新されたことを通知するのみで、どのような値に更新されたのかはObservableのプロパティなどを参照しにいかなければ知ることができない。
→ したがって、現実的には更新された値を参照するために、Observer も Observable の参照を何らかの方法で取得できる状況にする必要があり、相互参照する構造になってしまいます。

② push型Observerパターン
①の問題を解決するのがpush型Observerパターン
通知する際に更新後の値を渡してしまう構造にしたもの。

Rxはこのpush型Observerパターンに限りなく近い・・・？
Go言語—チャンネルに何もない時の受信では、他のgroutineの処理を待ち続ける (アリスへの手紙)

## これはとある村の、バッファのないチャンネルの話

そしてこれは私の理解。

チャンネルからメッセージを受信しようとする時、なおかつチャンネルにメッセージがない場合は、いったん処理がロック状態になり、他のgoroutineがチャンネルにメッセージ送信するのを待つようだ。

なので、最終的にはどのgroutineもメッセージ送信をおこなわない場合であっても、受信処理では他のgroutineが走り終わるまで待つっぽい。

そして他のgroutine全てが走り終わったタイミングで「もうメッセージ送信をする奴はいない」と分かり、それまでのロック状態がデッドロックと判定されてエラーが起こる模様。


## 例

```golang
package main

import "fmt"
import "time"

// メインのgoroutineをアリスと呼ぶ
func main() {
	// 何も届かないメールボックス
	mailbox := make(chan string)

	// 何もしない怠惰なボブのgoroutine
	go func() {
		time.Sleep(1000 * time.Millisecond)
		fmt.Println("Bob : I will send letter.")
		time.Sleep(1000 * time.Millisecond)
		fmt.Println("Bob : Umm but it is not today. I will sleep again.")
		time.Sleep(1000 * time.Millisecond)
	}()

	// このメッセージはすぐに表示される
	// アリスには待つ気持ちがあるから
	fmt.Println("Alice : I wait for Bob to send message.")

	// アリスはボブのメッセージをしばらく待つが、いずれ諦めて「デッドロック！」と叫ぶ
	fmt.Println(<-mailbox) // fatal error: all goroutines are asleep - deadlock!
}
```

[The Go Playground](https://play.golang.org/p/mK8cvdT80ry)

# 環境

- go version go1.10.3 darwin/amd64

# Gist

- [Golang—Channel and Buffer | Why spawned (non-main) groutines do not raise deadlock error when send message?](https://gist.github.com/YumaInaura/db3c53923945127fa31d4ca01ea24a4f)








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
UnityでGLを使って空間に線を描く方法

HoloLensでお絵かきアプリを作成した時に、線の描き方について調べたので簡単にまとめます。

## はじめに
お絵かきアプリで空間に線を描くには、いくつか方法があります。
- LineRendererを使う
- GLを使って、太さが1pxの線を描く
- GLを使って、ポリゴンで線を描く

## LineRendererを使う方法
LineRendererを使うことで簡単に線を描くことができます。

```csharp
lineRenderer.positionCount = positions.Length;
lineRenderer.SetPositions(positions);
```

1つのLineRenderでは1つの線しか描けないため、お絵かきアプリの様にたくさんの線を描画する場合、LineRendererが大量に生成されるので、ちょっと。。。

## GLで太さ1pxの線を描く方法
UnityではGLを使えるので、こちらを使って線を描くことができます。
https://docs.unity3d.com/ScriptReference/GL.html

```csharp
private void OnRenderObject()
{
    // Materialの初期化と設定、詳しくは↑のUnityのScriptReferenceを参照。
    CreateLineMaterial();

    lineMaterial.SetPass(0);

    // GL.PushMatrix()～GL.PopMatrix()の間に行われた、行列マトリクスの変更が外に漏れないようにPush&Pop。おまじない、おまじない
    GL.PushMatrix();

    // 複数の線を描画する
    foreach (var stroke in strokeSet)
    {
        GL.Begin(GL.LINE_STRIP);
        for (int i = 0; i < stroke.Nodes.Count; i++)
        {
            GL.Color(stroke.Nodes[i].color);
            GL.Vertex(stroke.Nodes[i].position);
        }
        GL.End();
    }
    GL.PopMatrix();
}
```

MonoBehaviourを継承したクラスの、OnRenderObject()内に描画処理を実装することで、毎フレーム描画時に処理が呼び出されます。
毎フレーム呼び出されるので、重い処理は避けたほうが良いでしょう。

色々処理をしていますが、メインとなるのはGL.Begin(GL.LINE_STRIP)～GL.End()になります。
GL.Begin(GL.LINE_STRIP)で線を描画する事を指定し、GL.Begin～GL.Endで複数の頂点情報を指定することで、指定した頂点をつないだ線が描画されます。
頂点の指定はGL.Colorで頂点カラー、 GL.Vertexで頂点座標を指定します。

<img width="400" alt="GL_LINE_STRIP.png" src="https://qiita-image-store.s3.amazonaws.com/0/184991/bac4fbdf-4eeb-1c69-aeb9-7969d280b3fb.png">

GL.LINE_STRIP以外にも線やポリゴンを描画する方法はあるので、興味があれば "OpenGL Primitives" で検索してみると良いと思います。

なお、GL.LINE_STRIPで線を描画した場合、線の太さは1px固定となります。しかし、お絵かきアプリとしては、太さを変えたいところ。。。

## GLで太さのある線を描く方法
線の太さを指定できないのなら、細い板ポリをつなげて線のようなポリゴンを描画すればいいじゃない。

という事で、イメージ的にはカラーテープでお絵かきをするような感覚ですね。

```csharp
private void OnRenderObject()
{
    // Materialの初期化と設定
    CreateLineMaterial();

    lineMaterial.SetPass(0);

    GL.PushMatrix();

    // 複数の線を描画する
    foreach (var stroke in strokeSet)
    {
        GL.Begin(GL.TRIANGLE_STRIP);
        for (int i = 0; i < stroke.Nodes.Count; i++)
        {
            var node = stroke.Nodes[i];
            var next = stroke.Nodes[i + 1];

            // 線の進行方向(dir)から少し左右(offset)に散らして、TRIANGLE_STRIPで描画
            // することで、任意の幅の線(ポリゴン)を描画する。
            var dir = next.position - node.position;
            var offset = Vector3.Cross(node.normal, dir).normalized * lineWidth;

            GL.Color(node.color);
            GL.Vertex(node.position + offset);
            GL.Vertex(node.position - offset);
        }
        GL.End();
    }
    GL.PopMatrix();
}
```

こちらはGL.LINE_STRIPではなくGL.TRIANGLE_STRIPをGL.Beginに指定して、ポリゴンを描画しています。
以下の様に元々の線は青線の様になりますので、頂点座標(node.position)から上下にoffset分幅を持たせてポリゴンを描画します。
<img width="400" alt="GL_TRIANGLE_STRIP.png" src="https://qiita-image-store.s3.amazonaws.com/0/184991/d0404c22-2bb0-e3b2-d305-8ba9bab06a12.png">



この時のoffsetの方向ですが、今回は線を描いた場所から見るときちんと幅があるように見え、上下左右に回り込んで見たら斜めに見えるようにしています。
そのためには線の頂点座標だけでなく法線情報も必要になるので、頂点座標と同じように記録して利用しています。

## 最後に
Unityで線を描く場合、LineRenderer以外にGLも使える。Materialも使っているのでShaderでエフェクトつけたりもできそう。
ただ、色々複雑なことをやりだすと面倒なので素直にLineRendererを使ったほうが良いのかも。
かっこいいプレゼン資料が作れる「Beautifl.AI」使ってみた

# プレゼン資料をスマートにかっこよく

社内で定期的に訪れるプレゼンの機会。
普段使っているテンプレートから変えたい！だけどセンスがない...
そんな私のもやもやを解決してくれたwebアプリを紹介します！

# かっこいいプレゼン資料をつくる手助けツール「[Beautiful.AI](https://www.beautiful.ai/)」
![beautifl.png](https://qiita-image-store.s3.amazonaws.com/0/261128/23dbfcf0-4a86-b5bc-3b71-29ebc31e02f1.png)

googleアカウントでログインまたは新規登録をすることで簡単に使う事ができます。

# どんな事ができるの？

さっそく[このプレゼン資料](https://www.beautiful.ai/deck/-LDtSrScw_C3_hfAXA0d/Design-Tips-for-Beautiful-Slides)を見てください！
こちらはBeautiful.AIがデフォルトで用意してくれているものです。

文字の位置調整・アニメーションを**AIが自動で最適化**してくれます。
図やグラフ、データの編集もアプリ上で簡単にできちゃいます！

# 気になったこと
良いことづくめに見えますが、少しもやもやしたこともありました。

- **まれに漢字表記がうまくいかない**
![shoukai.png](https://qiita-image-store.s3.amazonaws.com/0/261128/87a768cc-7fc9-a9b5-4a48-e09c4891f20b.png)
※チーム「紹」介

- **自分好みの調整はできない**
もう少し文字を大きくしたい/位置を変えたいと思っても、アプリの方で「良い感じ」にまとめてくれちゃいます。
こだわりたい部分があると少しやきもきするかもしれません:tired_face:

#所感

出来上がった資料で発表したら
まわりの皆さんからもかっこいい！と言っていただけました！
このレベルの資料をパワーポイントでつくるとなると、
結構時間がかかりそうだなと思います...。

皆さんもぜひ試してみてください！
boostnoteでdropboxデータの復元を試みる

## boostnoteでデータが消えた
boostnoteでdropbox連携を行なっていたら、ある日突然boostnote上からデータがなくなっていました。

- ノートもフォルダーも全てない
- Localで保存していたノートも見当たらない
- Dropbox上や、Localのフォルダ内にはCSONファイルが残っている状態
- Boostnote mobileでは正常に動作
- preferences から再リンクしようとしてもdropbox上のデータとはリンクできない(Addボタンが押せない)
![Boostnote.png](https://qiita-image-store.s3.amazonaws.com/0/276251/8d4827d0-5308-95a6-46f1-a5c1ee45401d.png)



boostnote ver0.11.8に自動更新された際になったものだと思われます。



## 環境
- macOS High Sierra 10.13.6
- Boostnote ver0.11.8
- Boostnote mobileとDropbox連携(iPhone)


## 原因解消方法1
Dropbox上に、以下のようなコードしか書かれていないCSONファイルが残っていたことが原因のようです。

以下の方の記事を参考にし、

```qiita.cs
'content':''
```
だけのCSONファイルを削除しました。
[Boostnoteアップデート後CSONファイルが存在するにも関わらずストレージ設定が消えてフォルダとドキュメントが表示されない障害原因と解消法](https://qiita.com/ma2wit/items/e1c607180facd41c9fbf)



## その後

boostnoteのpreferensesから再リンクをし直しました。

しかし、それ以前に再リンクしようとしてできなかった大量のdropbox連携のデータが残ってしまっていました。![Boostnote.png](https://qiita-image-store.s3.amazonaws.com/0/276251/3dcbdabe-267d-6e9d-738f-55414f8526ee.png)




## 原因解消方法2
一つでもdropbox連携のデータをunlinkすると、dropbox上でそのデータが削除されてしまいます。
そのため、一旦boostnote上の大量のdropbox連携ストレージを削除し、dropbox上で削除されてしまったデータを復元する必要があります。

1.dropbox連携のストレージを全て消去する(この際、dropbox上の該当ファイルは削除される)
![Boostnote.png](https://qiita-image-store.s3.amazonaws.com/0/276251/d984c34a-be7b-431e-a65b-a2bf77a499e6.png)

2.dropbox.comにアクセスし該当ファイルを復元する
※この際、はじめにboostnoteから全てのデータが消える原因となった```'content':''```だけが含まれたファイルは復元しないように注意
![削除したファイル_-_Dropbox.png](https://qiita-image-store.s3.amazonaws.com/0/276251/3e3c5a89-9d6e-6b39-3529-020d0f310943.png)

3.boostnoteに戻り、preferencesから再リンクし直す

以上で、データの復旧と整理の作業が終了しました。



## 終わりに
boostnoteやdropbox初心者がこの記事を書いているため、至らない点が多々あると思います。足りない情報や、不適切な表現がございましたら、ご指摘いただけるとありがたいです。
CallKit 画面と近接センサーによる画面オフ

電話アプリなどの場合、耳に持って行った際の誤動作を防ぐために、近接センサーによる画面オフを有効にします。
通常、以下のコードで制御可能です。

```swift
let myDevice: UIDevice = UIDevice.current
// 近接センサーを有効にする
myDevice.isProximityMonitoringEnabled = true
// 近接センサーを無効にする
myDevice.isProximityMonitoringEnabled = false
```

しかし、CallKit対応アプリの場合、この対応は必要なさそうです。
アプリ側で近接センサーの処理を行わなくても、以下のような振る舞いとなります。

  - Audio着信の場合、応答すると近接センサーが有効となる。
  - Video着信の場合、応答しても近接センサーは無効のまま。
  - 発信の場合、近接センサーが有効となる。相手がVideo応答すると近接センサーは無効になる。
  - Audio通話からVideo通話に切り替えると、近接センサーが無効になる。
  - Video通話からAudio通話に切り替えると、近接センサーは無効のまま。
  - 相手がAudio通話からVideo通話に切り替えても、近接センサーは無効のまま。
  - 通話を終了すると、近接センサーは無効となる。

この仕様が気に入らない場合は、アプリで前記コードを使い制御することになります。（他に方法があるかもしれませんが）

CallKitの仕様ですが、調査結果からふるまいは前記の通りですが、よくよく見ると「スピーカーオン時は、画面オフにならない」という仕様にも見えます。
CallKitはスピーカーがオフの時、近接センサーで感知した時に画面をオフにする、という仕様なのかもしれません。

この辺りは、調査結果からの推測ですので間違っているかもしれませんが参考までに・・・
Laravel 5.4 で broadcast の toOthers を使いたい

Laravel 5.6 のドキュメントにあるように、 `Illuminate\Broadcasting\InteractsWithSockets` を追加することで利用できる。（ Laravel 5.4 のドキュメントには書いてなくてハマった）

### 参考
* https://laravel.com/docs/5.4/broadcasting#broadcasting-events
* https://laravel.com/docs/5.6/broadcasting#broadcasting-events
Windows10のキッティングをやってみた  

新しく購入したノートPCでキッティングをした話。
まず、これまで同じノートPCを使い続けてきたので、データ移行や設定をしっかり行なった事がなかった。新しいPCを購入し、良い機会なのでどれくらいの作業が必要になるのか、まとめることにした。
![1167292.jpg](https://qiita-image-store.s3.amazonaws.com/0/235933/1e3c3b88-fc3e-c8d9-8f39-32e6d94ffe02.jpeg)

今回の作業内容は以下のようになる。
・データ移行
・Windows設定
・アプリインストール
・VMwareの移行確認

##データ移行
現在使用しているWindows7 32bitノートPCから、新しく購入したWindows10 64bitノートPCへのデータ移行を行なった。
準備を始めて気づいたのは、Windows10には、windows転送ツールが入っていないということ。Windows10からは、One Driveを使用してデータ移行することが推奨されているようだ。

まずは、どれだけ移行が必要なデータがあるのか調べることにした。
ソフトなど移行出来ないものを除いて整理をしてみると、それほど移行するデータは多くなかった。私の場合、Chromeで管理をしているので、アドレス情報、メール、スケジュール、ブックマークは移行不要で、ファイル類はドライブに保存しているものが多い。また、音楽もGooglePlayMusicで管理している。それらの事が幸いして移行データは少なかった。Google様様である。

新環境に不要なものまで、移行したくないので、移行用のフォルダに必要なものだけまとめることにした。すると、容量は全部で38GBになった。が、多くは、VMwareの仮想ディスクファイルで30GBあった。Chromeのマイドライブが、30GB使えるのだが、圧縮してもアップロードするのは重いと考え、仮想ディスクファイルだけ、外付けハードディスクに保存し、移行することにした。

移行作業は、以下の手順。
・Chromeにアップロードしていた移行データを新PCでダウンロードし、解凍後、各所に展開
・外付けハードディスクから仮想ディスクファイルをコピーし、格納

はい、無事終了。作業は15分で終わった。

##Windows設定
次に、Windows10の設定を行なった。内容は、参考資料の記事を参考に私の場合は、以下の作業をした。

・アカウント修正／作成（管理者とuser用）
・プライバシー設定の変更
・フォルダ設定(隠しフォルダ、拡張子)
・不要アプリの削除
・スタートアップアプリの停止
・タスクバーへアイコン表示
・規定のアプリの変更
・スリープモードのカット
・マイクロソフトアカウントの設定
・デスクトップにコントロールパネルアイコンを表示
・高速スタートアップの設定を無効
・Microsoft IME の予測変換のクラウド候補機能設定
・PCの不要データを自動で削除してくれる掃除機能を設定

これが結構、面倒だった。参考資料を参考に設定するのに1～2時間程が掛かった。

##アプリインストール
データ移行が、無事完了し、次にアプリのインストールを行なった。
私の場合は、以下のアプリをインストールした。

・さくらエディタ
・JDK
・VMware Workstation Player 
・slack
・TeraTerm
・WinMerge
・Zoom
・Gyazo
・FFFTP
・eclipse
・Apache Tomcat

躓いたのは、TeraTermのインストールで、インストール中に「エラー5」を出してインストールできず、何かと思って調べると管理者権限がない為、インストールに失敗していた。対処としては、コマンドプロンプトを管理者権限で起動し、インストーラーをコマンドプロンプトから実行することで解決。また、TeraTermのアプリがボヤけて表示され、気持ち悪かったので、解決策を調べたら以下の対応でキレイに表示された。
[Windows 10のアプリ表示がぼやける問題を解消する方法](http://www.itmedia.co.jp/pcuser/articles/1509/24/news028.html)

作業時間は、ダウンロードに時間を取られ2～3時間程。出先での作業でWifi環境が悪かったのが影響した。eclipseのAll in Oneパッケージのダウンロードは最初に持ってくれば良かった。

##VMwareの移行確認
このVMwareの移行が、今回の中で一番心配していた作業だ。
VMware Player 6.0.7の32bit版で構築していた仮想ディスクファイルが、新ノートPCのVMware-Workstation-12.5.9-Player for Windows64-bitにコピーして、上手く立ち上がってくれるのか。。。

まずは、やってみる。インストールしたVMware Workstation Playerで旧環境の仮想ディスクファイルを開いてみた。

[![Image from Gyazo](https://i.gyazo.com/67da41c57d11665d5dcecef68dfbd8b2.gif)](https://gyazo.com/67da41c57d11665d5dcecef68dfbd8b2)

お、すんなり仮想マシンが出来上がった。これはもしや？

起動してみる。
[![Image from Gyazo](https://i.gyazo.com/d9c907268dcb081318123d535e4257a1.gif)](https://gyazo.com/d9c907268dcb081318123d535e4257a1)

メッセージが出たが、正直に「コピーしました」を押下。
すると、無事起動が進み、ログイン出来た。
[![Image from Gyazo](https://i.gyazo.com/cb5ef7165f3d00d508385463328b52a0.jpg)](https://gyazo.com/cb5ef7165f3d00d508385463328b52a0)

結果、バージョンが違ってもVMwareの移行は結構、簡単に行くことが分かった。
以上。

##参考資料
[初心者のためのパソコン引越し講座](http://pc-hikkoshi.com/basic14-tool-possible.html)

[Windows10のオススメ設定10選](https://www.biz2cloud.com/office365/blog/windows10-setting)

[Windows 10を導入したら真っ先に行うべき初期設定を紹介](http://tanweb.net/2016/07/21/9475/)
【wordpress編】さくらのVPSの強制再起動の影響

今回はさくらのVPSでWordpressを使っていて、サイトが重くなってり管理画面が開かなくなったので、
強制再起動をしてみようとも思います。
そして、再起動をする上でどのような影響が出たのかと書きます。

# 結論
WordPressを利用していてサイトや管理画面が開かなくなったら、
[さくらのVPSコントロール]で「強制再起動」をすると直る。
特に今のところデータが削除されているなどの影響はありません。

# 手順
1. [自分のサイト]を開いてみる。
2. 中々サイトが開かない。(今は直っています。)
3. [さくらのVPSコントロール]を開く
4. サーバー一覧から対象のサーバーをクリックする。
5. 「強制再起動」ボタンを押下
6. 本当にし良いのか聞かれるので「強制再起動」ボタンを押下
7. [自分のサイト]を開いてみる。
8. 直った！！！！！

[さくらのVPSコントロール]:https://secure.sakura.ad.jp/vps/#/servers/433210
[自分のサイト]:http://xxbenefitxx.net
[Fastly] 最近追加された機能とかツールとか

## ACL をコントロールパネルから編集できるようになった

<img width="1445" alt="Screen Shot 2018-08-07 at 11.53.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/19942/2abdfcc5-c615-28b5-9fd6-792e0cf2f219.png">


## VCL のバージョンにコメントを書くことができるようになった

これは私も愛用している機能の1つですが、VCLのバージョンを新たに clone した際に任意のコメントを付けることができます。
このバージョンでは何が変更されたのか、簡易コメントを残しておくことで急なロールバックの際などに管理がしやすくなります。

<img width="754" alt="Screen Shot 2018-07-28 at 9.24.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/19942/9b5c1005-3311-6ac0-d8b7-3e2b7ff30d1e.png">

## VCL に UTF-8 文字を直接記述可能になった

今まで直接書くことができませんでしたが、今は普通に書くことができます。
コメントに日本語を使うのはもちろん、[カスタムレスポンス](https://docs.fastly.com/guides/basic-configuration/creating-error-pages-with-custom-responses.html) のデータに日本語をそのまま書いたりもできますね。絵文字も:sushi:

## UUID 関数が追加された

これまでは UUID を生成するための専用の関数がなく、下記の Community 投稿で紹介されているように `randomstr()` を使って無理やり生成するワークアラウンドがかろうじて存在していました。
https://community.fastly.com/t/unique-request-identifier/468

が、現在は UUID version 3/4/5 に対応する UUID 生成用の関数がそれぞれ新たに追加されました。
例えば UUID version4 であれば、下記のように簡単に生成することができます。

```c

set req.http.uuidv4 = uuid.version4();
```

またこれまでのワークアラウンドで利用されていた `randomstr()` 関数は下記のドキュメントにも記載がある通り、GNU C Library の BSD random number functions を使っていたため、セキュリティを目的とした用途には非推奨でしたが、新たに追加された UUID 関数は crypto-safe な PRNG を新たに採用しているため、より安全に使うことができます。

- [Randomness-related VCL features](https://docs.fastly.com/guides/vcl/randomness-related-vcl-features.html)


## `randomint()` 関数が追加された

詳しくは下記のサンプルをどうぞ。
https://fiddle.fastlydemo.net/fiddle/7b58463a

## `json.escape()` 関数が追加された

デモ: https://fiddle.fastlydemo.net/fiddle/7d26f5e4
↑のデモで RUN をクリックすると下記の結果が表示されると思います。

```
input: あいうえお-\a"
cstr_escape(): \xe3\x81\x82\xe3\x81\x84\xe3\x81\x86\xe3\x81\x88\xe3\x81\x8a-\\a\"
json.escape(): あいうえお-\\a\"
```

見てわかるように、`cstr_escape()` ではマルチバイト文字も一緒にエスケープされてしまい、例えば `\x` はそのままではJSON-safeなデータではないため、結果として特にVCL内でログデータを生成・整形する場合に問題になることがありました。(ログの送信先endpointがJSONエラーでログを受け付けないなど)
新しい `json.escape()` を使うことでこの問題を回避し、JSON-safeな文字列を生成することができます。

## VCL Fiddle

https://fiddle.fastlydemo.net/

VCLのテストやデバッグをする際に使うことができるツールです。Fastlyのエンジニアが開発しており、日々機能追加・改善がされています。
詳細な使い方を説明するドキュメントがなく、とはいえこの記事ではとても説明しきれないため詳細は割愛させていただきますが、わざわざ実際のFastlyサービスを使ってバージョンを更新しながら細かな検証を行うのが面倒くさい！といった時には是非使ってみてください。
VCL構文のオートコンプリートなどもサポートしているので、こんな関数あったかな？といった時でも気軽に探すことができますし、こんなことってVCLでできたっけ？といった際に誰でも気軽に使うことができます。

Fastlyが毎年行っている技術イベント、Altitude で行われたFiddleのワークショップの様子がVimeoでも公開されています。英語にはなりますが、使い方の詳細な説明などもされているので、興味があるかたは下記の動画を是非見てみてください。

- [Altitude Lon 2018: Programming the edge workshop | Andrew Betts, Fastly](https://vimeo.com/273991567)
顔認識AIで似ている有名人を検索するLINEbotを作ってみた

# :star: 作ったもの

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">顔認識AIを使って画像から似ている有名人（女性）を検索するLINEbotを作りました<br><br>↓友達追加はこれ<a href="https://t.co/SPgRgpZKoG">https://t.co/SPgRgpZKoG</a> <a href="https://t.co/u0VTKiSYhy">pic.twitter.com/u0VTKiSYhy</a></p>&mdash; みかん三世 (@mikan_the_third) <a href="https://twitter.com/mikan_the_third/status/1023031148664909825?ref_src=twsrc%5Etfw">2018年7月28日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# :star: 使い方
- 次のボタン、QRコード、もしくは`@dxg4720j`でID検索すると友達に追加できます

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

![tfmAaAleOy.png](https://qiita-image-store.s3.amazonaws.com/0/178077/8c5b2d54-3b75-9ed4-8597-5bb21af336e0.png)


- 画像を送ると似ている有名人（女性）の検索結果を返します
- 「画像をもっと見る」で登録されている画像一覧を見ることができます
- 「Wikipediaで開く」でその人のWikipediaを参照できるようにしました
- Wilkipediaで閲覧数の多い人を優先的に約900人を登録しています
- テキストを送った場合、登録されている氏名と一致した時は画像一覧を返します

# :star: 実装の概要
- 登録する名前の一覧を用意する
- Google画像検索で名前を検索し、httpsの画像の一覧を用意する
- MicrosoftのFaceAPIを使用して画像から顔を検出して登録し、学習させる
- 2枚目以降は顔識別を行い、定めた閾値以上の場合は同一人物と判断して顔画像を追加し、再び学習させる
- これを人数分繰り返す
- LINEからwebhookを受け取るAPIを用意する
- 画像が送られてきた場合、FaceAPIで顔検出を行ってfaceIdを取得する
- 続けて顔識別を行って似ている顔を取得して返すようにする

# :star: 簡単な補足

## :pencil: 登録する名前の一覧
- 今回はWikipediaの[日本の女優一覧](https://ja.wikipedia.org/wiki/%E6%97%A5%E6%9C%AC%E3%81%AE%E5%A5%B3%E5%84%AA%E4%B8%80%E8%A6%A7)のようなページから名前の一覧を取得しています
- FaceAPIの無料枠では1000人までしか登録できないので、閲覧数の多い人を優先的に登録しています
- 参考：[How to use Wikipedia API to get the page view statistics of a particular page in wikipedia?](https://stackoverflow.com/questions/5323589/how-to-use-wikipedia-api-to-get-the-page-view-statistics-of-a-particular-page-in)

## :pencil: Google画像検索から画像を取得
- SeleniumとBeautifulSoupで`https`の画像URLを取得しました
- 参考：[PythonとBeautiful Soupでスクレイピング](https://qiita.com/itkr/items/513318a9b5b92bd56185)
- 参考：[SeleniumからHeadless Chromeを使ってみた](https://qiita.com/orangain/items/db4594113c04e8801aad)

## :pencil: Microsoft FaceAPI
- MicrosoftのCognitiveServicesのうちFaceAPIを使用して顔検出・顔識別を行っています。
- まずLargePersonGroupを作成し、先ほど取得した名前でPersonを作成し、顔検出の結果を登録し、トレーニング（学習）を行います
- 2枚目以降は顔識別を行い、定めた閾値以上の場合は同一人物と判断して顔画像を追加し、再び学習させています
- FaceAPIではどんな画像が登録されているか分からないため、別途、誰にどの画像を登録したのかを保存しておく必要があります。
- また、APIのRateLimitが1分あたり20回までなので、連続してAPIを叩く場合は間隔をあける必要があります
- GoogleCloudのAutoMLでも同じようなことができるはずですが、APIのコール回数の無料枠が少ない（月1000回）なので、FaceAPI(月30000回)にしました

## :pencil: LINE MessagingAPI
- LINEの設定については [[python] LINEの文字起こし君を作ってみた](https://qiita.com/mikan3rd/items/f0b6ff57dbcedc79a22d) で紹介しています
- MessagingAPIでは`https`の画像しか送れないので要注意です

# :star: 余談
- 登録されていない名前の場合は新たにデータを追加できるようにしたいですね
Julia で CSV のデータをグラフにするまで

環境は、macOS。High Sierra。

まずはインストール。

```
brew tap caskroom/cask
brew cask install julia
```

でうまく行った。

続いていろいろインストール

```
julia
```

で julia を起動して、

```
julia> Pkg.add("DataFrames")
julia> Pkg.add("Gadfly")
julia> Pkg.add("CSV")
julia> Pkg.add("IJulia")
```

と、必要なパッケージを入れる。全部必要かどうかは知らない。

```
julia> using DataFrames
julia> using CSV
julia> using Gadfly
```

ruby でいうところの `require` なのかな。モジュールを使えるようにする。

読み込むための CSV を用意する。こんな感じ。

```csv
foo,bar,baz
0.301159526431945,0.313898454910858,1.17473791223684
0.325130268171028,0.560497185694232,1.11750475177855
0.372315907398201,0.611611162175372,0.97738803760451
0.547662216748869,0.623214687217486,0.916423163300621
0.935238506542586,0.816615537373106,0.658791349303661
1.18550683453858,0.94334310373166,0.397721258358077
1.76558291386366,1.06395657347973,-0.122663466326476
1.98231779465134,0.91729852516118,-0.318439265035155
2.13064106463242,0.867904655344771,-0.525066684500675
```

ちなみに上記データは味付けした乱数。

そして読み込む。

```
julia> dt=CSV.read( "foobarbaz.csv" )
9×3 DataFrames.DataFrame
│ Row │ foo      │ bar      │ baz       │
├─────┼──────────┼──────────┼───────────┤
│ 1   │ 0.30116  │ 0.313898 │ 1.17474   │
│ 2   │ 0.32513  │ 0.560497 │ 1.1175    │
│ 3   │ 0.372316 │ 0.611611 │ 0.977388  │
│ 4   │ 0.547662 │ 0.623215 │ 0.916423  │
│ 5   │ 0.935239 │ 0.816616 │ 0.658791  │
│ 6   │ 1.18551  │ 0.943343 │ 0.397721  │
│ 7   │ 1.76558  │ 1.06396  │ -0.122663 │
│ 8   │ 1.98232  │ 0.917299 │ -0.318439 │
│ 9   │ 2.13064  │ 0.867905 │ -0.525067 │
```

時刻 foo に bar と baz という値が計測されたと思うと、こんな風にグラフにする

```
julia> plot(
       layer(dt, x=:foo, y=:bar, Geom.line, Geom.point, Theme(default_color=colorant"red")), 
       layer(dt, x=:foo, y=:baz, Geom.line, Geom.point), Guide.ylabel("Hoge"))
```

実行するとブラウザが起動して以下のようなグラフが見られる：

![image.png](https://qiita-image-store.s3.amazonaws.com/0/6854/9a9dad54-6cc2-f84b-0e5d-00659531fe5a.png)

ラベルがないけどね。

値の範囲を指定するなら、こんな感じ：

```
julia> plot(
       layer(dt, x=:foo, y=:bar, Geom.line, Geom.point, Theme(default_color=colorant"red")), 
       layer(dt, x=:foo, y=:baz, Geom.line, Geom.point),
       Guide.ylabel("Hoge"), Coord.cartesian(xmin=0.5, xmax=1.5, ymin=-2, ymax=2))
```

しかし。上記の処理を

```julia:foobarbaz.jl
using DataFrames
using CSV
using Gadfly

dt=CSV.read( "foobarbaz.csv" )
plot(
       layer(dt, x=:foo, y=:bar, Geom.line, Geom.point, Theme(default_color=colorant"red")), 
       layer(dt, x=:foo, y=:baz, Geom.line, Geom.point),
       Guide.ylabel("Hoge"), Coord.cartesian(xmin=0.5, xmax=1.5, ymin=-2, ymax=2))
```

のように書いて

```
julia foobarbaz.jl
```

のように実行しても、グラフは見られない。

グラフを見るためには

```julia:foobarbaz2.jl
using DataFrames
using CSV
using Gadfly

dt=CSV.read( "foobarbaz.csv" )
p = plot(
       layer(dt, x=:foo, y=:bar, Geom.line, Geom.point, Theme(default_color=colorant"red")), 
       layer(dt, x=:foo, y=:baz, Geom.line, Geom.point),
       Guide.ylabel("Hoge"), Coord.cartesian(xmin=0.5, xmax=1.5, ymin=-2, ymax=2))
draw(SVGJS("foobarbaz.js.svg", 6inch, 6inch), p)
```

のように、plot の結果を draw して、それをブラウザなどで表示する必要があるようだ。

あと。
実行時間が遅いのが気になる。
手元で

```
julia foobarbaz2.jl
```

を実行すると 40秒ほどかかる。遅すぎると思う。
phoenixを触ってみる その2

[前回](https://qiita.com/utonn/items/2e2562a48bec32e12a33) の続き
https://hexdocs.pm/phoenix/adding_pages.html#content
に沿ってページの追加やっていきます。

## 静的ページの追加

パスからコントローラへのルーティングを追加します。

``` hello/lib/hello_web/router.ex
  scope "/", HelloWeb do
    pipe_through :browser # Use the default browser stack

    get "/", PageController, :index
    get "/hello", HelloController, :index # ★追加
  end
```

んでコントローラも作ります。

``` hello/lib/hello_web/controllers/hello_controller.ex
defmodule HelloWeb.HelloController do
  use HelloWeb, :controller

  def index(conn, _params) do
    render conn, "index.html"
  end
end
```

connにはリクエストの情報やらレスポンスに使う情報やらが格納されています。
https://hexdocs.pm/plug/Plug.Conn.html

paramは今回使わないので、"\_"付き

続いてビュー側。
Viewとtemplateを作成します。

``` hello/lib/hello_web/views/hello_view.ex
defmodule HelloWeb.HelloView do
  use HelloWeb, :view
end
```

``` hello/lib/hello_web/templates/hello/index.html.eex
<div class="jumbotron">
  <h2>Hello World, from Phoenix!</h2>
</div>
```

表示用にデータの加工したりするのがView、
実際に表示するhtmlを組み立てるのがtemplateです。

controllerからはindex.htmlとしか指定してないですが、パスは名前で解決される模様。


<img width="749" alt="スクリーンショット 2018-07-28 17.28.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/164994/54bfa220-2903-c2bd-8c2b-97b133c2da39.png">

templateの割にいろいろ表示されてますね。
hello/lib/hello_web/templates/layout/app.html.eex を見ると ```<%= render @view_module, @view_template, assigns %>``` といった記述があるので、ここに埋め込まれるみたいですね。
renderはまずlayoutViewから行われるようです。設定とかで変えられるのかな。
この辺の仕組みは後で掘ってみるとして。

## 動的ページ

次はパラメータを受け取り、それを表示させます。
Controllerは先程のHelloControllerをそのまま使います。

``` hello/lib/hello_web/router.ex
  scope "/", HelloWeb do
    pipe_through :browser # Use the default browser stack

    get "/", PageController, :index
    get "/hello", HelloController, :index
    get "/hello/:messenger", HelloController, :show # ★追加
  end
```
``` hello/lib/hello_web/controllers/hello_controller.ex
  def show(conn, %{"messenger" => messenger}) do
    render conn, "show.html", messenger: messenger
  end
```
``` hello/lib/hello_web/templates/hello/show.html.eex
<div class="jumbotron">
  <h2>Hello World, from <%= @messenger %> !</h2>
</div>
```

<img width="735" alt="スクリーンショット 2018-07-28 17.54.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/164994/92b5baf3-e298-30ea-9b28-a2f1d2259fd7.png">


routerで指定した:messengerがマップに入ってコントローラに渡るようです。
これは、つまり、パターンマッチが出来るのか・・・！

いったんAddingPagesは終わりですが、実験。

``` hello/lib/hello_web/controllers/hello_controller.ex
def show(conn, %{"messenger" => messenger}) when messenger=="utonton" do
  render conn, "special.html", messenger: messenger
end

def show(conn, %{"messenger" => messenger}) do
  render conn, "show.html", messenger: messenger
end
```
``` hello/lib/hello_web/templates/hello/special.html.eex
<div class="jumbotron">
  <h2>Hey! You are special message from <%= @messenger %> !</h2>
</div>
```

<img width="740" alt="スクリーンショット 2018-07-28 17.54.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/164994/72024b9a-b9b8-d844-5570-3f1bfea4a39b.png">


・・・できちゃったよ。
これ、意外と便利なんじゃなかろうか。コントローラ内で分岐するよりだいぶスッキリしてる。
しかもコントローラ内で変な分岐入れるのって結構抵抗あるけど、
こういった形なら書きやすいし、何より意図が伝わりやすそう。
GKEでLet's encrypt

## 概要

SSL証明書をLet's encryptで取得し、自動更新する仕組みをk8s/GKEに構築します。

- Google Cloud Shell で Helm をインストール
- GCPにTiller用のサービスアカウントを作成
- Helmでk8sにcert-managerをインストール
- CloudDNS設定用のサービスアカウントを作成し、credential jsonを取得し、k8s secretに格納
- cert-managerを使ってIssuerを設定する際に、上記の CloudDNS secretを付与
- cert-managerのIssuerによってSSL証明書を作成
- CloudDNSにStatic IPを作成
- k8s Ingressを作成し、Static IPとSSL証明書を付与

下図のように、SSL証明書が正しく取得できました。

![スクリーンショット 2018-07-28 17.50.12.png](https://qiita-image-store.s3.amazonaws.com/0/36973/b3ad0669-81d1-9ae0-eee7-fcfc8f195d3c.png)


## 参考

- [GKE で TLS 証明書を自動管理(cert-manager DNS-01 編)](https://qiita.com/apstndb/items/3a39a1e6acacbbc30765)
- https://cloud.google.com/kubernetes-engine/docs/tutorials/http-balancer
Carrierwave と fog で「 NoMethodError - undefined method `key' for nil:NilClass:  」 

って、出たんだけどあまり有効なログが一緒に出てくれなくてどうして良いかわからなかったとです。

現象としては、Carrierwaveでcache場所をS3にした時に、バリデーションエラーが一回起きてから保存した際にのみ発生。
また、herokuのproductionでだけ発生（していると思い込んでて）、ログを仕込むにも仕込みにくい感じでどうするかと思ってたところ、いくつか設定できるものを発見して、結果解決できたので置いときますね。

とりあえず結論: どうやら当該のエラーは存在するはずのファイルが無い場合に結果として起こるらしいですよ。

## EXCON_DEBUG=true

https://stackoverflow.com/questions/22926523/how-to-debug-fog-and-carrierwave-setting-remote-avatar-url-to-facebook-profile

通信するのに使っているライブラリのデバッグモードですね。通信系のログが丁寧になります。素敵！

## DEBUG_RESPONSE=true

FogがXMLの通信結果をパースしている時にエラーの場合にこれが有効だとログにでるぽいです。多分今回は役に立たなかったけど、せっかく調べたので置いときますね。

# herokuに設定する時には
下記のような感じですね。

```
$ heroku config:set EXCON_DEBUG=true
```

あとは

```
$ heroku logs --tail
```

して、エラー時のレスポンスをコピペしてきてジックリ拝見しました。終わったらデバッグの設定オフにしないとログが出過ぎてしまうので戻しましょうね。

# 私のへま
1. アップされたファイルをuploaderで強制的にpngに変換していた
1. jpgファイルをアップした時などにバリデーションエラーになる
1. S3上のファイルはpngに変換されているけれども再通信する時にはjpgで取りに行く
1. 「ファイルあらへんねん」って404が返ってました。

はよ言ってやw 
ほんとはどこかのタイミングで適切な例外メッセージ入れて投げると良いんでしょうね（PullRequestせよって事案なのわかります。手の空いた時にやらせて。今は無理）。

# おしまいに

Carrierwaveは便利ですがこの辺りを整合しないといけないのちょっと辛い時ありますね。もうすぐActiveStorageさんがスーパーになって忘れていい知識になるんでしょう。と、願ってます。
Vue.jsでSPA - [5] リアクティブになってる？

[前回](https://qiita.com/narutaro/items/df793bb34129d113d9f2)の続き

前回みたエラーメッセージで`Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.`というのがあり，ちょっと気になったので，今回は`data`がリアクティブになってるかどうかを確認してみる回


## リアクティブ？

公式の[このあたり](https://jp.vuejs.org/v2/guide/reactivity.html)読む．Vueのインスタンスの`data`のオブジェクトの中にあるプロパティはリアクティブのはず．

ちなみに公式にある**`Object.observe` の断念**という記載が気になって調べて見た．[てっく煮ブログ](http://tech.nitoyon.com/ja/blog/2015/11/18/death-of-oo/)が詳しく，面白く読ませていただいた．さすが動きの早いフロント界隈，いろいろある．

## やってみる

要は，`data`いじると`DOM`が連動して変わるってことみたいなので，やってみる．といってもデベロッパーツールから`data`オブジェクトに値いれたり，消したりしてみるだけやけど．



簡単のため，コンポーネント化してない，[第二回](https://qiita.com/narutaro/items/9abbf7881f692c985484)の時のコードで試してみる．


```
vm.location.push({'id':4, 'name':'Site4', 'country':'Japan', 'metro':'Tokyo'})
```

で値追加して

```
vm.location.pop()
```

で消しただけ．


## スクリーンショット

リアクティブ感を貼っときます．

![Image from Gyazo](https://i.gyazo.com/239bfafc16fc03e2d09762ccfcaeaf78.gif)

今日はこんだけ．ほとんど進んでないが，続けることに意味があるということで．

## 参考にしたサイト

1. [公式 - リアクティブの探求](https://jp.vuejs.org/v2/guide/reactivity.html)
2. [てっく煮ブログ](http://tech.nitoyon.com/ja/blog/2015/11/18/death-of-oo/) 

## 次回

次こそ，コンポーネントのところを別ファイルにする．そして，テーブルのデータをサーバから取得する．

## シリーズ

- [Vue.jsでSPA - [1] Element UIでベースの画面をつくる](https://qiita.com/narutaro/items/50d0e4714f93279502c9)
- [Vue.jsでSPA - [2] Element UIで各ペインの画面をつくる](https://qiita.com/narutaro/items/9abbf7881f692c985484)
- [Vue.jsでSPA - [3] vue-routerでルーティング ](https://qiita.com/narutaro/items/74178f4ea031b0ccfa44)
- [Vue.jsでSPA - [4] コンポーネントにしてみる ](https://qiita.com/narutaro/items/df793bb34129d113d9f2)
- [Vue.jsでSPA - [5] リアクティブになってる？](https://qiita.com/narutaro/items/bed4eab6e53e3b46c0b2)
- [Vue.jsでSPA - [6] サーバからのデータ取得](https://qiita.com/narutaro/items/82f4d9635c398524431c)
- [Vue.jsでSPA - [7] Vueからサーバデータ取得](https://qiita.com/narutaro/items/91da194788318c226e0e)
- [Vue.jsでSPA - [8] バックエンドとうまくやっていこうとして試したこと](https://qiita.com/narutaro/items/3b7135eed8f6e930a0e6)
- [Vue.jsでSPA - [9] 今更ながらCORSとそのエラーの回避方法](https://qiita.com/narutaro/items/26e4cbec386bc054bbd7)
- [Vue.jsでSPA - [10] Safari..お前か...3rd party cookie](https://qiita.com/narutaro/items/e53f653d73a6934046d0)
- [Vue.jsでSPA - [11] Element UIでログイン画面](https://qiita.com/narutaro/items/010009c0198371fee658)
- [Vue.jsでSPA - [12] ログイン：シングルペインからツーペインへ画面遷移](https://qiita.com/narutaro/items/fca953b3b2ed5c63360c)
- [Vue.jsでSPA - [13] モバイル向けに OnsenUI に手をだす](https://qiita.com/narutaro/items/bdc0e25c22369466bed3)
- [Vue.jsでSPA - [14] Vue.jsとOnsenUIを使ったオレオレなショッピングカートチュートリアル](https://qiita.com/narutaro/items/9502b90b565366911c57)
- [Vue.jsでSPA - [15] 世界中の人とミーティング時間を決める時に便利なやつ](https://qiita.com/narutaro/items/d6431f54050504bf1551)
- [Vue.jsでSPA - [16] へー、FirebaseでWebアプリのログインってこうやるのか](https://qiita.com/narutaro/items/3c37fe6c3b19a6143a07)
PrologでLisp遊び

#はじめに
Prologで書いたLispモドキです。O-Prologのテストを兼ねて書きました。S式の代わりにPrologのリストを使います。Prologで遊びつつLispの内部構造をお楽しみください。実用性はまったくありません。遊びです。

#使い方

起動はreplです。終了は[quit]です。

```prolog


| ?- repl.
> [defun,foo,[a,b],[*,a,b]].
t
> [foo,10,2].
20
> [setq,x,2].
t
> x.
2
> [quit].
t
yes
| 


```


#拡張
四則演算しか実装していません。いろいろ追加して遊んでください。


#コード

```prolog

%Lisp in Prolog


repl :-
    repeat,
    write('> '),
    read(X),
    eval(X,Y,[]),
    write(Y),nl,
    (X=[quit]->true;fail).
    
eval(X,X,E) :-
    integer(X).
eval(X,X,E) :-
    float(X).
eval(X,Y,E) :-
    atom(X),
    assoc(X,E,Y).
eval(X,Y,E) :-
    atom(X),
    global(X,Y).
eval([quit],t,E).
eval([defun,F,A,B],t,E) :-
    assert(fun(F,A,B)).
eval([setq,X,Y],t,E) :-
    eval(Y,Z,E),
    assert(global(X,Z)).
eval(X,Y,E) :-
    funcall(X,Y,E).
    
funcall([F|A1],Z,E) :-
    fun(F,A,B),
    argument(A,A1,Y),
    append(Y,E,E1),
    eval(B,Z,E1).
funcall([+,X,Y],Z,E) :-
    eval(X,X1,E),
    eval(Y,Y1,E),
    Z is X1+Y1.
funcall([-,X,Y],Z,E) :-
    eval(X,X1,E),
    eval(Y,Y1,E),
    Z is X1-Y1.
funcall([*,X,Y],Z,E) :-
    eval(X,X1,E),
    eval(Y,Y1,E),
    Z is X1*Y1.
funcall([/,X,Y],Z,E) :-
    eval(X,X1,E),
    eval(Y,Y1,E),
    Z is X1/Y1.

assoc(X,[],Z) :- fail.
assoc(X,[[X|Y]|Ys],Y).
assoc(X,[_|Ys],Z) :-
    assoc(X,Ys,Z).
    


argument([X],[Y],[X|Y]).
argument([X|Xs],[Y|Ys],[[X|Y],Z]) :-
    argument(Xs,Ys,Z).
    

global(t,t).
global(nil,nil).

:- dynamic(fun/3).
fun(dummy,a,b).

```
Googleカレンダー使うなら覚えておくべきショートカットキー達+覚え方

こんにちは、教育業界で働く新米データサイエンティストです。
弊社では全社的にスケジュール管理をGoogleカレンダーで行なってます。
ある日もっと楽に操作できないかと思って調べていたところショートカットキーを見つけ、便利だと思ったのでよく使うもの+その覚え方をここにまとめます。

「Shift + /」でショートカットキー一覧が表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/221497/b5b2a622-3617-c8f1-e3fd-47d0bfb9f0e6.png)

##**移動系**
####**・前の期間：「p」（past）**
####**・次の期間：「n」（next）**
####**・今日：「t」（today）**

自分はデフォルトのビューを日単位のビューにし、関わりのある人の予定を平行で確認しているので、頻繁に使用します。
前の期間、次の期間はkとjでも代用でき、そのほうがキーが隣あっていて使いやすいので、主にそっちを使用しています。

##**ビュー切り替え系**
####**・日単位ビュー：「d」（day）**
####**・週単位ビュー：「w」（week）**
####**・月単位ビュー：「m」（month）**

会社では主に日単位のビューしか使わないのですが、プライベートの方では日付粒度を結構切り替えるので、便利です。
まとまった単位で予定を把握したい際にぜひ。

##**予定操作系**
####**・予定を作成：「c」（create）**
####**・予定を編集：「e」（edit）**
####**・予定を保存：「Cmdキー + s」（save）**

予定の作成はGUI上から作成したい時間の部分をドラッグすることでできますが、細かい時間で設定したい時など、自分は思った時間に作成することができなかったりしたので、最近はcから詳細を入力しています。
予定を編集するときは、編集したい予定をクリックしてからeを押すと編集できます。

##**その他**
####**・設定を開く：「s」（setting）**
####**・カレンダーを追加にフォーカス：「+」**
ミーティングの設定時に参加予定者の予定を確認するのに、カレンダー検索ボックスにフォーカスするショートカットキーをよく使います。

##終わりに
数がそんなに多くなく、１つ１つも語源があり覚えやすく、覚えるだけで劇的にGoogleカレンダーの操作スピードが増すのでぜひ使ってみてください！
Karapürçek Nakliyat

Karapürçek nakliyat firmaları arasında yer almakta olan şirketimiz müşterilerimize daha iyi hizmetler verebilmek için sürekli olarak çalışmalarını sürdürmektedir. Nakliyat sektörü oldukça özveri ve kalite isteyen işlerden bir tanesidir. Bizlerde Karapürçek Nakliyat Firmaları olarak müşterilerimize vermiş olduğumuz nakliyat hizmetlerimizle birlikte taşımacılık alanında lider bir konuma gelmiş bulunmaktayız. Kadromuzda görev yapmakta olan profesyonel uzman personellerimiz siz değerli müşterilerimize hizmetleri sorunsuz bir şekilde iletebilmek için çalışmalarına ara vermeden devam etmektedir. Sizlere sunmuş olduğumuz bu hizmetlerimizin daima arkasında durarak ilerleyişimizi sürdürmekteyiz. Evlerini taşımak zorunda kalan müşterilerimize yardımcı olmak için girmiş olduğumuz nakliyat sektöründe KarapürçekNakliyat Firmaları adına yapmış olduğumuz çalışmalarda müşterilerimiz tarafından yoğun bir ilgi ile karşılaşmış bulunmaktayız.
![7175340a-8360-4282-aea3-88a1757eb318-768x432.jpg](https://qiita-image-store.s3.amazonaws.com/0/276254/9ca112a6-20b5-b887-9d6f-0abd0187fd57.jpeg)
Karapürçek Ev Taşıma Firmaları

Günümüzde onlarca insan yaşamış oldukları semtlerden başka bir yere taşımak için nakliyat firmalarına ihtiyaç duymaktadır. Bizlerde kendilerine yardımcı olmak için göstermiş olduğumuz bu hizmetlerimizle birlikte bünyemizde görev yapmakta olan uzman kadrolarımız hizmet vermek için çalışmaktayız. Karapürçek ev taşıma firmaları arasında en lider konuma sahip olan firmamız bulunmuş olduğunuz evinizin adresinizdeki bütün eşyalarınızı sorunsuz bir şekilde yeni evinize taşımak için tam destekli çalışmalarımızı sürdürmekteyiz. Burada bulunmakta olan insanlarımızın yüklerini hafifletmek için çalışmalarımızı sürdürmüş olduğumu evden eve taşımacılık ile durmadan yeniliklere giderek firmamız kolu altında görev yapmakta olan personellerimizi tam teşekkürlü olacak şekilde bilgilendirmekteyiz.
Bizim Web Adresimiz : https://www.karapurceknakliyat.net/
micro:bitで0～99,999まで表示出来る「そろばん」パッケージ

![soroban.jpg](https://qiita-image-store.s3.amazonaws.com/0/44523/20e6e782-6170-921c-3c66-f1e84953691a.jpeg)

# 背景

javascriptブロックエディタにおいて、2桁以上の数字を「数を表示」ブロックで表示すると、スクロールに時間がかかる上読みづらい問題がありました。2桁表示するWhaleySansFont https://qiita.com/asondemita/items/a9a4c8b78e268955724b を紹介しましたが、
- 2桁しか表示が出来ない。
- 結構読みにくい
という状況です。

# そろばんパッケージ

[Python で作られている方](https://qiita.com/tagetage3/items/b58391ad84572c26f376)がいらっしゃいますが、こちらはjavascriptブロックエディタ用のパッケージとしての紹介になります。

パッケージURL : https://github.com/mbitfun/pxt-soroban

## インストール手順

1. 右上の歯車をクリックし、「パッケージを追加する...」を選択
2. 「検索または、プロジェクトのURLを入力...」にパッケージのURLを入力してEnterを押します
3. 「Soroban 利用者が提供したパッケージであり...」をクリックします。![Microsoft MakeCode for micro bit.png](https://qiita-image-store.s3.amazonaws.com/0/44523/ea666954-18bd-2940-cb2b-5236063d1923.png)
4. ツールボックスに「そろばん」というツールが追加され、中には「数を表示」ブロックが登場します。![Microsoft MakeCode for micro bit.png](https://qiita-image-store.s3.amazonaws.com/0/44523/719ae4a6-18c4-f8c6-58eb-c845e8ed8d85.png)

## サンプルプログラム

https://makecode.microbit.org/_5AeDD04PyFL9
AngularJS | ディレクティブ名 

| ディレクティブ名 | 概要 |
|:--|:--|
| ng-click | クリックした時 |
| ng-dblclick | ダブルクリックした時 |
| ng-mousedown | マウスボタンが押されたとき |
| ng-mouseup | マウスボタンが離されたとき |
| ng-mouseenter | 要素にマウスポインターが入った時 |
| ng-mouseleave | 要素からマウスポインターが出た時 |
| ng-mousemove | 要素上をマウスポインターが移動した時 |
| ng-mouseover | 要素上にマウスポインターが重なった時 |
| ng-mouseout | 要素上に重なっていたマウスポインターが外れた時 |
| ng-focus | 要素にフォーカスした時 |
| ng-blur | 要素からフォーカスが外れた時 |
| ng-keydown | キーを押した時 |
| ng-keypress | キーを押し続けている時 |
| ng-keyup | キーを離した時 |
| ng-change | 値を変更し時 |
| ng-copy | コピーした時 |
| ng-cut | カットした時 |
| ng-paste | ペーストした時 |
| ng-submit | サブミットした時 |
[Arduino] Read BLE Byte Array on Arduino 101 

# Arduino101?

1. Core uP : Intel Curie[ x86 Quark core ]
2. Bit : 32 Bit 
3. [About Arduino 101](https://store.arduino.cc/genuino-101)

#CODE

### Important
1. BLECharCharacteristic --> BLECharacteristic


```c++:ble_callback.ino

/*
   Copyright (c) 2016 Intel Corporation.  All rights reserved.
   See the bottom of this file for the license terms.
*/

#include <CurieBLE.h>

const int ledPin = 13; // set ledPin to use on-board LED

BLEService ledService("19B10000-E8F2-537E-4F6C-D104768A1214"); // create service

// create switch characteristic and allow remote device to read and write
BLECharacteristic switchChar("19B10001-E8F2-537E-4F6C-D104768A1214", BLERead | BLEWrite, 20);

void setup() {
  Serial.begin(9600);
  pinMode(ledPin, OUTPUT); // use the LED on pin 13 as an output

  // begin initialization
  BLE.begin();

  // set the local name peripheral advertises
  BLE.setLocalName("LEDCB");
  // set the UUID for the service this peripheral advertises
  BLE.setAdvertisedService(ledService);

  // add the characteristic to the service
  ledService.addCharacteristic(switchChar);

  // add service
  BLE.addService(ledService);

  // assign event handlers for connected, disconnected to peripheral
  BLE.setEventHandler(BLEConnected, blePeripheralConnectHandler);
  BLE.setEventHandler(BLEDisconnected, blePeripheralDisconnectHandler);

  // assign event handlers for characteristic
  switchChar.setEventHandler(BLEWritten, switchCharacteristicWritten);
  // set an initial value for the characteristic
  switchChar.setValue(0,0);

  // start advertising
  BLE.advertise();

  Serial.println(("Bluetooth device active, waiting for connections..."));
}

void loop() {
  // poll for BLE events
  BLE.poll();
}

void blePeripheralConnectHandler(BLEDevice central) {
  // central connected event handler
  Serial.print("Connected event, central: ");
  Serial.println(central.address());
}

void blePeripheralDisconnectHandler(BLEDevice central) {
  // central disconnected event handler
  Serial.print("Disconnected event, central: ");
  Serial.println(central.address());
}

int rxHead = 0;
volatile static uint8_t rxBuffer[20];

void switchCharacteristicWritten(BLEDevice central, BLECharacteristic characteristic) {
  // central wrote new value to characteristic, update LED
  Serial.print("Characteristic event, written: ");
  size_t len = switchChar.valueLength();
  const unsigned char *data = switchChar.value();

  Serial.print("Got data:");
  Serial.write(data, len);
  

}

void addReceiveBytes(const uint8_t* bytes, size_t len) {
  // note increment rxHead befor writing
  // so need to increment rxTail befor reading
  for (size_t i = 0; i < len; i++) {
    rxHead = (rxHead + 1) % sizeof(rxBuffer);
    rxBuffer[rxHead] = bytes[i];
  }
}

```

#Result
![image.png](https://qiita-image-store.s3.amazonaws.com/0/137182/90772398-1445-ac97-2e7d-c153031f7834.png)
JavaScript：Handsontableでの入力内容をChart.jsに即時反映させるWebアプリの例

## まえがき
この記事は、2016年に私が自分の勉強用に開発したWebアプリを題材にしています。
情報がやや古いことと初心者が初めて作ったアプリであることから、イマイチなコーディングになっている部分もあります。
とは言え、計算処理は厳重にテストしたため問題なく、折角リリースしたし少しでも多くの人に見てもらえたらいいなという気持ちもあり、そして、もしかしたらこの記事が誰かの役に立つかもしれないという思いから投稿してみました。

## どんなアプリ？
タイトル：[Gaussian Component Generator](https://gcg.herokuapp.com/)
画面に入力した個体群組成データからヒストグラムを即時描画し、そこからあの[Bhattacharya's method](https://www.jstor.org/stable/2528285?seq=1#page_scan_tab_contents)で正規分布曲線をパパッと計算させて、データとグラフをExcel出力するという一部のマニア向けWebアプリ。
テキストは英語のみ（自前なので多少間違っていてもご愛嬌）。
ChromeかFire Foxで見ることを推奨。
画面左上にあるメニューからSampleページを使って、Generateページを触ってみると何となく動きが分かると思います。

![gcg.png](https://qiita-image-store.s3.amazonaws.com/0/266061/09ca715d-3954-2d6c-6dc6-f9d928fbf36b.png)

## 主な材料
- Handsontable 0.26.0
- Chart.js 2.1.3
- Decimal.js 7.0.1
- jQuery 3.1.1
- Apache POI 3.15
- Spring Boot 1.4.2.RELEASE
- Spring Tool Suite 3.8.1.RELEASE
- Thymeleaf 2.1.0.RELEASE

などを使っています。
サーバは[HEROKU](https://www.heroku.com/)の無料プランで借りているので、アクセス時の表示が遅いことがありますがご了承ください。
元々はJava（1.8）の勉強のために作り始めましたが、画面に入力した内容をサーバに送ってからまた計算結果を受け取って表示させてっていうプロセスがアホらしかったので、メインの計算処理はフロントでJavaScriptで書いています。
該当のコードは[Generate](https://gcg.herokuapp.com/generate)ページでソースを表示させて、generate.jsの中身を覗くと見れます（圧縮してないです）。

結果的にJavaScriptの方が勉強になったかもしれない。。。

## ポイント
- `Handsontable`をnewする際に、`afterChange`においてグラフを更新するコードを記述することでタイトルの内容を実現しています。
- 参考文献から計算式を厳密にプログラム化し、理論値と一致することをテスト済です。[^1]
- Flat UIを参考にして見やすさにも力を入れました。[^2]

## 至らなかったところ
- マルチブラウザ・マルチデバイス対応はあまりできていません。Bootstrapなども使わずに、CSSをゴリゴリ書いています。
- 出力するExcelファイル内でグラフの軸がずれることがあります。POIでどうにもいじれなかったので、画面に直し方の注記を書いて諦めました。


## あとがき
初めて作ったアプリだったので、当時は苦しみながらも楽しかった。
会社に行きながら、平日の早朝深夜とか休日にやったりして、脳内で色んな物質が出まくっていたと思う。
やっぱりビジネスロジック（主に計算）に一番時間がかかった。
行き詰まってもネットに参考になるコードが沢山あるので、プログラミングについてアウトプットしている方々には本当に助けられる。
Qiitaとstackoverflowは本当に良い場所。

[^1]: 文献（マニュアル）の計算結果に端数誤差と思われる数値が紛れていたので、誤差のないようにExcel上で計算した理論値と完全一致することを確認しました。誤差についてはサポートに問い合わせましたが、未だに返事が来ないので機能していないようです。。。
[^2]: 今見ると直したいところが山ほどありますが、それも良い思い出。
1-888-489-7936 Malwarebytes System Scanning Error

![qeewwq.png](https://qiita-image-store.s3.amazonaws.com/0/276248/ad7e6ba9-c11c-15b1-5bf9-b92119bc6225.png)
 The technical team this is to your issues and offers well rounded solutions which are developed exactly to deal with the issues you are facing. To access quality solutions you have to contact toll free Malwarebytes Tech Support Number.
More info : http://www.malwarebytephonenumber.com/
Rubyのeach_with_indexメソッドについて

##Rubyのeach_with_indexメソッドについて
初歩的かもしれませんがRubyのeach_with_indexメソッドについてまとめます。

###each_with_indexとは？
each_with_indexとは配列に対して利用できるメソッドです。
配列に対して、番号を振りたい時などに利用します。
具体的な使い方は下記です。

```yamanote.rb
yamanote_line = ["大崎","品川","田町","浜松町","新橋","有楽町","東京","神田","秋葉原","御徒町","上野","鷲谷","日暮里","田端","駒入","巣鴨","大塚","池袋","目白","高田馬場","新大久保","新宿","代々木","原宿","渋谷","恵比寿","目黒","五反田"]

yamanote_line.each_with_index do |station, number|
puts "山手線の#{number}番目の駅は#{station}です。"
end
```

この場合、出力値は
>山手線の0番目の駅は大崎です。
山手線の1番目の駅は品川です。
山手線の2番目の駅は田町です。
・・・・・・


###indexを１から始める
基本的にindexは０から始まる仕様なので、もしこれを１から始めたい場合などはこんな感じにします。

```yamanote.rb
・・・・・省略・・・・・
yamanote_line.each_with_index do |station, number|
puts "山手線の#{number+1}番目の駅は#{station}です。"
end
```

上記のように変更するとindexは１から始めることができます。
>山手線の1番目の駅は大崎です。
山手線の2番目の駅は品川です。
山手線の3番目の駅は田町です。
・・・・・・


よろしければこちらのブログの方ものぞいてください。
[讃岐小僧のEngineering×Techメモ]
(https://www.sanuki-kozo.com/entry/2018/10/26/192520)
Malwarebytes Contact Support 1-844-894-7054 

![f931a159400525a1bea40684ea2c2fc4.jpg](https://qiita-image-store.s3.amazonaws.com/0/276232/7d5c2919-abbb-e0d3-0e03-bd05716b3742.jpeg)

The tech support team will listen to your issues and ask you to implement the remedies step by step. You will have to provide them with feedback of the results you are getting upon which they will provide you with further remedies.
More info : http://www.informationclicks.com/