OmniAICreator/Qiita-1.07M huggingface dataset:
Ubuntuのディスク容量を見る


もちろんroot的なPermissionエラーが出た場合はsudoしてください。


fileが属するファイルシステムについての情報を表示する。-m MByte単位表示
```
df -m
```

ディレクトリ容量を調べる
```
du -h --max-depth=1 /
```

不要ファイルを探す

```
du -sh /usr/*
```

35M	/usr/bin
4.0K	/usr/games
17M	/usr/include
140M	/usr/lib
0	/usr/lib64
281M	/usr/local
7.9M	/usr/sbin
200M	/usr/share
1.2G	/usr/src


不要なファイルを削除
※気をつけて消してね
```
rm ファイル
or
rm -d ディレクトリ
```

apt のパッケージキャッシュをクリア
```
apt-get clean
```

依存関係のない不要なパッケージを削除
```
apt-get autoremove
```
Crosh内で，ついCtrl+nを押してもイライラしない方法


> Qiitaを読むような人は，Chromebookを使っていてもCtrl+Alt+tを押してシェル(Crosh)を開いていることでしょう．
そのとき，Ctrl+p を何度か叩いてコマンドラインヒストリを辿ったりするでしょう．
さらに，行き過ぎちゃって，Ctrl+n を押して…
新しいタブが何個も開いてイライラするでしょう．

そう，私も何度もイラつきました．

