SEEDS Creator's Blog

FuelPHP はじめました。複雑な 独自validation 設定には Closure を使おう

Fuel PHP


ども。Webエンジニアの ishino です。

最近 FuelPHP を触る機会が増えてきたのていたので、学んだことを少しづつに記事にしていこうと思います。
珍しく、真面目にプログラムのこと書きましたので、よろしくお願いします。

FuelPHPとは?

FuelPHPはPHPで書かれたオープンソースのHMVCパターンを使うフレームワークです。
フレームワークは基本的な機能が揃っているので、高速にアプリケーションを開発することができます。
PHPのフレームワークにはたくさんの種類がありますが、中でもFuelPHPは比較的新しく、軽量で中規模のアプリケーションの開発に向いていると言われています。

validationの基本

FuelPHPは、POSTされた値の内容に対して、かんたんにvalidationをかけることができます。 必須項目の入力チェックは

$val = Validation::forge();
$val->add('name', '名前')
    ->add_rule('required');

でOKです。

ただ、複雑なvalidationチェックを行うには、自分で設定しなければなりません。 はじめは、この書き方が分からず、調べましたのでここに書いておきます。

複雑な 独自Validation 設定には Closure を使う

$option['name'] = 'hoge';
$val = Validation::forge();
$val->add('name', '名前')
    ->add_rule(['validation_name' => function($name) use ($option) {
        if ($name != $option['name']) {
            Validation::active()->set_message('validation_name', '「:label」が正しくありません');
            return false;
        } else {
            return true;
        }
}]);

このようにClosureを使うことで、独自validationを記述できるようになります。

また、functionの引数にはPOSTの値が、
その他でvalidtionで使うパラメータはuseで渡すことも可能です。

また、独自Validationを複数設定する時は、Closureに名前を設定しないとエラーメッセージが上書きされてしまうので、
上のコードのように名前を設定しておくといいですよ。


◎下の記事が参考になりました。 FuelPHPのValidationにクロージャを使う FuelPHPを更に使ってみて使えるなと思った拡張ValidationRuleの書き方とCore拡張の小技

Internet Explorerのサポートポリシー変更!? 必要な対策をまとめてみました。


はじめまして、フロントエンドエンジニアのtoyodaです。
これからどうぞよろしくお願いいたします。


さて、最近「Internet Explorer(IE)のサポートポリシーの変更」という大きな出来事がありました。
変更内容としては、2016年1月13日から各オペレーションシステム(OS)の最新版のIEのみがサポート対象となり、古いIEのサポートは終了するというもの。

しかし「サポート終了」と言っても、結局のところ「誰が」「何をしたらいいのか」が分からない方もいらっしゃると思うので、簡潔に対策が必要となるユーザーと対策方法をまとめてみました。

対策が必要なユーザー

Windows Vistaを利用されている方

「Windows Vista」における最新版のIEは、「IE9」です。
IE7、IE8を利用されている方は、「IE9」をインストールしましょう。 ※IE7、IE8は、2016年1月13日にサポートが終了しました。

Windows 7を利用されている方

「Windows 7」における最新版のIEは、「IE11」です。
IE8~IE10を利用されている方は「IE11」をインストールしましょう。 ※IE8~IE10は、2016年1月13日にサポートが終了しました。

Windows 8を利用されている方

「Windows 8」は、2016年1月13日にサポートが終了しました。
利用されている方は「Windows 8.1」へのアップデートを行いましょう。 ※Windows8.1へアップグレードすることによりIE11がプレインストールされます。

Windows Serverを利用されている方

各Windows Serverにおいても、古いIEのサポートは終了し、最新版のIEのみがサポートの対象となります。 最新版のIEにつきましては、マイクロソフトのInternet Explorer サポートポリシー変更の重要なお知らせをご参照ください。

問題点と対策方法

古いバージョンのIEには、今後脆弱性が見つかっても更新プログラムなどは適用されないため、セキュリティの面で大きな脅威にさらされることになります。 そのため、安全にインターネットを利用するためにも、IEのバージョンアップを行う必要があるのです。
IEは、新しいバージョンを自動的にインストールされるように設定することも、その設定をOFFにすることもできます。 一度OFFにしたまま忘れているということも考えられるので、今一度バージョンの確認を行いましょう。
マイクロソフトのInternet Explorer サポートポリシー変更の重要なお知らせに、IEのバージョンの確認方法や最新版IEのダウンロードページへのリンクがまとめられた表があるので、そこからダウンロードしてインストールすることができます。

各OS、IEのサポート期間

