Web実験＃1。 適応レベル 80：Webアプリケーション、脳波、および注意レベル

適応性への現在のアプローチは、インターフェースの開発と相互作用の経験における幼稚園（これは始まりにすぎないという意味で）であると私が言うことを試みる入門部分

今日、Web上の適応性について言えば、彼らは通常、サイト（Webアプリケーション）の表示を対応するデバイスの画面の幅に合わせて調整するような単純で些細なことを理解しています。 レスポンシブデザイン、レスポンシブデザイン、ラバーデザイン-聞こえないもの。 このすべてが10年前に発明され、日常業務に導入されたと主張する人もいれば、将来を描く画期的なトレンドとしてそれを提示する人もいます。 ブラウザはすでにレスポンシブ画像を導入しており、CSSで必要な機能の可用性をすぐに確認しています！-5番目のブラウザは 、アクセシビリティの問題やさまざまな入力方法の調整の問題など、より広く問題を調べようとします まだまだ。 もちろん、誰もがある程度は正しい。





個人的には、5番目のキャンプが最も好きです（たとえば、Aaron Gustavsonの適応性の発展の可能性に関する記事「 Where Do We Go Here From？ 」を参照）、グリッド、移行ポイント、および異なるアニメーション間の美しいアニメーションを考慮して、より広い意味で適応性について考えることを奨励します特別なケースとしてのみ述べています。 もちろん、このケースは重要で、好奇心が強く、勉強するのが面白く、美しく、顧客を示し、実証し、説得するのに便利です。 （感情が抑えられていることでこの問題を心配していると感じないように、私はそうではないことを率直に言います：適応インターフェイスの開発の可能性のある見通しは一般的に喜んでいますが、グリッドやその他のスマートフォンは最初の一歩に過ぎません。 、同じ熱意を持つ設計者がこのトピックの研究開発に従事し、時々打たれた決定を繰り返さなかった場合）



ただし、一部のシステム（アプリケーション）は、今日の慣例であるように、画面のサイズと解像度だけでなく、入力メソッド（Windows 10の追加の重点）にも適応することをしばらく想像してください。 人のコンテキストの下で：光、時間、場所、イベントなど。 （長い間「コンテキスト認識」システムと呼ばれてきたCortanaは、そのような例として役立つかもしれません）。 彼の状態：感情と気分、記憶、健康状態、注意（長編映画「彼女」で完全に示されている）、仕事上の関係（たとえば、オフィスまたはソーシャルグラフに基づく）を含む社会的文脈、そしてもちろん制限ユーザー-一時的または永続的。 これは、業界が急落し始めているインターフェイス設計とエンジニアリング、「ロケットサイエンス」からのこのような空間であり、適切な研究とエンジニアリングソリューションが必要です。



段階的に、私たち（ここでは業界を一般化しています）がこれに進みます。

理論的な部分。通常のテンプレートを超える具体的な例になります

しばらくの間、面白いデバイス、MindWave Mobileがありました。これは、「デモで脳波を数えてみること」を除いて、長い間実用化されていませんでした。



彼のことを初めて聞いた人のために、簡単に説明します。 このものを頭の上に置き、耳たぶにクリップをはめて、別のコネクタを額に取り付けます（この状態で、長時間運動をしたり、耳に洗濯バサミに耐えることができるとは言いません）。 その後、回路が閉じ、デバイスは脳のアルファ、ベータ、およびその他のリズムの読み取りを開始し、注意レベルと瞑想レベルという2つの不可欠なパラメーターを同時に計算します。 これらはすべて、Bluetooth（BLE）を介して、接続された信号受信機（スマートフォン、タブレット、ラップトップなど）に送信され、対応するアプリケーションがそれを使用して処理します。



そのようなエンターテイメント。 楽しみのために、SDKがあります。邪悪な虫やトロールを魔法のエネルギーで粉砕するアプリケーションを作成できます。 統計を収集するだけでも構いませんが、センサーの測定値を賢く読み取るには、少し神経質になる必要があると思います。 集中力を高めたり、明確な心を育てることができます。 







一般に、デバイスは3つのイベントが発生するまでほぼ1年間私の引き出しに置かれました。

1. WinRTには優れたラッパーがあり、JavaScriptで作業することができました（C＃コードなしではできませんでしたが、より快適に感じました）。
2. Windows 10のコンテキストでは、いわゆる ホステッドWebアプリ（これは別の話のトピックですが、以下を簡単に参照してください）、
3. ウェブ体験を自分の脳の活動に適応させようとしないのはなぜだと思いました。

さて、試しました。



実験のアイデア：サイトのビデオが視聴者の注意レベルに応じて再生速度を変えるとどうなるでしょうか？ これはまさに（脳のパターンという意味での）不連続なシナリオであり、グリッドやアダプティブピクチャに関するものではありません。

