ブラック研究室へようこそ!

大企業を退職して個人事業主になった日常、ブラック研究室のエピソード、Web/アプリ開発の備忘録など。

Phase27 チップ設計は果てしなくてブラック その1

 

blacklab-blog.net

教授の凄まじいドジっ子っぷりにより、放置系ブラックから一気に、激務系ブラックに変化したこの研究室。

 

調べてみると世の中には、忙しすぎて就活もさせてくれないようなブラック研究室があるようだ。

就活中はまだ放置系ブラックのままでいてくれて本当に良かった。

不幸中の幸いといったところだろうか。

 

さて、ふと俯瞰してみてみると、

・修士2年の夏〜卒業まで、何をそんなにセコセコと労働することがあるのか?

・てか、「動画圧縮のチップ製作」って一体なんなの?

と皆さん疑問に思うかもしれない。

 

そこで我々は立ち上がり、

今回は、その大変さを語って見たいと思います!(白目)

 

今明かされる、知られざるチップ設計の世界 〜影と影〜

そう、影と影なのです。光はない。

ずーっと日陰の作業。

 

そもそもチップというのは、こんなやつです。

f:id:blackLab:20180620101541j:plain

 

こういうのを見せた瞬間に、「え、やだ…ナニコレ…」とドン引きするでしょう。

特に20代女子勢。すぐドン引きしちゃうからね。やーね。

だから、絶対にこういう話は面と向かってしません。

 

で、この画像のチップは、いわば『完成品』。

ただ設計完了済みの電気の通り道(回路)を、大日本なんちゃらさんとか、凸版なんちゃらさん達がガンガン印刷して、大量生産しているものです。

 

今回の超絶激務ミッションは、パソコン上で動いている動画圧縮のC言語のプログラムを、上記の状態にもっていくこと。『実用化』・『製品化』とも言えますね。

 

なんでもできちゃう天才的な「ソフトウェア」から、原始的で電気的な「ハードウェア」に設計し直すのです。

それは、泣くほど大変なことなのです。

電気メーカーさん、マジお疲れ様なのです…。

 

ハードウェアの世界ってなんなの?何が大変なの?

ここが非常に重要なのです。

 

頭の良い子に勉強を教えるのと、超絶アホの子に勉強を教えるの、どっちが大変ですか?

超絶アホの子を教える方に決まってますよね。

それがハードウェアの世界!

 

例えば、あなたが「2+3=5」という計算をしたいとします。

すると、ソフトウェアでは、

『 i = 2 + 3; 』

とでも書けばできちゃいますよね。それ以外ないだろ?って話。

 

しかし、ハードウェアでは、

こんなイメージになるのですよ…。

f:id:blackLab:20180622161145p:plain

クロックという一定の波を見て、

最初に波が立ち上がった時(=1クロック目)、1コ目の記憶領域に「2」を記憶させときます。

で、2クロック目に、2コ目の記憶領域に「3」を記憶させます。

そして、3クロック目に、この記憶させた2つの数を加算させて、その結果を3コ目の記憶領域に記憶させます。

 

・・・という、世界でやりたいことを教え込んでやらなければいけないのです。

絶望しませんか?

え、そもそもそんな解説、読んでいられるかって?

ですよね、それが正しい反応だと思いますよ。

 

ただ、やりたいことを教え込む時、つまり設計する時は、

ソフトウェアと同じく、プログラミングでできる時代なので、この時代でほんとよかったって感じです。

 

といっても、こんな訳のわからん文法なんですけどね。

f:id:blackLab:20180622162220p:plain

 

Verilog-HDLという言語です。

ハードウェアの定義に使われます。

 

コツはですね、頭の中で回路や配線を思い浮かべて書くことです。(キモい)

 

f:id:blackLab:20180622162601p:plain

そう、こんな風にイメージして!

さぁ!さぁ!(ヤバイ人いるよ)

 

 

なんでわざわざそんなことしなきゃいけないの?バカなの?

え?なんでそんなことしなきゃいけないのって?

そりゃあ、そこに回路があるからだよ。

 

ではなくて!

一応、ちゃんと理由はあるんです。

 

■理由①

『ハードウェアの方が、計算が爆速だから』

です。

 

ソフトウェアと比べ物にならないぐらい早いです。

