ワードプレス上でjavascriptとhtmlを使って計算をやらせる

 

前回の投稿ではhtmlで色々計算させようと思ったのだけど、htmlだけだと色々やるのはちょっと難しそうな雰囲気。

内部リンク: ショートコードでhtmlコード利用・練習編〜四則演算導入〜

そういうわけで、今回の投稿ではjavascriptとhtmlを組み合わせて、ワードプレス上でちょっとだけ複雑な計算をやらせることを目標としたい。

ショートコードでjavascript自体が普通に動くのは確認済み。

内部リンク: htmlとjavascriptでユーザーインプットに対して文字列を返す

なので、後はjavascriptでちょっと複雑な計算を走らせる方法を調べれば良いだけだな。

ワードプレス上でjavascriptにちょっと複雑な計算をやってもらう

ってわけでJavascriptは何があるのかなーってみてたら、Mathオブジェクトでだいたい揃ってる。

うん、やりたいことやるのにこれだけで問題なさそうだな。

おお、つまりjavascript動かすテンプレ準備しちゃえば、そこそこの計算させるウェブツール作ってくのは結構楽なんだな。

ってかあっさり解決しすぎちゃってこの投稿書くことがまったく無いなー。

sinはMath.sinで計算できるよ!

なんて書いてもなあ……ああ、radiansが組み込まれてないらしいので(Math.PI/180)かける必要があるよ!

んー、いまいち。

あー、有効数字の関係かsin360度が0にならないな。そんなときは計算したところで.toFixedで出力桁数調整して解決!

さて、少し文字数も増えたしこんなもんでいっか……とりあえず下の実行例は角度を突っ込んで、角度1のサインと角度2のコサインを足し算して出力するもの。

コードのスクショ:

sinとcosの足し算

あ、日本語、ていうか全角だとバグるなこれ。英語になおしまーす。

実行例:

 

sin-angle (degree):

cos-angle (degree):

calculate sin(A)+cos(B)

 

よーっし、後は作りたかったwebツールを別投稿でつくろう!

関連記事

1. ウェブサイト制作系お勉強のまとめ

D

配列から要素をランダムに取り出してユーザーに返す(html, javascript)

 

前回の投稿でユーザーインプットに対して文字列を返すところまで書いたので……

内部リンク: htmlとjavascriptでユーザーインプットに対して文字列を返す

後はこの文字列を配列からランダムに取り出すようにしたい。

配列からランダムに取り出すってところは割と有名なやつがあるので難しくない(下のL15のところ)。

Math.Random()で0から1の間のランダムポイントを作り出して、配列の長さをかけることでその長さにスケールをあわせる。んでMath.floor()を使って整数化して取り出したい配列の要素指定に変える……ということだろうな。

配列からランダム取り出し

問題は、これだと一旦文字列取り出したところで固定されちゃうところなんだよな……繰り返しクリックしても、取り出されるのが同じ値になってしまう。

って、ああ……単純にファンクションの中でMath.random()に走ってもらえばいいだけか。

これにちょっと悩まなきゃいけないプログラム系の素養のなさが悲しい。

修正したのが以下のコード。まあ、もうちょいスマートな書き方はありそうだけど、とりあえずこれでやりたかったことは走っているから良しとしよう。

ランダムで文字列を取り出し その2

というわけで……これをワードプレスのショートコードに突っ込んで、以下が実装例。

ユーザーインプット(1・2かそれ以外)によって別々の配列から文字列を返す。

……Oops、ワードプレスエラーでサイトが表示できねえ。

ああ、これだとname_arr、name_arr2、name_arr3の配列のところのシングルクオテーションがショートコードのルールか何かに蹴られるのか。

ワードプレスに使う場合は、ここをダブルクオテーションに変える必要があるってことね。

というわけでそれを修正後の実行例。

 

here is output

 

うん、問題なく動いていそうな挙動。

というわけで、無事配列からランダムで文字列を返すツールができました。ちゃんちゃん。

これで自分で欲しかったwebツールを書くだけの材料ができたので、別サイトにて1つ目のwebツールを仕上げることにしよう。

