オンライン授業のための情報まとめ

オンライン授業

これから日本でオンライン授業をやるとしたらどういう形で可能なのか、ツィッタをながめていて得られた情報をまとめてみました。（これから徐々に追記していきます）

単位認定するには？

基本的に、送受信双方が同時通信に対応できるのであれば、あとは現実的な工夫でなんとかなりそうです。（でもご自身でもきちんと確認してください！）

という感じです。わかりやすくまとめられたスライド資料もあります。

で、「終了後速やかなサポートと意見交換の場」というのは、たとえばこういう感じのようです。

同時配信の設備って！？

筆者のおすすめはZoomというソフトです。双方向ビデオ会議がかなり楽にできます。

東大DHの大向先生のご協力により、これを使うとどんな感じでできるか、という動画を作ってみましたので、まだあんまり使ってみたことがない人はご覧になってみてください。なお、動画では会議用マイクスピーカーを 使っていますが、ノートPC内蔵のマイク＆スピーカーでも通常は十分に対応できます。ここでは、動画収録のために敢えて会議用マイクスピーカーを使用しています。

www.youtube.com

スマホやタブレットから参加するとどういう風にみえるか、という動画も作ってみましたので、受講生側からどう見えるのか気になる向きはこちらもご覧ください。

https://www.youtube.com/watch?v=ptCG41MD57Y

なお、実際に使う場合には、こちら⇓など、きちんと使い方を紹介しているサイトをご覧になってからにしてください。

気になる料金については、この時期は教育機関向けに無料プランを用意しているようです。

有料になっても、ホスト側が月々2000円くらい払えば、受講生側は100人まで無料で参加できるプランがあります。

zoom.us

月々2700円で300人まで参加できるプランもあるようで（ただし、10ホスト分以上のまとめ買いが必要なようで、実際は月々27000円からになるようです）、多くの大学の授業はこれくらいで対応できると思いますが、大学単位で加入している場合もあると思いますし、 これから加入する大学もあると思いますので、今回の無料プランを利用しつつ所属大学の動向を注視しておくのがよいのではないかと思います。

学生の負担が！

そもそも、

という問題があるので、ゼミ単位くらいならなんとかなったとしても大人数の授業の場合には 全員きちんと参加できる環境があるかどうかを確認する必要がありそうです。

その上で、ですが、パソコンで何らかのソフトを使わないとできないような 内容でなければ、スマホかタブレットがあれば大体大丈夫ですので、そこまで行ければ あとは授業の組み立て方次第で対応できる授業もあるでしょう。ただ、ネット接続料金が それなりにかかってしまうので、使い放題プラン的な契約をしていない限り なかなか難しいことになりそうです。この点もなんらかの配慮が必要そうです。

こんなとき、たとえば、孫正義さんが「コロナ対応期間中のオンライン授業時間分の無料SIMカード、すべての学校を対象に配りますよ」と言ってくださったら、 自分の回線全部ソフトバンクに乗り換えて一生使いますけど、どうでしょうかね？

現実的には、「距離を離して座れるようにしたパソコン端末／タブレット端末席」などを図書館やラーニングコモンズのような ところにたくさん配備してそこには来てもいいようにするとか、パソコン端末室で距離を離して座ってもらうようにするとか、wifiは用意されているところが 今時は多いでしょうから、端末は用意せずともパソコン／スマホ／タブレットのいずれかを持ち込んでもらって良いあんばいに着席してもらう、 という感じでしょうか・・・。これはなかなか難しいところです。

著作権が心配！

受講生のみを対象に、ライブ配信の中での利用であれば、著作権者の許諾なく著作物を利用できるようです。

fd.code.ouj.ac.jp

www.kknews.co.jp

ただし、「「主会場」での授業が「副会場」に同時中継されている場合に」限られるようですので、その点もご注意ください。

www.bunka.go.jp

＜オンデマンド配信の場合はちょっと大変です！＞

「がんばって取り組んだオンライン講義を録画したのだし、割とうまくいったような気がするから学生達がいつでも復習できるようにオンデマンド配信しておこう」と 思ってしまうのは人情ですが、それはいきなりハードルが高くなります。

current.ndl.go.jp

上記のサイトにも説明されているように、先日の著作権法改正によりオンデマンド配信の場合にも対応できるようにするための制度が用意されつつありますが、まだ実施段階には至っていません。 （実施段階に至ったとしても、お金を払わねばならない上に契約が必要、かつ、契約範囲でしか対応できないために契約範囲の確認という業務も発生しそうで、 個々の教員の努力でなんとかなるレベルかと言えばちょっと難しいです。大学単位とか大学コンソーシアム単位等での対応になるのではないでしょうか。） ただし、今回の状況にあわせて緊急避難的な措置が一部で行われています。

