• CSS Nite in Ginza Vol.45
• CSS Nite LP9

高津戸壮です。よろしくお願いします！

書いたのはこんなのです。7ページも書きました。

• コーディングガイドラインを作成する
• 美しい余白を作りだすHTML+CSSの設計
• 抽象度を考慮してclass名をつける
• body要素のclassでCSSデザインを切り替える
• 似た形状のデザインを最小限のCSSで組む
• emとpxの特性をふまえ最適な余白指定を行う
• サイトの規模に合わせたCSSを書く

Tips形式ではありますが、なるべく、ほいこれやったらこうなるべー終わり！みたいな感じではなく、こーいう概念が大事なんじゃないかなーどうでしょうーって言う感じを意識して書きました。

店頭で見かけたら見て頂けるとうれしいでーす。

• Amazon – Web creators ( ウェブクリエイターズ ) 2010年 03月号

まーそれなりに、HTMLCSSJavaScriptやれます、でかめのサイトでもカオスなサイトでもうまく立ち回ります、MTやれます、とかいった感じではあって、フリーの時も、色んな縁から、そーいうところを買ってもらって仕事を依頼していただけたりはしたのだけれど、そーいうことやるのの単価って、全然上がる気がしない。というか、特にコーディングって、単価どんどん下がってきてるよねぇ。

どーすっぺというアンサーとして、一つの道は、クオリティの高いコーディングを、安価で提供する道だと思うんですが、これってーのは、自分が思うに、テンプレートの部分をがっつりキッチリ作れば、量産部分は、それほどの知識が無くとも、出来ると思うんです。学生バイトとかそんな感じの人でも。そーいう状態に持っていくのが、テンプレート作るっていう仕事だと思うので。コロコロコロと作ったHTMLのモジュール並べたらあら綺麗に余白できて何の問題も起こらないわぁという状態を作った後は、あとは人件費安く大量生産できるってー面がありますよね。そこ、テンプレ作れるひとがやったらあんま意味ない。なので、そこは安くどかっとやる。そーいう体制作れば、安くていいものをガッツリ提供できますってーのがあります。

HTMLのテンプレ作るのに、どんな付加価値があるのさ、安くても、見れりゃーいいじゃんかいと思うのはまぁ分かりますが、自分はこーいった部分で管理・保守性に優れたものを作れることは価値があると思ってます経験上。ただ、それっていうのは、そーいう量産体制が築けたり、デカめや複雑なサイトで、長く保守できてるってー状態にならんと、その価値は発揮できなさげだと思うんですよね。この3ページ、デザインあげるからやって。ってーところでは、この価値はあんま変わんないと思う。まじすごいクオリティでコーディングしてきやがった・・・！とかなったとしても。

まー一つそういう道があるなーとして、やっぱりそれは価格競争に乗るって感じになるよなーと。牛丼はやっぱ500円以内だし、そこ、1000円2000円で売れるのって、まー、高級な肉使っててまじでウマイですとかなら分かりますけど、コーディングにおいて、そこまでのコーディングスーパースターってどんなんだい。っていうか居るのかねそれは、その価値を説明したうえで納得して貰えるもんなんだろうかというのがある。（てか、フリーランスでコーディングしますとか言ってる輩にそれなりの金額で発注していただけてた時点でもうかなりありがたい。）

でまー思うに、コーディングやりますっていう立ち位置にいると、そっから抜けらん無いんじゃないかねと思うんですなー。というのも、コーディングを頼まれるって時点で、そのコーディングを頼むのは、やはりWeb制作会社だったり、サイトを作る部署がある企業だったりするわけなんですよね。そー考えると、決まった予算内でやらざるを得なくない？それ以上の対価を払えるコーディングって？ってなるよなーと。

んじゃ、どーしたらその根っこの価格を上げられるのさって言ったら、例えば、あなたのサイト100万で作ります。そしたら200万売り上げがあがりますよ！みたいな価値を生み出す部分なのではないかなと思うんですよね。あたりまえだけど。コーディングうんぬん考えててもだめなんじゃねーのかなーと。まーこりゃJavaScriptだのMTだのでも同じなんですが。

前、会社にいた時、jQuery覚えて色々使ったり、Flashぽいのも作ったりするんだけど、それやっても別に見積り上がんないし・・・ってジレンマがちとあった。ただそれって、そこの価値をハナっからクライアントに説明してないってのがダメな点だったのかなーって思う。俺のターンに回ってくるところで、おっしゃここツールチップにして、画像はモーダルダイアログで出しましょう。色々調べた結果、このライブラリがベストなんです！って言って実装したとしても、そこで言ったところで、もう遅いって言うか、まぁクライアントには満足して貰えるだろうけど、それって見積り的に言えば無料サービスになっちゃってたりする。そーいうのって、最初っから、ウチはこうやるんですよ、リッチでこんなにユーザーは満足する物になりますよ、だからいくらですって言う面までもっていかないと、金額的な面では意味ない気が。まーこれって、まさに分業してやってる自分が陥りそうな感じではありますねよく考えたら。

じゃーそのJavaScriptだの、コーディングだのを、どうやって商売に結び付けていけばいいのかって言ったら、それで何が成せるのだってのをどんどん出していかないといかんなーと思うんですよね。もう、依頼されてハイこれ実装するのにはいくらですって感じじゃなくて。そーいうことお考えなら、こー言うのどうでしょうか？これはいくらなんですよ。って言う感じで。

