AJAX on qwerty.work

特定の要素のみを遅延表示させるJSとかCSSとかの方法メモ

Wed, 17 Feb 2021 19:20:57 +0900

特定の要素のみを遅延表示させる

参考サイト

https://teratail.com/questions/113891 https://teratail.com/questions/113891

https://makibishi.ninja/lazysizes/ https://makibishi.ninja/lazysizes/

https://techacademy.jp/magazine/25636 https://techacademy.jp/magazine/25636

https://zxcvbnmnbvcxz.com/specified-time-or-more/ https://zxcvbnmnbvcxz.com/specified-time-or-more/

https://www.marukin-ad.co.jp/marulog/?p=1891 https://www.marukin-ad.co.jp/marulog/?p=1891

逆に遅延非表示にする場合

参考サイト

http://kachibito.net/snippets/settimeout-fadeout http://kachibito.net/snippets/settimeout-fadeout

jQueryのAjaxからカウント数付のソーシャルボタンを出力するPHPを非同期で実行する

Thu, 17 Jan 2019 22:17:56 +0900

ソーシャルボタンを自作して表示スピードを高速化

Twitter、Facebook、はてな、Pocketなど公式のボタンを使用するとかなりページを表示するスピードが遅くなるため、先日からページ表示を高速化するためにソーシャルボタンの自作にチャレンジしています。

Wordpressであればプラグインで簡単に高速化できのですが、Wordpressではないページで使用するため、どうしても自作するしか高速化する方法がありません。そこで最近行っている自作チャレンジしているメモのブログが以下なんですが、いろいろな方法を試して徐々にページスピードを上げることができました。

上から、Pocketのストックカウントを取得するだけで約1.4～2秒かかり、公式ボタンより遅くなる。

↓

PHPの関数「cURL」を使用してTwitter、Facebook、はてな、Pocketのカウント数をAPIから同期で取得してボタンを自作して約2秒で表示できた。

↓

PHPのcURLを非同期で実行できるcurl_multiを使用すると同じことを約1.5秒で表示できるようになりました。

でも同期でPHPを読み込むから1.5秒遅くなるということ

自作のSNSボタンのみの表示を約1.5秒まで縮めることができたのですが、このSNSボタンを表示させたいページに埋め込むと、そのページの表示は1.5秒遅くなるということ。curl_multiでAPIの取得は非同期でやっているけど、そのPHPはページから同期で呼び出すためです。これを非同期で呼び出すことができればページ全体の表示を速くできるのではないかと思います。

そこでPHPをJavascriptから呼び出す！

jQueryのAjaxでPHPを非同期で呼び出すことができるそうです。これを使えば、PHP内で各SNSのAPIからカウント数を非同期で取得し、そのPHPをJavascriptから非同期で実行させることがきてダブル非同期。

サーバーサイドのPHPとクライアントサイドのJavascriptで負荷を分散してるので、これで更に**速くなるに違いない！**と想像しています。

そして作ったソース

PHP

PHPではjavascriptのページから$_GETでカウントを取得したいURLを受取り、そのURLを対象に各SNSのAPIからカウント数を取得します。そしてカウント数を組み込んだ自作シャーシャルボタンのHTMLを変数に入れます。ファイル名は仮にget_sns_button.phpとします。

<?php
function num_format($count) {
  //3桁区切りのカンマを削除
  $count = str_replace(',','',$count);
  //数値に変換
  $count = intval($count);
  // カウント数が取得できないときは0にする
  return isset($count) ? intval($count) : 0 ;
}

