CODAでCoffeeScriptを使う

CoffeeScriptを使えるようにするためにやること

MacでCoffeeScriptを使うにはまずはnode.jsとnpmが必要なので、インストール。
詳しく書いてくれてるページがあるので、そちらを参考に。
CoffeeScriptのインストール方法も説明してくれてます。
参考：[JavaScript] CoffeeScriptをmacにインストール

Codaのプラグインはgithubにあります。
https://github.com/parkerl/CoffeeScript.codaplugin

「Installation」という項目にインストール方法が書いてます。
要はCodaのプラグインディレクトリにgithubからcloneする。

githubに登録 and sslの設定してない人はhttp経由でダウンロードできる
URL：https://github.com/parkerl/CoffeeScript.codaplugin.git

[Ruby on Rails 3] findする際の条件設定まとめ

NOT IN
Model.where('id NOT IN (?)', exclude_ids)
//第2引数の値は配列でも1つの値でもOK

随時追加

[php] exif_read_dataでexif情報が取れない！

送られてきたjpg画像をexif情報に合わせて回転させる処理をしていたのだが、なぜか逆さまのまま、回転されなかったものがあった。

回転する条件はexif_read_dataで取得したexif情報に画像の回転に関する情報を表す[Orientation]があった場合のみ。
どの角度に回転するかはimagemagickに任せてた。

調べてみると、Orientationデータなかったので回転させていなかった。
が、直接imagemagickでauto-rotateを実行すると回転する。

imagemagickでorientation情報を取得すると設定されていた。

つまりexif_read_dataでexifの全データを取得することができていなかったようだ。

原因は調査中。
とりあえずはPEARのライブラリを使って試してみようかな
参考：http://lsolesen.github.com/pel/



-- add 2012.11.27

PELというライブラリを使ってみたがエラーになってしまう。
原因を調べて見た。はっきりと理解できてるわけではないので間違いもあるかも…。

exifの回転やシャッタスピードなどのデータが入っている箇所(多分0th IFDのエントリの値)には4バイト以内の値ならそのまま記録して、5バイト以上の値の場合、別の場所に記録しておいて、その別の場所の位置を示す数値が入る(オフセットと呼ぶらしい)。
参考ページ：http://www.ryouto.jp/f6exif/exif.html

今回の画像はここが4バイト以内の値になっている箇所があり、そこでエラーが出てしまっていた。
具体的にはシャッタースピードに関する値で、バイナリエディタで見てみると値はFF FF FF FF。
10進数で表すと4294967295…。
これが仮にシャッタースピードの秒数だったとすると…大体136年分。
136年ちょっとの間カメラのシャッターを開きっぱなしにしている計算になる。
最近になって撮り終わった写真のようなので、シャッターを押したのは136年前の西暦1876年ということになる。
Wikipediaで調べてみるとグラハム・ベルが電話機を発明した年のようだ。
参考ページ：http://ja.wikipedia.org/wiki/1876%E5%B9%B4

ありえない値。
要はここの値は書き換えられていた。
値はなんでもよかったのだと思う。なのでFFで4バイト分埋めたのだろう。

問題はPELというライブラリが、そこの値を実際の値へのオフセットだと決めつけて処理してしまっていたことだ。
恐らくphpのexif_read_dataも同じようなバグなのだと思う。

今回はPELライブラリ内のこの値を読んでいる箇所で、値が異常だと思われる場合は1を代入するように変更した。
厳格なexifデータが必要な処理ではなかったので、とりあえずの対応。

ネットを探しても同じような目にあった人はあまりいないみたい。

[Selenium] Selectタグから指定したoptionを選択させる

Seleniumでセレクトタグから特定の項目を選択させる方法。
普通にクリックさせればいいんじゃないの？と思ってたが…firefoxでうまく動かない。

クリックじゃない方法で選択させるやり方があった

//必要なクラスをインポート
import org.openqa.selenium.support.ui.Select;

//selectタグを取得
Select selectList = new Select(driver.findElement(By.Id("select")));
//選択する項目をテキストで指定
selectList.selectByVisibleText("項目のテキスト");
//valueで項目を選択することもできる
selectList.selectByValue("項目の値");

chromeだと大体うまくいくんだけどな…

参考：Selenium WebDriver and DropDown Boxes(英語)

[Ruby] Rubyに関する俺のメモ

---------
連結の書き方

<<で配列追加＆文字列連結できる

arr = [2,3]
arr << 4

str = 'unko'
str << ' kusai'

珍しい書き方

---------

アソシエーションを複数書く場合
belongs_to :table_1
belongs_to :table_2
参考： 同名のテーブル名に対する参照（belongs_to,has_manyなど)の書き方

---------

バリデータの書き方
validates :column_name, :presence => true
参考： validation一覧

ここらへんはcakeと同じだ

[Ruby on Rails] テーブルにカラムを追加する

マイグレーションとやらを使ってテーブルにカラムを追加する方法

//マイグレーションファイルを作成
rails g migration add_カラム名_to_テーブル名 カラム名:型
//実行
rake db:migrate

[Git] リモートに新しくブランチを追加する

時々忘れてしまうのでメモ。 まずはローカルにブランチを作成 git checkout -b new-branch 新しいブランチにスイッチしてるのを確認したら、リモート側にpush git push origin new-branch ※「new-branch」は任意。リモート側のブランチ名になる。 さっき作ったブランチと同じじゃなくてもいい。 わざわざ別にする必要はあまりないと思うけど。

[CakePHP] 関連したデータの取得を簡単にしてくれるビヘイビア「Containable」

CakePHPで、テーブルを結合してデータを取得するにはモデル内に関連付けの設定を書いておく。
http://book.cakephp.org/1.3/ja/view/1039/%E9%96%A2%E9%80%A3-%E3%83%A2%E3%83%87%E3%83%AB%E3%82%92%E7%B5%90%E3%81%B3%E3%81%A4%E3%81%91%E3%82%8B

これだけで完結できればいいんだけど、そういう訳にもいかない。
状況によっては結合する必要のない(又は必要のある)テーブルやカラムもある。
findのオプションでjoin指定したりするのも面倒＆複雑。

しょうがないので、状況に合わせてbindModelしたりunbindModelしたりしてた。
どうにか楽にしたいなーと思ってたら、たまたまどっかのブログのコメント欄で見かけた機能。
Containableビヘイビア

http://book.cakephp.org/1.3/ja/view/1323/%E3%82%B3%E3%83%B3%E3%83%86%E3%82%A4%E3%83%8A%E3%83%96%E3%83%AB

これを使うとかなり条件指定がシンプルにできる

$this->Model->find('all', array(
 'contain' => array(
  'Model1' //これでModel1を結合
  'Model2' => array(
   'fields' => array('column1', 'column2') //取得するカラムも指定できる
  )
  'Model3' => array(
   'Model4' => array( //さらにテーブルを連結することもできる
    'fields' => array('column1') //もちろんカラム指定も
   )
  )
 )
));

かなり楽！
Cakeのマニュアルの「主要なビヘイビア」ってとこに紹介されているくらいなので、知ってて当然の機能…。
マニュアル読むのを面倒くさがると後になって余計に面倒なことになったりするよね。
知ってて当然の機能かもしれんが、コレを知った時はちょっと感動した。

[MySQL] Can’t create table(errno: 150) エラーが出た

MySQLでテーブルを作成＆外部キー制約設定時にエラーが出た。
調べてみると詳しく教えてくれているページがあった。
参考：MySQLでCan’t create table(errno: 150)

