OmniAICreator/Qiita-1.07M huggingface dataset:
-webkit-overflow-scrolling と慣性スクロールの考察

```css:CSS
-webkit-overflow-scrolling: touch;
```

Cocoa Touch では UIScrollView の減速率は `UIScrollViewDecelerationRateNormal` がデフォルトなので、明示的に `UIScrollViewDecelerationRateFast` を設定しない限りは Safari のような滑りの悪い慣性スクロールは実現し得ないのですが、Apple は Safari や WebView には滑りの悪いスクロールをあえて設定しているようで、Web のユーザーはこのスクロールしづらい体験を強いられています。アプリであれば Objective-C / Swift 向けの API で慣性スクロールの制御ができますが、Web の世界からはこれに触ることができません。だからといって「オレオレ慣性スクロール／オレオレバウンスバック」なんてものを採用しても iOS のそれとは大きく異なるので、体験・体感を余計に悪くするだけです。

この CSS は慣性スクロールができるようになるだけでなく、「iOS ネイティブアプリと同じ慣性スクロール」を Web の世界だけで適応できるようになります。

ただしこの CSS は iOS の実装にいろいろバグがあるようで、諸刃の剣にも思えます。稀にスクロールがうまくいかなくなったりスクロールインジケータが消滅する、ステータスバータップによる ScrollToTop が効かなくなるといったバグ（あるいは現象）を許容できるなら採用しても良いかもしれません。

