2018年10月 – リボン日記

何ができるか？

フォームのバリデーションチェックのための記入を、スクリプトを使って自動化できる

なぜテストを書いて対応しないの?

スクリプトでのバリデーションと、JavaScript を使ったリアルタイムバリデーションを2重に行っているから、それぞれのテストを書くよりフォーム自動入力を使って作業コストを省いている

利用するアプリ

UWSC

UWSC は何ができるか？

Windows の操作を自動化できる

本件では何を行うか

文字入力、ラジオボタンやセレクトボックスを選択して、それぞれに合ったフォームを埋める

事例

次のようにならんだ項目を埋める

名前
名前カタカナ
メールアドレス
電話番号
ラジオボタン
セレクトボックス
チェックボックス

form_insert.UWS

// 初期設定
// ---------------------------------------------------

// ID Firefox 操作するアプリケーションのID を取得する
// UWSC はCOMオブジェクト形式を採用しているブラウザと相性がいいので、本来はInternet Explorer がおすすめ
Public id = GETID("Mozilla Firefox", "MozillaWindowClass")

// フォーム内容
Public form_insert[3]
form_insert[0] = "テスト江戸"
form_insert[1] = "エド"
form_insert[2] = "hogehoge@gmail.com"
form_insert[3] = "090-0000-0000"

// 名前
SendStr(id, form_insert[0])
KBD(VK_TAB)
sleep(0.3)
// 名前カタカナ
SendStr(id, form_insert[1])
KBD(VK_TAB)
sleep(0.3)
// メールアドレス
SendStr(id, form_insert[2])
KBD(VK_TAB)
sleep(0.3)
// 電話番号
SendStr(id, form_insert[3])
KBD(VK_TAB)
sleep(0.3)
// ラジオボタン
KBD(VK_DOWN)
KBD(VK_TAB)
sleep(0.3)
// セレクトボックス
KBD(VK_DOWN)
KBD(VK_TAB)
sleep(0.3)
// チェックボックス
KBD(VK_SPACE)

// 初期設定

// ---------------------------------------------------

// ID Firefox 操作するアプリケーションのID を取得する

// UWSC はCOMオブジェクト形式を採用しているブラウザと相性がいいので、本来はInternet Explorer がおすすめ

Public id = GETID("Mozilla Firefox", "MozillaWindowClass")

// フォーム内容

Public form_insert[3]

form_insert[0] = "テスト江戸"

form_insert[1] = "エド"

form_insert[2] = "hogehoge@gmail.com"

form_insert[3] = "090-0000-0000"

// 名前

SendStr(id, form_insert[0])

KBD(VK_TAB)

sleep(0.3)

// 名前カタカナ

SendStr(id, form_insert[1])

KBD(VK_TAB)

sleep(0.3)

// メールアドレス

SendStr(id, form_insert[2])

KBD(VK_TAB)

sleep(0.3)

// 電話番号

SendStr(id, form_insert[3])

KBD(VK_TAB)

sleep(0.3)

// ラジオボタン

KBD(VK_DOWN)

KBD(VK_TAB)

sleep(0.3)

// セレクトボックス

KBD(VK_DOWN)

KBD(VK_TAB)

sleep(0.3)

// チェックボックス

KBD(VK_SPACE)

使い方

UWSC で上記のファイルを開き、入力を埋めたいフォームの最初を選択、[CTRL + F1]、またはUWSC の「再生」ボタンを押して、フォームを埋める

何ができるか？

WordPress で運用している複数のサイトの記事を、別のサイトに読み込んで表示できる。

WordPress のテンプレートタグは使えないのか？

「複数サイト」という条件があると、使えない。

<?php require_once ('./wp/wp-load.php'); ?>

1	<?php require_once ('./wp/wp-load.php'); ?>

PHP でこれを付けると、同じドメインに限り記事を読み込めるが、「複数サイト」で読み込む方法が見つからなかった。

方法

