[技術]Wordcamp Tokyo 2016に行ってきました

気がついたら1ヶ月以上も前の出来事ですが
9月の17日、Wordpress のイベントである
「Wordcamp Tokyo 2016」に行ってきました。

Wordcamp Tokyoとは

Wordcamp Tokyoは、年に1回開催されており
Wordpressに関連した技術や様々な情報を
いろいろなジャンルスピーカーの方がセッション形式で
お話して頂くWordpress関連の大きなイベントです。

より詳しい内容については、以下のリンクを
参照ください。

Wordcamp Tokyo 2016

聴講したセッション

私が実際に聴講したセッションのうち気になったもの
興味深いなぁと感じたものについて書いてみます。

WordPress REST APIについて

APIとは「Application Program Interface」の略称です。

簡単に言えば、外部のシステムから特定の機能(プログラム)を
呼び出すための手続きを定義したインタフェース群となります。
Wikipediaのリンク:APIとは

例をあげれば、Facebookへ外部のリンクをシェアするという行為。
あまり意識してはいないかもですが、これもFacebookに対して
リンクをシェアして投稿するというFacebook側が提供している
APIが実行されることにより、自分のフィードに投稿が
行われている形になっています。

このAPIがWordpressにおいても提供されているという紹介でした。

これを使えば、Wordpressで書いた記事をWordpressが載っている
サーバではなく、別のサーバのシステムで記事を表示できたりと
Wordpressを使う幅が広がるなと感じました。

どう使うかは別として、少し触ってみようかなと思います。

Webページの表示速度の考え方について

Webページの表示高速化について聞きました。

ネットの回線が3G回線、LTE(4G)と発達したことにより
表示速度は随分早くなりました。

私、たまに、LTEの通信料制限で3G相当の速度に
なってしまうことがあるのですが、あまりの遅さに
スマホで検索をするのをやめてしまうくらいです。
※ 当時はそれでも早いと思っていたのだから不思議です

話を戻しますと、このページの表示速度ですが
世界標準基準値は

表示開始時間:0.5秒以内
→ページが表示され始めた時間
表示完了時間:2
→ユーザが操作可能になった時間

だそうで…
この結果に驚きを隠せませんでした。。。
ちなみに、日本国内の様々なWebサイトで
この基準をクリアしているところはないそうです。

この表示速度、そこまで重要視される1番の理由は

表示が遅いサイトは2度とアクセスされることがない

からだそうです。
確かに自分に置き換えて考えるとそうだなぁと思います。
表示が遅いと、もう見なくていいかなと思いますし。

上記、いろいろと書きましたが、このセッションで
お話された方はこんな興味深いことも話してました。

WebページあたりのHTMLファイルのサイズが
200KBを超えるとLTEでは3秒以内での表示はできない。
そのため、高速化をさせるためには
「どれだけ早くできるか」
ではなく
「どれだけ遅くなるのを許せるのか」
という風に切り替える必要がある。

※HTML(Hyper Text Markup Language)の略で
 Webページを表示するのに使用されている言語です

200KB。。。
スマホやデジカメで撮った写真を
1枚表示しようとしただけで余裕でオーバーしてしまいます。

この話を受け、ページの表示速度の改善(パフォーマンス)と
コンテンツの内容の充実は相反するものなのだと
感じずにはいられませんでした。

AMPによる検索の高速化について

AMPとは「Accelerated Mobile Pages」の略称です。

これは、Googleさんのプロジェクトの1つで
モバイル向けのWebページの表示速度を早くしてくれるものです。

これをモバイル向けのWebページに対応すると
Googleで検索した場合に、検索結果ページの上位に
優先的に表示が行われる形になります。
(Googleの検索順位には関係しない)

セッション内でデモを見せていただきましたが
表示がとても早くて驚いたのを覚えています。
また、それだけではなく、検索結果ページ上で
カルーセル表示(スライドショー表示)され
スワイプ動作により、別の記事を見ることが
できたりもしていました。
※ 画像がないので、説明しづらいのですが・・・・
※ 写真を取ればよかった。。。

Googleの検索順位とは無関係とはいえ
AMPに対応していると検索ページの上位に
表示されるので、Webサイトへの誘導をするには
有効な手段の1つだと感じました。

