Drkcore

21112012 javascript

Smashing Node.jsが気になる

気になっている本

Smashing Node.js: JavaScript Everywhere (Smashing Magazine Book Series)
Guillermo Rauch
Wiley / 3379円 ( 2012-09-11 )

20112012 life

「ウェブ分析論」を読んだ

web分析系はよくわからない三文字表記が多いので、それらを覚えるのに都合が良かった。内容も基礎的だけど丁寧に解説されていたので、わかりやすかった。

ウェブ分析では、サイトの目的・目標を「KGI(Key Goal Indicator)」と呼びます。ここで重要なのは目的を数値化することです

1353404795

CSF(Critical Success Factor)とはKGIに決定的な影響を及ぼす要因。これをさらに具体的な数値目標に落とすとKPI(Key Performance Indicator)になる。

talknoteで聞いたユーザータイムラインは本書で言うところのコンセプトダイアグラムと同じものかな。

統計の基礎知識

統計のあたりは流し読みで十分だった。

ウェブに関するデータで正規分布するものはほとんどない

と触れられていたが、正規分布がどういう分布か知っていればまぁそうだろうなと。それからP.90の時系列データを多項式近似するのは乱暴だなと思ったけど、入門者向けの説明だからいいのかな。逆にそのくらい粗い近似でいいというのが不思議な気もするがそういうもんなのかな。

サイトの課題発見

検索ワードには来訪者の「目的」や「期待」が表れる

ソーシャルメディア分析

検索エンジンからの流入分析じゃなくてソーシャルメディアの分析も面白いなと最近思うようになってきたので、facebookインサイトの説明は役に立った。

入門ウェブ分析論 ―― アクセス解析を成果につなげるための新・基礎知識　増補改訂版
小川卓
ソフトバンククリエイティブ / 2625円 ( 2012-03-22 )

まぁ試行錯誤するタイプの分析は本読むよりは自分でやってみるに限るなとというか数をこなさないとダメだな。

19112012 三島 Haskell

すごいHaskellをたのしく学ぼう 121124@fuji

ポップでキッチュな表紙のあの本とは直接関係ありませんが、今週末に三島Haskell無名関数の会第一回目があるので、興味があれば参加されると楽しいと思います。というより、そろそろ関数型プログラミングの勉強会を定期的に開催していければなぁと思います。

初学者の@ando_ando_andoも参加するということなので、快適なHaskellコーディング環境をつくるという話をしようと思っています。

とりあえず、タイトルと表紙だけつくってみました。

m_lambda

それから、世界観が大切だと思うのでそういうものもちゃんと考慮してあります。

天地創造（静岡東部版）

1日目　sedがある中、神はエディタを作り、vi(光属性)とEmacs(闇属性)が出来た。
6日目　神は栃木と群馬をつくり、λに似せた静岡をつくった。
7日目　神は休んだ。

つまり我々はEmacsを信じHaskellを推進しなければならないのです。

19112012 Emacs

C-sで検索をかけた時にC-x C-xで検索開始位置に戻れる(Emacs)

Emacs RocksのEpisode 01: From var to thisを見ていて、C-sすると自動的に検索開始時点の位置がマークされることを知った。

ということはC-x C-xで戻れるってことじゃないかと。

他にはexpand-regionってのが便利そうだったので、入れた(list-packagesで選択できる)。

18112012 sake

五橋の本醸造

燗つけて飲んだ。

1351854465

名前の由来はあれだろうなぁと思いつつ探したらそうだった。

一度は歩いてみたい。そして飲み歩いてみたい。

18112012 javascript Emacs coffeescript Ti

AlloyでのiPhoneアプリ開発にCoffeeScriptを使う

犬が早朝から吠えたので4時に叩き起こされたが、タイムラインを追いかけていたらAlloy with CoffeeScript のお誘いというこれは！というエントリがあがっていたので、早速誘われてみた。尚、jsとcoffeeは一緒のディレクトリに置いておくのが好みなので@k0sukeyのオリジナルなjmkに変更をくわえてあります。

ストップウォッチをつくる

Titanium Mobile iPhone/Androidアプリ開発入門のストップウォッチを参考にしました。

Titanium Mobile iPhone/Androidアプリ開発入門―JavaScriptだけで作る
小澤栄一
秀和システム / 2520円 ( 2012-02 )

本書ではui.jsという1つのファイルで完結していますがAlloyのようなMVCフレームワークを使ったほうがコードの見通しは良くなると思います。

雛形をつくる

