OmniAICreator/Qiita-1.07M huggingface dataset:
炎の型工房 火の型 16日目 : 雪の結晶を降らしてみよう

[<ruby>炎<rt>ほのお</rt></ruby>の<ruby>型<rt>かた</rt></ruby><ruby>工房 <rt>こうぼう</rt></ruby>ScratchとDartでゲームプログラム<ruby>入門<rt>にゅうもん</rt></ruby> Advent Calendar 2016](http://qiita.com/advent-calendar/2016/firefirestyle-studio)
の<ruby>記事<rt>きじ</rt></ruby>です

# <ruby>雪<rt>ゆき</rt></ruby>の<ruby>結晶<rt>けっしょう</rt></ruby>を<ruby>降<rt>ふ</rt></ruby>らしてみよう

<img width="500" alt="v001.png" src="https://qiita-image-store.s3.amazonaws.com/0/54192/b6eaff08-2cc2-24dc-2188-a8022bd686ff.png">


## クローンを<ruby>使<rt>つか</rt></ruby>ってみよう
クローンを<ruby>使<rt>つか</rt></ruby>って<ruby>雪<rt>ゆき</rt></ruby>の<ruby>結晶<rt>けっしょう</rt></ruby>を<ruby>降<rt>ふ</rt></ruby>らすアニメーションを<ruby>作<rt>つく</rt></ruby>ってみよう。


## コードを追加

### <ruby>雪<rt>ゆき</rt></ruby>の<ruby>結晶<rt>けっしょう</rt></ruby>の<ruby>絵<rt>え</rt></ruby>を<ruby>書<rt>か</rt></ruby>いて、スクリプトを<ruby>追加<rt>ついか</rt></ruby>する
<img width="600" alt="v002.png" src="https://qiita-image-store.s3.amazonaws.com/0/54192/2e1f4703-d84f-f8e3-fc37-96bfb681d224.png">


* <ruby>initSnowflake<rt>ゆき の けっしょう を しょきか する</rt></ruby>  
  「<ruby>画面<rt>がめん</rt></ruby>を<ruby>再描画<rt>さいびょうが</rt></ruby>せずに<ruby>実行<rt>じっこう</rt></ruby>する」にチェックをいれる

* <ruby>moveSnowflake<rt>ゆき の けっしょう を いどう する</rt></ruby>    
「<ruby>画面<rt>がめん</rt></ruby>を<ruby>再描画<rt>さいびょうが</rt></ruby>せずに<ruby>実行<rt>じっこう</rt></ruby>する」にチェックをいれる
* 変数について    
  「このスプライトのみ」にチェックをいれる

### <ruby>背景<rt>はいけい</rt></ruby>にスクリプトを<ruby>追加<rt>ついか</rt></ruby>する
<img width="600" alt="v003.png" src="https://qiita-image-store.s3.amazonaws.com/0/54192/c4af3d1b-c265-f15c-7181-d59a30697592.png">


### <ruby>確認<rt>かくにん</rt></ruby>する
https://scratch.mit.edu/projects/137147204/

<img width="500" alt="v004.png" src="https://qiita-image-store.s3.amazonaws.com/0/54192/ec9ff4e7-6291-e541-0c49-95357dfdef78.png">

1. <ruby>緑<rt>みどり</rt></ruby>の<ruby>旗<rt>はた</rt></ruby>をクリックすると、<ruby>雪<rt>ゆき</rt></ruby>の<ruby>結晶<rt>けっしょう</rt></ruby>が<ruby>降<rt>ふ</rt></ruby>ること

## どう<ruby>組<rt>く</rt></ruby>む?

どのような<ruby>順番<rt>じゅんばん</rt></ruby>でコードを<ruby>組<rt>く</rt></ruby>むと<ruby>良<rt>よ</rt></ruby>いでしょうか?
* クローンを、<ruby>使<rt>つか</rt></ruby>ったことがないので、クローンを<ruby>試<rt>ため</rt></ruby>すところから作る。
* <ruby>雪<rt>ゆき</rt></ruby>の<ruby>結晶<rt>けっしょう</rt></ruby>の<ruby>動<rt>うご</rt></ruby>きを<ruby>作<rt>つく</rt></ruby>るところから<ruby>始<rt>はじ</rt></ruby>める。

どれも<ruby>正解<rt>せいかい</rt></ruby>だと<ruby>思<rt>おも</rt></ruby>います。

<ruby>私<rt>わたし</rt></ruby>は<ruby>以下<rt>いか</rt></ruby>の<ruby>順番<rt>じゅんばん</rt></ruby>で<ruby>組<rt>く</rt></ruby>みました

1. <ruby>雪<rt>ゆき</rt></ruby>の<ruby>結晶<rt>けっしょう</rt></ruby>の<ruby>絵<rt>え</rt></ruby>を<ruby>描<rt>か</rt></ruby>く
2. クローンして<ruby>増<rt>ふ</rt></ruby>やしてみる
3. クローンした<ruby>結晶<rt>けっしょう</rt></ruby>を<ruby>動<rt>うご</rt></ruby>かしてみる
4. <ruby>移動速度<rt>いどうそくど</rt></ruby>やサイズをランダムに<ruby>変更<rt>へんこう</rt></ruby>するようにしてみる


## Thanks
<div>
ここまで、<ruby>読<rt>よ</rt></ruby>んでくれてありがとう!!
</div>

<div>
では、<ruby>次回<rt>じかい</rt><ruby>、また
<ruby>会<rt>あ</rt></ruby>えることを、
<ruby>楽<rt>たの</rt></ruby>しみにしています。
</div>

Scratchでは、いろんな<ruby>人</ruby>か<ruby>作成<rt>さくせい</rt></ruby>したアプリやそのコードが<ruby>公開<rt>こうかい</rt></ruby>されています。

ドンドン<ruby>遊<rt>あそ</rt></ruby>んで、ドンドン<ruby>参考<rt>さんこう</rt></ruby>にしましょう

<div>
ではでは
</div>
overflow-scrolling: touch;でモーダルメニューを実装

###overflow-scrolling: touch;でモーダルメニューを実装

スマホサイトで頻繁に見るモーダルメニュー。
ヘッダーにボタンが設置してあり、タップするとピロッとメニューが出てくる。しかし、このモーダルメニュー内でスクロールをさせるとなると、色々苦労があります。※内容は省略します

そんな時、モーダルメニューにcssのoverflow-scrolling: touch;を使えばモーダルメニューを簡単にスクロール実装できる！と思い実装していたら、いくつかの罠が。。。

・overflow-scrollingを入れている要素をdisplay:none;に設定すると、jsでdisplay:block;にしても、iOS8ではoverflow-scrollingが無効される
・上記の要素をdisplay:none;にしていなくても、cssのposition指定（モーダルだからマスト）をしていると、overflow-scrollingがやっぱり無効になる

iOS8での挙動には悩まされましたが、以下の実装で上手くいきました。

####html（主にヘッダー等に設置するメニューボタン）

```html
 <div id="btnMenu">メニュー</div>
```

####html（モーダルメニューのカラム）

```html
<div id="slidemenu">
　<div id="slidemenu_inner">
　　<ul>
     <li>メニュー1</li>
     <li>メニュー2</li>
   </ul>
　</div>
</div>
```

####css

```css
#slidemenu{
    position:fixed;
    z-index:999;
    top:-9999999px;
    left:0;
    width:100%;
    height:100%;
}
#slidemenu_inner{
    width:100%;
    height:100%;
    display:block;
    overflow:auto;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}
```
【#slidemenu】
まずモーダルメニュー本体には、当然position指定。
そしてdisplay:none;以外の方法でメニューを隠す必要があるので、デフォルトの位置を適当に-999999pxなどの位置にしておく。ここまで上に設置をする理由は、サイトをスクロールさせていると、このモーダルメニューがちらっと表示されてしまう時があるため。なので安全をとってこの位置に設置。
【#slidemenu_inner】
slidemenu内の要素に対し、初めてここでoverflow-scrolling: touch;を指定。


#####jQuery

```js
$('#btnMenu').on('click',function(){
 $('#slidemenu').animate(
   {'top':'0px'},100);
});
```
後はjsで、ボタンを押したときに-999999pxの位置から0pxの位置に下げさせればOK。
多少荒技ではありますが、iOS、Android、どの端末でも正常に動作します。
OpenNIをMacに導入しopenframeworksで利用する方法

#実施環境
Mac OS 10.12.1
Xcode8.0
openframeworks0.9.7

#手順

##1.OpenNIをHomebrewでインストールする
1.Formulaをダウンロード
```$ brew tap homebrew/science
$ brew tap totakke/openni```

2.インストール
OpenNI
```$ brew install openni```

Sensor Kinect
```$ brew install sensor-kinect```

NITE
```$ brew install nite```

3.確認
```$ cd /usr/local/Cellar/openni/1.5.7.10/share/sample/Bin/x64-Release
$ ./Sample-NiSimpleViewer```

>[ここ](https://blog.totakke.net/posts/2012-05-15-install-openni-with-homebrew/)のサイトを参考にしました

##2.ofxOpenNIをダウンロード
[ここ](https://github.com/gameoverhack/ofxOpenNI)からofxopenniをダウンロードする

##3.新しいプロジェクトをつくる
openframeworksのprojectGeneratorで新しいプロジェクトを作る

##4.openniフォルダの中身をコピーして移動する
作ったプロジェクトの中の/bin/dateの中にexampleのbin/data/にあるopenniフォルダをコピーする。
そしてofxOpenNI/mac/copy_to_data_openni_path/のlibフォルダを作ったプロジェクトのbin/data/openniフォルダにコピーする。

##5.xcode上でフォルダを加える
Xcodeを開いてaddonフォルダを右クリックしAdd Files to ....で
ofxOpenNIフォルダのなかのsrcとincludeとofxOpenNI/win/copy_to_data_openni_path/のlibフォルダを追加する
注意点はwinフォルダのなかのlibを追加することです．macフォルダのlibではない

##6.使用するexampleを加える
使いたいexampleのtestApp.hとtestApp.cppを新しく作ったプロジェクトのofApp.hとofApp.cppにコピペする

##7.ヘッダーファイルやライブラリのリンクを設定する
・Header Search Pathsに以下のディレクトリを追加
<img width="740" alt="スクリーンショット 2016-12-25 20.29.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/150933/1dc92b1d-5682-77c2-96a4-16c93373611f.png">
・Library Search Pathsに以下のディレクトリを追加
<img width="738" alt="スクリーンショット 2016-12-25 20.29.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/150933/b1c824b6-41ed-d7b6-62ed-c390bff21245.png">

##8.TargetのBuild PhasesでLinker Binary With Librariesに左下の＋ボタンでライブラリを追加する
<img width="474" alt="スクリーンショット 2016-12-25 20.33.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/150933/c12dfc8a-6f18-a614-777b-b5b90b29795e.png">
<img width="439" alt="スクリーンショット 2016-12-25 20.33.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/150933/eb93884d-c814-954d-e64c-d79b2fcfbbe3.png">

##9.TargetのBuild PhasesでCompile SourcesにofxOpenNI.cppとofxOpenNITypes.cppを追加
<img width="556" alt="スクリーンショット 2016-12-25 20.34.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/150933/2a7b7c7d-3221-bf37-dfda-0566476f50b6.png">

##10.buildしてみる
ofGetGLTypeFromPixelFormat()にエラーがでたらofGetGLFormatFromPixelFormat()に書き換える．
Android覚え書き

■Log出力

 Log.i(string, string);
 Log.d(String tag, String msg, Throwable tr)

Log.v：VERVOSE（すべてのログ情報）
Log.d：DEBUG(デバッグ情報）
Log.i：INFO(情報）
Log.w：WARN(警告）
Log.e：ERROR（致命的な問題）


■Intent
　Intent(Context packageContext, Class<?> cls)

　参考URL：http://www.javadrive.jp/android/intent/index1.html
　インテントというのは簡単に言えばアクティビティなどが他のアクティビティやアプリケーションなどと情報のやり取りを行うための箱のようなものです。インテントという箱には、相手先や届けたい情報などが含まれています。

アクティビティから他の指定したアクティビティへインテントを送ることがあります。例えば他の画面を表示したい場合などです。


　Intent.putExtra(キー,数値)
　Intent.putExtra(キー,文字列)　などなど


　参考URL：http://android.roof-balcony.com/intent/putextra/
　Androidで、起動させるActivityに値を渡す方法

　●値の受け渡し

    // 渡す値
    intent.putExtra("A", a);
    intent.putExtra("B", b);

    // 値の取得
    // データがない場合、第２引数の 0 が返る
    Integer request_code = intent.getIntExtra("A", 0);
    String ticker = intent.getStringExtra("B");

■PendingIntent

　RemoteViewやNotificationクラスに用いるPendingIntent
　参考URL：http://androidpg.blogspot.jp/2012/02/progressbar_09.html


　PendingIntent.getBroadcast
　参考URL：https://akira-watson.com/android/alarmmanager-timer.html

　アラームサービスを取得
  context.getSystemService(Context.ALARM_SERVICE)
　参考URL：http://d.hatena.ne.jp/takeR/20140110/1389362595



■AlarmManager

　参考URL：http://santea.hateblo.jp/entry/2015/12/23/235158
　参考URL：http://techbooster.jpn.org/andriod/application/2166/


　setRepeating
　参考URL：http://www.taosoftware.co.jp/blog/2009/02/alarmmanager.html

　set
　参考URL：http://ichitcltk.hustle.ne.jp/gudon2/index.php?pageType=file&id=Android027_AlarmManager


■NotificationManager 

　cancelAll
　参考URL：http://blog.livedoor.jp/kojikoji1985/archives/51432816.html
　参考URL：https://developer.android.com/guide/topics/ui/notifiers/notifications.html?hl=ja

■BroadcastReceiver

　BroadcastReceiverはブロードキャストされたIntentに応答するための仕組みです
　参考URL：http://www.sakc.jp/blog/archives/24996
[メモとして]　興味あるツール群

まずはキーワードとして。
SQL injection関連、 UNIONがキーになる。
使い方を覚えると面白いらしい。

バイナリ？pwn関連。　pythonでpwntoolsというものが
あるらしい。これもマスターしたいツールである。

Pythonの柔軟性にはとても驚く。　この言語に触れる機会が
あったのはラッキーかもしれない。
Dismコマンドレットを使用してWindowsイメージを操作する

# 参考リンク
* [Windows PowerShell での DISM の使用](https://msdn.microsoft.com/ja-jp/library/hh825010.aspx)

# 各コマンドレットの関係

![DISM.png](https://qiita-image-store.s3.amazonaws.com/0/31974/bac84aa9-2af7-38fa-4c40-5e5ac93a902a.png)

# メタデータの取得

```ps1:メタデータを取得する
Get-WindowsImage -ImagePath path\to\windows\image.wim
```

# マウント・マウント解除
`Mount-WindowsImage`、`DisMount-WindowsImage`コマンドレットを使います。

```ps1:Windowsイメージをマウントする
Mount-WindowsImage -ImagePath path\to\image.wim -Path path\to\mount -Index 1
```

```ps1:変更を破棄してマウント解除する
Dismount-WindowsImage -Path path\to\mounted -Discard
```

```ps1:変更を保存してマウント解除する
Dismount-WindowsImage -Path path\to\mounted -Save
```

`Save-WindowsImage`で保存だけ実行できる

```ps1
Save-WindowsImage -Path path\to\mounted
```

# 展開・キャプチャー

```ps1:Windowsイメージをキャプチャーする
New-WindowsImage -CapturePath path\to\capture -ImagePath path\to\image.wim -Name "Windows 7 Professional (x64) (ja-JP)"
```

```ps1:Windowsイメージを展開する
Expand-WindowsImage -ApplyPath path\to\apply -ImagePath path\to\image.wim -Index 1
```

展開前にドライブをフォーマットする場合は以下の通り。

```ps1:ドライブをフォーマットする((例)Eドライブ)
Get-Volume | ?{ $_.DriveLetter -eq "E" } | Format-Volume -FileSystem NTFS
```

# デバイスドライバーの追加
デバイスドライバー(`*.inf`ファイル)を追加するには以下のようにします。

```ps1:デバイスドライバーを追加する
Add-WindowsDriver -ForceUnsigned -Path path\to\mounted -Driver path\to\driver.inf
```

```ps1:デバイスドライバーを複数追加する
dir path\to\drivers\*.inf |
  %{ Add-WindowsDriver -ForceUnsigned -Path path\to\mounted -Driver $_.FullName }
```

* `dism.exe /Add-Driver`では`/Driver`オプションを複数指定できますが、`Add-WindowsDriver`コマンドレットではできません。

# イメージのエクスポート
wimファイルは複数のWindowsイメージを格納でき、個別にイメージを取り出すことができます。

```ps1:イメージをエクスポートする
Export-WindowsImage -DestinationImagePath path\to\exported.wim -SourceImagePath path\to\source.wim -SourceIndex 3
```

例えば、Windows7の`install.wim`は4つのイメージを含んでいます。

```shell-session:Windows7
> Get-WindowsImage -ImagePath windows7\sources\install.wim


ImageIndex       : 1
ImageName        : Windows 7 HOMEBASIC
ImageDescription : Windows 7 HOMEBASIC
ImageSize        : 11,681,373,841 bytes

ImageIndex       : 2
ImageName        : Windows 7 HOMEPREMIUM
ImageDescription : Windows 7 HOMEPREMIUM
ImageSize        : 12,194,650,761 bytes

ImageIndex       : 3
ImageName        : Windows 7 PROFESSIONAL
ImageDescription : Windows 7 PROFESSIONAL
ImageSize        : 12,096,751,107 bytes

ImageIndex       : 4
ImageName        : Windows 7 ULTIMATE
ImageDescription : Windows 7 ULTIMATE
ImageSize        : 12,259,188,245 bytes


> Export-WindowsImage -DestinationImagePath win7_pro.wim -SourceImagePath windows7\sources\install.wim -SourceIndex 3

```

エクスポート先のwimファイルがすでに存在する場合、上書きされるのではなくイメージが追加されます。

# イメージの追加

wimファイルではなくドライブから直接追加するには以下のようにします。

```ps1:イメージを追加する
Add-WindowsImage -CapturePath path\to\capture -ImagePath path\to\image.wim -Name "Windows 7 Professional (x86) (ja-JP)"
```

# イメージの分割
4GB以上のイメージをFAT32なUSBストレージに保存するときは分割が必要です。

```ps1:イメージを分割する
Split-WindowsImage -FileSize 4095 -ImagePath sources\install.wim -SplitImagePath G:\sources\install.swm
```
python で、 xz ファイルを展開


@共用サーバ / pyenv or anaconda が無い環境

もちろん、Python のバージョンは 2系にしてから。

```
$ pip install --install-option="--prefix=$HOME/share" backports.lzma
```

```
# -*- encoding: utf-8 -*-
try:
    import lzma
except:
    import sys
    sys.path.append('/home/bunzaemon/share/lib64/python2.6/site-packages')
    from backports import lzma

with lzma.open("dat.txt.xz") as f:
    print (f.read().decode())
```

- 中身は ascii のみ。
- 2系では、`decode()` 必要無い。けどあっても動く。
- 3系ではバイナリなので、`decode()`必要。
python 2 への"バックポート"


ググるより先に、

```
$ pip search backport 
```

して、確認。

- 名前空間 `backports` を使用しているものが由緒正しい。とかなさげ。


## 別枠

本家で、2系、3系平行開発時に、3系から機能を取り込んだもの。

>A partial list of 3.1 features that were backported to 2.7:

[引用元](https://docs.python.org/2/whatsnew/2.7.html)

基本的に、 `What's new` で確認。
perl のオブジェクトと python の class その2.


## 継承

単純なカウンタ（`add`）と、継承して、もう一個のカウンタを定義（`addc`）した例

```perl:f.pl
package Foo;
sub new { bless {x => 0}, shift }
sub add { ++ shift->{x} }
1;

package Bar;
use base qw(Foo) ;
sub new  { my $r = Foo->new ; $r->{y} = 0 ; bless $r, shift }
sub addc { ++ shift->{y} }
1;

use Data::Dumper ;
my $o = Foo->new ;
printf "Foo add:    %s\n", $o->add for 0 .. 1 ;
printf Dumper $o ;

my $p = Bar->new ;
printf "Bar add:    %s\n", $p->add ;
printf "Bar addc:   %s\n", $p->addc for 0 .. 1 ;
printf Dumper $p ;
```

```shell-session:
$ perl f.pl
Foo add:    1
Foo add:    2
$VAR1 = bless( {
                 'x' => 2
               }, 'Foo' );
Bar add:    1
Bar addc:   1
Bar addc:   2
$VAR1 = bless( {
                 'y' => 2,
                 'x' => 1
               }, 'Bar' );
```

```python:f.py
class Foo(object):
    def __init__(self):
        self._x = 0
    def add(self):
        self._x = self._x + 1
        return self._x

class Bar(Foo):
    def __init__(self):
        super(Bar, self).__init__()
        self._y = 0
    def addc(self):
        self._y = self._y + 1
        return self._y


o = Foo()
for i in [0,1]:
    print ("Foo add:    {0}".format(o.add()))
print (vars(o))

p = Bar()
print ("Bar add:    {0}".format(p.add()))
for i in [0,1]:
    print ("Bar addc:   {0}".format(p.addc()))
print (vars(p))
```

```shell-session:
$ python f.py
Foo add:    1
Foo add:    2
{'_x': 2}
Bar add:    1
Bar addc:   1
Bar addc:   2
{'_y': 2, '_x': 1}
```



## 継承 ー 継承元メソッドを別名で呼ぶ

継承元（親、基底クラス）のメソッドと同名メソッドをつけたくなったが、継承元の方にもアクセスしたい場合。

継承元のカウンタ `add` を `addp` として使用し、継承した方で、`add` を再定義する例。

```perl:perl
package Foo;
sub new{ bless {x => 0}, shift }
sub add{ ++ shift->{x} }
1;

package Bar;
use base qw(Foo) ;
sub new  { my $r = Foo->new ; $r->{y} = 0 ; bless $r, shift }
sub add  { ++ shift->{y} }
sub addp { shift->SUPER::add }
1;

use Data::Dumper ;
my $o = Foo->new ;
printf "Foo add:    %s\n", $o->add for 0 .. 1 ;
printf Dumper $o ;

my $p = Bar->new ;
printf "Bar addp:   %s\n", $p->addp ;
printf "Bar add:    %s\n", $p->add for 0 .. 1 ;
printf Dumper $p ;
```

```python:python
class Foo(object):
    def __init__(self):
        self._x = 0
    def add(self):
        self._x = self._x + 1
        return self._x

class Bar(Foo):
    def __init__(self):
        super(Bar, self).__init__()
        self._y = 0
    def add(self):
        self._y = self._y + 1
        return self._y
    def addp(self):
        return super(Bar, self).add()

o = Foo()
for i in [0,1]:
    print ("Foo add:    {0}".format(o.add()))
print (vars(o))

p = Bar()
print ("Bar addp:   {0}".format(p.addp()))
for i in [0,1]:
    print ("Bar add:    {0}".format(p.add()))
print (vars(p))
```
docker + swagger-editor で編集したファイルをローカルに保存する

swagger-editor はデフォルトではローカルにファイルを保存できない。backend と呼ばれる REST API 経由でエディタに表示する内容を取得したり、エディタで編集した内容を保存させたりすることは可能なようだった。([swagger-editor/config.md](https://github.com/swagger-api/swagger-editor/blob/master/docs/config.md#backends) 参照。)

自分で REST API を作るのは面倒だったので探してみたら、[zgiber/sweb: Swagger Editor Backend](https://github.com/zgiber/sweb) というのが見つかった。go で backend の REST API が実装されていて、かつ swagger-editor のコンパイル済アセットが bindata.go にまるごと埋めこまれている (!) ので、このリポジトリ単体で swagger-editor + backend を実現することができる。便利。

簡単な使い方のメモ:

```
$ ls
Dockerfile  doc/        sweb.sh

$ ls doc/rest-api.yml 
doc/rest-api.yml

$ cat Dockerfile 
FROM golang:latest
RUN go get -u github.com/zgiber/sweb
CMD sweb -f /doc/rest-api.yml

$ cat sweb.sh 
docker build -t sweb .
docker run -p 8765:8765 -v $(pwd)/doc:/doc -ti sweb

$ sh sweb.sh
(略)
```

ここまでやると http://localhost:8765 で swagger-editor にアクセスできるようになり、デフォルトで `doc/rest-api.yml` の内容が表示される。編集するとホスト側の `doc/rest-api.yml` にも内容が反映される。
Ruby用2Dゲームライブラリ「DXRuby」の紹介 

##はじめに
マルチプラットフォームだったりマルチランゲージだったり、大規模で本格的なものからコードを一切書かないようなものまで、多種多様な[ゲームエンジン・ライブラリ・ツールの開発 Advent Calendar 2016](http://qiita.com/advent-calendar/2016/gameengine)の19日目の記事です。
今回はRuby用の2DゲームライブラリDXRubyの紹介です。
##DXRubyとは何か
DirectX9を使ったRuby用ゲームライブラリです。DirecXを使うのでWindows限定で、作者が32bitPCしか持っていないので32bitのRuby限定です。あと2D限定です。
[サイトはこちら](http://dxruby.osdn.jp/)で、インストールはgemからとなります。
##特徴
###シンプル
Ruby用なので必然的にクラスライブラリとなっていますが、それぞれ個別の部品として存在しているだけで、フレームワーク的にクラスを継承してどうのこうの、という記述は必要ありません。クラス定義一切無しでゲームを作ることもできます。他、Rubyの難しい機能は使っておらず、DXRubyを扱うのに必要なRubyの知識は極めて少ないという特にRuby初心者にとって優しい特徴となっています。
とりあえずこんなコードで画像を読み込んでキャラを動かすことができる感じです。ウィンドウはWindow.loop実行時に自動で開きます。

```ruby:sample.rb
require 'dxruby'

x = 0
y = 0
image = Image.load("data.png")

Window.loop do
  x = x + Input.x
  y = y + Input.y

  Window.draw(x, y, image)
end
```
また、物がシンプルなのでフレームワークの下敷きにするには丁度良いらしく、このAdventCalendarでもDXRubyをベースに使ったフレームワークの紹介が2つほどあります。
###速い
他のライブラリでよくある、C用のゲームライブラリのRubyバインダという形ではなく、Ruby専用、Windwos専用に開発しているため、Cで書かれたRubyメソッド内から直接DirectXを叩きに行きます。また、Ruby用拡張ライブラリとして特化したデータ構造を持ち、できる限りRubyの遅さを回避するような設計となっているため、非常に高速に動作します。
##記事の例から
このAdventCalendarの記事の例に書いてあることをいくつか。
###活用事例
簡単かつ実用的な速度が出る無料のRubyゲームライブラリということで、島根県主催の[Ruby合宿](http://www.pref.shimane.lg.jp/industry/syoko/sangyo/itsangyo/rubycamp.html)や、松江市主催の[Ruby教室](http://www1.city.matsue.shimane.jp/jigyousha/sangyou/ruby/ruby-ikuseijisseki.html)、まちづくり三鷹の[U-18プログラミングくらぶ](http://www.mitaka.ne.jp/docs/2015040100014/)などでRubyの学習用に使われているようです。ようです、というのはそもそもがオープンソースのもの(zlibライセンス)で報告義務も無いので正式に報告を受けることが無いからですね(松江はDXRuby絡みで行ったので知ってます)。なので実際どこでどんなふうにどれだけ使われているのかはぜんぜん把握できていません。大学の授業などでも使われているそうですが同様です。
いくつか実際に遊べるゲームも公開されています。こちらも報告を受けているわけではないのでどれだけ存在するのかまったく把握できていません。
あと、[小学生から楽しむ Rubyプログラミング](https://www.amazon.co.jp/%E5%B0%8F%E5%AD%A6%E7%94%9F%E3%81%8B%E3%82%89%E6%A5%BD%E3%81%97%E3%82%80-Ruby%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0-%E3%81%BE%E3%81%A1%E3%81%A5%E3%81%8F%E3%82%8A%E4%B8%89%E9%B7%B9%EF%BC%9B%E3%81%BE%E3%81%A4%E3%82%82%E3%81%A8-%E3%82%86%E3%81%8D%E3%81%B2%E3%82%8D-%E5%BA%8F%E6%96%87-ebook/dp/B00LUKIEGG/ref=dp_kinw_strp_1)という本がDXRubyでRubyを勉強する本らしいです。出版に関しても(ry
###ユーザの増やし方
なんにもしてないので見える範囲ではなかなか増えませんね。。。でも学習用に使われているということは「DXRubyでRubyを勉強しました！」っていう人が地味に増えているのかもしれません。
###コミュニティなど
特にありません。Twitterで一部のユーザさんとゆるく繋がってる感じです。
##他
DXRubyはRuby学習用という訳ではなく、自分のために作って、ついでに公開したものです。趣味が「思いついたものを作って動かして喜ぶ」という感じなので、ちょっとしたものを作って動かすことに特化しています。また、思いつくものが多岐に渡るので全体のアルゴリズムやデータ構造を縛ることはせず、あくまでも部品の提供に留まっています。あと、作り始めた時点ではRuby初心者だったので基本的な部分で難しい機能は使わないようになっています。つまり「シンプルで使いやすくRubyの勉強に使える初心者向けライブラリを作ろう」と思って作ったわけではなく、色々な要素が絡まってこうなった結果、学習用に丁度良いと判断されてそういう用途で使われているみたいです。
##おしまい
ちょっとしたコードで絵が動くので、Rubyを始めるのに丁度いいかと思います。Ruby勉強したいけど何したらいいのかよくわからない、という人や、ゲーム作ってみたい、という人など、ぜひお試しくださいな。
4次元体験アプリ開発拠点としてのみらいけん

みらいけんオーナーの後藤です。
今回は、10月のオープン以降、1か月に渡り、みらいけんをお使いいただいていた数学カフェ/サイエンスアゴラ出展チームの皆さんについて、振り返ってみたいと思います。彼らもまさに今、アドベントカレンダーで振り返りを行っていて、僕のこの記述も23日の記事として掲載予定となっております。
アドベントカレンダーというものについてまず。皆さん、アドベントカレンダーってご存知でしたか？僕は恥ずかしながら今回初めて聞きました。いや、元ネタの方であるあのクリスマス前に子供がめくっていく方はもちろん、知っていたのですが、こうやってみんなでブログなどをリレーの様に書いたりする行為を指すということは全然しりませんでした。。。
でも、なんだかこうやってみんなで一体となって、（監視しあいながら）一年に一回だけ一か月間頑張ってみるというのは、いい取組なのかもしれませんね。

さて、話を4次元体験ソフトの話に戻しましょう。
みらいけんでは、HTC Viveを設置しておりまして、写真の様にVR空間上で3Dの絵を描ける、Tilt Brush by Googleというソフトがあります。
![15578771_1781890715398985_175411127840798608_n.jpg](https://qiita-image-store.s3.amazonaws.com/0/153561/85d317f6-096a-b694-365a-cf1e8f0d5029.jpeg)


このソフトは、写真の様に自分で3Dのドラえもんを描くこともできる楽しい（写真で見るのと、体験するのとは全然リアリティが違います！）やつなので、ぜひ遊んでみてください。
で、今回数学カフェの皆さんが取り組んでいたのは、この様な3D（3次元）が表現できるVR空間上で、4次元を表現したら、普段絶対に知覚できない4次元を知覚できるよね！という企画でした。

数学カフェの皆さんは、11月文化の日前後に、サイエンスアゴラという理系の方向けイベントがありそれへ向けたソフトウェア開発を行いたいとのことでした。しかも、なかなか導入にはコストもかかるVRの機材が準備されている環境は、皆さんにとっても非常に有用な場所として見ていただけたようでした。
みらいけんとしてもオープン直後でまだまだ認知度も低く、お客さんで日々ごった返している状況でもなかったため、彼らが開発拠点として、うちを使ってくださるのは非常にいい宣伝効果もあったため、Win-Winの関係が築けたのではないかと思っています。
結果として、うちを使ってくださった数学カフェの皆さまは10名程度でしょうか？また、数学カフェ関連で、色々な数学の専門家の方たちが今でも、更なるお知り合いの方を連れてきてくださるので、その宣伝効果は非常に大きかったと、今でも思っております。（ありがたい限りです）
また、僕自身、文系出身ではありますが、数学は昔から好きでしたし、数学を専門にやられている方は話しもおもしろいのだな、と改めて感じました。（同じくらいぶっ飛んでいる方も多いですが、またそれも魅力なんですよね）
昨日は、ロマンティック数学ナイトという、数学好きが200人以上も集まるイベントの主催？の方がいらしてくださり、なぜ数学はこれほどまでに熱狂的なファンを生むのか？そして、宗教的な意味合いさえ持つのか、という談義をさせていただいたのですが、話が深すぎて、15分程度では到底答えが出るものではありませんでした＾＾
彼らは数学の神性を説明してくださっていたのですが、僕はそれは人間の「言語」が持つ特性と大きな差はなく、神性を説明するのには至っていない、もしくは、言語も同様に神性を持つのではないか？と反論を試みておりました。
数学を扱う方たちは、非常に論理的なので、全くの門外漢であるこちらの反論も、理知的に認めるところは認めてくださるところが素晴らしいですね。
さて、最後になりますが、みらいけんでは大きく二つの「学び」を得られる場としての機能を持っている、そして持っていたいと考えています。
それは、みらいへ向かうために必要な「学び」とみらいを創造/想像するために必要な「学び」の二つです。今回の4次元を体感するソフトは、まさに後者だと思っており、その文脈からして、とてもみらいけんにマッチした内容だったと思っております。
ただ、反省点を挙げるとすれば、もっと、数学カフェの皆さまとのコラボレーション感を大切にし、みらいを創造/想像している「学び」がここにあるのだ、という発信をもっと出せたのではないかと思っています。
これからも、今回のことを一つのご縁として、数学関連の方にももっと親しみを持って、このみらいけんをお使いいただけるよう、何か仕掛けをしていければと思いますので、今後ともどうぞよろしくお願いいたします。
みらいけん　オーナー/株式会社Dream-LINK　代表取締役　
後藤　正樹
[AWS 入門] AWS WAFを使ってみよう

mediba advent calendar 2016 22日目担当の山子澤です。
インフラストラクチャー部で主にAWSをやってます。

今回は「AWS WAF」で特定のリファラがある場合のみアクセスできる制限を
既に出来上がっているサイトにつけてみたいと思います。

「AWS WAF」はALBかCloudFrontにつけることができるのですが
今回は最近できるようになったALBで試すことにします。

# 設定に必要な構成要素

設定には以下の要素を設定していく必要があります。

| 項目       | 意味 |
|:----------|------------------|
| Web ACL   | Ruleを束ねたもの、Cloudfront、ALBに適応する |
| Rule      | Conditionを束ねたもの |
| Condition | IP addresses/SQL injection/String matchingの指定 |
| Filter | String matchingで「リクエストヘッダー/HTTP Method/クエリーストリング/URL の文字列」の中から複数設定できる |


# Create string match condition
まずはマネージメントコンソールの「WAF & Shield」から「AWS WAF」を選択してルールを作っていきます。

対象サイトですが
ローカルにwebサーバを立ち上げてhostsファイルをいじり「test.com」としてアクセスできるようにして、WAFを設定していないALBでアクセスできる画像をimgタグで貼り付けたサイトです。
アクセスするとまだ何もやってないので画像を見ることができます。

```test.com/index.html
<img src="http://WAFを設定するALBにある画像URL">
```

![スクリーンショット 2016-12-19 19.12.48.png](https://qiita-image-store.s3.amazonaws.com/0/148125/b320be94-cbee-b18e-c33a-17a1fdd67442.png)

今回のルールは「test.com」のリファラがある場合のみのアクセス可能なルールです。
これにリファラを制限する「AWS WAF」を設定をすると画像がみれなくなります。

String matchingから作っていきます。

![スクリーンショット 2016-12-19 18.23.44.png](https://qiita-image-store.s3.amazonaws.com/0/148125/7d725689-79a0-7819-8c4b-324282a2c4a0.png)

# Create rule
次は先程作ったconditionを使ってルールにします。

![スクリーンショット 2016-12-19 18.41.48.png](https://qiita-image-store.s3.amazonaws.com/0/148125/d16f1cb7-f051-e642-55e9-514c3a99ce96.png)

# Set up a web access control list (web ACL)
最後はACLの設定です。

## step.1
![スクリーンショット 2016-12-19 18.44.56.png](https://qiita-image-store.s3.amazonaws.com/0/148125/8a3aa836-63dc-9398-6f75-864ac370f8df.png)

「AWS resource to associate」はALB名です。

## step.2

![スクリーンショット 2016-12-19 18.46.49.png](https://qiita-image-store.s3.amazonaws.com/0/148125/c204ae52-8d5f-80d7-82b2-2d5b2c6df02e.png)

ここは「Create condition」ですが既に作りましたのでそのままNextを押します。

## step.3
![スクリーンショット 2016-12-19 18.50.31.png](https://qiita-image-store.s3.amazonaws.com/0/148125/eb49d3bf-d13e-b64b-4d47-6802c39b8290.png)

基本すべてブロックしている状態に先程のルールを許可する形になります。

## step.4
![スクリーンショット 2016-12-19 18.52.54.png](https://qiita-image-store.s3.amazonaws.com/0/148125/23871653-5e73-3d73-bfaa-bdf42cd58645.png)

最後の確認画面ですので確認して作成します。

# 確認する
localhostなどでブラウザからWAFが設定されている状態で対象サイトを確認すると「test.com」のリファラがないので画像が見ることができなくなっています。

![スクリーンショット 2016-12-19 19.11.32.png](https://qiita-image-store.s3.amazonaws.com/0/148125/20bcec44-254a-4eb9-9b07-65000637a767.png)

hostsをいじった「test.com」としてアクセスしてみます。

![スクリーンショット 2016-12-19 19.12.48.png](https://qiita-image-store.s3.amazonaws.com/0/148125/97ad45f5-3f6e-ad43-da7a-2ffa9da1dbb3.png)
今回は「test.com」のリファラがついているので見ることができました。

# 最後に
どうでしょうか。「AWS WAF」を使えば簡単にアクセスをコントロールすることができます。
皆さんも使ってみてはいかがでしょうか。
Cognos BI でプロンプトのパラメーターをキャッシュするパフォーマンスチューニングパラメーター

最近マニュアルを読んでいて、こんなパラメーターあるんだと知った情報のフィードバックです。

Cognos 10.2.2からの新機能のようですが、プロンプトページの高速化のために、パラメーターのキャッシュを行う事ができるパラメーターがあります。

Report Serviceの詳細プロパティで、以下のように設定すると、パラメーターのキャッシュが可能になるようです。
デフォルトはキャッシュはされない設定です。
RSVP.PARAMSCACHEDISABLED false

サーバー全体のパラメーターになってしまうので、レポート単位には設定できないの？、という話はあると思いますが、なんとレポートのXML定義を書き換えるようです。

Report Authoringの機能で、「ツール」→「クリップボードにレポートをコピー」でレポートのXML定義を抽出できますが、メモ帳か何かにコピーして、
・パラメーターキャッシュをOFFにしたい場合
\<XMLAttribute name="paramsCacheDisabled" value="true"/>
・パラメーターキャッシュをONにしたい場合
\<XMLAttribute name="paramsCacheDisabled" value="false"/>
を、追加してしまうようです。

後はメモ帳の内容をCtrl+Cでコピーし、「ツール」→「クリップボードからレポートを開く」でレポートを開いて、レポートを保存します。

詳しくは、Administration and Security Guideのこちらをご参照下さい。
**Parameters Cache**
http://www.ibm.com/support/knowledgecenter/SSEP7J_10.2.2/com.ibm.swg.ba.cognos.ug_cra.10.2.2.doc/c_asg_parameters_cache.html

プロンプトページのパフォーマンスチューニングで悩まれている方は、是非お試し下さい！
そしてフィードバック頂けるとうれしいです。

#Cognos Analyticsでのパラメーターキャッシュ(2019/2/15追記)
ご質問頂いた際に調べていたら、Cognos Analyticsではこのパラメーターは廃止になっていて、代わりに「RSVP.PARAMETER_CACHE」というパラメーターになるものの、このパラメーターはデフォルトでEnableになっているようです。
そのため、Cognos Analyticsでは何も設定せずとも、パラメーターはキャッシュされるようです。
このパラメーターのマニュアル上の説明です。
https://www.ibm.com/support/knowledgecenter/en/SSEP7J_11.0.0/com.ibm.swg.ba.cognos.ug_cra.doc/r_reportService_adv_settings.html%23reportService_adv_settings
＜RSVP.PARAMETER_CACHEから抜粋＞
When RSVP issues a getParameters request, it stores the results in a child object under the report object in IBM Cognos Content Manager. 
つまり、パラメーターのキャッシュは個々のディスパッチャーではなく、Content Manager上に保持されるようですね。
Content Managerは全ディスパッチャーで共通なので、レポートが別のディスパッチャーで実行されても、パラメーターキャッシュは利用できるという事になりそうです。
スマホでselectのテキストをセンタリングしたようなものを作る

いろいろ参考にしたけど、CSS だけでやるより JS 使ったほうが（個人的に）楽だったという話です。
作りたかったのは、こんなセレクトボックス。

![スクリーンショット 2016-12-19 14.24.28.png](https://qiita-image-store.s3.amazonaws.com/0/94124/6acfaae1-30a8-d724-a8ae-69d0b2467558.png)

[Qiita:スマホでselectのテキストは左右中央にできるのか](http://qiita.com/ituki_b/items/57e96284361321d8e769) も参考にしたけど、`max-device-width` で iOS と Android を判別する点が好みでなく、CSS だけでやるのはやめた。

やってること

 - label と select を並べて置く
 - select を透明にし、label に重ねる
 - select 変更時に label に選択内容を反映

コードは下記です。

```html:HTML
<ul>
  <li>
    <label for="age">年代</label>
    <select name="age" id="age">
      <option value="">年代</option>
      <option value="10">10代</option>
      <option value="20">20代〜</option>
    </select>
  </li>
  ...
```

```css:CSS
li {
  list-style: none;
  position: relative;
  margin-bottom: 10px;
}
label, select {
  display: block;
  width: 200px;
  height: 30px;
  line-height: 30px;
}
label {
  background-color: #fff;
  color: #0ad;
  border: 1px #0ad solid;
  border-radius: 15px;
  text-align: center;
}
label:after {
  content: ">";
  transform: rotate(90deg);
  display: inline-block;
  margin-left: 10px;
}
select {
  position: absolute;
  top: 0;
  opacity: 0;
}
```

`label:after` は FontAwesome 使えば回転しなくていいですね。

```js:jQuery
$('select').on('change', function () {
	var id = $(this).attr('id');
	$("label[for='"+id+"']").text($('#'+id+' option:selected').text());
});
```

デモ： https://jsfiddle.net/5sdw4fa6/
カノジョと学ぶポインタと参照

この記事は、[カノジョできないエンジニア Advent Calendar 2016](http://qiita.com/advent-calendar/2016/no-girlfriend)の19日目の記事です。

---

カノジョ「

```
java.lang.NullPointerException
    at kanojo.inai.engneer.Main.main
```

---

カノジョとの対話形式にしようとしましたが、どうあがいてもぬるぽだったためこの記事にカノジョは登場しません。
また、上ではJavaですが、今回扱うのはC言語です。

**カノジョできないエンジニア**にとって以下の公式は成り立つと考えられます。[^1]

```math
彼女いない歴 = 年齢
```

これをC言語で書くとこうなります。

```kanojo.c
#include <stdio.h>
int main(void) {
  int nenrei = 21;
  int kanojo_inai_reki = 21;
  if (kanojo_inai_reki == nenrei) {
    printf(":)\n");
  } else {
    printf(":(\n");
  }
  return 0;
}
```

```:実行結果
:)
```

人間たるもの、年を取ることからは逃れられません。
年を取ったことにしましょう。

```kanojo.c
#include <stdio.h>
int main(void) {
  int nenrei = 21;
  int kanojo_inai_reki = 21;
  if (kanojo_inai_reki == nenrei) {
    printf(":)\n");
  } else {
    printf(":(\n");
  }
  nenrei += 1;
  printf("年齢が上がった！\n");
  if (kanojo_inai_reki == nenrei) {
    printf(":)\n");
  } else {
    printf(":(\n");
  }
  return 0;
}
```

```:実行結果
:)
年齢が上がった！
:(
```

おかしいですね、公式が崩れてしまいました。

それは当たり前で、`nenrei`と`kanojo_inai_reki`の2つの変数ははじめは同じ21という値を代入しているものの、年齢が上がってしまったので`nenrei`だけ22になってしまい、その結果公式が崩れてしまったのです。

解決策としては、年齢が上がると同時に`kanojo_inai_reki`変数もインクリメントすればいいですが、わざわざそんな悲しいことはしたくありません。

そこで**ポインタ**を使用します。

ポインタに関しては深すぎてここでは語れないので、とりあえずWikipediaのリンクだけおいておきます。

https://ja.wikipedia.org/wiki/%E3%83%9D%E3%82%A4%E3%83%B3%E3%82%BF_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0)

さて、先程の年齢が上がる例をポインタを使用して書き換えてみましょう！

```kanojo.c
#include <stdio.h>
int main(void) {
  int nenrei = 21;
  int *kanojo_inai_reki = &nenrei;
  if (*kanojo_inai_reki == nenrei) {
    printf(":)\n");
  } else {
    printf(":(\n");
  }
  nenrei += 1;
  printf("年齢が上がった！\n");
  if (*kanojo_inai_reki == nenrei) {
    printf(":)\n");
  } else {
    printf(":(\n");
  }
  return 0;
}
```

```:実行結果
:)
年齢が上がった！
:)
```

インクリメントをしたのは`nenrei`だけですが、`kanojo_inai_reki`から得られる数値も変化しました。

`kanojo_inai_reki`はポインタであり、そのポインタは`nenrei`変数を参照しています。なので、`nenrei`が変化したとしても自動的に`kanojo_inai_reki`も値が変化したように見えたわけですね！

これで公式の崩壊は未然に防がれました！

めでたしめでたし

[^1]: 諸説あります
CSSで蛍光ペン（マーカー）、ただし背景色ではなく、背景色と文字の上から塗ったやつ

言葉にするとわかりづらいけど、よくある、

![1.png](https://qiita-image-store.s3.amazonaws.com/0/94124/ea32772a-99d7-4bc1-cd7d-ef1729426513.png)

↑ こういうやつじゃなくて、
↓ こういうやつをやりたい。

![2.png](https://qiita-image-store.s3.amazonaws.com/0/94124/90a07578-c840-97e1-0656-6894369354c1.png)


`em` で囲って `:after` 擬似要素で何とかする。

```html:HTML
<p>Lorem ipsum <em>dolor sit</em> amet,</p>
```

```css:CSS
em {
  position: relative;
  display: inline-block;
}

/* 幅 100％にするとき */
em:after {
  content: "";
  background: rgba(255, 255, 0, 0.5);
  mix-blend-mode: multiply;
  width: 100%;
  height :100%;
  position: absolute;
  left: 0;
}

/* 幅 50％にするとき */
em:after {
  content: "";
  background: linear-gradient(transparent 50%, rgba(255, 255, 0, 0.5) 50%);
  mix-blend-mode: multiply;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
}
```

`mix-blend-mode` と背景色の透過がキモかな。
ちなみに `mix-blend-mode` なしだとこうなって ↓ 上から塗った感がなくなってしまう。

![3.png](https://qiita-image-store.s3.amazonaws.com/0/94124/e458661b-9a93-fc7a-7346-9e910c25f6aa.png)

デモ：https://jsfiddle.net/uywb9cdp/3/

注意点は、折り返しにかかったときだけ上手くいかないです。
<ins>→ 追記：とりあえずの対応として、`em` の CSS に `display: inline-block` も追加しました。</ins>

もっとスマートな方法があったら教えてください。
npmの基本操作と解説

## npmとは

Node.jsのライブラリやパッケージを管理するツールです。
最近は、yarnというツールもあるようです。

## npmでできること

Node.jsのパッケージやライブラリのインストール・アンインストール、依存パッケージのインストール・アンインストール、package.jsonの作成などを行うことができます。

## npmでよく出てくる言葉の説明

### **グローバルとローカル**

npmでのパッケージのインストールには「グローバルインストール」と「ローカルインストール」があります。
**グローバルインストール**を行うとすべてのプロジェクトでパッケージを利用することができます。
**ローカルインストール**の場合はプロジェクトごとにインストールするため、インストールしたプロジェクトのみでパッケージを利用することができます。

【補足】
パッケージの中にはglupのようにグローバルとローカルの両方にインストールが必要なものや、browserifyのようにグローバルにインストールしなければならないものもあるようです。

### **package.json**

npmではpackage.jsonというファイルを作成することができます。
これにパッケージを記述していくと、これを利用して一括でパッケージのインストールを行うことができます。パッケージのインストール時に自動で記述するようにすることも可能です。

### **Dependencies と devDependencies**

package.jsonにパッケージ名を書く箇所に「Dependencies」と「devDependencies」があります。(他にもありますがよく使うのはこの2つっぽい)
**Dependencies**には本番環境で利用するパッケージを記述します。
**devDependencies**には開発環境のみで利用するパッケージを記述します。ここに書いた内容は本番環境でのパッケージインストール時に無視することができます。
上手く利用することで本番では必要なパッケージのみインストールすることができる仕組みのようです。

【補足】
Dependencies, devDependencies の他には、peerDependencies, bundledDependencies, optionalDependencies があります。

## よく使うコマンド

### npm自体の操作を行う

##### **npm自体をアップデートする**

```text
npm install npm -g
npm i npm -g
```

### グローバルのパッケージ操作

##### **パッケージをインストールする**

```text
npm install [パッケージ名] -g
npm i [パッケージ名] -g
```

##### **パッケージをアンインストールする**

```text
npm uninstall [パッケージ名] -g
npm rm [パッケージ名] -g
```

##### **パッケージをアップデートする**

```text
npm update [パッケージ名] -g
npm up [パッケージ名] -g
```

##### **パッケージを確認する**

```text
npm list -g
npm ls -g
```

### ローカルのパッケージ操作

##### **パッケージをインストールする**

```text
npm install [パッケージ名]
npm i [パッケージ名]
```

##### **パッケージをアンインストールする**

```text
npm uninstall [パッケージ名]
npm rm [パッケージ名]
```

##### **パッケージをアップデートする**

```text
npm update [パッケージ名]
npm up [パッケージ名]
```

##### **パッケージを確認する**

```text
npm list
npm ls
```

### package.json関連

##### **package.json作成**

```text
npm init
```

##### **パッケージインストール時にpackage.jsonへ自動記録する**

Dependencies に記録する

```text
npm install [パッケージ名] --save
npm i [パッケージ名] -S
```

devDependencies に記録する

```text
npm install [パッケージ名] --save-dev
npm i [パッケージ名] -D
```

##### **パッケージアンインストール時にpackage.jsonの記述を自動削除する**

Dependencies から削除する

```text
npm uninstall [パッケージ名] --save
npm rm [パッケージ名] -S
```

devDependencies から削除する

```text
npm uninstall [パッケージ名] --save-dev
npm rm [パッケージ名] -D
```

##### **package.jsonを利用して一括インストール**

Dependencies + devDependencies のパッケージをインストールする(開発用)

```text
npm install
npm i
```

Dependencies のみのパッケージをインストールする(本番用)

```text
npm install --production
npm i --production
```
STM32CubeMXで動作確認用プロジェクトを作成

#はじめに
ARM評価ボードを改修して外部からクロックを供給するようにしました。
改修後にARM評価ボードが動作することを確認するために
STM32CubeMXで動作確認用のプロジェクトを作成しました。

#プロジェクトの作成
手順１）STM32CubeMXを起動する

手順２）プロジェクトを作成する
「New Project」をクリックします。

![2.jpg](https://qiita-image-store.s3.amazonaws.com/0/148400/45f20eb1-21af-c15f-e293-cfd2fe8387bc.jpeg)

手順３）ボードを選択する
「Board Selector」タブをクリックして、ボードの選択画面を表示します。
そこで「Nucleo64 NUCLEO-L476RG」を選択して「OK」ボタンをクリックします。

![3.jpg](https://qiita-image-store.s3.amazonaws.com/0/148400/9d3548c5-2741-6984-e1c0-a2eef2764769.jpeg)

手順４）ポートを設定する
「Pinout」タブをクリックして、マイコンのポートを設定します。
デフォルトからは以下を変更しています。
RCC → High Speed Clock(HSE) : Crystal/Ceramic Resonator
SYS → Debug : Serial Wire

![4.jpg](https://qiita-image-store.s3.amazonaws.com/0/148400/966e9757-9e32-dd37-13d5-f0ac095da39a.jpeg)

手順５）クロックを設定する
「Clock Configuration」タブをクリックして、マイコンのクロックを設定します。
CPU、バスのクロックは80MHzに設定しています。

![5.jpg](https://qiita-image-store.s3.amazonaws.com/0/148400/66eed5f6-ab1c-a615-9ce9-7322b7497f9c.jpeg)

手順６）ソースコードを生成する
メニュー「Project」の「Generate Code」をクリックして、ソースコードを生成します。

![6.jpg](https://qiita-image-store.s3.amazonaws.com/0/148400/6149d6f5-f2e5-6851-bf8b-2b0b6271fa31.jpeg)

手順７）開発用のプロジェクトを作成する
任意の場所に開発用のプロジェクトを保存します。
IDEはMDK-ARMの評価版を使用しているので「MDK-ARM V5」を選択しています。
「OK」ボタンを押すと指定したフォルダに開発用のプロジェクトが作成されます。

![7.jpg](https://qiita-image-store.s3.amazonaws.com/0/148400/7cf981f8-597b-327a-7f99-7a5e8a3becc6.jpeg)

#まとめ
今回は動作確認用のプロジェクト作成しました。
次はmainまで動作することを確認したいと思います。
デザイナーの天敵『ターミナル』基礎の基礎

黒い画面のアイツです。
Webに関わっていると結構な頻度でターミナルを使わなければいけませんが、おそらく多くのデザイナーにとっては恐怖の存在。

毎回エンジニアに対応してもらうのも心苦しいと思うので、自分用のメモも兼ねて基礎の基礎を挙げておきます。

##そもそもターミナルって何?
普段私たちは画面に映るグラフィックをマウスなどを通じて直感的に操作しています。
これをGUI(グラフィカル・ユーザ・インタフェース)と呼びます。
MacだとFinderがこれですね。

対してCUI(キャラクタユーザインタフェース)と呼ばれる存在があります。
CUIは文字入力でコンピューターに直接命令をすることによりコンピューターを操作します。
ターミナルはこれです。

ターミナルを使えばFinderより色々なことができるみたいです。

##任意の階層に移動するをやってみる
GUI(Finder)ならフォルダをクリックしていけば任意の階層に簡単にいけますが、CUI(ターミナル)では適切なコマンドを入力してあげないと移動できません。
その一連の流れに必要なコマンドを挙げてみます。


###基本的にはユーザーディレクトリ
ターミナルを開いたとき、今いる場所として認識されているのはアカウントディレクトリの直下です。

```
/Users/ユーザー名
```

###pwd

現在いる位置を表示します。
『デスクトップ』にいる場合には以下のように表示されます。

```
$ pwd
Users/ユーザー名/Desktop
```

###ls
現在いる階層内にあるすべてのファイルを表示させます。

```
$ ls
Sample Test
```

###cd

```cd```の後に半角スペースを入れて移動先のフォルダ名を入力すると移動します。
```ls```を使って現在いるフォルダ内にあるすべてのファイルを表示させ、```cd```で移動、```pwd```で確認が基本的な流れになります。

```
$ ls
Sample Test
$ cd Sample
$ pwd
Users/ユーザー名/Desktop/Sample
```

##最後に
わかっている人にとっては鼻で笑うような簡単な事でしょうが、わからない人の苦手意識を少しでも無くせれば幸いです。
誕生日から年齢を計算する(pandas編)

年齢計算の手法自体は古から伝わるものです。

```Python
import pandas as pd

today = int(pd.to_datetime('today').strftime('%Y%m%d'))
birthday = int(pd.to_datetime('1979/5/14').strftime('%Y%m%d'))
int((today - birthday) / 10000)

```

これだけならわざわざpandas使うまでもないですが、
to_datetimeがかしこいのと、Dataframeと連携しやすいので乱用中です。

せっかくなのでDataframeとの連携例も。

```Python
import pandas as pd

# 誕生日のリスト
df = pd.DataFrame([
        {"name":"tarou", "birthday":pd.to_datetime('1979/5/14')},
        {"name":"jirou", "birthday":pd.to_datetime('1981/9/10')},
        {"name":"saburou", "birthday":pd.to_datetime('1985/6/20')},
    ])
df
```

|   |birthday  |name      |
|--:|:---------|:---------|
|0  |1979-05-14|    tarou |
|1  |1981-09-10|    jirou |
|2  |1985-06-20|  saburou |

```Python
# 使いやすいように、今回の手法を関数化
def getAge(birthday):
    today    = int(pd.to_datetime('today').strftime('%Y%m%d'))
    birthday = int(birthday.strftime('%Y%m%d'))
    return int((today - birthday) / 10000)

df['age'] = df['birthday'].apply(lambda date: getAge(date))
df
```

簡単に「年齢」列を追加できました。

|   |birthday  |name      |age|
|--:|:---------|:---------|--:|
|0  |1979-05-14|    tarou | 37|
|1  |1981-09-10|    jirou | 35|
|2  |1985-06-20|  saburou | 31|
Centos6 にPHP5.6をinstall

vagrant と virtual-boxを使い、centos6にPHP6を入れる手順のメモ。
#使用するアプリケーションなど
vagrant: 1.8.1
virtualbox:5.0.14
vagrantbox:centos/6

#initからPHPのインストールまで
##開発用ディレクトリの作成
デスクトップの下に開発用ディレクトリ[php_practice]を作成。
*termianl*

    $ cd ~ 
    $ cd /Desktop
    $ mkdir php_practice
    $ cd php_practice
##vagrant initでcentos/6の準備(boxの準備)
OS(centos/6)の準備
*terminal*

    $ pwd
    /Users/user_name/Desktop/php_practice
    $ vagrant init centos/6
vagrant init [box_name]で指定したboxの準備ができます。

##PHPのインストール
centos 6の標準PHPのversionは5.3なのでそのままinstlal せずにレポジトリを追加してインストール
*terminal*

    $ pwd
    /Users/user_name/Desktop/php_practice
    $ vagrant ssh
    $ sudo su -
    $ yum -y install epel-release.noarch
    $ rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm
    $ yum install --enable-remi
    以下2つはお好みで
    $ yum install --enablerepo=remi,remi-php56 
    $ yum -y install php56.x86_64

remiのリポジトリを追加して、php56をインストールします。
あとは好きなものを入れておく。
Instagramのアクセストークンの取得方法

Instagramのクロールを実施しようとAPI登録したんだけど、アクセストークンを取得できず詰まったので確認方法をメモしておく。

## 状況
以下URLに沿って、アクセストークンを取得しようとしたところエラーでアクセストークンが取得できない。
http://d.hatena.ne.jp/tksthdnr/20110922/1316717437

**ターミナルで実行したコマンド**

```
curl \					
-F 'client_id=[Client ID]' \					
-F 'client_secret=[Client Secret]' \					
-F 'grant_type=authorization_code' \					
-F 'redirect_uri=[Valid redirect URIs]' \					
-F 'code=[code]' \					
https://api.instagram.com/oauth/access_token					
```

**エラーMSG**

```
{"error_message": "Matching code was not found or was already used.", "error_type": "OAuthException", "code": 400}
"Matching code was not found or was already used.
```

## 回避方法
参考：http://fujiyamaworks.blogspot.jp/2012/08/instagram-api-access-token.html

1.Security > Disable implicit Oauthのチェックを外す
![image](https://qiita-image-store.s3.amazonaws.com/0/150939/a1f256c3-f491-ea3a-eab7-29dc0bed068e.png)


2.以下URLにClient IDとValid redirect URIsを設定

```
https://instagram.com/oauth/authorize/?client_id=[Client ID]&redirect_uri=[Valid redirect URIs]&response_type=token&scope=public_content
```


3.「#access_token=」以下の値がアクセストークンとなる
![image](https://qiita-image-store.s3.amazonaws.com/0/150939/2ae9b63b-6216-335d-8168-fff97a7d0b81.png)


URLには`&scope=public_content`も付与しておく。
つけないと`https://api.instagram.com/v1/tags/[Tag名]/media/recent/?access_token=[acessToken]`でタグがついているものを取得しようとしたときに以下エラーとなる。

```
{"meta": {"error_type": "OAuthPermissionsException", "error_message": "This request requires scope=public_content, but this access token is not authorized with this scope. The user must re-authorize your application with scope=public_content to be granted this permissions.", "code": 400}}
```
Must Have Tools For DevOps Success

We have seen a trend. Many organizations talk about best practices but fail to practice them properly. DevOps is one such thing that is getting more attention, but we see a lot of negligence in adopting it properly. To embrace DevOps, you need to make sure, your engineers have that knowledge and capability with a set of tools to foster this change in the organization.

You need to have processes that support DevOps to streamline shipping of software and they should be:

Integrated. You need to have a unified platform with one view across deployment pipelines for all applications

Heterogenous. You need a polyglot that supports all languages, tools, and clouds.

Secure. You need to have policy-driven permissions enabled and have end-to-end audit tracking of who is doing what.

Let’s go in depth, what else you need to make your DevOps the real deal?

You need a version control system and a code repository tool that helps developers make changes easily and collaborate well. You should use tools such as GitHub and Bitbucket.

You need a Continuous Integration platform/tool to make integrations faster whenever any developer commits code. It consists of a workflow that helps software teams ensure that their changes are built and tested with the latest version of the entire codebase.

You can use tools such as [Shippable](https://app.shippable.com), [Codeship](www.codeship.com), [Travis CI](travis-ci.org), [GO CD](www.go.cd) and [XebiaLabs](www.xebialabs.com).

You need a cloud computing platform to help do Continuous Integration and Continuous Deployment. AWS is an amazing platform that you can make use of.

You need a containerized platform to package and ship programs. This helps developers run their apps and test in isolated environments with different OS which are very light in weight.

Docker is the platform for you to use here

You need to have a Continuous Deployment platform that integrates teams and processes to streamline shipping of software.

Tools you can use include Shippable and GO CD.

You also need to have some third-party integration tools to notify you the status of the project or anything. Slack will help with notifications.

Making DevOps real in any organization requires patience, enthusiasm to change, accepting the change, and putting in place a set of practices and tools that make it possible.
AWS Lambda のイベントソースごとの呼び出しタイプ


一覧が欲しかったのでメモ

| イベントソース | 呼び出しタイプ | 種別 | その他 |
|--------|--------|---------|----------|
| Amazon S3 | 非同期 |  | [イベントメッセージの構造](http://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/notification-content-structure.html) |
| Amazon DynamoDB | 同期 | ストリームベース |
| Amazon Kinesis Streams | 同期 | ストリームベース |
| Amazon Simple Notification Service | 非同期 |  |
| Amazon Simple Email Service | 非同期 |  |
| Amazon Cognito | 同期 |  |
| AWS CloudFormation | 非同期 |  |
| Amazon CloudWatch Logs | 非同期 |  |
| Amazon CloudWatch Events | 非同期 |  |
| AWS CodeCommit | 非同期 |  |
| スケジュールされたイベント(Amazon CloudWatch Events) | 非同期 |  |
| AWS Config | 非同期 |  |
| Amazon Echo | 同期 |  |
| Amazon Lex | 同期 |  |
| Amazon API Gateway | 同期 |  |
| オンデマンド | 同期/非同期 |  |


[AWS Lambda:イベントソースによって公開されたサンプルイベント](http://docs.aws.amazon.com/ja_jp/lambda/latest/dg/eventsources.html)
[AWS Lambda:サポートされているイベントソース](http://docs.aws.amazon.com/ja_jp/lambda/latest/dg/invoking-lambda-function.html)
[AWS Lambda:エラー時の再試行](http://docs.aws.amazon.com/ja_jp/lambda/latest/dg/retries-on-errors.html)
【VBA上達事例】VBAの資格も取得し、システム開発の仕事をするまでになった女性

※こちらの記事は、プロスタ編集部が現在大変人気の高いVBAの学習法を公開することで、皆様のお役に立ちたい意図で投稿しております。

参考サイト：[【VBA上達事例⑨】VBAの資格も取得し、システム開発の仕事をするまでになった女性](http://programming-study.com/case/dispatch/)


#【VBA上達事例】VBAの資格も取得し、システム開発の仕事をするまでになった女性


東京都に住む20代後半の女性がVBAの勉強をした話です。

##事務職としての派遣でVBAに興味を持ち始めた

私がVBAを知ったそもそものきっかけは、事務職の派遣社員としてとある会社の経理部に配属されたことでした。その部署ではExcel・Accessの機能に精通した人が多く、当時の私はピボットテーブルやクエリ等知らない機能について教わる事が多く、とても勉強になりました。そんな中、経理部の先輩がVBAで作ったコードを業務で使用させて頂く機会があり、複雑なデータの集計がボタンを押すだけであっという間に処理されているのを見て、ただただ感動したのを覚えています。

##数ヶ月の作業を30分で終わらせた

私は無理にVBAまで覚える必要は無いとのことでしたが、大学は一応情報処理系でC言語等の基礎は習得した事もあり、先輩のコードを1行ずつ目で追いながら様々なメソッドをネットで検索して調べ、簡単なコードは組めるようになっていました。そして、ある時Excelで数万件のデータ処理を手入力しなければならない事があり、「数か月はかかると思うけれど手の空いている人から取り組んで欲しい」と上司から言われました。しかし、VBAで処理を試みたところ、コードを組む時間込みで30分ほどで作業が終わったのです。周りからはかつてないほど褒めて頂き、このときの経験は私の派遣人生の中で忘れられない出来事となりました。

##VBAのスキルを磨くために資格の勉強をした

しかし、その後私は別の部署へ異動となり、上司も全く違うタイプの人になってしまいました。その上司は「VBAに興味は無いし、覚えるつもりもない」と私に言い放ち、私は紙媒体のデータをただひたすら手作業でこなす作業が増えていくのに疲れ、また折角覚えたVBAの技術を忘れてしまう事に焦りを感じていました。そんな中、派遣の求人情報を見ているとVBAの開発を中心に行う業務が数多く存在することに気付いたのです。事務職よりもお給料は良いし、自分なりのスキルを磨いていくにはこれしかない！と思った私は早速オデッセイコミュニケーションズから発行されている公式テキストを取り寄せ、資格取得のための勉強に取りかかりました。ちなみにテキストは1冊3000円程で、ベーシック・スタンダードの両資格を取る為テキスト代は6000円程でした。また資格受験のための費用も13000円程と高いので、みっちり3カ月勉強してベーシックの資格は飛ばしてスタンダードの資格に合格しました。

##VBAを使った仕事に就くまでになった

今ではVBAを使用したシステム開発のお仕事を頂き、今でも勉強することは多いですが充実した日々です。プログラミングのお仕事は勉強することが多いですが、その一つ一つの経験が自分の武器になり、またこれからも色々な場面で必要とされていくと感じています。先は長いですが、自分なりに一歩一歩取り組んでいくことがプログラミング習得の秘訣だと思います。

【オススメ記事】
➡︎[【VBA上達事例⑧】VBA資格取得を独学で。使った書籍3冊は？](http://programming-study.com/case/side/)
➡︎[【VBA上達事例⑩】VBA習得のコツは1つ1つ機能を実装していくこと](http://programming-study.com/case/vba-2/)
➡︎[ VBAの本・参考書の評判](http://programming-study.com/language/vba-book/)
【VBA上達事例】VBA習得のコツは1つ1つ機能を実装していくこと

※こちらの記事は、プロスタ編集部が現在大変人気の高いVBAの学習法を公開することで、皆様のお役に立ちたい意図で投稿しております。

参考サイト：[【VBA上達事例⑩】VBA習得のコツは1つ1つ機能を実装していくこと](http://programming-study.com/case/vba-2/)


#【VBA上達事例】VBA習得のコツは1つ1つ機能を実装していくこと

30代後半男性がVBAを習得し、Excelでの作業を効率化できるようになった事例です。

##マクロ機能を自分で開発できるようになりたい

私は、会社でExcelのマクロ機能を使っていましたが、自分で実際に開発したことはありませんでした。そこで、自分でも開発できるようになれば、公私ともにExcelをよく使うので、作業を効率化できるのではないかと思ったのが習得しようとしたきっかけです。

##まずはマクロの効用とプログラムの実行方法を理解する

まずは、マクロの効用についてExcelでプログラム作成を始めるメリットとマクロ というサイトで学びました。（※Excel2010を使用するという前提で記載します。）VBAとは何かということが理解できれば、次のステップとしてプログラミングをどこに記載して、その記載したプログラミングをどうやってExcel上で実行するのかを知ることが大切です。もし、仕事や私生活で何らかの作業をExcelで実施しているならば、定期的な作業(例えば、同じセルの値を色んなところにコピーする)をExcelマクロで効率化できるので、その開発を課題として取り組んでみてはいかがでしょうか。普段の作業を効率化できる上にマクロを習得できるので一石二鳥になります。

##欲しい機能を細分化して、一つ一つ作っていくのが開発のコツ

マクロの効用とプログラムの実行方法が理解できたら、簡単なプログラミング(例えば、メッセージ「A」を表示する)をコードに記載して実行してみましょう。Excelマクロの場合は様々な実行方法があるので、いくつか試してみましょう。次に、上記で課題とした機能を実現するためにはどんな機能が必要かを洗い出します。私の場合は、初めは各シートに入力された複数セルの数値の合計を各シートの指定されたセルに表示する機能をボタン一つでできるようにマクロを作成してみました。この機能は、「各シートの各セルを読む込む」「各シートの各セルの合計値を計算する」「各シートの合計値をセルを表示する」といった機能に細分化できます。これらの機能を順次プログラミングしていきました。1つの機能を作って、テストしてＯＫなら次の機能を追加してテストをするということを繰り返すのが開発のコツになります。

##基礎を理解して一つずつステップアップしていくことが大切

もし、VBを経験していればプログラミングの文法等はほぼ同じなので問題ありませんが、経験がなければExcel VBAによるマクロプログラミングというサイトを参考にして下さい。ここまで出来れば、基本的なマクロの機能と仕組みについては理解できると思います。あとは、事務職等のＰＣを用いる仕事ではもっと複雑なマクロが必要な時があります。基本を理解したら、少しずつ難しいマクロを組むとより上達に繋がるでしょう。

【オススメ記事】
➡︎[【VBA上達事例⑨】VBAの資格も取得し、システム開発の仕事をするまでになった女性](http://programming-study.com/case/dispatch/)
➡︎[【VBA上達事例⑪】明確な目標設定が継続のコツ！VBAを独学で習得](http://programming-study.com/case/goal/)
➡︎[VBAの本・参考書の評判](http://programming-study.com/language/vba-book/)
➡︎[習得必須！VBAを教われるスクールBEST5](http://programming-study.com/language/vba-school/)
➡︎[VBA入門講座①「VBAってどんな言語？」](http://programming-study.com/technology/vba-about/)
適切なグラフの選び方

グラフの選び方の解説がわかりやすかったので、覚書として残しておきます。

https://www.perceptualedge.com/articles/b-eye/encoding_values_in_graph.pdf

http://extremepresentation.typepad.com/blog/2006/09/choosing_a_good.html

http://www.perceptualedge.com/articles/ie/the_right_graph.pdf
Spineデータを映像出力する

# Spineとは

[公式ページ](http://ja.esotericsoftware.com/)によると、

> Spine は 2D アニメーション専用に開発されたソフトウェアで、魅力的なアニメーションの作成、そして完成したアニメーションのゲームへの統合に効率的なワークフローを提供します。

という説明の通り、2D静止画イラストをアニメーションさせるツールとなっている
Unityなどのゲームエンジンに組み込める利点から様々なゲームスタジオで採用されており、主に海外では多くの採用実績がある
特徴としては

- ボーン制御
- IK
- メッシュによる様々なデフォメーション

などが挙げられる
あまりガッツリと触っているわけではないのだが、シンプルなボーン制御は結構イイね、と思った
![Spine 2016-12-19 13-48-12-790.gif](https://qiita-image-store.s3.amazonaws.com/0/150949/b6818456-f245-0167-7944-6985ed028fc8.gif)

日本のゲームスタジオでも採用されているような昨今、最近自分のところに来た案件で
「Spineで作成されたキャラクターデータをPVなどの映像に使用したい」というものがあった
その際にちょっと引っかかった「**映像出力について**」記したい


# Spineの映像出力

例えば[Live2D](http://www.live2d.com/ja/)には「AfterEffects用プラグイン」が[用意されており](http://sites.cybernoids.jp/cubism2/tools/ae-plug-in)、映像との組み合わせは割とすんなり行くのだが、Spineの場合はそのようなプラグインが用意されておらず(というか用意しているLive2Dが特殊例なのだが）、何かしらの「映像」として出力(エクスポート）しなければならない

だが、Spineには「**エクスポート用のオプションがほとんど存在しない**」
特に普通ならありそうな「出力する解像度の設定」が無いので、基本的にエクスポートされる映像の解像度は
「**オブジェクト全体の解像度（キャラクターの大きさ）**」
になる。3000 x 3000pxのキャラクターデータならば3000 x 3000pxの映像が出力される

大きく引っかかりそうな点としては
- ~~RGBAで出力出来ない~~ (v3.6.1.5で改善され、アルファの出力が強化されました)
- 出力範囲を指定できない（フレームでここからここまで、のようなやつ）
以上の２点だろうか

![WS000042.JPG](https://qiita-image-store.s3.amazonaws.com/0/150949/5ef67a48-e0ce-8935-e8ed-e034678a052d.jpeg)
見よ、このシンプルなエクスポート画面を
# 結論

一番手っ取り早いのは

- **QuickTime Animation**
- **QuickTime RAW**

の２つになると思われる。pngは現状安定していない。更にメチャクチャ処理が重い。

--(※20170421追記)--

以下はv3.6.1.5で改善され、アルファ付きの出力が出来るようになったので、映像用途ではアルファ付きで出力することをオススメします

--追記ここまで--


アルファについては

- **背景を緑一色なりにしてキーイング処理を行う**

という原始的やり方で処理するのが今のところいいのかなと。
キャラクターによっては「半透明」なオブジェクトがあったりして、これも一概にベストソリューションでは無かったりする。その際は「半透明オブジェクトだけ出力する」などの工夫で乗り切れると思う。
![test [f0007](1).png](https://qiita-image-store.s3.amazonaws.com/0/150949/14b89da9-a487-d08a-2e45-8a9b82140d36.png)

ちなみにFPS指定は３０だろうが６０だろうがソフト側で勝手に補完してくれるので、スロー処理などをしたいならば60、120などを指定しておくとよい。

たまに起きる問題として、いざエクスポートしようとしても「本来出力されるはずの解像度」でエクスポートされない時がある。3000 x 3000px解像度のキャラクターアニメーションをエクスポートしたら何故か「巨大な黒い空間の中央にポツンとキャラクターがいる」映像が出力されるのだ。
現バージョンだとほとんど起きないようだが、それでもたまに起きる時があるので解決方法として

- **全てのタブ(パネル）を閉じた状態でキャラクターを１００％表示してエクスポート**

というのを行うと問題が解決されるので、もし困ってしまった際は試して頂きたい

以上となっております