以下の頁を見ると、一般社団法人授業目的公衆送信補償金等管理協会（SARTRAS）の「声明」を受けて、参加団体が 徐々に対応を表明しつつあるようです。

新型コロナウィルス感染症対策に伴う学校教育におけるICTを活用した著作物の円滑な利用について | 文化庁

今のところは、上記のように対応を表明してくれている団体が管理する著作物以外は個別に著作権利用許諾を得るしかないようです。

向いてない授業もあるのでは？

まだあんまりあがってきてませんが、モノを実際に扱う授業だけでなく、対面での体験が重要なものも厳しそうです。

特に、初年次ゼミが挙げられています。

他にも色々あるようですので、少しずつリストアップしていきますね。

欧米出羽…

こういうとき、つい気になってしまう「欧米」ですが、欧州は色んな国・文化があってそんなに先進的でないところも結構ありますし、米国の大学も結構色々のようです。

米国の有力大学の多くはオンライン授業に移行するようです。ただ、授業料だけで年間300-500万円くらいとっているようですので、日本の大学とはできることが全然違います。学生10人あたり教授なら1～2名分、助教なら3～6名分くらい違いますし、その財力を以て教育・研究支援職の人達もたくさん雇っているので、状況が全然違います。メディアを見ていると有力大学の話ばかり伝わってきますが、それほど有力でない大学教員の知人の話を聞いていると、教員や学生のIT環境に問題があって難しい、という話が出ていました。

欧州の大学の場合、学費無料や安めの設定をしているところもある一方、ITインフラが脆弱なところも結構あったりして、全体として語るのはちょっと難しいような感じがしております。

我々は我々で、できることを着実にがんばりましょう。

「ネットで国際会議」に向き合ってみよう

オンライン授業

このところ、COVID-19のために世界中で会議が中止・延期になってきています。かく言う筆者も、2月末くらいからほとんど出ずっぱりだったはずの予定がほぼなくなってしまい、自宅か職場近辺（自転車通勤）をうろうろしております。

イベントの中には、情報処理学会全国大会のように、大規模学会であるにも関わらずオンラインで開催してしまう例もでてきていて、さすが情報処理学会、と圧倒されるところです（身内褒めです）。

sites.google.com

その少し前ですが、筆者は、3月上旬に、東京大学大学院の人文情報学拠点（いわゆるデジタル・ヒューマニティーズの教育研究をしているところ）のゼミで一緒に研究をしてきた小風尚樹氏と、ボストン近郊のマサチューセッツ州ノートン市にあるWheaton Collegeで開催されるワークショップに呼んでいただいて講演をする予定がありました。Wheaton Collegeには現在、デジタル歴史学の代表的な研究者の一人でありTEI協会の理事長をしておられる Kathryn Tomasek先生がいらっしゃり、これまでにも共同でデジタル歴史学に取り組んできており、その一環としてのワークショップでした。

wheatoncollege.edu

しかしながら、3月上旬ということもあり、直前で出張をキャンセルすることになりました。そこで、ご相談の結果、ビデオ会議システムの雄、Zoomを用いて遠隔講義を実施することになりました。遠隔ということもあり、小風氏の発表に限って実施していただきましたが、先方は20人ほどの参加があり、それほど大きくないカレッジで、"Stakeholders in the British Shipbreaking Industry"というテーマで、しかもデジタル歴史学、というマニアックな内容にしてはなかなか人が集まってくださり、質疑応答も盛り上がりました。それまで会ったこともなかった人から受ける興味深い質問、という、国際会議ならではの体験が自宅にいながらにしてできたという経験は私にとってはなかなか新鮮なものでした。

ここで思い出したのは、（ここの2段落は筆者の思い出話ですので、興味がない方は飛ばして次の次の段落に行ってください）かつて筆者が担当していた遠隔講義の話です。もうずいぶん古い話になりますが、2001年10月に山口県立大学に着任した際、頼まれていた仕事の一つは、少し離れた山口大学とを結ぶ遠隔講義システムの構築と運用管理でした。まだ光ファイバー網が県内に張り巡らされ始めたところで、その目玉事業の一つだった（ので、開始された際にはセレモニーがあって地元の新聞の一面に載りました）。遠隔講義システムは、専用に開発されたもので、100席以上ある学生用机にはそれぞれマイクが装備され、講師用机に配備されたタッチパネルに座席のアイコンがずらっとリストされて、いずれかの座席のアイコンをクリックするとその席についている学生の顔がカメラでクローズアップされて（これは事前に各座席の位置がプリセットされている）、発言を許可する、という風になっていました。諸々あわせて1500万円かかったらしく、私が着任した時はすでに設置作業が開始されている段階で、かなり大がかりなシステムでした。

