Fyysisen maailman avaaminen: Syvä sukellus Device Motion API:in

Web-kehityksen jatkuvasti kehittyvässä maisemassa raja natiivisovellusten ja web-sovellusten välillä hämärtyy jatkuvasti. Nykyaikaiset web-selaimet eivät ole enää vain staattisia dokumenttien katseluohjelmia; ne ovat tehokkaita alustoja, jotka pystyvät tarjoamaan rikkaita, interaktiivisia ja mukaansatempaavia kokemuksia. Yksi jännittävimmistä kehityksen rintamista on webin kyky olla vuorovaikutuksessa fyysisen maailman kanssa. Mobiilipeleistä, jotka reagoivat jokaiseen kallistukseesi ja ravistelukseesi, lisätyn todellisuuden katsojiin, jotka peittävät digitaalista tietoa ympäristöösi, näitä kokemuksia pyörittää sarja tehokkaita selainrajapintoja. Keskeinen tässä kyvyssä on Device Motion API.

Tämä kattava opas on suunniteltu globaalille web-kehittäjien yleisölle. Tutustumme Device Motion API:in keskittyen erityisesti siihen, miten päästä käsiksi ja tulkita dataa kahdesta perusanturista, jotka löytyvät useimmista nykyaikaisista laitteista: kiihtyvyysanturista ja gyroskoopista. Rakennatpa progressiivista web-sovellusta (PWA), selainpeliä tai ainutlaatuista apuohjelmaa, tämän API:n ymmärtäminen avaa uuden interaktiivisuuden ulottuvuuden käyttäjillesi riippumatta siitä, missä he ovat maailmassa.

Ydinajatusten ymmärtäminen: Liike vs. Suunta

Ennen kuin sukellamme koodiin, on tärkeää erottaa kaksi liittyvää, mutta erillistä käsitettä: laitteen liike ja laitteen suunta. Selain tarjoaa näille erilliset tapahtumat:

• Device Motion (`devicemotion`-tapahtuma): Tämä tapahtuma tarjoaa tietoa laitteen kiihtyvyydestä ja sen pyörimisnopeudesta. Se kertoo sinulle, miten laite liikkuu. Tämä on pääpainomme tässä artikkelissa.
• Device Orientation (`deviceorientation`-tapahtuma): Tämä tapahtuma tarjoaa tietoa laitteen fyysisestä suunnasta 3D-tilassa. Se kertoo sinulle, mihin suuntaan laite osoittaa, tyypillisesti sarjana kulmia suhteessa kiinteään koordinaattijärjestelmään Maassa.

Ajattele asiaa näin: `devicemotion` kertoo sinulle matkasta (liikkeen voimat), kun taas `deviceorientation` kertoo sinulle määränpäästä (lopullinen sijainti). Vaikka niitä käytetään usein yhdessä, niiden erillinen ymmärtäminen on avain niiden ominaisuuksien hallitsemiseen. Tässä oppaassa keskitymme `devicemotion`-tapahtuman tarjoamaan rikkaaseen dataan, joka tulee suoraan kiihtyvyysanturista ja gyroskoopista.

Rakennuspalikat: Kiihtyvyysanturit ja gyroskoopit selitettynä

Device Motion API:n ytimessä on kaksi uskomatonta mikroelektromekaanisen järjestelmän (MEMS) laitteistokomponenttia. Puretaan, mitä kukin tekee.

Kiihtyvyysanturi: Liikkeen ja painovoiman aistiminen

Kiihtyvyysanturi on anturi, joka mittaa oikeaa kiihtyvyyttä. Tämä ei ole vain kiihtyvyyttä, jonka koet, kun liikutat puhelintasi nopeammin (esim. ravistamalla sitä), vaan myös pysyvää kiihtyvyyttä, joka johtuu painovoimasta. Tämä on peruskonsepti ymmärtää: laite, joka istuu täysin paikallaan tasaisella pöydällä, kokee edelleen painovoiman vaikutuksen, ja kiihtyvyysanturi havaitsee tämän noin 9,81 metrin sekunnissa neliössä (m/s²) kiihtyvyydeksi.

