« 2008年03月 | メイン | 2008年05月 »



2008年04月 アーカイブ

2008年04月03日

やる夫がデザインパターンをやるようです 第7回

≪第6回第8回≫

       ____
     /⌒  ⌒\ ホジホジ
   /( ●)  (●)\
  /::::::⌒(__人__)⌒::::: \ ファクトリパターンて
  |    mj |ー'´      |全然イミフだお
  \  〈__ノ       /
    ノ  ノ 






           ____ 
        /⌒  ⌒\ どう見てもインスタンスの生成を
.      /( ●)  (●)\ 押付けてるだけだお
     / ::::::⌒(__人__)⌒::::: \イミフてか意味ないお
    |      |r┬-|     |  
     \       `ー'´     / 
    ノ            \ 
  /´               ヽ                 カ 
 |    l   l||l 从人 l||l      l||l 从人 l||l   カ    タ 
 ヽ    -一''''''"~~``'ー--、   -一'''''''ー-、.     タ 
  ヽ ____(⌒)(⌒)⌒) )  (⌒_(⌒)⌒)⌒)) 
     ┌┬┬┐┌┬┬┬┐┌┬┬┬┐┌┬┬┬┐ 
  ,. - ''"| ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ρ ̄`l 
   ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ノ ̄ 






          ____         _ _ _ _ _ _ _ _ _ _ _ 
       /_ノ  ヽ、_\      ( 最近やたら先輩風吹かしたがる
.     / (● ) (● )\   ( アーキテクトにきいてみるか。。
    ///////(__人__)///\   ◯  
    |              | 。O  ̄  ̄  ̄  ̄  ̄  ̄  ̄  ̄  ̄  ̄ 
     \           / 
    ノ            \ 
  /´               ヽ 
 |    l              \ 
 ヽ    -一'''''' 






   ファクトリパターンの意味がわからないお
   おいらがわかったって言うまでいろんな角度から説明してほしいお
   / ̄ ̄\           ___ 
 /   /  \        /⌒  ⌒\ 
 |    ( ○)(○)  プニ   (● )  (● ) \ 
. |     (__人_(ニ~`ヽ、 /:::⌒(__人__)⌒::::: \ 
  |     ` ⌒´(((_⊂>ヽ|     |r┬-|      | 
.  |         }    \ \   `ー'´      / 
.  ヽ        }      ゝ-|          ヽ 
   ヽ     ノ        \        ヽ   \






   / ̄ ̄\           ___ 
 /   /  \        /⌒  ⌒\ 
 |    ( ○)(○)       (○ )  (○ ) \ フヒ?
. |     (__人_(ニ~`ヽ、 /:::⌒(__人__)⌒::::: \ 
  |     ` ⌒´(((_⊂>ヽ|     |r┬-|      | 
.  |         }    \ \   `ー'´      / 
.  ヽ        }      ゝ-|          ヽ 
   ヽ     ノ        \        ヽ   \
今回はいきなりパターンの解説からです。新人のプログラマだったころに、先輩に「○○のインスタンスがほしいときはこれ使って。」と
Product myInst = fctryInst.createPrdct( "Hoge" );
こんな風に教わったりしたことはありませんでしたか?ワタシもかつてはやる夫のようにこのファクトリ(メソッド)パターンの意味が全くわかりませんでした。
// ファクトリを使うこと。
// Product myInst = new HogeProduct();
Product myInst = fctryInst.createPrdct( "Hoge" );
new でそのまま実装した次の日、CVSからソースをチェックアウトすると先輩にしっかり上記のようにコメントをもらったことがあります。上記の createPrdct メソッドの中身を見てみると、パラメータをもらって、適宜 Product クラスを返すというものなのですが、以下にサンプルソースを載せてみます。
Product createPrdct( String param )
{
    if( param.equals( "Hoge" ) ){
        return new HogeProduct();
    }
    else if( param.equals( "Moge" ) ){
        return new MogeProduct();
    }
    else if( param.equals( "Fuga" ) ){
        return new FugaProduct();
    }
    return null;
}
上記のようにcreatePrdctメソッドはProductクラスを継承したHogeProductや、MogeProduct、FugaProductをもらったパラメータを頼りに返すというものです。これを見たとき、ワタシが思ったのは「こんなのインスタンスの生成を押付けてるだけじゃんか。なにが嬉しいの?」でした。発想がやる夫とあまり変わりません。フヒヒ。
   / ̄ ̄\  ( ;;;;( 
 / _ノ  ヽ\ ) ;;;;) 
 |  ( ○) (○)/;;/   
. |   (__人__) l;;,    
  |    ∩ ノ)━・'/   
.  |   /  ノ´ } 
.  ヽ  / /    } (こいつに何を教えてもザルだからな。。。)
   ヽ/ /   ノ   工場萌えみたいなもんだ。ハヤリだハヤリ。






 あきらかに相手にされてないお。。。
 おいらみたいなスーパーハカーはなかなか理解されないもんだお
 こんな会社やめてやるお
  ::::::::  ::    ::     :::::  ::  :::
  ::::::  ::   ____   :::::  ::::  :::
  ::::::  :::: /  :::  \ :::   :::   ::
  ::::  ::::/   ::     \::  :::  ::
 ::::  /:::    ─    ─ \ ::  ::
 :::  |  ::   .(○)  (○)  | :  ::::
  :::   \     (__人__)  ,/ :  :::
  ::  ノ      ` ⌒´   \ :   :::
  /´               ヽ  :::
 |    l              \:::
 ヽ    -一''''''"~~``'ー--、   -一'''''''ー-、.
  ヽ ____(⌒)(⌒)⌒) )  (⌒_(⌒)⌒)⌒))






        / ̄ ̄\ この新人の扱いはアメよかムチだな。。。JK
      /       \
      |::::::        |
     . |:::::::::::     |
       |::::::::::::::    |          ....,:::´, .
     .  |::::::::::::::    }          ....:::,,  ..
     .  ヽ::::::::::::::    }         ,):::::::ノ .
        ヽ::::::::::  ノ        (:::::ソ: .
        /:::::::::::: く         ,ふ´..
-―――――|:::::::::::::::: \ -―,――ノ::ノ――
         |:::::::::::::::|ヽ、二⌒)━~~'´ 






           ____ とりあえずGoogleに聞いてみるお。
        /⌒  ⌒\ 会社辞めるのはそれからだお。
.      /( ●)  (●)\ 
     / ::::::⌒(__人__)⌒::::: \ 
    |      |r┬-|     |  
     \       `ー'´     / 
    ノ            \ 
  /´               ヽ                 カ 
 |    l   l||l 从人 l||l      l||l 从人 l||l   カ    タ 
 ヽ    -一''''''"~~``'ー--、   -一'''''''ー-、.     タ 
  ヽ ____(⌒)(⌒)⌒) )  (⌒_(⌒)⌒)⌒)) 
     ┌┬┬┐┌┬┬┬┐┌┬┬┬┐┌┬┬┬┐ 
  ,. - ''"| ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ρ ̄`l 
   ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ノ ̄ 






       オブジェクト生成  使用の分離 意思決定
      先送り  委譲  カプセル化 一元化
         ____
      /::::::─三三─\ わ、わざと難しい日本語つかってるに
    /:::::::: ( ○)三(○)\ 違いないお。さっぱりだお。
    |::::::::::::::::::::(__人__)::::  | ________
     \:::::::::   |r┬-|  / | |          |
    ノ::::::::::::  `ー'´   \ | |          | 






    こんな会社もう思い残すものはないお。。。
         ___
       /::::::::::::::::\
      /:::::─三三─\ 
    /:::::::::(○)三(○).\
/⌒)⌒)⌒.:::::::::: (__人__) :::::: \   /⌒)⌒)⌒)
| / / /..    ` ⌒´    | (⌒)/ / / /,,-''ヽ、
| :::::::::::(⌒)          /  ゝ ::::::.,,-''"    \
|     ノ           \  /_,-'"        \
ヽ    /             ヽ /\           \
 |    |        __   //\\           \
             /|[]::::::|_ / \/\\         /
           ./| ̄ ̄ ̄ ̄ //\ \/  \      //    ___
         |  |:::「「「「「「 / \/\  /\\   /:::/   ./| 
       _..|  |:::LLLLL//\ \/  \/\\/::::::/  /  | ロ  .|l
      / llllll|  |:::「「「「 / \/\  /\ .\/ ./::::::::/  / ./ .
