OmniAICreator/Qiita-1.07M huggingface dataset:
Sortable 複数の移動



```html:sample.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/themes/redmond/jquery-ui.css">
<style>
ul.jquery-ui-sortable {
    list-style-type: none;
    margin: 0 2px;
    width: 35%;
    height: 230px;
    min-height: 1.5em;
    background-color: beige;
    border: solid 1px #606060;
    margin: 0 auto; 
}
ul.jquery-ui-sortable li {
    margin: 3px;
    padding: 1.3em;
    padding-left: 1em;
    font-size: 15px;
    font-weight: bold;
    cursor: move;
    float: left;
    width: 100px;
}
li.border-color-blue {
    border-color: blue;
}
</style>
</head>
<body>
<ul class="jquery-ui-sortable">
</ul>
<br>
<ul class="jquery-ui-sortable">
    <li class="ui-state-default border-color-blue">項目 2-1</li>
    <li class="ui-state-default border-color-blue">項目 2-2</li>
    <li class="ui-state-default border-color-blue">項目 2-3</li>
    <li class="ui-state-default border-color-blue">項目 2-4</li>
    <li class="ui-state-default border-color-blue">項目 2-5</li>
    <li class="ui-state-default border-color-blue">項目 2-6</li>
    <li class="ui-state-default border-color-blue">項目 2-7</li>
    <li class="ui-state-default border-color-blue">項目 2-8</li>
</ul>
<script>
$( function() {
    $( '.jquery-ui-sortable' ) . sortable( {
        connectWith: '.jquery-ui-sortable'
    } );
} );
</script>
</body>
</html>
```
推薦システム 〜 内容ベースフィルタリング〜

## 内容ベースフィルタリング
自分が過去に消費した情報と似た情報を提示

本を例にとると、過去購入した本と同じ作者の作品を提示したり、
映画であれば過去見た映画と過去見た映画と同じ監督や同じ俳優の作品を提示する方法

##内容ベースフィルタリングとその課題
内容ベースフィルタリングは、情報同士の近さを規定し推薦を行う手法。
人の好みの共通する部分を元に情報どうしの今日りを定義しユーザーが過去の消費した情報と距離の近い情報を提示する方法。

## どのような時に有効な手法か？
計算出来る距離の近さとユーザーの興味の関心の近さが一致していると考えられ場合に有効

## メリット
距離を定義できれば推薦が可能なため膨大な購買情報がなくてもシステムを構築できる

## 課題
情報同士の適切な距離の定義が困難である。

内容ベースフィルタリングでは「コサイン類似度」「ジャッカード係数」を用いることが多い。

重要になるのはどのように情報をベクトル化するか対象となるアイテムの情報からベクトルを構成する。

参考
http://gihyo.jp/dev/serial/01/information-recommendation-system/0004
Bitnami redmine-2.6.1-0を別サーバのredmine-2.6.9-3に移植できたので設定と進行を記録

以下サイトを参照しました
http://manbou404.blogspot.jp/2014/03/windowsredmine-bitnami.html

##Bitbucketからダウンロード
bitnami-redmine-2.6.9-3-windows-installer

移植先マシンは、Windows Server 2008 R2 Enterprize Service Pack 1 64bit Version

##Language Selection  
Japanese

##セットアップ
ようこそBitnami Redmine Stackセットアップウィザードへ  
次へ
##コンポーネントを選択
インストールするコンポーネントを選択して・・全てチェック  
* Subversion
* DevKit
* PhpMyAdmin
* Redmine
* Git  

###Installation folder
C:\Bitnami\redmine-2.6.9-3

###管理者アカウントの作成
* 表示用指名
Yoshio XXXXXX
* Emailアドレス
xxxxxx_yo@gmail.com
* ログイン名
admin
* パスワード
xxxxxxx
* 確認のためもう一度

##Webサーバポート番号
Apacheのポート番号 8080

##データベースに保管する際の言語
日本語

##Configure SMTP Setting
This is required so your application can send notifications via email
* no check

###Bitnami Cloud Hosting
* no check

###インストールする準備ができました
次へ

###インストール中
* 準備中->ファイルを展開中・・でブルーのバーが進む
* Apacheをインストール
* Subversionをインストール
* MySQL開始
* DB初期化
* Thin Cluster
・・・

###セットアップウィザードを終了中
Redmineアプリケーション起動をチェック
終了

###Bitnami Redmine Stack 2.6.9-3が起動
ManageServersタブで以下全てがRunning
を確認
* MySQL
* Apache
* Subversion
* Thinredmine
* Thin redmine2

自動的にブラウザも上がりAccess Redmineをクリック

すると、Redmineのホームページが表示されれば”完了”

-----------------------------
続いて
###添付ファイルのバックアップ
\apps\redmine\htdocs\filesフォルダの中身をすべて旧->新でコピー

単なるファイルコピーで直ぐ終わる

-----------------------------
続いて
###データベースのリストア

###旧RedmineのDBバックアップ

* cd C:\BitNami\redmine-2.6.1-0\mysql\bin
* mysqldump -u root -P 9306 -B bitnami_redmine -p >backup.sql
Enter password:70252001

・・でbackup.sql正常作成された。　　→^_^;

###backup.sqlをファイルコピー
C:\BitNami\redmine-2.6.1-0\mysql\binにある
backup.sqlを
C:\Bitnami\redmine-2.6.9-3\mysql\binにコピー

###バックアップコマンド実施
* cd C:\BitNami\redmine-2.6.9-3\mysql\bin
* mysql -u bitnami -pXXXXXXXX bitnami_redmine < d:\redmine_backup
mysql -u root -P 9306 -B bitnami_redmine -p <backup.sql
Enter password: xxxxxx
* ERROR 2003 (HY000): Can't connect to MySQL server on 'localhost' (10061)

エラーが返る
###環境変数を変更
システム環境のpath に、以下を追加
* コンパネ＞システム＞詳細設定、環境変数
* 変数名INSTALL_DIR
* 変数値C:\BitNami\redmine-2.6.9-3;C:\BitNami\redmine-2.6.9-3\ruby\bin;C:\BitNami\redmine-2.6.9-3\imagemagick

###バックアップコマンド実施、もう1回
* mysql -u root -P 9306 -B bitnami_redmine -p <backup.sql
* ERROR 2003 (HY000): Can't connect to MySQL server on 'localhost' (10061)

同じエラーが返る

###コマンドを変えてでやって見る、-p付き
* mysql -u bitnami -p xxxxxx bitnami_redmine < backup.sql
* ERROR 1045 (28000): Access denied for user 'bitnami'@'localhost' (using password: YES)

user 'bitnamiが拒否と言っている

###userをadminに変えてやって見る
* ERROR 1045 (28000): Access denied for user 'admin'@'localhost' (using password: YES)

user 'adminも拒否と言っている

###すみません、rootですね

エラー返らず通った


http://10.x.x.x:8080/redmine/

が復活
・・と思いきやPluginは一切なし、だがまあこれで一応マイグレ完了、となったので、ここまでを記録。
Swift 言語仕様 (1) Constants and variables 

Swiftは2014年に発表された新しいプログラミング言語。
Swiftではクロージャや型推論、ジェネリクスなどの近代的な機能が大きく盛り込まれ、強い静的型付けであり、静的解析は多くの問題を事前に検知する。

``` sample01.swift
let name = "Steve"
var age = 56
print(name) // Steve
print(age) // 56
```

letは定数 （一度初期化されると変更できない）
varは変数 （最大入できる）

nameはString型
ageはInt型に推論される。
ageにInt型でないものを再代入することは出来ない。

値を出力するには、グローバル関数printを利用する。

var age: Int = 56 // 型は変数名に続けて 「:」で区切って記述する。
Swiftではコンパイラによって型推論が行われるため、基本的に必要の場合のみ型を記述。

var age = 56 // ageはInt型に推論されるため意味は同じ
grepコマンドで複数の条件を指定して文字列を検索するには

## 実現したいこと

* grepコマンドで複数の条件を指定して文字列を検索する

* body.txt

```
123 ba1f2511fc30423bdbb183fe33f3dd0f
456 d2d362cdc6579390f1c0617d74a7913d
789 aa3f5bb8c988fa9b75a1cdb1dc4d93fc
000 23ebe88c0224f4f4fc0b608216e98735
111 1181c1834012245d785120e3505ed169
```

具体的には、上記のようなテキストファイルをgrepする際に、 123 と 456 を含む行のみを検索し検索結果を表示させたい。

## 実現方法および解決方法

grepコマンドラインオプションの -e を利用すると複数条件で検索できる。

## 実行コマンド

```
grep -e 検索文字列 -e 検索文字列
```

* -e オプションで次々に検索文字列を付け足していきます。


