OmniAICreator/Qiita-1.07M huggingface dataset:
Visual Studio / WPF > コントロール > PasswordBox

```txt:動作環境
Windows 7 Pro (32bit)
Microsoft Visual Studio 2017 Community
Sublime Text 2
```

PasswordBoxを使ってみた。

参考: [[ストアアプリ][入門] Step36. PasswordBoxコントロールを使用する ～基本使用方法～ @ HIRO's .NETさん](http://blog.hiros-dot.net/?p=6083)

```xml:MainWindow.xaml
<Window x:Class="_170501_t0650_doSomething.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:_170501_t0650_doSomething"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <PasswordBox x:Name="passbox1" HorizontalAlignment="Left" Margin="47,67,0,0" VerticalAlignment="Top" Width="164"/>
        <Button Content="Button" Click="Button_Click"
                HorizontalAlignment="Left" Margin="47,120,0,0" VerticalAlignment="Top" Width="75"/>

    </Grid>
</Window>
```

```MainWindow.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace _170501_t0650_doSomething
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            string msg = passbox1.Password;
            MessageBox.Show(msg);
        }
    }
}
```

![work.png](https://qiita-image-store.s3.amazonaws.com/0/32870/79de7a62-8645-2030-55a1-6112a53a15db.png)

![work.png](https://qiita-image-store.s3.amazonaws.com/0/32870/89f47862-7e6d-5bdd-9d91-87e5f07a02a8.png)
技術英語 > where the code is [incomprehensible], dense, or way too big or complex

@ http://thecodist.com/article/the-six-goals-of-every-programming-project

>  If you build products where the code is **incomprehensible**, dense, or **way too** big or complex, the less likely you can rapidly produce new versions. 

意訳「ある製品を作るとする。そのコードは理解不能で、密度が濃く、あまりに大きく、複合物であるとする。新しいバージョンを早く作ることができる可能性は低い」

### 設計と機能追加

- 最初の設計
   + 時間をしっかり確保
- 機能追加
   + 短時間でいいでしょう

このパターンでいくと失敗する。

機能追加時には、波及するコードすべてに整合性があるように作る必要がある。「すでに動いているから」という理由で短時間での作業とすると時間が足りなくなる。そういう場合、人によっては無理やりなコードを作り、incomprehensible, dense, or way too bigな何かが残される。

[良い設計にはしっかりとした分析が大事 by @MasayaMizuhara さん](http://qiita.com/MasayaMizuhara/items/b8ed35536bece0f74723)
> 設計が腐敗する
...
> 既存の設計構造の中に不具合を修正するためのその場しのぎのコードが実装されることになり、**当初あった設計意図が失われる**ことになる。

機能追加時にコードを読みやすく実装するには、機能追加前の実装よりも考えることが増えると思う。
python, openFrameworks(c++)

openFrameworks(c++)の中でpythonを実行する. 

この記事は, 偉大なる先駆者様の記事を試させていただいた, というだけの個人的な備忘録です. 

当該記事はつい先ほど投稿された @Hzikajr さんの記事
http://qiita.com/Hzikajr/items/afe73cb287af5ab90265
です. 
こんな僕の記事よりもぜひそちらを読まれるべき. 
というか読んでください. 
この僕の記事には重要なポイントは載ってないです. 

pyenvはこちらを参考にしました:
http://www.python-izm.com/contents/basis/pyenv.shtml

個人的にpythonとoFの連携に苦しんでいたので大変助かりました. 
テストは @Hzikajr さんと全く同じ環境です. 
satoruhigaさんのofxPy
https://github.com/satoruhiga/ofxPy
のexampleの一部も試しました. 

```bin/data/python/test_script.py
print('hello from test_script.py')

def my_fn():
	print ('hello from python function')

def my_fn2(theta):
	import math
	a = math.sin(theta * math.pi)
	return a

def get_random():
	import random
	return (random.random(), random.random())

def size_expression(t):
	import math
	return abs(math.sin(t * math.pi) + math.sin(t * math.pi * 1.5))

```

```ofApp.h
#pragma once

#include "ofMain.h"
#include "ofxPy.h"

class ofApp : public ofBaseApp{

	public:
		void setup();
		void update();
		void draw();

		void keyPressed(int key);
		void keyReleased(int key);
		void mouseMoved(int x, int y );
		void mouseDragged(int x, int y, int button);
		void mousePressed(int x, int y, int button);
		void mouseReleased(int x, int y, int button);
		void mouseEntered(int x, int y);
		void mouseExited(int x, int y);
		void windowResized(int w, int h);
		void dragEvent(ofDragInfo dragInfo);
		void gotMessage(ofMessage msg);
		
    ofxPy::Context  python;
};
```

```ofApp.cpp
#include "ofApp.h"

//--------------------------------------------------------------
void ofApp::setup(){
    
    putenv((char *)"PYTHONHOME=/Users/ksumiya/.pyenv/versions/anaconda3-4.3.1");
    python.setup();

    ofSetFrameRate(60);
    ofSetVerticalSync(true);
    ofBackground(0);
    
    // append data/python to PYTHONPATH
    python.appendPath(ofToDataPath("python"));
    
    // import and call python script function
    python.exec("import test_script; test_script.my_fn()");

}

//--------------------------------------------------------------
void ofApp::update(){
    ofSetWindowTitle(ofToString(ofGetFrameRate()));
}

//--------------------------------------------------------------
void ofApp::draw(){
    // get tuple return value
    auto v = python.eval<ofxPy::tuple>("test_script.get_random()");
    
    // unpack and cast array-like object
    float x = ofxPy::get<float>(v, 0) * ofGetWidth();
    float y = ofxPy::get<float>(v, 1) * ofGetHeight();
    ofDrawRectangle(x, y, 10, 10);
    
    // get function and call with argument
    float s = python.eval("test_script.size_expression").call(ofGetElapsedTimef()).cast<float>();
    ofDrawCircle(ofGetMouseX(), ofGetMouseY(), s * 50);

    float a = python.eval("test_script.my_fn2").call(0.25).cast<float>();
    string msg;
    msg += ofToString(1/a) + "\n";
    ofSetColor(255);
    ofDrawBitmapString(msg, 100, 100);

}
```

僕が足したのは```my_fn2```の部分だけ. 
結果として, 1/sin(pi/4) なので, ```sqrt(2)```となり, ```1.414...```がでます. 

先駆者様, 偉大だ...
pyenvでインストールしたAnaconda-PythonをopenFrameworksから使う

##アドオンを使いつつpyenvのPythonを利用したい
openFrameworksで作成するソフトウェアから普通にPythonを利用するには、chaosctさんの[ofxPython](https://github.com/chaosct/ofxPython)や、satoruhigaさんの[ofxPy](https://github.com/satoruhiga/ofxPy)を使うのが楽っぽいですが、OSX上でpyenvを使ってインストールしたAnacondaパッケージのなかのPythonを使ってみたかったので、トライしてみました。

ここでは、ofxPyを利用してOSX上でoF0.9.8を使っています。導入するのはAnaconda3-4.3.1に付属するPython3.6.1です。

##プロジェクトの作成と調整
僕の場合は、普通にproject-generatorでアプリを作りました。ofxPyはもちろん追加済み。
プロジェクトを開いて、まずPythonライブラリを投入します。
インストールディレクトリが`/Users/me/.pyenv/versions/anaconda3-4.3.1`なので、その中のlibディレクトリにある「libpython3.6m.dylib」をドラッグ&ドロップします。このとき、オプションでプロジェクトディレクトリにライブラリファイルをコピーするかどうかを聞かれますが、コピーしなくていいです。
<img width="825" alt="pyenv-of-01.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/178873/f0035193-464f-b33e-4b22-f34ff1948faa.jpeg">

つぎに、プロジェクトのbuild settingsを編集します。
`Header Search Paths`に以下を追加します。ディレクトリは適宜利用されているanacondaのインストールディレクトリに読み替えてください。
```/Users/me/.pyenv/versions/anaconda3-4.3.1/include
/Users/me/.pyenv/versions/anaconda3-4.3.1/include/python3.6m
```
続いて、`Library Search Paths`
```/Users/me/.pyenv/versions/anaconda3-4.3.1/lib
```
さらに、実行時に「ライブラリが無い」と言われるのを防ぐために、Runpath Search Pathsにも同様のパスを設定します。
```/Users/me/.pyenv/versions/anaconda3-4.3.1/lib
```

プロジェクトのbuild phasesでは、Copy Filesに「libpython3.6m.dylib」を追加します。僕の場合はただ追加するだけで、DestinationやSubpathなどの設定はしませんでした。

##テストコード
基本的にはofxPyのエグザンプルファイルが動けばいいですが、動作チェックだけなら以下のコードでエラーが出なければ成功ということになると思います。
重要なのは、`$PYTHONHOME`を設定して、というメッセージがでてPythonが使えないことがあるので、**`putenv`関数でプログラム内の環境変数にPythonのホーム(=Anacondaディレクトリ)へのパスを指定しておく**ことです。

```cpp:ofApp.h
#pragma once

#include "ofMain.h"
#include "ofxPy.h"

class ofApp : public ofBaseApp{

	public:
		void setup();
		void update();
		void draw();
		
    ofxPy::Context  python;
};
```

```cpp:ofApp.cpp
#include "ofApp.h"

//--------------------------------------------------------------
void ofApp::setup(){
    ofSetFrameRate(0);
    ofSetVerticalSync(false);
    ofBackground(0);
    
    putenv((char *)"PYTHONHOME=/Users/me/.pyenv/versions/anaconda3-4.3.1");
    python.setup();
}
```

以上で、つかえるはず。
Google スプレッドシートで編集したら Google Apps Script で HTTP リクエストを行う


# 目標
* Google スプレッドシートを更新したら、入力した URL のはてなブックマーク数を隣のセルに表示するところまでをやります

# UrlFetchApp

UrlFetchApp クラスを使うことで外部URLへ HTTP/HTTPS リクエストを送って返り値を受け取ることができます

[Google Apps Script — Google](https://developers.google.com/apps-script/reference/url-fetch/url-fetch-app)

# onEdit() 内では UrlFetchApp を使えない

Google Apps Script では [Simple Triggers](https://developers.google.com/apps-script/guides/triggers/) と呼ばれるイベントが用意されているので、これらと同じ名前の関数を用意してあげるだけでシートを開いた時や編集したときの処理を制御できます。

```onEdit.gs
function onEdit(e){
  var range = e.range;
  range.setNote('hogehoge');
}
```

しかし編集時に実行される `onEdit()` 内では UrlFetchApp を使うことができないようです。
[URLfetch in an event failing](http://stackoverflow.com/questions/20457847/urlfetch-in-an-event-failing)

そのため上記の URL の Answer にもあるように関数を作成し、トリガー経由で関数を実行するようにすることで編集時に `UrlFetchApp.fetch` が動作するようにします。

以下でその方法を説明します。

# 完成品のコード

まず今回作成した Google Apps Script は以下のようになります。

```sample.gs
var API_URL = "http://api.b.st-hatena.com/entry.count?url=";

function fetchAndUpdate() {
  try {
    // アクティブになっているスプレッドシートの情報を取得する
    var ss = SpreadsheetApp.getActiveSpreadsheet();

    // アクティブになっているシートの名前が sheet1 ではなかったら終了
    if (!ss.getActiveSheet().getName().match(/sheet1/)) return;

    // アクティブなセルの情報を取得
    var rng = ss.getActiveSheet().getActiveCell();

    // アクティブなセルの値
    var activeCellValue = rng.getValue();

    // アクティブなセルが1列目じゃなかったら終わり
    if (rng.getColumn() !== 1) return;

    // はてブのAPIへリクエストを送って返り値を受け取る
    var response = UrlFetchApp.fetch(API_URL + activeCellValue);
    var bookmarked = response.getContentText();

    // アクティブになっている行のB列にブックマーク数を表示する
    ss.getRange("B" + rng.getRow()).setValue(bookmarked);
  } catch (err) {
    Logger.log(err);
  }
}
```

1列目に URL を入力するとはてブ数取得してきて隣の2列目に表示するような内容になっています。

これをトリガーをつかって実行するように設定を行います。

# トリガーの設定

メニューの時計アイコンをクリックします。

[![https://gyazo.com/e39d446edb01e5dd748f1602aa137fc4](https://i.gyazo.com/e39d446edb01e5dd748f1602aa137fc4.png)](https://gyazo.com/e39d446edb01e5dd748f1602aa137fc4)

下記リンクをクリックして先に進みます。

[![https://gyazo.com/e0aec5d6ec9ca885664537cf9c5a547d](https://i.gyazo.com/e0aec5d6ec9ca885664537cf9c5a547d.png)](https://gyazo.com/e0aec5d6ec9ca885664537cf9c5a547d)

この時にパーミッションの要求がでた場合はアクセスを許可してあげてください。
次の画面では以下の設定を参考にしてみてください

[![https://gyazo.com/8773c445f3c02bfcddda6e70954b0b1c](https://i.gyazo.com/8773c445f3c02bfcddda6e70954b0b1c.png)](https://gyazo.com/8773c445f3c02bfcddda6e70954b0b1c)

| 項目名 | 値 |
|--------|--------|
| 実行 | fetchAndUpdate(実行される関数名) |
| イベント | スプレッドシートから、値の変更 |

設定が完了したら、保存ボタンをクリックすれば完了です。

シートに戻って 1列目に任意のページの URL を入力すると勝手にブックマーク数が入力されるようになりました。

[![https://gyazo.com/feabdf0fce1eb4545d1458d857d83fbe](https://i.gyazo.com/feabdf0fce1eb4545d1458d857d83fbe.gif)](https://gyazo.com/feabdf0fce1eb4545d1458d857d83fbe)

参考: [Googleのスプレットシートで変更した内容をGoogle Apps Script経由でチャットワークに通知するライフハック的なものを作った話。](http://qiita.com/n0bisuke/items/ed99da94aba342af3cdc)
riot.jsでchrome拡張を作ってみた

もともとは`chrome拡張を作ってみよう`から入り、試しにriot.jsでも動くのか気になったので試しました。（その際に気になった点などのメモです）
作ったのは、設定した値をフォームに自動入力できるようにする簡易的な拡張機能です。

- [chrome store](https://chrome.google.com/webstore/detail/autofill/eahekcjalfgflphdfogkbeajfjbljhmp?hl=ja)
- [github](https://github.com/t4y3/autofill)

![autofill_sample.gif](https://qiita-image-store.s3.amazonaws.com/0/159559/323c0a39-75f8-5a09-bb31-cdf0f3fc30d5.gif)

## はじめに
chrome拡張の開発を行う際に下記の投稿などを参考にさせていただきました
http://qiita.com/edit-mode/items/26d7a22233ecdf48fed8

## 構成
`src`にビルド前のファイルを置き、`public/build`にビルド後のファイルを置きます
`public`直下には`icons`, `content_script.js`, `manifest.json`を置いて`public`フォルダごとアップロードするようにしています。

```
public               // アップロードディレクトリ
　　├-build             // ビルド後のファイル
　　├-content_script.js
　　├-icons
　　└-manifest.json
src
　　├-css
　　├-js
　　├-tags
　　└-index.html
```

## 使用ライブラリ等
- [riot](http://riotjs.com/)
- [milligram(cssフレームワーク)](http://milligram.io/)
  - サイズが小さく、凝ったことをやらないのであれば使いやすかったです

## ビルド
.tagファイルをプリコンパイルして、.jsファイルに変換したものを読み込んで使用するようにしています。
また、`Content Security Policy`の関係で通常のriot.jsを使用することができなかったため、下記からriot.jsをダウンロードして使用しています。
http://riotjs.com/download/#chrome-apps

## デバッグ
基本的なデバッグは[設定画面](chrome://extensions/)の`ビューを検証`から行うのですが、
ビューの検証が表示されない場合は下記のURLを叩くと検証ができるかと思います。

![autofill_admin.png](https://qiita-image-store.s3.amazonaws.com/0/159559/2dfbc41b-07c8-cd63-1b61-a2225ff6632c.png)


```
chrome-extension://{ID}/{アップロードしたファイルのパス}
例）
chrome-extension://xxxxxxxxxx/build/index.html
```

### ビューを検証
拡張機能で使用するstorageの機能やデベロッパーツールでデバッグもできるので便利でした。

![autofill_page.png](https://qiita-image-store.s3.amazonaws.com/0/159559/b7f14879-ae1c-662b-b357-5759c28ef9a0.png)

## おわりに
ライブラリとかを使用しなければ気軽に作成することができそうです
限定公開などもあり、社内専用のツールの開発なども行えて便利そうだと思いました。
React、Vue.js、Riotのレンダリング速度の比較をやってみた


実際のところどうなんだろうと思って試してみました。がどれがいいとかいう基準ではなく単純に私の興味的なところで試しただけですので。。

## バージョン等々

各JSのバージョンは以下。

|ライブラリ|バージョン|
|:--|--:|
|React|15.5.4|
|Riot|3.4.3|
|Vue.js|2.3.0|

テストにはMochaとNightmareを使ってみました。

|ライブラリ|バージョン|
|:--|--:|
|gulp-mocha|3.3.0|
|nightmare|2.10.0|

それぞれのソースはgithubにあげてます。書き方がおかしいところあるかもしれませんが...
https://github.com/hayashida/js-comparison

## 今回試したこと

最初は

- JSONデータを10,000件取得して表示する

ただそれだけをしてみました。
結果としてはこんなかんじ。

|ライブラリ|1回目|2回目|3回目|4回目|5回目|
|:--|--:|--:|--:|--:|--:|
|React|2719ms|2611ms|2560ms|2612ms|2807ms|
|Vue.js|1110ms|1788ms|1079ms|1785ms|1842ms|
|Riot|1532ms|1479ms|1477ms|1493ms|1549ms|

私としては意外にもRiotが早いことに驚きました。載せているのは5回だけですがRiotはわりと安定して描画しているようでした。そしてReactが思ったより伸びなかったのも...という感じでした。

これだけではあっさり終わってしまうので少し条件を加えて再度試してみました。

- spanタグからinputタグに変更
- inputタグをnumberとtextで分岐させて表示する

|ライブラリ|1回目|2回目|3回目|4回目|5回目|
|:--|--:|--:|--:|--:|--:|
|React|7257ms|7067ms|7157ms|6118ms|7988ms|
|Vue.js|5596ms|5535ms|6209ms|6075ms|3300ms|
|Riot|9296ms|9444ms|10010ms|9937ms|12259ms|

そうするとVue.jsは安定していますがRiotが少し遅いかんじになってしまいました。処理が加わると色々と影響がでるのかもしれませんね。

ちなみにファイルサイズはこんなかんじ。

|ファイル名|サイズ(byte)|
|:--|--:|
|react.js|784616|
|vue.js|243437|
|riot.js|125145|

このあたりはコンパイルの仕方によっても変わってくるかもしれませんが参考程度に。

## まとめ

テストとしていいものかはわかりませんが私としては結構おもしろかったです。
ただ冒頭に書いたようにじゃあVue.jsをお勧め。というわけではなく作るものや状況によって一番いいものを選ぶのが大事だと思いますので本当に参考程度で。
色々と試すよりも一つを極めた方がいいものは作れると思います。
ELECTRON quick_start_project

# ELECTRON

## Table of Contents
1. What is ELECTRON
2. before developping
3. quick start guide

## 1.ELECTRON
[ELECTRON 公式サイト](https://electron.atom.io/)<br>
GitHub社が開発したweb技術を利用してデスクトップアプリが作成できるフレームワーク。

## 2.before developping

### 必要な環境
[nodejs](https://nodejs.org/ja/)とnpm[ node package manager ]が必要。

### 2-1.node js のインストール
![nodejs.png](https://qiita-image-store.s3.amazonaws.com/0/144543/03010aa1-7e90-4d17-643a-7a9c09137ab9.png)
[nodejs](https://nodejs.org/ja/)をクリックしてインストール。
npmはnodejsのインストール後、使えるようになっております。


## 3.quick-start-guide

_terminal_

    $ cd path_you_create
    $ git clone https://github.com/electron/electron-quick-start
    $ cd electron-quick-start
    $ npm install && npm start

_hello ELECTRON_

![electron.png](https://qiita-image-store.s3.amazonaws.com/0/144543/d18aafe8-2e34-468d-c856-bfb10895b905.png)



### 3-1.ディレクトリ構成

_directory_

    path_you_created
        |- .git
        |- .gitignore
        |- LICENSE.md
        |- README.md
        |- index.html
        |- main.js
        |- node_modules
        |- package.json
        |- render.js

_main.js_[ Server側のJavaScript ]

アプリケーションの起動・停止などクライアント側以外のjs( nodejs )での開発を行う場所


_render.js_[ client側のJavaScript ]

render.jsはindex.htmlに要求されるファイルです。
このファイルは、widowのレンダープロセスに実行される。
NodejsのAPIは全てこのプロセス中は利用可能である。

 This file is required by the index.html file and will be executed in the renderer process for that window.All of the Node.js APIs are available in this process.
日本ダーツの旅.jsを少しだけ改造してみた


ふらっと旅に出かけたくなったときに、日本地図にダーツをして行き先を決める例のあれができるといいなと思っていると実際に作っている方がいらっしゃいました。
[気軽に日本ダーツの旅.jsを作ってみた顛末](http://qiita.com/noexpect/items/ed27675e7083f2730cf5)
ただ、ご本人も書いているように"日本列島がすっぽり入る長方形の中にランダムに点"を打ってもだいたい海になってしまいます。
ならばもう少し陸地に範囲を絞ってしまおう！ということで範囲設定を改造してみました。

# 範囲設定

日本列島が弓形なので、東日本と西日本に分けてそれぞれを平行四辺形で囲むような形で範囲を設定しました。
こうすると基準点と角度を決めてしまえばあとはsin/cosで計算できます。

![image](https://qiita-image-store.s3.amazonaws.com/0/83530/abf95566-7d45-70b1-53fb-169ff6642836.png)
© [OpenStreetMap](http://www.openstreetmap.org/copyright) contributors
以下の設定値では沖縄を含む離島は範囲に含まれていませんのでご注意ください。

# ブックマークレット実装

乱数自体はx方向、y方向でそれぞれ算出し、平行四辺形の形に合わせて変換しているイメージです。

```js:説明用
(function(){
    var POS_X = 37.5; //基準点の緯度
    var POS_Y = 136.5; //基準点の経度
    var DIS_WEST = 12.6; //西日本側の距離
    var DIS_EAST = 10.2; //東日本型の距離
    var x = Math.random() * (DIS_EAST + DIS_WEST) - DIS_WEST; //緯度用の乱数

    var DEG_X = x < 0 ? -157.5 : 61.5; //基準点からの角度設定
    var DEG_Y = -30; //基準点からの角度設定
    var Y_MAX = 5.5; //基準点からの距離設定
    var y = Math.random() * Y_MAX; //経度用の乱数
    
    var ido = POS_X + Math.abs(x) * Math.sin(DEG_X/180*Math.PI) + y * Math.sin(DEG_Y/180*Math.PI);
    var keido = POS_Y + Math.abs(x) * Math.cos(DEG_X/180*Math.PI) + y * Math.cos(DEG_Y/180*Math.PI);

    var baseUrl ="https://www.google.co.jp/maps/search/";
    var dartsPointUrl = baseUrl + ido + ",+" + keido;
    window.open(dartsPointUrl);
}());
```

```js:ブックマークレットコピペ用
javascript:(function(){ var POS_X = 37.5; var POS_Y = 136.5; var DIS_WEST = 12.6; var DIS_EAST = 10.2; var x = Math.random() * (DIS_EAST + DIS_WEST) - DIS_WEST; var DEG_X = x < 0 ? -157.5 : 61.5; var DEG_Y = -30; var Y_MAX = 5.5; var y = Math.random() * Y_MAX; var ido = POS_X + Math.abs(x) * Math.sin(DEG_X/180*Math.PI) + y * Math.sin(DEG_Y/180*Math.PI); var keido = POS_Y + Math.abs(x) * Math.cos(DEG_X/180*Math.PI) + y * Math.cos(DEG_Y/180*Math.PI); var baseUrl ="https://www.google.co.jp/maps/search/"; var dartsPointUrl = baseUrl + ido + ",+" + keido;  window.open(dartsPointUrl); }());
```

旅の行き先に迷った場合にどうぞ。
そしてネタ元記事の[@noexpect](http://qiita.com/noexpect)さん、プログラムお借りしました。ありがとうございました。
macでMastodonをハックするための準備作業

XcodeやらPostgreSQLやらredisやらはインストール済みの前提。あとRubyも2.4.xが入っている前提。

要はテストを通すところまでやる。

```
## もろもろインストール
$ brew install ffmpeg imagemagick

## Mastodonのソース入手
$ git clone https://github.com/tootsuite/mastodon.git

## RailsというかRuby側のインストール
$ cd mastodon
$ bundle install

## Node側のインストール
$ yarn install

## DBの初期化
$ bundle exec rails db:setup

## テストを実行してエラーが出ないことを確認
$ bundle exec rails spec
```

## 実行

localでテストするところも実行してみる。

```
$ gem install foreman
$ foreman start -f Procfile.dev
```

foremanをgem installするのは微妙な気がする……PR送るべきか。
CentOS7.3にDocker Composeまでインストール


## Docker
古いのを削除

```bash
$ sudo yum remove docker \
                  docker-common \
                  container-selinux \
                  docker-selinux \
                  docker-engine
```

入れ直す

```bash
$ sudo yum install -y yum-utils
$ sudo yum-config-manager \
    --add-repo \
    https://download.docker.com/linux/centos/docker-ce.repo
$ sudo yum makecache fast
$ yum list docker-ce.x86_64  --showduplicates |sort -r
# 出てきたものから選ぶ
$ sudo yum install -y docker-ce.x86_64
```

起動＆自動起動設定

```bash
$ sudo systemctl enable docker
$ sudo systemctl start docker
```

## Docker Compose
```bash
$ curl -L https://github.com/docker/compose/releases/download/1.12.0/docker-compose-`uname -s`-`uname -m` > docker-compose
$ sudo mv docker-compose /usr/local/bin/docker-compose
$ sudo chmod +x /usr/local/bin/docker-compose
```

バージョン確認

```bash
$ docker-compose --version
docker-compose version 1.12.0, build b31ff33
```

このままだと実行できないので、dockerグループに入れます

```bash
# dockerグループがなかった場合
# sudo groupadd docker
$ sudo gpasswd -a $USER docker
$ sudo systemctl restart docker
$ exit
# ログインし直す
```

## 参考
微妙に公式ドキュメントどおりにいかなくて焦りました。

- https://docs.docker.com/engine/installation/linux/centos/#install-using-the-repository
- https://docs.docker.com/compose/install/
- http://qiita.com/rysk92/items/e10f898abdc701e09e38
SpriteUV2から書き出したメッシュデータをSpineで取り込める形式に変換する

タイトルのようなコンバートプログラム(python)を書きました。イマイチな部分もありますが、現在需要がありそうなので公開します。

suv2spine
https://github.com/harayoki/suv2spine

#うんちく
SpriteUV2は複数のSpineデータの統合という優れた機能を持っていますが、自身が生成したメッシュデータをSpineで取り込めるデータとしてエキスポートしてくれません。（なんでや!） まあ、これから対応してくれると信じていますが、汎用で書き出すjsonデータの中身を確認すると、割とSpineで読み込めるデータ形式に近いので、簡単なプログラムでコンバート処理を行うことができます。

ここで注意したいのは、両者のデータを比較すると

* UVのY軸が反転している
* 書き出されたjsonではスケールが小さくなっているので頂点座標を調整して拡大する必要がある。(が、Spineでインポート時に倍率設定も可能)
* Spine側ではあるとより良いのだが、変換で用意する事が難しい情報がある。

というあたりです。最後の項目については後述します。

#使い方

![ 2017-05-01 0.07.43.png](https://qiita-image-store.s3.amazonaws.com/0/8302/9f97b797-8354-6036-43b9-21410d6d6d52.png)
まずSpriteUV2で適当にメッシュを生成して、アトラスデータとともにjsonデータでエクスポートします。

github上のpythonスクリプト( https://github.com/harayoki/suv2spine/blob/master/suv2spine.py )をダウンロードして、実行権限を与えた後にコンバート処理を実行します。

```shell-session
./suv2spine　hoge.json
```
`hoge.json`は、SpriteUV2が書き出したjsonファイルです。この処理で`hoge_out.json`というコンバートされたファイルが生成されます。(-o オプションで出力ファイル名の指定もできます。その他オプションは、github側のREADMEを参照してください。)

![ 2017-05-01 0.29.16.png](https://qiita-image-store.s3.amazonaws.com/0/8302/ed31b2ee-fa80-60e6-a6ad-66105172374b.png)
Spineを立ち上げ、Spineメニューから`import Data`を選択します。

![ 2017-05-01 0.28.11.png](https://qiita-image-store.s3.amazonaws.com/0/8302/4ec98393-0182-6ba7-2724-d8acab4a5a13.png)
インポートダイアログが表示されるので、コンバータで出力されたjsonを選択して、OKを押下します。取り込みサイズの調整や読み込み後のスケルトン名の指定もここで行う事ができます。ここで、新規プロジェクトを作るのではなく、現在のプロジェクトにスケルトンを追加したい場合は、`New Project`のチェックを外します。

![ 2017-05-01 0.28.51.png](https://qiita-image-store.s3.amazonaws.com/0/8302/aaf702ac-174f-9802-f64d-f9d68d726dbe.png)
ここでこのようなダイアログで警告が表示されてしまいますが、これは今回のコンバートプログラムの仕様なのでこのままOKします。警告の内容としては、"メッシュアウトラインやメッシュ分割線のデータがエクスポートされていないようなので、自動で作り直します" というような事を言っています。

![ 2017-05-01 0.37.15.png](https://qiita-image-store.s3.amazonaws.com/0/8302/66f09bef-66e9-d3cc-37d5-290b1930ff3f.png)
読み込みがこのように完了します。もしも画像の参照が外れて、メッシュ形状だけ表示されてしまうようなら、手動で設定し直してください。Imagesフォルダのパスを設定し直すが、メッシュを選択して表示されるパスを変更します。

#免責事項

まず、今回のコンバータは複数メッシュのコンバートに対応していません。１つのメッシュごとにコンバートを実行してください。（複数のメッシュがSpriteUV2の書き出しデータに含まれる場合、最初の１つだけが変換されます。）

また、あまり細かいメッシュを読み込んだ場合、アウトライン形状がおかしくなる事があります。今回の例でも頭のツノの向かって左側の形状がおかしくなっています。

![ 2017-05-01 0.44.10.png](https://qiita-image-store.s3.amazonaws.com/0/8302/abb8cd77-da84-b845-f4b3-cda55c66e68e.png)

そのようになってしまう場合、SpriteUV2側のメッシュもしくはSpine側でメッシュを調整する対応をする事になると思います。また、上記では平気ですが、足の間の隙間もメッシュの一部と認識されてしまう事もありました。なるべくメッシュ設定をするときに穴が開かないような元画像を用意した方がいいかもしれません。

このような不具合が出てしまう理由ですが、Spine側では頂点データ一覧の他に、外周の頂点(hull)一覧とその頂点を結ぶ線分(edges)データが存在する事を期待しているのですが、SpriteUV2の吐き出すjsonからそのデータを再現するのが難しいからです。一応それらは必須データではなく、Spineで自動生成もできるデータなので（それを行いますよというのが先のダイアログの警告）、今回のような場合でもなんとかそれらしく動いてくれますが、自動生成がうまくいかないと上記の様な状態となってしまう模様です。

まともなPythonコード書くの10年ぶりくらいなので、その辺は暖かい目でお願いします。mm

#今後
そもそもSpineの自動メッシュ生成機能がいけてる感じになるか、SpriteUV2がSpineデータ書き出しに対応してくれると良いですね。今回のツールに関しては、もし需要があれば複数のメッシュのコンバートにも対応するかも、、しないかも。
Eclipse + Anacondaを使ってTensorFlow開発環境を整える

# 初めに
EclipseでTensorFlowを使うことが出来たのでまとめました。

# 環境
+ Windows10
+ Eclipse Neon(4.6.3)
+ Anaconda 4.3.14
+ TensorFlow 1.1.0(gpu)

# 方法
1. Anacondaをインストール
2. `conda`コマンドで仮想環境を作る
3. 仮想環境にTensorFlowをインストール
4. Eclipseをインストール
5. Eclipseの[ヘルプ][新規ソフトウェアのインストール]から**PyDev**をインストール
6. Eclipseの[ウィンドウ][設定]を開き、[PyDev][インタープリター][pythonのインタープリター]まで開く
7. [新規]ボタンを押し、適当なインタープリター名と`C:\ProgramData\Anaconda3\envs\XXXXX\python.exe(XXXXXは仮想環境名)`にあるインタープリター実行可能ファイルを設定  
![2017-05-01 (1).png](https://qiita-image-store.s3.amazonaws.com/0/150785/b2b677c9-fc5b-b6b0-69ae-8c9bbe60b310.png)  
8. 新規PyDevプロジェクト作成時にインタープリターを7.で設定したインタープリターに設定

# 確認
![2017-05-01 (2).png](https://qiita-image-store.s3.amazonaws.com/0/150785/6b4db74d-041b-9c3b-b1ba-bc3ccfecec2f.png)
JAX-RSを試してみたんで手順をメモ


##環境
|OS or ソフトウェア|version|
|:---------|:------:|
|macOS|Sierra|
|Eclipse|4.6(NEON)|
|(Eclipse plugin)Buildship Gradle Integration|2.0|
|Java SE|1.8.0_121_b13|
|glassfish|4.1.1|
|gradle|3.4.1|
インストールについては割愛します。

##手順
- gradleプロジェクトを作る
Eclipseで、[新規]>[Gradle]>[Gradleプロジェクト]として、プロジェクトを新規作成する。

- プロジェクトのプロパティを開いて、「プロジェクト・ファセット」を追加する。

- 「動的 WEB モジュール」を追加する。その時、プロジェクト・ファセットの画面右側の「ランタイム」を選んで「Glassfish4」を選択する。
![画面イメージ](https://cl.ly/kEPR) 

- build.gradleを以下のように修正する。

``` java:build.gradle
apply plugin: 'war'
apply plugin: 'java-library'

repositories {
    mavenCentral()
    jcenter()
}

dependencies {
    providedCompile 'org.projectlombok:lombok:1.16.4'
    compile 'com.fasterxml.jackson.core:jackson-databind:2.8.6'
    compile 'com.fasterxml.jackson.jaxrs:jackson-jaxrs-json-provider:2.8.6'
	providedCompile 'javax:javaee-web-api:7.0'
	providedCompile fileTree(dir: '/glassfish4/glassfish/modules', include: '*.jar')

    api 'org.apache.commons:commons-math3:3.6.1'
    implementation 'com.google.guava:guava:21.0'
    testImplementation 'junit:junit:4.12'
}

war {
    exclude 'WEB-INF/lib/**'
    exclude 'WEB-INF/classes/**'
}

```

- プロジェクトを右クリックして、[Gradle]>[Gradleプロジェクトのリフレッシュ]を実施する。<br>この時、ライブラリのGlassfishのランタイムが消えてしまう謎の事象あり・・・。再度プロジェクト・ファイセットを開いて付け直す必要がある...なぜかは不明です（汗）

- あとはソースファイルを書いて、サーバに追加して実行する。

```java:link.griffin.study_gradle.jaxrs.ApplicationConfig.java
package link.griffin.study_gradle.jaxrs;

import javax.ws.rs.ApplicationPath;

import org.glassfish.jersey.server.ResourceConfig;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.jaxrs.json.JacksonJaxbJsonProvider;

@ApplicationPath("stdy")
public class ApplicationConfig extends ResourceConfig {
	public ApplicationConfig(){
		//自作のresourceを登録
		this.packages(ApplicationConfig.class.getPackage().getName());
		this.packages("com.snail.waf21.rest")
		//Jacson用のクラスを登録
		.register((new JacksonJaxbJsonProvider(new ObjectMapper(),
				JacksonJaxbJsonProvider.DEFAULT_ANNOTATIONS)))
		//JSONP用のクラスを登録
		.register(org.glassfish.jersey.jackson.JacksonFeature.class);

	}
}
```

```java:link.griffin.study_gradle.jaxrs.SampleResource.java
package link.griffin.study_gradle.jaxrs;

import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;

import link.griffin.study_gradle.jaxrs_sdo.DataSdo;

@Path("rs")
public class SampleResource {

	@GET
	@Path("run")
	@Produces(MediaType.APPLICATION_JSON)
	public DataSdo run(){
		DataSdo data = new DataSdo();
		data.setName("hogehoge");
		data.setId(12345);
		return data;
	}
}
```

```java:link.griffin.study_gradle.jaxrs_sdo.DataSdo.java
package link.griffin.study_gradle.jaxrs_sdo;

import javax.xml.bind.annotation.XmlRootElement;

@lombok.Data
@XmlRootElement
public class DataSdo {
	private String name = "";
	private Integer id = 0;
}
```

- このサンプルであれば、"http://localhost:8080/study_gradle/stdy/rs/run" でアクセスできる。
どうしても「今日の0時」が欲しかった

#JavaScriptで日時操作
任せてよ！Dateオブジェクトを作ればいいんだよね！
**new Date()** で生成してと。。。

##でもね
そんなに単純じゃなかった。

```javascript
var today0 = new Date();
console.log(today0);  // Sun Apr 30 2017 22:25:54 GMT+0900 (東京 (標準時))
```

なんだ。バグか？
いや違う。これは単純に、実行している時刻
「22:25:54」が表示されているだけですね。

##今日の0時を作ってみた
まずは不格好だけど、1行で頑張って書いてみると。

```javascript
var today1 = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());
console.log(today1);  // Sun Apr 30 2017 00:00:00 GMT+0900 (東京 (標準時))
```

うーん。ちょっとイケてないかもしれません。

##見やすくしてみる
ソースコードは、見やすくてナンボ。
ということで、2行になってもいいので、変数を使用してみます。

```javascript
var today2 = new Date();
today2 = new Date(today2.getFullYear(), today2.getMonth(), today2.getDate());
console.log(today2);  // Sun Apr 30 2017 00:00:00 GMT+0900 (東京 (標準時))
```

少し良くなりましたね。
でも、もっと別の方法がないものか、ちょっと調べてみました。

##toDateString
どうやら**toDateString**で「日付の部分を文字列で取得」できるようです。
文字列には「日付の部分しかなく、時刻の部分が入っていない」ので、勝手に0時になるという仕組みですね。
その文字列をコンストラクタに突っ込んだら、シンプルな1行になりました。

```javascript
var today3 = new Date(new Date().toDateString());
console.log(today3);  // Sun Apr 30 2017 00:00:00 GMT+0900 (東京 (標準時))
```

ぐっと良くなりましたね。
でも、もっと別の方法がないものか、さらに調べてみました。

##setHours
どうやら**setHours**で「時刻の部分を設定」できるようです。
そこで、一度変数に格納してから、時刻を「00:00:00.000」に設定しました

```javascript
var today4 = new Date();
today4.setHours(0, 0, 0, 0);
console.log(today4);  // Sun Apr 30 2017 00:00:00 GMT+0900 (東京 (標準時))
```

ソースコードの読みやすさでは**ピカイチ**ですね。
**setHours**は、ミリ秒を戻り値として返すので、さらにシンプルにできますね。

```javascript
var today5 = new Date(new Date().setHours(0, 0, 0, 0));
console.log(today5);  // Sun Apr 30 2017 00:00:00 GMT+0900 (東京 (標準時))
```

##まとめ
今回は、いろいろと実装パターンが見つかりましたね～。
個人的には、ソースコードの読みやすさということで、「today4のパターン」を使おうと思っています。
正直なところ、今までDateオブジェクトには、何となく苦手意識がありました。
でも今回の調査で、少しだけ好きになれたかもしれません (^_^;
Linuxユーザアカウントの管理コマンド

# 1. チートシート

## 管理者
ユーザアカウントの作成
`useradd [username]`
初期パスワードの設定＆アカウントロック解除
`passwd [username]`
ユーザアカウント一覧の確認
`/etc/passwd`
パスワード設定状況＆アカウントロック状況
`/etc/shadow`
ユーザアカウントの削除
`userdel -r [username]`

## 利用者
ユーザアカウントの切り替え
`su - [username]`

# 2. 解説
これから例として、jinnai73というユーザアカウントの作成と削除を行います。

ユーザアカウントの作成はrootユーザから`useradd`コマンドで行います。
作成されたアカウント名は`/etc/passwd`というファイルに追加されますので、
まずは作業前にjinnai73ユーザが存在しないことを確認しましょう。

```bash:bash
[root@localhost ~]# grep jinnai73 /etc/passwd
[root@localhost ~]# grep jinnai73 /etc/shadow
[root@localhost ~]# 
```

はい、いません。
それでは`useradd`コマンドでアカウントを作成します。

```bash:bash
[root@localhost ~]# useradd jinnai73
[root@localhost ~]# grep jinnai73 /etc/passwd
jinnai73:x:1001:1001::/home/jinnai73:/bin/bash
[root@localhost ~]# grep jinnai73 /etc/shadow
jinnai73:!!:17286:0:99999:7:::
[root@localhost ~]# 
```

できました。
さて、初期状態では/etc/shadowの中に!!と記載されています。
これはこのアカウントがロック状態であり、パスワードが設定されていないことを示しています。
このままではユーザ使えないので、`passwd`コマンドで初期パスワードを適当に設定してあげましょう。

```bash:bash
[root@localhost ~]# passwd jinnai73
Changing password for user jinnai73.
New password: 
Retype new password: 
passwd: all authentication tokens updated successfully.
[root@localhost ~]# grep jinnai73 /etc/shadow
jinnai73:$6$X8c9gMUI$YwsjT7ZaE/BLTaWh0Z0dks1WnaCEvJQZj7eT50RdOlr93z4p/aU2cREhJXxlr7.IYLPoWZIbaAzHlamfmVXXB0:17286:0:99999:7:::
[root@localhost ~]# 
```

できました。
これでユーザが使えるようになりましたので、他の一般ユーザからログインしてみます。

```bash:bash
[vagrant@localhost ~]$ su - jinnai73
Password: 
Last login: Mon May  1 00:00:05 JST 2017 on pts/0
[jinnai73@localhost ~]$ 
```

無事アカウントが使えるようになりました！

最後にアカウントの削除です。

```bash:bash
[root@localhost ~]# grep jinnai73 /etc/passwd
jinnai73:x:1001:1001::/home/jinnai73:/bin/bash
[root@localhost ~]# grep jinnai73 /etc/shadow
jinnai73:$6$X8c9gMUI$YwsjT7ZaE/BLTaWh0Z0dks1WnaCEvJQZj7eT50RdOlr93z4p/aU2cREhJXxlr7.IYLPoWZIbaAzHlamfmVXXB0:17286:0:99999:7:::
[root@localhost ~]# 
[root@localhost ~]# userdel -r jinnai73
[root@localhost ~]# 
[root@localhost ~]# grep jinnai73 /etc/passwd
[root@localhost ~]# grep jinnai73 /etc/shadow
```

簡単ですが、以上です。
homebrew(ホームブルー)の個人メモ

# 概要
たまにMacで環境作成しようとすると、いつも忘れるので、
それらのメモ。

# 用語
|用語|解説|
|:--|:--|
|formula|パッケージのこと|
|celler|インストール先|
|keg|makeの材料|

# パス
|目的|パス|
|:--|:--|
|パッケージの設定ファイル|/usr/local/etc|
|パッケージのログ|/usr/local/var/log|
|パッケージのpid|/usr/local/var/run|

# インストール
```bash
# インストール
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

# homebrewのパスを優先して見るように設定
echo 'export PATH=$(brew --prefix)/bin:$PATH' >> ~/.bashrc
source ~/.bashrc

# アンインストール
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"
```

※「/usr/loacl/Homebrew」にhomebrewはインストールされる

# パッケージ検索
```bash
brew search [formula]
```

# パッケージ一覧更新
```bash
brew update
```

# パッケージインストール、アンインストール
```bash
# オプションを調べる
brew options formula

# インストール、アンインストール
brew install|remove formula
```

※「/usr/local/Cellar」にインストールされる
※「/usr/local/bin」にパッケージ操作用のシンボリックリンクが作成される

# インストールされたパッケージをリスト表示
```bash
brew list
```

# サービス操作
```bash
# 実行、終了、再起動(chkconfigのように自動起動される)
brew services start|stop|restart formula

# サービスの稼働状況を見る
brew services list
```

# サービスのバージョン切り替え(シンボリックリンク作成等)
```bash
brew link|unlink formula
```

# サービスの詳細や依存パッケージ、オプションなどを見る
```bash
brew info formula
```
サイトの課題の把握。Google Analytics って？【クリックイベントの取得編】

### Google Analyticsとは？
Googleが提供している 『アクセス解析ツール』 のことです。
▼サイトへのリンク
https://www.google.com/intl/ja_jp/analytics/

サイトへのアクセスに関する様々なことが分析できます。

- サイトへの訪問者の数
- ページごとの訪問者数
- ユーザーの属性（年齢、性別）

などがあげられます。

利用するためにはGoogleのアカウントが必要になります。
基本的には無料で利用することができます。
また、新しく導入される方は気にする必要はないかと思いますが、
アナリティクスにはバージョンがあります。

##ユニバーサルアナリティクス
『Google Analytics』の最新のバージョンのことです。
以前のバージョンには特別名前がないようなので、
多くのサイトでは『従来のアナリティクス』と記述されています。

### ユニバーサルアナリティクスの主な特徴
- 新しいトラッキングコード「analytics.js」
- 新しいデータ収集方式「Measurement Protocol」
- ユニバーサルアナリティクス独自の新機能とレポート

### バージョンの違いによる記述方法の違い
▼従来のアナリティクス
`onClick="_gaq.push(['_trackEvent', ‘カテゴリ名’, ‘アクション名’, ‘ラベル名’, true]);"`

▼ユニバーサルアナリティクス
`onclick=”ga(‘send’, ‘event’, ‘カテゴリ名’, ‘アクション名’, ‘ラベル名’, true);”`

## 「trackPageview」と「trackEvent」
クリックイベントの計測方法は２つあります。
「trackPageview」 仮想ページビューを使う方法
「trackEvent」 イベントトラッキングを使う方法

仮想ページビューとは、外部リンクや同一URL上の遷移など、トラッキングできないページへの遷移を仮想のページとみなし、計測する手法です。
対してイベントトラッキングは、計測したい行動をイベントとして、計測する方法です。
「trackPageview」はページビュー数にカウントされるのでその点は注意が必要です。

##「onClick」と「onMouseDown」
『Google Analytics』でクリック数を計測するときは、onClickが一般的です。
ただこの方法だとクリック後、Google Analyticsへデータ送信する前にリンク先が表示されてしまった場合、
クリックデータ取得されない＝カウントされないという事態が発生することがあります。

そこで『onMouseDown』というイベント。
『onClick』はマウスのボタンを押して、離した時にイベントが発生するのに対し、
『onMouseDown』はマウスのボタンを押した時にイベントが発生します。

なら『onMouseDown』の方が正確な数値が取れるのかと言うとそうでもありません。
例えば、「押した瞬間」なので、リンクをクリックしたままマウスを移動させ、
結果的にリンクをクリックしていない場合も1クリックとカウントされてしまうからです。

また『onTouchStart』というイベントあります。
スマートフォンではこちらのイベントで対応する必要があるようなのですが、検証ができておりません。

##まとめ
サイトの改善を行う際、自社のサイトの分析は不可欠だと思います。
私自身サイトの運用に携わらせていただき、『サイトの分析』がどれだけ難しく、
またその大切さを肌で感じています。
どれだけ正しい情報を集められるかが、サイト改善成功の鍵を握ると思います。
その情報を集める手段として一つとして今回は『Google Analytics』少し紹介できればと思いました。
この記事が少しでも何かのお役に立てれば幸いです。
次回はさらに詳しく掘り下げたいと思います。
Mac Mission Controlのデスクトップの順番が勝手に変わる件についての対処法

# :raising_hand:Mission Controlのデスクトップってなに？
<b>※需要があるようなので最新のUIで更新しています 2024/06/12※</b>
文字面だけではわかりにくいですが、
ここのことです
<img width="1396" alt="f07ec069-252c-37de-7283-98737e73cdfb.png" src="https://qiita-image-store.s3.amazonaws.com/0/147005/5e596972-d06e-0e94-4e3a-120222d2147f.png">

僕は、左から「ブラウザ」→「エディタ」→「コミュニケーション」→「空」の並びに固定しておきたいのです。
Macで開発やっている人であればこの微妙な不便さを感じたことがあるのではないでしょうか？:hatching_chick:

# :thinking:勝手に入れ替わるとは？
明確なトリガーはわからないですが、
Mac側でこちら側が使いやすいようにデスクトップ2とデスクトップ3の位置を自動で入れ替えてくれます。
僕の例だと左から
「ブラウザ」→「エディタ」→「コミュニケーション」→「空」
だったのが
「ブラウザ」→「コミュニケーション」→「エディタ」→「空」
に順序が入れ替わるのです。

何かよくわからないけど、凄いロジックが組まれているのでしょう...
しかし僕にはその機能は必要ないのです。

# :pray:固定したい...
解決方法はありました！
以下手順です。
## システム設定を開く
![スクリーンショット 2024-06-12 14.36.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147005/49db361f-f3d0-8ac1-fd52-5cc6d1659e39.png)


## デスクトップとDockを開く
![スクリーンショット 2024-06-12 14.37.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147005/d7a37212-0708-0054-0bcc-c172f9c18f19.png)


## 「最新の使用状況に基づいて操作スペースを自動的に並び替える」のチェックを外す
![スクリーンショット 2024-06-12 14.38.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/147005/ae250886-7d0e-54d5-813b-98c4bb63d36e.png)


# :hugging:まとめ
簡単でした。
これで少し快適になります。
RaspberryPiで温度を計測する

#目的
RaspberryPiを使ってUSB温度計から温度を計測する。
#環境
ラズパイ：Raspberry Pi 3 モデル B
OS：raspbian8
USB温度計：TEMPer（PCsensor社）
#手順

[こちら](https://github.com/bitplane/temper)のgitにある通り設定を進めます。
libusb-0.1.4-devは見つからないので、以下のコマンドを実行。

```
sudo apt-get install build-essential libusb-1.0-0 libusb-dev
```

あとは指示通りに、実行。

```
git clone git://github.com/bitplane/temper.git
cd temper/
make
sudo make install
```

無事にインストールができました。temperコマンドを実行してみます。

```
pi@raspberrypi:~/temper $ sudo temper
20-May-2017 13:48,30.782524
```

無事に取得できました。root権限で実行していますが、READMEを見る感じなんとかなりそうです。

#今後
30度と出ましたが、体感の気温的には20度くらいです。直に指しているので、USBケーブルで伸ばしてあげるのがいいのかもしれません。
メモ:SpringAMQP使ってみた

#はじめに
使ってみたというより、必要に迫られて、調査して使用した次第です。
チュートリアルを色々いじってみたり、DocumentをGoogle先生で翻訳して
偏差値４０の頭で読んで色々模索した結果、私に用意された時間では以下の方法で精一杯でした。。

その他の活用事例や、ここが違う！云々カンヌンなどありましたら
説教混じりに解説お待ちしております。
なんで、jarじゃなくてwar使ってんだ！とかは却下させて下さい。

#参考

- 多分こちらの方の情報を参考にさせて頂きました。大感謝。 （３〜４ヶ月くらい前の事なので記憶が曖昧）

http://qiita.com/keisuke0105/items/59edc46683a1ecd02307

 

#環境とか
- SpringBoot 1.5.3
- RabbitMQ：インストール済
- Hoge.warにBroker、Publisher、Consumerが入っている。
- RabbitMQとHoge.warは同じIPのサーバーにいる。
  RabbitMQ、Broker、Publisher　は　別々なサーバーに居てもOKなそうな。
ちなみに最新のSpringAMQPは、RabbitMQのVersionに依存しない作りになっているそうな。
- 求められた要件、、、
  * 大量の年賀状が１つのポストに継続的に投函される・・
  * 年賀状の数だけ各都道府県に配達する人がいては、ちょっと困る。それヤメて。
  * 各都道府県って入場規制規制かかってんだ。だから、北海道に配達担当者は２名、青森は１名、東京は５名・・とかでよろしゅう。各人は、ハガキ１枚だけ持って届けてね。届けたらまたポストまで戻ってきて、また配達な。
- RabbitMQがダウンしたらRabbitMqExeptionだっけかな。それくらいでしか検知する方法今のところ知らん。どうしたら良いのか。そもそもダウンするのか？

# Code

## RabbitMQ接続情報

- RabbitMQインストール後のデフォルトが以下の通り。
- 確か、SpringBootで以下の設定値はデフォルトで行ってくれていた気がするのであえてプロパティに書かなくても良い気がしたが、詳しくはBootのCodeでも調べて下さい。

```properties:application.properties
spring.rabbitmq.host=localhost
spring.rabbitmq.port=5672
spring.rabbitmq.username=guest
spring.rabbitmq.password=guest
```


## Broker
RabbitMQに、ExchangeとQueuを作成する設定です。
アプリケーションが起動する際に作成されます。

↓postというExchangeが作成され、そこにhokkaidoというキューが作成されて
　バインドされる。with()に設定しているのは、ルーティングキー。このルーティングキー
　と同じ文字列をConsumer側に定義する認識でおります。以下では北海道の例だけ。

```
@Configuration
public class AmqpConfig{
    @Bean
    public DirectExchang direct(){
        return new DirectExchang("post");
    }

    @Bean
    public Queu hokkaido(){
        return new Queu("hokkaido");
    }

    @Bean
    public Binding hokkaidoBinding(DirectExchang de, Queu hokkaido){
        return BindingBuilder.bind(hokkaido).to(de).with("hokkaido");
    }
}
```

## Publisher

RabbitMQにデータを突っ込む側。年賀はがきのポスト投函が
バシバシ行われる。
Consumerから処理結果をもらうメソッドもあったはずだが
以下ではConsumerにNengaHagakiインスタンスを渡して処理宜しくって
依頼してPublisherはお役御免。
第一引数のhokkaidoは、aomoriだったりtokyoも指定するイメージ。
説明の便宜上、hokkaidoオンリーの例になってます。

```
    
    @Autowired
    RabbitTemplate rabbitTemplate;

    @PostMapping("hoge/recv")
    public String oredayoOreOre(HogeForm hogeForm, Model model){

        ・・・なんか色々あるんでしょう・・・

        //引数にルーティングキーと、Lisnerに処理してもらうデータをSET
　　　　　　　　　　　　　　　　rabbitTemplate.converAndSend("hokkaido", nengaHagaki);

        ・・・なんか色々あるんでしょう・・・
        
    }

```

## Consumer

RabbitMQに突っ込まれたデータを取得して処理をする側。
指定のキューにデータが入ったら、以下のメソッドは勝手に処理を開始。
クラスは、シングルトンじゃなきゃ駄目っぽい。実験して、そうだった気がするのでそうしてるし
動いている様子から考えたら、なんとなく、ああそうだなって納得している自分がいるの。。ええ。
シングルトンだから、各メソッドからServiceクラスなどDIコンテナ管理のクラスを呼ぶ場合は
ルックアップが必要。
各メソッドは、Publisherとは別スレッドよ。
北海道の配達員は２人なので、メソッド２つ準備している。これらはパラレルに動く。
メソッド処理終了次第、キューに入っているデータを取得してまた処理をする。

```
@Component
public class PostConsumer {

    @RabbitListener(queus="hokkaido")
    public void hokkaidoLisner1(NengaHagaki nengaHagaki){
         ・・・処理・・・
    }

    @RabbitListener(queus="hokkaido")
    public void hokkaidoLisner２(NengaHagaki nengaHagaki){
         ・・・処理・・・
    }
}

```
SpeakerDeckのスライドをPDF形式で表示できるiOSアプリを作った

# SpeakerDeckのスライドをPDF形式で表示できるiOSアプリを作った
## 背景
<img width="50%" alt="IMG_6577.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/84888/fd548a87-b2de-00be-1571-94954db36eea.png">

勉強会のスライドなど、[Speaker Deck](https://speakerdeck.com/)に掲載されているスライドをよく閲覧するのですが、1ページずつしか進めないし、数ページ前に戻りたくても1ページずつしか戻れないし...なにより保存できないし...
もう少しスマートに閲覧したいと思い、PDF形式で保存・表示できるアプリをRxSwiftの練習を兼ねて作ってみました。

## 作ったもの
https://github.com/natmark/SlideStock

<img width="50%" alt="IMG_6577.gif" src="https://github.com/natmark/SlideStock/blob/master/Resources/demo.gif?raw=true">
Speaker Deckの`ユーザ名 / スライド名`もしくは`スライドURL`を入力したら、
スライド情報を保存してPDF表示できるものを作ってみました。

## やったこと
スライドのURLを入力
↓
[Kanna](https://github.com/tid-kijyun/Kanna) を用いてスクレイピング
↓
スライドIDなどの情報を保存
↓
webViewでPDFを表示

## スライドURLの入力

```swift
URLTextField.rx.controlEvent([.editingDidEnd])
    .flatMap({
        self.URLTextField.text.flatMap(Observable.just) ?? Observable.empty()
    })
    .bind(to: viewModel.urlString)
    .addDisposableTo(disposeBag)
```
textFieldの入力終了後に、textFieldに入力されているtextの内容をviewModelのurlStringに渡すようにしました。

## Kannaを用いたスクレイピング
今回、Swift製のHTMLパーサ[Kanna](https://github.com/tid-kijyun/Kanna)を使用してスクレイピングを行いました。

[Swift製HTMLパーサ「Kanna」](http://qiita.com/_tid_/items/c228b1931cd9b23d52d3)
詳しい使い方はこちらを参考にしてください。

```swift
//HTMLソースをData形式で取得
let data = try FetchSlideRequest.getHTML(path: path)
//HTMLDocument形式に変換
let doc = HTML(html: data, encoding: String.Encoding.utf8)
guard let details = doc?.body?.css("div#talk-details").first else { return }

//スライドのタイトルを取得
guard let title = details.css("h1").first?.innerHTML else { return }
//スライドの作者を取得
guard let author = details.css("a").first?.innerHTML else { return }
//PDF形式のスライドのURLを取得
guard let pdfURL = doc?.body?.css("#share_pdf").first?["href"] else { return }
```
## スライドIDなどの情報を保存
```swift
 var importSlide: Observable<Void> {
    return Observable
        .zip(slideTitle, slideAuthor, slideId, pdfURL, importTrigger) { slideTitle, slideAuthor, slideId, pdfURL, importTrigger -> Void in
            let slide = Slide()
            slide.title = slideTitle
            slide.author = slideAuthor
            slide.id = slideId
            slide.pdfURL = pdfURL
            let realm = try! Realm()
            try? realm.write {
                realm.add(slide, update: true)
            }
    }
}
```
`importTrigger`が発火したときに、取得していたタイトルや作者などをRealmに保存するようにしてみました。

## PDFの表示
WebViewを使用することでPDFビューワーを実装しなくても済むようにしました。
URLRequestのキャッシュを使用しているので、PDFファイル自体は保存していません。

```swift
guard let url = URL(string: slide.pdfURL) else {
     return
}
self.WKView.load(URLRequest(url: url))
```

今回、プログレスバーを使用したかったため、WKWebViewを使用しました。

```swift
self.WKView.rx.estimatedProgress.bind(onNext: {
    self.navigationController?.setProgress(Float($0), animated: false)
}).addDisposableTo(disposeBag)
```
RxSwiftを使用していたので、こんな感じに書けました。
[Rx+WebKit.swift](https://github.com/RxSwiftCommunity/RxWebKit/blob/master/RxWebKit/Sources/Rx%2BWebKit.swift) : WebKitのRxExtensionを使用させてもらいました。

## まとめ
個人的に結構使い勝手がいいです。
Safariから直接アプリに取り込めるようにしたい！
[Scratch 2.0]で論理回路を作ってみた

暇つぶしにScratch2.0で[論理回路を作ってみた](https://scratch.mit.edu/projects/161650586/#player)。
CAL関数で「ノード」と「重み」と「閾値」で計算してそれぞれの回路を実装しています。
CALのパラメーターをいじるだけでAND,NAND,XORが作れるんですね・・・
Scratchにも返り値が欲しい・・・
デザインパターン学習メモ：「Chain of Responsibility」

## このパターンの目的
GoF本より引用する。

> １つ以上のオブジェクトに要求を処理する機会を与えることにより、要求を送信するオブジェクトと受信するオブジェクトの結合を避ける。受信する複数のオブジェクトをチェーン状につなぎ、あるオブジェクトがその要求を処理するまで、そのチェーンに沿って要求を渡していく。

利用者から要求が出されたたときに、あらかじめ定めた一連の担当者たちが順に処理を試みる。

このパターンを使うことでクラス間の結合度が低くなる。
処理を担当する各クラスは、その処理方法と後続のオブジェクトを知っていればよく、全体像については知らなくてもよい。

また、担当者のチェーンは実行時に決定することができるので、柔軟である。

## 実装例
GoF本と『Java言語で学ぶ　デザインパターン入門』を参考に作成。

```java:Support.java
// Handler役
// 処理を担当するクラス（抽象クラス）
public abstract class Support {
	private Support successor; // 次に処理を試みる後続のオブジェクト

	public Support() {
	}

	public void setSuccessor(Support support) {
		this.successor = support;
	}

	public void resolve(EventType type) {
		if (successor != null) {
			successor.resolve(type);
		} else {
			System.out.println("NOBODY RESOLVED");
		}
	}
}
```

```java:FooSupport.java
// ConcreteHandler役
// 処理を担当するクラス（Handler役を継承）
public class FooSupport extends Support {
	private static final EventType SUPPORT_TYPE = EventType.FOO;

	public FooSupport() {
		super();
	}

	@Override
	public void resolve(EventType type) {
		if (type == SUPPORT_TYPE) {
			System.out.println("RESOLVED by FooSupport");
		} else {
			super.resolve(type);
		}
	}
}
```

```java:BarSupport.java
// ConcreteHandler役
// 処理を担当するクラス（Handler役を継承）
public class BarSupport extends Support {
	private static final EventType SUPPORT_TYPE = EventType.BAR;

	public BarSupport() {
		super();
	}

	@Override
	public void resolve(EventType type) {
		if (type == SUPPORT_TYPE) {
			System.out.println("RESOLVED by BarSupport");
		} else {
			super.resolve(type);
		}
	}
}
```

```java:EventType.java
// 要求のタイプ
// Handlerに処理を依頼するときに用いられる
public enum EventType {
	FOO, BAR, BAZ
}
```

### 実行例

```java:Main.java
public class Main {
	public static void main(String[] args) {
		Support fooSupport = new FooSupport();
		fooSupport.setSuccessor(new BarSupport());
		
		fooSupport.resolve(EventType.FOO);
		fooSupport.resolve(EventType.BAR);
		fooSupport.resolve(EventType.BAZ);
	}
}
```

```text:Main
RESOLVED by FooSupport
RESOLVED by BarSupport
NOBODY RESOLVED
```

## その他の実装例
『Java言語で学ぶ　デザインパターン入門』にでてきた例がおもしろかった。

処理の要求（メソッドの呼び出し）の際に、数値を含むオブジェクト(Troubleクラス)を渡す。

処理の担当者（担当クラス）にはLimitSupportクラス、OddSupportクラスなどがあり、前者であれば「ある値以下」、後者であれば「奇数番号」の数値ををもつTroubleを処理する。

処理のチェーンの流れの中で、自分が担当できるToubleを処理し、そうでなければ後続のHandlerに依頼する。

これを例えば1~1000までの数値でTourbleをつくり、処理を要求してみると、要求がたらい回しにされている様子がわかり、このパターンの流れをイメージしやすい。

## 参考文献
 * エリック ガンマ、ラルフ ジョンソン、リチャード ヘルム、ジョン プリシディース（1999）『オブジェクト指向における再利用のためのデザインパターン　改訂版』本位田　真一、吉田　和樹 監訳、SBクリエイティブ
 * 結城浩（2004）『Java言語で学ぶ　デザインパターン入門』SBクリエイティブ
【PowerBIメモ】Rを使って機械学習&ビジュアライゼーションを実装してみる

たいそうなタイトルにしてしまいましたが、Rの機械学習パッケージ```{caret}```を使って、
PowerBI上にアウトプットを表示させることをやってみた半分個人的メモです。

#データセットの準備
いつものirisデータセットを利用します。
データの読み込ませ方は以下記事をご参照ください。

[【PowerBIメモ】ggplot2を使って、Ｒのグラフィックを埋め込んでみる](http://qiita.com/h_kobayashi1125/items/87bc4d53641e3f238ca8)


#ランダムフォレストをR上で実行
「クエリ編集」→「変換」→「Rスクリプトを実行する」を選択します。

![図1.jpg](https://qiita-image-store.s3.amazonaws.com/0/165789/ef917d90-b8f5-bb74-cd4f-1fabdf37d8d2.jpeg)

以下のようにランダムフォレストを実行します。今回は、全変数を使ってSpeciesを予測するモデルを作成します。
なお、今回の予測対象データは、適当に作成した10行分のcsvデータです。




```r:RandomForest.r
library(caret)　#今回はcaretパッケージを用います。

caret.rf <- caret::train(
  data = dataset ,
  Species ~ . ,
  method = "rf"
)

TestData <- read.csv("file:///C:/hogehoge/hogehoge.csv")
#テストデータのファイルパスを適宜指定します。

output <- cbind(TestData,Predict =predict(caret.rf,TestData))
#predict関数で、予測モデルを対象データに結合します。

```

これで予測結果を足しこんだデータセットが作成できました。
こんな感じになったら成功です。Predict列が、予測結果です。

![図3.jpg](https://qiita-image-store.s3.amazonaws.com/0/165789/81b7c456-eda0-2c0f-4db5-795723bfd707.jpeg)


ちなみに、寄与度を計るためのMDA（Mean Decrease Accuracy）やMDG（Mean Decrease Gini）も
データセットにすれば表現することも可能です。

```MDG.r
library(caret)

caret.rf <- caret::train(
  data = dataset ,
  Species ~ . ,
  method = "rf"
)

imp <- data.frame(Species = row.names(caret.rf$finalModel$importance) ,caret.rf$finalModel$importance )
#各変数のMDGをデータフレーム形式にします。

```

結果はこんな感じ
![図4.jpg](https://qiita-image-store.s3.amazonaws.com/0/165789/0cf63185-091a-ecc9-9400-bce3f4e8be20.jpeg)


すべての準備が整ったので、あとはPowerBI上で整形します。

![図5.jpg](https://qiita-image-store.s3.amazonaws.com/0/165789/aecdf8a8-b2c6-b80a-d10f-cbd754e24649.jpeg)


#おわりに
たぶん、Azureを使って機械学習とアウトプットの仕組みを作っていくのが正当なMicrosoft通な気がしますが、RとPowerBIの知識だけで実装してみました。
無理があるかなーと思ってましたが、学習データと予測データが自動的に更新されていく仕組みにできれば、半自動化の機械学習モデルの完成ですね。
ただし、たった150行のデータだけでも学習時間が長い・・・。なんとか出来るのか今後の課題になりそうです。

ちなみに、機械学習を実務レベルで実装するには、パラメータ調整やモデル評価が必須ですね。
ランダムフォレストでも、パラメータとして決定木の数（ntree）やサイズ（mtry）を指定する必要があります。
その辺はR上で色々検証して最適なモデルを検証し、PowerBIに落とすイメージになりそうです。



※自習してた中でcaretパッケージの利便性に驚愕した私です。
こちらの記事が大変参考になりました。ありがとうございました。

[『Rによるデータサイエンス』をcaretで再現する](http://qiita.com/aokikenichi/items/b7525a9e0a667b56e7a2)
用 Android Studio 3 beta 碰到的兩個問題

發表大會之後，決定把電腦裡長草的 Android Studio 草除一除，裝 3 beta 來用用。
但是建立新專案之後，碰到兩個主要的問題，在這邊筆記一下。

## Kotlin 版本問題

第一個是新建專案之後， 預設的設定黨 Gradle 就會無法成功同步
在猜可能是前一版本 Android Studio 我也有裝 Kotlin plugin 的關係吧（純猜測）
具體原因還不清楚

我碰到的錯誤訊息如下：

> Error:Unable to find method 'com.android.build.gradle.internal.variant.BaseVariantData.getOutputs()Ljava/util/List;'. Possible causes for this unexpected error include:
> 
> - Gradle's dependency cache may be corrupt (this sometimes occurs after a network connection timeout.) Re-download dependencies and sync project (requires network)
> - The state of a Gradle build process (daemon) may be corrupt. Stopping all Gradle daemons may solve this problem. Stop Gradle build processes (requires restart)
> - Your project may be using a third-party plugin which is not compatible with the other plugins in the project or the version of Gradle requested by the project.

> In the case of corrupt Gradle processes, you can also try closing the IDE and then killing all Java processes.

稍微查了一下，問題發生的原因是 gradle 設定檔裡面的 Kotlin 版本有誤

```Groovy:build.gradle(Project)
... （省略） ...


buildscript {
    ext.kotlin_version = '1.1.2-3'


... （省略） ...
```

的 `1.1.2-3` 改成 `1.1.2-4` 即可， Gradle 就可以順利同步了 :tada::tada::tada:

## Kotlin Extensions

這可以說是神器（？）吧，
可以很方便地在程式碼裡面取用 layout 檔裡面有取好名字的 UI ，
但是這不能靠 Kotlin 預設的 library 就可以達成，必須有兩個步驟：

### 在 "Project" 的 Gradle 設定檔 (跟上一節用到的是同一個檔案）的 dependencies 加上另外一個資源

```Groovy:build.gradle(Project)
... （省略） ...


dependencies {
    classpath 'com.android.tools.build:gradle:3.0.0-alpha1'
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    classpath "org.jetbrains.kotlin:kotlin-android-extensions:$kotlin_version" // 加上這一行


... （省略） ...
```

### 在 Module: app 的 Gradle 裡面採用 Kotlin Android Extensions

```Groovy:build.gradle(Module)
... （省略） ...


apply plugin: 'kotlin-android'
apply plugin: 'kotlin-android-extensions' // 加上這一行


... （省略） ...
```

### 在想要使用的 kt 檔的檔頭加上 import 程式碼引入該 UI Layout ， prefix 是 `kotlinx`

接著，假如 layout 的名稱叫 `activity_main` ，在 kt 檔裡面就可以這樣子 import

```Kotlin:MainActivity.kt
... （省略） ...


import kotlinx.android.synthetic.main.activity_main.*


... （省略） ...
```

如果再 layout 檔裡面有一個這樣子名稱的 TextView

```xml:activity_main.xml
... （省略） ...


android:id="@+id/nameTextView


... （省略） ...
```

在使用的時候，就可以直接這樣用，不需要先抓取資源、再放到某個變數裡面才可以使用。 :tada::tada::tada:

```Kotlin:MainActivity.kt
... （省略） ...


nameTextView.text = "John Doe"


... （省略） ...
```

以上，
繼續往下練習～