$ titanium create stopwatch # 対話でターゲットデバイスやapp-id設定
$ cd stopwatch
$ alloy new # alloyのひな形作成
$ alloy generate jmk

coffeeがコンパイルされるようにする

stopwatch/app/alloy.jmkを以下のように書きなおす。これでapp/controller のcoffeeファイルはalloy compileでコンパイルされるようになります。

task("pre:compile", function(event,logger) {
    var wrench = require("wrench"),
    fs = require("fs"),
    path = require("path"),
    controller_root = event.dir.controllers,
    coffee = require("coffee-script");

    wrench.readdirSyncRecursive(controller_root).forEach(function(controller){
    if (controller.match("coffee$")) {
        fs.writeFileSync(
        path.join(controller_root,controller.replace("coffee", "js")),
        coffee.compile(
            fs.readFileSync(path.join(controller_root, controller)).toString(),
            { bare: true }));
    }
    });
});

task("post:compile",function(event,logger){
});

alloyの開発

あとは普通に。

app/views/index.xml

<Alloy>
    <TabGroup>
        <Tab id="tab1" icon="dark_clock.png" title="ストップウォッチ">
            <Window id="window1" title="ストップウォッチ">
                <Label id="label">
          00:00:00.000
                </Label>
        <Button id="button">
          Start
        </Button>
            </Window>
        </Tab>
        <Tab id="tab2" icon="dark_info.png" title="使い方">
            <Window id="window2" title="使い方">
          <WebView url="howto.html">
          </WebView>
            </Window>
        </Tab>
    </TabGroup>
</Alloy>

/app/styles/index.tss

{"Window": {
  "barColor": "#000",
  "backgroundColor": "#000"
},
"Tab": {
  "backgroundColor": "#000"
},
"#label": {
  "color": "#fff",
  "width": "auto",
  "height": "auto",
  "font": {
    "fontSize": 40,
    "fontWeight": "bold"
  }
},
"#button": {
  "color": "#000",
  "width": 150,
  "height": 40,
  "bottom": 30
}}

webview用のhtmlは /app/assets/iphone/howto.htmlに

<html>
    <head>
        <title>使い方</title>
    </head>
<body>
    <h1>使い方</h1>このサンプル
は<a href="http://www.amazon.co.jp/dp/479803231X">Titanium Mobile
iPhone/Androidアプリ開発入門</a>のストップウォッチのサンプルをAlloyで
書きなおしてみたものです。
<img src="http://ec2.images-amazon.com/images/I/41jDZ5IY01L._BO2,204,203,200_PIsitb-sticker-arrow-click,TopRight,35,-76_AA300_SH20_OU09_.jpg"/>
</body>

興味を持ったら購入して読んでみるとよいと思いますよ。

</html>

最後にcoffeeをapp/controllers/index.coffeeに

started =false
intervalID = null

startStopwatch = ->
  $.label.text = "00:00:00.000"
  startTime = new Date()

  _updateTimer = ->
    u_sec = 1000
    u_min = 60 * u_sec
    u_hour = 60 * u_min
    now = new Date()
    diff = now - startTime

    hour = Math.floor(diff/u_hour)
    min = Math.floor((diff - hour*u_hour)/u_min)
    sec = Math.floor((diff - hour*u_hour - min*u_min)/u_sec)
    msec = diff / u_sec
    $.label.text = ("0" + hour).slice(-2) + ":" +
                   ("0" + min).slice(-2) + ":" +
                   ("0" + sec).slice(-2) + "." +
                   ("00" + msec).slice(-3)

  intervalID = setInterval(_updateTimer, 3)
  return

$.button.addEventListener 'click', -> 
  if started
    clearInterval(intervalID)
    $.button.title = "Start"
    started = false
  else
    startStopwatch()
    $.button.title = "Stop"
    started = true
  return

$.index.open()

実行

$ alloy run

alloy_stopwatch

Let's Enjoy!

18112012 twitter-bootstrap

レスポンシブデザインのサイトにGoogleAdsense放り込むとめんどくさいよね

今、728x90の横長のやつを張り付けているんだけど、スマホで表示させると邪魔だ。動的に大きさを変更するのは規約違反らしいので、横長よくないじゃんと。まぁサーバー側でチェックしてサイズ変えてもいいんだけどいちいち面倒くさい（というかbootstrap使う必要ないじゃん的な）。

2カラムにしてサイドバーの方に320x320くらいのレクタングルを貼り付けておくのが良いかなと思ったのでTwitter Bootstrap: Build A Stunning Two Column Blogを見てた。

というわけで2カラムのデザインでヨサゲなやつを参考にしてなんか作ろうかなと思ってwordpressのテーマを漁っている。

