OmniAICreator/Qiita-1.07M huggingface dataset:
チームメンバーにプロダクトの方を向かせるために、botちゃんを作った

この投稿はProduct Owner Advent Calendarの２日目です。
http://qiita.com/advent-calendar/2015/productowner

３日目はこのbotを強化したKPI通知botを設置したときの話です
(見てくれると嬉しいな！)
http://shinsemiya.hatenadiary.jp/entry/2015/12/03/123000


# 予告
３日目はbotを強化してKPI通知botを作ったことで、メンバーが開発的成功だけでなく市場的成功にまで責任を感じるようになった話をします。
http://shinsemiya.hatenadiary.jp/entry/2015/12/03/123000

# 本文
チームメンバーの興味をプロダクトのほうに集めるチャットのかわいいbotちゃんの話をする

# botちゃんについて
botちゃんはチーム用チャットに全自動でつぶやいてくれるかわいいbotちゃんである。
かわいいbotちゃんはチームに有益な情報を全自動でチーム用チャットにつぶやいてくれる。
かわいいbotちゃんはプロダクトの市場での成果についての情報をチーム用チャットにつぶやいてくれる。

botちゃんはかわいいのでメンバーみんながbotちゃんのことを考えるようになる。
botちゃんはかわいいのでメンバーみんながプロダクトの市場的成功のことを考えるようになる。

# やったこと
botちゃんはチャットにおいて、メンバーにプロダクトについての非同期的に告知を行う。
botちゃんは短期的に集中＆注目すべき事柄についてアナウンスを行う。
メンバーは賞味期限が短く、サマリーの周知情報についてはbotちゃんのつぶやきを見れば良い。

私はプロダクトマネージャーとしてメンバーとbot経由の告知や周知を行いたい。
bot経由のアナウンスを機能させたい。
機能させるためにはbotちゃんにメンバーの関心を向けさせる方法が必要について書く。

# みんながbotちゃんを見るようにする方法
botちゃんのアイコン設定。
pixivでイラストレーターの方に許可をいただき、アイコンを作らせてもらった。
イラストは、メンバーの好みであることが望ましい。性格もなりきりbotのようにキャラの性格に合わせたものにした。
その方がメンバーが興味を持つから。
また、botちゃんの新規作成時のリクエスト権をインセンティブにできるので、チーム運営に使える手が１つ増える。

# botちゃんは褒めてくれる
botちゃんはリリースやタスク完了時に検知して作業を行ったメンバーに対して、「Good Job!」「You ++」系のコメントを投げてくれる。
これは、タスク完了直後に、人間は「誰かに褒めて欲しい」と考えている。他人はすぐには気づかない可能性が高い。しかしこの手の言葉は直後に言わないと意味がない。
そこでbotちゃんが「すごいね！」「お前ならやれると信じていた！」系のセリフを送ってくれる。三国無双みたいな感じ。
botちゃんが褒めたときにたまたまチャットを見ていた人間も「褒めていい雰囲気」にのって賞賛の言葉を送ってくれる副次効果もある。
チーム内に「お互いを賞賛し合う文化、リスペクトし合う文化」が生まれやすいのでおすすめ。

# botちゃんは知らせてくれる
botちゃんは突発的な出来事(アノーマリーと呼ばれている)をおしえてくれる。
突然売上が増え始めたり、販売先でレビューがついたり、どこかで紹介されたりすると教えてくれる。
最初は悪いニュースやどうでもいい紹介がされる場合を考えて、人力で弾いてから紹介していたが、そうするとメンバーの感動が薄れるので、精度を高めた上で完全自動運用にした。
「xxサイトで紹介されました」
「サイトAで売上がホットです」
「サイトBで売上がホットです」
の連鎖反応はチーム内の士気高騰につながるし、連鎖的な市場的成功は人に「忘れられない成功体験」を覚えさせ、もう一度それを味わうためにより多くの貢献をしてくれるようになるので、botちゃんのおかげでチームが回るようになった。

# botちゃんは励ましてくれる
botちゃんは「このバグがブロックしているのでxx担当の方、至急fix願います」系のバグをhookして伝えてくれる。
人が人に言うより角が立たないし、botちゃんは低姿勢で言ってくれる、完了したら賞賛を表してくれる。
失敗には「叱責」より「あなたの力が必要なの」系の言葉が重要な気がする。
しかし人はそれを言えない。
どこかに「お前のせいで俺の仕事が止まっている」という恨みがあるから。
botちゃんを介すことで仕事を円滑に回すようにする。

# 成果
botちゃんのおかげでみんなの士気が高まり生産性があがり、メンバーの意識がチームの方に向くようになった。
メンバーのチームの活動に割く時間を定量監視しているが、１年前より30%程度あがっている。

# 結論
みんなbotちゃん作ろう

# 蛇足
かわいいかわいい連発しているあたりでお察しだと思うが、このbotのアイコンは輿水幸子である。
なお私の推しメンは姉ヶ崎であることを補足しておく。
New Relic APM: 無料版と有料版の違い。無料版の機能紹介。

Advent Calendar 2日目です。1日目に引き続き担当します。

今日は、New Relic APM の無料版(Lite)と有料版(Essential/Pro)の違い及び、無料機能を簡単に解説したいと思います。（Standardについてはまとまった情報がないので、割愛します）


## Lite と Essential と Pro プランの違い

||  Lite  |  Essential  |  Pro  |
|:-----------|------------:|:------------:|:------------:|
| データ保持期間 (キー・メトリクス) |  利用不可  |  制限なし  |  制限なし  |
| データ保持期間 (全集計メトリクス) |  1日  |  3日  |  90日  |
| データ保持期間 (集計されないInsights イベント) |  1日  |  3日  |  8日  |
| サポート |  コミュニティフォーラム  |  Webサイトとメール  | Webサイトとメールと(電話)  |
| パフォーマンス測定(スループット、レスポンスタイム、エラー率、Apdex※) |  ◯   |  ◯  |  ◯  |
| 外部サービスとのパフォーマンス測定 |  ◯  |  ◯  |  ◯  |
| DB のメトリクスと SQL トレース |  ◯  |  ◯  |  ◯  |
| アプリのエラー一覧とそのフィルタリングと詳細解析 |  | ◯ | ◯ |
| トランザクションレベルのパフォーマンス分析と詳細分析 |  | ◯ | ◯ |
| 月単位の SLA レポートとデプロイ追跡 |   |   |  ◯  |
| JVM モニタリング |    |   |  ◯  |
| スレッドプロファイルと X−Ray セッション |    |   |  ◯  |
| アラート通知 |    |  ◯  |  ◯  |
| ダッシュボードのカスタマイズ |    |  ◯  |  ◯  |
| サービスのトポロジーマップ | | |  ◯  |
| マルチアカウント管理 |  |  |  ◯  |
| SSO/SAML での統合 | | |  ◯  |

※ 公式サイトには、 Essential は、期間限定で利用可能なプロモーション価格とあります。なので、たぶん、一定期間このプランで使っていると、New Relic から問い合わせがくると思う。

※ Apdex : ユーザー満足度

