RasielCochma

google検索をすればなんでも出てくるから、基本的にメモしておきたい事は少ないΣ(´∀｀；)

そんな言い訳をしてたら半年近く放置状態に。

久しぶりに描く事がみつかったのでメモを兼ねて。こんな輪のエフェクトを見かけるけど我流で再現。

自作の筆でマウスで円を描く。数回ポチポチするだけ(・∀・)

次に自作のブラシで周りがぼやけるように同じ円のサイズで数回マウスをポチポチ。次に自作の消しゴムで真ん中が消えるように同じ円のサイズで数回マウスをポチポチ。後は合成モードを発光にして不透明度を40%くらいまで下げたら、好きな色に調整して出来上がり。

後は複製して貼り付けたらそれっぽく見える(・∀・)

状況終了！

やっと解決(・∀・)

複数の要素に段階的にアニメーションをかけたい時に善い方法が無かったのでかなり苦戦。

javascriptのタイマー関数を使ってアニメーションをかけてたけど、もっと簡単な方法があったのでメモ。

以下要素があったとして、

<ul class="menu">
	<li>menu1</li>
	<li>menu2</li>
	<li>menu3</li>
	<li>menu4</li>
</ul>

menu1が表示されたら次はmenu2…と段階的に表示させようと思って最初に考えついた処理。

$(function(){
    $('.menu > li').each(function() {
        $(this).fadeIn();
    })
)}

まぁ良くある素人の浅知恵的な…。上記スクリプトは一括で要素にアニメーションがかかってしまう。

とにかく残念な感じ(；´∀｀)

ぐぐればタイマーやら、キューやら使ったサンプルがあったけど、もっとシンプルに処理をしたい。

そう言えばと思い出したのがこの処理

「ｊQuery日本語リファレンス レシピ7.5 エフェクトを連続的に適用する」
参考ページ：http://jquery-cookbook.com/examples/06/ch6-5.html

$(function() {
	var $menu = $('.menu > li').hide(), li= 0;
	var init = function() {
		$($menu[li++] || []).fadeIn(400, arguments.callee);
	};
	init();
});

本家のコードを参考にちょいと変えて完成。

とっても簡単。

解説：

$liのコレクションをインクリメントし続け、アニメーション完了したら関数を再帰的に実行する。

$liの要素を超えるまで続けられて、要素が空になったら、コールバックが実行されず終了。

との事。

参考文献：
「jQueryクイックブック,ｐ94」O’REILY/オーム社」

Rich Client(・∀・)

開発に時間を割いてたのでかなり放置な事に…(・ε・)
一段落したので開発で勉強になった事も含めて記事を書いていければ良いなと。
今回はselect要素にjQueryでのイベント時の動作を見直し。

今までselectのイベント処理は

$('#select').change(function() {
    // 何かしらの処理
});

とまぁ良くある処理。

でもこれだとkey操作に対して反応が無し。非常に宜しくない処理(；・∀・)

key操作に対応させようとすると

$('#select').change(function() {
    // 何かしらの処理
});

$('#select').keyup(function() {
    // 何かしらの処理
});

出来る事なら冗長性を無くしたい。そこで使うのがjQueryのbind

参考 ： ｊQuery日本語リファレンス
要素が持つ、例えば”click”などのイベントに対してコールバック関数を紐付けます。
http://semooh.jp/jquery/api/events/bind/type,+%5Bdata%5D,+fn/

正直分かりにくい(；・∀・)

取り敢えず書いてみると

$(document).ready(function() {

    var $select = $('#select');

    function bindEvent () {
        // 何かしらの処理
    }

    bindEvent();
    $select.bind( 'keyup change', bindEvent);
}):

重複しているコードを関数にまとめ、読み込みのときとイベントが発生したときにその関数を呼び出す。
jQueryの.bind()を使って両方のイベントハンドラを同時にバインドする。
そして、繰り返し使われるデータを変数に保存する。

参考文献：
「jQueryクイックブック,ｐ93」O’REILY/オーム社」

との事…槍投げ。

もう一つパターンが載っていたので