電気的に一瞬で処理してしまうので。

 

正直、動画像の処理は重たいです。

リアルタイムに処理したい!ってなってくると、今回みたいに『ハードウェア化』という恐ろしい選択肢が待っているかもしれません。

 

■理由②

『計算時間が決まっているので、完全に思い通りの処理ができるから』

です。

 

クロックという一定のリズムを刻む波に沿って、順々にガリガリ計算していくので、

計算が終わる時間も一定なのです。

 

ソフトウェアだと、仮想的に処理しちゃうので、マシンのスペックや状況によって、

計算時間が左右されます。一定じゃないんですね。

 

ピタゴラスイッチ的なものを作った時、

「このタイミングでドミノが倒れない!」っていう状況はかなり致命的になっちゃいますよね。

だからこそ、『時間が一定』というのは、結構大事になってきます。

 

 

 

よし、この調子で、次回ももうちょっと語ろうと思います。(まじかよ!)

 

では、また!!!

 

【IT備忘録】リアルタイムお絵かきシステムを作ってみた④ 〜Node.jsのサーバプログラムをpm2でデーモン化〜

 

前回までで、リアルタイムお絵かきシステムができました。

blacklab-blog.net

 

f:id:blackLab:20180531214347j:plain

 

お〜、描けますね〜。

しかし、1つ気になることがあります。

それは、サーバプログラムを起動する時です。

 

前回までの説明ですと、server.jsを起動時、以下のシェルを打っていたかと思いますが、

このままだと、フォワードで実行されてしまい、SSHを切るとサーバプログラムが終了してしまいます。

# server.jsを起動
node server.js

 

そこで、サーバプログラムをデーモン化(常時起動)しましょう!

 

Node.jsのデーモン化ツール

Node.jsのデーモン化のためのツールがいくつか存在します。

僕が知っているものとして、以下2つがあります。

 

  • forever

   死活監視:○

   マルチコア対応:✕

  • pm2

   死活監視:○

   マルチコア対応:○

 

比較すると、pm2の方が優秀だと思います。

2つとも死活監視(サーバが落ちたことを検知して、自動で再立ち上げ)には対応しているのですが、決め手はマルチコア対応の観点。

pm2は、サーバのCPUのコア数に応じて、自動で複数プロセスで処理してくれます。

サーバ性能を考慮してくれるpm2は、まさに優れもの!

 

以下、参考記事です。

www.yoheim.net

 

pm2のインストール〜起動

インストールから起動まで、至って簡単です。

# pm2をインストール
sudo npm install pm2
# pm2でserver.jsのデーモン化開始
pm2 start server.js

 

あと、よく使うコマンドはこんなものでしょうか。

# 再起動
pm2 restart server.js
# デーモン停止
pm2 stop server.js
# ログやプロセスの確認
pm2 monit

 

では、また!!

【IT備忘録】リアルタイムお絵かきシステムを作ってみた③ 〜Githubで公開しました〜

 

blacklab-blog.net

 

前回、Node.js・Socket.IOをインストールし、Nginxとの連携設定をしました。

これで、導入はOKです。

 

以下のような構図ができあがりましたね。

f:id:blackLab:20180620112530p:plain

 

ソースコード公開

以下、リアルタイムお絵かきシステムのソースコードをGithubで公開します!

github.com

 

  • index.php

   スマホ向けのTOPページです。ここで1〜4の回答番号を選びます。

   ※回答番号とは、以下の投影画面で1〜4のどの四角いBOXに絵を書くか、のことです。

f:id:blackLab:20180531214347j:plain

 

  • client.php

   スマホ向けの絵を書くページ。回答番号を選ぶとこのページに飛びます。

  • monitor.php

   PC向けの投影画面です。

  • server.js

   Node.jsのサーバプログラムです。

   これは、前回記載した『任意の作業用ディレクトリ』に移して起動してください。

   ※Socket.IOのライブラリをインストールしたディレクトリに入れて起動する必要があります。

 

テクニック紹介

Socket.IOは便利ですよ。このお絵描きシステムで使っているテクニックを少し紹介します。

 

基本ルール

基本的に、以下の構図が成り立つと思われます。

これを意識しましょう。

クライアントAサーバクライアントB

 

また、当たり前の話ですが、Socket.IOでのやりとりはNode.jsを使っているので全てJavascriptで完結します。

