typeof Diary

VimとかJSとか。やったことのメモ。自分のため。

遅れました

遅くなりましたが、明けましておめでとうございます。 今年もよろしくお願いします。

昨年はVimの勉強会に参加したことがきっかけで、興味が増えに増えた年でした。
振り返りと、今年やりたいこととか書いておきます。

2014年

momonga.vim、osaka.vimといったVimの勉強会に参加したりと、
少しですが社内に留まらず、外へ出るようになりました。

興味が増えに増えたと書きましたが、
エディタ好きの集まりなので、それぞれやってることが違っていることが大きいです。
これ結構書いてますね。

勉強会以外で個人的なニュースは大きく2点…

  • 家でもサンプル程度のプログラムをするようになった
  • 訳ありでPHPを書くことが少なくなり、JavaScriptを書く機会が増えた
家でもサンプル程度のプログラムをするようになった

家で全くしてなかったんですよ今まで。
で、これが結構大きくて、何かを作るってわけではなく、あくまでサンプル程度というのがミソ。
のめり込んで何か作るのもそれはそれで良いとは思いますが、
引き出しを増やすというか、これ知ってる!ちょっとかじったことある!だけでも随分違いました。

訳ありでPHPを書くことが少なくなり、JavaScriptを書く機会が増えた

2014年1月から、JavaScriptを書くことが増え、
主にグラフ、地図系を中心に触ってました。
軽く触ったのも含めてざっとこんな感じ。

グラフ関係

  • Highcharts
  • Highstock
  • dygraphs
  • jqPlot
  • Google Charts

地図関係

その他

  • D3.js
  • AngularJS

こんな感じだったかと思います。
D3, OL3辺りは少しだけブログにも書いたような。
Angularは結局触りしたまだできてない状態です。

PHPもまた…

そして、またPHPも少しずつ。
Laravelが人気っぽくて、少し触ってたり。
何かあったら書くかもしれない。

2015年

今年も昨年と変わらず、勉強会には参加していこうかと思っています。
ちょいちょいかじるのも止めず、あわよくば何か作れたら良いなぁとも。

Vimぷらぎんは、本当に何も浮かばないのが辛いところ。
あ、「不便を見つける努力をする」こんな目標でも良いかもですね。

久々の記事、終わり。(ネトゲが止まらない...)

Osaka.vim #3に参加した話

ついに第3回が開催されました。
参加者がほぼ顔なじみになってきた感があります。良いことです。 新しい顔も是非・・・(追記w)

今回はもくもく会でした。

やったこと

地名から緯度経度取得する謎コマンドを弄りました。

6月ぐらいにwebapiを使って、GoogleAPI叩いて、
地名から緯度経度を取得してechoするだけの謎コマンドを作りました。

名前もまんま、:GetLonLat
引数に地名入れると、その地名の緯度経度が取れるだけです。

単純。
そして、何に使うのか分からない...。

がしかし、地図系のプログラムを書いていると、
例えば、ここにマーカーを打ちたい!とか、
ここからここまでpolyline引きたい!みたいなことが良くあります。

そんな時に、いちいちGoogle先生に「東京 緯度経度」なんて聞くのは面倒です。

段々、「あれ、意外と使うぞこれ」と、謎コマンドの意識が変化してきました。

改良点

今までただ単にechoするだけだったので、
insertモードとかに入ると、表示が消えてしまっていて、なかなか不便してました。

  • echomsgに変えて、:messageで後からでも見れるように

次。
表示が残るようになったのは良いけど、それをいちいち手打ちするのは不便。

Vimscript力はまるでないので、ヘルプと睨めっこしながらやってみました。
これで良いのが分かりませんが、一応こんな感じ。

let lonlat = dict.Lon . ', ' . dict.Lat
call setreg(v:register, lonlat)

ここまでのイメージ。

f:id:lisia:20141026114908g:plain

ラスト。
:messageで引いてきたの見れるようになったし、いちいち打たなくてもよくなった。
だけど、別のとこの緯度経度がほしい時に、また取得しなきゃならない。
不便!!!

過去に引いたやつは何らかの形で参照できたら...

  • はじめてのunite-source

unite-sourceの書き方を写経していました。

参考記事

この辺りを参考に。
引いてきたやつを、とりあえずtxtファイルに追記してて、
readfileしてるだけなんですけど...
もっと良さげな履歴管理方法を考えないとと思います。

未完ですが、こんなイメージ。

f:id:lisia:20141026115725g:plain

wordに地名 / Lon: Lat: で表示しておいて、実際に挿入されるのが、Lon,Latの値だけとか、
できるんでしょうか。

てか、そうしたいです。

以上!!!
地図系アプリのお供に、是非。みたいにできたら良いですが、なかなか難しいものです。

まとめとか感想