Data toimitetaan kolmea akselia pitkin World Wide Web Consortiumin (W3C) määrittelemän standardoidun koordinaattijärjestelmän perusteella:

• x-akseli: Kulkee vasemmalta oikealle näytön poikki.
• y-akseli: Kulkee alhaalta ylös näytön poikki.
• z-akseli: Kohtisuorassa näyttöön nähden, osoittaen ulospäin käyttäjää kohti.

`devicemotion`-tapahtuma antaa sinulle kaksi pääominaisuutta, jotka liittyvät kiihtyvyyteen:

1. accelerationIncludingGravity: Tämä objekti sisältää raakadataa anturista. Se mittaa laitteen liikkeen ja Maan vetovoiman yhdistettyjä voimia. Monissa sovelluksissa, kuten vesivaa'an luomisessa tai kallistuksen havaitsemisessa, tämä on luotettavin ominaisuus, koska painovoima tarjoaa jatkuvan, ennustettavan vertailupisteen.
2. acceleration: Tämä objekti edustaa selaimen yritystä eristää käyttäjän aloittama liike vähentämällä painovoiman vaikutusta. Vaikka se on teoriassa hyödyllinen, sen saatavuus ja tarkkuus voivat vaihdella huomattavasti eri laitteissa ja selaimissa. Monet laitteet käyttävät tähän korkeapäästösuodatinta, joka ei ehkä ole täydellinen. Siksi monissa käyttötapauksissa raa'an `accelerationIncludingGravity`-datan kanssa työskentely ja omien laskelmien suorittaminen voi johtaa johdonmukaisempiin tuloksiin.

Gyroskooppi: Pyörimisen aistiminen

Vaikka kiihtyvyysanturi mittaa lineaarista liikettä, gyroskooppi mittaa kulmanopeutta tai pyörimisnopeutta. Se kertoo sinulle, kuinka nopeasti laite pyörii kunkin kolmen akselin ympäri. Tämä on välttämätöntä sovelluksille, joiden on reagoitava laitteen kiertämiseen, kääntämiseen tai panorointiin.

Gyroskooppidata toimitetaan `devicemotion`-tapahtuman `rotationRate`-ominaisuudessa. Se sisältää kolme arvoa, mitattuna asteina sekunnissa:

• alpha: Pyörimisnopeus z-akselin ympäri (pyörii tasaisesti, kuten levy levysoittimessa).
• beta: Pyörimisnopeus x-akselin ympäri (kallistuu eteen- ja taaksepäin).
• gamma: Pyörimisnopeus y-akselin ympäri (kallistuu sivulta sivulle).

Integroimalla nämä pyörimisnopeudet ajan mittaan voit laskea laitteen suunnan muutoksen, joka on täydellinen 360 asteen valokuvien katseluohjelmien tai yksinkertaisten liikeohjattujen pelien luomiseen.

Aloittaminen: Device Motion API:n toteuttaminen

Nyt kun ymmärrämme teorian, mennään käytännön tasolle. Device Motion API:n toteuttamiseen liittyy muutamia kriittisiä vaiheita, erityisesti kun otetaan huomioon modernin webin painopiste turvallisuudessa ja käyttäjän yksityisyydessä.

Vaihe 1: Ominaisuuksien tunnistus

Ensinnäkin, älä koskaan oleta, että käyttäjän selain tai laite tukee tätä API:a. Aloita aina ominaisuuksien tunnistamisella. Se on yksinkertainen tarkistus nähdäksesi, onko `DeviceMotionEvent`-objekti olemassa `window`-objektissa.

            if (window.DeviceMotionEvent) {
  console.log("Device Motion on tuettu");
} else {
  console.log("Device Motion ei ole tuettu tässä laitteessa.");
}
            

              
                Copy
              
            
          

Tämä yksinkertainen suojalauseke estää virheitä ja mahdollistaa varakokemuksen tarjoamisen käyttäjille, joilla on tuettuja laitteita, kuten vanhempia työpöytäselaimia.

