2016-02-05

HTML5プロフェッショナル認定試験レベル2受験の際に俺が参考にした本と感想とか

今回は半年くらい前に受験した HTML5 プロフェッショナル認定試験 Level2 について。

レベル1については前回の記事で書いているので、そっちで。

jbelltree.hatenablog.com

結果

1発合格でした。が、正答率は、たしか 75% くらいで、わりとギリギリ合格だったはず。時間的には余裕をもって見直す時間もあったと思う。

試験内容

「HTML5プロフェッショナル」とか言ってるけど、レベル2の試験問題は、ほぼほぼ JavaScript です。 HTML5で追加されたAPIの使用方法の問題が大半で、レベル1の問題のような、HTMLタグの書き方とか順番とかの問題はほとんど出題されないです。詳しくは、公式の出題範囲を。

html5exam.jp

受験対策として使用した参考書

まずメインで使用した参考書レベル1では紙の書籍を購入したが、レベル2ではkindle版を使用。 amazon の評価は低いけど、自分はこの本をメインで使用して合格しました。この本の最後にある模擬試験を中心に勉強した。

www.amazon.co.jp

もう一冊、こちらは紙の書籍を購入。ただし、内容的には上の本の方が詳しく書かれている気がする。 amazon のレビューにもある通り、かなーり簡単に、さらっとJavaScriptを解説しています。こちらは各章ごとに演習問題がついている。が、解説もあっさり気味。

www.amazon.co.jp

参考にしたWebサイト

レベル1の時と同様、公式サイトにも例題があります。この例題も2、3回繰り返し解きました。これから受験する人は、この問題も絶対やっておくべき。

html5exam.jp

あとは、出題範囲に含まれる SVG 関連で、以下のサイトの SVG についてのページも参考になった。あとイラストが可愛い。（左側メニューの「SVG(Scalable Vector Graphics)」→「SVGってなあに?」）

たのしいXML: XML/XHTML入門ページです

感想とか

自分は元々 JavaScript が好きな人間なので、勉強していて楽しかったです。ぶっちゃけ、Geolocation API とか試験対策の勉強しなければ、ずっと知らないままだったし。

あと、結構ちゃんとJavaScriptの言語仕様とかも出題範囲に含まれていて、

// 以下の処理でそれぞれ何が出力されるか答えろ

console.log( false == 0 );

console.log( false === 0 );

みたいな問題も出題されるので、(ちなみに上は true が出力されて、下は false が出力される。)細かいところをおろそかにしていると、わりとしねるなーって思いました。

まぁ、なんか Web の技術が好きで、なんか資格とりたいなーって人には向いてる資格なのかなーって思いました。少なくとも俺は勉強になりました。まる。

2016-01-26

HTML5プロフェッショナル認定試験レベル1受験の際に俺が参考にした本と感想とか

HTML HTML5 資格試験

jBellTree鈴木です。

今回は１年くらい前に受験した HTML5 プロフェッショナル認定試験 Level1 について。 Level2 も取得済だけど、まずは Level1 の受験のレポートから。

結果

1発合格でした。正答率は、たしか 80% くらいだったと思います。

時間的には１回全て時終わるのには十分な時間だったと思いますが、全問見直す時間は無かったように思います。

問題の内容

参考書を隅から隅まで頭にたたきこんでおけば解けるような問題でした。ただし、１問だけ記述の問題があったように思います。どんな問題だったかは、すんませんわすれました。

あと、こんなん知らんわ！っていう問題で、

「iPhone で以下のタグを表示したときの見た目を選べ」

みたいな問題が出たのを覚えています。

使用した参考書

www.ntts.co.jp

そもそも俺が受験した時は、公認の参考書がコレしかなかった。 kindle 版も出ているが、当時の俺は「電子書籍なんかで勉強しても頭に入らねーよｗｗｗ」と思っていたので、紙の書籍を買いました。 Kindle版のリンクも一応貼っておきます。

www.amazon.co.jp

内容としては、amazon のレビューにある通り、とにかく試験範囲を網羅することを目的としている感じです。たしか本の最後の方に模擬試験１回分が収録されていました。

amazon のレビューでは評価がそれほど高くないようだけれど、自分はこの本のおかげで合格できたし、この本がなければ合格できなかったと思います。

参考にしたWebサイト

泣く子もだまる公式サイトで、例題を用意してくれています。自分は上記の参考書の問題と、以下の公式の例題を各3回くらい解き直してから受験しました。

html5exam.jp

あとたしか、参考書で分からなかったタグがあった時、↓のサイトも参考にしたように思います。

www.htmq.com

感想とか

ひたすら暗記するのが大変だったのを覚えています。ただし、 HTML5 で削除された要素 HTML5 で意味が変わった要素 HTML5 で追加された要素 CSS3 で使えるようになった機能などなど、体系的にまとめられているので、いままで、HTMLなんて適当にかけばいいんでしょ？みたいに思っている人は、目から鱗な内容だと思います。