$('#select')
    .bind (  'change keyup', function() {
    // 何かしらの処理
    })
   .trigger('change');
});

関数をchangeイベントのイベントハンドラとして設定し、trigger()メソッドを使ってchangeイベントを発生させるだけである。
つまり関数を間接的に呼び出している。

参考文献：
「jQueryクイックブック,ｐ94」O'REILY/オーム社」

との事…槍投げ。主にjQueryクイックブックを参考にして書いてるのでしったか8割。

でもこれでkey操作にもマウス操作にも対応(・∀・)

javascriptを使ってフォームの値を取得する時に今までのやり方を見直したのでメモ(^ω^)

WEB上には大まかに以下の2パターンが存在。

以下の入力欄があった場合

<form id="formId"  name="formName">

    <input id="text" name="test" type="text">

    <select name="select">
        <option value="1">select1</option>
        <option value="2">select2</option>
   </select>

    <input id="radio" type="radio" name="radio" value="radio1">radio1
    <input id="radio" type="radio" name="radio" value="radio2">radio2

    <input id="checkbox" type="checkbox" name="checkbox" value="checkbox1">checkbox1
    <input id="checkbox" type="checkbox" name="checkbox" value="checkbox2">checkbox2

</form>

よく見かけるパターンは

// パターン1 フォームの要素を指定取得
document.getElementById("text").value;
document.getElementById("select").value;
...
以下略

// パターン2 フォームの要素を全取得、後に参照
var obj = document.getElementById("formId");
obj.elements[0].value;
obj.elements[1].vlaue;
obj.elements[2].checked;
...
以下略

結論から言うとパターン1はアンチパターン
以下理由

• DOM参照をローカル変数に代入して、そのローカル変数で作業する

要するに？

DOMアクセスはコストがかかるとの事。

パターン1は毎回DOM解析を行ってるので無駄が多い。

検証スクリプト

//アンチパターン

