OmniAICreator/Qiita-1.07M huggingface dataset:
ファイルパス操作の共通インターフェースを提供するpathlib


Python3.4から導入された[pathlib](https://docs.python.org/3.4/library/pathlib.html#pathlib.WindowsPath) は、ざっくりいってしまうと、os, os.path, globなど複数のモジュールに散らばっていたパス操作を集約したものだといえる。
あると便利だけれど、ぶっちゃけなくても困らない印象。

## 指定したディレクトリ以下のディレクトリ/ファイル表示

とりあえずはよく使う、「指定したディレクトリ以下のディレクトリ/ファイル表示」だけあればいいか。

```python:指定したディレクトリ以下のディレクトリ/ファイル表示(pathlib)
>>> from pathlib import Path
>>> p = Path('.')
>>> a = list(p.glob('**/*'))
>>> a
[PosixPath('.gitkeep'), PosixPath('css'), PosixPath('css/style.css')]
```

(ほぼ)同様の処理を既存のモジュールで書くとこうなる。

```python:指定したディレクトリ以下のディレクトリ/ファイル表示(既存モジュール)
# osモジュールを使用する。pathlib版と違い、指定したpathが入るので気になる場合は、rootとpathを比較して除外すればよい。
# 特に問題はないんだけど長い...
>>> import os
>>> def _walk(path):
    for root, dirs, files in os.walk(path):
        yield root
        for f in files:
            yield os.path.join(root, f)
>>> a = list(_walk('.'))
>>> a
['.', './.gitkeep', './css', './css/style.css']

# globモジュールを使用する。ドットファイルが拾えなかったり、途中のディレクトリが拾えなかったり。
>>> import glob
>>> glob.glob('**/*')
['css/style.css']
```

## Pathの結合

ちょっと特徴的なのは、/演算子でPathの結合が行えること。
Path同士だけではなく、文字列とも行える。

```python:Path結合
>>> p = Path('test')
>>> p2 = Path('test2')
>>> p/p2 # Path同士
PosixPath('test/test2')
>>> p/'test3' # Path/文字列
PosixPath('test/test3')
>>> 'test4'/p # 文字列/Path
PosixPath('test4/test')
```

cpythonの実装を見ると、/演算子に対応するメソッド(\__truediv__ および \__rturediv__)が実装されていることが分かる。
(ref. https://docs.python.org/3/reference/datamodel.html#emulating-numeric-types)

```python:Path結合の実装
class PurePath(object):
..
    # Path同士、Path/文字列の場合、呼ばれる
    def __truediv__(self, key):
        return self._make_child((key,))

    # 文字列/Pathの場合、呼ばれる
    def __rtruediv__(self, key):
        return self._from_parts([key] + self._parts)
```

この仕様、[ここ](http://tk0miya.hatenablog.com/entry/2013/12/01/122014)見ると結構酷評されているっぽい…
個人的には間違えて加算してしまいそう。

```python:個人的に間違えそうな例
>>> p = Path('test')
>>> 'test2' + p
Traceback (most recent call last):
  File "<ipython-input-8-22275bd1c6c1>", line 1, in <module>
    'test2' + p
TypeError: Can't convert 'PosixPath' object to str implicitly
```

なので、/演算子を使うよりも、いっその事全てPathにして処理した方が迷わなくていいかと思う。

```python:どうせ使うなら徹底的に
>>> p = Path('test')
>>> p2 = Path('test2')
>>> p3 = Path('test3')
# 任意の個数のPathから、新たなPathを生成できる
>>> Path(p, p2, p3)
PosixPath('test/test2/test3')
```

## 後方互換


前日触れたenum同様、pipでサードパーティのライブラリがインストールできる。(Python2.7以降)


```bash:
% pip search pathlib
pathlib                   - Object-oriented filesystem paths
```
AndroidでActivityに何を書くべきか？@KeithYokoma のコードを見てみよう

# 我らが @KeithYokoma について

※敬称略

Qiita の Android 界隈では誰もが知る @KeithYokoma をたたけばほこりが出るんじゃなくて、面白いものが出てくるだろうとまたまた探索してきました。公開されているプロジェクト名が読みにくいことで定評のある @KeithYokoma ですが、今回は彼が公開した「Laevatein」（読めません）の実装を見ながら Activity に何を書くかという話。

## Laevaten とは？

以下参照

- https://github.com/nohana/Laevatein
- Android - 超ラクチンに端末の画像を複数選択するためのライブラリを作った話 - Qiita - http://goo.gl/2fvyFG

## @KeithYokoma はActivityに何を書いているか？

Laevatein の実装を見つつ解説。画像を一枚表示するActivityを例にします。

### ポイント

- Activityには極力何も書かない
- Helperクラスを用意
- Helperクラスに static メソッドを書く
- ActivityからHelperクラスのメソッドを呼ぶ（thisを渡して細かい実装はHelperの中で）

とすることで、Activityを小さくし、Activity自体の可読性を向上することに成功しています。

### 実装例 

```ImagePreviewActivity.java
public class ImagePreviewActivity extends ActionBarActivity {
    public static final String EXTRA_ITEM = BundleUtils.buildKey(ImagePreviewActivity.class, "EXTRA_ITEM");
    // 省略

    private final PreviewStateHolder mStateHolder = new PreviewStateHolder(this);

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.l_activity_preview);
        mStateHolder.onCreate();
        mStateHolder.onRestoreInstanceState(savedInstanceState);
        PreviewHelper.setUpActivity(this); //★Helperのstaticメソッド呼ぶ
        PreviewHelper.setUpActionBar(this); //★Helperのstaticメソッド呼ぶ
        PreviewHelper.assign(this, getIntent().<Item>getParcelableExtra(EXTRA_ITEM)); //★Helperのstaticメソッド呼ぶ
    }

    @Override
    protected void onSaveInstanceState(Bundle outState) {
        mStateHolder.onSaveInstanceState(outState);
        super.onSaveInstanceState(outState);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.l_activity_image_preview, menu);
        PreviewHelper.setUpActionItem(this, menu); //★Helperのstaticメソッド呼ぶ
        return super.onCreateOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (R.id.home == item.getItemId() || android.R.id.home == item.getItemId()) {
            PreviewHelper.sendBackResult(this); //★Helperのstaticメソッド呼ぶ
            finish();
            return true;
        }
        return super.onOptionsItemSelected(item);
    }

    @Override
    public void onBackPressed() {
        PreviewHelper.sendBackResult(this); //★Helperのstaticメソッド呼ぶ
        super.onBackPressed();
    }

    public PreviewStateHolder getStateHolder() {
        return mStateHolder;
    }
}
```

## けつろん

- Activity にはできるだけ何も書かない
ゲームボーイ25周年でGBDK

[ゲームボーイ25周年](https://www.google.co.jp/search?q=%E3%82%B2%E3%83%BC%E3%83%A0%E3%83%9C%E3%83%BC%E3%82%A425%E5%91%A8%E5%B9%B4)

出遅れた！

というわけで、急いで開発環境を作ります。
OSはUbuntu14.04LTS。最新のOS上にGBの開発環境を作りますよ。

[GBDK2.1.5](http://sourceforge.net/projects/gbdk/files/gbdk/2.1.5/)

Linux版を/usr/lib以下に、/usr/lib/sdk/gbz80-gb/2.1.5/～となるように展開し、

```commandline:
# cd /usr/lib/sdk/gbz80-gb/2.1.5/lib
# make
```
でライブラリをコンパイルします。
続いて、/usr/lib/sdk/gbz80-gb/2.1.5/examplesで、

```c:anniv25.c
#include <stdio.h>
#include <font.h>
#include <console.h>
#include <drawing.h>

void main(void)
{
    printf(" \n\n\n\n      GameBoy\n\n         25\n\n    Anniversary!");
}
```
を作って、

```commandline:
# cd /usr/lib/sdk/gbz80-gb/2.1.5/examples
# ../bin/lcc -Wa-l -Wl-m -c -o anniv25.o anniv25.c
# ../bin/lcc -Wa-l -Wl-m -o anniv25.gb anniv25.o
# rm anniv25.o
```

すると、実行バイナリが得られるので、GBエミュに食わせて、

![Screenshot from 2014-04-22 01:21:43.png](https://qiita-image-store.s3.amazonaws.com/0/42021/3011d072-e338-5f8c-e386-124d812ff659.png)
AndroidでGoogleのURL短縮サービスを使う時に気を付けること

# AndroidでGoogleのURL短縮サービス(goo.gl)を使いたいときがあったら

## ぜんてい

- goo.gl の短縮でOK（URL短縮サービスは他にもあります）
- 個人アカウントに短縮履歴は残さない（個人認証=>URL短縮 という感じで使うと履歴に残ります）
- Google のアカウントがあって、API Keyを取得済み

## じっそう

Android固有の実装はしないので、Java関連で探せばネット上に転がっているかもしれません

### 注意点

- メインスレッドで実行すると例外をはきますので、**必ず別スレッド**で実行するように実装する

```java
UrlshortenerRequestInitializer initializer = new UrlshortenerRequestInitializer("Replace your API key");
Urlshortener service =
  new Urlshortener.Builder(AndroidHttp.newCompatibleTransport(), new GsonFactory(), null)
  .setUrlshortenerRequestInitializer(initializer)
  .build();
Url toInsert = new Url().setLongUrl("http://qiita.com");
try {
    Url result = service.url().insert(toInsert).execute();
    Log.d(LOG_TAG, result.getId());// getId() で短縮URLを取得します
} catch (Exception e) {
    Log.e(LOG_TAG, "error during url shortner", e);
}
```

## けつろん

- AndroidでGoogleAPIを使うときは認証系がやっかい
- Expression Builder パターンは使いやすいね
Objective-Cでメソッドの引数にブロックを渡す

例えばサーバからjson形式で情報を取得する処理を共通化する際に、
指定するURLによって取得するデータもデータを保持するモデルクラスも異なる場合、
取得したデータのモデルクラスへの変換処理をブロックで渡すことで簡潔に書けたりします。

## 共通処理
```objc:ContentsManager.m
// 外部サーバからコンテンツ情報を取得
- (void) fetchContentnsInfo: (NSString *)url completion:(void (^) (NSArray *contentsList, NSURLResponse *response, NSError *error))completion json2Model:(NSArray* (^) (NSArray *jsonArray))json2Model
{
    NSURLSession *session = [NSURLSession sharedSession];
    
    NSURLSessionDataTask *task = [session dataTaskWithURL:[NSURL URLWithString:url]
        completionHandler:^(NSData *data, NSURLResponse *response, NSError *error)
    {
        // 通信が異常終了した場合
        if (error) {
            if (completion) {
                completion(nil, response, error);
            }
            return;
        }
        
        // 通信が正常終了した場合
        NSError *jsonError = nil;
        NSArray *jsonArray = [NSJSONSerialization JSONObjectWithData:data options:0 error:&jsonError];
        
        // JSONエラーチェック
        if (jsonError != nil) {
            if (completion) {
                completion(nil, response, jsonError);
            }
        }
        
        // 結果からモデルオブジェクトを生成
        NSArray *contentsList = json2Model(jsonArray);
        
        // 生成したモデルオブジェクトをcompletionブロックで返す
        if (completion) {
            completion(contentsList, response, error);
        }
    }];
    
    // 通信開始
    [task resume];
}
```

## 共通処理呼び出し
共通処理の引数に取得したjsonデータのモデルクラスへの変換処理をブロック(json2Model)で渡す。

```objc:AnimeListViewController.m
    [[ContentsManager sharedManager] fetchContentnsInfo:
     @"http://aaa.bbb/ccc.json"
     completion:
     ^void (NSArray *contentsList, NSURLResponse *response, NSError *error) {
         // 取得したアニメ情報を設定
         self.animeList = contentsList;
     }
     json2Model:
     ^NSArray* (NSArray *jsonArray) {
         NSMutableArray *animeList = [NSMutableArray new];
         for (NSDictionary *anime in jsonArray) {
             Anime *tmpAnime = [[Anime alloc] initWithJSONObject:anime];
             [animeList addObject:tmpAnime];
         }
         return [animeList copy];
     }];
```

```objc:ChapterListViewController.m
    [[ContentsManager sharedManager] fetchContentnsInfo:
     @"http://xxx.yyy/zzz.json"
     completion:
     ^void (NSArray *contentsList, NSURLResponse *response, NSError *error) {
         // 取得したチャプター情報を設定
         self.chapterList = contentsList;
     }
     json2Model:
     ^NSArray* (NSArray *jsonArray) {
         NSMutableArray *chapterList = [NSMutableArray new];
         for (NSDictionary *chapter in jsonArray) {
             Chapter *tmpChapter = [[Chapter alloc] initWithJSONObject:chapter];
             [chapterList addObject:tmpChapter];
         }
         return [chapterList copy];
     }];
```
第4回elasticsearch勉強会に参加しました


[第4回elasticsearch勉強会](http://elasticsearch.doorkeeper.jp/events/8865)に参加してきました。
Elasticsearchの勉強会は初参加＆社外勉強会も本当に久しぶりでした。いい刺激＆新しい知識をもらったので、時間を作って手を動かしてみようと思います。
メモをまとめてみようと思ったのですが、既に[Developers.IO](http://dev.classmethod.jp/server-side/4th-elasticsearchjp/ "Developers.IO")さんや[よしだのブログ](http://blog.yoslab.com/entry/2014/04/21/200601 "よしだのブログ")さんが綺麗にまとめられているので、個人的に気になった点をピックアップしてみました。hadoopとの連携部分がすぐに応用できそうな感じかな。
ちなみに、twitterまとめは[こちら](http://togetter.com/li/657879)

# アナライズ処理の仕組みとクエリDSL
株式会社シーマーク 大谷純さん @johtani

- インデキシングとクエリ実行時のアナライズ処理が異なると、正確な結果が取れなくなる。（仕組みを考えれば当然ですね…。）
- アナライズ処理が行われないメソッドには要注意！Elastic本に書いてあるようなので、後で目を通さねば。
- elasticsearch-extended-analyze、画面できたら嬉しいなぁ。

# elasticsearch-hadoopを使ってごにょごにょしてみる
株式会社マーズフラッグ R&D部 やまかつさん @yamakatu

- Kibanaは可視化はできるけど集計、分析がElasticsearchのクエリくらいしかできない。
- HadoopからElasticsearchをStorageとして利用できる！
- でもとても遅い（Hadoopより10倍くらい）。何か見落としてるところがあるかも。だから改善できるかもしれないけど、今はわからない感じ。
- readをHadoop、writeをElasticsearcというようなこともできる。HadoopのデータをElasticsearch通してKibanaで可視化とか？
- Elasticsearchをマスターストレージとして使うのは、個人的には向いていないと…。

# CouchbaseとElasticsearchが手を結んだら
株式会社アットウェア 佐竹雅央さん @madgaoh 河村康爾さん @ijokarumawak

- Couchbaseが弱い横断的な処理をElasticsearchに任せる。
- ElasticsearchのpluginがJettyで仮想的なCouchbaseを立ち上げる。
 - XDCRでmasterからreplication
- Elasticsearchが貧弱な環境だと、Queueが溢れる
 - データを取りこぼして、Elasticsearchでもエラーが上がってこない。Couchbaseも同期したことになってる。誰も気づかない！（困る）

# Elasticsearch at WANTEDLY
Wantedly, Inc 内田誠悟さん @spesnova

- [実践！Elasticsearch](http://engineer.wantedly.com/2014/02/25/elasticsearch-at-wantedly-1.html)をがっつり書いた。
- インデックスは検索用とオートコンプリート用で用意している。
- [Elasticsearch Workshop](http://www.slideshare.net/gnurag/workshop-learning-elasticsearch)のスライドがわかりやすかった。

# ElasticsearchでScripting
株式会社富士通ソフトウェアテクノロジーズ 滝田聖己さん @pisatoshi

- ノード毎にScriptのバージョンをちゃんと同期しないと、正しい結果が取れるノードと取れないノードが混在しておかしなことになる。

# Elasticsearch 向け多言語解析プラグイン
ベイシス・テクノロジー株式会社 江口天さん

- [Rosette Search Essentials](http://www.basistech.jp/elasticsearch/)の機能紹介とDemo
- KitKatに書かれているURLでDLして試してね！今なら無料！（期間限定らしいです。）

----
とても充実した勉強会で、あっという間に2時間が過ぎてしまいました。主催の@johtaniさんと発表者の皆さん、会場を提供していただいたリクルートテクノロジーズさん、ありがとうございました！
Ruby でシェルのコマンドを実行する

みなさんは Ruby でシェルのコマンドを実行する際はどうしていますか？  
私はだいたいは `Kernel.#system` メソッドや `FileUtils` モジュールを利用しますが、
今回 Shell という標準ライブラリを見つけたのでそれを活用してみました。

* class Shell http://docs.ruby-lang.org/ja/2.1.0/class/Shell.html

```rb
require 'shell'

Shell.def_system_command("ls")
Shell.alias_command("ls1", "ls", "-1")
Shell.def_system_command("sort")

my_shell = Shell.new
my_shell.cd("hidamari")

# ls -1 を実行
puts my_shell.ls1
# [出力結果]
# hiro.txt
# miyako.txt
# sae.txt
# yuno.txt

contents = nil
my_shell.transact do
  # ls -1 | sort -r を実行
  contents = (ls1 | sort("-r")).map.with_index(1) do |file, i|
    filename = file.chomp
    # cat を実行
    "(#{i}) #{filename.rjust(10)}: #{cat(filename)}"
  end
end

puts contents
# [出力結果]
# (1)   yuno.txt: Yuno (CV: Kana Asumi)
# (2)    sae.txt: Sae (CV: Ryoko Shintani)
# (3) miyako.txt: Miyako (CV: Kaori Mizuhashi)
# (4)   hiro.txt: Hiro (CV: Yuko Goto)
```

軽く使ってみた上で、ポイントとしては

* メソッドが用意されていないコマンドは `Shell.def_system_command` で登録する。
* `Shell.alias_command` でエイリアスも定義できる。
* `Shell#transact` のブロック中では shell オブジェクトが `self` となるので、より直感的にコマンドを実行できる。
* パイプ `|` が使える。

といったところでしょうか。

まあ `system` メソッドを使ったり、そもそも Ruby じゃなくて bash で書いたりしてもいいのでしょうが、
こういう方法もあるよということで。 ✌( 'ω' )✌
vagrant 共有フォルダをマウントできない時の対処

ubuntu14.04 が出たので、vagrant box も更新してたら、共有ディレクトリがマウントできなくなってしまった。

こんなエラー:

```
Failed to mount folders in Linux guest. This is usually because
the "vboxsf" file system is not available. Please verify that
the guest additions are properly installed in the guest and
can work properly. The command attempted was:

mount -t vboxsf -o uid=`id -u vagrant`,gid=`getent group vagrant | cut -d: -f3` /vagrant /vagrant
mount -t vboxsf -o uid=`id -u vagrant`,gid=`id -g vagrant` /vagrant /vagrant
```

既知の不具合のようで、言われたとおり、以下のようにしたら共有ディレクトリをマウントできるようになった。

https://github.com/mitchellh/vagrant/issues/3341#issuecomment-39015570

```
Host$ vagrant plugin install vagrant-vbguest
Host$ vagrant up
Host$ vagrant ssh

Guest$ sudo ln -s /opt/VBoxGuestAdditions-4.3.10/lib/VBoxGuestAdditions /usr/lib/VBoxGuestAdditions
Guest$ exit

Host$ vagrant reload
下に引っ張って更新する例のヤツの実装方法

ずばり、UIRefreshControlを使用して簡単に実装できます。
UITableViewControllerを継承した独自クラスに少し処理を書くだけ。

```objc:SampleViewController.m
- (void)viewDidLoad
{
    [super viewDidLoad];
    // UIRefreshControlを生成
    UIRefreshControl *refreshControl = [UIRefreshControl new];
    // 下に引っ張った際に呼び出される処理をactionで指定。
    [refreshControl addTarget:self action:@selector(onRefresh:) forControlEvents:UIControlEventValueChanged];
    // 作成したUIRefreshControlをTableViewControllerに設定
    self.refreshControl = refreshControl;
}

- (void)onRefresh:(id)sender
{
    // 更新開始
    [self.refreshControl beginRefreshing];

    // 更新時に行いたい処理を実装

    // 更新終了
    [self.refreshControl endRefreshing];
}
```
RevelでOAuth2認証をしてGithub APIを使う

# go-github
googleが[go-github](https://github.com/google/go-github)というgithub clientを作っているのでこれを使ってみます。

# 実装
## ログインリンク生成
「The go-github library does not directly handle authentication.」とのことで、
認証は[goauth2](https://code.google.com/p/goauth2/)などを使う必要があります。

```
# Routes
GET     /                                       App.Index
*       /:controller/:action                    :controller.:action
```
があるとして、

```go
// app/controllers/app.go
import (
	"code.google.com/p/goauth2/oauth"
	"github.com/google/go-github/github"
	// ...
)

var GITHUB = &oauth.Config{
	ClientId:     "***",
	ClientSecret: "******",
	AuthURL:      "https://github.com/login/oauth/authorize",
	TokenURL:     "https://github.com/login/oauth/access_token",
	RedirectURL:  "http://localhost:9000/App/Auth",
}

// ...

func (c App) Index() revel.Result {
	url := GITHUB.AuthCodeURL("")
	return c.Render(url)
}
```

```html
<a href="{{.url}}">ログイン</a>
```

のようにすると、ログイン用のリンクが生成できます。
ここで実際に使われているのはClientIdとAuthURLで、RedirectURLはつけた場合に使われます。

##  トークンの取得
```go
func (c App) Auth(code string) revel.Result {
	token, _ := &oauth.Transport{Config: GITHUB}.Exchange(code)
	accessToken := token.AccessToken
	// ...
}
```
ログインリンクを押して認証されると、githubからRedirectURLにリダイレクトされてきます。
そのとき、codeというパラメータが来るので、それを引数にしてExchangeすると、codeとClientIdとClientSecretが送信され、アクセストークンが取得できます。

## APIを使う
アクセストークンがあると以下のようにしてAPIを使えます

```go
transport = &oauth.Transport{
	Token: &oauth.Token{AccessToken: accessToken},
}
client := github.NewClient(transport.Client())
repos, _, _ := client.Repositories.List("octocat", nil)
for  _, repo := range repos {
	fmt.Println(*repo.Name)
}

// 以下のようなログが出る

// git-consortium
// Hello-World
// octocat.github.io
// Spoon-Knife
```

APIの詳しい使い方は[こちら](http://godoc.org/github.com/google/go-github/github)

# まとめ
RevelでGithub APIを使うときは、goauth2で認証してアクセストークンを取得し、go-githubでAPIを呼びましょう
[一日一Vim](その8)unite.vim

最近転載しかしていないですね。。。

# 参考資料

http://qiita.com/hide/items/77b9c1b0f29577d60397

http://d.hatena.ne.jp/osyo-manga/20130307/1362621589

# 使い方

上記URLのまとめが素晴らしいので、そちらを参照していただくのがいいと思います。

私がやりたかったのは、vimからexeを起動できないかなぁということでした。

`:Unite launcher` とすると、$PATH以下のexeの一覧がみれるので

そこから絞り込みして実行。っていうのが便利そうです。

$PATH以下に無いexeの実行方法も知りたいと思いますので、引き続き調べたいと思います。
SVProgressHUDで任意のスタイルを指定したい

「通信中」などのダイアログを容易に表示できるようになるライブラリ、
SVProgressHUDを使う際のスタイル指定方法です。
デフォルトだと背景が白に黒文字ですが、appearanceメソッドを介して
下記の様にスタイルを変更可能。

```objc:Sample.m
[[SVProgressHUD appearance] setHudBackgroundColor:[UIColor blackColor]];
[[SVProgressHUD appearance] setHudForegroundColor:[UIColor whiteColor]];
[SVProgressHUD showWithStatus:@"通信中"];
```
Gist のページャーを使いやすくする Google Chrome 拡張つくりました

Gist のページャーが Newer と Older しか無くてつらくなる可能性があったのでページャーを使いやすくする Google Chrome 拡張をつくりました。

![ImproveGistPager.png](https://qiita-image-store.s3.amazonaws.com/0/16758/4950e200-49a6-dfe6-50ae-bb7a77ce419c.png)

### Github
https://github.com/suzuki86/ImproveGistPager

### Chrome ウェブストア
https://chrome.google.com/webstore/detail/improvegistpager/pmikfcgcidlfejghpdiimabdponnkdap?hl=ja&gl=JP

## 作ったうえで得られた知識

### MutationObserver で DOM の変更を検知する

- Gist は最初にページを読み込むときは通常の GET リクエストなので、window.onload イベントが動くけども、Newer または Older をクリックして遷移すると、pushState を使っているのか window.onload イベントが動かない。そのため、Javascript で DOM が書き換えられたタイミングでも拡張機能が動くように、MutationObserver というものを使った。
VisualforceでBootstrapテンプレートをつかったページを表示してみる

VisualforceでBootstrapTemplateをつかったページ表示を試してみました。
![スクリーンショット 2014-04-21 23.47.41.png](https://qiita-image-store.s3.amazonaws.com/0/8407/52f17df7-c895-454e-1f43-e601263a4d3e.png)


##基本のコード
次のコードが基本的な形になります。このコードのstyleタグ内とBodyタグ内をそれぞれのテンプレートごとに変更するだけでページを表示できます。

```html
<apex:page sidebar="false" showHeader="false" standardStylesheets="false" docType="html-5.0" >
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Bootstrap Template</title>

    <!-- Bootstrap core CSS -->
    <apex:stylesheet value="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <style>
      // CSS
    </style>
  </head>
  <body>
    // Code
      
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
  </body>
</apex:page>
```

##Bootstrapのサイトにあるテンプレートの確認
Bootstrapのサイトは次のURLからアクセスできます。
http://getbootstrap.com/

ヘッダーメニューのGetting startedをクリックするとテンプレートのあるページにアクセスできます。

![スクリーンショット 2014-04-21 23.23.47.png](https://qiita-image-store.s3.amazonaws.com/0/8407/7d7998eb-5d3c-fa33-afb7-33c9ae59c68e.png)

テンプレートの画面イメージをクリックするとテンプレート毎のページが表示されます。

![スクリーンショット 2014-04-21 23.26.02.png](https://qiita-image-store.s3.amazonaws.com/0/8407/adba5b00-0d4b-3b75-36a5-89ef46770920.png)

画面が表示されたら右クリックの「ページのソースを表示」を選択します。これでページを表示するためのコードを確認できます。Custom styles for this templateのCSSファイルに必要なCSS情報が記載されています。リンクをクリックすると内容が表示されるのですべてコピーしてstyleタグ内に貼り付けます。
![スクリーンショット 2014-04-21 23.28.24.png](https://qiita-image-store.s3.amazonaws.com/0/8407/c01c28f2-fb66-20fc-0f4a-74e2ec6b085b.png)

Bodyタグ内のコードも同様にコピーします。
![スクリーンショット 2014-04-21 23.31.32.png](https://qiita-image-store.s3.amazonaws.com/0/8407/52698c8a-dab0-f211-ba20-710aeb923d2f.png)

Visualforceの場合はタグを必ず閉じる必要があるので、保存時にエラーがでることがありますが、エラーメッセージで指定された箇所を直していけば問題なく保存できます。

##Bootstrap Template表示例
![スクリーンショット 2014-04-21 23.36.36.png](https://qiita-image-store.s3.amazonaws.com/0/8407/131d5b32-1ee9-c3c3-be8c-2172c9810f58.png)

![スクリーンショット 2014-04-21 23.36.52.png](https://qiita-image-store.s3.amazonaws.com/0/8407/7df55fa4-c221-1c4c-07d9-de8416d0e39a.png)

![スクリーンショット 2014-04-21 23.37.26.png](https://qiita-image-store.s3.amazonaws.com/0/8407/560a8257-250d-3e6b-094b-579493ba613e.png)

##その他の参考サイト
リンク先の動画でBootstrapTemplateを使ってVisualforceページをつくるデモを確認できます。3分ぐらいで確認できてとてもわかりやすいです。

Twitter Bootstrap and Visualforce
https://www.youtube.com/watch?v=sIWchyCqDa4
JobQueue をクライアントサイドで実現する

ネットワークを用いたサーバサイドとのやりとりをする必要のあるアプリケーションでは特に、まとまったリクエストをバックグラウンドで捌き続けてくれる、JobQueue の仕組みが欲しくなることが有ります。
ネットワーク I/O を伴わなくても、様々な処理のまとまり（ジョブ）を非同期に逐次実行したり、電源が切れても、再起動した時にジョブの続きを勝手に処理してくれたりするような、永続化の仕組みと組み合わせられた JobQueue はとても便利です。
これによって、長時間かけて実行される非同期処理が簡単に取り扱えるようになります。

Android、iOS ともに、バックグラウンドで逐次実行する簡易な仕組みは標準フレームワークでも用意されています(`IntentService`とか`NSOperation`と`NSOperationQueue`とか)が、オンメモリで管理されるので、電源が切れたりすると無かったことに…
このため、電源を切ってもキューに積んだジョブが保持されるようにするためには、何らかの永続化の仕組みを用いて管理する必要があります。

Android、iOS ともに、これらを実現するライブラリがいくつか有ります。

## Android

### Android Priority JobQueue

https://github.com/path/android-priority-jobqueue

Path が出しているオープンソースのライブラリです。MIT ライセンスで配布されています。

優先順位付けのあるキューを用いて、優先順位の高いものからジョブをさばいてくれます。
ネットワークにアクセスする必要のあるジョブがキューに積まれている場合、コネクションが無い時は優先順位にかかわらず他のネットワークを必要としないジョブが優先して実行されます。
また、ジョブのグループ化を行って、並列実行されては困るジョブのリストを逐次実行するようにしてくれたり、ジョブの実行を遅延したり、リトライの判断を自分で拡張できたりします。

### nirai

https://github.com/jfsso/nirai/

[Android Advent Calendar 2013 で公開された](http://qiita.com/jfsso/items/106f48de7ec0612038bb)ライブラリです。Apache ライセンスで配布されています。
シンプルな API で、キューに積まれたジョブを逐次実行してくれます。

ネットワーク I/O の実行を前提として作られており、ジョブの実行中に I/O の例外が発生した場合に`NetworkOfflineException`をスローすることで、一定の時間を経過した後自動でジョブをリトライしてくれます。

## iOS

### queue

https://github.com/thisandagain/queue

GCD と SQLite3 によるジョブキューの実装です。用意されたデリゲートメソッドにしたがって実装することで、あとの面倒はこのライブラリが見てくれます。
iOS5 以上をサポートしています。

ジョブの結果はデリゲートメソッドの返り値として表現しますが、`EDQueueResult`によって表される状態に応じて、ジョブが終わった時の振る舞いが変わります。
特に、失敗時にリトライをするかどうかが変わるところが注意を必要とします。
viewの共通テンプレートを作成する

#viewの共通テンプレートを作成する
##目的：ヘッダー、フッターを流用し、コンテンツだけアクション毎に変えたい

###手順
1.　テンプレート(template.php)を作成する

```php:\fuelphp\fuel\app\views\template.php
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <header>
        <!-- header.phpファイルを読み込む-->
        <?php echo $header; ?>
    </header>
    <div id="content">
        <!-- 各アクションの内容を読み込む-->
        <?php echo $content; ?>
    </div>
    <footer>
        <!-- footer.phpファイルを読み込む-->
        <?php echo $footer; ?>
    </footer>
</body>
</html>
```

2.　読み込ませるheader.php, footer.phpを作成する 
    HEADER=ここはheaderの領域です
    FOOTER=ここはfooterの領域です　と定数で設定

```php:\fuel\app\views\parts\header.php
<div>
    <?php echo HEADER; ?>
</div>
```

```php:\fuel\app\views\parts\footer.php
<div>
    <?php echo FOOTER; ?>
</div>
```

3.　Controller_Templateを継承したController_Base(base.php)を作成する
   今後、ここで共通なものを一箇所にまとめる

```php:\fuel\app\classes\controller\base.php
class Controller_Base extends Controller_Template
{
    public function before()
    {
        parent::before();
        //header.phpをテンプレートの$headerとbindさせる。
        $this->template->header = View::forge('parts/header');
        //footer.phpをテンプレートの$footerとbindさせる。
        $this->template->footer = View::forge('parts/footer');
    }

    public function after($response)
    {
        $response = parent::after($response); // あなた自身のレスポンスオブジェクトを作成する場合は必要ありません。
        return $response; // after() は確実に Response オブジェクトを返すように
    }
}
```

4.　Controller_Baseを継承したController_Hello(hello.php)を作成し、
   indexアクションを実装する

```php:\fuel\app\classes\controller\hello.php
class Controller_Hello extends Controller_Base
{
    public function action_index()
    {
        //template.phpのcontentとアクション毎のviewをbindさせる
        $this->template->content = View::forge('hello/index');
        //デフォルト設定を変えず、template.phpのファイル名を変更しない場合はtemplateのviewオブジェクトを返す
    }
}
```

5.　viewファイルindex.phpを作成する

```php:\fuel\app\views\hello\index.php
<div>
    コンテンツ領域です
</div>
```

6.　結果

```html:result
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <header>
        <!-- header.phpファイルを読み込む-->
        <div>
    　　　　ここはheaderの領域です
　　　　 </div>
    </header>
    <div id="content">
        <!-- 各アクションの内容を読み込む-->
　　    <div>
    　　    コンテンツ領域です
　　　　</div>
    </div>
    <footer>
        <!-- footer.phpファイルを読み込む-->
        <div>
　　        ここはfooterの領域です
　　　　</div>
    </footer>
</body>
</html>
```

*公式サイト*
[Template コントローラ](http://fuelphp.jp/docs/1.7/general/controllers/template.html)
[view](http://fuelphp.jp/docs/1.7/general/views.html)
RaspberryPi (Raspbian)のWiFiをセットアップする


Raspberry PiにRaspbianがインストールされた状態で、WiFiに接続する手順を解説します。Raspbianは[RS Deliversで販売されているRaspberry Pi typeB with SD Card](http://jp.rs-online.com/web/p/processor-microcontroller-development-kits/7858654/)に含まれるNOOBSからインストールしました。

# 環境

* [Raspberry Pi type B](http://jp.rs-online.com/web/p/processor-microcontroller-development-kits/7568308/)
* [NOOBS v1.3.3](http://www.raspberrypi.org/archives/5580)

# 必要なもの

* HDMI接続できるモニタ。テレビとか。
* USBキーボード
* USB WiFiアダプタ ([Edimax Wireless Nano USB Adaptor](http://raspberrypi.rsdelivers.com/product/edimax/ew-7811un/edimax-wireless-nano-usb-adapter/7603621.aspx)を使用)

# 手順

## ログインする



# インターフェースの設定

```text:/etc/network/interfaces
# loop back
auto lo
iface lo inet loopback

# eth0はDHCPから取得
iface eth0 inet dhcp

# wlan設定 (WiFi)
allow-hotplug wlan0
auto wlan0
iface wlan0 inet dhcp
wpa-conf /etc/wpa_supplicant/wpa_supplicant.conf

iface default inet dhcp
```


# WPAの設定

```text:/etc/wpa_supplicant/wpa_supplicant.conf
network={
  ssid="YOUR_SSID"
  psk="PRE_SHARED_KEY"
  proto=RSN WPA
  key_mgmt=WPA-PSK
  pairwise=TKIP CCMP
  group=TKIP CCMP
}
```
Unity上でUnityする(14.04LTS)

![Screenshot from 2014-04-21 22:41:37.png](https://qiita-image-store.s3.amazonaws.com/0/42021/6301b961-5b6c-cd5d-cfae-32bdbf67ffd5.png)

[Damian-LinuxFan「Script POL repair」](http://forum.unity3d.com/threads/211059-Unity3D-on-Linux-with-Wine-Support-thread/page4?p=1494343&viewfull=1#post1494343)をちょろっと修正して動いた。

```bash:unity.pol
#!/bin/bash

[ "$PLAYONLINUX" = "" ] && exit 0
source "$PLAYONLINUX/lib/sources"

POL_SetupWindow_Init

POL_SetupWindow_presentation "Unity 3D" "Unity" "http://www.unity3d.com/" "Unity3D"

#create prefix
export WINEARCH="win32"
POL_Wine_SelectPrefix "Unity3D"
POL_Wine_PrefixCreate "1.7.17"

#setup prefix
POL_Wine_InstallFonts
#POL_Call POL_Install_directx9
POL_Call POL_Install_dotnet20
POL_Call POL_Install_tahoma
POL_Call POL_Install_vcrun2008
POL_Call POL_Install_vcrun2010
POL_Call POL_Install_mono210
POL_Call POL_Install_d3dx9_36
POL_Call POL_Install_d3dcompiler_43
POL_Call POL_Install_dxdiag
POL_Call POL_Install_dxfullsetup
POL_Call POL_Install_physx
POL_Call POL_Install_corefonts
POL_Call POL_Install_msxml6
POL_Call POL_Install_wininet
POL_Call POL_Install_ie8

#Setting OS wer
Set_OS  "winxp"

#Setting mono forcing in MonoDevelop
POL_Wine_OverrideDLL "native" "mscore"
POL_Wine_OverrideDLL "" "mscorsvw.exe"

mkdir -p $WINEPREFIX/drive_c/users/$USER/AppData/LocalLow

#registry
regfile=$(mktemp --suffix=.REG)
echo "REGEDIT4" > $regfile
echo "" >> $regfile
echo "[HKEY_LOCAL_MACHINE\\Software\\Microsoft\\Windows NT\\CurrentVersion]" >> $regfile
echo '"ProductId"="12345-oem-0000001-54321"' >> $regfile
POL_Wine regedit $regfile
#rm $regfile

POL_SetupWindow_browse "Please select the location of the Unity3D setup executable" "Unity Setup Executable"
UNITYLOC=$APP_ANSWER
POL_Wine $UNITYLOC
POL_Shortcut "Unity.exe" "Unity 3D"
POL_SetupWindow_Close

exit
```
修正点は、wineとIEの版を上げたとこ。全く本質的ではない。

### 基本的な事項
* Unity上でUnityと言ってみたかった
* PlayOnLinuxで

### 迷宮から逃れる方法
* 自分でwineを入れない
* 怪しくなったらホームの.PlayOnLinuxを捨てて、やり直す

### 所感
PlayOnLinux、いいなー。でも深みにハマったら大変なので、これ以上立ち入らないようにしたい。でも、スクリプトで環境構築できるのが、インフラ方面で今風なので、Windows用のサーバソフトをデプロイしてとか、技術をムダ使いするにはモッテコイかも知れない。
一行野郎：pop3のsniffering

###効果
pop3のパスワードを、サーバ上で平文で取得できる。
portとマッチングテキストかえれば、ftpでもなんでも平文プロトコルならOK。
pop3sとかは勘弁な。
###一行野郎
`tcpdump port pop3 -l -A | egrep -i 'pass |user ' --color=auto -B2`
poperによって、pass、user、の部分は変えとく。
「--color=auto」は色つけなのでお好みで。
「-B2」は、前の2行を出力。「-A4」なら後5行。
###必要な物
* egrep
* tcpdump
パッケージを作成し、PyPIに登録したメモ


Pythonでパッケージを作って、[PyPI](https://pypi.python.org/pypi)に登録した時の作業メモ
なお、今回はコマンドラインツールを作りました

PyPIに登録することによって`pip`でインストール出来るようになります

## ディレクトリ構成

```
├── README.md 
├── requirements.txt
├── setup.py
└── src
    ├── __init__.py
    └── hoge.py
```

## ファイル詳細

- requirements.txt、src/__init__.py

	`touch`で作った空ファイルです

- README.md

	github用

- src/hoge.py

	実装したパッケージのソースコード
	今回はコマンドラインツールなので、`main`関数に実行する処理を記述しておきました

- setup.py
	
	パッケージを登録する際に必要な情報を記載します	
	
	```Py:setup.py
	# -*- encoding:utf-8 -*-
	from setuptools import setup, find_packages

	setup(
    	name='pass-manager',
	    version='1.0.0',
	    author='petitviolet',
	    author_email='hoge@gmail.com',
	    packages=find_packages(),
	    install_requires=[],
	    description = 'CLI tool',
	    long_description = 'Simple CLI tool',
    	url = 'https://example.com/',
	    license = 'MIT',
    	# scripts = ['src/hoge.py'],
	    platforms = ['Mac OS X'],
    	# platforms = ['POSIX', 'Windows', 'Mac OS X'],
		entry_points={
       	 	'console_scripts': 'hoge = src.hoge:main'
	    },
    	zip_safe=False,
	    classifiers=[
    	      'Environment :: Console',
	          'Intended Audience :: Developers',
    	      'Operating System :: OS Independent',
	          'Programming Language :: Python',
    	      'Topic :: Utilities'
	    ]
	)
	```


	`classfiers`や`license`は[https://pypi.python.org/pypi?:action=list_classifiers](https://pypi.python.org/pypi?:action=list_classifiers)を見て入力すると良いと思います。

## 登録作業

```bash
# setup.pyのチェック
$ python setup.py check
# -> "running check"と出力される
$ python setup.py register
running register
...
We need to know who you are, so please choose either:
1. use your existing login,
2. register as a new user,
3. have the server generate a new password for you (and email it to you), or
4. quit
Your selection [default 1]:
```

これで`2`を選択して、usernameやpasswordを登録して下さい
実際にユーザーアカウントが作成されます
なお、passwordはちゃんとした強度がないと怒られてしまいます

```bash
python setup.py register sdist bdist bdist_egg upload
```

これでPyPIにソースとバイナリとeggをアップロードすることが出来ます。

アップロードしたパッケージには http://pypi.python.org/pypi/"PKG-NAME" でアクセス出来るようになります
パッケージの情報（setup.pyに記載した内容）はPyPIのパッケージのページからも編集できるようになっています
YouTubeの自動字幕起こしに感動した

# はじめに

動画を見ていて自動文字起こし機能があるといいなと思う時があります。
例えばdotinstallさんがサービスを始めたのは記憶に新しいですね。

YouTubeだと英語を日本語に翻訳して表示できるのですごい機能だと思います。

![0a.png](https://qiita-image-store.s3.amazonaws.com/0/25728/9130fe99-7c7c-14b7-884e-b68fd611ba26.png)

# YouTubeの設定

![1a.png](https://qiita-image-store.s3.amazonaws.com/0/25728/9a181e35-f149-afd5-b023-d09b2b34e90e.png)

# 設定修正

![1b.png](https://qiita-image-store.s3.amazonaws.com/0/25728/fecaf80a-0173-e965-f569-87d017ce452b.png)

# 画面確認

![1c.png](https://qiita-image-store.s3.amazonaws.com/0/25728/7851641f-a31f-3963-b37e-9397fca13749.png)
git-new-workdir が便利

* 別のディレクトリにもう1個作業甩のディレクトリがあると便利だな｡
* `git clone` するのはな...

そんなときに使えるのが､ `git-new-workdir` インストール方法は `git-new-workdir` でググれば
いっぱい出てきますので割愛｡

```
cd project-dir
git-new-workdir . ~/fuga/hoge/
```

使い方はとりあえずこれでOK.
gitで管理してないものはcopyされないのでそこだけ注意が必要｡

とりあえず使ってみるのをオススメします｡
インデントを使用したテキストをMarkdownにする


Ruby初心者がPopClipのExtensionに挑戦してみました。
下記のようなテキストをMarkdownに変換します。
ファイルは[hokupod/popclip](https://github.com/hokupod/popclip)に上げておきます。


#### サンプルテキスト
    タイトル
		見出し2
		見出し2
			リスト
			リスト
			リスト
		見出し2
			見出し3
				リスト
				リスト


#### 出力結果


    タイトル
    ========
    ## 見出し2
    ## 見出し2
    - リスト
    - リスト
    - リスト
    
    ## 見出し2
    ### 見出し3
    - リスト
    - リスト


#### PopClipソース


```ruby:txt2md.rb
#!/usr/bin/ruby
# -*- coding: utf-8 -*-

$KCODE = 'u'

class Markdown
  attr_reader :count
  def initialize(text)
    @indent = /\t|\s{4}/
    # 日本語濁点対応
    @text   = text.gsub(@indent, '')
                  .tr("\u309B\u309C", "\u3099\u309A")
                  .encode('UTF-8', 'UTF-8-MAC')
    @count  = text.scan(@indent).size
  end

  def title
    "#{@text}\n========\n"
  end

  def heading
    "#{'#' * (@count + 1)} #{@text}"
  end

  def list
    "- #{@text}\n\n"
  end

  def list_last
    "- #{@text}"
  end
end

# ENV['POPCLIP_TEXT'] <= ここに選択したテキストが格納し配列に変換
text_in = ENV['POPCLIP_TEXT'].to_s.split("\n")

# Markdownのスタイルを判定するための正規表現
heading_prefix = /^#.*/
list_prefix = /^-\s/
write_text = []

before_style = 0
before_text = ''
i = 0

# 配列を逆から回してスタイルを判定
text_in.reverse_each do |paragraph|
  md = Markdown.new(paragraph)
  heading_check = before_text.scan(heading_prefix).size
  list_check = before_text.scan(list_prefix).size

  # Markdownのスタイルを判定し配列に格納
  if md.count == 0
    write_text << md.title
  elsif before_style < md.count && list_check == 0
    write_text << md.list
  elsif before_style <= md.count && list_check != 0 && heading_check == 0
    write_text << md.list_last
  else
    write_text << md.heading
  end

  # 一つ前のスタイル情報を格納
  before_style = md.count
  before_text = write_text.last
  i += 1
end

# 整形済みテキストをアウトプット
write_text.reverse_each do |md|
  puts md
end
```


#### 課題

- 複数行の要素に対応していない。
- Rubyらしい書き方がわかっていない。  
↑アドバイスお願いします。
angular.moduleの引数と戻り値のいろいろ

# 前置き

Docsによると、
https://docs.angularjs.org/api/ng/function/angular.module

> When passed two or more arguments, a new module is created. If passed only one argument, an existing module (the name passed as the first argument to module) is retrieved.

>> 2つ以上の引数が渡された場合、新しいモジュールが作成されます。引数が一つであれば、既存の（その名前の）モジュールが取得されます。

# いろいろ試してみる

```js
var app = angular.module('MyApp', ['ngRoute']);
console.log(app.requires); //["ngRoute"]

var app2 = angular.module('MyApp');
console.log(app2.requires); //["ngRoute"] 第二引数を渡さなければ、getterになる。

var app3 = angular.module('MyApp', []);
console.log(app3.requires); //[] 第二引数を渡せば、新しくmoduleが作成される

console.log(app.requires); //["ngRoute"]
console.log(app2.requires); //["ngRoute"] 別に作成されるので、前もって作ってあるものには影響がない

```

* 第二引数を渡せばmoduleを新規作成する。第二引数を渡さなければ、前に作成したmodule名のものを取得。
* まさしくDocsに書いてある通り。

# 逆バージョン

```js
angular.module('MyApp');
```
* エラーになった

> Module 'MyApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

* 第二引数を渡さなければ、getterとしての役割にしかならないので、すでに作成済みのmoduleがない場合、エラーになる、ということか。

# サービス類の登録

```js
var app = angular.module('MyApp', ['ngRoute']);
console.log(app._invokeQueue); //[] //空

var app2 = angular.module('MyApp');
app2.constant('hoge', 1);//app2でconstant登録

console.log(app._invokeQueue[0]); //["$provide", "constant", Arguments[2]]
console.log(app._invokeQueue[0][2][0]); //"hoge" //appでhoge constantが登録されていることが確認できる
```

# その他

```js
var app = angular.module('MyApp', ['ngRoute']);
console.log(app._invokeQueue); //[] //空っぽ

var app2 = angular.module('MyApp', ['ngRoute']);
app2.constant('hoge', 1);//app2でconstant登録

console.log(app._invokeQueue); //[] //appとapp2は別物
```


# まとめ

angular.moduleに第二引数を渡さなければgetterになるので、一々戻り値を変数に確保しておく必要が無い（無駄な変数を作らなくて済む）。また、第二引数の内容が同じでであっても、渡せば新規に作成される。

以上のことから、読み込む順番さえ適切であれば、サービスやディレクティブ単位で別ファイルにすることが容易になる。
angular.jsのexpression開始終了シンボルを変更する

# 変更できる

```js
angular.module('myApp', []).config(['$interpolateProvider', function($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
}]);
```

# だがちょっと待ってほしい

smartyの都合で変更してみたのだけど、以下のようなコードが出てきた場合どうしようもなかった。angularは変更できるけど、javascript自身は変更できないので。（だよね？

```html
<div ng-class="{hoge:isHoge()}">...</div>
```

また、サーバーサイドテンプレートとクライアントサイドテンプレートの共存はだいたいセキュリティ的に危険なことになる可能性が高いので、ng-app配下、少なくともng-controller配下では共存させない方が良さそう。

# 参考
http://qiita.com/pcpDev/items/c7fe38ccd606de667e06
http://havelog.ayumusato.com/develop/security/e593-mixins_server_template_and_angular.html
OctopressのサイドバーにQiitaに投稿した人気記事を表示させる方法


このページで表示しているものです。
http://ko2ic.github.io/

# 方法

1.Qiitaと同じアイコンを使いたいので、[Font Awesome](http://fortawesome.github.io/Font-Awesome/)を使う。

今回は、CDNを使うが、ダウンロードして配置してもよい。

```./source/_includes/custom/head.html
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
```

2./source/_includes/custom/asidesに本体を記述する

Qiitaに人気の投稿を取得するAPIがないので、全記事を取得してソートしています。

```qiita.html
{% if site.qiita_user %}
<section>
<h1>Qiita 人気の投稿</h1>
<ul id="qiita_post" class="post">
</ul>
  <script type="text/javascript">
    $(document).ready(function(){
      $.getJSON("https://qiita.com/api/v1/users/{{site.qiita_user}}/items",function(response){

        # 全投稿を取得して人気順に並び替える
        response.sort(function(a, b){
          a = a.stock_count;
          b = b.stock_count;
          return b - a;
        });
        for(var i = 0; i < response.length ; i++){
          var data = response[i];
          var aTag = $("<a/>").text(data.title).attr("href",data.url);

          var iStockTag = $("<i/>").css({"color":"#000","margin-right":"1em"}).attr("class","fa fa-folder-o");
          iStockTag.append("  " + data.stock_count);

          var iCommentTag = $("<i/>").css({"color":"#000"}).attr("class","fa fa-folder-o");
          iCommentTag.append("  " + data.comment_count);

          var pTag = $("<p/>");
          pTag.append(iStockTag);
          pTag.append(iCommentTag);

          var liTag = $("<li/>").attr("class","post").attr("data-qiita-stock",data.stock_count).append(aTag).append(pTag);
          $("#qiita_post").append(liTag);
          
          # 指定した投稿数だけ表示する
          if(i === {{site.qiita_display_count}} - 1){
            break;
          }
        }
      });
    });
  </script>
</section>
{% endif %}

```

3. ./_config.ymlに記述する

``` _config.yml
qiita_user: user_name
qiita_display_count: 5

default_asides:[custom/asides/qiita.html]
```

# まとめ
全記事を取得しているので、投稿数が多い場合はパフォーマンスが悪くなると思います。  
その場合は、最近の記事を表示するのものいいでしょう。
両方に対応したソースは、githubにあります。
https://github.com/ko2ic/octopress-qiita-aside
なにかあれば、pull requestでもお願いします。
VBAでExcelの目次シートを作成

# VBAでExcelの目次シートを作成

* 目次用シートを作成して、そのシート上に前シートに対するリンクを設置するマクロ

```vb:VBA
Sub SetSheetTitleList()
    Dim i As Long
    
    '----------------------------------------------
    ' ベース作成
    '----------------------------------------------
    
    ' シート作成
    Worksheets.Add(Before:=Worksheets(1)).Name = Format(Now(), "目次_yyyymmdd_hhnnss")
    ActiveWindow.DisplayGridlines = False
    
    ' 見出し作成
    Range("A1").Value = "目次"
    Range("B3").Value = "シート"
    Range("C3").Value = "説明"

    ' シートリンク作成
    For i = 2 To Sheets.Count ' 目次シート自体は除外
        Range("B" & (i + 2)).Value = Worksheets(i).Name
            Worksheets(1).Hyperlinks.Add Anchor:=Range("B" & (i + 2)), Address:="", SubAddress:="'" & Worksheets(i).Name & "'" & "!A1", TextToDisplay:=Worksheets(i).Name
    Next i
    
    
    '----------------------------------------------
    ' レイアウト調整
    '----------------------------------------------
    
    Range("B3:C3").Select
    
    ' 見出し色
    With Selection.Font
        .ThemeColor = xlThemeColorDark1
    End With
    With Selection.Interior
        .Pattern = xlSolid
        .PatternColorIndex = xlAutomatic
        .ThemeColor = xlThemeColorLight2
    End With
    
    ' 列幅調整
    Columns("B:B").EntireColumn.AutoFit
    Columns("C:C").ColumnWidth = 55
    
    ' 表を選択
    Range("B3:C" & Sheets.Count + 2).Select
    
    ' グリッド線を引く
    Selection.Borders(xlDiagonalDown).LineStyle = xlNone
    Selection.Borders(xlDiagonalUp).LineStyle = xlNone
    With Selection.Borders(xlEdgeLeft)
        .LineStyle = xlContinuous
        .ThemeColor = 1
        .TintAndShade = -0.4
        .Weight = xlThin
    End With
    With Selection.Borders(xlEdgeTop)
        .LineStyle = xlContinuous
        .ThemeColor = 1
        .TintAndShade = -0.4
        .Weight = xlThin
    End With
    With Selection.Borders(xlEdgeBottom)
        .LineStyle = xlContinuous
        .ThemeColor = 1
        .TintAndShade = -0.4
        .Weight = xlThin
    End With
    With Selection.Borders(xlEdgeRight)
        .LineStyle = xlContinuous
        .ThemeColor = 1
        .TintAndShade = -0.4
        .Weight = xlThin
    End With
    With Selection.Borders(xlInsideVertical)
        .LineStyle = xlContinuous
        .ThemeColor = 1
        .TintAndShade = -0.4
        .Weight = xlThin
    End With
    With Selection.Borders(xlInsideHorizontal)
        .LineStyle = xlContinuous
        .ThemeColor = 1
        .TintAndShade = -0.4
        .Weight = xlThin
    End With
    
    Range("A1").Select

End Sub





```
jQuery (JavaScript) から C# のメソッドを呼び出す [基礎編]

# はじめに
Visual Studio を使えば `Web ブラウザ`上で動作する JavaScript から `Web サーバー`上にある C# のコード(メソッド)を容易に呼び出すことができます。
実際に動作するコードを見れば、簡単にエレガントにリモート呼び出し(Ajax 呼び出し)ができることがわかるでしょう。

C# のメソッドの引数や戻り値にレコードを指定することもできますが、今回は引数と戻り値に整数を指定したサンプルを提示しました。([基礎編]ですから！)

[詳細な手順説明はこちら(無料の Visual Studio Express 2013 for Web で実際に開発してみよう)](http://www.visualstudio.expressweb.jp/wp/jquery-javascript-%E3%81%8B%E3%82%89-c-%E3%81%AE%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%82%92%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%99-%E5%9F%BA%E7%A4%8E%E7%B7%A8/)

# 呼び出される側(C#)のコード

```csharp:Service1.svc.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Text;
 
namespace WebApplication1
{
    [ServiceContract(Namespace = "")]
    [AspNetCompatibilityRequirements(RequirementsMode =
     AspNetCompatibilityRequirementsMode.Allowed)]
    public class Service1
    {
        // 追加の操作をここに追加して、[OperationContract] とマークしてください
        [OperationContract, WebInvoke(Method = "POST")]
        public int Add2(int x, int y)
        {
            return x + y;
        }
    }
}
```

# 呼び出す側(JavaScript/jQuery)のコード

```html:Views/Home/Index.cshtml
@{
    ViewBag.Title = "Home Page";
}
<h3>AJAX テスト</h3>
 
<input id="button1" type="button" value="Add2" />
<br />
<b>JSON:</b><div id="json"></div>
<b>戻り値</b><div id="result"></div>
 
@section scripts {
<script type="text/javascript">
    $(document).ready(function () {
        $("#button1").click(function () {
            var args = { x: 11, y: 22 };
            $.ajax({
                type: "POST",
                url: '@VirtualPathUtility.ToAbsolute("~/Service1.svc/Add2")',
                contentType: "application/json",
                data: JSON.stringify(args),
                success: function (data) {
                    $("#json").text(JSON.stringify(data));
                    $("#result").text(data.d);
                },
                error: function (xhr) {
                    alert("failed");
                    alert(xhr.responseText);
                }
            });
        });
    });
</script>
}
```

[詳細な手順説明はこちら(無料の Visual Studio Express 2013 for Web で実際に開発してみよう)](http://www.visualstudio.expressweb.jp/wp/jquery-javascript-%E3%81%8B%E3%82%89-c-%E3%81%AE%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E3%82%92%E5%91%BC%E3%81%B3%E5%87%BA%E3%81%99-%E5%9F%BA%E7%A4%8E%E7%B7%A8/)
あいまいに補完したい！けど、選択肢に説明も載せたい！というときの方法

つまり、こういうことをしたいとき。

![toolhint.png](https://qiita-image-store.s3.amazonaws.com/0/10290/2081d29b-bdb3-6499-39b1-fee6be11a69e.png)

Sublime Textであいまい補完(Fuzzy Completion)をするには、スニペットではなく.sublime-completionsを使う必要があります。しかし、.sublime-completionsにはtriggerとcontentsしかプロパティがありません。それではどうするか。

```json
{
	"scope": "xxx.xxx",
	"completions":
	[
		{ "trigger": "CAMERA_PITCH\tinteger", "contents": "CAMERA_PITCH" }
	]
}
```

triggerの中でタブ(\t)の後に文字列を繋げると、先のスナップショットのように、右端に斜体でその文字列が表示されるようになります(スニペットでdescriptionタグに書いたのと同じ効果)。
mysqlだけでランキングしてみる(同率考慮)

# mysqlだけでランキングしてみる(同率考慮)

## 注意（というか免責）

※ノリと勢いだけで書いてます。実用では使わない方が良いと思います。
EXPLAIN するとわかるけどテーブルフルスキャンが２回走ります。

ツッコミどころ満載なので、まぁ、その、すいません。

## 何がしたいか

こんな感じのスコア的なものが入ってるテーブルを、
同率考慮してランク付けしたいっていうよくあるケース。

```sql:sql
CREATE TABLE `some_score` (
  `user_id` int(11) NOT NULL,
  `score` int(11) NOT NULL DEFAULT '0',
  KEY `user_id` (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
```

普通なら裏で集計バッチ回したり、redis使ったりして実装すると思うけど、
コレを力技でsqlだけでやってみる。

```sql:sql
SELECT rank, some_score.score FROM (
        SELECT score, @rank AS rank, cnt, @rank := @rank + cnt FROM
        	(SELECT @rank := 1) AS Dummy,
        	(SELECT score, count(*) AS cnt FROM some_score GROUP BY score ORDER BY score DESC) AS GroupBy
        ) AS Ranking
JOIN some_score ON some_score.score = Ranking.score ORDER BY rank ASC;
```

```lang:結果(例)
+------+-------+
| rank | score |
+------+-------+
|    1 |    52 |
|    1 |    52 |
|    3 |    51 |
|    3 |    51 |
|    3 |    51 |
|    3 |    51 |
|    7 |    50 |
|    7 |    50 |
|    7 |    50 |
|    7 |    50 |
|    7 |    50 |
|   12 |    42 |
|   12 |    42 |
|   12 |    42 |
|   12 |    42 |
|   16 |    41 |
|   16 |    41 |
|   16 |    41 |
|   16 |    41 |
|   16 |    41 |
|   16 |    41 |
|   22 |    40 |
|   22 |    40 |
== 略 ==
```

## 何やってるか

* `(SELECT @rank := 1) AS Dummy,`
`@rank`変数初期化。
`SET @rank = 1;`
で外に出しても良いけど、１クエリで済ませるために。

* `(SELECT score, count(*) AS cnt FROM some_score GROUP BY score ORDER BY score DESC) AS GroupBy`
スコア毎に集計。
カーディナリティが高いとここもちょっとやばそう。

* `SELECT score, @rank AS rank, cnt, @rank := @rank + cnt FROM`
 * SELECT内で `count(*)` を直接`@rank`に足し込めないので、いったんサブクエリで受ける。
 * サブクエリとjoinすると変数が何度も足し込まれておかしな事になるので、一時テーブルで受ける。

* `SELECT rank, some_score.score FROM (
〜〜〜
JOIN some_score ON some_score.score = Ranking.score ORDER BY rank ASC;`
元のテーブルとjoinして表示。

## 要点

`AS Ranking` の部分のサブクエリでスコア毎に集計した件数が出てるので、
それを一時テーブルに受けて元のテーブルとjoinして表示する感じ。

```lang:Rankingのとこ
+-------+------+-----+----------------------+
| score | rank | cnt | @rank := @rank + cnt |
+-------+------+-----+----------------------+
|    52 |    1 |   2 |                    3 |
|    51 |    3 |   4 |                    7 |
|    50 |    7 |   5 |                   12 |
|    42 |   12 |   4 |                   16 |
|    41 |   16 |   6 |                   22 |
|    40 |   22 |  71 |                   93 |
|    21 |   93 |   2 |                   95 |
|    20 |   95 |   5 |                  100 |
|    10 |  100 |  32 |                  132 |
+-------+------+-----+----------------------+
```

もっと効率良いやり方あると思うけど、このへんが限界:(

## 追記＠2014/4/22

よく考えたら、スコアに対するランクが取得できれば、
`{ :score => :rank }`の形のハッシュに整形してアプリケーション側で使えるから、
`GROUP BY`の部分の集計で１回テーブル嘗めるだけでも十分な気がする。
MAMP PHP文字化け対処法

# MAMP PHP文字化け対処法

PHPをベースにメールフォームを作成していたのですが、

MAMPのデフォルトの設定では、文字コードあたりを変更しなければいけないようだったので覚書として書きたいと思います。

MAMPの日本語でのデフォルト文字エンコードはUTF-8ではないようです。

以下が手順になります。

## UTF-8にするためにphp.iniを編集

1. アプリケーションを開く
2. MAMPを開く
3. binを開く
4. phpを開く
5. phpバージョン（お使いのバージョン）
6. conf
7. php.iniをお使いのエディタで開く

#### 394行目付近

```
;default_charset = "iso-8859-1"
//↓セミコロンを削除しUTF-8へ書き換える
default_charset = "UTF-8"
```

#### 1009行目付近

```
;mbstring.language = Japanese
//↓セミコロンを削除
mbstring.language = Japanese
```

#### 1014行目付近

```
;mbstring.internal_encoding = EUC-JP
//↓セミコロンを削除しUTF-8へ書き換える
mbstring.internal_encoding = UTF-8
```

#### 1017行目付近

```
;mbstring.http_input = auto
//↓セミコロンを削除
mbstring.http_input = auto
```

#### 1032行目付近

```
;mbstring.detect_order = auto
//↓セミコロンを削除し以下のように書き換える
mbstring.detect_order = UTF-8,SJIS,EUR-JP,JIS,ASCII
```

変更後、MAMP再起動で反映します。

## 参考記事

* [MAMPのPHPで日本語が文字化けする現象をなおす](http://sachips.byeto.jp/mac/mamp_php_encoding.html")
* [MAMPの文字化けを治し日本語が表示されるようにする．](http://sevenbluesea.blog101.fc2.com/blog-entry-19.html")
grunt-contrib-less でダイナミックなファイル生成

less に限った事ではないですが [Configuring tasks - Grunt: The JavaScript Task Runner](http://gruntjs.com/configuring-tasks) の通り、
マッチしたファイルの名前にあわせてCSSファイルを書き出す方法。

```js
grunt.initConfig({

    less: {
        dev: {
            files: [
                {
                    expand: true, // 展開を有効に
                    cwd: "less/", // ソースファイルのディレクトリ（プレフィクス）
                    src: ["*.less"], // ソースファイルのルール
                    dest: "css/", // 出力先ディレクトリ
                    ext: ".css" // 出力ファイルの拡張子
                }
            ]
        }
    }

});
```

これで **less/\*.less** にマッチするファイルは Less でコンパイルされて、
**css/** に各々のファイル名で保存されます。

サブディレクトリまで書き出したい場合は

```js
src: ["**/*.less"],
```

などとすると行けます。

「アンダースコアから始まるファイルはモジュール」などといったルールがある場合は、
それらのファイルだけ除外してもよいですね。

```js
src: ["**/*.less", "!**/_*.less"],
```

が、個人的なルールとしては、サブディレクトリのファイルはモジュールとして扱い、
ソースディレクトリのルートにある物だけを書き出す形にした方が
捗るのではないかと思っています。（一番はじめの例のように）