Programs


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


Activity Logs

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

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

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

過去ログはこちら

横浜高出身の元球児、プロのボートレーサーに 5月デビューへ(毎日新聞)

高校球児が競艇選手になるニュースを見て,「お,『モンキーターン』と同じじゃん!」と思ったら,Yahoo のコメント欄も同じようなコメントが多く,その中に「ケガするとこは,似ないように」という,とても良いコメントがありました.

モンキーターンは,サンデーの連載中にアニメ化もされてます.
レースのボートの動きは,クオリティの高いフルCGで画かれており,音も実際の音を取り込んで編集しているらしく,大変おすすめできるアニメです.

話数の制限があるから,どうしても,漫画版を全部描くことはできないけれど,大事なシーンをうまくピックアップして描いているので,ストーリーも崩れていません.

曲は1期のEDがおすすめ.サウンドトラックが見当たらなかったので,それぞれの楽曲のオリジナルを手に入れようとしたら,アーティストごとに音源(CD)を入手する必要があります.もう古く,TSUTAYA等のレンタル屋でも扱っているところは少ないので,宅配レンタルを用いるのがおすすめ.

高岡亜衣「光と風と君の中で」

河合克敏の漫画はどれも面白いです.
「帯をギュッとね!」や「とめはねっ!鈴里高校書道部」とか.全部,実家にあります.

いまは,連載されていないのかな.とても好きな漫画家の一人です.

あるときは 正義の味方
あるときは 悪魔のてさき
いいも わるいも リモコンしだい
(後略)

駅の地下道にある監視カメラを見ながら,鉄人28号の歌詞が頭の中に浮かんだ.
本当に良い歌詞.

防犯カメラ,あるいはディストピア.

私は「良い監視カメラ社会」を望んでいるので,色んなところに設置して,犯罪を未然に防いでもらったり,捜査の手がかりにしてもらったり,より良く活用してほしいと思っています.

ただ,運営(運用)がザルだと,一気にディストピア社会と化す.情報機器は,ほんと使い手次第です.

さて「悪い監視カメラ」とは一体何かしら.

とある町,ビルの地下にあるレンタルCD屋.
(近年,YouTubeやサブスク,宅配レンタルに押されてか,各レンタル屋のCDのコーナーは,どんどん狭くなっている.そのうち,ネット配信により,レンタルDVDも排斥され,残るのはレンタルコミック屋だけになるかもしれない.)

その入り口にある一台のクレーンマシーン.

先日来たときには,ワニが住んでおり,「おっ久しぶりに見たな」と思い写真を撮った(写真上).
(ちょうど,映画化が発表された頃.そういえば,その映画はどうなったのか.)

しかし,今日,久しぶりにのぞいてみると,ワニはいなくなっていた(写真下).

もしかしたら,積まれた人形の奥に,こっそりワニが隠れているのかもしれない.

個人的には,ワニを含め.Qべえやら,色んな時代のアイテムが並べられている,統一感のなさ,カオスさがみられた前の配置の方が素敵だった.

大阪のコロナ感染者数が爆増中。大阪以西も危ない。

国内で新たに2656人感染…大阪府で過去最多719人、「医療非常事態」宣言へ

4月末コンサートの,チケットの先行抽選に応募しようかどうか迷っていたのがはるか昔。

ここまでコロナが落ち着いた様子が見えないと,昨年6月(?)のNHKホールのように,無観衆開催もありうるだろう。

昔のフジロックみたいなコンサートが開ける状況は,いつ訪れるのでしょう。

時事通信「感染防止行き過ぎ?歯磨き禁止の学校も 「決定に子供の声を」・新型コロナ」インターネット,https://news.yahoo.co.jp/articles/72fc7611651b6b590db0cd05de733bc66e503ed6(2020/4/5に閲覧)

ぱっと読んだ第一印象は,「実際の現場と乖離した,学校バッシングが目的の,あまりにも酷い記事」。

娘の小学校は合唱を禁止し『心で歌え』と指導している。音楽の授業が嫌いになってしまった

給食中の会話を禁じた上に、(略)

どれも「子どもの命を守るために,色々工夫している」という現場を,全く無視した意見ばかり。
ちょっと記事内容を見ていきたい。

音楽科に関しては,4月から暑くなるまでの間,外で歌うのは手ですね。
記事にあるように,歌えないがために,「音楽の授業が嫌いになる」としたら,歌唱活動以外で楽しい授業を展開できなかった教員にも責任があるかも。コロナ対策をした音楽の授業って難しいですよね。私はひたすら,今の児童が聴いても面白そうな昔の楽曲を,毎回の授業でもっていってました。「NHKみんなのうた」のDVDボックスを買ったりもしてます(結構な出費)。でも,それって音楽専科だからできそうなことで,学級担任だと,そこまで手が回りませんよね。ほんと難しい。

