2024年5月29日水曜日

富裕層という幻想

野村総研が提示した「富裕層ピラミッド」なるものを日経が紹介していた.それによれば,日本にはそれなりの数の富裕層がいるんだそうだ.物価高にあえぐ庶民のひとりとしては,ホンマかいな?と滲み出る眉唾感を隠せないところだが,とりあえずその「富裕層ピラミッド」なる図式がこちらである(出典:「日経トレンディ」 Pick Up!野村総研「富裕層ピラミッド」、庶民割合 言ってはいけない真実も).

もう,マス層だのアッパーマス層だの,その定義からしてインチキくさいというか品がないというか,ゲスい匂いがぷんぷんしている.しかし,純金融資産を5億円以上も持つ超富裕層って9万世帯もいるんかよ!と驚きである.

そして中間のアッパーマスから富裕層までも,ピラミッドを見る限り,あれあれ?こんなにいるのか,日本もまだ捨てたもんじゃないな?と思わせる図式でもある.

いやしかし!これ,本当に正しいの?百歩譲って,というか,数値がそもそも信頼できなかったらどうしようもないので,ここに書いてある数字は信頼することにしよう.なお,保有額の比率は,富の偏在状況を明示するという点では意味があるが,お金持ちってナンボくらいおるん?という我々の肌感覚に近い「世帯数の比較」には意味がないので,ここでは純粋にそれぞれの層に属する世帯数のみに注目することとする.

さて,横軸の単位を「万世帯」として作成したグラフがこちらである.うーん,かなり下が厚いピラミッドじゃないか.先の図で示されているピラミッドには程遠い.

思い切って横軸を対数軸にしてみた.

いかがだろうか?こちらであれば,先のピラミッドと整合しそうだ.まさかの対数目盛りだったのか?

あまり意義は感じないながら,総保有額でも比較してみた(横軸の単位は「兆円」).

若干いびつではあるが,この比率であれば,先のピラミッドと乖離しているとも言い難い.うーん,そういうこと?しかし,なんだろう,もやもやする.ミスリーディングであることには間違いないよなあ.

2024年5月11日土曜日

皆さんのレポートを読んでの諸注意

以下は新入生が提出したレポートに対するフィードバックである.段落先頭の字下げや行間の問題はこのブログの設定に当てはまらないので忸怩たるところがないこともないが,学生に配ったフィードバックレポートそのものは,ワードプロセッサで作成した適切な文書で配布したことを補足しておこう.

(フィードバックここから)

皆さんが提出したレポートを読んで,気付いたことを述べる.自分が提出したレポートを以下の指摘と照らし合わせ,以下の項目に当てはまるひとは,次回から,注意しよう.なお,皆さんの書いてきた内容はどれも面白く拝読した.

1. 文体

レポートや論文は「ですます調」(「〜です / 〜ます」で終わっているような文)で書かない.「である調」で書くこと.また,口語と文語を区別すること.「こういった」や「そんな」というような書き振りは口語であってかしこまった文章には使うべきではない(SNSなどに書き散らかしている文章はその限りではないが,きちんと区別すること).

2. 全体の体裁

行間を適切な設定にする.通常,ワープロソフトの標準設定で使えば問題ないはず.無闇に行間を空けたり詰めたりしないこと.

「両端揃え」にすること.左側が揃っていない人はいないが,右側がガタガタになっているのはみっともない.下記のように指定して両側をきちんと揃えること.ワープロの機能は正しく使おう. 


3. 段落の取り扱い

「段落」というものを全く意識しておらず,改行が一切ない(!)レポートを提出したひとが何名かいた.文章は,意味のまとまりごとに段落に分けること.この文書も参考にせよ.この文書では,段落に分けるだけでなく,見出しも活用している.違う意味の内容を述べているかたまりは,ひとつの段落で表現すること.だらだらと書き連ねればよいというものではない.段落の長さは,目安として4〜5行くらいが妥当である.

段落の先頭は「一字下げる」.小学校で習ったはずである.せっかくなので,ワープロの機能をきちんと使って,次のような設定を用いて字下げを行うこと.空白文字で字下げをするのは不適切である(なぜか.考えてみよ).


4. 断定的記述