bootstrap関係

17112012 Emacs Ti

flymakeを使ってAlloyのTSSをリアルタイム文法チェック

Alloyのtssの文法ってよく分からんですね。css-modeあててもjs2-modeをあててもエラーばっか吐くし、快適にコーディングできん。

ということでちょっと調べてみた。

Alloyのソースコード探していたらgrammerのとこにtss.pegjsってのがあって、ヘッダを読んでみるとTSS parser based on JSON parserって書いてあったので基本的にはJSONらしい。

それにしては{で始まらないよなぁとソースコードを追いかけていくとcompilerUtilsに

// Add enclosing curly braces, if necessary
contents = /^\s*\{[\s\S]+\}\s*$/gi.test(contents) ? contents : '{' + contents + '}';

ってあって、要するに{で始まってない場合ファイルのコンテントを{}で囲むことになっているらしい。それからtssはキー値を""で囲まなくてもいいんだけど、囲んでも別に問題なかったりする。

結論としてはJSONで書いておけば、即時構文チェックとかシンタックスハイライトとか効かせられていいんじゃないかと。

つまり

"Label": {
  font: {fontSize: 20, fontFamily: "Helvetica Neue"},
  color: "#999"
}

って書いてるところを、最初から

{"Label": {
  "font": {"fontSize": 20, "fontFamily": "Helvetica Neue"},
  "color": "#999"
}}

って書くようにすれば、事前に構文のエラーを潰せて気持ちがいい。

Emacsの設定

json-modeを使ってみますが、package.elでは入れられないのでgit cloneしてrequireします。javascript-modeを継承しているのでTabの設定なんかはそっちの設定に従う。

次にFlymakeの設定をする。構文チェックにjslintを使うのでインストールしてない場合には

npm install -g jslint

で入れます。

Emacsのほうの設定はこんな感じ。tabはスペース2個分（個人的な好み）にした。それからelectric-pair-modeも入れてるので{},""をよろしくやってくれる。

;; JSON
(require 'json-mode)
(add-to-list 'auto-mode-alist '("\\.tss$" . json-mode))
(add-hook 'json-mode-hook 'electric-pair-mode)
(add-hook 'json-mode-hook '(lambda ()
                 (setq js-indent-level 2)
                 ))

(when (load "flymake" t)
  (defun flymake-jslint-init ()
    (let* ((temp-file (flymake-init-create-temp-buffer-copy
               'flymake-create-temp-inplace))
           (local-file (file-relative-name
                        temp-file
                        (file-name-directory buffer-file-name))))
      (list "jslint" (list "--terse" local-file))))

  (setq flymake-err-line-patterns
    (cons '("^\\(.*\\)(\\([[:digit:]]+\\)):\\(.*\\)$"
        1 2 nil 3)
          flymake-err-line-patterns))

  (add-to-list 'flymake-allowed-file-name-masks
               '("\\.tss\\'" flymake-jslint-init)))

(load-library "flymake-cursor")

この設定で少し使ってみる。

17112012 javascript Emacs Ti

Emacs+titanium cli+alloyでiPhoneアプリを開発する

静岡javaScript勉強会 #2に参加されるみなさんこんにちは、参加されないみなさんもこんにちは。僕は11月のすべての土曜日を留守にして家族の顰蹙を買うという重圧に耐え切れずに早々に離脱してしまいましたので朝からお家でjsってます。

ところで、@tomofの「Backbone.js入門」面白かったですか？よっしゃーいっちょおとうさんもbackbone.jsでウェブアプリケーションつくっちゃうぞーっていう気になりましたか？はいそうですか、そうですよね。ついでに、その勢いでBackbone.jsっぽい開発のノリでiPhoneアプリを開発できたら面白いと思いません？思いますよね。

やりましょう、Alloyで!(孫社長風味でよろしく)

というような内容のエントリです。

1351985625

Titanium CLIとAlloyのインストール

Titanium CLIはTitaniumで開発するためのコマンドラインのツールで、AlloyはTitaniumのためのMVCフレームワークですが、両方共Node.jsのv0.8以上がインストールされていればnpmでインストールできるはずです。

npm install -g titanium
npm install -g alloy

うまくいかない場合は下のサイトを参考にしてください。

エディタ

EmacsでもvimでもST2でも好きなモノを使えば良いとおもいますが、僕はEmacs(24)をつかっています。でnxmlモードにzencoding-modeをあててあります。入ってない場合はM-x list-packaegesでzencoding-modeを選んでインストールしたらinit.elに下の内容を追記しておけばいいです。

(add-hook 'sgml-mode-hook 'zencoding-mode) 
(add-hook 'nxml-mode-hook 'zencoding-mode)

他にはjavascriptの開発用にjs2-modeを入れているのとcoffeeモードにflymakeが効くようにしてありますが今回の内容では必要ありません。

追記121118: CoffeeScriptを使って開発する方法

開発の流れ

最初にtitaniumコマンドでプロジェクトの雛形をつくります

$ titanium create
Titanium Command-Line Interface, version 3.0.13
Copyright (c) 2012, Appcelerator, Inc.  All Rights Reserved.

Please report bugs to http://jira.appcelerator.org/

Target platforms: (android,ios,ipad,iphone,mobileweb) iphone
App ID: com.example.tabsample
Project name: tabsample

[INFO] Creating Titanium Mobile application project
[INFO] Project 'tabsample' created successfully in 276ms

プロジェクトのディレクトリに移動してalloyの雛形をつくります。

$ cd tabsample/
$ alloy new
       .__  .__                
_____  |  | |  |   ____ ___.__.
\__  \ |  | |  |  /  _ <   |  |
 / __ \|  |_|  |_(  <_> )___  |
(____  /____/____/\____// ____|
     \/                 \/
Alloy by Appcelerator. The MVC app framework for Titanium.

[INFO] Installed "ti.physicalSizeCategory" module to tiapp.xml
[INFO] Installed "ti.alloy" plugin to tiapp.xml
[INFO] Deployed ti.alloy compiler plugin to plugins/ti.alloy/plugin.py
[INFO] Deployed ti.alloy hooks to plugins/ti.alloy/hooks
[INFO] Generated new project at: app

ここからEmacsを使っていきます。まずはapp/views/index.xmlを修正します。中身を全部消してzencodingでさくっと用意します。zencodingはC-returnで起動させて

Alloy>TabGroup>(Tab#tab icon title>Window#window title backgroundColor>Label#lable)*2

みたいにワンライナーで書けるので便利すぎです。

emacs-zen

zencodingで大まかにスキャフォールドを用意したら、アトリビュートなんかを設定します。ちなみに画像はここから取ってきてapp/assets/iphone/に起きました。

<Alloy>
    <TabGroup>
        <Tab id="tab1" icon="KS_nav_views.png" title="Tab 1">
            <Window id="window1" title="Tab 1" backgroundColor="#fff">
                <Label id="label1">
          I am Window1
                </Label>
            </Window>
        </Tab>
        <Tab id="tab2" icon="KS_nav_ui.png" title="Tab 2">
            <Window id="window2" title="Tab 2" backgroundColor="#fff">
                <Label id="label2">
          I am Window2
                </Label>
            </Window>
        </Tab>
    </TabGroup>
</Alloy>

app/styles/index.tssはLabelの設定だけ。

    "Label": {
    font: {fontSize:20, fontFamily:"Helvetica Neue"},
    color: "#999"
}

tssにはどのモードをアサインするのがいいのでしょうか？誰か知っていたら教えて下さい。(追記121117 json-modeあててみた)

iOSシミュレータを起動

プロジェクトのトップディレクトリで

$ alloy run

するとシミュレータが立ち上がります。素敵ですね。これで、雛形作ってシミュレータを動かすところまでできました。あとはapp以下を良い感じにいじってイケてるアプリを作るだけですね。

ti-alloy

シミュレータが立ち上がるまでに結構待たされるのでストレスを感じますが、それは僕のmacが遅いからですね。はやく買い換えたい。

おまけ(Alloyの開発にJadeを使う)

@k0sukeyにAlloyJadeという素敵なものがあることを教えてもらいました。Jade派の僕としては非常に惹かれるので後で試そうかなと思っています。

16112012 sake

大観を呑んでいる

風邪も治りかけてきたので、ふんわり柔らか美山錦の日本酒をぬる燗にして飲むぞーと澤の花でも買おうかなといわせさんに寄ってみたら、茨城産美山錦を醸したお酒が置いてあって、ラベルもなかなか素敵だったので買ってしまった。

1353059528

ふんわり系で美味い系だが、若干のエグ味というか苦味がある。これは嫌な感じではなくて個性でしょう。綿屋のほうがキレイ目だけど、燗つけて飲むならこっちかな。

この美味さで2.3Kという値段はコストパフォーマンス高いですね。

オススメ

もう5年目(wishlistありマス♡)
最近はPythonとDeepLearning
日本酒自粛中
ドラムンベースからミニマルまで
ポケモンGOゆるめ