あと,今年度からタブレット端末が整備されたので,実楽器の代わりとして,授業に取り入れてみたい。

福岡市の小学6年の女子児童は「前の方が楽しかった」と嘆く。

そりゃそうだ。
できることが大きく制限されるコロナ禍の生活が,「楽しい」と思える人はいないだろう。

学校の危機対応が専門の九州産業大の窪田由紀教授(臨床心理学)は「学校生活で一体感や充足感を感じる機会が減り、個々のストレスが底上げされている」と指摘。こうした変化は自殺や不登校増加の一因にもなっているという。同教授は「一方的な中止や禁止の押し付けは、子供に無力感を感じさせる。慎重になるのは当然だが、話し合いやアイデアの募集など、子供が決定に携わる機会を設けることが大切だ」と呼び掛けた。

「子どもの意見を積極的に取り入れよう!」と言っていることは,まあ分かるのだけれど,実際にそれをするのは難しいでしょう。

学校の教員の間でも,児童・生徒の思いを大事にした上で,命を守るために,「こういったことをさせたい」「実際には難しい」など,様々な意見が交わされています。

そこに,児童・生徒の「○○がしたい!」といった意見が入ってくる。

その結果,「OK」となったら良いが,「却下」となったら,さらに子どもらの「ストレス」や「無力感」を促すだろう。何にも良いことはない。

あと,「自殺」「不登校」の増加の一因と簡単に指摘しているが,話が飛躍しすぎじゃないかな。「自殺」「不登校」の問題と,コロナ禍の学校生活とは,また別の問題ではないか。

まあ,臨床心理学の偉い人が指摘しているんだから,そうなんでしょう。

車で走っていると、川沿いなどの桜が、だいぶ青くなっていました。

そして、ガソリン代が高い。

WordPress の Gutenberg(グーテンベルク)では,
YouTube の URL を入力するだけで,自動的に動画が埋め込まれる。

例えば,下の通りである。

このようになる,はず。

しかし,実際に表示させようとしたところ,YouTube へのリンクが表示されるのみで,埋め込み動画にならない。

出力されるソースコードは下の通り。