__     llllll|  |:::LLL.//\ \/  \/\  /::::::::/   | /  .| ロ
          |  |:::「./ .\/\  /\ \/ /::::::::/⌒ヽ、| ||/ ..|
          |  |:::l//\ \/  \/\_, -― 、  ''"⌒ヽ,_
                (⌒ヽ、_,ノ⌒Y"    Y     .....⌒)
            (⌒ヽー゙ ....::(   ..::.......  .__人.....::::::::






  
   / ̄ ̄\  ( ;;;;( 
 / _ノ  ヽ\ ) ;;;;) 
 |  ( ○) (○)/;;/   
. |   (__人__) l;;,    
  |    ∩ ノ)━・'/   
.  |   /  ノ´ } なんか不穏なこと考えてそうな顔してやがる
.  ヽ  / /    } 
   ヽ/ /   ノ 






やる夫。インスタンスの生成を押付けてるのはそのとおりだ。
常識的に考えて、仕事ができるやつに仕事をさせるだろう。
もっと言うと、お前が信用できんからお前はインスタンスの生成はするな
ということだ。
ファクトリが返すインスタンスが本当はなにもんかも知らなくていい。
   / ̄ ̄\  
 /   _ノ  \ 
 |    ( ●)(●)
. |     (__人__)
  |     ` ⌒´ノ
.  |         }
.  ヽ        }
   ヽ     ノ
   /    く
   |     \
    |    |ヽ、二⌒)






         ___
       / ⌒  ⌒\(もっと言い方選んでほしいお)
      / (○)  (○) \ 
    /   ///(__人__)/// \ 
     |   u.   `Y⌒y'´    |
      \       ゙ー ′  ,/
      /⌒ヽ   ー‐    ィヽ
      / rー'ゝ       〆ヽ
    /,ノヾ ,>      ヾ_ノ,|
    | ヽ〆        |´ | 
ファクトリはインスタンスの生成をカプセル化するものです。カプセル化しておくと何が嬉しいのかというと、ストラテジーパターンでもやったように、インスタンス生成の変更があった場合、これを一元的に管理することができます。やる夫のようにいろんなところにnewをちりばめてしまうと、newをgrepして修正する羽目にもなりかねません。ちなみにストラテジーパターンで使うビヘイビアをファクトリで返してあげることがよくあります。

ちなみにファクトリは、シンプルファクトリ、ファクトリメソッド、アブストラクトファクトリとパターンがいくつかあります。次のポストはそこらへんをもう少し突っ込んで書きたいと思います。
≪第6回第8回≫


[ 最近のエントリーとその関連エントリー ]


[ スポンサードリンク ]

2008年04月28日

ExtJS Ext.grid.GridPanelの使い方

simplegrid.PNG ExtJSの使い方をポストします。このExtJSのエントリはこちらのブログに整理してアーカイブしていきます。

まず、ExtJS javascriptライブラリをダウンロードページより、アーカイブ(Ext JS 2.1 SDK)をダウンロードして解凍してください。20080428時点のバージョンは ext-2.1 です。解凍したら、以下のパスのファイルを開いて見ましょう。gridのサンプルはココからも見れます。
【パス】
ext-2.1\examples\grid\array-grid.html
このウィジェットがgridと呼ばれるものです。エクセルのような罫線で表現されたウィジェットで、
  • ソート
  • 各セルの編集
  • グルーピング
  • サマリ
  • フィルタ
なんかも出来ます。すごいですね。今日はこのgridの基本的な実装を解説してみたいと思います。あと、いきなりgirdとか言われても・・と言う方にはここにExtJSのチュートリアルを簡単にまとめてみました。
まず、以下に今回解説するgridのソースを全て載せてみましたので、この実装方法とコンフィグを解説します。

動作サンプルとサンプルソース
Ext.onReady( function(){
    var store = new Ext.data.SimpleStore({
        fields: [
            { name: 'a' },
            { name: 'b' }
        ],
        data:[ 
            [ 'hoge', 1 ],
            [ 'moge', 2 ],
            [ 'fuga', 3 ] 
        ]
    });

    var clmnModel = new Ext.grid.ColumnModel([
        { header: "title", width: 200, dataIndex: 'a' },
        { header: "number", width: 100, sortable: true, dataIndex: 'b' }
    ]);
 
    var grid = new Ext.grid.GridPanel({
        store:store,
        colModel:clmnModel,
        renderTo:'renderTarget',
        title:'simple-grid',
        stripeRows:true,
        height:150,
        width:316,
        frame:true
    });
});