レポートや論文では,「断定」すること.「〜と思う」「〜と考える」などの表現は使ってはいけない.なぜならば,レポートはその書き手が考えたこと,思ったことを記述して報告するものであるから,そもそも「〜と思う」「〜と考える」という表現は「無駄」だからである.

断定するためには勇気が必要である.勇気を持って断定的に書き切るためにはその根拠が必要であり,そのために十分な調査やデータ分析,実験の実施などが求められる.そのことを肝に念じておいてほしい.

(ここまで)

2024年4月30日火曜日

メタバースに感じる違和感の正体

メタバース関連の研究にも参加しているのであまり大っぴらに批判はできないのだが,メタバース?セカンドライフの顛末を忘れたのか?と指摘しているくらいはメタバースに対して懐疑的な立場をとっている.

それはそれとして,メタバースに関していつもなんとなく違和感を感じていたその正体に,今日,気が付いてしまった.それは,SNSに出ていた次の広告を見たからである.

ここに,3人のアバターが存在している.しかし,何かおかしくないだろうか?3人が3人とも,そっぽを向いている.現実の空間で,こんな状況,ある?

しかもそれぞれが,見えない誰かとコミュニケーションをとっているようなそぶりを見せている.怖ぇよ.

というわけで,いくら高解像度なVRの世界が実現されたとしても,このような状況を発生させないようにしなければ,そこには不気味の谷が横たわるだけというお寒い状況になるだろう.逆にいえば,2人以上のアバターが同じ空間に出現したときに,強制的に面と向かわせるような仕様にすれば,この状況は改善されるだろう.

誰かそんな研究してみない?

2024年4月8日月曜日

ハノイメトロの不思議

FossASIA 2024に参加するために久しぶりにベトナムはハノイを訪れた.以前,ハノイは仕事でよく訪れていた街だし,なにより東南アジアで最初に訪れた街でもあるので思い入れがある.いまからおよそ20年前,2003年に初めて訪れたハノイ,東南アジア初心者にありがちな,腹をくだしてトイレに篭りっぱなしになったのも今では懐かしい.

さて,今回10数年ぶりに訪れたハノイの街は,ずいぶんと近代化していて驚いた.ノイバイ空港からの道は片側3〜4車線の立派なハイウェイになっており,ソンホン川を渡る橋も巨大なものができていた.夜中でしかも雨が降っていたのでよくわからなかったが,地図をみると,昔よく利用していた空港からの道路の東側に,近代的な高速道路が作られていたらしい.

昔は橋を渡ってから川沿いの細い道をタイ湖に向かって延々と走ってきたものだったが,いまや市内まで幅広い高架道路が通っている.さすがにバイパスを降りてダウンタウンの中心部まで来ると道も細くなり,なんとなく昔からの街を彷彿とさせる様子ではあったが,それでも,中心部から郊外に向けて高架鉄道が営業しているまでに近代化しており,10年という歳月の長さを感じさせる.

ホーチミン市のメトロはいつまでたっても完成せず,まるでサグラダファミリアの様相を呈しているが,そんな状況を尻目にハノイでは近郊電車,Hanoi Metroが2021年から動き始めた.今回の会場は路線沿線にあるPosts and Telecommunications Institute of Technologyという大学である.Hanoi Metro 2号線が便利だというので,今回は,ダウンタウン側の終点であるカトリン駅近くに宿をとった.

さて,今朝,チケットの購入にやや苦労しながらもなんとかカトリンからメトロに乗って会場まで辿り着いたのだが,驚くべきなのはその路線図である(図.Hanoi MetroのWebサイトより).

下の写真は駅構内に掲げられていたもの.

Wikipediaの記事によれば,いまは2号線と3号線しか営業していないはず.この複雑な路線図は何だ?Hanoi MetroのWebサイトにも,たくさんの路線による立派な路線図が描かれている.

なんかこれ既視感あるなーと,思い出したのはやはり20年前近くに訪れた北京や上海で見かけた地下鉄の路線図である.最近はどちらも訪れていないので現在の状況はわからないが,当時は4〜5本程度の路線しか営業していなかったように記憶している.ところが,当時からずいぶんと立派で複雑な路線図が掲げられていた.その路線図は,計画中の路線まで含めての路線図だった.しかし,全ての路線がさも営業しているように描かれていて,今回の路線図もまさにそれ.

