高橋光輝 (@hakatashi) ・紺野瑛介

2018-02-09 東京大学電気系 2017年度情報可視化実験 成果報告スライド

絵文字

itmedia.co.jp

Emoji

rocketnews24.com

言語によらない
世界共通のコミュニケーション手段

Emojiを
楽しく可視化したい！

DEMO

https://emojivision.azurewebsites.net/

🔧Technology

D3.js

d3js.org

D3.js

  • World Map: d3-geo
  • Tree Map: d3-hierarchy
  • Time Chart: d3-scale
  • Pie Chart: d3-shape

React

wikimedia.org

勝手にDOMをいじりまくるD3.jsと
Reactの相性が最悪

class WorldMapChart {
	constructor(props) {
		this.svg = props.svg;
		...
	}
	static async create(node) {
		const svg = D3.select(node).append('svg');
		...
		return new WorldMapChart({
			svg,
			...
		});
	}
	...
}
const WorldMapChart = require('./WorldMapChart.js');

class WorldMap extends React.Component {
	...
	initialize = async () => {
		this.chart = await WorldMapChart.create(this.map);
		...
	}
	...
}

Webpack

Babel

Hammer.js

PostCSS

そのほかの技術

ESLint

Animate.css

☁️Azureの活用

データのスクレイピング・解析:

Azure Virtual Machines

絵文字データの保管・サーバー:

Azure Storage (Blob, Files)

アプリケーションのデプロイ:

Azure Web Apps

コンテンツのキャッシュ・高速化:

Azure CDN

🙏

👍Azureの良かった点

  • 無料で使えた
    • Dreamsparkなども含めて学生に優しいのがありがたい
  • Files Storage
    • SMBでそのままWindowsから
      マウント可能なのは便利
  • Azure Web Apps
    • AWSにはHerokuの代替がないのでありがたい
    • SPAの静的アプリケーションも置けるのも👍
  • 大阪リージョン
  • Portalの見た目がかっこいい

👎Azureの微妙な点

  • AWSみたいにワンクリックですんなり行ってくれない
    • リソースグループという仕組み
    • Storageでのディレクトリの削除
    • Storageでのファイルの公開と認証の設定
    • CDNの設定
    • Virtual Machine の選択と起動
      • ユーザー名・名前の設定
  • エラーが頻発する&エラーメッセージがわかりにくい
    • 何を直せばいいのかわからないこともしばしば
  • (サードパーティのものも含めて) ドキュメントが少ない

😍こだわり

とにかく“楽しさ”優先
リアルタイム性を重視

データの分割読み込み

初回ロードの高速化

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>EmojiVision - Gigantic Emoji statistics on Twitter</title>
      <script async src="index.js" charset="utf-8"></script>
      <style>
         html, body {
             padding: 0;
             margin: 0;
             width: 100%;
             height: 100%;
             overflow: hidden;
             background: #222;
             color: white;
         }
         body.loading {
             position: relative;
             display: flex;
             align-items: center;
             justify-content: center;
         }
         body.loading .load-screen::before {
             content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox...");
             width: 100%;
         }
         ....
      </style>
   </head>
   <body class="loading">
      <div class="load-screen">
         <div class="loader dots-loader"></div>
      </div>
      <div class="root"></div>
   </body>
</html>

ありがとうございました

😂

Made with Slides.com