【Ext.grid.GridPanelの解説】

それではgirdを見ていきたいと思います。
    var grid = new Ext.grid.GridPanel({
という箇所がグリッドそのものになります。この定義の仕方は、これからたくさん出てくるので先に解説してしまいます。
Ext.grid.GridPanel({});の{}定義体はオブジェクトリテラルと呼ばれるもので、ExtJSではこの書式で実装していくことがほとんどです。使ってみればそんなに難しいものでは無く、
オブジェクトリテラルとは
  • 中カッコ{}で囲まれて、
  • カンマ,を使ってプロパティが区切られて定義されるもの
だと理解すればいいのではないかと思います。多分乱暴に色々切り捨てた言い方をしたのかもしれませんが、ワタシはそう理解しています。
そしてこのオブジェクトリテラルのプロパティ1つ1つを、ExtJSではコンフィグオプションと呼んでいます。
Ext.grid.GridPanel({ /* コンフィグオプション群 */ })
このコンフィグオプションによって、いろんな表示設定や、機能設定が出来るようになっています。
サンプルソースのgridのコンフィグオプションを上から見ていくと、
store / colModel / renderTo / title / stripeRows / height / width / frame とありまして、このほかにも様々なコンフィグオプションがありますが、GridPanelで必須とされるのは store と colModel になります。ただ、renderToで表示先を指定してあげないと、このサンプルソースではgridが表示されませんので、このstore / colModel / renderTo以外をコメントアウトしたりしてどんなコンフィグなのか試してみるといいかもしれません。

それではこのコンフィグを解説していきたいと思います。
storeは、APIDocumentに
store : Ext.data.Store
The Ext.data.Store the grid should use as its data source (required). 
とあり、storeはデータソースであることがわかります。データの実体ですね。その型はExt.data.Storeを使っているよーと言うことです。

colModelは、
colModel : Object
The Ext.grid.ColumnModel to use when rendering the grid (required). 
とあり、girdの列定義をあらわしています。
ちなみにcolModelは、cmというコンフィグオプション名でもよくて、cmは、colModelを表すshorthand(ショートハンド(エイリアス?))だとAPIDocにあります。どちらでもいいですが、colModel / cm は必須コンフィグです。

renderToは、
    renderTo:'renderTarget',
先にも記述したとおり、表示先を指定するコンフィグです。document.bodyとか、DOMノードのidを表示先に設定してあげます。サンプルソースのように、コンフィグオプションでレンダリング先を指定してあげることも出来ますし、出来上がったgridから以下のようにしてメソッドとして呼び出すことも出来ます。(メソッド名とコンフィグオプションは必ずしも一致しませんし、コンフィグオプションが全てメソッドとして利用できるわけではなさそうです。)
    var grid = new Ext.grid.GridPanel({ /* config options */ });
    grid.render( 'renderTarget' );
サンプルソースで使ったコンフィグの残りは表示レイアウトのオプションになります。
    title:'simple-grid',
    stripeRows:true,
    height:150,
    width:316,
    frame:true
titleはgirdのタイトルになります。これを設定しないとタイトルバーごと表示されません。何かを設定すれば、(例えば空文字でも)タイトルバーは残ります。
stripeRowsは、行を縞々に表示するコンフィグです。ちょっと色が薄いので判りにくいですが、これをtrueにすると行が縞々に表示されます。stripeRowsコンフィグを使わないで実装した場合、デフォルト値がfalseですので、縞々にはなりません。
height / widthはそのまま、縦・横の幅を表します。
最後のframeはこのgridの枠です。true / false で表示・非表示を表していて、デフォルトはfalseです。
コンフィグオプションをつけたり消したりして、表示を見て試してみれば判りやすいかと思います。

【Ext.data.SimpleStoreの解説】

では、GridPanelに必須コンフィグのstoreの解説です。
    var store = new Ext.data.SimpleStore({
        fields: [
            { name: 'a' },
            { name: 'b' }
        ],
        data:[ 
            [ 'hoge', 1 ],
            [ 'moge', 2 ],
            [ 'fuga', 3 ] 
        ]
    });
ソースは上記のようになっています。gridと同じようにExt.data.SimpleStore({ /* コンフィグオプション群 */ })コンフィグオプションを設定します。Ext.data.SimpleStoreはExt.data.Storeを継承したデータストアで、配列でStoreデータを簡単に構築できるクラスです。見ると、fieldsもdataも配列で構築されていることがわかります。
    fields: [
        { name: 'a' },
        { name: 'b' }
    ],
fieldsは、ストア上のフィールド定義です。名前に a / b と付けてみました。gridそのものを見ると列ヘッダにtitle / numberとありますが、ストア上にあるフィールド名は a / b となります。(girdはStoreとColumnModelのファサード(ラッパー)だと理解すればいいと思います。)データを正しくマッピングできるように重複しない名前を定義してあげてください。(マッピングは次のExt.grid.ColumnModelで行います。)
    data:[ 
        [ 'hoge', 1 ],
        [ 'moge', 2 ],
        [ 'fuga', 3 ] 
    ]
dataは、そのまんまデータを表していて、多次元配列(2次元配列)で定義します。表のイメージを実装してあげることが出来るので便利ですが、多次元配列で定義することに注意してください。例えば、fieldsが1つの場合でも
    data:[ 
        'hoge', 
        'moge', 
        'fuga' 
    ]
とせずに
    data:[ 
        [ 'hoge' ], 
        [ 'moge' ], 
        [ 'fuga' ] 
    ]
のように多次元配列で構築する必要があります。

【Ext.grid.ColumnModelの解説】

    var clmnModel = new Ext.grid.ColumnModel([
        { header: "title", width: 200, dataIndex: 'a' },
        { header: "number", width: 100, sortable: true, dataIndex: 'b' }
    ]);
まず、ソースを抜き出してみました。このクラスは
Ext.grid.ColumnModel([{ /* コンフィグオプション群 */ },{ /* コンフィグオプション群 */ } ]);
のように、配列でコンフィグオプションをイニシャライズする必要があります。カラム定義が1つの場合は、コンフィグオプション群も1つになるかと思いますが、以下のように配列で定義しないで実装すると正しく表示されません。(gridの中身が表示されなくなります)
    // 正しく表示されない
    Ext.grid.ColumnModel({ /* コンフィグオプション群 */ });

    // 正しく表示される
    Ext.grid.ColumnModel([ { /* コンフィグオプション群 */ } ]);
コンフィグオプションの中身はその機能や、表示系のオプションがたくさん用意されていて、今回使ってみた機能はsortableというコンフィグです。読んで字のごとく該当列がソートできるか出来ないかを表すコンフィグです。デフォルト(sortableを実装していない場合)はソートできないので、titleフィールドはソート表示がグレーアウトされていて、numberフィールドはソードが出来るようになっています。
    { header: "title", width: 200, dataIndex: 'a' },
    { header: "number", width: 100, sortable: true, dataIndex: 'b' }
headerは列のタイトルとなるコンフィグで、widthは列の幅を表しています。dataIndexは上述のstoreで定義したnameとマッピングしています。必須ではありませんので定義しなくても表示されますが、明示的にマッピングして表示してあげたほうがいいかと思います。
他にもこのサンプルソースにすぐ使えそうな機能コンフィグとして以下のようなものがあります。editorというコンフィグで各セルの編集が出来るようになるのですが、これはgirdそのものがExt.grid.EditorGridPanelでないと機能しないようです。(次回解説します。)
  • hidden:Boolean
    • 列そのものを表示させるかどうかです。trueにすると非表示となります。カラムメニューから再表示させることが出来ます。
  • hideable:Boolean
    • 列を非表示に出来るかどうかです。falseにすると非表示にすることが出来なくなり、カラムメニューから該当列の表示・非表示のチェックボックスが消えます。
  • resizable:Boolean
    • 列の幅をリサイズできるかどうかです。falseにすると、リサイズが出来なくなります。
  • menuDisabled:Boolean
    • 列メニューを使えるようにするかどうかです。trueにすると、該当列の列メニュードロップダウン表示(▼←こんなの)がなくなりメニューが使えなくなります。
  • tooltip:String
    • 列にマウスをあわせたときにtooltipが表示されます。
というわけで、gridの解説をしてみました。ワタシの理解を多分に含めておりますので、誤った情報である可能性がありますのでご注意ください。

[ 最近のエントリーとその関連エントリー ]


うちの妻ってどうでしょう?が面白すぎる!

DSCF2349.jpg 「うちの妻ってどうでしょう?」著:福満しげゆきを買いました。
2chのスレで4月18日に発売だって書いてあったので、そのころ書店に行ってみたのですが、どこの書店にもなくて結局予約をしたのですが、28日発売だったんですね。昨日、予約した書店に行ってまだ入ってませんか?って聞いて、今日発売日だったと判明しました。オマエどんだけ福満好きなんだよ見たいな目で見られた。(以前も小規模な失敗を予約したので覚えられてる)

とはいえ、最高に面白いです。なんかウチの家庭とかぶるとこもあったりするので親近感が沸きます。要所〃、俺もそう思ってたー!てとこがあるんです。

・ピンキリの話
→ピンが1だということを知らなかった。

・18時とかいう言い方をやめてほしい
→福満さんと全く同じ間違え方(勘違い)をする

・視界にアメーバのような微生物が見える
→どうみてもミジンコぴんぴん現象のことです

などなど。
アクションも読むようにしようかなぁ。小規模よか面白いしなぁ。

[ 最近のエントリーとその関連エントリー ]


やる夫がデザインパターンをやるようです 第12回

   これまでお前に教えたデザインパターンは
   ・ストラテジーパターン
   ・デコレータパターン
   ・シンプルファクトリ
   ・ファクトリメソッド
   ・アブストラクトファクトリ
   ・シングルトンパターン
   と、もう6つになるな。
   / ̄ ̄\
 /   _ノ  \
 |    ( ●)(●)
. |     (__人__)
  |     ` ⌒´ノ
.  |         }
.  ヽ        }
   ヽ     ノ
   /    く
   |     \ 
    |    |ヽ、二⌒)






   そうだお。もう6つもおぼえたお。
   飲み込みが早い新人で会社も救われてるお
   つぎのパターンを早くよこせお。
           ____ 
        /⌒  ⌒\ 
.      /( ●)  (●)\ 
     / ::::::⌒(__人__)⌒::::: \ 
    |      |r┬-|     |  
     \       `ー'´     / 
    ノ            \ 
  /´               ヽ                 カ 
 |    l   l||l 从人 l||l      l||l 从人 l||l   カ    タ 
 ヽ    -一''''''"~~``'ー--、   -一'''''''ー-、.     タ 
  ヽ ____(⌒)(⌒)⌒) )  (⌒_(⌒)⌒)⌒)) 
     ┌┬┬┐┌┬┬┬┐┌┬┬┬┐┌┬┬┬┐ 
  ,. - ''"| ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ρ ̄`l 
   ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ノ ̄ 





  次に覚えるパターンはテンプレートメソッドというパターンだ。
  テンプレートってのはどういう意味だかわかるか?
        / ̄ ̄\
      /       \
      |::::::        |
     . |:::::::::::     |
       |::::::::::::::    |          ....,:::´, .
     .  |::::::::::::::    }          ....:::,,  ..
     .  ヽ::::::::::::::    }         ,):::::::ノ .
        ヽ::::::::::  ノ        (:::::ソ: .
        /:::::::::::: く         ,ふ´..
-―――――|:::::::::::::::: \ -―,――ノ::ノ――
         |:::::::::::::::|ヽ、二⌒)━~~'´ 







  2chでスレッド立てるときに、前のスレ立て人が書き込んだ注意とか
  リンクとかいろいろ継承して使うあの「テンプレ」のことかお?
      ____
    /_ノ   ヽ_\
   /( ●) ( ●)\
 / ::::::⌒(__人__)⌒:::::\
 |        ̄      |
 \              / 






  まぁそのとおりだ。
  テンプレートといえば、雛形とか定型書式とかそういうものだ。
  「テンプレートメソッド」といえばメソッドがテンプレート化されている
  ということを想像するだろう。
   / ̄ ̄\
 /   _ノ  \
 |    ( ●)(●)
