OmniAICreator/Qiita-1.07M huggingface dataset:
Rubyで名前空間が定義されているか確認する方法

Rubyで名前空間が定義されているか確認する方法を調べている際、色々試した結果をメモしておきます。

## 方法1.Objectに対してconst_defined?を実行して調べる

これは駄目な方法。

```ruby:method1.rb
module Hoge
  module Foo
  end
end

# 名前空間の書式で定数定義されている訳ではないので駄目.
puts Object.const_defined?("Hoge::Foo")
```

```:実行結果
method1.rb:7:in `const_defined?': wrong constant name Hoge::Foo (NameError)
        from method1.rb:7:in `<main>'
```

## 方法2.defined?で定義済みか確認する

これは素直で良い方法。

```ruby:method2.rb
module Hoge
  module Foo
  end
end

# 良い方法だが、名前空間を文字列でしか知らない場合に対応できない.
puts defined?(Hoge::Foo)
puts defined?(Hoge::Foo::Bar)
```

```:実行結果
constant

# `Hoge::Foo::Bar` は定義されていないので空文字列が返る
```

だが、仮に名前空間の情報が文字列でしか与えられていない場合、これでは対応できない。

## 方法3.名前空間を上から順番に定数定義されているかconst_defined?で調べる

ほぼほぼ無い要求かと思われるが、自分の場合、名前空間の情報を文字列でしか受け取ることができず、方法2を採用することができなかった。
そこで実施した苦肉の策が以下。

```ruby:method3.rb
require "active_support"
require "active_support/core_ext"

module Hoge
  module Foo
  end
end

def defined_namespace?(full_namespace)
  search_namespace = Object
  full_namespace.split("::").each do |name|
    return false unless search_namespace.const_defined?(name)
    search_namespace = "#{search_namespace}::#{name}".constantize
  end
  true
end

puts defined_namespace?("Hoge::Foo")
puts defined_namespace?("Hoge::Foo::Bar")
```

```:実行結果
true
false
```

名前空間の定数を上から順番になめることで、定義されている名前空間か調べている。
これならば、文字列で名前空間の情報が与えられるケースでも対応することができる。

かなりレアケースかと思われるが、自分がまたハマった時のためにメモ。
管理画面からプロジェクトにアクセスすると500エラー

2週間前までは使えていたgitlabだけど、別の作業で何気なく管理画面からprojectを見たら500エラー。
理由は不明。端末からclone、pull,push,hookも動くので管理画面だけがだめ。まいったな

versionは8.15.2
qKZ equation associated with gl_n

## qKZ equation

```math

Z_i: \Psi(z_1, \ldots,z_n) \mapsto 
 \Psi(z_1, \ldots, z_i + p, \ldots, z_n)
```

```math
Z_i \Psi = R_{i i-1}(z_i - z_{i-1} + p)\ldots R_{i1}(z_i - z_1 + p)\exp(\alpha_i) L_i(\mu) R_{n i}^{-1}(z_n-z_i)\ldots R_{i+1 i}^{-1}(z_{i+1}-z_i) \Psi
```

## Yang-Baxter eq

```math
R_{12}(u-v) R_{23} (u) R_{13}(v) 
 =  R_{13}(v) R_{23} (u)  R_{12}(u-v) 
```

```math
R_{ij}(u) \in \mbox{End}(V\otimes V)
```

```math
R(u) = \frac{u + P}{u+1}
```
Windows10 IoTCore プログラム サンプル　Lピカ　（No.001）

Windows10IoTCore+RaspberryPi3向けサンプルプログラム（RaspberryPi2でも動作します）

Build 14393で動作確認しています。

