Smart Communication Design Company
ホーム > ナレッジ > Blog > フロントエンドBlog

フロントエンドBlog

Webのフロントエンドを構成する技術、特にHTMLやCSS、JavaScript、またそれらに関連する話題を扱うBlogです。

WebのARを先取りしよう!

UI開発者 加藤

今年も残すところあとわずかとなりました。2017年を個人的に振り返ってみるとPWAやAMPなどの話題が多く、パフォーマンスがより重視され始めた年だったのではないかと思います。また、日本でもスマートスピーカーが発売され、フロントエンドの技術を活用できる範囲が少しずつ広がってきています。そんな中、個人的に今後注目していきたいと思っている技術がARです。

ARといえばまず思い浮かぶのは「Pokemon Go」でしょうか。2016年にリリースされた直後に爆発的なヒットを生み出し、世にARを知らしめた立役者といっても過言ではありません。また、つい先日Magic Leapが「Magic Leap One」というデバイスを発表しました。Magic Leapは、数年前からAR技術に関する魅力的なプロモーション動画をいくつか発表していたものの、デバイスや技術の詳細は公開せず、長い間謎に包まれていました。2018年の初旬に開発者版が発売されるということで、非常に楽しみです。

一方で、WebコンテンツとしてのARも少しずつ動きを見せ始めています。Googleのプロジェクトである「ARCore」はそのうちの1つで、WebGLのフレームワークであるThree.js用のヘルパーライブラリという形で、three.ar.jsの開発が進められています。three.ar.jsはWebARonARKitがインストールされているiOS端末、もしくはWebARonARCoreがインストールされているAndroid端末でのみ実行することができます。どちらのアプリケーションもGoogle公式のもではなく、標準化される予定もないと記載されていますので、あくまでthree.ar.jsの実験レベルで使うのがよいとのことです。iPhone7がサポートされていたので、実際に試してみました。

WebARonARKitはいわゆるWebviewを表示するアプリケーションなのですが、カメラで取得した画像を背景として設定することにより、実世界の上にコンテンツが置かれているように見せています。iOS11以上であればブラウザだけで実現することも可能ですが、まだパフォーマンスが悪く実用的ではありません。

ぱっと思いつくWebARの使いどころは製品を取り扱うECサイトです。これまではブラウザ内で画像や3Dモデルを表示することしかできませんでしたが、ARを用いれば製品をブラウザの外に出すことができるようになります。ユーザーは現実世界に製品を置くことでサイズやフォルムなどの全体像をよりつかみやすくなります。

WebにおけるARはまだまだ実験段階ですが、将来ARが普及したときのことを見据えて、UIやUXを考えてみるのもいいかもしれません。2018年は注目していきたいと思います。

jQuery無しでイージングアニメーションを伴う機能をつくろう!その2(トグル編)

UI開発者 宇賀

jQueryを使わずにスムーズなアニメーションを実装しようというシリーズの第2弾です。

今回は様々なWebサイトで採用されているUIの1つ、ディスクロージャーウィジェット(いわゆるトグル)の実装方法を考えて見ます。

jQueryを使った例では「.slideToggle()」や「.slideDown()」「.slideUp()」などで実現されていることが多いでしょう。

HTMLの仕様でも、トグルのように情報の表示非表示を切り替えることができる要素が定義されていますので、今回はそんなdetails要素とsummary要素も活用していきたいと思います。

※ この記事は、以前執筆したjQuery無しでイージングアニメーションを伴う機能をつくろう!その1(イージングの紹介編)の続きです。
※ この記事は1つのタイトルと1つのコンテンツの関係性で完結し、タイトルが押下されるとコンテンツの表示非表示を切り替えるUIを「トグル」と呼称します。

details要素とsummary要素とは

次のサンプルでは、ただのdetails要素とsummary要素のサンプルを設置しています。

details要素は、子要素のsummary要素が押下されることでopen属性が付いたり外れたりします。details属性にopen属性が付いている場合、summary要素以外のコンテンツも表示されるという仕様です。

対応しているブラウザであれば、「タイトル(summary要素)」を押下することで「詳細テキスト」が表示されます。 JavaScript無しでトグルを実現する大変便利な要素ですが、対応していないブラウザでは開いた状態になっており、「タイトル」を押下しても何も起こらないでしょう。

<details>
<summary>タイトル</summary>

詳細テキスト詳細テキスト詳細テキスト詳細テキスト
</details>
details要素の実装サンプル
タイトル 詳細テキスト詳細テキスト詳細テキスト詳細テキスト

全文を読む

Google Chrome 64に搭載されたAudioWorkletとは?

UI開発者 泉口

Google Chrome 64へAudioWorkletが実験的機能として搭載されました。

AudioWorkletとは、Web Audio APIの仕様の一つでメインスレッドとは異なるワーカースレッドを使用してオーディオ直接生成、処理を行うインタフェースです。
仕様策定段階では名称がAudioWorkerでしたが、CSSに関連するPaintWorkletAnimationWorkletに伴い、メインスレッドに依存しない独立したAPIをWorkletと総称されるようになりました。

元々オーディオの直接的な処理はScriptProcessorNodeが定義されていましたが、ダブルバッファリングやメインスレッドで実行される事からのノイズの発生や発音までの遅延などいくつかの問題があり、AudioWorkletに置き換えられる形でScriptProcessorNodeは廃止予定になっています。

現状は実験的機能ため、chrome://flags/から「Experimental Web Platform features」を有効にする必要があります。

AudioWorkletの仕様についてはWeb Audio API - 2.32 The AudioWorklet Interfaceを、Google ChromeにおけるデモについてはAudioWorklet | Chrome WebAudio Samplesをご参照ください。

HTMLメールにカウントダウンを組み込む

UI開発者 郡司

HTMLメールは、「JavaScriptが使用できない」「CSSの対応状況がブラウザと比べて遅れている」などの理由からWebサイトと比べるとインタラクティブなコンテンツを作るのが難しいです。
それでも、コンバージョンを増やす取り組みとして、gifアニメーションや動画などを取り入れてユーザーに注意を向けてもらう施策などがあります。

今年も残りわずかとなり、2018年のメールマーケティングのトレンドを予想している海外の記事を見ると2017年に引き続きインタラクティブなHTMLメールが注目されています。
今回はインタラクティブなコンテンツの作成が難しいHTMLメールにおいても、幅広い閲覧環境で動作する「カウントダウン」の実装について触れたいと思います。

全文を読む

AMP HTMLで作るオートコンプリート機能

UI開発者 木村

AMP Projectは先月「The Total Economic Impact™ of AMP across publishers and e-commerce」という記事を公開しました。記事の中では、ECサイトがAMP対応をすることで今後次のような効果が得られるだろうと予測されています。

AMP対応をする際には、既存のページで実装されている機能がAMP HTMLの仕様上再現できない可能性があるという懸念点があります。AMP HTMLでインタラクティブな機能を実装する際には、多くの場合専用のコンポーネントを用いて実装しますが、専用のコンポーネントが存在しない場合は、複数のコンポーネントの性質を組み合わせることで機能を再現できることがあります。その一例として、ECサイトの検索フォームなどでよく使用されるオートコンプリート機能のサンプルを実装してみます。

全文を読む