タグ別アーカイブ: ajax

[jQuery]CSVファイルを配列にする

カテゴリー: jQuery | タグ: , , , , | 投稿日: | 投稿者:

最近、怖い話を聞きながら寝るのにハマってるモリです。

今回、紹介するのはAjaxで読み込んだCSVのデータを配列に変換する方法です。

用意したデータは以下。

No 品種 原産国 補足

1

ブルーマウンテン ジャマイカ バランス型
2 キリマンジャロ タンザニア 酸味とコク
3 マンデリン インドネシア コクと苦み
4 コロンビア コロンビア 香りと角のないコク

 

用意するライブラリは本家jqueryと今回は「simple_csv」を使用します。

使い方はAjaxで読み込んだデータをsimple_csvに渡すだけ!

配列で返してくれます。

サンプルソース:

&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	$.ajax({&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	  url:&#39;sample.csv&#39;,&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	  beforeSend:function(xhr){&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	  xhr.overrideMimeType(&amp;amp;amp;amp;quot;text/html;charset=UTF-8&amp;amp;amp;amp;quot;);&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	  }&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	}).done(function (csv_data, status, error) {&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	  var data = $.simple_csv(csv_data);&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	  console.dir(data);&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	});&amp;amp;lt;br /&amp;amp;gt;&amp;lt;br /&amp;gt;&lt;br /&gt;<br />
	

beforeSendでCSVの文字コードをUTF-8にしてます。

simple_csv

でわ。。。


ajaxのキャッシュ

タグ: , | 投稿日: 投稿者:

こんにちは。kikuです。
先日ajaxでの通信で、期待通りの値が取れなくて困ったことがありました。
無事解決したので、備忘録として書き残したいと思います。

jQueryのajaxを使ってアクセスした場合、2回目以降のリクエストが実際には発行されずにキャッシュされた値が使われてしまう場合があります。
そんな時は cache に false を設定します。
※これはHEADとGETリクエスト時のみ正常動作します

$.ajax({
    url : "http://dev.blog.fairway.ne.jp",
    cache : false,
    data : {
        hoge : "fuga"
    }
}).done(function(success){
    console.log(success);
});

cacheはリクエストURLに “_={timestamp}” をGETパラメーターで追加しています。
上記では http://dev.blog.fairway.ne.jp?hoge=fuga&_=1253863496678  のようになってリクエストを投げます。

で、今回プチハマリしたのはPOST時です。
上で「HEADとGET時にしか正常動作する」という点を見逃していて、POST時に頑張ってcacheの設定をしていたので期待通りの動きをしなかったようです。

POST時にキャッシュされた値が使われてしまっていた場合は、XMLHttpRequest.setRequestHeader を使ってリクエストヘッダで If-Modified-Since を設定することによりキャッシュされた値が使用されなくなります。
ただXMLHttpRequest.setRequestHeader は XMLHttpRequest.open の後にしなければエラーになってしまいますので beforeSend でコールバック関数を指定します。

$.ajax({
    type : "POST",
    url : "http://dev.blog.fairway.ne.jp",
    beforeSend : function(xhr){
        xhr.setRequestHeader("If-Modified-Since", "Thu, 01 Jun 1970 00:00:00 GMT");
    },
    data : {
        hoge : "fuga"
    }
}).done(function(success){
    console.log(success);
});

このように設定することで、リクエストをキャッシュさせずに発行することができました。

うまく動かなかった時にキャッシュが原因と判断するまで結構時間がかかってしまわないように、キャッシュのことを頭の隅に置いておきたいところです。


WordPressでajaxを使う

タグ: , , | 投稿日: 投稿者:

こんにちは、ニタです。

早速ですが、WordPressのプラグインを更新しました!

アイキャッチ画像と更新日を予約更新対象に追加しました!
iframeタグが消えたり、brタグなどに追記したstyle定義も消えないようにしました!
予約更新内容でのプレビュー機能はもう少し先になりそうです!

どうぞよろしくお願いします!
See you again next time, Enjoy WordPress Life!!

と、

これでおしまいとは、いきませんよねぇ…。
では、改めて。

WordPressでもajaxをカンタンに使いたい

WordPressのテーマやプラグインを開発していると、投稿データや外部からのデータをスムーズに取得したい時があります。なるべくスマートに。ajaxとかで。
例えば、投稿一覧ページをページングからajax読み込みによる無限スクロールにしてみたり、プラグインで下のような読み込み機能に使ってみたり…

多少コツが要ります

しかし、WordPressのフロント側のルーティングはすべてコンテンツページとして表示されるので、ajax用のJSONを返すページ(エンドポイント)を作り、そこへPOSTかGETでアクセスさせればajax通信できるわけではありません。
ですが、WordPressの管理画面はajaxをバッキバキにキメていて、そのための機能が用意されておりますので、そちらを使ってajax通信を行います。

基本的な実装の流れはこんな感じです。

  1. wp_ajax_ホニャララというアクションフックを追加し、そのアクションフックに関数を登録。
  2. POSTかGETでのリクエストを受け取って、求めているデータをJSON形式で返却する関数(アクションフックに登録する関数)を作成。
  3. データ取得用のJavaScriptの作成。

実際に作ってみよう

では、先ほどの流れを基に何かしら作ってみます。
前述の図にあった、URLからサイト情報を取得するajaxを実装してみます。
また、ここで使うプラグイン接頭辞はwpmra_とします。

1. アクションフックの追加

ここで追加するアクションフックは、後述するエンドポイントにフックさせることでアクションフックに登録した関数を呼び出すようになっています。
そのため、アクションフックの名前はwp_ajaxと自分で決めたアクション名を繋げたものになります。
wp_ajax_ホニャララホニャララの部分を決めて追加します。
プラグイン接頭辞を含め、以下の様なアクション名と関数名にしました。

add_action('wp_ajax_wpmra_fetch_site_info', 'wpmra_fetch_site_info');

また、フロント側で使いたい場合、WordPressへ未ログインのユーザー向けにwp_ajax_nopriv_ホニャララというフックが用意されているので、そちらを使用します。
ですが、こちらは未ログインユーザー向けのみのものらしく、これだけをアクションフックに追加すると今度はログインユーザーには有効にならないという謎仕様になっております。
ですので、同じ関数を呼び出すアクションフックを2つ追加します。

add_action('wp_ajax_wpmra_fetch_site_info', 'wpmra_fetch_site_info');
add_action('wp_ajax_nopriv_wpmra_fetch_site_info', 'wpmra_fetch_site_info');

2. 登録した関数の作成(JSON返却用)

1.で追加したアクションフックで呼び出している関数wpmra_fetch_site_infoを作成します。

function wpmra_fetch_site_info() {
    $res = array(
        'status' => 'NG',
    );
    if(isset($_POST['post_title'])) {
    // POSTで送信されたURLからRSS情報を取得する
        $rss = get_wpmra_fetch_feed($_POST['post_title']);
        // サイトタイトル、URLを配列へ
        if($rss) {
            $res['status'] = 'OK';
            $res['data'] = array(
                'title' => $rss->get_title(),
                'url' => $rss->get_permalink(),
            );
        }
    }
    // 配列をJSON形式で出力
    header('Content-Type: application/json; charset=utf-8');
    echo json_encode($res);
    exit();
}

// $urlからRSSのFeedデータを取得
function get_wpmra_fetch_feed($url){
    include_once ABSPATH . WPINC . "/feed.php";
    
    $rss = fetch_feed($url);
    if(!is_wp_error($rss)){
        return $rss;
    }
}

簡単に解説しますと、WordPressのwp-includes/feed.phpを使用してRSSのURLからFeed情報を取得し、その中からサイトタイトルとサイトURLをJSON形式で出力しています。
出力後は必ずexit()die()を使って終了させます。

アクションと関数は出来ましたが、JavaScriptでJSONデータを取得するためのURLを知らないといけません。
wp_ajax_のエンドポイントは、サイトURL/wp-admin/admin-ajax.phpになります。
フックに追加した関数を呼び出すには、リクエスト内のactionパラメータにwp_ajax_より後ろに記載した文字列を指定する必要があります。(今回の場合はwpmra_fetch_site_info

3. データ取得するJavaScriptの作成

custom.jsというファイルを作成し、読み込みます。

add_action('admin_enqueue_scripts', 'enqueue_wpmra_script');
function enqueue_wpmra_script(){
    wp_enqueue_script('wpmra_js', '/path/to/custom.js', array('jquery'), '0.1');
}

このjsファイルにデータ取得する処理を書いていきますが、ここで一つ問題が。
先ほどwp_ajax_のエンドポイントはサイトURL/wp-admin/admin-ajax.phpだと説明しましたが、サイトURLは開発環境、テスト環境、本番環境で変わっていきます。
また、この処理をプラグインに実装するとなると、余計に変わります。
JavaScriptにサイトURLの判定処理を書くのも何なので、wp_localize_scriptという関数でPHPからjsに渡すようにします。

PHPファイルにscriptタグで直接書けば良いのでは?という意見もあると思いますが、横着せずPHPはphpファイルに、JavaScriptはjsファイルで管理するよう心がけましょう。

add_action('admin_enqueue_scripts', 'enqueue_wpmra_script');
function enqueue_wpmra_script(){
    wp_enqueue_script('wpmra_js', '/path/to/custom.js', array('jquery'), '0.1');
    wp_localize_script('wpmra_js', 'WPMRAJS', array('endpint' => admin_url('admin-ajax.php')));
}

wp_localize_scriptの第2引数の文字列がcustom.jsでのグローバルオブジェクトになります。
第3引数に渡している配列でWPMRAJSというグローバルオブジェクトに値がアサインされます。

これでJavaScriptを書ける準備が整いましたので、書いていきます。

jQuery(function(){
    // URL情報を取得するボタンを押したらサイト情報を設置する
    jQuery("#wpmra_fetch_site_info").on('click', function(){
            // 記事タイトルに入力されたRSS Feed
        var post_title = jQuery('input[name="post_title"]').val();
        jQuery.ajax({
            url : WPMRAJS.endpoint,
            type : "POST",
            // actionパラメータに、実行したいアクションの「wp_ajax_」より後ろの文字列を指定
            data : {action : 'wpmra_fetch_site_info', post_title : post_title },
            success : function(res){
                if(res.status === 'OK') {
                    jQuery('input[name="mra_rss_title"]').val(res.data.title);
                    jQuery('input[name="mra_rss_feed_url"]').val(res.data.url);
                }
                if(res.status === 'NG') {
                    alert("取得に失敗しました。");
                }
                return false;
            }
        });
    });
});