OmniAICreator/Qiita-1.07M huggingface dataset:
micro:bit windowsアプリでブランコ周期計測・自由落下時間計測


#micro:bit windowsアプリ「makecode for micro:bit Windows 10 App」がリリース

2018年1月にMicrosoftからリリースされた「[MakeCode for micro:bit Windows 10 App](https://www.microsoft.com/store/apps/9PJC7SV48LCX)」を使うと、たった数ブロックで各種データ（加速度・温度・照度・磁力・etc）のリモート計測環境(micro:bit複数でBLE通信)が小学生でも簡単に作れるようになりました。

![remote_image.png](https://qiita-image-store.s3.amazonaws.com/0/44523/663280af-7eb2-f6b7-2e6b-8c340e160250.png)

理科の実験や、測定器メーカーやIoT機器メーカー主催の子供向けの体験イベントで使ったら面白そうです。

先日、Tech Support EngineerのMarkさんにお会いする機会があり「2種類メンテナンスする事になって大変なんじゃない？」と聞いたところ作業は独立していて彼的には変わらないとの事でした。

一点、まだbetaなので多少おかしいところがあります。2018年2月4日時点では

- 初め英語モードにしないと途中で止まる現象を確認（一旦起動後は日本語にしても問題なかった）
- 突然落ちることがある（数回経験）
- micro:bitが見つけられなくなる（プログラムを再起動すると治る）
- csv保存が出来ない事がある

等の現象を確認しています。

#万能受信プログラム

![jyushin.png](https://qiita-image-store.s3.amazonaws.com/0/44523/70e02841-b41b-dc0c-0ffc-93a66a9868f8.png)
https://makecode.microbit.org/_8E29aMYCjeeq
たった10ブロックで、万能受信機の出来上がりです。
COMポート番号の確認等は不用となりました。
素晴らしい♪

#送信プログラム（加速度絶対値）

送信機側ですが、加速度のグラフを描きたいだけならこちらも10ブロックで、こんな感じ。

![soushin.png](https://qiita-image-store.s3.amazonaws.com/0/44523/0c2b4466-508c-bd84-3478-925bc6355921.png)
https://makecode.microbit.org/_AHJAMd6kPA2s


#動作確認

##ブランコ周期計測

![ブランコの周期.png](https://qiita-image-store.s3.amazonaws.com/0/44523/ff455a90-3aa4-2f60-cd52-4c89ca0bed36.png)

「ストップウオッチで十分」という気もしまが、リアルタイムに描かれる加速度のグラフはリアリティがありました。
ブランコの長さが162cm。振子の重心は150cm前後だと思われます。
仮に150cmとして、微小振動の単振り子とした場合の理論値は、2*3.14*sqrt(1.5/9.8)≒2.46sec。
実測値も2.5秒前後だったのでだいたいあっていると思います。

##自由落下時間計測

「micro:bitが壊れたら...」と心配する方にはおすすめ出来ませんが、プチプチにくるんで自由落下運動を測定してみました。
![drop_microbit2.jpg](https://qiita-image-store.s3.amazonaws.com/0/44523/e31f449e-9220-cee3-ba66-64981ce48226.jpeg)


離した瞬間に無重力になり途中から徐々に空気抵抗による減速が発生し地面に激突する様がリアルタイムで測定できるのはとても面白いです。
ちなみに、空気抵抗がない場合の落下時間は理論値でsqrt(2*3.94/9.8)≒0.896sec。


#問題点

上記の実験ではほぼ問題ありませんでしたが、センサー種類や数、送信側が複数個になってくると、受信側で遅延や取りこぼしが発生する事があります。綺麗にグラフが描けない場合は、

- 適度にスリープを入れる
- 1度の送信で複数個のデータを送る
- 送信側のタイマー情報を一緒に送る
- 受信完了通知を受け取るまで次のデータを送らない

等の工夫が必要となります。子供達と数を増やすと何で綺麗に描けないかを考え、工夫の方法を考えるのも楽しそうです。

#終わりに

私は物理は専門ではありません。もし、測定方法や計算方法に誤りがあれば御指摘頂ければ幸いです。
また、もっとこんな測定につかった方が面白い等のアイディアがあれば教えてください。
JavaScriptのWebGLでディープラーニング

# はじめに

前回の記事ではWebGL 2.0を使ってGPUによる汎用計算(**GPGPU**)をするライブラリ**gpgpu.js**の紹介をしました。

前回記事 : [JavaScriptのWebGL 2.0でGPGPU](https://qiita.com/teatime77/items/e867d7d462cb553b373d)

今回はそのライブラリを使ってディープラーニングのアプリを作ったので結果を報告したいと思います。

機械学習ではおなじみのMNISTの手書き文字認識をして正解率は９９%でした。

以下が今回作ったアプリのURLです。
[http://lkzf.info/gpgpu.js/DeepLearning/MNIST.html](http://lkzf.info/gpgpu.js/DeepLearning/MNIST.html)

ソースはGitHubに上げています。
[https://github.com/teatime77/gpgpu.js](https://github.com/teatime77/gpgpu.js)

ライブラリのレファレンスは以下にあります。
[http://lkzf.info/gpgpu.js/doc/](http://lkzf.info/gpgpu.js/doc/)

**画面のサンプル**
![screen.png](https://qiita-image-store.s3.amazonaws.com/0/118740/706bb4c0-2d3f-ada0-1909-d8b8fe89f43c.png)


# ニューラルネットワーク

ネットワークの構成は入力層を含めて１０層の畳み込みニューラルネットワークです。
![network.png](https://qiita-image-store.s3.amazonaws.com/0/118740/251ec980-86b8-c589-9aad-f56c8f0ec984.png)

以下はこのネットワークを作るJavascriptのコードです。

```js
var net = CreateNeuralNetwork(theGPGPU);

net.setLayers([
    net.InputLayer(1, 28, 28),
    net.ConvolutionalLayer(5, 20, ActivationFunction.ReLU),
    net.MaxPoolingLayer(2),
    net.ConvolutionalLayer(5, 40, ActivationFunction.ReLU),
    net.MaxPoolingLayer(2),
    net.FullyConnectedLayer(1000, ActivationFunction.ReLU),
    net.DropoutLayer(0.5),
    net.FullyConnectedLayer(1000, ActivationFunction.ReLU),
    net.DropoutLayer(0.5),
    net.FullyConnectedLayer(10, ActivationFunction.none)
]);
```
活性化関数はReLUを使っています。

学習は普通のSGD(確率的勾配降下法)です。

学習のテクニックとしてドロップアウト以外に以下を使いました。
- **L2正則化**  重みにペナルティを科します。
- **Heの初期値**  直前の層のノードの数が $n$ 個の場合、重みの初期値を標準偏差 $ \sqrt{ \frac{2}{n} } $ の正規分布にします。

# テスト環境

以下のPCでテストしました。すべて64ビットPCです。

- **iiyama ゲームPC** : Core i7 3.4GHz, GeForce GTX 1070 , Windows10
- **DELL ノートPC** : Core i5 2.4HGz, Intel HD Graphics 520 , Windows10
- **Mac mini** : Core i5 2.5HGz, Radeon HD 6630M

ブラウザはChromeを使いました。
他のブラウザではまだテストできていません。

## 正解率99%までの道のり

**Math.random** を使わず擬似乱数を計算しているので同じPCなら計算結果は常に同じになります。

**iiyama ゲームPC** と **DELL ノートPC** は計算結果は完全に一致して、以下のように10番目のエポックで99.07%になりました。

```math

\begin{array}{c|ccccc}  
エポック & 0 & 1 & 2 & 3 & 4 & 5 & 6 & 7 & 8 & 9
\\   
\hline  
正解率 & 97.60 & 97.84 & 98.46 & 98.44 & 98.83 & 98.83 & 98.86 & 98.93 & 98.82 & 99.07
\end{array}
```
**Mac mini** は **iiyama** や **DELL** と計算結果にずれがありますが、10番目のエポックで99.06%でした。

**iiyama** は1エポックの処理に8分くらいかかりますので、10エポックだと80分=1時間20分くらいかかります。

**DELL** と **Mac mini** は1エポックに20数分かかりますので、10エポックだと数時間になります。

# おわりに

ディープラーニングを使ったウェブアプリケーションがいろいろ作れればよいのですが、学習時間がネックになりそうです。

事前に学習しておいたモデルを使うのがよいかも知れません。

また、最近ではWebGL 2.0が使える携帯もありますので、携帯でディープラーニングができれば面白そうです。

手持ちの機器でWebGL 2.0が動作するかは以下のページで確認できます。
[http://webglreport.com/?v=2](http://webglreport.com/?v=2)

今後は学習に時間がかからない何か実用的なアプリを作ってみたいと思います。

ここまでお読みいただきありがとうございました。
php pdo MySQL MariaDBに接続

## phpのpdoでmariadb(mysql)に接続
私は、これでできました。

```php:login.php
<?php
    define('DB_HOST', 'localhost');
    define('DB_USER', 'ユーザー');
    define('DB_PASSWORD', 'DBパスワード');
    define('DB_NAME', 'DBの名前');

    // エラー表示設定:通知系以外全て表示    
    error_reporting(E_ALL & ~E_NOTICE);

    try {
        $dbh = new PDO('mysql:'.DB_NAME.';'.DB_HOST, DB_USER, DB_PASSWORD);
        print('接続しました。');
    }
    catch(PDOException $e){
        print('ERROR:'.$e->getMessage());
        exit;
    }
?>
```
force_dispatch=FalseのままKivyのPropertyでNumpyの配列を扱う

# 概要
```python3
import numpy as np
from kivy.properties import ObjectProperty
from kivy.uix.widget import Widget


class NdarrayWrapper(np.ndarray):
    def __eq__(self, other):
        return np.array_equal(self, other)


class NdarrayProperty(ObjectProperty):
    def set(self, obj, val):
        if not isinstance(val, NdarrayWrapper):
            val = np.asanyarray(val).view(NdarrayWrapper)
        return super().set(obj, val)

    def get(self, *args, **kwargs):
        val = super().get(*args, **kwargs)
        return None if val is None else val.view(np.ndarray)


class MyWidget(Widget):
    my_property = NdarrayProperty()
```

# はじめに
PythonのGUIフレームワーク [Kivy](https://kivy.org/#home) でデータバインディングを利用するとき、普通はPropertyを使います。
しかしこのProperty、値が更新されたかどうかを `bool(a == b)`  で判定しているため、Numpyの配列と相性がよくありません。

例えば以下のようにすると警告が出て値を更新できません。

```python3
import numpy as np
from kivy.properties import ObjectProperty
from kivy.uix.widget import Widget

class MyWidget(Widget):
    my_property = ObjectProperty()

w = MyWidget()
w.my_property = np.array([1, 2, 3])
```
```
[WARNING] [Property    ] Value comparison failed for <ObjectProperty name=texture> with "The truth value of an array with more than one element is ambiguous. Use a.any() or a.all()". Consider setting force_dispatch to True to avoid this.
```

警告通り `force_dispatch=True` にすれば値を更新することはできるようになりますが、値に変化が無くても通知が飛ぶようになり双方向バインディングできません。

# 解決方法

根本的な原因は `ndarray.__eq__` の戻り値が `bool` 型でないことなので、こいつをオーバーライドしたサブクラスを用意します。
`ndarray` とサブクラスの相互変換には `ndarray.view()` メソッドが使えます。  (詳細: [Subclassing ndarray](https://docs.scipy.org/doc/numpy-1.13.0/user/basics.subclassing.html))

```python3
class NdarrayWrapper(np.ndarray):
    def __eq__(self, other):
        return np.array_equal(self, other)
```

これを以下のようにして使います。

```python3
import numpy as np
from kivy.properties import ObjectProperty
from kivy.uix.widget import Widget

class NdarrayWrapper(np.ndarray):
    def __eq__(self, other):
        return np.array_equal(self, other)

class MyWidget(Widget):
    my_property = ObjectProperty()

w = MyWidget()
w.my_property = np.array([1, 2, 3]).view(NdarrayWrapper)
```

一応これで動きますが、値更新するたびにこんなことやってられないのでProperty側もサブクラスを作ります。

```python3
class NdarrayProperty(ObjectProperty):
    def set(self, obj, val):
        if not isinstance(val, NdarrayWrapper):
            val = np.asanyarray(val).view(NdarrayWrapper)
        return super().set(obj, val)

    def get(self, *args, **kwargs):
        val = super().get(*args, **kwargs)
        return None if val is None else val.view(np.ndarray)
```

これでちゃんと `NdarrayWrapper` に変換してから格納され、`ndarray` として取り出されます。

# 注意事項

`NdarrayProperty` は `ObjectProperty.dispatch()` をオーバーライドしていないので、値変更時の通知で送られてくるデータは `NdarrayWrapper` のままです。
そのため要素ごとの比較のつもりで `a == b` するとハマるのでお気をつけ下さい。`bool` が返ってきます。
iOSでISO8601を扱う

# ISO8601とは

日付や時間を文字列形式で表現する際のフォーマット[^1]です。
WebサービスのAPIなどでよく使われます。

表記方法には、大きく分けると基本形式と拡張形式の2つがあります。

|         | iOSでの書式指定 | 出力例 |
|:--------|:------------|:------|
| 基本形式 | `yyyyMMdd'T'HHmmssZZZZZ` | 20180214T003318+09:00 |
| 拡張形式 | `yyyy-MM-dd'T'HH:mm:ssZZZZZ` | 2018-02-14T00:33:18+09:00 |

※  余談ですが、iOSでの書式指定では、年(`yyyy`)と日(`dd`)の部分は必ず**小文字**にしましょう。

[^1]: 規格の定義は[ISO8601](https://www.iso.org/iso-8601-date-and-time-format.html)を参照

# iOSでの変換方法

通常、iOSで日付(`Date`)と文字列の相互変換には`DateFormatter`を使います。上の表に記載したのと同じ書式を指定すればISO8601形式も変換できます。

iOS10またはmacOS10.12以降であれば、ISO8601形式の場合は専用の`ISO8601DateFormatter`が使えます。

Xcode9.2時点では`DateFormatter`の動作も問題なさそうですが、Appleの[ドキュメント](https://developer.apple.com/documentation/foundation/dateformatter)では、

<img width="763" alt="DateFormatter" src="https://qiita-image-store.s3.amazonaws.com/0/230873/86b02a6a-4cea-502d-6c0f-4808a20ee211.png">

と記載されているので、**使える場合は`ISO8601DateFormatter`を使った方が良い**です。

## ISO8601DateFormatterの使い方

`ISO8601DateFormatter`は`DateFormatter`とよく似ています。

基本的な使い方は、

```swift
let fmt = ISO8601DateFormatter()
```

という様に生成してから、

```swift
// ISO8601表記の文字列から日付(Date)へ変換
fmt.date(from: "2018-02-14T00:51:31+09:00")

// 日付(Date)からISO8601表記の文字列へ変換
fmt.string(from: Date()) // 2018-02-13T15:51:31Z
```
となります。

## フォーマット指定

デフォルトでのフォーマットは、拡張形式(`yyyy-MM-dd'T'HH:mm:ssZZZZZ`)となります。
フォーマットを変更したい場合は、`ISO8601DateFormatter.Options`[^2]を指定します。

例えば、日付のみを"-"区切りで表示したい場合は、

```swift
let fmt = ISO8601DateFormatter()
fmt.formatOptions = .withFullDate
fmt.string(from: Date()) // 2018-02-14
```

と指定できます。

[^2]: 指定できるオプションの一覧は[ISO8601DateFormatter.Options](https://developer.apple.com/documentation/foundation/iso8601dateformatter.options)を参照

### RFC 3339形式
RFC3339[^3]形式の表記にしたい場合は、`ISO8601DateFormatter.Options.withInternetDateTime`を指定します。

[^3]: 規格の定義は[RFC3339](https://www.ietf.org/rfc/rfc3339)を参照

### タイムゾーンの指定

特に何も指定しなかった場合、タイムゾーンは`UTC`として扱われます。
現地時間での表記にしたい場合は、次の様に`timeZone`を指定します。

```swift
fmt.timeZone = TimeZone.current
```

この場合、端末のタイムゾーンが日本(`JST`)になっていれば、`+09:00`での表記となります。

### yyyyMMdd'T'HHmmssZZZZZ形式

ISO8601の基本形式で表記したい場合は、少し工夫が必要となります。
というのも、デフォルトの形式から"-"や":"を取り除いたものが基本形式となりますが、フォーマットのオプションとしてそれらを取り除く様なオプションが存在していないからです。

では、どうするかというと以下の様に指定します。

```swift

let fmt = ISO8601DateFormatter()

var opt: ISO8601DateFormatter.Options = [.withFullDate, .withFullTime]
opt.remove([.withDashSeparatorInDate, .withColonSeparatorInTime, .withColonSeparatorInTimeZone])
fmt.formatOptions = opt

fmt.timeZone = TimeZone.current    // 現地時間表記の場合
fmt.string(from: Date())           // 20180214T005131+0900
```

ポイントは、`opt.remove()`の部分です。この`remove`で、指定したオプションを除外しています。

例えば、`.withFullDate`には元から`.withDashSeparatorInDate`の指定が含まれている為、日付の表記には"-"が入ってしまいます。それで`remove`を使い、`.withDashSeparatorInDate`の指定を取り除くことで"-"のない表記にしています。

これは、`ISO8601DateFormatter.Options`が`OptionSet`という型なのでできる方法です。この`OptionSet`はいわゆるビットフラグと同じ仕組みで、特定のオプションを追加するだけでなく、簡単に除外することも可能です。便利ですね。

# まとめ
ISO8601形式の表記を扱う時は、`ISO8601DateFormatter`を使いましょう。
`yyyyMMdd`の表記の場合の様に細かいことを考えなくて良いので楽です。
`OptionSet`を上手く使えば、柔軟なフォーマットの設定も可能です。

ちなみに、通常の`DateFormatter`との速度の違いは見ていません・・・
kerasのplot_modelでハマった話

#概要
kerasにはネットワーク構造を可視化するためのモジュールを持っています。
[モデルの可視化](https://keras.io/ja/visualization/)
これを見ると

```plot.py
from keras.utils import plot_model
plot_model(model, to_file='model.png')
```

とだけ書いてあるので、すぐにでも使えそうな気がします。
でもちょっとハマってしまったので記録を残しておきます。

#pydotとgraphvizの導入
上記のようなコードを実行すると、
'Failed to import pydot. You must install `pydot` and `graphviz` for `pydotprint` to work.'
というエラーが出ます。
どうやら、pydotprintとやらを動かすのにpydotとgraphvizというモジュールが必要なようです。
どちらもcondaから導入可能です。

ただし、
**pydotは現在開発が止まっており、python3.5および3.6では動きません。**
これらのバージョンのpythonを用いている環境では、
pydotplusまたはpydot-ngを代わりに使用することで対処できます。
私はpydotplusを使いました。

#graphviz本体の導入
実は上でインストールしたgraphvizはpython用のラッパーなので、
本体をインストールする必要があります。
[ここ](http://www.graphviz.org/) からインストーラーがダウンロードできます。
インストールしたらパスを通せば使用できます。

#最後に
この記事を書いたのは、plot_modelを使おうと試行錯誤する中でkerasのvis_utils.pyの記述ミスを見つけてそれを修正した結果上手くいったと思っていたからなのですが、再検証した結果修正の内容とは無関係であったことがわかったので最低限必要な手順だけを記録しておくこととします。
【イベントレポート】DroidKaigi2018 Kotlinハンズオンにチューターとして参加したときの感想と反省

# 福岡金髪Androidエンジニアウーマン、遂に[DroidKaigi 2018](https://droidkaigi.jp/2018/) に参戦！
毎年行きたいと思いながらも・・今年は初めての参戦が叶いました！
しかも、参加者ではなくスピーカー側での参加です。
貴重な体験でしたので、レポートを残します。
 
## 参加の経緯
日本Kotlinユーザーグループ代表の長澤太郎さん[(@ngsw_taro)](https://twitter.com/ngsw_taro)とは以前からご縁があり、
ハンズオンセッションでのチューターを探していたとのことで、僭越ながら立候補させていただきました。このセッションでは私は長澤太郎さんのKotlinハンズオンのお手伝いをしています。

## 内容をさらっと
- 開発環境はWebブラウザで使用できる[Try Kotlin](https://try.kotlinlang.org/)を採用したため環境でつまづく人があまりおらず、みなさんすんなりコーディングまで入れたかと思う。
- ハンズオンの内容は、Android de Kotlin!というよりも、
    - このJavaコードはKotlinではこう簡単に書ける
    - Kotlinの文法や特有の記述式の便利さ
    - 他言語との違い
    
などにフォーカスされていたためKotlinに興味はあるけど、
勉強してみたいけど、どこから取り掛かれば、、という方にはとてもわかりやすかったように思った。
このスライドは後で見返したとしてもKotlinの初学にはとても役に立つと思うので、私も後でまた読み返そう〜

Kotlinハンズオンの発表資料はこちら。太郎さんのツイッターより
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">発表資料です<a href="https://t.co/24IUGbJuY6">https://t.co/24IUGbJuY6</a><a href="https://twitter.com/hashtag/DroidKaigi?src=hash&amp;ref_src=twsrc%5Etfw">#DroidKaigi</a> <a href="https://twitter.com/hashtag/DroidKaigi_room4?src=hash&amp;ref_src=twsrc%5Etfw">#DroidKaigi_room4</a></p>&mdash; たろう (@ngsw_taro) <a href="https://twitter.com/ngsw_taro/status/961773632979574784?ref_src=twsrc%5Etfw">2018年2月9日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 良かった点
- Kotlinを書いてみたい、どう勉強していけばいいかわからない。とっつくことが難しい。という方向けのセッションだったので、みなさんの反応を見ていると楽しくハンズオンに参加されていたように感じた。時間があっという間でしたね！
- セッションが満席かつ立ち見の方までいらっしゃったので、Kotlinへの熱の高さを感じることができた。
- セッション終了後に質問してくださる方がいらっしゃった！

## 反省点（チューター視点）
- みなさん優秀で、かつ会場が嬉しいことに満席で(質問しづらかったかなぁ？)、みなさん淡々と課題をこなしておられました。
    - もう少し自分から声をかけて行ったほうがよかったと感じた。
    - のちにAndroidThingsのハンズオンに参加した際、困ってそうなタイミングでGooglerの方から積極的に声をかけてくださり相談しやすかったので。
- とりあえずTwitterのハッシュタグを監視して、質問に返信したり、不足してそうな情報を足すような動きはしたが、そもそもツイッターをしてない人へのフォローが考えられていなかったので、やり方を考えてよかったかも。
- もっと参加してくださった方に対するフォローや有益な情報が提供できればよかったな。
- 質問いただいたことに対してもう少しわかりやすく回答できたらよかった。

## まとめ
- 福岡のしがないAndroidエンジニアだけど、このようなチャンスを頂いてスピーカー側(喋ってはいないけど)で出席できたのは人生においてもエンジニア人生においてもとても素晴らしい体験だったと思う。
- もっとKotlin勉強しなきゃ！と思った日であった。
- DroidKaigi自体についての感想はまたあらためて記事を書く。

(おまけ)
実際にこのセッションに参加された方、スライドについて疑問がある方はお気軽に何かしらの反応をいただけると嬉しくなります。
mariadb mysql パスワード変更(過去に作ったやつを使いたい時)

いつか作っていたユーザを確認。

```
MariaDB [(none)]> select user, host from mysql.user;
```
権限を確認

```
MariaDB [(none)]> show grants for 'username'@'localhost';
```
## パスワード変更

```
MariaDB [(none)]> set password for 'username'@'localhost' = password('pass');
```

これで過去に作ってpasswordがわからなくなったやつをまた使えます。
Burpの拡張機能　Extenderを作る。〜シンプルにtabを付ける〜

![スクリーンショット 2018-02-14 1.04.45.png](https://qiita-image-store.s3.amazonaws.com/0/127391/1a78d806-a285-513d-2172-df4b89711eef.png)


```
package burp;

import java.awt.Button;
import java.awt.Component;

public class BurpExtender implements IBurpExtender,ITab{

    private IBurpExtenderCallbacks callbacks;
    private Component comp;
    
 @Override
 public void registerExtenderCallbacks(IBurpExtenderCallbacks callbacks) {
        this.callbacks = callbacks;
        comp = new Button();
        callbacks.setExtensionName("test");
        callbacks.addSuiteTab(BurpExtender.this);
    }
    

    @Override
    public String getTabCaption() {
       return "testTabCaption";
    }

    @Override
    public Component getUiComponent() {
        return comp;
    }

```
Extenderで読み込んだ時に最初に呼ばれるのがregisterExtenderCallbacksメソッドです。

BurpのExtenderは**registerExtenderCallbacksのメソッドを実装しないと、動かない。**

引数で渡されたcallbacksをこのクラス（BurpExtender）の変数に格納する。

その後にjavaのコンポーネントであるjava.awt.ComponentのButtonクラスをComponentの変数に格納する。

そしてIBurpExtenderCallbacks内のメソッドsetExtensionNameで名前を書く。

で、callbacksのaddSuiteTabメソッドで、BurpExtender自身にタブを追加する。

Itabをimplementしたので、getTabCaptionメソッドでタブの表示名を付ける。

getUiComponentメソッドにComponent（ここではButton）を返す。


これで、タブの追加を行うことが出来る。
Bookmarkletを作ろう(jQuery準備編）

Bookmarklet準備編その２
#はじめに
[前回](https://qiita.com/kanaxx/items/63debe502aacd73c3cb8)は、Bookmarkletのごくごく基本の実行方法とCloure Compilerを使って開発を簡単に行う方法を紹介しました。今回は、Bookmarkletで気持ちよく遊ぶための準備編の続きで、BookmarkletでjQueryを使うための下準備をします。

#jQueryが使える状態か確認
まずは、ブックマークレットを動そうとしているページがjQueryを使っているかどうか確認しましょう。HTMLのソースから探してもよいですし、開いているページのブラウザのアドレスバーに以下を入力してみると簡単です。

```javascript
javascript:alert($.fn.jquery);
```

まず、対象となるページを開き、

|![image.png](https://qiita-image-store.s3.amazonaws.com/0/168315/0a312896-0703-d65e-5676-04c69153b80c.png)|
|:-:|

ブラウザのURLバーに先ほどのコードを入力してEnterキーを押すだけです。

|![image.png](https://qiita-image-store.s3.amazonaws.com/0/168315/690acfc7-4b04-e185-cac2-43b54a8199c6.png)|
|:-:|

バージョンが表示される場合は、jQueryが使われています。何も表示されない場合には、dev toolのコンソールにエラーが出ていないか確認しましょう。

##jQueryが使われていてそのバージョンで十分な場合
ページ内のjQueryで十分な場合には、以下のコードをサンプルにjQueryを使ってコードを書けばOKです。

```javascript
void((function(a,b){
    //ここに自由にコードを書く　$も使える状態です

    console.log('param=%s,%s', a,b);
    alert($.fn.jquery);
    $('img').hide();
}('A','B')))
```

このコードを実行すると、開いているページ内の画像が全て非表示になります。

##jQueryがない場合、バージョンが不足している場合
この場合は、実行するブックマークレットからjQueryのライブラリを読み込んでから、コードを実行するようにします。コードの内容は、参考ページ１と参考ページ２に書いてあるとおりです。この辺にはあまり独自要素を持ち込まず、先輩の知恵をそのまま拝借しています。自分の動かす環境では２重にロードすることの待ち時間は気にならないので、常に最新版のjQueryを読み込むことにしました。

```javascript:bookmarklet-with-jquery.js
void((function(f){
    var script = document.createElement('script');
    script.src = '//code.jquery.com/jquery-3.2.1.min.js';
    script.onload = function(){
      var $ = jQuery.noConflict(true);
      f($);
    };
    document.body.appendChild(script);
  }
)(
function($, undefined){
  //ここに、$変数（jQuery）を使って自由にコードを書く

  // バージョン確認
  ;;; console.log('jQuery: ', $().jquery);
  
  
}
)
);
```

コードの説明も先輩方が書いているので省略します。バージョン確認のブロックに自分のやりたい事を書くことができます。今後は、このjsファイルの基本の形として、色々組み込んで遊びます。

##コンパイルしてみる
前回確認した方法で、Closure Compilerを通し、コンパイルできること（構文エラーがないこと）と、コンパイル済みコードを作ってみます。

###Closure Compilerの左側
![image.png](https://qiita-image-store.s3.amazonaws.com/0/168315/6ac36d8e-f50f-b54b-9a04-12a43dd2fd07.png)


###コンパイル結果
![image.png](https://qiita-image-store.s3.amazonaws.com/0/168315/f0080ab5-f2a1-3d6f-a460-9ddf0fc1add1.png)

voidで囲むところから開始すると、Closure CopmpilerはWarningを返してきます。このWarningはいつも出るものなので、気にしていません。警告ありのコードでも動きます。

Compiled codeのタブにコードが出力されます。変数名はいい感じに短くしてくれるのでBookmarkletが短くできます。

```javascript
void function(b){var a=document.createElement("script");a.src="//code.jquery.com/jquery-3.2.1.min.js";a.onload=function(){var a=jQuery.noConflict(!0);b(a)};document.body.appendChild(a)}(function(b,a){console.log("jQuery: ",b().jquery)});
```

##動かしてみる
どこでも良いので適当なウェブサイトを開き、F12キーで開発者ツールを開いておきます。
ブラウザのアドレスバーに**javascript:**とコンパイル済みのコードを入れて実行をすると、開発者ツールのコンソールにJqueryのバージョンが表示されます。3.2.1を動的に読み込んだので3.2.1が表示されれば動作確認は完了です。

楽天市場のトップページで動かすとこんな感じです
![image.png](https://qiita-image-store.s3.amazonaws.com/0/168315/5a485d37-e1ea-2117-ec1a-0d4f424b0947.png)


#まとめ
これで、BookmarkletでjQueryを動かす準備が整いました。次回は実際のウェブページを題材にデータをほじくってみます。

#参考にしたページ
参考ページ１　https://qiita.com/otchy/items/5c4f2e1b2a93ac200f1c
参考ページ２　http://blog.mudatobunka.org/entry/2016/02/29/030633
今年もチョコをもらえないのでメイドさんがチョコをぶん投げるゲームを作った

#メイドさんがチョコをぶん投げるゲーム
ハッピーバレンタイン？
今年もチョコをもらえる気がしないので
メイドさんが子どもたちにチョコを~~ぶん投げる~~配るという雑なゲームを作りました。
子どもたちにチョコを当てると~~クソガキなので~~ゴミで反撃してきます。
制限時間内にゴミを避けつつ、食べれきれないくらいたくさんのチョコを配りましょう。
子供達の服装が明らかにハロウィンというのは仕様です。
決して配る相手が浮かばなかったとかハロウィンの使い回しとかいうわけではありません。（大事なことなので２回言いました）
画像はいらすとやさんからお借りしました。

![chocogame.gif](https://qiita-image-store.s3.amazonaws.com/0/55077/6cb17c30-30bf-8c97-7a78-7f8431eaa104.gif)

以下のリンクから遊べます。（Chromeで動作確認）
[メイドさんがチョコをぶん投げるゲーム](https://teradonburi.github.io/chocogame/)

ソースコードは以下のgitHubリポジトリにおいてます。
https://github.com/teradonburi/chocogame
twicli を Rambox で使う

## はじめに

Twitter クライアントの twicli を統合メッセージングアプリ Rambox で使えるようにしてみました。

単に使えるようにするだけでは普通ですので、@ ツイートやダイレクトメッセージを受信したら Rambox のタブにバッジが付くようにしてみました。

### Rambox とは

ウェブベースの 100 近いチャット、メッセージング、メールサービスを一元管理する Electron ベースのクライアントです。

-   [Rambox : Free, Open Source and Cross Platform app for Slack, WhatsApp, Messenger, Skype and much more...](http://rambox.pro/)

### twicli とは

殆どの主要機能が Web ブラウザの JavaScript で動作する Twitter クライアントです。豊富な機能とプラグインやユーザー CSS による高いカスタマイズ性が魅力。

-   [twicli - A Web Browser-Based Lightweight Twitter Client](http://www.geocities.jp/twicli/)

## Rambox に twicli を追加する

Rambox が標準で対応しているサービスに twicli はありませんので、Custom Service として追加します。

1.  一番左の Rambox のタブの一番下にある `_Custom Service` をクリックします。
2.   `Add _Custom Service` のダイアログに以下を入力します。
    -   Name: `twicli`
    -   URL: `http://twicli.neocat.jp/twicli.html`
    -   Logo: `http://twicli.neocat.jp/favicon.ico`
    -   (他の項目はお好みで)
3.  [Add \_Custom Service] ボタンをクリックしします (ダイアログが閉じます)。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/127827/84e7dd56-2359-f565-6b77-66633f62ad63.png)

あとは普通に使えるようになります。

注意点は、初回の twicli 起動時の認証に `Authenticate in browser` は使えないことです。こちらを選択すると手順の途中でデフォルトのブラウザが起動してしまい、うまく認証できませんので、　`Authenticate via server` を選んで下さい (間違えたらタブを右クリックして Reload でやり直しましょう)。

## @ ツイートやダイレクトメッセージを受信したらバッジを付ける

1.  一番左の Rambox のタブの一番下にある `_Custom Service` をクリックします。

2.  右側に表示されている Enabled Service の下の twicli にマウスカーソルを重ね、 :gear: をクリックします。

3.   `Edit twicli` のダイアログの Advanced をクリックし、Custom Code に以下を入力します。

    ```javascript:custom_code.js
    const ramboxOriginalTitle = document.title;
    function ramboxUpdateTitle() {
      document.title = `${
        document.querySelectorAll('#reply.new, #direct.new').length > 0
          ? '(\u2022) '
          : ''
      }${ramboxOriginalTitle}`;
    }
    registerPlugin({
      newMessageElement: ramboxUpdateTitle,
      newDM: ramboxUpdateTitle,
      switchTo: ramboxUpdateTitle
    });
    ```

3.  [Edit twicli] ボタンをクリックしします (ダイアログが閉じます)。

4.  twicli のタブを右クリックし、Reload をクリックします。

@ ツイートを受信するとバッジが付くようになりました。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/127827/53363328-61f9-220d-5913-7be311d469fd.png)

## 簡単な解説

Rambox では `document.title` が `(•) twicli` のように、先頭に丸括弧付きの中黒 (`\u2022`) が付いているとバッジを表示します。

また、 今回は対応していませんが、 `document.title` が `(1) twicli` のように、先頭に丸括弧付きの数字になっていると、数字付きのバッジを表示します。

twicli にはプラグイン用にフックがありますので、 `newMessageElement` (新着ツイートの表示) と `newDM` (新着ダイレクトメッセージの受信) のフックを使って `document.title` を書き換えています。また、バッジを消すために `switchTo` (タブの切り替え) のフックにも同じ関数を登録しています。

## 感想

twicli を Rambox で使う前は Vivaldi のウェブパネルを使っていましたが、ウェブパネルは JavaScript の確認ダイアログ (`confirm()`) が表示されなくて少し不便でした。

Rambox なら確認ダイアログも表示されるし、上記の Custom Code で未読のバッジも付けられるので、なかなか使えそうです。

## 参考

-   [Add a Custom Service · saenzramiro/rambox Wiki](https://github.com/saenzramiro/rambox/wiki/Add-a-Custom-Service)
別スレッドで立ち上げたProcessをメインスレッドでKillする

当たり前かもしれないが、別スレッドで設定して立ち上げたプロセスは、参照を持ってればメインスレッドからKillできる。

```cs
    class Program
    {
        static private string defaultAppPath = "C:\\Path\\To\\App\\InfiniteLoop.exe";

        static void Main(string[] args)
        {
            //5スレッド使う
            List<Task> tasks = new List<Task>(5);
            List<Process> processes = new List<Process>(5);
            for(int i=0; i<5; i++)
            {
                Process newProcess = new Process();
                var task = Task.Factory.StartNew(() => RunLoopApp(newProcess));
                tasks.Add(task);
                processes.Add(newProcess);
            }
            
            System.Threading.Thread.Sleep(20000);

            for (int i=0; i<5; i++)
            {
                processes[i].Kill();
                tasks.RemoveAt(i);
            }
        }

        static private void RunLoopApp(Process process)
        {
            process.StartInfo.FileName = defaultAppPath;
            process.Start();
            return;
        }
    }
```

これはなんらかの理由で、別スレッドで動くプロセスをメイン側でkillしたいときに使えそう。

2018/2/14 追記
上のprocessesリストはスレッドセーフではないので、System.Collections.Concurrentのコレクションを使って対応したほうが良いかも。
[C言語] 存在しないディレクトリをfopen()する

## はじめに
存在しないディレクトリのファイルを`fopen()`するときエラーになって詰まってしまった。
先にディレクトリを作成してからfopen()することで解決した。

## ソースコード

```c
#include <stdio.h>
#include <stdlib.h>
#include <sys/stat.h>

...

FILE* fp;
char out_dir[256] = "";
char out_path[256] = argv[1];
char tmp[256];
char *tok;

// ディレクトリ名の取得
// fopen()では新規ディレクトリは作成されない(エラー)
strcpy(tmp, "/");
tok = strtok(tmp, "/");
while (tok) {
    char *c = tok;
    tok = strtok(NULL, "/");
    if (tok) {
        if (strlen(out_dir)) {
            sprintf(out_dir, "%s/%s", out_dir, c);
        } else {
            strcpy(out_dir, c);
        }
    } else {
        break;
    }
    // mkdir()は1階層までしか作成できない
    mkdir(out_dir, 0777); // 作成成功の場合は0が返る
}

if ((fp = fopen(out_path, "w")) == NULL) {
    fprintf(stderr, "file can not open %s\n", out_path);
    exit(EXIT_FAILURE);
}

fclose(fp);

...
```

## 最後に
pythonとかgoとかディレクトリがちゃんと扱える言語は偉大
(WIP) 必要に迫られてはじめる Node.js

## はじめに

Node はブラウザ内で実行できるもので，スタンドアロンプロセスとして動作する．
素の JavaScript だと機能が乏しいが，Node を使えば Python や Java と同等のことができるようになる．
例えば，ファイルシステムを操作したり，Web サーバーを作ったりすることができる．

JavaScript と Node は，同一のエンジン (V8 エンジン) 上で動く．
V8 エンジンは JavaScript のコードを機械語にコンパイルするため，Node の動作は早い．

効率的，かつ軽量に動作させるために，Node はイベント駆動モデル，ノンブロッキング I/O モデルを採用している．


## インストール
### バージョンについて

投稿時点で最新のバージョンは 9.5.0．
8.9.4 LTS を利用してもいいが，今回は 9.5.0 ではじめることとする．
[公式](https://github.com/nodejs/Release) が発表しているリリースサイクルは次のとおり．

![image.png](https://qiita-image-store.s3.amazonaws.com/0/95900/cb6113d1-a8c0-f4b2-eecc-23473a253c8a.png)


## バージョン管理

`nvm` がデファクトな模様．

```shell
brew install nvm
mkdir ~/.nvm
echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.zshrc
echo '. "/usr/local/opt/nvm/nvm.sh"' >> ~/.zshrc
```

最新版の Node をインストール．

```shell
nvm install node
# あるいは nvm install <version>
```

インストールした Node.js を利用する．

```shell
nvm use node
# あるいは nvm use <version>
```

確認．

```shell-session
$ node -v
v9.5.0
```

## 開発
### Hello world!

ターミナルから．

```shell-session
$ node   
> console.log('Hello world!');
Hello world!
undefined
```

Google Chrome の「Developer Tools」→「Console タブ」でも同じことができる．


### ブラウザ JS と Node

ブラウザ上で JavaScript を使った開発を行う場合，`window` というグローバルオブジェクトを利用することが多い．
同様の概念が Node にも存在し，これは `global` という名前で参照できる．

```shell-session
> global
{ console: [Getter],
  DTRACE_NET_SERVER_CONNECTION: [Function],
  DTRACE_NET_STREAM_END: [Function],
  DTRACE_HTTP_SERVER_REQUEST: [Function],
  DTRACE_HTTP_SERVER_RESPONSE: [Function],
  DTRACE_HTTP_CLIENT_REQUEST: [Function],
  DTRACE_HTTP_CLIENT_RESPONSE: [Function],
  global: [Circular],
  process: 
   process {
     title: 'node',
     version: 'v9.5.0',
     versions: 
      { http_parser: '2.7.0',
        node: '9.5.0',
        v8: '6.2.414.46-node.18',
...
```

ブラウザ上で JavaScript を使った開発を行う場合，HTML 文書には `document` という名前で参照できる．
これについても同様に，Node には `process` という名前で参照できるグローバルオブジェクトが存在する．

```shell-session
> process
process {
  title: 'node',
  version: 'v9.5.0',
  versions: 
   { http_parser: '2.7.0',
     node: '9.5.0',
     v8: '6.2.414.46-node.18',
...
```

`process.exit()`，あるいは <kbd><kbd>^</kbd><kbd>C</kbd><kbd>^</kbd><kbd>C</kbd></kbd> でコンソールを抜け出すことができる．
Arudino UNO x 3gim x Soracom 3G通信入門

# Arudino UNO x 3gim x Soracom 3G通信入門【起動編】
## 準備するもの
- Arduino UNO
- Soracom Air SIM
- 3gim v2.2 + 3gアンテナ + GPSアンテナ
- MacBook

## 機器接続設定
必要な接続設定は以下の通り。
[MacBook]====(USB)====>[Arduino]===(ジャンパワイヤ)===>[3gim]
### MacBook
- Arduino IDEのインストール

### 3gim
- Soracom Airの設定<br>
設定に関しては、https://dev.soracom.io/jp/start/begin_soracom/<br>
- Arduino UNOとの接続<br>
1pin(PWR_ON) <====> D7 (任意ですが、サンプルプログラムではD7を使用しているのでそのまま利用しましょう。)<br>
2pin(RX) <====> D5<br>
3pin(TX) <====> D4<br>
4pin(IOREF) <====> IOREF<br>
5pin(VCC3.3V) <====> 3.3V（※5Vに接続しないように注意。最悪の場合、壊れる可能性があります。）<br>
6pin(GND) <====> GND

## Arduino IDE のダウンロード
公式サイトよりダウンロード
https://www.arduino.cc/en/main/software

## Arduino IDE のインストール
ダウンロードしたファイルを解答し、"Arduino.app"をアプリケーションフォルダに移動

## 3gim用ライブラリのダウンロード
タブレインの公式HPよりgithubへ。repogitoryをダウンロードする。
https://github.com/openwireless/3gim

## 3gim用ライブラリのインポート
ダウンロードしたrepogitoryを解凍する。
解凍したフォルダ内のArduino UNO用のライブラリである"a3gim"を"C:Users/XX/Documents/Arduino"以下にコピーする。

## Arduino IDEのポート設定
インストールしたArduino IDEを開く。
[Tools]>[Board]>["Arduino/Genuino UNO"]を選択。
[Tools]>[Port]>["/dev/*****(Arduino/Genuino UNO)"]を選択。（*****は接続先で任意）

## 3gim サンプルプログラムの実行
Lチカできるサンプルプログラムを開く。
[File]>[Examples]>[a3gim]>[blink_led]
Editor上の右矢印ボタン(upload)でArduinoに書き込み。
しばらくすると、3gimのled2がLチカしだす。
アジャイルライクな振り返りで恋愛を改善

# はじめに
はじめまして。かずさです。
本アカウントは彼女のウェイウェイと共有しているので、記事によって筆者が違う事があります。
第一回の今回は♂の方が書いていきます。

# 登場人物
**♂：かずさ**
大手Web系企業のプロダクトマネージャー。
過去にスクラムマスターの経験あり。
アジャイル開発の経験は3年ほど。

**♀：ウェイウェイ**
大手SIer保守開発チームのプロジェクトリーダー。
アジャイル未経験。

# 経緯
2018年の年始に付き合い始めたわけですが、付き合ってちょうど4週間のタイミングでウェイウェイの不満が爆発しました。
話し合いにて解決したいところですが、話をどう展開すればいいか分からない。
考えているうちに、

- その日は付き合ってちょうど4週目の最終日（4週間Sprintの最終日）
- ウェイウェイは数日前にスクラム研修を受けてきたところ

という事に気づき、アジャイルライクな振り返りで課題を可視化して解決しよう、というアイデアが生まれました。
殴られる覚悟で提案したところ、意外にノリノリで、会社用バッグから2色の付箋を出してきました（なんで持ってるの）。

# 振り返りルール
1. 付箋を使ってKPTA形式で振り返る（KPTAが分からない方はググってね）
2. 互いに話し合わず、自由にKeep（良かったこと）とProblem（良くなかったこと、改善したいこと）を付箋に記述する
3. Try, Actionは話し合ってから決める
4. 付箋を書き終わったら、お互いに内容を説明しながらテーブルに出していく
5. 似たような付箋をまとめ、まとまり毎に話し合っていく

会社で僕がファシリテートする振り返りとほぼ一緒なルールで行いました。
僕がファシリテートする振り返りでは、最初から答え（Try, Action）まで用意してきてもらいません。
Try, Actionはチームメンバーで話し合ってから決めるべきで、最初から答えを持っていると発想が狭まってしまうからです。
ちなみに具体的なActionまで落とし込むのが重要です。
ふわっとしたTryを決めただけで振り返りを完了し、結局何をするのか共通認識がなく改善できなかった経験はどなたにもあるはず。
会社での振り返りと違う点としては2点。
ひとつはベロシティやバーンダウンチャートなどの数値を追っていないこと（何を追えばいいんだろう）。
もうひとつは、会社の振り返りでは限られた時間でROIの高いTry, Actionを見つけ出すため、チーム全体の振り返りにフォーカスし、個人的な振り返りは議題に挙げていませんでしたが、今回は時間もあるし1対1なので個人的な振り返りもOKとしました。

# 結果
![0-02-08-05c07955a46d239ef40d09f6f7b19c53af8b1f8c2c2ca053db81b7b53d11ca08_full.jpg](https://qiita-image-store.s3.amazonaws.com/0/237975/5afe0b7f-b3a6-8a2a-eaa3-560335620cd8.jpeg)
ウェイウェイ宅のクローゼットです。これからずっとこの状態をキープしてくれるらしい。
遊びに来た友達はどう思うんだろう。
記載内容は一応モザイクかけてます。
左列の黄付箋はProblem、その隣の青付箋はAction、右列の青付箋はKeepです。
Tryをすっ飛ばしてActionまで行ってしまいました。
いくつか振り返りによって決まった内容を紹介します。

# Act1: 土日は片方は会って、もう片方はそれぞれ自由に使う
僕はどうにも1人で過ごす時間が週に1日は必要なのですが、Sprint1期間中はほぼ毎週土日とも一緒に過ごしていました。
ウェイウェイのキャラクターのおかげもあって、思ったより大きな負担ではありませんでしたが、やっぱり自分のライフスタイルに合っていない付き合い方を続けると知らず知らずのうちにストレスが溜まって悪影響が出てきそうなのでProblemに挙げ、理解してもらえました。

# Act2: ウェイウェイと外出する時はウェイウェイ認定の服を着る
ウェイウェイは派手なファッションが苦手で、付き合い始める前から僕の派手めファッションには抵抗があると言っていました。
ただ、僕もそう簡単にファッションの嗜好を変えれるわけがなく、互いの妥協ポイントを探ることにしました。
どういう時に嫌な気持ちになるのか聞いてみたところ、「外出した際に周りの目が気になる」、ということでした。
一緒に外出する時だけ地味めファッションにするのであれば、自分のファッション嗜好を変える必要もなく、リーズナブルなActionだと感じ、採用することにしました。

# 気づき
恋愛にアジャイルライクな振り返りを導入したことで得た気づきを書いていきます。

- 付箋を介することで、口では言いにくいことを伝えられる
- 十分に時間をかけて個別に付箋を書くことで、伝えたい内容を整理できる（口頭だと感情的になりがち）
- 定期的に互いの思っていることを文章化することで、互いの理解度が深まる
- ウェイウェイ宅にホワイトボード置きたい

彼氏・彼女とうまくいってない方、振り返りで恋愛も改善してみませんか。
ただ、**アジャイル開発に理解のある相手じゃないと更に関係を悪化させる可能性もある**ので、注意してください。
また、こんなプラクティスも恋愛に導入できるんじゃない？というアドバイスがありましたらぜひ教えてください。

ではまた。
【CSS3】忘れっぽい人のためのCSSアニメーション

##自己紹介
最近うっかりが多いくらげです。
~~この前とうとう仕事用のカバンを忘れて家を出てしまい、慌てて取りに帰りました。~~
今回は、個人的に最近よく使うCSSアニメーションの使い方についてメモしておきます。

##cssアニメーションとは
今までJSで作成していたアニメーションが、CSS３で気軽に作れるようになったよ！というものです。
ある程度の大きさのものなら、JSよりも軽く動作します（信用のしすぎには注意）。
**アニメーションの動きを設定するキーフレーム**と**アニメーションの時間やタイミングを設定するアニメーションプロパティ**の２つのパーツを組み合わせて使います。

##使えるOS
- Chrome…使用可能。
- Firefox…使用可能。
- IE…10以上で対応。@media内で指定すると動かない等バグあり。
- Opera…全てで使えない。
- Safari… 9以前のOSではベンダープレフィクス(`webkit`)が必要。

##使い方
### キーフレーム部分
```css
@keyframes ghost {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
```
キーフレームは`@規則`を使用して設定します。
`@規則`とはセレクタとプロパティでは指定できない機能を補う便利な規則です。文字コードを設定する`＠charset`とかで使いますよね、あれです、あれの仲間です。
キーフレームではアニメーション中のあるタイミングで、そうなっていて欲しいプロパティを設定します。
@keyframeの後には、アニメーションの名前をつけてあげましょう。
キーフレームの設定には、`%`もしくは、始めと終わりのみ設定する場合は`from`と`to`でも構いません。
`0%`と`100%`もしくは　`from`と`to`を必ず設定してあげましょう。じゃないと拗ねて動かなくなります。

### アニメーションプロパティ
```css

div {
  animation-name: ghost;
  animation-duration: 3s;
}
```
名前をつけて設定したキーフレームは、アニメを設定したいセレクタにanimationプロパティとして指定してあげます。
細かい設定はanimationのサブプロパティで個別に設定してあげることもできます。

| プロパティ名   |設定できるもの |
|:-----------------|:------------------|
|**animation-name**|使用するキーフレームの名前|
|**animation-duration**|一回のアニメーションの長さ|
|**animation-timing-function**|進め方。イージングの指定|
|animation-delay|アニメーションが始まるまでの遅延時間|
|animation-iteration-count|アニメーションを繰り返す回数|
|animation-direction|アニメーションを逆方向に繰り返すか、始めの状態にリセットして繰り返すか|
|animation-fill-mode|アニメーション後前に指定したスタイルを適用させるかどうか|
|animation-play-state|アニメーションの一時停止と再開|



##ね、簡単でしょ
JSを使わなくてもいいって、それだけで気持ちが楽だったりします。
慣れれば複雑な動きも作れるようになるので、いろいろさわってみてください。
打点カウンタをMZプラットフォームにシリアル通信で接続してみた

#概要
地元企業の[精密プレス工業株式会社](http://www.hukugou.com/category/1347009.html)様からお願いされている[打点カウンタ](http://www.hukugou.com)をMZプラットフォームに接続してみました．

##打点カウンタとノートPCを接続した樣子（図１）
![IMG_6331.JPG](https://qiita-image-store.s3.amazonaws.com/0/237044/6c3b18a3-4ce2-3220-f00d-aafc8fcc657c.jpeg)

- USBシリアルケーブルでノートPCに接続しています．

##打点カウンタの外観（図２）
![IMG_6332.JPG](https://qiita-image-store.s3.amazonaws.com/0/237044/def0b371-e710-d8ec-b542-a170cd21553c.jpeg)

- 一番大きい四角い装置が本体です．
- ７セグメントLEDで上から，出来上がり製品数，打点数，設定だ点数が表示されます．
- 小さい四角い装置が中継装置です．本体と工作機械に合わせたセンサを接続するための回路BOXになっています．
- 中継装置から伸びているケーブルの先にセンサ（リミットスイッチ）がついています．

##センサ部のアップ（図３）
![IMG_6334.JPG](https://qiita-image-store.s3.amazonaws.com/0/237044/80ac0004-e7a9-ccdc-07b1-9105e9c935fd.jpeg)

- リミットスイッチ以外に磁気センサなど，環境に合わせてセンサを変えることができます．

#ノートPC側のセットアップ
USB-シリアル変換ケーブルのドライバをWindowsにインストールする必要があります．

#MZプラットフォームで行ったこと
今回は，MZプラットフォームに同胞されているサンプルプログラムで動作確認だけをしました．
##手順
1. 打点カウンタとノートPCをUSBシリアル変換ケーブルで接続しました（図１）．
2. MZプラットフォームのサンプルプログラム（シリアル通信ターミナル.mzax）をオープンします（キャプチャ１）．
3. 実行ボタンを押しました．
4. COMポートを選択して，オープンボタンを押すと接続されました（キャプチャ２）．
5. 打点カウンタのセンサ部（リミットスイッチを押す：図３）を動作させました．
6. 通信モニター画面に打点カウンタからの打点数が表示されました（キャプチャ３）．
7. クローズボタンを押すと接続が切断されました（キャプチャ４）．

##キャプチャ画面

- 起動時の画面（キャプチャ１）
![start.PNG](https://qiita-image-store.s3.amazonaws.com/0/237044/ea6fec64-0057-6b1e-79bc-da2a2411569e.png)

- 接続されました（キャプチャ２）
![conncted.PNG](https://qiita-image-store.s3.amazonaws.com/0/237044/4dffd1f0-99d2-1421-57fd-dd3f0ca83460.png)

- センサに反応して通信データがMZプラットフォームで受信できました（キャプチャ3）
![senddata.PNG](https://qiita-image-store.s3.amazonaws.com/0/237044/998f9c1e-b657-7bcc-4194-e1326f0bdba9.png)

- クローズボタンで接続を切断できました（キャプチャ４）．
![closed.PNG](https://qiita-image-store.s3.amazonaws.com/0/237044/e2e4c9d1-6492-c7a4-5f1d-8ef94716da66.png)

##プログラムの画面出力
MZプログラムはBMPファイルで出力されます．BMPではサイズが大きのでJPGに変換して，掲載しています．
![program.jpg](https://qiita-image-store.s3.amazonaws.com/0/237044/1daeb899-850c-f6a3-aad4-c2b0306f5ee5.jpeg)

#MZプラットフォームのページに戻る

- [中小企業IT・IoT化支援のMZプラットフォームを使ってみる](https://qiita.com/tmdoi/items/b316df77f9fcf8cbcf42)

#履歴
- 2018.02.13 投稿
Amazon Linuxを立ち上げる時にいつも流すスクリプト

2017年2月くらいに初めてAWSでEC2を触った時に調べました。いつも忘れて調べなおすのでメモ的に。

## スクリプト
```shell:setup.sh
# 実行ユーザーはec2-userを想定してます。

# yumを最新に
sudo yum -y update

# aliasを解除して
sudo unalias cp

# timezone設定
sudo cp -f -p /usr/share/zoneinfo/Japan /etc/localtime
sudo cp /dev/null /etc/sysconfig/clock
echo -e 'ZONE=\"Asia/Tokyo\"\nUTC=false' | sudo tee -a /etc/sysconfig/clock
sudo chmod 644 /etc/sysconfig/clock
sudo /etc/init.d/crond restart

## 日本語設定
sudo cp /dev/null /etc/sysconfig/i18n
echo 'LANG=ja_JP.UTF-8' | sudo tee -a /etc/sysconfig/i18n
```
はじめてのラズパイ

#はじめに
アラFif開発者です。初投稿です。
ラズペリーパイ、IOTといった技術の進歩になかなかついていけなかったのですが、一念発起しチャレンジすることにしました。
私は、ソフトのみの知識しかなく、はんだ付けは不慣れで、こよなくVisual C++ 6.0を愛するという化石開発者ですので、基本は完成品を組み合わせる形で開発します。
自分の作業メモ＋なんらかのモチベーション維持の目的で記事にしています。間違いなどありましたら、ごめんなさい。


#購入したもの

Physical Computing Labさんの
Raspberry Pi3 コンプリートスターターキット (Standard 16G)と
![phisical.png](https://qiita-image-store.s3.amazonaws.com/0/75643/50f785e7-6947-21e3-5ef3-19c6b7b723fb.png)

Bit trade oneさんの　ラズパイ入門ボード
![bto.png](https://qiita-image-store.s3.amazonaws.com/0/75643/495a8798-94b4-b764-e6a9-30d45e9bad2e.png)

です。
ImpressWatchの記事を見ていたら入門者向けキットが販売開始された。完成モジュールもあるということで、迷いなく完成モジュールを注文。初心者には厳しい作業も省けるスターターキットも併せて注文することにしました。

#届きました～
![download.jpg](https://qiita-image-store.s3.amazonaws.com/0/75643/da29a450-2ffc-5991-f7b7-97f36a619842.jpeg)
シェルスクリプトマガジンも一緒に発注！

とりあえずラズパイが起動できることを確認

![image.png](https://qiita-image-store.s3.amazonaws.com/0/75643/5cd79fde-411f-587f-55fa-3972194e1bde.png)

#一通りサンプルコードを実行
https://shell-mag.com/raspi_original_code/

上記、URLのサンプルコードだけ見ていると、行きずまるポイントがあった。

```
BUZZER=18
```
 
が抜けてる。

```
$sudo apt-get install pigpio python-pigpio python3-pigpio
$sudo pigpiod
```

をやらないとスピーカーから音が出ない。

#基板のスペーサー
![image.png](https://qiita-image-store.s3.amazonaws.com/0/75643/7d2d8989-2b9d-e6ef-fbd5-eb9816e83034.png)
「ラズパイ入門ボード」に付属の部品があって、何に使うのかなー、と思っていたら、ラズパイ本体と重ねるときのスペーサーだった。
それまでは、スペーサーをつけずにスイッチを押してた。40本のPINに負担かけてた。反省。

#カラーLED制御がうまくいかない
カラーLEDの制御ということで、スイッチを押すごとに色が変わるサンプルがあったが、色が変わらず。なんだろうなー
「シェルスクリプトマガジン」には周波数とか再描画のウェイト時間とかいろいろ制限があると書いてあった。
＞後ほどの調査 gaugette を使って制御するとうまくいく。今後の記事で題材にでもするのかな？

ここまでで、本の内容はおしまい。次の発売日は3/25だって。なにをしていればいいの～

#表示用のOLEDがあるので、調べてみることにした
入門ボード付属の液晶は SSD1306 というもので、極めて標準的なデバイスらしい。
http://www.neko.ne.jp/~freewing/raspberry_pi/raspberry_pi_3_oled_0_96inch_spi_ssd1306/
ここの情報をもとに、ライブラリをインストールしたらOLEDが使えるようになった。

まずは、SPIを有効に

https://github.com/the-raspberry-pi-guy/OLED
からソースをダウンロード
そのまま実行してもライブラリがないといわれるので、

```
sudo ./OLEDinstall.sh
```
を実行
※この辺なにがあったのか不明。py-spidev と py-gautetteというソースが自動的にダウンロードされてインストールされていた。

SSD1306のRESピンとDCピンがどこにつながっているのか、基板をじろじろ見ていくと18番ピンと16番ピンにつながっている様子。

```
       PIN   GPIO   WiringPi
RES　　　18　　　24　　　5
DC 　　　16　　　23　　　4
```

ソースではWiringPiの番号となっているようで、

```
RESET_PIN=5
DC_PIN=4
```
と変更

.pyファイルを右クリックして、一番上にある「Thonny Python IDE」で実行してみるが、なにかエラーになって、実行できない。
　　Import Error: No module named <gaugette>
みたいなメッセージがでてだめ。
だけど、ターミナルから　sudo python OLEDtext.pyを

とするすることで、サンプルコードの実行に成功した！わーい。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/75643/25068cd3-f292-d3ed-33df-691a5831308e.png)
[Spring] JSPの実装 (簡易まとめ)



# ディレクティブ
ディレクティブは、JSPをどのように処理するかをサーブレットコンテナに対して指示するための要素です。
jspファイルの先頭に記述します。
- pageディレクティブ
- taglibディレクティブ
- includeディレクティブ

### pageディレクティブ
pageディレクティブは、JSPの振る舞いを指定するためのディレクティブ。

```jsp
<%@ page pageEncoding="UTF-8" %>
```

### taglibディレクティブ
taglibディレクティブは、カスタムタグライブラリを使用できるようにするためのディレクティブです。

```jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
```
*上記のカスタムタグを使用するにはJSTL依存のライブラリをプロジェクトに追加

### includeディレクティブ
includeディレクティブは、別のファイルに記載されているコードを取り込むためのディレクティブです。
```jsp
<%@ include file="/WEB-INF/header.jsp" %>
```

## JSTLの利用
JSTLはjsp用のカスタムタグを提供しています。

JSTLの分類

|   プレフィックス   |                   URL                  |         説明       |
|:-----------------|:--------------------------------------|:------------------|
| c                 | http://java.sun.com/jsp/jstl/core      | コアな処理(値の処理、分岐、繰り返しなどの処理)を行うためのカスタムタグを格納 |
| fmt               | http://java.sun.com/jsp/jstl/fmt       | メッセージの表示や値のフォーマットなどを行うカスタムタグを格納 |
| sql               | http://java.sun.com/jsp/jstl/sql       | データーベースアクセスを行うカスタムタグを格納 |
| x                 | http://java.sun.com/jsp/jstl/xml       | XML操作を行うカスタムタグを格納 |
| fn                | http://java.sun.com/jsp/jstl/functions | 便利なEL関数を格納 |

## Springのタグライブラリ
#### Spring MVCが提供するHTMLフォーム出力用のカスタムタグ一覧

|   要素名   |                   説明                  |
|:-----------------|:--------------------------------------|
| <form:form>         | フォームオブジェクトに対応するHTMLのフォームを出力 |
| <form:input>        | テキストフィールドを出力 |
| <form:password>     | パスワードフィールドを出力 |
| <form:textarea>     | テキストエリアを出力 |
| <form:checkboxes>   | 複数のチェックボックスを出力 |
| <form:checkbox>     | チェックボックスを出力 |
| <form:radiobuttons> | 複数のラジオボタンを出力 |
| <form:radiobutton>  | ラジオボタンを出力 |
| <form:select>       | セレクトボックスを出力 |
| <form:options>      | 複数のセレクトボックスの選択肢を出力 |
| <form:option>       | セレクトボックスの選択肢を出力 |
| <form:hidden>       | 隠しフィールドを出力 |
| <form:label>        | ラベルを出力 |
| <form:button>       | ボタンを出力 |
| <form:errors>       | バインディングエラーおよび入力チェックエラーを出力 |

#### <form:form>要素の主な属性

|     属性名     |                   説明                  |
|:--------------|:--------------------------------------|
| modelAttribute | HTMLフォームにバインドするフォームオブジェクトの属性名を指定する。省略した場合のデフォルト値は"command" |
| action         | HTMLフォームの送信先を指定する。省略した場合のデフォルト値はページ表示時のURI |
| method         | HTMLフォームを送信する際に使用するHTTPメソッド(post or get)を指定する。省略した場合のデフォルト値は"post"となる |

jsp

```jsp
<form:form modelAttribute="loginForm">
    <form:input path="username"/><br>
    <form:button>Login</form:button><br>
</form:form>
```
HTML

```html
<form id="loginForm" action="/login" method="post">
    <input id="username" name="username" type="text" value=""/><br>
    <button type="submit" value="Submit">Login</button>
</form>
```

#### フォーム項目の共通的な属性

|     属性名     |                   説明                  |
|:--------------|:--------------------------------------|
| path     | フォーム項目にバインドするフォームオブジェクトのプロパティを指定する |
| disabled | フォーム項目を無効にするか指定する。デフォルト値はfalse(無効にしない) |
| readonly | フォーム項目を読み取り専用にするか指定する。デフォルト値はfalse(読み取り専用ではない) |

jsp

```jsp
<form:input path="username">
```
HTML

```html
<input id="username" name="username" type="text" value="" />
```
CordovaでHTMLファイルにネット上のリソースを参照するように書いた場合どういう挙動をするのか？

# 使用したもの(環境)
 1. cordova
 1. visualStudioCode
 1. windows10
 1. Android
 

---

# cordovaでネット上のリソースを参照するように書いた場合どういう挙動をするのか？

例えば、htmlの記載を下記の通りとします。

```html  
<script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
```
jQueryをURL指定で読み込んでいます。
当然、PCから該当するhtmlを開けば、(もちろんインターネットに繋がっていればですが)jQueryが読み込まれます。
わかりやすくするために下記も加えました。

```html  
<script src="js/test.js"></script>
```

```js  
$('body').append($(document.createElement('div')).text('test'));
```

ブラウザで開くと下記のように表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/196422/daf7e19e-ab0e-1c06-5cc2-4f5192386fc2.png)

Androidにてビルド後のモジュールを実行すると下記のように表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/196422/f2dd28a9-2e5d-22dc-91e7-baf918869337.png)

AndroidのWifiとモバイルネットワークを切断して実行すると下記のように表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/196422/bef8b3b5-42c5-8daa-a225-ad6ce08c49fc.png)

どうやら、ビルドする際に指定したリソースすべてをパッケージングしているようです。
よく考えれば当たり前のような気もしますが、完全にオフラインでも動作可能ということですね。
(あまりこの書き方はおすすめしませんが…)
役に立たない Lチカ（もどき）w

Pythonの勉強を始めました。
何か出力して楽しめるものがないか探していたところ、ラズパイでLチカ関連の記事が目に付いたので色々と調べてみました。
ラズパイ。
本体と色々なモジュール込み込みでおよそ1万円くらいかかりそうです。

。。。と、その前にJavaScriptで、ブラウザ版のLチカ（LEDがチカチカするわけではないけど。。。）を作ってみようと決心しました。

###仕様
ボカシ処理した円をブラウザの表示領域に並べる。
ランダムなRGB値を取得し全ての円に着色する。
ランダムなRGB値でチカチカさせる。
一応レスポンシブにも対応。
以上

ソースコードは以下。


```html:Lチカもどき.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>Lチカ もどき</title>
    <style>
        /*リセットCSS*/
        * {
            margin: 0;
            padding: 0;
        }

    </style>
</head>

<body>
    <!--親要素-->
    <div id="obj__container" style="display: flex; flex-wrap:　wrap;justify-content: space-around; align-content: space-around; background-color: #000; overflow: hidden;"></div>

    <script>
        var docWidth = document.documentElement.clientWidth; //ドキュメントの横の表示領域
        var docHeight = document.documentElement.clientHeight; //ドキュメントの縦の表示領域
        var horiLength = 10; //横の個数
        var objSize = docWidth / horiLength; //オブジェクトのサイズ
        console.log(horiLength * Math.floor(docHeight / objSize)); //オブジェクトの総数
        console.log(docWidth + "X" + docHeight); //表示領域
        console.log(objSize); //サイズ表示

        var objContainer = document.getElementById('obj__container');

        for (var i = 1, objLen = horiLength * Math.floor(docHeight / objSize); i <= objLen; i++) {

            var myDiv = document.createElement('div'); //divの子要素を作成

            objContainer.appendChild(myDiv);

            myDiv.setAttribute('id', 'obj__contents' + zeroPad(i)); //個数分、連番付与の要素を作成

            myDiv.setAttribute('style', 'width:' + objSize + 'px; height:' + objSize + 'px; left: ' + objSize * i + 'px; border-radius:50%; filter: blur(' + objSize / 8 + 'px);'); //諸設定

            putColor(myDiv); //チカチカ関数実行

        }

        //▼ランダムなカラー値を与える関数
        function putColor(ele) {
            setInterval(function() { //setInterval
                var rColor = getRandomColorNum(255, 0), //R値
                    gColor = getRandomColorNum(255, 0), //G値
                    bColor = getRandomColorNum(255, 0); //B値
                ele.style.backgroundColor = 'rgb(' + rColor + ',' + gColor + ',' + bColor + ')';
            }, 500);
            return ele;
        }

        //▼ランダムな数値を取得する関数
        function getRandomColorNum(maxColorNum, minColorNum) {
            var colorNum = parseInt(Math.random() * (maxColorNum + 1 - minColorNum) + minColorNum);
            return colorNum;
        }

        //▼ゼロパッディング関数
        function zeroPad(zeroNum) {
            var zeroNum = ('00' + zeroNum).slice(-2);
            return zeroNum
        }

    </script>
</body>
</html>
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/122812/39a60aea-59d1-7c6d-51aa-438034fa4704.png)
▲ランダムなRGB値でチカチカします。

###課題
ボタンなどを設置しチカチカの速度を速くしたり、円の大きさを変えたりしても楽しいかも知れません。。。
ベンダープレフィックスは付与していないのでIEではボカシ効果が得られません。
動作確認は適当です。
MyGeneを使ったクイックID変換

## Mygeneを使った遺伝子情報の取得

遺伝子名やデータベースのアクセッションナンバーなどから遺伝子情報を引き出す時のパッケージとして、以前はRのBiomaRtを利用していましたが、リンク切れが多発していることや、データベースへの問い合わせに時間がかかったり、わざわざsqlliteドライバーを作るなど一手間かけないといけないことや、関数が多すぎて使いづらいという気持ちでいました。そこで久々に色々なannotation packageを調べていたのですが、**mygene**というpythonとRで実装されているサービスを発見したので、pythonでの使い方を簡単に紹介したいと思います。
mygeneが何者かというのは、[ウェブサイト](http://mygene.info/)を拝見していただければと思うのですが、約３０種類ほどのIDをクイック変換できるサービスで、他のannotation toolに比べて更新も頻繁で、シンプルで使いやすいと思います。

## 環境

- OSX High Sierra 10.13.3
- Python 3.6.0 |Anaconda 4.3.1 (x86_64)| (default, Dec 23 2016, 13:19:00) 
- [GCC 4.2.1 Compatible Apple LLVM 6.0 (clang-600.0.57)]


## mygeneのインストール

> pip install -e git+https://github.com/sulab/mygene.py#egg=mygene  




テストクエリー用の遺伝子シンボルの取得
---

今回はQueryとして、遺伝子シンボルを使いたいと思います。本来出発点としては、名前が変更されうる遺伝子シンボルよりもEntrezIDなどの方が良いですが、NAが現れるという意味ではいい例題です。もちろん、他のIDも利用できます。適当な遺伝子シンボルセットを取得するためにGSEAのDBであるMsigDBからsymbol listを得ました。メールアドレスを登録すれば、取得することができます。

> http://software.broadinstitute.org/gsea/msigdb/geneset_page.jsp?geneSetName=GO_NOTCH_SIGNALING_PATHWAY

取得したテキストファイルをパースします。 mygeneに入力するために改行された文字列をlist構造にしています。csv.readerを使い、改行を区切り文字として読み込み、for文を使って中身を１つのリストに結合させています。その際に2行のheader情報がじゃまなので、itertoolsのislice関数を使って2行目まで読み飛ばしています。

```{python}
import csv
from itertools import islice

msig_file = "geneset.txt"
sl = list()

with open(msig_file, 'r') as fl:
    reader = csv.reader(fl,delimiter='\n')
    for row in islice(reader, 2, None):
        sl.extend(row)
print(sl)
```  
slオブジェクトの中身 
> ['ADAM10', 'ADAM17', 'AGXT', 'ANGPT4', 'ANXA4', 'APH1A', 'APH1B', 'APP', 'ASCL1', 'ATOH1', 'BMP2', 'C12orf52', 'CDH6', 'CDK6', 'CDKN1B', 'CEBPA', 'CHAC1', 'CNTN1', 'CNTN6', 'CREBBP', 'DLL1', 'DLL3', 'DLL4', 'DNER', 'DTX1', 'DTX2', 'DTX3', 'DTX4', 'EP300', 'EPN1', 'ETV2', 'FCER2', 'FOXA1', 'FOXC1', 'FOXC2', 'GALNT11', 'GMDS', 'GOT1', 'HES1', 'HES5', 'HES7', 'HEY1', 'HEY2', 'HEYL', 'HHEX', 'HNF1B', 'HOXD3', 'IFT172', 'IFT74', 'IL2RA', 'ITCH', 'ITGB1BP1', 'JAG1', 'JAG2', 'KAT2B', 'KCNA5', 'KRT19', 'MAML1', 'MAML2', 'MAML3', 'MDK', 'MESP1', 'MESP2', 'MIB1', 'MIB2', 'MYC', 'NCSTN', 'NEURL', 'NEURL1B', 'NEUROD4', 'NKAP', 'NLE1', 'NOTCH1', 'NOTCH2', 'NOTCH2NL', 'NOTCH3', 'NOTCH4', 'NR0B2', 'NR1H4', 'NRARP', 'ONECUT1', 'PERP', 'PGAM2', 'PLN', 'POFUT1', 'PSEN1', 'PSEN2', 'PSENEN', 'PTP4A3', 'RBM15', 'RBPJ', 'RIPPLY1', 'RIPPLY2', 'RPS19', 'RPS27A', 'S1PR3', 'SEL1L', 'SNAI1', 'SNAI2', 'SNW1', 'SOX9', 'SPEN', 'SUSD5', 'TBX2', 'TGFB1', 'TGFBR2', 'TIMP4', 'TMEM100', 'TP63', 'UBA52', 'UBB', 'UBC', 'WDR12', 'ZNF423']
		
クエリーの準備ができましたので、mygeneを使ってみたいと思います。mgというインスタンスを作り、queryを沢山読み込むのでquerymanyメソッドを使います。speciesを指定しなければ、１つの遺伝子につき複数のオーソログの情報が出力され、too much informationになるので指定しておきます。

```
import mygene #mygene
mg = mygene.MyGeneInfo()
res = mg.querymany(sl, 'name,symbol',as_dataframe=True,species='human')  

```
結果のテーブル  

[![https://gyazo.com/8e37ea404f467342ad521410c134bc7f](https://i.gyazo.com/8e37ea404f467342ad521410c134bc7f.png)](https://gyazo.com/8e37ea404f467342ad521410c134bc7f)

この様に遺伝子情報のテーブルを簡単に作ることができます。しかも速いです！　　
他の使い方については、本家のウェブサイトよりも[Pythonのドキュメントページ](https://pypi.python.org/pypi/mygene)が分かりやすいと思いますので、是非ご覧になってみてください。