Programs


音楽 リズムづくりのための試作プログラム


Activity Logs

開発中のWEB教材や、それに関わる論文の進捗などを報告します。

TwitterやFacebookなど多くのSNSがありますが、あえて、テキストサイトにこだわります。

直近20件を表示しています。

過去ログはこちら

雑記。

MacとWindowsを併用しているのですが、Windows側のiCloud Driveの動きが非常に悪い

具体的には、
・ファイルの同期に異常に時間がかかる。
 (ほかのMacやiOSデバイスでは、すぐに更新が反映される)

OneDriveだと、Mac側にも一瞬で反映されるのですが、iCloud Driveではそういかず。

しかし、タスクマネージャを開いてみると、結構なCPU利用率
そして、ネットワークの項は0%のまま。

一体、何をしているのやら。

ロリポップサーバー/WordPressのタイムゾーン(PHP)

「n月になったら表示」みたいなPHPプログラムを、ロリポップサーバーで動かそうとしたらうまく働かなかった。

例えば、次のようなプログラム。

foreach($month = 1; $month <= 12; $month++){
  echo "${month}月";
  if ($month >= date("n")) break;
}

このプログラムは、4月1日になった瞬間に、1月から4月まで出力する。

しかし、実際には、3月までしか出力しなかった。
ちなみに、現在(4月1日深夜)は4月まで出力されています。時差がある。
プログラムのどこかにミスがあるのか。あるのだろう。

そこで思ったのが、PHPのタイムゾーン。

ロリポップのサーバー側のタイムゾーンがおかしいんじゃないのか?!

phpinfo()でタイムゾーンを確認してみます。

ちゃんと、「Asia/Tokyo」になってますね。
正しくセットされています。
疑って、ごめんなさい。

むしろ、ローカルのXAMPPの方が、ベルリンになってますね。
あとから直さないと・・・。

じゃあ、WordPressでタイムゾーンが上書きされているのか?!

サーバーのタイムゾーンが正しいなら、WordPress上でタイムゾーンがあらぬところに上書きされているのかも。

試しに、WordPressのファイルの1つでdateを出力しました。

echo date("Y-n-j H:i:s");
> 2020-4-1 15:41:00

うーん。今、ターミナルでdateを打つと
「2020年 4月 2日 木曜日 00時43分59秒 JST」
と返ってくるので、タイムゾーンがずれてますね、WordPress上で。

ちょっとググってみます。

【Z.com WP】WordPressのタイムゾーン設定

WordPressの設定画面を確認。

やっぱり「東京」になってますね。
念のため「変更を保存」を押して、再度確認。

echo date("Y-n-j H:i:s");
> 2020-4-1 15:50:11

やっぱ、タイムゾーンがズレてますね。
念のため、「UTC+9」で試してみます。

echo date("Y-n-j H:i:s");
> 2020-4-1 15:53:57

ダメですね。

echo date_default_timezone_get();

でタイムゾーンを確認します。

> UTC

ダメですね。

もうよく分からなくなったので、直指定。

date_default_timezone_set("Asia/Tokyo");

これで、さっきのタイムゾーンの確認と時刻の出力を行ってみます。

echo date_default_timezone_get();
> Asia/Tokyo

echo date("Y-n-j H:i:s");
> 2020-4-2 01:00:16

やっと期待した結果に。

なんでか分からないけれど、私のWPは設定画面で「東京」「UTC+9」を指定しても、「UTC」になってしまうようですね。どこかで上書きされている・・・?

というわけで、共通に読み込むヘッダファイルで

date_default_timezone_set("Asia/Tokyo");

を宣言することにしました。下のような具合です。

<?php
// タイムゾーンを強制的に Asia/Tokyo に指定する
date_default_timezone_set("Asia/Tokyo"); 

?><!doctype html>
<html lang="ja">
  <head>
(略・・・)

邪道な気がしますね。
忘れた頃に、どこかで不具合が起こりそう・・・。

開発とは関係のない話。

MacBook(2015 Early)の下取りを検討

新年度ということもあり、身の回りのモノを整理している。
その1つとして、昨年春に買ったMacBookPro(2018)がメインマシンになったために、全く使わなくなったMacbook(2015 Early)を下取りに出そうと思う。

Appleの下取り価格だと、1万8千円ほど。
しかし、ソフマップだと、その倍、最高4万ほどつけてくれるらしい。