Visual Studioを開いてコードの理解を開始する実用的な部分

ソリューション全体は、条件付きで、3つの部分で構成されます。

1. 外部サイトが開始ページとして登録されているマニフェストにあるHTML / JSのWindows 10用アプリケーション、およびシステムAPIへのアクセス権も示されています-これは「 Project Westminster 」（Windows 10用UWP Bridge）です。
2. 対応するライブラリのラッパーであるMindWaveデバイスを操作するためのWinRTコンポーネント。Webコンテキストで利用可能とマークされています（これは重要です！）。
3. HTML / JSサイト自体。すべてのロジックとマッピングが集中している場所にあります。

順番に整理しましょう。



アプリケーション。 この記事では、Windows 10のWebアプリケーションディレクトリを深く掘り下げる目的はないので、ほんの少しだけ説明します。



まず、各アプリケーションには開始ページ（エントリポイント）があり、それを使用して作業を開始します。 以前は、Windows 8、8.1、およびHTML / JSアプリケーションのWindows Phone 8.1では、これはパッケージ内のページのみでした。 Windows 10では、アプリケーションのコンテンツはほとんど完全にサーバー側でホストできます。

<Application Id="App" StartPage="http://codepen.io/kichinsky/pen/rVMBOm">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、CodePenにコードを投稿しました。これは実験に非常に適しています。



2番目：アプリケーションで、コンテンツを許可し、1つまたは別の機能（WinRT、コンポーネント）へのアクセスを許可するドメインを明示的に許可する必要があります。

 <uap:ApplicationContentUriRules> <uap:Rule Type="include" WindowsRuntimeAccess="allowForWebOnly" Match="http://codepen.io/kichinsky/"/> <uap:Rule Type="include" WindowsRuntimeAccess="allowForWebOnly" Match="http://s.codepen.io/"/> </uap:ApplicationContentUriRules>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

WinRTコンポーネント。 基礎として、Sebastiano GalazzoのNuGet- Neurosky SDKからアクセスできる既製のライブラリを用意しました。 インストールするには、パッケージマネージャーで次のコマンドを使用できます。

 PM> Install-Package Neurosky
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

HTML / JSアプリケーションで使用するには、1つのライブラリでは十分ではなく、対応するデータを備えたWinRTコンポーネントが必要です。 したがって、ためらうことなく、必要なメソッドを対応するコンポーネント（実際にはC＃のクラス）でラップしました。

 [Windows.Foundation.Metadata.AllowForWeb] public sealed class MindWaveDevice { private IMindwaveSensor mindDevice; private MindWaveDevice(IMindwaveSensor device) { this.mindDevice = device; this.mindDevice.StateChanged += MindDevice_StateChanged; this.mindDevice.CurrentValueChanged += MindDevice_CurrentValueChanged; } …. }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