まーその自分が、自分に必要って思ってるのは、そーいう面なんです。JSできんのは分かった。CSSできんのは分かったから、で、それがどーいう役に立つんじゃ？提案しなさーいって面です。そのためには、もっと、技術面だけでなく、JavaScriptとCSSを理解せねばならんと思いました。

あとは、みんなでなんかやるってーことです。別に自分が提案しなくてもいいから、まーこんな技術屋デスって立ち位置な人間よか、どーのこーのしたいって考えてるひとはいるもので、そーいう人と一緒に考えて何かやるってことです。でもまー良く考えたらWeb制作会社ってそーいう集まりなはずなんですよねー。自分の認識が足りてなかっただけか？

そーいうのが自分にはこれから必要な面だーと思ったりなんなり。

そもそもブラウザベンダーってのは何のためにブラウザを作ってるかって考えたら、まー広い話で言えば、それによって生活が豊かになることだったり、幸せに暮らせることだったりするんじゃなかろーか。そーいった上で、ブラウザが目指すものとしては、新しいテクノロジのプラットフォームになることなんじゃないすかね。

例えばWiiの上にOperaが乗っかってたりとか、ケータイにChromeだのSafariが入ってるのって、あーそれはwebを見るためのものね、PCで見れるやつがケータイでも見れるのねっていうことより、ずっと価値のあること。HTML5なりCSS3ってのがどんどん策定され、みんなそれ実装していったら、そのプラットフォーム自体ができることが増えるわけだから、どんどん今以上の使われ方がされていくハズ。

たとえば、数年後、冷蔵庫だの音楽プレイヤーだの、なんでもかんでも、そういった日常で使われるような機器にスクリーンがつき、色々な機能を持ち、GUIが使われたら、その中で組まれるプログラムの表側がHTML周辺の技術でも作れるとか、ていうかそれがスタンダードっすよねってなったりすんじゃないすかねー。うちの目覚ましwebkitでできてるっぽいとか。おっと音楽プレイヤーは既にwebkitでした。あ、携帯電話もでした。

HTML5+CSS3を採用することでIEを切ると言う話は、今の時点で言えば、多くの人の役に立つ上での半数以上を切り落としていることにもなるので、確かにあんま嬉しくないことだし、みんなを幸せにはしないことかもしんない。

ただ、それをベースにして作られるアプリケーションは、高度なプラットフォームを利用したデザイン ー設計面とビジュアルの面でー を低コストで、高い管理・運用性を持たせて作ることができるわけで、これは明らかに価値のあること。さらに、時間がたてばそのIEとやらでも使える可能性が非常に高いわけだし。

だからまー、IEを対象にして、万人に使えるwebサービス ーweb上に配置され、参照されるドキュメントとしての、いわゆる普通のwebサイトを含むー と言うのは、それなりにレガシーな技術を使う必要があり、それを保守するための費用もかかってしまう。それに対し、うん年前のブラウザの性能の低さを嘆くのは構わないが、その状況を悲観しているのは多くの場合、時間の無駄になる。あたりまえだけど、需要ありきで仕事は成り立つ。ただし、それを排除した環境の上でモノ作ることを前提とするのであれば、レガシーな技術を使う意味など全くない。

具体的に使えそうなところで考えてみれば、社内でのみ利用されるスケジュール管理システムだったり、サイトを更新するためのCMSのGUIが、IEで使えないからと言って、何か問題があるのだろうか。最新の技術を使い、メンテナンス性の高いアプリケーションを作るということ、これは、幸運なことに、性能の低いレガシーな技術しか使えないプラットフォームで同等のモノを作ることよりも、ずっと簡単で運用も楽になっていく。

画面描画一つとっても、レガシーなブラウザにも同様な結果をもたらすためにかけるコストを、誰が払いたい？ それは、コードをつぎはぎだらけにし、運用のコストを増大させるという結果をもたらしてまで、実現させたいことだろうか？

そもそも、ChromeだってFirefoxだって、MacでもWinでもLinux上でも動くわけだし、パソコンの上で動くもので良いのであれば、その環境を用意することなど、たいていの場合、なんの障害も無い。それらのプラットフォームとなる、Webブラウザと呼んでいるものらは、webサイトを見ると言う意味を超えた存在にこれからなっていくハズなんじゃなかろーか。っていうかなってきてる。

もちろん、レガシーな環境に合わせてwebサイトと呼んでいるモノを作るのは、必要なことだし、大体それが私の仕事の中心デス。ただ、これっていうのは、HTML+CSSができることのごくごく一部でしかない。っていう状況に至るまで、そんな時間はかかんないんじゃないかなぁ。

※ ここでいうhtml5ってのは主にAPIの話

• サンプル (server.js)

このサンプルでは、以下のようなDBを作ります。これが全部終わった後の状態。

コードちょい解説

とりあえずDBに接続。sqliteのファイル名を指定できる。最初にこれやらないとだめ。

/**
 * Connect first
 * If you use sqlite, Jaxer create 'appdata.sqlite' in db directory.
 * You can specify this db file name by third argument.
 */
ActiveRecord.connect(ActiveRecord.Adapters.JaxerSQLite);

     // following works too.
     // ActiveRecord.connect(ActiveRecord.Adapters.JaxerSQLite,'filenamehere.sqlite');

