あまり新しくないもの

新しさはそんなに求めず、自分のすきなことをやりたい人生だった

JavaScript書いてた人がRubyに入門する

Ruby

Rubyの勉強をはじめました

サーバサイドをやり始めたいなと思ったので、Rubyから手を出してみることにしました。

しばらくはRubyの勉強記録ななんかをつけていきたいと思います。

環境準備

rubyのバージョンは適宜切り替えられるように、rbenvを利用して管理することにしました。インストールはhomebrewでコマンド一発。

$ brew install rbenv ruby-build

これにPATHを通して、（下記は~/.bash_profileに記述）

eval "$(rbenv init -)"
export PATH="$HOME/.rbenv/shims:PATH"

$source ~/.bash_profile して、これで利用可能に。

rubyのバージョンはせっかくなので最新版の2.1.0を使うことにしました。

$ rbenv install 2.1.0
$ rbenv rehash

$ rbenv versionsしすると、2.1.0があったので無事インストール完了。

あとは現在実行中のshellとglobalのrubyのバージョン設定を、システムのrubyから咲ほどrbenv上にインストールした2.1.0に切り替えればすべて準備完了です。

$ rbenv shell 2.1.0
$ rbenv global 2.1.0

とりあえずHello world

適当なディレクトリに

$ touch hello.rb
hello "hello world!"
print hello

と作ってやって、$ ruby hello.rbで実行。無事出力できた。

JavaScriptとの違いとか似てるとことか

JavaScriptと同じように、操作対象はすべてオブジェクトらしい。なのでJavaScriptに慣れてる人でもとっつきやすそうな感じ。

JavaScriptと違って、var文みたいな宣言はない。 さらっと変数に値代入すれば変数になる。 ただし変数名の付け方に色々と取り決めがあるっぽいのでそこをきちんと理解する必要あり。まあJavaScriptがゆるゆるなだけですよね。JavaScriptはしまりの悪い女みたいな感じ。

Rubyではセミコロンが必要ない。改行で文をわける。一行一文の原則。

JavaScriptもセミコロンがなくても大丈夫といえば大丈夫だけど、基本はつけていくので、そこは一応注意しておいたほうが良さそう

とりあえず今回はここまで。

JadeでMarkdownを使って快適な生活を送りたい

Jade

コーディングをしていて、利用規約みたいにやたら長くてマークアップしていくのがだるい文字列をmarkdownで編集できたら楽になるのになあと考えてました。

そして、そういえばJadeってたしかmarkdown対応してたな？ということに気づいたので早速使ってみた。

markedのインストール

Jadeでmarkdownを使うには、markedかsupermared、markdown-js、markdownのいずれかのモジュールをインストールする必要がある模様。

GitHubと同じ感じでmarkdownできるらしいmarkedを選んでみた。

npm install marked -g

これでインストール完了。

書いてみる

doctype 5
html(lang='ja')
  head
    meta(charset='UTF-8')
    title= markdownのテスト
  body
    :markdown
      # markdownのテスト
      
      テストの文章
    
    h2 通常のjade
    p こちらは通常のjade

こんなかんじでとりあえずindex.jadeを用意。

ポイントは

  • :markdownフィルターでこのブロックがmarkdownであることを宣言して、
  • 其のブロック内は普段通りのmarkdownで記述
  • Jade記法に戻るときはブロックからでるだけ（エディタによっては改行を入れてあげないとカラースキームが正しく適用されない）

という感じです。

いざコンパイル

で、コンパイルしてみると

In order to apply the transform markdown you must install one of "marked","supermarked","markdown-js","markdown"

？？？

さっき確かに入れたはずなのにおかしいな、と。

で、markedのGithubを見に行ったら、 --saveオプションを付けてインストールするみたいなことが書いてあった。

というわけで、

npm install marked -g--save

こうして、コンパイルしてみたところ、無事成功。

どうやら--saveオプションが必要だったみたいです。

コンパイル結果はこんな感じ。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>markdownのテスト</title>
  </head>
  <body>
    <h1>markdownのテスト</h1>
    <p>テストの文章</p>
    <h2>通常のjade</h2>
    <p>こちらは通常のjade</p>
  </body>
</html>

サイコーな感じですね。

jadeと組み合わせて更に幸せになれそう

なお、Jadeのincludeもつかえるっぽくて、

include /piyoDir/hoge.md

という感じでも良さそうでした。

markdownが使えれば普通のディレクターとかでも文言修正できたりもするので、誤字脱字などで修正が発生しやすく、それでいて確認作業が非常に面倒な利用規約などのながーい単純な文章のマークアップにはピッタリです。