<!-- wp:embed {"url":"https://www.youtube.com/watch?v=rjlJ1hkVMFQ","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-4-3 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio">
  <div class="wp-block-embed__wrapper">
    https://www.youtube.com/watch?v=rjlJ1hkVMFQ
  </div>
</figure>
<!-- /wp:embed -->

これが,正しく動いていると,”wp-block-embed__wrapper” 以下が,自動で <iframe> タグで生成され,YouTube のウインドウが生成される。

試したこと

・プラグインの無効化(Jetpack)

・functions.php の修正
 →WordPress の theme.css や style.css を読み込むように,あらためて明示。
  しかし,そもそも読み込んでいたため,変化なし。
参考:WordPress:Gutenberg用CSSを読み込んだり設定する方法

・webpack の見直し
 →バージョンを上げたが,変化なし

・WordPress 自体の再インストール
 →効果なし

・別の YouTube 動画を読み込み
 →同じく iframe が生成されない

どこが問題なんだろう。

oEmbedというのがキーらしいが,どうもこれがうまく動いていないのか。
それが動くまでの JavaScript でコケているのか。
しかし,すべてのプラグインを切ってもコケるので,やはり問題が分からない・・・。


ちなみに,ここでコンソールにTESTと出力するスクリプトを書くと動く。

<script type="text/javascript">
console.log("TEST");
</script>

うーん,JavaScript がコケているわけではないのか?


【解決編】

PHPの書き方が原因でした。

最初は,下のように書いていました。

$content = get_the_content();
echo "<div class='content'>${content}</div>";

が,ふと,「この,get_the_content() を echo してるのが問題じゃね?」ってことで,下のように修正。

echo "<div class='content'>";
the_content();
echo "</div>";

これで,oEmbed が動くようになりました。
記事の内容は,変数に格納するのではなく,そのまま出力すべし。
WordPress の機嫌を損ねる場合がある。

ちなみに,ショートコードもうまく動かない。

ショートコードの動作も確認しました。

「中国女」を聴いて落ち着きましょう。

「モーニング」の最新号で「ハコヅメ別章」の最終話が載っていましたね。

上は Kindle 版を毎週買ってます。というアピール図。
別章に至るまでの経緯と,「アンボックス」という副題から,展開はある程度予想していましたが,それ以上のオチでした。さすがハコヅメ。秦三子すごい。

最終話ということでページ増の32ページだったようですが,週刊連載でこのペースはすごい。
アフタヌーンの「ヒストリエ」も頑張って欲しい。2ヶ月ごとの連載で16ページもあるのだろうか。

ネタバレに関わるかもしれない感想。
ハコヅメ別章の「黒田カナ」ほど頑張っていませんが,自分なりに頑張ってるところを全否定されたら,もう立ち直れんなーと過去の自分をみて思います。私の場合は,それまで保っていた気力が一切なくなって,もう勤めることができなくなっちゃったんですよね。あのとき,変に色々気を遣って,雇用保険も使わなかったんですが,今思い返せば,ちゃんと使っておけば良かった。失業保険も申請しなかったし。

以上。
さて,新年度なので,心あらたに頑張ります。

「ぷよぷよ」は初代派です。
世間的には「ぷよぷよ通」が人気ですが,私が買ったのは「ぷよぷよ」でした。
相殺システムがないので,基本殴り合いです。早い者勝ちです。
あと,PC版だったためか「なぞぷよ」が一緒に入っていたので,かなり面白かったですね。
パズル要素より,無茶な解法を求められる問題もありましたが。

そして,音楽が最高です。
たぶん,初代らへんの音楽を収録したサントラはこちら

「時空を超えて久しぶり!アルルのテーマ」

「Request From Puyopuyo」

「Tokoton Fron Puyopuyo」

このあたりがおすすめでしょうか。


そんな,ぷよぷよ。

「ぷよぷよプログラミング」なるページを見つけました。

HTML5+JavaScript を使って,ぷよぷよを作ろう!というページ。
プログラミング教育ですね。
「Monaca」というブラウザ上で動くIDEを使って作成するようです。
名前には,「ぷよまん」要素もあるのでしょうか。
「Monaca」画面右側に実行結果が出るようですね。
もしかしたら,〈ライブ・コーディング〉的な感じなのでしょうか。


今こそ,「ベーシック・マガジン」の読者投稿コーナーのアーカイブを,デジタル化して配信してくれないかしら。
素人が作ってた「赤壁の戦い」,とてもクオリティ高かったのを覚えています。
もしかしたら,素人じゃなかったのかもしれないですね。

攻殻機動隊

レンタルCD屋で「GHOST IN THE SHELL/攻殻機動隊」(押井守 1995)を見つけたのでレンタルした。

私はすでに「攻殻機動隊 2.0 ORIGINAL SOUNDTRACK」(押井守 2008)を持っている。
そのCDは,上の写真のCD(1995年版)をリミックス(リマスター?)したものらしいが,ぱっと聴いた感じ,私の耳では違いが良く分からなかった。

「攻殻機動隊」の音楽は,神山健治版(SACなど)だと,菅野よう子作曲である。
ARISEはまだ見てないので分からない。

もし,
「(押井守版と神山健治版)どちらが良い?!」
と聞かれたなら,

「どちらも良い。見るべし,聴くべし。」
となる。

同じ「攻殻機動隊」だが,基本設定が同じ「別の作品」と思った方が良い。

そして,いずれも基本設定にあたる,士郎正宗の原作漫画を読んでおいた方が,より楽しめる。
士郎正宗の書き込み具合はすごい。
紙媒体でもっていたが,Kindle版も買った。
細かいところに注釈が多いため,断然,Kindle版の方が読みやすいと思う。

さて,川井憲次は,ドラマからアニメまで,ありとあらゆるBGMを書いている。
(もちろん,菅野よう子も書いている。)

とくに,「攻殻機動隊」と同じ,押井守(の映像)との組み合わせが最適だろう。

その中で最も良い作品は,「機動警察パトレイバー2 the Movie」「Wayvern」だと思う。
映像(脚本)と音楽が,あそこまでマッチしたものは,なかなかない。

パトレイバー2は,声優が異なる2つのバージョンがあるが,1つ目の方が臨場感があって好み。
上の「YouTube」映像はそちらのバージョンになる。(音質が悪いので注意)
もちろん,今年の大河で徳川斉昭をやっている竹中直人もかっこいい。

ちなみに,菅野よう子の場合,こちらも大変多くの作品を手がけているので絞りがたいものの,神山健治版「攻殻機動隊」の,(たしか)第22話にて,笑い男と草薙素子がリンクするシーンと,その音楽(「flashback memory plug」)が,それまでの経緯を含めて最高だ。

「YouTube」に該当シーンが見つからなかったので,1話から見るべし。
それまでの経緯をすっとばして該当シーンだけみても,何の感慨もない。

最後に,「攻殻機動隊」は,原作の士郎正宗,映画の押井守版,TVの神山健治版が比べられることが多いと思う。
(ARISEは見ていない,評価はどうなんだろう。)

私の意見は,上にも書いたとおり,「全部見といた方が,それぞれの違いを楽しめるのでおすすめ」です。

1月5日に「あけましておめでとうございます」と更新してから,その後,全く更新していませんでした。

教材開発は進めていますが,その間に受けたショッキングなニュース。

「Cent OS x系 がなくなる」

CentOSが開発方針を変更ーー「CentOS 8」は2021年終了、今後は「CentOS Stream」に注力

CentOS Streamは2019年に公開されたディストリビューションでRHELの開発ブランチのスナップショットとして、RHELリリースよりも先に利用できる。

CentOSからCentOS Streamへ。CentOS終了の衝撃

自分が Cent OS に出会ったのは,バージョン5のあたりです。バージョン7で大きくコマンドが変わったものの,「このままずっと開発は続くんだろうな」と思い込んでいたので,なかなかにショックなニュース。

一方で,現在は,ローカルの Mac 上で「Docker」を走らせたり,そのまま Apache を動かして開発したりしているので,自分でVPSサーバーを立てて運用することはなくなりました。このサイトを動かしているのも,レンタルサーバーです。自分でサーバー立てると,メンテナンスが面倒ですしね。

今後,node.js 系を動かすときには,VPS が必要かもしれませんが,それも heroku で良いかなと思ったり。やったことがないので分かりません。

いずれにしろ,現状の様子をみるに,もう Cent OS 系(Red Hat?)は使わずに,Ubuntu 系(Fedora?)を使うことにします。Cent OS Stream の意味がイマイチ分からん・・・。

「Bootsrap のバージョンが,いつの間にか 5 に」

Bootstrap5で高速に

逐一チェックしていれば知っているのでしょうが・・・。久しぶりに公式サイトにアクセスしてびっくりしました。また,書き方が大きく変わったりするのでしょうか。

ただ,公式のインストール方法がまだ下のコマンドなので,正式リリースではないのかな。

$ npm install bootstrap@next

$ gem install bootstrap -v 5.0.0.beta1

相変わらず,Vue のリアクティブでつまづいています。

大体,「ああ,こうすると,View には反映されないんだなー」ってのは分かってきたのですが。「vue-property-decorator」を用いているのも,迷走している原因の一つでしょうか・・・。でも書きやすいし,読みやすいし・・・。

こういった,フレームワークの内側の部分が難しいです・・・(自分では正しくプログラミングしているつもりでも,うまく動かないことがある・・・)。

あっという間に,2021年になってしまいました。
恐ろしい。

最悪なことは,20年末に体調不良にて寝込んでいたこと。

12月の後半,28日から1月1日にかけて,微熱(37.0℃)が下がらず,病院も開いていないし,かなりまいりました。
28日時点で,病院には行っており,「味覚・嗅覚はある」「高熱ではない」などなどコロナに関わる症状は見られないことから,「咽頭炎」など風邪にまつわる体調不良といわれていました。

しかし,翌日29日も改善しなかったため,市の相談センターに問い合わせたところ,隣に1件開いている病院があるとのこと。WEB予約をし,車で向かうも,駐車場は満車(午後の診療の開始時間前にて)。

どうすれば良いか分からないので,その場で病院にTELしたところ,
・患者数が多くて,そもそも私の「WEB予約自体が受け付けられていない」
・院内に入れるのは危ないので,車内で診る
・会計に1時間半かかる
と,医療関係大変なことになっているなと実感。

結局,薬もいただけず,車内からの口頭の問診(3分ぐらい)だけで,2,800円ほどかかりました。病院外での診療で色々点数がプラスされているようです。
なんだそりゃ,って気持ちにもなりますが,「雪の降る中,大量の患者を診察している」お医者様の姿をみると頭が下がります。

というわけで,私にできることは,「栄養のあるものを食べて,寝る」だけであり,これでやっと,「頭痛」「悪寒」から解放されたのが1月1日の元旦。3日にはほぼ回復しました。

そして,これを書いているのも1月5日の深夜です。
研究を一刻も早く進めなければならないのですが,どうでしょう。上手く進んでいません。

少しずつですが,テクミュ(Tec-Mu)は改良中です。

・再生部分を修正
 →音価を修正
 ここですが,何かしら勘違いしていたようで,秒で指定しなければならないところをミリ秒でしていたため,常にサスティーンがかかったような,持続音になっていました。それはそれで面白かったのかもしれませんが,今回の目的とはずれるので修正。

・楽器の選択画面をダイアログから全画面表示での選択に変更
スマートフォンでの動作が軽くなりました。えらい違いです。
他の部分にも適用していこうと思います。

以上引き続き,改善していきますが,そろそろ1月の授業はじめの準備をしないとまずい・・・。

新年からこんな感じですが,今年も何卒よろしくお願いいたします。

発音部分を更新しました。
いままで,「Chrome」「Edge」でしか動いていませんでしたが,とりあえず,手元の「iPhone」と「iPad」(いずれも Safari)での動作を確認しています。

ただ,「選択肢」が出るところが「もっさり」しており,スピード感をそいでいるので,ここが修正点第一番です。

ほかにも,足さなければならない機能はたくさんあるのですが,この「もっさりさ」は排除せねばならんので,優先します。今は,何かを選択するために「ダイアログ」(Modal)を出していますが,どうやらこの描画が負担をかけているようなので,別画面を表示してそこで編集,そして元の画面に戻る,というようにしようかと。

https://tec-mu.com

追記:動作を「iPad」でみたのですが,ダイアログを開くところで,描画を待つ間,音が止まりますね。致命的です。
ダイアログを使うのはやめましょう。

あと,発音した後,音を止める指示を書き忘れているので,音が発音されたまんま,えらいことになっている楽器がいくつもあります。ヤバイ。

教材開発について,Vue.js(Nuxt) で進めていますが,コンポーネントにもたせた変数の変更を,Vue側がうまいこと検知してくれません。そのため,値が変わっても表示側が更新されないというところで,長いこと躓いていました。

あらかたググったのですが解決策は見つからず。
取り急ぎ解決した方法として,コンポーネントに変数を持たせるのではなく,Store(Vuex)に持たせることで,その変数を変更・監視させるようにしたら,描画もスムーズに更新されるようになりました。

変数を更新している箇所ですが,mounted()で呼び出している関数にて,setIntervalでまた別の関数を呼び出し,その中でコンポーネント内の変数を更新させていました。しかし,その変更をVueは検知してくれません。vm.setやら色々試したのですが,どれもうまくいかず。仕方ないので,Storeで統一して管理することに。ややこしい。


11月は災難な月でした。
そのことについて,色々と書こうか迷ったのですが,書きません。面倒なことは嫌です。

前を向いて,論文執筆のため,教材開発をつづけます。

新規プロジェクトに「webpack」 をインストールして「さあ開発しよう」と,他のプロジェクトからコンフィグファイルを引っ張ってきたところ,エラー(警告)が頻発。

どうやら,webpack のバージョンが5になったのが原因ではないか?
github.com-v5.0.0

それにしても,webpackの更新頻度,動きが速い。
10月11日にv5.0.0が出てから,現在,v5.3.2がリリースされている。
github.com-v5.3.2

追いつけるものか。

また,山田祥寛著の解説本に期待するしかないかな。
彼は,うまくとりまとめた,貴重な解説書を出している。信頼できる。
WEB上の情報は散乱しすぎていてわけがわからん。
(めちゃくちゃ間違った情報も多い。)

昔「ネットでググるとすぐ答えが出るから,書籍は買わない」
と言われたことがある。
確かに,メジャーな問題だとググって答えが出るが,マイナーな問題だと,あまり信頼できる回答が見つからない。困ったものです。

さて,山田著の「速習 webpack 第2版 速習シリーズ」がリリースされているが,リリース日が2020/9/17なので,内容はv5以前だろう。第3版が出るのかどうか。

それまでは,エラー1つ1つに対応しながら,手探りでConfigファイルを書き直していくしかない。辛いところです。


少しずつ紅葉していく。
それにしても,急に寒くなりすぎでは・・・。
「まっかな秋」を歌う前に,落ち葉になってしまうのでは,と心配するぐらい。

先週の写真ですが,キンモクセイの花も綺麗に散りました。
小さい秋は,本当に一瞬。

以前,作成・公開した音楽づくりアプリをもとに,新しく「テクミュ(Tec-Mu)」という音楽づくりWebアプリを公開しました。

「テクミュ(Tec-Mu)」
https://tec-mu.com

バージョンは書いてませんが,1.0 になります。
Google Chrome, Edge での動作を確認しています。
Safari はもっさりぎみです。
*IE など,WebAudioKit をサポートしていない「古いブラウザ」では動きません。

課題(問題点)として,

・iPhone, iPad などのモバイル・タブレット端末でも,スムーズに動かせること
・音に関する機能をより充実させること

など,色々な改善点が残っています。

これらは,随時アップデートしていく予定です。
アップデート内容は,随時,このホームページでも報告していきます。

また,開発時のメモなども,公開していきたいと思います。

Git Hub では,ソースコードを公開したいですね。
(コード内容を公開するのは,とても恥ずかしいですが・・・。)


最後に,本内容とは無関係ですが,小学校に咲いていたキンモクセイの写真を。

秋です。

教材開発は難航しています。
いや,あれこれ手を出しすぎて,難航してしまいました。

Nuxt Type Script で開発している中,どうもコードが煩雑になっている気がして,もっと綺麗に書けないものかな・・・と微妙な雰囲気に。
今にして思えば,ちゃんと仕様書を記録,書いていればそんなことにはならなかったのだろう。

そこで,Canvas + JavaScript で,アニメーション豊かな教材開発をしようとしたのですが,Canvas を使用した場合,要素の判定が非常に面倒くさい!

どれくらいかというと,例えば,画面に表示されている,テンポとか拍とかを変更するために,それらをクリックして変更しようとした際の場合。

(1)まず,テンポとか拍とかを描画した位置情報を変数に格納しておく。
(2)そして,Canvas に対してクリックがある度に,マウスの位置情報を取得して,(1)で格納した変数から,マッチするものがあるかループして探す。
(3)それに応じて,任意の関数を呼び出す。
・・・ここからさらに,変数を設定するコードを用意しなければならない。

めちゃくちゃ面倒。
いま,自分がつくりたい教材には全く向いていない。

Canvas の描画自体はとても素晴らしいです。
HTMLのタグ+JavaScript ではできないアニメーションを実現してくれます。

が,

これは,ちょっときつい。

ほかに救いがないか,今週は,「Adobe Animate(昔のFlash)」や「Unity」まで手を伸ばしてみました。

結果,それらを習得する時間が足りないので,それも頓挫。

Adobe Animate に関しては,まず日本語資料が少ない。
「Adobe Edge Animate 標準ガイドブック [CC/1.5対応] (DESIGN & WEB TECHNOLOGY) (日本語) 大型本 – 2013/7/20」

これぐらい。しかも,2013年の本で情報は古く,Edge Animate という,FlashAnimate の間にあったソフトウェアの解説本。Edge Animate は,無償でダウンロードできるということが売りでしたが,現在は無情にも「Edge Animate、Edge Inspect、Edge Reflow、および Edge Code。Adobe Edge のすべての製品が Creative Cloud から削除されました。」とのこと。さすが,Adobe。大企業。

Unity に関しては,資料は豊富にあるものの,リファレンスを読む限り,自分が作ろうと思っている教材を作るのはかなり手間そう(どう取りかかって良いか,想像できない)。
例えば,レスポンシブルデザインで出力する方法や,要素の内容を動的に変更したり,追加したり,Javascript と連携したり(これはできそうだったが),それらを習得している時間が足りない。

そして,最終的には,今年の頭に取り入れていた「Nuxt Ts」に戻ることにしようかと,今考えているところです。最悪

さらに,久しぶり Nuxt TS で作っていたプロジェクトをビルドしたところ,fibers モジュールでエラーが頻発。

ERROR ## There is an issue with node-fibers ##

サーバーが起動しません。

解決方法として,XCode のコマンドラインツールの再インストール(ちょうど,XCode の V.12 がリリースされ,コマンドラインツールもv. 12のGMが配付されていた)。
参考:developer.apple.com

次に,fibersのアンインストールと,再インストール。
これでビルドできました。

参考:「fibers.nodeが見つからないため、流星バンドルが失敗する

仕様は大きく変わったので,やや1から作り直しに近い部分もありますが,使い回せる部分もあるでしょう。根気強くコーディングしていくのみです。

大会発表まで,あと1ヶ月(切りました)。

====================

ただ,Type Script に関する知識はかなり身についたし,最新のJavaScript の動向も追えている。ループ処理もかなり理解したし,Canvas に取り組んでいたことは無駄ではなかったでしょう。あと,エディターとして,Visual Studio 使うようになりました。大変便利。

Canvas で実装していたView の部分を,HTMLのタグで書き出すようにコーディングしなおせば済む(暴論)ことなので,問題はWEB Audio APIの部分ですね。ここをいかにクリアするか!

さて,昨日,passwordHasher を使って「解決した」と書きましたが,色々運用試験してみると,全く解決していないことが分かりました。

そこで,現在,SimplePasswordHasher ではなく,BlowfishPasswordHasher を使うことで対応しています。

具体的には,次の通りです。

1)Controller にて明示

