WordPress Plugin作成 〜アンケート集計〜

アンケート集計方法を実現するための方法を考え実装に着手します。

アンケート集計

ここ最近は、WordPressプラグインの作成をいやっていて、機能としては下のようなものを考えています。

  1. ダッシュボードにて、アンケートを作成
  2. ブログに挿入
  3. 主計結果をダッシュボードに表示

現状の実装

今までの経緯はこちらのリンクに記載しました。

とりあえずは、作成している(2020-01-25)時点でのプラグインを起動した時の動作です。

現状での実装

・ユースケースについて

  1. WordPressプラグインをインストール
  2. プラグインを有効化
  3. ダッシュボードでアンケートを作成
  4. アンケートの挿入位置の指定(各アンケート)
  5. アンケートのDB登録 ※未実装

現状の悩みどころ

アンケートの挿入位置をWordPressの(HTML)クラス名(wrap, primary, entry-header ...)で指定します。大まかに真ん中らへんとか下の方とか。。。
これに関して、ダッシュボード上で確認する方法を実装していません。そして実装する気も。。。
というのは、使用するテンプレートなどにより挿入いちをコントロールできるように挿入位置を下のように「選択」 or 「指定」できるようになっています。

なので、下手に確認用の実装を入れない方が良いと思いました。。。

アンケート集計について

色々と調査、検討をしてみたところ以下のような方法が良いであろうと思いました。

  1. 各アンケート(質問)をDBに登録
  2. 各アンケートの回答数(ボタンのクリック数)を登録
  3. ボタンが押下された回数をDBに登録
  4. 各質問をクロス集計できるように設定を入力できるフォームを作成する

そしてこの「クロス集計する」ための設定入力が必要です。しかし。。。その実装のイメージが難しく。。。どのように実装するかわからない状態です。

ここはちょっと頭をひねる必要がります。。。

でわでわ。。。



iPhone 開発を始める 〜開発準備をする〜

iPhoneアプリの開発のためXcodeのインストールから開発用のアカウントの作成、を行おうと思います。

ちょいと仕事の都合でiOS開発の手順を調べることになったのでついでに、自前でも調べることにしました。

参考にするサイトは本家家元のサイトです。

そして、開発なのでこちらで詳細を見ていきます。

開発準備、アカウント

参考にするサイトでは「デベロッパアカウント」という記載の仕方をしています。
とりあえずはアカウント(AppleID)で「developer.apple.com」にログインします。

そうすると、デバイス認証(番号を入力)がありますので、携帯を手に持っていると良いでしょう。

そして、Swiftに慣れていないならばSwiftPlaygroundで学習することをオススメしていました。

Xcodeのインストール

Xcodeの最新バージョンをダウンロードするには
MacでApp Storeアプリを開きます(デフォルトではDockにあります)。
右上隅の検索フィールドにXcode、Returnキーを入力して押します。
Xcodeアプリが最初の検索結果として表示されます。
[取得]をクリックし、[アプリのインストール]をクリックします。
プロンプトが表示されたら、Apple IDとパスワードを入力します。
Xcodeが/Applicationsディレクトリにダウンロードされます。

しかし、自分の持っているPCが古いため最新のXcodeがインストールできませんでした。。。

古いバージョンのXcode

リンクを見つけました。「Older Versions of Xcode」の文字があるりんくをクリックすると下のような画面に移動できます。(ログイン後です)

自分のOSはアップルマークから「このMacについて」をクリックしてやると

このバージョンに対応するXcodeはこちらのサイトからXcode一覧より

をダウンロードすることにしました。

そして、ダウンロード完了後に圧縮ファイルを展開します。

その間に。。。

有料?無料?

ここら辺がきになるところだと思います。自分は気になります。このページで詳細を説明しているようですが、英語でした。。。なので翻訳機能を使用します。

入門
Appleプラットフォームでの開発が初めての場合は、無料でツールとリソースを使用できます。より高度な機能を構築してApp Storeでアプリを配布する準備ができたら、Apple Developer Programに登録してください。費用は、会員年ごとに99 USDです。

「USD」はアメリカのドル($)です。

とりあえずは、無料で行けるようなのでそちらに進みます。が、無料版は「Apple Developer契約に同意する(英語)」だけのようです。そして有料の場合は。。。