function fetch_sns_count($targeturl) {
   // 並列通信用マルチハンドルを用意
   $mh = curl_multi_init();

// APIごとにCurl Handleを作る
// Twitter
   $ch_twitter = curl_init("http://jsoon.digitiminimi.com/twitter/count.json?url=$targeturl");
   curl_setopt($ch_twitter, CURLOPT_RETURNTRANSFER, TRUE);
   curl_multi_add_handle($mh, $ch_twitter);
  
// Facebook
   $ch_facebook = curl_init("https://graph.facebook.com/?id=$targeturl");
   curl_setopt($ch_facebook, CURLOPT_RETURNTRANSFER, TRUE);
   curl_multi_add_handle($mh, $ch_facebook);

// Hatena
   $ch_hatena = curl_init("https://b.hatena.ne.jp/entry.count?url=$targeturl");
   curl_setopt($ch_hatena, CURLOPT_RETURNTRANSFER, TRUE);
   curl_multi_add_handle($mh, $ch_hatena);

// Pocket
   $ch_pocket = curl_init("https://widgets.getpocket.com/v1/button?v=1&count=horizontal&url=$targeturl&src=$targeturl");
   curl_setopt($ch_pocket, CURLOPT_RETURNTRANSFER, TRUE);
   curl_multi_add_handle($mh, $ch_pocket);

// 複数の通信を非同期で同時実行
   do { curl_multi_exec($mh, $running); } while ( $running );

// APIから戻ってきた値を変数に入れる
   $json_twitter  = curl_multi_getcontent($ch_twitter);
   $json_facebook = curl_multi_getcontent($ch_facebook);
   $count_hatena = curl_multi_getcontent($ch_hatena);
   $html_pocket = curl_multi_getcontent($ch_pocket);

// cURLハンドルセットを閉じる
   curl_multi_remove_handle($mh, $ch_twitter);
   curl_close($ch_twitter);
   curl_multi_remove_handle($mh, $ch_facebook);
   curl_close($ch_facebook);
   curl_multi_remove_handle($mh, $ch_hatena);
   curl_close($ch_hatena);
   curl_multi_remove_handle($mh, $ch_pocket);
   curl_close($ch_pocket);
   curl_multi_close($mh);

/*デバッグ用
   var_dump($json_twitter);
   var_dump($json_facebook);
   var_dump($count_hatena);
   var_dump($html_pocket);
   */

//Twitterのカウント数を取り出す
   $count_twtter = json_decode($json_twitter, true );
   $count_twtter = num_format(strval($count_twtter['count']));

//facebookのカウント数を取り出す
   $count_facebook = json_decode($json_facebook, true );
   $count_facebook = num_format($count_facebook['share']['share_count']);

//Hatenaのカウント数を取り出す
   $count_hatena = num_format($count_hatena);

//Pocketのカウント数を取り出す
   //HTML→DOM→XML→JSON→配列に変換
   $dom_pocket = new DOMDocument('1.0', 'UTF-8');
   $dom_pocket->preserveWhiteSpace = false;
   $dom_pocket->loadHTML($html_pocket);
   $xmlString_pocket = $dom_pocket->saveXML();
   $xmlObject_pocket = simplexml_load_string($xmlString_pocket);
   $count_pocket = json_decode(json_encode($xmlObject_pocket), true);
   $count_pocket = num_format(strval($count_pocket['body']['div']['a']['span']['em']));

//カウント付ソーシャルボタンのHTML
$res = '<ul class="sns-counter" title="'.$targeturl.'"><!--';
   $res .= '--><li class="btn-tw">';
   $res .= '<a href="//twitter.com/intent/tweet?url='.$targeturl.'" target="_blank">';
   $res .= '<i class="fab fa-twitter"></i><span>'.$count_twtter.'</span>';
   $res .= '</a>';
   $res .= '</li><!--';
   $res .= '--><li class="btn-fb">';
   $res .= '<a href="//www.facebook.com/sharer/sharer.php?u='.$targeturl.'" onclick="window.open(\'https://www.facebook.com/sharer/sharer.php?u='.$targeturl.'\', \'new\', \'width=500,height=300\');return false;" target="_blank">';
   $res .= '<i class="fab fa-facebook-f"></i><span>'.$count_facebook.'</span>';
   $res .= '</a>';
   $res .= '</li><!--';
   $res .= '--><li class="btn-hb">';
   $res .= '<a href="//b.hatena.ne.jp/entry/'.$targeturl.'" target="_blank">';
   $res .= '<i class="fa fa-hatena"></i><span>'.$count_hatena.'</span>';
   $res .= '</a>';
   $res .= '</li><!--';
   $res .= '--><li class="btn-pk">';
   $res .= '<a href="//getpocket.com/edit?url='.$targeturl.'" target="_blank">';
   $res .= '<i class="fab fa-get-pocket"></i><span>'.$count_pocket.'</span>';
   $res .= '</a>';
   $res .= '</li><!--';
   $res .= '--><li class="btn-line">';
   $res .= '<a href="//social-plugins.line.me/lineit/share?url='.$targeturl.'" target="_blank">';
   $res .= '<i class="fab fa-line"></i><span>LINE</span>';
   $res .= '</a>';
   $res .= '</li>';
   $res .= '</ul>';
   return $res;
}

$targeturl = $_GET['targeturl'];
echo fetch_sns_count($targeturl);
?>

Javascript

jQueryのAjaxからPHP（get_sns_button.php）を呼び出し、PHPの変数に入ったソーシャルボタンのHTMLをページ内に展開するページのソースです。

<!DOCTYPE html>
<html lang="ja" itemscope itemtype="http://schema.org/WebPage">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://ajax.cloudflare.com">
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
<title>無題ドキュメント</title>
<style>
.sns-counter {
 width: 100%;
 }