　当時難しかったのは、これで実施された授業を制度的にきちんと単位化できるようにすることと、これを使って授業が可能な授業とその担当講師を見つけることでした。そこは端折るとして、結果として、私も授業を1コマ配信することになりました。いわゆる一般教養＋工学系向けの授業として、工学倫理の授業を配信しました。情報倫理をやっていたので工学倫理もできるだろう、という話になったのでした。当時の単位認定基準をクリアするのに色々な工夫があり、結果として、手元に100人、先方に150人くらいの授業として展開する形になりました。各座席に用意されたマイクにはY/Nのボタンも用意されていて、そのボタンを使ってアンケートを随時とって、それをグラフで画面に表示できるようにもなっていました。慣れた頃には、アンケートの結果⇒学生に詳細を聞く⇒それに基づいてその場でアンケートを作成、というようなこともしていました。専用システムで「あちらの部屋の全体」を見るのと「各学生の座席に注目する（各座席のマイクで音も拾える）」がさくさくと切り替えられるようになっていたので、私語をしていそうな学生の席にあわせて私語をしているかどうか確認してちょっと注意をする、といったこともできていました。（今はどうかわかりませんが、当時は私語があると授業後や授業評価で「どうして私語を注意しないのか」というクレームが学生から出ていたことがありましたので）。そこで働いていたほとんどの期間、前期も後期も1コマずつそういう授業を続けたことになりますが、当時は専用ハードウェアが必要だったものが、今はそれとほとんど同じことがソフトをインストールするだけでできてしまうというところに技術の進歩を深く感じたのでした。特に、カメラ位置のプリセット、という話が各人のノートPCやタブレットについたカメラで対応できるようになったという点（その背景にある諸々の技術進歩）に圧倒されています。

　さて、思い出話はともかく、今回、Wheaton Collegeでのワークショップで痛感したのは、もう、「海外出張旅費（を払えるほどの研究費）を持っていない」ということがディスアドバンテージにならないのではないか、ということでした。Zoom自体は2年前くらいから使っていて、特に欧米の人達と会議をするのによく使っていましたが、ちゃんとした研究発表の場で、発表者がZoomで発表する様をZoom経由でリアルタイムに見るのは多分これが初めてでした。それまでもSkypeでは結構やっていましたが、Skypeは一対一が基本で、一対多だとあまりうまく動いてくれなかったり、音が途切れやすかったり、結果として質疑応答があまりうまくできなかったり、ということがありました。ソフトウェアの違いというよりネットワーク環境や各種ファシリティの進歩の結果かもしれませんが、今回Zoomで実施した国際ワークショップは、あまりにも自然に、発表が行われ、質疑応答がなされました。

　これまでもすでに可能ではあったことですが、今回のように、情報処理学会全国大会のようなところでもビデオ会議システムで開催されたことで、認知度は一気に高まったと思います。海外でも、このようにしてやむにやまれずZoomによる会議が実施される動きが広まれば、こういうことにはやや後ろ向きな学術界でも、ビデオ会議システムでの公式な国際学術大会のようなものを開催するということが現実的になっていくことでしょう。その結果、「旅費がとれなくても国際会議で発表ができる＝（遠くの国にいるあの人に発表を聞いてもらってコメントをいただける AND 世界のどこかにいる共通の関心を持つ見知らぬ人と話ができる）」ようになるのだとしたら、いよいよ、かなりのゲームチェンジが行われるようになるのではないか、ということを実感したところでした。良い発表論文さえ書ければ、研究費をとれてなくても、世界のどこかにいる似たような関心を持つ人を見つけて話をすることができる、というのは、国際会議に行くようになって初めて似たような関心の人達をたくさん見つけることができた自分としても、非常に魅力的な話です。

　これはすでに多くの人が気づいていることだと思いますが、これまで、国際会議で発表するためには、出張旅費を確保するための予算を自ら取れるか、あるいは、予算をとれる先生についているか、といったことがほぼ必須でした。つまり、研究費をどうにかすることについてのそれなりの知識（とおそらく経験）がなければ国際会議発表は非常に難しいことで、それゆえに、それができる程度の各種知識と経験を身につけることが多くの分野の研究者にとっては必須事項であり、そうでなかった分野も国際化を求められるなかでそうせざるを得ないようになっていきそうだったのですが、むしろ、それがなくても国際会議発表ができるようになってしまう未来が、すぐそこにやってきた、ということになります。

