OmniAICreator/Qiita-1.07M huggingface dataset:
PythonでWeb framework を作ろう！ （２）

# テンプレートを読み込んで表示してみよう！
表示するページ毎にプログラムを書いて、その中にHTMLコードを書くのってあまりエレガントじゃない。
ということで、テンプレートを読み込み表示させるまで作って行きたいと思います。

## プロジェクトルートを取得せよ！
フレームワークを作る際に各機能毎にクラスファイルに分割していきたい。
その際に、クラスのオートロードを作成・動作させるにあたり設定ファイルである程度設定させます。
iniファイルに記述するという方法もあるんですが、作成したプロジェクトをデプロイ先で編集無しで動作させたいのでプロジェクトルートディレクトリを特定してこそれを基に設定フィアルの位置などを特定していきます。
で、まずプロジェクトルートディレクトリ特定の為の実装を記述します。

今回のディレクトリ構成は下記のようになっています。
＋PROJECR_ROOT
＋＋app
｜　＋app
｜　　＋templates（テンプレートファイル保管場所）
｜　　　＋index.tpl（テンプレートファイル）
＋＋public
｜　＋index.py（プログラム本体）
｜　＋uwsgi.ini
｜　＋uwsgi.pid
｜＋uwsgi.log
＋templates
　　＋index.tpl（テンプレートファイル）
下記のように記述するとpublicディレクリの一つ上のディレクリ、つまりプロジェクトルートディレクトリが取得できます。

```index.py（抜粋）
    project_root = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
    logger.info('project_root:' + project_root)
```
これで、目出度くプロジェクトのルートディレクリが取得できます。

## テンプレートファイルを読み込め！
プロジェクトルートディレクリが特定できたので、ここを起点として設定ファイルやテンプレートフィアルの配置場所を指定していきます。
ファイルのフルパスなどは後々、コントローラの名称など絡めて決定していきますが、とりあえずここではPROJEC_ROOT/app/templates/index.tplを読み込みます。
今回作成するFrameworkでは、読み込んだテンプレートを配列に保存しておいて一行づつ読み込み、解釈して表示させるのでプログラムソースの見通しをよくする為にもViewの作成メソッドと、ファイルの読み込みメソッドを分離、ファイル読み込みメソッドはファイルを読み込んでlist型としてView作成メソッドに結果を返却、View作成メソッドは配列文字列に連結してapplicationメソッドに返却、applicationからuwsgiにViewを返却するといった形をとります。
コードは下記の通りです。

```index.py
# index.py
# coding:utf-8
import logging
import datetime
import uuid
import os, sys

handler = logging.StreamHandler()
handler.setFormatter(logging.Formatter('%(asctime)s - %(name)s - %(levelname)s - %(message)s'))
logger = logging.getLogger()
logger.addHandler(handler)
logger.setLevel(logging.INFO)
project_root = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

def main():
    # log
    logger.info('test-log-dayo')

def application(env, start_response):
    main()
    logger.info('project_root:' + project_root)
    start_response('200 OK', [('Content-type', 'text/html')])
    str = createView('index.tpl')
    return [str.encode("utf-8")]

def createView(file_name):
    arr = readTemplate(project_root + '/app/templates/' + file_name)
    str = ""

    for line in arr:
        str = str + line

    return str

def readTemplate(file_name):
    f = open(file_name, 'r')
    arr = []
    for line in f:
        arr.append(line)
    
    f.close()
    return arr
```
これでブラウザに「はろーわーるど！！！！！」なりなんなり、テンプレートの中身が表示されたら成功です。
背景を透過して遷移元画面を見せる方法

# どーゆーヤツ？
こーゆーヤツです
<img width="200" alt="Image uploaded from iOS.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/57541/05c70ae0-4e90-01ce-bf4b-8801c883c664.jpeg">

# 環境
・Xcode -> 8.3.3
・Swift -> 3.1

# swiftファイル側
遷移元のクラスファイルに以下を記述

```ViewController.swift
// 遷移先のクラスを生成し、遷移処理を書く(modal処理です)
let hogeViewController = HogeViewController()
present(hogeViewController, animated: true, completion: nil)
```
以上

# Storyboard側
2箇所イジる

