Tech Sketch Bucket of Technical Chips by TIS Inc.

WebRTC(PeerJS)で遠隔作業支援システムを作る(5)

Pocket

WebRTCを用いた遠隔作業支援システムを作ります。 前回 はシグナリング処理からスマートグラスのカメラ映像をリアルタイムで監視端末に表示する部分までを解説しました。最終回の今回は、DataConnectionを用いたテキストメッセージや画像の転送処理、及び接続終了処理について解説し、遠隔作業支援システムとして完成させます。

WebRTC(PeerJS)で遠隔作業支援システムを作る(4)

Pocket

WebRTCを用いた遠隔作業支援システムを作ります。 前回 はCoffeeScriptで記述されたモジュールの全体構成と、PeerJS & MediaStreamの初期化処理について説明しました。今回はWebRTCの肝となるシグナリング処理からスマートグラスのカメラ映像をリアルタイムで監視端末に表示する部分までを解説します。

WebRTC(PeerJS)で遠隔作業支援システムを作る(3)

Pocket

WebRTCを用いた遠隔作業支援システムを作ります。 前回 はスマートグラス(Vuzix M100)とサーバサイド(node.js + express + peerjs-server)の環境構築について説明しました。今回はCoffeeScriptで記述されたモジュールの全体構成と、PeerJS & MediaStreamの初期化処理について解説します。

[JointJS入門]JointJSを使ってブラウザ上にフォルダ構成図を描いてみよう

Pocket

HTML5の登場によりCanvasやSVGなどを利用することでWebサイトやアプリでリッチな表現ができるようになってきています。しかし、CanvasやSVGを使って全て自前でグラフを描くのは大変なので、D3.jsなどのライブラリを使用してグラフや図を描くことが多いと思います。そこで、今回は「JavaScript Diagramming Library」であるJointJSを使い、ブラウザ上に図を書いてみます。

「Backbone.js」と「jQuery Mobile」を組み合わせてネイティブっぽいWebアプリを作ってみよう!~ ②Backbone.js編 ~

Pocket

前回 は、Ruby on Railsを使ってサーバー側にRESTful APIを実装しました。
今回はBackbone.jsを使ったクライアント側の実装をみていきます。

AWS Management Consoleのタイトルを変更する拡張機能

Pocket

AWS Management ConsoleのタイトルはEC2, S3といったレベルでしか切り替わらない為に、Instance一覧ページとSecurity Groupのページの見分けがつきません。この問題をGreasemonkey Script/Chrome Extensionを使って解決します。

FileAPIを利用して簡単なWebアプリをつくる

Pocket

HTML5の周辺技術のFileAPIを使ってblobURLを利用してどのようなことが出来るか、簡単なWebアプリケーションを作成して少しばかり触ってみました。

JavaScriptでバイナリファイルを扱う方法

Pocket

HTML5によって、<audio>や<video>などメディアファイルを扱う機能が拡充され、JavaScriptからも音声ファイルが取り扱えるようになりました。
各ブラウザ毎に対応状況は異なりますが、これらの機能を有効活用するためAjaxリクエストによって音楽のバイナリファイルを取得し、再生するまでのJavaScriptをまとめてみました。

jQuery mobileの動作確認用Bookmarklet for Chrome

Pocket

はじめに

jQuery mobile 使ってますか?

同一ソースでPC用ブラウザからiPhone、Androidまで対応できる便利なフレームワークですが、開発中は基本的にGoogle Chromeを用いて動作確認や画面の確認を行なっています。
スマートフォンの通信・CPUが早くなったとはいえPCには敵いませんし、キーボードから手を離すのも億劫ですから、こうしてGoogle Chromeで確認している人は多いのではないでしょうか。

# 個人的には普段はFirefoxを使っていますが、iPhone/Android向けWebサービスを作る場合には、同じWebkit系ブラウザ(Safari, Chrome, etc.)で動作確認した方が良いように感じます。

画面サイズの問題

さて、Google Chromeで確認する方法は大抵の場合うまくいくのですが、時々「これ、iPhoneの画面サイズで見たらどう見えるの?」と気になることがあります。
もちろんiPhone実機/エミュレータで表示を確認しても良いのですが、手軽にやるのであればChromeのウィンドウサイズを変えてしまうBookmarkletはどうでしょう。
力技ではありますが、それだけに結構有効だったりします。

  • iPhone、標準ブラウザ、上部のアドレスバーが出た状態(320 × 356 px)にChromeのサイズを調整するBookmarklet
  • iPhone、標準ブラウザ、上部のアドレスバーが隠れた状態(320 × 416 px)にChromeのサイズを調整するBookmarklet
  • iPhone、フルスクリーンモード(320 × 460 px)にChromeのサイズを調整するBookmarklet

動的なページを開発している最中はブラウザを更新することが多い為に使いづらいですが、静的ページのレイアウト確認であれば、「Responsive Design Bookmarklet」も便利です。
開発中はこの記事に載せた「Chromeのサイズを調整するBookmarklet」を用い、確認には「Responsive Design Bookmarklet」を使うなど、上手く使い分けていきましょう。

Responsive Design Bookmarklet [http://responsive.victorcoulon.fr/]

使い方

1. Google Chromeで上記のリンクをD&Dしてブックマークバーに登録します
2. サイズを変えたいページでBookmarkletを実行すると、新しいWindowが指定したサイズで立ち上がります

続きには実際に試してみた画像と、iPhoneの各部のサイズを載せておきますので、参考にどうぞ。

JavaScriptを使った簡易ツール作成のススメ

Pocket

はじめに

技術的に「濃い」記事が多いTech-sketchですが、逆にあっさり系の記事が不足しているため、気軽に読める記事を書いてみようと思います。
JavaScriptを使ってブラウザ上で動く簡易ツールを作ってみませんか?

簡易ツールを作りたい!

同じツールを実現する場合でも、幾つかの方法があります。