その中国の路線図,図に描かれている情報を信じて地下鉄に乗って郊外に向かうと,路線図上では延伸しているはずの目的地まで線路がつながっていないなんてこともあり,はてさてどうしたものかと途方に暮れたことを思い出す.日本人の感覚からしたら「できてるところだけ線をひけよ!せめて建設中だったり計画中だったりするなら,点線で描いとけよ!」と思ったものである.

ベトナムは中国に隣接しており,当然ながら中国の影響は強い.これって中華の発想なのかな……などと,Hanoi Metroに揺られながら考えた.

2024年3月28日木曜日

習慣を変え「させる」ことの難しさ

前から気になっていたことがある.京急の羽田空港第1・第2ターミナル駅で,JAL側の改札に上がるエスカレーターでの人々の行動である.

次の写真を見ていただきたい.左側の2列が上りのエスカレーターである.エスカレーターの左側に並ぶ列ができており,右側には誰も乗っていない.首都圏の駅や公共の建物でよく見かける光景である.右と左が逆になるが,関西圏でも似たような光景は随所で見られるだろう.

エスカレーター手前の床に着目していただきたい.上の写真では分かりにくいかと思い,人の流れが途絶えたところで,再度,撮影したものが次の写真である.「歩かずに2列でご利用ください」とあるのがお分かりだろうか.

ここを通る皆さんの目に,この注意書きが入っているのかどうかは分からない.エスカレーターの片側を空けずに2列で詰めて並んだほうが,このように1列で並んで片側を「誰も使わない」場合よりは効率がよいことは火を見るより明らかである.

なお,片側を「間を空けずに」歩いて上る人たちで埋められれば「2列で詰めて並んだほうが,輸送効率が高い」という主張は間違いじゃないかと常々疑っているんだがまあその話はややこしくなるので置いておく(最も輸送効率が高くなるのは2列で詰め詰めになりながら皆で足並み揃えて歩いて上るという状況のはずである……さらに「走って上る」を許すとそれが最強となる).

なぜ注意は守られないのか

話がかなり脱線したので元に戻すと,「歩かずに2列でご利用ください」という注意喚起は最近いたるところでなされている.しかし,ついぞ,守られているのを見たことがない.なぜだろうか.

一つには,染み付いた習慣が考えられよう.長年培ってきた慣習は,そう簡単には変えられないのだ.

もう一つ,勇気を出して空いているほうに立って並んだとして,後ろから歩いて上ってきた人に邪魔者扱いされないだろうかという不安もあろう.歩いて上ってくる人は,ほぼ,急いでいる(健康のために歩いて上らんという人もいるかもしれないが).キッと睨みつけられて,ときとして罵倒されかねないと考えると,歩いて上ろうという人のほうが「指示を守っていない」とはいえ,反論するのも馬鹿馬鹿しいと人々が考えるのはいたって自然である.

エスカレーターに乗る行動を変えようとしているほう(この場合は,京急側)も,この問題に本気で取り組んでいるのか疑わしい状況もある.次の写真を見ていただきたい.

注意喚起の表示を床にした後に,下り側のリノベーション作業をしたのだろうか.まるっきり意味が分からない状態になってしまっている.これではダメだろう.

どうするのがよいのか

高速道路で右に左に車線変更を繰り返して遅い車を追い抜いたとしても,目的地に着く時間は10分も変わらない,などという指摘もある.安全のためにのんびりいこうや,というのは正論,ではあるが,急いでいる人,焦っている人にその理屈は通用しない.

エスカレーターを歩いて上っている人がいたらドリフのコントのように上から金タライが落ちてくるとか,まあ,それは冗談としても,警備員を配して公衆の面前で注意を促すとか,「エスカレーターでは歩かないで2列に並んで落ち着いて乗りましょう」とアナウンスを繰り返すとか,もう少し強い刺激を与えないと,この問題は解決しないのではなかろうか.

言葉を変えれば,この問題の解決に対する行政や施設側の本気度が問われているともいえよう.ある程度の変化,2列で立ち止まる人が3割くらいにもなれば,あとは自然に行動が変わっていくはずである.それまでは,考えている以上に強いドライビングフォースをかけねば,集団行動の変化は起こりにくい,そんなことを痛感した.

2024年3月16日土曜日

沖縄研修・2024春

