YLog

超音波通信でファイル共有するツール作りました

超音波通信で鍵交換を行うことで近くのコンピュータに簡単かつセキュアにファイルを共有できるWebサービスを作ってみました。 現時点ではアルファ版という形で公開しています。

追記: Twitterアカウント開設しました!

用途 / ユースケース

  • 目の前にいる人にファイルを渡したいけど USB メモリが無い。
  • けどメールで渡そうとしてもファイルサイズが大きすぎる。
  • とは言っても Dropbox 等クラウドストレージは共有 URL が長すぎてタイプが面倒。
  • しかもクラウドストレージはセキュリティ上の心配がある。
  • MacじゃないとAirDropが使えない。

Airbox の目的はこれらの問題を解決することです。

  • 内蔵スピーカ・マイクだけでファイルを渡せる。
  • メールよりもサイズ制限が緩い (現在は500MB)。
  • 簡単操作で送受信可能。
  • クライアント暗号化により高いセキュリティを確保。受信用パスワードで二重のセキュリティ。
  • ブラウザ上で動くのでインストール不要で、しかもクロスプラットフォーム。

課題

  • 環境によってはうまく通信できないことがあるので、妨害に強い変調方式を導入することで通信品質を上げていきたいと考えています。
  • 利益化 (サービスの維持にはある程度の収入が必要になるので…)

Cutout Assistant: ベクトルアートのアンチエイリアリング解除を支援するツール

ラスタライズされたベクトルアートは、背景から切り出したり、特定の領域の色を変えたりする加工を綺麗に行うのが意外と難しいものです。 この理由は、アンチエイリアシングにより、異なる色の隣り合った領域間に中間色が生成されてしまう為です。 グラデーションの存在も邪魔になります。 解決法の一つはアンチエイリアシングを解除をすることで、その方法の一つは減色を行うことですが、あまり良い結果にはなりません(下図)。

アンチエイリアシングにより上部のエッジが数段階の色で表現されてしまっています。 この原因は、ある箇所の色が離れた箇所の中間色を近似するのに用いられてしまうことです。 そこで、隣接した領域の色のみを用いることにより、この現象を起こりにくくした減色ツールを作ってみました

ソースコードはGitHubに上げてあります。 プルリクエスト大歓迎です。

簡単にアニメーション化できるパイチャートをCSSオンリーで描画する

今開発しているWebサービスで使うために、CSSだけでパイチャートを作成してみました。 CSSでパイチャートを描画するのは以前から行われてきましたが、今回作成したものは角度の制御にCSS3 Animations/Transitionsが適用可能で、従来手法と異なり不連続点が無く、簡単に滑らかなアニメーションを付加できるという特徴があります。

transform: rotate() により2個の半円を回転させ、重ね合わせることで任意の角度のパイチャートを描画するという方法は以前から知られていました。 しかし、2個の半円を重ねる方法では180°未満の角度の円弧を表せないため、角度が180°になる点で背景色と前景色を入れ替えるという方法を取らざるを得ません。CSS3 Transitionsで角度をアニメーションさせる場合には、角度が180°未満かどうかをJSで毎フレーム確認する必要があり、大変不便です。そもそもCSS3 Transitionsベースのアニメーションを制御するために毎フレームJSを実行するのは本末転倒です。

今回作成したものは、目的の角度とその二分角で transform: rotate() を適用し、さらに overflow: hidden を駆使することにより、こうした不連続点を生じることなくパイチャートを実現することができます。

JSFiddleで動作デモをご覧になれます。 ソースコード(SCSS)と、そのまま使えるコンパイル済みCSSファイルをMITライセンスでGitHubにて配布中です。

使用方法

基本的な使い方はJSFiddleのエントリを参考にして下さい。 JSFiddleではCSSクラスにより角度を制御していますが、角度を直接指定したい場合には以下のようにします。

1
2
3
4
5
6
7
8
9
/**
 * <code>pie</code>の円弧の角度を設定する。
 * @param pie 設定対象の円弧のHTML要素。
 * @param angle 円弧の角度を [0, 360] の範囲で指定する。
 */
function setAngle(pie, angle) {
    $(pie).find(".pcp-rot.full").css("transform", `rotate(${+angle}deg)`);
    $(pie).find(".pcp-rot.half").css("transform", `rotate(${angle / 2}deg)`);
}

注: css関数の第二引数にはECMAScript 2015のテンプレート文字列機能を使用して値を指定しています。古いブラウザをターゲットとする場合は、文字列連結に置き換えてください。