OmniAICreator/Qiita-1.07M huggingface dataset:
railsチュートリアル5.31後に出たNameErrorを各html.erbをいじって解決した


リスト5.31のあと、今の状態を図5.10のようになるだろうとみてみると、こんなのがでてきました。

Aboutページがこんな感じに。
![スクリーンショット (59).png](https://qiita-image-store.s3.amazonaws.com/0/256858/828aadc8-9ee5-c769-ea1a-62d9ca9559ce.png)


contactページも。
![スクリーンショット (60).png](https://qiita-image-store.s3.amazonaws.com/0/256858/1aa95ee2-2a7d-8c66-f69c-832ea1aa4778.png)


helpページも。
![スクリーンショット (61).png](https://qiita-image-store.s3.amazonaws.com/0/256858/74d2dabd-d19e-3438-0b4c-1ca3b704d859.png)

ん～～チュートリアル通りにしたのになんでかなあ。

Showing /home/ec2-user/environment/sample_app/app/views/layouts/application.html.erb where line #4 raised:と書いてありましたがよくわからなかったので、試しにhelper/applicationhelper.rb　のフォルダを確認すると、

```application_helper.rb
module ApplicationHelper #ページごとの完全なタイトルを返します。
def full_title(page_title = '') #コメント行（以下コメント一個ずつ上に）
base_title = "Ruby on Rails Tutorial Sample App" #メソッド定義とオプション引数
if page_title.empty? #変数への代入
base_title #論理値テスト
else #暗黙の戻り値
page_title + " | " + base_title 
end
end
end
```

これもチュートリアル通りにやったのになぜ・・・？

結局 views/static_pages/about.html.erbを編集をしたらエラーが解決しました。

これを

```erb:views/static_pages/about.html.erb
<% provide(:title, "About") %>
    <h1>About</h1>
    <p>
      <a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>
      is a <a href="https://railstutorial.jp/#ebook">book</a> and
      <a href="https://railstutorial.jp/#screencast">screencast</a>
      to teach web development with
      <a href="http://rubyonrails.org/">Ruby on Rails</a>.
      This is the sample application for the tutorial.
    </p>
```

こうした。

```erb:views/static_pages/about.html.erb
<% provide(:page_title, "About") %>
    <h1>About</h1>
    <p>
      <a href="https://railstutorial.jp/">Ruby on Rails Tutorial</a>
      is a <a href="https://railstutorial.jp/#ebook">book</a> and
      <a href="https://railstutorial.jp/#screencast">screencast</a>
      to teach web development with
      <a href="http://rubyonrails.org/">Ruby on Rails</a>.
      This is the sample application for the tutorial.
    </p>
```

titleをpage_titleに変更しました。ここの名前がエラーだったのかな。
![スクリーンショット (63).png](https://qiita-image-store.s3.amazonaws.com/0/256858/71e0cc23-0c63-4622-3c48-2f6182e66dc5.png)

できたー！
railsチュートリアル通りにしたのですが、どこかで見逃していたのでしょうか・・・:dizzy_face:
まだまだルーティングなどに弱いです。

ちなみに今回初Qiitaでしたので、以下のコードの載せ方を参考にさせていただきました。
:point_right_tone1:[Qiita Markdown 書き方 まとめ](https://qiita.com/shizuma/items/8616bbe3ebe8ab0b6ca1)
node.jsでCSVをjsonにしたいだけなのに……

# 課題
- csvをjsonにしたいだけなのに、[csvtojson](https://www.npmjs.com/package/csvtojson)で検索するとpipeとかコールバックとかめんどくさい使い方しかヒットせず、もっとシンプルでコンパクトで同期的な使い方が欲しかった。

# 結論

- インストール

```
npm install --save csvtojson
```  
<br>

- 使い方  

```
// read Library
var Converter = require("csvtojson").Converter;
var converter = new Converter({});

// async
async function readData(): Promise<void> {
    // await
    const json = await converter.fromFile("./assets/data/xxx.csv");
    console.log(json);
}
readData();
```
（レポート）逆境から新規事業をスタートアップする「仮説検証型アジャイル開発」の実践

# 逆境から新規事業をスタートアップする「仮説検証型アジャイル開発」の実践
- https://devlove.doorkeeper.jp/events/77548
- AgileJapanで一度聞いたけど、時間枠が足りなかったようで、だいぶ早送り的感じだった。
- もう一度聞けるチャンスが来たので、再聴講組です。

## NAVITIMEさんのオフィスが綺麗
<img src="https://qiita-image-store.s3.amazonaws.com/0/242985/de33397e-c918-01ef-6905-1113ba47314b.jpeg" width=30%><img src="https://qiita-image-store.s3.amazonaws.com/0/242985/a85dabd6-b501-7b23-354f-55378fcafdff.jpeg" width=30%>

<img src="https://qiita-image-store.s3.amazonaws.com/0/242985/f4f91a91-ef88-8d5d-74e8-e50d09088240.jpeg" width=30%><img src="https://qiita-image-store.s3.amazonaws.com/0/242985/dc07836b-3c5f-2c81-c31c-66a90aafce4e.jpeg" width=30%>

### メモ
- POが顧客側にいる前提だと、いまくいかないことが多かった。
- なので、仮説検証のやり方を取るようにした
- セットベース、ポイントベース
- デザイン思考  
  
- 仮説キャンバス
    - https://lp.canvas.guildworks.jp/
- エスノグラフィー
- 行動フローベースの仕組み設計
- プロトタイプ制作　prott
- プロトタイプ検証
- atomic desin

### むきなおり
- ゴールデンサークルを２回書く
    - 2回目の前に、問いかける。本当に私達が実現したいこととあっているか？
rails に7つのアクション以外の新しいアクションを追加

自動生成される7つのアクション以外を使いたい時。

routes.rbに記述

　アクションを加えたいcontrolloer(例：entries)の下に新しいアクション(例：casting)を記述。

　　　resources :entries do
        member do
          patch 'casting'
        end
      end

member :idを持つ
collection :idを持たない

patch,post,get などは使い分け
heroku ログインからアップロードまで

#HEROKU ログインからアップロードまで
　HEROKUの使いかたのメモ

##ログイン
  terminal上で、heroku login
  e-mail
　passwordを入力

## git hubにアップ
git init	リポジトリを作成する
git add ファイル名	管理するファイルを指定する
git add .        全てのファイルを指定
git commit -m"  "	ファイルをコミットする
 

##HEROKUに同期
git push heroku master 

##HEROKUでmigrate
git push heroku master でマイグレーションファイルをHEROKUにアップしてから、
HEROKU上でもmigrate
heroku run bundle exec rake db:migrate
Squeak 5.1 で補完入力を出来るようにする(OCompletion)

　最近の開発環境ではコードの補完入力がされる事が多くなっています。 Smalltalk は長い名前が付けられている事も多いので同じく補完入力が出来ると便利です。そんな時に便利な OCompletion を導入してみましょう。

 Help メニューから "Extending the system" で出るウィンドウにも導入方法が書いてあるのですが、そちらを "DoIt" するだけではうまく導入できなかったので、導入方法を紹介します。

# システムをアップデートする
　Workspace に次のように入力して "DoIt" して念のためシステムをアップデートしておきます。

```smalltalk
Utilities updateFromServer
```

# インストールする
　次を "DoIt" します。

```smalltalk
(Installer ss project: 'OCompletion') install: 'Ocompletion'.
```

　次にデスクトップメニューを開き、"open…" を選択すると "open…" メニューが開くので "Monticello Browser" を選択するか、"Workspace" で次を "DoIt" します。

```smalltalk
MCWorkingCopyBrowser open.
```

　左のペインから "OcompletionSqueakCompatibility" を選択して右のペインで最新のものを選択し "Load" ボタンを押して読み込みます。

　"Workspace" で次を "DoIt" します。

```smalltalk
(Smalltalk at: #ECToolSet) register.
```

　すると "Please Choose" というダイアログが出るので "#ECToolSet" ボタンをクリックします。

　最後に次を "DoIt" します。

```smalltalk
(Smalltalk at: #ToolSet) default: (Smalltalk at: #ECToolSet).
```

　無事に終了したら Workspace などで入力をすると補完がされるようになっているはずです。上下キーで補完対象を選択し、Tab キーで残りの入力がされるようになっていたり、対になる括弧やクォーテーションが補完されるようになります。
ScribusをmacOS High Sierra にインストール


インストールの際、こちらを参考にさせていただきました。
→http://d.hatena.ne.jp/ynakajima/20090814/p1

インストール後、GhostScriptのインストールで詰まったので、
そのあたりを自分用にわすれないようにメモしておきます。


## Scribusをダウンロード
https://sourceforge.net/projects/scribus/files/
ダウンロードした scribus-1.4.7.dmg ファイルをクリック
↓
セキュリティのワーニングが出るので、システム環境設定＞セキュリティとプライバシー＞ダウンロードしたアプリケーションの使用許可で、Scribusを使用許可
↓
インストーラーのガイダンス画面が開く。
![スクリーンショット 2018-08-12 12.18.00.png](https://qiita-image-store.s3.amazonaws.com/0/173392/06108513-9a52-e153-5f53-d2c46c43ddc1.png)
appのアイコンをApplicationsにドラッグする。

↓
アプリケーションフォルダの中に「Scribus」というアイコンができているのでクリックして起動
![スクリーンショット 2018-08-12 12.23.26.png](https://qiita-image-store.s3.amazonaws.com/0/173392/0a291395-da8d-b051-449d-9086cdaa6131.png)

↓
なんかいきなり警告
![スクリーンショット 2018-08-12 12.24.29.png](https://qiita-image-store.s3.amazonaws.com/0/173392/186c62f5-4400-fe39-a199-d3b5428277fe.png)
↓
印刷する時に困るという内容。とりあえずOKをクリックして閉じる。

## GhostScriptをインストール


色々調べてたらこちらに参考情報が
https://rcmdnk.com/blog/2017/02/09/computer-mac-homebrew/
↓
```
brew install ghostscript
```
![スクリーンショット 2018-08-12 19.29.40.png](https://qiita-image-store.s3.amazonaws.com/0/173392/47ea7892-f769-8b1b-9ffb-c18d625175dc.png)

GhostScriptのインストールできた。
↓
一度Scribusを終了させて、再度起動
↓
今度はGhostScriptのワーニングが出ない(^^)やったね
![スクリーンショット 2018-08-12 19.38.33.png](https://qiita-image-store.s3.amazonaws.com/0/173392/30adb8f8-9fde-6bcd-b90e-9c541a34aa1b.png)
↓
OKを押してもいいんだけど、、初期設定を先にしたいので、キャンセルをクリック。



## 初期設定

ScribusのPreferencesメニューを開く
![スクリーンショット 2018-08-12 19.47.34.png](https://qiita-image-store.s3.amazonaws.com/0/173392/17132cd8-5412-7b77-d72f-57faf5f8485f.png)

↓
ドキュメント＞単一ページ＞単位を「ポイント(pt)」から「ミリメートル(mm）」に変更して「OK」

![スクリーンショット 2018-08-12 19.49.59.png](https://qiita-image-store.s3.amazonaws.com/0/173392/4f5af952-27e0-45b9-7b79-a06fd82fb637.png)

## 新規作成
↓
「ファイル」メニュー＞「新規」を選ぶと、以下の設定画面がひらく
![スクリーンショット 2018-08-12 19.53.54.png](https://qiita-image-store.s3.amazonaws.com/0/173392/6308cd1a-99c4-a9d2-13d5-3d3fe5006bcd.png)
デフォルトの単位が「ミリメートル(mm)」になってるのを確認して「OK」をクリック
↓
しーん
あ、あれ？

##ドキュメントの編集窓が開かない・・
DockのScribusのアイコンから「全てのウィンドウを表示」すると
![スクリーンショット 2018-08-12 19.58.57.png](https://qiita-image-store.s3.amazonaws.com/0/173392/d4599d82-d93a-cc83-8fb5-6476de65164d.png)
↓
このように画面外にはいるのですが、クリックするとどっかへいってしまう。
![スクリーンショット 2018-08-12 21.31.28.png](https://qiita-image-store.s3.amazonaws.com/0/173392/ae3fb3a1-182c-0eca-1a5d-063136ec3d82.png)

↓
[Macでウインドウが画面外に出て戻せない場合の６つの対処法](https://kerubito.net/apple/116)を参考に、
上から順番にためし、「解像度を変更する」でうまくいきました。

1366 x 768 だったんですが、1280 x 720に変更したら、背後にスッと現れました。（以下のスクショのように。）

![スクリーンショット 2018-08-12 21.49.15.png](https://qiita-image-store.s3.amazonaws.com/0/173392/d40fb6a5-b5da-05ca-f34e-9db2ee189a48.png)

その後、1366 x 768に戻しておく。


## 文字入力

さっぱりわからないのでこれから手探り！

今日はここまでっ。

#感想
DTPソフトがタダで使えるなんてありがたいことだなぁ。しかし解像度問題で手間取ってしまった。
日本語＆Mac版のTipsがネットにあまり出てこない。まずは使えるフォントを探さんと。
ラズパイをモニターなしOSインストール

##概要
ヌーブスをディスプレイモニタがなくてもインストールします。（サイレントインストール）

UARTを有効にし、シリアルコンソールからインストールすることもできるかもしれませんが、USBシリアルが必要になるので、今回は、有線LANで設定します。

ラズパイに有線LANで接続。

※全てのラズパイで動作確認していませんので注意。RaspberryPi3modelB+(Element14)

##OS入手、ファイル変更、追加

まずはヌーブスダウンロード。SDカードをフォーマットして、ダウンロードしたファイルをSDカードにコピー。

そのファイルの中にあるrecovery.cmdlineファイルに silentinstallを追記します。

runinstaller quiet ramdisk_size=32768 root=/dev/ram0 init=/init vt.cur_default=1 elevator=deadline silentinstall

Macなら、

$sudo curl -o 2018-06-27-raspbian.zip -L http://downloads.raspberrypi.org/raspbian_latest

あるいは、

$sudo wget http://downloads.raspberrypi.org/raspbian_latest

OSラズベリアン入手。

念のため、ファイルが壊れていないか？改ざんされていないかチェック。

openssl dgst -sha256 2018-06-27-raspbian.zip
 
SHA256(2018-06-27-raspbian.zip)= 8636ab9fdd8f58a8ec7dde33b83747696d31711d17ef68267dbbcd6cfb968c24

展開します。

$unzip 2018-06-27-raspbian.zip


ラズベリーアン入手先URL。
http://downloads.raspberrypi.org/raspbian/images/


OSディレクトリ直下のラズベリアン以外のデフォルトで入っているディレクトリ削除。

SDカードをパソコンからラズベリーパイに挿入して、電源ON。緑ランプが点灯、点滅しなくなったら、インストール終了と見なします。

##SSHの有効化

インストールが終了したら、電源を切りラズパイからSDカードを抜いてパソコンで拡張子なしsshという名前のファイルを新しくできたBootディレクトリの直下に作成。

再びSDカードを挿入してラズパイ電源ON。

##SSHでログイン

ラズパイのIPアドレスを見つけます。$arp -aで検索 ,$pingで反応を見るか、AndroidアプリなどでラズパイのIPアドレス見つけるのもいいでしょう。

$ssh pi＠ipアドレス

パスワード　raspberry

ログイン後はパスワードを変更したほうがいいでしょう。パスワードを忘れるとログインでできなくなりますので、管理は慎重に。

$psswd

固定IPアドレス設定

時間が経過するとIPアドレスが変更される場合がありますので場合によっては固定にしましょう。

テキストエディタでコメントアウトや編集します。

$sudo vi /etc/dhcpcd.conf

interface wlan0
static ip_address=ラズパイIPアドレス/24
static routers=ルータのIPアドレス
static domain_name_servers=8.8.8.8など

ワイファイを使いたい場合は、ここで設定するのもいいでしょう。

次に有効化するため再起動します。

$sudo reboot

再起動後は設定したアドレスでSSHで接続します。以上です。
[C#]IEnumerable<T>とIReadOnlyList<T>について

最近、C#を学び始めました。
コードを書いているときに、引数にList型を持たせた関数を作成した際、以下のように書きました。

```csharp
public void Test(List<int> testList)
{
    foreach (var list in testList)
    {
         Console.WriteLine($@"{list}");       
    }
}

```

しかし、これだと関数内でListの中の値が変更可能と知り、C++のconstのように関数内では変更できなくするようなものがないか調べました。使用環境は以下の通りです。

## 使用環境
+ Visual Studio Community 2017
+ .NET Framework 4.6.1
+ C# 7.1

## IEnumerable&lt;T&gt;
> 指定した型のコレクションに対する単純な反復処理をサポートする列挙子を公開します。  
引用先 [IEnumerable(T) インターフェイス (System.Collections.Generic)](https://msdn.microsoft.com/ja-jp/library/9eekhta0(v=vs.110).aspx)


```csharp
pubilc void Test(IEnumerable<int> testList)
{
    foreach (var list in testList)
    {
         Console.WriteLine($@"{list}");       
    }
}
```

内部でforeach文などを使用するときには便利だと感じました。しかし、関数内ではindex指定して値が得られませんでした。

```csharp
pubilc void Test(IEnumerable<int> testList)
{
    //エラー
    var number = testList[0];
}
```

## IReadOnlyList&lt;T&gt;
> インデックスによってアクセスできる要素の読み取り専用コレクションを表します。  
引用先 [IReadOnlyList(T) インターフェイス (System.Collections.Generic)](https://msdn.microsoft.com/ja-jp/library/hh192385(v=vs.110).aspx)

```csharp
pubilc void Test(IReadOnlyList<int> testList)
{
    foreach (var list in testList)
    {
         Console.WriteLine($@"{list}");       
    }
}

```
IReadOnlyList&lt;T&gt;はインデックス指定で値を得られました。関数内でも配列と同様に扱えるのは便利ですね。

```csharp
pubilc void Test(IReadOnlyList<int> testList)
{
    //正常に動作する
    var number = testList[0];
}
```


## 感想
個人的な感想としては、IReadOnlyList&lt;T&gt;の方が、C++のconstに近いのかなと感じました。
ただ、両方ともキャスト変換すれば値が変更できますが、その点を考慮しなければ十分読み取り専用として使用できそうです。

```csharp
pubilc void Test(IEnumerable<int> testList)
{
   //キャスト変換により値が変更可能
    ((List<int>)testList)[0] = 100;
}
pubilc void Test(IReadOnlyList<int> testList)
{
    //キャスト変換により値が変更可能
    ((List<int>)testList)[0] = 200;
}
```

あと、余談でIReadOnlyList&lt;T&gt;はCountプロパティが使える点が IEnumerable&lt;T&gt;よりも優れていると思います。


他にもあれば情報提供よろしくお願いします。

## 追記
sdkeiさんからの情報提供で、変更可能な方にキャストできなくするには、List.AsReadOnly メソッドを使用して ReadOnlyCollection 型のオブジェクトにすればいいという意見をもらいました。

```csharp
public void Main()
{
    var readOnlyLists = new List<int>() { 1, 2, 3};
    //ReadOnlyCollection<T>オブジェクトにする
    Test(readOnlyLists.AsReadOnly());
}

pubilc void Test(IReadOnlyList<int> testList)
{
    //エラー
    //実行時,System.InvalidCastExceptionが発生する
    ((List<int>)testList)[0] = 200;
}
```
Dialogflow のエージェントに C# でメッセージを送る

簡単に対話型エージェントを作れて何やらすごそうな Dialogflow ですが C# から触るにあたって情報が少なくて嵌ったため共有します。

#事前準備
- エージェントを作る
 - 私は[こちらの記事](https://qiita.com/kenz_firespeed/items/0979ceb05e4e3299f313)を参考にさせていただきました。ありがとうございます。
- 認証の設定(JSONファイルを取得)
 - [このページ](https://dialogflow.com/docs/reference/v2-auth-setup)を参照してください。

#C# でメッセージを送る
###NuGet パッケージのインストール
[Google.Apis.Dialogflow.v2 ](https://www.nuget.org/packages/Google.Apis.Dialogflow.v2/)を入れます。

###サンプルソース

```cs:Program.cs
using Google.Apis.Auth.OAuth2;
using Google.Apis.Dialogflow.v2;
using Google.Apis.Dialogflow.v2.Data;
using Google.Apis.Services;
using System;
using System.IO;
using System.Threading.Tasks;

namespace ConsoleApp1
{
    class Program
    {
        private static readonly string PROJECT_ID = "yourProjectId";
        private static readonly string CREDENTIAL_PATH = @"Your\Credential\Path.json";

        static void Main(string[] args)
        {
            var sessionId = Guid.NewGuid().ToString();
            var message = "hoge";
            var response = RequestAsync(sessionId, message).Result;
        }

        private static async Task<GoogleCloudDialogflowV2DetectIntentResponse> RequestAsync(string sessionId, string message)
        {
            ServiceAccountCredential credential;
            using (var stream = new FileStream(CREDENTIAL_PATH, FileMode.Open, FileAccess.Read))
            {
                credential = GoogleCredential.FromStream(stream)
                                             .CreateScoped(DialogflowService.Scope.CloudPlatform)
                                             .UnderlyingCredential as ServiceAccountCredential;
            }

            var service = new DialogflowService(new BaseClientService.Initializer
            {
                HttpClientInitializer = credential,
            });

            var request = service.Projects.Agent.Sessions.DetectIntent(new GoogleCloudDialogflowV2DetectIntentRequest
            {
                QueryInput = new GoogleCloudDialogflowV2QueryInput
                {
                    Text = new GoogleCloudDialogflowV2TextInput
                    {
                        Text = message,
                        LanguageCode = "ja",
                    },
                },
            }, $"projects/{PROJECT_ID}/agent/sessions/{sessionId}");

            return await request.ExecuteAsync();
        }
    }
}

```
コンソールアプリでやるならこんな感じ。

#所感とか
- GCP の API はライブラリ使う前提？
 - 生の REST API を触らせる想定じゃなさそう → C# は GCP 的にマイナー言語なので情報が少なくて悲しい
- Programatically 触る動機
 - Slack や Line などと連携する機能を Dialogflow 自体が持っているので自前で連携する必要は無い場合が多そう
 - とはいっても連携が実装されてないサービス(Microsoft Teams とか)もあるし、Bot を開発するとなると何かに依存せずに色んなチャットツールに乗せられる形で作りたい
 - → じゃあ自前で連携できるかどうか一応確認しとかなきゃ的な
Linux—ASCIIの並び順で遊んでみよう ( ls コマンドと一緒に )


## 参考

http://www.asciitable.com/

## スクリプトの例

色んな名前のファイルを作って `ls` の結果を見てみる。

```bash
mkdir -p ./names

touch './names/"'
touch './names/#'
touch './names/+'

touch './names/...'
touch './names/....'

touch './names/0'
touch './names/1'
touch './names/2'

touch './names/ALICE'
touch './names/bob'
touch './names/CAROL'
touch './names/david'
touch './names/Eric'
touch './names/fred'

cd ./names/
ls -la -1
cd ../

rm -rf ./names
```

## 出力例

カレントディレクトリ `.` や一個の上のディレクトリ `..` よりも、先に表示されているものがあることに気づく。

普段僕らが見ている点々たちは、別に何も特別扱いされてるわけじゃなくて、単に ASCII の並び順で先頭に表示されていただけなんだな。

```
"
#
+
.
..
...
....
0
1
2
ALICE
CAROL
Eric
bob
david
fred
```

## 環境

- GNU bash, version 4.4.23(1)-release (x86_64-apple-darwin17.5.0)
- Mac OS X High sierra

## 参考

- [Tell `ls` to sort by regular ASCII codes, not "intelligently" - Ask Ubuntu](https://askubuntu.com/questions/47702/tell-ls-to-sort-by-regular-ascii-codes-not-intelligently)


## Gist

- [Linux — Play with ASCII sort order by ls command](https://gist.github.com/YumaInaura/cc41ab02c75fa55a2cf9679df4f26523)








<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
【JavaScript】iCheckでチェックボックスとラジオボタンを装飾する【ライブラリ】

チェックボックスやラジオボタンをちょっとおしゃれにしてしまうJavaScriptのライブラリ「iCheck」の紹介です。
公式サイト:link: [http://icheck.fronteed.com](http://icheck.fronteed.com)

![03_100.png](https://qiita-image-store.s3.amazonaws.com/0/188980/e061712f-9f20-c396-7f53-1ae3e7f95c3d.png)

# ０．事前準備
以下のどちらかを満たしている必要があります。

- jQueryバージョン1.7以上がインストールされていること
- Zepto [polyfill, event, data]がインストールされていること。

# １．ダウンロード
[GitHub](https://github.com/fronteed/icheck/releases)から適当なバージョンのファイルをダウンロードします。
zipファイルなので、ダウンロードしたら解凍しておきましょう。

# ２．インストール
上記１．で解凍したフォルダの中身はこんな感じ:arrow_down:

```
demo
└（省略）
skins★
 └all.css
 └flat
　 └（省略）
 └futurico
　 └（省略）
 └line
　 └（省略）
└（省略）
icheck.js
icheck.min.js★
```
この中から、★のついたファイル・フォルダをiCheckを使いたい案件フォルダにコピーします。
そして、htmlの中でパスを指定して読み込ませます。

```HTML
<script src="./js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="./js/icheck.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="./css/skins/all.css">★全部入り
<link rel="stylesheet" href="./css/skins/minimal/pink.css">◆スタイル・色指定
```
skins配下にあるたくさんのファイルは、```all.css```がまとめて全部読み込んでくれます:books:
なので、全部使いたい場合は★の```all.css```１つでOK:ok_hand:
スタイルと色が決まっていれば、使いたいcssだけを◆のようにピンポイントで読み込みます。

基本、10色展開です。公式サイトからキャプチャ拝借！
![01_100.png](https://qiita-image-store.s3.amazonaws.com/0/188980/53485512-8c00-4a93-48bf-c1875ea709d7.png)
全体的に、パステルな色です。どれか１つくらいは、自分のサイトのイメージに近いものがありそうな感じかなぁ:thinking:

基本的な使い方は、どのスタイル・色であってもほぼ同じなので、今回は、minimalのpinkを使ってみようと思います。

# ３．ひとまず使ってみる
左側が通常のチェックボックスとラジオボタンです。
iCheckを使用すると、右側のようにおしゃれになりました！
![02_100.png](https://qiita-image-store.s3.amazonaws.com/0/188980/242538fa-1a29-5e10-77ad-4a65cd86d589.png)

ソースコードはこちら:arrow_down:

```HTML
<script>
  $(document).ready(function(){
    $('input.icheck').iCheck({  // inputタグのclass=icheckのものにだけ
      checkboxClass: 'icheckbox_minimal-pink',  // チェックボックスにminimalのpinkを適用する。
      radioClass: 'iradio_minimal-pink' // ラジオボタンにminimalのpinkを適用する。
    });
  });
</script>

<b>iCheck仕様のチェックボックス</b><br />
<input class="icheck" type="checkbox" checked />チェックあり<br />
<input class="icheck" type="checkbox" />チェックなし<br />
<br />
<input class="icheck" type="radio" checked />ラジオボタンON<br />
<input class="icheck" type="radio" />ラジオボタンOFF<br />
```

ざっくりいうと手順は２つ。
1. inputタグをHTMLに実装する。
2. ```$(document).ready(function()```でiCheckを起動させるJavaScriptを追加する。

# ４．起動時オプションについて
## ４－１．checkboxClassオプション
これ必須:exclamation:これがないと、チェックボックスにスタイルが適用されません。

```javascript
checkboxClass: 'icheckbox_minimal-pink'
```
書き方は```icheckbox_[スタイル]-[色]```です。
唯一、黒（black）の時だけ、色の指定は不要です。

## ４－２．radioClassオプション
これも必須:exclamation:ラジオボタンへのスタイル適用を行います。

```JavaScript
radioClass: 'iradio_minimal-pink'
```
書き方は```iradio_[スタイル]-[色]```です。
これも、唯一、黒（black）の時だけ、色の指定は不要です。

# ５．まとめ
JavaScript読み込んで（しかも数行）起動させるだけでOKなので、とってもお手軽です:mushroom:
今回は、「とりあえず使ってみただけ」ですが、ほかにもいろんなオプションや関数が用意されているので、詳細は[こちらのiCheck公式サイト](http://icheck.fronteed.com)をどうぞ。
最初にダウンロードしたzipの中にあるdemoディレクトリに```index.html```があるので、そっちを見てもいいかもです。
※2018/08/12現在、公式サイトになぜかアクセスできない私・・・。
1つのFirebase Projectで複数のアプリからのFacebookログインを可能にするためのあれこれ(iOS)

Firebase Authentication、とても便利で、その中にFacebookログインによる認証があります。

iOSではFacebookSDKを使うことで簡単に認証機能を実装することができます。
今回はそのFacebookログインで、1つのFirebase Projectに対し、複数のアプリからのFacebookログインを可能にするためのあれこれを書きます。

(facebookログイン自体の実装の説明はしません。詳しくは[「iOS で Facebook ログインを使用して認証する」](https://firebase.google.com/docs/auth/ios/facebook-login?hl=ja)を御覧ください）

# やりたいこと
1つのFirebase Project、1つのFacebook Appで、複数のアプリでのFacebookログインを正しく機能させる。


![](https://qiita-image-store.s3.amazonaws.com/0/27802/00e67888-8a6d-19c9-94bc-92736f8d5a84.png)



例えば、Komercoというサービスだと出品用のアプリと、購入用のアプリを分けていますが、Firebase自体は同じProjectを参照しているので、接続先は同じでないといけません。
また、例えば開発環境だと、手元のXcodeでビルドしたアプリ(Debug版)と、社内配布としてBeta版があったときに、Firebaseの向き先は同様に開発環境に向けておきたい、といったことがあります。
本来であれば、2つのアプリや環境毎にそれぞれFacebook Appを立てて、Facebookログインを入れたいのですが、、、次のような問題が発生します。

# Firebase Projectで登録できるFacebookAppは1つだけ
前提というか注意なのですが、FirebaseのProjectで登録できるFacebook Appは **1つだけ** です。

![](https://qiita-image-store.s3.amazonaws.com/0/27802/fe56ff43-1095-019e-35d0-9df625ed6f50.png)


1つのFirebase Projectに、A,Bの2つのアプリのFacebook Appを登録することができません。。。
なので、1つのFacebook Appを登録し、次の項目の通り設定することになります。

# Facebook Appには複数のbundle IDを登録できる
FacebookApp側では、複数のbundleIDを登録できるので、登録します。

![](https://qiita-image-store.s3.amazonaws.com/0/27802/ed86dbf2-3e5d-16ed-1cc6-04bee8c3264b.png)

その後、それぞれのAppで正しく動作するように、Info.plistに必要な情報を記入します。

# Facebookアプリを使って認証した後、正しい遷移元のアプリに戻りたい
これで、2つのアプリで無事、Facebookログインをして、Firebase Authenticationで処理してFirebaseの認証ユーザーになることができます。

**が、ここで1つ問題が出てきます。**

それは、**「URL Schemeが同一の場合、Facebookアプリで認証を終えてアプリに戻ってくるときに正しい遷移元に戻れないことがある」**です。
Facebook Appが同じということは、facebookIDや、urlSchemeが同一になるので、アプリのインストールの順番次第では、

- 「AのアプリでFacebookログインを実行し、Facebookアプリから戻ってくると、Bのアプリが起動してしまった」

なんてことが発生します。 **これは非常にまずい...。**
実際の運用では起こりづらいことですが、先に述べた、開発環境でDebug版とBeta版とアプリがある場合に、2つインストールされていると認証完了後にうまく戻れない、、といったことも発生する恐れがあります。

この問題を回避するためには、 `FacebookUrlSchemeSuffix` を活用する必要があります。

## `FacebookUrlSchemeSuffix`を使ってURL Schemeを分ける
`Info.plist`を開き、`FacebookUrlSchemeSuffix`の項目と、URL schemeを次のように設定します。

<img width="496" alt="" src="https://qiita-image-store.s3.amazonaws.com/0/27802/abc7d238-5a75-4785-4139-cd2faa8d823a.png">


URL Schemeは、通常`fb[Facebook App ID]`となっていますが、`FacebookUrlSchemeSuffix`を使う場合は、

`fb[Facebook App ID][FacebookUrlSchemeSuffix]`

となります。例を出すとこのようになります

Facebook App ID | FacebookUrlSchemeSuffix | URL Scheme
---|---|---
123456789 | myapp | fb123456789myapp

また、Facebook App側の設定項目に、「URLスキーム拡張子(オプション)」という項目があるのでここに、`FacebookUrlSchemeSuffix`と同じ値を追加します。

<img width="471" alt="" src="https://qiita-image-store.s3.amazonaws.com/0/27802/c392b247-15bd-4691-1109-0d2f7e2457ac.png">


これによって、正しく遷移元に戻ることが出来ます :tada: 
ちなみに、A，Bと別のアプリで例を出しましたが、開発版のアプリと、社内配布版のアプリで、FirebaseのProjectの向き先は同じ、という場合にも、この方法を用いることでFacebookログインを正しく動作させることができます。

# 懸念は残る
Facebook Appは2つのアプリで共通になってしまうので、Facebookでのアナリティクスが共通になってしまうなど若干の問題が残ります。
Firebase側が複数のFacebook Appを紐付けられるようになると良いのだけれど。。
git のクローンを最小量にする(サブモジュールを含めたshallow clone)

# git のクローンを最小量にする
## git clone (shallow、single-branch)

以下のコマンドで深さ1、特定ブランチのみでcloneする

```shell-session
$ git clone --depth 1 --single-branch -b <branch-name> <repo-uri>
```

## git submodule (shallow)

以下のコマンドで、サブモジュールを再帰で初期化しつつ更新、shallowで深さ1でcloneする

```shell-session
$ git submodule update --init --recursive --recommend-shallow --depth 1 
```

なにか副作用(サブモジュールでもunshallowが必要か?とか)については運用して確認中

---

追記
いまのところ問題はないが、unshallow手順などをまとめる

* [git で single\-branch を使用した後に別ブランチを fetch する方法 \- Qiita](https://qiita.com/kinpira/items/55a20ea5fb175e7529fa)
* [\[Git\] shallow cloneしたリポジトリを、あとで完全にfetchする \- Qiita](https://qiita.com/koara-local/items/3f0898d9fc1108c19bcd)
RStudioのODBC設定でハマった話

# はじめに
RStudio（on Mac）からRDBMSへ接続できるようにするODBCの設定でハマったので、備忘も兼ねて投稿します。

# 環境
macOS 10.13.6
RStudio 1.1.456

# 何が起きたのか？
RStudioからODBCドライバでRDBMSに接続する場合、ConnectionsタブのNew Connectionボタンから接続先を選択します。

![new-connection.png](https://qiita-image-store.s3.amazonaws.com/0/43330/9f6484e8-6a7d-716c-6606-f5ac89831405.png)

この時に画面に表示される接続先の一覧は、ODBCの設定ファイル「odbc.ini」「odbcinst.ini」に記述されている内容が表示されます。
ところが、上記設定をしたにもかかわらず、接続先の一覧に接続先が表示されないという事象に遭遇しました。

上記ファイルの設定方法は公式サイト「[Setting up ODBC Drivers](http://db.rstudio.com/best-practices/drivers/)」にて説明されていますが、「odbc.ini」に接続先情報、「odbcinst.ini」に接続先のドライバ情報を記述の上、/etc/配下に配置することで有効になり、RStudio上に表示されるはずでした。

# 設定に関する仕様について調
公式ドキュメントとにらめっこをした結果、odbc.ini、odbcinst.iniの設定が参照されていないような挙動であることから、ファイルの配置場所に誤りがあるのではと考えました。
公式ドキュメントには、ファイルの配置場所について次のように説明があります。

```
LOCATION
The DSN configuration files can be defined globally for all users 
of the system, often at /etc/odbc.ini or /opt/local/etc/odbc.ini. 
The file location depends on what option was used when compiling 
unixODBC; odbcinst -j can be used to find the exact location. 
Alternatively, the ODBCSYSINI environment variable can be used to
specify the location of the configuration files. 
Ex. ODBCSYSINI=~/ODBC

A local DSN file can also be used with the files ~/.odbc.ini and 
~/.odbcinst.ini.
```

つまり、ファイルの配置場所については下記のいずれかに該当していれば有効になるはずです。

1. /etc/配下
2. /opt/local/etc/配下
3. odbcinst -jコマンドで認識されている場所
4. 環境変数「ODBCSYSINI」に定めたフォルダ配下
5. ユーザフォルダ配下に、.odbc.ini、 .odbcinst.iniというファイル名で配置

# 調査したこと
現環境を理解するために、3.の「odbcinst -j」を実行し、認識されるファイルがどこに配置されているべきかを確認しました。実行結果は下記のとおりです。

```shell:odbcinstコマンドの実行結果
$ odbcinst -j
unixODBC 2.3.6
DRIVERS............: /etc/odbcinst.ini
SYSTEM DATA SOURCES: /etc/odbc.ini
FILE DATA SOURCES..: /etc/ODBCDataSources
USER DATA SOURCES..: /Users/XXXXX/.odbc.ini
SQLULEN Size.......: 8
SQLLEN Size........: 8
SQLSETPOSIROW Size.: 8
```
「DRIVERS」、「SYSTEM DATA SOURCES」の結果から、/etc/配下に設置すれば仕様1,3を満たしていることになり、認識されるはずです。
今回は、odbc.ini、 odbcinst.iniともに/etc/配下に作成したため、問題ない認識でした。

# 解決方法
試行錯誤の結果、「5. ユーザフォルダ配下に、.odbc.ini、 .odbcinst.iniというファイル名で配置」したことで、RStudioが設定を認識してくれました。
/etc/配下のファイルは認識されていないように見えるのですが、はっきりとした原因はわかっていません。
個人的な解釈では、「USER DATA SOURCES」がなければ、「SYSTEM DATA SOURCES」を参照する、と思いこんでいたのですが・・・違うのでしょうか？

# おわりに
少しモヤモヤが残る結果となりましたが、ひとまず無事に認識してくれてたので、一旦よしとしました。
原因について、ご存知の方がいましたらコメントいただけると幸いです。
Firefox の Headless モード (python3)

Firefox の Headless モードの使い方です。
次のページを参考にしました。
[Headless mode](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Headless_mode)

Arch Linux で確認しました。

>必要なソフトのインストール

>```bash
sudo pacman -S firefox
sudo pacman -S python-selenium
sudo pacman -S geckodriver
```

```py:headless_firefox.py
#! /usr/bin/python
# ------------------------------------------------------------------
#
#	headless_firefox.py
#
#						Nov/12/2018
# ------------------------------------------------------------------
import	sys
from selenium.webdriver import Firefox
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.firefox.options import Options
from selenium.webdriver.support import expected_conditions as expected
from selenium.webdriver.support.wait import WebDriverWait

## from selenium import webdriver
from selenium.webdriver.firefox.options import Options

sys.stderr.write("*** 開始 ***\n")
url_target = sys.argv[1]
sys.stderr.write("url_target = " + url_target + "\n")
#
options = Options()
options.add_argument('-headless')
driver = Firefox(executable_path='/usr/bin/geckodriver', options=options)
wait = WebDriverWait(driver, timeout=10)
driver.get(url_target)

driver.save_screenshot("out.png")
html = driver.page_source

driver.quit()

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

実行結果

```text
$ ./headless_firefox.py  https://ekzemplaro.org/storytelling/
*** 開始 ***
url_target = https://ekzemplaro.org/storytelling/
<html lang="ja"><head>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8">
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="storytelling.js"></script>
<link rel="stylesheet" href="storytelling.css">
<title>ストーリーテリング</title>
</head>
<body>
<h2>私のレパートリー</h2><p>
</p><blockquote>
<div class="contents"><table><tbody><tr><th>no</th><th>title</th><th>text</th><th>khm</th><th>pages</th><th>told</th></tr>
<tr><td>s001</td><td>ブレーメンの音楽隊</td><td>子どもに語る グリムの昔話 4</td><td>27</td><td>10</td><td>2018-5-31</td></tr>
<tr><td>s002</td><td>ラプンツェル</td><td>子どもに語る グリムの昔話 3</td><td>12</td><td>12</td><td>2016-9-14</td></tr>

略

</div>
</blockquote>
<hr>
<a href="html_src/">src</a><br>
<hr>
<a href="../">Return</a><p>
Aug/04/2018 AM 07:00</p><p>


</p></body></html>
*** 終了 ***
```

Javascript が実行されない時は、timeout=10　を timeout=20 にすれば実行されます。
Lua 基本まとめ

ちょっと某FtD周りで知りたくなったのでチートシート代わりにまとめを作っておく。
公式はここ https://www.lua.org/home.html

# 基本
* スクリプト言語。Lua VMで動作する。
* C/C++で書かれたホストプログラムへ組み込まれることが目的だったらしい。
 * 実際「本体はともかくスクリプトはLua」というのは割とよく見る。どれがと言われるとかえって困るぐらいよく見る。
* 移植性が高い。
* やたら速い。
 * JITコンパイラを使うとJavaに近い速度が出るとか（ホントかよ！）
* 動的型付け、プロトタイプ型オブジェクト指向。
* MITライセンス。
* ガベージコレクションあり。
* コルーチンあり。

# 型
使用する際、必要に応じて相互変換が行われる。

## 非値 (nil)
* いつもの。
* 宣言直後はこれ。

## boolean
* いつもの。

## number
* double相当らしい。
* **intはない**。あらゆる数値はnumber=doubleである。

## string
* 結合は .. 演算子。
* Cと同様の構造。ヌル文字はnilが代行している。

## function
* JavaScriptあたりと同様ポンポンできる。

## table
* 連想配列。nilでなければキーにも値にもできる。
* キーを整数にすると内部で配列扱いされて高速化する。
  * **配列のインデックスは1オリジンにするのがお約束**。めずらしー
* {} で作れる。 ```foo = {}``` と言った具合。
* インデックス・アクセスは [] 。いつもの。

他、C連携向けのuserdataやコルーチン用のthreadが存在。

# 文法周り
## コメント
ハイフン2連打で一行コメント。その後ろに角カッコ2連打で多行コメント。

```lua
-- 一行
--[[
多行
コメント
]]
```

多行コメントは --[[ でないと認識されないため、コメントアウトするときはこうすると切り離しが楽……らしい。~~シンタックスハイライトがないと事故りそうだ~~

```Lua
-- これを
--[[
hogehoge
--]]

-- こうする
---[[
hogehoge
--]]
```

## 変数
宣言無し、代入で生成するタイプ。
グローバルが基本であり、ローカル変数がほしいときは頭にlocalを付けて ```local var = 1``` とでもする必要がある。
また多重代入が可能なのも特徴。 ```foo, bar = 1, 2``` なんてのも可能な上、これを利用してスワップまでできる。

## 演算子
なお、各演算子に対応する処理は全て**メタメソッド**という形で定義されている。
各オブジェクトのメタメソッドをいじることで演算子オーバーライドが可能。

### 算術
お約束の加減乗除と剰余 +-*/% に加え累乗 ^ や切り捨て除算 // が用意されている。当然単項マイナス - もある。
+= や ++ は存在しない。

### 比較
==、<、<=、>、>=まではいつもの。not equalだけ~=と少々独特。
==、~=に限っては型変換は行われず、型が違えばその時点で判定が下る。要するに ```0~="0"``` はtrueである。

### 連結
先述の通り..で文字列を結合する。

### ビット演算
AND & 、OR | 、XOR ~ 、左右ビットシフト << >> 、単項NOT ~ が用意されている。

### 長さ演算子
単項演算子 # 。
文字列の長さはバイト単位であるため注意が必要。
またテーブルの長さはCの文字列表現よろしく「最初からnilまで」であるため、nilが途中に存在する場合そこで引っかかる。

## 制御文周り
お約束のif, for, whileが勢揃い。breakでループを抜けられるところまでお約束どおり。

```lua
if COND then
  -- true
else
  -- false
end

for i=1, 10 do
  -- action
end

for i in ary do
  -- action
end

while COND do
  -- action
end
```

## 関数
```lua
function hoge(hoge)
  -- action
end

f = function() ... end
local function f() ... end -- local f; f = function() ... end 相当
```
引数はもちろんローカル変数である。

また珍しいことに、Luaは複数の返り値をまとめて返すことができる。
```
function triple(s)
  return s, s, s
end

a, b, c = triple(10)
```
この「多値」は引数として渡すことができる。

また引数を配列として扱いたい場合、仮引数に ... を置いておけばよい。
逆に配列を実引数のリストとして扱うことも可能 (table.unpack) 。

更に、JSよろしく無名関数を返してクロージャをやったり、coroutineでコルーチンを組んだりできる。~~なんでもあるのか？~~

## ブロック
制御構文や関数のボディに加え、特有の**チャンク**というものが存在する。

### チャンク
チャンクは文の連続であり、改行によって切り離される。
(セミコロンを連打すると怒られるのはこの都合上空行を内包できないという事情もある)
チャンクは内部的に無名関数である。このためチャンクはローカル変数を持つことも可能。

### 明示的なブロック
do - endで明示的にブロックを構成することもできる。
また return や break はブロックの末尾以外に入れられない特性を持つため、これのために利用することもあるとか。

## エラー処理
**例外機構はない**。エラー処理はpcall関数で行う。
pcallはProtected Callの意であるらしい。第一引数に呼び出し対象関数、それ以降にその引数を受け取る。
呼び出し対象関数の処理が完了するとその戻り値に加えてbooleanを一つ返す。trueであればエラーはなかったということになるが、falseの場合は一緒にエラーメッセージが返ってくる。エラーメッセージには発生位置の情報が含まれる。

意図的にエラーを発生させたい場合はerror関数を呼べばよい。第一引数でエラーメッセージを指定できる。
また、第二引数でエラーの原因となった呼び出し階層を指定することもできる。1 (デフォルト) で原因行、2で呼び出し元、3で呼び出し元も呼び出し元、といった具合で、0を指定すると表示しなくなる。

---

疲れたので一旦ここまで。
とりあえず今後困ったら別の記事を追加することにしておく。
DjangoアプリをHerokuにデプロイする時のエラー対処 whitenoise編

Djangogirlsなどでは、HerokuでDjangoアプリケーションを動かすために必要なパッケージのひとつとして、whitenoiseをインストールするように書かれています。

また、Djangoプロジェクトのwsgi.pyの最終行に、以下の内容を追加するように記載されています。

```python:wsgi.py
from whitenoise.django import DjangoWhiteNoise


application = DjangoWhiteNoise(application)
```

ただし、2018年8月現在の最新バージョンであるwhitenoise 4.0をインストールした場合、wsgy.pyに上記のような編集を行うと、Djangoアプリケーションが以下のようなエラーで起動しなくなります。

```bash:
$ python manage.py runserver
(略)
    from whitenoise.django import DjangoWhiteNoise
  File "(略)/lib/python3.7/site-packages/whitenoise/django.py", line 2, in <module>
    '\n\n'
ImportError: 

Your WhiteNoise configuration is incompatible with WhiteNoise v4.0
This can be fixed by following the upgrade instructions at:
http://whitenoise.evans.io/en/stable/changelog.html#v4-0

(略)
django.core.exceptions.ImproperlyConfigured: WSGI application
 '(Djangoプロジェクト名).wsgi.application' could not be loaded; 
Error importing module.
```

whitenoiseのdjango.pyの中身を見てみると、whitenoise.djangoから何かをimportしようとしても、必ずエラーを上げる処理が記載されていました。

```whitenoise/django.py
raise ImportError(
        '\n\n'
        'Your WhiteNoise configuration is incompatible with WhiteNoise v4.0\n'
        'This can be fixed by following the upgrade instructions at:\n'
        'http://whitenoise.evans.io/en/stable/changelog.html#v4-0\n'
        '\n')
```

##対処方法

###その1 古いバージョンのwhitenoiseを使う

インストール済みのwhitenoise 4.0はアンインストールして、

```bash:
$ pip uninstall whitenoise
```

代わりに古いwhitenoiseをインストールします。
ここでは4.0より、1バージョン古い3.3.1にしています。

```bash:
$ pip install whitenoise == 3.3.1
```

###その2 wsgi.pyではなく、settings.pyを編集する

whitenoiseは4.0からDjangoでの取り扱い方が変わったようです。

wsgi.pyの最終行に追加した以下の記述は削除し、

```python:wsgi.py
from whitenoise.django import DjangoWhiteNoise # この行は削除する

application = DjangoWhiteNoise(application) # この行も削除する
```

settings.pyのMIDDELWAREに``'whitenoise.middleware.WhiteNoiseMiddleware'``を追加します。


```python:settings.py
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware', # この行を追加
    'django.contrib.sessions.middleware.SessionMiddleware',
# 以下略
]
```

なお、公式サイトを見ると、``'django.middleware.security.SecurityMiddleware'``より後ろ、その他のミドルウェアよりは前の位置に記述するように書かれているので、それに従っています。

http://whitenoise.evans.io/en/stable/django.html#django-middleware
GCPを始めるにあたっての落とし穴 

つい最近kaggleのためにGCPを使い始めたのですが、その導入で困ったりしたことを忘れないためにまとめることにしました。


###1.GPUはアップグレードしないと使えない
　GCPは登録すると300$のクーポンが貰えて無料で一年間使用することができます。このままサービスを使用した場合、お金を請求されることはありません。しかし制限はあります。GPUが使えないのです。
　GCPでGPUを使うためにはまず申請を行う必要があります。これを執筆した時点では「IAMと管理」の「割り当て」で申請を行わなければなりません。ただ無料アカウントのままですと、この申請を行うことが出来ないのでGPUを使うことは出来ないのです。インスタンスを作成する際にGPUの設定を行うことが出来ますが、設定してもインスタンスは作成されません。

###2.preemptiveは絶対使おう
　preemptiveを使うと料金を大幅に抑えることが出来るので、まずおすすめです。
　24時間という制限時間と、いつシャットダウンされるか分からない不安定な状態というデメリットがありますが、やはりお金は大事なので使うのがおすすめです。
　preemptiveの設定は、インスタンスを作成する際に行います。コマンドからなら「--preemptible」を付け足す、画面からなら管理の項目を開くとプリエンプティブのオンオフを決める部分があるのでそこをオンにします。

以上、GCPを使い始めて間もない私からの注意点です。
Dockerのお掃除

dockerのお勉強とか、実験とかしているとゴミが沢山できるのでお掃除の方法をメモしておきます。

# イメージの確認

```bash
docker image ls
# or 
docker images
```

# コンテナの確認

```bash
docker container ls
# or
docker ps

# 停止中も含めて確認
docker container ls -a
# or
docker ps -a
```

# コンテナ全停止

`docker container ls`の-aqオプションはコンテナIDのみを全て表示できる
とても便利なので覚えておくと良いかも

```bash
docker container stop $(docker container ls -aq)
# or
docker stop $(docker ps -aq)
```

# コンテナ全削除

```bash
docker container rm $(docker container ls -aq)
# or
docker rm $(docker ps -aq)
```

# イメージ全削除

```bash
docker image rm $(docker images -q)
# or
docker rmi $(docker images -q)
```

---

# 追記(運用管理向けコマンド)

全消しなら以下のコマンドでも実行できるらしいです。
＞ご教示いただき、ありがとうございます！

## 全削除

```bash
# 利用されていないコンテナ、イメージ、ボリューム、ネットワーク等を削除
docker system prune

# 警告が出る
WARNING! This will remove:
        - all stopped containers
        - all networks not used by at least one container
        - all images without at least one container associated to them
        - all build cache

# [y]で実行
Are you sure you want to continue? [y/N] y
```

## 利用されていないコンテナ削除

```bash
docker container prune
```

## 利用されていないイメージ削除

```bash
docker image prune
```

# Docker Composeのお掃除

## 管理下のコンテナ確認

```bash
docker-compose ps
```

## 管理下のコンテナ立ち上げ

Compose V2より、 `docker compose` コマンドが導入されたのでその方式で記載します。
※ `docker-compose` とほぼ同じ使用感です。

```bash
docker compose up
```

## 管理下のコンテナ停止

```bash
docker compose down

# Volume, Networkなどを同時に削除したい場合
docker compose down -v
```

## 個別にコンテナ開始・停止

```bash
# 対象のサービス名が[app]の場合
docker compose up app

# 停止
docker compose stop app
```
Markdown—コードブロックの中にコードブロックを書く (バッククォートのエスケープを諦めて)

## 方法1

- 「行頭スペース4個」スタイル のコードブロックを使う
- その中に「バッククォート記法」のコードブロックを書く

### 記入の例

![image](https://user-images.githubusercontent.com/13635059/44000402-31ccc054-9e5a-11e8-92e2-6d0a0f72a99b.png)

### 表示の例

    ```
    echo alice
    echo bob
    ```

## 方法2

- バッククォートの数を調整する
  - たとばバッククォート4個のブロックで、バッククォート3個のブロックを挟む
- Qiitaは対応していない様子

Github Gist で試してみる。

### 記入の例

![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/5c9ed8ad-3096-cb4a-e9ec-f4ed4ac258b4.png)

## 表示の例


![image.png](https://qiita-image-store.s3.amazonaws.com/0/89618/35b73751-97b9-9c44-e818-d8daa33c17f7.png)


## 関連

- [Markdownの真実—俺たちが慣れ親しんだ「バッククォートのコードブロック」は実は拡張記法だったんだぜ - Qiita](https://qiita.com/YumaInaura/items/d6655b868e6441ff3bc2)
- [Gist](https://gist.github.com/YumaInaura/85c2fb01fc5c2f04c8e38b411e785e3f)









<!-- Update From Qiita API -->

# チャットメンバー募集


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

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





# Twitter


https://twitter.com/YumaInaura


<!-- Update From Qiita API -->
Ubuntu (KDE)で日本語入力 [fcitx mozc]

## 環境
 - Ubuntu 18.04
 - Debian 9

(内容が不十分だったので2019-05-03に更新しました。)

# 対処

ibusが入っていたら削除

```terminal.sh
sudo apt purge ibus
```

fcitxとGTK,QT4,5の関連パッケージをインストール

```terminal.sh
sudo apt install fcitx fcitx-mozc fcitx-frontend-gtk2 fcitx-frontend-gtk3 fcitx-frontend-qt4 fcitx-frontend-qt5 fcitx-ui-classic kde-config-fcitx mozc-utils-gui
```

正常にインストールできたら、

```terminal.sh
# 環境変数に必要なものを追加(zshの人は.bash_profileを.zprofileに)
echo 'export XIM_PROGRAM=fcitx' >> ~/.bash_profile
echo 'export XIM=fcitx' >> ~/.bash_profile
echo 'export GTK_IM_MODULE=fcitx' >> ~/.bash_profile
echo 'export QT_IM_MODULE=fcitx' >> ~/.bash_profile
echo 'export XMODIFIERS="@im=fcitx"' >> ~/.bash_profile

source ~/.bash_profile # 環境変数読み込み
fcitx-autostart # fcitxデーモンを起動＆自動起動するようにしておく(ここで先の環境変数XMODIFIERSが必要)
im-config -n fcitx # IMEの入力をfcitxに設定
fcitx-configtool # mozcを追加
```
※fcitx-configtoolでは「Only Show current Language」のチェックを外す
ここまで終えたらログアウト→ログイン
有効になればCtrl+Spaceで言語切り替え可能

# 補足

 - うまく行かない場合は`ログアウト→ログイン`（再起動は不要）や`fcitx-diagnose`で検査して処置

 - GTKアプリ系もうまく行くはず
   - うまく行かない場合は環境先の環境変数に適切な値が設定されているか確認してください。
   - 例) `env|grep XIM`で`XIM_PROGRAM=fcitx`と`XIM=fcitx`の出力
Javaで拡張for文を使ってみた

Javaで繰り返し処理を実装するのに、拡張for文を使い慣れていなかったので、
今回簡単な使い方を復習することにしました。
内容的に初級プログラマーの方々に役立ててもらえたらというレベルです。

## 前提

拡張for文はJava SE 5.0以降の機能ですので、それ以前のJavaを使っている場合は不可なのでご注意。

## 基本的な使い方

#### 拡張for文が実現できること

- 配列やコレクションの要素を一つずつ順番に取り出して、その各々の要素に対して処理を実行することができる。
- 記述を簡略化することができる

まずは従来のfor文の使い方は以下の通り

```java:従来の記法
for(式1;式2;式3){

  処理;

}
```
そして、拡張for文が以下の通り

```java:拡張for文
for(変数宣言 : 参照変数名){ // 言い換えるとカッコ内は、(型　変数名 : 式)

  処理;

}
```

## 拡張for文を使い、配列の全要素に処理を行う

早速、処理を書いていく

```java:sample.java
public static void main (String args[]) {
		// てきとうに配列に要素を入れる
		List<String> list = new ArrayList<>();
		list.add("りんご");
		list.add("ごりら");
		list.add("らっぱ");
		list.add("ぱいなっぷる");
		list.add("るんば");

		// ここからが本番です

		// 変数名listの全要素を一つずつ取り出し、標準出力
		for(String word : list) { // for(型　変数名 : 式)
			System.out.println(word);
		}
		
	}
```
出力結果は以下の通り

```Java:結果
りんご
ごりら
らっぱ
ぱいなっぷる
るんば

```
#####その他

- 今回の例は簡単なものですが、使いこなせたら繰り返し処理の記述が楽そうですね!
WordPressをインストール(CentOS7)

# WordPress 構築手順
## WordPressに必要なパッケージをインストルする
* Apache, MySQL, PHP  

```terminal

# yum install httpd mysql-server php php-mysql wget

--HTTPポートを開放
# firewall-cmd --add-port=80/tcp --zone=public --permanent
# firewall-cmd --reload
# firewall-cmd --list-all --zone=public
# start httpd
# systemctl start httpd
# systemctl enable httpd

```

## mariadbインストール

```terminal
# yum install mariadb mariadb-server
# systemctl start mariadb
# systemctl enable mariadb
```
## データベースパスワード設定

```terminal
mysql -u root
MariaDB [(none)]> update mysql.user set password=password('rootパスワード入力') where user = 'root';
MariaDB [(none)]> flush privileges;
MariaDB [(none)]> exit;
```

## DB作成
```terminal
# mysql -u root -p
# Enter password:
MariaDB [(none)]> create database wordpress;
MariaDB [(none)]> show databases;
MariaDB [(none)]> exit;
```

## WordPressのインストール
```terminal
wget https://ja.wordpress.org/wordpress-4.9.8-ja.tar.gz
# mv wordpress-4.9.8-ja.tar.gz /var/www/html/
# cd /var/www/html/
# chown -R apache. wordpress
```
## apacheのルートディレクトリ設定
```terminal
# vi /etc/httpd/conf/httpd.conf
```
下記のように設定
```
DocumentRoot "/var/www/wordpress"
　　・
　　・
　　・
<Directory "/var/www/html/wordpress">
Options Indexes FollowSymLinks
AllowOverride All
Order allow,deny
Allow from all
```
## apacheリスタート

```terminal
# systemctl restart httpd
```
## wordpress設定

### ブラウザからアクセス
http://XXX.XX.XX.XXX/wordpress/wp-admin/

### 「さあ、始めよう」クリック
![wordpress-init-set1.png](https://qiita-image-store.s3.amazonaws.com/0/280405/27905448-ca0e-d8fb-3c3f-a8c20d0966cd.png)

### ＤＢユーザー名とパスワードを入力して「送信」ボタンをクリック
![wordpress-init-set2.png](https://qiita-image-store.s3.amazonaws.com/0/280405/44e2fb27-76f6-fc7a-f745-855325426d2a.png)



「インストール実行」をクリック
![wordpress-init-set3.png](https://qiita-image-store.s3.amazonaws.com/0/280405/90c681f5-fa0d-dd38-afc3-05fdd9b54d4d.png)
Azure Active Directory 入門まとめ

※この記事は2018年8月12日に書きました

#Azureをこれから学ぶ人向け
Azureや普段ADを触る機会が少ないけど仕事等でちょっと理解を進めたいって人向けの
記述メモです

#Azure Active Directoryについて
##基本的な機能
* Azure上でのディレクトリサービス機能
    * 組織のユーザ、デバイス、アプリケーションなどをAzure ADに登録して管理できる
    * Azure ADにサインインして他のリソースにシングルサインオンして操作負荷が軽減
    * 業務で利用するクラウドアプリ(office365/Facebook/Salesforce)へのアクセス制御も管理できる
* Microsoft Active Directory Domain Services (ADDC)とは全く違う
    * グループポリシーなんかでユーザやコンピュータへポリシーを配布するなどできない
    * 組織単位(OU)を作って組織管理などはできない
* あくまでInternetやWebを介するサービスに対する認証/認可のサービス=Azure ADである
    * 最近の働く環境やリソースがクラウドにあがっていくことでAzure ADは活躍の期待が大
   
#On-premiseのActive Diretoryと何が違うの?
##全く非なるもの
皆様がよく触っているMicrosoftの心臓部であるActive Directory Domain Service(AD DS)
とAzure Active Directoryは機能が違うものです（共通点もあります）
もしかすると今後は機能移行されるのかもしれませんが2018年時点では違うものとして取り扱われています

* 共通な機能ってなに? (AD DCとAAD)
    * 組織のユーザアカウントを管理できる機能
    * Windows10以降のデバイスの参加先（認証）になれる機能
    * PowerShellでAD DCもAADもリモートで管理できる機能

* 非共通な機能ってなに？
    * そもそもの利用するときの目的が違う
        * AD DCはオンプレのアカウントやリソースに対する認証基盤
        * AADはWebを介するクラウドサービスのアカウントやリソースの認証基盤
    * プロトコル
        * AD DCはKerberosプロトコルで認証と認可を行いLDAPでディレクトリアクセス
        * 参考 <https://wa3.i-3-i.info/word15909.html>
        * AADはインターネットで利用するのでSAMLやWS-Federation、OpenID Connect等で認証と認可し、Rest-baseのAzure AD Graph APIを使用する
        * 参考 <https://docs.microsoft.com/ja-jp/azure/active-directory/develop/active-directory-authentication-protocols>

    * ドメイン構成が違う
        * AD DCはDC(ドメコン)をWindows Serverの上にデプロイする
        * 1つの組織(OU)において1つのフォレストをその組織をイメージする名前で構成
        * フォレストを作ると1つのドメインが作られます、必要に応じてマルチにしたり信頼関係を作ったり
        * AADはクラウドなのでDCをデプロイしなくてよい
        * AzureやO365を契約するだけで利用可能になる
        * マルチテナントになっていて1つの組織が1つのテナントを利用する
    * デバイス管理方法が違う
        * AD DCはGPOでアプリ起動禁止やパスワード強制など管理ルールをつくる
        * AADはIntuneというものと連携させてIntuneに登録したデバイスに会社ルールを適用させる

今日はここまで、この記事は2018年8月12日に書きました
スクロールで画面外に出た RecyclerView のアイテムを取得してみた件

# 方法

[`RecyclerView.Adapter`](https://developer.android.com/reference/android/support/v7/widget/RecyclerView.Adapter) の [`onViewDetachedFromWindow `](https://developer.android.com/reference/android/support/v7/widget/RecyclerView.Adapter.html#onViewDetachedFromWindow(VH)) で検知できます。

# サンプル

``` SampleAdapter.kt
import android.content.Context
import android.databinding.DataBindingUtil
import android.support.v7.widget.RecyclerView
import android.util.Log
import android.view.LayoutInflater
import android.view.ViewGroup
import tokyo.tt.databinding.RecyclerItemSampleBinding

class SampleAdapter(
        context: Context,
        private val texts: List<String>) : RecyclerView.Adapter<RecyclerView.ViewHolder>() {

    companion object {
        val TAG: String = SampleAdapter::class.java.simpleName
    }

    private val layoutInflater = LayoutInflater.from(context)

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        when (holder) {
            is SampleViewHolder -> holder.bind(texts[position])
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        return SampleViewHolder(DataBindingUtil.inflate(layoutInflater, R.layout.recycler_item_sample, parent, false))
    }

    override fun getItemCount() = texts.size

    override fun onViewDetachedFromWindow(holder: RecyclerView.ViewHolder) {
        super.onViewDetachedFromWindow(holder)

        // 画面外に出たアイテムの位置も参照できます
        Log.d(TAG, "adapterPosition = ${holder.adapterPosition}")
    }

    inner class SampleViewHolder(private val binding: RecyclerItemSampleBinding) : RecyclerView.ViewHolder(binding.root) {
        fun bind(text: String) {
            binding.textView.text = text
        }
    }
}
```
ターミナルからカレントディレクトリのGitHubページを開く

[Mac — コンソールからGithubレポジトリをWebブラウザ開くコマンド例](https://qiita.com/YumaInaura/items/e8e586866f588af98c82)を参考に.
自分の環境だとsshでクローンしていたため動かなかったので改変させて頂きました.

# 前提
```shell
$ git remote -v

> origin git@github.com:hoge/fuga.git (fetch)
> origin git@github.com:hoge/fuga.git (push)
```

このようにGitHubが登録されている必要があります

# コマンド

```shell
$ open $(git remote -v | head -n 1 | awk '{ print $2 }'| awk -F'[:]' '{ print $2 }'| awk -F'.git' '{ print "https://github.com/" $1 }')
```

# 解説
## `git remote -v`
`.git/`に保存されているリモートリポジトリを表示します
結果

```
origin git@github.com:hoge/fuga.git (fetch)
origin git@github.com:hoge/fuga.git (fetch)
```

## `head -n 1`
`haed`コマンドで`remote -v`コマンドの結果の1行目を取得する

結果

```
origin git@github.com:hoge/fuga.git (fetch)
```

## `awk '{ print $2 }'`
`awk`コマンドでスペースで区切られている2つ目の部分を取得する
結果

```
git@github.com:hoge/fuga.git
```

## `awk -F'[:]' '{ print $2 }'`
`awk`コマンドで`:`を区切り文字にし、2つ目の部分を取得する
結果

```
hoge/fuga.git
```

## `awk -F'.git' '{ print "https://github.com/" $1 }'`
`awk`コマンドで`.git`を区切り文字にし、先頭を取得
その先頭に`https://github.com/`をつける

結果

```
https://github.com/hoge/fuga
```

## `open $()`
最後にそれらを`open`コマンドでひらく

これらをまとめて

```shell
$ open $(git remote -v | head -n 1 | awk '{ print $2 }'| awk -F'[:]' '{ print $2 }'| awk -F'.git' '{ print "https://github.com/" $1 }')
```

# 最後に
自分はこのようにaliasを作成しました.

```shell
alias gopen="open $(git remote -v | head -n 1 | awk '{ print $2 }'| awk -F'[:]' '{ print $2 }'| awk -F'.git' '{ print "https://github.com/" $1 }')"
```
PHPでWGETを実装する

こんにちは
私はバッチはPHPでアプリはPythonで実装しています。

今回は私がよく使う[ファイル名.php]で[ファイル名.json]としてワードプレスの更新記事を取得する方法を解説します。

まずフォルダが書き込み可能となっているかどうかを確認してください。
もし書き込み可能となっているか不安な場合は以下のコマンドを入力してファイル書き込み可能としてください

```terminal
$ sudo chmod -R 755 <使用するフォルダ名>

```

PHPでネットワークからファイルを取得するためにはCURLライブラリが必要です。
これは初めからPHPに入っているので気にしなくて大丈夫です。

それではスクリプトを見てみましょう。

今回は私が管理している
[https://根岸康雄.yokohama](https://xn--sjt69bu2p1r2c.yokohama/)  

からJSONのデータを取得します
以下が取得するためのスクリプトです（くれぐれもガンガンやらないように！XSERVERの通常のプランなので重くなってしまいます）

```wget.php

<?php
 # setup a global file pointer
$GlobalFileHandle = null;

function saveRemoteFile($url, $filename) {

  global $GlobalFileHandle;

  set_time_limit(0);

  # Open the file for writing...
  $GlobalFileHandle = fopen($filename, 'w+');

  $ch = curl_init();
  curl_setopt($ch, CURLOPT_URL, $url);
  curl_setopt($ch, CURLOPT_FILE, $GlobalFileHandle);
  curl_setopt($ch, CURLOPT_HEADER, 0);
  curl_setopt($ch, CURLOPT_USERAGENT, "MY+USER+AGENT"); //Make this valid if possible
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  curl_setopt($ch, CURLOPT_BINARYTRANSFER, true);
  curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); # optional
  curl_setopt($ch, CURLOPT_TIMEOUT, -1); # optional: -1 = unlimited, 3600 = 1 hour
  curl_setopt($ch, CURLOPT_VERBOSE, false); # Set to true to see all the innards

  # Only if you need to bypass SSL certificate validation
  curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
  curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

  # Assign a callback function to the CURL Write-Function
  curl_setopt($ch, CURLOPT_WRITEFUNCTION, 'curlWriteFile');

  # Exceute the download - note we DO NOT put the result into a variable!
  curl_exec($ch);

  # Close CURL
  curl_close($ch);

  # Close the file pointer
  fclose($GlobalFileHandle);
}

function curlWriteFile($cp, $data) {
  global $GlobalFileHandle;
  $len = fwrite($GlobalFileHandle, $data);
  return $len;
}
$url = 'https://xn--sjt69bu2p1r2c.yokohama//wp-json/wp/v2/posts?per_page=100';
$filename ='./'. explode('.',basename(__FILE__))[0].'.json';;
saveRemoteFile($url,$filename);

 ?>
```
そうすれば同じディレクトリに”wget.json”というファイルが作成されていると思います。
$urlの部分を変えたりユーザーに入力を要求するようにすればおもしろいと思います。

AjaxなどでCORSという問題があります。

[CORSとは](https://developer.mozilla.org/ja/docs/Web/HTTP/HTTP_access_control)  


要はリモートからのファイルをブラウザから直接取得できない、そこでこういったPHPのCURLのスクリプトを使用してあらかじめリモートのサーバーからダウンロードしておくと良いでしょう。


[私の個人ブログでも解説しているのでご覧ください！](http://shinnegishi1986.hatenablog.com/)