BlogTop > JavaScript Archive
JavaScript Archive
2 of 4
テスト：jQuery.ajaxでモジュール読み込み
- 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の次に書いたものです（任意）。
- Comments
- TrackBack Closed
今月のいらんことしい(2010年7月)
- 2010年7月28日 08:00
- Last update: Jan 12, 2015 22:24
- JavaScript | MTカスタマイズ
今月（2010年7月）テンプレートなどカスタマイズした点をまとめた記事です
今月はほとんど触ってなくて、あれこれ弄ってないほうが安定しているというか普通なのですが。
- カテゴリページのはてなスターをはずした
- search_data.txtのXML宣言をとってみた
- search_data.txtのMIME Typeをapplication/jsonにしてみた
まったくカスタマイズというかんじではないのですが、気にせずいきます。
Ajax JSON検索のsearch_data.txtの先頭のXML宣言の役割とか未だにわからなくて、おそらくとりはずしても動くのでないかと思って外してみました。外すとまずいのかなあ、どうなんでしょうか。
3番目のやつはネタがなかったので無理矢理です。通常は配布元が説明されているとおりで動くことになってます（のはず）。
さてJSONのMIMEタイプですが、RFC 4627でapplication/jsonとして公開されています。
Ajax検索用のJSONファイルはtext/planeでも動いてたわけですがあえて（？）かえてみました。以下、.htaccessへの追加コード。備忘用です。
<Files "search_data.txt"> AddType application/json .txt </Files>
あー、あとMTで拡張子.jsonなファイルができたかどうか試してなかった。。変更後の置換が面倒だったので（というよりお試し程度のことで再構築したくないような）.txtのまま使うことにしました。.jsonでやったとしても（httpd.confになければ）AddTypeはいるかも。
今月のカスタマイズは以上です。
バックナンバーは以下にあります。
- Comments
- TrackBack Closed
MT：メモ：alt templateを使い変数jq_js_includeにappendする場合について
- 2010年7月21日 05:41
- Last update: Jan 12, 2015 22:28
- JavaScript | MTカスタマイズ | mt5
Movable Typeの管理画面カスタマイズで、プラグイン経由でフッターのJavaScriptにコードを追加しようとするときに、jq_js_includeにappendするとダイアログ表示にもコードが追加されることがあります。
MTの管理画面でjQueryを追加してカスタマイズするとき、footer.tmplファイルにある、<mt:var name="jq_js_include">にappendする（append=1として変数に追加する）という方法を以前このブログ内において公開していたのですが、これをおこなったときにダイアログを表示（テンプレートの初期化とか、エントリ編集画面のファイル・画像アップロードのときとか）したときにも追加されることがあるのを確認できました（MTOS 5.02）。
追加したコードの書き方によっては必要もない箇所でカスタマイズしたコードの読み込みがおこなわれることもあるのでないかとおもい、その対処を考えてみました。
なお、これが再現されるのはTransformerプラグインでsetvarblockを使いappend=1というオプションを利用したなどの場合で、直接当該テンプレートのコピーをalt-templeでカスタマイズした場合には問題ないものとおもわれます。
（１）footer.tmplの代替テンプレートを作り、カスタマイズ用の変数をセットする
先述の現象は、/MTシステムフォルダ/tmpl/cms/dialog/footer.tmpl で<mt:var name="jq_js_include">が記述されていることによります。
つまるところダイアログのテンプレートを除外すればいいわけなんですが、ここは条件式なしで変数をセットしておいてそこに追加させるという方法で対処してみます。
- /MTシステムフォルダ/tmpl/cms/include/footer.tmplファイルをコピーしてalt-tmplフォルダ以下に/cms/include/footer.tmplをおきます
- （コピー先の）footer.tmplをエディタで開いて、このリスト下に示すコードを追加します
- 編集後はサーヴァにローカルと同じ構成でアップロードします
- footer.tmplに追加するコード。
追加の場所は
</body>の上に。ここでは変数名をjq_custom_includeとした。<script type="text/javascript"> jQuery(function($){ <mt:var name="jq_custom_include"> }); </script> <!-- 追加コードここまで --> </body> </html>
勿論、上記コードのscript内およびjQuery(function...内に直接になんらかの処理のコードを書くということもできます（このエントリではプラグイン等でappendを利用することを想定したつもりですが）。scriptタグ自体を追加側（setvarblock内）のコードに委ねるというのであれば変数の呼び出し（mt:var name=）だけ置けばよいことになるでしょう。
ちなみに追加させるほうのコードについては、jQuery()といった書き方を$()で書くことができるという寸法であります。
jQueryのコードの追加
あとは、setvarblockで任意のコードをappendです。
<mt:setvarblock name="jq_custom_include" append="1">
/* append code
$("#foo").css("background", "#ffffff");
*/
</mt:setvarblock>
（２）スクリプトがダイアログのとき動作しないようにする
コードを書くにあたって、ダイアログと当該テンプレートで共通しないidかclassを参照するようにするのがコツなのですが、カスタマイズのスクリプトがダイアログのときは動かないようにコードで分岐しておく、ということも考えられます。
これには、dialog.tmplでルート要素にdialogというIDがつけられていることを利用します（ヴァージョンアップ等でなくなる可能性はあるかもです）。
以下は、jQuery('#dialog')でIDをgetして分岐するコードです。＊else{以降は適当な（動作に影響をおよぼさない）コードを。
<mt:setvarblock name="jq_js_include" append="1">
var gt_html_id = jQuery('#dialog');
if(gt_html_id==""){return;}
else {
// Do Something
jQuery('#bootstrapper').removeAttr('class');
}
</mt:setvarblock>
この例では、ID bootstrapperのclassがダイアログのiframeでリムーヴされずに残っているはずです。（Firebug等のツールで確認します）
追記（2010.07.22）プラグインでの追加方法の対策で微妙ですが公開しておきます。
（３）プラグインで対策してみる
例えば、include/header.tmpl でrelated_contentという変数がセットされており、/dialog/header.tmplではセットされていないことからこれを置換する形で。。
my $old = qq(<mt:setvarblock name="related_content">); my $new = <<EOT; # # ここにappend予定のsetvarblock ! # <mt:setvarblock name="related_content"> EOT $$tmpl_ref =~ s/$old/$new/;
あとこまかな事など
cms/dialog/header.tmplにおいて、<mt:var name="html_head">、<mt:var name="js_include">の記述があるので、appendする場合についても同じ状況になることがあるかも知れません。
以上の内容は自分が試した環境に基づいています。早い話、MT編集画面のカスタマイズをしていなければこれらの問題はまずおこらないということです。確認にはFirefox + Firebug でダイアログ表示のiframeを別のウィンドウで表示させたうえでページのHTMLをチェックしました。
個人的には、何かの操作ボタンを追加するとかいったカスタマイズについて、或る操作の時だけ必要というようなものはブックマークレットでもいいのではないかと考えています。
おもいつくままで整理できずにまとめたので、ちょっと何いってるのか分からないかんじで申し訳ありません。
- Comments
- TrackBack Closed
インデックステンプレートリストでフィルタするブックマークレット
- 2010年5月21日 09:33
- Last update: Jan 13, 2015 14:39
- JavaScript | MTカスタマイズ
Movable Type管理画面のブログのテンプレートリストのうち、インデックステンプレート一覧においてファイル名等でフィルタするためのブックマークレットを作りました。
また管理画面ネタ（何）なのですが今回はブックマークレットによる管理画面の操作です。
自分用で作ったので使えていればそれで満足というシロモノです。
javascript:(function(){
var t;t=prompt('input: extension or keyword');
if(t==null||t==''){return;}
else{
var gtTbl=document.getElementById('index-listing-table');
var gtTD=gtTbl.getElementsByTagName('td');
for(var i=0;i<gtTD.length;i++){var gtClass=gtTD[i].className;
if(gtClass=='output-file'){
var ndTxt=gtTD[i].firstChild.nodeValue;
if(t=='@'){
gtTD[i].parentNode.style.display='';}
else if(ndTxt.indexOf(t)==-1){
gtTD[i].parentNode.style.display='none';}
}
}
}return;
})()
Movable Type 4.27でしか確認して（使って）いません。出力ファイルのファイル名とか拡張子を入力しましてそれ以外のインデックステンプレートを画面上から非表示にするというだけです。
なぜフィルタが必要かというとMT3.x時代の名残とでもいいましょうか。インデックステンプレートが増えてくるからなのですね。そういうことです。
いちいちフィルタするキーワード入力もメンドーというので拡張子によるものも併せて作成しました。一連のブックマークレットは以下のページにおいてあります（いちおうNETSCAPE-Bookmark-file-1形式になってます。たしかDelicious Bookmarkで登録できたとおもいましたがこの形式によるインポートは一回しか試したことないので自信なし。Firefoxの場合は「HTMLからインポート」です）。
追記： 2012/2
Movable Type 5.x 系では、以下を利用してください。
javascript:(function(){
var t;t=prompt('input: extension or keyword');
if(t==null||t==''){return;}
else{
var gtTbl=document.getElementById('index-listing-table');
var gtTD=gtTbl.getElementsByTagName('td');
for(var i=0;i<gtTD.length;i++){var gtClass=gtTD[i].className;
if(gtClass.indexOf('output-file') > -1){
var ndTxt=gtTD[i].firstChild.nodeValue;
if(t=='@'){
gtTD[i].parentNode.style.display='';}
else if(ndTxt.indexOf(t)==-1){
gtTD[i].parentNode.style.display='none';}
}
}
}return;
})();
- Comments
- TrackBack Closed
サイト内イメージ検索窓の練習
- 2010年5月15日 10:17
- Last update: Apr 07, 2016 21:46
- JavaScript
練習がてらにGoogle AJAX SEARCH APIを利用してImage検索の検索ボックスをつくってみました。
以下順をおって記していきます。APIとおよびCode Playgroundについては確認した時点での動作に基づいてますので仕様変更・改良がおこなわれた場合はご容赦ねがいます。
それと前提としてですが、Googleのイメージ検索の結果で（自分のところのサイトが）サムネイル表示できるようになっているというのがあります。
Ⅰ: If you'd like to put an AJAX Search-Box...
Google AJAX SEARCH APIを開始するのにとりあえず以下ページを見にいきます。
追記： developers.google.com への移行などでドキュメントが存在しなくなっています。https://developers.google.com/image-search/v1/reference を参照してみるか、Googleカスタム検索を導入して、画像検索を有効にして運用すればAPIを使うことなく検索結果に画像を含めることができます。
サンプルコードのページです
「基本」のセクションにあるサンプルをみにいくと、Code Playgroundに遷移します。ここでPick an APIに並ぶリスト内から自分の希望するものを選ぶとウェブ上でコードを試すことができます。今回はImage Searchを利用します(と、ここまでいってしまえばこの記事に戻ってくる必要はたぶん無いとおもうんですが)。
Ⅰ-ⅰ: About AJAX API Key
APIキーについては以下のページを参照してみてください。キーの使用については任意
である等が記載されています。
ちなみに、「http://www.google.com/jsapi?key=」以下の文字列のことです。
Ⅱ: To make image search-box
Google Code PlaygroundのImage Searchで自分のサイトのイメージ検索ボックスを作ってみます
ここで自分のドメインで試してみます。Edit HTMLのボタンをクリックして編集します（自分が試したときは初期値に"nasa.gov"[米NASA Home]がはいっていました）。setSiteRestriction()の値を自分のドメインに変えてみます。
- [例]
imageSearch.setSiteRestriction('markdiary.com');
たいていは、execute()の値も変えないと自分のサイトの結果が出ないとおもいます。なので適当にImage検索でヒットするワードにするか、値をなしにしてみます（あるいはコメントアウト?）。
- [例1]
searchControl.execute('nurie'); - [例2]
searchControl.execute();
ここまでできたら、Run Codeボタンを押して実行してみます。
Edit Codeのコードをまるまるコピーするか、下向き三角印のメニューからExportするなどしてサンプルをゲットします。
Ⅲ: Completed page
完成したページは以下のようになります。
あとはスタイルなど自分のページにあわせた加工をするなどしてページに組み込みます。
- Comments
- TrackBack Closed
テキスト選択の何か
- 2010年4月 8日 13:44
- Last update: Apr 08, 2010 13:44
- JavaScript
ページのテキストを選択し反転表示になってる状態でテキストの内容をフォームにというやつです。
テストページとして作成したものです。
document.getSelectionとか、その辺のです。よくマウスでテキスト選択したら何かあらわれてくるみたいな。ヒトによってはお節介にみえるというか。。
テストページでVicunaテンプレートのID名とか使わせてもらいましたが、本当のところは実装してみようかなとか思ってたのですけど、完成度がいまいちだったので取りやめにしました。
- Comments
- TrackBack Closed
ネタ:何かのイベントの表示にmt.jsファイルを使う
- 2010年3月30日 09:44
- Last update: Jan 12, 2015 23:18
- JavaScript | MTカスタマイズ
Movable Typeのmt.jsファイルに追記することで、イベント表示のようなものを表示するカスタマイズを考えました。
この時期でイベントというと、「エイプリルフール」でしょうね。
でもちょっと大がかりな（謎）ものを思いついても、時間ねーとかなるし、MTなんかは場合によってはテンプレートに再構築が必要にもなってきてちょっと手間だったり。
こんなときmt.jsファイルに少しコードを追加してみたらどうよ、というのを思いつきました。ネタなので思いつきだけで終わってもいいんですがとりあえずやってみました。
だいたいこのような感じです。中身だとか時間の取得とかはてきとうです。getElementByIdでも任意なところに追加してもいいかも。実行されるとページの上のほうに何か表示されるということになってます。
<mt:IfBlog>
function event(){
var today = new Date();
var month = today.getMonth();
var day = today.getDay();
if (month==3 || day == 1 ){
var mybody = document.getElementsByTagName("body")[0];
if(mybody){
var message = document.createElement("div");
var atr= document.createAttribute("id");
atr.nodeValue= "event";
message.setAttributeNode(atr);
var htm='<span class="event" style="position: absolute;top:0;left:0;margin:0 3px;width: 90%;">message here.</span>';
mybody.appendChild(message);
message.innerHTML=(htm);
}
}
}
window.onload = function() {
event();
}
</mt:IfBlog>
- Comments
- TrackBack Closed
jFeed pluginで遊んでみた
- 2010年3月28日 07:55
- Last update: Jan 12, 2015 21:21
- JavaScript
feedをパースするjQueryのプラグインを使ってこのブログのフィードを読み込んでみました。
以下が提供もとのサイトです。Windowsで試すにtar.gzが展開できるアプリケーションがいるかもです。ローカルで試すのにローカルサーヴァの環境が必要かと
1. jQueryとjFeedを読み込む
展開後のexample.htmlなんかがシンプルなサンプルかと。お決まりな感じですが、先にjQuery（同梱されてます）とjfeed.jsか、jfeed.pack.jsを読み込んでおきます
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.jfeed.pack.js"></script>
2. ちょっとパースさせてみる
今回はブログのAtomフィードをつかうってことで置き換えてみます。
サンプルと一緒ですが、
jQuery.getFeed({ url: 'atom.xml', success: function(feed) {
alert(feed.title);
}
});
でフィードのタイトル（要素の中身）がアラートとなります。
3. フィードの読み込み
jFeed関係であれこれみていると、.getFeed()のsuccess:のところに関数をあてて別途関数を用意するといった書き方をされてるようなんでそれに倣ってみます。
$(function() { jQuery.getFeed ({
url: 'blog/atom.xml',
success: readFeed
})
});
url: の箇所に読み込むフィードのURLをいれます。
としたうえでreadFeed(){}を用意すると。
要素を得るには、先頭にfeedのつくプロパティと、先頭にentryのつくプロパティとがあり、エントリタイトルを得るには、entry.titleというように、コードをみれば直感的にわかるようになってます。
4. Authorだとかcategoryもパースしたい
サンプルとかみてるとカテゴリとかAuthorなんかを拾ってないようなので追加してみました。
jquery.jfeed.jsを以下のようにカスタマイズしてみました。（実のところ、Atomしか読まないのであればsrcフォルダにjatom.jsといったファイルが用意されていたりします）
item/ JFeedItem.prototype = というところに、
// ↑ 省略 ↑
id: '',
author: '',
category: ''
}
という具合に取り込みたい要素を追記します。
そうしたら今度はJAtom.prototype = の
jQuery('entry', xml).each( function() {
のところで、
item.author = jQuery(this).find('name').eq(0).text();
item.category = jQuery(this).find('category').eq(0).attr('term');
上記のコードを似たような（というか真似ただけですが）記述のとこに追記して上書保存します。
categoryは、category/@term の値を読んでますが、正確には（MTのフィードでは）category[@schem="category"]を持つ要素のterm属性の値をもってこないといけないんだと思います（jQueryのセレクタの書き方をいまいち理解してませんorz）。
まあカテゴリ未設定なんてことは殆どないのでこんなんでもいいかなといったところです。
5. 一応完成品
以上です。
- Comments
- TrackBack Closed
BlogTop > JavaScript Archive
- Feeds
- Elsewhere
- logo
-