logを有効にすると、Jaxer.Log.info()でログを取りまくってくれる。

/**
 * Logging
 * Following enables logging.
 * If true, ActiveRecord execute Jaxer.Log.info() for each sql execution or something like it.
 */
ActiveRecord.logging = true;

直接SQL文を実行させるには以下のような感じ

/**
 * Execute simple sql
 * After you executed ActiveRecord.connect(),
 * You can use ActiveRecord.execute() to execute sql.
 */
ActiveRecord.execute('CREATE TABLE IF NOT EXISTS exampletable1 (id INTEGER PRIMARY KEY, username, mailaddr, profile)');

tableをラップしたモデルを作れます。モデルを作れば、createで簡単にrecord追加できます。

/**
 * Create model
 * ActiveRecord.create(tableName) creates a model object.
 * You can use sql execution without writhing sql strings.
 * Followings are the examples of create new records.
 * 'exampletable1' is the table you created above.
 */
var ExampleModel1 = ActiveRecord.create('exampletable1');

ExampleModel1.create({
     username: 'Takazudo',
     mailaddr: 'takazudo@gmail.com',
     profile: 'hey! I am Takazudo.'
});
ExampleModel1.create({
     username: 'Hogezudo',
     mailaddr: 'hogezudo@gmail.com',
     profile: 'hey! I am Hogezudo.'
}); 

モデル作成時、インターフェイスを定義すると、findByメソッドらが使えます。
ActiveRecord.create()するとき、そのtableがなけりゃ勝手に作ります。
PRIMARY KEYはIDでこれは勝手に入ります。

/**
 * Model - finder methods
 * Followings are the examples of finder methods.
 * Defining the interface by second argument of create allows you to use finder methods.
 */
var ExampleModel2 = ActiveRecord.create('exampletable2',{
     username: '',
     mailaddr: '',
     profile: ''
});

ExampleModel2.create({
     username: 'Takazudo',
     mailaddr: 'takazudo@gmail.com',
     profile: 'hey! I am Takazudo.'
});
ExampleModel2.create({
     username: 'Hogezudo',
     mailaddr: 'takazudo@gmail.com',
     profile: 'hey! I am Hogezudo.'
});
ExampleModel2.create({
     username: 'AnyOtherMan1',
     mailaddr: 'someone@gmail.com',
     profile: 'hey! I am AnyOtherMan.'
});
ExampleModel2.create({
     username: 'AnyOtherMan2',
     mailaddr: 'someone@gmail.com',
     profile: 'hey! I am AnyOtherMan.'
}); 

findByHoge(val)で、マッチした最初のrecordをラップしたオブジェクトが戻ってきます。
各keyの値は普通にメンバ変数として格納されてる。
PRIMARY KEYのIDから探すときは、findByIdですが、これだけは、インターフェイスを定義しなくても使えます。

     /**
      * ModelInstanceObject.findBy{property}(val)
      * findBy{property}(val) returns a object which wrapped a record.
      * this method finds a record with limit=1.
      */
     var res = ExampleModel2.findByUsername('Takazudo');

     Jaxer.Log.info(res.username); // Takazudo
     Jaxer.Log.info(res.mailaddr); // takazudo@gmail.com
     Jaxer.Log.info(res.profile); // hey! I am Takazudo.
     Jaxer.Log.info(res.id); // 1

          /**
           * ModelInstanceObject.findById(val)
           * findById(val) is allowed specially without defining interface.
           */
          var res = ExampleModel2.findById(1);
          Jaxer.Log.info(res.username); // Takazudo

マッチしたやつ全部欲しいと言う場合はfindAllByHoge。
recordをラップしたオブジェクトを詰め込んだArrayが返ってくる。

     /**
      * ModelInstanceObject.findAllBy{property}(val)
      * findAllBy{property}(val) returns an array of matched recoreds.
      * each member of the array is the object which wrapped a record.
      * these objects are same record wrapped instance objects as above.
      */
     var res = ExampleModel2.findAllByMailaddr('takazudo@gmail.com');

     Jaxer.Log.info('the matched records length is... '+res.length);
          // the matched records length is... 2

     for(var i=0,l=res.length; i<l; i++){
          Jaxer.Log.info(res[i].username);
     }
          // Takazudo
          // Hogezudo

find(条件のハッシュ)で、複数の条件でrecordの取得が可能。
戻ってくるのは上記と同じようにrecordラップしたオブジェクトが詰め込まれたArray。

     /**
      * ModelInstanceObject.find(hash)
      * find(hash) returns matched objects' array.
      * same as above. but you can specify multi conditions
      */
     var res = ExampleModel2.find({
          mailaddr: 'someone@gmail.com',
          profile: 'hey! I am AnyOtherMan.'
     });

     Jaxer.Log.info('the matched records length is... '+res.length);
          // the matched records length is... 2

     for(var i=0,l=res.length; i<l; i++){
          Jaxer.Log.info(res[i].username);
     }
          // AnyOtherMan1
          // AnyOtherMan2

もっと色々機能あるのでまだ調べてみているところ。

参考

• Jaxer
• ActiveJS
• ActiveJS – ActiveRecord
• gitHub – aptana/activejs

• GitHub – Takazudo’s outline.vim

使い方

vimのプラグインディレクトリに outline.vim を入れます。
zipの中に入っている、sample.cssもしくはsample.jsをvimで開きます。
コマンド、:Oo （もしくは:OutlineOpen）を実行します。

