OmniAICreator/Qiita-1.07M huggingface dataset:
x2goとXubuntuでつくるお手軽VDI環境


# はじめに
いつでもすぐにつかえるLinuxデスクトップ環境がほしいなと思ったので、[x2go](http://wiki.x2go.org/doku.php/start)とXubuntuで構築してみました。

さくらのクラウドで試してますが、たぶんVPSでも他のサービスでもいけるとおもいます。


# なぜXubuntu?
x2goがサポートしているデスクトップ環境に制限があるためです。
http://wiki.x2go.org/doku.php/doc:de-compat

Xfceのほうが好みのためXubuntuにしましたが、Lubuntuでも大丈夫とおもいます。
※本当はKubuntuにしたかった。

# やりかた
## Xubuntuのインストール
Xubuntu 16.04 LTSのISOイメージをダウンロードします。
http://xubuntu.org/

インストールするときは日本語でインストールしちゃってください。

## x2goserverのインストール
インストール後、x2goserverをインストールします。
標準のリポジトリでは提供されていないので以下のppaを使います。
https://launchpad.net/~x2go/+archive/ubuntu/stable

インストール手順は記載されている手順そのままで問題ありません。

```
sudo apt-add-repository ppa:x2go/stable
sudo apt-get update
sudo apt-get install x2goserver x2goserver-xsession
```
インストールすると、自動的にx2goserverが起動されます。

#x2goクライアントのインストール
リモート接続を行うPCにx2goのクライアントソフトウェアをインストールします。
http://wiki.x2go.org/doku.php/download:start


## 設定
### x2goserver

#### 初期化

```
sudo x2godbadmin --create
```

#### 起動スクリプトの作成

作成しなくてもクライアントからxfceに接続することはできるのですが、環境変数がもろもろセットされず、メニューやアイコンが表示されないので、xfceを起動させるだけのスクリプトを作成しておきます。

``` /home/XXXXXX/.xfce4.sh
exec startxfce4
```

スクリプトには実行権限を付与しておきます。

```
chmod +x /home/XXXXXX/.xfce4.sh
```

### クライアント
接続先サーバとログイン名を設定します。

また、Session typeを`Custom desktop`にし、先ほど作成したスクリプトファイルを指定します。
※項目としてxfceもありますが、うまく動作しません。

![2016_04_29_15_12_15_Session_preferences_New_session.png](https://qiita-image-store.s3.amazonaws.com/0/36522/8609c2fd-00c2-c82d-a199-f2f5d34871e4.png)

Input/Outputタブでは、解像度の設定が可能です。とりあえずFullscreenにしておきます。

## 接続
パスワードを入力して接続すればXfceデスクトップ環境が表示されるはずです。


## インストール後
日本語の入力も特に問題なく行えるので、特にすることはありませんが、とりあえずテーマをNumixにしておきました。

![スクリーンショット_2016-04-29_14-28-33.png](https://qiita-image-store.s3.amazonaws.com/0/36522/012bdd25-c77f-d3b8-c941-d27833f341b3.png)


![スクリーンショット_2016-04-29_14-27-20.png](https://qiita-image-store.s3.amazonaws.com/0/36522/f82890d2-e33a-9b8b-d94b-533422620ea0.png)
autocompleteをめぐるChromeとの仁義なき戦い

サイトごとに一度入力したユーザ名やパスワードを記憶して、
次の入力時に自動で補完してくれるautocomplete機能。

だいたいの場面では便利な機能だが、
たまに自動補完してほしくないときもある。
この記事はChromeのautocompleteをoffにするために格闘した（2時間くらいの）記録になります。

※Chrome 50.0.2661.75 mで確認

# 1. まずは`autocomplete="off"`
input要素には`autocomplete`という属性があり、これのon/offで自動補完の制御ができるとのことだったのでまずやってみました。

```html:こんな感じ
<form action="/login" method="post">
  <input type="text" name="username" />
  <input type="password" name="password" autocomplete="off" />
  <input type="submit" />
</form>
```

これをChromeでやってみると、

![autocomp.png](https://qiita-image-store.s3.amazonaws.com/0/17731/082ce3d7-c55c-6cc2-ca9a-69644ed9bf51.png)

となり、`autocomplete="off"`は効かずふつうに自動補完されます。次。

# 2. ダミーの`<input type="password" />`
次に、ちょっと調べるとよく出てくる、ダミーのinput要素を配置する方法を試してみます。
実際にパスワードを入力してもらうinput要素の手前に`display: none`を指定したpassword入力欄を配置します。

```html:こんな感じ
<form action="/login" method="post">
  <input type="password" name="dummypass" style="display: none;" />	
  <input type="text" name="username" />
  <input type="password" name="password" />
  <input type="submit" />
</form>
```

パスワードを保存した状態でこのページを開くと、

![autocomp.png](https://qiita-image-store.s3.amazonaws.com/0/17731/082ce3d7-c55c-6cc2-ca9a-69644ed9bf51.png)

となり、やはり自動補完されてしまいます。次。

# 3. ダミーの`<input type="password" />`（改）
そこで次に`display: none`ではない方法で、ダミーのパスワード入力欄を非表示にして配置してみました。

```html:こんな感じ
<form action="/login" method="post">
  <input type="password" name="dummypass" style="visibility: hidden; top: -100px; left: -100px;" />
  <input type="text" name="username" />
  <input type="password" name="password" />
  <input type="submit" />
</form>
```

すると、

![autocomp.png](https://qiita-image-store.s3.amazonaws.com/0/17731/313f7513-3a55-0404-7d6b-7ada04ca1336.png)

おお！自動補完されなくなりました。
調べた限りになりますが、ダミーのパスワード入力欄に`display: none`や`width: 0`が指定されていると無視されてしまうようです。

# おわりに
ということで現状autocompleteをoffにするためには、
ダミーのパスワード入力欄を`display: none`以外の方法で非表示にして配置すると良いみたいです。
しかし、autocompleteをめぐってはautocompleteをoffにしたい勢とChromeとのいたちごっこらしく、
上記で紹介した方法もいずれ効かなくなってしまうかもしれません。

# 参考
- [ブラウザのパスワード保存と自動フィルイン - Cybozu Inside Out | サイボウズエンジニアのブログ](http://blog.cybozu.io/entry/7452)
プログラマの考えが・・身につく本より(Python)：ソートについて

[前回](http://qiita.com/teratera/items/86bc63456a7568fbb8aa)条件付き検索として**与えられた値に対し最大値**をもとめる問題(解答はありますが(汗)をPythonにて勉強がてら書いていますが、今回***ソート***を解説ありでC++コードが記載されており、いつも通りPythonにと思っていましたが、自分の力では直せず、ググって掲載されているコードに覚書として。

<h1>問題：クイックソート</h1>
C++の解答コード

```
int compareFunc(const void * voidA, const void * voidB) {
    int * intA = (int *)(voidA);
    int * intB = (int *)(voidB);
return *intA - *intB;
}

const int ARRAY_SIZE = 10;
int intArray[ARRAY_SIZE] = {87,28,100,78,84,98,75,70,81,68};
qsort(intArray, ARRAY_SIZE, sizeof(int), compareFunc);

qsort関数で実装されていました。
```

<h3>自分(拝借Code)与えられた配列をクイックソートで並び替えて返すPython</h3>

参考サイト→[クイックソート [Quick Sort]](http://www.codereading.com/algo_and_ds/algo/quick_sort.html)

```test35.py
#!/usr/bin/env python
#coding:utf-8

def quicksort(seq):             
    if len(seq) < 1:             #与えられたseq配列が1個未満ならそのものを返す
        return seq

    pivot = seq[0]               #pivotへseq配列[0]番目を代入　※再帰された時、一番左の配列番目がpivotへ割り当てられる
    left = []                    #left配列どんどん溜める為に作る「ここの理解が違うのかな」
    right = []                   #right配列　同じく

    for x in range(1, len(seq)): #seq配列の0を除く1から長さ分繰り返す
        if seq[x] <= pivot:      #最初にseq配列[1]がpivotと比較して小さいか？
            left.append(seq[x])  #小さい場合、pivot中心に配列の右left配列へ溜める
        else:
            right.append(seq[x]) #大きい場合、pivot中心に配列の左right配列へ溜める

    left = quicksort(left)       ###貯められたleft配列をleft変数へ代入している
    right = quicksort(right)     ###上記と同じ
    foo = [pivot]                ###※問題はここですが、pivotは再帰的に呼ばれている配列の[0]番目の値だから、それを集めたもの？？
    return left + foo + right

seq = [87,28,100,78,84,98,75,70,81,68]
mx = quicksort(seq)
print(mx)

・・・(ターミナル実行結果)
>>> from test35 import quicksort
[28, 68, 70, 75, 78, 81, 84, 87, 98, 100]
>>> 
```

あまりに理解に苦しんだので pivot代入部分にprint文で中にをチェックしつつ、***return部分***を変えながら実行して返って来るものを確認してみる

<h3>return leftのみにしてみる </h3>

```test35.py
#!/usr/bin/env python
#coding:utf-8

def quicksort(seq):
    if len(seq) < 1:
        return seq
    pivot = seq[0]
    print(pivot)
    left = []
    right = []
    for x in range(1, len(seq)):
        if seq[x] <= pivot:
            left.append(seq[x])
        else:
            right.append(seq[x])
    left = quicksort(left)
    right = quicksort(right)
    foo = [pivot]
    #return left + foo + right
    return left

seq = [87,28,100,78,84,98,75,70,81,68]
mx = quicksort(seq)
print(mx)

・・・(実行結果)
>>> from test35 import quicksort
87
28
78
75
70
68
84
81
100
98
[]
>>> 
うん、なんで？？やっぱり左に貯めているわけではない様な自分の中ではきっと[87,28,100・・・]などを
期待していました。pivot部分を先にprintでだしているのですが、ここはなんとなく理解できる。
pivotは与えられた配列の[0]番目の要素を代入されているからそのままが出てきている.
```

これを変だなと思ってreturn foo + rightで変速にして試してみたのですが、
結果のみ

```
・・・(実行結果)
>>> from test35 import quicksort
[87, 100]
>>> 
あれ、もしかしたら最後に与えられた配列が戻っている？pivotは？謎です。
```

最後に return fooで試すと、
結果のみ

```
>>> from test35 import quicksort
[87]
>>> 
うん、やっぱり最後に与えられた配列の[0]番目要素だけ返している。
```

参考サイトにはこのように解説されていました。

>
リストを昇順に整列させる実装例です。
ピボットをリストの先頭要素として、値の小さな要素は left リストに、値の大きな要素は right リストに格納して最後にピボットを中心としてリストを結合しています。


コメントにてアドバイス頂いた通り出力結果理解しました。質問ばかりになってしまい申し訳ありませんでした。
MacにおけるUnityのpersistentDataPathの指す先

# はじめに
Unityで作成したアプリ内で作成したデータの保存場所として、Application.persitentDataPathが返すパスにファイルを格納することがあると思います。
Mac上で上記ファイルを削除しようとした際に、Application.persitentDataPathのパスの先をググったところ、ネット上の情報は少し古く、最新のUnityではMacでのパスが異なっていたので記載します。

# UnityのApplication.persistentDataPathとは？
アプリ内での永続的なデータを保存するパス。
デバイスではpublicなディレクトリになり、アプリの更新毎にファイルが削除されることはありません。
詳しくは[[Unity] スクリプトリファレンス:Application.persistentDataPath](http://docs.unity3d.com/ja/current/ScriptReference/Application-persistentDataPath.html)を参照してください。

# Unityのバージョン
Unity 5.3.3p1


# PC上でのパス
- Mac

```
/Users/[ユーザ名]/Library/Application Support/[Company Name]/[Product Name]
```

- Windows

```
C:\Users\[ユーザ名]\AppData\LocalLow\[Company Name]\[Product Name]
```

Company Name：UnityのPlayer Settingsの[Company Name]
Product Name：UnityのPlayer Settingsの[Product Name]
※Player Settingsは[File] => [Build Settiongs]内にあります。

<img width="455" alt="player_settiongs.png" src="https://gloops.qiita.com/files/5fad951f-0de8-250a-10f6-8f33a74920c0.png">
MySQL 5.7.6でroot用パスワードが変わらなくて困った話


# 困るまでの経緯
せっかくのゴールデンウィークだし、自分のノートPCの環境をすっきりさせたかったので、Windows10をクリーンインストールした。

割としょっちゅうクリーンインストールとか環境構築はやっていたので、最初のうちはサクサク元の環境に戻っていった。

しかし、MySQLをインストールしているときに事件は起こった。

**あれっ。`` mysql -u root ``でログインできない？** 

ログインを試みると、 `` ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO) `` が出る。要するに **パスワードが違います** のエラーだ…

パスワードなんて設定したはずないのに…

なぜパスワードが設定されているのかはわからないが、とにかくrootユーザでログインしたい。

調べてみると **セーフモードで起動し、ログインしてからrootのパスワードを書き換える** ことができるらしい。

下記の *マコトのおもちゃ箱* 様に載っている通り行うことでセーフモードでの起動・パスワードなしでのログインはできた。

しかし、ここからが問題だった

# 本題
 *マコトのおもちゃ箱* 様では `` update user set `` **password** `` =password("パスワード") where user='root'; `` と実行することになっているが、これでは `` ERROR 1054 (42S22): Unknown column 'password' in 'field list' `` という、 **passwordカラムが存在しません** というエラーが吐かれる。

調べてみたところ、 下記の *日々の覚書* 様にヒントが書かれていた。
 これは、MySQLのアップデート(おそらく5.7.6以降？)で **password** カラムの内容が **authentication_string** 移動したためで、そっちを変更しなければいけなかったようだ。
 
 ということで
  ```update user set authentication_string=password("パスワード") where user='root';``` 
  に置き換えて実行したことで、無事にMySQLに対してrootユーザーでログインすることができた。
  
  一件落着。




### 参考サイト

+ マコトのおもちゃ箱　～ぼへぼへ自営業者の技術メモ～
http://piyopiyocs.blog115.fc2.com/blog-entry-649.html

+ 日々の覚書
http://yoku0825.blogspot.jp/2015/03/mysql-576mysqluser.html
Tumblr たまに使うページ

# Mega-Editor
https://www.tumblr.com/mega-editor

tag をまとめて編集できる。

# Recover Custom Theme
https://www.tumblr.com/themes/recover

theme の編集履歴を遡れる。

# レシート
https://www.tumblr.com/receipt

theme などの購入履歴が閲覧できる。
Kobitoで書いた記事をアップロードしようとしたら「アップロードに失敗しました」

Kobitoで書いた記事をアップロードしようとすると、

**「アップロードに失敗しました」**

と表示されてアップロードできませんでした。

他の記事はアップロードできたのになぜ？

ブラウザで書き直そうと思い、ブラウザの投稿画面を開いたところ、
タグの箇所に

**タグをスペース区切りで5つまで入力（例: Ruby Rails:4.2.0）**

との文字が！

アップロードしようとしていた記事には、6つのタグを設定してました。
Kobitoで、タグを5つに減らしたら、アップロードできました。

これはわかりにくい。
リスニング > ラスボス > Part 1

[Kids hack their Dad's computer on her Raspberry Pi](https://www.youtube.com/watch?v=W76o_iG7Y7g&list=WL&index=20)

この動画はすでに300回は見ているかと思う。でもリスニングを結構な箇所聞き取れない現状。
そういう点で「ラスボス」とつけた。

ラスボスを倒せる日が来るのだろうか。

赤文字ははっきり聞き取れない部分。
青文字はそのように聞き取れるが、文法的にしっくりいかない部分。

(00:00-)
Hey, I <font color=red>xxx1</font> often check my dad today. But don't worry. You'll see it later on the video. 
Even my sister came <font color=red>xxx2</font> came <font color=red>xxx3</font> upstairs, laughing at <font color=red>xxx4</font> she <font color=red>xxx5</font> happends. 
But don't <font color=red>xxx6</font>. I got my <font color=red>xxx7</font> mission <font color=red>xxx8</font> fighting this.

(00:17-)
Because involving the shell, I put at the <font color=red>xxx9</font>(feed?) in videos, a lots of videos to show you, to show you more about the shell teaching more about <font color=red>xxx10</font>.

(0:27-)
Just imagine. You've got a raspberry pi. You made it got at Christmass, at birthday, or you <font color=blue>made it to save up one</font>. And he would play a bit of Minecraft, <font color=blue>bit it connect more</font>, or may be a bit of Scratch - programming that they don't like -, Python (PyPhone?) programming.

(0:47-)
And then, you just gonna <font color=red>xxx11</font>(seeker?) of the shell. That night you're lying on the bed thinking if only you had dad's password you could connect to his shell from your shell, and play just <font color=red>xxx12</font> <font color=red>xxx13</font> hand. That night you can't sleep, you can't eat breakfast. And school <font color=red>xxx14</font>(just?) takes so long.
USキーボードの日本語変換ショートカット

# USキーボードの日本語変換ショートカット

## 基本
command+space

## ctrl系（日本語入力中に変換）
- ctrl+j
  - 全角ひらがな
- ctrl+k
  - 全角カタカナ 
- ctrl+l
  - 全角英数
- ctrl+;(')
  - 半角英数

## option系（日本語入力中に変換）
- option+z
  - 全角ひらがな
- option+x
  - 全角カタカナ 
- option+c
  - 全角英数
- option+a(s)
  - 半角英数

### shift押しながらだと入力ソース自体が変わる
- option+shift+z
  - 全角ひらがな
- option+shift+x
  - 全角カタカナ 
- option+shift+c
  - 全角英数
- option+shift+a(s)
  - 半角英数
Elasticsearch+Kibanaでデータ解析（③グラフ＆ダッシュボード作成編）



# はじめに 
##本記事の全体構成について
本記事は、ElasticsearchとKibanaを使った環境のセットアップから、データの投入、データの検索・解析までを紹介する目的で作成した。
記事の構成は下記の通り。
以前の記事を確認していない場合は先にそちらをご参照いただくことをおすすめする。

１回目：[Elasticsearch+Kibanaでデータ解析（①環境セットアップ編）](http://qiita.com/windows222/private/acb89451d6744e4361a3)
２回目：[Elasticsearch+Kibanaでデータ解析（②スキーマ作成＆データ登録編）](http://qiita.com/windows222/private/1cc5c49d58c2c59bfa81)
３回目（本記事）：[Elasticsearch+Kibanaでデータ解析（③グラフ＆ダッシュボード作成編）](http://qiita.com/windows222/private/098ded70fb6a6b3c49d2)


##前回までの振り返りと今回の内容

前回までで、Elasticsearchに直接データを登録したり、検索したりする方法を紹介した。
ここでは、elasticsearchに登録したデータをKibanaでグラフ化する方法を紹介する。


#対象インデックスの指定
最初に、対象とするインデックスパターンを選択する。
index2014,index2015,index2016という様に年ごとでインデックスを作成している場合、index*と指定することで複数のインデックスをまとめて指定することもできる。

ここでは、前回（URL)作成したデータにインデックス名を合わせる為、my_indexと入力する。
インデックスを入力すると、対象のインデックスに含まれる日付フィールドの一覧がTime-Field name欄に表示されるので、created_dateを選択する。
<img width="400" alt="rows_as_groups.png" src="https://qiita-image-store.s3.amazonaws.com/0/77722/1b6e6828-2c0b-25bf-141a-6269db571021.png">

#グラフの作成
##作成グラフの選択
画面上のVisalizeをクリックした後、作成したいグラフを選択する。
ここでは、"Vertical bar char"を選択する。
<img width="400" alt="rows_as_groups.png" src="https://qiita-image-store.s3.amazonaws.com/0/77722/8d186177-05b1-980c-8d39-e9118d36b9f0.png">

##横軸・縦軸を選択
Y-Axis、X-Axisそれぞれ下図を参考にしながら同じ値を選択する。
Applyをクリックすると、条件に合致するデータをグラフ化することができる。
![image](https://qiita-image-store.s3.amazonaws.com/0/77722/0ac6ca23-0a18-6967-c3b6-c75f40088f08.png)

##データのフィルタリング
画面上に表示されているデータフィルタリングフィールドに検索条件を指定する事で、データを絞ることができる。

書式は下記の通り。
検索したい値名：検索値

![image](https://qiita-image-store.s3.amazonaws.com/0/77722/057dcc7c-a2c7-9d62-12aa-5c77a94bc463.png)


下記は検索例。

```php
#文字列完全一致検索
"body": "一括更新テストデス。"

#部分一致検索
"body": "一括更新*"

#範囲検索
view_count: [10 TO 1000]

#範囲検索（上限なし）
view_count: [1000 TO *]
```

その他の例は下記を参考にすること
https://www.elastic.co/guide/en/beats/packetbeat/current/_kibana_queries_and_filters.html


##ドリルダウン
グラフ上の横軸をクリックして選択することで、データの表示範囲を絞ることができる。
<img width="300" alt="rows_as_groups.png" src="https://qiita-image-store.s3.amazonaws.com/0/77722/a0713b2e-bc64-6ccf-5baf-79cf5e6d3819.gif">

#ダッシュボード作成
画面上のDashboardを選択し、作成したグラフを選択することにより、グラフを複数表示するダッシュボードの作成が可能。
![image](https://qiita-image-store.s3.amazonaws.com/0/77722/d3d99a58-2879-3dc6-0e1b-f07e0f636226.png)

#その他
その他、円グラフ、積み上げ棒グラフ、折れ線グラフ、エリアチャート等、地図上にデータをプロットする等、様々なグラフの作成できる。
なぜかバブルソートでハマったのでメモ

## 概要
隣り合う要素を交換して昇順に並び変えるソートアルゴリズム

## 翻訳
実装上は、交換が1回でも発生すれば再度全要素を調査。
1回も交換が発生しなければ終了。

## 実装(Go)

```go:bubblesort
package main

import "fmt"

func bubblesort(list []int) []int {
	flag := true
	for flag {
		flag = false
		for i := 0; i < len(list)-1; i++ {
			if list[i] > list[i+1] {
				list[i], list[i+1] = list[i+1], list[i]
				flag = true
			}
		}
	}
	return list
}

func main() {
	list := []int{6, 3, 4, 7, 2, 1, 5}
	res := bubblesort(list)
	fmt.Println(res) // [1 2 3 4 5 6 7]
}
```

## まとめ
いつでも出来ると思っているアルゴリズムでハマるとすごくつらい気持ちになる・・・
Polygon Mesh Processing まとめ #0

[Polygon Mesh Processing](http://staff.ustc.edu.cn/~tongwh/GM_2011/textbooks/Polygon%20Mesh%20Processing%20Mario%20Botsch%20et.al%202010.pdf)についての勉強ノートです。

#Meshとは？
Mesh：計算格子、あるいは格子とも呼ばれ現象を表す**数学モデルを離散化**するために使用される
     ・多くの工学的、実用的な流れの現象は理論解や実験値を得られないことが多いため、空間を離散化して数値解を求めることが多くなる

Input Data → Removal of topological and geometrical errors → Analysis of surface quality → Surface smoothing for noise removal → Parameterization
→ Simplification for complexity reduction → Remeshing for improving mesh quality → Freeform and multiresoltion modeling

##1.Surface Representations
・Parametric Surface
     ○ サンプルしやすく、直観的に調整できる
     ×  距離をつかむのが難しく、Topologicalな変化を加えたいときには再構築が必要

・Implicit Surface
     ○ Topologicalな変化や距離の問い合わせが簡単
     ×  サンプリングや形状編集が複雑で、geometricな分解能はボクセルサイズに依存する

##2.Mesh Data Structure
・Face-Based Data Structure
・Edge-Based Data Structure
・Halfedge-Based Data Structure
・Directed-Edge Data Structure

##3.メッシュ分割の基本方針
・解変数を表現できるようなメッシュを作成
・できるだけ品質のよいメッシュを作成
・流体解析の場合は、乱流の壁面近接セルなどは、特性に配慮してメッシュを作成
BASEデザインマーケットの審査を通すためのチェックポイントまとめ

#BASEデザインマーケットとは?
「BASEデザインマーケット」は無料でネットショップの作成、運営ができるサービス「BASE」のテーマデザインを販売できるサービスです。テーマは5000円から販売することができます。

https://design.thebase.in/

#ドキュメント、ガイドラインを読もう
当たり前ですが、ドキュメント、チェックリスト、デザインガイドラインは読みましょう。規則に沿ってデザインを作成することは後々の手間がかなり省け、審査がスムーズに行われます。

[BASE Templateドキュメント](https://github.com/baseinc/template-docs)
[テーマのチェックリスト](https://github.com/baseinc/template-docs/blob/master/check_list.md)
[テーマのデザインガイドライン](https://github.com/baseinc/template-docs/blob/master/design_guideline.md)

# 取り入れたい機能 :eyes: 

##お知らせ機能
お店を運営する上でお知らせを表示したいニーズは高いと自分は考えます。自分がお店をやるなら欲しい機能ですし、他の人気の有料テーマの多くが取り入れているからです。

##オリジナルのスマホページデザイン
BASEテーマではデフォルトのモバイルテーマを使用することができるので、必須ではありませんが、デフォルトテーマでは使いにくい部分もあるので、オリジナルテーマを作った方が良いと思います。

viewportの設定をmetaタグに設定しておき、CSSのmedia queryを駆使しながらモバイルサイトを構築しましょう。

```html
<meta name="viewport" content="width=device-width, initial-scale=1">
```

#表示崩れチェック :eyes: 
テーマを審査に出す前に、チェックしたいポイントがいくつかあるので見ておきましょう。表示が崩れなどが少ないと審査の時間も短縮できます。

- 全体
    - 有料で販売するテーマのクオリティに達しているか
    - デザインオプションのmetaタグは{block:Hidden}で囲う
    - {BASEMenuTag}は目立つ位置に置く
- トップページ
    - ページングはうまくできているか
    - ラベルの位置はズレていないか
    - ページ非公開でも表示が崩れていないか
- 商品詳細ページ
    - シェアボタンあるか
    - シェアボタンは機能しているか
    - スマホからカートに商品は入るか
    - 商品画像サイズがバラバラでも崩れていないか
        - 極端に縦長の画像をキャプチャするのは必須ではないがやっていたほうが安心
    - 外部サイトに貼る、通報する、送料詳細設定のモーダルウィンドウ表示で崩れていないか
        - 送料詳細設定はAppsをインストール必要あり
- コンタクトページ
    - スマホサイズになっているか
- 特商法ページ
    - スマホサイズになっているか

#「Material」と「Teen」の紹介
自分は「Material」と「Teen」を制作しました。良かったら制作の参考にしてください :pray: 
[Material](https://design.thebase.in/detail/22)
[Teen](https://design.thebase.in/detail/19)

#関連記事
[BASEデザインマーケットのドキュメントからは分かりづらい仕様を解説 - Qiita](http://qiita.com/naoyashiga/items/999d85719f309cf747a1)
[Gulpで外部CSSをhtmlに書き込み、BASEデザインマーケットの更新を楽にする - Qiita](http://qiita.com/naoyashiga/items/2feb39cfa98ec7524431)
[BASEデザインマーケットのテーマ売り上げに繋がった工夫まとめ - Qiita](http://qiita.com/naoyashiga/items/199bfb2536ae4686e592)
Gulpで外部CSSをhtmlに書き込み、BASEデザインマーケットの更新を楽にする

#BASEデザインマーケットとは?
「BASEデザインマーケット」は無料でネットショップの作成、運営ができるサービス「BASE」のテーマデザインを販売できるサービスです。テーマは5000円から販売することができます。

https://design.thebase.in/

#ドキュメント
[baseinc/template-docs](https://github.com/baseinc/template-docs)

# Gulpで環境設定
##外部CSSをhtmlに直接書き込む
cssを[BASEのサーバ](https://developers.thebase.in/tools/upload_file)にアップすることもできますが、頻繁に更新する場合は面倒です。そこでhtmlに直接cssを書く方式を取ります。scssファイルをコンパイルし、style.cssを書き出して、それをhtml内に出力することをやってみます。

##gulp-replace
gulp-replaceを使って外部CSSをhtmlに書き込みます。
https://www.npmjs.com/package/gulp-replace

```html
<style type="text/css">
htmlReplace
</style>
```

文字列「htmlReplace」をstyle.cssの中身と置換します。

```js:gulpfile.js
gulp.task('htmlReplace', function() { 
    return gulp.src('template/resource/index.html') 
        .pipe(gulpReplace(/htmlReplace/, function(s) {
            return fs.readFileSync('public/css/style.css', 'utf8');
        }))
        .pipe(gulp.dest('template/dist/'));
});
```

#「Material」と「Teen」の紹介
自分は「Material」と「Teen」を制作しました。良かったら制作の参考にしてください :pray: 
[Material](https://design.thebase.in/detail/22)
[Teen](https://design.thebase.in/detail/19)

#関連記事
[BASEデザインマーケットのドキュメントからは分かりづらい仕様を解説 - Qiita](http://qiita.com/naoyashiga/items/999d85719f309cf747a1)
[BASEデザインマーケットの審査を通すためのチェックポイントまとめ - Qiita](http://qiita.com/naoyashiga/items/6da44c5dbcba6140e6f6)
[BASEデザインマーケットのテーマ売り上げに繋がった工夫まとめ - Qiita](http://qiita.com/naoyashiga/items/199bfb2536ae4686e592)
BASEデザインマーケットのドキュメントからは分かりづらい仕様を解説

#BASEデザインマーケットとは?
「BASEデザインマーケット」は無料でネットショップの作成、運営ができるサービス「BASE」のテーマデザインを販売できるサービスです。テーマは5000円から販売することができます。

https://design.thebase.in/

#ドキュメント
[baseinc/template-docs](https://github.com/baseinc/template-docs)

#必須ページ
##Blog
一覧(list)と詳細(detail)があります。どちらも{block:BlogPage}に読み込まれます。

###css読み込み
一覧(list)

```html
<link rel="stylesheet" href="/blog/css/blog_list.css?20150320">
```

詳細(detail)

```html
<link rel="stylesheet" href="/blog/css/blog_detail.css?20150320">
```

上記cssが読み込まれます。

##Contact
```html
<link rel="stylesheet" href="/css/shopTemplate/shop_00.css?1451206800">
```
Contactのデザインを編集するときは、デフォルトテンプレートのcssを参考にします。

#専用タグ
## jQuery
bootstrap.min.jsを使う場合はjQueryのバージョンに注意します。

```
Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher
```

jQueryタグ「{JQueryTag}」を使用した場合は、「1.8.2」が読み込まれます。

```html
<script src='/js/jquery-1.8.2.min.js'></script>
```

cdnを使って新しいjQueryを読み込みます。

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
```

#「Material」と「Teen」の紹介
自分は「Material」と「Teen」を制作しました。良かったら制作の参考にしてください :pray: 
[Material](https://design.thebase.in/detail/22)
[Teen](https://design.thebase.in/detail/19)

#関連記事
[Gulpで外部CSSをhtmlに書き込み、BASEデザインマーケットの更新を楽にする - Qiita](http://qiita.com/naoyashiga/items/2feb39cfa98ec7524431)
[BASEデザインマーケットの審査を通すためのチェックポイントまとめ - Qiita](http://qiita.com/naoyashiga/items/6da44c5dbcba6140e6f6)
[BASEデザインマーケットのテーマ売り上げに繋がった工夫まとめ - Qiita](http://qiita.com/naoyashiga/items/199bfb2536ae4686e592)
AWK最低限覚えておきたいこと

|  | コマンド | メモ |
|---|---|---|
| 基本 | awk 'パターン { print $0 }' test.txt | |
| | cat test.txt &#124; awk 'パターン { print $0 }' | |
| 列の絞込 |awk '{print \$1 $2}' test.txt | |
| | awk '{print $0}' test.txt | $0は行まるごと|
| | awk '{print $NF}' test.txt | 一番後ろの列 |
| | awk '{print $(NF-1)}' test.txt | 後ろから2番目 |
|行の絞込 | awk '$1 == "a"' test.txt | {print xxx}を省略するとレコード丸ごと |
| | awk '$1 != "a"' test.txt | |
|  | awk '$2 ~/^1/"' test.txt | 正規表現(2列目が1から始まる行を抽出) |
|区切り文字変更 | awk  -F, '{print \$1}' test.txt | デフォルトはスペース|

## 注意事項

#### 1. ダブルクォートはダメ

```bash
awk "{print $0}" # これはだめ
```

## メモ

毎回ぐぐるのが面倒なので、最低限AWKで暗記しようと思ったことをまとめました。
普段AWKでやりたくなることの80%の要件が満たせればいいという感じです。
パレートの法則を持ち出すまでもなく、だいたいできるようになるまではわりあい簡単ですが、完璧を求めようとすると大変なので、このくらいでいいのです。

最小、最大の求め方は「awk "{print $2}" | sort | head -n 1」 等で十分。
合計、平均なんかは諦めて毎回ぐぐりましょう。
point cloud における法線推定

PCL（Point Cloud Library）の[公式チュートリアル](http://pointclouds.org/documentation/tutorials/normal_estimation.php)をもとに点群（point clouds）における法線（normals）推定についてまとめたいと思います。

#法線推定はなぜ必要？
メッシュが張られていない点群データに対しては、局所部分（n近傍）での法線方向を、近似的にメッシュを推定していくことでその垂線として法線方向も推定していく必要があります。
CGでは、光源からの光の反射を正しく表したり、その他の視覚効果を作成するうえで貴重な情報となります。
![図1.png](https://qiita-image-store.s3.amazonaws.com/0/87615/5f07d5d6-9d39-9d11-4203-52620686178b.png)


#法線推定手法
法線推定には2パターン方法があります。
・Point cloudに対して先にメッシュ化を行い、できあがったメッシュの各面における垂直方向をサーフェス法線とする
・メッシュ化は行わず、Point Cloudの幾何構造から直接サーフェス法線を推定する

メッシュ化の方法によっては、法線が求められてないとできないものもあるため、点群から直接法線を推定するほうが多いかと思います。

###理論
法線推定手法にはいくつかあるみたいですが、最も単純な**「最小二乗法 （least-squares）により、局所的な点群（k近傍）に対して平面を当てはめることで、その平面をサーフェスとみなし、サーフェスの垂直方向を法線とする」**という手法を用います。
最小二乗法は以下のように定式化されます。

![tumblr_inline_mhj23umcN91qz4rgp.png](https://qiita-image-store.s3.amazonaws.com/0/87615/36d250fb-35f2-a994-3da3-ac68a8425fb1.png)

このCは、ある注目点の近傍における、点と中央点の距離が要素である共分散行列です。この共分散行列を主成分分析（PCA）で解いて固有ベクトル（主成分方向）を出すことで、第一主成分と第２主成分が「一番点が多い方向と２番目に点が多い方向＝平面のｘ、ｙ方向」とみなすことができるので、その平面の垂線が法線であると推定できます。

![図2.png](https://qiita-image-store.s3.amazonaws.com/0/87615/911197dc-29af-9d22-06ef-6bd26f3962f9.png)

ただ、この方法だと平面方向をSVDで出しただけなので、どっちが表か裏かは毎回適当になり、PCAにより出してきた法線方向には正負のあいまい性が残ります。
PCLでこの問題を解決するには、ビューポイント（カメラ視点方向）に対して各法線が統一した方向になるように、カメラの方向と反対の裏側に向いている法線だけを表裏の反転（flip）を行います。
あるいは、spanning tree を用いて大域的な方向を求めることもできます。

###スケールの選択
既に述べられたように、サーフェス法線の推定は、注目点の近くの範囲に含まれていると推定した点だけについて行われます。この推定する近傍点の範囲をK最近傍（k-nearest neighborhood）といいますが、法線推定ではこの推定する近傍のスケールが、どの程度の値が最も良いのかを決める必要があります。

![tumblr_inline_mhj7jqMVlA1qz4rgp.jpg](https://qiita-image-store.s3.amazonaws.com/0/87615/daf6baca-a513-0eb5-e72a-5c456a691923.jpeg)

![tumblr_inline_mhj7jwj8x01qz4rgp.jpg](https://qiita-image-store.s3.amazonaws.com/0/87615/3092af1c-41c7-f969-bd37-0711cc6c2a06.jpeg)



左が小さいスケール、右が大きいスケールのもので、矢印のあるほうが法線を、ヒートマップの方が曲率(curvature)を示しています。**小さいスケールの方が当然細かい局所的な法線を推定することになり計算コストもかかります。大きいスケールだと全体的な大きな法線はとらえるものの、エッジやノイズに敏感となります。**それぞれ、アプリケーションしだいで大きさを決めることになる、と結論づけられています。
具体的な値については述べられていませんが、半径r(radius)を用いる場合と一番近い順にk点用いる場合があります（MeshLabなんかでは後者を用いてた気がします）。
CotEditorスクリプト開発入門 - コメントアウトマクロのチュートリアル


この投稿では，選択した文字列を`#`でコメントアウトするスクリプトの開発を通じて，
CotEditor に Bash スクリプトのマクロを登録する方法を説明します．

## Hello CotEditor Bash スクリプト

まずは，Bashスクリプトを登録するだけの手続きをやってみます．

1. スクリプトを用意する

    ```console
    $ cd ~/Library/Application\ Scripts/com.coteditor.CotEditor/
    $ touch hello.sh
    $ chmod +x hello.sh
    $ open -a /Applications/CotEditor.app hello.sh
    ```

2. スクリプトを編集する

    ```shell-session
    #!/bin/sh
    echo "hello" 1>&2 # 標準エラーに出力
    ```

3. スクリプトメニューに登録する

    Coteditorのメニューのヘルプに左となりの「S」のようなマークをクリック
    <img width="295" alt="スクリーンショット 2016-04-29 11.40.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/75935/b4c99e5e-03dd-045a-467a-e68d04fb0d03.png">

4. 「S → スクリプトメニューを更新」をクリック

5. 実行する

    1. メニューのヘルプに左となりの「S」のようなマークをクリック
    <img width="298" alt="スクリーンショット 2016-04-29 11.39.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/75935/072a3207-7221-20c5-1379-be3b347b4f7a.png">

    2. hello をクリック

    3. コンソールにメッセージが出ます
    
        ![スクリーンショット 2016-08-07 14.47.15.png](https://qiita-image-store.s3.amazonaws.com/0/75935/5c9920f6-ea24-d90d-3542-f26eef4d3cc4.png)

## 編集中のファイルの絶対パスを受け取る

スクリプトの起動時に第一引数にこのスクリプトを起動したCotEditorが編集していたファイルの絶対パスが渡されます．ファイルとして保存されていない内容を編集中は何も渡されません．第一引数はスクリプト内からは`$1`で参照できます．

以下のように編集して実行すると，コンソールにファイル名が表示されます。

```shell-session
#!/bin/sh
echo "hello $1" 1>&2
```
![スクリーンショット 2016-08-07 15.04.34.png](https://qiita-image-store.s3.amazonaws.com/0/75935/75ed4a0a-85f6-0b59-c9fd-4d893fde136c.png)

## 編集中のファイルの中身を受け取る

1. スクリプトを用意する

    ```
    #!/bin/sh
    # %%%{CotEditorXInput=Selection}%%%

    while read LINE; do
      echo "${LINE}" 1>&2
    done
    
    exit 0
    ```

2. 実行する

    Coteditor上で文字列を選択して選択してスクリプトを実行する。

    ![スクリーンショット 2016-08-07 15.13.41.png](https://qiita-image-store.s3.amazonaws.com/0/75935/418d35c8-831f-e7b2-ea97-ffc6e84d2f62.png)

    コンソールに選択した文字列が出てきます。

    ![スクリーンショット 2016-08-07 15.15.33.png](https://qiita-image-store.s3.amazonaws.com/0/75935/07ad7e7b-9ba6-5bec-62d6-db73fadef13a.png)

## カーソル位置に文字列を返す

1. スクリプトを用意する

    ```
    #!/ bin/sh
    # %%%{CotEditorXInput=Selection}%%%
    # %%%{CotEditorXOutput=ReplaceSelection}%%%

    while read LINE; do
      echo "# ${LINE}" # 標準出力へ
    done

    exit 0
   ```

2. 同様に選択して実行する

    コメントアウトするcoteditorスクリプトができました。

    ![スクリーンショット 2016-08-07 15.20.52.png](https://qiita-image-store.s3.amazonaws.com/0/75935/c69a969b-695c-40cf-fe0e-774ebcef2243.png)
proxmox4.2をdebian8.4にインストール

* [JessieにPromox4をインストール、NAT設定 - Qiita](http://qiita.com/tukiyo3/items/71e3222b817e1188bc40)

## ubuntu16.04テンプレート

* [[SOLVED] - Ubuntu 16.04 Template for Proxmox 4.1 | Proxmox Support Forum](https://forum.proxmox.com/threads/ubuntu-16-04-template-for-proxmox-4-1.27034/)

```bash:
wget http://download1.proxmox.com/images/system/ubuntu-16.04-standard_16.04-1_amd64.tar.gz
```

* `avahi-daemon`が悪さするようなので入ってたら消すこと

## download iso

* [debian-8.4.0-amd64-netinst.iso](http://cdimage.debian.org/debian-cd/8.4.0/amd64/iso-cd/)

```bash:
vi /etc/hosts
```

```bash:
# apt-get purge wicd wicd-daemon

apt-get install -y ifenslave bridge-utils

cat > /etc/network/interfaces << EOF
auto lo
iface lo inet loopback

iface eth0 inet manual

auto vmbr0
iface vmbr0 inet static
    address 10.0.1.4
    netmask 255.255.255.0
    gateway 10.0.1.1
    dns-nameservers 8.8.8.8 8.8.4.4
    bridge_ports eth0
    bridge_stp off

auto vmbr1
iface vmbr1 inet static
        address  192.168.99.4
        netmask  255.255.255.0
        bridge_ports none
        bridge_stp off
        post-up echo 1 > /proc/sys/net/ipv4/ip_forward
        post-up   iptables -t nat -A POSTROUTING -s '192.168.99.0/24' -o vmbr0 -j MASQUERADE
        post-down iptables -t nat -D POSTROUTING -s '192.168.99.0/24' -o vmbr0 -j MASQUERADE
EOF

echo "deb http://download.proxmox.com/debian jessie pve-no-subscription" > /etc/apt/sources.list.d/pve-enterprise.list
wget -O- "http://download.proxmox.com/debian/key.asc" | apt-key add -
apt-get update && apt-get dist-upgrade -y
apt-get install -y proxmox-ve ntp ssh postfix ksm-control-daemon open-iscsi
```

* reboot

## images

![1.PNG](https://qiita-image-store.s3.amazonaws.com/0/25728/8327149b-8b48-8478-a7a0-d742ba86fd30.png)
![2.PNG](https://qiita-image-store.s3.amazonaws.com/0/25728/c7b207fc-964c-1770-c462-e21062fec29e.png)
![3.PNG](https://qiita-image-store.s3.amazonaws.com/0/25728/ce3e81a3-797e-c489-e7b9-c1d68c8e5d05.png)

* ubuntu 16.04のテンプレートはまだない様子。

![4.PNG](https://qiita-image-store.s3.amazonaws.com/0/25728/99dfaecd-898e-ed7c-6e57-8b60c5da1bee.png)

* ACLsとEnable quotaの項目が増えた様子

![5.PNG](https://qiita-image-store.s3.amazonaws.com/0/25728/7af9e0b1-854c-ab06-be19-b2f6f40eab28.png)

* Mount Pointの項目が増えた
FreeBSDでnokogiriをインストールする(簡単な)方法

# 依存ライブラリをpkgで入れておく
* libiconv
* libxml2
* libxslt

# pkgconfをpkgでインストール
これ重要

--with-xml2-dirなどライブラリのありかをオプションで指定する方法がよく紹介されてるけど、pkgconf(pkg-config)が入っていればよしなに探してくれる。

# build時に--use-system-libraliesを指定
```
bundle config nokogiri "--use-syste-libraries"
bundle install
```
素のgemを使う場合は
```
gem install nokogiri -- --use-system-libraries
```
【Xcode】画面サイズの違うシミュレーターをいちいちビルドせずにUIデザインを確認する方法

## はじめに
独学でプログラミング学び始めて約1年、業務でプログラムを書き始めて2ヶ月、Swift始めて１ヶ月のSwifterです。
アプリを開発する際、画面サイズの違うデバイスにも対応するのはかなり重要ですが、AutoLayoutの設定をすると意図しないUIデザインになってしまうことが多々あります。
この記事ではいちいちシミュレーターを起動しなくてもその場でデザインを確認できる方法を記載するので参考にしてください


## デザイン確認時のイライラ
こんな確認の仕方していませんか？？

1. とりあえずボタンとかラベルとか部品置く
2. まずはシミュレーターでビルドして表示を確認
3. 大きさの違うシミュレーターで起動して表示確認
4. ず、ずれてる・・・
5. 位置を変えてAutoLayoutを設定して、シミュレーターで起動して確認
6. 別のシミュレーターを変えて表示を確認
7. 試しにデバイス横にしてみたらずれてる・・・
8. 以下、ループ

当てはまる人はこの記事見れば効率アップ間違いないです！

## 手順

### ①まずはプロジェクト作ってViewControllerの画面サイズを指定
今回は4インチでサイズ指定してます
 <img width="1280" alt="スクリーンショット 2016-04-28 23.34.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/115590/d95d34e8-fd07-8a95-9ab4-a4fdb978fc5f.png">

### ②適当に部品を配置
適度にこんな感じで配置しました<img width="1280" alt="スクリーンショット 2016-04-28 23.57.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/115590/923f1ec1-a4ab-89a7-09f3-0c8a09c53a3d.png">

### ③右上の円が重なっているボタン(アシスタントエディタボタン)を押して画面を分割にする
画面分割ができればよいので、右側はなんでもよいです
<img width="1280" alt="スクリーンショット 2016-04-29 0.09.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/115590/fc2801d7-590c-ceec-003d-2feee18d3c3c.png">

### ④右画面上部の青く光ってるアイコンをクリックしてPreview(1) → Main.storyboard(Preview)を選択する
<img width="1280" alt="スクリーンショット 2016-04-29 0.19.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/115590/c18647ab-36b6-2cf8-3d83-de3f4bf73d25.png">

## ⑤サイズを追加
こんな感じの画面になるはず
※見にくいので左のナビゲーターエリア、右のユーティリティーエリアは消しました
<img width="1276" alt="スクリーンショット 2016-04-29 0.24.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/115590/f27d07ef-b28f-0b9b-7268-b9046bae6ce0.png">

左側のstoryboardで部品の位置を変えたり、AutoLayoutを設定・変更すれば、右側で即時デザインが確認できます！
<img width="1279" alt="スクリーンショット 2016-04-29 0.34.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/115590/67d7903d-f4ec-0b8d-8e70-1b651e829fdf.png">


右画面下の+ボタンを押せば他の画面サイズも確認できます
<img width="1280" alt="スクリーンショット 2016-04-29 0.35.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/115590/6ba38d1e-1596-85b1-f7a1-ef9d45fae42c.png">

## 終わりに
どうでしょうか？　僕がこれを知った時は衝撃でした。　Xcodeは色々便利な機能があるので、知ってる知らないが開発効率に大きく影響します。ちょっとしたtipsで開発効率アップ！　
お疲れ様でした。
macでcakephpをローカルで環境構築 (MAMP)

- 2016/04/29時点での最新状態で環境構築 (osxを除いて)
- osx el capitan 10.11.2
- mamp 3.5
- php 7.0.0 (mampに標準装備)
- cakephp 3.2.5
- mysql ?? (mampに標準装備)
- apache 2 (mampに標準装備)

$がついてるやつはTerminalのあれです。

mampインストールするときは設定でpro外しとかないと勝手にmamp proまでインストールされてしまうので注意。
mampのインストールが終わったら、あとはTerminalでの操作なので、とくにめんどくさい作業はないはず。。。
手順にそってけばうまくいくはず。。。。

#PHP 7.0.0, cakephp 3.xをローカルで環境構築

0. ggr and install MAMP

1. $ composer -V
	if nothing happend
	then 3.
	else 5.
	
2. $ curl -sS https://getcomposer.org/installser | php
3. $ sudo mv composer.phar /usr/local/bin/composer
4. $ which php
	if /user/bin/php
	then 6.
	
5. $ vim ~/.bash_profile
6. press i key
7. insert "export PATH=/Applications/MAMP/bin/php/php.7.0.0/bin:$PATH"
8. press esc key
9. press :wq and enter
10. $ source ~/.bash_profile
11. $ which php
		if not /user/bin/php
		then 13.

12. $ cd /Applications/MAMP/htdocs
13. $ composer create-project --prefer-dist cakephp/app xxxx
               (xxxx := your application name)
14. press y and enter


15. start server with MAMP
16. go to local with browser
    (http://localhost:yyyy/xxxx, yyyy := apache port; check mamp configuration)
17. if display cakephp
	then done.
	else i dont know

~~~ D O N E ! ! ! ~~~

/*

 開発環境構築の闇は深い...........

*/
CentOS7にyumでPHP7とパッケージを気軽に何度も入れなおす。

今回のプロジェクトでは、導入しやすいKey-Value-Storeを用いたいので、Redisを選択。

```
>redis-cli ping
PONG
```
これはいけたので（また別件でハマってたんですけどね）、PHPで動くようにredisパッケージをインストールして動くようにしたい。

しかしここで大ハマリ。その顛末と解決策まとめ…

欲しい情報は顛末の経緯じゃなくて、解決策！それさえあれば快傑ズバット。「ヒュ〜ゥ、チッチッチ」のあの名シーンのように。

#まずは、こんな感じでハマったんでしょ？

ウェブ上にアップされているいろいろな情報を模索して、いろんなリポジトリを設定して放り込んでいくうちに、
パッケージの相互の整合性がとれなくなってくるのでしょうか？インストールできない状態になりがち。

そこで無理やりやろうとして

```lasso
>sudo yum -y install php70-php-pecl-redis.x86_64
```
これを実行して、インストールできた気になって、`ｐｈｐ．ini` の最後の行にこれ書いて

```php:/etc/php.ini
extension=redis.so
```
サービスをリスタートして

```lasso
>sudo systemctl restart httpd.service
```
これで解決しめしめと思って、

```php:index.php
<?=phpinfo()?>
```
これで確認しても「redisがない。」とすっかりハマってませんでしたか？

なぜそうなるか正確には僕にはわかりませんが、redis.soがうまく認識されないからだと予測をたてました。
モダンなPHPはパッケージを読み込むファイルを
/etc/php.d/.にまとめています。だからといって、そこにredis.iniファイルを置いてその中に先ほどの１行を記載しても解決しない。

それではってことでPHP7とパッケージ一式全てを再インストールすれば美しく解決します。
これはPHP5.6でハマった方々も同じように解決できるのでは。

#これで解決！
まずは、何がインストールされているか確認しましょう。
このコマンドでPHPに関連する一覧が確認できます。

```lasso
>rpm -qa | grep php
```
これらを全て削除します。このコマンドはphpにワイルドカードつけてます。<Font color="red">自己責任</font>で。自己責任とは「書いている僕は責任負いません。読んでる君が責任負うよ」ってことです。

```lasso
>sudo yum -y remove php*
```
これでphpはあっさり消えました。

続いてPHP7とredis含むパッケージをインストール。その前に、リポジトリーの向き先だけ整えておきましょう。

```lasso:yumのアップデートと必要なパッケージのインストール
sudo yum -y update
sudo yum -y install yum-plugin-priorities
```
```lasso:EPELリポジトリ追加
sudo yum -y install epel-release
``` 
```lasso:Remiリポジトリ追加
sudo rpm -ivh http://rpms.famillecollet.com/enterprise/remi-release-7.rpm
```
[「終了のお知らせ」](https://qiita.com/bezeklik/items/ba4ccd806ae39d35f782)

```lasso:RPMforgeリポジトリ追加
sudo yum -y install http://pkgs.repoforge.org/rpmforge-release/rpmforge-release-0.5.3-1.el7.rf.x86_64.rpm
```
~~途中、エラーメッセージ「既にインストールされてます」ってが出るかもしれませんが、そういうことです。
そしてPHP7と関連パッケージをインストール~~

```lasso:PHPインストール
sudo yum install --enablerepo=remi-php74 -y php php-mbstring php-pear php-fpm php-pdo php-intl php-mysqlnd php-pecl-redis php-xml php-gd php-json
```
インストールしたいものを並べておきましょう。
今回はRedisがきっかけでハマりこの現象の解決策に行き着きましたが、他のパッケージも同様のことが起こりそうなので、そのときここに行き着いたら試してみてください。最初はどきどきですが意外とあっさりですので。

##参考記事
http://www.unionnet.jp/develop/php7/
http://qiita.com/pakiln/items/e3351ade2bb5aeb198dc
http://qiita.com/shinofara/items/9476cee35cfac1b7ee50
レンタルサーバーでpublicフォルダを見てくれない時の対応

Laravelで作ったwebサイトをValue Serverに載せてくれってなった時に
公開フォルダを指定できなかったのでその対策法をメモ。

Value Serverに限らず、レンタルサーバーを借りる場合は稀にあることかと思います。

#環境
・Laravel
・Value Server

#説明
Value Serverはpublic_html配下にドメインに沿ったフォルダが作られる。

例：
>/public_html/example.com/ ←公開フォルダ

この中にLaravelのアプリケーションを入れるとすべて公開されてしまう上に
publicフォルダ内ののindex.phpを一番最初に見てくれない。

そこで、アプリケーションフォルダの中からpublicだけ取り出しフォルダを分ける。

例：
>/public_html/laravel ←publicフォルダ以外のlaravel全ソース
>--------------/example.com ←publicフォルダの中身

これで実質example.comフォルダがpublicフォルダという構成になるので一件落着。

しかし、このままではうまく動作しません。

#最後の一手

publicフォルダ内のindex.phpを以下のように修正。
（bootstrapの前に`/laravel/`を入れた）

```example.com/index.php
require '/../laravel/bootstrap/autoload.php';
...
$app = '/../laravel/bootstrap/app.php';
```

更に、Laravel定義のpublic_path関数が返す値を変更するために下記を追加。

```example.com/index.php
...
$app->bind('path.public', function() {
    return __DIR__;
});
```

これでちゃんと動くようになると思います。
python の必要ライブラリをruby のgemfileのようなものを準備して、Projectで必要なPackageをbundle installのように一発で済むようにする


# 背景

Pythonでプロジェクトを使っていると、Libraryが足りなくて、Errorが出たり、Versionが違ってエラーが出たり(?)するので、RubyのGemfileのようなものを作って、必要なLibraryとVersionを一発で管理できるものがないか調べてみた。


# Googleった
python equivalent of a ruby gemfile( http://stackoverflow.com/questions/19280249/python-equivalent-of-a-ruby-gem-file )というリンクにたどり着く


###1. `pip install mypackage`
###2. requirements.txtに必要なLibraryとVersionを記載

```requirements.txt
django==1.5
fabric>1.2
South==0.7.3
```
###3. `pip install -r requirements.txt`でインストール

で、書いたものがインストールできる！

大体これで、やりたいことができた。

ちょっと簡単すぎるが、これから使っていて、付け加えることがあれば、その都度追記予定。



###4. pip freezeでバージョン表示
https://pip.pypa.io/en/stable/reference/pip_freeze/

###5. `pip freeze > requirements.txt`でrequirements.txtに保存




# 参考
http://stackoverflow.com/questions/19280249/python-equivalent-of-a-ruby-gem-file
Raspberry Pi で LAMP


# LAMP の設定
以下のサイトを参考に実施

[IT女子のラズベリーパイ入門奮闘記](http://deviceplus.jp/category/hobby/raspberrypi/)

*  [第28回「手のひらサイズのラズベリーブログ ～WordPressのインストール～」](http://deviceplus.jp/hobby/raspberrypi_entry_028/)

## 下準備

```dos
$ sudo apt-get update
$ sudo apt-get upgrade
```

## Apache のインストール

```dos
$ sudo apt-get install apache2 -y
```
http://localhost/
![apache2.png](https://qiita-image-store.s3.amazonaws.com/0/79874/9e809972-3f14-12fe-40cc-8867b7758f70.png)

### 補足
* 再起動

```dos
$ sudo service apache2 restart
```
または

```dos
$ sudo apachectl restart
```

* 設定ファイルの文法チェック
 
```dos
$ apachectl configtest
Syntax OK
```

## PHP のインストール
```dos
$ sudo apt-get install php5 libapache2-mod-php5 -y
```

```PHP:/var/www/html/info.php
<?php
    phpinfo();
?>
```
http://localhost/info.php

## MySQL のインストール

```dos
$ sudo apt-get install mysql-server php5-mysql -y
```

## まとめ
各バージョンは以下のとおり

```dos
$ cat /etc/debian_version
8.0
$ cat /etc/issue
Raspbian GNU/Linux 8 \n \l

$
$ apache2 -v
Server version: Apache/2.4.10 (Raspbian)
Server built:   Sep  5 2015 17:38:45
$
$ mysql -V
mysql  Ver 14.14 Distrib 5.5.44, for debian-linux-gnu (armv7l) using readline 6.3
$
$ php -v
PHP 5.6.14-0+deb8u1 (cli) (built: Oct 28 2015 00:02:05)
Copyright (c) 1997-2015 The PHP Group
Zend Engine v2.6.0, Copyright (c) 1998-2015 Zend Technologies
    with Zend OPcache v7.0.6-dev, Copyright (c) 1999-2015, by Zend Technologies
$
```

## phpMyAdmin のインストール
以下のサイトを参考に実施
* [Debian 8 Jessie LAMP server tutorial with Apache 2, PHP 5 and MariaDB (instead of MySQL)](https://www.howtoforge.com/tutorial/install-apache-with-php-and-mysql-lamp-on-debian-jessie/#nbspphpmyadmin)

```dos
$ sudo apt-get -y install phpmyadmin
```

自動再設定する web サーバ： apache2
phpmyadmin のデータベースを dbconfig-common で設定しますか? ：はい
データベースの管理権限を持つユーザのパスワード: &#x2a;&#x2a;&#x2a;&#x2a;&#x2a;&#x2a;&#x2a;&#x2a; 
phpmyadmin 用の MySQL アプリケーションパスワード: そのままEnter

これで自動で設定されるはずだが、エラーが発生

![phpMyAdmin_error.png](https://qiita-image-store.s3.amazonaws.com/0/79874/b8a99dcb-c13b-2c4e-967f-f4402b6846a6.png)

とりあえず、Apache を再起動

```dos
$ sudo service apache2 restart
```

http://XXX.XXX.XXX.XXX/phpmyadmin/
![phpmyadmin.png](https://qiita-image-store.s3.amazonaws.com/0/79874/699182a8-3ef6-1375-a3fd-40575662ced1.png)

![phpmyadmin_login.png](https://qiita-image-store.s3.amazonaws.com/0/79874/52cf1bba-b517-03c4-d316-7e3c701e9d08.png)

設定できているようだ。
技術英語 > The problem is that the world is not [standing still], / Stay still.

ソフトの再利用性に関する記事。
http://thecodist.com/article/the-myth-of-reusability

> The problem is that the world is not <font color=red>standing still</font>,

http://eow.alc.co.jp/search?q=standing+still
> じっと立っている、活動しない、静止する、停滞している、現状にとどまる

<hr>
Star Trek Voyagerにてドクターが治療中の患者に対して使うのが

> <font color=red>Stay still</font>.

http://eow.alc.co.jp/search?q=stay+still

「じっとしてなさい」という時に使っている。
herokuでデプロイしたら特定のGemがインストールされない

.gitignoreが原因でした。

```
#/.bundle
```

となっていたので

.bundleの情報がそのままアップされてました。
んで、その中に BUNDLE_WITHOUT: production:staging と記載されていたから当たり前のように本番環境のGemがインストールされない。。

```
/.bundle
```

に戻してうまくいきましたよっと。
bundle installでdevelopmentだけインストールできない

bundle installは
--without production やら
--without testオプションはあるものの

--only developmentというオプションはないようです。

んで、
group :development do
end

の中が全然インストールされない現象が発生してハマりました。

原因は
.bundle/config
でした

この中に　BUNDLE_WITHOUT: development というオプションを書いていたのが原因。
なんでこんなの書いてたんだろ。。。
無料で種類豊富なアイコンフォント、WebHostingHub Glyphs をiOSで使う


#始めに

僕のような絵が描けない人間にとって、
手軽にアイコンが表示できるアイコンフォントはとても強い味方。
最近オーソドックスなアイコン一覧が必要な事情が出来たので、
iOS上でフリーで使えるアイコンフォントを探してみた。

#検索結果
[WebHostingHub Glyphs](http://www.webhostinghub.com/glyphs/#top) という素晴らしい物が見つかった。

#使ってみた
## ダウンロード
[ここ](http://www.webhostinghub.com/glyphs/resources/whhg-font.zip) から、ttfファイルその他のアーカイブが入手できる。

## フォントのインポート
[iOSアプリでカスタムフォントを利用する](
http://qiita.com/Yuta/items/eecbdd107c87c4d68f4d)
 あたりを参考に、ttfファイルをプロジェクトにインポートする。

## 表示させる
### 1. IB上

1.Viewに`UILabel`を追加

![trimmed1.png](https://qiita-image-store.s3.amazonaws.com/0/73290/33a8bd17-4bd3-655b-d54b-3cfb24994161.png)

2.`UILabel`のFontを、Custom -> WebHostingHub-Glyphs に設定

![trimmed2.png](https://qiita-image-store.s3.amazonaws.com/0/73290/2411e2cb-f241-d275-d5d8-b57407f9f686.png)

3.対応するアイコンのテキストを設定

![trimmed3.png](https://qiita-image-store.s3.amazonaws.com/0/73290/ed69b9d9-9115-8d37-ea33-372d0f23c780.png)

### 2. コードで
```swift:ViewController.swift
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let label = UILabel()
        label.font = UIFont(name: "WebHostingHub-Glyphs", size: 20)
        label.text = "forest"
        label.sizeToFit()
        label.frame = CGRect(x: 100, y: 100, width: label.bounds.size.width, height: label.bounds.size.height)
        view.addSubview(label)
    }
}

```

###3. 結果

こうなる

![Simulator Screen Shot 2016.04.29 3.11.45.png](https://qiita-image-store.s3.amazonaws.com/0/73290/1356d397-78d8-312e-4572-350880d30934.png)

#注意点
* [トップページ](http://www.webhostinghub.com/glyphs/#top)で `icon-xxx` と紹介されているものを表示するには、`icon`を省いて`xxx` を設定する。   
例) icon-bag -> bag  
* [トップページ](http://www.webhostinghub.com/glyphs/#top) で `icon-xxx-yyy` と紹介されているものを表示するには、
`xxx` もしくは `yyy` を設定する。  
例) icon-forest-tree -> forest or tree

#ライセンス
[SIL Open Font License](https://ja.wikipedia.org/wiki/SIL_Open_Font_License) なので安心

#終わりに
様々なジャンルのアイコンが豊富にそろっていてとても便利。
しかもフォントなので、画像を使うよりずっと手軽。(端末ごとのppiの差を気にする必要がない)
独特の雰囲気のアプリでアイコンも自作する必要がある、などの特別な場合を除けばどんな場面でも使えると思う。
Postach.ioの記事に多言語対応のFacebookのいいねボタンをつける

##はじめに##

Evernoteでブログを公開できるサービスPostach.ioで、Facebookのいいね/シェアボタンを記事毎に配置する手順について、メモを残したいと思います。


##Facebookのアプリ登録##
1. [このページ](https://developers.facebook.com/apps)から、Webサイトをfbアプリとして登録します。
2. アプリを選択して、公開を許可します。


##htmlを編集する##
1) [このページ](https://developers.facebook.com/docs/plugins/like-button)から、いいねボタンのコードを取得します。
- 仮のURLを入力して、コードを取得を押します。
- 開いた画面のステップ1の通り、登録したFacebookアプリと言語を選択します。
- ステップ2のコードをコピーします。

2) サイトの管理画面からSource Codeを選ぶ。

<img width="1178" alt="screenshot.png" src="https://qiita-image-store.s3.amazonaws.com/0/84185/c625801f-8045-f980-c16b-cbdc54c0ac1b.png">

- コピーしたコードを、`<body>`タグの後にペーストします。
- ついで、ステップ3のコードをいいね/シェアボタンを配置したい位置にペーストします。例えば、`<div class="post-content">`の一番下にペーストしてみます。
- 記事の下、タグの上の間にいいねボタンが配置されるようになります。
- 記事のURLが相対的に指定されるようにコードを編集します。

```html:
data-href="{{ post.url }}"
```

##多言語対応##
```html:
 js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=あなたのid"
```
の部分で、いいねボタンの表示をどの言語で行うか指定しています。
en_USとすると、米語です。固定で済ます場合、en_USが無難かもしれません。
日英で対応したい場合、次のように書き換えます。

```js:

var language = (window.navigator.userLanguage || window.navigator.language).substr(0,2);
  if (language == "ja"){
     language = "ja_JP"
  }
  else {
     language = "en_US"
  }
  js.src = "//connect.facebook.net/" + language + "/sdk.js#xfbml=1&version=v2.6&appId=あなたのid";
```
[baserCMS]メールフォームの和暦日付の範囲指定の仕方


baserCMSのメールフォームでは、フィールドに「和暦日付」を使うことができます。
その範囲指定についてのTips。

## 想定している対象者
- baserCMSでウェブサイトを制作をしている方


## できること
1. 和暦日付を使う際に、現在の年まで指定できる
2. 和暦日付を使う際に、開始年を指定できる


### 環境
- baserCMS 3.1.0-dev 以下


## 指定の仕方

メールフィールド設定のオプション欄を利用して設定します。
設定項目と設定値を半角パイプ「|」で区切って入力。

```
minYear|開始年西暦|maxYear|終了年西暦
```

### 選択リストに表示される終了年を現在にする

```
minYear|開始年西暦|maxYear|today
```

### サンプル

```
minYear|1976|maxYear|today
```


### 参考記事

- http://forum.basercms.net/modules/newbb/viewtopic.php?topic_id=985&forum=3
Mac Book Proを買ってインストールしたもの一覧

今回MacBookProを新しく購入してインストールしたものたち。
開発を行う上であった方が良いものと必須なもののまとめ。

## Webブラウザ

- chrome

## 開発ツール

- XCode
※XCodeをインストールすればiPhoneエミュレータも利用できるようになるので何かと便利。

## ターミナルツール

- iTerm2
https://www.iterm2.com/downloads.html

頻繁に使うコマンドはエイリアスに登録したほうが楽。
Qiitaの以下の投稿を元に幾つか登録しています。
> Macのターミナルでよく使うコマンドにエイリアスを作りました - Qiita
http://qiita.com/pugiemonn/items/da04a422cc7da548632e

### シェル環境

- fish shell
https://fishshell.com/

シェルでのキーワード補完が便利。
ターミナル上の色設定もfish上で `fish_config` を実行すればブラウザで設定可能。

## パッケージ管理ツール

- Home brew
http://brew.sh/index_ja.html

## ソースコード管理ツール
- source tree
https://ja.atlassian.com/software/sourcetree
※2022年追記
GUIだとこれ一択というイメージだけど、IntelliJが出しているIDEツール内で出来たり、慣れるとCUIでGitの操作は行うのであまり使わなくなってしまった。


## エディタ
### テキストエディタ
- Sublime text 3
https://www.sublimetext.com/3

参考
> [sublime text3で日本語入力変換が機能しない場合の解消３ステップ]
(http://qiita.com/akippiko/items/1382faa29833379621f6)

※2022年追記
この記事自体がだいぶ前に投稿したものなので当時使っていたものとしてSublimeTextを上げているけど、今はもっぱらVisualStudioCodeを使っている。

### IDE

#### IntelliJ IDEA: The Java IDE for Professional Developers by JetBrains
https://www.jetbrains.com/idea/

無料版は[ダウンロードページ](https://www.jetbrains.com/idea/download/#section=mac)からCommunity版をダウンロードすればdmgファイルをダウンロード可能。
※2022年追記
PHPだけならPHPStormで十分。個人で使うとしても元取れると思うのでライセンス買ったほうが良い。

## Docker

- Docker For Mac | Docker
https://www.docker.com/docker-mac

> Mac OS X へのDockerのインストール方法 - Qiita
https://qiita.com/hshimo/items/e24b1fbfbf775ec7c941

## MySQL クライアントツール
- MySQL WorkBench
https://dev.mysql.com/downloads/workbench/

SQLクライアントツールは色々あるけどWindowsをメインで使っていた頃から使い慣れているのでなんだかんだこれに落ち着く。

## コミュニケーションツール

-  Slack

ブラウザからも利用できるが、[クライアントツール](https://slack.com/intl/ja/downloads/osx)を利用したほうが管理が楽。


## その他ユーティリティ

### 日本語入力
- google ime
https://www.google.co.jp/ime/
更新されていないけど使い慣れているのでこれ以外使えない。

### メモ管理ツール
- Evernote
https://evernote.com/intl/jp/download/

### メモリ管理ツール
- Memory Clean
https://itunes.apple.com/us/app/memory-clean-monitor-free/id451444120?mt=12

### Androidファイル転送ツール
- Android File Transfer
https://www.android.com/filetransfer/
Automatic Colorization of Grayscale Images を試すメモ


[白黒画像、モノクロ画像を色付きにする https://github.com/satoshiiizuka/siggraph2016_colorization](https://github.com/satoshiiizuka/siggraph2016_colorization) という品物です。素敵そうなので試してみるテスト。

MacOSX(10.11.4)にて。

## Install

Luarocks が必要。以前は `brew install luarocks` で行けるみたいだけど、現在は `brew install lua` になるみたい。

see: https://github.com/keplerproject/luarocks/wiki/Installation-instructions-for-Mac-OS-X

### 依存系

1. NanoMessage `brew install nanomsg`
1. http://torch.ch が必要なので、[Get Install](http://torch.ch/docs/getting-started.html#_)を参考にしてインストール
2. 後は https://github.com/satoshiiizuka/siggraph2016_colorization に書かれているように `luarocks` でインストール


## ちょっと使ってみた感想的なの

画像サイズを 512 x 512 とかすこし小さめにしないと、最近のスマホで取った画像などは `3024 × 4032 ピクセル` なので、使用メモリーが20G超えてマシンがもうダメとネを上げました。

### 使用前

こんな画像。手元に白黒のいいのがなかった。多分、カンチェラーラ。今年分のトレックのカタログ表紙です。

![2016-04-29 00.45.55.png](https://qiita-image-store.s3.amazonaws.com/0/1054/9bca963f-e2fe-3fa2-7173-4d96f2558cb5.png "2016-04-29 00.45.55.png")

### 使用後

![test.png](https://qiita-image-store.s3.amazonaws.com/0/1054/9d9018aa-4c59-6722-398b-392f103688c6.png "test.png")

よくよく思えば、白黒のバイクだし、トレックのカラーリングも白黒じゃねーか、というわけでイマイチぱっとしない残念なコトになっちゃいましたごめんなさい。

まぁそんな感じ。

### パフォーマンス的なの

こんな感じです。

```shell
$ /usr/bin/time th colorize.lua ~/Desktop/2016-04-29\ 00.45.55.png ~/Desktop/test.png                                                                  
        5.17 real         6.59 user         1.88 sys
```


### マシンスペック

  機種名：	MacBook Air
  機種 ID：	MacBookAir6,1
  プロセッサ名：	Intel Core i5
  プロセッサ速度：	1.3 GHz
  プロセッサの個数：	1
  コアの総数：	2
  二次キャッシュ（コア単位）：	256 KB
  三次キャッシュ：	3 MB
  メモリ：	8 GB