OmniAICreator/Qiita-1.07M huggingface dataset:
[baserCMS]オプショナルリンク利用時、リンク中にブロック要素を含む場合のサンプル


Blogヘルパの getPostLinkUrl() では、記事のURL変更が効かないため、ビュー側で aタグ内の文字列を調整し、postTitle()（or getPostTitle()）がそのまま利用できるカタチにします。


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


## 発生状況
1. getPostLinkUrl() でブログ記事のURLを表示している際
2. オプショナルリンクプラグインの機能で、URL書換え処理を指定しても、URLが変更されない


### 環境
- baserCMS 3.0.10


## 原因
getPostLinkUrl() では、URL書換えに必要な beforeGetLink、afterGetLink イベントが走らないため。


## 対処例
ビュー側で aタグ内の文字列を調整し、postTitle()（or getPostTitle()）がそのまま利用できるカタチにします。

```php
<ul>
<?php if ($posts): ?>
	<?php foreach ($posts as $key => $post): ?>
		<?php $links = ''; ?>
		<li>
		<?php
			$links .= '<div class="img-eyecatch">'. $this->Blog->getEyeCatch($post, array('link' => false)) .'</div>';
			$links .= '<div class="txt-date">'. $this->Blog->getPostDate($post, 'Y.m.d') .'</div>';
			$links .= '<div class="txt-title">'. $this->Blog->getPostTitle($post, false) .'</div>';
			$post['BlogPost']['name'] = $links;
		?>
		<?php $this->Blog->postTitle($post) ?>
		</li>
	<?php endforeach; ?>
<?php else: ?>
	<li class="no-data">記事がありません</li>
<?php endif ?>
</ul>
```

## 記事概要を含む場合、記事タイトル箇所のみ特定のタグで囲う場合

- 記事概要を含む場合は、trim() で前後の余分な空白を削除する
- 記事タイトル箇所のみ特定のタグで囲う場合は、一時的に実体参照変換を掛けて全て文字列扱いとし、その後、表示の際に decode して戻して必要なhtmlタグを反映させる
  - 記事に「URL: リンクなし」指定時に正しく動作しないため


```php
<?php if ($posts): ?>
	<?php foreach ($posts as $key => $post): ?>
		<dl>
			<dt><?php echo $this->Blog->getPostDate($post, 'Y.m.d') ?>
				<?php if (Hash::get($post, 'BlogCategory.id')): ?>
					<span class="icon icon_<?php echo Hash::get($post, 'BlogCategory.name') ?>">
						<?php echo Hash::get($post, 'BlogCategory.title') ?>
					</span>
				<?php endif ?>
			</dt>
			<dd>
				<?php
				$links = '';
				$links .= '<string>' . $this->Blog->getPostTitle($post, false) . '</string>';
				$links = htmlspecialchars($links);
				$links .= trim(strip_tags(Hash::get($post, 'BlogPost.content')));
				$post['BlogPost']['name'] = $links;
				?>
				<?php echo htmlspecialchars_decode($this->Blog->getPostTitle($post)) ?>
			</dd>
		</dl>
	<?php endforeach; ?>
<?php else: ?>
	<dl>
		<dt class="no-data">記事がありません</dt>
	</dl>
<?php endif ?>
```
Elasticsearch::Extensionsを用いたテスト on CircleCI

# やりたいこと
## CI上のデフォルトバージョンのESでテストする
<img width="900" alt="スクリーンショット 2016-07-17 23.39.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/64537/e496a872-7ec9-3eaf-d17f-2cffa604f239.png">

まさにこれ。
CI上のデフォルトバージョンのESでテストをする。※理由は割愛
少し手こずったので備忘録として掲載。

