2014-08-12

Vim scriptテクニックバイブルを購入しました

Vim

Vim scriptテクニックバイブル

先日、Vim scriptテクニックバイブルという、なんともニッチなものが発売されました。
当日のタイムラインでは、Vimmerの方々が本屋巡りをしている状況。

さっと読んでみましたので、感想というか、Chapter毎にメモしつつ読んだので、
それを記載。

f:id:lisia:20140812031957j:plain

Chapter1 Vim スクリプトを実行してみよう

Chapter1には基礎が詰まっているので、すごく大切。

文字列演算を制する者は、Vim スクリプトを制する

Chapter1では、単元のタイトル通り、実行してみることが主でした。
その中でも、基礎の基礎が詰まっている印象。

:echoで出力
変数、型
四則演算
リスト、辞書
比較方法
関数の使い方

などなど。

Chapter2 Vim スクリプト詳説

実際に、Vim scriptをファイルに書いて実行していく部分。
実際にプログラミングしていく感じです。

変数のスコープがすごい。
せいぜい、g:fooでグローバル、s:fooでスクリプトローカルぐらいの知識しかなかった。

その他、関数定義の方法や、種類など。
autload関数とか、dictとか…いろいろ。
知らないことだらけです。
autoload関数の書式は、プラグインでよく見かけるアレな気がしました。

なんといっても、例で取り上げている関数が面白い。
ただ関数作るだけではなく、階乗求めたり、ベクトルだったり、
楽しみながら読めました。

Chapter3 Vimの機能の使い方

EXコマンドや、バッファ、ウインドウなどなど。
Vimのプラグインでバッファに対して何か追加したり、働きかけることは多いと思う。
そのような場合の基礎的な部分になるChapterかと思いつつ読みました。

正規表現...やばい。
普通の正規表現も調べながらたどたどしいものしか書けないですが、
正規表現も使いこなせるようになると、いろいろ幅が広がりそう。

Chapter4 Vimからのスクリプト実行方法

いろいろな実行方法について。
ファイル、キーマップ、コマンド定義、イベント。

autocmdのイベント一覧として、数ページを割いて書いてある。
サンプルもしっかり載っており、ここまでくると、それらしきものが作れるようになる気がしました。

pluginや、autoloadにファイルを置いたりしているところを見ると、
plugin開発もここらで意識できるのではないでしょうか。
それと...。
対象読者には「:helpが引けない人」というのもあるということを聞いていたので、
詳しく知りたい場合は、「:help hogehoge」参照してね。っていうが書いてあるところは、
:helpを引くのが苦手な人も、読みながらも:help引く癖がしっかり付けられると思います。

これは今後かなり重要になると思いますし、便利できるはずです。

Chapter5 Vim スクリプトを公開しよう

プラグインの作成がついに！

実際にプラグインを作りながら、一連の流れを学ぶことができます。
何でも「既にあるから…」とやらないでいると一生何も作れないので、
まずは写経してみることが良いと思います。

作り方の中にはヘルプの書き方なんかも載っているので、アイデアさえあれば、
ここを読めば、何か作り上げられるのではないでしょうか。

Chapter6 組み込み関数リファレンス

ここはリファレンス。
良く利用されるものに絞ってリファレンス化されているので、
役立つことでしょう。

Chapter7 実践テクニック

この書籍を読んで、真面目に開発に取り組もうとなった時に、参照できる項が多いと思います。
WebAPIの使い方なんかは、覚えてしまうとちょっとした便利コマンド作るのに便利なので、
使ったことのない人はやってみると良さ気です。
自分がやったのは、GoogleMapのAPI叩いて、住所入れたら緯度経度をechoする…みたいな、
しょーもないコマンド作ったり。。

地図弄る時に、パッとここに点打ちたい！っていう時に以外と便利してます。

あとはチャットワークに投稿したり。
API叩けるようになるので、いろいろと面白いことができるようになります。 Vim スクリプトでゲームについても載っているので面白い。
テトリスなんか、写経してみたいものです。

全体的なお話

とにかく丁寧。　この一言に尽きます。
非常に丁寧に書かれており、Vim scriptの教科書にはもってこいです。
既に他の言語を経験済みの場合は、説明が冗長に感じられるかもしれませんが、
Vim scriptの教科書ということを考えれば、当然な気がします。

