ellsif blog

愛知のフリーランス プログラマのメモ書きなど

"2013年11月 " のアーカイブ

WordPressのJSON APIを使う(その2 実装)

WordPressのJSON APIを使う(その1 検証)でJSON取得まで確認しました。

以下がJSON APIをPHPから使うサンプルです。

<?php
  // ブログ記事の取得(contentsのカテゴリから4件取得)
  $api_url = 'http://ellsif.com/blog/?json=get_category_posts&slug=contents&count=4';

  if ($json = file_get_contents($api_url)) {
    $wp_posts = json_decode($json);
    
    if ($wp_posts) {
      foreach($wp_posts->posts as $post) {
        $title = $post->title_plain;  // タイトル
        $excerpt= $post->excerpt;     // 本文要約
        $url = $post->url;            // 記事のURL
        $date = date('Y/m/d', strtotime($post->date));  // 投稿日(公開日?)を取得

        // HTMLに書き出す
        echo '<div class="blog_content">';
        echo '<h3>'.$title.'</h3>';
        echo $excerpt;
        echo '<a href="'.$url.'" target="_blank">続きを読む</a>';
        echo '</div>';
      }
    }
  }
?>

WordPressのJSON APIを使う(その1 検証)

WordPressのJSON APIプラグインを試してみました。
(2013/11/21 一部修正)

やりたいこと

  • WordPressの新着投稿記事を他のページ(サイトトップ)に表示したい
  • サイトトップに出す記事はカテゴリーを制限したい
  • できれば.phpでなく.htmlのままでやりたい

ということで、WordPressから記事情報をJSON形式で取得し、JSで整形して表示する方式にします。
(htmlにjsで出力したらSEO的にダメでしょ!とのツッコミを受け、phpでJSONを受けるように変更)

プラグインのインストール

  1. プラグインのインストールから「JSON」で検索し、検索結果の中から「JSON API」を「いますぐインストール」
  2. インストール完了後、「プラグインを有効化」
  3. ブラウザから”[WordPressのURL]/?json=get_category_posts&id=1″にアクセス
  4. カテゴリーが1(未分類)の投稿がJSONで取れる

こんな感じのJSONが取れます(未分類の記事が無い場合)

{
    "status": "ok",
    "count": 0,
    "pages": 0,
    "category": {
        "id": 1,
        "slug": "%e6%9c%aa%e5%88%86%e9%a1%9e",
        "title": "未分類",
        "description": "",
        "parent": 0,
        "post_count": 0
    },
    "posts": []
}

プラグインの使い方

基本的には「JSON API のドキュメント」に従います。

やりたかったのは

  • カテゴリーが”お知らせ”の記事を、サイトのお知らせとして表示する
  • カテゴリーが”お知らせ”以外の記事を、サイトのブログ新着記事として表示する

なので、それぞれ

  • http://ellsif.com/blog/?json=get_category_posts&slug=info&count=2
  • …(;゚д゚)ァ….

残念ながら2つ目が取得できませんでした。
「~以外」の指定はできないようです。

(2013/11/21 追記)
結局、カテゴリを階層毎に分ける事で対応しました。

・お知らせ (slugにinfoを指定)
・ブログ記事 (slugにcontentsを指定)
 |- JavaScript
 |- PHP
 |- …

これで取ります。

  • http://ellsif.com/blog/?json=get_category_posts&slug=info&count=2
  • http://ellsif.com/blog/?json=get_category_posts&slug=contents&count=4

フォーム入力をリアルタイムにチェックする(JS)

フォーム入力をチェックするJSを書きました。
一応公開しておきます。動作保障出来ませんがご自由にご利用ください。

動作サンプルはこちら。
サンプル

JS本体は以下(※jQueryが必要です)
el_validation.js

使い方(例)

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="../lib/jquery-1.8.0.js"></script>
    <script type="text/javascript" src="../js/el_validation.js"></script>
    <script>
        $(document).ready(function(){
          // 入力チェックの初期化
          $.el_valid.init({
            "name":{
              "rule":[
                "required",
                "min_length[3]",
                "max_length[10]"
              ]
            },
            "email":{
              "rule":[
                "required",
                "email"
              ],
              "on":"blur"  // フォーカス移動時のみチェック
            }
          });
        });
    </script>
  </head>
  <body>
    <input type="text" id="name">
    <span id="e_name"><!--エラーメッセージ入る--></span><br>
    <input type="text" id="email">
    <span id="e_email"><!--エラーメッセージ入る--></span>
  </body>
</html>

入力チェックのルール

“rule”に配列で指定します。
required以外は未入力時チェックOKになります。(例:min_length[2]を指定した場合、未入力はOK、1文字だとエラー)

ルール パラメータ指定例 説明
required 必須
min_length min_length[10] 10文字以上入力しないとエラー
max_length max_length[100] 100文字以内で入力しないとエラー
exact_length exact_length[5] 5文字で入力しないとエラー
alpha 半角アルファベットのみ
alpha_numeric 半角英数のみ
alpha_dash 半角英数、半角アンダースコア(_)、半角ハイフン(-)のみ
numeric 半角数字
hankaku 半角英数記号のみ(半角カナはNG)
integer 整数のみ(01、0.1などはNG)
natural 自然数(正の整数)のみ(-1、0.1などはNG)
less_than less_than[10] 未満の数値のみ(10以上、文字はNG。9.99などはOK)
greater_than greater_than[100] より大きな数値のみ(100以下、文字はNG。100.1などはOK)
less_eq less_eq[10] 以下の数値のみ
greater_eq greater_eq[100] 以上の数値のみ
url 正しいURL(http://~、https://~のみOK)
email 正しいメールアドレス
tel 正しい電話番号(ハイフン有り、無しいずれも入力可能)
date 正しい日付(yyyy/mm/dd形式、2013/01/01でも2013/1/1でもOK)
time 正しい時刻(hh:mm形式、09:05でも9:5でもOK)
regex_match regex_match[^[a-z0-9]+$] 正規表現にマッチするか(やや動作に不安ありです)

わざわざ自作しなくても、jquery.validate.jsとか使えばいい気もしますが、
classにルールを入れるのが気持ち悪いのと、バリデーションの追加が自作の方が融通効きそうなので。