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

何かの技術をアピールする際にデモアプリを作るのは良い方法です。何ができるのか想像するのは難しいですが、デモアプリを見ることで学べることは多いでしょう。たとえばRailsはブックマークサービスのようなものを10分で作ったりして、その開発効率をアピールしていました。

今回紹介するhtmboxはHTMLでAjaxを扱いやすくするhtmxの技術アピールとも言えるソフトウェアです。Dropbox風のUIを実現しています。

htmboxの使い方

トップページです。

ファイルを選択したところです。プレビューは残念ながらありません。

小さめのアイコン表示。

大きめのアイコン表示。

リネームもできます。

htmboxに記載されているJavaScriptは多くなく、非同期処理などをHTML側にDSLで記述するhtmxで実装されています。ファイルの一覧表示やクリック、リネームなどの処理だけになりますが、Dropbox風のファイル管理UIが手軽に実装できるのは分かるでしょう。

htmboxはHTML(Pug)、JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

htmbox - A Dropbox clone in htmx

rajasegar/htmx-dropbox: A Dropbox clone in htmx

 

MOONGIFTの関連記事

  • DevRel
  • Com2