New Relic では、ユーザー満足度を Apdex という指標で計測しています。[Apdex](http://www.apdex.org/overview.html) とは、Application Performance Index の略で、アプリケーションのパフォーマンスを評価するためのオープンスタンダードな指標です。
明確な公式があり、それにもとづいて、スコアを算出します。レスポンスタイムを「満足」「許容」「不満」の３つに分けそれを公式に当てはめます。
```
Apdexスコア = (満足数 + 許容数 / 2) / アクセス合計数
```
満足とする値は、自分で設定する。New Relic では、Apdex は、アプリ(APM)とブラウザ(Browser)で別々に設定、計測します。New Relic のアプリのデフォルトは、0.5秒、ブラウザのデフォルト値は、7秒に設定されています。（設定画面で変更可能）

Apdex については、結構、ネットで解説されている方がいるので、詳しくはそちらをご覧ください。
[New RelicのApdexって何？](http://need4answer.blogspot.jp/2014/03/newrelicapdex.html)


## アプリケーション一覧

APM のトップページ

![apm_index.png](https://qiita-image-store.s3.amazonaws.com/0/46003/14f08e28-a44d-3d70-7e93-773049c8624d.png)


## 概要ページ
![apm_summary.png](https://qiita-image-store.s3.amazonaws.com/0/46003/628da1cb-884c-6ee2-9324-142c7d0c3270.png)

メインの概要ページでは、ぱっと見でパフォーマンス（レスポンスタイム、Apdexスコア、スループット）を時系列で確認できます。また、時間帯は、画面上の「TIME Piker」を選択して、絞りこめます。また、レスポンスタイムのグラフで、範囲をドラッグ&ドロップで囲んでも絞り込めます。時間帯は、表示する期間といつのデータから、表示するかの２つを指定します。Lite の場合は、開始日は指定できなくて、期間も24時間までの指定となります。Pro は、3ヶ月分間のデータまで1度に表示可能です。
また、Browser を使っている方は、連携しており、アプリのレスポンスタイム、Apdex と一緒に Browser の値も合わせて表示しています。これにより、遅いときに、サーバーだけでは気づかない範囲まで気づくことができます。

## トランザクション一覧 (Transactions)

左メニューの Transactions か Overview ページのトランザクションを選択すると、この画面が出ます。「TIME PICKER」で指定されている時間帯のパフォーマンスの遅いトランザクションのリストとなります。いくつかフィルター項目があるので、様々な視点からトランザクションを分析できます。

![apm_transaction_summary.png](https://qiita-image-store.s3.amazonaws.com/0/46003/90eadb7a-df5c-bda6-0334-cbee25daf38a.png)

## トランザクション詳細

トランザクション一覧から、任意のトランザクションを選択すると、そのトランザクションの情報が見れます。もちろん、「TIME PICKER」で時間帯を変更したり、グラフないで、ドラッグ&ドロップで時間帯を絞りこんでより、ピンポイントに情報を確認できます。

![apm_transaction_detail.png](https://qiita-image-store.s3.amazonaws.com/0/46003/06642fb2-55b8-55df-664a-564b8b587b7a.png)

## 予告

３日目の明日は、今日の続きを書きたいと思います。トランザクション詳細では、Pro 機能では、さらに詳細な情報までみることができます。そこについて明日は紹介したいと思います。
CoffeeScriptでjQueryプラグインを書くためのテンプレート


やあみんなjQueryは使っているかな？いろんなJSのフレームワークに押され気味がけど
まだまだ現役なんだよ

jQueryもプラグインをかけると、いろいろこねくり回して実装していたところがすっきりかけるのだ。

いつでもさくっと書けるようにCoffeeScriptのテンプレートを作成した。
JavaScriptで書く場合もコンパイル済みテンプレートを使えばばっちりだ

##CofeeScriptで書いたjQueryのプラグインのテンプレート

```coffee
do (jQuery) ->
  $ = jQuery
  $.fn.sampleMethod = (config) ->
    # デフォルト引数の設定
    defaultConfig =
      url: 'www.yahoo.co.jp'

    # 呼び出し時に連想配列で渡された引数とデフォルト引数を重ねあわせする
    # {}
    options = $.extend(defaultConfig, config);

    @each () ->
      # セレクタでヒットした各項目に対して行う処理
      # 主にこの下に処理を書いていく
      $(@).find(".foo")

```


##JavaScriptにコンパイルした結果

```javascript  
(function(jQuery) {
  var $;
  $ = jQuery;
  return $.fn.sampleMethod = function(config) {
    var defaultConfig, options;
    defaultConfig = {
      url: 'www.yahoo.co.jp'
    };
    options = $.extend(defaultConfig, config);
    return this.each(function() {
      return $(this).find(".foo");
    });
  };
})(jQuery);
```

## 使い方

```coffee
$('.sampleClass').sampleMethod({url: 'www.google.co.jp'})
```
Unity uGUIs -ウグイス- サンプルプロジェクトアップ編

# Unity uGUIs -ウグイス- 1人でがんばりますカレンダー Advent Calendar 2015

この記事は[Unity uGUIs -ウグイス- 1人でがんばりますカレンダー Advent Calendar 2015](http://qiita.com/advent-calendar/2015/unity-uguis)の2日目の記事です。

一体この記事をどれくらいの人に見て頂けるのか全く分かりませんが頑張って明日以降も書いていこうと思います。

というこで本題へ

# サンプルはよはよ！！

焦らないでください！焦らないでください！ちゃんと準備をしましたから。
というわけで、早速リンクを張っておきます。

[uGUIs-Tiny-Sample(Github)](https://github.com/Kogarasi/uGUIs-Tiny-Sample)

# え、中身はどうなってるの？

今回はボタンを押すたびに文字の色が変わるサンプルをご用意しました（単純・・・・）
付属しているのは、uGUIsのDLLとSceneファイル、そしてソースコードひとつだけです。

中身を開けた際に*uGUIs*というGameObject配下のものが今回のサンプルでキモになる部分です。

今回は二つの機能についてご紹介します（というか、二つの機能しか実装されていない）

## Auto Binding

一つ目はAuto Bindingです。
今回のサンプルでは**ChangeColorButton**とそれがアタッチされている**AutoBindingSampleオブジェクト**がそれに当たります。

uGUIsのAutoBindingを利用するには必要なクラスを継承するだけで利用できます。
ちなみに、**自動的にHierarchy上からクラス名と同じオブジェクト**を紐付けにいきます。
また、（今回はボタンですが）コールバックを受けるためにpublic void OnClick()を定義しています。

```csharp:ChangeColorButton
using UnityEngine;
using System.Collections;

public class ChangeColorButton : uGUIs.UI.Button<ChangeColorButton> {

  public UnityEngine.UI.Text targetText;

  Color[] colors = new Color[3]{
    new Color( 1, 0, 0, 1 ),
    new Color( 0, 1, 0, 1 ),
    new Color( 0, 0, 1, 1 )
  };

  public void OnClick(){
    targetText.color = colors[ Random.Range( 0, 3 ) ];
  }
}
```

どうでしょう、これだけでボタンが利用できるようになりました！！！
また、もちろんですがバインディングの対象にするオブジェクト名やコールバックの関数名は設定可能です。それについてはまた今度ということで。

## コンポーネント装飾

2つ目はコンポーネント装飾です。
こちらはUIコンポーネントを一律同じ設定を施すための物になります。

uGUIs->ButtonStylerオブジェクトがそれに当たります。

2つのコンポーネントが設定されており、一つはStyleAdaptor、一つは単純にButtonというコンポーネントです。
Button内で**RequireComponent(StyleAdaptor)**を設定しているので、StyleAdaptorはButtonをアタッチした際にくっついてきます。

今回のサンプルでは、Normal/Highlight/Pressedの部分をそれぞれ設定しています。
試しにCanvas内に新しくボタンを設置してみてください。その際に、自動的に先ほど設定した項目が反映されているのが分かると思います。

イメージ的にはCSSみたいなものだと理解してもらえれば良いと思います。
細かい調整はどうするんだよ、おい！？みたいのもまた今度していきます！

# まとめ

今回はサンプルプロジェクトと二つの機能の基本的な部分について説明させて頂きました。
3日目はAuto Bindingの部分についてもう少し説明出来ればなーと思います。
homebrewのopencv3でつまづいた件

# なぜかbrew installしても失敗してる...

```bash
brew install opencv3 --with-python3
```
で
/usr/local/Cellar/opencv3/3.0.0/lib/python3.*/
にpython3用のバイナリができるはずなんだけど、
なぜかメインマシンでやってもできない...。

他のマシンでやった時はできたのになぜだ！
と何度もoption変えたりしても一向にできないので

~/Library/Logs/Homebrew/opencv3/のmakeログを見ると
numpyのimportができてなかった。

```bash
pip3 install numpy
```

するとすんなり成功。

ログって大事
GStreamer の勉強会をしました


2015年 GStreamer アドベントカレンダー 1日目です。

[Unity asset](http://qiita.com/advent-calendar/2015/unity-asset) のアドベントカレンダーをみると、元気が出たので私も GStreamer の耐久アドベントカレンダーをやってみようと思い始めました。

GStreamer, gst-launch を使った記事をかける方ぜひ参加してくださいね♪

で、1日目からなんですが...

今年の6月ごろに社内でGStreamer勉強会を開いたのですが、
その時のスライドを SlideShare に **つい最近** アップロードしました！

なので 1日目はこれで終わろうと思います!!笑

[こちら](http://www.slideshare.net/shocrunch/about-gstreamer-10-application-development-for-beginners-55594448) からどうぞ！

**スライドに書いてる内容**
  - GStreamer の概要・全体像 
  - 抑えておきたいデータ構造の話
  - GStreamer アプリ(not gst-lauch)を開発する、一番簡単なステップを紹介
  - GStreamer アプリ開発に使える (私が使ってきた Tips)
  - など...

初心者やこれからGStreamerと闘わなくてはならない人に向けて書いた資料なので、簡単な話ばかり書いているのでご安心を！(そうでない部分もありますが)
Blenderでカーテンジェネレータを作る

# 概要

blenderでカーテン画像を生成するプログラムを作ってみました。元ネタは[二次元から三次元を作る方法 — サーバ内でBlenderを動かしてみたら意外にもイケていたという話 - pixiv inside](http://inside.pixiv.net/entry/2015/09/24/173447)から。

# 環境

バージョン：2.74、レンダリングエンジン：cycles

# 準備

まずはblenderを起動し、
![blender1.png](https://qiita-image-store.s3.amazonaws.com/0/380/695b133e-9699-52cb-982d-a858a2b5c913.png)

カーテンのある風景を作ります。今回のはシンプルにカーテンがあるだけの部屋で、白いカーテンはレースカーテンで外からの光が透けているかんじになります。ちなみにカーテンの作り方については[Modeling with Cloth Simulation in Blender - YouTube](https://www.youtube.com/watch?v=ssYemC0j6Ag)を参考にしました。とてもわかりやすく説明されています。
![blender2.png](https://qiita-image-store.s3.amazonaws.com/0/380/14d9c643-3251-ba29-9a9d-5302258df4d8.png)

# 実装

左右のカーテンそれぞれにマテリアルが設定してあります。マテリアル名は `curtain.left`、 `curtain.right` としておきます。

1. テクスチャを設定
2. レンダリング
3. pngで出力

この処理をプログラムで行います。pythonで書くと以下のようになります。

```python
import sys
import os
import bpy

# How to pass command line arguments to a Blender Python script? - Blender Stack Exchange
# http://blender.stackexchange.com/questions/6817/how-to-pass-command-line-arguments-to-a-blender-python-script
argv = sys.argv
[left, right, out] = argv[argv.index("--") + 1:]  # get all args after "--"

def update_filepath(material_name, filepath):
    t = bpy.data.materials[material_name].node_tree.nodes.get('Image Texture')
    t.image.filepath = filepath

update_filepath('curtain.left', os.path.abspath(left))
update_filepath('curtain.right', os.path.abspath(right))

bpy.ops.render.render()
bpy.data.images['Render Result'].save_render(filepath = os.path.abspath(out + '.png'))
```

これを実行すると

```
$ blender --background path/to/file.blend --python path/to/script.py -- left.png right.png rendered
```

こうなる!ちょっとノイズが乗ってしまいましたが時間がないのでここまで。
![out.png](https://qiita-image-store.s3.amazonaws.com/0/380/31f869cb-4489-a2ed-7926-78d832ac7a97.png)

# 参考

* [二次元から三次元を作る方法 — サーバ内でBlenderを動かしてみたら意外にもイケていたという話 - pixiv inside](http://inside.pixiv.net/entry/2015/09/24/173447)
* [Modeling with Cloth Simulation in Blender - YouTube](https://www.youtube.com/watch?v=ssYemC0j6Ag)
* [How to pass command line arguments to a Blender Python script? - Blender Stack Exchange](http://blender.stackexchange.com/questions/6817/how-to-pass-command-line-arguments-to-a-blender-python-script)
* [Blender Documentation Contents — Blender 2.76.2 8d9c7e6 - API documentation](http://www.blender.org/api/blender_python_api_2_76_2/contents.html)
RxJS / Reactive Extensions とは

この記事は [bouzuya's RxJS Advent Calendar 2015](http://www.adventar.org/calendars/1200) 1 日目かつ RxJS Advent Calendar 2015 の 1 日目です。

# RxJS とは何か？

RxJS とは The Reactive Extensions for JavaScript のことです。これは Reactive Extensions の JavaScript 向けの実装です。

[Microsoft Open Technologies, Inc.](https://msopentech.com/) により開発されています。

公式のリポジトリは [Reactive-Extensions/RxJS][] にあります。v5 (alpha) は [ReactiveX/RxJS][] にあります。

# Reactive Extensions (Rx) とは何か？

もともとは C# 向けのライブラリです。各言語向けに実装が提供されています。ここでは RxJS (v4.0.7) を前提として書いていきます。

## RxJS = Observables + Operators + Schedulers.

まず公式のリポジトリの README にある簡単な説明では RxJS は次の要素からなると説明されています。

RxJS = Observables + Operators + Schedulers.

- Observable …… 非同期データストリームを表現するもの。
- Operator …… Observable に対して map や filter をはじめとするクエリーを適用するもの。
- Scheduler …… 並行性を制御するもの (適当) 。

ちなみに [C# では Rx = Observables + LINQ + Schedulers.](https://rx.codeplex.com/) でした。 [RxJS にも同様の記述](https://github.com/Reactive-Extensions/RxJS/blob/v4.0.7/doc/gettingstarted/what.md#what-are-the-reactive-extensions-for-javascript-rxjs)があります。

## Observable は複数個に対応できる Promise

もうひとつ公式リポジトリの [`doc/readme.md`](https://github.com/Reactive-Extensions/RxJS/blob/v4.0.7/doc/readme.md) には Observable を同期非同期/単一値複数値という分類で説明した表があります。

|                            |Single return value|Multiple return values  |
|----------------------------|-------------------|------------------------|
|Pull/Synchronous/Interactive|Object             |Iterables(Array/Set/Map)|
|Push/Asynchronous/Reactive  |Promise            |Observable              |

Observable は、複数値を受け取れる Promise で、非同期に対応した Iterable に相当するものということです。

ぼくはこの位置づけは Node.js の Stream と近いと思っています。これらの違いについては別で書くかもしれません。

Pull / Push および Interactive / Reactive という分類を、ぼくは能動的・受動的なイメージでとらえています。pull media / push media のそれです。 Pull は Google での 検索のように利用者側が供給側に情報を取りに行くイメージ、 Push はテレビのように供給側から利用者側に送りつけるイメージ。RxJS では Observable を `subscribe` で `observer` を登録します。この詳細はまた別のタイミングで。

## 簡単な例

次の例は RxJS の簡単な例です。`Observable` を返す `fetchUsers` を使っています。各 user が非同期 (例えば 100 ms ごとにひとりずつなど) に流れてきても問題なく `console.log` が呼び出されます。

```javascript
fetchUsers() // return Observable
  .filter(user => user.age > 20)
  .map(user => user.name)
  .subscribe(name => console.log(`Name: ${name}`));
```

# RxJS の良いところ・悪いところは何か？

まず Observable により「時間軸とそこを流れるイベント」をコレクション (シーケンス) としてとらえているというアイデアが良いです。

Operator により、非同期処理への対応を collection を操作するようなインタフェースでできます。複数の Observable を merge することも簡単です。

悪いところは、 Array より EventListener より Promise よりずっと複雑であること。当然です。非同期で複数値を相手にしているからです。そして便利なたくさんの Operator は初学者を絶望させるに十分です。きっと Observable に生えた Operator の山を見てドキュメントを閉じたくなるでしょう。

それでもこのコンセプトには学ぶ価値があると、ぼくは信じています。

[Reactive-Extensions/RxJS]: https://github.com/Reactive-Extensions/RxJS
[ReactiveX/RxJS]: https://github.com/ReactiveX/RxJS
pidofコマンド

こんにちは。
バックグランドプログラムが動いているのかの確認を行う目的で、```pidof```[^1]コマンド利用を試してみました。動いているプロセスはpidを表示します。

```console
$ for x in mongod postgres mysqld; do echo $x" "`pidof $x`; done
mongod 
postgres 999
mysqld 
```

なお```pidof```コマンドは動いていないプロセスを引数指定した場合、その出力に少し癖があるようで、シェル実行で一手間必要でした。

-------------
[^1]: MacOSXではhomebrewなどを利用してインストールできます。
文字列のリストを連結する

reduce関数を使って文字列が入ったリストの要素を全て連結する。

```lisp
(reduce (lambda ($0 $1) (concatenate 'string $0 ", " $1)) '("hoge" "fuga" "piyo"))
==> "hoge, fuga, piyo"
```

でもformat関数を使ったほうが楽かもしれない。

```lisp
(format nil "~{~A~^, ~}" '("hoge" "fuga" "piyo"))
==> "hoge, fuga, piyo"
```

こういう単純な処理で割とつまずく。
デザイナーさん向けにAndroidアプリ勉強会をやってみた


# はじめに
この記事は[Money Forward Advent Calendar 2015](http://qiita.com/advent-calendar/2015/moneyforward)の1日目の記事です。

こんにちは。
ついにBloodborneでプラチナトロフィーをゲットした@kengoscalです。
Dark Souls3が発売するまでにDLC「The Old Hunters」もトロコンするのが、今の生き甲斐です。

先日、Money Forwardのデザイナーさん向けにAndroidアプリ勉強会を開催したので、その内容について触れたいと思います。


# 目的
* デザイナーさんとAndroidエンジニア間での連携強化と、開発における多様性確保が目的です。この目的で、勉強会の講義と演習を通して達成する形をとりました。

## 連携強化とは
* Android開発におけるはまりポイント・用語などなどを共有することによって、デザイン段階での工数見積もり意識合わせやコミュニケーションが円滑になる、などを効果として考えました。

## 多様性とは
* デザイナーさんが開発視点を持つことで、多角的な開発視点をチームとして保有できるようなことを効果として考えました。


# 勉強会での講義内容
* gitの使い方
* Android Studio/Genymotionの使い方
* View, Layoutについて
* アニメーションについて

## Gitの使い方
* githubから勉強会用のソースコードをClone, Fetch, Mergeしてもらいました

## Android Studio/Genymotionの使い方
* Android Studioでコードを実行し、Genymotionでアプリを弄ってもらいました

## View, Layoutについて
### Viewについて
* TextView, EditText, ImageView, Button及び各Viewのパラメタについて説明しました

### Layoutについて
* LinearLayout, RelativeLayout, FrameLayout, ScrollView, ListViw, GridView及び各Layoutのパラメタついて説明しました


## アニメーションについて
* Viewアニメーションのアニメーター及び各パラメアについて説明しました。

## 講義中の写真
ちゃんと聞いてくれています。
![20151201090757.jpg](https://qiita-image-store.s3.amazonaws.com/0/59166/9a37993f-23e2-9124-8957-35248efbd5f2.jpeg "20151201090757.jpg")

![20151201090737.jpg](https://qiita-image-store.s3.amazonaws.com/0/59166/2479e6b6-8334-6e25-254b-4fe34924d197.jpeg "20151201090737.jpg")


# 勉強会での演習内容
## Layoutの実装
* 背景が透過色の弊社ロゴと、背景が透過色の「Money Forward」画像を組み合わせたLayoutをxmlファイルで作ってもらいました
![Kobito.N8Qw3M.png](https://qiita-image-store.s3.amazonaws.com/0/59166/72fafce3-7f46-8f26-1cb5-341707e7a527.png "Kobito.N8Qw3M.png")

* ここではLinearLayout/RelativeLayout/FrameLayoutの違いを覚え、また各種パラメタの使いどころというのを学んでいただきました。
* 合わせて、画面をみてマージンなどの細かいパラメタを更新してもらいました。


## アニメーションの実装
* 弊社アプリにおけるカテゴリ選択時のアニメーションをxmlファイルで実装してもらいました。
![icon_animation.gif](https://qiita-image-store.s3.amazonaws.com/0/59166/ff856581-0b2d-b253-6c8a-ca8b3f403639.gif "icon_animation.gif")


* ここではViewアニメーション内のアニメーターの組み合わせ方、アニメーションの実施タイミングといった部分をxmlファイルで実装してもらいました。

# 結果
* 全員が見事に実装を完成させてました。経過時間も想定より短かったのでちょっと簡単すぎたかもしれません
* 「おもしろい」「たのしい」といった言葉を聞けました。うれしかったです。
* その後、私はAndroid開発からはなれてしまい効果を測定できておりませんが、最近復帰したので楽しみにしております。

# おわりに
マネーフォワードで取り組んでいるデザイナー <--> エンジニアの交流の一例を紹介させて頂きました。上述の通り、まだ実際の効果を測定していませんが、みんな勉強会を楽しめていたっぽいので、その一点で成功と考えてしまいたい自分がいます。これからも相互理解を深めていこうとおもいます。

ぜひ、他者様の事例も伺いたいので、何かあればコメント等ください！

* [勉強会資料1](http://www.slideshare.net/KengoSuzuki1/android-training4desinger)
* [勉強会資料2](http://www.slideshare.net/KengoSuzuki1/android-training4desinger-2)

# 更新内容
* 表記ゆれを修正(2015/12/09)
Raspberry Pi 2 設定メモ 01 （導入編）

#Raspberry Pi 2 設定メモ 01（導入編）
### 最終更新日：2015.12.03
### (00) 使用機材
+ PC: Macbook Pro ( El Capitan )
+ Raspberry Pi 2 Model B
+ microSD 32GB ( SDアダプター付き )
+ その他　USBケーブル，ネットワークケーブルなど．

### (01) Raspberry Pi の OS 準備【Macで作業】
ここで示すのは，Mac を使った Raspbian の準備方法であり，
それ以外の OS や PC を利用する場合は，公式 HP を参照すること．
※ 公式HP => http://www.raspberrypi.org/

#### (01-A) OSのイメージファイルを準備する．
  + http://www.raspberrypi.org/downloads/
  + 2015.12.01時点での最新版：2015-11-21-raspbian-jessie
  + ダウンロードしたzipファイルを解凍してimgファイルにしておく．
  + 上記公式サイトからのダウンロードは時間がかかる（数時間）ので，以下の日本のミラーサイトを推奨(ただし，最新ではない場合がある)
  + http://ftp.jaist.ac.jp/pub/raspberrypi/raspbian/images/

#### (01-B) microSD にイメージを書き込む．
  1. microSDをアダプターにセットし，Macのスロットにさす．
  2. ディスクユーティリティで「消去=>MS-DOS(FAT)」でフォーマット．
  3. $ diskutil list (デバイス確認．おそらく /dev/disk1 に割当済．)
  4. $ diskutil unmountDisk /dev/disk1　（アンマウント．）
  5. $ sudo dd bs=1m if=\<filename> of=/dev/rdisk1 (イメージ書込．rootのパスワードが必要．)
  6. $ sudo diskutil eject /dev/rdisk1 （取出し前の操作．）
  7. microSDを取り出す．
	
### (02) RaspberryPi の初期設定【RaspberryPiで操作】
まずは，RaspberryPi にモニターやキーボードなどを接続し，
リモートログイン可能な環境を構築する．
これらの設定が終了したら，周辺機器は接続せずにネットワーク経由で操作できる．

#### (02-A) Raspbian 初期設定
  + ログイン情報
    + ID: pi
    + PW: raspberry
  + 設定ツール
    + $ sudo raspi-config
  + 以下は主要な設定例（任意）
    + -1- Expand Filesystem
    + -5- Internationalistion Options
    + locale : ja\_JP.UTF-8 （UTF-8 を追加）
    + Timezone : Asia -> Tokyo
    + Keyboard : Generic 105-key (intl) PC -> Japanese（これは一般的な日本語キーボード用設定．自分のキーボードと同一の物があれば，そちらの設定を利用する．）
    + -6- Enable Camera	(カメラの利用）
    + -9- Advanced Options
    + Update	（raspi-config のアップデート．このタイミングでなくても良い．）
    + Hostname	（ホストネームの変更）
    + SSH	（SSHの利用）
    + SPI	（SPIの利用）
    + I2C	（I2Cの利用）
    + ↑これらの設定を変更したら再起動．
  + /boot/config.txt に dtparam=i2c_arm=on を追加
  + /etc/modules に i2c-dev を追加

#### (02-B) 環境の更新
  1. $ sudo apt-get update （パッケージ情報の更新）
  2. $ sudo apt-get upgrade （インストールされているパッケージを更新）
  3. $ sudo apt-get dost-upgrade （Raspberry Pi のファームウェアを更新）
  4. $ sudo rpi-update (<= ファームウェアアップデートだが，最新の Raspbian jessie lite では command not found になる．fullバージョンのRaspbianでは可能なようだ．)
  5. $ sudo apt-get autoremove （不要となったパッケージ類の消去）
  6. $ sudo apt-get autoclean (不要となったパッケージ類の消去）
  7. 再起動
	
#### (02-C) ssh によるリモートログインの設定
  1. $ sudo vi /etc/hostname ->  **raspberry** （<= 任意の端末名に変更）
  2. $ sudo vi /etc/hosts -> 127.0.1.1 **raspberry** (<= 任意の端末名に変更)
  3. $ sudo apt-get install avahi-daemon

  + 以降，再起動しても avahi-daemon が起動し，ssh でホスト名を指定可能．
  + 上記の1.と2.の設定は，rasps-config でも設定可能．
  + RaspberryPi の OS　再インストール等に伴う外部 PC の SSH 履歴再設定
    - $ ssh-keygen -R \<RemoteHostName(RaspberryPi)> 

### (03) まとめ
以上の設定が終了すれば，電源とネットワークのケーブルを繋いで，
他のPCからSSHを利用したリモートログインで操作可能となる．
これ以外の使用目的に合わせた設定方法については，次回以降のメモに記載する．
Swiftの弱参照について

弱参照についてのメモ(Swiftに限った話ではないかもしれません)
弱参照のインスタンスは、参照カウントが1になったら自動的にnilになるようです

Hogeクラスにプロパティtempについてテストしてみました

### 強参照

```swift:
class Temp {
}

class Hoge {
	var temp: Temp?
	
	init(t: Temp) {
		temp = t
	}
}

var t:Temp! = Temp()
var h:Hoge! = Hoge(t: t)

t = nil

print(h.temp)
```

結果
大元のtがnilになっても、tempは強参照なので残ります

```
> Optional(Temp)
```

### 弱参照
tempプロパティを弱参照にしてみました

```swift:
class Temp {
}

class Hoge {
	weak var temp: Temp?
	
	init(t: Temp) {
		temp = t
	}
}

var t:Temp! = Temp()
var h:Hoge! = Hoge(t: t)

t = nil

print(h.temp)
```

結果
大元がnilになったので、消えます

```
> nil
```
javascriptで無限ループに入って動かなくなるのをデバッグする


# 前提
なぜかどこかで無限ループして動かなくなるけど、どこなのかわからないとき

# 手順

1. Firefoxで開く。Firefoxは[一定時間以上scriptが実行し続けると警告が出る](https://support.mozilla.org/en-US/kb/warning-unresponsive-script#w_letting-the-script-run-longer)ので、おおまかな場所を知ることができます。
![pasted_image_at_2015_12_01_03_14_pm_720.png](https://qiita-image-store.s3.amazonaws.com/0/26122/761303ee-eb1d-acaa-bb9d-d3f0b2edee99.png "pasted_image_at_2015_12_01_03_14_pm_720.png")

2. 表示された行番号周辺にbreak pointを置いて、stack traceを見る。スタックを遡るとわかったり分からなかったりします。
お世話になったGemシリーズ（2015年版）

今年は複数の大型開発にたちさわることができましたが、その時にお世話になったGemの一覧を共有します。

**[Active Admin](https://github.com/activeadmin/activeadmin)**
管理ツールといえばこれですね。拡張性もあるし、多言語対応しているし、見た目綺麗だし、現在も開発が進められている素敵なGem。Octopusとかと相性が悪くて多少苦戦しましたが、管理画面に消費する時間を大幅に短縮してくれました。ただ最新のドキュメントが不足しているのでソースを直接読むケースがしばしば・・・。

**[annotate_models](https://github.com/ctran/annotate_models)**
データベースのテーブル名やカラム情報をモデルの中にコメントとして追加してくれるGemです。
マイグレーションファイルを見ずにデータベース側の構造が把握できるのはとてもありがたいです。
[migration_comments](https://github.com/pinnymz/migration_comments) を使うとマイグレーションファイルに追加したコメントも一緒に出力されてさらに良い感じです。以下のような感じで出力されます。

    # Table name: accounts
    #
    #  id               :integer       not null, primary key
    #  nickname         :string(255)   default("unknown")    # ユーザー名
    #  last_accessed_at :datetime                            # 最終アクセス時間

**[globalize](https://github.com/globalize/globalize)**
DBの翻訳を楽にしてくれるGem。[Roo](https://github.com/roo-rb/roo)と組み合わせてエクセルから自動的に翻訳データをDBに流し込むようにすればいい感じのローカライゼーションフローができあがります。

**[capistrano-rails](https://github.com/capistrano/rails)**
サーバーにデプロイするときにお世話になってるGem。[Jenkins](https://jenkins-ci.org/)さんと組み合わせると最強。
エンジニアなしでデプロイができるようになったりします。
[airbrussh](https://github.com/mattbrictson/airbrussh)というGemと組み合わせるとログも綺麗になるのでこちらもおすすめです。

**[whenever](https://github.com/javan/whenever)**
cronjobに登録する内容をRails側で書けるようにしてくれるGemです。
これを使うまでは、デプロイ時にjobの登録を忘れたり、古いものを外すのを忘れたりと問題だらけでしたが、これを使うようになってからは、機能追加や削除するコミットと同時に編集できるようになったのでそういった問題が発生しなくなりました。

**[simplecov](https://github.com/colszowka/simplecov)**
テストのカバレージ率を算出して出力してくれるツールです。文句なしの超便利Gemです。

**[Roo](https://github.com/roo-rb/roo)**
xlsxファイルをインポートするためのGemです。マスターデータや他の部署の人とかが記入した資料を取り込んだりする時に便利です。

**[turnout](https://github.com/biola/turnout)**
サーバーをメンテナンス状態にして外部からサイトにアクセスできなくしてくれるGemです。Capistranoとも相性がよくて使いやすいです。

**[stethoscope](https://github.com/NZX/stethoscope)**
サーバーにハートビート機能を追加してくれるGemです。
Rackのミドルウェアなので、Railsで実装した時のオーバーヘッドとかもなく、パフォーマンス面なども考慮されている素敵なGemです。

**[ar-octopus](https://github.com/tchandy/octopus)**
Railsにシャーディングやレプリケーション機能を追加してくれるGemです。拡張性を考慮しないといけない開発には欠かせません。ただ、特性上仕方がないことではあるのですが、かなりクセのあるGemです。故にActiveRecord内部の知識がある程度求められます。使用する場合、ActiveRecord系のGemとの相性を確認しながら慎重に導入することをお勧めします。

**[term-ansicolor](https://github.com/flori/term-ansicolor)**
ANSIエスケープシーケンスを使って文字列に色を追加することが可能になるGemです。自分で書いたログ出力などに色をつけるのに使いました。やっぱり色つけるとログが見やすいですよ。いやほんとに。

**[activerecord-colored_log_subscriber](https://github.com/customink/activerecord-colored_log_subscriber)**
Rails 5で実装されたコマンド別ログ色付けをバックポートできるようにGemに切り出したやつです。
SELECT=青、INSERT=緑、UPDATE=黄、DELETE=赤 みたいな感じでコマンド別に色がつくようになります。ログが見やすくなり、解析がはかどります。

　

あと、余談ですが自分が書いたアルファニュメリックなID自動生成Gem、[alphanumeric_random](https://github.com/taka-oyama/alphanumeric_random)もよろしくです。
[Unity] uGUIのボタンイベントを他のボタンに流す

# 何がしたいのか

モーダルとか出す時に、後ろに半透明のパネル引いて暗くしたりしますよね？
そこタップしてもボタンタップと同じ処理したいなーとか思うわけですよ。
閉じるとか、シナリオシーンの「次へ」とかね。

要するに、<b>別のオブジェクト</b>から<b>他のボタンを押したい</b>という事

# どしたらいいか

uGUIのButtonはSelectableと、IPointerClickHandler, ISubmitHandler継承していてます。
Selectableは以下のインターフェイスを継承しています。

- IMoveHandler
- IPointerDownHandler
- IPointerUpHandler
- IPointerEnterHandler
- IPointerExitHandler
- ISelectHandler
- IDeselectHandler

これらのInterfaceで定義されたイベントを受け流して上げれば良いのです。

# コード
```c#
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.EventSystems;
using System;

public class BypassButtonEvent : MonoBehaviour, 
        IPointerClickHandler, ISubmitHandler,
        IMoveHandler,
        IPointerDownHandler, IPointerUpHandler,
        IPointerEnterHandler, IPointerExitHandler,
        ISelectHandler, IDeselectHandler
{
    public Button target;

    public void OnPointerClick(PointerEventData eventData)
    {
        target.OnPointerClick(eventData);
    }
    public void OnSubmit(BaseEventData eventData)
    {
        target.OnSubmit(eventData);
    }

    public void OnDeselect(BaseEventData eventData)
    {
        if (target != null)
            target.OnDeselect(eventData);
    }

    public void OnMove(AxisEventData eventData)
    {
        if (target != null)
            target.OnMove(eventData);
    }

    public void OnPointerDown(PointerEventData eventData)
    {
        if (target != null)
            target.OnPointerDown(eventData);
    }

    public void OnPointerEnter(PointerEventData eventData)
    {
        if (target != null)
            target.OnPointerEnter(eventData);
    }

    public void OnPointerExit(PointerEventData eventData)
    {
        if (target != null)
            target.OnPointerExit(eventData);
    }

    public void OnPointerUp(PointerEventData eventData)
    {
        if (target != null)
            target.OnPointerUp(eventData);
    }

    public void OnSelect(BaseEventData eventData)
    {
        if (target != null)
            target.OnSelect(eventData);
    }
}
```

# 結果

## 普通の状態
![2395503194b6df757f592adcbf61032c.gif](https://qiita-image-store.s3.amazonaws.com/0/15626/fca1d2fa-c646-4a0b-ed8f-8c9af65fabba.gif)

## 半透明パネルにスクリプトを付け、targetにボタンを設定した
![ec120f01624a7bd7494cffa05fa24d18.gif](https://qiita-image-store.s3.amazonaws.com/0/15626/2f20486c-d535-921a-4eae-00340c506b11.gif)

# 備考
ボタンを押した時のTransitionが不要なら、Selectable側のInterface実装は不要です
というか、その場合もう直接イベント叩こうよと。
EC-CUBE 2.13.5で、会員が登録内容を変更した時にメール送信するカスタマイズを書いてみた


# あらまし

ユーザが会員登録情報を変更した時に、確認の意味も込めて完了メールを送りたい。
ついでに会員登録情報が変更されたことを管理者側で検知したい。

ぐぐってみたところ情報が古い上に怪しく、EC-CUBEの挙動を参考に書くことに。

当方の環境ではカスタマイズする可能性のあるものを
全てgit管理している（上に深く考えていない、merge上等）為、
差分が見やすいLC_Page_Mypage_Change.php に直接記述している。

人or運用ルールによっては、下記を編集する方がいいだろう。
{root}/data/class_extends/page_extends/mypage/LC_Page_Mypage_Change_Ex.php


# 追加

{root}/data/class/pages/mypage/LC_Page_Mypage_Change.php
130行目に以下。
class LC_Page_Mypage_Change の function action()の処理にて、
後述する自作関数lfSendChangeMailに渡す。

```php
// 会員登録と完了画面
case 'complete':
    $this->arrErr = SC_Helper_Customer_Ex::sfCustomerMypageErrorCheck($objFormParam);

    // 入力エラーなし
    if (empty($this->arrErr)) {
      // 会員情報の登録
      $this->lfRegistCustomerData($objFormParam, $customer_id);

      /** ここから追加 **/
      // 関数に渡す情報を揃える
      $objDb = new SC_Helper_DB_Ex();
      $CONF = $objDb->sfGetBasisData();
      $c_name = filter_input(INPUT_POST, 'name01') . filter_input(INPUT_POST, 'name02');
      // 会員情報変更のお知らせを送信
      // 他の処理ではPOSTをfilter_inputでラップしてないあたり修羅の国やでぇ
      $this->lfSendChangeMail($CONF, filter_input(INPUT_POST, 'email'), $c_name);
      /** ここまで追加 **/

      //セッション情報を最新の状態に更新する
      $objCustomer->updateSession();

      // 完了ページに移動させる。
      SC_Response_Ex::sendRedirect('change_complete.php');
    }
    break;
```

同じく、194行目に以下。
class LC_Page_Mypage_Changeの末尾に関数を追加。

```php
    /**
     * 登録内容変更お知らせメールを送信する。
     *
     * @param  array  $CONF          店舗基本情報の配列
     * @param  string $email         送信先メールアドレス
     * @param  string $customer_name 送信先氏名
     * @return void
     *
     */
    public function lfSendChangeMail(&$CONF, $email, $customer_name)
    {
      // 変更お知らせメール送信
      $objMailText = new SC_SiteView_Ex(false);
      $objMailText->setPage($this);
      $objMailText->assign('customer_name', $customer_name);
      $toCustomerMail = $objMailText->fetch('mail_templates/mypage_change.tpl');

      $objHelperMail = new SC_Helper_Mail_Ex();
      $objHelperMail->setPage($this);

      // メール送信オブジェクトによる送信処理
      $objMail = new SC_SendMail_Ex();
      $objMail->setItem(
        '', //宛先
        $objHelperMail->sfMakeSubject('登録内容を変更するのもアイカツ！だね！'),
        $toCustomerMail, //本文
        $CONF['email03'], //配送元アドレス
        $CONF['shop_name'], // 配送元名
        $CONF['email03'], // reply to
        $CONF['email04'], //return_path
        $CONF['email04'], // errors_to
        $CONF['email01']  // Bcc
        );
      $objMail->setTo($email, $customer_name . ' 様');
      $objMail->sendMail();

      return;
    }
```

{使用中のテンプレートパス}/mail_templates/mypage_change.tpl を作成。

```smarty
<!--{$customer_name}--> 様

オケオケオッケー
```
Visual Studioで新規作成するファイルの内容をカスタマイズする


下記フォルダに含まれているファイルを編集すると、Visual Studioで新規作成したcpp/hファイルの内容をカスタマイズできます。

C:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\vcprojectitems

ソースコードの文字エンコードをUTF-8 (BOM)にしたり、ヘッダーにお決まりのコメントを入れておくなどといった使い方ができます。
【CakePHP】プロパティなしのモデルのファイル作るか論争

規約通りであればモデルのファイル作らなくても、find()やsave()ができる。
モデルにプロパティを設定しない場合にわざわざモデルのファイルを作るかどうかという話ですけど、ちなみに自分は作らない派です。

理由は、わざわざファイル作るのが面倒なのと、モデルのファイルが多くなってきたときごちゃごちゃしてファイルを探すのが面倒だということです。

そもそもプロパティなしとかないとか、bakeで作っちゃうから面倒じゃないとか、phpstomrで一発で開くから検索とかしないとかいろいろ意見あると思いますが、ほかの方はどのように考えているのか良かったら教えてください！
複数の言語を同時に触ることになった俺は

# はじめに

この記事は株式会社アイスタイルアドベントカレンダーの2日目の記事です。

新卒2年目の@ktarowがお送りします。

まぁこんなエモい感じのタイトルをつけていますが、組織としてのアドベントカレンダーなので、広報的な役割をこめた記事にしようと思います。
(※最後に個人的意見を書きます。)

今まで当社のことをしらなかった方が、「へ～アイスタイルってこういう会社なんだ！」と思ってくれると幸いです。

# 株式会社アイスタイルとは
まずはさらっと会社の紹介をします。
本当にさらっとです。

株式会社アイスタイルは、__「Beauty × IT」__を軸に事業を行っており、クチコミサイトの__[＠cosme](http://www.cosme.net/)__や__[＠cosme shopping](http://www.cosme.com/)__といったECサイトなど、美容に関するさまざまなサービスの開発・運営を行っています。
※[詳しくはこちら](http://www.istyle.co.jp/)

# 社内で利用されている言語について
では、さらっと紹介を終了させたところで、社内で利用されている言語について書いていこうと思います。

アイスタイルでは以下のような言語の比率で開発を行っています。

|使用言語|比率(%)|説明|
|:---:|:--:|---|
|PHP  | 70 |上記で説明したサービスや、他のサービスはほぼPHPで開発されています。|
|Java | 20 |主にAPIの開発で利用されています。|
|Ruby | 5  |一部のAPIで利用されています。基本的には新規の開発では利用しませんが、Rspecでテストを書いているチームもあったります。|
|Scala| 3  |一部のサービスで利用されています。新規の開発では利用していません。|
|Go   | 1  |最近バッチとして採用したチームがあるとかないとか…|

上記の一覧でわかるように、__当社はPHPの会社__です。
昨日の記事を書いてくれた 新卒の@sota1235くんや私も新卒入社なのですが、入社直後の技術研修ではPHPを用いたアプリケーション開発を行いました。

最近では、__Laravelフレームワーク__が人気で、新規のサービスでは、大体Laravelを用いた開発を行っています。
(今年の新卒研修もLaravelが採用されていたので、来年もLaravelでの研修かも？)

# 複数の言語を同時に触ることになった俺は
では、会社で利用されている言語の紹介が終了したところで、やっとタイトルに関連した内容を書いていきます。

現在入社2年目の私は基盤開発部という部署に所属していることもあり、__上記の言語全て__に携わっています(メインはJavaですが…)。

ここから先は、さまざまな言語をさわることで感じたメリットやデメリットについて記述していきたいと思います。

#### メリット
1. __複数の言語に触れるため、割とどんなことにも対応できるようになる。(個人的メリット)__
2. __言語間の違いに気づけるようになる。(個人的メリット)__

#### デメリット
1. __器用貧乏化する。(一つの言語について詳しくなれない)(個人的デメリット)__
2. __レビューできる人がいないことがある。(組織的デメリット)__
3. __メンテナンスされてないことがある。(メンテナンスしていた人がすでにいない)(組織的デメリット)__
4. __障害が起きたときに死ぬ可能性がある。(組織的デメリット)__

デメリットがメリットを上回ってしまった！！！！！！！！
あくまでも個人的な意見ですが、今いけてる言語に流されたり、自分が使いたい！と思っただけの言語を採用すると、数年後に組織的に痛い目をみる傾向にあるような気がします。

# 最後に
ここまで、複数の言語に触ったメリットやデメリットについて書きましたが、入社1年半で5つの言語を経験できて個人的には成長できたと思います。(※いろいろな闇も見たりしましたが…)

ただ、上記に記述されたように複数の言語を中途半端に取り込むと、メンテナンスされなかったり他に誰も触れる人がいないといったデメリットが顕在化します。

言語選定は慎重に！！！！ということで、2日目のアドベントカレンダーの締めとさせていただきます。
(※19日に再度登場するので、そちらには何か技術的なことを書きます…)

明日は、@imaiyさんのCouchbaseの話です！！
【CakePHP】Hash::get()使いどころ



```
Hash::get(array $data, $path, $default = null)
//※cakephp2.5より$defaultが追加。
```

配列から値を取得するときissetが必要ない。
さらにcakephp2.5からはnullの場合のデフォルト値も設定できる！PHP7で話題の「??」演算子ほどシンプルじゃないけどこれは便利なのでは。
CentOS7にバイナリのNode.js(v4.2.2 LTS)をインストール、アンインストールした時のメモ

# Node.jsのバイナリをインストールした時のメモ
なんだかんだ何度もやってるとこう、毎回調べるのが面倒なので自分向けのメモです。
今回インストールしたのはLTS版(4系)の最新バージョンのv4.2.2です。
 <https://nodejs.org/dist/latest-v4.x/>

## あらかじめインストール済みのものをアンインストール
yum(CentOS7)リポジトリの最新バージョンが0.10.36と古いので、アンインストール。

```sh:root
yum remove nodejs
```

## インストール (バイナリ)

```sh:root
cd /usr/local/src/
curl -o node-v4.2.2.tar.gz https://nodejs.org/dist/latest-v4.x/node-v4.2.2-linux-x64.tar.gz
tar zxvf node-v4.2.2.tar.gz --strip-components=1 --exclude="*.md" --exclude="LICENSE" -C /usr
```

## アンインストール（手動）
単純に、インストールしたものだけをrmして消します。

```sh:root
cd /usr
rm -rf bin/node
rm -rf bin/npm 
rm -rf include/node
rm -rf lib/node_modules
rm -rf share/doc/node
rm -rf share/man/man1/node.1
rm -rf share/systemtap/tapset/node.stp
```

## 備考
* インストール先を/usr/localではなく/usrにしたのは、Jenkinsから実行した時に/usr/local/binが環境変数に入ってないためです。Jenkinsの設定で追加しても良かったのですが、そもそも

```shell-session:bash
[root@localhost ~]# which perl
/usr/bin/perl
[root@localhost ~]# which python
/usr/bin/python
[root@localhost ~]# which ruby
/usr/bin/ruby
[root@localhost ~]#
```

こんな感じで、なんかnodejsカワイソウなので/usrとしました。
適宜ご変更くださいませ。

* ソースからのインストールはコンパイルの時間がもったいないのでやめました。
Node.js 学習帳-失敗事項　〜 iBeaconを使う何かを作ってみる〜

Node.js の環境を用意した後での学習メモ

[環境構築の参考：macでNode.jsの環境設定]
(http://qiita.com/tagosaku324/items/bf1fe149c38c99728c72)

# iBeaconを使う何かを作ってみる
iBeaconはiOS(7以降のデバイス)の位置情報サービスを拡張する新しいテクノロジー（[iOS：iBeacon について](https://support.apple.com/ja-jp/HT202880)参照）
Bluetooth LEを使用することで、「ビーコン」と呼ばれる発信器の、近接や距離を検知する事が出来るようになる機能だそうです。

たとえば、ビーコンを設置している場所にiphoneを持って近づくと、クーポンゲットしたり、位置情報取得できたりするので、アイディア次第で何かできそうな機能です。

とりあえずは、受診と発信のお勉強から。。

＜MACをiBeacon電波発信するように設定したい＞
Macを使った最も簡単にiBeaconの電波を発信する（Advertiseする）方法
[たった6行!最も簡単にiBeaconの電波を「発信」する方法]
(http://qiita.com/Morikuma_Works/items/a0dd3cfcd1eef8dbd492)　を参考にする。

```
$ mkdir ibeacon
$ cd ibeacon
```
>ここで問題、
bleacon　をインストールすることで簡単にiBeacon発信できるようになるはずですが、nodeのバージョンによってインストール出来ないんです。

★nodeバージョンを変えてibeaconをインストールした方法

```
$ nvm install v0.10.40
######################################################################## 100.0%
Now using node v0.10.40 (npm v1.4.28)
$ node -v
v0.10.40
$ npm install bleacon
bleacon@0.4.0 node_modules/bleacon
$
・・・無事にインストールできた
```
これで[たった6行!最も簡単にiBeaconの電波を「発信」する方法]
(http://qiita.com/Morikuma_Works/items/a0dd3cfcd1eef8dbd492)　の通りうまくいくかとおもいきや、

```lang:sender.js 
var Bleacon = require('bleacon');

var uuid = 'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
var major = 0;
var minor = 0;
var measuredPower = -59;

Bleacon.startAdvertising(uuid, major, minor, measuredPower);
```
実行するとエラーになります。OS X El Capitan だからでしょうか・・・

```
$ node sender.js 

module.js:340
    throw err;
          ^
Error: Cannot find module './build/Release/binding.node'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/Users/*****/NodeSampleTmp/ibeacon/node_modules/xpc-connection/index.js:3:15)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
```

★方法として失敗したけど勉強になった内容
node v0.12.8のとき、bleaconは使えない。
macで bleacon を使いたい場合はnodeバージョンを下げて行うしか今のところ無いのかもしれない。

```
$ npm install bleacon
> bignum@0.11.0 install /Users/****/NodeSampleTmp/ibeacon/node_modules/bignum
> node-gyp configure build

・・・・応答なし　強制終了させた・・・・
```
>node 0.11以降だとネイティブ拡張の仕様で互換性のない変更が入ってるらしいので、bignumがそれに追従していないためbignumのコンパイルに失敗するとのこと。
bleacon　のソースのことを詳しく知りたい方は
[参考URLこちら](http://qiita.com/kazuph/items/1302174e9bb52911d371)がいいと思います。


ちなみに、OSがLinuxとかなら、nodeバージョンを落とさなくてもlibbluetooth-dev　をインストールしてできるのかもしれないです。（未確認）

```
sudo aptitude install libbluetooth-dev
npm install bleacon
```
WordPressの管理画面でJSとCSSを適用する方法


参考：[WordPress の管理画面でカスタムJSの読込](http://qiita.com/BUN/items/5d32ee0f828e6d7ad558)

## 手順1
自分が使っているテーマのディレクトリにwp-adminというディレクトリを作成
## 手順2
wp-adminの中に使いたいjsファイルとcssファイルを入れる。
ここではhoge.jsとfuga.cssをいれた。
## 手順3
テーマのディレクトリにあるfunction.phpに以下を追加。

```php:function.php
function _register_custom_files() {
	$_current_theme_dir = get_template_directory_uri();
	$_custom_files = '';
	$_custom_files = _add_custom_js($_custom_files,'hoge.js');// jsを追加
	$_custom_files = _add_custom_css($_custom_files,'fuga.css');// cssを追加
	echo $_custom_files;
}
function _add_custom_js($_custom_files, $_file_name){
	$_current_theme_dir = get_template_directory_uri();
	$_custom_files .= '<script type="text/javascript" src="'
					.$_current_theme_dir
					.'/wp-admin/'
					.$_file_name
					.'"></script>';
	return $_custom_files."\n";
}
function _add_custom_css($_custom_files, $_file_name){
	$_current_theme_dir = get_template_directory_uri();
	$_custom_files .= '<link rel="stylesheet"  type="text/css" href="'
					.$_current_theme_dir
					.'/wp-admin/'
					.$_file_name
					.'" />';
	return $_custom_files."\n";
}
add_action('admin_head', '_register_custom_files');
```

複数追加したかったら

```php:function.php
$_custom_files = _add_custom_js($_custom_files,'hoge.js');
$_custom_files = _add_custom_css($_custom_files,'fuga.css');
```

のところを下記のように追加したいファイル分増やせばいい。

```php:function.php
$_custom_files = _add_custom_js($_custom_files,'hoge1.js');
$_custom_files = _add_custom_js($_custom_files,'hoge2.js');
$_custom_files = _add_custom_js($_custom_files,'hoge3.js');
$_custom_files = _add_custom_css($_custom_files,'fuga1.css');
$_custom_files = _add_custom_css($_custom_files,'fuga2.css');
```
SP360, SP360 4K, Theta Sの360度動画撮影を比較してみた。

SP360 4Kが届いたので、早速、旧型SP360, Theta Sと比較してみました。

各デバイスの動画のリンクは以下の通りです。
SP360　https://store.hacosco.com/movies/8b3ca680-0dd3-4f3b-8b58-a2f03382d00e
SP360 4K https://store.hacosco.com/movies/1e12e430-e7cf-4700-87cc-0deb7e0c47e9
Theta S https://store.hacosco.com/movies/40ccc58e-a841-4414-832f-0b0dddc42d62

どのカメラも、アプリでEquirectangularに変換すると、毎秒30フレーム、1920*960のmp4ファイルになります。

ただし、ビットレートは以下のように異なります。

SP360 2909 kbps
SP360 4K 8292 kbps
Theta S 6095 kbps

SP360 4K と Theta Sはいい勝負ですが、細かい文字を見るのには、やはりSP360 4Kのほうが良いです。以下の写真は、動画からの切り抜きです。本の文字に注目してください。

SP360
![SP360.PNG](https://qiita-image-store.s3.amazonaws.com/0/58503/6c44e053-5789-8367-3b0f-9a00a2c89a76.png)

SP360 4K
![SP3604K.PNG](https://qiita-image-store.s3.amazonaws.com/0/58503/2d3ccdc6-8cc5-7054-f95c-ddc61186c542.png)

Theta S
![ThetaS.PNG](https://qiita-image-store.s3.amazonaws.com/0/58503/4da4eafb-2242-1b2b-3f2c-c98390b3a218.png)

Theta Sは、どうしても画面がぼわっとした感じになってしまいますね。

あと、SP360 4Kは、SP360より少しだけ縦方向に広いです（垂直方向214度 vs 235度）。


![SP360SP3604K.png](https://qiita-image-store.s3.amazonaws.com/0/58503/38b70fd0-1c15-524c-b8d6-f38f50b3e80f.png)

全体として、動画の画質に関してはSP360 4Kが良いですね。Theta Sは全天球にこだわる場合、静止画もとりたい場合（静止画の画質はTheta Sが圧倒的に上）に有効だと思います。
jQueryでは.clickより.onらしい

動的に生成された要素の場合、.clickは効かないみたい。
.onを使っとけば間違いない。

##例(動的な#idを想定)
動かない例

```js

('#id').click(function() {
  alert('動かない');
})
```
動く例

```js

(document).on('click', 'id', function() {
  alert('動く');
})
```

##参考

http://www.websuppli.com/javascript/25/
Slack | @here @channel @everyone @group の違い

Slack のアット記法と、通知が届く先について。

## `@here`

ひとつチャンネルで。
アクティブなメンバー全員に通知を送る。

非アクティブのメンバーには送らない。

## `@channel`

ひとつチャンネルで。
すべてのメンバーに通知を送る。

メンバーがアクティブかどうかは関係ない。

なので `@here` より強力。

## `@everyone`

どのチャンネルで発言しても、必ず #general 宛のコメントになる。
そして #general のメンバーに通知を送る。

( #general には必ず全メンバーが参加しているので、必然的に全員への通知になる )

## `@group`

`@channel` と全く同じ効果。古い書き方。使わなくて良い。
おそらく `@group` というネーミングが紛らわしいので、`@channel` に統一されたのだろう。

# 結論

`@here` と `@channel` だけで事足りる。

## 補足

- どの記法を使っても、通知が届き先が変わるだけで。発言本体はチャンネルの全員に届く。




<!-- Update From Qiita API -->

# チャットメンバー募集


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

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


# メンター受付


https://menta.work/user/5694

<!-- Update From Qiita API -->
superagentとaxiosの使い分け

モバイルファクトリー Advent Calendar一日目担当の@nekobatoです。
フロントエンドなので、ナウなフロントエンドっぽいライブラリ紹介でもします。

## はじめに

周りに「フロントエンドでXHRライブラリ何使ってる？」と聞くと

- フレームワークに生えてるのを使ってるよ（Angularなど）　←一番多い
- superagentだよ ←二番目に多い
- require('http')だよ　←！？
- JQueryだよ　←最近少ない
- 素のXHRだよ　←マジかよ

程度に大別される印象です。

私が普段使っている[Vue.js](http://qiita.com/advent-calendar/2015/vue)だと、request周りは標準で生えていないので[superagent](https://github.com/visionmedia/superagent)を使うことが多いのですが、最近場面によっては[axios](https://github.com/mzabriskie/axios)を使うこともあったりします。

## axios

axiosとは、Angularの[$http service](https://docs.angularjs.org/api/ng/service/$http)に影響を受けたXHRライブラリで、書き方が似たようなものになっています。

私はtj教なのでsuperagentを使いたいのは山々なのですが、どうしてもXHR周りだけ違和感のあるコードになってしまうのが問題になってしまう時は、axiosを使っています。

### 同一アプリ内の全く同じパラメータ記述問題

なぜaxiosを使い分ける場面が出てくるかというと、同一プロジェクト内では共通の決め事が多いので、毎回同じものを書くことが多くなります。

- `json`で渡す
- `application/json`で返ってくる
- 認証のために決められたHeaderがある

など。

``` javascript
request
  .post(url)
  .send({ a: b })
// ここから [1]
  .set('X-API-Key', 'hogehoge')
  // 設定いろいろ
  .set('Accept', 'application/json')
// ここまでアプリ内で全部同じ
  .end(function(err, res){
    // 処理
  });
```

[1]の記述を省略するためにライブラリのwrapperを作るハメになったり、
そのwrapperのせいで制限が出来たので更にwrapperにオプションを...となると
元のライブラリより複雑なwrapperが出来上がったりすることもあったり。
あとフレームワーク内では同一のエラーイベントを飛ばしたいとかの要求が増えると記述が重複するので、その当たりをまとめてhookしたい欲求が出てきます。

### axiosのinterceptors

axiosだとinterceptorsが生えているので、requestとresponseのhookが出来る。

``` javascript
axios.interceptors.request.use(function (config) {
  config.timeout = 1000;
  config.responseType = 'json';
  return config;
}, function (error) {
  return Promise.reject(error);
});

axios.get() ...
// 以下のXHRでは全て設定が同じ
```

### Promiseを使いたい

周りでthen catchが使われている場合、superagentだと基本チェーンで書いていくので、やはり違和感。
そこにQとか挟むとまたもやwrapperが爆誕するので、axiosに切り替えたほうが無難。

``` javascript
axios.get(options)
  .then(successFunction)
  .catch(errorFunction)
```

# axios自体の問題

Angularの$httpに似た書き方が出来て使いやすいaxiosなのですが、まだ設定できる項目がsuperagentと比べて少ない（request content-typeによる設定がうまくいかなかったり）ので、他の人の作ったAPIに合わせる場合はsuperagentを使った方が上手くいく印象でした。このあたりは1.0.0を待ちたい。

# まとめ

以上、Angularの$httpライクなXHRライブラリ、axiosを紹介しました。

XHRに関してはオレオレXHRを作ったりアプリごとのwrapperを作ったりするのは後で消耗するだけなので、hookできる機能があるだけでかなりすっきりします。

ただ、イベントドリブンなフレームワークの中ではsuperagentでも全てのXHRを受け持つhookが結構簡単に作れるので、そのあたりは好みかなという印象です。


次は弊社で狂犬と呼ばれる@kfly8です。よろしくお願いします。
PHPの配列は参照渡しにするべきか？値渡しにするべきか？


&をたくさん使って参照渡しをしているコードを見ています。  
参照渡しをした方がいいのか、値渡しにしてメソッドに結果値を返させるのではどちらが良いかということを考えてみたいと思います。

# PHPの仕様

* 配列は値
* デフォルトは値渡し
* パラメータに&を付けると参照渡しができる

# 参照渡しと値渡しのメリット・デメリット

## 参照渡し

* javaやC++の参照渡しと同じ感覚でコーディングできる
* &を書き忘れると呼び出しではデータが変わらない、またそれに気が付きにくい

## 値渡し

* `&`を書き忘れるというヒューマンエラーが起きない
* 返却される値を見ればいいので、デバッグが楽
* 必ず値を返さなければならない

# 観点

ここで注目したいのが、値渡しとしてメソッドを定義すれば`&`を書き忘れるというヒューマンエラーが起きないということです。  
先日リファクタリングをしていてメソッドの抽出を行った際、`&`を付け忘れてしまって配列の値が正しくないことに数日気がつかないということがありました。  
その配列は4つのクラスをまたいでおり、どこで値がおかしくなっているのかをデバッグするのに大変時間がかかりました。

#まとめ

配列を引数に渡すメソッドを定義するときに、参照渡しか値渡しにするべきか迷ったら「値渡し」を選択した方がいいと思います。
myThingsとNode-REDを使ってnetatmo Welcomeで認識した知らない人の顔を関連付けるタスクを自動登録

長いタイトルになっちゃいましたが。。。

## netatmo Welcomeとは？
顔認識カメラです。人の顔を認識してくれるので主に家の中とかに置いて使います。
![スクリーンショット 2015-12-01 19.27.39.png](https://qiita-image-store.s3.amazonaws.com/0/21109/1597f1ec-6f7c-3f8b-0db6-e7a5823adfc0.png)

会社の受付に置いて試してみると以下のような感じで顔認識や動き（モーション）を検知したイベントを記録していってくれます。

![スクリーンショット 2015-12-01 19.30.28.png](https://qiita-image-store.s3.amazonaws.com/0/21109/ca4a6bf0-8cec-9d8a-ab5a-a4840cfa2962.png)

知らない顔と認識された場合は？マークがついて以下のように既知の人と関連付けることができます。

<img width="262" alt="スクリーンショット 2015-12-01 19.35.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/ed678cec-1a9b-56b3-6f8d-185d629b82a8.png">

<img width="1195" alt="スクリーンショット 2015-12-01 19.41.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/849ecce8-a0ee-e09d-d85c-5aa5795b9ab8.png">

netatmo Welcomeのスマホアプリがあって知らない顔を認識したらプッシュを受け取れるのですが、流れてしまって関連付けを忘れがちなのでmyThingsでWunderlistにタスク化しようと思います。

## Node-REDでイベントを取得する

netatmo Welcomeは[Webhook](https://dev.netatmo.com/doc/webhooks)があるのでNode-REDでHTTP POSTのエンドポイントを作成するだけでイベントが受け取れます。

![netatmo.png](https://qiita-image-store.s3.amazonaws.com/0/21109/993a025a-ba63-7c78-4cdb-ec785ab2108d.png)

## IDCFチャンネルにHTTP POSTする

[myThingsをはじめよう - Part2: IDCFクラウドに「IDCF」チャンネルをセットアップする](http://qiita.com/masato/items/f9be4a15216fe29de7fb)と同じ手順でtrigger-1に投げてみたflowが以下です。

<img width="1037" alt="スクリーンショット 2015-12-01 19.58.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/444123a8-8636-4f18-97ca-f36b0baa9f46.png">

上記の通り肝はchange nodeで以下のようにheaderに設定します。

<img width="771" alt="スクリーンショット 2015-12-01 20.07.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/8aa3a25b-f5fd-a838-db7a-f29aef6fd78d.png">

## myThingsでIDCFチャンネルとWunderlistの組み合わせを作成

以下のようにmyThingsで組み合わせを作成。

<img width="320" alt="image1.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/21109/6e9aeaaf-fb89-d93b-fbed-058b3c9ccf60.png">

組み合わせが動いて以下のようにWunderlistにタスクが登録されました。

<img width="912" alt="スクリーンショット 2015-12-02 0.03.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/21109/f5ebcf8a-98e9-cd43-2d12-31a5b7ab5710.png">

## まとめ

知らない顔が認識されたイベントがタスクとして登録されますが、そのタスクがどのイベントなのかは解らないので実用的でないです（ここまでやって気付いた）

IDCFチャネルのトリガーから何かパラメータやメッセージを送れてmyThingsのアクション側で利用できるようになると良いですね。

その前にnetatmo Welcomeそのものがチャンネル化されるかもしれませんが...
Wordpressの管理画面で固定ページのみヴィジュアルエディタを禁止する方法


参考:[WordPress>フォーラム>>エディタでHTMLモードを強制する方法](https://ja.forums.wordpress.org/topic/11343?replies=8#post-41344)

テーマのfunction.phpに以下を追加するだけ


```php:function.php
add_filter('user_can_richedit' , 'my_default_editor');
function my_default_editor( $r ) {
	if ( 'page'== get_current_screen()->id ) {
		return false;
	}else{
		return $r;
	}
}
```
Laravel5.1で素のPDOを使う


裏でPDO使ってるのだから、わざわざ定義しなくても使えるだろうと思っておりましたが、オフィシャルページで記述を見つけたので試してみました。

めんどくさいのでroute.phpに書きます。

```sql
create table members
(
	id int,
	name varchar(32)
);
```
みたいなテーブルがることが前提。

```php
Route::get('pdo',function(){

	$name = "hoge";

	//pdo
	//後はいつもお馴染み
	$dbh = DB::connection()->getPdo();

	$stmt = $dbh->prepare("select * from members where name = :name");
	$stmt->bindParam(':name',$name);
	$stmt->execute();

	foreach($stmt->fetchAll(PDO::FETCH_ASSOC) as $row)
	{
		echo $row['id']." ".$row['name']."<br>";
	}

	return;
});
```
こんな感じ。

> PDO::FETCH_ASSOC等でエラーがでる場合は、use PDO;とする。

```php
$dbh = DB::connection()->getPdo();
```

とすれば後は普通のPDO。
Laravel5.xでhttpsにリダイレクト


httpでアクセスしてきたとき、httpsにリダイレクトさせたいときがあります。

まともな方法として思いつくのは以下の２つ。

* Rewriteを使う
* Middlewareを使う

###Rewrite

まあ、基本全てリダイレクトされます。まあ、full sslの時代なのでこれでもよい。
app/public以下の.htaccessファイルにSSLにリダイレクトするコードを追記します。

```diff
<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews
    </IfModule>

    RewriteEngine On

+   #SSL
+   RewriteCond %{HTTPS} !=on
+   RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)/$ /$1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>
```


###Middleware

選択的にしたいときは、Middlewareを使うのもよし。

また今度書きます。
関西フロントエンドUGのこれまでとこれから


関西フロントエンドUG(KFUG) アドベントカレンダーの第一日目です。

KFUGの中の人からお伝えします。

## About

関西フロントエンドUG(以下KFUG)は、HTMLやJavaScript,CSSなどWebフロントの技術ネタをテーマに、勉強会などを開催しているIT系のコミュニティです。

イベントの告知は主に Connpass 上にて行っております。

http://kfug.connpass.com/

関西のWebフロントシーンを盛り上げるべく、

### もくもく会

KFUGでは、[大阪のTAMさん](http://www.tam-tam.co.jp/)にスペースをお借りして、毎月もくもく会を開催しています。

フロントエンドをテーマにもくもく会、ということですが、実際にはLaravelとかサーバいじったりとか、フロントエンドじゃない事にチャレンジしてみる、という人もいます。

結構自由です。

### 勉強会

主にJS周りのネタをテーマにしたエンジニア向けの勉強会と、UI・UXを中心とするデザイナ向けの勉強会とを企画しております。

デザイナ向けと言っても参加層的には若干エンジニアの方が多めです。

そもそもWebフロントで、エンジニア、デザイナを明確に切るのは難しいような気もするのですが、デザイン畑の人の参加もお待ちしております。


## 2015年の関西フロントエンドUG

2015年の頭に立ち上げてから、2015年末で20回以上のイベント開催実績を築いてきたKFUGですが、まぁ実際立ち上げてから色々ありました。

一年内の出来事とは思えないくらい、濃い数ヶ月でしたが、「関西にフロントエンド系の勉強会文化を定着させる」という目標は、ある程度形として実を結んできたのかなぁとか考えています。

実際問題、飲み屋で話した「モテたいからコミュニティやろう」という不純な動機から始まった割には、うまいことイベントの定期開催サイクルも板についてきて、
参加者も毎回安定して集まっていただけているので嬉しい限りです。

~~とまぁイベント自体は好調ですが、当初の目的「モテる」に関しては、イベント関連とか仕事のあれこれとかでくっそ忙しすぎてなかなかどうにもならんかったですが…~~

「勉強会に初めて参加しました」みたいなお客さんもポロポロと来ていただいていて、比較的参加の敷居の低い良い感じのコミュニティになっているのかなぁと思います。

## 12月のフロントエンドUG

アドベントカレンダーもぼちぼち空いておるので、とりあえず本日は12月開催予定のイベントをお知らせして、記事とさせてもらいます。

### もくもく会

12月ももくもく会開催します。

毎月いろんな人が集まってくれていますが、正直もくもく会でここまでの規模になるのは当初全く予想していなかったです。

http://kfug.connpass.com/event/22353/

今回はなにやらAngular2のハンズオンをしてくださる…みたいな話も聞いていますので、フロントエンドで何か勉強したいことある!!という人は是非課題を決めてお気軽にご参加ください。

### 年忘れLT大会

12月の勉強会は、ゆるくLT大会をします。

http://kfug.connpass.com/event/22377/

勉強会を毎月開催していく中で一番強く思ったのは「もっといろんな人に登壇発表してもらいたい」ということで、
KFUG運営上もそのための様々な工夫をしてきました。

今回はLT参加で、「ピザ・アルコールが無料」という大盤振る舞いです!!

結構内容的にもゆるめの発表が多めなので、忘年会気分で気軽に発表参加登録してもらえればと思います。

### もしゃもしゃ会

先月からスタートしたもしゃもしゃ会、定期開催の運びとなりました。

http://kfug.connpass.com/event/23205/

どうしてもエンジニア寄りの参加者が集まる一方で、デザイナ向けにどんな勉強会を開けるかなぁ…と悩んでいた時に提案いただいのがもしゃもしゃ会でした。

お気に入りのWebサイトや気になったWebサイトなどをとりあえず模写してみる!!という会です。

模写のアプローチはphotoshop でもコーディングでもアニメーションなどJavaScriptの模倣でもなんでもOKです。

こちらもまだ席に余裕がありますのでお気軽にご参加ください!!

## 最後に

まだアドベントカレンダーも飽きがあるので是非ご参加くださいませ。

http://qiita.com/advent-calendar/2015/kfug

開いてるところは適当に気が向いたタイミングで埋めていきつつ、運営こぼれ話などを足していく予定です。