しかし、そこまで見た目は良くない(本体に傷が入っていたりする)し、購入時のケース等もないので、減額されるだろう。でも、Appleよりかは、高く下取りしてくれるのではないか。

そこで、Macbook(2015)を久しぶりに起動し、下取りに出せるように準備する。

・データを外部HDDに移動
・iCloudからサインアウト
・iTunesの認証の解除
・アクティベーションしていたソフトウェアの解除

これらを行った後に、リカバリーモードで再起動し、ディスクを初期化&OSを再インストールする。

このあたりで、あるトラブルに気付く。

十字キーの「上矢印」ボタンが反応しない。

何度押しても反応しない。そのほかのキーは問題なさそう。
調べてみると、Appleは修理プログラムを出している。

MacBook、MacBook Air、MacBook Pro キーボード修理プログラム

おそらく、MacBook(2015)は、このプログラムの対象になっている(そして、今メインで使っているMacBookPro(2018)も・・・)。

面倒だが、十字キーを直さないと、下取りで大きな減額を食らうだろう。
修理プログラムが適用されるまで、そして、返ってくるまで、どの程度時間がかかるのだろうか—。

急に力尽きるメガネ

そんなことで、テンションが落ちているときに、机の上に置いていたメガネを、誤って床に落とす。

その瞬間、フレームが破損!

ちなみに、レンズは先月交換したばかりである(約2万)
ここで、フレームも修理となると痛い。

フレームは2015年に買ったものなので、そこそこ年月は経っている。
経年劣化かしら。

出費は重なる。

「アオイホノオ」(2014)

先日、「アオイホノオ」を観た。

原作(漫画)は、昔、東京にいた頃(つまり、5年以上前に)に途中まで読んでいたが、こちらもひじょうに良いドラマ(原作に忠実+わかりにくい点を補完)で「あたり」だった。

そこで今日、近くのレンタルCD屋が半額日だったので、OPテーマ曲「あーだこーだそーだ!」ウルフルズ)の入ったアルバムを借りる。

ついでに、真逆の棚にあったZARDのベストを、4枚組というお得感から借りてしまう。

「王立宇宙軍 オネアミスの翼」

こちらもついでにレンタル。
かなり昔に、借りて観たことがあるが、冒頭だけ見て止めてしまった気がする。

先の「アオイホノオ」の準主役(のモデル)だった庵野秀明の作った映画とのことで、見ておこうかな、と。

Vue.jsのStyle要素は研究中

一日中雨だったけれど、桜の花は、落ちていなかった。

福間創の「this is our music」が届く。
平沢進が加わっているとのことで購入した。
早速聴いてみたが、ほぼ全曲インストのようで、これらの音のいずれかを平沢進が奏でているのだろう。おそらく。

じっくり聞くのは後にして。


Vue.jsにて、Style要素がどのような順番(タイミング)で読み込まれるのか(書き出されるのか)が分かっていない。

動かしてみると、上のようになるのだが、ここで問題なのは、Bootstrapが何度も読み込まれていることである。非常に無駄な動きをしている。

そして、一番最後にBootstrapを再度読み込むものだから、それまでに上書きしたつもりでいたスタイルが、本来のBootstrapの記述に上書きされ、無効とされてしまう(ややこしい)。

main.tsなどで読み込ませているBootstrap等のライブラリやStyleの記述は、どのような順番で書き出されるのか、また、Componentの中で読み込ませた場合には、どのタイミングで書き出されるのかを調べなければならない(でないと、レイアウトが作れない!)。

メビウス。

久しぶりに自宅に戻ると、『50年の歩み』『音楽教育学』『初等教育カリキュラム研究』が届いていた。

コロナウイルス騒ぎに負けず、(予防はしっかりとしながらも)研究を頑張って進めよう。

自身のホームページを更新せぬまま、3月末になってしまいました。

3月はVue.js を使ったWEBアプリ開発の一方で、Wordpressを使った開発がメインの月になりました。色々と書き留めるべきTipsはあったのですが、更新することができず、もったいなかったです。

何も書かないまま3月が終わるのももったいないので、今日出会ったエラーについて記しておきます。

WordPressにプラグインをいれたところ、エラー表示が頻発

開発を続けるごとに、いろいろなエラーに出会うのですが、今回のはまた困ったエラーです。

WordPressでの開発を続けるにあたって、Query MonitorDebug BarDebug Bar Extenderといったプラグインをローカルの開発環境に入れた瞬間から、下のようなエラーが頻発。
(画像はWordPressの投稿画面です。)

