OmniAICreator/Qiita-1.07M huggingface dataset:
Photoshopで動画編集をやってみた ～テロップ挿入編～

動画編集ソフトを持っていないのに
動画編集を頼まれて、引き受けてしまった...

**どうしよう...**

たった1本の動画を編集するために、
動画編集ソフトを買うのは、バカらしい。

かといって無料ソフトは、よくわからないし怖いし、編集ソフトの名前が入るし...

**そうだ！！**
なんでもできる**Photoshop**(唯一持っているソフト)を使おう(｀・ω・´)ｼｬｷｰﾝ


**はい。**
という事で、Photoshopを使って動画編集をやってみました。

#1. Photoshop起動 
![2017-08-30_18h21_17.png](https://qiita-image-store.s3.amazonaws.com/0/182799/c12f44b0-5930-46ea-ce9f-5cd6a59d1f8a.png)

#2. 編集したい動画ファイルをドラッグ＆ドロップ
![2017-08-30_18h21_17.png](https://qiita-image-store.s3.amazonaws.com/0/182799/16739860-5abd-b372-1d7b-818b990cb790.png)
![2017-08-30_18h25_00.png](https://qiita-image-store.s3.amazonaws.com/0/182799/f95ab833-1630-497e-0164-8a37cbe69c5e.png)

#3. テロップ挿入
1.新規ビデオグループを作成

![2017-08-30_18h59_25.png](https://qiita-image-store.s3.amazonaws.com/0/182799/6955d053-35c7-7b1d-1c5a-55c117c6dc5c.png)

2.分かりやすい名称に変更

![2017-08-30_19h01_43.png](https://qiita-image-store.s3.amazonaws.com/0/182799/7d6d6549-a61c-f768-2f41-775d4415002c.png)

3.「横書き文字ツール」を使用してテロップ挿入

![2017-08-30_19h04_08.png](https://qiita-image-store.s3.amazonaws.com/0/182799/0ed47380-3ba3-10c0-52bb-17252129385b.png)

4.フォント、色変更も自由自在

![2017-08-30_19h09_04.png](https://qiita-image-store.s3.amazonaws.com/0/182799/2ae13c85-f1a5-73a1-7e1e-1e3ada75e967.png)


#4. 書き出し
1. ファイル⇒書き出し⇒ビデオレンダリング

2. 書き出し先、形式を選択し、レンダリングを押下

![2017-08-30_18h29_28.png](https://qiita-image-store.s3.amazonaws.com/0/182799/cab69923-1317-db8c-f2c7-cccdc1b21c2a.png)


#5. 最後に
～今回使ってみた機能～
1.素材の読み込み

2.トリミング

3.テロップ

4.分割

5.書き出し

#～感想～
簡単な動画編集なら、Photoshopでも編集できました！
すべての機能をまだ使っていないので、
今後も動画編集で使ってみようと思いました(｀・ω・´)ｼｬｷｰﾝ
オープンソースのビデオチャット・スクリーン共有ソフト hidden.in のご紹介。別題：縛りのある会社員が気軽に使えるビデオチャットサーバを作ってみました。

# リモートワークしたい。それにはビデオチャットは必須。
自宅で仕事したいぜ！自分ピッタリの椅子、机で集中してゴリゴリコード書きたいぜ！生産性ガン上げだぜ！というわけですが、やはりコミュニケーションはチャットよりも声、声だけよりも顔を見ながらしたほうが効率がいいわけです。
さらには同じディスプレイを見ながらのペアプロは、品質、深慮、安定性のために、家での仕事にも是非取り入れたいのです。

なので、ビデオチャット・スクリーン共有機能はリモートワークには必須と考えるのです。

# 誰かの社外サービスアレルギーでappear.inが使えない。
ビデオチャット・スクリーン共有サービスappear.in、スゴくいいですよね。シンプルな機能で簡単に使える。よくメンテナンスされているスゴくいいサービスです。
ただ、日本の企業にはよくわからない理屈でインターネットサービスの利用が禁止されることがよくある(**と聞きます**)。

# 簡単起動のビデオチャット・スクリーン共有ソフト -hidden.in-

![hiddenin.png](https://qiita-image-store.s3.amazonaws.com/0/25176/8ca21e18-6bfd-532b-1cd1-dfb5fc11595b.png)

じゃあもう、自社内にサービス立てちゃおうよ、と。
[hidden.in](https://hidden.in.ukiuni.com) は、社内の有休マシンに簡単に建てて、すぐにビデオチャット・スクリーン共有ができるオープンソースのソフトウェアです。
多くの企業では、セキュリティーのために、自宅にいながら会社と同一のネットワークで作業しているようにVPNを利用していると思います。
hidden.inを使えば、セキュリティーを保ちつつ、そして、よくわからない理由でインターネットサービスの使用が禁止されている状況でもビデオチャットすることができます。

WebRTCを利用しているので、品質は相応、なおかつSTUN/TURNにはあえて対応しないことで、同一ネットワークのみでのみ動くことを確保。社外に情報が漏れることはありません。

サンプルサイトは https://hidden.in.ukiuni.com にて公開しています。
ソースは https://github.com/ukiuni/hidden.in にて公開しています。

# 機能紹介

![hiddenin2.png](https://qiita-image-store.s3.amazonaws.com/0/25176/b9a70684-4b64-46d8-679b-0dbd9d1878e2.png)

## n人ビデオチャット
複数人でのビデオチャットができます。
https://サーバIP:3000/任意の部屋名
に、ブラウザでアクセスすると、ビデオチャットが開始されます。
このURLをチャットしたい相手に共有してください。

## スクリーン共有
左メニューのディスプレイ画像をクリックすると、プラグインファイルがダウンロードされ

## URLによる会議室共有
https://ip:port/会議室名
会議室名を参加者で共有しておけば、ブラウザでアクセスするだけでいつでも会議がはじめられます。

## 会議室のロック
全員が参加したのち、鍵ボタンを押すと、それ以上メンバーが参加できなくなります。
ロックを解除するためには全員がログアウトしてください。

# セットアップ
## Docker セットアップ
```
docker run -p 3000:3000 ukiuni/hidden.in
```
https://localhost:3000/ にオレオレ証明書でサービスが立ち上がります。
ちゃんとした証明書で運用することも可能。
詳しくは[こちら](https://hub.docker.com/r/ukiuni/hidden.in/)をご覧ください。

## Node.js　セットアップ
```
git clone git@github.com:ukiuni/hidden.in.git
cd hidden.in
npm install
npm start
```
ポートや証明書を変更可能です。
詳しくは[こちら](https://github.com/ukiuni/hidden.in)をご覧ください。

# 必要機能があったら自分で作り込めます。
オープンソースにて公開しています。　https://github.com/ukiuni/hidden.in
ライセンスは Apache License 2.0　です。コントリビューションをお待ちしています。

# 制限
現在はChromeのみに対応しています。

# 技術者向け情報
hidden.in は、いわゆるWebRTCのシグナリングサーバです。
ブラウザ間で通信を行うための事前情報をNode.js+socket.ioで実装したサーバを介してやり取りを行い、準備が整うとブラウザ間で直接通信を行います。
WebRTCの学習用途にご参照ください。
また、気が向きましたら、機能追加のPullRequestをしてください。
開発スタイルに特に決まりはありません。お気軽にどうぞ。
moment.jsを使ってhh:mmの文字列から時間と分を取得する

備忘です。

`07:00`という文字列から、7と0というnumberをmoment.jsを使って取り出す方法。

```js:timeStringToNumber.js
var timeString = '07:00';
var numberHh = Number(moment(timeString, 'HH:mm').format('H'));
var numberMm = Number(moment(timeString, 'HH:mm').format('m'));
console.log(numberHh); // 7 should be shown on your log console.
console.log(numberMm); // 0 should be shown on your log console.
```
How to use ibus-mozc on Debian stretch with gnome-session-flashback

## 191227

I found that forcing gnome-flashback to 3.28 might break bluetooth setting. We can still use `bluetoothctl` CLI. Better than unable to use ibus-mozc.

## 180424

In gnome-flashback 3.28, this issue is fixed with the cooperation of gnome team: <https://bugzilla.gnome.org/show_bug.cgi?id=788547>. But the debian team cannot backport it to debian stretch from debian buster. In such cases we just start **install battle**... This time it was compiling gnome-flashback/buster source package and installing gnome-flashback and gnome-flashback-common. gnome-session-flashback still needs to be kept on stretch or gsetting will go wrong.

- https://www.dropbox.com/s/2ytm39keffwpvg2/gnome-flashback_3.28.0-1_amd64.deb
- https://www.dropbox.com/s/5m7c1vzeimbkufv/gnome-flashback-common_3.28.0-1_all.deb

![gnome_flashback_fixed.png](https://qiita-image-store.s3.amazonaws.com/0/29692/b22cb986-58c4-2e1d-abcb-39a556bdb3e3.png)

## Original Article

mozc is an open-source fork of Google IME and the convertion precision is very good. The only short point is when you login to the machine, it starts with DirectInput mode. You need to change it to Hiragana mode. But gnome-session-flashback, the lightest but full-featured desktop environment, does not have that screen.

### GNOME3

![gnome.png](https://qiita-image-store.s3.amazonaws.com/0/29692/550e4f2e-38fa-e536-57fd-cb31d7a41116.png)

### gnome-session-flashback (metacity)

![metacity.png](https://qiita-image-store.s3.amazonaws.com/0/29692/5894809e-1b25-07f6-b347-1c70c6c8df63.png)

So if you use gnome-session-flashback, you need to stick with ibus-anthy or ibus-kkc (the "Kana Kanji" in the figure). kkc is developed by one of the developers of ibus-skk, so it is still good.

If you want to use ibus-mozc, you can use mate, a fork of GNOME2.

### MATE

![mate.png](https://qiita-image-store.s3.amazonaws.com/0/29692/3dae7a93-68cf-b642-effb-8d68fe15143a.png)
【順次追記】エンジニアに仕様を伝えたいディレクター向けの開発者ツールの便利な使い方

#　エンジニアに仕様を伝えるために開発者ツールを使うという手段
## 開発者ツールとは
今回はChromeの開発者ツールで説明します。
開発者ツールはCommand + Shift + i を押すとでて来ます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/69647/aa452020-5b5e-a55a-c877-3ce62737fcfa.png" height="300px">

一見よくわからないですが注目するべき部分はすごく少ないですので解説したいと思います。

## 開発者ツールの入門
* 左上のこの２つを利用することになります。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/69647/2c13f3a0-b1e5-5841-889e-7d95dcc0601c.png)

### Elements:beer: 
* 赤い丸で囲ったElementsという部分をクリックしておいてください
* クリックすると右側の開発者ツールに文字がたくさん表示されます、これがソースコードです。

<img src="https://qiita-image-store.s3.amazonaws.com/0/69647/ab8eef99-b1da-5d46-04f2-2b4a4e169117.png" height="400px">



### アイコンの方:beers:
このアイコンです。
<img src="https://qiita-image-store.s3.amazonaws.com/0/69647/95a94168-db9a-21c4-5ee1-92ecae3910ad.png" height="50px">

* このアイコンを押すとページにあるパーツを選択することができるようになります。
* このアイコンを1回押して、ページの中にあるパーツをクリックしてみましょう。
* このようにページの一部分だけを選択することができます

![image.png](https://qiita-image-store.s3.amazonaws.com/0/69647/d81344c0-5dcd-ae29-8dc2-287906c27b94.png)

### スマホ版のページ表示
* 先ほどのアイコンの右にあるこのアイコンを押すことでスマホ版のページ表示になります。

<img src="https://qiita-image-store.s3.amazonaws.com/0/69647/c29df51f-3234-78d0-bf32-d15093eba53f.png" height="50px">


# これで入門終了、その他機能は一旦不要です。
基本的にいろいろと機能があるのですが、最低限抑えるべきポイントは抑え終わりました。
以下では実際によくある、仕様を伝える方法を紹介します。

## 文言変更の仕様を伝える
### 伝えたい仕様
* items、Contribution、followersを日本語にしてほしい
* 先ほどの右上にあるパーツを選択するアイコンをクリック
* 今回変更したい items にカーソルを合わせてクリック
* 右のソースコード欄が1行ハイライトされる
* その部分の文字を雰囲気を読んで書き換える


<img src="https://qiita-image-store.s3.amazonaws.com/0/69647/c4ee2e37-770f-a87c-1ac2-1cf31971ad38.png" height="550px">

今回選択されたhtmlを確認しよう。
おわかりいただけるだろうか　 Items　　の文字が見える。
多分ここを編集すれば文字が変わる。

```html:選択された部分のhtml
<span class="userActivityChart_statUnit">Items</span>
```

この Items と書かれている部分をダブルクリックすると編集可能になる。

```html:選択された部分のhtml
<span class="userActivityChart_statUnit">あいてむ！！！！</span>
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/69647/71491c04-ab8a-4246-b153-56a9cdb52722.png)


このように書きかわる、同じ要領で全ての要素を書き換えて、この画像をエンジニアに送りましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/69647/4f59089e-5c50-cb63-1f07-4ba741db8056.png)
Pythonによる科学・技術計算] mayaviを用いた3次元等値面とその断面図の描画，可視化

#はじめに

**科学・技術計算を駆使する研究でスカラー関数の等値面を調べることがしばしばある。**
これをmatplotlib利用による標準的なプロットだけで行うことは簡単ではないと思われる(かおそらく現時点では不可能か)。

**一方，mayaviを使うと手っ取り早く等値面を描くことができる。mayaviは，プレゼンテーション・学会発表・論文への使用にもたえられる優れた3次元可視化ライブラリとして知られている(らしい)[1]。**

ここではmayaviを用いた等値面の描画の一例として，3変数関数$f(x,y,z)=\frac{\sin(xyz)}{(xyz)} \tag 1$の等値面を描いてみる[1,2]。

mayaviの公式サイトに多くの情報が掲載されており，本記事もそれに準じている。

*なお，私はmiyaviをほとんど使ったことがないため，誤った説明をしている部分があるかもしれません。その場合はその箇所をご指摘いただければ幸いです。。*

***

#内容
(1) fの取り得る値を4等分した4つの等値面を描く。

(2) 等値面の断面を描く。

#

#コード(1) 等値面を描く
```py3

"""
mayaviを用いて3D等値面を描く: iso-surface
30 Aug. 2017
"""
import numpy as np
from mayavi import mlab
mlab.init_notebook()  # ノートブックの初期化。必ず入れること。

x, y, z = np.ogrid[-5:5:64j, -5:5:64j, -5:5:64j]
scalar = np.sin(x*y*z)/(x*y*z)  # 関数の設定

#描画領域の生成
mlab.figure(1, bgcolor=(1, 1, 1), fgcolor=(0, 0, 0), size=(600, 400)) # 背景色，サイズ等を設定
mlab.clf()

#3D等値面を描く。colormapをjetと設定，contoursが分割数， line_widthが線の太さ， opacityが不透明度(デフォルトは1.0)
obj=mlab.contour3d(scalar,colormap='jet',\
                   contours=4,line_width=1.3,opacity=0.8) 

mlab.show()

obj   #最後に描画オブジェクトを実行すること！これをしないと何もおこらない。
```



#結果


![スクリーンショット 2017-08-30 18.26.02.png](https://qiita-image-store.s3.amazonaws.com/0/192457/eff55ff7-9861-c16d-226f-399aa6c7f14a.png)

# コード(2) 等値面の断面を描く


```py3
"""
mayaviを用いて3D等値面の断面を描く: 
"""
import numpy as np
from mayavi import mlab
mlab.init_notebook()

x, y, z = np.ogrid[-5:5:64j, -5:5:64j, -5:5:64j]
scalar = np.sin(x*y*z)/(x*y*z)

#断面の設定: x軸とy軸とに平行な断面のオブジェクトをss1とss2という名前で作る
ss1=mlab.pipeline.image_plane_widget(mlab.pipeline.scalar_field(scalar),plane_orientation='x_axes',slice_index=10,)
ss2=mlab.pipeline.image_plane_widget(mlab.pipeline.scalar_field(scalar),plane_orientation='y_axes',slice_index=10,)

mlab.show()

ss1
ss2

```
#結果(2): 等値面の断面図
![スクリーンショット 2017-08-30 18.33.39.png](https://qiita-image-store.s3.amazonaws.com/0/192457/8951de1e-2042-4238-0374-281baa170fc4.png)



***

#補遺: 


## (1) condaを利用したmayaviのインストール ([3]を参考)

筆者のマシン環境: macOS Sierra 10.12.6
ターミナルを起動し，

1. conda install -c menpo mayavi=4.5.0
2. jupyter nbextension install --py mayavi --user
3. conda install pyQT

とした。

##(2) macOS + Jupyter利用時

 Jupyter-notebook 5.0以降 を起動するときは，**iopub_data_rate_limitを大きめに設定しておかないと，mayaviを用いた描画に必要なメモリが足りなくなる**。
そこで， jupyter起動時に， ***jupyter-notebook --NotebookApp.iopub_data_rate_limit=10000000000***などとする必要があるようだ[4]。


 ***


#参考文献
[1] miyaviのチュートリアル (英語): http://docs.enthought.com/mayavi/mayavi/auto/mlab_helper_functions.html
[2] contour3dについて (英語) http://mdns.esy.es/2017/06/17/contour3d/

[3] 2dod様のQiita記事，[Jupyter notebookでMayaviを使う時の設定](http://qiita.com/2dod/items/9fbf1fc052d74bef12cd)
[4] iopub_data_rate_limitに関すること(英語): https://github.com/jupyter/notebook/issues/2287
[UWP]コードサイン証明書でアプリパッケージを署名するときにトラブったのでメモ

#はじめに
UWPアプリをサイドローディング可能なパッケージとして配布するためには、コードサイン証明書（テスト証明書ではなく信頼できる証明機関から入手した正式なもの）でパッケージを署名する必要がある。このときちょっとトラブったのでメモ。

#Visual Studioで証明書を取り込めない
Visual StudioでUWPアプリパッケージをサインするために、プロジェクトの Package.appxmanifest を開いて、［パッケージ化］-［発行者］-［証明書の選択］で証明書を選ぶ。ここでエラーがでた。曰く、**「マニフェスト デザイナーは証明書をインポートできませんでした」**と。

#MSBuildの設定を変更する
これだった。

>**Visual Studio によって実行される検証チェックを決定する**
>https://msdn.microsoft.com/ja-jp/library/br230260.aspx#Decide

実際に行った設定変更は、
(VS Community 2015の場合)
`c:\Program Files(x86)\MSBuild\Microsoft\VisualStudio\V14.0\AppxPackage\Microsoft.AppxPackage.Targets`
(VS Community 2017の場合)
`c:\Program Files(x86)\Microsoft Visual Studio\2017\Community\MSBuild\Microsoft\VisualStudio\v15.0\AppxPackage\Microsoft.AppxPackage.Targets`

を開いて

```xml:Microsoft.AppxPackage.Targets
<PropertyGroup>
    ...
    <EnableSigningChecks Condition=" '$(EnableSigningChecks)' == '' ">true</EnableSigningChecks>
    ...
</PropertyGroup>
```
を探して

```xml:Microsoft.AppxPackage.Targets
<PropertyGroup>
    ...
    <EnableSigningChecks Condition=" '$(EnableSigningChecks)' == '' ">false</EnableSigningChecks>
    ...
</PropertyGroup>
```
に変更。証明書が使えるようになった。

#何が問題だったのか
手元の証明書には［基本制限］(Basic Constraints) フィールドが存在しておらず、
>プロパティを True (既定値) に設定すると、次の追加のチェックが Visual Studio によって実行されます。
>
>- [基本的な制約] 拡張機能の存在とその値を確認します。値は Subject Type=End Entity か、未指定かのいずれかである必要があります。
>
>https://msdn.microsoft.com/ja-jp/library/br230260.aspx#Decide

この条件に引っかかったのかも？詳しくないので本当のところは分からないが。
ブラウザで3D写真を撮影・表示

## 3D写真Webアプリ[cyc.cam](https://cyc.cam)
iOS Safariでも次のバージョン11.0からWebで[カメラを使えるようになる](https://developer.apple.com/library/content/releasenotes/General/WhatsNewInSafari/Safari_11_0/Safari_11_0.html#//apple_ref/doc/uid/TP40014305-CH13-SW8)という話を聞いたので、以前から作りたかった、3D写真を撮影・表示するWebアプリ[cyc.cam](https://cyc.cam/)を作ってみた。Android Chromeで動作確認しているが、iOS Safari 11.0でも動く（はず）。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr"><a href="https://t.co/E0eK0rhzIJ">https://t.co/E0eK0rhzIJ</a> 3D photography web application using HTML5 technologies.  <a href="https://twitter.com/hashtag/cyccam?src=hash">#cyccam</a> <a href="https://t.co/Gc13p6cEJg">https://t.co/Gc13p6cEJg</a></p>&mdash; Horo Tsuyoshi (@horo) <a href="https://twitter.com/horo/status/898149100339683328">2017年8月17日</a></blockquote>

Androidで利用する場合、[ServiceWorkerを使ってオフラインでも使える](http://qiita.com/horo/items/175c8fd7513138308930)ようになっていたり、[Web Share API](https://developers.google.com/web/updates/2016/10/navigator-share)を使って他のアプリにシェアできたりするので、[Add to homescreen](https://developers.google.com/web/updates/2017/02/improved-add-to-home-screen)でホームスクリーンから起動した場合、一見すると、ネイティブアプリと区別できないくらいになっていると思う。

画像を連続で複数枚撮影して、スマホの傾き（デスクトップだとマウスの動き）に合わせて切り替えているだけだが、結構それっぽく見えて面白い。

## Motion JPEG
3D写真データをシェアする際に、[Motion JPEG](https://en.wikipedia.org/wiki/Motion_JPEG)という複数のJPEGファイルを一つにまとめたデータ形式でサーバーにアップロードしている。

サーバーからダウンロードしたMotion JPEGファイルをブラウザ側で複数のJPEGファイルに分割するために、[こちらのstack overflowの記事](https://stackoverflow.com/questions/1557071/the-size-of-a-jpegjfif-image)を参考にした。JPEGファイルのヘッダにファイルサイズの情報は入っていなくて、ファイルサイズを知るためにデータをすべて舐める必要があるのは知らなかった。

## 3D写真表示ライブラリ[cycimg](https://github.com/horo-t/cycimg)
せっかくなので、Web上で簡単に3D写真を表示できるライブラリ[cycimg](https://github.com/horo-t/cycimg)を作った。こちらの[デモページ](https://horo-t.github.io/cycimg/sample.html)のように`img`タグの`cycimg`というアトリビュートにMotion JPEGファイルを指定すると、自動的に3D写真を表示することができる。

```html
<script src="./cycimg_min.js" async></script>
<div>
  <img src='./sample.jpeg' cycimg='./sample.mjpeg'>
</div>
```
Motion JPEGファイルは複数のJPEGファイルを`cat`コマンドで結合するだけで作成できるので、もしWebで3D写真を表示することに興味がある方は使っていただければ幸いです。
httpieで証明書付きのリクエストを投げる

Windows使ってるとcurlが使いにくいので、HTTPリクエストを簡単に送れない。
なので、httpie使ってオレオレ証明書付きリクエストを投げてみた。

```bash

http --cert server.cer --cert-key server.key --verify ca.pem https://self.sample.com/
```
結果は下記のような感じ。

![ss.png](https://qiita-image-store.s3.amazonaws.com/0/2396/649470fb-ffa3-4519-1057-3921c99d26d4.png)
google map にアイコンを表示するメモ

###内容
東京駅をcenterにしてiconを表示して、#map にgoogle map を出力するメモ

```html:html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=xxxxxxxxxxxxxxxxxx"></script>
<script type="text/javascript">
//<![CDATA[
$(function() {
    var latitude  = '35.681193';
    var longitude = '139.767384';
    var latlng = new google.maps.LatLng(latitude, longitude);
    var zoom = 16;
    var mapOption = {
        center                 : latlng,
        keyboardShortcuts      : false,
        mapTypeControl         : false,
        mapTypeId              : google.maps.MapTypeId.ROADMAP,
        streetViewControl      : false,
        zoom                   : zoom,
        scrollwheel            : true,
        disableDoubleClickZoom : false,
        draggable              : true,
        scaleControl           : true,
        zoomControl            : true,
    };
    map = new google.maps.Map(document.getElementById('map'), mapOption);
    marker = new google.maps.Marker({
        map      : map,
        position : latlng,
        url : '/img/map_icon.png',
        scaledSize: new google.maps.Size( 50, 50 )
    });
});
//]]>
</script>
</head>

<body>
    地図：<div id="map" style="height: 400px; width: 800px; "></div>
</body>
</html>
```

各種パラメータは公式参照
[https://developers.google.com/maps/documentation/javascript/tutorial](https://developers.google.com/maps/documentation/javascript/tutorial)
swift 地図上の方位マークについて

現在swift 3.0で地図を表示するプログラムを作成しているのですが
trackingHeading中に画面右上に表示される方位マークなのですが
その方位マークを触った場合、キャッチするDelegateみたいなものは
あるのでしょうか。

ご存知の方、ご教授お願いいたします。
AWS（EC2+RDS）でWordpressサイトを構築する際にやることリスト

以下の構成でWordpress環境を構築する際にやることを箇条書きでまとめました。（元ブログは[こちら](http://output-place.blogspot.jp/2017/08/awsec2rdswordpress.html)）

**<構成>**
Webサーバ：EC2（nginx+php7）
DBサーバ：RDS（MySQL）


各作業の細かい手順は以下を参考にしてください。

- [ドットインストール](http://dotinstall.com/lessons/basic_aws)
　※ちょっと情報が古いです
- [0から始めるAWS入門](http://qiita.com/hiroshik1985/items/6433d5de97ac55fedfde)
　※ELBの設定はスキップしてます

## 1.EC2インスタンス作成・設定
- インスタンス作成
- セキュリティグループ設定（インバウンド）
 - HTTP（0.0.0.0/0）
 - HTTPS（0.0.0.0/0）
 - SSH（特定のIPのみ）
- Elastic IP設定
- SSHログイン確認（KEY作成＆ローカル配置）

## 2.各種ソフトウェアインストール・設定
#### インストール
- sudo yum update
- sudo yum install -y nginx
- sudo yum install -y mysql
- sudo yum install -y php70
- sudo yum install -y php70-mysqlnd php70-mbstring php70-mcrypt php70-pdo php70-xml php70-fpm

#### 自動起動設定
- sudo chkconfig nginx on
- sudo chkconfig php-fpm on

#### 設定変更＆再起動
###### php-fpm
- sudo vim /etc/php-fpm.d/www.conf

``` 
 user = nginx
 group = nginx
 listen.owner = nginx
 listen.group = nginx
 listen.mode = 0660
 listen = /var/run/php-fpm.sock
```
- sudo /etc/init.d/php-fpm restart

###### nginx
- sudo vim /etc/nginx/conf.d/default.conf（新規作成）

```
server {
  listen 80;
  server_name hostname;
  root /var/www/html;
  index index.php index.html index.htm;

  location / {
    try_files $uri $uri/ /index.php?$query_string;
  }

  location ~ \.php$ {
    fastcgi_split_path_info ^(.+\.php)(/.+)$;
    fastcgi_pass unix:/var/run/php-fpm.sock;
    fastcgi_index index.php;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    fastcgi_param PATH_INFO $fastcgi_path_info;
    include fastcgi_params;
  }
}
```
- sudo /etc/init.d/nginx restart


## 3.RDSインスタンス作成・設定
- DBのパラメータグループの作成（日本語対応）
 - character_set_client　→　utf8
 - character_set_connection　→　utf8
 - character_set_database　→　utf8
 - character_set_server　→　utf8
 - character_set_system　→　utf8
- インスタンス作成
 - MySQL
 - パラメータグループ指定
- セキュリティグループ設定（インバウンド）
 - MySQL/Aurora（EC2のセキュリティグループを指定）


## 4.Wordpressインストール・設定
- wget https://ja.wordpress.org/wordpress-4.8.1-ja.zip
- unzip
- /var/www/htmlにmv
- chown -R nginx:nginx /var/www/html/
- ブラウザでアクセスし初期設定
pythonメモ：map -リストの各要素に同じ処理を施す

#動機
[以前の投稿](http://qiita.com/HotAllure/items/2e9e870506ab6e389455)で、改行区切りのテキストファイルを読み込んでリストにした際、各要素に改行記号が含まれてしまったので、それを削除したかった。

#map関数でリストの各要素を処理
[こちらのブログ記事](http://python.civic-apps.com/map-reduce-filter/)を参考にさせていただきました。
map(処理,リストオブジェクト)とすることで、各要素に処理を適用できるんですね。
ついfor文を回してしまいそうになります。

動機にあるリンクの以前の投稿に乗せたスクリプトの改良版です。

```Python:contain_or_not.py
import sys

r0 = open('vocab.txt','r') #読み込みモードでファイルを開く
vocab  = r0.readlines()    #vocab.txtには改行区切りで単語が入っている
r0.close()

argvs = sys.argv
words = argvs[1:] #argvs[0]は実行時のファイル名が入っている

def remove(s):
  return s.replace('\n','') #replace('置換前','置換後')該当する文字列を置換する

new_vocab = list(map(remove, vocab)) #map関数でvocabの各要素の改行文字を削除

for word in words:
  if word in new_vocab:
    print(word + ' is in vocab at line %d.' %(new_vocab.index(word)+1))
  else:
    print(word + ' is not in vocab.')

```

ついでに、確かめたい単語がリストの何行目にあるかも出力されるようにしました。

#イテレータってなんだろう
はじめ何も考えずにmap関数を用いたら、new_vocabがmapオブジェクトになってしまったので、list関数を使って再度リスト化しました。
mapオブジェクトはイテレータと呼ばれるらしい。for文を書く代わりに、リストの各要素に対して同じ処理を施してくれる機能を持ったオブジェクトということなのでしょうか。まだまだ理解が浅い。
switct-case 文でインデントした時に ESLint の警告を受けないように

## 問題

こんな感じに書きたい。ただ、これはデフォルトのままだと`indent`ルールに引っかかります。

```js
switch (1) {
  case 1: {...}
  case 2: {...}
  default: {...}
}
```

こうしろと言ってくるんです。

```js
switch (1) {
case 1: {...}
case 2: {...}
default: {...}
}
```

## 解決

どうしても上で書きたい場合は、`indent`ルールのオプションの`{SwitchCase: <ネストの深さ>`を指定します。なんとデフォルトが`{SwitchCase: 0}`だった為に警告されたわけです。
つまり、`.tslintrc`をこんな感じにすれば上の方法で書けるようになります。

```json
"rules": {
  "indent": ["error", 2, {"SwitchCase": 1}],
}
```

## eslint-config-prettier と eslint-plugin-prettier を使ってる場合

もし、`prettier/prettier`ルールを使っている場合でネストを`０`のまま使っていると、

- `Insert '··' (prettier/prettier)`
- `Replace '······' with '········' (prettier/prettier)`

こんな感じの**意味不明**なエラー文に怒られてハマります。

これはswitch-case文のインデントを`1`にすれば直ります😇
ASTERIA WARPでQRコードを生成してみる

# はじめに
QRコードの生成はASTERIA WARPのコンポーネントでは提供されていないのでZXingライブラリを使って試してみました。

# 環境
+ OS : Windows 10
+ Java：1.8.0.121
+ ASTERIA WARP : 1703
+ ライブラリ : ZXing
  + core-3.3.0.jar
  + javase-3.3.0.jar

# モジュールの配置
core-3.3.0.jar、javase-3.3.0.jarを`[DATA_DIR]/system/lib/userlib`に配置

```
─system
   ├─lib
      └─userlib
              core-3.3.0.jar
              javase-3.3.0.jar
```

# フローの作成
JavaInterpreterコンポーネントを使ってサンプルなどを参考にコードを記述します。

<img width="463" alt="ZXing01.png" src="https://qiita-image-store.s3.amazonaws.com/0/180292/019b80ca-28d6-1c70-d019-dda1863bcc48.png">

何も考えなければこれで動作確認までできると思います。

## パラメーターを設定して動的に引数を渡す
JavaInterpreterにパラメーターを設定し、コードに埋め込むことで動的に値をセットすることができるようになります。

QRコードに埋め込む文字列や出力するファイルパスなどをセットするとよいと思います。

<img width="603" alt="ZXing02.png" src="https://qiita-image-store.s3.amazonaws.com/0/180292/4b483753-0e7b-59cc-ef92-7ae356d455f8.png">

コンポーネントプロパティ「ソースコード」の該当部分

```java
String contents = component.getParameter("コンテンツ").strValue();
int width = component.getParameter("横幅").intValue();
int height = component.getParameter("高さ").intValue();
```

```java
ImageIO.write(image, "png", new File(component.getParameter("出力ファイルパス").strValue()));
```

## Binaryの出力ストリームとしてリターンする

JavaInterpreterのヘルプにも通常は文字列で返せば簡単と書いてあるのですが、StreamFactoryを使ってBinaryの出力ストリームとしてセットしてみます。

<img width="480" alt="ZXing03.png" src="https://qiita-image-store.s3.amazonaws.com/0/180292/9b948bb7-9e19-93b6-b7ae-0af215ac67f8.png">

コンポーネントプロパティ「ソースコード」の該当部分

```java
//Binaryストリーム出力
ByteArrayOutputStream bos = new ByteArrayOutputStream();
ImageIO.write(image, "png", bos);
StreamFactoryBinary factory = (StreamFactoryBinary)component.getOutputConnector().getStreamFactory();
return factory.create(bos.toByteArray());
```

# 出力したQRコード

こんな感じで生成できました。

![qrcode.png](https://qiita-image-store.s3.amazonaws.com/0/180292/9a5d9eb1-f4fd-17b6-a925-3c3aedb2a461.png)


# PDFファイルに埋め込み

Binaryストリームとして出力しているのでそのままPDFコンポーネントに差し込んでQRコードの画像を埋め込んだPDFを出力することもできました。

![ZXing04.png](https://qiita-image-store.s3.amazonaws.com/0/180292/a98a4291-a21a-f89a-a2ef-bd50ca25b419.png)

出力したPDFファイル

![ZXing05.png](https://qiita-image-store.s3.amazonaws.com/0/180292/f9614978-a6b5-e3f1-e602-acf12453f8e5.png)


# おわりに

ZXingにはQRコードのデコードもあるようなので時間があるときに試してみたいと思います。
NginxにLet's Encriptを設定して自動更新するまで


## Cerbotのインストール
```bash
$ wget https://dl.eff.org/certbot-auto
$ sudo mv certbot-auto /usr/local/bin/certbot-auto
$ sudo chmod a+x /usr/local/bin/certbot-auto
```

## 証明書発行
```bash
$ certbot-auto --nginx
# メールアドレスやどのドメインの証明書を発行するかを設定
```

## 自動更新設定
以下をcronに設定。一応、月に2回走るようにしました。
期限切れ30日以内であれば更新され、そうでないならスルーされます。

```
0 0 1,15 * * certbot-auto renew
```
vue-cliのindex.htmlをsrcに入れ込む

`vue-cli`を使うと以下のようなディレクトリ構成で初期生成されます。

## vue-cliの初期ディレクトリ構成
```
├── README.md
├── build
├── config
├── index.html
├── node_modules
├── package.json
├── src
└── static
```

ここで、[Vue2のディレクトリ構成を考える](http://qiita.com/kurosame/items/b3f5bee8ea73df025cb1)という記事によると、同じく`vue-cli`で始めているわけですが、`index.html`の位置が微妙に異なることに気が付きます。おや？

> こちらが現在のディレクトリ構成になります。
> 規模が大きくなってきても耐えれる構成にしたいということを意識して考えました。

```
├── assets
├── dist
├── gulp
├── gulpfile.js
├── package.json
├── src
│   ├── App.vue
│   ├── components
│   │   └── Sample
│   │   └── globals
│   │       └── Header
│   ├── constants
│   │   └── constant.js
│   ├── index.html      <-ココ！
以下略
```

初期状態は、直下に`index.html`があるにも関わらず、記事中では`src`配下に移動しています！（確かにこのほうが良さそうな気はする）

### `src`配下に移動してみる
以下のように`index.html`を`src`配下に移動しました。

```
├── README.md
├── build
├── config
├── node_modules
├── package.json
├── src
    └── index.html
└── static
```

この状態で`npm run dev`（起動）すると、当然怒られます。（`index.html`ないぞ！）

![ng.png](https://qiita-image-store.s3.amazonaws.com/0/59926/b4f55d49-9d51-6a28-4882-52795e268da4.png)

## Webpackのどこを弄ればいいのか

`npm run dev`を実行すると、Webpackがいい感じにやってくれるわけですが、その際テンプレートとなる`index.html`の位置を`src`の下にするにはどうすればいいのでしょうか。

### webpack.dev.config.js【NG】

以下の`template`という部分を変更してみましたが、何も変わりませんでした。。デフォルトの設定が勝っちゃう。。
参考:[The template option](https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md)

```build/webpack.dev.config.js
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.html',
      inject: true
    }),
```

### webpack.base.config.js【OK】

そこで、以下のように`webpack.base.config.js`に`context`として`./src`を追加し、`entry.app`から`src/`を外してみたところ、上手くいきました。

```build/webpack.base.config.js
module.exports = {
  context: path.resolve('./src'),
  entry: {
    // app: './src/main.js'
    app: './main.js'
  },
```

![ok.png](https://qiita-image-store.s3.amazonaws.com/0/59926/6d99bfac-0450-f8cc-c9c5-a442aba3014a.png)

## 感想

**とりあえず**`./src/index.html`をテンプレートにして起動はできましたが、これがベストな手法なのかどうかは謎です。（詳しい方がいらっしゃったら教えてください...!）
AWSスナップショットの定期実行設定方法

## 概要
- 思った以上に簡単すぎたのでメモ

#### AWS CloudWatchEventsを利用した、AWS EBS スナップショットの定期的に取得する為の手順

## 手順
### 1. 対象インスタンスについての情報整理

- まず、スナップショットにより定期的にバックアップを取りたい対象のインスタンスの下記の情報をまとめておく(やってもやらなくても大丈夫)
    
    |インスタンス名|インスタンスID|ボリューム名|ボリュームID|
    |:--:|:--:|:--:|:--:|
    |hoge|i-***********|fuga|vol-***********|

### 2. AWS CloudWatchEventsにroleを作成する

1. AWSにログインして、CloudWatchのコンソール画面に遷移する
1. 左サイドバーのメニューから<font color="red">**イベント**</font>をクリックする
1. ↓画像の赤枠の<font color="red">**ルールの作成**</font>ボタンをクリックする
    ![d14d37fe-cf18-8ae8-95ad-a70c80b3833e.png](https://qiita-image-store.s3.amazonaws.com/0/133737/3c0f6bd5-6047-0eb9-8d35-44cf7e607366.png)
1. `ステップ 1: ルールの作成`という画面に遷移する
1. `イベントソース`の<font color="red">**スケジュール**</font>というラジオボタンを選択する
1. スケジュール用の設定画面に変りスケジュールの設定方法を`一定の速度`か`Cron式`か選択する
    - 一定の速度
        1. セレクトボックスの中から`分`・`時間`・`日`のいずれかを選択する
        1. 入力フォームに<font color="red">**任意の数値**</font>を入力する
            - ※すぐに結果を見たい場合は、`1分`とかにすると良いでしょう
    - Cron式
        1. 入力フォームに決められたスケジュールで実行されるようにCron式を入力する
            
            ```:例_2017/1/1の11時11分に実行する場合
             11  11  1   1    ?  2017 
           [分][時][日][月][曜日][年]
            ```
            - 詳しい設定方法は[こちらの記事](http://qiita.com/da-sugi/items/ef3bb45a8a99a4acacb1)をご覧ください
1. `ステップ1:ルールの作成`の画面の<font color="red">ターゲットの追加</font>にある<font color="red">**+ ターゲットの追加***</font>ボタンをクリックして、設定画面を表示する
　　　　![20170405220510.png](https://qiita-image-store.s3.amazonaws.com/0/133737/8289d2a0-3622-2e00-7757-199efbf7db14.png)
1. デフォルトで`Lambda関数`が選択されているセレクトボックスの中から<font color="red">**EC2 Create Snapshot API 呼び出し**</font>を選択する
1. `ボリュームID*`にスナップショットを取りたいEBSの<font color="red">**ボリュームID**</font>を入力する
    - ※EBSボリュームIDはEC2コンソールの左サイドバーの[ELASTIC BLOCK STORE] > [ボリューム]からインスタンスIDで検索をして、確認することができる
1. <font color="red">**設定の詳細**</font>というボタンをクリック
1. `ステップ 2: ルールの詳細`画面の<font color="red">名前</font>の入力フォームに<font color="red">**{任意のルール名}**</font>を入力する
1. <font color="red">説明</font>の入力フォームに<font color="red">**{任意の説明文}**</font>と入力する
1. <font color="red">状態</font>の<font color="red">**有効**</font>にチェックが入っていない場合は入れる
1. <font color="red">AWS アクセス権限の新しいロールの選択または作成*</font>というセレクトボックスから実行用のロールを選択する
    - ない場合は<font color="red">基本イベント実行ロール</font>を作成する
        1. `IAM画面`に遷移するので、画面上部の<font color="red">**‣詳細を表示**</font>をクリックする
        1. ロールの設定画面が出てくるので<font color="red">**ロール名**</font>を設定する
        1. 画面下部の<font color="red">**許可ボタン**</font>をクリック
1. 最後に`ステップ 2: ルールの詳細`画面の<font color="red">**ルールの作成**</font>ボタンをクリックする
1. あとは各々、設定した通りのスケジュールでスナップショットが取得されているかどうか確認ください

# 以上!!!!
Ruby on Railsで"can't quote Array"のエラーが出た場合

model中以下のコマンドにおいて"can't quote Array"のエラーが出たので自分用メモ
`self.update_column(:before_group_ids, before_group_ids)`

# 原因調査
## 調べたページ
- [Rails5 migration: can't quote Array](https://stackoverflow.com/questions/38953885/rails5-migration-cant-quote-array)
- [Rails error: “can't quote array”](https://stackoverflow.com/questions/42235231/rails-error-cant-quote-array)
- [update_attributesとupdate_columnsの違い【Ruby on Rails】](http://sakurawi.hateblo.jp/entry/update_attributes)
- [ActiveRecord の attribute 更新方法まとめ](http://qiita.com/tyamagu2/items/8abd93bb7ab0424cf084)

## 試した対応（効果なし）
- migrationにおいて`default: [].to_yaml`を入れる　＝＞　効果なし
- migrationにおいて`default: [], array:true`を入れる　＝＞　効果なし
- `self.before_group_ids = [0,1]` + `self.save`　＝＞　成功
- `self.update_attribute(:before_group_ids, before_group_ids)`　＝＞　成功


# 解決
ひとまずupdate_attributeを用いることでエラー回避
update_columnはUPDATE SQLを作成してとあるように、
active_recordを挟まないためエラーが出ていたのかな...？
python 開発環境 google クラウド環境で共同開発をしたい 手順を知りたい

python を勉強しながら開発しています。

友人と同じ環境を利用できるようにしたい。

端末は
私：Windows10 Chrome
友人：Mac

Google クラウドの環境で開発、テストしたい

どのような手順になるでしょうか？

・インストールすべきもの
・設定方法
・友人と共有すべき情報
　私が設定した場合、友人に伝えるべき情報

一応、Google cloud platformの設定
ローカルにApp Engine　をインストールしました。

宜しくお願い致します。
ActiveAdminで自作scopeを使ったfilterに'1'を渡すとエラーになる

# 現象
ActiveAdminにて、以下のようなコードで自作scopeを利用したfilterを使うと、検索値が'1'のときに `ArgumentError (wrong number of arguments (0 for 1))` が発生する。

```ruby:model/product.rb
class Product < ActiveRecord::Base
  ...

  # custom scope
  scope :original_scope, -> (product_id) {
    product = Product.find(product_id)
    # do something
  end

  def self.ransackable_scopes(_auth_object = nil)
    %i(original_scope)
  end

  ...
end
```

```ruby:app/product_admin/product.rb
ActiveAdmin.register Product, namespace: :product_admin do
  ...
  
  filter :original_scope, as: :select, collection: -> { Product.all }

  ...
end
```

# 原因調査
調べてみると、どうやらscopeに渡すときに、0と'0'をfalseに、1と'1'をtrueに変換しているので、値で渡せないようです。

[Ransackで自前scope使う時に'1'や'0'を値として渡せない？](http://qiita.com/t_oginogin/items/b45636d64c271ebc409c)

関連するIssueを見るとCloseになっているのですが、バージョンの問題なのか私の環境ではエラーのままでした。

[Wrong result and errors for join/group/having scope with certain values (0 and 1) #502](https://github.com/activerecord-hackery/ransack/issues/502)

# 対処
## 案１：可変長引数を使う
可変長引数で受けると`value=[]`になるので、無理やり書き換える。
今回のケースでは`id`を渡す用途のため、`0`は無視する。

```ruby:model/product.rb
class Product < ActiveRecord::Base
  ...

  # custom scope
  scope :original_scope, -> (*product_id) {
    product_id = [1] if product_id == [] # hotfix
    product = Product.find(product_id[0])
    # do something
  end

  ...
end
```

かなり強引なやりかたで、汎用性も低そうなので、できれば避けたい。

## 案２：代わりになる引数を使う
今回のケースでは、引数で渡した数値（ID）を使って`Product`の検索をするため、数値を使わずに検索できる方法を利用した。

```ruby:model/product.rb
class Product < ActiveRecord::Base
  ...

  # custom scope
  scope :original_scope, -> (product_name) {
    product = Product.find_by(name: product_name)
    # do something
  end

  ...
end
```

この方法では当たり前かもしれないが、

1. ユニークな値であること
2. インデックスが張られていること

がないとレコードが複数件ヒットしたり、検索が遅かったりする。

---

もっとスマートな解決方法があれば、ぜひコメントをm(_ _)m

おわり
pythonメモ：コマンドライン引数がリストに含まれているか判別

#動機
自然言語処理を勉強する中で単語リストのテキストファイルを生成したのですが、サイズが大きく中身を確認するのが大変だったので、自分が適当に選んだ単語が単語リストの中に入っているか、を確認できるようにしてみたかった。

#コマンドライン引数をリストとして取得する
[Yukun's Blogのこちらの記事](http://www.yukun.info/blog/2008/07/python-command-line-arguments.html)を参考にさせていただきました。

sysモジュールのargv属性にコマンドライン引数が格納されるようです。

```contain_or_not.py

import sys

r0 = open('vocab.txt','r') #読み込みモードでファイルを開く
vocab  = r0.readlines()    #vocab.txtには改行区切りで単語が入っている
r0.close()

argvs = sys.argv
words = argvs[1:] #argvs[0]は実行時のファイル名が入っている

for word in words:
  if word in vocab:
    print(word + ' is in vocab.')
  else:
    print(word + ' is not in vocab.')
```
自分だけが使うので特にエラー処理などは考えていませんでしたが、単語が入力されなかった場合にエラーが出るようにした方がユーザーフレンドリーなのでしょうか。

#問題点：vocabの各要素に改行記号が含まれてしまった
vocab.txtに明らかに含まれている単語を入力しても、not in vocabと出力されてしまった。どうやら改行記号が悪さしている模様。
人間が見る時は改行区切りの方が易しいのですが、ファイルは下手に改行区切りにしないようが良いのでしょうか。

~~次の投稿で、vocabの各要素から改行記号を除く方法を書いてみます。~~
書きました。修正版のスクリプトもこちらです。
[pythonメモ：map -リストの各要素に同じ処理を施す](http://qiita.com/HotAllure/items/c897b582895b78461f71)
C#のメモ帳　DBへ書き込む部分の関数化


SQLのInput/Update/Deleteを関数にしクラスファイルにまとめた。

```csharp:Input/Update/Deleteを実行

using System.Data;
using System.Data.SqlClient;    //DB接続用

namespace AAA
{
    class SQL実行系
    {

        // メソッドの定義 ここから----------------------------↓

        public string 実行(string DB接続文字列, string sql)
        {
            //引数は、DB接続文字列とSQL(Input/Update/Delete文)。
            //Insert, Update, Delete を実行した後、
            //OK/NGを戻す。


            string Result;

            using (SqlCommand command = new SqlCommand())
            {
                SqlConnection conn = new SqlConnection();
                conn.ConnectionString = DB接続文字列;

                // トランザクションを開始します。
                conn.Open();
                SqlTransaction transaction = conn.BeginTransaction(IsolationLevel.ReadCommitted);

                try
                {
                    command.CommandText = sql;
                    command.Connection = conn;
                    command.Transaction = transaction;
                    command.ExecuteNonQuery();

                    //トランザクションをコミットします。
                    transaction.Commit();
                    Result = "OK";
                }
                catch (System.Exception)
                {
                    //トランザクションをロールバックします。
                    transaction.Rollback();
                    Result = "NG";
                    return Result;
                }
                return Result;
            }  // このブロックを抜けたらcommand 、conn はDisposeされます。
        }

        // メソッドの定義 ここまで---------------------------------↑

    }
}
```
windowsでもリアルタイムでログ監視(tail -f)がしたい！

# 序文
昔はmacで開発してたラチェです。
macならtail -fでログがリアルタイムで見れるのですが、
windowsはそうはいかず、必死に探してたら、tailっぽいことができるコマンドがありましたよ…！

## 動作要件

★PowerShell 3.0 以上
Win7だと初期バージョンの場合2.0の場合があるようです。
win8以降は標準でpowershell3.0がインストールされています。
win10は標準で4.0が入っているので同じく問題なしです。


## バージョン確認方法

###1.windowsからpowershellを起動。
windows10：左下の入力欄にpowershellと入力すると出てきます
windows8：持ってないのでわからないです＞＜
windows7：スタート→プログラムとファイルの検索でpowershellと入力

###2.バージョン確認コマンドの入力
Windows8以上だったら特にいらないです


```shell-session:powershell
$PSVersionTable
```
###3.出力結果からバージョンを確認

```
Name                           Value
----                           -----
PSVersion                      5.1.15063.502

```

上記のPSVersionが3.0以降であることを確認してください

◆3.0でない場合は、以下を実行してください。
<a href="http://www.microsoft.com/ja-JP/download/details.aspx?id=30653">.NET Framework 4.5</a>をインストールする。
<a href="http://www.microsoft.com/ja-jp/download/details.aspx?id=40855">WMF 4.0</a>をインストールする
PCを再起動後、3の手順を再実行し、バージョンを確認。

###4.下記コマンドを入力

```shell-session:powershell
Get-Content -Path [確認したいファイルのフルパス] -Tail -Wait -Encoding [文字コード]
```

* 文字コードの箇所、日本版のpowershellのデフォルトではS-JISで読み込んでますが、文字化けする場合はUTF8とかに変えてあげてください。(<a href="https://technet.microsoft.com/ja-jp/library/hh847788.aspx">利用可能な文字コードはこちら</a>)
* select-stringを使って、特定の文字が入った行のみ出力することも可能です。[| select-string "error"]みたいな感じ
* 動かない場合は、-Tail の後に0を入れてください。[@currysitaさんありがとうございます！]



上記を行うことでソフトを入れずにwindowsでtailができるようになります。

###5.注意
監視対象のファイルの所有権を他のアプリやバッチが常時握っていると、このコマンドは利用できません。
MySQLでのテーブルを入れ替えるメモ

###内容
現行テーブルを[テーブル名]_oldとして残し、[テーブル名]を作成する。


###手順
①tmpテーブルを作成

```mysql:Mysql
CREATE TABLE IF NOT EXISTS [テーブル名]_tmp LIKE [テーブル名];
(仮)TRUNCATE TABLE [テーブル名]_tmp;
```
②tmpテーブルにデータ投入

③oldテーブルを削除

```mysql:Mysql
DROP TABLE IF EXISTS [テーブル名]_old;
```
④テーブルを入れ替える

```mysql:Mysql
RENAME TABLE [テーブル名] TO [テーブル名]_old, [テーブル名]_tmp TO [テーブル名];
```
Matで取り込んだ画像をOpenCVを使用せずにグレースケールへ変換する

# 概要
OpenCVで取り込んだMatデータを直接ピクセルごとに処理したくなる時があります。
今回はピクセル処理の基本の勉強としてMatデータに直接アクセスし、グレースケールへ変換する処理を行います。

バージョンはOpenCV3.2を使用しています。

# コード
まずコードです。
今回はピクセルへのアクセスにdataを使用しています。
atを使用すると処理がかなり遅くなりましたので、dataでアクセスしています。（debug時の動作の未確認。Release時にどちらが早いかは確認していません。）

	Mat RGB2Gray(Mat frame)
	{
		Mat gray = Mat::zeros(cv::Size(frame.cols, frame.rows), CV_8UC1);
	
		int ch = frame.channels();

		for (int i = 0; i < frame.rows; i++) {
			for (int j = 0; j < frame.cols; j++) {
				int num = frame.data[i * frame.step + j * ch + 0] * 0.299 + 
						  frame.data[i * frame.step + j * ch + 1] * 0.587 + 
						  frame.data[i * frame.step + j * ch + 2] * 0.114;
				gray.data[i * gray.step + j] = num;

			}
		}
        
        return gray;
	}
    
atを使用する場合

	for (int i = 0; i < row; i++) {
		for (int j = 0; j < col; j++) {
			int num = frame.at<Vec3b>(i,j)[0] * 0.299 +
				frame.at<Vec3b>(i, j)[1] * 0.587 +
				frame.at<Vec3b>(i, j)[2] * 0.114;
			for (int k = 0; k < ch; k++) {
    			gray.at<unsigned char>(i, j) = num;
			}
		}
	}
    
# 解説

    Mat gray = Mat::zeros(cv::Size(frame.cols, frame.rows), CV_8UC1);

グレイスケールの画像を保存するMatデータを初期化しています。
サイズは取り込んだ画像、型はCV_8UC1(8bit,1channel)を指定しています。
※型に関してはコチラをどうぞ
・OpenCVの型情報の定数まとめ
http://d.hatena.ne.jp/arche_t/20090120/1232445728

	for (int i = 0; i < frame.rows; i++) {
		for (int j = 0; j < frame.cols; j++) {
        }
    }

画素ごとにラスタ捜査を行います。

	int num = frame.data[i * frame.step + j * ch + 0] * 0.299 + 
		  frame.data[i * frame.step + j * ch + 1] * 0.587 + 
		  frame.data[i * frame.step + j * ch + 2] * 0.114;

引数の画像からRGBチャンネルを抜き出し、定数を掛け和を取っています。
値がそれぞれ違うのは、人間の目では青は弱く見え、緑が強く見えるからです。

frame.stepは行の画素数×チャンネル数です。
最後に足している0~２の値はチャンネルです。
３チャンネルの場合

    RGBRGBRGB...

の順でデータが並んでいるため、チャンネルを考慮しなければいけません。
逆に1チャンネルの場合は１画素につき１チャンネルとなっている為

    gray.data[i * gray.step + j]

のようにシンプルに表現することができます。

	return gray;

最後に作成したグレースケール画像を返して終了です。


この処理では3チャンネルで入力した画像を1チャンネルで出力していることに気を付けてください。
Squareの商品APIを使いこなす

どのような店舗であっても商品があります。商品をあらかじめ登録しておくことでレジ操作が簡単になります。さらに複数店舗であったり、商品情報が頻繁に更新される場合、APIを使って商品入れ替え作業を自動化すると日々のワークフローが楽になることでしょう。

Squareの商品APIを使うことで基幹システム（場合によってはExcelかも知れません）にある商品データをSquareのレジアプリに同期できるようになります。今回は商品の登録と一覧取得、画像アップロードについて紹介します。

## 注意点

商品APIはバージョン1のみ提供されています（バージョン2ではカタログAPIと名前を変えています）。サンドボックス環境はバージョン2に対してのみ有効になりますので、商品APIはサンドボックスで試用できません。

## 共通処理について

今回はRubyを使って説明します。Square公式のRubyライブラリ、SquareConnectを使います。 `YOUR_ACCESS_TOKEN` は自分のものに置き換えてください。

```
require 'square_connect'
access_token = 'YOUR_ACCESS_TOKEN'
SquareConnect.configure do |config|
  config.access_token = access_token
end

# 商品APIのインスタンス
api_instance = SquareConnect::V1ItemsApi.new
```

また、必ず店舗情報が必要になります。これはこちらの記事を参考に取得してください（以下ではlocationとします）。

## 商品を登録する

商品情報は以下のようにオブジェクトを定義します。商品名や説明、価格を設定して登録します。

```
request_body = {
  "name": "ミルクシェーキ",
  "description": "疲れた体にぴったりな甘いミルクシェーキです",
  "visibility": "PUBLIC",
  "variations": [
    {
      "name": "Small",
      "pricing_type": "FIXED_PRICING",
      "price_money": {
        "currency_code": "JPY",
        "amount": 550
      },
      "sku": ""
    }
  ]
}

begin
  resp = api_instance.create_item(location.id, request_body)
rescue SquareConnect::ApiError => e
  raise "Error encountered while create item: #{e.message}"
end
```

## 商品情報を取得する

商品一覧を取得するのは店舗IDだけで実行できます。

```
begin
  resp = api_instance.list_items(location.id)
rescue SquareConnect::ApiError => e
  raise "Error encountered while create item: #{e.message}"
end
```

実行すると、次のように結果が一覧で返ってきます。決済などではこのデータのidを使って行います。

```
{
  :id=>"29a2bb32-050c-452b-b678-e0018b34e73a",
  :name=>"ミルクシェーキ",
  :description=>"疲れた体にぴったりな甘いミルクシェーキです",
  :type=>"NORMAL",
  :visibility=>"PRIVATE",
  :available_online=>false,
  :variations=>[{
    :id=>"9f8729b3-cf72-4eb4-8843-4d9a1389bcc1",
    :name=>"Small",
    :item_id=>"29a2bb32-050c-452b-b678-e0018b34e73a",
    :pricing_type=>"FIXED_PRICING",
    :price_money=>{
      :amount=>550,
      :currency_code=>"JPY"
    },
    :sku=>"",
    :track_inventory=>false,
    :inventory_alert_type=>"NONE"
  }],
  :fees=>[]
}
```

## 商品画像をアップロードする

デフォルトでは商品画像はなく、単なる文字が表示されるだけになります。これでは寂しいので商品画像をアップロードします。なお、Square Connectでは商品画像アップロードAPIに対応した機能がありません。そこで `net/http` モジュールを使ってアップロードを行います。

```
require("net/http")
require("uri")

begin
  # データの準備
  image_file = File.open("/path/to/item/image.png", "rb")
  data = [
    ["image_data", image_file, {
      filename: "image.png",
      content_type: "image/png"
    }]
  ]
  
  # URLの作成
  uri = URI.parse("https://connect.squareup.com/v1/#{location.id}/items/#{item.id}/image")
  https = Net::HTTP.new(uri.host, uri.port)
  https.use_ssl = true
  
  # リクエストの作成
  req = Net::HTTP::Post.new(uri.request_uri)
  req['Authorization'] = "Bearer #{access_token}"
  req.set_form(data, 'multipart/form-data')
  res = Net::HTTP.new(url.host, url.port).start do |http|
    https.request(req)
  end
ensure
  image_file.close
end

puts res.body
```

このように `multipart/form-data` で画像をアップロードすれば良いだけです。そうするとSquareレジアプリの商品画像が差し替わります。

----

商品APIではこの他、カテゴリや在庫変更などのAPIが用意されています。基幹システムと連携させることで、スムーズなレジ入力ができるようになるはずです。ぜひご利用ください。

[Square 商品 API](https://docs.connect.squareup.com/api/connect/v1/#items-overview)
Google Street View Image APIを使ってVR空間を作る

[Google Street View Image API](https://developers.google.com/maps/documentation/streetview/intro)を使うと任意の地点の任意の向きのストリートビュー画像を取得できます。これを使って、前・右・後ろ・左・上・下の6方向それぞれについて視野角が90度の正方形画像を取得して、それを空間上に配置すればぐるぐる見渡せる映像として使えそうだなと思いました。
[A-Frame](https://aframe.io)なら手っ取り早く試せそうだったので、作ってみました。

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Streat View VR</title>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
</head>

<body>
  <a-scene>
    <!-- 前 -->
    <a-image width="100" height="100" position="0 0 -50" src="https://maps.googleapis.com/maps/api/streetview?size=600x600&location=32.764678,-117.227644&heading=0&fov=90&pitch=0"></a-image>
    <!-- 右 -->
    <a-image width="100" height="100" position="50 0 0" rotation="0 -90 0" src="https://maps.googleapis.com/maps/api/streetview?size=600x600&location=32.764678,-117.227644&heading=90&fov=90&pitch=0"></a-image>
    <!-- 後ろ -->
    <a-image width="100" height="100" position="0 0 50" rotation="0 180 0" src="https://maps.googleapis.com/maps/api/streetview?size=600x600&location=32.764678,-117.227644&heading=180&fov=90&pitch=0"></a-image>
    <!-- 左 -->
    <a-image width="100" height="100" position="-50 0 0" rotation="0 90 0" src="https://maps.googleapis.com/maps/api/streetview?size=600x600&location=32.764678,-117.227644&heading=270&fov=90&pitch=0"></a-image>
    <!-- 上 -->
    <a-image width="100" height="100" position="0 50 0" rotation="90 0 0" src="https://maps.googleapis.com/maps/api/streetview?size=600x600&location=32.764678,-117.227644&heading=0&fov=90&pitch=90"></a-image>
    <!-- 下 -->
    <a-image width="100" height="100" position="0 -50 0" rotation="-90 0 0" src="https://maps.googleapis.com/maps/api/streetview?size=600x600&location=32.764678,-117.227644&heading=0&fov=90&pitch=-90"></a-image>
  </a-scene>
</body>

</html>
```

※本来Google Streat View APIにリクエストするためにはAPIキーを取得する必要があり、URLの末尾に`&key=YOUR_API_KEY`(YOUR_API_KEYは実際のキーに置き換えてください)を付ける必要があります。ですがAPIのデモページに使用されている`location=32.764678,-117.227644`等いくつかの場所についてはAPIキーを付けなくてもリクエストできました。
DNSで重み付けをしたときに、正しく設定されているかを確認するワンライナー

# ワンライナー

```shell-session
$ watch -n1 -t 'dig @ns.example.jp www.example.jp +short >> log; tail -n100 log | sort | uniq -c'
```

# 解説

```
watch -n1 -t ''
```
毎秒実行します。

```
dig @ns.example.jp www.example.jp +short >> log
```
`www.example.jp`の名前解決の結果をlogファイルに出力します。
リゾルバのキャッシュを避けるため、NSサーバを直接指定しています。

```
tail -n100 log | sort | uniq -c
```

ログファイルの直近100行をソートし、ユニークカウントしています。

以上により、
**直近100秒における、名前解決の結果の割合を表示し続ける**ことができ、
名前解決の重み付けの設定を確認することができます。
Re:dash の環境構築のメモ

https://seleck.cc/614 を参考に構築してみた

今回は AWS の東京リージョンでの構築だったので上記の記事にある
https://redash.io/help-onpremise/setup/setting-up-redash-instance.html
を開き
ami-fde8199b
の IAM を起動

インスタンスの IP にブラウザでアクセスすると始めに管理者ユーザーを作成

あと、ここでちょっとハマったのだが個別ユーザーを作成する場合メールサーバの設定が必要のようだが、面倒だったので以下のように CUI から作成ができた

```
cd /opt/redash/current
sudo -u redash bin/run ./manage.py users create --org default sampleuser@sample.com sampleuser
```

--org が organization のことのようだが初回アクセス時に管理者ユーザーを作成した時に作成する organization の値は default となるため default を指定している
更に次の引数に email を指定し、その次の引数に username を指定している
[Git] CentOS7に最新版のgitをインストール


#はじめに
CentOSに`git`を`yum`でインストールすると最新バージョンや２.系がインストールされないので、それらのインストール方法を書いていきます。

#下準備
###既存のgitのアンインストール

```:command-line
$ sudo yum remove git 
```

###ライブラリのインストール
```:command-line
$ sudo yum -y install curl-devel expat-devel gettext-devel openssl-devel zlib-devel perl-ExtUtils-MakeMaker autoconf
```


#最新バージョンのインストール

ここでは、現在(2017/8/30)の最新バージョンである`git-2.9.5`をインストールします。

```:command-line
$ wget https://www.kernel.org/pub/software/scm/git/git-2.9.5.tar.gz
$ tar vfx git-2.9.5.tar.gz
$ cd git-2.9.5
$ make configure
$ ./configure --prefix=/usr
$ make all
$ sudo make install
```

最後に確認。

```:command-line
$ git --version
```

出力が`git version 2.9.5`であれば、インストールは完了です。

#参考
- https://git-scm.com/book/en/v2/Getting-Started-Installing-Git
- https://sterfield.co.jp/blog/development/git/centos%E3%81%AEgit%E3%82%922%E7%B3%BB%E3%81%AB%E3%82%A2%E3%83%83%E3%83%97%E3%83%87%E3%83%BC%E3%83%88%E3%81%99%E3%82%8B/
Minette for Python でLINE BOTを作成する

日本でBOTといえばやはりLINE BOTでしょう。ここではBOTアプリケーションフレームワークのMinette for Pythonを使った作り方をご紹介します。

# 事前に準備するもの

- LINE Messaging APIのChannel SecretとChannel Access Token
- docomo 雑談APIのAPIキー（省略可能。その場合はおうむ返しBOTになります）

# 依存ライブラリのインストール

Minetteの動作に必要なpytzとrequests、LINEエンドポイントを起動するために必要なWebアプリケーションフレームワークのflaskとLINE SDKをインストールします。導入済みの場合はこの手順はスキップしてもOKです。

```
$ pip install pytz
$ pip install requests
$ pip install Flask
$ pip install line-bot-sdk
```

# Minetteのインストール

タイトルにあるように、BOTフレームワークのMinetteを使用します。Minetteの詳細については以下の記事を参照ください。

- [BOTフレームワーク Minette for Python のご紹介](http://qiita.com/uezo/items/0c92ba960a6a47b14921)

インストールは`pip`コマンド一発でOKです。

```
$ pip install minette
```

おうむ返しBOTで動作確認してみましょう。

```
$ minette
user> hello
minette> You said: hello
```

# インターネットへの公開

※このセクションは開発PC上でBOTを動作させる場合を想定したものですので、AWS上のサーバ等で直接作業をしている場合、スキップしてください

LINE Messaging APIのインバウンドは開発者が指定したWebhookを叩いてメッセージを渡してくれるようになっているので、Minetteを実行するマシンをインターネットからアクセスできるようにしてやる必要があります。

様々な方法があるかと思いますが、ここではお手軽お気楽な感じのngrokを使用した手順を説明します。

## ngrokのインストール

ngrokとは、ざっくり言えば各種プロトコルに対応したルーティング＆トンネリングツール（という認識）です。詳細は[ngrok公式](https://ngrok.com)を見ていただくとして、ダウンロードページからプラットフォームに応じたバイナリをダウンロード・解凍してください。

解凍するとその名も`ngrok`という名前の実行ファイル1個が出現しますので、こいつを以下の通り叩きます。普通に実行するとその後の作業ができなくなってしまうので、バックグラウンド実行するようにしています。

```
$ ./ngrok http 5050 -log=stdout > ngrok.log &
```

動作確認と兼ねて、インターネットURLを確認します。

```
$ curl http://localhost:4040/api/tunnels

{"tunnels":[{"name":"command_line","uri":"/api/tunnels/command_line","public_url":"https://abcd1234.ngrok.io","proto":"https","config":{"addr":"localhost:5050","inspect":true},"metrics":{"conns":{"count":0,"gauge":0,"rate1":0,"rate5":0,"rate15":0,"p50":0,"p90":0,"p95":0,"p99":0},"http":{"count":0,"rate1":0,"rate5":0,"rate15":0,"p50":0,"p90":0,"p95":0,"p99":0}}},{"name":"command_line (http)","uri":"/api/tunnels/command_line+%28http%29","public_url":"http://abcd1234.ngrok.io","proto":"http","config":{"addr":"localhost:5050","inspect":true},"metrics":{"conns":{"count":0,"gauge":0,"rate1":0,"rate5":0,"rate15":0,"p50":0,"p90":0,"p95":0,"p99":0},"http":{"count":0,"rate1":0,"rate5":0,"rate15":0,"p50":0,"p90":0,"p95":0,"p99":0}}}],"uri":"/api/tunnels"} 
```

ずらずらと情報が返ってきましたが、`public_url `の項目で示された`https://abcd1234.ngrok.io`が、ngrokによって払い出されたRaspberry PiにアクセスするためのURLなので、これをコピーするなどして控えておきます。

# LINE developersのWebhook URLに設定

先ほどngrokから払い出されたURL（または実行環境そのもののURL）の、`/api`を設定します。

![Webhook URLの設定](http://uezo.net/img/qiita/minette_line/webhook.png)

こんな感じです。なお、サービスをまだ起動してないのでVerifyは押しても失敗します。

# LINE Messaging APIのエンドポイントとして起動

`minette`コマンドでは汎用WebAPIに加えて、LINE Messaging APIのエンドポイントのサンプル実装を起動することができます。

まずはLINE Messaging APIの利用に必要な認証関連情報を環境変数に設定します。

```
$ export LINE_CHANNEL_SECRET="あなたのチャネルシークレット"
$ export LINE_ACCESS_TOKEN="あなたのアクセストークン"
```

もしdocomo雑談APIのAPIキーがあれば、以下の通り設定することで雑談BOTになります。この手順を省略した場合、Minetteの動作確認同様におうむ返しBOTとして動作します。


```
$ export CHAT_API_KEY="あなたのAPIキー"
$ export DEFAULT_DIALOG_SERVICE="minette.dialog.chat_dialog.ChatDialogService"
```

これで準備は完了ですので、エンドポイントを起動しましょう。`-l`オプションをつけます。

```
$ minette -l
```

それでは、動作確認してみましょう。

<img src="http://uezo.net/img/qiita/minette_line/line_run.png" width="375">

こんな感じで動いたら成功です。おつかれさまでした。
【python】matplotlibでグラフ範囲を設定する


背景:変化の小さいデータや大きいデータを同時に扱う際や小さい変化をあまり重要視していない場合などにグラフを調整するプログラムが必要になった。

とりあえずグラフの軸の範囲を設定できればよい

動作環境:Linux(Ubuntu16.04.2 LTS),python3.6.2,matplotlib(2.0.2)

目的:グラフの軸範囲を指定する
numpyで配列の平均値をとりそれの上下一桁をグラフの最大と最小に設定する。

また直接的に値を入力してグラフの範囲を指定するときは
set_ylim([min,max])
を使用する。
※minとmaxは軸の上と下の値を代入すればよく、min=10,max=1の場合は
上の値が1,下の値が10になる。

(ソースコード)




``` py
#配列x,yにそれぞれグラフのx,yに値するデータが格納されている。*/
import matplotlib
import numpy as np
import matplotlib.pyplot as plt

#(省略)
#yの値の平均値を算出#
ave=np.average(y)

ax=plt.subplot()
ax.plot(x,y,linewidth=0.3)
ax.grid(which="both")
ax.set_xlabel("x")
ax.set_ylabel("y")

#範囲のセット
ax.set_ylim([ave*0.1,ave*10])

plt.show()
```