GOUTEN.NET

デザイナー・GOUTENの生態を観察するブログ

見出しを抽出してリスト化するjqueryプラグインを作ってみたわ。べ、別にあんたのためじゃないんだからっ!勘違いしないでよねっ!

この記事は投稿されてから1年以上過ぎています。技術情報の場合は最新の情報の検索をしていただき、正しい情報を習得されることをおすすめします。それ以外の場合はどうぞこの記事をお楽しみください。

前回の記事を書いた時に、文章長杉だから何かナビゲーションするものがほしいなと思い、特定の見出し要素を抽出してリスト化するjQueryプラグイン「jquery.indexNav.js」を作りました。

べ、別に自慢したいとかそういんじゃないんだからっ!
ただ、プラグイン作る勉強をしたかっただけなんだからっ!
勘違いしないでよねっ!
※本当です

この程度のものはだれでも作れると思うから特に凄いものでもなんでもないでとおもいます。

あとから「MagicNav.js」というものがあるのに気づいたよ\(^o^)/

需要がなくても(゚ε゚)キニシナイ!!
それがGOUTENクオリティ。

うるさいっ!!あんたはこの目次どうりに読んでればいいの!!

アタシは見本なくても使い方わかるけど、あんた解説なしじゃ使いこなせないでしょ。

ツンデレは至高の萌え状態である

このページの「もくじ」でも使用されていますが、本格的に使うのはブログリニューアル後にします。
それだけではなんとなくわかりづらいと思われますので、別途でプラグイン専用の解説ページを用意しました。

プラグインの詳しい説明は上記リンク先のページで。
そのうちURL変わるとおもいます。

そしてなんと、ダウンロードもできます!

GitHubにアップしようかと思いましたが、まだ未熟者ゆえ…
そのうち展開したソースをアップするかもです。

[ もくじへ戻る ]

どーしてもあんたが普通にjQueryで書いたものも見たいって言うなら…見せてあげないこともないわ。

個人的にはジト目で責められつつも後でデレてくれるのがいいと思ってる

ここからはプラグイン化するまでのことを書いていきます。

プラグインをいきなり作るとか無謀すぎにもほどがあったので、とりあえずは普通に抽出してリスト化するだけの記述をしました。

HTML部分

<article>
	<h2 id="index01">見出し1</h2>
	<h2 id="index02">見出し2</h2>
	<h2 id="index03">見出し3</h2>
	<h2 id="index04">見出し4</h2>
</article>
<aside id="listarea"></aside>

jQueryで最初に書いた基本のjQuery記述