Vaihe 2: Käyttöoikeuksien pyytäminen - Moderni web-turvallisuusmalli

Tämä on kiistatta tärkein ja usein unohdettu vaihe kehittäjille nykyään. Yksityisyys- ja turvallisuussyistä monet modernit selaimet, erityisesti Safari iOS 13:ssa ja uudemmissa, vaativat nimenomaisen käyttäjän luvan käyttää liike- ja suunta-anturidataa. Tätä lupaa voidaan pyytää vain vastauksena suoraan käyttäjän toimintaan, kuten painikkeen napsautukseen.

Yrittäminen lisätä tapahtumakuuntelijaa ilman tätä lupaa tällaisissa laitteissa johtaa siihen, ettei se koskaan käynnisty. Oikea tapa on tarjota painike tai ohjaus, jonka käyttäjän on aktivoitava ominaisuuden ottamiseksi käyttöön.

Tässä on parhaan käytännön toteutus:

            const permissionButton = document.getElementById('permission-button');

permissionButton.addEventListener('click', () => {
  // Tarkista, onko käyttöoikeusfunktio olemassa
  if (typeof DeviceMotionEvent.requestPermission === 'function') {
    // iOS 13+ -laitteet
    DeviceMotionEvent.requestPermission()
      .then(permissionState => {
        if (permissionState === 'granted') {
          window.addEventListener('devicemotion', handleMotionEvent);
          // Piilota painike käyttöoikeuden myöntämisen jälkeen
          permissionButton.style.display = 'none';
        } else {
          // Käsittele käyttöoikeuden epääminen
          alert('Liikeantureiden käyttöoikeus evättiin.');
        }
      })
      .catch(console.error); // Käsittele mahdolliset virheet
  } else {
    // Muut kuin iOS 13+ -laitteet
    window.addEventListener('devicemotion', handleMotionEvent);
    // Haluat ehkä myös piilottaa painikkeen tässä, koska sitä ei tarvita
    permissionButton.style.display = 'none';
  }
});

function handleMotionEvent(event) {
  // Datan käsittelylogiikka menee tähän...
  console.log(event);
}
            

              
                Copy
              
            
          

Tämä koodinpätkä on vankka ja maailmanlaajuisesti yhteensopiva. Se tarkistaa ensin, onko `requestPermission`-metodi olemassa. Jos se on olemassa (mikä osoittaa iOS 13+ -ympäristön), se kutsuu sitä. Metodi palauttaa lupauksen, joka ratkeaa käyttöoikeustilan kanssa. Jos tila on 'granted', lisäämme sitten tapahtumakuuntelijamme. Jos `requestPermission`-metodia ei ole olemassa, voimme olettaa, että olemme toisella alustalla (kuten Android Chromen kanssa), jossa käyttöoikeus myönnetään oletusarvoisesti tai sitä käsitellään eri tavalla, ja voimme lisätä kuuntelijan suoraan.

Vaihe 3: Tapahtumakuuntelijan lisääminen ja käsittely

Kun käyttöoikeus on varmistettu, liität tapahtumakuuntelijasi `window`-objektiin. Takaisinkutsufunktio saa `DeviceMotionEvent`-objektin argumenttinaan aina, kun anturidata päivitetään, mikä on tyypillisesti noin 60 kertaa sekunnissa (60 Hz).