各OS、IEのサポート期間についてまとめました。 あくまでもサポートの対象になるのは「その時点での最新版のIE」なので、今後もバージョンアップはしっかり行いましょう。

Windows Vista

「Windows Vista」の延長サポート終了日は、2017年4月12日までです。 そのため「IE9」も、2017年4月12日までサポートが継続されます。

Windows 7

「Windows 7」の延長サポートは、2020年1月15日までです。 そのため、最新版のIE(執筆時点では「IE11」)も、2017年4月12日までサポートが継続されます。

Windows 8

「Windows 8」のサポートは、2016年1月13日に終了しました。 そのため、早急にWindows 8.1へのアップグレードを行いましょう。

Windows 8.1

「Windows 8.1」の延長サポートは、2023年1月11日までです。 そのため、最新版のIE(執筆時点では「IE11」)も、2023年1月11日までサポートが継続されます。

Windows 10

「Windows 10」の延長サポートは、2025年10月15日までです。 そのため、最新版のIE(執筆時点では「IE11」)、新ブラウザ「Microsoft Edge」も、2025年10月15日までサポートが継続されます。

その他

その他のサポート期間等、詳細につきましては、マイクロソフト サポート ライフサイクルからご確認いただけます。

【COALESCE関数で解決!】MySQLで値が NULL のデータを集計(count)したい

MySQL


どうも、はらぐちです。

本来は NULL を撲滅すべきなのですが、
MySQLで値が NULL のデータを、どうしても集計(count)してみたくなったもので……

というわけで、やってみました!

やりたかった事

以下のようなテーブルとデータがあるとして

テーブル data
+-------+
| value |
+-------+
| aaa   |
| aaa   |
| aaa   |
| aaa   |
| bbb   |
| bbb   |
| NULL  |
| NULL  |
| NULL  |
+-------+

それぞれの値の数を集計するために、以下のSQLを実行したら

SELECT value,count(value) FROM data GROUP BY value;

結果

+-----------+--------------+
| value     | count(value) |
+-----------+--------------+
| NULL      |            0 |
| aaa       |            4 |
| bbb       |            2 |
+-----------+--------------+

NULLのカウントは 0 になって集計できない……
これをなんとか集計したい!

解決策

COALESCE関数を使う
引数を順番に評価し、NULL と評価されない最初の式の現在の値を返し、 すべての引数がNULLの場合はNULLを返すという関数です。

例えば以下の場合

COAESCE(value,value2,'abc')

valueカラムが null の場合は value2 を返す。 value2も null の場合は 'abc' という値を返す

という動きになります。

これを踏まえて、はじめのSQLを以下のように編集

SELECT value,count(COALESCE(value,'')) FROM data GROUP BY value;

結果

+-----------+---------------------------+
| value     | count(COALESCE(value,'')) |
+-----------+---------------------------+
| NULL      |                         3 |
| aaa       |                         4 |
| bbb       |                         2 |
+-----------+---------------------------+

値が NULL のレコード数がカウントできました!
ばんざい。

【WordPress】実務で使える!おすすめプラグインをまとめてみました


WordPressでの開発を主に担当している、
フロントエンドエンジニアのトウヤマです。

後輩エンジニアのために、そろそろ「WordPress関連の情報をまとめてあげないとな」って考えていたら、
なぜか、それならいっそブログにまとめてしまおう!ということになってしまいました……

というわけで、今回は、
ここ最近で使ってみて、今後も実務で使い続けたい!便利な「WordPress おすすめプラグイン」を7つまとめてみましたのでご紹介します。

Advanced Custom Fields

Advanced Custom Fields
Advanced Custom Fields

弊社では有料版のProを使用。
とりあえず入れないと開発ができないくらいです。


Options PageFlexible Contentは多用しています。



Custom Post Type Permalinks


更新箇所が2つ以上ある場合に使用。


例えば、NEWSとブログという時にNEWSのURLは「ID」でいいけど、ブログはURLを自由に設定したい!というときに便利。
カスタム投稿タイプのページャーまで設定してくれるのもありがたい。


※Custom Post Type Permalinks 1.0.0以上で下記の設定には注意。 Custom Post Type Permalinks 1.0.0以上で発生する、カスタム投稿へのパーマリンクが404になってしまう現象について。

Category Order and Taxonomy Terms Order


Category Order and Taxonomy Terms Order
カテゴリが多い場合によく活躍します。


カテゴリ一覧の順番を「登録順ではなくその都度入れ替えたい!」という依頼がよくあります。そういうときには、このプラグインで対応することが多いです。

AJAX Thumbnail Rebuild


AJAX Thumbnail Rebuild
サムネイルを複数作成する場合。