飯尾研春の研究室旅行……ではなく国内調査実習ということで2・3年生総勢17名で沖縄に行きました.訪問先は,琉球大学の琉ラボ,沖縄科学技術大学院大学(OIST),沖縄ITイノベーション戦略センター(ISCO)などです.

琉ラボでは,同ラボにおけるスタートアップ支援や起業等に関するレクチャーを受け,そのあと積極的な質疑応答が行われました.

OISTではその豪華な設備や森の中に突如現れるコミュニティに,まるでZootopia!と驚きました(私も開学前の準備期間に一度訪れたことがありますが,そのときからの変化にびっくり).

最終日,ISCO訪問では,那覇市職員の方による沖縄県経済やIT振興に関する説明,ISCO山田専務による観光DXの現状等に関する講義を受けたあと,活発な意見交換が行われました.

ISCO訪問のあと,夜の飛行機で帰京する前のちょっとしたエクスカーションとして,慶良間諸島のあたりまでホエールウォッチングに出かけました.大きなザトウクジラの親子に遭遇,何度も豪快なブリーチを繰り返してくれて,見応えがありました.

(NEWS staff 撮影)

2024年2月10日土曜日

講演タイトルと絵文字

「半角カナ」と呼ばれる文字セットがある.JIS X 0201として制定されているカタカナの文字コード集合である.文字コードを8ビットないしは7ビットで表現していた時代,コンピュータの黎明期において日本語をなんとかしてコンピュータで表現しようとした結果の,ひとつの産業遺産である.

翻って現代,日本語はほぼ不自由なくコンピュータで表現できるようになった.文字コードも,JIS,Shift JIS,EUCといった複数のコードが使われることによりときとして文字化けが起こるといった混乱の時代を経て,いまではUnicodeによってほぼそのようなトラブルは回避されている.

いわゆる半角カナは一時期,トラブルの元になるので使わないほうがよいとされていたが,今ではUnicodeに組み込まれているので問題なく利用できる.ただし,コード云々よりも,デザイン上の問題というか,同じ文字なのに全角と半角という2種類の文字が存在すること自体が,根本的な課題であろう.同じことはA-Z(a-z)とA-Z(a-z)にも当てはまる(前者は半角,後者は全角).システムを頑健にするためには入力されたテキストに対し,同一化の処理を施さねばならず,面倒くさいことこのうえない.

この問題はもう,強制的にどちらかを使わないようにするというコンセンサスを共有するしか解決方法がないが,それはなかなか難しいだろう.

ところで,Unicodeで問題が全て解決したかというと,残念ながら,そうでもない.なぜならば,古いシステムを延々と使い続けている人や組織が絶えないからである.ありがちなのが,丸数字と(月)(火)(水)……の文字化け問題である.WindowsのShift JISで①②③という文字を使うと,Mac側では(月)(火)(水)になってしまう,というアレ.令和の世の中でも,ときどき遭遇する.

最近,私が遭遇した出来事は,講演タイトルの変更を余儀なくされたことである.正確には,データベースに登録できないから,登録するタイトルを修正せよ,というもの.当該講演は,こちらである.

飯尾淳, "にこP(大学版)中大 iTL🇯🇵 x KMITL🇹🇭 実施報告," インターネットを用いた海外の高校との協同授業:実践報告シンポジウム 第2回, 東京 市ヶ谷 & オンライン (2022.2.26).

「講演タイトルに絵文字なんて使うなよ!」っていうマジメなご指摘は承るが,遊び心はあってもいいじゃんねーとも思う.まあ,そんな開き直りはともかくとして,この講演の情報を researchmap の講演実績に入れていたら,そこからデータをフィードするようにした研究者DBの管理者から「うちのシステムは絵文字使えないから当該絵文字を削除してください」という連絡が来た.残念な話である.

そもそも講演や論文のタイトルって,もっと自由に付けていいんじゃないかと,常々,悩ましく思っている.同じく2022年の2月には,ヒューマンインタフェース学会の学会誌に,次のような記事を寄稿した.

飯尾淳, "ポストコロナ時代の〇〇コミュニケーション," ヒューマンインタフェース学会学会誌, Vol. 24, No. 1, pp. 4-7, (2022.2).