Deprecated: Function create_function() is deprecated in /opt/lampp/htdocs/hiroshi-wp/wp-content/plugins/debug-bar-extender/debug-bar-extender.php on line 222

「create_function() は将来なくなるから、非推奨。使うな!」というところでしょうか。

ググってみると、PHP7.3以降で発生するエラーのようです(ローカルの開発環境(XAMPP)はPHP7.4.1でした)。

エラーをみたところ、DebugBarExtenderをいれた開発環境でのみ起こるエラーなので、とりいそぎ、Deprecatedのエラーは表示させないように修正。

wordpressをPHP7.3で使うと「Notice」「Deprecated」のエラー表示がされる対応

ローカルのXAMPPで動かしていたので、そこのphp.iniを上の記事に従って修正します。

php.iniを編集(してもダメ)

ローカルのXAMPPが見ているphp.iniのパスは、「/opt/lampp/etc/php.ini」。早速こちらのファイルを開きます。

516行目に
error_reporting=E_ALL & ~E_DEPRECATED & ~E_STRICT
という箇所がありました。

ちなみに、109行目にはこんな説明も。

 ; error_reporting
 ;   Default Value: E_ALL & ~E_NOTICE
 ;   Development Value: E_ALL | E_STRICT
 ;   Production Value: E_ALL & ~E_DEPRECATED

とりいそぎ、516行目を、

error_reporting = E_ALL & ~E_NOTICE & ~E_DEPRECATED

と修正し、Apacheを再起動。が、なおらず

PHP.iniがちゃんと反映されているのか知るために、534行目を修正。

display_errors=Off

しかし、エラーは消えず。ちなみに、phpinfo()側での「display_errors」はoffになっているので、php.iniの修正は反映されているみたいです。

.htaccessを修正(してもダメ)

なら、.htaccessにいらんことを書いているのだろうか。WordPressルートフォルダの.htaccess側は次の通り。

# BEGIN WordPress
# `BEGIN WordPress` から `END WordPress` までのディレクティブ (行) は
# 動的に生成され、WordPress フィルターによってのみ修正が可能です。
# これらのマーカー間にあるディレクティブへのいかなる変更も上書きされてしまいます。
<IfModule mod_rewrite.c>
RewriteEngine On
# RewriteBase /
RewriteBase /hiroshi-wp/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# RewriteRule . /index.php [L]
RewriteRule . /hiroshi-wp/index.php [L]
</IfModule>
# END WordPress

とくにおかしいところは見当たらず。

ここに下の行を加えてみます。

php_value "error_reporting" "E_ALL & ~E_NOTICE & ~E_DEPRECATED"

こちらも同様にダメ

php_flag  display_errors Off

エラーの非表示も効かず

こちらも、そもそも修正が効いているのかどうか調べるために、同じディレクトリで<?php phpinfo(); ?>を確認。

display_errorsOffになっていました(Local Value)。効いています。
error_reportingも設定した値が確認できました。

では、なぜエラーが出続けるのか。設定すべき.htaccessが違うのか?

理由が分からぬまま、ググり続けます。

@を問題の関数の前につけて、エラー表示を抑制

wordpressのDeprecatedエラーを至急抑制したい

こちらのページが参考になりそう!

とりあえず、今まで行った、php.inihtaccessへの変更は元に戻します(Apacheも再起動)。

そして、エラーの出ているファイル「wp-content/plugins/debug-bar-extender/debug-bar-extender.php」の222行目にある「create_function() 」に@をつけます。

221 foreach( $checkpoint_actions as $action_hook ) {
222   add_action( $action_hook, @create_function( '$in=NULL','dbgx_checkpoint("' . $action_hook . ' action");if ( $in ) return $in;' ) );
223 }

上のような具合です。すると、エラーが出なくなりました
(エラーは出ているんだけれど、出力させていない、でいいのかな。)

このプラグインは、本番環境で使用するつもりはないので、とりあえず、開発環境にてエラーが出なければそれで良いです。

そして、次の問題として、「なぜこのエラーをphp.ini.htaccessの編集で止められなかったのか・・・」ですね。修正箇所を間違えていたのでしょうか。いたのでしょうね、おそらく。

こちらも参照

PHPのエラー表示設定について

.htaccessでPHPの設定

 WAIT  Compiling...                                                                                                                            23:10:13

