【cakePHP】トグルスイッチをAJAXで反映させる

さして目新しいことでもないですが簡単な小ネタでも。

トグルスイッチを切り替えるたびにDBを書き換えることは簡単にできます。
cakePHP2.0+jQueyMobile1.2でのトグルスイッチのDBへの反映のやり方です。いいやり方か分からないですが何かの助けになればと。

cakePHPのアクションは

こんな感じです。これをコントローラに記述して /{コントローラ名}/toggleValid/{ID} にアクセスするたびにvalidカラムが0と1に交互に変わります。CASE文で判定すればいろいろできて便利なのでcakePHPでSQL組み立てるやり方が分からないときはとりあえずqueryファンクション使っちゃいます。

そしてこの関数はコントローラーでなくモデルに書くべきものなので実際にはモデルに書いてます。またjQueryMobileと組み合わせているので下のようになります。

[共通読み込みJavaScriptファイル]

このファイルはjQueryMobile特有の処理をしています。最初のイベントバインドはDOMキャッシュを有効にしたままJavascriptを実行させるため、data-role=”page”の属性を持つコンテナにidを割り振り、そのページコンテナの初期イベントを監視しています。

[ビューファイル(index.ctp)]

$validと$idはコントローラからセットしておいてください。data-idはjQueryMobileではおなじみのHTML5の独自データ属性です。これでデータIDをjQueryへ渡すのが簡単です。

[AJAX呼び出し先コントローラー]

[モデル]

【cakePHP】検索エンジンに補足されないよう削除リンクはPOSTにしよう

かなり前に作ったサービスなんですが、入れたはずのデータが時間が経つと消えているという怪現象に遭遇しました。

いや、分かってみると怪現象でもなんでもなかったんですが、とある中華検索サイトが削除リンクをクローラ収集中に踏んでいたのでした。

こういうことが起きないよう、クローラにアクセスされるとデータが変わってしまうようなリンクはPOSTかJavaScriptを使ったリンクにしましょう。

元のリンク

cakePHP1.3のajaxヘルパー(2.0では非推奨)を使ってリンク先の画面を画面を遷移せずに取得していました。変換されるHTMLをみると

とJavaScriptが実行できないクローラでも普通のリンクとして辿れるようにできています。
POSTに書き換えました。(div内を書き換えるのでなく特定のdivを削除するようやり方は変わってます)
jQueryを使用しています。

ちなみにcakePHP2.0のFormヘルパーにはpostLINKという関数が追加されていますので、動的に書き換えたりしないならこっちを使ったほうが簡単なのではないでしょうか。

キャッシュ可能なURLはGETで、データ操作のあるURLはPOSTで行うと考えると分かりやすいでしょう。

しかし検索クローラはPOSTをSUBMITしないのでしょうか。googleは2012年のWEBマスター向け公式ブログでPOSTリクエストに対応していると明記しています。
いずれまた対策を施さないといけなくなるかもしれません。その時は、パーミッションの与えられた会員ユーザーかどうかをチェックしたうえで削除することになるでしょう。

【jQueryMobile】cakePHPのためにjQueryMobileリンクのAjaxを無効にする

jQueryMobileではリンクはAjaxを使った読み込みとしてDOMに差し込まれます。

