こんにちは、株式会社アリアです。

FuelPHP を利用して開発を行っていた案件にて、以下の問題が発生しました。

Web ブラウザ上でユーザーが入力した項目に対する入力チェック(バリデーション)処理を、FuelPHP に実装した独自バリデーションで行ったところ、同一バリデーションルールが適用された複数の項目でエラーが発生した場合に、最後にチェックされた項目のエラーメッセージのみとなってしまいました。

その際のコードは、FuelPHP で一般的なバリデーション設定の書き方をしていました。

$val = Validation::forge();
$val->add_callable('MyRules');
// _validation_originalRule メソッドが独自バリデーションにあります
$val->add('field_1', '項目1')->add_rule('originalRule');
$val->add('field_2', '項目2')->add_rule('originalRule');

項目1,2 いずれもエラーとなった場合の期待値は以下ですが、

・項目1 は originalRule に従っていません
・項目2 は originalRule に従っていません

実際には以下のようになってしまう、という問題です。

・項目2 は originalRule に従っていません
・項目2 は originalRule に従っていません

FuelPHP の core ソースを調べてみたところ、一つのバリデーションルールには一つのメッセージしか保持できない、という仕様になっているためだと分かりました。

しかし、何らかの手があるはずです。

そう思いながら Google 先生に尋ねてみたのですが、ビンゴな回答が見つかりません。

そこで、再び FuelPHP の core ソースを眺めつつ試行錯誤したところ望む結果を得ることが出来ました。

$val = Validation::forge();
$val->add_callable('MyRules');
$val->add('field_1', '項目1')->add_rule(['field_1_originalRule' => array('MyRules', '_validation_originalRule')], 'field_1_originalRule');
$val->add('field_2', '項目2')->add_rule(['field_2_originalRule' => array('MyRules', '_validation_originalRule')], 'field_2_originalRule');

add_rule の第一引数が配列となっているのが最大のポイントで、適用したいルール(MyRules クラスにある _validation_originalRule メソッド)に別名を付ける、という事をしています。

これにより、「field_1 には field_1_originalRule という名称のルール」「field_2 には field_2_originalRule という名称のルール」が適用され、適用されるルールの実体は「MyRules クラスにある _validation_originalRule メソッド」となります。

add_rule の第二引数は、ルールの別名と一緒としているのもポイントで、MyRules クラスに実装したバリデーションメソッドは以下のようになっています。

_validation_originalRule($val, $name) {
    // バリデーションエラー時に以下をセット
    Validation::active()->set_message($name, ':label は originalRule に従っていません');
}

これにより、項目1,2 いずれもエラーとなった場合の期待値どおりとなりました。

・項目1 は originalRule に従っていません
・項目2 は originalRule に従っていません

この記事が、FuelPHP を利用した開発の役に立てば幸いです。

こんにちは、株式会社アリアです。

先日、自分が開発に携わっていた予約サイトのリニューアルリリースが行われました。

そのサイトにおいて、Webサイトで良く見かける「<長い説明文の一部>…続きを見る(リンク)」という表示に一工夫を凝らし、長方形の表示エリア内にテキストをピッタリと収めるようにしたので、その手法をご紹介いたします。なお、「続きを見る(リンク)」が不要な場合は css3 で実現可能なので、「ellipsis css」といったキーワードでネット検索していただければと思います。

ここで紹介する手法を実際に適用した表示は、この様になります。

381_attach

では説明に入ります。まず最初は表示されるテキスト部分の Html です。

<p
 data-href="★1. 続きのリンク先URL★"
 data-max-height="★2. 許容する最大高さ。例:80★"
 class="ellipsis multiline"
 style="height:★3. p タグの高さ。例:80px★;"
>
★4. 表示したい文字列をここにセット★
</p>

この例では p タグを利用しています。★マークで囲んだ部分については、説明内容に従って記載(サーバーサイドから出力)しておいてください。p タグで囲まれている「4.」のテキスト文字列部分は、表示エリアをはみ出す文字数でサーバーサイドから出力しておく必要があります。

次に Html の JavaScript 部分ですが、ここでは jQuery を利用しています。Html のテキスト出力が終わった後に、クライアントサイドの JavaScript を呼び出すようにしておきます。