しかも、何かの都合でファイルを分割するなどしても、gruntの機能など組み合わせればJadeのほうの記述はかなりシンプルに出来そうでした。サイコーな感じですね。

[2014/02/04追記]

Jadeの1.1.5系から、includeをするときに明示的にfilterの形式を指定しなければいけなくなった模様です。

include:markdown /piyoDir/hoge.md

でこれまでどおりmarkdown形式でinclude出来る模様。

iOS版safariのfont-size拡大バグ

css

iOS版safariで、font-sizeが勝手に拡大されるというバグが時々発生する。

html上もcss上もなんら不備はないのに、特定の箇所だけ突然拡大されて表示されてしまうのでどう対応したものか、と困っていたところ、解決法を発見。

どうやら文字サイズの自動調整機能が勝手に発動しているらしい。

というわけで、

body {
    -webkit-text-size-adjust: 100%;
}

としてやって、文字サイズ調整機能自体を無効にしてしまうことで解決。

ただ、これをやるとブラウザの拡大機能を使った時に文字サイズが大きくならないので、そのへんは調整が必要そう。（jsでiOS safariのみに適用するとか）

なお、原因はよくわからないので、誰かにおしえてほしいところ。

文章を考えるときやってること

書くこと
  • 問題を定義する
  • 着地点を決める
  • 問題を再定義する
  • パーツを集める
  • 書かない部分まで含めた、世界観全体の設定を箇条書きやフローチャートなどにして書きつらねる
  • 実際に表に出す部分のプロットをつくる
  • ラフに書き進める
  • 悩んだらとばす
  • とりあえずひと通りイメージできるところまで書く
  • 方向性を再確認して、間違っていそうなら修正、場合によっては着地点も修正
  • 細かい描写を追加していく
  • トーンを揃える
  • リズムを調整する
  • パーツが足りなくなったら、100語くらいとりあえず出してみる
  • 発想が止まったら、その問題について自分自身と文章で対話する
  • （クリエイティブ）ディレクターが別にいるようであれば、ある程度かけた段階で見てもらって意見もらったりも。
  • 疲れたら寝る

javascriptでnamespaceを管理するやつ

javascript

jsで、一つのファイルにすべてのコードを詰め込むと、長くなってくると非常に読みにくいしどこに何があるのかよくわからないし、結局何をしているのか追いにくくなって保守性が最悪になります。

そのため、大抵の場合は役割とか関数とかクラス（っぽいもの）ごとにファイルを分けていくかと思います。そのとき、namespaceをしっかり管理しておかないと何かと不都合です。

そんなわけで、JavaScriptでnamespaceを管理するのによく使ってるコード。

(function(global) {
    'use strict';
    var root = 'rootnamespace';

    global[root] = global[root] || {};

    function setNS(definition, namespace) {
        var ns = namespace || global[root],
            def = definition.split('.');
        var i=0,
            len = def.length;
        for(;i<len;i++) {
            ns = _setProp(ns, def[i]);
        }
    }

    /**
     * [オブジェクトにプロパティを配置]
     * @param {[object]} obj
     * @param {[string]} prop
     */
    function _setProp(obj, prop) {
        obj[prop] = obj[prop] || {};
        return obj[prop];
    }

    // Export
    global[root].setNS = setNS;


})(this);

こういうファイルを最初に読んでおいて、他のファイルでは

(function(global, doc, $, ns, undefined) {
    'use strict';
    ns.setNS('ClassName');

    var Piyo = {
        chick: function() {
            // method Piyo.chick();
        }
    };

    ns.ClassName.Piyo = Piyo;

})(this, this.document, jQuery, this.namespace);

みたいな感じで運用していきます。

また、.setNS()は、namespaceを.でつないで階層を深くすることも出来ます。 例えばこんな感じ。

ns.setNS('view.Fuga.Hoge');
// ns.view.Fuga.Hoge が確保される

こうすると、例えば他のファイルとかでもviewやview.Fugaが宣言されていなくても、viewというオブジェクトが生成され、その中にFugaというobjectが生成されて、さらにその直下にHogeが生成されます。

また、もし他のファイルでview.Fuga.Piyoみたいなものが作られていても、それを上書きすることなく、view.Fuga.Hogeが生成されます。

これでnamespaceでぶつかり合ったり、そんなobjectないよ！って怒られたりすることがだいたいなくなります。

ついでですが、そのファイルがどういう機能を実装してるのかもファイル開いてすぐわかる、気がします。