1.呼び出したい画面を選択し、UtilityAreaのAttributesInspectorを選んで
![hoge1.png](https://qiita-image-store.s3.amazonaws.com/0/57541/bb8d05f5-2a4b-de83-aa52-bc4d23dcdcea.png)
に変える

2.呼び出したい画面のViewを選択し、UtilityAreaのAttributesInspectorを選んで
![hoge2.png](https://qiita-image-store.s3.amazonaws.com/0/57541/c0dc0edc-6a7e-58df-cc74-6749dd21da7c.png)
に変える。ここは何してるかというと

![hoge3.png](https://qiita-image-store.s3.amazonaws.com/0/57541/47a9e261-1378-06d2-3e5b-181887f69a6b.png)
こうやって黒色に対し、透明度をいじってます。ここで透過してます。

# まとめ
この手の記事って昔っからありますが、複数人で作業することを考慮したり(Storyboardの競合)、Storyboardの扱いづらさだったり、そもそもStoryboardを毛嫌いしてたりでコーディングだけに絞ったものが多いですよね。
あえてStroyboardで書けるよってのを改めて書いておきたかった次第です。
(もちろん検索すれば同じ記事はQiitaでもあるかとは思いますが、個人的な備忘も兼ねて)

以上です。
GatsbyでMaterial Components for the web


起きたトラブル

* アイコンが表示されない
* CSSのカスタムプロパティの定義位置
* カスタムプロパティを無視したという警告が消せない

# アイコンが表示されない

Helmetを使って読み込んだ。

```gatsby-config.js
module.exports = {
  plugins: [
    'gatsby-plugin-react-helmet'
  ]
}
```

```
const () => {
  return 
    <Helmet>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    </Helmet>
}
```

# CSSのカスタムプロパティの定義位置

カスタムプロパティをどこで定義するのがいいか悩んだ。

結局cssをimportする場所は一箇所限定して、cssないでMaterial Componentsのcssを読むようにした。

例

```index.js
import 'index.css'

export default () => {
　　return <header className="mdc-toolbar">
      <div className="mdc-toolbar__row">
        <section className="mdc-toolbar__section mdc-toolbar__section--align-start">
          <a href="#" className="material-icons mdc-toolbar__icon--menu">menu</a>
          <span className="mdc-toolbar__title">{title}</span>
        </section>
      </div>
    </header>
}
```

```index.css
@import "@material/theme/dist/mdc.theme.css";
@import "@material/toolbar/dist/mdc.toolbar.css";

:root {
	--mdc-theme-primary: #D84315;
	--mdc-theme-accent: #C62828;
}
```

## 調査メモ

webpackの設定は下記あたりをみるとわかる。

https://github.com/gatsbyjs/gatsby/blob/dee98d569b2bbb23fb5174260ab1920fc27960bc/packages/gatsby/src/utils/webpack.config.js#L396-L448

css-nextがはいっているのでカスタムプロパティは使える。
http://cssnext.io/features/#custom-properties-var

### コンポーネントごとにCSSをimportさせる

各所のコンポーネントごとのファイルでCSSをよませるとその時点で変数が展開されて、後から挿入する手立てがなくなってしまうのでボツになった

gatsby-node.jsをつかってpostcss-custom-propertiesの設定をいろいろいじってみたけどどれも微妙だったのでやめました。

# カスタムプロパティを無視したという警告が消せない

material components側のCSSをいじらないとどうにもならないと判断した。

以下のようなものがでてしまう。
![localhost_8000.jpg](https://qiita-image-store.s3.amazonaws.com/0/5840/5bf33bc7-5c9d-fd7c-a9ba-7e300345906c.jpeg "localhost_8000.jpg")

作業の邪魔になる場合は以下で消去した。

```
html::before, html::after {
  display: none ;
}
```


# メモ

[react-material-components-web](https://github.com/react-mdc/react-material-components-web)を使ったほうが早いかもしれない。

# 参考文献
* https://github.com/postcss/postcss-custom-properties
pythonリストの複数要素削除

いい関数ないんですかね。
使い方：`dellist(リスト、削除したいインデックス)`


```py:
dellist = lambda items, indexes: [item for index, item in enumerate(items) if index not in indexes]
A=["a","b","c","d","e","f","g","h"]
r=[0,4,5]

dellist(A,r)
>>['b', 'c', 'd', 'g', 'h']
```
ロジアナの続き

[PICkit2のロジアナ](http://qiita.com/yamori813/items/f66d00f661857f71bff8)がうまくいったのに味をしめて、いろいろ探してみたところsigrokがサポートしているEZ-USB FX2なモジュールがAmazonの中国発送商品で安かったので、購入して[さるのこしかけ](http://hp.vector.co.jp/authors/VA009278/monkey/)にサポートを入れてみました。

![51UE7mRtONL._SY355_.jpg](https://qiita-image-store.s3.amazonaws.com/0/104066/7c03b849-c5d9-811a-bae3-ba949ab69ac8.jpeg)

同じような商品が昔Aitendoにもあったようなのですが、ずっと品切れのままです。

EZ-USB FX2はUSBから実行ファームウエアをダウンロードして機能します。sigrokではfx2lafwというファームウエアを作っていて、これを使わせてもらう事にします。

ダウンロードは以前作っておいた、EZloadを使います。

https://github.com/yamori813/Ezloader_OSX

```
% Ezload -v 0x04b4 -p 0x8613 -n -F -r -f fx2lafw-saleae-logic.fw
```

ダウンロードされるとfx2lafwというデバイスが現れます。

PB0からPB7までが入力になります。

fx2lafwはバージョンとリビジョンを拾うコントロール転送と、転送をスタートするコントロール転送があります。実際のデータはバルク転送で0x82のパイプから飛んできます。fx2laの1.2ではダウンロードした直後からBulk転送を受け取れるようです。データはバイト毎のビットフィールドで、PICkit2の処理と同じデータフォーマットでした。(PICkit2のRAWデータは4ビットなのですが、扱いにくいので8ビットに変換しています）スタートのコントロール転送は、実際はサンプリングの設定として機能しているようです。

このモジュールはサンプリングされたデータをBulk転送でおくってくるだけで、トリガーの処理はMac側でおこなう必要があります。

fx2lafwもオープンソースなので中身を確認できますしsdccでビルド出来るようです。

これをMac OS XのIOUSBで処理してみました。だいたいは[Appleのサンプルプログラム](http://qiita.com/yamori813/items/81228d9cd6702b5e9279)をベースにしました。Bulk転送はReadPipeAsyncを二つ呼んでいて、こうすると最高速で少し安定するような気がしたのですが、ひょっとすると勘違いかもしれません。

# 使い方

![スクリーンショット（2017-08-12 12.44.53）.png](https://qiita-image-store.s3.amazonaws.com/0/104066/4a29ab71-ddd2-bd5a-42ab-6b4dcf419970.png)

とりあえず簡単にチャンネルとトリガーのタイプをサポートしてみました。バッファは64Kのシングルです。ReadPipeAsyncは二つ上げていますが、使うのはトリガーで引っかかった片方のバッファのみです。

おおよそPICkit2の10倍くらいの分解能があります。ためしに115200ボーのシリアル通信をキャプチャしてみました。

![20170812-114744.jpg](https://qiita-image-store.s3.amazonaws.com/0/104066/20c0b674-53f7-c09f-702a-863c434ab333.jpeg)

上記は'a'(0x61;START[0]-10000110-END[1])の信号です。

sigrokを調べていて、ちょっとひらめいてDecoderも実装してみました。

![スクリーンショット（2017-08-13 14.15.31）.png](https://qiita-image-store.s3.amazonaws.com/0/104066/314a97f8-659b-62cb-8079-8d2c973e58e1.png)


![20170812-114744-d.jpg](https://qiita-image-store.s3.amazonaws.com/0/104066/f2ae8c87-78c7-3365-9d7a-70b5d9f21221.jpeg)

cocoaのpluginの仕組みを使っていて、とりあえずシリアルだけです。生データを渡すと解析結果をNSStringで返します。中身はカンマセパレートで開始ポイント、終了ポイント、文字列の3つのデータのくり返しです。

最高速なサンプリングはちょっと安定していないような感じがあるのでBulk転送で生データを送ってくる手法はこのくらいが限界かもしれません。これ以上はモジュール側のCPUやFPGAで処理して、処理したデータをホスト側で受け取るのが現実的なのかもしれません。
INTER-Mediatorをはじめよう - Webページを探索しよう

+ 作成日 2017/08/14
+ 8分
+ YouTube: https://youtu.be/EVKrv0lWx9c
+ Doc: http://qiita.com/motofumi/items/9a54d04fb6e9c9a9be14


# はじめに
INTER-Mediatorでは、学習用にINTER-Mediator搭載のバーチャルマシンが用意されています。INTER-Mediatorで構築されているWebページを見ながらバーチャルマシンの使い方を学習します。

# ゴール
Webページを探索します。さまざまな情報を確認したらバーチャルマシンを終了します。



# 前提条件
* [INTER-Mediatorをはじめよう - バーチャルマシンの準備](http://qiita.com/motofumi/items/ff94924a820e9c05b0c8)を理解していること。
* ターミナル.appでコマンドを入力したことがあること。


# 手順
<details>
<summary>Safari.appからVirtualマシンのWebページへアクセス
</summary>URLは、『 http://192.168.56.101/ 』です。これは、Virtualマシンがこの固定IPで構築されている為です。また、サーバのユーザ名やパスワードもこちらで確認できます。あくまでもテスト用の為、公開サーバとして使用しないでください。
</details>

<details>
<summary>サンプルプログラムを探索</summary>サンプルは、サンプルプログラムとユーザ管理ページの2つのリンクがあります。サンプルプログラムの中には、データベース別に仕組みのテーマに合わせてサンプルが用意してあります。VirtualマシンにはFileMaker Serverが含まれていないので、別途インストールが必要になります。
MariaDBを利用したsearchのサンプルをクリックします。こちらは、特別プログラミングすることなく、データベースの郵便番号を検索できるサンプルです。
</details>

<details>
<summary>トライアル用のページファイルと定義ファイルを探索</summary>INTER-Mediatorフレームワークは、データベースの情報を記述した定義ファイルとHTMLファイルを編集することで、データベースの内容を表示、編集できます。ここでは、簡単に定義ファイルとHTMLファイルを編集できるようにWebベースのエディタが用意してあります。
</details>

<details>
<summary>バーチャルマシンを探索</summary>サーバ構築情報を見ると、ログインアカウントやデータベースを運用しているユーザなどを確認できます。ここでは、Terminal.appを使って、MariaDBで運用されているデータを確認してみましょう。
</details>


# コマンド＆コード
ターミナル.appからVirtualマシンへアクセス
`$ ssh developer@192.168.56.101`

MariaDBのデータベースへアクセス
`$ mysql -u web test_db -p`

mysqlツールから一覧を取得
`> show databases;`
`> show tables from test_db;`
`> select * from postalcode;`







<!--
<details>
<summary>サマリーはこちら</summary>詳細はこちら
</details>
-->

# 参考
* Youtube [INTER-Mediatorをはじめよう - バーチャルマシンの準備](http://qiita.com/motofumi/private/ff94924a820e9c05b0c8) 
* Youtube [INTER-Mediatorをはじめよう - Webページを探索しよう](http://qiita.com/motofumi/private/ff94924a820e9c05b0c8) 
* Web [INTER-Mediator - バーチャルマシンの利用](http://inter-mediator.info/ja/for-novices/vm.html)

<!-- 管理用 -->
<!-- ムービースクリプト
+『自己紹介』
+「ムービーを見てる方は、あわせてドキュメントも開いてください」
+ はじめにを朗読
+ ゴールを朗読
+ 前提条件を解説
+ 手順に入ったら、マシンで操作しながら解説
-->
Reactアプリ開発ですぐ使えるJavaScript (ES6) の便利な記法6つ

Reactアプリを開発していて便利だと思ったJavaScriptの記法から、特に使い勝手の良いものを6つ紹介してみます。

特にjsxでは記述量の少なさやシンプルさが読みやすさに直結すると思うので、意味が問題なく伝わる範囲でこのようなshorthandをなるべく活用していければと思っています。

これらの書き方が必ずしもベストというわけではなく、好みや開発環境や状況によって他の書き方のほうが良いケースもあると思います。

# 1. 三項演算子でif文を減らす

ネストさせることも可能。

**before**

```js
render () {
  const {name} = this.props
  if (!name) {
    return (
      <Message value={'no name'} />
    )
  } else {
    return (
      <User name={name} />
    )
  }
}
```

**after**

```js
render () {
  const {name} = this.props
  return name ? <User name={name} /> : <Message value={'no name'} />
}
```

# 2. && と || でnullチェックを減らす

null(falsy)チェックや、nullだったときに設定するデフォルト値に使えます。

**before**

```js

const Name = (props) => {
  const {user} = props
  if (user) {
    return (
      <div>
        {user.name}
      </div>        
    )
  } else {
    return (
      <div>
        {'No User'}
      </div>        
    )
  }
}
```

**after**

```js
const Name = (props) => {
  const {user} = props
  return (
    <div>
     {user && user.name || 'No User'}
    </div>
  )
} 
```

# 3. map / filter / reduce を使ってfor文を減らす

for構文使う必要がほぼなくなりました。
map / filter / reduceの使い分けについては他の記事を参照してみてください。

https://hackernoon.com/understanding-map-filter-and-reduce-in-javascript-5df1c7eee464

**before**

```js
let jpUsers = []

for (let i = 0; i < users.length; i ++) {
  if (users[i].country === 'jp' ) {
    jpUsers.push(users[i])
  }
}
```

**after**

```js
const jpUsers = users.filter(user => user.country === 'jp')
```

# 4. アロー関数で'function'を減らす

コールバック関数などがすっきりします。
アロー関数とfunctionは厳密には[等価でない](http://analogic.jp/arrow-function/)ようなので、既存のコードを置き換える場合には注意が必要です。

**before**

```js
function getUserName (user) {
  return user.getName()
}
const userNames = users.map(getUserName)
```

**after**

```js
const userNames = users.map(user => user.getName())
```

# 5. Objectでproperty名を省略

Objectのproperty名のvalueに入れる変数名が一致する場合、以下のように書くことができます。

**before**

```js
const name = getName()
const age = getAge()
const userObj = {
  name: name,
  age: age,
  type: 1
}
```

**after**

```
const name = getName()
const age = getAge()
const userObj = {
  name,
  age,
  type: 1
}
```

# 6. Spread演算子でObjectを展開

functionの引数にも使えます。

```
render () {
  const defaultStyle = {
    fontSize: 10,
    fontWeight: 'bold',
    margin: 10
  }
  const blueStyle = {
    ...defaultStyle,
    color: 'blue'
  }
  const textProps = {
    value: 'foo',
    onTouch: this._onTouch,
    style: blueStyle
  }
  return <Text {...textProps} />
}
```
vaffle.vim 上でも簡単にカレントディレクトリを移動したい

# 動機

http://vim-jp.org/vim-users-jp/2009/09/08/Hack-69.html

上記URLに記載の方法で、vaffle.vim上でもカレントディレクトリを移動させたいなーと思いました。

# 経緯

vaffle上で上記スクリプトを実行すると、エラーになる。`%:p:h` のプレフィックスが`vaffle://`になっているのが原因のよう？

# 結果

ファイルタイプをチェックして、vaffleを認識して、vaffleの関数で'%:p'のプレフィックスを取り除いてもらって、lcdを実行すればイケました。

```vim
command! -nargs=? -complete=dir -bang CD call s:ChangeCurrentDir('<args>', '<bang>')
function! s:ChangeCurrentDir(directory, bang)
	if &filetype ==# 'vaffle'
		" ファイルタイプをチェックしてvaffleを認識。
		" プレフィックスをvaffleの関数で取り除いてもらってlcd実行
		execute 'lcd ' . vaffle#buffer#extract_path_from_bufname(expand('%:p'))
	else
		if a:directory == ''
			lcd %:p:h
		else
			execute 'lcd' . a:directory
		endif
	endif

	if a:bang == ''
		pwd
	endif
endfunction
```

# でも...

vaffle.vim には元々 `g:vaffle_auto_cd` なる便利設定があることを、このポストを書いている途中で気付きました。この設定は vaffle上でautocdを実現するもので、手動でcdしなくても、自動でやってくれるという優れもの。私のユースケースではこれで十分でした。チャン♪チャン♪
FuelPHPのvalidationについて

## 概要

FuelPHPのvalidationについて、忘れないようメモを残しておきます。

## 参考サイト
- [Validationクラス - FuelPHPドキュメント](http://fuelphp.jp/docs/1.8/classes/validation/validation.html)
- [FuelPHPを更に使ってみて使えるなと思った拡張ValidationRuleの書き方とCore拡張の小技](http://qiita.com/ya-sasaki/items/e238f86cabce3acfbe53)
- [日本語のエラーメッセージを設定する](http://raining.bear-life.com/fuelphp/%E6%97%A5%E6%9C%AC%E8%AA%9E%E3%81%AE%E3%82%A8%E3%83%A9%E3%83%BC%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B)
jQueryを使ってajaxでファイル送信

jQueryを使っている状態での方法で書いておくが、基本的に同様の考え方でファイル送信は実装できると思います。
今回は画像データを対象にしているが、基本的に他のファイルでも可能と思われます。

jQueryなら`on`メソッドでフォームが`submit`されたときのイベントを定義します。
ファイルは`var formData = new FormData($(this).get(0));`で`FormData`を生成して、ajaxでそのデータを送ります。

```html
<form action="/upload" method="post" enctype="multipart/form-data" id="imgForm">
  <fieldset>
    <input type="file" name="file" id="sendFile">
    <button type="submit">送信</button>
  </fieldset>
</form>
```

```js
  // 画像をアップロード
  $('#imgForm').on('submit', function(e) {
    e.preventDefault();
    var formData = new FormData($('#imgForm').get(0));
    $.ajax($(this).attr('action'), {
      type: 'post',
      processData: false,
      contentType: false,
      data: formData,
      success: console.log('send!'); // 送信に成功したとき
    }).done(function(response){
      console.log('succes!');  // レスポンスがあったとき
    }).fail(function() {
       console.log('error!'); // エラーが発生したとき
    });
    return false;
  });
```

僕が実装したときの都合上不要なタグ等も含まれていますがおそらく問題なく動くと思えます。

## 参考

https://teratail.com/questions/1607
http://qiita.com/sho012b/items/f2558db5dad97d7e1b1d
http://wp.tech-style.info/archives/619
CentOSで特定のVLAN IDの通信だけをopenvswitchへブリッジしたい

一台のLinuxホスト上で、VLAN単位で、openvswitchベースのVLANと、Linux標準のVLANの二つを使い分ける方法について記載します。
自分の勉強用環境のために作ったものです。

# 環境（使用したソフトウェア）
- CentOS: 7.3 
- openvswitch: 2.6.1

# やりたいこと
- 物理ポートが１つしかないサーバで、openswitchを使って、複数のVLANをKVMの通信に利用したい
    - VLANタグなしの通信　⇒ 仮想マシンホスト自体の管理接続用
    - VLANタグ（ID=100）の通信　⇒ NASとの接続用
    - VLANタグ（ID=1000, 1001）の通信　⇒ 仮想マシン（KVM Guest）が利用。ホストはその通信はスルーするだけ
        - 仮想マシンのネットワーク管理に、openvswitchを使用
- 管理接続用とNASとの接続用の通信については、openvswitchでは制御しない

イメージは、次のような感じです。
ホストのNICは「ens1」、openvswitchで作成する仮想スイッチは「ovsbr0」という名前にしています。
ovsbr0は、シンプルな仮想L2SWです。VMWare ESXi（無償版）でいうところの「仮想スイッチ」に該当するかと思います。

![20170812_01.png](https://qiita-image-store.s3.amazonaws.com/0/157891/32dc13a2-50d2-dc4f-7801-64f00ed6a8a4.png)


# メリット
openvswtichを使用したい通信とopenvswitchが動かない場合でも使いたい通信を分離したため、（セキュリティではなく、オペレーションの面で）安全性が高い。

# デメリット
openvswitchに通したいVLANを増やす度、eno1.Xというサブインタフェースを作らなければなりません。そのため、大量のVLANを使うような環境には向いていません。仮に物理インタフェース自体をopenvswitchに紐づけた場合、タグ付きVLANを一括でopenvswitchの仮想スイッチで捌くことが可能です。そのほうが便利で、また一般的かと思われます。

# 参考にしたサイト
- https://github.com/openvswitch/ovs/blob/master/rhel/README.RHEL.rst
- http://openvswitch.org/support/dist-docs/ovs-vsctl.8.html


# 設定
まずeno1（タグなし）インターフェスの設定。
openvswitchに接続せず、タグVLANも使用しない、標準的な設定です。

```/etc/sysconfig/network-scripts/ifcfg-eno1.
# cat /etc/sysconfig/network-scripts/ifcfg-eno1 
DEVICE=eno1
TYPE=Ethernet
BOOTPROTO=static
IPV6INIT=no
ONBOOT=yes
HWADDR=XX:XX:XX:XX:XX:XX
IPADDR=192.168.0.1
NETMASK=255.255.255.0
GATEWAY=192.168.0.xxx
IPV6INIT=no
```

つぎに、タグVLAN（VLANID=100）を受けるサブインタフェースの設定。
このインタフェースは、openvswitchには繋ぎません。

```/etc/sysconfig/network-scripts/ifcfg-eno1.100
# cat /etc/sysconfig/network-scripts/ifcfg-eno1.100
DEVICE=eno1.100
VLAN=yes
ONBOOT=yes
IPADDR=192.168.100.1
NETMASK=255.255.255.0
IPV6INIT=no
```

openvswitchについては、まず仮想スイッチ自体を作成します。

```/etc/sysconfig/network-scripts/ifcfg-ovsbr0.
# cat /etc/sysconfig/network-scripts/ifcfg-ovsbr0 
DEVICE=ovsbr0
NAME=ovsbr0
DEVICETYPE=ovs
TYPE=OVSBridge
BOOTPROTO=none
ONBOOT=yes
IPV6INIT=no
```
仮想スイッチに、接続するサブインタフェースを、VLANごとに作成します。
以下はVLANID=1000のサブインタフェースの例ですが、DEVICEで「インタフェース名.VLANID」を指定し、OVS_OPTIONSに、ポートのVLAN IDを指定する以外、他のVLANでも同様です。

```/etc/sysconfig/network-scripts/ifcfg-eno1.1000
# cat /etc/sysconfig/network-scripts/ifcfg-eno1.1000
DEVICE=eno1.1000
VLAN=yes
DEVICETYPE=ovs
TYPE=OVSPort
ONBOOT=yes
OVS_BRIDGE=ovsbr0
OVS_OPTIONS="tag=1000"
IPV6INIT=no
```

# ホスト内部とホスト外部のVLAN IDについて

<font color="Red">この部分の厳密な内容については未確認です。</font>

今回のような設定の場合、サブインタフェース「eno1.XXXX」は、openvswitchから見た場合、アクセスポート的な扱い（eno1と同じ）となっています。これは、VLANタグを外すのは、Linux kernelの（openvswitchではない）ネットワーク機能となるため、openvswitch(ovsbr0)へは、VLANタグのつかない形のパケットが転送されていると考えられます。

試しに設定ファイル内の「tag=1000」を「tag=10」に変更し、仮想マシンをopenvswitch内のvlan10に接続した場合も、外部のvlan1000と通信が出来ました。

今回の環境を構築する上では、VLANIDをホスト外とホスト内で異なるものにする必要はありませんが、この構成の仕組みとしては、VLANIDが内外で一致する必要はありません。

以上です。
002-Google スプレッドシートにある「左から２枚目の」シートURLがほしい

#結論
2つのMethodを組み合わせて取得します。


```js:sample-code1.gs

function getSheetcheck(){
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheets = ss.getSheets();
  var SheetURL = ss.getUrl() + "#gid="+ sheets[1].getSheetId();
  
  return SheetURL;
}
```

#やりたいこと
| シート番号 | シート名 ||
|--------:|:-----------:|:---|
|0|このシートについて||
|1|2017-08-31|<-ここのURLをGASで取りたい|
|2|2017-08-30||
|3|2017-08-29||
|4|2017-08-28||
|5|2017-08-27||
|6|2017-08-26||

#解説
「作業したいGoogleスプレッドシートファイルにある、特定のシートURLを取得したい」時、Class Sheetに適当なMethodないかなーと探してみたことありませんか？
「特定のスプレッドシートファイルへのURLを取得する」Methodはありますが、「スプレッドシートファイル『の、中にある特定のシート』へのURL」を一発で取得するMethodはありません。

そんな時は「スプレッドシートファイルのURL」と「扱いたいシートのID」を組み合わせて作ります。

必要な情報は
1. 扱いたいスプレッドシートファイルを特定する手段
2. 何番目のシートが必要なのか

の２つ。
１番目は、スプレッドシートファイルのメニューからスクリプトを作成した方[^1]は`SpreadsheetApp.getActiveSpreadsheet()`でクリアできます。
[Standalone Script](https://developers.google.com/apps-script/guides/standalone "Standalone Scripts | Apps Script | Google Develovers")で作成した場合は名前かIDを使いましょう。

２番目は、スプレッドシートファイル内のシート一覧を取得して、返された配列の「何番目を必要とするか」を明示します。

[^1]: [Container-bound Scripts](https://developers.google.com/apps-script/guides/bound  "Container-bound Scripts | Apps Script | Google Develovers") っていうらしいですね。


「getSheets()で取得した配列の中から（今回の場合は）sheets[1]に対してgetSheetId()をかけてあげれば良い」となります。

最後に１番と２番を「#gid=」で接続してあげればおしまいです。


#動作確認スクリプト

```js:sample-code2.gs

function getSheetcheck(){
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheets = ss.getSheets();
  for(var i = 0;i < st.length;i++){
    var SheetURL = ss.getUrl() + "#gid="+ sheets[i].getSheetId();    // <- 今回ほしい情報
    
    Logger.log("No %s 's Name is %s",i,sheets[i].getName());
    Logger.log("No %s 's SheetName is %s",i,sheets[i].getSheetName());  
    Logger.log("No %s 's ID is %s",i,sheets[i].getSheetId());  
    Logger.log("No %s 's URL is %s",i,SheetURL);  
  }
}
```

#つぶやき１

getNameとgetSheetNameって何が違うんだっけ・・・

#つぶやき２
今回のお題ドンピシャな[ブログエントリ](http://www.pre-practice.net/2016/06/url.html "シートのURLとシート名を取得する | Google Apps Script試行錯誤Blog")を発見いたしました。こちらの記事を貼ればよかったんじゃないかという噂ががが。

気にしたら負けなので今後もゆるゆる続けます。
別サイトの記事一覧をサムネイルつきで表示したい

「別サイトの記事一覧をサムネイルつきで表示したい！（サクッと）」

Wordpressのサイトなので`RSSAntenna`( http://residentbird.main.jp/bizplugin/plugins/rss-antenna/ )というプラグインを使うことに。


早速使ってみたらこんな感じのエラーが表示された。。

```
XML parsing error: <unknown>:627:88: not well-formed (invalid token)
```

フォーマットが正しくない？私には正しそうに見えるけど！
google先生に聞いたらFeedのデータをチェックするツールを教えてくれた。

http://validator.w3.org/feed/check.cgi

指摘された箇所をよく確認すると見えない何かが入ってる。。
(実際はチェックツールで指し示された場所とはちょっとずれた位置にエディタでは見えないコードが入っていた)

元記事を地道に修正すること20箇所くらい。全て修正。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/196640/aaba6c72-f99e-1107-b971-926ec9741e82.png)

サムネイル付リストが無事表示された！
![news_list.png](https://qiita-image-store.s3.amazonaws.com/0/196640/239dd251-0008-85d5-6eda-4ea19cc4f900.png)
rqt_graphでノードが表示されなくなった場合

##目的
ROSのrqt_graphで、ノードが表示されなくなった場合の対処。

##症状
rqt_graphをコンソールから立ち上げるとdot_parserが定義されていないとエラーがでる。
pythonをアップデートするなどで、依存関係が壊れたことが原因と思われる。

````
$ rqt_graph 
Couldn't import dot_parser, loading of dot files will not be possible.
PluginHandlerDirect._restore_settings() plugin "rqt_graph/RosGraph#0" raised an exception:
Traceback (most recent call last):
  File "/opt/ros/indigo/lib/python2.7/dist-packages/qt_gui/plugin_handler_direct.py", line 116, in _restore_settings
    self._plugin.restore_settings(plugin_settings_plugin, instance_settings_plugin)
  File "/opt/ros/indigo/lib/python2.7/dist-packages/rqt_graph/ros_graph.py", line 206, in restore_settings
    self._refresh_rosgraph()
  File "/opt/ros/indigo/lib/python2.7/dist-packages/rqt_graph/ros_graph.py", line 231, in _refresh_rosgraph
    self._update_graph_view(self._generate_dotcode())
  File "/opt/ros/indigo/lib/python2.7/dist-packages/rqt_graph/ros_graph.py", line 266, in _update_graph_view
    self._redraw_graph_view()
  File "/opt/ros/indigo/lib/python2.7/dist-packages/rqt_graph/ros_graph.py", line 299, in _redraw_graph_view
    same_label_siblings=True)
  File "/opt/ros/indigo/lib/python2.7/dist-packages/qt_dotgraph/dot_to_qt.py", line 234, in dotcode_to_qt_items
    graph = pydot.graph_from_dot_data(dotcode.encode("ascii", "ignore"))
  File "/usr/lib/python2.7/dist-packages/pydot.py", line 220, in graph_from_dot_data
    return dot_parser.parse_dot_data(data)
NameError: global name 'dot_parser' is not defined
````

##対処
pydotとpyparsingを再インストールする

````
sudo chmod 777 -R /usr/lib/python2.7/dist-packages/
pip uninstall pydot
pip uninstall pyparsing
pip install pydot
pip install pyparsing
````



##参考
ROS indigoでrqt関連のパッケージがなくなったり、いろいろ動作しなくなった件：かわうそまつり
http://kawauso-festival.blogspot.jp/2016/07/ros-indigorqt.html
・・・pyparsingのバージョンを変更しないと修復できない場合もある。

NameError: global name 'dot_parser' is not definedとpythonで出てきたときの対処法:qiita
http://qiita.com/v_and_p/items/e6f0243d7d3cba5b7a2f
[RaspberryPi]OSインストールから初期設定

#環境

- mac
- Raspberry Pi2 Model B 
- Raspbian JESSIE
- PLANEX 無線LAN子機 11n/g/b 150Mbps GW-USNANO2A

インストールするのはRASPBIAN JESSIE WITH DESKTOP
　
#目的

raspberry piのOSインストールから初期設定

#1.SDカードの準備

![スクリーンショット 2017-08-12 11.04.59.png](https://qiita-image-store.s3.amazonaws.com/0/106763/604b10b9-1ab9-6f70-4ac9-55945d267845.png)


アプリケーション>ユーティリティ>ディスクユーティリティから、SDカードをフォーマットします
消去をクリックして、フォーマットの種類を選んで、消去
- 32GB以下の場合、MS-DOS（FAT）
- ３２GBより大きい場合、exFAT

その後、マウント解除をクリック

#2.OSダウンロードと解凍
[公式サイト](https://www.raspberrypi.org/downloads/raspbian/)からOSのZIPファイルをダウンロード

ダウンロードしたzipファイルは、p7zipで解凍します

```lang:cmd
brew install p7zip
7z x 2017-07-05-raspbian-jessie.zip
```

#3.raspbianのイメージファイルをSDカードに書き込み

```lang:cmd
sudo dd bs=1m if=2016-03-18-raspbian-jessie.img of=/dev/rdisk2
```

「/dev/rdisk2」はディスクユーティリティの装置項目を参照して指定します
参考:[diskとrdisk](https://www.junk-works.science/disk-and-rdisk/)

#4.raspberry piにインストール
SDカードをraspberry piに挿して、モニターと接続して、起動します

#5.設定（デスクトップから）

RASPBIANのデスクトップを使って各種設定をしていきます
（日本語化するまで、メニューは英語表記なので、都度読み替えて）
必要に応じてraspberry piをリブートしながら設定

![2017-08-12-015053_1824x984_scrot.png](https://qiita-image-store.s3.amazonaws.com/0/106763/bcd18816-32f3-e475-fb9c-9ab3a8df2c91.png)

###5-1.wifi
右上のbluetoothアイコンと音量調整アイコンの間の、アイコンをクリックして設定します

###5-2.piユーザーのパスワード変更
左上のラズパイアイコンから、設定>Raspberry Piの設定>システムのパスワードから変更します

###5-3.SSHの許可
左上のラズパイアイコンから、設定>Raspberry Piの設定>インターフェースのsshを有効にします

###5-4.日本語化
左上のラズパイアイコンから、設定>Raspberry Piの設定>ローカライゼーションから設定します

#6.設定（コマンドラインから）
コマンドラインからwifi省電力対応、rootユーザーのパスワード変更、アプリの更新をしていきます

###6-1.wifi省電力対応
デフォルトで、wifiアダプタの省電力設定がONになっています
macなどからsshで接続した場合、一定時間操作しないと接続がきれてしまうので、省電力設定をOFFにします

```lang:cmd
sudo vi /etc/modprobe.d/8192cu.conf
```

ファイルには以下を記述します。

```lang:vi
# Power Save Mode OFF
options 8192cu rtw_power_mgnt=0
```

設定後、リブートします

```lang:cmd
sudo cat /sys/module/8192cu/parameters/rtw_power_mgnt
0
```
になっていれば設定OKです

参考：[無線LANアダブターの省電力OFF](http://qiita.com/yozawa/items/cbf46b7274c3e420135d)

###6-2.rootユーザーのパスワード変更

```lang:cmd
sudo passwd root
```

###6-3.アプリの更新

ファームウェアの更新

```lang:cmd
sudo rpi-update 
sudo reboot 
```

apt-getの更新

```lang:cmd
sudo apt-get update
sudo apt-get upgrade
sudo reboot
```
Intel Euclid のキャリブレーション方法

https://click.intel.com/media/productid2100_10052017/dynamic_calibration_guide.pdf

にある通り、Euclid内にあるアプリを起動して、キャリブレーションします。
コツとしては、カメラを動かす方法もいいですが、自分が被写体として動くのもアリだと思ってます。
ラズパイを買ったのでハッキングの練習をすることにした。ポートスキャン編

転職した記念にラズパイを買いました。記念と言いましたが、正確にいうと引っ越してネットワークがなくて暇だったからです。

![IMG_0192.JPG](https://qiita-image-store.s3.amazonaws.com/0/140543/e75c8235-23c0-ed79-7eec-5e556a12fb04.jpeg)

## RaspberryPi zero w

RaspberryPi zero wと言う機種です。秋葉の千石電商さんで、いろいろついたスターターキットが4000円代で売られていたので購入しました。本体は1000円以下で買えるそうです。

カチカチっと組み合わせるだけで完成します。プラモデルより簡単。

スクショ撮ってないけど、普通にlinuxの画面が表示されます。

## で、買ったけどどうする？

電子工作するのか？　いや、あんまり興味ない。ぶっちゃけ千石電商さんにいたのはラズパイを買うためです。一年後に常連になっている可能性がないとは言わないが今の所いいや。

ラズパイといえば、電子工作みたいな趣がある（Arduinoほどではない）が、他に何に使おう。

……そういえば、前に初心者向けのセキュリティ勉強会で、セキュリティの一番の練習法はラズパイか仮想OSを実際に攻撃してみることって聞いたな……

## これはもうハッキングするしかない

ラズパイはちゃんとlinuxベースのOSが載るので、linuxの一種としてハッキングできます。商用サーバーの多くはunixベースと言うかlinuxなので普通に勉強になります。

ちなみに買いてる人はガチ初心者なので、今回はポートスキャンしかやりません。わかりやすく言うとコマンドを1回実行するだけです。

### 注意

kali linux（ペネトレーションテスト用のlinuxディストロ）（ハッキング用じゃないよ）は準備できなかったのでとりあえずOSXから実行します。

__他人のコンピュータにハッキングを試みるのは犯罪なのでやめましょう__

ちなみに私はチキンなのでオフラインで試しています。間違ってオンラインで攻撃しないように気をつけましょう。

## とりあえずラズパイにサーバーをたててみます

```bash
python -m SimpleHTTPServer 8080
```

pythonならコマンド一つで簡易サーバーが立ちます。

ポート開放したら簡易サーバーの完成です。

## ……で、どうすれば良いの？

8080ポートに対して、接続を試みます。

```
telnet 102.168.100.100
GET / HTTP/1.1
host: 192.168.100.100


```

普通に接続できます。

でも、sshとかsloginとかは繋ぎ方がわからない。

ハッキングの基礎知識がないので何から始めて良いかわからない！
どうしたらいいんだと思ってgoogleで調べてみる。

## ハッキング手順その１ポートスキャン

まずは攻撃対象のコンピュータの開いているポートを調べるらしい。今回は8080が開いてるって知っているけど普通はそうじゃないので。

ちなみに今回の記事はポートスキャンで終わりです。ハッキングのやり方調べないと。

そのために使えるツールがnmapになります。macでインストールしたい人がどのくらいいるかわからないけど、インストール方法を書くと、普通にbrewです。

```bash
brew update
brew install nmap
```

nmapはいろいろと多機能ですが、今回の目的はポートスキャンなのでオプション無しで実行できます。

```bash
nmap 192.168.100.100
```

```
Starting Nmap 7.60 ( https://nmap.org ) at 2017-08-12 02:15 JST
Nmap scan report for 192.168.100.100
Host is up (0.011s latency).
Not shown: 989 closed ports
PORT     STATE SERVICE
80/tcp   open  http
81/tcp   open  hosts2-ns
82/tcp   open  xfer
83/tcp   open  mit-ml-dev
443/tcp  open  https
1080/tcp open  socks
3128/tcp open  squid-http
8000/tcp open  http-alt
8080/tcp open  http-proxy
8088/tcp open  radan-http
8888/tcp open  sun-answerbook

Nmap done: 1 IP address (1 host up) scanned in 16.62 seconds
```

はい。
そういうわけで、開いているポートがわかりました。

意外と多いんですね。

# まとめ

ラズパイは立ち上げただけでポートが10個くらい空いています。どのポートがなんの役割かはまだわかりません。

次回の記事では空いているポートの中身を調べていきます。
Jupyter | Matplotlib > 2次元データの可視化 > imshow() | scatter()

```txt:動作環境
GeForce GTX 1070 (8GB)
ASRock Z170M Pro4S [Intel Z170chipset]
Ubuntu 16.04 LTS desktop amd64
TensorFlow v1.1.0
cuDNN v5.1 for Linux
CUDA v8.0
Python 3.5.2
IPython 6.0.0 -- An enhanced Interactive Python.
gcc (Ubuntu 5.4.0-6ubuntu1~16.04.4) 5.4.0 20160609
GNU bash, version 4.3.48(1)-release (x86_64-pc-linux-gnu)
```

Matplotlibを使い、三次元のデータをスライスして二次元データとして表示したいことがある。

２つの方法がありそうだ。

- imshow()使用
- scatter()使用

### imshow()使用

[Jupyter / matplotlib > 2Dの数値を画像化](http://qiita.com/7of9/items/c91db1a7d193d4857c6b)

上記のリンクから描画部分だけ抜粋。2d.csvファイルが必要。

```py
import numpy as np
import matplotlib.pyplot as plt
import matplotlib.cm as cm

x,y,temp = np.loadtxt('2d.csv').T #Transposed for easier unpacking
nrows, ncols = 100, 100
grid = temp.reshape((nrows, ncols))

plt.imshow(grid, extent=(x.min(), x.max(), y.max(), y.min()),
           interpolation='nearest', cmap=cm.gist_rainbow)
plt.show()
```

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/7173d0dc-61e5-0be4-181b-97bde3119aa7.png)


### scatter()使用

```py:test_scatter_170812.ipynb
%matplotlib inline

import numpy as np
import matplotlib.pyplot as plt
import matplotlib.cm as cm


def get_value(ax, ay):
    return ax + ay

# 1. get data
NUM_DATA = 10000
x = np.random.rand(NUM_DATA)
y = np.random.rand(NUM_DATA)
color = get_value(x, y)

# 2. draw data
size = 25  # arbitrary
plt.scatter(x, y, size, color, cmap=cm.jet)
plt.colorbar()
```

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/fe027f97-7541-cde9-805d-2534227a6eb9.png)

### 備考

用途によって使いやすい方を使うのが良いだろう。

X座標の定義が反対なのか、左右反転している。
Heroku PostgresをRailsアプリで利用する手順

# もくじ
Heroku Postgres
- URL取得
- 補足：アドオン追加
Rails
- database.yml
- Gemfile
デプロイ
マイグレーション

# Heroku Postgres

## URL取得

`heroku config`コマンドで`DATABASE_URL`を確認する

```shell-session
$ heroku config
=== xxxxx-xxxxx-xxxxx Config Vars
DATABASE_URL:             postgres://<username>:<password>@<host>:<port>/<database>
```


## 補足：アドオン追加

`DATABASE_URL`が表示されない場合、アドオンの追加を行う。

参考：[Heroku Postgres \| Heroku Dev Center](https://devcenter.heroku.com/articles/heroku-postgresql#provisioning-the-add-on)

```shell-session
$ heroku config
=== xxxxx-xxxxx-xxxxx Config Vars

# => DATABASE_URLが表示されない場合は、以下のコマンドを実行してアドオンを追加

$ heroku addons:create heroku-postgresql:hobby-dev

Creating heroku-postgresql:hobby-dev on ⬢ xxxxx-xxxxx-xxxxx... free
Database has been created and is available
 ! This database is empty. If upgrading, you can transfer
 ! data from another database with pg:copy
Created postgresql-xxxxx-xxxxx as DATABASE_URL
Use heroku addons:docs heroku-postgresql to view documentation

$ heroku config
=== xxxxx-xxxxx-xxxxx Config Vars
DATABASE_URL:             postgres://<username>:<password>@<host>:<port>/<database>

# => アドオンが追加され、DATABASE_URLが表示されるようになる
```

# Rails

## database.yml

database.ymlで環境変数`DATABASE_URL`を参照するように設定する

参考：[Rails アプリケーションを設定する \| Rails ガイド](https://railsguides.jp/configuring.html#%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B)

```yaml:config/database.yml
production:
  url: <%= ENV['DATABASE_URL'] %>
```

## Gemfile

GemfileでProduction環境で`pg`を利用するように設定する

```ruby:Gemfile
# Use sqlite3 as the database for Active Record
gem 'sqlite3', group: [:development, :test]
gem 'pg', group: :production
```

# デプロイ

Herokuにアプリをデプロイする。

参考：[HerokuにRailsアプリをデプロイする手順 \- Qiita](http://qiita.com/NaokiIshimura/items/eee473675d624a17310f)

# マイグレーション

デプロイしたアプリでマイグレーションを実施する。

```shell-session
# DBのマイグレーション
$ heroku run rake db:migrate

# dynoの再起動
$ heroku ps:restart

# アプリを開く
$ heroku open
```
python初心者がDjangoのadminにbasic authをつけてみる

# 目的
Djangoのadminページのログイン画面の前にbasic認証をかけたかった。でも他のページにはかけたくなかった。
Djangoはもちろんpythonも詳しくわかってないけどとりあえずできたっぽいから晒してみる。
最適解とは思ってないので、もっといい方法があったら教えてください。

python: 3.5.2
Django==1.11.4


丸2日間くらいすげー試行錯誤した結果できたものは超シンプルというなんとも言えないこの感じ。

```py3:yourproject/my_admin_site.py
from django.http import HttpResponse
from django.views.decorators.cache import never_cache
from django.contrib.admin.sites import site, AdminSite
import base64

class MyAdminSite(AdminSite):

    def __init__(self, name='admin'):
        super().__init__()

    def get_urls(self):
        self._registry = site._registry
        return super().get_urls()

    @never_cache
    def login(self, request, extra_context=None):
        if not self._basicAuth(request):
            return self._http401()
        return super().login(request, extra_context)

    def _basicAuth(self, request):
        if 'HTTP_AUTHORIZATION' not in request.META:
            return False
        (authscheme, base64_idpass) = request.META['HTTP_AUTHORIZATION'].split(' ', 1)
        if authscheme.lower() != 'basic':
            return _http401()
        idpass = base64.decodestring(base64_idpass.strip().encode('ascii')).decode('ascii')
        (id_, password) = idpass.split(':', 1)
        if id_ == "foo" and password == "bar":
            return True
        else:
            return False

    def _http401(self):
        response = HttpResponse("Unauthorized", status=401)
        response['WWW-Authenticate'] = 'Basic realm="basic auth test"'

        return response


my_site = MyAdminSite()

```

```py3:yourproject/urls.py
from django.conf.urls import url, include
from yourproject import my_admin_site

urlpatterns = [
    #url(r'^admin/', admin.site.urls),
    url(r'^admin/', my_admin_site.my_site.urls)
]

```
こんな感じです。
![スクリーンショット.png](https://qiita-image-store.s3.amazonaws.com/0/102613/39adf6ab-0acf-a4d0-436c-bec8cae35c97.png)


```py3:yourproject/my_admin_site.py
    def get_urls(self):
        self._registry = site._registry
        return super().get_urls()
```

この部分がなくてもbasic認証はできるのですが、これがないとadminに入った時なんの操作もできないという悲しい画面が現れます。
操作できるモデルの一覧はdjango.contrib.admin.sites.siteの_registerに外部から登録されていくので、モデルを継承しただけだとその情報までは引っ張ってくることができないっぽい？
ので、自前のクラスのself.\_registerにdjango.contrib.admin.sites.site.\_registerをコピーすることで解決。する気がする。
暗黙のprivateメソッドにアクセスするという嫌な感じですがこれでうまくいきました。多分。今の所不都合はありません。

python, publicとprivateの明確な違いがないのがいいところでもあり悪いところでもある気がします。



参考 https://bitstar.jp/blog/basic%E8%AA%8D%E8%A8%BC
gitのブランチ名補完を試した際の備忘録

#環境
git version 2.4.0



#はじめに
gitのブランチ名補完を試してみて詰まったところの備忘録です。

「git chechkout ~~」や「git log ~~」など様々な場面でブランチ名を指定する際に、いちいち「git branch」を行ってからコピペという流れが無くなるので作業が早くなるはず？（まだ検証中）



#先にまとめ
###導入方法
http://qiita.com/snaka/items/4b0437a32da832d2e0db
すごく簡単！のはずなのですが...



#解説

###「FETCH_HEAD」「HEAD」「ORIG_HEAD」しか表示されない問題
参考URLに沿って作業を行ったのですが補完時に上記3つしか表示されませんでした。

▽Qiita - GitのHEAD, ORIG_HEAD, FETCH_HEAD, MERGE_HEADとは？
http://qiita.com/t-mochizuki/items/347cba461fd570bca03c
ハッシュ値の別名が表示されているだけで、ブランチ名を全く補完できていませんでした。

▽mawatari.jp - Gitコマンドをタブキーで補完できるようにする
http://mawatari.jp/archives/git-completion-bash
この記事を読んでfindを実行してみると...

```
# 検索してみる
find / -name git-completion.bash

# 既存のものがいくつか出てくる
/Applications/SourceTree.app/Contents/Resources/git_local/contrib/completion/git-completion.bash
/Applications/Xcode.app/Contents/Developer/usr/share/git-core/git-completion.bash
```
SourceTreeに入っていたgit-completion.bashを複製して使用してみることに。

```
cp /Applications/SourceTree.app/Contents/Resources/git_local/contrib/completion/git-completion.bash ~/.git-completion.bash
source ~/.git-completion.bash
```
補完できるようになりました！

###aliasに登録しているコマンドが反応しない問題
通常のgitコマンドは補完できるようになったのですが、「gch」「gl」などaliasに登録しているコマンドが反応しませんでした。

▽basyura's blog - bash で git のブランチ名補完
http://blog.basyura.org/entry/2016/04/29/213610
aliasが対応できるように追記してあげれば良いとのこと。

```
# git-completion.bash最下部
# ここに
__git_complete git __git_main
__git_complete gitk __gitk_main

# こう追記した
__git_complete git __git_main
__git_complete gitk __gitk_main
__git_complete gch _git_checkout
__git_complete gd _git_diff
__git_complete gl _git_log
__git_complete gt _git_log
__git_complete gt2 _git_log
```
これでaliasコマンドも補完できるようになしました！

###そもそもだけど.bashrcって何？
▽Qiita - .bash_profile ? .bashrc ? いろいろあるけどこいつらなにもの？
http://qiita.com/hirokishirai/items/5a529c8395c4b336bf31
>~/.bash_profile：ログイン時に一度設定すればいいもの
~/.bashrc：bashを起動するたびに設定する必要のあるもの



#さいごに
同僚が補完していて、便利そうだったので試してみました。
知らないけど便利な機能いっぱいあるんだろうなぁ。
CUDA入れたら、デスクトップログインできなくなった時(CentOs7)

いろいろ試行錯誤しながらだったので、何が正しいかイマイチわからないですが、メモに。

1. DeviceをIntelのCPU付属のGPUに戻す。
普通に作り直すと、勝手にIntelのグラボ使う設定になります。
xorg.confの作り直し方: http://morrey22.hatenablog.com/entry/2013/04/14/212837

2. デスクトップをKDEに変更する。
https://www.server-world.info/query?os=CentOS_7&p=x&f=2
3. デスクトップログインをlightdmに変更する
ディスプレイマネージャー(DM)について
https://eng-entrance.com/linux-displaymanager
lightdmのインストール
`yum -y install lightdm`

でも、結局gnomeでの起動方法はわからずじまい。

参考
- 各デュストリビューションが対応しているDM https://shikakuzine.jp/article/detail/37
- cudaに合わせたトラブルシューティング https://wiki.archlinuxjp.org/index.php/NVIDIA/トラブルシューティング#Intel_iGPU_.E3.81.A7_.22no_screens_found.22_.E3.81.AB.E3.82.88.E3.81.A3.E3.81.A6_X_.E3.81.8C.E8.B5.B7.E5.8B.95.E3.81.97.E3.81.AA.E3.81.84
- xorg.confの作り直し方: http://morrey22.hatenablog.com/entry/2013/04/14/212837
- nvidiaのドライバーだとgnomeには役不足らしい件：　https://github.com/TigerVNC/tigervnc/issues/39
- 普通にcuda入れる時: http://kanji.hatenablog.jp/entry/CentOS7%28GTX1080%29%E3%81%AB%E3%83%87%E3%82%A3%E3%82%B9%E3%83%97%E3%83%AC%E3%82%A4%E3%83%89%E3%83%A9%E3%82%A4%E3%83%90%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%A8CUDA%E3%82%92%E3%82%A4
- 公式のcudaの入れ方：　http://developer2.download.nvidia.com/compute/cuda/8.0/secure/Prod2/docs/sidebar/CUDA_Quick_Start_Guide.pdf?zsqnpiwYEkyxMeuJ13UwJmLuTiIMwFu2s8Vs45tGo8ZruBYFWOCEe0k4oDNPDGlz9w-Aku1Qc3p7IUTMgnhE7HKPzeCCG7unjk2838zqziVS0f4S-cIQ8ZDmDPezQZ4tiMnq6mTmkz7it1U6_xpW-7k8Pv6VWofbbcfNFMB9wf5gEQHM
- 公式のドライバーの入れ方；　http://docs.nvidia.com/cuda/cuda-installation-guide-linux/
- シングルユーザーモード： http://www.itzgeek.com/how-tos/linux/centos-how-tos/single-user-mode-in-centos-7-rhel-7.html
EdgeRouter X の設定をgitで管理する

# 背景
せっかく、設定がテキストファイルで出力できるなら、gitで管理して自由自在にバージョンを行き来したい！
ということで、EdgeOSにgitを入れてGitHubのプライベートリポジトリにpushする設定を行った。

# EdgeOSにDebianリポジトリを入れる
EdgeOSにはGitが入っておらず、公式リポジトリにもないため、単純にapt-getしても入らない。
そのため、[ここ](https://help.ubnt.com/hc/en-us/articles/205202560-EdgeRouter-Add-other-Debian-packages-to-EdgeOS)を参考にDebianのリポジトリを追加する。
ここで注意しないといけないのは、Debianリポジトリを追加した状態で"upgrade"すると、EdgeOSまでDebianでアップグレードされてしまい上書きされてしまいます。

# Gitを入れる

```
sudo apt-get install git-core
```

# GitHubの準備
GitHubでリポジトリを作成しておき、クローンする。
今回はプライベートリポジトリの節約のため、ルータの設定のみを置くrouterブランチを作成して、それをクローンした。

```
git clone -b router git@github.com:[repositories].git
```

# Commitする
方針は単純で、設定ファイルをクローンしたリポジトリにコピーしてきてCommitする。

```
cd ~/git
cp /config/config.boot router.config
git add router.config
git commit -m "Commit"
git push
```

[参考にさせていただいたページ](http://komeiy.hatenablog.com/entry/2014/12/05/200946)では、Commitメッセージに日時を入れて自動実行を想定しているが、ここでは任意のタイミングで任意のコメントをつけてCommitしてpushするスクリプトgit.shを設定した。

```bash
#!/bin/vbash
source /opt/vyatta/etc/functions/script-template

#check argument
if [ $# -ne 1 ]; then
  echo "Error: Invalid argument passed."
  exit 1
fi

cd ~/git
cp /config/config.boot router.config
git add router.config
git commit -m "$1"
git push
```

```
# chmod +x git.sh
# ./git.sh "test commit"
```
ちょっとずつ読むドメイン駆動設計 MartinFowlerによる序文2

# モデルと実装

> 概念を実装から切り離してはならない
> (序文 より)

かつて、オブジェクト指向の説明と言えば、車クラスがあって、車クラスがタイヤクラスやハンドルクラスを持って・・・なんて説明がよくされていたものだ。

その説明の仕方は間違いだという声をよく聞くが、自分はあながち間違っているわけではないと思った。

> 過去のオブジェクト指向方法論が目指して挫折していた現実世界をモデル化してソフトウェア世界をスムーズに繋ぐという夢は、DDDにおいてはドメインを記述する単位をオブジェクトからより自然な「ユビキタス言語」というDSLの次元に持ち上げることで、より的確に表現されている。
> (羽生田さんによる日本語版推薦文　より)

ユビキタス言語によって、ドメインエキスパートと技術者と実装がシームレスにつながってはじめて、複雑さをコントロールすることが可能になっていくということ。

かつての車クラスも、車カタログなどのアプリケーションの実装まで説明すればわかりやすかったのかなと思ったりする。

概念は実装から切り離さずに考えて『役に立つ』モデルを。
linux mint(xfce)でデスクトップを表示するショートカットをWin+Dに変更しても動作しない場合

以下2点を解消すれば動くようになりました。
・xfce4-keyboard-shortcuts.xmlのshow_desktop_keyエントリが二個登録されている
・winキーのショートカットにxfce4-popup-whiskermenuが設定されている

まず、こちらのファイルにshow_desktop_keyに関するエントリが2件あります。
このなかからSuper+D以外のshow_desktop_keyのエントリを削除します。

```
~.config/xfce4/xfconf/xfce-perchannel-xml/xfce4-keyboard-shortcuts.xml
```

次に、キーボード設定の「アプリケーションショートカットキー」のなかにsuperキーに割り当てられているものがあるので、それを他のショートカットに割り当てます。

これでwin+dでのデスクトップ表示が動くようになりました。
Android用ノートアプリ neutriNoteの紹介

# まえがき
資格取得のため久々に勉強するハメになりました。暗記することが多く、数式や化学式も結構でてきます。昔なら単語カードとか使ったものですが、今はスマートフォンというもっと適したデバイスが常時手元にあります。それでAndroid用の単語カード(英語ではflashcardと呼ぶようです)アプリを探したんですが、LaTexと日本語を両立するアプリがなかなか見つからず、しょうがないのでHTMLエディターとMathjaxを使ってカードを作成してました。そんな折、**neutriNote**というアプリを見つけ、結構便利だったので乗り換えることにしました。海外ではなかなか高評価のアプリなんですが、日本語情報がほとんど無いようなので、自分が使って「便利だなあ」と思ったことなどを書いていきます。

# 環境
* Galaxy Edge S7(Android 7.0)
* neutriNote v2.3.5

# インストール
[Google Play](https://play.google.com/store/apps/details?id=com.appmindlab.nano)からダウンロードできます。無料です。広告はありません。素晴らしい!

# 使ってみて便利だったこと
## マークダウン
### 移行
それまでHTML+Mathjaxで記述した文書はソースをちょこっと修正するだけでOKでした(HTMLは修正不要。Mathjaxの`\[`や`\(`、`_`などのエスケープのみ)
### qiita
PHP Markdown Extraをサポートするそうです。自分はPHPすら知らないので、ましてやExtraな何かなど知る由もありませんが、マニュアルの例を見るとqiitaのマークダウンにそっくりだったので試しに色々なqiita投稿のソースを貼り付けるとちゃんと表示してくれます。これは便利で、タメになる投稿から色々拝借して自分用の学習ノートを作成させていただきました。ちなみに自分のqiitaへの投稿はAndroid上のneutriNoteで作成してたりします。

## テキスト展開
省略入力機能です。当初はマニュアルちゃんと読まずにHTMLで記述してましたので、この機能は重宝しました。どんなものかというと、
```
table|<table align=""></table>
tr|<tr></tr>
th|<th></th>
td|<td align=""></td>
href|<a href=""></a>
```
のように登録しておけば`table`と入力してアイコンタップで`<table align=""></table>`に展開されます。

## 数式
LaTex使えます。

## その他
自分は使ってないですが、グラフやらUMLやら色々できるみたいです。マニュアル見てください。

# マニュアル
というわけでマニュアルです。他にも色々書こうと思ってたんですが、マニュアル訳してたら力尽きたみたいです(マニュアルの翻訳·公開は開発者さんの了承を得ています、念のため)。

本家マニュアルは[こちら](https://appml.github.io/nano/)
v2.3.6のマニュアル訳は[こちら](https://github.com/ayatakesi/neutriNote/blob/master/index.md)
java.io.Fileのexists()とカレントパス

FileWriterのデフォルトコンストラクタなど、ファイルを自動で作成してくれる処理を行う時、先にファイルが存在していると上書きをしてしまう危険性がある。
ということで、java.io.Fileのexists()を使うことにした。

で、最初に思いついたのが

``` java:めんどうな例
　public static void main(String[] args){
　　/**
　　args[0] = FileWriterのデフォルトコンストラクタで作成して
　　　　　　　 書き込む予定のファイル名（拡張子なし）;
　　*/

　　String filename = args[0] + ".txt";

　　// カレントパスの取得とインスタンスの作成
　　String path = System.getProperty("user.dir");
　　File file = new File(path + "\\" + filename);

　　// exists()による判定
　　boolean flag = file.exists();
　　if (flag) {
　　　System.out.println(filename + "は存在します。");

```

みたいにしなければいけないものと思っていた。
というのも、exists()の使い方を調べるとき、きっちりカレントパスを書いた例が多かったからである。そしてそれは、多分正しい。

だが、そもそもコマンドラインへの入力（args[0]）の内容に依存するためはじめからファイル名を含んだカレントパスが用意できない上に、FileWriterでファイルを作成する前の下準備として、カレントディレクトリ内だけをチェックすれば良い場合、実は

```java:すっきりした例
　public static void main(String[] args){
　　String filename = args[0] + ".txt";

　　// インスタンスの作成
　　File file = new File(filename);

　　// exists()による判定（以下同じ）
　　boolean flag = file.exists();
　　if (flag) {
　　　System.out.println(filename + "は存在します。");
```

これだけで十分だったのである。

というわけで、<strong>カレントパス + 探しているファイル名をexists()で検索するときは、Fileのコンストラクタにフルパスを入れなくとも、ファイル名だけ入れれば動く<strong>。
JenkinsJobをDockerで処理する（2. ビルド用Dockerイメージの作成）


[前回](http://qiita.com/ogasada0/items/1af59668e7da3df274ea)はDockerPrivateRegistry環境を構築しました。今回はプロダクトをビルドするための環境をDockerで作成します。

## 2. ビルド用Dockerイメージの作成

### GitLabプロジェクトの作成

まずはDockerイメージのpush先となるGitLabプロジェクトを作成します。今回は`jenkins`グループに`docker`プロジェクトを作成します。作成時にはContainer Registryを有効にしておいてください。

### ベースとなるDockerイメージの作成

次にベースとなるDockerイメージを作成します。このイメージではプロダクトのビルドに直接は関係しないが、共通して必要となるであろうツールなどの設定を行います。

Ubuntuをベースにlocale設定とcurl,gitをインストールします。

```text:Dockerfile_base
FROM ubuntu:trusty

RUN locale-gen ja_JP.UTF-8 &&\
    apt-get -q update &&\
    DEBIAN_FRONTEND="noninteractive" apt-get -q upgrade -y -o Dpkg::Options::="--force-confnew" --no-install-recommends &&\
    apt-get -q autoremove &&\
    apt-get -q clean -y && rm -rf /var/lib/apt/lists/* && rm -f /var/cache/apt/*.bin

ENV LANG ja_JP.UTF-8
ENV LANGUAGE ja_JP:ja
ENV LC_ALL ja_JP.UTF-8

RUN apt-get -q update &&\
    DEBIAN_FRONTEND="noninteractive" apt-get -q install -y -o Dpkg::Options::="--force-confnew" --no-install-recommends curl git &&\
    apt-get -q clean -y && rm -rf /var/lib/apt/lists/* && rm -f /var/cache/apt/*.bin
```

以下のコマンドでイメージを作成します。

```bash
$ docker build -t gitlab.example.com:5000/jenkins/docker/base:1.0.0 -f Dockerfile_base .
```

最後に作成したイメージをPrivateDockerRegistryにpushします。docker loginの際に入力するアカウント、パスワードはGitLabのアカウント、パスワードです。

```bash
$ docker login gitlab.example.com:5000
$ docker push gitlab.example.com:5000/jenkins/docker/base:1.0.0
```

### ビルド用のDockerイメージ作成

作成したベースイメージを基に、プロダクトのビルドに必要なツールをインストールしたイメージを作成します。

今回は、Java8, Node.jsをインストールしたイメージを作成します。

```text:Dockerfile_java8_node
FROM gitlab.example.com:5000/jenkins/docker/base:1.0.0

# install JDK 8
RUN apt-get -q update &&\
    DEBIAN_FRONTEND="noninteractive" apt-get -q install -y -o Dpkg::Options::="--force-confnew" --no-install-recommends software-properties-common &&\
    add-apt-repository -y ppa:openjdk-r/ppa &&\
    apt-get -q update &&\
    DEBIAN_FRONTEND="noninteractive" apt-get -q install -y -o Dpkg::Options::="--force-confnew" --no-install-recommends openjdk-8-jdk &&\
    apt-get -q clean -y && rm -rf /var/lib/apt/lists/* && rm -f /var/cache/apt/*.bin

# install Node.js
RUN curl -sL https://deb.nodesource.com/setup_6.x | bash &&\
    DEBIAN_FRONTEND="noninteractive" apt-get -q install -y -o Dpkg::Options::="--force-confnew" --no-install-recommends nodejs &&\
    apt-get -q clean -y && rm -rf /var/lib/apt/lists/* && rm -f /var/cache/apt/*.bin
```

```bash
$ docker build -t gitlab.example.com:5000/jenkins/docker/java8_node:1.0.0 -f Dockerfile_java8_node .
$ docker login gitlab.example.com:5000
$ docker push gitlab.example.com:5000/jenkins/docker/java8_node:1.0.0
```

これでビルド用のDockerイメージができました。[次回](http://qiita.com/ogasada0/private/bf548f2b08a231c1e4d1)はJenkinsJobの作成しDockerイメージを使ったビルドをできるようにします。
【Git】「Gtk-WARNING **: ~~」と言われ、Pushできない時

Gitを使用していると、突然 `Gtk-WARNING **: cannot open display:` と言われ、
Pushできなくなることがあるため、対応方法をメモ

## 環境
 - CentOS 6.9
 - Git 1.7.1

## 結論
Pushする前に `unset SSH_ASKPASS` をすれば良い

```
$ unset SSH_ASKPASS
$ git push -u origin master
```
Pythonで株価取得とローソク足チャート作成

　株価分析するための株価取得と株価図示（ローソク足チャート）について書きます。時系列データの深層学習等、夢は広がるばかりですが、今回はとりあえず勉強するための道具を集めていきます。ただし、勉強中のメモですので、間違いがあることをご容赦ください（特に経済用語）。

#ローソク足チャート
　ローソク足チャートとは、Wikipediaによると、"単位期間を定め、単位期間中に初めに付いた値段を始値、最後に付いた値段を終値、最も高い値段を高値、最も安い値段を安値とし、この四種の値段（四本値）をローソクと呼ばれる一本の棒状の図形に作図し、時系列に沿って並べて株価の変動をグラフとして表したものである。"(参考：Wikipedia「ローソク足チャート」)だそうです。
　赤いローソクは株価が最終的に上昇、緑のローソクは最終的に下降した日であり、視覚的に株価の上下運動が分かりやすくなっています。では、このローソク足チャートの作成方法について述べます。
　
![rousokuasi_chart.png](https://qiita-image-store.s3.amazonaws.com/0/196468/c91199ac-ad84-81d5-944b-258c0af3a4eb.png)

#環境
・Windows8
・Anaconda4.4.0(Python3.6)
・pipで「daytime」「pandas_datareader」をインストール

#データ取得

```Python3.6:GetStock.py
import datetime
import pandas_datareader.data as web

#期間の設定
start = datetime.datetime(2017, 1, 1)
end = datetime.datetime(2017, 5, 30)

#株価取得
df = web.DataReader('TM', 'google', start, end)
df = toyota.drop('Volume', axis=1)  # DataFrameからVolumeを消去
df = df.loc[:, ['Open', 'Close', 'High','Low']]

```
Pythonには株価を取得するライブラリが用意されており、開始日、終了日、会社、データを取得するサイトを引数に入れれば、pandasで使える形式で返してくれます。Googleの場合は、Volumeもデータに入っていますが、不要なので消去します（ちなみに、Volumeとは取引された株数だそうです）。最後にデータを並び替えておきます。結果は下の図に記載ですが、見てのとおり、４つの値の関係性はよくわかりません。そこで、最後にろうそく足チャートの書き方を説明します。
![chart.png](https://qiita-image-store.s3.amazonaws.com/0/196468/9d007fa2-18d1-3a8f-32d3-a6b5a215c847.png)

#ろうそく足チャート作成
ろうそく足チャート作成ライブラリも存在します。上半分はデータ取得で先に説明したものです。「mpf.candlestick_ochl」という関数が用意されていますので、日付と対応するデータを引数に入れると簡単に図を作成してくれます。視認性を上げるためにグリッドを付けています。

```python3.6:RousokuasiChart.py
import numpy as np
import datetime
import pandas_datareader.data as web
import matplotlib.pyplot as plt
import matplotlib.finance as mpf
from matplotlib.dates import date2num

def main():
    #株価取得期間の設定
    start = datetime.datetime(2017, 1, 1)
    end = datetime.datetime(2017, 5, 30)

    #株価取得
    df = web.DataReader('TM', 'google', start, end)
    df = toyota.drop('Volume', axis=1)  # DataFrameからVolumeを消去
    df = df.ix[:, ['Open', 'Close', 'High','Low']]

    #画像作成
    fig = plt.figure()
    ax = plt.subplot()
    xdate = [x.date() for x in df.index]  # 日付
    ochl = np.vstack((date2num(xdate), df.values.T)).T
    mpf.candlestick_ochl(ax, ochl, width=0.7, colorup='g', colordown='r')
    ax.grid()  # グリッド表示
    ax.set_xlim(df.index[0].date(), df.index[-1].date())  # x軸の範囲
    fig.autofmt_xdate()  # x軸のオートフォーマット
    plt.savefig('rousokuasi_chart.png')#画像保存

if __name__ == '__main__':
    main()
```
このプログラムを実行すると、最初に見たろうそく足チャートが完成します。

![rousokuasi_chart.png](https://qiita-image-store.s3.amazonaws.com/0/196468/c91199ac-ad84-81d5-944b-258c0af3a4eb.png)

##参考サイト
１、「過去のデータからビッグデータ分析で株価を予測する」
>http://qiita.com/ynakayama/items/420ebe206e34f9941e51

２、Pythonで株価を取得しグラフ表示する　
>http://qiita.com/akichikn/items/782033e746c7ee6832f5

３、Pythonでローソク足チャートの表示（matplotlib編）
>http://qiita.com/toyolab/items/1b5d11b5d376bd542022