.sns-counter li {
 display: inline-block;
 border-radius: 2px;
 width: 80px;
 padding: 3px;
 margin-left: 3px;
 }
.sns-counter li span {
 display: inline-block;
 text-align: center;
 width: 70%;
 font-size: 12px;
 font-weight: bold;
 color: #fff;
 }
.sns-counter li i {
 display: inline-block;
   text-align: center;
   width: 30%;
   color: #fff;
   font-size: 14px;
   position: relative;
   top: 1px;
   }
   .sns-counter .btn-tw {
   background-color: #55ACEE;
   }
   .sns-counter .btn-fb {
   background-color: #3A5795;
   }
   .sns-counter .btn-hb {
   background-color: #008CE1;
   }
   .sns-counter .btn-pk {
   background-color: #ef4357;
   }
   .sns-counter .btn-line {
   background-color: #1dcd00;
   }
   .sns-counter .btn-total {
   background-color: #000;
   }
   .btn-hb:hover,.btn-tw:hover,.btn-fb:hover,.btn-pk:hover,.btn-line:hover,.btn-total:hover {
   background-color: #ccc;
   }
   i.fa-hatena:before {
   content: "B!";
   font-family: Verdana;
   font-weight: bold;
   }
   </style>
</head>
<body>
<br>
<br>
<!--↓↓ここにソーシャルボタンが表示される↓↓-->
<div id="sns-counter"></div>

<script>
   window.addEventListener("load",function(){ const css=[ "//cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css" ];for(i in css){ let html=document.createElement("link");html.rel="stylesheet";html.href=css[i];async=true;document.head.appendChild(html);}});</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>

<!--↓↓ここが非同期でPHPを呼び出す部分↓↓-->
<script type="text/javascript">
   //ポケットのストック数を取得
   function fetch_sns_count(url, selector) {
     var defer = jQuery.Deferred();
   jQuery.ajax({
     url: 'get_sns_button.php?targeturl=<?php echo urlencode("https://".$_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>',
     dataType:'text',
   timeout: 10000, //10sec
     }).done(function(res){
       jQuery( selector ).html( res || 0 );
     }).fail(function(){
       jQuery( selector ).html('error;');
   });
}

fetch_sns_count('<?php echo urlencode("https://".$_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]);?>', '#sns-counter');
</script>
<!--↑↑ここが非同期でPHPを呼び出す部分↑↑-->

</body>
</html>

ん？遅くなった？

なぜか遅くなりました。まだ組み込みたいWEBページに埋め込んでいない状態（ショーシャルボタンしかないページ）ですが平均2.2秒。GTmetrixのWaterfallを見ると、確かに非同期で動作は確認できました。

ちょっと実際のWEBページに組み込んでいろいろなパターンをベンチマークしてみないとわからなくなってきました。

そこで仮のページに埋め込んでベンチマーク

