ラベル HTML5 の投稿を表示しています。 すべての投稿を表示
ラベル HTML5 の投稿を表示しています。 すべての投稿を表示

2014年9月25日

JavaScriptが実行できるリアルタイムオンラインエディタ作ってみました

複数人で同期して編集できるWebエディタを探していたのですが、 見つからず・・・

jsfiddlejsdo.it は同時編集できないため、ちょっと探してたのとは違って、
Scratchpad はリアルタイムで編集できてよいのですが、JavaScriptが実行できない。
CodePen は同期するのに PRO アカウントが必要らして、諦めて、仕方ないので作ってみました。

追記:
SyncFiddle はリニューアルし、使用しているフレームワークの構成が変わりました。
URL は http://syncfiddle.net/ になりました。

仕様とか

  • アクセスするとランダムにid振ったページ空間に飛ぶ
  • そのURLを共有すると複数人で同時編集できる
  • 相手のことがわかるのはidだけ
  • コードとカーソル位置がわかる
  • JavaScript コンソールがある
  • その時のHTMLコードを .html で保存できる
  • ページの破棄という機能はないですが、コードを空にしてユーザ数 0 になるとそのうち消える
  • プライベートタブ(シークレットタブ)とか使ってみるとわかりやすいかも

レイアウト

  • PHP フレームワーク PunyApp
  • JavaScript Backbone + r.js
  • エディタは CodeMirror の HTML5 mixed モード

こないだ公開したフレームワーク PunyApp のテストも兼ねて作ってみたのですが、 なにしろサーバが古くて大変。最初は WebSocketにしようと思ったけどフレームワークのテストにならないので pollingしてます。今更ですがサーバーから立て直したほうがよかったです。一応公開してますが、サーバが不安定になるかもしれないです。
Backbone.js と r.js (require.js)、前から触ってみたくて、今回はじめて使ってみました。
自由度が高くて、View周りとかちょっと道を外れると ぐしゃってしまうので注意が必要ですが、 自分にとっては使い心地がよかった。まだまだ勉強中です。



2012年4月24日

JavaScriptで文字コード変換ライブラリ作ってみた

文字コード変換ライブラリを JavaScript で作りました。
文字列ではなく配列 or TypedArray で処理します。

追記

↓動作サンプルを作りました
文字コード変換 動作サンプル

Unicode の変換が可能になりました。
文字コード配列から URLエンコード/デコード が可能になりました。
あと説明とサンプルも少し載せました。。(説明不足でごめんなさい)

こないだの 「JavaScriptだけでzipファイルの解凍 - Unzipper.js」が
SJIS ファイルとかだと表示で文字化けするので、ついつい。。

動作確認は、zip ファイル解凍のデモページでわかると思います。
zip の中に SJIS や EUC-JP のファイル (ファイル名) がある場合でも
UTF-8 表示で化けなければ問題なしです。


↑のデモページを開いて、デスクトップなどから zip ファイルをドロップすると
解凍して結果のテキストを表示します。

※ JavaScript だけで動いていて、どっかのサーバなどに送信したり保存したりしてません


今回はぜんぶ同期で書いちゃったのですが、
バイナリファイルとかが対象だとちょっと重たくなりがち。。
気が向いたら非同期も可能にしてみたいです。

あと、Unzipper.js と同じレポジトリにしちゃったけど
これもできれば別にしたいところ。
追記→ 作りました

使い方:
// <script src="encoding.js"></script>
//
// Encoding というオブジェクトがグローバルに定義されます
// 配列に対して変換または判別します

// 文字コード変換
var utf8Array = new Uint8Array(...) or [...] or Array(...);
var sjisArray = Encoding.convert(utf8Array, 'SJIS', 'UTF8');

// 文字コード自動判別で変換
var sjisArray = Encoding.convert(utf8Array, 'SJIS');
// or  
var sjisArray = Encoding.convert(utf8Array, 'SJIS', 'AUTO');


// 文字コード判別 (戻り値は下の「共通の文字コード値」のいずれか)
var encoding = Encoding.detect(utf8Array);
if (encoding === 'UTF8') {
    alert('UTF8です');
}

// 特定の文字コードかどうか判別
var isSJIS = Encoding.detect(sjisArray, 'SJIS');
if (isSJIS) {
    alert('SJISです');
}

// convert, detect 共通の文字コード値:
//  - 'UTF32'   (detect only)
//  - 'UTF16'   (detect only)
//  - 'BINARY'  (detect only)
//  - 'ASCII'   (detect only)
//  - 'JIS'
//  - 'UTF8'
//  - 'EUCJP'
//  - 'SJIS'
//  - 'UNICODE' (JavaScript Unicode String/Array)
//
// ※ (detect only) は Encoding.detect() でのみ有効 (変換はできない)
// ※ 'UNICODE' は JavaScript の Unicode コード値 (0xFF 以上の数値になりえる)
//