あとこの記事が、これから HTML5 プロフェッショナル認定試験 Level1 を受験する人の参考になれば幸いです。

2016-01-18

Selector API の使い方

API JavaScript

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>

2016-01-16

Oracle SQL Developer のフォント/背景色を変更する方法

Database IDE Oracle

Oracle SQL Developer をインストールするたびに、

「フォント変えたいなー、背景色変えたいなー」

「あれ？どこから変更するんだ？」

ってなっていたので、変更手順をメモっとく。画面はMac版だけど、Windows版でも似たような手順で出来るはず。

1.設定画面までの行き方

「Oracle SQL Developer」 → 「Preferences」

f:id:jBellTree:20160116110539p:plain

2.背景色の変え方

2-1. 背景色だけの変え方

プリファレンス画面の左側メニュー → 「コードエディタ」 → 「PL/SQL構文の色指定」 → 「背景」

変更をしたらプリファレンス画面右下の「OK」ボタンを押す。

f:id:jBellTree:20160116110621p:plain

2-2. テーマ毎いっきに変える方法

今回記事を書きながら初めてこんな機能あるのを知った。 SQL Developer なかなかやるじゃねーか。

以下の手順でエディタ部分のテーマを変えられる。SQL Developer ではスキームって言うらしい。

プリファレンス画面の左側メニュー → 「コードエディタ」 → 「PL/SQL構文の色指定」 → 「スキーム」

変更をしたらプリファレンス画面右下の「OK」ボタンを押す。

f:id:jBellTree:20160116110638p:plain

3. フォントの変え方

フォントの変更も、背景色の変更と同様にプリファレンス画面から行える。

手順は以下のとおり。

プリファレンス画面の左側メニュー → 「コードエディタ」 → 「フォント」 → 「フォント名」

変更をしたらプリファレンス画面右下の「OK」ボタンを押す。

f:id:jBellTree:20160116110653p:plain

おわりに

まぁ、どんなに開発環境の見た目を美しても、既存のスパゲッティコードが変わるわけではないんだけどね…

2016-01-13

Geolocatoion APIで現在地を取得しGoogleマップに表示する方法

JavaScript API

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に緯度経度などを表示している。

2016-01-01

Java EE (JAX-RS) + JavaScript (Backbone.js) でクロスオリジン通信する方法

Java JavaScript

クライアント側とサーバサイドとで異なるオリジン(プロトコル+ドメイン+ポート番号)間での通信方法メモ

今回の方針

jsonp を使用するやり方もあるが、今回は XMLHttpRequest Level2 で可能となった Cross-Origin Resource Sharing という仕組みを使用する。

具体的に何をどうするのか

Wikipedia の XMLHttpRequest のクロスドメインについての記述によると…

XMLHttpRequest - Wikipedia

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;
        }

    });
}());

実際に通信できているか確認する

Chrome デベロッパーツールで確認してみた。

f:id:jBellTree:20160102000238p:plain

200 OK が帰ってきているし、ヘッダに Access-Control-Allow-Origin: * が追加されていることもある。

何が嬉しいか

たぶん、今後デスクトップアプリは Electron とかで HTML CSS JavaScript 等のWeb の技術を使って作る手法が主流になる（と個人的には楽だな）と思っていて、その場合サーバーサイドはクロスオリジン通信を考慮したAPIを作成する機会が出てくると思う。で、とりあえず今回は Javaでそれができたからめでたしめでたし。

2015-12-27

Swift での Hello world でいきなりつまづいた話

Swift

参考書に書いてある通り以下のように書いたら『'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)

うごく生ゴミプログラマの備忘録

うごく生ゴミ〜再臨〜

HTML5プロフェッショナル認定試験レベル2受験の際に俺が参考にした本と感想とか

結果

試験内容

受験対策として使用した参考書

参考にしたWebサイト

感想とか

HTML5プロフェッショナル認定試験レベル1受験の際に俺が参考にした本と感想とか

結果

問題の内容

使用した参考書

参考にしたWebサイト

感想とか

Selector API の使い方

Oracle SQL Developer のフォント/背景色を変更する方法

1.設定画面までの行き方

2.背景色の変え方

2-1. 背景色だけの変え方

2-2. テーマ毎いっきに変える方法

3. フォントの変え方

おわりに

Geolocatoion APIで現在地を取得しGoogleマップに表示する方法

Java EE (JAX-RS) + JavaScript (Backbone.js) でクロスオリジン通信する方法

クライアント側とサーバサイドとで異なるオリジン(プロトコル+ドメイン+ポート番号)間での通信方法メモ

今回の方針

具体的に何をどうするのか

実際にヘッダに Access-Control-Allow-Origin: * を入れる

クライアントサイドも実装する

実際に通信できているか確認する

何が嬉しいか

Swift での Hello world でいきなりつまづいた話