開発途中でサムネイルを作成しなおすような場合に使います。

AddQuicktag


AddQuicktag
◎更新する方がHTMLを書けない場合。


独自で作ったスタイルを登録し、更新者はボタンを押してタグを押すだけで、 入力が可能になります。

MW WP Form


MW WP Form
コンタクトフォームを作成する場合。


確認画面付きのフォームが作成されるプラグイン。
バリデーションの種類も豊富です。

MW WP Formの注意点については、過去にブログで書いてます。こちらも合わせてどうぞ。 [article link=3530]

Any Mobile Theme Switcher


Any Mobile Theme Switcher
スマホ対応である場合。


ユーザーエージェントの判定でテンプレートの切り替えが可能になります。

まとめ

プラグインを入れたら、予期せぬバグが発生したり、ページが重たくなった!なんてことも発生します。

最低限必要なプラグインのみインストールして、シンプルで分かりやすいWordPressの設計を心がけたいですね。






Vagrantのboxサイズを拡張する

提供されているboxが8GBしかなかったので拡張したのですが、結構大変だったのでメモします。

ディスクの拡張

boxから普通にインスタンスを作成。 インスタンスを作成したらシャットダウンして作業を行います。

VirtualBoxではディスクサイズが可変のタイプは .vdiなのですが、 Vagrantのboxとできるディスクタイプはvmdkとなります。 まずは、現在のvmdkディスクをクローンしてvdi形式のディスクを作成します。

その後、カレントディレクトリを作成した仮想サーバのディスクがある所まで移動して

VBoxManage clonehd "box-disk1.vmdk" "clone-box-disk1.vdi" --format vdi

クローンしたディスクの容量を拡張します。ここでは20GBにしたいと仮定して20480を設定しています。 (20(GB) * 1024(MB) = 20480)

VBoxManage modifyhd clone-box-disk1.vdi --resize 20480

次に、ディスク拡張されたvdiをvmdkにクローンします。

VBoxManage clonehd "clone-box-disk1.vdi" "box-disk2.vmdk" --format vmdk

拡張したディスクを差し替えます。 この作業は、VirtualBoxから行ってもいいかもしれません。 --port 0 --device 0 の部分はbox-disk1.vmdkが入っていたものを指定します。 ちなみに、server_default_1448874918650_80404 は仮想サーバー名です。

VBoxManage storageattach server_default_1448874918650_80404 --storagectl "SATA" --port 0 --device 0 --type hdd --medium box-disk2.vmdk

この設定を行った後、起動してみて無事に起動すればOKです。 確認できたら、またまたシャットダウンします。

パーティション操作

現在ディスクは20GBに拡張しましたが、パーティションは8GBまでしか使用されていない状態です。 パーティションを操作して、8GBを20GBに拡張します。

新たに作成された box-disk2.vmdk を適当な仮想サーバにアタッチします。 アタッチ後、lsblkコマンドでディスクの様態をチェック。

# lsblk
NAME    MAJ:MIN RM SIZE RO TYPE MOUNTPOINT
sda    202:65   0   8G  0 disk /
└ sda1 202:145  0   1G  0 part 
└─sda2 202:145  0   8G  0 part 
sdb    202:144  0  20G  0 disk 
└ sdb1 202:145  0   1G  0 [SWAP]
└─sdb2 202:145  0   8G  0 part 

今回くっつけたものはsdbとして認識されていました。 partedでパーティション操作を行っていきます。

ない場合は、 yum install parted か apt-get install partedでインストールします。

# parted /dev/sdb
GNU Parted 2.1
/dev/sdb を使用
GNU Parted へようこそ! コマンド一覧を見るには 'help' と入力してください。

表記をセクターに変更します。

(parted) unit s

現在の情報を表示します。

(parted) print
Model: ATA VBOX HARDDISK (scsi)
Disk /dev/sda: 41943040s
Sector size (logical/physical): 512B/512B
Partition Table: msdos

Number  Start     End        Size       Type     File system     Flags
 1      2048s     1953791s   1951744s   primary  linux-swap(v1)
 2      1953792s  15988735s  15986688s  primary   ext4            boot

この情報はあとで使用するため、メモしておきましょう。 今回は、特にNumber2の行が重要になります。

次に、パーティションを削除します。

(parted) rm 2    

パーティションを作成します。

(parted) mkpart
Partition name? []? 
File system type? [ext2]? ext4
Start? 1953792s
End? 100%

パーティションサイズ以外は、元のパーティションと同じになるように修正します。

(parted) set 2 boot on
(parted) set 2 LBA off