こんな感じでコメントのアウトラインが横に出ます。
左のウィンドウ（アウトラインバッファ）に出る各行は、メインウィンドウ（ペアレントバッファ）のコメントと対応しています。

アウトラインバッファの任意の行でEnterを押す（もしくは、:OutlineJump を実行する）と、ペアレントバッファの対応する行にジャンプします。

ペアレントバッファの任意の行で :ToO（もしくは :ToOuline）を実行すると、アウトラインバッファの対応する位置へカーソルが移動します。

アウトラインバッファは、アウトラインバッファにカーソルが移った時、ペアレントバッファが保存された時に自動的に更新されます。アウトラインバッファにカーソルがある状態で r を押すか、:Or（もしくは :OutlineRefresh）を実行することでも、アウトラインバッファの更新が行えます。

アウトラインバッファを閉じるには、アウトラインバッファにカーソルがある状態で、 q を押すか、:Oc（OutlineClose）を実行します。ただ単純にアウトラインバッファを閉じるだけでOKです。

秀丸のアウトライン機能をこういう形で使ってたんですが、vimのプラグイン探しても良さそうなのが無かったので、作ってみました。windowsのgvimで作ってるんですけど、これって他の環境でも動くんでしょうか。まだ作ったばっかりで色々改良すると思うのですが、ひとまず動作したのでアップします。あとは、アウトライン化する項目を色々設定できたらなーとか、気が向いたら。

GitHubってやつにアップロードしてみた。

vimrcやらgvimrcに書いたやつ

Takazudoはwindowsのgvimなので,GUI系の設定は、windows以外では動かないかもしれません

"vi compatible mode off
set nocompatible

"share clipboard with other applications
set clipboard=unnamed

"number ruler
set number

"define backup dir
set backupdir=$HOME/vimbackup
set directory=$HOME/vimbackup

" ignore case in search
set ignorecase

" consider case if the search pattern contains uppercase
set smartcase

" incsearch
set noincsearch

" seach ends at the end of the buffer
set nowrapscan

" tab = 4space
set tabstop=4

" tab is tab. doesnot expand to space.
set noexpandtab

" allow autoindent
set autoindent

" backspace can delete linefeed, tab, space
set backspace=2

" hilight another brace if the cursor was on it
set showmatch

" add extra features to command-line
set wildmenu

" show ruler
set ruler

" show whitespace chars
set list

" show whitespace chars as following
set lcs=tab:>-,eol:$,trail:_,extends:\

" doesnt allow textwrap
set nowrap

" show status line
set laststatus=2

" commandline height
set cmdheight=1

" show commandline
set showcmd

" show filename on titlebar
set title

" hilight cursor line
autocmd WinEnter *  setlocal cursorline
autocmd WinLeave *  setlocal nocursorline
set cursorline

"shell slash \ to /
set shellslash

" automatically change directory where the buffer's file exists
set autochdir

" hilight searched chars
set hlsearch

" dont use annoying indent
set nosmartindent

" make me go to next line
set whichwrap=b,s,h,l,<,>,[,]

" statusline
set statusline=%<%f\ %m%r%h%w%{'['.(&fenc!=''?&fenc:&enc).']['.&ff.']'}%=%l,%c%V%8P

" font
set guifont=VL_Gothic:h12:cSHIFTJIS

"number of screen lines to show around the cursor
set scrolloff=2

" minimal number of columns to keep left and right of the cursor
set sidescrolloff=3

" first directory is where the buffer exists
set browsedir=buffer

" hide toolbars
set guioptions-=T

" don't allow to send selected text to the clipboard automatically in visual mode
set guioptions-=a

" use console dialog instead of popup dialogs for simple choice
set guioptions+=c

" enable horizontal scrollbar
set guioptions+=b

" show wrap break
set showbreak=++++

"load colorscheme
colorscheme wombat

" show japanese charactors (this works only if this file was saved as Sfhit-jis)
highlight ZenkakuSpace cterm=underline ctermfg=lightblue guibg=#555555
au BufNewFile,BufRead * match ZenkakuSpace /　//

" delete buffer but splitted window remains there
command! Kwbd let kwbd_bn= bufnr("%")|enew|exe "bdel ".kwbd_bn|unlet kwbd_bn
command! FKwbd let kwbd_bn= bufnr("%")|enew|exe "bdel! ".kwbd_bn|unlet kwbd_bn

" encoding commands
command! Cp932 edit ++enc=cp932
command! Eucjp edit ++enc=euc-jp
command! Iso2022jp edit ++enc=iso-2202-jp
command! Utf8 edit ++enc=utf-8
command! Jis Iso2022jp
command! Sjis ++enc=cp932

"change encoding commands
command! ChgencCp932 set fenc=cp932
command! ChgencEucjp set fenc=euc-jp
command! ChgencIso2022jp set fenc=iso-2202-jp
command! ChgencUtf8 set fenc=utf-8
command! ChgencJis ChgencIso2022jp
command! ChgencSjis set fenc=cp932

"change hjkl behavior for line wrap
noremap j gj
noremap k gk
noremap gj j
noremap gk k

" tab change
map <F2> <ESC>:bprevious<CR>
map <F3> <ESC>:bnext<CR>
map <F4> <ESC>:bwipe<CR>
map <F9> <ESC>:Kwbd<CR>
map <S-F9> <ESC>:FKwbd<CR>

