知っておくべき3つの新しいJavaScript API

SitePointのAurelio De Rosaによる「フォローしたい3つの新しいJavaScript API」の翻訳。



あなたが通常のSitePointリーダーであり、おそらく私のメモを読んでいるのであれば、新しいHTML5およびJavaScript APIに関する多くの記事を書いたことを知っているでしょう。 これまで、ポリフィルの使用など、今すぐ使用できるAPIに関するメモを書きました。



今日、私はこのルールを破り、開発の初期段階でいくつかのAPIを説明することにしました。 これらの技術は非常に新しいため、3分の2がほんの数日前に導入されました。 したがって、まだ使用できません。 ただし、それらが何をするかに興味がある場合は、仕様を読み、改善したい内容を書くことができます。



式なしで始めましょう！

Web Alarms API

Web Alarms APIは、ユーザーのデバイスの通知設定へのアクセスを提供します。これを使用して、通知を構成したり、特定の時間に特定のアプリケーションを起動したりできます。 このAPIを使用する典型的な例は、アラーム、カレンダー、または特定の時間に特定のアクションを実行する他のアプリケーションの起動です。



昨年以来、このAPIはW3C（W3C Working Draft）のアウトラインステージにあります。 そのため、このテクノロジーはW3C勧告（W3C勧告）の段階にすぎません。 このAPIは、 window.navigator



オブジェクトのalarms



プロパティを介してアクセスできます。 alarms



オブジェクトには3つのメソッドがあります。

• getAll()
  
  
  
  ：このデバイス上のすべての通知のリストをAlarm
  
  
  
  オブジェクトの配列として返します。
• add()
  
  
  
  ：指定された日付に新しい通知を登録し、 AlarmRequest
  
  
  
  タイプのオブジェクトを返します。
• remove()
  
  
  
  ：以前に追加された通知をその一意の識別子（アプリケーション内で一意remove()
  
  
  
  削除します。

これらのメソッドの使用方法を確認できるように、通知を作成する小さな例を追加しました（執筆時点では、このコードは最新のブラウザーでは機能しません）。

 var alarmId; var request = navigator.alarms.add( new Date("June 29, 2012 07:30:00"), "respectTimezone", ); request.onsuccess = function (e) { alarmId = e.target.result; }; request.onerror = function (e) { alert(e.target.error.name); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、この通知を削除する必要がある場合、これを実行できます。

 var request = navigator.alarms.remove(alarmId); request.onsuccess = function (e) { alert("alarm removed"); }; request.onerror = function (e) { alert(e.target.error.name); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Web Alarms APIの詳細については、 仕様をご覧ください。

プレゼンテーションAPI

プレゼンテーションAPIの目的は、プロジェクターや接続されたテレビなどの追加のディスプレイデバイスへのアクセスをWebアプリケーションに提供することです。 このAPIは、有線（HDMI、DVIなど）テクノロジーとワイヤレス（MiraCast、Chromecast、DLNA、AirPlay）テクノロジーの両方で機能します。 このAPIが行うことは、ページ上のスクリプトと追加のディスプレイ上のプレゼンテーションページ上のスクリプト間でメッセージを交換することだけです。



これらの仕様はW3C標準ではなく、標準化（W3C標準トラック）に沿っていないことを覚えておくことが重要です。 このAPIは、 window.navigator object



presentation



プロパティで使用できwindow.navigator object



。 このプロパティは、 requestSession()



メソッドと、2つのpresent



およびavailablechange



イベントをavailablechange



ます。 requestSession()



メソッドは、追加画面でプレゼンテーションセッションを開始および復元するために使用されます。 プレゼンテーションセッションオブジェクトを返します。 requestSession()



メソッドに渡されたURLによるコンテンツがロードされると、プレゼンテーション画面のページがpresent



イベントを受け取ります。 最後に、最初のモニターが接続されるか、最後の追加モニターが切断されると、 availablechange



イベントが発生します。



このAPIの使用例は、その仕様から取られています。

 <button disabled>Show</button> <script> var presentation = navigator.presentation, showButton = document.querySelector('button'); presentation.onavailablechange = function(e) { showButton.disabled = !e.available; showButton.onclick = show; }; function show() { var session = presentation.requestSession('http://example.org/'); session.onstatechange = function() { switch (session.state) { case 'connected': session.postMessage(/*...*/); session.onmessage = function() { /*...*/ }; break; case 'disconnected': console.log('Disconnected.'); break; } }; } </script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プレゼンテーションAPIについて詳しく知りたい場合は、そのドキュメントをご覧ください。

スタンバイAPI

スタンバイAPIを使用すると、デバイスのスリープ状態を制御できます。 このAPIを使用すると、デバイスが省電力モードに切り替わるのを防ぐことができます（画面のオフを含む）。 この機能は、一部のWebアプリケーションにとって重要です。 たとえば、スマートフォンにインストールされたWebブラウザーアプリケーションを使用して運転します。 スマートフォンと対話せず、スマートフォンの設定で省エネが設定されている場合、しばらくするとスマートフォンのディスプレイがオフになります。 ただし、このような場合、画面をオフにする必要はありません。 そのとき、このAPIが役に立ちます。



スタンバイAPIは、 wakeLock



オブジェクトのwakeLock



プロパティを介して利用できます。 このプロパティには2つのメソッドがあります。

• request
  
  
  
  ：デバイスを強制的に画面をオフにしません。
• release
  
  
  
  ：必要に応じてデバイスが画面をオフにできるようにします。

どちらのメソッドも、文字列「screen」または「system」という1つの引数のみを受け入れます。 最初のオプションは、画面をオフにする必要がないことを示すために使用され、2番目のオプションは、プロセッサーやラジオなどの他のデバイス（画面ではない）を示すために使用されます。



システムに画面をオンにしておく方法の例：

 navigator.wakeLock.request("display").then( function successFunction() { // do something }, function errorFunction() { // do something else } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

画面をオフにするには、次のように記述できます。

 navigator.wakeLock.release("display");
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このAPIの詳細については、ドキュメントの非公式のドラフトをご覧ください。

おわりに

この投稿では、いくつかの新しいJavaScript APIについて説明しました。 繰り返しになりますが、これらは開発の非常に初期の段階にあるため、単一のブラウザではまだサポートされていません。 したがって、まだ試してはいけません。 ただし、これらは非常に新鮮なため、開発を支援したり、仕様に対する独自の変更を提案したりすることもできます。



Web開発の未来はあなたの手にあります！