```
$ grep -e 123 -e 456 body.txt
123 ba1f2511fc30423bdbb183fe33f3dd0f
456 d2d362cdc6579390f1c0617d74a7913d
$
```


## 情報源

man grep

## 補足
「Rubyを始めよう！・・・・rbenv? gem? rvm?」

最近Rubyを始めました。
「よし、Rubyを始めるぞ！！インストールだ！」とは思ったものの、gemやら、rbenvやら、インストールという言葉には関係なさそうな言葉がたくさん出てきました・・・。
まとめようと思います。

###環境
CentOSにRubyをインストールする前提で話を進めさせていただきます。


#そもそもRubyはどんな言語?
Rubyは、日本人のまつもとゆきひろさんが開発されたオブジェクト指向スクリプト言語。
以下のような特徴を持つ。

- オブジェクト指向言語である
    - Javaと同様にオブジェクト指向言語である。数値なども基本データ型もすべてオブジェクトである点がJavaと異なる。
- インタプリタ言語である
    - 事前にコンパイルする必要がない。プログラムが動的に解釈され、実行される。
- シンプルな文法
    - 例えば、RubyでHelloWorldを書こうとすると `puts "Hello World!" ` の一行で完成。

また、Rubyを使用するWebアプリケーションフレームワークであるRuby on Railsもあります。


#Rubyをインストールする
Rubyをインストールするにはいくつか方法があります。

##システムのパッケージ管理システムを使用する
例えば、CentOSだと`yum`というシステムのパッケージ管理システムを使用してインストールすることができます。

```
sudo yum install ruby
``` 

でRubyのインストールができます。

##そのほかのツールを使う
ここで登場するのが、rvmとrbenvです


###rvmとは
Ruby Version Managerの略。コマンドラインツール。
何ができるかというと、Rubyのインストールやアンインストールを行うことができます。
システムのパッケージ管理システム(yumとか)と違う点は、rvmは複数のRubyのバージョンを管理できるということです。
rvmを使用すると、複数のRubyをそのバージョン毎に個々のパスにインストールできます。
そして、それら複数のバージョンの切り替えを簡単に行うことができます。

```
rvm install 1.8.7　　# 1.8.7をインストール
rvm install 2.3.0　　# 2.3.0をインストール

rvm list
# 1.8.7の情報と2.3.0の情報2つが表示される
```
`rvm use xxx`(xxxはバージョン)で使用するRubyのバージョンを切り替えることができます。

rvmを使用するためには、まずrvmをインストールすることが必要です。


###rbenvとは
コマンドラインツール。
rvmと同じように、複数のRubyのバージョンを管理できますし、rbenvを使用する場合はrbenvをまずインストールする必要があります。

しかし、rbenv本体にはRubyのインストール機能はついていません。(rvmはインストール等をrvm単体で行えます)
rbenvはRubyのバージョンの切り替え機能しか提供していません。

rbenvでRubyを簡単にインストールする場合は、ruby-buildが必要になります。
(ruby-buildを入れなくても、自分でソースコードを持ってきてインストールもできます)
rbenv、ruby-buildはともにGitHubからcloneしてくることができます。

rbenvは単機能で、プラグイン等を入れることによって機能を追加することができます(ruby-buildのように)。そのため、rbenv本体はrvmよりも軽量でコンパクトなコマンドラインツールです。



開発を進めていくことを考えると、rvmやrbenvを使用するほうがよさそうですね。


#Rubyにはライブラリがたくさんある
Rubyには多くのライブラリがあります。
そして、それらのライブラリは「gem」という形式で公開されています。
そしてこのgem形式のライブラリを管理するシステムがRubyGemsです。RubyGemsはRuby専用のパッケージ管理システムとなります。
`gem`コマンドを使用することで、gemパッケージのインストールやアンインストール、アップデート等を簡単に行えます。

gemはRuby のバージョン1.9以降、Ruby本体に標準でついてきます。

Rubyのライブラリは、https://rubygems.org/ のサイトで探したり、gemコマンドで探すことができます。

ちなみに、Ruby on Railsや、SQLiteをRailsから利用するために必要なsqlite3パッケージもgem形式のパッケージで、gemコマンドでインストールできます。


#gemの管理

rvmでは、gemsetというものを作って複数のgemをひとまとめにすることができます。
このgemsetを複数作成し、開発するプロジェクトによって使うgemsetを切り替えることができます。

rbenvにはgemsetを作ったり切り替える機能がありません。
ですが、rbenv-gemsetを入れることでgemsetを作成し、gemsetを切り替えることができます。
ECMAScript 2015 のアロー関数で罠に引っかかった件

# 結論

CoffeeScript みたいに this を bind するアロー関数 `=>` と bind しない関数 `->` の2つを用意してくれないと辛いと思った。
まぁ ECMAScript 的な書き方をしていないだけかもしれないけど。。。


## JavaScript のモジュールの作り方

JavaScript で prototype などを使ってモジュールを作る時の書き方の一つとして次のような書き方がある。

```js:main.js
'use strict';
function Obj (value) {
  this._value = value;
}
Obj.prototype.value = function (val) {
  if (val) {
    this._value = val;
    return this;
  } else {
    return this._value;
  }
};
Obj.prototype.setKey = function (key) {
  return { key: key, value: this.value() };
};
module.exports = Obj;
```

これを今回 「ECMAScript2015 ではアロー関数がある！簡潔に書ける！！」とか調子乗って使ったら見事にはまった。

# this.value is not a function

今回の変更は以下の通り。 `xxx = function () {}`の部分をアロー関数に変換した。

```js:main.js
'use strict';
function Obj (value) {
  this._value = value;
}
Obj.prototype.value = (val) => {
  if (val) {
    this._value = val;
    return this;
  } else {
    return this._value;
  }
};
Obj.prototype.setKey = (key) => {
  return { key: key, value: this.value() };
};
module.exports = Obj;
```

そしたら上の `this.value is not a function` を食らうはめに。。。

# 実は this が bind されないことで救われていた JavaScript

一応自分の中での this の理解の確認も兼ねてちょっと丁寧に説明してみる。
もし違ってたらご指摘お願いします :)

もともと js の this は「どこで定義しているか？」ではなく「誰が呼び出しているか？」によって決定する。
例えば 

```js
Obj.prototype.doMethod = function () { return this; }
```
というメソッドがあった時、この時点では this は決定していなくて、

```js
var o = new Obj();
console.log(o.doMethod());
```
といったコードが実行された時に `Obj` オブジェクトのインスタンスが `doMethod` を実行してるから、結果として `Obj` に紐付いているように見える。

しかし、今回のアロー関数を使う事で(内部的にどう変換されているのかはキチンと把握していないですが。。。)以下のようなコードを書いている事と同義になる。

```js
Obj.prototype.doMethod = (function () {
  return this;
}).bind(this);
```
この `bind` メソッドによって関数内部の this が1段上のスコープに存在する this と紐付けられる。

ということで this が Obj ではなく global に紐付けられてもうた。。。

this を bind しないアロー関数がほしいです先生。
PHPUnitのMockクラスで、メソッドを自在にスタブ化する

### 確認環境
- PHP 5.3
- PHPUnit 4.4.2