AppController.phpにて,BlowfishPasswordHasherを使うことを明示します。つまり,class を宣言する前に次の行を入れます。

App::uses('BlowfishPasswordHasher', 'Controller/Component/Auth');

そして,AuthComponent が BlowfishPasswordHasher を使うように設定します。

public $components = [
      'Auth' => [
        'authenticate' => [
          'Form' => [
            'passwordHasher' => 'Blowfish',
          ],
        ],
      ],
      'Session',
    ];

Auth の下には,loginAction や,loginRedirectなど色々設定すべきプロパティがありますが,今回は割愛。

とにかく,Form で passwordHasher に Blowfish を使うと明示。

また,前回の記事で,コントローラー内部のパスワードの保存時に,直にPasswordHasher を使って暗号化し,保存していた部分は全て削除
受けとったデータをそのまま,保存するようにします。

暗号化は次の2)Model 側の,beforeSave を用います。
(昨日は,使わない・・・って書いたのに)

2)Model で明示

昨日の記事では,BeforeSave なんぞ使わないとしましたが,使います。

パスワードを保管するModel,例えば User.php にて,classの宣言前に,次のように明示。

App::uses('BlowfishPasswordHasher', 'Controller/Component/Auth');

そして,class の中で,beforeSave 関数を設定。

public function beforeSave($options = []) {
  // パスワードの暗号化
  if (!empty($this->data[$this->alias]['password'])) {
      $passwordHasher = new BlowfishPasswordHasher();
      $this->data[$this->alias]['password'] = $passwordHasher->hash(
        $this->data[$this->alias]['password']
      );
  }
  return true;
}