for (var i = 0;  i < 100; i++)
    document.getElementById(”result").innerHTML += i + ",";

// ベストパターン

var i, content = '';

for (var i = 0; i < 100; i++)
    content += i + ",";

document.getElementById("result").innerHTML += content;

参考文献：

「javascriptパターン,ｐ191」O’REILY/オーム社

どの位処理時間に差が出るかと言うとアンチパターンはベストパターンの100(IE)～1000(FireFox)倍程度

ブラウザによって値は変わりました。

詳しい理由については勉強中なので省略。

詳しく知りたい方はIBMのコミュニティーなどを参照もしくは専門書を参照するべき…槍投

ついでにパターン2の代替

// 代替えパターンその1
var formEleObj = document.forms["formName_name"];
obj.elements[0].value;
obj.elements[1].vlaue;
obj.elements[2].checked;
...
以下略

// 代替えパターンその2 jQeryを使用
var formEleObj = $("#formId");
obj[0].elements[0].value;
obj[0].elements[1].vlaue;
obj[0].elements[2].checked;
...
以下略

参考：
form
https://developer.mozilla.org/ja/DOM/form

この応用はツリーの変更にも役にたちます･･･請売り

// アンチパターン
var p, r;
p = doucment.createElement('p');
t = document.createTextNode('add element1');
p.appendChild(t);
document.body.appendChild(p);

p = doucment.createElement('p');
t = document.createTextNode('add element2');
p.appendChild(t);
document.body.appendChild(p);

// ベストパターン
var p, t, frag;
flag = document.createElement('p');
p = document.createElement('p');
t = document.createTextNode('add element1');
p.appendChild(t);
frag.appendChild(p);

p = document.createElement('p');
t = document.createTextNode('add element2');
p.appendChild(t);
frag.appendChild(p);
document.body.appendChild(frag);

こんな記事を書いてるけど以前はパターン1でコーディングしてた…。

入力フォームチェックのプラグインを作成してる最中に色々築かされた。

とは言えこれもベストかどうかと問われると少々疑問が残る今日この頃(・∀・)

塗の記録(^ω^)

線画データ：

ペンツールのサイズは5で描いてます

塗データ：

過去に公開してる塗ツールを使ってます。(カテゴリー→SAIにあります)

後はエアブラシとぼかしツールは最初から入ってるものをブラシ濃度を変えながら塗ってます。

塗り方は

①線を引きます

②線の半分位をぼかしツールでぼかす

③ぼかし過ぎた部分をエアブラシで調整した後に反対側に明るい色を塗る

これを基本の塗り方にして塗りこんでます。

その他効果：

Fireworksを使ってますが、adobe製品なら多分共通なので

フィルタ→カラー調整→レベル補正で入力を200

フィルタ→ぼかし→ガウス→ぼかしの半径8

で指定した物を取り込んで塗、線画レイヤーの上にスクリーン50％でかけてます。

SAIでも同じような効果を加える事が出来るってのを見かけた気がするけど、詳しくは忘れてしまいました(^^ゞ

効果を適用する前：

最後にエアブラシでキャラの周りに白を吹いてみました。

塗の結果：

レビュー：

久しぶりのギャルゲ塗りをやったけど、前に描いた時より確実に上達してるけど、まだまだ技術が足りてないのを実感。

塗りながら服のシワを考えてる時点で技術不足。

構図に関しても塗ってる時に不自然を感じた場所を何回か描き直し、塗り直ししたので時間ロスも半端ない。

今でも若干不自然さを感じるけど…今度の成長に期待って事で(^^ゞ

加えて効果を適用する前と後であんまり違いが分からないかも？

気がついたら一週間以上放置してた(；・∀・)
javascriptが楽しくてphpに最近は触れてなかったけど、ちょいと触る機会があったのでメモ。
MVCを理解する上でclassの使い方の今一度見直し。
簡単に書いたけど、MVCはおそらくこんな感じで動いてると思う。
基底クラスがControllerのベース
派生クラスが各ページのController
実行部分がDispather(index.phpで呼び出す処理)
に相当してるはず？
実際はこんな簡単に動いてる訳じゃないし、他にも色々必要だけど縮小版と言う事で。

// 基底クラス
abstract class parentClass {

    protected $parentPath;
    protected $otherClass;

    public function __construct()
    {
        $this->parentPath = $_SERVER['REQUEST_URI'];
        $this->childPath  = $_SERVER['SCRIPT_FILENAME'];
        $this->otherClass = new otherClass($this->parentPath);
    }

    public function run()
    {
        $this->otherClass->getCurrentDir();
        $this->getCurrentDir();
    }
}

// 派生クラス
class childClass extends parentClass {

    protected $childPath;

    protected function getCurrentDir()
    {
        echo 'childPath : '.$this->childPath;
    }
}

// 機能拡張
class otherClass {

    public $otherPath;

    public function __construct($parentPath) {
        $this->otherPath = $parentPath;
    }

    public function getCurrentDir()
    {
        echo 'otherPath : '.$this->otherPath;
    }
}

// 実行部分
class init{

    public $childClass;

    public function __construct()
    {
        // インスタンス生成
        $this->childClass = new childClass();
    }

    // 処理実行
    public function run()
    {
        $this->childClass->run();
    }
}

$init = new init();
$init->run();
// 実行結果
// childPath : $_SERVER['REQUEST_URI']の値を返す
// otherPath : $_SERVER['SCRIPT_FILENAME']の値を返す

機能拡張にある処理を基底クラスに書いてたけど、どんどん処理が増えてきたのでotherClassに処理を移した時に同じclass内で使ってたディレクトリのパスを上手く受け取れなくて困った事に。
本来基底クラスに書くの時点でMVCモデルの崩壊への序曲(^^ゞ
スマートなやり方とは言えないし、これで良かったのか？
こうして書くと理解した気になるけど、実際の処理に適用するとパスが上手く受け取れない…？
さてもう一度コードの見直し(・∀・)
※追記
実際の処理に適用完了。
色々試し書きしてた時の処理を消すのを忘れてて、変な場所で上書きされてたのが原因でした。

ちょうど新しい要素を使ってみたのでメモ(・∀・)

• マークアップ例

<pre class="shell">
    <samp>
        <span class="prompt">C:\></span><kbd>pear list-upgrades</kbd>
    </samp>
</pre>

• スタイル例

pre.shell {
    margin-left: 10px;
    margin-bottom: 5px;
    width:600px;
    background-color:black;
    color:#00ff00;
    fontfont-family: Courier, "Courier New", monospace;
    overflow-x: auto;
    border: 1px solid #999999;
    opacity: 0.8;
}

pre.shell span.prompt {

}

pre.shell kbd {

}

• 出力例

C:\>pear list-upgrades

たまにしか使わないと忘れるのでメモ(・∀・)

windows版xamppで\xampp\phpにパスが通ってる前提で

• インストール済みのパッケージに関してアップグレードの確認

C:\>pear list-upgrades 

• pear全体のupgrade

C:\>pear upgrade

• 特定のパッケージのupgrade

C:\>pear upgrade [options] [package] 

• optionの確認

C:\>pear help upgrade 

参考サイト：
http://pear.php.net/manual/ja/guide.users.commandline.installing.php

塗りの記録(^ω^)

ちなみに模写です。

線画データ：ベタ

色塗りデータ：模様

塗りの結果：

レビュー：

フミカネさんを意識して描いてみたけど全然違うものに。もっと塗りの勉強が必要。

筆の設定に関してはお気に入りの設定で、主にこの設定で塗ってます。

ただ模様に関しては水分量が若干多いかも？塗ってると透けてきてしまうのが欠点。

他にもエアブラシ、ぼかしを使用。

javascriptは中々奥が深い(・∀・)

以下のConst関数があったとして、

var Const = function(name)  {

    this.name = name;

    this.func = function () {

        return this.name;

    };

};

コンストラクタ関数をnewして呼び出す時、関数内でなにやら処理が行われているみたい。

• 空のオブジェクトが作成され、変数thisで参照されます。thisはこの関数のプロトタイプを継承しています。
• thisが参照するオブジェクトにプロパティとメソッドが追加されます。
• thisが参照する新しく作られたオブジェクトは、関数の最後で（明示的に別のオブジェクトを返していなければ）暗黙に返されます。

参考文献：
「javascriptパターン,ｐ45」O’REILY/オーム社

要するに？

var Const = function(name) {

    // 新しいオブジェクトを作成

    var this = {};

    // プロパティとメソッドを追加

    this.name = name;

    this.func = () {

        return this.name;

    };

    // return this

};

と言うことらしい。

この結果、new Const()が呼ばれるたびにメモリに新しい関数が作成されているみたい。

・・・PHPで言う所の__constructと言うことで腑に落ちないけど、取り敢えず納得しておく。

もう一点。

// 新しいオブジェクトを作成
var this = {};

の所で行われる処理をより正確にいうと次のようになるらしい。

var this = Object.create(Const.prototype);

参考：
create:指定されたプロトタイプオブジェクトおよびプロパティを持つ新しいオブジェクトを作成します。
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/create

ここはまだ勉強中なので次の機会にするとして、タイトルの戻り値に関して

• newを使ってコンストラクタを呼ぶとき、常にオブジェクトがかえされます。デフォルトではthisが参照するオブジェクトが返ります。

• コンストラクタは、関数にreturnを書かなかったときでも、暗黙的にコンストラクタを返します。

参考文献：
「javascriptパターン,ｐ45」O’REILY/オーム社

要するに？

var Const = function () {

    this.name = "this name";

    var obj = {};

    obj.name = "obj name";

    return obj;

}

returnを書いた時はthis.nameプロパティは無視さます。

var o = new Const;
console.log(o); // Object { name="obj name"}

returｎを書かなかった時はthis.nameプロパティが返されます。

var o = new Const;
console.log(o); // Object { name="this name"}

ちなみにオブジェクト以外(string, boolean, number)を返そうとすると無視されます。
代わりにthisが参照するオブジェクトが返されました。

javascriptの知識を深める上で後々必要になってくる知識だと思うのでメモ(・∀・)