# returnValueMapを使うべし
### 引数が複数の時
```php
class StubTest extends PHPUnit_Framework_TestCase
{
    public function testReturnValueMapStub()
    {
        $mock = $this->getMockBuilder('SomeClass')
            ->getMock();

        // 値を返すためのマップ
        // 配列の先頭から第一引数、第二、、、として、最後にダミーの返却値
        // この場合は引数が3つ
        $map = array(
            array('a', 'b', 'c', 'd'),
            array('e', 'f', 'g', 'h'),
        );

        $mock
            ->method('doSomething')
            ->will($this->returnValueMap($map));

        // $mock->doSomething() は、渡した引数に応じて異なる値を返します
        $this->assertEquals('d', $stub->doSomething('a', 'b', 'c'));
        $this->assertEquals('h', $stub->doSomething('e', 'f', 'g'));
    }
}
```
[ドキュメント](https://phpunit.de/manual/current/ja/test-doubles.html#test-doubles.stubs.examples.StubTest5.php) のままです。

### 引数が単数の場合
```php
class StubTest extends PHPUnit_Framework_TestCase
{
    public function testReturnValueMapStub()
    {
        $mock = $this->getMockBuilder('SomeClass')
            ->getMock();

        // 値を返すためのマップ
        // 先頭は同じく引数、3つ目の要素がダミーの返却値となる
        $map = array(
            array('a', array(), 'd'),
            array('e', array(), 'h')
        );

        $mock
            ->method('doSomething')
            ->will($this->returnValueMap($map));

        // $mock->doSomething() は、渡した引数に応じて異なる値を返します
        $this->assertEquals('d', $stub->doSomething('a'));
        $this->assertEquals('h', $stub->doSomething('e'));
    }
}
```
第二要素に謎の空配列、、
PHPUnit_Framework_MockObject_Stub_ReturnValueMapクラスのinvokeメソッドで
$invocation->parametersを覗いたら居いました。


バージョン古いからかな。。。
最新版では直ってるといいな。。。
Vus.jsでdeep watchをするふたつの方法

`deep watch`の`オプション`を使った書き方は[ドキュメント](http://jp.vuejs.org/api/#d2974c96dc96b3f30a6168bcc4b25b02)に掲載されているのですが、`$watch`で`deep watch`する方法は載っていないような気がするのでメモ。

## デモ

[jsfiddle](https://jsfiddle.net/akiho/nju2jjmt/2/)


## 解説

`$watch`の引数として`{deep: true}`と書けば、`deep watch`してくれます。

```js:
var app = new Vue({
  el: 'body',
  data: {
    items: [
      { text: 'A'},
      { text: 'B'}
    ]
  },
  watch: {
    'items': {
      handler: function (val, oldVal) {
        console.log('watch 1', 'newval: ', val, '   oldVal:', oldVal)
      },
      deep: true
    }
  }
})

app.$watch('items', function(val ,oldVal){
  console.log('watch 2', 'newval: ', val, '   oldVal:', oldVal)
}, {deep: true})
```


## 使い道

`$watch`で書くとスマートじゃないような気もしますが、メインプログラムとは全く違うところでささっと書きたいときに使えます。

## 動作はしますが、これが正しい書き方かは不明

なので、注意して使うようにします。
[Swift]LINE共有を直接呼び出す(...?)

#SNOW using private APIs?
https://itunes.apple.com/jp/app/suno-snow-zi-cuori-yan-ren/id1022267439?mt=8

SNOWというNaverの作っている自撮り共有アプリが投稿画面でUIActivityControllerを介さずにLINE共有やFacebook共有を呼んでいた。
ShareExtensionを直接呼ぶ方法は無いし（調べた限り）private APIでも使ってるんかな…？
使ってないとすれば…と思いついたのが以下の方法

#悔しいので無理やり呼んだ

まずはコードから

```swift

extension UIView {
  func searchSubViews<T: UIView>(type: T.Type, findClosure: ((findObject:T) -> Void)) {
    subviews.forEach({
      if let v = $0 as? T {
        findClosure(findObject: v)
      }else{
        $0.searchSubViews(type, findClosure: findClosure)
      }
    })
  }
}

extension UIViewController {
  func presentDirectActivityViewController(viewControllerToPresent: UIActivityViewController, serviceName: String){
    var find = false
    viewControllerToPresent.view.hidden = true
    presentViewController(viewControllerToPresent, animated: false) { () -> Void in
      viewControllerToPresent.view.searchSubViews(UICollectionView.self) { (collectionView) -> Void in
        let indexPathes = collectionView.indexPathesOfCollectionView()
        indexPathes.forEach({
          guard let cell = collectionView.cellForItemAtIndexPath($0) else {return}
          cell.searchSubViews(UICollectionView.self, findClosure: { (collectionViewOnCell) -> Void in
            let indexPathesOnCell = collectionViewOnCell.indexPathesOfCollectionView()
            indexPathesOnCell.forEach({
              let indexPath = $0
              guard let cell = collectionViewOnCell.cellForItemAtIndexPath(indexPath) else {return}
              cell.searchSubViews(UILabel.self, findClosure: { (label) -> Void in
                if label.text == serviceName && !find {
                  find = true
                  collectionViewOnCell.delegate?.collectionView?(collectionView, didSelectItemAtIndexPath: indexPath)
                }
              })
            })
          })
        })
      }
    }
  }
}

extension UICollectionView {
  func indexPathesOfCollectionView() -> [NSIndexPath] {
    var indexPathes = [NSIndexPath]()
    let sectionCount = numberOfSections()
    for i in 0...sectionCount {
      guard let cellCount = dataSource?.collectionView(self, numberOfItemsInSection: i) else {continue}
      for j in 0...cellCount {
        indexPathes.append(NSIndexPath(forRow: j, inSection: i))
      }
    }
    return indexPathes
  }
}


```

performもvalueForKey("_hoge")も使わない綺麗（？）なコードです…。インテントがすごいです。

やっていることはUIActivityControllerのviewのsubViewを探しまくって指定した文字列のついたUILabelの貼られているUICollectionViewCellを探し、それをコードから押しています。

#上手くいってないところ

##その１
SNOWはShareExtensionを無効化しても表示されるが、この方法だと押すには一度右端のMoreをコードから押した後有効化させる必要がありそれが出来ても無効化する術がない。

##その２
一瞬画面が暗くなる。これはUIAcitivtyControllerが表示される際に背景が暗くなるためで、アニメーションさせずに表示しても消せない。SNOWはこの一瞬のディムが無い。

#結論
private APIを使ってなければ全く同じ見た目のシェア画面を出して認証無しで裏からLINEの友達情報吸い取ってるんかなぁ…。
（Naverなので出来なくも無さそうだけど）
同様にFacebookのシェア画面(ActivityControllerの方)も出せるので違う気もするけど。

というか実はShareExtension直接呼べたりして…
Salesforceの開発者コンソールをカスタマイズする。

この度、Salesforce開発者コンソールのカスタマイズ用Chrome拡張「[ぼく専用コンソール](https://chrome.google.com/webstore/detail/%E3%81%BC%E3%81%8F%E5%B0%82%E7%94%A8%E3%82%B3%E3%83%B3%E3%82%BD%E3%83%BC%E3%83%AB/fjclfilbglicpgmjoegdjmdcjnjmiblf?hl=ja)」をリリースしました。
こんな感じにエディタのカスタマイズして遊べちゃいます。
そして、ちゃんと保存できます！**←これ重要**

![スクリーンショット 2016-02-01 20.47.45.png](https://qiita-image-store.s3.amazonaws.com/0/26378/70f3ab7f-b146-80e1-37d8-db5130c91451.png)
ホロかわいいよ、ホｒ


##設定画面
設定画面は至ってシンプル。背景画像はお好きなリンクから！
<img width="400" alt="スクリーンショット 2016-02-01 21.10.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/26378/bfa12ef9-1a70-1f68-063e-a5e9b4d7c349.png">

フォントはしっかりOS上のフォントを選べるようにしました。
<img width="400" alt="スクリーンショット 2016-02-01 21.10.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/26378/8f8f512b-c0bc-110c-aae1-d9c3c3b8fe44.png">

フォントサイズは無意味に60という遊び心を入れておきました。
<img width="399" alt="スクリーンショット 2016-02-01 21.11.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/26378/3c769d1c-a5b8-1f8b-e8ec-424b4c4473f1.png">

てな訳で、Happy Coding on Cloud!



##おまけ 〜なぜ標準の開発者コンソールは設定を保存できないのか〜
※別に解決してないです。

通常、`help > preferences > Editor Font Size`からフォントサイズを設定し`save`を押すと設定が保存され、次回起動時にも設定が引き継がれるものと思いますよね。
ところがSalesforceの開発者コンソールは、見事に設定がリセットされています。

実は内部的にはちゃんと設定保存のリクエストが飛んでいるのですが、何故か404で弾かれています。
<img width="1168" alt="スクリーンショット 2016-02-01 21.01.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/26378/55f2e852-206e-e86b-f45c-98377378880d.png">
なんの罠だよ・・・とSalesforce新参の私は思ってしまうのでした。
markdownで書いたメモをページに直接挿入して保存できるchrome extension「Sashikomi」を作って公開しました



[Sashikomi - chromeウェブストア](https://chrome.google.com/webstore/detail/sashikomi/kejdpmdbegmdibeepbdbcnknkfbfooho)

![20160201202055.png](https://qiita-image-store.s3.amazonaws.com/0/34837/0dadc336-6667-7a07-9069-5ddfca972605.png "20160201202055.png")



これはなに？
==============

markdownで書いたメモを直接ページに挿入できるChromeExtensionです。タイトル通りです。


使い方
======

ストアのScreenshotに載せてあります。

使用上の注意
-------------

* バックグラウンドページのindexedDBにのみデータが保存されるためchrome上からextensionを削除するとデータはすべて消えます。
* chromeのindexedDB容量の上限に達するとデータが消えることがあります。
* Twitterのようなどんどん更新されるようなサイトやAutoPatchWorkのようなextensionで読み込まれたページではDOMを追えないので挿入エラーが発生します。
* ページのDOMに直接挿入するため、Styleの崩れが発生することがあります。



動機
==============


ライブラリやフレームワークなど、ブログやQiitaなどで得た断片的な情報だけじゃなく、英語でも公式ドキュメントをちゃんと読もうとする気概が自分の中で高まっていて、その補助ツールとしてSashikomiを作りました。

お世話になるライブラリのドキュメントはだいたいが英語で書かれていて、開発中や後で直したいときなど、ドキュメントを読み返す度に英語読解イベントが発生して、結構ストレスに感じていたので、ドキュメントの中に簡単な翻訳を残したいと思っていました。

Kobitoとかにメモを書き溜めていたんだけど、断片的で浅い内容で結局ドキュメント読むことになったり、有用な情報を残そうと思うとまとめるのに結構時間が持っていかれたり、増えてくると管理が大変だったりで、いまいち書いたものを有効活用できていませんでした。

私がお世話になるようなライブラリはだいたいが有名なものでドキュメントもきれいに整理されているので、その中にメモを残せば、情報を外でまとめたり、いちいち探したり、管理する必要がないのではと考えています。


使った主なライブラリとか
====================

React.js
--------

今までVue.jsを触りつつ横目でReact.jsを追っていて、ちょうどいい機会なのでReactを採用しました。

Vue.jsと比較すると、どちらもコンポーネント志向なフレームワークなので考え方はだいたい似ていて、（単純なコンポーネントを作っただけなので、）そこまでReact.jsに対してハマりどころはありませんでした。ディレクティブでDOMを制御するVue.jsよりもReact.js(JSX)のほうが直感的に書けるかなくらいの印象です。


Dexie.js
---------

[Dexie.js - Minimalistic IndexedDB Wrapper](http://dexie.org/)

indexedDBのラッパーライブラリ。APIを叩くとPromiseを返してくれます。

chrome extensionの場合、chrome storageもあるが、最近読んだパーフェクトJavaScriptでindexedDBを知って気になっていたので使ってみました。

Vue.jsやReact.jsを使うとDOMとデータがきれいに分離できて、データを単純なオブジェクトとして管理できるので、コロコロ変わる状態の管理は厳しいけど、データストアとしてindexedDBあたりのクライアントサイドストレージと相性は悪く無いのではと考えているんだけど、いまいち盛り上がっていない印象。


Feedbackをお待ちしております
============================

書いたコードはここに置いてあります。
[cotto89/Sashikomi - github](https://github.com/cotto89/Sashikomi)

初めてgithubでコードを他人の目に見える場所に公開してみたんだけど、そもそもgitの使い方や運用方法がわかっていなくて、コミットログもブランチも結構いい加減で、buildしたコードも平気混ざっていたり、テストがなかったりとても残念な状態です。

コードを公開した目的は、Sashikomiは直接DOMに挿入するextensionなためStyleが崩れることがあります。またそもそものstyleがイケてないとかJSの挙動がおかしいとか、もっとこうしたいとかあるかと思うので、公開して自由にいじれるようにしました。


もちろん、バグやstyleのあからさまな崩れにはできるだけ対応したいと思っています。その他、extensionの使い勝手等、TwitterやGithub, extension pageで遠慮無く言って頂けると幸いです。
[cotto(@cottto89) | Twitter](https://twitter.com/cottto89)
WindowsにIntelliJ IDEAでgoの開発環境を作りましたよ　ついでにgit連携もいたしましたよ

MacとWinの両刀使いなのでWinにもgoの開発環境を作りました。
ドラクエ１０をしながらgoのコードが書け、とてもよいです。

# IntelliJ IDEA をインストール

https://www.jetbrains.com/idea/download/

ダウンロードしたものをそのまま指示にしたがってインストールです。

# Go SDK をインストール

https://golang.org/dl/
Windows用を落とします（執筆時 v1.5.3）
指示にしたがってインストール。

# 環境変数を設定
```
コントロール パネル\システムとセキュリティ\システム\システムの詳細設定
```
より
![image](https://qiita-image-store.s3.amazonaws.com/0/48695/b50d3166-2ea0-a56a-5db3-ed1d5afa0110.png)

「環境変数」から

```
変数名：GOPATH
変数値：C:\Users\XXXX\Documents\gopathなど（どっか適当なフォルダ作って、そこを指定）

変数名：GOROOT
変数値：C:\Go

変数名：Path
変数値：（既存のものの末尾につけたしで）;C:\Go\bin
```
を設定する。

# IntelliJ IDEAの設定

IDEAを起動して Setting->Plugin より　「Browse repositories」を選択
![image](https://qiita-image-store.s3.amazonaws.com/0/48695/0c568c8e-c2db-3bf5-449c-ff3f70d9baf4.png)

「Manage repositories」から

```
https://plugins.jetbrains.com/plugins/alpha/list
```
を追加


![image](https://qiita-image-store.s3.amazonaws.com/0/48695/a32cbd42-d561-85fc-e182-81ef18be9db6.png)

Repository を追加したもののみにすると、Go が出てくるので 「Install」を選択する

# Gitの設定

https://git-for-windows.github.io/
よりGit for windowsをインストール

再びIDEAにもどり、

Settings->Version Control->Gitより

![image](https://qiita-image-store.s3.amazonaws.com/0/48695/e1a50904-48d4-078b-5f8c-9634ec8503a6.png)

インストールしたGit.exeを指定してやる


# 終わり

- あとは好きな様にプロジェクトを作って実行してみましょう！！！！
【PHP】処理速度の計測


```php
$time_start = microtime(true);
 
// ここに測定したいPHPの処理を記述
 
$time = microtime(true) - $time_start;
echo $time . " seconds\r\n";
```

参考
[PHPで処理実行速度を計測する方法](http://piji.daiwa-hotcom.com/wordpress/?p=294)


ぐぐると計測するためのライブラリなど出てくるが、上記が手間がかからないのでいいかなと。上記で問題なことなどあれば教えてほしい。
Google Drive API v3 を使ってみた


Google Drive REST API が version3 にアップグレードされていたので、使用してみた。

## v2 から変わった点

### fields

- 開発者側から見て一番大きいのが、v2 だと取れうる情報を全部返してくれてたのが、v3 だと必要最低限の情報しかデフォルトでは返してくれなくなった点
- Google Drive のメタ情報が膨れた結果、これは全部の情報を返してしまったのではレスポンスが大きくなりすぎちゃったということなんだろう
- では、その他の情報はどう取得するのかというと、リクエストの中でこの情報を欲しいと指定するようにする
- `fields`というリクエストパラメータが追加されていて、これに以下のような感じで返してほしいレスポンスパラメータ名を指定する
   - パラメータは階層構造になっているので、それは`()`を使って表現する

`fields=files(iconLink,id,kind,mimeType,name,viewedByMeTime,webContentLink,webViewLink),nextPageToken`

### パラメータ名変更

- 俺の使った範囲でもいくつかのパラメータの名前が変わったり、なくなったりしている
- ただ、代わりのものがあるので、これは置き換えていくだけで済むから影響は小さい

### その他

- 他にもあるみたいだけど、詳しくは下記の Official ガイドをみて欲しい

## 参考

Drive REST API v3 Reference
<https://developers.google.com/drive/v3/reference/>

Migrate from v2
<https://developers.google.com/drive/v3/web/migration>

Google APIs Explorer
<https://developers.google.com/apis-explorer/#s/>

## 所感

- 俺の場合はもともと使っていた範囲が狭かったので、移行は大した手間じゃなかった
- けど、がっつり使ってた人にとっては、まぁまぁ大変かもしれないなと思う

## Google Drive API TIPS

ついでなので、API使う上でのTIPSも。

### ページング

- Webアプリで言うところのページングと同じで、API経由でも List 系のメソッドに対しては、アイテム数が多い場合、1回のリクエストに対しては部分部分しか返さないようになっている
- offset と limit を指定するようになっているインタフェースはよく見るけど、Drive API はちょっと違う
- 1回で全てを返せなかった場合、レスポンスパラメータに `nextPageToken` というのが含まれていて、この値を次のリクエストの `pageToken` パラメータとして指定することで続きが取れるようになっている
- `nextPageToken` が含まれていなかったらそれで全部取れたということになる
- この仕組みは v2 でも v3 でも変わってません
- なので、一度に全部取るには、次のようにすればいいです

```JavaScript
function listAllFiles(reqParams, callback) {
  var retrievePageOfFiles = function(request, result) {
    request.execute(function(resp) {
      result = result.concat(resp.files);
      var nextPageToken = resp.nextPageToken;
      if (nextPageToken) {
      	// sum up all items if response has multi-pages.
      	var nextParams = reqParams;
      	nextParams.pageToken = nextPageToken;
        request = gapi.client.drive.files.list(nextParams);
        retrievePageOfFiles(request, result);
      } else {
      	// at last, callback would be called.
        callback(result);
      }
    });
  }
  // initial request.
  var initialRequest = gapi.client.drive.files.list(reqParams);
  retrievePageOfFiles(initialRequest, []);
}
```

### Try it!

- 上述した [Reference](https://developers.google.com/drive/v3/reference/) のページには、各メソッド詳細ページの一番最後に "Try it!" という項目があって、ブラウザ上で実際の自分のアカウントを用いて、簡単にAPIのテストができるようになっています！便利！
- なお、何度も呼び出してテストしたい場合は、[Advanced REST Client](https://chrome.google.com/webstore/detail/advanced-rest-client/hgmloofddffdnphfgcellkdfbfbjeloo?utm_source=chrome-ntp-icon) というChrome拡張が便利で、よく使っています
   - 他でも使えるし


## 最後に

このAPIを使ったChrome拡張を以下のURLで公開してます。
<https://chrome.google.com/webstore/detail/quick-drive/aijfbconiilhjgfljolkoiaockgenpgn?utm_source=chrome-ntp-icon>

ソースコードはこちら
<https://github.com/tearoom6/QuickDrive>
NSUserDefaultsでデータを保存する

##はじめに##
ゲーム製作の中でスコアのランキングをInt型の配列で作ったのですが、そのままではアプリを終了すると（当然ですが）消えてしまいます。再度アプリを立ち上げた時、前回のスコアの記録が保持されている仕様にしたく、例によってネットで色々と調べまわり、`NSUserDefaults`を使ってデータを保存するという方法をとりました。また、その中で参考サイトのサンプルプログラム通りにプログラムしてもうまくいかなかった部分（特に下記手順4）は、エラーが出ず、期待した振る舞いをしてくれるところまでなんとか手探りで修正しました。

もっと良い書き方をご存知でしたら、是非教えて頂きたいです。

##環境##
*Swift 2*
*Xcode 7.2*

##手順##

1.保存するデータをつくる。

```
var scores = [0,0,0,0,0,0]
```

　※今回はInt型、6要素の配列としました。

2.利用するクラスの中で`NSUserDefaults`のインスタンスをつくる。

```
let ud = NSUserDefaults.standardUserDefaults()
```

3.データを書き込みたい場所に以下のコードを書く。

```
ud.setObject(scores, forKey: "scoresKey")
ud.synchronize()
```


4.データを読み込みたい場所に以下のコードを書く。

```
if　ud.objectForKey("scoresKey") != nil {
    scores = ud.objectForKey("scoresKey") as! [Int]
}
```

5.保存されたデータを削除したい場所に以下のコードを書く。

```
ud.removeObjectForKey("scoresKey")
```

##参考サイト##
[NSUserDefaultを利用した中年データ永続保存 - Swiftサラリーマン](http://swift-salaryman.com/nsuserdefaults.php)

[[Swift]【NSUserDefaultsの基本的な使い方】表示、格納、削除。](http://qiita.com/mochizukikotaro/items/9098cd3c091787f9aacb)

いつもありがとうございます。
[Swift]subView探索

UISearchBarとかで見た目変更したくてsubView探索するときに便利なメソッドを書いた。

```swift
extension UIView {
  func searchSubViews<T: UIView>(type: T.Type, findClosure: ((findObject:T) -> Void)) {
    subviews.forEach({
      if let v = $0 as? T {
        findClosure(findObject: v)
      }else{
        $0.searchSubViews(type, findClosure: findClosure)
      }
    })
  }
}
```

見つけたいクラスを指定すると、findClosureが見つけ次第呼ばれる。


2016/2/29追記

画面上から探す場合

```
extension UIApplication {
  func searchView<T: UIView>(type: T.Type, findClosure: ((findObject:T) -> Void)) {
    windows.forEach{
      $0.subviews.forEach{v in v.searchSubViews(type, findClosure: findClosure)}
    }
  }
}
```
yumコマンド一覧


#インストール

```
yum install mysql
```

スペース区切りで複数可能。

```
yum install mysql mysql-devel mysql-server mysql-utilities
```

ワイルドカード使える。

```
yum install mysql*
```

#アップデート

```
yum update mysql
```

スペース区切りで複数可能。

```
yum update mysql mysql-devel mysql-server mysql-utilities
```

ワイルドカード使える。

```
yum update mysql*
```

#削除
※ちなみにremoveとeraseはどちらも同じ。

```
yum remove mysql
```

スペース区切りで複数可能。

```
yum remove mysql mysql-devel mysql-server mysql-utilities
```

ワイルドカード使える。

```
yum remove mysql*
```

#インストール済み/利用可能一覧

```
yum list [all | installed | available] パッケージ名
```

インストール済みと利用可能の両方表示

```
yum list mysql*

読み込んだプラグイン:

インストール済みパッケージ
 ※ここにインストール済みのパッケージが表示される。

利用可能なパッケージ
 ※ここに利用可能なパッケージが表示される。

```

インストール済みのパッケージのみ表示

```
yum list installed mysql*

読み込んだプラグイン:

インストール済みパッケージ
 ※ここにインストール済みのパッケージが表示される。

```

#パッケージの検索

「yum list | grep mysql」に比べて、概要も表示してくれるので便利。

```
yum search mysql
```

#パッケージの詳細情報を表示

似たパッケージがある場合、詳細を確認。

```
yum info mysql
```

#重要な実行の前に確認をしない
-yオプションをつける。

```
yum install -y mysqld
```

#一時的に特定のリポジトリを有効にする
mysqlやphpなどはyumのデフォルトのリポジトリでは古いのでremiなど別のリポジトリからインストールする。その際使う。

設定ファイルを編集すること無く有効にすることができる。設定ファイルでいうenabled=1を指定したのと同じです。

remiリポジトリを有効にしてphpをインストールする。

```
yum --enablerepo=remi install php
```

複数指定する場合は「,（カンマ）」で区切る。

```
yum --enablerepo=remi,ius install php
```

参考
[yumの設定から便利な使い方まで徹底的に解説](http://oxynotes.com/?p=6777)
[初心者の頃に知っておきたかった rpm と yum の違いと使い分け](http://blog.inouetakuya.info/entry/20111006/1317900802)
Mac OS に Fiddler を Homebrew で簡単インストールする

Fiddler を日本語で使うには、オープンソースの .NET Framework をインストールして実行する方法があります。

いろいろ操作説明があるんですが、その手順を簡略化してくれている Homebrew の cask があるようなので、それを紹介。

Homebrew をインストールしているならば、こっちが手軽で簡単です。

[こちらの記事の翻訳です](http://macappstore.org/fiddler/)

1. ターミナルを起動する
2. 次のコマンドを実行する `ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" < /dev/null 2> /dev/null ; brew install caskroom/cask/brew-cask 2> /dev/null`

3. そして次のコマンドを実行する `brew cask install fiddler`


以上
Cocoaの機能を使ってHTML文字列をコピーするAppleScriptハンドラ



* HTML文字列をクリップボードにコピー
* リッチテキストエディタにはスタイル付きでペーストできる



```AppleScript:copyHTML.scpt
use scripting additions
use framework "AppKit"
use framework "Foundation"

my copyHTML("<p>あいうえお</p>")

the clipboard as record
(*
{«class HTML»:«data HTML3C703EE38182E38184E38186E38188E3818A3C2F703E», «class utf8»:"あいうえお
", «class RTF »:«data RTF 7B5C727466315C616E73695C616E73696370673933325C636F636F61727466313430345C636F636F617375627274663437300A7B5C666F6E7474626C5C66305C66726F6D616E5C6663686172736574302054696D65732D526F6D616E3B7D0A7B5C636F6C6F7274626C3B5C7265643235355C677265656E3235355C626C75653235353B5C726564305C677265656E305C626C7565303B7D0A5C6465667461623732300A5C706172645C7061726465667461623732305C736C3238305C73613234305C7061727469676874656E666163746F72300A0A5C66305C66733234205C636632205C6578706E64305C6578706E647477305C6B65726E696E67300A5C6F75746C305C7374726F6B65776964746830205C7374726F6B656332205C7563305C753132333534205C753132333536205C753132333538205C753132333630205C753132333632205C0A7D», «class ut16»:"あいうえお
", uniform styles:«data ustl0200000090000000000000001400000020000000010000000600000000000000010000006C000000040000000000000000000000020100000100000000000000050100002C000000646D616E2400000001000000040000000100000000000000000000000B00000054696D657320526F6D616E00060100000400000000000C0007010000060000000000000000000000», string:"あいうえお
", scrap styles:«data styl02000000000012000D00A1E900950C000000000000000A0000000E001100140000950C00000000000000», Unicode text:"あいうえお
"}
*)

on copyHTML(HTML)
	--require framework: AppKit, Foundation
	set pasteboard to current application's NSPasteboard's generalPasteboard()
	pasteboard's clearContents()
	pasteboard's declareTypes:{current application's NSPasteboardTypeHTML, current application's NSPasteboardTypeString, current application's NSPasteboardTypeRTF} owner:me
	pasteboard's setString:HTML forType:(current application's NSPasteboardTypeHTML)
	set attributedString to my attributedStringOfHTMLText(HTML)
	pasteboard's setString:(attributedString's |string|()) forType:(current application's NSPasteboardTypeString)
	set attributes to current application's NSDictionary's dictionaryWithObject:(current application's NSHTMLTextDocumentType) forKey:(current application's NSDocumentTypeDocumentAttribute)
	set HTMLData to attributedString's RTFFromRange:{location:0, |length|:attributedString's |length|()} documentAttributes:attributes
	pasteboard's setData:HTMLData forType:(current application's NSPasteboardTypeRTF)
end copyHTML

on attributedStringOfHTMLText(HTML as text)
	--require framework: AppKit, Foundation
	set HTMLString to current application's NSString's stringWithString:HTML
	set HTMLData to HTMLString's dataUsingEncoding:(current application's NSUnicodeStringEncoding)
	return current application's NSAttributedString's alloc()'s initWithHTML:HTMLData documentAttributes:(missing value)
end attributedStringOfHTMLText
```


## 更新履歴

* 2016-02-01: AppKitフレームワークのNSAttributedStringクラスとNSPasteboardクラスを使って作成
* 2016-09-24: `declareTypes:owner:`メソッドを使ってHTML、String、RTFの3種類でコピー
restキーワード引数に文字列キーのHashを含めるとArgumentErrorになる

Ruby2.0以上で使えるキーワード引数で、マッチしないキーワード引数を`**`をつけた引数で引き取れるという仕様があるのですが、キーが文字列の場合`ArgumentError`が発生します。キーワード引数の性質からして当たり前といえば当たり前のような気もしますがちょっとハマりました。

### Rubyのバージョン
```
% ruby -v
ruby 2.2.3p173 (2015-08-18 revision 51636) [x86_64-darwin14]
```

### 例
```rb
def test(**rest)
  p rest
end

# OK
test(a:1, :b=>2)
=> {:a=>1, :b=>2}

# NG
test(a:1, 'b'=>2)
ArgumentError: wrong number of arguments (1 for 0)
	from (irb):38:in test
	from (irb):64
	from /Users/kamatama41/.rbenv/versions/2.2.3/bin/irb:11:in <main>

# OK
test({a:1, 'b':2})
=> {:a=>1, :b=>2}

# NG
test({a:1, 'b'=>2})
ArgumentError: wrong number of arguments (1 for 0)
	from (irb):38:in test
	from (irb):72
	from /Users/kamatama41/.rbenv/versions/2.2.3/bin/irb:11:in <main>


```
Android StudioでNDKを使ったビルドをする

なかなかAndroid StudioがNDKサポートを追加しないので、gradleの仕組みを使ってとりあえずNDK対応してみる。
参考にしたのは[Oculus Mobile SDK](https://developer.oculus.com/downloads/)のソース。

## やり方

アプリのbuild.gradleに、次のコードを追加する。一番下とかで良いです。

```groovy
// ANDROID_NDK_HOME
// ANDROID_NDK
// NDKROOT
// local.properties の ndk.dir
// の順にNDKのパスを検索して、ndk-buildのフルパスを取得する
def GetNDKBuildCmd() {

    def ndkDir = System.getenv('ANDROID_NDK_HOME')
    if (ndkDir == null) {
        ndkDir = System.getenv('ANDROID_NDK')
    }
    if (ndkDir == null) {
        ndkDir = System.getenv('NDKROOT')
    }
    if (ndkDir == null) {
        Properties properties = new Properties()
        properties.load(project.rootProject.file('local.properties').newDataInputStream())
        ndkDir = properties.getProperty('ndk.dir')
    }
    if (ndkDir == null) {
        throw new GradleException('NDK not found! Check your environment for ANDROID_NDK or your local.properties contains ndk.dir')
    }
    if (OperatingSystem.current().isWindows()) {
        return ndkDir + '/ndk-build.cmd'
    } else {
        return ndkDir + '/ndk-build'
    }
}

project.afterEvaluate {
    compileDebugNdk.dependsOn 'NDKBuildDebug'
    compileReleaseNdk.dependsOn 'NDKBuildRelease'
    clean.dependsOn 'NDKBuildClean'
}

task NDKBuildDebug(type: Exec) {
    commandLine GetNDKBuildCmd(), 'V=0', '-j10', 'NDK_DEBUG=1', 'OVR_DEBUG=1', "NDK_PROJECT_PATH=$projectDir/src/main"
}

task NDKBuildRelease(type: Exec) {
    commandLine GetNDKBuildCmd(), 'V=0', '-j10', 'NDK_DEBUG=0', 'OVR_DEBUG=0', "NDK_PROJECT_PATH=$projectDir/src/main"
}

task NDKBuildClean(type: Exec) {
    commandLine GetNDKBuildCmd(), 'clean', "NDK_PROJECT_PATH=$projectDir/src/main"
}
```

そして、android -> sourceSets -> main のブロック内にjniライブラリの設定を追加する。

```groovy
android {
    ...

    sourceSets {
        main {
            jniLibs.srcDir 'src/main/libs'
            jni.srcDirs = [] // レガシー ndk-build サポートを無効にする
        }
    }
}
```

これで、Android Studioのビルドを走らせた時に ndk-build が呼ばれ、APKに含まれるようになります。
Vue.jsのリストレンダリングとhtml5のドラッグ＆ドロップの実装

```:注意事項
この記事は vue.js v1.x でのみ動作確認済みです。 
v2.x では orderBy など動作しない記述がございますので、ご注意ください。
```
公式サイトではmousedownやtouchstartなどのイベントをトリガーに実装したサンプルがあります。これをうまく使えばドラッグ＆ドロップの実装もできそうですが、今回はhtml5のdraggableを使用してみました。

```html:公式サイトより
@mousedown="startDrag"
@touchstart="startDrag"
@mousemove="onDrag"
@touchmove="onDrag"
@mouseup="stopDrag"
@touchend="stopDrag"
@mouseleave="stopDrag"
```

## デモと実際のコードはこちら

[DnD Vue.js(codepen)](http://codepen.io/akiho/full/LGraWZ/)

## 解説

HTML5から``draggable="true"``とすることで、ドラッグ可能な要素にすることができます。

こちらの記事を参考に勉強しました。
[ネイティブ HTML5 ドラッグ＆ドロップ](http://www.html5rocks.com/ja/tutorials/dnd/basics/)

```html:html
<ul class="dropArea">
  <li class="draggable" v-for="item in items | orderBy 'index'"
      draggable="true"
      @dragstart="dragstart(item, $event)"
      @dragend="dragend"
      @dragenter="dragenter(item)"
      >{{item.text}}</li>
</ul>
```

cssはお好みで適当に。

```css:css
.dropArea {
  padding: 0;
  margin: 0;
}
.dropArea .draggable {
  list-style: none;
  margin: 10px;
  padding: 0;
  width: 100px;
  height: 40px;
  background-color: #3498db;
}
```

ドラッグした要素を記憶しておき、``dragenter``をトリガーに、``items``の``index``を入れ替えます。``index``を``key``として、表示はhtmlのほうで``v-for="item in items | orderBy 'index'"``という形で自動ソートさせています。

```js:javascript
var app = new Vue({
  el: 'body',
  data: {
     draggingItem: undefined,
     items: [{
       text: "A",
       index: 0
     },{
       text: "B",
       index: 1
     },{
       text: "C",
       index: 3
     },{
       text: "D",
       index: 2
     }]
  },
  
  methods: {
    dragstart (item,e) {
      this.draggingItem = item
      e.target.style.opacity = 0.5;
    },
    dragend (e) {
      e.target.style.opacity = 1;
    },
    dragenter (item) {
      const tempIndex = item.index;
      item.index = this.draggingItem.index
      this.draggingItem.index = tempIndex
    }
  }
})
```

入れ替え動作に対して、アニメーションを実装しようと思ったのですが、``position: absolute``や``fixed``を使用した形でしか思いつかなかったので、やめました。

## Vue.jsでバインディング可能なイベント一覧です。

```js:バインディング可能なユーザーからのイベント（一部）
@click
@submit
@keyup
@mousedown
@mousemove
@mouseup
@mouseleave
@touchstart
@touchmove
@touchend
@dragstart
@dragenter
@dragleave
@dragover
@dragend
```

これって、[公式サイト(events)](http://vuejs.org/guide/events.html)に整理された情報がないのですが、[DOMのイベント(MDN参照)](https://developer.mozilla.org/ja/docs/Web/API/Event)が色々と使えるという認識であっていますでしょうか？お詳しい方いらっしゃれば是非コメントお願いします！

## 以上です。
配列のデータは簡単に追加や削除の機能を実装することもできるので、用途に応じて拡張が可能かと思います。他にも「Vue.jsとドラッグ＆ドロップ」をテーマにした似た形のコードがありましたが、Vue.jsのバージョンが古かったり、やっぱり自分で書いてみたかったりしたので。

## 今回のタイトルとは関係ありませんが、Vue.jsの勉強情報
Vue.jsもReactのようにソースが溢れていれば良いのになと日々感じておりますが、個人的には[VueStrap](https://github.com/yuche/vue-strap)のコードの書き方が最近では、一番勉強になりました。これをBootstrapのように使えるかというと、正直物足りなさすぎますが、コードが気軽に読めるのでありがたかったです。
c++ builder > 考察 > 50 x 3個のコンポーネントを持つデザインの変更対応 > (x)コンポーネントのコピー / (o)デザインのコピー

```txt:動作確認
C++ Builder XE4
```

## 問題

50 x 3個のTComboBoxを持つフォームがあるとする。

そのフォームのデザインは今後変更される可能性がある場合、どのようにすれば今後作業が短時間で対応できるか。

## 方法

### 1. 変更要求が出るたびに一つずつデザインを変更する
  - 欠点: デザイン変更時に毎回時間がかかる

### 2. テンプレートとなるコンポーネントを作って、そのコンポーネントを動的にコピーする

  - テンプレート例 > 5個のTComboBox
  - フォームデザイン時 : 5個のTComboBoxだけある
  - 全部で50 x 3個使う、とする
  - フォーム起動時に、5個を(10*3 - 1)回コピー
  - コピーするためのロジックを実装しておく
  - 欠点: ロジックを実装するのに時間がかかる
  - 利点: 一度ロジックを実装しておけば、次回以降はテンプレートだけのデザインを変更で済み、短時間作業となる

従来は項目1で対応していたのを項目2とした。

項目2の問題は、動的コピーした場合に動的に生成されたコンポーネントの名前が自動生成され、自分が使うソフト用に名前をつけなおす処理が必要。

この点がひっかかっていた。

ふと、3つ目の方法を思いついた。

### 3. デザインのコピー > デザインテンプレートとなるコンポーネントを作って、そのコンポーネントのデザインだけを既存のコンポーネントへコピーする

- フォームデザイン時 : 5個のデザインテンプレート用TComboBoxがあり、また145個のTComboBoxがある

- 縦一列のコンポーネント
  - Leftプロパティをコピー
  - Widthプロパティをコピー
- 横一列のコンポーネント
  - Topプロパティをコピー
  - ~~Heightプロパティをコピー~~ (TComboBoxはHeight変更しても無効)

## 実装例

フォームデザイン画面
左上の一つがデザインテンプレートのコンポーネント。

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/f686b1c0-6e39-b3f8-95d0-c38643e60466.png)

整列後

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/77ede279-1fe2-6234-d235-03b40c65aeb8.png)

注意点としては、フォームデザインと実行時の表示が乖離しすぎると、ソフト開発者（自分も含めて）にわかりにくいので、微調整をする程度での使い方がいいのかもしれない。

<hr>
## 2016/02/02追記

上記の程度の変更であれば、Ctrlを押しながらコンポーネントを複数選択して、Left, widthなどをまとめて変える方が簡単な気がしてきた。
Scala.jsの単体テストでURLへアクセスする

[Scala.js](http://www.scala-js.org/)メモ2つ目

# 環境
|ソフトウェア|バージョン|
|:---|:---|
|Scala|2.11.7|
|Scala.js|0.6.6|

# まとめ
* Scala.jsの単体テストでは，URLにアクセスができない
* `Phantom.js`のコマンドライン引数の変更でアクセスできるようになる

# やりたいこと
テストデータとして，外部のURL(localhostを含め)を使いたい．例えば，対応するWebサービスのサーバへアクセスしてデータを取ってきたりとか，．
しかし，単体テストでの外部URLアクセスはデフォルトで不可能となっている．

例えば，`http://localhost:631`(LinuxだとCUPSのクライアントがよく動いている)にjQueryを用いてリクエストを以下のように飛ばすと，いつまでもcallback関数が呼ばれない．

```scala
jQuery.get("http://localhost:631", null, (e: dom.Event) => {
  println("called!")
})
```

# やったこと
参考にしたページURLをメモし忘れてしまったが，Stack Overflowだったかどこかのページによると，クロスドメインの類の問題らしい．なので，

```scala
scalaJSUseRhino in Global := false
jsEnv in Test := PhantomJSEnv(args = Seq("--web-security=no")).value
```

と`build.sbt`に追記して，単体テストで`Phantom.js`を利用し，さらにクロスドメインアクセスを許可すると`called!`と表示されるようになる．

# おわりに
明らかにいい方法ではないので，もっといい方法があれば教えて下さい．そもそも，Scala.jsの単体テストはURLにアクセスするべきではなく，他に方法がある，とかも含めて教えて頂けたら嬉しいです．
２つのウインドウを一発で最前面にする

素人の備忘録。
適当にやったら動いただけなのできっとどこか間違いがある。
というか車輪の再発明感半端ない。

(2016/9/6追記)
Windows10やMacなら素直に仮想デスクトップを使おう。

# 動機
画面左のエディタでLaTeXを書いて、右のpdfビューアで見るといった具合に、左右にウインドウ２つ並べて作業することが多い。
そのままブラウザで調べたりもする。
ところがエディタを最前面に戻してもビューアはブラウザの向こう側。
ビューア空気読め。

# 解決策

要はエディタとビューアが一発で最前面にくるボタンがほしい。

## Windowsの場合
AutoHotKeyを使う。
Alt+vでエディタとビューアが最前面になって、エディタがアクティブになる。
エディタとビューアが両方起動していないとなにもおこらないはず。
ついでにエディタが終了したらビューアとAutoHotKeyが終了するようにした。
(2016/4/20追記）
`WinActivate`を連続で使うとビューアにフォーカスがまた移ってしまったり弊害があったのでビューアはTopにするだけにした。
またAlt+vでエディタ＋ビューアと直前の最前面ウインドウを交互に最前面にできるようにした。
`winset, top`が効かなかったので`AlwaysOnTop`を２回使用。
[参考](http://yanor.net/wiki/?Windows-%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%2FAutoHotKey%2F%E3%83%95%E3%82%A1%E3%83%B3%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%AD%E3%83%BC%E3%81%A7%E3%82%A2%E3%83%97%E3%83%AA%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88)

```ahk:Activate_Vim_and_pdf.ahk
;; vimとSumatraPDFを同時に最前面にする
#IfWinExist ahk_exe SumatraPDF.exe
IfWinExist, ahk_exe gvim.exe
{
    Process, WaitClose, gvim.exe
    {
        Process, Close, SumatraPDF.exe
        ExitApp
    }
    !v::
        IfWinActive, ahk_exe gvim.exe
        {
            WinSet, Bottom, , ahk_exe gvim.exe
            WinSet, Bottom, , ahk_exe sumatraPDF.exe
            WinActivate, %lastATitle%
            Return
        }
        Else
        {
            WinGetActiveTitle, lastATitle
            WinSet, AlwaysOnTop, On, ahk_exe sumatraPDF.exe
            WinSet, AlwaysOnTop, Off, ahk_exe sumatraPDF.exe
            WinActivate, ahk_exe gvim.exe
            Return
        }
}
#IfWinExist
```

## Macの場合
AppleScriptを使う。
スクリプトエディタで以下のように。

~~~applescript:Activate_Vim_and_pdf.app
-- VimとSkimを最前面にする
if application "MacVim" is running then
	if application "Skim" is running then
		tell application "Skim"
			activate
		end tell
		tell application "MacVim"
			activate
		end tell
	end if
end if
~~~

これをファイルフォーマット：アプリケーションとして保存。
実行するとエディタとビューアが最前面になり、エディタがアクティブになる。
エディタとビューアが両方起動していないとなにもおこらないはず。
後は適当な手段でホットキーで起動できるようにする。
自分の場合[Snap](https://itunes.apple.com/jp/app/snap/id418073146?mt=12)を使用。
WordPressのコーディング規約

下記の抜粋をまとめただけ
https://wpdocs.osdn.jp/WordPress_%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E5%9F%BA%E6%BA%96

##前提
WordPress のコード体系での PHP 記述は、いくつかのレガシーな部分において、形式に一貫性がない。

##シングルクォートとダブルクォート
文字列で何も評価しない場合は、シングルクォートを使う。
(訳注: セキュリティ向上のためには、HTML 出力において、シングルクォートを使うのは好ましくありません。多少コードが読みにくくなっても、ダブルクォートを使うべき)

##インデント
インデントは本物のタブを使う。スペースはダメ。

##関連するブロックのいずれかが2行以上の場合ブレース（波かっこ）で囲む
```php
if ( condition ) {
    action1();
} elseif ( condition2 ) {
    action2a();
    action2b();
}
```

##ループは、読みやすくするため、常にブレースで囲む
```php
foreach ( $items as $item ) {
    process_item( $item );
}
```


##PHP ショートタグは禁止
絶対に PHP のショートタグは使わないでください (<? ... ?> や <?=$var?>)。常に、完全な PHP タグ (<?php ... ?>) を使う。

PHP の閉じタグの後ろにホワイトスペースを除去することをお忘れなく。

##スペースの使い方
コンマの後ろや、論理演算子、代入演算子の両側には、常にスペースを入れてください。

例えば、`"x == 23"`, `"foo && bar"`, `"array( 1, 2, 3 )"` のようにです。
同様に、if, elseif, foreach, for and switch ブロックの開きかっこ、閉じかっこの両側にも入れてください 
(例: `foreach ( $foo as $bar ) { ...)`。

関数を定義するときは、次のようにしてください。
`function myfunction( $param1 = 'foo', $param2 = 'bar' ) {}`


##SQL文の書式
SQL の構文は常に大文字で書いてください。例えば、UPDATE や WHERE。

データベースを更新する関数は、パラメータが渡されれたとき、SQL のスラッシュエスケープが欠けていると考えてください。できるだけクエリが実行される直近でエスケープを行なってください。
このとき、`$wpdb->prepare()` を使うことが好ましいです。

もし変数を1回しか使わないのなら、その変数を作ってはいけません。データベースクエリも同様です。
データベースと交信するときは、必ず wpdb関数を用いてください。
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wpdb_Class


```php
$wpdb->query( $wpdb->prepare( "UPDATE $wpdb->posts SET post_title = %s WHERE ID = %d", $var, $id ) );
```

##変数、関数
変数名、関数名はアルファベット小文字を使い、単語の区切りはアンダースコア (_) を使う。

単語の先頭を大文字にして繋げる形式 (キャメルケース; camelCase のような形式) は不可。
`function some_name( $some_variable ) { [...] }`

##ファイル名
ファイル名は動作を説明できるアルファベット小文字の名前にしてください。単語の区切りにはハイフン (-) を使います。
`my-plugin-name.php`



##まとめ
WordPressの規約に目を通したので、要所だけ書き留めとく。
Androidで子Viewを親Viewからはみ出して表示

Androidのレイアウトにて、子Viewを親Viewからはみ出して表示させたい！
という時のメモです。
###初期状態のレイアウト
```lang:xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="40dp"
    android:background="@color/white">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            android:padding="12dp"
            android:background="@color/colorAccent"/>

    </LinearLayout>
</RelativeLayout>
```
![Screenshot_2016-02-01-18-43-58.png](https://qiita-image-store.s3.amazonaws.com/0/35806/ff381d2d-8339-9d8b-24d9-7db1ef2ebbd2.png)



上のHello World!のTextViewを親画像からはみ出させたい時、
以下の２通りの表示方法を紹介します。
・はみ出した部分を隠す
・はみ出した部分を表示する

###はみ出した部分を隠す
```lang:xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="40dp"
    android:clipChildren="false"
    android:clipToPadding="false"
    android:background="@color/white">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="-20dp"
            android:text="Hello World!"
            android:padding="12dp"
            android:background="@color/colorAccent"/>

    </LinearLayout>
</RelativeLayout>
```
![Screenshot_2016-02-01-18-46-30.png](https://qiita-image-store.s3.amazonaws.com/0/35806/7d4cd628-d245-9ec0-4a5b-6263109d734e.png)


子Viewのlayout_marginの要素をはみ出したい分だけマイナスにします。

###はみ出した部分を表示する
```lang:xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="40dp"
    android:clipChildren="false"
    android:clipToPadding="false"
    android:background="@color/white">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="-20dp"
            android:text="Hello World!"
            android:padding="12dp"
            android:background="@color/colorAccent"/>

    </LinearLayout>
</RelativeLayout>
```
![Screenshot_2016-02-01-18-50-55.png](https://qiita-image-store.s3.amazonaws.com/0/35806/cf62205d-fa76-6b85-784e-4de8ebe1d1d9.png)



親の親のViewに対して
android:clipChildren="false"
android:clipToPadding="false"
と、すると親のViewの領域を超えて子Viewを描画できます。
JavaScriptをはじめて書く人が間違いそうなやーつ

#以下のコードはChrome,SafariとFirefoxで挙動が異なる。
```
(function(){
if(true){
    var hoge = fuga();
    function fuga(){
      console.log('fuga');
    }
  }
})()
```

##Chromeの場合

![d06c41a2fb6f63aa66160c733ecc6d18.png](https://qiita-image-store.s3.amazonaws.com/0/50307/471d432e-d318-447b-83bc-05f327d8ec70.png)

実行できる

##Firefoxの場合

![4589d282be0aae5621ff439a3c160441.png](https://qiita-image-store.s3.amazonaws.com/0/50307/ba03287b-b220-dc6d-2386-da6a92b1fa6e.png)

実行できない


そもそもJavaScriptに慣れ親しんだ人はこんな書き方しない。
しかし、他の言語に慣れ親しんでいた人は書いてしまった。
他言語からJSを書き始めた場合、やりがちなのでJSpattern や GoodPartsをよく読みましょう。

また、この挙動が異なる原因はどこから来ているのか。
どなたか知っていたら教えていただきたいです。
Mac(OS:Yosemite)にSCIPをインストールするまで 〜'gmp.h' file not found〜



初心者による記録．
scip3.2.0をmac(Yosemite)にインストールしてみました．

SCIPの概要については[公式ページ](http://scip.zib.de/)やこちらの記事をどうぞ
http://qiita.com/mpkato/items/7ed8a2c60785bf3adfd8


##SCIPをダウンロード，説明の通りにインストール
上の記事のとおりです．


##gmp.hが見つからない
makeコマンド実行時に問題発生．

```
src/rational.h:32:10: fatal error: 'gmp.h' file not found
#include "gmp.h"
         ^

```

とのこと．gmp.hが見つからないらしい．

###試行1
このエラー文をそのままGoogle検索にかけて[ヒットしたページ](https://github.com/ethereum/homebrew-ethereum/issues/32)によるとHomebrewでgmpを再インストールしてみると上手くいったらしい．
ということでHomebrewでgmpを再インストールしてみる．

```
brew uninstall gmp
brew install gmp
```

ところが，先ほどのエラーは相変わらず発生する．

###試行2
/usr/local/include/を確認してみると，確かにgmp.hは存在している．ということは，コンパイラがこのディレクトリを見てないのかな？
ということで，-vオプションを付けて適当なファイルをgccでコンパイルしてみる．

```
gcc -v test.c
```

出てきた文の以下の部分に注目

```
#include "..." search starts here:
#include <...> search starts here:
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/../lib/clang/7.0.2/include
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include
/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.11.sdk/usr/include
/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.11.sdk/System/Library/Frameworks (framework directory)
End of search list.
```

やはり"/usr/local/include/"は検索されてない模様．
じゃあ
"/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.11.sdk/usr/include"
というディレクトリにもgmp.hを置いちゃえばいいかな（安直）ということで，シンボリックリンクを作ってみた．
(コンパイラに"/usr/local/include/"を追加しちゃう方がいいのかもしれないけど，やり方は分かりません．教えて下さい．)


```
ln -s /usr/local/include/gmp.h /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.11.sdk/usr/include/gmp.h
```

これで再びmakeを実行すると，先ほどのエラーは出なくなった．



##-lgmpが見つからない
しかし，makeを実行してしばらく進んだところで再びエラー

```
ld: library not found for -lgmp
clang: error: linker command failed with exit code 1 (use -v to see invocation)
```

さっきの対処法のせいかな？
とりあえずGoogleで「ld: library not found for "-lgmp"」を検索．
（当たり前だが，""を付けないとlgmpを除外して検索する設定になるので注意．そんなところで引っかかるやつは自分ぐらいか．）
すると[こんな記事](http://qiita.com/takecian/items/bd9fd49c9b9704d6c425)に当たった．
コマンドラインツールをインストールしてみると上手く行ったらしい．

```
xcode-select --install
```

再び実行
…
…

```
** Build complete.
```

よかったよかった．



##ようやくインストール完了
最初の記事にある通り，scip-x.y.zに移動して，インストールを実行して終わり．こここでは問題は起きなかった．

以上です．
自分は雑魚なので，こうした方がより良いなど，何か指摘あったらコメント貰えると嬉しいです．