slenium2で大量のデータと写真をCSVでフォームから入力する[php]

2015年8月6日PHP, 開発環境向上slenium php csvpr

今回はテストツールSleniumでWEBに用意したフォームにデータ入力していきたいと思います。

まずSleniumをダウンロードします。Sleniumは役割ごとにSleniumRCとかSleniumIDEとかいろいろ分かれていて最初は何をダウンロードしていいか分からず難しいですね。
今はRCとかIDEは使わず、Selenium WebDriverが最新みたいですが、Slenium2と言ったほうが分かりやすい気がします。
私はPHPでテストを書きたかったので、Sleniumクライアントは今もメンテが続いているfacebook/php-webdriverを使うことにしました。

インストールはcompserを使うのがいいです。

{
	"require": {
		"facebook/webdriver": "~1.0"
	}
}

{

"require": {

"facebook/webdriver": "~1.0"

}

というcomposer.jsonを作って、

composer install

1	composer install

を実行すれば必要なファイルがダウンロードされます。composerがない場合は

curl -sS https://getcomposer.org/installer | php

1	curl -sS https://getcomposer.org/installer \| php

で取得してください。

sleniumのローカルサーバーも立ち上げておきましょうね、http://selenium-release.storage.googleapis.com/index.htmlから最新版のselenium-server-standalone-x.xx.x.jarファイルをダウンロードして起動しておきます。

java -jar selenium-server-standalone-2.47.1.jar

1	java -jar selenium-server-standalone-2.47.1.jar

と打てば起動しますので、テスト中は立ち上げっぱなしにしといてください。

ではPHPでテストを書きます。

<?php
namespace Facebook\WebDriver;

use Facebook\WebDriver\Remote\DesiredCapabilities;
use Facebook\WebDriver\Remote\RemoteWebDriver;

require_once('vendor/autoload.php');

// start Firefox with 5 second timeout
$host = 'http://localhost:4444/wd/hub'; // this is the default
$capabilities = DesiredCapabilities::firefox();
$driver = RemoteWebDriver::create($host, $capabilities, 5000);

// navigate to 'https://google.co.jp'
$driver->get('https://google.co.jp');

// input form
$driver->findElement(WebDriverBy::id('q') )->sendKeys('ばけらった')->submit();

// close the Firefox
$driver->quit();

<?php

namespace Facebook\WebDriver;

use Facebook\WebDriver\Remote\DesiredCapabilities;

use Facebook\WebDriver\Remote\RemoteWebDriver;

require_once('vendor/autoload.php');

// start Firefox with 5 second timeout

$host = 'http://localhost:4444/wd/hub'; // this is the default

$capabilities = DesiredCapabilities::firefox();

$driver = RemoteWebDriver::create($host, $capabilities, 5000);

// navigate to 'https://google.co.jp'

$driver->get('https://google.co.jp');

// input form

$driver->findElement(WebDriverBy::id('q') )->sendKeys('ばけらった')->submit();

// close the Firefox

$driver->quit();

firefoxが立ち上がってgoogle検索されます。

ではURLを自分のWEBフォームに変えて、データをCSVから呼び出し繰り返し実行するようにします。

<?php
// An example of using php-webdriver.

namespace Facebook\WebDriver;

use Facebook\WebDriver\Remote\DesiredCapabilities;
use Facebook\WebDriver\Remote\RemoteWebDriver;

require_once('vendor/autoload.php');


// start Firefox with 5 second timeout
$host = 'http://localhost:4444/wd/hub'; // this is the default
$capabilities = DesiredCapabilities::firefox();
$driver = RemoteWebDriver::create($host, $capabilities, 5000);

ini_set('auto_detect_line_endings',TRUE);
$handle = fopen('./talent2.csv','r');
while ( ($data = fgetcsv($handle) ) !== FALSE ) {
 var_dump($data);
 $id = $data[0];
 $name = $data[1];
 $kana = $data[2];
 $birthday = str_replace('/', '-', $data[3]);
 $gender = $data[4];
 $country = $data[5];
 $size = $data[6];
 $activity = $data[7];
 $url = $data[8];
 $image = $data[9];

 // navigate to 'http://example.jp/form/add.php'
 $driver->get('http://example.jp/form/add.php');

// input form
 $driver->findElement(WebDriverBy::id('form_name') )->sendKeys($name);
 $driver->findElement(WebDriverBy::id('form_birthday') )->sendKeys($birthday);
 $driver->findElement(WebDriverBy::id('form_country') )->sendKeys($country);
 $driver->findElement(WebDriverBy::xpath('//input[@type="file"]') )
 ->sendKeys('/Users/utsunomiyakazuya/MyWorks/slenium/img/'.$image.'.jpg');
 $driver->findElement(WebDriverBy::id('form_appearances') )->sendKeys($activity)
 ->submit();
}
ini_set('auto_detect_line_endings',FALSE);

// close the Firefox
$driver->quit();

<?php

// An example of using php-webdriver.

namespace Facebook\WebDriver;

use Facebook\WebDriver\Remote\DesiredCapabilities;

use Facebook\WebDriver\Remote\RemoteWebDriver;

require_once('vendor/autoload.php');

// start Firefox with 5 second timeout

$host = 'http://localhost:4444/wd/hub'; // this is the default

$capabilities = DesiredCapabilities::firefox();

$driver = RemoteWebDriver::create($host, $capabilities, 5000);

ini_set('auto_detect_line_endings',TRUE);

$handle = fopen('./talent2.csv','r');

while ( ($data = fgetcsv($handle) ) !== FALSE ) {

var_dump($data);

$id = $data[0];

$name = $data[1];

$kana = $data[2];

$birthday = str_replace('/', '-', $data[3]);

$gender = $data[4];

$country = $data[5];

$size = $data[6];

$activity = $data[7];

$url = $data[8];

$image = $data[9];

// navigate to 'http://example.jp/form/add.php'

$driver->get('http://example.jp/form/add.php');

// input form

$driver->findElement(WebDriverBy::id('form_name') )->sendKeys($name);

$driver->findElement(WebDriverBy::id('form_birthday') )->sendKeys($birthday);

$driver->findElement(WebDriverBy::id('form_country') )->sendKeys($country);

$driver->findElement(WebDriverBy::xpath('//input[@type="file"]') )

->sendKeys('/Users/utsunomiyakazuya/MyWorks/slenium/img/'.$image.'.jpg');

$driver->findElement(WebDriverBy::id('form_appearances') )->sendKeys($activity)

->submit();

}

ini_set('auto_detect_line_endings',FALSE);

// close the Firefox

$driver->quit();

私の環境はMacなのでCSV読み込みで文字化けしたため事前にutf-8にCSVを変換しました。さらに改行が読み込まれなかったのでauto_detect_line_endingsをtrueにしていますが必要ない場合もあるでしょう。

$handle = fopen('./data.csv','r');
while ( ($data = fgetcsv($handle) ) !== FALSE ) {

1 2	$handle = fopen('./data.csv','r'); while ( ($data = fgetcsv($handle) ) !== FALSE ) {

でcsvファイルを読み込んでいます。得られたデータを次々にフォームに入れていきます。

  $driver->findElement(WebDriverBy::xpath('//input[@type="file"]') )
->sendKeys('/Users/utsunomiyakazuya/MyWorks/OscarChildren/slenium2/img/'.$image.'.jpg');

1 2	$driver->findElement(WebDriverBy::xpath('//input[@type="file"]') ) ->sendKeys('/Users/utsunomiyakazuya/MyWorks/OscarChildren/slenium2/img/'.$image.'.jpg');

こんな感じでファイル名からファイルアップロードもできます。

いけましたか？たぶん、最低限これだけでいけると思うのですが、いけてなかったら教えて下さい。さくさくデータが自動入力されるのを見ると感動的ですよ。

それでは充実したテストライフを！

４歳の息子のヘタな絵で感動した話

2015年4月13日生活・子育てpr

お久しぶりです。おかげさまで仕事の依頼も増え、このブログもなかなか更新出来ていませんが今年もこれまで以上に仕事するつもりです、おいしい仕事、ください！

さて、このブログの人気コンテンツは「魔の３歳児とかいうやつに言うことを聞かせる方法」だったりします。あれ・・・技術系ブログなのに・・・。そのことに味をしめて、またまた子育てに関連した話題。

お姉ちゃんと弟でまったく絵が違う

まずはお姉ちゃんの絵。これは最近描いたものですが、３歳の頃からこういう絵を描いていました。保育園で先生が描くイラストの影響を受けているようでした。感心するのは絵のまとまりが異常にうまい。私なんか完全に負けています。

そして弟。

今４歳なんですが・・・。いつもこんなのです。得意気にみせてくれるので、「すごい！勢いがある！」などと褒めていましが、内心、この年頃の娘の描いた絵との差に驚いていました。

絵を描いていたのではなく線を生み出していた

絵を描いているところをじっとみていて、息子は「絵を描く」という感覚ではなく「線を生み出している」のだと気づいて感動してしまいました。

紙に向かって鉛筆を走らせ始めると「どきどきする！胸がどきどきする！」としきりに言っています。そしてぐちゃぐちゃっと鉛筆を走らせては
「よしっ、うまくいった！」
と満足しています。細い線、強い線、短い線、長い線、描く度に「ちっちゃ！」などと興奮が増していき、最後の方にはどんどん線が足されてそれまでの絵を塗りつぶすくらいになります。色が入ると
「赤、がんばれ、青、がんばれ！」
と何やら怪獣大戦争が繰り広げられているようです。

よく描いた絵に「これ何描いたん？」と聞くと「うーん、、、アロサウルス！」と言ったりするのですが聞くたびに答えが変わったりします。線という生き物だから、観察者によって変わるんです。勢いに任せて描いた絵を自分で見ながら物語を作っていて、聞くといろいろとお話がでてくることもあります。

彼にとって、線が途切れたり紙からはみ出すことは、線の死を意味します。ものすごい勢いで怒ります。わーっ！と叫んで鉛筆を投げ我が身をも床に投げ出します。

現代アートがどうしてあんなにも理解不能なのか、どういう衝動なのか理解できた気がしました。

お姉ちゃんの教え

「いっくん、絵をうまく描くにはね、

テレビは面白いけどそれを見ないで一生懸命描くこと、

力をいっぱい入れないで、ちょっと優しく描くこと、

みんなに褒められたいという気持ちを持つことよ」

これ、４歳の娘が１歳の息子に言ってたんです、すごくないですか？
息子は意味がまったく分かってなかったと思いますが、お姉ちゃんが何千枚と絵を描いて学んだ絵の世界とは、また違う世界にいます。

私は息子に絵を描かせようという気がまったくありません。面白いので、このままぐちゃぐちゃな絵を描き続けて欲しいと思います。
いずれ、学校で絵を教えられるし、ネットで絵の投稿をしたりしてデッサンを知ることになるでしょう。
どんなことでも、壁にぶつからないということはありません。広い世界をみて悩むこともあるでしょうが、ぶち壊して進むなり壁際を進むなりどう進もうがそれは本人の勝手、ただ、自分が下手だとだけは思ってほしくない、というのが願いです。

【Unity】新しくなった4.6の新GUIでスクロールビューを実装してみる(後編)

2014年12月11日UnityUnitypr

前回に引き続き、unity4.6で実装された新GUIを使ったスクロールビューとアコーディオンの作り方についてみていきます。途中からになっていますので前回を見てない人は前の書いからどうぞ。

今回はスクロール内のアコーディオン、それにスクロール制御のスクリプトです。

ボタンを押すとアコーディオンが開くようにする

ボタンと展開される詳細部分をまとめた入れ物から用意します。
とりあえず前に作った10個ほどのボタンは消して、新しく作っていきましょう。
Verticalの下に新しくGameObjectを作って、名前を「Accordion」に変えます。その下に２つのGameObjectを入れます。名前を「Heading」と「Collapse」にします。

Headingの下にはUI->Buttonゲームオブジェクト、Collapseの下にはUI->Textゲームオブジェクトを入れます。

AccordionにLayout->Vertical Layout Groupコンポーネントをつけます。

HeadingにLayout->Layout ElementコンポーネントをつけてPreferred Heightに60を入力します。Headingの子のButtonを選択してInspectorビューをみてください。Rect TransformコンポーネントのAnchorsの上にアンカープリセットを開くボタンがあります。AnchorPresetsパネルをだしてAltキーを押すと、ポジションも一緒に変えてくれるプリセットが表示されます。右下にある縦横両方を最大限広げるプリセットを選びます。 141211-0004

CollapseにはLayout->Vertical Layout Groupコンポーネントをつけます。

Collapseの縦サイズを固定にします。可変でもいけるようにしたかったですが、この後のアニメーションの都合でどうしても固定にしないとうまくいきませんでした。UI->Layout ElementコンポーネントをつけてPreferred Heightを80にします。

ではCollapseの部分が最初は閉じていて、ボタンを押すと開くように作ってみましょう。

ここではunityのAnimatorを使って開閉のアニメーションを実装したいと思います。AnimatorはMechanimというunityの特徴的なアニメーション管理方法で、Stateという状態をブレンドしたりしてアニメーションの間を補完する動きを作ってくれるみたいです。

まずAccordionにMiscellaneous->Animatorコンポーネントを追加します。まだAnimatorControllerは作っていないのでメニューからAssets->Create->Animator　Controllerを選択します。ProjectビューをみるとNew Animatorができているので、名前を「ExpandAnimator」とでもしておきます。
できたExpandAnimatorを先ほど作ったCollapseにあるAnimatorコンポーネントのControllerプロパティに放り込んでください。

まずClosedから。Hierarchyビューでアニメーションの対象となるCollapseを選択してあるのを確認して下さい。Animationビューを開いてください。AddCurveボタンがでています。
AddCurbeを押すとセーブするファイル名を聞かれますのでClosed.animにしてセーブするとAnimatorビューにClosedというStatsが新しくできました。

Animationビューをみてください。丸いアイコンが赤く表示されています。記録モードになっています。今、Collapseが選択されているはずです。InspectorビューでLayout ElementコンポーネントのPreferred Heightを0にします。これで0秒の位置にキーフレームが打たれました。Closedはこれだけでかまいません。

AnimationビューのOpenと書かれてあるリストボックスから[Create New Clip]を選択します。

141208-0006 ファイル名はOpen.animにします。Collapseを選択してLayout ElementコンポーネントのPreferred Heightを80で記録します。

Animatorビューを開いてください。何も表示されていなかったらHierarchyビューでCollapseを選択してください。Closedを選択してから右クリックを押し、Make Transitionを選択します。一見何も起こっていないようですが、このままカーソルをOpenの上にまで持ってくると、Closedから伸びる矢印が表示されます。ここで左クリックで確定です。同じようにOpenからもTransitionをClosedに向かって付けます。

この状態でゲームを再生(MacだとショートカットはCommand+P)してみると、Collapseがぱくぱくと閉じたり開いたりしています。おっと、Collapseの中心点を変えるのを忘れていました。CollapseのPivot.YをInspectorビューで1に変えてもう一度再生してみてください。上から下に、開いたり閉じたりするアニメーションに変わりましたね。

ではボタンを押すと開いたり閉じたりするようにします。Animatorビューの左下にあるParametersというボタンの＋を押します。Boolを選択して名前をOpenにします。ClosedからOpenに伸びている矢印を選択し、ConditionsをExit Timeから今作ったOpenに変えます。条件はtrueのままにしておきます。もうひとつのOpen->Closeの矢印でもConditionsをOpenにして、条件をfalseに変えます。 141208-0008

ここで再生してみます。アニメーションは始まりませんね。Animatorビューで先ほど作ったOpenパラメータのチェックボックスをOnにしてみましょう。Collapseが開きます。Offにすると閉じます。

ここまで来るとあと一息です。

CollapseにScriptを付けます。Collapseを選んでInspectorビューでAdd Componentボタンを押し、New Scriptを選択するとファイル名を入力できますので「AccordionExpander」と入力。LanguageはCSharpにします。

Accordion Expander(Script)コンポーネントがCollapseに付加されました。Scriptのファイル名をダブルクリックするとMonoDevelopが開いて編集画面がでてきます。

using UnityEngine;
using System.Collections;

public class AccordionExpander : MonoBehaviour {

	public void OnClick(){
		var anim = GetComponent<Animator> ();
		anim.SetBool ("Open", !anim.GetBool ("Open"));
	}
}

using UnityEngine;

using System.Collections;

public class AccordionExpander : MonoBehaviour {

public void OnClick(){

var anim = GetComponent<Animator> ();

anim.SetBool ("Open", !anim.GetBool ("Open"));

}

このソースを貼り付けてください。

HierarchyビューでButtonを選択し、InspectorビューのButton(Script)コンポーネントのOnClick()プロパティの＋ボタンを押します。ターゲットになるオブジェクトにCollapseを放り込んで、先ほど作ったAccordionExpanderスクリプトコンポーネントのOnClick関数を選択します。

さあ、ゲームを再生してみてください。ボタンを押すとCollapseの中身が閉じたり開いたリします。

Accordionをプレファブに適用するためApplyをして、Accordionプレファブをたくさん並べてからゲームを再生すると、最初アコーディオンは閉じて並んでいて、ひとつを開くと下のアコーディオンも位置が下がることが分かります。

スクロールの中心位置をスクリプトで制御する

一番下のボタンをクリックしたときスクロールが上にあがるようにしてみます。

AccordionExpander.csを次のように書き換えます。

using UnityEngine;
using UnityEngine.UI;
using System.Collections;

public class AccordionExpander : MonoBehaviour {

	public void OnClick(){
		var anim = GetComponent<Animator> ();
		anim.SetBool ("Open", !anim.GetBool ("Open"));

		// スクロール制御
		GameObject VerticalGameObject = GameObject.Find ("Vertical");

		RectTransform rectTransform = VerticalGameObject.GetComponent<RectTransform> ();
		float scrollPosition = VerticalGameObject.transform.parent.GetComponent<ScrollRect> ().verticalNormalizedPosition; // スクロール現在値
		float scrollSizeY = rectTransform.sizeDelta.y; // スクロール領域の高さ
		float diff = rectTransform.pivot.y - scrollPosition;

		if (scrollSizeY > Screen.height){
			// スクロール対象の中心点をスクロール位置に合わせる
			rectTransform.pivot = new Vector2(0.5f, Mathf.Clamp(scrollPosition, 0f, 1.0f));
			rectTransform.anchoredPosition = new Vector2(
				rectTransform.anchoredPosition.x, 
				rectTransform.anchoredPosition.y - (scrollSizeY * diff)
			);
		}
	}
}

using UnityEngine;

using UnityEngine.UI;

using System.Collections;

public class AccordionExpander : MonoBehaviour {

public void OnClick(){

var anim = GetComponent<Animator> ();

anim.SetBool ("Open", !anim.GetBool ("Open"));

// スクロール制御

GameObject VerticalGameObject = GameObject.Find ("Vertical");

RectTransform rectTransform = VerticalGameObject.GetComponent<RectTransform> ();

float scrollPosition = VerticalGameObject.transform.parent.GetComponent<ScrollRect> ().verticalNormalizedPosition; // スクロール現在値

float scrollSizeY = rectTransform.sizeDelta.y; // スクロール領域の高さ

float diff = rectTransform.pivot.y - scrollPosition;

if (scrollSizeY > Screen.height){

// スクロール対象の中心点をスクロール位置に合わせる

rectTransform.pivot = new Vector2(0.5f, Mathf.Clamp(scrollPosition, 0f, 1.0f));

rectTransform.anchoredPosition = new Vector2(

rectTransform.anchoredPosition.x,

rectTransform.anchoredPosition.y - (scrollSizeY * diff)

);

}

このスクロールの位置がピボットに変換されることで下の方もいい感じに広がるのは私にしてはいい思いつきだと思ったのですが、どうでしょう。

これでスクロールの出来上がりです。どんなサイズのゲーム画面にもぴったりフィットしていて、まるでスマホのアプリ画面のようです。

パトラッシュ・・・

これだけ書くのに疲れました。記事が2回に分かれたのも初めてです。簡単にスクロールビュー作れた、ひゃっほーと思ったのに、説明するとこんなに長いとは。しかも、書いてみて分かったのですが、決して簡単とは言えませんね。普通にHTMLなどで構成するのに較べるとかなり大変です。自分で実装すること考えるとすごい楽だったんですけどね。。

せめて動画での説明だったらもうちょっと簡単に思えるかもしれません。Unityの新UIの説明がテキストよりも動画の方が充実している理由が分かった気がします。

それではこの辺で。

【Unity】新しくなった4.6の新GUIでスクロールビューを実装してみる(前編)

2014年12月8日UnityUnitypr

こんにちわ。unityの仕事ください。と言い続けているつもりで4年。いまだunityの仕事に巡りあえず。今回初めてunityの仕事がきて久しぶりに触りました。新しくインストールした4.6では2Dが作りやすくなったおかげで思ったより早くできました。アコーディオンとスクロールビューがそれなりに使えそうでしたので紹介します。開閉が画面内で行われるよう調整したものです。

2Dオブジェクトを置いてみよう

とりあえずスクロールの背景になるパネルでも置いてみます。メニューからGameObject->UI->Panelを選択してみましょう。
Hierarchyビューをみてください。Panelが作成されましたね。選択するとInspectorビューに情報が表示されます。

スクリーンショット 2014-12-07 21.52.27
PanelはCanvasという新しいオブジェクトの下に作られました。EventSystemも新たに作られています。
Canvasは2D描画に必ず必要なルートになる領域なので、Canvasがない状態でUIオブジェクトが作成された時には自動的に作成されます。
EventSystemはGUIを操作するために必要なオブジェクトで、これも無ければ自動的に作れます。

Vertical Layout Groupでボタンを縦に並べよう

パネルの下にもう1つパネルを作ります。
Hierarchy上でPanelを選択した状態で右クリックをしてUI->Panelを選択しましょう。
Panelの下にPanelが置かれます。ちなみに先ほどと同じようにメニューからPanelを作るとCanvasの下に作られるので移動させてください。同じような操作でも結果が違う、unityってこういう直感的にどうなるか分かりづらい操作がけっこうありますね。
新しく作ったPanelの名前をVerticalに変えます。

オブジェクトを置いてみます。ボタンでも並べてみましょう。
Verticalの下にUI->Buttonを選択してButtonを置いてください。

Buttonをたくさん並べるのでButtonを大量作成します。Buttonを選んでコピー・ペーストすればいいんですが、ここはプレファブにしておきましょう。複数あるオブジェクトは必ずプレファブにしておくのがunityのやり方です。
ButtonをProjectビューに放り込んでプレファブに。HierarchyのButtonが青くなったらプレファブになった証拠。Hierarchyビューで青くなったButtonを選択してコピーペーストを繰り返します。10個くらい作ったらいいでしょう。

Buttonが同じ所に重なっていますね。オートレイアウトを使うので手で並べる必要はありません。Verticalを選択してInspectorビューにAddComponentでLayout->Vertical Layout Groupコンポーネントを選択します。Buttonが縦に並びましたね。

スクリーンショット 2014-12-07 22.53.05
Vertical Layout Groupは子のオブジェクトを縦に隙間なく並べてくれます。

これだと縦にぴっちりでボタンの縦サイズを制御しにくいので、VerticalにLayout->Content Size Fitterコンポーネントも追加します。Vertical FitをPreferredSizeにします。
Buttonに縦サイズを入力しましょう。ButtonにLayout->Layout Elementコンポーネントを追加し、PreferredHeightに60と入力します。Inspectorビューの上部にあるPrefabツールのApplyボタンを押せばPrefabが置き換わり、コピー先のPrefabにも反映されます。全てのボタンのPrefferdHeightが60になりました。

Verticalの縦がPanelを越えて伸びたでしょうか。

Verticalが画面に表示された時、スクロールが一番上の位置にあって欲しいです。
Verticalの上のPanelにもUI->Vertical Layout Groupコンポーネントを追加し、VerticalのPivotを1にしましょう。Verticalの上端がPanelの上端にぴったり重なりました。なんでこうなるか、説明はうまく出来ません。でも次のような操作をしてみれば感覚的に分かるかもしれません。ギズモトグルをピボットに変えて、InspectorのPivotでYと書いてあるラベルを掴んで左右にマウスを動かしてみてください。画面内で青いドーナツ状のピボットが上下に動き、それがパネル内の位置を変えていることが視覚的に分かるかと思います。

Scroll Rectでスクロールする画面に

さて、Panelにスクロールビューの機能を持たせたいと思います。ここで名前をScrollViewに変えておきましょう。意味はないですが、分かりやすくするためです。
ちなみにHierarchyビューで名前を変えると、scriptの方で指定していたのと整合性がとれずしょっちゅうscriptの方で手直しが必要になりました。機能に合わせて名前を変えることは多いと思うので、自動でscriptの方も修正してくれると良いのですが今のとこそういう方法もなさそうなのでscriptの方でうまいこと名前と関係なく紐付けるよう組むのがコツになってきそうですね。

ScrollViewにUI->Scroll Rectコンポーネントを付け加えます。
縦にスクロールするだけでいいのでHorizontalのチェックは外しておきます。
Scroll RectのContentプロパティにVerticalを放り込んでください。
これで実行するとスクロールできる画面ができました。ボタンを増やしたり減らしたりしても自動でスクロール領域が計算されていい感じです。

スクリーンショット 2014-12-08 0.06.26

スクロールバーを付ける

メニューからGameObject->UI->Scrollbarでスクロールバーを作成し、Canvasの下に置きます。InspectorビューでScrollbar(Script)コンポーネントのDirectionを「Bottom To Top」に変えます。RectTransformのwidthの値を24くらいに調整して、アンカープリセットをaltを押すとでてくる縦にぴったり、右にくっつけるものを使います。

ScrollViewのScrollRect(Script)コンポーネントにあるVertical Scrollbarプロパティに作成したScrollbarを設定します。ScrollViewのサイズはスクロールバーと重ならないよう調整しておきましょう。

長くなってきましたので、今日はこの辺りにしておきます。

今回まったくScriptを書いてませんね！すごいです。ちょっとコンポーネントはいろいろ付けないといけないですけどね。続きは、ボタンで展開するアコーディオンと、スクロール位置の制御についてみていきたいと思います。

【Unity】新しくなった4.6の新GUIでスクロールビューを実装してみる(後編)

僕が初めて作った2000年のサイトをみてみる

2014年11月13日これまでの実績pr

僕が初めて作ったWEBサイトがハードディスクの中でみつかりました。今から１５年前です。

ゲーム会社を辞めて暇になった時にインターネットの仕事をしたいと思って作った僕のホームページです。といっても人見知りな僕は転職活動先でもほとんど人に見せることもなく、メモ帳か何かでHTMLファイルを更新して、FTPでアップロードしてました。

これを今サーバーにおいて見られる状態にしようとしたらけっこう大変で、それがWEBサイトの歴史を感じさせてくれたので半ば黒歴史ではありますが見てみたいと思います。

スクリーンショット 2014-11-13 3.35.10 ヤングルWEB

拡張子が.shtml　だってSSIが使いたかったんだもん

001
まさかのshtml。拡張子変えずにそのままにしてますがちゃんと見えてますでしょうか。shtmlというのはSSIを使うための拡張子です。SSIって今では多分使う人いないと思います。

  <!--#include file="include.html"-->

1	<!--#include file="include.html"-->

このようなコメントをbodyタグの中に記述すればその箇所にinclude.htmlの中身を入れたhtmlをレスポンスします。つまりHTML中にCGI的な処理を入れられるということです。

サーバーにあるプログラムを実行できたり、強力なSSIですが背景枠を１つのファイルにして更新が楽になるように使っていました。その後、DreamWerberにテンプレート機能がついたのでそれを使うようになりました。PHPが使えるならそっちがいいですね。

今でもSSIは使えるのかもしれませんがサーバー設定するのも面倒なのでとりあえず直接HTMLに書くように変えました。

DHTMLによるアニメーション　今は無きLAYERタグ

このサイトの特徴は背景の雲の多重スクロールでした。これを実現するため、DHTMLのLAYERタグを使っています。雲は左ぎりぎりまで流れたらまた元の位置に戻ることで無限ループにしているのですが、そういった動きが見えないよう画面全体をiframeで囲っています。

002

<BODY>
<ILAYER NAME="parent" WIDTH="640" HEIGHT="480" CLIP="0,0,640,480">
<LAYER NAME="scrwin" SRC="include.html" WIDTH="640" HEIGHT="480">
<IFRAME SRC="tobira.shtml" NAME="ie" SCROLLING="NO" WIDTH="640" HEIGHT="480" FRAMEBORDER="0">
IE4.0x以上、もしくはNetscape4.0x以上でご覧下さい。
</IFRAME>
</LAYER>
</ILAYER>
</BODY>

<BODY>

IE4.0x以上、もしくはNetscape4.0x以上でご覧下さい。

</IFRAME>

</LAYER>

</ILAYER>

</BODY>

LAYERタグはNetscape6から非対応になりました。今ではDIVにz-indexスタイルシート属性をつければ同じことができます。LAYERタグはやめて、jqueryでleftの位置を操作するように変えました。

iframeはSEO観点から時代遅れと言われる時代もありましたが、とっても便利なので今も全体フレーム以外では良く使われていますね。

大文字小文字の区別なし

サーバーにあげてみると、ローカルでは見えていたものがNotFoundになっているものが多くありました。小文字で指定しているファイルが大文字ファイル名になっていたためです。昔はUnixを知らず大文字小文字を区別しないファイルシステム環境にいたので、気にしなかったのでしょうか。HTMLタグもこの頃は大文字でした。それから属性名は小文字、みたいな意味不明な時期があって、現在では全て小文字でタグを書いています。

InternetExplorerとNetscapeで処理を分ける

if (navigator.appName.charAt(0) =="M"){
  return true;
} else if (navigator.appName.charAt(0) =="N"){
  return false;
}

if (navigator.appName.charAt(0) =="M"){

return true;

} else if (navigator.appName.charAt(0) =="N"){

return false;

}

このブラウザ判定コードがあちこちで使われていました。MicroSoft Internet ExplorerとNetScape Navigatorで挙動を変えていたのです。

当時は文字コードによる文字化けと、IEとNNが2強ブラウザで互換性がないのが最大の悩みでしたね。

15年の時を経て

まだHTMLの勉強すら始めたばかりでいきなりDHTMLやらJavascriptやら使ってインタラクティブなものを作ろうとしている自分に驚いたりするのですが、それが当時の普通だった気もします。すごいサイト、新しい技術が今に至るまで目まぐるしく生まれましたね。少しでも追いつきたくて、ただ自分を発信したくて、やってたこと、当時やりたくて出来なかったこと、変わらず続けていきたいと思ったのでした。

JMeterでリクエスト自動化

2014年10月23日未分類JMeter, 負荷計測pr

やりたかったこと

クライアントのサーバーで0byteのキャッシュファイルが生成されたりするとのこと。キャッシュファイルの数が多くなることや、アクセスが集中することでおかしなことが起きているのかもしれない、とにかく本番サーバー並にいろんなページにアクセスしてキャッシュファイルを増やさないといけないと思ったわけです。

JMeterとは

ApacheSoftwareFoundationで進行しているパフォーマンス計測用のJavaアプリプロジェクト。デスクトップGUIで設定するので比較的操作は簡単だし、100%ピュアJavaなのでWindowsでもMacでも同じものが動く、イケているアプリです。
似たのでSeleniumがありますね。Seleniumの方はJavascriptのチェックができたりよりWEBアプリに特化していて、JMeterはWEBアプリ以外にもFTPとかMailとかテスト出来て敷居も低い感じがします。

アパッチのログから再現（リプレイ）する

まずはJMeterをダウンロードします。

JMeterの公式サイトの「Download Releases」と書かれたリンクから最新バイナリ(.zip)を落として解凍しました。解凍されたフォルダのbin/ApacheJMeter.jarを実行するとJMeterが開きました。

最初はログをCSVに変換して読み込ませたり試していたのですが、わたし、気づいてしまいました、「Access Log Sampler」が用意されていることに。

まず左のペインメニューのテスト計画を右クリックしてスレッドグループを追加します。

スレッド数というのは同時接続しているユーザー、RampUpというのは1ユーザーのアクセスする間隔秒数、てな理解でよろしいかと。正確にRampUpの秒数待つということではなくて、指定した秒数内にスレッドを散らしてくれるみたい。0にすると同時接続です。スレッドが10なら、ほぼ同時に10個リクエストするということ。
ループ数はログの記録数÷スレッド数を指定しておきました。

次にスレッドグループを同じように右クリックして「Access Log Sampler」を追加します。
続けて「結果をツリーで表示」「結果を表示表示」「グラフ表示」を追加しておきました。この結果は実行中、リアルタイムで見られるしかなり見やすいです。好きなものを使ってください。

追加したAccess Log Samplerを左ペインで選択すると右ペインで細かい設定ができます。
名前とコメントはそのまま、ServerにはIPまたはホスト名を入れます。
Portはデフォルトが80なのでそのまま。ParseImagesはTrueにするとHTMLを解析してページ内の画像を読み込むようなのですがFalseにしておきます。
PluginClassesのParserはTcLogParserだと10個の同時スレッドがアクセスログの同じ一行を読み込むためOrderPreservingLogParserかSharedTcLogParserにしておきました。
FilterはとりあえずLogFilterを選びましたがよく分かっていません。SessionFilterはCookieを使うみたいですが、今回はどっちでもいいですね。
LogFilesでアクセスログを指定してください。

後は実行して結果を眺めていると良いです。

不満点とか

アクセスする順番とか、時間を完全再現するのは出来ませんでした。いい方法があるのかもしれませんが…。sleniumだと出来たかなぁ？今回の計測だとログインしたユーザーの遷移を追いかけたりはしないので充分ではありました。

しかし操作がけっこう簡単。特にアクセス・ログが簡単に読み込めるとは驚きました。これならしばらく時間をおいて忘れてても使えるんじゃないでしょうか。

参考：

AccessLogSamplerのチュートリアル(pdf)

今から３分で jmeter の使い方を身に付ける　　（負荷テスト入門）

最強の家庭用ゲーム機WiiUを買いました

2014年10月20日生活・子育てゲーム, 子育てpr

去年の年末に、７歳の娘の誕生日プレゼントに家庭用ゲーム機WiiUを買いました。

すごい満足してます。ニュースやインターネット掲示板には任天堂苦戦とか、WiiUオワコン、みたいに言われてますが実際に遊んでいる層はそう思ってないんじゃないかなぁと思いますよ。

憧れの次世代機、どれを買ったらいいか悩みますね

我が家はこれまでゲームはPS2で止まっていました。PS2はプレイステーションのゲームもできるし、物足りない時はセガサターンをだして遊んだりしていました。前世紀のゲーム（1990年代ですからね・・・！）を遊びながらも、心は次世代機のゲームに惹かれていたのも事実。ああ、最新の3D技術が惜しみなく使われたハイパーリアルなゲームをプレイしたい・・・！しかし子供が大きくなるまでは我慢っ・・・！

そしてとうとう、、、次世代機購入！1年前より娘にはゲームプレイ動画をみせ、徐々にその気にさせゲーム機が欲しいと言わせる用意周到な作戦。選択肢はPS3、Xbox360、WiiU、3DS、PlaystationVita、さらには投入されたばかりのPS4、XboxOne！3DOとかジャガーみたいな値段が高いけどソフトが全く供給されないハズレハードもなし、あぁ、どれを買ったらいいのか。

うちには7歳と4歳の子がいるので、条件は子どもたちみんなが遊べることでした。そして父ちゃんも一緒に遊べないとだめなのです。なので携帯ゲーム機はダメです。一番コストパフォーマンスがいいのは3DSなのは事実ですが、ここで誘惑に負けてはいけません。子供はトモダチコレクションやりたさにずっと3DS、3DSと取り憑かれたかのように風呂で、就寝時、起きがけにまで言い続けていましたが、あれは悪魔のゲーム機だ、おばあちゃんの誕生日パーティにまで一人黙々とゲームをしている、そんな子をどう思うのか、目はうつろ、手足はしびれ、いづれ地獄に落とされるのだと諭すのに苦労しました。

一番惹かれたのはXBoxのキネクトでした。キネクトは真に革新的、そして、開発者キットがあるのでプログラムして遊ぶことができる、技術者魂を揺さぶるガジェットです。ただ目玉が飛び出るほど値段が高く(本体と合わせて5万円を越える)、対応ゲームも少ないのです。

次にPS3、ないしは4をみてみました。今やPSは王道。国内ゲームフリーク必携ハード、そして地味に良いのがブルーレイディスクが読めるということ。ただゲームのラインナップを見ると子供向けのものがほとんど見当たらない…！プレイステーションの頃はもうちょっとバランス良かった気がするんですが、これも、時代よねー。

最後にWiiU。1年経過しているにも関わらず、ゲームのラインナップが少ないことに驚き。しかしほとんどが子供向け、良質なパーティゲームが豊富で目的に叶っている…！これだ、これしかない。購入です。

小さい子供が遊べるのはWiiU、でもセッテイングは大人の助けは必要

WiiUを買って最初に驚いたのがニンテンドーIDが必要なこと。メールアドレスが必要になってきます。これも時代よねー。登録しただけアカウントが作れて、セーブデータなどもアカウントごとに管理されます。最初はめんどいですが、アカウントにパスワードをかけて購入用のアカウントに子供が入れないようにできたりするので良いです。
次にWiiUの最大の特徴、ゲームパッド。これはいろいろすごいです。まずでかい。本当にでかいです。そして本体に1台しか登録できません。ゲームパッドを複数台つかってトランプや麻雀が出来ると思っていたのでこれは意外でした。
ゲームパッドができる事は非常に多いです。ゲームパッドから音が鳴ってテレビの音とシンクロしたり、タッチでの操作、別画面の表示、これはとてつもなく可能性が大きいし、逆に言えば作り手側の負担がすごいだろうと思います。WiiUのゲーム開発が時間がかかるのは、画面解像度が高いとかじゃなくてゲームパッド用の作り込みが大変なんじゃないだろうかと思います。

最初にファミリーパックを買ったので、同梱されていたのがNewスーパーマリオブラザーズUとWiiPartyU。どっちも素晴らしい出来です。Wiiの時のリモコンは子供には操作がちょっと難しいかな、と思っていたのですが、ゲームパッドでタッチしてお助けしたりするのは4歳の子でもできます。ゲームパッドは小さい子にとっても親和性が高いんです。

それからWiiのゲームも遊べるということで「街へ行こうよどうぶつの森」と、オープンワールドのゲームがしたかったのでUBISoftの「アサシンクリード3」を買いました。どっちもかなり長く遊べますね。

極めつけは「マリオカート8」ですね。最強の接待ゲームでした。これは家族みんなで遊べます。小学生の男の子がうちによく遊びに来るようになってしまいました。このゲームは特典として無料で2本のソフトを1ヶ月遊べる権利がついていて、今はピクミン3をやっています。

WiiUのゲームはとにかく良質で家族で遊べるものが多いです。他のゲーム機だとお父ちゃん専用ゲーム機になってしまったかもしれません。ちょっとそれを考えると恐ろしいですね。今頃ゲーム機と一緒に海に沈められていたかもしれません。
これからもWiiUにはどんどん面白いゲームがでるし、まだまだWiiUにできることの半分も経験していないと思うのでこれからが楽しみです。

超早起き型のススメ

2014年8月30日開発環境向上LifeHack, 睡眠pr

6226051400_9f29fc36a4_m

ライフハーック！

私はフリーランスなので、好きな時間に仕事ができるという利点があります。一番自分にあった時間の使い方を探しているうちに今の朝型にたどりつきました。朝のうちに仕事をするのはとっても効率がいいです。

どうして朝型がいいか

スケジュールが迫ってくると私の場合、焦ってしまって失敗も多くなるし、体調も悪くしがち。でも、朝に仕事を終わらせることで余裕を持って仕事に取り組めるというものです。前倒しにすることになるのでプレッシャーから開放されるのが一番でかいです。

会社員の人にも朝型をおすすめします。ただ私は会社にいるころ、ほとんど始発に近い電車でよく出社していましたが、これはあまり良い印象を与えた記憶がないような・・・。会社員の人はほどほどに。でも会社員でもフリーランス的に働きたいならぜひこの記事を読んで参考にしてみてください。

リンク：毎朝、定時より30分前にきっちりした身なりで出社し、新聞を読むことの価値が理解できない環境で働く人ってかわいそうだなぁ。

フリーランスだからこそ朝型

具体的にどれぐらい朝早いかというと、仕事時間がどんどん早い時間にシフトしていって、５年位前からだいたいのペースは

月曜日	PM10:00就寝〜 AM1:00 起床
火曜日	PM10:00就寝〜 AM3:00 起床
水曜日	PM10:00就寝〜 AM5:00 起床
木曜日	PM10:00就寝〜 AM1:00 起床
金曜日	PM10:00就寝〜 AM3:00 起床
土曜日	AM0:00就寝〜 AM5:00 起床
日曜日	AM0:00就寝〜 AM7:00 起床

な感じです。別に曜日で決めてるわけではないのですが、分かりやすくテーブルにしてみました。基本的に、太陽が昇るまでにその日の仕事を終わらせてしまいます。そうすると、日中が空きます。半日は空けておく必要があります。
なぜなら子供が熱をだしたり、人が遠方から会いに来たり、疲れてバタンキューしたり、大切なことがたくさんあるからです。
もし余裕がない日に上記のことが発生すれば間違いなくスケジュールが守れなくなる、それはフリーランスにとって致命的です。
余裕があれば新しいことを勉強したり、打ち合わせを重ねてクオリティをあげたり、新規案件をいただいて見積もりしたりを日中のうちにすればいいので、暇になることはないです。

朝型になるには

ではどうやって生活習慣が身についたのでしょうか。いくつか原因を考えてみました。

１．早起きしたくなるようにする
２．自分を甘やかす
３．寝る前の時間を大切にする

１．早起きしたくなるようにする

正直に告白しますと、最初に早起きになっていったのは遊ぶためでした。それも、ネットゲーム、そう、フリーランスの貴重な時間を蝕む悪魔のような遊戯のためでした。その頃、子供が生まれ、日中は育児でゲームが出来なかったことから、嫁・子供の寝静まった朝方に起きてゲームをしていたのです。今ではネットゲームはしていませんが、朝に仕事が終わると子供が起きてくるまでの間にちょこっとスマホゲームを楽しむことがあります。褒美というわけです。
子供がいるからこそ、一人で集中できる時間を作ったわけで、逆に一人暮らしだと早起きの習慣は難しいだろうと思います。いきなりハードルをあげるようですが、結婚して子供を作ると早起きしやすくなると思います。

２．自分を甘やかす

何時に起きよう、などとはっきりした目標をたてる必要もありません。目覚まし時計も必要ありません。[ノンレム睡眠]の時に無理やり起きると頭が働かないので何の意味もないからです。また覚醒はしたけど体がだるい、どうしても動かない、という時は延長してかまいません。無理やり起きることは本当に意味がないと思います。ちなみに昼間に１０分〜２０分程度仮眠をとるのはおすすめです。

リンク：コーヒーと仮眠の効果をいいとこ取りした裏技「コーヒーナップ」とは？

３．寝る前の時間を大切にする

早く起きるために一番重要なこと、それは早く寝ることです。私は布団に入って１０秒もたたずに寝入ることができるので、のび太君にも勝っていると思います。重要なのは床に入る前の２時間は頭を興奮させない。つまり、仕事や友人とのおしゃべりはその時間帯はせず、風呂に入りテレビをみて歯を磨きましょう。あとは禅の気持ちです。

【cakePHP】配列を組み替える便利なHashクラス

2014年8月12日cakePHPcakePHPpr

cakePHP使っててうれしいのが、Hashクラスが組み込まれていることです。

これはとっても便利なので、他のフレームワークを使う時でももし同等のものがなければコピーして使おうかと思っています。

サンプルコード

いくつか簡単な例をあげます。

$user = array(
    'User'=>array(
        array('id'=>1, 'name'=>'エレン', 'group_id'=>1),
        array('id'=>2, 'name'=>'ミカサ', 'group_id'=>1),
        array('id'=>3, 'name'=>'アルミン', 'group_id'=>1),
        array('id'=>10, 'name'=>'ジャン', 'group_id'=>2),
    )
);

$user = array(

'User'=>array(

array('id'=>1, 'name'=>'エレン', 'group_id'=>1),

array('id'=>2, 'name'=>'ミカサ', 'group_id'=>1),

array('id'=>3, 'name'=>'アルミン', 'group_id'=>1),

array('id'=>10, 'name'=>'ジャン', 'group_id'=>2),

)

);

このような配列があるとして、

４番目のユーザーの名前を取り出したいとき

print_r(
    Hash::extract(
        $user, 
        'User.3.name'
    )
);

print_r(

Hash::extract(

$user,

'User.3.name'

)

);

Result:

Result:
Array
(
    [0] => ジャン
)

Result:

Array

(

[0] => ジャン

)

Userの下の配列は数値キーで0から始まっているので４番目を指定するには3になります。説明無用とは思いますが念のため。

idが２のユーザーの名前を取り出したいとき

[配列名=配列値]の書式で条件式を書けます。

<?php 
print_r(
    Hash::extract(
        $user, 
        'User.{n}[id=2]'
    )
); 
?>

<?php

print_r(

Hash::extract(

$user,

'User.{n}[id=2]'

)

);

Result:

Array
(
    [0] => Array
        (
            [id] => 2
            [name] => ミカサ
            [group_id] => 1
        )

)

Array

(

[0] => Array

(

[id] => 2

[name] => ミカサ

[group_id] => 1

)

配列名がなければ配列番号でもいけます。

<?php
$user = array(
    'User'=>array(
        array(1, 'エレン', 1),
        array(2, 'ミカサ', 1),
        array(3, 'アルミン', 1),
        array(10, 'ジャン', 2),
    )
);
print_r(
    Hash::extract(
        $user, 
        'User.{n}[0=2]'
    )
);

<?php

$user = array(

'User'=>array(

array(1, 'エレン', 1),

array(2, 'ミカサ', 1),

array(3, 'アルミン', 1),

array(10, 'ジャン', 2),

)

);

print_r(

Hash::extract(

$user,

'User.{n}[0=2]'

)

);

Result:

Array
(
    [0] => Array
        (
            [0] => 2
            [1] => ミカサ
            [2] => 1
        )

)

Array

(

[0] => Array

(

[0] => 2

[1] => ミカサ

[2] => 1

)

Hashクラスのマッチャで使える記号：

‘=’
‘!=’
‘>’
‘<‘
‘>=’
‘<=’

等号は==でなく=なので注意してください。

配列のキーをidにして必要なデータのみの配列を作りたい時

<?php 
print_r(
    Hash::combine(
        $user, 
        'User.{n}.id', 
        'User.{n}.name'
    )
);
?>

<?php

print_r(

Hash::combine(

$user,

'User.{n}.id',

'User.{n}.name'

)

);

Result:

Array
(
    [1] => エレン
    [2] => ミカサ
    [3] => アルミン
    [10] => ジャン
)

Array

(

[1] => エレン

[2] => ミカサ

[3] => アルミン

[10] => ジャン

)

このようにすっきりした配列を作成できます。リンクリストなどを作るのに活躍します。

条件式で指定したデータの配列を生成する

combineとマッチャを組み合わせて使用するときに注意しないといけないのが、第２引数と第３引数、両方にマッチャを指定しないといけないことです。キーと値の数が合わないとfalseが返ってきます。

<?php 
print_r(
    Hash::combine(
        $user, 
        'User.{n}[group_id=1].id', 
        'User.{n}[group_id=1].name'
    )
);
 ?>

<?php

print_r(

Hash::combine(

$user,

'User.{n}[group_id=1].id',

'User.{n}[group_id=1].name'

)

);

Result:

Array
(
    [1] => エレン
    [2] => ミカサ
    [3] => アルミン
)

Array

(

[1] => エレン

[2] => ミカサ

[3] => アルミン

)

グループIDでグルーピングしたユーザー配列を生成する

２次元配列を作るにはcombineに引数を追加します。

<?php 
print_r(
    Hash::combine(
        $user, 
        'User.{n}.id', 
        'User.{n}.name', 
        'User.{n}.group_id'
    )
);
 ?>

<?php

print_r(

Hash::combine(

$user,

'User.{n}.id',

'User.{n}.name',

'User.{n}.group_id'

)

);

Result:

Array
(
    [1] => Array
        (
            [1] => エレン
            [2] => ミカサ
            [3] => アルミン
        )

    [2] => Array
        (
            [10] => ジャン
        )
)

Array

(

[1] => Array

(

[1] => エレン

[2] => ミカサ

[3] => アルミン

)

[2] => Array

(

[10] => ジャン

)

group_idでユーザーを分けることが出来ましたね。

複雑な階層の多次元配列を扱う

不特定のキーを表すのに{n}と{s}があり、nが数値キー、sは文字列キーに対応しています。Hashパス構文の中に何個でも出現して構いません。

$user = array(
    'User' => array(
        array(
            'id' => 1, 'name' => 'エレン',
            'items' => array(
                'armor' => array(
                    array('id' => 1, 'name' => '立体機動装置'),
                    array('id' => 2, 'name' => 'ガスマスク')
                ),
                'weapon' => array(
                    array('id' => 3, 'name' => '超硬質スチール・刃')
                )
            )
        ),
        array(
            'id' => 2,
            'name' => 'ミカサ',
            'items' => array(
                'armor' => array(
                    array('id' => 1, 'name' => '立体機動装置'),
                ),
                'weapon' => array(
                    array('id' => 3, 'name' => '超硬質スチール・刃'),
                    array('id' => 4, 'name' => 'ライフル'),
                )
            )
        )
    )
);
print_r(
    Hash::combine(
        $user,
        'User.{n}.items.{s}.{n}.id',
        'User.{n}.items.{s}.{n}.name'
    )
);

$user = array(

'User' => array(

array(

'id' => 1, 'name' => 'エレン',

'items' => array(

'armor' => array(

array('id' => 1, 'name' => '立体機動装置'),

array('id' => 2, 'name' => 'ガスマスク')

'weapon' => array(

array('id' => 3, 'name' => '超硬質スチール・刃')

)

array(

'id' => 2,

'name' => 'ミカサ',

'items' => array(

'armor' => array(

array('id' => 1, 'name' => '立体機動装置'),

'weapon' => array(

array('id' => 3, 'name' => '超硬質スチール・刃'),

array('id' => 4, 'name' => 'ライフル'),

)

);

print_r(

Hash::combine(

$user,

'User.{n}.items.{s}.{n}.id',

'User.{n}.items.{s}.{n}.name'

)

);

Result:

Array
(
    [1] => 立体機動装置
    [2] => ガスマスク
    [3] => 超硬質スチール・刃
    [4] => ライフル
)

Array

(

[1] => 立体機動装置

[2] => ガスマスク

[3] => 超硬質スチール・刃

[4] => ライフル

)

キャラクターの持つアイテムリストができました。idをキーとすることで重複は省かれています。

sptinrfの結果を値に入れる

Hash::formatを使えばsprintfの結果を取り出せます。

pr(Hash::format($user, array('User.{n}.name', 'User.{n}.group_id'), '%s(%d)'));

1	pr(Hash::format($user, array('User.{n}.name', 'User.{n}.group_id'), '%s(%d)'));

Result:

Array
(
    [0] => エレン(1)
    [1] => ミカサ(1)
    [2] => アルミン(1)
    [3] => ジャン(2)
)

Array

(

[0] => エレン(1)

[1] => ミカサ(1)

[2] => アルミン(1)

[3] => ジャン(2)

)

これをHash::combineでやるときには第３引数を配列にして、１番目にフォーマット文字列を入れます。

pr(Hash::combine($user, 'User.{n}.id', array('%s(%d)', 'User.{n}.name', 'User.{n}.group_id')));

1	pr(Hash::combine($user, 'User.{n}.id', array('%s(%d)', 'User.{n}.name', 'User.{n}.group_id')));

Result:

Array
(
    [1] => エレン(1)
    [2] => ミカサ(1)
    [3] => アルミン(1)
    [10] => ジャン(2)
)

Array

(

[1] => エレン(1)

[2] => ミカサ(1)

[3] => アルミン(1)

[10] => ジャン(2)

)

ほかにもいろいろ便利ですが

文字列を生成したり、配列に値を加えたり削除したり、非常にいろんなことができますが、抽出系に絞って書いてみました。

cakePHPの公式ドキュメント「Hash」をみれば全部書いてますが、サンプルが少ないのでちょっと分かりにくいかもと思うところもあります。

これを参考に、配列を自由に扱えるようになるとデータの扱いもぐっと幅がでてくることでしょう。

最後に、進撃の巨人のキャラクター名をサンプルに使ったのは深い意味はないのでその辺のツッコミは無用でお願いします。

【PHP】Filter関数を使ってみる

2014年7月2日PHPFilter, 正規表現pr

こんにちわ、こんばんわ。最近はKANA-BOONをたまに聴きます。今日はフルドライブ聴いてます。こういうシンプルで若いなって感じのたまに聴くといいのぉって思います。

さて、以下のオーダーを頂きました。

ひらがな、カタカナ（「－」を除く）、漢字、英数字のみを使い記号、スペースは除く。

こういうの、今まで何回も作ってきた気もするんですが、いつも忘れてしまうんですよね。思いつくのは
・preg_replaceを使ってUTF8文字コード\x000とかなんとかで変換かける
・mb_convert_kanaを使って全角を半角にしたうえでなんとかする

とりあえずmb_convert_kana使ってみますか

$value = "~1F　－　22 & \nSan.<strong>おしゃまんべ</strong>";
$result = mb_convert_kana($value, 'as');
echo $result;

$value = "~1F　－　22 & \nSan.<strong>おしゃまんべ</strong>";

$result = mb_convert_kana($value, 'as');

echo $result;

~1F － 22 &amp; 
San.<strong>おしゃまんべ</strong>

1 2	~1F － 22 & San.<strong>おしゃまんべ</strong>

あとは記号・空白や改行ですね。ASCII文字コードで記号の16進コードを確認して記号・空白を抽出する正規表現は[\\x0-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\x7f]だと分かりました。すいません、もっと簡単かと思いましたけど思ったより記号がコード表の中で分散していたのでコードが長くなっちゃいました。
あと本当はね、、引用符(wikipedia)の半角文字も考慮しないといけないんだよね・・・「”」じゃなくて「”」とか。ブラウザだと同じに見えてるかもしれないけど、最初のが"で後のは”だからね。面倒だ〜；；後で考えます。

$value = "~1F　－　22 & \nSan.<strong>おしゃまんべ</strong>";
$result = mb_convert_kana($value, 'as');
$result = preg_replace('/[\\x0-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\x7f]/', '', $result);
echo $result;

$value = "~1F　－　22 & \nSan.<strong>おしゃまんべ</strong>";

$result = mb_convert_kana($value, 'as');

$result = preg_replace('/[\\x0-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\x7f]/', '', $result);

echo $result;

1F22Sn<strong>おしゃまんべ</strong>

1	1F22Sn<strong>おしゃまんべ</strong>

うん、できた。

でもこれで終わると面白く無いのでもっと簡単にできないか調べてみると、PHP5.2からFilter関数(PHPマニュアル)というのがあるのがわかりました。

メールアドレスが有効かどうか調べて、メールアドレス部分だけ取り出すとか簡単です。次のコードでメールアドレスが取り出せます。

$email = filter_var('てすと(user@example.jp)',FILTER_SANITIZE_EMAIL);

1	$email = filter_var('てすと(user@example.jp)',FILTER_SANITIZE_EMAIL);

第3引数に定数じゃなくて配列を渡すこともできます。
数値が0~10の整数の範囲か調べて、無効なら0を返すにはこうなります。

var_dump(
    filter_var(
        '1',
        FILTER_VALIDATE_INT,
        array(
            'options' => array(
                'default' => 0, // フィルタが失敗した場合に返す値
                // その他のオプションをここに書きます
                'min_range' => 0,
                'max_range' => 10
            ),
            'flags' => FILTER_FLAG_ALLOW_OCTAL,
        )
    )
);

var_dump(

filter_var(

'1',

FILTER_VALIDATE_INT,

array(

'options' => array(

'default' => 0, // フィルタが失敗した場合に返す値

// その他のオプションをここに書きます

'min_range' => 0,

'max_range' => 10

'flags' => FILTER_FLAG_ALLOW_OCTAL,

)

);

min_rangeとかfragsのFILTER_FLAG_ALLOW_OCTALとかは、FILTER_VALIDATE_INTフィルタで許可されているオプションです。
おぉ、、なんかフレームワークがやるような処理を組み込んでる。さすがPHP!おせっかいさん！憎いぜ！これなら最初の関数も簡単にできるかも！

・・・できませんでした。デフォルトで用意されている除去フィルタの一覧をみると、最低限のものしかない印象。

自分で登録したコールバック関数使ってみます。

function foo($str){
   $str = mb_convert_kana($str, 'as');
   $str = preg_replace('/[\\x0-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\x7f]/', '', $str);
   return $str;
}
var_dump(filter_var(
    "~1F　－　22 & \nSan.<strong>”おしゃまんべ”</strong>コース",
    FILTER_CALLBACK,
    array('options'=>'foo')
));

function foo($str){

$str = mb_convert_kana($str, 'as');

$str = preg_replace('/[\\x0-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\x7f]/', '', $str);

return $str;

}

var_dump(filter_var(

"~1F　－　22 & \nSan.<strong>”おしゃまんべ”</strong>コース",

FILTER_CALLBACK,

array('options'=>'foo')

));

1F22Sanstrong”おしゃまんべ”strongコース

1	1F22Sanstrong”おしゃまんべ”strongコース

できたできた。引用符の問題については、Filter関数でも解決してくれないぽくて疲れたのでまた今度。[\\x0-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\x7f“”‘’]でいけるかと思ったら、他の文字が壊れたりしてハマっちゃったんですよ。昔やった時はstr_replaceとかで一文字づつ消した気がしますよ。なんかいい方法があれば教えて下さい。

GETやPOSTをフィルタリングしてくれるfilter_input/filter_input_arrayなんかでも同じパラメータで使えるので、使い回しを考えるとFilter関数いいかもしれません。

お姉ちゃんと弟でまったく絵が違う

絵を描いていたのではなく線を生み出していた

お姉ちゃんの教え

ボタンを押すとアコーディオンが開くようにする

スクロールの中心位置をスクリプトで制御する

パトラッシュ・・・

2Dオブジェクトを置いてみよう

Vertical Layout Groupでボタンを縦に並べよう

Scroll Rectでスクロールする画面に

スクロールバーを付ける

拡張子が.shtml だってSSIが使いたかったんだもん

DHTMLによるアニメーション 今は無きLAYERタグ

大文字小文字の区別なし

InternetExplorerとNetscapeで処理を分ける

15年の時を経て

やりたかったこと

JMeterとは

アパッチのログから再現（リプレイ）する

不満点とか

憧れの次世代機、どれを買ったらいいか悩みますね

小さい子供が遊べるのはWiiU、でもセッテイングは大人の助けは必要

どうして朝型がいいか

フリーランスだからこそ朝型

朝型になるには

１．早起きしたくなるようにする

２．自分を甘やかす

３．寝る前の時間を大切にする

最近気づいたこと

サンプルコード

４番目のユーザーの名前を取り出したいとき

idが２のユーザーの名前を取り出したいとき

配列のキーをidにして必要なデータのみの配列を作りたい時

条件式で指定したデータの配列を生成する

グループIDでグルーピングしたユーザー配列を生成する

複雑な階層の多次元配列を扱う

sptinrfの結果を値に入れる

ほかにもいろいろ便利ですが

拡張子が.shtml　だってSSIが使いたかったんだもん

DHTMLによるアニメーション　今は無きLAYERタグ