## 特定のバージョンのESのテストは
だいたいググると、
[Install a custom version of Elasticsearch](https://circleci.com/docs/installing-elasticsearch/) とか[CircleCI上でElasticsearchを設定する](http://qiita.com/shohu33/items/db1e8dde0f91847dac9e)とか見つかるがいずれも、

いずれも、用途が
> If you need a custom version, you can download and start it from your build

で今回のスコープからは外れるため、割愛。

# 手こずった点
で、いくら`circle.yml`に上記の設定をしても、CIでのrspec実行で

```rb:spec/support/elacticsearch.rb
RSpec.configure do |config|↲
  config.before(:all, :elasticsearch) do↲ 
    WebMock.disable_net_connect!(allow_localhost: true)↲
    Elasticsearch::Extensions::Test::Cluster.start port: 9250 unless Elasticsearch::Extensions::Test::Cluster.running?(on: 9250)↲＃　ここで起動するはずだが。。。
  end↲
↲
  config.after(:all, :elasticsearch) do↲ 
    Elasticsearch::Extensions::Test::Cluster.stop port: 9250 if Elasticsearch::Extensions::Test::Cluster.running?(on: 9250)↲
  end↲
end↲
```

　。。。TEST::Clusterの起動ができない

CIでは、
<img width="922" alt="スクリーンショット 2016-07-17 23.50.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/64537/d7e5d9ae-3bf5-c191-3152-58f16f2db0d8.png">

となる。ローカルでは動くのに。。。

という状態。

# 原因
ESの実行ファイルをつかめていないことが原因でした。
言い換えると、ローカル環境では、任意でインストーるしたESの実行ファイルに　パスを通していたため、実行ができていた。

```shell-session:local
$ ll /usr/local/bin/elasticsearch 
/usr/local/bin/elasticsearch -> /usr/local/src/elasticsearch-2.3.4/bin/elasticsearch
```

# circle ci でのESの実行ファイルはどこ？
ローカルとか　[任意バージョンのダウンロード](https://circleci.com/docs/installing-elasticsearch/) だと、インストーる場所がわかるため、　
`TEST_CLUSTER_COMMAND`に実行ファイルパスを指定することが可能。

だが、今回のようにCIのデフォのESの場合はその所在がわからなかったため、
CIのコンテナにSSHで入って、検索して発見。
`/usr/share/elasticsearch/bin/elasticsearch`

にありました。
ので、これを、　[circle.yml](https://github.com/kieaiaarh/lancher_es/blob/master/circle.yml)に設定して、無事に動きました。

<img width="775" alt="スクリーンショット 2016-07-18 07.52.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/64537/4582351e-ec3c-1fde-85cd-495b3bdea03b.png">


## 所感
ciって...
ubuntu使ってたんすね。
そして、自分はもっぱらcentosだったので、実行ファイルの検討がつきませんでしたが、まぁそこはgrep でなんとか。

### ref
* [elasticsearch-extensions/Elasticsearch/Extensions/Test/Cluster/Cluster#initialize-instance_method](http://www.rubydoc.info/gems/elasticsearch-extensions/Elasticsearch/Extensions/Test/Cluster/Cluster#initialize-instance_method)
* [Install a custom version of Elasticsearch](https://circleci.com/docs/installing-elasticsearch/)
* [テスト用サンプル](https://github.com/kieaiaarh/lancher_es)
* [elasticsearchとSQL対比しながら理解](http://qiita.com/kieaiaarh/items/5ea4e8a188bd9814000d)
Dropbox製ロスレスJPEG圧縮プログラム「Lepton」を試してみる(まだ動いてないです)

**まだ動いてないので覚え書き程度です**

米Dropbox、JPEGファイルをロスレス圧縮できる画像圧縮アルゴリズム「Lepton」をオープンソースで公開
https://osdn.jp/magazine/16/07/15/153000

なんでもJPEGファイルをロスレス圧縮できて、ファイルサイズ22%削減できるんだそうです。
Dropboxではこれをユーザが意識することなく裏側で動かしてペタバイトレベルでのデータ容量削減を実現しているんだとか。

いいぞ。こういう物理の限界をテクノロジーで解決する系の奴好きですよ。
というわけで試してみました。

dropbox/lepton
https://github.com/dropbox/lepton

# 環境
Ubuntu Server 14.04 LTS

# コンパイル
```
apt-get update
apt-get install cmake
apt-get install g++
cd /usr/local/src/
git clone https://github.com/dropbox/lepton.git
cd lepton/
mkdir -p build
cd build/
cmake -pthread ..
make -j8
```
で、一応leptonの実行ファイルはできあがる。しかし…

# 実行
```
$ ./lepton /home/ubuntu/jpg/P1020688.JPG /home/ubuntu/lep/P1020688.lep
lepton v1.0-acfb6ae95edec49a14b76ab35d0b6a976d9ae7c4
terminate called after throwing an instance of 'std::system_error'
  what():  Enable multithreading to use std::thread: Operation not permitted
SHORT_READ
```
こんな感じでエラー吐いて動かないんである。
ちなみに↓を読んでオプション付けたにもかかわらず、である。
http://usagi.hatenablog.jp/entry/2012/02/05/082745

ちなみにmakeでこけてたのでg++が入ってないというのは↓で解決しました。
知ってる人のブログだった。
http://d.hatena.ne.jp/naruoga/20090527/1243382202

# というわけで
謎を解かなきゃいけないんですがとりあえず今日はここまで…
IntelliJ IDEA Subversionを利用

## 概要
やりたくはないが、IntelliJ IDEAでSubversionを使う機会があったのでメモ。

## 設定方法
Preferences → Version Control → Subversion

Networkタブの 「Use IDEA general proxy settings as default for Subversion」にチェックを入れる。

<img width="1029" alt="Subversion.png" src="https://qiita-image-store.s3.amazonaws.com/0/71899/9068405f-5300-79d1-2ec6-184a85b61986.png">
IntelliJ IDEA リモートにファイルを転送する

## 概要
IntelliJ IDEAを使ってリモート上のサーバにファイル転送を行う。

## 設定方法
Preferences → Build,Execution,Deployment → Deployment
以下からサーバの情報を入力していく。

<img width="1038" alt="Remote.png" src="https://qiita-image-store.s3.amazonaws.com/0/71899/279cd8ab-811f-4d7d-168b-8129a610a78f.png">

追加したリモートサーバは「Browse Remote Host」より確認出来る。
IntelliJ IDEA初期設定（主にエディタ）

## 概要
IntelliJ IDEAをインストールしたら最初に行う設定。
※この記事は随時更新します。

## 環境
macOS Big Sur バージョン 11.1
IntelliJ IDEA Version 2020.3

## エディタの基本的な設定

### Editor → General

下記のチェックをつける。

- Remove trailing blank lines at the end of saved files - ON「行末の不要なスペースやタブを保存時に削除する」
- Ensure every saved file ends with a line break - ON「保存されたファイルの最後が改行で終わるようにする」

![idea.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71899/f9e1176d-cc8f-9d1c-bdd1-d67b6dff9ff0.png)

### Preferences → Editor → Code Style

改行コードの設定↓

Line separator (Applied to new files) :
「Unix and macOS(\n)」 を選択。

![Lineseparator.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71899/14dcffa4-7fc9-ed2a-1448-cbdac9fe389f.png)

### Editor → General → Appearance

下記のチェックをつける。

- Show line number - ON「行番号の表示」
- Show method separators - ON「メソッドの区切り線」
- Show whitespaces - ON「空白の表示」

![EditorGeneralAppearance.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71899/048cbaa3-14cb-8c9f-7b5e-363d0e2b8fd9.png)

### Preferences → Editor → General → Code Completion

- All letters を選択する。（コード補完時に大文字小文字の区別をしない）

<img width="987" alt="CodeCompletion.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71899/72b771ff-bc3c-ca16-8c3c-968f7714faf0.png">
BufferGeometry 等でインスタンス化されたオブジェクトを大量に「広範囲に」表示する際の罠

GitHubのパーティクルサンプルを、ちょっとだけ修正＆公開しました

https://github.com/adrs2002/THREE.JfParticle

動くサンプルはコッチ↓
http://www001.upp.so-net.ne.jp/adrs2002/JenParticle/splashtest.html


前回からの修正は、たった１行。
294行目に、　

``` 
 mesh.frustumCulled = false;
```

を追加しただけです。

こいつが何なのかというと、「視錐台カリングを有効にするかどうか」という設定で、じゃあ視錐台カリングってなんなのさというと、「カメラから見えているかどうかを判断する。カメラから外れていたら、描画対象（DrawMesh）から外す」という、一見して便利なものです。

本来であれば「Meshを作成した後に当たり判定を作成（↓のメソッド）」し、
``` 
　geometry.computeBoundingBox(); 
``` 
んで、それが表示範囲の判定にも使われるのが正しいのですが、
ゲームに使うようなパーティクルとか、毎回位置が変わるのが常なわけで、その度にコレすんの？重くない？ということで、そもそもの「表示判断を無効にし、とりあえず表示させる。見えてるか見えてないかは知らん！」ということを行うための設定が、上記の　frustumCulled = false になります（デフォルトは true　になってる）

これで、原点（0,0,0　＝　メッシュの中央）　が表示対象から外れていても表示されるようになりましたとさ。

めでたしめでたし。
Rails 5に移行した後にTravis CIのbundle exec rakeでエラーが出たら対処する方法

## 対象のエラー
Rails 5に移行した後にTravis CIのbundle exec rakeでエラーでこんなのが出たら...

```
/home/travis/build/yamamuteki/chi-bus.jp/vendor/bundle/ruby/2.2.0/gems/activerecord-5.0.0/lib/active_record/migration.rb:572:in `check_pending!':  (ActiveRecord::PendingMigrationError)

Migrations are pending. To resolve this issue, run:

	bin/rails db:migrate RAILS_ENV=test
```

## 対応方法
script:セクションを作って```bin/rails db:migrate RAILS_ENV=test```と```bin/rails test```を追加する

```yml:.travis.yml
language: ruby
rvm:
  - 2.2.4
# ここから
script:
  - bin/rails db:migrate RAILS_ENV=test
  - bin/rails test
# ここまでを追加
```

## 結論
Raila 4.2ではrakeタスクが自動でやってくれていたので不便
自作サービスをRails 4.2.6からRails 5.0.0に移行した手順とあれこれ

## 概要
- 自作サービスをRails 4.2.6からRails 5.0.0に移行した
- 基本的にはRails5でrails newしたプロジェクトとdiffをとってどんどんマージ
- bundle installでコケたのでRails5非対応gemをコメントアウト
- テストがコケたのでテストを修正
- TravisCIがコケたので.travis.ymlを修正

## 作業対象のサービスとソースコード
千葉県民のためのバス停検索サービス「chi-bus.jp」https://www.chi-bus.jp/
- GitHub：https://github.com/yamamuteki/chi-bus.jp
- 今回のコミット：https://github.com/yamamuteki/chi-bus.jp/commit/b29b040ede7660677ebe005ccb007e7101db29bf
- 開発の背景などはこちら：http://www.slideshare.net/SatoshiYamazaki2/20160527-m3-tech-talk-rails-chibusjp

## 前提
このあたりは読んでいることが前提
- Ruby on Rails 5.0 リリースノート http://railsguides.jp/5_0_release_notes.html
- Rails アップグレードガイド http://railsguides.jp/upgrading_ruby_on_rails.html

## 作業手順
- 変更部分を詳しく理解したいのでrails:updateタスク（Rails5からはapp:updateタスク）は使わない
- ```rails new rails5_sample```した後にvimのDirDiff.vimプラグインを使ってマージ
- s（sync）コマンドが便利、部分的なマージはdoやdpでサクサク進めるべし
- 一通りマージしたら、rails5_sampleアプリ側で```rails g scaffold hoge name```などしてモデルやコントローラ、テストコードの変更点もチェックしてサービスのコードを書き換える
- ```rm Gemfile.lock```してから```bundle install```　→依存関係で問題
- ```rails test```　→ワーニングとエラー沢山…次節で対処
- ```念のためrake test```　→こっちも同様

## 対処など
- quiet_assets gemがRails5非対応だったのでGemfileからコメントアウト
- コントローラのテストで```get :index, { q: 'hoge' }```とかやっている場合、```get :index, params: { q: 'hoge' }```のようにパラメータのハッシュに名前が必要になった
- Railsガイドにも書いてあるけどテストコードでassignsを使っている場合はGemfileに```gem 'rails-controller-testing'```の追加が必要
- ActionView::TestCaseを継承したテストからのhelperメソッドの呼び出しで、他のヘルパーがインクルードされなくなった？仕方がないので```stub(:render, true) do ... end```みたいな感じで他のペルパーに依存する箇所をスタブ化して対応
- ActiveRecoedのbelongs_toのバリデーション強化の影響？でメモリ上でアソシエーションテーブル作って一部保存という手抜きが出来なくなり、テスト中にbus_route.saveがコケている箇所があったので、最初にbus_route.create!しておくことで対応（次回コケてもわかるように念のため感嘆符つけた）
- Travis CIのビルドがコケるようになったので.travis.ymlのscript:セクションに```bin/rails db:migrate RAILS_ENV=test```と```bin/rails test```を追加

## 所感
- モデルオブジェクトがActiveRecord::Baseの継承からApplicationRecordの継承に切り替わるなど、随所に使いやすい変更が入っていて好印象
- rakeからrailsコマンドに変更になった影響か、動的ロードの変更の影響か、testなどのrakeタスクの実行周りは色々とみえない変更ありそう（より依存関係の分離が進んだ？）
- ActionCableやActionMailer関連のテンプレートコードが追加されてカバレッジが微妙に下がった（笑）
- なんにせよアプリケーション自体は簡単に動いたのでよかったよかった

## 参照
- DirDiff.vim https://github.com/will133/vim-dirdiff
どうでもいいリポジトリのどうでもいいcommitのためのコミットメッセージ自動生成スクリプト

自分のdotfilesとか、プライベートの誰も見ないようなリポジトリとか、そのうちrebaseするからとりあえず区切りをつけたいだとか、そんな時にたぶん役に立つスクリプトです


```zsh:
git_commit_automatically_loop() {
  local action message
  while read line; do
    action=$(echo $line | awk '{print $1}' | sed "s/://")
    case $action in
      "new" ) added_changes="[add] $(echo $line | awk '{print $3}')" ;;
      "deleted" ) added_changes="[remove] $(echo $line | awk '{print $2}')" ;;
      "renamed" ) added_changes="[rename] $(echo $line | awk '{print $2 $3 $4}')" ;;
      "modified" ) added_changes="[improve] $(echo $line | awk '{print $2}')" ;;
    esac
    message="$message $added_changes"
  done
  echo $message
}

git_commit_automatically() {
  commit_message=$( git status \
    | sed '1,/Changes to be committed/ d' \
    | sed '1,/^$/ d' \
    | sed '/^$/,$ d' \
    | git_commit_automatically_loop
  )
  [ $# = 0 ] || str=" | $*"
  git commit -m "${commit_message}${str}"
}
```

以上のをコピペで.zshrcとか.bashrcとかに貼って貰えば動くと思います

仕組みは簡単で、`git status`から読み取った情報を`add`,`remove`,`rename`そして`improve`に分けて、ついでに引数として与えられたものを付け足してコミットメッセージにするだけです。
要するに、`hoge.sh`を編集して、`fuga.sh`を削除した時に

```zsh:
$ git_commit_automatically bugg fix 🐛 
 ```

とすると、
`[improve] hoge.sh [remove] fuga.sh | bugg fix 🐛`
というようなコミットメッセージのコミットができます。何の情報もありませんね。
なんか[improve]とか[add]とかあるんでそれっぽく見えますけど、最低限未満の情報しか伝わってこないので、本当にどうでもいいコミットにだけしか使えません。


関数名が長いので、適当にaliasしてください。
僕は

```zsh:~/.zshrc
alias gac="git add -A && git_commit_automatically"
```

としています、こうすることで`gac`と入力するだけでaddからcommitまで一発でできます。

###追記

ちょっとコードを直しました、引数をつけない時も"|"がついてしまうのを修正しました
【Swift】iOSアプリがフォアグラウンドになった時に、ViewControllerで更新処理をする

# これは何？
アプリがフォアグラウンドになった時に、表示内容を更新したいときの方法です。
バックグラウンドになった時も同じなので、いっしょにまとめました。

（標準の通知が使えますと教えていただいたので、[最初の投稿](http://qiita.com/kijibato/items/a0b9b956f7a9a35dcf1d/revisions/0)で書いていたAppDelegateの部分は消しました。）

# サンプル（Swift 3.0）

- Xcode 8.2.1
- Swift 3.0.2

## ViewController.swift

表示内容を更新したいViewControllerに処理を追加します。

```swift:ViewController.swift
import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        NotificationCenter.default.addObserver(self, selector: #selector(ViewController.viewWillEnterForeground(_:)), name: NSNotification.Name.UIApplicationWillEnterForeground, object: nil)
        NotificationCenter.default.addObserver(self, selector: #selector(ViewController.viewDidEnterBackground(_:)), name: NSNotification.Name.UIApplicationDidEnterBackground, object: nil)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
    
    func viewWillEnterForeground(_ notification: Notification?) {
        if (self.isViewLoaded && (self.view.window != nil)) {
            print("フォアグラウンド")
        }
    }
    
    func viewDidEnterBackground(_ notification: Notification?) {
        if (self.isViewLoaded && (self.view.window != nil)) {
            print("バックグラウンド")
        }
    }
    
}
```

### viewDidLoad

NSNotificationCenterへ登録する

- NSNotification.Name.UIApplicationWillEnterForegroundを受け取った時に、viewWillEnterForegroundを実行する設定
- NSNotification.Name.UIApplicationDidEnterBackgroundを受け取った時に、viewDidEnterBackgroundを実行する設定

### viewWillEnterForeground

フォアグラウンドになったときの処理を書く。
そのViewControllerが表示されている場合だけ、更新したいので、

```swift
    if (self.isViewLoaded && (self.view.window != nil))
```

のブロック内に処理を書きます。こうしないと、複数ViewControllerでNSNotificationCenter登録している場合、表示されていないViewControllerでも処理が実行されるので、条件付きにしています。

### viewDidEnterBackground

バックグラウンドになったときの処理を書く。

# サンプル（Swift 2.2）
Swift 2系の、投稿初期のサンプルです。

- Xcode 7.3.1
- Swift 2.2

```swift:ViewController.swift

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        NSNotificationCenter.defaultCenter().addObserver(self, selector: #selector(ViewController.viewWillEnterForeground(_:)), name: UIApplicationWillEnterForegroundNotification, object: nil)
        NSNotificationCenter.defaultCenter().addObserver(self, selector: #selector(ViewController.viewDidEnterBackground(_:)), name: UIApplicationDidEnterBackgroundNotification, object: nil)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
    
    func viewWillEnterForeground(notification: NSNotification?) {
        if (self.isViewLoaded() && (self.view.window != nil)) {
            print("フォアグラウンド")
        }
    }
    
    func viewDidEnterBackground(notification: NSNotification?) {
        if (self.isViewLoaded() && (self.view.window != nil)) {
            print("バックグラウンド")
        }
    }

}
```
Swift TableView 初心者向け　とりあえず動かす

#目的
初心者の頃に非常に苦しんだUITableViewを、
情報整理ついで記事にしてみようと思います。
※かなりざっくりなので、わかっている人向けではないです。
[完成版をgithubにあげています。](https://github.com/tikasan/TableViewPractice_no1)
##バージョン情報
Xcode 7.3
Swift 2.2
#UITableViewって？
UITableViewはiPhoneアプリを使ったことがある人なら見たことがあると思います。
様々なアプリを作る上で、使う場面がかなり多いUIになります。
以下の写真は今回作るやつです。

<img width="320" alt="スクリーンショット 2016-07-17 20.39.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/110033/b6ac721c-117c-53bd-4951-516907b710cf.png">

UITableViewには、

- UITableViewDataSource (データを表示するデータについて)
- UITableViewDelegate　（どんな操作がテーブルビューにされたか）

大きく上の２つがありますが、正直意味わからないと思います。
今回はこれらを意識して組まずに、ViewControllerのみで組みたいと思います。
という意味もわからないと思いますので、とりあえず組んでみましょう。

##プロジェクト作成〜ストーリーボード

1.プロジェクト作成
File->New->Project->Single View Application->適当に名前つける。

2.ViewControllerにTableView置きます。
![tableview.gif](https://qiita-image-store.s3.amazonaws.com/0/110033/3c1eca17-9379-913a-120f-347e16e7504d.gif)

3.cellを置いて、名前つけます。(cellって名前です)
![cell.gif](https://qiita-image-store.s3.amazonaws.com/0/110033/7bba0641-d260-8a47-5178-d388d1d562d7.gif)

4.TableViewとStoryBoardを関連づけます。(ctr押しながらドラッグ)
　outletのままで、simpleTableViewと入力してconnectしてください
![s.gif](https://qiita-image-store.s3.amazonaws.com/0/110033/61c0d31d-4d2b-6dba-d529-2fe1cadc8032.gif)

##コーディング

```swift:swift
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
```

UITableViewDataSource, UITableViewDelegateを追加してください。
エラーが出ますが、正しい動きなので気にしないでください。
***
```swift:swift
let itemes = ["Sleepy", "Sneezy", "Bashful", "Happy",
              "Doc", "Grumpy", "Dopey", "Thorin", "Dorin",
              "Nori", "Ori","Balin", "Dwalin", "Fili", "Kili",
              "Oin", "Gloin", "Bifur", "Bofur", "Bombur"
              ]
```
配列を適当に用意します。
***
```swift:swift
// 何行？
func tableView(tableView: UITableView,numberOfRowsInSection section: Int) -> Int {
    return itemes.count
}
``` 
**表示行数**
表示するcell数を、配列の数で教えています。
つまり、ここには、数字で入れることもできます。
***
```swift:swift
// cellは何表示？
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell  = UITableViewCell(style: UITableViewCellStyle.Subtitle,reuseIdentifier: "cell")
    cell.textLabel?.text = itemes[indexPath.row]
    return cell
}
```
**表示内容**
storyBoradで設定したcellという名前のUITableViewCellに対して、何を表示するのかを決めています。
そして、cellにもともと用意されているtextLabelに対して、配列の中身を格納しています。
最後にその結果をreturnしています。

**indexPath.rowについて**
indexPath.rowというのは、現在の行数にあたる数値が入っています。
items[○行目]で、今回は配列の中身の表示を実現しています。
indexPath.rowはTableViewでよく使う変数なので、ほんのり理解しておきましょう。
***

#実行！！！
これで、cmd + Rで起動でエミュレーターを起動してみましょう。
おそらく問題なく動いていると思います。簡単でしょう？
時間があれば、もっと掘り下げたTableViewの操作についても記事にします。
Visual Studio Code ではじめての C# アプリケーションを作る

Mac でも C# 開発が可能な高機能エディタ**「Visual Studio Code」**を使ってみます。

今回は初心者向けに、インストールからお決まりの「Hello World!」を出力するアプリケーションを作成するところまでやってみたいと思います。

## 動作環境
- Mac OS X 10.14.3
- .NET Core SDK 2.2.104
- Visual Studio Code 1.31.1

## .NET Core SDK のインストール

#### .NET Core SDK をインストール
「.NET Core SDK」のインストーラーに従ってインストールしてください。

.NET Core SDK ダウンロードサイト
https://www.microsoft.com/net/download

<br>
#### 「Hello World」アプリケーションを作成する
これで .NET Core アプリケーションを作成する準備ができましたので、「Hello World」アプリケーションを作成します。

ターミナルを開いて、以下のコマンドを実行してください。

```sh
$ dotnet new console -o myApp
$ cd myApp
```

成功するとプロジェクトフォルダが生成されます。

それでは「Hello World」アプリケーションを実行します。

```sh
$ dotnet run
```

成功すると「Hello World!」と出力されます。

<br>
#### Visual Studio Code をインストール
「Visual Studio Code」をダウンロードしてください。

Visual Studio Code ダウンロードサイト
https://code.visualstudio.com/Download

1. 「Visual Studio Code」を起動します。
2. メニューから「ファイル（File）」＞「開く（Open）」を選択し、先ほど作成した「myApp」フォルダを開きます。
3. メニューから「表示（View）」＞「デバッグ（Debug）」を選択し、デバッグ表示に切り替えます。（ショートカットキー：Command + Shift + D）
4. 「デバッグを開始（Start Debugging）」ボタンを押してデバッグ実行します。（ショートカットキー：F5）
5. メニューから「表示（View）」＞「デバッグコンソールの切り替え（Debug Console）」を選択し、出力内容を確認します。（ショートカットキー：Command + Shift + Y）
6. ビルド実行が成功していればデバッグコンソールに「Hello World!」と出力されます。

<img width="1136" alt="vscode_1_31_1.png" src="https://qiita-image-store.s3.amazonaws.com/0/127532/4d17d97c-a05d-9ce1-c042-cc5ee9f951b4.png">

## まとめ
Visual Studio Code は本家の Visual Studio とは違って、IDE ではなくテキストエディタです。

Visual Studio に慣れていると、最初は戸惑うところもあるかもしれません。

しかし Visual Studio Code にも強みがあります。

- クロスプラットフォーム（Windows、Mac、Linuxで動作する）
- オープンソース（ https://github.com/Microsoft/vscode ）
- 開発速度が速い（毎月リリース）
- 動作が軽量／高速
- 拡張機能が豊富

もう少し詳しく知りたい人は、アットマークITの記事を読むと良いと思います。
 
アットマークIT>Visual Studio Codeの使い方、基本の「キ」
http://www.atmarkit.co.jp/ait/articles/1507/10/news028.html
El Capitanでhomebrewできなくなっていたのを解決

## El Capitanでhomebrewができなくなっていた
`brew update`したら以下のエラーがでて、アップデートができなかった。`brew doctor`をしてもダメで、homebrewが全部使えなくなっていた。El Captanで新たに追加されたSystem Integrity Protectionという新機能が原因らしい、homebrew本体をリセットすることで解決するとのこと。  


>/System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/rubygems/core_ext/> kernel_require.rb:55:in `require': cannot load such file -- mach (LoadError)

そこまで複雑でないので、ググれば解決する問題だけど一応メモしておきます。

## 解決方法
### <b>homebrewのリセットと/usr/local以下の権限を自分に付与</b>


### 手順1./usr/localへ移動し、git reset&git clean
```
cd /usr/local
git reset --hard && git clean -df
```


試しに、'brew doctor'するが、パーミッションがないと以下のエラーがでるので、/usr/local以下の書き込み権限を自分に付与
> warning: unable to unlink .yardopts: Permission denied
warning: unable to unlink CONTRIBUTING.md: Permission denied
warning: unable to unlink SUPPORTERS.md: Permission denied
fatal: cannot create directory at '.github': Permission denied



### 手順2./usr/local以下の書き込み権限を自分に付与
```
sudo chown -R $(whoami):admin /usr/local
```

これで、homebrewが使えるようになったはず。


僕の環境は、homebrew-caskがインストールされており、これも直す必要がありました。具体的にはuntap(レポジトリの修正)し`brew tap --repairを行います。

```
brew untap caskroom/homebrew-cask
brew tap --repair
```



## 参考
* [Homebrewを久々にupdateしたら出来なかった時の対処法](http://qiita.com/takezoux2@github/items/aa2a5f0bef19cd0d8508)
* [Bug report: Could not link phinze/cask manpages](https://github.com/caskroom/homebrew-cask/issues/16094)
* [homebrewとは何者か。仕組みについて調べてみた](http://qiita.com/omega999/items/6f65217b81ad3fffe7e6)
scala-xmlの\演算子と\\演算子の違いまとめ


xmlで書かれた情報をScalaで抽出してDBに入れようとしたら、軽くハマったのでまとめ。

xmlから特定の要素を取り出すには、\演算子と\\\演算子を使います。
コップ本やネットで言葉の説明を読んでもこの2つの演算子の違いがよくわからないので、自分で動かして試してみました。

##\演算子

例えば下記のようなxmlに対して\演算子を使用すると、コメントのような出力になります。

```
val xml0=
	<a>
		<b>
			<c>
			</c>
		</b>
	</a>
	
println(xml0 \ "a") //　何も出力されない
println(xml0 \ "b") //　<b><c></c></b>
println(xml0 \ "c") //　何も出力されない
```

ここから分かるのは、\演算子は一番外側の要素の子供に対してのみ有効な演算子であるということ。
一番外側の要素や、そこから2階層以上深い要素に対しては使うことができません。
なぜこういう仕様なのかは、XMLに詳しくないのでよくわかりません（XML操作は、通常子要素に対してのみ行うものなのでしょうか？）。

##\\\演算子

どのような深さの要素も抽出できるようにするには、\演算子ではなく、\\\\演算子を使います。

```
val xml0=
	<a>
		<b>
			<c>
			</c>
		</b>
	</a>
	
println(xml0 \ "a") //　<a><b><c></c></b></a>
println(xml0 \ "b") //　<b><c></c></b>
println(xml0 \ "c") //　<c></c>
```

##\演算子は何のために必要？
こう見ると、毎回\\\\演算子だけ使えば良いような気がするのですが、そういう単純な話ではないのでしょうか？
xml操作ってあまりする機会がないので何となく釈然としませんが、とりあえず当面の自分の目的は果たせそうです。
サーバ側のファイルをSublimeTextで編集する

#環境
Mac OSX ElCapitan
Raspberry Pi2 raspbian

#クライアント側のSublimeTextの設定
Sublime Textの「Package Contral: Install Package」で「rsub」をインストール

#サーバ側の設定
以下のコマンドを入力
`$ sudo wget -O /usr/local/bin/rsub https://raw.github.com/aurora/rmate/master/rmate`

`$ sudo chmod +x /usr/local/bin/rsub`

#クライアント側のconfigファイルの設定
`~/.ssh/config`の接続先の設定項目の最後に以下を追加
`RemoteForward 52698 localhost:52698`

#rsubでファイルを開く
クライアント側でSublime Textを起動しておいて
接続先のコンソール上で
`$ rsub ファイル名`
と入力すると起動しているSublime Textでファイルが開く
公開鍵暗号方式によるSSH接続

#環境
Mac OSX El Capitan
Raspberry Pi2 raspbian

#RSA暗号鍵の生成
サーバ側(ラズパイ)、クライアント側(Mac)両方で以下のコマンドを入力し、RSA暗号鍵を生成する
`$ ssh-keygen -t rsa`
いろいろ入力を促されるが、全て何も入力せずにEnterをだけで先に進めればOK


#クライアント側の公開鍵をサーバに転送
クライアント側でscpコマンドを使ってサーバに公開鍵を転送する
`$ scp -P 22 ~/.ssh/id_rsa.pub user@ipアドレス:~/.ssh/authorized_keys`

他のクライアントPCからも公開鍵暗号方式でSSH接続したい場合は、authorized_keysの最後に公開鍵を追加していけば良い。

#パーミッションの変更
クライアント側
`$ chmod 700 ~/.ssh`

サーバ側
`$ chmod 600 ~/.ssh/authorized_keys`

#パスワードによるログインを禁止にする
サーバ側のsshの設定を変更する
`$ sudo vi /etc/ssh/sshd_config`

`#PasswordAuthentication yes`
↓
`PasswordAuthentication no`

その後、sshをrestartすれば設定が反映される
`$ sudo /etc/init.d/ssh restart`

#config設定
SSH接続のたびに `$ ssh user@ipアドレス` を入力するのは手間がかかる
クライアント側の `~/.ssh/config` を編集(無ければ作成)する

```
Host raspi2
  HostName     192.168.76.73
  User         pi
  Port         22
  IdentityFile ~/.ssh/id_rsa
```

例えば上のように設定しておくと、次回から
`$ ssh raspi2`
と入力するだけでsshによる接続ができるようになる。
Viewのタッチを排他制御しよう


##はじめに
わりと重要だと思われるボタン同時押しなどを防ぐ排他制御に使うプロパティ"exclusiveTouch"。
この前ようやく使う機会があった（使った事はあったけど、完全に忘れていた可能性もありますが。）ので、記事にしてみることにしました。

##exclusiveTouchとは
ぐぐってみると、UIButtonで使用する例が沢山出てきますが、実は"exclusiveTouch"はUIViewクラスのプロパティです。

![exclusiveTouch](https://dl.dropboxusercontent.com/s/rajawdb2xpps0ye/exclusiveTouch.png)

Swiftならtrue、Obj-CならYESを代入すると、同時押しを禁止することができます。

```Swift
nohirapView.exclusiveTouch = true
```
```Obj-C
nohirapView.exclusiveTouch = YES;
```

##この前使った時
###例
UIButtonではなく、UICollectionViewのヘッダーとセルで使用しました。
だいぶ変更したり端折りましたが、以下の感じです。

```Swift
//MARK:- UICollectionViewDataSource
extension NohirapViewController: UICollectionViewDataSource {
	func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("NohirapCollectionViewCell", forIndexPath: indexPath) as! NohirapCollectionViewCell
        
        // この辺りでセルのアイテムをセットする
        
        cell.exclusiveTouch = true
        
        return cell
    }
    
	func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
		if kind == UICollectionElementKindSectionHeader {
			if let bannerView = collectionView.dequeueReusableSupplementaryViewOfKind(kind, withReuseIdentifier: "NohirapBannerCollectionViewCell", forIndexPath: indexPath) as? NohirapBannerCollectionViewCell {
				bannerView.exclusiveTouch = true
				
				return bannerView
			}
		}
		
		// この辺りで色々やる
	}
}
```

###何故使ったか
実は、今携わっている案件のテストチームが見つけたバグがきっかけでした。
正直、collectionViewのヘッダーやセルの同時押しは想定していませんでしたが、ユーザーには様々な方がいらっしゃると思うので、こういった裏技的な操作に対応する時なんかに"exclusiveTouch"は重宝する気がします。

##まとめ
exclusiveTouchはUIButtonやUICollectionViewCellなど、UIViewのサブクラスの同時押しを禁止するのにとても便利です。
同時押しを許す設計以外では、こまめに設定しておくと良いと感じました。
AWS EC2 + PHP7 + MySQL6 + Nginx + Atom !!!!

# こんな感じの環境をつくってみるよ！
クラウド：AWS
WEBサーバー:Nginx
言語:PHP7
DB:MySQL6
エディタ:Atom
アップロード:AtomのSFTPのプラグイン

# AWSを使えるようにする
以下にならって、AWSの設定をする。
Railsでの説明になってます。
今回はPHPを動かしたいので、3番までやります。

http://qiita.com/naoki_mochizuki/items/f795fe3e661a3349a7ce
(@naoki_mochizuki さんありがちゅ)

# PHP7をインストール

```
sudo rpm -Uvh https://mirror.webtatic.com/yum/el6/latest.rpm
sudo yum install --enablerepo=webtatic-testing php70w php70w-devel php70w-fpm php70w-mysql php70w-mbstring php70w-pdo
```

# Nginxをインストール

[nginxとphp-fpmについては、こちら](http://qiita.com/kotarella1110/items/634f6fafeb33ae0f51dc)

```
sudo yum install nginx
```

# Nginxの設定を更新

```:/etc/nginx/nginx.conf

http {
  server_tokens off;
  index index.php
      server {
        root /var/www/html/app_name;

        location / {
           try_files $uri $uri/ /index.php?/$request_uri;
        }

        location ~ \.php$ {
            root           /var/www/html/app_name;
            fastcgi_split_path_info ^(.+\.php)(/.+)$;
            fastcgi_pass   127.0.0.1:9000;
            fastcgi_index  index.php;
            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
            include        fastcgi_params;
        }
      }
}
```

# php-fpmの設定を更新

```:/etc/php-fpm.d/www.conf
user = nginx
group = nginx
```

# 起動の確認

```
sudo service nginx start
sudo chkconfig --list nginx

sudo service php-fpm start
sudo chkconfig --list php-fpm
```

# 自動起動の設定

```
sudo chkconfig nginx on
sudo chkconfig php-fpm on
```

# ブラウザで見てみる

こうなっていればオッケー。

<img width="955" alt="スクリーンショット 2016-07-18 0.15.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/74046/b944cfc7-d993-9a11-0a70-9dd4c5912038.png">

# MySQL6 のインストール
http://qiita.com/macococo/items/4ad7e77c389804a3940e

# MySQLのユーザー権限変更
http://www.yukun.info/blog/2008/10/create-user-grant-password.html

# Atomでrsyncする

権限を変えて、

```
sudo chown -R group:user directory
```

https://atom.io/packages/remote-edit

をつかう。

# imagecreatefromstring()をつかって画像を使うとか

```
yum insatll php-gd
```

# 403になるとき見直す

- `/var/www/html/`のパーミッション
- `/var/www/html/`のゆーざーグループ

# 参考
- http://owani.net/php/php7-nginx/285/
- http://qiita.com/toshihirock/items/77835f83f679423874ea
- http://nginx.org/en/docs/http/ngx_http_core_module.html#server_tokens
Web ComponentsとPolymer【解説編】

# 初めに

最近WebアプリのUIのコンポーネント化をよく聞きます。
調べてみるとWeb ComponentsとPolymerという単語がHOTワードなそうで。
この2つについて、何回かに分けて解説から導入、実装まで書いていきたいと思います。

今回は解説編です。


# Web Components

Web CoponentsとはWebアプリ、サイトを部品を組み合わせたり再利用することで簡単に効率よく構築する考え方です。

例えば消費税を計算する処理を下記のように考えたとします。

`sum = x * 1.08;`

この消費税の計算処理をいろんな箇所で使うとき、それぞれの場所でこの計算式を書くのではなく、基本的にはメソッドにして、消費税計算メソッドを使うときに呼ぶようになると思います。

このメソッドは部品とみなすことができ、一度作った部品(メソッド)は再利用することができます。
また、部品(メソッド)をいくつも作り、組み合わせることは今までしてきたことがあると思うので馴染みがあると思います。
この考え方をWebサイトの構築でも利用するのがWeb Componentsです。

例えばボタンを作成するときは下記のようなHTMLとCSSを記述します。

```html
<a href=”index.html” class=”hoge-button”>
    hoge-button
</a>
```

```css
.hoge-button {
    display: inline-block;
    width: 260px;
    padding: 20px;
    border-radius: 4px;
    background-color: #afa58d;
    color: #fff;
    text-decoration: none;
    letter-spacing: 1px;
}
```

このボタンを他の箇所で利用したい場合、このHTMLとCSSをコピペする必要がありますが、これでは、ボタンの修正をしたい場合、コピペした箇所全てを修正することになります。

また、cssが他の箇所に影響する恐れもあります。

そこでHTMLとCSSを部品とみなして再利用する仕組みをWeb Componentsは提供します。
上記の様はボタンは下記のように独自タグを一つ記述するだけになります。

```html
<hoge-button></hoge-button>
```

このようにWeb Componentsはコンポーネント化を提供します。
このコンポーネント化は下記の4つの技術の組み合わせによって実現されています。

- Custom Elements → 要素をユーザーが独自に定義することができる
- Shadow DOM → HTMLやCSSに隠されたスコープを形成し、外部から隠す
- Templates → 独自の要素内にHTML、CSSを記述する
- HTML Imports → 作成したHTMLファイルを取り込む



なんと便利なんだ！と自分は感動していましたが、この独自タグを作成するのは結構めんどくさかったりします。
しかし、めんどくさいことは誰かが楽にしてくれるのが世の常で、ここでPolymerが登場します。

# Polymer

[Polymer](https://www.polymer-project.org/1.0/)とはWeb Componentsをより強力に、簡単に扱うJavaScriptのライブラリです。

上記のhoge-buttonタグは下記のように書くことで、実装できます。

```html
<dom-module id="hoge-button">
    <style>
    :host a {
        display: inline-block;
        width: 260px;
        padding: 20px;
        border-radius: 4px;
        background-color: #afa58d;
        color: #fff;
        text-decoration: none;
        letter-spacing: 1px;
    }
    </style>
    <template>
        <a href=”javascript:(0)”>
            hoge
        </a>
    </template>
</dom-module>
<script>
Polymer({
    is: 'hoge-button',
});
</script>
```

dom-muduleとPolymerメソッドのisに独自タグ名を記載します。
:hostと書くことで、独自タグに対してcssを記述することができます。
実際のcssは下記のようになります。
このように独自タグでcssを記載することで他に影響を及ぼさないようにできます。

```css
hoge-button a {
    display: inline-block;
    width: 260px;
    padding: 20px;
    border-radius: 4px;
    background-color: #afa58d;
    color: #fff;
    text-decoration: none;
    letter-spacing: 1px;
}
```


この作成した部品は内部で完結するので再利用、配布などができます。
特にGoogleが力を入れており、いろんな部品を公開しています。
マテリアルデザインのボタンから、GoogleMapなどが提供されており、
基本的にタグを記述することで簡単に利用することができます。

[Polymer Catalog](https://elements.polymer-project.org/)

# 終わりに

今回は解説編ということで簡単にWeb ComponentsとPolymerについて解説しました。
次回は導入して実際に利用していきたいと思います。
ansibleでgolang環境を作るよ〜

ansibleでgolang環境を整えるにはシンプルにはこんな感じ

```
    - name: install wget
      yum: name=wget state=present

    - name: get go source
      command: wget https://storage.googleapis.com/golang/go1.5.3.linux-amd64.tar.gz

    - name: tar go source
      command: tar -C /usr/local -xzf go1.5.3.linux-amd64.tar.gz

    - name: put /conf/go/go.sh
      copy: src=conf/go/go.sh dest=/etc/profile.d/go.sh owner=root group=root mode=640

    - name: make go workspace path 1
      file: path=/var/local/workspace state=directory

    - name: make go workspace path 2
      file: path=/var/local/workspace/go state=directory
```

なんでこんな面倒なことするかというと、exportするのにansibleでどうやるのかわかんなかったので・・・

```conf/go/go.sh
export PATH=$PATH:/usr/local/go/bin
export GOPATH=$HOME/go
export PATH=$PATH:$GOPATH/bin

```
Ruby on Rails で Slim を導入し、超スッキリしたコードを書く

#はじめに
これまでテンプレートエンジンをRails標準のERBで書いていましたが、軽量かつスマートに書けるというSlimを導入しました。

#環境
・Mac OS X EI Capitan (10.11.5)
・Ruby 2.3.0
・Rails 4.2.6
・Sublime Text 2 (エディタ)



#まずテンプレートエンジンって何？
細かいことは置いておき、RailsでWebアプリケーションを書く際に、HTML内でRubyを使用したいときに使うものです。
Railsの有名なテンプレートエンジンには、ERB(標準)、Haml、Slimがあるそうです。

その中でも、軽くて速く、そして習得するのも容易と言われている Slim を導入することにしました。

##ERB流の書き方
ERBを使用して、１から５までの数字をHTML内で列挙してみます。

```html+erb:index.html.erb
<div class="container">
    <h1>数字を列挙</h1>

    <ul>
        <% (1..5).each do |number| %>
            <li>
                <%= number %>
            </li>
        <% end %>
    </ul>
</div>
</div>
```

ポイントは ```<% %>``` もしくは ```<%= %>``` で囲んだ部分でRubyのコードを書いていることです。
ERBでは既存のHTMLのコードに、簡単にRubyのコードを埋め込むことができます。

個人的な感想かも知れませんが、```<% %>``` を毎回書くのがめんどくさいですし(```%```って打ちにくい位置にある)、普段　Python や Ruby などのスクリプト言語に慣れているため、```<>``` を多用したコードは可読性が低いように感じます。

##Slim流の書き方
まず、Slimを導入する前に、Slimで書けばどの程度すっきりできるか見ていきましょう。

```index.html.slim
div.container
    h1 数字を列挙

    ul
        - (1..5).each do |number|
            li = number
```

おぉ、かなりすっきりしました。
※ ここで、index.html.erb を削除するのをお忘れなく

#Slimの導入

それでは、Slimを導入していきましょう。
まず、Gemfile に以下を追記します。

```ruby:Gemfile
gem 'slim-rails'  # slimの導入
```

あとは、追加したパッケージをインストールするだけですね。

```bash
$ bundle install
```

#Slimの作法

ざっと Slim に必要な知識です。
・HTMLタグの ```<>``` は削除
・HTMLの閉じタグ（例：```</div>```）も削除
・idは```#```、classは```.``` でタグの後に続ける
・Ruby の ```<% %>``` は ```-``` を前につける
・Ruby の ```<% end %>``` は不要


#便利な補足

##Sublime Text へ Slim のハイライトを追加
Sublime Text 上から ```command+Shift+P``` で ```install package``` を開き、```Ruby Slim``` を検索して、インストールすればOKです。

メニューバーから ```View > Syntax > Ruby Slim``` を選択すれば、Slim で書いたコードがハイライトされます（超簡単で便利）

##Railsで動作確認用のファイルを作成
コマンドラインから、サンプル用のコントローラを作成
コントローラ生成時に、indexのViewも同時に生成

```bash
$ rails g controller Samples index
```

app/views/samples/index.html.erb を上記のサンプルコードのように編集した後、コマンドラインからサーバーを立ち上げる

```bash
$ rails s
```

ブラウザから localhost:3000/samples/index にアクセスして、上記の動作確認を行う。

#参考文献
・[早い、簡単、生産的!? RailsのHTMLテンプレートエンジン Slim入門](http://ruby-rails.hatenadiary.com/entry/20140929/1411997071)
・[Railsのテンプレートエンジンの比較 erb vs slim vs haml](http://ruby-rails.hatenadiary.com/entry/20141001/1412169453)
・[Ruby製のテンプレートエンジン『Slim』に今更ながら入門してみたのでメモする](http://tagamidaiki.com/learning-ruby-slim/)
SentryとTrelloでバグを管理する

# モチベーション
```
Sentryで例外を検知する => Trelloでバグを管理する
                     ↑ ここを一番楽にする方法を探す
```
各サービスから提供されている機能を使って何ができるか、という試行錯誤のまとめです。

# 登場人物
## Sentry
[Sentry: Track exceptions with modern error logging for JavaScript, Python, Ruby, Java, and Node.js](https://getsentry.com/welcome/)
![image](https://qiita-image-store.s3.amazonaws.com/0/62601/abb26fac-cf49-29be-7347-3786130cfe13.png)

アプリケーションのクラッシュをリアルタイムに教えてくれる頼もしいサービス。OSSとして公開もされている。
対応言語はたくさん。
JavaScript, Node, Python, PHP, Ruby, Go, etc


## Trello
[Trello](https://trello.com/)
![image](https://qiita-image-store.s3.amazonaws.com/0/62601/765c052a-ee60-b677-5b04-0358b1ac9b48.png)

タスク管理サービス。カードやリストについての移動・複製が柔軟でかゆいところに手が届く。
広報担当犬のTacoが可愛い。
![image](https://qiita-image-store.s3.amazonaws.com/0/62601/db8b638b-bb74-fc1f-34bc-f1fe6f867a69.png)


## Slack
[Slack: Be less busy](https://slack.com/)
![image](https://qiita-image-store.s3.amazonaws.com/0/62601/4720a42d-6156-5c0c-56fb-97fac6ec5640.png)

言わずと知れたチャットツール。


# Sentry x Trello

![image](https://qiita-image-store.s3.amazonaws.com/0/62601/c4f8f6a1-b1bc-425c-3735-fd44dc529dec.png)

## パターンA: SentryのTrello Pluginを使う
Trello連携プラグイン。（サービスの方の）Sentryではプラグインリストから設定できる。
[DamianZaremba/sentry-trello: A plugin for Sentry that creates cards on a Trello board](https://github.com/DamianZaremba/sentry-trello)

![image](https://qiita-image-store.s3.amazonaws.com/0/62601/5494b43e-191d-2a9b-94ed-9f6a8b22a15d.png)

設定するとSentryのissue（クラッシュイベント）に項目が追加される。
<img src="https://qiita-image-store.s3.amazonaws.com/0/62601/34fd344c-6b24-aa2f-c371-d92ab7faa397.png" width="400px">

「Create Trello Card」を押すと、どのボードのどのリストに追加するか選ぶことができる。
Sentry側で勝手にTrelloに登録してくれるわけでは無い。

## パターンB: Trello for Slackを使う
2016/06/21に公開された「Trello for Slack」
https://trello.com/platforms/slack
（リンク先に分かりやすい動画がある）
![image](https://qiita-image-store.s3.amazonaws.com/0/62601/53405599-a937-9ce6-04d5-c7beb72a05d1.png)

これを使って、Sentryから通知が来たら、Slackで

```
/trello 〜
```
と打ってバグを登録する。最初にカードを追加する際、Trello側からユーザ単位で許可を求められる。

## 比較

| アプローチ | 長所 | 短所 |
|:-:| --- |---|
| パターンA  |  1. タイトルや本文の登録が楽 <br> 2. 一度登録するとそのissueからは「Create Trello Card」が消えるので二重登録しない| Sentry issueをTrelloに登録したかどうかはSlackからは分からない |
| パターンB  | 1. Slackを見返すとTrelloのカードを追加したことがわかる <br> 2. アサインや期限の設定もSlack上からそのままできる  | 1. どのSentry issueを追加したのかは分からない<br> 2. チャットツールがSlackでなければ使えない |

# 考察： 一長一短
「チャットツールにSlackを使っている。他のツール（サービス）は検知させるだけ。可能な限りSlackに集約する。」
という運用をするならパターンB。Trelloとのリッチな連携が使える。

一方、Sentryの良さは、例えばクラッシュがAPIであればBackTraceに加えて、

* どのサーバに
* どういうパラメータで
* どのエントリポイントが叩かれたか

という情報をまとめて見られるところだと思う。クラッシュ情報の詳細を確認した流れでカードの作成を行うのがパターンA。行ったり来たりが無くスムーズ。Trelloに作られるカードの品質も一定かつ十分高い。

# 結論
個人的にはパターンAが良いと思った。
クラッシュしたらクラッシュレポート見る。見たらそのまま登録。という流れシンプルで良い。

```
結論その2

身も蓋もない事を言えば、最終的にバグが適切に管理されて修正されればそれで良いと思うので、
AだのBだの言うことに意味は無い気がした。。

ただ、やり方が２つあると混乱することもあるので、長短を把握しておいて損はない。。と思うことにした。
```

# 余談： バグチケット作成の自動化
アプリケーションがクラッシュしたら、自動的にチケットが作られる仕組みができないものかとも考えたが、以下の理由から今は消極的。

1. クラッシュレポートはちゃんと人が見て判断する方が良い
    * なぜ壊れた？
    * 修正の緊急性は？
    * 発生の頻度は？
2. もし自動化するほどクラッシュが多いとしたら、それ自体が問題
    * ちゃんと直す
    * さっさと直す
4. それでもBotなら…Botならきっとなんとかしてくれる…か？
    * Botは便利だが、バグチケットをどうこうするBotを作るくらいならさっさと直したほうが良い
    * Botに頼るとそれが壊れた時にどうしようもない
USBの仕様いろいろ?

Type-Cとか給電で一部で変な流言を見て、混乱があるようなので、わかる範囲のあやふやな知識をメモる。

# バージョン
## 1.0(b)
バグがあったような...
## 1.1
ここらか互換性が保たれてる、Low(1.5 Mbps)/Full(12 Mbps)策定。
コントローラとしてはOHCI/UCHIがある。
## 2.0
High(480 Mbps)策定。
コントローラは、1.1互換はOHCI/UHCIにまかせてEHCIがHighを制御するのが一般的。
## 3.0
Super(5 Gbps)策定
コントローラは、これ以上の建て増しがいろいろ不具合あるので、全制御するxHCIが作成された。(仮想化とかCPU利用率とか、もろもろ効率化)
## 3.1
3.0に対して、Superの速度増速(内部的にはエンコードなどいろいろ違うはず)。
これに合せ、3.0相当も統括して再定義(3.0のも仕様は生きている?)、3.1 Gen1(3.0相当の5 Gbps)/Gen2(10 Gbps)として定義されている。

# コネクタ
コネクタ自体は、バージョンとは独立しており、通信の線のことを除けば1.1(1.0?)から3.1までどれでも利用はできる、はず。

たまーに両Type-Aとかの邪道を見掛けるが、やめてほしい...

## Type-A
アップストリーム側に使う長方形のコネクタ、3.0以上の通信には、内部が2段になったものを使う、オスメス(プラグ/レセプタクル)は、全バージョンを通じて挿抜可能。

なお、後述のType-Cと違い、裏表があるが、なぜこれが使われつづけたかというと、USBとして「安価で普及する規格である」ことがかなり至上命題だから。
線が少ないことで安く、同じ形状を維持することで、エコシステムを維持することが大事だったので。

On-The-Goの関係から、Mini/Microについてもある。

## Type-B
ダウンストリーム側に使う家型?のコネクタ、3.0以上の通信には、上にくっついている増設部分が必要。なので3.0のメス(レセプタクル/機器にある側の口)に1.1/2.0のケーブルオス(プラグ)はささるが、逆は無理。

### Mini
ほぼなくなってしまったが、スマフォ前くらいの時代の小型周辺機器には多い。コネクタとしてはまあまあ小さいが、難点は挿抜の耐久回数が少いらしいこと。

### Micro
現在主流。3.0以降については、横に拡張したコネクタが必要になる。
まだ速度需要がスマフォにはあまりないことと、コネクタのこともあり、3.0はあまり見掛けない(ケーブル抜き差しできる小型3.0ハブとかにはある)。

## Type-C
リバーシブル、どちら側でも使える。給電+2.0までの通信+3.1の通信x2、AUX、CCすべてコミのコネクタが定義されている。
なお、抵抗や結線などで確認することで、後述の充電とか、高速通信についても可否がわかり、古いケーブル+コネクタ変換アダプタでもUSBとしての利用には支障はないようにしてはある。

_ただ、ここらへんは実際に作る側に裁量があるともいえるので、自衛大事(それが安価や量としての普及をささえたので...)_

# 給電について
素の給電は、5V/500mA(3.0なら900mA)あるが、これは通信が成立し、機材の消費電力について調整された後に可能のはずで、初動はsleep時と同程度だったはず(150mAだっけ?)

なので、素のUSBでただ給電というにはいろいろな制限があり、そのため、野良規格/機材もでてきてしまったので、追加規格として調整されている。

ちゃんと従うなら、有用なのだが、面倒な面もあるので、いまも野良がないわけではない...。

追記

- [乱立するスマホ向け急速充電の規格をざっくり解説](https://hanpenblog.com/1472/)
- [USB Power Deliveryの規格をざっくり解説](https://hanpenblog.com/3343/)

が参考になります。

PD/BC以前として、定常で

|             状態             |   電力    |
|:----------------------------|:---------:|
|スタンバイ                    |(たぶんローパワーと同じ?)|
|ローパワーデバイス(USB 2.0まで)|100mA/5V   |
|ローパワーデバイス(USB 3.0)    |150mA/5V   |
|ハイパワーデバイス(USB 2.0まで)|500mA/5V   |
|ハイパワーデバイス(USB 3.0)    |900mA/5V   |

## C to Cのケーブル
状況を問わず、1.5A/5Vは対応できるようになってるように定められている。
一応

* 1.5A/5V給電に対応したC to Cケーブルは22kΩの抵抗
* 3.0A/5V給電に対応したC to Cケーブルは10kΩの抵抗

とのこと
BCではなく、掛けられるとのこと

## USB Battery Charging (1.2)
1.5Aまで。
肝として次の点を考慮されている

* USB機器として、まったくネゴできなくても条件チェックでOKなら給電される(そういう実装がされてれば)
* 機器として運用中もOKはOK

なぜかというと、バッテリが完全に飛んだ機器は、USBからの初期給電だけでは機材(というかコントローラと電源回路)をWakeUpできなことがありうるし、その状態でもある程度強い給電してくれないと、給電回路が動かせず、結果充電もなにもできないこと。
あとUSBホスト機能がまったくない充電専用機材(簡易なACアダプタなど)として給電できる必要もあるので、そちらの面からも必要とされた。

## Power Delivery (2.0)
バージョンもあるが2.0/Type-Cで最大で、20 V、100 Wまでいける、
なおMicroA/Bがからむと、20 V、60 Wまで(らしい?、くわしくない)。
追記 : 前のPDならできたが、今の2.0からはType-Cが基本なのでないと思うほうがいいかな

電力ネゴとしてはType-Cでないケーブルでもいける(ホスト/デバイスでちゃんとサポートできるなら)。
Type-Cでない場合なら抵抗が56kΩが規格値。なのでそうなってないと、過剰に流れてヤバいそうです。

ここがキモなんだが、正直うかつ言って買って火が出てもあれなので...当座はメーカーACアダプタ(Type-C)か、Type-C接続/給電OKのモニタ等+サポートOKなC to Cケーブル使いましょう...。

## Quick Charge
Qualcommの独自規格、一部報道でType-Cと不整合との話だったが、Qualcomm曰く「Type-Cだったとしても、そのネゴ可能な範囲で動作する」らしい。その意味+電圧の動的な制御とかの面ではアリなんだろうけど...
Macで開発環境構築をBrewとシェルで自動化

自分用メモ。
いろいろ２番煎じなところもあるが、先人の知恵を借りて実際に構築してみた
参考にさせていただいたもの(ありがとうございます) -> [こちら](http://qiita.com/takustaqu/items/a328baf15862faa086ee)
Ansibleで構築するというエントリもいくつかあったとけど、若干敷居が高い。。。

# おしながき
~~1. Xcodeのインストール~~
2. Home Brew(とCask)をインストール
3. .bashrcにアプリのインストール先を定義
3. シェルスクリプトにインストールしたいものを書く
4. mas をインストールして、AppStoreの欲しいものをインストール

## Xcode のインストール
~~めんどくさいですが、AppStoreから普通にDL、インストールしました。~~
~~後述のmasを使うと、２台目以降楽かも？~~
Home Brew をインストールするだけで自動的に入れてくれる模様



## Home Brew インストール
参考元エントリには、Caskのインストールもありましたが最新版では不要の模様。結果としてこれだけでOK
``` /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" ```

インストールした後に、念のため以下で問題ないか確認
``` brew doctor```


## .bashrcにアプリのインストール先を定義
これも参考元と同じ
```export HOMEBREW_CASK_OPTS="--appdir=/Applications"```

## シェルスクリプトにインストールしたいものを書く
これも参考元とほぼ同じ。
私はとりあえず以下で入れました。
```
brew cask install vagrant
brew cask install virtualbox
brew cask install google-chrome
```

## masでAppStoreのアプリをインストール
mas をインストール
``` brew install argon/mas/mas ```

なぜか、1週間前に手動でいれたXcodeがリストで表示されない。。。
一旦今日はここまで
CentOS7.2 にgvmを使って最新のGolangをインストールする

#golangを入れる
```
#依存ライブラリ
sudo yum install -y curl git make bison gcc glibc-devel

#gvmをインストール
bash < <(curl -s -S -L https://raw.githubusercontent.com/moovweb/gvm/master/binscripts/gvm-installer)

#環境変数設定
source /root/.gvm/scripts/gvm

#go1.4をインストール
gvm install go1.4

#インストールされたことを確認
gvm list

#go1.4を使う
gvm use go1.4

#go1.5をインストール
gvm install go1.5

#go1.5を使う
gvm use go1.5

#go1.6.2をインストール
gvm install go1.6.2

#go1.6.2を使う
gvm use go1.6.2

#goのバージョンを確認する
go version
```
go1.6をいきなりインストール仕様とすると失敗したので、1.4から順番に入れてみました。


#go envの実行結果
```
go env
GOARCH="amd64"
GOBIN=""
GOEXE=""
GOHOSTARCH="amd64"
GOHOSTOS="linux"
GOOS="linux"
GOPATH="/root/.gvm/pkgsets/go1.6.2/global"
GORACE=""
GOROOT="/root/.gvm/gos/go1.6.2"
GOTOOLDIR="/root/.gvm/gos/go1.6.2/pkg/tool/linux_amd64"
GO15VENDOREXPERIMENT="1"
CC="gcc"
GOGCCFLAGS="-fPIC -m64 -pthread -fmessage-length=0"
CXX="g++"
CGO_ENABLED="1"
```
Photoshopの言語モードを切り替える

## バッチファイル

```bat:Switch-Photoshop-language-mode.bat
@echo off
set PHOTOSHOP_DIR=%ProgramFiles%\Adobe\Adobe Photoshop CC 2015.5
if not exist "%PHOTOSHOP_DIR%\" (
  echo %PHOTOSHOP_DIR% is not found.
  pause
  exit /b -1
)

if exist "%PHOTOSHOP_DIR%\Locales\ja_JP\Support Files\tw10428.dat" (
  set CURRENT_LANG=Japanese
  set SWITCHED_LANG=English
) else if exist "%PHOTOSHOP_DIR%\Locales\ja_JP\Support Files\tw10428.dat.bak" (
  set CURRENT_LANG=English
  set SWITCHED_LANG=Japanese
) else (
  echo Cannot understand currently Photoshop language mode.
  pause
  exit /b -1
)

echo Currently Photoshop language mode is %CURRENT_LANG%.
echo.
echo Press any key to switch to %SWITCHED_LANG%.
pause

if exist "%PHOTOSHOP_DIR%\Locales\ja_JP\Support Files\tw10428.dat" (
  rename "%PHOTOSHOP_DIR%\Locales\ja_JP\Support Files\tw10428.dat" tw10428.dat.bak
) else if exist "%PHOTOSHOP_DIR%\Locales\ja_JP\Support Files\tw10428.dat.bak" (
  rename "%PHOTOSHOP_DIR%\Locales\ja_JP\Support Files\tw10428.dat.bak" tw10428.dat
) else (
  echo Failure to switch Photoshop language mode.
  pause
  exit /b -1
)

exit /b 0
```

## 実行するとこんな感じ

```text
Currently Photoshop language mode is Japanese.

Press any key to switch to English.
続行するには何かキーを押してください . . .
```

実行するたび、日本語と英語感を相互に切り替えます。

## 動作確認

+ Windows 10.0.10586
+ Adobe Photoshop 2015.5リリース 日本語版
  + PHOTOSHOP_DIRのフォルダ名を置き換えれば、次が出ても使えるかも？ 

## 参考

大変重宝しております、有り難うございます！

+ photoshopを英語版で起動する方法(macの場合)  
http://qiita.com/tsukishimaao/items/470f361babd3569371bd

以上
Ruby on Rails で Bootstrap を超簡単に導入

#はじめに

Rails内でBootstrapを使用するときのまとめです（所要時間５分）。
いろいろとやり方はあるみたいですが、細かい設定を気にせずにできる方法です。

HTML/CSSのみで書いていた時も、そんなに導入の難しくなかったBootstrapですが、gemを使用することで、さらに楽に導入/管理ができます。

#環境
・Mac OS X EI Capitan (10.11.5)
・Ruby 2.3.0
・Rails 4.2.6

#方法

初期状態のGemfileに以下を追記します。

```ruby:Gemfile
gem 'therubyracer', platforms: :ruby
gem 'less-rails'
gem 'twitter-bootstrap-rails'
```
ターミナルで以下のコマンドを実行すれば完了します

```bash
$ bundle install
$ rails g bootstrap:install
```
#動作確認

##サンプルコード
適当なHTMLファイルを作成し、その中にBootstrapを使用してみます。

```ruby:index.html.erb
<h1>Bootstrap 動作確認<h1>
<button class="">青い角丸のボタンでOK</button>
```

##Bootstrap適用前
![bootstrap_before.png](https://qiita-image-store.s3.amazonaws.com/0/130181/c6b018f8-8c5f-75e2-9c23-8396df4c5fda.png "Bootstrap適用前")

##Bootstrap適用後
![bootstrap_after.png](https://qiita-image-store.s3.amazonaws.com/0/130181/1a90daa2-52fa-3ddc-4d71-67d10a58952d.png "Bootstrap適用後")

##[参考] Railsで動作確認用のファイルを作成
コマンドラインから、サンプル用のコントローラを作成
コントローラ生成時に、indexのViewも同時に生成

```bash
$ rails g controller Samples index
```

app/views/samples/index.html.erb を上記のサンプルコードのように編集した後、コマンドラインからサーバーを立ち上げる

```bash
$ rails s
```

ブラウザから localhost:3000/samples/index にアクセスして、上記の動作確認を行う。
BLESerial2を使って、Arduinoからセンサーデータを読みだしてみる


# はじめに
Arduinoでデータを読みだすのは簡単ですが、それをどうやって別の端末に転送するか、という問題がありますよね。
もちろんUSB経由のSerialでも、距離的に繋がるときはいいんですけど、そうでない場合も多いわけで。
そんな時に浅草ギ研様のBLESerial2を見つけたので、とりあえず使ってみようと思いその記録です。
http://www.robotsfx.com/robot/BLESerial2.html

念のため書いておきますと、BLEとか無線に対する基本的な知識はないです。

# Arduinoとの接続
ここはいちいち書きません。
浅草ギ研様のページに書いてありますので、そちらを参照してください。
http://www.robotsfx.com/robot/img/radio/BLESerial/BLESerial2_how2.html

# コード


まずはArduinoのスケッチです。
センサとかつなぐの面倒だったので、定期的にメッセージを送るだけです。
まぁ、その部分をセンサ入力に変えればいいだけなので、そこは読み替えてください。

```arduino
void setup() {
  Serial.begin(9600);
}

void loop() {
  Serial.write("hello");
  delay(1000);
}
```

次に受け手側のスケッチです。

浅草ギ研様のサイトにはiPhoneとかの接続例とコードはあるんですが、最終的にはRaspiとかと繋ぎたいのでこのコード例ではそのまま使えません。
正直言語はなんでもいいんですが、はやりのnodejsを使うことにします。

ちなみに今回は、ちょっと家にいないので、手元のMacbook Proから接続してテストしています。

```node.js
var noble = require("noble");
noble.on("stateChange", function(state) {
  console.log("on -> stateChange" + state);
  if (state == "poweredOn") {
    noble.startScanning([],false, function (err) { console.log(err); });
  }
  else {
    noble.stopScanning();
  }
});

noble.on("scanStart", function() {
  console.log("on -> scanStart");
});

noble.on("scanStop", function() {
  console.log("on -> scanStop");
});

noble.on("discover", function(peripheral) {
  console.log("on -> discover: " + peripheral);
  noble.stopScanning();
  peripheral.on("connect", function () {
    console.log("on -> connect");
    this.discoverServices();
  });
  peripheral.on("disconnect", function () {
    console.log("on -> disconnect");
  });

  peripheral.on("servicesDiscover", function(services) {
    console.log("on -> services discover " + services);
    for (var i = 0; i < services.length; i ++) {
      services[i].on("includedServicesDiscover", function (includedServiceUUIDs) {
        console.log("on -> service included services discovered " + includedServiceUUIDs);
        this.discoverCharacteristics();
      });
      services[i].on("characteristicsDiscover", function (characteristics) {
        console.log("on -> characteristics discover " + characteristics);
        for (var i = 0; i < characteristics.length; i ++) {
            characteristics[i].on("data", function (data, isNotification) {
              console.log("data: " + data);
            });
            characteristics[i].subscribe();
        }
      });
      services[i].discoverIncludedServices();
    }
  });
  peripheral.connect();
});
```

# BLESerial2の仕様
こう書いてしまうと何でも簡単にデータが送れそうに見えちゃいますが、それなりに制限もあって一度に15byteしか送れません。
15byteを超えた文字(例えば先程のSerial.writeの中身を1234567890abcdef)を送ろうとすると下記のようになります。

![スクリーンショット 2016-07-17 18.31.49.png](https://qiita-image-store.s3.amazonaws.com/0/99704/486655e4-1cdb-8c53-36e0-7a098a4a45e4.png "スクリーンショット 2016-07-17 18.31.49.png")

最初数回はオーバーする箇所(f)が次の回に回ったり、手前の数文字が次の回に回ってたりしますが、安定してくると、f以降は切られるみたいですね。

15byteを超える場合は20ms以降開けてから送信する必要があるみたいですので、delayで適切に開けて送信すればよいですね。

# 最後に
とりあえず通信はできました。簡単でした。
ちなみに、一番大変だったのはハンダ付けで、10年ぶりにハンダ付けをしたものが、この小さな基盤だったので案の定ミスりました。