前回同様、以下のSocet.IOのライブラリをクライアント側のページに読み込ませておきます。

<script src="/socket.io/socket.io.js" type="text/javascript"></script>

 

クライアントAサーバへの情報送信

例として、変数dataを、サーバ側がリッスンしている『ClientAtoServer』という関数へ送信します。emitで送信です。

dataの中身は数値でも、配列でもある程度何でも渡せます。dataを引数として持たなくてもいいです。ゆるいですね。 

//クライアントA側
var socket = io();
socket.emit('ClientAtoServer', data);

 

サーバクライアントBへ情報中継

サーバ側で、『ClientAtoServer』という関数をリッスンさせることで、クライアントAからの情報(data)を受け取ります。onでリッスンです。

そして、クライアントB側でリッスンしている『ServerToClientB』という関数へ情報(data)を橋渡ししてやります。

// サーバ側
socket.on('ClientAtoServer', function (data) {
      // dataをクライアントBへ中継する
      socket.emit('ServerToClientB', data);
});

 

クライアントBで情報受け取り

先程と同様に、クライアントB側で『ServerToClientB』という関数をリッスンします。

これで、橋渡しされてきた情報(data)がクライアントBで受け取ることができますね。

// クライアントB側
socket.on('ServerToClientB', function (data) {
        // ・・・
        // dataをガチャガチャする
        // ・・・
});

 

ルームの概念

「このルームに入っている人のみに情報を送りたい」ということが可能です。

■入室

まず、回答番号1番に書くよ、ということで、client.phpからサーバーへその番号を送って入室します。  ※team_num=1とします。

// client.php
socket.emit('sendTeamNumToServer', team_num);

 

 ■ルームへ配置

サーバー側は、 その番号を受け取り、このクライアントを「team1」というルームにjoinさせます。

// server.js
  socket.on('sendTeamNumToServer', function (num) {
        if(num==0){
        	//モニター
        	socket.join("monitor");
        }else if(num>0){
        	//クライアント(今回ここ)
        	socket.join("team"+num);
        }
    });

 

■ルームを絞った情報送信

そして、サーバから以下のようなコードを書いてやると、「team1」宛にのみ情報を送ることができます。

※broadcast.to("ルーム名")により、送り先ルームを指定しています。

socket.broadcast.to("team1").emit('forTeam1Function', data);

 

■情報受け取り 

 「team1」に入室しているクライアント側で、上記に沿って『forTeam1Function』をリッスンさせていれば、dataを受け取ることができます。

socket.on('forTeam1Function', function (data) {
        // ・・・
        // dataをガチャガチャする
        // ・・・
});

 慣れてくると、結構簡単です!

 

絵が書かれるときの構造

これらを応用して、スマホから絵が書かれたら投影画面に反映する、ということをやっているのですが、

線を描画するときのイベントが少し複雑になってしまっているので解説します。

 

反映の精度を高めるため、以下の1〜3のステップでイベントを分けています。

これによって、線の太さや色、座標をバグることなく、投影画面に反映させることができています。

※詳細は、Github上のコードを参照くださいませ。

 

■1.線の描き始め(指がスマホに触れた時)

スマホ →①→ サーバ →②→ 投影画面

①:関数名「sendDrawDownToServer」

②:関数名「sendEachDrawDownToClient」

 

■2.線を引っ張っている最中(指がスマホ上で動いている時)

スマホ →①→ サーバ →②→ 投影画面

①:関数名「sendDrawToServer」

②:関数名「sendEachDrawToClient」

 

■3.線の描き終わり(指がスマホを離れた時)

スマホ →①→ サーバ →②→ 投影画面

①:関数名「sendDrawUpToServer」

②:関数名「sendEachDrawUpToClient」

 

 

参考までに!!

ではまた!!

【IT備忘録】リアルタイムお絵かきシステムを作ってみた② 〜Node.jsとSocket.IOの導入方法〜

f:id:blackLab:20180531214347j:plain

 

スマホですーっと線を引くと、PC側でもほぼリアルタイムにすーっと線が引かれる、

まさに「平成教育委員会」的なお絵かき・回答システム、作りたくないですか?

 

前回紹介したのがこちらです。

blacklab-blog.net

 

今回、その導入編になります!

 