また、1つ前に書いたセッション内容にも
関連してきますが、ページの表示が早いので
Webページに訪れてくれた方が、表示が
遅いといった理由で見ることを断念することを
防ぐことができるのかなと感じました。

Webページのアクセシビリティについて

WordPressというよりは
Webサイト全般的な内容になるのですが

「Webページのアクセシビリティ」

について話を聞きました。

アクセシビリティ(accessibility)とは高齢者・障害者を含む誰もが
様々な製品や建物やサービスなどを支障なく利用できるかどうか
あるいはその度合いを表す言葉です。
Webアクセシビリティとは、主に高齢者や障害者など身体に障害や
不自由のあるWeb利用者に配慮したホームページなどの
Webサービスを提供し、アクセスした誰もが容易に情報を
共有できる状態にあることをいいます。

参照:日本WEBアクセシビリティ協会

このWebページのアクセシビリティ、まだ私が
会社員として働いていた数年前になるのですが
ある企業と連携して、Webページのアクセシビリティを
診断するというサービス(もうなくなりましたが)を
作ったということもあり、言葉を聞くと興味を
惹かれてしまいます。

セッションの内容では、以下の内容を話されていました。
・アクセシビリティの規格について
日本のWebアクセシビリティはJIS規格として
「JIS X 8341:2016」というものがあります。

それとは別にW3Cと呼ばれる国際的な営利団体が
定めている基準「WCAG2.0」というものもあります。
※ W3C(World Wide Web Consortium)の略です

数年前までは、JIS規格は国際基準から考えると
内容的にもレベル的にも遅れていたのですが
話を聞いた2016年時点では、WCAG2.0 と同等に
なったとのことでした。
日本においても、Webアクセシビリティが
重要視されているのだと思わずにいられません。

・どんな方向けに必要なのか
それでは、このWebアクセシビリティ
どのような方向けに必要なのでしょうか。

上記のサービスを作っていた頃は、障害を持たれた方が
Webページを見やすくなるようにということで
ターゲットは「障害を持たれた方」に重きがおかれて
いたように感じました。

しかし、PCだけではなく、スマホやタブレットといった
様々なマルチデバイスでのWebの閲覧が容易になり
モバイルフレンドリーやモバイルファーストと言われる
現在においては、障害を持たれた方だけではなく
セッションの中でも話されておりましたが

すべての人のためにWebサイトを見やすくする。
そのことを目的として、Webアクセシビリティを
適用することが大切

これについては私も納得でした。
たまに、すごく見にくいなぁと思うページを
見かけると「う~ん」と思ってしまいます。

その反面、どちらかというと作る側に近いところに
いるので、そのあたりのことを気にかけていかなくては
ならないなぁとも感じました。
Web制作は専門ではないので大したことはできませんが…

・どのように対策すればいいのか
では、どのように対策すればよいのか。
セッション内ではいくつか例を挙げて説明されてました。

Web制作に関わる技術的なところは割愛させていただくとして
簡単に列挙します。

○読みやすさ(文字編)
 ・行間を1.5文字以上あける
 ・ページの横スクロールはさせない
 ・均等割り付けは行わない
  ※ Wordのフォント設定にある文字間の設定の1つです

○読みやすさ(コンテンツ編)
 ・空スペースに気を付ける
  文字間の不必要な空白のことです
 ・別ページに誘導するためのボタンのサイズを大きめにする
 ・一般的でない用語や略号は説明を入れる
 ・ページのコントラスト比に気を付ける
  コントラスト比もW3Cの規格で規定されています
 ・点滅する文字はできるだけ控える
  使用する場合は、5秒以内で停止するようにする

といったことを挙げておりました。
WCAG2.0のガイドラインを見るともっと細かなことが
書かれています。
興味のある方は、以下リンクを見てみるといいと思います。
WCAG2.0ガイドライン

まとめ

いろいろなセッションを聞いてきました。

WordPressに関わるセッションだけかと思っていたのですが
そんなことはなく、ページの高速化、難しいのでここには
書いていませんがページのセキュリティのことだったりと
Webサイトに関わることもあったりと楽しいひと時でした。

来年も予定をつけて参加したいと思います。