6月21日 -引き続きHTMLプロフェッショナル認定試験について学ぶ-
１．今日の目標
HTML5プロフェッショナル認定試験の勉強を進める
２．結果・感想
急用にてサンプル問題できなかったため明日取り組む予定。twitterにてこういう話があった。「解いた問題をA分かる、Bなんとなく分かる、C分からないに分類する。そうすると自分の理解してない部分が分かるから全てをAに分類できるまで繰り返す。」なるほどなと納得した。その方式、使わせてもらって頑張ろう。資格は出来るものなら来月中には取得したいと考えている。問題集の難易度を確認して試験日を決めようと思う。
３．学んだことの書き出し
canvas要素の特徴について
canvas要素はJavaScriptを使ってブラウザに描画できる。canvas要素内はブラウザがcanvas要素に対応していない場合に表示される。未対応ブラウザにcanvas未対応などの注釈をつけるとユーザーに対して親切。canvas要素での描画はピクセルベースとなり、デフォルトの大きさは横300px、縦150px。
canvas要素で線を描くにはbeginPath();でpath(軌跡)を始めると宣言する。そして描画開始座標をmoveTo(x軸,y軸)で指定し、x軸は右に向かって、y軸は下に向かって数値が増えていく。lineTo(x軸,y軸)でどこまでpathを引くかを指定する。最後にstroke();で軌跡を描画にして線が描ける。
他に2dで描画できるものは以下に参考記事あり。
簡単な描画でも何行かのコードが必要で、複雑化すればするほどコード量が増える。それを解決するのが処理や機能を部品化してまとめたもので、ライブラリと呼ばれる。
canvasのライブラリ一覧は以下。
EASELJS
CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5
three.js
three.js – Javascript 3D library
jThree
SVG(scalable Vector Graphics)について
SVGとはcanvas要素のピクセルベースではなく、どれだけ拡大・縮小しても画像が荒れないベクターベースのぎょうが方法。SVGはHTML5で勧告された要素ではなくSVGで勧告された要素。SVGはCSSをサポートしており、HTML5の要素と同じようにsvg要素も大きさを指定できる。chromeではデフォルト値はcanvasと同値。
SVGの基本的な要素であるline要素で線を描くには
<line x1="線の始まりのx座標" y1="y座標" x2="線の終わりのx座標” y2="y座標" stroke="線の色” />と書く。line要素は空要素で終了タグがないが、要素の最後に/を入れる。HTML5の空要素には/は不要だが、SVGはXMLという文章構造のためHTML5とは違う文書ルールになる。SVGはフォントにも活用できるが、ブラウザごとのサポートが統一されていないので使用時には注意が必要。
Sketch3を使ったSVGデータのエクスポートについて
ベクターデータを扱うソフトウェアとしてSketch3を使ったSVGデータをエクスポートするには、グラフィックを描いてエクスポートする時にSVGを選択することで可能。他にもadobe社のillustratorなどがある。
https://html5exam.jp/measures/dojo_1_06.html
FileAPIとjQueryで作れるフォトギャラリーについて
FILEAPIはローカルデータをブラウザであつかえるようにする技術のこと。テキストや画像のようなバイナリデータを扱える。ローカルデータとはユーザーのコンピュータにあるデータのことを指す。
jQueryについて
jQueryとはJavaScriptのライブラリのこと。
からjQueryライブラリをダウンロードできる。ライブラリのバージョンは1系と2系があり、サポートしているブラウザの種類でバージョンが分かれている。バージョンによって提供されているAPIに違いがある場合もあるので注意が必要。
1系はInternet Explorer8をサポート
2系はInternet Explorer8は非サポート
Internet Explorer8は提供元のMicrosoftがサポートを終了してユーザーは減る見込み。Google AnalyticsなどでWebサイトのユーザーのブラウザを調べた上で判断をおすすめ。
jsファイルを参照する場所がhead要素内の場合、jsファイルの先頭におまじないとよく言われるコードを書く。
$(function(){処理});
これでhtmlファイルが読み込まれてから処理をすることになる。JavaScriptの役割は振る舞いのため、振る舞う対象であるhtmlを先に読み込まないと振る舞う対象に対して処理ができないのでこのプロセスが必要となる。bodyタグ終了の直前でjsファイルを読み込む場合はおまじないは不要。dragoverやdropなどは状態や挙動を意味するイベントと呼ぶ。
Objectとは{プロパティ:値,プロパティ:値,...}というデータを格納する型のこと。この値には数字や文字列、Objectなど様々なデータの型が入る。Console.log()とはChromeのデベロッパーツールのConsoleに情報を表示させるための命令。通常は画像ファイルをブラウザにdropすると画像のみブラウザに表示されてしまう。このブラウザの機能を働かせないようにするためにe.preventDefault();を記述する。これはdragoverとdropどちらにも必要な処理になる。
https://html5exam.jp/measures/dojo_1_07.html
ドラッグした画像の読み込みについて
FileReader APIを使ってユーザーのコンピュータ内にあるファイルを読み込めるようにする。new演算子でObjectを作りreaderというインスタンス(実体)を生成する。インスタンスを作成することによって処理・実行できる状態になる。そのためにnew演算子が使われる。ドロップした画像ファイルのデータはイベントのe.originalEvent.dataTransfer.filesに配列として格納される。そのデータをreadAsDataURL()で読み込む。その読み込み処理が終わるとreaderのresultプロパティにはbase64エンコーディングされた文字列が格納されるのでそのデータを画像の表示に活用する。
append():セレクトした要素の内側の最後に引数内のコードを追加する
attr():セレクトした要素に属性と属性値を設定したり、属性値を取得することができる。サムネイル画像をクリックして大きな画像を表示させるにはクリックイベントをトリガーとして画像を表示させる。その場合on()を利用するがon()の書き方は複数あり、場合によって使い分けができるといい。
add():セレクタを追加する
https://html5exam.jp/measures/dojo_1_08.html
マルチデバイス対応について
モバイルフレンドリーとはモバイルにはモバイルに適したサイトを表示し利便性を上げるための基準。モバイルフレンドリー対応していると検索結果に「スマホ対応」と記載される。モバイルフレンドリーテストでスマホ対応しているかどうか調べると、スマホ対応できていない場合にどこが悪いかを教えてくれる。
モバイルファーストとは最初からモバイルユーザーのことを考えてWebサイトを作ろうという考え方。単に表示をスマホ用に体裁を整えるだけでなく、情報設計やコンテンツなど様々なことをモバイルで使用する前提で考える。
マルチデバイスへの対応方法
マルチデバイス対応するために2つの方法がある。1つはダイナミックサービング、もう1つはレスポンシブWebデザイン。ダイナミックサービングはWebサイト利用者のユーザーエージェントを基準に判断して1つのURLでデスクトップ・ラップトップ用のサイトやタブレット用のサイト、スマートフォン用のサイトの表示を切り替える方法。それぞれの端末の利用者に最適な表示やコンテンツを考えることができる。デメリットとしてそれぞれの表示ごとでWebサイトを管理しないといけなくなるのでサイトの修正の手間が増えるなどがある。レスポンシブデザインは端末ごとで表示を考えるのではなく、どのようなブラウザの幅でもワンソースでWebサイトを最適に表示させるという方法。ワンソースなので基本的に修正などが発生した場合、一度で済む。場合によってはWebデザインに制約が出ることがある。レスポンシブWebデザインはフルスクラッチのコーディング以外にも、フレームワークというすでに作られた枠組みを使うことで効率よく制作することができる。フルスクラッチとは既存のフレームワークなどに頼らず1からコードを書いていくこと。
- Bootstrap
グリッドシステムだけでなく、ハンバーガーメニューなどのモバイルサイトでよく使用される機能は実装されていて、ひょうやボタンなどのCSSも予め用意されている。目的に応じてクラス名を追加するなど作業が簡単かつ効率的に進めることができる。
- Responsive Grid System
グリッドシステムだけに機能を絞ったフレームワーク。導入の敷居が低く軽量なため、グリッドシステムだけあればいい場合に適している。
UIについて
UIとはユーザーインターフェースの略でユーザーが操作をする対象(リンクボタンやコンテンツのレイアウトなど)のこと。マウスで操作するデスクトップやラップトップPCに対して、指で操作するタブレットやスマホには指で操作するという前提でボタンのを大きくしたり配置を高くしてボタンを押しやすくするなどの工夫が必要。単純にデスクトップやラップトップ向けのWebサイトの体裁を整えるだけではモバイルユーザーを満足させることはできない。
モバイル端末の通信とパフォーマンス
有線やwifiで通信するデスクトップやラップトップに対してモバイル端末はキャリアが用意した電波を利用することが多い。表示速度が遅いとユーザーの離脱などが起こるので表示速度が遅くならないように工夫する必要がある。例は以下。パフォーマンスの改善点を調べられるWebサービスもある。
- 画像をあまり使わず、画像を最適化する
- CSSやJavaScriptなどのファイルへの参照数を減らす
- パフォーマンスへの影響が少ないコードを書く
- サーバのチューニング
モバイルでの表示速度を高速化する技術としてAMP(Accelerated Mobile pages)がある。AMPとはモバイル端末のレンダリングを早くするためのプロジェクト。
AMP - a web component framework to easily create user-first web experiences - amp.dev(AMP公式サイト)
https://html5exam.jp/measures/dojo_1_10.html(参考サイト)
オフライン対応について
オフライン対応はユーザーがシームレスにWebを体験できるので利用頻度も高まり、Webサービス自体への信頼度の向上にもつながる。サービスを提供する側は設定したKPI(ビジネスなどの目標達成のための指標のこと。)への貢献にもなる。これを実現する技術としてService WorkerというAPIが注目されている。
Service WorkerとはWebページとは別にバックグラウンドで実行するJavaScriptで、ブラウザ側に実装されるAPI。Webサーバーのキャッシュを保持し、ブラウザがWebサーバーに接続することなくオフラインでもWebページを表示することができる。Proxy(代理)サーバーの役割をする。Webじょうで使うにはセキュリティ上の問題でHTTPS(WebサーバーとWebブラウザの間の暗号化された通信で、HTTPSを使うことでその通信間でのデータの盗み見や操作を防ぐことができる)サーバーが必要になる。(ローカルでも可)
W3Cが技術仕様を勧告するまでの4つのステップ
- Working Draft:技術仕様を定める検討の草案として発行されたもの
- Candidate Recommendation:技術的な要求を満たしていてWorking Draftよりも技術仕様として検討できる文書で、実装経験を収集するためにつくられたもの
- Proposed Recommendation:現実的な技術として検討されたレポートでW3Cの諮問委員会に意見を求めるもの
- W3C Recommendation:技術関係者に広く合意を得た仕様
オフライン対応以外で注目されているService Worker関連技術には、ネイティブアプリで可能なプッシュ通知がWebでも可能になる技術が注目されている。以下でGoogle Developersのプッシュ通知について学べるコンテンツがある。
Web Fundamentals | Google Developers
これで一通りのHTML5道場にある10回のコラムが終了した。一度サンプル問題を一通り解いてみる。サンプル問題の項目は以下。
４．明日の課題
明日明後日はPCが使えないのでモバイルにて勉強。HTMLプロフェッショナル認定試験の問題集本屋さんで探して、いいのあれば購入して勉強予定。
５．参考URL
６．今後やりたいこと・高めたいスキル・優先順位
HTML5プロフェッショナル認定資格の取得、基本情報技術者資格の取得、簿記2級の取得、ウェブカツ、WEBアプリケーション作成、PHP、説明図作成、30DAYSトライアル、JQuory、Wordpress、はてなブログの機能、アルゴリズム、SEO、PerfectPixel、線形代数(詳細ではなく全体の流れ)
