ITエンジニア/デザイナ向けにオープンソースを毎日紹介

dabbletはHTMLとCSSを記述してその結果をリアルタイムで確認できるソフトウェアです。データをGistに保存できます。

dabbletはCSSのプレイグラウンドです。HTMLとCSSを記述してリアルタイムでその適用結果を確認できます。


トップページです。上半分が適用されたHTML、下がそのCSSとなっています。


上にマウスを持っていくとメニューが表示されます。


ログインします。GitHubアカウントでログインできます。


色のところにマウスを持っていくとマウスオーバーで色が表示されます。格好いい!


グラデーションだとバルーンもグラデーションがかっています。


HTMLに切り替えて記述もできます。


メニューも色々です。保存しておくこともできます。


表示の配置を変更できます。


重ねて表示もできます。


Gistに保存できます。

dabbletを使うとリアルタイムに記述したスタイルシートがそのまま展開されていくのが面白いです。特にCSS3などの新しいプロパティをどう活かすか、みたいな実験をするのに向いていそうです。

dabbletはPHP/JavaScript製、NPOSL-3.0(The Non-Profit Open Software License version 3.0)のオープンソース・ソフトウェアです。


MOONGIFTはこう見る

Webベースのソフトウェアであればデモサイトを立てたりして、その場ですぐに試せる環境を作るべきでしょう。ダウンロードして自分のWebサーバにインストールして〜というのはあまりに面倒です。気になった時にちょっと遊べる仕組みを用意しておくと利用者にさらに使ってみたいと思わせられるでしょう。

そんな時にもJavaScriptは有利です。サーバサイドがなくても動作しますし、デモデータをリセットしたりする必要がありません。データの保存が必要であればローカルストレージやGitHubを使う手もあります。JavaScriptで動くソフトウェアを作ったらdabbletのような仕組みを真似してみるのが良さそうです。

The first commented line is your dabblet’s title ✿ dabblet.com

LeaVerou/dabblet - GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2