Programs


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


Activity Logs

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

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

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

過去ログはこちら

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

国内で新たに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でしかアクセスできない場合,意図しないリダイレクトが生じるかもしれません。
その場合,別のブラウザで開いたりするとうまくアクセスできると思います。

「2K20▼04 GHOST VENUE メモリアルパッケージカード」が届きました。

楽曲がダウンロードできるのはいつになるのかな。03もまだですし。

「会然TREK 2K20▼04 GHOST VENUE Tシャツ」が買えなかった無念。

発売日 13:00 からひたすら粘ったのに,PayPalに進む手前で売り切れた無念。

発売,30分でちょうど,完売してしまった無念。

忘れまい(02, 03 のTシャツはもっているので,04 があればコンプリートだったのに)。


実家から,今の自宅までの道のり,約187km(思ったよりなかった)。

これをしのぐために,毎回ブラックコーヒーやら,メガシャキやら,眠眠打破やら,みたいなものを,水と一緒に積んで運転するのだが。

その日は朝,「FUJI ROCK FESTIVAL’20 LIVE ON YOUTUBE」のDAY2 リピート配信があり。

そこに平沢進が出るというので,見たわけです。

*本当は前日放送だったのだが,都合で見られず,リピート配信に。

てっきり,平沢進のライブ1時間,まるまる再放送するのかと思ったら,どうやら抜粋のようで。

何を抽出するのかと思ったら,「フ・ル・ヘッ・ヘッ・ヘッ」。オリジナルが1984年だというのだから,すごい。

1曲目の,RADWIMPSの「スパークル」と,全然違う音楽性。

「スパークル」は,「君の名は。」の印象が強い。あれがなかったら,どうだったんだろう。

しかし,それでも「フルへ」で完全に目が覚めるわけで。

それも,今はアーカイブ配信で見られるではないですか。
(2021/04/03時点で非公開を確認)

すげえっ!

しかし・・・,しかし,一方で「夢みる機械」の配信が終わってしまった。

期間限定公開だったのか・・・(いまや,非公開)。

ライブの全容は,一刻も早く,BD化してほしい。

04の前回の無人ライブまでのものを,まとめてDVD(BDの方がいいな)化して販売するのだろうか。

ぜひ,販売して欲しい。とくに,視聴できなかった 03 の東京公演がみたい!

いつになるのか!

あすは,終戦記念日(8/15)です。

この時期になると,(余裕があれば)毎年見ている映画があります。

*昨年は,研究報告や論文の執筆の〆切が重なっており,それどころではなかった。
いや,今年もそれどころではない。
現在,JavaScriptCanvasを駆使して,教材開発を進めている最中である。

さて,終戦記念日に伴う映画はたくさんありますが,個人的にはとくに次の映画が大事です。


1)日本のいちばん長い日

Amazon Prime で視聴可能です。
仲代達矢が大好きな自分にとって,彼がナレーションをしているだけで価値がある。
また,米内光政を演じる山村聡や,阿南惟幾を演じる三船敏郎も素晴らしい。
音楽は佐藤勝。サウンドトラック「フォービート・アルチザン 岡本喜八の映画音楽」や,「佐藤勝作品集 第2集(戦争映画編)」に音源が収録されています。渋谷のTSUTAYAや,宅配レンタルで借りられるでしょう。

映画自体は1967年公開なので,カラーでも不思議ではないのですが,森師団長らが若い将校(畑中健二少佐(黒沢年男ら))にクーデーターを起こされるシーンがショッキングなので,白黒になっていると聞いたことがあります。

*畑中少佐らの,感情的な演技もまた素晴らしい。

タイトル文字が出るまでのイントロが長いのも特徴の1つ。
そして,昭和天皇の顔が一切映りませんね。絶妙なカメラワークです。

個人的に一番好きな台詞は,終盤の次の台詞です。

「しかし,今更枢密院会議を開き,改めて終戦の議を決定するっていうのも・・・。もう,事実上,終戦は決まってしまっているんですからねえ。」
「いや,そうでもないよ。」
「は?」
「あらゆる手続きが必要だよ。儀式と言った方が正しいのかもしれないがね。日本(ニッポン)帝国のお葬式だからね。

最近,刷り直しがあり,それも見ましたが,そちらはどうも微妙でした。
陸軍将校に拳銃を突きつけられて脅されるNHKのアナウンサー役が女性だったのも,「え?」って思ったところの1つ。事実をもとにしたフィクションとはいえ,それはありえまい。

なんというか,今の平和な世の中しか経験したことがない人が,戦争映画の緊迫感を出すのは難しいのでしょう。なにかしら違和感があります。それは,この映画の刷り直しに限った話ではないです。

平和は大事です。映画の最後にも,そのメッセージが入っています。
(毎年,この時期に(視聴率とか気にせず)放送すれば良いのに。)


2)沖縄決戦