. |     (__人__)
  |     ` ⌒´ノ
.  |         }
.  ヽ        }
   ヽ     ノ
   /    く
   |     \ 
    |    |ヽ、二⌒)







   ソウゾウシマスネー
       ____
     /⌒  ⌒\ ホジホジ
   /( ●)  (●)\
  /::::::⌒(__人__)⌒::::: \ 
  |    mj |ー'´      |
  \  〈__ノ       /
    ノ  ノ 







   (もう説明に飽き始めやがったな)
   今回のパターンはもう既にこれまでに何度も出てきている。
   単純に処理をテンプレート化したい場合、お前ならどうする?
   / ̄ ̄\  ( ;;;;( 
 / _ノ  ヽ\ ) ;;;;) 
 |  ( ●) (●)/;;/   
. |   (__人__) l;;,    
  |    ∩ ノ)━・'/   
.  |   /  ノ´ } 
.  ヽ  / /    } 
   ヽ/ /   ノ 








   ソウゾウシマスネー
       ____
     /⌒  ⌒\ ホジホジ
   /( ●)  (●)\
  /::::::⌒(__人__)⌒::::: \ 
  |    mj |ー'´      |
  \  〈__ノ       /
    ノ  ノ 









   ・・・やる夫。ハナシは進んでるぞ。
   / ̄ ̄\  ( ;;;;( 
 / _ノ  ヽ\ ) ;;;;) 
 |  ( ○) (○)/;;/   
. |   (__人__) l;;,    
  |    ∩ ノ)━・'/   
.  |   /  ノ´ } 
.  ヽ  / /    } 
   ヽ/ /   ノ 








   ソウゾウシマスネー
       ____
     /⌒  ⌒\
   /( ―)  (―)\
  /::::::⌒(__人__)⌒::::: \
  |              |
  \               / 








        / ̄ ̄\
      /       \   てめぇの端末だけ外見れねぇように
      |::::::        | ネットワークチームに申請するか。。。
     . |:::::::::::     |
       |::::::::::::::    |          ....,:::´, .
     .  |::::::::::::::    }          ....:::,,  ..
     .  ヽ::::::::::::::    }         ,):::::::ノ .
        ヽ::::::::::  ノ        (:::::ソ: .
        /:::::::::::: く         ,ふ´..
-―――――|:::::::::::::::: \ -―,――ノ::ノ――
         |:::::::::::::::|ヽ、二⌒)━~~'´ 


           ___   ごめんなさいごめんなさい
     ____,./      \   ごめんなさいごめんなさい
    ノ   /         \  ごめんなさいごめんなさい
  /   /            \ ごめんなさいごめんなさい
 |     |::..           ...::::| 
 ヽ    `一ー――――-、;;;;::/`一ー―-、
  ヽ____(⌒)(⌒)⌒) )  (⌒_(⌒)⌒)⌒))








   てか、メソッドのテンプレート化なんて、
   デザインパターンというか普通に実装してりゃ
   いくらでも出てくるお。
         ____
       /      \
      /  ─    ─\
    /    (●)  (●) \
    |       (__人__)    | ________
     \      ` ⌒´   ,/ .| |          |
    ノ           \ | |          |
  /´                 | |          |
 |    l                | |          |
 ヽ    -一ー_~、⌒)^),-、   | |_________|
  ヽ ____,ノγ⌒ヽ)ニニ- ̄   | |  | 








