Cntlog > スキルアップ・ノウハウ > JavaScript・jQuery > 初めてjQueryプラグインを作ってみた(RSS取得)

初めてjQueryプラグインを作ってみた(RSS取得)

最近社内でJSを書く機会が増えてきたので、他の人にも扱いやすいようにと思ってjQueryプラグインにする事を思いつきました。
作ったプラグインの内容はRSSを取得・表示させるためのjqueryプラグインです。

「WordPressならそんなのデフォルトで入ってるやん…」って思ったくらいWordPress好きな人は6/7・6/8に大阪で行われる WordCamp Kansai 2014に参加してその知識を分かち合ったらいいと思います。

WordCamp Kansai 2014

今回はHTMLでも表示できるっていうのがポイントです。

プラグインの作り方

プラグイン化って難しいのかなーと思っていましたが、わかりやすくまとめてくださってたサイトがあったのでそちらを参考にしました。

jQueryプラグインの作り方の初歩

プラグインにするにあたってRSS表示で良く触るところは、“どこに入れる”、”どのURL”、”記事内容を見せる?”くらいだったので、そのあたりをメソッドをいじれるようにしました。

  $.fn.rssFeed = function(options) {
    var defaults = {
      feedUrl: '',
      entry: '10',
      text: false
    };
    var setting = $.extend(defaults, options);

出力されたものにCSSが当てやすいようにclassをつけて表示できるようにしています。

var title = '<dd class="entry_title"><a href="' + entry.link + '">' + entry.title + '</a></dd>';

作ったもの

作ったものは初めてついでに、githubに上げてみました。
githubにあげておくと、優しい人がより使いやすく直してくれたりすると聞いているので期待しています。
みなさん良かったら使ってみてください。

github|jquery.cnt_rss_feed

関連記事

【JavaScript】PCサイトかスマートフォンサイトを選択させるスクリプト... PC向けサイトにアクセスした際にスマートフォン向けサイトを表示するか選択してもらうスクリプトを書きました。 今回はJavaScriptで作っています。 //iPhone、iPad、AndroidのURLをリダイレクト(選択)させる $(function(){ ...
Nuxt.jsでSCSSの変数をvueファイルでも使えるようにする... Nuxt.jsを使ってみるとSCSSで設定した変数やMixinがVueファイルで使えなかったのでVueファイルでも使える用に設定する方法を紹介します。 インストール まずはnpmで下記をインストールします。 npm add --dev node-sass sass-loader ...
Vue.jsの入門レベルを学ぶためにやったこと... ここ3ヶ月くらい気になっていたVue.jsを使うようになりました。 私はJSがそれほど得意ではないのですが、Veu.jsは日本語の情報も多くて、調べると結構情報が出てきます。 とはいえ、初めて使うあるあるだと思うのですが、何から手を付けていいかわからない問題に出くわすと思います。 手探...
簡単にスクロールアニメーションが設定できるAOS(jQuery不要)... 最近のWebサイトを見ているとメインビジュアルのアニメーション以外にもスクロール時にコンテンツの一部がアニメーションしてるページが増えてきました。 一つ一つJSで操作を管理すると結構手間になりますがライブラリを使えば、簡単に出来るものもあります。 今回はJSをほぼ書かずに簡単にスクロール...