サンプル:
// EUCJPの文字コード配列 (中身は 'こんにちは、ほげ☆ぴよ')
var eucjpArray = [
    164, 179, 164, 243, 164, 203, 164, 193, 164, 207, 161,
    162, 164, 219, 164, 178, 161, 249, 164, 212, 164, 232
];
// UTF-8に変換
var utf8Array = Encoding.convert(eucjpArray, 'UTF8', 'EUCJP');
console.log( utf8Array );
// output: [
//   227, 129, 147, 227, 130, 147, 227, 129, 171,
//   227, 129, 161, 227, 129, 175, 227, 128, 129,
//   227, 129, 187, 227, 129, 146, 226, 152, 134,
//   227, 129, 180, 227, 130, 136
// ]
//   => 'こんにちは、ほげ☆ぴよ'

// ---------------------------------------------
// 文字コード自動判別で変換
//

// SJISの文字コード配列 (中身は 'こんにちは、ほげ☆ぴよ')
var sjisArray = [
    130, 177, 130, 241, 130, 201, 130, 191, 130, 205, 129,
     65, 130, 217, 130, 176, 129, 153, 130, 210, 130, 230
];
// Unicodeに変換
var unicodeArray = Encoding.convert(sjisArray, 'UNICODE', 'AUTO');
// 文字列にして表示
// codeToStringは、文字コード配列を文字列に変換(連結)して返す関数
console.log( Encoding.codeToString(unicodeArray) );
//
// output: 'こんにちは、ほげ☆ぴよ'
//

// ---------------------------------------------
// 文字コードの配列をURLエンコード/デコード
var sjisArray = [
  130, 177, 130, 241, 130, 201, 130, 191, 130, 205, 129,
   65, 130, 217, 130, 176, 129, 153, 130, 210, 130, 230
];
var encoded = Encoding.urlEncode(sjisArray);
console.log(encoded);
// output:
//   '%82%B1%82%F1%82%C9%82%BF%82%CD%81A%82%D9%82%B0%81%99%82%D2%82%E6'

var decoded = Encoding.urlDecode(encoded);
console.log(decoded);
// output: [
//   130, 177, 130, 241, 130, 201, 130, 191, 130, 205, 129,
//    65, 130, 217, 130, 176, 129, 153, 130, 210, 130, 230
// ]

ダウンロード



レポジトリ



その他、なにか問題等あれば
コメントやメールまたは @polygon_planet まで送っていただけるとうれしいです。



デザインに便利な解像度マップ付き壁紙画像合成ツール作った

壁紙とか任意の画像に解像度別のマップを入れて合成できるツールを作ってみました。

HTML とか CSS とかデザインいじってて解像度ごとに確認したい時とか
窓の大きさを一定にしたい時とかに便利です。


↑のページを開いて、デスクトップなどから 画像ファイルをドロップすると
その画像に 1024x768 とか解像度ごとのマップつきで合成してダウンロードできます。

※ソース確認でわかりますが JavaScript で動いていてアプリはユーザー操作とか記録してません

あと、canvas とか HTML5 API, DropEvent などが動かないブラウザでは使えません。
Firefox, GoogleChrome で動作確認済みです。


遊んでみてくれるとうれしいです。



その他、なにか問題等あれば
コメントやメールまたは @polygon_planet までお願いします。



2012年4月17日

JavaScriptだけでzipファイルの解凍 - Unzipper.js

とつぜん書いてみました。


デモページを開いて、デスクトップなどから zip ファイルをドロップすると
再帰的に解凍して結果のテキストを表示します。

非同期 + Pot.js イテレータ を使って実装したくて作ってみました。
zlib inflate を非同期化しています。
数GB の zip も、CPU 負荷を抑えつつ「応答のないスクリプト」警告なしに解凍できましたが
ブラウザによって、ファイルドロップの時点である程度サイズがあると無効になるようです。

レポジトリ



その他、なにか問題等あれば
コメントやメールまたは @polygon_planet まで送っていただけるとうれしいです。



2012年4月11日

JavaScriptライブラリ Pot.js のチートシートと壁紙用ジェネレータ作りました




Pot.js チートシートとジェネレータ ができました。



Cheat Sheet

現時点では、PotLite.js のぶんです。
他のライブラリのチートシートを参考にしながら作ってたのですが、
Pot.js のほうはまだリファレンスも全部書けてないので
重要な非同期系の関数/メソッド/プロパティに絞ってたら PotLite.js と同じになりました。
はじめからそうしてればよかった。。