この記事の校正中に,事務局から「そろそろタイトルきちんと決めてください」と連絡が来た.「〇〇コミュニケーション」の「〇〇」の部分が,仮置きだと思われたらしい.これは,正規表現でいうところのワイルドカード,すなわち,よくある(〇〇には好きな言葉を入れてください)という意味でそのように表記したものだったが,その意図が伝わっていなかった.

このときは丁寧に説明し,当初の意図通り,記事はこのままのタイトルで掲載された.

なお,論文のタイトルは,「システム名: その説明」というようなタイトルを付けることが多い.Proposal of … とか,Research on … ,Development of … みたいな紋切り型のタイトルは面白くないし,タイトルの頭文字が偏ってしまう.AからZまで頭文字が散らばったほうが,多様性の時代に合っている.「システム名: その説明」であれば,その説明部分は好きに書けるという理屈である.

ところで,ここまで書いてふと疑問に思ったのだが,絵文字で始めたら,インデックス作るときにどういう扱いにされるんだろう?こんどやってみようかな(また怒られるかも……)

講演タイトルといえば,心に残っているのは,2004年のWISSにおける大和田さんの発表である.

大和田茂,”切る," WISS第12回インタラクティブシステムとソフトウェアに関するワークショップ, (2004).

3Dモデルのボクセル表現で,どこで切っても断面が表示できる,みたいな発表だったと記憶しているが,なんといってもタイトルが衝撃的である.わずか2文字.これ以上,短い論文タイトルを,私は寡聞にして知らない.



2024年1月23日火曜日

漫才師・山中村「田中角栄」

山中・中村:(上下からそれぞれ登場)どーもー

山中:山中と

中村:中村で,山中村です.よろしくお願いしますー

山中:山中村てね,どこぞの田舎の山んなかにありそうな地名ですけれども.実際,昔は新潟県,石川県,岐阜県,愛知県,広島県,高知県にあったらしいですよ.どの村も合併とか改名とかで今ではぜんぶ消えてなくなってしまいました.

中村:ほんならオレらも消えてなくなるんかいな!不吉な名前だなー.

山中:ま,消えてなくならんように元気出していきましょう.今日はせめて名前だけでも覚えて帰ってください.

中村:ところでね?昔,田中角栄っちゅーオッサンおったでしょ?

山中:あー,ロッキード事件で逮捕されたひとね.

中村:逮捕て,いきなりネガティブな話題から攻めんなよ.いうていまの若い子そんなんよう知らないでしょ.

山中:君もオッサンとか言ってたでしょうが.仮にも一国の総理大臣を務められた方でしょ?娘さんの田中真紀子っていうオバハンも政治家でしたな.

中村:オバハンいうな.あの人も大臣やられた偉い人だよ?ま,それはそれとして,こないだお屋敷が火事になったらしくて.

山中:へー,そうなん?…… 記念マキコ

中村:は?

山中:記念パピコ

中村:記念カキコかよ.ここは2ちゃんねるじゃありませーん.オレらの漫才,2ちゃんねるの便所の落書きと一緒にしちゃダメ!ぜったい.

山中:そういえば田中真紀子さん,久しぶりに表舞台に現れたかと思ったら記者会見でおもくそ政権批判してました.

中村:そうそう.ネットもそれでちょっと炎上してた.

山中:ネットが炎上してお屋敷に延焼……

中村:なわけねーだろ!まあ,政権批判した直後に火事って,ちょっと疑っちゃうよね.怖い世界だ.

山中:で,その田中角栄がどうしたの?

中村:まー,このぅ(田中角栄のモノマネをする)

山中:なんですか,なんですか?まーごめ?

中村:まーごめは大鶴肥満だろうがよぅ.いいんだよそんな小ボケ挟まなくても.

山中:ボケたのお前じゃんかよ.続けろよ.

中村:ボケたわけじゃねーよ!ま,それはそれとして,こないだこんな話を聞いたんだよ.田中角栄ってパーティとかで相手の名前がわからないとき,「ところであなた,お名前なんでしたっけ?」ってズバリ聞いちゃうんだって.

山中:そりゃ失礼だな.

中村:いやそれがね,「え?中村ですけど」って答えたとするじゃん?そうしたら「いやそうじゃないよ,下の名前は何だったっけ?」って重ねるのよ.それで下の名前を聞いたふりをして,「中村さんね……」って話を続けるんだって.