98% after emitting CopyPlugin

 DONE  Compiled successfully in 155ms                                                                                                          23:10:13

Type checking in progress...

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.0.10:8080/

No type errors found
Version: typescript 3.5.3
Time: 1184ms

この「DONE Compiled successfully」を出すのに、
どれほど型チェックをしたことか。

TypeScriptの挙動の厳格さを知ります。
(肝心のプログラム製作が進んでいません・・・)

10日以上更新をしていませんでした。
何もしていなかったわけではありません。

世の中の深刻なマスク不足に悩んだりしております。

その一方で、Vue.jsをいじるために、TypeScriptをちゃんと理解する必要性を感じ、良いリファレンスを探していました。

本屋で色々見ましたが、一番わかりやすかったのは、Kindleで販売されている「速習TypeScript: altJSのデファクトスタンダートを素早く学ぶ! 速習シリーズ」です(値段も安い)。

執筆者は「山田 祥寛」。

この人は、ほかにも

「新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで」
「これからはじめるVue.js実践入門」

などを出版していますが、どれも分かりやすいですね。

「速習 ECMAScript 2019: 次世代の標準JavaScriptを今すぐマスター! 速習シリーズ」も買いました。とくに、非同期処理の部分が大変分かりやすかったです。

これらを参考に、引き続き開発を続けていきます。

「Angular」と「Vue.js」「React」

ちょっと横道にそれて、Angularの本を中古で買いました。
JavaScriptで開発するにあたって、React、Vueと一緒によく紹介されており、他と比べて、パフォーマンスが高いという記事もよくみるからです。
あとから、「ああ、Angularを選択しておくんだった!」ということは避けたい。

そして、本をちらっと読んだところ、Angularも、VueやReactとやっていることは大きく変わらないのかな、という印象。

例えば、PHPやRubyによるWEB開発系の本ではよく見られる、「データベースとのつながり」などよりも、「HTMLとそこに埋め込まれたデータを、動的にどう扱うか」ということに焦点が当てられているように感じます。

Vue.jsのパフォーマンスがほか2つより悪いというのは、こちらの記事でも紹介されています。これから音を扱うWEBアプリをつくる上で、パフォーマンスの悪さは気になるところです。

しかし、「わかりやすさ」という点から見ると、Vueはほか2つよりも、よく初級者向けに適しているという記事をみます。あまり、新しいフレームワークの習得に時間をかけることができない事情から考えると、現在少し手を出したVue.jsで開発を続けた方が良いように感じました。

最初から「非同期処理」など、色々な機能をデフォルトで備えているAngularにはあこがれますが、Vueでもできなくはないらしいので、その都度考えていきたいと思います。

時間が空いてしまったけれど、何もしていないわけではない。
引き続き Vue.js による開発を続けている。

先月、React を用いて開発したときよりも、Vue.js の方が、(私的には)非常にわかりやすい。とくに親コンポーネントと子コンポーネントとのデータのやりとりが、ReactよりVue.jsの方が、後からコードを読んだときにわかりやすいがする。(長い時間をかけてコーディングをすれば、そうでもないのだろう。)

現在、直面している問題として、Vue.jsによる親コンポーネントから子コンポーネントの関数の呼び出しである。結果としては「動いている」のだけれど、「ターミナル上ではエラー」が出ている。

30:20 Property 'addTrack' does not exist on type 'Element | Element[] | Vue | Vue[]'.
  Property 'addTrack' does not exist on type 'Element'.
    28 |     // Property 'addTrack' does not exist on type 'Element | Element[] | Vue | Vue[]'.
    29 |     // Property 'addTrack' does not exist on type 'Element'.
  > 30 |     this.$refs.tvc.addTrack()
       |                    ^

Propsでは値を受け渡すだけで、関数を呼び出せないみたいだし、公式ドキュメントによると、refもあまり推奨されていないらしい。

「addTrack」という関数をもっていると、どこかに明示する必要があるのか、ググってもいまいちわからない。

Vuexを使うほどでもない。

諦めかけていたところ、暁光。

1)Nuxt(Vue) + TypeScriptでの$refsの参照エラー

TypeScriptの記述の問題らしい。
$refs がもともと定義されていないから起こったのかな?

  $refs!:{
    tvc: HNTrackViewController
  }

こんな感じでしっかりと明示してやると、無事動きました。めでたし。
(refで参照したりと、やってることは、Reactとあまり変わらんかもしれんね。)

