OmniAICreator/Qiita-1.07M huggingface dataset:
Mac に TensorFlow をインストールする

* [Installing TensorFlow on macOS](https://www.tensorflow.org/install/install_mac)

を実行するが、多少 Virtual Environment の方式が違う。他には、Dockerでもインストール可能だが、Dockerより、色々試すのだと、インストールしてしまうのが良さそう。pythonだと、Virtual Environment という方式があり、環境を汚さず、環境を作れるようす。

```
python3 -m venv venv
```

`-m` でモジュールを実行するコマンドで、`venv` モジュールを実行する。 下記のディレクトリができる。lib の下にディレクトリや、[pyc](http://blog.kzfmix.com/entry/1301308907)はキャッシュファイルでコンパイル下バイトコードの様子。 `pyvenv.cfg` はコンフィグファイル。

```
$ ls
bin		include		lib		pyvenv.cfg
```

_pyenv.cfg_


```
home = /usr/local/bin
include-system-site-packages = false
version = 3.6.3
```


```
$ python3 -m venv --help
usage: venv [-h] [--system-site-packages] [--symlinks | --copies] [--clear]
            [--upgrade] [--without-pip] [--prompt PROMPT]
            ENV_DIR [ENV_DIR ...]
```

の通りで、仮想環境が`venv` という名前のディレクトリの下に作られる。
仮想環境の実行は下記のファイルを読み込むので良い。

```
source venv/bin/activate
```

という感じで良い。Tensorflowのインストールは、pip で良い。

```
pip3 install --upgrade tensorflow
```

あとは、ページにある動作確認を実施すれば良い。

```
import tensorflow as tf
hello = tf.constant('Hello, TensorFlow!')
sess = tf.Session()
print(sess.run(hello))
```

TensorFlow は難しくて歯が立たない。一歩一歩やるしかないね。
macOSのredis-cliからredis-serverにSSL接続する

Azure Redis Cache を触っていて、redis-cliがSSLに対応されていないことを知りました。
で、ググっていたら、こんな情報を発見しました。
このmacOS版みたいな感じです。圧倒的感謝です。

Azure Redis Cacheにredis-cliで接続する (SSLで)
http://www.windows-maniax.com/kuniteru/azure1319.html


# `redis-cli`のバージョン
```
$ redis-cli --version
redis-cli 4.0.2
```


## stunnel.confの編集

自分の場合は新規作成。

```
$ vi /usr/local/etc/stunnel/stunnel.conf
```

内容はこんな感じ。Azureの例。

```
[redis-cli]
client = yes
accept = 127.0.0.1:6379
connect = ${your-redis-name}.redis.cache.windows.net:6380
# connect = example.redis.cache.windows.net:6380
```


## 起動

こんな感じでつながる。

```
$ redis-server
$ stunnel
$ redis-cli -h localhost
127.0.0.1:6379> auth this-is-primary-or-secondary's-access-key
OK
```
Docker環境のUbuntu16.04にHyperledger Fablic 1.0.3の環境を構築してみた。

#概要
Hyperledger Fabric 1.0.3 をDocker環境のUbuntu16.04で動作させるため環境を構築してみました。

ここを参考にインストールしましたが、

http://re1ax.sakura.ne.jp/wp/2017/10/29/%E3%80%90blockchain%E3%80%91hyperledger-fabric-v1-0-3-%E2%91%A0/

微妙に環境がちがうので、改めてまとめてみました。後ほど、サンプルの動作確認もしてみます。

**Hyperledgerをインストールするというより、HyperledgerのDockerImageを動作させるための環境を準備するという感じですね。**

0.6から比べて別物になってますね汗

#1. Ubuntu16.04のインストール
```
  docker run  --privileged=true -d  --name hl -p 10022:22 ubuntu:16.04 /sbin/init
  docker exec -it  hl env TERM=xterm /bin/bash
```
#2. vimのインストール
```
  apt-get update
  apt-get -y install vim
```
#3. sshdのインストール.これでポート10022でログインできる
```
  apt-get -y install openssh-server
  passwdでrootパスワードをrootに設定
  vim /etc/ssh/sshd_config
  下記のように変更
    #PermitRootLogin prohibit-password
    PermitRootLogin yes
  /etc/init.d/ssh restart
```
#4. golangのインストール
```
  cd
  wget https://storage.googleapis.com/golang/go1.9.1.linux-amd64.tar.gz
  tar -C /usr/local -xzf go1.9.1.linux-amd64.tar.gz
  vim ~/.profile
  # 追加
    export PATH=$PATH:/usr/local/go/bin
  source .profile
```
#5. Dockerのインストール
```
  apt-get install apt-transport-https ca-certificates curl software-properties-common
  curl -fsSL https://download.docker.com/linux/ubuntu/gpg | apt-key add -
  add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu xenial stable"
  apt-get update
  apt-get -y install docker-ce
  docker -v
  #docker restart hl //Dockerでコンテナを再起動
```
#6. docker-composeのインストール
```
  curl -L https://github.com/docker/compose/releases/download/1.17.0-rc1/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose
  chmod +x /usr/local/bin/docker-compose
  docker-compose -v
```
#7. Node.jsのインストール
```
  apt-get install build-essential libssl-dev
  curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.5/install.sh | bash
  bash
  nvm install 6.9.5 <- 6.9系の最新
  node --version
```
#8. pythonのインストール
```
  apt-get -y install python
  python --version
```
go buildとクロスコンパイル

## ファイルをbuildする
```go
$ go build main.go(buildするファイル名)
```
ファイルはカレントディレクトリ配下に作成される。

## クロスコンパイルを使う
### 作るバイナリを決定する
作るバイナリの種類を決めます。buildしたファイルを使いたい環境でgo envを実行。
どんな環境なのかを確認します。

```go
$ go env
GOARCH="amd64"
GOBIN=""
GOEXE=""
GOHOSTARCH="amd64"
GOHOSTOS="linux"
GOOS="linux"
GOPATH="自分のGOPATH"
GORACE=""
GOROOT="/usr/local/go"
...
..
.
```

この場合は、linuxなので、クロスコンパイルでlinux向けのバイナリを作成します。

```
GOARCH="amd64"
GOOS="linux"
```
上記の記述をコマンドで使用します。

```go
$ env GOOS=linux GOARCH=amd64 go build main.go（buildするファイル名）
//↑はfishの場合
//bashの人はenvいらない。
```
上記を実行すると、linux向けのファイルが作成される。

## buildされたファイルを実行する

```go
./main
```
上記コマンドでbuildされたファイルを実行可能。
環境変数を付与して使いたい場合には以下の通り。

```go
env GO_ENV=○○ ./main
//fish
```


## buildされるファイル名を決める
デフォルトでは、buildするとファイル名は元のファイル名を元に決められます。
build後のファイル名を決めたい場合には、-oをつけます。

```go
env go build -o test main.go
//fish
```
実行すると、testという名前でファイルが作られます。
さっきと同じようにすれば、実行可能。

### .envを参照している場合
コードの中で.envを参照している場合は、環境を変えて実行するとエラーが起きました。
この場合は、その環境でも同じように.envを置くとうまくいきます。

以下のような記事もありますね。
https://qiita.com/kazuph/items/491b87a8f07740c78c8e
「Hostscanは次のスキャン対象を待機しています」で接続できない（Cisco AnyConnect）

ググっただけの情報を投稿するのはどうかと思うけども、日本語記事が見当たらなかったので。
（そもそもAnyConnectとFiddlerを共存させてる環境って…）

### 症状
突然、Cisco AnyConnect Secure Mobility Clientで、VPN接続できなくなった。
「Hostscanは次のスキャン対象を待機しています」という表示が出たまま止まり、しばらくすると処理がループする。

### 環境
Windows10
Cisco AnyConnect Secure Mobility Client 4.4.03034
Fiddlerを入れている　**←！**

### 見つけた情報によると
certmgr.msc（証明書）　または　inetcpl.cpl（インターネットのプロパティ＞コンテンツ＞証明書）の「個人」に、Fiddler（ローカルプロキシツール）によって生成された膨大な量の証明書が存在する場合、ASAのsyslogに次のように出力されるという。

```:ASAsyslog
“Rejected #KB Hostscan data from IP <xx.yyy.zzz.aa>”
（IP<xx.yyy.zzz.aa>からのHostscanデータ#KBを拒否）

“Hostscan results exceed default limit of 200KB”
（Hostscanの結果が200KBのデフォルト制限を超えている）
```

### 対処
証明書の「個人」内にあるルート証明書“DO_NOT_TRUST_FiddlerRoot”を根こそぎ削除する。

### 結果
AnyConnectが復活しVPN接続できるようになった。よかった。

### 補足
以降もつづけてFiddlerをHTTPSキャプチャに用いる場合、Fiddlerから生成されるルート証明書が必要なので、症状再現するか気にしながら、適宜、証明書の削除を行う。もしくはFiddlerアンインストールして他のツールに乗り換える。
UnsafeMutablePointer<T>を通してCの関数から値を受け取る際の注意


値を設定する前にinitializeで初期化を行っておく。
これをしておかないと、deainitializeを呼び出したりした際にクラッシュする。

一応、
deinitializeメソッドのリファレンスでもinitializedされている必要があると記載がありますが、確実にクラッシュするわけではないので注意です。


```main.swift
import libfoo

let fooPointer = UnsafeMutablePointer<Foo>.allocate(capacity: 1)

// 値を受け取る前にinitializeメソッドで初期化を行っておく
fooPointer.initialize(to: Foo())

// 値を受け取る
setFoo(fooPointer)
```

コメントにて、
@t-ae さんからUnsafeMutablePointer\<T\>ではなく、以下でも値を受け取ることができるとご教示頂きました。

```main2.swift
var foo = Foo() 
setFoo(&foo)
```

上記のコードは、UnsafeMutablePointer\<T\>版の糖衣構文になっていますので、
initializeはまさにfoo変数宣言時に必要な初期化(var foo = Foo())であると考えられます。

---

一応C側のコードは以下のようなのを想定

```foo.h
typedef struct {
        char* name;
        int age;
} Foo;

void setFoo(Foo* foo);
```

```foo.c
void setFoo(Foo* foo) {
        foo->name = "tanaka";
        foo->age  = 10
}
```
OAuth2 gemでGoogle Api よりaccess tokenを取得する

[OAuth2](https://github.com/intridea/oauth2) gemでrailsのWEBアプリケーションとGoogle Api のOAuth連携を試す。

## 前提
- [Google Cloud Platform](https://cloud.google.com/?hl=ja) にログインし、コンソール＞APIとサービス＞認証情報より、新規プロジェクト、OAuth クライアントIDを作成。
- railsアプリケーションに[OAuth2](https://github.com/intridea/oauth2) gemをインストール済み。

## 実装
お試しなのでcontroller に直接実装したが、moduleにでも出す。

```ruby:oauth_controller.rb
require 'oauth2'

# google の認可サーバにリクエスト
def authorization
  client = OAuth2::Client.new(
    CLIENT_ID,
    CLIENT_SECRET,
    {
      site: 'https://accounts.google.com/',
      authorize_url: 'o/oauth2/auth',
    }
  )
  redirect_to client.auth_code.authorize_url(
    redirect_uri: 'http://localhost:8080/oauth/callback',
    scope: SCOPE_CODE,
    # see about scopes: https://developers.google.com/identity/protocols/googlescopes
  )
end

# パラメータで認可コード（code）を取得し、access_tokenをリクエスト・取得する。
def callback
  client = OAuth2::Client.new(
    CLIENT_ID,
    CLIENT_SECRET,
    {
      site: 'https://accounts.google.com/',
      token_url: 'o/oauth2/token',
    }
  )
  # 認可コードよりaccess_tokenをリクエスト・取得。
  token = client.auth_code.get_token(
    params[:code],
    redirect_uri: 'http://localhost:8080/oauth/callback',
  )
  #　適当なAPIを叩く
  response = token.get(
    'https://www.googleapis.com/plus/v1/people/me/activities/public'
  )
end
  ```

####備考
- このとり方ではrefresh_tokenはとれなかったので、別途対処が必要。
- 例外処理は考えていない。
- アプリケーションでアカウント認証が必要な場合はその処理も必要。  
今回、アカウントは作らないので、authoraization でsessionを作成し、callbackでsession取得・削除することとした。


## 参考
- [OAuth2\.0によるGoogle\+ APIのアクセス方法](https://www.eisbahn.jp/yoichiro/2011/10/oauth2-0_google-api.html)
- [rubyのoauth2\(gem\)について \- Qiita](https://qiita.com/mm31/items/b2bfe8d43976fafd6a9b)
- [OAuth 2\.0 全フローの図解と動画 \- Qiita](https://qiita.com/TakahikoKawasaki/items/200951e5b5929f840a1f)
- [OAuth 2\.0 Scopes for Google APIs  \|  Google Identity Platform  \|  Google Developers](https://developers.google.com/identity/protocols/googlescopes)
- [Google\+ API with OAuth \- Qiita](https://qiita.com/edo_m18/items/20fe8426f7c4dc0517dc)
paiza.ioのnode.jsのバージョンを調べる

### paiza.ioにて
https://paiza.io/ja/projects/new
![Screenshot_5.png](https://qiita-image-store.s3.amazonaws.com/0/119363/16390784-da04-2b2d-d1c6-7db808bad69a.png)


以下、javascriptタブのコンソールに入力  

```js
const { spawn } = require('child_process');
const ls = spawn('node', ['-v']);

ls.stdout.on('data', (data) => {
  console.log(`stdout: ${data}`);
});
```
「ctrl + enter」で実行
### 出力
![Screenshot_4.png](https://qiita-image-store.s3.amazonaws.com/0/119363/2cb92c0e-d61d-6d3f-2446-abfb51e9a030.png)


#### 備考
* 小ネタレベル
* ほぼnodejs公式「child_process」のリファレンスから~~ソース丸コピペ~~引用
* paiza.ioの説明まるまる割愛してます。すみません。~~手抜き~~
OSXのUnityでgdiplusが読めないと言われた時

Unityの実行時にファイルを読み込みたい！

ということで、UnityStarndaloneFileBrowser を使いたかったのですが、
OSXではgdiplus.dllが読めないとエラーが発生したので解決法を探しました。
他にもこのライブラリを使うプラグイン等あるようなので同じ解決策で行けるかと思います。

### UnityStarndaloneFileBrowser
```
https://github.com/gkngkc/UnityStandaloneFileBrowser

ネイティブのファイルダイアログを開くプラグインです
```

### 環境
```
OSX 10.13.1
Unity: 2017.2.0f3
```

### 解決策
- 次のファイルを編集します。

```
/Applications/Unity.app/Contents/Mono/etc/mono/config
```

- 以下を追加します。
\</configuration> の直前ぐらいに記述すればいいと思います。

```
    <dllmap dll="gdiplus" target="/tmp/unity-monodevelop-monoframework-4.0.5/lib/libgdiplus.dylib" os="!windows"/>
    <dllmap dll="gdiplus.dll" target="/tmp/unity-monodevelop-monoframework-4.0.5/lib/libgdiplus.dylib"  os="!windows"/>
    <dllmap dll="gdi32" target="/tmp/unity-monodevelop-monoframework-4.0.5/lib/libgdiplus.dylib" os="!windows"/>
    <dllmap dll="gdi32.dll" target="/tmp/unity-monodevelop-monoframework-4.0.5/lib/libgdiplus.dylib" os="!windows"/>
```

- Unityを再起動すれば解決（のはず）
STARを使ったマッピング

RNA-Seqのマッピングツールである[STAR](https://github.com/alexdobin/STAR)のインストールから使い方まで紹介します。
STARはかなりメモリを食うので、humanやmouseのマッピングをする場合はメモリが32GB以上(?)あることを確認した上で実行してください。無い場合はHisat2やKallisto等他のマッピングツールを検討した方が良いかもしれません。

##STARのインストール
gcc c++が入っている必要があります。
Macの場合はXcode、UbuntuやCentOSの場合はapt-getやyumなどでgcc-c++をインストールして下さい。

STARのソースコードを[ダウンロード](https://github.com/alexdobin/STAR/releases)します。
MacとLinaxはコンパイル済みの状態のものが/STAR/binにありますので、使用しているOSに合わせてパスを通しておきます。

##リファレンスゲノムの取得
[illumina iGenome](https://support.illumina.com/sequencing/sequencing_software/igenome.html)からのダウンロードをお勧めします。
ここでは、マウスのゲノムはMus musculus UCSC mm10
ヒトのゲノムはHomo sapiens UCSC hg38をダウンロードしています。
ファイル容量が非常に大きいので注意して下さい。

```
#mm10のダウンロード
wget ftp://igenome:G3nom3s4u@ussd-ftp.illumina.com/Mus_musculus/UCSC/mm10/Mus_musculus_UCSC_mm10.tar.gz
##解凍
tar xvf Mus_musculus_UCSC_mm10.tar.gz

#hg38のダウンロード
wget ftp://igenome:G3nom3s4u@ussd-ftp.illumina.com/Homo_sapiens/UCSC/hg38/Homo_sapiens_UCSC_hg38.tar.gz
##解凍
tar xvf Homo_sapiens_UCSC_hg38.tar.gz
```

##インデックスの作成
リファレンスゲノムをダウンロードしたら、STAR用のindexを作成する必要があります。

```
#STARでindexの作成
STAR \
--runThreadN 12 \ #マシンのスペックに応じて変更して下さい
--runMode genomeGenerate \
--genomeDir /path/to/genomeDir \#生成したインデックスの保存先
--genomeFastaFiles /path-to-ref/Mus_musculus/UCSC/mm10/Sequence/WholeGenomeFasta/genome.fa \
--sjdbGTFfile /path-to-ref/Mus_musculus/UCSC/mm10/Annotation/Genes/genes.gtf 

```
##実行
シングルエンドの場合

```
STAR --runThreadN 12 \ #マシンのスペックに応じて変更して下さい
--outSAMtype BAM SortedByCoordinate \
--quantMode TranscriptomeSAM GeneCounts \ #このオプションを使うと遺伝子ごとのカウントファイルを生成してくれます
--genomeDir PATH-TO-STAR-INDEX \ #genomeGenerateで生成したインデックスのパス
--readFilesIN PATH-TO-FASTQ　#fastqのパス
```

ペアエンドの場合

```
STAR --runThreadN 12 \ #マシンのスペックに応じて変更して下さい
--outSAMtype BAM SortedByCoordinate \
--quantMode TranscriptomeSAM GeneCounts \ #このオプションを使うと遺伝子ごとのカウントファイルを生成してくれます
--genomeDir PATH-TO-STAR-INDEX \ #genomeGenerateで生成したインデックスのパス
--readFilesIN PATH-TO-FASTQ_R1 PATH-TO-FASTQ_R2　#fastqのパス
```

##例
[pasta-dump](https://qiita.com/vanillin99/items/18b6a07c5be2ead16f8e)の項でダウンロードした、SRP052999のfastqファイルをマッピングしてみます。

```

cd SRP052999 ; \ #fastqのあるディレクトリにChange Directory
for srr_id in SRR1781884 SRR1781885 SRR1781886 SRR1781887 SRR1781888 SRR1781889 SRR1781890 SRR1781891 ; \
do \
STAR --runThreadN 12 \ 
--outSAMtype BAM SortedByCoordinate \
--quantMode TranscriptomeSAM GeneCounts \ 
--genomeDir PATH-TO-STAR-INDEX \ 
--readFilesIN ${srr_id}.fastq　#fastqのパス
done
```
アプリのバージョンを取得する


## iOS

### Swift

```swift
let version: String! = Bundle.main.object(forInfoDictionaryKey: "CFBundleShortVersionString") as! String

let build: String! = Bundle.main.object(forInfoDictionaryKey: "CFBundleVersion") as! String

```

### Objective-C

```	Objective-C
NSString *version = [[NSBundle mainBundle] objectForInfoDictionaryKey:@"CFBundleShortVersionString"];

NSString *build = [[NSBundle mainBundle] objectForInfoDictionaryKey:@"CFBundleVersion"];
```

## Android

### Java

```Java
public static int getVersionCode(Context context){
    PackageManager pm = context.getPackageManager();
    int versionCode = 0;
    try{
        PackageInfo packageInfo = pm.getPackageInfo(context.getPackageName(), 0);
        versionCode = packageInfo.versionCode;
    }catch(PackageManager.NameNotFoundException e){
        e.printStackTrace();
    }
    return versionCode;
}

public static String getVersionName(Context context) {
    PackageManager pm = context.getPackageManager();
    String versionName = "";
    try {
        PackageInfo packageInfo = pm.getPackageInfo(context.getPackageName(), 0);
        versionName = packageInfo.versionName;
    } catch (PackageManager.NameNotFoundException e) {
        e.printStackTrace();
    }
    return versionName;
}
```

もしくは

```Java
int versionCode = BuildConfig.VERSION_CODE;
String versionName = BuildConfig.VERSION_NAME;
```

### Kotlin

```kotlin
fun getVersionCode(context: Context): Int {
    val pm = context.packageManager
    var versionCode = 0
    try {
        val packageInfo = pm.getPackageInfo(context.packageName, 0)
        versionCode = packageInfo.versionCode
    } catch (e: PackageManager.NameNotFoundException) {
        e.printStackTrace()
    }
    return versionCode
}

fun getVersionName(context: Context): String {
    val pm = context.packageManager
    var versionName = ""
    try {
        val packageInfo = pm.getPackageInfo(context.packageName, 0)
        versionName = packageInfo.versionName
    } catch (e: PackageManager.NameNotFoundException) {
        e.printStackTrace()
    }
    return versionName
}
```

もしくは

```Kotlin
val versionCode : Int = BuildConfig.VERSION_CODE
val versionName : String = BuildConfig.VERSION_NAME
```

## 2017/11/16追記

Androidにて、BuildConfigでの取得方法を追記しました。

## :paperclip: Refs

- [【Android】アプリのバージョン名とバージョン番号を取得する](https://qiita.com/katsuhisaishii/items/25c885fe7e60a2273395)
- [iOSアプリのバージョンを取得する](https://qiita.com/arthur87/items/802d17387ae46fb44fc2)
- [PackageManager](https://developer.android.com/reference/android/content/pm/PackageManager.html)
- [https://developer.apple.com/documentation/foundation/nsbundle](https://developer.apple.com/documentation/foundation/nsbundle?language=objc)
- [Gradleでアプリのバージョン名とバージョン番号を取得する](https://qiita.com/itochan/items/1d89144f2c6e7c06eab7)
ViewStateの改ざん対応


ViewStateはhiddenで引き回されるため、比較的容易に改ざんが可能です。

例えば、他のユーザーのViewStateを何らかの手段で入手することで、そのユーザーしか見れないコンテンツが見れてしまう、といった問題が発生しえます。

# 対応方法

ViewStateにセッションIDを保存し、突き合わせすることで、ViewStateの改ざんを検知します。

# 修正点

以下のコードをページの生成時に実行することで、Asp.net側でセッションIDのViewStateへの保持と突合せが自動で行われます。

```csharp
ViewStateUserKey = Session.SessionID;
```

自セッション外のViewStateに改ざんすると、以下のようなエラーが出力され、システムエラーとなります。

```csharp

{System.Web.HttpException (0x80004005): viewstate MAC の検証が失敗しました。このアプリケーションが Web Farm またはクラスターによってホストされている場合、<machineKey> 構成が同一の validationKey と検証アルゴリズムを指定していることをご確認ください。AutoGenerate をクラスターで使用することはできません。

詳細については、http://go.microsoft.com/fwlink/?LinkID=314055 をご覧ください。 ---> System.Web.UI.ViewStateException: 無効な viewstate です。
```
# 参考
* [MSDN - ユーザーごとのビューステートのエンコーディング](https://msdn.microsoft.com/ja-jp/library/bb386448(v=vs.100).aspx)
* [クロスサイトリクエストフォージェリ (CSRF) の防止策に関するチートシート#asp.net](https://jpcertcc.github.io/OWASPdocuments/CheatSheets/Cross-SiteRequestForgeryPrevention.html#Viewstate_.28ASP.NET.29)
DataGripで最低限覚えておくべきショートカット

最近JetBrains製品を使い始めて非常に使い心地が良かったため、DataGripを試してみました。
とりあえず、最低限のショートカットさえ覚えておけば、他のツールからの移行も億劫じゃなくなりそうなので、
調べてみました

## ショートカット一覧
1. 全検索
  - shift×2
  - テーブル名、データベース名もなんでもインクリメンタルに検索できます
2. エディタにフォーカスを当てる
  - Esc
  - 他のビューを見ている場合にエディタをアクティブにすることができる
3. データベースビューをアクティブにする
  - Command ＋ 1
  - テーブル一覧が表示されているデータベースビューへフォーカスをアクティブにできる
4. テーブル内検索
  - Command ＋ F
  - テーブル内のデータをgrepできる
5. アクティブタグを閉じる
  - Command ＋ w
  - アクティブタグを閉じる


## 参考
 [DataGrip Keymap](http://resources.jetbrains.com/storage/products/datagrip/docs/DataGrip_keymap.pdf)
position:fixedで親要素に対し右端に固定

`position:fixed`した要素を親要素に対して相対的に配置する方法について、左端に固定というのは見つかったが、右端に固定というケースはなかったので実験しました。
```

```html
<div class="parents">
  <div class="child">親要素の右端に固定したい！</div>
</div>
```
左端に固定したい場合は、`left:auto；``left:0；`などとするといいというのが定説みたいだけど、`left:50%;`までもなぜか親要素に対して相対的な位置になる模様。それ以上の値になるとブラウザ幅が基準になる。
なのでそれを利用し、`left:50%;`で半分まで寄せたあとmargin-leftで絶対値を入れて戻す。
レスポンシブの場合は……どうしようか…。

```css
	.parents{
	  width:1000px;
	  margin:0 auto;
	}
	.child{
	  position:fixed;
	  left:50%;
	  marign-left:500px;
	}
```


Chrome、IE10↑で確認済み。
C#(.exe)からバッチに戻り値を渡す

こんにちは。@mashiです。

Windows環境にて、バッチから.exe(C#)を起動し、戻り値をバッチに返す。ということをしようとしたのですが、いろんな書き方がありなかなか上手くいかなかったので、できた方法をメモ。

```bat:exec.bat
setlocal enabledelayedexpansion

IF !ERRORLEVEL!==[戻り値] (
    rem なにか処理を書く
    exit 0
)
```

```C#:Program.cs
System.Environment.Exit([戻り値]);
```

※[戻り値]の箇所は書き換えてください

2017/11/15 修正いたしました。
ofxOpenCvでカラー映像とグレースケール映像を表示。色々やって目指せ笑顔検知。

しばらくofxOpenCvをいじり倒して笑顔検知まで作りたいと思っています。
まずハローワールド的に、
パソコンカメラのカラー映像と、グレースケール映像を表示させます。
これ
![スクリーンショット 2017-11-15 15.32.39.png](https://qiita-image-store.s3.amazonaws.com/0/76843/2cea2b01-dad4-eeda-a8ea-d91d5f7bbdc6.png)


プロジェクトジェネレーターでofxOpenCvを追加するのをわすれずに！
![スクリーンショット 2017-11-15 15.12.11.png](https://qiita-image-store.s3.amazonaws.com/0/76843/d1e8b5c4-c97b-b7f7-17c1-2a434e822157.png)

#実装方法

// カメラ使いますよ
ofVideoGrabber
// カメラから入った１フレーム分のカラー画像 インスタンス
ofxCvColorImage
// カメラから入った１フレーム分のグレースケールの画像 インスタンス
ofxCvGrayscaleImage
をそれぞれ定義

```cpp:ofApp.h

#pragma once

#include "ofMain.h"

/* これ追加 */
#include "ofxOpenCv.h"

class ofApp : public ofBaseApp{

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

		void keyPressed(int key);
		void keyReleased(int key);
		void mouseMoved(int x, int y );
		void mouseDragged(int x, int y, int button);
		void mousePressed(int x, int y, int button);
		void mouseReleased(int x, int y, int button);
		void mouseEntered(int x, int y);
		void mouseExited(int x, int y);
		void windowResized(int w, int h);
		void dragEvent(ofDragInfo dragInfo);
		void gotMessage(ofMessage msg);
    
    // カメラ
    ofVideoGrabber cam;
    
    // カメラから入った１フレーム分のカラー画像
    ofxCvColorImage colorImg;
    
    // カメラから入った１フレーム分のグレースケールの画像
    ofxCvGrayscaleImage grayImg;
		
};

```



initGrabberでカメラ映像を取り込み
↓
allocate()で処理するメモリ領域を確保
↓
    cam.update()でカメラからの映像更新
    ↓
    一個一個のカメラからのピクセルデータをカラーイメージに格納する
    colorImg.setFromPixels(cam.getPixels().getData(), 320, 240);
    ↓
    ofxCvGrayscaleImageにカラーイメージデータを突っ込んで変換
    grayImg = colorImg;
    ↓
    drawで描画



```cpp:ofApp.cpp

#include "ofApp.h"

//--------------------------------------------------------------
void ofApp::setup(){
    
    // カメラからの取り込み
    cam.initGrabber(320, 240);
    
    // カラー画像を格納する領域を確保
    colorImg.allocate(320, 240);
    // グレースケール画像を格納する領域
    grayImg.allocate(320, 240);
    
    /* (allocate 格納の意味) */

}

//--------------------------------------------------------------
void ofApp::update(){
    
    // カメラの更新
    cam.update();
    
    // 一個一個のピクセルデータをカラーイメージに格納する
    colorImg.setFromPixels(cam.getPixels().getData(), 320, 240);
    
    // グレースケールイメージにカラーデータを入れる
    grayImg = colorImg;
    
    
    
    /*  おまけコーナー */
    //colorImg.blur(10);   これでblurもかけれます
    /*
     colorImg.mirror(false, true); これで画像反転できます。
     void ofImage_::mirror(bool vertical, bool horizontal) 関数の仕組み
    */


}

//--------------------------------------------------------------
void ofApp::draw(){
    
    colorImg.draw(0,0, 320, 240);
    grayImg.draw(330,0, 320, 240);

}


```

次は差分と境界線か...
続く！
Raspberry Pi 3 raspbian stretchでSSH接続許可しないとSSH繋がらない問題

######株式会社XSHELL　デベロッパー　植田歩
##環境

- mac OS X El Capitan
- Raspberry Pi 3
- OS 2017-08-16-raspbian-stretch-lite.img

##設定
```
初期ログインID：pi
初期PW：raspberry
sudo raspi-config
```

GUIでインターフェースを選択。
SSHを選択。
enableを選択。

これでSSH接続できるようになる。


IPアドレスを確認するコマンド。

```
ifconfig
```
上記コマンド実行でIPアドレスが割り振られてない場合は、ネットに接続できてない可能性あり。
その場合はWiFi設定を確認し直す、再起動などを試みる。

##接続

PCから下記コマンドで接続。IPアドレスは上記コマンドで調べて出てきたものを使用。
@の前はユーザー名「pi」
初期パスワードはraspberry

```
ssh pi@192.168.0.10
```

---
[XSHELL](https://xshell.io/)はSBCを使いやすくするソリューションを提供しています。
[isaax](https://isaax.io/)、[IoTit](https://github.com/xshellinc/iotit)ぜひご使用になってご意見を頂きたく思います。
共に素晴らしいプロジェクトを実現させましょう！

---
c# 画面コントロール生成時の処理速度改善

よろしくお願い致します。

###前提・実現したいこと
c#にて、
事前に設定した質問と解答を
dbから取得し動的にコントロールを
配置するシステムを作っています。
コントロール生成に時間がかかってしまい
ここの速度をあげたいです。
現在、100コントロールで3秒程度。
これを1秒程度にしたい。
また、速度アップが無理であれば
他の仕様に変更することも可能。

###発生している問題・エラーメッセージ
画面にはtabcontrolの上に
layoutflowpanelを乗せ
その上にコントロールを追加しています。

追加するコントロールは
その都度dbから取得しています。
基本的には例えば以下のようなコントロールを
追加しています。

氏名 ラベル
氏名解答欄 テキストボックス
生年月日 ラベル
生成月日解答欄 ラジオボタン
            （元号 大．昭，平）
             テキストボックス3つ
             （年、月、日）

ソースとしては以下のような形です
 FlowLayoutPanel flowPanel = new FlowLayoutPanel();
 flowPanel.Dock = DockStyle.Fill;
 flowPanel.FlowDirection = FlowDirection.TopDown;
  flowPanel.AutoScroll = true;

  this.Controls.Add(flowPanel);
※下記は1つのボタンですが
    ここはdb内容を見ながら都度
    コントロールインスタンス生成を
     しながら動的に作成。
     下記はプロパティ設定はtextのみだが
      実際にはsizeなど
      他のプロパティ設定もある。

   Button button = new Button();
   button.Text = i.ToString();

   flowPanel.Controls.Add(button);


###試したこと
速度アップのため、ソースの見直しをしましたが
なかなかうまくいかないため、
マルチスレッド化を検証。

上記ソースにて画面を動的生成するのは
2つ目のタブである。
1つ目のタブに関しては
画面は固定で生成している。

そのため、2つ目の画面生成を
マルチスレッド化して
2つ目画面生成をしている間に
1つ目タブの固定画面に対して
ユーザーからの入力を受け付けようとしたが
マルチスレッド側にて画面生成をしているため
1つ目のタブのテキストボックスなどに
入力ができない（画面が触らない）
※お客様としては、2つ目のタブ画面生成時に
  1つ目のタブ画面のコントロールに
  入力が出来れば最悪仕様としては良い。


###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

言語 c# 2014
画面はlayout flow panelで動的に作成
Raspberry Pi 3 でサービス作って自動起動(systemd)

# ラズパイのプロジェクト配下にサービスを設置してシンボリックリンクを張って、systemdで自動起動設定をする
######株式会社XSHELL　デベロッパー　植田歩
##環境

- mac OS X El Capitan
- Raspberry Pi 3
- OS 2017-08-16-raspbian-stretch-lite.img

## 手順
/etc/systemd/systemから~/git/office_monitorにシンボリックリンクをはり、自動起動設定をする
シンボリックリンク作成

```

sudo ln -s ~/git/office-monitor/office-monitor.service /etc/systemd/system
sudo service office-monitor start
sudo service office-monitor stop
```

.serviceの書き方は調べてください。
一応サンプルです。
別プロジェクトのものなのでパスとサービス名が違います。

```

[Unit]
Description=thermo
Before=network.target
After=syslog.target

[Service]
Type=simple
User=pi
WorkingDirectory=/home/pi/thermo
ExecStart=/usr/bin/python2 /home/pi/thermo/serial-thermo.py
ExecStop=
Restart = always
TimeoutStopSec=60
StandardOutput=null

[Install]
WantedBy = multi-user.target

```


下記、自動起動設定コマンド

```
sudo systemctl enable office-monitor.service
sudo systemctl status office-monitor.service
```



---

[XSHELL](https://xshell.io/)はSBCを使いやすくするソリューションを提供しています。
[isaax](https://isaax.io/)、[IoTit](https://github.com/xshellinc/iotit)ぜひご使用になってご意見を頂きたく思います。
共に素晴らしいプロジェクトを実現させましょう！

---
Windows Subsystem for Linuxのbashをエクスプローラーの右クリックから一発起動する方法

# Windows Subsystem for Linuxとは
Windows環境でbashを使えるようになります。
Cygwinとか入れて管理しなくても良くなりました。
Windows上でこのファイルの中で重複行を除いた行数は何行だったっけ？って思ったときでも、

` sort [ファイル名] | uniq | wc -l `

なんて打てばすぐに答えが返ってくるようになります。便利ですね。

# 問題点
bashプロンプトの起動後に、該当のディレクトリまで

` cd /mnt/c/Users/nakagawa/Desktop `

などと移動しないといけないのがめんどくさくてかなわないので、エクスプローラの右クリックメニューと統合する方法を探しました。

 [bash on Windows をエクスプローラーから右クリックで一発起動する方法](https://meh.amebaownd.com/posts/1604697)

こちらの方法を試したのですが、フォルダを選択した状態でないとメニューに[Open Bash here]が追加されませんでした。残念。
フォルダ内の任意の場所から開けるようにするには別の設定が必要なようです。

# 結論から
以下のファイルを作成後、ダブルクリックでレジストリに登録するとうまくいきました。

``` openbashere.reg

Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\SOFTWARE\Classes\Directory\background\shell\openbashhere]

@="Open Bash here"

"Icon"="%USERPROFILE%\\AppData\\Local\\lxss\\bash.ico"

[HKEY_CURRENT_USER\SOFTWARE\Classes\Directory\background\shell\openbashhere\command]

@="cmd.exe /c cd /d \"%V\" && bash.exe"
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/38018/1c059867-c8e1-0edb-db6a-a6de7a39ba8c.png)


# 参考URL
* [bash on Windows をエクスプローラーから右クリックで一発起動する方法](https://meh.amebaownd.com/posts/1604697)
* [エクスプローラの右クリックメニューをカスタマイズする](https://qiita.com/tueda/items/0036ee8e9280f70f04f0)
Raspberry Pi Zero W でシリアル通信とか

XSHELLの川崎です。

ローカルmacからUSBシリアルを使ってシリアル通信します。
macと Raspberry Pi Zero W 間はシリアルで双方向通信するようにします。
![serial_connect.png](https://qiita-image-store.s3.amazonaws.com/0/208108/149f0361-81b4-4f8e-fb52-c5b67a0dd601.png)

#やったこと
以下を2017/10/18に実験してみました。

1.raspberry piにOSインストール
2.raspberry piを起動してsshとシリアルをraspi-configコマンドでenableにする
~~3.無線LAN設定として下記を/etc/wpa_supplicant/wpa_supplicant.conf末尾に追加~~

~~```
network={
    ssid="hogehogeネットワーク"
    psk="hogehogeネットワークのパスワード"
}
```~~

※インデントとか書式とか色々手間がかかるので下記の方が楽

```

sudo wpa_passphrase "hogehogeネットワークのSSID" "hogehogeネットワークのパスワード" >> /etc/wpa_supplicant/wpa_supplicant.conf
```

4.再起動後、SSHログインしてserial-getty@ttyAMA0.service切る

```

sudo systemctl stop serial-getty@ttyAMA0.service
sudo systemctl disable serial-getty@ttyAMA0.service
```

5.再起動
6.arduino開発環境のシリアルモニタ(改行コード=CRとLF、通信速度11520)で動作確認
配線はこんな感じです。
  Mac　　 raspberry pi
 GND -- GND(6番pin)
 TXD -- RXD(10番pin) GPIO15
 RXD -- TXD(8番pin) GPIO14





7.動作確認としてmacからraspberry piに信号を送り、raspberry piに繋がっているLEDをチカチカ

raspberry pi 側で下記bashスクリプトでgpioピンの状態を監視して、指定ピンに信号が来たらLEDにつながっているgpioの７番ピンを操作してLEDを点灯・消灯させます。
raspberry pi 側でのgpioピン操作はWiring Piを使用しました。

Wiring Pi：http://wiringpi.com/


・配線

![LED_ONOFF.jpg](https://qiita-image-store.s3.amazonaws.com/0/208108/a86865c8-dd25-28ca-3de0-926c8141c4df.jpeg)


・使用スクリプト

```
#!/bin/sh
/usr/local/bin/gpio mode 7 out

while :;do
    read INPUT < /dev/ttyS0;echo $INPUT
    VAR=`echo ${INPUT} | sed -e "s/[\r\n]\+//g"`
    if [ "$VAR" = "ON" ]; then
        /usr/local/bin/gpio write 7 0
        echo "点灯!!"
    elif [ "$VAR" = "OFF" ]; then
        /usr/local/bin/gpio write 7 1
        echo "消灯!!"
    fi
done
```

raspberry pi 側で上記スクリプトを動かす前に簡単なシリアルの動作確認しました。

arduinoの開発環境のシリアルモニタで疎通確認しました。

![シリアルモニタ起動.png](https://qiita-image-store.s3.amazonaws.com/0/208108/82b95c80-482c-43fa-11de-f7f76f16a5b0.png)

改行コードと通信速度は下記画像の通りに設定します。
ウィンドウが開いたらエンターキーを押します。
通信できていれば画像のようにログイン入力手続きの文字列が表示されます。
![ログイン.png](https://qiita-image-store.s3.amazonaws.com/0/208108/7371ced8-bbfc-66d8-3a60-0e591156a2f2.png)



疎通が確認できたら、シリアル監視用のスクリプトをraspberry pi側で動かしました。
```
chmod +x ./スクリプト
sudo ./スクリプト
```

上記のスクリプトがraspberry piで動いている状態でmac側から信号を送ります。
送り方は上記疎通確認で使ったarduino開発環境のシリアルモニタから信号を送りました。

![ON_OFF.png](https://qiita-image-store.s3.amazonaws.com/0/208108/1b095997-3003-0be3-eebb-a83d3b011fb6.png)

ん？？？送信できてるっぽいけど、ログインコンソールも返って来ますね。。。。
LEDがチカチカできてるのは確認できたので、とりあえず一旦ここまで
STM32でシリアル通信

XSHELLの川崎です。STM32マイコンボード「STM32F103C8」ボードを使ってでシリアル通信のテストをします。

- 環境
Arduino 1.8.5 + Arduino_STM32

- マイコンボード

RobotDyn STM32F103C8 Dev.Board

やったこと

1. シリアルポート１~3で通信
2. シリアルポート２の受信データをシリアルポート１の送信にする
3. シリアルポート１の送受信データをシリアルポート２の送受信データにする


# 1.シリアルポート１~3で通信

下記コードでシリアルポート1~3までの動作確認
loop内のSerial1の部分は適宜変更

```

char input[10];   // 文字列格納用
int i = 0;  // 文字数のカウンタ

void setup() {
  Serial1.begin(115200);
  Serial1.println("Serial port1");
  Serial2.begin(115200);
  Serial2.println("Serial port2");
  Serial3.begin(115200);
  Serial3.println("Serial port3");
}

void loop() {
  // データ受信
  if (Serial1.available()) {
    input[i] = Serial1.read();
     // 末尾に改行あったら送信
    if (input[i] == '\n') {
      // 受信文字列を送信
      Serial1.println(input);
      Serial1.println("\n");
      // カウンタ初期化
      i = 0;
    }else{
      i++;
    }
  }
}
```

Arduinoの開発環境のシリアルモニタで動作確認。


# 2.シリアル２の受信データをシリアル１の送信にする

```
char input[1] = {0};

void setup() {
  Serial1.begin(115200);
  Serial1.println("Serial port1");
  Serial2.begin(115200);
  Serial2.println("Serial port2");
  Serial3.begin(115200);
  Serial3.println("Serial port3");
}

void loop() {
  // データ受信したとき
  if (Serial2.available()) {
    input[0] = Serial2.read();
    // 受信文字列を送信
    Serial1.print(input);
    Serial1.print("\n");
  }
}
```

結果、１行１文字になった↓ので改行が来た時だけ改行(Serial1.print(“\n”);を実行するよう変更

```

)
h
o
g
e
h
o
g
e
```


変更部分のみ記載

```
void loop() {
  // データ受信したとき
  if (Serial2.available()) {
    input[0] = Serial2.read();
    // 受信文字列を送信
    Serial1.print(input);
    if (input[0] == '\n') {
        Serial1.print("\n");
    }
  }
}
```

結果、改行効かずに下記のようになった

```

 Serial port1
 raspberrypi login: hogehoge    kaigyoudekinai
```


原因はrasbianで実行している下記picocomコマンドの改行コードが\rだったから
picocomコマンドにオプションを付けて改行コードを\nを実行

```
picocom --omap crlf -b 115200 /dev/ttyS0
```

MacやWindowsを考慮して下記に変更

```
void loop() {
  // データ受信したとき
  if (Serial2.available()) {
    input2[0] = Serial2.read();
    Serial1.print(input2);
    if (input[0] == '\n' || input[0] == '\r' || input[0] == '\n\r') {
        Serial1.print("\n");
    }
  }
}
```

できました。
Cocos2d-xのサーバー通信方法(JSON+PHP+MySQL) Part1

#はじめに
インターネット上にあるCocos2d-xとサーバー通信方法の情報が少ないので自身が作ってきたものを投稿にしていく
Cocos2d-xを使用しサーバー通信したい人向けの内容

#サーバー通信の手順
1.通信したい情報をJSON形式で作る

2.JSONをCocos2d-xにてPHPにリクエストする

3.PHPを利用してMySQLに書き込みorデータ読み込みをする

#今回記事にするところ
- JSONの作成
- HTTPリクエスト

#JSONの作成
JSON作成の為に[picojson](https://github.com/kazuho/picojson)を使用する

```cpp:sample.cpp
#include "picojson.h"

//How to use
picojson::object obj;
obj.insert(std::make_pair("str", picojson::value("test")));
obj.insert(std::make_pair("val1", picojson::value(StringUtils::format("%i", 1)))));
obj.insert(std::make_pair("val2", picojson::value(StringUtils::format("%f", 1.1))));
    
picojson::value val(obj);
std::string json = val.serialize();
```

JSONに値を追加する時は[key][値(文字列)]を指定し下記のように追加する
>obj.insert(std::make_pair([key], picojson::value([値(文字列)])));

これでJSONデータは完成

#HTTPリクエスト
cocos2d-xにてHTTPリクエストを送信する

```cpp:sample.cpp
#include "network/HttpRequest.h"
#include "network/HttpClient.h"

//How to use
auto request = new cocos2d::network::HttpRequest();
    
request->setUrl("リクエストURL");
request->setRequestType(cocos2d::network::HttpRequest::Type::POST);
request->setTag("setInsert");
request->setResponseCallback([=](cocos2d::network::HttpClient* client, cocos2d::network::HttpResponse* response){
    if (response->isSucceed()) {
        //送信成功時の処理

    }else {
        //送信失敗時の処理
 
    }
});

//ここから上記のJSON作成
picojson::object obj;
obj.insert(std::make_pair("str", picojson::value("test")));
obj.insert(std::make_pair("val1", picojson::value(StringUtils::format("%i", 1)))));
obj.insert(std::make_pair("val2", picojson::value(StringUtils::format("%f", 1.1))));
    
picojson::value val(obj);
std::string json = val.serialize();
//ここまで
    
request->setRequestData(json.c_str(), json.length());

auto httpClient = cocos2d::network::HttpClient::getInstance();
httpClient->enableCookies(nullptr);
httpClient->send(request);
request->release();

```

これでリクエストURLにJSON形式の文字列を送信する事が可能

#おまけ
今回はCocos2d-xを使用しているが、

- JSON作成
- HTTPリクエスト送信

この二つが出来れば同様にサーバー通信が可能

#Part2
次回は[リクエストURLのPHP作成](https://qiita.com/708QBT/items/abac05038901cd1d418d)
macOS High Sierraでdiffツールmeldが動かないときは...

このコマンドを実行しましょう〜
私はこれで動くようになりました。

```
unlink /Applications/Meld.app/Contents/Frameworks/libz.1.dylib
```

下記issueに対処法が載ってました。
https://github.com/yousseb/meld/issues/50
deviseでメールアドレスではなく、ユーザー名でログインできるようにする

# 前提条件
- deviseが既に導入済みである。
- Rails 4.2.6
- devise 4.3.0
- Userモデルが存在する

# はじめに
https://qiita.com/dayone80/items/ce04b21690f5f50a5cfa
https://qiita.com/HamaTech/items/8a4694fa40414aa029ea
これらの記事を参考に自分で実装しようとしたが、deviseのバージョンの違いで詰まったので記録しておく。

# Userモデルにnicknameカラムを追加する
```shell-session
$ rails g migration add_username_to_users username:string:uniq
```
生成されたマイグレーションを実行。
```shell-session
$ rake db:migrate
```

# application_controller.rbに追記
```rb:/controllers/application_controller.rb
  #以下を追加
  before_filter :configure_permitted_parameters, if: :devise_controller?

  protected

  def configure_permitted_parameters
    #strong parametersを設定し、usernameを許可
    devise_parameter_sanitizer.permit(:sign_up) { |u| u.permit(:username, :password, :password_confirmation) }
    devise_parameter_sanitizer.permit(:sign_in) { |u| u.permit(:username, :password, :password_confirmation) }
  end
```

# user.rbに追記
```rb:/model/user.rb
  #以下を追加
  validates :username, presence: true, uniqueness: true, length: {maximum: 50}

  #登録時にメールアドレスを不要とする
  def email_required?
    false
  end

  def email_changed?
    false
  end
```

# Viewファイルを書き換える
`devise/registrations/edit.html.erb`と`devise/registrations/new.html.erb`と`devise/sessions/new.html.erb`の`:email`を`:username`に変更。

# 設定ファイルを書き換える
```rb:/config/initializers/devise.rb

  config.authentication_keys = [:username]
  config.case_insensitive_keys = [:username]
  config.strip_whitespace_keys = [:username]
```
`authentication_keys`はコメントになっているのでコメントを外して:usernameを指定。
そのほかの2つは:emailを:usernameに変えるだけ。
linuxで画像圧縮したいときのあれこれ

## 背景

Webサービスを運用する上で、サイトスピード向上を図るために画像の最適化をすることになりました。

今回はAWS上で管理する画像も含めて圧縮し直す方法も備忘録として残しておきます。


## クラウドからダウンロード
まずは特定のS3上の特定のディレクトリからローカルに画像をダウンロード。

`$ aws s3 cp /hoge/foo/image /local/image --recursive`

cpの第一引数にS3上の管理ディレクトリ、第二引数にローカルディレクトリを指定します。

また、オプションで付けている `--recursive` はディレクトリを再帰的に読み込む役割をしてくれます。

このオプションがないとファイル指定でのダウンロードしか行えなくなるので注意です。

## 画像圧縮

基本的にGUIには頼りたくないのでコマンド入力で進めていきます。

画像の拡張子によって用いるツールが異なります。

### JPG,JPEGの場合

jpegoptimで最適化

例：ファイルを指定
`$ jpegoptim ファイル名 オプション名`

例：ディレクトリ内全てのjpeg画像に対して
`$ find . -name *.jpeg | xargs jpegoptim --max=90 —recursive`

### pngの場合

pngquantで最適化

例：ファイル名を変えずに上書きかつ圧縮率を指定
`$ pngquant -f --ext .png --quality=60 hoge/*.png`

## クラウドに再アップロード

引数の順番を変えてあげるだけでおｋ
`$ aws s3 cp /local/image /hoge/foo/image --recursive`

## まとめ
画像の最適化を行うと60-70%ほど画像の圧縮が図れます。

google speed insightsなどサイトスピードの評価が著しく悪かった場合は画像圧縮も検討してみてください。
https://developers.google.com/speed/pagespeed/insights/?hl=ja
backlogを個人で使ってみる

#会社でなんとなく使っていたbacklogを個人用として登録してみる。

https://www.backlog.jp/


↑で謳われているのは以下の通り。
##自分の使い道として翻訳してみた。

コラボレーションを促進して仕事を素早く、楽しく

Backlogはシンプルで直感的に使えるデザインが特長です。
開発者はもちろん、マーケターやデザイナーなどのチームメンバー全員がすぐに使いこなせます。
一つのプラットフォームでチームメンバーの作業状況をこまめに共有することで、プロジェクトを迅速に進めることができます。

なるほど！ぼっちにも優しい世界や！


##プロジェクト管理に必要な機能がオールインワン


###プロジェクト管理 
チームメンバーの仕事を一つのプロジェクトにまとめることで担当者や期限を明確にします。作業の進捗やプロジェクトの達成率の見える化も実現します。

###課題管理  
プロジェクトの課題を作成して、担当者・スケジュール・優先順位を個別に設定できます。作業完了時の連絡や対応状況の変更も簡単にできます。

###ドキュメントとファイル管理  
Wikiを使ってチームメンバーに作業マニュアルや議事録などの情報を共有しましょう。
PFDからAiやPsまで大容量ファイルもBacklogで管理できます。

###バージョン管理  
BacklogはGitやSVNなどのバージョン管理システムに対応しています。
Backlogに記録されたチームメンバーのコミット履歴を確認して、コードレビューやプルリクエストをしましょう。

#はえ～。すごいの～。

##ガントチャートやマイルストーンで作業計画を一目瞭然に
Backlogの課題と紐付いているガントチャートを活用することで、プロジェクトの進捗を一目で把握できます。
ガントチャートの使い方は簡単。
課題登録時に開始日、期限日を設定するだけです。
マイルストーンやバーンダウンチャートも併用することで数ヶ月単位の長期プロジェクトを区切って管理できます。

###プロジェクトの進捗を一目で把握
Backlogはプロジェクトの進捗を一目瞭然にします。
チームメンバーの作業の進み具合を確認することで、プロジェクトの達成率を確認できます。

#すごい！すごい！
#エクセルを開いたり閉じたりする仕事ができなくなるな！


#料金プランについてフリープランがあるので今回はこれで登録してみる（個人利用だしね）

出来た
https://gyazo.com/d83b433ebd39a63fee41c2fa3985eee8
超初心者がRuby on Railsをやってみて

ぜひ、これからプログラミングをまない始めるという方々に読んで欲しい。
＊マークダウンの記述の仕方は今回qiitaを通して初めて知りました。
##**目次**
-背景
-目的
-サマリー
-課題
-解決に向かって
-やったこと
-まとめ
-今後
##**背景**
現在文系大学4年生で来年の4月からランサーズ株式会社に新卒入社をするということでエンジニア学習をすることになった
「文系なのにプログラミングできるの？」←はい、できません
例に漏れずほぼ未経験であったため、先輩方に言われるがまま
手始めにruby on railsをやることに、、、
もちろん、「なんだそれは」状態であった

HTMLに触れたことがあるくらいのレベルの当方は
いろいろなプログラミング言語がある中で、
どんな言語によって何ができるのかなんて全く分からなかったため、始めるタイミングで軽く調べることに

##**目的**
・入社時にエンジニアとしてスタートできるようにするためにrailsを使って学習する
・4月入社に合わせてそのタイミングにまでに何かしらのサービスを作成する
・初心者という段階から有級者のレベルにまでもっていく
##**サマリー**
「とりあえずやってみる」というわけではないが、
何もわからないからとにかく始めてみよう

##**課題**
今まで「プログラミング」に触れる機会などなかったので、とにかくなにもわからない状態である
わからないため語句の理解ができていない
目的達成(tutorialの完了）までの計画設定
以前からやっている仕事・学校との時間の兼ね合い
まとめ方・プレゼンの仕方
そもそもプログラミングって何ができるの状態
理解できなさ過ぎて怠けてしまう

##**解決(どういう風にして)**
ruby on rails tutorial を利用して学習を行い理解を深めていく
学習中に出てきたわからない語句をその都度調べる
完了までの計画は上司の力を借りて確認しながら立てる
時間は自身の用事との比重関係を考えエンジニア学習の時間を捻出
プレゼン方法は上司に相談する
(そこで気づいたことの一つに「いままでやってきた営業とは全然違う」というのがあげられる)
グーグル先生にめちゃんこお世話になる
モチベートの仕方の一つとして「怒られる」ことによって引き締まった←見直す必要あり
**やったこと**
今回、tutorialに関しての内容は今後詰まったとこシリーズでまとめるため今回割愛します。
初心者目線で助けられたものとして、@mochikichi321さんの
[投稿](qiitahttps://qiita.com/mochikichi321)を演習の答えわせやエラーの簡易確認に利用させていただいた。
今回やっていて起きたエラーの大半がケアレスミスで片付くものであった（以下内容である）
インデントの位置、全角半角のミス、end忘れ、保存時のcontrol+Sの入力ミスによるSの誤入力
成果物はrailsで作成したツイッター似サイト
https://rocky-shore-85049.herokuapp.com/
完成時画像
<img width="1011" alt="rails.png" src="https://qiita-image-store.s3.amazonaws.com/0/213619/c2ac0526-1ed3-7074-5b98-465f19fd7cd4.png">

#**まとめ**
今回完成まで行けたのは先輩社員の存在が大きく一人で完成はまず難しかったとみられる。
もし一人で学習するのであれば学習環境として辞典というわけではないがそれに見合うものを用意するのもいいのではないかと感じた。
また、自身が作成予定の成果物をモックアップでははなく、実物で作成に移る前に確認することをやった方がいいと感じた<=初心者（当方）からするとモックアップと違うものが出来上がることが不安
計画に沿って行うことが何よりも重要である。
これが何よりもの学びであり、何よりも重要であった。
上記にあるケアレスミスが目立ったのでその点も注意しながら進めると詰まる部分が減り、円滑に作業を行えるようになる。
初心者は自分の力を過信しすぎず素直にわからない箇所は人に聞くこと、計画等は余裕をもって行うことが大切だと感じた。

#**今後**
時間配分・計画を初段階で考え定期的に見直す癖をつけていきたい。
自身の意欲の生み出し方、モチベートの仕方をルーティン化できるようにしたい。
現在が11月末ということで残り4か月で何かサービスを作成したい。
方法としては今月から来月頭に向けてprogateを利用してrails、SQL、gitについて理解をより深め終わり次第、ワイヤーフレームを作成しリリースに向けて動いていく。
Chrome 62 でキャプチャが簡単にできるようになりました

**Chrome 62** より Chrome Dev Tool で選択範囲のスクリーンショットができるようになりました。
意外とLGTMがあったので記事を簡潔に再編集しました。

# キャプチャの手順

1. `Command + Option + i` で Dev Tools を開く
2. `Command + Shift + P` でコマンドウィンドウを表示
3. `capture` とか `screenshot` などのキーワードを入力しコマンドを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208400/0406ef5f-eb6a-9e38-dc3f-f70e8c81f0f3.png)

※ Windows の場合は `Command → Ctrl` に読み替え

選択できるコマンドとキャプチャの種類は以下のとおりです。

|コマンド| キャプチャの種類 |
|----|----|
| Capture area screenshot| マウスの選択範囲をキャプチャ |
| Capture full size screenshot|ページ全体をキャプチャ|
| Capture node screenshot| Element mode で選択している要素をキャプチャ |
| Capture screenshot|表示中のウィンドウサイズでキャプチャ|


キャプチャ画像はいずれもPNG形式で、ダウンロードフォルダに保存されます。
VBScript 2本ノック

#プロセス
##指定した名前のプロセスが存在するか調べる 
WMI:Select * From Win32_Process を使えばいい
http://yozda.exblog.jp/15574326/

#ファイルシステム
##ZIPファイル圧縮
https://qiita.com/jTakasuRyuji/items/dcc650a7f4ad33bc73bf
Visual Studio | WPF > 画像 > png画像を表示する > BitmapImage()と.Source指定

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

pngなどの画像を表示するには。

### 参考

[WPF での画像読み込みをバックグラウンドで処理する](https://chitoku.jp/programming/wpf-lazy-image-behavior) by ちとくさん

情報感謝です。

[Image.Sourceプロパティ](https://msdn.microsoft.com/ja-jp/library/system.windows.controls.image.source(v=vs.110).aspx)

### code

上記のリンクのうち、Image.Sourceを指定する方法を使ってみる。

```MainWinow.xaml
<Window x:Class="_171115_t1200_imageLoad.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:_171115_t1200_imageLoad"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel>
            <Button Name="B_loadImage" Content="load image" Height="30" Click="B_loadImage_Click"/>
            <Image Name="IMG_deltaFlyer" Width="400" Height="270"/>
        </StackPanel>
    </Grid>
</Window>
```

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

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

        private void B_loadImage_Click(object sender, RoutedEventArgs e)
        {
            // UIスレッドで行う例
            var source = new BitmapImage();
            source.BeginInit();
            source.UriSource = new Uri("file://D:\\Image_171115\\deltaFlyer.png");
            source.EndInit();
            IMG_deltaFlyer.Source = source;
        }
    }
}
```

deltaFlyer.pngを用意してボタンを押してみた。

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/5ca5b565-00cc-5799-77a1-a3d98b37471a.png)

### 備考

画像の表示に関しては他にもいろいろ方法はありそうだ。

必要になった時点で他の方法を使ってみる。

[WPFでの印刷の基本(3) 図形や文字の印字](https://qiita.com/hugo-sb/items/a713c2c230a4ade2c13c)
ブロックチェーン・ベースのオブジェクトストレージのオブジェクト一覧の表示方法を改善してみた

#はじめに
[ブロックチェーン・ベースのオブジェクトストレージを作ってみました](https://qiita.com/smatsui@github/items/a67efff76c1e3519b815)が、オブジェクトやコンテナ一覧を取得すると余計な文字列が付いていました。

`testuser`というアカウントの`container0`というコンテナの下に`obj0`と`obj1`というオブジェクトを作成し、その一覧を取得するコマンドを投げる場合、本来であればオブジェクト名の一覧だけ返ってきて欲しいところですが、現状では下の例のように余計な文字列もくっついて返ってきます。

```shell-session
$ curl -X GET http://localhost:3000/testuser/container0
Resource {id=org.acme.objectstore.Object#testuser/container0/obj0},Resource {id=org.acme.objectstore.Object#testuser/container0/obj1}
```

これは、Hyperledger Composerのクエリが返すオブジェクトを文字列に変換して表示しているためです。今回、オブジェクトやコンテナ一覧の表示方法を改良してみました。

#改善方法
下のコードのように、`query()`メソッドの戻り値`results[]`をループで回してオブジェクト名を取得して返すようにしました。

```js
router.get('/:accountid/:containerid', function(req, res, next){
  console.log("listing objects for " + req.params.accountid + " in " + req.params.containerid);
  var selectStatement = businessNetworkConnection.buildQuery('SELECT org.acme.objectstore.Object WHERE (container == _$class)');
  var accountContainerId = req.params.accountid + "/" + req.params.containerid;
  businessNetworkConnection.query(selectStatement, { "class": "resource:org.acme.objectstore.Container#" + accountContainerId })
  .then(function(results) {
    let objects = "";
    for(let i=0; i<results.length; i++){
      objects += results[i].objectId;
      objects += ",";
    }
    res.send(objects);
  }).catch(function (error){
    res.send(error);
  });
});
```

上記のコードはオブジェクト一覧を返すメソッドですが、コンテナ一覧を返すメソッドにも同様の変更を加えています。では、早速コードをテストしてみましょう。

```shell-session
$ curl -X GET http://localhost:3000/testuser/container0
obj0,obj1,
```

余計な文字列を排除し、以前よりも見栄えを良くすることができました！コードは[こちら](https://github.com/smatsui/object-storage-app)に置いています。

#おわりに
将来的にはJSONやXMLの形式でオブジェクト一覧を表示したいです。
kotinで時差を算出する

##　時差の計算
DST(サマータイム)とか端末時間とか実は結構罠があるよね

## ダメな例
```
val deviceTimezone = TimeZone.getDefault()
val japanTimezone = TimeZone.getTimeZone("Asia/Tokyo")

val timeDifference = deviceTimezone.rawOffset - japanTimezone.rawOffset 
+ deviceTimezone.dstSavings - japanTimezone.dstSavings
```

dstSavingsが冬時間になると自動で0になると思ってたが幻想で、冬でも1時間あるので時差が+1時間されちゃってました・・・

## 動くけどあんま好きじゃない例

```
val deviceTimezone = TimeZone.getDefault()
val japanTimezone = TimeZone.getTimeZone("Asia/Tokyo")

val format = "yyyyMMddHHmm"
val deviceDateTimeStr = Moment(timeZone = deviceTimezone).format(dateFormat = format)
val jpDateTimeStr = Moment(timeZone = japanTimezone).format(dateFormat = format)
val deviceDateTimeStrDate = deviceDateTimeStr.toJPDate(format)
val jpDateTimeStrDate = jpDateTimeStr.toJPDate(format)

val diff = Moment(date = deviceDateTimeStrDate) - Moment(date = jpDateTimeStrDate)

```

Momentというライブラリで好きで使っているんですが、これでとりあえず計算・・・
うーん、クレバーじゃないな・・・もっといいやり方ないかな
swiftで画像を動かす

色々本を買ってswiftを勉強していたが、単純に画像を動かす方法がなかったのでメモ

繰り返し動かすTimerの方法はあったが、そうでなく単純に並行移動したい時


import UIKit

class ViewController: UIViewController {
    
    
    @IBOutlet weak var ushi: UIImageView!//動かしたい牛の画像
    @IBOutlet weak var kuma: UIImageView!//動かしたいクマの画像

    var animator: UIViewPropertyAnimator!
    

    override func viewDidLoad() {
        super.viewDidLoad()
        
        animator = UIViewPropertyAnimator(duration:1.0,curve: .easeInOut){
            self.kuma.center.y += 500//これでクマの画像は下に
            self.ushi.center.x += 500//これで牛の画像は右に
        }
        

    }
    
    @IBAction func fallTapped(_ sender: Any) {
        //ボタンが押されたら、アニメーションがスタートする
        animator.startAnimation()
    }
    

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }


}


ボタンを何回も押したらそのぶん動くかと思ったが1回目のみしか動かないのが謎
週報

#研究のための議論の話題について
##紛糾した議論の議題について
＊iPhone派かandroid派か
＊擬似就職面接（先生が人事部で、僕ら三人の集団面接設定）
＊たばこはありかなしか
＊消費税の増税は賛成か反対か
＊

##和やかな議論の議題について
＊最近のjk用語について話し合う
＊サンタクロースは実在するのか
＊お茶のトップを決める
＊研究室に新しい冷蔵庫は必要か
＊映像に対しての感想
＊

##どんなときに空気が悪くなるのか
＊時間制限をもうけて最後に発表をしてもらう，しょぼかったらペナルティ，よかったら褒美

＊他の人よりいい意見を言うと罰ゲームを免れる，つまり他人の意見をつぶしつつ，自分がいい意見を発言することで，人間の醜い蹴落とし合いを実現できる．（個人戦）

＊全体的にいい意見が出たら全員にご褒美，つまりみんなと協力し合いいい意見を出すことを目的としている（協力戦


個人戦，協力戦
Jupyter on GCP で keras.layer.LSTM やると Segmentation Fault になる問題

## ハマった問題

* GCP に pyenv で anaconda を入れて jupyter を起動
* `jupyter notebook --ip=0.0.0.0 --port=8888` でサーバを起動し、ローカルから`http://<GCEインスタンス外部IP>:8888/`に接続
* ipynb を作り、 その中で keras.layer.LSTM のインスタンスをつくると落ちる

## 原因の調査

実行していたコードはこれで、単純なテキスト分類タスク

```python
 1. from keras.layers import Input, LSTM, Embedding
 2. 
 3. MAX_SEQUENCE_LENGTH = 500
 4. VOCABULARY = 10000
 5. EMBEDDING_DIM = 300
 6. LSTM_OUTPUT_DIM = 100
 7. EPOCHS = 15
 8. BATCH_SIZE = 1024
 9.
10. sequence_input = Input(shape=(MAX_SEQUENCE_LENGTH,), dtype='int32')
11. embedded = Embedding(output_dim=EMBEDDING_DIM, input_dim=VOCABULARY, input_length=MAX_SEQUENCE_LENGTH)(sequence_input)
12. preds = LSTM(LSTM_OUTPUT_DIM, return_sequences=True)(embedded)
13. 
14. model = Model(sequence_input, preds)
15. model.compile(loss='categorical_crossentropy', optimizer='adam', metrics=['acc'])
```

* 上記の LSTM インスタンスを作成している12行目のところで `Segmentation fault` と出て終わってしまう
* そもそも学習すら走らせてないのに、インスタンス作成で死ぬってどういうこと？

### LSTM を宣言しないとどうなるか

* すんなり compile まで通る

### メモリの上限にきてるのではないか

* GCE のメモリを 240GB に増やして実行
* 使用率5%程度まで使用して、やはり `Segmentation fault` で落ちる

### LSTM の出力次元をいじるとどうなるか

* LSTM の出力次元を 10 に変えてみた → 動いた！！！
* LSTM の出力次元を 50 に変えてみた → 動いた！！！
* LSTM の出力次元を 51 に変えてみた → 動かない！！！ （Segmentation fault）
* LSTM の出力次元を 60 に変えてみた → 動かない！！！ （Segmentation fault）
* 50 と 51 の間に謎の壁がある

### `keras lstm segmentation fault` でググる

* いろいろ出てくるが、全部 `model.fit()` 時の `Segmentation fault (core dumped)` エラー
* 今回は LSTM 宣言しただけで起きてるので、参考になるものがなかった

## 解決方法

* ふと、「これは jupyter の問題だったりするんじゃないか？」と思って調べたところ
    * https://github.com/jupyter/jupyter/issues/215
    * この人は `anaconda` を再インストールしたら解決したと言っている

* ふと、「anaconda の最新版のバグなんじゃないか」と思って
    * anaconda3-5.0.1 （当時最新版）から anaconda3-4.4.0 に変更
    * jupyter を再起動し、コードを動かすと………動いた……

* 結論、 anaconda3-5.0.1 でのバグっぽい？
* これ以上調べている時間がなかったので、今回はここまでで原因調査を終了
* 解決して良かったが、気持ち悪さが残るので時間があるときに調査してみよう
Unityのスクリプトが組めません

初投稿です。今私はunityでゲームを作っています。個人でゲームを作るのは初めてで、unity初心者なのでわからないことばかりです（汗）。

「プレーヤーが物をつかんで運び、ある籠まで持っていって、いくつかの物をすべて籠に入れて片付けられればクリア」という片付けるゲーム（掃除ゲーム）を作りたいのですが、どういうスクリプトを組めばいいでしょうか？
いろいろ教えてほしいです！
Railstutorialのテスト9.17で詰まった話

バージョン：
ruby 2.3.1
Rails 5.1.4

[Railsチュートリアル](https://railstutorial.jp/)をやってたら、9章のユーザ認証のあたりで書かれていないエラーが起きたのでメモしておきます。

[テスト9.17](https://railstutorial.jp/chapters/updating_and_deleting_users?version=4.2#code-edit_update_redirect_tests)では、編集しようとしているユーザがログイン中のユーザと違った場合のテストを記述していますが、ここで次のようなエラーが。

![2017-11-15 (2).png](https://qiita-image-store.s3.amazonaws.com/0/208875/aa058243-d4e4-22e1-292b-14642ced950d.png)
>ActionController::UrlGenerationError: No route matches {:action=>"update", :controller=>"users", :id=>#\<User id: 762146111, name: "Michael Example", ...\>}

idがユーザのid(762146111)ではなくユーザ自身のオブジェクト(#\<User id: 762146111, name: "Michael Example", ...\>)を参照しているのが問題かと思い、明示的にidを呼ぶようにしました。

```ruby:user_controller_test.rb
require 'test_helper'
class UsersControllerTest < ActionController::TestCase

  (中略)

  test "should redirect update when not logged in" do
    patch(:update, params: {id: @user.id(←ここ！), user:{name: @user.name, email: @user.email}})
    assert_not(flash.empty?())
    assert_redirected_to(login_url)
  end

  (中略)

  test "should redirect update when logged in as wrong user" do
    log_in_as(@other_user)
    patch(:update, params: {id: @user.id(←ここ！), user:{name: @user.name, email: @user.email}})
    assert(flash.empty?())
    assert_redirected_to(root_url)
  end

end
```
これで治りました。
指定されたバージョン(Rails 5.1.2)と違うバージョンで走らせていたため、挙動が変わったのかもしれません。

ただ、他の場所でエラーが起きなかったり、このあとコードを元に戻しても同じエラーが起きなかったりと不可解な点が多いです。
もしかしたら他の原因があるのかもしれませんが、とりあえず僕はこれで解決したという事実だけ載せておきました。

#教訓
教科書どおりにやる時はちゃんとバージョンを合わせよう(gemも全部合わせよう)