class YaruoTemplate{
    final void prepareJob(){
        openBrowser();
        surf2ch();
        surfAkibaBlog();
        closeBrowser();
    }
    abstract void surf2ch();
}

class MyJob extends YaruoTemplate{
    void surf2ch(){
        System.out.println( "VIPを保守するお" );
    }
}
     ____
    / ⌒  ⌒  \  これでどうかお?
  ./( ―) ( ●)  \
  /::⌒(_人_)⌒:::::  |
  |    ー       .|
  \          / 








  まぁそういうことだ。prepareJobという
  仕事の準備メソッドをテンプレート化してるんだな?
  実処理はサブクラスに先送りさせているということか。
  (仕事の準備にVIPの保守すんのかてめぇは)
   / ̄ ̄\
 /   _ノ  \
 |    ( ●)(●)
. |     (__人__)
  |     ` ⌒´ノ
.  |         }
.  ヽ        }
   ヽ     ノ
   /    く
   |     \ 
    |    |ヽ、二⌒)









   こんなん楽勝すぎて話しになんないお。
   テンプレートメソッド(笑)だお。
          ____
        /_ノ  ヽ、_\
 ミ ミ ミ  o゚((●)) ((●))゚o      ミ ミ ミ
/⌒)⌒)⌒. ::::::⌒(__人__)⌒:::\   /⌒)⌒)⌒)
| / / /     |r┬-|    | (⌒)/ / / //
| :::::::::::(⌒)    | |  |   /  ゝ  :::::::::::/
|     ノ     | |  |   \  /  )  /
ヽ    /     `ー'´      ヽ /    /
 |    |   l||l 从人 l||l      l||l 从人 l||l
 ヽ    -一''''''"~~``'ー--、   -一'''''''ー-、
  ヽ ____(⌒)(⌒)⌒) )  (⌒_(⌒)⌒)⌒)) 









   まず、
        surf2ch();
        surfAkibaBlog();
   はてめぇの程度の低い釣りだとして、
        checkInternet();
   に変更する。そうすれば、prepareJobは
   ・ブラウザを開く
   ・ネットを調べる
   ・ブラウザを閉じる
   という処理がテンプレート化されたものと定義されるわけだ。
        / ̄ ̄\
      /       \
      |::::::        |
     . |:::::::::::     |
       |::::::::::::::    |          ....,:::´, .
     .  |::::::::::::::    }          ....:::,,  ..
     .  ヽ::::::::::::::    }         ,):::::::ノ .
        ヽ::::::::::  ノ        (:::::ソ: .
        /:::::::::::: く         ,ふ´..
-―――――|:::::::::::::::: \ -―,――ノ::ノ――
         |:::::::::::::::|ヽ、二⌒)━~~'´ 

        surf2ch();
        surfAkibaBlog();
   はおいらの大事な大事な仕事の準備だお!
       ____
     /ノ   ヽ、_\
   /( ○)}liil{(○)\
  /    (__人__)   \
  |   ヽ |!!il|!|!l| /   |
  \    |ェェェェ|     / 







   話が進まんから相手にしないが、
   基本的にはこのprepareJobをfinal指定し
   サブクラスで処理を決定する。
   テンプレートメソッドとして、これはこれで正しい。
   では、そのsurf2ch();とsurfAkibaBlog();は
   必要なときにはいつでも処理の中にサブクラスを
   フックできるようにアルゴリズムをカプセル化してみろ
   / ̄ ̄\
 /   _ノ  \
 |    ( ●)(●)
. |     (__人__)
  |     ` ⌒´ノ
.  |         }
.  ヽ        }
   ヽ     ノ
   /    く
   |     \ 
    |    |ヽ、二⌒)









         |
     \  __  /
     _ (m) _
        |ミ|
      /  `´  \
       ____
     /⌒  ⌒\   日本語でおk
   /( ●)  (●)\
  /::::::⌒(__人__)⌒::::: \
  |     |r┬-|     |
  \      `ー'´     / 







   (その頭に浮かんだ電球みたいのはなんなんだ)
   お前は多分、
        checkInternet();
   をサブクラスでオーバーライドして
        surf2ch();
        surfAkibaBlog();
   の処理をしようとするだろう。
   だが、そのsurf2ch();とsurfAkibaBlog();は
   restJob();(息抜き)という処理だ。
   checkInternet();ではやらずにフックして処理しろ
   といっている。
        / ̄ ̄\
      /       \
      |::::::        |
     . |:::::::::::     |
       |::::::::::::::    |          ....,:::´, .
     .  |::::::::::::::    }          ....:::,,  ..
     .  ヽ::::::::::::::    }         ,):::::::ノ .
        ヽ::::::::::  ノ        (:::::ソ: .
        /:::::::::::: く         ,ふ´..
-―――――|:::::::::::::::: \ -―,――ノ::ノ――
         |:::::::::::::::|ヽ、二⌒)━~~'´ 








      ___    ━┓
    / ―\   ┏┛
  /ノ  (●)\  ・
. | (●)   ⌒)\
. |   (__ノ ̄  |
  \        /
    \     _ノ
    /´     `\
     |       |
     |       |

           ___   ━┓
         / ―  \  ┏┛
        /  (●)  \ヽ ・
       /   (⌒  (●) /
       /      ̄ヽ__) /
.    /´     ___/
    |        \
    |        | 
今回のパターンはテンプレートメソッドです。このパターンは、それ自体を知らない技術者も知らず知らずの内に適用してたりしますが、あわせてフックというものも学んで生きたいと思います。 次の回では、まずフックとはなにか。と、その使い方、使い分けについて記述したいと思います。

≪第11回第13回≫


[ 最近のエントリーとその関連エントリー ]


2008年04月24日

ラテックスを使って手のひらを作ってみました。失敗しました。

DSCF2346.jpg ラテックスで手のひらを作ってみました。かなり適当に作ったのですが、なんとかカタチにはなりましたよ!あと10個くらい作り続ければコツがわかってくるかと思います。多分、ラテックスに漬ける前にそれなりに手の形を作る必要があるんだろうと思います。
今回作ったのは映像+に載っていたとおりにやってみたのですが、空気が入ったりしてあまり上手くはいきませんでした。映像+に載っていた内容はといいますと、針金を5本ハンダでくっつけて、軽く肉付けして、ラテックスに何度か漬けるというものです。わー。そのままだね!(ひねる必要がないからだと思います)
で、精度の高いものを増産するためには、石膏で型を取って流し込むのがいいのかなと思っていますが、そうするとまたハンズに行って石膏キット(そんなもんがあるのかどうか知らない)を買ってくることになります。それってなんかアーティストっぽくていい気分です。ふふん。多分、石膏キットなんてものを買った日には、無駄に電車の中で乗客に品物をチラつかせるんだと思います。
「あー。この人アーティスト(って思われたいの)かなぁ?」
てくらいチラつかせます。豊川悦氏のように「チラッ。チラチラぁ」とか他人に向かってやりながら捕まるんだと思います。違うんです刑事さん俺はやってねぇ

刑事さんはどうでも良いのですが、ラテックスは結構アンモニアのにおいがきつくて、換気しないと大変です。乾くとアンモニア臭さは全くなくて、ゴムくさいです。というかゴムです。今、仕上がりの薄さに挑戦中です。何に使うかは聞かない大人の人がワタシは好きです。

[ 最近のエントリーとその関連エントリー ]


2008年04月22日

リードするスピリットは失せますが、ラウドにチェンジしてくれたのがうれしくも腹立たしい(ルー的な意味で)

louCnv.PNG 結構前にノベログコンバータ向けに小説を書いたというエントリをポストしたのですが、こいつをルー語変換してみました。読む気はうせますが、派手に変換してくれたのがうれしくも腹立たしいです。

[ 最近のエントリーとその関連エントリー ]


Extにjavaのライブラリ[Ext GWT:(Google Web Toolkit)]ができたようです。

反射的にポストします。よく読んでません。
昼間にextjs.comにアクセスしてたらサーバメンテナンス中だということで、いろいろとイライラしてたのですが、今見たらなんか変わってました。

リンクはこちら。(Ext GWT: Rich Internet Application Framework for GWT)

さらに反射的にwikiページを作成しました。(勉強用)サイド(ナビ)バーにリンクしておきます。ExtJSのポストはこちらでも普通にしようかと思っていますが、こちらのメインブログは思うが侭にポストされていてまとまりがないので、wikiのほうにきれいにまとめておくようにします。

[ 最近のエントリーとその関連エントリー ]


2008年04月21日

やる夫がデザインパターンをやるようです 第11回

≪第10回第12回≫

やる夫で学ぶデザインパターン。ブックマークしていただきまして本当にありがとうございます。これらの説明が正しいか間違っているかは別として(間違いなどありましたらご指摘ください)読み物としてでも読んでいただけるとうれしいです。いつもありがとうございます。
やる夫。インスタンスを一個しか生成させないようにするには
newできるコンストラクタがpublicにあったらだめだろ。
だったらprivateにしてみたらどうなる?

class YaruoGlobal {
    private YaruoGlobal(){}
};

こうなるだろ。っていうことh
   / ̄ ̄\
 /   _ノ  \
 |    ( ●)(●)
. |     (__人__)
  |     ` ⌒´ノ
.  |         }
.  ヽ        }
   ヽ     ノ
   /    く
   |     \ 
    |    |ヽ、二⌒)






 ぎゃははははははあはhwww
 そんなことしたら誰がnewするんだおww
 コンストラクタはpublicにあってこそ、その機能が解決されるんだお
          ____
        /_ノ  ヽ、_\
 ミ ミ ミ  o゚((●)) ((●))゚o      ミ ミ ミ
/⌒)⌒)⌒. ::::::⌒(__人__)⌒:::\   /⌒)⌒)⌒)
| / / /     |r┬-|    | (⌒)/ / / //
| :::::::::::(⌒)    | |  |   /  ゝ  :::::::::::/
|     ノ     | |  |   \  /  )  /
ヽ    /     `ー'´      ヽ /    /
 |    |   l||l 从人 l||l      l||l 从人 l||l
 ヽ    -一''''''"~~``'ー--、   -一'''''''ー-、
  ヽ ____(⌒)(⌒)⌒) )  (⌒_(⌒)⌒)⌒)) 






   / ̄ ̄\
 /   _ノ  \
 |    ( ●)(●) だれが?newするか?