前提条件・方針

  • さくらVPSサーバー

        (東京・CPU2コア・メモリ1GB・SSD)

  • OS: CentOS 6
  • Webサーバソフト:Nginx+Node.js の連携を実現する

※すでに他のWebページを、Nginxを使ってPHPのサイトを運営しているため、

今回ベースはNginxを使ってHTMLを提供し、Socket.IOでのやりとりのみNode.jsを通す、というやり方を模索しました。

 

f:id:blackLab:20180620112530p:plain

つまり、Webページ(HTML)は、そのままNginxを使ってクライアントに提供しますが、

クライアントがサーバとSocket.IOによる双方向通信をしたいよ!という時だけ、Nginxへ一旦要求をもらって、Node.jsへ転送し、クライアント↔サーバ間をコネクションさせます。

 

難しいことを書きましたが、案外簡単にいけました!

 

① Node.jsとnpmのインストール

Node.jsをインストールします。

sudo yum install nodejs

 

次に、npm(Node.jsのパッケージ管理)をインストール。

これがあれば、Socket.IOなどのライブラリを入れることができます。

sudo yum install npm

 

そして、Socket.IOをインストールします。

# 任意のSocket.IOを動かすディレクトリを作成
sudo mkdir /var/sample
# そこへ移動
cd /var/sample
# npmを初期化
sudo npm init -y
# Socket.IOをインストール
sudo npm install socket.io

 

② NginxとNode.js(Socket.IO)との連携

Nginx未導入であれば、インストールします。

sudo yum install nginx

 

Nginxの設定ファイルを書き換えます。

設定ファイルは、一般的に、/etc/nginx/conf.d/default.confを書き換えればOKでしょう。

僕は、以下の形に書き換えました。

# default.conf

#ここがポイント!Socket.IO通信時、ポート3000番にひねる
upstream io_nodes {
    ip_hash;
    server 127.0.0.1:3000;
}

server {
    listen       80 default_server;
    listen       [::]:80 default_server;
    server_name  _;
    #root         /usr/share/nginx/html;

    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;

    location / {
        root    /var/www/html;
        index   index.php index.html;
    }

  #PHPとの連携設定(PHP未使用なら不要)
    location ~ \.php$ {
        root           /var/www/html;
        fastcgi_pass   127.0.0.1:9000;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        fastcgi_param  PATH_INFO   $fastcgi_path_info;
        include        fastcgi_params;
    }

    location ~ \.inc$ {
        deny all;
    }

  #ここがポイント!
    location /socket.io/ {
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_http_version 1.1;
        proxy_pass http://io_nodes;
    }

    error_page 404 /404.html;
        location = /40x.html {
    }

    error_page 500 502 503 504 /50x.html;
        location = /50x.html {
    }

}

 

保存したら、Nginxを再起動します。

sudo service nginx restart

 

③ 双方向通信の動作確認

では、動作確認として、試しにページ更新不要な、リアルタイムチャットシステムを作ってみましょうか。

 

任意の作業ディレクトリ(今回:/var/sample配下)に、

チャットシステムを司る、javascriptのサーバプログラムを以下のように作ります。

「server.js」としました。

//server.js

// 1.モジュールオブジェクトの初期化
//ポート3000番をリッスン var fs = require("fs"); var server = require("http").createServer(function(req, res) { res.writeHead(200, {"Content-Type":"text/html"}); var output = fs.readFileSync("./index.html", "utf-8"); res.end(output); }).listen(3000); var io = require("socket.io").listen(server); // 2.イベントの定義 io.sockets.on("connection", function (socket) { socket.on("msg", function (data) { console.log(data); io.sockets.emit("public", data); }); // 接続開始カスタムイベント socket.on("connected", function () { }); // メッセージ送信カスタムイベント socket.on("publish", function (data) { io.sockets.emit("publish", data); });

 

そして、チャットのWebページを作ります。

(これは、もちろん、Web公開ディレクトリにです)

「chat.html」

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999" xml:lang="ja" lang="ja">
<head>
    <title>Chat Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="/socket.io/socket.io.js" type="text/javascript"></script>
    <script type="text/javascript">

var socket = io();

socket.on("connected", function () {});  // 接続時
socket.on("disconnect", function (client) {}); // 切断時

