nehan.jsのリポジトリにpluginsというディレクトリを追加しました。
最初に追加したプラグインは以下の５つです。
nehan.font-awesome.js
先日のエントリでも紹介しましたが、font-awesomeのアイコンを短く書けるプラグイン。
<fa name="user"> <fa name="star">
nehan.gravator.js
emailを指定すると、gravatorのアイコンを出してくれるプラグイン。
<gravator email="sample@example.com" size="64">
nehan.tip.js
いったん内容を表示しないで、クリックしたらポップアップで教えるチップを表示するプラグイン
<tip title="クリックしたら出るよ">クリックしたら表示したい内容だよ</tip>
nehan.pasted.js
外部のwidgetを貼付けたい時など、場合に酔っては内容をnehan.jsに組版させず、そのまま貼付けたいときがあります。
それをnehan.jsで指定する為の特別な属性が「pasted」なのですが、それをdivを使わずに短く書けるようにするタグです。
<!-- こんな風に書くのはメンドイ --> <div style="width:100px;height:100px" pasted> そのまま貼付けたい内容 </div> <!-- この方が短い --> <pasted size="100x100"> そのまま貼付けたい内容 </pasted>
nehan.speak.js
脚本のように、発言者と発言をわけて書くのに使えるタグです。
画像を指定することも、発言者の名前を文字列で指定することも出来ます。
両方指定された時は画像が優先されます。
<speak name="太郎">僕は太郎です。</speak> <speak src="/path/to/jigo.png" size="64">いいえ、僕が次郎です。</speak>
表示すると例えばこんな感じのレイアウトに出来ます。
プラグインの使い方
nehan.jsの読み込みの後に、使いたいプラグインのソースを読み込むだけです。
<script type="text/javascript" src="/path/to/nehan.js"></script> <!-- nehan.font-awesome.js を使う --> <script type="text/javascript" src="/path/to/nehan.font-awesome.js"></script>
ただしプラグインによっては、それ以外に読み込むものが必要な場合もあります。
その辺は、各プラグインのREADMEを参照してください。
まとめ
追加したプラグインは、それぞれがnehan.jsの異なる機能を使って実現しています。
プラグインを作る際の参考にでもなれば、と思います。
