OmniAICreator/Qiita-1.07M huggingface dataset:
spring-securityを3から4にあげた時にはまったこと

# 概要
Spring3から4へのアップデート中にspring-securityをアップデートする必要がありました。
Spring4にアップデートして諸々対応後リリースして動作確認してみると、ログイン時に「403　Forbidden」となってしまいました。

# 解決策
以下の３点の修正でアップデートできました。

- CSRFの設定をdisableにすること
- アクセス制限のフォーマットの変更
- ログインフォームのname属性名の変更

# 詳細
基本的には以下のブログにある通りです。
（お世話になりました...）

http://blog.afnf.net/blog/54

このブログで紹介してくれている内容のうち、
僕のプロジェクトの場合以下の二点のみの修正で良さそうでした。

- \<form-login\>のデフォルト値変更
- applicationContext-security.xmlの変更

この後、idとpasswordを入れてログインしようとすると４０３のエラーが出てしまいました。

tomcatのエラーログをみるとなんかそれっぽいログがでていました。

```
10:12:47 [http-bio-8080-exec-5] DEBUG o.s.security.web.csrf.CsrfFilter - Invalid CSRF token found for http://xxxxxxxx:8080/admin/security_check
```

しぶしぶマイグレーションガイドを見ると、CSRFの設定が必要とわかりました。
http://docs.spring.io/spring-security/site/migrate/current/3-to-4/html5/migrate-3-to-4-xml.html

社内のCSRFの危険性もあまりないと判断して、以下の設定をして一件落着でした。

```
<http>
	...
	<csrf disabled="true"/>
</http>
```
超人工生命ハッカソンのサポートページ

2016年4月9日の超人工生命ハッカソンの事前準備についてです。

当日はネット回線が十分に提供できない見込みです。事前に下記の環境構築お願いします。