$(function() {
	$(".ellipsis").ellipsis();
}

最後に、上記から呼び出されるメイン JavaScript です。

(function($) {
	$.fn.ellipsis = function()
	{
		return this.each(function()
		{
			var el = $(this);

			if (el.css('overflow') == 'hidden')
			{
				var text       = el.html();
				var multiline  = el.hasClass('multiline');
				var max_height = el.data('maxHeight');
				var href       = el.data('href');

				var t = $(this.cloneNode(true))
					.hide()
					.css('position', 'absolute')
					.css('overflow', 'visible')
					.width(multiline  ? el.width() : 'auto')
					.height(multiline ? 'auto'     : el.height())
					;

				el.after(t);

				if (multiline)
				{
					// 下行の +4 はブラウザ差異吸収のために入れたものなので、必要に応じて調整してください。
					if (t.height() + 4 >= max_height)
					{
						el.height(max_height);
					}
				}

				function height() { return t.height() > max_height; };
				function width()  { return t.width()  > el.width(); };

				var func = multiline ? height : width;

				while (text.length > 0 && func())
				{
					text = text.substr(0, text.length - 1);

					if (typeof href === 'undefined')
					{
						t.html(text + '…');
					}
					else
					{
						t.html(text + '… <a href="' + href + '">続きを見る</a>');
					}
				}

				el.html(t.html());
				t.remove();
			}
		});
	};
})(jQuery);

メイン JavaScript の処理フローを説明すると以下のようになります。

① テキスト表示エリア(今回の例だと p タグ部分)から文字列が溢れるか否かをチェック
溢れる場合 ⇒ ②
溢れない場合 ⇒ ③
② テキストの後ろから一文字を削除 ⇒ ③
③ data-href が指定されている場合に「… 続きを見る(リンク)」を最後尾に追加 ⇒ ①

テキスト表示エリアから文字列が溢れないようになるまで上記フローが繰り返されます。したがって、クライアント側のブラウザに処理の負担を強いるため、一画面で十数ヶ所も使用すると表示が遅くなる事がありますが、一ヶ所ならば問題ないようです。ただし、サーバーサイドで出力する文字列が長すぎると、クライアントサイドで削除処理を行う回数が増えて表示に時間がかかりますので、サーバーサイドから出力する文字列の長さを調整する必要があります。

こういった表示の工夫を要求される機会はなかなか無いと思いますが、必要となった際の参考にしていただければ幸いです。

参考サイト:Stack Overflow

こんにちは。入社1年目の新人です。

最近は、蒸し暑くて過ごしづらい日が続いています。体調管理にはお気を付けください。

さて、私がアリアに入社してから早くも4ヶ月がたとうとしています。まだまだ至らない部分も多く、日々現場の先輩方から業務について教わる毎日です。
毎朝、早めに職場について前日に習ったことを復習していますが、覚えては忘れ覚えては忘れ、で悪戦苦闘を繰り返しています。

そんな半人前の私ですが、少しでも早く一人前の技術者になりたいと思い3ヶ月ほど前からコツコツとやってきたものがあります。

ブログ写真_問題集

SEなら知らない人はいないであろうメジャー資格、オラクルマスター!!・・・のブロンズです。つまり一番下の初級の資格なのですが、これが案外と難易度が高く半端な勉強では合格できません。

先週の日曜日に受験してようやく合格しましたが、不合格になると思っていました。ひやひやいたしました。それでも、合格したので一安心、と思いきや・・・

ブログ写真_問題集2

なぜ同じ写真を2回も載せるのか?と思った方がいらっしゃるかもしれませんが、これは違う問題集です。1枚目がSQL、2枚目がDBAの問題集ですね。なんと、オラクルブロンズは2つの試験に合格しなければ認定されません。

この分厚い問題集をもう一冊やらなければならないかと思うと、なかなか大変ですがここは踏ん張りどころ。秋には基本情報処理試験もありますので、それまでには何とか合格したいと思っています。

ところで、この2冊の本ですがアリアの資格試験補助制度を利用して購入いたしました。2冊で7000円以上もする高価な書籍だったのですが、アリアは社員の資格取得に積極的で全額負担してくれました。太っ腹ですね!!

何万円もする受験費も一部補助してくれるので、上手に使えば少ない経済的負担でスキルアップが図れますね。助かっています。

これから夏本番ですが、仕事も勉強もプライベートも誰にも負けない充実した夏にしたいと思います!!このブログを読んでくださっている皆様も、素敵な夏をお過ごしください。

それでは。

こんにちは、株式会社アリアです。

久しぶりに技術的な事を書いてみようと思います。

2014年4月9日に Windows XP のサポートが打ち切られましたが、その際には弊社でも利用パソコンの見直しが行われ、OS の更新や処分といった対応が実施されました。同様に、家庭で利用していた Windows XP パソコンを処分した人も多いのではないかと思いますが、私は Windwos XP ノートパソコンを Linux Mint PC 化して継続使用しています。

Linux Mint とはなんぞや??という方もいらっしゃると思いますが、詳しい説明はここでは割愛しますので Wikipedia などを参照してみてください。

導入手順を簡単に記載すると、以下のようになります。

1. Linux Mint インストール用ファイルのダウンロード
2. ダウンロードしたファイルを DVD もしくは USB メモリなどに展開
3. 上記から起動
4. インストール実行(注:インターネットへの接続必須)
5. 再起動
6. アップデートマネージャーを実行して最新化
7. 文字入力の日本語対応化

しかし、上記の状態ではウィルス対策が無いため、ネットを利用するには不安が残ります。

そこで、Comodo Anti Virus for Linux をインストールしようとしたのですが、Linux Mint 17.1 ではインストール前の make で失敗しました。理由は Comodo の想定よりもカーネルバージョンが新し過ぎるためだったのですが、これを解決する術をネットで調べてドイツのフォーラムで発見した時は、先駆者に心の底から感謝しました!

LiuxMintブログ用

Linux Mint で使えるアプリケーションは豊富かつ無料ばかりですし、Wine と呼ばれる Windows プログラムを動作させるアプリもありますので、Windows XP だったパソコンをまだ手元に残しているならば、Linux Mint 化を試してみると面白いと思うので、お一つ試してみてはいかがでしょうか。

こんにちは、株式会社アリアです。

今回は、フレームワークを利用したWebアプリケーション開発について書いてみようと思います。

昨年の話となりますが、大規模なWebアプリケーション開発に携わる事が決定した際、システム全般の基本設計を一任していただきました。開発に利用する言語やフレームワークを利用するか否か、といった根幹部分も含めて一任していただいたので、自分の知識や近年の技術傾向、お客様の仕様要件などを勘案して言語とフレームワークを選定しましたが、利用するフレームワークを決定する際に一点だけ自分の思いを込めました。

それは、「我々が日本での大規模開発利用の先駆者になる!」という思いです。

当時、選定したフレームワークはメジャーアップデートが行われたばかりでした。メジャーアップデート以前のバージョンでの開発実績は数多く、弊社でも実績がありましたが、メジャーアップデート後の国内開発実績は耳にしておりませんでした。それもそのはずで、メジャーアップデート版の日本語解説本は存在せず、Webマニュアルも英語版のみという状況であったため、一部のギークな人だけが手を付け始めた程度のタイミングだったからです。そのため、国内の先駆者がほぼ皆無とも言える未知の世界での開発となりますが、「その世界での経験が、開発に参加するメンバーのスキルや自信の向上に必ず繋がるはずだ」という思いを込めて選定を行ったというわけです。

そのフレームワークは英語圏で開発された物であるため、当然ながら新バージョンのノウハウは英語圏に多くありましたので、英語での検索や読解、旧バージョンの日本語マニュアルを参考にした推測や考察といった対応が必要となったわけですが、参加メンバーが期待に応える対応を見せてくれたため、厳しいスケジュールを遵守して予定通りにリリースを行う事が出来ましたので、密かに秘めた思いを達成する事が出来たのではないかと思っています。

なお、私自身も新バージョンでの開発は初となるために、フレームワーク選定時に自宅 PC にインストールして基本的な仕組みや作法といった事を確認したり、開発中に発生した懸案事項を解消するための方法を、自宅で構築した簡易アプリケーションで模索してみるといった対応を通じ、一技術者として非常に楽しむ事が出来た開発となりました。

開発を行ったWebアプリケーションが何であるかは、残念ながら皆さんにお教えする事が出来ませんが、大手ネット企業にて利用されている物なので、Webブラウザを介して目にしていただいているかもしれませんね。

これまで携わった案件といえば、どれもこれもWindows上での開発ばっかり。
せいぜい、サーバへアクセスして、コンパイルしたファイルを移動したり、ログを見たり。

「cd」で移動。
「ls -l」でファイル確認。
「cp」でファイルを別ディレクトリにコピー。
「tail」でログの中身を見たり。

Unixのコマンドに触れたのも、そんなものしかないかもしれない。

ところが、現在携わっている案件で、シェルを作らないといけない。
でも、現場の中ではネットが使えない。
なおかつ、開発環境はしばらく構築されない。

設計工程の段階だけど、リファレンス集を見ながら、できそうかどうか探ってる。
ときには人に訊きながら。

引数って、どうするんだ?
変数は、どう扱うんだ?
エラーって、どう捕らえればいいんだ?

作ってみて、動かしてみて、確認してみれば実感も沸いてくるんだけど。

そんなこんなで、ようやくタイトルに行き着くわけで、自宅のPCに勉強用の環境を構築。
VMwareをインストールして、その中にCentOSを入れてみる。

さて、いろいろと動かして試してみようかな。
やっぱり手を動かさないと身につかんです。

もちろん、仕事上の資産なんか持って帰ってませんよ。
ゲンキン×ゲンキン!!(厳禁)