以下の３パターンであるページにソーシャルボタンを仮のダミーページ内に読み込んだ時のスピードをGTmetrixでベンチマークしてみました。

   
  今回のAjaxから非同期でPHPを呼び出した場合
  共有ボタン配信サービスの[AddThis](https://www.addthis.com/jp/)を使った場合
  普通に同期でPHPを実行させた場合




  １回目
  ３．９秒
  ４．９秒
  ５．７秒


  ２回目
  ３．６秒
  ３．７秒
  ４．３秒


  ３回目
  ３．５秒
  ４．３秒
  ４．５秒


  ４回目
  ３．３秒
  ６．１秒
  ４．２秒


  ５回目
  ４．０秒
  ４．４秒
  ４．５秒


  平均
  ３．６６秒
  ４．６８秒
  ４．６４秒

やっぱり速かった！

AjaxからPHPを呼び出す場合、非同期なので他の読み込みをしている間に並行してPHPの実行結果を読み込んでいるので全体的にページの表示スピードが速くなりました。しかも何度ベンチマークしても誤差の範囲が狭く表示時間が安定しています。ばらつきがあるのは多分Adsenseやその他のJavascriptやCDNの読込が原因っぽいです。

AddThisも速いときは速いのですが、遅いときはめっちゃ遅いです。管理が楽なので各SNSのAPIが変更になっても修正に困ることがなさそうなので、メンテナンスのことを考えると多少遅い時があってもアリかなと思いました。GTmetrixのWaterfallのグラフをみるといろんなバックグラウンドでJavascripｔが降ってきているので、そこが不安定な原因かもしれません。

普通に同期でPHPを動かした場合は当然PHPの動作分遅いですね。しかも安定してばらつき無く遅いです。

ということで、予想通りAjaxから非同期でPHPを読み込む方が速いという結論になりました。

もっと速くしようと思ったら、CRONジョブで定期的にカウント数を取得しデータベース化して、キャッシュしておくのがいいかもしれませんが、ちょっと大変そうです。そういうプラグインがWordpressにはあるみたいですが、それはまたいつか試してみようと思います。

参考ページ

https://nelog.jp/fetch-pocket-count-by-ajax https://nelog.jp/fetch-pocket-count-by-ajax

https://php-archive.net/php/ajax-json/ https://php-archive.net/php/ajax-json/

http://blue-bear.jp/kb/javascript-javascript%E3%81%8B%E3%82%89php%E3%81%AB%E5%80%A4%E3%82%92%E6%B8%A1%E3%81%97%E3%81%A6%E5%87%A6%E7%90%86%E3%81%95%E3%81%9B%E3%82%8B/ http://blue-bear.jp/kb/javascript-javascript%E3%81%8B%E3%82%89php%E3%81%AB%E5%80%A4%E3%82%92%E6%B8%A1%E3%81%97%E3%81%A6%E5%87%A6%E7%90%86%E3%81%95%E3%81%9B%E3%82%8B/

https://www.addthis.com/ https://www.addthis.com/

Google AJAX Feed APIでRSSフィードを読込み最新の記事一覧を表示する。

Wed, 23 Sep 2009 14:50:10 +0900

前回の「Google AJAX Feed APIを使ってアメーバブログの「PR:」を除くで記事一覧を表示するJavascript 」ですが、アメーバブログを更新して、最新のRSSをGoogle AJAX Feed APIで読み込んでいるのに、最新の記事一覧をスクリプトで表示することができないということが多々ありました。

それは、Googleのキャッシュにあるフィードを読み込んでいるからだそうです。

キャッシュをクリアまたはリセットする方法があるのかもしれませんが、読み込むフィードのURLにユニークな値を付加させることで、ページを開くたびに最新の記事一覧を表示することができます。

前回のスクリプトにユニークな値として現在日時をURLに付加させてみました。

<script type="text/javascript" src="http://www.google.com/jsapi?key=●●あなたのAPIキー●●"></script>
  <script type="text/javascript">
  google.load("feeds", "1"); 
  
    function initialize()
    { 
  
    // 現在の日付と時間を取得
    var date = new Date();
    var year = date.getYear();
    var mon = date.getMonth() + 1;
    var day = date.getDate();
    var hour = date.getHours();
    var min = date.getMinutes();
    var sec = date.getSeconds();
    var query = year + mon + day + hour + min + sec;
  
    //現在の最新RSSフィードの取得
    var feed = new google.feeds.Feed("http://example.com/blog/rss20.xml?" query); 
    
    //取得するフィード数
    feed.setNumEntries(6) 
    
    //実際に読む込む
    feed.load(function(result) 
    { 
    
    //読み込めたか判別
    if (!result.error) 
    {
    //表示部分を選択
    var container = document.getElementById("feed");
    
    //変数の初期化
    var list = "";
    
    //Feedの処理
    list = '<ul>';
    for (var i = 0; i < result.feed.entries.length; i++) 
    { 
    //Feedを一つ抽出
    var entry = result.feed.entries[i]; 
    if(entry.title.match(/^PR:/)) {
    //「PR:」から始まるものがあれば何もしない
    }
    else{
    list += '<li>';
    list += '<a href="' + entry.link + '" target="_blank" title="' + entry.title + '">' + entry.title + '</a>';
    var strdate = createDateString(entry.publishedDate);
    list += '&nbsp;(' + strdate + ')';
    list += '</li>';
    }
    } 
    list += '</ul>';
    container.innerHTML = list;
    } 
    }); 
    }
  
  //日付の表示方法を変更
    function createDateString(publishedDate)
    {
    var pdate = new Date(publishedDate);
    var pday = pdate.getDate();
    var pmonth = pdate.getMonth() + 1;
    var pyear = pdate.getFullYear();
    var phour = pdate.getHours();
    var pminute = pdate.getMinutes();
    var psecond = pdate.getSeconds(); 
    //var strdate = pyear + "年" + pmonth + "月" + pday + "日" + phour + "時" + pminute + "分" + psecond + "秒";
    var strdate = pyear + "-" + pmonth + "-" + pday ;
    return strdate;
    }
  
  google.setOnLoadCallback(initialize); 
  </script> 
  <div id="feed">Loading...</div>

ちょっと難点なのは、ページを開く度に最新のフィードを読み込むので、表示がもたつきます。

なので、「分」のminと「秒」のsecは省いて1時間以内の表示はキャッシュを読み込むくらいにした方がいいかもしれません。

Google AJAX Feed APIで外部のRSSを読み込み一覧を表示するJavascriptを改造

Wed, 29 Jul 2009 13:45:09 +0900

前回のページ「」で紹介したスクリプトを一部変更してみた。

変更の主な内容は、

表示するリストを作成する際に、HTMLタグを変数に入れるように改造しました。（赤文字部分）

前回はXMLの要素を操作してリストを作成するようにしていましたが、

XMLの操作は苦手なのでHTMLのソースを変数に格納するようにしました。

google.load(“feeds”, “1”);

function initialize()

{

//RSSフィードの取得

var feed = new google.feeds.Feed("●●読み込みたいフィードのURL●●");

//取得するフィード数

feed.setNumEntries(5)

//実際に読む込む

feed.load(function(result)

{

//読み込めたか判別

if (!result.error)

{

//表示部分を選択

var container = document.getElementById(“feed”);

//変数の初期化

var list = “”;

//Feedの処理

list = ‘’;

for (var i = 0; i list += ‘- ‘;

list += ‘’ + entry.title + ‘’;

var strdate = createDateString(entry.publishedDate);

list += ‘（’ + strdate + ‘）’;

list += ‘’;**

}

**list += ' ‘;

container.innerHTML = list;**

}

});

}

//日付の表示方法を変更

function createDateString(publishedDate){

var pdate = new Date(publishedDate);

var pday = pdate.getDate();

var pmonth = pdate.getMonth() + 1;

var pyear = pdate.getFullYear();

var phour = pdate.getHours();

var pminute = pdate.getMinutes();

var psecond = pdate.getSeconds();

//var strdate = pyear + “年” + pmonth + “月” + pday + “日” + phour + “時” + pminute + “分” + psecond + “秒”;

var strdate = pyear + “-” + pmonth + “-” + pday ;

return strdate;

}

google.setOnLoadCallback(initialize);

↓↓実際にうちの社長のアメブロのフィードを読み込んで表示した例↓↓

google.load(“feeds”, “1”);
function initialize() {
//RSSフィードの取得 var feed = new google.feeds.Feed(“http://feedblog.ameba.jp/rss/ameblo/5603blog/rss20.xml");

//取得するフィード数 feed.setNumEntries(5)

//実際に読む込む feed.load(function(result) {

//読み込めたか判別 if (!result.error) { //表示部分を選択 var container = document.getElementById(“feed”);

//変数の初期化 var list = “”;

//Feedの処理 list = ‘’; for (var i = 0; i

前回同様に

RSSに「PR:」が含まれていなければ新着5件を表示しますが、

新着5件中1件に「PR:」が含まれていた場合は

フィード自体から削除して消すのではなく、省略というか、スキップしているだけなので

表示が4件になります。

この辺りは改善が必要ですが、また今度にします。

参考にしたサイト

http://www.ajaxtower.jp/googleajaxfeed/feed/index5.html http://www.ajaxtower.jp/googleajaxfeed/feed/index5.html

2009/09/23追記

上記を更に改造↓

http://qwerty.work/blog/2009/09/google-ajax-feed-api-1.php http://qwerty.work/blog/2009/09/google-ajax-feed-api-1.php

mt-search.cgiの検索が遅いのでblog_ajax_json_search.jsに乗り換えた。

Sun, 05 Jul 2009 01:03:52 +0900

MovableTypeの標準機能のmt-search.cgiによる検索がめちゃくちゃ遅いので、他の検索方法がないか探してみました。

結構、この話題は多いみたいで、すぐに見つけることができました。予め書き出された検索用のjsonのテキストファイルをAJAXで検索して表示するというもので、めちゃくちゃレスポンスがいいです。

http://blog.kumacchi.com/2008/07/mtsearchcgi.html http://blog.kumacchi.com/2008/07/mtsearchcgi.html

設置方法

prototype.jsを読み込む
blog_ajax_json_search.jsを読み込む
search_data.txtを書き出すインデックステンプレートをMovabletypeに作成
検索窓を設置

1.prototype.jsを読み込む

方法は省きますが、jQuery.jsがあるとコンフリクト（衝突）して動かないので対策が必要です。

私の場合、prototype.jsはCloudFlareのCDNから読み込んでいます。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.min.js"></script>

Googleがよければこちら。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script>

2.blog_ajax_json_search.jsを読む

私の場合、ローカルに保存した物を使用せず、外部から読み込んでいます。

<script type="text/javascript" src="https://furyu.tea-nifty.com/script/blog_ajax_json_search.js"></script>

3.search_data.txtを書き出すインデックステンプレートをMovabletypeに作成

<?xml version="1.0" encoding="utf8"?>
{data: [
<MTEntries lastn="3000">
{title:"<$MTEntryTitle remove_html="1" encode_js="1"$>",link:"<$MTEntryLink$>",body:"<$MTEntryBody remove_html="1" encode_js="1"$><$MTEntryMore remove_html="1" encode_js="1"$>"},
</MTEntries>
{"title": "", "link": "", "body": ""}
]
}

の部分は対象の投稿の上限を指定しています。全投稿を対象にする場合、でもOKです。

コメントも検索対象に含めたい場合は以下となります。

<?xml version="1.0" encoding="utf8"?>
{
data:[
<MTEntries all="1">{
title:"<$MTEntryTitle remove_html="1" encode_js="1"$>"
,link:"<$MTEntryLink$>"
,body:"<$MTEntryBody remove_html="1" encode_js="1"$><$MTEntryMore remove_html="1" encode_js="1"$><MTComments>【<$MTCommentAuthor remove_html="1" encode_js="1"$>】<$MTCommentBody remove_html="1" encode_js="1"$></MTComments>"
},</MTEntries>
{title:"",link:"",body:""}
]
}

4.検索窓を設置

/blog/search_data.txtの部分は環境によって階層が違うので、ご自分の環境に合わせてインデックステンプレートから書き出されたsearch_data.txtがある場所のパスに書き換えてください。

<form action="javascript:blogAjaxJsonSearch( '/blog/search_data.txt', document.getElementById('search_box').value );">
<input id="search_box" size="30" type="search" />
<input id="search_button" onclick="javascript:blogAjaxJsonSearch( 

'/blog/search_data.txt', document.getElementById('search_box').value );" value="サイト内検索" type="button" />
</form>
<div class="content"></div>

``の部分に検索結果が表示されます。

設置例

↓↓上記を参考に作った検索フォーム↓↓（実際に検索できます。）

–>

↑↑検索結果がここに表示されます。↑↑

検索がびっくりするほど速いです。これを作った暴想さんに感謝です。

http://java.cocolog-nifty.com/blog/2005/12/typepadmtajaxja_c70d.html http://java.cocolog-nifty.com/blog/2005/12/typepadmtajaxja_c70d.html

参考ページ

https://furyu.tea-nifty.com/annex/2006/05/blog_ajax_json__94c8.html https://furyu.tea-nifty.com/annex/2006/05/blog_ajax_json__94c8.html

https://hyper-text.org/archives/2007/10/ajax_search_mt.shtml https://hyper-text.org/archives/2007/10/ajax_search_mt.shtml

http://www.55link.com/archives/2006/05/13-2213.html http://www.55link.com/archives/2006/05/13-2213.html

jQueryで動くflexibleSearch.jsというものあった

prototypeを使うblog_ajax_json_search.jsよりも、jQueryで動くflexibleSearch.jsの方が使いやすそうです。また今度試してみようと思います。

https://tinybeans.net/blog/2010/12/21-091505 https://tinybeans.net/blog/2010/12/21-091505

https://github.com/tinybeans/jq-plugin-flexibleSearch https://github.com/tinybeans/jq-plugin-flexibleSearch

https://webcake.stars.ne.jp/flexible-search-mt.html https://webcake.stars.ne.jp/flexible-search-mt.html

http://www.skuare.net/2007/11/movable_typeajax.html http://www.skuare.net/2007/11/movable_typeajax.html

Google AJAX Feed APIでアメーバブログのRSSフィードから「PR:」を削除して記事一覧を表示するJavascript

Tue, 30 Jun 2009 11:44:23 +0900

先日、「Google AJAX Feed APIを使って外部のRSSを読み最近の記事リストを表示するJavascript」を使用してアメーバブログのRSSを読み込み、新着5件の一覧表示を行いましたが、アメーバブログ（アメブロ）のRSSは広告（PR:○○～）というのが自動的に入り、これがすごく邪魔で困っていました。

そこで今回はif文を加えて「PR:」から始まるフィードは無視（省く）することにしました。

スクリプト

<script src="http://www.google.com/jsapi?key=●●あなたのAPIキー●●" type="text/javascript"></script>
<script type="text/javascript">
google.load("feeds", "1");   
function initialize()
{   
 //RSSフィードの取得
 var feed = new google.feeds.Feed("●●読み込みたいフィードのURL");  
 
 //取得するフィード数
 feed.setNumEntries(5)
 
 //実際に読む込む
 feed.load(function(result) 
 {   
  
  //読み込めたか判別
  if (!result.error)
  {
   //表示部分を選択
   var container = document.getElementById("feed");
   
   //変数の初期化
   var list = "";
   
   //Feedの処理
   for (var i = 0; i < result.feed.entries.length; i++) 
   {   
    //Feedを一つ抽出
    var entry = result.feed.entries[i];
 if(entry.title.match(/^PR:/)) {
 //「PR:」から始まるものがあれば何もしない
 }
 else{
    var div = document.createElement("li");
    var a = document.createElement("a");
    var strdate = createDateString(entry.publishedDate);
    a.href = entry.link;
             var list = entry.title + " (" + strdate + ")" ;
             a.appendChild(document.createTextNode(list));
             div.appendChild(a);
             container.appendChild(div);
              }
              }
        }
      });
   }

//日付の表示方法を変更
function createDateString(publishedDate){
 var pdate = new Date(publishedDate);
 var pday = pdate.getDate();
 var pmonth = pdate.getMonth() + 1;
 var pyear = pdate.getFullYear();
 var phour = pdate.getHours();
 var pminute = pdate.getMinutes();
 var psecond = pdate.getSeconds(); 
 //var strdate = pyear + "年" + pmonth + "月" + pday + "日" + phour + "時" + pminute + "分" + psecond + "秒";
 var strdate = pyear + "-" + pmonth + "-" + pday ;
 return strdate;
}
google.setOnLoadCallback(initialize);   
  
</script>
<!--表示結果表示する部分-->
<div id="feed"></div>
<!--表示結果表示する部分-->

ということで、厚切りジェイソンのブログのフィードを読み込んで「PR:」を除いた新着情報を表示してみた。

↓↓実行結果↓↓

google.load(“feeds”, “1”);
function initialize() {
//RSSフィードの取得 var feed = new google.feeds.Feed(“http://feedblog.ameba.jp/rss/ameblo/atsugirijason/rss20.xml");

//取得するフィード数 feed.setNumEntries(5)

//実際に読む込む feed.load(function(result) {

//読み込めたか判別 if (!result.error) { //表示部分を選択 var container = document.getElementById(“feed”);

//変数の初期化 var list = “”;

//Feedの処理 for (var i = 0; i

ただし、RSSに「PR:」が含まれていなければ新着5件を表示しますが、

新着5件中1件に「PR:」が含まれていた場合、フィード自体から削除して消すのではなく、省略というか、スキップしているだけなので、表示が4件になってしまいます。

それを補うスクリプトは今度チャレンジします。

2009/09/23追記

上記を更に改造↓

**Google AJAX Feed APIで最新の記事一覧を表示する。

**http://qwerty.work/2009/09/google-ajax-feed-api-1.php

Google AJAX Feed APIを使って外部のRSSを読み最近の記事リストを表示するJavascript

Thu, 18 Jun 2009 19:28:01 +0900

フィード（RSS2.0）を読み込むスクリプト

google.load(“feeds”, “1”); function initialize() { //RSSフィードの取得 var feed = new google.feeds.Feed("●●読み込みたいRSS2.0のURL●●"); //取得するフィード数 feed.setNumEntries(5) //実際に読む込む feed.load(function(result) { //読み込めたか判別 if (!result.error) { //表示部分を選択 var container = document.getElementById(“feed”); //変数の初期化 var list = “”; //Feedの処理 for (var i = 0; i

ということで、うちの社長ブログのフィードを読んでみた。

↓↓結果↓↓

google.load(“feeds”, “1”);
function initialize() {
var feed = new google.feeds.Feed(“http://feedblog.ameba.jp/rss/ameblo/5603blog/rss20.xml");
feed.setNumEntries(5)
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById(“feed”); var list = “”;
for (var i = 0; i

2009/06/30追記

アメーバブログ（アメブロ）等のフィードでPRなどが入ってしまい、

省略して表示をさせたい場合は「Google AJAX Feed APIを使ってアメーバブログの「PR:」を除く記事一覧を表示するJavascript」をご参照ください。

2009/09/23追記

上記を更に改造↓

**Google AJAX Feed APIで最新の記事一覧を表示する。 **http://qwerty.work/2009/09/google-ajax-feed-api-1.html

Google AJAX Feed APIを使って被リンクを表示するスクリプト

Mon, 15 Jun 2009 00:29:43 +0900

Googleブログ検索でこのサイトhttps://qwerty.workを検索します。

↓実際に検索↓

http://blogsearch.google.co.jp/blogsearch?hl=ja&ie=UTF-8&q=qwerty.work&lr=lang_ja

↓その検索結果のXML↓

http://blogsearch.google.co.jp/blogsearch_feeds?hl=ja&q=link:qwerty.work&lr=lang_ja&ie=utf-8&num=10&output=rss そして、そのXMLを読み込みリストとして表示するスクリプト。

残念ながら現時点では被リンクが少なすぎて１件しかない…。

↓実行結果↓

// (’+entry[‘dc:publisher’]+’)’; html += ‘’+entry[‘dc:date’].substring(0,10)+’’; html += ‘\n’; } html += ' \n’; document.getElementById(“linkbacks”).innerHTML = html; } }); } google.setOnLoadCallback(initialize);

// ]]>

スクリプト

<script type="text/javascript" src="http://www.google.com/jsapi?key=●●あなたのAPIキー●●"></script> <br>
<script type="text/javascript"> <br />    google.load("feeds", "1"); function initialize() {<br />    var url = "●●検索対象のURL●●";<br />    var num = 100;<br />    // Get Linkbacks from Google Blog Search<br />    var feed = new google.feeds.Feed("http://blogsearch.google.co.jp/blogsearch_feeds?hl=ja&q=link%3A"+encodeURIComponent(url)+"&output=rss&num="+num+"&lr=lang_ja&ie=utf-8");<br /> feed.setNumEntries(num);<br />    feed.setResultFormat(google.feeds.Feed.XML_FORMAT);<br />    feed.load(function(result) {<br />        if (!result.error) {<br />            var items = result.xmlDocument.getElementsByTagName('item');<br />            var item  = null;<br />            var entry = null;<br />            var html  = '<ul id="linkback_list">\n';<br />            for (var i = 0; i < items.length; i++) {<br />                entry = [];<br />                // make simple array from item nodes<br />                // You can access values like "entry['key']"<br />                for ( var j=0; j<items[i].childNodes.length; j++ ) {<br />                    item = items[i].childNodes[j];<br />                    entry[item.nodeName] = (item.textContent)?item.textContent:item.text;<br />                }<br />                html += '<li class="linkback_entries">';<br />                html += '<a class="linkback_links" href="'+entry['link']+'" rel>'+entry['title']+'</a>';<br />                html += '<span class="linkback_blogs">('+entry['dc:publisher']+')</sapn>';<br />                html += '<span class="linkback_dates">'+entry['dc:date'].substring(0,10)+'</sapn>';<br />                html += '</li>\n';<br />            }<br />            html += '</ul>\n';<br />            document.getElementById("linkbacks").innerHTML = html;<br />        }<br />    });<br />}<br />google.setOnLoadCallback(initialize);<br />    </script> <br /><!--結果を表示する部分--><br /><hr size="1" /><br /><div id="linkbacks">loading</div> <br /><hr size="1" /><br /><!--結果を表示する部分-->

参考にしたページ

http://creazy.net/2009/02/stop_tb_and_start_linkbacks_by_google_ajax_feed_api.html http://creazy.net/2009/02/stop_tb_and_start_linkbacks_by_google_ajax_feed_api.html

AJAX APIs Playground　Google Code

Sun, 31 May 2009 01:57:17 +0900

なんか役に立ちそうなグーグルのツール

http://code.google.com/apis/ajax/playground/ http://code.google.com/apis/ajax/playground/

AJAX on qwerty.work

特定の要素のみを遅延表示させるJSとかCSSとかの方法メモ

特定の要素のみを遅延表示させる

参考サイト

逆に遅延非表示にする場合

参考サイト

jQueryのAjaxからカウント数付のソーシャルボタンを出力するPHPを非同期で実行する

ソーシャルボタンを自作して表示スピードを高速化

でも同期でPHPを読み込むから1.5秒遅くなるということ

そこでPHPをJavascriptから呼び出す！

そして作ったソース

PHP

Javascript

ん？遅くなった？

そこで仮のページに埋め込んでベンチマーク

やっぱり速かった！

参考ページ

Google AJAX Feed APIでRSSフィードを読込み最新の記事一覧を表示する。

Google AJAX Feed APIで外部のRSSを読み込み一覧を表示するJavascriptを改造

mt-search.cgiの検索が遅いのでblog_ajax_json_search.jsに乗り換えた。

設置方法

1.prototype.jsを読み込む

2.blog_ajax_json_search.jsを読む

3.search_data.txtを書き出すインデックステンプレートをMovabletypeに作成

4.検索窓を設置

設置例

参考ページ

jQueryで動くflexibleSearch.jsというものあった

Google AJAX Feed APIでアメーバブログのRSSフィードから「PR:」を削除して記事一覧を表示するJavascript

2009/09/23追記

Google AJAX Feed APIを使って外部のRSSを読み最近の記事リストを表示するJavascript

Google AJAX Feed APIを使って被リンクを表示するスクリプト

↓実際に検索↓

↓その検索結果のXML↓

↓実行結果↓

スクリプト

参考にしたページ

AJAX APIs Playground Google Code

AJAX APIs Playground　Google Code