山中:へー,うまいこと考えたな.そりゃ賢いやり方だ.じゃあ中村さん,あなたお名前なんだっけ?

中村:その聞き方じゃダメだろっ!もう中村ってわかってるじゃんよぅ.俺がやってみせるから……(間)…… あなたお名前なんでしたっけ?

山中:田中です.

中村:嘘ついちゃダメでしょ.田中角栄の話してるからって.あなた山中さんでしょうが …… もっかいね.やりなおし.あなたお名前なんでしたっけ?

山中:アツシです.

中村:いやそうじゃなくて……,下の名前は……,アツシさんね.下の名前はアツシさん.たしかに,あんた山中アツシだけど.ダメだよ.下の名前を答えちゃったら続かないじゃん.もういちど.苗字だけで答えてよね.あなたお名前なんでした?

山中:山中です.

中村:いや,下のお名前は?

山中:(もじもじして)えー……,下ですか……,ヨコじゃダメ?

中村:なに照れてるんだよ!変なこと考えてんじゃねーよ.ほんで横の名前ってなんだよ.あなたのお名前な・ん・で・す・か!

山中:My name is Yamanaka.

中村:なんで英語なんだよ!お前いつから外国人になっちゃった?

山中:まだやるの?

中村:こんなグダグダな漫才,SNSで叩かれるよ?炎上しちゃうよ.

山中:えー,うち燃やされちゃうの.

中村:燃やされねーよ!やめさせてもらうわ.

山中・中村:ありがとうございました(ハケる)

2024年1月3日水曜日

岐阜のポーズとiPAQ

2023年末,暮れも押しせまっていた時期に「岐阜のポーズ」が流行っていたのを皆さんご存知だろうか?

岐阜のポーズって何だ?

そもそも岐阜のポーズとは何か.漫画「クレヨンしんちゃん」のひとコマで,しんちゃんが「ぎふのポーズ」としてとっていたポーズが元ネタらしい.後ろを向き,両手を真横に拡げ,四股を踏むような感じで大股を広げたうえで膝を直角まで曲げて踏ん張るというポーズである.

国道417号藤橋根尾交差点岐阜方面ライブカメラの前でこのポーズをとってライブカメラ画像におさまるという悪戯が2023年末にちょっとしたブームになり,また,アクセスが集中してなのか事故を回避するためなのか,当該ライブカメラ映像が見られなくなってしまうなどの影響も出た.

「岐阜のポーズ」というキーワードでネットを漁ると,このような画像がたくさん出てくる.昼夜問わず出てくるので,こんな山奥までまあご苦労さんとしか言いようがないが,なぜかブームになっていたことがわかる.

なぜこんな山奥で岐阜のポーズをとることが流行ったのか,ライブカメラの定点観測が10分おきと比較的更新頻度が高く,自分の画像をライブカメラ画像としてネットに載せるのが容易だったからだとか,そもそも後ろ向きで顔を特定されないので匿名性が高かったからだとか,いろいろ考察されているので,詳しく知りたいむきはそちらを参照していただくとして……

iPAQによるモバイル監視カメラ

私が気になったのは,このようなライブカメラ映像がスマートフォンの小さいデバイスで誰もがいつでもどこでも確認できるようになったんだなあとしみじみ思うと同時に,感慨深く思い出したことがあったからである.

次の画像は,Linux Conference 2002 (LC2002)で発表した予稿から切り出してきた図である.写っているのは,iPAQで観測しているウェブカメラの画像である.リモートに設置されたウェブカメラが,窓の外,首都高の交通状況を動画で撮影し続けている状況を,Wifiで接続されたiPAQで確認している.

皆さんはiPAQなんてご存知ないかもしれない.iPadのパチモンではありませんぞ?

iPAQとは,今はなきCompaqが2000年から発売していた「ハンドヘルドコンピュータ」,今でいうモバイルデバイスで,デジタルアシスタントやポケットPCなどと呼ばれていた,スマートフォンの前身として位置付けられるデバイスである.

このiPAQ,Windows CEという組み込みデバイス向けWindowsがインストールされていたはずだが,Familiar LinuxというWindows CEをまるっと入れ替えて使うためのLinuxが利用でき,さらにXも動いていたので普通のLinuxアプリケーションを開発するように利用できたのである.もっとも,本体で開発はできないので,親機でクロスコンパイルしたソフトウェアをダウンロードして云々と,ちょっとした手間が必要だったのはなんとなく覚えている.

