OmniAICreator/Qiita-1.07M huggingface dataset:
Pythonで機械学習やデータ解析やってる人はバグを無くすためにassert文を使うべき

# 背景

研究で画像を扱っていたとき、

- 次元の違い
- 正規化する範囲の違い

がバグに繋がるケースが数多くありました。


自分の中でルールを決めていたとしても、

- **未来の自分が覚えてるかわからない**
- **他の人とルールが同じとは限らない**
- **極力バグを減らしたい**

ので最近は`assert文`を多用しています。


# assert文
Pythonの公式リファレンスによると

```python

assert <条件式>

assert <条件式>, <エラーの時に表示したい文字列>
```
となります。

参考:
[7.3. assert 文](https://docs.python.jp/3/reference/simple_stmts.html#the-assert-statement)

# 用例
機械学習で何かしらの画像分類モデルを作ろうと思ったとき、入力画像を0~1に正規化する必要があるのに忘れていた、なんてことないでしょうか。


「値が0~1になってると思ってたけど、実際は0〜255だった〜〜！！」ってのはよく聞く話です。

assert文が１行だけでも入っていたら、これは防げます。


```python
import numpy as np
from PIL import Image


img = np.array(Image.open("sample.png"))
img = img / 255.0

# 0~1に正規化されててほしい！（正規化されてなければ、エラーが出て処理が止まる）
assert (0.0 <= img).all() and (img <= 1.0).all()

# 画像が3次元(width, heigt, channels)なのを確かめたい場合
assert img.ndim == 3

# widthとheightは同じ値であってほしい！　エラー文のカスタマイズはこんな感じ。
assert img.shape[0] == img.shape[1], "widthとheightの値は同じにしてね"

# チャンネル数はRGBの３チャンネルじゃなくてRGBAの４チャンネルであってほしい！
assert img.shape[2] == 4
```


# まとめ
assert文多用しましょう！

友達にコード見てもらうときも、assert文があると必要条件が分かるのでスムーズに理解できそう。


# 追記
皆さん、多くのいいねありがとうございます!!
補足ですが、エラーは下記のように出力されます。


```python
import numpy as np

tmp = np.arange(10).reshape(2,5)
print("tmp.shape=",tmp.shape)
assert tmp.shape == (2,6)

print("End")
```

出力

```py
tmp.shape= (2, 5)
---------------------------------------------------------------------------
AssertionError                            Traceback (most recent call last)
<ipython-input-3-b4bb1727ab0e> in <module>()
      3 tmp = np.arange(10).reshape(2,5)
      4 print("tmp.shape=",tmp.shape)
----> 5 assert tmp.shape == (2,6)
      6
      7 print("End")

AssertionError:
```

エラーが出た時点で実行が止まるので、安心です。
さくら VPSでRubyOnRails4の環境構築した(CentOS7+Apache)

さくらVPSとドットインストールのチュートリアルを参考に環境構築した。

ドットインストールのチュートリアルはCentOS6前提で記載されている。(2018/07/28現在)
今回はCentOS7で構築したため、若干手順が異なるところがあったため、そこを中心にまとめる。


# 概要
1. さくらVPSへCentOS7をインストールする
2. CentOS7に作業用ユーザを追加する
3. SSHログインのセキュリティを強化する
4. システムのアップデートをする
5. ファイヤーウォールを設定する
6. WEBサーバーの設定をする(apacheをインストールする)
7. RubyOnRailsの設定をする

# 1. さくらVPSへCentOS7をインストールする

以下WebSiteからVPSレンタルの申し込みを行う。
https://vps.sakura.ad.jp/ 

> 現在最安価格で1ヶ月で685円。

ゾーンが石狩と東京で選択可能。東京を選択。

> 首都圏からのアクセス速度が早くなるため。
> 自然災害等を考慮してバックアップが必要な場合は、「東京」と「石狩」の両方を借りてもいいと思う。

さくらVPSにCentoOS7をインストール

基本的には以下のチュートリアル通りに実行
https://vps-news.sakura.ad.jp/tutorials/centos7-initial-settings/

> ssh接続に失敗したので、OSの再インストールをしたら接続できた。

# 2. CentOS7に作業用ユーザを追加する

rootのパスワード変更する
一般ユーザを追加
追加したユーザがsudoを実行できるようにする

以下のチュートリアルどおりに実行
https://vps-news.sakura.ad.jp/tutorials/centos7-initial-settings/

> rootをそのまま使わないメリットがあまりわかっていない。。
> sudo実行権を付加した一般ユーザよりrootのほうが権限が強い？からなるべく使わないようにするということ？

# 3. SSHログインのセキュリティを強化する

SSH認証方式をパスワード認証から公開鍵認証へ変更
以下のチュートリアルどおりに実行
https://vps-news.sakura.ad.jp/tutorials/centos7-initial-settings/

> パスワード認証より公開鍵認証のほうが、セキュリティ上安全な理由がまだわかっていない。

rootへsshログイン出来ないようにする
以下のチュートリアルどおりに実行
https://vps-news.sakura.ad.jp/tutorials/centos7-initial-settings/


# 4. システムのアップデートをする
コマンドラインにて以下を実行する。
yum update

詳細は以下のチュートリアルを参照
https://dotinstall.com/lessons/basic_sakura_vps/8004

> CentOS上のアプリケーションを最新バージョンにして、セキュリティリスクを軽減するのが狙い

> 上記のドットインストールには、言語を日本語化するよううながされているが、以後、コンソールの表示が文字化け(?になる)することがあったので、en_US.UTF-8に戻した
> ちなみに言語設定の変更は(localectl set-localeコマンドで行う)

# 5. ファイヤーウォールを設定する

firewalldを使用して設定変更を行った。

firewalldについては下記サイトを参照のこと。
https://qiita.com/kenjjiijjii/items/1057af2dddc34022b09e

> ドットインストールではiptablesにてファイヤーウォールの設定をするよう記載されているが、 CentOS7ではfirewalldが推奨されているようなので、そちらを使用した。
> https://dotinstall.com/lessons/basic_sakura_vps/8010


# 6. WEBサーバーの設定をする(apacheをインストールする)

詳細は以下のチュートリアルを参照
https://dotinstall.com/lessons/basic_sakura_vps/8011

httd.confの編集について、ドットインストールとは微妙に異なる箇所があったので調べて対応した。

> そもそもServerTokensの記載がなかったので、追記した。
> 　ServerSignatureも同じく追記
> 　var/www/html以下にあるOption Indexの”Index”を削除した(-をつけるとエラーが発生した。)


# 7. RubyOnRailsの設定をする

以下チュートリアルを参照のこと
　　https://dotinstall.com/lessons/basic_sakura_vps/8017
　　https://dotinstall.com/lessons/basic_sakura_vps/8018
　　https://dotinstall.com/lessons/basic_sakura_vps/8019

> rvmではなくrbenvを使ったほうがいいとのこと。詳細は以下を参照。
> https://qiita.com/NaokiIshimura/items/ff04b6eaa40b33c4bea8
> また、rubyのバージョンは2.3.0とした。 ~~ 
>1.9.3で実行したら警告が表示された。CentOS6だと推奨されないのかもしれない。
>また自分のローカル環境のrubyのバージョンが2.3.0だったので、それに合わせた。

>nodejsは v10.7.0をインストールした。(ローカル開発環境に合わせた)

>firewalledで3000版ポートを空けた。
>https://qiita.com/kota2_0/items/27530febaf24a3bf285f

>rails s を実行するだけだと、自PCからは見れなかったのでipアドレスを指定して以下のように実行した。
>rails s -b 160.16.96.117
>IPアドレスは各自VPSサーバーに割り振られたアドレスに書き換えて使用してほしい。
Laravel5.6 削除機能を実装する

htmlに削除用のformを追加。
今回は、単純にactionでdeleteメソッドに飛ばす。
飛ばす際に、idをつける。

```html:\resources\views\article\index.blade.php

<form method="post" action="/article/delete/{{$article->id}}">
{{ csrf_field() }}
<input type="submit" value="削除" class="btn btn-danger btn-sm" onclick='return confirm("君は本当に削除するつもりかい？");'>
</form>
```

ルートを設定し、deleteメソッドを起動させる。

```php:\routes\web.php

Route::post('/article/delete/{id}', 'ArticleController@delete');
```

deleteメソッドを定義する。削除したら元のページにリダイレクトさせる。

```php:\app\Http\Controllers\ArticleController.php

public function delete (Request $request)
{
    Article::find($request->id)->delete();
    return redirect('/article');
}
```

参考にさせていただきました
[Laravel5.2で削除機能をつける]
(http://laraweb.net/knowledge/412/)

[Laravel まとめ5(記事削除)]
(https://qiita.com/hththt/items/ab71314b9552e9a68ef1)

[Laravel(5.1)でCRUD]
(https://qiita.com/zaburo/items/9fefa3f6834b2e79b734#%E6%96%B0%E8%A6%8F%E7%99%BB%E9%8C%B2%E8%A9%B3%E7%B4%B0%E7%B7%A8%E9%9B%86%E5%89%8A%E9%99%A4%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E3%81%A4%E3%81%91%E3%82%8Bhttps://qiita.com/zaburo/items/9fefa3f6834b2e79b734#%E6%96%B0%E8%A6%8F%E7%99%BB%E9%8C%B2%E8%A9%B3%E7%B4%B0%E7%B7%A8%E9%9B%86%E5%89%8A%E9%99%A4%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E3%81%A4%E3%81%91%E3%82%8B)
Laravel5.6 データベースのリレーション belongsTo

記事(article)をリレーションしてユーザ(user)を取り出す例です。

モデルでbelongsToを設定

```php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Article extends Model
{
    /**
     * モデルと関連しているテーブル
     *
     * @var string
     */
    protected $table = 'article';

    protected $fillable = ["title"];

    //belongsTo設定
    public function user()
    {
       return $this->belongsTo('App\User');
    }
}
```

html内で次で呼べるようだ。

```php

{{$article->user->name}}
```

参考サイト

[Laravel 5.6 Eloquent：リレーション]
(https://readouble.com/laravel/5.6/ja/eloquent-relationships.html)
SHA256ハッシュ値を確認する


SHA256ハッシュ値を確認するコマンド

## Windows

CertUtil -hashfile <ファイル名> SHA256

```
C:\>CertUtil -hashfile  LINUX.X64_180000_db_home.zip SHA256
SHA256 ハッシュ (対象 LINUX.X64_180000_db_home.zip):
c96a4fd768787af98272008833fe10b172691cf84e42816b138c12d4de63ab96
CertUtil: -hashfile コマンドは正常に完了しました。
```

## Linux

sha256sum  <ファイル名>

```
# sha256sum LINUX.X64_180000_db_home.zip
c96a4fd768787af98272008833fe10b172691cf84e42816b138c12d4de63ab96  LINUX.X64_180000_db_home.zip
```
ffmpeg で MJPEG on RTP

[rfc2435 RTP Payload Format for JPEG-compressed Video](https://tools.ietf.org/html/rfc2435)というのがあるので一応標準化された技術なんだけど、ffmpegで動かしてる例が全然見当たらなかった。
h.264が普及した世の中でMJPEG使う意味があるのかよくわからないが、なんとなく気になってしまったので動かしてみた。

```shell-session
$ ffmpeg -re \
-f lavfi \
-i testsrc=duration=600:size=1280x720:rate=7 \
-pix_fmt yuvj420p \
-c:v mjpeg \
-force_duplicated_matrix 1 \
-an \
-f rtp rtp://0.0.0.0:8004
```

でいけた。

Macのカメラを使うなら、

```shell-session
$ ffmpeg -re \
-pix_fmt uyvy422 \
-f avfoundation \
-framerate 30 \
-i "0:" \
-r 6 \
-pix_fmt yuvj420p \
-c:v mjpeg \
-force_duplicated_matrix 1 \
-an \
-f rtp rtp://0.0.0.0:8004
```

`-pix_fmt yuvj420p` は [rtpenc_jpeg.c](https://github.com/FFmpeg/FFmpeg/blob/415f907ce8dcca87c9e7cfdc954b92df399d3d80/libavformat/rtpenc_jpeg.c) を参考にした。
`-force_duplicated_matrix 1` は何を意味してるのかよくわかってないんだけど、[libavのML](https://lists.ffmpeg.org/pipermail/libav-user/2015-December/008715.html) に書いてあった。これがないと`RFC 2435 suggests two quantization tables, 1 provided`という警告が大量に出てくる。

VLC Player 単体でうまく再生できなかったので、

```shell-session
$ ffmpeg -i rtp://127.0.0.1:8004 \
-vcodec libx264 \
-profile:v baseline \
-level 1 \
-preset veryfast \
-tune zerolatency \
-an \
-f mpegts udp://127.0.0.1:1234
```

とやって再エンコードしてからVLC Playerから `udp://@:1234` を開いたら映像が流れてきた。
業務でpythonを使ったデータ解析をし始めて、わかってきたこと

## 概要

今の会社に入社するまで整形されたデータを扱ってきたため、実データを使って解析を行うことはありませんでした。
実データには癖があるため、それを上手く扱うためにはいろいろなスキルや注目する箇所があることに気づきました。
今回はそんなナレッジをご提供できればと思っています。！

## about me

### 経歴

* 株式会社メルカリに18歳で入社し、現在は某B to CプラットフォームでPMDをしています。
* PMDをするまではQAを通してリリースプロセス改善を行ったり、いろいろなプロジェクトに混ってUX観点の議論を行ってきました。

### 現在

* 直近ではIPO関連のプロジェクトでPMをしています。
* 今回人手が足りなくなったため、ディレクションをやりながらサーバーサイドとして開発に交じることに。
* ある特定の減少が起こると会社が損失を出すパターンがある and 母数のデータが多いため、細かい条件を知る必要がある。
* 解析できるので、実データをもとに危険な状態を起こしうる事象の特徴を探すことになった。

## **わかったこと**

### **その①：データを理解し、上手く扱う必要がある**

基本dataは解析に必要な形にはなっていないため、望む形に変換する必要があります。
例えば、特定の注文が注文されてから、発送されるまでの時間差を計算したい場合は、datetimeモジュールを使う必要があります。
その場合、datetime.datetime、datetime.timedelta等が扱うデータになります。
また、実データから時間差を計算する場合はstringから不必要な文字を取り出す必要があったり、DataFrameに戻すためにstringに変換し直す必要があります。
**「解析の9割はデータ整形」の意味がわかった**瞬間だったと思います。


### **その②：重い処理をlocalで行う場合は、効率的な参照方法を考える**

今回5万件の注文を元に特定の条件を探す必要があったのですが、**5万 x 5万の二重for文**を書く必要がありました。
僕の場合は、回数をわかりやすくするためにprint関数を使っていたのですが、流石に遅すぎたのでなるべく効率の良い方法を探しました。
Qiitaには闇みたいに難しい方法も書いてあるんですが、**何を書いてあるのかさっぱりわからなかった**ので、DSチームの方に僕が理解できる範囲の方法を教えてもらいました。
また、ある程度リリースする時期が決まっているPJでは、学習コストをかけすぎないように解析する必要があることも学びました。

### **その③：特定の課題を解決するために、その業務を深く理解する必要がある。**

仮説を立てるためには

* **今からやろうとしていることはどういうことなのか**
* **どういったプロセスを踏むと、その現象はおこるのか**

を理解すると、より良いことがわかりました。フロー設計を行っている箇所や、ビジネス側の業務についても複数箇所理解していたので、その知識がとても役に立ちました。
また、僕はディレクター兼開発者なので、**「実運用するための方法」**や**「どのような形で開発するべきか」**を考える手助けにもなりました。
わからないときは、その業務の担当者さんに「どういう状況なのか」、「どういうことをしたら良いのか」をヒアリングしましょう。
ヒアリングは、よく起こる**「不必要な開発」**や**「機能リリース起因のCS業務効率低下」**を防ぐことにも繋がり、お互い幸せになれます。

### その④：データの可視化をして、わかりやすく相手に伝える。

現在やっていることをビジネスサイドやエンジニアによりわかりやすく伝えるため、**jupyter**や**seaborn**などを使いデータの可視化を行いました。
また、特定のデータを抽出 or 算出した経緯も他の人に見せることができるため、とても解析自体がクリアになります。
jupyterのスクリーンショットを仕様所に載せるだけでも、大変有益だと知りました。

## 最後に：**データサイエンスはめっちゃおもしろい！**

僕はデータサイエンスチームやBIチームで仕事していないのですが、その人達にもわからなかったデータの因果関係を見つけることができました。
ディレクターがデータ解析方法を身に着けていると、とても相性が良いなと思いました。

まだまだ勉強することはあるので、引き続き精進します。
最後まで読んでいただきありがとうございました！！
rails テーブルのデータの削除のやり方（テスト段階）

sqlite、rails、小規模webサイト、テスト段階の環境

rails では、データベース運用しながら、止めることなく成長させるために、migrationを使って、テーブルにカラムを追加させることができる。例えば、

```
$ rails generate migration add_name_to_users name:string
```
のようにやれば、運用を止めることなく、usersテーブルにnameというstring型のカラムを追加できる。

しかし、このようにやるのは、運用が続いているwebサイトを改良する場合であり、一から設計している場合は、このやり方をすると、add用のmigrationファイルがたまってしまいゴチャゴチャして良くないと思う。なので、自分の場合、下のようにやって、データベースの構成を試行錯誤して作成している。

```
$ vim bd/migrate/2018072xxxxxx_create_users.rb
  #直接マイグレーションファイルにｔ．ｓｔring :name のように記述する。
$ rake db:drop
  #全てのデータを削除する。
$ bundle exec rake db:migrate
  #マイグレションファイルからテーブルを作成する。
$ bundle exec rake db:populate
  #fakerを使って、ダミーデータを追加する。
```
全てのデータを削除するのは、危険であるので消してはいけないデータがないか注意してから実行する。思うに、テーブルを追加したり、削除したりしていると、bundle exec rake db:migrateを実行したときに、エラーが発生し、その度に原因を削除しないといけないので、とても面倒である。そのため、rake db:dropで全てのテーブルを削除してしまえば、エラーの原因を全て削除したことになるので、bundle exec rake db:migrateが成功しやすいということである。
今のところ、この方法で自分は快適に操作しているというメモです。
【第１回】超初心者が書くSAPについてのメモ　〜SAPとは〜

# **はじめに**

この度、仕事でSAPを取り扱うことになりSAP初心者研修を受講することになったので、
そこで習ったことを簡単にQiitaにまとめていきたいと思います。
Qiita初心者でもあるため、見にくい記事になってしまうかもしれませんが、ご了承ください。

*SAPとは、ドイツに本社を置くソフトウェア会社のことを差しますが、
ここで言うSAPは、SAP社が販売するERPパッケージ製品のことを差しています。

# **SAPとは**

SAP(Systemanalyse und Programmentwicklung)とは、ドイツに本社を置くソフトウェア会社のことです。
SAP社では、ERPパッケージ製品を販売しています。
このソフトでは、企業の在庫管理、生産管理、販売管理、財務管理などが効率よく行えます。

ちなみに「SAP」は「エスエーピー」と読みます。
よく「サップ」と聞くこともありますが、「サップ」はドイツ語ではあまり良い意味ではないようです。


*ERP(Enterprise Resources Planning)とは、経営の基本となる資源要素を適切に分配し、
有効活用する考え方を意味します。

# **SAPの特徴**

**情報の一元管理**

例えばとある飲料メーカーがあるとします。
飲料を売るには、飲料の材料となるものを受注、材料を置く場所・在庫数の管理、
お客様からの受注受理、工場へ製造の依頼、出庫、請求、財務管理、収益分析など
様々なことを行うことが必要です。
この一連の工程をSAPでは一元管理することができます。
こうすることにより、取引のステータス進捗や、売上状態などをリアルタイムに把握することができます。

**業務の標準化**

標準的に利用される多くの管理項目・業務処理を部品化(組織・データ・機能など)し、これらの部品を取捨選択し組み合わせる事によりシステム効率標準化に寄与することが可能。

**情報の見える化**

経営層やマネージメント層が必要な情報は、現場からのインプットによって集められます。
SAPでは、日々の業務を実行することでデータはリアルタイムに蓄積され、それをダッシュボードなど視認性の高い
レポートで表示させることが可能です。

# **リンク集**

- [SAP Japan](https://www.sap.com/japan/index.html)
オブジェクト指向設計実践ガイドのチェックシート

「オブジェクト指向設計実践ガイド」の内容が大変ためになったため、すぐに振り返れるようにチェックシートを作りました。

### 単一責任クラス
- そのクラスの振る舞いとして正しいか。複数の役割を持っていないか。
- インスタンス変数を直接参照していないか。必ずアクセサでアクセスすること。
- 1メソッドが複数の責任をもっていないか。

```rb:複数の責任を持っている例
def diameters
  ratio * (rim + (tire * 2)) # (rim + (tire * 2)) は別のメソッドに分ける
end
```

- 配列の何番目かを知っていないか。ClassやStructを使うこと。
- 変更が副作用をもたらさないか
- 要件の変更が小さければコードの変更も相応して小さいこと
- 再利用可能であるか

### 依存関係
- 他のクラスを知りすぎていないか。依存オブジェクトの注入に変えるべき。どうしても注入できない場合はインスタンス変数の作成をメソッドで包み隠す。

```rb:他者を知りすぎている例
class Gear
  # (1)Wheelというクラス名を知っている
  # (2)Weelインスタンスがdiameterという振る舞いができることを知っている
  # (3)Wheel.newの引数がrim, tireであることを知っている
  # (4)Whhel.newの引数の順番を知っている
  def gear_inches
    ratio * Wheel.new(rim, tire).diameter
  end
end
```

```rb:注入できない場合は包み隠す
def wheel
  @wheel ||= Wheel.new(rim, tire)
end
```

- 外部ライブラリの初期化が引数の順番に依存していないか。ラップしてライブラリ変更に対して自身を守るべき。

```rb:外部ライブラリの初期化をラップする例
def rapper(args)
  # ThirdPartyに変更があっても影響を受けるのはここだけ
  ThirdParty.new(args[:one], args[:two], args[:three])
end
rapper({one: 1, two: 2, three: 3})
```

- 依存関係が発生する場合は、将来変更されない方に依存すべき
- 注入により `具象クラス` から、`◯◯メソッドを持つクラス` に依存することになる。Rubyにはインタフェースがないが脳内で考えてみるべき。

###インタフェース
- オブジェクトが何を知っているか( `オブジェクトの責任` )、オブジェクトが誰を知っているか( `オブジェクトの依存関係` )、どのようなメッセージをするか( `インタフェース` )
- 設計がうまくいかないときは `メッセージ` に集中すると見過ごしていたオブジェクトが明らかになる（例: Finderクラス）
- `クラスに基づく設計` から `メッセージに基づく設計` に思想を切り替えること
- メッセージとは、 `「受け手を信頼し送り手が望むことを頼む」` ものであり、 `「受け手がどのように振る舞うか伝える」` ものではない

```text:メッセージの段階
(1)あなたがどのようにするか知っている # bad
(2)あなたが何をするか知っている     # not good
(3)何をどのようにするか知らないが、私が望むことに対してあなたの担当をやってくれると信じている # good

例：
(1)旅行が整備士に対し自転車を掃除してと頼む
(2)旅行が整備士に対し自転車を準備してと頼む
(3)旅行が整備士に対し「旅行の準備がしたい」と頼み、整備士が旅行から自転車を取得し準備をしてくれる
```


- `パブリックメソッド`は、(1)`そのクラスの主要な責任`(2)`気まぐれで更新されない`(3)`テストで振る舞いが定義されている`
- `プライベートメソッド` は、(1)`実装の詳細`(2)`変更はあり得る`(3)`テストは必ずしも必須ではない`

###ダックタイピング
- ダックタイピングに変えるべきアンチパターン
  - オブジェクトのクラスを確認している( `case` `kind_of?` `is_a?` `responds_to?` ) 
  - `type` や `category` といった変数で処理を分けている
- ダックタイピングには、継承やモジュールの中で `抽象的な共通処理` と `具象化させる為のテンプレートメソッド` を用意するのがよく使う手段


### 継承
- 継承とは、`オブジェクトを階層構造に構成するコスト`を払う代わりに`メッセージ委譲は無料で手に入る` というもの。このコストは変更時の膨大なコストに繋がる為、継承の方が良いとはっきり言える場合以外は`コンポジション`を使うこと。
- 継承する場合は、「まずはメソッドをすべて下げていくつかを引き上げる」 が良い手順
- サブクラスによって変更したい部分はメソッドで包み隠しオーバーライドできるようにする（`テンプレートメソッドパターン`）
- `テンプレートメソッドパターン`を使う場合は親にも`NotImplementedError`を発生させるメソッドを用意すること
- superは避け`フックメソッド`を使うようにすべき
- スーパークラスのメソッドは全てのサブクラスで使われなければならない。そうでないクラスはサブクラスから外れるべき。

### モジュール
- ロールが存在することを認識し、その`ダックタイプ`の`インタフェース`として`モジュール`を定義する
- 大抵の場合モジュールは`抽象コードでアルゴリズム`を定義し、`テンプレートメソッドで具象化`する
- ただし、共通で使う振る舞いがあれば、モジュールに具体的な処理を記述してもよい
- `継承 「 である（is_a） 」`、`モジュール 「 のように振る舞う（behaves-like-a） 」`の違いは重要


###コンポジション（小さなパーツの組み合わせ）
- 継承のコストとメリットを逆転させたもの。
- `明示的なメッセージ委譲というコスト`の代わりに`独立して存在できる`というメリット
- `継承` より `コンポジション`

###設計におけるまとめ
- `コンポジション`、`クラスの継承`、`モジュールを使った振る舞いの共有`という３つのテクニックがある。
- それぞれに`コスト`と`利点`がある
- `経験`を積み重ねることで選択の誤りがなくなっていく。`失敗`から学びリファクタすることを恐れない


最後に、
「`経験`を積み重ねることで選択の誤りがなくなっていく。`失敗`から学びリファクタすることを恐れない」 ということが本当に大事だと感じました。学ぶ為にもリファクタをし続けていきたいと思います。
開発効率を最大化するための最強のデバッグログ

お久しぶりです、岩手でiOSアプリを開発しているkzumuです。
最強のデバッグログを考えたのでよかったら御覧ください。
[Gist](https://gist.github.com/kzumu/b6b0c798e8e3746f0b7bee104b225791)にも上げてあります。

```swift
import Foundation

enum Level {
    case debug
    case error
}

func debugLog(_ elements: Any..., file: String = #file, function: String = #function, line: Int = #line, level: Level = .debug) {
    let df = DateFormatter()
    df.dateFormat = "yyyy-MM-dd HH:mm:ss"
    switch level {
    case .debug:
        print("🌟 ", terminator: "")
    case .error:
        print("⚠️ ", terminator: "")
    }
    let file = URL(fileURLWithPath: file).lastPathComponent
    print("\(df.string(from: Date())): \(file):\(line) \(function):", terminator: "")
    elements.forEach {
        print(" \($0)", terminator: "")
    }
    print()
}

```
フォントのCSS初期設定を62.5%にしてremの計算を簡単に解決する方法

![image.png](https://qiita-image-store.s3.amazonaws.com/0/127520/378feaa1-5d54-ebd8-21b7-29d6b57c63ab.png)

# フォントの初期設定

## 背景
- 新規のWebサイト制作、Webアプリ制作でフォントサイズ設定でいつもわたわたしてしまう

## 施行
- 特別な理由が無ければこうする事にしている

## 課題点
- 単位を`rem`にしよう
- `rem`にしながらもpxでないとデザイン上のコミュニケーションがしにくいので`px`と互換性のある数値を出したい

## 解決策

```slim

html
  font-size: 62.5%
```

こうすることで、`1rem = 10px` `1.6rem = 16px` と切りよくremとpxが連動する

## 汎用性を持たせる

### sassのmixin変数

```sass
@mixin fz($size: 24, $base: 16)
  font-size: $size + px
  font-size: ($size / ($base * 0.625)) + rem
```  

- これはpxと、pxに相当するremの両方を書き出す
- remが後に書き出され、remが使えない時のフォールバックとしてpxも用意するという用途
- ※ただし現代ではremはほぼ使えるので `font-size: $size + px` は無くても可

参照 can i use
https://caniuse.com/#feat=rem

### mixin読み込み方

```sass
.hoge
  @include fz(16)
```

### 書き出された結果

```sass
.hoge
  font-size: 16px
  font-size: 1.6rem
```    

これでremの計算は考えずにさくさくフォントサイズが書けますね!


参考初期設定

```scss
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  word-wrap: break-word;
  font-size: 62.5%;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: relative;
  color: #222;
  font-size: 100%;
  line-height: 1.5;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
}

.wrap{
  font-size: 1.6rem;
}

```

## CodePen
<p data-height="500" data-theme-id="0" data-slug-hash="qKepwP" data-default-tab="css,result" data-user="pistol" data-pen-title="How to font-size: 62.5%" class="codepen">See the Pen <a href="https://codepen.io/pistol/pen/qKepwP/">How to font-size: 62.5%</a> by Pistol (<a href="https://codepen.io/pistol">@pistol</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

---

### 参照にさせていただいた記事
font-size指定「px、em、rem、%」の種類
https://www.w-endless.com/web_labo/service/production/49

｛font-size:62.5％｝が62.5％になったワケ
https://01earth.jp/web-create/coding/font-size_why_62point5percent/

謎の数字、{font-size: 62.5%;}ってなに？
https://www.esz.co.jp/blog/28.html
[iOS] Signing関連で実機Buildが通らなくなった





## 問題

iOSアプリ開発をしているところで、下記のようなエラーに出くわしました。

`Embedded binary is not signed with the same certificate as the parent app. Verify the embedded binary target's code sign settings match the parent app's.`


<img width="674" alt="Screen Shot 2018-07-28 at 20.48.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/69911/2615f018-854c-22f8-f48a-bf593674823a.png">


## 解決策


証明書周りやTeamをガチャガチャしていたところで、TARGETだけ対応していたらframeworkの方を触っておらず、ビルドに失敗していたようです。



<img width="701" alt="Screen Shot 2018-07-29 at 0.29.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/69911/c6aad436-4f0f-a9d3-aea5-6ecad5be7291.png">

上記の赤矢印部分`Targets -> General -> Signing -> Team`がTARGETとFrameworkできちんと揃っているかを確認すればすぐに解決することができました。


わかりやすい解決策が瞬時に検索できなかったので記載しました。
初歩的な部分ですが、どなたかの参考になれば幸いです。
nodejsで容量が大きいデータをPOSTで受け取る時のやり方

#注意
自分用メモです。解説してません。

#コード
```sample.js
var http = require("http"),
    url = require("url"),
    request = require("request"),
    qs = require("querystring"),
    server = http.createServer();

server.on("request", function(a, b) {
    if ("GET" === a.method) var c = url.parse(a.url, !0).query;
    else if ("POST" === a.method) {
        var d = "";
        a.on("data", function(a) { d += a; });
        a.on("end", function() { c = qs.parse(d); });
    }
    
    b.writeHead(200,{'Access-Control-Allow-Origin' : '*'}),b.end("start" + c.functionName + " url: " + c.sp_url);
    
    request.get("https://script.google.com/a/earthship.co.jp/macros/s/AKfycbw7oix_3gO5k8yMzCNsx5dbduHrSKAVTWi1LZbe2P5NhKZOtvZs/exec?functionName=" + c.functionName + "&sp_url=" + c.sp_url);
});
server.listen(process.env.PORT, process.env.HOST);
console.log("server listening...");
```
バッチからPowershellのfunction呼び出し


## functionの引数をつけて呼び出す

##### call.bat
```bat
@echo off
cd %~dp0
set p1="1234567890"
set p2="abc"
echo %p1%
echo %p2%
powershell -command ". .\called.ps1; test-function -param1 %p1% -param2 %p2%"
```

##### called.ps1
```powershell

function test-function($param1,$param2) {
    Write-Host "12345" $param1 $param2
}
```
### 実行結果

```
"1234567890"
"abc"
12345 1234567890 abc
```

##呼び出し元バッチのProcessIdを取得する。
powershellで利用する



```powershell

function Get-ProcessId() {
    return Get-WmiObject win32_process -filter processid=$pid | ForEach-Object{$_.parentprocessid;}
}
```
【Swift】UIScrollViewがタッチできない時の対処法

# UISCrollViewがタッチできない時の対処法

iPhone上で何かスクロールするような処理を実装したい！
と思ってUIScrollViewを使った際に「タッチできない」案件が発生して結構苦戦しました...
Swift4向けの記事が他に見当たらなかったので残しておきます。

## 開発環境
Swift4
Xcode9.2

## 問題点
先に挙げた問題点として「UIScrollViewがタッチできない」というものがあります。
が、これ実はもともとそういう仕様みたいです。
つまり、**タッチできなくて当然**と言うことです。
だったら自分でタッチできるようにするしかない！ってことでしてみます。

## 方法①　新しいクラスを自分で作成
UIScrollViewにはないタッチできる機能を追加するために、以下ような形で新たなクラスMyScrollViewを作成します。そして必要に応じてUIScrollViewではなくMyScrollViewを使用すると言うものです！

```swift:MyScrollView.swift
/// UIScrollViewクラスのデフォルトではタッチイベントが取得できるメソッドが実装されていないので拡張する
class MyScrollView: UIScrollView {
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        superview?.touchesBegan(touches, with: event)
    }
}
```

使い方はこんな感じ↓

```swift
// スクロールView
var scrollView: MyScrollView!
scrollView = MyScrollView(frame: CGRect (x: 0, y: 0, width: selectView.frame.size.width, height: 100))
scrollView.isUserInteractionEnabled = true
selectView.addSubview(scrollView)
```

これだけでタッチできるようになります！

## 方法② UIScrollViewの機能を拡張する
拡張といえばextensionですよね！もちろんextensionを使って実装することもできます。
むしろ①よりもSwiftらしい書き方になるのではないでしょうか。

```swift
extension UIScrollView {
    override open func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        self.next?.touchesBegan(touches, with: event)
        print("touchesBegan")
    }
}
```

こんな感じです。使い方はextensionのため、UIScrollViewを使うことでそのまま使うことができます。

## まとめ
ここまでこんな感じでUIScrollViewをタッチできるようにする方法を考えてきました。
結論から言うと新しいクラスを使うなり、クラスを拡張するなりで自分で実装することが必要になります。
同じ問題で困っている人の力に少しでもなれたら光栄です。

それにしてもUIScrollViewって本来スクロールするはずなのになんで元からタッチできないようになってるんだろう。。。不思議で仕方ない。
誰か詳しい人いたら教えてください。
Laravel フォーム周りのエラー Symfony \ Component \ HttpKernel \ Exception \ MethodNotAllowedHttpException

こんな感じのエラーが出る。

```php

\Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException
```

```php:\vendor\laravel\framework\src\Illuminate\Routing\RouteCollection.php

    /**
     * Throw a method not allowed HTTP exception.
     *
     * @param  array  $others
     * @return void
     *
     * @throws \Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException
     */
    protected function methodNotAllowed(array $others)
    {
        throw new MethodNotAllowedHttpException($others);
    }
 
    /**
     * Get routes from the collection by method.
     *
     * @param  string|null  $method
     * @return array
     */
    public function get($method = null)
    {
        return is_null($method) ? $this->getRoutes() : Arr::get($this->routes, $method, []);
    }
```
結論として

```php

{{ csrf_field() }}
```

とフォームの中に書くとよい。
わかんなくてはまりました。
4カード問題を量子アニーリングで解く

# はじめに
4カード問題を出されたときに，「それ量子アニーリングで解けるよ」と言って，実際に解いてあげたい．そんな人向けの記事です．

# 4カード問題とは
次のような，とても有名な論理パズルです．ウェイソン選択課題とも言います．

4枚のカードがあります．左のカードから順に1, 4, F, Aと書かれています．

| 1 | 4 | F | A |
|:-:|:-:|:-:|:-:|

なお，カードの片面にはアルファベット1文字，もう一方の面には数字が書かれているとします．

このとき，次の命題が成立しているかどうかを確かめるために裏返すべきカードはどれでしょう？

「**あるカードのアルファベットが母音の場合，もう一方の面の数字は偶数である**」

## 答え
先に答えを書いておきます．もちろん「1」と「A」のカードです．

「1」のカードのアルファベットが母音だったら，命題が成り立ちませんし，「A」のカードの数字が奇数だったらやっぱり命題が成り立ちません．それらを確かめないといけません．

「4」のアルファベットは子音であっても構いませんし，「F」のカードの数字が奇数であっても偶数であっても，命題とは関係ありません．

ですが，これでは面白くない．ということで量子アニーリングです．

# 問題をQUBOで表現する
量子アニーリングを利用するために，問題をQUBOで表現しましょう．

カードに書かれたアルファベットが母音なら1となる変数 $x_i\in\\{0,1\\}$ を4個,カードに書かれた数字が偶数なら1となる変数 $y_i\in\\{0,1\\}$ を4個，用意します．

|     | 1 | 4 | F | A |
|:---:|:-:|:-:|:-:|:-:|
|$x_i$|   |   | 0 | 1 |
|$y_i$| 0 | 1 |   |   |
| $i$ | 1 | 2 | 3 | 4 |

添字 $i$ は左のカードから順に1, 2, 3, 4と付けます．

こうすると，命題「**あるカード $i$ のアルファベットが母音の場合，もう一方の面の数字は偶数である**」が偽であること $\Leftrightarrow x_i(1-y_i)=1$　となります．

これを最小化したいペナルティと考えて問題を次のようにします．

```math
\text{minimize} \quad \Sigma_i x_i(1-y_i)
```
さらに，解をカードの見えている部分と一致させるためのペナルティも置きます．

```math
\text{minimize} \quad \Sigma_i x_i(1-y_i) + P \\
P=x_3^2 + (1-x_4)^2 + y_1^2 + (1-y_2)^2
```

展開すると，
（定数2が出てくるが，最小化に関係ないので削除）

```math
\text{minimize} \quad x_1-x_1y_1 + x_2-x_2y_2 + 2x_3-x_3y_3 - x_4y_4 + y_1 - y_2 \\
\because x_i^2=x_i, y_i^2=y_i
```
となり，

```math
\text{minimize} \quad x^\text{T}Qx\\
x = [x_1, \cdots, x_4, y_1, \cdots, y_4]^\text{T}
```
の形で表現すると， 上三角行列 $Q$ の$j$行$k$列目の要素 $q_{j,k}$ のうち非ゼロのものは，

```math
q_{11}=1, q_{15}=-1, q_{22}=1, q_{26}=-1, \\
q_{33}=2, q_{37}=-1, q_{48}=-1, q_{55}=1, q_{66}=-1\\
```
となります．これでQUBOの形で問題が表現できました．

# 解いてみる
このQUBOをDWave社の[qbsolv](https://github.com/dwavesystems/qbsolv)を使って解いてみます． （自分の環境ではDWaveマシンは呼び出せないので，qbsolv内のタブーサーチソルバで解を求めています．）

```python
from dwave_qbsolv import QBSolv
Q = {(0, 0): 1, 
    (0, 4): -1,
    (1, 1): 1,
    (1, 5): -1,
    (2, 2): 2,
    (2, 6): -1,
    (3, 7): -1,
    (4, 4): 1,
    (5, 5): -1} 
response = QBSolv().sample_qubo(Q)
list(response.samples())
```
すると，解は次のように３通りでてきました．

[{0: 0, 1: 0, 2: 0, 3: 1, 4: 0, 5: 1, 6: 1, 7: 1},
 {0: 0, 1: 1, 2: 0, 3: 1, 4: 0, 5: 1, 6: 1, 7: 1},
 {0: 0, 1: 0, 2: 0, 3: 1, 4: 0, 5: 1, 6: 0, 7: 1}]

また，最小化しようとしたペナルティの値は，

```python
list(response.data_vectors['energy'])
```
[-2.0, -2.0, -2.0]

となっています．削除した定数2を考えると，全ての解においてペナルティはゼロで，命題が成り立っています．

解を見てみると，2番目と7番目の要素（$x_2$と$y_3$）については，1と0どちらも取る可能性があることがわかります．つまり，$x_2$と$y_3$の中身はどっちでも良いということなので，**2枚目と3枚目のカードは裏返して確かめなくて良い**ということになります．

必然的に，**裏返すべきは1枚目と4枚目，つまり「1」と「A」のカード**で，「1」のアルファベットは子音($x_1=0$)，「A」の数字は偶数($y_4=1$)でないといけない，ということがわかります．

## 環境
Python 3.6.3
dwave-qbsolv 0.2.7

# おわりに
4カード問題を出されて本当にこんな返しをしたら，どうなるかは知りません．そんな人いないとは思いますが……
RaspberryPi (raspbian-stretch) 環境構築

出尽くしてるかとは思いますが備忘録のため、RaspberryPi3(以降ラズパイ)デスクトップ環境のセットアップ手順をまとめます。
あと、開発環境の構築にいくらかかったかも把握したい。

# 準備したもの
* PC (Windows)
* ラズパイ3 (Model B ボード&ケースセット: ￥5,780)
    * HDMIケーブル (持ってた)
    * microSDカード (持ってた)
    * マウス、キーボード (￥1,482)
    * 電源アダプタ (5V, 3.0A スイッチ付き: ￥1,580)
    * USBマルチカードリーダー (￥980)

# OSのインストール
0. 公式サイトからイメージファイルのダウンロード  
今回は「2018-06-27-raspbian-stretch.zip」をダウンロードしました  
[公式] https://www.raspberrypi.org/downloads/raspbian/  
[ミラー] http://ftp.jaist.ac.jp/pub/raspberrypi/raspbian/images/
0. microSDの初期化  
SD Card Formatter 5.0を使用(ファイルシステムをFAT32に選択すればwindows標準のディスクフォーマットでも良いかもしれません)
0. microSDへイメージファイルの書き込み  
Win32 Disk Imager - 1.0を使用
0. ラズパイにmicroSDを挿す＆LANケーブルを接続して起動  
少し待てば「Welcome to raspberry pi」が表示されるので、それに従って、言語やパスワード、ネットワークの設定を行う(jessieはここまで親切じゃなかったぞ)  
※ proxy設定下で行う場合はネットワーク関連の設定はすっ飛ばしてください

# 初期設定
とりあえずラズパイを使うくらいなら起動時に自動でやってくれたので特にすることがない...
ユーザ名の変更やSSH接続やproxy設定など、こちらの環境でやることがあれば追記します。

# まとめ
導入がめちゃくちゃ簡単になってる。SDカードにイメージファイルを書き込めれば特に問題なさそう。

【かかった費用】￥9,822
ラズパイのスターターキットを買えばよかったのですが、最初にボード&ケースセットを買ってしまったため、他の機器を別々で準備する羽目になってしまいこの金額です。
みなさんお気を付けて！ってこのページを見てるってことはもうラズパイ購入済みですね。笑
VNCでアクセスしたRaspberryPiでPython使ってMinecraft上にHello World+ブロック追加

# 背景
ラズパイ上のMinecraftでプログラミングしてみたい。

# 準備
VNCでMinecraft使えるようにする。
普通に立ち上げると画面がまっくら。
direct capture modeとかいうのを有効にする。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/184221/2ba18556-3f30-b105-7c73-93b3c9cf1a1a.png)

ここを参考にした。
[【Raspberry Pi】Raspbian Jessie with PixelのVNCでマイクラを動かす](https://studio.beatnix.co.jp/kids-it/hardware/raspberry_pi/vnc-minecraft/)

立ち上げれたとこ
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184221/5177f910-4071-6e2f-ac4e-9bd53183bfbb.png)

ただ、ChromebookのVNC Viewerだと、「Relative Pointer Motion」の設定を変えられなさそうなので、視点移動が微妙…。残念。

# コード

pythonで画面に文字列を表示するのと、ブロックを追加するのを試してみた。
```python mc1.py```するだけ。

```python:mc1.py
mc = minecraft.Minecraft.create()
mc.postToChat("Hello World")
pos = mc.player.getPos()
# mc.player.setPos(pos.x, pos.y+100,pos.z)
mc.setBlock(pos.x+1, pos.y,pos.z,1)
```
# 結果
こんな感じ。
目標は達成できた。
「Relative Pointer Motion」を設定変えられなくて、視点が微妙なのが非常に残念…。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184221/f18632a8-b11d-620a-0f59-2ac1565fb094.png)
blenderでskyboxのテクスチャを作成する方法

[three.jsでのサンプルページ](http://gl.matrix.jp/skybox_blen/)

![スクリーンショット 2018-07-29 0.42.09.png](https://qiita-image-store.s3.amazonaws.com/0/150548/ecbd2adb-179d-862f-bbee-d17132b9206e.png)

シンプルなので、短い記事になります。

まず、blenderでskyboxにしたいシーンを作成します。
次に、カメラを選択して、シーンの中央に移動させます。

![a.png](https://qiita-image-store.s3.amazonaws.com/0/150548/63dcf1a9-7d5d-915e-a536-cf8dfe23b6fd.png)

カメラの設定を画像のように設定します。
（黄色の線の部分になります）

この設定で、前と後ろ、左と右、上と下の画像を出力して、繋げれば完成です。
GitHubとAzure WebAppsで簡単サイト作成

#Azure WebAppsについて書こうと思ったきっかけ
最近Azure WebAppsを使う機会があったのですが、簡単にサイトを作成できてとても便利でした。
今回は自分の勉強も兼ねてGitHubとの連携を試してみました。
この記事は2018年7月末の手順となりますのでご注意ください。

#サイト作成の前提
以下の2つが必要です。(どちらも登録は無料です。)
・ Azureのサブスクリプション
・ GitHubのアカウント

#手順
##1. Azure WebAppsでWeb Appの作成

① Azureポータルで[すべてのサービス]-[App Service]をクリックします

② [追加]をクリックし、[Web App]で作成します
※ 今回は[Web App]を使いますが、テンプレートが充実しているので色々使ってみることをオススメします。
![スクリーンショット 2018-07-28 23.07.16（2）.png](https://qiita-image-store.s3.amazonaws.com/0/276299/7c2f059f-dc4e-ff3a-1341-9ba5c76fa5a6.png)

③ 以下の情報を入力し、WebAppを作成します

|項目名|説明|
|:--|:--|
|アプリ名|WebAppの名前を入力します。<br/>URLに使用されます。|
|サブスクリプション|サブスクリプションを選択します。|
|リソースグループ|Web Appのリソースグループを選択します。<br/>今回は新規で作成します。|
|OS|WebAppのOSを選択します。<br/>今回はWindowsを選択します。|
|App Service プラン|アプリのコンテナです。<br>自動で作成されるものは有料なので、<br/>以下の画面のように新しく作ります。|
|Application Insights|パフォーマンスの管理や分析ができます。<br/>今回は使用しません。|
![スクリーンショット 2018-07-28 23.13.28（2）.png](https://qiita-image-store.s3.amazonaws.com/0/276299/f08b034f-6a17-1d9f-d6f5-3bd51cbad9e8.png)

④ WebAppの完成です

##2. GitHubでリポジトリを作成
① GitHubで右上のプラスボタンの[New Repository]をクリックします

② [Repository name]を入力します

③ [Initialize this repository with a README]にチェックを入れます

④ [Create repository]をクリックします
![スクリーンショット 2018-07-28 23.59.01（2）.png](https://qiita-image-store.s3.amazonaws.com/0/276299/33845905-9986-26c5-b249-e20405207392.png)

⑤ [Create new file]をクリックします。

⑥ [Name your file...]に[index.html]と入力し、以下を入力します。

```HTML:index.html
<!DOCTYPE html>
<html lang="ja">
 <head>
  <title>HelloWorld</title>
  <meta charset="utf-8">
 </head>
 <body>
  HelloWorld
 </body>
</html>
```

⑦ 画面の下にスクロールし、[Commit new file]をクリックします。

⑧ リポジトリの完成です。

##3. Web Appへのデプロイ
① 作成したWeb Appで[デプロイ オプション]をクリックします

② ソースの選択で[GitHub]を選択します

③ [承認]で[承認する]をクリックすると、認証画面が表示されます
　[Authorize Azure]をクリックし、Azureの画面で[OK]をクリックします。
![スクリーンショット 2018-07-29 0.16.31（2）.png](https://qiita-image-store.s3.amazonaws.com/0/276299/39b2fefe-881d-032e-9819-cfcffc00ad17.png)

④ [プロジェクトの選択]でリポジトリを選択し、[OK]をクリックします

⑤ 作成したWeb Appの[概要]に記載されている[URL]をクリックします

⑥ **HelloWorld**と表示されればサイトの完成です
※ 反映されるまで少し時間がかかります。

#まとめ
・ 10分ほどでサイトが作れる
・ GitHubでソースを管理できる
・ 基本無料で使える
・ とても便利

#リンク
作ったサイト : https://webappssite.azurewebsites.net/
作ったリポジトリ : https://github.com/YouSoldier/WebAppsSite
Web App Service : https://azure.microsoft.com/ja-jp/services/app-service/web/
GitHub ： https://github.co.jp/
Azureポータル : https://portal.azure.com/
Visual Studio CodeでOracleのインテリセンスを設定する

# VSCodeでOracleのIntellisenseを設定
## 拡張機能でLanguage PL/SQLをインストールする

↓これですね
![image.png](https://qiita-image-store.s3.amazonaws.com/0/134221/5ee67a03-9fea-55cd-c5bb-d9dd6dfedc4c.png)

## 設定方法を確認する

↓ここに書いてありました
> plsql-language.completion.pathで設定してね（超てきとー訳）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/134221/5175b002-beac-590a-9967-37cce046c2f9.png)

## 設定する
ファイル > 基本設定 > 設定 で「plsql-language.completion.path」で検索
> 設定ファイル「plsql.completion.json」を配置するフォルダを指定してね（超てきとー訳）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/134221/516e8cfc-6538-5ce9-8c03-e5a6779a9389.png)

`D:\intellisense`を設定します。（任意のフォルダでOKです。）

## plsql.completion.jsonを保存する
`%userprofile%/.vscode\extensions\xyz.plsql-language-1.4.1\snippets`にある`plsql.completion.json`をコピーして、先ほど設定した`D:\intellisense`フォルダに保存します。
**注意：コピー元の設定ファイルを直接編集すると拡張機能の更新時に上書きしちゃうから（超てきと訳）**

## plsql.completion.jsonを編集する
まずはコメントを外してみます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/134221/2d81454a-9617-050c-2ef9-9ef9da40b522.png)

## インテリセンスが効くことを確認する
↓効いていますね
![image.png](https://qiita-image-store.s3.amazonaws.com/0/134221/0e572d3f-4291-9197-9cc4-4ed4fc2dcc54.png)

# 既存のDBから設定ファイルを自動生成する
rubyを使って手軽に出力できます。

```ruby:plsql.completion.json.generator.rb
require 'oci8'
require 'json'

#設定
user='****user****'
pass='****pass****'
tns='****tns****'
sql="select table_name,column_name,comments from user_tab_comments order by table_name,column_name"
config_file='D:\intellisense\plsql.completion.json'

#DB取得
conn = OCI8.new(user, pass, tns)
configs = {}
conn.exec(sql) do |r|
    tab,col,comm=r
    member = {label: col, kind: "field", documentation: comm}
    if configs.has_key?(tab)
        configs[tab][:members] << member
    else
        configs[tab] = {kind: "struct", members: [member]}
    end
end

#出力
File.open(config_file, 'w') { |file|
    file.puts JSON.pretty_generate(configs)
}
```
- テーブルコメント出力するの怠りました。

# 参考
[拡張機能 zabel-xyz/plsql-language](https://github.com/zabel-xyz/plsql-language)
Proxyを使って関数の呼び出し回数や全実行結果を取得する

proxyを使ってラップしてやると、関数に直接機能を追加しなくても機能を追加できるので便利です。

今回は`call-proxy`を使って関数の呼び出し回数や全実行結果を取得します。

[akameco/call-proxy: call proxy](https://github.com/akameco/call-proxy)

```
yarn add call-proxy
```

```js
const callProxy = require('call-proxy')

let i = 0
const hello = () => `hello ${++i}`
const x = callProxy(hello)

x()
x()
console.log(x.__times__)
// => 2

x()
console.log(x.__times__)
// => 3

console.log(x.__calls__)
// [ 'hello 1', 'hello 2', 'hello 3' } ]
```

このように関数に`__times__`と`__calls__`というプロパティを追加します。
`__times__`は今までの実行回数を取得し、`__calls__`は今までの実行結果を取得できます。

実行自体は単純で以下の通りです。

```js
module.exports = func => {
  const calls = []
  const handler = {
    apply(target, prop, args) {
      const result = Reflect.apply(target, prop, args)
      calls.push(result)
      return result
    },
    get(target, prop, receiver) {
      if (prop === '__times__') {
        return calls.length
      } else if (prop === '__calls__') {
        return calls
      }
      return Reflect.get(target, prop, receiver)
    },
  }
  return new Proxy(func, handler)
}
```


[akameco/call-proxy: call proxy](https://github.com/akameco/call-proxy)

## 関連

[【JavaScript】うるせぇお前がGolangになるんだよ - Qiita](https://qiita.com/akameco/items/b89850fd43cf3ef98763)

[【Proxy】JavaScriptでRubyのtimesを使う - Qiita](https://qiita.com/akameco/items/73f1f49092b49667dc3a)

<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">君は知るだろう。何をするにもその軌跡は残るということを <a href="https://t.co/P63nmYQPVy">https://t.co/P63nmYQPVy</a> <a href="https://t.co/HNNwb5fX4p">pic.twitter.com/HNNwb5fX4p</a></p>&mdash; あかめ@🤯.js (@akameco) <a href="https://twitter.com/akameco/status/1023223087599210496?ref_src=twsrc%5Etfw">July 28, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ちょっと`__calls__`の結果をこのときから変えた。
Git初心者がGitLabでプライベートリポジトリを作ってRaspberryPiからコマンドラインでcommitとpushするところまで

# 背景
いろいろやってるうちに、まじめにGitでバージョン管理しようと決心した。
何度目かの決心。
GitHubのパブリックリポジトリ使うとAPIトークンとか間違えて漏らしそう。
無償でプライベートリポジトリ使えるサービスさがしてみた。
BitbucketよりGitLabの方が流行ってそう。
使ってみることにした。

# GitLabの設定
## Register
GitLabのサイトでRegisterする。
[GitLab](https://gitlab.com/)

## ssh keys
ラズパイ上の`~/.ssh`で`ssh-keygen`した`id_rsa.pub`をGitLabのssh keysに追加する。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/184221/2c87a334-7aaf-c802-04fb-e7c2a1ca4ef1.png)

## New Project
Project（リポジトリ＋α）を作る。
とりあえず、READMEも作ってみた。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/184221/25e1b31e-ac09-bec5-81fd-c53b3220da7a.png)

# Raspberry Piの設定と手順

## gitの設定
こんな感じで設定してみた。

```
git config --global user.name "xxx xxx"
git config --global user.email "xxx@gmail.com"
git config --global core.editor emacs
```

## リポジトリのいろいろ
まずローカルのリポジトリを作ってみる。

```
git init
emacs .gitignore
git add .
git status
git commit -m "Add files for the first commit"
git log
```

GitLabのリポジトリと紐付けしてpullしてpushする。
pullするとき、unrelated historiesがどうのってrefuseされたので、検索して出てきたオプションつけてたらpullできた。

```
git remote add origin git@gitlab.com:xxx/xxx.git
git pull origin master
git pull --allow-unrelated-histories origin master
git log
git push origin master
```

# 結果
これで、GitLabで管理する下地ができた。
いろいろ使って行きたい。

# 参考
[historyコマンドで行番号を表示させない - Qiita](https://qiita.com/tamahiro/items/1ff30c078390d915b5f5)
[.gitignore の書き方 - Qiita](https://qiita.com/inabe49/items/16ee3d9d1ce68daa9fff)
[初めてGitHubリポジトリにpushしたらrejectedエラーになったときの対応メモ - Qiita](https://qiita.com/takanatsu/items/fc89de9bd11148da1438)
HTMLのHEAD内で意味もわからずコピペして使用していたコード

1つ前の記事ではWordPressでテーマを作る為の内容を書き始めましたが、
HTMLの基礎の部分でコピペしていたり、とりあえず覚えて書いていたコードがあったので、
まずそれを理解しようっていう、かなり個人的な内容でむしろメモになっちゃってますが。

#HTML書き始めの基本

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>タイトル</title>
</head>
<body>
  
</body>
</html>
```

私エディタはAtomを使用していますが、!+tabで上記のコードが表示されます。

**<!DOCTYPE html>**
HTMLを使いますよ宣言

**meta**
文章に関する情報を指定する際に使う
head内、titleの上

**charset**
character setの略。文字コードを宣言する。
（charset属性はHTML５から単独で使えるようになった属性）
複数使用は出来ない。UTF-8が推奨されている。
どんなOSでも使用可能で、世界中の文字を表示できるからだそう。
参考
[ほんっとにはじめての HTML5 と CSS3 meta要素の charset属性で文字コードを指定しよう](http://honttoni.blog74.fc2.com/blog-entry-125.html)

**viewport**
viewportは表示領域、PCで言うとブラウザウィンドウの表示領域
meta要素のname属性をviewportにする。
content属性にviewportのプロパティと値を入力して、meta viewportの指定をする。
widthは表示領域の幅、ここではdevice-widthでデバイス(パソコンのブラウザや携帯端末)の幅に合わせている。
そのほかpxで指定することもある(例えばスマホ対応)
initial-scaleは初期倍率、1で等倍。
参考
[もう逃げない。HTMLのviewportをちゃんと理解する](https://qiita.com/ryounagaoka/items/045b2808a5ed43f96607)
[コピペで済ませていませんか？改めて学び直したい「Viewport」のすべて]
(https://ferret-plus.com/6033)
viewportを指定すればメディアクエリが必要ないのか？
逆にメディアクエリを使えばviewportは指定しなくていいのか？と疑問も湧いてきましたが、
こちらのサイトでわかりやすく説明されています！

**http-equiv**
http=hypertext transfer protocolの略(初めて知った！)
equiv=equivalentの略で、相当の・同義のという意味。
http-equiv属性ではブラウザの動作を指定できる。
meta要素はhttp-equiv属性が指定されるとプログラマ指示子となる。
**プログラマ指示子とは？？**
ブラウザに対してHTML文書の状態・動作を指示するもの。
通常はサーバーが担当している”ウェブページをどのように提供するか”の情報をHTML上で指定することができる。
**使い方**
`<meta http-equiv="○○"　content="△△">`
必ずcontent属性とセットで使うこと！
**X-UA-Compatible**
IEの互換表示設定の指定。
content属性の値をIE=Edgeとすることで、
IEがそのバージョンの標準モードでレンダリングするよう促している。
参考
[ほんっとにはじめての HTML5 と CSS3 meta要素の http-equiv属性で動作を指示しよう](http://honttoni.blog74.fc2.com/blog-entry-129.html)
こちらのほんっとにはじめての　HTML５とCSS３はとても細かく書いてくださっていて、初心者の救世主様です泣

**なぜIE対策としてこのタグを記入するのか**
IEはバージョンごとにレンダリングが変わり、互換表示と標準表示がある。
IEでwebページがうまく表示されない時には、互換モードになっていることが多いとのこと。
なので標準モードにさせる必要がある。

というかそもそも互換って言葉の意味がわからず、それも調べてみた笑
「機械の同一部品の間では、どれを使っても当てはまるというように、互いに取換えがきくこと」だそう。


#外部ファイルからCSSを読み込む

**フォルダ直下にstyle.cssを保存している場合**

```html
<link rel="stylesheet" href="style.css">
```
rel=relation(関係)の略。
relでファイルとの関係性を指定　”hrefで指定したファイルはstylesheetです”
href=hypertext reference(ハイパーテキスト参照)の略。
ファイルのURL（ここではファイル名）を記入。

**CSSフォルダを作ってその中に入れている場合(reset.cssなど)**

```html
<link rel="stylesheet" href="css/reset.css">
```
フォルダ名/ファイル名

**fontawesomeを使う**

```html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" >
```
他にもlinkタグでできることがたくさん
[HTMLのlinkタグとは？基本的な書き方とrel属性まとめ](https://saruwakakun.com/html-css/basic/link-rel)
サルワカって名前なだけあって、猿でもわかるってくらいわかりやすいです、こちらも神。。


HTMLで意味もわからずとりあえずコピペして出来た気になっていたのが、上記のタグたち。
いろいろなサイトのソースを見ると、meta要素がたくさんあるので、使い方に合わせてもっと勉強していきたいです！
Google Colaboratory で ReNom 環境を構築する

# はじめに
[Google Colaboratory](https://colab.research.google.com/) で無料のGPU環境が使えるようになりました。[Chainer](http://chainer.org/) を Colab のGPU環境で動かすこともできるようなので、同じく国産の機械学習フレームワークである [ReNom](http://renom.jp/ja/) の環境を構築してみました。
手順は github レポジトリにある`install-renom.ipynb`がすべてです。
https://github.com/hokoin/renom-colab.git

# ReNom とは
株式会社グリッド社が開発している国産の機械学習フレームワークです。
フレームワーク本体となる ReNom DL の他、ReNom TDA / TAG / IMG / DP などの周辺ツール（基本的にWebブラウザ上で動くGUIツール）を合わせたソフトウェア群で、商用目的でなければ無償で利用できます。
ReNom TAG / IMG / DP は Colab 上では動かないので、ReNom DL / TDA のみインストールします。

# 手順
GitHubレポジトリの`install_renom.ipynb`をブラウザで開きます。
https://colab.research.google.com/github/hokonin/renom-colab/blob/master/install_renom.ipynb

![install-renom_01.png](https://qiita-image-store.s3.amazonaws.com/0/256480/a94ab719-da8c-e165-56d5-766a3d1b1ca6.png)

そのままだと保存できないので、ファイルメニューの「ドライブにコピーを保存」を実行して Google Drive に保存します。

あとは全てのセルを順番に実行していくだけです。
理由は分かりませんが、ランタイムメニューの「すべてのセルを実行」だとやたら時間が掛かるうえに一部が正常にインストールできていないようなので、「Shift + Enter」で手動実行していった方が良いかも知れません。
下記の TDA 実行結果まで出れば完了です。
![install-renom_02.png](https://qiita-image-store.s3.amazonaws.com/0/256480/ab1b7a72-41a2-ed7e-fb74-b69cde9ce0ad.png)

notebook を開けば分かるので手順は端折ってますが、ReNom をGPU版でセットアップする際に cuda/cuDNN 関連のヘッダファイルやライブラリと nvcc も必要になるので cuda/cuDNN を改めてインストールし、nvcc に合わせて gcc/g++-5 もインストールしています。
colab にデフォルトインストール済のパッケージのバージョンは ReNom の公式 Requirements のバージョンより新しいですが、明確に問題が出るまでは気にしないことにします。

# おわりに
現在インストールの正常終了と簡単な動作の確認しかしておらず、本当にGPUが使われるかが未確認のため、確認できれば追記します。
なお colab ではありませんが ReNom のモデル保存に `h5py` が必要との情報も見かけたので、その場合は以下を追加してください。

```bash
!pip install h5py
```

ReNom の記事はあまり見かけませんが、環境構築のハードルが下がれば幸いです。
# 参考
* [ReNom カタログ](http://renom.jp/ja/)
* [【秒速で無料GPUを使う】深層学習実践Tips on Colaboratory](https://qiita.com/tomo_makes/items/b3c60b10f7b25a0a5935)
* [Colaboratoryで10秒で起動できる、ChainerのGitHubレポジトリ作ってみた](
https://qiita.com/keisuke-umezawa/items/4e99c2a4f5f07567444c)
videoタグが表示されない時に確認すべきこと。

#videoタグを利用していて、思わぬ原因でつまづいてしまったのでメモ程度に記載します。

<p>videoタグは各ブラウザによって仕様が定まっておらず、デバック作業に中々苦労すると感じております。<br>特に
SPでも動画を再生したいという要望の場合、より多くの条件が絡んできます。</p>

##videoタグが表示されない時にチェックすべき項目

・ソースは正しく記述されているか？
・.htaacesにAddは設定されているか？
・Basic認証がかかっていないか？
・動画の解像度が大きくないか？
・動画の容量は大きくないか？
・ブラウザが対応している拡張子か？



###ソースは正しく記述されているか？

当然ですが、正しく表示されません。
コンソールなどでエラーが無いかチェックしましょう。

###.htaacesにAddTypeは設定されているか？
.htaacesに使用する動画拡張子を記述しましょう。

```html:.htaaces
AddType video/mp4 .mp4
AddType video/ogg .ogv
AddType video/webm .webm
```

###Basic認証がかかっていないか？
私はまだ経験がありませんが、Basic認証が設定されていると再生されないことがあるようです。

###動画の解像度が大きくないか？

これが今回の原因でした・・
　ios11では1920* 1080の解像度は再生できませんでした。
640*360で再生可能なことを確認しています。

適正な解像度に調整しましょう。
###動画の容量は大きくないか？

ブラウザによって大容量のデータを表示しない場合もある様です。
ユーザビリティの関係からも、あまり大きなデータを設置しない方が良いかと思います。

###ブラウザが対応している拡張子か？

mp4であれば、ほぼ全てのブラウザが対応しているかと思います。


videoタグはjavascriptsでも操作ができ、サイトのゴージャス感も一気に増すと思うのですが、
ブラウザハックに毎度時間を取られてしまいます。
実装に関しても、容量や、レスポンシブなど考えることがたくさんあるので、毎度四苦八苦ですね。



参考にさせて頂きました資料
http://webfeelfree.com/html5-video-basis/
https://qiita.com/grapswiz/items/4ce35afa8bf30d7c0343
https://qiita.com/fukamiiiiinmin/items/34c1780601480e449154
Twitteボタンのツイート内容を日本語で色々編集


# Twitteボタンのツイート内容を日本語で色々編集

案件によっては、ツイートの文言を公式の定型順序ではなく、ハッシュタグを文中にもってくる（「テキスト #ハッシュタグ テキスト」）などカスタムしたツイートボタンのコードが必要になることがあったので、その際に試行錯誤した記録です。

ツイート文言をJavaScriptでURIエンコードする記事をネットでは見かけたんですが、
ハッシュタグ「#」がうまくURIエンコードできなかったのでそれに対応させたやつです。

## 要望
- 「テキスト #ハッシュタグ テキスト」のフォーマットの文章をツイートさせたい
- 日本語エンコードは手作業ではなくjsでやりたい

## 問題
- `encodeURI(decodeURI(this.href))`として、`ｈｔｔｐ〜`全体をURIエンコードするとハッシュタグ（#）がエンコードできない（ついでに%も）
- 引数`hashtags` に入れると文末ハッシュタグが入るので目的に合わない
 

## 最終的にこんな感じ

```html
<a href="https://twitter.com/intent/tweet?text=" 
    onclick="window.open(this.href + encodeURIComponent('#ハッシュタグ1 テキスト1 #ハッシュタグ2 http://www.example.com/ テキスト2')); 
    return false;" 
    target="_blank">
    ツイートする
</a>
```
（2020/01/10 更新）
`http://twitter.com/share`から`https://twitter.com/intent/tweet`に変更
ポップアップウィンドウだとブロックされる可能性があるとのことで、別タブに変更



### ポイント
- （そもそも）日本語を含むURLだとIEでエラーになるのでURIエンコードする必要がある
- ハッシュタグ「#」や「%」を含む文字列のみを `encodeURIComponent()` でエンコードして引数に入れ、URLに追記してからURL遷移させる
- ｊｓを切ってるユーザーには優しくない


引数`url `を空にするとログイン時にツイート内容の挙動がおかしくなったので注意（http://のみ記述で回避できた） 

→ （2020/01/10 更新） intent であれば、`url=http://`が無くても問題ない


## 参考
[Twitter公式 Tweet Button](https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/overview)
[Twitter公式 Tweet Button　parameter](
https://developer.twitter.com/en/docs/twitter-for-websites/tweet-button/guides/parameter-reference1)
[オリジナル画像のツイートボタンを設置する方法](https://edge.sincar.jp/web/original-tweet-button/)
[各種SNSへのシェアボタン設置方法まとめ](https://qiita.com/shuntaro_tamura/items/26f8186d4111364918eb)
Raspberry pi Zero と ADコンバーター（MCP3008）を使って光センサーにトライ

Raspberry piでアナログセンサーを使うことにチャレンジしてみます。Raspberry piのGPIOではアナログの入出力のうち、出力はPWM（パルス幅変調）による擬似アナログ出力が可能ですが、アナログ入力には対応していません。
そこで必要になってくるのがADコンバータです。このコンバータにはいくつも種類があるのですが、今回は[秋月でMCP3008を購入](http://akizukidenshi.com/catalog/g/gI-09485/)して試してみました。
光センサーには[CdSセルの光センサー](http://akizukidenshi.com/catalog/g/gI-00110/)を利用しています。

---

# 参考にしたサイト

ADコンバータは使ったことがなかったのですが、下記のサイトはデータシートの引用も交えて分かりやすかったので参考にさせて頂きました。
ありがとうございます。

https://hack-le.com/47361017-2/

---

# 配線

上記のサイトを参考に配線しています。線の数は多いですが、分かってしまえば何ともないです。

<IMG src="https://qiita-image-store.s3.amazonaws.com/0/208639/58c43d5f-090d-51f7-8808-0993d869c831.png" width=50%>

---

# ピンの対応一覧

※MCP3008側はデータシート参照

```
RPi(3V3, 1pin) < — > MCP([Vdd,Vref],[16pin,15pin])
RPi(GND, 6pin) < — > MCP([AGND,DGND],[14pin,9pin])
RPi(SCLK, 23pin) < — > MCP(CLK,13pin)
RPi(MISO, 21pin) < — > MCP(Dout, 12pin)
RPi(MOSI, 19pin) < — > MCP(Din, 11pin)
RPi(CE, 24pin) < — > MCP(CS, 10pin)
```

---

# Pythonコード

```python
from gpiozero import MCP3008
from time import sleep
tmp = MCP3008(channel=0, device=0)

while True:
    temperature = (tmp.value * 3.3) * 100
    print (round(temperature,5))
    sleep(0.5)
```

---

# 実装に当たって

3.3V電源、MCP3008のチャンネル1につないでいる前提のコードです。
参考サイトではspidevパッケージを使ったのですが、何故か読み取れませんでした。
そこで、MCP3008モジュールが含まれているgpiozeroパッケージを導入したところ、期待通り光センサーの変化を測定することができました。

---

# 最後に

ADコンバータに初めて触れましたが、始めるまでの心理的なハードルは高かったものの、やって見るとちゃんと動いてくれたので達成感は大きかった。
チャンネルは1つしか試せてませんが、8chまで対応しているので、
他のセンサーも同時に扱ってみようと思います。
ところでspidevだとうまく動かない理由は何なんでしょうか・・・
deviseのログイン画面でのみ、application.html.erbを除外する

#appication.html.erbは全ページに反映される

まあそういう機能なんですが、application.html.erbに書いたものは全てのページに反映されます。
例えば自分だと、ユーザーがアクションを起こすようのフッター（投稿画面や検索画面、お気に入りリストページなどへの遷移）をapplicationに書いていたのですが、これはログイン画面にはいらない。。。
備忘録のために、メモります。


#元ネタ
元ネタはこちらのgithubになります。
[How To: Create custom layouts](https://github.com/plataformatec/devise/wiki/How-To:-Create-custom-layouts)

やり方が３つ紹介されていますが、自分は一番下のApplication / Devise Configというものを採用しました。
さらにその中にも３つあるのですが、自分はその中で真ん中のやり方を利用しています。

#具体的な実装

config.applicationに下記コードを書きます。
上の元ネタにもありますが、自分がapplication.html.erbを適用したいものはlayout "devise"とする。
適用したくないものにはlayout proc{ |controller| user_signed_in? ? "application" : "devise" }と表記する。

```config.application.rb
config.to_prepare do
      Devise::SessionsController.layout proc{ |controller| user_signed_in? ? "application" : "devise" }
      Devise::RegistrationsController.layout proc{ |controller| user_signed_in? ? "application" : "devise" }
      Devise::ConfirmationsController.layout "devise"
      Devise::UnlocksController.layout "devise"
      Devise::PasswordsController.layout "devise" 
    end
```

特定のページが自分のどこのコントローラーに属するかは、自分のエディタを見ればわかります。
![スクリーンショット 2018-07-28 23.54.23.gif](https://qiita-image-store.s3.amazonaws.com/0/147990/737a7a7a-f5ee-4d35-c9f8-5a664aa17403.gif)

devise以下にあるエディタリストで当てはまるものを探せばokです。
npxでGitHubにあるコードを実行する

Node.jsやフロントエンドではnpmを使ってライブラリやCLIツールを使うことは多いと思います。
npmでCLIツールを使うときにnpxを使う方も多いかと思います。
しかしnpmjs.comに上がっているバージョンが古かったり、開発中のパッケージを使いたいなどの理由でGitHubにあるコードをそのまま使いたい場面があります。今回はそんなときの方法を紹介します。

# [npx](https://www.npmjs.com/package/npx)
npmで一度だけCLIを実行し、CLI実行後は使ったパッケージはローカルに残らない[npx](https://www.npmjs.com/package/npx)といものがあります。
非常に便利で筆者も[create-react-app](https://github.com/facebook/create-react-app)や[express-generator](https://github.com/expressjs/generator)で雛形を作成するときとかに使っています。
npxに関しては『[npxが結構良さそうな件について](https://qiita.com/vvakame/items/23b02e950ca307b9e674)』や『[npm 5.2.0の新機能！ 「npx」でローカルパッケージを手軽に実行しよう](https://qiita.com/tonkotsuboy_com/items/8227f5993769c3df533d)』にて紹介されているのでそちらをお読みください。

# GitHubにあるコードをnpxで実行する
このnpx、npmjs.comにpublishされているコードだけでなくGitHub上にあるコードを実行することも可能です。
以下はnpxでexpress-generatorをGitHub上からコードをダウンロードして実行する例です。
実行されるコードはmasterブランチのコードです。

```
npx github:expressjs/generator my-express-app
```

上記のように`npx github:${ユーザー名}/${リポジトリ名}`で実行可能です。普通にnpxを実行するときのパッケージ名の部分を`github:${ユーザー名}/${リポジトリ名}`に変更するだけです。
あとは普通にnpxを使うときのようにコマンドライン引数を指定することも可能です。

# 注意点
- プロジェクトルートにあるpackage.jsonに記載されている`bin`のコードがGitHub上に存在していなければいけません。
- npmjs.comにpublishされるコードがサブディレクトリに置いてあったりしてプロジェクトルートにない場合もGitHub上のコードをnpxで実行することはできません。create-react-appなんかは実行できません。

# 所感
この記事を書くきっかけになったのが[api-designer](https://github.com/mulesoft/api-designer)というパッケージでnpmjs.comにpublishされているのにはバグがあるけどGitHubのmasterにあるコードは修正されていました。『[RAML: api-designer実行時にrequestが見つからずにエラーになる件について](https://qiita.com/shisama/items/9ace46814b454265cd13)』

同じようにバグ修正されいているけどpublishされていないパッケージは他にもあると思います。
あとnpmにpublishすることはできないようなprivateなリポジトリのコードを実行する場合も便利かと思います。
そういったときに本記事で紹介した方法が役立てば幸いです。

最後までお読み頂きありがとうございました。質問等があればコメント欄またはTwitter([@shisama_](https://twitter.com/shisama_))までお願いいたします。