これが問題を起こすことがあります(cakePHPでundefinedと表示されるとか

検索かけると古い記事が多かったのでメモ書き。
そんなによくは調べてないですが、たぶん書かれてあるものよりこっちのほうがいいだろう、もしくはこっちじゃないと動かなかったってことで。

jQueryとjQueryMobileを呼び出している途中にスクリプトを入れます。

これはcakePHPの例ですが普通のHTMLではsrcの中身が通常のURLになるだけですね。
たまたまみつけた記事では$.mobile.ajaxEnabledが$.mobile.ajaxLinksEnabledになってましたがajaxEnabledになったようです。

なんでjQueryMobileの挙動を制御出来るかというとグローバル設定のドキュメントを見れば分かります。

ちなみに特定のリンクだけで無効にしたい場合はrel=”external”とすると外部サイトという意味で検索エンジンに影響与えそうな気がするので、data-ajax=”false”を属性として与えるのがいいんじゃないかと思います。

追記:cakePHPでundefinedと表示される問題については「WEBLE-CakePHP で jQuery Mobile を使用して Ajax を有効にした状態でページ遷移しようとすると真っ白な画面に undefined になる場合の解決方法」にあるようにView/Layouts/ajax.ctpを作ることで解決できました。Ajax読み込みを無効にするのは一時的、もしくはやむを得ない特殊な場合で、基本Ajaxリンクができるようなつくりにしたほうがよいです。

【Unity】ドラッグで回転盤を回転させるスクリプト2

前に
【Unity】ドラッグで回転盤を回転させるスクリプト
を書きました。続きです。

作ったアプリは

農薬希釈表
おもっさまミカメジャーナル
価格:無料  平均評価:5.0(1)

デザイン協力:Studio tama,syu 音素材:魔王魂

しかしいくつか問題がありました。

1.指で中央部分を横切るようにスワイプすると回転がぎゅんっ!となる
2.かちっ、とちょうどよいところで止まって欲しい
3.ルーレット盤のように指を離しても慣性で少し動いて欲しい

まず3の慣性は、指を離した後に
[javascript]disc.rigidbody.AddTorque (Vector3.forward * (10 * rotatePower)); // 慣性で回り続ける[/javascript]
とやるとうまくいきました。が!この後、2を解決しようと摩擦をつける物理法則だとかみえないストッパーだとかいろいろ試し始めたのですが、物理演算を使おうというこの発想がそもそも間違いでした。
ここは最近のWEBサイトでよくあるスライドショーと同じで、24度回転するごとに現在の表示倍数を1,2,3とカウントし、指を離したらそのカウントした数に24度掛けたとこまで自動で回してやればいいんです。
もちろん左回りの場合は算出した度数から24度ひいたところに回してやります。
これでかちっと止まるように。

[javascript]
// 他のオブジェクトとのリンク:
public var dummyPointer : Transform; // 空のゲームオブジェクトだけでいい (見えないけどね)
public var disc : Transform; // メインの回転盤
public var currentCursor : int;
public var audioClip : AudioClip;

// Variables:
private var dummyOffset : float;
private var discOffset : float;
private var discSpilitNumber : int = 15;
private var rotatePower : float; // 0より大きいなら右回り
private var autoMove : boolean = false; // 半端な位置からの移動

// A Flag:
private var mouseIsUp : boolean = true;

// Raycast SetUp:
var hit : RaycastHit;

function Update () {
var rotation ;

// マウス押したか:
if (Input.GetMouseButton(0)){

// 判定のRaycast発射:
var ray = Camera.main.ScreenPointToRay (Input.mousePosition);

// 光線が特定の名前のオブジェクトにあたった:
if (Physics.Raycast (ray, hit) && (hit.transform.name == "disc")){

// 常にダミーはあたった箇所を向く:
dummyPointer.LookAt(hit.point, Vector3.forward);

// マウスを押したときの初期処理:
if(mouseIsUp){

// ダミーとメイン回転盤の角度を覚えておく
dummyOffset = dummyPointer.eulerAngles.z;
discOffset = disc.eulerAngles.z;

// 最初のクリックでなくなる:
mouseIsUp = false;

}else{

// 最初のクリックでない (押し続け)
// ダミーから回転盤の回転をセットすることができる:
var z :float = discOffset + (dummyPointer.eulerAngles.z – dummyOffset);
rotatePower = z – disc.eulerAngles.z;
disc.eulerAngles.z = z;
}
}

autoMove = false;

} else {
// クリックが終わったらからフラグも戻す:
mouseIsUp = true;
autoMove = true;
disc.rigidbody.AddTorque (Vector3.forward * (10 * rotatePower)); // 慣性で回り続ける
}

disc.transform.position = new Vector3(0, 0, 0);

// 特定のポイントで止める
if (autoMove){
if (rotatePower < 0){
rotation = Quaternion.Euler(0, 0, currentCursor * (360/15));
} else {
rotation = Quaternion.Euler(0, 0, (currentCursor * (360/15)) + (360/15) );
}
disc.rotation = Quaternion.Slerp(disc.rotation, rotation, 0.1);
}

var oldCurrentCursor = currentCursor;
currentCursor = disc.eulerAngles.z / (360/discSpilitNumber);
if (oldCurrentCursor != currentCursor){
audio.PlayOneShot(audioClip);
}
}

[/javascript]

1についても簡単な方法がありました。真ん中付近をタッチで反応しなくしてやればいいのです。
穴の開いたモデリングをしてそこにColliderをつけるのではMeshColliderとなってしまい計算負荷が高いので、かぶせるように別のColliderを入れました。

SphearColliderはもっとも計算が軽いうえに、ぴったりサイズに収まるのでおあつらえむきですね。

おもっさまミカメジャーナルがテレビ愛媛で紹介されました

仲間たちとやっている「おもっさまミカメジャーナル」が9月29日、テレビ愛媛の「ふるさと絶賛バラエティいーよ!」で紹介されました。

何でこのサイト始めたかということをぜひ言いたいと用意していたんですが自分のしゃべってる姿をテレビでみると、情けないやらうれしいやら・・・。言ってる内容はいいんですがしゃべり方がなぁ。なんかセリフしゃべってるぽいです。しかもかみかみ^^;もっと普通にしゃべれるようがんばります。

テレビで放映された効果は絶大で、取材陣みな、あちこちで「テレビでてたやろ~」声をかけられています。
「おもっさまミカメジャーナル」が地域の人により浸透して、長く、楽しく続けて行きたいと願っています!

&#160;とは-文字参照あれこれ


とても基本的なことがどういうわけか分からなくなり、焦る・・・ということが最近多い。

今日、焦ったのは文字参照
これはHTML中に不等記号なんかのHTMLを崩してしまう特殊な文字を安全に表示させる方法で、これを利用してブログ記事やコメント欄なんかで&hearts;と入力すれば表示ではに変換できる昔からのテクニックです。指「☞」とかだせますよ。
&heats;は文字なので文字実体参照、これを文字コードにすると&#x2665;(16進数) または &#9829(10進数) で、こっちを数値文字参照といいます。

自分は興味のある地元情報をWEBスクレイピングの技術を使って自動で集めており、集めたデータはおもっさまミカメジャーナルのウィジェットに表示させたりしてます。
クローリングした内容に&#160;が含まれていて、これが何かちょっと調べて問題なければ除去しようかと。

なんとなく、スペースか改行なんだろうと思うけど。

とりあえずPHPで数値参照、文字参照を変換するにはmb_convert_encodingが使えて
[php]

echo mb_convert_encoding("&#160;", "UTF-8", "HTML-ENTITIES");
[/php]
でいい。

コマンドラインPHPでやってみたので
[shell]

php -r ‘echo mb_convert_encoding("&#160;", "UTF-8", "HTML-ENTITIES");’ | less
[/shell]
すると<C2><A0>と表示されました。

分かる人には分かるのかもしれないけど自分にはよく分からない。

数値参照の数値はASCIIテーブルに格納されている番地だった気がするのでその表をみれば分かるかもしれないと思い、記憶を頼りに探そうとするのだけどどこにあったか思い出せない。
たしかすごくいいマッピングテーブルを8年位前にどっかでみた。それがみつからず。こういうことに時間使ってちゃあだめですね、自分。

Wikipediaで分かったのだけど数値参照の数値はUNICODEを基にした国際規格ISO/IEC 10646(UCS)の文字番号で指定するのだとか。

同じくWikipediaのISO/IEC 8859-1(Latin-1)のページでみつけたマッピングテーブル。

ISO/IEC 8859-1
x0 x1 x2 x3 x4 x5 x6 x7 x8 x9 xA xB xC xD xE xF
0x 未使用
1x
2x SP ! # $ % & ( ) * + , . /
3x 0 1 2 3 4 5 6 7 8 9 : ; < = > ?
4x @ A B C D E F G H I J K L M N O
5x P Q R S T U V W X Y Z [ \ ] ^ _
6x ` a b c d e f g h i j k l m n o
7x p q r s t u v w x y z { | } ~
8x 未使用
9x
Ax NBSP ¡ ¢ £ ¤ ¥ ¦ § ¨ © ª « ¬ SHY ® ¯
Bx ° ± ² ³ ´ µ · ¸ ¹ º » ¼ ½ ¾ ¿
Cx À Á Â Ã Ä Å Æ Ç È É Ê Ë Ì Í Î Ï
Dx Ð Ñ Ò Ó Ô Õ Ö × Ø Ù Ú Û Ü Ý Þ ß
Ex à á â ã ä å æ ç è é ê ë ì í î ï
Fx ð ñ ò ó ô õ ö ÷ ø ù ú û ü ý þ ÿ

UCSのマッピングテーブルをみたかったのだけど、これでもいいや。latin-1の横16列、縦16列の256文字(割り当てられてない領域も含む)はどの文字コードでも互換性のある基本中の基本で、この中に&#160;も含まれています。
160を16進数になおすとA0、ということで縦がAで横が0の列、「NBSP」が&#160;の正体でした。

NBSPとはNonBreakSpaceのことで文字参照の&nbsp;と書きます。
こちらのほうがHTMLコーディングしている人にとってはよく使いますよね。

&#160が&nbsp;の単なる別の表記だと分かったので、どちらも空白に変換するよう修正。
あぁ、ついでに16進数数値文字参照の&#xA0;も同じ処理にしとこう。
mb_convert_encodingで文字参照をすべて実体化する処理がすんなりいけば、それを最初にするだけでいいです。

ちなみにコマンドラインでみえた<C2><A0>はUTF-8でのNBSPらしい。C2A0で検索かけるといろいろでてきた。lessはそういう表示の仕方なんですね。

別の疑問が沸いてきます、空白にはSP(&#20;)が登録されているのに、なぜNBSP(&#160;)があるのでしょう。

これには欧文と和文の違い、そしてHTML上での表現の仕方が関係してそうなのですが、それについて調べてると長くなるのでまた今度!

【blender】ちょっとした小技

プロパティの小技

  • スライドバーでドラッグしている時にShitボタンを押すと微妙な調整ができます。Ctrlを押すと小数点のつかないステップ入力になります。
  • スライドバーをクリックして数字を入れるときに5/10+3や、pi数式も入れられます。PythonのMath関数が使えるようです。

モデリングの小技

  • Ctrlを押しながら左クリックで連続的に頂点の引き伸ばしや面を張れます。

Macの小技

  • パネルや3Dウィンドウ内のプロパティシェルフでピンチイン・ピンチアウトの操作を行うとパネル内の文字やボタンの大きさが変わります。
  • MacでF12レンダリングを有効にするにはOSのシステム環境設定でキーボードの標準のファンクションキーと使用するようチェックマークをつけ、キーボードショートカットでMissionControlのF12Dashboardを表示を無効にしておきます。

【Unity】ドラッグで回転盤を回転させるスクリプト1

Unityで回転盤のようなものをドラッグで回転させる方法を考えていたのですが、UnityのCommunityでまさにこれだ!という回答をみつけました。

How to rotate a GameObject?

[javascript]
// 他のオブジェクトとのリンク:
var dummyPointer : Transform; // 空のゲームオブジェクトだけでいい (見えないけどね)
var disc : Transform; // メインの回転盤

// Variables:
private var dummyOffset : float;
private var discOffset : float;

// A Flag:
private var mouseIsUp : boolean = true;

// Raycast SetUp:
var hit : RaycastHit;

function Update () {

// マウス押したか:
if (Input.GetMouseButton(0)){

// 判定のRaycast発射:
var ray = Camera.main.ScreenPointToRay (Input.mousePosition);

// 光線が特定の名前のオブジェクトにあたった:
if (Physics.Raycast (ray, hit) && (hit.transform.name == "hayami_base")){

// 常にダミーはあたった箇所を向く:
dummyPointer.LookAt(hit.point);

// マウスを押したときの初期処理:
if(mouseIsUp){

// ダミーとメイン回転盤の角度を覚えておく:
dummyOffset = dummyPointer.eulerAngles.y;
discOffset = disc.eulerAngles.y;

// 最初のクリックでなくなる:
mouseIsUp = false;

}else{

// 最初のクリックでない (押し続け)
// ダミーから回転盤の回転をセットすることができる:
disc.eulerAngles.y = discOffset + (dummyPointer.eulerAngles.y – dummyOffset);
}

}

}else if (!mouseIsUp){
// クリックが終わったらからフラグも戻す:
mouseIsUp = true;
}
}
[/javascript]

このスクリプトをMainCameraにアタッチして、dummyPointerに空のGameObjectを、discに回転させたい物体をいれ、hit.transform.name == “hayami_base”と判定しているところにはクリックして回転させるオブジェクトの名前を入れればすぐ使えるようになります。

ダミーのオブジェクトをLookAtでクリックしてる点の方向に向かせ、その角度を使用するというのはまさに目から鱗でした。LookAtという便利関数を使うために、間にオブジェクトをかませることでややこしい数学とか使わなくてもいけるもんなんですね!
あとはこれをタッチポインタ向けに書き換えればいいだけ。

続きの記事書きました。

【blender】UV Layoutの出力

blenderでUV Layoutを出力する方法を忘れてしばらく探してたのでメモ。

UV/Image EditorパネルのUVsから「Export UV Layout」でいけます。
Image>SaveAsImageの近くで探してしまうので、ちょっとした盲点。

さらにデスクトップに保存しようとするとファイルサイズ0byteのpngファイルが保存されてしまう罠。
日本語がパスに入っているとだめなのかもしれません。
保存先を変えてうまくいきました。

フラクタル図形が作れるApophysis

フラクタル図形を作れるApophysisというソフトを知りました。

最初2.09を使ってたんですがチュートリアルなどをみてると7xを使っている人が多いようです。機能的にあまり差はなさそうですが7xのほうが最初にでてくるフラクタルがきれいなんでおすすめです。

Apophysisのサイト。DownloadからSourceForgeで2.09ダウンロードできます。
http://apophysis.org/

独自進化してるぽい7x
http://sourceforge.net/projects/apophysis7x/

ダウンロードして使ってみると、これはすごい、いろんな図形が作れます。

すごく奥が深そうですが、使いこなせるんだろうかと思っていると、pixivで使われているらしくけっこう日本語ドキュメントが充実していたので、なんか作れそうな気がします。

ピクシブ百科事典「Apophysis」
http://dic.pixiv.net/a/Apophysis

これでミュージックビデオみたいなの作るとかっこいいかもしれませんね。