jQuery で、WordPress のJSON を読み込む

“http://www.hogehoge.com/wp1/” にWordPress がインストールされている場合、次のURL でアクセスすると、JSON が取得できる。

http://www.hogehoge.com/wp1/wp-json/wp/v2/posts?_embed&per_page=3

1	http://www.hogehoge.com/wp1/wp-json/wp/v2/posts?_embed&per_page=3

“posts”以降の記述は、”_embed”で写真データを要求、”per_page=3” で記事を3つ取得

HTML の表示部分

<div class="p-blog__first"></div>

1	<div class="p-blog__first"></div>

JavaScript コード

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><!-- jquery を読み込み -->
    <script type="text/javascript">
        $.getJSON( "http://www.hogehoge.com/wp/wp-json/wp/v2/posts?_embed&per_page=3", function(results) {
            $.each(results, function(i, item) {
                var date_data = new Date(item.date);
                var year = date_data.getFullYear();
                var month = date_data.getMonth() + 1;
                var day = date_data.getDate();
                var title = item.title.rendered;
                var link = item.link;
                var date = year + '年' + month + '月' + day + '日';
                var datetime = year + '-' + month + '-' + day;
                /* 記事アイキャッチ画像の取得、画像がない場合は、代替画像を使う*/
                var thum
                if (item._embedded["wp:featuredmedia"]) {
                    thum = item._embedded["wp:featuredmedia"][0].media_details.sizes.thumbnail.source_url
                } else {
                    thum = "/images/logo.jpg";
                }
                /* 記事の書き出し */
                $(".p-blog__first").append(
                "<div class='p-blog'>
                <a href='"+
                link + "' class='p-blog__link'>" +
                "<div class='p-blog__thumb'><img src='" +
                thum + "' alt='#'></div>" +
                "<p class='p-blog__date'><time datetime='" +
                datetime + "'>" +
                date + "</time></p>" +
                "<p class='p-blog__title'>" +
                title + "</p></a></div>");
            });
        });
        </script>