Rakennetaan `handleMotionEvent`-funktio datan jäsentämiseksi:

            function handleMotionEvent(event) {
  const acceleration = event.acceleration;
  const gravity = event.accelerationIncludingGravity;
  const rotation = event.rotationRate;
  const interval = event.interval;

  // Esittelyä varten näytetään data
  const dataContainer = document.getElementById('data-container');

  dataContainer.innerHTML = `
    <h3>Kiihtyvyys (ilman painovoimaa)</h3>
    <p>X: ${acceleration.x ? acceleration.x.toFixed(3) : 'N/A'}</p>
    <p>Y: ${acceleration.y ? acceleration.y.toFixed(3) : 'N/A'}</p>
    <p>Z: ${acceleration.z ? acceleration.z.toFixed(3) : 'N/A'}</p>

    <h3>Kiihtyvyys (mukaan lukien painovoima)</h3>
    <p>X: ${gravity.x ? gravity.x.toFixed(3) : 'N/A'}</p>
    <p>Y: ${gravity.y ? gravity.y.toFixed(3) : 'N/A'}</p>
    <p>Z: ${gravity.z ? gravity.z.toFixed(3) : 'N/A'}</p>

    <h3>Pyörimisnopeus</h3>
    <p>Alpha (z): ${rotation.alpha ? rotation.alpha.toFixed(3) : 'N/A'}</p>
    <p>Beta (x): ${rotation.beta ? rotation.beta.toFixed(3) : 'N/A'}</p>
    <p>Gamma (y): ${rotation.gamma ? rotation.gamma.toFixed(3) : 'N/A'}</p>

    <h3>Päivitysväli</h3>
    <p>${interval.toFixed(3)} ms</p>
  `;
}
            

              
                Copy
              
            
          

Tämä käsittelijäfunktio purkaa olennaiset ominaisuudet tapahtumaobjektista ja näyttää ne. Huomaa tarkistukset `null`- tai `undefined`-arvoille, koska kaikkien ominaisuuksien saatavuutta ei voida taata jokaisessa laitteessa. Esimerkiksi laite, jossa ei ole gyroskooppia, raportoi `null` arvolle `event.rotationRate`.

Käytännön sovellukset ja koodiesimerkit

Teoria on hienoa, mutta Device Motion API:n todellinen teho herää eloon käytännön sovellusten avulla. Tutustutaan muutamiin esimerkkeihin, joihin voit rakentaa.

Esimerkki 1: "Ravistuksen tunnistin" - Yleismaailmallinen ele

Ravistuksen tunnistaminen on yleinen vuorovaikutusmalli, jota käytetään sovelluksissa maailmanlaajuisesti toimintojen, kuten "kumoa", soittolistan sekoittamisen tai lomakkeen tyhjentämisen, käynnistämiseen. Voimme saavuttaa tämän seuraamalla kiihtyvyyttä äkillisten, suurikokoisten muutosten varalta.

            let lastX, lastY, lastZ;
let moveCounter = 0;
const shakeThreshold = 15; // Kokeile tällä arvolla

function handleShake(event) {
  const { x, y, z } = event.accelerationIncludingGravity;

  if (lastX !== undefined) {
    const deltaX = Math.abs(lastX - x);
    const deltaY = Math.abs(lastY - y);
    const deltaZ = Math.abs(lastZ - z);

    if (deltaX + deltaY + deltaZ > shakeThreshold) {
      moveCounter++;
    } else {
      moveCounter = 0;
    }

    if (moveCounter > 3) { // Käynnistä muutaman nopean liikkeen jälkeen
      console.log('Ravistus havaittu!');
      // Käynnistä toimintosi tässä, esim. shufflePlaylist();
      moveCounter = 0; // Nollaa laskuri välttääksesi useita käynnistyksiä
    }
  }

  lastX = x;
  lastY = y;
  lastZ = z;
}

// Lisää 'handleShake' tapahtumakuuntelijasi takaisinkutsuksi
            

              
                Copy
              
            
          

Tämä koodi tallentaa viimeksi tunnetut kiihtyvyysarvot ja vertaa niitä nykyisiin. Jos muutosten summa kaikkien kolmen akselin yli ylittää määritetyn kynnyksen useiden peräkkäisten tapahtumien ajan, se rekisteröi ravistuksen. Tämä yksinkertainen logiikka on yllättävän tehokas.

Esimerkki 2: Yksinkertaisen vesivaa'an (kuplavaaka) luominen

