typeof Diary

VimとかJSとか。

発表しながら簡単なDEMOをする

もう10月です。はやい...。

先日、発表をする機会がありまして、
前日まで資料に手を付けず、あたふたしておりました。
会社のPCにはOfficeあるけど、プライベートのPCにはOfficeもなく、
グーグルドライブを使うか…どうするかと考えたわけです。

結局、reveal.jsを使って資料をささっと作ってみました。

何ができるの?

HTMLと、Markdownを使ってかっこいいスライドが簡単に作れます。
非常に便利できました。

資料中にコードを書きたいときにも、<pre><code></code></pre>で囲ってやれば、
それなりに見えますし、Markdownならば、```で囲えばなんのもっと楽に書くことができます。

コードの実行結果

SlideShareなんかを見ていても、技術系のスライドには、
コードが書かれていることが比較的多いと思います。

大体、実行結果とかのキャプチャが貼り付けてあるか、
別でDEMOとして見せるかの2択ですよね。

発表しつつ、ページの移動なく、その場で実行結果をDEMOできたら…

こんなことをふと思ったわけです。
既出かとは思いますが…。

さて、reveal.jsはあくまで、revael.jsを<script>で読み込んで、
HTMLとかで書いていくことになります。

今回の発表はD3.jsの発表をしたのですが、
ここでreveal.jsと一緒に<script src='d3.min.js'></script>をしたら、
簡単なDEMOしながら、資料書けるんじゃ?

やってみよう!

f:id:lisia:20141006012626g:plain

できました。

方法

Markdownで書いている時には上手くいかず...。
かなり面倒な書き方で実現してますが、何かもっと良い方法があるかもです。

<section>
<pre>
  <code class='javascript'>
    var svg = d3.select('#demo').append('svg')
      .attr({ width: 200, height: 100 });
    // 見せたいコードを書いておく
  </code>
</pre>
<div id='demo'></div>

<script>
var svg, circle;
// 実行するコードを書いておく
svg = d3.select('#demo').append('svg')
  .attr({ width: 200, height: 100 });

circle = svg.append('circle').attr({
  cx: 50,
  cy: 50,
  r: 10,
  fill: 'orange'
});
</script>
</section>

見せたいコードと同じことを、scriptで書いておけば良いです。

HTMLなので、<button id='transition'>Start</button>みたいに、ボタンを作っておいて、 ↑と同じ感じで、

// 例えば作った円を移動させる
d3.select('#transition').on('click', function () {
  circle.transition().duration(1000)
    .attr({
      cx: 100,
      fill: 'steelblue'
    });
});

とかしておけば、ボタン押下で動作なんてことも。

気づき

気づけば、ああそうか!確かに!
となりましたが、reveal.jsでささっと資料作る時、
さらにjs系の発表なら、使えるテクニックかなぁと思ってます。

特に、簡単なサンプルを〜となると、初心者向けだとか、
基礎的なところとかを説明するのにはなかなか使えるのではないでしょうか。

AngularJSリファレンス

先日発売しました、AngularJSリファレンスを購入しました。

f:id:lisia:20140906182506j:plain

やらないと...

最近は便利なAPIが増えてきているおかげもあって、
APIからデータとってきて、何か作るということが増えてきているわけで。

むしろこれから機会も増えそう。

そこで使う言語って何よってなると、JavaScriptです。
APIからもらったデータをクライアント側で加工してごにょごにょ。

だけど、機能が増えて、ページが増えて...ってなるとかなり面倒。
(直面中)

SPAなんて言葉も出てきているし。

触っておくと

どこかで便利できそうなので、買ってしまった。
4000円超えちゃう辺りが、ネックですが、ちょいちょいやっていこうかと思います。

Osaka.vim #2に参加した話

記事書くのがかなり遅れましたが、参加したので書きます。

時間も場所も前回#1と同じです。
前回はお昼をご一緒したのですが、今回はそんなこともなかったので、大阪駅を出た時に
何か食べようかと思っていました。

まぁ、大阪で自分が食べる物といえば、ルクア大阪行って、
安定の「スープストック」なわけです。

お昼時なこともあり、人がそれなり多く...。
カレーセットにしました。

だがしかし、待てど待てど出てこない。
注文通ってなかった...。
間に合うか間に合わないか分からん状態になりましたが、なんとか間に合いました。
間に合い力。

と、前置きはここぐらい。

本編

自己紹介

今回は13名。
まさかの女性Vimmerもいたりしたので、これからどっぷりVimに浸っていってもらいたいですね。
大半は#1の参加者だったり。

回数重ねる毎に、顔なじみになりそう。

初心者講座

iyuuyaさんによるVimの初心者講座。
資料はこちら

ちょっとずつ理解するというのは本当で、
Vimやってみよう!と思っても、挫折する人の大半は、一気に使えるようになろうとするのも、
一つの原因かもしれません。

正直、自分なんて全然で、.vimrcは汚いは、コピペで意味分からずやってる...
ってのが多く、そろそろ本腰入れて、覚えていかないとなぁ(ずっと言ってる)と思ってるわけです。

真似しちゃいけません。

実は知らないことが結構あって、「ほー」と思いながら聞いてました。
REPLACEモードなんて、あるのは知ってましたが、使ったことなかったです。

もくもく

前回はやること決めずに行ったのがまずかったので、今回はVimスク本の写経してました。
感想でも書きましたが、サンプルが面白いので、写経してても飽きない不思議。

途中は、Kinesisの試用会みたいになってました。
写真では見たことがありましたが、実物を見るは初めてで、正直感動。
実際に使っているところを見ると、本当に腕が動いてなくて、慣れたらこれは便利できそうだと感じました。
試すにはちょっと値段的リスクが大きいですが。。。

そんなこんなで、もくもく終わり。
前回は時間ギリギリでしたが、時間通りに片付けも終わり。
良い感じ。

懇親会

近くのお店で懇親会。

サバの煮付け美味しかった。のは良かった。

ここで、約数名はミスをした...。
定食を頼んでしまった。

生姜焼き定食美味しかったです!!

3テーブル確保して、1テーブルが完全に飲み状態、他は早めにお冷-!な状態でした。
その1テーブルの話題がなかなか濃くて、
話題としては、Pマークのこととかいろいろ。

「例えば100万あげるから、やりたいことやって良いと言われたらやる?」
こんな感じの話題とか。

反射的には、「やらない」に向きますが、
「なぜやらないのか」を考えると、「ミスしたときのリスク」これしか浮かばなかった。

でも、別に失敗しても成功しても、予算もらえて、やりたいことできるなら、
やってみる方が良いかもしれない。

プログラマに迷惑かけないデザイナ

あと、「プログラマに迷惑かけないデザイナになりたい」というニュアンスのことを言っていた方がいて、
これについては、自分たちも同じで、「デザイナに迷惑かけないプログラムしなきゃ」となるので、
なかなか大切なことです。
デザインって、色味とかのセンスもいるし、フォントとか、配置とか...。
大体、これでいいわ!ってなりがちだけど、後のことを考えるとそれじゃいけないよなと思ったり。

デザインも少しかじっておくと良さそうですね。

恒例?トランプマジック

iyuuyaさんのトランプマジックのタネを見破る会。

結果、種明かしまで見破れない。
明かされても見えない。

Kinesis撮影会

終わりかけに、Kinesisの撮影会みたいな...。
様子は写真で。

f:id:lisia:20140823223722j:plain

f:id:lisia:20140823223733j:plain

Karaoke.vim

今回はお酒も飲んでいたし、次の日もちょいとやりたいことがあったので、帰らせていただきました。。。

感想

3回目のVim勉強会参加でしたが、やはり同業他社の方との交流は良いですね。
これもずっと言ってますが、あくまでテキストエディタの勉強会なので、やってることが本当に様々。

Osaka.vimは入力への拘りがある人が多い印象。
今回はKinesis、前回は無連想式漢字直接入力

次回は何が出てくるのでしょうか。

あと、思ったのがRubyやってる人が多いなと感じます。
Rubyも機会あれば触りたいところ。

それでは、#3でお会いしましょう。

OpenLayers3用のリポジトリ

OpenLayers3用のリポジトリを作った。

ol-sample

印象

OpenLayers2と比較して、なんだかとっつきにくい印象。
まだ深く触っていないからというのもあるけど…。

前にQuickStartだけ触った記事を書いたけど、完全に内容忘れてた。

OpenLayers3をここからダウンロードして始めるのが正解。
こっちをやると、ファイル多すぎてうわあああってなるので、注意。

実際やったんですけどね!w

とっつきにくいとは言ったけど、OpenLayers2に関しても、
慣れるまでは時間がかかったから、3も慣れるまでの問題だとは思います。

ちょいちょい触りながら、exampleも沢山あるので、サンプル追加していけたらと思います。
探してみると、まだまだOpenLayers3関係の記事は少ないようで、
OpenLayers3と検索すると、ここのしょーもない記事が引っかかるような状態。

今なら間に合う!!

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

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 テクニックバイブル ~Vim使いの魔法の杖

yosemiteでGoogle日本語入力!

お久しぶりです。
ついに提督業を始めてしまいました。
霞ちゃん良いです。黒潮ちゃんも良いですね。
羽黒ちゃんが出なくてつらみを感じています。

さて本題。

Yosemite

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

  1. Better TouchToolがあああ
  2. じゃねったーがああああ
  3. Homebrewがああああ
  4. Google日本語入力がああああ

などなど。。。

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

Google日本語入力

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

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

Google日本語入力開発版

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

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

その他

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

D3.jsのforce layoutで遊ぶ

前回は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読むのが一番かなぁと思っていますが、
きの基本形覚えてしまえば、いろいろ応用が利くはずです。

サンプル

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

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

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

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

最後に

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

今度は何をしよう。。。