自分ぐらいの人間であれば、間違いなく役に立ちますし、かなり勉強になります。
プラグインをばりばり書いています！という人には物足りないのかもしれませんが、
これからやってみる人や、いずれはやってみたい人なんかには、非常に参考になると思います。
値段についての言及もされていましたが、3000円を超えないのは大きいです。
本当にオススメなので、是非買って読んでみてください。

不便を見つけて便利するところから始めてみたいと思います。
不便を見つけるがなかなか難しいのですが、
ここに敏感になることがとても大事なようです。

プラグイン開発はいつになるかは分かりませんが、とりあえずやってみたい！
と、読めば思うはずなので、プラグイン書いたことない方々、
お互い頑張りましょう!

Vim script テクニックバイブル ~Vim使いの魔法の杖

作者: Vim scriptサポーターズ
出版社/メーカー: 技術評論社
発売日: 2014/08/06
メディア: 単行本（ソフトカバー）
この商品を含むブログを見る

2014-08-02

yosemiteでGoogle日本語入力!

雑記

Yosemite

OS X Yosemiteを入れてはみたものの、いろいろとつらみを感じる出来事がありました。

Better TouchToolがあああ
じゃねったーがああああ
Homebrewがああああ
Google日本語入力がああああ

などなど。。。

1,2,3は問題なく対応されていて、問題はありませんでしたが。
Google日本語入力
こいつだけは、しばらく利用ができない状態でした。

Google日本語入力

Google日本語入力が利用できないので、泣く泣くATOKの試用版などでしのいでいました。
ベネッセ事案のこともあり、おすすめし辛いみたいな話も聞きましたが、ここでは触れません。

ですが、ついに。
Google日本語入力開発版が出てます。
Yosemiteでやっと使えます。

Google日本語入力開発版

Yosemiteでつらみを感じていた方、入れてみると良いと思います。

でIME切る設定をすると、Vimで安心感を得られて便利できます。

その他

hubot始めました。
そのうち、Slackに置いて、便利できるものを作りたいところです。

2014-07-11

D3.jsのforce layoutで遊ぶ

JavaScript D3.js

前回はtransitionで、ひたすら円を動かし、そして消すをやりました。
今回は、見た目難しそうなアレをやってみます。

force layout

力学モデル
 Wikipedia見ましょう。

あんなやつです。

作ってみる

データの用意

nodes用のデータ、links用のデータの2つを用意します。
データの例として、

var data = {
  nodes: [
    { name: 'Alice' },
    { name: 'Bob' },
    { name: 'Eve' }
  ],
  links: [
    { source: 0, target: 1 },
    { source: 0, target: 2 },
    { source: 1, target: 2 }
  ]
};

nodesにはAlice、Bob、Eveの3要素。
linksにはnodesのどの要素が、どの要素と繋がりがあるかを表しています。
例のデータだと、
source: 0, target: 1で、nodesの0番目(Alice)から1番目(Bob)へと繋がるようなイメージ。
Alice → Bob、Alice → Eve、 Bob → Eveと繋がるので、結果は三角形が出来上がります。

このようなデータだと良さ気です。

データを使って、作る

svg要素を作るところはカット。
force、line、circleを作ります。

var force, line, circle;

force = d3.layout.force()
  .nodes(data.nodes)
  .links(data.links)
  .size([200, 200])
  .linkDistance([100])
  .charge([-100])
  .start();

line = d3.selectAll('line')
  .data(data.links)
  .enter()
  .style({
    // お好みの線の色と太さ
  });

circle = d3.selectAll('circle')
  .data(data.nodes)
  .enter()
  .attr('r', 20)
  .call(force.drag);

forceのnodes、linksでデータを指定してやります。
linkDistanceはnodes同士の間隔。
chargeは反発力みたいな。そんな感じです。
正の値を入れると面白い動きをします。
そして、circleの最後のcall(force.drag)。
これで、マウスドラッグが可能になります。

tick

最後にtickを。

force.on('tick', function () {
  line.attr({
    'x1': function (d) { return d.source.x; },
    'y1': function (d) { return d.source.y; },
    'x2': function (d) { return d.target.x; },
    'y2': function (d) { return d.target.y; }
  });

  circle.attr({
    'cx': function (d) { return d.x; },
    'cy': function (d) { return d.y; }
  });
});