こちらもなかなか壮絶な映画。そして,名作。
そして,Amazon Prime で見れます。
(先日まで,有料レンタルだった気がするのですが,今みると,Prime 会員は無料ですね。勘違いでしょうか。そうでしょう。)

タイトル文字も素晴らしい。

そして,なんといっても,小林桂樹丹波哲郎,仲代達矢の3人の演技が大変素晴らしい。

「通信兵,司令部へ連絡。」
「はい」
「本島西海岸一帯は,米艦艇のため,海の色が見えない。」
「なに?海の色が?それじゃわからん!」
「船が7分に,海が3分。分かったか?船が7分に海が3分だ!

上が映画内での名台詞です。オマージュされることもありますね。

*例えば「トップをねらえ!」,とか。

特攻兵の手記の読み上げも心にきます。

この映画を通して,私の一押しは仲代達矢のかっこよさ(あの声!)ですが,とにかく戦争の悲惨さを丁寧に描写している点がすごいです。名作。

あと,こちらの音楽も佐藤勝です。
(1)で挙げたサウンドトラックに入っています。


ほかにも色々ありますが,最新の作品はこちらでしょう。

3)この世界の(さらにいくつもの)片隅に

Amazon Prime 「この世界の(さらにいくつもの)片隅に」

私の住んでいるエリアでは,「さらにいくつもの」は上映されていませんでした。

そのまま忘れていたのですが,先ほどAmazon Prime をみると,有料で配信していることを知ったため,早速購入(2,500円)。

映画はまだ途中までしか見てないので,内容についてのレビューはしませんが,とにかく「色使いが丁寧!」
新海誠とは,別の綺麗さ。新海誠は「リアルな綺麗さ」ですが,こちらは「抽象的な綺麗さ」かな,と。

明日,続きを見る時間があれば,見ます
(頑張って,見る時間を作らなければ・・・。)


しかし,この映像の綺麗さ(HD)が2,500円で買えるなら,Blu-rayの魅力はなんでしょうね(4,066円)

ストリーミングも,いつまでも見られるという保証はありませんが,すぐに見られなくなることはないでしょう。Blu-ray や DVDだって消耗品ですし,傷が付いたら見られなくなります。そうすると,データ有利な気がしますね(場所も取らないし)。

電子書籍云々のはなしもありますが,DVD・Blu-rayといったメディアも,インターネットに押されていくのでしょうね。

では,明日,「さらにいくつもの」の続きが見られる時間ができるように,メインの研究をしっかりと進めていきます。
(最新のJSや,Canvasの資料が少ない・・・。個人のWEBページは信用ならんものも多いので,電子書籍が頼り。)。

児童が夏期休暇に入った「ここ2週間」が勝負の分かれ道です。
ここで進まないと,9月は地獄10月はさらに地獄


「地獄」の話は,いまは,机の下に置きます。
今は,楽しい思い出話をします。


スキーフリーは、クリス・ピリヒによって作成され、WindowsとDOS用のMicrosoft Entertainment Pack 3で1991年10月にリリースされたシングルプレーヤーのスキーコンピュータゲームです。プレイヤーは山の斜面でスキーヤーを操作し、障害物を避けながら時間との勝負をしたり、ゲームモードに応じてスタントを行ったりしてポイントを獲得していく。

SkiFreeはリリース時にそのシンプルさとビジュアルに注目した批評家の間で好評を博しました。このゲームはMacintoshに移植され、数年後にはゲームボーイカラーとiOSにも移植されました。Pirihは、オリジナルのソースコードを再発見した後、32ビット版のWindows版を無料でリリースしました。SkiFreeは今でもゲームコミュニティの間で人気があり、フルランを終えた後にプレイヤーを追いかけてくる「Abominable Snowman」でよく知られています。

SkiFree
www.DeepL.com/Translator(無料版)で翻訳しました。

私が小学校のとき,学校のパソコンルームに,Windows3.1を登載したPCが10台ほどありました(メーカーは覚えていません。NECか富士通かな?)。
そして,その教室の後ろ側に「FM Towns」が2台あったことも,よく覚えています。
私の小学校時代には,すでにWindows95がリリースされており,卒業前には,Windows98もリリースされていたのでしょうが,学校では相変わらずWindows3.1のママでした。
おそらく,あの後,Windows XP を登載したPCが導入されたのでしょう。

Windows ME なんて,良く分からない立ち位置のものもありましたね。あれは一体なんだったのでしょう。

*この頃のMacは冬の時代でしょうか。


小学校のPCには,確か,FDドライブが2つありました。
Aドライブ」と「Bドライブ」です。
MS-DOS,そしてソフトウェアを起動させるために,両方のディスクドライブを使用して起動していたのですね。

*よく,PCの記事で「なぜ,PCのドライブはCから始まるのか?!」なんてものをみます。
そして,FDDが「Aドライブ」として搭載されていたときには,「Bドライブは,なぜないのか?!」だったような気がします。