上記のページの原因を1つずつ試してみたけど治らない？
色々試してみた結果…
カラムの指定にUNSIGNEDがついていなかったせいでした。
参照先のテーブルのカラムにはUNSIGNEDが指定されていて、新しく作ったテーブルのカラムにはUNSIGNEDが指定されていなかった。
カラムの型だけじゃなくて、設定も重要なのね。
まあ、参照先のカラムと同じ制限しといたほうが安全よね

[CakePHP] selectリストで指定のoptionをselectedにしたい

//CakePHP2.*

//コントローラー側
$this->set('cars', $this->Car->find('list'));

//ビュー
$this->Form->input('Car', array(
 //値が1と2のものをselectedにする。もちろん値は1つでもOK
 'value' => array(1, 2)
));

[Selenium] WebDriverを使ってtarget=_blankで開いた別ウインドウにフォーカスする

最近、Seleniumを使ってる。
まだ使い始めでよくわかってないので色々メモ。

WebDriverを使ってテスト中、リンクをクリックして開いたページで処理を続けるってのはよくあることだと思うけど、そのリンクがtarget="_blank"で別ウインドウで開くとちょっと面倒

//後で比較するために、現在のウインドウIDを取得
String current_window_id = driver.getWindowHandle();

//別ウインドウで開くリンクをクリック
link_element.click();

//開いたウインドウも含め全部のウインドウIDを取得する
java.util.Set window_ids = driver.getWindowHandles();

String new_window_id = null;

for(String id :window_ids){
 if(!id.equals(current_window_id)){
  //現在のウインドウIDと違っていたら格納
  //最後に格納されたIDが一番新しく開かれたウインドウと判定
  new_window_id = id;
 }
}

//最後に格納したウインドウIDにスイッチ
driver.switchTo().window(new_window_id);
//以上

参考：Selenium2.xのちょっとした小技

[CakePHP]コンポーネント内でモデルを使う

コンポーネント内でモデルを使いたい場合、通常なら

App::uses('MyModel', 'Model');
$model = new MyModel();

すればいいんだけど、そのインスタンス化するモデル内でApp::usesを使っていたら、そこがエラーになってしまった。
原因を調べてたところ、モデルを使う他の方法を見つけたのでそちらを試す。
参考：コンポーネントでモデルを使う - by shigemk2

//コンポーネントファイル内
pulic function initialize(Controller $controller){
 //コントローラを変数に格納
 $this->controller = $controller;
}

public function myMethod(){
 //コントローラ内で使用しているモデルを使う
 $this->controler->MyModel->find('hoshii-data');
}

コントローラとの関連が濃すぎると感じたが、こういうやり方があんだなーと感心しつつ、真似して実装。
使ってみたら、いやー便利！
と思ったところで、上記のページの最後の行を見落としてたことに気づいた。

追記：基本的にコンポーネント内でモデルを使う事は推奨されていないので、極力使わない方向でいく。

あれー！
とりあえずはApp::usesがエラーになった理由＆なんでコンポーネントで使っちゃだめなの？＆他の方法を探そう

ロリポップ！サーバーでimageMagickを使う

デフォルトの設定では動作しない。
phpの設定を変更する必要がある。
「ユーザーページ」->「WEBツール」->「PHP設定」
でsafe_modeをONに変更する

参考：ロリポップ！でImageMagick

スマートフォンで背景を全画面に適応する

最近は背景を全画面に敷いたサイトが増えた気がする。
スマートフォン版のサイトでも、同じように背景画像を全画面に設定シたい場合がある。
そんな時はcssでbackground-sizeを指定する。
background-size: ***

指定は縦横、それぞれpxや%で指定できる以外に、containt, coverという値もある。
containは範囲内に縦横収まるように、拡大縮小する。
coverは範囲を全部覆う様に拡大縮小する

もちろん、スマートフォン以外にも使えるけど、対応するブラウザがまだ限定されてるので、今のとこスマートフォン向けにしか使えないかなという感じ

参考：背景画像のサイズを指定する

[jmeter] リストを1つずつ処理する

あるサイト内にある数百のページにjmeterでアクセスする処理をした
ページ内の複数のリンク先にアクセスするなんてこともできる

URLのリストを1行に1つずつテキストファイルに記述して、サーバーにアップ
そのファイルに「HTTPリクエスト」でアクセス
「後処理」->「正規表現抽出」を設定

-- 設定 ------------
参照名：VALUE(ここは任意の変数名)
正規表現：([^\n]+)
テンプレート：$1$
一致番号(0から乱数)：-1
--------------

「一致番号(0から乱数)」に負の値を入れると正規表現で該当した複数の値を扱えるらしい。

次にForEachコントローラを追加
-- 設定 --------
Input変数名接頭辞：VALUE(上で決めた任意の変数名)
Output変数名：URL(コレも任意の変数名。上のものとはかぶらないように)
--------------

ForEachコントローラの中に「HTTPリクエスト」を追加
「パス」の値を「${Output変数名}」に設定
これで最初にテキストファイルに保存したURLに1行ずつアクセスしてくれる

ものすごいスピードで次々アクセスするのでサーバーの負荷になりそう。
そういう時はForEachコントローラの中に「定数タイマ」を追加すると間隔をあけて処理してくれる

参考：
JMeter : 正規表現とForEachコントローラ
[開発環境]JMeterの正規表現の個人的な謎

[JavaScript] setTimeoutで配列の中身を1個ずつ処理していくやつ

何か間を置きながらループを処理したい時なんかに。
即時関数をsetTimeoutで間を置いて、arguments.calleeで実行中の関数をもっかい動かす。
配列は頭から1個ずつ取っていって、配列が空っぽになったら終わり

-- add [2102/9/13]
「JavaScript 「再」入門」によると、arguments.calleeは非推奨になったらしい。
なんで、名前を付けて「名前付き無名関数」として使うみたい。

//名前をつけてる
(function loopFunc(arg){
   //なんか処理して
    
    //ここ
    setTimeout(function(){
  loopFunc(arg);
 }, 200);
})(val);

参考：arguments.calleeとsetTimeoutを使ってJavaScriptのリトライ処理を簡単に書く方法

[MooTools] delegateしているイベントをfireEventで呼び出したい

fireEventってのはイベントを実行させる関数。ある要素に登録されたイベントを他の要素からも使いたいって時なんかに使う

$('elem').addEvent('click', function(){
 //イベント処理
})
$('elem2').addEvent('click', function(){
 //#elemのclickイベントが実行される
 $('elem').fireEvent('click');
})

deletegateしている場合

//delegateでイベント登録
$('elem').addEvent('click:relay(.child)', function(event, target){
 //イベント処理
 //targetに何かしたりして
});

$('elem2').addEvent('click', function(event){
 //targetになる要素を取得する
 var target =  $('elem').getElement('.child'); //elem要素の中の.child要素を取得する
 //2番目の引数でイベント登録時の引数、event, targetを渡す
 $('elem').fireEvent('click:relay(.child)', [event, target]);
});

[MooTools] storeで保存した値はどこまで取得できるのん？

MooToolsのstoreはjQueryでいうdataみたいなやつで、好きな名前で何かを格納できる。
んで、それは元の要素に格納されてるのか、それとも今回使っている変数にだけ格納かわからなかったので調べてみた。

結果は…格納出来てた 良かった良かった オブジェクトを格納した変数は参照だから当たり前なのか？

[JavaScript] IEではscriptのonloadイベントが起きない