ここまでできたら、EndとSize以外は元と同じになっているか確認します。

(parted) print
Model: ATA VBOX HARDDISK (scsi)
Disk /dev/sda: 41943040s
Sector size (logical/physical): 512B/512B
Partition Table: msdos

Number  Start     End        Size       Type     File system     Flags
 1      2048s     1953791s   1951744s   primary  linux-swap(v1)
 2      1953792s  41943039s  39989248s  primary  ext4            boot

終了!

(parted) quit

20GBに拡張されていることを確認します。

# lsblk
NAME    MAJ:MIN RM SIZE RO TYPE MOUNTPOINT
sda    202:65   0   8G  0 disk /
└ sda1 202:145  0   1G  0 part 
└─sda2 202:145  0   8G  0 part 
sdb    202:144  0  20G  0 disk 
└ sdb1 202:145  0   1G  0 [SWAP]
└─sdb2 202:145  0  19G  0 part

念のため、ディスクチェックをかけましょう。

e2fsck -f /dev/sdb2

ここまでできたら、適当な仮想サーバをシャットダウンしてディスクを外します。

パーティション拡張したディスクで起動

インスタンスを起動します。

resize2fs /dev/sda2

ここで、サイズが20GBに拡張されたら完了です。

box作成

あとはVagrantfileがあるディレクトリでboxを作成して終了です。

vagrant package

Codecademyをやってみた

こんにちは、WEBエンジニアのyuchiです。

最近、WEB上でプログラム学習ができる無料のサイトがたくさん作られていますよね。 そんな多々あるサービスの中で、私は以前「Codecademy」というサービス(もちろん無料)を使って勉強してみました。

○Codecademy http://www.codecademy.com/

普段、私は主にPHPをさわっているので、今回は違う言語にチャレンジしようと思い、 よく使われている汎用なプログラミング言語「Python(パイソン)」を選択してみました。

すると、下記のような画面が出てきます。

 

 

「Codecademy」は日本語に対応していないようなので、説明は英語で書かれています・・・

 

とりあえず説明を読みながら、黒いエディター部分にプログラムを書いて、「Save & SubmitCode」をクリックしました。

 

書いたコードがOKだったら、右上の部分に結果が表示され、プログラムが実行されます。 このように、1つクリアすると次の章に進んでいき、徐々に基礎的なプログラミングが学べるようになっていました。 誰でも気軽に始められるので、初心者の方もこういったツールをぜひ活用してみてほしいです!

以上、終わります。

Tableの使用に際して

今回は、有名なCSSフレームワーク「Bootstrap」を使用した際に、個人的に発見のあった<table>の使用について書きます。

HTMLで<table>とは

自分がコーディングに興味を持ち始めたころは、「テーブル=食卓」のイメージがあり、「table=表」に違和感がありました。 また、コーディングを勉強し始めたころは、ゴリゴリとテーブルレイアウトでページを作成していたこともあります。 が、<table>とは、食卓ではなく、Webページのレイアウトをするモノでもなく、情報を伝わりやすくするためなどに 「表」を実現するタグです。

<table>は優秀

<table>は表の一つの列のセルの幅を内容に合わせて統一し調整してくれて優秀です! また、ウィンドウを縮めたり、内容のテキストが長い場合は自動で折り返してくれたりもします。 もちろんCSSで横、縦幅、罫線、テキスト位置などが調整できるので、デザインも自由に表現することが出来ます。

スマホでの<table>

しかし、そんなテーブルにも使用する上で問題がありました。 従来のPCの画面サイズで見ときは可読性に問題なく表示されている状態だったとしても、スマホなどの小さな画面サイズで 確認すると、テーブルの項目数が多く表示されてしまったりテキストの自動折り返しの影響でテキストがほぼ縦書きのような 状態になってしまうという問題が起こります。 また、それを回避しようとCSSの設定(折り返して表示させないなど)の親の幅を無視すると、思わぬデザイン崩れが起こって しまうことがあります。 課題として、そういったケースをどう表現するのが賢明なのかが悩みどころでした。

Bootstrapでの仕様

そこで冒頭に書きましたが、Bootstrapという有名なCSSフレームワークを使うことがあり、確認してみたところ、

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

と記述することで、一定幅以下の場合にはテーブルの親のCSSに"overflow-x: scroll;"が適用され、スクロールしてテーブルを 確認することが出来るようになるという仕様でした。 この方法だと、可読性を損なうことなくスマホでテーブルの実装を行うことができる!すごい!と、目からウロコでした。

まとめ

世の中には様々な技術があり、常日頃から学ぶ意識を持ち調べることが大切だと改めて実感しました。