上で述べたように、Webコンテキストで利用可能なメタデータでクラスをマークする必要があります。 外部公開：ステータスおよびデータ変更イベントをサブスクライブする機能を持つデバイスオブジェクトを受信します。 さらに、デバイスが接続され、ユーザーがデバイスでの作業を許可するとすぐに、次の形式に関するデータストリームが落ち始めます。

 public struct MindReading { public int AlphaHigh; public int AlphaLow; public int BetaHigh; public int BetaLow; public int Delta; public int Attention; public int Meditation; public int GammaLow; public int GammaMid; public int Quality; public int Theta; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

JavaScriptでは、これはすべて、対応するNumberフィールドを持つオブジェクトによって翻訳されます。



サイト。 原則として、実験では、データがホストされている場所（少なくともlocalhost）は絶対に重要ではありません。 サイト内では、以前と同じように作業しますが、少しだけ追加します。 ターゲットブラウザが突然ユーザーの脳活動を削除し、適切なAPIを設定することを学習したと想像してください。



「機能検出」の伝統に従って、APIの可用性を確認し、サイトの機能を拡張します。

 if (window.MindWaveController != undefined) { MindWaveController.MindWaveDevice.getFirstConnectedMindDeviceAsync().then(function (foundDevice) { mindDevice = foundDevice; mindDevice.onstatechangedevent = stateChangedHandler; mindDevice.onvaluechangedevent = valueChangedHandler; }); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

適切なタイミングで、データが届き始めます。

 function valueChangedHandler(reading) { if (mindDevice.currentState == "ConnectedWithData") { attentionBar.value = reading.attention; meditationBar.value = reading.meditation; …. } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして...それがすべてです！ このソリューションのシンプルさのすべての魔法：すべてがぴったりと合い、機能し始めます。



さて、あなたはあなたの心が望むものを何でもします。 私は簡単な実験から始めて、データを視覚化しようとしました：

私の脳の皮質の信号を考慮に入れてビデオを適応させ始めた実験部分

脳波の中で、私は認めなければなりません、私は完全な素人です。 もちろん、彼らは彼らが偶然に異なっていて、人生のさまざまな瞬間に異なって活性化されると言うことを知っています。 例えば、あるスマートブックでは、他の人の活動を観察する際にシータ波が抑制されると述べています。 何とか確認する必要があります。



しかし、幸いなことに、このデバイスには小さなコントローラーがあり、患者の注意と瞑想の魔法のような価値を引き出すことができます。 単なる人間にとって、それは彼らが必要とするものです。



それから、なぜこれが実際の応用に必要なのだろうと思いました。 私は訪問者の脳活動に反応できるサイトを想像し始めました...







最初は、さまざまなページで訪問者の脳の活動に関する統計を収集することから、本のテキストをスクロールする速度のようなさまざまな自動化されたシナリオまで、さまざまな複雑なシナリオについて考えました。 やっとビデオを再生できるようになり、HTML5 Videoには直接制御できるPlaybackRateプロパティもあることを思い出しました。



ポイントは小さいです：ページにビデオを追加して、何が起こるかを見てください。



注意の速度への変換。 最初のステップは、注意（0-100）と速度（1.0-通常の再生速度）を関連付ける方法を見つけることでした。 実験的に、0.5（低速再生）から2.0（高速）の速度範囲に制限することにしました。 簡単なマッピングの作成：

 var playRates = [0.5, 0.7, 0.8, 0.9, 1.0, 1.1, 1.2, 1.4, 1.6, 1.8, 2.0]; function attention2speed(attention) { var speed = 0; if (attention > 30) { speed = playRates[Math.floor((attention - 30) / 7)]; } else { speed = 0.5; } return speed; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてのパラメーターは実験的であり、背後には明確な科学的要素はありませんが、特定のロジックはあります。 主なアイデア：低い注意で低速を設定し、次に個別のディスプレイを作成します。







次のステップ：再生速度を変更します。 残念ながら、額を作る、つまり、新しい情報が到着したときに再生速度を変更しようとする試みは、惨めに失敗しました。 まず、アテンション値がダウンロードされます。つまり、平均化する必要があります。次に、あまりにも頻繁に更新すると（たとえば、各データまたはすべてのフレームで）、ビデオの再生速度が「遅れ」始め、率直に聞くことができなくなります。



したがって、実験的にも個人的な好みからも、私は自分自身を単純なスキームに限定しました。

• 過去5秒間に脳から値を収集し、
• それに応じて平均化し、再生速度を更新します。

このようなもの：

 function getMidSpeed() { var speed = 0; var count = speedBuffer.length; if (count == 0) { speed = video.playbackRate; //    } else { for (var i = 0; i < count; i++) { speed += speedBuffer[i]; } speed = speed / count; } return speed; } function updatePlaybackRate() { var speed = getMidSpeed(); speedBar.value = speed; video.playbackRate = speed; if (video.paused) video.play(); speedBuffer = []; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これは次のようなものです。

幻想的な最後の部分

もちろん、これは実際的な意味を持つ単なる実験であり、近い将来、人の感情状態や脳や脳の活動の一部のインディケーターをサイトやアプリケーションに送信できるデバイスが大量に登場することは予想されません。







映画「She」の「女の子」を覚えていますが、アイデアは映画が音声制御と相互作用に焦点を当てているということですが、主人公は耳に何かを置いているので、この何かが脈拍を読み取って、実行、他のいくつかのパラメーターを外しますか？



「ワイヤーのもう一方の端」での相互作用のオブジェクトが、人の行動とその状態に「適応」できる場合、これは広義の意味での非常に適応性です。



または、数年後にGoogle AnalyticsまたはYandex.Metricaのレポートを想像してください。



-最近の統計によると、ユーザーのテストグループで、斑点のある子猫の画像を追加すると、感情的な愛着がサイトに加わり、関与レベルが10ポイント増加しました。

-すばらしい仕事です！ 縞模様の子猫を見せてみましたか？

-1時間以内に2番目のグループを試して、統計情報を返します。



技術的には、今日の訪問で統計を収集するのと同じように、現在と同じサイトで実行できます。 必要な指標を読むことができる「特別な」ユーザーエージェントを持つユーザーが必要です。



結論として、私の空想は別の観察に気付くでしょう。 病院の平均気温は、ユーザーのデバイスのフォームファクターに適応する適応型サイトを作ることが今日流行になっていることを示唆しています 。 ユーザー自身に適応するサイトを作ることがいつか同様に流行することを望みます 。



psアイトラッカーが届くのを待っています。