ハブろぐ - havelog.ayumusato.com のフィード

gas.jsというGoogle Analytics用スクリプトを書いた

あほむ — Wed, 16 May 2012 11:16:21 +0900

ダウンロード・ソースコード

Github: ahomu/GAS

MITライセンスです。色々とご自由に。

より身近なイベントトラッキングを提供

メインフィーチャとして、gas.jsはイベントトラッキングをより身近にしてくれます。

従来のイベントトラッキング

Event Tracking Guide - Google Analytics — Google Developersより

Play

onclick属性とかつらい！不思議なスペルが目に痛い！！

よくよく見ればVideoをPlayして、それがBaby's First Birthdayなのは、なんとなく分かるけど_trackEventメソッドの引数の順序なんですよこれ。やっぱり色々つらい。

gas.jsのイベントトラッキング

そこで、gas.jsを入れるとこうなります。

Play

属性でスッキリ書ける！なんかHTMLっぽい！！！

onclick属性は書きませんし、引数の順序だって覚えなくても大丈夫です。順不同で必要な分の情報を書いておけば、それでバッチリOK。

これはVideoに関するイベントで、Playというアクション、そしてラベルはBaby's First Birthdayだ〜〜〜。という具合です。

オプションで属性名は変更できるので、名前空間をつけて衝突回避することもちゃんとできます。

つかいかた

どえりゃー簡単です。

基本

通常はこれだけでOK

GA公式のスニペットの代わりに、HEAD要素の一番下あたりで下記のように読み込めばOK。

for 玄人

玄人の方々には、下記のようなオプションもご用意しております。

その他の機能・特徴

全体的には、なるべく最小限で収まるようにしているため非常に小規模です。

ライブラリ非依存かつ、2.0KBの小粒ファイル

minify後のファイルサイズを2.0KBと小さく収めてあるので、他のスクリプトに混入させてもサイズ面で気になることは（そんなに）ありません。また、jQueryなど特定のライブラリに依存していないので、どこでも利用できます。

今後、3.0KBぐらいまでは行く気もしますが…。

外部リンクのイベントトラッキング

リンク先のドメインが、表示中ページのドメインと異なる場合、Outbound Linkとして自動でイベントトラッキングをします。

Category: gas:Outbound
Action: リンク先URL
Label: リンク先URLのホスト

初期化時に、trackOutboundをfalseにすることで無効になります。

ページビュートラッキング

かつてイベントがコンバージョンに設定できなかったような頃の名残で、ページビューについても属性指定でトラッキングできるようにしています。

資料ダウンロード

スクリプト制御用のAPI

（玄人向け）

clickイベントのバブリングをdocumentで待ち構えているので、attachEvent的にreturn falseとかされるとIEで辿り着けなくなってしまいます。

安易にA要素に機能的イベント貼って、jQueryでreturn falseしちゃうぜゲヘヘ的UIとは相性がよくありません。そんなときは、下記のメソッドをスクリプトから叩いてあげてください。

var gas = new GAS('UA-xxxxxxx-xx');

...

// track as a pageview
gas.trackPageview('/your_optional_path.html');

// track as an event
gas.trackEvent('MusicPlayer', 'start', 'hogehoge');

とはいえ、IE用のソリューションは何かしら用意する予定です（自分が困るから）。classで目印つけて対象の要素に直接attachEventし直すしかないですかね〜。このへんは、onclick属性のほうが合理的かも...。

おねがい

いろいろおしえてください

こういう風のほうがいいよー、ってあったらおしえてください
同種のスクリプトがすでにあるときもおしえてください
issueとかpull requestでもだいじょうぶです

あんまり多機能にする気はないのですが、GAのノウハウとか不勉強な状態なのでなにとぞ！

余談

週末に本格的に書いてみて、週明けの計測結果みてからの公開でした。

Google AnalyticsでデキることをHTMLに落とし込むことで、何かしら広がる可能性もあるんじゃないかと思って書いてみました。実際に自分の手元でも、コレでdata-event="foo" data-action="bar"でテキトーに計測してみようと思います。

スクリプトを書いたり入れたりすることが多い身としては、ページビューに対してアコーディオンやタブのクリック率ってどんなんだろ？みたいな現実も知りたい次第。

Google Analyticsのことをスクリプト面で勉強中

あほむ — Sun, 13 May 2012 17:01:46 +0900