　そして、そうすると気になるのは、以下の2つの事柄について説明を求められるようになるのではないか、ということです。

  1. その国際会議に敢えて旅費を支出してリアル参加する理由

  2. 旅費なしで国際会議発表できるのにしない理由

1．に関しては、実は結構説明が難しく、国際会議は、発表の後にも議論を続けて、一緒にご飯を食べたり何かのトラブルを一緒に解決したりしながら親交を深めることで、共同研究を始められるような（＝一緒に研究助成金を申請するような）信頼関係を作ったりする面があるので、基本的に、旅費があるならなるべく国際会議には参加して、日本人の仲良しだけで固まらず、なるべく現地の人とか、別の国の人のオープンなコミュニティに混じってご飯を食べたり話をしたりすることを周囲には推奨していますが、「敢えて旅費を支出する理由」として「関係者と親交を深めるため」というのが広く認められるか、というところが気になります。研究を主にしている大手大学なら無問題だと思いますが、大学によってはそういうことを聞いてくる事務方があるかもしれません。そのような、当たり前すぎて説明する必要があると思ってなかったようなことを聞かれると、割と心が折れやすいので、それに対する説得力のある説明をきちんと用意しておかないと、早晩、あちこちで悲嘆の声を聞くことになるかもしれないと、少々危惧しています。

　やや余談ですが、このことに薄く関連して面白い体験が一つあります。これも偶然に小風氏関連なのですが、小風氏が主宰する東京デジタルヒストリーという学生団体が2年前にシンポジウムを開催した際に、登録者限定でZoomによる配信を行いました。その時私はたまたまロンドンに滞在しており、ロンドンからZoomでつないでみなさんの発表をおうかがいしていたのですが、偶然にも他に2名、ロンドンからZoomで閲覧しているという人がおり、うち一人はそれが初対面だったのですが、Zoomのチャットで意気投合して3人で一緒にご飯を食べに行った、ということがありました。Zoomは視聴している間に他の視聴者とプライベートチャットができるため、そのようなやりとりを通じて、現地の会合に参加していなくても、関心を共にする人と親交を深めることができたというのはなかなか面白い経験でした。

　2. については、これまでも国際ジャーナルに論文投稿できるのにしてない、という批判はあり得たわけですが、ジャーナルは一定の長さのものが必要な上に査読も厳しく、分野によってはそんなに種類も多くなくて適した投稿先が見つからない、といったことも言えたかもしれません。しかし、旅費を出さずとも国際会議で発表できる、ということになると、事情はずいぶん変わってくるでしょう。国際会議はジャーナルよりも間口がずっと広いですし、十分にまとまっていない挑戦的・実験的な発表を受け入れているところもたくさんあります。国際会議発表を抵抗なくできる人であれば、今の流れだと、旅費用の研究費を取れる人だけでなく、取るのが苦手な人でも、国際会議発表をどんどん増やしていくでしょう。そこでは、国際会議発表をしてない人との研究業績の差がますますくっきりと見えるようになってしまって、「なぜ国際会議発表もしてないのか」ということについての説明を求められる世界が間近に迫っているように思われます。

ただ、ここから、国際学術ジャーナルがたどった道筋（業績稼ぎのために泡沫的なジャーナルが乱立した）を振り返ってもう少し想定を進めてみると、2. のような状況を踏まえ、いわゆる泡沫的な国際会議が乱立することが予想されます。Zoom等でのインターネット上でのビデオ会議は限りなく大量に同時進行させることができますので、早晩、とんでもない数の「国際会議」が開催され、「国際会議発表」が量産されることになるのだろうとも思います。もちろん、業績評価の局面では、国際会議発表の評価はジャーナルに比べるとそんなに高くない場合が多いので、そういう意味ではジャーナルのようなことにはならないかもしれませんが、評価指標的なものとしてはあてにならないような、せいぜい、一定数、コンスタンスにこなしているかどうかを見る程度のものになってしまうのかもしれません。

ちょっと後ろ向きなことばかり書いてしまいましたが、それでもやはり、先週のWheaton Collegeでの小風氏の発表で感じた、「きちんとした場を作った上でのビデオ会議による発表が太平洋を越えてもたらした臨場感」は、今後の学術界の新しくポジティブな可能性を想像させずにはいられないものがありました。

