Ruby – 配列のループでインデックスを得る

PHPのforeachとかは配列をループするとindexとvalueが得られる。Rubyでも同じことをしたい場合はwith_indexを使う

result.each.with_index do |value,index|
puts index + 1
end

さらにindex + 1はコードを書いていればよくあることだけど、with_indexに開始番号を与えることができる

result.each.with_index(1) do |value,index|
puts index
end

やっぱRubyはコードが見やすく無駄を省いてくれる所が賛否両論はあると思うけど私は好きだよ。

Ruby – HashをYamlに変換する

yamlっていうgemを使えば簡単にいける

require 'yaml'
categories = {
'hoge' => 'test',
'hoge2' => 'test2',
'hoge3' => 'test3'
}
puts categories.to_yaml

実行するとこうなる

$ ruby test.rb
---
hoge: test
hoge2: test2
hoge3: test3

PHPyaml出力しようと思ったらPECLyamlを入れる必要あるみたいで、Macでインストールするのどうするだって調べててイライラしてきて、Rubyで書いた。でも個人的にはみんなが触れるPHP推しではあるw

JavaScript – Googleスプレッドシートの貼り付け機能をもし実装するとしたら

GoogleスプレッドシートってJavaScriptで大半の動作を処理しているんだと思うんだけど、ホント凄いよね。コピーペーストが…と思ったけどcopy、paste、cutに対してイベント付与できるからイベント実行されたら現在のセルの位置を取得してってやればいいだけなのか。

クロスブラウザ対応しようと思うとあれだけど、keyupとかいろいろ対応方法はありそうだ。既存の凄いサービスの機能を作るならどう実装するかってのを考えるのは頭の体操にもなるし、新しい技術を調べようと思えるのでいいな。後でGoogleスプレッドシートに似たサービスを開発するような時が来たら思い出せるように書いておいたw

Python – ファイルを作成する

index.htmlというファイルを作成し中身に指定した文字列を追加する

# -*- coding: utf-8 -*-
f = open("index.html", "w")
f.write("書き込みます")
f.close()

再度実行しても同じ内容になるので追記ってわけではない

一時的なリダイレクトは307 Temporary Redirectを使う

いや今日見つけたんだけど307 Temporary Redirectっていうのが定義されていたんだな。よく一時的なりダイレクトで302リダイレクトを使っていたようがきがするけど、あんま良くなかったなあ。今後は307リダイレクトで覚えておこう。

昔メンテナンスか何かで一時的にリダイレクトしたいからって302リダイレクトを使っていたような気がする。503 Service Unavailableを出してメンテナンス画面を出したりとか。でも最近はサービス提供側のクオリティが上がってサービスを停止させずにコンテンツを提供し続ける感じになったのでこれらのエラーやリダイレクトが不要になっているな。すげー時代になったもんだ。

JavaScript – 要素に対するclickイベントを付与する技いろいろ

私いままで要素に対するclickのイベントの付与はこういう風にするしかないと思ってた。この方式の場合、後から書きだされた要素などにはイベントが付与されない。あくまで現在存在する要素のみに対してイベントを付与するものになる。

Array.prototype.forEach.call(document.getElementsByTagName('img'), function(img) {
img.addEventListener('click', function() {
alert('click! src is "' + img.src + '"');
}, false)
});

しかしclickイベントが動いた時ってevent.targetには実際にクリックされた要素が入ってくるわけ。つまりaに対してclickイベントを付与した場合で、aの中にimgとかあったらevent.targetにはaが入ってくるのではなく、imgが入ってくるw

だから後から書きだされたimg要素に対してもイベントを付与したい場合はimgが入ってくるエリアとか、もしくはbody全体のclickイベントを監視して、event.targetがimgだった時だけ処理を実行するものを書けばいい

document.getElementsByTagName('body')[0].addEventListener('click', function(event) {
if (event.target.nodeName === 'IMG') {
alert('click! src is "' + event.target.src + '"');
}
});

imgだったら常に最後の要素だからいいけど、a要素とか中に何かを内包する要素だとaをクリックしてもevent.targetの中身はimgとかになるので、祖先を追っていってその中にa要素が存在するかどうかを調べて存在すればイベント実行みたいな処理も必要になってくるだろうな。あとevent.targetはなんかのブラウザで空っぽだった気がするのでevent.toElement辺りも同時に見たらいいかと思うw

jQueryでのcreateElementの書き方

JavaScriptでいう所の以下のようなコード

var element = document.createElement('div');

jQueryならこんな感じ。せっかくjQuery使っているならjQueryの作法に習いたいねw

var $element = $('<div/>');

ちなみにこんな書き方もできる

var element = document.createElement('div');
var $element = $(element);

普通のelementNodeをjQueryに渡すことができる。だから他のライブラリとかからelementNodeもらったりとか、event.targetからelementNode取り出したけどjQueryですぐに扱いたいって時はこれを使おう

Vim – バイナリを開き編集する

Vimでバイナリを編集できるようだ。ファイルを開いて以下コマンド実行

:%!xxd

すると変換されてこうなる

0000000: 4749 4638 3961 0100 0100 80ff 00c0 c0c0  GIF89a..........
0000010: 0000 0021 f904 0100 0000 002c 0000 0000  ...!.......,....
0000020: 0100 0100 0002 0244 0100 3b0a            .......D..;.

バイナリを編集することなんて滅多にないが確認する程度はたまーにあるからこういう術があるって覚えておこうw