2016-05-23 12:28
こんにちは、日暮です。
今回は最近巷で話題のAMPについて調べてみましたのでメモレベルに残しておきます。
AMPとは、Accelerated Mobile Pages（アクセラレイティッド モバイル ページ）の略で、モバイル環境でウェブページの表示を高速化するためのプロジェクトです。GoogleやTwitterが推進するプロジェクトになります。
2016年2月から本格スタートし、ニュースサイトを中心に少しずつ広がってきています。また、アメブロなどでもAMP対応が進んでいて、快適な閲覧をすることが可能となっています。
現在のところ、まだニュースサイトやブログなどに用途が限定されている感じですが、今後急激な広まりを見せると思われるので、調べてみました。
AMPの魅力は何と言ってもページの表示速度です。
AMPの仕様に沿ってサイトを構築すると、Googleのスマホ検索結果に表示されたAMPページが一瞬で表示されます。
ページの閲覧に対するストレスが非常に少ないので、もう少し一般的にAMPサイトという認識が広がれば、気軽に閲覧してくれるユーザーが増えるかもしれません。
また、Googleの検索結果ページで、「トップニュース」というエリアが表示されます。AMP対応のページはここに表示されます。
例えば、朝日新聞や産経新聞は現在AMP対応をしていて、読売新聞はまだAMP対応をしていません。ここで、「新聞」とGoogleで検索してみてください。
「トップニュース」エリアに朝日新聞や産経新聞の記事は出てきますが、読売新聞は出てきません。
競合他社に対抗するためにも、これだけでAMP対応をする1つの理由になるのではないでしょうか。
AMPはどのように高速な表示を実現しているのでしょうか？
Googleの検索結果画面のHTMLを見てみたところ、「トップニュース」エリアが表示された際に既に1つ目のAMPページはiframeで読み込まれています。
ユーザーがリンクをタップすると、ページ遷移するのではなく、検索結果画面内のiframeでAMPページを表示しています。
AMPページはCDNにキャッシュされていて、これらの仕組みで瞬時のページ表示を実現しているようです。
AMPの実装は技術的には、さほど難しいことはありません
AMPの書式に沿ってHTMLを記述し、そのHTMLにschema.orgで構造化マークアップをするします。
全体としては、記事のHTMLとは別にもう1つAMP用のHTMLを作成し、metaタグで互いにリンクをはっておく感じです。（AMP用のHTMLのみ作成することも可能です。）
以下のサイトで分かりやすく実装方法が紹介されていたので、参考にしてください。
AMPとは～対応HTMLを作ってみてわかったこと～ – Webマーケティングのブレインネット
現在は「ニュース」と「ブログ記事」などに用途が限定されていそうですが、今後は他の記事などにも対応していくのではないでしょうか。
先日、ZOZOTOWNもAMP対応をしたようですが、現在ではトップニュースエリアから姿を消しています。
これは、ZOZOTOWNが初期はschema.orgのページタイプを「記事」に設定していましたが、現在schema.orgの記述がないことが原因だと思われます。
ZOZOTOWNのページでは、実際は商品の紹介・売買のページのため、正確にはschema.orgのページタイプを「商品」に設定することになります。
（GoogleのトップニュースエリアにAMPページを表示するためには「記事」、「ニュース」、「ブログ記事」のいずれかに設定する必要があります）
このことがGoogleから指摘されたのか、ZOZOTOWNが自主的に直したのかは定かではありませんが、現状はschema.org自体がなくなっています。
個人的には商品のページが素早く見ることができるというのは非常に面白い試みだと思ったのですが、まだまだECサイトにAMP導入は早いということなのでしょうか・・・
いずれにしろAMPが今後広まっていくのはそう遅くはないと思います。
まだまだAMPが広まっていない今が、AMP導入の絶好の機会なのではないでしょうか。
2016-04-20 03:02
こんばんは、日暮です。今回はQRコード生成用のJSライブラリを試してみました。
仕事でWebサイトを作っていることもあり、テストサイトのアドレスをQRコードにしてスマホで読み込むということが度々あります。以前はMacのDashboardのウィジェットでやっていたのですが、OSをアップデートしたらDashboardが消えてしまったので、いいソフトがないか探していました。（後で気がついたのですが、Dashboardは普通にアプリケーションに入っているのですね・・・）
あまり気に入ったアプリが無かったので、どうせなら自分で作ってみようということで、いくつかJSのライブラリを探してみました。
すると、jQuery.qrcodeというライブラリが見つかりました。
ライブラリ選定のポイントは、QRコードの生成時に通信が発生しないことと、カスタマイズ性です。テストサイトということもあり、できるだけ外部に情報を送りたくないということがあります。また、今後QRコードを表示したいということがあるかもしれないので、デザインを色々いじれることもこのライブラリを選んだポイントです。
実装は非常に簡単でした。
ライブラリを読み込んで、数行のスクリプトを記述するだけでQRコードを表示することができました。
オプションなども結構細かくでき、基本的にはこのライブラリだけで大体のことはできると思います。
QRコード生成時にオプションを設定することで、QRコードを細かく設定することが可能です。
オプションとしては、下記のようなものがありました。
試しに自分で使いそうなものでデモを作ってみました。よかったら使ってみてください！
QRコードジェネレーター
QRコードが非常に簡単に作れることが分かったので、今度何かに提案してみたいと思います。
レッツQRライフ♪
2016-03-17 08:30
仕事でJavaScriptの組み込みなども行っているのですが、画像を拡大させる様な見せ方を求められることが多々あります。
簡単な方法では、画像をblankで開くとかもあるのですが、あまりスマートではないですね。別途作っても良いのですが、PCやスマホ、タブレットなどと考えていくと、なかなか大変な話です。
「ここまで要望のある機能なら」と言うことで調べてみたら凄いのが出てきましたので紹介したいと思います。
ページ内の設定された画像をタップすると、かっこいいアニメーションで画像が拡大されます。更に、拡大後の画像をスワイプすると、次の画像に移動できます。
他にも画像の拡大縮小やキャプション、シェアなど機能などもあります。
実際に組み込んでみると、非常に軽快な動作です。若干古めのiPhoneやAndroidでも問題なく動作します。
また、PCでも非常に綺麗に表示をしてくれるので、今後はこのライブラリを重宝することになりそうです。
こちらでは実際の組み込み方などについての説明は省略します。
以下のサイトが非常にわかりやすく解説をしてくれていたので、そちらを紹介させて頂きます。
PhotoSwipeの使い方！Light Boxの決定版を導入しよう！
スマートフォンが普及してから、Webサイトでもアプリライクな動作を求められることが非常に多くなってきました。
フロントエンドでもやることが非常に多くなってきているので、便利なライブラリなどを上手く使いこなしていくことも大事だと感じています。
また、ライブラリを使う際には色々と気をつける点もあるので確認は忘れないようにしましょう。
ライセンスや動作環境、etc・・・
ときにはライブラリの中身を見てみるなども、とても勉強になるのでオススメです。
またいいライブラリがありましたらこちらで紹介させて頂きます。