これでどうでしょうか。

前回,CakePHP2.x系で大丈夫じゃわい!

と書きましたが,今回のように,公式チュートリアルどおりにやって動かないときに,ちょっと不安になってきますね。
マイナーバージョンは更新され続けているとはいえ,メジャーアップデートは4までいっちゃいましたからね・・・。切り捨てられているような雰囲気もじゅうぶんに感じます。

うーん,今後は,CakePHP4系に乗り換えた方がよいのかな。

もしくは,Laravel
フレームワークなので,学習コストが低ければ,CakeでもLaravelでも良いのですが。Ruby on Rails は,別にRails サーバー立てないとダメなので,レンタルサーバーだと厳しいですね。いちいち,Herokuとか使わないといけないのは,避けたい・・・。

この記事は,続きがあります。
下の通りやって動かない場合は,こちも参照してください。


私はCakePHP2.x系(今は,CakePHP2.10.x)で,サクッとWEBサイトを作りたい人です。今,CakePHPは4までリリースされており,PHPのフレームワーク自体も,「LARAVEL」が優勢だと聞きました。Ruby on Rails とかは最近どうなんでしょうね。どれぐらい使われているんだろう。
でも,それらを新しく勉強してサイトを構築する気はなく,CakePHP2系で十分だと思っています。もしくは,WordPress。あるいは,それらを並行して使う。CSSやJSの書き出しはwebpackを走らせれば良いので(SCSSも,TypeScriptも使える)。