" gui tab
map <F5> <ESC>:tabprevious<CR>
map <F6> <ESC>:tabnext<CR>
map <F7> <ESC>:tabnew<CR>
map <F8> <ESC>:tabclose<CR>

基本コマンド、操作など

コマンドライン上で

<C-h>

= backspace

<C-w>

入力しようとしてたコマンド, 1word分消す

<C-u>

入力しようとしてたコマンド全消し

<C-d>

ディレクトリ、ファイル、コマンドの候補を一覧（広く）

<tab>

ディレクトリ、ファイル、コマンドの候補を一覧

<C-r>*

レジスタのデータを張り付ける。

<C-r>%

現在のファイル名を張り付ける。
vimgrep+quickFixと合わせてつかったりする。

<C-r><C-w>
<C-r><C-a>

現在カーソルがある位置の、word/WORDをペースト

vimgrep & quickFix

:vim[grep] {patterns} {file}
でgrepが使える。
このとき、{files}にはワイルドカードが使える。
**は、以下のディレクトリ全て（正確には30ディレクトリ下まで）を示す。
*は全ての文字列を示す。

例：
:vim /hogehoge/ *html
同じディレクトリにあるhtmlファイル全部を/hogehoge/で検索
:vim /hogehoge/ **/*html
現在ディレクトリ以下にあるhtmlファイル全部を/hogehoge/で検索

:vim[grep] {patterns} {file} | cw
で、grep結果が分割ウィンドウで、新しいバッファとして開かれる。
これは特殊な機能を持ったバッファで、quickFixという名前。
このバッファには、ヒットしたファイルと行の内容が一覧され、
開きたい個所でEnterを押すと、そのファイルを開いて該当の個所にジャンプできるという、非常に便利なもの。
コレどこにあったっけと、コレ全部変えたいと言う時はvimgrepとquickFixで一気に変更できる。

Visualモードで

<C-E>

マウス位置をずらさず下にスクロール Extra Lines

<C-Y>

マウス位置をずらさず上にスクロール

テキストを選択した状態で

<S->>

インデント１段深く

<S-<>

インデント１段浅く

<C-a>

数値なら加算+1

<C-x>

数値なら減算-1

.

直前の動作繰り返し（インデントぼこぼこ繰り返したりなど）

=

選択範囲を自動インデント

Normalモードで

%

カーソル位置に括弧があるとき、対応する括弧にジャンプ

m{char}

カーソル位置をマークして登録

‘{char}

マークした位置にジャンプ

‘[

最後に編集した個所の最初の位置へ

']

最後に編集した個所の最後の位置へ

f{char}

カーソル位置直後にあるcharという文字へ移動 find

F{char}

カーソル位置直前にあるcharという文字へ移動 findの逆

t{char}

カーソル位置直後にあるcharという文字まで移動（１文字前でストップ） till

T{char}

カーソル位置直前にあるcharという文字まで移動（１文字前でストップ） tillの逆

以下vhogeは、オペレーターとモーションというやつで、vの部分をdだのyだのに変えて、便利に使える。

vw

カーソル位置にある単語を選択（カーソルの前の文字列は選択されない） （ハイフンやカンマを区切り位置とみなす） visual, word

vW

カーソル位置にある単語を選択（カーソルの前の文字列は選択されない） （スペースを区切り位置とみなす） visual, WORD

viw

カーソル位置にあるの単語選択（カーソルの前の文字列も選択される） （ハイフンやカンマを区切り位置とみなす） visual, innner word

viW

カーソル位置にあるの単語選択（カーソルの前の文字列も選択される） （スペースを区切り位置とみなす） visual, inner WORD

vaw

カーソル位置にあるの単語選択（カーソルの前の文字列も選択される） （単語直後にあるスペースまでを１単語とみなす） （ハイフンやカンマを区切り位置とみなす） visual, a word

vaW

カーソル位置にあるの単語選択（カーソルの前の文字列も選択される） （単語直後にあるスペースまでを１単語とみなす） （スペースを区切り位置とみなす） visual, a WORD

vit

xmlタグの中身を選択visual, inner tag

vat

xmlタグごと選択visual, a tag

vi’

シングルクオートの中身選択 visual, inner ‘

vi"

ダブルクオートの中身選択 visual, inner "

va’

シングルクオートごと選択 visual, a ‘

va"

ダブルクオートごと選択 visual, a "

その他vi<, vi{, vi(とかでもその中選択、va<, va{, va(でもそれごと選択になる。

ウィンドウ系コマンド（Normalモードで）

<C-w>v

現在のウィンドウを縦に分割

<C-w>s

現在のウィンドウを横に分割

<C-w>n

横に分割して、空のバッファを開く

<C-w>o

現在フォーカスされているバッファを残し、ウィンドウ分割を解除

<C-w>r

現在のバッファを右のウィンドウへ

<C-w>R

現在のバッファを左のウィンドウへ

<C-w>x

現在フォーカスされているウィンドウに、次のバッファを読みこむ

<C-w>H
<C-w>J
<C-w>K
<C-w>L

現在の分割ウィンドウを一番左/下/上/右へ移動

<C-w>T

現在フォーカスが当たっている分割されたウィンドウを閉じ、新しいGUIタブを開いてこのバッファを表示

<C-w>=

各分割ウィンドウの幅と高さを揃える

<C-w>|

現在の分割ウィンドウを可能な限りでかくする

<C-w><C-w>

次のウィンドウへ

コードを書くときに自分はこう思っているとか、そういう感じの話です。
内容に対するダイレクトなレスではないですけども、見ていて思ったり、
最近自分がぼりぼりコードを書いているときに思ったことをメモがてら返信。

使いまわせるコードを書きたいというのはまーそうなんだけど、使わない機能は作っても大体の場合、無駄になります。組み込まない機能は十分にテストされたものでないので、えてして実用的なものにならないし、使ってないから後から見てなんだっけ？ってなる。こーしたいんだけどっていう追加の必要があれば実装すればいいと思われます。

いくつか作ったら、これはいつも使う必要がでてくるからこういう風にしておこうとか、そういう順序でしか汎用的なものというのは作れないんじゃないかなと。変数名とかも最初は適当でいいし、あとで見てこーかな？って思ったら直すとかそういうレベルで全然問題ない。

作りながら悩んでしまうことはメモっておいて、ひとまず動いたあとで、「動作する状態」を保持しながら、ちょっとずつソースコードを改良して考えればいい。同じ処理を２回かいてたら、なんかできんかとか考えたり、エロい人に相談すればいいんではないかと。

例えば昔、ちび画像ギャラリー的なものを作ったのだけれど、その時は、クラス的な概念が全然わかってなかったので、その仕組みは、１個完結で、増やせないものになってた。でもあとで、同じページの中にそれが出てきたので、このままじゃその部分のコードをまるっとコピーし、関数名をちょっと変え、同じのを使いたい分だけコピるみたいになってしまった。

プログラミングの経験が浅い人がここで、それってね、これnewすればできちゃうんですよみたいなことをいきなりやるのは、そういった問題にぶちあたらないと、解決するのはかなり難しいんじゃないだろうか。

細かいことを言われても、しっくりこなかったら、そうかも程度でとどめておき、明日のオレは昨日自分がなりたかったオレ！的にバンバン書いていけばいいのかなーと。こんな書き方じゃダメな気がする＞＜というのはまさに思いこみでしかなく、思った動作をしていれば、どんなふうに書いていようが、それは「仕様を満たした、テストされたコード」であり、完成品であるー。

当然、色んな事を知っていればソースコードの品質は上がるけれども、たぶんそれはもやもやしたままノックしまくった後でよいのではないかなと。

• Wikipedia – リファクタリング

• jQuery UI
• サンプル1 – テーマ：flick
• サンプル2 – テーマ：ui-lightness
• jquery.ajaxDialog.js
• まとめてzip

The end of Thickbox

ダイアログを開くとき、頼まれる側としては、「Thickboxで。」って言われて頼まれることが非常に多いです。ところが、Thickboxだと、あんまり拡張性がなくて、コールバックを渡したりすることができません。（開いたときに何か実行させたり、閉じる瞬間に何か実行させたりすることができないということ）普通にダイアログ開くだけの時はいいのですが、要件が複雑になると、Thickboxでは対応できないこともあり、自分で 似たようなもの を作ってみたりもしました。最近、Thickboxのページを見たところ、もう開発終わってるので他の使ってくれとのメッセージが出ていたので、他のを試してみることにしました。とりあえず、jQuery UI の dialog を試しました。

なぜjQuery UI dialogを使おうとしたのかというと、jQuery UIの出来がすごい良いと感じたからです。dialogは使ったことが無かったのですが、別の機会でjQuery UIの sortable を使うことがありました。sortableは、その名の通り、要素をドラッグ＆ドロップで並べ替えることができるスクリプトなのですが、ドロップした瞬間、つまんだ瞬間にcallbackを送ることができたり、つまんでいる間にどこそこにclassを付けたりなど、あーこれは必要そうだと思われる機能がほとんど実装されていました。自分でThickboxクローンを作った時も、こういった機能が必要だから作ったのですが、あーこれ使っておけばよかったとか思いました。jQuery UIと銘打ってるだけあって、そこらへんに転がっている同系統のものよりかははるかに作り込まれていると思います。

$().ajaxDialog

ですが、jQuery UIを使ってみたところ、これは、ページ内のコンテンツをダイアログとして表示する機能のみを有していました。大体、通常のサイトで使う時は、今までwindow.openをして開いていたようなものをちょろっと開くことが多いです。そんなこんなで、$.ajaxでページ内容を取ってきてjQuery UI dialogにするのが、この$().ajaxDialogです。

使い方は以下のような形です。optionsには、jQuery UI の dialogに設定したいものを指定します。

$(function(){

    $('a.dialogOpen1').ajaxDialog({
        bgiframe: true,
        modal: true,
        buttons: {
            'close': function(){
                $(this).dialog('close');
            }
        }
    });

});

<a href="test01.html" class="dialogOpen1" title="test hoge test hoge1">Dialog1 - 01</a>

これで、Thickboxみたいに、クリックしたらダイアログが開く形になります。ajaxDialogに渡すオプションの値は、ほぼそのまま、jQuery UI – dialogに渡されます。指定できるオプションの詳細については　jQuery UI – dialog　のページを参照のほど。

jQuery UI のいいところは、前述したとおり、ダイアログ開いたらどうするとか、閉じるときどうするとかいうコールバックが色々用意されているところが非常に大きいのですが、jQuery UIのテーマが手軽に使えるという所も利点です。jQuery UI – ThemeRoller　のページにて、すでに用意されているテーマを選んだり、それらをちょろっとカスタマイズすることができます。ThemeRollerのページでテーマを選んだ後、jQuery UIのダウンロードを行うと、そのテーマのCSSが一緒に入っていますので、そのCSSを読み込むだけで、気軽に色々なデザインが使えます。

まぁしかし、このままだとloading中の表示を出せないし、画像だっけを出すようなこともできませんので、その部分のみ追加で作るなりしてバージョンアップしていくか、また別のものを試してみようかと考えています。

参考

• jQuery UI
• jQuery UI – dialog
• jQuery UI – ThemeRoller
• Thickbox

• アイテム販売を始めたmixiサンシャイン牧場のクレームがすごい – ぼくはまちちゃん！(Hatena)

今まで通り無料で遊べるのに、一気に冷めただの課金するのがアホらしいとかの書き込みばかり、一体なんなんでしょうかこれは。自分としては、「みんなで楽しく遊んでた公園の滑り台、ちょっとボロいけど、ある日横にローラー滑り台が設置され、これが1回10円。そんな金もうけ主義の公園にはもう行ってやんないね！」みたいな幼稚な感じに見えてしまいます。以下、うだうだ思ったこと。

掲示板に書き込むのは、一部のセグメントされた層の人たちだけ

まず、そこまで非難を受けているわけではないのではないかということ。
掲示板に書き込む人らというのは、ごく一握りの層の人だけだということは、一つの事実としてあるかと思います。サンシャイン牧場は、mixiアプリの中でかなりの人気ゲームであり、プレイ人数が非常に多い。このため、1%の人が不満をもっていて、その人らがガーガー書き込めば、猛烈な非難を受けているように見えてしまいます。ゲームをしていても、その掲示板に書き込むという行為は、かなりポテンシャルが必要とされます。このゲームすげー楽しいとか、最悪とか、そういう感想を持つ人らは良く書きこみますが、普通にログインしてちょろっと遊んでいる人は、書き込み等を行わないんじゃないでしょうか。

やけにアンチの人が集まってアマゾンで販売しているゲームのレビューが偏ってしまったりすることが、たまにあります。（さらにそれが発売前だったりとかも・・・）ほかにも、Webで集計するアンケートというのは、街頭でアンケートをとるのとはわけが違います。このようなアンケートを正確にとるには、アンケートの取り方などの条件に気を使わないと、どうしても、かなりセグメントされた層の人らになってしまいます。ランダムなサンプルを選ぶことが難しい。だから、実際に掲示板を見ると、ものすごい勢いで非難されているように見えるが、実際に不満を持っている人はごくわずかなのではないかとか。

理想の世界では

アイテム課金（を含め、追加で課金されるようなゲーム）の理想としては、「普通に遊んでいても無料で楽しめるが、ちょっとおこずかいを払えばもっと楽しくなる！」という状態かと思います。これがうまくいけば、お金を払わなければプレイできないゲームよりも多くのユーザーを集めることができますし、やりこみたい人にとってのみお金がかかるという状態にすることができます。しかし、なぜそのような状態にならないんでしょうか？

もし、今までに一切のゲームをやったことがない人がサンシャイン牧場をプレイし、それが初めてのゲームなのであれば、この理想にピッタリはまるということもあるのかなーと思います。「このゲームというものは、お金を払うことで、もっと色々なことができるようになるんだね、お小遣い程度でできるし、おもしろいね」と。ところが、実際にこのようにはならない。これはなぜ？

アイテム課金ゲームとそれ以外は別物？

色々考えたんですが、「アイテム課金のゲーム」というのが、「アイテム課金を前提としていないゲーム」とは、全く別の視点の下に開発されないとダメなのかなーとか思いました。「アイテム課金のゲーム」の多くは、今までコンシューマーで出ていたRPGだのアクションゲームだのを、課金という体系を付けてオンラインに持ってきたようなものが多いかなと思います。たとえば、強い武器防具がお金で買えたり、お金を払うとステータスをあげられたりといったものです。

こういった方法だと、コンシューマーゲームばかりやっていたユーザーにとっては、今まで普通にプレイしていれば手に入ったものが、オンラインになったとたん有料になり、「結局は金ですか！」というような感覚になってしまうのではないかと。「あのボス倒せば手に入ったはずの武器をお金で売るのね！」って感じです。実際には、コンシューマーゲームは、先にお金を払っているだけなのですが、プレイ中はそんなことは忘れてしまっています。このため、いままで無料だったのが有料なんかいーという気分になってしまうのかなと。ここでは、そのアイテムがその価値に見合うものか否かという点は無視されます。たとえそれが10円であっても、「金か！」という結論になってしまう。

また、コンシューマーゲームでは、ほとんどの場合、プレイヤーは支配的な立場になることができます。単純にプレイ時間を多くかけ、プレイヤーのスキルも磨いていけば、必ずその立場にたどり着くことができる。レベル99にはれば最強！とかそんな形。ところが、アイテム課金前提のゲームでは、この支配権は、ゲーム運営側により操作されることになる。これがなんか気持ち良くないのかなと。お金の力で有利不利が生まれることで、「自分が支配」という状態ではなくなります。自分が支配状態になるためには、お金をかけなければならない。これがプレイヤーをしらけさせてしまうのかもしれないとか思いました。

しかし、そもそもなぜゲームを買うのかというと、それは、「ゲームをプレイすることで得られる体験を買っている」ことであると自分は思うのですが、どうにもそういったユーザーの人らには、そのように思えないみたいなんですよね。支配的な状態になるのがゲームのゴールなのかもしれないですが、それは結果であり、そのために「無駄な時間を費やした」などと思ってしまっているようでは、「ならゲームやらなきゃいいじゃん…」と言いたくもなります。1000円払ってレベル99になったらそれで満足なわけがないと思うんですが…

じゃーどうすりゃいいんじゃ

じゃーどうすればいいのかっては分かんないですが、アイテムなり課金の場合は、そもそものゲーム自体の仕組みを、今までとは違ったものにしないといかんのではないかなーと思います。金払えば単純に強くなれますとかいうのではなくて。

「支配的な立場になることがゲームの本質ではない！」とか言ったとしても、それは一つの考えなだけであり、支配的な立場になることも面白くはあります。やっぱりゲームやってりゃ、そのゲーム内でキャラクターを強くしたりなんなりしたいですし、それがおもろいですから、プレイヤーをしらけさせずに、そこにうまくはまるように作らないといかんのかなーと思うのです。

「ゲームをプレイすることで得られる体験を買っている」という考えからすると、「お金を払うことでレベルが上げることができる」という仕組みは、売った体験をスキップさせるためにさらにお金を取っているように見えてしまい、よくわからない仕組みに見えてしまいます。それが100％ダメってわけではなくて、そこには非常に繊細な注意が必要になると思うんです。そもそもずっと遊べて楽しいゲームを作るっていうこと自体が難しいことですから、そこにお金を絡めてさらに楽しくってのは、非常に難しいはずなんです。単純に有利不利を生むだけの課金は、ゲーム自体の寿命を縮めそう。

例えばRPGみたいなものなら、課金で強い武器とかではなくて、課金すると、戦士、僧侶、魔法使いに加えて、魔法戦士と盗賊をプレイすることができます。でもそんなにバカ強いわけではありませんとか。シムシティがオンラインになったとしたら、普通のフィールドとは別に、海ばっかりで土地はせまいけど漁業が発達しやすいフィールドが選べますとかそんなのとかどうなんでしょう。選択肢が広がりますとかそういう形で。もちろん追加要素が無い状態でつまんなかったらまた非難ゴーゴーですが。

お互いのレベルやスキルが異なってしまうと、差が出てきて面白みが薄れてしまうゲームは多いです。そういう状態を起こさず、みんなで楽しめるゲームがあれば、課金されようと課金されまいと、最高だろうなーとは思いますねー。

課金に対する告知がされなかったこと

ほかに、運営側からの告知がされなかったことも、非難の原因になってそうです。
サンシャイン牧場について、アイテム課金を始めることは、アイテム課金が始まるまで告知されていませんでした。この点、サービス運営側からすると、「こんな楽しいオプションサービスを追加しました、どうよ！」といきなり発表する、ドッキリびっくり嬉しいような効果も期待できるのかもしれませんが、結果的にこれは最悪な感じの受け取り方をした人が多かったようです。課金制度という仕組み自体はダメなわけではないと思うけど、そうするなら最初からそう告知しておくべきだったのかも。Web作る仕事だって、最初から、これ以上は追加開発になるのでコストかかりますって言わなけりゃ、クライアントにとっては、なんぞそれ！そんなこともやってくれないの！なのです。ほうれんそうほうれんそうほうれんそう。

支払方法

クレジットカードでしか支払えないのもちょっと非難されてました。たしかにこれだと学生以下の年齢の層は払いづらい。まぁそれはそのうち何とかなると思いますが、ついでなかんじでボコボコたたかれてました。

自分は、サンシャイン牧場は結構あそんでいて、課金が始まっても有利不利とかでしらけるようなゲームでもなく、タダでも遊べて、レベル差も気にならない、まったくもって良心的なゲームで全然アリだと思うのですが、まーなんというか、ゲームで課金するというのは本当に難しいもんなのだなーと思いました。現実世界では高いお金払っておいしいメシを食ったり、漫画買ったりなんなりしてるわけですから、ゲームにお金払うのもそこまで抵抗がある行為のではないとは思うのですがねー。ただ、水道水はタダだけど、アルプスの天然水がおいしくてちょっとだけお金がかかるように、ゲームも無料なものが多いので、秀でたものにしなければ「水道水のほうがうまいし！なに調子こいてんですか！」とか非難をうけてしまいやすいのかもしれないですな。

参考

• アイテム販売を始めたmixiサンシャイン牧場のクレームがすごい – ぼくはまちちゃん！(Hatena)
• wikipedia – アイテム課金
• 4Gamer.net ― 【切込隊長】そろそろ「無料」と銘打つのはやめにしないか，オンラインゲーム業界は
• mixiのサンシャイン牧場にリアルクレジットカードシステムが導入された件:アルファルファモザイク – ２ちゃんねるスレッドまとめブログ
• mixiアプリ「サン牧」200万ユーザー突破　有料機能導入 – ITmedia News
• 痛いニュース(ﾉ∀`):箱○テイルズ、レベルアップやゲーム内のお金をDLCで販売