TopJavaScriptjQueryプラグイン > 2011年12月
2011年12月26日

Twitter検索結果をリアルタイム表示するjQueryプラグイン「monitter」徹底解説

December 26,2011 12:55 AM
Tag:[, , ]
Permalink

Twitterの検索結果をリアルタイム表示するjQueryプラグイン「monitter」を紹介します。スクリーンショットは「Android」の検索結果をリアルタイム表示したものです。

「Android」の検索結果をリアルタイム表示

このプラグインはやや古いもので、現在では公式の検索ウィジェットもありますが、公式のものは日本語の設定が面倒なのとデザインが限られるので、意外にこちらの方が使いやすいかもしれません。

1.機能

Twitterの検索APIとjQueryプラグインを組み合わせてウィジェットをウェブサイトに表示し、ウィジェットに検索結果をリアルタイムで表示します。

ウィジェットは1つのページに複数設置できます。設定方法については4項以降で解説します。

2.公式サイトのデモ

公式サイトでデモを確認できるので、操作方法を紹介します。

公式サイトの「monitter」にアクセスします。

monitter

ページ左上にある「tweets containing」に検索文字列を入力して「Add Column」をクリック。

検索文字列を入力

これで検索結果が表示されていきます。

検索結果

右側に設定・停止・削除用のアイコンが表示されます。

設定・停止・削除用のアイコン

設定画面で言語の設定(ja)もできますがうまく動かないようです。

言語の設定

「Add Column」をクリックすればカラムを複数追加できます。カラム上部をドラッグすれば順番を並べ替えることもできます。

カラムを複数追加

3.サンプル

言語設定を日本にしたサンプルを作ってみました。テキストフィールドに文字を入力すれば検索結果を変更することができます。

Monitter widgetサンプル
Monitter widgetサンプル

スタイルも白背景用に見直して、スクロールバーを表示して過去の履歴を見れるようにしたので、よければCSSファイルももっていってください。

4.ダウンロード

ここからはウェブサイトへのウィジェット設置方法を解説します。

monitter」にアクセスして、右上の「Widgets」をクリック。

monitter

「download」をクリック。

download

ダウンロードしたアーカイブを展開します。実際に利用するのは次の2ファイルです。

  • monitter.min.js
  • monitter.css

この2つのファイルをウェブサイトの任意の位置にアップロードします。

アーカイブにはsamples.htmlがあり、ここにアクセスすればサンプルの表示を確認できます。samples.htmlは同梱されているdemo.cssも呼び出しています。

5.ウィジェットの追加

ウィジェットをウェブサイトに追加するには、以下のコードをページに追加します。

<link rel="stylesheet" href="http://user-domain/monitter.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://user-domain/monitter.min.js"></script>
…中略…
<div class="monitter" title="iPhone" lang="ja"></div>

div要素のclass属性「monitter」は必須で、ここにウィジェットが表示されます。

title属性には検索文字列、lang属性に検索対象の言語を設定します。div要素を複数設定すれば複数のウィジェットを表示できます。

title属性の検索文字列はTwitterの検索API(のSearch Operators)に準じているはずなので、AND検索/OR検索/NOT検索/フレーズ検索/特殊検索が可能と思われます。

検索方法は以下のページが参考になります。

超自己満足プログラミング - Twitter検索APIメモ

6.スタイルの設定

monitter.cssをアップロードしただけの状態(他にCSSの設定がまったくない場合)では実用に耐えられる表示になりません(下)。

download

ということで、文字色は最低限設定してください。

他にスタイルを変更したい場合は、monitor.cssの内容を適宜変更するか、monitor.cssの後方に同じセレクタ・プロパティを追加して上書きしてください。参考までにmonitter.cssのポイントとなる部分にコメントをいれておきます。

.tweet /* ツイート単位の設定 */
{
display: block;
background: #333; /* ツイートコンテンツの背景 */
clear: both;
padding: .6em;
margin: .3em;
overflow: hidden;
}
.tweet imgt /* ツイートアイコンの設定 */
{
float: left;
margin-right: 1em;
border: 2px solid #222;
background: #444;
}
.tweet p.text /* ツイートコンテンツの設定 */
{
margin: 0;
padding: 0;
padding-left: 70px; /* 画像とコンテンツの間隔 */
}
.monitter  /* ウィジェットの設定 */
{
float: left;
width: 280px; /* ウィジェットの幅 */
height: 180px; /* ウィジェットの高さ */
margin: 5px;
border: 4px solid #666;
background: #666; /* ウィジェットの背景 */
overflow:hidden; /* スクロールできるようにするにはここを変更 */
}

