ããã³ããšã³ã Presentation API ãæ¢æ±ããã·ãŒã ã¬ã¹ãªãã«ãã¹ã¯ãªãŒã³Webã¢ããªã±ãŒã·ã§ã³ãäœæããŸããè€æ°ã®ãã£ã¹ãã¬ã€ã§é åçãªã³ã³ãã³ããæäŸããããã®æŠå¿µãå®è£ ããã¹ããã©ã¯ãã£ã¹ãåŠã³ãŸãããã
ãã«ãã¹ã¯ãªãŒã³äœéšã®å®çŸïŒããã³ããšã³ã Presentation API ã®è©³çŽ°è§£èª¬
仿¥ã®çžäºæ¥ç¶ãããäžçã§ã¯ããŠãŒã¶ãŒã¯è€æ°ã®ããã€ã¹éã§ã·ãŒã ã¬ã¹ãªäœéšãæåŸ ããŠããŸããããã³ããšã³ã Presentation APIã¯ãWebéçºè ãåäžã®ç»é¢ãè¶ ããŠæ¡åŒµããã¢ããªã±ãŒã·ã§ã³ãäœæããããã®åŒ·åãªã¡ã«ããºã ãæäŸããé åçã§å ±åäœæ¥å¯èœãªãã«ãã¹ã¯ãªãŒã³äœéšãæäŸããŸãããã®å æ¬çãªã¬ã€ãã§ã¯ãPresentation APIã®æ©èœãå®è£ ã®è©³çްããã¹ããã©ã¯ãã£ã¹ãæ¢æ±ããè€æ°ã®ãã£ã¹ãã¬ã€ã®åãæŽ»çšãã驿°çãªWebã¢ããªã±ãŒã·ã§ã³ã®æ§ç¯ãå¯èœã«ããŸãã
Presentation APIãšã¯ïŒ
Presentation APIã¯ãWebããŒãžïŒãã¬ãŒã³ããŒã·ã§ã³ã³ã³ãããŒã©ãŒïŒãã»ã«ã³ããªãã£ã¹ãã¬ã€ïŒãã¬ãŒã³ããŒã·ã§ã³ã¬ã·ãŒããŒïŒãæ€åºããæ¥ç¶ã§ããããã«ããWeb APIã§ããããã«ãããéçºè ã¯è€æ°ã®ç»é¢ã«ã³ã³ãã³ãã衚瀺ããWebã¢ããªã±ãŒã·ã§ã³ãäœæã§ããŸããäŸãã°ã以äžã®ãããªãã®ã§ãïŒ
- ãã¬ãŒã³ããŒã·ã§ã³ïŒ çºè¡šè ãã©ãããããã§ã¡ã¢ãèŠãªããããããžã§ã¯ã¿ãŒã«ã¹ã©ã€ãã衚瀺ããã
- ããžã¿ã«ãµã€ããŒãžïŒ äžå€®ã®Webã¢ããªã±ãŒã·ã§ã³ããå¶åŸ¡ãããå ¬å ±ãã£ã¹ãã¬ã€ã«æ å ±ã衚瀺ããã
- ã²ãŒã ïŒ æ²¡å ¥æãé«ããããååãã¬ã€ãå¯èœã«ããããã«ãã²ãŒã ãã¬ã€ãã»ã«ã³ãã¹ã¯ãªãŒã³ã«æ¡åŒµããã
- ã€ã³ã¿ã©ã¯ãã£ãããã·ã¥ããŒãïŒ å¶åŸ¡å®€ããªãã£ã¹ç°å¢ã§ããªã¢ã«ã¿ã€ã ã®ããŒã¿ãèŠèŠåãè€æ°ã®ã¢ãã¿ãŒã«è¡šç€ºããã
- å ±åäœæ¥ã¢ããªã±ãŒã·ã§ã³ïŒ è€æ°ã®ãŠãŒã¶ãŒãå¥ã ã®ç»é¢ã§åæã«ã³ã³ãã³ããæäœã§ããããã«ããã
åºæ¬çã«ãPresentation APIã¯ãWebã¢ããªã±ãŒã·ã§ã³ãä»ã®ç»é¢ã«ã³ã³ãã³ããããããŒããã£ã¹ããããããšãå¯èœã«ããŸããChromecastã®ãããªãã®ã§ããããã©ãŠã¶ã«çŽæ¥çµã¿èŸŒãŸããããªãã®å¶åŸ¡äžã«ãããŸããããã¯ãå¶åŸ¡åŽã®WebããŒãžãšã衚瀺ãããã³ã³ãã³ããã¬ã³ããªã³ã°ãã1ã€ä»¥äžã®åä¿¡åŽWebããŒãžãšã®éã®éä¿¡ã容æã«ããŸãã
äž»èŠãªæŠå¿µãšçšèª
Presentation APIãæ±ãã«ã¯ã以äžã®æŠå¿µãçè§£ããããšãäžå¯æ¬ ã§ãïŒ
- ãã¬ãŒã³ããŒã·ã§ã³ã³ã³ãããŒã©ãŒïŒ ãã¬ãŒã³ããŒã·ã§ã³ãéå§ããå¶åŸ¡ããWebããŒãžãããã¯éåžžããŠãŒã¶ãŒãã¢ããªã±ãŒã·ã§ã³ãšå¯Ÿè©±ãããã©ã€ããªã¹ã¯ãªãŒã³ã§ãã
- ãã¬ãŒã³ããŒã·ã§ã³ã¬ã·ãŒããŒïŒ ã»ã«ã³ããªã¹ã¯ãªãŒã³ã«è¡šç€ºãããWebããŒãžããã®ããŒãžã¯ãã¬ãŒã³ããŒã·ã§ã³ã³ã³ãããŒã©ãŒããã³ã³ãã³ããåãåããã¬ã³ããªã³ã°ããŸãã
- ãã¬ãŒã³ããŒã·ã§ã³ãªã¯ãšã¹ãïŒ ç¹å®ã®URLïŒãã¬ãŒã³ããŒã·ã§ã³ã¬ã·ãŒããŒïŒã§ãã¬ãŒã³ããŒã·ã§ã³ãéå§ããããã®ããã¬ãŒã³ããŒã·ã§ã³ã³ã³ãããŒã©ãŒããã®ãªã¯ãšã¹ãã
- ãã¬ãŒã³ããŒã·ã§ã³æ¥ç¶ïŒ ãã¬ãŒã³ããŒã·ã§ã³ãªã¯ãšã¹ããæåããåŸã«ããã¬ãŒã³ããŒã·ã§ã³ã³ã³ãããŒã©ãŒãšãã¬ãŒã³ããŒã·ã§ã³ã¬ã·ãŒããŒã®éã«ç¢ºç«ãããåæ¹åéä¿¡ãã£ãã«ã
- ãã¬ãŒã³ããŒã·ã§ã³ã®å¯çšæ§ïŒ ãã¬ãŒã³ããŒã·ã§ã³ãã£ã¹ãã¬ã€ãå©çšå¯èœãã©ããã瀺ããŸããããã¯ãã©ãŠã¶ãšãªãã¬ãŒãã£ã³ã°ã·ã¹ãã ã«ãã£ãŠæ±ºå®ãããŸãã
Presentation APIã®ä»çµã¿ïŒã¹ããããã€ã¹ãããã¬ã€ã
Presentation APIã䜿çšããŠãã«ãã¹ã¯ãªãŒã³ãã¬ãŒã³ããŒã·ã§ã³ã確ç«ããããã»ã¹ã«ã¯ãããã€ãã®ã¹ããããå«ãŸããŸãïŒ
- ãã¬ãŒã³ããŒã·ã§ã³ã³ã³ãããŒã©ãŒïŒå¯çšæ§ã®æ€åºïŒ ãã¬ãŒã³ããŒã·ã§ã³ã³ã³ãããŒã©ãŒã¯ããŸã `navigator.presentation.defaultRequest` ãªããžã§ã¯ãã䜿çšããŠãã¬ãŒã³ããŒã·ã§ã³ãã£ã¹ãã¬ã€ãå©çšå¯èœãã©ããã確èªããŸãã
- ãã¬ãŒã³ããŒã·ã§ã³ã³ã³ãããŒã©ãŒïŒãã¬ãŒã³ããŒã·ã§ã³ã®ãªã¯ãšã¹ãïŒ ã³ã³ãããŒã©ãŒã¯ããã¬ãŒã³ããŒã·ã§ã³ã¬ã·ãŒããŒããŒãžã®URLãæå®ã㊠`navigator.presentation.defaultRequest.start()` ãåŒã³åºããŸãã
- ãã©ãŠã¶ïŒãŠãŒã¶ãŒãžã®ããã³ããïŒ ãã©ãŠã¶ã¯ããã¬ãŒã³ããŒã·ã§ã³çšã®ãã£ã¹ãã¬ã€ãéžæãããããŠãŒã¶ãŒã«ä¿ããŸãã
- ãã¬ãŒã³ããŒã·ã§ã³ã¬ã·ãŒããŒïŒããŒãžã®èªã¿èŸŒã¿ïŒ ãã©ãŠã¶ã¯ãéžæããããã£ã¹ãã¬ã€ã§ãã¬ãŒã³ããŒã·ã§ã³ã¬ã·ãŒããŒããŒãžãèªã¿èŸŒã¿ãŸãã
- ãã¬ãŒã³ããŒã·ã§ã³ã¬ã·ãŒããŒïŒæ¥ç¶ã®ç¢ºç«ïŒ ãã¬ãŒã³ããŒã·ã§ã³ã¬ã·ãŒããŒããŒãžã¯ã`PresentationConnection` ãªããžã§ã¯ããå«ã `PresentationConnectionAvailable` ã€ãã³ããåãåããŸãã
- ãã¬ãŒã³ããŒã·ã§ã³ã³ã³ãããŒã©ãŒïŒæ¥ç¶ã®ç¢ºç«ïŒ ãã¬ãŒã³ããŒã·ã§ã³ã³ã³ãããŒã©ãŒããç¬èªã® `PresentationConnection` ãªããžã§ã¯ããæã€ `PresentationConnectionAvailable` ã€ãã³ããåãåããŸãã
- éä¿¡ïŒ ãã¬ãŒã³ããŒã·ã§ã³ã³ã³ãããŒã©ãŒãšã¬ã·ãŒããŒã¯ã`PresentationConnection` ãªããžã§ã¯ãã® `postMessage()` ã¡ãœããã䜿çšããŠéä¿¡ã§ããããã«ãªããŸãã
å®è£ ã®è©³çްïŒã³ãŒãäŸ
ç°¡åãªãã¬ãŒã³ããŒã·ã§ã³ã¢ããªã±ãŒã·ã§ã³ãå®è£ ããããã«å¿ èŠãªã³ãŒããèŠãŠã¿ãŸãããã
ãã¬ãŒã³ããŒã·ã§ã³ã³ã³ãããŒã©ãŒ (sender.html)
ãã®ããŒãžã§ã¯ããŠãŒã¶ãŒããã¬ãŒã³ããŒã·ã§ã³ãã£ã¹ãã¬ã€ãéžæããã¬ã·ãŒããŒã«ã¡ãã»ãŒãžãéä¿¡ã§ããŸãã
<!DOCTYPE html>
<html>
<head>
<title>Presentation Controller</title>
</head>
<body>
<button id="startPresentation">Start Presentation</button>
<input type="text" id="messageInput" placeholder="Enter message">
<button id="sendMessage">Send Message</button>
<div id="status"></div>
<script>
let connection = null;
const startPresentationButton = document.getElementById('startPresentation');
const messageInput = document.getElementById('messageInput');
const sendMessageButton = document.getElementById('sendMessage');
const statusDiv = document.getElementById('status');
startPresentationButton.addEventListener('click', async () => {
try {
connection = await navigator.presentation.defaultRequest.start('receiver.html');
statusDiv.textContent = 'Presentation started!';
connection.onmessage = (event) => {
statusDiv.textContent += '\nReceived from receiver: ' + event.data;
};
connection.onclose = () => {
statusDiv.textContent = 'Presentation closed.';
connection = null;
};
} catch (error) {
statusDiv.textContent = 'Error starting presentation: ' + error;
}
});
sendMessageButton.addEventListener('click', () => {
if (connection) {
const message = messageInput.value;
connection.postMessage(message);
statusDiv.textContent += '\nSent: ' + message;
messageInput.value = '';
} else {
statusDiv.textContent = 'No presentation connection.';
}
});
</script>
</body>
</html>
ãã¬ãŒã³ããŒã·ã§ã³ã¬ã·ãŒã㌠(receiver.html)
ãã®ããŒãžã¯ããã¬ãŒã³ããŒã·ã§ã³ã³ã³ãããŒã©ãŒããåä¿¡ããã³ã³ãã³ãã衚瀺ããŸãã
<!DOCTYPE html>
<html>
<head>
<title>Presentation Receiver</title>
</head>
<body>
<div id="content">Waiting for content...</div>
<script>
navigator.presentation.receiver.connectionList.then(list => {
list.connections.forEach(connection => {
handleConnection(connection);
});
list.addEventListener('connectionavailable', event => {
handleConnection(event.connection);
});
});
function handleConnection(connection) {
const contentDiv = document.getElementById('content');
contentDiv.textContent = 'Connection established!';
connection.onmessage = (event) => {
contentDiv.textContent += '\nReceived: ' + event.data;
connection.postMessage('Receiver received: ' + event.data);
};
connection.onclose = () => {
contentDiv.textContent = 'Connection closed.';
};
}
</script>
</body>
</html>
説æïŒ
- sender.htmlïŒãã¬ãŒã³ããŒã·ã§ã³ã³ã³ãããŒã©ãŒïŒã¯ã`navigator.presentation.defaultRequest.start('receiver.html')` ã䜿çšããŠãã¬ãŒã³ããŒã·ã§ã³ããªã¯ãšã¹ãããŸãããã®åŸãæ¥ç¶ã確ç«ãããã®ãåŸ ã¡åããã¡ãã»ãŒãžãéä¿¡ããããã®ãã¿ã³ãæäŸããŸãã
- receiver.htmlïŒãã¬ãŒã³ããŒã·ã§ã³ã¬ã·ãŒããŒïŒã¯ã`navigator.presentation.receiver.connectionList` ã䜿çšããŠçä¿¡æ¥ç¶ãåŸ ã¡åããŸããæ¥ç¶ã確ç«ããããšãã¡ãã»ãŒãžãåŸ ã¡åããŠè¡šç€ºããŸãããŸããè¿ä¿¡ã¡ãã»ãŒãžãéä¿¡ããŸãã
ãã¬ãŒã³ããŒã·ã§ã³ã®å¯çšæ§ã®åŠç
ãã¬ãŒã³ããŒã·ã§ã³ãéå§ããåã«ããã¬ãŒã³ããŒã·ã§ã³ãã£ã¹ãã¬ã€ã®å¯çšæ§ã確èªããããšãéèŠã§ãã`navigator.presentation.defaultRequest.getAvailability()` ã¡ãœããã䜿çšããŠããã¬ãŒã³ããŒã·ã§ã³ãã£ã¹ãã¬ã€ãå©çšå¯èœãã©ããã倿ã§ããŸãã
navigator.presentation.defaultRequest.getAvailability()
.then(availability => {
if (availability.value) {
console.log('Presentation displays are available.');
} else {
console.log('No presentation displays available.');
}
availability.addEventListener('change', () => {
if (availability.value) {
console.log('Presentation displays are now available.');
} else {
console.log('Presentation displays are no longer available.');
}
});
})
.catch(error => {
console.error('Error getting presentation availability:', error);
});
ãšã©ãŒãã³ããªã³ã°ãšå ç¢æ§
ä»ã®Web APIãšåæ§ã«ãé©åãªãšã©ãŒãã³ããªã³ã°ãäžå¯æ¬ ã§ãã以äžã«ããã€ãã®èæ ®äºé ã瀺ããŸãïŒ
- äŸå€ã®ãã£ããïŒ æœåšçãªãšã©ãŒãåŠçããããã«ãPresentation APIã®åŒã³åºãã `try...catch` ãããã¯ã§å²ã¿ãŸãã
- æ¥ç¶åæã®åŠçïŒ `PresentationConnection` ã® `close` ã€ãã³ãããªãã¹ã³ããŠãæ¥ç¶ã倱ãããããšãæ€åºããŸãã忥ç¶ãããããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãé©åã«äœäžãããã¡ã«ããºã ãå®è£ ããŸãã
- ãŠãŒã¶ãŒãžã®éç¥ïŒ åé¡ã説æããèãããã解決çãææ¡ãããæçãªãšã©ãŒã¡ãã»ãŒãžããŠãŒã¶ãŒã«æäŸããŸãã
- ã°ã¬ãŒã¹ãã«ãã°ã©ããŒã·ã§ã³ïŒ ãã©ãŠã¶ãPresentation APIããµããŒãããŠããªãå Žåãããã¬ãŒã³ããŒã·ã§ã³ãã£ã¹ãã¬ã€ãå©çšã§ããªãå Žåã§ãããã«ãã¹ã¯ãªãŒã³æ©èœãç¡å¹ã«ãªã£ãŠããŠããã¢ããªã±ãŒã·ã§ã³ãåŒãç¶ãå©çšå¯èœãªäœéšãæäŸã§ããããã«ããŸãã
ã»ãã¥ãªãã£ã«é¢ããèæ ®äºé
Presentation APIã«ã¯ããŠãŒã¶ãŒãä¿è·ããæªæã®ãã䜿çšãé²ãããã®ã»ãã¥ãªãã£æ©èœãçµã¿èŸŒãŸããŠããŸãïŒ
- ãŠãŒã¶ãŒã®åæïŒ ãã©ãŠã¶ã¯åžžã«ãŠãŒã¶ãŒã«ãã¬ãŒã³ããŒã·ã§ã³çšã®ãã£ã¹ãã¬ã€ãéžæããããã«ä¿ãããŠãŒã¶ãŒããã¬ãŒã³ããŒã·ã§ã³ãèªèããæ¿èªããŠããããšãä¿èšŒããŸãã
- ã¯ãã¹ãªãªãžã³å¶éïŒ Presentation APIã¯ã¯ãã¹ãªãªãžã³ããªã·ãŒãå°éããŸãããã¬ãŒã³ããŒã·ã§ã³ã³ã³ãããŒã©ãŒãšã¬ã·ãŒããŒã¯ãåããªãªãžã³ããæäŸãããããéä¿¡ããããã«CORSïŒCross-Origin Resource SharingïŒã䜿çšããå¿ èŠããããŸãã
- HTTPSèŠä»¶ïŒ ã»ãã¥ãªãã£äžã®çç±ãããPresentation APIã®äœ¿çšã¯éåžžãã»ãã¥ã¢ãªã³ã³ããã¹ãïŒHTTPSïŒã«å¶éãããŠããŸãã
ãã«ãã¹ã¯ãªãŒã³éçºã®ãã¹ããã©ã¯ãã£ã¹
é åçã§äœ¿ãããããã«ãã¹ã¯ãªãŒã³ã¢ããªã±ãŒã·ã§ã³ãäœæããã«ã¯ã次ã®ãã¹ããã©ã¯ãã£ã¹ãèæ ®ããŠãã ããïŒ
- ããŸããŸãªç»é¢ãµã€ãºãšè§£å床ã«å¯Ÿå¿ããèšèšïŒ ãã¬ãŒã³ããŒã·ã§ã³ã¬ã·ãŒããŒããŒãžããããŸããŸãªãã£ã¹ãã¬ã€ãµã€ãºãè§£å床ã«é©åã«é©å¿ããããã«ããŸããã¬ã¹ãã³ã·ããã¶ã€ã³æè¡ã䜿çšããŠãç°ãªãç»é¢éã§äžè²«ãããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãäœæããŸãã
- ããã©ãŒãã³ã¹ã®æé©åïŒ ç¹ã«äœåž¯åå¹ ã®æ¥ç¶ã§ã¹ã ãŒãºãªããã©ãŒãã³ã¹ã確ä¿ããããã«ããã¬ãŒã³ããŒã·ã§ã³ã³ã³ãããŒã©ãŒãšã¬ã·ãŒããŒéã§è»¢éãããããŒã¿éãæå°éã«æããŸããããŒã¿å§çž®æè¡ã®äœ¿çšãæ€èšããŠãã ããã
- æç¢ºãªèŠèŠçåå³ã®æäŸïŒ ã©ã®ç»é¢ããã©ã€ããªã¹ã¯ãªãŒã³ã§ãã©ããã»ã«ã³ããªã¹ã¯ãªãŒã³ã§ãããããŠãŒã¶ãŒã«æç¢ºã«ç€ºããŸããèŠèŠçãªåå³ã䜿çšããŠããŠãŒã¶ãŒã®æ³šæãšæäœãèªå°ããŸãã
- ã¢ã¯ã»ã·ããªãã£ã®èæ ®ïŒ ãã«ãã¹ã¯ãªãŒã³ã¢ããªã±ãŒã·ã§ã³ãé害ãæã€ãŠãŒã¶ãŒã«ãã¢ã¯ã»ã¹å¯èœã§ããããšã確èªããŸããç»åã«ä»£æ¿ããã¹ããæäŸããé©åãªè²ã®ã³ã³ãã©ã¹ãã䜿çšããããŒããŒãããã²ãŒã·ã§ã³ããµããŒããããŠããããšã確èªããŸãã
- ããŸããŸãªããã€ã¹ãšãã©ãŠã¶ã§ãã¹ãããïŒ äºææ§ã確ä¿ããæœåšçãªåé¡ãç¹å®ããããã«ãããŸããŸãªããã€ã¹ãšãã©ãŠã¶ã§ã¢ããªã±ãŒã·ã§ã³ã培åºçã«ãã¹ãããŸããPresentation APIã¯æçããŠããŸãããããã©ãŠã¶ã®ãµããŒããå®è£ ã®åŸ®åŠãªéãã¯äŸç¶ãšããŠååšããŸãã
- ãŠãŒã¶ãŒãžã£ãŒããŒã«ã€ããŠèããïŒ åæèšå®ããåæãŸã§ã®ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹å šäœãèæ ®ããŸããæç¢ºãªæç€ºãšãã£ãŒãããã¯ãæäŸããŠãããã»ã¹ãéããŠãŠãŒã¶ãŒãã¬ã€ãããŸãã
å®äžçã®äŸãšãŠãŒã¹ã±ãŒã¹
Presentation APIã¯ã驿°çãªWebã¢ããªã±ãŒã·ã§ã³ã®ããã®å¹ åºãå¯èœæ§ãéããŸãã以äžã«ããã€ãã®äŸã瀺ããŸãïŒ
- ã€ã³ã¿ã©ã¯ãã£ããã¯ã€ãããŒãïŒ å€§åã®ã¿ããã¹ã¯ãªãŒã³ããããžã§ã¯ã¿ãŒã«è¡šç€ºãããå ±æãã£ã³ãã¹äžã§ãè€æ°ã®ãŠãŒã¶ãŒãå ±åäœæ¥ã§ããWebããŒã¹ã®ãã¯ã€ãããŒãã¢ããªã±ãŒã·ã§ã³ã
- ãªã¢ãŒãã³ã©ãã¬ãŒã·ã§ã³ããŒã«ïŒ ãªã¢ãŒãããŒã ãè€æ°ã®ç»é¢ã§ããã¥ã¡ã³ãããã¬ãŒã³ããŒã·ã§ã³ããªã¢ã«ã¿ã€ã ã§å ±æããæ³šéãä»ããããšãã§ããããŒã«ã
- äŒè°ã»ã€ãã³ãã¢ããªã±ãŒã·ã§ã³ïŒ äŒè°ãã€ãã³ãã§ãäžå€®ã®Webã¢ããªã±ãŒã·ã§ã³ã«ãã£ãŠå¶åŸ¡ããã倧åã¹ã¯ãªãŒã³ã«è¬æŒè æ å ±ãã¹ã±ãžã¥ãŒã«ãã€ã³ã¿ã©ã¯ãã£ããªæç¥šãªã©ã衚瀺ããã
- åç©é€šã»çŸè¡é€šã®å±ç€ºïŒ è€æ°ã®ã¹ã¯ãªãŒã³ã§æ¥å Žè ãåŒãä»ããã€ã³ã¿ã©ã¯ãã£ããªå±ç€ºãäœæããå±ç€ºãããŠããå·¥èžåã«ã€ããŠããæ·±ãæŽå¯ãæäŸãããã¡ã€ã³ã¹ã¯ãªãŒã³ã§å·¥èžåãå±ç€ºããå°ããªã¹ã¯ãªãŒã³ã§è¿œå ã®æèãã€ã³ã¿ã©ã¯ãã£ããªèŠçŽ ãæäŸãããããªãã®ãæ³åããŠãã ããã
- æå®€ã§ã®åŠç¿ïŒ æåž«ã¯æå°çšã«ãã©ã€ããªã¹ã¯ãªãŒã³ã䜿çšããçåŸã¯åã ã®ããã€ã¹ã§è£å©çãªã³ã³ãã³ããšå¯Ÿè©±ãããããããã¹ãŠãPresentation APIãéããŠèª¿æŽãããã
ãã©ãŠã¶ã®ãµããŒããšä»£æ¿ææ®µ
Presentation APIã¯ãäž»ã«Google ChromeãMicrosoft Edgeãªã©ã®ChromiumããŒã¹ã®ãã©ãŠã¶ã§ãµããŒããããŠããŸããä»ã®ãã©ãŠã¶ã§ã¯ãéšåçãªãµããŒããŸãã¯ãµããŒãããªãå ŽåããããŸããææ°ã®ãã©ãŠã¶äºææ§æ å ±ã«ã€ããŠã¯ãMDN Web Docsã確èªããŠãã ããã
ãã€ãã£ãã®Presentation APIãµããŒãããªããã©ãŠã¶ããµããŒãããå¿ èŠãããå Žåã¯ã以äžã®ä»£æ¿ææ®µãæ€èšã§ããŸãïŒ
- WebSocketsïŒ WebSocketsã䜿çšããŠãã¬ãŒã³ããŒã·ã§ã³ã³ã³ãããŒã©ãŒãšã¬ã·ãŒããŒã®éã«æ°žç¶çãªæ¥ç¶ã確ç«ããéä¿¡ãããã³ã«ãæåã§ç®¡çããŸãããã®ã¢ãããŒãã¯ããå€ãã®ã³ãŒãã£ã³ã°ãå¿ èŠãšããŸããããã倧ããªæè»æ§ãæäŸããŸãã
- WebRTCïŒ WebRTC (Web Real-Time Communication) ã¯ãã¢ããŒãã¢éä¿¡ã«äœ¿çšã§ããäžå€®ãµãŒããŒã«äŸåããã«ãã«ãã¹ã¯ãªãŒã³ã¢ããªã±ãŒã·ã§ã³ãäœæã§ããŸãããã ããWebRTCã¯ã»ããã¢ãããšç®¡çãããè€éã§ãã
- ãµãŒãããŒãã£ã©ã€ãã©ãªïŒ ãã«ãã¹ã¯ãªãŒã³éä¿¡ãšãã¬ãŒã³ããŒã·ã§ã³ç®¡çã®ããã®æœè±¡åãæäŸããJavaScriptã©ã€ãã©ãªããã¬ãŒã ã¯ãŒã¯ãæ¢æ±ããŸãã
ãã«ãã¹ã¯ãªãŒã³Webéçºã®æªæ¥
ããã³ããšã³ã Presentation APIã¯ãããè±ãã§é åçãªãã«ãã¹ã¯ãªãŒã³Webäœéšãå¯èœã«ããããã®éèŠãªäžæ©ã衚ããŠããŸãããã©ãŠã¶ã®ãµããŒããæ¡å€§ãç¶ããéçºè ããã®æœåšèœåãæå€§éã«æ¢æ±ããã«ã€ããŠãè€æ°ã®ãã£ã¹ãã¬ã€ã®åãæŽ»çšããããã«é©æ°çãªã¢ããªã±ãŒã·ã§ã³ãç»å ŽããããšãæåŸ ãããŸãã
çµè«
Presentation APIã¯ãWebéçºè ãã·ãŒã ã¬ã¹ã§é åçãªãã«ãã¹ã¯ãªãŒã³äœéšãäœæããããšãå¯èœã«ãããã¬ãŒã³ããŒã·ã§ã³ãã³ã©ãã¬ãŒã·ã§ã³ãããžã¿ã«ãµã€ããŒãžãªã©ã®æ°ããªå¯èœæ§ãåãéããŸãããã®ã¬ã€ãã§æŠèª¬ããã³ã¢ã³ã³ã»ãããå®è£ ã®è©³çްããã¹ããã©ã¯ãã£ã¹ãçè§£ããããšã§ãPresentation APIãæŽ»çšããŠãåäžã®ç»é¢ã®å¶çŽãè¶ ãã驿°çãªWebã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ã§ããŸãããã®æè¡ãåãå ¥ãããã«ãã¹ã¯ãªãŒã³Webéçºã®å¯èœæ§ãè§£ãæŸã¡ãŸãããïŒ
æäŸãããã³ãŒãäŸã詊ããããããŸããŸãªãŠãŒã¹ã±ãŒã¹ãæ¢æ±ãããããŠãPresentation APIãžã®çè§£ãæ·±ããããšãæ€èšããŠãã ãããã¢ããªã±ãŒã·ã§ã³ã®äºææ§ãç¶æãããã«ãã¹ã¯ãªãŒã³Webéçºã®ææ°ã®é²æ©ã掻çšããããã«ããã©ãŠã¶ã®æŽæ°ãæ°æ©èœã«ã€ããŠåžžã«æ å ±ãå ¥æããŠãã ããã