. |     (__人__)
  |     ` ⌒´ノ
.  |         }
.  ヽ        }
   ヽ     ノ
   /    く    スッ
   |     \ 
    |    |ヽ、二⌒) [ YaruoGlobal ]






       ____
     /⌒三 ⌒\  あ
   /( ○)三(○)\
  /::::::⌒(__人__)⌒::::: \
  |     |r┬-|     |
  \      `ー'´     / 






class YaruoGlobal {
    private YaruoGlobal(){}
    public static YaruoGlobal getInstance(){
        return new YaruoGlobal();
    }
};
これでどうだ。
   / ̄ ̄\  ( ;;;;( 
 / _ノ  ヽ\ ) ;;;;) 
 |  ( ●) (●)/;;/   
. |   (__人__) l;;,    
  |    ∩ ノ)━・'/   
.  |   /  ノ´ } 
.  ヽ  / /    } 
   ヽ/ /   ノ 






       ______
      /  \    /\
    /  し (>)  (<)\
    | ∪    (__人__)  J | ________
    \  u   `⌒´   / | |          |
    ノ           \ | |          |


         ____
      /  \    ─\   チラッ
    /  し (>)  (●)\
    | ∪    (__人__)  J | ________
    \  u   `⌒´   / | |          |
    ノ           \ | |          |

     コンパイルガトオッタオ
         ____
      /::::::─三三─\
    /:::::::: ( ○)三(○)\
    |::::::::::::::::::::(__人__)::::  | ________
     \:::::::::   |r┬-|  / | |          |
    ノ::::::::::::  `ー'´   \ | |          | 
アーキテクトが作成したgetInstance()メソッドはクラスインスタンスをnewして返すだけのものです。これにもう少し手を加えて、ある条件下の元、newするようにしてしまえばインスタンスをひとつだけ生成させるクラスができます。それは
class YaruoGlobal {
    private static YaruoGlobal uniqInst;
    private YaruoGlobal(){}
    public static YaruoGlobal getInstance(){
        if( uniqInst == null ){
            uniqInst = new YaruoGlobal();
        }
        return uniqInst;
    }
};
こんな風に書くことができるのではないでしょうか。
  でも、今までおいらが実装したように
  Javaでいうスタティック変数を使っても
  やりたいことが実現できないことはないお。
      ____
    /_ノ   ヽ_\
   /( ●) ( ●)\
 / ::::::⌒(__人__)⌒:::::\
 |        ̄      |
 \              / 




 それはもちろんそのとおりだ。
 今回、お前に覚えてほしいこのシングルトンパターンは
 オブジェクトを1つだけインスタンス化するための規約にすぎない。
 だが、今回のシングルトンパターンを適用すると、
 スタティック変数で保持するより良いこともある。
   / ̄ ̄\
 /   _ノ  \
 |    ( ●)(●)
. |     (__人__)
  |     ` ⌒´ノ