というわけで,今から20年以上前.初代iPhoneが出たのが2007年だから,その5年も前に,こんなことをして遊んでいた.歴史のたらればは語ってもせんないが,2002年のこれといい,その後のストリートビューもどきといい(この件についてはまた機会があれば紹介したい),資金さえあれば億万長者になれそうなアイデアは自分でも若い頃にいろいろと出していたのである.

それを考えると,技術馬鹿ではダメで,口八丁手八丁で資本家を騙くらかす,いや,投資させる能力が,いかに大切かと思わないでもない(まあ,技術馬鹿で育ってきた今の立場も,それなりに悪くはないけれど……)

2024年1月1日月曜日

Rails 7にimportmapのみでBootstrap, jQuery / jQuery-UIを設定する方法

かねてよりRailsをしばしば利用しており,Railsアプリの作り方を教える授業も担当,だいぶ内容が古くなってしまったが書籍も出しているくらいにはRailsを愛用している.しかし,Rails 7になってフロント周りがいろいろと変更されて,ネットの情報がのきなみ信用ならない状況になっていて,どこかで最新の状況を整理しておかねばならないなと感じていた.

なにしろ,jQuery-UIなんかを使ってちょいと気の利いたことをやろうとしても,どうにもうまくいかず,困った状況なのである.そこで,今回,BootstrapとjQuery / jQuery-UI を importmap の仕組みで導入する方法を整理した.最終的に,次図のような状況を実現するところまで解説する.

なお,動作を確認したバージョンは,次のとおりである.

ruby: 3.2.2, rails: 7.0.8, bootstrap: 5.3.2, jQuery: 3.7.1, jQuery-ui: 1.12.1

また,次の記事を参考にした.

前者のBootstrapの導入方法は,一箇所,そのままだとエラーになる箇所があるうえ,若干,記述が曖昧な箇所がある.一方,後者は問題なく実行できた.やはり確実な情報を入手するには英語の文献にあたれ,ということだろうか.

アプリの構築

まず,テストのためのアプリの雛形を構築する.homeコントローラだけを作っておく.

$ rails new Test; cd Test

...

$ bin/rails g controller home index

config/routes.rb は次のようにしておこう.

Rails.application.routes.draw do

  root 'home#index'

end


Bootstrapの導入

Gemfile に次を追加する(bundle add bootstrap を実施でもよい).

# Bootstrap 5

gem "bootstrap", "~> 5.3.0"

また,以下の gem "sassc-rails" と書いてある行のコメントアウトを外す.

# Use Sass to process CSS

# gem "sassc-rails"

これを,次のようにする.

# Use Sass to process CSS

gem "sassc-rails"

Gemfileを書き換えたら,gemをインストールしよう.

$ bundle install

Rails 7.0.8 だとimportmapがインストールされているはずなので,config/importmap.rb には次の2行を追記する(bin/importmap pin bootstrapコマンドでも必要な情報が記入されるが,実行時に大量のエラーが出るという問題がある).

pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.3.2/dist/js/bootstrap.esm.js"

pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.8/lib/index.js"

app/javascript/application.js に下記を追記する.

import "./bootstrap"

スタイルシートをscssに変更する.

$ mv app/assets/stylesheets/application.{c,sc}ss 

app/assets/styleseets/application.scss には次のように記述する.デフォルトではコメントが記載されているだけなので,コメントの後に次のように追記すればよい.

@import "bootstrap";

確認のために app/views/layouts/application.html.erb の<body>〜</body>を次のように修正する.localhost:3000にアクセスしたときに,少しインデントされて表示されていれば,Bootstrapが有効になっているはずである.

...

  <body>

    <div class="container">

      <%= yield %>

    </div>

  </body>

</html>


Stimulus JSのセットアップ

さて,次はjQueryとjQuery-UIである.が,その前に,stimulus.js を設定しておく.まず,次のコマンドでstimulus.jsコントローラを作成する.

$ bin/rails g stimulus home

stimulus.jsを利用するために,app/views/home/index.html.erb を次のように記述する.

<div data-controller="home">

  <h1> This is home page</h1>

</div>

