SEEDS Creator's Blog

読者です 読者をやめる 読者になる 読者になる

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

IE WEB セキュリティ その他


はじめまして、フロントエンドエンジニアの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 プログラミング

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関連の情報をまとめてあげないとな」って考えていたら、
なぜか、それならいっそブログにまとめてしまおう!ということになってしまいました……

というわけで、今回は、
ここ最近で使ってみて、今後も実務で使い続けたい!便利な「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サイズを拡張する

IT Linux プログラミング

提供されている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をやってみた

IT php WEB プログラミング

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

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

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

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

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

 

 

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

 

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

 

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

以上、終わります。

Tableの使用に際して

Bootstrap CSS コーディング デザイン

今回は、有名な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;"が適用され、スクロールしてテーブルを 確認することが出来るようになるという仕様でした。 この方法だと、可読性を損なうことなくスマホでテーブルの実装を行うことができる!すごい!と、目からウロコでした。

まとめ

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

MW WP Formを使って動かない時に確認したいこと

WordPress MW WP Form wordpress フォーム プログラミング


「Word Press」のコンタクトフォームと言えば「Contact Form 7」。 いつも迷うことなく利用し続けていました。 「Contact Form 7」といえば、海外で開発されているため、基本確認画面がありません
日本では確認画面が必要な案件が多く、「Contact Form 7」を使用するともれなく カスタマイズしなければなりません。
そうなると手間がかかってしまったり、精度が落ちてしまうという問題点が....

そこで、新しく話題に上がった「MW WP Form」を試しに使ってみました!

管理画面からの設定が簡単で、とても使いやすい!
ですが、実装してみたところ動かない!?という問題にぶつかってしまいました・・・

いろいろ調べてみましたが、比較的新しいプラグインということもあり情報が少ないのが難点。
有力な情報がなく困ってしまいました。
試行錯誤した結果、なんとか解決することができたので、その際の注意点をまとめたいと思います。

1.ループの記述がない。


<p>タグが入るのが面倒で、独自テンプレートに $post->post_content; だけを記述していることが 私はよくあります。

これではショートコードは展開できないので、

[code] if (have_posts()) :
while (have_posts()) :
the_post();
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );
the_content();
endwhile;
else:
<p>記事がありません</p>
endif;
[/code]

こんな感じで書くとショートコードも展開出来て、無駄な<p>タグも除去できます。

2.wp_head();とwp_footer();が足りていない。


これは、プラグインが動作しない大半の原因ですね。
独自テンプレートを作る際どうしても忘れてしまいがちなので要注意です。

3.<form></form>タグが作成したページに入っている


私は、これに一番躓いてしまいました。
フォームのページをコーディングし、WordPressに組み込む際に、管理画面にそのまま貼り付けていました。
その時に3.<form></form>が残ってしまっていたようです。
「MW WP Form」は自動でコードを挿入してくれるので、それよりも中に
<form></form>タグがあると動きません。
きちんとチェックしなくてから組み込まないといけませんね。反省。

まとめ



実装してみた感想として、基礎的なところを見落としていたことが悔やまれます。
動作さえすれば、使い勝手もよく優れたプラグインなので、今後カスタマイズなどの記事も かけたらと思っています。