ちなみに、Zoomというソフトウェアは、今のところ、手軽にビデオ会議を始めたい時にはとてもおすすめです。パソコンでもスマホでもタブレットでも簡単に使えます。パソコン同士だと、ホスト側が「招待URL」を送れば、参加する側はクリックするだけでGoogle Chromeにて会議に参加できます。スマホやタブレットだとアプリをインストールする必要はありますが、他のアプリの操作が普通にできるなら特に難しいことはありません。特にお勧めなのは、ホスト側が登録していれば、参加者側は登録などせずとも使える、という点です。参加者側の負担が非常に少ないです。筆者はこれまで、会議だけでなく、海外に行っている大学院生の論文指導にも使ってきました。

Zoomは、ホストを担当する人がユーザ登録をすれば無料で使えますが、その場合、参加者100人まで、40分で切れて再接続しなければなりません。40分ごとに再接続しても問題ないのであれば無料でも問題ないと思います。また、1対1での通信なら、無料でも時間制限なく使えるようです。

筆者のおすすめは、「プロ」プランです。米ドルで支払うと月々14.99ドルで、参加者100人まで、24時間までのミーティングができるようで、録画やその他細々とした便利な機能がついてますので、大人数でなければこれで十分ではないかと思います。ゼミ等を運営している教員であれば、この金額を支払うのはそんなに難しいことではないでしょうし、何らかのコミュニティであれば皆で分担するとかなり安価になりそうです。

Zoomの料金体系については、詳しくはこちらをご覧ください。

つい、Zoomをおすすめしてしまいましたが、他にもSkype やHangoutなど、類似の便利なサービスがありますので、色々試してみていただいてもよいかもしれません。

というわけで、筆者の最近の体験が、多少なりともお役に立つことがありましたら幸いです。

Apache Solrの検索でtoo many boolean clausesと言われた時

Apache Solr

細かい話で恐縮ですが、自分のメモも兼ねて。

Apache Solrで作ったインデックスに細々検索をかけて、少し他の人にもチェックをお願いしたら、少し長めの文字列で検索した時に以下のようなエラーが出るという報告をいただきました。

{
  "responseHeader":{
    "status":400,
    "QTime":82,
    "params":{
      "q":"title:初期仏典における十支縁起説の成立"}},
  "error":{
    "metadata":[
      "error-class","org.apache.solr.common.SolrException",
      "root-error-class","org.apache.lucene.search.BooleanQuery$TooManyClauses"],
    "msg":"org.apache.solr.search.SyntaxError: Cannot parse 'title:初期仏典における十支縁起説の成立': too many boolean clauses",
    "code":400}}

一文字減らすと問題なく検索できるという状況で、別の文字列だともっと長くても大丈夫だったので、おそらくcharfilterで実際の検索式が長くなりすぎているのでは…と思ったものの、検索式をいじることはできない（というか、気合いがあればできますが、その後のアップデートに対応できなくなるので避けるべし）ので、設定でなんとかならいあものかと調べていたところ、以下のサイトをみつけました。

yomon.hatenablog.com

なるほど、solrconfig.xmlか、最初に読み込まれるコアのものをとりあえず書き換えればいいのか、と思ってsolrconfig.xmlを見てみたところ、

 If this per-collection limit is greater then the global `maxBooleanClauses` limit specified in `solr.xml`, it will have no effect, as that setting also limits the size of user specified boolean queries.

などとなっていましたので、solrconfig.xml中のmaxBooleanClausesの値を増やした後に、solr-8.4.1/server/solr/solr.xml の方も

<int name="maxBooleanClauses">${solr.max.booleanClauses:2048}</int>

という風に値を増やして、bin/solr restart。これで動くようになりました。ほっ。

検索した語の前/後のn文字をグループ化＆ヒット数の多い順にリスト＠みんなで翻刻サーチ

　本日は、顧問としてお手伝いしている大学院生たちのデジタルヒストリー研究グループ、ToDHによるシンポジウムがあり、その関係で朝からお仕事でした。シンポジウムは大阪大学と九州大学からの招待講演の先生方お二人の深いお話と、主に大学院生達による新鮮な発表とで、とても充実したものであったように思われました。彼らの成長ぶりを確認できたという意味でもうれしいことであり、これからもさらに自ら高めつつ、相互に高め合っていただければと思うところです。コロナウイルスへの対応として、Youtube配信をメインとした開催になりましたが、これは大向一輝氏による安定の配信でした。会の模様はtwitterのハッシュタグ等でもある程度確認できるようです。

twitter.com

ところで、シンポジウムの最中、地震史料のテキスト分析に関する発表を聞いていて、近世以前のテキストの分析ってやっぱり形態素解析のところですでに難しさがあるよね…と思って、みんなで翻刻サーチへの機能追加ですが、「検索した語の前か後のn文字をグルーピングしてヒット数の多い順にリストする」というものを作ってみました。

たとえば、以下のように「通り」で検索した後に、

