OmniAICreator/Qiita-1.07M huggingface dataset:
Ionic3に入門してみる～その4 Angular4チュートリアル②～

# ヒーローエディター
## heroes コンポーネントを作成する
Angularでのコマンドは下記。
>ng generate component heroes
これに対応するionicコマンドは下記。
ionic generate component heroes

実行してみると下記のようにheroesフォルダができているのがわかる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/196422/a3054c23-e19f-44ab-8f0f-8d931b2ab904.png)

heroes.component.tsではなく、heroes.tsというファイル名で作成されるようだ。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/196422/ea1e973e-3d65-e3d2-83a1-471f1795dae3.png)

>CLIは3つのメタデータプロパティを生成しました:

>1. selector— コンポーネントのCSS要素セレクタ
>1. templateUrl— コンポーネントのテンプレートファイルの場所
>1. styleUrls— コンポーネントのプライベートCSSスタイルの場所

ionicで作成されたtsファイルでは、styleUrlsは指定されていませんでした。
自分で指定しなければダメなのでしょうか？
答えはNoのようです。
https://github.com/ionic-team/ionic-cli/issues/1196
少し古いですが、ここのやり取りを見る限り、ionicは暗黙的にhtmlなどと同階層にあるscssファイルをビルド時に取り込むようです。
後ほど少し試してみましょう。

ここのAngular4のチュートリアルと違って、いくつかionicでは変更する箇所があるので、解説。
理論や理屈は置いておいて、下記のように設定してみてください。(赤線部分を注意してみてください。)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/196422/59b9a490-3921-d96c-428a-dc456d2d6fd8.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/196422/6b620342-8410-1099-5e7b-f9131f0d4079.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/196422/436e1345-ef9c-e3d7-3cc6-0db8dc9f078a.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/196422/8a0d2f23-5c0b-3f49-4724-38d2156f6df3.png)

ここまでやってあげると、下記のように表示されると思います。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/196422/787e0a2f-7e00-1d1e-19cd-7c4bc53150fb.png)

Angular4チュートリアルには、上記の変更のうち、app.module.tsに対する変更が載っていません。(このページの後ろの方で出てきます)
そこでは、下記のように書かれていました。

>アプリケーションが動作したのは、Angular CLI がHeroesComponentを生成したときに、AppModuleでそのコンポーネントの宣言を行っていたからです。
>src/app/app.module.tsを開き、先頭付近でHeroesComponentがインポートされているのを見つけてください。

つまり、ionicとAngularのCLIで動作が違う？(ホント？)のですね。
とは言ってもAngularの方に動作が統一されるような気もするので一応この記事を書いているときのionicのversionを載せておきます。

ionic　-version
3.20.0

一旦長くなったのでここまで。
次回も同じ章を読んでいきます。
ネストされたIEnumerableを展開する

# IEnumerable\<IEnumerable\<T\>\>をIEnumerable\<T\>にしたい

DirectoryInfoをもとにFileInfoを取得するとネストされたFileInfoのIEnumerableを取得してしまいます。
その場合、どのように展開するかについてです。

## コード

```cs
using System;
using System.IO;
using System.Linq;

public static void Main(string[] args)
{
    //ディレクトリ名が入ったテキストファイルからディレクトリ情報を取得し、IEnumerable<DirectoryInfo>を生成
    var lines = File.ReadLines("FileName");
    var directories = lines.Select(line=>new DirectoryInfo(line));

    //上で作成したディレクトリ情報集をもとに、ネストされたファイル情報集を生成する
    //このときnestedFilesの型はIEnumerable<IEnumerable<FileInfo>>である
    var nestedFiles = directories.Select(directory=>directory.EnumerateFiles());
}

```

## 展開方法
種明かしでもなんでもありませんが、単純にyield returnを使うだけです。
下記メソッドで解決します。

```cs
static IEnumerable<FileInfo> Flattening(IEnumerable<IEnumerable<FileInfo>> source)
{
    foreach(var files in source)
    {
        foreach(var file in files)
        {
            yield return file;
        }
    }
}
```

