OmniAICreator/Qiita-1.07M huggingface dataset:
Windows10 で VHD-Boot

# VHD-Boot

Windows の動作確認などに VHD-Boot 環境を作りたいときに、ISO を Disc や USB に展開するのができない環境で直接展開する方法です。
参考にしたサイトの前のバージョンのWindowsだと、少し違うようなのでメモ
Windows7の時にやった内容に追記なので、1703がリリースされたらWindows10に最適化しよう

## VHDブート環境新規インストール

### 環境

- OS: windows 7 professional 以降
- 仮想ファイル配置先: `D:\VHD\Win.vhd` (win8 以降なら vhdx も可)

### 作業

OSのインストールDiskなどからインストーラーを起動し、<kbd>Shift</kbd> ＋ <kbd>F10</kbd> キーを押し、コマンド プロンプトを表示する

```bat
X:\sources> diskpart
DISKPART> list vol
```

VHD作成(可変長にするにはコマンドの後に[type=expandable]を追加)

```bat
DISKPART> create vdisk file=D:\VHD\Win.vhd maximum=45000
```

VHD-Bootファイル選択・マウント

```bat
DISKPART> select vdisk file=D:\VHD\Win.vhd
DISKPART> attach vdisk
```

インストールに進む

```bat
DISKPART> exit
X:\sources> setup
```

[今すぐインストール]に戻るのでインストールを進める

インストールするパーティションの選択では仮想ディスクを選択するとインストールができない警告が表示されるが進めインストール完了

## 既存の VHD をネイティブブート可能にする方法

管理者権限で[コマンド プロンプト]起動
ブートメニューに表示される文字列を設定

```bat
bcdedit /copy {current} /d “Windows 7 ? VHD”
```

出力結果の[エントリは {yyyyyyyy-yyyy-yyyyy-yyyyy-yyyyyyyyyyyyy} に正常にコピーされました]のID({?}部分)をコピー

コピーしたIDを次の2つの{?}部分に入れて入力し完了

```bat
bcdedit /set {yyyyyyyy-yyyy-yyyyy-yyyyy-yyyyyyyyyyyyy} device vhd=[C:]\VHD\win7.vhd

bcdedit /set {yyyyyyyy-yyyy-yyyyy-yyyyy-yyyyyyyyyyyyy} osdevice vhd=[C:]\VHD\win7.vhd
```

## ブートメニューの文字列変更

現在の設定をバックアップし、設定を表示

```bat
REM 現在のBootメニューをDドライブにバックアップ
bcdedit /export "D:\bcdbackup"

REM 現在の状態を確認
bcdedit /v
```

表示された中から、変更対象のOSのidentifierを選択しコピーしたら、その値を指定し新しい名称を設定

```bat
REM 名称変更コマンド
bcdedit /set {コピーしたidentifier} description "新しい名称"

REM 反映の確認
bcdedit /v
```
## Windows10 のインストールISOから VHD-Boot できるようにする

### 環境

- HostOS: Windows10 (ver: 1607)
- ImageOS: Windows10 (ver: 1607)

### 操作

1. ディスクの管理で、VHDX ファイルを作成 (Eドライブにマウントされたとする)
1. Windows10 の ISOをマウント (Fドライブにマウントされたとする)
1. 内容を確認(Indexの番号) `Dism /Get-WimInfo /WimFile:F:\sources\install.esd`
1. 展開

```cmd
Dism /Apply-Image /ImageFile:F:\sources\install.esd /Index=1 /ApplyDir:E:\
```

または

```powershell
Expand-WindowsImage -ApplyPath E:\ -ImagePath F:\sources\install.esd -Index 1
```

> 参考
http://tby-zup.blogspot.jp/2012/09/windows-8-vhd.html
http://kentamac.hatenablog.com/entry/2015/08/05/100839
swiftでosxアプリ 〜 プロジェクト作成〜何か出すとこまで 〜

xcodeもswiftも初心者レベル。（昔やったことをすっかり忘れてるので。）
mac用のアプリ、osxアプリ(iosアプリじゃない)を作るために色々調べたメモ