これで大体完成となります。
意味なんかはreference読むのが一番かなぁと思っていますが、
きの基本形覚えてしまえば、いろいろ応用が利くはずです。

サンプル

今回もサンプルを作りました。
今回は、TwitterのREST APIから自分のアカウントのフォローしているアカウント一覧を取得。
jsonファイルに落とし込んで、フォローしている人との繋がりを描画しました。
要するに、0が自分で、targetをフォローしているユーザとするだけです。

{ source: 0, target: 1 },
{ suurce: 0, target: 2 }
// ....

nodeはcircleではなく、imageを使用し、フォローしている方のアイコンを表示しています。

デモはこちら (URL間違ってたから修正w) ※重いので注意
ソースはこちら

最後に

難しそうなものですが、案外やってみると簡単に作れてしまいます。
どちらかというと、データに何を使うか、繋がりをどう表すのかが重要になりそうです。

今度は何をしよう。。。

2014-07-03

D3.jsのtransitionで遊んでみる

D3.js JavaScript

地図ばかりいじってきましたが、transitionを使い、
図形を遷移させて遊んでみたいと思います。

SVGと、図形の描画

ここはD3の基本的なところです。
まずはいつも通り、svg要素を作成します。

// svg
var svg = d3.select('body').append('svg').attr({width: 500, height: 500});

次に図形を追加しましょう。
今回はcircle要素を追加します。

// circle
var circle = svg.append('circle')
  .attr({
    cx: 100,
    cy: 100,
    r: 20,
    fill: 'red'
  });

これで、X座標100、Y座標100に半径20で赤色の円が描画できます。

図形を遷移させる

使うのは3つです。

transition: 遷移開始
duration(ms): 遷移にかける時間をミリ秒で指定
ease('linear'): どのように動かすのか

easeは何パターンかあるのですが、詳しくはこちらのEasingの項を参照。

// transition
circle.transition()
  .duration(1000)
  .ease('linear')
  .attr({
    cx: 200,
    cy: 200,
    r: 50,
    fill: 'blue'
  });

例えば、このように書いたとすると、
1秒間かけて、X,Y = (200, 200)に移動させつつ、半径を50、色を青にする。
となります。

遷移が終わった時に何かしたいと思うと、このように書くことができます。

// 上記コードの続き
  .each('end', function () {
    d3.select(this).remove();
  });

こうすると、遷移が終わった段階で、遷移させていた図形を削除することが可能です。

さらに、transitionは続けて書くことができます。

circle.transition()
  .duration(1000)
  .attr(/* 何か */)
  .transition()
  .duration(500)
  // 略

この例だと、1秒かけて遷移、その後0.5秒また遷移という風になります。

サンプル

今回の記事の内容を使い、サンプルを作ってみました。
よければどうぞ。

デモはこちら
ソースはこちら

2014-06-30

Osaka.vim#1に参加した話

Vim

6/28(土)、待望のOsaka.vim#1が開催されました。
待ちに待った、関西Vim勉強会です。

集合

12時ぐらいに、iyuuyaさん、haya14busaさん、thincaさんと合流。
からのランチ(パスタ)。＋プリン。
プリンのあの、もうちょっと！もうちょっと食べたい！っていう絶妙な量。
便利。
13:00〜スタート!

本編

タイムテーブル

13:00 ~ 13:30
参加者自己紹介
13:30 ~15:00
thincaさんによるライブコーディング
15:00 ~ 15:30
休憩
15:30 ~18:00
フリータイム

thincaさんによるライブコーディング

scratchバッファを作って、簡単にメモをとるぷらぎん。
普通Vimは一度編集して、保存せず閉じようとすると、「保存してないよ！？いいの！？」
といちいちうるさい。それをなくすような感じ。
で閉じたやつは保持しておいて、コマンドからリストで選択できる感じ。
Unite化もしてた。
途中からユーストで配信。
配信中にUnite.vimの直してくれるShougoさんすごい。
ライブコーディングならぬ、ライブプルリク。すごい。

フリータイム

もくもく会の予定だったのだけれども。。。
発表したい人が多く、もくもく会というより、発表聞いてた。