Cheat Sheet Generator

自分で関数の存在を忘れてしまうことがあって
それもどうかと思うので、忘れないように壁紙にできたらなぁて思って
せっかくだからいつも使ってる壁紙とか好きな画像とアルファ合成できたらいいなって
ジェネレータ作ってみました。
canvas で DataURI にして合成してるだけですが…。(なので Firefox, GoogleChrome, Safari? 限定)

上のリンクからジェネレータのページに行って、
デスクトップとかからブラウザに画像ドロップして合成・生成できます。
※ソースでも確認できますが画像とかをどっかに送信したり保存したりしてません

通常のチートシートは Basic Cheat Sheet のをダウンロードして利用できます。

ジェネレータはこんな感じで背景と合成できます。



以下、Pot.js についてのリンクとか。

Pot.js / PotLite.js

Pot.js は CPU に負荷をかけることなく JavaScript の実行を可能とするユーティリティライブラリです。
PotLite.js は Pot.js の非同期な部分だけを抽出したライトバージョンです。

ダウンロード

マニュアル

その他の情報についてはマニュアル/リンク から参照ください。

レポジトリ




その他、なにか問題・バグ・感想・指摘などあれば、
コメントやメールまたは @polygon_planet まで送っていただけるとうれしいです。



2012年4月5日

並列処理のWorkerぽいWorkeroid実装。JavaScriptライブラリPot.js 1.17 リリース




Pot.js 1.17 と PotLite.js 1.34 リリースしました。





Web Workers

バックグラウンド処理、並列処理ができる HTML5 API の Web Workers は、
主要なブラウザですでに実装されています。

var worker = new Worker('child.js');
worker.onmessage = function(event) {
    alert(event.data); // 'hogefuga' がアラートされる
};
worker.postMessage('hoge');
child.js
onmessage = function(event) {
    postMessage(event.data + 'fuga');
};
上のような感じで使うのですが、基本的に 'child.js' のようにファイル名を渡さないといけないんです。
なので JavaScript が 2 ファイルになります。

並列で 4 スレッドとか 6 スレッドとかしてたら どんどん増えてファイルの管理がめんどいです。

あと、ブラウザによって動作 (子Worker のスコープ) が若干異なっていて
せっかく並列処理がネイティブにできるのに、なかなか扱いにくいものになってしまってます。

そこで、ネイティブ Worker が利用できたら ネイティブで
なければ Worker エミュレータとして、
クロスブラウザに動作する Workeroid (Pot.Workeroid) を実装しました。

Pot.Workeroid

  • 基本的にネイティブ Worker と同じに並列処理ができる
  • ネイティブ Worker がなければエミュレートする
  • クロスブラウザ
  • 子 Worker スレッドで importScripts しなくても Pot.js が使える
  • エミュレート時でも terminate で中断/終了できる
  • ファイル名だけじゃなく関数オブジェクトを子 Workerとして渡せる

ネイティブの Worker は
子Worker プロセス内では 親 window のライブラリなどが使えません。
importScripts('hoge.js') で読み込まないと使えないのですが、
Pot.Workeroid はデフォルトで Pot.js が利用できます。
なので、Pot.Deferred.forEach などを利用して CPU 負荷を抑えた処理が可能です。

最大の特徴として、
コンストラクタに ファイル名のほか、関数を渡すことが可能なことです。

以下は function で Worker スレッドを生成する例です。

var worker = new Pot.Workeroid(function(data) {
    //                                          
    // このスコープの中が 子Worker スレッド     
    //                                          
    var add = 1;                                
    postMessage(data + add);                    
});

// メッセージを受信した時
worker.onmessage = function(data) {
    alert(data);
};

// エラー時の設定 (任意)
worker.onerror = function(err) {
    alert(err);
};

// 1 を 子 Worker に送信 => 2 が alert される
worker.postMessage(1);

をつけたスコープ内が 子 Worker として別スレッドになります。
子 Worker 空間内は、別ファイルに書いてる気持ちでコーディングするとわかりやすいかもです。
たくさんのスレッド作る場合でも、少しの短いコードでも 別ファイルにしなくて済みます。

これで楽に並列処理ができるとうれしい!


Pot.Workeroid の例を含む詳細は Pot.Workeroid リファレンス から参照できます。

あと、簡単な動作テストを jsFiddle に置いてあります。

更新したところ


Pot.js / PotLite.js

Pot.js は CPU に負荷をかけることなく JavaScript の実行を可能とするユーティリティライブラリです。

PotLite.js は Pot.js の非同期な部分だけを抽出したライトバージョンです。

ダウンロード

マニュアル

その他の情報についてはマニュアル/マニュアルからのリンク から参照ください。

レポジトリ




