OmniAICreator/Qiita-1.07M huggingface dataset:
Rails Heroku 本番環境のみで Deviseのカスタムviewが反映されない

# TL;DR;
**悲劇は突然に**
簡易的なアプリケーションを作成しており、ある程度、主幹機能は作り終えた。そこで、サクッとデプロイしてしまおうと思い、デプロイした。
これは、とある駆け出しプログラマーの失敗記録である。

結論を言うと、 

``` Gemfile
group :development, :test do
  slim-rails
end
```
となっており、 `slimがproductionで読まれなくなっていた`　と言うことでした。
これでなるほどとなる方は、この記事は読み飛ばして大丈夫です。
その他の人に向けて、少し、解説と、自分への戒めを残しておきたいと思います。

(突っ込みたい部分はたくさんあると思いますが、大目に見てくれると嬉しいです)

## 環境
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
- Rails 5.2.1
- Ruby 2.5.1
- mysql5.7
- heroku
- slim-rails
- devise( `新規登録の部分のview ファイル` をカスタマイズしている)

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

いつものように、 `heroku create` から、 `git push heroku master` の流れを順調に終えた。無事デプロイは完了したかのように思えた。

そこで、
確認のため、試しに新規登録のページを開いて見た。

**ない、ない。。。。追加したはずの nickname の部分のフォームがない！！！**

そう、 development環境では確かに存在していたはずのフォームが本番環境では反映されていないという状態であった。

## 試行錯誤
### 1. custom したコントローラが読まれていないのかどうか。
最初、自分はこの部分を疑った。しかしながら、サーバーログを見ると、
きちんと、
Users::RegistrationsController
と書いてあり、大丈夫そうだ。

一応、調べて見ると、意外とたくさんの記事がヒットし、同じような悩みを抱えている人も多いんだなと思いながら、色々試して見た。

#### 1-1. config/routes.rbの記述を変更する。
これは正直効果無いだろうと思いながらも、藁にもすがる思いで試した。
具体的には、

```config/routes.rb
  devise_for :users, controllers: {
    registrations: 'users/registrations'
  } 
```
このように変更するものである。
しかしながら、ログを見る限りでは、きちんと該当のコントローラが呼ばれているようだったので、あえなく失敗した。

