まず大前提として、私はプログラムを組むスキルとしては、初心者に毛が生えたようなもので、なんとなく勉強はしてみたもののほとんどわかっていないような状況です。間違い等あれば教えてください。
さて前回の記事では、Wordpressにおいて、Javascriptをどうすれば動かせるのかを調べたり考えたりしました。
今回の記事では、『 WordPressで、データベースからランダムに文字や絵を表示させたい！ 』ということを目標に頑張っていきたいと思います。
完成したページ
参考にしたサイト
https://takala.tokyo/takala_wp/2018/04/19/428/
ありがとうございました。
サイトを確認してみると、データベースの代わりに『CSVファイル』をWordpressのメディアフォルダに入れ、そこからJavaScriptを読み込む・・・という流れのようですね。
まずはCSVファイルをメディアフォルダへ
私は『夜のシチュエーション』をいくつか書き出し、ランダムでその日のシチュエーションを選んでもらう、というものを作ろうと考えています。
まずは、エクセルでこのようなファイルを作り、SCV形式で保存しました。その時に日本名のデータファイルだとエラーになるかもしれない（これはなんとなくです）と思い、『sityu.csv』というデータファイルにしました。
次に、Wordpressの編集画面から『メディア』を選択し、『sityu.csv』を新規追加してメディアフォルダ内に保存します。
wordpressからCSVをクリックすると、『リンクをコピー』というところに URLがあります。あとで必要になるので取っておきましょう。
次にBodyタグ
参照元へ行くと、コードのコピペができます。これを参考にこのようにしました。
前回の続きからなので、最終行は関係ありません。ちなみに最終行はアラートを表示するJavascriptです。
ページを表示させるとこのようになりました。CSVを読み込んでいないので、IDの『text』と『author』は表示されていませんね。
Javascriptでデータを読み込む
参照サイトの最後の方に、作者の方が最終的に描いたコードがあります。
それをコピペします。するとこんな感じになります。
もう少し付け加えると
<style></style>で囲まれているところはその文章中の文字の大きさや配置などの設定。
<body></body>は実際に表示される部分。
<script></script>で囲まれているのがjavascriptの記述部分です。
しかし注意が必要な点として、scriptタグの中で、改行や<br><p>タグを入れてしまうと、うまく動かない、という仕様があります。
そこで、以下のように編集します。scriptタグ以降をすべてくっつけました。
コメントタグ（//以降）もとっています。
CSVファイルの場所を指定。
先ほど覚えておくように書いたCSVファイルの保存場所の指定をします。青く書かれた部分を自分のSCVファイルの保存先のアドレスにします。
何も考えずに、そのページのurlをコピーしてしまうとうまく読み取りません。urlには『php1888・・』みたいなのは入らないので注意しましょう。
これで完了・・。と思いきや、やっぱり何も出てきません。う～む。
Mixed Content というエラー発生 【検証してみる】
どこに問題があるのかわからないので、右クリックして『検証』を押します。
さらに、表示される【Console】を押すと、エラー内容などが確認できます。
このようなエラーが出ていました。
?preview=true:289 Mixed Content: The page at ‘https://syopura.com……?preview=true’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http://……./sityu.csv’. This request has been blocked; the content must be served over HTTPS.
httpとhttpの違い
調べてみると、
『https』は暗号化していて人に見られないよ、安全だよ！
『http』は見られちゃうかも、心配よ。
今回のコードは『http』を混ぜたらだめよ～心配よ、ってことみたいですね。
そこでこの部分が『http』になっていたので『https』と記述を変更します。
すると・・。少し変化が出ました。
文字化けしとる・・がなんか表示されてるぞ！
CSV読み込み時の文字化け対策 『Shift-JIS』 から『UTF-8』変換。
調べてみました。僕はエクセルでcsvデータを作りました。 どうもCSVの読み込み時には『UTF-8』という文字コードでないとうまくいかないみたいです。しかしエクセルは『Shift-JIS』という文字コードの形式で処理しているので文字化けしたみたいですね。
もともとのCSVファイルを右クリックして、メモ帳から開きます。
メモ帳で開き、文字コードを『UTF-8』に
そしてファイル名を『sityu2.csv』として保存します。
さきほどしたように新しく作ったCSVファイルをメディアフォルダに入れます。
同じように、CSVファイルのURLを取得します。そして、『HTTPS』に書き換えも行います。そうすると以下のようになりました。
すると・・・。
出たぞ~、ついに出たぞ～！！
記事内に燦然と輝く『痴漢』の文字。ついにやりました！
【追記】数日後CSV読み込みができなくなるエラー発生
なんということでしょう。あれだけ苦労して成功したのですが、またまたエラー発生です。
※この間にデザインの変更を行いました。ですがこれはエラーとは直接関係ありませんでした。
【エラー内容】No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
再度【検証】をクリックして、【console】から以下エラーコードが表示されていました。
Access to XMLHttpRequest at 'https://〇〇.csv' from origin 'https://syopura.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
(index):773 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://〇〇.csv with MIME type text/csv. See https://www.chromestatus.com/feature/5629709824032768 for more details.
getCSV @ (index):773
(anonymous) @ (index):773
prompt-injecter.js:49 Uncaught ReferenceError: recorder is not defined
at prompt-injecter.js:49
うーん？ で、分からないなりに調べたりした結果、【http】のページだけど、【https】を参照しようとしてるから変だぜ？
みたいなことを言われているエラーのようだということになりました。
【解決】
でね、よくわからんのですけど、普通にgoogleから検索してサイトを表示すると、
表示されるんですよ。 で、アドレスをコピーして貼り付けしたら、https://syopura.com/2019/09/18/夜のシチュエーション/ になりました。
ですが、編集ページから表示したページはこう。CSVから取り込んだ文字の取り込みができていません。
アドレスを表示すると、 https://syopura.com/2019/09/18/夜のシチュエーション/ となっていました。
というわけで、編集ページから表示をすると【http】スタートになり、（なぜだかよくわかりませんが）普通のページから見ると、【https】スタートになっているので、【https】で読み込もうとしているCSVテキストが表示されるみたいです。
まあ腑に落ちないところはありますが、とりあえず良しとします。
終わりに
まだ文字の位置や大きさなどなど改善するところはありますが、とりあえず大きなところは終わりました。今日はひとまずここまで！
ちなみにこのページで練習しました。夜のシチュエーション、決めちゃってください。（笑）
追記
こんなプラグインもあるみたいですが・・・、自分はうまく動かなかったのでわかりませんでした。みなさん試してみてください。
