HTML5プロフェッショナル認定試験レベル1受験の際に俺が参考にした本と感想とか
jBellTree鈴木です。
今回は１年くらい前に受験した HTML5 プロフェッショナル認定試験 Level1 について。 Level2 も取得済だけど、まずは Level1 の受験のレポートから。
結果
1発合格でした。 正答率は、たしか 80% くらいだったと思います。
時間的には１回全て時終わるのには十分な時間だったと思いますが、 全問見直す時間は無かったように思います。
問題の内容
参考書を隅から隅まで頭にたたきこんでおけば解けるような問題でした。 ただし、１問だけ記述の問題があったように思います。 どんな問題だったかは、すんませんわすれました。
あと、こんなん知らんわ！っていう問題で、
「iPhone で 以下のタグを表示したときの見た目を選べ」
みたいな問題が出たのを覚えています。
使用した参考書
そもそも俺が受験した時は、公認の参考書がコレしかなかった。 kindle 版も出ているが、当時の俺は 「電子書籍なんかで勉強しても頭に入らねーよｗｗｗ」 と思っていたので、紙の書籍を買いました。 Kindle版のリンクも一応貼っておきます。
内容としては、amazon のレビューにある通り、とにかく試験範囲を網羅することを目的としている感じです。 たしか本の最後の方に模擬試験１回分が収録されていました。
amazon のレビューでは評価がそれほど高くないようだけれど、自分はこの本のおかげで合格できたし、この本がなければ合格できなかったと思います。
参考にしたWebサイト
泣く子もだまる公式サイトで、例題を用意してくれています。 自分は上記の参考書の問題と、以下の公式の例題を各3回くらい解き直してから受験しました。
あとたしか、参考書で分からなかったタグがあった時、↓のサイトも参考にしたように思います。
感想とか
ひたすら暗記するのが大変だったのを覚えています。 ただし、 HTML5 で削除された要素 HTML5 で意味が変わった要素 HTML5 で追加された要素 CSS3 で使えるようになった機能 などなど、体系的にまとめられているので、 いままで、HTMLなんて適当にかけばいいんでしょ？ みたいに思っている人は、目から鱗な内容だと思います。
あとこの記事が、これから HTML5 プロフェッショナル認定試験 Level1 を受験する人の参考になれば幸いです。
Selector API の使い方
Selector API の使い方をメモっとく
Selector API は CSS のセレクタ（ #ok_button とか .button_area ）を使用して、HTMLの要素を取得できるAPI。 以下のメソッドがある。
・document.querySelector
例
document.querySelector('.test'); // class属性に test が指定されている要素のうち最初の要素を指定する
・document.querySelectorAll
例
document.querySelectorAll('.test'); // class属性に test が指定されている要素すべてを配列で返す
今までは document.getElementById() とか document.getElementsByClassName() とか をセレクタ別で使い分けていて、それが嫌な場合は大抵jQueryを使っていたけど、 jQueryを使うまでもなく、でもいちいちメソッド使い分けるのめんどーだなーって時使えるかもしれない。 あと、CSSに慣れているデザイナと相性いいかもしれない。
実際のソースコードものせとく
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Query Selector テスト</title> </head> <body> <p> <button id="button1">querySlectorメソッド使用ボタン</button> <button id="button2">querySlectorAllメソッド使用ボタン</button> </p> <ul> <li class="test_class">変更前</li> <li class="test_class">変更前</li> <li class="test_class">変更前</li> <li class="test_class">変更前</li> <li class="test_class">変更前</li> </ul> </body> <script> // querySelector() メソッドを使用してイベントリスナを設定 document.querySelector('#button1').addEventListener('click', function () { // querySelectorはセレクタで取得できる要素のなかで最初の要素を返す document.querySelector('.test_class').innerHTML = '変更された'; }, false); // querySelector() メソッドを使用してイベントリスナを設定 document.querySelector('#button2').addEventListener('click', function () { var nodeList , i ; // querySelectorAll() は querySelector()と異なり、セレクタで取得できる要素すべてを配列で返す nodeList = document.querySelectorAll('.test_class'); for (i = 0; i < nodeList.length; i++) { nodeList[i].innerHTML = '変更された'; }; }, false); </script> </html>
Oracle SQL Developer のフォント/背景色を変更する方法
Oracle SQL Developer をインストールするたびに、
「フォント変えたいなー、背景色変えたいなー」
「あれ？どこから変更するんだ？」
ってなっていたので、変更手順をメモっとく。 画面はMac版だけど、Windows版でも似たような手順で出来るはず。
1.設定画面までの行き方
「Oracle SQL Developer」 → 「Preferences」
2.背景色の変え方
2-1. 背景色だけの変え方
プリファレンス画面の左側メニュー → 「コードエディタ」 → 「PL/SQL構文の色指定」 → 「背景」
変更をしたらプリファレンス画面右下の 「OK」ボタンを押す。
2-2. テーマ毎いっきに変える方法
今回記事を書きながら初めてこんな機能あるのを知った。 SQL Developer なかなかやるじゃねーか。
以下の手順でエディタ部分のテーマを変えられる。SQL Developer ではスキームって言うらしい。
プリファレンス画面の左側メニュー → 「コードエディタ」 → 「PL/SQL構文の色指定」 → 「スキーム」
変更をしたらプリファレンス画面右下の 「OK」ボタンを押す。
3. フォントの変え方
フォントの変更も、背景色の変更と同様にプリファレンス画面から行える。
手順は以下のとおり。
プリファレンス画面の左側メニュー → 「コードエディタ」 → 「フォント」 → 「フォント名」
変更をしたらプリファレンス画面右下の 「OK」ボタンを押す。
おわりに
まぁ、どんなに開発環境の見た目を美しても、既存のスパゲッティコードが変わるわけではないんだけどね…
Geolocatoion APIで現在地を取得しGoogleマップに表示する方法
JavaScript で Geolocatoion APIを使用して現在地の緯度、経度を取得しGoogleマップに表示するまでをまとめておく。
実際に動いているのはこちら
http://ec2-54-191-139-159.us-west-2.compute.amazonaws.com:8080/forBlog/20160111/
位置情報を取得 ボタンを押し、位置情報の取得を許可すればマップが表示されるはず。
Macのsafariでは以下の手順で位置情報の取得を許可しないと現在地を取得できないっぽい。 OS X と Safari の位置情報サービスについて - Apple サポート
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Geolocation API テスト</title> <script src="http://maps.google.com/maps/api/js"></script> <script src="./js/app.js"></script> <link rel="stylesheet" href="./css/style.css"> </head> <body> <p> <button id="get_position_button">位置情報取得</button> </p> <ul> <li><span id="latitude"></span></li> <li><span id="longitude"></span></li> <li><span id="altitude"></span></li> <li><span id="accuracy"></span></li> <li><span id="altitudeAccuracy"></span></li> <li><span id="heading"></span></li> <li><span id="speed"></span></li> <li><span id="timestamp"></span></li> </ul> <!-- Google マップ 表示領域 --> <div id="map"> </div> </body> </html>
5行目でGoogle Maps API を使用するためのライブラリを読み込んでいる。
次にCSS Googleマップを表示する領域の縦幅と横幅を指定しているだけ。
#map { height: 600px; width: 600px; }
最後にJavaScript
(function () { 'use strict'; var successCallBackFunction, errorCallBackFunction, option; /** * 測位成功時のコールバック関数 */ successCallBackFunction = function (position) { var myPosition, map, marker; myPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); map = new google.maps.Map(document.getElementById('map'), { zoom: 14, center: myPosition, scrollwheel: false, mapTypeId: google.maps.MapTypeId.ROADMAP }); marker = new google.maps.Marker({ position: myPosition, map: map }); document.getElementById('latitude').textContent = ('緯度: ' + position.coords.latitude); document.getElementById('longitude').textContent = ('経度: ' + position.coords.longitude); document.getElementById('altitude').textContent = ('高度: ' + position.coords.altitude); document.getElementById('accuracy').textContent = ('緯度/高度の精度: ' + position.coords.accuracy); document.getElementById('altitudeAccuracy').textContent = ('高度の精度: ' + position.coords.altitudeAccuracy); document.getElementById('heading').textContent = ('方角: ' + position.coords.heading); document.getElementById('speed').textContent = ('速度: ' + position.coords.speed); document.getElementById('timestamp').textContent = ('測位が成功した時刻: ' + position.timestamp); }; /** * 位置情報取得失敗時のコールバック関数 */ errorCallBackFunction = function (positionError) { alert(positionError.code + ': ' + positionError.message); }; option = { enableHighAccuracy: true, // GPS を使用して正確さを増すかどうか true: GPSを使用する false: GPSを使用しない maximumAge: 0, // キャッシュを保持するミリ秒 timeout: 30000 // タイムアウトミリ秒 指定した時間内にデータを取得できない場合タイムアウトエラーを発生させる }; /** * HTML読み込み終了時の処理 */ window.addEventListener('load', function () { // Geolocation API 使用可/不可 のチェック if (!navigator.geolocation) { alert('Geolocation API 使用不可'); return; } document.getElementById('get_position_button').addEventListener('click', function () { navigator.geolocation.getCurrentPosition(successCallBackFunction, errorCallBackFunction, option); }, false); }, false); }());
以下の部分でボタンを押した際の処理を定義している、
document.getElementById('get_position_button').addEventListener('click', function () { navigator.geolocation.getCurrentPosition(successCallBackFunction, errorCallBackFunction, option); }, false);
navigator.geolocation.getCurrentPosition() が現在地を取得するメソッド。 ちなみに、一定間隔おきに現在地を取得するメソッドは watchPosition() メソッド。
引数では、左から順番に、現在地の測定成功時のコールバック関数、エラー時のコールバック関数、オプションを渡している。
コールバック関数（ここでは successCallBackFunction ）内で Google Map API を使用してマップを表示したり、各DOMに緯度 経度などを表示している。
Java EE (JAX-RS) + JavaScript (Backbone.js) でクロスオリジン通信する方法
クライアント側とサーバサイドとで異なるオリジン(プロトコル+ドメイン+ポート番号)間での通信方法メモ
今回の方針
jsonp を使用するやり方もあるが、今回は XMLHttpRequest Level2 で可能となった Cross-Origin Resource Sharing という仕組みを使用する。
具体的に何をどうするのか
Wikipedia の XMLHttpRequest のクロスドメインについての記述によると…
Access-Control-Allow-Origin: * をサーバサイドから返すレスポンスのヘッダに追加してやればいけるらしい。
実際にヘッダに Access-Control-Allow-Origin: * を入れる
ヘッダに Access-Control-Allow-Origin: * を追加する処理を書いていく。 サーバーサイドには Java EE の JAX-RS の使用する。
package foo.bar.jot_down.resources; import javax.ws.rs.GET; import javax.ws.rs.Path; import javax.ws.rs.Produces; import javax.ws.rs.core.MediaType; import javax.ws.rs.core.Response; import javax.ws.rs.core.Response.ResponseBuilder; import javax.ws.rs.core.Response.Status; import foo.bar.jot_down.data.SampleData; @Path("sample.json") public class Sample { @GET @Produces( MediaType.APPLICATION_JSON + "; charset=UTF-8" ) public Response getIt() { SampleData data = new SampleData(); data.setValue( "ほげほげ" ); ResponseBuilder responseBuilder = Response.status( Status.OK ); responseBuilder.header( "Access-Control-Allow-Origin", "*" ); responseBuilder.entity( data ); Response response = responseBuilder.build(); return response; } }
クライアントサイドも実装する
クライアントサイドは JavaScript フレームワークに Backbone を使用する想定。 以下のような model を作成して fetch() する。
module.exports = (function() { 'use strict'; var $ = require('jquery'); var _ = require('underscore'); var Backbone = require('backbone'); Backbone.$ = $; return Backbone.Model.extend({ url: 'http://localhost:8080/jot_down2/resources/sample.json', parse: function (response) { alert( response.value ); return response; } }); }());
実際に通信できているか確認する
200 OK が帰ってきているし、ヘッダに Access-Control-Allow-Origin: * が追加されていることもある。
何が嬉しいか
たぶん、今後デスクトップアプリは Electron とかで HTML CSS JavaScript 等のWeb の技術を使って作る手法が主流になる（と個人的には楽だな）と思っていて、その場合 サーバーサイドはクロスオリジン通信を考慮したAPIを作成する機会が出てくると思う。 で、とりあえず今回は Javaでそれができたからめでたしめでたし。
Swift での Hello world でいきなりつまづいた話
参考書に書いてある通り 以下のように書いたら 『'println' has been renamed to 'print'』と出て実行できなかった。
import UIKit let str = "Hello World!" println(str)
どうも Swift 2 で println が print に統一されたってことなのかな？ println を print に直したら実行できた。こんにちは世界。
import UIKit let str = "Hello World!" print(str)
ファイルの読み込みを Java SE7 から追加された try-with-resources文 を使って書き直す
Java SE7 から追加された try-with-resources文 の使い方を、SE6 以前の書き方との比較も含めてメモっとく。 普段の業務では SE6 しか使ってないから、資格の勉強で1度覚えても忘れちゃうんよな。 （サンプルのソースは Java SE6 以前の方も SE7 以降の try-with-resources文使用ヴァージョンも テキストファイル「test.txt」の内容をすべて出力するという物 ）
まず、Java SE6 以前での書き方。 ポイントは finally 句で close() すること。 また、その際に BufferedReader のインスタンスが null である場合を考慮して if で処理を分岐すること。 これしとかないと NullPointerException が発生してしまう。
public static void main( String[] args ) {
BufferedReader br = null;
try {
br = new BufferedReader( new FileReader( "./test.txt" ) );
String text;
while ( (text = br.readLine()) != null ) {
System.out.println( text );
}
} catch ( IOException e ) {
e.printStackTrace();
} finally {
if ( br != null ) {
try {
br.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
で、Java SE7 から追加された try-with-resources文 を使用したヴァージョン。 見た目での一番の違いは
try の後いきなり () 小かっこが登場しているところ。 この中かっこの中には、 ・java.lang.AutoCloseable ・java.io.Closeable のどちらかのインタフェースの実装クラスのリソースの生成処理を書く。
ここ、Oracle 認定 Java Programmer SE7 GOLD で必ず試験に出ます。（個人の感想です。）
また、この小かっこの中では複数のリソースの生成処理を書くこともできる。（ここに関してはまた今度書く。） で、小かっこの中に生成したリソースは自動的に close() が呼ばれ、解放される。
次に、なんやこれ？ってところは finnaly 句でやってる
e.getSuppressed();
getSuppressed() は Java SE7 で Throwable クラスに追加されたメソッドで、抑制された例外の配列を取得するメソッドであり、ここれは、自動的に呼び出された close() メソッド実行中に発生した例外を取得している。
Java SE6 以前のソースと比較すると、それまで finnaly 句でやっていた close するための分岐やら何やらが無くなってすっきりしている気がする。 自前で書かなきゃいけない内容があると、それだけいらんミスする可能性が増えるしね。
public static void main ( String[] args ) {
try ( BufferedReader br = new BufferedReader( new FileReader("./text.txt") ); ) {
String text;
while ( (text = br.readLine()) != null ) {
System.out.println( text );
}
} catch ( IOException e ) {
e.printStackTrace();
Throwable[] suppressedArr = e.getSuppressed();
for ( Throwable throwable : suppressedArr ) {
throwable.printStackTrace();
}
}
}