#### 1-2. config/initializers/devise.rbの設定を変更する。
[こちらは Github の DeviseのIssue に上がっていたもの](https://github.com/plataformatec/devise/issues/3373)を参考にした。

```config/initializers/devise.rb
  config.scoped_views = true
```
このように変更したが、何も起こらず、なすすべなく、途方に暮れてしまった。

### 2. viewの呼び出しがおかしいのか
viewの呼び出しがおかしいと言っても、判断するすべを自分は持っておらず、かなり苦戦した。
(だって、ローカルでは読まれているんだもん)

何もやることがないので、仕方なく、サーバーログを見ていると、

```サーバーログ
2018-08-17T07:01:55.395701+00:00 app[web.1]: [c9457b96-3fee-484c-a808-770f595ac942] Started GET "/users/sign_up" for 111.239.172.198 at 2018-08-17 07:01:55 +0000
2018-08-17T07:01:55.401814+00:00 app[web.1]: [c9457b96-3fee-484c-a808-770f595ac942] Processing by Users::RegistrationsController#new as HTML
2018-08-17T07:01:55.403845+00:00 app[web.1]: [c9457b96-3fee-484c-a808-770f595ac942]   Rendering vendor/bundle/ruby/2.5.0/gems/devise-4.4.3/app/views/devise/registrations/new.html.erb
2018-08-17T07:01:55.456650+00:00 app[web.1]: [c9457b96-3fee-484c-a808-770f595ac942]   Rendered vendor/bundle/ruby/2.5.0/gems/devise-4.4.3/app/views/devise/shared/_links.html.erb (0.3ms)
2018-08-17T07:01:55.456729+00:00 app[web.1]: [c9457b96-3fee-484c-a808-770f595ac942]   Rendered vendor/bundle/ruby/2.5.0/gems/devise-4.4.3/app/views/devise/registrations/new.html.erb (52.8ms)
```

あれ、 `.erb` ??? `.slim` じゃないことに少しの違和感を覚えた。
そこで、

```Gemfile
gem 'slim-rails` # prod, dev, test 全てで読まれるように変更
```

してから、再度デプロイし直すと、反映された！！！

# 結論
1. Gemfileの記述(特にgroup)には注意しよう。
2. MarkUp系のGemは詰まると発見しにくい。

以上、もし、今後詰まる方がいたら、参考にして見てください。




## 補足
これに気が付いた経緯として、半年以上前、友人が rspec によるテストが通らないと言う経験が生きた。
ただ `topページを表示するためのテスト` なのだが、テストだけが通らないと言う状況でした。
この時にも原因だったのは、

```
group :development do
  gem 'haml-rails'
end
```
となっていたからであった。 やはり、環境の指定には気をつけるべきである。
www.shamaison.com の検索結果に変化があったら通知する

# シャーメゾンに住みたい
住みたい。
シャーメゾンに住むには、もちろん不動産屋に行けばいいんだけど、物件自体はWebでも見られるのでちょいちょい見ている。
が、 www.shamaison.com にはいくつか問題があって、

* ログイン機能がずさん。パスワードが設定できないので、メールアドレスさえあれば検索条件を誰でも閲覧できる
* 物件情報が更新されてもリアルタイムにメールで通知してくれない。どういうタイミングでメールが飛ぶのか分からないが深夜にも飛ぶ
* 気になっちゃって何度も見に行っては、更新されてなくてため息をついてしまう

こうしているうちに、ハラハラしている時間が無駄だなと気づいて(今更感あるけど)、もう更新されたらすぐ通知してくれるような仕組みを自作した。


# 通知の仕組み
www.shamaison.com は検索条件を保存することができて、保存するとそれぞれに `RID` というのが振られるような仕様のようだ。
このRIDは、検索条件を保存し、なおかつメール通知設定をすると、設定完了時に受信できるメール内に記述がある。

cf. https://www.shamaison.com/request/srch?RID=xxxxxxxxxx

このRIDはわかってしまえばログイン不要でどこからでも閲覧可能という、セキュリティとは何なのかを考えさせるような仕組みになっている。
この仕様を利用し、HTMLページをポーリングして、差分を検知できればよい。


# 実装

```bash
#!/bin/bash

declare -r URL="https://www.shamaison.com/request/srch?RID=xxxx"
declare -r LOG_PATH="/tmp/shamaison.log"
declare -r HIT_PATH_BEFORE="/tmp/shamaison_hitnum.before"
declare -r HIT_PATH="/tmp/shamaison_hitnum.now"
declare -r SRCADDR="(送信元メールアドレス)"
declare -r DSTADDR="(受信するメールアドレス)"

# 前回との差分を計算するための事前処理
rm -rv ${LOG_PATH} ${HIT_PATH_BEFORE}
touch ${HIT_PATH}
mv -v ${HIT_PATH} ${HIT_PATH_BEFORE}

# 今回分のクロールを実行
wget ${URL} -O ${LOG_PATH}
nkf -w ${LOG_PATH} | grep "hitNm01" > ${HIT_PATH}

# 差分があればメールを送信する
CHANGELOG="$(diff -u ${HIT_PATH_BEFORE} ${HIT_PATH})"
if [ $? -ne 0 ]; then
  cat << EOD | /usr/bin/nkf --ic=UTF-8 --oc=ISO-2022-JP | /usr/sbin/sendmail -i -f ${SRCADDR} ${DSTADDR}
From: ${SRCADDR}
To: ${DSTADDR}
Subject: shamaison change alert
Content-Type: text/plain; charset=ISO-2022-JP
MIME-Version: 1.0

${URL}

${CHANGELOG}
EOD
fi
```

あとは crontab　に登録すればよい。ポーリング間隔は良心的な数字にしておくとよい。
頻繁にアクセスしたところで嬉しいことはたぶんない。

```bash
*/10 * * * * bash /usr/local/bin/shamaison_checker.sh > /dev/null 2>&1
```
Grafanaの全dashboardをCLIからexportする

exportできるんだけどGUIからポチポチするのめんどい dashboard as codeの障害

API roleはEditorでいけた

~~~bash
#!/bin/bash

HOST="${1:-http://localhost:9500}"
GRAFANA_API_KEY=YOUR_KEY

EXPORT_DIR=${EXPORT_DIR:-dashboards}

mkdir -p $EXPORT_DIR

for dash in $(curl -s -k -H "Authorization: Bearer $GRAFANA_API_KEY" $HOST/api/search\?query\=\& | jq -r ".[].uri" ); do
  filename=`echo $dash.json | cut -c 4-`
  echo "export $filename"
  curl -s -k -H "Authorization: Bearer $GRAFANA_API_KEY" $HOST/api/dashboards/$dash | jq ".dashboard " > ${EXPORT_DIR}/$filename
done
~~~
【jQuery の基本】変数代入（var）がうまくいかなかった

#ちょっと使えるようになったからって調子に乗ったらハマった
変数代入（var）の使い方がなんとなくわかってきたので、アホの一つ覚えのように代入しまくってたらハマりました。
ちゃんと勉強してたらわかりそうなもんだけど、解決までにまぁまぁ時間かかったので記録がてらメモします。
同じようなミスで困ってる人の手助けに・・・同じようなミスする人いるかなぁ

##ドロップダウンメニューを作りました

<p data-height="265" data-theme-id="0" data-slug-hash="PBMPex" data-default-tab="html,result" data-user="kapeking" data-pen-title="ドロップダウンメニュー（いっこく堂現象解消Ver）" class="codepen">See the Pen <a href="https://codepen.io/kapeking/pen/PBMPex/">ドロップダウンメニュー（いっこく堂現象解消Ver）</a> by かぺ (<a href="https://codepen.io/kapeking">@kapeking</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

##変数代入とかいうやつで見た目をスッキリさせようとしました

問題の箇所はこちら。

```js:jQuery(BEFORE)
$(function(){
$(".subList").hide();
        $(".navTitle").hover(function(){
            $(".subList:not(:animated)",this).slideDown("fast");
                },function(){
            $(".subList:not(:animated)",this).slideUp("fast");
        });
});
```
**【varについての自分的理解】**

 + 初期設定である
 + 同じ記述のとこを代入できる

改めて書くと我ながらひどい。ちゃんと調べよう。⇒<font color="blue">【宿題01】varについて調べる （後日提出）</font>

さて、話を戻してそんな自分が導き出した変数代入の方法がこちら。

```js:jQuery(AFTER)
$(function(){
  var $subList = $(".subList:not(:animated)",this);
$(".subList").hide();
        $(".navTitle").hover(function(){
            $subList.slideDown("fast");
                },function(){
            $subList.slideUp("fast");
        });
});
```
 <font color="red">$(".subList:not(:animated)",this);</font>っていう記述が2か所あるから**$subList**って名前付けてまとめたら超スッキリやん！カンペキ！

##動きがおかしくなりました・・・。

<p data-height="265" data-theme-id="0" data-slug-hash="ZjgQvX" data-default-tab="html,result" data-user="kapeking" data-pen-title="ドロップダウンメニュー（いっこく堂現象解消できてないVer）" class="codepen">See the Pen <a href="https://codepen.io/kapeking/pen/ZjgQvX/">ドロップダウンメニュー（いっこく堂現象解消できてないVer）</a> by かぺ (<a href="https://codepen.io/kapeking">@kapeking</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

思ってたんとちゃう。なんでや。

###原因
どうやら <font color="red">this</font> の位置がまずいらしい。
初期設定の時点で <font color="red">this</font> と設定してしまうとどこのこと言ってんの？ってなっちゃうってことのようだ。
<font color="red">this</font> を使うならトリガーの後に！今回の場合は**.hover()**の後。

⇒<font color="blue">【宿題02】this について調べる（後日提出）</font>

##直りました

<p data-height="265" data-theme-id="0" data-slug-hash="OweXLo" data-default-tab="html,result" data-user="kapeking" data-pen-title="ドロップダウンメニュー（いっこく堂現象解消変数代入Ver）" class="codepen">See the Pen <a href="https://codepen.io/kapeking/pen/OweXLo/">ドロップダウンメニュー（いっこく堂現象解消変数代入Ver）</a> by かぺ (<a href="https://codepen.io/kapeking">@kapeking</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

```js:jQuery(修正版)
	$(function(){
  	var subList = ".subList:not(:animated)";
  		$(".subList").hide();
		  $(".navTitle").hover(function(){
			  $(subList,this).slideDown("fast");
				},function(){
			  $(subList,this).slideUp("fast");
		  });
  });
```
thisの位置を気をつけつつvarを使ってみました！ちょっとすっきりしたよね？
QiitaのMarkdownコードブロックにコードブロックをネストする書き方

　以前書いたMarkdown+UMLの記事で、Markdownのコードブロック内にコードブロックを書いて説明しようとしてコードブロックの終了記法 <code>&#096;&#096;&#096;</code> をエスケープできずにあきらめたことがあったのだが、その回避方法を見つけた。

　つまりは、記事内で下のような表現をしたい時に使える。

<pre>
```flow
something...
&#096;&#096;&#096;
</pre>

　以前は、上記のように書こうとしても最後の行の <code>&#096;&#096;&#096;</code> がうまくエスケープできなかったのだが、うまいやり方を見つけた次第だ。
　上記のコードブロックであれば、

```html
<pre>
```flow
something...
&#096;&#096;&#096;
</pre>
```

─と、あえてmarkdownのコードブロック記法である <code>&#096;&#096;&#096;</code> を使わずに `<pre>` タグを使い、ブロック終了記法のところをHTMLエンティティで文字列参照させる。

 インラインのコードブロックであれば、

```html
<code>&#096;&#096;&#096;</code>
```

─と書けば、 <code>&#096;&#096;&#096;</code> が表示される。

　ちょいネタっす…（でも個人的に結構うれしいw）。
Mac で Julia #1


速くていろいろ良さげな[Julia](https://ja.wikipedia.org/wiki/Julia_(プログラミング言語))という言語が2018年8月にVer.1.0になりましたのでMacで環境構築してみました。

- [公式サイト](https://julialang.org)

## ダウンロード＆インストール

- 公式サイトからダウンロードする手もありますが、brew(cask)でもインストールできるようなのでインストールします。

```
sh-3.2$ brew cask info julia
julia: 1.0.0
https://julialang.org/
Not installed
From: https://github.com/Homebrew/homebrew-cask/blob/master/Casks/julia.rb
==> Name
Julia
==> Artifacts
Julia-1.0.app (App)
/Applications/Julia-1.0.app/Contents/Resources/julia/bin/julia (Binary)
sh-3.2$
```

- ちゃんと1.0のようですね。

```
sh-3.2$ brew cask install julia
Updating Homebrew...
==> Homebrew is run entirely by unpaid volunteers. Please consider donating:
  https://github.com/Homebrew/brew#donations
==> Auto-updated Homebrew!
・・・中略
==> Satisfying dependencies
==> Downloading https://julialang-s3.julialang.org/bin/mac/x64/1.0/julia-1.0.0-mac64.dmg
######################################################################## 100.0%
==> Verifying checksum for Cask julia
==> Installing Cask julia
==> Moving App 'Julia-1.0.app' to '/Applications/Julia-1.0.app'.
==> Linking Binary 'julia' to '/usr/local/bin/julia'.
🍺  julia was successfully installed!
sh-3.2$ julia -v
julia version 1.0.0
sh-3.2$
```

- インストールＯＫですbrewって素晴らしいですよね。

また、/Applications以下にもappがインストールされて、それをダブルクリックするとこんな画面がでました。

![julia.png](https://qiita-image-store.s3.amazonaws.com/0/51116/dc04a032-0dca-d061-c316-60bd6f64ecee.png "julia.png")

## Visual Studio Codeで機能拡張

- 公式サイトのJulia Editors and IDEsを見るとVS Code Extensionもあるそうなのでこれをメインに環境構築したいと思います。
- 機能拡張タブからjulia機能拡張をインストールします。現時点ではv0.10.3でした。

![juliaex.png](https://qiita-image-store.s3.amazonaws.com/0/51116/30cb8f8a-cf6f-1bbf-220d-ebc71142e83b.png "juliaex.png")


## VS Code で 動作確認

- juliaの拡張子はjlだそうなので、test.jlというのを作成します。
- 適当にコードを書いて...コメントは＃のようです。

```julia
# Hello World
str = "World!"
println("Hello $(str)");

#= 
    function
=# 
add(x,y) = x + y
v = 10;
println(add(v,3));
```

- 実行！

```
sh-3.2$ julia test.jl
Hello World!
13
sh-3.2$
```

- ばっちりですね。

- 次からは、[ドキュメント](https://docs.julialang.org/)に沿って試していきたいと思います。
INTER-Mediatorをはじめよう - バーチャルマシンの準備(Youtubeなしバージョン)

# はじめに
INTER-Mediatorでは、学習用にINTER-Mediator搭載のバーチャルマシンが用意されています。ここでは、MacBook Air(macOS High Sierra)にそのバーチャルマシンをダウンロードからセットアップまで解説します。(2018/08/17現在の最新版でのセットアップ手順を記述)

# ゴール
VirtualBox.app (Oracle製)と INTER-Mediator-Server VM (INTER-Mediator Commitee製)をダウンロードしてセットアップします。バーチャルマシンを起動して、ホスト側(macOS)のSafari.appからバーチャルマシン側で構築されたINTER-Mediatorのサンプルページが見えれば完成です。

# 前提条件
* MacBook Air + macOS High Sierra (10.13.6)
* インターネット接続環境
* VirtualBox.appダウンロード [ORACLE: VirtualBox 5.2.18](https://download.virtualbox.org/virtualbox/5.2.18/VirtualBox-5.2.18-124319-OSX.dmg)
* INTER-Mediator-Server VMダウンロード [INTER-Mediator-Server VM 5.8-RC2](https://inter-mediator.com/archives/INTER-Mediator-Server-VM-5.8-RC2.ova)



# 手順

### 手順1: VirtualBox.appをダウンロード
[VirtualBox 5.2.18](https://download.virtualbox.org/virtualbox/5.2.18/VirtualBox-5.2.18-124319-OSX.dmg)をダウンロードする。

### 手順2: 『VirtualBox-5.2.18-124319-OSX.dmg』を解凍して、『VirtualBox.pkg』をインストール

![スクリーンショット 2018-08-17 12.38.19.png](https://qiita-image-store.s3.amazonaws.com/0/54439/ab1cabda-dfd5-4043-4275-e36f51139255.png)

![スクリーンショット 2018-08-17 12.49.05.png](https://qiita-image-store.s3.amazonaws.com/0/54439/b9f36a39-9e79-0e3c-a2a3-668c2be4f409.png)


### 手順3: 『VirtualBox.app』を起動。『グローバルツール』の『ホストネットワークマネジャー』開き、『作成(C)』し、『vboxnet0』を追加する。DHCPサーバーにチェックを入れて有効にする。

<img width="1163" alt="スクリーンショット 2018-08-17 12.54.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/54439/70f0a1b3-5b40-5486-4021-cf80b2e5686a.png">

<img width="1163" alt="スクリーンショット 2018-08-17 12.54.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/54439/2684d311-662a-97c4-097d-292f8df6d306.png">

### 手順4: 『ファイル』メニューの『仮想アプライアンスのインポート...』をクリックし、『INTER-Mediator-Server VM 5.8-RC2』を読み込む。

![スクリーンショット 2018-08-17 18.13.17.png](https://qiita-image-store.s3.amazonaws.com/0/54439/64d8d253-30f5-8cc1-b9aa-7c8d170f4b8a.png)




### 手順5: 『INTER-Mediator-Server』を選択し、『起動(T)』をクリックする。

![スクリーンショット 2018-08-17 18.13.53.png](https://qiita-image-store.s3.amazonaws.com/0/54439/f2c7d9c2-fb6a-1de8-8b04-0e99805abf4f.png)



### 手順6: 『Safari.app』で『192.168.56.101』にアクセスし、動作しているか確認する。

![スクリーンショット 2018-08-17 18.16.01.png](https://qiita-image-store.s3.amazonaws.com/0/54439/262880a1-259f-cc18-02ad-10b770b4365a.png)



## オプション
INTER-Mediatorのバーションを更新したい場合のGitHubからPullする方法

### オプション1: 『Terminal.app』を使用し、『ssh』コマンドで『INTER-Mediator-Server』ログインする。

```text:Terminalコマンド
$ ssh developer@192.168.56.101
```

### オプション2: 『cd』コマンドで『INTER-Mediator』ディレクトリに移動する。

```text:Terminalコマンド
$ cd /var/www/html/INTER-Mediator
```

### オプション3: 最新のINTER-Mediatorを『git』コマンドで更新する。

```text:Terminalコマンド
$ git pull
```
2次元vectorをforループを使わずに初期化する

2次元vectorを全ての要素を同じ値で初期化したい場合、初期化する方法はいくつもあると思います。
ほとんどforループを必要としないNumPyに慣れてしまっていると、単なる初期化処理にforループを書くことにものすごく抵抗感があります。どうしてもforループを書きたくないので書かなくていい方法を探しました。

forループを使わずに短いコードで書ける方法として下の2つの方法が見つかりました。

# 1. コンストラクタで直接初期化する

この方法がもっとも短く書けると思いますが、何をやっているのか少し読みとりにくい感じがします。

```cpp
#include <iostream>
#include <vector>
#include "cxx-prettyprint/prettyprint.hpp"
using std::vector;

int main() {
    int n_rows = 5;     // 行数
    int n_cols = 3;     // 列数
    int value = 1;      // 初期値

    vector<vector<int>> vec(n_rows, vector<int>(n_cols, value));
    // または
    // auto vec = vector<vector<int>>(n_rows, vector<int>(n_cols, value));
    std::cout << vec << std::endl;
}
```

```:出力
[[1, 1, 1], [1, 1, 1], [1, 1, 1], [1, 1, 1], [1, 1, 1]]
```

# 2. 空のvectorに後から値を割り当てる

最初に空のvectorとして宣言してから、assign関数で値を割り当てる方法もあります。
コードは1行増えますが、何をやっているのかは読み取りやすいと思います。

```cpp
#include <iostream>
#include <vector>
#include "cxx-prettyprint/prettyprint.hpp"
using std::vector;

int main() {
    int n_rows = 5;     // 行数
    int n_cols = 3;     // 列数
    int value = 1;      // 初期値

    vector<vector<int>> vec;
    vec.assign(n_rows, vector<int>(n_cols, value));
    std::cout << vec << std::endl;
}
```

```:出力
[[1, 1, 1], [1, 1, 1], [1, 1, 1], [1, 1, 1], [1, 1, 1]]
```

## 補足

値の出力には[cxx-prettyprint](https://github.com/louisdx/cxx-prettyprint)を使っています。cxx-prettyprintについては下の記事を参考にしてください。

[vectorなどのコンテナの内容をPythonみたいに簡単にcoutに出力する方法 - Qiita](https://qiita.com/alchemist/items/b42350842a126182aa8d)
Javascript 函式 - 基礎使用 By 彭彭 15



	4. 函數教學
		a. 函數基礎
		b. 函數變形與名稱空間


```ruby:qitta.rb
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"></meta>
	<title>Javascript</title>
	<script type="text/javascript">
// 函數的變形,函數是一種資料
// 把資料放進函數里
/*	var add = function(n1,n2){
		alert(n1+n2);
	};
	add(20,20);
	var test = add;
	test(10,20);
*/
// 函數創造新的名稱空間
	var x = 3; // 全區域空間,全區域變數
	function test(){
		var x = 5; // 區域空間,區域變數
		var y = 6;
		alert(x+y);
	}
	test();
	alert(x);
// 結論: 外部的代碼,不能使用内部的變數
	</script>

</head>
<body>
</body>
</html>
```
nuxt-expressで立てたサーバーをparallels上のWindowsから確認したい

# 結論
起動時のhostを0.0.0.0に向ける。

```server/index.js
// const host = process.env.HOST || '127.0.0.1'
const host = process.env.HOST || '0.0.0.0'
```

言われてみればそうなんですけど、webpackの設定であれこれするかなど悩んでしまいがち。

### parallels上のWindowから確認する場合はこちら
OSX parallels上で動かしているWindowsからlocalhostにアクセスする
https://qiita.com/hiro93n/items/2fbf2ddb0c2b4b991195
VSCodeで.vueファイルを保存時にフォーマットする

Veturを入れた上で、User Settingsに以下を追加する。

```javascript
{
    ...
    "standard.autoFixOnSave": true,
    "standard.validate": [
        "javascript",
        {
            "language": "html",
            "autoFix": true
        }
    ],
}
```

以上です。
WordPressのメディアアップロードで日本語ファイルを文字化けさせずにアップロード

WordPressでファイル名に日本語など半角英数以外の文字が含まれていると、メディアアップロードした際に、ファイル名がランダムな英数に変わっていることがあります。

これは、WP Multibyte Patchというプラグインが、ファイル名をサニタイズしているために起こるので、アップロードしたファイル名を日本語のままにしておきたい場合には、以下のように設定します。

①　`wp-content/plugins/wp-multibyte-patch` にある `wpmp-config-sample-ja.php` をコピーしてファイル名を `wpmp-config.php` とする。

②　`wpmp-config.php` の中身を編集します。
`$wpmp_conf['patch_sanitize_file_name'] = true;` という項目を探し、
設定値を`false`にします。
`$wpmp_conf['patch_sanitize_file_name'] = false;`

③　編集後の `wpmp-config.php` を `wp-content/` 直下にアップロードします。

これで、自動的にアップロードされたファイルがサニタイズされるのを防ぎ、日本語のファイルをそのままアップロードすることができるようになります。
JavaScript で文字列の配列を数値の配列にしたい

文字列の配列 `['1', '2', '3']` の各要素を Array.map() で変換して、数値の配列 `[1, 2, 3]` にしたい。

# 失敗例
```js
['1', '2', '3'].map(parseInt);
```
上記の戻り値は、 `[1, NaN, NaN]` になってしまう。原因は後述。

# 結論
小数や指数を含んでもよい場合

```js
['1', '2', '3'].map(Number);
```

int限定の場合

```js
['1', '2', '3'].map( str => parseInt(str, 10) );
```

# 参考
[parseInt() のドキュメント](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/parseInt)
[Array.map() のドキュメント](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map) (「トリッキーな使用例」の項)
[上記のインスパイア元のブログ](http://www.wirfs-brock.com/allen/posts/166)

以下は、参考ページの内容を自分なりに解釈・要約したものです。
正確な内容は上記ページをご参照ください。

# parseInt ではだめな理由
## 前提１　Array.map()の仕様
### 構文
```js
var new_array = arr.map(function callback(currentValue[, index[, array]]) {} )
```
### 引数
- callback：
  新しい配列の要素を生成するための関数。次の3つの引数を取る。
 - currentValue：
現在処理中の要素の値。
 - index：
**現在処理中の要素の配列内におけるインデックス。**
 - array：
map が実行されている配列。

### 戻り値
与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列。

## 前提２　parseInt() の仕様
### 構文
```js
parseInt(string, radix);
```
### 引数
- string：
解析する値。引数stringが文字列でなければ、(抽象操作ToStringにより)文字列に変換される。
- radix：
**2から36までの整数で、前述の文字列に対する基数(数学的記数法の底)を与える**。基数が与えられない場合、通常は10。

### 戻り値
与えられた文字列を解析した整数値。最初の文字を数値に変換できない場合、NaN が返される。


## つまり？
```js
['1', '2', '3'].map(parseInt);
```
上記のように記述してしまうと、実際の parseInt() の呼び出しは下記のようになる。

```js
parseInt("1", 0); // 第2引数はデフォルトの10になる※
parseInt("2", 1); // 1が基数として渡されるためNaNが返る
parseInt("3", 2); // 2が基数として渡され、"3"は2進数として解析できないためNaNが返る
```

※[parseInt() のドキュメント](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/parseInt)より、第2引数が0のときの基数は10とは限らない。
> 第2引数のradixがundefinedか0の(または与えられていない)場合は、JavaScriptはつぎのように解釈します。
>
> - 第1引数のstringが「0x」または「0X」で始まるときは、第2引数のradixは16(16進法)としてその後の文字列を解析します。
> - 第1引数のstringが「0」で始まるときは、第2引数のradixは8(8進法)または10(10進法)とされます。厳密には、基数がどちらになるかは実装によります。ECMAScript 5 の仕様では10(10進法)です。ただし、まだすべてのブラウザがサポートしている訳ではありません。したがって、parseInt()関数を使うとき基数は必ず与えてください。
> - 第1引数のstringがその他の値で始まるときは、第2引数のradixは10(10進法)とされます。



（蛇足）配列の値によっては下記のようになる。

```js
["0XFF","2","10"].map(parseInt); // 戻り値は [255, NaN, 2]（ 16進数、NaN、2進数）
```


## parseIntを使うなら

ファンクションを別途定義する。

```js
function returnInt(element) {
  return parseInt(element, 10); // 第二引数を明示する
}

['1', '2', '3'].map(returnInt); // [1, 2, 3]
```

アロー関数を使うと短く書ける。

```js
['1', '2', '3'].map( str => parseInt(str, 10) ); // [1, 2, 3]
```

渡す値が決まっているならNumberオブジェクトを使うのが一番簡潔。

```js
['1', '2', '3'].map(Number); // [1, 2, 3]

// 小数表現や指数表現も解釈できる（してしまう）
['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]
```
CakePHP+MailHog+dockerでメールテストをしてみる

##はじめに
CakePHPでメールを利用したパスワードリセット処理を実装したい。
ローカル環境でメールサーバーを立てるにはMailhogが便利だというので使ってみた。
##開発環境
- CakePHP 2.4
- PHP 5.6
- CentOS 6.9
- docker

##MailHogについて
MailHogとはSMTPサーバーの一つでテストメールに使用できます。
docker Hubでイメージが公開されていますので、導入が非常に簡単にできます。

##導入方法
###MailHogのコンテナを作る
以下を追記します。

```yaml:docker-compose.yml
mailhog:
  image: mailhog/mailhog
  ports:
    - "8025:8025" 
    - "1025:1025"
```
この8025はMailHogのHTTPサーバーのデフォルトポート番号です。1025はSMTPサーバーのポート番号になります。
今回はメール送信をしたいので、SMTPサーバーのポート番号を追加しておく必要があります。

###Dockerを再起動する
`docker-compose up` を実行。
`docker ps -a` でMailHogのコンテナが新しく作成されているのが確認できると思います。
http://localhost:8025 にアクセス。
![スクリーンショット 2018-08-17 13.21.40.png](https://qiita-image-store.s3.amazonaws.com/0/246277/63c8cd8d-83eb-4b7e-0a6a-d4ce132743cf.png)
こんな感じでMailHogの画面が表示されると思います。

###CakePHP側での設定
`app/Config/email.php.default`　を　`app/Config/email.php`　にリネーム。

```php:app/Config/email.php
public $smtp = array(
    'transport' => 'Smtp',
    'from' => array('from@localhost.com' => 'My Site'),
    'host' => 'mailhog',
    'port' => 1025,
    'timeout' => 30,
    'username' => 'user',
    'password' => 'secret',
    'client' => null,
    'log' => true,
    'charset' => 'utf-8',
    'headerCharset' => 'utf-8',
);
```
こんな感じ。
hostにはMailHogのコンテナ名を入力。
portはMailHogのSMTPサーバーのポートは1025なのでそれを入力。
fromのメールアドレスはなんでもいいですが、形式が合っていないとエラーになります。
logをtrueにするとエラーログに内容が吐かれます。

###実際にメールを送ってみる
![スクリーンショット 2018-08-17 15.04.56.png](https://qiita-image-store.s3.amazonaws.com/0/246277/5cc58c51-9a41-f44e-c658-2912bdece088.png)
こんな感じでフォームにメールアドレスを入力すると、そのメールアドレスに送られてくるイメージで作成します。

```php:Controller
App::uses('CakeEmail', 'Network/Email');

public function send_mail()
{
    if(isset($this->request->data['Email']['address'])) {
         $email = new CakeEmail('smtp');　//　この引数はemail.phpの変数を入れます。今回はsmtpを使用します。
         $email->to($this->request->data['Email']['address']) //　フォームに入力したメールアドレス
               ->subject('title')
               ->send('mailbody');
    }
}
```
こんな感じでしょうか。例外処理とかガン無視ですがこれで送信はできるはずです。送信ボタンﾎﾟﾁ−
![スクリーンショット 2018-08-17 15.37.01.png](https://qiita-image-store.s3.amazonaws.com/0/246277/02688d41-8243-b672-f691-5392bd5998f7.png)
ちゃんと届いてますね！
Javascript 函式 - 基礎使用 By 彭彭 14


	4. 函數教學
	a. 函數基礎
	b. 函數變形與名稱空間


```ruby:qitta.rb
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"></meta>
	<title>Javascript</title>
	<script type="text/javascript">
	// 内建函數
	//alert("hello world");
	// 函數的基礎 設計階段
	
	/*
	// 設計階段
	function add(n1,n2){
		alert(n1+n2);
		return n1+n2;
	}
	// 呼叫/使用階段
	var result = add(3,4) + add(10,20);
	alert(result);
	*/
	
	// 整合範例
	function getSum(max){
		var sum = 0;
		var n = 1;
		while(n<=max){
			sum += n;
			n++;
		}
		alert(sum);
		return sum;
	}
	var result = getSum(50) * getSum(100);
	alert(result);
	
	</script>

</head>
<body>
</body>
</html>
```
Ruby Sass is deprecated and will be unmaintained as of 26 March 2019.

bundle install したら、見慣れないメッセージが。

```
Ruby Sass is deprecated and will be unmaintained as of 26 March 2019.

* If you use Sass as a command-line tool, we recommend using Dart Sass, the new
  primary implementation: https://sass-lang.com/install

* If you use Sass as a plug-in for a Ruby web framework, we recommend using the
  sassc gem: https://github.com/sass/sassc-ruby#readme

* For more details, please refer to the Sass blog:
  http://sass.logdown.com/posts/7081811
```

sasscの方にしろって。

```
vi Gemfile
>>>
#gem 'sass-rails', '~> 5.0'
gem 'sassc-rails'
<<<

vi Gemfile.lock
>>> sass辺りを削除
-    sass-rails (5.0.7)
-      railties (>= 4.0.0, < 6)
-      sass (~> 3.1)
-      sprockets (>= 2.8, < 4.0)
-      sprockets-rails (>= 2.0, < 4.0)
-      tilt (>= 1.1, < 3)
<<<

gem uninstall sass-rails
bundle install
```
Tweepyを使って、指定したユーザーがフォローしている人を全部フォローする

# 全フォロー君

## 説明
指定したユーザーがフォローしている人を全部フォローできる。

## コード
```addUser.py
CONSUMER_KEY = ""
CONSUMER_SECRET = ""
ACCESS_KEY = ""
ACCESS_SECRET = ""
auth = tweepy.OAuthHandler(CONSUMER_KEY, CONSUMER_SECRET)
auth.set_access_token(ACCESS_TOKEN, ACCESS_SECRET)

#APIインスタンスを作成
api = tweepy.API(auth)
userid = "" #ここに自分のuseridを入れる
targetid = "" #フォロワーが欲しいユーザーのuseridを入れる
following_id = api.friends_ids(userid) #自分のアカウントのフォロイングをすべて取得する
target_following_id = api.friends_ids(targetid)#ターゲットのアカウントのフォロイングを全て取得する
for target_following in target_following_id:
   if target_following not in following_id: #ターゲットがフォローしているユーザーだけ取得する
     print("フォローするユーザー名")
     targetname = api.get_user(target_following).name
     print(targetname)
     api.create_friendship(target_following)
画面更新処理の呼出タイミング

#趣旨
angularで外部サービスからデータを取得した後、viewに反映するとして。
viewに反映する内容をJqueryで動的に更新したい時の注意点です:grinning:

##ライフサイクルイベントに頼らない
###NG:ライフサイクルイベントでJQuery呼び出し
- OnChanges利用→サービス呼び出しが完了するより前に終わってしまう
- DoCheck利用→DoCheckによるview更新を自分で拾って無限ループ
- AfterViewInit利用→view反映より先に終わってしまう
- AfterViewChecked利用→AfterViewCheckedによるview更新を自分で拾って無限ループ


###OK:サービス呼び出し完了とともにJQuery呼び出し

```html:history.component.html
<div class="history-table">
    <table class="history-body">
        <tbody>
            <tr *ngFor="let record of lodossWar">
                <td>{{record.Year}}</td>
                <td>{{record.Event}}</td>
            </tr>
        </tbody>
    </table>
</div>
```

```ts:historyComponent.ts
import {
  Component,
  Input,
  OnChanges,
} from '@angular/core';

// jQuery用の変数宣言
declare var $;

@Component({
  selector: 'history-component',
  templateUrl: './history.component.html'
})
export class HistoryComponent implements OnChanges {
  @Input()
  actionMode: string;

  // 画面に表示するレコード
  private lodossWar;

  constructor(private recordService: RecordService) {}

  ngOnChanges() {
    if (this.actionMode === 'reload') {
        this.recordService
        .requestRecords()
        .subscribe(records => {
          // 検索結果をセット
          this.lodossWar = records;
          // JQuery呼び出し
          this.callJQuery();
        });
    }
  }

  private callJQuery() {
    // なんらかの処理
    $(function() {
      ...
      }
    });
  }
}
```

横着してライフサイクルイベントに任せようと考えるんじゃなくて
サービス呼び出しが完了したその場で処置しようねって事ですね:sweat:
GoogleフォントがIE11で正常に表示されなくなった

備忘録代わりに。
##何が起こったか
IE11で[Googleフォントの『Rounded M+ 1c』](https://googlefonts.github.io/japanese/#roundedmplus1c)を使ったサイトを見ると、フォントが正常に表示されない。
（『さわらび明朝』などほかのフォントや、アルファベットだけは正常に表示されるっぽい？）
###Chrome
![Google Fonts   日本語 早期アクセス • Google Fonts   Japanese Early Access.png](https://qiita-image-store.s3.amazonaws.com/0/191243/3596c9f9-d5d2-4211-e6a4-0c761153e97f.png)
###IE
![名称未設定 1.png](https://qiita-image-store.s3.amazonaws.com/0/191243/4e1d8ff4-abf8-7ca3-e306-2e56c77aba0d.png)
そもそもIEだとレイアウトめっちゃ崩れてますね……。



##解決策
1. 早期アクセスじゃない方のGoogleフォントのページにアクセス。
https://fonts.google.com/specimen/M+PLUS+Rounded+1c
![M PLUS Rounded 1c   Google Fonts.png](https://qiita-image-store.s3.amazonaws.com/0/191243/06ce5a67-4296-2800-4738-48743848a01b.png)

2. SELLECT THIS FONTを選択し、CUSTOMIZEのLanguagesで『Japanese (Supported by M PLUS Rounded 1c)』を選択。
![M PLUS Rounded 1c   Google Fonts (1).png](https://qiita-image-store.s3.amazonaws.com/0/191243/7c366fc9-3ea9-768c-d416-cdb1c9c9ba49.png)

3. EMBEDをクリックし、CSSを貼りなおす。
![M PLUS Rounded 1c   Google Fonts (2).png](https://qiita-image-store.s3.amazonaws.com/0/191243/e7619f3c-67ec-c793-287f-2ed130bfffdd.png)

4. おわり。

##最後に
IEィィィアアアアアーッ！！
VS Code 1.26 の新機能 - 階層リンク(パンくずリスト)

https://code.visualstudio.com/updates/v1_26#_breadcrumbs

階層リンク(いわゆるパンくずリスト)の機能が実装された。

デフォルトでは機能はオフになっているので、メニューバーの`表示`の中の`Toggle Breadcrumbs`で切り替えるか、設定`breadcrumbs.enabled`を変更すると使えるようになる。

~~(なお、v1.26.0の時点ではbreadcrumb関連のコマンドに日本語訳がまだ付いてなく、メニューでのコマンド表示も`breadcrumbs`になっている。設定画面でのコマンド説明を見ると「階層リンク」という訳が見られるのでこれが対訳？)~~ → v1.27でメニュー表示も「階層リンク」に変更された。

表示場所は、タブ表示をONにしている場合はタブの下に、OFFにしている場合はファイル名の横に表示される。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/181011/4f438c03-ce36-52cc-7ae7-21da40f46e20.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/181011/4084b927-eeeb-cd8c-73b9-7c9056e17675.png)
シンボルに対応しているファイルタイプの場合は、ファイル名表示のさらに先に`...`が表示される。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/181011/f416207a-fbeb-3ca3-ad20-d0b5096b025f.png)
階層リンクにフォーカスを移動させるには`Ctrl`+`Shift`+`.`を押すかマウスでクリックする。すると、最下層の(あるいは選択した)フォルダ内のファイルがプルダウン表示される。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/181011/b9c62d23-1f3a-c54e-db58-ce2ce287075a.png)
`↑`/`↓`でファイルを選択したり、フォルダの場合は`←`/`→`でツリーの展開/折りたたみができる。`Ctrl`+`←`/`→`を押すと階層の移動が行える。文字を入力すると該当文字がハイライトされたりフォーカスが移動する。ファイルを選択して`Enter`を押すとそのファイルが開く。シンボルを選択した場合はその箇所にカーソルが移動する。
![bread_crumbs.gif](https://qiita-image-store.s3.amazonaws.com/0/181011/e81848ed-1dbd-e8df-9f22-6de336d67c95.gif)
階層リンクにフォーカスを移動させる際に`Ctrl`+`Shift`+`:`を使用すると、プルダウンを非表示のままフォーカスだけ移動させることができる。この場合は`↓`か`Enter`を押すとプルダウンが表示される。また、プルダウンが非表示の状態だと`←`/`→`でも階層の移動ができる。

関連する設定項目は以下の３つ。

- `breadcrumbs.enabled` 階層リンクの有効化(true/false)
- `breadcrumbs.filePath` ファイルパスの表示方法(on/off/last)
- `breadcrumbs.symbolPath` シンボルの表示方法(on/off/last)
Rails — i18n で配列を扱う

## 定義の例 (YAMLの場合)

配列記法で書く。

```yaml
ja:
  changelog:
    - "バージョン 1.0.0 をリリースしました"
    - "バージョン 1.0.1 をリリースしました"
    - "バージョン 1.0.2 をリリースしました"
```

# i18n

I18nではキーまでを指定し、その配列をRuby的に扱ってやる。

## 配列すべてにアクセス

```rb
I18n.t('changelog')
# => ["バージョン 1.0.0 をリリースしました", "バージョン 1.0.1 をリリースしました", "バージョン 1.0.2 をリリースしました"]
```

## 配列の最初の要素にアクセス

```rb
I18n.t('report_changelog')[0]
# => "バージョン 1.0.0 をリリースしました"
```
## Versions

- i18n (1.0.1)
- rails (5.1.6)
- rails-i18n (5.1.1)








<!-- Update From Qiita API -->

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
SVN使いが混乱するGitのブランチ。ブランチは『付箋の目印』でそれ以上の機能はない。

自分がGitを理解しようとしたとき、ブランチがわからずに躓いたのでそういう人のために。

#ブランチイメージ図
![Gitブランチのイメージ.png](https://qiita-image-store.s3.amazonaws.com/0/143913/3b76c3a8-bc5e-f649-2fae-1b0b4d983ef5.png)

#ブランチ≠作業フォルダ
『ブランチを切り替える』という言い方から、ブランチを作業フォルダだと誤解する人がいる。
ブランチを切り替えた時にローカルのgitフォルダに現れるのは『ブランチが貼られたコミットの中身』である。

#Gitはブランチという言葉を２つの意味で使っている。
- ブランチの作成、削除：『ブランチ=ブランチ』
- ブランチを切り替える：『ブランチ=ブランチが示すコミット』

#コミットに複数のブランチを付けられる訳
ブランチはただの付箋のため、いくらでも付けたり消したりできる。

#スタッシュが必要な訳
『ブランチ≠作業フォルダ』のため、gitはローカルの変更をブランチに保持させることができない。
別ブランチを選択するとき、ローカルコードが変更されていると別ブランチが選択できないのはそのためである。
そのため、ローカルの変更を一時退避させるためにスタッシュが存在する。

#コミットをしたときに起きること
下記の手順でコミットが作成される
１．現在のコミットの一つ先に新しいコミットが作成される。
２．現在選択中のブランチ(付箋)が新しいコミットへ貼りなおされる。
ブランチの中身が修正されたのではなく、修正したコードを含む新しいコミットにブランチが貼りなおされている。

#ブランチ機能は後付け機能？(完全な推測なのでご注意ください。)
人間が使う分においてブランチ機能は必須なのだが、gitのシステムから見るとブランチは必ずしも必要ではない。
そして、コミットの変更はgitは許していないのにブランチの変更はほとんど制約がない。
特にコミットメッセージすら変更を許さないにもかかわらずブランチはいくらでも変更できるのはちょっと不自然。

そう考えると、gitのブランチ機能が後付けなのは信憑性がある気がする。
もし後付けだった場合、gitの開発者はブランチ機能をどのタイミングで思いついたのか？最初から思いついていたのであれば本当に天才だと思う。
PHPのビルトインサーバーでAPIモックを楽に作ってDocker化


APIモックサーバーを作りたいなと思ってたら、PHPで楽に作れると見たので試してみる。

PHP5.4から組み込まれたビルドインWebサーバが便利らしい、今回はこれで作る！

# 環境

macOS 10.12.6

```
$ php -v
PHP 5.6.30 (cli) (built: Oct 29 2017 20:30:32)
Copyright (c) 1997-2016 The PHP Group
Zend Engine v2.6.0, Copyright (c) 1998-2016 Zend Technologies
```

# 実装

シンプルに書く

```index.php:php
<?php
$response = [
  'id'=> 1,
  'memo' => 'mock api memo',
];
header('Content-Typej: application/json; charset=utf-8');
echo json_encode($response);
```

以下コマンドでサーバー起動

```
$ php -S localhost:8000
```

GETレスポンス

```json
{"id":1,"memo":"mock api memo"}
```

おおできた、本当にすげえ簡単に作れる

# 実装 パス対応

`http://localhost:8000/memo/100`

のように`memo/100`というパスへのアクセスに対応する

```index.php:php
<?php
if (!preg_match('#\A/memo/(?P<id>\d+)\z#', $_SERVER['PATH_INFO'], $matches)) {
  header('HTTP/1.1 404 Not Found');
}
$response = [
  'id'=> (int)$matches['id'],
  'memo' => 'memo' . $matches['id'],
];
header('Content-Typej: application/json; charset=utf-8');
echo json_encode($response);
```

`http://localhost:8000/memo/100`のレスポンス

```json
{"id":100,"memo":"memo100"}
```

これまた簡単にできた、素晴らしい

## 試しにPOST

```
$ curl -X POST http://localhost:8000/memo/100
{"id":100,"memo":"memo100"}
```

あれ、普通にレスポンスが返ってきた

特に指定しなければ何でも受け付けるのね

# Docker化

Dockerfileを作成

```
FROM php:5.6-alpine3.7
WORKDIR /workspace
EXPOSE 8000
CMD ["php","-S","0.0.0.0:8000"]
```

docker-compose.ymlを作成

```
version: '3'
services:
  php-api-mock-sample:
    build: .
    volumes:
      - .:/workspace/
    ports:
      - "8000:8000"
```

ファイル構成

```
.
├── Dockerfile
├── docker-compose.yml
└── index.php
```

Docker化開始

```
$ docker-compose build
$ docker-compose up
```

以下にアクセス

http://0.0.0.0:8000/memo/100

jsonレスポンスが返ってきたらOK
初学者のみでチームプログラミングをしてみたので反省点を書いてみる

#はじめに
作品なんて作ったことがない初学者が集まってチームプログラミングをしてみました。案の定グダグダしてしまったのですが、次回はそうならないように反省を述べていこうと思います。
##目的・方法の共有
そもそもチームでどんな*問題*をどのような*方法*で解決するのか、その共有ができていなかった。なんとなく理解はしていたけど一人一人が考えていることが微妙に違うので会議が迷走しました。まず最初にしっかりと問題提起と解決方法を話して、共有しましょう。
##期限の設定
今回はTrelloを使ってタスク管理していたのですが、なかなか期限を守れない。余裕を持って期限を決めておくべきでした。
##役割を明確にする
今回は一人一人の役割を曖昧に設定していました。そのせいで誰がどの仕事をするのかがわかりにくく気がつくと誰もやっていない仕事ができていました。誰がどの仕事をするのかしっかり決めておくべきでした。
#最後に
色々至らぬ点がありましたがはじめての開発、はじめてのチーム開発で楽しかったです。次は反省を生かしたチーム開発を行います。
iPhoneシミュレーターからMacへのコピペ

環境は Xcode9.4.1

(1) シミュレータでコピーしたい文字を選択して `Copy` 

(2) さらにシミュレータのツールバーで `Simulator -> Edit -> Copy`

※`Edit -> Automatically Sync Pasteboad`のチェックは外す必要あり

(3) あとは `⌘ + v`

助けていただきました。ありがとうございます。
http://matouka-suzuki.hatenablog.com/entry/2014/01/23/221655
Pythonの自作モジュールの関数を動的に呼び出す

# はじめに
クローラーを開発するときにURLによって動的に関数を呼び出しをよくします。しかし、URLに `https://test.com/ほげ`　のように2バイト文字が含まれる場合、 `def ほげ():`　や　`class ほげ(object):`　のようにコード上に2バイト文字を書く必要がありました。なんかかっこ悪いので本記事ではこの問題について解決した方法を書いていきます。

# 解決方法
Pythonはディレクトリをモジュールとして扱えるので、それを利用しました。(一応コード上ではないから…)

# ディレクトリ構成
`main.py`でモジュールを利用すると仮定して、`parser_module`以下のモジュールを動的に呼び出していきます。

![スクリーンショット 2018-08-17 12.50.53.png](https://qiita-image-store.s3.amazonaws.com/0/211748/ce982af4-07c7-c610-9447-41b94d9129d3.png)

# モジュールのコード
```python:parse_module/ほげ/__init__.py
from .parser import *
```

```python:parse_module/ほげ/parser.py
def parse():
    print('hoge')
```

```python:parse_module/ふが/__init__.py
from .parser import *
```

```python:parse_module/ふが/parser.py
def parse():
    print('fuga')
```

# parser_moduleモジュールのコード
`parser_module/__init__.py` にkeyをモジュール名、valueをモジュールとした辞書を返す関数を定義します。

```python:parse_module/__init__.py
import importlib
import os
import sys

def modules():
    path = os.path.dirname(__file__)
    sys.path.append(path)
    module_name = [name for name in os.listdir(path) if os.path.isdir(os.path.join(path, name))]
    return {module.__name__: module for module in map(importlib.import_module, module_name)}
```

# main.pyで使ってみる
`parser_module/__init__.py` で定義したmodules関数をインポートします。`modules`関数は辞書を返すので以下のように利用できます。

```python:main.py
from parser_module import modules


urls = [
    'https://test.com/ほげ',
    'https://test.com/ふが'
]

for path in map(lambda x: x.split('/')[-1], urls):
    modules()[path].parse()
```

```console:実行結果
$ python main.py
hoge
fuga
```
無事呼び出せました。
Vim でヌルヌルページめくり

最近また vim を使い始めて、 [amix/vimrc](https://github.com/amix/vimrc) を触っていたが、面白い動きをしていた。
`C-u`, `C-d` がヌルヌル動いたのである。

![こんな感じ](https://cloud.githubusercontent.com/assets/158553/21579969/841ab468-d013-11e6-8ce6-aa5442d52b6b.gif)

調べてみると [comfortable-motion](https://github.com/yuttie/comfortable-motion.vim) というプラグインのおかげだった。
デフォルトのページめくりでは瞬間的に切り替えられるため、読んでいたところを見失ったりしたことがあったが、これならそんなことは起こらなくなるだろう。
ちょっと気分が良くなるので、使ってみてはどうだろうか。
インナークラスをビーン定義する方法

#### 開発環境
- Java 1.8.0
- TERASOLUNA Server Framework for Java (5.4.1.RELEASE)
 - Spring Framework 4.3.14.RELEASE

#### はじめに
チラシの裏です。

#### 普通にインナークラスをビーン定義してみる
以下のようなクラスを定義したとします。引数の2つの`int`を足して返すメソッドのテストです。

```java:InnerTest.java
@RunWith(SpringRunner.class)
public class InnerTest {

  @Inject
  Inner inner;

  @Test
  public void test() {
    int a = 1;
    int b = 2;
    // アサーション
    assertThat(inner.add(a, b), equalTo(a + b));
  }

  /**
   * テスト用のインナークラス
   *
   */
  public class Inner {
    // 引数の値を足すして返すだけ
    public int add(int a, int b) {
      return a + b;
    }
  }
}
```

で、ビーン定義すると以下のようになると思います。

```xml:InnerTest-context.xml
<beans xmlns="http://www.springframework.org/schema/beans"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
   ">
  <bean class="example.InnerTest.Inner" />
</beans>
```
実行すると……

```text:エラーログ
Caused by: org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type 'example.InnerTest' available: expected at least 1 bean which qualifies as autowire candidate. Dependency annotations: {}
	at org.springframework.beans.factory.support.DefaultListableBeanFactory.raiseNoMatchingBeanFound(DefaultListableBeanFactory.java:1493)
	at org.springframework.beans.factory.support.DefaultListableBeanFactory.doResolveDependency(DefaultListableBeanFactory.java:1104)
	at org.springframework.beans.factory.support.DefaultListableBeanFactory.resolveDependency(DefaultListableBeanFactory.java:1066)
	at org.springframework.beans.factory.support.ConstructorResolver.resolveAutowiredArgument(ConstructorResolver.java:835)
	at org.springframework.beans.factory.support.ConstructorResolver.createArgumentArray(ConstructorResolver.java:741)
	... 43 common frames omitted
```
なんでや！ビーン定義したやろ！

と、思ってググったら同じ質問をしている人がいました。

[How to create a Spring Bean of a Inner class?](https://stackoverflow.com/questions/11886526/how-to-create-a-spring-bean-of-a-inner-class)

- インナークラスをstaticにする。

または

- .ではなく$でつなぐ

のどちらかをやると解決します

#### この記事を投稿するに至った経緯
需要があるかわかりませんが、業務で開発しているシステムで必要になったのでメモとして:stuck_out_tongue:。
たとえばテストで、テスト用の`Controller`をかをstaticなインナークラスとして定義しておけばパッケージがテストクラスだけになって見やすくなるのではないでしょうか:v:。
Chrome Devtoolsで要素の位置を調べる方法


Elementsパネルで要素を特定できたけど、その要素がどこに表示されているのか分からないという場合がある。そんなときはconsoleペインで下記を実行すると位置情報を表示できる。

```
> $0.getBoundingClientRect()
DOMRect {x: 319.5, y: 356.5, width: 33, height: 46, top: 356.5, …}
```

`$0` は自動的にセットされる変数で「最後に検証された要素」を表す。

x, y, top, bottom, right, leftはビューポート（現在の表示領域）の左上を(0, 0)とした相対座標。
これをページ内の絶対座標に変換するには下記のようにするのが良いらしい（[getBoundingClientRect()を使って要素のページ内座標を取得するよい方法](http://uhyo.hatenablog.com/entry/2017/03/15/130825)）：

```js
function getAbsolutePosition(elm){
  const {left, top} = elm.getBoundingClientRect();
  const {left: bleft, top: btop} = document.body.getBoundingClientRect();
  return {
    left: left - bleft,
    top: top - btop,
  };
}
```

`window.offsetX` `window.offsetY` を使う方法もあるが、スマホで問題があるとのこと。
Colaboratory環境下で、matplotlibを使いgif動画を保存する

Colaboratory環境下で、強化学習っぽいものを作ろうと思い、
matplotlibを使ってgif動画を作ろうとしたら、ちょっとハマりました。

メモ代わりに残しておきます。

#Colaboratoryでgif保存
「matplotlib gif 保存」でググると、一般的に、matplotlibから
imagemagickというソフトを経由してgifを保存するのが簡単とのこと。

imagemagickは、pipではインストールできないものらしく、Colaboratory環境下では
以下のようにコマンドを打つと、インストールできました。

```
!apt-get update && apt-get install imagemagick
```

#scatterの注意点
Colaboratoryとは関係ありませんが、plt.plotを使うと、以下のようにプロットを
追加していけば、後でgifに変換できます。

```py
im = plt.plot(x)
ims.append(im)
```
しかし、plt.scatterだと以下のように、[]を付けないとエラーが出ました。

```py
im = plt.scatter(x, y)
ims.append([im])
```

#ボールの放物線を描く

```py
import numpy as np
import os

import matplotlib.pyplot as plt
import matplotlib.animation as animation

#t秒後のボールの位置
def position(theta, v0, t):
    x_return = v0 * np.cos(theta) * t
    y_return = -0.5*9.81*(t**2) + v0*np.sin(theta)*t
    
    return x_return, y_return

xt = 0
yt = 0
t = 0
v0 = 10 #初速
theta = 45 #投げる角度
theta = theta*3.14/180 #ラジアンに変換

#gifファイルの保存先
path = 'movies/'
if not os.path.exists(path):
      os.mkdir(path)

#グラフの体裁
fig = plt.figure()
plt.ylim(0,6)
plt.xlim(0,10)
plt.grid(True)

ims = []

#ボールの演算
while(True):
    xt, yt = position(theta, v0, t)   # ボール位置の更新
    
    im = plt.scatter(xt, yt, c="b")   # ボールの位置をグラフにする
    ims.append([im])                  # グラフを配列 ims に追加
    
    #地面に付いたら終了
    if yt<0:
        break
        
    t+=0.05
        
# ロットを 50ms ごとに表示
ani = animation.ArtistAnimation(fig, ims, interval=50)
ani.save(path + "output.gif", writer="imagemagick")
```

![output.gif](https://qiita-image-store.s3.amazonaws.com/0/264781/6f953c0f-0747-8569-4b64-ac8d6891b621.gif)

無事に保存できました。
マウントしたいボリュームがマウントされずに、正体不明のボリュームがマウントされている現象について

マウントしたいボリュームがマウントされずに、正体不明のボリュームがマウントされている現象について。
忘備録です。

# きっかけ

```
$ df -h
Filesystem      Size  Used Avail Use% Mounted on
udev            1.9G   12K  1.9G   1% /dev
tmpfs           377M  376K  377M   1% /run
/dev/xvda1      7.8G  4.7G  2.8G  63% /
/dev/xvdg       3.9G  8.2M  3.7G   1% /mnt
 ...
```

EC2インスタンスの説明は

![スクリーンショット 2018-08-17 12.47.55.png](https://qiita-image-store.s3.amazonaws.com/0/255998/921db184-fa0b-fb1e-a32c-84e3428b0058.png)

あれ？アタッチされてるボリュームは`/dev/xvdf`なのになぜ`/dev/xvdg`がマウントされてるの？

# 原因
/etc/fstabはシステム起動時の自動マウント設定でした。

```
$ cat /etc/fstab
LABEL=cloudimg-rootfs	/	 ext4	defaults,discard	0 0
/dev/xvdg	/mnt	auto	defaults,nobootwait,comment=cloudconfig	0	2
```

# 修正方法

/etc/fstabの設定が間違っているので`/dev/xvdg`を`/dev/xvdf`修正します。

```
$ cat /etc/fstab
LABEL=cloudimg-rootfs	/	 ext4	defaults,discard	0 0
/dev/xvdf	/mnt	auto	defaults,nobootwait,comment=cloudconfig	0	2
```
Sinon.JSチートシート、を目指したメモ

# 概要

Sinon.JSのAPIで、私がよく使うものをメモ。
合わせて、検証時のChaiとの組み合わせ例も記載。

## スタブ関数の動作を設定するAPI

n 回目の呼び出し時に、値Zを返却する。

```javascript
stubA.onCall(0).returns("hoge"); // 初回（＝0 回目）の呼び出しで "hoge" を返す。
stubA.onCall(n).returns(
  Promise.resolve({"result" : "OK"})
); // n 回目の呼び出しで {"result" : "OK"} を引数としたPromise.resolve()インスタンスを返す。
```


引数A で呼び出されたら、値Zを返却する。

```javascript
stubA.withArgs( "hoge" ).returns( 
  { "message" : "OK" }
); // 引数 "hoge" で呼び出されたら、{ "message" : "OK" }を戻り値として返却する。
```

呼び出されたら、即座にcallbackA関数を引数Bを用いて実行する。

```javascript
stubA.callsArgWith( 0, "hoge" ); // stubA( function(param1){ /* ぴよぴよ */ } )の呼び出しに対して、stubAの1番目の引数をcallback関数とみなして、引数param1に"hoge"を指定した上で即座に callback関数を実行する。

stubA.callsArgWith( 2, null, {"value" : "OK"} ); // stubA()の2番目（0オリジン）の引数をcallback関数と見なして実行する。詳細は以下のコメント内を参照。
/*
  stubA( param0, param1, function(err, result){
    // 何らかのコールバック処理。
  });
  // 上記↑のようにスタブ関数stubA()を呼び出した際に、
  // その2番目の引数（0オリジン）をcallback関数と扱って、
  // function( err=null, result={"value" : "OK"} );
  // として即座に実行する。
*/ 
```


呼び出された時の動作を、任意に設定する。

```javascript
stubA.callsFake( function(str){ return str; } ); // スタブ作成の観点では stubA = sinon.spy( function(str){ return str; } ); と同等の動作。

// 本来は、オブジェクト内の既存メソッドを、任意の関数で動作を置き換えたうえでスタブ化するのが目的のAPI。
```




## 実行後のスタブ関数の呼び出し状況を取得するAPI

1回でだけ呼び出されたか？を true / false で取得する。

```javascript
stubA.calledOnce;

assert( stubA.calledOnce, "stubA()を1回だけ呼び出すこと" );
```



1回目の呼び出しの引数を取得する。

```javascript

stubA.getCall(0).args; // ⇒ [ args0, args1,,, ] 引数の配列が返る。

expect( stubA.getCall(0).args[0] ).to.equal( "hoge", "1回目の呼び出しの引数の1つ目が「"hoge"」であること" );
expect( stubA.getCall(1).args[1] ).to.be.null; // 2回目の呼び出しの引数の2つ目が null であること。
expect( stubA.getCall(1).args[0] ).to.have.property("status").to.equal(200); // 2回目の呼び出しの引数の1つ目がプロパティ"status"を持ち、且つその値が「200」であること。
```


特定の引数で1回だけ呼び出されたか？を true / false で取得する.

```javascript
stubA.withArgs( "hoge" ).calledOnce;

assert( stubA.withArgs( "hoge" ).calledOnce, "stubA()を引数「hoge」で1度だけ呼び出すこと" );
```


呼び出された回数を取得する。

```javascript
stubA.callCount;

expect( stubA.callCount ).to.equal( 3, "stubA()が3回呼び出されること" );
```



1度も呼び出されなかったか？を true / false で取得する.

```javascript
stubA.notCalled;

assert( stubA.notCalled, "stubA()が1度も呼ばれないこと" );
```

# 参考リンクなど

Sinon.JSの公式トップページ
https://sinonjs.org/

Sinon.JSのスタブ関数の動作設定用APIの仕様
https://sinonjs.org/releases/v1.17.7/stubs/

Sinon.JSのスタブ／スパイ関数の動作検証用APIの仕様
https://sinonjs.org/releases/v1.17.7/spies/

Chaiの公式トップページ
http://www.chaijs.com/

Chaiのexpect()のLanguage Chains（to.equal()とか）の仕様
http://www.chaijs.com/api/bdd/
UITableViewCellの選択時の色を変更する場合の背景色用のUIViewはクロージャで作ると良さそうじゃないですか

UITableViewCellの選択時の色を変更する時、背景色用のUIViewを作らないといけない

https://qiita.com/rooooomania/items/bd874013e695f02849bf

クロージャでViewを作るコードにしてUIViewを他に使えないようにしておくと良さそうですかね

```swift
override func awakeFromNib() {
    super.awakeFromNib()

    selectedBackgroundView = {
        let view = UIView()
        view.backgroundColor = UIColor.red
        return view
    }()
}
```
Progate「Ruby on Rails5」に登場するRailsコマンド

備忘録として、Progate「[Ruby on Rails5](https://prog-8.com/languages/rails5)」に登場するRailsコマンドをまとめてみました。

#Railsアプリケーション作成
```
$ rails new アプリケーション名
```

#サーバー起動
```
$ rails server
```

#コントローラー・ビュー作成

```
$ rails generate controller コントローラ名（viewフォルダ名） アクション名（viewファイル名）
```
`generate`は`g`に省略できる

```
$ rails g controller コントローラ名（viewフォルダ名） アクション名（viewファイル名）
```

生成ファイル
- コントローラ：`app/cotrollers/コントローラ名_controller.rb`
- ビュー：`app/views/viewフォルダ名/viewファイル名`
- CSS：`app/assets/stylesheets/viewフォルダ名.scss`

※**すでにコントローラが作られている場合は使えない**

#マイグレーション関連

##ファイル作成
```
$ rails g model モデル名 カラム名:データ型
```
カラムが複数の場合

```
$ rails g model モデル名 カラム名:データ型 カラム名:データ型
```

生成ファイル
- モデル：`app/models/モデル名（小文字）.rb`
- マイグレーションファイル：`db/migrate/マイグレーションファイル`

##ファイル更新（データベースに反映）

```
$ rails db:migrate
```

##カラム追加
```
$ rails g migration add_カラム名_to_テーブル名
```
※`$ rails db:migrate`を忘れずに

#rails console
```
$ rails console
```
vectorなどのコンテナの内容をPythonみたいに簡単にcoutに出力する方法

最近AOJやAtCoderで競技プログラミングを始めたのですが、いつも使っているPythonではどうしても計算時間でかなり不利になってしまいます。
AtCoderはNumPyが使えるということだったのでNumPyを使って挑戦してみましたが、どうしてもforループを書かずには解けない問題が多く、パフォーマンスに気を使いながらPythonで書くよりC++で書いたほうが楽だと考えてC++で挑戦することにしました。

ところがPythonに慣れていると、C++はデバッグする時にstd::vectorなどのコンテナの内容を出力するのがめんどくさくて仕方ないです。
下のようなコードで出力したいと考えるのは自然だと思いますが、残念ながらコンパイルエラーになります。

```cpp
#include <iostream>
#include <vector>

int main() {
    std::vector<int> vec = {1, 2, 3, 4, 5};
    std::cout << vec << std::endl;
}
```

なんとか簡単に出力できる方法がないのかと探したところ、[cxx-prettyprint](https://github.com/louisdx/cxx-prettyprint)という便利なライブラリを見つけました。
ヘッダオンリーなのでinclude文を追加するだけで、思っていたような出力ができるようになります。

```cpp
#include <iostream>
#include <vector>
#include "cxx-prettyprint/prettyprint.hpp"

int main() {
    std::vector<int> vec = {1, 2, 3, 4, 5};
    std::cout << vec << std::endl;
}
```
```:出力
[1, 2, 3, 4, 5]
```

２次元vectorにも対応しています。

```cpp
#include <iostream>
#include <vector>
#include "cxx-prettyprint/prettyprint.hpp"

int main() {
    std::vector<std::vector<int>> vec = {{1, 2, 3, 4}, {5, 6, 7, 8}};
    std::cout << vec << std::endl;
}
```
```:出力
[[1, 2, 3, 4], [5, 6, 7, 8]]
```

タイトルに"automagic pretty-printing of any container"と書いてあるので、std::vector以外のコンテナにも対応しているようです。

## 利用手順
1. ソースコードがあるディレクトリで`git clone https://github.com/louisdx/cxx-prettyprint.git`を実行して、cxx-prettyprintをダウンロードする。
2. ソースコードに`#include "cxx-prettyprint/prettyprint.hpp"`の１行を追加する。

たったこれだけでstd::vectorの内容をstd::coutに直接出力できるようになります。

## 参考リンク
[louisdx/cxx-prettyprint: A header-only library for C++(0x) that allows automagic pretty-printing of any container.](https://github.com/louisdx/cxx-prettyprint)

[C++で配列の内容を出力するを3種 - Qiita](https://qiita.com/iwag@github/items/75d053f41c680ec23136)
ConohaのUbuntu 18.04にプライベートネットワークを設定する

[ConoHa VPS](https://www.conoha.jp/referral/?token=Ws98F7cLyRPk7h5WlbQgIdelgyGPantATZN.Yvi3ObI0d4kqt5E-Z5B) (アフィ有) では、VPS間を繋ぐローカルネットワークを設定できます。
Ubuntu 16.04 での設定方法は検索すると出てきますが、Ubuntu 18.04 の Netplan での設定方法を参考に残します。


### まとめ
- Netplan は設定ファイルをYAMLで記述する
- `/etc/netplan` 以下に `***.yaml` の設定ファイルを置けば、読み込まれる
- ファイルを作成して `netplan apply` するだけなので、シェルスクリプトで自動化しやすい (再起動も不要)

## ConoHaにローカルネットワークを設定する
ローカルネットワークの設定は、まずConoHaの管理画面でプライベートネットワークを作成し、
次にサーバーにネットワークインターフェースの設定をすることになります。

管理画面での設定方法は、ConoHaの解説ページを見てください。
[プライベートネットワークを使う｜VPSならConoHa](https://www.conoha.jp/guide/privatenetwork.php)

## サーバーにローカルネットワークの設定をする
ローカルネットワークの設定をするネットワークインターフェース名を調べます。
私の環境では `eth1` でした。

```shell
# ネットワークインターフェース名を確認する
ip a
```

ConoHa のプライベートネットワーク設定を `192.168.0.0/24` に設定し、
サーバーのIPアドレスは `192.168.0.1` と表示されていたので、
以下の内容の設定ファイルを新規作成します。

```yaml:/etc/netplan/11-localnetwork.yaml
network:
    ethernets:
        eth1:
            addresses: [192.168.0.1/24]
            dhcp4: false
    version: 2
```

ファイル名の `11-localnetwork.yaml` は自由につけてください。 
ただし拡張子は `.yaml` じゃないとダメなようです(`.yml`だと読み込まれなかった)。
今回はサーバー作成後から `10-gmovps.yaml` があったので `11-` にしています。

最後に設定を反映します。再起動しなくても反映されます。

```shell
# 設定を反映
netplan apply

# ローカルネットワークの設定が反映されているか確認する
ip a
```
NowのAPIでTeamの情報を取得する

`teamId`というクエリを付ける。
https://zeit.co/api#api-basics/authentication

あるteamの`aliase`情報を取りたいならこう。

```bash:get-aliases.sh
curl "https://api.zeit.co/v2/now/aliases?teamId={teamId}" \
  -H "Authorization: Bearer {token}"
```

###### `token`の取得

[https://zeit.co/account/tokens](https://zeit.co/account/tokens)から
MFCでリソースファイル(.rc)が壊れる不具合が直った模様

画面の要素を変更するたびにテキストエディタでrcファイルを開き
「17、1」を「17,1」に置換してビルドするという
およそエンジニアとは思えない重労働を強いられてきた。

2018年8月リリースの15.8.0でビルドエラーにならなくなった。

MFCでかつ日本語(マルチバイト？)環境でしか発生しないためか
なかなか直さんかったな。

参考URL
https://developercommunity.visualstudio.com/content/problem/194794/%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%8B%E5%A3%8A%E3%82%8C%E3%82%8B.html
https://developercommunity.visualstudio.com/content/problem/166830/vs2017%E3%81%A6%E6%97%A5%E6%9C%AC%E8%AA%9E%E7%92%B0%E5%A2%83%E3%81%AEmfc%E3%82%BF%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%AF%E3%83%98%E3%83%BC%E3%82%B9%E3%81%AE%E3%83%95%E3%83%AD%E3%82%B7%E3%82%A7%E3%82%AF%E3%83%88%E4%BD%9C%E6%88%90%E3%82%92%E3%81%97%E3%81%9F%E5%A0%B4%E5%90%88%E3%81%AB%E3%82%BF%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%AF%E3%82%92%E7%B7%A8%E9%9B%86%E3%81%99%E3%82%8B%E3%81%A8.html