BlogTop > Archives > 2010年12月 Archive

2010年12月 Archive

« 2010年11月 | 2010年12月 | 2011年1月 »

テスト：jQuery.ajaxでモジュール読み込み

  • Posted by: maRk
  • 2010年12月27日 12:58
  • Last update: Jan 12, 2015 22:18
  • JavaScript
  • はてなブックマークに追加

ウェブページのサイドバーの部分でAjaxなる読み込みをjQuery.ajax()関数を利用するというのをやってみました。

テンプレートのある部分をモジュール化させる方法はいくつかあるわけですが、jQuery+Ajaxで読み込むという方法もありましたのでやってみることにします。

とりあえず、新規エントリとかをサイドバーに読みこませる、みたいなものを想定してやるとします。

まずはjQuery.ajax()という関数を使います。モジュールを読み込むには、

$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

のような形になります。(上記コードはjQuery.ajax(options) - jQuery 日本語リファレンスより抜粋させていただきました)

これをプラグイン化しますと以下に。なお、掲載コードはURLについて階層がフラットな状態でテストしたときのままとなっております。

(function() {  
       jQuery.fn.modules = function(config){
               config = jQuery.extend({
                        // デフォルトURL（引数省略のとき読み込むファイル）
                               url: "entries.html",
                       },config);

               var target = this;
               jQuery.ajax({
                      url: config.url,
                      cache: false,
                      success: function(html){
                               target.append(html);
                      }
                      });
}
})(jQuery);

プラグイン化の元ネタは、jQuery のプラグインを作成する : ブログの新着記事を表示：Goodpicにあるとおりなのでそちらを参照されたほうがわかりやすいとおもいます。

これをここではajax_modules.jsというファイル名で保存しておきます。

実際に読み込んで使うようなのは以下です。

<!DOCTYPE html>
<html lang="ja">
<head>
<script src="jquery.js"></script>
<script src="ajax_modules.js"></script>
<script> 
$(document).ready(function(){
  $("#entries").modules({url: "entries.html" });
  $("#category").modules({url: "category.html" });
});
</script>
</head>
<body>
<div id="entries"></div>
<div id="category"></div>
</body></html>

jQuery本体はいつものように先に読み込ませます。次に先のプラグイン化したファイルを読み込みます。

entriesというIDにモジュールを取り込みたいときは以下のように記述します。示したコードはサンプルにつき、流し込み先の要素を用意しましたが、$(element)にappendすることになってますので、既存の要素に追加する形でモジュール表示させることもできるでしょう。

$("#entries").modules({url: "entries.html" });

.modulesは先のajax_modules.jsのjQuery.fnの次に書いたものです（任意）。

今月のいらんことしい（2010年12月）

今月（2010年12月）ブログのカスタマイズした点ををまとめた記事です

今月でいよいよ2010年もお終いとなります。今年最後のカスタマイズは以下です。

  • 「あわせて読みたい」のパーツ登録と貼り直し
  • Tag Archiveページでタグの表記を小文字に統一
  • Movable Type 4.28へアップデート

「あわせて読みたい」が、株式会社ユーザーローカルにより買収されたことをうけまして、パーツも再登録という形にしました。この件はトップページにいけば登録のフォームが用意されているので（今の状況に基づいていってます）、とくに説明は必要ないですね。

Movable Typeのヴァージョンをアップした際にタグアーカイブページに不備があったためなおしたついでに思いつきまして、タグの表記を小文字で統一するようにしてみました。lower_case="1"というモディファイアを利用しています。

Movable Typeのセキュリティアップデートがなされましたので、アップデートをおこないました。

余談ですが、Twitter上ではアップデートの方法がわかりにくいといった内容のツイートがいくつかみられました。このあたりはWordPressの自動アップデート機能とか使っていますと、やっぱりわかりにくいかもしれないなあ、という感想をもちました。

何回も（MTの）アップデートを繰り返してる者にとってはいつもの作業でしかないわけですが。。

今月のカスタマイズは以上です。以下に過去のカスタマイズ記録リストがあります

MT：lower_caseグローバル・モディファイア

  • Posted by: maRk
  • 2010年12月17日 13:16
  • Last update: May 24, 2016 07:46
  • MovableType
  • はてなブックマークに追加