## 追記
コメントからSelectMany使えばいいんじゃない？　という旨をいただきましたが……可能でした。
ネストされている要素を取り出す感じで使えるみたいですね。Main部分に適用するなら次のように使う感じかな
[MSDN - Enumerable.SelectManyメソッド](https://msdn.microsoft.com/ja-jp/library/bb534336(v=vs.110).aspx)

```cs
using System;
using System.IO;
using System.Linq;

public static void Main(string[] args)
{
    //ディレクトリ名が入ったテキストファイルからディレクトリ情報を取得し、IEnumerable<DirectoryInfo>を生成
    var lines = File.ReadLines("FileName");
    var directories = lines.Select(line=>new DirectoryInfo(line));

    //上で作成したディレクトリ情報集をもとに、ネストされたファイル情報集を生成する
    //このときnestedFilesの型はIEnumerable<IEnumerable<FileInfo>>である
    var nestedFiles = directories
        .Select(directory=>directory.EnumerateFiles());

    //ネストされたファイル情報集を平坦化する。
    var flatternFiles = nestedFiles.SelectMany(file=>file);
}

```
DynamoDBの基礎まとめ ― 料金体系とプロビジョニング

DynamoDBはAWSのフルマネージト型NoSQL データベースサービスで、高い拡張性、信頼性を持つそうです。ただ料金体系がややこしく、WCU、RCU等初期どうプロビジョニングするかも私のような初心者にはハードルが高いようです。実際使ってみて、考察をしてみました。


##DynamoDBの料金体系

DynamoDBはプロビジョニングしたリソース分に対する課金する仕組みとなり、詳細は
[料金 - Amazon DynamoDB（NoSQLデータベース）｜AWS](https://aws.amazon.com/jp/dynamodb/pricing/)にあります。
以下は東京リージョンの料金をベースにまとめました。

|課金リソース|料金|課金単位|
|---|---|---|
|書込キャパシティーユニット（WCU）|0.000742USD/WCU|1時間料金（1WCUは1秒間に1回の書き込み）|
|読取キャパシティーユニット（RCU）|0.0001484USD/RCU|1時間料金（1WCUは1秒間に1回の読み取り）|
|ストレージ容量|0.285USD/GB|月額（毎月最初の 25 GB の保管は無料）|
|データ転送量|0.14USD/GB|データ転送受信（イン）は無料、アウト時のみ課金、1 GB/月まで無料|

##プロビジョニングするスループットの課金特徴
書込キャパシティーユニット（WCU）と読取キャパシティーユニット（RCU）はプロビジョニングしたリソース分に対して課金します。実際の書き込みと読み取りが発生しなくても利用金は発生しますので要注意です。つまり、トランザクションのピーク値に対してプロビジョニングしますと、高くつきますので、SQSの活用による平準化を検討する必要があります。

WCU=5, RCU=5のテーブルを作った時の課金は以下となり、合計は大体3.2USD(1ヶ月あたりのキャパシティーユニット料金)

|課金リソース|料金|課金単位|1キャパシティーユニット制限※1|
|---|---|---|---|
|書込キャパシティーユニット（WCU）|0.000742USD × 5キャパシティーユニット × 24時間 × 30日 = 2.67USD|1時間料金（1WCUは1秒間に1回の書き込み）|1書込は1KBまで|
|読取キャパシティーユニット（RCU）|0.0001484USD × 5キャパシティーユニット × 24時間 × 30日 = 0.53USD|1時間料金（1RCUは1秒間に1回の読み取り※2）|1読取は4KBまで|

* ※1 2KBの書き込みは2WCUとカウント、8KBの読み取りは2RCUとカウント、かつ1項目(行)サイズが1KBより小さい場合も1KBとカウントします。
* ※2 強い整合性（Strongly consistent）に対して1RCUは1秒間に1回ですが、結果整合性（Eventually consistent）の場合、1RCUは1秒間に2回の読み取りができます。半額ということですね。

**DynamoDBの料金とプロビジョニングは読み書きする項目のサイズと直に相関するので、サイズの見極めが重要です。**

##DynamoDB項目サイズの算出方法
DynamaDBはKey：Value形式のNoSQLデータベースなので、項目サイズも単にValue（属性値）だけではなく、Key（属性名）のサイズも含める必要があります。
[項目サイズおよびキャパシティーユニットの消費](https://docs.aws.amazon.com/ja_jp/amazondynamodb/latest/developerguide/CapacityUnitCalculations.html) を参考

実例で計算してみます。
itemid=1（数値）の1項目ストレージサイズと
itemid=1（数値）、cn=测试（文字）、en=test（アルファベット）、jp=テスト（文字）の1項目スト―レージサイズを見てみます。
![image0.png](https://qiita-image-store.s3.amazonaws.com/0/191079/37a047cc-7c03-e9fa-f9eb-2aa719396501.png)

|項目|属性名|属性バイト数|属性値|属性値バイト数|合計バイト数|説明|
|---|---|---|---|---|---|---|
|itemid=1|itemid|6 bytes|1|2 bytes|8 bytes|数字属性値のバイト数計算は、（有効桁数 2 あたり 1 バイト）+（1 バイト）|
|cn=测试|cn|2 bytes|测试|6 bytes|8 bytes|1中国語漢字3バイト（UTF8エンコード）|
|en=test|en|2 bytes|test|4 bytes|6 bytes|1英文字1バイト（UTF8エンコード）|
|jp=テスト|jp|2 bytes|テスト|9 bytes|11 bytes|1日本語漢字3バイト（UTF8エンコード）|
**読み取りの計算はすべての項目サイズを合計し、4KB境界に切り上げます。**

##考察まとめ
[DynamoDB Black Belt Online Seminar 2017](https://www.slideshare.net/AmazonWebServicesJapan/20170809-black-belt-dynamodb) にはDynamoDBのほぼすべてがまとまっています。147ページと非常に長いですが、一通り読めばDynamoDBを制覇できます。

次回はCloudWatchを使って、読取（RCU）や書込（WCU）の実消費を実機検証行います。
PendingIntentとは（一言でいうと）（初心者用）

newしたIntentを、直ちに発行するのではなく、ボタンを押されたタイミングで発行するのに利用する。
主に、Notificationをタップしたとき、Notificationを削除したときにIntentを起動したい場合に使用する。
MacBookProのTouchIDでsudoできるようにする

[追記20190224]
Mojaveだとうまくいかない感じなので、なんか対策方法ないか探してます。

-----


どうも``/etc/pam.d/sudo``に``auth sufficient pam_tid.so``を追記すれば良いらしい。

~~そんなわけで実際に追記しましょう。viでサクッと。~~
こうすれば追記も一発。

```sh:terminal
sudo sh -c "echo 'auth sufficient pam_tid.so' >> /etc/pam.d/sudo"
```

当然ながらsudoでないと書き換えることの出来ないファイルなので、人生最後のパスワードが必要なsudoを噛みしめつつパスワードをたたき込んで編集します。

出来たらsourceとかサービスの再起動とかも叩かずに適用されているので、実際に試してみましょう。

![Apr-21-2018 20-49-01.gif](https://qiita-image-store.s3.amazonaws.com/0/61912/798bce35-80a7-2e93-a22b-ae26951ac4ee.gif)


あとはウィンドウが出てきたら指乗せるだけです。クッソ楽。素敵。デフォルトでやっといてくれよ感。
AudioKitフレームワークを導入する

XcodeにAudioKitフレームワーク導入に手こずったのでメモしておきます
[AudioKitサイト](https://audiokitpro.com/audiokit/)


Cocoapodsは導入ずみ前提で箇条書きしていきます


1. XcodeでSingleViewのプロジェクトに適当に名前をつけ立ち上げます
2. 一度プロジェクトを閉じます
3. ターミナルを起動
4. プロジェクトのあるフォルダのメニューをだしaltを押すと「”AudioKitImport”をコピー」の部分が「”〜”のパス名をコピー」に変わるのでコピーする
<img width="316" alt="スクリーンショット 2018-04-21 20.24.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/56822/a87a43c2-d5fa-10d2-6e94-e3b52e70e4ca.png">

5. ターミナルで

```terminal
cd 先ほどコピーしたアドレスを貼り付け
pod init
```

6.プロジェクトのあるファイルにpodfileができているので立ち上げ


```terminal
target 'プロジェクトのあるフォルダ名' do
  use_frameworks!
pod 'AudioKit', '~> 4.2.3'

end
```
と変更

7.ターミナルに戻り

```terminal
pod 'AudioKit', '~> 4.2.3'
pod install
```
これでAudioKitフレームワークは導入完了です！

8.プロジェクトフォルダに戻り通常のプロジェクトアイコンではなくworkspaceアイコンから開きます
9. ViewControllerにAudioKitをimportしてサンプルコードを書いてiPhoneにビルドすれば完了です！

ピーってなります！

```swift:ViewController
import UIKit
import AudioKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        let oscillator = AKOscillator()
        oscillator.amplitude = 0.1
        AudioKit.output = oscillator
        try! AudioKit.start()
        
        oscillator.start()
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    
}

```
Ubuntuでもラーメンタイマー

Ubuntuでも即興でラーメンタイマを使いたい。

## やり方
まず`at`コマンドをインストールしておく

```sh
$ sudo apt install at
```
あとは`notify-send`するだけ！

```sh
echo 'notify-send "カップ麺ができました"' | at now + 3 minutes 
```
便利ね。
Composing async functions

``` javascript
const composeAsync = (...funcs) =>
  arg => funcs.reduceRight(async (acc, fn) => fn(await acc), arg);


async function double(v) {
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log(v);
  return v * 2;
}

composeAsync(double, double, double)(1)
  .then(console.log, console.error);
```

- The reducer returns a Promise. So getting a value from the `acc` have to use the `await` keyword.
- An initial value of the `acc` may be not a Promise. But it is not a problem, because the `await` keyword can accept a value other than a Promise.
【しずおかアプリ部】活動ログ　第49回

![しずおかアプリ部2.jpg](https://qiita-image-store.s3.amazonaws.com/0/88105/ee800648-fa25-1829-20c3-bad9c2055d35.jpeg)

##■公式サイト##
[http://monolizm.com/shizuoka-app](http://monolizm.com/shizuoka-app)
「Slack」も利用しています。 shizuapp で検索し、ご参加ください。

##◾️参加申し込み##
しずおかアプリ部への参加申し込みは[こちら](https://shizuoka-app.connpass.com/)から

##■タイトル##
第４９回


##■開催日##
２０１８年４月２１日（土）　１６：００～１８：００


##■参加者##
１３名


##■活動内容（概要）##
・菅原プレゼン「Unity始めるよ　〜ProBuilderでステージを作ろう〜」
・部員さんプレゼン「ゲーム企画の相談」


##■活動内容（詳細）##

【実演・プレゼン】



**・菅原プレゼン「Unity始めるよ　〜ProBuilderでステージを作ろう〜」**

　ProBuilderは、3D モデリングツールとレベルデザインツールのハイブリッドツール。
　直感的な操作でステージ作成ができる。
　３Dモデリングツールが扱えない人（扱いたくない人も）や、ささっとステージを作りたい人におすすめ。
　何より、Unity内で完結できるのが何よりの強み。

　モデリング、色付け、UV設定などかなり細かいことができる。
　基本的な機能で簡単にステージなら作成可能。
　作り込まれたツールなので、頑張って覚えれば本格的なステージも作成可能。
　ProBuilderを使って作ったステージを採用するゲームも多い。

　![スクリーンショット 2018-04-21 20.07.46.png](https://qiita-image-store.s3.amazonaws.com/0/88105/6aa80e07-7e7f-823a-fac3-9ee1f45c677f.png)
![スクリーンショット 2018-04-21 20.07.38.png](https://qiita-image-store.s3.amazonaws.com/0/88105/8782bca3-e700-f639-2f8a-2d5cb817367e.png)


　 [資料](http://monolizm.com/sab/pdf/第49回_プレゼン資料(〜ProBuilderでステージを作ろう〜).pdf)　

<hr>


**・　部員さんプレゼン「ゲーム企画の相談」**

　２つのゲーム企画の相談。
　企画内容はここでの紹介を控えるが、女子向けゲームの企画。
　１つは、パズル要素が強いゲームで、推しキャラを使ったゲーム。
　簡単操作でキャラも可愛いので、女子人気高そうです。
　もう１つは、腐女子向けのVRゲーム。
　その中で３大オタク女子分類という分類を解説いただいた。
　ゲームの方は今までに聞いたことがない内容で、うまくPRできればバズる可能性大。
　腐女子の心理が難しくも面白く、みんな悩みながらアイディアを考えていた。

![スクリーンショット 2018-04-21 20.11.16.png](https://qiita-image-store.s3.amazonaws.com/0/88105/ed13ba47-47eb-d0c7-782a-1042dc6ec5ad.png)

<hr>


**・最近の話題の技術ニュース、告知**
・AmazonのBaaS、GameSparksについて
・シェーダーについて
・その他、雑談
bashでowncloud/nextcloudのCLI用ツールを作成した話(宣伝)

# お断り

CLIでowncloudを使用したいという方は既存の [owncloudcmd](https://doc.owncloud.org/desktop/2.2/advancedusage.html#owncloud-command-line-client) があります（使ったことは無いので紹介のみ）
又、この記事執筆時においてもツールにバグは多くありますが温かい目で見てください…何か気付きなどありましたら教えて頂けると幸いです

# 作ったもの

bashで動く、ShellScript100%の簡易的なツールを作りました。(他shellでの動作は確認していません。)
[Cj-bc/owncloud](https://github.com/Cj-bc/owncloud)

## install

homebrewに対応しています。(というかその他対応していません...)

```bash

$ brew tap Cj-bc/owncloud
$ brew install owncloud
```
install.shなるものが存在してはいますが未完成です。
近いうちにbash用のパッケージマネージャー、[bpkg](http://www.bpkg.sh)での管理に対応させようと思っていますが未だ成らず

## 出来ること

* ファイルのアップロード・ダウンロード
* cloud上のファイルの一覧表示、移動、削除、複製
* cloud上にディレクトリ作成
* configで設定する事でowncloud・nextcloudどちらにも対応
* bash補完もあります

## （現時点では）できないこと

* share機能
* fav等のステータス
* セキュアなパスワード管理（tokenには対応できなさそうです...)
* （まとめて言えば）WebDav以外のこと


# 大雑把な仕組み

1. APIを叩いて
2. 戻されたものパースして
3. 適切なものをstdoutに出力してるだけ！

# 各APIについて

owncloudとnextcloudのAPIの相違点はそこまで多くありません。
というか一つだけです。(多分。diffコマンドが嘘をついていない限りは())

|  | APIの位置(?) |
|:-:|:-:|
| owncloud  | /remote.php/webdav  |
| nextcloud  | /remote.php/dav/files/\<usesr_name\>  |

# 開発の過程について

ドキュメントは `docs/dev/`以下に仕舞ってあります。



# つまづいた点など(未完)

* `source`コマンドでソースする時、フルパスを使わなければいけない

`source`コマンドで他のスクリプトを読み込む時、大抵は`source ./hogehoge.sh`とかしてしまいがちですが、このようなツールを作成するときはカレントディレクトリがどこになるのかをしっかりと考える必要があります。
この場合、`owncloud`コマンドを実行したところがカレントディレクトリになるので、こんなことがおきます

```bash

# owncloudのパスは/usr/local/Cellar/owncloud/${version}/です
$ cat /usr/local/Cellar/owncloud/0.3.2/owncloud.sh
# > ...
# > source ./.sourcefiles
# > ...
$ tree -a /usr/local/Cellar/owncloud/version/
# > .
# > ├──...
# > ├── .sourcefiles
# > ├── config
# > ├──...
# > ├── docs
# > │   ├...
# > ├── func
# > │   ├── basicfunc.sh
# > │   ├── error.sh
# > │   └── share.sh
# > ├── owncloud.sh
# > └── text
# >     ├...
$ ls
# nothing here
$ owncloud
# > /usr/local/bin/owncloud: line 16: ./.sourcefiles: No such file or directory
# > owncloud version: 0.3.2
```

カレントディレクトリ`.`以下にファイルがなくてエラーになります。考えてみたら当たり前ですね...
なので、フルパスを取得して渡してやります

```bash
$ cat owncloud
# > ...
# > owncloudpath="`brew --prefix`/Cellar/owncloud${version}"
# > source ${owncloudpath}/.sourcefiles
```

こうするときちんと読み込んでくれます

...実を言うと開発中断してる状態で書いているのでまた何か思いついたら付け足しますね...


# 追記:開発状況について

現状、自分がnextcloudをあまり使わなくなったのもあり、share機能が面倒に感じているのもあり、他に作っているものがあるというのもあって開発が中断しています。
何か要望等ありましたら作ってみますので言ってください。
というかPRくだs((
オフラインリアルタイムどう書く F09 の実装(Go)

オフラインリアルタイムどう書く F09 の実装例
問題 : http://nabetani.sakura.ne.jp/hena/ordf09rotbox/
解答リンク集 : https://qiita.com/Nabetani/items/61e13fa5cf0abe5979be

```go:実装
package f09

import "strconv"

func format(cells [9]byte) string {
	s := ""
	for i := 0; i < 9; i++ {
		s += strconv.Itoa(int(cells[i]))
		if i == 2 || i == 5 {
			s += "/"
		}
	}
	return s
}

func solve(src string) string {
	c := [9]byte{
		1, 2, 3, 4, 5, 6, 7, 8, 9,
	}
	for _, cmd := range src {
		switch cmd {
		case 'a', 'b', 'c':
			d := (cmd - 'a') * 3
			c[0+d], c[1+d], c[2+d] = c[1+d], c[2+d], c[0+d]
		case 'd', 'e', 'f':
			d := (cmd - 'd')
			c[0+d], c[3+d], c[6+d] = c[6+d], c[0+d], c[3+d]
		case 'g', 'h', 'i':
			d := ('i' - cmd) * 3
			c[0+d], c[1+d], c[2+d] = c[2+d], c[0+d], c[1+d]
		case 'j', 'k', 'l':
			d := ('l' - cmd)
			c[0+d], c[3+d], c[6+d] = c[3+d], c[6+d], c[0+d]
		}
	}
	return format(c)
}
```

```go:テスト
package f09

import (
	"testing"
)

func TestKoch(t *testing.T) {
	var tests = []struct {
		name  string
		input string
		want  string
	}{
		{"0", "aegj", "286/435/971"},
		{"1", "a", "231/456/789"},
		{"2", "e", "183/426/759"},
		{"3", "g", "123/456/978"},
		// 中略
		{"48", "baciefjhgkdl", "153/482/796"},
	}
	for _, test := range tests {
		got := solve(test.input)
		if got != test.want {
			t.Errorf("%v: solve(%q)=%q, want %q\n", test.name, test.input, got, test.want)
		}
	}
}
```

`switch`〜`case` と多重代入の練習という感じ。
`format` の `if` 文がやや無様。どうするのが安いかなぁ。
Python2とPython3両方でQueueをimportする方法

# 背景
モジュール名が変わっている
**Python3でQueueを使う場合**

```
import queue
```

**Python2でQueueを使う場合**

```
import Queue
```

# 解決法

```
try:
    import queue
except ImportError:
    import Queue as queue

q = queue.Queue()
```
この方法だとPython2でもPython3でも同じように利用できる。
Toy-Neural-Network-JSでxor その２

#概要
Toy-Neural-Network-JSでxorやってみた。


#結果

0, 0 = 0.14425495055461737
0, 1 = 0.7930326318458016
1, 0 = 0.7835267831435138
1, 1 = 0.26005143254183366

#サンプルコード


```
let nn;
let training_data = [{
    inputs: [0, 0],
    outputs: [0]
}, {
    inputs: [0, 1],
    outputs: [1]
}, {
    inputs: [1, 0],
    outputs: [1]
}, {
    inputs: [1, 1],
    outputs: [0]
}];
nn = new NeuralNetwork(2, 8, 1);
nn.setLearningRate(0.01);
for (let i = 0; i < 10000; i++) 
{
    let data = training_data[0];
    nn.train(data.inputs, data.outputs);
    data = training_data[1];
    nn.train(data.inputs, data.outputs);
    data = training_data[2];
    nn.train(data.inputs, data.outputs);
    data = training_data[3];
    nn.train(data.inputs, data.outputs);
}
let str = "";
let inputs = [0, 0];
let y = nn.predict(inputs);
str += "0, 0 = " + y + "<br>";
inputs = [0, 1];
y = nn.predict(inputs);
str += "0, 1 = " + y + "<br>";
inputs = [1, 0];
y = nn.predict(inputs);
str += "1, 0 = " + y + "<br>";
inputs = [1, 1];
y = nn.predict(inputs);
str += "1, 1 = " + y + "<br>";
document.write(str);



```


#成果物

http://jsdo.it/ohisama1/a715


以上。
npm module を公開しよう

https://super-yusuke.gitbook.io/automate-the-boring-stuff-with-node-js/

## npm registry のアカウントを作ろう

[https://docs.npmjs.com/getting-started/publishing-npm-packages](https://docs.npmjs.com/getting-started/publishing-npm-packages)

まずは npm registry のアカウントを作ります。terminal で以下のコマンドを実行します。

```bash

npm adduser
```

次の項目を聞かれるので、入力します。E-mail アドレスは公開される点に注意してください。

```text
Username: superyusuke
Password:
Email: (this IS public) super.yusuke0000@gmail.com
```

mail の verification が送られてくるので、メールに添付された URL をクリックして verification しましょう。

## package.json を作ろう

以下のコマンドを terminal で実行します。

```bash
npm init -y
```

```json:package.json

{
  "name": "your-package-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```
name が特に重要で、これが公開されるパッケージ名になりますので、任意の名前に変更しましょう。

## node module を作ろう

```javascript:index.js
module.exports = val => {
  console.log(val);
};
```

## npm package を公開しよう

```bash
npm publish --access public
```

これで npm registry にあなたの npm package が公開されました。

## npm を インストールして使おう

先ほどのプロジェクトとは別の、新規プロジェクトを作って、先ほど公開した npm package をインストールして使用します。

```bash
npm install package-name -D
```

require で install した package を読み込んで使用します。

```javascript:index.js
const yourModule = require("your-package-name");
yourModule("test test test");
```

以下のコマンドで実行しましょう。
console に表示されるはずです。

```bash
node index.js
```
ROSパッケージをdebパッケージ化する

# Overview
- 任意のROSパッケージをdebパッケージ化し，再配布可能にする。
- beginner_tutorialsを例として、deb化する。


# 動作確認環境
- Ubuntu 16.04 x64 on Virtualbox
- ROS Kinetic Kame

# 0. 前提
すでにrosがインストールされ、`~/catkin_ws/src/`下に、`beginner_tutorials`パッケージが展開されていることとします。

https://github.com/ros/catkin_tutorials/tree/master/create_package_srvclient/catkin_ws/src/beginner_tutorials

# 1. 環境構築
パッケージ作成に必要なツールをインストールします。

```
$ sudo apt install python-bloom fakeroot dpkg-dev debhelper
```

# 2. CMakeLists.txtを編集する
beginner_tutorialsの`CMakeLists.txt`に、次のコマンドを追記します。

``` CMakeLists.txt
install(TARGETS talker listener
  ARCHIVE DESTINATION ${CATKIN_PACKAGE_LIB_DESTINATION}
  LIBRARY DESTINATION ${CATKIN_PACKAGE_LIB_DESTINATION}
  RUNTIME DESTINATION ${CATKIN_PACKAGE_BIN_DESTINATION}
)
``` 

インストールしたいノードは、すべて`install()`を記載しなければなりません（pythonノードも含む）。

# 3. 依存関係を編集する
`package.xml`に記載した依存関係は、自動的にdpkgの依存関係に登録されます。
rosとは直接関係ない実行依存も、すべて記載することをおすすめします（例えばflaskとか）。

```package.xml
<?xml version="1.0"?>
<!-- %Tag(FULLTEXT,-1)% -->
<package format="2">
  <!-- %Tag(NAME)% -->
  <name>beginner_tutorials</name>
  <!-- %EndTag(NAME)% -->
  <!-- %Tag(VERSION)% -->
  <version>0.1.0</version>
  <!-- %EndTag(VERSION)% -->
  <!-- %Tag(DESC)% -->
  <description>The beginner_tutorials package</description>
  <!-- %EndTag(DESC)% -->

  <!-- %Tag(MAINTAINER)% -->
  <maintainer email="you@yourdomain.tld">Your Name</maintainer>
  <!-- %EndTag(MAINTAINER)% -->
  <!-- %Tag(LICENSE)% -->
  <license>BSD</license>
  <!-- %EndTag(LICENSE)% -->
  <!-- %Tag(URLS)% -->
  <url type="website">http://wiki.ros.org/beginner_tutorials</url>
  <!-- %EndTag(URLS)% -->
  <!-- %Tag(AUTHORS)% -->
  <author email="you@yourdomain.tld">Jane Doe</author>
  <!-- %EndTag(AUTHORS)% -->

  <!-- %Tag(DEPS)% -->
  <buildtool_depend>catkin</buildtool_depend>

  <build_depend>roscpp</build_depend>
  <build_depend>rospy</build_depend>
  <build_depend>std_msgs</build_depend>

  <exec_depend>roscpp</exec_depend>
  <exec_depend>rospy</exec_depend>
  <exec_depend>std_msgs</exec_depend>
  <exec_depend>python-flask</ecec_depend> ←このように必要に応じて追記
  <!-- %EndTag(DEPS)% -->

  <!-- %Tag(EXPORT)% -->
  <!-- %EndTag(EXPORT)% -->
</package>
<!-- %EndTag(FULLTEXT)% -->
```

# 4. debパッケージの作成
以下のコマンドを実行します。

```
$ cd ~/catkin_ws/src/beginner_tutorials
$ bloom-generate rosdebian --os-name ubuntu --os-version xenial --ros-distro kinetic
$ fakeroot debian/rules binary
```
すると、**一つ下のディレクトリ**に、debパッケージが作成されています。 

# 5. インストール (任意)
通常のdebパッケージのインストールと同様に、`dpkg`コマンドで行います。

```
$ sudo dpkg -i ros-kinetic-beginner-tutorials_0.1.0-0xenial_amd64.deb
```


# 参考
- https://gist.github.com/awesomebytes/196eab972a94dd8fcdd69adfe3bd1152
静的サイトSCSSで開発できる環境を作ってみた

CSSとSCSSの素振り用のプロジェクトを作ったときのメモです。
初心者なので、間違っている部分があるかもしれません。

## npm

npmというNode.jsのパッケージマネージャーがインストールされていることを確認。
インストールされていないときは、homebrewとかで事前にインストールしておく。

↓このコマンドでインストールされているかを確認しておく。

```
$ npm -v
```

## ファイルを作る

```
$ cd
$ mkdir scss-env && cd scss-env
$ mkdir scss css
$ touch index.html scss/style.scss
```

## npmでプロジェクトを初期化

↓コマンド

```
$ npm init -y
```

すると、こんな感じのjsonができる。

```json
{
  "name": "scss-env",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

```

必要なnpmパッケージをインストールします。

`-D`をつけると、開発用にインストールされるらしい？

```
$ npm i -D node-sass
```

## scssの変換設定

さっき作ったpackage.jsonのscriptの項目を変更します。

```
{
  "name": "scss-env",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build-css": "node-sass --include-path scss scss/style.scss css/style.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "node-sass": "^4.8.3"
  }
}
```

## 実行

こんな感じのscssを書いて変換してみる。

```scss:style.scss
$header: #59c323;

header {
  color: $header;

  & .item {
    font-size: 12px;
  }
}
```

実行

```
$ npm run build-css
```

出力結果はこんな感じ↓

```css:style.css
header {
  color: #59c323; }
  header .item {
    font-size: 12px; }

```

cssを読み込む側のhtmlでは、出力されるcssのファイル名を指定しておけば良いみたい。
Notificationをタップしたときに何らかの処理をする（初心者向け）

# 基本形（Notificationを作成する基本形）

```java:MainActivity.java
        NotificationCompat.Builder builder = new NotificationCompat.Builder(this);
        Notification notification = builder
                .setWhen(System.currentTimeMillis())
                .setAutoCancel(true)
                .setSmallIcon(R.mipmap.ic_launcher)
                .setContentTitle("Notification Title")
                .setContentText("Notification Text")
                .setContentIntent(//[1]Notificationタップ時に実行したいPendingIntentを与える)
                .setDeleteIntent(//[2]Notification削除時に実行したいPendingIntentを与える)
                .build();
```

## PendingIntentを[1][2]に与える方法
### Activityを起動したい場合

以下のメソッドを実行することでstartActivity(intent)と同じような振る舞いをします。

```java
PendingIntent.getActivity();
```

公式サイト（getActivity）
https://developer.android.com/reference/android/app/PendingIntent.html#getActivity(android.content.Context,%20int,%20android.content.Intent,%20int)

### Serviceを起動したい場合

以下のメソッドを実行することでstartService(intent)と同じような振る舞いをします。

```java
PendingIntent.getService();
```

公式サイト（getService）
https://developer.android.com/reference/android/app/PendingIntent.html#getService(android.content.Context,%20int,%20android.content.Intent,%20int)

### Broadcastを送信したい場合

以下のメソッドを実行することでsendBroadcast(intent)と同じような振る舞いをします。

```java
PendingIntent.getBroadcast();
```

公式サイト（getBroadcast）
https://developer.android.com/reference/android/app/PendingIntent.html#getBroadcast(android.content.Context,%20int,%20android.content.Intent,%20int)

# 参考にしたサイト
AndroidのNotificationが削除されたことを検知する
https://qiita.com/masaibar/items/e40801cd396dff9ca03b
指定時間に通知する方法
http://workpiles.com/2014/01/android-notification-alarmmanager/
windowsでよく使うコマンド

#サーバからファイルダウンロード
サーバからファイルをダウンロードする。WinScpを使えば楽だが、コマンドでやった方が早い事もある。

```
scp -i {sshのキー} {ログインユーザ}@{host name or IPアドレス}:{ダウンロードする対象のフルパス} {ダウンロードフォルダ}
```
例)scp -i C:\XXXX\XXXX.pem user1@13.230.133.XXX:/var/www/html/all.zip .
アップロードしたファイルのサイズと更新日付を表示する

管理画面からPDFファイルなどをカスタムフィールド経由でアップして、
詳細ページでダウンロードさせる事がありますが、
その際にファイルサイズを表示してあげると親切ですね。
ついでに更新日付も表示するとさらに親切かもですね。

```single-product.php
$pdf_file_id = get_post_meta( $post->ID, 'pdf_upload', true);
$pdf_file_src = esc_url(wp_get_attachment_url( $pdf_file_id ) );
$pdf_file_str = strstr( $pdf_file_src, 'uploads' );
$pdf_file_path = WP_CONTENT_DIR .'/'.$pdf_file_str;

$file_date =  date("Y.m.d", filemtime( $pdf_file_path ) );
$get_filesize = filesize( $pdf_file_path );
$pdf_filesize_output = prettyByte2Str( $get_filesize );
```

「pdf_upload」というカスタムフィールド名でアップされたファイルの情報を取得して、
ファイルパスを求めます。
アップファイルは wp-content/uploads/2018/04/pdf.pdf のようになるので、
strstrでuploads以降のパスを切り出して、 定数WP_CONTENT_DIRを利用すると、
/home/domain.com/wp-content/uploads/
などのファイルパスを取得出来るので、アップロードファイルのファイルパスが取れます。

```$file_date``` で更新日時、```$get_filesize```でファイルのバイト数が表示されますが、
バイト数だと見づらいので、KBなどに変換したいですね。
なので、以下記事の関数を利用させて頂いて整形します。
[PHPでバイト数の単位アリナシを相互変換する](https://qiita.com/git6_com/items/ecaafb1afb42fc207814)

これでファイルサイズと更新日付が表示出来ます。
良かったですね。
matplotlibで視覚化しながら正規確率分布モデルを作る

# 環境
- macOS
- python3.6

# やりたいこと
- 正規確率分布モデルを作るための練習がしたい
- irisのデータセットを使い、matplotlibで可視化しながら進める

# 使用ライブラリ
```python:
import pandas as pd
import numpy as np
from sklearn import datasets
import matplotlib.pyplot as plt
```

# データセット
## データセットの読み込み
```python:
iris = datasets.load_iris()
iris_data = pd.DataFrame(data=iris.data, columns=iris.feature_names)
```

## データセットの概要確認
```python:
iris_data.info()

# 結果
"""
<class 'pandas.core.frame.DataFrame'>
RangeIndex: 150 entries, 0 to 149
Data columns (total 4 columns):
sepal length (cm)    150 non-null float64
sepal width (cm)     150 non-null float64
petal length (cm)    150 non-null float64
petal width (cm)     150 non-null float64
dtypes: float64(4)
memory usage: 4.8 KB
"""
```

# 正規確率分布のプロット

## 関数の定義

```python:
def normal_prob_plot(ser):
    """
    Check whether the data conforms to the normal distribution
    """
    y = ser.sort_values()
    n = len(ser.values)
    xs = np.random.normal(0, 1, n)
    x = pd.Series(np.sort(xs))
    return x,y

def linear_line(x,a,b):
    return a*x+b

def linear_line_sequence(ser,a,b):
    """
    ser: x axis sequence
    a : slope
    b : inter
    """
    linear_seq = [linear_line(x,a,b) for x in ser.values]
    return np.array(linear_seq)
```

## データの統計量を事前に計算

```python:
mean = iris_data["sepal length (cm)"].mean()
std = iris_data["sepal length (cm)"].std()
```

## データとモデルのプロット


```python:
fig = plt.figure()
ax = plt.subplot(1,1,1)

x,y = normal_prob_plot(iris_data["sepal length (cm)"])
ax.plot(x,y,label="data")

x = np.linspace(-3,3,100)
y = linear_line_sequence(pd.Series(x),std,mean)

ax.plot(x,y,label="model")

plt.legend()
```

![1.png](https://qiita-image-store.s3.amazonaws.com/0/222554/b9105d27-2053-8a87-14f6-5e55436b41e3.png)

# 対数正規分布

## データの統計量を事前計算

```python:
log_iris_data = np.log10(iris_data["sepal length (cm)"])
mean = log_iris_data.mean()
std = log_iris_data.std()
```

## データとモデルのプロット

```python:
fig = plt.figure()
ax = plt.subplot(1,1,1)

x,y = normal_prob_plot(log_iris_data)
ax.plot(x,y,label="data")

x = np.linspace(-3,3,100)
y = linear_line_sequence(pd.Series(x),std,mean)

ax.plot(x,y,label="model")

plt.legend()
```
![2.png](https://qiita-image-store.s3.amazonaws.com/0/222554/b1692027-ad09-6724-711a-7430a212eb45.png)

# まとめ
- データセットによらず正規確率分布モデルの作成とそのプロットができるようになった
- 今回は対数正規確率分布モデルも作成したが通常のモデルからの改善はみられなかった
- そもそも正規確率分布モデルがこのデータに適しているかの検証は別途必要
GCI データサイエンティスト養成講座_第1回の問題

機械学習を扱えるようになるべく、
GCIデータサイエンティスト育成講座演習コンテンツを進めています。
http://weblab.t.u-tokyo.ac.jp/gci_contents/

pythonの基礎からデータサイエンスを学べる無料の素晴らしい講座です。
これで俺も強くなるんだと思いやり始めました…！

第1回のまとめ問題である。素数判定プログラムです。

・以下を考慮しつつ、とにかく割って試して素数判定していく。
・2〜n-1 の範囲では約数は一つも存在しないため、2〜n-1約数が出たらその数は素数ではないので次に行く。
※nは判定対象の数
・約数かどうかの判定を行うのは素数だけでokのため、素数を保持しておく。
（4で割れるなら2でわれる、49で割れるなら7で割れるというような関係があるため）

```python:
def check_sosuu(n):
    if n < 3:
        return ['You must input learger than 2']
    else:
        num_list = [2]
        for i in range(3,n-1):
            num_mod_zero = 0
            if i > 1:
                for j in num_list:
                    if j > 1:
                        if i % j == 0:
                            num_mod_zero += 1
                            break
                if num_mod_zero == 0:
                    num_list.append(i)
    return num_list
```
出来るだけ高速になるように考えてはみましたが、世の中にはそれはそれは高速なアルゴリズムがあるそうです。世の中広いよ…
http://szarny.hatenablog.com/entry/2017/09/21/232855
アイキャッチの画像URLだけを取得する関数

訂正：
すみません、既に関数ありました。@just_a_personさんありがとうございます。

[get_the_post_thumbnail_url](https://developer.wordpress.org/reference/functions/get_the_post_thumbnail_url/)

```
function get_the_post_thumbnail_url( $post = null, $size = 'post-thumbnail' ) {
    $post_thumbnail_id = get_post_thumbnail_id( $post );
    if ( ! $post_thumbnail_id ) {
        return false;
    }
    return wp_get_attachment_image_url( $post_thumbnail_id, $size );
}
```
---------------------------------------


WordPressでアイキャッチ画像を表示する時は、
```the_post_thumbnail()```
が有名ですが、画像のURLだけを欲しい事がよくあります。
なので関数にまとめておくと便利です。

```functions.php
/**
* 投稿のアイキャッチ画像を取得して、画像urlを返す
*
*
* @param type int $post_id
* @param type string $size
* @return string image_src_url
*/
function return_eyecatch_src($post_id,$size='medium')
{
    $post_thumbnail_id = get_post_thumbnail_id($post_id);
    $thumb_src = wp_get_attachment_image_src($post_thumbnail_id,$size);
    if($thumb_src !== false){
        return $thumb_src[0];
    }else{
        return false;
    }
}
```
$post->IDを渡して、第二引数にサイズを渡します。
使い方はループ内で、

```
$thumb_src = return_eyecatch_src($post=>ID);
$thumb_output = '';
if($thumb_src){
  $thumb_output = '<img src="'.$thumb_src.'" alt="">';
}
```
のような感じです。

```
wp_get_atachement_img_src()
```
はサイズなどの情報が取れて便利ですが、
画像URLだけを使う場合が大半なので、関数でまとめた方が楽かもです。
シンプルなミュージックプレイヤーを作ってみた

#はじめに
自分で使うようにものすごくシンプルなUIのミュージックプレイヤーが欲しくなったので作ってみた。

これはその時のメモ書き。

#作ったもの

実際に作ったものはこちら

https://gamelinks007.net/@S_H_/99878475142016947/embed

#作った時に使ったもの

シンプルで使いやすいGUIライブラリとして [cvui](https://github.com/Dovyski/cvui) を使用。
ウインドウやボタン回りなどのUIはすべてこれで処理してる。

なお、cvui を使うために [OpenCV](https://github.com/opencv/opencv) も別途必要なので注意。

音源自体の再生には使い慣れている[DXライブラリ](http://dxlib.o.oo7.jp/)を使用。

それと、ディレクトリ内のmp3データを読み込む用に[Boost](https://www.boost.org/)も一部使ってる

開発環境としては、Visual Studio 2017 Community を使用。

#制作時のあれこれ

まず、デスクトップアプリとして制作せず、コンソールアプリとして制作。

コンソールアプリなので、コンソール画面を消すために以下のコードを追加

```
// Hide Console Window
#pragma comment(linker, "/subsystem:\"windows\" /entry:\"mainCRTStartup\"")
```
 

音源の読み込みに関しては、C++版のLINKSで使った素材読み込みのソースを再利用

https://github.com/S-H-GAMELINKS/Novel.Game.Engine.LINKS.for.CPP
 

あと、気を付けるのはOpencvのDLLのパスを通す必要があるくらい？

#おわりに

シンプルなミュージックプレイヤーが作れたので、これを改良してMastodonへTootできるミュージックプレイヤーとかに作り替えても面白そうかもしれない？

#参考資料

https://boostjp.github.io/tips/filesystem.html#enumerate-file

http://dxlib.o.oo7.jp/cgi/patiobbs/patio.cgi?mode=past&no=299

https://dovyski.github.io/cvui/
Haskell Stackでエラー "openFile: inappropriate type (Is a directory) when using mirror " が出るときの対処法

## 解決したいエラー

Haskellのstackを使っていて、以下のエラーが出たときの対処法です。

```
Exception /Users/ユーザー名/.stack/indices/Hackage/hackage-security-lock: openFile:
inappropriate type (Is a directory) when using mirror https://s3.amazonaws.com/hackage.fpcomplete.com/
```

（`stack test`を打っときに出ましたが、他のサブコマンドでも起こるエラーだと思います。）


## 解決法

以下のように、ディレクトリを消してしまえば、解決しました。

```bash
rmdir $HOME/.stack/indices/Hackage/hackage-security-lock
```

## 原因

タイミング悪く<kbd>Ctrl-c</kbd>をした後に起こるというようなことが、以下のissueに書いてあるような気がします。
（たしかに、<kbd>Ctrl-c</kbd>をした覚えがあるようなないような）

## 参考

* ["Exception ~/.stack/indices/Hackage/hackage-security-lock: createDirectory: already exists" · Issue #3055 · commercialhaskell/stack](https://github.com/commercialhaskell/stack/issues/3055#issuecomment-379432225)
[Unity]blenderから読み込んだ3DオブジェクトへのMesh Collider

# やりたかったこと
blenderで作成した3Dオブジェクトを読み込み、Mesh Colliderを使って正確な当たり判定を付与。
Rigidbodyも付けたい
# やったこと
- blenderで思うままにモデルを作成し、.blendで保存
- unityのAssetsに、作った.blenderファイルをドラッグ＆ドロップ
- オブジェクトとして追加し、Mesh Colliderをアタッチ(Convex -> On)

# 結果
これで当たり判定付いたなーと思っていたら…<br>
<img width="960" alt="Unity_Test.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/181644/745251c0-a988-0b0b-4cb7-a9465d997050.png">

<br>
何この斜めの線…しかも穴の部分も無視されてるっぽいし…
念のためこの物体に球を衝突させてみるものの、案の定思った通りには行かない。
<br>

![Unity_test.gif](https://qiita-image-store.s3.amazonaws.com/0/181644/ebcf3403-8470-aa79-106b-0e788fd64d0a.gif)

# 調べて分かった
- ConvexをOnにしていると、凹みの部分のColliderがおかしくなる
- でもConvexをOffにすると床をすり抜ける&エラー出る
- RigidbodyのIs KineticをOnにしないと、ConvexをOffにできない

# 結論
ConvexをOffに、RigidbodyのIs KineticをOffにする必要がある。
つまり複雑な3Dモデルは、素のUnityでは**地面としてしか使用できない。**(多分)
(Convex -> Off, Is Kinetic -> On にした結果↓)
<br>
![Unity_test2.gif](https://qiita-image-store.s3.amazonaws.com/0/181644/20e2a43b-234c-3196-f03a-9bc0ad3c6bb2.gif)
<br>

#まとめ
キャラクターなどにMesh Colliderを付けたい場合は、Asset Storeから[SAColliderBuilder](https://assetstore.unity.com/packages/tools/sacolliderbuilder-15058)などをインポートして行う他なさそう。<br>
以上、ほとんど自分への備忘録でした。

# 参考
- [Unityのrigidbodyについてる、kinematicについて](http://xengineer.hatenablog.com/entry/2014/10/31/Unity%E3%81%AErigidbody%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%82%8B%E3%80%81kinematic%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)
- [Unity - マニュアル: Mesh Collider](https://docs.unity3d.com/jp/530/Manual/class-MeshCollider.html)
- [Mesh Collider Convexオプションについて - 饂飩コーディング](http://appdeappuappu.hateblo.jp/entry/2014/06/02/082538)
簡単トークルーム作成サービスBOOSHOOを作って色々考えたこと（その２-ピボット編-）

# 前回までのあらすじ

「twitter仲間募集サービス「BOOSHOO」を作る時に考えた色々」
https://qiita.com/you88/items/b42bc44833d70ac5a1e2

個人開発でサービスを作ってみたいというのとtwitterでの友達もっと欲しいなあと思ってBOOSHOOというサービスを作ってみた。コアバリューは「趣味を媒介に相互フォロワーを募集してtwitter友達をつくるきっかけづくりをする」だった。

BOOSHOO

http://www.booshoo.net/

# 作ってみて思ったこと

twitter友達つくりたいけど話しかけるきっかけもないし、twitterって基本つぶやきで絡んいいのかよく分からねえ。。。ってのを解消したくて相互フォロー募集ってしたけど相互フォロー成立した所で話たりする機会あんまないよなあと思ってむしろコミュニケーションする機会を作ることのほうがコアバリューのtwitter友達を作るきっかけになるんじゃね？と思った。

ここでコンセプトを変えて簡単トークルームをつくれるサービスに変えた。具体的にやったことは下記

* コンセプトを趣味の合う人を募集できて応募した人のみの限定トークルームでおしゃべりできるに
* コメント機能をつけてユーザーフローを変えた
    * 趣味の合う人をtwitterで募集
    * 応募するとコメントできるようになる
    * コミュニケーションとる

なんかtwitterってグループ機能とか無くて全く知らない人と絡みにくいのでこのページで色々おしゃべりできるといいなあと思っている。（まだうまくいくか正直分からん）

# 他にも変えたこと

## twitter権限周り

最初twitterの権限承認画面に画像を設定していなかったりしてユーザーから不安の声が上がった。やっぱりこういうSNS認証とかはもっと気を使うべきだなと思ってその辺の設定を行った。

## ログインページでの訴求を明確に

ログイン前にちゃんとサービスの訴求を行うためにポイントを絞った。また今のところは投稿者目線で訴求を行っている。これは閲覧者はtwitter経由で募集ページから入り、homeはサービス自体に興味をもった投稿者が多いと考えているから。ログイン前に認証が何のためか説明した方がいいかなと今考えている。

## ログイン後最初に投稿画面を持ってきた

上記のようにhomeからのログインはほとんど投稿者のはずなのでまずやってもらいたい投稿フォームを最初にだすようにした。
テンプレートエンジン「Twig」の変数スコープの話

プログラミング言語における変数は、宣言する場所によって有効範囲が異なり、これを変数のスコープと呼びます。

そして、Twigにも変数のスコープが存在します。


![drupal8_twig.png](https://qiita-image-store.s3.amazonaws.com/0/39468/87fd849e-0441-69dd-37a8-2fb464642867.png)

#検証環境

* Macbook Pro (Retina, 15-inch, Mid 2014)
* Mac OS X 10.11.6 El Capitan
* PHPStorm 2017.3
* Vagrant 1.9.4
* CentOS 7.4.1708
* Drupal8.4.4


#グローバルスコープ

通常、Twigテンプレート上で変数に値をセットした時点でグローバル変数になります。 

**例）setタグを使って変数に値をセットする**

```twig
{% set foo = "bar" %}
```

テンプレートの先頭で宣言された変数は、以降のテンプレート中でどこからでもアクセス可能です。

**例）グローバルスコープで宣言された変数は任意の場所からアクセス可能**

```twig
{% set foo = "value" %}

{% if foo == "value" %}
  {{ foo }}
{% endfor %}

{% for item in list %}
  {{ foo }}
{% endfor %}

{% trans %}value is {{ foo }}{% endtrans %}
```


#ローカルスコープ

forタグに関してはローカルスコープになっています。

もちろんforループ内でグローバル変数にアクセスできます。 しかし、forループ内で新たに宣言された変数はローカル変数になるため、外からはアクセスできません。

**例）ローカルスコープで宣言された変数をグローバルスコープで出力してみる**

```twig
{% for item in list %}
  {% set bar = "value" %}
{% endfor %}

{{ bar }}
```

上のコードを実行してもらえればわかりますが、画面に何も出力されません。
（Twigは未定義の変数を出力してもとくにエラーにはならないため）


[Twig公式ドキュメントのsetタグの解説](https://twig.symfony.com/doc/2.x/tags/set.html)でもforループ内はローカルスコープが適用されている旨が説明されています。 そして実際に検証してみたところ、blockタグもローカルスコープになっているようです。

ということで、[for](https://twig.symfony.com/doc/2.x/tags/for.html)と[block](https://twig.symfony.com/doc/2.x/tags/block.html)の2つのタグのときは変数のスコープを気にするようにしましょう。


###ローカルスコープの中でグローバル変数に値をセットした場合の動作

for / blockタグの中で、グローバル変数に値をセットした場合はグローバル変数が破棄されて、ローカル変数になります。

**例）ローカルスコープにて、グローバル変数に値を再セットしてみる**

```twig
{% set foo = "value01" %}

{% block block_A %}
  {% set foo = "value02" %}
{% endblock %}

{{ foo }}
```

上のコードを実行すると、value02が出力されるはず･･･と勘違いしがちですが、実際は画面に何も出力されません。

グローバル変数の値を書き換えたつもりが、スコープの中でグローバル変数と競合する変数名に値をセットするとそれまでの変数が破棄されるからです。

for / blockタグの中でグローバル変数の値を操作したい場合は、新たに変数を定義した上でそちらで行うようにしましょう。



#参考ページ

* https://twig.symfony.com/doc/2.x/tags/set.html
* https://craftcms.stackexchange.com/questions/153/is-there-a-way-to-define-a-global-var-within-a-twig-block
pythonの覚書

ぶち当たった問題は全部ここに書いてく。

<h1>環境構築</h1>

<h2>環境はcloud9が激押し。</h2>
ほとんどの人が挫けるでお馴染みの環境構築を無視できます。
macはpythonが標準装備、というのはこの時初めて知りました。「ApplePCは一般人が大企業と戦えるようにするために作った」というウォズニアックの言葉を思い出しました。
https://www.sejuku.net/blog/3766
このサイトが丁寧におしえてくれました。

<h1>実装時</h1>
<h2>pip3ないんだけど、、</h2>
これめっちゃ困った。。いろんなサイトで、sudo apt-get install python3-pip すればいいよ。って回答されていて、それを試したら今度はapt-getがないよって言われて、ここでpython学ぶのやめようかと思いました。
答えは以下のサイトにあって、環境によって、apt-getか、yumか、zypperのどれかがつかわれるとのこと。

> Debian から派生した OS (Ubuntu など) では、APT を使用します。
$ sudo apt-get install python3.4
 Red Hat およびそれから派生した OS では、yum を使用します。
 $ sudo yum install python34
 SUSE およびそれから派生した OS では、zypper を使用します。
$ sudo zypper install python3-3.4.1

https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/eb-cli3-install-linux.html
cloud9はどうやらyum使う環境とのこと。


```
$ python3 get-pip.py --user
$ ls -a ~
$ export PATH=LOCAL_PATH:$PATH
$ source ~/PROFILE_SCRIPT
$ pip install awsebcli --upgrade --user
```
とりあえず、これでpip3はいった。(yumの話いらなかったですね)
https://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/eb-cli3-install-linux.html
この記事見ればちゃんとわかるはず。。
Linux Cアプリケーションでの実行時間測定用ライブラリ

事あるごとに性能測定ログを埋め込んでは無効化してってのを最近よくやるので、ライブラリを作ろうと思い立ちました。
せっかく作ったので覚書。

2017/4/23 型定義違いがあったので修正 && configure化

##どんなものか？

printfのイメージで使ってもらうと、時刻付きのログを保存します。
ログは関数実行時すぐに出力するのではなく、一旦確保済みのメモリ上に保存し、最後にまとめて吐き出すようにしています。


処理実行の都度ログを吐かず、memcpyでログを吐いてるので単純にログを入れ込むよりも速度への影響は少ないと思うので、
ミドルウェアのアプリケーションレベルだったら十分使えるんじゃないかなと思っています。

##使い方

基本は以下です。
1. 初期化関数timetestlog_initを実行
2. printf代わりの関数timetestlog_store_printfをログを入れ込みたい箇所に追加
3. 終了関数timetestlog_exitを実行し、ログを出力

```C:timetestlog.h
void * timetestlog_init(char *delimiter, size_t maxloglen, unsigned long maxstoresize);
int timetestlog_store_printf(void * handle, const char *format, ...);
void timetestlog_exit(void * handle);
```

timetestlog_init:初期化関数
    - input
        - delimiter[in]　　timestampログ間の区切り文字指定が出来るようにしています。NULLの場合は" "。
        - maxloglen[in]　    出力ログ1行の最大長。この長さ以上のログは切り捨てられます。
        - maxstoresize[in] ためておくログの最大数。この数以上のログは切り捨てられます。
    - return
        - その後のAPIで使用するhandle。NULLはエラー

timetestlog_store_printf:ログ保存関数。
printfの第1引数にtimetestlog_initで取得したhandleを指定するだけです。

timetestlog_exit:終了関数。
timetestlog_initで取得したhandleを指定します。

##コード
以下githubにあげています。
https://github.com/developer-kikikaikai/speedtest

cloneもしくはコードダウンロード後、

```shell

cd speedtest/lib
make
```

でbuild。同フォルダ内にlibtimelog.so, libtimelog.aが作成されます。


##動作環境
Ubuntu 14.04 Desctop 64bitで動作確認済み
Linux OS上なら動作すると思います。

##その他

・allocateはinit時だけにするなど、オーバーヘッドが少ないように気を付けていますが、va_startやmemcpyといった普通の関数に対するオーバーヘッドまでは気にしてないです。
LaravelでController以下にサブディレクトリを作る

Laravelでアプリケーション開発をしていて、管理画面側のルーティングを作る時に少し詰まったので方法を記録しておこうと思います。

今回は`App\Http\Controllers`以下にAdminというネームスペースで管理画面へのルーティングを作成します。

PHP：バージョン7.1.14
Laravel：バージョン5.6

ルーティングを追加する。

```routes/admin.php

<?php

Route::group(['namespace' => 'Admin'], function() {
    Route::get('/', 'AdminController@index');
});

```

RouteServiceProviderに追加する.

```app/Provider/RouteServiceProvider.php

    /**
     * Define the routes for the application.
     *
     * @return void
     */
    public function map()
    {
        $this->mapApiRoutes();

        $this->mapWebRoutes();

        $this->mapAdminRoutes();
    }

    /**
     * Define the "admin" route for application
     *
     * @return void
     */
    protected function mapAdminRoutes()
    {
        Route::prefix('admin')
            ->middleware('admin')
            ->namespace($this->namespace)
            ->group(base_path('routes/admin.php'));
    }

```

Controllerを作成する。

```app/Http/Controllers/Admin/AdminController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class AdminController extends Controller
{
    public function index()
    {
        return view('admin/index');
    }
}

```

viewを作成する

```resources/views/admin/top.blade.php

@extends('layouts.app')

@section('content')
<div>
    hoge
</div>
@endsection

```

こんな感じでできるはずです。
あとで追記するかもしれません。
python3でTA-Libをインストールする方法をまとめてみた

テクニカル分析における代表的な指標を算出するライブラリとしてTA-Libがあります。
bitcoinのトレードBotを作成する時に非常に役に立つライブラリなのですが、インストール方法に癖があるのでまとめてみました。

## Linux
下記のコマンドをそのままコピペ

```bash
wget http://prdownloads.sourceforge.net/ta-lib/ta-lib-0.4.0-src.tar.gz
tar -zxvf ta-lib-0.4.0-src.tar.gz
cd ta-lib
./configure --prefix=/usr
sudo make
sudo make install
cd ../
sudo rm -rf ta-lib-0.4.0-src.tar.gz
sudo rm -rf ta-lib
pip install TA-Lib
```
## Windows
1.下記サイトからダウンロード
https://www.lfd.uci.edu/~gohlke/pythonlibs/#ta-lib
Python3.8.x 64bit ⇒ TA_Lib-0.4.24-cp38-cp38-win_amd64.whl
2.ダウンロードしたモジュールをインストール

```
pip install TA_Lib-0.4.24-cp38-cp38-win_amd64.whl
```

## Windows(for anaconda)
```
conda install ta-lib
```

anacondaがめっちゃ楽って話でしたｗ
Google Colaboratoryでmodelをsaveしてローカルに持ってくる方法(+アップロード方法)

TensorFlowの勉強とか小規模なCNNの構築に便利なGoogle Colaboratory。
構築したmodelをローカル環境や別のサーバで利用するためにはmodelを取り出す必要があります。
ColaboratoryにはGoogleDriveとかGCSに直接書き出す方法も用意されていますが、
直接ローカルに落として使用したい場合もあると思います。
そんなときは、files.downloadを使うと簡単にダウンロードできます。
例えば、
sessionのsaveは

```
saver = tf.train.Saver()
save_path = saver.save(session, "./session.ckpt")
print('done saving at',save_path)
```
sessionをsaveすると、

session.ckpt.meta
checkpoint
session.ckpt.data-00000-of-00001
session.ckpt.index

の4つのファイルができるので

```
from google.colab import files
files.download( "./session.ckpt.meta" ) 
```

としてそれぞれダウンロードします。

学習したmodelは

```
model.save('ファイル名.h5')
```
とすればsaveできます。

ダウンロードしたmodelは、

```
from keras.models import load_model
model = load_model('ファイル名.h5')
```

とすれば使用できます。


構築したmodelを実際に学習させるときにはデータセットを使用します。
その際にはデータをアップロードする必要があります。
ColaboratoryではGoogleDriveやGCS(Google Cloud Storage)から引っ張ってくることもできますが、ローカルにあるファイルをアップロードして使用したい場合もあると思います。
そのときは下記のようにすれば簡単にファイルをアップロードすることができます。

```
from google.colab import files

uploaded = files.upload()

for fn in uploaded.keys():
  print('User uploaded file "{name}" with length {length} bytes'.format(
      name=fn, length=len(uploaded[fn])))
```

上記を実行すると、ローカルのファイルを選択してアップロードすることができるようになります。
![スクリーンショット 2018-04-25 11.04.25.png](https://qiita-image-store.s3.amazonaws.com/0/19516/b400b083-e1eb-a1e9-d856-8f600e52dc65.png)



Google Colaboratoryは無料で使える上に、GPU環境でTensorFlowが使えます。
ただ、ヘルプに
>コードはどこで実行されるのですか？実行中にブラウザ ウィンドウを閉じたらどうなりますか？
>>コードは、各アカウント専用の仮想マシンで実行されます。仮想マシンには強制的に適用される最大存続期間があり、一定期間アイドル状態にある仮想マシンは再利用されます。

とあるので一定時間経過するとリセットされてしまうようです。(おそらく１２時間...)
リセットされるとアップロードしたファイルや保存したmodelはなくなってしまうので注意してください。
Google Maps URL 「現在地からのルート」のリンクを作る

## 地図リンク

地域情報系のサイトでよくあるのが Google Maps へのリンク。
座標や施設名などのキーワードで簡単につくることができます。
施設の情報を表示しつつ、ユーザーは容易にルート検索を始める事ができます。


```
// 座標を使う場合
https://maps.google.co.jp/maps?q=${lat},${lng}&z=${zoom}
// 施設名などのキーワードを使う場合
https://maps.google.co.jp/maps?q=${keyword}&z=${zoom}
```
※ `${hoge}` の部分は変数です（以下同様）

例：[京都駅の地図](https://maps.google.co.jp/maps?q=京都駅)

## 現在地からのルート

一方、リンク先に **現在地からのルート** を直接表示してほしいという依頼があったので調べてみました。
Google Maps URL を使って作る事ができます。

```
// 座標を使う場合
https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}
// 施設名などのキーワードを使う場合
https://www.google.com/maps/dir/?api=1&destination=${keyword}
```

例：[現在地から京都駅へのルート](https://www.google.com/maps/dir/?api=1&destination=京都駅)

※現在地として表示される場所はGPSが有効な場合はほぼ正確ですが、PCなどGPSを使用しない場合は推定位置です。位置情報の推定方法については[Google 検索 ヘルプ](https://support.google.com/websearch/answer/179386?co=GENIE.Platform%3DAndroid&hl=ja)に記事がありますのでご覧ください。

## 出発地から現在地へのルート

また、出発地が固定されている場合（駅からの案内など）は、以下のようになります。

```
// 座標を使う場合
https://www.google.com/maps/dir/?api=1&origin=${lat},${lng}&destination=${lat},${lng}
// 施設名などのキーワードを使う場合
https://www.google.com/maps/dir/?api=1&origin=${keyword}&destination=${keyword}
```

例：[京都駅から京都タワーへのルート](https://www.google.com/maps/dir/?api=1&origin=京都駅&destination=京都タワー)

## 参考
Google Maps APIs - Maps URLs - Overview - Forming the Directions URL
https://developers.google.com/maps/documentation/urls/guide#directions-action
OpenCVのバージョン3.4.0から3.4.1に上がったときに起きたこと

ヘッダーファイルの変更でC言語のAPIインターフェイスがおかしくなっています。
3.4.1で問題が起きた場合、3.4.0にしてみたら問題が解決するばあいがあります。
運営の人たちはこの問題は放置するようです。CのAPIは完全に終了です。

2018/05/29追記
運営は反省してCのAPIを何とかしたみたいです。
3.4.2では復活しそうです。
最近SEO対策など運用保守でやったこと

忘れていくのでメモ。

## SEO関連
- タイトル・h1にターゲットキーワードを含有させる。
- URLに年度などの表記が入っているものを統一。
- canonical/alternate タグの設置。
- サイトマップ / sitemap.xml の見直し
- テキスト増強
- 内部リンクアンカーテキスト最適化
- パンくずリスト最適化（カテゴリなどを含める）
- URL重複排除（index.phpありなし、wwwありなしなど）
- noindexの付与
- キーワードが重複してるページの精査

## 構造化データ
- 各ページ毎に構造化データを設置。
- 商品ページにはProduct、記事ページにはArticle、などなど

### Product
```html

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "Executive Anvil",
  "image": [
    "https://example.com/photos/1x1/photo.jpg",
    "https://example.com/photos/4x3/photo.jpg",
    "https://example.com/photos/16x9/photo.jpg"
   ],
  "description": "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",
  "mpn": "925872",
  "brand": {
    "@type": "Thing",
    "name": "ACME"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.4",
    "reviewCount": "89"
  },
  "offers": {
    "@type": "Offer",
    "priceCurrency": "JPY",
    "price": "100",
    "priceValidUntil": "2020-11-05",
    "itemCondition": "http://schema.org/UsedCondition",
    "availability": "http://schema.org/InStock",
    "seller": {
      "@type": "Organization",
      "name": "Executive Objects"
    }
  }
}
</script>
```

### Article
```html

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "NewsArticle",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://google.com/article"
  },
  "headline": "Article headline",
  "image": [
    "https://example.com/photos/1x1/photo.jpg",
    "https://example.com/photos/4x3/photo.jpg",
    "https://example.com/photos/16x9/photo.jpg"
   ],
  "datePublished": "2015-02-05T08:00:00+08:00",
  "dateModified": "2015-02-05T09:20:00+08:00",
  "author": {
    "@type": "Person",
    "name": "John Doe"
  },
   "publisher": {
    "@type": "Organization",
    "name": "Google",
    "logo": {
      "@type": "ImageObject",
      "url": "https://google.com/logo.jpg"
    }
  },
  "description": "A most wonderful article"
}
</script>
```

#### 構造化データについて
https://developers.google.com/search/docs/guides/search-gallery
https://support.google.com/merchants/answer/6386198?hl=ja

## その他
- 導線の改善、表示速度の改善などなどなど


地道にコツコツやっていくことですが、ふとした時にやろうとしてめっちゃ工数かかるなんてこともおおおおお（血涙

都度見直していくのが大事ですね(*´･ω･)(･ω･｀*)ﾈｰ
async/await, Promiseの実行順序

async/await, Promiseの実行順序はどうなるか気になったので調べてみました。

```await.ts
const log = console.log;

async function f0() {
    return "ZZZ";
}
async function f1() {
    await f0();
    return "XXX";
}

log(1);
new Promise(async (resolve) => {
    resolve();
    log(2);
    await f0();
    // await f1();
    log(3);
}).then((value) => {
    log(4);
});
(async () => {
    log(5);
    await f0();
    // await f1();
    log(6);
})();
log(7);
```

実行結果は以下のとおり、await直前までの処理はすぐに行われるようです。

```:実行結果
1
2
5
7
3
4
6
```

下のコード内の`await f0()`を`await f1()`にぞれぞれ変えると
以下のとおり、then()の中身が先に実行されました。

```:実行結果
1
2
5
7
4
3
6
```
Pythonで行列の列ごとにr倍したい

This post is inspired by "https://stackoverflow.com/questions/36532682/multiplying-numpy-arrays-by-scalars".

2つ, n x dのnumpy行列があって、列ごとにスカラー倍したいときどうするのか。という課題。

以下のように、「行列が2個」となる配列の階層で「サイズが2」のarrayを **broadcast** すると、問題が解けるらしい。

試しに、1と2だけで出来た行列のうち、2で出来た行列だけを0.5倍してみる。
[1, 0.5]というベクトルを、broadcastして行列にかけることで、片方のベクトルだけ0.5倍したことになる。

```python
>>> A = np.array([np.ones((3,4)), 2*np.ones((3,4))])
>>> b = np.array([1, 0.5])
>>> print(A, A.shape, b[:, None, None].shape)

[[[1. 1. 1. 1.]
  [1. 1. 1. 1.]
  [1. 1. 1. 1.]]

 [[2. 2. 2. 2.]
  [2. 2. 2. 2.]
  [2. 2. 2. 2.]]] (2, 3, 4) (2, 1, 1)
```

```python
>>> print(A * b[:, None, None])

[[[1. 1. 1. 1.]
  [1. 1. 1. 1.]
  [1. 1. 1. 1.]]

 [[1. 1. 1. 1.]
  [1. 1. 1. 1.]
  [1. 1. 1. 1.]]]
```

まだ何やっているのかよく分からず、例えば `[2, n, d] x [2, n, 1]` はうまく出来るんだろうか。

# 2019/11/06 追記

Broadcastは、要は片方だけがサイズ1の方向に関しては掛け合わせる行列に合わせてサイズを自動で合わせる方法でした。

[NumPyのブロードキャストのメリットと解説 - DeepAge](https://deepage.net/features/numpy-broadcasting.html)

なので、上述の(2, 3, 4)行列に、例えば(2, 3)行列を(2, 3, 1)に引き伸ばして代入すると、(2,3,1)行列が(2,3,4)行列として自動で引き伸ばされて乗じることになります。
例えばで以下に2x3行列を作って乗じる例を示します。

```python 
>>> b=np.array([[1,1,1], [0.33, .5, .66]])
>>> print(A*b[:,:,None])

[[[1.   1.   1.   1.  ]
  [1.   1.   1.   1.  ]
  [1.   1.   1.   1.  ]]

 [[0.66 0.66 0.66 0.66]
  [1.   1.   1.   1.  ]
  [1.32 1.32 1.32 1.32]]]
```