+ Mac, Ubuntu14.04推奨 ([Windows10へのインストール方法](http://qiita.com/autani/items/4daa5587773631245d86)）
+ Unity
+ Python環境

# Unityのダウンロード
## Ubuntu
```
wget http://download.unity3d.com/download_unity/unity-editor-installer-5.1.0f3+2015082501.sh
sudo sh unity-editor-installer-5.1.0f3+2015082501.sh

# run
./unity-editor-5.1.0f3/Editor/Unity

# if background is pink, install:
sudo apt-get install lib32stdc++6 -y
```
## Mac
Unityをインストール。UbuntuのGPUで学習させたい場合はLinuxのUnityバージョン(5.1.0)と合わせておくと、相互運用できるかと思います。

アセットなどUnityアセットストアで予めダウンロードしておいておくと楽しめると思います。

# Python環境の構築
Python2.7系で動作確認しています。

```
pip install chainer
pip install ws4py
pip install cherrypy
pip install msgpack-python
pip install matplotlib
```

# LISのダウンロード
https://github.com/wbap/lis

# Python環境の構築でエラーが出る場合
エラーが出て大変な場合は、下記のようにpyenvでAnacondaの環境を整えるのが良いと思います。

このインストールスクリプトでpyenvをインストールします。（ページ内に書いてありますが最後に.bashrcに追加するのを忘れずに）
https://github.com/yyuu/pyenv-installer

そうするとpyenvが使えるようになるので
```
pyenv install anaconda-2.4.0
```
で環境を整え、その後chainerなどをインストール。


# 参考
http://scs.ryerson.ca/~aharley/vis/conv/
deviseを使っている時の画像アップロード手順

views/devise/registrations/new.html.erb

にこれを追加
editにも追加する。

```lang:new.html.erb

   <div class="field">
    <%= f.label :image %><br />
    <%= f.file_field :image %>
  </div>

```

```lang:edit.html.erb

   <div class="field">
    <%= f.label :image %><br />
    <%= f.file_field :image %>
  </div>

```


アプリケーションコントローラーにストロングパラメーターを追加
controllers/application_controller.rb

`devise_parameter_sanitizer.for(:sign_up)<< [:name, :phone_number, :image]`

`:image`を追加。

```lang:application_controller.rb

 class ApplicationController < ActionController::Base
  # Prevent CSRF attacks by raising an exception.
  # For APIs, you may want to use :null_session instead.
  protect_from_forgery with: :exception
before_action :configure_permitted_parameters, if: :devise_controller?


  private

  def configure_permitted_parameters
    devise_parameter_sanitizer.for(:sign_up)<< [:name, :phone_number, :image]
    devise_parameter_sanitizer.for(:sign_in)<< [:name, :phone_number]

  end


end


```
Ubuntu14.04サーバへのOwnCloud導入ログ

# 環境
Ubuntu14.04サーバ

```shell-session
$ cat /etc/lsb-release 
DISTRIB_ID=Ubuntu
DISTRIB_RELEASE=14.04
DISTRIB_CODENAME=trusty
DISTRIB_DESCRIPTION="Ubuntu 14.04.4 LTS"
```

# OwnCloudのインストール
```shell-session
$ wget -nv https://download.owncloud.org/download/repositories/stable/xUbuntu_14.04/Release.key -O Release.key
$ apt-key add - < Release.key

$ sh -c "echo 'deb http://download.owncloud.org/download/repositories/stable/xUbuntu_14.04/ /' >> /etc/apt/sources.list.d/owncloud.list"
$ apt-get update
$ apt-get install owncloud
```

httpアクセスができないという問題が発生したが、これはサーバを立てた向こうの人が80番ポートを開放していなかったことが原因の模様。
ポート開放が反映されるまでのタイムラグなどもあったようで混乱したが、apache や MySQL を予めいれなくても勝手にインストールしてくれた。

```shell-session
$ mysql -u root -p
mysql> CREATE DATABASE owncloud;
mysql> GRANT ALL ON owncloud.* to 'owncloud'@'localhost' IDENTIFIED BY 'owncloud';
```

この後、
http://(インストールしたサーバーのIPアドレスもしくはホスト名)/owncloud/
にアクセスするとowncloudの画面が表示された。

ここでユーザー登録やDB設定を行うが、初めDB設定に気づかないでいると SQLight が自動的に選択された。
MySQL に変更するには [ここ](http://dsp74118.blogspot.jp/2012/07/ownclouddbsqlitemysql.html) を参考にした。
DB名にはowncloud,DBユーザー名,パスワードを入力し、無事ログインを確認。

# おわりに

本格的に運用するためにはSSLや、apache,MySQL の設定を正しく行わないと困った自体になりうるのではないでしょうか。とても便利だと思うので是非活用したいところです。
perlとphpの怖い違い…

Perlのmyって、便利だと思うんですが、PHPはmyが無いために変数の命名をきっちりせざるを得ない、
つまりPerlのほうが変数の命名を手抜きしやすいですね。

```for.php
<?php

for($i=0;$i<10;$i++){
        # 外側の$iを再利用してしまう。別な変数名を使わざるを得ない
        for($i=0;$i<10;$i++){
                print $i."\n";
        }
}

?>
```

→結果は0～9が出力される

```for.pl
#!/usr/bin/perl

for(my $i=0;$i<10;$i++){
        # my があるので$iを内側のforの中で再定義できる（外側の$iには影響なし）
        for(my $i=0;$i<10;$i++){
                print $i."\n";
        }
}
```

→結果は0～9が9回出力される
自作クラスをテストしようとしたら、Ambiguous use of '***' とかいうエラーがでた(´･ω･`)

クラスっていうか extensionだけども
（ObjC は未確認）

#経緯

Swift における `join` の関数ちょっとなげえよな
ってことでこういう Extension なファイルを作ったわけです

だけど・・・

```swift:ArrayExtension.swift
extension SequenceType where Generator.Element == String {
    // 通る
    public var join: String {
        return self.join("")
    }
    // 通らない
    public func join(separator: String) -> String {
        return self.joinWithSeparator(separator)
    }
}
```

> Ambiguous use of 'join'

テストクラスで、プロパティの join は通るのに、
ファンクションの join が表題のエラーを起こすわけです
でもテストじゃなければビルドが通る
Why? (´･ω･\`)

#原因

Xcode の右側に **Target Membership** という項目があって
普通はこんなんになってるはずなんですが↓

- [x] [ProjectName]
- [ ] [ProjectName]Tests
- [ ] [ProjectName]UITests

今回はテストするからこういうかんじなんかなー（ぽえー）
って Tests の方にもチェックを入れてたので
エラーが起きてしまいました

- [x] [ProjectName]
- [x] [ProjectName]Tests
- [ ] [ProjectName]UITests

んー 時間かえせ！ (´･ω･\`)

#ついで

↑の ArrayExtension.swift のテストファイルの
ArrayExtensionTests.swift の方も、ターゲットを２箇所チェックしてましたが
こっちはこういうエラーがでます

>Cannot load underlying module for 'XCTest'

こっちはすぐ気づきましたが、Ambiguous use of...
は他の原因でも発生するっぽくてむだにいろいろ探して気づかなかった
LumenのPHPUnitでテスト用のDBを使う


Lumen 5.2のPHPUnitでのユニットテストでテスト専用のDBを使うやり方が公式だとよくわからなかったのですが、
このあたりにありました。

> https://laracasts.com/discuss/channels/testing/how-to-specify-a-testing-database-in-laravel-5

.envに書いたりとか、configファイルを作ったりとか色々なやり方があるようですが、
自分の環境では最も簡単にできるシンプルなやり方がわかりました。

例えば、開発用にMySQLで"dbname_dev"という名前のDBを使っていて、
PHPunitでのユニットテスト専用に同じMySQLサーバー内の"dbname_test"というDBを使う時

同じMySQLサーバーなので、DB_DATABASEの名前のみをphpunit.xmlの最後らへんに設定します。

```diff:phpunit.xml
	...
	...
	<php>
        <env name="APP_ENV" value="testing"/>
        <env name="CACHE_DRIVER" value="array"/>
+       <env name="DB_DATABASE" value="dbname_test"/>
	</php>
</phpunit>
```

phpunit.xmlの変更だけだとartisanで *"APP_ENV=testing php artisan migrate"* 
コマンドを打ったとしてもdbname_testのDBには反映されないのですが、
その必要もありません。

tests/TestCase.php の setUp() と tearDown() で以下のようにArtisanを実行するとテストのたびに
データをリセットできます。
（Facadeを使っているのでboostrap/app.phpの *$app->withFacades();* をコメントインしてください。）

```diff:tests/TestCase.php
<?php
+ use Illuminate\Support\Facades\Artisan;

class TestCase extends Laravel\Lumen\Testing\TestCase
{
    /**
     * Creates the application.
     *
     * @return \Laravel\Lumen\Application
     */
    public function createApplication()
    {
        return require __DIR__.'/../bootstrap/app.php';
    }

+    public function setUp()
+    {
+        parent::setUp();
+        Artisan::call('migrate');
+    }

+    public function tearDown()
+    {
+        Artisan::call('migrate:reset');
+        parent::tearDown();
+    }
}
```

テストが終わった後にデータが残っていて欲しい時は、setUp(),tearDown()の内容を適宜書き換えるなどすればいいと思います。

追記）@niisan-tokyo さんからコメントいただきました。
DBのリセットにはそれ用にtraitが用意されているのでそちらを使った方が良いです。

----


追記) 最近、Laravel5.3にてphpunit.xmlに同様の記述をしたところ、設定を読み込んでくれなくて困りました。
答えは簡単で

```
php artisan config:clear
```

としたら反映されました。Laravelではconfigをキャッシュしていたのでした（Laravel初心者なのでなかなか気づけませんでした）。
WebカメラとVLCとFFmpegで監視カメラ (途中)

必要があってWebカメラを監視カメラとして使用したので、手順をメモしておきます。変化の少ない場所向け。VLCとFFmpegだけでなく、GPACも使用しているので注意。

# キャプチャ
Webカメラを接続したら、VLCを実行し、メニューから「メディア (M)->変換/保存 (R)...」を開き、タブからキャプチャーデバイスを選択、入力デバイスを設定して、「変換/保存 (o)」ボタンを選択、新しいダイアログが開いたら出力先ファイルを設定して「開始 (S)」ボタンを押します。終了するときは停止してからVLCを閉じてください。

# 変化検出 (change detection)
撮影した動画は数時間に及ぶので、変化が起きたところを抽出する必要があります。FFmpegだと、以下のような感じで可能です。

```shell-session:change_detection.sh
ffmpeg -nostats -i test.mp4 -vf 'select=gt(scene\,0.1),showinfo' -vsync vfr -f image2 thumbnails-%02d.jpeg 2>&1 | grep Parsed_showinfo_1 > frame.txt
```

# チャプターへの変換/埋め込み
FFmpegのshowinfoの出力形式は使いにくいので、チャプターに変換して動画に埋め込みます。

```shell-session:showinfo2chapter.sh
cat frame.txt | grep pts_time\: | sed -e s/^.*pts_time\:// | sed -e s/\\s.*$// | for c in `cat`;do i=`echo $c|sed -e "s/\..*$//"`;((i/=60, min=i%60, hrs=i/60));sec=`echo "$c%60"|bc`;printf "%02d:%02d:%02.3f %s\n" $hrs $min $sec $c;done > chapter_nero.txt
MP4Box test.mp4 -chap chapter_nero.txt
```

TODO: チャプタージャンプが上手く動く動画プレイヤーを探す。いや、エンコーダのパラメータを弄る必要があるかも。
IntelliJ IDEAで選択した範囲を1キーでカッコ・クオート括りする設定

ある範囲をカッコやクオートで括りたいとき、括りたい部分の先頭にカーソルを持って行って括る文字を入力し、末尾にカーソルを持って行って括る文字を入力する、というのが一般的な入力方法かと思います。
IntelliJ IDEAをお使いの場合、下記設定を有効にすると、もう少しだけ楽になれます。

Settingsの、 Editor → General → Smart Keysにある、「Surround selection on typing quote or brace」の設定がデフォルト無効になっているのですが、有効にしてみてください。

![surround-selection.png](https://qiita-image-store.s3.amazonaws.com/0/19943/b6ce583a-8c24-9f58-456b-74edff1d8af7.png)

括りたい範囲を選択した状態で、カッコやクオート文字を1文字入力してみてください。
カッコやクオートで選択範囲を括るのが楽になります。
![before.png](https://qiita-image-store.s3.amazonaws.com/0/19943/60076eeb-a572-5d23-9398-d0aef7a2ef87.png)
![after.png](https://qiita-image-store.s3.amazonaws.com/0/19943/58d9f996-c01c-e331-c2a1-8872fe096594.png)


便利。その割にいつも設定を忘れるので、今後忘れないようにメモとして残しておきます。
El Capitanでtherubyracerとlibv8を「bundle install」できない時の対処法


## 解決方法
### v8のアンインストール
```
brew list
```
でv8が入っている場合は、アンインストールする。

```
brew uninstall v8
```

### v8(v8-315)を改めてインストール
```
brew tap homebrew/versions
brew install v8-315
```

### libv8とtherubyracerをインストール
libv8とtherubyracerをパラメータをつけて`gem install`

```
gem install libv8 -v '3.16.14.13' -- --with-system-v8
gem install therubyracer -- --with-v8-dir=/usr/local/opt/v8-315
```

### bundle installを実行

```
bundle install
```

therubyracerでエラーが発生する場合は、

```
bundle config build.therubyracer --with-v8-dir=/usr/local/opt/v8-315
```

をしてから`bundle install`を再実行。

## 環境
```
$ sw_vers -productVersion 
10.11.4
$ ruby -v
ruby 2.3.0p0 (2015-12-25 revision 53290) [x86_64-darwin15]
$ gem -v
2.5.1
$ bundle -v
Bundler version 1.11.2
```

## 問題
Gemfileに`gem "therubyracer"`を追加して`bundle install`した時にエラーが発生。これ自体はv8とlibv8とtherubyracerのバージョン関連の痴話げんか的なあるある問題らしい。

以下のリンクを参考にごちゃごちゃやったが、解決せず。

http://l-light-note.hatenablog.com/entry/2014/09/17/134807
http://stackoverflow.com/questions/33475709/install-therubyracer-gem-on-osx-10-11-el-capitan
http://qiita.com/yakiimo23/items/eaf48164821897e3dde9


以下を参考にした結果、`gem install therubyracer ...`まではうまくいったが、`bundle install`で失敗した。

http://qiita.com/akm/items/02c104fc3d39d68f96c7#%E8%A7%A3%E6%B1%BA%E6%96%B9%E6%B3%95

とりあえず`gem install ...`と同じconfigをbundleに設定してみたらうまくいったが、これが正しい解決策かはわからないので誰か教えてください。
jsdom + power-assert + eater で Invalid TypeError が出て失敗する時

なんかどうも jsdom + power-assert + 自作の [eater](https://github.com/yosuke-furukawa/eater) を使ってテストをしていたら espower-loaderが中で使っている source-map-support のモジュールがエラーになる。

エラーの場所はココ

https://github.com/evanw/node-source-map-support/blob/master/source-map-support.js#L407

で、source-map-support の中で何やってるかというと、 error.stack プロパティがあるかどうかを見てるが、 stack を触った瞬間に下記のエラーになり、巻き込んで別な例外が出て死ぬ


```
TypeError: Invalid URL
Error /Users/furukawa.yosuke/Program/xxxxxxxx/node_modules/espower-loader/node_modules/source-map-support/source-map-support.js:388
      var hasStack = (arguments[1] && arguments[1].stack);
                                                  ^
```

どうも stack を呼んだ時に stack プロパティ自身が先にExceptionを吐いてしまうっぽい。

そもそもこの例外が起きる理由をよく読むと jsdom の下記のissueに行き着いた。

https://github.com/tmpvar/jsdom/issues/1277

つまり、 `url` option が無いとparseに失敗して Invalid なエラーになるらしい。
jsdomのオプションに `url` を追加して対応。

```
jsdom.jsdom('<html ....', {
 // url
 url: 'http://example.com'
})
```
[正式版対応] 5分で導入できるBootstrap 4 超入門 〜タブの作り方〜

この記事は大幅に加筆・修正して「[最新版で学ぶBootstrap 4入門 - タブの作り方 - ICS MEDIA](https://ics.media/entry/190826/)」に引っ越しました。

[![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67884/3685a324-6094-f28c-f438-4c8d9faeb987.jpeg)](https://ics.media/entry/190826/)

[![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67884/e52fa162-932b-1b35-848c-a8ecb0353d78.jpeg)](https://ics.media/entry/190826/)

Google検索で辿り着いた方にリンク切れとなっては申し訳ないので、元の記事を残しています。ご了承ください。

[最新版で学ぶBootstrap 4入門 - タブの作り方 - ICS MEDIA](https://ics.media/entry/190826/)
nginx+fuelPHP でaliasを切りwordpress等同居させる

## はじめに
nginx に fuelPHPとwordpressを同居させる為に準備した時のメモです。
既にnginx+fuelPHPの環境が整っていることを前提にaliasを設定しaliasの先にwordpressをいれればOKかと考えてます。

環境
nginx
php-fpm
fuelPHP 1.7

## 詳細

1. aliasの設定

wordpressのインストール先のフォルダを作成します。
/usr/local/src/xxxxx

nginxのコンフィグに作成したフォルダのaliasを切ります。

```nginx:xxx.conf
	location /column {
 		alias /usr/local/src/xxxxx;
		index index.php;
		if (!-e $request_filename) {
			rewrite ^/xxxxx(.+)$ /column/index.php?q=$1 last;
			break;
		}
	}
	location ~ ^/xxxxx/.+\.php$ {
		fastcgi_pass            unix:/var/run/php-fpm/php-fpm.sock;
                fastcgi_index           index.php;
		fastcgi_split_path_info ^/xxxxx(.+\.php)(.*)$;
                include                 fastcgi_params;
		fastcgi_param           SCRIPT_FILENAME /usr/local/src/xxxxx$fastcgi_script_name;
	}
#--- ここからはFuelPHP用 
	location / {
		index				index.php;
		try_files $uri		$uri/ /index.php$is_args$args;
	}
	
	location ~ \.php$ {
		fastcgi_pass		unix:/var/run/php-fpm/php-fpm.sock;
		fastcgi_index		index.php;
		include				fastcgi_params;
		fastcgi_param		SCRIPT_FILENAME $document_root$fastcgi_script_name;
	}

```

あとはnginxを再起動します。

/usr/local/src/xxxxxにコンテンツを入れれば動くと思います。

## その他

参考
[nginx+php-fpmをyumでインストールして、WordPress/CakePHPを動かす設定](http://www.1x1.jp/blog/2011/05/yum_install_nginx_php-fpm.html)
別のPCからでもHerokuのappをデプロイできるようにする(Mac)

デスクトップ用PC(1台目)でHerokuを使用して開発しているappを、ノートPC(2台目)からでもデプロイできるようにするときの自分用メモ。(Mac環境)

1. メインとなるソースはgitで管理しているので、そこからcloneしておく。
2. [heroku toolbelt](https://toolbelt.heroku.com/)をインストールしておく。
3. Herokuにログインします。EmailとPasswordはそれぞれ登録済みのものを入力する。`heroku login`
4. この状態だと、`heroku config`や、`heroku info`しても1台目の設定が表示されない。
5. [Heroku](https://dashboard.heroku.com/apps)にログインして、アプリを選択→Settings→Info項目のGit URLをメモしておく。
6. ターミナルで`git remote add heroku <メモしたGit URL>`を実行する
7. `heroku config`や`heroku info`が表示されるようになります。
8. 公開鍵を登録していない場合はデプロイできないので、`/Users/ユーザー名/.ssh/`に、`ssh-keygen -C <Herokuアカウントのメルアド> -t rsa`で作成した`heroku_id_rsa`を配置
9. `/Users/ユーザー名/.ssh/`に`config`ファイルを作成し、以下の用に記述。

~~~
Host heroku.com
 User git
 port 22
 Hostname heroku.com
 IdentityFile ~/.ssh/heroku_id_rsa
 TCPKeepAlive yes
 IdentitiesOnly yes
~~~
`heroku keys:add`で作成したheroku_id_rsa.pubを指定してあげると、 `git push heroku master`でデプロイできるようになります。
AWSへ証明書アップロード

#前置き

S3で独自ドメインをSSLに対応させるにはCloudFrontを使う必要がある

ELBやCloudFrontへSSL証明書を登録などの作業は
ManegemntConsoleでは不可能でAWS-CLIを使用する必要がある
MacOSではTeminalでそのまま作業ができる
(バージニアだとACM使えるけどACM発行じゃないとだめ？)

#AWS-CLIのインストール

```
curl "https://bootstrap.pypa.io/get-pip.py" -o "get-pip.py"
python get-pip.py
pip install awscli
```

#IAMユーザの作成
今使ってるIAMユーザを使うか専用のユーザを作成
アクセスキーを確保しておく

#証明書作業用のポリシーを作成
カスタムポリシーを以下のように作成し、ユーザにアタッチする

```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "iam:DeleteServerCertificate",
                "iam:UploadServerCertificate",
                "iam:UpdateServerCertificate",
                "iam:ListServerCertificates",
                "iam:GetServerCertificate"
            ],
            "Resource": "*"
        }
    ]
}
```

#AWS-CLIの設定

```
$ aws configure
AWS Access Key ID [None]:アクセスキー
AWS Secret Access Key [None]:シークレットキー
Default region name [None]:ap-northeast-1
Default output format [None]:
```

#SSL証明書の導入
##秘密鍵のチェック
`$ openssl rsa -in test.key -check -noout`
`RSA key ok`
##証明書の動作チェック
```
$ openssl s_server -accept 10443 -cert test.crt -key test.key -CAfile test中間証明.crt -WWW
```
`ACCEPT`


#SSL証明書をAWSにアップ
```
$ aws iam upload-server-certificate --server-certificate-name .com --certificate-body file://test.crt --private-key file://test.key --certificate-chain file://test中間証明書.crt --path /cloudfront/hogehoge.com/
```
```
{
    "ServerCertificateMetadata": {
        "ServerCertificateId": "xxxxxxxxxxxxxxxxxx",
        "ServerCertificateName": "hogehoge.com",
        "Expiration": "2016-07-15T16:16:20Z",
        "Path": "/cloudfront/hogehoge.com/",
        "Arn": "arn:aws:iam::1234567890:server-certificate/cloudfront/hogehoge.com/hogehoge.com",
        "UploadDate": "2016-04-06T08:48:03.087Z"
    }
}
```

上記表示で完了
これでManegementConsole上で設定できる
anaconda + python3.5環境でtensorflowをinstall

https://www.tensorflow.org/versions/r0.7/get_started/os_setup.html#test-the-tensorflow-installation

# install
```
cd ~/anaconda/bin
sudo pip3 install --upgrade https://storage.googleapis.com/tensorflow/mac/tensorflow-0.7.1-cp35-none-any.whl