……ってあれ、投稿のシングルページだとしっかり動くけど、ブログトップページだと動かないってバグがあるな。まあ、このページがブログトップから開かれる確率はほぼ0だろうしいいか。

関連記事

1. ウェブサイト制作系お勉強のまとめ

D

htmlとjavascriptでユーザーインプットに対して文字列を返す

 

前回は簡単な計算を書いてみたわけだけど……

内部リンク: ショートコードでhtmlコード利用・練習編〜四則演算導入〜

今回はユーザー入力に対して文字列を返すというものを書きたい。

やりたいのは例えば1-5で指定されるような文字列の辞書、というか配列を作っておいて、その文字が入力されたらランダムで1個の文字列を返すっていうこと……なのだけど、今回はとりあえずユーザーインプットに文字列を返すところだけ。

記述は難しくはない。だけど条件分岐とかが出てくるので、javascriptを混ぜることは必要になってくる。

ワードプレスのショートコードでhtml内包のjavascriptでユーザーとやり取り

とりあえず書いてみたのはユーザーの数字入力に対して、適当な文字列を返すプログラム。例のごとく諸事情でスクショで。コード自体は後でどっか別ページにまとめて貼り付ける予定。

ユーザー入力に対して文字列を返すコード

1だとTaroで、2だとHanako、それ以外だとJiroを返すコード。ああ、outputのライン(L19)は前のコードから消し忘れただけなのでいらない。

  • <script>の中にjavascriptを記述する。
  • if else文は他のプログラム言語と似たような記述方式だから書きやすい
  • documentのgetElementByIDメソッドでID”res1″にアクセスして、innerHTMLで内容を書き換える
  • innerHTMLよりもtextContentの方がいいよってのを見かけた。どっちでも動きはする。

 

以下が実行例。上のスクショコードをtextContentで書き換えて、ワードプレステーマのfunction.phpのショートコードテンプレに突っ込む。

内部リンク: wordpressにショートコードでhtmlコードを導入してみよう

という感じでこのjavascriptは私の環境では動いているけれど、javascriptなので止めてる人は動かないかもしれません。

 

here is output

 

関連記事

1. ウェブサイト制作系お勉強のまとめ

 

D

wordpressにショートコードでhtmlコードを導入してみよう

 

前回の投稿でワードプレスのテキストモードではonclick、oninputなどの機能が通常設定のままでは使えないことがわかった。

内部リンク:ウェブサイトの言語周りについてお勉強を始めよう in Finland!

ウェブサーチで見つけた一つの解決策はショートコードの機能を使う方法。今回の投稿ではショートコードでhtmlを走らせることを目的とする。

wordpressのショートコードの使い方

公式ページは以下のリンク。Developerの方のリンクを貼っとくけど、codexの方にもある。

外部リンク:WordPress API Shortcode

編集する必要があるのはfunction.php。ってやっぱりwordpressで何かしようと思うとfunction.phpをいじる必要が出てくる模様。

function add_text() {
$code = 'this is shortcode test for showing text';
return $code;
}
add_shortcode('addt','add_text');

function.phpに書き加えたのはとりあえずこんな感じ。

んでaddtを[]で囲むとショートコードが使えることになる。

アウトプットは以下のような感じ。

this is shortcode test for showing text

よくできました、ちゃんちゃん……っておしまいにしたいところだけど、もう少し続く。

ショートコードならばhtmlのoninputやonclickは動く仕様

さて、本題はこちら。

html直接打ち込むとテーマ設定か何かに蹴られて使えなかったoninputをワードプレスブログで動かしたい。

oninputのコードから作ったショートコードはこちら。

+ = 0

おお、動いたっ!

onclickはどうだろうか?

onclickのコードから作ったショートコードはこちら。

+ = 0

こっちも動いたっ!

ってことで無事ワードプレスのブログ内でユーザーインプットを受けて、ちょっと処理して出力するってことができました。

で、なんでコードを貼らないんだってことなんだけど……整形済みテキストでコードを近くに貼るとなぜかショートコードの方が動かなくなる変なバグがある。