さて,CakePHP2での大事な機能の1つに認証機能があります。
ユーザーのログインを管理するものですね。

大概は,ユーザー名とパスワードをフォームに打ち込んで,DBにあるデータと参照し,OKならログイン状態となります。

が,今リリースされているCakePHP2系では,どうもそこがうまく動きません。(私の環境だけ?!)
CakePHPの公式ドキュメント通りにやっても,認証がうまく機能しません。

「CakeBook 2 系:認証」
「CakeBook 2 系:シンプルな認証と承認のアプリケーション」

原因を辿っていくと,どうやら,Core.phpファイルにあるSecurity.Salt 値を,パスワードを平文から暗号化するときに,読み違えていることが分かりました。

おそらく,次のタイミングで,違う値を読んでいるのだと思います。

・平文のパスワードを,DBに書き込む際(beforeSave)
・平文のパスワードを,DBから読み出す際($this->Auth->login() )

なので,DBにパスワードを書き込む際に,beforeSave を使って自動的に暗号化されないようにします。すべて,コントローラー側で,パスワードを暗号化します。

具体的には次のような具体です。
(モデルでは,beforeSaveを使って暗号化しません。)

0)パスワードを暗号化するライブラリを読み込み

// コントローラーのいずれかの場所で
App::uses('SimplePasswordHasher', 'Controller/Component/Auth');