https://honkoku.dhii.jp/search/?url_key=%E9%80%9A%E3%82%8A&url_var=1&url_proj=%E3%81%99%E3%81%B9%E3%81%A6&url_col=%E3%81%99%E3%81%B9%E3%81%A6

以下のように、「前の2文字をグループ化」してみると、うら通り: 9件、本橋通り: 8件、本郷通り: 7件…という風になります。

f:id:digitalnagasaki:20200223235115p:plain

「本橋通り」はちょっと変なのでもう1文字増やしてみると…「日本橋通り: 8件」という風になりました。

f:id:digitalnagasaki:20200223235306p:plain

　N-gram分析にしたらいいじゃないかという声が聞こえてきそうではありますが、とりあえず探索的な使い方ができるといいのではと思って作ってみたのでした。

他にもたとえば、「阿弥陀」の次の1文字は何が多いかな…という風なことを確認してみたり、

f:id:digitalnagasaki:20200223235508p:plain

どんな菩薩が多いかな…と確認してみたり、と色々できます。

f:id:digitalnagasaki:20200223235620p:plain

形態素解析の精度が高いのであれば、いちいちこんなことをしなくてもOKですので、むしろ形態素解析ソフトを組み込んでみようかとも思うのですが、まあとりあえずこれはこれで、ということで、よかったらお試ししてみてください。

今更 jQueryですが、簡単な要素の表示／非表示程度なら…

Web頁をインタラクティブに見やすくするための工夫としてJavascriptを使うのはもうごく一般的な手法になっています。Javascriptは、そのまま書くのはちょっと大変なので書きやすくするための工夫が様々に凝らされています。ライブラリやフレームワークが各地で開発公開されており、百花繚乱といった状況です。中でも、大規模開発が広まるなかで、React、Angular、Vueの3つがよく取り沙汰されるようになってきています。筆者もVueを勉強中で、少しその良さがわかってきたところですが、一方で、ちょこっと何かをしたい、くらいのことであれば、こういう大がかりなものを使わなくてもよいのではという気持ちになることも少なくありません。 　少し前まで、Javascriptをちょこっと使ってギミックを用意する時によく使われていたJavascriptのライブラリに、jQueryというライブラリがあります。多分、まだ現役です。Japanese Woodblock Print Search - Ukiyo-e Search というサイトを作ってしまうほど浮世絵好きなプログラマのJohn Resigさんが作り始めたもので、現在でも、読売新聞や首相官邸のサイトなど、我が国の主要Webサイトではまだまだ現役です。CSSを知っていると、あと一歩知識を深めるだけで使えてしまうという手軽さがありますので、筆者も10年ほど前から非常に重宝していました。 　さて、どういう風に手軽かと言えば、たとえば みん翻検索 by SAT で使っている「資料群名をクリックすると資料の一覧が表示される」ものですが、これは、

1.「資料群名のタグにclassを与える」 2.「資料一覧を最初は隠しておく」 3.「資料群名のclassを持つテキストをクリックすると資料一覧を表示する」 4.「資料一覧がすでに開いている時は閉じる」

というような感じに書くことができます。

具体的な書き方ですが、まず、jQueryのファイルを読み込んでおく必要があります。jQueryのサイト⇒ jQuery から https://code.jquery.com/jquery-3.4.1.min.js をダウンロードして、適当なディレクトリ（フォルダ）に置いておきます。flaskを使っている場合はstaticディレクトリに 入れておくのがよいでしょう。その後、templates/index.htmlからこのファイルを読み込めるように、以下のタグを<head>～</head>の中に入れておきます。以下のような 感じです。flaskでない場合は、HTMLファイルからこのjquery-4.3.1.min.jsを読み込めるように適切なパスを書いてください。

<script src="/static/jquery-3.4.1.min.js"></script>

その後、<head>～</head>の中に、Javascriptを書いておくのですが、その前に、HTMLの方をどういう風に記述するか考えておく必要があります。

上に書いたようなことを実現するためには、以下のようにして、資料群名、資料一覧にclassをつけて、両者を操作できるようにしておきます。classにしているのは、 これが複数登場した時にも同じプログラムで処理できるようにするためです。1文書の中で1つしか操作しないことが明らかな場合にはclassの代わりにidをつけてもよいです。 さらに、資料群名と資料一覧をまとめて操作できるようにするために、両者を包むdivを作り、それにもclassをつけておきます。さらについでに、資料一覧（の要素）は、 デフォルトでは非表示にしておきます。

<html>
（略）
<body>
（略）
<div class="group">
  <div class="group_name">資料群の名前</div>
  <div class="witnesses" style="display:none">
    <ul>
      <li>資料一つ目
      <li>資料二つ目
    </ul>
  </div>