というわけで一応スクショをここに貼っておくけれど、htmlコードをコピーしたかったら内部リンク:ウェブサイトの言語周りについてお勉強を始めよう in Finland!)を見て欲しい。いやコピーするほどのものじゃないけどさ。

しかし、これ毎回sftpでhtml直編集しないといけないってのがかなり面倒くさいな。ワードプレス内でテーマのphp編集できなくなってるのも解決するべきだろうか……

関連記事

1. ウェブサイト制作系お勉強のまとめ

D

 

ウェブサイトの言語周りについてお勉強を始めよう in Finland!

 

ちょっとやりたいことが幾つかあってそのためにウェブサイト用の言語を学んでおきたいなと思っている今日このごろ。

よく使われてそうな言語はhtml、css、javascript、それにphpって感じか。

ざっと見た感じ、htmlがウェブを作るので、cssがデザイン、javascriptで動かして、phpで便利化するって感じなのかしら。

wordpressはphpでってイメージが強いけど、結局全部使わないとまともな見た目と動作にはならないってことかな。ちょっとずつ全部勉強しながら必要なものを深く学ぶ感じで良さそう。

しかしjavascriptとphpでできることの差がよくわからないな。

wordpressの編集内で簡単に走らせようと思ったらjavascriptの方が良いのか。phpはfunction.phpを書き換えないといけなさそう。

ま、もちろん、そんな簡単にわかるわきゃないので、追々でいっか。

ワードプレス投稿内でhtmlで遊んでみる

まあとりあえずはワードプレス内で遊びながら学んでいこうということで……

テキストモードで打ち込んでそのまま動きそうなのはhtmlとjavascriptっぽいけどとりあえずhtmlで。

まずは……


htmlで入力ボックスの作製。ビジュアル編集ではなく、テキスト編集の方で……

<input type="text">

と書くだけ。

説明を入れたかったら……

<label>テスト入力:<input type="text" value="見えるかな?"></label>

という感じ。

もう少しそれっぽいのを作ると。

<p>
<label>数値1を入力してください:<input type="number" value=0 id="num1"></label>
</p>
<p>
<label>数値2を入力してください:<input type="number" value=0 id ="num2"></label><input type='button' value="get" id="getButton">
</p>

getはダミー。

そしたら、こんな感じで足し算でもしてみましょうか。

<form oninput="result.value = Number(A.value)+Number(B.value)";>
<input type="number" name="A" > +
<input type="number" name="B" > =
<output name="result">0</output>
</form>

ぬ……これだと動かないな。なぜだ。あ、テキストモードからビジュアルモードに戻ると、oninputのところが消えてしまうな……なぜだ。

色々追加。

<html>
<body>
<form oninput="result.value = Number(A.value)+Number(B.value)"> 
<input type="number" name="A" > + 
<input type="number" name="B" > = 
<output name="result">0</output> 
</form>
</body>
</html>

こういうタグ付けは意味なさげ。やっぱり単純に<form>のところの記述が消えちゃうのが問題っぽい。

ていうかhtmlテストサイトで試すと普通に動くし……ってことはwordpressに書き込めない方の問題か。

<form>
<input type="number" name="A" > + 
<input type="number" name="B" > = 
<output name="result">0</output>
<input type="button" onclick="result.value = Number(A.value) + Number(B.value);" value="calc">
</form>

これもだめね。onclickの記述が消えてしまう。つまりoninputとかonclickが私の環境のwordpressで動いてないってことか。

結局のところhtmlのoninputとかonclickが通常設定では使えない模様

ここまで来て何個かそれっぽい説明をしてるstackoverflowを発見。

やはりoninputとかonclickが、使ってるテーマかwordpressかで止められている感じか。function.phpを書き換えればいけるってことのようだけど。

それからショートコードを使えばいけるかも……なんて記述もあったので、次はそれを試してみようかな。

んー……でもなんだか最終的に目的にしてるものを実装するには、この書き方だと難しい気がしてきたな。どうせhtml, javascript, php勉強するなら、自作サイトを立ち上げたほうが良い気がしてきた……

関連記事

1. ウェブサイト制作系お勉強のまとめ

D