ワードプレス上で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

ショートコードでhtmlコード利用・練習編〜四則演算導入〜

 

前回の投稿ではwordpressのショートコードを使えば、ワードプレスブログ内にhtmlコードがより便利に導入できることがわかった。

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

今回の投稿は応用編っていうかまあ練習をするって投稿。もう少しいろいろとした計算をもう少しまともな見た目で書いてみたい。

とりあえず四則演算を回してみよう

まあ、これは計算記号を変えるだけで良いわけだけど、もうちょっとフォーマットを綺麗にしてみようという感じの目標で……

四則演算させるhtmlコード

っとまあ、とりあえずこのような感じで。相変わらずコード的なものをブログ本文に入れるとショートコードが動かなくなるので、コードはスクショで……

四則演算をショートコードでの実行例

そのままfunction.phpのショートコードの中身にコピペして……新しいショートコードを作製。実行すると……

 

=0

 

という感じで、当たり前だけどhtmlだけでも四則演算は普通にできますね。

三角関数・指数・対数などなど

このあたりのシンプルな関数はどうなのかなっていう調査。

いずれはユーザー入力に対してPythonを走らせるって方向に行くつもりなのだけど、とりあえずはhtmlでできることを模索したい……のだけど、htmlにはそんなファンクションはなさげなのかな?

CSSには計算が組み込まれてるみたいだけど、ざっと見てる感じではjavascriptと組み合わせる方が王道だろうか。

そうなるとjavascriptとショートコードの相性的なものから再勉強か。それなら別の投稿にまとめたほうが良い気がするので、これはまた次回の投稿で。

関連記事

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

D

 

多言語multisite設定で子テーマが使えないなと思ってたらアホなことしてた件

 

いや、なんでこのサイト子テーマ設定しても有効化されないのかなー、ってのは昔から長年の疑問だったのだ。

多言語用にマルチサイト化してるのが原因かなって思ってたんだけど、終ぞその理由がわかることはなく放置していたのだ。

今回ある投稿用にショートコードを導入したくてfunction.phpの編集をする必要があった。それでphpファイルいじるなら、やっぱり子テーマにしたいよなー、ってことで再び子テーマ化に取り組み始めたというわけ。

 

まずは子テーマの作り方の推奨設定が以前と変わっているようなので、CSSファイルなどの記述を新しいものに直した。

それを変えても私のサイトで子テーマが反映されない事実は変わらず。

結局のところ私の問題は子テーマの記述自体じゃないのか……と諦めずもう少しウェブ検索を続ける。

日本語サイトでイマイチ理由がわかる投稿がなかったので、英語サイトに飛んでプラプラ色々眺めていたところで、ふととんでもない記述を発見する……

”……サイトネットワーク管理でテーマを変えた後で、個別サイトの設定でテーマかえんとあきまへんでー……”

 

わかった!

理・由・は!

全体サイトの設定を子テーマに変えてたけど、各言語サイトのテーマ設定を個別に子テーマにしてなかったこと!!

子テーマに設定変更したつもりで変更してなかっただけでした!!

うおー、めっちゃアホなことしてたー!!!

 

日本語サイトの編集画面でもテーマを子テーマの方に変えたら無事動きましたよ……っていう投稿でした。

 

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

 

久しぶりにテーマをアップデートしたら色々と設定が消えてるなー

うーむ。

久しぶりにワードプレスのテーマにアップデートかけたら色々と設定が変わってる気がする。

ワードプレス自体がアップデートされていることもあるし、自分でphpいじっていたところを忘れてたってところもかなりありそう。

特に広告関連の設定が軒並み消えちゃってるので、とりあえず一時的に自動広告をONにしておく。

自動広告そんなに良くなかった印象があって、変なところに広告が入ったりするかもだけど……私がチェックしたのは始まった頃だったから、その頃よりはたぶん良くなってるんじゃないかなと期待はしてるんだけど。

できれば元の設定に戻していきたいとは思ってるけど、結構phpの書き換えは大変だった気がするので……まあちょっとずつだな。

しかし、やっぱり子テーマは使わないとだめだね。以前何かしら設定がうまくいかなくて本サイトでは子テーマ入れてなかったんだけど、今度こそしっかり勉強して使おう……

D

[2021年8月] wordpressでテーマのphp編集ができなくなってる件

久しぶりに使っているワードプレスのテーマのアップデートをして、ヘッダーやら何やらちょっとphpをいじる必要があった。

前回やったのがだいぶ前だったから、編集場所を探すところから始めないといけなかった。

ちなみに、編集場所は……