t-codeについて

kozo2さん
無連想漢字直接入力
 http://ja.wikipedia.org/wiki/%E7%84%A1%E9%80%A3%E6%83%B3%E5%BC%8F%E6%BC%A2%E5%AD%97%E7%9B%B4%E6%8E%A5%E5%85%A5%E5%8A%9B
これのVimぷらぎんの紹介。 + t-codeやろうぜ！覚えようぜ!

miv

itchynyさん
NeoBundleLazy遅いよね! miv作りました。
既存のものに対して不満を持とう
確かに、どこかしら不満を持つことは良いことように思える。

これからはじめるVim プラグイン開発

haya14busaさん
初心者向けのぷらぎん作成講座。
めっちゃ参考になった、すごい。
資料はここ

懇親会 18:10 〜 21:00ぐらい

近くの鉄板焼きのお店で。
ダニエルさんの話がおもしろかった。
日本語のプログラミング言語はないのか的な話で、
英語も日本語もできるから、なんか申し訳なくなるというか、フェアじゃないよねっていう話。
なかなかおもしろい考え方で驚き。

関数型言語の勉強会があるらしいですよ!

iyuuyaさん、bouzuyaさんに聞いたSIerについての話。
などなど。

JavaScript生で書くのもいいけど、Coffieおすすめ！
試してみたいところ。

コードが汚いんです! -> Haskellやると綺麗になるよ。
はっ・・・！

グループチャットの話では、Slack推しされていたので、
早速今日導入してみました。
コード書ける、外部連携多い、意外とページプレビューも良い感じだった。
ただ、英語ばかりなので、いきなり導入は難しそげ。

22:00 ぐらいから ~ 5:30ぐらいカラオケ.vim

カラオケ。進捗だめです！今回は結構歌ってしまった。
というのもSwiftやろうと思ってたら、iBooksがフリーズするとかいう謎の現象に見舞われる。
つらみ。
D3.jsやるか！→OS X10.10に上げてからapacheがどうなってたのか確認しておらず、
localhostがIts' works!に。つらみを感じた。
どこのhttpd.conf読んでて、どこのvhosts読んでるんだよくそが！DocumentRootどこだよおおお！
という状態をとりあえず、Macに標準で入ってるapacheに変えてひとまず回避。

全体的な感想

かなり勉強になりました。
進捗は出ていませんが!

前にも書いたけど、Vimはあくまでテキストエディタ。
だからこそ、いろんな人が集まるし、いろんなことしてる人がいる。
言語ひとつとってもバラバラだろうし、中にはAtom触ってる人もいる。いろんな興味が沸く仕掛けがここにはあります Vimmer コミュニティー。

終始わいわいと、良い雰囲気でありつつ、懇親会でもかなり交流していた印象。
良い#1だったと思います。
次回にも期待。

次回

予定では8月だそうですが、平日開催の可能性もあります。
まだ何も決まっていないので、何も言えませんが、Osaka.vimが続くことを祈っています。

KPTも書ける人は書きましょう。次回のために。

主催のiyuuyaさん、管理者のhaya14busaさん、ライブコーディングして下さったthincaさん、お疲れ様でした。
参加者の皆様もお疲れ様でした。

またどこかでお会いしましょう。

2014-06-19

D3.jsで地図を手動で回転させる

JavaScript D3.js

前回は自動で回転させましたが、今回は手動で回転させてみます。
手動で回転させる際に参考にしたのは、D3.jsのexampleのこちらになります。
ほぼソースは同じですね。

exampleとの差異

exampleのソースを見てみると...

var feature;

var projection = d3.geo.azimuthal()
    .scale(380)
    .origin([-71.03,42.37])
    .mode("orthographic")
    .translate([640, 400]);

var circle = d3.geo.greatCircle()
    .origin(projection.origin());

こんな感じのコードになってました。
projectionの辺りですが、azimuthalを指定しています。
が、これを指定するとどうもそんなfunctionないよと怒られます。
ついでにoriginも怒られます。
circleの方もgreatCircleで怒られたり。。。

ですので、projectionは

// projection
    projection = d3.geo.orthographic()
      .scale(200)
      .translate([w /2, h / 2])
      .clipAngle(90),