Google Analyticsのこと

大概のことは、Tracking Basics (Asynchronous Syntax) - Google Analyticsに書いてあるので、これを参考にすればよい。キャンペーンとかマルチドメインなどなど掘ると深そうなので、今回は下記の基本になるグローバルオブジェクトほか基本的なトコだけ。

制作系はそもそもあんまり興味が無さそう
GAの公式コードが魔法のスニペット状態
正直自分もスクリプト面であんまり興味もってなかった
専任でもなければ、解析につぎ込む時間は限られる
簡単に程ほどでやれたらとりあえずOK

こんな偏見とイメージに基づいて目標は、_gaq.push(['_trackEvent', 'category', 'action']);のようなコードをonclick属性に書かずにイベントトラッキングできるようにして、専任でない層が興味を持てるような手段を提供すること。というか自分がそうしたい。

「簡単にできるなら試してみようかな」的ハードル下げをしたいという話です。簡単なところで触っておかないと、より詳しい解析ニーズの発掘とか対応とかできませんしね。

重要なグローバルオブジェクト

_gatと_gaqが重要というかコア部分になるようです。＆プラスアルファ。

global._gat

_gat Global Object

pageTrackerオブジェクトの生成をしてくれる。直接呼び出すことはほとんどなさそう。_gat._getTrackerByNameは、もしかしたら必要になることあるかもしれない。

global._gaq

_gaq Global Object

pushメソッドを通して非同期トラッキングのゲートになってくれる。ga.jsが初期化されるまではArrayとして存在するが、その後は中身が入れ替わるため、後からpushメソッドを通してアクションが登録されても実行される。

global._gaUserPrefs

Google Analyticsのオプトアウト用Extensionがそうですが、下記のように_gaUserPrefs.iooがtrueを返すように仕込むとトラッキングが行われません。

window._gaUserPrefs = {
    ioo: function() {
        return true;
    }
};

_gaqについて

_gaqの挙動がよいです。グローバルの_gaqに対するpushメソッドの実行時に、ga.jsが初期化前であればただのArrayとしてキューをため込み、初期化後であればオブジェクトが引き継いでトラッキングを実行してくれます。

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxx-x']);
_gaq.push(['_trackPageview']);

// この時点では _gaq はまだArrayである
// typeof window._gaq === 'array'

