OmniAICreator/Qiita-1.07M huggingface dataset:
GASでdriveの特定ディレクトリにファイルを吐き出す方法


[@nazomikan](https://twitter.com/nazomikan)です。
本記事は[LIFULL Advent Calenderその2](https://qiita.com/advent-calendar/2017/lifull2)の9日目の記事です。

ほとんどメモに近い内容ですが誰かのお役に立てば。

通常、Google Driveでファイルを作成するとき、`DriveApp.createFile`とかで作るのが普通なんだけど、`DriveApp`でDrive内の特定ディレクトリに対する書き込みの指定ができない。

よくそれでつらみを感じてたんだけどDriveのREST APIを叩けばいけるらしい。

それで`UrlFetchApp`でがんばろうとしたところ、どうやらそんなことしなくてもいけるらしい

[公式ドキュメント](https://developers.google.com/apps-script/guides/services/advanced)

> The advanced services in Apps Script allow experienced developers to connect to certain public Google APIs with less set-up than using their HTTP interfaces. They work much like Apps Script's built-in services — for example, they offer autocomplete, and Apps Script handles the authorization flow automatically — but are not enabled by default.
> 
> To see which Google APIs are available as advanced services, look for the "Advanced Google Services" section in the Reference. If you want to use a Google API that isn't available as an advanced service, just connect to it like any other external API.


Advanced Google Servicesを有効にすればいいらしい。

リソース > Googleの拡張サービス...

|![script editor](https://qiita-image-store.s3.amazonaws.com/0/12806/87962bbc-3f0a-a9f9-7acf-c9ac86759d21.png "スクリーンショット 2017-12-04 13.44.45.png")|
|---|

使いたいAPIを無効からONにする(必要であればAPI Console側も許可する)

|![enable advance api](https://qiita-image-store.s3.amazonaws.com/0/12806/2e71cf35-cc96-f6b4-e9ec-38464f2d26d0.png "スクリーンショット 2017-12-04 13.45.27.png")|
|---|

これをするとDriveのREST APIを提供する`Drive`オブジェクトが使えるようになるのでこれの`Drive.Files.insert`に親ディレクトリを指定して実行すると特定ディレクトリに作ったファイルを吐き出すことができる。


```js
function exportJSON(fileName, obj) {
  var parentDir = 'some directory id'
    , blob = Utilities.newBlob('', MimeType.PLAIN_TEXT, fileName + '.json')
    ;
    
  blob.setDataFromString(JSON.stringify(obj, null, '  '), 'utf-8');
  Drive.Files.insert({
    title: String(fileName) + '.json',
    parents: [{id: parentDir}],
    mimeType: MimeType.PLAIN_TEXT
  }, blob)
}

// jsonの生成
exportJSON('hogehoge', {a: {b: 1}});
```

REST API他にもいっぱいあるのでこれで全能感に包まれますね。
GA 初心者プログラマが Google Tag Manager を使った経験から、説明を少し補足する

# 概要

Google Tag Manager は、ログ取得を中心としたタグの埋め込みをサポートするツールです。

巷の解説記事を読むと、非プログラマ向けのものが殆どですね。
WEBサイトの運営者（オーナー、マーケティング担当者）はプログラムを書けないことが多いと思うので、プログラマ向けの記事が少ないのは仕方ないですね。

しかし、GA がそうであるように、ちょっと凝った（標準対応されていない）ログを取得しようとすると、プログラミングが必要になります。

そんな時、プログラマとしては、「WEBの仕組みを分かっている人向けの、Google Tag Manager の技術的な仕組みの解説」があった方が助かるわけです。
非プログラマ向けの記事では、そういったところがスルーされていて、分かったような分からないような気にさせられます。

その辺りをちょろっと補うことが本記事の目的です。

# Google Tag Manager の説明補足

プログラマが WEBページと Google Tag Manager で行う作業は以下です。

![説明画像](https://github.com/sugiyasu-qr/myStorage/blob/master/Qiita/GoogleTagManater.drow.io.png?raw=true)

こうしておくと、Google Tag Manager は、dataLayer で設定した変数を各タグで使用する変数にマッピングした上で、タグを自動生成してくれます。

プログラマは、Google Tag Manager の管理画面で各タグ向けの変数や配信条件（タグを生成する条件）を設定し、WEBページでは dataLayer を使って変数に値を設定するのです。簡単に言うとこれだけで、後は細かい微調整の領域です。 

# 補足の補足

Google Tag Manager にはデフォルトで設定してくれる変数があります。ページのURLなどです。
そのため、こういった基本的な値のみを参照するタグであれば、デフォルト設定で良しなに動いてくれたりします。

# まとめ

内容は薄いですが、個人的には、こういった説明があれば理解が早くなったのになーと思い、記事にしてみました。
【Raspberry Pi 3】スリープ設定解除

#1.設定ファイルを開く
　sudo nano ~/.config/lxsession/LXDE-pi/autostart

#2.以下を追記してRaspberry Pi を再起動

@xset s 0 0
@xset s noblank
@xset s noexpose
@xset dpms 0 0 0
javascript　...の基本的な使い方

参考　
http://yami-beta.hateblo.jp/entry/2016/09/06/112330

reactでは以下のような...の記法を見かけます。

```
render() {
  return <Counter {...this.state} />
}
```
これはSpread AttributesというJSXの記法

子の Component へ props を渡す場合，Spread Attributes を用いると，以下のように書き換えられます．

1つずつ渡す場合

```
const props = { foo: "foo", bar: "bar" };
render() {
  return <Child foo={props.foo} bar={props.bar} />
}
```

Spread Attributes を用いて渡す場合

```
const props = { foo: "foo", bar: "bar" };
render() {
  return <Child {...props} />
}
```

ES.next でのスプレッド演算子
「...」（ドット3つ）の記法は，スプレッド演算子として ES2015 で Array に導入されています．

```
let ary1 = ["first", "second"];
let ary2 = [...ary1, "third"]; // ["first", "second", "third"]
```
ES.next では，「...」（ドット3つ）の記法を，Object で使える Object Rest/Spread Properties が提案されています．

```
let obj1 = { x: 1, y: 2 };
let obj2 = { ...obj1, z: 3 }; // { x: 1, y: 2, z: 3 }
```
これを用いると，以下のような Object.assign() を用いていたコードが簡潔に書けるようになります．

```
let obj1 = { x: 1, y: 2 };
let obj2 = Object.assign({}, obj1, { z: 3 });
【Raspberry Pi 3】メインディスクをSSDに変更

#工程
1.デバイスID確認
2.ext4形式でフォーマット
3.ファイルシステムをmicroSDカードからSSDへコピー

#使用したアイテム
![iOS からアップロードされた画像 (2).jpg](https://qiita-image-store.s3.amazonaws.com/0/194284/395ee85f-76e5-44ea-2ddc-ce44dca992eb.jpeg)

USB接続のため性能は関係無い！コスパ的におすすめのSSD
http://amzn.to/2AGyejX

SATA-USB 3.0 変換アダプタ（USB 3.0 - SATA IIIコンバータ）
http://amzn.to/2BWV3jP

#やってみよう
1.デバイスID確認

・コンソールからSSDのIDを確認します。
　sudo fdisk -l
（例：/dev/sda1）


2.ext4形式でフォーマット
sudo fdisk /dev/sda

D Enter 
N Enter
Enter
Enter
Enter
Enter
w
（複数のパーティションが存在する場合は、パーティションの数だけD）

・SSDのマウントを解除
umount /dev/sda1

・ext4 形式でフォーマット
sudo mkfs.ext4 /dev/sda1


3.ファイルシステムをmicroSDカードからSSDへコピー
mkdir /tmp/usd /tmp/ssd
sudo mount /dev/mmcblk0p2 /tmp/usd
sudo mount /dev/sda1 /tmp/ssd
(cd /tmp/usd; sudo tar --backup -c *)|sudo tar -C /tmp/ssd -xv

＊コピー時間は10分～20分


4.起動時に読み込むファイルシステムのパーティションを変更

	
sudo cp /boot/cmdline.txt /boot/cmdline_ORG.txt
mkdir /tmp/boot
sudo mount /dev/mmcblk0p1 /tmp/boot
sudo nano /tmp/boot/cmdline.txt
（root の部分を変更　→ root=/dev/sda1）
sync
reboot

完了
PHPのリクエストのメソッドがGETなのかPOSTなのかを判断する

ブラウザからのリクエストがGETメソッドなのかPOSTメソッドなのかをスクリプト側で判断するには

```php
$_SERVER['REQUEST_METHOD']
```
このような$_SERVER変数を使うとわかります。


例えばですが

```php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // POSTメソッドだったとき
} else {
    // GETメソッドだったとき
}
```

GETメソッドに関してはリンクをクリックすると自動的にGETメソッドになるので
リンクをクリック=GETメソッドと覚えておくと良い。

ボタンをクリックする場合は、

```php
<form action="post">
```

などのように書いてあるのでわかりやすいが、リンクをクリックされた時はどこにも書いていないので、そういうものだと覚えておいた方が良いだろう。

<h2>追記</h2>
<blockquote>WebブラウザのフォームからはGETまたはPOSTメソッドのリクエストだけですが、WebブラウザのXMLHttpRequest(JavaScript)ではその他のPUT/PATCH/DELETEのHTTPメソッドのリクエストも可能な事に留意する必要があります。</blockquote>

今回の場合は、Webブラウザのフォームを想定して記事を書きましたが上記のように様々なパターンがあります。
cron,pythonで自動スピードテストを作成する

いつもお世話になっております。

フリーランスエンジニアの永田です。

iOS,Androidは少しpython,php,も実施しています。デザインも勉強中です。

今回はプログラミングで通信レスポンスと実装スピードを自動で設定するロジックを紹介いたします。
##環境
mac

corn

python3

が必要になります。各インストール方法は、割愛します。


詳細リンクは
https://github.com/daisukenagata/PythonFile



##cronとは
お馴染みだと思いますが、Unix系OSにおいて、コマンドの定時実行のスケジュール管理を行うために用いられるコマンドであります。

###crontab -eで編集を実施コマンドです。

```
分 時 日 月 曜日 コマンド
*  *  *  *  *  some_command
```




####pythonで読める日本語がcronでは読めないので、この設定が必要になります。
```
import sys
import io
sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
```


####１分以内に自動スクリプトを呼び出す処理を記入しています。
```
*/1 * * * * /Users/nagatadaisuke/.pyenv/shims/python $HOME/PythonFile/postPython.py
```

編集が成功すると、ターミナルに表示される処理がこちらになります。
```
crontab: installing new crontab
```

cronの内容を確認するコマンドです。
```
crontab -l
```

cronが実行されると、表示されるメッセージがこちらで、catでcronの内容を確認できます。

```
You have new mail in /var/mail/nagatadaisuke
↓

cat /var/mail/nagatadaisuke
```
####python3

pythonはとてもシンプルなコードで、できてしまいます。
大掛かりなツールは必要ないけど、自動でテストしたい場合など、
自分で自作しても良いかもしれませんね。



####pythonの実装コード

time.time()を2回呼びその差分を出力するロジックです。

r = requests.get('URLSettings')のURLSettingsにURLを設定すると
レスポンス情報と、通信時間が計測できます。

```
import requests
import time
from datetime import datetime
# -*- coding: utf-8 -*-
import sys
import io

def main():
    #cron対応
    sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
  
    start = time.time()
   
    r = requests.get('https://github.com/daisukenagata/PythonFile/blob/master/postPython.py')
 
    elapsed_time =  time.time() - start
    text = datetime.now().strftime("%Y/%m/%d %H:%M:%S")+" "+"StatusCode"+str(r.status_code)+" "+"経過時間"+str(elapsed_time)+"\n"


    f = open('file.text', 'a')
    f.writelines(text)
    f.close()


if __name__=='__main__':
    main()
```

昼休憩中に作成させていただきました。
以上が紹介になります。github上では動くソースをアップデートしときました。

午後も作業頑張ります。よろしくお願い致します。
来年も宜しくお願い致します。
Windows10のロック画面のSpotlightの画像を、デスクトップの壁紙にできて全自動で更新もできるバッチ

[Windows10](http://amzn.to/2A0HeU6)のロック画面のSpotlightの画像って綺麗ですよね。

ところが、、、
「よし！壁紙にしよう！」と思っても標準では出来ないのです。

というわけで、できるようにするバッチを作ってみました。

```bat:spotlight.bat
@echo off
robocopy %LOCALAPPDATA%\Packages\Microsoft.Windows.ContentDeliveryManager_cw5n1h2txyewy\LocalState\Assets %USERPROFILE%\Pictures\Spotlight\temp /MIN:450000
cd %USERPROFILE%\Pictures\Spotlight\temp
ren %USERPROFILE%\Pictures\Spotlight\temp\* *.jpg
copy /Y %USERPROFILE%\Pictures\Spotlight\temp\*.jpg %USERPROFILE%\Pictures\Spotlight\
del /F /Q %USERPROFILE%\Pictures\Spotlight\temp\*
cd ..
rd /s /q %USERPROFILE%\Pictures\Spotlight\temp
```

- 実行すると、最新のspotlightの画像が「PC > ピクチャ > Spotlight」の下にコピーされます。
- 壁紙に設定するには、
    - 個人用設定を開く
    - → 背景にスライドショーを選択 
    - → スライドショーのアルバムに「PC > ピクチャ > Spotlight」を選択
    - → 時間毎に画像が切り替わります。
- タスクスケジューラで、１日毎に実行すると良い感じです。
- モバイル向けの縦画像も残ってしまうのはご愛嬌(^^;)
今更だけどHHKBを使うべきたった１つの理由

# はじめに
学生の頃からずっと愛用しているHHKB。職場でも家でもサブマシンでもHHKBです。
ご存知の方も多いでしょうし、散々良さも悪さも語りつくされていますが、
なぜ、このネタを挙げるかというと、私は常日頃からHHKBがもっと普及すれば良いと考えているからです。
ノートPCにしても、HHKBがもっともっと普及されれば、開発用PCにはHHKBが標準装備されたり、ノートPCにもHHKBが搭載されたりするハズです。
みんながHHKBを使えば、もうみんなHHKBを使わざるを得ない。そんな世の中になればいいと思います。

# というワケで私がHHKBを使うたった１つの理由
ホームポジションを維持したまま、
**・PgUp、PgDn、Home、Endキーが使える**
これです。

まずはこれを見てください。
![HHKB1.png](https://qiita-image-store.s3.amazonaws.com/0/141209/8e2218bd-5e4e-a40a-cbb6-455b46e122b8.png)
引用：株式会社PFU（http://www.pfu.fujitsu.com/hhkeyboard/kb_collection/images/hhkbpro.gif）

矢印キーとの近さが、そのまま編集しやすさに繋がっています。
ノートPCですと、よく右下に配置された矢印キーのファンクションでPgUp、PgDn、Home、Endが設定されていることが多いですが、Fnキーが押しづらい位置（矢印キーに近すぎる）にあることが多いです。

Viエディタやコマンド操作以外でもHHKBは良い仕事をしてくれます。
[Blender] BlenderをSubstance Painterのように使うアドオンBPainterの準備

#概要
Blenderは直接モデルにペイントする機能がついている。
しかし、その機能にはレイヤ機能が存在しない。

BPaniterを使うとペイント処理にレイヤ機能が使用でき
画像編集ソフトのようなレイヤ合成処理(乗算やスクリーンなど)を適用することができる。

この記事ではBPainterを使用するための準備について扱う。
(ここではDiffuseのカラーマップのみを使用することを想定している)

#環境
Blender 2.78c
BPainter 1.1

#BPainterについて
BPainterは早期アクセスができるPatreon版とBlenderMarketでの通常版の購入方法がある。

http://bpainter.artbyndee.de/get-bpainter

開発者を応援したい人はPatreon版を検討してみてほしい。

##内部レンダラーによる使用できる機能の違い
Blenderにはレンダラーが複数存在する。
内部レンダー(internal Renderer)とCycles Rendererがある。
BPainterの全機能を使用するにはCycles Rendererを使用する必要がある。

http://bpainter.artbyndee.de/


#手順
##Cycles Rendererに変更する

![Blender [D__My Created Games_Clicker_Temp_BPainter.blend] 2017-12-04 11.17.51.png](https://qiita-image-store.s3.amazonaws.com/0/36154/414ea8b0-d3cf-5f67-5be2-ee617835cd4a.png)

##マテリアルの設定
ペイントしたいオブジェクトを選択してマテリアルの設定画面を開く。
マテリアルを設定して「ノードを使用」ボタンを設定する。

![BPainter1.png](https://qiita-image-store.s3.amazonaws.com/0/36154/def470c0-efca-fac6-34ad-53734998aafd.png)

サーフェスからシェーディングを選択する。
ここでは「ディフューズBSDF」を選択した。

##UVマップを設定する
モデルに直接ペイントするためにも、まずモデルに対してUVマップを設定する。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/36154/9b884b36-9f82-8697-54b2-e7e22990a118.png)

##マルチレイヤの描画結果を画面に反映する
「テクスチャペイント」モードへ切り替えてBPainterを使用してペイントする。
このときにマテリアルの設定を変更しないと画面にペイント結果が反映されない。
(この設定はテクスチャペイントモードを選択したときに自動で行われることがある)

![BPainter5.png](https://qiita-image-store.s3.amazonaws.com/0/36154/76b8b812-286d-dd3b-cc71-417fede172e0.png)

カラーから「Material_PaintLayer」を選択する。
これによってマルチレイヤーでペイントした結果が画面に表示される。



##カラーパレットの読み込み
デフォルトのカラーバレットが用意されている。
これを読み込んで「F」ボタンを押しておかないと次回読み込み時に正常に読み込めないときがある。

カラーの歯車ボタンを押して、カラーパレットの選択画面から「BPainter_Default_Palette」を選択する。

![BPainter4.png](https://qiita-image-store.s3.amazonaws.com/0/36154/6b2a89ac-61ef-a9f0-5b66-a95cd52d6682.png)

このパレットを選択後に「F」ボタンを押しておく。

##ブラシの設定
カラーパレット同様にBPainterによって自動生成されるブラシの「F」ボタンを押しておくとよい。

![BPainter6.png](https://qiita-image-store.s3.amazonaws.com/0/36154/836972c0-5433-aa4e-7825-ad8dce95bc60.png)

BPainterによって生成されたブラシすべてに設定する。

##テクスチャスロットを作成する
書き込むテクスチャが作成されていないのでテクスチャを作成する。

![BPainter3.png](https://qiita-image-store.s3.amazonaws.com/0/36154/7537f69b-9456-3d24-f764-c2e351498fc7.png)

解像度等は適時設定する。


##ベイク用テクスチャをレイヤに設定する
最初のデフォルトレイヤをベイク用の一枚テクスチャに設定しておくことで
あとあとのベイク時の処理が楽になる。

![BPainter8.png](https://qiita-image-store.s3.amazonaws.com/0/36154/99fd915e-b859-fae6-cb69-96664df5e39d.png)

先ほど作成したスロットに設定したテクスチャをイメージに設定しておく。
設定するとレイヤのテクスチャが選択したテクスチャのものに置き換わる。

![BPainter9.png](https://qiita-image-store.s3.amazonaws.com/0/36154/ec1c4fdd-a653-f23f-ccfb-54a03caad1d1.png)

このレイヤを非表示にしておけばベイク結果が反映されても表示上には影響がない。

##マルチレイヤに描画した結果を一枚のテクスチャへ出力する
複数のレイヤに描画したテクスチャを一括で一枚のテクスチャに出力する機能は
現在のBPainterには存在しない。(開発者の方に聞きました)

出力としてはBlenderの機能のベイク機能を使用する。

###ベイクする
レンダーの設定を開いてベイクの設定を変更する。

![BPainter7.png](https://qiita-image-store.s3.amazonaws.com/0/36154/0da43e00-5819-6a1e-7e7f-0a8cfeb27242.png)

ベイクボタンを押してカラーマップのみ出力する。
うまくベイクできないときは「クリア」のチェックを外してみてやると結果が変わる。

ベイク後は描画したレイヤに上書きされていることがあるので
そのままblenderファイルを上書きしないこと。

###保存する
UVマップビューを開いて、ベイクしたテクスチャを表示して画像として保存する。
保存した画像をUnity等で利用する。
PHP composer.jsonのプロパティ名まとめ

composer.jsonのプロパティ名について記載します。
  
<br>

name：パッケージ名を「vendor/project」の形式で記述

description：説明文

version：バージョンを記述

type：パッケージタイプ。library、metapackage、composer-installerの3種類が最初から用意されています。

keywords：パッケージに関連するキーワードの配列。検索時に利用されます。

homepage：対象プロジェクトのURL

time：バージョンのリリース日

license：ライセンス

authors：パッケージの作者の情報を記述します。配列で複数人記述できます。

name：作者の名前

email：作者のメールアドレス

homepage：作者のホームページ

role：開発者や翻訳者のような作者の役割

support：プロジェクトのサポートに関わる情報

email：サポート用のメールアドレス

issues：Issue TrackerのURL

forum：フォーラムのURL

wiki：wikiのURL

irc：サポート用のIRCチャンネル

source：ブラウズ、ダウンロードするソースのURL

package links

require：このパッケージに必要なパッケージを記述します。

require-dev：このパッケージを開発やテストする為に必要なパッケージを記述します。

conflict：このパッケージに競合するパッケージを記述します。

replace：このパッケージによって置き換えられるパッケージを記述します。。

provide：このパッケージによって提供できる他のパッケージを記述します。。

suggest：このパッケージで強化や、便利になるパッケージを記述します。

autoload
psr-0：PSR-0に従ってオートロードする名前空間とパッケージルートからの相対パスのマッピングを定義します。名前空間に対応していないPEARスタイルもサポートします。

classmap：「vendor/composer/autoload_classmap.php」に「key => value」形式でクラスマップを登録するフォルダとファイルを記述します。

files：明示的に特定のファイルのオートロードが必要な時に記述します。

include-path：非推奨なので説明を省きます。

target-dir：インストール先を定義します。パッケージルート直下で名前空間を宣言している場合、オートロードが上手く動作しません。そういう場合にtaget-dirを名前空間に合うように設定することで解決できます。

minimum-stability：安定性でパッケージを絞り込むデフォルトの動作を定義します。

repositories：カスタムパッケージのリポジトリを設定します。（詳細な項目がありますが、それはまた後日に書きます。）

config：プロジェクトにのみ有効な設定を記述します。

vendor-dir：依存パッケージのインストール先ディレクトリ。デフォルトは「vendor」

bin-dir：プロジェクトのバイナリのシンボリックリンクを作成するディレクトリ。デフォルトでは「vendor/bin」

process-timeout：git cloneのような処理でプロセスが死んだと判断するまでの時間。回線の遅い環境や巨大な依存パッケージがある場合は数値を上げる必要があります。デフォルトは300秒です。

github-protocols：github.comの為に使用するプロトコルの優先順位。デフォルトでは「[“git”,”https”,”http”]」

github-oauth：ドメイン名とoauthキーを記述します。github上のプライベートリポジトリへのアクセスと、github APIのIPベースの低速制限を回避する為に使用します。

cache-dir：composerで使用する全てのキャッシュの保存先ディレクトリを指定します。デフォルトは「$COMPOSER_HOME/cache」

cache-files-dir：パッケージのzipファイルの保存先ディレクトリを指定します。デフォルトは「$cache-dir/files」

cache-repo-dir：リポジトリのメタデータの保存先ディレクトリを指定します。デフォルトは「$cache-dir/repo」

cache-vcs-dir：バージョン管理システムのメタデータの保存先ディレクトリを指定します。デフォルトは「$cache-dir/vcs」

cache-files-ttl：distパッケージのダウンロードファイルのキャッシュの有効期限。デフォルトでは6ヶ月

notify-on-install：インストール時の通知の設定。デフォルトはtrue

scripts：スクリプトを使ってインストール時のさまざまな部分をフックすることができます。

extra：スクリプトで使用できる追加データを記述できます。

bin：バイナリとして扱われ、configで設定されているbin-dirにシンボリックリンクを作成されるファイルを記述します。
<br>

以上


参考
http://9ensan.com/blog/programming/php/php-composer-composerjson-list/
Semantic UI を利用してみたお話

## SemanticUIとは？
とりあえず調べてみた。
速く美しいウェブサイトを設計、応答性の高い美しいレイアウトの作成に役立つ開発フレームワークらしい

## Semantic UIはみんなにやさしい！？
早速提供しているサイトに飛んでみる事にしました。
### 開発者にやさしい
意味を持たせたclass名などを利用することで、開発者がその役割や機能をソースから理解することが容易になる。

### ユーザーにやさしい
セマンティックなコードはアクセシビリティの向上にもつながる傾向がある。コンテンツに適したタグを使用することで、スクリーンリーダーなどのソフトウェアで障害を持ったユーザーにも理解しやすい形でコンテンツを届けることが出来る。

### ここがやさしくない！

![スクリーンショット (1)(1).png](https://qiita-image-store.s3.amazonaws.com/0/146678/acaa019f-f7c9-6990-52b2-31ebb13a8ff7.png)

サイトが英語！
導入しようにも英語が分からなくて進まない…
でも問題なし！日本語に変更できます！

![スクリーンショット (2)(1).png](https://qiita-image-store.s3.amazonaws.com/0/146678/32bbd2e0-a2d2-82d5-8bda-feda326b1ca9.png)

ただし、翻訳作業の進行率６％　(￣▽￣;)
導入手順も英語で苦戦しますね…

## 解決策！
Microsoft edgeの拡張機能[Translator For Microsoft Edge](https://www.microsoft.com/store/productId/9NBLGGH4N4N3)を使用しよう！

使用方法ですが、リンクからとんで拡張機能をインストールします。

![スクリーンショット (3)(1).png](https://qiita-image-store.s3.amazonaws.com/0/146678/4668c345-ed47-9cde-ffca-0de2b6e60cc5.png)
上の写真と同じ所に赤枠で囲ったアイコンが出てくるのでクリック！
後は翻訳したい言語に変更します！
これでほとんどの文が日本語に変更されます。

##問題点
基本的にプログラムを使用する場合には問題は起きませんが、余計な所を日本語に訳されてしまい違和感を生み出してしまいます。

##感想
今回Semantic UIについてよりEdgeの便利機能についての解説になってしまいましたが、フレームワークなどを使ううえで言語（主に英語）の壁は凄く大きいと思いましたので書きました。

##参考文献
・[Semantic UI](https://semantic-ui.com/)
・[「Semantic UI」やさしさあふれるUIフレームワーク](http://web-and.me/semantic-ui/)
Excel目検に抵抗するで🤜🤛

# Excel目検に抵抗

## 表計算ソフトの歴史

Excelとプログラマの戦いの歴史は長い。Excelというものの本質は表計算ソフトであり、表計算ソフトの元祖は 1979年の [VisiCalc](https://ja.wikipedia.org/wiki/VisiCalc)というテキストユーザインタフェース (TUI) ベースのツールに遡る。

- Screenshot of VisiCalc running on an Apple II computer

![image.png](https://qiita-image-store.s3.amazonaws.com/0/20634/a19ef760-4dde-4da3-67b9-84cc5501df7e.png)

## やりたいこと

- 何らかのツール(DB, Apache POI, プログラム)で表を出力した際に、その出力に異常がないか調べたい
- というのは、DBのデータと出力に幅があるのでテストをするにしても起こりうるパターンが多く、結果として出力される例外的なデータの検出が難しいがそれを見つけたい
- もう少し抽象化して書くと、ある規定された機能についてテストするのではなく異常検知・変化検知を行いたいということ
- あるデータベースの規定された機能に対してのテストは次回やり方を提案する

結果として人の目でExcelを見たりすることになるのだが、自分はプログラマなのでそれは嫌である。

もちろん俺らは抵抗するで？🤜🤛 ツールで

## Excel差分検出ツール

### ExcelMerge

最近Excelどうしの比較を行うすばらしいツールが出た

- [Excelファイルを比較するツールを作ってみた](https://qiita.com/skanmera/items/d1dea61a7077f320524e)

ぶっちゃけこれを使っておけば、どこに差分が出たか一目でわかる。けっこう重たいファイルでも余裕で差分チェックしてくれるようだ。プログラム側に改修を加えた際にどこか異常がないかどうかについては、これで十分事足りる。

### INQUIREアドイン

そのほかに [2つのファイルを比較できるINQUIRE](https://hamachan.info/win8/excel/inquire.html) などがある。

## DiffkitでCSV比較

データの比較を少し行うぐらいだとExcelMergeでいいのですが、定期的にCIを回すような形でテストを行いたい場合どうすればいいのか？これについてはDiffkitというオープンソースのツールがあったので紹介したい。

### Diffkit

- [DiffKit - Diff for tables](http://www.diffkit.org/index.html)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/20634/717df206-f291-533e-1c42-1af2e5d3aae7.png)

### 手っ取り早くテーブル形式のCSVファイルを比較して結果を出す

- Gemfileを作る

```
$ vim Gemfile
source "https://rubygems.org"

gem 'daff'
```

- gemをインストールして比較を実行
- この例では２つのCSVを比較して `diff.csv` を出力し
- `diff.csv` から `OUTPUT.html` を出しています

```
$ bundle install --path vendor/bundle
$ bundle exec daff.rb diff --output diff.csv test9.lhs.csv test9.rhs.csv
$ bundle exec daff.rb render --output OUTPUT.html diff.csv
```


- 出力は [COOPY » Guide  version 0.6.5](http://share.find.coop/doc/patch_format_tdiff.html) という独自フォーマットで出てくる、見やすい

Diffkitを使う場合、Excelフォーマットから事前にCSV形式に変換しておく必要はあるのでそこは考える余地があるなと思います。
PHPUnitを使ってみる

PHPUnitの使い方について記載


1.composerのインストール

```
brew install homebrew/php/composer
```

2.composer.jsに以下を追加

```
  "require": {
    "piece/stagehand-testrunner": "4.2.*"
  },
  "require-dev": {
      "phpunit/phpunit": "3.7.*"
  }
```

3.composerをアップデートしてパッケージのダウンロード

```
composer update
```

4.テストランナーのコンパイル

```
./vendor/bin/testrunner compile -p vendor/autoload.php
```


5.テストコードを作成（testsディレクトい配下に作成）

```
class Setup_test extends PHPUnit_Framework_TestCase {

	public function test_foo()
	{

        $this->assertTrue(true);

	}

}
```


6.テスト実行（vendor/autoload.phpを読み込んでtests配下をテスト）

```
./vendor/bin/testrunner phpunit -p vendor/autoload.php -a tests/
```


7.OKが出たら成功


以上
Raspberry Pi で paho-mqtt を使う

リンクを切り替えて python3 を、ディフォールトにします。

```bash
sudo cd /usr/bin
sudo rm python
sudo ln -s python3 python
```

ライブラリーのインストール

```bash
sudo pip3 install paho-mqtt
```

Subscribe のプログラム
host と、topic を Broker に合わせて下さい。

```py:subscribe.py
#! /usr/bin/python
# -*- coding: utf-8 -*-
#
#	subscribe.py
#
#					Dec/04/2017
#
# ------------------------------------------------------------------
import	sys
from time import sleep
import paho.mqtt.client as mqtt

# ------------------------------------------------------------------
sys.stderr.write("*** 開始 ***\n")

host = '192.168.8.101'
port = 1883
topic = 'topic_1'

def on_connect(client, userdata, flags, respons_code):
	print('status {0}'.format(respons_code))

	client.subscribe(topic)

def on_message(client, userdata, msg):
	print(msg.topic + ' ' + str(msg.payload,'utf-8'))

if __name__ == '__main__':

	client = mqtt.Client(protocol=mqtt.MQTTv311)

	client.on_connect = on_connect
	client.on_message = on_message

	client.connect(host, port=port, keepalive=60)

	client.loop_forever()

sys.stderr.write("*** 終了 ***\n")
# ------------------------------------------------------------------
```

Publish のプログラム
host と、topic を Broker に合わせて下さい。

```py:publish.py
#! /usr/bin/python
# -*- coding: utf-8 -*-
#
#	publish.py
#
#					Dec/04/2017
#
# ------------------------------------------------------------------
import	sys
from time import sleep
import paho.mqtt.client as mqtt

# ------------------------------------------------------------------

sys.stderr.write("*** 開始 ***\n")

host = '192.168.8.101'
port = 1883
topic = 'topic_1'

client = mqtt.Client(protocol=mqtt.MQTTv311)

client.connect(host, port=port, keepalive=60)

client.publish(topic, 'Good Afternoon')
sleep(0.5)
client.publish(topic, 'こんにちは')

client.disconnect()

sys.stderr.write("*** 終了 ***\n")
# ------------------------------------------------------------------
```

Broker (サーバー) の立て方は、こちら
[Raspberry Pi で mosquitto を使う](https://qiita.com/ekzemplaro/items/ab90dd630c3ad8e819ab)

次のバージョンで動作を確認しました。

```text
$ uname -a
Linux pansy 5.4.72-v7+ #1356 SMP Thu Oct 22 13:56:54 BST 2020 armv7l GNU/Linux
```
とりあえずVue.jsをJavaプロジェクトで動かす

[Vue.js公式リファレンス](https://jp.vuejs.org/)が日本語で丁寧に作られていてわかりやすいので、基本はリファレンスを見ると良いです

```test.html
<body>
  <script src="https://unpkg.com/vue"></script>
  <div id="app">
    <input v-model="yourName" />
    <span>Hello, {{ yourName }}!</span>
  </div>
 <script>
    new Vue({
      'el': '#app',
      data: { yourName: 'World' }
    })
  </script>
</body>
```

これだけで動きます。
上記以外の書き方は公式リファレンスを参考にしましょう
Eclipse で Kotlin プロジェクトが作れるようにした


## 説明
Kotlin を使う時は普段は IntelliJ IDEA を使用しているのですが、Eclipse でも使えるようにしておこうと思い、環境構築について調べてみました。

### Kotlin Plugin for Eclipse
プラグインをいれるだけで、Eclipse 上で Kotlin が使える環境になるようです。

- [Kotlin Plugin for Eclipse](http://marketplace.eclipse.org/content/kotlin-plugin-eclipse)

このプラグインをインストールできる Eclipse は以下のバージョンです。

|名前|バージョン|
|---|---|
|Oxygen|4.7|
|Neon|4.6|
|Mars|4.5|
|Luna|4.4|

## 手順
### 1. プラグインの検索
#### 1.1. Eclipsde のバージョン確認
![image](https://qiita-image-store.s3.amazonaws.com/0/127983/552b907d-abab-c4be-6643-bb3dc9fa9886.png)

手元にある Eclipse のバージョンは、Neon で 4.6.3 でした。プラグインの導入可能な Eclipse でした。

#### 1.2. Eclipse Marketplace の表示
![image](https://qiita-image-store.s3.amazonaws.com/0/127983/48ec8c56-8c4b-594c-3c1d-cfef983a6dc3.png)

Eclipse のメニューから、「Help」->「Eclipse Marketpace」を選択します。

#### 1.3. Kotlin Plugin for Eclipse
![image](https://qiita-image-store.s3.amazonaws.com/0/127983/cd4ee7a5-4612-6737-4240-b65dc718c787.png)

Eclipse Marcketplace の検索フィールドで「**Kotlin**」と入力し検索すると、「**Kotlin Plugin for Eclipse**」が見つかります。
**Install** ボタンをクリックして Eclipse にプラグインをインストールします。

#### 1.4. ライセンス・アグリーメント
![image](https://qiita-image-store.s3.amazonaws.com/0/127983/1853c935-6fec-065f-b3b9-8bf31947dc3d.png)

「I accept the terms of the licence agreements」にチェックを入れて、**Finish** をクリックします。

![image](https://qiita-image-store.s3.amazonaws.com/0/127983/f5c63355-db73-b965-33cf-f048b704b811.png)

警告がでますが、そのまま **OK** をクリックします。

#### 1.5. 再起動してインストール完了
![image](https://qiita-image-store.s3.amazonaws.com/0/127983/5e07fd0e-0b9b-3c80-f29a-c3f97adf22ea.png)

**Yes** をクリックして Eclipse を再起動します。

### 2. Kotlin Plugin for Eclipse の動作確認
#### 2.1. Kotlin の追加を確認
![image](https://qiita-image-store.s3.amazonaws.com/0/127983/9dfb205e-0b46-5272-36c7-d94234f6102a.png)

新規作成できる対象に Kotlin 関連が増えている事を確認します。

Eclipse のメニューから「File」->「New」->「Others」を選択してウィザードを表示します。
すると、Kotlin が追加されている事が確認できます。

#### 2.2. Kotlin プロジェクトの作成
![image](https://qiita-image-store.s3.amazonaws.com/0/127983/9ace7b45-4d4e-7c94-b5d4-62c304a04cfd.png)

ウィザードで、**Kotlin Project** を選択し、プロジェクト名を入力して **Finish** をクリックします。

![image](https://qiita-image-store.s3.amazonaws.com/0/127983/571fb031-3824-152f-a665-aaa58632ccba.png)

Kotlin のライブラリを含むプロジェクトが作成される事が確認できます。

#### 2.3. Kotlin のコードの追加
![image](https://qiita-image-store.s3.amazonaws.com/0/127983/23049b87-4528-b827-5f37-82f02c1321c8.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/127983/c5f72267-f277-6761-270b-ddb69c682da3.png)

作成した Kotlin プロジェクトに Kotlin ファイルを追加します。再びウィザードから **Kotlin File** を選択してファイル名を入力して **Finish** をクリックします。

![image](https://qiita-image-store.s3.amazonaws.com/0/127983/ee9f3bc2-673a-57a1-f847-919ac14d8789.png)

ファイルが作成されるので、以下の標準出力を行う関数を追加します。

```kotlin
fun main(args: Array<String>) = println("Hello Kotlin")
```

#### 2.4. Kotlin の動作
![image](https://qiita-image-store.s3.amazonaws.com/0/127983/862adbbd-9252-8e89-145e-1ab959d7896a.png)

作成したKotlin のファイルを選択してメニューから、「**Run As**」->「**Kotlin Application**」 を選択します。

![image](https://qiita-image-store.s3.amazonaws.com/0/127983/d7d012ac-edb7-0cd2-5559-206a43fdcbf0.png)

コンソールに、標準出力が表示されている事が確認できます。

## まとめ
Eclipse でも簡単に Kotlin を動かすことができる事がわかりました。
kerasでiOSアプリに使うモデルを作るためのTips ~ coreMLとの戦いPart2 編 ~

ちょっと[前回](https://qiita.com/Mco7777/items/c5df09e8b68988cdf916)の記事に追記していくとどんどん大きくなりそうだったのでPart2という事で新たに見つかった事象をこちらで報告していきます。

# Concatenateが決められた次元でしか出来ない件
[こちら](https://qiita.com/Mco7777/items/c5df09e8b68988cdf916#concatenateの話)の内容。試せていませんと言っていましたが、 `Permute` を使って試した所例に漏れず新たなエラーを返してくれました。

## そのままConcatenate
まずはそのまま

```concatenate.py
model_input = [Input(shape=(10,8)),Input(shape=(10,8))]
concate = Concatenate()(model_input)
model = Model(inputs=model_input, outputs=concate)
```

最終的に(10,16)のShapeになるだけの変哲のないモデルです。ちなみにkerasの `Concatenate` はaxisを指定しないとデフォルトで-1、つまり一番うしろの次元でくっつけます。今回の場合はサイズ8となっている2次元目ですね。
1つ注意点としてaxisで指定する数字は<strong>0はバッチ次元</strong>です。なので1次元目でつなげたい場合は axis=1 と指定します。（知らないままaxis=0で指定するとConcatenateした後も見た目のTensorのサイズが変わっていないように見えて？？？となります。）

ではこのモデルをcoremltoolsで変換するとどうなるか。

```
ValueError: Only channel and sequence concatenation are supported.
```

前の記事でも書いたようにchannel次元かsequence次元でしか接続できないようです。前回は1次元目か3次元目かな、と言っていたのですが厳密には違って

- 全体で1次元のTensorの場合は1次元目（単純接続）
- 全体で2次元のTensorの場合は1次元目（時系列の1次元データ、というイメージ）
- 全体で3次元のTensorの場合は3次元目（画像とみなした時のチャンネル次元）

のようです。なので3次元データに対して「1次元目は時系列として扱うから！」と強く主張してもcoremltoolsは受け入れてくれません。

## Permuteを使ってみる
Permuteとは聞き慣れない単語かもしれませんが、要するに転置です。厳密には3次元以上のTensorに対しては転置とは言いませんが、次元の入れ替えですね。[ドキュメント](https://keras.io/ja/layers/core/#permute)を見ればなんとなくわかると思います。

今回は2次元の配列をConcatenateしてcoremltoolsに認めてもらいましょう。

```permute.py
from keras.layers.core import Permute

model_input = [Input(shape=(10,8)),Input(shape=(10,8))]
permuted = [Permute((2,1))(_i) for _i in model_input]
concate = Concatenate(axis=1)(permuted)
permuted2 = Permute((2,1))(concate)
model = Model(inputs=model_input, outputs=permuted2)
```

こんな感じです。 `Permute` の引数は○次元目を×次元目に入れ替える、という×の方の数字を書きます。 `Concatenate` と同様にバッチ次元が0なので実質1から書きます。

前の記事からそうなのですが、coreMLを使うつもりのない（というかこれらの知見がない）方がこのモデルを見たら本当に意味がわからないでしょうね。なんでひっくり返してつなげてひっくり返しているのかと…

とにかくこれでちゃんと1次元目でConcatenateできました。さて、coremltools先生に見てもらいましょう。

```
NotImplementedError: Supports only 3d permutation.
```

（＃＾ω＾）ﾋﾞｷﾋﾞｷ

ま、まぁはっきりと解決策を提示してくれているので良しとしましょう。3次元のPermuteしか受け入れられないそうです。
では3次元にしてあげようじゃないですか。

```permute.py
model_input = [Input(shape=(10,8)),Input(shape=(10,8))]
permuted = [Permute((1,3,2))(Reshape((10,8,1))(_i)) for _i in model_input]
concate = Concatenate(axis=3)(permuted)
permuted2 = Reshape((10,16))(Permute((1,3,2))(concate))
model = Model(inputs=model_input, outputs=permuted2)
```

ここまでやってあげることでなんとかcoremltools先生に認められました。おめでとうございます。

パッと見何をしているのか意味がわからなくなってきていますが、

- `Permute` するために3次元化する（チャンネル数1の画像に見立てる）
- `Concatenate` したい次元を3次元目（チャンネル次元）に入れ替える
- `Concatenate` をチャンネル次元（axis=3にしています）で行う
- `Permute` して次元を元に戻す（モデルの形によってはここを省いてReshapeそのまましても良い気もします）
- `Reshape` して無駄な次元を消す

こんな感じです。ここまで理解してこれた方はだんだんcoreMLと仲良くなれて来たんじゃないでしょうか。

# まとめ
今後もcoremltools先生の機嫌を損ねる事があったりその機嫌を直してもらう方法が分かったら追記するか別記事にして投稿したいと思います。

というか、チュートリアル的なモデルを少しでも外れたものを作ろうという人はあんまりいないんでしょうか…
公式のGithubのIssueも現時点で十数個しかないですし、英語記事を含めてもあんまりこのような解決策を提示している人が見つかりません。coreMLみんな使ってないのかな。。

ググり方が悪いのかもしれないので、おすすめの情報の探し方があるよーって方や自分も同じ状況ですーって方がいたら是非協力しましょう。
AWS LambdaでParamikoを使う際にエラー

# デプロイパッケージ作成環境
- Amazon Linux
http://yuji.wiki/index.php?Vagrant%A5%ED%A1%BC%A5%AB%A5%EB%B4%C4%B6%AD%B9%BD%C3%DB%A1%CAAmazon%20Linux%A1%CB

- python 2.7.12

- virtualenv

# デプロイ
以下を1つのzipにまとめる
- lib/python2.7/site-packages
- lib64/python2.7/site-packages
- その他実行に必要なファイル

# 発生したエラー
libffi-ce7fcc27.so.6.0.4が存在しないと言われる。

```
START RequestId: 41c696bf-d590-11e7-9db7-39e26d6c6a84 Version: $LATEST
Unable to import module 'handler': libffi-ce7fcc27.so.6.0.4: cannot open shared object file: No such file or directory

END RequestId: 41c696bf-d590-11e7-9db7-39e26d6c6a84
REPORT RequestId: 41c696bf-d590-11e7-9db7-39e26d6c6a84	Duration: 0.46 ms	Billed Duration: 100 ms 	Memory Size: 128 MB	Max Memory Used: 27 MB	
```

# 対処
該当のファイルは

```
lib64/python2.7/site-packages/.libs_cffi_backend/libffi-ce7fcc27.so.6.0.4
```
に存在している。このファイルをプロジェクトのルートに配置してデプロイ用zipを作成すればいい。

Lambdaの環境変数 LD_LIBRARY_PATH でデプロイパッケージ内のpathを追加する方法がわからなかった…
CloudFront + S3 でのディレクトリアクセス

#前置き
S3にアップロードしたコンテンツをウェブ公開するときに、CloudFrontを噛ませるのはよくある構成です。S3をStatic Website Hostingで直接公開する場合とくらべて、

 - CDNの機能が使える
 - WAFが使える（CloudFrontにWAFをアタッチした場合）
 - 独自ドメインのhttps構成が使える（CloudFrontにssl証明書を付与）
 - アクセスはCloudFront経由に集約されるため、CloudFrontのアクセスログでアクセス状況を分析できる

といったメリットがあります。しかし、Static Website Hosting で使える index document が使えなくなるという問題が。

#S3のindex documentとは
たとえば http://hoge.jp/fuga/ というふうにディレクトリに対するリクエストがきたときにどのファイルをレスポンスするか、を設定できる機能です。
[公式ドキュメント](http://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/IndexDocumentSupport.html)

CloudFrontにも[Default Root Object](http://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/DefaultRootObject.html)という似た機能がありますが、これはルートディレクトリに対するリクエストにのみ有効で、サブディレクトリへのアクセスには機能しません。

解決策として手っ取り早いのは、オリジンのS3のStatic Website Hostingを有効にすることです。
[参考ページ](https://qiita.com/naoiwata/items/3c6626cbeacbb44d4aa8)

が、「S3バケットは直接パブリック公開したくない！」という場合にどうするか。

#案1 Lambda@Edge
1. CloudFrontにディレクトリアクセス用のBehaviorsを追加。
既存Behaviorsと同じS3をオリジンに。PathPatternは `/*/`とすることで、サブディレクトリへのアクセスがこのBehaviorsに割り当てられます。既存Behaviorsよりも順位を上げておくのを忘れないように。
2. 追加したBehaviorsにLambda@Edgeをアタッチ。

```index.js
'use strict';
 
exports.handler = (event, context, callback) => {
    const request = event.Records[0].cf.request;
    request.uri = request.uri.replace(/\/$/i, '/index.html');
    callback(null, request);
};
```
サブディレクトリ(`/*/`)へのリクエストはLambda@Edgeによって`/*/index.html`へのリクエストに置き換えられます。
手順1は必須ではなく、既存のBehaviorsにLambda@Edgeをアタッチしてもいいんですが、その場合は全リクエストに対してLambda@EdgeがCallされてしまうので、ちょっと無駄かなと思います。ルートディレクトリへのアクセスはCloudFrontのDefault Root Objectの設定でカバーします。

#案2 ダミーのS3バケットからリダイレクト
*Lambda@Edgeがリリースされるまではこの案が第一候補だったかもしれませんが、今となってはLambda@Edge案一択でいいかも…。Lambda@Edgeのコストが許容できない場合や、ディレクトリ構成が単純な場合は引き続きこの案も有効かと思います。*
1. 空っぽのダミーS3バケットを作成。このバケットはStatic Website Hostingの設定を有効化。
2. CloudFrontにディレクトリアクセス用のBehaviorsを追加。ダミーバケットをCloudFrontのオリジンに。PathPatternは `/*/`。
3. ダミーバケットに[リダイレクトルール](http://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/how-to-page-redirect.html#advanced-conditional-redirects)を設定。リダイレクトルールは正規表現が使えないので、リダイレクトさせたいサブディレクトリ名をすべて指定する必要があります。
なお、この案はダミーで空っぽとはいえs3のパブリック公開が必要です。
Riotの子要素のoptsの参照が変われば再マウントされる

こちらは[Riot.js Advent Calendar 2017](https://qiita.com/advent-calendar/2017/riot)の5日目の記事になります。業務でriotを使う中でハマった細かすぎて伝わらないtipsです。

コンポーネント更新時の挙動が自分のイメージと違っていて、ハマりました。
検証バージョンは`v3.7.4`です。

## 要素のループ
例えば、下記のような要素のループがあったとして、これは配列`datas`の中身を子要素に渡すよく見かけるものです。

```js:
<component each={v in datas} data={v}/>

this.datas = [
	{ value: 0 },
	{ value: 1 }
];
```

このリストのデータを更新したとします。

```js:
this.update({ 
	datas: [
		{ value: 2 },
		{ value: 3 }
	]
});
```

自分の中では、`component`の`update`だけ走って、再マウントはされないイメージでした。


## 実際には再マウントされる
codepenにサンプルを作りました。
子要素に渡すデータを更新しています。
https://codepen.io/kwst/pen/qVgedv

処理の順番としては下記のようになります。
1. randomizeボタンを押す
2. `this.datas`が変更される
3. `component`の`unmount`が呼ばれる
4. `component`の`mount`が呼ばれる

```js:親コンポーネント
<component-template>
  <button onclick={this.randomize}>randomize datas</button>
  <component each={data in datas} data={data}/>
  this.datas = [
    { value: 0 },
    { value: 1 }
  ];
  
  this.randomize = () => {
    this.update({ datas: [
      { value: Math.random() },
      { value: Math.random() }
    ]});
  }
  
</component-template>
```

```js:子コンポーネント
<component>
  <p>component {this.opts.data.value}</p>
  this.on('mount', () => { console.log('mount'); });
  this.on('unmount', () => { console.log('unmount'); });
</component>
```

参照が変わらない時(プリミティブな値の変更)では再マウントは走りませんでした。
https://codepen.io/kwst/pen/POVMdm

ちゃんとコードを読んだわけではありませんが、おそらく渡ってくるデータの参照が変われば別のコンポーネントとする仕様なのかもしれません。

自分のイメージでは、下記のように考えていました。子要素の`shouldUpdate`で更新すべきかどうかをハンドリングするのがスマートかなと思っていたので。
1. randomizeボタンを押す
2. `this.datas`が変更される
3. `component`の`shouldUpdate`が呼ばれで、更新すべきかどうかを子要素側でハンドリングする
4. `shouldUpdate`がtureであれば`component`を更新する

## 再マウントされないようにするには
`3.7.x`から追加された[`key`属性](http://riotjs.com/guide/#key)を追加するだけでOKです。変更したい場合は`key`を変更すれば再マウントされます。リストのデータの一意なidなんかを割り当ててやると良いでしょう。

`datas`の`index`値を`key`に割り当ててみました。

```js:親コンポーネント
<component each={data, i in datas} data={data}　key={i}/>
```

追加したバージョン
https://codepen.io/kwst/pen/EbMVPX

## ちなみにReactでは
ちなみにReactでは再マウントは走りませんでした。ただ自分がReactのメンタルモデルを引きずっていただけです。
https://codepen.io/kwst/pen/Zawgxq
[Reactでも`key`](https://reactjs.org/docs/lists-and-keys.html)を変更すれば再マウントを走らせることができます。
twitterのタイムラインをスクレイピングする

**注意**
Twitter規約的には、スクレイピングだめらしいので、実行しない方向で！
この記事は、無限スクロールサイトのスクレイピングのコツだと思って見て下さいね。

---

TwitterAPIは、過去1週間分までしかデータを取得できません。
しかし、ブラウザでしたにスクロールすると結構なデータがとれます。（おおよそ3ヶ月位？）

どうやってとっているのかを探っていると、以下の記事を発見しました。
https://qiita.com/keitakurita/items/36c4381809c8e0c28a89

なるほど、HTMLの中に取得するツイートのIDとデータが埋め込まれているのか……

```python
# HTMLを解析
import bs4

# ベースURLからデータを取得
url_data = urllib.request.urlopen('https://twitter.com/nnahito')

# HTMLデータを取得
html_data = url_data.read()

soup = bs4.BeautifulSoup(html_data)

# min-positionを抽出
min_position = soup.select('div[data-min-position]')[0].attrs['data-min-position']
```

これで`min_position`に次に取得する番号が取得できます。

というわけで、自分も一からクローラーを作ってみました。
よかったらどうぞ
↓
https://nnahito.com/articles/7
メール操作を爆速化するGmailショートカットキー

# 概要
ショートカットキーを駆使してメール操作を爆速化しよう

# 準備
キーボードショートカットはデフォルトでは無効になっているため、有効に設定する。

1. Gmail画面右上の設定メニューから「設定」を選択
2. 全般 → キーボードショートカット → 「ON」を選択
3. 画面最下部の「設定を保存」を選択

![図2.png](https://qiita-image-store.s3.amazonaws.com/0/128864/040b540a-0bc5-1a2e-4b3c-77edabfb09c7.png)


# ショートカットキー一覧（おすすめ順）
様々なショートカットキーが用意されており、全てを紹介することはできない。
個人的によく使っているショートカットキーを抜粋して下記にまとめる。

| No.       | Key | 操作 |
|:-----------------|:------------------|:------------------|
| 1 | g 次に i | [受信トレイ]に移動 |
| 2 | c | 新規メッセージを作成 |
| 3 | ↑ または ↓ | スレッドを移動 |
| 4 | Enter | スレッドを開く |
| 5 | u | スレッドリストに戻る |
| 6 | k / j | 新しい／ 古いスレッドに移動 |
| 7 | x | スレッドを選択 |
| 8 | #(shift + 3) | メールを削除 |
| 9 | s | スターをつける |
| 10 | l | ラベルをつける |
| 11 | e | アーカイブ |
| 12 | a | 返信 |
| 13 | shift + f | 転送 |
| 14 | z | 直前の動作を取消 |
| 15 | / | 検索 |
| 16 | Ctrl + Shift | 送信 |
| 17 | <font color=red>?(Shift + /)</font> | <font color=red>ショートカットキーのヘルプを開く</font>|

# ショットカットキーを覚えるポイント
- 全てを覚えようとするのではなく、自分がよく行う操作を覚えるとよい。
- 自分オリジナルのチートシートを作り、日々更新する。
AtomなどのエディタでCWLを書く

# Atom で CWL を書く話

[CWL Advent Calendar 2017 \- Qiita](https://qiita.com/advent-calendar/2017/cwl) の、第２３日目の話です。

*が、先に公開しておきます。
本当は、最初の方で紹介するべきだとおもうのですが、
なぜかこの日になってしまいました。*

Atom で、[Common Workflow Language](http://www.commonwl.org/) のファイルを編集するためのプラグインを幾つか作りました。

## ハイライタ

キーワードをハイライトするようにしました。

[language\-cwl](https://atom.io/packages/language-cwl)

[見た目については、補完のところをみてください](https://qiita.com/manabuishiirb/items/f6f1c7f74a7ae0adc775#%E8%A3%9C%E5%AE%8C)

### 息抜き

つい最近、以下のようなプラグインも公開されていました。

[language\-cwl\-atom](https://atom.io/packages/language-cwl-atom)

自分のパッケージしかないだろうとおもって、atomでcwlと検索したところ見たことがないパッケージがでてきてすごくおどろきました。


こちらプラグインの作者方は、yamlのハイライタを元につ
くったようです。


結構よさそうなので、いくつか取り込んでみたいという話を作者のかたと [GitterのCWLチャンネル](https://gitter.im/common-workflow-language/common-workflow-language) で、しました。
ソースコードがすぐみれたり、コミュニケーションが比較的容易にとることもできるあたり、OSSのなかなか良い側面にふれたきがしています。

## 補完

Autocomplete-plus を使って作りました。

* [autocomplete\-cwl](https://atom.io/packages/autocomplete-cwl)

![autocomplete](https://i.github-camo.com/04540b6302991dc21519a6b88c06765b72c1e45d/68747470733a2f2f7261772e67697468756275736572636f6e74656e742e636f6d2f6d616e61627569736869692f6175746f636f6d706c6574652d63776c2f76302e352e302f6175746f636f6d706c6574652d63776c2e676966)

### 主な機能

* キーワードの補完
* Biocontainers のコンテナ(3000以上)を補完

### 息抜き

このアニメーションGifは、
[Cockos Incorporated \| LICEcap](https://www.cockos.com/licecap/) というソフトで作りました。


## linter

* [linter\-cwl](https://atom.io/packages/linter-cwl)

`schema_salad` というツールを使うと CWL のファイルが正しいかをチェックできるので、この結果を使って、Atom上で、エラーがないかをチェックできるようにしました。

* [common\-workflow\-language/schema\_salad: Semantic Annotations for Linked Avro Data](https://github.com/common-workflow-language/schema_salad)

オプションとしては、`schema_salad` と、`schema_salad` で、使う定義ファイルを指定します。

# emacs で、CWLを書く

Advent Calendar 9日目を参照

# Visual Studio Code で、CWLを書く

ハイライタだけいまはあります

[vscode\-cwl \- Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=manabuishii.vscode-cwl)


# vim で、CWL を書く

ハイライタだけいまはあります

[manabuishii/vim\-cwl: CWL support in Vim](https://github.com/manabuishii/vim-cwl)
pythonでexcelファイル処理まとめ

# はじめに
pandasを使ってインデックスとカラムが整理されていないexcelファイルの処理をする機会があったので、その方法をまとめます。
excelを処理する方法としてopenpyxlなんてのもありますが、.xlsファイルを読み込めなかったり、結局DataFrameの方が処理しやすいのでpandasを使用しています。

# ファイル読み込み
```py
import pandas as pd
file = pd.ExcelFile(filename, encoding='utf8')
```
encodingの指定はよしなに

# シート読み込み
```py
sheet_df = file.parse(sheet_name, header=None)
```
header=Noneは、最初の一行目をカラムとして読み込まないという意味です。カラムが整理されているデータならこちらのオプションはいらないかもしれません。

## シート名の取得
全てのシートを利用したい場合は、file.sheet_namesでsheetの名前の配列が取得できるので、以下のように全てのシートをdfに格納することもできます。

```py
sheet_names = file.sheet_names
for i, name in enumerate(sheet_names):
    sheet_df[i] = file.parse(name, header=None)
```

## 結合されたセルの扱い
また、結合されたセルでは、結合セル中の左上のセルのみデータが入っており、他はNaNとして扱われます。
例えば、以下のようなセルをpandasで読み込むと、
<img width="300" alt="スクリーンショット 2017-12-04 11.34.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/185134/d1a32147-7f4f-e154-7319-9dbb41549672.png">
全て結合セル中の最も左上のセルにのみデータが入っているとみなされ、次のようなDataFrameになります。
<img width="124" alt="スクリーンショット 2017-12-04 11.43.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/185134/57f5c6e1-271d-d0f9-7085-7521eab0d090.png">


# シートのデータ取得
```py
# 以下の返り値はseries
# n行目取得
sheet_def.iloc[n]
# n列目取得
sheet_def.iloc[:, n]

#　m行n列のデータ取得
sheet_df.iloc[m, n]
```
この他、ilocを使えばスライスのように行と列を指定できます。

# シートのデータ処理
```py
# 行ごとに処理
for i, row in sheet_def.iterrows():
    print(i, row)

# 列ごとに処理
for i, col in sheet_def.iteritems():
    print(i, col)
```

# おわりに
pandasで読み込みさえすればあとはDataFrameとして扱えるので便利です。
Rails 5.2.0.beta2のバグ回避方法

# 環境
- ruby 2.4.2p198
- rails 5.2.0.beta2

# エラー1: 「Uncaught EvalError: Refused to evaluate a...」

参考: [【動画付き】Rails 5.1で作るVue.jsアプリケーション ～Herokuデプロイからシステムテストまで～](https://qiita.com/jnchito/items/30ab14ebf29b945559f6)

上記の記事を参考に、`5.2.0.beta2`でアプリを作ってみたのですが、http://localhost:3000 にアクセスしたところで 「Uncaught EvalError: Refused to evaluate a...」 というJavascriptのエラーが発生しました。

## 解決法
参考: https://github.com/rails/rails/issues/31298#issuecomment-348513130

`config/initializers/content_security_policy.rb`に以下のように追記すれば直ります。

```config/initializers/content_security_policy.rb
Rails.application.config.content_security_policy do |p|
  ...
  # @see: https://github.com/rails/rails/issues/31298#issuecomment-348513130
  if Rails.env.development?
    p.connect_src :self, :https, 'ws://localhost:3035', 'http://localhost:3035'
    p.script_src :self, :https, :unsafe_eval, :unsafe_inline
  else
    p.script_src  :self, :https, :unsafe_eval, :unsafe_inline
  end
```




# エラー2: 「You are using the runtime-only build of Vue where...」

以下のJavascriptのエラーが表示される。
> [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

## 解決法

参考: [[Rails5.1][Webpacker][Vue.js] 動かそうとするとコンポネントエラーになる問題](https://qiita.com/taaatk/items/3137659e69b82d10cfca)

`config/webpack/development.js`にaliasの設定を追加すれば直ります。

```config/webpack/development.js
const environment = require('./environment')

module.exports = Object.assign({}, environment.toWebpackConfig(), {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
})
1ラインの簡単な画像エッジ検出フィルタ

![image.png](https://qiita-image-store.s3.amazonaws.com/0/99921/4a5369bc-7c76-c7c5-56e9-918f661b84f7.png)

画像処理。OpenCV が出回り始めたころに中身のソースを見てギョッとしたがその内部の複雑さとは裏腹に Python からも容易に使えることが受けたのか確実にその地位を築いた。いかに簡便に使えるかというのは広まるうえで重要なのだろう。

Polyphony でも画像処理をしたい。1ラインの簡単な画像エッジを検出するフィルターを作ろう。

ここでは 9bit のデータを入出力する。最上位ビットはラインの終わりを指す。8bit が実際のピクセル。3x3 のフィルタだとラインバッファを持たないといけないがこの簡単なフィルタは、前後のピクセル差でエッジを検出する。最初は 1x3 にとおもったのだが、こちらの方がよいと思ってそう変えた。

```python:line_edge.py
from polyphony import testbench
from polyphony import rule
from polyphony import module
from polyphony.typing import bit8, bit9
from polyphony.io import Queue
from polyphony import is_worker_running
from polyphony.timing import clksleep


@module
class line_edge:
    def __init__(self, width):
        self.img_in_q  = Queue(bit9, 'in',  maxsize=4)
        self.img_out_q = Queue(bit9, 'out', maxsize=4)
        self.append_worker(self.worker)

    def worker(self):
        with rule(scheduling='pipeline'):
            last_pixel:bit8 = 0
            out_eol_pixel:bit9 = 0
            while is_worker_running():
                eol_pixel:bit9 = self.img_in_q.rd()
                eol:bit9 = eol_pixel & 0x100
                pixel:bit8  = eol_pixel & 0xFF

                out_eol_pixel = eol | (pixel - last_pixel if (pixel > last_pixel) else last_pixel - pixel)

                self.img_out_q.wr(out_eol_pixel)
                last_pixel = 0 if eol else pixel

@testbench
def test(m):
    line_buf = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100 | 0x100]
    for p in line_buf:
        m.img_in_q.wr(p)
        print(m.img_out_q.rd())

m = line_edge(1920)
test(m)
```

ここで注目してほしいのが pipeline を指定していること。python の with をつかって pipeline 化が（次のバージョンの0.3.3 以降あるいは現行の devel）出来る。

```python:with
with rule(scheduling='pipeline'):
            ....
            ....
```

画像処理というからにはちゃんと画像処理しないといけない。Lenna の画像を処理してみよう。テストベンチで PIL は使えないので list を使う。

```python:testbench
@testbench
def test(m):
    i = 0
    eol = 0
    for p in LENNA:
        if (i % 400) == 399 :
            eol = 0x100
        m.img_in_q.wr(eol | p)
        eol = 0;
        print(m.img_out_q.rd())
        i += 1

m = line_edge(400) # 400x225 (LENNA)
test(m)
```
PyObjC で Modified NFD を再現する

macOS には Python 2.7 が標準インストールされており，そこには PyObjC というブリッジング機構もデフォルトで導入されています。[PyObjC](https://pythonhosted.org/pyobjc/) は，Objective-C の文法を Python にブリッジすることで，Cocoa や CoreGraphics といった macOS の API に Python から直接アクセスすることができるようにするものです。

以前の記事 [SwiftでのUnicode正規化問題 続編：HFS+との整合性](https://qiita.com/doraTeX/items/219d329e8a773e715631) で紹介した HFS+ の Modified NFD の挙動は，macOS の API である Core Foundation の [`CFStringGetFileSystemRepresentation`](https://developer.apple.com/documentation/corefoundation/1542019-cfstringgetfilesystemrepresentat?language=objc) という関数を使うことによって再現できます。

そこで，PyObjC を使って，Modified NFD を実現してみましょう。

```modifiedNFD.py
# -*- coding: utf-8 -*-
import CoreFoundation as cf

def modifiedNFD(str):
	maxLen = cf.CFStringGetMaximumSizeOfFileSystemRepresentation(str)
	result = cf.CFStringGetFileSystemRepresentation(str, None, maxLen)
	if result[0] == True:
		return result[1].rstrip('\x00').decode('utf-8')
	else:
		return None

## テスト
str = u'\u795E/\uFA19/\u795E\uDB40\uDD00' ## CJK統合漢字，CJK互換漢字，CJK互換漢字+異体字セレクタ（サロゲートペアに分解）

print str # original
print modifiedNFD(str)

## 比較：通常のNFD正規化
import unicodedata
print unicodedata.normalize('NFD', str)
```

これを macOS 標準の Python 2.7 で実行します。

```shell-session
$ /usr/bin/python modifiedNFD.py
```

すると，実行結果は次のようになります。

<img width="94" alt="god.png" src="https://qiita-image-store.s3.amazonaws.com/0/41739/e182539d-a542-1aaa-dc1b-718a953ba870.png">

# ワンライナー化

自分は，この Python スクリプトをワンライナー化することで Bash のシェル関数にしています。

```bash
function modifiedNFD() { /usr/bin/python -c "from __future__ import print_function, unicode_literals;import sys;import CoreFoundation as cf;str=b'$1'.decode('utf-8');maxLen=cf.CFStringGetMaximumSizeOfFileSystemRepresentation(str);result=cf.CFStringGetFileSystemRepresentation(str, None, maxLen);result[0] and (print(result[1].decode('utf-8').rstrip('\x00')));sys.exit(0 if result[0] else 1)"; }
```

すると，コマンドラインで

```shell-session
$ modifiedNFD ほげ神神神󠄀
ほげ神神神󠄀
```

のようにして，気軽に Modified NFD の挙動を確かめることができます。
2017年のハッカソン開催情報まとめ！ - 11月分

2017年11月！

[2017年のハッカソン開催情報まとめ！](http://qiita.com/satoshi0212/items/178c56c3ae28dd4c3252)

# 11月

### [塩尻ハッカソン予選 #MA_2017 求むトガった作品！！](https://mashupawards.connpass.com/event/69145/)
- 11月2日-3日

### [人工知能API使ってみようハッカソン](https://connpass.com/event/69728/)
- 11月3日

### [Moon Light Hack! 月夜の下のハッカソン](https://connpass.com/event/68397/)
- 11月4日-5日

### [RESASハッカソン2017 in 岩手 ～Web・IoTで創る岩手のミライ～](https://opendata.resas-portal.go.jp/contest2nd/hackathon/index.html)
- 11月4日-5日

### [RESASハッカソン2017 in 鳥取 ～Web・IoTで創る鳥取のミライ～](https://opendata.resas-portal.go.jp/contest2nd/hackathon/index.html)
- 11月4日-5日

### [おしゃべりサービス祭りハッカソン #ma_2017 東京予選](https://mashupawards.connpass.com/event/70051/)
- 11月4日-5日

### [RESASハッカソン2017 in 香川 ～Web・IoTで創る香川のミライ～](https://opendata.resas-portal.go.jp/contest2nd/hackathon/index.html)
- 11月11日-12日

### [Facebook AR Studioワークショップ&ハッカソン #ma_2017](https://mashupawards.connpass.com/event/69151/)
- 11月11日-12日

### [月探査ハッカソン](http://moonhack.jp.klab.com/)
- 11月11日-12日

### [オープンデータアイデアソンキャラバン: 日野市](http://opendata-portal.metro.tokyo.jp/caravan2017.html)
- 11月12日

### [RESASハッカソン2017 in 東京 ～Web・IoTで創る東京のミライ～](https://opendata.resas-portal.go.jp/contest2nd/hackathon/index.html)
- 11月18日-19日

### [RESASハッカソン2017 in 愛知 ～Web・IoTで創る愛知のミライ～](https://opendata.resas-portal.go.jp/contest2nd/hackathon/index.html)
- 11月18日-19日

### [avex-xRハッカソン（VR/AR/MR)](https://entertech.connpass.com/event/69545/)
- 11月18日-19日

### [RESASハッカソン2017 in 岐阜 ～Web・IoTで創る岐阜のミライ～](https://opendata.resas-portal.go.jp/contest2nd/hackathon/index.html)
- 11月23日, 12月2日-3日

### [オープンデータアイデアソンキャラバン: 八丈町](http://opendata-portal.metro.tokyo.jp/caravan2017.html)
- 11月25日

### [HACKER WARS～日本一の学生エンジニアを決定するハッカソン･イベント～](https://hackerwars.goodfind.jp/)
- 11月25日-26日

### [VR GameJam in Shimane 2017（仮）](https://chiikiokoshi-vr.connpass.com/event/59623/)
- 11月25日-26日

### [RESASハッカソン2017 in 福岡 ～Web・IoTで創る福岡のミライ～](https://opendata.resas-portal.go.jp/contest2nd/hackathon/index.html)
- 11月25日-26日
numpyのreshape(-1)とは？

[stackoverflow](https://stackoverflow.com/questions/18691084/what-does-1-mean-in-numpy-reshape)の記事で見つけました。

# どういうものか
reshapeの一つのサイズが決まっているとき、もう一方を-1とすると、-1には元の形状から推測された値が入る。(例を見ないと分かりにくい)

# 公式ドキュメント(翻訳)
> 新しい形状は、元の形状と互換性がなければなりません。整数の場合、結果はその長さの1次元配列になります。 1つの形状寸法は-1とすることができる。この場合、値は配列の長さと残りの次元から推測されます。

# 解説
３行４列のnumpy配列があったとします。

```numpy:source_shape.py
z = np.array([[1, 2, 3, 4],
         [5, 6, 7, 8],
         [9, 10, 11, 12]])
z.shape
(3, 4)
```

-1を渡した場合は、行ベクトルになります。この場合は、列サイズが元の形状から推測されて決定されます。

```numpy:row_vector.py
z.reshape(-1)
array([ 1,  2,  3,  4,  5,  6,  7,  8,  9, 10, 11, 12])
```

以下のように、reshape(-1, 2)とすると列数だけが2で決まり、行数は元の形状から推測されて決定されます。

```numpy:reshape.py
z.reshape(-1, 2)
array([[ 1,  2],
   [ 3,  4],
   [ 5,  6],
   [ 7,  8],
   [ 9, 10],
   [11, 12]])
```