JavaScriptの遅延ロードの方法でJavaScripでscriptエレメントを作成し、そのスクリプトのonloadイベントで、そのJSファイルを読み込んだ後にしたい処理を動かす方法がある

var script = document.createElement('script');
script.src = 'test.js';
document.body.appendChild(script);
script.onload = function(){
 //jsファイルを読み込んだ後にやりたい処理
}

コイツがIEでは動かない…。
「続・ハイパフォーマンスWebサイト」にやり方書いてあったような…
調べてわかったら、やり方書いとこう。

[MooTools] 今日覚えた機能のメモ

今さら覚えてどうすんのという疑問を無視して、メモメモ
※各コードは公式のドキュメントのものです

Array.invoke(メソッド名[, 引数, 引数....])
配列の中の各要素に引数として渡したメソッド名を実行させる
var foo = [4, 8, 15, 16, 23, 42];
var bar = foo.invoke('limit', 10, 30);  //bar is now [10, 10, 15, 16, 23, 30]

Array.include(art)
引数で渡したものを配列に追加する。
すでに入っていた場合は何もしない
['Cow', 'Pig', 'Dog'].include('Cat'); // returns ['Cow', 'Pig', 'Dog', 'Cat']
['Cow', 'Pig', 'Dog'].include('Dog'); // returns ['Cow', 'Pig', 'Dog']

Function.bind
function myFunction(){
    // Note that 'this' here refers to window, not an element.
    // the function must be bound to the element we want to manipulate.
    this.setStyle('color', 'red');
};
var myBoundFunction = myFunction.bind(myElement);
myBoundFunction(); // makes myElement's text red


tween.start(***).start(****).start(****)
アニメーションを連続して実行する

[MooTools]mootoolsを使うのに参考になるページまとめ

もはや虫の息なんじゃないの？と不安になりながらもなぜかMooTools使ってます。
自分以外の人がコードを触るような場合は、舌打ちされそうなのでjQueryにしてます。

jQueryに比べてぐっとすくない参考ページのまとめ

MooTools公式ドキュメント
http://mootools.net/docs/core

高橋文樹さんという方が翻訳されたドキュメントの日本語版
http://takahashifumiki.com/web/mootools/152/
※バージョン1.2の頃のドキュメントのようなので、ちょっと古いです。

WebTecNote
http://tenderfeel.xsrv.jp/category/mootools/
日本の方。数少ない日本語のチュートリアルがある

sharedhat
http://sharedhat.com/
http://mootips.org/
MooToolsのプラグインなんかを作ったりしてる方

straightline
http://straightline.jp/
数少ない、仕事でバンバンMooTools使ってる方
解説なんかはないけど、コードを見て参考に。

Make your MooTools Code Shorter, Faster, and Stronger(※英語)
意訳：テメーの股間のMooToolsをもっと強くしてやるぜ！
http://net.tutsplus.com/tutorials/javascript-ajax/make-your-mootools-code-shorter-faster-and-stronger/
nettutsの2年前の記事。
画像も表示されなくなってるからなかったコトにされてるのかも。
具体的に複数のClassをImplementしてるサンプルは初めて見た

[JavaScript]JavaScriptのデザインパターン

JavaScriptのいい書き方なんかを知りたくて、「JavaScriptパターン ―優れたアプリケーションのための作法」を読んだ。
正直、全然意味わかんねーやってとこもあったけど、わかる箇所はためになった。
まだ把握しきれてるわけじゃないけど、本が重いんで持ち歩きたくない。

おんなじような情報載ってるページねーかなーと探してたらあった！
Essential JavaScript And jQuery Design Patterns の日本語訳

サンキュー、世の中！

[CakePHP] アソシエーションでデータを取得すると、joinして取得する場合とSQLを別で発行する場合がある

結びついてるテーブルを全部JOINで取得するもんだと思って、conditionsにjoinされる(と思っていた)テーブルのカラムで条件を指定したらエラーになった。

いっつもjoinされないわけでもなくて、joinされて来る時もある。
どういう理由かわかんなくて、一番パフォーマンスが良い方法を自動で選んだりしてくれてるのかしら？なんて思ってたけど違うみたい。

参考：SQLから考えるModel::findの使い方

hasManyだとjoinしないでbelongsToだとjoinするってよ。
分かればまあ、使いわけられるかな。

[MooTools] Fxにあるlinkオプションの挙動

MooToolsのFxにはlinkってオプションがあるんだけど、よくわかってなかった。 英語力あれば簡単だったんだろうけど。

linkオプションにはignore, cancel, chainの3種類あって、アニメーション中にイベントが起きた際の処理方法を決める
ignore -> 無視
cancel -> 進行中の動作を止めて、新しく始動
chain -> 進行中の動作が終わった後に始動
って感じでした

YouTubeのAPIで特定の動画の情報を取得する

YouTubeのAPIのドキュメントを見てると、人気の動画を**件出す、とか関連してる動画を出すとか書いてあるんだけど、いやいや特定の1件だけほしいのよって時があるのでメモ。

やり方は簡単
http://gdata.youtube.com/feeds/api/videos/動画のID
のデータを取得するだけ。

http://gdata.youtube.com/feeds/api/videos/動画のID?alt=json
にすれば、JSON形式で返してくれる。

[WordPress] ウィジェットが登録されているサイドバーの種類を取得する

WordPressはサイドバーやウィジェットを使うとかなり自由にコンテンツを配置できる。
その際に、例えば左側のサイドバーと右側のサイドバーの幅が違っていて、アイキャッチ画像やcssの指定をそれぞれに合わせたいなんて時がある。

その場合は…function.phpにウィジェットの処理を書く箇所で取得可能。

function widget($args, $instance) {
 //$argsという変数にサイドバーのIDやらの情報が入っている
 var_dump($args);

 //色々処理
 if(isset($args['id']) && $args['id'] === 'left-sidebar'){
  //サイドバーの種類に合わせてなにか処理を変える
 }
}

[JavaScript] JavaScript 高速化 for編。lengthだけじゃないよ！

オライリーの「続・ハイパフォーマンスWebサイト」に書いてあったのでメモ。
ループの最大数をローカル変数に入れるってのは最初の一歩としてよく聞く。

//ダメな例
//ループの回数分、itemの長さを取得しにいってしまうので遅い！
for(var i = 0; i < item.length; i++){
 //処理
}

//良い例
//itemの長さを取得するのは最初の1回だけなので早い！
var len = item.length;
for(var i = 0; i < len; i++){
 //処理
}

上の2つ、chromeとfirefoxではほとんど差がなかったぞ…

■今回知ったのはループをi++ではなくi--でやる方法
それは…

for(var i = item.length; i--){
 //処理
}

これだけで、Chrome, Firefoxで60～70%くらいの時間で処理できるようになった。
IEは面倒なので確認してない。誰かやって！

i < length だとtrueかfalseの判定だけど、i--だと0かどうかの判定になる。
そっちの方がtrue、falseの判定よりも速いかららしい。

これだともちろん通常のi++でやる方法とは順番が逆になるので注意。

[JavaScript] Mediatorパターンを使ってみる

FormなどのGUI部分で、このラジオボックすでこっちが選ばれている時はこのinputを効かなくさせて、ここの値が20以下だった場合はこっちのselectリストをコレにして…
というのを1つ1つ条件分岐して処理を分けてると、そもそも大変で、仮に後から要素が1つ増えたりしたら、もうコントロールできなくなる。
なので、デザインパターンの1つMediatorパターンを使って管理するのが良いらしいので、JavaScriptでやる方法を調べてみた

