Koki Takahashi hakatashi

TSG 第14回Web分科会カンペ

CanvasとWebGLの周辺技術について学ぶ

<!DOCTYPE html>
<html>

SVGとそれに関連する各種技術について学ぶ。

するほどのものでもないかもしれないけど、いちおう伝統として。

リアルタイムウェブを支える技術を学び、実際にWebSocketを用いて簡単なアプリケーションを構築してみる。

Node.jsをインストール(第7回の資料を参照)し、適当な作業用ディレクトリを作成する。

作成したディレクトリ内で以下のコマンドを実行し、Socket.IOをインストールする。

Ajaxを用いたJavaScriptによる動的通信を学ぶ。

以下のHTMLをコピペして適当な名前で保存し、ブラウザで開く。

identifyすると明らかにColormapが怪しい。

$ identify nyan-task.png
Image: nyan-task.png
  Format: PNG (Portable Network Graphics)
  Mime type: image/png
  Class: PseudoClass

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>SVG Shooting</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script>
	<style>
	body {
	margin: 0;
	}

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Robot Fight</title>
	<script src="/socket.io/socket.io.js"></script>
	<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
	<style>
	.field {
	width: 500px;

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Robot Fight</title>
	<script src="/socket.io/socket.io.js"></script>
	<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
	<style>
	.field {
	width: 500px;

	<!DOCTYPE html>
	<html>
	<head>
	<title>Ajax Test</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.css">
	<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
	<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.js"></script>
	<script>
	const escapeHtml = (string) => {
	return string

	<!DOCTYPE html>
	<html>
	<head>
	<title>Ajax Test</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.css">
	<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
	<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.js"></script>
	<script>
	const template = ({url = '', imageUrl = '', title = '', date = '201-11-02', views = 0}) => `
	<div class="ui card">