さらに高度な機能を備えるAppを開発して配信する場合は、Apple Developer Programに登録してApp Storeで配信するか、Apple Developer Enterprise Programに登録して、所属する組織内で専用Appを配信することができます。プログラムに登録すると、メンバーシップに関係する追加オプションがアカウントに表示されるようになります。

というわけで、デバイスの認証について調べたかったのですが、Xcodeだけでできてしまうようです。

でわでわ。。。



アンケート調査アプリ3〜アンケート調査方法、理論編〜

前回は、アンケートの集計を行う方法を考えました。だいたい疑問に思うことは「どーやるか?」ということが多いです。。。

アンケート調査の式

前回やったことは下のようなことです。
集計時に使用する計算は下の4種類

1.平均値: 平均値は、回答結果の算術平均(全数値データを足しあげて、データ数で割ったもの)を指します。
2.中央値: 中央値とは、回答結果として得られた数値データを大きい(小さい)順に並べて、ちょうど真ん中の位置にくる数値です。
3.標準偏差: わからん
4.最小値・最大値: 最小値、最大値は、全数値データの中で最も小さい値、最も大きい値です。

そして「標準偏差」というのが「わからん」という内容でした。
しかしながら、「標準偏差」の計算方法までは理解しました。
早い話が以下のような数式で表現できます。

しかし、これだけみても「なんだこの楽が義は?」としか思えません。でも「数学」という世界ではこの落書きを1つの「言語」として使用するようです。
一般人の我々には「この言語」の意味を調べる必要があります。

数式の意味

以下のような内容です。

n = 全体の数
X = 各要素のうちの1つの値
i = 各要素の番号
Xi = 各要素の値
シグマの式は平均値

上記のようになっています。 細かいところは前回の記事を参照されたし。

プログラムで数式を表現する

上の式の場合は説明にあるn= ...の部分を「引数」として使用します。
そして、シグマは配列で表現できるので。。。

public double konosushiki(int n, int i, double[] X) {
// 平均値
double avg = 0.0;
double num = 0.0;
for (int i = 0; i < X.length; i++) {
num += X[i];
}
// 平均の算出
avg = num / X.length;
// 標準偏差
double hyojunHensa = Math.sqrt((X[i] - avg)^2 / X.length) / X.length;
return hyojunHensa;
}

こんな感じです。プログラムの方がわかりやすい!

算数になりますが、三角形の面積であれば下のようになります。

public double sankakei(int height, int width) {
   return height * width / 2;
}

このような形で「数式」をプログラムに置き換えるkとが可能です。

つまり「数学パズル」はプログラムで簡単なゲームにすることができる!ということです。

でわでわ。。。



アンケート調査アプリ2〜アンケート調査方法を調べる〜

今回はアンケートで集計した情報から欲しい情報を導き出す方法を考えます。

ちなみに、前回はアンケートプラグインで使用できる情報とその仕様を整理しました。

アンケート調査の基本

参考にしたアンケート調査はこちら
標準偏差についてはこちらです。

とりあえず基本としては、取得した回答(データ)の各割合を求めてやる(各質問/回答者)ことのようです。

集計方法一覧

1.平均値: 平均値は、回答結果の算術平均(全数値データを足しあげて、データ数で割ったもの)を指します。
2.中央値: 中央値とは、回答結果として得られた数値データを大きい(小さい)順に並べて、ちょうど真ん中の位置にくる数値です。
3.標準偏差: わからん
4.最小値・最大値: 最小値、最大値は、全数値データの中で最も小さい値、最も大きい値です。

統計に関して調べた時にも上記のようなキーワードが目に入りました。
そして、わかりづらいものが標準偏差です。
しかし、そんなものは一発です。ズバリ以下の通りです。

しかし、用途がわからん。。。

標準偏差の算出方法

Step1: 平均値を求める

皆さんご存知対象の値 / 全体の値が平均値です。
例を挙げると、クラスのテストの平均点などは以下のようになります。前提として対象のクラスは以下のような状態とします。

3-B組
人数: 30名(男15/女15)
クラス全体の取得した点数 / 30

これを一般化してやると。。。上の情報が下のように書き変わります。