Voimme käyttää painovoiman jatkuvaa voimaa digitaalisen vesivaa'an rakentamiseen. Kun laite on täysin tasainen, painovoiman voima (~-9,81 m/s²) on kokonaan z-akselilla. Kun kallistat laitetta, tämä voima jakautuu x- ja y-akselien poikki. Voimme käyttää tätä jakautumaa "kuplan" sijoittamiseen näytölle.

            const bubble = document.getElementById('bubble');
const MAX_TILT = 10; // Vastaa 9,81 m/s^2

function handleSpiritLevel(event) {
  const { x, y } = event.accelerationIncludingGravity;

  // Kartoita kiihtyvyysarvot CSS-muunnokseen
  // Kiinnitä arvot kohtuulliselle alueelle paremman visuaalisen tehosteen saavuttamiseksi
  const tiltX = Math.min(Math.max(y, -MAX_TILT), MAX_TILT) * -5; // Käännä ja skaalaa
  const tiltY = Math.min(Math.max(x, -MAX_TILT), MAX_TILT) * 5;  // Skaalaa

  bubble.style.transform = `translateX(${tiltY}px) translateY(${tiltX}px)`;
}

// Lisää 'handleSpiritLevel' tapahtumakuuntelijasi takaisinkutsuksi
            

              
                Copy
              
            
          

Tässä esimerkissä kartoitamme painovoiman `x`- ja `y`-komponentit kuplaelementin `translateX`- ja `translateY`-CSS-ominaisuuksiin. Skaalauskerrointa (`* 5`) voidaan säätää herkkyyden säätämiseksi. Tämä osoittaa `accelerationIncludingGravity`-ominaisuuden suoran ja tehokkaan käytön.

Esimerkki 3: Gyroskooppipohjainen "Katsele ympärillesi" -näkymä (360° valokuvien katseluohjelma)

Mukaansatempaavamman kokemuksen saavuttamiseksi voimme käyttää gyroskoopin `rotationRate`-ominaisuutta luodaksemme "taikainen ikkuna" -tehosteen, jossa fyysisen laitteen pyörittäminen panoroi näkymää, kuten 360° valokuvaa tai 3D-maisemaa.

            const scene = document.getElementById('scene');
let currentRotation = { beta: 0, gamma: 0 };
let lastTimestamp = 0;

function handleLookAround(event) {
  if (lastTimestamp === 0) {
    lastTimestamp = event.timeStamp;
    return;
  }

  const delta = (event.timeStamp - lastTimestamp) / 1000; // Aikaero sekunneissa
  lastTimestamp = event.timeStamp;

  const rotation = event.rotationRate;
  if (!rotation) return; // Ei gyroskooppidataa

  // Integroi pyörimisnopeus ajan mittaan saadaksesi kulmamuutoksen
  currentRotation.beta += rotation.beta * delta;
  currentRotation.gamma += rotation.gamma * delta;

  // Käytä pyöritystä maisemaelementtiin CSS-muunnoksen avulla
  // Huomaa: Akseleita on ehkä vaihdettava tai käännettävä halutun vaikutuksen mukaan
  scene.style.transform = `rotateX(${-currentRotation.beta}deg) rotateY(${-currentRotation.gamma}deg)`;
}

// Lisää 'handleLookAround' tapahtumakuuntelijasi takaisinkutsuksi
            

              
                Copy
              
            
          

Tämä esimerkki on edistyneempi. Se integroi kulmanopeuden (`rotationRate`) tapahtumien välisen aikavälin yli laskeakseen kulman kokonaismuutoksen. Tätä kulmaa käytetään sitten CSS:n `rotateX`- ja `rotateY`-ominaisuuksien päivittämiseen. Tämän lähestymistavan keskeinen haaste on gyroskoopin drifti, jossa pienet virheet kumuloituvat ajan myötä aiheuttaen näkymän hitaan driftauksen. Tarkemmissa sovelluksissa tämä korjataan usein anturifuusiolla, jossa gyroskooppidata yhdistetään kiihtyvyysanturin ja magnetometrin dataan (usein `deviceorientation`-tapahtuman kautta).