</div>
</body>
</html>

このHTMLタグに対して操作を行うのであれば、「class:group_nameがクリックされたら、兄弟要素であるclass:witnessesを表示する」という風に書くことになります。 そこで、今度は、<head>～</head>の方に戻ります。先ほど書いたjqueryを読み込むタグの次に、以下のように書いてみましょう。

<script>
<script>
$(function(){
  $(".group_name").click(function(){
    if($(this).siblings(".witnesses").css('display') == 'none'){
      $(this).siblings(".witnesses").show();
    }
    else{
      $(this).siblings(".witnesses").hide();
    }
  });
});

</script>

そうすると、今目指していた機能は実現できるはずです。操作対象となる要素の指定はCSSのセレクタとほぼ同様で（これがjQueryのよさです）、 classを指定したければ .group_nameや .witnessesのように . をつけます。idや要素名の指定の仕方は自分で調べてみましょう。 その他諸々、上記のスクリプトにはjQueryの大事な要素がたくさん詰まってますので、jQueryの教科書などがあれば見ながら 確認してみてください。

次に、もう少し工夫するべく、CSSをいじってみましょう。資料群名のテキストには、カーソルをあてたら文字の色が変わってくれると うれしいですね。

CSSを書く時は、<head>～</head>の中の、>scrpt<の前に書くのが比較的一般的です。ついでに、上の方で書いた style="display:none" もこちらに書いてしまいましょう。

<html>
<head>
（略）
<sytle>
.group_name:hover{color:blue}
.witnesses{display:none}
</style>
<script>
（略）

大体、こういう感じで必要最低限のことはできるかと思います。そこから先は、私のgithubを探してみてください…。

続：Apache Solrでファセット表示のタネ作り

Apache Solr

今回は、以下の企画の続編です。

digitalnagasaki.hatenablog.com

が… facet.pivotという機能を使った方が断然楽であるようですので、それを使って みんなで翻刻サーチに資料単位での絞り込み機能をつけてみたところです。 たとえば、以下のリンクのような感じです。

みん翻検索 by SAT

これはとっても簡単で、たとえば以下のようなURLでローカルのApache Solrにアクセスしてみると、

http://127.0.0.1:8983/solr/minhon3/select?facet.pivot=project_st,collection_st,entry_st&facet=on&fl=entry&q=textConn%3A%E9%98%BF%E5%BC%A5%E9%99%80&row=-1&facet.pivot.mincount=1

以下のような結果を得られます。

{
  "ResponseHeader": {
    "Status": 0,
    "QTime": 4
    "Params": {
      "Q": "textConn: 阿弥陀"
      "Facet.pivot": "project_st, collection_st, entry_st"
      "Fl", "entry",
      "Row": "- 1"
      "Facet", "we"
      "Facet.pivot.mincount": "1"}}
  "Response": { "numFound" 4, "start" 0, "Doc": [
      {
        "Entry": "[富士山 図]"},
      {
        "Entry": "じ し ん 百万 遍"},
      {
        "Entry": "じ し ん 百万 遍"},
      {
        "Entry": "兩 界 圖 位 (京都 東 寺觀 智 院 藏 本)"}]
  }
  "Facet_counts": {
    "Facet_queries": {}
    "Facet_fields": {}
    "Facet_ranges": {}
    "Facet_intervals": {}
    "Facet_heatmaps": {}
    "Facet_pivot": {
      "Project_st, collection_st, entry_st": [{
          "Field": "project_st"
          "Value": "翻 刻 石 本 コ レ ク シ ョ ン!"
          "Count": 3
          "pivot":[{
              "Field": "collection_st"
              "Value": "ス テ ー ジ 1"
              "Count": 1,
              "pivot":[{
                  "Field": "entry_st"
                  "Value": "じ し ん 百万 遍"
                  "Count": 1}]},
            {
              "Field": "collection_st"
              "Value": "ス テ ー ジ 2"
              "Count": 1,
              "pivot":[{
                  "Field": "entry_st"
                  "Value": "じ し ん 百万 遍"
                  "Count": 1}]},
            {
              "Field": "collection_st"
              "Value": "ス テ ー ジ 5"
              "Count": 1,
              "pivot":[{
                  "Field": "entry_st"
                  "Value": "[富士山 図]"
                  "Count": 1}]}]},
        {
          "Field": "project_st"
          "Value": "日本 の 仏 典 を 翻 刻"
          "Count": 1,
          "pivot":[{
              "Field": "collection_st"
              "Value": "大 正 新 脩 大 藏經 図 像 編"
              "Count": 1,
              "pivot":[{
                  "Field": "entry_st"
                  "Value": "兩 界 圖 位 (京都 東 寺觀 智 院 藏 本)"
                  "Count": 1}]}]}]}}}