さらに,app/javascript/controllers/home_controller.js を次のように記述する.

import { Controller } from "@hotwired/stimulus"


// Connects to data-controller="home"

export default class extends Controller {

  connect() {

    console.log("home controller has been connected");

  }

}

こうしておくと,data-controller="home" が記載されたページが表示されたときにこのJavaScriptが有効になるらしい.localhost:3000にアクセスしてブラウザの開発コンソールをチェックすると,このメッセージが記録されていることを確認できるだろう,

jQueryおよびjQuery-UIの導入

いよいよjQueryとjQuery-UIを導入する.まず,Gemfileに次の記述を追記する.

# Use jquery as the JavaScript library

gem 'jquery-rails'


# Use jquery-ui for pretty UI

gem 'jquery-ui-rails'

忘れずにgemをインストールしておこう.

$ bundle install

app/assets/styleseets/application.scss には次の行を追記する.

@import "jquery-ui.css";

次に,app/javascript/jquery_ui.js というファイルを作り,次を記載する.

//= require jquery-ui

さらに,app/javascript/application.js に次を追記する.

import "jquery"

import "jquery_ujs"

import "./jquery_ui"

あと,もう少し.config/initializers/assets.rb に次の行を追加する.

Rails.application.config.assets.precompile += %w( jquery.min.js jquery_ujs.js )

さらに,config/importmap.rb には次の2行を追記する.

pin "jquery", to: "jquery.min.js", preload: true

pin "jquery_ujs", to: "jquery_ujs.js", preload: true

これで準備OKである.

動作確認

うまく設定できたかどうか,動作確認しよう.

app/views/home/index.html.erb は,次のように書き換える.

<div data-controller="home">

  <h1 class="mt-3"> This is home page</h1>

  <h6> Pick date using jQuery Datepicker </h6>

  <p>Date: <input type="text" id="datepicker"></p>

  <br>

  <hr>

  <h6> JQuery Draggable Element </h6>

  <div id="draggable" class="ui-widget-content">

    <p>Drag me around</p>

  </div>

  <br>

  <hr>

  <h6> Click Event using JQuery </h6>

  <button id="btn-click" class="btn btn-primary"> Click Me </button>

</div>

これらの要素をコントロールするための app/javascript/controllers/home_controller.js も,次のように記述しておこう.

import { Controller } from "@hotwired/stimulus"


// Connects to data-controller="home"

export default class extends Controller {

  connect() {

    console.log("home controller has been connected");

    $("#datepicker").datepicker();


    var initial_val = 0;

    $("#btn-click").click(function (e) {

      e.preventDefault();

      var date_value = $("#datepicker").val();

      alert(`button has been clicked ${initial_val} and date ${date_value} `);

      initial_val+= 1;

    });


    $(function() {

         $("#draggable").draggable();

      });

  }

}

サーバをいったん止め,再起動する.

$ bin/rails s

ブラウザでアクセスして,冒頭に示したような画面が現れれば,OKである.それぞれのアイテムが適切に動作している状況を確認されたい.

以上が,Bootstrap,jQueryおよびjQuery-UIを,Rails 7にNode.jsを使わないで導入する方法である.

おまけ

jQuery-UIに拘っている理由は,とあるプロジェクトでスライダー要素を使いたいからである.スライダーも使えることを,確認しておこう.app/views/home/index.html.erb に次の記述を追記する.どこでもよいが,とりあえずは,ボタンの下くらいに配置しておくことにする.

  <hr>

  <h6> JQuery Slidar Element </h6>

  <div id="slider" class="col-6 ui-widget"></div>

app/javascript/controllers/home_controller.js の修正は次のようにする.9ステップのスライダーを作り,スライダーが弄られたら値をコンソールに,都度,吐き出すというコードである.

...
    
$(
function() {

       $("#draggable").draggable();

       $("#slider").slider({ min: -4, max: 4, step: 1, value: 0,

           slide: function(event, ui) { console.log(ui.value); } });

    });

  }

}

動かして,試してみよう.うまくスライダーを使えるようになっただろうか.

実際には,コンソールに吐くのではなく,jQueryのattr()メソッドなどを使ってフォームのhidden_fieldにでも値をセットするようにすれば,スライダーの値をサーバに送り返すようなインタフェースを作るのは容易であろう.