7.時間表示の修正

デフォルトのmonitter.min.jsでは、ツイート時間が00分~09分のときに10の位が表示されないので、以下の修正を行うことを推奨します。ファイルが圧縮されているので分かりにくいですが、変更前の文字列で検索して、該当部分をまるっと置き換えてください。

変更前

var thedatestr=thedate.getHours()+':'+thedate.getMinutes();

変更後

var min='00'+thedate.getMinutes();min=min.substr(min.length-2,2);var thedatestr=thedate.getHours()+':'+min;
Comments [2] | Trackbacks [0]
2011年12月 8日

jQuery lightBoxプラグインで拡大画像の幅・高さを制限する方法

December 8,2011 12:33 AM
Tag:[, ]
Permalink

拡大画像を表示するJavaScriptライブラリ「jQuery lightBoxプラグイン」で、拡大画像の幅・高さを制限する方法を紹介します。

jQuery lightBoxプラグインの使い方は、下記の公式サイトやネットの情報をご覧ください。

jQuery lightBox plugin
jQuery lightBox plugin

1.問題点

jQuery lightBoxプラグインは元画像である拡大画像の表示サイズを設定できないため、元画像のサイズによっては次のように期待通りの表示にならないケースがあります。

対処前の拡大画像(ブラウザの幅を超えて拡大)
jQuery lightBox plugin

本エントリーの対処を行うことで、拡大時のサイズを制限することができるようになります。

対処後の拡大画像
jQuery lightBox plugin

2.jquery.lightbox-0.5.jsの修正

jQuery lightBoxプラグインに含まれる、jquery.lightbox-0.5.jsを任意のエディタで開き、24行目あたりに赤色の2行を追加します。

…前略…
(function($) {
    /**
     * $ is an alias to jQuery object
     *
     */
    $.fn.lightBox = function(settings) {
        // Settings to configure the jQuery lightBox plugin how you like
        settings = jQuery.extend({
            maxWidth : 0,
            maxHeight : 0,
            // Configuration related to overlay
            …後略…

同様に、195行目あたりに赤色の9行を追加します。

…前略…
function _set_image_to_view() { // show the loading
    // Show the loading
    $('#lightbox-loading').show();
    if ( settings.fixedNavigation ) {
        $('#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();
    } else {
        // Hide some elements
        $('#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();
    }
    // Image preload process
    var objImagePreloader = new Image();
    objImagePreloader.onload = function() {
        $('#lightbox-image').attr('src',settings.imageArray[settings.activeImage][0]);
        // Perfomance an effect in the image container resizing it
        if ( settings.maxWidth && objImagePreloader.width > settings.maxWidth ) {
            objImagePreloader.height = objImagePreloader.height * (settings.maxWidth / objImagePreloader.width);
            objImagePreloader.width = settings.maxWidth;
            jQuery('#lightbox-image').css('width', settings.maxWidth + 'px');
        } else if ( settings.maxHeight && objImagePreloader.height > settings.maxHeight ){
            objImagePreloader.width = objImagePreloader.width * (settings.maxHeight / objImagePreloader.height);
            objImagePreloader.height = settings.maxHeight;
            jQuery('#lightbox-image').css('height', settings.maxHeight + 'px');
        }
        _resize_container_image_box(objImagePreloader.width,objImagePreloader.height);
        //    clear onLoad, IE behaves irratically with animated gifs otherwise
        objImagePreloader.onload=function(){};
    };
    objImagePreloader.src = settings.imageArray[settings.activeImage][0];
};
…後略…

修正が完了したら、元のディレクトリに上書き保存してください。

3.jquery.lightbox実行部分の修正

jquery.lightboxを実行するときに赤色のオプションを追加します。指定した数値の単位はpxで、このサイズが画像拡大時の最大幅(または高さ)になります。

$(function(){
    $('.lightbox').lightBox({
        maxWidth: 800,
        maxHeight: 800,
    });
});

幅だけを制限したい場合はmaxWidthのみを、高さだけを制限したい場合はmaxHeightのみを記述してください。両方記述した場合、幅の制限が優先されます。

4.参考サイト

参考サイトは下記です。ありがとうございました。

jquery lightbox で拡大画像の幅を指定する
Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3