##LEDを点灯する
GPIO5にLEDを接続して点灯させる。
配線などは[こちら](https://developer.microsoft.com/ja-jp/windows/iot/samples/helloblinky)もしくは[ApplePi](http://bit-trade-one.co.jp/product/module/adcq1608p/)等の拡張ボードを利用する。
![phC-BTO-300x274.png](https://qiita-image-store.s3.amazonaws.com/0/62606/f9c19020-cbdb-6f53-17bc-043aa718352a.png)

##プログラム
```C#:MainPage.xaml
<Page
    x:Class="_001_LED.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:_001_LED"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Unloaded="Page_Unloaded">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    </Grid>
</Page>
```

```C#:MainPage.xaml.cs
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

using Windows.Devices.Gpio;

// 空白ページのアイテム テンプレートについては、http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409 を参照してください

namespace _001_LED
{
    /// <summary>
    /// それ自体で使用できる空白ページまたはフレーム内に移動できる空白ページ。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        private GpioPin pin = null;

        /// <summary>
        /// 
        /// </summary>
        public MainPage()
        {
            this.InitializeComponent();

            Led_On();
        }

        /// <summary>
        /// 
        /// </summary>
        private void Led_On()
        {
            var gpio = GpioController.GetDefault();             //GPIOコントローラーの取得

            if (gpio != null)
            {
                pin = gpio.OpenPin(5);                          //GPIO5を使用
                pin.Write(GpioPinValue.High);                   //GPIO5をHigh（オンにする）
                pin.SetDriveMode(GpioPinDriveMode.Output);      //GPIO5を出力モードにする
            }
        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Page_Unloaded(object sender, RoutedEventArgs e)
        {
            //終了処理
            pin.Dispose();
        }
    }
}
```
LEDが点灯するだけのプログラム

プロジェクトは[こちら](https://github.com/linyixian/001_LED)からダウンロードできます。
nodenv を使って Mac に Node.js の環境を構築する

# なにか？

node.js の rbenv
ちらっと調べて見る限り使いやすそう＋今もメンテナンスされてそう。

# 公式

https://github.com/nodenv/nodenv

# 日本語の情報

http://qiita.com/1000ch/items/41ea7caffe8c42c5211c


# rehash が面倒なので、以下のプラグインも入れる

https://github.com/nodenv/nodenv-package-rehash


# インストール全手順

## 本体のインストール

```console:
$ brew install nodenv
```

## プラグインのインストール

nodenv-package-rehash

```console:
$ git clone https://github.com/nodenv/nodenv-package-rehash.git "$(nodenv root)"/plugins/nodenv-package-rehash
$ nodenv package-hooks install --all
```

## 設定

```console:
$ echo 'eval "$(nodenv init -)"' >> ~/.bash_profile
```

bash extension のインストール(Optional)

```console:
$ cd ~/.nodenv && src/configure && make -C src
```

シェルの再起動、または以下の実行

```console:
$ eval "$(nodenv init -)"
```

# node.js のインストール

インストール

```console:
$ nodenv install  10.9.0
$ nodenv install  4.3.2
```

gobal の設定

```console:
$ nodenv global 10.9.0
```

local の設定

```console:
$ nodenv local 4.3.2
```
S3を使って独自ドメインで、「安く」HTTPS通信してBasic認証させたい

いろんな要求が来る年の瀬です。2016年も、もうすぐ終わりですね。

# 今日のお悩み

- 公開ドキュメントはS3におきたい。
- 独自ドメインでhttps通信したいが、cloudfrontは高いので安い方法で
- Basic認証するサイトとかあるから、それも実現させて欲しい

はて、そんなことできるのかな。

# 解決

今回は以下の構成で実現させました。

**Route53 -> ALB -> EC2(Nginx) -> S3**

- サイトの内容はS3においておきます。
- EC2のマイクロインスタンスかナノインスタンスを立てて、Nginxをインストールしてリバースプロキシを設定します。
- ALBはドメイン毎に作成します。紐付け予定の証明書はここで紐付けします。（ACM)
- Route53でドメインとALBを紐付けします
 

## 参考サイト

とはいえ、いろんな方法があるかと思います。
今回、実装するにあたって、いろいろな記事を参考にしました。
その上で予算や今後の運用に合わせて選ぶのがベストだと思います。

- [S3 コンテンツの Basic 認証 \+ HTTPS 配信 \- Qiita](http://qiita.com/pottava/items/54e2670a97e452efbcbd)
- [nginxでS3へリバースプロキシ \| Tech\-Sketch](https://tech-sketch.jp/2013/02/nginx-proxy.html)
- [Amazon S3にてBasic認証をかける \| cloudpack\.media](https://cloudpack.media/10456)
- [How to configure Nginx to serve statics from Amazon S3](http://davidburgosonline.com/devops/2014/nginx-to-serve-statics-from-amazon-s3/)
- [Nginx as proxy for Amazon S3 public/private files \(Example\)](https://coderwall.com/p/rlguog/nginx-as-proxy-for-amazon-s3-public-private-files)
- [S3\+EC2 NginxでBasic認証をかける \| Timegraphy](https://thetimegraphy.com/aws-ec2-basic-auth-on-nginx-with-s3/)
- [AWSにおける静的コンテンツ配信パターンカタログ（アンチパターン含む） ｜ Developers\.IO](http://dev.classmethod.jp/cloud/aws/static-contents-delivery-patterns/)

## 手順

### > S3でサイトの公開準備

- S3でサイトの公開手順については、公式サイトで。
    - [Amazon S3 での静的ウェブサイトのホスティング \- Amazon Simple Storage Service](http://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/WebsiteHosting.html)

### > EC２にNginxを設定する

- Nginxのインストール

```shell-session
sudo yum update
sudo yum install -y nginx
sudo chkconfig nginx on
sudo /etc/init.d/nginx start
```

- Basic認証用のパスワードファイルの作成

```shell-session
sudo htpasswd -cb .htpasswd_test <User> <PassWord>
```

- confファイルの設定
    - Basic認証ありの場合
        - Basic認証用のパスワードファイルのパスを設定します。
    
```nginx

server {
  listen       80;
  server_name  test.example.net;
  location / {
    auth_basic "Restricted";
    auth_basic_user_file /etc/nginx/.htpasswd_test;
    proxy_pass test.example.net.s3-website-ap-northeast-1.amazonaws.com/;
  }
}
```

- Basic認証なしの場合
    

```nginx

server {
  listen       80;
  server_name  static.example.com;
  location / {
    proxy_pass static.example.com.s3-website-ap-northeast-1.amazonaws.com/;
  }
}

```
### > ALBの設定

- ターゲットグループを作成します
    - 上記で作成したEC2インスタンスを登録します
    - ヘルスチェックは80/HTTP
- ロードバランサを作成します
    - リスナーは443/HTTPS
    - この時に取得済みのサーバ証明書を設定します。
    - 上記で作成したターゲットグループを設定します。

### > Route53の設定

紐付けしたいドメインに対して、上記で作成したALBを設定します。

![route53.png](https://qiita-image-store.s3.amazonaws.com/0/32215/8c86b9b7-eb52-342c-c0a1-7a048e3c91ed.png)


### > 確認

それぞれアクセスしてみます。
OKですね！
Rで局所的な変数束縛ごっこ

はじめに
---

年末年始でヒマなので、Haskell ライクな局所的な変数束縛や関数に対してのみ有効な変数束縛を R で実現して遊ぼうというのをやってみました。

動機
---

何かカッコいいじゃないですか、こういうの。

````haskell
velocity x1 x2 t1 t2 = dx / dt
  where
    dx = x2 - x1
    dt = t2 - t1
```

変数の順番考えずに定義だけ並べて宣言的に書けるのとか。スコープがきっちり限定されるのとか。

あと[`lambda.r`パッケージ](https://github.com/zatonovo/lambda.r)を見て楽しそうだなと思ったのとか、ですね。

実装
---

[https://github.com/ngr-t/r-bindedEval](https://github.com/ngr-t/r-bindedEval) に置いてます。一丁前にパッケージにしてみたのはパッケージの作り方の勉強も兼ねてです。

使い方
---

Haskell の let 式の真似をした let 関数はこんな感じです。Haskell 連呼するのって Haskell ガチ勢に殴られそうで怖いですね。
適当に束縛したい変数とその定義を並べて、`.in`引数に最終的に評価したい表現を渡します。

```R
z <- let(x = 1, y = 2, .in = x + y)
# x と y には let 関数の外からはアクセスできない

velocity_let <- function (x1, x2, t1, t2) let(
  dx = x2 - x1,
  dt = t2 - t1,
  .in = dx / dt)

velocity_let(80, 90, 0, 0.5)
# [1] 20
```

もしかすると

```R
z <- let(x = 1, y = 2) %.in% (x + y)
```

みたいな構文の方がそれっぽいかもしれません。そのうちこっちで書いてみるかもです。

`where`構文の真似っこは以下です。パイプを使って書いていますがこちらは関数を第一引数にします。関数の定義の際に使ってください。

```R
velocity_where <- (function (x1, x2, t1, t2) {
  dx / dt
}) %>%
where(
  dx = x2 - x1,
  dt = t2 - t1)

velocity_where(80, 90, 0, 0.5)
# [1] 20
```

関数定義を`()`で括るのはちょっとイケてないのですが、そこは R の演算子の結合順序の関係で、そうしないと関数ではなくて`{}`のでくくった部分が`where()`関数の引数になってしまいます。

`let()` および `where()` 関数両方についてですが、束縛される変数の定義にほかの束縛された変数を使えます。順番は適当でも大丈夫です。なので

```R
let(x = y * 2, y = 1, z = x * y, .in = z)
# [1] 2
```
とかでも問題ありません。

以下のように相互参照してるのはダメです。

```R
let(x = y, y = x, .in = x + y)
# Error
```

今回の実装ではこの辺りは`igraph::topological.sort()`で評価順序を決めているんですが、`delayedAssign()`を使えば、こちらで難しいことを考えなくても R のインタープリタが必要に際してよしなに評価してくれます(あらかた書いたところでこの関数の存在を知りました)。


関数を束縛しても良いんですよ。

```R
fire <- (function (x, w, threshold)
    heaviside(weighted_sum - threshold)) %>%
  where(
    heaviside = function (x) ifelse(x > 0, 1, 0),
    weighted_sum = sum(x * w))
```


全体的にありがたみの薄い例しか挙げられませんでしたね。

パターンマッチング
---

無茶言わないでください。


所感
---

R はキモいDSLが書きやすいですね、良くも悪くも。環境操作とか構文パースとか評価順序いじったりとか、いろいろ出来ますほんと。

パッケージ作るのは思っていたほどには面倒ではありませんでした。`devtools::build()` が静的言語解析？をやってくれるのも助かりますね。
Linux: psコマンドで表示されるプロセスの名前を変更する

- 一部のシステムでは`setproctitle`という関数が使える
- Linuxには標準では`setproctitle`は無い。`argv[0]`を書き換えるしかないので面倒
    - 元より長いコマンド名を書き込むと`argv[1]`以降と環境変数がある領域を破壊するので、あらかじめ別の場所にコピーする必要がある
- util-linuxにLinux用の`setproctitle`実装があるので、これをコピペすれば簡単にできる
  - ただしGPLだと思うので注意。
  
追記：探してみたら[redisにも実装があった](http://download.redis.io/redis-stable/src/setproctitle.c)。RedisはBSDライセンス。

```test.c
/*
 *  set process title for ps (from sendmail)
 *
 *  Clobbers argv of our main procedure so ps(1) will display the title.
 */
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <stdarg.h>

//#include "setproctitle.h"

#ifndef SPT_BUFSIZE
# define SPT_BUFSIZE     2048
#endif

extern char **environ;

static char **argv0;
static int argv_lth;

void initproctitle (int argc, char **argv)
{
  int i;
  char **envp = environ;

  /*
   * Move the environment so we can reuse the memory.
   * (Code borrowed from sendmail.)
   * WARNING: ugly assumptions on memory layout here;
   *          if this ever causes problems, #undef DO_PS_FIDDLING
   */
  for (i = 0; envp[i] != NULL; i++)
    continue;

  environ = malloc(sizeof(char *) * (i + 1));
  if (environ == NULL)
    return;

  for (i = 0; envp[i] != NULL; i++)
    if ((environ[i] = strdup(envp[i])) == NULL)
      return;
  environ[i] = NULL;

  argv0 = argv;
  if (i > 0)
    argv_lth = envp[i-1] + strlen(envp[i-1]) - argv0[0];
  else
    argv_lth = argv0[argc-1] + strlen(argv0[argc-1]) - argv0[0];
}

void setproctitle (const char *prog, const char *txt)
{
        int i;
        char buf[SPT_BUFSIZE];

        if (!argv0)
                return;

  if (strlen(prog) + strlen(txt) + 5 > SPT_BUFSIZE)
    return;

  sprintf(buf, "%s -- %s", prog, txt);

        i = strlen(buf);
        if (i > argv_lth - 2) {
                i = argv_lth - 2;
                buf[i] = '\0';
        }
  memset(argv0[0], '\0', argv_lth);       /* clear the memory area */
        strcpy(argv0[0], buf);

        argv0[1] = NULL;
}

// テスト用のmain関数
int main(int argc, char* argv[])
{
  initproctitle(argc, argv);
  setproctitle("hoge", "あいうえお");

  printf("Hello my pid = %d\n", getpid());
  sleep(10);
  
  return 0;
}
```

参考：

[postgresのps_status.c](
https://github.com/postgres/postgres/blob/71fc49dfe1d99bd83cd99c2e7a39f93e07d19310/src/backend/utils/misc/ps_status.c)　プラットフォームごとに様々な方法でコマンド名変更を実現している

```
/*
 * Alternative ways of updating ps display:
 *
 * PS_USE_SETPROCTITLE
 *	   use the function setproctitle(const char *, ...)
 *	   (newer BSD systems)
 * PS_USE_PSTAT
 *	   use the pstat(PSTAT_SETCMD, )
 *	   (HPUX)
 * PS_USE_PS_STRINGS
 *	   assign PS_STRINGS->ps_argvstr = "string"
 *	   (some BSD systems)
 * PS_USE_CHANGE_ARGV
 *	   assign argv[0] = "string"
 *	   (some other BSD systems)
 * PS_USE_CLOBBER_ARGV
 *	   write over the argv and environment area
 *	   (Linux and most SysV-like systems)
 * PS_USE_WIN32
 *	   push the string out as the name of a Windows event
 * PS_USE_NONE
 *	   don't update ps display
 *	   (This is the default, as it is safest.)
 */
```
Haskellでfor文

Haskellの勉強始めたけどfor文が無くて困ったので作ってメモしておく。

print n　してるとこにやりたい処理（関数）書けばいわゆるfor文のように使えるかなと、できることなら関数ポインタ？渡して汎用化したいけどHaskellそこまで分からないので必要になる都度に下記のようなコード作っていこうかなという感じです。
そもそもHaskellの思想を察するとfor文滅多に必要にならないはずなので汎用化の必要は無いのかもしれない。

```
eachUpTo n max
    | n > max = error "だめだよ"
    | n == max = do
        return max
    | otherwise = do
        print n
        return =<< eachUpTo (n + 1) max

eachDownTo n min
    | n < min = error "だめだよ"
    | n == min = do
        return min
    | otherwise = do
        print n
        return =<< eachDownTo (n - 1) min

eachDown i
    | i < 0 = error "だめだよ"
    | i == 0 = do
        return 0
    | otherwise = do
        print i
        return =<< eachDown (i - 1)

main = do
    putStrLn "eachUpTo 0 10"
    print =<< eachUpTo 0 10
    putStrLn "eachDownTo 10 0"
    print =<< eachDownTo 10 0
    putStrLn "eachDown 10"
    print =<< eachDown 10
    --
    --print =<< eachUpTo 100 10
    --print =<< eachDownTo 10 100
    --print =<< eachDown (-1)
```

>
```
eachUpTo 0 10
0
1
2
3
4
5
6
7
8
9
10
eachDownTo 10 0
10
9
8
7
6
5
4
3
2
1
0
eachDown 10
10
9
8
7
6
5
4
3
2
1
0
```
機械学習のライブラリを片っ端からpipで入れまくる(Ubuntu)

知っているライブラリを片っ端からpipで入れまくっちゃいます。pip万歳！
新しいライブラリ見つけたらどんどん追加します。

#pip本体のインストール
`$ sudo apt-get install python-pip`

#pipの使い方
なぜか僕の環境では`$ sudo -H pip install pip ライブラリ名`としないと上手く行かないんですが、
他のサイトなどでは`$ pip install ライブラリ名`と書いてあるので、以下はこっちで行きます。
僕と同じくsudo必要な人いないのかなぁ〜

#科学技術計算のライブラリ
ライブラリ：numpy, scipy, pandas, matplotlib, scikit-image
`pip install numpy scipy pandas matplotlib scikit-image`

#機械学習
ライブラリ：chainer, tensorflow, Theano, keras, scikit-learn
`pip install chainer tensorflow Theano keras scikit-learn`
僕は持っていないGPUを持っていないので、CUDAやcuDNNは知りません。GPU欲しいなぁ〜
あと、Caffeはインストールが大変らしいです。(ネットで見たところ)

####Open AI Gymだけ注意
`$ sudo apt-get install -y python-numpy python-dev cmake zlib1g-dev libjpeg-dev xvfb libav-tools xorg-dev python-opengl libboost-all-dev libsdl2-dev swig`
これらを最初にインストールしないと全部は入れられないらしい。([公式のgithub](https://github.com/openai/gym)のREADME.rstのInstalling everythingからの情報)
そして全環境インストール
`$ sudo pip install gym[all]`

#pipじゃないけど機械学習のライブラリ
最近流行りの深層強化学習のライブラリ[keras-rl](https://github.com/matthiasplappert/keras-rl)を発見！
まずgitをインストール
`$ sudo apt-get install git`
あとはREADME.md通りに(h5pyも入れといたほうがいいっぽいです)
`$ pip install h5py`
`$ cd 「github用のディレクトリ」`
`$ git clone https://github.com/matthiasplappert/keras-rl.git`
`$ cd keras-rl`
`$ sudo python setup.py install`
exampleが面白いので紹介
`$ python 「github用のディレクトリ」/keras-rl/examples/dqn_cartpole.py`
頑張って耐えてますねぇ〜他にもいろいろあるみたいです。あと、終わらすときはCtrl+Cです。

#参考
[Deep learning × Python](http://qiita.com/neka-nat@github/items/ad58d6832bd31d7e273d)
この記事を見てkerasとkeras-rlを知りました。あまり有名ではなさそうですが、kerasはコードが直感的に短く書けてよさげです。

#追記
Python3の場合は
`$ sudo apt-get install python3-pip`
でpip3をインストール
あとは
`$ pip3 install ライブラリ名`
でOK
keras-rlは
`$ sudo python3 setup.py install`
に変えてやればOK
個人的には、早く全部Python3に変えてしまえばいいのにと思ってるんですが、
Ubuntu 16.04 LTSでもまだPython2が標準という現実。
とりあえず両方インストールしておけばOK
React 入門チュートリアル①

はじめまして、あけましておめでとうございますm(\_ \_)m
開発でReactを使うおことになり、現在もReact勉強中なのですが、  プログラミング初心者向けのReactの記事が意外と少なかったので、書いていこうと思います。

自分もプログラミング歴４ヶ月程のひよっこなので、これからアプリ作ってみたい方がいましたら、ReactNativeにも触れていこうと思うので是非是非~

## 今回の目標
・できるだけ簡単にReactに触れてみる
・基本中の基本の「コンポーネント作成→HTMLに変換→表示」の部分を理解する
・文字の表示とCSSを当てる


## 用意するもの
- html,css,js（javascript）のちょっとした知識
 jsに関しては自分も「確かな力が身につくJavaScript「超」入門」を 2/3くらいやった(途中で飽きた)程度

- テキストエディタ(Sublime、Atomとか)

- ブラウザ(Cromeがオススメ)

## では、さっそくHello Worldを表示から

まずは新規のhtmlファイルを作成して、以下のコピペしてください。

`index.html`

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>
  // idを付けてdivを宣言してます
  <div id="content">
  </div>

  // reactとreact-domのライブラリを読み込む
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>

  // babelを読み込む
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js"></script>

  <script type="text/babel">

  </script>

</body>
</html>
```

Hello,Worldを表示するために、`div`にid付けて宣言して,
reactのライブラリを読み込んで、JSXとかES6を使いたいのでBabelを読み込むみたいな感じです。  
JSXとES6はjavascriptの拡張構文で、JSXとかES6の記法で書いたものを、Babelが標準のjavascriptにコンパイルしてくれます。

実際にReactを使って書いていきます。

`index.html`

```
<script type="text/babel">
  ReactDOM.render(
    <h1>Hello, World</h1>,
    document.getElementById('content')
  );
</script>
```

このように追記して、ブラウザに`index.html`を読み込ませれば`Hello, World`が表示できるはずです。

説明していくと`ReactDOM.render()`はコーポネントをHTMLに変換するメソッドで

```
<script type="text/babel">
  ReactDOM.render(Reactコーポネント、表示場所);
</script>
```
みたいな感じで書きました。

コーポネント？`<h1>Hello, World</h1>`ていうhtmlをそのまま`id="content"のdiv`内に渡してるように見えますが、
 `<h1>Hello, World</h1>`はJSXで書かれたもので、Babelでコンパイルしてみると

```
React.createElement(
  "h1",
  null,
  "Hello, World"
);

// ↓ここでいろいろ試せる
// https://babeljs.io/repl/
```
となる。お察しの通りこのこの`React.createElement()`というメソッドがReactコンポーネントを作成するメソッドで
引数の意味は`React.createElement(HTMLのタグ名,要素の属性,要素の内容);`です。

### JSXを使う意味
今のところ自分がわかっているのは、

- 短くかける
- htmlぽくかける(書きやすい)
- ネストさせても見やすい(一番効果を感じるところかも)

結論綺麗にかけるてことです。  
JSX記法に関しては、別の記事で詳しく書く予定。

## CSSを当ててみる

### コンポーネントにクラス名を指定する

Reactコンポーネントにcssを当てるのはいくつか方法があると思うのですが、１つ目は従来のHTMLのように`class`を付けて、cssファイルを読み込む方法があると思います。  
自分もこの方法やったことないので実際に今からやっていきたいと思います。

```javascript
<h1 className="text">Hello, World</h1>
```
`className=""`でクラス名を指定してます。

次に少しご法度ですが、`<head>`内にcssを定義します。

```html
<head>
  <!-- 省略 -->
  <style type="text/css">
    .text { color: blue; }
  </style>
</head>
```
これで、Hello, Worldが青くなるのがわかるはずです
### scriptタグ内でCSSを定義する

CSSをJavaScriptのオブジェクトにして、コンポーネンのstyleに読み込ませます
。
styleというオブジェクトを定義して、`style={}`でcssを読み込みます。
変数は`{}`でくくって呼び出します。

```
const style = {
  container: {
    color: 'blue',
    fontSize: 32
  }
};

ReactDOM.render(
  <h1 style={style.container}>Hello, World</h1>,
  document.getElementById('content')
);
```

## おわり

ガチガチの入門になったので、次回はもう少しアプリっぽいものを作れるところまで、やりたいたいと思います。お疲れ様でした。

#### 記事作成TODO
- [x] React 入門チュートリアル②  
=> http://qiita.com/stivan622/items/52596d39e8b02bfbc8a9
- [x] カスタムコンポーネント作成  
同じく => http://qiita.com/stivan622/items/52596d39e8b02bfbc8a9
- [ ] JSX記法
laravel の Blade Template でループをするときは @forelse でスッキリ

Bladeでループを書くときは、こんな風に入れ子で書いていました。

```*.blade.php
@if ($task->count())
    @foreach ($tasks as $task)
        <li>{{ $task->name }}</li>
    @foreach
@else
    no task
@endif
```

もちろんこれでいいのですが、 `@forelse` を使うとスッキリ書くことができます。

```*.blade.php
@forelse ($tasks as $task)
    <li>{{ $task->name }}</li>
@empty
    no tasks
@endforelse
```

マニュアルを見ると、この構文は5.1以降で使えるようです。
iPhoneでポートフォワーディングを利用するには

iPhoneアプリがことごとくポートフォワーディングに対応していない。

## 手順

ルーターでポート開けている端末にsshする。

ssh -gNL 8080:192.168.1.9:3000

のように自前のサーバーを利用してgつければよい。
concrete5のアドオンを公開している人のウェブサイトリンク集

## concrete5のアドオン
https://concrete5.org/ では、誰でもアドオンを公開申請することができます。申請されたアドオンは有志により審査が行われます。審査に合格すると、公式サイト(concrete5.org)で公開されます。

公式サイトで公開されているアドオンは、審査を受けて合格したものなので、一定以上の品質が保証されています。公式サイトで公開されているアドオンであれば、顧客のウェブサイト構築に躊躇なく利用できる点が魅力です。

## アドオン開発者のウェブサイト
上述のように、concrete5の公式サイトで公開されているアドオンは有益なものです。しかし一方で、アドオン開発者を知る機会は、それほど多くないように感じます。concrete5.orgでは、アドオンの検索は容易ですが、アドオン開発者を探すのは結構面倒に思いました。
そこで、アドオン開発者のウェブサイトへのリンク集を作ることにしました。明快な基準は設けていませんが、

+ 現行バージョン(5.7以降)のアドオンを公開していること
+ 公開しているアドオンの個数が5個以上あること

を目安に記載しています。

+ http://www.unfreeze.net/concrete5/addons/ 私が使ったことがあるのは、Up Down Vote Lister。
+ http://concrete5.devoda.nl/ 私は使ったことがないですが、Block Designerが有名です。
+ http://www.pinecreativelabs.com/ EZ Paypal を使用検討したことがあります。(最終的には使わなかったです)
+ https://mnkras.com/ Page Selector Attribute を使ったことがあります。
+ http://notnil-creative.com/ Open Graph Tags Lite を使ったことがあります。
+ http://c5hub.com/ Cookies Disclosure を使用に向け準備中です。
+ http://www.devphp.net/ Spacer アドオンがシンプルですが便利です。
+ https://sample.rescuework.nagoya/ 私のサイトです。Rescuework's Youtube Latest Video & Playlist が稼ぎ頭です。
+ http://killerwhalesoft.com/addons/ Whale Sky Tabs を使ったことがあります。

## ウェブサイト募集中
上記のリストは、私が調べたことのある範囲ですので、漏れがあるかもしれません。漏れに気づいた方は、コメントなどでお知らせいただけると幸いです。
【ゲリラアドカレ】UE4ゲーム実装　ラスト進捗報告 EXその５（カード図鑑作成）

【非公式】某会社設立記念ゲリラ Advent Calendar 2016 24日目の記事です。
以下、2017年1月1日に書いた内容になります。

---

新年明けましておめでとうございます。新年5つめの記事です。
アドカレ的にはクリスマスイブですが、書いている日は正月なのです。

FlashゲームをUE4で再実装するゲリラアドカレ、EXその5です。
今回は~~すっかり忘れていた~~カード図鑑の実装になります。

プロトタイプ作成という点ではすでに終了しているため、アドカレでUE4ゲーム実装の進捗を書くのは今回で最後になります。
次に今回のゲリラアドカレでの反省点を書いて、終了したいと思っています。

・注意
許可を取ってないので通常業務の空いた時間を利用して作成するため、作成中のゲーム自体はリリースされる保証も皆無なので、あんまり期待しないでください。

#タイトル画面を少し改良

オリジナルの画面を参照しようとしたのですが、すでにイベントが終了し、スクリーンショットを取り忘れていたためどういうデザインなのか把握していないため、新規で作ってしまいます。

カード画面の表示はタイトル画面で作ります。

![2017-01-01 (24).png](https://qiita-image-store.s3.amazonaws.com/0/104377/9d728a9a-0700-abdc-8932-6db48401647c.png)

タイトルのUIにカード図鑑表示用のボタンを追加します。

![2017-01-01 (23).png](https://qiita-image-store.s3.amazonaws.com/0/104377/d5f62d4b-9204-1a95-7b38-c6f1f687e8e2.png)

ボタンをクリックしたらカード図鑑のＵＩを表示する処理を書きます。
![2017-01-01 (28).png](https://qiita-image-store.s3.amazonaws.com/0/104377/424cefd6-a70d-7a5e-a128-6f4b3bbcf867.png)

#カード図鑑作成

続いてカード図鑑を作成します。
クエスト選択画面で使用していた本のアニメーションを複製して、カード図鑑へと改造してしまいます。

まずカードを表示するUIを作成します。このImageを動的に変更していく予定です。
![2017-01-01 (22).png](https://qiita-image-store.s3.amazonaws.com/0/104377/c23dde3b-289d-b25c-9fce-b7c6bb62eca3.png)

つづいてカード図鑑本体のUI作成を行います。

![2017-01-01 (25).png](https://qiita-image-store.s3.amazonaws.com/0/104377/b3802cfc-e97a-ef2d-2757-ab2340ffc584.png)

本を開くアニメーションはそのままで、先ほど作成したカードUIを並べます。
ページング処理で画像を切り替えていきたいため、ページを進めるボタンを下に作成します。
左上にこのUI自体を閉じるためのボタンを作成します。

つづいてイベント処理を実装します。

実質的に目に見える形で処理が働くのは閉じるボタンのみになります。
![2017-01-01 (27).png](https://qiita-image-store.s3.amazonaws.com/0/104377/59ecca2a-856b-54de-554a-745f28a222a9.png)

本来であればカード図鑑用のデータテーブルを作成し、動的にイメージを切り替える必要がありますが、今回は時間の都合でいったん見送ります。

#カード図鑑が表示されるようになった

カード図鑑が表示されるようになりました。
![2017-01-01 (20).png](https://qiita-image-store.s3.amazonaws.com/0/104377/ed5c414c-f231-31d1-3a8e-32610647b3d8.png)

![2017-01-01 (21).png](https://qiita-image-store.s3.amazonaws.com/0/104377/08f7e43c-6290-7341-79ef-7c4b0027d0e1.png)

表示しているカード画像は仮のものですが、プロトタイプとして確認するだけなら十分な出来であると言えます。

というわけで、アドカレ上では実装は一旦これで終了となります！
色々反省点があるので、早速まとめたいと思います。
cssで複数の線をつける方法について

## この記事でお伝えしたいこと
この記事は、cssで複数の線をつける方法についてです。
要素に複数の線をあてるのは非常に面倒ですが、こちらで紹介した方法を用いることで簡単に実現ができます。以下ではその方法を紹介したいと思います。

## 作り方
### サンプル
http://jsdo.it/kimura511/OBh0/

### 作り方
box-shadowというプロパティを利用します。
box-shadowは要素に影をつけるためのプロパティです。[^1]
borderやoutlineとは異なり、一つの要素に複数設定することができます。[^2]
```
box-shadow:0 0 0 10px #c00,0 0 0 10px #cc0 inset
```
box-shadowの三番目の数値はぼかし距離を設定する値です。これを0にすることで一切ぼやけない影、つまり、線の代わりになります。

ただし、注意点としてbox-shadowのデフォルトの設定では、widthの値の外側になってしまいます。それを防ぐためにこちらのサンプルでは、insetという値を入れて、widthの中に含まれるようにしました。

### 参考文献
CSSシークレット ―47のテクニックでCSSを自在に操る
http://ur0.biz/AG7B

[^1]: http://www.htmq.com/css3/box-shadow.shtml
[^2]: borderにはdoubleという設定で二重線がひけますがそれでは同色になってしまいます
windows環境でluigiに無理やり並列処理をさせる

**標準ライブラリの方にも手を加える改造をします**
**windows環境以外または並列処理をしない場合は、改造は必要ありません**

# はじめに

## luigiとは
ジョブスケジューラーの一種です。
複数のジョブの間に依存関係がある場合、それらを正しい順序で実行してくれます。
また、ジョブの間に依存関係がない場合は並列に実行してくれます。

詳しくは公式ページを見てください。
[spotify/luigi](https://github.com/spotify/luigi)

## windows環境での問題
windows環境でのみ並列化ができません。

その原因は、luigiではジョブをプロセス間でpickleを使ってシリアライズしていますが、windows環境のpickleの実装ではシリアライズできないオブジェクトがあるせいです。(多分)

# 解決策

## 無理やり改造する方法(バージョン2.2.0以上)
ライブラリを書き換えます。
書き換え対象はluigi/worker.pyと標準ライブラリのmultiprocessing/reduction.pyの二つです。

```py3:Lib/site-packages/luigi/worker.py
# importを追加
from functools import partial

# TaskProcess.__init__内部
class TaskProcess(multiprocessing.Process):
    ...
    def __init__(self, task, worker_id, result_queue, tracking_url_callback,
                 status_message_callback, use_multiprocessing=False, worker_timeout=0):
        ...
        # self.tracking_url_callback = tracking_url_callback
        self.tracking_url_callback = partial(tracking_url_callback, task)
        # self.status_message_callback = status_message_callback
        self.status_message_callback = partial(status_message_callback, task)
        ...
    ...

class worker(Config):
    ...
    # Worker._create_task_processの内部の関数を移動
    def _update_tracking_url(self, task, tracking_url):
            self._scheduler.add_task(
                task_id=task.task_id,
                worker=self._id,
                status=RUNNING,
                tracking_url=tracking_url,
            )
        
    # Worker._create_task_processの内部の関数を移動
    def _update_status_message(self, task, message):
        self._scheduler.set_task_status_message(task.task_id, message)

    def _create_task_process(self, task):
        # def update_tracking_url(tracking_url):
        #     self._scheduler.add_task(
        #         task_id=task.task_id,
        #         worker=self._id,
        #         status=RUNNING,
        #         tracking_url=tracking_url,
        #     )

        # def update_status_message(message):
        #     self._scheduler.set_task_status_message(task.task_id, message)

        return TaskProcess(
            task, self._id, self._task_result_queue, self._update_tracking_url, self._update_status_message,
            use_multiprocessing=bool(self.worker_processes > 1),
            worker_timeout=self._config.timeout
        )
    ...
```

```py3:Lib/multiprocessing/reduction.py
# 冒頭のインポートの部分
# import pickle
import dill as pickle
```

dillはpipでインストールできます。

## 別の解決策
古いバージョンを使います。この場合は、あまり改造は必要ありません。

こちらは標準ライブラリには手を加えません。
[windowsでluigiを並列処理させたらエラーになったけど、その解決法](http://qiita.com/soyiharu/items/050b278af2102a8618c1)
[Pickle crashing when trying to pickle "update_tracking_url" in luigi.worker?](https://github.com/spotify/luigi/issues/1423)

# 最後に
私が実際に使っている限りでは問題は起きていませんが、
改造は自己責任でお願いします。
英語勉強について書いてみた

※随時更新していきます
Writingにおすすめ書籍を1つ追加しました (2017/01/04)
***


プログラミング共有サイトだし、、と思ったら意外にも"英語"タグがあった。
新年最初の投稿として、自分なりの英語勉強法を晒して見る

ちなみに僕は先月TOEICを初めて受験した英語初心者だけど、ようやく毎日英語を書かずにはいられない！という状態にまで持ってこれた。これからが肝心だと思ってる。

## 英語との向き合い方
英語を使って何をしよう。
これが<strong>最初にして最大の壁</strong>だと個人的に思う。
プログラミングと同じ<strong>ただの言語</strong>なので、それを使って何をしたいのかが今後のモチベや覚えたい言葉に影響してくると思う。

例えば僕は
<strong>・MLBについて英語で語り合いたい</strong>
<strong>・アニメについて英語で語り合いたい</strong>
<strong>・英語出来るんだぜアピールを知人にしたい</strong>

ので。"話す"ことに特に気持ちが寄っている。
ただこの話すことが"読む・聞く・書く"に比べると一番難しいので、ここでは割愛。
何より<strong>[英会話教室](http://www.aeonet.co.jp/)や[DMM英会話](http://eikaiwa.dmm.com/)やスポーツバーなどで英語圏の方々とタイマン張る</strong>のがもっとも近道だとは思うのだけど、敷居が高すぎる。

ともあれ、まずは自分が何をしたいのかを明確にしてみることを強くオススメしたい。
ということで以下"話す"以外のことで勉強していることをまとめる

##書く(Writing)
####[DUO3.0](https://www.amazon.co.jp/dp/4900790052)
言わずと知れたThe King of Reference for TOEIC.
英文法・英単語・英熟語の基礎がこれ1冊で(だいたい)マスター出来てしまう。
後述するCDと合わせられれば強い(確信)。

####[Lang8](http://lang-8.com/)
添削SNSサイト。
毎日書けば書くほど添削してもらいやすくなるアルゴリズムが特徴。
ただしレスポンスがすごく遅いのが難点。プレミアム会員になっても変わらず。
覚えた文をここに書いて書きまくって、添削されて、また書いてと重ねていくと自然と頭の中で英文が出来上がるのが、脳内デバッグにすごく似てて面白い。

####[どんどん話すための瞬間英作文トレーニング](https://www.amazon.co.jp/dp/4860641345)
ライティングで特に効果を発揮する良書。
内容はとてもシンプルで初〜中級向けですが、何よりも始めにある勉強メソッドが秀逸。
「何回も単調なものを書いて繰り返せ！」といえばそれまでですが、それに至る説明がとても良いです。ライティング脳を一気に高めてくれます。

####いろんな記事を写経
プログラミング同様、参考になる文をそのまま書き起こし続ける習慣をつけるのが手取り早い。
特に自分の好きな文を書くのをオススメしたい。
歌詞だと文法を無視しているものが多いけど、それでも英語を好きになる一番の近道だと思う。

##読む(Reading)
####[ニュースで英会話](https://cgi2.nhk.or.jp/e-news/index.cgi)
NHKで放送している英会話番組。日本で主に取り上げられるニュースを英語で紹介しているのが特徴。英文も高校(大学)入試受験者や初〜中級向けと読みやすい。
さらに無料でリスニング(ゆっくり/普通)の機能もついてたりと至れり尽くせり。

ただし個人的に興味のあるスポーツニュースが滅多になく、関心の薄い記事ばかりというのが残念なところ。英字ニュースを読みたいという人には重宝されるはず。

####[StudyNow](https://itunes.apple.com/jp/app/zakkuri-ying-yunyusu!studynow/id934785989?mt=8&ign-mpt=uo%3D4)
現在iOSのみのアプリだが、今年Android版もリリースされるらしい。
とにかくわかりやすい短文英文と、リスニング(要ポイントor有償)がついた初〜中級者向けアプリ。
たくさんの英語勉強アプリがあるが、初心者に強くオススメするならまずこれ。
カテゴリも多いのでいろんな記事が読めるのも特徴

####[EnglishUpgrader](http://www.appbank.net/2015/12/18/iphone-application/1142068.php)
TOEICが公式で出しているiOS/Androidアプリ。
リスニングだけでなく、試験情報などTOEIC試験に注力したアプリとなっている。

##聞く(Listening)
####[DUO3.0 / CD(復習用)](https://www.amazon.co.jp/dp/4900790079)
500を超える例文の文章・英単語熟語を全て耳で覚えられる。
通勤中の隙間時間で勉強といっても、満員電車でスマホ開くのも無理なんだよねぇ…って人もイヤホンさえつけられれば勉強が可能。DUOの例文を書くのと耳で覚えられるのが合わさると覚えるスピードが段違い。

####[ニュースで英会話](https://cgi2.nhk.or.jp/e-news/index.cgi)
さっきも出たし書いたので割愛

##その他(Others)
####[これだけ!TOEIC TEST全パート完全攻略!](https://www.amazon.co.jp/dp/4860638611)
各パートごとにTOEIC試験についてポイントが列挙されている参考書。
Kindle版もあるのでKindleの方はそちらもオススメ。CDもついてきているのでリスニング勉強もできる



とりまこんな感じです。
僕は3月に再度TOEIC試験に挑む予定。
他に英語勉強されている方、一緒に頑張りましょう！！
android-times-squareを使って簡単にカレンダーを表示してみた時の思い出

こんにちは@xsotaです。
Androidでカレンダーを表示してみた時の思い出を記録します。備忘録ってやつです。

## android-times-square
みんなだいすき[square](http://square.github.io/)製のライブラリです。
https://github.com/square/android-times-square

## 導入
app/build.gradleのdependencies内に以下を追加する。

```groovy:app/build.gradle
    compile 'com.squareup:android-times-square:1.6.5@aar'
```


## カレンダー表示してみる
activity_main.xmlをこんな感じにする。

```xml:activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  android:id="@+id/activity_main"
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:paddingBottom="@dimen/activity_vertical_margin"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  tools:context="com.xsota.androidtimessquaretest.MainActivity">

  <com.squareup.timessquare.CalendarPickerView
    android:id="@+id/calendar_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />
</RelativeLayout>

```

MainActivityはこんな感じにしときます。

```java:MainActivity.java

import java.util.Calendar;
import java.util.Date;

public class MainActivity extends AppCompatActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Calendar nextYear = Calendar.getInstance();
    nextYear.add(Calendar.YEAR, 1);

    CalendarPickerView calendar = (CalendarPickerView) findViewById(R.id.calendar_view);
    Date today = new Date();
    calendar.init(today, nextYear.getTime())
        .withSelectedDate(today);

  }
```

実行して・・・表示されました。
![20170101181400.png](https://qiita-image-store.s3.amazonaws.com/0/113692/1e640e99-2c76-6896-4fa4-b957dcfbe195.png)

## おわり
とりあえず表示はめちゃめちゃ簡単にできました。
今度は指定した日付だけ色を変えるとかなんかいろいろやってみたいですね。

さようなら。
[初心者向け] gitでの開発環境を整える(git-prompt / git-completion)

MacOSXにて。

# git-completion

gitコマンドの補完を効かせてくれる代物

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


## 導入手順

https://raw.githubusercontent.com/git/git/master/contrib/completion/git-completion.bash

↑からスクリプトを持ってくる
__.git-completion.bash__として任意の場所に保存(私はホームディレクトリにしてます)
macの場合であれば、.bash_profileに下記を追記

```bash:.bash_profile
source ~/.git-completion.bash
```

新規にターミナルを立ち上げるか

```
source ~/.bash_profile
```

これだけ、簡単！！


# git-prompt

ターミナルにgitの現在開発しているブランチを表示してくれる代物。

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

## 導入手順

https://raw.githubusercontent.com/git/git/master/contrib/completion/git-prompt.sh

↑からスクリプトを持ってくる
__.git-prompt.sh__として任意の場所に保存(私はホームディレクトリにしてます)
macの場合であれば、.bash_profileに下記を追記

```bash:.bash_profile
export PS1='[@\w\[\e[1;32m\]\[$(__git_ps1 " (%s)")\[\e[00m\]]\$'
source ~/.git-prompt.sh
```

あとは、git-completion同様

新規にターミナルを立ち上げるか

```
source ~/.bash_profile
```

で完了！

# まとめ

簡単に導入できるし、gitでの開発者は導入しておいて損はないかと
git branch打つの面倒だし、branchが表示されてると安心感がありますね

ふらっと見た技術ブログにてgit-completionとgit-promptがないと
開発する気にならないと載っていたのですが調べてみてよかった。。

知らないことをちょろっと調べてみるのは大事ですね。。
【Swift】アプリからメーラーを起動する方法

# デモ
![sendMail.gif](https://qiita-image-store.s3.amazonaws.com/0/135478/b7edfed7-85cf-a5d8-a8b8-7ddebfa8c28b.gif)

# 準備
MessageUI.frameworkを追加しておきます。
![ready-min.png](https://qiita-image-store.s3.amazonaws.com/0/135478/3a10c554-c474-f40f-38ab-e347311f2150.png)

# コード
```viewController.swift

import UIKit
import MessageUI

class ViewController: UIViewController, MFMailComposeViewControllerDelegate {

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

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

    @IBAction func sendMail(_ sender: Any) {
        if MFMailComposeViewController.canSendMail() {
            let mail = MFMailComposeViewController()
            mail.mailComposeDelegate = self
            mail.setToRecipients(["xxx@xxx.xxx"]) // 宛先アドレス
            mail.setSubject("お問い合わせ") // 件名
            mail.setMessageBody("ここに本文が入ります。", isHTML: false) // 本文
            present(mail, animated: true, completion: nil)
        } else {
            print("送信できません")
        }
    }

    func mailComposeController(_ controller: MFMailComposeViewController, didFinishWith result: MFMailComposeResult, error: Error?) {
        switch result {
        case .cancelled:
            print("キャンセル")
        case .saved:
            print("下書き保存")
        case .sent:
            print("送信成功")
        default:
            print("送信失敗")
        }
        dismiss(animated: true, completion: nil)
    }
}

```
【ゲリラアドカレ】UE4ゲーム実装　進捗報告 EXその4（攻撃スキルロジック実装）

【非公式】某会社設立記念ゲリラ Advent Calendar 2016 23日目の記事です。
以下、2017年1月1日に書いた内容になります。

---

新年明けましておめでとうございます。
4つめの記事です。

FlashゲームをUE4で再実装するゲリラアドカレ、EXその4です。
今回はスキル選択後のロジックを実装します。

・注意
許可を取ってないので通常業務の空いた時間を利用して作成するため、作成中のゲーム、及びアドカレは完成保証がなければ、ゲーム自体もリリースされる保証も皆無なので、あんまり期待しないでください。

#スキルダメージロジック

スキルを選択した時のロジックを実装します。

実装するのは

・スキル選択後、攻撃対象を選ぶ
・ＭＰを減らす
・スキルのダメージ処理

です。
MPが足りなければ選択できないなどのチェックは、今回は無視します。

#スキル選択後の処理

スキル選択後、攻撃対象を選ぶ処理を実装します。

イベントディスパッチャーにバインドして、通常攻撃の敵の一覧選択の処理へつなげてしまいます。
![2017-01-01 (13).png](https://qiita-image-store.s3.amazonaws.com/0/104377/e2957d75-056d-8e10-a9fa-acf6464e4851.png)

選択したスキルのデータは変数に一時的に保存しています。

#MPを減らすロジック

MPを減らすロジックです。
今回はマクロに書いてしまいました。

![2017-01-01 (15).png](https://qiita-image-store.s3.amazonaws.com/0/104377/076335e8-14c1-e2aa-4981-688f255e3b6d.png)

大分汚くて申し訳ないですが、単純にスキルのデータベースに設定した消費ＭＰから、スキルを選択したキャラクターのＭＰから減らしただけです。

#スキルのダメージ処理

まず敵選択後の処理を、スキルの攻撃力ステータスと、ＭＰを消費するマクロに繋げます。
![2017-01-01 (16).png](https://qiita-image-store.s3.amazonaws.com/0/104377/178d507e-cd98-4006-bb1b-675aae4cbc81.png)

続いて以前通常攻撃で繋げていたスイッチの所にスキル攻撃の関数を作成して繋げます。
![2017-01-01 (17).png](https://qiita-image-store.s3.amazonaws.com/0/104377/393e872c-a8ee-bc16-bf5b-c7e93f83c7e1.png)

スキル攻撃の関数です。
ほぼ通常攻撃のロジックと一緒になります。
![2017-01-01 (11).png](https://qiita-image-store.s3.amazonaws.com/0/104377/f3c5cb67-88c2-e1e1-2220-ca8a77e8e003.png)

続いてスキルのダメージ処理を実装します。
スキルのデータに基礎攻撃力の値を設定したので、それをキャラクターのスキル攻撃力値に加え、攻撃対象のスキル防御力値で引いてダメージ値を決める、という単純な処理にしています。
![2017-01-01 (10).png](https://qiita-image-store.s3.amazonaws.com/0/104377/3824731a-3f62-6a65-6330-540ea9573c3c.png)

#攻撃スキルでダメージを与えられるようになった

これで攻撃スキルでダメージを与えられるようになりました。
![2017-01-01 (18).png](https://qiita-image-store.s3.amazonaws.com/0/104377/7b186116-edb7-0669-db0c-06a79cc1262e.png)

一番左のキャラのスキルを選択後、ＭＰが減っています。
これでスキルのロジックもほぼ実装出来たも同然です。
sshのUNIXドメインソケット転送を利用してリモートのDockerホストに接続する

OpenSSH-6.7以上で、unixドメインソケットの転送がサポートされる。この機能を使えば、リモートホストのDockerをtcpで待受けするようにわざわざ変更しなくても、sshで接続可能であればリモートのDockerホストにローカルのDockerから接続することができる。
(デフォルトではtcpで待受けしていないはず)
SSHのトンネリングを使用するので、当然22番以外のポート開放は必要ない。

- ホスト側

```sh
# /var/run/docker.sockを操作できるように<user>をdockerグループに追加する
usermod -G docker <user>
```

- クライアント側

```sh
ssh -A <user>@<host> -Llocalhost:12375:/var/run/docker.sock
export DOCKER_HOST='tcp://localhost:12375'
docker info
```

## 参考
- [2014/12/21 - UNIXドメインソケットの転送](http://togakushi.bitbucket.org/build/html/OpenSSH_AdventCalendar2014/21.html)
nexus7でwxmaximaを実行してみた

Maxima on Android 2.8 June 13th, 2015 (JB MR1 or after)

Maximaについて
http://rikeizine.hatenablog.com/entry/2014/09/06/155522
グラフも作図できました。
plot2d(cos(x),[x,-%pi,%pi]);

Maxima on Android
https://sites.google.com/site/maximaonandroid/
train_test_splitのmoduleが0.20から変わるらしく0.18でDeprecationWarningが出る

train_test_splitのmoduleが0.20から変わるらしく0.18でDeprecationWarningが出る

```python
from sklearn.cross_validation import train_test_split
```

```
44: DeprecationWarning: This module was deprecated in version 0.18 in favor of the model_selection module into which all the refactored classes and functions are moved. Also note that the interface of the new CV iterators are different from that of this module. This module will be removed in 0.20.
  "This module will be removed in 0.20.", DeprecationWarning)
```

なので、新しいmoduleからimportする

```python
from sklearn.model_selection import train_test_split
```

Warningで移行先を書いてくれたら嬉しいのになぁと思いながら、ググった。
Pythonによるスクレイピング&機械学習[開発テクニック]の備忘録（4章）

# 4章

### lang-train.py
166ページのlang-train.pyを実行したら以下のような表示が返ってきました。

```
root@057e36518a17:/c/Users/yuki/my_dir/wap_scraping/src/ch4# python3 lang-train.py
/opt/conda/lib/python3.5/site-packages/sklearn/utils/validation.py:395: DeprecationWarning: Passing 1d arrays as data is deprecated in 0.17 and will raise ValueError in 0.19. Reshape your data either using X.reshape(-1, 1) if your data has a single feature or X.reshape(1, -1) if it contains a single sample.
  DeprecationWarning)
Traceback (most recent call last):
  File "lang-train.py", line 45, in <module>
    clf.fit(data["freqs"], data["labels"])
  File "/opt/conda/lib/python3.5/site-packages/sklearn/svm/base.py", line 151, in fit
    X, y = check_X_y(X, y, dtype=np.float64, order='C', accept_sparse='csr')
  File "/opt/conda/lib/python3.5/site-packages/sklearn/utils/validation.py", line 521, in check_X_y
    ensure_min_features, warn_on_dtype, estimator)
  File "/opt/conda/lib/python3.5/site-packages/sklearn/utils/validation.py", line 424, in check_array
    context))
ValueError: Found array with 0 feature(s) (shape=(1, 0)) while a minimum of 1 is required.
```

#### 解決
大した問題ではありませんでした。
テキストではlang配下にlang.zipを解凍すると記載されていたため、文字通り「lang」配下に解凍しました。
しかし、サンプルコードの中には

```
data = load_files("./lang/train/*.txt")
test = load_files("./lang/test/*.txt")
```
とあります。lang-train.pyはch4で実行されていたので、ほしいデータをロードできていなかったことになります。

サンプルコートを

```
"./lang/train/*.txt"
```
ではなく

```
"./lang/lang/train/*.txt"
```
とすることを考えましたが、サンプルコードはあまりいじりたくなかったので、
解凍先を「lang」配下ではなく、「ch4」直下にして解決しました。



### lang-Webapp.py
未解決です。

docker起動時に以下のコマンドを実行しました。

```
$ docker run -it -v $HOME:$HOME -p 8080:8080  <CONTAINER ID> /bin/bash
```
起動後にcdでch4まで移動してから、以下のコマンドを実行しました。結果は以下の通り

```
$ python3 -m http.server --cgi 8080
Serving HTTP on 0.0.0.0 port 8080 ...

```
この状態でウェブブラウザを開いて「http://localhost:8080/cgi-bin/lang-Webapp.py」を指定してもページは表示されません。
![image](https://qiita-image-store.s3.amazonaws.com/0/139070/3aaaeea5-c2f4-296e-c8ba-cd466dadc2b4.png)

どうしたものか。。
boot2dockerからDocker for Macへ移行

久しぶりにdockerを使って色々変わっていたのでメモ


## 前回（`boot2docker`時代)

`homebrew`でインストールしてた

`brew install docker boot2docker`

## 今回 (`docker for mac`以後）

- [homebrew cask](https://caskroom.github.io/)を使ってインストール
- `docker-compose`は、[Docker for Mac](https://docs.docker.com/docker-for-mac/)に同梱されてた

## 移行

### 古い docker系ツールのアンインストール

- `boot2docker`
- `docker-compose`
- `docker`
- `docker-machine`

を個別に消す

```bash
brew uninstall docker boot2docker docker-compose docker-machine
```

### docker for mac、docker-compseのインストール

```bash
brew cask install docker
```

### 確認

```bash
➜  ~ docker -v
Docker version 1.12.5, build 7392c3b
➜  ~ docker-compose -v
docker-compose version 1.9.0, build 2585387
➜  ~
```
"Fontconfig warning: line 146: blank doesn't take any effect anymore. please remove it from your fonts.conf" というエラーがRictyを入れ直したときに出たのでその対処法

`brew upgrade`でRictyのフォントが更新されたのですが、指示通り以下のコマンドを打った時に

```shell
$ cp -f /usr/local/Cellar/ricty/4.1.0/share/fonts/Ricty*.ttf ~/Library/Fonts/
$ fc-cache -vf
```

2番目の`fc-cache -vf`で`Fontconfig warning: line 146: blank doesn't take any effect anymore. please remove it from your fonts.conf`というエラーが出てしまいました。

fontconfigをbrewで入れている人は、`/usr/local/etc/fonts`に`font.conf`があると思うので、そこの86行目と146行目の`<blank>`および`</blank>`を消すと、`fc-cache -vf`が通るようになると思います。

参考：[Fontconfig warning on OSX when running Octave - Super User](http://superuser.com/questions/1120758/fontconfig-warning-on-osx-when-running-octave)
JIS配列を利用してプログラミングに最適なDvorak配列を作成する XKB JIS Dvorak

私はCとPythonを学習中の初心者ですが,キーボードには無駄にこだわります.

##環境:
OS:Ubuntu Gnome 16.04 LTS
Keyboard: FILCO Majestouch2S

## JIS Dvorak


![jis_dvorak_en.png](https://qiita-image-store.s3.amazonaws.com/0/67844/1d63e68b-bd17-95ec-ff38-8aea18e2e976.png)



Custom keyboard layout for JIS keyboards based on the Dvorak


Ubuntu Gnome 16.04上で作成した,JIS配列キーボード用の設定ファイルです.


---
```xkb/geometry``` ファイルについては,下記を参照してください.


https://github.com/ZeptByteS/xkb-geometry-jis


---
AltGr(Level3_Shiftキー)とMetaキーを使ってひとつのキーに最大で6種類の機能を割り当てられるこのレイアウトは,ホームポジションと上下2段の30個のキーを使ってアルファベット, 数字, 記号, カーソルキー, Home, End, PageUp, PageDown, Ctrl+Z, X, C, V へのリダイレクトを入力できます.

左手親指に割り当てられたShiftキーは, "どちらの手の小指でShiftを押すかを判断し,届く指で入力したいキーを押す" という一連の動作を簡略化し,より素早く大文字を入力できます.


```xkb/keycodes/evdev``` は,ScrollLockとNumLockのインジケータの位置を入れ替え,テンキーの無い91キーボードでNumLockを使用しやすくします.キーボードのScrollLock用のLEDがNumLockと連動して光ります.


この設定ファイルは```xkb/symbols/pc```(日本語,英語のどのレイアウトを選択していても読み込まれる修飾キーなどの配置を決めるファイル)とデフォルトのDvorak配列を上書きします.


このレイアウトを有効にするには,```/usr/share/X11/xkb/``` 以下にファイルを上書きもしくは追加し,再ログインします.


---

### AltGr / NumLock+Shift / NumLock+AltGr
![level3_numlock+shift_numlock+level3.png](https://qiita-image-store.s3.amazonaws.com/0/67844/abdcd9f6-4885-254f-1ffe-ceedcb0dd5ca.png)


---

### AltGr+Shift / NumLock / NumLock+AltGr+Shift
![level3+shift_numlock_numlock+level3+shift.png](https://qiita-image-store.s3.amazonaws.com/0/67844/c8b4f35b-9386-e609-9dbb-fd907af854e8.png)


---

### Meta
![meta.png](https://qiita-image-store.s3.amazonaws.com/0/67844/3f323bc6-261c-b975-408c-be3532e1b2f4.png)


---

### Japanese Dvorak
![jis_dvorak_jp.png](https://qiita-image-store.s3.amazonaws.com/0/67844/54d1e601-edda-0c83-3c6e-75a5d7070354.png)


---


### カスタマイズ

xkb/symbols/us(dvorak)の設定は下記のような構造になっています.

```c
key <AD08> {
    symbols[Group1]=
                  // Level1       Level2          Level3        Level4          Level5
                  //   Base        Shift           AltGr             -     AltGr+Shift
             [            c,           C,      braceleft,           Up,      braceleft ],
    actions[Group1]= 
             [   NoAction(),  NoAction(),     NoAction(),   NoAction(),     NoAction(),
             
                       RedirectKey(key=<UP>, clearmods=Lock+Mod3),  //  Level6  Meta
                       RedirectKey(key=<UP>, clearmods=Lock+Mod3) ] //  Level7  Meta+Shift
    };
```    
    
Level4はkeyboard layout chartを見やすくするために用意した実際には使われないシンボルです.


MetaキーにはMod3を割り当ててあります.

xkb/symbols/us内のbasicセクション(QWERTY配列)やデフォルトのDvorak配列のシンボルを参考にし,お使いの言語に合わせてLevel3~Level7のシンボルもしくはアクションを編集してください. カーソルキー,修飾キー付きの動作,および数字キーの入力は,RedirectKeyを使ったほうがちゃんと動きます.

https://github.com/ZeptByteS/xkb-jis-dvorak
Goglandでブレークポイントを貼る

上手く行かなかったのでGopherのSlackで聞いてみた。
なおGoglandはEAPなので今後仕様は変わる可能性はある。

#手順

##Run/Debug Configurationを開く

Run > Edit Configurations...
から実行設定画面を開く

<img width="385" alt="スクリーンショット 2017-01-01 16.17.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/24979/fb9e8245-7bec-8b09-441c-6b10207c56b1.png">

##実行設定を追加

+からGo Applicationを選択
Single Fileではブレークポイントが使えないので注意

<img width="354" alt="スクリーンショット 2017-01-01 16.17.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/24979/51449be7-2e88-2d36-6fe9-de96b1477189.png">

こんな感じで適当に設定してOK

<img width="742" alt="スクリーンショット 2017-01-01 16.18.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/24979/7b1964fe-1530-a2ab-3162-b46846f06f3f.png">

##ブレークポイントを貼る

行番号の右側をクリックすると貼る事ができる。

<img width="308" alt="スクリーンショット 2017-01-01 16.21.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/24979/6745a8ba-98d7-2c42-ee6d-f96a6a24c972.png">

##デバッグで実行する

画面右上の昆虫ボタンかRun > Debug'app'から実行する。

<img width="190" alt="スクリーンショット 2017-01-01 16.22.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/24979/f4f5990a-da02-e0e0-45e7-a20bf63166a7.png">

これでブレークポイントを貼った箇所で動作が止まり、変数をみながら１行づつ実行していくことが出来る。
Groovyであけましておめでとうございます！

あけましておめでとうございます。
毎年、適当な言語を選んで、あけましておめでとうメールを送っています。
今年は、groovyにしてみました。

# Environment
* CentOS Linux release 7.2.1511 (Core) x86_64
* Groovy Version: 2.4.7 JVM: 1.8.0_111 Vendor: Oracle Corporation OS: Linux
* javax.mail-1.5.6.jar

# Install

sdkmanでgroovyを入れるだけ。$HOME/.sdkman 以下に色々と。

```
$ curl -s "https://get.sdkman.io" | bash
$ source ~/.sdkman/bin/sdkman-init.sh
$ sdk install groovy
```

メール送信は``javax.mail``を使うので、.sdkman以下に放り込んでおく。

```
$ cd ~/.sdkman/candidates/groovy/2.4.7/lib/
$ curl -O https://maven.java.net/content/repositories/releases/com/sun/mail/javax.mail/1.5.6/javax.mail-1.5.6.jar
```

# Code

1時間ぐらいでチュートリアルみて、ネットで検索したのを切り貼りして書いたけど、groovyっぽいコードなのかは、まだ判別できるほど目が肥えてない。
Javaとruby知っていれば、すんなりかけそうな文法だから、結構楽しい。

```groovy
import javax.mail.*
import javax.mail.internet.*

def simpleMail(data) {

    Properties props = System.getProperties();

    props.put("mail.smtp.auth", true);
    props.put("mail.smtp.host", data.host);
    props.put("mail.smtp.user", data.user);
    props.put("mail.smtp.password", data.pass);
    props.put("mail.smtp.port", "587");

    Session session = Session.getDefaultInstance(props, null);
    MimeMessage msg = new MimeMessage(session);

    msg.setFrom(new InternetAddress(data.from));
    msg.addRecipient(Message.RecipientType.TO, new InternetAddress(data.to));
    msg.setSubject(data.subject, "iso-2022-jp");
    msg.setText(data.body, "iso-2022-jp", "plain");

    Transport transport = session.getTransport("smtp");
    transport.connect(data.host, data.user, data.pass);

    transport.sendMessage(msg, msg.getAllRecipients());
    transport.close();
}

def generateMailData(name, to)
{

        def body = """$nameさん
2017年01月01日になりました。
あけましておめでとうございます。
"""

  def data = [
    host : "smtp.example.co.jp",
    user : "user",
    pass : "userpass",
    to : to,
    from : "dharry@example.co.jp",
    subject : "I wish you a Happy new year 2017!",
    body : body,
  ]

  return data
}

def map = [
  "bressler@example.co.jp" : "bressler",
  "scorpio@example.co.jp" : "scorpio",
  "chico@example.co.jp" : "chico",
]

map.each {to, name ->
  def data = generateMailData(name, to)

  println "$name -> $to"
  simpleMail(data);

}
```
MATLAB2015b(32bit版)でpointgrayのサポートパッケージが動かない話

#Point GreyのカメラをMATLABで使う#
PointGrey製のカメラを使う前準備として、以下のプログラム/ツールボックスが入っている必要があります。
- [Point Grey Camera Support from Image Acquisition Toolbox](https://jp.mathworks.com/hardware-support/point-grey-camera.html)
- Image Aquisition Toolbox (以下IMAQ)
アカウントを入れれば、勝手に落ちてくると思うので、インストール方法などは略します。

#MATLAB2015b(32bit版)だとどうなるか#
- インストール後、PCを終了(MATLABを終了？)するまでならIMAQでPG製のカメラが使えます。
- 再起動後、使えなくなる。

原因としては、32bit版と64bit版でインストールされるフォルダが違うために起こるようです。
インストールされるフォルダ
>64bit版
     'C:\ProgramData\MATLAB\SupportPackages\R2015b\toolbox\imaq\supportpackages\pointgrey;'
32bit版(記憶があやふや)
     'C:\MATLAB\SupportPackages\R2015b\toolbox\imaq\supportpackages\pointgrey;'

下で書きますが、pathを追加してあげれば問題ないようです。

#対処方法#
- addpathを使ってカメラを扱うプログラムの先頭で追加する。

```matlab:init_pg.m
addpath('c:\MATLAB\SupportPackages\R2015b\toolbox\imaq\supportpackages\pointgrey;');
// Initialization point grey Camera.
```

- pathdef.m を編集する。
pathdef.mは下記にあります。

>C:\Program Files\MATLAB\R2015b\toolbox\local;

こちらを編集することでも対応できます。

- 起動時のコマンドにpathaddを組み込む。

[MATLAB 起動時に、自動的に MATLAB ファイルを実行することはできますか？](https://jp.mathworks.com/matlabcentral/answers/103866-matlab-matlab)
この方法でも対処できます。

#まとめ#
PointGreyに限らずカメラなどのIMAQのサポートパッケージを用いるものはこのトラブルに陥るようです。
2016aから64bit版のみとなったことからも早いうちに脱32bit版する必要があるようですね。