Tärkeitä huomioita ja parhaita käytäntöjä globaalille yleisölle

Device Motion API:n rakentaminen on tehokasta, mutta sen vastuullinen tekeminen on olennaista hyvän käyttökokemuksen luomiseksi kaikille kaikkialla.

Suorituskyky ja akun kesto

Liikeanturit kuluttavat virtaa. `devicemotion`-tapahtumien jatkuva kuuntelu, jopa kun sovelluksesi on taustalla, voi merkittävästi kuluttaa käyttäjän akkua. Tämä on kriittinen huomio käyttäjille alueilla, joilla jatkuva pääsy lataukseen voi olla harvinaisempaa.

• Kuuntele vain tarvittaessa: Lisää tapahtumakuuntelija, kun komponenttisi on aktiivinen ja näkyvissä.
• Siivoa jälkesi: Poista aina tapahtumakuuntelija, kun komponentti tuhotaan tai ominaisuutta ei enää tarvita. `window.removeEventListener('devicemotion', yourHandlerFunction);`
• Rajoita käsittelijäsi: Jos et tarvitse 60 päivitystä sekunnissa, voit käyttää tekniikoita, kuten `requestAnimationFrame` tai yksinkertaista rajoitus-/viivefunktiota, rajoittaaksesi kuinka usein logiikkasi suoritetaan, säästäen CPU-syklejä ja akkua.

Selain- ja laiteyhteensopivuus

Web on monipuolinen, ja niin ovat myös laitteet, jotka käyttävät sitä. Kuten olemme nähneet iOS:n käyttöoikeusmallin kanssa, toteutukset eroavat toisistaan. Koodaa aina puolustavasti:

• Tunnista kaikki ominaisuudet: Tarkista `DeviceMotionEvent` ja `DeviceMotionEvent.requestPermission`.
• Tarkista null-data: Kaikissa laitteissa ei ole gyroskooppia. `rotationRate`-objekti voi olla `null`. Koodisi tulisi käsitellä tämä sujuvasti.
• Tarjoa vararatkaisuja: Mitä tapahtuu, jos käyttäjä epää luvan tai hänen laitteestaan puuttuu anturit? Tarjoa vaihtoehtoinen ohjausjärjestelmä, kuten kosketuspohjainen vedä-panorointi 360° katseluohjelmalle. Tämä varmistaa, että sovelluksesi on laajemman globaalin yleisön saatavilla ja käytettävissä.

Datan tasoitus ja kohinan vähentäminen

Raaka anturidata voi olla "herkkää" tai "kohinaista", mikä johtaa epävakaaseen käyttökokemukseen. Sujuvien animaatioiden tai ohjaimien saavuttamiseksi sinun on usein tasoitettava tämä data. Yksinkertainen tekniikka on käyttää alipäästösuodatinta tai liukuvaa keskiarvoa.

Tässä on yksinkertainen alipäästösuodattimen toteutus:

            let smoothedX = 0, smoothedY = 0;
const filterFactor = 0.1; // Arvo välillä 0 ja 1. Pienempi on tasaisempi, mutta siinä on enemmän viivettä.

function handleSmoothedMotion(event) {
  const { x, y } = event.accelerationIncludingGravity;

  smoothedX = (x * filterFactor) + (smoothedX * (1.0 - filterFactor));
  smoothedY = (y * filterFactor) + (smoothedY * (1.0 - filterFactor));

  // Käytä smoothedX ja smoothedY sovelluslogiikassasi
}
            

              
                Copy
              
            
          

Turvallisuus ja yksityisyys: Käyttäjä ensin -lähestymistapa

Liiketiedot ovat arkaluonteisia. Niitä voidaan mahdollisesti käyttää päätellä käyttäjän toimintoja, sijaintikontekstia ja jopa näppäimistön näppäilyjä lähellä (värähtelyanalyysin avulla). Kehittäjänä sinulla on vastuu olla avoin.

