jGlycyとは?

jGlycyとはjQueryをベースに動作するJavaScriptライブラリです。
jQueryのPluginという位置づけにもなります。

jQueryに糖衣を被せた意味でjGlycyと名づけられました。(ジェイグリィシィと読みます)

jGlycyを導入することにより、HTML内のJavaScriptコード記述を無くしたり、
JavaScriptの知識がない人でも簡単にJavaScriptの動作を実装できるようになります。

例えば、あるリンクをJavaScriptを使って、ポップアップさせたいとします。

<a href="hoge.html">hoge</a>
<a href="moge.html">moge</a>

jQueryを使えば

<a href="hoge.html">hoge</a>
<a href="moge.html">moge</a>
<script type="text/javascript"><!--
  $("a").each(function(){
    this.click(function(){
      window.open(this.href);　　　//a要素をすべて抽出し、各々にクリックイベントを追加
    });
  });
//--></script>

と書くことができます。

このポップアップさせる関数をjQueryオブジェクトに追加してやれば

$.fn.extend({
  setPopup: function() {
    this.click(function(){
      window.open(this.href);
    })
  }

HTMLにはこのように記述してやればいいわけです。

<a href="hoge.html">hoge</a>
<a href="moge.html">moge</a>
<script type="text/javascript"><!--
  $("a").each(function(){
    this.setPopup();
  });
//--></script>

ここまでが、jQueryを使った一般的なjavascriptの実装方法です。

a要素に対してポップアップさせる、という動作をPluginにすることで、
様々な場面で同じ処理を簡単に実装できるようになりました。

しかし結局、「指定要素を抽出して、各々にsetPopup()を適用する」というコードは どこかに記述しなければなりません。

JavaScriptの知識がない人にとってみれば、このコードを記述する事は困難だと思います。

仕事場で、技術メンバーが制作メンバーに
「ここと、ここをjavascriptでポップアップするようにしてほしいんだけど」
と、依頼されるような事例は少なくないはずです。

「該当要素を抽出して、抽出された要素のsetPopup()を呼んであげればいいんだよ。」
なんて、言っても通じないことが普通だと思います。

そこで

ここにjGlycyの機能を使用すると、今までのHTML内容が

<a href="hoge.html" jg="setPopup">hoge</a>
<a href="moge.html" jg="setPopup">moge</a>

となります。
jGlycyを使う前と比べて、JavaScriptのコードが消え、かわりにjgという属性が追加されています。

使い方は次の節で詳しく説明しますが、jg属性に関数名を指定することにより,
該当要素に指定関数が自動的に適用されることになります。

つまり　あるリンクをポップアップさせるという処理を実装するために必要な事が

「指定要素を抽出して、各々にsetPopup()を適用する」

ではなく

「指定要素のjg属性にsetPopupを入れてやる」

という事に変わりました。

この内容であれば、
「リンクをポップアップさせたい場合はaタグにjg=“setPopup”と記述すればいいんですよ。」
と伝えれば、JavaScriptを知らない人にもポップアップ処理の実装ができるはずです。

と、長くなりましたがjGlycyを使うことで

• HTMLの内容がエレガントになる
• 技術の管轄だった仕事が、技術以外に任せることができる

といったメリットが生まれることを期待しています。

jGlycyの使い方＞