tag:blogger.com,1999:blog-12337366768890493632024-03-29T05:12:50.917+09:00飯尾研究室中央大学 国際情報学部 教授 飯尾淳の戯言や技術情報などを綴っていますiiojunhttp://www.blogger.com/profile/09413532284181955183noreply@blogger.comBlogger583125tag:blogger.com,1999:blog-1233736676889049363.post-81939044336097539992024-03-28T18:46:00.002+09:002024-03-29T05:12:17.288+09:00習慣を変え「させる」ことの難しさ<p style="text-align: justify;">前から気になっていたことがある.京急の羽田空港第1・第2ターミナル駅で,JAL側の改札に上がるエスカレーターでの人々の行動である.</p><p style="text-align: justify;">次の写真を見ていただきたい.左側の2列が上りのエスカレーターである.エスカレーターの左側に並ぶ列ができており,右側には誰も乗っていない.首都圏の駅や公共の建物でよく見かける光景である.右と左が逆になるが,関西圏でも似たような光景は随所で見られるだろう.</p><p style="text-align: justify;"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPeTS2FnUBZFMIFdekHyhl0dX_6kOaK6wCMqduBS9bdEQv_QMHmjoq6y_eSvOq8UpCf3WwgxFRkAcQEctCu94fQwYr_LiygqVHPinuxJjVTUniSQ7U95M724rtGR4hCckVMr2z41xg_f_iDjJ9fPlgndK9uJaN7vXG77Nx8aGjzcgxIzBlgRDh7W9Y4UQ/s5712/IMG_2625.HEIC" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="4284" data-original-width="5712" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPeTS2FnUBZFMIFdekHyhl0dX_6kOaK6wCMqduBS9bdEQv_QMHmjoq6y_eSvOq8UpCf3WwgxFRkAcQEctCu94fQwYr_LiygqVHPinuxJjVTUniSQ7U95M724rtGR4hCckVMr2z41xg_f_iDjJ9fPlgndK9uJaN7vXG77Nx8aGjzcgxIzBlgRDh7W9Y4UQ/w640-h480/IMG_2625.HEIC" width="640" /></a></div><p></p><p style="text-align: justify;">エスカレーター手前の床に着目していただきたい.上の写真では分かりにくいかと思い,人の流れが途絶えたところで,再度,撮影したものが次の写真である.「歩かずに2列でご利用ください」とあるのがお分かりだろうか.</p><p style="text-align: justify;"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGWlOGSTxx-7gYkcT5NFBIgvRciquZiEueyOaOWQfGcQ5fBOok57cJWZ2simNG1_4ps6q6K4u_DT7f-iQMURIlJXnvc8Mre-epqb1qhOzuACfe072nbj2Lj7ct8X9nQuDQ-YCeVrYRtmuB9Yj5mQLKBdT3CcqKBqhecexkjf_KUgF4P95e8KQe2VYTZ-g/s5712/IMG_2626.HEIC" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="4284" data-original-width="5712" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGWlOGSTxx-7gYkcT5NFBIgvRciquZiEueyOaOWQfGcQ5fBOok57cJWZ2simNG1_4ps6q6K4u_DT7f-iQMURIlJXnvc8Mre-epqb1qhOzuACfe072nbj2Lj7ct8X9nQuDQ-YCeVrYRtmuB9Yj5mQLKBdT3CcqKBqhecexkjf_KUgF4P95e8KQe2VYTZ-g/w640-h480/IMG_2626.HEIC" width="640" /></a></div><p></p><p style="text-align: justify;">ここを通る皆さんの目に,この注意書きが入っているのかどうかは分からない.エスカレーターの片側を空けずに2列で詰めて並んだほうが,このように1列で並んで片側を「誰も使わない」場合よりは効率がよいことは火を見るより明らかである.</p><p style="text-align: justify;">なお,片側を「間を空けずに」歩いて上る人たちで埋められれば「2列で詰めて並んだほうが,輸送効率が高い」という主張は間違いじゃないかと常々疑っているんだがまあその話はややこしくなるので置いておく(最も輸送効率が高くなるのは2列で詰め詰めになりながら皆で足並み揃えて歩いて上るという状況のはずである……さらに「走って上る」を許すとそれが最強となる).</p><h3 style="text-align: justify;">なぜ注意は守られないのか</h3><p style="text-align: justify;">話がかなり脱線したので元に戻すと,「歩かずに2列でご利用ください」という注意喚起は最近いたるところでなされている.しかし,ついぞ,守られているのを見たことがない.なぜだろうか.</p><p style="text-align: justify;">一つには,染み付いた習慣が考えられよう.長年培ってきた慣習は,そう簡単には変えられないのだ.</p><p style="text-align: justify;">もう一つ,勇気を出して空いているほうに立って並んだとして,後ろから歩いて上ってきた人に邪魔者扱いされないだろうかという不安もあろう.歩いて上ってくる人は,ほぼ,急いでいる(健康のために歩いて上らんという人もいるかもしれないが).キッと睨みつけられて,ときとして罵倒されかねないと考えると,歩いて上ろうという人のほうが「指示を守っていない」とはいえ,反論するのも馬鹿馬鹿しいと人々が考えるのはいたって自然である.</p><p style="text-align: justify;">エスカレーターに乗る行動を変えようとしているほう(この場合は,京急側)も,この問題に本気で取り組んでいるのか疑わしい状況もある.次の写真を見ていただきたい.</p><p style="text-align: justify;"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgadd7QcQiWTBRzzIVpfyyFtYxTdCZHCnFwrG4OLN6XAG7TReH7jZ48KUDvKUvHkBxEp9HkJkSBqOYyzeWA5DuNaRGuKmDPv_QFf_2yx4NmwN7fY3JN3ElHrU65KP_W476IpyHO41KT3THsiVx4_XzsR7WRiP_IQCJ-rJMBbHoT_wHuveNUHXdvAh84gw0/s5712/IMG_2627.HEIC" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="4284" data-original-width="5712" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgadd7QcQiWTBRzzIVpfyyFtYxTdCZHCnFwrG4OLN6XAG7TReH7jZ48KUDvKUvHkBxEp9HkJkSBqOYyzeWA5DuNaRGuKmDPv_QFf_2yx4NmwN7fY3JN3ElHrU65KP_W476IpyHO41KT3THsiVx4_XzsR7WRiP_IQCJ-rJMBbHoT_wHuveNUHXdvAh84gw0/w640-h480/IMG_2627.HEIC" width="640" /></a></div><p></p><p style="text-align: justify;">注意喚起の表示を床にした後に,下り側のリノベーション作業をしたのだろうか.まるっきり意味が分からない状態になってしまっている.これではダメだろう.</p><h3 style="text-align: justify;">どうするのがよいのか</h3><p style="text-align: justify;">高速道路で右に左に車線変更を繰り返して遅い車を追い抜いたとしても,目的地に着く時間は10分も変わらない,などという指摘もある.安全のためにのんびりいこうや,というのは正論,ではあるが,急いでいる人,焦っている人にその理屈は通用しない.</p><p style="text-align: justify;">エスカレーターを歩いて上っている人がいたらドリフのコントのように上から金タライが落ちてくるとか,まあ,それは冗談としても,警備員を配して公衆の面前で注意を促すとか,「エスカレーターでは歩かないで2列に並んで落ち着いて乗りましょう」とアナウンスを繰り返すとか,もう少し強い刺激を与えないと,この問題は解決しないのではなかろうか.</p><p style="text-align: justify;">言葉を変えれば,この問題の解決に対する行政や施設側の本気度が問われているともいえよう.ある程度の変化,2列で立ち止まる人が3割くらいにもなれば,あとは自然に行動が変わっていくはずである.それまでは,考えている以上に強いドライビングフォースをかけねば,集団行動の変化は起こりにくい,そんなことを痛感した.</p>iiojunhttp://www.blogger.com/profile/09413532284181955183noreply@blogger.com0tag:blogger.com,1999:blog-1233736676889049363.post-78383684968192244292024-03-16T11:50:00.002+09:002024-03-16T11:51:03.862+09:00沖縄研修・2024春<p style="text-align: justify;">飯尾研春の研究室旅行……ではなく国内調査実習ということで2・3年生総勢17名で沖縄に行きました.訪問先は,琉球大学の琉ラボ,沖縄科学技術大学院大学(OIST),沖縄ITイノベーション戦略センター(ISCO)などです.</p><p style="text-align: justify;">琉ラボでは,同ラボにおけるスタートアップ支援や起業等に関するレクチャーを受け,そのあと積極的な質疑応答が行われました.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXCOA9q_p5KvV-ITm7VGtxx8GWagvNQaEv3tRwxhZyW1CWGRhLXKTDt_9oXfJJzRqoyxSGjI2T-tKL28Q2Fau_tzWw9kmwuekojUarcrtgOGjLo46c11NzOjuAjBc8TYAFj0hBUmEZ8GaZv3OG32-Mh1P64vOQ_VnsPFxmjvVLnB-XIlA7_mLZtfLkVik/s1910/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-03-16%2011.26.15.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1150" data-original-width="1910" height="386" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXCOA9q_p5KvV-ITm7VGtxx8GWagvNQaEv3tRwxhZyW1CWGRhLXKTDt_9oXfJJzRqoyxSGjI2T-tKL28Q2Fau_tzWw9kmwuekojUarcrtgOGjLo46c11NzOjuAjBc8TYAFj0hBUmEZ8GaZv3OG32-Mh1P64vOQ_VnsPFxmjvVLnB-XIlA7_mLZtfLkVik/w640-h386/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-03-16%2011.26.15.png" width="640" /></a></div><p style="text-align: justify;">OISTではその豪華な設備や森の中に突如現れるコミュニティに,まるでZootopia!と驚きました(私も開学前の準備期間に一度訪れたことがありますが,そのときからの変化にびっくり).</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEJ1zhWNljnx-bEp2dbduVRjoNWbAIXkt4XxPBTBJq7J9tPZSCdHRfHt-C5-Ka5Ru71gCPdy_gwdHwRsuAP_v7QEut3RkSSgtmr6MAqDZy0_Egbvz2_eEyVIJ-DlCz5HnsU_r91U2PCjO8bINug3F3nLMWNsBdArrXhs3iYZkJx17XqQMGAHmD97-yDsc/s5712/IMG_2520.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="4284" data-original-width="5712" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEJ1zhWNljnx-bEp2dbduVRjoNWbAIXkt4XxPBTBJq7J9tPZSCdHRfHt-C5-Ka5Ru71gCPdy_gwdHwRsuAP_v7QEut3RkSSgtmr6MAqDZy0_Egbvz2_eEyVIJ-DlCz5HnsU_r91U2PCjO8bINug3F3nLMWNsBdArrXhs3iYZkJx17XqQMGAHmD97-yDsc/w640-h480/IMG_2520.jpeg" width="640" /></a></div><p style="text-align: justify;">最終日,ISCO訪問では,那覇市職員の方による沖縄県経済やIT振興に関する説明,ISCO山田専務による観光DXの現状等に関する講義を受けたあと,活発な意見交換が行われました.</p><p style="text-align: justify;">ISCO訪問のあと,夜の飛行機で帰京する前のちょっとしたエクスカーションとして,慶良間諸島のあたりまでホエールウォッチングに出かけました.大きなザトウクジラの親子に遭遇,何度も豪快なブリーチを繰り返してくれて,見応えがありました.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXDWt19qlqeJddeob9PC_wZvCHTDTQeXmDU8hVPh5gxK9qDDP15jdtu24WDSdIKZMYQ_4FXhfYU8v_hbip2OyH_1CC3Xvi6Gxo_I37E4WybnZEXwk0-FnXCI0_DeLE_1b-m9DRTnHxfcDquef9zym3-fMFHvU89l7FJG1w7ramJHZgd42az9cmbjKGMuE/s2268/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-03-16%2011.28.19.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1530" data-original-width="2268" height="432" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXDWt19qlqeJddeob9PC_wZvCHTDTQeXmDU8hVPh5gxK9qDDP15jdtu24WDSdIKZMYQ_4FXhfYU8v_hbip2OyH_1CC3Xvi6Gxo_I37E4WybnZEXwk0-FnXCI0_DeLE_1b-m9DRTnHxfcDquef9zym3-fMFHvU89l7FJG1w7ramJHZgd42az9cmbjKGMuE/w640-h432/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-03-16%2011.28.19.png" width="640" /></a></div><div class="separator" style="clear: both; text-align: right;">(NEWS staff 撮影)</div>iiojunhttp://www.blogger.com/profile/09413532284181955183noreply@blogger.com0tag:blogger.com,1999:blog-1233736676889049363.post-22767222999049473852024-02-10T12:13:00.007+09:002024-02-11T10:39:13.092+09:00講演タイトルと絵文字<p style="text-align: justify;">「半角カナ」と呼ばれる文字セットがある.JIS X 0201として制定されているカタカナの文字コード集合である.文字コードを8ビットないしは7ビットで表現していた時代,コンピュータの黎明期において日本語をなんとかしてコンピュータで表現しようとした結果の,ひとつの産業遺産である.</p><p style="text-align: justify;">翻って現代,日本語はほぼ不自由なくコンピュータで表現できるようになった.文字コードも,JIS,Shift JIS,EUCといった複数のコードが使われることによりときとして文字化けが起こるといった混乱の時代を経て,いまではUnicodeによってほぼそのようなトラブルは回避されている.</p><p style="text-align: justify;">いわゆる半角カナは一時期,トラブルの元になるので使わないほうがよいとされていたが,今ではUnicodeに組み込まれているので問題なく利用できる.ただし,コード云々よりも,デザイン上の問題というか,同じ文字なのに全角と半角という2種類の文字が存在すること自体が,根本的な課題であろう.同じことはA-Z(a-z)とA-Z(a-z)にも当てはまる(前者は半角,後者は全角).システムを頑健にするためには入力されたテキストに対し,同一化の処理を施さねばならず,面倒くさいことこのうえない.</p><p style="text-align: justify;">この問題はもう,強制的にどちらかを使わないようにするというコンセンサスを共有するしか解決方法がないが,それはなかなか難しいだろう.</p><p style="text-align: justify;">ところで,Unicodeで問題が全て解決したかというと,残念ながら,そうでもない.なぜならば,古いシステムを延々と使い続けている人や組織が絶えないからである.ありがちなのが,丸数字と(月)(火)(水)……の文字化け問題である.WindowsのShift JISで①②③という文字を使うと,Mac側では(月)(火)(水)になってしまう,というアレ.令和の世の中でも,ときどき遭遇する.</p><p style="text-align: justify;">最近,私が遭遇した出来事は,講演タイトルの変更を余儀なくされたことである.正確には,データベースに登録できないから,登録するタイトルを修正せよ,というもの.当該講演は,こちらである.</p><blockquote style="border: none; margin: 0px 0px 0px 40px; padding: 0px;"><p style="text-align: justify;">飯尾淳, "にこP(大学版)中大 iTL🇯🇵 x KMITL🇹🇭 実施報告," インターネットを用いた海外の高校との協同授業:実践報告シンポジウム 第2回, 東京 市ヶ谷 & オンライン (2022.2.26).</p></blockquote><p style="text-align: justify;">「講演タイトルに絵文字なんて使うなよ!」っていうマジメなご指摘は承るが,遊び心はあってもいいじゃんねーとも思う.まあ,そんな開き直りはともかくとして,この講演の情報を researchmap の講演実績に入れていたら,そこからデータをフィードするようにした研究者DBの管理者から「うちのシステムは絵文字使えないから当該絵文字を削除してください」という連絡が来た.残念な話である.</p><p style="text-align: justify;">そもそも講演や論文のタイトルって,もっと自由に付けていいんじゃないかと,常々,悩ましく思っている.同じく2022年の2月には,ヒューマンインタフェース学会の学会誌に,次のような記事を寄稿した.</p><blockquote style="border: none; margin: 0px 0px 0px 40px; padding: 0px;"><p style="text-align: justify;">飯尾淳, "ポストコロナ時代の〇〇コミュニケーション," ヒューマンインタフェース学会学会誌, Vol. 24, No. 1, pp. 4-7, (2022.2).</p></blockquote><p style="text-align: justify;">この記事の校正中に,事務局から「そろそろタイトルきちんと決めてください」と連絡が来た.「〇〇コミュニケーション」の「〇〇」の部分が,仮置きだと思われたらしい.これは,正規表現でいうところのワイルドカード,すなわち,よくある(〇〇には好きな言葉を入れてください)という意味でそのように表記したものだったが,その意図が伝わっていなかった.</p><p style="text-align: justify;">このときは丁寧に説明し,当初の意図通り,記事はこのままのタイトルで掲載された.</p><p style="text-align: justify;">なお,論文のタイトルは,「システム名: その説明」というようなタイトルを付けることが多い.Proposal of … とか,Research on … ,Development of … みたいな紋切り型のタイトルは面白くないし,タイトルの頭文字が偏ってしまう.AからZまで頭文字が散らばったほうが,多様性の時代に合っている.「システム名: その説明」であれば,その説明部分は好きに書けるという理屈である.</p><p style="text-align: justify;">ところで,ここまで書いてふと疑問に思ったのだが,絵文字で始めたら,インデックス作るときにどういう扱いにされるんだろう?こんどやってみようかな(また怒られるかも……)</p><p style="text-align: justify;">講演タイトルといえば,心に残っているのは,2004年のWISSにおける大和田さんの発表である.</p><blockquote style="border: none; margin: 0px 0px 0px 40px; padding: 0px;"><p style="text-align: justify;">大和田茂,”切る," WISS第12回インタラクティブシステムとソフトウェアに関するワークショップ, (2004).</p></blockquote><p style="text-align: justify;"></p><p style="text-align: justify;">3Dモデルのボクセル表現で,どこで切っても断面が表示できる,みたいな発表だったと記憶しているが,なんといってもタイトルが衝撃的である.わずか2文字.これ以上,短い論文タイトルを,私は寡聞にして知らない.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKbJOU08qFPGKaFYYzATofghi4IJ_RXuMN6iwE7d-ibzo4qLFEzjgxBWvPxHK_V8Ay4FvyYvWrxVRorDZTDtRL7V0Mya75TlBKhCeZqXHfgFZqiN-GUwuNjE9-tGSpEYUfc9BFVdXK3Ucfa5kDqbS8pOjODf9D5NsnylG6ZjZ7vcWYpASYAroBFY10uUU/s1568/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-02-10%2011.57.06.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1184" data-original-width="1568" height="484" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKbJOU08qFPGKaFYYzATofghi4IJ_RXuMN6iwE7d-ibzo4qLFEzjgxBWvPxHK_V8Ay4FvyYvWrxVRorDZTDtRL7V0Mya75TlBKhCeZqXHfgFZqiN-GUwuNjE9-tGSpEYUfc9BFVdXK3Ucfa5kDqbS8pOjODf9D5NsnylG6ZjZ7vcWYpASYAroBFY10uUU/w640-h484/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-02-10%2011.57.06.png" width="640" /></a></div><br /><p style="text-align: justify;"><br /></p>iiojunhttp://www.blogger.com/profile/09413532284181955183noreply@blogger.com0tag:blogger.com,1999:blog-1233736676889049363.post-69949401368394914842024-01-23T07:49:00.015+09:002024-01-23T09:59:24.479+09:00漫才師・山中村「田中角栄」<p style="text-align: justify;">山中・中村:(上下からそれぞれ登場)どーもー</p><p style="text-align: justify;">山中:山中と</p><p style="text-align: justify;">中村:中村で,山中村です.よろしくお願いしますー</p><p style="text-align: justify;">山中:山中村てね,どこぞの田舎の山んなかにありそうな地名ですけれども.実際,昔は新潟県,石川県,岐阜県,愛知県,広島県,高知県にあったらしいですよ.どの村も合併とか改名とかで今ではぜんぶ消えてなくなってしまいました.</p><p style="text-align: justify;">中村:ほんならオレらも消えてなくなるんかいな!不吉な名前だなー.</p><p style="text-align: justify;">山中:ま,消えてなくならんように元気出していきましょう.今日はせめて名前だけでも覚えて帰ってください.</p><p style="text-align: justify;">中村:ところでね?昔,田中角栄っちゅーオッサンおったでしょ?</p><p style="text-align: justify;">山中:あー,ロッキード事件で逮捕されたひとね.</p><p style="text-align: justify;">中村:逮捕て,いきなりネガティブな話題から攻めんなよ.いうていまの若い子そんなんよう知らないでしょ.</p><p style="text-align: justify;">山中:君もオッサンとか言ってたでしょうが.仮にも一国の総理大臣を務められた方でしょ?娘さんの田中真紀子っていうオバハンも政治家でしたな.</p><p style="text-align: justify;">中村:オバハンいうな.あの人も大臣やられた偉い人だよ?ま,それはそれとして,こないだお屋敷が火事になったらしくて.</p><p style="text-align: justify;">山中:へー,そうなん?…… 記念マキコ</p><p style="text-align: justify;">中村:は?</p><p style="text-align: justify;">山中:記念パピコ</p><p style="text-align: justify;">中村:記念カキコかよ.ここは2ちゃんねるじゃありませーん.オレらの漫才,2ちゃんねるの便所の落書きと一緒にしちゃダメ!ぜったい.</p><p style="text-align: justify;">山中:そういえば田中真紀子さん,久しぶりに表舞台に現れたかと思ったら記者会見でおもくそ政権批判してました.</p><p style="text-align: justify;">中村:そうそう.ネットもそれでちょっと炎上してた.</p><p style="text-align: justify;">山中:ネットが炎上してお屋敷に延焼……</p><p style="text-align: justify;">中村:なわけねーだろ!まあ,政権批判した直後に火事って,ちょっと疑っちゃうよね.怖い世界だ.</p><p style="text-align: justify;">山中:で,その田中角栄がどうしたの?</p><p style="text-align: justify;">中村:まー,このぅ(田中角栄のモノマネをする)</p><p style="text-align: justify;">山中:なんですか,なんですか?まーごめ?</p><p style="text-align: justify;">中村:まーごめは大鶴肥満だろうがよぅ.いいんだよそんな小ボケ挟まなくても.</p><p style="text-align: justify;">山中:ボケたのお前じゃんかよ.続けろよ.</p><p style="text-align: justify;">中村:ボケたわけじゃねーよ!ま,それはそれとして,こないだこんな話を聞いたんだよ.田中角栄ってパーティとかで相手の名前がわからないとき,「ところであなた,お名前なんでしたっけ?」ってズバリ聞いちゃうんだって.</p><p style="text-align: justify;">山中:そりゃ失礼だな.</p><p style="text-align: justify;">中村:いやそれがね,「え?中村ですけど」って答えたとするじゃん?そうしたら「いやそうじゃないよ,下の名前は何だったっけ?」って重ねるのよ.それで下の名前を聞いたふりをして,「中村さんね……」って話を続けるんだって.</p><p style="text-align: justify;">山中:へー,うまいこと考えたな.そりゃ賢いやり方だ.じゃあ中村さん,あなたお名前なんだっけ?</p><p style="text-align: justify;">中村:その聞き方じゃダメだろっ!もう中村ってわかってるじゃんよぅ.俺がやってみせるから……(間)…… あなたお名前なんでしたっけ?</p><p style="text-align: justify;">山中:田中です.</p><p style="text-align: justify;">中村:嘘ついちゃダメでしょ.田中角栄の話してるからって.あなた山中さんでしょうが …… もっかいね.やりなおし.あなたお名前なんでしたっけ?</p><p style="text-align: justify;">山中:アツシです.</p><p style="text-align: justify;">中村:いやそうじゃなくて……,下の名前は……,アツシさんね.下の名前はアツシさん.たしかに,あんた山中アツシだけど.ダメだよ.下の名前を答えちゃったら続かないじゃん.もういちど.苗字だけで答えてよね.あなたお名前なんでした?</p><p></p><p style="text-align: justify;">山中:山中です.</p><p style="text-align: justify;">中村:いや,下のお名前は?</p><p style="text-align: justify;">山中:(もじもじして)えー……,下ですか……,ヨコじゃダメ?</p><p style="text-align: justify;">中村:なに照れてるんだよ!変なこと考えてんじゃねーよ.ほんで横の名前ってなんだよ.あなたのお名前な・ん・で・す・か!</p><p style="text-align: justify;">山中:My name is Yamanaka.</p><p style="text-align: justify;">中村:なんで英語なんだよ!お前いつから外国人になっちゃった?</p><p style="text-align: justify;">山中:まだやるの?</p><p style="text-align: justify;">中村:こんなグダグダな漫才,SNSで叩かれるよ?炎上しちゃうよ.</p><p style="text-align: justify;">山中:えー,うち燃やされちゃうの.</p><p style="text-align: justify;">中村:燃やされねーよ!やめさせてもらうわ.</p><p style="text-align: justify;">山中・中村:ありがとうございました(ハケる)</p><p style="text-align: justify;"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmoavR_WVLDuwIc-MBVoud2554WdJrtFWj73LWn600HZWpg_Mbx6rP1D0StxL4yGDbsSquJA5cIYF1gY4gofCMu2UxFzNtdTgtMSeNm6DsjHV2u_xf82kl8MAtLiEkI4LzajsyyYqGP3t1PrKiFNH7Yy7oyB55tQ1rq1Q_8X3UMQK61p2AYeXpmOIaGS0/s400/owarai_manzai.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="400" data-original-width="389" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmoavR_WVLDuwIc-MBVoud2554WdJrtFWj73LWn600HZWpg_Mbx6rP1D0StxL4yGDbsSquJA5cIYF1gY4gofCMu2UxFzNtdTgtMSeNm6DsjHV2u_xf82kl8MAtLiEkI4LzajsyyYqGP3t1PrKiFNH7Yy7oyB55tQ1rq1Q_8X3UMQK61p2AYeXpmOIaGS0/w622-h640/owarai_manzai.png" width="622" /></a></div>iiojunhttp://www.blogger.com/profile/09413532284181955183noreply@blogger.com0tag:blogger.com,1999:blog-1233736676889049363.post-88180913654395375622024-01-03T18:59:00.007+09:002024-01-03T19:19:32.160+09:00岐阜のポーズとiPAQ<p style="text-align: justify;">2023年末,暮れも押しせまっていた時期に「岐阜のポーズ」が流行っていたのを皆さんご存知だろうか?</p><h3 style="text-align: justify;">岐阜のポーズって何だ?</h3><p style="text-align: justify;">そもそも岐阜のポーズとは何か.漫画「クレヨンしんちゃん」のひとコマで,しんちゃんが「ぎふのポーズ」としてとっていたポーズが元ネタらしい.後ろを向き,両手を真横に拡げ,四股を踏むような感じで大股を広げたうえで膝を直角まで曲げて踏ん張るというポーズである.</p><p style="text-align: justify;">国道417号藤橋根尾交差点岐阜方面ライブカメラの前でこのポーズをとってライブカメラ画像におさまるという悪戯が2023年末にちょっとしたブームになり,また,アクセスが集中してなのか事故を回避するためなのか,当該ライブカメラ映像が見られなくなってしまうなどの影響も出た.</p><p style="text-align: justify;">「岐阜のポーズ」というキーワードでネットを漁ると,このような画像がたくさん出てくる.昼夜問わず出てくるので,こんな山奥までまあご苦労さんとしか言いようがないが,なぜかブームになっていたことがわかる.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzkkmSap7PIEosbzrlgBBCVMFMVWLc2KBnOk5n0pLdN3zpwHTjLp4VBk7qRNW1ZBQX7_Euoqj1fURcnSKRo9daopZNq1_N0toW7gbs3GuS8q-HODI63CCVB7q1owG6y9w6xe_LWaOHVbWS4KoPb3F43zPAzzQs9e-Tbn8H3DRh0z6IOvBsuESQsHsnpDo/s1676/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-03%2019.15.17.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1256" data-original-width="1676" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzkkmSap7PIEosbzrlgBBCVMFMVWLc2KBnOk5n0pLdN3zpwHTjLp4VBk7qRNW1ZBQX7_Euoqj1fURcnSKRo9daopZNq1_N0toW7gbs3GuS8q-HODI63CCVB7q1owG6y9w6xe_LWaOHVbWS4KoPb3F43zPAzzQs9e-Tbn8H3DRh0z6IOvBsuESQsHsnpDo/w640-h480/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-03%2019.15.17.png" width="640" /></a></div><p style="text-align: justify;">なぜこんな山奥で岐阜のポーズをとることが流行ったのか,ライブカメラの定点観測が10分おきと比較的更新頻度が高く,自分の画像をライブカメラ画像としてネットに載せるのが容易だったからだとか,そもそも後ろ向きで顔を特定されないので匿名性が高かったからだとか,いろいろ考察されているので,詳しく知りたいむきはそちらを参照していただくとして……</p><h3 style="text-align: justify;">iPAQによるモバイル監視カメラ</h3><p style="text-align: justify;">私が気になったのは,このようなライブカメラ映像がスマートフォンの小さいデバイスで誰もがいつでもどこでも確認できるようになったんだなあとしみじみ思うと同時に,感慨深く思い出したことがあったからである.</p><p style="text-align: justify;">次の画像は,Linux Conference 2002 (LC2002)で発表した予稿から切り出してきた図である.写っているのは,iPAQで観測しているウェブカメラの画像である.リモートに設置されたウェブカメラが,窓の外,首都高の交通状況を動画で撮影し続けている状況を,Wifiで接続されたiPAQで確認している.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCUj_fOcewTkdC8Ir-8W9YIbuOD-sUAetv46_PlWukxjURghzmhn_5IRhYKiZ3R2FxJwozkrA04fuVlYlwqE-BH2Q_BbLq1t7jMdmC5uS00bVVXfd0gw5eH5pKZzpyPL0g309CfGmyZ9UFgs9k_TNfpybPZcA7gt5kk8DUwmXadDZdTAlkdG2hWtviWUI/s1378/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-03%2018.29.59.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="970" data-original-width="1378" height="450" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCUj_fOcewTkdC8Ir-8W9YIbuOD-sUAetv46_PlWukxjURghzmhn_5IRhYKiZ3R2FxJwozkrA04fuVlYlwqE-BH2Q_BbLq1t7jMdmC5uS00bVVXfd0gw5eH5pKZzpyPL0g309CfGmyZ9UFgs9k_TNfpybPZcA7gt5kk8DUwmXadDZdTAlkdG2hWtviWUI/w640-h450/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-03%2018.29.59.png" width="640" /></a></div><p style="text-align: justify;">皆さんはiPAQなんてご存知ないかもしれない.iPadのパチモンではありませんぞ?</p><p style="text-align: justify;">iPAQとは,今はなきCompaqが2000年から発売していた「ハンドヘルドコンピュータ」,今でいうモバイルデバイスで,デジタルアシスタントやポケットPCなどと呼ばれていた,スマートフォンの前身として位置付けられるデバイスである.</p><p style="text-align: justify;">このiPAQ,Windows CEという組み込みデバイス向けWindowsがインストールされていたはずだが,Familiar LinuxというWindows CEをまるっと入れ替えて使うためのLinuxが利用でき,さらにXも動いていたので普通のLinuxアプリケーションを開発するように利用できたのである.もっとも,本体で開発はできないので,親機でクロスコンパイルしたソフトウェアをダウンロードして云々と,ちょっとした手間が必要だったのはなんとなく覚えている.</p><p style="text-align: justify;">というわけで,今から20年以上前.初代iPhoneが出たのが2007年だから,その5年も前に,こんなことをして遊んでいた.歴史のたらればは語ってもせんないが,2002年のこれといい,その後のストリートビューもどきといい(この件についてはまた機会があれば紹介したい),資金さえあれば億万長者になれそうなアイデアは自分でも若い頃にいろいろと出していたのである.</p><p style="text-align: justify;">それを考えると,技術馬鹿ではダメで,口八丁手八丁で資本家を騙くらかす,いや,投資させる能力が,いかに大切かと思わないでもない(まあ,技術馬鹿で育ってきた今の立場も,それなりに悪くはないけれど……)</p>iiojunhttp://www.blogger.com/profile/09413532284181955183noreply@blogger.com0tag:blogger.com,1999:blog-1233736676889049363.post-9324736302678674412024-01-01T22:12:00.017+09:002024-01-07T10:59:06.319+09:00Rails 7にimportmapのみでBootstrap, jQuery / jQuery-UIを設定する方法<p style="text-align: justify;">かねてよりRailsをしばしば利用しており,Railsアプリの作り方を教える授業も担当,だいぶ内容が古くなってしまったが書籍も出しているくらいにはRailsを愛用している.しかし,Rails 7になってフロント周りがいろいろと変更されて,ネットの情報がのきなみ信用ならない状況になっていて,どこかで最新の状況を整理しておかねばならないなと感じていた.</p><p style="text-align: justify;">なにしろ,jQuery-UIなんかを使ってちょいと気の利いたことをやろうとしても,どうにもうまくいかず,困った状況なのである.そこで,今回,BootstrapとjQuery / jQuery-UI を importmap の仕組みで導入する方法を整理した.最終的に,次図のような状況を実現するところまで解説する.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieIBu4cVaWCd4kdFvdVBkeSlAMFWXZwQHPl1gpy9e_qzRPPovglCDRkoAlx9lhI3gHLCjiAtdpMrSYZw1suUiA47ADw80RalC82RHDnJpJmH0bw5Y40wI6l0Xy94Se_1qOQqmddQpNEpVk4EANMPC3vv61Cm54ftZy92abPgyQvMXK9HvBR6HQcgNEqSE/s1840/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-01%2018.34.55.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1318" data-original-width="1840" height="458" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieIBu4cVaWCd4kdFvdVBkeSlAMFWXZwQHPl1gpy9e_qzRPPovglCDRkoAlx9lhI3gHLCjiAtdpMrSYZw1suUiA47ADw80RalC82RHDnJpJmH0bw5Y40wI6l0Xy94Se_1qOQqmddQpNEpVk4EANMPC3vv61Cm54ftZy92abPgyQvMXK9HvBR6HQcgNEqSE/w640-h458/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-01%2018.34.55.png" width="640" /></a></div><p style="text-align: justify;">なお,動作を確認したバージョンは,次のとおりである.</p><blockquote style="border: none; margin: 0px 0px 0px 40px; padding: 0px;"><p style="text-align: justify;">ruby: 3.2.2, rails: 7.0.8, bootstrap: 5.3.2, jQuery: 3.7.1, jQuery-ui: 1.12.1</p></blockquote><p style="text-align: justify;">また,次の記事を参考にした.</p><p style="text-align: justify;"></p><ul><li>いぬいらぼ, <a href="https://inuinu.jp/rails7-bootstrap-importmap/" rel="nofollow" target="_blank">【Ruby on Rails7】Rails7にBootstrap5をNode.jsなしで導入する」</a></li><li>Md Habibur Rahman Habib, <a href="https://www.linkedin.com/pulse/how-install-jquery-jquery-ui-rails-7-using-importmap-without-habib/" rel="nofollow" target="_blank">How to Install jQuery and jQuery-UI in Rails 7 using importmap without node.js</a></li></ul><p></p><p style="text-align: justify;">前者のBootstrapの導入方法は,一箇所,そのままだとエラーになる箇所があるうえ,若干,記述が曖昧な箇所がある.一方,後者は問題なく実行できた.やはり確実な情報を入手するには英語の文献にあたれ,ということだろうか.</p><h3 style="text-align: justify;">アプリの構築</h3><p style="text-align: justify;">まず,テストのためのアプリの雛形を構築する.homeコントローラだけを作っておく.</p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">$ rails new Test; cd Test</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span style="font-variant-ligatures: no-common-ligatures;">...</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span style="font-variant-ligatures: no-common-ligatures;">$ bin/rails g controller home index</span></p><p style="text-align: justify;">config/routes.rb は次のようにしておこう.</p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="color: #2aae19; font-variant-ligatures: no-common-ligatures;">Rails</span><span class="s2" style="font-variant-ligatures: no-common-ligatures;">.application.routes.draw </span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">do</span></p><p class="p2" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="color: black; font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>root </span><span class="s5" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">'</span><span class="s2" style="font-variant-ligatures: no-common-ligatures;">home#index</span><span class="s5" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">'</span></p><p class="p3" style="background-color: #fff7d9; color: #bc6119; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" style="font-variant-ligatures: no-common-ligatures;">end</span></p><div style="text-align: justify;"><br /></div><h3 style="text-align: justify;">Bootstrapの導入</h3><p style="text-align: justify;">Gemfile に次を追加する(bundle add bootstrap を実施でもよい).</p><p class="p1" style="background-color: #fff7d9; color: #3d06d7; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"># Bootstrap 5</span></p><p class="p2" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">gem</span><span class="s3" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s2" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">"</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">bootstrap</span><span class="s2" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">"</span><span class="s3" style="color: black; font-variant-ligatures: no-common-ligatures;">, </span><span class="s2" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">"</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">~> 5.3.0</span><span class="s2" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">"</span></p><p style="text-align: justify;">また,以下の gem "sassc-rails" と書いてある行のコメントアウトを外す.</p><p class="p1" style="background-color: #fff7d9; color: #3d06d7; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"># Use Sass to process CSS</span></p><p class="p1" style="background-color: #fff7d9; color: #3d06d7; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"># gem "sassc-rails"</span></p><p style="text-align: justify;">これを,次のようにする.</p><p class="p1" style="background-color: #fff7d9; color: #3d06d7; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"># Use Sass to process CSS</span></p><p class="p2" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">gem</span><span class="s3" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s2" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">"</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">sassc-rails</span><span class="s2" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">"</span></p><p style="text-align: justify;">Gemfileを書き換えたら,gemをインストールしよう.</p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">$ bundle install</span></p><p style="text-align: justify;">Rails 7.0.8 だとimportmapがインストールされているはずなので,config/importmap.rb には次の2行を追記する(bin/importmap pin bootstrapコマンドでも必要な情報が記入されるが,実行時に大量のエラーが出るという問題がある).</p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">pin "bootstrap", to: "https://ga.jspm.io/npm:bootstrap@5.3.2/dist/js/bootstrap.esm.js"</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.8/lib/index.js"</span></p><p style="text-align: justify;">app/javascript/application.js に下記を追記する.</p><p class="p1" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">import</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">"./bootstrap"</span></p><p style="text-align: justify;">スタイルシートをscssに変更する.</p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">$ mv app/assets/stylesheets/application.{c,sc}ss<span class="Apple-converted-space"> </span></span></p><p style="text-align: justify;">app/assets/styleseets/application.scss には次のように記述する.デフォルトではコメントが記載されているだけなので,コメントの後に次のように追記すればよい.</p><p class="p1" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">@import </span><span class="s2" style="font-variant-ligatures: no-common-ligatures;">"bootstrap"</span><span class="s1" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">;</span></p><p style="text-align: justify;">確認のために app/views/layouts/application.html.erb の<body>〜</body>を次のように修正する.localhost:3000にアクセスしたときに,少しインデントされて表示されていれば,Bootstrapが有効になっているはずである.</p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span style="font-variant-ligatures: no-common-ligatures;">...</span></p><p class="p1" style="background-color: #fff7d9; color: #bc6119; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"><</span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">body</span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span></p><p class="p2" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"><</span><span class="s4" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">div</span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"> </span><span class="s5" style="color: #2aae19; font-variant-ligatures: no-common-ligatures;">class</span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">=</span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">"container"</span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span></p><p class="p3" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s3" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s6" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;"><%=</span><span class="s3" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s4" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">yield</span><span class="s3" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s6" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">%></span></p><p class="p3" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s3" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"></</span><span class="s4" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">div</span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span></p><p class="p1" style="background-color: #fff7d9; color: #bc6119; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"></</span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">body</span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span></p><p class="p1" style="background-color: #fff7d9; color: #bc6119; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"></</span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">html</span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span></p><div style="text-align: justify;"><br /></div><h3 style="text-align: justify;">Stimulus JSのセットアップ</h3><p style="text-align: justify;">さて,次はjQueryとjQuery-UIである.が,その前に,stimulus.js を設定しておく.まず,次のコマンドでstimulus.jsコントローラを作成する.</p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">$ bin/rails g stimulus home</span></p><p style="text-align: justify;">stimulus.jsを利用するために,app/views/home/index.html.erb を次のように記述する.</p><p class="p1" style="background-color: #fff7d9; color: #2aae19; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"><</span><span class="s2" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">div</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">data-controller</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">=</span><span class="s4" style="color: #b02117; font-variant-ligatures: no-common-ligatures;">"home"</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span></p><p class="p2" style="background-color: #fff7d9; color: #c40ec4; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s5" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"><</span><span class="s2" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">h1</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span><span class="s3" style="font-variant-ligatures: no-common-ligatures;"> This is home page</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"></</span><span class="s2" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">h1</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span></p><p class="p3" style="background-color: #fff7d9; color: #bc6119; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"></</span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">div</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span></p><p style="text-align: justify;">さらに,app/javascript/controllers/home_controller.js を次のように記述する.</p><p class="p1" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">import</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">{</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> Controller </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">}</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> from </span><span class="s4" style="font-variant-ligatures: no-common-ligatures;">"@hotwired/stimulus"</span></p><p class="p2" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 21px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;"></span><br /></p><p class="p3" style="background-color: #fff7d9; color: #3d06d7; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;">// Connects to data-controller="home"</span></p><p class="p4" style="background-color: #fff7d9; color: #bc6119; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;">export</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s4" style="font-variant-ligatures: no-common-ligatures;">default</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s4" style="font-variant-ligatures: no-common-ligatures;">class</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s4" style="font-variant-ligatures: no-common-ligatures;">extends</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> Controller </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">{</span></p><p class="p5" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>connect() </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">{</span></p><p class="p1" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>console.log(</span><span class="s4" style="font-variant-ligatures: no-common-ligatures;">"home controller has been connected"</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;">);</span></p><p class="p5" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">}</span></p><p class="p6" style="background-color: #fff7d9; color: #29a9b6; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;">}</span></p><p style="text-align: justify;">こうしておくと,data-controller="home" が記載されたページが表示されたときにこのJavaScriptが有効になるらしい.localhost:3000にアクセスしてブラウザの開発コンソールをチェックすると,このメッセージが記録されていることを確認できるだろう,</p><h3 style="text-align: justify;">jQueryおよびjQuery-UIの導入</h3><p style="text-align: justify;">いよいよjQueryとjQuery-UIを導入する.まず,Gemfileに次の記述を追記する.</p><p class="p1" style="background-color: #fff7d9; color: #3d06d7; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"># Use jquery as the JavaScript library</span></p><p class="p2" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">gem</span><span class="s3" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s2" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">'</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">jquery-rails</span><span class="s2" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">'</span></p><p class="p3" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 21px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"></span><br /></p><p class="p1" style="background-color: #fff7d9; color: #3d06d7; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"># Use jquery-ui for pretty UI</span></p><p class="p2" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">gem</span><span class="s3" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s2" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">'</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">jquery-ui-rails</span><span class="s2" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">'</span></p><p style="text-align: justify;">忘れずにgemをインストールしておこう.</p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">$ bundle install</span></p><p style="text-align: justify;">app/assets/styleseets/application.scss には次の行を追記する.</p><p class="p1" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">@import </span><span class="s2" style="font-variant-ligatures: no-common-ligatures;">"jquery-ui.css"</span><span class="s1" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">;</span></p><p style="text-align: justify;">次に,app/javascript/jquery_ui.js というファイルを作り,次を記載する.</p><p class="p1" style="background-color: #fff7d9; color: #3d06d7; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">//= require jquery-ui</span></p><p style="text-align: justify;">さらに,app/javascript/application.js に次を追記する.</p><p class="p1" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">import</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">"jquery"</span></p><p class="p1" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">import</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">"jquery_ujs"</span></p><p class="p1" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">import</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">"./jquery_ui"</span></p><p style="text-align: justify;">あと,もう少し.config/initializers/assets.rb に次の行を追加する.</p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="color: #2aae19; font-variant-ligatures: no-common-ligatures;">Rails</span><span class="s2" style="font-variant-ligatures: no-common-ligatures;">.application.config.assets.precompile +=</span><span class="s3" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s4" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">%w(</span><span class="s2" style="color: #b02117; font-variant-ligatures: no-common-ligatures;"> jquery.min.js jquery_ujs.js </span><span class="s4" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">)</span></p><p style="text-align: justify;">さらに,config/importmap.rb には次の2行を追記する.</p><p class="p1" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="color: black; font-variant-ligatures: no-common-ligatures;">pin </span><span class="s2" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">"</span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">jquery</span><span class="s2" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">"</span><span class="s1" style="color: black; font-variant-ligatures: no-common-ligatures;">, </span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">to</span><span class="s1" style="color: black; font-variant-ligatures: no-common-ligatures;">: </span><span class="s2" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">"</span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">jquery.min.js</span><span class="s2" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">"</span><span class="s1" style="color: black; font-variant-ligatures: no-common-ligatures;">, </span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">preload</span><span class="s1" style="color: black; font-variant-ligatures: no-common-ligatures;">: </span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">true</span></p><p class="p1" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="color: black; font-variant-ligatures: no-common-ligatures;">pin </span><span class="s2" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">"</span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">jquery_ujs</span><span class="s2" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">"</span><span class="s1" style="color: black; font-variant-ligatures: no-common-ligatures;">, </span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">to</span><span class="s1" style="color: black; font-variant-ligatures: no-common-ligatures;">: </span><span class="s2" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">"</span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">jquery_ujs.js</span><span class="s2" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">"</span><span class="s1" style="color: black; font-variant-ligatures: no-common-ligatures;">, </span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">preload</span><span class="s1" style="color: black; font-variant-ligatures: no-common-ligatures;">: </span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">true</span></p><p style="text-align: justify;">これで準備OKである.</p><h3 style="text-align: justify;">動作確認</h3><p style="text-align: justify;">うまく設定できたかどうか,動作確認しよう.</p><p style="text-align: justify;">app/views/home/index.html.erb は,次のように書き換える.</p><p class="p1" style="background-color: #fff7d9; color: #2aae19; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"><</span><span class="s2" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">div</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">data-controller</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">=</span><span class="s4" style="color: #b02117; font-variant-ligatures: no-common-ligatures;">"home"</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span></p><p class="p2" style="background-color: #fff7d9; color: #c40ec4; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s5" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"><</span><span class="s2" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">h1</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"> </span><span class="s6" style="color: #2aae19; font-variant-ligatures: no-common-ligatures;">class</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">=</span><span class="s4" style="color: #b02117; font-variant-ligatures: no-common-ligatures;">"mt-3"</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span><span class="s3" style="font-variant-ligatures: no-common-ligatures;"> This is home page</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"></</span><span class="s2" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">h1</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span></p><p class="p2" style="background-color: #fff7d9; color: #c40ec4; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s5" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"><</span><span class="s2" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">h6</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span><span class="s3" style="font-variant-ligatures: no-common-ligatures;"> Pick date using jQuery Datepicker </span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"></</span><span class="s2" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">h6</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span></p><p class="p3" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s5" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"><</span><span class="s2" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">p</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span><span class="s5" style="color: black; font-variant-ligatures: no-common-ligatures;">Date: </span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"><</span><span class="s2" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">input</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"> </span><span class="s6" style="color: #2aae19; font-variant-ligatures: no-common-ligatures;">type</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">=</span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">"text"</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"> </span><span class="s6" style="color: #2aae19; font-variant-ligatures: no-common-ligatures;">id</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">=</span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">"datepicker"</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></</span><span class="s2" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">p</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span></p><p class="p4" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s3" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"><</span><span class="s2" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">br</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span></p><p class="p4" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s3" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"><</span><span class="s2" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">hr</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span></p><p class="p2" style="background-color: #fff7d9; color: #c40ec4; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s5" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"><</span><span class="s2" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">h6</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span><span class="s3" style="font-variant-ligatures: no-common-ligatures;"> JQuery Draggable Element </span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"></</span><span class="s2" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">h6</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span></p><p class="p3" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s5" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"><</span><span class="s2" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">div</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"> </span><span class="s6" style="color: #2aae19; font-variant-ligatures: no-common-ligatures;">id</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">=</span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">"draggable"</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"> </span><span class="s6" style="color: #2aae19; font-variant-ligatures: no-common-ligatures;">class</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">=</span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">"ui-widget-content"</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span></p><p class="p4" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s3" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"><</span><span class="s2" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">p</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">Drag me around</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"></</span><span class="s2" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">p</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span></p><p class="p5" style="background-color: #fff7d9; color: #bc6119; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s5" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"></</span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">div</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span></p><p class="p4" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s3" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"><</span><span class="s2" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">br</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span></p><p class="p4" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s3" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"><</span><span class="s2" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">hr</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span></p><p class="p2" style="background-color: #fff7d9; color: #c40ec4; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s5" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"><</span><span class="s2" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">h6</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span><span class="s3" style="font-variant-ligatures: no-common-ligatures;"> Click Event using JQuery </span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"></</span><span class="s2" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">h6</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span></p><p class="p3" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s5" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"><</span><span class="s2" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">button</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"> </span><span class="s6" style="color: #2aae19; font-variant-ligatures: no-common-ligatures;">id</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">=</span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">"btn-click"</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"> </span><span class="s6" style="color: #2aae19; font-variant-ligatures: no-common-ligatures;">class</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">=</span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">"btn btn-primary"</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span><span class="s5" style="color: black; font-variant-ligatures: no-common-ligatures;"> Click Me </span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"></</span><span class="s2" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">button</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span></p><p class="p5" style="background-color: #fff7d9; color: #bc6119; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"></</span><span class="s3" style="font-variant-ligatures: no-common-ligatures;">div</span><span class="s1" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span></p><p style="text-align: justify;">これらの要素をコントロールするための app/javascript/controllers/home_controller.js も,次のように記述しておこう.</p><p class="p1" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">import</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">{</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> Controller </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">}</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> from </span><span class="s4" style="font-variant-ligatures: no-common-ligatures;">"@hotwired/stimulus"</span></p><p class="p2" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 21px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;"></span><br /></p><p class="p3" style="background-color: #fff7d9; color: #3d06d7; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;">// Connects to data-controller="home"</span></p><p class="p4" style="background-color: #fff7d9; color: #bc6119; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;">export</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s4" style="font-variant-ligatures: no-common-ligatures;">default</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s4" style="font-variant-ligatures: no-common-ligatures;">class</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s4" style="font-variant-ligatures: no-common-ligatures;">extends</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> Controller </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">{</span></p><p class="p5" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>connect() </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">{</span></p><p class="p1" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>console.log(</span><span class="s4" style="font-variant-ligatures: no-common-ligatures;">"home controller has been connected"</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;">);</span></p><p class="p5" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>$(</span><span class="s5" style="color: #b02117; font-variant-ligatures: no-common-ligatures;">"#datepicker"</span><span class="s4" style="font-variant-ligatures: no-common-ligatures;">).datepicker();</span></p><p class="p2" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 21px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;"></span><br /></p><p class="p5" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">var</span><span class="s4" style="font-variant-ligatures: no-common-ligatures;"> initial_val = 0;</span></p><p class="p5" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>$(</span><span class="s5" style="color: #b02117; font-variant-ligatures: no-common-ligatures;">"#btn-click"</span><span class="s4" style="font-variant-ligatures: no-common-ligatures;">).click(</span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">function</span><span class="s4" style="font-variant-ligatures: no-common-ligatures;"> (e) </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">{</span></p><p class="p5" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>e.preventDefault();</span></p><p class="p5" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">var</span><span class="s4" style="font-variant-ligatures: no-common-ligatures;"> date_value = $(</span><span class="s5" style="color: #b02117; font-variant-ligatures: no-common-ligatures;">"#datepicker"</span><span class="s4" style="font-variant-ligatures: no-common-ligatures;">).val();</span></p><p class="p1" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s1" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">alert</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;">(</span><span class="s4" style="font-variant-ligatures: no-common-ligatures;">`button has been clicked </span><span class="s6" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">${initial_val}</span><span class="s4" style="font-variant-ligatures: no-common-ligatures;"> and date </span><span class="s6" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">${date_value}</span><span class="s4" style="font-variant-ligatures: no-common-ligatures;"> `</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;">);</span></p><p class="p5" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>initial_val+= 1;</span></p><p class="p5" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">}</span><span class="s4" style="font-variant-ligatures: no-common-ligatures;">);</span></p><p class="p2" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 21px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;"></span><br /></p><p class="p5" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>$(</span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">function</span><span class="s4" style="font-variant-ligatures: no-common-ligatures;">() </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">{</span></p><p class="p5" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>$(</span><span class="s5" style="color: #b02117; font-variant-ligatures: no-common-ligatures;">"#draggable"</span><span class="s4" style="font-variant-ligatures: no-common-ligatures;">).draggable();</span></p><p class="p5" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">}</span><span class="s4" style="font-variant-ligatures: no-common-ligatures;">);</span></p><p class="p5" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">}</span></p><p class="p6" style="background-color: #fff7d9; color: #29a9b6; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;">}</span></p><p style="text-align: justify;">サーバをいったん止め,再起動する.</p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">$ bin/rails s</span></p><p style="text-align: justify;">ブラウザでアクセスして,冒頭に示したような画面が現れれば,OKである.それぞれのアイテムが適切に動作している状況を確認されたい.</p><p style="text-align: justify;">以上が,Bootstrap,jQueryおよびjQuery-UIを,Rails 7にNode.jsを使わないで導入する方法である.</p><h3 style="text-align: justify;">おまけ</h3><p style="text-align: justify;">jQuery-UIに拘っている理由は,とあるプロジェクトでスライダー要素を使いたいからである.スライダーも使えることを,確認しておこう.app/views/home/index.html.erb に次の記述を追記する.どこでもよいが,とりあえずは,ボタンの下くらいに配置しておくことにする.</p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"><</span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">hr</span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span></p><p class="p2" style="background-color: #fff7d9; color: #c40ec4; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"><</span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">h6</span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span><span class="s1" style="font-variant-ligatures: no-common-ligatures;"> JQuery Slidar Element </span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"></</span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">h6</span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span></p><p class="p3" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"><</span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">div</span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"> </span><span class="s5" style="color: #2aae19; font-variant-ligatures: no-common-ligatures;">id</span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">=</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">"slider"</span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;"> </span><span class="s5" style="color: #2aae19; font-variant-ligatures: no-common-ligatures;">class</span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">=</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">"col-6 ui-widget"</span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></</span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">div</span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">></span></p><p style="text-align: justify;">app/javascript/controllers/home_controller.js の修正は次のようにする.9ステップのスライダーを作り,スライダーが弄られたら値をコンソールに,都度,吐き出すというコードである.</p><p class="p5" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space">...<br class="Apple-interchange-newline" /> </span>$(</span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">function</span><span class="s4" style="font-variant-ligatures: no-common-ligatures;">() </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">{</span></p><p class="p5" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>$(</span><span class="s5" style="color: #b02117; font-variant-ligatures: no-common-ligatures;">"#draggable"</span><span class="s4" style="font-variant-ligatures: no-common-ligatures;">).draggable();</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>$(</span><span class="s2" style="color: #b02117; font-variant-ligatures: no-common-ligatures;">"#slider"</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">).slider(</span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">{</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;"> </span><span style="font-variant-ligatures: no-common-ligatures;">min: -4, max: 4, step: 1, value: 0,</span></p><p class="p5" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;"></span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>slide: </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">function</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">(</span><span class="s4" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">event</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">, ui) </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">{</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;"> console.log(ui.value); </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">}</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">}</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">);</span></p><p class="p5" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">}</span><span class="s4" style="font-variant-ligatures: no-common-ligatures;">);</span></p><p class="p5" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">}</span></p><p class="p6" style="background-color: #fff7d9; color: #29a9b6; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s4" style="font-variant-ligatures: no-common-ligatures;">}</span></p><p style="text-align: justify;">動かして,試してみよう.うまくスライダーを使えるようになっただろうか.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCapXZYoqSVaIM6o2XMZhYxrq1un7C7GsO0OhsTU2FHlo5IpSACWL6Y970p9Fe60BB9ZA9u6CNmzinB55jVnoZEb1x0jcerO9rbT0KVFRWdnt-gj3LpgWGEoycavc2vwOGs2P27BqQZavhFPc9T1mQXWWfxJYrXdeaiof-xaXiUi3Rg7bU_FnPWkVXNkc/s2264/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-02%206.20.10.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1394" data-original-width="2264" height="394" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCapXZYoqSVaIM6o2XMZhYxrq1un7C7GsO0OhsTU2FHlo5IpSACWL6Y970p9Fe60BB9ZA9u6CNmzinB55jVnoZEb1x0jcerO9rbT0KVFRWdnt-gj3LpgWGEoycavc2vwOGs2P27BqQZavhFPc9T1mQXWWfxJYrXdeaiof-xaXiUi3Rg7bU_FnPWkVXNkc/w640-h394/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-01-02%206.20.10.png" width="640" /></a></div><p style="text-align: justify;">実際には,コンソールに吐くのではなく,jQueryのattr()メソッドなどを使ってフォームのhidden_fieldにでも値をセットするようにすれば,スライダーの値をサーバに送り返すようなインタフェースを作るのは容易であろう.</p>iiojunhttp://www.blogger.com/profile/09413532284181955183noreply@blogger.com0tag:blogger.com,1999:blog-1233736676889049363.post-28933830920289123162023-12-30T09:47:00.012+09:002024-01-05T06:11:38.936+09:00 シミュレーションゲームを使った行動分析<p style="text-align: justify;"><a href="https://twinery.org/" rel="nofollow" target="_blank">Twine</a>というツールがある.もともとこのツール,「対話的非線形物語(interactive, nonlinear stories)」あるいは「あなた自身の冒険を作成(create-your-own-adventure)」と呼ばれる,オンライン版のテキストアドベンチャーゲームを作成するツールである.</p><p style="text-align: justify;">このツールを用いて行動分析できないかと今年の卒研生が考えた.彼らは「避難行動のシミュレーションゲーム」を作成し,いま,その分析をしながら卒論を書いている.</p><p style="text-align: justify;">もとより簡単な行動ログを記録する機能が用意されていたが,より簡便かつ確実に,詳細な行動記録を取れるように拡張してみた.本稿ではその概要を説明する.</p><h4 style="text-align: justify;">Snowmanの利用</h4><p style="text-align: justify;">まず,Twine上で動作させるstory formatとしてSnowmanと呼ばれるものを利用する.Twineでは,いくつかのスクリプティングシステムを切り替えて活用できる.そのスクリプト言語のことをstory formatと呼んでいる.</p><p style="text-align: justify;">デフォルトではHarloweと呼ばれるものが組み込まれているが,これを,Snowmanと呼ばれるstory formatに切り替える.Snowmanは,CSSやJavaScriptをある程度理解している人向けに用意されているもので,PHPやERB(Embedded Ruby)のように,<% …… %>や<%= …… %>といったタグを用いてJavaScriptをそのまま埋め込められる.</p><p style="text-align: justify;">なお,Snowmanへの切り替えは,Twine編集画面のStoryタブにあるDefaultsメニューから行う.</p><h4 style="text-align: justify;">Story JavaScriptの設定</h4><p style="text-align: justify;">Story formatをSnowmanに切り替えたら,まず,StoryタブのJavaScriptメニューを開き,Story JavaScriptに以下のコードを記載する.</p><div><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">window</span><span class="s2" style="font-variant-ligatures: no-common-ligatures;">.story.state.hash = </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">{}</span><span class="s2" style="font-variant-ligatures: no-common-ligatures;">;</span></p><p class="p2" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 21px;"><span class="s2" style="font-variant-ligatures: no-common-ligatures;"></span><br /></p><p class="p3" style="background-color: #fff7d9; color: #3d06d7; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" style="font-variant-ligatures: no-common-ligatures;">// create a unique ID</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">window</span><span class="s2" style="font-variant-ligatures: no-common-ligatures;">.story.state.uid = </span><span class="s4" style="color: #2aae19; font-variant-ligatures: no-common-ligatures;">Date</span><span class="s2" style="font-variant-ligatures: no-common-ligatures;">.now().toString(16) +</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>Math.floor(1000 * Math.random()).toString(16);</span></p><p class="p2" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 21px;"><span class="s2" style="font-variant-ligatures: no-common-ligatures;"></span><br /></p><p class="p4" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s5" style="color: black; font-variant-ligatures: no-common-ligatures;">$(</span><span class="s1" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">window</span><span class="s5" style="color: black; font-variant-ligatures: no-common-ligatures;">).on(</span><span class="s2" style="font-variant-ligatures: no-common-ligatures;">'sm.passage.shown'</span><span class="s5" style="color: black; font-variant-ligatures: no-common-ligatures;">,<span class="Apple-converted-space"> </span></span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">function</span><span class="s2" style="font-variant-ligatures: no-common-ligatures;"> (eventObject, passageObject) </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">{</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s1" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">window</span><span class="s2" style="font-variant-ligatures: no-common-ligatures;">.story.state.</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>hash</span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">[</span><span class="s2" style="font-variant-ligatures: no-common-ligatures;">passageObject.passage.name</span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">]</span><span class="s2" style="font-variant-ligatures: no-common-ligatures;"> = eventObject.timeStamp</span></p><p class="p2" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 21px;"><span class="s2" style="font-variant-ligatures: no-common-ligatures;"></span><br /></p><p class="p3" style="background-color: #fff7d9; color: #3d06d7; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s5" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s2" style="font-variant-ligatures: no-common-ligatures;">// disable the browser's back button</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>history.pushState(</span><span class="s1" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">null</span><span class="s2" style="font-variant-ligatures: no-common-ligatures;">, </span><span class="s1" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">null</span><span class="s2" style="font-variant-ligatures: no-common-ligatures;">, </span><span class="s1" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">null</span><span class="s2" style="font-variant-ligatures: no-common-ligatures;">);</span></p><p class="p5" style="background-color: #fff7d9; color: #bc6119; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s5" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s2" style="font-variant-ligatures: no-common-ligatures;">return</span><span class="s5" style="color: black; font-variant-ligatures: no-common-ligatures;">;</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">}</span><span class="s2" style="font-variant-ligatures: no-common-ligatures;">);</span></p><p class="p2" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 21px;"><span class="s2" style="font-variant-ligatures: no-common-ligatures;"></span><br /></p><p class="p3" style="background-color: #fff7d9; color: #3d06d7; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" style="font-variant-ligatures: no-common-ligatures;">// to show the alert to quit the game</span></p><p class="p4" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s5" style="color: black; font-variant-ligatures: no-common-ligatures;">$(</span><span class="s1" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">window</span><span class="s5" style="color: black; font-variant-ligatures: no-common-ligatures;">).on(</span><span class="s2" style="font-variant-ligatures: no-common-ligatures;">'beforeunload'</span><span class="s5" style="color: black; font-variant-ligatures: no-common-ligatures;">, </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">function</span><span class="s5" style="color: black; font-variant-ligatures: no-common-ligatures;"> (</span><span class="s1" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">event</span><span class="s5" style="color: black; font-variant-ligatures: no-common-ligatures;">) </span><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">{</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s1" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">event</span><span class="s2" style="font-variant-ligatures: no-common-ligatures;">.preventDefault();</span></p><p class="p5" style="background-color: #fff7d9; color: #bc6119; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s5" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s2" style="font-variant-ligatures: no-common-ligatures;">return</span><span class="s5" style="color: black; font-variant-ligatures: no-common-ligatures;">;</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s3" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">}</span><span class="s2" style="font-variant-ligatures: no-common-ligatures;">);</span></p></div><p style="text-align: justify;">このコードは,ストーリーが起動されたときに最初に走るJavaScriptのプログラムである.なお,Snowmanでは,JavaScriptの動作スコープは各passage(ページのこと)内に閉じられており,グローバル変数をwindow.story以外に持たない.したがって,ストーリー全体でデータをやりとりしたい場合には,基本的にはwindow.story.state変数にいろいろと付け加えていくしかない.</p><p style="text-align: justify;">そのような理由により,まずは,window.story.state.hashという連想配列を用意し,動作状況はそこに記録していくことにする.</p><p style="text-align: justify;">なお,もうひとつ,window.story.state.uidというユーザIDを記録する変数も用意し,そこに一意な文字列として作成するIDを格納する.</p><p style="text-align: justify;">Snowmanでは,passage(ページ)遷移時にsm.passage.shownというイベントを発火する.各passageのアクセス記録を取りたければ,そのイベントを受けて,先の連想配列に,passage名をキー,その時点でのタイムスタンプ(Unixエポック)をバリューとして,記録するようにしておけばよい.passage名はpassageObject.passage.nameとして,タイムスタンプはeventObject.timestampとして与えられるので,それを連想配列に記録する.</p><p style="text-align: justify;">残りのコードは,ブラウザの「戻る」ボタンを無効にしたり,途中でやめようとしたときにアラートを発したりという設定を行うものである.</p><h4 style="text-align: justify;">記録のテスト</h4><p style="text-align: justify;">簡単なストーリーを用意した.次の図は,四つのpassageから成るストーリーである.Story JavaScriptには先のコードが入れられており,最後のページには,記録されたユーザIDとJSON形式で提示されるアクセス一覧を表示するコードが埋め込まれている.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA2jCjgM1QCnOqcblKoVgsY_XC4kpG5VGs4dI7hnGWxcMtcTA62c-i_NGnc45wR1LVDeSAzwpJYI40pdRlIo1a8snS68u2exE-u6Y2c5dOIp17EQpvMzI3iUUfrcIjGY6gI8Rsl71MyRn80THqkZXPmyPAn9pzbk-L5ltYyxp-p_joQa7Xg0qjAns-_i4/s1964/fig1.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1612" data-original-width="1964" height="526" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA2jCjgM1QCnOqcblKoVgsY_XC4kpG5VGs4dI7hnGWxcMtcTA62c-i_NGnc45wR1LVDeSAzwpJYI40pdRlIo1a8snS68u2exE-u6Y2c5dOIp17EQpvMzI3iUUfrcIjGY6gI8Rsl71MyRn80THqkZXPmyPAn9pzbk-L5ltYyxp-p_joQa7Xg0qjAns-_i4/w640-h526/fig1.png" width="640" /></a></div><p style="text-align: justify;">このストーリーを実行して最後のページ(The last page)まで遷移すると,次の画面が現れる.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipwJfZmSpd_ob7QKnQfM98yt0CrvoncYb-VjLDEO1HJ4BywIJfGpnGjuaQ_RkmcWGHnMEWvWl8sGhVfy5XK3pkUPO8YcC306dU7qA_lOIbpYLSuOnOUsfzcmVxgjMDxCaMid75Qr9yUu3sW-1zNe4tk3ljjU2H8a-oq1RZHtFehleHbAG_-XFJtkFuRXE/s1584/fig2.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="836" data-original-width="1584" height="338" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipwJfZmSpd_ob7QKnQfM98yt0CrvoncYb-VjLDEO1HJ4BywIJfGpnGjuaQ_RkmcWGHnMEWvWl8sGhVfy5XK3pkUPO8YcC306dU7qA_lOIbpYLSuOnOUsfzcmVxgjMDxCaMid75Qr9yUu3sW-1zNe4tk3ljjU2H8a-oq1RZHtFehleHbAG_-XFJtkFuRXE/w640-h338/fig2.png" width="640" /></a></div><p style="text-align: justify;">一意なユーザIDと,JSON形式で表現されたアクセスログが表示されていることを確認できる.</p><p style="text-align: justify;">ところで,ここまで注意深く読んできたひとは,"The last page"が記録されていないじゃないか?ということに気付いただろう.そのとおり.残念ながら最後のページの記録が残らない.これは,どうも,sm.passage.shownというイベントが,ページのレンダリングの「後で」発火するから,という仕様によるものらしい.</p><p style="text-align: justify;">なお,ドキュメントにはsm.passage.hideやsm.passage.showというイベントもあると書いてあり,shownではなくshowを使えば最後のページも記録できそうなものだが,現時点で利用できるTwine 2.8.0とSnowman 2.0.2の組合せではsm.passage.shownしか使えなかった.残念だが,致し方ないところである.最後まで記録するためには,最後にもうひとつ,ダミーのページを用意して対処する必要がある.この点には注意しなければならない.</p><h4 style="text-align: justify;">サーバへ送信</h4><p style="text-align: justify;">さて,ここまで確認できれば,あとは,最後のpassageにサーバへ記録を送信するコードを埋め込み,サーバ側ではその送信を受け取るコードを用意すればよいだけである.</p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"><%</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>$.ajax(</span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">{</span></p><p class="p2" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s3" style="color: black; font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>url: </span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">'https://your.server.domain/php/tlog.php'</span><span class="s3" style="color: black; font-variant-ligatures: no-common-ligatures;">,</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>type: </span><span class="s4" style="color: #b02117; font-variant-ligatures: no-common-ligatures;">'POST'</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">,</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>data: </span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">{</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s4" style="color: #b02117; font-variant-ligatures: no-common-ligatures;">'uid'</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">: </span><span class="s5" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">window</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">.story.state.uid,</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s4" style="color: #b02117; font-variant-ligatures: no-common-ligatures;">'log'</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">: JSON.stringify(</span><span class="s5" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">window</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">.story.state.hash) </span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">}</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">,</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>dataType: </span><span class="s4" style="color: #b02117; font-variant-ligatures: no-common-ligatures;">'json'</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s2" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">}</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">);</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">%></span></p><p style="text-align: justify;">このコードはyour.server.domainというサーバに結果を送信するAJAXのコードである.ユーザIDとJSON形式で表現したアクセスログを送っている.</p><p style="text-align: justify;">なお,アクセスログのデータは ... 'log': JSON.stringify(window.story.state.hash) }ではなく... 'log': window.story.state.hash }としてもそのままJSONデータとして送信できるが,サーバ側での処理を簡易化するため,この段階で文字列データ化して送信している点に注意.</p><h4 style="text-align: justify;">サーバ側の処理</h4><p style="text-align: left;">サーバ側のプログラムは,/var/www/html/php/tlog.phpというファイルにおいて,次のように記述する(サーバ側はUbuntu 20.04, PHP 7.4.3 および SQLite3 3.31.1を使用).</p><p class="p1" style="background-color: #fff7d9; color: #c40ec4; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"><?php</span></p><p class="p2" style="background-color: #fff7d9; color: #29a9b6; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">$</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">uid</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">=</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">$</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">_POST</span><span class="s4" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">[</span><span class="s5" style="color: #b02117; font-variant-ligatures: no-common-ligatures;">'uid'</span><span class="s4" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">]</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;">;</span></p><p class="p2" style="background-color: #fff7d9; color: #29a9b6; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">$</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">log</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">=</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">$</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">_POST</span><span class="s4" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">[</span><span class="s5" style="color: #b02117; font-variant-ligatures: no-common-ligatures;">'log'</span><span class="s4" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">]</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;">;</span></p><p class="p3" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 21px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"></span><br /></p><p class="p4" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">$</span><span class="s6" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">dbfile</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">=</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">'./tlog_data.sqlite3'</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;">;</span></p><p class="p2" style="background-color: #fff7d9; color: #29a9b6; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">$</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">conn</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">=</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s4" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">new</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">PDO</span><span class="s4" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">(</span><span class="s5" style="color: #b02117; font-variant-ligatures: no-common-ligatures;">'sqlite:'</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">.</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">$</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">dbfile</span><span class="s4" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">)</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;">;</span></p><p class="p3" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 21px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"></span><br /></p><p class="p5" style="background-color: #fff7d9; color: #3d06d7; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">// create table</span></p><p class="p4" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">$</span><span class="s6" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">ddl</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">=</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">'CREATE TABLE IF NOT EXISTS userdata(</span></p><p class="p4" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>id integer primary key autoincrement,<span class="Apple-converted-space"> </span></span></p><p class="p4" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>uid string, log text)'</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;">;</span></p><p class="p6" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">$</span><span class="s6" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">conn</span><span class="s7" style="color: #2aae19; font-variant-ligatures: no-common-ligatures;">-></span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">query</span><span class="s4" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">(</span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">$</span><span class="s6" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">ddl</span><span class="s4" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">)</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">;</span></p><p class="p3" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 21px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"></span><br /></p><p class="p5" style="background-color: #fff7d9; color: #3d06d7; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">// insert posted data</span></p><p class="p4" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">$</span><span class="s6" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">sql</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">=</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;"> </span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">'INSERT INTO userdata(uid, log)<span class="Apple-converted-space"> </span></span></p><p class="p4" style="background-color: #fff7d9; color: #b02117; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>VALUES (:uid, :log)'</span><span class="s2" style="color: black; font-variant-ligatures: no-common-ligatures;">;</span></p><p class="p6" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">$</span><span class="s6" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">stmt</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">=</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">$</span><span class="s6" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">conn</span><span class="s7" style="color: #2aae19; font-variant-ligatures: no-common-ligatures;">-></span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">prepare</span><span class="s4" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">(</span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">$</span><span class="s6" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">sql</span><span class="s4" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">)</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">;</span></p><p class="p6" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">$</span><span class="s6" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">stmt</span><span class="s7" style="color: #2aae19; font-variant-ligatures: no-common-ligatures;">-></span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">execute</span><span class="s4" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">(</span><span class="s7" style="color: #2aae19; font-variant-ligatures: no-common-ligatures;">array</span><span class="s4" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">(</span><span class="s5" style="color: #b02117; font-variant-ligatures: no-common-ligatures;">':uid'</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">=></span><span class="s1" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">$</span><span class="s6" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">uid</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">, </span><span class="s5" style="color: #b02117; font-variant-ligatures: no-common-ligatures;">':log'</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">=></span><span class="s1" style="font-variant-ligatures: no-common-ligatures;"> </span><span class="s3" style="color: #bc6119; font-variant-ligatures: no-common-ligatures;">$</span><span class="s6" style="color: #29a9b6; font-variant-ligatures: no-common-ligatures;">log</span><span class="s4" style="color: #c40ec4; font-variant-ligatures: no-common-ligatures;">))</span><span class="s1" style="font-variant-ligatures: no-common-ligatures;">;</span></p><p class="p1" style="background-color: #fff7d9; color: #c40ec4; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">?></span></p><p style="text-align: justify;">以上の比較的単純なコードで,ユーザ行動を記録できる.次のスクリーンショットは,記録の例である.左からID,ユーザID,アクセスログが記録されている状況を確認できよう.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhugDkjK4HnwgBwqDvhibIYQfA0CByJBsaeG8ijk8QNgdMp2zvCO1PqYjDp0x8n9v5TYGqgrqHOrNKOkSjoH8SyrHIEJ5JpcRIk_8nJwCTGO0_oeFo3YGjsM3q5dyRDy4XeeFdA24jxdSzxAgWZCP13QzwPv2QhHdQVkBL809a1437iZLnDVKkoHJDD__s/s2004/fig3.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="796" data-original-width="2004" height="254" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhugDkjK4HnwgBwqDvhibIYQfA0CByJBsaeG8ijk8QNgdMp2zvCO1PqYjDp0x8n9v5TYGqgrqHOrNKOkSjoH8SyrHIEJ5JpcRIk_8nJwCTGO0_oeFo3YGjsM3q5dyRDy4XeeFdA24jxdSzxAgWZCP13QzwPv2QhHdQVkBL809a1437iZLnDVKkoHJDD__s/w640-h254/fig3.png" width="640" /></a></div><div><p style="text-align: justify;">今回は単純な線形のストーリーであるため,全て同じ行動でタイムスタンプが違うだけだが,複雑な非線形ストーリーを用意すれば,全ての選択行動をデータベースに記録でき,その結果を分析すればユーザの判断行動もわかるという仕組みである.</p><h4 style="text-align: justify;">行動分析の例</h4><p style="text-align: justify;">最後に,行動分析の事例を紹介しておこう.いま卒論に取り組んでいる学生たちが用意したストーリーで得られた,ユーザの選択行動データである.テーマは「避難行動」,大地震に遭遇したときの避難状況において,ユーザはどういった判断をするのかという分析である.</p><p style="text-align: justify;">次の図は,アクセスログから解析した行動状況を示すものである.ノードは各passageを示し,ノードに付記されている数値は,そのpassageを通過したユーザの数を表す.また,ノードの色は滞在時間の平均値から計算されたものであり,寒色系は短い時間,暖色系は長い時間を表している.白は誰も通過しなかったノード,および,最後のノードである(最後のノードはそもそも滞在時間を計測できないため).</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhELg61OAh633zXZG-eSdNjrsPLiQP8A2HW-xJSTn0TANs-oGBrccyJbSQjS2jETv6nZ-aSyz_ASkvshGs6C1_Gig7fOBA1AsWz92NzzopUjYhSK0NZxviL3_ASKO6r8KowxcQxaHeNAadHgvKHW3eCV4JSMgTBiM48O5fNNiyNPBh3xjNtf8cwGa3jfEc/s2280/fig6.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1602" data-original-width="2280" height="450" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhELg61OAh633zXZG-eSdNjrsPLiQP8A2HW-xJSTn0TANs-oGBrccyJbSQjS2jETv6nZ-aSyz_ASkvshGs6C1_Gig7fOBA1AsWz92NzzopUjYhSK0NZxviL3_ASKO6r8KowxcQxaHeNAadHgvKHW3eCV4JSMgTBiM48O5fNNiyNPBh3xjNtf8cwGa3jfEc/w640-h450/fig6.png" width="640" /></a></div><p style="text-align: justify;">この図は,アクセスログと,Twineから出力される.tweeファイルに基づき,PythonとGraphvizを用いて作成した.アクセスログだけでなく.tweeファイルも必要な理由は,誰も通過しなかったノードはアクセスログから掘り起こせないからである(なお,その作業を行ったことにより,どこからも参照され得ない不適切なノードの存在も発覚した.そのような不適切なノードは分析作業の対象外として,先の図には表していない).</p><p style="text-align: justify;">この結果から,いくつか意義のある分析結果が得られている.ここでは,ひとつの興味深い事例を紹介しよう.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtWNIe6b7sjcCHTOW7Ey26cohxVeNespTz4ulS1Ot3U02XlasSpfsVPWtfD6ad9muYX0VtMtwx-kklDlwuYraUqFXf8CHAEG1lr4Fc7cN9ujQuG9C0DjJq_joAfUDgUrTlpfinmMPPuoWTwiWsncbrH5phrg_L1HhcJAjo7NPnC5EpGLg5VkZN6eht5Yc/s1642/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-12-30%209.36.55.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="780" data-original-width="1642" height="304" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtWNIe6b7sjcCHTOW7Ey26cohxVeNespTz4ulS1Ot3U02XlasSpfsVPWtfD6ad9muYX0VtMtwx-kklDlwuYraUqFXf8CHAEG1lr4Fc7cN9ujQuG9C0DjJq_joAfUDgUrTlpfinmMPPuoWTwiWsncbrH5phrg_L1HhcJAjo7NPnC5EpGLg5VkZN6eht5Yc/w640-h304/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-12-30%209.36.55.png" width="640" /></a></div><br /><p style="text-align: justify;">「道が分かれている」というpassageでは,ハザードマップを見たことがあるか否かの質問を投げかけている.「はい」を選んだグループと「いいえ」を選んだグループでは,明らかに,その後に投げかけられた「どの場所を通っていきますか?」という設問の回答に差が出ている.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqyWTKJutdmxhTiYjR5kcdnh9ecIRtw5peQOI43-frd4yqKTqo86mMhGzziWaha4NlITHJM1D5gsZlKt4FLCVuNIjcQi2den7xSmjOlPhnziyAo0qnN1_jzwzO91uQkMWNi3unpf81murMte1A6-acnpAQD53sSUlFmT2kv0VZHOxZQanbgLsbxycD5rk/s340/table.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="61" data-original-width="340" height="114" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqyWTKJutdmxhTiYjR5kcdnh9ecIRtw5peQOI43-frd4yqKTqo86mMhGzziWaha4NlITHJM1D5gsZlKt4FLCVuNIjcQi2den7xSmjOlPhnziyAo0qnN1_jzwzO91uQkMWNi3unpf81murMte1A6-acnpAQD53sSUlFmT2kv0VZHOxZQanbgLsbxycD5rk/w640-h114/table.png" width="640" /></a></div><p style="text-align: justify;">見ただけで,ハザードマップを見たことがあるグループは大通りを選ぶ傾向がある一方で,見たことがないグループはそうでもないことがわかる.実は,ハザードマップには大通りを選ぶべきであるヒントが記されていた.したがって,素直に解釈すればハザードマップを見たグループは大通りを選ぶ一択になるはずなのである.この結果に対してカイ二乗検定を実施したところ,1%水準で有意差が示された.</p></div>iiojunhttp://www.blogger.com/profile/09413532284181955183noreply@blogger.com0tag:blogger.com,1999:blog-1233736676889049363.post-1993647105501584222023-12-09T10:40:00.012+09:002023-12-09T13:43:03.375+09:00悪質タクシーにご用心<p style="text-align: justify;">ゆうべ,こんなことがあった.</p><p style="text-align: justify;">昨日はサイバーワールド研究会が三田のNECで開催されたため,夜はNEC芝倶楽部で懇親会をした.懇親会を早い時間から始めたので,お開きになったのは20時頃.そして昨夜は,たまたまMRIの元同僚の皆さんが赤坂で飲んでいるとかでそちらからも声がかかっており,三田から赤坂に移動することにした.</p><p style="text-align: justify;">三田で飲んでいたOさんと二人で赤坂に向かうことになったが,すでにかなり酔っ払っていて田町から赤坂までの最適な移動方法がすぐに思い浮かばない.大柄なOさんということもあって「面倒だからタクシーで行っちゃおう」と,OさんがタクシーGOというアプリで車を呼んだ(※ここ重要なので覚えといてね).</p><p style="text-align: justify;">しばらくして個人タクシーが一台やってきて,我々はそれに乗車,赤坂に向かった.なお,座席は私が奥で運転手の後ろ,Oさんは入り口側である.タクシーに乗るのはずいぶんと久しぶりで,(初乗り500円だけど,100円ずつ,けっこういい調子でメーターが上がっているなあ)などと酔った頭でボーッと見ていた.</p><p style="text-align: justify;">よく喋る運転手で,Oさんと運転手はずいぶんいろいろ話をしていた.タクシーやるなら個人タクシー,リスクもあるけど儲かる,なんて話.私はなんとなく億劫になっていて,それを聞くともなく,外を見たりメーターを見たりと所在無げにしていた.</p><p style="text-align: justify;">さて,赤坂に近づき「どのへんでお降りになります?」と尋ねられたので「TBSのあたりで」と答えた.赤坂の手前,溜池山王を過ぎて日枝神社の前を赤坂に曲がる交差点でちょうど赤になったので,「あ,いまちょうど赤信号だから」と,我々はそこで降りることにした.</p><p style="text-align: justify;">メーターを見たら2,400円.そんなもんかなと,財布から1,000円札を2枚出す.ポッケのなかの小銭を探していたら「あ,2,000円でいいですよ」と運転手.「えらいまあ気前のいい運転手だなあ,メーターがやたらと早く回るタクシーだから,それ差っ引いてそういうサービスなのかなあ」などと酔った頭で考えつつ,千円札2枚,2,000円を支払って車を降りた.</p><p style="text-align: justify;">さて,先に降りていたOさんと歩道で歩きながら,その件に付いて話し出すと……</p><p style="text-align: justify;">「え?お金払っちゃったの?タクシーGOで呼んでるから,2,500円,俺のクレジットカードから支払われるんだよ?」と,アプリの画面に大きく2,500円の文字が出ているのを見せるOさん.</p><p style="text-align: justify;">おいおい,さっきの2,000円,いったい何だったんだ?</p><p style="text-align: justify;">幸にして,ちょうど信号が変わった直後のタイミングだったので,左に曲がろうとしていたタクシーに追いついた.窓を叩いたら,運転手が窓を開けて「これでしょ」と2,000円を返してきた.</p><div style="text-align: justify;">_人人人人人人人人人人人人人人人人_<br />> 「これでしょ」じゃねーだろ! <<br /> ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^ ̄</div><p style="text-align: justify;">わかってて,しれっとカネ受け取りやがったな.</p><p style="text-align: justify;">アプリで呼んだので,素性はバレている.車のなかで「タクシーセンターに苦情を3回入れられると営業できなくなる」なんて話をしていた.さすがに苦情入れられるのが怖くなったかな?</p><p style="text-align: justify;">タクシーGOの仕組みを知らなかった私もうっかりしていたが,忘年会,新年会で酔っ払ってまともな判断力を失いそうになるこの季節,皆さんも.お気をつけあれ.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyO5OfEX61mq8-lUPKHwrIT07iMjqVUsjEtj_6ssnn3nNbXRScq3fdEY3Xove2s0p_ZWJtRwLxmiRKSn1huYb33jm1RdhiM19HW3TVjMwKh3Rr3TvSeUzxnN8J7jxsFGeJ7rZJXMGjta4uQLJcpLNfeC16ZhpyVHtHD9MgjxvwXSS8IZ5oCrSOzt9AOtc/s450/taxi_tomeru_man.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="394" data-original-width="450" height="560" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyO5OfEX61mq8-lUPKHwrIT07iMjqVUsjEtj_6ssnn3nNbXRScq3fdEY3Xove2s0p_ZWJtRwLxmiRKSn1huYb33jm1RdhiM19HW3TVjMwKh3Rr3TvSeUzxnN8J7jxsFGeJ7rZJXMGjta4uQLJcpLNfeC16ZhpyVHtHD9MgjxvwXSS8IZ5oCrSOzt9AOtc/w640-h560/taxi_tomeru_man.png" width="640" /></a></div><br />.<p></p><p style="text-align: justify;"><br /></p>iiojunhttp://www.blogger.com/profile/09413532284181955183noreply@blogger.com0tag:blogger.com,1999:blog-1233736676889049363.post-38421149376929624252023-12-02T14:57:00.029+09:002023-12-02T16:41:30.676+09:00名前なんて飾りです偉いひとには(以下略<p style="text-align: justify;">「飯尾」という名前,とくにありふれているわけでもなく,かといってさほど珍しいわけでもなく,なんとなく中途半端な位置付けにある.全国には1万人弱くらいの飯尾さんが居て,その順位は1,600番目くらいだそうだ.最近ではお笑い芸人のコンビ「ずん」の飯尾がTVで多少は活躍しているようで,それなりに認知度が上がってきたか?という感じ.</p><p style="text-align: justify;">1994年,三菱総研に入社したときに,1,000人に満たない規模の会社にもかかわらず別の飯尾さんがいらっしゃり,社員名簿に「飯尾(淳)」とカッコ書きで下の名前が付記された.学生時代には経験したことがなかった体験だったので,そのときは少し興奮した.なお,その後,同様の経験はなく,しばらくして先輩の飯尾さんは定年退社したため,カッコ書きは取れてしまった.今ではそもそも,社員名簿そのものが作られないご時世だ.</p><p style="text-align: justify;">そんな飯尾という名前に多少の愛着はないこともないが,困るのが海外に行くとしばしば Lio にされてしまうことである.子音が一切なく母音だけ3文字という名前は奇異にみえるらしく,最初のI(アイ)を小文字のl(エル)だと勝手に判断された結果,Lioにされてしまう.</p><p style="text-align: justify;">その件で初めて困ったのは,2007年にドイツに出張したときのこと.日本からの飛行機は,夕方,フランクフルトに着陸し,私は空港から電車を乗り継いで,その郊外にあるダルムシュタットという街に赴いた.翌日の予定として,その街にあるフラウンフォーファー研究所への訪問が目的だったが,とにかく,ダルムシュタットの街中にある予約してあったホテルに着いたのは,もう日も落ちて20時を超えた時間だった.</p><p style="text-align: justify;">小雨模様でうら寂しい状況であり,かつ,季節は初冬でたいへん寒い.駅からタクシーでホテルの前まで送ってもらい,ホテルを見つけたときには,とにかく落ち着けそうだと安堵した.しかし,その宿はずいぶんと小さな宿で,夜になっていたので通りに面した入り口はすでにシャッターが降りていた.せっかく到着したのに入れないじゃないか.</p><p style="text-align: justify;">とにかく部屋に入りたいとあたりを見回してみると,傍に2階へ上がる階段があり,その入り口にキーのディスペンサーが設置してあった.インストラクションを読むと「If you have a reservation, enter your surname as the password to deliver the key for your room.(予約がある方は,姓を部屋の鍵のパスワードとして入力してください)」とある.</p><p style="text-align: justify;">そこで何度も I, I, O と入力してみたのだが,キーは出てこない.このときはまだ Lio に間違えられた経験も少なく,まさか Lio として登録されているなどとは思いもよらなかった.</p><p style="text-align: justify;">予約がなくとも,部屋が空いていればクレジットカードで部屋を確保できるよとの指示があり,クレジットカードで部屋を押さえることができた.ひと安心して部屋に入ると,部屋の電話がすぐに鳴り「もうひと部屋必要になったのか?」と宿のマスターが尋ねてきた.</p><p style="text-align: justify;">そうではないと断り,その夜はそれで一件落着となった.Lio で登録されていたからキーが出てこなかったのだと知ったのは翌朝,食堂でマスターと話をして正確な状況を確認できたときである.</p><p style="text-align: justify;">このときの出張はドイツ,イタリア,フランス,イギリスと1週間で4<span face="Arial, Tahoma, Helvetica, FreeSans, sans-serif" style="background-color: #fff9ee; color: #222222; font-size: 15.4px;">箇</span>国を回る弾丸出張で,結局のところ,泊まった4箇所のホテルのうち3箇所で Lio と間違えられていたことが判明した.なんてこったい.ちなみに,最後に訪問したイギリスでは,いつ帰る?と入国審査官に尋ねられ,「tomorrow(明日)」と答えたら,「ワーカホリックの日本人よ,もっとグレートブリテン訪問を楽しみなさい,次に来るときには絶対に1週間以上滞在すること!」と叱られた.余計なお世話じゃ.</p><p style="text-align: justify;">なお,JALやらANAやら,日系の航空会社に乗ると「イトー」様と呼ばれることが頻繁にある.彼ら彼女らは Iio ではなく Ito に見慣れているからだ.「伊藤様,いつもご利用ありがとうございます」と何度言われたことか.こちらもすでに慣れっこであり,心はすでに伊藤淳である.なお,大学時代に同じ学科で学んだ同級生に伊藤淳史という友人がいる.彼の名は「いとうあつし」.同姓同名である俳優の伊藤淳史は我が家の近くに住んでいたはずで,彼のご子息がうちの息子と同級生だか一つ下だったか,というのは完全に余計な話.</p><p style="text-align: justify;">IT業界には(もうすでにお亡くなりになっているが)itojun氏という有名な方がいて,Googleなど,iiojun でエゴサーチすると「もしかして itojun」などと言ってくる.全く,失礼千万である.名前なんて飾りだとはわかっていても,これはちょいとばかり酷くない?</p><p style="text-align: justify;">さて,だいぶ話が脱線してしまったので,元の話に戻そう.今回参加した国際会議もネームプレートには Lio と記されていた.こちらも逆手にとって「外国の皆さんからするとヘンな名前だってことは知ってるから,驚かない.Junって呼んでね」と自己紹介のネタにする.全国の飯尾さんにおかれましては,国際的な自己紹介に使えるネタですよ?</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCpUOON1ivSFTzvV2FMJrUaXNEvAsedILgTmoZ6S6vKbCtJKZ-UbQhC-B2sr5mA2jOs56WwpGQnk8wjIaVEDq1ZoP1ZxK7JYgMh1IgUpuxfpNVmUbtdFrnask4XXhyphenhyphenkRiEvySPCqKot3c9ah05x6UmQmsw-rai_fXWU1-8SwY4OqPcWa08eIjq8vipThY/s960/406227739_10161684435279769_992795331332205660_n.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="720" data-original-width="960" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCpUOON1ivSFTzvV2FMJrUaXNEvAsedILgTmoZ6S6vKbCtJKZ-UbQhC-B2sr5mA2jOs56WwpGQnk8wjIaVEDq1ZoP1ZxK7JYgMh1IgUpuxfpNVmUbtdFrnask4XXhyphenhyphenkRiEvySPCqKot3c9ah05x6UmQmsw-rai_fXWU1-8SwY4OqPcWa08eIjq8vipThY/w640-h480/406227739_10161684435279769_992795331332205660_n.jpg" width="640" /></a></div><p style="text-align: justify;">最後に,「脚なんて飾りです,偉い人には……」という某アニメの有名なセリフを借りて,名前なんて飾りにすぎないとあらためて主張したい.やれハシゴ高だツチ吉だとこだわる人をたまに見かけるが,中身で勝負せいと言うのはお節介か.</p><p style="text-align: justify;">ところで,うちに「昔の漢字コードだと対応する字がないのではてなマークにされちゃうんです.だからカタカナ表記にしています」という学生が一人いる.それはさすがに可哀想すぎる.聞けば,成績証明書の発行システムだかなんだかが対応していないらしい.Unicodeだと対応できているようなので,古いシステムを使っている組織は早いとこ新しいシステムにリプレイスしてあげてほしい.</p>iiojunhttp://www.blogger.com/profile/09413532284181955183noreply@blogger.com0tag:blogger.com,1999:blog-1233736676889049363.post-20982161090870809932023-11-29T07:52:00.007+09:002023-11-29T09:40:42.627+09:002023冬季HCD研究発表会振り返り<p style="text-align: justify;">2023年度冬季HCD研究発表会が11月25日,鹿児島女子短期大学にて開催された.かなり昔に札幌でHCD研究発表会が開催されたことがあるとは聞くものの,少なくとも私が関与するようになってからは,初めての地方開催である.今回の開催にあたり,ローカルのマネジメントに尽力くださった近藤先生とサポートくださった皆様方には感謝を申し上げたい.</p><p style="text-align: justify;">今回のHCD研究発表会は,鹿児島での地方開催というだけでなく,東京の芝浦工科大学豊洲キャンパスをサテライト会場とした二会場開催という点でもきわめて挑戦的な開催であった.コロナ禍以降,現地参加とオンライン参加を許容するハイブリッド開催で実施していた本研究発表会ではあるが,今回は地方開催ということもあり,東京は豊洲にサテライト会場を設置して二元中継を行う新しい試みに挑戦した.</p><p style="text-align: justify;">しかも,サテライト会場からの口頭発表だけでなく,ポスターセッションを鹿児島会場と豊洲会場の二ヶ所で行うという,あまり聞いたことのない斬新な試みにも挑んだ.ポスター発表を2会場で行う点に関しては,HCD研究発表会名物?の<a href="https://iio-lab.blogspot.com/2023/06/poster-session-reporting-team.html" rel="nofollow" target="_blank">「ポスター発表中継隊」</a>が大活躍してくれた.これもICT進化の恩恵であろう.</p><p style="text-align: justify;">さらには「実践発表」カテゴリを設けたことにより,発表数が例年になく増えた(口頭発表とポスター発表を合わせて28件というのは例年の1.5倍相当である).実践発表の是非については本稿では省略するが,気軽に発表できる機会を提供できた点は,自画自賛ながら,評価に値するのではないかと考える.そのため,口頭発表の件数も20件となり,1日に実施するにはギリギリのスケジュールとなった.</p><p style="text-align: justify;">シングルトラックで実施するにはほぼ限界の発表件数のため,今後は,マルチトラックにして対応せざるを得ないかもしれない.自作の研究会マネジメントシステムには,その含みを持たせてある.研究会規模の拡大がいよいよ現実味を帯びてきた.今回の開催がHCD研究発表会をさらに発展させるための試金石となっている状況をひしひしと感じる.これからの発展が楽しみである.</p><p style="text-align: justify;">なお,HCD研究発表会のウリの一つに,<a href="https://iio-lab.blogspot.com/2021/06/you-will-have-an-excellent-opportunity-if-you-participate-in-and-give-your-talk-at-the-HCD-research-meeting.html" rel="nofollow" target="_blank">発表に対するコメントを発表者にフィードバックする</a>という特典がある.研究会に参加しているHCD-Netの理事と評議委員には,発表の評価と(できるだけ前向きな)コメントの記載をお願いしている.</p><p style="text-align: justify;">そして,これも自画自賛になるものの,自作のシステムにより発表の評価とコメントをリアルタイムで集計するしくみが出来上がっている.集計されたコメントは,翌日にメールで発表者にフィードバックされる(この作業はいまのところ私が手作業で実施しているが,これもシステム化して自動でメールを送れるようにしたいところである).これは参加者におおむね好評で,これも発表者を増やすための一つのアイデアとして効果があるだろう.</p><p style="text-align: justify;">いずれにしても,今後のHCD研究発表会のあり方として,春季冬季のいずれかは東京開催,そして他方は地方開催というルーチンを確立できればと画策している.そのためには,地方の拠点を確固たるものとせねばならない.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5yzkkYc4R0snL4s23n2Lap4f68OfZOMESxBnIyACnW36EjvSDgpUZQeH44wp1zpQa3SlfRds26Zqd7EJlpNAVBt08pQuNJkAVFiV3PW6F7y_11AsDfH43NyH5Tpxb0ZLaMGm33ZV1_wS7_1uVOgA2nUE2rWe3_lNmbjYuyQ_6ucjIeU5TGcO7y4sIrpI/s4032/IMG_1929.HEIC" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="3024" data-original-width="4032" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5yzkkYc4R0snL4s23n2Lap4f68OfZOMESxBnIyACnW36EjvSDgpUZQeH44wp1zpQa3SlfRds26Zqd7EJlpNAVBt08pQuNJkAVFiV3PW6F7y_11AsDfH43NyH5Tpxb0ZLaMGm33ZV1_wS7_1uVOgA2nUE2rWe3_lNmbjYuyQ_6ucjIeU5TGcO7y4sIrpI/w640-h480/IMG_1929.HEIC" width="640" /></a></div>iiojunhttp://www.blogger.com/profile/09413532284181955183noreply@blogger.com0tag:blogger.com,1999:blog-1233736676889049363.post-51116779980164005392023-11-23T16:25:00.005+09:002023-11-24T07:14:31.440+09:00オンライン学習状況を可視化すると何が分かるか<p style="text-align: justify;">IT系の某オンライン学習サイトの模擬試験受験状況データをいただいて,その分析を進めている.なかなか興味深い結果がみえてきているので,その一部を紹介したい.なお,このオンライン学習サイトは,無料で模擬試験を受けられるもの.その模擬試験は40問ひとセットで,40問の問題はランダムに出題される.</p><p style="text-align: justify;">まず,どれだけのユーザがどのくらい模擬試験にチャレンジしているか?というデータを集計してみた.1回の試験にIDが振られているので,それらの数をユーザごとに集計する.その結果,最大で593回も受験しているユーザがいた(なお,次点が403回,その次が121回で,それ以下は100回以下である).</p><p style="text-align: justify;">ほとんどが数回から十数回のチャレンジであるため,25回以下に限定してヒストグラムを描いてみた.その結果が次の図である.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Op1_1eowHAy98CZ88or1IB6P0LQe7z_WMzyddn7OwCz1PMCaMP5jLkdR-RilyeiWFl6kWVCQwV-WPmbQWgxlCFNovC8rQYaHgEj0n49eMVatc_XY8wHjr4Y1U33c1bQIBPCTy0ark8ILSxK_rYlK2M49Qr30Dq4XSB7JMWsQTtBhOcf40ZJQnl7uuNw/s1114/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-23%2016.13.37.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="816" data-original-width="1114" height="468" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Op1_1eowHAy98CZ88or1IB6P0LQe7z_WMzyddn7OwCz1PMCaMP5jLkdR-RilyeiWFl6kWVCQwV-WPmbQWgxlCFNovC8rQYaHgEj0n49eMVatc_XY8wHjr4Y1U33c1bQIBPCTy0ark8ILSxK_rYlK2M49Qr30Dq4XSB7JMWsQTtBhOcf40ZJQnl7uuNw/w640-h468/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-23%2016.13.37.png" width="640" /></a></div><p style="text-align: justify;">1回しか挑戦していないユーザが多いのは予想通りで,指数関数的な分布を描くであろうという状況もほぼ予想したとおりである.特異的な値がみられず,比較的きれいなカーブを描いているのは,回数に注意するユーザはほぼいないことを示唆していると考えられる.</p><p style="text-align: justify;">ところで,40個の問題が出される模擬試験だが,途中で諦めてしまうユーザも多いはずだと考えた.そこで,何問まで解答したか?について集計してみた.</p><p style="text-align: justify;">ところがこれが意外なことに,ほとんどのユーザが40問,最後まで解答している.皆さん真面目だなあ.</p><p style="text-align: justify;">しかし,それでも途中で諦めてしまうユーザも少なからずいる.そこで,何問まで解答して,そのあと諦めてしまったのかを,39問の解答までに限って集計し,ヒストグラムを描いてみた.次の図をみていただきたい.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7CrtdCYPBEkfKqWG2AXlwb47GWh1fJAY2ne0LvvOChmkwEB1KywEypGXKqhNEMWzGpc54cQpc851PdgDNFsaLG1CSRUjpSNiFlREPn4kxg6YVtslkMDLg9J_Jt2EwTRWFt1-fWBybBkxgickqShP-eQqKUZ_b71OZ0h92dAvZN1yLybuDtmPNTGyeN-0/s1092/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-23%2015.36.08.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="810" data-original-width="1092" height="474" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7CrtdCYPBEkfKqWG2AXlwb47GWh1fJAY2ne0LvvOChmkwEB1KywEypGXKqhNEMWzGpc54cQpc851PdgDNFsaLG1CSRUjpSNiFlREPn4kxg6YVtslkMDLg9J_Jt2EwTRWFt1-fWBybBkxgickqShP-eQqKUZ_b71OZ0h92dAvZN1yLybuDtmPNTGyeN-0/w640-h474/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-11-23%2015.36.08.png" width="640" /></a></div><p style="text-align: justify;">こちらも,ところどころ特異点があることと,35問以降を除くと,指数関数で近似できるかできないか微妙な感じではあるが緩やかに減少するカーブを描いている.</p><p style="text-align: justify;">しかし,先のグラフと異なるのは,5, 10, 20といった,明らかに特異点と考えられる点が観察できることである.これは,5問やってもういいや,10問やったからやめよう,20問まで頑張った……というように,キリの良い数でリタイアしている状況を表している.</p><p style="text-align: justify;">35問から徐々に増えていることについては次のように考えられよう.すなわち,そこで諦めたというよりは,それ以降,答えがわからないのでスキップした,という状況が一定数あるとの示唆である.とくに39問が極端に多くなっている理由は,39問は解答したが40問目がわからなかった,という状況であろう.</p><p style="text-align: justify;">(追記)学生から,タイムアップの影響じゃないですか?との指摘を受けた.たしかに,制限時間があるため,最後のほうは制限時間以内に解けなかったためにスキップされていると考えるほうが自然かもしれない.</p>iiojunhttp://www.blogger.com/profile/09413532284181955183noreply@blogger.com0tag:blogger.com,1999:blog-1233736676889049363.post-47191498124865201682023-11-18T13:29:00.009+09:002023-11-18T14:11:14.452+09:00すっぽんパワー<p>西麻布から六本木にかけて散歩した.たまの散歩はいろいろと面白いものを発見するので楽しい.</p><p>いきなりのスッポンスープ,高額自販機,ひと缶1,000円なりィの缶スープである.(缶飲料としては)破格のお値段.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTSi3EuAuSw82b-TdVpaa5n_DGAW7lcX0xKkDCPYCW3tQd2typZNf8y6RsE_8xgMJ9iOlTk4f1n_W32bvA0gwFILMydokzLrqNkLWdeOkNE_NYKKhCl-Gq-4tJfLSgPL15gUufwv7tDvYYTkPqJPfynMPQernScIwAOPCzVhz0W3-EmbwbUVuFxehOUeU/s960/402583757_10161667832794769_2959405546323732975_n.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="720" data-original-width="960" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTSi3EuAuSw82b-TdVpaa5n_DGAW7lcX0xKkDCPYCW3tQd2typZNf8y6RsE_8xgMJ9iOlTk4f1n_W32bvA0gwFILMydokzLrqNkLWdeOkNE_NYKKhCl-Gq-4tJfLSgPL15gUufwv7tDvYYTkPqJPfynMPQernScIwAOPCzVhz0W3-EmbwbUVuFxehOUeU/w640-h480/402583757_10161667832794769_2959405546323732975_n.jpg" width="640" /></a></div><p style="text-align: justify;">遠目にみたら,自販機の横に「日々是好日 だしのある風景」とあった.</p><div><div style="text-align: center;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY8iC_UhmBg3ar0FT2Jdq6N3GztxP7AjBd8ThAHS1nLU4sZO8lLF7RAW9_GuKhHEWSMUyrJ6cxi4xPk1qjgvj4ADqjVIbhd0y1D8enuY7Z6a6WFP_rSNEDyGARuBw8GlqanuEnAtSsfCvfHE9h5ta57qWKoIhpCzWn5iRPNjk0gxYzuDrHKKiOK5YfxJ8/s960/402897248_10161667832839769_9182243151182968402_n.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="960" data-original-width="720" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY8iC_UhmBg3ar0FT2Jdq6N3GztxP7AjBd8ThAHS1nLU4sZO8lLF7RAW9_GuKhHEWSMUyrJ6cxi4xPk1qjgvj4ADqjVIbhd0y1D8enuY7Z6a6WFP_rSNEDyGARuBw8GlqanuEnAtSsfCvfHE9h5ta57qWKoIhpCzWn5iRPNjk0gxYzuDrHKKiOK5YfxJ8/w480-h640/402897248_10161667832839769_9182243151182968402_n.jpg" width="480" /></a></div></div><p style="text-align: justify;">(ああ,最近よく見るだしの自動販売機だなあ)と思いつつ近づいていくと,まさかのスッポンスープである.スッポンスープにもノーマルとプレミアム版,2種類あるのが面白い.廉価版はひと缶760円と,プレミアム版に比べるとリーズナブル.いうて滅多に見られない価格設定ではあるが.</p></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGTaDLbX8bkHsnZSC8dPH0F1flFL15-_YdqpLGz7NVPftRQIFh067qIzKvmtBAvM18hhYOPsryzrKbLZ2A6uR2Kk0TOTC-6fx6SYJj2Xqxn8XhEFbXkV5YZtRF94ER2JLc4xTxEiFtvNcPmoPBpNMBWVSFOyWZN71WDddpyQ3FC6ozTQ3HknpPCgpZt7E/s960/402162407_10161667832884769_1451594656852539052_n.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="720" data-original-width="960" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGTaDLbX8bkHsnZSC8dPH0F1flFL15-_YdqpLGz7NVPftRQIFh067qIzKvmtBAvM18hhYOPsryzrKbLZ2A6uR2Kk0TOTC-6fx6SYJj2Xqxn8XhEFbXkV5YZtRF94ER2JLc4xTxEiFtvNcPmoPBpNMBWVSFOyWZN71WDddpyQ3FC6ozTQ3HknpPCgpZt7E/w640-h480/402162407_10161667832884769_1451594656852539052_n.jpg" width="640" /></a></div><p style="clear: both; text-align: justify;"><span style="text-align: left;">このスッポンスープ缶,いったいどんな人が買うんだろう?</span></p><p style="clear: both; text-align: justify;"><span style="text-align: left;">場所柄,「これからいっちょ決めてやんべ!」とハッスルハッスルなオッサンが,1,000円札をズバッと投入,ガコンッと出てきたスッポン缶を腰に手を当ててグイッと飲み干すとか.そんでもって「オレ様の波動砲,エネルギー充填120パーセントッ!」なんて下品な冗談飛ばしながらガハハと笑いつつ,夜の六本木に消えていく…… なんて光景が目に浮かんだが,さすがに昭和な風景すぎますか?</span></p>iiojunhttp://www.blogger.com/profile/09413532284181955183noreply@blogger.com0tag:blogger.com,1999:blog-1233736676889049363.post-26392767291410507912023-11-10T12:33:00.007+09:002023-11-10T14:32:03.623+09:00横浜ぶらり旅<p style="text-align: justify;">横浜にオフィスを構える某社を訪れて打合せする約束があった.午後イチの訪問予定だったので,少し早めに行って中華街で腹ごしらえを目論んだ.目指すは横浜中華街,香港路は安記のお粥である.</p><p style="text-align: justify;">久しく訪れていなかった中華街,前回はいつ来たろうか.何年も前なことは間違いがない.みなとみらい線の元町中華街駅から歩き,東門から入る.道路がきれいになっていて,ずいぶんと垢抜けた印象を受けた.昼食にはいささか早い時間帯だったものの,焼き小籠包や大ぶりの肉まんなど,今でもあちこちで行列ができている.</p><p style="text-align: justify;">香港路……,香港路……,中華街のメインストリートを西に向かって歩いていけば,左側に隠れるような入り口があるはず.少し歩くと……,見ぃつけた.</p><p style="text-align: justify;">お粥の名店,安記は香港路に入ってすぐのところにある.なお,この路地には他にも海員閣という老舗の名店があるが,最近はお店の事情で営業をだいぶ縮小しているらしい.営業しているうちに,また行っておいたほうがよいかも.</p><p style="text-align: justify;">さて,今日は安記である.もうすっかりお粥の口になっている.扉を開けて,店に入るなり,おばちゃんが「今の時間はお粥だけだけど」と告げてくる.ばっち来いやー!こちらはそのつもりで来ているのだよ.</p><p style="text-align: justify;">メニューを見ずに,一言,「とりのお粥」と注文.880円.昔はもっと安かったような気がするが,このご時世だもの,仕方ないか.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEjA2tPWGKFzCaZH6H51slFGR6ca5zLCnVUaEYcVLQkkHQe3AN3VF7w8BKkoBW6vTUUYknhsdJ8E10toy7MhOaCw7Hdoi9CipoZgEs9zYr_sRBCZU762rFsLLO88r8c2vhwHyawMCNBsEEQ3wNEBevOmXV4Z_s9Q7_qmepJFWwJlf7kcKneomrNBQsnMQ/s4032/IMG_1829.HEIC" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="3024" data-original-width="4032" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEjA2tPWGKFzCaZH6H51slFGR6ca5zLCnVUaEYcVLQkkHQe3AN3VF7w8BKkoBW6vTUUYknhsdJ8E10toy7MhOaCw7Hdoi9CipoZgEs9zYr_sRBCZU762rFsLLO88r8c2vhwHyawMCNBsEEQ3wNEBevOmXV4Z_s9Q7_qmepJFWwJlf7kcKneomrNBQsnMQ/w640-h480/IMG_1829.HEIC" width="640" /></a></div><p style="text-align: justify;">待つことしばし,あっつあっつのお粥が運ばれてきた.これこれ.シンプルながら,抜群に旨い中華粥である.</p><p style="text-align: justify;">レンゲで掬いながら,ふうふうして食べる.美味しいからといって,慌てて口に入れてはいけない.ヤケドする.</p><p style="text-align: justify;">もう,一口一口が幸せを感じる旨さ.食べ進むと下のほうから鶏肉片たちがひょっこり顔を出す.これも旨い.トッピングの油条スライスもいい感じにふやけて旨い.途中で薬味を投入,それも旨い.気付けばあっという間に食べ終わっていた.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWI8MDq_XQe5MgYHVUYF6hLok6ZhCHOR8zbMfIOfttZWcIiNfbXpV0rKtUfmR308fcUaDGay4mxG0aQQhozTxTlK7ZhheRfa0ET8m0n-mL2RGVhHNfO31MnyWp5wH_XkKSUKM002qCE5A6XF_n3NPayN-kdZaX61g0Yd11kI3sLkp6IMftJ6mDCMiRMo0/s4032/IMG_1830.HEIC" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="3024" data-original-width="4032" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWI8MDq_XQe5MgYHVUYF6hLok6ZhCHOR8zbMfIOfttZWcIiNfbXpV0rKtUfmR308fcUaDGay4mxG0aQQhozTxTlK7ZhheRfa0ET8m0n-mL2RGVhHNfO31MnyWp5wH_XkKSUKM002qCE5A6XF_n3NPayN-kdZaX61g0Yd11kI3sLkp6IMftJ6mDCMiRMo0/w640-h480/IMG_1830.HEIC" width="640" /></a></div><p style="text-align: justify;">修学旅行のシーズンなのか,中華街は中高生で溢れていた.あいにくの雨模様だったが,久しぶりの中華街,安記のお粥で大満足である.</p>iiojunhttp://www.blogger.com/profile/09413532284181955183noreply@blogger.com0tag:blogger.com,1999:blog-1233736676889049363.post-62569842724253780692023-11-07T15:14:00.014+09:002023-11-08T09:56:47.042+09:00貴重な経験をした<p style="text-align: justify;">エレベータの中に閉じ込められるという経験をした.人生で初めての経験である.ちょっとドキドキした.</p><p style="text-align: justify;">それは,お昼休みに会議が予定されていて,早めの昼食に出た帰りのこと.自室に戻ろうと,エレベータに乗り13Fのボタンを押した.カゴに乗っていたのは自分ひとり.いつもどおり順調に階の表示が上がっていき,13になったところで,ガコンッと大きく揺れて停止した.</p><p style="text-align: justify;">(ん?地震?)</p><p style="text-align: justify;">最初に考えたのは,地震が来たかな?というものである.地震を検知して止まったのかな,と考えた.しかし,揺れは来ない.地震ではないらしい.</p><p style="text-align: justify;">非常停止を検知したらしいエレベータから,「非常通話ボタンを押して,オペレータとお話ください」と音声案内が流れた.非常ボタンを押すなんて,これも初めての経験である.</p><p style="text-align: justify;">ボタンを押す.すると,かなり大きな音でプーとブザー音が鳴り響く……ちょっと躊躇するレベル.まあでも,どうせ自分ひとりしかいないし,押し続けないとなあ.</p><p style="text-align: justify;">頑張ってずっと押し続けていると,オペレータ氏と話が通じた.</p><p style="text-align: justify;">オペレータ(以下「オ」):「聞こえますかー」「聞こえますかー」</p><p style="text-align: justify;">私:「聞こえてますけど,こっちの声,聞こえますかー?」</p><p style="text-align: justify;">向こうの声は聞こえるが,こちらの声が届きづらいらしい.非常ボタンをプッププップと押してみたり,あれやこれや試してみたりしてなんとか意思疎通を試みたところ,大きな声で喋れば会話も通じることが分かった.</p><p style="text-align: justify;">オ:「いまどうなってますかー」</p><p style="text-align: justify;">私:「13Fに向かってたんですけど,13Fになったところで,ガコンッって大きな音がして,止まっちゃいました」</p><p style="text-align: justify;">オ:「開くボタン押してみてください」</p><p style="text-align: justify;">私:「押しましたー.開きませーん」</p><p style="text-align: justify;">オ:「そちら,どういう状況ですかー」</p><p style="text-align: justify;">私:「わたしひとりです」</p><p style="text-align: justify;">オ:「現場に連絡しますので,落ち着いて,お待ちくださいー」</p><p style="text-align: justify;">落ち着いてと言われても,(このまま落っこちたりしないだろうな?)って,やっぱり心配になる.けっこう大きな音で,ガッコンッっていってたし.</p><p style="text-align: justify;">そして,やはり気になったのはこの後の会議のことだ.ワーカホリックな私.幸にして電波が届くようだったので,事務室に電話する.「あ,飯尾ですけど……,エレベータに閉じ込められちゃいまして」間抜けなメッセージに,電話の向こうもびっくりしたのではなかろうか.</p><p style="text-align: justify;">ひと通り経緯と状況を電話で説明し,はてさてどうしたもんかなと考えあぐねていたら,再びインターホンからオペレータ氏の声が.</p><p style="text-align: justify;">オ:「いまから15分くらいで係員が向かいますのでー」</p><p style="text-align: justify;">え?15分も待たされるの?さっきからもう10分は経ってるよ?</p><p style="text-align: justify;">しばらくしたら,外から声がする.「おーい」ダメもとで声をかけてみると「大丈夫ですかー?」と呑気な呼びかけが扉越しに響いてきた.</p><p style="text-align: justify;">「閉じ込められちゃいましたー」</p><p style="text-align: justify;">こちらも負けずに間抜けな声で応答する.「もう少し待っててくださいねー」「待ちまーす」みたいな牧歌的なやり取り.しかし客観的にみたら,閉じ込められてる私,これってけっこうピンチでは?</p><p style="text-align: justify;">閉じ込められてから20分くらい経っただろうか.「いま開けますね!」と,ようやく明るい希望の声が聞こえた.そして開けられるエレベータの扉から,パァアアア…… と広がる明るい光.いや,冗談じゃなくて.助けに来てくださった作業員の方には,たしかに後光が差していた.</p><p style="text-align: justify;">次の写真を見ていただきたい.扉が開いたときの状況である.惜しい.あと1メートル.</p><p style="text-align: left;"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxI4MHKYLbJMObaIzUodTRZYVfRK7H_IdwRXzsvJ9mwk9J1GVtbgoyWM8ZAbdrRBC_Z_YXu1mf4t2d9wrRj-SN549A4DfKG5dlLrAEHxl3LVsrwRwzGxStOfxLn_GAVnhsx2p1vLPp8TDRqeQDPHcUnJmHMlnRA1Sd8KAATDWOWKO2JKlVuXkRmQj2Zsk/s4032/IMG_1818.HEIC" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="4032" data-original-width="3024" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxI4MHKYLbJMObaIzUodTRZYVfRK7H_IdwRXzsvJ9mwk9J1GVtbgoyWM8ZAbdrRBC_Z_YXu1mf4t2d9wrRj-SN549A4DfKG5dlLrAEHxl3LVsrwRwzGxStOfxLn_GAVnhsx2p1vLPp8TDRqeQDPHcUnJmHMlnRA1Sd8KAATDWOWKO2JKlVuXkRmQj2Zsk/w480-h640/IMG_1818.HEIC" width="480" /></a></div><p style="text-align: justify;">助けに来てくれた方が「よじ登れますか?」と私に問う.何を仰いますやら,よじ登ってみますとも.まあ,1メートルくらいの段差,造作もない.よじ登ったときの衝撃でガコンとカゴが落ちて,胴体から真っ二つ……なんてことになったらヤダなあ,みたいな縁起でもないことは,考えないようにして,とにかく脱出成功.助かった.</p><p style="text-align: justify;">以上が本日の顛末である.振り返ってみれば貴重な経験をしたといえるが,も一度体験したい?と問われればそれはもちろんNoだ.</p><p></p>iiojunhttp://www.blogger.com/profile/09413532284181955183noreply@blogger.com0tag:blogger.com,1999:blog-1233736676889049363.post-49084835437302575222023-11-04T12:20:00.005+09:002023-11-05T10:57:22.484+09:00ハーブの想い出<p style="text-align: justify;">ハーブが好きだ.東南アジア諸国,とくにベトナムで食べられる,あの得体の知れない謎の薬草に魅せられている.しかし,日本で生活しているとあの謎の草を食べる機会にほとんど恵まれないのが残念でならない.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR_2ct-muom4qGLmU0BywRDYSVrWzbdNxcGar4TVZ8TtalwjlLskzEJ_MKB8JdESK6CxilEOiMawpGiMAwWHoEeUR-lFQSHJnMmZjoI6E8Z2L-p-ar7S4YnptzktOpyZ2MFtvO-G3dlFjlWVp6ZFrqWNkal3XgXFLtEPNTJD48uaA7MsyjHIlFlXFytS8/s4032/IMG_1761.jpeg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="3024" data-original-width="4032" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR_2ct-muom4qGLmU0BywRDYSVrWzbdNxcGar4TVZ8TtalwjlLskzEJ_MKB8JdESK6CxilEOiMawpGiMAwWHoEeUR-lFQSHJnMmZjoI6E8Z2L-p-ar7S4YnptzktOpyZ2MFtvO-G3dlFjlWVp6ZFrqWNkal3XgXFLtEPNTJD48uaA7MsyjHIlFlXFytS8/w640-h480/IMG_1761.jpeg" width="640" /></a></div><p style="text-align: justify;">タイの中南部,ナコーンシンタンマラートという地方都市に出張した.いろいろ案内してくれた現地の担当者が「ここまで来てカノムジーンを食べないでは帰させない」と,カノムジーンの名店に連れてきてくれた.</p><p style="text-align: justify;">カノムジーンとは,米を原料とする素麺のような麺に,ピクルスや豆などの付け合わせや鶏の揚げたものを添えて食べる料理である.単なる素麺ではなく,その上から何種類ものカレーソースから好みのものを選んでかける.辛いものからマイルドなものまでたくさんの種類を選べる.シーフードあり,チキンあり,どれも美味しい.お好みでミックスしても構わない.さらに,写真のようなたくさんの種類の葉っぱを好きなだけちぎり,最後に全部を混ぜて食べる.</p><p style="text-align: justify;">雰囲気としてはベトナムのブンボーフエに似ている.ただし,こちらのほうがバラエティに富んでいて楽しい.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiDhWmTpPtviAPxdUufnICx_N1zEe8IuKQSQ0wihQKysVo1k6OSXGZbf_r-I9ddkDlyqjWkya9tdFsRCCRAK2SpgnJD-h_lU-Bhz7vUHBrZbi73ObawsGMQFCwS0Lu0XKYP0EGIxL_8Q2UvSKyi3TZZeZi_U8JWzjcmpumAwTs_30aLFjx_PNK1J89-Cg/s4032/IMG_1766.jpeg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="3024" data-original-width="4032" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiDhWmTpPtviAPxdUufnICx_N1zEe8IuKQSQ0wihQKysVo1k6OSXGZbf_r-I9ddkDlyqjWkya9tdFsRCCRAK2SpgnJD-h_lU-Bhz7vUHBrZbi73ObawsGMQFCwS0Lu0XKYP0EGIxL_8Q2UvSKyi3TZZeZi_U8JWzjcmpumAwTs_30aLFjx_PNK1J89-Cg/w640-h480/IMG_1766.jpeg" width="640" /></a></div><p style="text-align: justify;">食べ方としてはこんな感じ.ただしこれは混ぜ混ぜする前の写真である.</p><h3 style="text-align: justify;">ドライハーブとフレッシュハーブ</h3><p style="text-align: justify;">以前,ASEANの仕事に関わったことがあり,その際に,タイとベトナムから来ていた方々と話をした.曰く,「タイ料理はドライハーブを使い,ベトナム料理はフレッシュハーブを使うのだ」という.私はタイ料理もベトナム料理もどちらも好きだが,どちらがより好きか?と問われれば,草(ハーブ)だいすきという意味ではベトナム料理が優っているし,料理のバラエティからすればタイ料理も捨てがたいと感じていた.</p><p style="text-align: justify;">さらに,タイの東北部,イサーン地方の料理に好きなものが多く,フレッシュなハーブを多用するラープはタイ料理のなかでも大好きなもののひとつである.イサーン地方はラオスを挟んでベトナムにも近い.さもありなん……と,これまでは思っていた.</p><p style="text-align: justify;">ところが今回のカノムジーンである.ベトナムからは遠く離れたタイ中南部.ここでもこんなにフレッシュなハーブ使うんじゃん?</p><h3 style="text-align: justify;">葉っぱはどこから?</h3><p style="text-align: justify;">ところでこの草たち,いったいどこから持ってきているのだろう,という疑惑がむくむくと湧き上がる.</p><p style="text-align: justify;">今回連れて行ってもらったカノムジーンの店は郊外にあり,ど田舎の一軒家という風情の店だった.食卓はテラス席,といえば聞こえはよいが,庭に無造作に建てられた日除けの下,アウトドア席である.天気もよいので,これはこれで,なかなか気持ちのよい食事ができる.</p><p style="text-align: justify;">さて,草である.</p><p style="text-align: justify;">裏手に大きな鉢がいくつか転がっていたのだが,その鉢でいろいろな植物を育てている様子が窺えた.どうも,そこでこれらのハーブを栽培しているらしい.そこから収穫して持ってきているようにみえる.まあ,それはそれで全く構わないし,美味しいのだから問題ない.</p><p style="text-align: justify;">夏に学生たちをベトナムに連れて行ったときに,この草の由来が問題になった.連れて行った学生のひとりが,「そもそもどこから持ってきた草なのか怪しすぎて食べたくありません」と言うのだ.</p><p style="text-align: justify;">ホーチミン市の近代的な食堂である.タイの片田舎(といっては失礼だが)の郊外にある大自然に囲まれた店とは違う.それらの草はマーケットで買ってきた,「ちゃんとした」ものだろう.当該学生と一緒に市内のスーパーマーケットに行く機会があり,野菜売り場を覗いてみた.そこには多様なハーブがたくさん並んでいた.</p><p style="text-align: justify;">「どう?これで大丈夫と思った?」と聞いてみたが,やはり抵抗があるとか.まあ,人それぞれか.</p><h3 style="text-align: justify;">薬草だから大丈夫</h3><p style="text-align: justify;">話はいまから20年前,2003年に遡る.私が東南アジア関係の仕事に関わりはじめたころで,初めて東南アジアに出張したときのことだ.行き先はベトナム,よくある話で「水には気をつけろ.不衛生な水で洗っているから,生野菜は食べないほうがいい」などと脅かされていた.</p><p style="text-align: justify;">いまでは「そんなことなかろう」と笑って済ませる話だが,なにしろ右も左も分からなかった当時のこと,忠実に言いつけを守っていた.しかし,1週間ほど滞在した最終日に,案の定,腹を下してしまう.</p><p style="text-align: justify;">そのときに,現地駐在の長かった某社現地法人の支社長から「ハーブを食べなさい.これは薬草だから大丈夫」と,諭されたことを今でもはっきりと覚えている.</p><p style="text-align: justify;">おそらく冗談半分だったろうが,強く印象に残っている.その後,生野菜なんかよりもっと危ない食べ物を口にして腹を思いっきり下したこともあり,いろいろな体験をした結果,私も成長した.東南アジア各国のどこに行っても生野菜は平気で食べるし,ビールも氷を入れて飲む東南アジアのスタイルじゃないと飲んだ気がしない.</p>iiojunhttp://www.blogger.com/profile/09413532284181955183noreply@blogger.com0tag:blogger.com,1999:blog-1233736676889049363.post-19165124521523867472023-10-31T10:40:00.006+09:002023-10-31T10:51:26.764+09:00データサイエンス・アイデアコンテスト<p style="text-align: justify;">3大学(関西・中央・法政)共催 データサイエンス・アイデアコンテスト(協賛 マイナビ)の最終選考会に出場した4チームのうち,iDS飯尾ゼミから出場した2チームが特別賞を受賞しました.おめでとう!</p><p style="text-align: justify;">大学からのニュースリリースはこちら,<a href="https://www.chuo-u.ac.jp/aboutus/efforts/ai_and_ds/news/2023/10/68515/" rel="nofollow" target="_blank">「開催報告:3大学(関西・中央・法政)共催 データサイエンス・アイデアコンテスト(協賛 マイナビ)最終選考会」</a>です.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzjnEj7WyJuT8lAsWYPiwaFPzKHd2YHwJ_5hqqJCw2AudT69JrJKDzR6Z4si9DfPxVBvtDSUTOuZKL4FCRWwpcbnCzOH6NLIquklo2IwCAqbkoQYyOwj9BXa-7N1frmra-4HifMgoPm4TK0MwPmNdnRXV29B3ULP8D80hooHBCOiY8bfb-iKPsHsOVgkA/s1794/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-31%2010.29.03.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1166" data-original-width="1794" height="416" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzjnEj7WyJuT8lAsWYPiwaFPzKHd2YHwJ_5hqqJCw2AudT69JrJKDzR6Z4si9DfPxVBvtDSUTOuZKL4FCRWwpcbnCzOH6NLIquklo2IwCAqbkoQYyOwj9BXa-7N1frmra-4HifMgoPm4TK0MwPmNdnRXV29B3ULP8D80hooHBCOiY8bfb-iKPsHsOVgkA/w640-h416/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-31%2010.29.03.png" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBbQHLTuGtIAa6T1ekKNoJlIC_82HnFrw9sUbt7uKFCNK_vP-8wLSZ5eGOeOotN7MYKMHY2ieDEucolqoX4RhvG4g2gtAGxuwV2yozUgO6j_pBsPVPjtQ_5ObHTRArR3AW4xsp0EnvCDZTCe1IK-nHPD6yRAkr5c6PbusgTBR8WYUP-dE6sIscI7dGidE/s1798/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-31%2010.32.45.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1168" data-original-width="1798" height="416" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBbQHLTuGtIAa6T1ekKNoJlIC_82HnFrw9sUbt7uKFCNK_vP-8wLSZ5eGOeOotN7MYKMHY2ieDEucolqoX4RhvG4g2gtAGxuwV2yozUgO6j_pBsPVPjtQ_5ObHTRArR3AW4xsp0EnvCDZTCe1IK-nHPD6yRAkr5c6PbusgTBR8WYUP-dE6sIscI7dGidE/w640-h416/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-31%2010.32.45.png" width="640" /></a></div><p style="clear: both; text-align: justify;">最終選考に残らなかったチームも,頑張りました.惜しかった.次回は全員入賞を目指すぞ!</p><p style="text-align: justify;"></p>iiojunhttp://www.blogger.com/profile/09413532284181955183noreply@blogger.com0tag:blogger.com,1999:blog-1233736676889049363.post-52500767226017828732023-10-28T09:11:00.011+09:002023-10-28T09:19:13.622+09:00ビデオ授業の難しさ<p style="clear: both; text-align: justify;">RubyとRuby on Railsの基礎に関するオンライン授業を担当し3年目になる.全学部の希望者を対象としたビデオ授業,いわゆる,オンデマンド型オンライン授業という形式で実施している.この分野は進化が激しく,また,学生のレベルに合わせて内容を調整しながら進めているため,今年は3年目にして動画解説を撮影しなおしている.いちど動画を撮影してしまえばあとはラク……というわけにはいかないので,なかなか大変である.</p><p style="clear: both; text-align: justify;">ビデオ授業のため,教室での教員と学生のインタラクションが実現できない.そのため,LMSの掲示板を利用して質問を受け付けるようにしている.なにしろ100人を超える受講者がいるため,質問も頻繁に投稿される.そのため,質問対応にTAの手を借りているが,私もちょいちょい掲示板を覗いて回答するように心がけている.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjjsoIIZQIQ5gZ1uLs56KbAAZddm4s-ui52HB9bctdvom0SErGVZlMpq8NlbragUyGKwrO5maU-5qOIpihTYP35IDFqs_v3cNZqoyPC2Y0nfanCBRqHUXCKBbmZiHYw1hAllkZWYQab1H88Mf5O7e7vzZ3L881EpBQT7g7VpAVsDkyLBnM7_JhlVeSJBU/s1180/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-28%208.46.50.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="816" data-original-width="1180" height="442" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjjsoIIZQIQ5gZ1uLs56KbAAZddm4s-ui52HB9bctdvom0SErGVZlMpq8NlbragUyGKwrO5maU-5qOIpihTYP35IDFqs_v3cNZqoyPC2Y0nfanCBRqHUXCKBbmZiHYw1hAllkZWYQab1H88Mf5O7e7vzZ3L881EpBQT7g7VpAVsDkyLBnM7_JhlVeSJBU/w640-h442/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-28%208.46.50.png" width="640" /></a></div><p style="text-align: justify;">上に挙げた例のように,ビデオ講義の動画でしっかり説明しているにも関わらず,それらの内容について質問してくる学生は多い.これはいったいどうしたものか.</p><h3 style="text-align: justify;">ある学生との対話による気付き</h3><p style="text-align: justify;">あるとき,「どうしてもうまくできないんです」と研究室を訪ねてきた学生がいた.その意気やよし,というところだが,「エラーの状況を再現してみ?」というと,動画を小刻みにスキップして参照しながら,作業を進めようとする.</p><p style="text-align: justify;">それじゃダメだよ……</p><p style="text-align: justify;">物事には順序があり,とくにプログラミングにおいては順序どおりやらないと,うまくいかない.動画をスキップしたところでも,重要なポイントが説明されているはずだ.そのとおり進めないからエラーになるのである.</p><p style="text-align: justify;">教室での講義であればしっかり聞いているかと問えば,そうでもないだろう.しかし,教室で演習をしていれば,つまづいたところでは周囲と助け合ったり,その時点で誤りを指摘できたりと,確認しながら進められる.しかし,オンデマンド講義で,しかも2倍速で視聴していたり,必要そうなところだけ摘み食い的に視聴していたりしているのでは,漏れがあるのもさもありなん,というところだろう.</p><h3 style="text-align: justify;">いかに漏れなく伝えるか</h3><p style="text-align: justify;">とくにプログラミングに関する授業では,「必要なことをいかに確実に伝えるか」という配慮が教員側にも必要になる.A→B→C→D→……という作業手順があるとして,なぜこの順番でやるのか,あるいは,A,B,という手順がなぜそれでよいのか,という個別のポイントを,丁寧に伝えられるかという技量が求められる.</p><p style="text-align: justify;">作業に慣れている,原理を理解している教員側は,さも当たり前のこととして「A→B→C→D→……」という作業手順を説明する.しかし,初見の学生は,なぜそれでよいのかとか,それを行うための前提知識などがわからない.そのため,「前提知識がないこと」を前提として,必要以上に丁寧に説明するように心がけがほうがよい.</p><p style="text-align: justify;">それだけ配慮していても,説明が漏れることがある.そのうえで,ビデオ授業だと,先に述べたような視聴態度をとる学生は,A→C→D(Bをすっ飛ばす)というような理解をする.それではうまくいくわけがない.</p><p style="text-align: justify;">このような,情報の欠如をいかに防ぐか,これは学生だけの問題ではなく,教員側の配慮も必要になろう.</p><p style="text-align: justify;">なお,補足する手段として掲示板での質問を推奨している.掲示板での質問が活性化することは,基本的にはウェルカムである.しかし,無駄な質疑はできるだけ避けたいところ.そのために,全受講者に対してオープンな掲示板で質問しなさいと指導している.Q&Aが溜まればそれはひとつの財産になるし,重複した質問を避けられる利点があるからである.</p>iiojunhttp://www.blogger.com/profile/09413532284181955183noreply@blogger.com0tag:blogger.com,1999:blog-1233736676889049363.post-61925482712648302482023-10-21T13:48:00.010+09:002023-10-21T13:52:24.797+09:00散歩のすすめ<p style="text-align: justify;">昨日,半蔵門で地下鉄を降りて市ヶ谷に向かっていたら「エクセル麹町」というマンションの前を通りかかった.そして今日,巣鴨から駒込までぶらぶら散歩していたら,「エクセル巣鴨」を発見.昨日の今日なので,驚いた.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWDp5Eru3lnYZH0qBixFVc1FgGWJjV1l_MUbfekoxbdlwoYcVpbT2tB2DSwQX4dfj_m6pQD0UG-qlyLY3Ar33ookZL0O41nD1QSlzUcNb8FnUh6aSt8Q36hujNNdTQAv03BEILAS5uknZuTsd9rI7iCo30v_iGTOwvRzicEXau3t3jPlMPPpFRWsLoB2E/s4032/IMG_1677.HEIC" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="3024" data-original-width="4032" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWDp5Eru3lnYZH0qBixFVc1FgGWJjV1l_MUbfekoxbdlwoYcVpbT2tB2DSwQX4dfj_m6pQD0UG-qlyLY3Ar33ookZL0O41nD1QSlzUcNb8FnUh6aSt8Q36hujNNdTQAv03BEILAS5uknZuTsd9rI7iCo30v_iGTOwvRzicEXau3t3jPlMPPpFRWsLoB2E/w640-h480/IMG_1677.HEIC" width="640" /></a></div><p style="text-align: justify;">調べてみたら,エクセル早稲田やエクセル大塚,エクセル駒込,エクセル千石,エクセル茗荷谷など,エクセルシリーズが街ごとにあるらしい.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieUwwd9y3gRQ2NGZSwWuAqRZYDqAdiJaFbZxPsRkpQTCd-0U6fhX5U4zl8BkmMolsFAf0OGFmOxtlUkl8bUpM-XzzSHDIZa0xSuqCtdSr-JHe-l55x0czA45TloWR0jm9ZhxmgAqHGNBmXbquZ_svpFcml8Uvi9p0bzE9Yc_7CPCn9sKidig0KCTwq8Bw/s4032/IMG_1674.HEIC" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="3024" data-original-width="4032" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieUwwd9y3gRQ2NGZSwWuAqRZYDqAdiJaFbZxPsRkpQTCd-0U6fhX5U4zl8BkmMolsFAf0OGFmOxtlUkl8bUpM-XzzSHDIZa0xSuqCtdSr-JHe-l55x0czA45TloWR0jm9ZhxmgAqHGNBmXbquZ_svpFcml8Uvi9p0bzE9Yc_7CPCn9sKidig0KCTwq8Bw/w640-h480/IMG_1674.HEIC" width="640" /></a></div><p style="text-align: justify;">散歩しているとこういうことに気づく.散歩していないとなかなか気づかない.散歩は面白い.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik8rpY8laAQXEGLRuTZYe9N36XiX5V2wUQhDr9nVMcdSJoJP0m1ojJ90IUCnTtw09KmVXxccrUHpVEKoaTO153PWrUzaTEPFUnm4-hp1dSJGvTtdD70Jl4ZL9G0JbLqxJ2Y5BHvB9dVgnNmc4MsnHKnOPtINYDVp4-OEHN4Cuh8wf3Uv7PkMCik7tEIxM/s1590/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-21%2013.46.44.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="996" data-original-width="1590" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik8rpY8laAQXEGLRuTZYe9N36XiX5V2wUQhDr9nVMcdSJoJP0m1ojJ90IUCnTtw09KmVXxccrUHpVEKoaTO153PWrUzaTEPFUnm4-hp1dSJGvTtdD70Jl4ZL9G0JbLqxJ2Y5BHvB9dVgnNmc4MsnHKnOPtINYDVp4-OEHN4Cuh8wf3Uv7PkMCik7tEIxM/w640-h400/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-21%2013.46.44.png" width="640" /></a></div>iiojunhttp://www.blogger.com/profile/09413532284181955183noreply@blogger.com0tag:blogger.com,1999:blog-1233736676889049363.post-40472460454924232112023-10-19T23:07:00.007+09:002023-10-20T13:12:20.874+09:00OSS万歳\(^o^)/<p></p><p style="text-align: justify;">事の発端はこれ.学生たちがTwineというツールを使い,とあるシミュレータを作ろうとしているのだが,操作ログを記録してユーザの挙動を分析したい,なんてことを言っていた.TwineではHarloweという簡易なスクリプト言語というかマクロ?を利用でき,それを使えばできそうだなとやってみた.</p><p style="text-align: justify;">(history:)というコマンドがあって,最後のページでそれを評価すればユーザの操作履歴は追える.しかし,残念ながらタイムスタンプまでは記録されない.したがってタイムスタンプ付きで記録を取るには,自前のスクリプトを書く必要がありそうだ.少し考えた末,(current-time:) というコマンドを使って,変数に逐一記録していけばできそうだと試してみた結果が次の画面である.</p><div class="separator" style="clear: both; text-align: center;"><p style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJXPiroUVvxiU7wzeoBL9Zl7o8ZJbXYxblxfiIuHSF_vNPaefUtS1-DIcG_GIZOQ4L-Z3-atRW_9DMa0GfD-10wqQ-YkWLCZSH6tY510tI_17oI7dMPuPF9ES2Pjdj_y1GpTaz-Z9sMsY2Uu-9xsqkbGQ0nCXVapzvYlV_hVzUllgTJoor9Rt0nkif3QE/s1592/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-19%2022.42.50.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1126" data-original-width="1592" height="452" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJXPiroUVvxiU7wzeoBL9Zl7o8ZJbXYxblxfiIuHSF_vNPaefUtS1-DIcG_GIZOQ4L-Z3-atRW_9DMa0GfD-10wqQ-YkWLCZSH6tY510tI_17oI7dMPuPF9ES2Pjdj_y1GpTaz-Z9sMsY2Uu-9xsqkbGQ0nCXVapzvYlV_hVzUllgTJoor9Rt0nkif3QE/w640-h452/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-19%2022.42.50.png" width="640" /></a></p><p></p></div><p style="text-align: justify;">できるにはできたが……惜しい.なんということか,(current-time:)の粒度が粗すぎる.さて,ではこの(current-time:)をなんとかしようか,と手を出してしまったのが,今回報告する顛末の発端である.</p><h3 style="text-align: left;">Twineを調査</h3><p style="text-align: justify;">まずは,Twineのソースコードを調査する.GitHubから同プロジェクトのソースコードをダウンロードしてきて,"current-time"をキーワードにgrepしてみるも,それらしいコードが見当たらない.</p><p style="text-align: justify;">そもそもHarloweのスクリプトをレンダリングしているのはどこのタイミングなんだろう?これがよくわからない.Google ChromeでF12キーを押してWeb開発ツールでデバッグしてみようにも,どうにもよくわからなくてお手上げである.</p><p style="text-align: justify;">そこでHarlowe関連のドキュメントを探ってみた.ん?Harloweって,Twine関係ないんじゃないの?と気付いたのが迷路から脱出できた鍵となった.決定打は「Where can I find the "Twine engine code"? #649」というGitHubのイシュー.「Twine engine code」がキーである.</p><p style="text-align: justify;">なんということはない,Harloweスクリプトは,Twineが出力するHTMLに埋め込まれた難読化されたTwine engine codeのJavaScriptが解析し,その動作を決定していたというわけだ.そこで,次はHarloweのソースコードにあたる.こちらをダウンロードして,解読した.</p><h3 style="text-align: left;">Harloweエンジンの調査</h3><p style="text-align: justify;">ここから先は一本道だった.Harloweのソースコードを入手,展開し,再び"current-time"をキーワードにしてgrepする.</p><p style="text-align: justify;">BINGO!当該コマンドを処理するソースコードに辿り着いた.案の定,new Date() して日付オブジェクトを取得したあと,時間と分を得て,文字列を生成している.ここに秒を取得するコードを追加すればよいだけである.</p><p style="text-align: justify;">以上の追跡結果から,Twineの出力に埋め込まれた難読化JavaScriptの該当部分にパッチを当てれば望んだ出力が得られるということがわかった.</p><p style="text-align: justify;">これで問題は解決したのだが,ここまで3時間.やはり,他人様の書いたコードを解読するのは難儀な仕事よのうと思ったとか思わなかったとか.</p><p></p>iiojunhttp://www.blogger.com/profile/09413532284181955183noreply@blogger.com0tag:blogger.com,1999:blog-1233736676889049363.post-73848851610869853142023-10-07T09:43:00.010+09:002023-10-09T11:11:06.672+09:00AのBのCのD問題<p style="text-align: justify;">「AのBのCのD」と題したが,「α of β of γ of δ」でも同様,すなわち,日本語でも英語でも避けるべき表現で,多くの言語に共通する話題である.</p><p style="text-align: justify;">あるXのポストがちょっとした話題になっていた.次の図はそのキリトリである.なお,IDを特定できる部分は,自分のアイコンを除いて,モザイクをかけた.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1bWmS1so4hFH-pCjUcoIdPvRqMok5oOCRIejCX3mc-5xeqC45-W2ThXnv1yY8JoIaSyX5WeZwTOOSk8C4fVTzdE7uEwOOen6CWlOARlt5o3x6zUSh-JUamAI8fHlOr_4w90beIdxCJXm7BtjM8EEDGyA4K-Tz-7od3g7m67owX9n2Y15HW04pXcPrQMM/s1184/386336456_10161571897229769_2750941841519750927_n.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1046" data-original-width="1184" height="566" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1bWmS1so4hFH-pCjUcoIdPvRqMok5oOCRIejCX3mc-5xeqC45-W2ThXnv1yY8JoIaSyX5WeZwTOOSk8C4fVTzdE7uEwOOen6CWlOARlt5o3x6zUSh-JUamAI8fHlOr_4w90beIdxCJXm7BtjM8EEDGyA4K-Tz-7od3g7m67owX9n2Y15HW04pXcPrQMM/w640-h566/386336456_10161571897229769_2750941841519750927_n.jpg" width="640" /></a></div><p style="text-align: justify;">ここで問題になっているのが,「高校の国語の教員の妻」という表現である.「の」の数が間違っているのはご愛嬌として,この表現が悪文であるとの指摘に私も異論はない.</p><h3 style="text-align: left;">悪文の理由</h3><p style="text-align: justify;">なぜこのような表現が悪文とされるのだろうか.ひとつには,〜の,〜の,〜の……という,単調なリズムの問題がある.これは若干,感覚的なものかもしれないが,文章において単調なリズムが繰り返されると,違和感を覚える.</p><p style="text-align: justify;">よく例に挙げられるのは,「Aである,そしてBである,そしてCである,そしてDである」というような表現.「そして」という接続詞で文を淡々と繋げる表現は「小学生の作文じゃあるまいし」と指摘されるだろう.</p><p style="text-align: justify;">文末が同じ表現で続くような文章も同様である.上記の「〜である」が続くのも端的な例であろう.文を書き慣れている人であれば,それを避けるために,形容詞で終わらせたり,多様な動詞で終わらせたりといった工夫を自然と加えているはずである.</p><p style="text-align: justify;">「『の』や『of』で繋ぐのは安易だ」という指摘もできよう.上記の「高校の国語の教員の妻」という表現は,「高校で国語を教えている妻」と言い換えられる.「の」を一切使わずに同じ意味を表現できる.</p><h3>曖昧性の忌避</h3><p style="text-align: justify;">上記の言い換えに関し,「え?意味変わってね?」と思われた方もいるかもしれない.それは,おそらく「高校の国語の教員の妻」を「高校の国語教員(をしている人)の妻」と解釈していた方だろう.</p><p style="text-align: justify;">このように,「AのBのCのD」と「の」を重ねた表現は,解釈の多義性が生まれかねないリスクを孕む.もっと別の例で考えてみよう.「前の会社の管理職の妻」ではどうだろうか.</p><p style="text-align: justify;"></p><ul><li>「以前勤めていた会社で管理職として働く妻」</li><li>「以前勤めていた会社の管理職である人の妻」</li><li>「目の前にある会社で働く管理職の人の妻」</li><li>「目の前にある会社で働いている管理職である妻」</li></ul><p></p><p>など,いろいろな解釈が可能で,もはや収集がつかない(他にも考えられるはず.考えてみてください).</p><h3 style="text-align: left;">文脈に強く依存しがちな日本語</h3><p style="text-align: justify;">さて,当該スレでは議論が盛り上がっていて,リプ欄を追っかけていたら,この文章は曖昧で複数の意味に解釈できるから悪文であるという指摘に対して「日本人なら一意に解釈できるでしょ」って噛みついている人がいた.</p><p style="text-align: justify;">「いいと思う?最低です.高校の国語の教員の妻も同意見です」という元文章だけだと分かりづらいが,私なら次のように考えるだろう.</p><blockquote style="border: none; margin: 0px 0px 0px 40px; padding: 0px;"><p style="text-align: justify;">何かについて「最低だ」と言っていて,妻も同意見だと補足している,話題に出ているのは「日本語の作文技術」っていう本で,あーだから高校の国語の教員なのか,じゃあ,本人が教員だったら,あえて「妻も同意」っていうのはおかしいな?と考えると,教員なのは奥さんなんだな……</p></blockquote><p style="text-align: justify;">このような推測に基づき,多くの日本語話者が「高校の国語の教員をしている奥さん」と考える.だから「日本人なら分かるでしょ」となる.</p><p style="text-align: justify;">日本語は主語を省略してもよいくらい,文脈に強く依存する言語である.そのことに鑑みれば,カミツキ氏の主張は分からぬでもない.しかし,読み手に負担をかける,認知負荷を強要するという点で,避けるべき表現であるという指摘は譲れない.なので,上記のように考えなかった人も悲観することはない.ご安心を!</p><p style="text-align: justify;">いずれにしても,どのような言語にしても,分かりやすい文章表現と分かりにくい文章表現はあり,分かりやすい表現を心がけないといけない.そう考えると,やはり「AのBのCのD」のような表現は避けるべきである.私なら「AのBのC」も避ける.「の」に限らない.同じ助詞が続くような表現は使わないように気をつけている.英語でも同じである.</p>iiojunhttp://www.blogger.com/profile/09413532284181955183noreply@blogger.com0tag:blogger.com,1999:blog-1233736676889049363.post-14378612326972103852023-10-03T19:03:00.012+09:002023-10-03T22:20:21.160+09:00今日の教育ぷちDX<div class="separator"><p style="text-align: justify;">例年,ちょっとした反転授業というか,履修者から提出された課題のフィードバックを次の授業時間の冒頭でそれなりに時間をかけて念入りに解説するようにしている.履修者の満足度は高く,それゆえに学習効果も高くなるであろうことが期待される手法と考え,数年前から導入している方法である.</p><p style="text-align: justify;">ところが,実際にこれをやろうとすると,その準備がけっこう大変である.提出物を一括してダウンロードするところまでは,LMSの機能を用いれば簡単にできる.そのファイルに対して,例年は,匿名化し,順序をシャッフルしたうえで一つのファイルにまとめ,誰の提出課題かわからないように示すという作業を,手で行なっていたからである.</p><p style="text-align: justify;">手作業でやっていた理由は簡単で,例年の履修者が10数人といった規模だったので,手作業でやってもせいぜい30分くらいの作業で済んでいたから,なんとなく惰性でやっていたにすぎない.</p><p style="margin-left: 1em; margin-right: 1em; text-align: justify;"><img border="0" data-original-height="1580" data-original-width="2522" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2piAAWwHKbRgUsYPQxiR7xFkRKuJlhP2gPvU18vL7i5Lp7uaslekyEhZP1AJQoVAUmWc5dqf09yHxmTU0ol6JZ73xTV6FxUBdiGj1RQc6h7C1iTM7BG0UIuw7RXFn1CRaCur7xa3-pWpmm0AqjEnT4LwvorIsoTfScHjQqhZVKK4GgsIv4mwYJfuNlJk/w640-h400/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-10-03%2018.37.05.png" style="color: #0000ee; text-align: center;" width="640" /></p></div><p style="text-align: justify;">ところが今年は,なぜか履修者数が50名を超えた.1回めの受講状況はその6割といったところで,課題提出者は30数名であった.しかし,30もあると手作業でやるのは,やや,しんどい.</p><p style="text-align: justify;">というわけで重い腰を上げて,簡単なスクリプトを書いて処理することにした.</p><p style="text-align: justify;">まずはファイルをランダムに並べ直してファイル名を匿名化するコードを考えた.Rubyのshuffleメソッドを使えば簡単に実現できるな?と思って書いたスクリプトが次のものである.LMSからダウンロードした履修者のファイル,そのファイル名は,学籍番号コード文字列の後に履修者が提出したファイルの元の名前が続く,という仕様になっているため,2桁の数字の後に「G」が続くという学籍番号の特徴を利用して,それらのファイルだけを選択してファイル名を変えるようにした.</p><blockquote style="border: none; margin: 0px 0px 0px 40px; padding: 0px; text-align: left;"><div style="text-align: justify;"><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; text-align: start;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">#!/usr/bin/env ruby</span></p><p class="p2" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 21px; text-align: start;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"></span><br /></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; text-align: start;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">system("rm reportlist.xlsx")</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; text-align: start;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">files = IO.readlines("| ls | grep [123][0-9]G")</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; text-align: start;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">files.shuffle!</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; text-align: start;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">files.each_with_index{|filename,i|</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; text-align: start;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>filename.chomp!</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; text-align: start;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>(body, ext) = filename.split('.')</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; text-align: start;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>system("mv \"#{filename}\" file%02d.#{ext}" % i)</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; text-align: start;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">}</span></p></div></blockquote><p style="text-align: justify;">続いては,ファイル内に記載された指名と学籍番号の削除である.これも実にいい加減なクイックハックで,提出されるファイルが「こちらがあらかじめ用意したワークシート」であることをいいことに,2行目と3行目に書かれるであろう氏名と学籍番号を,単純に削除するだけのもの.こちらはPythonのpython-docxライブラリを用いた.</p><blockquote style="border: none; margin: 0px 0px 0px 40px; padding: 0px; text-align: left;"><div style="text-align: justify;"><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; text-align: start;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">#!/usr/bin/env python</span></p><p class="p2" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 21px; text-align: start;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"></span><br /></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; text-align: start;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">import docx</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; text-align: start;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">import sys</span></p><p class="p2" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 21px; text-align: start;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"></span><br /></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; text-align: start;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">filename = sys.argv[1]</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; text-align: start;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">doc = docx.Document(filename)</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; text-align: start;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">doc.paragraphs[1].text = ''</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; text-align: start;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">doc.paragraphs[2].text = ''</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; text-align: start;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">doc.save(filename)</span></p></div></blockquote><p style="text-align: justify;">あとは,binディレクトリに置いておいた先のファイル名変更スクリプト(rename.rb)と,こちらの匿名化スクリプト(removeid.py)を,シェルスクリプトのバッチファイル(batch.sh)で回すだけである.</p><blockquote style="border: none; margin: 0px 0px 0px 40px; padding: 0px; text-align: left;"><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">#!/bin/sh</span></p><p class="p2" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 21px;"><br /></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">../bin/rename.rb</span></p><p class="p2" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px; min-height: 21px;"><br /></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">for f in file*.docx; do</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>/bin/echo -n "processing $f ... "</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>../bin/removeid.py $f</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;"><span class="Apple-converted-space"> </span>echo done</span></p><p class="p1" style="background-color: #fff7d9; font-family: Menlo; font-feature-settings: normal; font-kerning: auto; font-optical-sizing: auto; font-stretch: normal; font-variant-alternates: normal; font-variant-east-asian: normal; font-variant-numeric: normal; font-variant-position: normal; font-variation-settings: normal; line-height: normal; margin: 0px;"><span class="s1" style="font-variant-ligatures: no-common-ligatures;">done</span></p></blockquote><p style="text-align: justify;">実に簡単.手間いらず.LMSからダウンロードした提出物を展開して,このバッチファイル一発かますだけ!</p><p style="text-align: justify;">今日は少し時間と手間を掛けてしまったが,来週から準備も楽になるなーと思うと,少し楽しい気分になる.</p>iiojunhttp://www.blogger.com/profile/09413532284181955183noreply@blogger.com0tag:blogger.com,1999:blog-1233736676889049363.post-47863011988212386862023-09-29T10:11:00.005+09:002023-09-29T10:38:26.198+09:00コミュ力の涵養を<p style="text-align: justify;">コミュカ(こみゅか)ではない,コミュ力(こみゅりょく)である.コミュニケーション能力のことだ.コミュニケーションのスキルを磨くと,人生楽しくなるよ?というお話.</p><p style="text-align: justify;">なぜ突然そんな話をするかというと,昨夜,深夜に赤坂のバーで某氏(日本人)と静かに飲んでいたら,隣にシンガポール人の若者が来て,なんとなく親しくなり,シンガポールの食文化についていろいろと楽しい話ができたからである.</p><p style="text-align: justify;">そしてそのような言語を共通に持たない人でも楽しく話ができるのは,多少の語学力に加えて,コミュニケーション能力がものをいう.極論すれば語学力なんて多少で構わない.コミュニケーションしようという意欲をいかに持つかが重要である.</p><p style="text-align: justify;">高校生や大学生を他国の生徒,学生と異文化間交流をさせるプロジェクトも今年で4年目に入り,そこでも同様の状況が見られる.基本は英会話だが,英語が得意でなくても楽しく会話をしようという生徒や学生と,英語が得意なくせに会話に苦労する生徒や学生がいる.その差は何から来るかというと,コミュニケーションしようという意欲の差である.</p><h3 style="text-align: justify;">おじさんも頑張っている</h3><p style="text-align: justify;">やや古い事例になるがお許しいただきたい.以下の写真は,2017年に渋谷の居酒屋で撮影されたものである.私もまだ若い.</p><p style="text-align: justify;">奥の二人は日本人,手前の二人はフランス人である.ことの発端は,奥のオジサン(私の向かいに座っている人)が飲んでいたホッピーであった.店は混んでいてたまたま相席のようになっていた手前のフランス人二人が,珍しそうに,そのホッピーに注目していたところから,日仏交流が始まった.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyFJIEW9KVQ3H8JF_wOFeY3dmEnKnnGAgc3QzAAVGJ9-7uL5IW2LCSDDBx4KJNOfOw4tsYtU7saqFUupCEXXRgSHADQqNXg9YaTEPSPnOsj7c4Hulwb4f3YlKZ00zwgOk4cuMPjDAS7kaOxl3xuPhQfkee7VeCpiemaUnvBe8a-q-bsZsRrkCTdWLu-a8/s960/18198431_10155693997609769_3615679906891587956_n.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="720" data-original-width="960" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyFJIEW9KVQ3H8JF_wOFeY3dmEnKnnGAgc3QzAAVGJ9-7uL5IW2LCSDDBx4KJNOfOw4tsYtU7saqFUupCEXXRgSHADQqNXg9YaTEPSPnOsj7c4Hulwb4f3YlKZ00zwgOk4cuMPjDAS7kaOxl3xuPhQfkee7VeCpiemaUnvBe8a-q-bsZsRrkCTdWLu-a8/w640-h480/18198431_10155693997609769_3615679906891587956_n.jpg" width="640" /></a></div><p style="text-align: justify;">右のフランス人は,奥さんが日本人で,日本で生活しているという.左の方はご親族で,日本に遊びにきて,二人で渋谷のこの店に来たとのこと.</p><p style="text-align: justify;">会話は,日本語,英語,フランス語のちゃんぽんで進んだ.語学力はというと,奥のオジサンから時計回りに,「日本語(できる),英語(少し),フランス語(できない)」,「日本語(できる),英語(できる),フランス語(少し)」,「日本語(できる),英語(できる),フランス語(できる)」,「日本語(できない),英語(できる),フランス語(できる)」という状況だった.日本語も英語もフランス語も,どれで話してもだれかが分からないという状況で,4人に共通する言語は,ない.</p><p style="text-align: justify;">しかし,コミュニケーションの真髄はハートである.アルコールの力も強い.語学の壁を乗り越えて,結局,この日,意気投合した4人は,このあと,なんとカラオケ屋になだれ込んで日仏英語で歌いまくるという(このオッサンたち何やってんだ)状態が展開された.</p><h3 style="text-align: justify;">シンガポール人もすごい</h3><p style="text-align: justify;">それにしても,昨夜のシンガポールから来た彼も,行動力のある若者だった.昨夜,我々は最初,市ヶ谷ではっちゃけていて,そこでかなり飲んだ後に赤坂のバーへ移動した.そのバーは,連れて行ってくださった某氏が馴染みにしている店で,路地に入ったところにあり,窓のない重いドアを開けて入るような,いかにも隠れ家といったバーである.</p><p style="text-align: justify;">いちおう,「誰ぞに紹介されて来た」とは言っていたが,外国のそんな店(といっても,怪しい店ではないが)に,よくまあ単身で乗り込んでいくもんだなと,その行動力にも関心する.</p><p style="text-align: justify;">それで思い出したが,昨年の夏にWCCEという国際会議が広島で行われたときも,フランスから来ていた委員のナントカ氏が,やはり隠れ家的なバーに「我々を」連れてってくれたことがあった.聞けば,前日だか前々日だかに,初対面の地元の兄さんに紹介してもらったとか.その行動力というか情報網というか,まあ,恐れ入る.</p><p style="text-align: justify;">そんなわけで,我々も,コミュニケーション能力や行動力を磨いていかないと,いろいろ負けちゃうんじゃないかな,と思った次第である.とくに若い人たち,がんばれー.</p>iiojunhttp://www.blogger.com/profile/09413532284181955183noreply@blogger.com0tag:blogger.com,1999:blog-1233736676889049363.post-82320393012482617442023-09-20T13:46:00.004+09:002023-09-21T20:26:15.423+09:00草たっぷりのフォーを求めて<p style="text-align: justify;">東南アジアの仕事に携わるようになって初めて訪問した場所はハノイ,2003年のことである.それ以来,ベトナムには何度,訪問したことだろうか.気付けば最初の訪問から20年が過ぎた.今年も夏に学生を連れてホーチミン市を訪れ,1週間ほど滞在した.</p><p style="text-align: justify;">ベトナムといって,皆さん何を思い浮かべるだろうか.親日国であること?民族衣装のアオザイ?あるいは,美味しいベトナム料理とか?そう,ベトナム料理は美味しい.</p><p style="text-align: justify;">なかでもとくべつ美味しいベトナム料理といえば,なんだろう.ゴイ・クォン(Gỏi cuốn, 生春巻き)やバイン・ミー(bánh mì, ベトナム版サンドウィッチ)かな …… バインセオ(Bánh xèo, ベトナム風お好み焼き)を挙げた人はかなりのホーチミン市通なのではなかろうか,これは美味しい.ホーチミン市の名物である.333(ベトナムのビール)を飲みながらのバインセオはもう至福のひとときである.</p><p style="text-align: justify;">日本人にもよく知られている料理といえば,やっぱり,フォー,だろうな.米粉で作られた平打ち麺で,やさしい味のスープヌードルである.鶏のフォー(フォー・ガー,phở gà)や,牛肉のフォー(フォー・ボー,phở bò)が一般的で,だいたいどこでも食べられる.</p><p style="text-align: justify;">ところが日本にある多くのベトナム料理店では,やはり日本人の口に合わせた味付けのベトナム料理を提供する.市場原理に基づくものなので,これは致し方ない.しかし,現地の味を日本で食べたいという願望も(自分のなかでは)無視できない.</p><p style="text-align: justify;">で,現地のフォーといえば,なんだか得体のしれない草をたっぷり入れて食べるスタイルが一般的.しかし,これが,どうして,なかなか出会えないのである.一つには,日本人の口に合わせているからという理由があろう.加えて,食材が手に入りにくいから,という理由もあるかもしれない.そのため,パクチーで代用という手段が取られていることが,ままある.</p><p style="text-align: justify;">さて,ごたくはこのくらいにして,最近,東京で立て続けに訪問して「わりと現地の味に近いかな」と感じたフォーを,いくつか紹介しよう.</p><p style="text-align: justify;">まずは「フォーティントーキョー」.池袋,新宿,吉祥寺に1軒ずつあるらしい.メニューは潔く「牛肉のフォー(フォー・ボー)」だけ.写真は,プラスアルファのトッピングでパクチーを増量したものである.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz_OCfFNocq_F6ebjX2Iuo0qfjkCfxQiF8jcoGWtSjBGf5q94m5phjPYbrSNDTOoCnjetzl_6Mm7PRcrCaQY1fCwchBmHpTOEoq8n24zJjn4dRfU-NmTm-WXiiIDG7kmN_p4utzxSiCe_DItVQIjpEHJkc3PBOBSxtladgo2dTH9WvOCkHVoL6Si_Whwk/s960/378237150_10161532581854769_6038434035114706171_n.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="720" data-original-width="960" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz_OCfFNocq_F6ebjX2Iuo0qfjkCfxQiF8jcoGWtSjBGf5q94m5phjPYbrSNDTOoCnjetzl_6Mm7PRcrCaQY1fCwchBmHpTOEoq8n24zJjn4dRfU-NmTm-WXiiIDG7kmN_p4utzxSiCe_DItVQIjpEHJkc3PBOBSxtladgo2dTH9WvOCkHVoL6Si_Whwk/w640-h480/378237150_10161532581854769_6038434035114706171_n.jpg" width="640" /></a></div><p style="text-align: justify;">続いて,池袋の「フォー・チュン」という店.これもフォー・ボー.ランチセットで900円.この店はすごい.雑居ビルの地下1階で,知らないとなかなか入りにくい佇まいのなか,ドアを開けるとそこはもうベトナム!店の匂いは完全に異国のそれであって,日本とはかけ離れた雰囲気.しかも店員,客ともにほぼベトナム人なので,話されている言葉はほぼベトナム語(……日本語で注文はできるよ),先日訪れたときは,隣のテーブルのお姉さんたちが延々と「Một Hai Ba Vô!」ってやってた.3, 2, 1, ヨー!という掛け声で,乾杯の合図である.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5MUDuEFAiuX4aU1EQLVcVbBt_fzlpRalmi5vASHcSAwM-wBBKhxZspWQ1q3aNajK3RShGpj7zy7lRA0r-tVIguQL36h5TvVdsNb2OUlh-pUkl5H232DF7fOoNi-PqyYKmlHpY5OpHEfjq4FYkbSuFyDnMw96htAzXUJNtn78WCedUlyR6OqRJQPEDj_Y/s960/378316046_10161528483169769_8539713476972531173_n.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="720" data-original-width="960" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5MUDuEFAiuX4aU1EQLVcVbBt_fzlpRalmi5vASHcSAwM-wBBKhxZspWQ1q3aNajK3RShGpj7zy7lRA0r-tVIguQL36h5TvVdsNb2OUlh-pUkl5H232DF7fOoNi-PqyYKmlHpY5OpHEfjq4FYkbSuFyDnMw96htAzXUJNtn78WCedUlyR6OqRJQPEDj_Y/w640-h480/378316046_10161528483169769_8539713476972531173_n.jpg" width="640" /></a></div><div class="separator" style="clear: both; text-align: center;"><p style="text-align: justify;">最後は,フォー・チュンの近くにある「フォー・ベト」.写真は,鶏とコリアンダーのフォー(フォー・ガーにパクチー多めに入れたもの).実は草の具合はこの店が一番,現地のテイストに近かった.怪しい草も乗っているし,もやしが乗っているのも現地風.レモンの代わりにライムであってほしかったとか,青唐辛子のスライスがほしかったとか,欲をいえばキリがないけれど.この店も,パクチーと香草は330円で増量できる.最適解はこれかな?</p><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgncyzZUrQd_ZO4q63KEF5aGmZXGsmMtjfGTmInpz5ZmRQNQ9oy4lpay7sFlIR5bJbCoXMnNtEm6DbLgOmDGGE-wLj-cjLqc-gkNezuA3AAvpopksqq8dHrycmlwKuFdL0CGoe70etxiLStRS_kxftQZ_plbylxg7zxBlfcJbe5DwGcmUfqUG_Hq5yIWUQ/s960/379053586_10161526522374769_7064233079369500040_n.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="720" data-original-width="960" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgncyzZUrQd_ZO4q63KEF5aGmZXGsmMtjfGTmInpz5ZmRQNQ9oy4lpay7sFlIR5bJbCoXMnNtEm6DbLgOmDGGE-wLj-cjLqc-gkNezuA3AAvpopksqq8dHrycmlwKuFdL0CGoe70etxiLStRS_kxftQZ_plbylxg7zxBlfcJbe5DwGcmUfqUG_Hq5yIWUQ/w640-h480/379053586_10161526522374769_7064233079369500040_n.jpg" width="640" /></a></div><p style="text-align: justify;">そして,実は,本当に美味しいフォーの食べ方は,途中でクァイ(Quẩy,油条という中華揚げパン)を千切って入れ千切って入れして食べるやり方なのだ.ずっとそう信じている.しかし,残念ながら,まだ東京のどの店でもそのスタイルには出会えていない.</p><p style="text-align: justify;">東京のフォーは麺の量が多過ぎて,それだけでお腹いっぱいになっちゃうってのもある.現地のフォーっていかにも軽食で,クァイ入れてちょうどいい感じなのよね.</p>iiojunhttp://www.blogger.com/profile/09413532284181955183noreply@blogger.com0tag:blogger.com,1999:blog-1233736676889049363.post-18483464418601886622023-09-16T13:43:00.005+09:002023-09-16T14:05:55.604+09:00名前って大事<p style="text-align: justify;">外国にいくとたいがいLioに間違えられ(※1),日系の航空会社からはItoと呼ばれ(※2),名前なんて飾りです偉い人にはそれが云々……と開き直っている私(Iio)だが,物事にはやはり名前を付けることが大切である.</p><p style="text-align: justify;">我々が2020年から進めている活動には「にこP」という名前が付けられている.「日(に)本語を話さない人とコ(こ)ミュニケーション&コラボレーション・プ(P)ロジェクト」で,にこP(にこぴー)である.英語ではThe Students Meet Internationally through Language Education Project,略してThe SMILE Projectという.</p><p style="text-align: justify;">いま,大学内にこのにこPを展開しようと画策している.既にゼミ単位で何度か実施してはいるのだが,それを他の学部にも広く普及させようという野望を抱いた.幸いにして我々の思いに共感してくださっている先生方が何人も手を挙げてくださった.あとは「僅かばかりの予算をつけてくだせぇ……」と,いろいろ手を尽くしている段階である.うまくいけば,再来年のにこPシンポジウムには中大セッションを用意して情報共有できるようになるだろう.</p><p style="text-align: justify;">さてその大学版にこPを,今回「The Chuo University SMILE project」と命名した.略して CU-SMILE である.See You SMILE!いいじゃない(駄洒落だけど).</p><p style="text-align: justify;">もうひとつ.にこPは lingua franca としての英語を活用して異文化間コミュニケーション教育を推進しようという試みだが,それを「日本語を学ぶ人々」を対象として「日本語で」実施しようという活動が,にこPのアクティビティから派生して,今年度から始まった.当初は日本語にこPと呼んでいたが,「日(に)本語でコ(こ)ミュニケーションしたい人々の『にこP』」というわけで「にこにこP」と呼ぶのはどうかな?</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsSPUIKD-F_K8PqdGGJJfe1F5fU8IMYVRfqDzqkoqrxs29lQEvCLul6ezHPWktL1Hky0mecu09IMx5u7z9EHsqajGmgIjPLPiC-pojtf3RWd9z-cd_as78heaKBO1KnTGYrKFBqVzwMXj1eb3A9IWbyrejMj7pNBBdDV1I6GxI8trjV0mLO5CojaCQ7Dk/s400/rakugo_jugemu.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="400" data-original-width="400" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsSPUIKD-F_K8PqdGGJJfe1F5fU8IMYVRfqDzqkoqrxs29lQEvCLul6ezHPWktL1Hky0mecu09IMx5u7z9EHsqajGmgIjPLPiC-pojtf3RWd9z-cd_as78heaKBO1KnTGYrKFBqVzwMXj1eb3A9IWbyrejMj7pNBBdDV1I6GxI8trjV0mLO5CojaCQ7Dk/w640-h640/rakugo_jugemu.png" width="640" /></a></div><p style="text-align: justify;">※1:そもそも母音だけ3文字なんていう名前は彼らの頭のなかにないらしく,I(大文字のアイ)をみて l(小文字のエル)と勝手に信じ込んでしまうらしい</p><p style="text-align: justify;">※2:彼らはローマ字で顧客情報を扱うので,たくさんのItoさんと接している一方で,Iioは珍しいから</p>iiojunhttp://www.blogger.com/profile/09413532284181955183noreply@blogger.com0tag:blogger.com,1999:blog-1233736676889049363.post-22688974983123455822023-09-02T12:05:00.007+09:002023-09-03T11:39:06.723+09:00地図あそび<p style="text-align: justify;">地理情報システム(Geographical Information System),GISと呼ばれるシステムがある.GISは地理に関するデータを処理する情報システムで,場所に紐づいたデータを可視化して分析するなどの用途で使われる.</p><h3 style="text-align: justify;">GIS事例</h3><p style="text-align: justify;">次の図は,八王子市図書館の利用状況を示す図である.地図上に示された9箇所のマーカーは,図書館の位置を示す.また,各町丁目は,来館者密度比の値で塗り分けられている.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVLDpkeHxNNjLOFBGCTrOsOToEBkwDDqKhwH-_0xzUuoJiTkyYBHGw_XyWv9UKQM1ulgtlXLpk5e8OMb11ZWd_016UP1wT8M6DwtLt410DXqegKH3MfQtiN8VGu4tyC4HSOmksvDSz6zdmmgISErDwEW3rh4DdDrc0FKZmSWu3ypah0Zzwowrw8cQyp2g/s3384/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-09-02%2011.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="2008" data-original-width="3384" height="380" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVLDpkeHxNNjLOFBGCTrOsOToEBkwDDqKhwH-_0xzUuoJiTkyYBHGw_XyWv9UKQM1ulgtlXLpk5e8OMb11ZWd_016UP1wT8M6DwtLt410DXqegKH3MfQtiN8VGu4tyC4HSOmksvDSz6zdmmgISErDwEW3rh4DdDrc0FKZmSWu3ypah0Zzwowrw8cQyp2g/w640-h380/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-09-02%2011.png" width="640" /></a></div><p style="text-align: justify;">来館者密度比とは何か.町丁目ごとに,利用者数を住民数で割った値を来館者密度と定義する.なお,ここで利用者数は2022年度に図書館を1度でも利用した人の数である.9箇所の図書館でそれぞれ利用者数がカウントされており,今回,利用者はその合計とした.一人の利用者が複数の図書館を利用したとすると重複してカウントされてしまうので,正確には「のべ利用者」である.また,住民数は2022年12月時のものを,八王子市のオープンデータから拝借した.</p><p style="text-align: justify;">来館者密度比は,来館者密度の最大値で割って正規化したものである.すなわち,最も利用者が多かった地区を基準として,それに対して各地区の来館者密度がどのくらいの割合になっているかを示す指標である.</p><p style="text-align: justify;">0〜10%をグレーとし,それ以上は10%ごとに,紺,緑,黄,橙で塗り分けている.50%以上は赤とした.</p><p style="text-align: justify;">多くの図書館で,図書館の近くになるほど来館者密度は高くなっていることがお分かりだろう.また,八王子の北部エリア,東端,高尾山の裏(地図では左下)は,利用率が低い.これは地理的な理由によるものである.</p><p style="text-align: justify;">このように,地図上にデータを示すことで状況がとてもよくわかる.まさに,一目瞭然,GISの面目躍如というところである.</p><h3 style="text-align: justify;">どうやって作ったか</h3><p style="text-align: justify;">この地図は,PythonのGISライブラリであるGeoPandasとFoliumを用いて作成した.df_users という変数に,町丁目のデータ(境界を示すポリゴンデータや来館者密度比のデータ)が格納され(次図),df_libs には図書館の位置情報が記されている.</p><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggo6HLg_13no2TYc9LP2QXgZBHUOh7PV77xd4WU66SsaEo5-i_VpcVfkoTxsA0TeiiKkGfbkTl6l2OdEkV2mZcp5Knt8X2rgtFpdqMYABhvMCeTrY9NycKUEJKeUXrcXJVTg4vcJeHXULqeKslJVNpq7e7I70s1Qex8YBpFqHYTkdIlUEoXDnYK0yBjG0/s1748/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-09-02%2011.57.01.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="934" data-original-width="1748" height="342" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggo6HLg_13no2TYc9LP2QXgZBHUOh7PV77xd4WU66SsaEo5-i_VpcVfkoTxsA0TeiiKkGfbkTl6l2OdEkV2mZcp5Knt8X2rgtFpdqMYABhvMCeTrY9NycKUEJKeUXrcXJVTg4vcJeHXULqeKslJVNpq7e7I70s1Qex8YBpFqHYTkdIlUEoXDnYK0yBjG0/w640-h342/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202023-09-02%2011.57.01.png" width="640" /></a></div><p style="text-align: justify;">地図を表示するコードは次のようなものである.Google Colablratory ノートから,地図表示に関する部分を抜粋する.</p><div style="background-color: #f7f7f7; font-family: monospace, Menlo, Monaco, "Courier New", monospace; line-height: 19px; white-space: pre;"><div>m = folium.Map(location=[<span style="color: #098156;">35.66</span>, <span style="color: #098156;">139.30</span>], zoom_start=<span style="color: #098156;">12</span>, tiles=<span style="color: #a31515;">'stamenterrain'</span>,</div><div> zoom_control=<span style="color: blue;">False</span>, scrollWheelZoom=<span style="color: blue;">False</span>, dragging=<span style="color: blue;">False</span>)</div><div> <span style="color: green;"># to disable zoom, scroll, and dragging functions</span></div><br /><div><span style="color: #af00db;">for</span> _, r <span style="color: blue;">in</span> df_users.iterrows():</div><div> sim_geo = gpd.GeoSeries(r[<span style="color: #a31515;">'geometry'</span>])</div><div> geo_j = sim_geo.to_json()</div><div> data = json.loads(geo_j)</div><div> data[<span style="color: #a31515;">'features'</span>][<span style="color: #098156;">0</span>][<span style="color: #a31515;">'properties'</span>] = {<span style="color: #a31515;">'color'</span>: rcolor(r[<span style="color: #a31515;">'Ratio'</span>])}</div><div> geo_j = json.dumps(data)</div><div> geo_j = folium.GeoJson(data=geo_j, style_function=<span style="color: blue;">lambda</span> x: styles(x))</div><div> geo_j.add_to(m)</div><br /><div><span style="color: #af00db;">for</span> _, row <span style="color: blue;">in</span> df_libs.iterrows():</div><div> folium.Marker(location=[row[<span style="color: #a31515;">'geometry'</span>].y, row[<span style="color: #a31515;">'geometry'</span>].x], popup=row[<span style="color: #a31515;">'Name'</span>]).add_to(m)</div><br /><div>m</div></div><p style="text-align: justify;">ここで,folium.Map() の引数 tiles で指定しているタイルとは,地図の絵柄を示すものである.冒頭で示した4つの地図は,タイルがそれぞれ異なる.左上から時計回りに,stamenterrain, openstreetmap, stamentoner, <span style="text-align: left;">cartodbpositron を指定して描画した地図である.</span></p><p style="text-align: justify;"><span style="text-align: left;">ビルトインで</span><span style="text-align: left;">指定できるタイルは</span><span style="text-align: left;">他にも</span><span style="text-align: left;">あり,その他にも外部から取り込むよう指定すれば,別の地図タイルを用いることができるらしい.</span></p><p style="text-align: justify;"><span style="text-align: left;">このように,タイルで遊んでみるのも一興.皆さんはどのタイルがお好みかな?</span></p>iiojunhttp://www.blogger.com/profile/09413532284181955183noreply@blogger.com0