lower_caseモディファイアを使用すると小文字で出力されます。

lower_case="1"を設定したときの出力のメモです。というよりはほぼ遊びに近くなってしまいました。グローバル・モディファイアリファレンスにあるとおりで、このモディファイアを利用するとアルファベットの大文字であるものが小文字で出力されるようになります。

お試しのテンプレートですがフォームで入力した値をlower_caseをつかって小文字での出力を試みるというものです。

CGIでの受け渡しを考えていたのですが、簡単に済ますためにMTのダイナミックパブリッシングを使ったテンプレートを作成してみました。GETとPOSTを動的に受け取りたいのですが、たしかGETの値など取得するようなプラグインがあったように記憶していたんですが、Smartyによる値の取得方法をmt ダイナミックテンプレート SmartyでGET/POSTなどの外部パラメータを取得 - wed@においてシンプルに提示くださってましたので今回参考にいたしました。

テンプレートは以下のとおりです。action属性には作成したテンプレートのパスでもいれるとします。LOLといれると、結果としてlolがかえるかとおもいます。

<MTSetVarBlock name="str">
{{$smarty.post.string}}
</MTSetVarBlock>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>lower_case=1 のテスト</title>
<style> em {color: blue;}</style>
</head>
<body>
<form action="path/to/this_page" method="post">
<fieldset>
<h1>フォーム</h1>
  <p><input name="string" type="text"></p>
  <p><input type="submit" value="Submit"></p>
</fieldset>
</form>

<p>Your Input: <em><MTVar name="str" encode_html="1" /></em></p>
<p>Lowercase : <MTVar name="str" encode_html="1" lower_case="1" /></p>
</body></html>

＊テンプレートはテスト環境向けのものです。

Delicious Bookmarkのブックマークレットv6の改造メモ

  • Posted by: maRk
  • 2010年12月10日 15:58
  • Last update: Jan 12, 2015 22:22
  • myown | net
  • はてなブックマークに追加

Delicious謹製のブックマークレットを自分で使うとき用に少しカスタマイズしましたのでそのメモです

実のところ、Deliciousが提供するFirefoxアドオンのほうが便利なのでブックマークレットのほうはあまり使う用事がないのですけれども、utm_*といったトラッキングパラメータのあるページに出くわしたときにカスタマイズしたブックマークレットを使うようにしています。

以下はカスタマイズのメモですが、自分がわかればいい程度に省略して記しておきます（そもそも需要なさそうですから）。あとDeliciousが登録の仕様を変えたりしたときに不定期にブックマークレットもヴァージョンがあがったりするようなので、その都度修正していくつもり。

まずはBookmarkletについてのDeliciousアカウントによるツイートです。Show tags panelというところをオープンすると、Tag BundlesなどがでてTag一覧などを利用できるといったものです（たぶん）。この経緯にはDeliciousが登録の仕組を更新したとかいうのがあるのですが、ここで説明する程のものでないので省きます。

ブックマークレットの入手

Delicious謹製のブックマークレットは以下のページにあります。先に述べましたとおり、ヴァージョンが不定期にあがっていたりするのでたまにチェックしてみるといいかとおもいます。

v6のブックマークレットのカスタマイズ

Firefox 3.6.x で使うものとしてのカスタマイズとなってます。先の入手先からブックマークレットのリンク（2. Drag this link: Bookmark on Delicious up to your Bookmarks Toolbar）の内容をテキストエディタに貼付けておきます。

f='http://www.delicious.com/save?url=の前に

var r=new RegExp('[\?\&]utm_.+=.*','ig');

url='+encodeURIComponent(window.location.href)を

url='+encodeURIComponent(window.location.href.replace(r,''))に変更。

if(!window.open(f+__略__) を

if(!window.open(f+'noui=1&jump=doclose','deliciousuiv6','_blank')

encodeURIComponent(''+(window.getSelection?__略__:document.selection.createRange().text))は

encodeURIComponent(document.getSelection())

Index of all entries

BlogTop > Archives > 2010年12月 Archive

Search
Categories
Archives
Feeds
Elsewhere

Action Streams

logo

Comment powered by DISQUS

Return to page top