第１段：プロジェクト作成〜ウィンドウを何か出すとこまで
第２段：[画像ファイルを表示する](http://qiita.com/tagosaku324/items/26ca8cfaebfa431aa97c)

# 開発環境
Mac OS X 10.11.6
Xcode 8.2.1
xcodeはAppStoreからインストール

# 1. プロジェクトを新規作成
- XCodeを立ち上げて 「Create a New Xcode Project」 選択![スクリーンショット 2017-03-14 16.00.41.png](https://qiita-image-store.s3.amazonaws.com/0/39911/8e10058b-18be-b197-6349-37fc7c05403a.png)

![スクリーンショット 2017-03-14 15.20.56.png](https://qiita-image-store.s3.amazonaws.com/0/39911/699848c6-15ff-a201-65d0-204065c2b5f7.png)

- macOSタブを選択、[Application]->[Cocoa]選択　
![スクリーンショット 2017-03-14 15.25.52.png](https://qiita-image-store.s3.amazonaws.com/0/39911/fc117b09-e143-a4b7-9f45-82708299aa8a.png)

- [Product Name]を好きなようにつける。[Language]Swiftを選択。
![スクリーンショット 2017-03-14 15.39.46.png](https://qiita-image-store.s3.amazonaws.com/0/39911/e89b0fcd-ba35-4cfc-0e81-aac963241803.png)

- 格納フォルダを決めて保存すれば、勝手に必要なファイルたちがつくられます。　
![スクリーンショット 2017-03-14 15.47.47.png](https://qiita-image-store.s3.amazonaws.com/0/39911/c92eabfe-9d4b-7ae4-48eb-dd6fd5e14139.png)
xcodeの画面はこんな感じ。今作ったプロダクトがたちあがってきます。
![スクリーンショット 2017-03-14 16.00.41.png](https://qiita-image-store.s3.amazonaws.com/0/39911/0db08ac3-8ed8-35cc-dad3-a524326586a8.png)

さて、準備はできたのでスクリプトを書いていきたいのですが、
何から手をつけたらよいのかわからない。
Storyboard　を使うとこからやっていこう。
昔の自分のメモ記事を参考に。古いけど。：[SwiftをXcodeで使ってみる](http://qiita.com/tagosaku324/items/4d0742a60e0aa840b9d5)

# 2.StoryBoardで作業する
- ナビゲータエリア「Main.storyboard」ファイルを選択
![スクリーンショット 2017-03-14 16.19.03.png](https://qiita-image-store.s3.amazonaws.com/0/39911/10070089-cb3a-81de-34ca-6e8fc9ad49f1.png)

これが、Storyboardを開いた状態。
エディタエリア(中央)に起動時に表示されるWindowがあり、Macのメニューバーがすでに表示されてる感じ。
![スクリーンショット 2017-03-14 16.26.11.png](https://qiita-image-store.s3.amazonaws.com/0/39911/2baf200a-5cc8-5d57-a509-2d6ded8e075e.png)

とりあえず、この状態で左上にある▶︎(再生)をクリックを押すとbuildが実行されて何も描かれていない、[Window]という画面が表示される。
![スクリーンショット 2017-03-14 17.21.02.png](https://qiita-image-store.s3.amazonaws.com/0/39911/9caf221a-31a9-ac53-ea92-3ec73657c506.png)
■（停止）をクリックすると画面は消える。

- Label部品を使って何か書いてみる。 
 1. ユーティリティエリア(右側)を表示。（青：表示）
 2. Object libraryを選択。（青：選択）
 3. 「Label」を検索
 4. Label部品を選択し、下側の画面にドラッグ

![スクリーンショット 2017-03-14 17.28.13.png](https://qiita-image-store.s3.amazonaws.com/0/39911/7f7eb205-aeb0-545a-9a90-9b570f177ca3.png)
 5. Label部品をダブルクリックして好きな文言に変更して、▶︎(再生)してみる
　![スクリーンショット 2017-03-14 17.59.29.png](https://qiita-image-store.s3.amazonaws.com/0/39911/0cd04014-d702-5aae-d76d-09c061abbc31.png)

macOSアプリのStoryboardはウィンドウが２つ表示されてるが
（上側:Window Controller　　下側：View Controller）
何か部品を配置するときは「View Controller」に設定していく。


参考
[【Xcode7】Storyboardを使ってMacアプリ開発に挑戦。](http://original-game.com/storyboard-mac-app/)
->初心者に優しいサンプル
[Swiftを使って初めてMacアプリを作ってみた](https://another.rocomotion.jp/14214058334402.html)
->画像を日付別に振り分けるサンプル
[Swiftを使ったMac OS Xアプリの開発【Storyboard偏】](http://qiita.com/AkkeyLab/items/a0c19aec9fdb726cd886)
->Windowへのパーツ配置と、ステータスバーに表示されるメニューの作成サンプル
[せっかく届いたTouch Barの使いみちが思い浮かばなかったのでPPAPでサンプルを作った](http://qiita.com/EnsekiTT/items/85c6109baa96ea409095)
->一歩先をいったサンプル
Web Speech APIで実際にしゃべる環境を調べてみた

Web Speech APIを使うとJavaScriptだけでしゃべらせることができる。おぉ凄い！今時はそんな事もできるようになったのか！とワクワクしたもののの、いざ試してみるとしゃべってくれたり、くれなかったり…どうも全ての環境でしゃべってくれる訳ではなさそうです。

というわけでどの環境ならしゃべってくれるのか調べてみました。

## どうやったらしゃべるの？

以下のようなコードでしゃべらせることができます。

```js
var u = new SpeechSynthesisUtterance();
u.text = "こんにちは";
u.lang = 'ja-JP';
u.rate = 1.0;
speechSynthesis.speak(u);
```

## テストコード

簡単ではありますが以下のようなコードを書いてみました。

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Speech Test</title>
</head>
<body>
<input type="button" id="enUS" value="Hello">
<input type="button" id="jaJP" value="こんにちは">
</body>
<script type="text/javascript">
document.getElementById("enUS").addEventListener("click", function(e) {
	if (typeof SpeechSynthesisUtterance == "undefined") {return}
	var u = new SpeechSynthesisUtterance();
	u.text = "hello";
	u.lang = 'en-US';
	u.rate = 1.0;
	window.speechSynthesis.speak(u);
});
document.getElementById("jaJP").addEventListener("click", function(e) {
	if (typeof SpeechSynthesisUtterance == "undefined") {return}
	var u = new SpeechSynthesisUtterance();
	u.text = "こんにちは";
	u.lang = 'ja-JP';
	u.rate = 1.0;
	window.speechSynthesis.speak(u);
})
</script>
</html>
```

書いたコードからちょい変更したものをgithubに登録して、 https://hachisukansw.github.io/speech-test/ で試すことができるようにしてみました。

## 結果
ブラウザは最新のものとします（2017/3/15現在）。

|OS等|ブラウザ|en-US|ja-JP|メモ|
|:--|:--|:--:|:--:|:--|
|Ubuntu12-16|Chrome|○|○|
||Firefox|×|×|
|Win10(14393)|Chrome|○|○|
||Firefox|○|○|
||Edge|×|○|
|Win7|Chrome|○|○|
||Firefox|○|×|
|Android5-6|Chrome|○|○|
|Mac OS X(10.11.6)|Chrome|○|○|3/15追加|
||Safari|○|○|3/15追加|
|iOS10.2(iPad)|Chrome|○|○|マナーモード不可、3/15変更|
||Firefox|○|○|マナーモード不可、3/15変更|
||Safari|○|○|マナーモード不可、3/15変更|

手元にAndroidとMacがないこともあり思ったよりも試すことができる環境がなくてすみません。iOSはレンダリングエンジンが全て共通らしいのでひとつ試せば全て同じ結果になるようです。それを除けば、今のところ安定して使えそうなのはGoogle Chromeというところでしょうか。

Web Speech API のテストプログラムは以下のURLで公開しています。
https://hachisukansw.github.io/speech-test/

（追記）
3/15 Mac OS Xの情報を頂いたので追加しました。
3/15 iPadでマナーモードになっていたため解除したところしゃべることが確認できました。私の環境ではマナーモードでもGoogle ChromeでYoutubeの音声が再生されるため関係ないと思っていたのですがWeb Speech APIの方は関係するようです。

## 関連リンク

- [いろのなまえ](http://www.jsrun.it/hachisuka_nsw/iro-no-namae) - 色の名前を音声でしゃべって教えてくれるウェブアプリ
Windows10 64bit で未署名ドライバのインストールに必要な手順


AndroidのデバッグやROMいじりなどで必要だったので、手順をまとめておきます。Surfaceでの作業例(デバッグ専用機とすることを想定)を挙げますが、適宜お持ちのPC環境で読み替えてください。これを知っていれば、ドライバのためだけにWindows7をわざわざ準備する必要はありません。


## 1. BitLockerの暗号化を解除(推奨)
- BitLockerの暗号化がされている場合は、手順4の起動の際に「暗号化キー」を入力するよう言われます。暗号化を解除するか、暗号化キーを控えます。
- BitLockerの管理画面へのアクセスは、以下の通り。

~~~
コントロール パネル\システムとセキュリティ\BitLocker ドライブ暗号化
~~~


## 2. UEFIのセキュアブートを無効にする(使っているマシンによって手順が異なります)
- MBR形式でOSインストールした場合はセキュアブートは最初から無効になっています。この項目を無視してください。
- OSをテストモードにするために必要です。
- マシンによっては、CSMやFast Bootの設定も確認が必要です。


### Surfaceの場合の手順
1. Surface をシャットダウンします。
2. Surface の音量を上げるボタンを長押しして、同時に、電源ボタンを押して離します。
3. Surface のロゴが表示されたら、音量を上げるボタンを離します。
4. UEFI メニューが表示されます。
5. Secure Boot Control を [Disable] に設定します。
6. ブート画面の背景が赤くなります。


## 3. テストモードに移行する
1. コマンドプロンプト(cmd.exe)を管理者権限で起動します。
2. 次のコマンドを入力

~~~
bcdedit /set TESTSIGNING ON
~~~

※ 元に戻す場合は、上記コマンドをOFFとします。


## 4. 「ドライバー署名の強制」を無効化する
1. [スタートメニュー]-[設定(ギアマーク)]をクリックします。
2. [更新とセキュリティ]を選択します。
3. [回復]タブを選択します。
4. [オプションの選択]画面で、[トラブルシューティング]を選択します。
5. [トラブルシューティング]画面で、[詳細オプション]を選択します。
6. [詳細オプション]画面で、[スタートアップ設定]を選択します。
7. [再起動]をクリックします。
8. BitLockerが有効な場合、ここで暗号化キーの入力が求められます。
9. PC再起動後に[スタートアップ設定]画面が出現するので、[7]キーを押し、「7)ドライバ署名の強制を無効にする」を適用させた状態で起動します。


## 5. スマートスクリーンの無効化
1. 「コントロールパネル」を起動します。
2. [システムとセキュリティ]-[セキュリティとメンテナンス]を開きます。
3. 左ペインの「Windows SmartScreenの変更」をクリックします。
4. 「何もしない(Windows SmartScreenを無効にする)」を選択し、「OK」をクリックします。


## 6. 未署名ドライバのインストール
- インストーラーの指示に従えばインストールできるようになっています。
- インストールの途中でWindowsのセキュリティ警告の画面が出ますが、設定が正しければ「このドライバーソフトウェアをインストールします」を選択可能な状態になっています。


## 注意点
- これらの設定は、便利な反面脆弱性となり得ますので、用が済んだら元に戻しておきましょう。
- インストール後にSmartScreenを有効にしてもドライバは動作します。それ以外を戻すと動かなくなる場合があります。


## 設定を元に戻したいとき
逆の手順で戻してください。
Laravelでファイルアップロードしようとしたら怒られた時の対処方

## 環境
・CentOS 6.8
・nginx 1.10
・PHP 5.6
・Laravel 5.2

## 症状
Laravelで作ったシステム上で、単純にファイルアップロードしようとしたら怒られました。

```
413 Request Entity Too Large
```
はい、これはあれですね、nginx と php の設定が漏れてますねスミマセン…と思いましたが、なぜかちょっと手こずってしまいました。

## 原因
nginx と PHP の、ファイルアップロードサイズ上限が小さかったからです。

## 解決策
nginx と PHP のアップロード出来るファイルサイズの上限を大きくします。

```/etc/nginx/default.conf
server{
    listen 80;
    server_name your.domain;
    ..(省略)..
    client_max_body_size 50M;
    ...
```

```/etc/php.ini
memory_limit = 128M
post_max_size = 50M
upload_max_filesize = 50M
```

容量は適宜変更してください。
で、nginxをリスタートで行けるだろう！

```
# service nginx restart
Stopping nginx:         [  OK  ]
Starting nginx:         [  OK  ]
```
と思ったら、今度はこんなエラーが。

```
TokenMismatchException in VerifyCsrfToken.php line 46
```

あれ…？と思ってここで少し考えてしまいました。
TokenMismatch……？？と思ったんですが、なんのことはない、php-fpm のリスタートを忘れてただけでした。

```
# service php-fpm restart
Stopping php-fpm:      [  OK  ]
Starting php-fpm:      [  OK  ]
```

だめだなぁ、まだ慣れてなくて…。
少し時間を無駄にしてしまいました。
nginx と php-fpm の再起動はセットでやりましょうという教訓です…。

## 参考
http://d.hatena.ne.jp/knowledgetree/20110217/1297939617
http://www.go-next.co.jp/blog/web/26477/
FrameworkにCocoaPodsでライブラリを入れてみる

Frameworkを作ることになりましていろいろ調べながらやってみました

## 参考リンク
[Swift で Framework を作ってみる使ってみる](http://qiita.com/codelynx/items/1ff68b7db15bd9d233b7)
[自作static frameworkをまとめてSDK化しObjCとSwiftで使う](http://qiita.com/y_hakutaku/items/c9fe3f7dfedb51dc5708)
[Xcode7.3 & SwiftでつくるCocoaTouch Framework（作成編）](http://qiita.com/mfks17/items/b1ae615744e311a7f9eb)

上記の方々が作り方をわかりやすく書いていただけているので、割愛w

題名の通り、自作のFrameworkでCocoaPods使って見たのですが、ハマったところがあり、情報共有と、よりよい解決策があればご教授いただければと....

## はまったところ

|        |       |
|:-----------------|------------------:|
| FrameworkにCocoaPodsで追加したライブラリ| MyLibrary |
| Framework| MyFramework |
| Frameworkを使用するプロジェクト| MyProject |

とりあえず、上記の表のように名前を決めておきます

### Frameworkにライブラリの追加
ここは、CocoaPodsを使用するので皆さんご存知かと思いますが....

```
$ pod init
$ vi PodFile
$ pod install
```

このような感じで、追加していきます（割愛しすぎですみません

そこで、 `pod install` 後にこのようなwarningがでてきます...

```
[!] The Podfile contains framework targets, for which the Podfile does not contain host targets (targets which embed the framework).
If this project is for doing framework development, you can ignore this message. Otherwise, add a target to the Podfile that embeds these frameworks to make this message go away (e.g. a test target).
```

（英語苦手なのですが）targetがないと.....でも、framework作っているなら、無視してOKと言ってそうなので無視していきます:confounded:

### Framework作成
XcodeでFrameWorkをビルドします
そうすると、左メニューの `Product`内に `MyFramework.framework` ができますので、
`右クリック -> showInFinder`で見に行きます

## Frameworkの使用
`MyProject`に追加します
`MyProject -> Target -> MyProject -> General`の`Embedded Binaries`に`MyFramework.framework`を追加します

一旦、MyProjectをビルドしてみると、`MyLibrary`のリンク関連でエラーが出てきてしまいます
これにはまりました.....

今のところ解決策は、`MyLibrary.framework`を`MyProject`にも追加する方法しか見つかってないです:head_bandage:
プロジェクトフォルダを作るバッチファイル

毎回同じような作業ディレクトリを作るのは面倒と思っていて今まではautomatorで右クリックでサービスを選択してプロジェクトのディレクトリが作成されるようにしていたけどもそれも面倒になってきて最近シェルスクリプトって便利だなって思ってそっちでしてみました。

_project_dir_create.command バッチファイルをつくる。
※ファイル名は適当です。アタマに[ _ ]がついているのはどんな名称をつけても上にくると思ってつけただけです。

```bash
#!/bin/bash
DIRNAME=$(dirname $0)
FILENAME="${DIRNAME}/_custom_folder.txt"

cd $DIRNAME
tput setaf 6 && echo "プロジェクト名を入力してください。"
read PROJECTNAME
mkdir $PROJECTNAME
cd $PROJECTNAME
cat $FILENAME | while read LINE;do
  mkdir $LINE
done

exit
```
バッチファイルと同じ階層に _custom_folder.txt という名称のファイルを作って以下のような下層に配置したいディレクトリの名称をつけておけばバッチファイルをクリックするとプロジェクト名を指定してその中に以下のフォルダを作成します。

```text

00_構成
01_サーバー環境
02_デザイン
03_コーディング
・
・
・

```
Windows　ファイル・フォルダ着色可能なエクスプローラーソフトについて

レベルの低い質問で恐縮ですが、アイデアをご教示ください。

Windows10Homeを利用しています。
ファイルシステムは普通のツリー形式であり、
フォルダが多段になっていて、ツリー末尾は多数のファイル群です。

必要にせまられて、とあるフォルダ配下の各ファイルを全部を
チェックしなくてはならなくなりました。

この際、エクスプローラーの表示画面において、
この色のファルダは配下のファイルは既に完了していると
いう風に着色で進捗が見えれば良いと思った次第です。

このような機能をもったファイラー（フリー、シェアウェア）は
無いでしょうか？

よろしくお願いします。
Viewに付与したOnClickListenerを解除する方法

# 何がやりたかったのか

画面全体を覆うViewにOnClickListenerを付与して、チュートリアル操作表示を消したかった。
消した後は、後ろのViewに対してタッチ・スクロール操作が効くように。

### 環境

端末：Android5.0
開発環境：Android Studio2.3

## やってみたこととその結果

### setVisibility(View.INVISIBLE)

だめ。**クリックを拾ってしまう。**

### setOnClickListener(null)

だめ。クリックは拾わないのだが、**背後のViewに対するタッチイベントが無効になってしまう。**

### Viewそのものを消す

いい。xmlを分割してチュートリアル操作表示を分離できるし、最終的な動作も期待通りだ。しかし、上の方法を推奨している記事等を見ていて首を傾げる俺がいた。

## 最終的な解

### setClickable(false)

成功。期待通りの動作になった。
Clickableをxmlで指定してなくても動作する。
Mac上のPureDataでMIDIを鳴らす。

# 実行環境
Mac os sierra

# OS上での設定
Audio MIDI設定を開き、ウィンドウ -> MIDIスタジオを表示を選択する。
<img width="1440" alt="スクリーンショット 2016-12-15 11.48.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/70879/4f6ab463-7f81-8b4b-395c-5779c74b228e.png">

このような画面になるので、IACドライバのアイコンをクリックして、有効にする。
<img width="1440" alt="スクリーンショット 2016-12-15 11.48.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/70879/d6d1426e-d457-794e-b522-a4709c53ded4.png">

IACドライバのアイコンをダブルクリックしてプロパティを開き、[+]をクリックしてバス１を追加する。
<img width="1440" alt="スクリーンショット 2016-12-15 11.49.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/70879/47ca985b-b427-bec9-4022-7e6d3c187ad5.png">

# PureData
## インストール方法(brew cask)
```
$ brew cask install pd-extended
```
## 設定
メディア -> MIDI設定を開く。
<img width="1440" alt="スクリーンショット 2016-12-15 11.50.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/70879/e33385da-6e4d-94de-3f3b-032944e00f74.png">

入力デバイスと出力デバイスを「IACドライバ　バス1」にする。
<img width="1440" alt="スクリーンショット 2016-12-15 11.50.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/70879/3cdd9932-91c0-4247-75c6-6facad9d645c.png">

そして、PD上でMIDIの操作を行う前にGarageBandを起動しておく。起動しないと音がでない。
<img width="1440" alt="スクリーンショット 2017-01-15 16.23.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/70879/d74b2ff1-479d-c3a1-059c-d5417510bdd7.png">
MacにHomebrew入れてdex2jar動かすとこまで

Macでdex2jar動かしたかったけど準備が面倒そうだったので
パッケージマネージャーのHomebrewをまずインストール

公式：https://brew.sh/index_ja.html

ターミナルから↓を実行
```
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

==> Installation successful!

とか表示されてたらたぶんオッケー

```
$ brew doctor
```
として

```
Your system is ready to brew.
```

と出たら準備おｋ

続いてHomebrew経由でdex2jarをインストール。同じくターミナルから↓を実行

```
$ brew install dex2jar
```

classes.dexファイルを引数に実行。パスが通ってなければ通すかフルパスで

```
d2j-dex2jar classes.dex
```
denite.nvimのhighlight新オプション

[denite.nvim](https://github.com/Shougo/denite.nvim)

uniteが開発終了になりまして、deniteに割りとすぐさま移行したのですが一個悩みがありました。
検索して絞り込んでいく際に文字列がhighlightされるのですがschemeによってはえらーくみづらくなったのです。

# BEFORE

![sc_before.png](https://qiita-image-store.s3.amazonaws.com/0/41782/79ab7bf6-96e6-a3a8-97fa-e4818ca9c8cb.png)


み、みづらい…
エンジニア的に目は命なので、やむを得ず相性の良い[gruvbox](https://github.com/morhetz/gruvbox)を使っていたりしたのですが、
deniteのrepositoryを覗いたら、新たなオプションが追加されていました

```
Q: I want to change the cursor line color in Denite buffer.

A: denite uses 'cursorline' feature.
So you can change the color by |hl-CursorLine| highlight or
|denite-options-highlight-mode-{mode}|. >
	Denite file_rec -highlight-mode-insert=Search

```

キタコレ！

さっそくmyvimrcに追加

```vim
nmap <silent> <Leader><Leader> :<C-u>Denite file_rec -highlight-mode-insert=Search<CR>
```

#AFTER

![sc_after.png](https://qiita-image-store.s3.amazonaws.com/0/41782/45b9d79b-cdfd-8ff1-a67f-f84e493538bb.png)


これこれ！これですよ！
これでまた新たなcolorscheme探しの旅を始められます。
ありがとうShougoさん。
Makeup like a superstar: Deep Localized Makeup Transfer Network読んだ

https://www.semanticscholar.org/paper/Makeup-like-a-superstar-Deep-Localized-Makeup-Liu-Ou/94b6300685d11e583fd35de555d8eaf996cf3eda
IJCAI 16

<h1>モチベーション</h1>
・ある顔に対して、似合いそうなメイクをレコメンドしたい＆そのメイクをシミュレートしたい
<img width="363" alt="スクリーンショット 2017-03-14 16.17.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/170131/61ebf5df-2f57-d1a1-a43d-6112b9fcc09e.png">
・(i)でメイクのレコメンド、(ii)でレコメンドしたメイクをtransferする
(iiの部分が気になったので読んだ)

<h1>手法</h1>
・(i)のレコメンドの部分は学習済みのモデルを使って似ている顔の人をレコメンドするだけ
・（ii)
まず、FCNで顔をSegmentationする
<img width="371" alt="スクリーンショット 2017-03-14 16.27.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/170131/25c6a7c7-9169-fb87-61c5-763a192c13b2.png">

で、パーツ毎にtransferしていく
・Eye Shadow
<img width="441" alt="スクリーンショット 2017-03-14 16.37.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/170131/9fd848f1-97f1-c9b6-9d04-170c4067dc09.png">

sr : referenceの目のbinary mask
sb : before-makeupの目のbinary mask
R(s'r) : referenceのeye shadow
A(s'b) : after-makeupのeye shadow
Ω : H×W×C次元→d次元にする FCNの中間層の出力
つまり、d次元空間でR(s'r)との距離が近くなるようなAを求める
CNNの中間層をどういじるとreferenceのeye shadownっぽくなるかを求めてる

(referenceのメイクがbefore-makeupにtransferされてafter-makeupになる)

<img width="417" alt="スクリーンショット 2017-03-14 16.49.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/170131/82cfd600-4e0b-2fba-9279-2ade777c18a3.png">

・Lip Gloss
・Foundation
このへんもEye Shadowとだいたい同じ考え方だとおもう

<img width="263" alt="スクリーンショット 2017-03-14 16.53.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/170131/9b508978-e8be-320b-8d9c-1d3bb1d3036d.png">


<h1>結果</h1>
<img width="403" alt="スクリーンショット 2017-03-14 17.00.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/170131/7b4ddab3-d938-a9f2-24d7-9ed9bc1d5d87.png">
他の手法と比べてもいい感じになった
<img width="460" alt="スクリーンショット 2017-03-14 17.01.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/170131/20d15eef-b45e-b473-c145-cc0a9bb62d3c.png">
アンケート取ってもbetterだった


<h1>感想</h1>
・手法としては普通っぽかったので途中からちゃんと読んでない、なんとなく理解した
・多分Segmentationがうまくできてるから出力がきれいなんだと思う
Androidで動くBASICでJSのconsole.logやエラーを表示する方法

BASIC!は、Androidで動くBASIC インタープリタです。詳しくは以下をどうぞ。

* [AndroidでBASICを使う](http://qiita.com/basictomonokai/items/25bcb21ec69c00e9ad23)

BASIC!にはHTMLモードというモードがあり画面表示にHTML,javascript,cssを利用できますがJSのconsole.logやsyntaxエラーをAndroidの実機で表示する方法を見つけました。パソコン等と接続する必要はありません。


##1.表示する方法の概要

BASIC!でOSコマンドが送り込めるsystem命令を使いlogcatを送り込み、結果から"chromium"を含む文字列を抽出するだけです。

##2.コード

短いですがさっそくコードです。ポイントは以下

* html.load.urlでHTMLファイルを開いて閉じます
* syatem.witeでlogcatを発行
* system.READ.READYでOS応答有無をチェック
* system.READ.LINEでOS応答を行読込
* is_in関数で"chromium"を含む行を抽出、print
* console.saveで出力した内容をファイルへ出力

``` サンプルコード
console.title "logcat"

! HTML MODE
html.open

html.load.url "jstest2.html"

pause 3000

html.close

pause 1000

PRINT "***logcat start***"

r$="logcat"

! os command mode
system.OPEN


! write the command
system.WRITE r$

! Give system time to respond
PAUSE 500

loop:

! check for a response
system.READ.READY ready

! if no input, do next command
IF !ready THEN GOTO loop

! read responses
DO
system.READ.LINE l$
!PRINT l$
if is_in("chromium",l$) > 0 then
   PRINT l$
endif
system.READ.READY ready
UNTIL !ready

pause 1000


PRINT "***logcat ended***"

console.save "logcat.txt"

end
```

##3.実行結果の例

* 16964はプロセス番号
* 177,189,182は行番号

``` 実行結果
***logcat start***
I/chromium(16964): [INFO:CONSOLE(177)] "basicjslog001test console", source: file:///storage/emulated/0/rfo-basic/data/jstest2.html (177)
I/chromium(16964): [INFO:CONSOLE(179)] "basicjslog002test console part2", source: file:///storage/emulated/0/rfo-basic/data/jstest2.html (179)
I/chromium(16964): [INFO:CONSOLE(182)] "basicjslog003test console err", source: file:///storage/emulated/0/rfo-basic/data/jstest2.html (182)
***logcat ended***
```

##4.まとめ、その他

* パソコンと繋がなくてもconsole.logのチェックは可能
* HTMLファイルを表示してlogcatを送り込むだけ
* 非ルート端末でも実行可能
* android5.1のタブレットで動作確認しました

以上です。
VC++の自作プロジェクトでKinect v2の骨格情報取得を行う方法

# 概要
この記事は、Kinect v2のサンプルプログラムを動かしてはみたものの、結局は自分でプロジェクト作ってカスタマイズできるようにしたいっていう人に向けてのものです。
Kinect SDK 2.0をインストールしているという前提で話を進めていきます。

#環境, 準備
Visual Studio 2013
Kinect v2(USB3.0が搭載されているPCでないと動きません。)

#参考にしたサイト
骨格情報の取得には、下記のコードを参考にしました。

[サンプルコード(Kinect2Sample/sample/Body at master · UnaNancyOwen/Kinect2Sample)](https://github.com/UnaNancyOwen/Kinect2Sample/tree/master/sample/Body)

#プロジェクトの作成

まず、Visual Studioで新しくプロジェクトを作っていきます。

1. 新規プロジェクト作成
2. 「Visual C++」のタブから「空のプロジェクト」を選択(ここではプロジェクト名は「KinectApplication」としておきます)

#サンプルコードのダウンロード

上記のサンプルコードをダウンロードしますが、実際にはリポジトリ(以下のリンク)ごとダウンロードする形になります。
[Kinect for Windows SDK v2 Sample Program](https://github.com/UnaNancyOwen/Kinect2Sample)
ダウンロードしたzipファイルを解凍し、解凍したフォルダの/sample/Bodyのディレクトリにサンプルコードが入っています。

#プロジェクトの設定

1. Visual Studioの「プロジェクト」タブから「KinectApplicationのプロパティ」をクリック
2. 「構成プロパティ」->「全般」->「VC++ディレクトリ」を開く
3. 「インクルードディレクトリ」に環境変数でKinectSDKが設定されているのであれば、「$(KINECTSDK20_DIR)¥inc」, されていなければ「(SDKがあるディレクトリ)¥inc」と新しく追加してください。
4. 「ライブラリディレクトリ」に「$(KINECTSDK20_DIR)¥Lib¥x86」を追加する。
5. 「構成プロパティ」->「リンカー」->「入力」を開く
6. 追加の依存ファイルに「Kinect20.lib」を追加
7. NugetでもなんでもいいのでOpenCVをインストールし、プロジェクトに入れる

#プロジェクトへのソースコードのインポート
1. 先ほどダウンロードしたファイルの/sample/Bodyの中身を全て「KinectApplication」のディレクトリにコピーする。
2. プロジェクトのソリューションエクスプローラーからソースコードを右クリック
3. 既存の項目を追加をクリックし、「app.cpp」, [main.cpp]を選択する。
4. ソリューションエクスプローラーからヘッダーファイルを右クリック
5. 既存の項目を追加をクリックし、「app.h」, 「util.h」を選択する。

#実行
プロジェクトの実行をすると、以下のように画像が出力されるはずです。

![123.png](https://qiita-image-store.s3.amazonaws.com/0/147934/8fe178eb-e035-400d-56a5-9050b28450c4.png)


#まとめ
Kinect SDKに入っているC++のサンプルコードはwindowsプログラミング色が強く扱いが難しいので、プロジェクトを作り直して自分なりに扱いやすいようにしました。
研究の際などの処理などを追加しやすくなると思うので、是非お試しください。
unsigned charの足し算

```c:a.c
typedef unsigned char u8;

int checksum(const u8 *buf, size_t len)
{
	u8 sum = 0;
	size_t a;

	for (a = 0; a < len; a++)
		sum += buf[a];
	return (sum == 0);
}
```

dmidecodeのutil.cの内容だが、コンパイル時に警告を出すようにしていると、
以下のような警告が出てくる。

```
warning: conversion to ‘u8 {aka unsigned char}’ from ‘int’ may alter its value [-Wconversion]
         sum += buf[a];
```

u8同士を計算しているように見えるが、計算するときに暗黙でintで計算される。
このため、計算結果（int）から 、sum（u8）に変換すると値が変更されることがあります、と警告される。

警告を出さないように、以下のようにしてみた。


```c:a.c
int checksum(const u8 *buf, size_t len)
{
	int sum = 0;
	size_t a;

	for (a = 0; a < len; a++)
		sum += buf[a];
	return ((0xff & sum) == 0);
}
```

足される側のsumを、最初からintにしておけば、計算結果もsumもintなので、警告は出ない。
ただ、sumがintになっているので、最終的に返す結果が異なってしまう。

1バイトから桁あふれした部分の値があると、1バイト分が0であっても、falseが返ってしまうので、
0xffとのandを取って、1バイト分が0なら、trueが返るようにした。

---

指摘の通り、以下で問題なかったです。ありがとうございます。

```c:a.c
typedef unsigned char u8;

int checksum(const u8 *buf, size_t len)
{
	u8 sum = 0;
	size_t a;

	for (a = 0; a < len; a++)
		sum = (u8)(sum + buf[a]);
	return (sum == 0);
}
```

以下にも同じ内容がありました。。。
http://stackoverflow.com/questions/21335452/gcc-conversion-warning
nw.jsのインストールについて

以下のようなサイトなどを参考にしつつ、nw.jsをインストールしようとしましたが、上手くいきません。

http://qiita.com/castaneai/items/92df0535b9421eb6ebfc

環境は、vagrantを用いたubuntu64でやっております。nodeのバージョンはv4.2.3で、npmのバージョンは4.4.2です。

まず適当なディレクトリ(nw_test)を作り、その中に適当なhtmlファイル(index.html)を作ります。

```html:index.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>初めてのnw</title>
</head>
<body>
    <h1>初めてのnw</h1>
</body>
</html>
```

そのディレクトリで、以下のコマンドを実行します。

```bash
$ npm init
entry point (index.js) <== ここで index.html と答える
```

ここまではうまくいきます。

次に、以下のコマンドを実行すると次のようなエラーが出ます。

```bash
$ npm install --save nw
```

----

```
npm WARN nw_test@1.0.0 No description
npm WARN nw_test@1.0.0 No repository field.
npm ERR! path /home/vagrant/workspace/nw_test/node_modules/seek-bzip/bin/seek-bzip-table
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall chmod
npm ERR! enoent ENOENT: no such file or directory, chmod '/home/vagrant/workspace/nw_test/node_modules/seek-bzip/bin/seek-bzip-table'
npm ERR! enoent ENOENT: no such file or directory, chmod '/home/vagrant/workspace/nw_test/node_modules/seek-bzip/bin/seek-bzip-table'
npm ERR! enoent This is most likely not a problem with npm itself
npm ERR! enoent and is related to npm not being able to find a file.
npm ERR! enoent 

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/vagrant/.npm/_logs/2017-03-14T07_38_29_980Z-debug.log
```

node_modulesの中を見ても、nwは入っておりませんし、package.jsonに

```
"start": "nw"
```

を書き加えて、

```bash
$ npm start
```

としても、

---

```
> nw_test@1.0.0 start /home/vagrant/workspace/nw_test
> nw

sh: 1: nw: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! nw_test@1.0.0 start: `nw`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the nw_test@1.0.0 start script 'nw'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the nw_test package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     nw
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs nw_test
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls nw_test
npm ERR! There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/vagrant/.npm/_logs/2017-03-14T07_46_45_276Z-debug.log
```

とのエラーが出てしまいます。

他の方法も色々と試したのですが、自力では解決できませんでした。どなたか、教えていただければ幸いです。
サーバの時刻で補正するJavaScriptモジュール

何かしらの理由でサーバ側を一切弄れない状況において、サーバ側の時刻で正確な時刻に補正するモジュールを作成した。
ローカル端末の時刻が正しくないときを考慮したい場合に利用する。

下記コードは、vue-cliを用いてビルドしたソースをフロント側で使用することを前提にしている。

```javascript
export default class ServerClock {
  offset = 0
  getted = false

  getDate = function (force = false) {
    if ((!this.getted) || force) {
      this._setOffset()
    }
    return this._getDate()
  }

  _setOffset = function () {
    var previous = new Date()
    var serverDate = this._getServerDate()
    var ended = new Date()

    var mean = Math.floor((ended.getTime() - previous.getTime()) / 2)
    var localTime = ended.getTime() - mean

    this.offset = serverDate.getTime() - localTime

    this.getted = true
  }

  _getServerDate = function () {
    var r = new XMLHttpRequest()
    if (!r) {
      return null
    }
    r.open('HEAD', '#', false)

    // ブラウザにキャッシュさせない
    r.setRequestHeader('Pragma', 'no-cache')
    r.setRequestHeader('Cache-Control', 'no-cache')

    r.send(null)
    return new Date(r.getResponseHeader('Date'))
  }

  _getDate = function () {
    return new Date(Date.now() + this.offset)
  }
}
```

上記モジュールを以下のようにして使用する。

```javascript
import ServerClock from './ServerClock.js'

serverClock = new ServerClock()
timeNow = serverClock.getDate()
```
Python3でランダムなパスワードを生成する(サンプル)

#Python3でランダムなパスワードを生成するサンプルです。

10文字の長さのランダムなパスワードを生成します。

```python:randompwd.py
#!/usr/bin/env python3

from random import randint
#パスワードに利用する文字の一覧
chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/!$%&'()=~|@`[]{}*+<>?_;:,.\\"

len = len(chars)
#パスワードの長さはとりあえず10文字
for i in range(0, 10):
  pos = randint(0,len-1)
  print (chars[pos], end="")

```
Ruby版のサンプルは[こちら](http://qiita.com/shimarisu/items/e12cd08307ce62b5239a)
CentOS6.7にImageMagick7.0.5をyumでインストールする

備忘録

# コマンドをコピペする作業

## リポジトリを追加

```
yum install epel-release
wget http://rpms.famillecollet.com/enterprise/remi-release-6.rpm
rpm -Uvh remi-release-6.rpm
```

## ImageMagickが入っているか確認

```
yum list --enablerepo=remi,epel | grep Image
```
## 7系をインストール（ghostscriptは8.7が入りました）

※ ImageMagick でインスコすると、６系が入る

```
yum list --enablerepo=remi ImageMagick7 ImageMagick7-devel
yum install --enablerepo=remi ImageMagick7 ImageMagick7-devel
```

# 参考
[「ImageMagick」に脆弱性！対応版にアップデートしよう](http://www.pletk.com/imagemagick.html)
AlamofireとResultの併用方法 in Swift 3

AlamofireとResultが併用できない理由は以下の記事を参照。
http://qiita.com/obi_yuta/items/ad386ba7b71c5102f1c3 
上記記事に記載の

```swift:ResultResult.swift
import Result

struct ResultResult<T, Error : ErrorType> {
    typealias Result = Result<T, Error>
}
```
は、Swift 3では使えません。

ErrorTypeをErrorに直しても、以下のようにエラーが出ます。
![Screen Shot 2017-03-14 at 16.49.31.png](https://qiita-image-store.s3.amazonaws.com/0/41274/617aee58-3723-07fe-336e-95227e7b0cc0.png)

以下で対応できます。

```swift:ResultResult.swift
import Result

typealias ResultResult<T, Error: Error> = Result<T, Error>
```
入力された市区町村名を正式名に修正したい

## やりたいこと

・Gomix使ってみたい
・市区町村欄に「鶴見区」と入力された場合には、自動的に「横浜市鶴見区」になって欲しい
・「保土ヶ谷区」→「保土ケ谷区」といった表記ゆれの修正もできるようにしたい。

## 制限事項

以下が入力されたら間違うかもしれないけど、しょうがない

* 神奈川県南区
 - 神奈川県相模原市南区
 - 神奈川県横浜市南区

* 大阪府西区
 - 大阪府大阪市西区 
 - 大阪府堺市西区

* 大阪府北区
 - 大阪府大阪市北区 
 - 大阪府堺市北区

## 実現方法

+ 詳しくはこちら
  + https://glitch.com/edit/#!/join/7f8dd759-3102-49bd-9baf-7fb1ed629fba
Rubyでランダムなパスワードを生成する(サンプル)

#Rubyでランダムなパスワードを生成する

ランダムなパスワードを生成するサンプル。

```ruby:randompwd.rb
#!/usr/bin/env ruby

#パスワードに利用する文字の一覧
chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/!$%&'()=~|@`[]{}*+<>?_;:,.\\\""
len = chars.length
#とりあえず10文字
10.times do
  pos = rand(0..len-1)
  print chars[pos]
end
```
Python3版のサンプルは[こちら](http://qiita.com/shimarisu/items/e1dae18ddfe2b7c16c2f)
zabbixのグラフに枠線をつける方法

zabbixのデフォルト設定ではグラフに枠線がないため、スクリーンで複数のグラフを並べた時見にくかった。
そこでグラフに枠線をつけて見やすくしてみました。

#CSS
CSSではウェブページがスクリーンに表示される際の色・サイズ・レイアウトなどの表示スタイルについて指定されています。ZabbixのWEBインターフェースもまた同様で、cssファイルに背景色などの情報が記載されています。
このファイルを修正することでグラフに枠線をつけたりすることもできます。


#設定ファイル
/var/www/html/zabbix/styles/blue-theme.css
※ディレクトリ構成は環境によって異なると思います

#設定変更箇所

```
変更前
a img {
  border: none;
  vertical-align: top; }

変更後
a img {
  border: 1px #000000 solid;
  vertical-align: top; }
```
#説明
Zabbixではimgタグを使ってグラフを表示しております。
上記の箇所を修正することでグラフのレイアウトを変更できます

borderプロパティでは、線のスタイルや太さ、色を指定しています。
上記の例では「1px」かつ「黒色」かつ「1本線」を表示するという内容になっています
Babel、ESLintが変換・検証してくれないのはシンボリックリンクが原因だった

# 結論

JavaScriptファイルをシンボリックリンクで呼び出している場合は、リンク元のフォルダにも`.babelrc`、`.eslintrc`を置く必要がある。

# 前提：ローカルに置いたファイルは変換してくれる

とりあえず動作確認をするために簡単なES2015形式のスクリプトを書いてみました。

```javascript
const hoge = 'hoge';
```
下記のように変換されたのでインストール成功したと思ったのです。

```javascript
var hoge = 'hoge';
```

# Babel、ESLintが設定を無視する

テストは問題なかったので俺俺JSライブラリを`import`してみたらBabelは変換してくれないし、ESLintは設定を無視されました。

## 理由はシンボリックリンクだった

テストで使ったファイルを俺俺JSライブラリフォルダに置いてみました。このファイルはBabelもESLintも意図した動作をしてくれたものです。しかしBabel、ESLint共に意図した動作をしてくれません。どうやら**シンボリックリンクについては設定が及ばないようです。**

Twitterで教えてくれた親切な方がいました。ありがとうございます！
>実態のある場所に .eslintrc ファイルがあれば OK です。

# 結論再び：シンボリックリンクフォルダの中にも設定ファイルを置く

## 設定はシンボリックリンクでもOK

設定ファイルは共通にしたいので、マスターをひとつ作ってシンボリックリンクを置けばOKです。

```
+ app.js
+ oreore_lib/ ← シンボリックリンク。実体は別の場所
  + hogehoge/
    + .eslintrc ←各フォルダに設定を置く。
    + .babelrc ←設定ファイルはシンボリックリンクでもOK
    + hoge.js
  + foo/
    + .eslintrc
    + .babelrc
    + bar.js
```

## フルパスでフォルダを指定する

プリセットモジュールの場所をフルパスで指定する必要がありました。`node_modules`の**場所は環境によって異なります。**自分はグローバルにインストールしたものを使っています。

```json:.babelrc改変前
{
    "presets": ["es2015"]
}
```

```json:.babelrc改変後
{
    "presets": ["/Users/dada/.nodebrew/current/lib/node_modules/babel-preset-es2015"]
}
```

# 意外と情報が無い

シンボリックリンクを使う人が少ないのか、検索してもこの情報が出てきませんでした（それとも常識なのか？）。

そんなわけで些細な情報ですが残しておきたいと思います。
WordPressのカテゴリー、カスタムタクソノミーを細かく設定できる『Adjust Admin Categories』

WordPressでカスタムタクソノミーを使うとき、Webサイトの設計上、次のようなルールを定めることがあります。

- 選択を必須にしたい
- 1つだけ選択できるようにしたい

この時、JavaScriptによるカスタマイズなどでラジオボタンに変えたりすることがありますが、これを簡単に設定できるプラグインがありました。

- [Adjust Admin Categories — WordPress Plugins](https://wordpress.org/plugins/adjust-admin-categories/)

インストールすると、「設定→Adjust Categories」に次のような設定画面が表示されます。

![2017-03-14_16-23-03.png](https://qiita-image-store.s3.amazonaws.com/0/3977/c1633bd1-1022-c541-72dd-6413d77ad5a5.png)

それぞれを有効化すると、ラジオボタンにしたり必須項目にしたり、また選択したタクソノミーが一番上になるのを防ぐことができます。カスタムタクソノミーも自動的に認識できて手軽ですね。
systemdでの自動起動設定

普段は自動起動の設定をする時はchkconfigで設定しているんだけど、
systemdの方で設定してほしいという依頼があったので、対応した時の作業メモ
今回対応したのはWebSphereの自動起動

## 環境ファイル（EnvironmentFile）の作成
systemdではユーザの環境設定を読まないらしく、
必要に応じてpathを通してやる必要がある
EnvironmentFileに設定したけど、Environmentで個別設定でも可

```
$ cd /etc/sysconfig
$ sudo vi was_config
```
```text:was_config
JAVA_HOME=/usr/local/java8 # javaのパス
PATH=xxxx # 必要に応じて
```
## Unitファイルの作成
systemdではUnitファイルと呼ばれるファイルを作成して、
サービスを登録する仕組みなっているみたい

```
$ cd /etc/systemd/system/
$ sudo vi was.service
```
```text:was.service
[Unit]
Description=was daemon

[Service]
Type=oneshot
RemainAfterExit=yes
EnvironmentFile=/etc/sysconfig/was_config
ExecStart=/usr/local/WebSphere/was start
ExecStop=/usr/local/WebSphere/was stop

[Install]
WantedBy=multi-user.target
```
デーモンプロセスじゃなくてよかったので、Type=oneshotに設定
RemainAfterExit=yesを設定することで、コマンド実行完了後に起動完了として認識してくれるようになる
Type=simpleにしちゃうとコマンド実行時点で起動完了と認識されちゃうのでこっちで設定
WASは起動遅いから困る

## 実行確認
起動に成功していれば、Active: activeになっているし、
失敗していればActive: failed

```
# 登録の確認(表示されればOK)
$ sudo systemctl list-unit-files --type=service | grep was
was.service                                  disabled
# 起動と停止の確認
$ sudo systemctl start was
$ sudo systemctl status was
● was.service - was daemon
   Loaded: loaded (/etc/systemd/system/was.service; disabled; vendor preset: disabled)
   Active: active (exited) since 日付
  Process: xxxx ExecStart=/usr/local/WebSphere/was start (code=exited, status=0/SUCCESS)
 Main PID: xxxx (code=exited, status=0/SUCCESS)
$ sudo systemctl stop was
```

エラーログは以下の方法で確認できるので、必要に応じてチェック
journalctlは他にも色々オプションが有るようなので、less使わなくてもいいかもしれないけど、
個人的にlessが気に入ってるのでこの方法で

```
$ sudo journalctl -b | less
```

## 自動起動の登録
一通り問題なければ、自動起動を設定してサーバの再起動を試して終わり

```
$ sudo systemctl enable was
$ sudo systemctl list-unit-files --type=service | grep was
was.service                                  enabled
$ sudo systemctl start was
$ sudo shutdown -r now
```

## 感想
環境設定ファイルを用意したり、　Unitファイル作ったりなどちょっとやること多くて手間取った
ログ自体も最初は原因がなかなかわかりにくく、個人的にはchkconfigでよくね？って思うことが多々あった
ただ、systemdにはsystemdなりのメリットも有るようなので、どっちも使えるようにしておくと良さそう
Kotlin / ControlsFXのMaskerPaneをつかってみる

## 環境
- Kotlin 1.0.5
- JDK 1.8.0_121
- ControlsFX 8.40.12

## MaskerPaneとは
ローディング中であることを表示するクルクルアイコンと、背後のコントロールにアクセスできなくさせるための半透明の覆いがセットになったペインです。JavaFXのProgressIndicatorに覆いを足しただけの機能ですがより手軽に使えます。
![1.gif](https://qiita-image-store.s3.amazonaws.com/0/168976/0fc14a61-d6db-3cae-bbff-ca22130c5c21.gif)
[Class MaskerPane](https://controlsfx.bitbucket.io/org/controlsfx/control/MaskerPane.html)

今回はJavaFXに用意された同時実行用クラスであるTaskと一緒に使ってみます。


## 使用例（Taskの場合）
上記キャプチャ画像のコントローラクラスの実装です。

```kotlin:Controller.kt
class Controller {

    @FXML lateinit private var maskerPane: MaskerPane
    @FXML lateinit private var button: Button

    @FXML fun onButtonAction(@Suppress("UNUSED_PARAMETER") event: ActionEvent) {

        val task = object : Task<String>() {
            override fun call(): String {
                (0..400).forEach { count ->
                    updateProgress(count.toDouble(), 400.0)   // [1]
                    Thread.sleep(10)
                }
                return "done"
            }
        }

        maskerPane.progressProperty().bind(task.progressProperty())   // [2]
        maskerPane.visibleProperty().bind(task.runningProperty())     // [3]
        Thread(task).start()
    }

}
```

1.JavaFXのTaskには void updateProgress(double workDone, double max) というメソッドが用意されています。作業中はworkDoneを増やしながらmaxになるまでこのメソッドを呼んであげる必要があります。

2.MaskerPaneのprogressをTaskのprogressに追従させます。
task.progressが変更される -> maskerPane.progressが追従する -> maskerPaneの見た目が変わる
といった流れをこれで実現できます。progress自体は0.0から1.0に変化していくDouble値です。

3.MaskerPaneの表示可否をTaskの実行中かどうかを示す値に追従させます。
つまりTaskが動作を停止するとMaskerPaneは消えます。

## バリエーション
Webページの読み込みなど、完了のタイミングを予測できない場合があるかと思います。そのような場合は[1]と[2]の行を削除して以下のような表示にできます。
![2.gif](https://qiita-image-store.s3.amazonaws.com/0/168976/3b773cd3-9f82-3427-95a0-9a72910047e8.gif)


## 同期周り
javafx.concurrentパッケージはこれらの処理をスレッドセーフに行ってくれます。今回の例ではTaskがprogressやrunningの値を書き換えるときに、自動的にJavaFXアプリケーション・スレッドを使用するようになっているので、画面がごりごり書き換わっていても描画スレッドを意識しなくて済みます。
[ORACLE: JavaFXでの同時実行](https://docs.oracle.com/javase/jp/8/javafx/interoperability-tutorial/concurrency.htm)


## 参考
[ControlsFX: Getting Started (sample)](http://fxexperience.com/controlsfx/)
[ORACLE: Java Sample - Ensemble](http://www.oracle.com/technetwork/java/javase/overview/javafx-samples-2158687.html)


## FXML
```xml:Main.fxml
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.StackPane?>
<?import org.controlsfx.control.MaskerPane?>

<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0"
           prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1"
           fx:controller="maskerpane.Controller">
   <Button fx:id="button" mnemonicParsing="false" onAction="#onButtonAction" text="Button"/>
   <MaskerPane fx:id="maskerPane" visible="false"/>
</StackPane>
```
16進数文字列をバイナリに変換

ただのメモ.
16進数文字列をバイナリに変換

```c
#include <stdio.h>
#include <ctype.h>  //  isxdigit

// std::string bin2hex(const std::string& input)
// {
//     std::string res;
//     const char hex[] = "0123456789ABCDEF";
//     for(auto sc : input)
//     {
//         unsigned char c = static_cast<unsigned char>(sc);
//         res += hex[c >> 4];
//         res += hex[c & 0xf];
//     }
//
//     return res;
// }

const char * hex2bin(const char *hex, char *bin, size_t binsize) {
    if (hex && bin) {
        for (; binsize && isxdigit(hex[0]) && isxdigit(hex[1]); hex += 2, bin += 1, binsize -= 1) {     //  fujitanozomu さんの指摘を適用
            int r = sscanf_s(hex, "%2hhx", bin);                                                          //  shiracamus さんの指摘を適用
            if (r != 1) {
                break;
            }
        }
    }

    return hex;
}
```

```c
#include <tchar.h>
#include <assert.h>

int main()
{
    char buf[80];
    const char * hexPriv = "b91c37cd87a0a66fd0c22eeac1bbac277db47f792310e3a9bb3ebd220fa72a59";
    const char * hexPub = "04daa7c6653f3e1ef969550c1018a1dd2d534d5169f155a8583d79abac1aca9e0d93cdc2a6f8368cf6d703f96dfd7cdb0b3aee8514d8c0225f8732dae79f487578";
    const unsigned char binPriv[] = { 0xb9, 0x1c, 0x37, 0xcd, 0x87, 0xa0, 0xa6, 0x6f, 0xd0, 0xc2, 0x2e, 0xea, 0xc1, 0xbb, 0xac, 0x27, 0x7d, 0xb4, 0x7f, 0x79, 0x23, 0x10, 0xe3, 0xa9, 0xbb, 0x3e, 0xbd, 0x22, 0x0f, 0xa7, 0x2a, 0x59, };
    const unsigned char binPub[] = { 0x04, 0xda, 0xa7, 0xc6, 0x65, 0x3f, 0x3e, 0x1e, 0xf9, 0x69, 0x55, 0x0c, 0x10, 0x18, 0xa1, 0xdd, 0x2d, 0x53, 0x4d, 0x51, 0x69, 0xf1, 0x55, 0xa8, 0x58, 0x3d, 0x79, 0xab, 0xac, 0x1a, 0xca, 0x9e, 0x0d, 0x93, 0xcd, 0xc2, 0xa6, 0xf8, 0x36, 0x8c, 0xf6, 0xd7, 0x03, 0xf9, 0x6d, 0xfd, 0x7c, 0xdb, 0x0b, 0x3a, 0xee, 0x85, 0x14, 0xd8, 0xc0, 0x22, 0x5f, 0x87, 0x32, 0xda, 0xe7, 0x9f, 0x48, 0x75, 0x78, };

    const char *p;
    p = hex2bin(hexPriv, buf, sizeof(buf));
    assert(p == hexPriv + 2 * sizeof(binPriv) && memcmp(buf, binPriv, sizeof(binPriv)) == 0);

    p = hex2bin(hexPub, buf, sizeof(buf));
    assert(p == hexPub + 2 * sizeof(binPub) && memcmp(buf, binPub, sizeof(binPub)) == 0);

    return 0;
}
```
Gitのtag付け（Android Studio）

Android Studioで作成したプログラムへ後からタグ付したい時があるので、メモ。

# 環境
Android Studio 2.2
windows
git version 2.10.1.windows.1

# 手順
1.Android Studio起動
2.画面下部「バージョン管理」を選択し、「Log」を表示
3.タグを付けたい箇所を選択して右クリック
4.「New Tag」を選択し、任意のタグ名を入力
![001.png](https://qiita-image-store.s3.amazonaws.com/0/130708/5af5f992-a7c8-4ace-a53c-b004fa3aeb38.png)


これでローカル環境にタグが付きました。
続いてタグをリモートにPUSHします。

5.コマンドライン起動
6.先ほどタグ付けしたプロジェクトのディレクトリに移動

```ruby:例
cd C:\workspace\AndroidApp_111
```
7.タグの一覧を表示し、先ほど付けたタグが存在するか確認

```ruby:例：[1.1.0]と[1.1.1]のタグが存在する場合
C:\workspace\AndroidApp_111> git tag
1.1.0
1.1.1
```
8.タグをリモートにPUSH

```ruby:例：ローカルのすべてのタグをPUSHする場合
C:\workspace\AndroidApp_111> git push origin --tags
```
```ruby:例：ローカルのタグを指定してPUSHする場合
C:\workspace\AndroidApp_111> git push origin tag名
```

以上です。
create-react-native-app触ってみた！！

# create-react-native-appが出た
カルフォルニアで開かれたReact Conf 2017に合わせてcreate-react-native-appが出たっぽいので早速触ってみました
僕のReactNative歴はハンズオン行ってそのあとチュートリアルで遊んだくらいです

# create-react-native-appとは
Facebookと[Expo](https://expo.io/)によるReactにおけるCreate React AppのReact Native版みたいな感じです

https://facebook.github.io/react-native/blog/2017/03/13/introducing-create-react-native-app.html
https://github.com/react-community/create-react-native-app#philosophy
この2つに書いてあるように[Expo](https://expo.io/)を使うことによって、Xcode / Android Studioを使う必要がなくなり、WindowsやLinuxでもiosアプリを作ることができるなど、React Nativeの開発が圧倒的にしやすくなるぜ！！って代物のようです
また、[Expo SDK](https://docs.expo.io/versions/v14.0.0/sdk/index.html#expo-sdk)が様々な機能を提供してくれます

では、使ってみましょう！！

# １.Expoをインストール
Expoを[公式サイトのInstallation](https://docs.expo.io/versions/v14.0.0/introduction/installation.html)に従ってインストール

# 2. create-react-native-appのインストール
```
$ npm install -g create-react-native-app
# or
$ yarn global add create-react-native-app
```

# 3.プロジェクトを生成
```
$ create-react-native-app hoge
$ cd hoge
```

# 4.動かす
## コマンドで起動する場合
1. ```npm start```
2. スマートフォンで[Expo Client](https://itunes.apple.com/app/apple-store/id982107779?mt=8)をインストールし、表示されるQRコードを読み取る（この時、コンピュータとスマートフォンは同じローカル環境で）

*QRコード*でそれぞれのデバイスで表示できるはおもしろいです！！

## Expo XDEを立ち上げてから起動する場合
[紹介動画](https://www.youtube.com/watch?v=IQI9aUlouMI)の48秒ぐらいからを参考にしてください

<img width="1566" alt="スクリーンショット 2017-03-14 15.26.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/129548/d881acdf-470a-7bad-59c9-ec1a32ed2ca5.png">

パソコンだとこんな感じで動きます


みなさんもcreate-react-native-app使ってみてください！
ios,androidいずれのエンジニアもReact Nativeにおけるストレスが以前より減るのではないでしょうか？

# 参考URL
https://facebook.github.io/react-native/blog/2017/03/13/introducing-create-react-native-app.html
https://github.com/react-community/create-react-native-app
https://expo.io/
https://react.jsnews.io/introducing-create-react-native-app-a-new-tool-that-makes-it-significantly-easier-to-get-started-with-react-native/
Linuxのディレクトリ構成とパスの基本

<h2>Linuxはファイルから出来ている</h2>
Linuxでは、ユーザーデータだけではなく、システム全体も１つ１つのファイルとして構成されている。システム全体のディレクトリ構成は、ルートディレクトリ（/）を頂点とした階層構造になっている。

<h2>主要ディレクトリの構造</h2>
<ul>
<li>/（ルートディレクトリ）
<ul>
<li>/bin（一般ユーザー、管理者ユーザーが使用するLinuxシステムの動作に最低限必要な実行ファイルを格納する）</li>
<li>/dev（デバイスファイルを格納する）</li>
※デバイスファイルとは、ディスクやキーボードなどのハードウェアをファイルとして扱えるように用意された、特殊なファイルのこと。
<li>/etc（Linux本体、アプリケーションの設定ファイルを格納する）</li>
<li>/sbin（管理者ユーザーが使用するLinuxシステムの動作に最低限必要な実行ファイルを格納する）</li>
<li>/tmp（一時的なファイルを格納する）</li>
<li>/usr（各種アプリケーションと、それに付随するファイルを格納する）</li>
<li>/var（変化するデータ（ログ、電子メールなど）を格納する）</li>
<li>/home（ユーザーごとに割り当てられる、ホームディレクトリを格納する）
<ul>
<li>/home/hoge（ホームディレクトリ。hogeは、ユーザー名。）</li>
</ul>
</li>
</ul>
</li>
</ul>

<h2>パス</h2>
<h3>パスとは？</h3>
各ディレクトリを/（スラッシュ）で区切り、ファイルの場所を表現する。

例 /home/hoge/hoge.txt
※「ルートディレクトリ（/）」の下の「homeディレクトリ」の下の「hogeディレクトリ」の下の「hoge.txt」
<h3>絶対パスとは？</h3>
ルードディレクトを起点としてファイルやディレクトリのパスを表現する。

例 /home/hoge/hoge.txt
<h3>相対パスとは？</h3>
カレントディレクトを起点としてファイルやディレクトリのパスを表現する。

例 hoge.txt
※ カレントディレクトリ/home/hogeのとき
<h3>カレントディレクトリとは？</h3>
現在、自分が位置しているディレクトのこと。
ホームディレクトリにGolangをインストールする

Linux 上で自分のホームディレクトリに Golang を導入するための簡単な手順を記す。Linux 上に Golang をインストールする手順としては、yum や apt でインストールすればいいのだが、諸事情によりこれらのコマンドが使えない場合(例えば、root になれないとか、sudo できないとか)には、以下の手順を踏めば自分のホームディレクトリに Golang を導入可能である。シェルは Bash を、Golang のバージョンは 1.8 を想定している。

### GOROOT設定

```shell-session
cd /tmp
wget https://storage.googleapis.com/golang/go1.8.linux-amd64.tar.gz
tar zxvf go1.8.linux-amd64.tar.gz
mv /tmp/go ~/goroot
```

`.bash_profile` に以下を追記する。

```shell-session
cat << 'EOF' >> ~/.bash_profile
export GOROOT=$HOME/goroot
export PATH=$GOROOT/bin:$PATH
EOF
```

シェルを再起動する。

```shell-session
exec -l $SHELL
```

ちなみに、macOS で同じことをするには、macOS用の[go1.8.darwin-amd64.tar.gz](https://storage.googleapis.com/golang/go1.8.darwin-amd64.tar.gz)を wget して展開してやればよい。

### GOPATH設定
どうして、わざわざ`~/go`を`~/goroot`にリネームしたかというと、Go v1.8以降では、`$HOME/go`がデフォルトで`GOPATH`と見なされるからである。

https://github.com/golang/go/issues/17262

明示的に書いておきたければ以下を`.bash_profile`に追記すればよい。

```shell-session
export GOPATH=$HOME/go
```
Atomおすすめプラグイン〜導入まで

環境：OS X 10.12
良いプラグインを見つけ次第追加。実際の導入で使えるようにするところまで書きます。

# atom-runner
##### プログラムをAtomから素早く実行。
プログラムをcontrol+RでAtom内から直接実行できるようにするプラグイン。
ファイルを保存して、ターミナルに行って、python3 file.pyと叩く手間を省けます。
注意すべきは、デフォルトでpython3ではなくpythonを実行しに行こうとしてしまうこと。これを修正するためにはAtomのConfigをいじる必要があります。
AtomのメニューからConfigを選択しましょう。

<img width="305" alt="SS 2017-03-14 14.50.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/137440/34662a86-3438-8582-dff2-6cfaa706dd60.png">
ここに、以下のように書き加えます。
<img width="527" alt="SS 2017-03-14 14.45.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/137440/39b8d57f-9dfe-36e6-055b-abd97fba3c5d.png">

`"atom-runner"`というセクションがありますが、ここに書くのではなく（ここに書いても効きません）、`"runner"`というセクションを`"*":`以下に自分で作ってください。

```config.cson
"*":
  "runner":
    scopes:
      python: "python3"
```

# [file-icons](https://atom.io/packages/file-icons)
##### アイコンを見やすく。
ファイルのアイコン画像はデフォルトでは面白みのない一緒くたなものですが、このプラグインを導入すればファイルの種類に従って可愛いアイコンを付けてくれます。
gitの状態表示とごっちゃになるのが嫌なので、個人的には色をオフにしています。
<img width="192" alt="SS 2017-03-14 15.21.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/137440/369bc465-2c58-9d7d-0d6c-e350fe05cadd.png">

一部のアイコンのみに対して使用するか、一部のアイコンをデフォルトに戻す方法を調査中。（わかる方いましたら教えていただけると嬉しいです）


# close-on-left
##### 閉じるボタンを左側に。
Macの左側閉じるボタンに慣れているなら、導入しておいて損はないでしょう。
使うときは、テーマのUIも同時に、Tab Sizingの項目を「Even」に設定しておくと綺麗に表示してくれるのでおすすめです。
<img width="906" alt="ss.png" src="https://qiita-image-store.s3.amazonaws.com/0/137440/13925172-e85e-6deb-24b4-680cd12b3242.png">


# remote-atom
##### SSH接続での開発をAtomから！
SSH接続するとき、使い慣れているAtomをエディタに編集したいですよね。そんな時のためにこのプラグイン。
READMEに従って設定すればきちんと使えるようになります。
（時間がある時にちゃんと書きます。）

# color-picker
##### 色を見てカラーコードを書く。
CSSやSASSファイルを編集する際、色を指定する時にこれがあると便利でしょう。

# autoclose-html
##### HTMLタグを自動で閉じる。
HTMLタグを閉じるのって面倒臭いですよね。これがあれば開始タグを書き終えた時に自動で終了タグを補完してくれます。

---
参考：
[Atom でインストールしている package 一覧](http://qiita.com/iorionda/items/b108e73e51ff40049c60) @iorionda
VirtualBoxでHost→Guestの通信(HostOnlyNetwork)が繋がらない

#### 背景
https://coreos.com/blog/managing-coreos-with-ansible.html
これをベースに、動きから確認しようとしたら
(バージョンはかなり古いので、実用には向かないので注意)
そもそもGuestにping通らない！なぜだ！となった時の対応

#### 色々試す
Windowsで同じものをcloneしてきたらpingが通る…

```
C:\coreos-ansible-example>ping 10.12.8.1

10.12.8.1 に ping を送信しています 32 バイトのデータ:
10.12.8.1 からの応答: バイト数 =32 時間 <1ms TTL=128
10.12.8.1 からの応答: バイト数 =32 時間 <1ms TTL=128
10.12.8.1 からの応答: バイト数 =32 時間 <1ms TTL=128
```

仮想インタフェースがdownな為、upする
`ip link set dev vboxnet1 up`


ip routeで行先をvboxの仮想インタフェースへと指定する

`ip route del 10.12.8.0/24 dev vboxnet1`



#### 結論
1. guest側coreosのネットワークアダプタが使用するhost-only-networkが違うhost-only-networkにつながっていた…

2. Host側のアダプタvboxnet1にIPが設定されていなかった…


```
5: vboxnet1: <BROADCAST,MULTICAST> mtu 1500 qdisc noop state DOWN group default qlen 1000
    link/ether 0a:00:27:00:00:01 brd ff:ff:ff:ff:ff:ff
```

これでやっとテストが開始出来る…

```
deb-dev# ping 10.12.8.101
PING 10.12.8.101 (10.12.8.101) 56(84) bytes of data.
64 bytes from 10.12.8.101: icmp_seq=1 ttl=64 time=6.05 ms
64 bytes from 10.12.8.101: icmp_seq=2 ttl=64 time=0.507 ms
64 bytes from 10.12.8.101: icmp_seq=3 ttl=64 time=0.837 ms
64 bytes from 10.12.8.101: icmp_seq=4 ttl=64 time=0.617 ms
```
input type="file"で選択した画像をプレビュー表示

ファイルを選択したら画像をプレビューで表示するアレです
これもソースコードは結構公開されていますが、あくまでも備忘録としてのスタンスで


## html

htmlはこのようになっています

```html
<div class="input_file">
    <div class="preview">
        <input accept="image/*" id="imgFile" type="file">
    </div>
    <p class="btn_upload">
        画像ファイルを選択してアップロード
    </p>
</div>
```

```accept="image/*"``` これで画像ファイル限定ということにしています

## css

```css
.input-file .preview {
  background-image: url(/hoge.jpg);
}
.input-file input[type="file"] {
  opacity: 0;
}
```

.previewには「ファイルを選択してください」的メッセージ画像があるとお考え下さい
```opacity: 0;``` これでファイルフォームが透明化され見えなくなっています

プレビュー部分のサイズ等は適宜設定してみてください


## javaScript

```js
$('#imgFile').change(
    function () {
        if (!this.files.length) {
            return;
        }

        var file = $(this).prop('files')[0];
        var fr = new FileReader();
        $('.preview').css('background-image', 'none');
        fr.onload = function() {
            $('.preview').css('background-image', 'url(' + fr.result + ')');
        }
        fr.readAsDataURL(file);
        $(".preview img").css('opacity', 0);
    }
);
```

ファイルを読み込んだあとにバックグラウンド画像を差し替え
という形でプレビュー表示をします
選択された画像が表示され、元画像は透明化して見えなくしています

今回はこの辺で