サイトネットワーク管理>>テーマ>>テーマエディター

だった。

致命的なエラーとその対策

さて、まずはヘッダーからいじるか……と始めようと思ったらいきなり以下のエラー文。

エラー文:

致命的なエラーをチェックするためにサイトと通信できないため、PHP の変更は取り消されました。SFTP を使うなど、他の手段で PHP ファイルの変更をアップロードする必要があります。

私の対策:

はい。大人しくSFTPでファイル編集しました。

エックスサーバー上での編集場所:

契約してるレンタルサーバーのエックスサーバーにログインして編集。

ログインしたメイン画面からファイル管理>>ファイルマネージャータブが開く

ウエブサイト名>>public_html>>wp-content>>themes>>テーマの名前

てな感じで各種phpファイルが見つかる。

直接編集もできるし書き換えのアップロードもできる。

ウェブに書いてあったけどやらなかったその他の対策:

ワードプレスのアップデート –> 既に最新

phpのアップデート –> 既に推奨バージョン

レンタルサーバー会社のWAFの問題 –> 余り知識は無いけど特にこれの問題はなさそうに見えた。

file.phpの編集  –> これでワードプレス上で編集できるようになるらしいけど、手間がftp編集するのと変わらない

 

という感じでした。まあそのうちワードプレスの方で編集できるようにアップデートされるんじゃないかな……と思うけれど、さてどうなることでしょう。

D

wordpress5.0にアップデートして投稿が保存できなくなったエラー

タイトルの通りwordpress5.0にアップデートをしたら、投稿編集の保存などができなくなってしまった話。
メジャーアップデートっぽいのだけど、前調べすることなくなんとなくアップデートしたら結構大変なエラーにハマった。

どうやらこのwordpress5.0へのアップデートでは投稿の編集画面にメジャーなアップデートが入った模様。だけどこの新しいバージョンの編集画面で投稿編集しようとすると、赤字で更新に失敗しましたと出て全く保存ができない。

とりあえずワードプレスの再起動なりしてみたのだけど効果なし。
しょうがないのでググって見たら、それなりに同じ症状を食らっている人がいる模様。というわけでいくつか試せることがありそうな雰囲気。

結果から書いておくと、私の場合はwordpress公式のClassic Editorというプラグインをインストールして有効化したら治った。
ただしwordpress5.0のメインのアップデートの一つである編集画面への変更を、昔のバージョンに戻すという本末転倒な方法。
まだアップデートしていない人はWordpressやプラグイン元がバグ修正を入れるまで待ってもよいかもしれない。

以下はググった中で出て来たバグの理由や他の治し方について簡単にメモしておく。私には効かなかったり、該当しなかったりのものだけど。

wordpress5.0の投稿更新不可バグの理由といくつかの対処法

理由については詳細はよくわからないんだけど、wp-jsonとのコミュニケーションがうまくいっていないからだそうだ。それでこのシステムが新しい編集方法のキモだそうで、そこが何らかの理由で潰されているとこのバグが起こる模様。

というわけで以下はいくつかの対処法。

  • パーマリンク設定をセーブし直す
    これが一番楽な対処法。設定のパーマリンク設定にいってただセーブするだけ。これで治った人が結構いたみたい。最初に試しておくべきもの。私にはこれは効果なし。
  • wp-jsonをブロックしている可能性のあるプラグインに対処する
    セキュリティー系のプラグインでこれをブロックしている可能性があるそうな。その場合はその設定を外す。もしくはそのプラグインを止めて事態が改善するか見てみる。私はこれは該当のソフトウェアがなかった。
  • httpsに設定を変える
    httpsにwordpress設定を変えていない場合そんなこともあるそうな。私はすでにhttpsなので該当しない。
  • Classic Editorプラグインで旧バージョンの編集方式に戻す
    私はこれで解決。

というわけでwordpress5.0のアップデートでエラーにハマった時のメモでした。アップデートで対応されるといいなと思うけれど、原因は複数ありそうな感じなので自分のハマった原因が対処されるかは謎だ。

まあ新しい編集画面そんなに使いやすそうじゃなかったからいいのだけど。

D

pythonを使ってjpeg画像をまとめて圧縮する方法

久々にwordpressの投稿関連の記事。とは言ってもpython記事だけれども。

さてwordpressユーザーの方はご存知の通り、wordpressのブログにアップできる画像の容量は1Mバイトまで。というわけでデジカメの画像はもちろん、携帯のカメラで撮影した写真でも多少サイズを小さくする必要があることが多い。