socket.on('public', function(msg) {
    console.log(msg);
    $("div[id=chat]").append("<div class='messages'>" + msg + "</div>");
});

$(document).ready(function(){


});

function sendMsg(){
    var msg = $("input[name=msg]").val();
    console.log(msg);
    socket.emit("msg", msg);
}

    </script>
</head>
<body>
    <input type="text" name="msg" size="50" />
    <input type="button" value="送信" onclick="sendMsg();" /><br><br>

    <div id="chat"></div>
</body>
</html>

 

このHTMLでは、以下のように、Socket.IOのライブラリを読み込んでいるのですが、

<script src="/socket.io/socket.io.js" type="text/javascript"></script> 

さきほど、②でNginx↔Node.jsで連携を図れるようにした際、

Nginx側で「/socket.io/」へアクセス要求された時にポート3000番にひねる設定をしましたね。

さらに、Node.jsのプログラム(server.js)は、ポート3000番をリッスンしているため、server.jsへ飛んで、Socket.IOで通信ができるという仕掛けなのです!

 

最後に、server.jsを起動したら、リアルタイムチャットが動き出すはずです。

# server.jsを起動
node server.js

  

f:id:blackLab:20180620124701p:plain

どうでしょうか?

ページを更新しなくても、2つのクライアント間で入力した文字が、リアルタイムに画面に反映されます!

 

 

では、次回はお絵かきのシステムを大公開しちゃいます。

Phase26 悪魔の契約はやっぱりブラック

 

前回、事件が起きた。

blacklab-blog.net

 

それは、修士2年の春先の出来事だった。

 

就職先も僕の調子の良い性格が功を奏して、早々と決まっており、

春・夏・秋のみなみけ三姉妹を悠々とやり過ごし、凍てつく冬の修論を「パパン、なんとかして〜」と教授に泣きついて乗り越えれば、無事卒業。

もうこのブラック研究室とはおさらば!というビジョンだったのに・・・。

 

人生、ほんと思い通りにはいかないのですね。

 

前回の事件のおさらい

背景に、教授が国の研究機関から引っ張ってきた「動画圧縮装置プロジェクト」がある。

『3年後に、4K動画を無線通信で飛ばせるぐらいのサイズにリアルタイムに圧縮できるようにするよ!』というフレコミで、多額の予算をゲットしていた。

 

こんなチップのイメージ。

f:id:blackLab:20180620101541j:plain

 

僕・ハッカー「3年後か〜、おれらには関係ないや〜ワッハッハッハ!!」

教授「3年あるからな〜、まぁゆっくりいきましょ!ニッ!」

こんな感じの構えで、特になにもやっていなかった。

 

しかし、

教授のかわいいさ余って憎さ百倍、いや、憎さしかないドジっ子っぷりにより、

来春に中間審査、つまりその装置(チップ)のプロトタイプができていないと打ち切られてしまうことがこのタイミングで発覚した。

 

もう、期日まで10ヶ月を切っていた。

 

 

その日から、教授の目つきが、変わってしまった・・・。

 

悪魔の契約にサイン

僕とハッカーは、ある日、教授室に呼ばれた。

 

教授「まぁ、この前伝えた通り、我がラボは大変危機的な状況にあるんだなこれが」

僕・ハッカー「はぁ。でしょうね。」

 

教授「予算打ち切られたら、来年君たちの後輩が学会に参加できなくなるかもしれないし、かわいそうすぎるじゃん?」

僕・ハッカー「はぁ。(確かにサムイ島は楽しかったけども)」

 

教授「だから、動画圧縮のチップをなんとか卒業までに作ってほしいんだ」

僕・ハッカー「そうなりますよねー・・・」

 

 

教授「タダでとは言わん!君たちに、給料を支払おう!」

僕・ハッカー「む?」

 

教授「そして、修論は、完成したチップの説明書(数ページ)だけで良いと言ったら??」

僕・ハッカー「むむ?」

 

なんと教授は、僕らがこのプロジェクトを進めれば、

月8万円の給料と、修論の実質免除を特典として与えるというのだ・・・。

 

うまい話かもしれない・・・。

しかし、日々デスマーチとなることは容易に想像できる。

これは悪魔の契約だった。

 

 

教授「じゃあ、雇用契約書にサインを」

僕・ハッカー「むむ?」

 