```


# check

```

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

>>> Hello, TensorFlow!
a = tf.constant(10)
b = tf.constant(32)

print(sess.run(a + b))
>>> 42

```
GitHubのIssueの印刷をキレイに

## はじめに前置き

説明しつつサンプルコードを見て実際に写経してもらうスタイルの勉強会をやろうと思って、ひとまずGitHub上にサンプルコードをpushしたのですが、そのコードの解説をどこに載せようかふと考えました。

以前使っていたGitBookを使おうと思ったのですが、なんか動作がモッサリしてて、もっとさくさくと書きたいと思ってひとまず

- GitHub上にサンプルあるので、出来ればGitHubの仕組みをうまく活用したい
- 図表を挿入したドキュメントをMarkdownでサクッと書きたい
- ドキュメント自体のバージョン管理はそれほどこだわらない。

というのが自分なりの要件

GitHubのIssueで普段から結構説明的に文章を書く習慣があったので、その延長線上で・・・と思って情報を探してたら[Github Wikiの印刷をキレイに](http://qiita.com/htkymtks/items/63decc78dbd14f7fc860)というとっても有益な情報を見つけたのでこれを参考にしたらいと通りのことが出来ました :smile: 


## やったこと

ひとまずChromeのconsoleで以下のように入力しました。

```
$('.header').hide();
$('.pagehead').hide();
$('.discussion-sidebar').hide()
$('.gh-header-show').hide()
$('.gh-header-actions').hide()
$('.flex-table-item').hide()
$('.discussion-timeline-actions').hide()
```

### BEFORE

![ 2016-04-07 16.29.50.png](https://qiita-image-store.s3.amazonaws.com/0/10187/63306c0f-dc39-70e5-45a1-e87be005b2f5.png)


### AFTER

画像アイコンとかがうまく消せなかったけどひとまず最低限やりたいことが出来たのでひとまずこれでOKとしました

![ 2016-04-07 16.15.14.png](https://qiita-image-store.s3.amazonaws.com/0/10187/4d0e4383-2356-f15f-9ba4-3d95c7adfaff.png)

## 最後に

@htkymtks さん素敵な情報まとめておいていただいてありがとうございます :thumbsup:
processingでシリアル接続

シリアル接続したデバイスをProcessingで制御したい場合があります。
今回RFIDとの通信テストをする必要があったのでちょっと調べてみました。

~~~java

import processing.serial.*;

Serial port;

String data;

void setup () {

	size (800, 600);

	//接続可能なシリアルポートのリストを表示
	for (int i = 0; i < Serial.list ().length; i++) {
  		println (Serial.list ()[i]);
	}

	//自分のPCに接続しているシリアルポートの番号と通信速度を設定
	//通信速度は接続するデバイスによって適宜変更
	port = new Serial (this, Serial.list ()[5], 38400);

	//RFIDのようなデバイスの場合は初期動作の設定コマンドなど
	//反応を返してもらうためのコマンドを送信
	//02007502020C038A0Dというコマンドをchar型に変換して
	//1バイトずつ送信（コマンド内容はデバイスよって異なる）
	port.write (char (0x02));
	port.write (char (0x00));
	port.write (char (0x75));
	port.write (char (0x02));
	port.write (char (0x02));
	port.write (char (0x0C));
	port.write (char (0x03));
	port.write (char (0x8A));
	port.write (char (0x0D));

}

void draw () {

}

//コマンドを送るとserialEventが発生してデバイスからの反応を受け取ることができる
//送られてくる内容はSerialオブジェクトpに1バイトで入っていて、全ての内容が送信される
//までserialEventが発生する
void serialEvent (Serial p) {

	//最初に送ったコマンドによってデバイスが応答するので
	//同じくchar型で1バイトずつ読み取る
	char in_byte = (char) p.read ();

	//改行を拾ったら次の動作
	if (in_byte == '\r') {
		println (data);
		data = "";
		//setupの時と同様に何らかのコマンドを送信
		port.write (char (0x02));
		port.write (char (0x00));
		port.write (char (0x75));
		port.write (char (0x02));
		port.write (char (0x02));
		port.write (char (0x0C));
		port.write (char (0x03));
		port.write (char (0x8A));
		port.write (char (0x0D));
	} else {
		//改行を拾うまで読み込んだchar型を16進数に変換して
		//変数dataに追加していく
		data += hex (in_byte, 2);
	}

}

~~~
githubでpull requestが「This branch is out-of-date with the base branch」になってマージ出来ない場合の対処法

# 問題

Github上のPull Requestが「This branch is out-of-date with the base branch」となってマージ出来なくなる場合がある。

![スクリーンショット 2016-04-07 15.49.41.png](https://qiita-image-store.s3.amazonaws.com/0/9875/e5d93246-0926-b42f-a2a0-c84440668827.png)

# 原因

![スクリーンショット 2016-04-07 15.50.11.png](https://qiita-image-store.s3.amazonaws.com/0/9875/44222fa2-7bf4-ccf0-23d3-9da07d88c673.png)

上記の「Require branches to be up to date before merging」にチェックが入っていると、コンフリクトが発生していなくても、ブランチがベースブランチ上の最新のコードでテストされてないとマージ出来なくなる。

# 解決策

「Require branches to be up to date before merging」のチェックを外せば、マージ出来るようになる。

![スクリーンショット 2016-04-07 16.02.58.png](https://qiita-image-store.s3.amazonaws.com/0/9875/2a3078c8-31ae-04ba-e65b-19cc668676f7.png)

# 参考

[Enabling required status checks](https://help.github.com/articles/enabling-required-status-checks/)

> Optionally, deselect Require branches to be up-to-date before merging. If selected, this ensures that the branch is tested with the latest code on the base branch.
vimでよく使うコマンド

## 目的
vimを使い始めたが、よく忘れるので、知ったことを書きとめて、出来れば早く覚えたい。


## 移動

```
       ge      b          w                             e
       <-     <-         --->                          --->