こんな感じに。前回と同じものを。circleも同じく、svgにappendする形です。
ここ以外はほぼ弄っていないので…。

イベント処理の追加

このexampleでは、

mousedown
mouseup
mousemove

など、イベントを結構使っています。

mousedownに、その時点のX座標とY座標を取得したり、
mousemove、mouseupの連携で、mousedownからupまでの
X、Yの差を取り、最後にその差を適用させるというようなやり方になります。

書くのは良いんですが、ほぼexampleと同じなので、ソース自体はこちらを参照くださいませ。

動く方はこちらです。マウスでグリグリしてみてください。
動くサンプル

ひとこと

記事が手抜きすぎる!

2014-06-17

D3.jsで地図を回転させる

JavaScript D3.js

前回まで弄っていた日本地図から少し離れ、今回は別の投影法を試してみます。

orthographic

D3.jsには、様々な投影法が用意されています。
その中でも今回はorthographicを使用してみます。
この投影法を使うと、地球儀みたいなものが作れちゃいそうです。 exampleはこちら

地図を描画し、回転させるところまでやってみます。

投影法の指定

前回の日本地図ではメルカトル図法を採用していました。
今回はこのような指定をします。

var projection = d3.geo.orthographic()
  .scale(200)
  .translate([w / 2, h / 2])
  .clipAngle(90)
  .rotate([x, y, z]);

d3.geo.orthographic()とした部分と、clipAngle()、rotate()以外は前回と同じです。

clipAngle(度数)は、指定した角度分の陸地が見えるようなイメージです。
90と指定すると、90度分だけ描画されます。
180を指定すると、180度分描画されるので、裏側で見えないはずの陸地まで描画されます。
なかなか面白いことになります。

海に色をつける

陸地以外が白では味気ないので、海に色をつけてみます。
こちらを参考にさせていただきました。
ということで、地図を描画する前に円を描画しておきます。

svg.append('circle')
  .attr({
    cx: w / 2,
    cy: h / 2,
    r: 200,
    fill: '#333399'
  });

描画する

世界の地形データから、あらかじめtopojsonを作成しておきます。
あとは、日本地図の時と同じです。
マウスオーバーで国を赤で表示します。

var features = topojson(data, data.objects.world).features;

var earth = svg.selectAll('path')
  .data(features)
  .enter()
  .append('path')
  .attr({
    // いろいろ指定
  })
  .on({
    'mouseover': function () {
      // 処理
    },
    'mouseout': function () {
      // 処理
    }
  });

回転させる

ここまではほぼほぼ日本地図の時と同じです。
次は地図を回転させてみます。
d3.timer()使用し、一定時間ごとに処理させます。

d3.timer(function () {
  x += 5;
  y += 1;
  z += 1;
  projection.rotate([x, y, z]);
  earth.attr('d', path);
}, 500);

500ミリ秒毎に、xを+5、yとzを+1させるようにしてみました。
動きはしているのですが、どうもError: Invalid value for attribute d=""が出ているようで...。
まだ解決はできていません。つらみ。

作ったサンプル

次回は何をしよう。。。

Vim scriptテクニックバイブル

Chapter1 Vim スクリプトを実行してみよう

Chapter2 Vim スクリプト詳説

Chapter3 Vimの機能の使い方

Chapter4 Vimからのスクリプト実行方法

Chapter5 Vimスクリプトを公開しよう

Chapter6 組み込み関数リファレンス

Chapter7 実践テクニック

全体的なお話

Yosemite

その他

force layout

作ってみる

データの用意

データを使って、作る

tick

サンプル

最後に

SVGと、図形の描画

図形を遷移させる

サンプル

集合

本編

thincaさんによるライブコーディング

フリータイム

t-codeについて

miv

これからはじめるVimプラグイン開発

懇親会 18:10 〜 21:00ぐらい

22:00 ぐらいから ~ 5:30ぐらい カラオケ.vim

全体的な感想

次回

exampleとの差異

イベント処理の追加

ひとこと

orthographic

投影法の指定

海に色をつける

描画する

回転させる

Chapter5 Vim スクリプトを公開しよう

これからはじめるVim プラグイン開発

22:00 ぐらいから ~ 5:30ぐらいカラオケ.vim