- [Webアプリ内で慣性スクロールを実装する - Qiita](http://qiita.com/hmori@github/items/eaeecf2cabac1defaa4c)
- [スマートフォンでページの一部を慣性スクロールできるようにする-webkit-overflow-scrolling – wevdev](http://webdev.jp.net/overflow-scrolling/)
    - [-webkit-overflow-scrollingのサンプル](http://webdev.jp.net/demo/overflow-scrolling/)
- [Smooth native style swipe scrolling with acceleration/deceleration on IOS using overflow-x: scroll; scrollable div using CSS - Stack Overflow](http://stackoverflow.com/questions/18751811/smooth-native-style-swipe-scrolling-with-acceleration-deceleration-on-ios-using)
Value DomainのDNSでSendGridのWhitelabelを設定

#今回の目的
- GitLabで自分用Gitフロントエンドを設定したい。
- 各種メールがちゃんと届くようにしたい。
- Postfixなどは、設定を誤ると大変なことになるのでSendGridを使用する。

##問題
- Value-DomainのDNS設定でSendGridが動作するように設定できない。

##結論
- 設定間違いだった。
- 末端に“**.**”が入っていなかった。
- CNAMEのことを賢く理解できていなかった。



#回避策
> Value-Domain側のDNS設定
>ここで一番大切なのは、sndgrid.netのあとに“**.**”をつけること。
>そうしないと、nslookupしても`s1.domainkey.********.wl.sendgrid.net.自分のドメイン`
となりいつまでもVALIDが :x: のままになってしまう。
>![7.PNG](https://qiita-image-store.s3.amazonaws.com/0/71588/641e4e7a-da89-6563-f955-737131dfc0a6.png)

Value-Domainのヘルプには書いていないのでかなり時間裏消費となりました。
DNSを理解している人ならすぐに解決できるのだろうけど…

> SendGrid側の設定
>![6.PNG](https://qiita-image-store.s3.amazonaws.com/0/71588/e477b29a-4622-35a9-faa1-41275e68078e.png)


##感想
- SendGridのメールの送信の遅延がちょいとある気がする。
- これは単にAzureのインスタンスをBASIC A1にしてるから、GitLabのUnicornのスレッド数の問題の気もする。
- そろそろ自分用のナレッジブログでも作ろうかなぁなんて考えてる。

##お世話になってます
[Azure](https://azure.microsoft.com/ja-jp/) / [GitLab](https://www.gitlab.com) / [SendGrid](https://app.sendgrid.com/)
Railsでロジックを書く場所を意識する

# ロジックの分割

## 対象バージョン
- Ruby 2.2.2
- Ruby On Rails 4.2.3

## ロジックを書く場所
言語を問わずMVCのフレームワークを使う時に以前からよく言われていた話として、ビジネスロジックをコントローラに書いてはいけないというのがあります。
しかし、単にコントローラを薄くすることだけを考えるとモデルがFatになってきたりするので、モデルに切り出すという事以外にもいくつかの方法を知っておく必要があります。

# 実装のパターン

## 1.モデルに実装する
コントローラにコードを書くのではなく、モデルにビジネスロジックを実装してコントローラを薄くします。
ただし、モデルにコードを集約し過ぎるとモデルがFatになってしまうので、本当にモデルに実装すべきかをよく考え、他の層に切り出すことも考えます。

### モデルに実装するパターン
- モデルに紐付いたテーブルのレコード取得（ActiveRecordの操作）
- モデルに紐付いたテーブルをベースとした関連テーブルを含めたデータ取得
- モデルに紐付いたテーブルのデータ更新

単一テーブルの単純な更新など、シンプルな処理が該当すると思います。

## 2.フォームクラス
ビュー上の項目とモデルの項目に差異がある場合など、それを吸収させるものとしてモデルとビューの間にフォームクラスを差し込みます。

### フォームクラスの実装例

フォームクラスはActiveModelをIncludeして実装することで、DB側に無いテーブルやテーブルの項目などの扱いが簡単になります。

例えば入力された内容のメールを送るだけのFAQ画面があった場合、以下のようにフォームクラスを定義することでバリデーションをかけることも可能です。

```
class FaqForm
  include ActiveModel::Model
  attr_accessor :message

  validates :message, presence: true, length: { maximum: 1000 }

  def send
     ....
  end
end
```

ActiveModelをIncludeしているので、`valid?`メソッドなども使えます。

```
  @faq_form = FaqForm.new(faq_form_params)

   if @faq_form.valid?
    ....
  end
```

## 3.サービスクラス
複数のモデル操作やファイル操作などの処理を、アトミックなビジネスロジックのひとまとめの単位としてサービス層として切り出します。

### サービスクラスの実装例

以下のように通常のクラスを定義します。

```
class DataRegistrationService
  def initialize
    ....
  end

  def registrate
    ....
  end
end
```

## 4.Concern
モデルやコントローラ間でしか使わないような共通処理はそれぞれのconcernに切り出します。

### concernのディレクトリ
- app/models/concerns
- app/controllers/concerns

### 実装例

```app/model/member.rb
class Member
  include User
end
```

```app/model/concerns/user.rb
module User
  extend ActiveSupport::Concern

  included do
    attr_accessor :user_name
    def self.default_user_name
      "名無しさん"
    end

    def default_user_name?
      uesr_name == self.class.default_user_name
    end
  end
end
```

## 5.ヘルパの活用
ビュー側で使うような見た目に関するものはヘルパで実装します。
例えば名前に敬称をつける場合など。

```
module UsersHelper
  def display_name(firstname, lastname)
    "#{lastname} #{first name} さん"
  end
end
```

ただし、苗字 + 名前 でフルネームみたいなものは、モデル側でメソッドを実装して仮想化カラムのように扱うこともあります。

## 6.DraperなどのGemを使う
モデルとビューの中間に位置するようなプレゼンター層を扱えるGemもいくつか出ているのでそれを使うのも選択肢としてあると思います。
EC-CUBE3のリードエンジニアではなくなりました。

EC-CUBE3のリードエンジニアとして、QiitaでEC-CUBE3の情報を発信し続けてきましたが、９月末をもってロックオンを退職しました。
ついては、EC-CUBE3のリードエンジニアではなくなりました。

EC-CUBE3のチャンネルの位置づけとしてQiitaを利用する側面が大きくありましたが、今後、このアカウントはエンジニアとして私個人が発信するチャンネルにしたいと思います。

仕事では、技術メンターなどをしていっていることもあり、技術系ブログとしての利用が多くなると思います。AdventCalendarも近いしね。

とはいえ、私の人生の一部であるEC-CUBEを見捨てるわけではなく、これからはコミッターとして、記事にする価値のあるものを発信し続けたいと思います。
（直近で2 -> 3の移行案件もありますし）

Qiitaでの挨拶となり申し訳ありません。
こちらの流入が結構あるため、こちらでも告知させていただきました。
よろしくお願いいたします。
ディレクトリ内のディレクトリを除くファイル名だけを抜き出す

## 追記

コメント欄が本番（短いけど）
@takahirom さんありがとうございます！


## 背景

`os.listdir(path)` すると、`path` 内のファイル、ディレクトリ一覧をリストで出力してくれるけど、ディレクトリだけ、とかファイルだけ、とかを取得したいと考えるとちょっとなんかな、となったので考えてみた。

なお、環境はPython2.7.10、OSはWindows7です。


## やってみた結果

なんかもっとスマートに出来る方法がありそうな気がします。

```py
import glob
import os

def fileonly_listdir(path):
    return [ i for i in os.listdir(path) if i not in [ j.replace(path, "").strip("\\") for j in glob.glob(os.path.join(path, "*") + "/")]]
```

わかりにくいので分解。

```py
import glob
import os

def fileonly_listdir(path):
    list_dir = os.listdir(path)  # ディレクトリのオブジェクト一覧を取得…1
    dir_only_list = glob.glob(os.path.join(path, "*") + "/")  # 特定のpathの中の、末尾が"/"のオブジェクト＝ディレクトリのみ抽出
    # ただし、"path\\dir\\" という形式になる

    dir_only_list = [ i.replace(path, "").strip("\\") for i in dir_only_list ]  # 邪魔なものを排除…2

    file_only_list = [ i for i in list_dir if i not in dir_only_list ]  # 1から2を引き算

    return file_only_list
```

つまり、ディレクトリだけのリストが欲しければ

```py
import glob
[ i.replace(path, "").strip("\\") for i in glob.glob(os.path.join(path, "*") + "/")]
```

で良いです。

リスト内包表記をネストして使うとすごく分かりづらいので、`filter`とか使った方が良いのかも知れません。
VOCALOID 4 「巡音ルカ V4X」のインストールではまったこと

#歌手リストの一覧に「巡音ルカ V4X」 (LUKA_V4X_～) が表示されない

**原因**
Windows 7 x64 環境において，普通にインストールすると何故か VOCALOID4 API (32-bit) のみがインストールされる．
(VOCALOID4 API (64-bit) がインストールされない)
→ Piapro Studio が V4 モードではなく V3 モードで立ち上がる．
→ V3 モードから VOCALOID4 音声ライブラリである「巡音ルカ V4X」を使用することはできない．
(推定原因: インストールする PreSonus Studio One と Piapro Studio と VOCALOID4 API 一式について，32-bit か 64-bit のいずれか一方に揃える必要がある)

Piapro Studio が V3 モードと V4 モードのどちらとして起動しているかは
- Piapro Studio ウィンドウ左上の製品ロゴに「for V4X」があるか否か．
- Piapro Studio の ヘルプ → バージョン情報 の表示に V4 Mode か V3 Mode かの別が書いてある．
などで判別できる．

**対策**
巡音ルカ V4X のインストーラから「修正」を実行すれば，VOCALOID4 API (64-bit) が追加でインストールされる．
次回以降の Piapro Studio の起動で V4 モードになる．

[VOCALOID APIの再インストール方法 | Piapro Studio Official Website → VOCALOID4 APIの再インストール方法](http://piaprostudio.com/?p=5176#VOCALOID4API)

#PreSonus Studio One や Piapro Studio 実行中に他のアプリから音が出ない

**現象**
- 他のアプリから音が出ない．
- 「ファイルの再生中に Windows Media Player に問題が発生しました。」 (Windows Media Player の場合)
- 「Unrecoverable playback error: Unknown error code (0x8889000A)」 (foobar2000 の場合)

**対策**
これは FAQ 案件．
スタートページ (起動直後のページ) → オーディオデバイスを設定... → オーディオデバイス「Windows Audio」などの右隣にある「コントロールパネル」ボタン → エクスクルーシブモード のチェックをオフ．

#PreSonus Studio One や Piapro Studio から音が出ない

**現象**
PreSonus Studio One 起動時に下記のようなメッセージが表示され，Studio One や Piapro Studio から音が出ない．

>RealTek Digital Output(Optical) (Realtek High Definition Audio)[^1] を開けません。
>オーディオ再生は無効化されています。

[^1]: RealTek Digital Output(Optical) (Realtek High Definition Audio) というデバイス名は自分の環境の場合

**対策**
コントロールパネル → サウンド → 「再生」タブ → 既定のデバイス[^2] をダブルクリック →「詳細」タブ → 既定の形式「共有モードで使用されているサンプル レートとビットの深さを選択します。」の下にあるリストボックスを切り替える．ここが Studio One の設定と一致していないと使えない．

[^2]: 自分の環境では RealTek Digital Output(Optical))

例：
変更前「2 チャネル、24 bit、192000 Hz (スタジオの音質)」
↓
変更後「2 チャネル、24 bit、44100 Hz (スタジオの音質)」
El Capitan アップデートした際にCPUの使用率が高くなる

同様にはまった人がいたら早く検索にヒットして欲しいので、作成。
（非エンジニアの方にも理解していただくよう作成）

## 現象
El Capitan アップデートした際にCPUの使用率が高くなりました。
僕が生じた現象としては、以下です。

* ファンが常に回ったまま
* CPUの使用率が常に100％
* Safariで特定のページが開かない(僕はTwitter）
* Safariが重い
* App Storeが開かない

## 対処方法
以下の手法を参考にさせていただきました。ありがとうございます。

[El capitanにアップデートしてCPU使用率がやばくなった時の対応法](http://qiita.com/Keech/items/636ceee3528c1424066c)
[El capitanをインストールしたら、CPU使用率が高すぎて困ってる！という人向け。](http://f-shin.net/fsgarage/3818)
[OS X El Capitan にアップデートして App Store などに繋がらなくなった時の対処法](http://beniyama.hatenablog.jp/entry/2015/10/02/235728)

## 実際の僕の対応方法
最初、証明書を更新しようとしました。
しかし、証明書を表示しようとした際にフリーズして動かなくなるので、ターミナルで以下のコマンドを実行したら、解消した。

```bash
cd ~/Library/
mv Keychains Keychains.org

# もしかしたら、こっちのコマンドの方が良いかもしれません
mv ~/Library/Keychains Keychains.org
```

## 私の環境
|項目||
|---|----------------|
|PC|MacBook Air (11-inch, Mid 2011)  |
|プロセッサ|1.6 GHz Intel Core i5|
|メモリ|4 GB 1333 MHz DDR3|
CentOS 5 で MySQL 5.6.27 を利用する


[MySQL Community の yumリポジトリ](https://dev.mysql.com/downloads/repo/yum/)を追加して、MySQLをインストールしてみたけれども、
MySQLを起動する時に以下のエラーが発生する。

```bash
$ sudo /sbin/service mysqld start
chown: `mysql:mysql': ユーザ指定が不正
chown: `mysql:mysql': ユーザ指定が不正
MySQL データベースを初期化中:  Use of uninitialized value in chown at /usr/bin/mysql_install_db line 706.
Use of uninitialized value in chown at /usr/bin/mysql_install_db line 706.
Use of uninitialized value in chown at /usr/bin/mysql_install_db line 706.
Use of uninitialized value in chown at /usr/bin/mysql_install_db line 706.
2015-10-11 23:56:22 0 [Warning] TIMESTAMP with implicit DEFAULT value is deprecated. Please use --explicit_defaults_for_timestamp server option (see documentation for more details).
2015-10-11 23:56:22 0 [Note] /usr/sbin/mysqld (mysqld 5.6.27) starting as process 7245 ...
2015-10-11 23:56:22 7245 [ERROR] Fatal error: Can't change to run as user 'mysql' ;  Please check that the user exists!

2015-10-11 23:56:22 7245 [ERROR] Aborting

2015-10-11 23:56:22 7245 [Note] Binlog end
2015-10-11 23:56:22 7245 [Note] /usr/sbin/mysqld: Shutdown complete

                                                           [失敗]
chown: `mysql:mysql': ユーザ指定が不正
```

mysql ユーザを作成してからインストールをすれば解決するのだが、根本解決のために、RPMを作りなおしてみる。

事前に以下の方法で環境は構築済みとする

* [RPM の build環境を構築する](http://qiita.com/kopug/items/f8090e50c2e8ed278582)

## src.rpm を取得して、インストールをする

```bash:command
$ cd ~
$ sudo yumdownloader --source mysql-5.6.27 --enablerepo=mysql-connectors-community-source
$ rpm -ivh ~/mysql-community-5.6.27-2.el5.src.rpm
```

## SPECファイルを変更する

* useradd "-N" のオプションを削除する
	* これが原因でユーザ追加に失敗をしているため

```diff:mysql.spec
627c627
< /usr/sbin/useradd -M -g mysql -o -r -d /var/lib/mysql -s /bin/bash \
---
> /usr/sbin/useradd -M -N -g mysql -o -r -d /var/lib/mysql -s /bin/bash \
```

## RPMを作成する

```bash:command
$ rpmbuild --define 'dist .el5' --define 'rhel 5' --define 'el5 1' -ba ~/rpmbuild/SPECS/mysql.spec
```

ここで作成したRPMをインストールすれば、最初に書いたエラーが出なくなります。
Amazon Auroraについての簡単なメモ

Amazon Auroraについて気になったので色々調べたメモ書きを残しておきます


Auroraとは
=======================================

Amazon Aurora は、MySQL と互換性のあるリレーショナルデータベースエンジンで、
高性能の商業用データベースの可用性およびスピードと、オープンソースデータベースのコスト効率性および簡素性を併せ持っています。
Amazon Aurora は、MySQL の 5 倍の性能を持ち、
同様の機能や可用性を提供している商用データベースの 10 分の 1 の価格です。
MySQL、Oracle、Microsoft SQL Server、PostgreSQL に次いで、
Amazon Aurora は Amazon RDS のお客様が利用できる 5 番目のデータベースです。
※引用元：<https://aws.amazon.com/jp/rds/aurora/>
※2015/10/7より東京リージョンで利用可能

MySQLとの比較
=======================================

* お値段：MySQLより1.2倍ほど高い
* MySQLからAuroraへのマイグレーションも簡単
    * 方法１：「mysqldump & mysqlimport」、単純にダンプして、それをAuroraに食わせる
    * 方法２：DBスナップショットからAuroraのインスタンスを立てる
* MySQLでは面倒だった、ストレージは自動拡張（拡張の最小単位は10G）
参考より抜粋：<http://dev.classmethod.jp/cloud/aws/new-rds-database-engine-aurora-faq/>

耐障害性は強い
=======================================

下記参考によると、第三者視点からも以下の障害テストを実施しているが、十分な耐久性をもっているとのこと
* インスタンスのクラッシュ
* レプリカの障害
* ディスクの障害
* ディスクの輻輳
参考：<http://dev.classmethod.jp/cloud/aws/recovery-test-aurora/>

MySQLのメリット/デメリットも享受(MySQLと互換性をもつ)
=========================================

つまりそれって、MySQLのメリットとデメリット両方もつことかと思い、
MySQLについて調べなおしてみました

下記記事によると、
<http://srad.jp/story/07/05/26/1222259/>

▼MySQLのメリット
----------------------------------------

* すでに普及していること
* シンプルであること
* TCOが低いこと
* よくサポートされていること
* 柔軟性やスケーラビリティに富むこと
* 最新テクノロジーのネイティヴサポートを持つことを挙げ

▼MySQLを使うべきでない理由
-----------------------------------------

* ライセンスがGPLであること
* それが嫌なら商用のプロプライエタリライセンスを買わなければならないこと
* 既存データベース環境との統合性の問題
* 製品としての未成熟
* 機能的な不十分さ
* 認証制度の不備
* 企業内での知名度の問題


MySQL Connector JDBCドライバの仕様
========================================

AuroraをJDBC経由で接続するときは、MySQLのJDBCを利用します。
※参考：AuroraのJDBCパラメータ
<http://dev.classmethod.jp/cloud/amazon-aurora-supports-metadata/>

したがって、MySQLのJDBCドライバの考慮点を参考元よりのせておきます。
参考：<http://saiya-moebius.hatenablog.com/entry/2014/08/20/230445>

* SELECT 結果は全部メモリに載ってしまう (デフォルト設定で)
* 前回のクエリ処理から一定時間以上経過するとコネクションが切られる
* クライアントサイド プリペアドステートメントになっている (デフォルト設定で)
* 裏で勝手にスレッドが走っている -> そしてメモリリーク
PhoneGap Buildについてメモ

# PhoneGap Build
スマホアプリのビルドツールとして、Monaca( https://ja.monaca.io/ )以外に AdobeのPhoneGap Build ( https://build.phonegap.com/ )というものがあるのを知り、少し調べてみた。

参考
MonacaとPhoneGap Buildを試してみる
http://qiita.com/itagakishintaro/items/5b276a0ecee209d0c341

## IDE
PhoneGap Build には IDEが存在しない。
ソースコードは 公開GitHubから参照するか、zipファイルをアップロードする(プライベートアプリケーション）。

## プロジェクトの制限
Monacaは登録可能なプロジェクト数の制限が厳しい。
Freeで3つ、Personal(月980円)で５個、Gold(月5000円)で100個である。
GihtHubからの参照であれば、PhongGap Buildは無制限。

また、MonacaのFree版の場合、「実機ビルドは24時間で3回程度まで」という制約がある。

## プラグイン
MonacaにはMonacaプラグインやOnsenUIなどは存在するが、PhoneGap Buildのほうがプラグインが充実しているとは個人的に思う。
また、両サービスともに独自プラグインの使用は有料コース(MonacaはGold以上)である必要がある。

## mBaaS
Monacaと異なり、PhoneGap Buildはデータストア、PUSHなどのmBaaS機能はない。
別のmBaaSと連携することが前提。

## PUSH機能
MonacaでPUSH機能を利用する場合、MonacaのmBaaSと連携するMonacaAPIかnifty cloudとの連携しか標準で利用できない為、それ以外のmBaaSを利用するなら、独自プラグインを使用する必要がある。
また、MS Azureとも外部連携可能だが、PUSHは対応していない。
これに対し、PhoneGap Buildの PushPlugin は 標準のmBaaSこそないが、MS Azure、AWS SNS、Parse.com といった外部mBaaSとの連携が可能である。

個人的には WindowsストアアプリのPUSH機能(WNS)対応を検討しており、Monaca mBaaS、nifity cloudは対応してなかったので、気になっていたのだが、

## Windowsストアアプリ
Monacaの場合、デバッグビルドなら、Windowsストアアプリを開発できるそうだ（リリースビルド対応は検討中）。
これに対し、PhoneGap Buildはビルドできない。
RPM の build環境を構築する


## 手順

### rpmdevtools が無い場合は予めインストールをする

#### CentOS 5系 の場合

```bash:command
$ sudo yum install rpmdevtools --enablerepo=epel
```

#### CentOS 6系 の場合

```bash:command
$ sudo yum install rpmdevtools
```

### 環境整備

```bash:command
$ rpmdev-setuptree
```

### 結果

```bash:command
$ tree ~/
```
```bash:output
.
`-- rpmbuild
    |-- BUILD
    |-- RPMS
    |-- SOURCES
    |-- SPECS
    `-- SRPMS
```
    
```bash:command
$ cat ~/.rpmmacros
```

```bash:output
%_topdir      %(echo $HOME)/rpmbuild
%_smp_mflags  -j3
%__arch_install_post   /usr/lib/rpm/check-rpaths   /usr/lib/rpm/check-buildroot
```
JavaScript再入門~DOMの操作~

# DOMとは？
ブラウザ自体はwindowという組み込みオブジェクトでJavaScriptから扱うことができます。

```js:
    console.log(window.outerHeight); // ブラウザの高さを表示
    window.location.href = 'http://google.com'; // 別ページへ遷移
```

windowオブジェクトにはブラウザの高さを示す「window.outerHeight」や、別のページに飛ばすwindow.location.href」などがあります。

そして、このwindowオブジェクトの中で、特によく使うようになるのが、「window.document」です。これは一言で言うと、「今開いているページ」になっています。
window.documentをJavaScriptで操作することによって動的にページの一部を書き換えたり、新しい要素を追加したりといったことができるようになります。
ちなみに、window.documentにアクセスする時はwindowは省略可能なので、ただのdocumentでもアクセスできます。

そして、documentにアクセスするための色々な命令を document object model と言います。
一般的に**DOM（ドム）**と呼ばれていて、DOM をいじる、DOM を操作する、といった使い方をします。

# DOMを操作する
DOM を使って動的にページを書き換えてみます。
ちなみにブラウザは HTML や CSS を読み込んだ後に、それぞれの要素をツリー構造で展開していきいます。
html の子要素として head と body があって、body の子要素として h1 や p 等があるといった状態です。DOM を弄る時はこのツリー構造が大事です。

```html:
    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>JavaScriptの練習</title>
    </head>
    <body>
        <h1>見出し</h1>
        <p id="msg">こんにちは！</p>
        <script>
            // 「こんにちは!」を「Hello!」に変更
            var e = document.getElementById('msg');
            e.textContent = 'Hello!';

            // 「Hello!」の下に「Hello world」を表示
            var greet = document.createElement('p'),
                text = document.createTextNode('Hello world');
            document.body.appendChild(greet).appendChild(text);
        </script>
    </body>
    </html>
```

まずp要素のテキストを書き換えてみます。
p要素のid 名を指定して、「var e = document.getElementById('msg');」で取得することができます。
テキストを書き換える場合、textContent というものが使えるので、「e.textContent = 'Hello!';」とすると、「こんにちは」が「Hello!」に書き換ります。

新しく自分で要素を作ることも可能です。
body 要素の中に、p 要素を追加して、その p 要素の中にtext を仕込んでみます。
Hello world というテキストを作りたいので、greet という element を作ります。
element を作る時には、createElement というものを使います。
タグネームを指定すればいいので「var greet = document.createElement('p'),」とします。
その後に text を追加していきます。
text の場合は、createTextNode を使います。
「text = documet.createTextNode('Hello world');」のように中に好きなテキストを入れてあげます。
そこまで出来たら、body に対して子要素を追加していきたいので「document.body.appendChild()」というのを使えば子要素の最後に追加してくれます。
今回追加したいのは、greet で、更に appendChild してあげて text を入れてあげれば OK です。
実行すると、Hello! の下に Hello world と出てきます。

参考：http://dotinstall.com/lessons/basic_javascript_v2
Swift2.0で正規表現


Swiftで正規表現扱うときどうやるんだろうと思って調べてるうち行き着いた先が「EasyRamble」さんの以下の記事です。
http://easyramble.com/swift-regular-expression-utility.html

ただSwift2.0になって少し変わっているようなので、手を加えました。

## init
### 変更前
```swift:init
init(_ pattern: String) {
    self.pattern = pattern
    var error: NSError?
    self.internalRegexp = NSRegularExpression( pattern: pattern, options: NSRegularExpressionOptions.CaseInsensitive, error: &error)!
}
```

### 変更後

NSRegularExpressionの引数にエラーが含まれなくなったようです。

なので以下のようにtry catchへ変更しました。


```swift:init
init(_ pattern: String) {
    self.pattern = pattern
    do {
        self.internalRegexp = try NSRegularExpression(pattern: pattern, options: [])
    } catch let error as NSError {
        print(error.localizedDescription)
        self.internalRegexp = NSRegularExpression()
    }
}
```


## isMatch
### 変更前
```swift:isMatch
func isMatch(input: String) -> Bool {
    let matches = self.internalRegexp.matchesInString( input, options: nil, range:NSMakeRange(0, count(input)) )
    return matches.count > 0
}
```

### 変更後
optionsの指定方法ぐらいですね。

```swift:isMatch
func isMatch(input: String) -> Bool {
    let nsString = input as NSString
    let matches = self.internalRegexp.matchesInString(input, options:[], range:NSMakeRange(0, nsString.length))
    return matches.count > 0
}
```


## matches
### 変更前
```swift:matches
func matches(input: String) -> [String]? {
    if self.isMatch(input) {
        let matches = self.internalRegexp.matchesInString( input, options: nil, range:NSMakeRange(0, count(input)) )
        var results: [String] = []
        for i in 0 ..< matches.count {
            results.append( (input as NSString).substringWithRange(matches[i].range) )
        }
        return results
    }
    return nil
}
```

### 変更後
countの箇所でエラーが起きるので以下のように変更しています。

```swift:matches
func matches(input: String) -> [String]? {
    if self.isMatch(input) {
        let nsString = input as NSString
        let matches = self.internalRegexp.matchesInString( input, options: [], range:NSMakeRange(0, nsString.length) )
        var results: [String] = []
        for i in 0 ..< matches.count {
            results.append( (input as NSString).substringWithRange(matches[i].range) )
        }
        return results
    }
    return nil
}
```

## 個人的に追加
正規表現で一致した内容を削るものです。

```swift:delMatches
func delMatches(input:String) -> String {
    var strRet:String = input
    if self.isMatch(input) {
        let matchList = self.matches(input)
        for var i = 0; i < matchList!.count; i++ {
            strRet = strRet.stringByReplacingOccurrencesOfString(matchList![i], withString: "", options: [], range: nil)
        }
    }
    return strRet
}
```

### 使い方
左側に正規表現を記載し、右側に対象の文字列を書きます。

```swift
Regexp("（\\d+）").delMatches(self._strTitle)
```

以上です。
Dockerにホストのフォルダをマウントしたい！

docker-machineをVirtualBoxで使っているときにデータを永続化したい場合には、
Data Volumeと共有フォルダ機能を組み合わせてデータを保存する方法があります。

基本的な使い方と、任意のディレクトリをマウントする応用形の２種類を用意しました。
ちょくちょく読み替えればMacでも使えると思われます。

## 前提

- Windows 10
- VirtualBox 5.0.6
- Docker Toolbox 1.8.2c
- dev という名前で VirtualBox上に docker-machine VM を用意しています

## 【基本形】`C:\Users` 配下をData Volumeにする場合

まずは基本形。docker-machine (旧 boot2docker)は Windows環境であれば、
`C:\Users` をVirtualBox共有フォルダとしてdockerホストの `/c/Users` に自動マウントしてくれます。

そのため、docker-machineホスト(VMを実行しているホスト)のパスと、
dockerホストのパスとの差異をほとんど気にせずData Volumeにすることができます。

例えば hoge ユーザーのユーザーディレクトリをData Volumeにするには下記のようなコマンドになります。

```sh
docker run -v /c/Users/hoge:/hoge busybox ls -la /hoge
```

## 【応用形】`C:\Users` 配下以外をData Volumeにする場合

`C:\Users` 配下以外をdockerコンテナで利用したい場合は、`docker run -v` する前に、
docker-machine がやってくれていることを自分でやってあげる必要があります。

コマンドは下記のようになります。

```sh
# VboxManageでVirtualBox共有フォルダを追加する (初回のみ)
VBoxManage sharedfolder add dev --name data --hostpath "/path/to/data"

# dockerホスト上に共有フォルダをマウントする (dockerホストを起動するたび行う)
docker-machine ssh dev 'sudo mkdir -p /path/to/mount'
docker-machine ssh dev 'sudo mount -t vboxsf -o uid=0,gid=0 data /path/to/mount'

# dockerホストにマウントした共有フォルダをData Volumeとして利用する
docker run -v /path/to/mount:/data busybox ls -la /data
```

#### 例) `D:\` をまるごとマウントする場合

```sh
# VboxManageで D:\ を d として共有フォルダを追加
VBoxManage sharedfolder add dev --name d --hostpath 'D:/' --automount

# dockerホスト上に共有フォルダ d を /d にマウントする
docker-machine ssh dev 'sudo mkdir -p /d'
docker-machine ssh dev 'sudo mount -t vboxsf -o uid=0,gid=0 d /d'

# dockerホストにマウントした /d をコンテナ内の /d でData Volumeとして利用する
docker run -v /d:/d ubuntu ls -la /d
```

----

## 備考

#### Git for Windows など bash 上での注意
この環境から `docker run` すると、うまくコマンドラインオプションを解析してくれないようでした。
`docker run -v //d:/d busybox ls -la //d` のように最初の `/` を2つにしてやると良いようです。

#### Data Volume とは
dockerコンテナはそのままではデータを永続的に保持できませんが、
その制約を受けない特別なディレクトリということらしいです。

例えば普通にdockerでMySQLを立ち上げて、落としてしまうと
次に`docker run`したらそれまでのデータが無かったことになってしまうので (厳密には違うらしい)
そのようなデータを保持してくれなきゃ困る！といった場合に使う機能ということのようです。

#### Data Volume Container とは
複数のdockerコンテナで永続的なデータを共有させたい場合は、
Data Volumeだけを世話するコンテナを用意してあげて、そのコンテナを
他のコンテナから利用してやるのが良いらしいです。
今回は割愛。下記のエントリがとても参考になりました。
ref: http://qiita.com/sokutou-metsu/items/b83b275198fc9594f5a4

#### docker-machine がもっと賢くなるかも？

ref: https://github.com/boot2docker/boot2docker#virtualbox-guest-additions
> It is also important to note that in the future, the plan is to have any share which is created in VirtualBox with the "automount" flag turned on be mounted during boot at the directory of the share name (ie, a share named home/jsmith would be automounted at /home/jsmith).

…とのことで Virtualbox上で自動マウントになってるディレクトリを
よしなにやってくれるような構想があるようです。
FlurryなどのFrameworkを使っていてlinker command failed with exit code 1 となったときの対応


Build Phasesの Link Binary With Librariesを見て、不要な（または足りない）frameworkがないかを確認する。

![e21b778881bd851811e55f16817fe49c.png](https://qiita-image-store.s3.amazonaws.com/0/5960/9b6f1b4a-6574-4e47-65f8-48645e0a5552.png "e21b778881bd851811e55f16817fe49c.png")

ここ。∑

あとは、

- メニューバーのProductを押してCleanしてキャッシュ削除
- メニューバーのProductを押してoption(alt)キーを押してClean Build Folderしてもっとキャッシュ削除

したり。

似たような問題を解決する記事: http://qiita.com/kuuki_yomenaio/items/b1b826a45ee6ff00eb90
コマンドラインでRを実行するRioの紹介


## はじめに
- [コマンドラインではじめるデータサイエンス](http://www.oreilly.co.jp/books/9784873117416/)を読み始めて気になったツール。
- Rの関数などを気軽にRを起動せずとも、気軽にコマンドラインからRを操作できるツール
- 中身は、[jeroenjanssensのGithubページ](https://github.com/jeroenjanssens/data-science-at-the-command-line/blob/master/tools/Rio)を読めば分かるが、1つのシェルスクリプト。
	- csvファイルを指定して、それをdata.frameのdfオブジェクトにロードして、Rの文法で操作できるということをしてる。シンプルだけど、便利そう。

## インストール
- git clone してから、PATHの通っている場所にRioを置くだけ
- Rがインストールされてないと実行時にエラーが吐かれます

```
$ git clone https://github.com/jeroenjanssens/data-science-at-the-command-line.git
$ sudo mv data-science-at-the-command-line/tools/Rio /usr/local/bin/
```

確認してみる。ggplot / dplyr / tidyrをインストールしてるのが前提みたいです。

```
$ Rio -h
Rio: Load CSV from stdin into R as a data.frame, execute given commands, and get the output as CSV on stdout

usage: Rio OPTIONS

OPTIONS:
   -d      Delimiter
   -e      Commands to execute
   -f      Single command to execute on data.frame
   -h      Show this message
   -g      Import ggplot2
   -n      CSV has no header
   -r      Import dplyr and tidyr
   -s      Import sqldf
   -b      Use same settings as used for book Data Science at the Command Line
   -v      Verbose
```

## 実行
iris.csvに対して、ある列の平均を見る

```
$ head iris.csv -n 3
,Sepal.Length,Sepal.Width,Petal.Length,Petal.Width,Species
1,5.1,3.5,1.4,0.2,setosa
2,4.9,3,1.4,0.2,setosa
```

### -e オプションでRの文法で実行

```
$ Rio -e 'mean(df$Sepal.Length)' < iris.csv
5.843333
```

```
$ Rio -e 'summary(df$Sepal.Length)' < iris.csv
   Min. 1st Qu.  Median    Mean 3rd Qu.    Max.
  4.300   5.100   5.800   5.843   6.400   7.900
```

### -f オプションでRのある関数を実行

相関行列を計算

```
$ cut -d, -f 2,3 iris.csv | Rio -f cor
"Sepal.Length","Sepal.Width"
1,-0.117569784133002
-0.117569784133002,1
```

### -g オプションでggplotを実行

例えば、Sepal.Lengthの密度分布を描くのは下記。"g"ってのがggplot()を呼び出す。ggplotの結果は、pngファイルに書き出せば表示できるみたい。

```
$ Rio -ge 'g+geom_histogram(aes(x=Sepal.Length))' < iris.csv > result.png
```

## おわりに
- コマンドラインからRをちょっと試して確認したいってのはニーズがあるので、そういうときに便利そう。Rファイルをいちいち作らなくていい。
- dplyrも呼び出せるので、パイプ演算子で、データ前処理して、可視化まではすぐにできそう。可視化結果はどっかのWebサーバが起動しているところにpngファイルを置くとか。
- Rio自体をもっと汎用的にしていくのに期待。


## 参考
- [コマンドラインではじめるデータサイエンス](http://www.oreilly.co.jp/books/9784873117416/)
FluxをjQueryに導入するためjquery.redux.jsを考えてみた

FluxをjQueryベースのJavaSctiptプロジェクトに導入したいので
FluxライブラリReduxと連携するためのjQueryプラグインを考えてみました。

![jquery.redux.js画像](https://raw.githubusercontent.com/nowri/jquery.redux.js-sample/images/flux-redux1.png)

[Flux](https://github.com/facebook/flux#readme)の図を編集したものです。Reactを使わずjQueryのAPIで代替します

#実装
↓プラグインコード
https://gist.github.com/nowri/bb00a12fe759ea055da7

↓使い方サンプル

```js

// Action:
var increaseAction = function() {
    return {type: 'increase'};
};
var actions = {
    increaseAction: increaseAction
};
// Reducer:
var counter = function(state, action) {
    var count;
    if(typeof state === 'undefined') {
        state = {count: 0};
    }
    count = state.count;
    switch(action.type) {
        case 'increase':
            return {count: count + 1};
        default:
            return state;
    }
};
// Store:
var store = Redux.createStore(counter);
//初期設定
$.reduxInit(actions, store);
$(function() {
    var $App = $("#root");
    CounterTemp = _.template($("#counter").html());
    $App
        .redux("on")//jQueryオブジェクトとReduxを紐付ける
        .on("reduxChange", onReduxChange)
        .click("button", function() {
            $App.trigger("redux:increaseAction", []);
        })
        .html(CounterTemp({count: 0}));
});
function onReduxChange(e, state) {
    $(this).html(CounterTemp({count: state.count}));
}
```

##初期設定
1.
[jQuery](https://code.jquery.com/)と[Redux](https://github.com/rackt/redux/releases)を読み込みます。（BrowserifyやWebpackを使用しない場合、redux.jsは事前にビルドする必要があります）

2.

```js
$.reduxInit(actions, store);
$("【任意のjQueryオブジェクト】").redux("on");
```

##UserInteractions -> ActionCreators
![jquery.redux.js画像](https://raw.githubusercontent.com/nowri/jquery.redux.js-sample/images/flux-redux2.png)

```js
$("【jQueryオブジェクト】").trigger("redux:【action関数名】", ["【引数】"]);
```
`redux("on")`されたjQueryオブジェクトから、上記仕様`trigger`を使ってActionを呼び出すことができます

##Change Events + Store Queries

![jquery.redux.js画像](https://raw.githubusercontent.com/nowri/jquery.redux.js-sample/images/flux-redux3.png)

```js
$("【jQueryオブジェクト】").on("reduxChange", onReduxChange);
function onReduxChange(e, state) {
  $(this).html(CounterTemp({count: state.count}));
}
```

`redux("on")`されたjQueryオブジェクトの`reduxChange`をバインドすることで、第２引数の`state`オブジェクトから`store`の更新を受け取れるようになります。

##サンプル
[simplest-redux-example(ES5)](https://github.com/jackielii/simplest-redux-example/tree/es5)を参考にサンプルを作ってみました
###デモ
http://nowri.github.io/jquery.redux.js-sample/index.html
###ソース一式
https://github.com/nowri/jquery.redux.js-sample


#次は
CanvasライブラリとReduxの連携について考えてみたいと思います
Python3でGUIを作ってArduinoと連携

## GCODEを送る簡易的なGUI
自作工作機械を作る課程で、GUIを使ってArduinoを操作しようと試みました。GCODEを送る簡易的なGUIの製作を目指してますが、ひとまず通信するところのメモ。
「ON」、「OFF」と書かれたボタンを押すとArduinoの附属LED(13番ピン)のON, OFFができる。

## 概要

- PythonのGUIは標準のTkInterを使用
- モジュールとしてpySerialを入れる
- Pythonのバージョンは3.5.0
- ArduinoUnoを使用

### ハマった箇所
シリアル通信でPythonのGUIからArduinoへ文字を送るとき、そのまま送ると`TypeError: an integer is required`というエラーが発生。調べていると文字のエンコードが問題と判明。文字は`somechar.encode('utf-8')`のようにUTF-8を指定して送るとエラーが出なくなり、正常に動くようになりました。

### Python

```py3 
from tkinter import *
import serial

class App:
    def __init__(self, master):
        frame = Frame(master)
        frame.pack()

        # アプリを終了
        self.quit = Button(frame,
                text="QUIT", fg="red",
                command=frame.quit)
        self.quit.pack(side=RIGHT)

        # これから実装予定。今はただ文字をプリントするだけ
        self.init = Button(frame,
                text='INIT',
                command=self.init)
        self.init.pack(side=LEFT)

        # LED ON
        self.on = Button(frame,
                text='ON',
                command=Ser.on)
        self.on.pack(side=LEFT)

        # LED OFF
        self.off = Button(frame,
                text='OFF',
                command=Ser.off)
        self.off.pack(side=LEFT)

    def init(self):
        print ('initialize printer')

class Ser:
    def on():
        flag = 's'
        arduino.write(flag.encode('utf-8'))
    def off():
        flag = 'd'
        arduino.write(flag.encode('utf-8'))
    def init():
        flag = 'a'

root = Tk()
# 通信を開始
arduino = serial.Serial("/dev/tty.usbmodem1411", 9600)
# 画面の大きさを指定
root.geometry('400x300')
app = App(root)
root.mainloop()
# 通信を終了
arduino.close()
```

### Arduino
``` c
void setup()
{
  pinMode(13,OUTPUT);
  Serial.begin(9600);
}

void loop()
{
  int input;

  if(Serial.available()>0){
    input = Serial.read();
    switch(input){
      case 's':
        digitalWrite(13,HIGH);
        break;
      case 'd':
        digitalWrite(13,LOW);
        break;
    }
  } else {
  }
}

```

自分の環境(Mac OS:Yosemite)では正常に動作しましたが、他の環境で動作するかは分かりません。
自分用：Newmark-β法

#早速コード
```jl

function newmarkβ(input, Δt, ω, h, β=0.25, ε=0.000001)
  output = zeros(input)
  
  u̇ₓ = u̇₁ = zeros(input[:, 1])
  uₓ = u₁ = output[:, 1] = zeros(input[:, 1])
  üₓ = ü₁ = -input[:, 1] - 2 * h * ω * u̇₁ - ω ^ 2 * u₁
  
  for x=1:length(input)-1
    ǖₓ₊₁ = üₓ
    while true
      u̇ₓ₊₁ = u̇ₓ + 0.5 * (üₓ + ǖₓ₊₁) * Δt
      uₓ₊₁ = uₓ + u̇ₓ * Δt + (0.5 - β) * üₓ * Δt ^ 2 + β * ǖₓ₊₁ * Δt ^ 2

      üₓ₊₁ = -input[:, x+1] - 2 * h * ω * u̇ₓ₊₁ - ω ^ 2 * uₓ₊₁
      
      if norm(ǖₓ₊₁ - üₓ₊₁) < ε
        üₓ = üₓ₊₁
        u̇ₓ = u̇ₓ₊₁
        uₓ = uₓ₊₁
        output[:, x+1] = uₓ₊₁
        break
      end
      ǖₓ₊₁ = üₓ₊₁
    end
  end
  return output
end

t = transpose(linspace(0.0, 100, 1000))
Δt = t[2]
input = sin(t)
res=newmarkβ(input, Δt, 1.0, 0.1)
using Gadfly
plot(x=t, y=res)

```
擬似コードに見せかけたJuliaで実行可能なコード
ユニコードプログラミングをネタ的にやってみた
普通に変位応答を戻り値で返しているが、実際にはobserverを受け取る実装にしたほうが良いだろう。
ここでは線形の範囲（多自由度にも一応対応しているはず）で解いているので全くNewmark-βの意味が無い。
非線形応答をやるなら剛性と減衰を関数か何かで渡す必要がある。コルーチンがあれば楽かな多分
.NETからwiringPiを使えるWiringPi.Net


.NETからwiringPiを使えるWiringPi.Netというライブラリがある。

[danriches/WiringPi.Net](https://github.com/danriches/WiringPi.Net)

このWiringPi.Netは最終コミットが約2年前でもうメンテナンスされていないのか[^1]、今はいくつか問題があって使えない状態になっていた。

フォークして問題を修正したものを公開したので、これを使えばC#やF#からwiringPiを使える。

[locatw/WiringPi.Net](https://github.com/locatw/WiringPi.Net)

ただ、今回は自分がRaspberry PiのPWMを使えるようにしただけなので他の問題もあるかもしれない。

# 使い方
フォーク元と同様にVisual StudioでビルドすればDLLが生成されるし、Ubuntuの場合はxbuildを使ってビルドできる。

あとはRaspberry PiにwiringPiをインストールした状態でWiringPi.Netを使ったアプリを実行すれば動く。

# 変更点
## Releaseビルドのエラーの修正
プロジェクトファイルのReleaseビルドの設定でunsafeコードの許可が指定されていないのが原因でビルドエラーが発生していたので、許可する設定を追加した。

```xml
...
<PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|AnyCPU' ">
    ...
    <!-- 追加 -->
    <AllowUnsafeBlocks>true</AllowUnsafeBlocks>
</PropertyGroup>
```

## WiringPi.GPIOのメソッドがインポートする関数名の間違いの修正
WiringPi.GPIOクラスではDllImport属性を使ってwiringPiで定義されている関数を利用できるようにしている。

```csharp
...
[DllImport("libwiringPi.so", EntryPoint = "pinModeGpio")]
public static extern void pinMode(int pin, int mode);
...
```

wiringPiでは関数名の末尾の"gpio"がついていない名前で関数が定義されていて、元の状態でビルドしてRaspberry Piで実行するとSystem.EntryPointNotFoundExceptionが発生する問題があった。

DllImport属性のEntryPointの値から末尾の"gpio"を取って正しく実行できるようにした。

## PWMモードを表す定数の追加
wiringPiのPWM_MODE_MSとPWM_MODE_BALを表す定数を追加した。

```csharp
namespace WiringPi
{
    ...
    public class PWM
    {
        public enum PWMMode
        {
            PWMModeMS = 0,
            PWMModeBal = 1
        }
    }
    ...
}
```

[^1]: issueは最近更新されていたのでもしかしたらメンテナンスが再開されるかもしれない。
GitLabのアンインストール


# 概要
GitLab を CentOS 6.7 に yum でインストールしていたのですが、最終的にアンインストールすることになったため手順をメモしておきます。

# サービスを停止

```bash
$ sudo gitlab-ctl stop unicorn
$ sudo gitlab-ctl stop sidekiq
$ sudo gitlab-ctl stop nginx
```

# GitLabのアンインストールとゴミファイルの削除

```bash
$ sudo yum remove gitlab-ce

$ sudo rm -rf /opt/gitlab
$ sudo rm -rf /var/opt/gitlab
$ sudo rm -rf /etc/gitlab
$ sudo rm -rf /var/log/gitlab

$ sudo rm -f /etc/yum.repos.d/gitlab_gitlab-ce.repo

$ sudo userdel gitlab-www
$ sudo userdel git
```
PHPでConoHaオブジェクトストレージにファイルをアップロードする


# 概要
PHPでConoHaのオブジェクトストレージにファイルをアップロードします。
API呼出にPUTメソッドを使用します。
URLにはコンテナ名に加えて、保存するオブジェクト名も指定する必要があります。
コンテナ名のみの場合はHTTPステータスが202 Acceptedとなり、アップロードできないようです。

# アップロード関数

```php
/**
 * オブジェクトアップロード
 *
 * @param unknown $token
 * @param unknown $file_path
 * @param unknown $to_path
 * @param unknown $options
 */
function upload($token, $file_path, $to_path, $options = null)
{
	$url = API_OBJECT_STORAGE_SERVICE . $to_path;

	$fs = filesize($file_path);
	$fp = fopen($file_path, "r");

	$headers = array(
		"Accept: application/json",
		"X-Auth-Token: {$token}"
	);

	$ch = curl_init();
	curl_setopt($ch, CURLOPT_URL, $url);
	curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
	curl_setopt($ch, CURLOPT_PUT, true);
	curl_setopt($ch, CURLOPT_INFILESIZE, $fs);
	curl_setopt($ch, CURLOPT_INFILE, $fp);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	$res_json = curl_exec($ch);
	$res_info = curl_getinfo($ch);
	$res_errno = curl_errno($ch);
	$res_error = curl_error($ch);
	curl_close($ch);

	if (CURLE_OK !== $res_errno) {
		var_dump($res_info, $res_errno, $res_error);
		exit();
	}

	$res_data = json_decode($res_json);

	return $res_data;
}
```

# 利用方法

ローカルの"/tmp/test.jpg"を、オブジェクトストレージの"/container1/test.jpg"にアップロードする場合の例です。

アクセストークンを取得後、アップロード関数を呼び出します。

```php
$file_path = "/tmp/test.jpg";
$to_path = "/container1/test.jpg";

// トークン取得
$tokens = getToken();
$token = $tokens->access->token->id;

// アップロード
upload($token, $file_path, $to_path);
```
仮想OSをカスタマイズする


# 目的
[自分仕様のboxファイルを作成する](http://qiita.com/darwin/items/c473b7c54e61b2acb7e5)では自分仕様のboxファイルを作成しました。
私の場合、それをベースに色々なプロジェクトで使用する予定である。
そう考えるとプロジェクトによってはCPUコア数を2つにしたり、メモリ数を2GBにしたり、ネットワークの転送もしたいでしょう。そのたびにboxファイルを作成するのは、あまりにもあれである。今回はVagrantfileの編集のみで実施します。

## カスタマイズ内容
ここでは、以下3つに限定して説明をします。

* CPUコア数の変更
* メモリ数の変更
* ネットワークのポート転送

## カスタマイズの前に
Vagrantfileのどこにカスタマイズ部分を入れるかですが、下記を見てください。

```lang:Vagrantfile
Vagrant.configure(2) do |config|
  config.vm.box = "centos7"
  # ここに書く
end
```

## CPUコア数の変更
ここではCPUコア数を2つに変更しています。

```lang:Vagrantfile
Vagrant.configure(2) do |config|
  config.vm.box = "centos7"
  config.vm.provider "virtualbox" do |vb|
    vb.cpus = 2
  end
end
```

## メモリ数の変更
ここではメモリ数を2,048MBに変更しています。

```lang:Vagrantfile
Vagrant.configure(2) do |config|
  config.vm.box = "centos7"
  config.vm.provider "virtualbox" do |vb|
	vb.cpus = 1
    vb.memory = 2048
  end
end
```

## ネットワークポートの転送
ここではホストOSのポート:8888番を、ゲストOSのポート80番に転送します。

```lang:Vagrantfile
Vagrant.configure(2) do |config|
  config.vm.box = "centos7"
  config.vm.provider "virtualbox" do |vb|
	vb.cpus = 1
	vb.memory = 1048
    config.vm.network "forwarded_port", guest: 80, host: 8888
  end
end
```

開発環境として利用するには多分ですが、これだけ知っていれば十分だと思います。
【Rails】複数のレコードを作成する。modelの関係性によって異なるform_for / fields_forの使い方


一つのフォームから複数のmodelにデータを送りたい場合に使用するのが、form_for / fields_forです。ただし、その複数存在するmodel間の関係性によって微妙に使い方が違うのをご存知ですか??今回は、その違いをまとめてみました。

## 親と子の要素を一度に作成したい場合

```例
userとそのuserの書いたbook（つまり、user_idを持つbook）をまとめて作成したい場合
```

- model


```user.rb
has_many :books: 

accepts_nested_attributes_for :books: 
```

```book.rb
belongs_to :user
```

- controller

```users_controller.rb
class UsersContoller < AppricationController
	def new
	@user = User.new
	@user.books.build
	# controllerのポイント
	# @user.books.build ←これで一括保存の準備は完了
	end
	
	def create
	user = User.new(user_params)
	user.save
	# 親要素を保存かけてあげることで自動で子要素も保存されます！
	end
	
	private 
	
		def user_params
			params.require(:user).permit(:name, books_attributes: [:title, published_at])
			# これは独特な書き方ですが、このように子要素のstrong parameterを書くことで、自動で子要素に親要素のidもふられます。この場合だと、bookテーブルにあるuser_idにもきちんとこの時作成される親要素のidがふられます。
		end
end
```

- view

```users/new.html.erb
<%= form_for :user do |f| %>
	<%= f.text_field :name %>
	
	<%= f.fields_for :books do |b| %>
		<%= b.text_field :title %>
		<%= b.text_field :published_at %>
	
	<%= f.submit %>
<% end %>
```

## model間の関係は親子関係など特に無いが、一つのフォームから複数のmodelにむけてデータを送りたい場合

```例
userテーブルとcorporationテーブルに一つのフォームからデータを送りたい場合
```

- controller

```users_controller.rb
class UsersController < ApplicationController
	def new
		@user = User.new
		@corporation = Corporation.new
		# それぞれ.newをする
	end
	
	def create
		user = User.new(user_params)
		user.save
		
		corporation = Corporation.new(corporation_params)
		corporation.save
		# それぞれcreate処理を行う
	end
	
	private
		
		def user_params
			params.require(:user).permit(:name)
		end
		
		def corporation_params
			params.require(:corporation).permit(:name)
		end
end
```

```users/new.html.erb
<%= form_for @user, url: new_user_params do |f| %>
	<%= f.text_field :name %>
	
	<%= fields_for @corporation, new_corporation_params do |c| %>
		<%= c.text_field :name %>
		
	<%= f.submit %>
<% end %>
```

このようにして、model間の関係がないものも一つのフォームから送ることができます。
ちなみに、この場合パラメーターは以下のようになるので、それぞれstrog parameterでpermitしてあげてcreateすれば保存完了です。

```parameter
{ "user" => { "name" => "userテスト"}, "corporation" => { "name" => "corporationテスト"}
```
APNs証明書更新手順

# APNs証明書更新手順まとめ
APNsの証明書は1年で期限が切れるので、毎年更新作業が発生するのですが、毎回「あれ、どうやるんだっけ？」となるので、まとめておく。

## 1.期限確認（on your server）
まずは証明書の期限を確認。期限チェックは自動化しておくのがよい。
コマンドは以下。

```
$ openssl x509 -noout -dates -in hogehoge.pem
```

出力結果は以下。

```
notBefore=Oct  9 00:00:00 2014 GMT
notAfter=Oct  8 00:00:00 2015 GMT
```
notAfterをみる。はい、切れてますね＼(^o^)／ｵﾜﾀ
期限チェックは自動化しておくのがよい（２回目）。

## 2.cerファイル作成（at Apple Developer）

### 2-1.Member Centerへログイン
https://developer.apple.com/membercenter/index.action

### 2-2.iOS Apps->Certificatesをクリック
ここまでは楽勝だ。

### 2-3.Certificates->Allから証明書新規作成
右上の+ボタンをクリックする。　

### 2-4.Apple Push Notification service SSL（Produciton）を選択
ラジオボタンにチェックして、Continueボタンをクリックする。
（開発用の場合はSandboxを選択する。）

### 2-5.任意のApp IDを選択
セレクトボックスから設定して、Continueボタンをクリックする。

### 2-5.CSRファイル作成
作成済の場合は、Continueボタンをクリックする。
（更新なのでおそらく作成済だと思うが、未作成の場合は作成する。）

### 2-6.CSRファイルをアップロード
Choose Fileをクリックして、CSRファイルをアップロードすると、
Generateボタンがクリック出来るようになるので、クリックする。

### 2-7.cerファイルダウンロード
正常に処理が完了すると、cerファイルが生成されるので、Downloadボタンをクリックする。
Apple Developerサイト上での作業は以上。

## 3.p12ファイル作成（on your Mac）

### 3-1.キーチェーンアクセスを起動
2.でダウンロードしたcerファイルをダブルクリックすると、キーチェーンアクセスが起動する。

### 3-2.cerファイルをp12ファイルへ書き出し
キーチェーンアクセス起動後、任意の証明書（Apple Production IOS Push Services:*Your App ID*と表示される）を右クリックで、"Apple Production IOS Push Services:*Your App ID*を書き出す"を選択する。
ファイル保存のダイアログが表示されるので、画面下部のフォーマットを"個人情報交換（.p12）にして、パスワードを設定後（任意）、適当なファイル名で保存する。

## 4.pemファイル作成（on your Mac）

### 4-1.証明書と鍵をまとめてpemファイルを出力

コマンドは以下。（catでもOK）

```
$ openssl pkcs12 -in hogehoge.p12 -out hogehoge.pem -nodes -clcerts
```
パスワードを入力して、Mac verified OKが表示されればOK。

### 4-2.期限確認

```
$ openssl x509 -noout -dates -in hogehoge.pem
```

```
notBefore=Oct  11 20:00:00 2015 GMT
notAfter=Oct  10 20:00:00 2016 GMT
```
notAfterが来年になりました！
あとは動作確認して、pemファイルをサーバーにアップロードしてオシマイ。
もう忘れないはず。。

## 参考サイト
SSL証明書の有効期限を確認するコマンド：
http://blog.higty.xyz/archives/317
iOSプッシュ通知について：
http://qiita.com/Shun0750@github/items/055a6d83c7167557f02b
[Push通知]APNsの設定(サーバ編)：
http://qiita.com/yukiko-kato-bass/items/fe3a890eb097780cd574
WordpressブログをAWSへ展開する

【手順】
1) **LAMP環境構築**
2) **AWSへWordpressを展開する**
3) **DNS設定**
4) **注意点**

【詳細】
1) **LAMP環境構築**
https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/install-LAMP.html
※下記は自分が使ったinstallコマンド（opcache, mbstring等モジュールを入れます）

```
#sudo yum install -y httpd24 mysql55-server php56 php56-pdo  php56-mysqlnd php56-mbstring php56-opcache php56-gd
```

2) **AWSへWordpressを展開する**
https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/hosting-wordpress.html


3) **DNS設定**
・Route 53を使用して、お名前といったドメイン会社からAWSのサーバーへルートする
※Todo: 詳しくまとめる

・サブドメイン`http://www.example.com`を`http://example.com`へリダイレクトする方法
S3とRoute 53を使って、wwwからnon-wwwへリダイレクトする
①S3に “www.example.com” 空のbucketを作成する
② ①で作成されたbucketを選択し、“プロパティ”を選び、
「静的ウェブサイトホスティング」→「別のホスト名にすべてのリクエストをリダイレクトする」
→non-wwwのURL(example.com)を入力する→「保存」する
③ Route 53から「Create new recordset」で下記の設定しに従い、

>Name: www.example.com
>Type: "A-IPv4 Address"
>Alias: Yes
>Target: 上記のS3のbucketへポイントする

`www.example.com`のリクエストを`example.com`へルートする新しいRecordsetを作成する。

④ 反映されるまで、しばらく待つ（これ、大事w）

4) **注意点**
・ブログを投稿する時、写真が自動的にリサイズされない問題
（リサイズの写真が作成されない問題）
→php-gdが必要ということで、php-gdをインストールする
```#sudo yum install php-gd```
```#sudo service httpd restart```
（PHPバージョンによって、php-gdでなく、php56-gdとかphp55-gdになります）

・HTTP Responseに不要ヘッダーをクライアントへ送らないように設定する
serverのバージョン情報非表示：httpd.confファイルへ下記の２行を追加する
>ServerTokens ProductOnly
>ServerSignature Off

PHPバージョン情報非表示：php.iniへ下記の行を変更する
>expose_php = off

・Wordpressのセキュリティ強化
http://codex.wordpress.org/Hardening_WordPress#Resources
（日本語版：http://wpdocs.osdn.jp/Hardening_WordPress）
Laravel5のお勉強 -第一回 環境構築-

# Laravel5のお勉強
[第一回 環境構築](http://qiita.com/yu_eguchi/items/0426ea0a41489e96dd33)
[第二回 ControllerとViewの追加](http://qiita.com/yu_eguchi/items/d6ac0fa3e0014db536c3)
[第三回 Database連携(Mysql)](http://qiita.com/yu_eguchi/items/e272a8d34e714f8249df)
[第四回 モデルの作成/tinker紹介](http://qiita.com/yu_eguchi/items/419a2a081ff142ecf67f)
[第五回 テストデータの挿入/Fakerの使用](http://qiita.com/yu_eguchi/items/9af6eed45e14505f6ecc)
[第六回 CRUDの作成](http://~)
[第七回 Herokuにdeploy](http://qiita.com/yu_eguchi/items/34fce39a07c79591f4af)

# 第一回 環境構築-
## 前提条件
Mac OS yosemite
PHP 5.5以上
Mysql 5.6以上

## 目的
Laravel5のお勉強。
[ここ](http://laravel.jp/)が公式の日本語翻訳サイト

## 使用技術
* Laravel5(FW)
* Heroku(deploy)
* Eloquent(ORM)
* Blade(テンプレートエンジン)
* tinker(REPL (Read-Eval-Print Loop))※対話型
* Faker(テストデータ挿入)

## install
おおまかな流れとして、まずは、「**Composer**」と呼ばれる、PHPのパッケージ管理システムを使用します。
Rubyでいうgemみたいなものですかね。
ただのpharファイルなので、まずはホーム下とかで以下のコマンドをEnter!!

```
curl -sS https://getcomposer.org/installer | php
```

pharファイルが落ちてくるので、pharファイルのある階層にいるなら、「composer」コマンドが使える。
しかし、どこにLaravelプロジェクトを作るかは状況によるでしょうから、どこにいてもcomposerコマンドが使えるように

```
mv composer.phar /usr/local/bin/composer
```

としておきましょう。

これだけではLaravelは始められません。
Laravelプロジェクトを始めるには、以下の2パターンから選べます。

1. Composer経由でLaravelインストーラを介してプロジェクトを作成
2. Laravelインストーラを使う

今回は2のlaravelインストーラを紹介します。

2の場合は事前にLaravelインストーラを入れるので、
Composerを使って導入します。

```
composer global require "laravel/installer=~1.1"
```

の後にこう

```
laravel new [プロジェクト名]
```

でPJが作られる!!

1の場合は、composerを経由するので、単純に以下

```
composer create-project laravel/laravel [プロジェクト名] --prefer-dist 
```

これであなたがコマンドを実行した配下に[プロジェクト名]でLaravelPJが生成されているはずです。
今回はCRUDを一通り体感できる日記アプリということで以下のコマンドを実行

```
laravel new Blog
```

作られたかを

```
ls -ltr
```

で確認してみて、あればOK。

## 実行!!

早速PJが作られたので、実行してみよう。
Laravelには手軽に開発中のアプリの動作確認ができるように、組み込みのWebサーバが用意されています。
Railsでいう「**WEBrick**」みたいな。
とりあえず、PJのルート(Blog)まで移動し、

```
php artisan serve
```

とすると

```
Laravel development server started on http://localhost:8000/
```

と表示されるので、localhost:8000にブラウザでアクセスしよう。

![スクリーンショット 2015-10-11 20.40.19.png](https://qiita-image-store.s3.amazonaws.com/0/78857/7f5f4c1b-e73e-066d-2238-03a5d0afc04b.png)


こんな画面が出れば、環境構築は完了です。

※この後、MySQLを使いますが、そこはよしなに入れといてください。
AngularJSのルーティング

#はじめに

[前回](http://qiita.com/f00tba11artist/items/769c8f2f60a0e94c5e56)は基本的なAngularjsの使い方を書いていきましたが、今回ルーティングについてです。
簡単に言いますと最初のindex.htmlにレイアウトをつくってしまい、あとは変えたい部分だけのコードをページごとに別のファイルに書いてしまおうというものです。


とりあえずやってみます。
まずAngularJSのルーティングを使えるようにするためには、headタグ内に

```
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.min.js"></script>
```
です。


#レイアウトとページの作成

全ページのレイアウトとなるindex.htmlに前回通りng-appでモジュールAppを作り、コントローラ内にはdivタグの

***ng-view***


これだけです。



```index.html
<!DOCTYPE html>
<html ng-app ='App'>
  <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.min.js"></script>
        <script type="text/javascript" src="controller.js"></script>
        <style>
            #header   {background-color:blue; width: 100%; height: 100px; position: fixed; top: 0}
            #footer   {background-color:blue; width: 100%; height: 100px; position: fixed; bottom: 0}
            h1 {margin: 200px}
        </style>
  </head>
  <body>
    <div id="header"></div>
      <div ng-view></div>
    <div id="footer"></div>
  </body>
</html>
```

コントローラはいりません、それぞれのページでコントローラを割り当てていきます。ng-viewの部分だけがそれぞれのページで中身が変わっていきます。

今回は二つpage1.htmlとpage2.htmlのページを用意しました。

```page1.html
<h1>ページ１です。</h1>
```

```page2.html
<h1>ページ２です。</h1>
```

ng-view内に入れたい内容だけ書きます。htmlタグもbodyタグもいりません。


#ページの設定、コントローラの割り当て

次にJavaScriptの方でそれぞれのページのパスとコントローラを割り当てていきます。

```controller.js
var app = angular.module('App', ['ngRoute']);
app.config(function($routeProvider){
            $routeProvider
                .when('/',{
                    templateUrl : 'page1.html',
                    controller : 'page1_controller'
                })
                .when('/page2',{
                    templateUrl : 'page2.html',
                    controller : 'page2_controller'
                })
        });
app.controller('page1_controller', function($scope){
});
app.controller('page2_controller', function($scope){
});
```
前回空白だったモジュールのパラメータに'ngRoute'をいれました。

新しくでてきたのはapp.configで、これでそれぞれのページのファイルパスとURLを指定します。

.when('指定したいURL', {

templateUrl : 'ファイルパス'

controller : 'コントローラ名'

})

指定したいURLは/がルートで最初に読み込まれたときに表示されるページです。

あとはそれぞれのコントローラでやりたいイベントなどの処理を書いていけば良いです。今回は空白です。


#表示結果

さあこれで、レイアウトは一緒でそれぞれ内容の違うページができました。表示してみましょう。

ブラウザで開くとルートのURLがこんな感じのはずです。

http://.../index.html#/
or
http://.../#/

![Screenshot (9).png](https://qiita-image-store.s3.amazonaws.com/0/52622/fe500d82-5ede-1302-dec8-dc0a55adb89b.png)

そして
page2.htmlの内容は

http://.../index.html#/page2
or
http://.../#/page2
とタイプすると表示されるはずです。

![Screenshot (10).png](https://qiita-image-store.s3.amazonaws.com/0/52622/b4355743-5b0c-c19c-5028-c6643022d0ad.png)


はいこれで同じコードをコピペすることなく同じレイアウトの複数のページをつくることができました。
もしうまく表示されないときはJavaScriptファイルで設定したそれぞれのページのhtmlファイルのパス指定が正しいかを確認してください。

#リンク表示

リンクはどうやってしていするのかというと、
***ng-href***
をつかいます。


例えば

```page1.html
<h1>ページ１です。</h1>
<a ng-href="#/page2">つぎのページへ</a>
```

![Screenshot (11).png](https://qiita-image-store.s3.amazonaws.com/0/52622/5c4a1894-f731-5105-64b1-0677973163ff.png)

これでページ２へ飛ばされます。

以上でAngularJSでのルーティングの紹介でした。
【しずおかアプリ部】活動ログ　第九回

![しずおかアプリ部2.jpg](https://qiita-image-store.s3.amazonaws.com/0/88105/f0b114ae-e85a-a267-eaa7-3f615f26e1b3.jpeg)


■タイトル
第９回

■開催日
２０１５年１０月１０日（土）　１６：００～２２：３０（懇親会合わせて）

■参加者
８名＋１名

■活動内容（概要）
・部員さんプレゼン「AppInventor2 で簡単Androidアプリ開発 」と自作アプリ紹介
・部員さん「Oculus Rift」体験
・菅原プレゼン「Unityはじめるよ　～基礎４～＆～応用２～」時間の都合で途中まで
・懇親会
※保坂プレゼンは時間の都合で次回に繰り越し


■活動内容（詳細）
【実演・プレゼン】

・「AppInventor2 で簡単Androidアプリ開発 」と自作アプリ紹介
　プログラマ歴4ヶ月で4本のアプリを作ることを可能にしたAppInventor2
　ビジュアルプログラミング言語で、なんとブラウザ上でAndroidアプリが作れてしまう。
　Googleが開発しMITが引き継いだプロジェクトである。
　制限もあるが、気軽に作れるし、工夫次第では凝ったアプリも作成可能。
　教育の現場などにも向いているのではないでしょうか。

　資料は、
　　<A HREF="http://monolizm.com/sab/pdf/第九回_プレゼン資料_(AppInventor2 で簡単Androidアプリ開発).pdf">第九回_プレゼン資料_(AppInventor2 で簡単Androidアプリ開発).pdf</A>




・「Oculus Rift」体験
　体験したVRソフト
　「ProtonPulse」3Dブロック崩し
　「アーバンコースター」ジェットコースター体験
　「UnityちゃんVRライブ」ライブ鑑賞
　「MikuMikuVR for Oculus Rift」ライブ鑑賞
　スマホを利用したVRとは違い、さすがの臨場感でした。
　Oculusの製品版が楽しみです。

　今回体験できなかった、Unreal Engine 4を利用したソフトのVR体験は、
　次回2015.10.24に再度行うことになりました。
　
　資料は、
　　<A HREF="http://monolizm.com/sab/pdf/第九回_プレゼン資料_(Oculus Rift 体験ソフト紹介).pdf">第九回_プレゼン資料_(Oculus Rift 体験ソフト紹介).pdf</A>



・「Unityはじめるよ　～基礎４～＆～応用２～」
　基礎：ゲームの作り方

　企画・仕様が出来上がってる状態でのUnityを用いたスマホゲームの作成手順を実演
　１、プロジェクトを格納するフォルダを切っておく
　２、プロジェクトを作成し、iOS、Android用の設定を行う
　３、Unityのプロジェクトビュー内でフォルダ分けをしておく
　４、画像リソースのインポートとスプライト作成
　５、骨格の作成
　　　画面遷移を行えるように、各画面のUI部分をuGUIで作成

　時間の都合で終わらなかったので、
　基礎の続きと応用は、次回に繰り越しです。
　資料と、プロジェクト一式は次回ログでアップします。



・懇親会
　ご参加いただいた皆様ありがとうございました。
　とても楽しい時間を過ごせました。
　部員さん同士も距離が縮まったなら幸いです。
c++ builder XE4, 10.2 Tokyo > TeeChart > 凡例 > 凡例文字列の変更 > NameでなくLegendTitleを設定する

```txt:動作環境
C++ builder XE4
    TeeChart Lite v2013.08.130414
RAD Studio 10.2 Tokyo Update 2 (追記 2018/01/10)
    TeeChart v2016.17.160129 32bit VCL
```

http://qiita.com/7of9/items/800e529b597774bea8da
と関連して、TeeChartのグラフ表示にて、凡例文字列のセットに以下の2点の問題があった。

1. 同じ文字列を異なるSeriesに設定できない
2. `(`などの文字を受け付けない。

失敗していたコードは以下だった。

```
target->Legend->LegendStyle = lsSeries; // 凡例はシリーズ名にする
target->Series[0]->Name= titleStr;
```

以下は2つの問題が発生しないことがわかった。

```
target->Legend->LegendStyle = lsSeries; // 凡例はシリーズ名にする
target->Series[0]->LegendTitle= titleStr;
```

Nameに設定した文字列は確かに凡例として表示されるが、同じ文字を異なるSeriesに設定すると１つ目の問題が発生する。また、括弧などの文字はNameに指定できない、というのが問題の原因だった。
スタイルガイド

# スタイルガイドについて調べた

GitHubのCSSのガイドである
[Home · Primer](http://primercss.io/)
が作れるらしい
[KSS · Knyle Style Sheets](http://warpspire.com/kss/)
が私気になります。


## 参考
[KSSで作るパターンライブラリ // Speaker Deck](https://speakerdeck.com/machida/kssdezuo-rupatanraiburari)