.  |         }
.  ヽ        }
   ヽ     ノ
   /    く
   |     \ 
    |    |ヽ、二⌒)






       ____
     /⌒  ⌒\ ホジホジ
   /( ●)  (●)\  はやくいえお
  /::::::⌒(__人__)⌒::::: \ 
  |    mj |ー'´      |
  \  〈__ノ       /
    ノ  ノ 






 ・・・・。
 もし、グローバル変数にオブジェクトを突っ込むと、
 アプリケーションの開始時にそのオブジェクトを生成しなければならない
 ※(実装依存です)
 例えばこのオブジェクトが、あるマスタテーブルなんかを読み込むような
 リソース集約型だとして、さらにこのオブジェクトをアプリケーションが
 最後まで使わなかったとしたら。
   / ̄ ̄\
 /   _ノ  \
 |    ( ●)(●)
. |     (__人__)
  |     ` ⌒´ノ
.  |         }
.  ヽ        }
   ヽ     ノ
   /    く
   |     \ 
    |    |ヽ、二⌒)







  ・・・最後まで使わなかったとしたら?
  (ハナシが見えないお。3行でまとめてほしいお)
       ____
     /⌒  ⌒\ ホジホジ
   /( ○)  (○)\  
  /::::::⌒(__人__)⌒::::: \ 
  |    mj |ー'´      |
  \  〈__ノ       /
    ノ  ノ 









 (ハナシが見えないとか思ってんだろうな)
 最後まで使わなかったとしたら。
 アプリケーションにとっては無用なコストとなる。
 だが、シングルトン実装することにより、
 必要になったらオブジェクトを作成できるだろう。
   / ̄ ̄\
 /   _ノ  \
 |    ( ●)(●)
. |     (__人__)
  |     ` ⌒´ノ
.  |         }
.  ヽ        }
   ヽ     ノ
   /    く
   |     \ 
    |    |ヽ、二⌒)







   3行でまとめてくれお!
   あと1行へらすだけだお!
         ___
       / ⌒  ⌒\
      / (●)  (●) \
    /   ///(__人__)/// \
     |   u.   `Y⌒y'´    |
      \       ゙ー ′  ,/
      /⌒ヽ   ー‐    ィヽ
      / rー'ゝ       〆ヽ
    /,ノヾ ,>      ヾ_ノ,|
    | ヽ〆        |´ | 







        / ̄ ̄\
      /       \     1個は保障されてる。
      |::::::        |  ほしいときにくれる。
     . |:::::::::::     | お前もうカエレ。
       |::::::::::::::    |          ....,:::´, .
     .  |::::::::::::::    }          ....:::,,  ..
     .  ヽ::::::::::::::    }         ,):::::::ノ .
        ヽ::::::::::  ノ        (:::::ソ: .
        /:::::::::::: く         ,ふ´..
-―――――|:::::::::::::::: \ -―,――ノ::ノ――
         |:::::::::::::::|ヽ、二⌒)━~~'´ 









   おいらもう・・・。
   (やっぱり1行へらしてほしいお)
         ___
       / ⌒  ⌒\
      / (○)  (○) \
    /   ///(__人__)/// \
     |   u.   `Y⌒y'´    |
      \       ゙ー ′  ,/
      /⌒ヽ   ー‐    ィヽ
      / rー'ゝ       〆ヽ
    /,ノヾ ,>      ヾ_ノ,|
    | ヽ〆        |´ | 