• Ole selkeä siitä, miksi tarvitset luvan: Älä vain näytä yleistä "Salli pääsy" -painiketta. Sisällytä teksti, joka selittää käyttäjälle hyödyn, esimerkiksi "Ota liikeohjaimet käyttöön mukaansatempaavamman kokemuksen saavuttamiseksi."
• Pyydä lupaa oikeaan aikaan: Pyydä lupaa vasta, kun käyttäjä on aikeissa osallistua ominaisuuteen, joka sitä vaatii, ei sivun latauksen yhteydessä. Tämä kontekstuaalinen pyyntö lisää hyväksymisen todennäköisyyttä.

Tulevaisuus: Anturifuusio ja yleinen anturi-API

Device Motion API on hyvin tuettu ja tehokas, mutta se on osa kehittyvää tarinaa. Anturien käytön tulevaisuus webissä on menossa kohti Yleistä anturi-API:a. Tämä on uudempi erittely, joka on suunniteltu tarjoamaan johdonmukaisempi, turvallisempi ja laajennettavampi tapa käyttää laitteen antureita.

Yleinen anturi-API tarjoaa useita etuja:

• Moderni, lupauspohjainen API: Asynkronisten toimintojen kanssa on helpompi työskennellä.
• Nimenomainen, anturikohtainen lupa: Siinä on rakeisempi ja selkeämpi turvallisuusmalli.
• Laajennettavuus: Se on suunniteltu tukemaan laajaa valikoimaa antureita liikkeen lisäksi, mukaan lukien ympäristön valo, läheisyys ja paljon muuta.

Tässä on nopea katsaus sen syntaksiin vertailun vuoksi:

            // Yleinen anturi-API-esimerkki
const accelerometer = new Accelerometer({ frequency: 60 });

accelerometer.addEventListener('reading', () => {
  console.log(`Kiihtyvyys X-akselia pitkin: ${accelerometer.x}`);
  console.log(`Kiihtyvyys Y-akselia pitkin: ${accelerometer.y}`);
  console.log(`Kiihtyvyys Z-akselia pitkin: ${accelerometer.z}`);
});

accelerometer.addEventListener('error', event => {
  console.log(event.error.name, event.error.message);
});

accelerometer.start();
            

              
                Copy
              
            
          

Vaikka selaintuki Yleiselle anturi-API:lle on edelleen kasvussa, se on selkeä seuraaja. Toistaiseksi `devicemotion`-tapahtuma on edelleen luotettavin ja laajimmin tuettu menetelmä kiihtyvyysanturi- ja gyroskooppidatan käyttämiseen. Kehittäjien tulisi pitää silmällä Yleisen anturi-API:n käyttöönottoa tulevia projekteja varten.

Johtopäätös

Device Motion API on portti luoda verkkokokemuksia, jotka ovat intuitiivisempia, mukaansatempaavampia ja yhteydessä käyttäjän fyysiseen maailmaan. Hyödyntämällä kiihtyvyysanturia ja gyroskooppia voimme suunnitella vuorovaikutuksia, jotka ylittävät perinteisen osoita ja napsauta -toiminnon, avaten mahdollisuuksia pelaamiseen, apuohjelmiin ja mukaansatempaavaan tarinankerrontaan.

Kuten olemme nähneet, tämän API:n onnistunut toteuttaminen vaatii enemmän kuin vain tapahtumakuuntelijan lisäämistä. Se vaatii harkittua, käyttäjäkeskeistä lähestymistapaa, joka asettaa etusijalle turvallisuuden, suorituskyvyn ja alustojen välisen yhteensopivuuden. Kunnioittamalla käyttäjän yksityisyyttä selkeillä käyttöoikeuspyynnöillä, varmistamalla sujuvan kokemuksen datasuodatuksen avulla ja tarjoamalla vararatkaisuja kaikille käyttäjille, voit rakentaa todella globaaleja web-sovelluksia, jotka tuntuvat sekä maagisilta että luotettavilta. Nyt on aika aloittaa kokeileminen ja katsoa, mitä voit rakentaa kuilun kuromiseksi digitaalisen ja fyysisen maailman välillä.