前回#2から、全くvimrcも触らず、lingrにも顔を出さず、読書会にも参加せず、
Vim活がまるでできてませんでした。

全てはあいつのせいです。
基本情報技術者とかいう、あれのせいです。

という感じで、久々にVim活できて楽しかったです。
ちょっとした進捗ですけど、なんとなく、こうしたい・ああした方が…!
と、少しずつVimscript書いて、改良する楽しさ、作る楽しさが分かってきたのも大きかったです。

あ、helpと睨めっこも良いですが、せっかくの勉強会の場なんだから、
質問すれば良かった感がかなりあります。。。

次回もよろしくお願いします!!

おまけ

実は、Vimの勉強会というのは見せかけで、ハードの勉強会なんですよ(大嘘)

なぜかはじまる、Kinesisの分解の図。

f:id:lisia:20141026115510j:plain

Kinesisにトラックパッド移植したら便利。

9度目の基本情報

受けてきました。
この試験会場何回目だって感じで、行き慣れたもんです。
迷いがない。

午前

やはり過去問からかなり出ていた印象。
H20〜H21ぐらいを反復すれば、同じ問題多かったと思います。

個人的に「え?」ってなったのが、
問23の「Wh」求める問題で、何言ってんだこれ。ってなりました。
100Vとか10Aとか、見たのが中学以来だった気がします。

自己採点は 58 / 80 でした。

最後のストラテジが10 / 20とかいう悲惨なことになっていて、ここでかなり削られた印象。

午後

毎回午後は、
・時間が足りない ・ネットワーク苦手 ・文章読解力のなさ ・アルゴリズム... この辺りが発動して、最高59.5、0.5点足らずで落ちるとか、50点台という、
あと一歩!な感じの苦いことがここ最近は多かったです。

問1のセキュリティは、どっかで見たことあるようなないような内容の問題だった気がします。

選択は、問2,3,4,5と順にとりました。

問2のハードウェア、JKフリップフロップはぱっと見謎すぎて、正直理解できてないです。
勘で解いた感あります。 問3のプロセススケジューリング、かなり分かりやすかったんじゃないかと。
問4のデータベースはSQL基本的にできたら簡単だったと思います。

で、だ。
問5のソフトウェア設計。
これがなんだか分かりにくかった。
UML系の問題で楽かと思ってやってみたものの...。
ここは惨敗でした。

で、毎回お騒がせの問8アルゴリズム
残り15分でやって、無理のなんの。
本当に何度やっても苦手です問8。

ラスト、プログラムのとこの選択はもちろんアセンブラです。
これ以外とったことないです。
内容はバブルソートで、設問1のabcdはくっそ簡単だった印象。
設問2が全滅してますが、まぁ・・・。ね。

自己採点は

  • 問1: 5 / 5
  • 問2: 5/ 6
  • 問3: 4/ 5
  • 問4: 4/ 4
  • 問5: 2/ 6
  • 問8: 2/ 6
  • 問12: 4/ 6

単純計算で、12 + 10 + 9.6 + 12 + 4 + 6.6 + 13.2 = 67.4、
問題数が38で、26 / 38なので、一応6割は超えてる計算に。

問5と、問8が自信なさすぎて、絶望してたのですが、他で稼げていたようで、安心しました。
あくまで自己採点なので結果出るまで分からないですが、
これで基本情報の呪縛から解き放たれたら良いなと思いますし、二桁乗らないこと祈ります...。

【IE8】parseIntのハマりどころ

ちょっとハマってしまった事柄があったので、備忘録的なノリで書いておきます。

parseInt()

文字列の引数をパースし、指定された基数の整数を返します。

var num1 = '07', num2 = '08';

console.log(parseInt(num1)); // a
console.log(parseInt(num2)); // b

この場合、aは7、bは8と出力されますね。

…。
いやまて、本当にそうなのか???

これはあくまでChromeとかでの話。

一方IE8では

ハマったのは、IE8での出来事。

同じコードを実行してみましょう。

var num1 = '07', num2 = '08';

console.log(parseInt(num1)); // a
console.log(parseInt(num2)); // b

この場合、aは7、bは0が返ってきます。

ちなみにparseInt('09')これも0です。
parseInt('10')は10です。

解決方法

ここで重要なのは、

指定された基数の整数を返します。

指定された基数

こいつが犯人です。

var num = '08';

console.log(parseInt(num, 10)); // 8

第2引数を付けましょう。基数は10だよ!って付けてあげましょう。
期待に応えてくれるでしょう。

こんなことで30分〜1時間ハマってたなんて言いたくない。
むしろ、Stack Overflowでささっと調べるべきでした。

これを読んだ方はお気をつけください。。。

発表しながら簡単な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系の発表なら、使えるテクニックかなぁと思ってます。

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