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

テキストだけですべてを説明しようと思うとつい文字数が増えてしまいがちです。しかし短縮しすぎると伝わらなくなってしまいます。バランスが大事なのですが、それは紙のような静的なテキストの場合と言えます。

Webであればもっとダイナミックに、ユーザ操作に合わせてコンテンツを提供することだってできるはずです。そこで使ってみたいのがExpounderです。

Expounderの使い方

Expounderのデモです。

下線がある文字をクリックすると、コンテンツが追加されます。主に単語の説明であったり、補足する内容が表示できます。単語をすでに知っている人にすれば冗長的な説明は不要ですし、ツールチップのようにマウスを当てていなくとも良いのが便利です。

文章は次のように用意します。

In the land of Mordor, in the fires of <span data-expounder="mount-doom">Mount
Doom</span>, the Dark Lord Sauron forged in secret, a master ring, to control
all others.

<div data-expounded="mount-doom">Mount Doom is that big-ass mountain over there
with the fires coming out of it.</div>

効果的な使い方ができると、Web上での文章ならではの見せ方ができそうです。

ExpounderはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

Expounder

skorokithakis/expounder: A library for explaining things in HTML.

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2