1)新しくユーザーを増やす場合

// POST されてきたデータを変数に代入
$data = $this->request->data;
// パスワードをハッシュ化
$password = $data['User']['password'];
$passwordHasher = new SimplePasswordHasher(['hashType' => 'sha256']);
$password = $passwordHasher->hash($password);
// POSTされてきたデータを上書き
$data['User']['password'] = $password;
// DBに保存
$this->User->create();
$this->User->save($data);

2)パスワードを再設定する場合

// ポストされたデータ($user)にて,
// パスワードを暗号化
$password = $user['User']['password'];
$passwordHasher = new SimplePasswordHasher(['hashType' => 'sha256']);
$password = $passwordHasher->hash($password);

// 上書き用のデータを作成
$data = [
  'User' => [
    'password' => $password,
],];

// 任意のIDの User データを指定
$this->User->id = $user['User']['id'];
// DBに保存
$this->User->save($data);

上の具合です。

ちなみに,この例では「sha256」を使っています。
Authコンポーネントを呼び出す際にも,パスワードはsha256を使うと明示してあげてください。

示す箇所は,おそらく,AppController.phpになると思います。

例えば,次のようになります。

public $components = [
  'Auth' => [
    'authenticate' => [
      'Form' => [
        'passwordHasher' => [
          'className' => 'Simple',
          'hashType' => 'sha256',
]]]]];

