sDevEnv - Simple Development Environment

| コメント(0) | トラックバック(0)
さてさてGWも終わりですが、みなさんいかがお過ごしでしょうか。
私はこんなものを作ってみました。

sDevEnv - Simple Development Environment

簡単に言うとjsdo.itの劣化コピー(^^;です。
HTML、CSS、Javascriptのオンライン簡易エディタですが、保存先はIndexedDBなのでプライベートとして利用できます。
プライベートすぎてPC間の共有もできませんが。。。
一応Export/Importを作ったので持ち運びはできます。

ちょっとしたコーディングをしたいけど開発環境を整えるのはめんどくさい、オンラインでほかの人に見られるのは恥ずかしい、出先でスマホでお手軽にコーディングしたいという場面に最適ではないでしょうか。

IE11、GoogleChrome42、Firefox37で動作することを確認しました。
おそらくIE10以前では一部の機能が使えないと思います、まあ、2016年1月にはほとんどサポートが切れるからいいよね。

ちなみに、まだこれを使ってコーディングしていないので、今度使い勝手を試してみよう。

技術的な話

リッチテキストなエディタはcontenteditableや気合で独自実装というのが多いと思いますが、今回はtextareaで作ってみました。
もちろんtextareaでは装飾できないので、バックに同じ内容のpreを配置してそちらにspanなどを追加して背景色をつけています。

20150506.png
これはFacebook等で使われているテクニックだそうです。
確かに簡単にそれっぽいエディタが作れますね。


もう一つ技術的な話

ローカルへの保存にはMozillaのlocalForageを使いました。

localForageはIndexedDB、localstorage等々使えるものを使ってローカルに保存してくれます。
しかもインターフェースがlocalstorageライクなのでお手軽に利用可能。
非同期アクセスになるのでlocalstorageのパフォーマンスへの影響を考える必要もないので、大変便利です。

むしろlocalstorageの仕様をlocalForageのように変更してほしいくらい。。。

愚痴

最初localForageを使わずlocalstorageで作ったのですが、Anodroidのchromeブラウザでブラウザを強制終了?するとlocalstorageに保存したはずの内容が保存されていないという問題が発生。
おそらくキャッシュが効いていてflushされずに閉じられているのだと思いますが、ネットを徘徊しても有用な情報は得られず。。。
これはもうlocalstorageは使うなということでしょうか。

localForageを使うようにしたところ保存されるようになったので、試してませんがIndexedDBなら問題なく使えるのかな。


トラックバック(0)

トラックバックURL: http://murakya.net/mt/mt-tb.cgi/53

コメントする

オリジナルゲーム

オンラインツール