[js]
$(function(){

//idを持っている特定のリストを定義
var $Agenda = $(‘#post’).find(‘h2[id]’);

var $ids = $Agenda.map(function(){
return $(this).attr(‘id’);
}).get();

//リストを生成するエリアを定義
var $listArea = $(‘#listarea’);

//上記エリアにulを挿入
$listArea.prepend(‘<ul></ul>’);

//挿入したulをまとめて定義
var $linkList = $listArea.find(‘ul’);

//抽出した要素をリスト生成エリアにコピー
$agenda.clone().prependTo($linkList);

//リストにコピーした要素に対しての処理
$listArea.find(‘h2’).each(function(i){

//リストのidをそれぞれ定義
var $listId = $(this).attr(‘id’);

//コピーした要素をリンクリストに変換
$(this).replaceWith(‘<li><a href= "#’ + $listId + ‘">’ + $(this).text() + ‘</a></li>’);

});

});
[/js]

テキトーな解説と補足

特定要素のidがついているものだけを抽出して「listarea」というidがついている要素の中にul,li要素でリストを作ります。
idが指定されていない場合は無視されます。

[ もくじへ戻る ]

たまたまプラグイン化できちゃっただけだけど…見るなら好きにしなさい!

割合的にはツン=9:デレ=1くらいでちょうどいい
とりあえず動いたところで、先ほど書いたスクリプトをプラグイン化するわけですが、世の中のプラグインの中身を見てもさっぱり妖精さんです。
そんなときにはぐーぐる先生!いつもお世話になります!

「jQuery プラグイン 作り方」でGoogle検索!

プラグインにするための書き方(俺コピペ流)

[js]
(function($){
$.fn.indexNav = function(config){
var options = {
//ここにオプションの記述
indexElement : ‘h2’,
listarea : ‘#listarea’
};
var setting = $.extend(options, config);
return this.each(function(){
//ここからjQueryの記述
var $agenda = $(this).find(setting.indexElement + ‘[id]’);
var $listArea = $(setting.listarea);
$listArea.prepend(‘<ul></ul>’);
var $linkList = $listArea.find(‘ul’);
$agenda.clone().prependTo($linkList);
$listArea.find(setting.indexElement).each(function(){
var $listId = $(this).attr(‘id’);
$(this).replaceWith(‘<li><a href= "#’ + $listId + ‘">’ + $(this).text() + ‘</a></li>’);
indexNaviScroll();
});
});
};
})(jQuery);
[/js]

プラグインを適用させるためのメソッドチェーン

[js]
$(‘thisを定義する要素’).indexNav();
[/js]

「indexNav」の部分に任意の名前を入れて、thisの値を定義する記述をプラグイン外に書きます。
ごめんなさい、こんなときどんな言い方をすればいいかわからないの。

プラグイン内で書いているthisを起点に9行目から本来の記述を書きます。

オプションを渡す記述

正直これがやりたくてプラグインにしたと言っても過言ではありません。

プラグインの記述の中に「setting.indexElement」とか「setting.listarea」と書いている部分がありますが、それがオプションを定義した時に適用される部分です。
通常はデフォルトでオプションが書かれているものが適用されるのですが、メソッドチェーンで指定をすると、この値を上書くことができます。

任意の値を渡すことで特定の値の指定や、真偽の値を渡すことで条件分岐で出力の仕方を変えることができます。

[js]
$(‘thisを定義する要素’).indexNav({
indexElement : ‘任意の要素’,
listarea : ‘任意の要素’
});
[/js]

上記の記述でオプションを上書きすることができます。
実際配布しているプラグインでは、機能追加やもっと多くのオプションがありますので、興味が有る方はプラグインページをご覧ください。

べ、別に解析されたくないとかそんなんじゃないんだからっ!勘違いしないでよねっ!

畳み掛けるように責められつつも、その言葉の奥に隠れた愛情を妄想するのも一興

というわけで、プラグインをインデントの解除して圧縮してみます。

改行やタブ・空白が多いとプラグイン自体の容量も増えてしまうので、インデントの解除と圧縮をして容量を減らします。

使用したツール

インデントの解除と圧縮するにあたって、下記のサイトがよく使われているようですので、僕もそれに習い「/packer/」を使いました。

/packer/
http://dean.edwards.name/packer/

このインデント解除と圧縮をするツールを使うにあたって、Javascriptの終了の記述(セミコロン)はしっかり書かないとエラーになります。
恥ずかしながら、圧縮する前はセミコロンがなくても動いていたので、省略してもいいと解釈していましたが、「してもよい」だけで「するのが推奨ではない」ですよね。
まさかこんなところで学べるとは!

デコードもできる

エンコード圧縮できるということは、もちろんデコードもできる、ということで下記サイトでいろんなスクリプトをデコードして記述の参考にしました。

Online JavaScript beautifier
http://jsbeautifier.org/

動きやオプションをどうやって指定しているのかを解析するのに非常に役立ちました。
展開してみると意外と簡単な記述でやっているのもあって、難しそうなものでも基本は一緒なんだなと思ったわけです。

[ もくじへ戻る ]

せっかくあんたの為に記事書いたんだからね。ちゃんと最後まで読みなさいよ…!

そうです、私がドMです

作ってみての感想

GOUTEN、やればできる子やん!
思ってたより難しくなかったです。

特にオプション項目を設定しながら条件分岐を書いている時には
「これこれ、これがやりたかったんだよ!」と思いながら書きまくってました。

記述にアラはたくさんあるでしょうが、これからの開発の足がかりになればとおもいます。

GOUTENからのお願い – 其の壱

デバックしてくれる人募集してます。
「この書き方おかしい」とか「こういう記述法もあるよ」とか「もっと簡単にできるから!」とか誹謗中傷激励罵詈雑言お待ちしております。

GOUTENからのお願い – 其の弐

追加して欲しいオプションがあったら、コメント欄やSNSで言っていただければある程度対応できると思います。
より使いやすいものを目指したいので、皆様ご協力をお願いいたします。

しつこいと思うかもしれないけど、あんたのためにやってあげてるんだから、感謝しなさいよ!

もういちど、プラグインの解説ページとダウンロードはこちら

[ もくじへ戻る ]

ま、今年はなんだかんだで楽しくないことはなかったわ。

それではみなさま、2013年も突っ走って参りますので、よろしく構ってくださいお願いします。

TO PAGE TOP