以上です。

本番環境→開発環境の移行メモです。

ローカルにあったWPファイルが,なんやらかんやらで使えなくなったので,FTPサーバー先から開発用にダウンロードしてきました。

そして,Mac の Apache で動かせるようにフォルダを配置します。
~/Site の下ですね。

さて,この先です。
本番環境のMySQLデータをエクスポート,ローカル(Mac)のMySQLにインポートさせます。

しかし,これだけでは動かないので,次の作業を行います。

1. DB接続先の修正

“wp-config.php”のDB接続情報を書き換えます。

2. パーミッションの修正

こちらのサイトを参考に修正します。

参考:「WordPressで推奨されるパーミッション設定について

ただ,今回ローカルのMac で動かすにあたって,Apache が_www グループで動いているため,ファイルやディレクトリにグループの読み取り権限を与える必要がありました。
(Permission denied とApacheのエラーログに出力される。)

なので,上の参照サイトを例に,WordPress を置いたフォルダから,ターミナルで次のコマンドを実行します。

$ find ./ -type d -exec chmod 755 {} \;
$ find ./ -type f -exec chmod 644 {} \;

3 .htaccess の修正

RewriteBase と, RewriteRule を書き換えます。

RewriteBase /ルートからのパス
RewriteRule . /ルートからのパス/index.php [L]

参考:「WordPress引越しで403 Forbiddenが起きる原因と対処法
参考:「WordPress(ワードプレス) 移行での不具合事例:トップページ以外表示されない

4. DB情報の書き換え

本番環境のドメインを持っているので,このままでは動きません。置換します。

置換のためには,「Search Replace DB」を使います。
MySQL8にも対応した最新版が出ているので,公式ホームページからダウンロードします。

参考:「【WordPress】DBの置換には「Search Replace DB」を使おう

公式ホームページ

ページの下の方に 3.xバージョンや 2.x バージョンも置いていますが,最新のもので良いでしょう。メールアドレスを入力して送信すると,ダウンロードリンクを送ってもらえます。

ダウンロードしてきたものを,WordPress のフォルダにコピーし,アクセスします。

「Search Replace」の「replace」に「本番環境」のURLを,「with」に「開発環境」のURLを入力します。

データベースへの接続情報を入力,確認した後,「Do a safe test run」を走らせます。その後,テーブル名など確認次第,「Search and Replace」を実行します。

置換は,「http,https のプロトコルを含めたURL」と,それを含めない「//」以下のURLの2回で実行しておくと良いかと思います。

また,https を http に置換する必要もあるかもしれません。

本番環境なら,「Search Replace DB」は「Delete me」で消した方が良いですね。
開発環境でも,動作を確認して必要なくなったら,「Delete me」で消しておきましょう。


以上になります。

本番環境をhttps で動かしていて,開発環境がhttpでしかアクセスできない場合,意図しないリダイレクトが生じるかもしれません。
その場合,別のブラウザで開いたりするとうまくアクセスできると思います。