「プロジェクトの研究支援員」と題目が書かれた契約書を出された。

これにサインすれば、給料が発生するらしい。

 

僕らは勘違いしていたが、拒否権なんて最初から無いのだ。

半泣きで、サインしたのだった。

まさに保証人のサインのような光景だったかもしれない。

 

教授「ありがとう。でも、失敗したら、わかるよね?」

僕・ハッカー「ひぃぃ!」

 

プロジェクトが間に合わかなったら、

大人の力で卒業も踏みにじられる可能性もある。そう目で訴えられたのだった。

 

 

 

さぁ、残り10ヶ月も無いデスマーチに参加することになった僕ら。

果たして、生きて卒業できるのか?!

 

では、また!!

 

>>Next Phase

Phase27 チップ設計は果てしなくてブラック その1

 

Phase25 教授のドジっ子っぷりは壮絶ブラック

 

あなたは、どれほどのドジっ子までなら笑って許せますか?

 

僕がギリギリ許せたのは、以下のレベルぐらいかな。

 

友達3人とスノボに行った時、

リフトを登り、友達Aに滑りを教えるために、友達Bにボードを預けたら、

友達B「ごっめ〜ん、お前のボード下に流しちゃった♪テヘペロ」

 

僕「・・・・・・・・・・・そっか」

いやー、寛大ですね。

 

まぁ、ただ絶句のあまり「そっか」しか言えなかったんですけどね。

その後、ひとりで半泣きでブチ切れながら必死でボード捜索したっけな。

全然許せてねぇ!

 

脱線しましたが、このブラック研究室には、超ドジっ子がいたんですね。

いやはや、盲点でした。

誰かというと、おなじみ、教授なのです。

 

ドジっ子レベル1 「名前を覚えない」

この教授、何年関わっても名前を覚えない。

 

『君さぁ』『ねぇねぇ』で、いつも生徒を呼ぶため、

僕は一時期まで「あれ、もしかして名前呼ぶの恥ずかしい的な? 異性意識し始めちゃった男子的な?」と思ったりもした。(そんなわけあるか)

 

そして、たまに名指しで雑用お願いメールを送ってくる時があるのですが、こんな調子なのだ。

(名前は全部仮名です)

 

『田原くん さっきの例の件、お願いしますネ』

 

僕「ん?田原くんなんてこの研究室に居ないけど・・・」

・・・しばし皆沈黙。

ハッカー「あ、なるほど! 田中と原田の名前混ざったのか!ウワッハッハッハ!!」

僕「笑えるな!田中と原田ちゃかしに行ってくるわ」

 

しかし・・・

田中・原田「例の件って多分、加藤がお願いされてたやつですよ」

僕「は??」

もう、わけがわからない。

 

 

ドジっ子レベル2 「予定をとにかく忘れる」

ゼミ中・・・

教授「ユア、プレゼンテーションスキル、イズ、ベリー、ロー!」

留学生「Oh...」

 

コンコンッ、とノック音がゼミ室に響く。

 

教授「誰だ、まったく、ゼミ中に失礼すぎるだろ!!」

 

ドアの外をのぞきに行くと、

教授「お〜〜〜!!!そうか〜〜!!!しまった〜〜、あいたたた〜」

ちびっこ「どうしたんすか。プ〜クスクスクス」

 

教授「学部3年生が全員来ちゃってる!!この時間、研究室説明の時間だった!!」

ちびっこ「まじっすか・・・。プ〜クスクスクス」

 

すさまじい忘れっぷりに、皆驚愕。

教授「で、このあとすぐ出ないといけないから、べっくす!あとよろしく!ニッ」

僕「は??」

このあと、くそみたいな概要パワポだけ託され、即興で説明させられました。

 

ドジっ子レベルMAX 「研究の締め切りを忘れる」

以前お話した、ファービープロジェクトを覚えているだろうか。

 

blacklab-blog.net 

ほんとのこのファービーとは無関係なのですが。

 

教授の「○年後には、すべてに受け答えできるファービーを実現します!」的な無謀なプランを提示して、無理やり国の研究機関から予算を得ているため

1コ上の音声チームの先輩が、超絶デスマブラックを食らっているという話があったかと思うんですが、

実は、ちょっと続きがありまして・・・。

 

なんと、我が窓際チームのテーマである、「動画圧縮」に対しても、