This is-a line, with special/separated/words (and some more).
   <----- <-----         -------------------->         ----->
      gE    B                     W                      E

 
           ^
     <-----------
.....This is a line with example text.
<----------------    ---------------->
        0                   $
("....."は空白文字があることを示します）
```
（vimのhelpより）

## 検索
|コマンド|動作|
|---|---|
|`*`|カーソルの下の単語を検索する|



## 編集
ノーマルモードでのコマンドと動作。

|コマンド|動作|
|---|---|
|**`o`**|カーソルがある行と次の行の間に空行を追加する。|
|**`O`**|カーソルがある行の上に空行を追加する。|
|**`I`**|カーソルがある行の最初の非空白文字に移動し、挿入モードを開始する。|
|**`A`**|カーソルがある行末に移動し、挿入モードを開始する。|
|**`~`**|カーソル位置の大文字/小文字を変更し、カーソルを次に進める。|
|**`J`**|カーソルがある行と次の行の間にある改行文字を削除する。|
|**`x`**|カーソル下の文字を削除する。`dl`のショートカット。|
|**`D`**|カーソルがある地点から行末まで削除する。`d$`のショートカット。|
|**`dd`**|カーソルがある行全体を削除する。|
|**`daw`**|カーソルがある単語を削除する。"delete a word"|
|**`caw`**|カーソルがある単語を削除して挿入モードを開始する。"change a word"|
|**`cis`**|カーソルのある文を削除して挿入モードを開始する。削除された分の後にある空白は含まない。"change Inner Sentence"|
|**`cas`**|カーソルのある文を削除して挿入モードを開始する。削除された分の後にある空白は含む。"change a Sentence"|
|**`yy`**|カーソルがある行全体をコピー（ヤンク）する。|
|**`.`**|直前のコマンドを繰り返す。|
|**`CTRL-V`**|四角いブロック（矩形、くけい）の範囲選択。|
|**`"*yy`**|カーソルがある行全体をクリップボードへコピーする。|
|**`"*p`**|クリップボードからプットする。|


## テキストオブジェクト
[こちら](http://shinespark.hatenablog.com/entry/2015/11/12/070000)がとてもわかりやすくまとまっているため、あとで読む。

### a と i
```

              aw
            <----->
  Some more boring to try out commands. Teacher Smith ....
            <---->
              iw

                   as
  <------------------------------------>
  Some more boring to try out commands. Teacher Smith ....
  <----------------------------------->
                   is

                   a"
  <------------------------------------->
  "Some more boring to try out commands."
   <----------------------------------->
                   i"
```

aとiの違いをうまく言葉で説明できないなぁ。
aやiの後に続く移動コマンドはたくさんあり、よく使いそうなのは以下の通り。

|テキストオブジェクト|意味|
|---|---|
|**`aw`**|"a word"|
|**`iw`**|"inner word"|
|**`as`**|"a sentence"|
|**`is`**|"inner sentence"|
|**`a"`**|"a quoted string"|
|**`i"`**|"inner quoted string"|

```
                   +---------------------------------------+
  +----------+     |              text object              |
  | operate  |     |  +------------+       +---------+     |
  | command  |  +  |  | "a" or "i" |  +    |   move  |     |
  | (d,c..)  |     |  |  command   |       | command |     |
  +----------+     |  +------------+       +---------+     |
                   +---------------------------------------+

```
Stretcher v0.5.0 でダウンロードの帯域制限とタイムアウト

[Stretcher](https://github.com/fujiwara/stretcher) v0.5.0 でダウンロードの帯域制限とタイムアウト機能を追加しました。

```
$ stretcher -h
Usage of stretcher:
  -max-bandwidth string
    	max bandwidth for download src archives (Bytes/sec)
  -random-delay float
    	sleep [0,random-delay) sec on start
  -timeout int
    	timeout for download src archives (sec)
```

## 帯域制限 `-max-bandwidth`

manifestの`src`に指定したアーカイブは往々にして巨大になるため、アーカイブの取得でネットワーク帯域を使い果たさないように制限するオプションです。
単位は Bytes/Sec で、[go-humanize](https://github.com/dustin/go-humanize) が解釈できる形式のsuffixも付けられます。

例: 10MB/sec に制限したい場合 `-max-bandwidth 10m`

`-random-delay` と合わせて、取得元への負荷をコントロールするのに有用かと思います。
自作の [shapeio](https://github.com/fujiwara/shapeio) というライブラリを使用しています。

## 取得のタイムアウト `-timeout`

アーカイブの取得のタイムアウト設定(単位 秒)です。
`src`の取得(ローカルファイルへの書き込みを含む)が指定時間内に終了しない場合、処理が中止されます。

アーカイブ取得部分のみのタイムアウト設定なので、`pre`, `post`等のコマンド実行やtarの展開、rsyncには掛かりません。

どうぞご利用ください。
一時的にリダイレクトさせたいときの対処法


不具合などが生じて、一時的にrootに`redirect`させたい時の書き方のパターン。
URL直打ちでもリダイレクトさせられる。
controllerで`before_action`でリダイレクトさせてうまくいった。

```ruby
before_action :set_redirect

private

def set_redirect
 redirect_to :root
end
```

もっと少ない表記でできないか試してみたところ、`routes.rb`に表記する方法でも
redirectできた。
`resouces do`で囲んだときの表記例が探しても無かったが、下記の書き方でうまくいった。
ネストしているURLもリダイレクトできる。

```ruby
resources :users, to: redirect('/'), only: [:index, :show, :update] do
```

これが正しい表記かわからないし、rails wayかわからないが、とりあえずうまくいった。
Litmusを使用してHTMLメールのテストを行う


HTMLのメールを作成する上で、表示確認に時間がかかると感じたので、表示確認が出来るサービスを使用してみました。今回使用したのはLitmusというEメールテスティングサービスです。

**2016/4/7時点の情報です**

## Litmus
- https://litmus.com/

Email Testing and Email Marketing Analyticsということで表示確認以外にも分析が出来ます。今回は様々なクライアントで表示確認をする手間を省きたいという目的のため表示確認のみ行っています。

## 会員登録をする
無料でもお試しで使うことが出来ます。会員登録は簡単でメール、名前、パスワードを入力すると完了します。

![9d0469c6fa1a6fba6db9d50d06a794fa.png](https://qiita-image-store.s3.amazonaws.com/0/11156/4f3c7ec6-bc52-56c7-b16c-e0f2f199e3b1.png "9d0469c6fa1a6fba6db9d50d06a794fa.png")

## プレビュー確認をする
「Create a new Project」からプロジェクトを作成します。
いくつかのテンプレートから選ぶこともできます。
![6eaea9ba06e33da86e1e8a9507fa67a7.png](https://qiita-image-store.s3.amazonaws.com/0/11156/abfbbf2f-ae9d-56d8-daa5-e408e82e7d37.png "6eaea9ba06e33da86e1e8a9507fa67a7.png")


プレビュー画面は左にコード、右に各クライアントのプレビューが表示されていて非常に分かりやすいです。
各クライアントの見え方は、拡大表示することが可能なので見た目も問題無いように感じました。ここまで迷うこと無く直感的に使えるので困ることは無かったです。

![39333cd6ad0b9fa9ce5ef8aaab448f91.png](https://qiita-image-store.s3.amazonaws.com/0/11156/2b9736b4-fcaa-54c7-a19c-376c28fb455b.png "39333cd6ad0b9fa9ce5ef8aaab448f91.png")

# サポートクライアント
私が調べたタイミングでは、Desktop Clients, Mobile/Tablet Clients, Web-based Clientsあわせて54ほどのクライアントをサポートしていました。

そのうち無料で使用出来るクライアントは「Outlook 2013」「Gmail (Chrome)」「iPhone 6S」の3種類です。

# 料金
年間/月間プランが用意されています。
プランも3種類あり、最小のBASICプランは79ドル/月です。
各プランごとに制限があるので、下記URLで確認が必要です。
https://litmus.com/pricing

# まとめ
非常に分かりやすく使いやすいですが、無料で使えるクライアントが3種類しかなかったので、自分の利用目的では課金必須のサービスだと感じました。他にも有名どころがあるので調べて、サービスを決めてから課金しようと思います。
画面向き変更時にons-splitter-sideの内容が消える

# 記事の対象者
- OnsenUI 2 Beta でons-splitter-sideを使っている人

# 問題
ons-splitter-sideは`collapse="portrait" `を設定すると、

↓端末の向きが縦の時
<img width="250" src="https://qiita-image-store.s3.amazonaws.com/0/106886/a0c6ee1e-f4b4-9177-38b3-5a9d56bdf7b9.gif">

↓端末の向きが横の時
<img width="500" src="https://qiita-image-store.s3.amazonaws.com/0/106886/796d899b-d71f-c2f8-234e-31fc9aa980a8.png">

こんな感じでサイド画面を自動で隠してくれる。

サイド画面を表示させた状態で、端末の向きを縦から横に変更するとサイド画面が真っ白になる。
（正確にはsplitter-contentの裏に隠れる）

# 解決法1

HTMLはこれ。

```html
<ons-splitter var="splitter">
    <ons-splitter-side var="side" page="menu.html" collapse="portrait" swipeable width="200px" swipe-target-width="50px"></ons-splitter-side>
    <ons-splitter-content var="content" page="page.html"></ons-splitter-content>
</ons-splitter>
```


ons.orientation.onで画面向きの変更イベントを検知させ、event.isPortraitがfalseだったらサイド画面を閉じる。

```js
// 読み込み時
ons.ready(function() {
    $timeout(function() {
        vm.side = $window.side;
    });
});

// スプリッタ画面向き変更バグ対策
ons.orientation.on("change", function(event) {
    if (!event.isPortrait) {
        vm.side.close();
    }
});
```

# 解決法2
window.addEventListenerでイベントを拾う。
Beta.9以降はこれで解決する。

```js
// 読み込み時
ons.ready(function() {
    $timeout(function() {
        vm.side = $window.side;
        
        // スプリッタ画面向き変更バグ対策
        window.addEventListener('orientationchange', function(){
            if (vm.side.isOpen) { // Beta.9はvm.side.isOpen()
                vm.side.close();
            }
        }, false);
    });
});
```

# 解決法3

IssuesにはCSSを追加する方法が紹介されている。
https://github.com/OnsenUI/OnsenUI/issues/1392

```
[mode="split"] ~ ons-splitter-mask {display:none !important}
[mode="split"] {transform: none !important; transition:none !important}
```

次の更新で修正されると思われる（RC.7の時点ではまだ）。

# 結論
ons.orientation.onでchangeイベントを拾うか、addEventListenerを使えばバグの回避は可能。
既に修正されているかもしれないが。
残業を防ぐHTMLが通知してくる

[残業、遅刻、夜更かしを防ぐHTML](http://qiita.com/tatesuke/items/46ea67a2fe56524a7bfc) がとても有用な(気がした)ので、思わず作りました。

HTML5のNotificationを使って淡々と通知してもらいます。
これでタブを切り替えず、お手軽に帰りたい気持ちになれますね。

![無題.png](https://qiita-image-store.s3.amazonaws.com/0/111100/b1be97f6-b0b1-74bf-b1c3-788338ca43c1.png)

通知の部分はこんな感じです。([全コード](https://gist.github.com/tomoki1207/7dd344950ac6ff9bd5e5c73301a23463))

```js
var n;
update();
setInterval(update, 60 * 1000);
function update() {
  /* 略 */
  var time = hour + ":" + minute;
  
  if(n) {
    n.close();
  }
  
  var options = {
    body: "\n\n頃です。",
    icon: generateIcon(time)
  };
  n = new Notification('今帰ると帰宅時間は', options);
}

// 時間アイコンを作成する
function generateIcon(time) {
  var canvas = document.createElement('canvas');
  canvas.width = 130;
  canvas.height = 130;
  var context = canvas.getContext('2d');
  context.strokeStyle = '#3e3e3e';
  context.strokeRect(5, 5, 120, 120);
  
  // 文字関連
  context.font = 'bold 80px Arial';
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.fillStyle = '#000';
  context.fillText(time, 64, 64, 110);
  return canvas.toDataURL();
}
```

見ての通りブラウザが対応してるかとか何一つ確認していません。通知の許可も取りません。
FireFoxで動いたのだけ確認しました。

あと、通知内の文字列が変更できないのと、自動で閉じるまでの時間が設定できなかったので、
一定時間で勝手に閉じた後に新しい通知が表示される、という挙動になっており非常に目障りです。
副作用として、「通知がうるさいからやる気なくした、今日は帰ろう。」という気持ちになるかもしれせん。

### 追記
まぁ、次の展開としては当然こうなりますよね。
http://notify-my-time.herokuapp.com/returnhome
([ソースコード](https://github.com/tomoki1207/notify-my-time))
Atomの背景で高坂麗奈を動かす


Atomのプラグイン`editor-background`で動画を背景にできるっぽいので試してみた。

```zsh
$ apm install editor-background
```

### 設定

`パッケージ一覧 -> editor-background -> Video`
でyoutubeのURLとか設定する。

設定はこんな感じにした。
![Settings_—__Users_saekis_work_goalous2.png](https://qiita-image-store.s3.amazonaws.com/0/57806/c733d2a1-e2fc-0e79-764d-5a1a874f0b95.png "Settings_—__Users_saekis_work_goalous2.png")


#### 動画(公式)
https://www.youtube.com/watch?v=pu03ZTZd5-Y


#### 様子
![hibike3.gif](https://qiita-image-store.s3.amazonaws.com/0/57806/28abb6c8-8e66-c974-ddd2-6df65e4b5999.gif "hibike3.gif")



#### 気が散るので5秒で元に戻した。
Sublime text | 複数選択モードで「全て選択する」ショートカットは Command+Ctrl+G ( Mac )

表題の通り。
何かテキストを範囲選択してから、 `Command+Ctrl+G` で、同じテキストをすべて選択できる。

`Command+D` を最後まで実行するのと同じ効果だ。

**良い覚え方、募集中。** ( Grand Select とか )

# 画面例

![image](https://qiita-image-store.s3.amazonaws.com/0/90607/42511ac1-0107-ed54-24e6-ab6aa13b75f8.png)

↓

![image](https://qiita-image-store.s3.amazonaws.com/0/90607/84594664-73f7-3bc3-aa3b-2e0fa6c3dcf1.png)


# Windows では

`Alt+F3`

 
# 環境

- SublimeText3 
- Mac OXS

# 備考

- すぐ忘れるのと。検索に引っかかりにくいのでメモ。
- 参考 : [【保存版】Sublime Text 3のショートカットキーの一覧（Windows/Mac）](http://www.starlod.net/sublime-text-3-shortcutkey.html)



<!-- Update From Qiita API -->

# チャットメンバー募集


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

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


# メンター受付


https://menta.work/user/5694

<!-- Update From Qiita API -->
PHPerがつまづいたRubyの仕様


スクリプトの実行ログとしてファイルへの書き込みをしたい時。
PHPだと

```php
$fp = fopen('/var/tmp/hoge.txt', 'w');
while(true) {
    // action
    fwrite($fp, 'actionのログ');
}
fclose($fp);
```

みたいにやっていた。
細かいところはおいておいて、``tail -f /var/tmp/hoge.txt`` とかで回しておけば、どんぐらい進んだかが一目瞭然。

で、同じような感覚で ruby で書いてみた

```ruby
fp = File.open('/var/tmp/hoge.txt', 'w')
list.each do |val|
  # action
  fp.write('actionのログ')
end
fp.close
```

ログがつらつら流れることを期待して ``tail -f /var/tmp/hoge.txt`` を叩いてみる。
が、流れてこない。
で、処理が全部終わったらドカッとログが出現。
ということは、ruby だと close するまでは実際にはファイルに書き込みをしないということか...

で、ちょいちょい調べてみたら

```ruby
fp = File.open('/var/tmp/hoge.txt', 'w')
list.each do |val|
  # action
  fp.write('actionのログ')
  fp.flush
end
fp.close
```

のように ``flush`` メソッドを叩けばいけるらしい。なるほど...
chrome develop toolsまとめ

chromeでdevelop tool利用する時の便利技まとめ

# ショットカット
### 全パネス
| キー | 機能| 
|:-----------|:-----------|
| Cmd+Opt+I  | develop tool開く |
| Cmd+Shift+M  | デバイスモード開く(スマホ) |
| Cmd+R  | ページロード |

### elementパネス
| キー | 機能| 
|:-----------|:-----------|
| F2  | HTMLとして編集 |
| Opt+Click on arrow icon  | nodeを全部展開/折りたたみ |
| H  | 要素を非表示 |
| Tab,Shift+Tab  | Edit next / previous property |

### Sources
| キー | 機能| 
|:-----------|:-----------|
| F8  | Pause / resume script execution |
| F10  | Step over next function call |
| F11 | Step into next function call |
| Shift+F11 | Step into next function call |
| Cmd+S | 保存|
| Cmd+Opt+S | すべて保存|
| Cmd+Opt+F  | 全リソースで検索 |
| Cmd+O  | ファイル名で検索 |
| Cmd+P+:number | 指定行へ移動|
| Cmd+Shift+O| ファイル中の機能、変数へ移動|
| Cmd+D| 利用箇所へ移動 |

### Console
| キー | 機能| 
|:-----------|:-----------|
| Ctrl + Return | 複数行入力 |



## 参考資料
[Chrome Keyboard & UI Shortcuts Reference
](https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/shortcuts)


# 便利な機能
### ページをリロードしてもNetworkタブで表示しているリクエストのリストを保持し続けたい
networkタブではHTTPリクエストが表示されるが、ページのリロードがかかるとこの内容がクリアされてしまう。
「Preserve Log」ボタンを押すと、もう一度押すまでの間のHTTPリクエストを、たとえリロードがかかっても、どんどん貯めることができる。

### DOMエレメントに簡単アクセス
![image](https://qiita-image-store.s3.amazonaws.com/0/75651/6eae186c-a346-18b2-e097-b78a7663cac5.png)

コンソールで一時的に何かをしたいときに、DOMエレメントにいちいち getElementById とかでアクセスするのは非常に面倒
DevToolsでは選択している要素に \$0 でアクセスすることができます。また、選択要素を変更した場合も $N でNつ前に選択していた要素にアクセスできます。

### ほかのページの色を使いたい時
[ここの記事を参考](http://qiita.com/nakajmg/items/477728bff8b89664e1a4)
マウス移動するだけ、めちゃくちゃ便利！
文字コード直すメモ

文字化けしたときの対処をメモる。
よくあるのでこれから追記してメモる。

# Linuxのコマンドラインが文字化け

```
$ locale -a | grep ja
```

ここで出てきたものを各シェルに設定する。
設定ファイルに下記のように書き、source [設定ファイル名]で反映させる方法でやった。

```
export LANG=[文字コード]
```

これで直った。
ons-splitterでパラメータ付き画面遷移がしたい時用メモ

ons-splitter-sideにユーザ一覧が表示され、ユーザ名をタップするとons-splitter-contentにスケジュールが表示される。
というのを作る際にハマったのでメモ。

# 記事の対象者
- 自分
- AngularJS 1.5のComponentを使っている人
- OnsenUI 2 Beta.8以降でons-splitterを使っている人

# 問題
ons-splitterを使って固定のページを表示するのはできるが、遷移先の画面へパラメータ（この場合はユーザ情報）を渡す方法がわからない。

ons-navigatorを使っている訳ではないのでnavigator.getCurrentPage()からオプションを拾うこともできない。

もしパラメータを渡せるとしたら、ons-splitter-contentのページを再読込するのはどうするのが良いか。

# 解決策
ons-splitter-contentに直接パラメータを渡すことはできないので、Angularコンポーネントのbindingsに$ctrl経由でオブジェクトを渡す。画面遷移&再読込はons-splitter-contentのloadを呼ぶ。

# 方法
メインの画面はこちら。大体の構成は公式のサンプル通り。

```html:www/src/components/app-main.template.html
<ons-page>
    <!-- スプリッタ -->
    <ons-splitter var="splitter">
        <ons-splitter-side animation="default" var="side" page="menu.html" side="left" collapse="portrait" swipeable swipe-target-width="50px" width="200px"></ons-splitter-side>
        <ons-splitter-content var="content" page="page.html"></ons-splitter-content>
    </ons-splitter>

    <!-- メニュー -->
    <ons-template id="menu.html">
        <ons-list id="default-category-list">
            <ons-list-header>ユーザ</ons-list-header>
            <ons-list-item tappable modifier="chevron" class="list-item-container" ng-repeat="user in $ctrl.userList" ng-click="$ctrl.show(user)">{{user.name}}</ons-list-item>
        </ons-list>
    </ons-template>

    <!-- コンテンツ -->
    <ons-template id="page.html">
        <ons-toolbar>
            <div class="left">
                <ons-toolbar-button ng-click="$ctrl.side.toggle()">
                    <ons-if platform="android">
                        <ons-icon icon="md-menu"></ons-icon>
                    </ons-if>
                    <ons-if platform="ios other">
                        <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon>
                    </ons-if>
                </ons-toolbar-button>
            </div>
            <div class="center">{{$ctrl.user.name}}</div>
        </ons-toolbar>

        <!-- スケジュール一覧コンポーネントに渡す -->
        <schedule-list user="$ctrl.user"></schedule-list>
    </ons-template>
</ons-page>
```


コントローラ全部は多いので必要なところだけ。
ons-splitter-contentにvarを設定し、content.load()を呼んでテンプレートを再読み込みしている。

```js:www/src/component/app-main.js
// ユーザ一覧表示
function show(user) {
    vm.user = user;
    vm.content.load('page.html');
    vm.side.close();
}

// 初期化
ons.ready(function() {
    $timeout(function() {
        vm.side = $window.side;
        vm.content = $window.content;
        vm.loadUserList();
    });
});
```

`vm.user`は画面の読み込み時に`<schedule-list user="$ctrl.user">`としてコンポーネントに渡される。
bindingsは単方向バインディングを指定する。

```js:www/src/components/schedule-list/schedule-list.js
// コンポーネントオブジェクト
var component = {
    bindings :  {
        user : '<'
    },
    controller : Controller,
    templateUrl : 'src/components/schedule-list/schedule-list.template.html'        
}

// コンポーネント登録
app.component('scheduleList', component);
```

content.load()がオプション指定を受け付けてくれればこんな面倒な事にはならないのに。
**全部一枚のソースに書く** のが一番楽だがコンポーネント指向が崩れる。ぐぬぬ。

#結論
ons-splitter-contentにパラメータを渡すことは出来ない。
$ctrl経由でコンポーネントにパラメータを渡した方が良い。

ons-splitter関連は苦労する。
共有スプレッドシートで管理者ユーザー以外がスクリプトを実行できないようにする

# Googleスプレッドシートは、共有できてマクロ(GAS)も使える

Googleスプレッドシートは便利です。
みんなでスプレッドシートを共有することができます。しかも、共有したスプレッドシートで、マクロ(GAS:Google Apps Script)を実行できるので、めちゃくちゃ便利です。

## 管理者だけが実行したいマクロもある

でも、スプレッドシートの管理者だけが実行したいマクロもあります。

例えば、スプレッドシートのマクロ（GAS)から、何かしらの通知メールが送信できますが、特定のアカウントからメール送信しないと、誰にどんな通知メールが送られたのか、ログが残りません。（スプレッドシートを開いているユーザーのアカウントからメールが送信されます。）

そのため、管理者アカウントでない人からは、そのスクリプトを実行できないように考慮しておく必要もあります。

```js

function hoge_script() {
  var mail =   Session.getActiveUser().getEmail();
  if (mail !== "***@gmail.com") {
    alert("管理者アカウントでアクセスしてください");
    return;
  }
}
```

上記のようなスクリプトを仕込んでおけば、管理者以外からスクリプトを実行することができません。

## スプレッドシート違いを防ぐ

ほかにも、特定のスプレッドシートを開いているときだけ、有効にしたいマクロもあることでしょう。

シート名(sheet.getName())を使っても良いのですが、特定のセルに、特定の文字列があるかどうかを調べるのもありです。

```js
var active_sheet = SpreadsheetApp.getActiveSheet();
var title = sheet.getRange("A1").getValue();
var i = title.indexOf("***計画表");
if (i < 0) {
  alert("***計画表をアクティブにしてください");
  return;
}
```

## メッセージの表示用

GASには、alert()関数がないので、以下のような関数を定義しておくと便利です。

```js
function alert(msg) {
    var ui = SpreadsheetApp.getUi();
    ui.alert('一言', msg, ui.ButtonSet.OK);
}
```
Github上の最新のソースツリーを取得するのにgit cloneする必要はない

Github上の最新のソースツリーを取得したい場合は普通このようにします。

```
git clone --depth 1 https://github.com/php/php-src.git
```

しかしこの方法は下記のように無駄が多いです。

* gitコマンドが必要になる
* git cloneは必ずしも高速ではない

gitコマンドを使わずにHTTPだけでソースコードを取得できないのでしょうか？実はできます。

# Githubのアーカイブダウンロード用URLを叩く

実はGithub側でダウンロード用のエンドポイントが用意されています。

https://github.com/php/php-src/archive/master.tar.gz

これを利用すればHTTPでソースツリーを取得することができます。

```
curl -sL https://github.com/php/php-src/archive/master.tar.gz -o master.tar.gz && tar xfz master.tar.gz
```

( `master`の代わりに任意のブランチ名やコミットハッシュ値を指定することもできます。)

手元で測定してみたら、git coneするのに比べて２倍ほど速くなりました。

Dockerfileでこの手法を使うと、gitコマンドをインストールしなくて済むのでさらに時間短縮ができます。
Node-red起動時におけるFlows files読み込みエラー

# エラーの概要
Node-redでカスタムノードを作っていると、下記のようなエラーで起動しないことがある。
要は、custom-nodeが起動時に読み込むFlows fileの中にあるけど、見つけられないっｔことらしい。

```
7 Apr 13:08:25 - [info] Node-RED version: v0.13.4-git
7 Apr 13:08:25 - [info] Node.js  version: v5.7.1
7 Apr 13:08:25 - [info] Darwin 15.4.0 x64 LE
7 Apr 13:08:25 - [info] Loading palette nodes
7 Apr 13:08:28 - [info] Settings file  : /Users/****/.node-red/settings.js
7 Apr 13:08:28 - [info] User directory : /Users/****/.node-red
7 Apr 13:08:28 - [info] Flows file : /Users/****/.node-red/****.local.json
7 Apr 13:08:28 - [info] Creating new flow file
7 Apr 13:08:28 - [info] Starting flows
7 Apr 13:08:28 - [info] Started flows
7 Apr 13:08:28 - [info] Server now running at http://127.0.0.1:1880/
7 Apr 13:09:01 - [info] Stopping flows
7 Apr 13:09:01 - [info] Stopped flows
7 Apr 13:09:01 - [info] Waiting for missing types to be registered:
7 Apr 13:09:01 - [info]  - custom-node
```

# 対策
起動時に読み込んでいるFlows fileを一旦削除すればよい。

    $rm /Users/****/.node-red/****.local.json
Intellij IDEA 忘れてしまうショートカット

ベースは Mac OS X

- Run, Build 実行ウィンドウを閉じる: Cmd + 4
- Line start: Ctrl + a (追加)
- Line End: Ctrl + e (追加)
- Delete caret to line end: Ctrl + k (追加)
- 現在行の複製: Cmd + d 
- 現在行の削除: Cmd + y
- 空行の追加: Shift + Enter
- リフォーマット: Cmd + Alt + l
- 現在行を移動: Cmd + Shift + ↑/↓
Docker for Mac with http proxy.


#Docker for Mac(build 10258)が出て、この記事の設定は不要となりました。

Docker for Macのプライベートβの案内が来たので触ってみました。

細かい話は、こちらの[ブログ](http://paiza.hatenablog.com/entry/docker_for_mac "")に出ているので割愛するとして、
http proxy環境内で使うためにどうすればいいかと話を書きます。

Docker for Macの設定
----

dockerの設定をconfig.jsonに書くものであれば、以下に記述することが可能

```
~/Library/Containers/com.docker.docker/Data/database/com.docker.driver.amd64-linux/etc/docker/daemon.json
```

ただし、dockerのhttp_proxyの設定は、docker daemonの起動時の環境変数に記述する必要があり、この設定ファイルでは対応出来ない。

Docker for Macの中のLinuxへログイン
---

```
screen ~/Library/Containers/com.docker.docker/Data/com.docker.driver.amd64-linux/tty
```

screenを使ってttyコンソールに接続、root(パスワードなし）でログイン可能

http_proxyは、/etc/dockerとかには設定ファイルがないので、dockerの起動スクリプトに記載

```
/etc/init.d/docker
```

あとはお好きにどうぞ

環境変わる度に書き換えるのはめんどくさいので、せめてMac上のGUIから設定出来るようにして欲しいなぁ
if ( Electron && Windows && フレームレス && 全面ドラッグ移動可 && リサイズ可能)  { 設定して欲しいCSS }

# <i class="fa fa-cubes"></i> 概要

* Electronアプリ
* フレーム非表示
* 画面ドラッグでウィンドウを移動
* リサイズできる
* Windows対応

を実現するために、Macではおそらく不要で、
Windowsでは必要なCSS設定が実装次第ではある。

# <i class="fa fa-cogs"></i> 検証環境

* Windows7 Professional 64bit
* electron 0.37.2
* node v5.2.0

もしかしたらWindows7 固有かも。


# <i class="fa fa-flask"></i> サンプル

[electron/frameless-window.md at master · electron/electron]
を参考に、フレームレスはこう設定し、

```js.main.js
const BrowserWindow = require('electron').BrowserWindow;
var win = new BrowserWindow({ width: 800, height: 600, frame: false });
```

ドラッグ可能はCSSで設定します
(`body`でもいいと思います。)

```css:index.css
html {
	-webkit-app-region: drag;
}

```

ただし、これでは`body`内の要素が確保した領域分しか反映されないので(主に縦幅)、
ウィンドウサイズ全体に適用します。
だいたいこんな感じじゃないでしょうか

```css:index.cc
html {
	-webkit-app-region: drag;
}

html, body {
	height: 100%;
	width:  100%;
	margin: 0;
}
```

本題からは横道にそれますが、Electron0.37.4ごろから`height:100%`ではデフォルトで縦に謎領域があるらしく、スクロールバーがでます。
これは`overflow: hidden;`や`height: calc(100% - 2px);`で回避できます。
何の部分なのか知りたいです。

さて、ここまでの動作サンプルを挙げたいのですが、これだけのものを挙げるのもなんなので、他人のものを宣伝がてら…

@akameco さんの[yamada]が、すごく良いアプリです。
詳細は[【Electron】画像を保存するだけで満足してしまうオタクのために最高の画像ビューアをつくった - Qiita]を。

現在(v0.4.0)は丁度条件を満たしていて、

* フレームレス
* 全面ドラッグ移動
* リサイズ可能
* **Windows非対応**

ということで、Windowsユーザーの方は試していただけると思いますが、
リサイズができません。
それでも画面隅に置いていますが。

# <i class="fa fa-check-circle-o"></i> 解決策

なぜリサイズできないか推測すると、`width`.`height`を**100%**にすると、
リサイズの部分(<i class="fa fa-arrows-h"></i>)までHTMLがかぶり、
`-webkit-app-region: drag;`が効いてフレームではなくメニューバー内扱いになるのではないかと。

そこで、`margin`をとることで外周を`-webkit-app-region: drag;`の対象外にし、リサイズできるようにしました。

```css:index.css

html {
	margin: 2px;
	-webkit-app-region: drag;
	height: calc(100% - (2px * 2));
	width:  calc(100% - (2px * 2));
}

body {
	height: 100%;
	width:  100%;
	margin: 0;
}

```

`calc`で100%から引き、`margin`は上下、左右なので`2px * 2`です。
CSSはあやしいので`margin`と`height`との関係は誤っているかもしれませんが、
他のレイアウトへの影響を考慮して、
スクロールバーを出さないこと、
できるだけウィンドウサイズに合わせることを目標としました。
面倒なら`overflow: hidden;`でOKです。

`margin`は**1px**ではリサイズ可能になる幅が狭く、特に斜めのリサイズがかなり難しいです。
**2px**でもけっこう難しいです。
余裕を見たければ**3 ~ 5px**あればいいと思います。

Electron0.37ならCSS Variablesも使えます

```css:index.css
:root {
	--html-margin: 2px;
}

html {
	margin: var(--html-margin);
	-webkit-app-region: drag;
	height: calc(100% - (var(--html-margin) * 2));
	width:  calc(100% - (var(--html-margin) * 2));
}

body {
	height: 100%;
	width:  100%;
	margin: 0;
}

```

# 関係ないこと

Electron0.37.3～4から`frame: false`にしたときの挙動がおかしくなった気がします。
原因がよくわからなかったので0.37.2までダウングレードしました。
更新内容はそそられる内容なんですが…

[【Electron】画像を保存するだけで満足してしまうオタクのために最高の画像ビューアをつくった - Qiita]:http://qiita.com/akameco/items/58a4c91061790f29d5f6
[yamada]:https://github.com/akameco/yamada
[electron/frameless-window.md at master · electron/electron]:https://github.com/electron/electron/blob/master/docs/api/frameless-window.md
pythonのデバッガを任意のタイミングで呼び出す

Pythonのコードを書いていて、あるタイミングでデバッガを呼び出したいことはよくあります。あらかじめ呼び出したい状況が決まっていれば、単純にpdbでブレークポイントを指定したり、コード中に"import pdb; pdb.set_trace()"を埋め込むことで対応できますが、完全な「任意」のタイミングとなるとそうもいきません。
gdbでいう、実行中のプロセスにattachするようなことができないかと調べたところ、StackOverflowにエレガントな方法があったので、ここに記録しておきます。

[python - Attaching a process with pdb - Stack Overflow](http://stackoverflow.com/questions/25308847/attaching-a-process-with-pdb)

```py:
import signal
def handle_pdb(sig, frame):
    import pdb
    pdb.Pdb().set_trace(frame)
if __name__ == '__main__':
    signal.signal(signal.SIGUSR1, handle_pdb)
```

やっていることは、シグナルSIGUSR1が呼び出された時にpdbを呼び出す、というシンプルな内容です。既にSIGUSR1を他の用途に使っていない限り使えます。利用可能な他のシグナルを使ってもよいです。

# cf. gdbを直接使う
今時のgdbにはpythonが統合されており、高度な操作ができるようになっています。実行しているpythonのデバッグシンボルがあれば、直接gdbでattachしてpythonレベルでのソースコードをトレースするという手段も可能だと思います。
2013年に[大統一Debian勉強会で野島さんが発表された資料](http://gum.debian.or.jp/2013/session/449.html)が参考になります。こちらではphpのソースレベルデバッグを行っています。
デバッグシンボルの扱いはOSやディストリビューション、インストール方法によって異なるので、その点は適時読み替えてください。
Azure Storage Client Library for .NET で Blob 追加と同時に Conetnt-Type を設定する

この記事ではWindowsAzure.Storage v6.2.0を使っています。

http://stackoverflow.com/questions/24621664/uploading-blockblob-and-setting-contenttype/24622986#24622986

```csharp
var blockBlobReference = container.GetBlockBlobReference(name);
blockBlobReference.Properties.ContentType = "image/jpg";
blockBlobReference.UploadFromStream(stream);
```
***
最初↑の方法を知らなくて↓の記事を書きました。
↑がよりよいライブラリーの使い方だと思います。
***
***x-ms-blob-content-type を使用する。***

```csharp
var blockBlobReference = container.GetBlockBlobReference(name);
var headers = new Dictionary<string, string> { { "x-ms-blob-content-type", "image/jpeg" } };
var operationContext = new OperationContext { UserHeaders = headers };

blockBlobReference.UploadFromStream(stream, operationContext: operationContext);
```

UploadFromFileなどのメソッドはoperationContextパラメーターを渡すことで追加のリクエストヘッダーを設定できる。
*Content-Type* はクライアントでは直接指定できない。
`'Content-Type' ヘッダーは、適切なプロパティまたはメソッドを使用して変更する必要があります。`

***
[OperationContext.UserHeaders プロパティ](https://msdn.microsoft.com/ja-jp/library/microsoft.windowsazure.storage.operationcontext.userheaders.aspx)
[Put Blob](https://msdn.microsoft.com/ja-jp/library/azure/dd179451.aspx)
【随時更新】JDK9の非互換ポイント

JDK9でいくつかImcompatibleな問題に直面したので、ここにGitHubのIssueから、各プロダクトで挙がっているJDK9の不具合ポイントをまとめていきます。

## java.specification.versionの体系変更

https://github.com/hibernate/hibernate-validator/pull/457/

JDK9からは、[JEP 223](http://openjdk.java.net/jeps/223)にともない、バージョン番号の表記が変わりました。そして、システムプロパティjava.specification.versionの返す値も従来の「1.8」みたいな値から「9-ea」が返ってくるようになっています。

このため、HibernateValidatorでは、[以下の箇所](https://github.com/ctomc/hibernate-validator/blob/5.2.2.Final/engine/src/main/java/org/hibernate/validator/internal/util/Version.java#L34)でArrayIndexOutOfRangeExceptionが出てしまっていました。

```java
String[] specificationVersion = System.getProperty( "java.specification.version" ).split( "\\." );

return Integer.parseInt( specificationVersion[1] );
```

## sun.misc.VMの廃止

https://github.com/JetBrains/intellij-community/commit/f50e99ed18268b7cd0d66d4bdef0d0c481c0d6ad

Intellij IDEAで発生していた問題ですが、sun.*パッケージのいくつかはjdk.internalパッケージに移され、本当にJDK内部でしかアクセスできないクラスになりました。(ちょっと前に廃止か?との噂があったsun.misc.Unsafeは、そのままアクセスできます。)

## String内部のデータ表現がchar[]からbyte[]になった

[JEP 254](http://openjdk.java.net/jeps/254)にしたがい、内部表現がUTF-16のchar配列だったのが、1バイトのみで扱えるものは1バイトで、それ以外は従来どおりUTF-16で持つように変更になりました。

https://github.com/hazelcast/hazelcast/pull/5799

String#toCharArrayでは、新しいchar[]に値がコピーされるので、その分の性能ロスを嫌って、直接Stringのvalueフィールドにアクセスしているようなプロダクトは影響を受けることになります。

## AppClassLoaderがURLClassLoaderを継承しなくなった

https://github.com/Mojang/LegacyLauncher/pull/11

Jigsaw対応のため、たいていの場合システムクラスローダーとして使われるAppClassLoaderが、URLClassLoaderを継承しなくなりました。

システムクラスローダーのクラスパスをURLClassLoaderにキャストして取得しているところは、ClassCastExceptionになるので、対応が必要になります。

```java
((URLClassLoader) getClass().getClassLoader()).getURLs()
```

## -XX:PermSize, -XX:MaxPermSizeの廃止

JDK8ですでに警告が出て無視されていましたが、JDK9ではオプション自体が削除されエラーになるようになりました。

## その他

まだそれが原因で問題が出ているIssueは見当たりませんが…以下の変更があります。

* [G1GCがGCのデフォルトになった](http://openjdk.java.net/jeps/248)
* [hprofエージェント廃止](http://openjdk.java.net/jeps/240)
* [jhat廃止](http://openjdk.java.net/jeps/241)
Airbrakeで特定の条件の時に通知を行わないようにする

`Airbrake.add_filter`というAPIで`Airbrake.notify`をフックし、`Airbrake::Notice#ignore!`を実行することで通知を無効にすることができる。

例えば、Railsなどでボットからのリクエストは通知から除外したいとき

```rb:/config/initializers/airbrake.rbなど
crawler_uas = %w(
  Baiduspider
  Bingbot
  Googlebot
  Yahoo!\ Slurp
)

Airbrake.add_filter do |notice|
  if crawler_uas.any? { |crawler| notice[:context][:userAgent] =~ /#{crawler}/i }
    notice.ignore!
  end
end
```
Rackの場合は`notice[:environment]`からリファラやHTTPヘッダの情報もとれるので、より複雑な条件を書くことも可能です。

参考) https://github.com/airbrake/airbrake-ruby#airbrakeadd_filter