OmniAICreator/Qiita-1.07M huggingface dataset:
Turbolinks 5とJavaScriptウィジェットを共存させる

Turbolinks 5にすると、JavaScriptまわりで正しく動かすためにいろいろ工夫が必要となりました。今回は、MagicSuggestというウィジェットを例に、対応するためにしたことをまとめていきます。

なお、[自分が以前書いた、Turbolinks 5に関する記事](http://qiita.com/jkr_2255/items/fe1e69e043c94a5c0a79)もご覧いただくと、よりわかりやすいかもしれません。

# Turbolinks 5の場合に、注意すべき点

「ページ表示のタイミングでのイベントが違う」という点は以前にも触れましたが、それ以外にも、「ブラウザバックした場合」の挙動がふつうの場合と大きく違っています。以下に、ブラウザバックする場合の概ねの流れを示してみます。

0. ページを表示する（`turbolinks:load`などのイベントが流れる）
1. ページ遷移しようとする（Turbolinksでの処理が起きる）
2. 現在のページで`turbolinks:before-cache`イベントが走る
3. 現在のページのDOMを保存する
4. 移動した先のDOMを描画する
5. （移動先のページ）
6. ブラウザバックを押すと、Turbolinksに制御が移る
7. 保存したDOMをロードして、`turbolinks:load`イベントを実行する
8. ロードしたDOMを描画して、戻る処理が完了

ここで注意点としては、DOMの保存は`.cloneNode(true)`で行われるので、ネイティブ・jQueryを問わず、イベントは**すべて削除されます**。とはいえ、一般的な場合、

* DOMノード…保存して復活するので、問題なく動く
* JavaScriptイベント…`turbolinks:load`でセットすれば、新規表示時にも発動し、ブラウザバック時にも全削除→再セットとなって、問題なし

となるので、正常に動く…ように思えます。

## JavaScriptからウィジェットを追加する場合

ここで問題になるのが、JavaScriptからDOMまで変えてしまうようなウィジェットを追加するような場合です。そのままにしていると、

* 新規ロード時…DOMを書き換えてウィジェットを生成、それにイベントをセット
* ブラウザバック時…「書き換え後のDOM+イベントなし」の状態からウィジェット生成コードが走って、うまく動かない場合がある

作戦としては2つあって、自分でDOM変更やイベントのセットを書いている場合には、「すでにDOMが変更されていればバイパスする」という方法があります。ただ、プラグインで行う場合はそうも行きません。

## MagicSuggestとは
今回テーマとして取り上げた[MagicSuggest](http://nicolasbize.com/magicsuggest/)は、複数選択可能な`select`をドロップダウン形式にしてしまう、というもので、設定次第ではQiitaのタグ欄のような「フリー入力＋既存リストから選択」ということもできます。

そこそこ長さのあるリストから複数選択させたいときに便利だったのでよく使っていたのですが、Turbolinks 5になったことで対応が必要となりました。

## 動くようにはなりました
「MagicSuggestのイベントだけセット」という器用な芸当はできないので、「もともとあった`<select>`要素をバックアップしておいて、キャッシュ記録時に書き戻す」という方法で対応を行うことにしました。なお、jQuery側に手当をして、ページ遷移ごとに`ready`が発動するようにしてあります。

```js:app/assets/javascript/magic_suggest.js
//= require magicsuggest

jQuery(function() {
  'use strict';
  // ページバック時の書き戻し用に、本来のドロップダウンをバックアップ
  var params = {
    /* 略 */
  };
  $('.magic-suggest').each(function(){
    var $elem = $(this);
    var cloned = this.cloneNode(true);
    $elem.magicSuggest(params);
    $('#' + this.id).data('original_select', cloned);
  });
  $(document).one('turbolinks:before-cache', function(){
    $('.ms-ctn').each(function(){
      var $this = $(this);
      $this.replaceWith($this.data('original_select'));
    });
  });
});
```

バックアップからの書き戻しは一度でいいので、`.one`で単発イベントとしてあります。
［C言語］ あなたは正しいフォーマット文字列を使っていますか？

katokenです。
本記事はACCESS Advent Calendar 2016の2日目の記事です。

# あらまし

株式会社ACCESSでは、組み込み機器への自社製品のポーティングを多く手がけており、その多くはCやC++で書かれています。

[昨日の記事](http://qiita.com/aKenjiKato/items/3acb8b674c5e5bbbf9a4)で書いたとおり、開発中のログは基本的に`fprintf()`を用いてコンソール等へ流します。

`fprintf()`はフォーマット文字列を見てスタックから何バイトとってどのように文字列に変換するか決めるため、
フォーマット文字列と変数の型がマッチしていないと間違った値が表示されるどころかクラッシュすることもあります。

# Question

さて、ここで問題です。

`unsigned int`, `void*`, `size_t`, `uint64_t` の型の変数の値を`fprintf()`を用いてコンソールに出力したい場合、
フォーマット文字列は何を使うべきでしょうか？

# Answer

答えは、以下のとおりです。

* `unsigned int` ... `%u`, `%x` 
* `void *` ... `%p`
* `size_t` ... `%zu`
* `uint64_t` ... `PRIu64` マクロ （※ `fprintf(stderr, "%" PRIu64 "\n", (uint64_t)64);` のように使う）

みなさん安易に`unsigned`型に`%d` や、`void*`型に`%lx`、`uint64_t`型に`%llu`とか使っていないでしょうか？
符号が変わったり、プラットフォームのポインタサイズが変わった時にきちんと表示してくれなくなったり、クラッシュするかもしれませんよ？

# 終わりに

かなり短かったですが、よく使う型とそれに対応するフォーマット文字列をクイズっぽく紹介しました。
[昨日の記事](http://qiita.com/aKenjiKato/items/3acb8b674c5e5bbbf9a4) の`uint64_t`のタイムスタンプを出力する場合などは
プラットフォーム次第で`%llu` だったり`%lu`だったりするので注意です。

（Goの記事書きたかったんだけど業務都合で間に合わなかったん...）

3日目の明日は @ikeyasu さんです。お楽しみに！

# 参考文献

* [man 3 printf](https://linuxjm.osdn.jp/html/LDP_man-pages/man3/printf.3.html)
* [プログラミング言語 C の新機能] (http://seclan.dll.jp/c99d/c99d09.htm#dt19990705)
Windows 10 Pro に FileMaker Server をインストールする

# FileMaker Server とは
まずは何はともあれ[公式サイト](http://www.filemaker.com/jp/products/filemaker-server/)を。

一言で言ってしまえばデータベースサーバです。単独で FileMaker を扱う場合と何が違うかというと、単独で扱う場合は自分のマシンで FileMaker を起動した場合にしかデータベースを操作することができません[^1]。しかし、サーバを24時間稼働させてそこにデータベースを保存しておけば、操作したいときにいつでも誰でも操作することができます。

つまり、複数人でデータベースを操作する場合に便利な機能（システム）ということになります。

# FileMaker Server のインストール条件
FileMaker Server をインストールするために必要なシステム条件は、[公式サイト](http://www.filemaker.com/jp/products/filemaker-server/server-15-specifications.html)によれば以下のとおりです。

> - Windows Server 2012 R2 Standard Edition
（更新プログラム 2919355 をインストール済み）
> - Windows Server 2008 R2 SP1 Standard Edition
> - Windows Server 2008 R2 SP1 Enterprise Edition
> - macOS Sierra 10.12
> - OS X El Capitan 10.11
> - OS X Yosemite 10.10

Windows では Windows Server しかサポートされていません。

# Windows 10 Pro に FileMaker Server をインストールする
とは言え、上記公式ページには注釈で以下のようにも書かれています。

> 上の表に記載されていないオペレーティングシステムでも動作する可能性がありますが、検証されていないため、サポートされません。

ざっと見てみた感じでは IIS さえあれば大丈夫なようですし、サポートのことはとりあえず置いといて、Windows 10 Pro にインストールしてみます。

インストールしてみたバージョンは FileMaker Server 14 および FileMaker Server 15 です。内容はどちらにも共通です。

# Setup.exe が起動しない
インストーラのルートフォルダにある Setup.exe を実行すると一瞬起ち上がりますが、すぐに終了してしまいます。管理者権限で実行してもだめです。さっそくつまずきます。

フォルダ構成を探ってみると、Files フォルダ配下にも Setup.exe が存在していました。こちらを実行したところインストーラが起動しました。

# ARR が自動でインストールできない
順調にインストールが進むと思われましたが、インストールの中盤で ARR がダウンロードできない旨が表示されてインストールに失敗しました。

![filemakerserverinstallfailed.png](https://qiita-image-store.s3.amazonaws.com/0/72181/5f8dc3d7-294c-a843-aa0c-bb3c9e58c298.png)

症状を検索してみるとまさにこの内容を記載している公式ページがありました。

[エラーメッセージ：IIS のアプリケーション要求ルーティング処理（ARR）が必要ですが、FileMaker Server で ARR がダウンロードできません。](https://filemaker-jp.custhelp.com/app/answers/detail/a_id/12969/kw/ARR)

このページによれば、ARR はインターネットから落としてインストールするため、インターネットに未接続の環境ではインストールに失敗するとのことです。しかし、インストールしようとしたマシンはインターネットには接続されています。

仕方ないので手動でインストールする方法を探したところ、やはり公式ページに説明がありました。

[Windows 版 の FileMaker Server をインストールするために、Microsoft Application Request Routing（ARR）を手動でインストールする方法](http://filemaker-jp.custhelp.com/app/answers/detail/a_id/13815/)

このページにあるように、Microsoft のページから ARR 3.0 を落としてきてインストールしました。そして再度 FileMaker Server のインストーラを起動してインストールです。

# ARR 3.0 を手動でインストールしても怒られる
しかしながら……

やはり先ほどと同じ箇所で怒られてインストールができません。

![filemakerserverinstallfailed.png](https://qiita-image-store.s3.amazonaws.com/0/72181/5f8dc3d7-294c-a843-aa0c-bb3c9e58c298.png)

早くも挫折です。

# 救世主
公式のフォーラムに解決法がありました。

[Filemaker Server 14 on Windows 10 |FileMaker Community](https://community.filemaker.com/thread/142969)

正確にはこのページからたどれるリンク先のページに解決法があります。

[Admin On the Run: FileMaker 14 Offline Installation - Since FM can't write decent documentation](http://adminontherun.blogspot.jp/2015/06/filemaker-14-offline-installation-since.html)

# 解決方法
コマンドラインからオプションを付けてインストールします。`ARRINSTALLED=1`のオプションで ARR のインストールを省略していると思われます。

```
C:\fm_installer\Files\setup.exe /V"/log %temp%\FM14InstallLog.log ARRINSTALLED=1"
```

無事インストールできました。

![filemakerserverinstallsuccess_02.png](https://qiita-image-store.s3.amazonaws.com/0/72181/a3d21b36-2df0-c076-fdd6-a7860303d3bb.png)

# 問題点
インストールだけならこれで問題ありません。しかし別の大問題が起き、そちらは未だに解決できずに放置（断念）しています。詳しくは後日の記事で……。

[^1]: 当たり前ですが
スマホアプリのギャラリーサイト5選

スマホアプリのUIを作る時に参考になるギャラリーサイトの中でも特に良いと思ったサイトを集めてみました。

# [Pttrns](http://www.pttrns.com/)

![スクリーンショット 2016-11-27 14.15.12.png](https://qiita-image-store.s3.amazonaws.com/0/100736/71828dc0-1a44-10fd-2f9f-d981196caec6.png)

iPhone, iPad, Apple Watch, Androidの4つに対応しているという時点で素晴らしいのですが、掲載量、カテゴリの充実性という点でも優れています。左メニューでプラットフォームとカテゴリ（画面の種類）を選択し、右メニューで並び替えやタグでの絞り込みをすることができます。

スクショにオンマウスをするとアプリ名、付いているタグ、カテゴリーが表示されます。クリックするとそのアプリの他のスクショを見ることができます（左上にアプリ名、アイコンが表示されています）。

![スクリーンショット 2016-11-27 14.23.12.png](https://qiita-image-store.s3.amazonaws.com/0/100736/8101073a-a09f-b400-8420-5fdf18579879.png)

![スクリーンショット 2016-11-27 14.35.21.png](https://qiita-image-store.s3.amazonaws.com/0/100736/c147adfd-2b27-1015-7ba6-fbd09ffc0133.png)

また、画面左上のDESIGN RESOURCESというタブをクリックすると、デザインに関する記事を閲覧することができます。

![スクリーンショット 2016-11-27 14.42.36.png](https://qiita-image-store.s3.amazonaws.com/0/100736/07c89840-2602-06af-b293-30ca903be1da.png)

# [Mobile Patterns](http://www.mobile-patterns.com)

![スクリーンショット 2016-11-27 14.47.26.png](https://qiita-image-store.s3.amazonaws.com/0/100736/7e34a2e2-c136-1a96-24c2-e0557ad3da36.png)

こちらもカテゴリ（画面の種類）ごとにたくさんのスクショが存在するサイトです。プラットフォームはiOS, Androidがあります。スクショをクリックすると拡大表示されます。

見た感じ、かなり古いスクショも存在しているようです（おそらくiOS6時代と思われるスクショもありました）。

# [MobileMozaic](http://www.mobilemozaic.com)

![スクリーンショット 2016-11-27 15.17.14.png](https://qiita-image-store.s3.amazonaws.com/0/100736/3f35e220-6a58-eda5-8142-b4a2650a7d46.png)

iPhone専用のギャラリーサイトです。カテゴリ（アプリの種類）で絞込ができます。アプリごとにスクショを見ることが出来て良いです。アプリ使用中の画面画像だけでなく、AppStoreに掲載している画像も載っているようです。

![スクリーンショット 2016-11-27 15.14.58.png](https://qiita-image-store.s3.amazonaws.com/0/100736/52ae5bfb-d099-3189-27c7-73ccc5b11ca1.png)

# [CAPPTIVATE.co](http://capptivate.co)

![スクリーンショット 2016-11-27 15.23.33.png](https://qiita-image-store.s3.amazonaws.com/0/100736/fbd11bb7-10ae-f351-3125-25c68ffdad68.png)

iPhoneアプリでアニメーションに困ったら参考にすると良いサイトです。マウスオーバーするとアニメーションが始まります。右上のプルダウンでパターン（画面の種類）、コンポーネントで絞り込むことができます。

# [UX Archive](http://uxarchive.com)

![スクリーンショット 2016-11-27 16.05.45.png](https://qiita-image-store.s3.amazonaws.com/0/100736/86ae1f4f-853c-7bfa-9f58-ebf02f98514f.png)

単純にiPhoneアプリのスクショが見られるというのではなく、ある行動に沿って見ることができます。画面左上のTasks、Appsから選択すると以下のような画面になります。

![スクリーンショット 2016-11-27 16.12.00.png](https://qiita-image-store.s3.amazonaws.com/0/100736/b06a5128-95d0-723b-8ec4-df83fdf535b0.png)

上記の場合は「購入」という行動に対して各アプリがどのように設計しているのかをスクショを通じて知ることができるようになっています。導線に迷った時はぜひ参考にしたいサイトです。
ChromeCustomTabs試してみました

#はじめに

二日目を担当させていただきます。
よろしくお願いします。

普段、Androidアプリの開発を担当しています。

ネイティブ化を進めていますが、
なんやかんやまだwebページを表示するという場合がまだあるのが現状なので、
試そう試そうと思ってできていなかった、ChromeCustomTabsについて書きます！

#ChromeCustomTabsを使ってみる

アプリでwebページを表示する際WebViewを使っていたのですが、
設定項目も多く結構自分で作り込まなければならない部分が多いのです...
（参考：[WebView](https://developer.android.com/reference/android/webkit/WebView.html)）

ユーザーがアプリを何気なく使っていて、
ムム！ここから急に遅い！って感じさせてしまうこともやはり良くない..


と、いうことでGoogle I/O 2015で発表された[ChromeCustomTabs](https://developer.chrome.com/multidevice/android/customtabs)です。（もう１年前..w）
高速で動くと聞いていたので、期待！

最低限だと、下記で動きます。


```groovy:build.gradle
dependencies {
    compile 'com.android.support:customtabs:23.1.1'
}
```


```java:MainActivity
CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();
final CustomTabsIntent tabsIntent = builder
        .setShowTitle(true)
        .enableUrlBarHiding().build();
tabsIntent.launchUrl(this, Uri.parse("url"));
```

導入はとっても簡単でした。
弊社の公式ページを表示してみました。


![bloggif_583e60c58408f.gif](https://qiita-image-store.s3.amazonaws.com/0/57568/17f1fa5a-0e42-0575-2c3b-3b28cd78ab17.gif)


ただ、これだと普通に外部ブラウザを開いた感ですよね。

#ChromeCustomTabsをカスタマイズしてみる

ちょっといじってみます！

・toolbar変更（せっかくなのでコーポーレートカラーにｗ）
・closeボタン変更
・アクションとしてシェア機能を追加
・下にスクロールした時にtoolbarを消す

これらを追加したのが、下記です。

```java:MainActivity
//シェア機能の処理
final Intent intent = new Intent(Intent.ACTION_SEND)
        .setType("text/plain")
        .putExtra(Intent.EXTRA_TEXT, "url");

final PendingIntent pendingIntent = PendingIntent.getActivity(this, 0, intent, 0);
final Bitmap icon = BitmapFactory.decodeResource(getResources(), R.drawable.ic_share);

CustomTabsIntent.Builder builder = new CustomTabsIntent.Builder();

//toolbarの色、閉じるボタン設定
final CustomTabsIntent tabsIntent = builder
        .setShowTitle(true)
        .setToolbarColor(ContextCompat.getColor(this, R.color.orange))
        .setCloseButtonIcon(BitmapFactory.decodeResource(getResources(), R.drawable.ic_arrow_back))
        .enableUrlBarHiding()
        .setActionButton(icon, "share", pendingIntent).build();

tabsIntent.launchUrl(this, Uri.parse("url"));
```
（参考：[CustomTabsIntent.Builder](https://developer.android.com/reference/android/support/customtabs/CustomTabsIntent.Builder.html)）


公式で速さの比較がされていましたが、真似して自分も３パターンを表示してみました。

左から、
①ChromeCustomTabsを使ってカスタマイズしたもの
②外部ブラウザで開いたもの
③WebView（最低限の実装だとうまく対応してくれなかったのでちゃんと開けずすみませんｗ
今回はwebviewが主役ではないので一旦これでｗ）




![bloggif_583e5f36d1b99.gif](https://qiita-image-store.s3.amazonaws.com/0/57568/0186fdd2-7bc5-4232-ea5f-5903ff6ae94b.gif)　![bloggif_583e6453d88ae.gif](https://qiita-image-store.s3.amazonaws.com/0/57568/7d9513bf-4b76-0af6-d674-f497faac35a0.gif) 　![bloggif_583e628fdada0.gif](https://qiita-image-store.s3.amazonaws.com/0/57568/8007c0bc-1000-d440-0745-8a0fc32b6bde.gif)

少しカスタマイズしただけですが、
最低限のものと比べるとアプリっぽく馴染んだかと思います。
速さは１ページだと若干伝わりにくいですかね？

違いが伝わってるかちょっと不安になってきましたが、
気にして見てもらえると、結構いろんなアプリで使われています！

#所感


今回は公式ページで試しましたが、ECアプリ等で途中までしかネイティブ化出来てない！
という時に違和感なく操作してほしい場合は、とても有効だと思いました！
アプリから離れてwebページに遷移したときに感じるストレスを軽減できそうです。

今後現場などで本格的に導入する場合は、
遷移のときにアニメーションを加えたり、まだまだやりようがありそうなので色々検討しようと思います。

余談ですが、gifを貼るのが地味に苦労しましたｗ
ちゃんと動いてるか不安ですｗ

簡単にはなりますが、以上です！


#明日の担当は

EichiSandenさん！
よろしくお願いします＾＾
また、合同ビアバなり飲み会なりしましょうｗ
スクラムについて勉強したことのまとめ１

#スクラムとは
アジャイルなソフトウェア開発を実践するためのフレームワーク。
常に進む方向を調整しながら目的を達成できるプロダクトをつくるために、全員が一丸となって行うべき作業、会議、成果物を定めたもの。

##役割について
###プロダクトオーナー
プロダクトバックログの管理の責任者をプロダクトオーナーと呼び、プロダクトについての責任者であり、開発チームを活用してそのプロダクトが生み出す価値を最大化する責任がある。

###開発チーム
プロダクトを作るために必要なすべての作業ができなければならない。
例えば、要求を分析する、設計する、コーディングする、サーバーを構築する、テストする、ドキュメントを書くといったこと。
「要求分析チーム」や「テストチーム」といった特定のことしか行わない専門のサブチームは作らない。
メンバーごとにできることが違ったり、能力に差があったりするが、作業を進めていく過程でなるべく複数のことをできるようになるのが望まれる。

###スクラムマスター
スクラムのルールや成果物、進め方をプロダクトオーナーや開発チームに理解させ、効果的な実践を促し、スクラムの外にいる人からの妨害や割り込みからプロダクトオーナーや開発チームを守る。
また、プロダクトオーナーや開発チームにスクラムのやり方を教えたり、会議の司会進行を行ったりするような先生役やトレーナーとして振る舞うことが求められる。
WindowsをDISMで回復させる

## ことのはじまり
Windows7を初期化する機会が僕にはある。しかも複数台。
Windows Updateにかかる時間:約半日 x 複数台。
**長すぎ！**
この時間が非常に無駄だったので短縮した。

## やること(大雑把)
 1. Update全部盛りのイメージを作ってしまう。
 1. 新PCにそれをコピーする。
 1. おわり。

一台だけだと効果が薄いが、何十台と初期化するなら有効。
また、イメージの中身は自由なので、俺々全部盛パックも作れるので、
リカバリ後のPCで即FPSとかも可能になる。
つまるところ、やっているのはCドライブの丸コピ。

## 必要なモノ
 * PC本体
 * それなりな容量を持ったUSBメモリ
 * 現在のデータ使用容量と同等以上の空き容量、もしくはHDD。
 * cmd.exeを見ても発作を起こさない程度の耐性
 * DISM /Apply-Image

## やること
 * Windowsをアップデートして最新にしておく。俺カスタムもココで。
 * ディスククリーンアップ等で不要なファイルを削る。
 * WindowsPEブートディスクを作成する。
 * 【他PCに展開する場合】sysprep.exeで標準化する。
 * イメージを保存する。  
   WindowsPEでPCを再起動させて、出てきたコマンドラインツールで以下のコマンド入力。  
   ``Dism /Capture-Image /Name:MyWindows /Imagefile:<保存先>.wim /CaptureDir:<Windowsディレクトリ> /Compress:maximum``
 * 【余裕のある人は】更にイメージを圧縮する。
   ``Dism /Export-Image /SourceImageFile:<さっき保存した>.wim /SourceIndex:1 /DestinationImageFile:<保存先>.esd /Compress:recovery``
   Microsoftの謎技術により結構な圧縮になる。

 * リカバリ用CD-ROM作っておく。
   何かあった時に起動できなかったらどうしようもないので起動できるように。
 * 作ったwimかesdファイルを別ディスクへ避難させておく。
   何かあった時に参照できなかったらどうようもないｎ(ry

 * イメージを展開する。
  WindowsパーティションをDISKPARTなりで作成、
  ``DISM /Apply-Image /Imagefile:<wimかesdファイルへのパス> /Index:1 /Applydir:<Windowsパーティションへのパス>``
  後はコピーされるのを待つだけ。


…以上、超おおざっぱですが。
いまいちどういう風に書けばいいのかわかってないので、コメントとかでつっこまれたらまた書きたいな。


## 自己紹介(アバウト)
 * @0Delta(ぜろでるた)
 * 2016/3, HAL名古屋ゲーム制作学科卒業
 * 男性
 * 現在某ゲーム会社でインフラ勉強中
 * 既婚
 * ~~巫女さん~~
Fess クローラのスケジュール管理

Fess 10.3 曜日別にクロールするように設定してみました。
#クロール設定
曜日ごとに実施するウェブクロールとファイルシステムクロールを設定します。
ウェブクロールとファイルシステムクロールはあらかじめ作成しておきます。

| 曜日       | ジョブ       | ウェブクロール       | ファイルシステム    |
|:-----------------|:------------------|:------------------|:------------------|
| 月  | Crawl - 1_Monday  | 1_Monday_Fess10.2 | 1_Monday_Files |
| 火  | Crawl - 2_Tuesday  | 2_Tuesday_Fess10.1 | 2_Tuesday_Files |
| 水  | Crawl - 3_Wednesday | 3_Wednesday_Fess10.0 | 3_Wednesday_Files |
| 木  | Crawl - 4_Thursday | 4_Thursday_Fess9.4 | 4_Thursday_Files |
| 金  | Crawl - 5_Friday | 5_Friday_Fess9.3 | 5_Friday_Files |
| 土  | Crawl - 6_Saturday | 6_Saturday_Fess9.2 | 6_Saturday_Files |
| 日  | Crawl - 7_Sunday | 7_Sunday_Fess9.1 | 7_Sunday_Files |


#曜日別スケジューラ作成
曜日別に実行するスケジューラを作成します。

ウェブクロール設定の画面を開き、「新しいジョブを作成」ボタンをクリックします。
<img width="917" alt="スクリーンショット 2016-11-21 21.32.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/31616/397055af-270f-89db-6875-d624b3e1dec9.png">

スケジューラのジョブ作成画面が開きます。
![スクリーンショット 2016-11-21 22.12.25.png](https://qiita-image-store.s3.amazonaws.com/0/31616/c52f1192-3ea3-bffd-e0c1-d17b9cc90dd9.png)
・「名前」はファイルシステムクロールも追加するので「Crawler - 1_Monday」に変更
・「スケジュール」は「0 12 * * 1」(毎週月曜の12:00pm実行)に変更
・「作成」ボタンをクリック
月曜日~日曜日までのジョブを作成します。

・スケジュール

| 分 | 時 | 日 | 月 | 曜日 |
|:---|:--|:---|:---|:------|
| 0  | 12  | *  | *  | 1(月曜日)~7(日曜日)  |


###ジョブスケジューラにファイルシステムのクロールを追加
クローラ>ファイルシステム>「1_Monday_Files」をクリック>ファイルクロールの設定
IDの値(例：AViGcYjc6GxYx34SRxUw)をコピーします。
システム>スケジューラ>「Crawler - 1_Monday」をクリック>ジョブの詳細>「編集」ボタンをクリック
「スクリプト」を変更します。

```java:
return
container.getComponent("crawlJob").logLevel("info").sessionId("AViGySvQ6GxYx34SRxU8")
.execute(executor, ["AViGySvQ6GxYx34SRxU8"] as String[],[] as String[],[] as String[], "");
```

2つ目の`[] as String[]`にコピーしたIDの値を追加します。

```java:
return
container.getComponent("crawlJob").logLevel("info").sessionId("AViGySvQ6GxYx34SRxU8")
.execute(executor, ["AViGySvQ6GxYx34SRxU8"] as String[],["AViGcYjc6GxYx34SRxUw"] as String[],[] as String[], "");
```

「更新」ボタンでジョブを更新します。

![スクリーンショット 2016-11-21 23.03.55.png](https://qiita-image-store.s3.amazonaws.com/0/31616/eaff797d-2066-f5d4-419e-1a8fbb8e0fb0.png)

作成したジョブを開始させれば曜日別にクロールが実行されます。

- スクリプトの`[] as String[]`
 - 1つ目はウェブクロール
 - 2つ目はファイルシステムクロール
 - 3つ目はデータストアクロール

`["ID1", "ID2"] as String[]`と複数記述することもできます。

ジョブのスケジュールで時間別に実行を分けたり、
ウェブやファイルシステムなどのクロールをまとめて実行するなど
用途に応じてスケジュールを設定してみましょう。
重要なのは優れたコードではなく上が納得するコード

下請けCOBOLERとして生きていた頃のノウハウ Advent Calendar 2016　二日目の記事です。



　自分がいた現場ではソースはすべてコメントをつけてバックアップしていました。

例えば

```cobol:sample.cob
select a,
       b,
       c
 from hoge;
```

とあった場合に、ｄもセレクト対象となったとしましょう。

その場合は以下のように書かなければなりません。
*はコメントという意味です。

```cobol:sample.cob
select a,
       b,
*** 2016/12/3 IRN7777対応 [派遣先会社名]誰々  MOD START ****
*      c
       c,
       d
*** 2016/12/3 IRN7777対応 [派遣先会社名]誰々  MOD   END ****
 from hoge;
```


こうなります、ある日、エンジニアのCさんは気を利かせてこう書きました。

```cobol:sample.cob
select a,
       b,
       c
*** 2016/12/3 IRN7777対応 [派遣先会社名]誰々  MOD START ****
      ,d
*** 2016/12/3 IRN7777対応 [派遣先会社名]誰々  MOD   END ****
 from hoge;
```

こうすれば修正する行数も少なくて済むし、今後eやfが入ってきたときもコメントがごちゃごちゃしませんよね？

しかし、これが論争となりました。

上の人曰く。「いきなり書き方を変えられては困る。どうして書き方を変えたのか説明できない」というのです。

エンジニアの方の言い分としては修正行数が少なくて済む、今後追加されたときにも備えられると何度も言っているのですが、聞く耳なし

結果的にエンジニアさんが折れて前の書き方に習った対応をしていました。


どちらが正しいのかといえば、断然前者だと思います。
しかし、30分以上も同じ言い争いをして、二人合わせて工数1Hを失い、しかも職場も雰囲気が悪くなるし自分の主張は認められない。
そうであるなら後者が断然正解になります。

select文の,を前につけるか、後につけるかそんなことも変えられない現場なのでとにかく前に習え以外のすべての行動が禁止されます。
 
余計なことは考えず、前に習えの姿勢で行きましょう
もし仮に、リーダーが替えた方がいいじゃんと言って来たら愛想笑いを浮かべながらそうですねと言って言われた通りに直しましょう。
(不思議なことに元から前に[,]が付いていたらそれに従うのが正解となります。)
Serializablitiyとは？ １. Final State Serializabilityについて

## Serializableとは何か

複数のトランザクションの実行スケジュールが渡された時、その挙動について論じる際の基準の１つがSerializabilityである。と、単純に一言で片付けば良いのだけれど実際にはこの中にも複数の階層と紆余曲折がある。それらについて追っていく。

### Final State Equivalency

さて、Writeする値はそのトランザクションがそれまでにReadしてきた値から算出された値なので、Write操作は「そこまでのReadを引数に取る多引数関数」と見なす事ができる。説明上、トランザクションの数字と関数に付ける識別子を揃えて表記する。例えばTx1が実行する操作を多引数関数で表す時はF1を用いる。そしてReadは「その前に行われたWriteの結果そのもの」と見なせるので、例えばxの最終状態についてこのように書き下す事ができる。

```
x = Write(x)   # xの最終状態はxにWriteした結果だから
  = F4(Read(z))  # zの値を読んで何らかの関数F4を行った結果だから
  = F4(Write(z)) # Read(z)される値はその前にWrite(z)した結果だから
  = F4(F1(Read(x), Read(y)))  # zはxとyの値を読んで何らかの操作F1を行った結果だから
  = F4(F1(x0, y0))  # xの最終状態はxとyの初期状態に関数F1とF4を適用した結果である
y = F2(x0)  # 途中式省略
z = F3(z0)  # 途中式省略
```

こうやって全部の値に対して操作を書き下していくと最終状態を**初期状態と関数の式**で表現する事ができる、この式の事を専門用語で**「エルブランセマンティクス」**と呼ぶ。2つのスケジュール図が与えられた時に全部の値に対してエルブランセマンティクスが一致すれば、2つのスケジュール図は全く同じ結果に至る事がわかる。これを**Final State Equivalent**と呼ぶ。
一見して別物に見える以下のスケジュール図も

![compl2.png](https://qiita-image-store.s3.amazonaws.com/0/1716/e4e791c7-e966-8ba5-24b0-5fff9d57d1e5.png)

エルブランセマンティクスを整理すれば

```
x = F4(F1(x0, y0))
y = F2(x0)
z = F3(z0)
```

となる。これは上の図と全く同一なので、この二つのスケジュールは**Final State Equivalent**である。

もちろんトランザクションを何らかの順で1つずつ直列(Serial)に実行した場合にもエルブランセマンティクスは定義できる。

![serial.png](https://qiita-image-store.s3.amazonaws.com/0/1716/7ebbc354-8515-8afe-8813-b0513f8b4a8d.png)

このスケジュール図の通りに実行した結果から得られるエルブランセマンティクスは、先ほどのエルブランセマンティクスと(たまたま)完全に一致しているので**Final State Equivalent**である。このように「1つずつ直列に実行した」スケジュールと**Final State Equivalent**な場合に対して特別に**Final State Serializability**(以下**FSR**)と呼ぶ。
Serializableというのは「**直列に実行した場合と同じ結果となる**」と言い換えても良い。

さて苦労して定義した**FSR**だが実用的ではない。何故なら最終状態のエルブランセマンティクスしか相手にしていないので、例えば以下のトランザクション群の場合に困った事になる。

Tx1: Read(x) Write(y)
Tx2: Read(y) Write(x)
Tx3: Write(x) Write(y)

極端な例だが以下のようなスケジュール図が作られたとする。

![inbw.png](https://qiita-image-store.s3.amazonaws.com/0/1716/6dba0375-449a-6b50-e994-8ddbc1c8f2bd.png)

```:↑のエルブランセマンティクス
x = F3()
y = F3()
```

である。Tx3が何も読まずに値を書いたので何らかの定数を書き込んだ事になっており、そこより前のトランザクションの結果は有っても無くてもグチャグチャでも構わない事になってしまう。実際にはTx1とTx2の間でWrite Skew Anomaly(詳細は後日)という矛盾が起きているにも関わらず、以下のSerial実行とEquivalentである。「終わりよければ全てよし」というか「終わりだけ一致していれば途中経過がどうなってもおかまいなし」に近い。

![inbw2.png](https://qiita-image-store.s3.amazonaws.com/0/1716/88fe3ad1-8ec0-14a3-0e05-bb065b5d80d7.png)


```:↑のエルブランセマンティクス
x = F3()
y = F3()
```


他にも、Read Onlyなトランザクションが居た場合、そのトランザクションが一貫性の無い値を読んだとしても**FSR**は成立してしまう。

さらには、2つのスケジュール図が**Final State Equivalent**であることを示すためにはそれぞれのスケジュールに登場した値のエルブランセマンティクスを追い、一致しているかを確かめれば良いので多項式時間で完了させることができる一方で**FSR**を満たしているかどうかをチェックするためには、トランザクション数Nに対して**N!パターン**ある逐次実行パターンとそれぞれ一致するかを比較する他無く、実用的な速度が出ない。そもそもこれ単品では研究上では実用とされているモノを見たことがないが、議論の出発点として理解しやすいのでよく引き合いに出される。
AndroidStudio でコードの断片を実行しちゃう。

# 断片的なコード
僕らの愛する `Java` は少しワガママです。ちょっとしたコードを試してみたいだけなのに `Java` はそれを軽々しく許してはくれません。
<img width="250px" alt="ファイル名" src="https://qiita-image-store.s3.amazonaws.com/0/146947/820f97a7-09c3-0740-2293-d4952efc2c1e.png"/>
`Java` は処理を必ずどこかのクラスの中に含めなければならないのです。
文字列を `substring` したくて、そのときの `index` の指定がどうなるかちょーっとだけ試したいだけなのに、わざわざクラスを作るのはとてもめんどくさく、そして大げさすぎます。

# Eclipse
そこに `Eclipse` は颯爽と現れ、わがままな `Java` に振り回される僕らにこう言いました。
<img width="250px" alt="ファイル名" src="https://qiita-image-store.s3.amazonaws.com/0/146947/4fcf57c4-bd82-1f4e-8cc4-1f69cd91ab74.png"/>
「ぷっ。わたしならクラス作らなくてもできるけど？」

## スクラップブックページ
![スクリーンショット 2016-11-18 16.26.02.png](https://qiita-image-store.s3.amazonaws.com/0/146947/a822db52-1be1-ef40-909e-5f67a8bdab2c.png)
言わずと知れたスクラップブックページです。こいつを使用すると断片的なコードをそのまま実行することができるのです。`Eclipse` を伴侶とされている方々は、たまにその顔を見ることがあるのではないでしょうか。

# AndroidStudio
さて `Eclipse` を生涯の伴侶と心に誓ってはいたはずなのに、周囲で起きる様々な問題にどうすることもできず、泣く泣く `Eclipse` から離れ `AndroidStudio` の元へ足しげく通うようになったみなさん。
<img width="250px" alt="ファイル名" src="https://qiita-image-store.s3.amazonaws.com/0/146947/f27dc852-1fa8-7859-91d3-7955bcdd7814.png"/>
どうですか。昔のあいつの顔、見たくないですか。

## Groovy Console
`AndroidStudio` にも、同じものとはいかないまでも、同じようなことができる機能があります。
<img width="250px" alt="ファイル名" src="https://qiita-image-store.s3.amazonaws.com/0/146947/eb59db40-2443-8eec-b524-21e269b91f0e.png"/>

それが `Groovy Console` です。ここは `Groovy` のコードを実行するための場所なので、当然同じものというわけではないんですけど。

## 起動
起動方法は `command` + `shift` + `a` で表示されるウィンドウの入力欄に `groov...` と入力してみると現れます。`Windows` だとなんて入力すればいいんでしょうか。~~きっと `AndroidStudio` で覚えておくと便利なショートカット集的な記事にあると思いますので各自にお任せしますね。~~

<img width="500" alt="スクリーンショット 2016-11-18 16.47.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/146947/eedfeb10-15f6-1f6c-d084-71d57795df19.png">

## 実行
そして現れるエディタ（？）部分にちょちょいとコードの断片を書き、緑三角の `run` ボタンを押すと実行することができます。
![スクリーンショット 2016-11-18 17.14.15.png](https://qiita-image-store.s3.amazonaws.com/0/146947/d57e28f4-a161-894e-fc3f-be0c920b69d2.png)

## クラスパス
また、ディレクトリのようなアイコンをクリックするとクラスパスを通すダイアログが現れるので、断片コード内にとあるプロジェクトに存在するクラスを `import` することも可能になります。おお。
<img width="420" alt="スクリーンショット 2016-11-18 17.16.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/146947/dcfd5d8a-cce0-3ac3-bec0-a4b2abb5cfef.png">

# おわりに
というわけで、大多数の人は当たり前に使っている機能なんだと思いますが、なんとつい最近まで僕は気づいておらず、もしかしたら他にもそんな人がいるのではないかと思い、非常に軽い気持ちで書いてみました。

<img width="250px" alt="ファイル名" src="https://qiita-image-store.s3.amazonaws.com/0/146947/7347f28c-11b2-6f9d-0b93-e13e52cb4a03.png"/>

しかし、[いらすとや](http://www.irasutoya.com/)さんの画像はかわいいですね。
嗚呼、歯が痛い。
Ansible 2でSSHまわりの設定をinventoryで管理しつつ多段SSHする話

## tl;dr

2段以上ホップする多段SSH設定をinventoryで指定するなら、ProxyCommand用のシェルスクリプトを用意する。

## inventoryとは（おさらい）

[Inventory — Ansible Documentation](http://docs.ansible.com/ansible/intro_inventory.html)より

- Ansibleで構成管理するホスト情報などを設定しておくもの
- デフォルトは `/etc/ansible/hosts` を利用するけど、 `-i <paht>` で指定できる
- クラウド上のリソースから動的にinventoryを取得する[Dynamic Inventory](http://docs.ansible.com/ansible/intro_dynamic_inventory.html)という機能もある
 - 今回は詳細を割愛
- 単一のファイルに全情報を記載するのではなく、hostごと / groupごとの inventory を用意することもできる

## SSHまわりの設定をinventoryで管理する話

以下のページに、inventoryで指定できるパラメータ一覧があります。

[List of Behavioral Inventory Parameters](http://docs.ansible.com/ansible/intro_inventory.html#list-of-behavioral-inventory-parameters)

SSH用の色々な設定をinventoryで管理できます。

Ansibleを実行したあとで確認のために結局SSHしたりするので、
あまりInventoryで全部を管理することもないと思いますが `git clone` してすぐデプロイできたり便利かもしれません。
（各々でssh_configを設定するところが属人化しちゃうのを、どうにかしたいと思いました。）

私がハッとしたのは `ansible_ssh_common_args` というパラメーターで、多段SSHするための `ProxyCommand` を設定できたことです。

ただ、以下のように2段以上ホップするときにinventoryでは1つのProxyCommandしか指定できないことに気づきました。

```
[ Local ] -> [ Proxy A] -> [ Proxy B ] -> [ Target host ]
```

そこでSSH自体のProxyCommandについて深掘りしてみると、以下のブログとマニュアルを見つけました。

- （参考）[多段 ssh / rsync するために ProxyCommand を使ってみる - daily dayflower](http://d.hatena.ne.jp/dayflower/20080204/1202457379)

> コマンドは基本的にどのようなものでもかまいませんが，標準入力から入力をうけつけ標準出力に出力するものである必要があります。そして最終的にはどこかのマシンで動いている sshd サーバや inetd 経由の sshd -i に接続する必要があります

- （参考）[OpenBSD manual pages](http://man.openbsd.org/OpenBSD-current/man5/ssh_config.5)
 
> The command can be basically anything, and should read from its standard input and write to its standard output. It should eventually connect an sshd(8) server running on some machine, or execute sshd -i somewhere.

ProxyCommandは実はどんなものでもよくて、標準入力と標準出力をつないで最終的にどこかにSSHすればいいということで
inventoryで指定するProxyCommandをあるシェルスクリプト実行のコマンドにしました。

```
[target]
target001 ansible_host=zzz.zzz.zzz.zzz ansible_user=root ansible_ssh_private_key_file=/path/to/secret/key.pem ansible_ssh_common_args='-oProxyCommand="./proxy.sh"'
```

シェルスクリプト内部で好きなだけProxyCommandを指定することで、何段でもホップすることが可能になります。
以下のサンプルではncコマンドを使っていますが、`ssh -W` でもいけると思います。

```shell
#!/bin/sh

ssh -i /path/to/secret/key.pem -p 22 -oProxyCommand="ssh -p 22 root@xxx.xxx.xxx.xxx nc yyy.yyy.yyy.yyy 22" root@yyy.yyy.yyy.yyy nc zzz.zzz.zzz.zzz 22
```

inventoryで指定した `ansible_host` が意味なくなるのでは、とか色々とツッコミどころがありそうですが、とりあえずワークアラウンド的に２段以上のホップができるようになりました。

役立つ場面がすごく限られますが、誰かの役に立てると幸いです。
【入門者必見】新しくなった GStreamer documentation が熱い

新しくなりました 
-------------------
=> https://gstreamer.freedesktop.org/documentation/

<blockquote class="twitter-tweet" data-lang="ja"><p lang="en" dir="ltr">New docs site now live at <a href="https://t.co/ET1cB74Co8">https://t.co/ET1cB74Co8</a> - new design and new tutorials - hope you like it! Thanks to all who helped make it happen</p>&mdash; GStreamer (@gstreamer) <a href="https://twitter.com/gstreamer/status/803585846670725120">2016年11月29日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

イマドキのページとは程遠かったGStreamerのドキュメントページが一新され、とても見やすくなりました:tada:

そして、私の記事でも何度か登場していた[GStreamer SDK documentation](https://gstreamer.freedesktop.org/documentation/tutorials.html) は閉鎖 :open_mouth:

> GStreamer SDK documentation
> 
> https://gstreamer.freedesktop.org/documentation/tutorials.html

↑と同じ内容がGStreamer1.0 対応となりtutorials ↓へとマージされています :blush:

> Tutorials | GStreamer documentation
>
> https://gstreamer.freedesktop.org/documentation/tutorials/index.html

これでどのページを見ればいいの?? と思うことが減りましたね♪


これから始める人へ
----------------

GStreamer documentation が新しくなっても、私がおすすめする入り口は変わりません。

まずは Application Development Manual を読む (座学)
※ GStreamer としてもコレが **Read this first**

> Application Development Manual
>
> https://gstreamer.freedesktop.org/documentation/application-development/index.html

そして、Basic tutorials をやる (実習)

> Basic tutorials
>
> https://gstreamer.freedesktop.org/documentation/tutorials/basic/index.html 

とはいっても、座学があまり好きではなく、実習好きな人も一定数います。
そんな人は Basic tutorials -> Application Development Manual で良いと思います:ok_hand:
Dockerfile の INSTRUCTION を自動で大文字で入力する

この記事は [Akatsuki Advent Calendar 2016](http://qiita.com/advent-calendar/2016/aktsk) の 2 日目、および [Vim Advent Calendar 2016 (その2)](http://qiita.com/advent-calendar/2016/vim2) の 2 日目、および [Docker2 Advent Calendar 2016](http://qiita.com/advent-calendar/2016/docker2) の 2 日目の記事です。

Dockerfile 書いてますか? 私はいつも Vim で書いています。

さて、Dockerfile の INSTRUCTION、いわゆる `FROM` とか `RUN` とかのアレですが、大文字小文字は区別しないとしつつも、大文字で書くことが推奨されています。

https://docs.docker.com/engine/reference/builder/#/format

> The instruction is not case-sensitive. However, convention is for them to be UPPERCASE to distinguish them from arguments more easily.

しかし、毎回大文字で入力するのは面倒ですね。というわけで自動で大文字になるような設定をします。

## 自動で大文字にする設定

最新の Vim (少なくとも Vim 8.0 以降) では、`Dockerfile` は自動で filetype dockefile として認識されます。そこで、dockerfile 向けの ftplugin の設定を作りました。

以下のファイルを、Vim の runtimepath 以下に置きます。Windows の場合は `~/vimfiles/ftplugin/dockerfile.vim`、それ以外の環境の場合は `~/.vim/ftplugin/dockerfile.vim` です。

```vim:ftplugin/dockerfile.vim
function! s:head(str)
  let col = col('.')
  let head = matchstr(getline('.'), '\c^\s*\%(ONBUILD\s\+\)\?')
  let col -= len(head)
  if col - 2 < len(a:str)
    return toupper(a:str)
  endif
  return a:str
endfunction

for s:instruction in [
\   'from',
\   'maintainer',
\   'run',
\   'cmd',
\   'label',
\   'expose',
\   'env',
\   'add',
\   'copy',
\   'entrypoint',
\   'volume',
\   'user',
\   'workdir',
\   'arg',
\   'onbuild',
\   'stopsignal',
\   'healthcheck',
\   'shell',
\ ]
  execute 'inoreabbrev <buffer> <expr>'
  \ s:instruction
  \ printf('<SID>head(%s)', string(s:instruction))
endfor
```

Vim には短縮入力([:help abbreviations](http://vim-jp.org/vimdoc-ja/map.html#abbreviations))という機能があり、一定のルール内で入力を矯正する設定を作ることができます。
この設定では、各行の行頭で入力したものが小文字の INSTRUCTION だった場合に、それを自動で大文字にしています。ついでに `ONBUILD` の後の INSTRUCTION にも対応しています。

![dockerfile.gif](https://qiita-image-store.s3.amazonaws.com/0/551/71ba6cc5-4b03-56db-c2f4-38f601040104.gif)

Happy Vim and Docker Life!
字間（カーニング）に対応するUILabelを実装する（IBDesignable/IBInspectableを活用する）

UILabelでカーニング（字間）に対応する必要があったため、いろいろ調べた所……。
こんな参考資料（[StackOverflow](http://stackoverflow.com/questions/32828140/how-do-you-adjust-text-kerning-using-interface-builder-in-xcode-7)）が見つかったので、早速やってみました！

![スクリーンショット 2016-12-01 15.33.32.png](https://qiita-image-store.s3.amazonaws.com/0/75329/c45964ba-f977-1a19-2d3f-cfb646a44521.png)


# 字間（カーニング）に対応したUILabelを実装する

## KerningLabelを実装

まず、StackOverflowに則って、KerningLabel.swiftを実装します。
(Swift4対応してくださった@zizi4n5さんに感謝いたします！)

```Swift:KerningLabel.swift
import UIKit
@IBDesignable
class KerningLabel: UILabel {
    @IBInspectable var kerning: CGFloat = 0.0 {
        didSet {
            if let attributedText = self.attributedText {
                let attribString = NSMutableAttributedString(attributedString: attributedText)
                attribString.addAttributes([.kern: kerning], range: NSRange(location: 0, length: attributedText.length))
                self.attributedText = attribString
            }
        }
    }
}
```

* **`@IBDesignable`**でクラスの実装を始めると、Interface Builderでパラメータを調整できるViewを作ることができます！
* **`@IBInspectable`**から書き始めて定義する箇所は、Interface Builderでパラメータ入力が可能になります！対応している型は下に書いておきます。

## UILabelのCustom Classとして設定

実装が終わったら、Interface Builder側で作業です。
StoryboardやViewに置いたUILabelを選択し、Custom ClassにKerningLabelを設定します。

![スクリーンショット 2016-12-01 15.13.13.png](https://qiita-image-store.s3.amazonaws.com/0/75329/fc6adf9d-95eb-c5f5-2b4e-1024831cab2f.png)

## 好みのKerningを設定

Custom ClassにKerningLabelを設定すると、UILableのInspectionに「Kerning」の項目が追加されます。
あとは、好みのパラメータを設定すれば、完璧です！

![スクリーンショット 2016-12-01 15.15.21.png](https://qiita-image-store.s3.amazonaws.com/0/75329/cb9eaedc-9d7a-43d6-d5a4-4084d4c12451.png)

できたー！
ちなみにこの機能、Live Renderingって言うらしいよ！

# IBInspectableが対応している型

なお、IBInspectableで対応している型は、以下の通りとのこと。

* Int
* CGFloat
* Double
* String
* Bool
* CGPoint
* CGRect
* UIColor
* UIImage

このサイトがわかりやすい（[We ❤ Swift](https://www.weheartswift.com/make-awesome-ui-components-ios-8-using-swift-xcode-6/)）
UI実装の作業効率も上がるし、なにより面白い！！

みなさんも、IBDesignableなクラスを実装して、UI実装を効率化しましょう!（これが結論？）
リモートワークと子育て

子育て AdventCalender2016 の２日目。
今年の7月から週２日リモートワーク（在宅勤務）で仕事をしています。
家にいるときの仕事のやり方にも慣れてきて、１日の流れも定型化されてきたので
私のリモートワークでの１日のタイムスケジュールを紹介します。

### 家族構成
私：エンジニア
妻：フルタイムで働いている（エンジニアではない）
長女：小４
次女：5歳

### リモートワークの１日のタイムスケジュール
6:30 妻と子供たち：起床、朝食や朝の支度
7:30 妻：仕事へ出発　私：起床、朝食や朝の支度
7:50 長女：小学校へ出発
8:15 次女を保育園へ送る
8:30〜10:00まではだいたい↓をしてることが多い

- 妻が朝洗濯機を回して仕事へ行くので、洗い終わった洗濯物を干す
- 学習(読書)や調べ物
- 仕事
- ゆっくりする

10:00 Skypeで朝会（デイリースクラム）
10:30 仕事
13:30 昼食。昼食は家にあるもので済ませる。昨日の夕飯の残りや、インスタント食品が多い
14:00 仕事
15:00〜16:00 長女が小学校から帰ってくる。長女は遊びor習い事に行く。私は引き続き仕事
17:45 次女を保育園に迎えに行く
18:00〜21:00頃まではだいたい↓をしてることが多い

- 洗濯物をとりこむ
- 米を炊く。余力があれば味噌汁を作る
- 浴槽を洗ってお湯を入れる
- 皿洗いをする
- 子供とお風呂に入る
- 夕飯
- ゆっくりする

21:30 子供たち就寝。 私はいつでも寝られるように歯を磨いてから、少し仕事する。
就寝はだいたい23:00〜24:00頃。あまり遅くならないように気をつけている。眠たくなったら寝ることにしている。

### リモートワークと子育て
何にせよ子供は風邪をひきまくる生き物です。リモートワークという選択肢がなかったときは、子供の具合が悪くなるたびに、私か妻のどちらかが有休を取っていました。仕事が忙しいときは、妻も私も休みにくいため、とても悩ましい問題でした。

リモートワークという選択肢があれば、有休を取らずとも（子供の面倒を見ながらになりますが）仕事ができます。会社でミーティングがあればSkypeで参加したり、Slackでコミュニケーションをとることもできます。

下記は、先日、次女の具合が悪くなったときに、Slackの勤怠連絡用チャンネルに投げた私の投稿です。
![スクリーンショット 2016-12-01 12.31.51.png](https://qiita-image-store.s3.amazonaws.com/0/49022/ddcc5170-a611-533a-65a6-f93577671a0e.png)

会社からの返信は、`承知`の絵文字だけ。
便利な時代になりましたね。
Scala から FXML を読み込んでフォームアプリケーションを作る

以前「Scala fxml」と検索したら、手動でイベントハンドラを登録したりしていてややこしかったので、シンプルに Scala から .fxml を読み込んでハンドラを登録するだけの記事を書きました。

## 流れ
やることは以下の 3 つです。

1. .fxml ファイルを用意する
1. コントローラーを書く
1. .fxml ファイルを読み込んでコントローラーを登録する

import 文などは適宜追加してください。
一応 [GitHub のリポジトリ](https://github.com/y-takashina/scala-javafx)に雛型をおいてあります。

## .fxml ファイルの用意
FXML は、JavaFX で使われる GUI のマークアップ言語です。
[GLUON Scene Builder](http://gluonhq.com/labs/scene-builder/) などを使えばとても簡単に GUI を作成することができます。

今回はとりあえずこんな感じのフォームにします。

![preview.png](https://qiita-image-store.s3.amazonaws.com/0/117994/4151b9e5-aa02-732c-d526-4c0225d93b1f.png)

BorderPane の上に Button と Label が置いてあるだけです。
アプリケーションを作ることそのものが目的ではないので……。
中身はこんな感じです。

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.BorderPane?>

<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1">
   <left>
      <Button fx:id="button1" mnemonicParsing="false" onMouseClicked="#button1_MouseClicked" text="Button" BorderPane.alignment="CENTER" />
   </left>
   <center>
      <Label fx:id="label1" prefHeight="17.0" prefWidth="265.0" text="Label" BorderPane.alignment="CENTER" />
   </center>
</BorderPane>
```

`fx:id` というプロパティが、コントロールを入れる変数に使われます。
`onMouseClicked` などのプロパティは、イベントハンドラを登録するさいにメソッド名として使用されます。

## コントローラーの設定

```scala:MainController.scala
object MainController {
  @FXML
  private[this] var button1: Button = _
  @FXML
  private[this] var label1: Label = _

  @FXML
  private[this] def button1_MouseClicked(e: MouseEvent): Unit = {
    label1.setText("Hello, world!")
  }
}
```

今回はシンプルに、ボタンを押したら Label の表示が "Hello, world!" に切り替わるようにしました。

`@FXML` アノテーションを付けることで、.fxml ファイル読み込み時に変数がインジェクションされる仕組みのようです。
変数名やメソッド名が、.fxml ファイルのプロパティに対応していることに注意してください。

## FXML を読み込んでコントローラーを設定する

```scala:Main.scala
object Main extends App {
  Application.launch(classOf[Main], args: _*)
}

class Main extends Application {
  override def start(primaryStage: Stage): Unit = {
    val loader = new FXMLLoader(getClass.getResource("main.fxml"))
    loader.setController(MainController)
    val root: Parent = loader.load()

    val scene = new Scene(root, 800, 500)
    primaryStage.setTitle("GUI test")
    primaryStage.setScene(scene)
    primaryStage.show()
  }
}
```

重要なのは以下の 2 行です。

```scala
val loader = new FXMLLoader(getClass.getResource("main.fxml"))
loader.setController(MainController)
```

1 行目で main.fxml を読み込み、2 行目でコントローラーを設定しています。
なお、この書き方は JDK8 以降でのみ有効です。以前プロジェクト設定が JDK7 になっていることに気づかず、永遠に型が解決されなくて苦しんだので注意してください。

これでフォームの見た目の作成と、イベントハンドラの登録ができました。
実際に動かすと、以下のようになります。きちんと実行できていますね。

![form.gif](https://qiita-image-store.s3.amazonaws.com/0/117994/c5aec0e4-ea79-cbf5-2cd1-a3b47fcd2851.gif)

## おわりに
というわけで Scala アドベントカレンダー 2 日目でした。地味な記事ですみません。
まだまだ始まったばかりですが、個人的には Spark とか機械学習の記事が楽しみです！
conoha vpsでサーバーを立てて開発環境にする(第一歩)

# conoha vpsを利用して、Androidから接続してみる

この記事は[ConoHa Advent Calendar2016](http://qiita.com/advent-calendar/2016/conoha)の2日目の記事です。

初めて書くので、ドッキドキしてます。

完全に趣味で行った作業のメモなので、過度な期待はしないでください・・・

[1日目の記事](http://qiita.com/rinri_suzu/items/a5c3b8f412834eab05f9)が素晴らしく、みすぼらしく見えますが生暖かい目で見て頂けると幸いです。

## 目的

- ゆくゆくはZ4 Tabletを使用してこのは上で開発をしてみたい

## 第一歩として

- JuiceSSHというアプリをgetしてsshコマンドを実行できる環境を手に入れる
- PCから秘密/公開鍵を作成し、conoha vps上に設置
  - できればZ4 Tabletだけで行いたかったが、ちょっと大変そうなのでmacを使用
- evernoteとかcloudサービスを使用して、鍵の中身をタブレット側に見れるようにする
  - ここはセキュリティ的にどうなのよって思われますが、方法が思いつかなかったんです・・・

## 手順

- conoha VPSにてサーバー作成
  - 皆もうアカウントは持ってるよね？
- 作成するときに項目にあるSSHの使用有無はお好みで
  - 今回僕は使用しましたが、なくてもできるはずです
  - ssh設定する人は[公式](https://www.conoha.jp/guide/vps_sshkey.php)をみてね！
- macで鍵を作成
  - ```ssh-keygen```
- conohaで作ったサーバーのIPアドレスを取得して、sshでログイン
  - 最初はrootユーザーで大丈夫です
  - ```ssh root@xxx.xxx.xxx.xxx```
- ユーザーを追加しましょう
  - ```adduser 追加したいユーザー名```
  - 下記はとりあえずEnter押下で
```
Enter the new value, or press ENTER for the default
Full Name []:
Room Number []:
Work Phone []:
Home Phone []:
Other []:
```
  - ```Is the information correct? [Y/n] Y```
- 追加したユーザーにsudoを付ける
  - 今回使用しているOSはubuntuなので、suduの部分がcentOSはwheel?に変わるのでお気をつけください
  - ```gpasswd -a 追加したユーザー sudo```
- 一旦conohaのサーバーから抜けます
- 作成しておきた鍵をscpコマンドで設置します
  - conohaサーバーのIPを間違えないように注意です
  - ```scp /path/to/ssh/作成した鍵.pub root@xxx.xxx.xxx.xxx:~/```
- 再度conohaのサーバーにログイン
  - ```ssh root@xxx.xxx.xxx.xxx```
- scpで設置した鍵を移動します
```
mkdir ~作成したユーザー名/.ssh
mv id_rsa.pub ~作成したユーザー名/.ssh/authorized_keys
chown -R 作成したユーザー名: ~作成したユーザー名/.ssh
chmod 700 ~作成したユーザー名/.ssh
chmod 600 ~作成したユーザー名/.ssh/authorized_keys
exit
```
- 作成したユーザーでconohaのサーバーにログイン
  - ```ssh -i /path/to/ssh/作成した鍵 作成したユーザー名@xxx.xxx.xxx.xxx```
  - ログインできればok
- rootでのログインをできなくする
  - conohaのサーバーにログイン(ユーザーはどちらでも可)
  - ```sudo vi /etc/ssh/sshd_config```
  - PermitRootLogin yesをnoにする
  - ```sudo service ssh restart```
- rootでログインできないことを確認する
  - ```Permission denied``` が出ればOK

## ちょっと一息

ここまでが下ごしらえです。ここからが本番です。

## Androidからsshする

- 作成した鍵の中身をcloudサービスなどを使用してandroid側で使えるようにする
- JuiceSSHを起動
- 接続をタップ
- 左にスライドさせて認証情報タブに移動
- 右下の+ボタンをタップ
- ニックネーム、ユーザー名を適当に入力
- パスワードを設定
- プライベートキーは貼り付けを選択し、cloudサービスなどに保存した秘密鍵(id_rsa的なやつ)を貼り付け
- 右上のチェックボタンをタップ
- 右にスライドさせて接続タブに移動
- 右下の+ボタンをタップ
- ニックネームは適当にアドレスはconohaのサーバーのIPを入力
- 認証情報は先ほど作ったものを選択
- 接続タブに作成したものが表示されると思うので、それをタップ
- パスワードを聞かれるので、認証情報を作成した際に設定したパスワードを入力する
- conohaのサーバーへログイン成功！

## 俺たちの冒険はこれからだ！

- 後はお好きに環境構築してください。
- 処理速度上げたかったらこのはちゃんに貢いでください。
  - 世の中全て金で解決です。

## 終わりに

これで外部からでも開発できるぜっ！(まだやってないけど)
セキュリティーがーとかいろいろ問題ありそうですが、とりあえずはできたのでよしとします。

最後までお読み頂きありがとうございました！
[SPIR-V]シェーダの特殊化定数を使ってみる

Vulkanにおいて、シェーダ周りのインフラの一つとして新たに「SPIR-V」が採用されました。SPIR(Standard Portable Intermediate Representation)[^1]-VはLLVMをベースとした、シェーダの新しい、そしてオープンな中間表現です(もともとはOpenCL向けのシェーダ中間表現として策定されたらしい)。
このSPIR-Vですが、Vulkanと合わさることにより従来のシェーダ中間表現(DirectXの内部で使われていたようなもの)と一つ違う特徴を持つようになりまして、それが今回の**特殊化定数(Specialization Constants)**となります。

## 特殊化定数について軽く

特殊化定数とはシェーダのプログラム中に定数を実行時に埋め込める機能です。SPIR-Vは単なる中間表現なので実際にVulkanドライバによってGPUネイティブに翻訳される前にいくらか処理を施すことが可能で、それを活用したものとなります。

## 特殊化定数を使う利点

特殊化定数を使わず通常のuniformバッファで値を受け渡した場合、その値を読み出すためにシェーダはメモリロード命令(SPIR-V内部では`OpLoad`)を使います。一方で特殊化定数を使った場合、シェーダ内部でメモリロードは発生しないようになります(SPIR-V内部では命令に`OpSpecConstant`のラベルがそのまま入る)。今の時代でシェーダのメモリロード1命令が「何かパフォーマンスに重大な影響を及ぼす」だとか「あと1命令削らないと入らない」だとかということはあまりない気がしますが(もちろん場合による)(格納可能な命令数でいえばSM4.0で制限がなくなったようなので今ではやりくりする必要はあまりない気がします)。

### 欠点

パイプライン作成時に値を固定してしまうためコマンドリストの内部で変更するなどといったことはできません。場合によってPush Constantsを使う必要があります。また特殊化できるものは定数に限るため、例えばテクスチャなどを特殊化することはできません(あとよくわかりませんが`#version 450`で使っているとvec3なども特殊化できません)。DescriptorSetとPush ConstantsとSpecialization Constantsをうまく使い分けましょう。

## 実際に使ってみる

使ってみるというか、制作中のゲームから使用事例を紹介する感じになります。
弾幕シューティングなのですが、自機の弾のスケーリングに特殊化定数を使っています。
詳しいことは[Pctg-x8/hardgrad_extent](https://github.com/Pctg-x8/hardgrad_extent)を見ていただくとして、自機の弾を描画するパイプラインの頂点シェーダ内部で、以下のように特殊化定数を宣言しています。

```GLSL
layout(constant_id = 0) const float SpriteScaling = 1.0f;
```

あくまでもGLSLでの扱いは定数なので初期値の設定が必要です。`layout`を使ってin/out変数のlocationを宣言するのと同様に`constant_id`で定数のID番号を宣言します。GLSL側ではこれで準備完了で、あとは普通に定数の一つとして扱うことができます。

次はこの定数をプログラム側から書き換えます。ゲームのほうではInterludeを通してるので詳細が隠れてしまっているので改めて分解して説明します(Interludeとはなんぞやというのは12/18まで待ってください)。
Vulkanで特殊化定数を特殊化する場合は、パイプライン作成時のシェーダステージの設定の中で設定を行います。
`VkPipelineShaderStageCreateInfo`構造体の中に`pSpecializationInfo`と名づけられた`VkSpecializationInfo`構造体へのポインタを設定する部分があります。特殊化定数を使わない場合は`nullptr`でかまわないのですが、使う場合は正当なポインタである必要があります。
この`VkSpecializationInfo`構造体は以下のようになっており、意外と~~面倒~~柔軟な仕組みになっています。

```C
struct VkSpecializationInfo
{
    uint32_t mapEntryCount;
    const VkSpecializationMapEntry* pMapEntries;
    size_t dataSize;
    const void* pData;
}
```

`mapEntryCount`はマップエントリの数、`pMapEntries`はマップエントリの配列の先頭要素へのポインタ、`dataSize`は`pData`のサイズ(バイト単位)で、`pData`が定数のマッピングで使われるデータになります。
`VkSpecializationMapEntry`構造体はさらに以下のようになっています。

```C
struct VkSpecializationMapEntry
{
    uint32_t constantID;
    uint32_t offset;
    size_t size;
}
```

`constantID`でシェーダ側の`constant_id`を指定し、`VkSpecializationInfo`の`pData`の`offset`バイトから`size`バイトまでを特殊化定数の中身として割り当てます。実例として、

```C++
auto upData = std::make_unique<float[1]>({0.2f});
auto mapEntry = VkSpecializationMapEntry { 0, 0, sizeof(float) };
auto specInfo = VkSpecializationInfo { 1, &mapEntry, sizeof(float), upData.get() };
```

とすることで、特殊化定数のID0番に`0.2f`という値を割り当てることができます。

[^1]: https://www.khronos.org/spir
Photoshop CCで楽チン画像切り出し

Photoshop CCの機能「画像アセット生成」を使った画像切り出しは
楽チンだよ！と簡単な部分から伝えたい記事です。


# 画像アセットとは

- アドビサポートの詳しい資料：[レイヤーからの画像アセットの生成](https://helpx.adobe.com/jp/photoshop/using/generate-assets-layers.html)

## 使い方

1. Photoshopを起動します
2. 何かしらファイルを開きます（新規ファイルでもOK）
3. 「ファイル」→「生成」→「画像アセット」にチェックを入れる（すでに入っていたらそのままでOK）<br>![設定.png](https://qiita-image-store.s3.amazonaws.com/0/54478/a50ed76a-51b7-fb01-1b05-cd1462d2dbfc.png)

4. 切り出したい箇所のレイヤーorグループにWeb画像の拡張子（.pngや.jpg等）を命名する
5. 保存（⌘+S）する
6. psdと同階層にできるassetsフォルダ内に画像が生成されたことを確認する
![アセット03_フォルダ.png](https://qiita-image-store.s3.amazonaws.com/0/54478/2b7af086-e173-73b6-23ce-d7648848cb8a.png)



## 画像アセットの便利な点

- psdを保存（⌘+S）するだけで自動で画像を切り出せる
![アセット02.png](https://qiita-image-store.s3.amazonaws.com/0/54478/604c7f82-2d4b-d6ea-5a20-b69f1941fdd1.png)
<br>

- ドロップシャドウもきちんと切り出せる
![アセット03_切り出し後.png](https://qiita-image-store.s3.amazonaws.com/0/54478/2aa8585b-93c8-250d-202b-6fd8caa6b319.png)
<br>


- 重なり合った要素も切り出せる
![スライス02.png](https://qiita-image-store.s3.amazonaws.com/0/54478/9e1110f0-286d-4c49-34db-66dad505d824.png)
<br>

## 注意点

- psdを保存する度に、assetsフォルダ内の画像は上書きされてしまう
<br>![タイムスタンプ例.png](https://qiita-image-store.s3.amazonaws.com/0/54478/82abf8b3-6fc1-68b1-646a-f6d470fd35a4.png)
   - タイムスタンプによる差分管理をしている人はフォルダを別名にするなど一工夫を
- Adobe Photoshop CCからの機能なのでCS6では使えない
    - ファイルを共有するときはバージョンの確認をするように
- ベクトルマスクで切り出す範囲指定が可能だが、稀に指定されない場合がある
  - ベクトルマスクではなく、レイヤーマスクで指定すると書き出せる


# さいごに

入門中の入門編でしたが、スライス派の皆さんも是非お試しください：）
この程度のボタンなら画像で切り出すまでもない！という部分はご容赦下さい。
初心者こそLintを使わせよう

## 前提と目的

我々エンジニアは、ある程度の品質のコードが書けても
まだまだ初心者プログラマーという扱いをしてしまいますが、
今回はHello Worldすらあやしいというレベルを想定しています。
ググれば書けるけど、そらで書くのは無理というレベルです。
未経験者を採用するとそういう人もやってきますよね。  

Hello Worldが書けないレベルになると
経験うんぬんの前に向いていない気がしてしまいますが、
採用した以上はできるようになってもらう必要があり、
そういう育成の手助けの一つになればよさそう。

## 結論的なこと

初心者を育てるとき、用意する開発環境にLintも含めておきましょう。
そしてLintでチェックをなるべくやらせて、いい感じに育てていきます。

まず、ルールをゆるくしましょう。

- Lintのルールのバグは先に把握しておく
- 経験者からみても厳しいルールもリストアップしておく
- お好みじゃないルールも明確にしておく
- そしてそれらのルールを外したLintの設定ファイルをGitHubとかにあげておく

経験者は最高に厳しいルールでやっていくのが良いと思っているしお好みなんですけど、
それを初心者にやらせると結局は投げ出す原因にしかならないので、
最初はゆるくの方が良いでしょう。継続させることが最優先です。

つぎに、Lintを初心者につかわせてみましょう。

- まずは、コードが動くようになったタイミングでLintを使わせる
- 使い方くらいは丁寧に教えてあげる
- 最初の１日は、エラーがでたら直す部分と直し方を教えてあげる
- Lintのメッセージの見方やググり方も教えてあげよう
- 60~80%くらい直せたら、もういいんじゃない？って言ってあげよう

なんでもやってあげるのは微妙ですが、上記くらいはやってあげましょう。
あと、強制的に毎回100点を取らせるようなやり方は避けたほうがよい。
初心者は最初にごまかす方法を考え出すので、
ごまかさないほうが良いし、必要もないということを実感させましょう。


## つらいこと

初心者にLintを使わせると次のようなことがつらいから、
しばらくしてからでいいんじゃないの？
という話がありますね。

- 初心者は当然のように英語が読めない
- 初心者はリテラシがないからメッセージの内容も意味不明
- ダメなルールなのか、自分がわるいのか、初心者にはわからん
- 100点がなかなか取れないという気持ち悪さがのこる

しかしこれらはそのまま、初心者が成長すべきポイントでもあり、
こういうことは早い段階で考えてわかったほうがいいので、やらせようという話です。

まずは動くものを作れるようにという方向に行きがちですが、
動くもののレベルがどんどん上がっていき、複雑になってからLintをやらせると、
僕はゆるふわでやっていくからいいや、ってなるのでよくない。

## しかもだめかもしれない

Hello Worldが書けない初心者は、技術以外の問題を抱えていることのほうが多く、
そうなってくるとLintで学ばせるとかいう以前に対処すべきことが別にありますね。
優先度的にはそっちのほうが先なんですが、そっちは結構コストがかかりそうです。
きびしい。
littleBits Arduinoモジュールよりも手軽に値を貯めれるNUMBER+モジュール

littleBitsアドベントカレンダー2日目です。

![image_20161130_004410_18.jpg](https://qiita-image-store.s3.amazonaws.com/0/56170/94997357-e9f1-350b-1712-dd4286b40ffb.jpeg)

Arduinoモジュールで押したら動作が変化していくもののベースとして、このように連打した値を貯めて増加していくような仕組みを作る場合があります。

Arduinoのコードは以下のように書いています。

```c:littleBits_Count_Value.ino
// 入力の状態記録
int stateInput = LOW;
// カウント
int count = 0;

void setup() {
  Serial.begin(9600);
  pinMode(5,OUTPUT);
}

void loop() {
  // 入力の状態を取得
  int stateInputCurrent = digitalRead(A0);
  // 入力の値の判定
  if ( (stateInputCurrent != stateInput) && (stateInputCurrent == HIGH) ) {
    // カウント増加
    count++;
    if( count > 100 ){
      count = 100;
    }
    // カウントされた分だけ出力に反映
    analogWrite(5,255 * count / 100);
    
    Serial.println(count);
    delay(100);
  }
  // 入力の状態を次のループまで記憶
  // 長押しで増加しないように防止
  stateInput = stateInputCurrent;
}
```

たとえば、この仕組みをサーボモジュールに付け変えると、メータが上がっていくような動作になるので、ちょっとしたスコアを貯めるような動作に使うことが可能です。

いままで、このようなコードをArduinoで作っていたのですが、最近littleBits Arduinoモジュールよりも手軽に値を貯めれるNUMBER+モジュールが登場しておりました。

## 以前のNUMBERモジュール

以前のNUMBERモジュールはもっとシンプルで2つの機能でした。

![image_20161130_005455_21.jpg](https://qiita-image-store.s3.amazonaws.com/0/56170/3ebd86ee-8fe8-7cd7-c669-d395630f775c.jpeg)

このようにvoltsにつまむと電流量を0～5.0Vで表示する機能と、

![image_20161130_005503_22.jpg](https://qiita-image-store.s3.amazonaws.com/0/56170/e4b037fa-49ac-d4b4-23ba-e976da1eda38.jpeg)

valuesにつまむと0～100%の度合いを示す機能でした。

## NUMBER+モジュールになったら手軽に値を貯めれるようになった

ちょっといつの時期に切り替わったのかはハッキリわからないのですが、NUMBERモジュールがNUMBER+モジュールとなって手軽に値を貯めれるようになりました。

![image_20161130_011011_24.jpg](https://qiita-image-store.s3.amazonaws.com/0/56170/bd6529ca-dc2f-7d80-5cf3-fbef99f7d19e.jpeg)

今まで通りのvolts、values機能は切り替えられつつ、

![252f7fc3-3f03-9f15-5100-0ce10cbda4f2.gif](https://qiita-image-store.s3.amazonaws.com/0/56170/252f7fc3-3f03-9f15-5100-0ce10cbda4f2.gif)

上部のcount枠につまんでいき、upの場合はボタンを押すたびに増加します。

![5d7616ba-6c15-663a-94f6-165876305929.gif](https://qiita-image-store.s3.amazonaws.com/0/56170/5d7616ba-6c15-663a-94f6-165876305929.gif)

そして、downの場合はボタンを押すたびに減少します。

最初ご紹介したとおり、Arduinoモジュールでプログラムを書き込んでももちろんできますが、このようにモジュールに機能追加されてよりコンパクトに動作できる方は使いやすいですね。

## おわりに

NUMBER+モジュールの後に出力モジュールを付けたときの動作は、さきほどのArduinoモジュールの挙動と同様にカウント量に合わせて0～100%と変化します。

![c5461fef-0635-890d-2ccf-47de04b051c4.gif](https://qiita-image-store.s3.amazonaws.com/0/56170/c5461fef-0635-890d-2ccf-47de04b051c4.gif)

アドベントカレンダー1日目でLOGICモジュール群をArduinoモジュールで模写してみましたが、今回の場合はArduinoモジュールで作ると面白い動きがlittleBitsのモジュールに反映されるという逆の流れ。プログラムとハード（モジュール）が行き来できる側面もあるlittleBits、是非さわってみて下さい！

## 余談

本家のサイトにも <a href="http://littlebits.cc/tips-tricks/tips-tricks-number" target="_blank">Tips &amp; Tricks: Number+</a> という形でリセットの発動のさせ方が載っていました。
コミュニケーションについて気付いたことをつれづれに

# 前置き

上段に振りかぶって論をぶつような知見や教養があるわけでもないので、最近気づいたことをつれづれに語ってみようかなと思います。

# 意見が欲しい時

## まず自分から発信する

自分の意見をまず発信すれば、少なくとも同意なり反論なりが得られるはずです。また、自分を隠している人に対して心を開いてくれるような人などいようはずもありません。
なので、人とコミュニケーションを取りたければまず自分から。

## 間違っていてもいいから発信する

間違ってしまうことが致命傷になるような局面や、致命傷になるほど大きな間違いをしてしまっては元も子もありません。が、そんな状況ははっきりいってレアケースです。
だから、間違っていてもいいからがんがん行けばいいんです。話す相手さえ間違えてなければ、間違いを正してもらえたりするわけなので何も問題ないのです。むしろ、自分の意図しないところまで話が広がって思いもしなかった新しい知識が得られる可能性まであります。いやほんとに。
聞くは一時の恥、聞かぬは一生の恥、ですよ。（ちょっと違う）

## できる限り嫌いにならない

やっぱりそこはそれ、人間ですから、大抵の人は好き嫌いがどうしても出てくるとは思うんですが、嫌いになっちゃったらもうコミュニケーション以前の問題ですから、できるだけ好き嫌いを作らないようにしたほうがいいんじゃないかと思います。せめて、好き嫌いと良い悪いはちゃんと分けましょう。

# 意見を求められた時

## 相手が何を、何故、聞きたがっているのか、何を求めているのかを考える

いやもう、こんなのあたりまえのことだとしか思わないんですけどねぇ・・・。
でも、自分の観測範囲から全く出てこない（自分以外の人の考えが想像できていない）人とか、自分の言いたいことしか言わない人とか、自分の意見を通すことが至上命題だとしか思えない人とか、とにかく相手の意見にそのまま乗るのが嫌で独自性を出さないと気が済まない人とかいるんですよねぇ。
理解はするけど納得はしない、というのはもちろんありだと思うんですよ。しかし、残念ながら、理解をしようとしない人がいるのが現実です。って、これただの愚痴じゃないか。