この場合、ピボットとしてデータを取り出せるだけでなく、単なるファセット機能での出力結果と比べて、値と登場数をもう少し便利な形で取り出すことができますね。 こういうものもうまく使えると、検索がより便利になりそうです。

なお、みんなで翻刻サーチでは、検索結果を全部HTMLに変換した上で、jQueryを使って一部非表示にしたりクリックして表示できるようにしたりしています。flaskとの組み合わせだと こういう組み込みはとても楽にできますね。

Evasion of breathing tax: editing TEI with VSCode

TEI

This article introduces how to set up VSCode so that any user can edit TEI/XML relatively easy by free, based on a brief report by Yifan Wang who is graduate student of the University of Tokyo and junior fellow in the International Institute for Digital Humanities.

I strongly recommend to use Oxygen XML Editor for TEI, if you have enough budget due to its tremendous usability.

Breathing with VSCode would not be easier than with Ox, but we can swim.

The setting process is blow:

  1. Download and install VSCode.
  2. Download and install Java.
  3. Configure JAVA_HOME.
  4. Download and install XML extension for VSCode.
  5. Edit settings.json in VSCode.
  6. Restart VSCode
  7. install XML Tools
  8. Restart VSCode
  9. Try to open and edit a TEI/XML file.
  10. Install vscode-htmltagwrap
  11. Restart VSCode

Here we go!

1. Download and install VSCode.

Do it from the URL below:

https://azure.microsoft.com/en-us/products/visual-studio-code/

If you want to use non-English version, you may find a language pack as an extension of VSCode.

2. Download and install Java.

Do it from the URL below:

You can download and install Java according to the instruction in the URL below:

How do I install Java ?

3. Configure JAVA_HOME.

This setting is a little difficult for beginners and different between Windows and MacOS.

For Windows, see below:

javatutorial.net

For MacOS, see below:

www.appsdeveloperblog.com

During this process, note the value of your JAVA_HOME (that is, the path of Java installed in your PC).

4. Download and install XML extension for VSCode.

Install XML extension on VSCode.

  1. Click "Extension" icon on the left-side bar.

  2. input "XML" in the input from

  3. Click "install" button surrounded by green in the "XML" extension provided by Red Hat.

f:id:digitalnagasaki:20200215041719p:plain

5. Edit settings.json in VSCode.

This step is most difficult in this process. Please do it carefully.

  1. After installing "XML" extension, click "setting" icon, then, select "Extension settings"

f:id:digitalnagasaki:20200215042802p:plain
open extension settings

  1. Find "Edit in settings.json" link on the center window and click it.

f:id:digitalnagasaki:20200215043151p:plain
click settings.json

  1. add "xml.java.home": with JAVA_HOME value in your PC. (You've already had it above.)

For example, "xml.java.home": "C:\Program Files\Java\jdk-13.0.1", is my case.

f:id:digitalnagasaki:20200215043345p:plain
settings.json

6. Restart VSCode

Restart your VSCode. After that, XML file can be validated on VSCode.

7. install XML Tools

Install "XML Tools" extension like below:

f:id:digitalnagasaki:20200215033026p:plain
xmltools

8. Restart VSCode

Restart your VSCode. After that, some convenient functions for XML are available like below:

f:id:digitalnagasaki:20200215044111p:plain
outline of XML

9. Try to open and edit a TEI/XML file.

Open a TEI file by this VSCode. Probably it would not work well because it can not treat Relaxng file as the schema. Then, replace your tag with the following:

<TEI xmlns="http://www.tei-c.org/ns/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.tei-c.org/ns/1.0 https://tei-c.org/Vault/P5/current/xml/tei/custom/schema/xsd/tei_all.xsd">

Then, you will be able to find what we want like below:

f:id:digitalnagasaki:20200215045004p:plain
tag candidates

10. Install vscode-htmltagwrap

So far, we don't have the "Ctrl-e" (or Command-e). We can not find the same function, but find a similar one as vscode-htmltagwrap.

f:id:digitalnagasaki:20200215030359p:plain
install htmltabwrap

See the usage carefully.

11. Restart VSCode

You must restart VSCode again to activate the extension.

12. Install Auto rename tag

"Auto rename tag" extension is also necessary for us. Install it and restart VScode:

f:id:digitalnagasaki:20200215035944p:plain
auto rename tag

As we might need some more functions, we will survey furthermore.