複数のオブジェクト間の調整をする「相談役」を作る。
個々のオブジェクトはその相談役とだけコンタクトして、各オブジェクト同士ではコンタクトしない。
表示のコントロールのロジックは相談役にだけ書く

仲裁オブジェクトと各要素オブジェクトを作る。

//仲裁オブジェクト
var chusai = {
 elems: [],
 add: function(elem){
  //要素を登録するメソッド
  this.elems.push(elem);
 },
 change: function(){
  var elems = this.elems;
  for(var i = 0, len = elems.length; i < len; i++){
   //要素のパラメータを取得したりとか色々やって処理する
  }
 }
};

var Elem = function(elem){
 this.elem = elem;
};
Elem.prototype = {
 add: function(){
  //chusai任せ
  chusai.add(this.elem);
 },
 change: function(){
  //chusai任せ
  //どういう処理するかは仲裁オブジェクト任せ
  chusai.change();
 }
};
var elem = new Elem(要素);

elem.add();
elem.change();

あってんのかな…？やや不安
参考：オライリーのサンプルコード（英語）

Zend_Http_Clientでのエラー [Cannot handle content type '' automatically.]

調べてみたらどうってことはなかったけど、日本語で解説してくれてるページがなかったのでメモ。

Zend_Http_Clientでのエラー
「Cannot handle content type '' automatically.」

対処法は…
$client = new Zend_Http_Client($url);
//↓コレ
$client->setEncType();

setParameterPostでパラメータをセットしているか、setFileUploadでファイルをセットしていると、エンコードタイプの指定が必要になるので、明示的にエンコードタイプを指定する。
引数無しの場合、デフォルトでURLエンコードになる。
エンコードタイプにはurlエンコードとform-dataがある。
両方共Zend側に定数が用意してあるので、それで指定するといい
$client->setEncType(Zend_Http_Client::ENC_FORMDATA);


Zendのコード読めばすぐ分かるんだけどね…。
英語だからって逃げたせいで、より時間がかかった…。

[JavaScript] [高速化] JSファイルの非同期読み込み。遅延ロードっていうのか？

オライリーの「続・ハイパフォーマンスWebサイト」を読んでる。
すぐ使えそうなやつもあるのでメモメモ。

JavaScriptの外部ファイルの読み込み方法として一般的なhead内にscriptタグを書く方法、これだとJavaScriptを読み込んで実行している間は他のファイルの表示をブロックしてしまう。
JavaScriptはページ内のいろんな要素やファイルと関係したりするので、実行中に他のいろんな要素に動かれると困るらしい。
最近は1つのページで何個もJavaScriptファイルを読み込んでいたりするので、これはなかなか大変

「ハイパフォーマンスWebサイト」では、JavaScriptファイルは閉じbodyタグの直前に書けって言われる。
こうすれば、とりあえずJavaScriptファイルを読み込み出すまでに、htmlの表示はほとんど終わらせておくことができる。

それでもJavaScript実行中のダウンロード、表示のブロックは防げない。

■対処法
最初は最低限必要な処理のみ記述されたJavaScriptファイルを読み込む。
その中で、他に必要なファイルを読み込む処理を書く

//scriptタグをJavaScript内で追加する
var script = document.createElement('script');
script.src = '次に読み込みたいファイル名';
document.getElementsByTagName("head")[0].appendChild(script);

このやり方だと、他の読み込み・表示をブロックせずに進めることができる
調べてみると、昔から使われている技だったのね。

参考：
↓2006年の記事
動的に JavaScriptを読み込む

[Mootools] ウィンドウのスクーロール量を取得する

ライブラリを使わずにスクロール量を取得しようとして、ブラウザ間の違いに苦しんだりするのでメモ

//縦のスクロール量
window.getScrollTop()
//横のスクロール量
window.getScrollLeft()

参考：
縦のスクロール量を取得する
横のスクロール量を取得する

[CakePHP] cssをhead内に追加する

マニュアルに書いてはいるんだけど、見つけるのに時間かかったのでメモ。 テンプレごとに読み込むcssファイルを指定する場合、はテンプレート側にcssの記述を追加する。 Htmlヘルパーを使うんだけど、そのままechoすると、その記述をした箇所(body内)にlinkタグが追加されてしまう

//オプションにinline = false を追加する
$this->Html->css('ファイル名', null, array('inline' => false));
//1.3以前だと$html->css(****って書けばいい

[cakePHP] テンプレートを使わない場合

json返すだけとか、テンプレート使わない場合

$this->autoRender  = false;

参考：CakePHP ～を使わないシリーズ viewをつかわない

[cakePHP] cakePHP2.0で404エラーを出したい

以前はコントローラーで
$this->cakeError('***');
でエラーになってたんですが、バージョン2は変わってました

throw new NotFoundException():

新しく出来た例外のクラスをthrowするようになってました。

[iOS] iPad, iPhoneのaudioタグは同時に複数鳴らせない

iPad向けにsafariでできるゲームのようなものを作った。
その際、audio関連で色々引っかかった。
起きた問題はすべてPC版のsafariでは起きない問題だったので注意。
アニメーションなんかの動き系はPC版とあまり変わらないけど、audioは別。

・同時に複数鳴らせない
・クリックイベントと音がずれる

同時に鳴らせないのは仕様で、音がずれるのは複数の音声ファイルを扱うのは下手だからみたい。
全部のファイルをくっつけて、指定の音までシークして再生させると良いらしい。

参考：
【HTML5】iPhone向けWEBアプリで、Audioを使ってみてハマった点
iPhoneでHTML5のaudio要素を使うときに気をつけたいこと

[PHP] debug_backtrace 実行されたメソッドをさかのぼって表示してくれるメソッド。

PHPのある部分で、どうやってその処理までたどり着いたか遡って調べたくなる時がある。
そんな時はdebug_backtrace
処理のながれをさかのぼって連想配列で返してくれる。
バージョンによって引数が違うようなので注意。

参考：PHPマニュアル debug_backtrace

[JavaScript] データを格納した変数を変更すると、もとのデータも変更されたりされなかったり

JavaScriptの基本なんだけど、ふとどういう挙動なのか曖昧になったので確認＆メモ

var test =  {
    arr: [1,2,3,4],
    bool: true,
    num: 100,
    str: 'unko',
    obj: {
     baka: 'fool',
 aho: 'idiot'
    },
    test: function(){
 //配列
 var arr = this.arr;
 arr.shift();
 //元のデータも変更される
 console.log(this.arr);//[2,3,4]
 
 //真偽値
 var bool = this.bool;
 bool = false;
 //真偽値は元のデータは変更しない
 console.log(this.bool);//true
 console.log(bool);//false こっちはもちろん変更されてる
 
 //数値
 var num = this.num;
 num = 99;
 //変更されない
 console.log(this.num);//100
 
 //文字列
 var str = this.str;
 str = 'chinko';
 console.log(this.str);//unko
 
 //オブジェクト
 var obj = this.obj;
 obj.baka = 'stupid';
 //変更されている
 console.log(this.obj.baka);//stupid
    }
}

test.test();

オブジェクトは参照渡し。 参考：参照型の値を変数へ代入

[MYSQL] 日付データの比較で、あるカラムを現在日時と比較して表示したい

あるデータが現在日時より新しい、または古いレコードだけ取得したい場合がある。
ブログの予約投稿なんかは投稿日時に設定されている日時が現在より古い場合だけ表示ってことになるし、期限のあるイベントやキャンペーンなんかは、その期間が現在日時より未来のものだけ表示することが多い。