2)vue.js + typescript = vue.ts ことはじめ

ついでに、 $emit の記述を 2) を参考に修正。importEmit を含めるのを忘れずに。

  @Emit('add-track')
  public addTrackToApp() {
    //this.$emit('add-track')←元のコード
    return
  }

将来的に、DB使ったり非同期処理使ったりしたいなら、Angularを選択した方が良いのかなとも思ったのですが、とりあえず、Vue.jsで開発を続けます。

Mac に環境をかえてコーディングしたところ、

% npm install

でエラー。

> node-gyp rebuild

No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.

gyp: No Xcode or CLT version detected!

どうやら、XCodeが入っていないらしい。
(むかし、インストールしたはずなのだが、OSX を 10.15にアップデートした際に消えてしまったのかな。)

App Store から XCode をダウンロード(約8GB)。
(iPhoneのテザリングを通してなので、通信量がちょっと痛い。)

インストール後、起動してライセンスに同意。
再度、npm install を叩く。

> node-gyp rebuild

No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.

No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.

gyp: No Xcode or CLT version detected!

またも、エラー。
一応、ターミナルで Command Line Tools をインストールするコマンドを叩く。

% xcode-select --install
xcode-select: error: command line tools are already installed, use "Software Update" to install updates

しかし、すでにインストールされているとのこと。
別のコマンドでも試行。

% sudo xcodebuild -license

xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance

やはり、エラー。

さらに、別の方法で Command Line Tools をインストールする方法を探す。
XCodeのメニューから「More Developer Tools」を選択。

・Xcode->Open Developer Tool->More Developer Tools

そこで開かれるWEBサイトから、Command Line Toolsを探してダウンロードして、インストール。

% npm install
(略)

> node-gyp rebuild

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node
added 70 packages from 26 contributors and audited 33791 packages in 8.742s

やっと走りました。
何やら、すごく面倒なことになっていますね。

Vue.js にて動的に要素の高さを調整したいのだが、うまく動かない。

<div id="AddTrackFrame" v-bind:style="[addTrackFrameStyle]">

(略)

<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';

@Component
export default class HNAddTrackViewController extends Vue {

  addTrackFrameHeight: number;

  addTrackFrameStyle = {
    height: this.addTrackFrameHeight + "px",
  }

  // FrameSize を Windowサイズに当てはめる
  public handleResize() {
    this.addTrackFrameHeight = window.innerHeight
    //console.log(this.addTrackFrameHeight)
  }

  created(){
    // Windowサイズを取得してFrameに当てはめ
    this.handleResize()

  }

  mounted(){
    // イベントリスナを紐付け
    window.addEventListener('resize', this.handleResize)

  }

  destroyed(){
    // AddTrackFrameが破棄されることはないが念のため
    window.removeEventListener('resize', this.handleResize)

  }

}
</script>

参考にしているのは次の記事。

Vue.js CSSを操作して、スタイルを動的に設定する(v-bind:style)

VueコンポーネントでWindowサイズ変更検知&値取得

ついでに、TypeScriptにも手を出している。
JavaScriptよりも綺麗にコーディングできている感じがする。

Vue.js to TypeScriptの書き方一覧

WindowsのPowerShellにて。
npmでインストールする際にエラーが頻発して、進まないようになる。

verbose stack Error: EPERM: operation not permitted, unlink '~node_modules\.node-sass.DELETE\vendor\win32-x64-72\binding.node'
verbose cwd ~
verbose Windows_NT 10.0.18363
verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "jquery"
verbose node v12.14.0
verbose npm  v6.13.4
error code EPERM
error syscall unlink
error path ~node_modules\.node-sass.DELETE\vendor\win32-x64-72\binding.node
error errno -4048

node-sass」が邪魔をしているっぽいです。
おそらく、下のページと同じ症状。
https://traveler0401.com/npm-install-operation-not-permitted/

ただ、nodeのバージョンを落とすのも面倒なので、一度環境を見直してみる。

「node_modules」フォルダを丸ごと消して、再度インストールすればパーミッションもなんも問題ないかなと思ったところ、現在、「npm run serve」でサーバーを走らせていることに気付く。

早速そちらを停止して、再度「npm install」をたたいたところ、エラーなく終了。なるほど。

> npm install
audited 33791 packages in 4.978s

38 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