というわけで、今回はシングルトンパターンを学びました。が、実はこれだけでは「インスタンスが1個だけ生成される」というところを保障できないことがあります。それは、マルチスレッドのアプリケーションですと上記の実装では問題が出てくるということです。
どう問題が出てくるのかといいますと、
    if( uniqInst == null ){
        uniqInst = new YaruoGlobal();
    }
    return uniqInst;
の条件だけでは、複数のスレッドが同時にifスコープ内にステップすることを想定していない作りになっているということです。uniqInstがnullではなくなるのはnewされた後になりますが、newされる前にほかのスレッドに処理がディスパッチされてifスコープ内にステップしてくることによって、結果コンストラクタは2度(以上)呼び出されてしまいます。
それを避けるために、マルチスレッドであるアプリケーションを実装する際のシングルトンは以下のようにコーディングする必要があります。
class YaruoGlobal {
    // volatile指定子はuniqInst変数をYaruoGlobalインスタンスに対して初期化する際に
    // マルチスレッドがuniqInst変数を正しく処理できるよう保障するものです
    private volatile static YaruoGlobal uniqInst;
    private YaruoGlobal(){}
    public static YaruoGlobal getInstance(){
        // 同期コスト削減のため、まずnullかどうか聞く
        if( uniqInst == null ){
            // nullなら同期チェックしてnullのままならインスタンス生成
            synchronized (YaruoGlobal.class ){
                if( uniqInst == null ){
                    uniqInst = new YaruoGlobal();
                }
            }
        }
        return uniqInst;
    }
};
≪第10回第12回≫


[ 最近のエントリーとその関連エントリー ]


2008年04月20日

ラテックスでストップモーションアニメパペットの手のひらを作ってみます。

DSCF2345.jpg 咲が3代目になりますというエントリの続きです。フィギュアクリエイターの話です。フィギュアクリエイターに(美少女)と言葉を添えてみようかと思いましたが、ほんっとうに気持ち悪がられるのでやめます。あー気持ち悪い。(昨日飲みすぎて)

ということで、人形のほうも3代目にもなりますと、ギミックの仕込を本格的にして行こうかと欲が出てきまして、ラテックスなるものをハンズで購入しました。ラテックスを知ったのは、以前購入した「映像+人形アニメーションの現場」というムック?に載ってたもので、パペット製作の手のひらのとこでこんな風に使います。このラテックス。実際は1500円くらいするものなのですが、すごい高いものだろうと勝手に思い込み、(7000~8000円位すると思ってた)価格調査のために町田のハンズに行って見つけてきたものです。お手ごろ価格でホッとしました。ハンズいいよハンズ。
買ったラテックスは咲の手のひらに使うものなのですが、針金を仕込んで、ラテックスに漬け込んで乾かすとゴム状になって乾くので、アニメを撮る際に増産できます。いやー。便利便利。まだ作ってないけど。
ゴム状になって乾くので、人形の表現幅が広げることができそうですよ。特に、「The Nightmare Before Christmas」のように、顔にギミックを仕込んでラテックスで仮面を作ったりすることもできそうです。表情が豊かになるってのはいいですね。いやー夢がひろがりんぐです。まだ作ってないけど。
via : パペットBOX

[ 最近のエントリーとその関連エントリー ]


2008年04月15日

やる夫がデザインパターンをやるようです 第10回

≪第9回第11回≫

  なんだか開発が進むにつれてスタティックメンバ変数が
  ずいぶん汚れてきたお。
         ____    
       /      \  
      /  ─    ─\ 
    /    (●)  (●) \ 
    |       (__人__)    | ________
     \      ` ⌒´   ,/ .| |          |
    ノ           \ | |          |
  /´                 | |          |
 |    l                | |          |
 ヽ    -一ー_~、⌒)^),-、   | |_________|
  ヽ ____,ノγ⌒ヽ)ニニ- ̄   | |  |







  ス・スタティックメンバ変数が汚れてきただと?
   / ̄ ̄\  ( ;;;;( 
 / _ノ  ヽ\ ) ;;;;) 
 |  ( ○) (○)/;;/   
. |   (__人__) l;;,    
  |    ∩ ノ)━・'/   
.  |   /  ノ´ } 
.  ヽ  / /    } 
   ヽ/ /   ノ 






  まぁいいお。汚しついでにもう2~3個変数追加だお
  みんな自由につかってくれお。
  変数名はtemp1、temp2、temp3だお
           ____ 
        /⌒  ⌒\ 
.      /( ●)  (●)\ 
     / ::::::⌒(__人__)⌒::::: \ 
    |      |r┬-|     |  
     \       `ー'´     / 
    ノ            \ 
  /´               ヽ                 カ 
 |    l   l||l 从人 l||l      l||l 从人 l||l   カ    タ 
 ヽ    -一''''''"~~``'ー--、   -一'''''''ー-、.     タ 
  ヽ ____(⌒)(⌒)⌒) )  (⌒_(⌒)⌒)⌒)) 
     ┌┬┬┐┌┬┬┬┐┌┬┬┬┐┌┬┬┬┐ 
  ,. - ''"| ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ρ ̄`l 
   ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ノ ̄ 

      / ̄ ̄\   てめぇぜってぇわざとやってんだろ
    /ノ( _ノ  \  
    | ⌒(( ●)(●)
    .|     (__人__) /⌒l 
     |     ` ⌒´ノ |`'''| 
    / ⌒ヽ     }  |  |               ぺきょ
   /  へ  \   }__/ /             / ̄ ̄\ 
 / / |      ノ   ノ           / ●)) ((●\’, ・ 
( _ ノ    |      \´       _    (   (_人_)’∴ ),
       |       \_,, -‐ ''"   ̄ ゙̄''―---└'´ ̄`ヽ   て 
       .|                  ______ ノ    ( 
       ヽ           _,, -‐ ''"  ノ       ヽ   r'
         \       , '´        し/..     | J 
          \     (