上記ストーリーに共感できる方は，ここで紹介する [Crosh Window](https://chrome.google.com/webstore/detail/crosh-window/nhbmpbdladcchdhkemlojfjdknjadhmh) をインストールすると幸せになれます．
このアプリのインストールは，先立って [Secure Shell](https://chrome.google.com/webstore/detail/secure-shell/pnhechapfaindjhompbnflcldabbghjo) という別アプリをインストールする必要があります(が，Croshを開いているような方は，すでにインストールなさっていることでしょう)．

インストール後，アプリの一覧に，Crosh Window なるアイコンが追加されます．

![Screenshot 2015-03-19 at 11.03.55.png](https://qiita-image-store.s3.amazonaws.com/0/5414/97bfe8a5-edd1-8ad2-107c-45095f957800.png)

ウインドウアプリなので，Ctrl+n を押しても新規のタブは出ません．幸せですね．

## 色などの変え方

でも Crouton で入れた vim や git のカラーハイライトと黒背景が合わず，しかも大抵のChromebook は液晶の質が悪いので，イラついてくるかもしれません．

Crosh Window は表示色などを変更できます．しかし，その設定画面は Crosh Window ではなく，依存している Secure Shell の中にあります．

Secure Shell を開くと，新規接続のためのウインドウが表示されますが，その下の方にOptionsというボタンがあるはずです．
![Screenshot 2015-03-19 at 10.52.55.png](https://qiita-image-store.s3.amazonaws.com/0/5414/23beb1e7-c2da-9e83-7ad6-50093dbbd343.png)
 
ボタンを押すと，設定画面が出てきます．
色だけでなく，カーソル関係など割と詳細な設定項目が並んでいます．
決めた値は，Secure Shell にも次に Chrosh Window を開いた時にも反映されます．
ちなみに，上のスクリーンショットは，色を変更したあとのものです．

ちょっとしたコマンドライン作業を行う際のストレス軽減に，お役に立てたなら幸いです．
Play Framework 2.3.x Ajax通信

Play Framework 2.3.x Ajax通信
====

# JavascriptRoute生成

## 埋め込みルータ

1. application.scalaにajaxCallを追加

```scala:Application.scala
/**
 * This action is used to serve Home page of the application
 *
 * @return
 */
def index = Action { implicit request =>
  Ok(views.html.index("Your new application is ready."))
}
 
/**
 * This action is used to handle Ajax request
 *
 * @return
 */
def ajaxCall = Action { implicit request =>
  Ok("Ajax Call!")
}
```

- conf/routesにajaxCallを追加

```conf:routes
GET   /ajax-call          controllers.Application.ajaxCall
```

- index.scala.htmlにRequestHeaderを追加

```html:index.scala.html
@(message: String)(implicit req: RequestHeader)
 
@main("Welcome to Play") {
 
    @message
 
}
```

- hello.jsにajaxCallを実装

```javascript:hello.js
$(function() {
 
    ajaxCall();
 
});
 
var ajaxCall = function() {
    var ajaxCallBack = {
        success : onSuccess,
        error : onError
    }
 
    jsRoutes.controllers.Application.ajaxCall().ajax(ajaxCallBack);
};
 
var  onSuccess = function(data) {
    alert(data);
}
 
var onError = function(error) {
    alert(error);
}
```

- 埋め込みルータは Scala テンプレート内で記述

```html:main.scala.html
@(title: String)(content: Html)(implicit req: RequestHeader)
 
<!DOCTYPE html>
 
<html>
    <head>
        <title>@title</title>
        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
        <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
         
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
         
        <!-- Embedded Javascript router -->
        @helper.javascriptRouter("jsRoutes")(
              routes.javascript.Application.index,
              routes.javascript.Application.ajaxCall
        )
         
        <script src="@routes.Assets.at("javascripts/app.js")" type="text/javascript"></script>
    </head>
    <body>
        @content        
    </body>
</html>
```

- 実行すると、ajax Callのアラートが表示されます。

# 終わり
RESTfulなアーキテクチャの基本的な考え方とは

RailsではRESTfulなアーキテクトを採用しているということですが
このよく聞く`RESTful`という言葉をよくわかっていなかったので
railsチュートリアルの図を引用してメモをします。

[railsチュートリアルから図を引用](http://railstutorial.jp/chapters/a-demo-app?version=4.0#sec-demo_users_resource)

| HTTPリクエスト | URL            | アクション| 用途
|:--------------|:---------------|:--------|:--------------------------------
| GET  	        | /users         | index   | すべてのユーザーを表示するページ    
| GET	        | /users/1       | show	   | id=1のユーザーを表示するページ     
| GET	        | /users/new     | new	   | ユーザーを新規作成するページ
| POST	        | /users	 | create  | ユーザーを作成するアクション
| GET	        | /users/1/edit	 | edit	   | id=1のユーザーを編集するページ
| PATCH	        | /users/1	 | update  | id=1のユーザーを更新するアクション
| DELETE	| /users/1	 | destroy | id=1のユーザーを削除するアクション


上記の例であれば、`/users/1`という同じURLが3つあります。

それぞれの役割に、`show`、`update`、`destroy`と、異なるアクションを紐づけていますが
同一のURLとなっています。

現在使われているHTTPリクエストメソッドは、`GET`と`POST`のため
普通は、showアクションは`/users_show/1`、updateアクションは`/users_update/1`、
destroyアクションは`/users_destroy/1`とかのURLを考えますよね。

昔Django(pythonのwebフレームワーク)でアプリを作った時は実際にそうしてました。

でもそうするとurlを管理するファイルの中がアクションの数によっては大変なことになったのを
記憶しています。

それに、url文字列をmatchさせてアクション(Djangoであればviewですね)に紐づけるので
似たようなURLをたくさんつくると、場合によっては意図していなかったアクションにマッチ
してしまい、別な処理が走ったことなどがあり、結構焦ったことがあります。

RESTfulなアーキテクチャの場合、URLは同一のものを使うかわりに、HTTPリクエストメソッドに
それぞれ、`GET`、`PATCH`、`DELETE`を使って異なるアクションに結びつけるようです。

こうすることでURLを**名詞**とし、HTTPリクエストメソッドを**動詞**とすることができ
シンプルにURLをいろいろなアクションに結びつけることができるようになります。

実際にrailsでメソッドとアクションを紐づけるファイル`config/routes.rb`を見ると
ファイルの中が非常にシンプルで、Djangoで苦労した時のことを思い出したと同時にホッと
しました。

ところで、現在のブラウザにはPATCHやDELETEといったメソッドはないようです。

Railsは存在しないHTTPメソッドを存在するかのように見せかけ
RESTfulなアーキテクチャの実装を実現しているようです。
なんちゃってVimmerにおくるAtomおすすめPackages

## 前置き
Vimのキーバインドが便利でいいなーってくらいのレベルの人向けです。

## とりあえず入れているPackage一覧

├── Sublime-Style-Column-Selection@1.2.3
├── atom-alignment@0.11.0
├── atom-dark-ui-slim@0.47.1
├── autocomplete-plus@2.5.0
├── custom-title@0.7.0
├── docblockr@0.6.3
├── duplicate-lines-upward@1.1.1
├── enhanced-tabs@1.1.0
├── ex-mode@0.3.1
├── find-selection@0.14.0
├── highlight-selected@0.9.1
├── indent-guide-ext@0.1.0
├── language-htaccess@0.0.1
├── last-cursor-position@0.7.0
├── markdown-scroll-sync@0.3.2
├── markdown-writer@1.1.1
├── multi-cursor@1.1.2
├── poxy-monokai@0.1.1
├── project-manager@1.15.5
├── synced-sidebar@0.2.3
├── tab-history@0.4.0
└── vim-mode@0.39.0

## 入れているPackageのうちタイトルと関係あるやつ

├── ex-mode@0.3.1
└── vim-mode@0.39.0

`ex-mode` を いれると `:w` で保存できるようになったりするので、入れるべし！
というか`vim-mode`でそれ出来るようになって欲しいっていうのが本音ですが


その他にいれているおすすめPackageに関しては続編にて！
ウィンドウ幅によって読む込むjqueryを変える

jqueryを読み込む
`<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>`

jQueryでデバイス（ウィンドウ）幅別の処理をする。（ブレークポイント1000pxの場合）
`var _width = $(window).width();
if(_width <= 1000){
	//デバイス（ウィンドウ）幅が768px以下の時の処理
}else{
	//『デバイス（ウィンドウ）幅が768px以下』以外のときの時の処理
}`
jqueryで作るアコーオディオンメニュー

**HTML**
```
<div id="accordion">
<div>
<h5><a href="#">アコーディオン1</a></h5>
<p>こんにちは、ぼくはアコーディオン1号です。
こんにちは、ぼくはアコーディオン1号です。こんにちは、ぼくはアコーディオン1号です。
</p>
</div>
<div>
<h5><a href="#">アコーディオン2</a></h5>
<p>
こんにちは、ぼくはアコーディオン2号です。こんにちは、ぼくはアコーディオン2号です。
こんにちは、ぼくはアコーディオン2号です。こんにちは、ぼくはアコーディオン2号です。
こんにちは、ぼくはアコーディオン2号です。こんにちは、ぼくはアコーディオン2号です。
こんにちは、ぼくはアコーディオン2号です。こんにちは、ぼくはアコーディオン2号です。
こんにちは、ぼくはアコーディオン2号です。</p>
</div>
<div>
<h5><a href="#">アコーディオン3</a></h5>
<p>こんにちは、ぼくはアコーディオン3号です。こんにちは、ぼくはアコーディオン3号です。
こんにちは、ぼくはアコーディオン3号です。こんにちは、ぼくはアコーディオン3号です。
こんにちは、ぼくはアコーディオン3号です。こんにちは、ぼくはアコーディオン3号です。</p>
</div>
</div>
```


**jquery**
```
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.5.1");</script>
<script type="text/javascript">google.load("jqueryui", "1.8.11");</script>
<script type="text/javascript">
$(function(){
$("#accordion").accordion({
	header: "h5",
	collapsible:true,
	animated: 'bounceslide' ,
	autoHeight:false,
	active:4
	});
});
</script>
```
opencv / pythonで矢印（ベクトル）を描画する

[OpenCVで矢印を描画する](http://mementoo.info/archives/656)からPython版を作成。

```py
def cvArrow(img, pt1, pt2, color, thickness=1, lineType=8, shift=0):
    cv2.line(img,pt1,pt2,color,thickness,lineType,shift)
    vx = pt2[0] - pt1[0]
    vy = pt2[1] - pt1[1]
    v  = math.sqrt(vx ** 2 + vy ** 2)
    ux = vx / v
    uy = vy / v
    # 矢印の幅の部分
    w = 5
    h = 10
    ptl = (int(pt2[0] - uy*w - ux*h), int(pt2[1] + ux*w - uy*h))
    ptr = (int(pt2[0] + uy*w - ux*h), int(pt2[1] - ux*w - uy*h))
    # 矢印の先端を描画する
    cv2.line(img,pt2,ptl,color,thickness,lineType,shift)
    cv2.line(img,pt2,ptr,color,thickness,lineType,shift)
```

---
ブログやっています：http://weed.nagoya
WebサイトMetaタグ 設定例まとめ(PC/SP別)

とりあえずこうしとけば良さそうな設定一覧。

# alternate
スマホサイトURLや他言語サイトURLを指定。

例：

```html:PCサイト
<link rel="alternate" media="handheld" href="このページのモバイル版URL">
<link rel="alternate" media="only screen and (max-width: XXXpx)" href="このページのスマホ版URL">
```

# canonical
本物のページを指定。
⇒SEO分散を防ぐ（SPサイトではPCサイトURLを指定する等）。

例：

```html:PCページ
<link rel="canonical" href="このページのURL(パラメータ除外)">
```

```html:SPページ
<link rel="canonical" href="このページのPC版URL(パラメータ除外)">
```


# next, prev
複数ページあるコンテンツの場合に前後のページを指定。
⇒SEO分散を防ぐ（SPサイトではPCサイトURLを指定すると尚良い）。

[Google ウェブマスター向け公式ブログ](http://googlewebmastercentral-ja.blogspot.jp/2011/12/relnext-relprev.html)によると、
>これによって Google はコンテンツのインデックス登録がより正確にできるようになり、最も関連性の高いページ（通常は最初のページ）をユーザーに表示するようになります。

例：

```html:PCページ
<link rel="prev" href="前のページのURL">
<link rel="next" href="次のページのURL">
```

```html:SPページ
<link rel="prev" href="前のページのPC版URL">
<link rel="next" href="次のページのPC版URL">
```

# OGP
SNSでシェアされたときのサムネイルや要約文に使用される。
UA判定でリダイレクトかけてるなら一律PC版URLを指定しても大丈夫。

デバッグ可能 ⇒ [Facebookデバッガー](https://developers.facebook.com/tools/debug/og/object/)

例：

```html:PCページ
<meta property="og:title" content="ページタイトル">
<meta property="og:type" content="website">
<meta property="og:url" content="このページのURL(パラメータ除外)">
<meta property="og:image" content="サムネイル画像">
<meta property="og:site_name" content="サイト名">
<meta property="og:description" content="ページの説明">
```
Squeel 使ってみた

[squeel](https://github.com/activerecord-hackery/squeel)というgemがかなり便利。
Arelで書けよって話なのですが、Arelで書くとコードが読みづらい・・・。
squeelで書くと大分SQLライクな感じになり、非常に読みやすくなります。

ここではクエリを組み立てる時にArelで書くようなところを、squeelではどう書くか書いていきます。

### where
```
User.where { created_at >= 3.days.ago }
```
`?`とか必要なく書きやすい
### or
```
User.where { (name == 'hoge') | (name == 'fuga') }
```
`||`ではなくsqueelで条件を繋げる場合は`|`で繋げます。
ちなみにandの場合は`&`で繋げます。
###like
```
User.where { name.like '%hoge%' }
```
```
User.where { name =~ '%hoge%' }
```
`like`または`=~`となります。

###left join
```
User.joins { Group.outer }
```
非常に見やすい!

### Predicates
|SQL|Predication|Operator|Alias|
|--------|--------------|----------------------|----|
|=       |eq            |==                    |    | 
|!=      |not_eq        |!= (1.9 only), ^ (1.8)|    |
|LIKE    |matches       |=~                    |like|
|NOT LIKE|does_not_match|!~ (1.9 only)         |not_like|
|<       |lt            |<                     |    | 	
|<=      |lteq          |<=                    |lte |
|>       |gt |>| | 	
|>=      |gteq| 	>=| 	gte|
|IN      |in 	|>> | |	
|NOT IN  |not_in |<< |


公式にこう書かれていますので、例えば前述のor検索などは、

```
User.where { (name.eq 'hoge') | (name.eq 'fuga') }
```
このように書くこともできます。


上記を組み合わせ、複雑な検索条件も、

```
User.joins { groups.outer }.where { (groups.name.not_eq 'hoge') }
```

```
User.where { (id >> [1, 2, 3]) & (name.matches_any ['%hoge%', '%fuga%']) }
```
と組み立てることが可能です。
Arelで複雑なコードを書いてる人は導入を検討してみてはどうでしょうか。


参考ページ:
https://github.com/activerecord-hackery/squeel
http://labs.timedia.co.jp/2013/11/activerecord4sql-squeel.html
ネットワークとインターネットの基礎

# インターネットとは？概要と用語説明。

# 1. Computer Networks and the Internet

今日のコンピューターネットワークを理解するための根本的で実用的な理解をすることを目的として連載する。
Chapter 1ではコンピューターネットワークとインターネットの概要を広く見ていく。

## 1.1 What is the Internet?
1. ネジとボルト。すなわち、基本的なハードウェアとソフトウェアの構成要素に分解できる。
2. 様々なサービスがアプリケーションを配布することができるネットワークのインフラと言える。
と二種類に解釈できる。

### 1.1.1 A Nuts-and-Bolts (ネジとボルト) Description
インターネットとは、何千何億の世界中のコンピューターをつなぐコンピューターネットワークである。
今日は、ラップトップ、スマフォ、タブレット、その他多数の電子機器がインターネットに接続されている。そう言ったデバイスのことを、ホストやエンドシステムと呼ぶ。
エンドシステム同士は、**コミュニケーションリンク**と**パケットスイッチ**というネットワークでつながっている。様々な物理的な素材で作られたコミュニケーションリンクが存在し、異なる**トランスミッションレート**(bits/second)を持つ。
データが送られる時、送る側のエンドシステムはデータをセグメントに分けそれぞれのセグメントにヘッダーバイトを付け足す。こうして出来上がった送られるパッケージは、**パケット**と呼ばれる。パケットはネットワークを通して目的地のエンドシステムに送られ、そこで、再び元のデータが構築される。
パケットスイッチは、入ってくるコミュニケーション上でパケットを迎え、出て行くコミュニケーションリンク上にパケットを転送する。パケットスイッチにも様々な種類のものが存在するが、今日最も使われているのは、**ルーター**と**リンクレイヤースイッチ**である。これらのスイッチはパケットを最終的な目的地に向けて転送する。リンクレイヤースイッチは主にアクセスインターネット(ネットワークなどを使い他のコンピューターに接続すること)で使われ、ルーターは主にネットワークコア(大容量の通信が可能な回線)で使われる。出発地のエンドシステムから目的地のエンドシステムまでパケットが通る一連のコミュニケーションリンクとパケットスイッチは、**ルート**もしくは**パス**として知られてる。
パケットスイッチネットワークって、高速道路、道、交差点に似てる。パケットスイッチはパケットを運んで、こいつらは乗り物を運ぶ。ある倉庫から、クソ遠い目的地の倉庫まで、ある量の積荷を運ぶとする。まず、倉庫で積荷をセグメント毎に分けて、トラックの荷台に乗せるでしょ。それぞれのトラックが、ここに高速道路、普通道、交差点を走っていく。んで、目的地に積荷がみんなつくと、荷台から降ろされてグルーピングされる。コミュニケーションリンクは、高速道路、普通道と同じで、パケットスイッチは交差点と同じ。
エンドシステムは、Internet Service Providers(ISPs)を通してインターネットにアクセスする。ISPは、携帯会社だったり、駅でWiFiを提供してるISPだったり。それぞれのISPはパケットスイッチとコミュニケーションリンクのネットワークなんだ。で、それぞれのISP同士が繋がってる仕組みってのがあったりする。
エンドシステムやパケットスイッチやその他のインターネットのかけらたちは、インターネット内でデータの送受信を操る**プロトコル**を走らせる。Transmission Control Protocol(TCP)とInternet Protocol(IP)が最も重要なプロトコル。IP protocolは、ルーターとエンドシステムで送受信されるパケットのフォーマットを明確に述べている。
プロトコルの書き方や動作が規格化されているので、みんなそれに従うことでやりとりできる。**インターネットスタンダード**といい(IFTFに定義されている)、そのドキュメントは**requests for comments(RFCs)**と呼ばれる。IFTFは、TCP, IP, HTTP(for the web), SMTP(for e-mail)とかを定義してる。
Octopress をインストールして GitHub Pages で公開する

## はじめに

Octopress + GitHub Pages の記事はたくさんあるのですが、User/Organization 用の Page である "USERNAME.github.io" ドメインの例しか見つかりませんでした。
[ドキュメント](http://octopress.org/docs/deploying/github/)を読んでやってみたところ、ふつうのプロジェクトリポジトリの gh-pages ブランチでもできたので、とりまとめて書いておきます。

## Octopress のインストール

[Octopress Setup](http://octopress.org/docs/setup/http://octopress.org/docs/setup/) に従って初期セットアップを行います。
ここでは bundler[^1] はインストール済みとします。

[^1]: http://bundler.io/

```
git clone git://github.com/imathis/octopress.git octopress-test
cd octopress-test
bundle install
rake install
```

この後、下記コマンドによって、ローカルマシン上でサイト表示を確認できるアプリケーションが起動します。

```
rake preview
```

http://localhost:4000 でサイト表示を確認できます。

## GitHub Pages へのデプロイ設定

### User/Organization Page にデプロイする場合

はじめに GitHub で USERNAME.github.io というリポジトリを作成して下さい。
ここで USERNAME には自分の GitHub アカウント名を入れて下さい。

`rake setup_github_pages` を実行するとリポジトリURLの入力を求められます。

```
% rake setup_github_pages
Repository url: git@github.com:USERNAME/USERNAME.github.io.git
```

これによって、以下のことが行われます。

* `git@github.com:USERNAME/USERNAME.github.io.git` が origin remote として追加される
* `_deploy/` ディレクトリがリポジトリの master ブランチに設定される
* 親ディレクトリは source というブランチになる

デプロイ時には、下記コマンドを実行します。

```
rake generate
rake deploy
```

これによって、`_deploy/` 以下にサイトのコンテンツ一式がビルドされ、その内容が GitHub に push されます。

http://USERNAME.github.io/ にアクセスすると、ローカルで preview した画面と同じ内容が表示されるでしょう。

最後に、ソースコードを管理するために、source ブランチも push しておきましょう。

```
git add .
git commit -m 'your message'
git push origin source
```

### Project Page (gh-pages) にデプロイする場合

GitHub で任意の名前のリポジトリを用意します。
ここでは "USERNAME/octopress-test" というリポジトリだとします。

`rake setup_github_pages` を実行して、用意したリポジトリのURLを入力しましょう。

```
% rake setup_github_pages
Repository url: git@github.com:USERNAME/octopress-test.git
```

"USERNAME.github.io" リポジトリのときとは異なり、`_deploy/` ディレクトリは gh-pages ブランチに設定されます。

デプロイコマンドは前項と同様です。

```
rake generate
rake deploy
```

http://USERNAME.github.io/octopress-test/ でサイトが表示されます。

ソースコードを管理するためには、remote のリポジトリURLを設定する必要があります。

```
git remote add origin git@github.com:USERNAME/octopress-test.git 
git config branch.master.remote origin 
```

この後の `git add` 〜 `git push` までの流れは同様です。 

## まとめ

Octopress を使うと簡単に GitHub Pages で静的サイトを構築できますね。
自作bash script > あるファイルの一部を持つ別のファイルの最後尾アドレスを知る > find-inclusion-addr-exec

動作環境

    CentOS 6.5
    bash

#背景

ファイルAの一部がファイルBに含まれていることがわかっているとする。

ファイルBのどのアドレスまでがファイルAの一部を含んでいるか知りたい。

#スクリプト
スクリプトを以下のように準備した。

```bash:find-inclusion-addr-exec
#!/bin/env bash

#preparation
#  $ ln -fs small.bin LN-inclusion
#  $ ln -fs big.bin LN-matrix
# where part of small.bin is included in big.bin

if [ $# -lt 2 ]; then
   echo "Usage:"
   echo "  [cmd] [incSta] [matSca]"
   echo " where "
   echo "    incSta: start address of inclusion"
   echo "    matSta: start address of matrix"
   exit
fi

incFileName="LN-inclusion"
matFileName="LN-matrix"
outMatFile="out.partOfMatrix"
outIncFile="out.partOfInclusion"

if [ ! -e $incFileName ]; then
	echo "prepare LN-inclusion"
	exit
fi

if [ ! -e $matFileName ]; then
	echo "prepare LN-matrix"
	exit
fi

incSta=$1
matSta=$2

od -Ax -tx1z $incFileName -j $incSta | awk '{$1=""; print}' > tmp.inclusion 
od -Ax -tx1z $matFileName -j $matSta | awk '{$1=""; print}' > tmp.matrix

diffpos=$(diff tmp.inclusion tmp.matrix | head -n 1 | tr "," " " | tr "c" " " | awk '{print $1}')

echo "differed at ($diffpos)-th line"

od -Ax -tx1z LN-matrix -j $matSta | head -n $diffpos > $outMatFile
od -Ax -tx1z LN-inclusion -j $incSta | head -n $diffpos > $outIncFile

tail -n 1 $outMatFile
echo "[$outMatFile] [$outIncFile] created"

rm -f tmp.inclusion tmp.matrix
```

#使い方
まずファイルAを以下のようにリンクしておく

    ln -fs small.bin LN-inclusion

ファイルBも以下のようにリンクしておく

    ln -fs big.bin LN-matrix

small.binの0x8000からのデータがbig.binの0xA80からどこまで含まれるかを知るには以下のようにする

```
$bash find-inclusion-addr-exec 0x8000 0xA80
differed at (3930)-th line
015da0 00 00 00 00 00 00 00 00 04 a7 00 00 ff ff ff ff  >................<
[out.partOfMatrix] [out.partOfInclusion] created
```

上記の例ではbig.binの0x15da0あたりまでsmall.binの一部が含まれていることがわかる。
そのあたりのHEXテキストはout.partOfMatrixとout.partOfInclusionというファイルに出力される。

#補足
先頭アドレスを指定しないといけないのが改善すべき点。
自動でどこからどこまで含まれるかがわかるのが理想ではある。
PowerShell_基本認証接続


```lang:PowerShell
$URL = "http://"
$USER = ""
$PASSWD = ""

$nc = New-Object System.Net.NetworkCredential($USER, $PASSWD)
$wc = New-Object System.Net.WebClient
$wc.Credentials = $nc

$str = $wc.DownloadString($URL)
Write-Host $str

```
Selenium IDE2.9.0でタイマー機能が搭載！！で、使えるのか！？

# はじめに
* Selenium IDEとはFirefoxのアドオンで、一言でいえば"自動でブラウザを操作できるツール"

# 検証環境
* Firefox
 * 36.0.1(2015/03/18時点で最新)

# Selenium IDE のインストール
* http://release.seleniumhq.org/selenium-ide/2.9.0/selenium-ide-2.9.0.xpi から取得
* インストール時にFirefoxの再起動を求められる

# いざ、機能追加があったタイマー機能がどんなものか使ってみる
## Selenium IDEの起動
* ツール -> SeleniumIDE
* お、確かにタイマーっぽいアイコンがある
    * ![SeleniumIDE起動.png](https://qiita-image-store.s3.amazonaws.com/0/19778/4aa4c825-6054-69f1-98f8-9be126846715.png)
    * ![SeleniumIDEタイマー.png](https://qiita-image-store.s3.amazonaws.com/0/19778/74d03fea-195a-61f6-64fd-f67e31034206.png)

## テスト作成
* "全国のSeleniumer必読"というキーワードでググるシナリオを作成
    * ![SeleniumGoogle検索.png](https://qiita-image-store.s3.amazonaws.com/0/19778/4da5100f-5dc6-fee8-1e07-1466ad2c7544.png)

## タイマーボタンを押してみた
* に、日本語が残念なことに！！
    * ![タイマーボタン押下.png](https://qiita-image-store.s3.amazonaws.com/0/19778/60a40f11-1852-2271-d5e1-9d1627f4481b.png)

## タイマー機能を触ってみる
* 「タイマーボタンを押してみた」で出たダイアログで"はい"を選択すると以下の画面が表示される
    * ![タイマー.png](https://qiita-image-store.s3.amazonaws.com/0/19778/2b50a722-c90e-f89a-0f49-174369230f88.png)
* 見ただけでJenkinsの定期実行だったり、crontab相当なことがこれで可能になるということがわかります
* そして、Advancedをみると「Every 5 minutes」とかあるじゃないか
 * これは昔拡張スクリプトでやってたwhileコマンド使えるようにしてループ処理とかしなくてもよくなるじゃないか
 * [拡張スクリプトでやるwhileコマンドを使うやり方](http://qiita.com/oh_rusty_nail/items/b8ba525d31ea7c522856#while%E3%83%AB%E3%83%BC%E3%83%97)
* スケジュールはテストスイート毎に設定可能
    * ![jobs.png](https://qiita-image-store.s3.amazonaws.com/0/19778/69e2ef6f-bb03-980a-1029-111a04528b14.png)
 
# まとめ
* 結論から言うと、SeleniumIDEとしては便利になったのは間違いない
 * 使い方次第ではあるが、Selenium IDEとうお手軽ツールとしては充分だろ！と
 * ということで「使えるのか！？」⇒「使える！！」
* 残念だったのは時間が5分きざみということ
 * 「Every 5 minutes」を「Every 1 minutes」にしてもその通りにはならない
 * スケジュールを組んだ時間が12時59分だとすると実行されるのは13時00分、次は13時05分となり時間間隔でみているのではなく時刻ベース
* あと、これってあくまでFirefoxのアドオンだからFirefoxずっと起動しないといけない
 * しかも、開始されたらブラウザの画面勝手に動かし始めるので触らないPCじゃないとうざったいな
* 今後改善されることを期待

# ～ただの宣伝～
* [全国のSeleniumer必読](http://qiita.com/oh_rusty_nail/items/b8ba525d31ea7c522856)
* Seleniumerといっていますが、Selenium, SauceLabs, Travis, Jenkinsに関するノウハウ書いているのでよかったら参考にしてみてください
iPhone & Apple Watch 画面解像度メモ

| デバイス          | 解像度   |
|:-----------------|:--------|
| iPhone4S         | 320x480 |
| iPhone5/5S       | 320x568 |
| iPhone6          | 375x667 |
| iPhone6+         | 414x736 |
| iPad             | 768x1024 |
| Apple Watch 38mm | 272x340 |
| Apple Watch 42mm | 312x390 |
Gitの理解まとめ　世界観

#この記事は
Gitに対する自分用の理解まとめです。こういう説明を受けたかったな、と思うように説明することを心がけるので、もし共感できる人がいれば参考にしていただければ嬉しいです。また、間違いの指摘もしていただけるとありがたいです（すぐ対応できるかはわかりませんが、少なくとも後でこのページを読んだ人が間違った理解を得るのを防ぐことができます）。

#世界観
gitプロジェクトには三つの世界があります。
working tree
index
repository
![新規キャンバス.png](https://qiita-image-store.s3.amazonaws.com/0/54273/ab23f5b5-a649-8741-ba83-78902fde0bce.png)
代表的なコマンドがそれぞれの世界にどのような影響を与えるのか、というところがわかったら、おっかなびっくりコマンドを叩かないでも済むので、まずイメージから身につけると良いと思います。
### working tree
![wt.png](https://qiita-image-store.s3.amazonaws.com/0/54273/2f169051-0ed2-9b75-c534-d94533fee8fa.png)
working treeとはすなわち作業空間です。```.git```以下を除くあなたが直接エディタ等で触れるファイル、ディレクトリ群はすべてここに属しています。おそらくこの想像がつかない人はいないと思います。大事なのは、今あなたが作業しているファイルと、今までの歴史（性格に言うとcommitの集まり、です。）は完全に別の世界にあるというイメージです。なので、あなたがここでどれだけ自由に振舞っても(```git```関連のコマンドを除いて！)今までの歴史に存在するcommitに戻ることは簡単です。安心してください。
### index
indexは一部保留された世界です。ここに加えられた変更（変更はファイル単位で数えられます。）達
![id.png](https://qiita-image-store.s3.amazonaws.com/0/54273/d4fb1ba1-53a8-bbfe-88bd-9f2622f47fd1.png)

はもう一度なかったことになることもできるし、歴史の一部に加わることもできます。歴史に加わった後ももちろんいくらでも元に戻ることができる上に、このような安全装置までついてるのだから、もうgitを怖がる理由は何もありませんね。ただしその安全装置を外すようなコマンドに対しては認識していなければなりません。大抵の場合はそのようなコマンドには```--force```やら```--hard```やら恐ろしげなオプション名が付いているので一目で危なそうとわかります。そのようなコマンドを扱うには注意が必要ですが、十分な理解を得た後なら柔軟な操作のために使うことがあってもよいでしょう。gitは整合性を保つためにしばしばなかなかめんどくさい操作を要求してくることがあり、そのたびたらい回しにされてる気持ちになります。そのコマンドのよって及ぼされる影響が想像ができないのなら、しばらくはその危険なコマンドは封印した方がいいでしょう。
ちなみにこのindexは実体としては`.git/index`以下に存在しますが、ここの存在を気に掛ける必要は通常ありません。
### repository
![rp.png](https://qiita-image-store.s3.amazonaws.com/0/54273/1f0fc32b-e034-6fdd-8cd0-b402c32afdfb.png)

リポジトリこそがgitがgitである所以であり、すべてのソースコードの歴史が""そのまま""入っています。repositoryの最小単位```commit```は```git commit ```コマンドでindexより生成されることは知ってるかもしれません（知らなくても大丈夫、あとで解説します）。結局のところgitのほとんどのコマンドは「歴史」---commitを元に「今」---working treeを書き換えるか、その逆、「今」を元に「歴史」を書き換えるか、あるいは「歴史」そのものを操作するかの三つに大別されると言っていいでしょう。

###ここまでのまとめ
gitには三つの世界がある
三つの世界はそれぞれworking tree、index、repositoryといい、今、今と歴史の中間、歴史を表す。
大抵のことはやっても大丈夫

なお、リモートリポジトリのことはとりあえず後に置いておきます。といってもそれもさっきいった概念から大きく外れるものではありません。離れた場所にあるプロジェクトディレクトリの歴史で、多くはローカルの歴史と一致するでしょうが、少しだけ歴史が食い違ってる部分があるかもしれません（遠隔地でも時は過ぎますからね）というだけの話です。

次はgit add, commit, resetについて解説しようと思います。
windows10からSamba4にアクセス

windows10は認証なしでの共有フォルダへのアクセスが出来ない
-> と思ったら出来ました。

## 共有フォルダの利用

```text:
net use z: \\192.168.100.62\public /USER:nobody ""
```

パスワードが空の場合は`""`を指定。

![win10.png](https://qiita-image-store.s3.amazonaws.com/0/25728/d2c81bf4-fe26-648b-b916-4f903be5add6.png)

## 共有フォルダの利用終了

```bash:
net use /delete *
# もしくは
net use /delete z:
```

## サーバ側の設定

* [CentOS7のsamba4はsmbpasswdの代わりにpdbeditになった - Qiita](http://qiita.com/tukiyo3/items/92cf5505e19b63f0f3f1)
* [Samba4で認証なしで共有フォルダにアクセスさせる - Qiita](http://qiita.com/tukiyo3/items/ae758e3a7492aa192ca8)
Samba4で認証なしで共有フォルダにアクセスさせる

windows10からのアクセスは認証が必要になります。

## 参考

* [【FreeBSD】Windowsとファイルを共有する (samba 4.x)](http://www.kishiro.com/FreeBSD/samba4.html)

> 「security=share」の代替としては、「security=user」かつ「map to guest=Bad User」の組み合わせがあります。
この設定では、ユーザ認証でコケたユーザは、guestにマップされるようになります。

## インストール

* fedora22にて確認

```bash:
yum install samba
```

## 設定

```diff:/etc/samba/smb.conf
 	security = user
 	passdb backend = tdbsam
+	map to guest=Bad User
```


```diff:/etc/samba/smb.conf
-;	[public]
-;	comment = Public Stuff
-;	path = /home/samba
-;	public = yes
-;	writable = yes
-;	printable = no
-;	write list = +staff
+	[public]
+	comment = Public Stuff
+	path = /srv/samba
+	guest ok = yes
+	public = yes
+	writable = yes
+	printable = no
```

```bash:
mkdir /srv/samba
chmod 777 /srv/samba

systemctl start samba
```

## アクセス元を制限する

* 参考: [Sambaへのアクセス制限。 - それマグで！](http://takuya-1st.hatenablog.jp/entry/20101009/1286642772)

```diff:/etc/samba/smb.conf
 [global]
+  hosts allow = 192.168.100.
```

* 192.168.100.0/24 以外からはアクセスできない。

もしくは

```diff:/etc/samba/smb.conf
 [global]
+  hosts allow = 192.168.100.0/24 127.0.0.1/32
```


## example

* /etc/samba/smb.conf

```apache:/etc/samba/smb.conf
[global]
    workgroup = WORKGROUP
    encrypt passwords = yes
    netbios name = fileserver
    server string = %h 2020-12-13
    wins support = yes
    log level = 1 
    max log size = 1000
    read only = no
    map to guest = bad user
    username map = /etc/samba/usermap.txt

[share]
   path = /home/share
   public = yes
   writable = yes
   browsable = yes
   create mask = 0644
   directory mask = 0755
   hide files = _recycle

   vfs object = recycle
   recycle:repository = _recycle/%U
   recycle:keeptree = Yes
   recycle:touch = Yes
   recycle:versions = Yes
   recycle:maxsize = 0
   recycle:exclude = Thumbs.db *.tmp *.temp *.o *.obj ~$* *.~?? .DS_Store
   #recycle:exclude_dir = /tmp
   #recycle:noversions = *.doc
```

* 全てのリモートユーザーをサーバーの `ubuntu` ユーザーに割り当てる。

```go:/etc/samba/usermap.txt
ubuntu = *
```


## sambaサーバーのプロトコルバージョン指定

* samba 4以降対応。samba3はまた別。

```yaml
[global]
...
   server min protocol = NT1
   server max protocol = SMB3
```
uGUIのボタンにスクリプトからイベントを設定する方法


uGUIのボタンなどにスクリプトでイベントを設定したくなったので方法をメモ。

```c#
// uGUIのボタンなどにイベントを設定するスクリプト例
using UnityEngine;
using UnityEngine.EventSystems;
using System.Collections.Generic;

public class HogeScript : MonoBehaviour {
    void Start() {
        var trigger = gameObject.AddComponent<EventTrigger>();
        trigger.delegates = new List<EventTrigger.Entry>();
        
        // PointerEnter(マウスオーバー)時のイベントを設定してみる
        var entry = new EventTrigger.Entry();
        entry.eventID = EventTriggerType.PointerEnter; // 他のイベントを設定したい場合はここを変える
        entry.callback.AddListener( (x) => { Debug.Log("Enter!"); });
        trigger.delegates.Add(entry);
    }
}
```

この方法で追加するとInspectorに一部表示されませんが動作します。
ネットワーク設定がされない場合の対処法

* CentOS6 64bitのサーバをOpenVz化している最中に遭遇した。
  * [物理サーバをコンテナ化 (OpenVzの例) - Qiita](http://qiita.com/tukiyo3/items/a7ea4d21e6b2da3e200f)

## 参考

* [vzrestore from Ubuntu to CentOS breaks networking](http://forum.proxmox.com/threads/18104-vzrestore-from-Ubuntu-to-CentOS-breaks-networking)

## エラー例

```bash:エラー例
# vzctl start 269
Warning: distribution not specified in CT config, using defaults from /etc/vz/dists/default
Starting container ...
Container is mounted
Adding IP address(es): 192.168.100.88
/bin/bash: line 504: /etc/network/interfaces: No such file or directory
grep: /etc/network/interfaces: No such file or directory
/bin/bash: line 517: /etc/network/interfaces: No such file or directory
/bin/bash: line 540: /etc/network/interfaces: No such file or directory
/bin/bash: line 547: /etc/network/interfaces: No such file or directory
cp: cannot stat `/etc/network/interfaces': No such file or directory
/bin/bash: line 571: /etc/network/interfaces.bak: No such file or directory
mv: cannot stat `/etc/network/interfaces.bak': No such file or directory
Setting CPU units: 1000
Setting CPUs: 1
Container start in progress...
```

## 原因

/etc/pve/nodes/server名/openvz/ContainerID.conf
にてコンテナと`OSTEMPLATE`値が正しくない場合発生する。
(OSTEMPLATEが空だとdebianが指定される。)

## 対処

* [Download/template/precreated - OpenVZ Linux Containers Wiki](https://openvz.org/Download/template/precreated)からOS Templateをダウンロードしておく。

```bash:
OSTEMPLATE="centos-6-x86_64-minimal.tar.gz"
```

これでネットワーク設定が行われエラー無く起動する。
Flashair+Arduinoでサーボを遠隔操作する

最近のブラウザはなんか音声認識とかもできて色々すごいです。自作の電子工作もとりあえずブラウザにさえ繋げてしまえばUIの面では一気に道が広がります。というわけで、Arduinoをwifiに繋ごうと思ってスマートな方法を探していたらFlashairに行き当たりました。
[Flashair-developers](https://flashair-developers.com/ja/)というサイトに開発者用の情報がまとまってます。
また、Arduinoによる使い方の[チュートリアルがあります](https://flashair-developers.com/ja/documents/tutorials/arduino/1/)。


今回はこれを使ってスマホのブラウザからArduinoを操作しようというわけです。

[必要な物]
[Arduino Uno R3](https://www.switch-science.com/catalog/789/)
[SD Card shield V4.0](http://www.seeedstudio.com/wiki/SD_Card_shield_V4.0)
Flashair
サーボモーター[TowerPro SG90](http://www.amazon.co.jp/Tower-Pro-Umemoto-LLP-%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%82%B5%E3%83%BC%E3%83%9C/dp/B008YE5T8C)

[構成]
　スマホ <----> Flashair <----> Arduino <----> サーボモーター

***

[FlashairとArduinoで通信する]
Flashairの端子は3つのGPIOとして使えるそうでそこがマニアックということで話題になることが多いのですがサーボの回転角の値を受け渡ししたいので３ピンでは足りません。
そこで今回は共有メモリ領域を使います。
共有メモリは、SDカードの拡張レジスタ領域の0x1000から512バイトに割り当てられていて、ArduinoからはiSDIOでread/writeでき、スマホからはFlashairのweb APIを叩くことでread/writeできます。

・iSDIOライブラリの準備
SDカードとArduinoはiSDIOというプロトコルを使えば通信できるそうです。iSDIOを使う方法は[このページ](https://flashair-developers.com/ja/documents/tutorials/arduino/2/)で解説されてます。下の方にはiSDIOを使うためのArduinoのライブラリがあるので、それを使います。

[コード]
https://gist.github.com/kaitoh/06d5e50089d9d50cb780
 - flashair_servo_ctrl.ino: Arduinoに書き込むコードです。
 - index.html: Flashairに保存しておくファイルです。スマホからこのファイルにアクセスするとサーボを操作できます。

![写真 2015-03-19 7 06 18.jpg](https://qiita-image-store.s3.amazonaws.com/0/7160/433557d6-f3de-400c-0344-83309f0ffe32.jpeg)
たぶんchromeのspeech API使えば音声制御にするのも簡単にできると思います。
realm-javaでRealmProxyが生成されない

RealmObjectから継承したクラス内で、ゲッター、セッターと認識出来る関数名があったとき、それに対応したメンバ変数が存在しないと、そこでアノテーションの処理が終了してしまうようです。
例えば、

```java

class User extends RealmObject{
...


public boolean isCoach(){
  return true
}
```
のようなものがあって、

```java

private boolean coach
```
と宣言されていなかった場合、実行時に
`Could not find the copyOrUpdate() method in generated proxy class for io.realm.UserRealmProxy: Annotation processor may not have been executed.`
のようなエラーが出ます。

発生する場合、ビルド時のgradleのメッセージに警告が出るのですが、ビルドは止まりませんでした。
raspi-config 2015-02-16-raspbian-wheezy メモ

2015-02-16-raspbian-wheezy

$sudo raspi-config
で設定可能な項目

#1 Expand Filesystem
**容量拡張**
df-hで容量確認できます
1 Expand Filesystem
ok
リブート後に変更される

#2 Change User Password
**パスワード変更**
2 Change User Password
Ok
パスワードを二回入力
ok

#3 Enable Boot to Desktop/Scratch
**起動時GUIからにする場合**
3 Enable Boot to Desktop/Scratch
Desktop Log in as user 'pi' at the graphical desktop

#4 Internationalisation Option
**I1 日本語化**
4 Internationalisation Option
I1 Change Locale
ja_JP.UTF-8 UTF-8　を選択(スペースキーで選択)しEnter
ja_JP.UTF-8

**I2 タイムゾーン設定**
4 Internationalisation Option
I2 Change Timezone
Asia
Tokyo
**I3 キーボード設定**
4 Internationalisation Option
I3 Change Keyboard Layout

*Generic 105-key(Intl)PC* 
Other
Japanese
Japanese(OADG 109A)
The default for the keybord layout
No compose key
yes(Ctrl+Alt+BackspaceでX windowを終了するか)

*Generic 101-key PC*
Other
japanese
japanese
The default for the keybord layout
No compose key
yes(Ctrl+Alt+BackspaceでX windowを終了するか)

#5 Enable Camera
**カメラ**
5 Enable Camera
Disable(もってないから)

#6 Add to Rastrack
**ラズベリーパイをやってる人マップ(Rastrack)にこのパイも追加する**
6 Add to Rastrack
いまは触らなくて良い
ここで登録した人の位置がみえるっぽい
http://www.raspberrypi.org/add-your-raspberry-pi-to-the-rastrack-map/

#7 Overclock
**オーバークロック設定**
7 Overclock
いまは(ry

#8 Advanced Options
**A1 HDMI表示の時まわりの黒い部分も表示する**
8 Advanced Options
A1 Overscan
Disable
アナログで使うときはEnableにする

**A2 ホスト名の設定**
8 Advanced Options
A2 Hostname

**A3 GPUにどれだけメモリさくか**
8 Advanced Options
A3 Memory Split
いまは(ry

**A4 SSH有効化**
8 Advanced Options
A4 SSH
Enabled

**A5 デバイスツリー**

**A6 SPI**

**A7 I2C**

**A8 Audio**

**A9 この設定メニュー自体をアップデートするか**

#9 About raspi-config
**この設定について**
Procfileは.confで短くできるが、ポート指定だけは必要っぽい

　タイトルのまんまです。

# Procfile長過ぎ問題

　Heroku + play + postgresql するためには[Procfileを使う必要があると言われています](https://www.playframework.com/documentation/2.3.x/ProductionHeroku) (環境変数で頑張れば動くような気もしますが検証はしません)。

> Then create a new file in your project’s root directory named Procfile (with a capital “P”) that contains the following (substituting the myapp with your project’s name):

> ```
> web: target/universal/stage/bin/myapp -Dhttp.port=${PORT} -DapplyEvolutions.default=true -Ddb.default.driver=org.postgresql.Driver -Ddb.default.url=${DATABASE_URL}
> ```

　しかし、Procfileを使うにしても、`-Dapply...` とか `-Ddb` というような文字列はあまり見た目がよろしくありません。
　[ドキュメントにもある](https://www.playframework.com/documentation/2.3.x/ProductionConfiguration)方法を使って、別のファイルに書いておくのがよさそうです。

　まずテスト用の設定を書いてから、herokuでのみ適用したい設定を別ファイルに書いてみます。

```application.conf
# 用意したpostgresqlの設定を書きまくる
# ただし「設定が面倒くさいからローカルはh2で済ませる」等も可能
db.default.driver = org.postgresql.Driver
db.default.url = "jdbc:postgresql://localhost:5432/hogedb"
db.default.user = ${?DATABASE_USER}
db.default.password = ${?DATABASE_PASSWORD}
slick.default = "models.*"

# ほかにもいろいろ
```

```heroku.conf
# インクルードしないと上書きされず単に無視される?
include "application.conf"

# 以下、Heroku + postgresqlのための設定

# なるべくお金を払いたくないのでpostgresqlにしましょう
db.default.driver = org.postgresql.Driver
# 必要な情報は環境変数なので、毎回この設定でOK。地味に楽
db.default.url = ${DATABASE_URL}
# 「DBエボリューションでオラワクワクしてきたぞボタン」が出ないよう設定
applyEvolutions.default=true
```

　ここまで用意することでProcfileを短くできます。

```Procfile
web: target/universal/stage/bin/hogesoft -Dhttp.port=$PORT -Dconfig.resource=heroku.conf
```

　以上です。

# なおポート指定を外すと詰む

　一見したところ `-Dhttp.port=$PORT` もheroku.confに書けそうな気がします。ところがこれをProcfileから外してみると、エラーが出て何も動かなくなります。
　ここがよく分からず、数時間ほど延々とpushして試行錯誤する羽目になりました。

　ポートが分からないと繋がらない(?)と考えれば、至極当然という気もしますが… 詳しいことはよく分かりませんでした。
　Procfile関連の仕様については[こちら](https://devcenter.heroku.com/articles/play-support)参照。
AndroidStudio で文字列選択した状態で「'」とか「"」ってやると、選択領域を囲ってくれるようにする設定

# AndroidStudio で文字列選択した状態で「'」とか「"」ってやると、選択領域を囲ってくれるようにする設定

忘れがちなのでメモ。

Preferences ＞ Editor ＞ Smart Keys にて 「Surround selection on typing quote or brace」 にチェックをいれる
vagrant + coreos + dockerメモ

## 参考

http://qiita.com/gom/items/0bfc1925a7fddfcdfdaf

## coreosのvagrant環境構築

```
$ git clone https://github.com/coreos/coreos-vagrant.git
$ cd coreos-vagrant
$ vagrant up
$ vagrant ssh
```

## docker file

```
FROM ubuntu:latest

WORKDIR /worker
CMD ["./exec.sh"]
```

Fromでubuntu最新版指定
Workdirで作業するディレクトリ指定
Cmdでrun時に実行される処理を指定

## docker build

### とりあえずタグとか気にせずシェル化

```
$ cat build.sh
#!/bin/sh
docker build -t shinofara/ansible:0.1 .
```

### ビルド実行

```
$ sh build.sh
Sending build context to Docker daemon  5.12 kB
Sending build context to Docker daemon 
Step 0 : FROM ubuntu:latest
 ---> 2103b00b3fdf
Step 1 : WORKDIR /worker
 ---> Using cache
 ---> ae642290bcb8
Step 2 : CMD ./exec.sh
 ---> Using cache
 ---> 0d3484140c1b
Successfully built 0d3484140c1b
```

二回目以降なので、キャッシュされて早い

この時点では、workerは存在しない。よってcommandファイルも存在しない

## docker run

### とりあえずタグとか気にせずシェル化

```
$ cat run.sh
#!/bin/sh
docker run \
  -v `pwd`:/worker \
  --rm shinofara/ansible:0.1
```

-vでローカルのディレクトリを/workerとしてマウント  
めんどくさいので現在のディレクトリをマウント
ここに実行用のexec.shを置いてる

### run時に実行する処理

```shell-session
$ cat exec.sh
#!/bin/sh
date
```

とりあえず日付だすだけ

### 実行

```
$ sh run.sh
Wed Mar 18 17:45:19 UTC 2015
```

## 最後に

とりあえずやってみただけですが、これをうまく使えば毎回クリーンな環境でなんやかんやしたりできる。かな。次はテストとか何かやってみる
巨大 Pull Requestを避けるための9つのポイント


## 巨大 Pull Requestの問題
* レビューに時間がかかる、疎かになる
    * テストとコードを照らし合わせが大変
* 本番で問題が起きたときに、問題の切り分けがしにくい
* masterとの差分を反映する際のレビューが難しくなる
* 一つのミスが大きなfeatureブランチになるきっかけになることも
* 大きくなるとmergeに時間がかかり、ますます大きくなる

## どのようにして大きなPRを避けるか
### PRが大きくなりそうな時は事前に相談する
* 作業しているときに、変更点がたくさん必要になったときは早めにレビューアーに相談する
* 複数人で開発しているときは、しっかり話す時間をとる
* PRが大きくなる問題は後で変更するのが難しいので、最優先で相談するとよい。近くにいるなら直接相談する。いないときはチャットで相談する。

### モデルだけの変更とテストを書く
* なにか機能の変更がある時に、まずモデルからレビューする
* 実際にどういう変化があるのか一番分かりやすいため
* モデルは、変更した箇所以外からも参照されることが多く、差分だけでなく、コード全体を見る必要がある
* なにを変更したのか、それに対してどのようなテストを書いたかをPRのdescriptionに書くとより分かりやすい
* viewやcontrollerのコードを含めないことで、本番への影響が少なく、レビューもしやすくなる
* 既存のscopeやmethodを変更する場合は、自分でもなにが影響しているか必ずみる方がいい

### 似たような操作で既存のコードをたくさん変更する場合は、それだけのPRを作る
* 似た操作をたくさんのファイルに対して行うコードと他の変更が混ざるとレビューが非常に困難になる
* レビューする際に確認することは、変更がすべてに適応されているのか。それぞれ同じように変更しても大丈夫なのかを見ている。
* スコープのデフォルトを変更するなど、1つの操作で影響が大きい場合も一つのPRにするほうがよい
* よく使う文言を変更する場合も、変更箇所が増えやすくできるだけ別PRにする

### 作業中にバグを見つけたとき
* バグ専用の別のPRを用意する
* 基本は、バグのPRがmergeされた後に、作業用のブランチに取り込む
* バグが作業に関係のある場合は、プライオリティをあげてレビューしてもらう
* バグが作業に関係のない場合は、バグを作業用のブランチに取り込まない

### コードの記法などの間違いを直したいとき
* 記法変更のためのPRを作る
* 同じように間違えている箇所をまとめて治すのがよい
* コード記法についての議論と作業の議論が同じ場所で議論することになる、作業の内容以外の理由でmergeできない可能性もある

### 動作は変わらないが、既存のコードに影響がある場合
* 見た目の操作は同じだが、ある条件を含んだときのみに表示させる
* 例えば、もともとはただ投稿するだけだったが、下書き機能を追加する場合。下書きを機能(viewとcontroller)は実装していないため
* 新しく作られた状態のモデルが生成されても、同じように動作するか確認するテストがあるとベスト

### Viewの変更を出す場合
* 新しい機能だけのViewの場合は、動線を用意せずにリリースする(viewの改善を詰めやすいし、必ず詰めることになるから)
* mergeする際に、既存のコードへの影響が減るメリットもある
* 新しい機能を本番環境で使ってみることができる、パフォーマンスの問題や社外の人に使ってもらうこともやりやすい

### 外部サービスや新しいサーバーを利用する場合
* 外部サービスへの接続とそれを利用するクラスの変更のみでまとめるのがよい
* レビューする際に、問題を分離出来る、確認項目もしやすい

### フラグをつかって機能の出し分けをする
* 動線を無くすことが難しい場合に本番環境には影響がでないように、隠しオプションを利用する
* 影響が大きい機能リリースの時は利用する

## 最後に
解答が難しいテーマですが、自分だったらどのようなことを考えてどうアプローチするかまとめてみました。
特に、自分だけの問題でなく、チーム全体の問題なので、「事前に相談する」ってのは大切だと思いました。
MongoDB 3 のストレージAPIとは

MongoDB 3の大きな変更点の一つとして、ストレージAPIの導入というものがある。調べたのでメモしていく。

### 概要

ストレージAPIの思想は、クエリを受け付けたりする部分と、データを永続化する部分（ストレージ）の間に、APIを設けて、
ストレージ部分を簡単に交換できるようにしたもの。

これにより利用者はストレージをより良いものに差し替えたりできるし、ストレージ開発者にとってはMongoDBのクエリ受付部分がストレージのテストドライバになる。

MongoDB 3 では以下の二つのストレージが利用可能である。

* 従来のmmap()システムコールベース(MMAPv1とよばれる)
* WiredTiger

### 実装

ストレージAPIの実装は、ソースコードを見るとすぐにわかった。APIの実態はC++のインターフェースである。
以下のソースはストレージエンジンのインターフェースである

インターフェースのソースコード（抜粋）
https://github.com/mongodb/mongo/blob/v3.0/src/mongo/db/storage/storage_engine.h

```cpp
namespace mongo {
    /**
     * The StorageEngine class is the top level interface for creating a new storage
     * engine.  All StorageEngine(s) must be registered by calling registerFactory in order
     * to possibly be activated.
     */
    class StorageEngine { 
    public:
    class Factory { /*ストレージエンジンインスタンスのファクトリ*/
        public:
        virtual ~Factory() { }
        virtual StorageEngine* create(const StorageGlobalParams& params,
                const StorageEngineLockFile& lockFile) const = 0;
        ...
    virtual void finishInit() {}   /*ストレージエンジンで実装すべき関数*/
    virtual RecoveryUnit* newRecoveryUnit() = 0; /*ストレージエンジンで実装すべき関数*/
    virtual void listDatabases( std::vector<std::string>* out ) const = 0; /*ストレージエンジンで実装すべき関数*/
    ...
```

MMAPv1やWiredTigerはこのインターフェースを実装している

MMAPv1の実装のソースコード（抜粋）
https://github.com/mongodb/mongo/blob/v3.0/src/mongo/db/storage/mmap_v1/mmap_v1_engine.h

```cpp
    class MMAPV1Engine : public StorageEngine { /*継承している*/
    public:
        MMAPV1Engine(const StorageEngineLockFile& lockFile);
        virtual ~MMAPV1Engine();

        void finishInit();

        RecoveryUnit* newRecoveryUnit();

```
### 他のストレージエンジン

ObjectRocketではROCKSDBというものも簡単に利用できるようだ。

http://objectrocket.com/blog/how-to/experimental-pluggable-storage-engines-in-mongodb

ちなみにObjectRocketはRackspace社が出している、MongoDB専用にチューニングされたDBサービスだったはず。
Sassインストール解説 初心者向け


今回はインストール手順を出来るだけ簡潔で丁寧に解説します。
初心者向けと言うこともあり、必要なものが必要な理由は特に説明しません。
例えばなぜRubyがいるのかとか、Rubyが何なのかとかは説明しません。
手順だけを解説していきます。

## 環境
Windows8.1
Ruby 2.2.1
Sass 3.4.13 

## インストール手順
### Rubyのインストール
下記のHPにアクセスし、インストーラーを入手します。
http://rubyinstaller.org/downloads/

Ruby 2.2.1
Ruby 2.2.1 (x64)
のように2種類リンクがあると思いますが、上が32bitのWindows向け。
下のx64とついている方が64bitのWindows向けです。

もしどっちかわからない場合は、[Windows]キーと[x]キーを同時押しして、
出てくるメニューから「システム」を選択します。
表示された画面に「64ビット オペレーティングシステム」等の記載があるので
そちらで確認してください。

ダウンロードしたファイルを実行します。
日本語→同意する→「Rubyの実行ファイルへ環境変数PATHを設定する」にチェック→インストール
これでRubyのインストールは完了です。

無事インストール出来たか確認しましょう。
[Windows]キーと[x]キーを同時押しして、メニューから「コマンドプロンプト」を選択します。
黒い画面が出てきたら、`ruby -v`と入力してエンターキーを押します。
「ruby 2.2.1～」のようなメッセージが出たら成功です。

### Sassのインストール
引き続き「コマンドプロンプト」を使用します。
`gem sass install`と入力してください。
成功すればそのままインストールされ、画面にSuccessfullyとかinstalledと出ます。

成功した方はお疲れ様でした。
インストールは完了してます。

もしERRORのようなメッセージが出た方は対処法を別で書きます。
ちなみに僕はエラーになりました(´・ω・`)

Sassのインストールでエラーになった
http://qiita.com/cro46/items/d8f140b2178af56de7e3

次回はGulpを使って実際にSassを使ってみます。
C言語の基礎 (ポインタ) NO.5 備忘録

メモリ確保関連の処理を行うには、stdlib.hをincludeして、その中に宣言されている関数を利用する。

malloc:メモリを確保
free  :確保したメモリが不要になった時に解放

#malloc関数とは
由来: memory allocation(割り当てる)
メモリを確保するには、引数に確保したいメモリのサイズ(バイト数)を指定して呼びだす。
うまくいくと、確保されたメモリの先頭アドレス(ポインタ)が戻り値として返してくれる。
失敗すると、NULLが戻り値になる。

戻り値がNULLでなければ、戻り値のポインタのアドレスから指定したサイズ分のメモリを自由に利用できる。
戻り値の型「void *」
ポインタ = malloc(サイズ)

#void *とは
C/C++のポインター変数は、例えばchar *ならchar型変数を指すポインターであり、int *ならint型変数を指すポインターである。
対してvoid *は、void型変数というものは存在していない特殊なもので、ポインターではあるがその型は__指定されていない。__

void *型のポインターは、代入はできるが参照ができず、参照しようとすればコンパイル時点でエラーとなる。
この型で受け取ったものを参照するときには別途char *型などに型キャストせねばならない。


#free関数
malloc関数で不要になったメモリを解放して新たな確保で再度利用できるようにしなければならない。
書式: void free(void *ptr)

malloc関数とfree関数は必ずペアで処理する。

```c++:test.cpp
  int *piData = NULL;   // 確保したメモリエリアのポインタを格納する変数の宣言
  
  CCLOG("*piDataの値:%p",piData); // 定義直後のポインタの値を表示
  
  piData = (int*)malloc(sizeof(int)); // int型のサイズ分メモリを確保 c++なのでキャストする必要がある
  
  if ( piData == NULL )
  {
    return -1;  // 確保に失敗したので何もせずにおわる
  }
  
  CCLOG("piDataの値:%p",piData);  // 確保直後のポインタの値表示
  
  *piData = 500;  // 確保したエリアに500を代入 *が付いているのでポインタが示す変数になる
  
  CCLOG("piDataポインタの中身:%d",*piData);
  
  free(piData); // メモリエリアの解放
```
実行決定
cocos2d: *piDataの値:0x0
cocos2d: piDataの値:0x17400e330
cocos2d: piDataポインタの中身:500

#他のメモリ確保の関数

__calloc関数__
ポインタ = calloc(データ個数,データ1つのサイズ);

(int*)malloc(sizeof(int))
(int*)calloc(1,sizeof(int))

この2つは等しい。

__realloc関数__
新しいエリアのポインタ = realloc(最初のエリアのポインタ、新たなサイズ);
確保するメモリのサイズを変更できる。
Mac 版 OmegaT で，Microsoft Translator API を使用する


## つまり

OmegaTの`OmegaT.app/Contents/MacOS/OmegaT.sh`を編集する。

## 経緯

公式サイトに[OmegaT 技術情報：Macintosh での MS Translator の設定](http://www.omegat.org/ja/howtos/ms_translator_mac.html)という文章があり、`plist.info` を更新せよと書いているが `<key>Properties</key>` を見つけることができない。いろいろ試すがうまくいかず、下記のメッセージが表示されてしまう。
 
```機械翻訳に表示されるメッセージ
Microsoft Translator のクライアント ID または顧客の秘密は省略できません。OmegaT 取扱説明書を参照してください。
<Microsoft Translator>
```

そして、さんざん検索したあげく、やっと見つけたのが次のページ。
[How and where to insert Google Translate API key in OmegaT 3.1.3 (Mac OSX 10.9)?](http://stackoverflow.com/questions/24971250/how-and-where-to-insert-google-translate-api-key-in-omegat-3-1-3-mac-osx-10-9) 
これに従って修正してやっと動くようになった。

## Microsoft Translator API 使用手続き

- Microsoft Azure Marketplace にログインし，サブスクリプションを登録する。(2,000,000 文字/月の無料プランで通常は充分。)
https://datamarket.azure.com/dataset/bing/microsofttranslator
- アプリケーションを登録し，`クライアントID`と，`顧客の秘密`を控えておく。
https://datamarket.azure.com/developer/applications


## 修正方法

- OmegaT 実行ファイルを右クリック(Command+クリック、2本指タップ)し、[パッケージの内容を表示]を選ぶ。
- `OmegaT.app/Contents/MacOS/OmegaT.sh`を編集する。

```Bash:OmegaT.sh修正前
# Microsoft Translator credentials
#MS_CLIENT_ID="-Dmicrosoft.api.client_id=xxxxx"
#MS_CLIENT_SECRET="-Dmicrosoft.api.client_secret=xxxxx"
```

- MS_CLIENT_ID= と MS_CLIENT_SECRET= のコメントの ＃ を除去し、xxxxx の部分に，`クライアントID`と`顧客の秘密`を設定する。

```Bash:OmegaT.sh修正後
# Microsoft Translator credentials
MS_CLIENT_ID="-Dmicrosoft.api.client_id=クライアントID"
MS_CLIENT_SECRET="-Dmicrosoft.api.client_secret=顧客の秘密"
```
- 修正した`OmegaT.sh`ファイルを保存する。

## 使用方法
- OmegaT を起動する。
- [設定]→[機械翻訳]→[Microsoft Translator]をチェックする。
- 文節を選択すると、機械翻訳ウィンドウに翻訳結果が表示される。
- `Command+M`を押すと，機械翻訳の結果が訳文に設定される。
interface{} な変数を型が決まっている関数の引数にする

Goのプログラミングでは、どんな型の引数でも受け取れる関数を作るのに`interface{}`を使います。

```go
func v(x interface{}){
  fmt.Println(x)
}

// v(1)     => 1
// v("abc") => abc
```

しかし、`interface{}`型な変数を、たとえば`int`を引数にとる関数に渡すと、エラーになります。

```go
func main(){
  var x interface{} = 1
  fmt.Println( add2(x) )
  //=> cannot use x (type interface {}) as type int in argument to add2: need type assertion
}

func add2(n int) int{
  return n + 2
}
```

このようなことをしたい場合は、castするか、switch式を使うことで、型を変換して関数に渡すことができます。

```go
func main(){
  var x interface{} = 1
  var y interface{} = 5

  // cast
  if xi, ok := x.(int); ok{
    fmt.Println( add2(xi) ) //=> 3
  }

  //switch
  switch yi := y.(type){
  case int:
    // ここに入ってきた時は、yiの型はintとして扱われる
    fmt.Println( add2(yi) ) //=> 5
  case int64, int32, int8:
    // ここに入ってきた時は、yiの型はint64, int32, int8のうち適切な型が選ばれている
  }
}

func add2(n int) int{
  return n + 2
}
```

パッケージ的なものを自作していると、

* どんな型の変数も渡せる
* 特定の型の関数を渡せる

ような関数が欲しくなることがあります。具体的には以下のように使える関数です

```go
func exec(
  v interface{}, // value
  f interface{}, // valueを引数に実行するfunc
) interface{} {
  fv := reflect.ValueOf(f)
  if fv.Kind() != reflect.Func{
    panic("2'nd argument is not func.")
  }
  rv := reflect.ValueOf(v)
  return fv.Call([]reflect.Value{rv})[0]
}

//　以下のように使える
exec(5, func(i int) int{ return i * ( i + 1) })
exec("Tom", func(s string) string{ return "hello! " + s })

// 第一引数と、第二引数の引数の型が違うと、buildはできるが実行時にエラーが起きる
exec("Tom", func(i int) int{ return i * ( i + 1) })
```

build時に、エラーを出してほしいのですが、なかなかそうもいかない…

# 参考

* [Go言語におけるinterface{}とリフレクションを使ったパターン - Qiita / tenntenn](http://qiita.com/tenntenn/items/a06b6b178959e3a63196)
* [#golang リフレクションを使って、キャストするには？ - Androg](http://kwmt27.net/index.php/2013/10/09/how-to-cast-with-reflect-of-golang/)
bson.objectidを使ってmongoDBのデータ更新をするメモ

bottle.pyとmongoDBの学習継続中。
mongoDBのcollectionからObjectIDでdocument選択してデータを更新しようとして、エラーとの格闘に時間かかったのでメモっておく。

mongoDBはJSONと見せかけてBSON（理解できてない）。
BSONのことはbsonに任せる。

できたのはこんな感じ。

```py:app.py

from pymongo import MongoClient
from bson.objectid import ObjectId

@app.route('/count', method='POST')
def count():

    myid = request.forms.get('myid')

    conn=pymongo.Connection()
    db=conn.mydb
    db.mycol
    mydata=db.mycol.find_one({"_id":ObjectId(myid)})
    mydata['count'] += 1
    db.mycol.save(mydata)

    return redirect('/main')

```

問題解決の参考はここ。
http://stackoverflow.com/questions/19731153/pymongo-find-by-id-in-subdocuments


* 現在地点メモ

mongoDBで躓くのは大体bson絡み。
stackoverflowで調べて呪文書き写している状態。
ฅ(・ω・ฅ){ QiitaScouter App の GitHub の README に Heroku Button を設置する } #heroku

## <i class="fa fa-cubes" style="font-size:1em;"></i> 概要
QiitaScouter App の GitHub の README に Heroku Button を設置します
## <i class="fa fa-cube" style="font-size:1em;"></i> app.json
Heroku ボタンを作成するには GitHub の対象リポジトリの root に app.json を配置します。
app.json には、アプリケーションの名前、説明、環境変数や AddOn などを指定します。
json のスキーマについては、 <i class="fa fa-external-link" style="font-size:1em;"></i> [Heroku 公式ドキュメント app-json-schema](https://devcenter.heroku.com/articles/app-json-schema) を参照。

今回設定した内容は以下。

~~~json
{
  "name": "QiitaScouter App Sample",
  "description": "Qiita Scouter.",
  "keywords": [
    "qiita",
    "scouter"
  ]
}
~~~

## <i class="fa fa-cube" style="font-size:1em;"></i> README にデプロイボタンを配置
README に以下を追記します

~~~html
<a href="https://heroku.com/deploy">
  <img src="https://www.herokucdn.com/deploy/button.png" alt="Deploy">
</a>
~~~

## :running: デプロイを実行
### GitHub の README を表示
![heroku_button1.png](https://qiita-image-store.s3.amazonaws.com/0/43480/ddbe4119-c2ad-3344-827d-3fda82ee53a8.png)

### Deploy ボタンを押下すると、 Heroku へ
アプリケーション名を入力し、Deploy を押下します

![heroku_button2.png](https://qiita-image-store.s3.amazonaws.com/0/43480/672a306c-bff7-0adc-f7fc-8effbcb4bf44.png)

### しばらくするとデプロイが完了します
![heroku_button3.png](https://qiita-image-store.s3.amazonaws.com/0/43480/a9b021de-51e0-83d0-78da-4073ecb37785.png)

### ブラウザからアプリケーションを確認
![heroku_button4.png](https://qiita-image-store.s3.amazonaws.com/0/43480/cb76a6f3-0e8a-47c8-7a62-06414eb2ffdf.png)

### Qiita Scouter の動作確認
![heroku_button5.png](https://qiita-image-store.s3.amazonaws.com/0/43480/ab0a09f6-e53b-e441-e578-37c42df1a129.png)

## <i class="fa fa-flask" style="font-size:1em;"></i> 試したい人へ 
* Heroku の sign up がまだなら sign up する
* <i class="fa fa-external-link" style="font-size:1em;"></i> [qiita-scouter-app GitHub](https://github.com/tbpgr/qiita-scouter-app) を Fork
* Deploy ボタンを押す
* Heroku の New App 画面で好きなアプリケーション名をつける
* 動作確認！

これだけ。

## :books: 外部資料
* <i class="fa fa-external-link" style="font-size:1em;"></i> [Heroku 公式ドキュメント heroku-button](https://devcenter.heroku.com/articles/heroku-button#requirements)
* <i class="fa fa-external-link" style="font-size:1em;"></i> [Heroku 公式ドキュメント app-json-schema](https://devcenter.heroku.com/articles/app-json-schema)
* <i class="fa fa-external-link" style="font-size:1em;"></i> [qiita-scouter-app GitHub](https://github.com/tbpgr/qiita-scouter-app)
FFmpegとImageMagickを使ってgif画像をつくる方法

### **背景・経緯**
動画のサムネイルとかをgif画像にできたらちょっとうれしいかもと思ってFFmpegとImageMagickをつかってgif像をつくってみました。

### **準備**
- インストール

まずはFFmpegとImageMagickのインストール

```
$ brew install ffmpeg
```
```
$ brew install imagemagick
```

### **実装**
１. FFmpegをつかってpngに分解。

```
$ ffmpeg -i [入力ファイル] -an -r [フレームレート] -s [画像サイズ] [出力ファイル]
```

※ オプションは以下の通りです。
-i  入力ファイルを指定
-an 音声を出力しない
-r  フレームレートを指定
-s  サイズを指定

実行例)

```
$ ffmpeg -i input.mp4 -an -r 15 -s 320x240 tmp/%05d.png
```


２. ImageMagickをつかってpngからgifを生成。

```
convert tmp/*.png output.gif
```


以上、意外に簡単でした！
css 入門

cssレイアウトを考える際の概念として，
padding, border, marginを考える必要がある。何も指定しなければ0px

![image](https://qiita-image-store.s3.amazonaws.com/0/20721/7abc7e84-476a-3dc6-9265-ee59c03017b7.png)

ブロックcontainerの中にブロックcontent-topとブロックcontent-bottomがあるhtmlについて考える。

```html
<html>
  <head>
  	<link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>
    <div id="container">
      <div id="content-top">
      </div>
      <div id="content-bottom">
      </div>
    </div>
  </body>
</html>
```

#width

#固定値
px, emなどの単位で指定可能

#相対値
width:x%: 該当要素の親要素の値に対しての長さの比x%を指定.
width:auto: width: 100%を指定した時と挙動が似るが，padding-x:a b;を指定した場合，親要素の長さ-(a+b)になる。

サンプルcss

```
#container{
  background-color: blue;
  width:50px;        //要素の幅
  height:100%;       //ブラウザの表示部の高さ
  padding: 0px 10px; // 左右に10pxパディングこのブロックの幅は width + padding*2 = 70pxになる
}

#content-top{
  background-color: red;
  padding: 0px 10px; //左右に10pxのパディング
  width:auto;
  height:50%;
}


#content-bottom{
  background-color: yellow;
  padding: 0px 10px;　//左右に10pxのパディング
  width:100%;
  height:50%;
}
```
結果

![image](https://qiita-image-store.s3.amazonaws.com/0/20721/d9e5e429-ec6e-df3b-f288-e92ed93aad27.png)