OmniAICreator/Qiita-1.07M huggingface dataset:
LaravelでTwitterの投稿を実装する

# はじめに

Laravelでアニメの聖地の写真を共有するサイトを作った際に、写真が投稿されるたびにサイトのアカウントで投稿する機能を実装したので方法を書いていきたいと思います。

作った[サイト](https://www.holy-place-photo.com/)はこちらです。　

実際に投稿するとこのようにTwitterに呟かれます。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">New Photo Post!<br>新しい聖地の写真が投稿されました!<br>タイトル「唯ちゃん激似の飛び出し坊や」<a href="https://twitter.com/hashtag/photo?src=hash&amp;ref_src=twsrc%5Etfw">#photo</a> <a href="https://twitter.com/hashtag/anime?src=hash&amp;ref_src=twsrc%5Etfw">#anime</a> <a href="https://twitter.com/hashtag/photography?src=hash&amp;ref_src=twsrc%5Etfw">#photography</a> <a href="https://twitter.com/hashtag/%E3%82%A2%E3%83%8B%E3%83%A1?src=hash&amp;ref_src=twsrc%5Etfw">#アニメ</a> <a href="https://twitter.com/hashtag/%E8%81%96%E5%9C%B0?src=hash&amp;ref_src=twsrc%5Etfw">#聖地</a> <a href="https://twitter.com/hashtag/%E5%86%99%E7%9C%9F?src=hash&amp;ref_src=twsrc%5Etfw">#写真</a> <a href="https://twitter.com/hashtag/HolyPlacePhoto?src=hash&amp;ref_src=twsrc%5Etfw">#HolyPlacePhoto</a><a href="https://t.co/63igSPKhnR">https://t.co/63igSPKhnR</a></p>&mdash; Holy Place Photo (@holyplace_photo) <a href="https://twitter.com/holyplace_photo/status/1060146835526955009?ref_src=twsrc%5Etfw">2018年11月7日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



# 前提

- Laravel version 5.6
- Twitter Developerの登録済み


# abraham/twitteroauthの設定

Twitterの投稿は[abraham/twitteroauth](https://github.com/abraham/twitteroauth)を利用します。

まずはインストール。

```
composer require abraham/twitteroauth
```

.envにトークンなどを設定します。

```:.env
TWITTER_CLIENT_ID = TwitterのApi Key
TWITTER_CLIENT_SECRET = TwitterのAPI Secret Key
TWITTER_CLIENT_ID_ACCESS_TOKEN = TwitterのAccess Token
TWITTER_CLIENT_ID_ACCESS_TOKEN_SECRET = TwitterのAccess token secret
```

# Laravel

投稿はとても簡単です。

```php:TwitterController.php
<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use Abraham\TwitterOAuth\TwitterOAuth;

class TwitterController extends Controller
{
    // 投稿
    public function tweet(Request $request)
    {
　　　　　　　　　　　　　　　　$twitter = new TwitterOAuth(env('TWITTER_CLIENT_ID'),
            env('TWITTER_CLIENT_SECRET'),
            env('TWITTER_CLIENT_ID_ACCESS_TOKEN'),
            env('TWITTER_CLIENT_ID_ACCESS_TOKEN_SECRET'));

        $twitter->post("statuses/update", [
            "status" =>
                'New Photo Post!' . PHP_EOL .
                '新しい聖地の写真が投稿されました!' . PHP_EOL .
                'タイトル「' . $title . '」' . PHP_EOL .
                '#photo #anime #photography #アニメ #聖地 #写真 #HolyPlacePhoto' . PHP_EOL .
                'https://www.holy-place-photo.com/photos/' . $id
        ]);
    }
}
```

改行やハッシュタグもこのように投稿することができます。

# 終わりに

[前回](https://qiita.com/tiwu_official/items/8ac86977344a1a97f9d2)のTwitterログインもそうでしたが、Twitter Developerの登録のほうが難しいくらい投稿も簡単でした。

`abraham/twitteroauth`は投稿だけでなく取得なども可能だそうです！
jQuery　自分用メモ　ホバーエフェクトで動きをつける。

#ホバーエフェクトってなに
***「マウスオーバー」や「マウスアウト」時の効果で動きのある表現の基本***


ボタンのホバーエフェクト
例①

``` js
$(funtion(){
var duration = 300
    $('#buttons1 button:nth-child(-n+4)')
        .on('mouseover', function() {      ←第二引数は無名関数
            $(this).stop(true).animate({　　　　　　　　←stop(true)で要素のanimateを停止できる
                backgroundColor: '#ae5e9b',
                color: '#fff'
            }, duration);　　　←変数durationには数値の300が入っている。animateが適用されるまでの時間。
        })
        .on('mouseout', function(){
            $(this).stop(true).animate({
                backgroundColor: '#fff',
                color: '#ebc000'
            }, duration);
        });
```
 


ボタンのホバーエフェクト
例②

``` js
$(funtion(){
var duration = 300

    $('#buttons1 button:nth-child(n+5):nth-child(-n+8)')
        .on('mouseover', function(){
            $(this).stop(true).animate({
                borderWidth: '12px',　　　　　　　←ここポイント。ボタンのanimateが独特
                color: '#ae5e9b'
            }, duration, 'easeOutSine');　　←'easeOutSine’はイージングの種類。アニメーションが即座に実行される。
        })
        .on('mouseout', function(){
            $(this).stop(true).animate({
                borderWidth: '0px',
                color: '#ebc000'
            }, duration, 'easeOutSine');
        }); 
```

ボタンのホバーエフェクト
例③
・マウスオーバーすると、色面が左側からスライドインして、背景色と文字色の異なるボタンに変化する。
・マウスアウトすると元に戻る。

```js
$(funtion(){
var duration = 300

    $('#buttons1 button:nth-child(n+9)')
        .on('mouseover', function(){
            $(this).find('> span')   ←findメソッドでspanタグを指定（buttons1 button:nth-child(n+9)からspanタグへ）。
                .stop(true).animate({
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　width: '100%'　　　　　　　←ボタンが100%にかぶせる
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　}, duration, 'easeOutQuad');　　←animateが実行される速度
        })
        .on('mouseout', function(){
            $(this).find('> span')
                .stop(true).animate({width: '0%'}, duration, 'easeOutQuad');
        });
});
```

```css

#buttons1 button {
    position: relative;
}

#buttons1 button .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    overflow: hidden;　　　　　　　←こいつ
}

#buttons1 button span span {
    display: block;
    width: 224px;
    height: 80px;
    line-height: 80px;
    color: #fff;                ←重ねたボタンに異なる色の指定
    background-color: #ae5e9b;  ←重ねたボタンに異なる色の指定
    border-radius: 20px;
}

```

・jsでは　 overflow: hidden；が指定された要素の幅をアニメーションさせることで、今回作成する効果を実現します。

・find()メソッドは***jQueryオブジェクトに含まれる各要素の子孫要素の中から、セレクタを使用してさらに要素を絞り込むメソッド***です　。今回はfind()メソッドの引数にspan要素を指定することで、処理対象を***重ねた方のボタン***(span要素内のボタン)に限定しています。

```
find('絞り込むセレクタ')
```

このようにon()メソッドの処理対象と、animate()メソッドの処理対象を変更することで、横にスライドしていく色面のアニメーションを実現しています。
何の実にもならないパロディ記事とかアンサー記事書きまくってる奴らへ

ひどいブーメラン記事だという自覚はあるけど流石にトレンド汚染も酷いし本来的な使い方してるユーザーにとっては迷惑そのものでしかなかったので

#事の経緯
[ここが詳しい](https://qiita.com/alter/items/389dba835cccf4e54e11)けど、まとめると時代錯誤甚だしい内容の記事を誇大したタイトルでツッコミどころ満載の記事を挙げてそれに対するツッコミを何故かわざわざ別記事で捕捉する奴らが大量発生した。


| ![qiita.com_.png](https://qiita-image-store.s3.amazonaws.com/0/313580/3871906f-9ae2-e68a-37b3-95d6863fa98e.png)| ![qiita.com_ (1).png](https://qiita-image-store.s3.amazonaws.com/0/313580/9a2c4563-5d96-9b81-8b95-3704f2e386cc.png)|
|:-:|:-:|
11/08 17:00現在のトレンド。これはひどい（某炎上系Youtuberも含む）



#言いたいこと
某炎上Youtuberさんやタイムトラベラーさんが香ばしくてついついちょっかいかけてしまうのもわかります。
でもそれコメントで完結できない？
いいねしてわざわざトレンド汚染してる奴らもどうかと思うしコメント欄も酷かったことはよく知ってるけど。

実際にこれを反例として何か学べることがあるならいいけど、[寒い](https://qiita.com/sasanquaneuf/items/d800df9081ca2d352dc5)[笑い](https://qiita.com/h6akh/items/d241ce878533f6086aa7)しか提供できてないようなのが大半です。
一応捕捉しとくともちろん中にはこういう時にしかバズらないようなおもしろい読み物もあるけど。

というか[ゴミ記事問題について](https://qiita.com/Gaccho/items/21a5f1aed58da4b9b5b0)バズったの先週とかここ数か月の話なのによくやるよ
面白い記事がこんなしょうもないので埋め尽くされて目につかないのは残念だなぁと思った次第
どうせすぐ鎮火するから消せとかまでは言わないけど、つまんないパロディ記事については年がら年中見かけるので、せめて面白い内容にしてくれ
【Python】Dataframeでソート

#データフレーム(df)作成
以下のようなdfを作成

```
  word  score
0    a      1
1    b     10
2    c      3
```


```py
import pandas as pd

# 列を宣言
key = "word"
value = "score"

data = {}
data[key] = ["a", "b", "c"]
data[value] = [1, 10, 3]

df = pd.DataFrame(data=data)
```



#ソート

```py

df = df.sort_values(by=value, ascending=False)
```

ソート後のdfは

```
  word  score
1    b     10
2    c      3
0    a      1
```
PowerAppsで利用者の所属グループを判定するFlow

#やりたかったこと
PowerAppsでアプリを作る際に、「管理者モード」と「利用者モード」を用意したかった。
ただしアプリを分けるのではなく、ログインユーザー（アプリの利用者）に応じて１つのアプリで。

今回はこれを実現するために、アプリの管理者をまとめたセキュリティグループを作成して、アプリの利用者がそのグループのメンバーかを判定するFlowを作成しましたので、紹介します。

参考にしたのは：[Geetha Sivasaliamさんのブログ](https://svaghub.wordpress.com/2018/11/03/role-based-security-in-powerapps-using-spgroups/)

#用意するもの
- AzureAD connectorで「ユーザーのグループを取得」できるアカウント
- 3画面作ったPowerAppsアプリ(テスト用)

AzureAD connectorで利用するアカウントはFlow内で使いまわします。この手順は後ほど

#Flowを作る
まずは変数を2つ作成します。IsMemberとGroupID。
*GroupID:*  PowerAppsから渡します。アプリによって判定するグループを変更するため変数化します
*IsMember:* 利用者がGroupIDで指定されるグループに所属するかどうかのフラグです
<img width="462" alt="inivariable.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/202779/8e2880a1-b5b3-83a3-ebb0-9dfb838f2722.png">


AzureAD connectorでアプリ利用者のメールアドレスをキーにして、所属グループ一覧を取得します。
<img width="496" alt="searchGroup.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/202779/31d5c09d-ddc4-8eea-0504-34137a7fe2a7.png">

一覧を取得後、ForEachで取得したグループのIDが、GroupIDに等しいかを判定します。
一致したらIsMemberをTrueに変更。
<img width="990" alt="foreach.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/202779/ec5acfcd-d03b-3b96-ccc1-226fb884a8f2.png">

最後にIsMemberをPowerAppsに返します。
<img width="496" alt="respond.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/202779/660e904d-7b04-6376-abb9-82d771dbc508.png">
※なぜかBooleanを返しているはずが、あとで見るとStringになっている。。。

#PowerAppsでの確認
PowerAppsではデフォルトのスクリーンのOnVisibleに作成したFlowの実行を設定します。

タイマーコントロールは、Flowの実行結果を監視するために利用しています。
タイマーのOnTimerEndで、Flow実行が終わったら、かつグループのメンバーだったら「Admin Screen」に遷移、メンバーではなかったら「User Screen」に遷移させます。
<img width="285" alt="powerapp1.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/202779/7f9b17cc-2d64-3eb5-f51d-fb43fb7b6664.png">
グループIDさえ変えてしまえば、ほかのアプリでも流用できます。

#最後に
Flowを作成したユーザー以外がこのFlowを使う場合には、Flowを共有する際に、Connectorの接続アカウントで「実行専用のユーザーによって・・・」を使わないように注意してください。
最初の接続時にAzureAD Connectorを実行できるユーザーでのサインインが発生するので。
<img width="362" alt="embedd.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/202779/b32a1e32-f3d0-3cec-0869-f543954180c7.png">
アニメーションプログラミング入門～その１～

# アニメーションが作れるようになりたい
プログラムを学んで、「アニメーション」を作りたいと思い、プログラミングの勉強を始めました。
何から勉強すればいいのかわからなかったので、「Qiita」で勉強したり「ドットインストール」などで勉強しているのですが、思ったより難しいのですが、「アニメーション」が作りたいというモチベーションだけで、何とか頑張っています。

# 学習意欲を維持するために
一人で勉強していても限界が来ると思うので、自分で勉強したことを「Qiita」で記事にしたり、「動画」にして公開していきたいと思っています。
他に、学習意欲を維持する方法などがあればぜひ教えてください(^^)

# 「HTML・CSS・Javascript」でアニメーション作成
いろいろ調べたところ「HTML・CSS・Javascript」を使ってアニメーションを作る方法に興味を持ったので、チャレンジしています。
毎日、プログラミング学習と試行錯誤の繰り返しですが、全然うまくいかないこともあったり。

これまでに学んだことを動画にしてみました。



[■ボタン連打で超早いボール！？【アニメーションプログラミング～その１～】]
(https://www.youtube.com/watch?v=mm39hs5HQYs)



「楽しんで学ぶ」のも大事だと思うので、楽しめる勉強方法もいろいろと工夫していきたいと思います。

動画編集が趣味なのでそっちもいろいろと勉強していきたい。

プログラムでアニメーションを作るのはかなりハードルが高そうだけど、毎日少しずつ学んでいきたいと思います。

# Javascriptを書くのに適しているエディタ探し
Javascriptをどのエディタで書くのがいいのか悩んでいるのですが、

- Atom
- Vim
- Brackets

などを使っていて、自分にはエディタの使い方を覚えるのも一苦労。
他にもいろいろなエディタを試してみたいと思います。
いろいろ使ってみないとどれが自分に合っているのかもわからないので、プログラミングを勉強しながらエディタの使い方も勉強していくことになりそうです。

# CANVASの勉強方法
最近やっとCANVASの勉強にも取り組めるようになってきたので、CANVASで図形を描けるように学んでいきたいと思います。
簡単な図形なら自分でも描けそう。
アニメーションも作れるみたいなので、CANVASの勉強は必須になりそうです。
やることが多くて混乱してきましたが・・・
RubyMineでデバッグ機能が動かない時にやってること

# はじめに

RubyMineを利用してデバッグする際にブレークポイントで止まらない時に実施している操作です。

# 手順

1. Rails Server を停止<br>
2. メニューから Run > Degug を選択<br>
<img width="387" alt="スクリーンショット 2018-11-08 20.43.18 2.png" src="https://qiita-image-store.s3.amazonaws.com/0/141934/937e28d5-156a-4797-1f26-f4d0d6dee7a9.png"><br>
3. Development を選択<br>
<img width="267" alt="スクリーンショット 2018-11-08 20.43.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/141934/229ed97f-a21c-a7b8-3113-b3ca9c9bbbff.png"><br>
4. ブレークポイントを設定（設定済みの場合は設定し直す）<br>
<img width="378" alt="スクリーンショット 2018-11-08 21.13.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/141934/3cc51bb6-0257-4711-1985-2ee5faf6a7ed.png"><br>
<img width="376" alt="スクリーンショット 2018-11-08 20.49.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/141934/88b247d2-c58d-d9f6-376d-9514c0693974.png"><br>
5. ブレークポイントで止まるようになったことを確認<br>
<img width="1126" alt="スクリーンショット 2018-11-08 21.17.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/141934/530d449f-e22c-0cf8-3515-3201b92bbea2.png">
GoogleHomeでVolumioを操作〜ngrokからREST編〜

# 概要とVolumioについて
* GoogleHomeで音楽聞くのはいいけど，無料だとspotifyしかないし，CDや他のストアで買った音楽が聞けない
* また，お気に入り（自作）のスピーカーで聞きたいけどBluetooth機能なんてない
* PCをスピーカーにつなげるのでもいいけど．．．

そんなときは，ラズパイにVolumioを入れるのがおすすめです
https://volumio.org/

Volumioには色々な機能があり，AirPlayに対応していたり，自宅nasにある音楽ファイルを再生できたり，プラグインを追加するとyoutube（音だけですが）が聞けたりします
そして今回はそのVolumioをGoogleHomeで操作してみようということです

Volumioには，元からAPIがwebsocketやRESTなどで公開されています
今回はそのRESTの方を使います

## ngrokについて
https://ngrok.com/
https://qiita.com/mininobu/items/b45dbc70faedf30f484e

自宅のラズパイなどを外からアクセスできるようにしてくれるすごいやつ
GoogleHomeとラズパイの連携にfirebaseを用いるのをよく見かけますが，今回はRESTということで，もっと単純にできるかもっということで利用してみます

## アプリケーション構成
googleHome -> ifttt,webhook -> ngrok,raspberryPi(volumio REST API)
![スライド1.png](https://qiita-image-store.s3.amazonaws.com/0/76572/51f7e265-d1e3-9f3e-5abf-aa1425801707.png)


# ngrokの設定
ngrokは有料版もあるのですが，今回は全部無料で

1. https://ngrok.com/ にログイン
2. Linux (ARM) をダウンロード
3. ダウンロードしたものを解凍し，ラズパイに移す（ftpやusbメモリを利用してなど）
4. /usr/local/binにファイルを移動（mvコマンドなどで）
5. さっきログインした画面の3番目のコマンドを実行（ngrok authtoken 〜）
6. nohup ngrok http 3000 &　を実行（volumioのplayback画面がポート番号が3000のため）
7. curl localhost:4040/status | grep ngrok.io を実行
8. 出力されたログの中のURLを控えておく（http://〇〇.ngrok.io）

# iftttの設定
1. https://ifttt.com/ にログイン
2. google asisstantで例えば「ラズパイで再生」といったら（volumioの単語は認識が悪かったでした）
3. webhookで
	* URL:さっき控えたurl + /api/v1/commands/?cmd=play
	* Method : GET
	* Content Type: application/x-www-form-urlencoded(関係なし)
	* Body : 空

![Screenshot_2018-11-09 IFTTT.png](https://qiita-image-store.s3.amazonaws.com/0/76572/103bf51e-c4af-aa9d-b48d-8868c4fca145.png)


#　実行！！
これで一旦Volumioにキューを追加しておいて，
GoogleHomeに向かって「ok google! ラズパイで再生」で再生されるはずです
もしVolumioを再起動などさせた場合URLが変わってしまうので[ngrok]項目の6,7と[ifttt]の3のurlの変更をしてもらえればと思います
ngrok有料版だと控えたURLのサブドメインの部分を指定できるっぽいので，楽ですね

# その他，参考サイト
https://volumio.github.io/docs/API/REST_API.html
http://netbuffalo.doorblog.jp/archives/4974284.html
https://hakengineer.xyz/2017/11/15/post-629/
【Mac,Karabiner-Elements】launchpad＋英数入力でサクサクアプリ検索


#やること
- launchpad開いたときに英数入力モードに

#環境
- MacBook 12インチ
- JIS配列

#うざい日本語入力
Launchpadを使ってサクッとアプリを立ち上げたいのに．．．．．
![image.png](https://qiita-image-store.s3.amazonaws.com/0/141196/cfa36999-08ce-5e9f-1026-3611ef6cc18d.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/141196/7c4b6499-6e94-bad1-49c0-0bbc85787db2.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/141196/bfa58668-5447-14e5-724d-dcc1d47e80b4.png)

うおおおおおおおおおおおい

ってならないための設定

```json
{
    "title": "英数モードに切り替え",
    "rules": [
		{
			"description": "launchpad開いた時",
			"manipulators": [
			{
				"type": "basic",
				"from": {
				"key_code": "launchpad"
				},
				"to": [
				{ "key_code": "launchpad" },
				{ "key_code" : "lang2" }
				]
			}
			]
		}
	]
}
```

#メモ
- トラックパッドで開いたときは適用されません

#おまけ
- `cmmand+l`時も英数入力に切り替わるようにすると結構便利

```json
		{
			"description": "command+l時に英数入力にする(url入力)",
			"manipulators": [
			{
				"type": "basic",
				"from": {
				"key_code": "l",
				"modifiers": {
					"mandatory":["left_command"]
				}
				},
				"to": [
				{
					"key_code": "l",
					"modifiers": "left_command"
				},
				{ "key_code" : "lang2" }
				]
			}
			]
		}

```

#参考
- [Karabiner-Elementsの設定項目をまとめました](https://qiita.com/s-show/items/a1fd228b04801477729c)
length-weight の:weight と:seed

# length-weight の:weight と:seed
```
(setf rhy-w (length-weight rhythm :weight '(2 1) :seed 30))
```
上記のようなことをすることがあるが:weight と:seed がいまいち出力結果を見ても説明を読んでも解りにくかった。で質問したところ、、、

<blockquote class="twitter-tweet" data-conversation="none" data-lang="ja"><p lang="ja" dir="ltr">:weightは音符と休符の比率をそのまま表しているので、2:1であれば、33%の確率で休符ということになります。<br><br>:seedはそれとは全然関係なくて、<br>他の全ての乱数系の関数でも同じですが、乱数の結果を固定したい時にseedを指定すると何回やっても同じ結果になります。(復活の呪文みたいなもんです)</p>&mdash; 余湖 雄一 (@yuichi_yogo) <a href="https://twitter.com/yuichi_yogo/status/1060502276962308097?ref_src=twsrc%5Etfw">2018年11月8日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

と言うことで、:weight が'(5 1)なら20%の確立で休符、となる。:seed は普通に乱数のseedと同じ。seed値を固定すれば出力結果が固定される。:seed はデフォルトではNILなので評価する度に変ることになる。
opusmodusから外部(内部)の音源をmidiを使って鳴らしたい場合

Twitterで @Yuichi_Yogo さんに御縁合ってわからないところを質問させて頂いているんだが、同じことを二回尋ねないで済むようにキチンと記録に残しておくことにする。記憶の定着はメモではなく「義務感」が伴なうほうが確実。

# opusmodusから外部(内部)の音源をmidiを使って鳴らしたい場合

(midi-destinations) をListnerで使うとopusmodus内での :port の指定番号が解る。なのでそれを def-score のパートの出力先としてあげればオッケー。:channel とかもあるのでmidi機器のch毎にパートを振り分けるとかもできる。
【初心者向け】Anaconda環境構築をしようRTA（随時更新）

目安：10分（ダウンロード、インストール時間を除く）

#Anacondaをダウンロード
[Anacondaダウンロード](https://www.anaconda.com/download/)
3.7をインストールしましょう！

#インストールをかけます
デフォルトの設定でインストールをかけましょう。
VSCodeも入れることで、ぐっと便利になります。入れましょう。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/244181/d6e7dfc0-ad45-db1c-bd0f-dbdc70036d80.png)


#パスを通します。
Win+x=>システム=>システム環境設定=>システム環境変数

デフォルトならば、以下の物をコピーすれば可能。

```powershell
C:\Users\(ユーザー名)\Anaconda3
```

違う場合は、エクスプローラーからAnaconda3の名前のフォルダを見つけに行き、パスをコピー

#VSCodeについて
PythonとAnacondaExtention Pack と、Jupyterをいれよう。ESLintを入れろという注意書きが出てきたらInstallしましょう

# できない時
左下にある、環境が選択されてるかを確認すること。これで実行が可能になり、スクリプトを保存できる。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/244181/f9d46478-19d6-7ce1-acbf-5259955b7ff1.png)

#余談
Tensorflowの場合、バージョンの制約が厳しいので、バージョンを下げたものでないと厳しい場合があります。

Python3.6の最新バージョンは5.1.0だったはずです・・・
（ご指摘いただけると幸いです。）
自身のOSに合わせて、ダウンロードしましょう・・・
[Anaconda installer archive](https://repo.continuum.io/archive/)
iPhoneのSafariに対応した音声レコーダーを作成する方法

## 概要

iPhoneのSafariに対応したレコーダーを作成する方法を紹介します。

## 動作環境

- iOS11.4


## 前提条件

1. マイク、カメラにアクセスするためにはhttpsのサイトであることが必須条件
2. iPhoneでのブラウザはSafariのみ対応

## ポイント

1. getUserMediaを呼び出す前にAudioContextを作成する。

## 実装

上記のポイントを踏まえて実装したものは以下のようになります

```js:startRecord
 function startRecording(evt_stream) {

     // 取得されている音声ストリームの録音を開始
     localMediaStream = evt_stream;

     if (!navigator || !navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
       alert('Missing support for navigator.mediaDevices.getUserMedia') // temp: helps when testing for strange issues on ios/safari
       return
     }

     audioContext = new (window.AudioContext || window.webkitAudioContext)();
     // サンプルレートを保持しておく
     audioSampleRate = audioContext.sampleRate;

     let scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1);
     localScriptProcessor = scriptProcessor;

     if (audioContext.createMediaStreamDestination) {
       destinationNode = audioContext.createMediaStreamDestination()
     }
     else {
       destinationNode = audioContext.destination
     }

     // safariで Web Audio APIを動かすため、先にaudioContextを生成してから、UserMediaを生成する
     return navigator.mediaDevices.getUserMedia({audio: true})
       .then((stream) => {
         this._startRecordingWithStream(stream, destinationNode, scriptProcessor)
       })
       .catch((error) => {
         alert('Error with getUserMedia: ' + error.message) // temp: helps when testing for strange issues on ios/safari
         console.log(error)
       })
   }
```

```js:_startRecordingWithStream
   function _startRecordingWithStream(stream, destinationNode, scriptProcessor) {
     // ループ処理のセット
     let mediastreamsource = audioContext.createMediaStreamSource(stream);
     mediastreamsource.connect(scriptProcessor);
     scriptProcessor.onaudioprocess = onAudioProcess;
     console.log('レコードスタート: scriptProcessor.connect(audioContext.destination)');
     scriptProcessor.connect(destinationNode);
   }
```

また、実装に伴ったソースコード並びにサンプルも用意しました。

[サンプルコード](https://github.com/Ago0727/test_encording)
[サンプル](https://cryptic-falls-47489.herokuapp.com/)

## 参考

- [web-audio-recording-tests](https://github.com/kaliatech/web-audio-recording-tests)

- [みかづきブログ その3:iOS11のSafariからカメラとマイクにアクセスするシンプルでサンプルなコードを書きました。](http://kimizuka.hatenablog.com/entry/2017/11/06/140337)
VSCodeの統合ターミナルでもターミナルへ実行したコマンドの強制終了（Ctrl+c or Cmd+c）を使いたい

自分のローカル開発環境をなるべく開くアプリケーションを多くしないために **VSCode Only** でターミナルもコード編集もGitコミットも全部やれるようにしているのですが、
**VSCode** の統合ターミナルを使っていると、たまに実行するコマンドを失敗して、「あー！！」と思いながら `Ctrl+c` や `Cmd+c` を連打して、強制終了したいことないですか？

私はよくあって、SSH先のサーバのIPアドレスが間違っていたり、バッチ処理実行してしまった後に「あ、あれやるの忘れてた :sweat_smile:」ってなって、強制終了したくなるんです :exclamation: 

そんなとき、これまでは「あー！！」と思いながら、待つのがめんどくさいので `iTerm` 起動したり、統合ターミナルをゴミ箱ボタン押してターミナルごと強制終了したりしてました。
ですが、これ、、、、**「起動するアプリは結局増えるタイミングがある」**し、**ターミナルごと強制終了すると、実行したプロセスが残ってたりする**んですよね・・・

本番環境とかいじってるタイミングで起こるともう、怒りの○ランプさん :angry: みたいになる・・・
なので、できるだけ全部、VSCodeでできるようにしたいという思いながら、しばらく耐えてました

そして本日、ちょっと調べ物をしていると下記の記事を見かけたので、この方にならって対応してみました！

- [VSCodeの統合ターミナルでもターミナルのUndoを使いたい - Qiita](https://qiita.com/abcang/items/7cc0e2d9ae552b6f27bc)

僕の場合は、 `Ctrl+c` や `Cmd+c` への対応をする必要があったので、このキー操作のエスケープシーケンスを調べる必要があったんですが、
なんとか、Wikipediaさんを参照して、解決できました :exclamation: 

- [制御文字 - Wikipedia](https://ja.wikipedia.org/wiki/%E5%88%B6%E5%BE%A1%E6%96%87%E5%AD%97#Field_separators)

その結果、キーバインドには下記のように書きました。

```json:keybindings.json
    {
        "key": "ctrl+shift+q",
        "command": "workbench.action.terminal.sendSequence",
        "when": "terminalFocus",
        "args": { "text": "\u0003" }
    }

```

そのまま、`Cmd+c` としたかったんですが、確認すると被ってるキーバインドさんがいたので、なるべくいないやつーを探して、
`when` の `terminalFocus` を追加条件に入れたら対応できました :exclamation: 

いやー、、これに困ってる人結構いそうだけどなー・・・周りからはあまりそういった声聞こえないし、、、 :speech_balloon: 
僕だけでしょうか？ でも解決できたからよかったー :joy: 

こんな方法よりもっと簡単な方法あるっちゅーねん :exclamation: :exclamation: :exclamation: 
という方、コメントお待ちしてます。 :bow:
【Python】foliumで日本地図と市町村の線を描く

# 日本地図に市町村の線を引きたい

Pythonのfoliumで、手軽に市町村の地図を描きます。
今回は東京都の八王子市のラインが必要だと仮定します。

必要なもの
- python(folium)
- curl

手順は2つです。

1. 市町村のgeojsonデータをcurlで取得
2. pythonで可視化

## 1. 市町村のgeojsonデータをcurlで取得

geoJsonがまとまっているすごいrepositoryを発見しました。

- 以下から必要な市町村を選択

  - [niiyx/JapanCityGeoJson](https://github.com/niiyz/JapanCityGeoJson)

- rawのリンクを取得
![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/83577515-baf3-6e03-ac31-9095926aeea8.png)

- curlでデータ取得してjson形式で保存

```get_json.sh
$ curl https://raw.githubusercontent.com/niiyz/JapanCityGeoJson/master/geojson/13/13201.json > cityline.json
```
これで必要なデータが取得できるので、pythonで扱う際に都合の良い場所に置きます。
今回は`data/`フォルダに移動させます。

```sh
$ mv cityline.json data/cityline.json 
```

## 2.python(folium)で可視化

- pythonで地図を描いて、cityline.jsonを表示させる

線がわかりやすいように、白地の地図をベースに指定しております。

```map.py
# 地図のベースを指定
copyright_st = '&copy; ' \
            'Map tiles by <a href="http://stamen.com">Stamen Design</a>,' \
            ' under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>.' \
            'Data by <a href="http://openstreetmap.org">OpenStreetMap</a>,' \
            'under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'

# ベースマップにlineを描く関数
def jap_map(base_map, geojson_path):
    # geojson読み込み
    base_map.choropleth(geo_data=geojson_path, 
                        line_color="red", 
                        line_weight=5, 
                        fill_color='white', 
                        fill_opacity=0.1, 
                        line_opacity=0.5)

# ベースマップ定義
base_map = folium.Map(location=[35.655616, 139.338853], 
                      attr=copyright_st,
                      tiles='https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png',
                      zoom_start=10.0)

# ベースマップに八王子駅のpopup追加
folium.Marker([35.655616, 139.338853],
              popup='八王子駅',
              icon=folium.Icon(color='red', icon='train', prefix='fa')).add_to(base_map)

# ベースマップに枠線追加
jap_map(base_map=base_map, geojson_path='data/cityline.json')

base_map
```

- 市町村のlineが入った地図が表示される

![image.png](https://qiita-image-store.s3.amazonaws.com/0/143058/d0b2e9d9-5240-126a-f9f9-0f4d034074ba.png)


[niiyx/JapanCityGeoJson](https://github.com/niiyz/JapanCityGeoJson)の偉業のおかげでとても低コストでいい感じの地図がかけました！

## 参考

[Folium 0.5.0 documentation](http://python-visualization.github.io/folium/docs-v0.5.0/modules.html)

[niiyx/JapanCityGeoJson](https://github.com/niiyz/JapanCityGeoJson)
Laravel環境構築について

<img width="1680" alt="スクリーンショット 2018-11-14 18.42.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/310571/a5315a4d-bfd9-9541-8115-cf3452df5ffd.png">
Laravelの環境構築で、vagrantのアカウントを作り終えて、上記を記述したのですが、この先にどうしてもいきません。
解決策がわかる方いましたらお願いします。
Git こんなときどうするんだったけな集

イレギュラーなケースについては、毎回調べているような気がするので、気づいたものはまとめておきたい。
(こんなのもあるよというのがあれば、ぜひコメントください！)

## リモートに push しちゃったコミットをなかったコトにしたい (revert ではなく reset したい)

```sh
# HEAD^ のところを戻したいコミットハッシュで指定すれば、どこまでも戻せる
git push -f origin HEAD^:<branch>
```

> References

- [共有レポジトリにPushしてしまったコミットをやり直す - Qiita](https://qiita.com/kentosasa/items/959a1a78ebc8ca70d7f6)

## First commit を reset したい

```sh
git update-ref -d HEAD
```

> References

- [How to revert initial git commit? - Stack Overflow](https://stackoverflow.com/questions/6632191/)

## First commit から rebase したい

```sh
git rebase -i --root
```

> References

- [First commit が git rebase -i できない問題 → git rebase -i --root でできる - 納豆には卵を入れる派です。](http://d.hatena.ne.jp/ken_c_lo/20130421/1366558065)
Nimで地味に便利な関数とか

# はじめに

この記事は[Nim Advent Calender 2018](https://qiita.com/advent-calendar/2018/nim)の9日目です。

大体Nimの文法は分かったのでそろそろなんか書いてみようかな、ぐらいの人向けのつもり。
基本的にLinuxかMacのターミナル環境での実行を想定しています。

# 環境

Ubuntu 18.04
Nim 0.19.0

# 知ってると地味に便利な関数たち

モジュールごとに紹介します。Standard Libraryのみ。

### [sequtils](https://nim-lang.org/docs/sequtils.html)

`applyIt`, `mapIt`
配列に対して、中身をひとつづつ`it`変数に代入して第二引数に与えられた処理をするテンプレート(関数を生成する、メタな関数)です。
`apply`, `map`のシンタックスシュガーのようなものですが、構文がかなりシンプルになります。
`applyIt`は引数の配列を操作、`mapIt`は返り値として結果の配列を返します。
`mapIt`の方は返り値の型が元の型に縛られないので便利。

ちなみにNimのmap系関数は中でループが動いているだけなので普通に速いです。

```nim:sample.nim
import sequtils
var
  seq1 = [1, 2, 3]

# string型にキャストする関数'$'
echo seq1.mapIt($it)  # -> ["1", "2", "3"]
seq1.applyIt(it * 3)
echo seq1             # -> [3, 6, 9]
# it変数を使用する必要はない
echo seq1.mapIt(5)    # -> [5, 5, 5]
```

### [strutils](https://nim-lang.org/docs/strutils.html)

(頻繁に使用するライブラリですが、これと言って便利な関数はない気がする...)
`editDistance`でレーベンシュタイン距離を取得できます。
`parseBool`はそれなりに緩い判定で文字列をboolに変換できるので、ユーザー入力を処理したい場合とかに便利かもしれない。
`split`系の関数は同名のイテレータが存在するので、そのままfor文に放り込めて便利かもしれない。
使ったことはないですが`tokenize`イテレータとかも便利そうです。

### [algorithm](https://nim-lang.org/docs/algorithm.html)

`sortedByIt`
割と面倒なtupleの配列のソートを楽にするテンプレート。

```nim:sample.nim
# 公式から引用
type
  Person = tuple[name: string, age: int]
var
  p1: Person = (name: "p1", age: 60)
  p2: Person = (name: "p2", age: 20)
  p3: Person = (name: "p3", age: 30)
  p4: Person = (name: "p4", age: 30)
  people = @[p1, p2, p4, p3]

echo people.sortedByIt(it.name) # -> name順に並べ替え

# SQLのORDER BYのように条件を複数つけることも可能、その場合条件をtupleで渡す
echo people.sortedByIt( (it.age, it.name) ) # -> age順に並び替えた後、ageが同じPersonの中でname順に並べ替え
```

### [math](https://nim-lang.org/docs/math.html)

なぜか言語に組み込まれていない、累乗演算子`^`が含まれています。
ただし第二引数に負の数や浮動小数点型を指定することができないので、その場合は同モジュール内の`pow`関数を使用しましょう(注: pow関数はpow関数でどちらの引数にもfloat型しか指定することができない)。

いろいろ試していて気づいたんですが、基数に負の値、指数に偶数を指定した場合の、返り値の正負が言語によって違うみたいです。
詳しく調べたら数学っぽい内容になってきたので諦めました。

### [rdstdin](https://nim-lang.org/docs/rdstdin.html)

`readLineFromStdin`関数は、特にインタプリタやREPLなど、ユーザからの入力を連続で処理するものを作るのに便利です。
`readLine(stdin)`と比べ、プロンプトを設定できたり、矢印キーやemacs(ターミナル)のキーバインドで移動できたり、履歴が出せたり、C-cやC-dのキャッチが楽だったりします。

```nim:while_read.nim
import rdstdin

var line: string

# プリミティブな実装
# いろいろ大変
while true:
  stdout.write("プロンプト")
  line = readLine(stdin)

# 便利な実装
while true:
  line = readLineFromStdin("プロンプト")
```

# まとめ

便利にラッピングされているものはテンプレートに多いので、公式のprocをザッと見たら下の方にあるtemplateやiteraterを見てみるのもいいと思います。

0.19.0でstring型とseq型が型宣言のみで初期化されるようになって、謎のSIGSEGV: Illegal storage accessに悩まされることがなくなって幸せです。
Yahoo知恵袋のID隠しは1行で破られる

```javascript
document.querySelectorAll(".usrNm a").forEach(o => {o.innerText= o.href.replace("https://chiebukuro.yahoo.co.jp/my/","");});
```

知恵袋の回答ページでは、ユーザー名が***で隠されるようになりました。
しかし、リンクにそのままユーザー名が残っています。
このスクリプトを使うと隠れたユーザー名がばれます。

※「ID非公開さん」はばれません。
rails-erdを使いER図を作る時に詰まったのでMEMO

##まずはrails-erdを使うために必要なpraphivizをインストール
```:terminal
$ apt-get install graphviz
# or
$ brew install graphviz
```

## gemをインストール

```ruby:gemfile
group :development do
  gem 'rails-erd'
end
```

## dotファイルを作成
```:terminal
$ erd --inheritance --direct --attributes=foreign_keys,content --filetype=dot
```
--attributes=〇〇でカラムをカスタマイズできます。
--filetype=〇〇で作成するファイルのタイプを決められます。

今回の場合はerd.dotが作成されます。

##dotファイルを開く

```:terminal
$ open erd.dot
```

##dotファイルをpngに変換
エラーか何かでdotファイルを開けなかったのでpngファイルに変換します。

```:terminal
dot -Tpng erd.dot -o erd.png
```


以上です。ありがとうございました。
graphvizをインストールできない時の解決法

##エラー
graphvizをapt-get経由でインストールできない。

```:ターミナル
$ apt-get install graphviz

Package graphviz is not available, but is referred to by another package.
This may mean that the package is missing, has been obsoleted, or
is only available from another source

E: Package 'graphviz' has no installation candidate
```
##解決策
以下のコマンドを順番に叩いたらいけた。

```:ターミナル
$ apt-get dist-upgrade
$ apt-get update
$ apt-get install build-essential
$ apt-get install graphviz
```

[参考サイト](http://codesforjavaandc.blogspot.com/2015/06/package-has-no-installation-candidate.html)
中間テーブル　多対多

## 多対多のモデル関係


やること

```ruby

1 モデル作る
2 中間テーブルに外部キー入れる
3 リレーションを記載する

モデル

room
 has_many :members
 has_many :users ,through: :members

user 
 has_many :members
 has_many :rooms ,through: :members

member
  belongs_to :room
  belongs_to :user

※ user_id  room_id持たせる


User.last&.rooms&.name
→nil

Room.last&.users&.name
→nil

```
UE4 PixelStreamingの手引き（UIカスタマイズ編）

※この記事は[UE4 PixelStreamingの手引き（導入編）](https://qiita.com/T_Sumisaki/items/d526d1fd43041856114c)の続きです。ぜひそちらもごらんください


UE4.21からEarlyAccessになったPixelStreamingは、Web上のUIからサーバ上のUE4アプリの操作が可能です
実際にキーボードやマウスの入力は常時送信され、サーバ側で実行されています

が、そんな操作ではちょっとWebシステムに取り込みづらいです
あと、全画面にUE4のプレイヤーが表示されるだけ、というのもちょっとまずいですね？
ということで、Webシステムとの連携が取りやすいようにUIをカスタマイズする方法について解説します

# 検証環境
[UE4 PixelStreamingの手引き（導入編）](https://qiita.com/T_Sumisaki/items/d526d1fd43041856114c)と同じ

# 参考リンク
https://docs.unrealengine.com/en-US/Platforms/PixelStreaming/CustomPlayer


## UE4側の設定
今回のテスト用BPの全体像です
（ThirdPersonTemplateをもとにしています）

GameModeのほうがいろいろと都合が良いので、GameModeに処理を書きました
![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/fca8646b-4d73-caf2-a661-df04f031a160.png)


WebUI側から送信したイベントは、OnPixelStreamingInputEventというDelegateEventを通してUE4アプリに渡されます
ここで紐づけたイベントの引数`Descriptor`には、WebUI側から送信された情報が格納されています（StringまたはJson文字列）

変数`Descriptor`の内容によって処理を分岐させるようにします
なお、PixelStreamingInputComponentに設定されているJsonインターフェースからはStringしか取れませんので、その他の値が欲しいときは自分でValidationを行う必要があります


## WebUI側の設定
WebUI側はJavascriptで情報を送信します

[前回](https://qiita.com/T_Sumisaki/items/d526d1fd43041856114c)の通りにセットアップしていれば、`PixelStreaming/WebServers/SignallingWebServer`フォルダをコピーして配置してあると思います
コピーしていない場合はコピーして持ってきてください

その中の、`player.htm`が、PixelStreamingで表示されるWebページのソースです

まずはボタンを追加しましょう

```html:player.htm
    <button type="button" onclick="execPrintString('Hello PixelStreaming');">Hello</button>
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/dacd049e-19f2-9870-0b7e-665915844b94.png)

それから、bodyの末尾あたりにスクリプトを追加します
このスクリプトにある関数`emitUIInteraction`の引数として与えられたJsonや文字列が、BP側の`descriptor`引数で渡されます

```html:player.htm

	<script type="text/javascript">
		function execPrintString(text) {
			var descriptor = {
				Command: 'PrintString',
				Value: text
			}

			emitUIInteraction(descriptor);
		}
	</script>

```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/4c1fb481-0a88-1645-5b61-6f16cc10e84e.png)


## 動作チェック
ここまでちゃんとできていれば、画像のような構成になっているはずです
あとはアプリをStandaloneもしくはPackagingして起動し、ボタンを押してみて、動作をチェックしてみましょう
PrintStringノードが実行されるはずです
![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/f3eb0275-8bde-1fbd-7750-a427b66e5e65.png)

後はこれを参考に、WebUI側とUE4側でそれぞれ欲しい要素を追加していくだけです
結構簡単でしょう？

なお、今回はEventを送信しましたが、他にもコンソールコマンドを送信する関数もあるので、結構自由度が高いです


# 作例
![image.png](https://qiita-image-store.s3.amazonaws.com/0/117589/0c116d9e-3001-b7b5-df9d-4cd2e494795e.png)


<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">PixelStreamingのUIカスタム結果を動画にしてみた。後ろで動いてるのがサーバ側のプロセス。HTML5の知識があればいろんなカスタムが可能になります <a href="https://twitter.com/hashtag/UE4?src=hash&amp;ref_src=twsrc%5Etfw">#UE4</a> <a href="https://twitter.com/hashtag/UE4Study?src=hash&amp;ref_src=twsrc%5Etfw">#UE4Study</a> <a href="https://t.co/KQ2WxNqoGH">pic.twitter.com/KQ2WxNqoGH</a></p>&mdash; 墨崎達哉 (@T_Sumisaki) <a href="https://twitter.com/T_Sumisaki/status/1060469858393964544?ref_src=twsrc%5Etfw">2018年11月8日</a></blockquote>
paginationとbootstrapの連携

# paginationとbootstrap
例えばrailsで全てのユーザーを表示するときなどに使うこんなやつ↓
![スクリーンショット 2018-11-08 19.47.41.png](https://qiita-image-store.s3.amazonaws.com/0/274383/3c9849e7-0514-8520-a46d-7e741e2ce8c3.png)
これをrailsで使おうと思い、Railsチュートリアルに乗っている通りにコードを書いたところ、なにやらbootstrapがうまく読み込まれていないようだった。
よくよく調べてみるとRailsチュートリアルに乗っていたgemは数年前に更新が停止していて、最新版のbootstrapには対応していないらしい。。。
そこで[このページ](https://github.com/delef/will_paginate-bootstrap4)にたどり着いた。
あとはこのページにのっている通りにviewを設定すればよかった。
railsチュートリアルでは古いバージョンのbootstrapを使うことが前提になっている箇所が多いので読み替える時には注意しないといけない。
円周率チャレンジで時間を溶かさないために

この記事は円周率チャレンジの最適解が53であることを示し、
私のように無駄に52以下の解を探して時間を溶かさないようにするための記事です。
なお、当記事は円周率チャレンジの解法のネタバレを含みます。自己責任で閲覧ください。
# 円周率チャレンジについて
[円周率チャレンジ](https://rirosi.net/plus2/)

## 概要
円周率チャレンジを数学的に述べると次のような問題です。

```math
g_1(x) = x + 2 \\
g_2(x) = \sqrt{x} 
```
とする。このとき
関数の列$f_1,\dots, f_n$ ただし$f_i \in \{ g_1, g_2\}$であって
$$ \pi = f_1 \circ f_2 \circ \dots \circ f_n (0)$$
となるもののうち最も短いものを求めよ。

ランキングを見ると現状の最適解が53であることがわかります。
それでは52以下の解は存在するのでしょうか？
# 考察
今探している解の長さの上限を固定して$N$と置きます。具体的には$N = 53$
です。
このとき、最適解$f_1, \dots, f_n$に関する必要条件として以下のことが成り立ちます。

 - $f_n = g_1$として良い。
    - なぜなら$f_n = g_2$のときは$f_1, \dots, f_{n-1}$も解となり最適性に矛盾します。
 - $i < n$のとき$f_i$の引数の値($f_{i+1} \circ \dots \circ f_n (0)$のこと)は$1$以上$2 (n - i)$以下である。
    - これは数学的帰納法で示せます。

これらの性質を用いて解を$f_1$から順に枝狩り探索で探します。

# 解法
次のような疑似コードで示されるアルゴリズムは長さN以下の解を全探索します。
$\pi$からスタートするのがポイントです。

```python
pi = 3.141592653589793
def dfs(f_1,...,f_k, v):
  if f_1 ... f_k(v) == pi:
    print f_1,...,f_k
  else:
    for f_{k+1} in [g_1, g_2]:
      v1 = f_{k+1}^{-1}(v) # f_{k+1}の逆関数
      if f_1 ... f_{k+1}(v1) == pi:
        print f_1,...,f_{k+1}
      elif 1 < v1 < 2(N - k - 1):
        dfs(f_1,...,f_{k+1}, v1)
def main():
  dfs([], pi)
```

このアルゴリズムをHaskellで実装してみるとちょうど長さ53の解が一つ見つかりました。
（ネタバレ防止のため解そのものはprintしていませんが、ネタバレしたくないひとは見ないことをおすすめします。）
[実行結果](https://ideone.com/5WwNiY)

# 結論
円周率チャレンジの最適解は53です。52以下の解を探して時間を無駄にされませんように。

## 追記
とか書いていたら$N = 50$の解がランキングに載っていました。どういうことなの。。。
CentOS7でNode-Redをインストールメモ

#インストール
###1.node
```
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
  再ログイン
$ nvm ls  //インストールできるバージョンがリスト表示される
$ nvm install v8.12.0  //nodeインストール
$ nvm use v8.12.0  //使用するnodeバージョン定義
$ nvm alias default v8.12.0  //defaultで使用するバージョン指定
```
###2.node-red
```
$ git clone https://github.com/node-red/node-red.git  //node-redダウンロード
$ cd node-red
$ npm install　 //node-redインストール
```    

```ruby:※installでインストールできない場合
$ npm install -g --unsafe-perm node-red 
```

#ファイヤーウォール設定
####参考コマンド
|処理内容|コマンド|
|:--|:--|
|サービスの起動     |systemctl start firewalld.service  |
|サービスの状態確認 |systemctl status firewalld.service |
|サービスの終了|systemctl stop firewalld.service|
|自動起動の設定|systemctl enable firewalld.service|
|アクティブゾーンの確認|firewall-cmd --get-active-zones|
|現在追加されているサービスの確認|firewall-cmd --list-services --zone=public|
|サービスの追加（publicゾーンに対して、httpsを追加する例）|firewall-cmd --add-service=https --zone=public| 
|サービスの削除|--remove-service=https --zone=public|
|現在追加されているポート番号の確認|firewall-cmd --list-ports --zone=public|
|ポート番号の追加（デフォルトゾーンに対して、TCP8080の例）|firewall-cmd --add-port=8080/tcp --zone=public|
|ポート番号の削除|firewall-cmd --remove-port=8080/tcp --zone=public|
|現在追加されているIPアドレスの確認|firewall-cmd --list-sources --zone=public|
|許可アドレスの追加|firewall-cmd --add-source=192.168.0.0/24 --zone=public|
|許可アドレスの削除|firewall-cmd --remove-source=192.168.11.0/24 --zone=public|
|拒否アドレスの追加|firewall-cmd --add-source=192.168.11.0/24 --zone=drop|
|サービス再読み込み|firewall-cmd --reload|

###今回行った設定
```
$ firewall-cmd --add-service=https --zone=public
$ firewall-cmd --add-service=http --zone=public
$ firewall-cmd --add-port=1880/tcp --zone=public
$ firewall-cmd --add-port=1883/tcp --zone=public
$ firewall-cmd --add-source=192.168.0.0/24 --zone=public
$ firewall-cmd --reload
```

#node-redのサービス化
###systemdに登録するファイルを作成
```
vi /etc/systemd/system/node-red.service
```

###node-red.serviceの編集
```
[Unit]
After=syslog.target network.target
Documentation=http://nodered.org/

[Service]
Environment="NODE_OPTIONS=--max-old-space-size=128"
Environment="NODE_RED_OPTIONS=-v"
ExecStart=/root/.nvm/versions/node/v8.12.0/bin/node $NODE_OPTIONS /root/.nvm/versions/node/v8.12.0/lib/node_modules/node-red/red.js $NODE_RED_OPTIONS
WorkingDirectory=/root/.node-red/
User=root
Group=root
Nice=10
SyslogIdentifier=Node-RED
StandardOutput=syslog
Restart=on-failure
KillSignal=SIGINT

[Install]
WantedBy=multi-user.target
```

###サービス再起動
```
systemctl daemon-reload
systemctl start node-red
systemctl status node-red -l
systemctl enable node-red
```
カスタムアロケータの basic_string を unordered_map のキーにする方法

# 問題

カスタムアロケータで特殊化した文字列型を使っていると、そのままでは unordered_map のキーにできません。

```cpp
using MyString = std::basic_string<
                     char, 
                     std::char_traits<char>,
                     MyAllocator<char>>;

...

std::unordered_map<MyString, int> umap; // エラー！
```

unordered_map が必要とする `std::hash<T>` は `std::hash<std::string>` は定義されていますが、アロケータ特殊化した文字列型の定義がないためです。

# 対処法

作った型に特殊化した `std::hash<MyString>` を自分で定義します。

C++17 環境であれば、`std::hash<std::string_view>` がつかえるので実装は簡単です。

```cpp:c++17版
template <>
struct std::hash<MyString>
{
	std::size_t operator()(const MyString& k) const
	{
		const std::string_view sv{k.c_str(), k.length()};
		return std::hash<std::string_view>()(sv);
	}
};
```

C++14 までの場合でも boost が使えるなら boost に頼りましょう。

```cpp:boost版
#include <boost/functional/hash.hpp>

template <>
struct std::hash<MyString>
{
	std::size_t operator()(const MyString& k) const
	{
		return boost::hash_range(k.begin(), k.end());
	}
};
```

どちらも使えない場合はハッシュ関数を自作するしかないです。このとき、const char* にして標準の `std::hash<T*>` を使ってはいけません。`std::hash<T*>` はポインタのアドレス値だけからハッシュを計算するので、違うアドレスに置かれた同一の文字列が別のハッシュ値になります。

[都合の良いことに Stack overflow でほぼ同じ話題があり](https://stackoverflow.com/questions/34597260/stdhash-value-on-char-value-and-not-on-memory-address)、そこで Fowler–Noll–Vo hash function が推奨されています。Wikipesia にも `The FNV hash was designed for fast hash table and checksum use, not cryptography.` と書かれているのでちょうどいいですね。これを使うことにします。

```cpp:FNV1a-hash版
#if SIZE_MAX == UINT32_MAX
constexpr std::size_t FNV_PRIME = 16777619u;
constexpr std::size_t FNV_OFFSET_BASIS = 2166136261u;
#elif SIZE_MAX == UINT64_MAX
constexpr std::size_t FNV_PRIME = 1099511628211u;
constexpr std::size_t FNV_OFFSET_BASIS = 14695981039346656037u;
#else
#error "size_t must be greater than 32 bits."
#endif

template <>
struct std::hash<MyString>
{
	std::size_t operator()(const MyString& k) const
	{
		std::size_t hash = FNV_OFFSET_BASIS;
		for(auto it = k.begin(); it != k.end(); it++) {
			hash ^= *it;
			hash *= FNV_PRIME;
		}
		return hash;
	}
};
```

これで unordered_map が使えるようになりました。

# 参考

Stack overflow のほぼ同じ話題
https://stackoverflow.com/questions/34597260/stdhash-value-on-char-value-and-not-on-memory-address

Wikipedia: Fowler–Noll–Vo hash function
https://en.wikipedia.org/wiki/Fowler%E2%80%93Noll%E2%80%93Vo_hash_function

Boost の Fowler–Noll–Vo hash function 実装
https://www.boost.org/doc/libs/1_46_1/libs/unordered/examples/fnv1.hpp
Webpack4 + Babel7 + webpack-dev-serverでReactの環境作る

備忘録として ｃ⌒っﾟдﾟ)っφ　ﾒﾓﾒﾓ...

# インストール
Webpack4から`webpack-cli`のインストールも必要になったらしい

```shell
npm i -D webpack webpack-cli webpack-dev-server
```

Babel7からcoreとかpresetとか諸々インストールの仕方から変わってた
`babel-loader`だけは今までどおり

```shell
npm i -D @babel/core @babel/preset-env @babel/preset-react @babel/polyfill @babel/register babel-loader
```

あと今回はHtmlWebpackPluginも使ってみる

```shell
npm i -D html-webpack-plugin html-loader
```

最後にReact

```shell
npm i -S react react-dom
```

# 設定
## Webpack
`@babel/register`を入れたらWebpackの設定も`webpack.config.babel.js`で書けるようになるらしい（知らなかった

```javascript:webpack.config.babel.js
import webpack from 'webpack'
import path from 'path'
import HtmlWebpackPlugin from 'html-webpack-plugin'

export default {
  mode: 'development',
  context: path.resolve(__dirname, 'src'),
  entry: './js/index.js',
  output: {
    path: path.join(__dirname, '/www'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader' },
      { test: /\.html?$/, loader: 'html-loader' },
    ],
  },
  resolve: {
    modules: [ 'node_modules', path.resolve(__dirname, 'src/js') ],
    extensions: ['.js'],
  },
  devServer: {
    inline: true,
    contentBase: path.resolve(__dirname, 'www'),
    watchContentBase: true,
    hot: true,
    open: true,
    port: 8888,
  },
  devtool: 'inline-source-map',
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ]
}
```
説明は割愛
多分特別なことはしてない一般的な設定だと思う

## Babel
インストールが`@babel/〜`になったからか、`.babelrc`の書き方も変わってた
`useBuiltIns`設定書くと勝手に`polyfill`やってくれるらしい

```json:.babelrc
{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "targets": { "browsers": ["last 2 versions"] }
    }],
    "@babel/preset-react"
  ],
  "plugins": [],
}
```

# 動かしてみる
動かすためのコマンドを追加

```json:package.json
  "scripts": {
    "start": "webpack-dev-server --hot",
    "build": "webpack --config webpack.config.babel.js"
  },
```

あとは適当にファイルを用意

```html:src/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
  <div id="main"></div>
  <script src="bundle.js"></script>
</body>
</html>
```

```javascript:src/js/index.js
import React from 'react'
import ReactDOM from 'react-dom'

const App = () => <div>Hello</div>

ReactDOM.render(
  <App />,
  document.getElementById('main'),
)
```

`npm start`で動けばOK

<img width="358" alt="スクリーンショット 2018-11-08 19.26.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/16629/c22ffa4d-f597-7605-f287-f098af69c273.png">
意外と知らないWebページが表示されるまでの過程

今までWebページがどう表示されるのか、考えたことありませんでした。
意外とそういう人多いと思っています。

なので今回はその過程をまとめました。

##Webページが表示されるまで
Yahoo（https://www.yahoo.co.jp/） にアクセスする場合

まずYahooページのIPアドレスを特定するため、DNSサーバに通信が行ってURLに対応したIPアドレスを取得します。
YahooのURLに対応したIPアドレスがわかったら、IPアドレスは住所の役割があるので、そのIPアドレスが示すWebサーバへ通信することができます。
Webサーバが特定できたら、Webサーバに「Yahooを表示する」というリクエストを出します。WebサーバはWebブラウザが送ったリクエストに応じてレスポンスが返されるため、yahooのページが表示されます。

##用語
###IPアドレス
インターネット上での住所

###DNSサーバ
IPアドレスの情報が集まっている、役所的なところ。ここでURLに対応したIPアドレスを問い合わせる。
Apache php7 のドキュメントルートを通すまで

# Apacheメモ
PHP5.6からphp7にそろそろ導入しようとしたら，ちょっとハマったからメモ

### 前提
Mac OS version 10.13.6
apacheが入っていること(多分Macは最初から入っているはず)

---
### Apacheの起動
```bash:Command
sudo apachectl start
```
`http://localhost`で
### It Works
が表示されているかの確認をする

次にドキュメントルートを通す先を作る

```bash:Command
mkdir ~/Sites/
cd ~/Sites/
touch index.php
```

確認用のphpスクリプトを作成
適当なエディタで`index.php`を開いて

```php:index.php
<?php
phpinfo();
?>
```

ドキュメントルートが通ればphpinfoが出てくる

`http://localhost/index.php`を打ってもIt Worksから変わらない

---

## httpd.confの設定をいじる

```bash:command
sudo vim /etc/apache2/httpd.conf
```

`:set number`で行数表示
177行目の`#LoadModule php7_module libexec/apache2/libphp7.so`の#を外す

245行目の DocumentRootのところをフルパスで変更

```bash:httpd.conf
DocumentRoot "/Users/{ユーザの名前}/Sites/"
<Directory "/Users/{ユーザの名前}/Sites/">
```


このドキュメントルートの設定でフルパスにしなかったからハマった
でドキュメントルートの設定終わり

### Apacheの再起動
```bash:Command
sudo apachectl restart
```

ここでForbittenが表示された
`~/Sites`に権限がないらしい

```bash:Command
chmod 755 ~/Sites
```

で`http://localhost/index.php`にphpinfoが表示されるようになった．
これでphpが動く環境が整った.
LaravelでプレーンなCookieを作る

LaravelでCookieを作る時、勝手に暗号化してしまうのを防ぐ方法。

 
## Controller

```php
public function index()
{
	$value = "test";
	$cookie = \Cookie::make("TEST_COOKIE", $value, 60, '/', 'example.com', true, true);

	return response()->withCookie($cookie);
}
```

こんな感じで作ったCookieは、Laravelが勝手に暗号化しちゃうらしい。

暗号化されたCookieは、同一ドメイン内のLaravel以外のアプリケーションで読み取ることが出来なかった。
（もしかしたらなにか方法があるのかもしれない・・・）

Cookieに埋め込んだ情報が暗号化するほどのデータではない場合、プレーンなCookieでも問題ないと思うので、Middlewareで除外をしてあげる。

## Middleware

`app/Http/Middleware/EncryptCookies.php` の `$except` 配列に除外したいCookie名を入れると暗号化を防げる。

```php

namespace App\Http\Middleware;

use Illuminate\Cookie\Middleware\EncryptCookies as Middleware;

class EncryptCookies extends Middleware
{
    /**
     * The names of the cookies that should not be encrypted.
     *
     * @var array
     */
    protected $except = [
        'TEST_COOKIE'
    ];
}
```

Cookie名はconfigで持ちたかったけども、configの内容をMiddlewareへ渡す方法がわからなかったので一旦ベタ書き対応とした。
bash-oo-frameworkで理不尽な例外が投げられる場合の対処


# bash-oo-frameworkとは

`bash-oo-framework`は、とてもすごいbash用のフレームワークです。

  * オブジェクト指向
  * ロギング
  * テストフレームワーク
  * 関数型
など様々な機能に対応しています。


英語読める方はこちら: [niieani/bash-oo-framework](https://github.com/niieani/bash-oo-framework)
日本語版のREADMEを作成中ですので気になったらみてみてください [Cj-bc/bash-oo-framework:feature/japanese-docs](https://github.com/Cj-bc/bash-oo-framework/tree/feature/japanese-docs)
ちなみに、高度なことをやっているだけあって、コードリーディングをするだけでもかなり為になります。
bash好きな人は是非。
`vimwiki`持ってる方は、[こちら](https://github.com/Cj-bc/wiki_codereading)をwikiとして登録してもらえば、僕のコードリーディングをいくらか見ることができます。（気付きやら何やら少し書いてます。）参考になれば幸いです。

# で、現在の問題点。

Qiita書く気が失せる前にパパッとやりたいので簡潔に行きます。
oo-framework知っている人を前提に話します(当たり前だけど)。

現在、class`blib`とそれを呼び出す`main`関数があります。
`blib`側で例外を吐くので、それを`main`で捕捉し処理する形で書いていました。
が、`main`自身が例外を吐く...(おそらくフレームワークのバグです。)
単純に`tryCatch`で囲むとstatus codeが取れなくなる。かといって`tryCatch`内はサブシェルになっているため、変数に格納することもできません。
どうしたものか...

# 現状の回答

若干トリッキーですが今回はこのような対策をとりました

```bash
function main() {
    # 省略
}

try {
  main $@
  e="$?" throw
} catch {
  exit ${__EXCEPTION__[1]}
}
```

つまり、 **main関数の戻り値を捕捉し、それを例外として投げて`exit`に渡す**ということです。
こうすれば`main`が例外吐いても対処できますし、status code失うこともありません。
もっとスマートに書きたい(というかそもそも`main`に例外を吐いて欲しくない)のですが現状はこれが精一杯かなと。
超雑ですがもしも誰かの役に立てれば幸いです。(そして同じ問題に直面した人、是非連絡ください...日本人のoo-framework使用者と繋がりたい...)
githubのショートカット（エイリアス）メモ

職場のパソコンを変更することになったのでメモとして

## bash_profileに記述
```
# git エイリアス
alias ls='ls -alG'
alias gs='git status'
alias ga='git add'
alias gi="git init"
alias gco="git checkout"
alias gcm="git commit -m"
alias gb="git branch"
alias gf="git fetch"
alias gba="git branch -a"
alias gbr="git branch -r"
alias gl="git log"
alias glg="git log --graph --pretty=format:'%C(yellow)%h%C(green)%d%Creset %s %Cblue[%ad]%C(bold blue)<%an>%Creset' --abbrev-commit --date=short --branches --remotes"
alias glp="git log --decorate --stat --patch"
alias gd="git diff"
alias gp="git push"
alias gc="git checkout"
alias gcb="git checkout -b"
alias gcf="git checkout --force"
alias gph="git push origin HEAD"
alias grs="git reset --soft HEAD^"
alias gcma="git commit --amend"
alias gbd="git branch --delete"

# cd エイリアス
alias c.='cd ../'
alias c..='cd ../../'
alias c...='cd ../../../'

# vsターミナル起動
code () { VSCODE_CWD="$PWD" open -n -b "com.microsoft.VSCode" --args $* ;}
```

## 更新
かなり昔だが書いて保存して「はい、つかえるー」なんて思っていた時期もあったけど
`source .bash_profile`
これをやらないと動きませんので注意


メモとして残しておこう。
github Publicリポジトリにあるスクリプトを実行し、Macの環境構築を自動化する

## はじめに

Macを買い替える度に行う環境構築を自動化しました。

本来であれば、`Ansible`を使う方が良いかと思うのですが、以下の点を考えシェルスクリプトで行うことにしました。

* コマンドラインが苦手な人でも大丈夫な親切仕様
* 出来るだけ手を動かさないで完結する

> この点を考慮し、Ansibleをインストールすることも手間であるということで、bash scriptで動作させることにしました。

## 注意書き

まっさらなMacを対象としています

## 実行環境

* Mac OS X 10.14
* Github Publicリポジトリ

> GithubのPublicリポジトリで行うのは、curlでshを実行する際にrawデータを読みやすかったので、publicで行うことにしました。


## curlでshellscriptを実行

<img width="1046" alt="Screen Shot 2018-11-08 at 18.04.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/19716/b04cdf61-7be8-8a6f-1d2e-75612768615e.png">

curlで指定するURLは、「RAW」「BLAME」「History」と並んでいるリンクの「RAW」をクリックし、開いてください。
そのページのURLを以下で指定します。

```
$ curl -sf https://raw.githubusercontent.com/ken-sayama/curl-sh/master/echo.sh | sh -s
```

上記を実行すると、`hoge`という文字列が帰ってくるかと思います。

## 環境構築用のシェルスクリプトを書く

CLIツールとGUIツールをインストールします。
ついでにRubyistのために、rbenvの設定はおまけで書いておきます。

```sh
#!/bin/bash

# install homebrew
eval '/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"'

# homebrew install cli
CLIBREWS=(
git
rbenv
ruby-build
)

for CLIBREW in ${CLIBREWS[@]};
do
  brew install $CLIBREW -y
done

# homebrew cask install gui
GUIBREWS=(
iterm2
google-chrome
sequel-pro
alfred
)

for GUIBREW in ${GUIBREWS[@]};
do
  brew cask install $GUIBREW
done

# rbenv install latest
echo 'export PATH="$HOME/.rbenv/bin:$PATH"\nif which rbenv > /dev/null; then eval "$(rbenv init -)"; fi' >> ~/.bash_profile
eval "source ~/.bash_profile"

LATEST_RUBY=$(rbenv install -l | grep -v - | tail -1)
eval "rbenv install $LATEST_RUBY"
eval "rbenv global $LATEST_RUBY && rbenv rehash"
```

以下で上記を実行することが出来ます。

```
$ curl -sf https://raw.githubusercontent.com/ken-sayama/curl-sh/master/install.sh | sh -s
```

## おまけ

例えば、shellscriptで実行させたい工程のうち、変数を使用したい部分があった場合、以下のようにすると実現が可能です。

`var.sh`ファイルを作成
https://github.com/ken-sayama/curl-sh/blob/master/var.sh


```sh
#!/bin/bash

echo $1
```

上記が書かれたファイルを用意します。

```
$ curl -sf https://raw.githubusercontent.com/ken-sayama/curl-sh/master/var.sh | sh -s '変数の値'
```

とすると、`var.sh`の`$1`部分に変数の値が展開されます。
この機能を利用して、環境変数のように扱うことで柔軟な環境構築に対応出来るかと思います。