トップ 最新 追記

日々の破片

Subscribe with livedoor Reader
著作一覧

2021-04-01

_ Rails6.1とReactJSの組み合わせは最強ではなかろうか?

Vueとか使ってないからわからんけど、とりあえず、Rails6.1で新規にアプリケーションを作れる状態になったので作り始めたわけだ。

で、プロジェクトを作ったら、app/assets/javascriptsのCoffeeがなくなっていてapp/javascript/packsとかができている。

面倒だなぁとWebpackerの仕組み調べたりyarnとか入れたりしながらいじくっていて、以前のアプリケーションからの持ち越しがあるので、CoffeeからES6に書き換えたりして、少なくともJSよりも1億倍Coffeeのほうがよい理由のラムダ式(というかfunctionとreturnを書かないで済む)はあるし、しかもreduceとmapが使えるからES6のほうが良いじゃんといじっているうちに、なんとなくReactJSで作りたくなってみたので、やってみた。

最初引っかかったのは、Bootstrapもついでにβ版だけど5にしたら、react-bootstrapというやつが4にしか対応していなくて(5と4でおれが一番引っかかったのは、pl-*とかmr-*とかが、ps-*とme-*に置き換わったことで、マイグレーションという概念のかけらも持たない愚かなことを、と思ったが、とはいえアラビア語みたいにlではなくそっちはeだみたいなやつのことを考えると、右左のような位置相対よりも始点終点みたいな文相対のほうが良いのかな(本当の理由は面倒だから調べていないけど)と納得したりしながら、まあ、たかだかトリガーでクラス名の切り替えする程度のことなら、onClick書けば済むからreact-bootstrapはリムーブして、生でBootstrap5βを使うことにした。

結果としてx-editableが使えないのはさすがに面倒だなぁと思ったが、Building inline editable UI in React: A complete guideというページが自分のeditableを作る方法を解説してくれていたので、ReactJSのコンポーネントの作り方の勉強がてら自作して(いずれにしても、コアコンポーネントだから自前のアプリケーション特化(ということは汎用と異なりコード量が圧倒的に少なくて済むからトラブったときの調査が超簡単)コンポーネントのほうが都合が良い)それも解決。

作る時に、onChangeを取ったりonKeyDownを取ったりしていろいろ試した(というかこちらが考えていない挙動に苦労した)おかげで、コントロールドとアンコントロールドの違いを内側から理解できたのも大きかった。

とはいえ、さすがにTinyMCEクラスの大物を独自に作るのはごめんだが、これもofficialなReactJS版が公開されていたのでOK。(考えてみれば、設計と実装の都合で、最初にインラインエディタの埋め込み、次にTinyMCEの埋め込みとなってしまったから、自作でインラインエディタを作る必要が出ていろいろ調べられたから良かったが、逆だったらちょっと話が違ったな)

ただ、本家のドキュメントでは、npmを使ったインストール方法しか出ていない。

既にyarnに寄せる(Gemfile.lockと同じようにyarn.lockで管理したいじゃん)ことを決めていたので、それは嫌だ。というわけでyarnのサイトでtinymceとreactで検索すると野良コンポーネントが山ほど出てくる。

困ったことに本家と同名のtinymce-reactでyarnを検索して最初に出てくるやつが、野良でAPIが全然違う。気づかずにyarn addして組み込んだら全然動かなくて(というかきょどりまくる)閉口して、しばらく試行錯誤してやっと本家版ではなく野良版だと気づいて、yarn removeして再度探してやっと見つけた(今は検索の2番目に出てくるが、最初に探したときは後ろのほうに埋もれていた)。

TinyMCEで編集させたやつをReactJSで利用するには、dangerouslySetInnerHTMLを使う必要があるのが不快極まるが、まあ、しょうがない。(同じく、受け入れるときにフィルタするGemが、サニタイズ言うなのrails-html-sanitizerなのも気に食わないがそもそもそれを言い出したらActiveRecordのsanitaize_sql_arrayを使えなくなってしまうので名前が気に食わないのはあきらめる)。

で、react-railsを入れると

<%= react_component('コンポーネント名', {コンポーネントのコンストラクタにpropsとして渡るオブジェクトをHashで記述} %>

と、Erbを1行書くだけでReactJSの世界に入れるのだった。

その結果、config/route.rbでいうところの''だけをhtml.erbにして、あとはすべてJSONを返すAPIにして、ReactJS側で全UIを処理できるからえらくきれいに書ける。

app/viewsにerbが1個除いて存在し無いからapp/helpersも空っぽで良い(view helperいらないし)。

JSONの返し方に、xml.builderを使う流儀もあるようだが、おれはシンプルにrender json: to_json持ちオブジェクトで済ませるのがすっきりしていて好きだから、本当にapp/viewsの下が軽い。

で、ReactJSの何が良いかと言えば、UIプログラミングに絶対的に必要となるライフサイクル管理が明確化されている点にあると思う。

オブジェクト生成時のconstructor(props)と、生成後のcomponentDidMount(componentWillMountはデプリケートされたようなのではなから考えない)、廃棄時のcomponentWillUnmountで、特にcomponentWillUnmountがあるおかげで、TinyMCEを作ったり破壊したりがえらく楽になった(tinymce-reactは勝手にcloseしてくれるので、生で使うときの廃棄管理が不要になっただけでえらくありがたい)。

あとは、とにかくAjax(大して使いやすいとは思わないが、みんなが使っているaxiosを使っている)でthenとかcatchしたらthis.setStateしてやれば勝手に表示できるのも良い点だと思う(this.setStateだけでオブザーバーパターン(コンポーネントで閉じているが、render関数をオブザーバー、それ以外のイベント受信系をオブザーバブル、stateをサブジェクトとみなした場合)が実現できているのでえらく楽)。

というわけで、今頃になってReactJSを使ってみているが、相当気に入っている。


2021-04-08

_ オーラルコミュニケーションは歌

例によって玄海で飯食って、江戸楽(という池袋百点のような広告雑誌で、玄海でご自由にお持ちください。になっている)を貰ってきて読んだわけだが、松平定信のエッセイが妙におもしろかった(割と、いつもおもしろい)。

お題が川にかかる橋の連載で、今回は神田川(橋は忘れた)なのだが、まあ世代的にかぐや姫の神田川のネタになった(わかる)。

で、最初は自分は烏の行水である、から始まる。

で、なぜ一緒に出ようと言った女のほうが髪が芯まで冷えて石鹸がカタコト鳴るくらい待たされるのか? 男として解せないと続く。

で、喜多條くんと同じ番組に出る機会があったから、この疑問をぶつけてみた。

すると、まずおれはすごい長髪だったから(と語り出すということは実話ベースの歌、または作詞家としてストーリーを作っていたかどちらかだろうというのは、おれの憶測)洗髪の時間がかかる。しかし、それだけならばまだ良いが……と続いてなるほどと納得した、とある。

(おれは、それを読んで、いや、ってことはやさしさが怖いは、あなたじゃなくて、お前のほうだよ、と思った)

で、続けて、そういえば南こうせつから聞いた話だが、神田川の締め切りがぎりぎり過ぎて、顔を合わせて打ち合わせとか全然できないので、電話で歌詞を伝えられた、という話が始まる。

一生懸命、チラシの裏に電話で喜多條が読み上げる歌詞を写していく(ちょっとシューベルトっぽいが、あれは曲のほうだった)。で、歌詞ってそれなりに語調が良いから普通に読み上げていくうちに、節回しが入って来るわけで、喜多條くんも例外ではない。というわけで、「若かったあの頃」の部分は、実は喜多條くんのメロディーなのだ。

曲を70年代にはいやとなるほど聞かされたので、松平のエッセイを読むといちいち思い当たっておもしろいのだが、本当におもしろいのは、松平本人はまるで気づいていないわけだが、70年代(というか90年代半ばくらいまで)は、文字伝達よりも、口頭伝達のほうが、遥かにスピードがあったという点なのだった。(文字伝達は電報にしろ手紙にしろ、電話よりも遥かに遅い)

そこが一番おもしろいと同時に、だからあそこは喜多條くんのメロディーなんていうことは、今は起きないだろうな。

神田川(かぐや姫)

(嫌い)


2021-04-11

_ 新国立劇場の夜鳴きうぐいすとイオランタ

イオランタは、ネトレプコのやつをメトライブビューイングで観たので知っているが、ストラヴィンスキーの夜鳴きうぐいす(というかナイチンゲール表記を最近は行わないのか?)は初めてなので楽しみ。

ふと気づいて子供に、家にあるアンデルセン全集のやつは読んだのか? と聞くと、読んでないが、以前、チェコかロシアのアニメを一緒に観に行ったから知っていると言われて、ああそういえばと思い出した。

イジー・トルンカだ。

イジィ・トルンカ作品集 VOL.4 [DVD](イジィ・トルンカ)

あれは実に良いものだった。

で、公演前にぱらぱらとプログラムを眺めて、第1期の作品と知るわけだが、鳴り始めると想像していた第1期の音楽とはあまりに異なって驚くよりも退屈しまくった。第1期といっても放蕩息子の帰還の頃の感じだろうか? 比較的重層的なオーケストレーションに、大して整合性が(即時的に聴き取っている限りは)取れない曲の構成だ(リズムによる構造はあるようなのだが、春の祭典と異なり全体的に緩慢なテンポなのでこれも見えない)。

(むしろ、プログラムで誰かが書いている、期で分けるのではなく、作風で分けて考えるほうがストラヴィンスキーというカメレオン(時間経過によって脱皮したり羽化したりするように変化するのではなく、その場の状況に応じて変化する)に対しては正しい解釈ができるのではないか? というのがしっくり来る)

ナイチンゲールの三宅理恵という人は実に頑張っているのだが、いかんせん、曲の構造が取れない無調音楽なので退屈しかない。

曲の構造が取れない無調音楽は、よほど音色の構造や、ここぞというメロディや、あるいは明瞭なモチーフの繰り返しが絶対的に必要だと思うのだが、何しろそれがまったく見えない。がっかりだ。

(ところが家に帰ってから、先日届いたストラヴィンスキーエディションのジョン・ネルソンが指揮してデュセが歌っているやつだと、明瞭なメロディがあって遥かに聞きやすい(特に猟師の歌の周りが違う)。同じ曲とは思えないが、どの音を強調するかの解釈の差かな? というか、予習に聞いておけば良かったのだが時間が取れなかったのだった)

Iror Stravinsky Edition(Various Artists)

そういえば、なぜロシニョールなのにナイチンゲールなんだろう? と子供に尋ねる。ロシニョールって雄鶏だよな。フランスの雄鶏がロシアではナイチンゲールなのだろうか?_

すると、予想外に、ロシニョールはナイチンゲールでしょ。と答えが返ってきて混乱する。

だって、ロシニョールっていうスキー用品屋のロゴは雄鶏だよ。ロシニョールっていう会社のロゴに違う鳥を選ぶってないんじゃないか?

すると子供はiPhoneでロシニョールを検索して、この鳥はナイチンゲールなんじゃないか? と言い出す。

そりゃあり得ないだろ。どう見ても雄鶏じゃん。

うーん、確かに……というわけで、調べた結果、ロシニョールは名前と無関係にフランス国家の許可を得て、フランスの国鳥である雄鶏をロゴにした(要はフランスの会社ですぞと名乗っている)ということがわかった。なるほど、言われてみればロゴの鳥は自由平等博愛色に染められているな。

それにしても紛らわしい。が、思わぬところで知識が更新された。

で、イオランタだ。

メトの解釈だとルネは最後に孤独の闇へ閉じ込められるが、こちらは妻屋(がルネなのだが、実に立派なものだ)は、圧倒的に自由な精神の持ち主の父親として、臨機応変に子供が最も良い結果を得られるように選択しまくっている演出で、普通にハッピーエンドで良かったね。

なぜかムーア人の医者が白人だとかはあるにしても(それはそれとして説得力がある良い歌手だ)、イオランタの大隈という人も美しく、ヴォデモンは鼻声系とは言え曲には合わないわけでもなく、何しろチャイコフスキーの曲が美しい。時期的には眠りの森の美女の頃なのかなぁ。交響曲5番っぽいモティーフ含めて実に良いものなのでこちらは退屈とは無縁だ。

それにしても、あらためて、イオランタの目が見える/見えない論争の先見性には舌を巻く。神という概念を平等性のために持ち出すというのは人類の智慧の1つなのかも知れない(が、逆に神という概念が差別ももたらすので、要はその人の考えなわけなのだが)。

Tchaikovsky: Iolanta(Pyotr Ilyich Tchaikovsky)

(ネトレプコ、もうだめかと思っていたら、驚くほどイオランタは素晴らしい)


2021-04-14

_ 外耳炎になった

思い当る変化としてはPaMuを使うようになったくらいしかないのだけど、どうも最近耳が痒い。で、気づくと特に右耳から何かじゅくじゅく液体が出て来ている。これは話に聞く耳垂れというやつではないか? というわけで耳鼻科に行った。

結局、外耳炎+ちょっぴり中耳炎になっていると診断されて、医者からタリビッド耳科用液という薬を処方された(とは別に痒み止めの副腎皮質ステロイドと抗生物質を含む軟膏も処方されたがそれはおいておいて)。

で、これが目には絶対注さないこととでっかく注意書きがある点眼液みたいな薬で、5滴耳の穴に注いでから10分注いだほうを上に向けて待つという、両耳でなんと20分も処置にかかるとんでもない薬なのだった。

で、だいたい3〜4滴までは良いのだが、続く数滴で、濁流のような音(というか、スポッシュルシュルみたいな、風呂の栓を抜いたような感じ)がして耳の中に流れ込んでいく。

で、想像するしかないわけだが、最初のうちは表面張力で耳の穴の上のほうに溜まるが、それを超えると重さで中心から穴の中に流れ込んでいくのだろう。このときの耳の中に液体が流れ込む感が実に興味深い。

最初は、実に気分悪かった(痛くはないが気持ち的には痛みに近い気分の悪さだ)が、慣れるとその流れ込む感じが実におもしろくて、耳の水掃除をしてみたくなるほどだ(やらんけど)。

ただ、何しろ片耳あたり10分の耳の穴を上向きにして(ということは、横臥することになる)いるのが退屈極まりなく、しかも向きが向きなのでスマホで何か読むにしても読みにくいのが厄介なのだった。


2021-04-16

_ 明治の伍百圓

妻が成田山へ行こうというので行ってみた。

駐車場の位置を間違えて成田山公園側のほうへ行ってしまったので、書道美術館の前を通って、筆魂、水琴窟を見てから、修行用の滝をまず眺めた。

飛び石をつたっていくと、脱衣場のような四角い天井が無い石室があって、よく見ると不動明王と護法童子が2人、こちらを見ている。まるで、誰もいないと思って着替えているとどこかでどこかでエンジェルがいつでもこちらを眺めているのような、不思議な風景でおもしろい。

で、山を登って、旧本堂が立派でおもしろい。軒下の木彫りの龍とか実に良いものだ。西のガーゴイル、東の龍だな。

さらに旧本堂の裏の小山の下に奥の院の洞窟というのがあって、覗くと何かがライトアップされているが、よくわからない。その覗き窓がある扉の両脇には後醍醐の時代の陰彫りされた石板が嵌め込まれていて、これもおもしろい。それにしても、なかなかのテーマパークっぷりで、釈迦堂の後ろに山ほど嵌めこまれた寄進の板を眺めているときは気付かなかったが、その後釈迦堂に上がって眺めたら、五百羅漢だか二十四孝だかが上のほうにいっぱい並んでいるのがわかって、至るとこに趣向が凝らされていて抜群だった。

と、裏から新勝寺を見ることになった。

その後、額堂の木の狛犬(にしか見えないが、壁からにょきにょき生えだしている)がかわいいと話ながら参道に出て又兵衛のザッコ煮とか買ったりする。ザッコという比較的細い魚と海老の中に平たい鮒が混ざっていて、どうも子供の頃に食べたような気がする。鮒が当たりと決めていたので、鮒を残して海老とザッコだけをまず食べるとかしたわけだが、鮒ということは淡水魚だし、一体、又兵衛とはなんだろう? と後で調べたら、印旛沼の畔に工場があるので納得しまくる。

狛犬

妻が、成田山なら鰻というので鰻を食べる。ちょっと生臭さを感じたが、そう悪いものではなかったが、何しろ頼んだらわりとすぐ出て来て驚いた。あらかじめ蒸してあるのを炙って出したのかな。妻は、どうせ金出すなら、都内の普通の鰻屋で食べれば良かったとぐちぐち言っていたが、ご飯は固めだし、そこまで悪くもなかった(値段は観光地1.5増しと考えれば、むしろ良い部類だろう)。

再び新勝寺へ戻る。

仁王門に甕割り少年(子供の頃に読んだ本(数ページずつの伝記の断片みたいなのが載っている本で、孟母三遷とか曹操の息子の船で目方を測るやつとかと一緒に甕割り少年の話も出ていたが、最近はまったく目にしないなぁ。藤田東湖が倣ったくらいだから(と書いて気付いたがそっちは文天祥だった)当然、彫った当時は有名だったのだろうが)が、竹林七賢人と並んで彫られていて、8枚のパネルを作るのに七賢人では一人足りないと無理矢理入れたのだろうが、その選択が興味深い。資治通鑑を書いた学者っぷりが七賢人と並ばされた理由かな? とかいろいろ考える。

まあ、とにかくあらゆるところに様々なモチーフがあっておもしろいのなんのって、ここまで見物客(本来は信徒なのだろうが)を飽きさせないための趣向の数々には感心しまくった。

帰るために裏山に戻ると道を間違えたのか、寄進の石碑がやたらと並ぶところに入り込んだ。だいたい500円で、見ると明治40年代だが、そのうち300円、200円、100円と明治30年代、20年代と下がるにつれて安くなるのがおもしろい。40年代でがっと上がるのは日露戦争で儲けた人が寄進し始めたのかな? とか考える。

帰りは東関東道に入らず、水戸街道へ続く線路わきの道を走ったので、印旛沼を少し眺めることができて、なるほど、これが印旛沼ですか、と初めて尽くしの見納めかと考える。(その後で、水戸街道沿いに山ほど梨園が出て来て、(おれは知らなかったが妻が)なるほどこれが松戸の梨ですか、と言い出したので、初めて尽くしは終わらなかったわけだが。


2003|06|07|08|09|10|11|12|
2004|01|02|03|04|05|06|07|08|09|10|11|12|
2005|01|02|03|04|05|06|07|08|09|10|11|12|
2006|01|02|03|04|05|06|07|08|09|10|11|12|
2007|01|02|03|04|05|06|07|08|09|10|11|12|
2008|01|02|03|04|05|06|07|08|09|10|11|12|
2009|01|02|03|04|05|06|07|08|09|10|11|12|
2010|01|02|03|04|05|06|07|08|09|10|11|12|
2011|01|02|03|04|05|06|07|08|09|10|11|12|
2012|01|02|03|04|05|06|07|08|09|10|11|12|
2013|01|02|03|04|05|06|07|08|09|10|11|12|
2014|01|02|03|04|05|06|07|08|09|10|11|12|
2015|01|02|03|04|05|06|07|08|09|10|11|12|
2016|01|02|03|04|05|06|07|08|09|10|11|12|
2017|01|02|03|04|05|06|07|08|09|10|11|12|
2018|01|02|03|04|05|06|07|08|09|10|11|12|
2019|01|02|03|04|05|06|07|08|09|10|11|12|
2020|01|02|03|04|05|06|07|08|09|10|11|12|
2021|01|02|03|04|

ジェズイットを見習え