$.getJSON( "http://www.hogehoge.com/wp/wp-json/wp/v2/posts?_embed&per_page=3", function(results) {

$.each(results, function(i, item) {

var date_data = new Date(item.date);

var year = date_data.getFullYear();

var month = date_data.getMonth() + 1;

var day = date_data.getDate();

var title = item.title.rendered;

var link = item.link;

var date = year + '年' + month + '月' + day + '日';

var datetime = year + '-' + month + '-' + day;

/* 記事アイキャッチ画像の取得、画像がない場合は、代替画像を使う*/

var thum

if (item._embedded["wp:featuredmedia"]) {

thum = item._embedded["wp:featuredmedia"][0].media_details.sizes.thumbnail.source_url

} else {

thum = "/images/logo.jpg";

}

/* 記事の書き出し */

$(".p-blog__first").append(

"<div class='p-blog'>

<a href='"+

link + "' class='p-blog__link'>" +

"<div class='p-blog__thumb'><img src='" +

thum + "' alt='#'></div>" +

"<p class='p-blog__date'><time datetime='" +

datetime + "'>" +

date + "</time></p>" +

"<p class='p-blog__title'>" +

title + "</p></a></div>");

});

</script>

複数ブログを読み込む

HTML の表示部分

<div class="p-blog__first"></div>
<div class="p-blog__second"></div>

1 2	<div class="p-blog__first"></div> <div class="p-blog__second"></div>

JavaScript コード

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery( function () {
        /* 各ブログのJSONを指定。URL に"_embed"で写真データを要求、"per_page=3" で記事を3つ取得*/
        /* 1つ目のブログ最新記事を表示 */
        readBlogJson("http://www.hogehoge.com/wp1/wp-json/wp/v2/posts?_embed&per_page=3", ".p-blog__first");
        /* 2つ目のブログ最新記事を表示 */
        readBlogJson("http://www.hogehoge.com/wp2/wp-json/wp/v2/posts?_embed&per_page=3", ".p-blog__second");
    });
    /* JSON を取得して、ブログ最新記事を表示 
     * 引数は、url:WordPress JSON のURL、dom:内容を表示するHTMLのクラス名 */
    function readBlogJson(url, dom) {
    /* 各WordPress のJSON を読み込んで、記事を表示する*/
        $.getJSON( url, function(results) {
            $.each(results, function(i, item) {
                var date_data = new Date(item.date);
                var year = date_data.getFullYear();
                var month = date_data.getMonth() + 1;
                var day = date_data.getDate();
                var title = item.title.rendered;
                var link = item.link;
                var date = year + '年' + month + '月' + day + '日';
                var datetime = year + '-' + month + '-' + day;
                /* 記事アイキャッチ画像の取得、画像がない場合は、代替画像を使う*/
                var thum
                if (item._embedded["wp:featuredmedia"]) {
                    thum = item._embedded["wp:featuredmedia"][0].media_details.sizes.thumbnail.source_url
                } else {
                    thum = "/images/logo.jpg";
                }
                /* 記事の書き出し */
                $(dom).append(
                "<div class='p-blog'><a href='"+
                link + "' class='p-blog__link'>" +
                "<div class='p-blog__thumb'><img src='" +
                thum + "' alt='#'></div>" +
                "<p class='p-blog__date'><time datetime='" +
                datetime + "'>" +
                date + "</time></p>" +
                "<p class='p-blog__title'>" +
                title + "</p></a></div>");
            });
        });
    }
    </script>

jQuery( function () {

/* 各ブログのJSONを指定。URL に"_embed"で写真データを要求、"per_page=3" で記事を3つ取得*/

/* 1つ目のブログ最新記事を表示 */

readBlogJson("http://www.hogehoge.com/wp1/wp-json/wp/v2/posts?_embed&per_page=3", ".p-blog__first");

/* 2つ目のブログ最新記事を表示 */

readBlogJson("http://www.hogehoge.com/wp2/wp-json/wp/v2/posts?_embed&per_page=3", ".p-blog__second");

});

/* JSON を取得して、ブログ最新記事を表示

* 引数は、url:WordPress JSON のURL、dom:内容を表示するHTMLのクラス名 */

function readBlogJson(url, dom) {

/* 各WordPress のJSON を読み込んで、記事を表示する*/

$.getJSON( url, function(results) {

$.each(results, function(i, item) {

var date_data = new Date(item.date);

var year = date_data.getFullYear();

var month = date_data.getMonth() + 1;

var day = date_data.getDate();

var title = item.title.rendered;

var link = item.link;

var date = year + '年' + month + '月' + day + '日';

var datetime = year + '-' + month + '-' + day;

/* 記事アイキャッチ画像の取得、画像がない場合は、代替画像を使う*/

var thum

if (item._embedded["wp:featuredmedia"]) {

thum = item._embedded["wp:featuredmedia"][0].media_details.sizes.thumbnail.source_url

} else {

thum = "/images/logo.jpg";

}

/* 記事の書き出し */

$(dom).append(

"<div class='p-blog'><a href='"+

link + "' class='p-blog__link'>" +

"<div class='p-blog__thumb'><img src='" +

thum + "' alt='#'></div>" +

"<p class='p-blog__date'><time datetime='" +

datetime + "'>" +

date + "</time></p>" +

"<p class='p-blog__title'>" +

title + "</p></a></div>");

});

}

</script>

月別: 2018年10月

フォームのバリデーションテスト用入力を自動化

何ができるか？

なぜテストを書いて対応しないの?

利用するアプリ

UWSC は何ができるか？

本件では何を行うか

事例

form_insert.UWS

使い方

WordPress で運用している複数のサイトの記事を、別のサイトに読み込んで表示する方法

何ができるか？

WordPress のテンプレートタグは使えないのか？

方法

複数ブログを読み込む