無謀なプラン提示により、国の研究機関から多額の予算を得ていたのです!

 

しかし、納期・実現予定時期は、『3年後』に設定されていたので、

就活を終え、卒業まで残り1年しかない僕にとっては、「そんなもん知らんがな」状態なわけで、のうのうと残り僅かな放置ブラックを味わっていたのだ。

 

 

だったのですが・・・

だったのですが・・・

 

 

ここでまさか、ドジっ子がMAXレベルで発動することになるとは・・・

 

 

 

教授「やっべ!!やっべ!!忘れてた!!来春に中間審査があるんだった!!」

 

中間審査では、動画圧縮のチップのプロトタイプが完成していないといけないらしい。

審査が通らなければ、そこで予算ストップ。

つまり、研究室は崩壊。

 

ちびっこ先生「まじ知らないっす知らないっす知らないっスクスクスクスdfっvdmふぇえwふじこ」

 

来春とは、僕が卒業する時期。

それまで絶対に巻き込まれることは、わかりますよね・・・?

 

果たして、これからどうなる?!

では、また!!!

 

 >>Next Phase

Phase26 悪魔の契約はやっぱりブラック

 

【IT備忘録】リアルタイムお絵かきシステムを作ってみた① 〜Socket.IOで双方向通信〜

 

こんなものを作ってみました

余興用にまたちょっとしたものをつくってみました。

「リアルタイムお絵かきシステム」です!

 

f:id:blackLab:20180531214347j:plain

 

スマホでお絵かきすると、投影用のパソコンにもリアルタイムに絵が書かれてゆきます。

 

ほぼほぼ遅延無しで、筆使い(指使い?)がパソコンに反映されていますね。

 

 

面白いですね〜。

一度、大きな忘年会で、以下のクイズシステムと組み合わせて、

「誰が一番○○さんを上手く描かけるか?!」という問題にしてこれを使ったのですが、

かなり盛り上がりました。

blacklab-blog.net

 

決め手は「Socket.IO」

クイズシステムも同じ仕組みを使っているのですが、

この技術の決め手は「Socket.IO」です。

 

f:id:blackLab:20180531215441p:plain

通常、HTTPでは、クライアントがサーバに対して、ページや情報を取りに行く、単方向の通信しかできません。

 

ですが、このSocket.IOというのを使ってやると、上記だけでなく、サーバがクライアントに対して、「状況変わったから、画面書き換えてね」という情報を送ってやることができるのです。

双方向通信、まさにインタラクティブってやつですね。

 

それを応用してやると・・・

f:id:blackLab:20180531222624p:plain

今回、それを応用してやるとこうなります。

 

<クライアント→サーバの通信>

まず、クライアント①にあたるスマホから指で線を引きます。

書いたこと(線の開始点・終了点も含め)をサーバへ伝えます。

 

<サーバ→クライアントの通信>

次に、サーバが、クライアント②にあたるPCへ「線書かれたんだけど」という情報を伝えてやります。

それを受け取ったPCは、「ここからここまで書かれたらしい」ということで、その通りに画面内に線を引っ張ります。

 

これらの通信によって、スマホで書いた線が、PC側にも反映され、絵の同期が取れるわけですね。

 

対応ブラウザ(クライアント側)

このSocket.IOは、Google Chrome・Safari・Firefox、そして鬼門のIEちゃんでも比較的新しいバージョンなら動きます。多分、Operaとかの他のニッチなブラウザでも動くはずです。

 

サーバ側

サーバ側は、Node.jsという土台のWebサーバプログラムを導入し、その上にSocket.IOのライブラリを導入してやることになります。

このあたりは、次回詳しく書きます。

 

デモページ

f:id:blackLab:20180531225228p:plain

スマホは、画面回転をOFFにした上で、横に90度本体を持ち替えた状態で書いてください。そうすると、PC上に正しい方向で線が書かれるはずです。

※下の写真の状態です!

f:id:blackLab:20180531225733p:plain

 

※同時に複数の方がアクセスして絵を書くと、当然PC上にそれが反映されますので、故障ではありません!(笑)

 

 

次回は、実装の仕方など、もう少しブレークダウンして書きたいと思います。

 

では、また!!!

 

>>次回の記事はこちら

blacklab-blog.net