その他、なにか問題・バグ・感想・指摘などあれば、
コメントやメールまたは @polygon_planet まで送っていただけるとうれしいです。



2012年1月11日

HTML5 File APIでドラッグ&ドロップのサンプル-Pot.js+PotLite.jsリリースノート

Pot.js 1.11PotLite.js 1.28 リリースしました。


主な新機能として、HTML5 の File API を使った
ファイルのドラッグ&ドロップ を扱う Pot.DropFile を実装しました。

Pot.DropFile は FileReader でドロップされたファイルをアップロードしたり
内容やサイズを取得してその場で処理することが可能です。


HTML5 とドラッグ&ドロップイベントをサポートしてるブラウザ (Firefox, GoogleChrome, Safari) で
このブログ内に、デスクトップなどから画像やテキストなどの適当なファイルをドロップしてみてください。

ここにドロップされたファイル内容が表示されます。





ソースコード

このサンプルのソースコードです。
DOM ノードを作成するのにあたって jQuery を使用しています。

HTML のソース:
<div id="dropfile-container"
     style="border-color: #ccc; border-style: dashed; border-width: 1px 0 1px 0; margin: 10px;">
    ここにドロップされたファイル内容が表示されます。
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://api.polygonpla.net/js/pot/1.11/pot.min.js"></script>

JavaScript のソース:
$(function () {

    // ドロップされた結果を表示する div
    var targetId = '#dropfile-container';

    // ドロップ用のパネルを作成
    var panel = $('<div/>').css({
        position        : 'fixed',
        left            : '10%',
        top             : '10%',
        width           : '80%',
        height          : '80%',
        minHeight       : 200,
        background      : '#ff8cd3',
        zIndex          : 9999999,
        display         : 'table',
        textAlign       : 'center',
        WebkitBoxShadow : '1px 1px 10px #333',
        MozBoxShadow    : '1px 1px 10px #333',
        boxShadow       : '1px 1px 10px #333'
    })
    .append(
        $('<div/>')
            .css({
                display       : 'table-cell',
                color         : '#fff',
                fontWeight    : 'bold',
                verticalAlign : 'middle',
                fontSize      : '160%'
            })
            .text('ここにファイルをドロップします')
    )
    .hide()
    .appendTo('body');

    // ファイルの情報を表示する関数
    var showFileInfo = function(name, size, type) {
        $('<div/>')
            .text(name + ' (' + type + ' ' + size + 'bytes)')
            .appendTo(targetId);
    };

    // ----- ここから処理の中心 -----
    // 設定と共にインスタンスを生成
    var dropFile = new Pot.DropFile(panel, {
        // メッセージを表示すべき時
        onShow : function() { panel.show() },
        // メッセージを非表示にすべき時
        onHide : function() { panel.hide() },
        // ドロップ時の処理
        onDrop : function(files) {},
        // 画像がドロップされた時
        onLoadImage : function(data, name, size, type) {
            showFileInfo(name, size, type);
            $('<img/>')
                .attr({src : data})
                .css({maxWidth : 500, maxHeight : 500})
                .appendTo(targetId);
        },
        // テキストがドロップされた時
        onLoadText : function(data, name, size, type) {
            showFileInfo(name, size, type);
            $('<textarea/>')
                .val(data)
                .css({width : '90%', height : 300})
                .appendTo(targetId);
        },
        // 不明なファイルがドロップされた時
        onLoadUnknown : function(data, name, size, type) {
            showFileInfo(name, size, type);
            $('<textarea/>')
                .val(data)
                .css({width : '90%', height : 300})
                .appendTo(targetId);
        },
        // ドロップされたファイルが読み込めた時 (このときアップロードも可能)
        onLoadEnd : function(files) {
            // 今回は未使用
            /*
            this.upload(
                'http://www.example.com/',
                'dropfiles'
            ).then(function(res) {
                alert('finish upload.\nresponse:\n\n' + res.responseText);
            });
            */
        }
    });
});

Pot.js / PotLite.js

Pot.js は非同期イテレータと文字列処理を中心とした JavaScript ライブラリです。

Web ブラウザ上や Node.js 上、 UserScript や XUL 上で動作します。
この例のような DOM や HTML5 File API が含む処理は Node.js などの環境では意味がありませんが
テキスト処理やイテレータなどを利用するメリットがあります。
とくに非同期処理を扱う Deferred オブジェクトにより作業効率が向上すると思います。

PotLite.js は Pot.js の非同期な部分だけを抽出したライトバージョンです。

ダウンロード

マニュアル

マニュアルは 2012-01-11 現在、まだすべてのオブジェクトの解説ができてません。。

その他の情報についてはマニュアルから参照ください。


レポジトリ