*将来のWindowsには,CやDといったドライブレターを付けることを止めることもあるのかな?(MacやLinuxのように管理する)
でも,そうすると,絶対パスの指定が変わって,過去の遺産(ソフトウェア)が使えなくなりそうで,まずなさそうですね。
昔のソフトが動く(最近はそうでもない?)ことが,Windowsの魅力の1つです。

しかし,当時の私が小学校のPCを使うときには,既にHDD(Cドライブ)を積んでいて,デフォルトでMS-DOSが起動し,そこからWindows3.1が自動的にブートするようになっていたので,FDDからPCを起動することはありませんでした。

*しかし,Windows3.1からシャットダウンを選択しても,自動的に電源は切れず,「MS-DOS」に戻っていました。そこからどうやって電源を切っていたのかな?覚えていません。電源ボタンをブチッと押していた気もします。

*今振り返ると,「CDドライブ」も付いていた気がします。
そうすると,途中でPCが入れ替わったのかな。
FDD2機にHDD,そしてCDドライブなんて,豪華な環境を備えたPCを多数もっていたとは考えにくい。


ここからが本題です。前置きが長い。

コンピュータルームでは,「ソリティア」や「マインスイーパ」といったゲームが遊べました。また,自宅で「窓の杜」でダウンロードしたフリーソフトのゲームをFDDに入れていけば,学校のクラブ活動の時間に遊ぶ,なんてこともできたりして。

*当時はまだ,インターネット回線(ダイヤルアップ)が自宅に通っている家庭は少なかったです。私の学校では1学年に数人ぐらい,かな?10人いなかったのでは?だから,私なんかは,自宅で面白いフリーソフトを発掘しては,FDDに収まる容量なら(私のときには1.44MB),学校に持って行っていました。

「窓の杜」を久しぶりに見てみましたが,ニュースサイトになっていますね。
また,市の中央図書館には,「窓の杜」に掲載されているソフトウェア集のカタログ(データの入ったCD-ROM付き)が置いてあったりしたのですが,今見るともうありませんでした。残念。

いま私が勤務する小学校では,PCに「ゲーム」なるものは,パージされています。「ソリティアやマインスイーパは,マウスの操作を覚えるのに適している」なんてことを,読んだか,聞いたことがあるのですが。
そして,それらのゲームは,「攻略サイト」もなく,解法が1つのゲームでもないので,とても勉強になると思うのだけれど,「ゲーム=勉強に邪魔なモノ」で括られてパージされるのだとしたら,ちょっともったいないですね。

*いや,もしかすると,いまのWindows10には「ソリティア」も「マインスイーパ」もないのかもしれない?家のPCで見た覚えないですね。


さて,ここで,冒頭にちらっと触れた「FM-TOWNS」です。

いや,正確には,その「FM-TOWNS」にのみ入っていた「Ski」なるゲームの話です。

ゲーム内容は単純。

プレイヤーは,雪山をスキーで下っていきます。
操作方法は,基本的に,マウスの位置(左右)でプレイヤーを動かします。
もしくは,十字キーの右左だったかな?

途中,プレイヤーは,木や転がっている石にぶつかってコケたり,犬がいたりして邪魔をしてきます。その中で,いかに早く,滑走するか,またマウスを駆使してテクニカルにコースを下っていくか,みたいなゲームだったと思います。

しかし,このゲーム,グロテスク要素が1つ入っているのです。

滑走距離が1km(2kmだったかな?)になると,急にクマ(イエティとかって記事もみました)が,猛スピードで追いかけてきます。

捕まると,食べられます。
ゲームオーバーです。

あれは,結構恐怖でした。

ならば,上に登ればいいじゃないか!と,キーボードの十字キーの上をひたすら押して,登ったところ,これも一定のところで急にクマが襲ってきます。

基本,目標(クリア)のないゲームなので,そういったギミックを用意しておいたのでしょうね。

もしくは,猛スピードでクマが追いかけてくることで,それからどれぐらい逃れることができるか,という,新しい目標が設定されるようになっていたのかもしれません。


さて,このゲーム,実は,今も遊べます。

「The Most Officialest SkiFree Home Page!」

Wikipediaによると,上が作者による公式ホームページらしいです。ここに,「Download」という項目があり,64bitのWindowsでも動くと書かれています。すごい!

また,ブラウザ上でもプレイできるように,有志(?)が作成しているWEBアプリが,アーカイブとして閲覧できます。

https://archive.org/details/win3_SKIFREE

試しにやってみたところ,懐かしい,動きました。

1km までが スコアの付く滑走距離で,2km になると,クマ(か,イエティ)が待ち構えています。食われました。


公式ホームページをみると,クマではなく「Abominable Snow Monster」らしいですね。うーん。

みなさまも,どうぞWEB版で手軽に体験してみると良いと思います。

素晴らしき,レトロゲーム。