X1組
人数: Y1人(男Y2 / 女Y3)
合計得点: Z1

Y1 / X1

そして、クラスから学校ないに変更してやると。。。

X1 ... Xn組
人数: Y1 ... Ynの合計
合計得点: Z1 ... Zn

表にすると下のようになります。

クラス名 人数 得点
X1 Y1 Z1
... ... ...
Xn Yn Zn

数式で表すと。。。

上のような式で表現できます。計算が面倒ですが、そこはプログラムにやらせましょう(笑)

Step2: 偏差を求める

まずは「偏差」ってなによ?というところから始まります。シグマのマークが出てきたところで自分は頭の中が全て「?」で埋め尽くされます(泣)

偏差とは、各データの値から平均値を引いた値のことです。

なるほど、テストの点数では以下のようになるわけだ。

・クラスの平均点50点
・自分の点数30点
→ 偏差値=-20

じゃ、これを一般化する(文字で置き換える)と下のようになります。ちなみに自分の点数=Aとした場合下のような式にな流のか?

上の式では、単純に「自分の点数の偏差値」なので役に立たない式ですが、これを合計したりなんだり。。。

Step3: 分散の平均を求める
分散=偏差を2乗を合計

なので
Aを要素(Xi)のうちの1つとしてみた時に上の式になりますが、これを一般化すると
![](http://zenryokuservice.com/wp/wp-content/uploads/2020/01/数式2.png)
のようになります。

そして、これを2乗するので下のようになります。
![](http://zenryokuservice.com/wp/wp-content/uploads/2020/01/数式3.png)

さらに、これの平均なので
![](http://zenryokuservice.com/wp/wp-content/uploads/2020/01/数式4.png)

##### Step4: 分散の平均の平方根を求める
![](http://zenryokuservice.com/wp/wp-content/uploads/2020/01/数式5.png)

最終的にはこの式が「標準偏差」となります。

## なにに使うのよ?
[こちらのサイトも見てみました](http://rplus.wb-nahce.info/statsemi_basic/stat_sanpudo.html)が、「ばらつき具合」がわかるということ以外はわかりませんでした。

しかし、ちょっと考えてみると「平均からどれだけ離れているか?」を示す値なのだから「〜が?%」のような答えは出ないのだと思いました。
「どのように分析するか?」という時に使用できそうな値です。

でわでわ。。。



アンケート調査アプリ1〜WordPressプラグイン作成中〜

WordPressプラグイン作成中です。このプラグインは以下のようなものです。

アンケートプラグイン

自分自身もそうですが、記載した記事や自分のブログサイトのアクセス数、今後どんな記事を書いていこうとか。。。
読者の皆さんがどのようなもの(記事)を期待しているか?を知るための手段として作成しようと考えたのが今回の動機です。

アンケート実施方法

アンケート調査を行うためのアンケートForm(入力)作成と入力してもらったデータ集計を行うの作成中です。
現状としては、アンケートの質問Formを作成するところまでできている状況です。

アンケートの集計

アンケート調査を行なったらその結果をグラフなどにして分析、今後の方針を決めるための情報を導き出さないくては「アンケートの意味」がありません。

しかし、ここである問題が浮き彫りになりました。

「アンケートの集計はどうやるか?」

上記の通り集計方法として以下のようなものがあることはすぐに調べがついたのですが、如何せん。。。集計した結果をどのようにまとめるか?を考える必要があります。

アンケートプラグインの仕様

  1. アンケートはユーザーが作成し、投稿する記事の中にアンケートのINDEX番号順で閲覧者が見つけられるように挿入する
  2. アンケートは質問1つにつき回答が複数でボタン押下により回答する
  3. アンケートの回答ボタンをDBに登録し回答数をカウント・アップしていく
  4. 全てのアンケートがクリックされた回数をDBに登録する
  5. 回答された時の時間も登録する(24H)
  6. 回答ボタンが押された時のユーザーのロケール(日本とかイギリスとか)

実装方法

画面上に必要な情報を入力するFormを作成します。上記の仕様からすると必要な入力項目は以下の通りです。

  1. 質問
  2. 回答(複数)

そして、欲しい情報はなるべく多く欲しいので以下のものをプログラムで取得します。

  1. 回答した時の時間
  2. ロケール(日本とかアメリカとか)
  3. 画面サイズより使用しているデバイス(PCとか)

現状で思いつくのは以上になります。
これらの情報から顧客(読者)のニーズを分析するための情報を導き出す方法を考えます。

使えそうな方法は以下のものがわかっています。
クロス集計法これだけです。。。

次回は集計方法に関して調べたいと思います。

でわでわ。。。



WordPress プラグイン作成〜ダッシュボードでフォーム登録する〜

前回はダッシュボードにフォームを作成するJSプログラムを作成しました。このフォームはアンケートの質問と回答を入力するためのフォームです、このフォームをDBに登録します。

フォームをDBに登録

以前作成したDB(テーブル)作成処理も関連してきます。プラグインを有効にした時にDB(テーブル)が存在しなければDB(テーブル)を作成するスクリプトを作成したので、今回はフォームを投稿の中に挿入することを考えながら実装します。

フォームの挿入

本来ならば、ここら辺の処理を全て「設計」してから実装するのが望ましいのですが、手探りでやっているので理想通りにはいきませんでいした。
フォーム挿入に関して、やり方は色々ありますが、今回は、以下のような手順でやろうと思います。

  1. プラグインを有効にした時にフォームを挿入するJSを生成(PHPで出力する)
  2. ダッシュボードで挿入するタグを指定
  3. 質問〜回答までの情報をDBに登録
  4. 投稿画面を開いた時にJSで、アンケートフォームを挿入する

上記のような手順で処理を行おうと思います。
作成中のコードはGitにアップしてあります。
index.php
manage.php

ダッシュボードの追加実装

DBに登録した情報を表示するためには、ダッシュボードで作成したアンケートを登録する必要があるのでアンケートの登録処理を実装しようと思います。
現状は、下のように作成したフォームHTMLをアラートで表示するだけになっています。

ちょっと余談ですが、プラグインを作成している時に「WordPressのご利用〜」とフッターメッセージが邪魔になるのでそれを削除したい場合はこちらのリンクによると下のようなコードを追加してやると削除できるようなのでそれを実装します。
add_filter('admin_footer_text', '__return_empty_string');

そして、作成したフォームは下のように表示できました。

ついでに、プラグインの有効時にBootStrapを使用したいのでBootSrapへの参照を追加しました。
echo '';
BootStrapのファイルはダウンロードしてきてドキュメントルートにフォルダを配置しているので上のようなパス(URI)を指定して参照を追加します。

さらに、作成したアンケートをどこに挿入するか?をWordPressで使用しているポジション(クラス名)を指定するように入力フィールドを追加しいました。

必要な入力フォームがあれば良いのです。。。(見た目のセンスは申し訳ない程度です)

次は、以下の点でどのように実装するか悩みました。

  1. 表示したフォームをDBに登録
  2. 必要な情報のみをDBに登録してPHP+JSでフォーム生成

そして、 2: PHP+JSで生成する方向に決めました。

というわけで、PHPでの登録処理を作成することにします。

でわでわ。。。



WordPress プラグイン作成〜ダッシュボードにJSでフォームを作成する〜

WordPressプラグインを使用する時にはダッシュボードでプラグインの機能を使用するために必要な情報を入力、カスタムしたいものです。
なのでプラグインのユーザーが使いたい機能(今回はアンケート)を作成できるようにプラグインの実装を進めていきます。

ダッシュボードで入力フォーム

今回の作成する「アンケートブラグイン」はしようとして以下のようなものを考えています。

  1. アンケートするための質問1つにつき回答のボタンを複数個(ユーザーが作成)
  2. 作成したアンケート(複数)を記事の中にバラバラに挿入する
  3. ダッシュボードでアンケートの集計結果を表示する(まずはクリックの階数表示のみ)

上記のように考えています。
そして、ダッシュボードでは「アンケートの作成」を行いたいので下のようにアンケート作成フォームを用意します。

使用するための簡単な説明もつけました。のちにドキュメントをちゃんと作成しようと考えています。

フォームの作成には以下のようなJSプログラムで作成しようと考えています、というか作成しました。
プラグインのディレクトリ構成は下のような感じで、プラグインの実装を行なっております。

  1. index.php(ダッシュボードにメニューを作成)
  2. manage.php(ダッシュボードメニューより画面部分を開く)

    この時点でのmanage.phpはPHPファイルなのにPHPの実装を行なっていません(笑)。
    必要なのはHTMLとJSの部分なので。。。
    以下はmanage.phpのJS部分のコードです。

    // 作成したアンケートの入力フォームを生成
    function createForm() {
    if (isCreated) {
        return;
    }
    let question = document.getElementById("questionMessage").value;
    let table = document.getElementById("questionTable");
    let inputs = table.getElementsByTagName("input");
    
    let messageElement = document.createElement("p");
    messageElement.innerText = question;
    let dom = document.getElementById("result");
    dom.appendChild(messageElement);
    for(let i = 1; i < inputs.length; i++) {
        console.log(inputs[i].dataset.ans);
        let but = document.createElement("button");
        but.innerText = inputs[i].value;
        but.dataset.ans = inputs[i].dataset.ans
        dom.appendChild(but);
    };
    isCreated = true;
    }
    

// 作成したフォームを削除 function deleteForm() { document.getElementById("result").innerHTML = ""; isCreated = false; }

// 作成したフォームを出力する function outputForm() { let dom = document.getElementById("result"); if (dom == null || typeof dom == 'undefined') { alert("Error"); return; } alert(dom.innerHTML); }

そして、実行した結果は以下のような見た目です。

項目追加ボタンでInput Anwersを追加して最後に登録ボタンを押下しました。

登録処理はJSからリクエストをPHPへ送信し、そのデータをDBに登録します。
このような仕組みをAjaxといい非同期通信でリクエストをサーバーへ送信します。
そうすると、サーバーのレスポンスを待たないので画面の操作で何かの待ち時間が発生しません。

そして、同じような仕組みでレスポンスを受け取る時、これをWebAPIとよんだりします。
JSONでデータを取得するものです。天気予報などRESTfiulAPIと呼ばれているのもがそうです。

ここら辺で失礼いたします。

でわでわ。。。



WordPress プラグイン作成〜DBを使用する〜

今回はWordPressプラグイン作成でDBを使用する場合の記事を記載します。

DBは何に使う?

はっきり言って、何にでも使用できます。例として以下のようなものが挙げられます。

  1. ユーザー管理、ログインを使用してユーザー専用ページ、機能などの実装に使用します。
  2. データの集計、今回作成しようとしている「アンケートプラグイン」でも使用します。クリックした時に対象になるデータをDBに登録、登録した情報を元にアンケートの集計を行います。
    3, WordPressのようなCMSの投稿記事の管理(表示)
  3. 独自調査のまとめなど。。。

挙げればきりがないので、ここら辺にしておきますが。こんな感じで使用できます。

プラグインで使用するには?

一応、プラグインの作成に関しては以下の記事を参照してください。
・ローカルサーバーを立てる
・ダッシュボードにプラグイン画面を追加する
・プラグインでダッシュボードにメニューを追加する
・プラグインでダッシュボードにメニューを追加する2
・プラグインでダッシュボードにメニューを追加する3

そして、DBの使用方法に関して設計をします。
最近発見したのですが、このファイルがなかなか設計しやすいと思いご紹介いたします。

上のようなものですが、子供用だと思って甘くみてはいけません。
作るものを考える時に初めに「結論(結果)」をイメージすると思いますが、以下のような手順で使用すれば、大人も十二分に使用できるツールだと思います。

  1. 「結論」を真ん中の酢ページに記載します。
  2. 「結論」のものを作成するのに必要な部品を両サイドに書き出します。当然線を引っ張るなどの手間を加えてやれば、それだけ直感的に理解できるものになると思います。
  3. そして、作業手順を適当な形で記載してやります。書き方はものによるのでなんとも言えません。。。

しかし、このような形でかかれた設計図は「直感的」で「シンプル」なものになるのでユースケースとしても使用することができると思います。

プラグインへのDB作成

今回は、わかりやすい方法で、自分がそのように使用するのですが。。。

プラグインを有効にした時に作成

上記のように、プラグインを有効にした時に必要になるDBを作成するようにしようと思います。
懸念点としては、プラグインを有効にした時に「毎回テーブル(DB)が作成されると困る」というところです。。。

とりあえずは、テーブルの設計をします。
使用したいデータを列挙します。例えばログイン機能であれば、ID、ユーザー名、パスワード。。。などです。今回は使用しませんが、「パスワード」はDBのデータが盗まれたりすると大変危険(情報漏洩)なのでパスワードの登録は暗号化を使用します。

テーブルの作成方法

そして、設計ができたら「プラグインを有効にした時に作成する」プログラムを作ります。
先ほど懸念していた「毎回テーブルが作成されるのでは?」という部分も解決できます。

SQLを使用する

DBサーバーの名前にもある通り「SQL」を使用してテーブルを作成します。
SQLはDB操作に使用するプログラミング言語です。有名なものとしてはMySQLもそうでるがORACLEもあります。

ますはテーブル作成

テーブルを作成するのには「Create Table文」を使用します。今回はWordPressを使用しているのでMySQLのドキュメントをリンクに貼り付けています。
書き方は決まっていて下のように書きます。ちなみにコメントは「#」と「--」が使用できるようです。

CREATE TABLE 
pet  -- 作成するテーブル名
(name VARCHAR(20), -- "name"というカラム名
owner VARCHAR(20), -- "owner"は20文字分
species VARCHAR(20),
sex CHAR(1),  -- 性別は一文字
birth DATE,  -- 誕生日は日付型のデータ
death DATE);

上のような文でテーブルを作成することができます。
そして、懸念点の解決方法としては以下のようにCreate Table文に「if not exists」をつけてやれば解決です。
MySQLのCreate Table文の文法
create table 自作テーブル if not exists
自分の作成したSQL(Create Table文)は下のようになりました。

create table if not exists questionary(
    question_id int not null PRIMARY KEY AUTO_INCREMENT,
    question varchar(60),
    answers varchar(60),
    hrml_class varchar(15),
    html_style varchar(15),
    click_count bigint);


これはローカルのDBサーバーに作成したので公開されていません。

ポイント

テーブルのキーになるカラム(question_id)はプライマリキーなのでこのテーブルでは必ず一意(テーブルの中では1つしか存在しない)なのでquestion_id=1というのは必ず1つになります。

そして、「AUTO_INCREMENT」をつけているのでデータが登録された時にバックエンドプログラムがquestion_idの値を追加してくれるというわけです。

まとめ

今回はアンケートプラグインで使用するDB(テーブル)を作成しました。使用したプログラミング言語は(SQL)というものです。
SQLはDB操作のためにいろんなことができます。メールの送信などもできます。
そんなわけでSQLが使えると色々と便利です。

でわでわ。。。



WordPress プラグイン作成〜アンケート作成プラグインを作る〜

前回までに、プラグインのハコを作成しました。
つまりは、ダッシュボードにメニューを追加、クリックすることで自作のページを表示することができるような実装を行いました。

そして、今回はアンケートのための質問と回答するためのボタンを作成するJSプログラムを作成しました。

JSでフォーム作成

できたものは下のようなものです。
<入力前>

<入力後>

下の部分に質問とボタンが表示されています。
これを投稿画面に挿入しようという考えです。

まずはHTMLで質問などの入力部品を作成

<table id="questionTable">
    <tr>
        <td>
            <font size="3">Input Question: </font>
        </td>
        <td>
            <input id="questionMessage" type="text" maxlength="30" size="35" placeholder="質問内容を記入します"/>
        </td>
    </tr>
    <tr>
        <td>
            <font size="3">Input Answer: </font>
        </td>
        <td>
            <input id="ansText0" data-ans="0" type="text" maxlength="12" size="12"/>
        </td>
    </tr>
</table>
<button type="button" onclick="addRow(this)">項目追加</button>
<button type="button" onclick="createForm()">作成</button>
<button type="button" onclick="deleteForm()">削除</button>

そして、質問の数を増やすためのボタン、フォームの作成ボタン、作成したコンポーネントの削除ボタンと用意しました。
具体的なJSの実装は下のようになっています。

// フォーム作成フラグ
let isCreated = false;
// ボタンのカウンタ
let num = 0;
// 質問の回答項目を追加
function addRow(button) {
    num++;
    let table = document.getElementById("questionTable");
    // テーブに行を追加
    let row = table.insertRow(table.rows.length);
    let col1 = row.insertCell(0);
    let col2 = row.insertCell(1);
    col1.innerHTML = 'Input Answer: ';
    col2.innerHTML = '';
}
// 作成したアンケートの入力フォームを生成
function createForm() {
    if (isCreated) {
        return;
    }
    let question = document.getElementById("questionMessage").value;
    let table = document.getElementById("questionTable");
    let inputs = table.getElementsByTagName("input");
// 文言を表示するためのpタグを作成
    let messageElement = document.createElement("p");
    messageElement.innerText = question;
    // フォームを出力するためのdivタグにフォームを追加する
    let dom = document.getElementById("result");
    dom.appendChild(messageElement);
    for(let i = 0; i < inputs.length; i++) {
        console.log(inputs[i].dataset.ans);
        let but = document.createElement("button");
        but.innerText = inputs[i].value;
        but.dataset.ans = inputs[i].dataset.ans
        dom.appendChild(but);
    };
    isCreated = true;
}

// 作成したフォームを削除
function deleteForm() {
    document.getElementById("result").innerHTML = "";
    isCreated = false;
}

こんな感じで実装しました。

でわでわ。。。



WordPressカスタム〜ダッシュボードのプラグイン画面作成3〜

WordPressのダッシュボードにプラグインを作成、メニューで開けるようにしました。
1.プラグインメニューの作成
2.プラグイン画面の作成

そして、作成したプラグインでダッシュボードに画面を表示するところまで実装しました。

実装のまとめ

実装(作成)したファイルは以下のものになります。

  1. CustomQuestionary/index.php
  2. CustomQuestionary/manage.php

上記のindex.phpでは、プラグインの説明コメントを作成、ダッシュボードにメニューを追加してメニューをクリックすることでmanage.phpを読み込むよう実装しています。

// 表示する内容
function helloCustomQuestionary() {
    require_once(plugin_dir_path( __FILE__ ) . '/manage.php');

}
// ダッシュボードに追加するための関数
function addCustomQuestionary() {
    // ダッシュボードにこの表示が出るように追加する
    //wp_add_dashboard_widget( 'my_dashboard_widget', 'Featured Dashboard Page', 'helloCustomQuestionary' );
    add_menu_page( 'Test Plugin', 'CustomQuestionary', 'manage_options' , 'test-plugin' , 'helloCustomQuestionary' );
}
// 管理メニューを表示した時に
//add_action('wp_dashboard_setup', 'addCustomQuestionary');
add_action('admin_menu', 'addCustomQuestionary' );
do_action( 'addCustomQuestionary' );

そして、require_once(plugin_dir_path( FILE ) . '/manage.php');の部分で画面作成をしているphpファイルを読み込みます。

<?php
?>
<h1>Custom Questionary Plugin</h1>
<hr>
<dl>
    <dt><h4>Usage(使い方)</h4></dt>
    <dd>1.Create Questions(質問を作成します)</dd>
    <dd>2.Create answers(回答を作成します)</dd>
    <dd>3.Set position(設置する場所を指定します)</dd>
</dl>
<hr>
<h3>Question(質問)</h3>
<table id="questionTable">
    <tr>
        <td>
            <font size="3">Input Question: </font>
        </td>
        <td>
            <input type="text" maxlength="30" size="35" placeholder="質問内容を記入します"/>
        </td>
    </tr>
    <tr>
        <td>
            <font size="3">Input Answer: </font>
        </td>
        <td>
            <input type="text" maxlength="12" size="12"/>
        </td>
    </tr>
</table>
<button type="button" onclick="addRow()">項目追加</button>

<script>
function addRow() {
    let table = document.getElementById("questionTable");
    let row = table.insertRow(table.rows.length);
    let col1 = row.insertCell(0);
    let col2 = row.insertCell(1);
    col1.innerHTML = '<font size="3">Input Answer: </font>';
    col2.innerHTML = '<input type="text" maxlength="12" size="12"/>';
}
</script>

phpファイルだけど、中身は全てHTMLです(JS含み)こんな感じで必要な情報を入力していくようにしたいと思います。

ここから、アンケートの作成に必要な情報を入力します。

でわでわ。。。