(function() {
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

// ga.jsが読み込まれて初期化されると _gaq はObjectになる
// typeof window._gaq === 'object'

_gaqがObjectになった後のpushメソッドは、Arrayではなく_gaqのprototypeがもつpushメソッドです。Arrayだった頃の_gaqが持っていたキューは、ga.jsの初期化時に実行されて、以後は_gaqは独自のオブジェクトとしてpushメソッドを通してトラッキングの実行を待ちます。

諸々メモ

非同期トラッキングするなら、すべてのメソッドは_gaq.pushを通して実行すればok
Outbound Linkのように必ずA要素の画面遷移が発生するようなケースでは、非同期トラッキングが行われる前に遷移してしまうケースがある（稀？要検証）
Page Trackerは、http://www.google-analytics.com/__utm.gif につづくGETパラメータでトラッキング情報を送信している
大分前に調べたときコンバージョン設定するには、pageviewとしてトラックしなければいけなかったような気がするけど、少なくとも今はイベントでもOK
Outboundとの比較で、同一ドメイン内でのリンク遷移っているイベント欲しいかしら？
結構、deprecatedなメソッドがあるので今後も入れ替わりはありそう
クロスドメインのことはまた今度
キャンペーンとかもまた今度

次回

Googleの直営ページで見かけるautotrack.js（minifyされてるけど）を解析した結果についてなんぞを。微妙に何かを再発明してしまったんじゃないか疑惑と共にお届けするかもしれない。

Sublime Text 2を使ってみたら思ったより良い

あほむ — Fri, 11 May 2012 17:58:34 +0900

Sublime Text 2（Mac版）

使ってみたら思ったより良かったので、設定メモを残しながらブログにしてみる。

Sublime Text - Download

Sublime Text 2

特徴

Vimキーバインドに対応
拡張がPythonで書かれてる

PyよりRuby、VimよりEmacsな自分とは縁遠かったはずなのですが…。

入力補完が優秀（WebStormほどではないにせよ）
デフォルトのショートカットがわりと自然（個人の感想です）
画面のスプリットができる
設定画面をもたないが、JSONをいじれば徹底してカスタマイズできる
パッケージを入れて機能を増やせる
右サイドのミニマップおもしろい
Goto Anythingべんり（個人の感想です）

海外では結構な人気らしく、たしかにパッケージも豊富でよいです。

同意

テキストエディタの挙動とvimの挙動がうまいこと両立しててなんちゃってvim使いの僕には嬉しいです
— Yoshiaki Sugimoto (@sugimoto1981) May 11, 2012

vim使ったことないですけど、自分にとってはvimをemacsに置き換えるとニュアンスで共感しました！それぞれの良いトコ取りなバランス感覚が手に合う気がしています。使っているとChocolatも脳裏をよぎったり。

入れたパッケージ

はじめにPackage Controlを入れた上で、あとはツラツラとそれらしい単語で漁ったりして入れました。いざリストアップしてみると、色々な傾向がバレますねコレ。

Package Control
SublimeCodeIntel
HTML5
Backbone.js
Jasmine
jQuery
Git
SFTP（$16）
LESS
LESS-build
Sublime Tweet
SublimeLinter
Bracket Highlighter
Terminal

パッケージ類以外の諸々

パッケージをポコポコ入れていく以外にも、いくつか見栄えなどを変更しています。やっぱり、見た目は小綺麗なほうがやる気でるので。

テーマの変更

buymeasoda/soda-theme

デフォルトのテーマよりもディティールが良くなります。このテーマにはDarkとLightがありますが、自分はエディタ部が暗色背景派なのでテーマもDarkを選択します。READMEにある手順通りでインストールできます。

アイコンを変更

dmatarazzo/Sublime-Text-2-Icon · GitHub

デフォルトのアイコンが残念ながらあまり好きでは無かったので、上記のアイコンと差し替えました。ターミナルからopen /Applications/Sublime\ Text\ 2.app/Contents/Resources/でディレクトリを開いてicnsファイルを上書きすればok。

CLI

OS X Command Line - Sublime Text 2 Documentation

CLIからSublime Text 2にファイルを開かせたりします。使うかどうか怪しかったですが一応シンボリックリンクをぺたり。オプション類など詳しくは、リンク先を参照のこと。

Dropboxで設定共有

Use Dropbox to store your Sublime Text 2 settings, themes and plugins — Stofke on wheels

会社PCと私用PCで設定を共有したかったので、Dropboxに色々ファイルを移してシンボリックリンクで同期させました。dot filesの類もそうですがDropbox+シンボリックリンクの運用は便利です。

Settings

デフォルトで使いつつ、気になったところをちょこちょこ変更しています。

{
     "auto_indent": true,
     "color_scheme": "Packages/Color Scheme - Default/Rhuk.tmTheme",
     "detect_indentation": true,
     "font_face": "Bitstream Vera Sans Mono",
     "font_size": 14.0,
     "ignored_packages":
     [
          "Vintage",
          "ZenCoding"
     ],
     "indent_to_bracket": true,
     "rulers":
     [
          70
     ],
     "smart_indent": true,
     "tab_size": 4,
     "theme": "Soda Dark.sublime-theme",
     "translate_tabs_to_spaces": true,
     "use_tab_stops": true,
     "wrap_width": 70
}

Key Bindings

Ctrl+Shift+█の組み合わせが多いですが、他と競合しないショートカットを狙っていったら自分のデファクトになってしまった設定です。PhpStormとかも同様の設定が多い。

[
     // Terminal
     { "keys": ["ctrl+shift+t"], "command": "open_terminal" },

     // Twitter
     { "keys": ["ctrl+shift+t"], "command": "tweet" },
     { "keys": ["ctrl+shift+c"], "command": "read_tweets" },

     // Sublime refresh
     { "keys": ["ctrl+super+r"], "command": "settings_refresh" },
     { "keys": ["ctrl+shift+r"], "command": "refresh_folder_list" },

     // Sublime edit
     { "keys": ["ctrl+w"], "command": "find_under_expand" },
     { "keys": ["ctrl+shift+d"], "command": "duplicate_line" },
     { "keys": ["ctrl+shift+p"], "command": "auto_complete" },
     { "keys": ["ctrl+shift+p"], "command": "replace_completion_with_auto_complete", "context":
          [
               { "key": "last_command", "operator": "equal", "operand": "insert_best_completion" },
               { "key": "auto_complete_visible", "operator": "equal", "operand": false },
               { "key": "setting.tab_completion", "operator": "equal", "operand": true }
          ]
     }
]

参考

Underscore.jsのtemplate触ったメモ

あほむ — Wed, 02 May 2012 11:11:21 +0900

Underscore.jsのtemplate

以下、Underscore.jsが1.3.3当時の情報です。

template _.template(templateString, [data], [settings]) Underscore.js Utility template

Backbone.jsを試すついでに、Underscore.jsについてるtemplateを試してみました。他のテンプレートライブラリ持ち込んでくるのも億劫だったので。

こんな文字列を適当に用意してvar compiled = _.template(tmplString);とすれば、コンパイル済みのテンプレート関数が作られるのでvar output = compiled({data: なにか})で処理させて出来上がり。普通ですね。

構文の種類

評価部 evaluate（<% ... %>）

普通にJavaScriptとして評価させる部位に使います。手軽ですけど、この評価部で何とかする系は、ノンエンジニアに易しくないので普段の業務だと使いづらいかも。

<% _.each(collection, function(row) { %>とかになります。

変数挿入 interpolate（<%= ... %>）

変数を単品で書き込むと、テンプレートのそこに出力されます。この書き方だとエスケープされずに生々しい値が出力されるので注意が必要です。

わたしのなまえは<%= row.name %>です。とか。文字列連結ですね。

エスケープ挿入 escape（<%- ... %>）

変数挿入と使い方は同じですが、こちらはエスケープされます。エスケープ用の関数には、_.escapeが使われています。

// Escape a string for HTML interpolation.
_.escape = function(string) {
  return (''+string).replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"').replace(/'/g, ''').replace(/\//g,'/');
};

テンプレート構文の変更（正規表現の差し替え）

ERBライクな構文が気にくわなければ、_.templateSettingsで、正規表現を上書きしてあげれば変更もOKです。下記は本家のサンプルコードから拝借しています。

_.templateSettings = {
  interpolate : /\{\{(.+?)\}\}/g
};

var template = _.template("Hello {{ name }}!");
template({name : "Mustache"});
=> "Hello Mustache!"

種類は前項で紹介した、evaluate・ interpolate・escapeの3種類で、デフォルトは下記のようになっています。

_.templateSettings = {
  evaluate    : /<%([\s\S]+?)%>/g,
  interpolate : /<%=([\s\S]+?)%>/g,
  escape      : /<%-([\s\S]+?)%>/g
};

モバイル用に:targetや:checkedでつくるPure HTML5/CSS3なアコーディオンについて（追記 :checked版でAndroid4.x対応の改良コード）

あほむ — Sat, 28 Apr 2012 22:24:02 +0900

Pure HTML5/CSS3のロマン

ただしモバイルデバイスに限る。

しばしば話題にあがるHTML5/CSS3による気合戦法のアコーディオン（ないしクリッカブルなパーツ）を、モバイルデバイスでの動作をiOSおよびAndroidを中心に記述・検証してみました。

今のところメジャーなのは、:target戦法と:checked戦法だと思うので、それぞれ試しています。これらの擬似クラスを使って、状態制御を行いつつセレクタで表示状態のスタイルを適用します。

:target戦法

:target擬似クラス+アンカーリンクで状態を制御しながら、子要素としてコンテンツを表示させる方法。わりと手軽に使えるので、使い所さえ選べば良いのかも。

サンプル

コード全体










    Pane1
    
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    


    Pane2
    
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    


    Pane3
    
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

欠点

アンカーリンクを使っているため、アンカーの表示対象が画面内におさまっていないとページ内リンクとしてスクロールが発生します。スマートフォンのような限定的な解像度でスクロールが発生すると表示がトビます。さらに、transitionを使おうものなら、transitionEnd前にスクロールが発生してしまうためスクロール位置もひどいです。

実用性は高くありません。これなら素直にJSでクラスのadd/removeでトグルしたほうが良いでしょう。もちろんアニメーション部分は、使えるブラウザならCSSで表現すれば良いと思いますが。

:checked戦法

:checkd擬似クラスで状態を制御して、間接セレクタを利用してbody部分の表示・非表示を制御します。ブラウザの実装さえ追いつけば、わりと有力なのでは。iOS用にlabel要素のポインターイベントをonclick属性で励起させています。めんどい。

サンプル

コード全体










Pane1

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.



Pane2

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.



Pane3

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

欠点

:checkedのpseudoは、モダンブラウザであれば対応しているはずですが、IE6-8やAndroid4.x未満で非対応です。挙動は悪くないのですが、ブラウザ要件がデスクトップ・モバイル共に厳しめなのが実用性を乏しくしています。

と言ってたら更に、Android 4.0.3のエミュレータで見てみたら:checkedと間接・隣接セレクタの組み合わせに問題（参考）がありました。

冗長になるので上のサンプルには反映させませんでしたが、次項のようなコードであれば上記の問題を回避して、iOSと同様の動作が得られます。事実上、iOS5.xとAndroid4.xに対応した:checked戦法の改良版です。

:checked戦法の改良版（Android 4.x対応）

:checked + div { font-size: inehrit; }あたりがおまじないです。これで隣接div内のスタイル描画更新が発生するので、中のlabel要素やコンテンツ部分のdiv要素にもスタイル更新が届きます。











    Pane1
    
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    




    Pane2
    
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    



    Pane3
    
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

参考

Android4.0.3（エミュレーター）の標準ブラウザで:checkedと間接＆隣接セレクタが挙動あやしい

あほむ — Mon, 16 Apr 2012 09:22:39 +0900

:checkedの状態変化に、続く間接セレクタが追いついていない

前置き。あいにく手元に、4.0.3のAndroidエミュレーター（Mac）しか無いため、実機での挙動がどうなのかは未検証です。話半分ぐらいでお願いできると(；´Д`人

で、現象としてはチェックボックスやラジオボタンでcheckedを付けたり外したりしたときに、:checkedと間接＆隣接セレクタによるスタイルの適用がおかしい感じ。

サンプルコード









  チェックチェック！
  blue/yellow
  red/silver

実行するとこんな感じ

:checked + #firstと:checked ~ #firstはOKでした。

しかし、:checked + #first + #secondと:checked ~ #secondはNG。要素間の距離があると、:checkedの状態変化に追いつけていないようです。

:checkedな要素と隣合っていれば、間接セレクタ・隣接セレクタともに可
:checkedを基点に、隣接セレクタで2つ以上の要素をつないで捉えるのは不可
:checkedを基点に、間接セレクタで2つ以上離れた要素を捉えるのも不可
ページロード時に、最初から:checkedな状態であればすべて正常に動く（下記）

最初からcheckedなら大丈夫

HTMLで最初からchecked属性を付けておくなどして、ページロードされた時点ですでにcheckedであれば、すべてのセレクタが期待通りに動作しているようです。

あと、querySelectorから同じセレクタで要素を捉えようとする分にも、問題なく動作します。単純に、スタイルの描画更新が2つ以上離れた要素に伝播してくれてない感じでしょうか...。実機だとしれっと動きそうで深入りしたくない。

だれか実機(で試して)ください！

追記：とりあえず回避はできそう。:checkedと隣接するようにdiv要素で#first, #secondをラップして、:checked時に隣接させたラップ用div要素のスタイルも変化するようにしてやれば、中の#firstと#secondもスタイルの描画更新が起こって期待通りの動作に矯正できる。

追記２：ドコモショップで実機Galaxy Nexusを確認したら、同じ挙動でした。今回のは標準ブラウザの話で、Chromeのほうは大丈夫。

LL言語と学習方針（2012年度）

あほむ — Wed, 11 Apr 2012 23:10:04 +0900

学習方針

このエントリは、去年のLL言語と学習方針を考えてみたから続く去年度から今年度、そして来年度へのつなぎです。

"LL言語"が頭痛が痛い重複表現なのは昨年から既知ですが、LLとだけ書いてもしまりが悪いので、LL言語で通します！

2012年度

去年度は言語中心の学習目標でしたが今年度は、

言語学習お休み！！

にしようかと考えています。どちらかというと、TDDとかリファクタリングとか、そっちの方面を埋めていこうかと。

延々と力任せに書けるほどプログラミング脳が強くないので、開発手法のアップデートによってエラーを減らしつつ、トータルの回転速度を効率良くするしか無いかな〜、という結論に。

ということで今年は

TDD
リファクタリング
プロダクト作ってみる

以上の3つを目標にしてみます。達成する前にも後にも、業務的には評価されづらそうな地味路線なのでアレですが。||| orz

TDD

JSにせよPHPにせよ、テストは先に書かないと非常にしんどいという所までは理解できたので、テストを先に書くよう一層心がけたい所存。

JasmineでDOM操作やら、PHPUnitでデータベース操作やらなテストを書くこと自体は、なんとなく出来るようになっているので、次のステップはテスト駆動の開発に自身を矯正すること。

さらっと書くに留めてますが、これを身にできるかどうかが今年の重要ポイントかな、と。

リファクタリング

業務上、かれこら3年ほど継続的にメンテナンスを行っているコードがありますが、それらをテスト不能なレガシーコードから、部分的にでもテスト可能なコードにリファクタリングすることが目標。レガシーコード改善ですね。

（言い訳ですが）去年の業務は、手に負えないバグを産まない・サポートコストを発生させない・現在の機能を壊さない、というためにコードを変質させないことを最優先にしていました。とはいえ、ビジネス上はそうも言ってられず機能は増やしてナンボで、コードも複雑化してナンボなわけで。そんな製品を思い切って手を加えて、安心して改修できる状態に持って行けたら良いな、と。

実際、根本的に改修しないとマズい脆弱性は容赦なく見つかり、いくらコアコードを変えたくなくても機能を足してバージョンアップを営業しなくてはならず、今の体制でさえ何時までもは続けていられないという現実がありました。

何かと、守勢に回るのも限界ということもあり良い機会と思います。

何かプロダクトを作ってみる？

やろうと思いながら全然身にならないので、Webサービスとかアプリとかを一人でシコシコ作る性癖はあんまり無いのだろうと自覚してきています。

が、それも踏まえて今年の目標にしてみて、何も目覚めないようなら来年以降は、そういう方向性はバッサリ斬り捨ててコトを進めていこうかと思ってます。自分の中からモノを生み出すことより、学んだことを実践したり業務に反映したりとかのほうが好きなのかも。

目標にするからにゃ、なんかネタ考えたい。一人で作るの自体もしんどいのよね…。

とはいえ言語もちょっとは

新しい言語を習得したりとかは消極的ですが、ちょいちょいと。

JavaScript

NodeとかTitaniumとか、ブラウザ以外のJavaScriptを書きつつ何ぞ作ってみたい。MVCフレームワーク類も少々手を出してみたい。新しいモノ好きのノリで追いかけてるうちに、一度ノリを掴んでおいたほうが自分的に学習がラクそう。

PHPとRuby

ごっちゃですが、サーバサイドを書くことがあればいずれかの言語かなぁ、という所ですね。今更PHPのフルスタックをやるぐらいなら、素直にRailsやるよって感じなので業務以外でWebアプリケーション書くことあればRailsないしSinatra（& Padrino？）あたりでしょうか。

贅沢

目標というか希望というか、フロントとかサービス自体を作り込める仕事してみたいですね。

それを踏まえても、現状の受託開発＆バックエンド縛りなポジションはそろそろ軌道修正したい。その為にもアニメーション系処理の苦手を解消しないと(；´Д`)

動きが派手なだけの妄想UIとか、意味があるのか謎な大判バナーとか、いろいろ嫌いなアニメーションものは多いですが、イザというときには複雑なモノでもサラっと作れる地力は欲しい。

あとは振り返り

一年前は、PHP・JavaScript・Rubyに言及していましたが、実際はどうだったかということについて。

昨年のPHP

例外脳・ユニットテストの実践、いずれも失敗しています（うわぁ）FWでいうならSilexにちょっと触れました程度。目の前の既存プロダクトに倣った書き方からうまく脱却できなかった感が強くて残念な仕上がり。

昨年のJavaScript

自分の中で、JavaScriptはPHPの代わりに躍進を果たしました。ClayworksやHayateとかの自作を通して、jQueryが明日滅びても闘っていける程度の見識は得られました。ブラウザ以外ではnode○　Titanium△といったところ。

昨年のRuby

Padrinoを触ったのが画期的なぐらいで形にならず終わって、他はあんまり…。あ、でもご飯ネタ専用ブログを作ってみるのはアリかも。

2012年度がんばるぞ

色々あって出鼻挫かれつつ（後述）、今年度もがんばります。

直近では大なごやJSとかやりますし、他にも裏でコツコツ進めていることが別にあったりするので、みなさまどうぞよろしくお願いします。

（蛇足）

今年度に入ってもっと早めに記事を書くつもりが4月入ってすぐに体調不良に見舞われて、ブログ書く余裕なくなってました(´・ω・｀)

風邪っぽい諸症状を網羅しながら37〜38度の熱が引かず、まるまる1週間臥せってました。まだ体力は戻ってないですが、とりあえず熱下がったのでよし。

鶏モモのさっぱり煮

あほむ — Wed, 04 Apr 2012 09:22:07 +0900

鶏モモのさっぱり煮

いよいよご飯ブログになっている...鶏のモモ肉が安かったので、醤油と酢でさっぱり煮。ゆで卵の仕上がりは良かったが、火を入れすぎたのか肉がほんの少し固くなってしまった。

お夕飯の光景

野菜中華スープ・茄子の煮びたし・キムチ

この日は食生活の乱れから野菜不足が気になっていたので、茄子と野菜スープを付け合わせて、多めに野菜を摂取できるようなメニューに。茄子の煮びたしが好評。茄子には、ちょっとごま油入れるとよく合いますね。

そろそろ、ご飯ネタを他のブログに分けようかな〜、とも思う次第ですがくらげごはん。に憧れるとコンテンツも外観も追っつかないです^q^

kanazawa.js v1.7 にいってきました

あほむ — Tue, 03 Apr 2012 18:32:31 +0900

kanazawa.js v1.7 - Back to Basics -

個人的な興味と視点で偏ったレポートですが、先週末の。

東茶屋街

先週の土曜日に、kanazawa.js v1.7 Back to Basicsに遠征してきました。地元の名古屋にJS関係でこの規模の勉強会とコミュニティは無い（よね？）ので、とても憧れる次第。こと勉強会に限って述べれば、むしろ東京のユートピア感がハンパないですが･･･、それはさておき。

さらっとメインセッションとミニセッションの感想についてと、多方に思いを馳せながら地元の勉強会コミュニティについて所感を。

詳しくは、kanazawa.js v1.7 – Back to Basics – 開催しました | MOLで、まとめられています！

メインセッション

2月のデブサミでJavaScript.Nextをすでに聴講していたので、ちょっとかぶり気味な節はあったのですが、小史はより詳しく、次世代JSは復習しながら聞けました。

JavaScriptとテスト駆動開発

個人的に本命だった JS TDD INTRO、とても良かったです。お話も分かりやすく、自分にとってまさにTDDのイントロになる内容でした。アジャイル界隈ライクな煽りも好き。

テストコード自体はオレオレプロダクトで後からちょくちょく書き足していたのですが、それもTDDという取り組みからは、かなり遠かったなと自覚した次第。

最近読んでいたアジャイル本で触れられていた部分と併せて、今回のセッション（+懇親会）で改めて得た気付きなどを箇条メモ。

仕事上、昔のコードと闘う勇気をもてました
TDDは開発手法（テストは目的じゃない）
実装してしまった後からテストコードを書くのはつらい
テストはRed→Green→Refactoringの順でまわす
必要なテストを書いて、そのあと(強引にでも)Greenにする
Greenを維持するようにリファクタリングを繰り返して実装する
レガシーコードも大胆に改修できる（レガシーコード改善ガイドを読む）
仕様化テストで現在のコードを保護すれば安心
新しい機能を足すときはテスト書くチャンス

読んだり聞いたりの繰り返しでようやっと腑に落ちてきたので、さっさと実践に移します。良い機会なので、書籍類からのインプットも並行して始めたいですね。

@wtnabeさんから懇親会でもお話伺えてほんと良かったです...(ﾉ^`)

ミニセッション

Coffee Script・LESS・Nodeと、どれもトレンド感のあるトピックが押さえられていました。Coffee Script は全く触ったことがなく、完全に初見だったので良かったです。

Mozilla Developer Toolの紹介はトレンドとはちょっと違いますが、最新のFirefoxに備わった機能ですし、ブラウザの開発ツールも抑えておきたい基本でした。

Nodeのセッションについては、一年前ぐらいはちょうど好んで触ってみていましたが、今や半年以上触れてないのでまったくキャッチアップできていないしなー、とか焦りにも似た残念感が沸々と･･･。

どうも仕事で触れないと、途絶えやすいというか、熱が保てないようで無念な気持ち

勉強会とコミュニティ

今回の #kanaj はテーマ的にお固い感じで主催側としては厳しいかなと思ってたけど、終わってみればエンジニアとデザイナーが互いにあゆみ寄って理解し合おうという場面がたくさん見れて嬉しかった。講演者・参加者の皆さん、感謝です。ほんと自慢のコミュニティです！ #AprilFool
— Koji ISHIMOTO (@t32k) April 1, 2012

開催お疲れ様でした！

kanazawa.jsみたく継続的にJavaScriptを通して、デザイナー/エンジニアの垣根をまたぎながら学んでいけるコミュニティが名古屋にもあればステキだなと最近JSスキーな自分としては思うのでした。

そいで地元の勉強会について悶々と考えていたら、google+で名古屋でJavaScriptの勉強会？という話がちょうど盛り上がって、勢いで場所と日時を確保したのが...

大名古屋JS Vol.2 : ATND

です。まあ、今回は少人数での催行＆エンジニア寄りな雰囲気を感じるのでアレですが、とりあえず集まってみよう！という所からアクションします。

前回の大名古屋JSのこと

単に別エリアの勉強会に触発されただけではなく、元々1年前に大名古屋JSとして一度集まっていました。

わたしが主催ではなく、前回の大名古屋JSは @sugimoto1981 さんが諸々手配してくださっていたので、1年越しの2回目は勢いで会場と時間を確保しときますよ！という展開です。:-)

また金沢いきたい

kanazawa.jsのたびに金沢遊びに行ってるだけみたいですが、えーと、まあそうです。うん。金沢また行きたいれす^q^

iPadとニンテンドーBluetoothキーボード（ゲームつき）

あほむ — Fri, 30 Mar 2012 10:25:10 +0900

iPadのためにニンテンドーBluetoothキーボード

特典でゲームが付属してるキーボード

クロ色のキーボードを¥2,380で購入

ついに買ってしまいましたが、iPad用のBluetoothキーボードが¥2,000台と考えたら、まったく安いほうじゃないでしょうか。

Apple純正Wirelessでも良かったのですが、値段＆かさばるという点から、もう少しコンパクトなやつに目を光らせていました。そんな中、本品は結構前に話題になってましたが、今になってえらい値下がりしていたのでようやく購入した次第。

値段のわりにかっこいいキーボードの使用感

見てくれはスマートでかわいい

使用感

他のところでも言われていることと幾らか重複しますが、つらつらと触ってみた感想の限り。

筐体がコンパクトでクール！
印字から平仮名が除かれていて、黒字に青文字もクール！
軽い！
質感はもちろんプラスチックだけど、それほど安っぽくない
打鍵感はメンブレン感が溢れていて、十全ではないけど許容範囲
キートップはやはり小さく感じるが、慣れの問題
iPadではUSキーボード扱いなので、バックスラッシュやパイプなどの記号が入力できない
↑ 辞書登録でスラッシュx3(///)をバックスラッシュにしたりとか工夫でカバー
付属のチルトスタンドのデキが非常に良い

キーボード打ちたくなるApp

キーボード買うと、iPadのソフトウェアキーボードだけで使うには、ちょっと難のあったアプリも更に使いこなせるような兆しがみえてきます。

Textastic Code Editor 4.0.1（￥850）
カテゴリ: 仕事効率化, ユーティリティ
販売元: Alexander Blach - Alexander Blach（サイズ: 6.3 MB）
全てのバージョンの評価: （37件の評価）

WriteRoom 3.1.1（￥450）
カテゴリ: 仕事効率化, ユーティリティ
販売元: Hog Bay Software - Jesse Grosjean（サイズ: 4.4 MB）
全てのバージョンの評価: （262件の評価）

このキーボードだと記号がツラいので、Textasticはやはりコードビューワー用途かなー、と思いつつWriteRoomとかEvernoteは、活用度が上がりそうです。iOSアプリのWriteRoomは、Dropboxとの連携のデキが良いのでオススメ。

今のうちに確保しておくと幸せ　=三三(ノ・ω・)ノ

シロもクロも、だいぶ値崩れしておりますので、興味があれば今が買い時かもしれないですね。作りがそれなりにチープな分、あんまり具合がよかったら故障時の予備を買っておきたい気もしてます。

よろしければぜひぜひ。