マイクロソフト認定資格の70-480(HTML5とJSとCSS3の試験)に合格しました

Facebook にシェア
Pocket

マイクロソフト認定資格(MCP)の70-480(Programming in HTML5 with JavaScript and CSS3)に昨日受けてきて合格しました。

会社がマイクロソフトのパートナー契約が切れたとのことで、再度契約するのにMCPに社内から二人合格する必要があり、そのうちの一人として暇そうな自分が選ばれました。

受けたのは大阪駅前第3ビルの3階にあるエンカレッジテストセンターというところ。入ったら想像以上に大勢の人が座っていて、ビックリしました。みんな何の試験を受けにきたのだろうと。就活生っぽい人が多かった印象。一人、本人確認書類に使えるものをもっていなかったらしく、しぶしぶ帰っていった就活生らしき女の子がいたのが印象的でした(にしても、スタッフのテキパキ度合いがすごかった)。

肝心の試験のほうは、だいたい一問一答の四択問題だろうなと思って受けたら、複数穴あきがある問題があったり、順番に並び替える問題があったりして少しややこしい問題も多かった。jQueryのAjaxのオプションや、Flexboxについての問題がちょっと難しかった(見たことはあるけど、ちゃんと使ったことがないので)。

得点は、1000点中の945点(合格点は700点)。8割を目標にしてたので、この結果はよかった。もう一人は先に受けていて、同じく950点程度(確か)で「簡単」とのことだったので、高得点がとれてよかった(ただし、もう一人のほうが受けたのは70-480ではなく、C#の試験の70-483)。

ただ、これだけ高得点がとれたのは、もう一人のほうに教えてもらったサイトで勉強したからだと思っています。そのサイトが下記。

70-480 – Microsoft Practice Exam Questions – 100% Free | Exam-Labs

このサイトで、無料登録すると200問以上の70-480にでてきた問題を見ることができます。中には、ほとんどそのままの問題もでてきて、このサイトを知らなかったらかなり得点は低かったと思います。英語のサイトなので、英語に自信がある人はそのまま解いていったほうがいいです。試験では英語に切り替えることもできるので。自分はGoogle翻訳で日本語に翻訳して切り替えました(Google Chromeを利用してる場合です)。

元に戻したくなったら、URLの右側に表示されてるGoogle翻訳アイコンをクリックすれば、元の英語表記に戻せませた。

なお、無料会員だと、次の問題のページに移動しようとすると下記のように『私はロボットではありません』と表示されます。チェックを押したら普通に進むので、これぐらいは大した問題ではないと思います。

なお、パット見、ページ番号を入力することがそのページに一気に飛ぶことができそうな気がしますが、ページ番号を変更しようとすると、アップグレードを促されます。

いろいろ試してみると、開発者ツールを開いて『NEXT』ボタンを選択し、そのタグの『data-page』という属性の値を変更して『NEXT』ボタンを押すことで指定のページに飛ぶことができました。

ただ気をつけなければいけないのが、このサイトの問題の答え、たまに間違っています。自信をもって「これだな」と思って解答を見たら、全然違う答えが正解となっていて面食らいました。ただ、だいたいそういう時はコメント欄をみると、「正解が間違っている。正しくは○」というような感じで、誰かがコメントしているので、コメント欄も見たほうがいいかもしれません(特に、なぜその答えになるのか分からない時)。

なお、このサイトは、MCPだけではなく、様々な試験に対応しているようですので、受けてみようと思っている資格があれば参考にしてみてください。
All Exam Dumps and Vendors

ちなみに、このサイトを知る前は下記記事を参考に勉強していました。
MCP(70-480 Programming in HTML5 with JavaScript and CSS3)試験対策 – To Be Determined

特に、MVAのビデオは一度見ておいたほうがいいかもしれません(日本語表記の字幕を表示することができます)。

CSSによる色のアニメーションはrgbとhslの指定で違いがあるか調べてみた

Facebook にシェア
Pocket

最近、ウェブサイトをいろいろ見ていて、このアニメーションの動きってどうしてるんだろうと思って調べてみると、CSSのtransisionの機能を使って実現しているというサイトが増えてきました(ちょっと前までアニメーションはjQueryで作っているところが多かった印象)。

自分も最近になってようやくその処理方法が分かってきたので、いつか実践で使ってみたいです。

ところで、このアニメーションですが、jQueryでは確か色の変更はアニメーションで実現できなかったと思うのですが、CSSのアニメーション機能はなんと色の変更まで実現できます。

そこで思ったのが、もしかしたら色をRGBで指定するのと、HSLで指定するのではアニメーションの変化が異なるのではないかと疑問。

例えば、RGBでの青の指定は『rgb(0,0,255)』、RGBでの黄色の指定は『rgb(255,255,0)』となりますが、HSLでの青の指定は『hsl(240, 100%, 50%)』、HSLでの黄色の指定は『hsl(60, 100%, 50%)』となるため。パット見、HSL指定だとHの色相部分だけの値を変えればいいだけなので、青から黄色に変化する場合は途中に緑色、つまり『hsl(150,100%,50%)』という値がでてくるのではないかと思いました。対してRGB指定だとrとgの値が増え、bの値が減るようになりそうなので途中に緑色『rgb(0,255,0)』はでてきそうにありません。

というわけで調べてみた。

HTML

CSS

JavaScript

青というラジオボタンをクリックしたら背景が青、黄色というラジオボタンをクリックしたら背景が黄色に5秒かけて変化するという処理をしています。アニメーションによる変化対象は背景色のみとしています(現在の処理だと、文字色はクリックと同時に変化しますが、CSSの『transition: background-color 5s;』を『transition: all 5s;』とすれば文字色もアニメーションで変化します)。色については左側の要素をRGB指定、右側の要素をHSL指定としています。

サンプル:CSS Color Animation

結果、全く同じように変化しました。RGB指定からHSL指定に変化することもできるわけだからそりゃそうか。

【SQL】特定のデータがあるグループのみ抽出する方法

Facebook にシェア
Pocket

SQLで集計する時に、ある特定の値があるグループのみ抽出したいということがあると思います。先日、仕事でそういうことをしたいということがあったのですが、すぐには思いつかず、仕事を終えた後に思いついたので、紹介したいと思います。

今回、使うのは下記のようなサンプルテーブル。テーブル名はtest1で、フィールドがグループ番号、名前、年齢、点数とします(名前と年齢は今期見てるアニメからとっています)。

ここから、中学生(12~14歳)がいるグループのみのグループ番号と平均点を取得するSQLを取得するには下記のようにすればとれます。

上記の結果が下記です。

確かに、グループに中学生のいる1と2のみの平均点が表示されました。

上記のSQLは何をしているかというと、まずはGROUP BYで全データを集計し、HAVINGで12~14歳の年齢がいるグループのみに絞っています。

なぜ、これで絞れるかというと、CASEの条件(ここでは「age BETWEEN 12 AND 14」)に一致した値があれば1という値が含まれ、無ければ0しかないということになるからです。それぞれの行にCASE文の結果を付与すると下記のようになります。

そこからMAX関数で最大値をとってくるので1が含まれていれば1、1が含まれていなければ0となるので、1に等しい値を抽出した結果、条件に一致したグループのみを取得できることになります。

逆に、特定のデータが入っていないもののみを抽出したいという場合は、「= 1」の箇所を「<> 1」とするか、「= 0」とすることで、取得することができます。

なお、HAVINGを使わなくても、サブクエリーを使うことで同じことができます。

ただ、HAVINGを使ったほうがシンプルなので、基本的にはHAVINGを使ったほうがいいと思います(実行計画のコストも、HAVINGを使ったほうが少しだけ低いようです)。

HAVINGは今までほとんど使ってこなかったのですが、使い始めると結構便利なことに気づきました。いろいろ応用もできそうなので、使いこなしていきたいです。

2018/03/26追記:そういえば、この記事を書こうと最初に思ったときは、条件は中学生以下、つまり「MAX(CASE WHEN age <= 14 THEN 1 ELSE 0 END) = 1」にしようとしていました。ただ、これだと、「MIN(age) <= 14」でもいいことに気づき、中学生が含まれるかどうかという条件に変更しました。こういう条件は、シンプルに考えられるようになりたいです。

外部結合したテーブルの値で内部結合するなという話

Facebook にシェア
Pocket

最近、仕事では複雑なSQLばっかり書いています。

ただ、今関わっているプロジェクトでは上から設計書を渡されてそれをコードとして書くのですが、SQL部分はほとんどそのままで、違うのはテーブル名やフィールド名が日本語になっているぐらいという感じです(場合によっては、効率が悪かったり、ムダにSQLを分けているなと思うと、こちらで書いて後から設計書に反映してもらうこともあります。変更が大きかったりすると嫌がられてるのが伝わってきます)。

そんな中で出てきたコードが下記のようなコード。自分も書いてるときは何も思わずにそのまま書いてしまっていました。

問題です。table1のsubid(ここでは1とする)に対応するtable2のidが見つからない場合、結果はどうなるでしょう。

答えは、

id field
1 null

とはなりません。

なぜなら、table1のsubidに対応するtable2がないのだから、内部結合しているtable2に対応するtable3もないから。で、外部結合だと対応する値が無くても出力しますが、内部結合だと対応する値が無いと出力しないので、結果、出力しないことになります。

なので、上記のSQLはtable3の結合も内部結合として、

とするのが正解なはずです。多分、table1にあってtable2に対応する値が無いことはあるけれど、table2にあって対応する値がtable3に無いことは無い(絶対にある)ので、こういうSQLを作ってしまったんだと思います。

ところで、今のプロジェクトで使っているDBMSはDB2の10.1なのですが、上記のようなSQLにおいて、なぜかWHERE句にANDを追加すると値が出力されるのだけど、無いと出力されないという摩訶不思議な現象が発生しました(ANDを使って条件を追加すると、通常は結果が変わらないか少なくなるはず)。

いろいろ調べてみると、上記のように結合部分がおかしかったので修正したら直りはしたのですが、なぜこんな現象がでたのかは謎です(条件の部分に関しては、上記の結合箇所は全く関係無かったし)。DB2のバグっぽいのだけど、そういう現象って報告されてたりするのだろうか。条件によってでたりでなかったりしたので、再現方法はわからないのだけど。

画面内に入ったり出たりした時の処理を行う「Intersection Observer」について

Facebook にシェア
Pocket

先日、超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる (WEB+DB PRESS plus)という本を読んで知ったのですが、最近のWebブラウザのJavaScriptには、「Intersection Observer」というAPIがあるらしく、このAPIを使うことで画面内に入ったか(もしくは画面外に出たか)どうかを判定できるそうです。

便利そうなので、試しに使ってみました。画面に四角い要素を100個並べて、画面に入ったり出たりすることで背景色が変わるサンプルです。試しに、今まで知ってはいたけど使ったことがないCSSアニメーションや、ES6から実装されたletやconstやアロー関数も使っています。

HTML

CSS

JavaScript

サンプル:Intesection Observeテスト

スクロールしたり画面サイズを変更したりすることで、四角い要素が画面内に入ると、背景色が1秒かけて青からオレンジに変わると思います(IE以外の最新ブラウザ対応)。

ただ、すばやくスクロールしているとたまにうまく動作しないことがあるみたいです。あまりアテにしすぎるのもよくないのかも(自分がよく分かってない可能性もおおいにあります)。

なお、IntersectionObserverの第2引数にはどの要素の交差を判定するか(なければブラウザのビューポート)のrootと、ルート回りの余白を指定できるrootMargin、それと可視性がどれぐらい入ってるか出ているかでコールバックを実行するthresholdというオプションがあるそうです。
参考:Intersection Observer API – Web API インターフェイス | MDN

超速!  Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる (WEB+DB PRESS plus)
佐藤 歩 泉水 翔吾
技術評論社
売り上げランキング: 11,340