「Windowsはこれがあるからいやだ!」

なんて思っていたけれど、おそらくMacでも起こっていたでしょう。
OS差別は良くないですね。落ち着いて、見直すことが大事。

エディタは長年「Vim」を使っていましたが、最近Windowsを使うようになり、それを契機に「Atom」を使うようにもなりました。
(Vimは使い続けています。もちろん。)

Vue.jsを使うということで、それに合ったプラグインを導入。

参考は次のQiitaの記事。

AtomのVue.js関係プラグインまとめ

ここを参考に、

「language-vue-component」
「vue-autocomplete」
「vue-snippets」
「vue-hyperclick」
「atom-beautify」
(これを入れていなかったとは・・・)
「vue-format」

上のプラグインを愚直に導入。開発は進みますか?

Vue.js に bootstrap を組み込む。

BootstrapVue

$ npm install vue bootstrap-vue bootstrap

そして、次のWEBサイトを参考に、ファイルを設定。

Bootstrap-vueで編集した_variables.scssを適用する

$ npm run serve

サーバーを起動しようとすると、「sass-loader」がないとおこられるので、インストール。再び、サーバーを起動。

$ npm install -D sass-loader

今度は「node-sass」がないと注意されるので、再びインストールしてサーバーを起動。

$ npm install -D node-sass

これで、サーバーの起動を確認。

Vue.jsを使ってSPAを作り始める。

$ npm install -g @vue/cli

@Vue/clinpmでインストール。
vue create . で初期化。
一応、TypeScriptVuex、あと今後にそなえて、ルーターも加えています。
(TypeScriptはいらなかったかな・・・)

$ tree -L 1
.
├── README.md
├── babel.config.js
├── node_modules
├── package-lock.json
├── package.json
├── public
├── src
└── tsconfig.json

フォルダの構造はこんな感じ。
これに、今後、Bootstrapを加えて、作業を続けていく予定。

$ npm run serve

node.js が必須なのかと思っていたけれど、Vue.js を使うだけなら、ビルドしたファイルをApacheのディレクトリに放り込めば動きそうですね。

そこに非同期処理(Socket.io)とか混ぜていくなら、node.jsサーバー上で動かす必要が出てくるのかな。よく分からんけれど、進めてみます。

Processing(p5.js)を使った音楽づくりページを、サブドメインに移植しました。

https://livecoding-example.hiroshi-nagayama.com/

今後は、ここで使用している仕組みを「Tone.js」「Vue.js」で置き換えて、再度作り直す予定です。

Google Chromeだけでなく、EdgeやSafariでしっかりと動くようになれば良いですね。

WordPressとBootstrapのレスポンシブルについて。

Wordpressでは、外部リンクを記事内に引用すると、相手サイトがWordpressの場合、綺麗に整形してくれる。

ただ、この埋め込み機能、うまいことBootstrapのレスポンシブル・デザインとマッチしてくれない。携帯でページを見た際には、.containerクラスのdivから綺麗にはみ出してしまう。

CSSを修正すれば解決するのだろうけれど、それもなんとなく面倒くさい。
また、埋め込まれたページを読み込むこと自体が、このページの読み込み時間を遅くする影響もあるので、できれば使わない方が良いのでしょう。

WordPressをローカルのXAMPP環境から、ロリポップのレンタルサーバー上に移行した。

① WordPressフォルダをサーバーにアップロード
② MySQL(MariaDB)のデータをエクスポート&インポート

しかし、これだけでは動かない。
Search Replace DB」を使って、データベース内に書かれたローカル環境でのURL(http://localhost/~~/)を新URL(http://~~~/)に置換する。

【参考WEBサイト】
【WordPress】DBの置換には「Search Replace DB」を使おう

また、「.htaccess」を編集する(パーミッションも注意)。
RewriteBaseを修正する。


RewriteEngine On
RewriteBase /wp/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wp/index.php [L]

これは、ドメイン直下にて運用する場合の「.htaccess」の例。
サブディレクトリ「/wp/」を削除する。


RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

とりえあず、これらによって、現在動作を確認。
以後、エラーなどあり次第修正していきます。

Wordpressの固定ページで内容を表示するために

the_content()

を用いる。しかし、エラーが表示され内容が出力されない。

どうやら、the_content() はループ内でしか機能しないようだ。

固定ページでも、ループを設ける必要がある。

【参考WEBページ】
WordPressの固定ページの中身が表示されない!