数枚ならどんな方法で圧縮してもいいのだけど、これが大量の画像になってくるとそれなりに面倒臭くなっていくもの。
いくつか良いフリーソフトウェアもあるようだけど、こんな時こそpythonを使って見るのも悪く無い。書き出しのファイルサイズを多少はコントロールできたり利点もある。

そういうわけで、この投稿ではpythonを使ってjpeg画像をまとめて1M以下にサイズ圧縮する方法について書いていきたい。

Pillowを使ってjpeg画像圧縮

画像の読み込みはpillowで。画像の読み込みができるpythonパッケージはいくつかあると思うのだけど、簡単な処理をするだけなら大して変わらないんじゃ無いかと信じている。
そんなことないよ。これのが全然早いよってのがあったら教えてください。

必要パッケージのインポート

まずは必要なパッケージをインポート。ファイル名の読み込みようにtkinter各種。それから画像処理にPIL、ファイル名の処理にosをインポート。
ioは画像サイズの処理の関係で利用。詳細は後ほど。

import os
from tkinter import Tk, ttk
import tkinter.filedialog as tkfd
import tkinter.messagebox as tkms
from PIL import Image
from io import BytesIO

tkinterで読み込みファイル名の取得

取り立てて変わったこともないけれど、一応jpgでもjepgでも読み込めるようにしてはある。画像ファイルは./ORIGINALっていうディレクトリに入れておいて一気に読み込めるような設定。

tk = Tk()
tk.withdraw()
print ('select a data files')
filenames = tkfd.askopenfilenames(filetypes= [('jpg','*.jpg'),('jpeg','*.jpeg')], initialdir='./ORIGINAL')
tkms.showinfo('file paths are',filenames)
tk.destroy()

画像サイズを1M以下になるまでjpeg圧縮

というわけでメインパート。画像を縮小するのではなく圧縮する場合だと、jpeg保存のqualityを変えていけばサイズが変わる。この場合qualityを5ずつ落としていっているけれど、そこらへんは適当に調整していただきたい。
for文でqualityを下げながら一回一回ファイルを書き出し、osのstat.st_sizeでファイルサイズのチェックをしている。
ちなみに書き出しは./REDUCEDというディレクトリの中に。

for i in range(len(filenames)):
  img = Image.open(filenames[i])
  basename = os.path.basename(filenames[i])
  for j in range(10):
    img.save('./REDUCED/'+basename+'.jpeg',quality=90-j*5,optimize=True)
    if os.stat('./REDUCED/'+basename+'.jpeg').st_size < 1000000:
    break
  img.close()

しかしこのやり方だと毎回ファイルを書き出して、読み込んでっていうのが少し気持ち悪い。

というわけで以下は実際にはファイルを書き出さない例。ioのByteIOを利用することでそんなことが可能になる。初めて使ったのでこのパッケージの詳細についてはよく把握していない。

qual = [0]*len(filenames)
  for i in range(len(filenames)):
  img = Image.open(filenames[i])
  for j in range(10):
    img_file = BytesIO()
    img.save(img_file,'jpeg',quality=90-j*5,optimize=True)
    #print (img_file.tell())
    if img_file.tell() < 1000000:
      qual[i] = 90-j*5
      break
  basename = os.path.basename(filenames[i])
  img.save('./REDUCED/'+basename+".jpeg",quality=qual[i],optimize=True)
  img.close()

実際にファイルを書きださないで処理しようと思った理由は速度があげられるかなっていうところもあった。

というわけで二つのスクリプトを1.3M、3.5M、4.5Mのjpeg画像を使って速度チェック。
ちなみに書き出されたファイルのサイズは674、989、962[KB]。元のサイズ差のせいなのか、qualityを5ずつ落としているせいなのか目が荒い。

ファイルを書き出す最初のプログラム:

4.87; 4.89; 4.91; 4.87; 4.84

ファイルをメモリに保存しとく2個目のプログラム:

5.34; 5.35; 5.61; 5.22; 5.23

というわけで意外なことに、一々ファイルを書き出すプログラムの方が早かった。メモリを食う方が速度が落ちるのかな。使っているパソコンのシステム次第で変わりそうな気もするけどどうなんだろう。
大した速度の違いがあるわけではないので、個人的には2個目の方が良いかなって思ってるんだけど、どんなもんでしょうか?

変換前後

最後に圧縮前後の画像の一例を載せようと思ったら、当たり前だけど圧縮前の画像がサイズの都合でアップできなかった。なんのためにこの投稿を書いていたのやら。画像を並べたスクリーンショットを参考までに。

関連記事

1. pythonのまとめ

2. pythonでデジカメのraw画像を一括読み込みして別形式で保存する

D