そういう場合のSQL
SELECT * FROM テーブル名 WHERE カラム名 >= NOW();

Google HTML/CSS Style Guideの俺にとって使えそうな箇所

■プロトコルは省略
http:とかhttps:とかは省略する
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
.example {
  background: url(//www.google.com/images/example);
}

■必要に応じてコメントを書く

■TODOは大文字 + コロン
<!-- TODO: remove optional tags -->

■type属性はいらない
<link rel="stylesheet" href="//www.google.com/css/maia.css">
<script src="/js/js.js"></script>

■URL属性はクォーテーションを使わない
url(//www.google.com/css/go.css);


■並び順はアルファベット順にする
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

■CSSのグループごとにセクション名をコメントに書く
/* Header */
#adw-header {}

/* Footer */
#adw-footer {}

/* Gallery */
.adw-gallery {}


参考：Google HTML/CSS Style Guide

[JavaScript] 例外の原因。HIERARCHY_REQUEST_ERR: DOM Exception 3

JavaScriptのある処理で例外が出た。
Chromeのコンソールで確認したところ、エラー文は「HIERARCHY_REQUEST_ERR: DOM Exception 3」
変数の中身など処理を確認しながら調べてみても、いまいちつかめない。
そもそもこの例外が意味するものもわからなかった。これは自分の英語力の足らなさが原因なんだけど…日本語で説明してくれているページが少なかったので困った。

原因を説明してくれているページ→付録A.2　DOMパーサの動作の差異
前述のページには「あるノードに対して，そのノードまたは祖先ノードを引数newChildとして，appendChildメソッドまたはinsertBeforeメソッドを実行した場合」が原因と書いてある。
コードを見返したところ、DOMを取得する部分でセレクターを書き間違えていたことに気づいた。

//間違いコード
$('#wrapper ul:last').append(liElement);

//正解コード
$('#wrapper > ul:last').append(liElement);

間違いコードで取得したul要素はappendしようとしたliの子要素だったため例外が起きていた。 ただの凡ミスなんだけど、原因がわかるのにちょっと時間がかかってしまった。

つまりは親を子の中に入れようとしてた。
それは社会的にもJavaScript的にもタブーだよってことみたい

[mootools] cssでのアニメーションtransitionEndがイベント登録できない

mootoolsだとcssのtransition終了時のイベントが登録できなかった。

//イベントを登録できない
$(id).addEvent('webkitTransitionEnd', function(){
 //-webtkit-transition終了時のイベント
});

//対処法addEventListnerで登録する
$(id).addEventListner('webkitTransitionEnd', function(){
 //-webtkit-transition終了時のイベント
});

うーん、なんでだろう。


--add [2012/8/8]

登録方法わかった！
Element.NativeEventsに登録すると使えるようになる！

Element.NativeEvents.webkitTransitionEnd= 2;

参考：
[MooTools] カスタムイベントを実装する方法
公式ドキュメント

iPhone, iPad の safariでアニメーションがちらつく

前に「CSSアニメーションがちらつく場合」で書いたけど、iPhoneのcssアニメーションでtranslate3dを使うとちらつかなくなるってのがあった。
今回は別の理由。

■問題
幅2000pxくらいのデカい画像を左から右まで素早く移動させたり、「ページトップへ」なんてボタンをクリックして、ページの最上部まで素早く移動させたりする時にちらつきがおきる。

これは、iPhoneの場合スクリーンを中心とした「1024px × 1024px」*は画面の外だったとしても描画されていて、その範囲外の部分は再描画しないといけないからみたい。
そして、この再描画には少し時間がかかる。

なので、再描画される前にその範囲外だった部分まで移動すると、画像やその要素がまだ表示されていない状態で画面内に入ってきてしまう。

■対処法
・iPhone自体のデフォルトのスクロールスピードの範囲内だったら、再描画される前に画面内まで来てしまうことはないようなので、スクロールのスピードを調整する。
・再描画される前に画面内まで来ないように、スクロールのスピードを調整する。
・でかい画像や要素をスクロールしているのなら、それを1024px以内になるように分割して順番にスクロールさせる。
とかかな

*iPadの描画範囲はいくつだろう？iPhoneの比率から考えると画面の縦横2倍ずつくらいかな。

参考：
Fast animation with iOS WebKit（英語）

[cakePHP] 基本機能

cakephp2を触ってるんだけど、色々と書き方なんかが変わってきているのでメモ

--------------------------

★コントローラー

■モデルの使用

$this->loadModel(モデル名);

■とりあえず追加・更新・削除機能を動かしたい場合

class UnkoController extends AppController{
    //↓$scaffoldを記述
    public $scaffold;
}

テスト用に自動で基本的な機能を使えるようにする機能であって、実際の運用には使わないほうがいいよって言われてます。

--------------------------
★モデル

■デフォルトの並び順を設定する

//モデルクラスに$orderという変数を作成する。値はSQLのORDER文
public $order = 'ModelName.created ASC';

--------------------------

★ヘルパー

◎Formヘルパー
■formの閉じタグとsubmitボタンを表示する

//Form->end()の引数に文字列を渡すとその文字列がvalueになったsubmitボタンが自動で作られる
$this->Form->end('submit');

--------------------------

随時追記していく予定

[JavaScript] CSSアニメーションの開始・終了イベント

最近iPad向けにcssアニメーションを頻繁に使う仕事をやった。
-webkit-transitionじゃなくて-webkit-keyframesで動かすタイプ。
アニメーションを開始するタイミング、終了するタイミング、ループするタイミングでイベントを登録できることを知ったのでメモ。便利。

//アニメーション開始時
//delayを指定していた場合は、遅れて開始するタイミングで発生するらしい
elem.addEventListener('webkitAnimationStart', function(){
 //開始時の処理
});
//jQueryなら
$(elem).bind('webkitAnimationStart', function(){
 //開始時の処理
});


//終了時
elem.addEventListener('webkitAnimationEnd', function(){
 //終了時の処理
});

//ループ時。animation-iteration-countが1より大きい時に発生する
elem.addEventListener('webkitAnimationIteration', function(){
 //ループ時の処理
});

今回はiPad向けだったので、webkitのみを対象にしたけど、FireFoxだとanimationstart, animationendとプレフィックスなしの全部小文字になるらしいので注意。

参考
CSS アニメーションの基礎

[Smarty] テンプレでメソッドに変数を渡す

Smarty3で、テンプレート内でメソッドの引数に変数を渡す方法
いっつも忘れてしまうのでメモ

//クォーテーションで囲って{}波カッコを使う
{$var->getItem("{$id}")}

//文字列と連結しつつ渡すこともできる
{$obj->getItem(id_"{$id}")}

[JavaScript] ブラウザの「-webkit-」などのベンダープレフィックスを取得する

JavaScriptでスタイルを指定する際に、「-webkit-」などのベンダープレフィックスをつけないといけないことがあるんだけど、主要ブラウザそれぞれに対応したスタイルを設定するのも馬鹿らしいので、JavaScriptで自動でつけたい。iScrollで使われていたコード。

//↓こんなのは面倒なので…
elem.style.WebkitTransaction = 'all 100ms linear';
elem.style.MozTransaction = 'all 100ms linear';
elem.style.OTransaction = 'all 100ms linear';

//自動でプレフィックスを取得する
var vendor = (/webkit/i).test(navigator.appVersion) ? 'webkit' : (/firefox/i).test(navigator.userAgent) ? 'Moz' : 'opera' in window ? 'O' : '';

//↓こういうふうに使う
elem.style[vendor + 'Transaction'] = 'all 100ms linear';

アニメーションが終わるタイミングで起きるイベント「transitionEnd」はfirefoxだけプレフィックスつかないので注意。なんでそんなことすんの…

chrome, safari -> webkitTransitionEnd
oper -> otransitionEnd
firefox -> transitionend(※全部小文字)

参考：
iScroll
CSS transitions

SASSで主要なブラウザのプリフィックスをつけるmixin

SASSで主要なブラウザ用にプリフィックスを付けるmixinを作ったのでメモ。

$prefixes: -webkit- -moz- -ms- -o- '';
@mixin vendorCss($key, $val){
 @each $prefix in $prefixes{
  #{$prefix}#{$key}: $val;
 }
}

div {
 @include vendorCss(transition, all 200ms ease-in-out);
}

↓こうなる
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-ms-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;

[iPhone] JavaScriptの処理にかかった時間を取得する

iPhoneのSafariだとデバッグコンソールを出して、console.logでデータを出すこともある程度できる。
だけど、JavaScriptの処理時間を計測するためにconsole.time(), console.timeEnd()を使ってみても表示されない。
なので、自分で計測する関数を作った。

var times = {};
function consoleTime(name){
 //指定がなかったらstart

 var d = new Date();

 if(typeof times[name] === 'undefined'){
  //スタート時のタイムスタンプを保存
  times[name] = d.getTime();
  return;
 }else{
  console.log(d.getTime() - times[name] + 'ms');
 }
}

consoleTime('timeCheck');
//何か処理して
consoleTime('timeCheck');
//***ms

Androidでは試してないけど、console.logのとこをalertに変えれば表示されるんじゃなかろうか。

[JavaScript] jQueryをローカルストレージに保存して高速化

サイトに来る度にjQueryを読み込み直すんじゃなくて、ローカルストレージに登録したほうが早いんじゃないかって思ったのでやってみた。

■Chromeの場合
読み込む場合にかかった時間 125ms～200ms
ローカルストレージから読み込む場合 25ms～40ms

■iPhoneの場合
読み込み
Wi-Fi 280ms～400ms
電話回線 800ms～1200ms
ローカルストレージ
130ms～200ms

通信環境によって、色々変わりそうだけど、iPhoneだと大きく違う！
早いぜっ！

アプリケーションキャッシュにすればもしかして全部解決なのかも…

--add [2012/8/24]
スマートフォン向けのサイトなら、jQueryをよみこむのはXMLHttpRequestじゃなくて、scriptタグを生成する方がよさそう。その場合はscript要素のonLoadイベントで読み込み後の処理を開始するといいはず。(試してない)
参考：[JavaScript] [高速化] JSファイルの非同期読み込み。遅延ロードっていうのか？

//jQueryを読み込んだ後に最初に呼ぶ関数
function start(){
 //jQuery読み込み後の処理
}

//ローカルストレージからjQueryを読み込む
var jQ = window.localStorage.getItem('jQuery');

if(jQ === null){
 //ローカルストレージにない場合
 //jQueryファイルを読み込む
 loadJQuery();
}else{
 //ローカルストレージにある場合

 try{
  //ローカルストレージに保存してある文字列をJavaScriptとして処理
  eval(jQ);

  if(typeof jQuery === 'undefined'){
   //ローカルストレージのjQueryがうまく動かなかった場合は読み込み直し
   throw new Exception();
  }
  
  start();
 }catch (e){
  //evalでエラーが出た場合は読み込み直し
  loadJQuery();
 }
}

//jQueryを読み込んでstart関数を呼ぶ
function loadJQuery(){
 var xmlhttp = new XMLHttpRequest();

 xmlhttp.open("GET", 'jQueryファイルへのパス', true);
 xmlhttp.onreadystatechange = function(){
  
  if(xmlhttp.readyState === 4 && xmlhttp.status === 200){
   
   //読み込み成功時
   var str =  xmlhttp.responseText;
   
   //文字列として読み込んでローカルストレージに保存
   window.localStorage.setItem('jQuery', str);
   //JavaScriptとして処理
   eval(str);
   start();
   
  }else if(xmlhttp.readyState === 4 && xmlhttp.status !== 200){
   //読み込み失敗時
  }
 };
 
 xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
 xmlhttp.send();
}

CakePHP2.0でのリダレクトエラー

CakePHPの2.0でリダレクトしようとした際に画面が真っ白になってしまった。
調べたところ、headerを返す前になにか出力してしまってるんじゃないかとのこと。

探してみたが何も出力していない。
Debuggerでなにかしようとしているということはわかった。

とりあえずcore.phpのデバッグレベルを0にすると起きないということだけわかった。
もうちょっと調べてみよう。

参考にしたサイト：

HTTPヘッダ送信後のredirectメソッドでエラーが表示されない

[mootools] 位置・座標取得まとめ

//要素までスクロールする距離を返す
elem.getScroll();

//要素のオフセットを返す
elem.getPosition();
//引数に要素を渡すと渡した要素からの相対的な距離が返ってくる

//要素の座標を返す
elem.getCoordinates();
//引数に要素を渡すと渡した要素からの相対的な距離が返ってくる

[iPhone] 縦向きでも横向きでも画像を画面いっぱいに表示したい

画像を画面いっぱいに表示する方法
cssで指定する

img {
  width: 100%;
  height: auto;
}

[JavaScript] 要素の作成・追加・削除・追加・挿入・置換・移動

//作成
document.createElement('タグ名');

//削除
parent.removeChild(子要素);

//子要素として追加
elem.appendChild(追加したい要素);

//子要素を置換
elem.replaceChild(新要素, 旧要素);

//位置を指定して挿入
parent.insertBefore(新要素, 既存要素);

↑既存要素の前に新しい要素を挿入する
既存要素は省略可能
要素の移動にも使える

SCSSを使ってみた

なんとなく知ってたんだけど、ちょっとめんどくさそうだなーと敬遠していたんですが、中村勇吾さんの会社の採用情報の「好ましいスキル」に「Sass, LESSなどのCSS拡張言語の利用経験」というのを見つけたのがきっかけで触ってみる気になりました。

具体的には「CSS HappyLife」というサイトが詳しく紹介してくれてます。

【Sassを覚えよう！】もくじ的なのと参考リンク：CSS HappyLife



軽く触ってみた感じ…とても便利です。
めんどくさがって敬遠していた過去の自分を叱りつけてやりたい。
LESSってやつも気になります。
CakePHPだとphpでコンパイルしてくれるプラグインがあるらしいので、Cakeの時はLESSも使ってみようかなと思ってます


How to use LESS CSS in CakePHP application(英語)

videoタグの動画ファイルが再生できるかどうかJavaScriptで判定する

HTML5の新しいタグ、video要素では動画の読み込みに失敗するとerrorイベントが起きる

//video要素を取得
var v = document.getElementById('#video');

v.addEventListener('error', function(){
 //エラー時の処理
});

errorイベントは「メディアデータの読み込み中にエラーが発生した時」に発生するらしい

参考：
video要素、audio要素をJavaScriptから操作する

errorイベントが起きた時は、src属性を他の動画に変更する処理をしたんだけど、新しい動画でも読み込みエラーが起きて、無限にエラーを履き続けるようになった。
なので、やめた。

[MySQL] Nullの値のものは最後に表示する

よく忘れるのでメモ

MySQLで、あるカラムの値がNULLの場合は、値が入力されているものよりも後ろに出したいっ時

ORDER BY カラム名 IS NULL ASC
を入れるとOK!

参考：
MySQL で NULL を一番最後にして昇順にソートする

[CakePHP] Ajaxによるアクセスかどうか判定する

Ajaxからのアクセス以外は許可したくない時など

//RequestHandlerコンポーネントを追加
public $components = array(
'RequestHandler'
);

public index(){
if($this->RequestHandler->isAjax()){
//Ajaxの場合
}else{
//それ以外の場合
}
}

俺の場合はAjaxのアクセスしか許可せず、それ以外は404にすることが多い

[iPhone] iPhoneでのスクロール判定。 iPhone3, ios 4.1だとdocument.body.scrollTop/scrollLeftが取得できない

facebookのページみたいに、ページ下部までスクロールしたら自動で次のデータを表示する処理を以前に作った
iPhone4.1だと自動で読み込まないことが判明。

定期的にdocument.body.scrollTopでスクロール位置を取得して、ページの下の方までスクロールしたら次を読み込むという風にしていたんだけど、iPhone4.1だとdocument.body.scrollTopが使えなかった

対処：
window.pageXOffset/pageYOffsetを使うと取得できる
Androidでも大丈夫(Android2.2, 2.3, 4.0で確認済み)

[Linux] ファイルの所有者の変更とパーミッションの変更

メモメモ

chown ユーザー名 ファイル名

chmod 777 ファイル名

この777とか644とかってなんて名前なんだろう？

正確にしらべたいなら↓こちら
【 chown 】 ファイルやディレクトリの所有者を変更する
【 chmod 】 ファイルやディレクトリのアクセス権を変更する

「今夜お前とHello,World」ちょい不良モテコード入門 Vol.1

今まで何回か読んだ記事だけど、また見かけたので自分的にまとめ
職業プログラマになって考えた「良いコード」とは？


女豹(ニキータ)に「ベタ」は通用しない

一番自分が問題だと思ったのが「処理のベタ書き」。
コードを改修する時に一番の弊害になるのがコレだと思った。
つまりクラスやメソッドを定義せず、ひたすら処理をずらずら書いていくことだ。
～中略～
仕様を追っていくのが大変
require_onceで外部スクリプトを読み込んで実行している場合いちいち外部スクリプトを開いて読まないと処理の流れが分からず非常に読みづらい
変数のスコープがアホみたいに広いので読み解くのが大変
コードを修正するときの影響範囲がわかりにくい。変な所で相当前に書いた処理が影響してたりする。
単体テストがしにくい

どうすりゃいいのかも書いてくれてる

1.ショボくてもいいから必ず仕様書は残す

ちょいワルモテコード的に要約すると
「ニキータの部屋に意味深な地図を残しておけ」

2.オブジェクト指向を守る

ちょいワルモテコード的に要約すると
「女は男の謎に弱い。プライベートは隠せ！」

さらに…

これだけで以下が実現できる
１．無駄な繰り返しの排除
２．修正による影響範囲の特定
３．関数単位での単体テストが可能になり全体の品質担保がしやすくなる
４．どこで何をしてるかが解りやすくなる

これを守ることで、コードを見ただけで濡れそぼるようなちょい不良プログラマーに一歩近づく。
「今夜、貴方がrequireなの…」
「require_onceになるかもしれないぜ、それでもいいのかい？」
なんて小粋なキャッチボールができる日も遠くないっすわ。

配色のお勉強

先日とあるサイトのデザインコンペに落ちた。
そのサイトはまだ公開していないし、守秘義務などあるらしく、いまのとこ理由は聞かせてもらえてない。

わからないことを悶々と考えてもしょうがないので、改めて自分のデザイン案を見ると、色々と文句付けたくなった。

一番甘かったなーと思ったのが配色設計。
日数があまりなかったという言い訳で、しっかり考えて設計せずに作業を進めてしまっていたように感じる。

焦って根っこの大事な所をおろそかにして作業を始めてしまうってのはよくある。
手を動かしてる間は進んでるような気がして安心しちゃうんだろうなー。

とりあえず、配色を復習していこう。

ドミナントカラー
・同一色相で作った多色配色
・トーンの幅が広いとより色相が統一されていることが強調される
・色のイメージがそのまま配色のイメージになる
・赤系の同一色相で揃えて刺激的なイメージなど

ドミナントトーン
・同一のトーンで作った多色配色
・トーンのイメージがそのまま配色のイメージになる
・「ストロングトーン」で揃えた力強い配色、「ペールトーン」で揃えた柔らかい配色など

トーン オン トーン
・同じ色相でトーンに差をつけた配色
・統一感がある
・青のトーン違いで配色するなど

トーン イン トーン
・同じトーンで色相に差をつけた配色
・色相に幅があるのでにぎやかな印象になりそう

トライアド
・色相環上の正三角形の配色
・以前正三角形じゃないとだめだった言われたな…。正三角形に近い三角形だと安定しないのか？

use_trans_sidとuse_cookiesとuse_only_cookiesの設定

どういう場合はURLにセッションIDが付加されるのか、ブラウザでCookieをONにした場合とOFFにした場合で調べてみた。


「 URLに付加しないし、Cookieも使わない！」
use_trans_sid: 0
use_cookies: 0
use_only_cookies: 0

cookie on: つかない
cookie off: つかない

当然、両方とも付加されない。

---------------------------

「Cookieは使わずにURLに不可する！」
use_cookies: 0
use_only_cookies: 0
use_trans_sid: 1

cookie on: yes
cookie off: yes

当然、両方とも付加される

---------------------------

「Cookieは使うけどURLには負荷しない！」
use_cookies: 1
use_only_cookies: 0
use_trans_sid: 0

cookie on: no
cookie off: no

付加しない設定なんだから、当然付加されない。
Cookieオフの場合、セッション自体使えないんじゃないか(未確認)
【追記】やっぱり使えんかった

---------------------------

4. URLに孵化するし、Cookieも使う！
use_cookies: 1
use_only_cookies: 0
use_trans_sid: 1

cookie on: no
cookie off: yes

処理が別れた。
Cookieが使える場合はCookieを使い、使えない場合はURLに付加する

---------------------------

「 URLに賦課するし、Cookieも使うけど、Cookieしか見ない！」
use_cookies: 1
use_only_cookies: 1
use_trans_sid: 1

cookie on: no
cookie off: yes

これはちょっと予想外。
Cookieが使えない場合、URLに付加される
URLについたセッションIDが認識されているかは未確認
【追記】cookie OFFだとセッション使えない

---------------------------

「 URLにフカして、Cookieは使わない、でもCookieしか見ない！」
use_cookies: 0
use_only_cookies: 1
use_trans_sid: 1

cookie on: yes
cookie off: yes

矛盾した設定
Cookieが使える場合でもURLに付加された
use_cookiesが0の場合、use_only_cookiesの設定は影響しないようだ
【追記】URLにセッションIDが付加されるんだけど、認識されていない。セッション使えず。

---------------------------

「Cookie使わないけど、Cookieしか見ないし、URLにも鱶しない！」
use_cookies: 0
use_only_cookies: 1
use_trans_sid: 0

cookie on: no
cookie off: no

これも矛盾系
もちろんURLは付加されない

---------------------------

「 Cookieは使うし、Cookieしか見ないし、URLには譜歌しない」
use_cookies: 1
use_only_cookies: 1
use_trans_sid: 0

cookie on: no
cookie off: no

付加されない
use_trans_sidが0の場合は、他の設定に関係なく付加されないようだ

---------------------------




■結果

use_trans_sidが0だとURLにセッションIDは付加されない
use_cookiesが0の場合、use_only_cookiesの設定は影響しない

Array.prototype.slice.callとcallとapply

あるJavaScriptライブラリのコードを読んでいたらArray.prototype.slice.call(argments)という部分があった。
良く見かけるんだけど、なんだったか忘れてしまうのでメモ。

引数を格納している変数argments。
どんな関数にもある。
引数が複数ある場合は、argmentsの中身も複数になる
で、lengthは取れるんだけど、配列のメソッドは持っていないらしい。

var args = Array.prototype.slice.call(arguments);

これで引数が格納された配列が出来上がる


で、この時使われているcallというメソッドはなに？
これはすべての関数が持っている関数。
関数1.call(引数1, [引数2, 引数3]);
この引数1には関数1の中で使われるthisとして使いたいオブジェクト渡す。
上記の
Array.prototype.slice.call(arguments);
で言うと、Arrayが持ってるsliceメソッドの中で使われているthisは、引数で渡すargumentsってことにしちゃいますってこと。
slice(start, [end])はthisの中の0から数えて、start 番目～ end - 1 番目までの要素を抜き出した配列を返すメソッド。
なのでこの中のthisをargumentsにすり替えた場合、argumentsの中のstart 番目～ end - 1 番目までの要素を抜き出した配列を返してくれる。
startもendも指定しない場合は中身全部ってことになるので、argumentsの要素を全部抜き出した配列が返ってくることになる。

callに関して、すごくわかりやすく説明してくれている方がいたのでそっちを見て
applyとcallの使い方を丁寧に説明してみる


ついでにapplyもメモ
基本的にはcalllと同じ機能。
違うのは第2引数以降をカンマ区切りにするんじゃなくて配列で渡すとこ


参考：
argumentsとArray.prototype.slice.call : JavaScript
applyとcallの使い方を丁寧に説明してみる

文字のアニメーション

コリスでCSSで文字をカーブ状に配置するjQueryのプラグインが紹介されていた
そのプラグインの趣旨とは違うんだけど、デモのアニメーションが気持ちよかった。

デモ
「Animate me」ってリンクを押すとアニメーションします

ストップモーションみたいにややコマ落ちしたようなアニメーション。
少しアナログな感じと有機的な印象の動き

このデモのフォントの感じとたまたま設定したカーブの度合いがそういう風にみせてるのかもしれないけど、こういう印象を与える文字のアニメーションってFLASHでもあまり見たことない気がする。

JavaScriptで文字を1つずつ動かしてると思うので、少しパワーを使ってしまうかもしれないけど、こういった派手すぎないアニメーションならWEBでも使えそう。

参考：

[JS]文字を楽しく見せる、カーブ状に簡単に配置できるスクリプト -Arctext.js

iScrollを使うとselectタグが動かなくなる

iScrollっていうスマートフォンでposition:fixedを再現できるライブラリがあるんだけど、それを使うと中にあるselectタグが反応しなくなった。

調べてみたら解決済みみたい。
参考：スマートフォンでposition:fixedを再現するiscroll！input問題も解消

この書き方だと画面全体でデフォルトのスクロールができなくなるのかな？
俺の場合はiScrollを使うのはページ内の一部なので、これだと困る。
使うのもとりあえずselectタグだけだった。

なのでスクロール停止機能とイベント伝達停止機能は限定的にした

var myScroll = new iScroll("id名", {
 var target = e.target;
       while(target.nodeType !== 1){
  target = target.parentNode;
 }

 if(target && target.tagName == "SELECT"){
  e.stopPropagation();
 }
});

var iScrollElem = document.getElementById("id名");
iScrollElem.addEventListener("touchmove", function(e){e.preventDefault();});

[iPhone] プライベートブラウズモードだとストレージが使えない

ユーザーの行動を色々保存しておいて、そのユーザーにあったコンテンツを表示する機能ってのを以前作った。
その機能を作るのにWEBストレージを使ってるんだけど、iPhone Safariのプライベートブラウズ機能をオンにすると、ストレージがうまく使えない。

//取得できない
global.localStorage.getItem("name"); //nullが返ってくる

//登録もできない
global.localStorage.setItem("name", 'Taro');  //例外になる

とりあえずはsafariだけみたい。
プライベートモードかどうかを判定することもできるみたいだけど、将来的にどうなるかわからんのと、絶対に必要な機能というわけではなかったので、プライベートモードの時は上記の機能は使えないようにした。

具体的にはtryで囲っただけ

try{
 global.localStorage.setItem("name", 'Taro');  //例外になる
}catch(e){
 //何もしない
}

参考：[ネット技術]HTML5のストレージ技術とプライベートブラウジング 

[Raphael] 円を表示 ’＆ アニメーション

Raphaelを使ってsvgで円形を表示させてみる

Raphael使って円形で画像切替 - jsdo.it - share JavaScript, HTML5 and CSS

1はただ円を表示させただけ。
2は画像切替のアイデア。オンマウスで枠より大きかった円形を枠内に表示させるように小さくアニメーションした。今回は背景色変えてるだけ。

SVGで画像のマスクなんかできるとさらによさそう。
やってみよう

var paper = Raphael(elem, 100, 100);

//円要素を作る。引数は中心のx座標、y座標、半径
var cirlce = paper.circle(50, 50, 40);

//属性追加
circle.attr({
 fill: "white"
});

//マウスオーバーイベント
circle.mouseover(function(){
 //処理
});

//マウスアウトイベント
circle.mouseout(function(){
 //処理
});

[jmeter] 連番にした変数を順番に使用する

設定した連番付きの変数に順番にアクセスしていく方法。
別ファイルなんかに入れてもいいんだけど、共有する場合、人によってそのファイルへのパスが変わってしまうこともありそうなので。jmeterだけで完結させるやり方。

■まずは変数を設定
「ユーザー定義変数」に変数を連番付きで設定
AREA1 >> Hokkaido
AREA2 >> Aomori
…
AREA47 >> Okinawa

■処理を設定
1．ループコントローラーを設定
ループ回数は今回は47に設定

2. ループコントローラーの中に「カウンタ」を追加
「設定エレメント」-> 「カウンタ」
最大値は今回は前述の47より大きければ何でもいいや。
参照名は「COUNTER」にした。好きな名前でいい。

3. カウンタの後に処理を追加
ここで最初に決めた連番付き変数を順番に取得する。
${__V(AREA${COUNTER})}

__V()の中だと変数名を使用できる。
上記の例だと「AREA」と${COUNTER}を連結した変数名を参照するようになる

vmgファイルってのが添付されてきた

日記を携帯からメール投稿できるシステムでエラーがあった。
メールに添付されてきたファイルで、こちら側で処理するように指定したファイル形式以外のものが添付されてきた場合は処理せずにエラーメールを返していた。

vmgという拡張子のファイルが添付されてきたのでエラーになった。
content-typeは「text/x-vmessage」
検索してみると、携帯のメールを保存すると、そういう拡張子で保存されるらしいってことがわかった。

中身はmultipartになっていて、空の本文とjpgが添付されているような形だった。
恐らく古めの携帯で起こるっぽいし、そもそも何年もやっていて初めて起きたくらい少ないことなので「対応していないファイルです。機種などお聞かせいただければ対応可能かも」という対応で終了。

新しい機種にしても、すごい古い機種にしても…携帯は大変だなー


--add 2012/1/13
どうやら古い携帯からのメールを転送したりするとこういうことになるみたい