OmniAICreator/Qiita-1.07M huggingface dataset:
Live2D と手書きアニメ比較 (1) まばたき

[Live2D Advent Calendar 2015](http://www.adventar.org/calendars/935) 24日目の記事です。

Live2Dの一番の魅力は、モデルデータを使った対話的なコンテンツですよね！
いったんモデルを作成してしまえば、様々な入力（パラメータ）を元に絵をグリグリ動かせる……
……めちゃすごい！（かなり）

最近は特に FaceRigを使った「俺が嫁」が盛り上がってますね！
俺も美少女になりたい！という全世界市民の願いがついに実現したのです！

しかしながら、そんなトレンドを全力で無視し
アニメーションツールとしてのLive2Dをみていきたいと思います。
方針としては、

- 手書きの作業感に近い方法で
- 必要な作業を必要なだけ行う

です。

まずは動きの基本、「まばたき」です。
最近描いた某キャラを動かしてみます。

## まばたき動画
完成した動画の比較から。左が手書きで、右がLive2Dです。
![名称未設定.gif](https://qiita-image-store.s3.amazonaws.com/0/106829/2f13e4aa-5843-a4e2-a817-51481982b8db.gif)

Live2Dで作ったほうは、モーフィングならではの ヌルヌル感がありますね！
手書きもLive2Dもタイムシートは同じです。(30fps)
開き目(7F) → 閉じ目(3F) → 中目(4F) → 開き目

- 手書き素材
開き目、中目、閉じ目 3枚
![151224_0431.jpg](https://qiita-image-store.s3.amazonaws.com/0/106829/16c985ec-af61-0cb2-50cb-3ab1742cb7d0.jpeg)


- Live2D素材
開き目、閉じ目の2枚（中目は補完）

目は１パーツで、動かさない部分はポリゴン割当てすらしてません！
（目だけのモデリングなら10分もあれば終わります）
![151224_08.jpg](https://qiita-image-store.s3.amazonaws.com/0/106829/3486eeba-1b0e-4629-bbd3-600225f574aa.jpeg)

閉じ目は、手書きで描いたものをAdventCalendarの17日目の記事と同じように不透明度で切り替えてます。
[Live2Dでパーツ表示・非表示させる2つの方法（naotaro0123さん）](http://qiita.com/naotaro0123/items/1be8ecf906db15d0425d)
こっちのほうがポリゴンの点を修正する（モデリング）よりも手書き（ドローイング）に近い作業感です。

また、今回は眼を1パーツで作成したので、閉じ眼に近い部分は歪んでしまっています。
（動画だとそんなに気にならないですが、Live2D Animatorで開き目気味にキーを打ってごまかしています）
ここは、Live2D ユーザーチュートリアルの記事を参考に、眼も複数パーツに分けるともっと自然になりそうです。
[さらに自然な 「まばたき」の作り方（黒井さん）](http://sites.cybernoids.jp/cubism2/user_tutorials/kuroi2)
 （せめて上まつげは分けたほうが良さそうです。あとで試してみます）

## 工数の比較
手書き（ClipStudioPaintEX）
元絵 -
中目 10分
閉じ目 15分
アニメーション 10分
計 35分

Live2D
元絵 -
閉じ目 15分
モデリング 15分
アニメーション 10分
計 40分

ざっくりこんな感じです。絵によって変わるかと思います。
（慣れれば、どちらも10～15分くらいで出来そうです）
今回は『まばたき』 なので可動部が少なく、工数・作業感の差はあまりないですね。
しかし、Live2Dなら中割りのフレームは補完されますし
補完方法も細かく調整できるので、動きによってはかなり工数が削減できる（はず）！

## Live2D と手書きアニメまとめ
手間（工数）の部分で悩むところですが、Live2Dを使うと
かなり限定的なアニメーション制作でも、手書きではできない表現が出来ることがわかります！

ということでこの企画はたぶん続きます。次回は髪揺れかなと思います！
（まばたきに関しても中目2枚と比較してみたり、他ソフトとの比較など……いろいろやりたいことはありますね）

[Live2D Advent Calendar 2015](http://www.adventar.org/calendars/935) 、明日はいよいよ最終日です。Yuanさんよろしくお願いします！
青空文庫を支えるPerl言語

物語を楽しめて、未来の悩める誰かの助けになれるかもしれない、ということに心を惹かれて「[青空シャッカソン #2 〜青空文庫の入力ハッカソン〜](https://atnd.org/events/71661)」に行ってきました。

ややあって、@takahashim さん曰く

> 先日のシャッソンで入力作業をやってみて、青空文庫の入力作業には、
> 
> - チェッカー君 http://www.aozora.jp/tools/checker.cgi
> - 校閲君 http://www.aozora.jp/kouetsukun/replace.cgi
>
> が超便利だというのが分かりました。そしてこれらのツールを使いやすくすると幸せになれそうなので、そのためのプロジェクトを作りたいです。
> 
> - とりあえず一枚板CGIじゃなくてライブラリ化する
> - とはいえPerlは苦手なのでRubyかJavaScriptに書き換えた方が良さそう（別にPythonとかでもよいです）
>  - JSは文字コード周りがどこまでできるのかがちょっと不安

Perlのまま書き換えたほうが早いかと思い、私が引き受ることにしました。

## だが、ソースコードが古い！

- http://www.hyuki.com/aozora/checker_360.zip
- http://www.aozora.jp/kouetsukun/download/replace.zip

最終更新年は、「チェッカー君」が2001年で「校閲君」が2008年。随分とPerl言語が青空文庫とその工作員（入力や校正に携わる方々）を支えていたのだと知って驚きました。文字コードは Shift_JIS や EUC-JP で jcode.pl が同梱されているという歴史を感じさせる構成だったので UTF-8 + Encode.pm で書き換えました。

## 秘伝のタレをYAMLで外部ファイルへ

文字チェック周りのハッシュを [YAML::Tiny](https://metacpan.org/pod/YAML::Tiny) を使って外部ファイルに移動させ、エンジニアでない方でも変更しやすくしました。@tadsan さんが秘伝のタレと形容されていたので、hiden_no_tare.yml というファイル名になりました。😅

## [data-* 属性](http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes)を利用してタグ付け

Webアプリケーションから利用することが大半になると考え、JavaScriptから簡単に扱えるように data-* 属性でタグ付けされたHTMLを出力できるようにしました。

そんなこんなで、無事にCPANモジュール「[AozoraBunko::Checkerkun](https://metacpan.org/release/AozoraBunko-Checkerkun)」になりました。

## [フロント側](http://chobitool.com/checkerkun/)も作ってみた

以下のように、テキストエリアにチェックしたいテキストを貼り付けて「チェックする」ボタンを押すと…

<img width="696" alt="スクリーンショット 2015-12-24 4.09.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/28110/be41264a-ffb7-14d9-f42d-e713233ea606.png">

以下の画像のように、怪しいところに赤丸でチェックが入り、各赤丸にマウスオーバーかクリックするとメッセージがポップアップされます。

<img width="1360" alt="スクリーンショット 2015-12-24 4.07.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/28110/9943746f-1c47-5482-b888-b8fc16204974.png">

@hakatashi さんによると「[この2015年、ブラウザ上で縦書きを実装するのに大袈裟なハックは必要ない](http://inside.pixiv.net/entry/2015/06/15/190845)」とのことですので、私も縦書きに挑戦してみました。

文字チェック時のオプションの詳しい説明は、[新しいチェッカー君](http://chobitool.com/checkerkun/)のフッターのリンク先のページに大体書いてあります。（Perlの話から逸れるので割愛します。）

## 後世に物語を残そう

青空文庫はあなたの協力を歓迎します。技術面で支えることに興味がある方は [GitHubのページ](https://github.com/aozorahack/aozorahack)を参照して Slack に参加してみてはいかがでしょうか。

---

明日は @mihyaeru21 さんの「ハッシュ周りの簡単なtips」の予定です！
「Redis To Go」をさらっと触れるようになるまでの導入メモ

「Redis To Go」を使う必要があったので、触りの部分だけさらっとまとめてみました。
もしこれから触りたいという方がいればご参考にしていただければ・・!!
 
```text:ステップ
1.インストール
2.動作確認
3.Redis To Goにアクセス
4.コマンド操作
```

# 1. インストールする

Redisのクイックスタートを参照してインストールからスタートです。
http://redis.io/topics/quickstart

```text:コマンド
wget http://download.redis.io/redis-stable.tar.gz
tar xvzf redis-stable.tar.gz
cd redis-stable
make
```

# 2.動作確認

ターミナルで以下コマンドを打って動くか確認。

```text:コマンド
redis-server
```

![image](https://qiita-image-store.s3.amazonaws.com/0/32284/728dcb1a-a178-e65a-33cc-7d9d6672bc57.png)

# 3.Redis To Goにアクセス

自分のRedis To Goにアクセスして、ホスト名/ポート/パスワードを確認して、
以下コマンドでアクセス。

![image](https://qiita-image-store.s3.amazonaws.com/0/32284/00a3db36-669c-3a18-66ac-4da5687f3e09.png)

```text:コマンド
redis-cli -h ホスト名 -p ポート -a パスワード
```

# 4.コマンド動作

コマンド操作は人それぞれだと思いますので
参考にさせていただいたリファレンスをあげさせていただきます。多謝!!

##### 0. おすすめ
- [Redisに保存されてる値を見ようと思った時に覚えておきたいredisコマンド 
](http://blog.eiel.info/blog/2014/08/26/remember-redis/)
    - データ確認したいだけなら、このブログ記事を読みこめば十分。
- [redis本家のtry it](http://try.redis.io/)
    - ターミナル開かなくてもWeb上でコマンドを試したりできます。

##### 1. redis

- [redisドキュメント日本語訳](http://redis.shibu.jp/)
    - ドキュメントの日本語訳!!

##### 2. ツール

- [Redis Commandarを使ってみる](http://qiita.com/dribble13/items/38a340d712899a8e21bc)
    - ブラウザから確認する場合に便利!!
- [Redis Desktop Managerを使ってみる](http://qiita.com/akiko-pusu/items/64561b4d97f4435b8645#_reference-e870baebc25ce15693b2)
    - こちらはアプリで確認する感じです!!

##### 3. 色んな話

Redisにまつわる色んな話を眺めたいなぁという方向けに。

- [Redis作者Salvatore Sanfilippo氏へのインタビュー](https://yakst.com/ja/posts/1455)
    - シチリア島からRedisは生まれたんだお！！という話。
- [Redis作者自身によるRedisとMemcachedの比較](https://yakst.com/ja/posts/3243)
    - RedisとMemcachedの違いについて作者が話している記事の日本語訳
Atomで複数行選択する方法とハマったこと

## はじめに
Atomエディタで論文書いているときに，複数行を同時に編集したいので何かパッケージを入れようかなと考えていたら，どうやら標準機能でできるらしいと知りました．
ただし，Macだと微妙なハマりどころがあったのでメモ．

## ショートカット
| キー操作         | 動作               |
|:----------------|------------------ | 
| Ctrl-Shift-Up   | カーソルを上に増やす |
| Ctrl-Shift-Down | カーソルを下に増やす |
| (カーソルが増えた状態で)ESC | カーソルを1つに戻す |

## Macで動かない時
Macの`Ctrl-Shift-Up`及び`Ctrl-Shift-Down`は標準でMission Controlの機能に割り当てられています．
そのため，設定からそのショートカットを無効にする必要があります．

```
環境設定 > Mission Control > キーボードとマウスのショートカットの項目
```

この`Mission Control`及び`アプリケーションウィンドウ`に設定されているキーバインドを無効にしてください．そうすれば，使えるようになるはずです．

## 最後に
これを調査して書く時間で，少しでも論文を書いた方が良かったと反省しています・・・
この情報が誰かのお役に立てれば嬉しいです．
Pure Dart の Material Design Lite For Dart を利用して、サラっとWebページを作ろう

Dartで、Material Design の考え方に則ったWebページを作ってみましょう。Dart製 Material Design Lite を使えば、それっぽいページを1-2時間で作ることができます。


http://www.material-design-lite.pub/
https://github.com/MikeMitterer/dart-material-design-lite

# Matrial Design Lite 以前
* Pure Dart の UI Library がないなぁ
* Polymer は、JavaScript製
* Angular は　TypeScriptで書かれてる。slows down development
* Polymer.Dart も Angular.Dart はでかくてデバックが大変。そして、slower


# Material Design Lite x Dart は、これらを CHANGE
Pure Dartで書かれている。slowerでない。デバックが簡単。そして、軽量

http://styleguide.material-design-lite.pub/
https://github.com/MikeMitterer/dart-material-design-lite

# 始めよう
StageDive を使っています。
https://pub.dartlang.org/packages/stagedive
#### (1) http://www.material-design-lite.pub/ にアクセス
#### (2) QUICK START をクリック
#### (3) テンプレートをインストール

```
$ pub cache add mdl
$ pub global activate stagedive
$ pub global activate sitegen
$ stagedive -l
'MDL Android Template'         Package: mdl            Template name: android        Version: 1.13.1
'MDL Article Template'         Package: mdl            Template name: article        Version: 1.13.1
'MDL Blog Template'            Package: mdl            Template name: blog           Version: 1.13.1
'MDL Admin Template'           Package: mdl            Template name: dashboard      Version: 1.13.1
'MDL Fixed-Header Template'    Package: mdl            Template name: fixed-header   Version: 1.13.1
'MDL Sticky-Footer Template'   Package: mdl            Template name: sticky-footer  Version: 1.13.1
'MDL Text-Only Template'       Package: mdl            Template name: text-only      Version: 1.13.1
'Simple Console'               Package: stagedive      Template name: console        Version: 0.4.2
'Simple Lib'                   Package: stagedive      Template name: lib            Version: 0.4.2

$ stagedive -n blog -p mdl -t blog
$ cd blog
$ pub update
$ pub serve
```

できあがり!!
![スクリーンショット 2015-12-24 3.45.47.png](https://qiita-image-store.s3.amazonaws.com/0/54192/ad367a75-3970-ea88-1509-f984b509e17f.png)



# 補足
あとは、テンプレートを文言や配置をいじれば、それっぽいページを作成できます。
"pub serve" すれば、Dartiumから即座に変更を確認できるので、楽チンです。
※ JavaScriptに変換する時間とか気にせず開発に専念できます。

私も以下のページを作成するのに使ってみました。
1-2時間くらいでできました。
http://kyorohiro.github.io/umiuni2d/web/index.html


<br>
<br>
-------
Kyorohiro Work
http://kyorohiro.strikingly.com/
MaterialDesignで学ぶCSS Transition

この記事は[Wantedly Advent Calendar 2015](http://qiita.com/advent-calendar/2015/wantedly) 23日目の投稿です。

## アニメーション使ってますか？
スマホアプリが普及するにつれてネイティブアプリの強みを活かしたアニメーションをよく見るようになりました。そういったアニメーションをWebでつかいたいと思ったことはありませんか？

jQueryを使ったアニメーションは今までもよく使われていましたが、CSSでもアニメーションが使えるブラウザも増えています。Webも進化しています！

今回の記事ではCSSでアニメーションを使う方法を抑えていきます。

### CSSでアニメーション出来ると何が嬉しいの？
単純に負荷がかからないので軽快に動きます。
デメリットとしては、JSの様に複雑な制御が出来ないことでしょう。
用途によって使い分ければいいと思います。

## MaterialDesignのアニメーション

タイトルにも書いたMaterialDesignはgoogleが提唱するデザインガイドラインです。
以下の3つの原則が挙げられています。
- Material is the metaphor
- Bold, graphic, intentional
- Motion provides meaning

今回はその中でも「Motion provides meaning」の原則に注目してCSSで意味のある動きを提供したいと思います。

[MaterialDesignのAnimationのガイドラインページ](http://www.google.com/design/spec/animation/authentic-motion.html)を見るとアニメーションは4つのセクションに分かれています。

- Authentic motion
現実の物体と同じ様な動きをしましょうという内容です。
- Responsive interaction
ユーザーのアクションに対応するアニメーションについて書いてあります。
- Meaningful transitions
画面の遷移時の動きです。ネイティブアプリの得意な領域だと思います。
- Delightful details
アニメーションで喜びを提供しましょう的な内容です。装飾的な意味合いが強い気がします。「おおっ」ってなるアニメーションですね

今回はAuthentic motionに注目していきます。

### Authentic motionの概要
MaterialDesignでは「Material is the metaphor」の原則にもとづき一貫して現実の物体と同じ振る舞いをすることを目指しています。
Authentic motionで述べられているのも「現実の物体と同じ動きをするべき」ということです。

ガイドラインにもあるように、「動き始めるときは早く、止まるときはゆっくり止まる」動きを目指しましょう。


## CSSアニメーションのおさらい
CSSでアニメーションさせる方法はCSS TransitionとCSS Animationがありますが、今回は比較的簡単なアニメーションを制御するCSS Transitionのみを扱っていきます。

CSS Transitionですが[ブラウザの対応状況](http://caniuse.com/#search=CSS3%20Transitions)を見るとIE10以降のブラウザだと大体動きます。
対応してないブラウザだとCSS遷移がなくなるだけなので問題ないと思います。

基本的な使い方を確認していきます。

### 基本的な使い方
CSS3 transitionの基本的なコードです

```CSS
.hoge {
  height: 20px;
  background-color: #4ea30a;
  color: white;
  transition: height .3s ease;
}

.hoge:hover {
  height: 50px;
}
```
[実行結果](https://jsfiddle.net/mottox2/qf0xotow/embedded/result/)

hogeクラスにマウスを当てた時、0.3秒かけてheightが50pxに変化します。
JSのコードなしでアニメーションが実行されているのがわかると思います。

transition: [transition-property: 動かしたい要素] [transition-duration: 動かす時間] [transition-timing-function: アニメーションの種類]
という記法でかけます。

transition-timing-functionの例に関してはこのサイトが便利です。
http://easings.net/ja

動かす秒数は0.3s, .3s, 300msのどれを書いても0.3秒となります。長い時間を書けて動くアニメーションは、使う側からするとイライラすることが多いので避けるのが良さそうです。

## CSSでAuthentic Motion
Authentic Motionの実現を目指すにはtransition-timing-functionを上手く決めればいい気がしませんか？

アニメーションの種類ですが、先ほどのサイトからガイドラインに近いアニメーションを探してみるとeaseOutQuart辺りがよさそうです。
easeOutQuartはブラウザ側で用意されていないので```cubic-bezier(0.165, 0.84, 0.44, 1)```で指定します。
（正直デフォルトのeaseでもいい感じがします…）

[linear, ease, easeOutQuartの比較](https://jsfiddle.net/mottox2/wvc5pmz4/1/embedded/result/) (Hoverすると動きます)

## アニメーションを組み込む際に気をつけること
ユーザー操作のレスポンスとしてアニメーションを使う状況を想定した例で進めて行こうと思いましたが、遅刻気味なので気を付けたいことだけ書いておきます。


基本的にアニメーションは
1. ユーザーが何かの操作を行う。
2. それに対するレスポンスとしてアニメーションが実行される。
の流れになります。

この流れ以外でのアニメーションは違和感を感じるので避けるべきでしょう。
またアニメーションの速度が遅くなると、反応が遅いアプリだと認識されて「使いづらい」「遅い」といわれます。

最後に言いたいのはアニメーションは多用し過ぎるとウザったく感じられることです。適度に使いましょう。
カウント表示されなくなったツイートボタンをなんとかする

11月の終わりにTwitterのツイートボタンがリニューアルされ、
大きな変更点としてツイート数の表示がなくなりました。
https://blog.twitter.com/ja/2015/buttons

見栄えだけでなく、カウント表示付きボタンについてはレイアウト自体が変わってしまったのですが、
特に対応せずにそのままにしているサービスがまだまだあるのではと思っています。

多分に漏れず運営している個人サービスでは
![old.png](https://qiita-image-store.s3.amazonaws.com/0/1403/a5b0b904-101a-34c5-51d3-a049c9a4b14a.png)
な感じで収まりよかったものが
![now.png](https://qiita-image-store.s3.amazonaws.com/0/1403/ea4658e8-839f-5e14-ca4c-1b2c9a6d5360.png)
と、ボタンのみの表示になってしまっていて無残な有様です。。

このままじゃ年は越せない！ということで重い腰を上げて対応プランを考えてみることにしました。

# プラン1：割りきってみる

![plan1.png](https://qiita-image-store.s3.amazonaws.com/0/1403/45fa13f6-4711-c0d1-748d-59b20c95003b.png)

綺麗ですね。
もともとカウント表示なんてしてなかった、と思えば良さそう。

・・・でも「いいね！」や「はてブ」は多少なりともついてるんだし、出せるものは出しておきたい気がしてしまいます。


# プラン2：思い切ってみる

![plan2.png](https://qiita-image-store.s3.amazonaws.com/0/1403/e9c98826-a1e6-d572-a9f7-076a9247ab11.png)

バランスは取れてますね。
「いいね！」と「はてブ」があれば十分、と考えれば良さそう。

・・・でもいまだにツイートは気になるし、ボタンがなくなるとそれこそ誰もつぶやいてくれなくなるのでは、という不安がよぎります。


# プラン3：自分に正直になる

いろいろ考えていくと、やっぱりツイート数は表示し続けたいというのが本音です。

正直な気持ちでGoogle先生に聞いてみると、
なんとカウント表示のウィジェットをTwitterに代わって提供してくれているサービスを見つけました。

http://jsoon.digitiminimi.com/
こちらでも詳しく紹介されてますね　→ http://nelog.jp/count-jsoon

さっそく導入させてもらうことにします。

サービスのURLを元にツイート数を集計しておいてそれをウィジェットで表示してくれるらしく、
登録から使えるようになるまでは少し時間がかかるようです。

今回はひとまずサンプルで表示させてみたところ

![widget_new.png](https://qiita-image-store.s3.amazonaws.com/0/1403/112d6923-4967-b877-20c5-a207bad58015.png)

な感じに。
とても良いですね。

以下のようにして配置すれば、とりあえず表示はできました。

```html
<script type="text/javascript"
    src="http://jsoon.digitiminimi.com/js/widgetoon.js"></script>
<a href="http://twitter.com/share"
   class="twitter-share-buttoon"
   data-url="http://jsoon.digitiminimi.com/"
   data-text="widgetoon.jsでcount.jsoonを使う"
   data-count="vertical"
   data-lang="ja">ツイート</a><script>widgetoon_main();</script>
```
参考：http://jsoon.digitiminimi.com/service_usage.html

あとは登録完了を待って、サンプルを置き換えたいと思います。


記事書き始め時点ではなんらか自分で仕組みを開発するしかなくなり、
やることは見えたのでそれはまた次回・・・くらいのイメージでいたのですが、
予想以上に綺麗な対応方法が見つかってしまいました。

結果的には良かったです。

それでは、みなさま快適なツイート数表示ライフを！
パーミッションの考え方について毎回よく分からなくなるからまとめる

パーミッションについてまとめる。

## 各項目の意味
例えば、`ls -l` で下記のような表示があったとする。

```
-rwxrwxrwx 1 hoge hoge 2222 Dec 23 21:21 test.txt
```

-rwxrwxrwx について  

- \- が種別
- 最初のrwx が「ファイル所有者(hoge)」のパーミッション
- 次のrwx が「所有グループ(hoge)」のパーミッション
- 最後のrwx が「その他のユーザー」のパーミッション
- 1 は「ハードリンク数」
- 2222 が「ファイルサイズ」
- Dec 23 21:21 が「最終更新日時」
- test.txt が「ファイル名」


<!-- more -->


### 種別とは
- \- ならファイル
- d ならディレクトリ
- l ならシンボリックリンク


### rwxは

その種別に対する権限を示す。

- r はread
- w はwrite
- x はexecute



## chmod と chown
chmod はアクセス権限の変更を行うコマンド。

```sample1
$ chmod 755 test.txt
```

chown はファイル所有者及び所有グループの変更を行うコマンド。

```sample2
$ chown hoge2:hoge_group test.txt
-rwxrwxrwx 1 hoge2 hoge_group 2222 Dec 23 23:24 test.txt
```


## パーミッションの数値
8進数を3つ並べた形で指定する。

|1桁目|2桁目|3桁目|
|:----:|:---:|:---:|
|ファイル所有者|所有グループ|その他のユーザー|

それぞれの桁は下記の合計(8進数表記になる)  

|r|w|x|
|:-:|:-:|:--:|
|4|2|1|

## スティッキービットに関して
ディレクトリに対して**スティッキービット**というものを設定できる。  
スティッキービットが設定されたディレクトリでは、削除は所有者しか出来なくなる。

スティッキービットは `t` で表現される。

```
drwxrwxt ・・・
```

これを設定するには、パーミッション設定の頭に1をつける。

```sample3
 $ chomod 1777 test.txt
```

## まとめ

そろそろ記憶に定着させたい。


### 以下の記事を参考にしています。
http://itpro.nikkeibp.co.jp/article/COLUMN/20060228/231068/  
http://linux.kororo.jp/cont/intro/permission.php
コロコロをハックしてみた

#お掃除に使う「コロコロ」を、わざわざIoT化してみました。
これがそれです。
充電ドッグとバッテリー搭載のコロコロ本体。
間取りは超省略サイズ。（クリスマスツリーは ふ・ん・い・き）
![coloclo11.jpg](https://qiita-image-store.s3.amazonaws.com/0/45780/a1f2c8e7-6e9e-a8ef-2f7d-0c8b26c4a44c.jpeg)
https://makershub.jp/make/1137

##Extreme Home Hack（EHH）([９日めレポート参照](http://qiita.com/yamazakiharuki/items/e376cec9b22e1e9624ce))での成果物について。

これが最初のアイデア(@mstachou)
![colocolo-dan01.png](https://qiita-image-store.s3.amazonaws.com/0/45780/c0e9365a-21ec-4d13-c741-47a7464e5ec4.png)

スマホを直接床に這わせる！？test
カーペットの裏にNFCタグを配置して、間取りを検知します。
（Android端末が電話である必要性ないですがReaderとして利用）
![test.jpg](https://qiita-image-store.s3.amazonaws.com/0/45780/df05a804-b92a-384f-8244-acc346c21ac6.jpeg)

全体構成は、このように。
NFCタグを検知すると、光ってチャリンチャリン効果音。宝探しゲームっぽく。
![coloclo3.jpg](https://qiita-image-store.s3.amazonaws.com/0/45780/0ff691ab-bb37-5702-ccb7-80fd2c1f7f11.jpeg)

<使用素材>
コロコロ(R)（ニトムズ）
キチントさん（クレハ）
ほこりセンサー（sharp）
ごみセンサー（赤外線）
NFCタグ（カーペット側）
Raspberry Pi
GR sakura
FlashAir
IBM Bluemix

<入出力>
Android端末　＋　Webブラウザ

コロコロが、NFCタグを通ったか/通ってないか/の判定
![demo.jpg](https://qiita-image-store.s3.amazonaws.com/0/45780/dd73117c-b3ba-1f95-b8e4-e8027ee805b4.jpeg)

<iframe src="https://player.vimeo.com/video/149896802" width="500" height="889" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/149896802">demo</a> from vimeo</p>

#最優秀賞！！「EXTREAMコロコロ」by チーム コロコロ団
![member_colocolodan.jpg](https://qiita-image-store.s3.amazonaws.com/0/45780/d5f27be2-1c67-fd78-bc64-94ff106a2344.jpeg)
「オフィスにも使えそう」「IoTが床建材を拡張する可能性がみえる」「コンテンツに夢がある」「楽しい」との評価をいただきました。
ほかにもコロコロをハックしたチームが２つあって、実装のレベルも高く
コロコロ恐るべしな2015年冬というわけで。メリークリスマス！
(今度こそ)HHKBとかな入力でHappyにHackする


![my-hhkb-trimed.jpg](https://qiita-image-store.s3.amazonaws.com/0/57085/8ae9cb25-3fb7-f483-8415-ece78b44b8e2.jpeg)

日本全国のHappy Hackingしてるみなさん、こんにちは。
[@blackawa](https://twitter.com/blackawa0) です。

## HappyHacking、してますか？

そう、**変態キーボード**が紹介されると必ず出てくる、あれですね！

![thumb_pdkb400b_l.jpg](https://qiita-image-store.s3.amazonaws.com/0/57085/0ddc4c32-1e1c-a5c3-9cc7-7b9d9ec6b385.jpeg)
出典: [Happy Hacking Keyboard | 製品ラインナップ | PFU](https://www.pfu.fujitsu.com/hhkeyboard/lineup/pdkb400b.html)

みなさん画像や先輩エンジニアが使っていて見たことはあるのではないでしょうか。

テンキー無し、ファンクションキー無し、なんなら矢印キーも無いうえに2万円以上するこのキーボード。
何がシアワセって、

- 手をホームポジションからほとんど動かさずに1日中仕事ができる
- キーの打鍵感も最高
- (あとカッコいい)

んですよね。
こちらはみなさんご存知かと思います。私は先輩が使っててカッコよかったので買いました。

## かな入力、してますか？

そう、**日本語配列のキーボードに書いてあるひらがなのやつ**ですね！

キーとひらがなが1:1対応していて、1回キーを押したら1文字打てるステキな入力方式です。

何がシアワセって、

- ローマ字入力と比べたら、単純計算で2倍の速度でタイピングできる
- 仕事の基礎スピードが上がる
- 思考が入力速度の遅さに邪魔されない

んですよね。

みなさん、ツイートしますよね。チャットツール使いますよね。メールも使いますよね。コードにコメント書きますよね。その度にかかる、ただ文字を入力しているだけの時間が半分になったら、どうでしょう？

…さあ、今すぐかな入力に切り替えましょう！[Windows](http://pctrouble.lessismore.cc/running/roman_input.html) / [Mac](http://wayohoo.com/mac/beginners/how-to-switch-input-system.html)

## US無刻印HHKB feat. かな入力

HappyHackingKeyBoardとかな入力、こんなにシアワセになれる2つの要素、組み合わせないわけにはいきません！
私は最早、**これナシでは生きていけません**。JP配列の方は今すぐシアワセになってください。

### でも私、**US配列/無刻印**ユーザなんですよね…。

わかります！実は私もそうなんです。
そんな皆さんの悩みの声にお応えして、

- [キーボード配列図](#キーボード配列図)
- [HHKB+かな入力FAQ](#HHKB+かな入力FAQ)

をご用意しました！やりましたね！

### キーボード配列図

なんといってもまずはキー配列。**無刻印**なのに見てるのがバレないように、こっそり当記事をストックしておきましょう。

![happy-hacking-with-kana.png](https://qiita-image-store.s3.amazonaws.com/0/57085/b5536b48-c804-671f-78c1-8ca549f9b4d4.png)
元データ: [PFU提供のキーボードレイアウトpdf](https://www.pfu.fujitsu.com/hhkeyboard/leaflet/images/hhkb_pro_2_keylayout.pdf)

### HHKB+かな入力FAQ

かな入力を始めた頃に私が悩んだことです。きっと助けになってくれると思います。

#### 日本語・英語入力切替ってどうするの？

`Alt + ~(右上、角のやつ)`を押してください。

#### 記号打ちたいんだけど…

`Ctrl+p`というショートカットをご存知ですか？
日本語入力でEnterを押す前にこれを押すと全角英字に変換できます。

|挙動|操作|
|:-:|:-:|
|全角英字にしたい|Ctrl + p|
|半角にしたい|Ctrl + o|
|カタカナにしたい|Ctrl + i|

これらを組み合わせると、たとえば

```
ぬ (Shift+)へ ぬ へ ふ
<Ctrl + p>
<Ctrl + o>
1+1=2
```

になります。

## さあ！

もう不安はありませんね！
クリスマスの買い物も、決まりましたね！
[PFUダイレクト](http://www.pfu.fujitsu.com/direct/hhkb/)に今すぐアクセスしましょう。amazonから買わせてくれます。

ちなみに、半角スペースをデフォにしている方で已むに已まれぬ事情で全角スペースを入力しなければならなくなった方は、`Shift + Space`を押すとシアワセになれます。
後輩とか友人に入力方式の話をするとき、この情報が一番喜ばれます。
C/C++でcross-platformでの音楽再生にはSDL_mixerが便利

C/C++でクラスプラットフォームな音楽再生をしたいときに、SLD_mixerが便利という話。

SDLはSimple DirectMedia Layerの略でC言語で書かれたクロスプラットフォームのマルチメディアライブラリ([Wikipedia](https://ja.wikipedia.org/wiki/SDL)より)。SDLは低レイヤーのAPIでそのままでは扱いづらいので、より高レイヤーのAPIを提供してくれるのがSDL_mixer。クロスプラットフォームの音楽再生は、portaudioも候補にあがるが、これも低レイヤーで使いづらいので、高レイヤーで手軽に扱いたいときはSDL_mixerが便利だ。

### インストール方法
MacならHomebrewで一発。Windowsはよくわかりません。

```
$ brew install sdl_mixer
```

### 使い方

再生するだけならめちゃ簡単

```
#include <SDL/SDL_mixer.h>

int main() {
    if(Mix_OpenAudio(44100, MIX_DEFAULT_FORMAT, 1, 4096) < 0) {
        printf("Error inesperado");
        return 0;
    }
    Mix_Init(0);

    // 音声ファイルをロード
    Mix_Music *talk = 0;
    talk = Mix_LoadMUS("/path/to/audio");

    // ボリュームを0〜128の範囲で指定
    Mix_VolumeMusic(64);

    // 再生スタート
    Mix_PlayMusic(talk, -1);

    // 停止
    Mix_HaltMusic();
    Mix_FreeMusic(talk);
}
```
【Perl6】あの素晴らしい「進捗どうですか？？？」をもう一度

こんばんは :whale2: 
[Perl 6 Advent Calendar 2015](http://qiita.com/advent-calendar/2015/perl6)の14日目です[^delay]
今日は「[進捗どうですか？？？](http://elephnote.com/blog/archives/936)」ネタのPerl5版をPerl6で書いてみます[^hon]

### ① [進捗どうですかブーム???に Perl でのりかかる - Qiita](http://qiita.com/b_wind/items/06c56c898a988c2463fe)

まずは、この記事のコメント欄にあったソースをPerl6で書いてみます[^curry]

```pl
use v6;

my Str constant @dict = < 進捗 どう です か >;
my Str constant $qqq  = '？？？';
my Int $c = $qqq.chars;

until my Str @s = () {
  LAST {
    say $qqq;
    say $c ~ "文字で煽られました";
  }

  for @dict {
    # @s.push: @dict[ @dict.elems.rand.Int ];
    @s.push: @dict.pick;
    $c += @s[*-1].chars;
  }
  print @s;

  last if @dict eq @s;
}
```

ループを抜ける時に実行される`LAST`ブロックに出力処理を集めています。
あと、配列の中身から無作為抽出する処理で`Array.pick`が地味にいい仕事をします。

---------------
_2016/01/06追記_

そして、前述のコメントに筆者さんがコメント返されていました。

> [進捗どうですかブーム???に Perl でのりかかる - Qiita](http://qiita.com/b_wind/items/06c56c898a988c2463fe#comment-6ed8d8ebee113328bc36)
>> それは４個毎に出力して最後の４個を比較しているので、途中で文字列が完成していても気づけないケースがありそうですね。

マジだ…

---------------

つぎに、本文の`末尾再帰最適化 ver`をPerl6で書いてみます。

```pl
use v6;

my Str constant @words    = < 進捗 どう です か > ;
my Str constant $end_word = '???';

my Int $length = 0;
my @cache;

loop {
  LAST {
    print $end_word;
    $length += $end_word.chars;
    printf "\n%d文字で煽られました\n", $length;
  }

  print my $word = @words.pick;
  $length += $word.chars;
  @cache.push: $word;
  @cache.shift while @cache > @words;

  last if @cache eq @words ;
}
```

最適はやい。すてき。

### ② [十周くらい遅い、進捗どうですか。 - Qiita](http://qiita.com/bunzaemon/items/571c6c0046668712e9ed)

つぎはこの方のソースをPerl6で書いてみます。

```pl
use v6;

my Str constant @words = < 進捗 どう です か >;
my Str @cache;

while 1 {
  @cache.push: @words.pick;
  last if @words eq @cache[ *-4 .. *-1 ];

  LAST {
    say my $c = [~] @cache.push: '？？？';
    printf "%d文字で煽られました\n", $c.chars ;
  }
}
```

元が簡潔に書かれていたこともありすっきりしています。


### ③ [「進捗・どう・です・か」をPerlで - Qiita](http://qiita.com/B73W56H84/items/a6c4b770c6efc8d1af35)

最後は自分のを。

```pl
use v6;

my Str constant @words = < 進捗 どう です か >;
my Str $w = @words.join;
my Str $word_buffer = '';

while 1 {
  $word_buffer ~= @words.pick;

  last if $word_buffer ~~ m:overlap/ <{ $w }> $$ /;

  LAST {
    $word_buffer ~= '？？？';
    say $word_buffer;
    say $word_buffer.chars, "文字で煽られました。";
  }
}
```

文字列`$word_buffer`の後ろの方を正規表現でチェックしています。
この場合、正規表現ではなくて`Str.ends-with`でもよいかんじ。

```pl
use v6;

my Str constant @words = < 進捗 どう です か >;
my Str constant $w = [~] @words;
my Str $word_buffer = '';

while 1 {
  $word_buffer ~= @words.pick;

  last if $word_buffer.ends-with( $w );

  LAST {
    $word_buffer ~= '？？？';
    say $word_buffer;
    say $word_buffer.chars, "文字で煽られました。";
  }
}
```

おわりです。
そして今日も進捗は芳しくない。

## 参考と注釈

* [Perl5,Perl6で配列の末尾からひとつ前の要素を取り出す - Qiita](http://qiita.com/B73W56H84/items/d8352d06f83f9ec29ec4)
* [Control Flow - Perl 6 Documentation](http://doc.perl6.org/language/control)

[^delay]: 事故レベルの遅刻
[^hon]: 本当はInline::Perl5 モジュールネタを書こうと思っていたけど自分の環境ではセットアップできなかったのです。
[^curry]: これが「？？？」も文字数カウントに入れていたので以降それに倣います。
UMGを使ったUIの実装＋

この記事はUnreal Engine 4 (UE4) Advent Calendar 2015 24日目の記事です。

昨日は@yk3さんの[「UE4らしい絵について」](http://yk3.org/blog/?p=220)でした。
テカテカに関しては確かにマテリアルの使い方次第かと思いますが、サンプルなどを見るとビジュアル的に生えそうなものはテカテカしている印象があります。
＞・ティファがテカテカしてるとえっちぃな オラわくわくすっぞ
テカテカはえっちいのか...


さて今回の投稿ですが、アップロード制限の都合ブログの方にのっけました。
本記事が直接リンクでなく申し訳ないですが、以下からお願いします。

---------------------------------------------------
＜記事本編＞
[【UE4】UMGを使ったUIの実装＋ (その1)](http://meganeo.blog.shinobi.jp/ue4/%E3%80%90ue4%E3%80%91umg%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9Fui%E3%81%AE%E5%AE%9F%E8%A3%85%EF%BC%8B%20-%E5%AE%9F%E8%A3%85%E7%B7%A8-)
[【UE4】UMGを使ったUIの実装＋ (その2)](http://meganeo.blog.shinobi.jp/ue4/%E3%80%90ue4%E3%80%91umg%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9Fui%E3%81%AE%E5%AE%9F%E8%A3%85%EF%BC%8B%20-%E3%81%9D%E3%81%AE2-)
[【UE4】UMGを使ったUIの実装＋ (その3)](http://meganeo.blog.shinobi.jp/ue4/%E3%80%90ue4%E3%80%91umg%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9Fui%E3%81%AE%E5%AE%9F%E8%A3%85%EF%BC%8B%20-%E3%81%9D%E3%81%AE3-)

---------------------------------------------------

・【UE4】UMGを使ったUIの実装＋ (その1)
　UIを作成する流れや簡単なWidgetの作成例をのせています

・【UE4】UMGを使ったUIの実装＋ (その2)
　ゲームロジックとUIの連動やアニメーションの作成例をのせています

・【UE4】UMGを使ったUIの実装＋ (その3)
　Tipsや簡単に調べたことをのせています


元々は「UMG使いたいぞおら」と思って使っていたけど、「サンプルもっとねぇかなぁ」とか「他の人どうやって作ってるんだろ？」ということが発端になっています。上記では自己流での作り方を紹介していますが、もっと色んな方法があれば知りたいなと思い、また参考になればとも。


明日はいよいよ最終日、@kurisaka_konabeさんによる「UE4動くマシンが死んだので、素手で何とか出来そうなネタを予定」です。強い！（確信）
対象月の全日付を取得する方法

# 背景
レポート画面を作ろうとしていて(※1)、DBから日付ごとに集計したデータを取得した。
しかし、データのない日付は存在しない作りになっていた。

※1: 画面では対象年月を選べて、選んだ年月のデータが日別で表示される感じ

####DBの取得情報そのまま表示

| 日付 | 売上件数 | 売上金額 |
|:-----------|------------:|:------------:|
| 2015-12-01       |        3 |     300     |
| 2015-12-04     |      4 |    400    |
| 2015-12-05       |        3 |     300     |
| ...       |        ... |     ...     |
| 2015-12-30         |          3 |      300      |
| 2015-12-31         |          3 |      300      |

みたいな感じでデータがあるとこだけ出力される。

####ほしいイメージ
| 日付 | 売上件数 | 売上金額 |
|:-----------|------------:|:------------:|
| 2015-12-01       |        3 |     300     |
| 2015-12-02     |      0 |    0    |
| 2015-12-03     |      0 |    0    |
| 2015-12-04     |      4 |    400    |
| 2015-12-05       |        3 |     300     |
| ...       |        ... |     ...     |
| 2015-12-30         |          3 |      300      |
| 2015-12-31         |          3 |      300      |

売上がない日は０で出力したい。

# 解決策
DateIntervalを使って対象月の全日付を取得する

```lang:php
$date = '2015-12'; //本来はformからのリクエストなので動的
$begin = new DateTime(date('Y-m-d', strtotime('first day of '. $date)));
$end = new Datetime(date('Y-m-d', strtotime('first day of next month '. $date)));
$interval = new DateInterval('P1D');
$daterange = new DatePeriod($begin, $interval, $end);
foreach($daterange as $date){
    echo $date->format("Y-m-d") . "\n";
}
```

```lang:output
2015-12-01
2015-12-02
2015-12-03
2015-12-04
2015-12-05
2015-12-06
2015-12-07
2015-12-08
2015-12-09
2015-12-10
2015-12-11
2015-12-12
2015-12-13
2015-12-14
2015-12-15
2015-12-16
2015-12-17
2015-12-18
2015-12-19
2015-12-20
2015-12-21
2015-12-22
2015-12-23
2015-12-24
2015-12-25
2015-12-26
2015-12-27
2015-12-28
2015-12-29
2015-12-30
2015-12-31
```

あとはDBのデータと付き合わせて出力すれば、欲しいものは手に入る。


# 参考
http://php.net/manual/ja/class.dateinterval.php

# 余談
例として使ったような売上げデータの場合は注文tableと集計結果tableを分けて作って、レポートは集計結果tableを参照すべきだと思う。
今回は諸事情で注文テーブル(みたいな)tableを利用したので、こんな風な処理が必要になった。
ZabbixでMerry Christmasの準備をする (3.0 でオリジナルテーマを作ろう)

残すところ、カレンダーも私を含め2日となりました。
今更ですが、AdventCalendarについておさらいしてみましょう。

# 本来のAdventCalendarとは

[wikiより](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%89%E3%83%99%E3%83%B3%E3%83%88%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC)

アドベントカレンダー（Advent calendar）は、クリスマスまでの期間に日数を数えるために使用されるカレンダーである。アドベントの期間（イエス・キリストの降誕を待ち望む期間）に窓を毎日ひとつずつ開けていくカレンダーである。すべての窓を開け終わるとクリスマスを迎えたことになる。
但し毎年変化するアドベントの期間に関わらず、実際には12月1日から開始し24個の「窓」がある場合が多い。アドベントカレンダーは、窓を開くと写真やイラスト、詩や物語の一編、チョコレートなどのお菓子、小さなプレゼント等が入っていることが多い。宗教色の強いものもあれば、単に娯楽用のものもある。

という、**クリスマスまでの日数を数えるカレンダー**です。
私、大事な事を忘れていました。
**今日がクリスマスイブ**だという事を。
Zabbixカレンダーでもクリスマスを楽しまなければいけないのではないでしょうか。

# 今回の目的

Zabbix 3.0 の クリスマステーマを作成する

## どういったものが出来るか

今回紹介させていただく内容で、このイメージテーマが出来ます。
![christmas.png](https://qiita-image-store.s3.amazonaws.com/0/47801/39a13adc-26d2-528d-9e39-28b00d394fb2.png)

背景の雪も、CSS3で降り続く仕様となっています。

## 2.2 や 2.4では使えないのか？

Zabbix 3.0ではUIがフラットデザインに変更されており、それに伴いテーマのCSSも大きく変更されています。
試しに3.0用に作成したテーマを同じ手順でおいてみると
![christmas2.png](https://qiita-image-store.s3.amazonaws.com/0/47801/5ba9642b-e54f-0b53-9442-81e9035d6fdb.png)

んー、残念な感じです。

## テーマ作成の仕様が少し変わったようです

2.xまでの仕様だと、zabbix-webディレクトリ(デフォルトだと /usr/share/zabbix)のstylesにテーマを配置するのですが、この中の構成としてオリジナルテンプレートを置く場合はthemesディレクトリの中に任意でディレクトリを作成し、その中に"main.css"を配置させるというものでした。

`ex) /usr/share/zabbix/styles/themes/christmas/main.css`

ですが、3.0からはどうやら仕様がかわりstylesの中に直接テーマに沿ったCSSを配置させる事で導入が可能なようです。

`ex) /usr/share/zabbix/styles/christmas.css`

では実際に私がカスタムしたテーマを使用してみましょう。

# Christmas themeの導入

## 事前注意

* 本テーマを導入した事でのZabbix障害については、_BSmile_は一切の責任を負いません事ご承知おきください。
* 本番環境へ導入する際は、必ず管理者の許可を得て使用してください。

## 構築した環境

* DigitalOcean  CentOS 7.1 x64
* 1 CPU
* 512MB memory
* 20GB SSD
* pre-zabbix-3.0.0 alpha5-57087

## 導入手順

* git からのクローン

```bash
$ git clone https://github.com/bsmile/zabbix-christmas-theme.git
```

* ファイルのコピー

過去に**Z.php**を変更した事が無い方が下記を実行

```bash
$ cd zabbix-christmas-theme/frontends
$ cp -rp ./* /usr/share/zabbix/  #インストール方法によってディレクトリは異なります。
```

**Z.php**を変更したことがある方は

```bash
$ cd zabbix-christmas-theme/frontends
$ cp -rp ./styles /usr/share/zabbix/  #インストール方法によってディレクトリは異なります。
$ vi /usr/share/zabbix/include/classes/core/Z.php
```

**Z.php**を変更したことがある方は、続いてclass Z extends ZBase 内に下記を追記してください。

```php
/**
 * A wrapper for the ZBase class.
 *
 * Feel free to modify and extend it to change the functionality of ZBase.
 */
class Z extends ZBase {
  public static function getThemes() {
    return array_merge(parent::getThemes(), array(
      'christmas' => _('Christmas theme')
    ));
  }
}
```

以上で導入完了です。

## どのようにして作成したか

基本的には、既存で存在していた[blue-theme.css]をコピーして作成しています。
これをクリスマスカラーのカラーチャートを参考にしながら色の調整を行っただけです。

調整後は見た目が寂しいのでSnow Effect を組み込んでみました。
URLは下部の[参照したSnow Effect]をご確認下さい。

# 参照したSnow Effect

http://bradsknutson.com/blog/css-snow-effect/

# いよいよ

明日は最終日です。
qryuuさんどうぞよろしくお願いします！
pecoを使ってissueをコマンドラインから開く方法

開発中にissueを見ようとして、

 - ブラウザを開き
 - issueを検索して
 - でも日本語で検索してもうまく見つからなくてあーーーー。

っていうことありませんか。僕はあります。
issueもコマンドラインで開きたいし、賢く日本語で検索したいですよね。実現しましょう！

### ghiとpecoの導入

まず、コマンドラインからissueを作成・閲覧などができる、[ghi](https://github.com/stephencelis/ghi)というruby製のツールをインストールします。

```bash
$ brew install ghi
```

利用するためには、ユーザー認証を行う必要があるので、それも併せて行いましょう。

```bash
$ ghi config --auth mamoru0217
Enter mamoru0217's GitHub password (never stored)
```

#### peco

もはや説明いらないと思いますが、pecoもインストールしておきましょう。こちらも、homebrewで一発です。

```bash
$ brew install peco
```

pecoの使い方について詳しくはhttp://qiita.com/xtetsuji/items/05f6f4c1b17854cdd75b などが参考になります。

#### pecoで日本語検索を可能にする

![Untitled.gif](https://qiita-image-store.s3.amazonaws.com/0/25137/e8074e89-035b-27d1-f39a-ec64c59b80c9.gif "Untitled.gif")

日本語がタイトルに含まれているissueも多いとので、[migemogrep](https://github.com/peco/migemogrep)でローマ字から日本語のサーチができるようにしておきましょう。

```bash
$ brew tap peco/peco
$ brew install migemogrep
```

その後、`~/config/peco`以下に`config.json`を作成します。

```config.json
{
  "CustomFilter": {
    "Migemo": {
      "Cmd": "migemogrep",
      "BufferThreshold": 10000
    }
  }
}
```

すると、pecoを利用している時に、`ctrl + r`で選択できる`filter`に`Migemo`が追加されて、ローマ字から日本語の文章をサーチすることができるようになります。

![Untitled.gif](https://qiita-image-store.s3.amazonaws.com/0/25137/e8074e89-035b-27d1-f39a-ec64c59b80c9.gif "Untitled.gif")


### とりあえず以下を書けば良い

上記のインストールが全て完了したら、`.bashrc`などに、例えば

```bash
show_open_issues_on_web() {
  ghi show -w $(ghi list --filter 'all'| peco)
}
alias si=show_open_issues_on_web
```

と書けば、

![sake.gif](https://qiita-image-store.s3.amazonaws.com/0/25137/c39c8720-bc79-f02c-12cb-5ea8c6d84701.gif "sake.gif")

というように、コマンドラインからissueのリストを呼び出し、ローマ字で日本語検索した上で、webで閲覧できるようになります。

やっていることはよくある`peco`の使い方ですね。

### 簡単にghiの説明

`ghi list`で、カレントディレクトリのレポジトリのすべてのopen issue（pull request含む）のリストを出すことができます。

```bash
$ ghi list
# wantedly/wantedly open issues
  18062: 年末年始対応について ↑
  18061: 高速化アイデアのまとめ 10
  18057: 利用できる記号について Question
  ...
```

 - `↑`が付いているものはpull requestです
 - タイトルの横についている数字は、コメントの数です
 - タイトルの横についている文字は`label`です

#### 利用できるオプション

よく使いそうなものを挙げておきます。

|オプション名|説明|
|---|---|
|-s, --state 'open' or 'close'|issueのstateを指定（デフォルトはopen)|
|-L, --label <labelname>...|ラベルを指定|
|-u, --[no-]assignee [<user>]|<user>がアサインされたもの|
|--mine(--assigneeと同じ)|自分がアサインされたもの|
|-U, --mentioned [<user>]|メンションされたもの|
Inquirer.jsを使用してコマンドライン上で対話形式での質問を行う

[Inquire.js](https://github.com/SBoudrias/Inquirer.js/
)を使用すると、コマンドライン上での入力指示がとても捗る。

入力としては、通常のテキスト入力、リストからの選択、チェックボックス、yes/no、パスワード入力などから選ぶことができる。

## とりあえず、リストからの入力とテキスト入力を試してみたよ - GIFアニメ
[![https://gyazo.com/225a1acbf194bbccc2fee4965217bf62](https://i.gyazo.com/225a1acbf194bbccc2fee4965217bf62.gif)](https://gyazo.com/225a1acbf194bbccc2fee4965217bf62)

## ソース
```index.js
"use strict";
let inquirer = require("inquirer");
let myQuestion = {
    "type": "list",
    "name": "myQuestion1",
    "message": "choice mood",
    "choices": ["good", "sad"]
};
let myQuestion2 = {
    "type": "input",
    "name": "myQuestion2",
    "message": "もうう少し詳しく教えて下さい。"
};
inquirer.prompt([myQuestion, myQuestion2], (answer) => {
    console.log("answer:" + answer.myQuestion1, answer.myQuestion2);
});

```
9VAe(きゅうべえ)のアニメGIF出力の２つの秘密

## 9VAe（きゅうべえ）とは

「9va-pi」きゅうべえpi は、2015年「みんなのラズパイコンテスト」で優良賞をもらった**フリーのアニメーション作成ソフト**です。[ラズベリーパイ](https://ja.wikipedia.org/wiki/Raspberry_Pi)用に開発されましたが、**Windows版、Mac版、Ubuntu版**もあります。9VAe（きゅうべえ）が総称です。

- [9va-win (Windows版)](http://www.d1.dion.ne.jp/~danjiro/9va/winjp.html)
- [9va-mac (Macintosh版)](http://www.d1.dion.ne.jp/~danjiro/9va/index.html)
- [9va-pi (ラズベリーパイ/Ubuntu版)](http://www.d1.dion.ne.jp/~danjiro/9va/pijp.html)

## 形の変形ができる２Ｄキーフレームアニメーション

9VAe（きゅうべえ）は、形の補間ができるのが特長です。図形の移動、サイズ変更、回転、パスにそった移動などができるソフトはよくありますが、形を正確に変形できるソフトは、あまりありません。

まず、下のアニメを見てみましょう。

![アニメGIF出力320-10.gif](https://qiita-image-store.s3.amazonaws.com/0/67734/639d1778-17b4-3b14-bb18-9cd72fc17f34.gif)

マシンガンの銃口の黄色い閃光と赤い炎の間のアニメーションが、２つのキーフレームから作られており、その間の時間は１秒に設定されています。これを秒10コマで出力したので、10枚の絵で発砲が表現されています。



次のアニメは、銃口の部分だけを取り出したものです。左側の２枚の絵がキーフレームです。


![アニメGIF出力機能320-10.gif](https://qiita-image-store.s3.amazonaws.com/0/67734/aa1f2089-1322-ac9d-6b21-0fb0437ca3c5.gif)





中央のアニメは、キーフレーム間が１秒で、中間の絵８枚が自動生成され、黄色い閃光から赤い炎まで変化していきます。

右側のアニメは、キーフレームの間を、0.2秒に設定したアニメです。この場合、１秒間に黄色と赤を５回繰り返しています。

##秒間のコマ数が少ないときのアニメGIF出力

さて、問題にしたいのは、秒間のコマ数が少ない場合です。上のアニメを秒間のコマ数５コマ（0.2秒間隔）で出力するとどうなるでしょうか。右側のキーフレームの間隔も0.2秒なので、時間どおりに出力すれば、すべて黄色か、すべて赤か、それとも中間の形になってしまいます。

そうすると、銃が発砲しているようには見えません。9VAe(きゅうべえ)には、それを防ぐ機能がついており、以下のような出力になります。点滅の間隔は上のアニメより遅くなりますが、点滅しているように見えます。

![アニメGIF出力機能320-5e.gif](https://qiita-image-store.s3.amazonaws.com/0/67734/d8d313bd-4ee0-2cd8-cf77-7afe6fd7ec35.gif)



さらに、秒間のコマ数を３コマに減らすと以下のようになります。中央のアニメと右側のアニメで異なる調整が行われている点に注目してください。

![アニメGIF出力機能320-3e.gif](https://qiita-image-store.s3.amazonaws.com/0/67734/fd0acf5b-cf1a-495d-984f-7b257a2aa693.gif)



##ぶれ線

上の炎には、**ぶれ線**の効果がつけられています。
キーフレーム１枚の絵でも、ぶれ線の効果をつければ、下のように手描きアニメのような表現ができます。



![アニメGIFぶれ機能320-10e.gif](https://qiita-image-store.s3.amazonaws.com/0/67734/0eccad5f-8550-ba80-04ae-7bad39eb3c79.gif)


##9VAe(きゅうべえ)の利用方法

9VAe（きゅうべえ）は

* 操作が簡単で初心者でも使える。
* アニメGIF出力すれば、Qiitaや、PowerPointにはめ込める。
* データがベクトル形式なので修正が簡単。
* 一度作成したアニメは、素材として、流用できる。
* SVG形式のベクトルデータを読み込めば、内部形式に変換され、形が変形するアニメが作れる。
* アニメGIF、アニメSVG、QuickTime（9va-mac）、連番出力（9va-win, 9va-pi）ができる。

9VAe（きゅうべえ）は、ちょっとしたアニメ作成に便利で役立つお勧めのフリーソフトです。

##おまけ
サンプルアニメーションは、Pixiv「うごイラ」の[【9VAe】快盗ハラマン「実体TV」第３話](http://www.pixiv.net/member_illust.php?mode=medium&illust_id=53925294)の１シーンです。興味のある方はご覧ください。
Browserstack Screenshot API使い方

[Browserstack Screenshot API](https://www.browserstack.com/screenshots/api)を使ってみたので、まとめておきます。

まずRuby Clientをインストールします。

```rb
gem install "browserstack-screenshot"
```

そして、以下の容量でscreenshotが取得できます。

```rb
# Screenhost APIの初期化
config = { username: Settings.browserstack.username, password: Settings.browserstack.password }
client = Screenshot::Client.new(config)

# Browser APIの結果はObject Arrayなので、`Windows_XP_chrome_35.0`のようなキーのマップに変換しておく
all_browsers = client.get_os_and_browsers.inject({}) do |data, browser|
  key = browser.slice(:device, :os, :os_version, :browser, :browser_version).select{ |k, v| v.to_s != "" }.map{ |k, v| v.to_s.gsub(/\s+/, "-").gsub(/[^a-zA-Z0-9.\-]/, "") }.join("_")
  data[key] = browser
  data
end

# 実際はここでファイルに保存等しておく

# browser名をキーに設定を構築する
browsers = (ENV["BROWSERSTACK_BROWSERS"] || "OS-X_Lion_firefox_37.0").split(",").map { |name| all_browsers[name] }
request = {
  url: "http://www.google.com/",
  win_res: ENV["BROWSERSTACK_WINDOWS_RESOLUTION"], #Options : "1024x768", "1280x1024"
  mac_res: ENV["BROWSERSTACK_MAC_RESOLUTION"], #Options : "1024x768", "1280x960", "1280x1024", "1600x1200", "1920x1080"
  quality: "compressed",
  wait_time: 10, 
  orientation: ENV["BROWSERSTACK_ORIENTATION"], #Options: "portrait", "landscape"
  browsers: browsers
}

# Screenshotの取得
request_id = @client.generate_screenshots(request)
while @client.screenshots_status(request_id) != "done"
  sleep 5
end
results = @client.screenshots(request_id)
results[:image_url]
```

これだけです。

実際の画像ファイルはブラウザスタック側にあるので、以下のようにindexファイルを作ってあげると見栄えが良いです。


Screenshotを取って来てS3にindexファイルをアップするサンプルRakeタスクをGithubにあげました。

<img width="1199" alt="Screen Shot 2015-12-24 at 1.29.37 AM.png" src="https://kaizen.qiita.com/files/a6235757-0f2d-b4bc-8ed0-cedff0d5dac0.png">

https://github.com/dtaniwaki/browserstack-screenshot-task
node.jsで定期的にツイッター検索して、メール送信する

最近、山手線にホームドア設置されて遅延すること多くないですか？
社畜の僕は遅刻しないよう、毎朝ツイッターで山手線で検索しています。
毎朝ツイッター検索するのがめんどくさいので、node.jsを使って、自動化しました。
環境はCentOS6.5、node.jsはv5.2.0です。

これを読むと分かること
1. node.jsでツイッター検索
2. node.jsでメール送信
3. cronに登録し、1と2を定期的に自動実行

#### node.jsでツイッター検索
twitパッケージを使用しました。
https://github.com/ttezel/twit

書いてあるとおり、twitをインストールします。
``` npm install twit
```

tokenなどが必要になるので、下記ページで登録します。
入力項目通りに入れてくだけなので説明は端折ります。
https://apps.twitter.com/

出来上がったjavascriptは下記のとおりです。
twitに設定するキーなどは登録したキーをコピペしてください。

``` lang:javascript
var Twit = require('twit')

var T = new Twit({
    consumer_key:         ''
  , consumer_secret:      ''
  , access_token:         ''
  , access_token_secret:  ''
});

T.get('search/tweets', { q: '山手線', count: 30 }, function(err, data,
  var statuses = data['statuses'];
  for (var i = statuses.length - 1; i >= 0; i--) {
    var user_name = statuses[i].user.name;
    var text = statuses[i].text;
    console.log(i + ' : ' + user_name + ' > ' + text);
  };
});
```

出来上がったjsを実行します。
ファイル名は適宜読み替えてください。
``` node twit_yamanote.js
```

実行するとコンソールに山手線でツイッター検索した結果が出ます。

#### node.jsでメール送信
メール送信はnodemailerを使いました。
http://nodejs.osser.jp/node/node-nodemailer/
とりあえず、インストール！
``` npm install nodemailer
```

これもドキュメント通りに実装します。
出来上がったjsは下記のとおりです。

``` lang:javascript
var nodemailer = require('nodemailer');
var transporter = nodemailer.createTransport();
transporter.sendMail({
    from: 'hoge@gmail.com',
    to: 'fuga@ezweb.ne.jp',
    subject: 'ハロー',
    text: 'ハローニューワールド'
});
```

実行してみましょう。
``` node nodemailer.js
```

これでtoに設定したメールアドレスにメールが届くと思います。
めっちゃ簡単ですね。これは普通にびっくりしました。

ちなみにメール本文に設定したのは、プログラミング言語でよくあるhello worldではなく、
ハローニューワールド。アイカツの名曲です。
[ぜひ聴いてみてください。](https://www.youtube.com/watch?v=3621FRLtjjA)

1と2で作ったjsを合体させて、最終的に下記のようなjsファイルができました。

``` lang:javascript
var Twit = require('twit')

var T = new Twit({
    consumer_key:         ''
  , consumer_secret:      ''
  , access_token:         ''
  , access_token_secret:  ''
});

// メール本文用の文字列
var mail_text = '';
T.get('search/tweets', { q: '山手線', count: 30 }, function(err, data, response) {
  var statuses = data['statuses'];
  for (var i = statuses.length - 1; i >= 0; i--) {
    var user_name = statuses[i].user.name;
    var text = statuses[i].text;
    mail_text += i + ' : ' + user_name + ' > ' + text;
  };

  var nodemailer = require('nodemailer');
  var transporter = nodemailer.createTransport();
  transporter.sendMail({
    from: 'hoge@gmail.com',
    to: 'fuga@ezweb.ne.jp',
    subject: '山手線遅れてね？',
    text: mail_text
  });
});
```


#### cronに登録し、1と2を定期的に自動実行
crontabに普通に登録します。
``` 59 7 * * * node /hoge/twit_yamanote.js
```

node.jsにもcronのようなパッケージがありますが、
cronより便利な点が見当たらなかったので、今回は使用していません。
https://github.com/ncb000gt/node-cron
あえて、node-cronを使用する特長があれば、ぜひ知りたいです。

cronに設定している時間を見ていただくとお分かりのように、
今勤めている会社は9時始業でとてもつらいです。
自動化されたメールを見て、もう少しゆっくりできるかどうかを
素早く判断し、朝のちょっとした時間を有効活用したいものです。
長い英単語の成分分析

[発表！長い英単語トップ10。1位は驚きの語数](http://nzlife.net/archives/9581)
の記事を見ると $1$ 位に輝いている英単語は化学の専門用語でタンパク質の一種だそうです。
通称 Titin (チチン) と呼ばれているそうで、その単語の長さは驚きの
**18万9819語**
だそうです！！
全文を見たい場合は[thelongestwordinenglish.txt](http://nzlife.net/wp-content/uploads/thelongestwordinenglish.txt)に載っているそうなので早速見てみました。

すると、なんか似ている文字列が複数あるではないですか。。。
だったらどんな文字がどれだけ出ているかを調べたくなってしまいますよね。

そこで超高機能な Mathematica さんに調べてもらいました。

```Mathematica:thelongestwordinenglish.nb
L1 = ToLowerCase@Import["http://nzlife.net/wp-content/uploads/thelongestwordinenglish.txt"];
L2 = StringInsert[L1, ",", First[#] + 2 & /@ StringPosition[L1, "yl"]];
L3 = StringReplacePart[L2, "phenylalanyl", StringPosition[L2, "phenyl,alanyl"]];
L4 = Sort[Flatten[{Union[#], Length[#]}] & /@ Split@Sort@StringSplit[L3, ","], #1[[2]] > #2[[2]] &];
Export["thelongestwordinenglish.csv", L4]
```

まずは、 L1 にさっきのリンク先の Text データをすべて小文字にしてインポート。
続いて L2 はアミノ酸の単語を区切るために **yl** の後をカンマで区切ります。
L3 では phenylalanyl が phenyl,alanyl と解釈されているのでその部分を修正
L4 は

```
StringSplit["string",patt]
文字列を文字列式 patt にマッチするデリミタで区切って部分文字列に分割する．
```

という素晴らしい関数があるので、これで区切ってソートして、更にスプリット。
それらを Union と Length を使って数を調べて、数の多い順にソートして欲しいデータを作ります。
これを csv などにしてエクスポートしてあげれば見やすいデータの完成です！

因みにそのあとゴニョゴニョと備考などを付けてまとめたものが以下のものです。

|    単語     | 個数  | アミノ酸(英語) |    アミノ酸    | 略語($3$文字) | 略語($1$文字) |
|:-----------:|:----:|:-------------:|:--------------:|:---:|:-:|
|leucyl       | 1147 | leucine       | ロイシン        | Leu | L |
|glutamyl     |  971 | glutamic acid | グルタミン酸    | Glu | E |
|glutaminyl   |  763 | glutamine     | グルタミン      | Gln | Q |
|seryl        |  730 | serine        | セリン         | Ser | S |
|lysyl        |  697 | lysine        | リシン         | Lsy | K |
|alanyl       |  571 | alanine       | アラニン       | Ala | A |
|aspartyl     |  465 | aspartic acid | アスパラギン酸  | Asp | D |
|valyl        |  430 | valine        | バリン         | Val | V |
|arginyl      |  425 | arginine      | アルギニン      | Arg | R |
|threonyl     |  413 | threonine     | トレオニン      | Thr | T |
|isoleucyl    |  391 | isoleucine    | イソロイシン    | Ile | I |
|glycyl       |  290 | glycine       | グリシン        | Gly | G |
|asparaginyl  |  289 | asparagine    | アスパラギン    | Asn | N |
|histidyl     |  238 | histidine     | ヒスチジン      | His | H |
|phenylalanyl |  206 | phenylalanine | フェニルアラニン | Phe | F |
|methionyl    |  204 | methionine    | メチオニン       | Met | M |
|prolyl       |  176 | proline       | プロリン         | Pro | P |
|tyrosyl      |  142 | tyrosin       | チロシン         | Tyr | Y |
|tryptophyl   |  131 | tryptophan    | トリプトファン    | Trp | W |
|cysteinyl    |  117 | cysteine      | システイン       | Cys | C |
|　           |      |               |                 |     |   |
|leucine      |    1 | leucine       | ロイシン         | Leu | L |

合計で $8797$ ものアミノ酸がありました。
シェルスクリプトは最も扱いやすい言語

## はじめに

この前、Qiita APIを使って、「フォローしているけど、フォローされていない」ユーザーを取得するやつを何となく書いたことがあったのだけど、自分では短く書けた気がするけど、他の言語ではこうは行かないなあと思ったり(煽り)。

ここで、もっと短く書けるぞという人やシェルスクリプト(Shell Script)以外で書いたという人は、是非、挑戦してみてください(コメント!)。

```bash:
#!/bin/bash

user=$USER
page=`curl -sL http://qiita.com/${user}/following_users | grep data-pjax | tail -n 1 | cut -d "?" -f 2 | cut -d '"' -f 1 | cut -d = -f 2`

following=$(for (( i=1;i<=${page};i++ ))
do
	html=`curl -sL "http://qiita.com/${user}/following_users?page=${i}" | grep 'span itemprop="name"' | tr '>' '\n' | grep -A1 'itemprop="name"' |cut -d '<' -f -1`
	echo "$html"
done)

followers=$(for (( i=1;i<=${page};i++ ))
do
	html=`curl -sL "http://qiita.com/${user}/followers?page=${i}" | grep 'span itemprop="name"' | tr '>' '\n' | grep -A1 'itemprop="name"' |cut -d '<' -f -1`
	echo "$html"
done)

d=`echo "$following"`
d=$d`echo "$followers"`
user=`echo "$d"|sort | uniq -u`

case $user in
	"")	echo ok ;;
	*)	echo "http://qiita.com/${user}" ;;
esac
```

## Shell Scriptの扱いやすさ

では、本題に入りたいと思います。Shell Scriptは、他の言語ではとっつきにくいことが、割りとすぐに実現できてしまいます。

これはなぜなのかというと、Shell Scriptはとても直感的だからだと思います。

出力が基本的に端末に出力され、また、パイプを繋いだりする処理の感覚的なわかり易さなどが、この「直感的」であることに寄与していると考えます。

通常の言語では、例えば、出力は、`print`を使わなければならなかったりしますが、ほぼすべてのコマンドは、結果をデフォルトで出力します。つまり、Shell Scriptは、とてもシンプルな流れになっているわけです。

この点、Shell Scriptは基本的にはただのコマンドの羅列です。確かに、書き方によっては、一見シンプルではなくなるかもしれませんが、やはり作る側にとってはシンプルだと思います。

## 他の言語との比較

他の言語とShell Scriptの比較と言っても漠然としすぎていますが、RubyやPython, PHPなどを想起していただければと思います。

Shell Scriptは、これらの言語よりも遥かに簡単なものを簡単に作るのに適していると私は思います。

例えば、あるAPIを試したいとしましょう。

この場合、ほとんどのエンジニアやハッカーは、`curl`コマンドを叩くことから始めると思います。

例えば、[GitHub API v3](https://developer.github.com/v3/)のドキュメントを見てみましょう。

そこには必ずと言っていいほど、`curl`コマンドが載せられているはずです。

```bash:
$ curl -i "https://api.github.com/repos/vmg/redcarpet/issues?state=closed"
```

この意味は、「まずは`curl`を叩け、話はそれからだ」や「ワンライナーやShell Scriptで試してね」ということでしょう←なにそれ

ここで、簡単なものを簡単に作るのに、Shell Scriptが第一候補に挙げられる事が多いのも理解していただけたかなと思います。

他にもShell Scriptが推される様々な理由があります。例えば、Linuxを使っているとして、Linuxの仕組み的なものから考えても、Shell Scriptはスタートアップとして、何かを試すにはお手軽さがあります。

## Shell Scriptの弱点

しかし、Shell Scriptは、簡単なものを簡単に作れる反面、複雑なものを複雑に作ることには向いていない言語でもあります。

複雑なものを複雑に作るとは、例えば、コードの量が非常に多くなることが予想されるシステムだとか、複合的なWebアプリだとかがそれに当たります。

この場合、一般的な言語で書いたほうが、Shell Scriptで書くよりも、遥かに閲読性に優れ、メンテナンスする際に優位ですし、構造上もShell Scriptでかくよりも遥かにシンプルなものにすることが可能です。

## 結論

Shell Script、いいですよー。お手軽で簡単、とても便利。

ただし、大きなものを作る時は他の言語でやりましょう。

おわり。

## 追記

Qiita APIは、同一IPからの連続的な要求を制限しています。したがって、こういう時は、Access Tokenを使うと便利です。Qiita Userは設定からすぐに使えるようになっています。Tokenを使ったアクセスは、制限が緩和されます。

```bash:
$ url="https://qiita.com/api/v2/items/${USER}"
$ token=xjisjaiojo939u02nvdiaj34
$ curl -H "Authorization: Bearer $token" $url
$ curl -H "Authorization: Bearer $token" $url | jq -r '.body'
```
Androidで非同期処理

#概要
音楽プレイヤーを作ろうと思った際に（まだできていない。。。）
Androidで非同期をすることが多かったのでメモ程度に残しておきます。
##Service
非同期で処理する際にずっと処理させ続けたい場合に
使用したりする。
例 音楽の再生
コードはこんな感じ

```java:service.java
class xxxService extends Service {      
      @Override
      public void onCreate() {
          // 起動時に必要な処理
      }
      @Override
      public int onStartCommand(Intent intent, int flags, int startId){
            // startServiceが実行されるたびに呼ばれる（僕はstateパターンを適用してActivityとはやりとしている。
      }
}
```
AndroidManifest.xmlにも追加が必要
`        <service android:name=".xxxService" >
</service>`
今回は音楽プレイヤーだったので音楽の再生が止まって待っている場合は
サービスを止めたかったのでOnCreate時に別スレッドを生成して止まっているか監視するようにしている。
## AsyncTask
結構有名なので今更間もありますが。。。
非同期で実行して実行した結果をUIとかに反映するときに便利なクラス
個人的によくやるのがAsyncTaskにinterfaceを定義しておいて定義したinterfaceを
Activityに継承させてコンストラクタ時に継承したクラスをinterfaceとして受け取ってActivityへ非同期の結果を反映させる。

```java:Async.java
public class Async extends AsyncTask<String, Integer, Object> {
	private HogeInterface listener;

	public Async(HogeInterface hoge) {
		listener = hoge;
	}

	@Override
	protected object doInBackground(String... arg) {
        // 非同期で実行される処理
		return new Object();
	}

	@Override
	protected void onPostExecute(Object result) {
        // 非同期完了時に呼ばれる コンストラクタで受け取った実装済みの処理を呼び出す
        listener(result);
	}

    // 実行結果を反映させたい処理を書く
	public interface HogeInterface {
		public void Hoge(Object o);
	}
}
```

## ScheduledExecutorService
こいつはjavaに用意されているクラスです。こいつに非同期で実行したい処理を追加していった順番で処理してくれる。

例 SeekBarでバーを増やすとき（極端すぎる。。。）
seekbarを設定する例

```ExecutorService.java
ExecutorService{
    private ScheduledExecutorService scheduled;
    public void SetUp(){
        // 1つずつスレッドを動作させていく
        scheduled = Executors.newSingleThreadScheduledExecutor();
         // 引数の1番目はRunnableインタフェースを実装したオブジェクトを指定
         // 2番目は、scheduleAtFixedRateメソッド呼び出し後から最初のタスクを実行するまでの準備期間を指定。ここでは、0。
         // 3番目は、タスクを実行する周期を指定します。ここでは、1000[ms]を指定(今回は一つのタスクしか登録してないからあまり意味はない)。
         // 4番目は、引数(2番目と3番目)で指定している値の単位を示す列挙型TimeUnitの値を指定。ここではTimeUnit.MILLISECONDSを指定しています。
         // 戻り値は、登録したタスクを表わすScheduledFutureインタフェース実装オブジェクト。
        scheduledEx.scheduleAtFixedRate(new Seek(), 0, 500, TimeUnit.MILLISECONDS);
        
    }
    private class Seek implements Runnalbe {
        @overreid
        public void run() {
            // seekbarを設定する処理
        }
   }
}
```

# まとめ
音楽プレイヤーを作っていく際に必要そうなものだけ記述しているので実際はもっとたくさんあると思います。個人的な備忘録も含めて書いています。もっとシンプルにかけたり面白い方法とかご存知の方がいらっしゃれば是非教えて頂きたいです。今年中には何とか出しておきたい。。。