あまやどり開発雑記

システムエンジニア裏薄荷が”あまやどり”という夢をつづったブログです。

MENU

※新米ママとして育児系のブログ 裏薄荷の初ママ日記も運営しております。

「チャットボットの教科書」から考えたヒアリングシステム検討の方向性

あまやどり活動記

 

こんにちは。初めましての人もそうでない人も、裏薄荷(うらはっか)です。

 

今日は掲題の「チャットボットの教科書」を読破したので、簡単な内容紹介と、自身の"あまやどり"にどのように活用できそうか、というところをお話しようと思います。

 

目次

 

"あまやどり"で目指しているチャットボット開発

そもそも"あまやどり"って？

ブログのタイトルでもある"あまやどり"ですが、

 

誰かにとっての辛いことをしのげる場所

 

＝"あまやどり"

 

という意味を込めて使っています。

 

自分自身が辛かった時期、中学の頃だったのですが、部活に行ったり友達と喋ることでゆっくりとその時期を乗り越えることができました。

 

その頃の思いを原点に、同じように辛かったり困難な状況にある人の役に立つような場所づくりをしたい、というのが夢の出発点でした。

 

今は人よりも少しだけ得意だったプログラミングのスキルを活かして、誰かの役に立つシステムを開発するところから始められたらいいのかなぁ、と思ってます。

 

じゃあ具体的にどんなシステムをつくりたいの？

 

という話ですが。

 

自然言語の処理を応用して、生活相談をサポートするチャットボットをつくれたらなぁ、ということを考えています。

 

詳細はこちらの記事をご覧ください。

tnim-amayadori.hatenablog.com

 

 

チャットボット開発で実現したい機能

実現したい機能としては大きく以下の２つです。

 

ヒアリング機能

適切な相槌や質問を行うことで、相談者の置かれた状況や取り組むべき課題について明確にしていく機能です。

 

解決策のわかりやすい提示

有効な社会保障制度の利用方法や相談可能な他の専門団体の連絡先などをわかりやすく提示する機能です。

 

 

開発にあたってのネック

現在開発にあたって、一番ネックとなっているのが

 

ヒアリング機能をどのように実現させるか

 

ということです。

 

そもそものヒアリングの会話の流れというのはどんなものなのか、

学習ロジックはどのように組み立てればいいのか、

 

そういったことが見えておらず、実現の目途が立っていない状態です。 

 

 

「チャットボットの教科書」内容紹介

実際に企業でチャットボット開発に取り組もうと思った場合に、「チャットボットの教科書」の中でどの辺の記載内容が役立ちそうか、ということをお話しようと思います。

 

補足として、私自身は育休に入る前にやっていた仕事で、Amazonのレビュー内容を解析する、ということを検討していました。その関連で、チャットボット導入もしたいんだけどねー、という話もしていたり。

なので視点としては、チャットボット導入したいんだけどどこから手をつけようかなー、と迷ってるくらいのレベルの人だと思ってください。

 

 

内容の構成

目次(※)だと9章構成になっていますが、もっと大まかに分けると、大きく三部構成だと言えます。

※目次についてはリンク先("チャットボットの教科書")を参照してください。

 

第1章～3章までは、チャットボットの開発を行うにあたっての基本的な前提知識です。

そもそもチャットボットとは何かから始まり、どんなシステム構成になるのか、そして開発にあたってどんな手段があるのか、という話です。(①)

 

第4章～7章は、実際にBotpressというツールを使ってのごく簡単なチャットボットの開発レクチャーです。(②)

 

第8章と第9章は、実際に企業などでチャットボット開発を行い運営していく場合にどのようなことを考えなければならないか、という補足のお話です。(③)

 

 

チャットボット開発にあたって役立つ箇所

上記の三部構成の内、①と③については、どんなチャットボット開発をするにしても、役立つ内容でした。

 

いくつか開発において役立つと思える箇所をピックアップして紹介いたします。

 

 

チャットボットの特色を決める対話管理(DM)

①で説明されている「チャットボットシステムを構成するレイヤー」の説明は、チャットボット開発をする上で非常に重要な内容でした。

 

レイヤーとは、フロントエンド、対話サーバー、バックエンド、この３層構造で説明されています。

 

チャットボットとしてのコアな機能は対話サーバーになるわけですが、対話サーバーの中身も、言語理解(NLU)、対話管理(DM)、言語生成(NLG)の3つの構成になります。

 

３つそれぞれ重要なのですが、チャットボットシステムの特色によって大きく設計が変わってくるのが、対話管理(DM)になるでしょう。

 

対話管理(DM)内でシステム側の応答を決める方式として、以下の4つが紹介されていました。

 

  1. 状態遷移ベース：あらかじめ決められた話の流れを強制
  2. フレームベース：必要な情報を答えさせる話に誘導
  3. ルールベース：あらかじめ決められたルールに従って一問一答
  4. 用例ベース：回答例文集から似てる会話を見つけて一問一答

 

実際にはこの中の一つ、あるいは複数を組み合わせます。

チャットボットの用途によって、どの方式を採用するか決め、会話のシナリオを用意する必要があります。

 

 

 自分で開発したい人のためのFWや部品の紹介

「チャットボットの教科書」では"Botpress"というツールをメインに説明を行っていますが、"Botpress"以外にもどのようなツールなどが使えるか、2021年1月時点の情報を元にいくつか代表的なものを紹介しています。

 

どのような開発プラットフォームを利用するのか、プラットフォームの中でもどれを利用すればよいのか、それぞれの特色や選定におけるポイントが記載されており、非常に参考になりました。

 

 

セキュリティ対策とシステム保守

③の部分で、チャットボットの運営を考えた場合の補足があるわけですが、中でも企業として関心が高いであろうセキュリティ対策とシステム保守については、さわりの基本的な考え方と、Botpressでどのように設定可能か、ということを説明しています。

 

まあ一般ユーザーに公開しているシステム開発をやっている企業であれば、詳細は押さえているでしょうから、必要最低限の部分だけ、という感じですね。 本気でこれらについて書こうと思ったら、それぞれの項目について１冊ずつ本できちゃいますしね。

 

ただシステム開発担当にとっては不足でも、チャットボットの導入を検討している企業で、担当以外の人たちが担当と話す前の前提知識としてポイントを軽く押さえるにはちょうどいいレベルです。(システム担当の上にあたる人たちは、実際に開発・運営がはじまったらこんなレベルじゃなくてもっと具体的なレベルで理解している必要があるかとは思います。）

 

 

学習ロジックを作りこみたい場合には不足

「チャットボットの教科書」ではBotpressを用いてチャットボットの基本を押さえて手軽に開発できることを目指しているので、機械学習については殆ど触れていません。

 

Botpressに標準の学習ですと、こうした発話に対してはこんなアクションして、ということを登録できます。この"こうした発話"について、最低3件のセリフパターンを登録することで、学習がされるわけです。

 

もちろん3件では精度が低いので、ある程度の精度のためには最低10件必要とのことです。

 

……10件、それでも一般的に機械学習で必要とされる件数からすると、かなり少ないですね。

 

こうした点は、手軽にチャットボットを開発できる、という意味では非常にBotpress便利だなぁ、と思います。

 

ただ一方で、この学習方法ですと、そもそも明確なシナリオに沿った会話を想定しているチャットボットでないと実現できません。

 

自分がやりたいヒアリング機能は、この学習方法だと単純には実現できなさそうだな、という感想でした。

 

 

読み終えて

今後の"あまやどり"開発方向性

一つの選択肢としてBotpressはどうなのだろう……ということで「チャットボットの教科書」を読み始めたのですが、想像以上に収穫がありました。

 

収穫の一つが、まずはヒアリングの会話を１例でもいいから分析しないと、どういったツールを使うかも検討できないな、と気づいたことです。

 

ヒアリング機能を実現させようと思った場合、内容紹介で話した対話管理(DM)におけるシステム応答の方式として、"状態遷移ベース"が一番適切かな、と思ったのですが、ではどのような状態遷移をするのか漠然としているな、というのが正直な感想でした。

 

ちょうど先日、web公開されているとあるガイドラインから会話事例を入手できたので、それを元に一度会話の流れを分析してみようと思います。

 

 

※書籍の購入はよろしければ下記のリンクからどうぞ。

 

 

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

チャットボットの教科書 [ 中村 雅之 ]
価格：3080円（税込、送料無料) (2021/7/3時点)

楽天で購入

 

 

※上記のリンクはアフィリエイト広告です。

-----------------------------------

素材取得元

相談のできる銭湯がある街に住みたいですか？

あまやどり活動記

温泉にお湯が注がれている写真です。

 

こんにちは。初めましての人もそうでない人も、裏薄荷(うらはっか)です。

 

今日は

 

今週のお題「住みたい場所」

 

にチャレンジしようとネタを考えたのですが、リアルに住みたい場所を書くと自分の生活圏バレそうだな、と思ってしまいまして(^^ ;)。

 

色々考えてみたのですが、昔から考えていた、こういう施設つくりたいなぁ……という妄想を元に記事を書こうと思います。

 

むしろ「住みたい場所」は自分でつくるんだ！という勢い

……まではないので妄想ですが(笑)。

 

こんな施設があったら利用したいと思うかどうか、そんな施設のある街に住みたいと思うかどうか、ご感想いただけましたら幸いです。

 

目次

 

前置き

そもそも"あまやどり"って何？

ブログのタイトルでもある"あまやどり"ですが、

 

誰かにとっての辛いことをしのげる場所

＝"あまやどり"

 

という意味を込めて使っています。

 

自分自身が辛かった時期、中学の頃だったのですが、部活に行ったり友達と喋ることでゆっくりとその時期を乗り越えることができました。

 

その頃の思いを原点に、同じように辛かったり困難な状況にある人の役に立つような場所づくりをしたい、というのが夢の出発点でした。

 

……漠然としてますね（＾＾；）

 

今は人よりも少しだけ得意だったプログラミングのスキルを活かして、誰かの役に立つシステムを開発するところから始められたらいいのかなぁ、と思ってます。

 

……なんですが、いつか資金ができたら物理的な拠点もつくりたいなぁ、という妄想はありまして。

 

システム開発の方も実現目途が経ってないので妄想としか言えませんが、せっかくなのでブログのネタにしようかということで今回どんな施設をつくりたいのか、書くだけ書いてみようと思います。

 

 

"あまやどり"の物理的な拠点のイメージ

こんな施設をつくりたい

以下のような設備とサービスを利用できる施設をつくりたいな、と思ってます。

 

 

なんでも相談所

どんな悩みでもここに行って話せば解決の糸口が見つかる、そんな相談ができる場所。

 

いきなり専門の相談機関に行くには、抱えている問題に対してどこに行けばいいのかわからなかったり、初めてで心理的なハードルが高くて足が重くなってしまうことがあると思います。

 

そうした人に気軽に立ち寄って相談してもらって、適切な専門機関を紹介したり、必要であれば初回の相談予約の電話を入れたり、同行したりすることを行ってくれる場所です。

 

 

男湯と女湯の他に優先湯のある銭湯

相談所があるだけじゃ、気軽な雰囲気は出ないでしょう。

普段の生活から気軽に立ち寄るきっかけが必要です。

その一つとして、銭湯はどうでしょう？

 

普通の男湯と女湯の他に、事情があって他の人と一緒に入るのが難しい人のための個室の"優先湯"をいくつか用意したいですね。

 

例えば困窮していて生活が苦しい人の中には、何日もお風呂に入れていない人もいるでしょう。他の人と一緒に入ろうとすると、嫌な顔をされてしまうかもしれません。

 

もしくはLGBTQのような人たちは、単純な男女の括り一つだけでは銭湯を利用できないでしょう。

 

あるいはお風呂に入るのに介助が必要だけれど、自宅のお風呂が壊れて利用できない人だとか。

 

そういう人たちのための"優先湯"を用意した銭湯があったらどうでしょう？

同じような理由で、銭湯や温泉につきものの休憩室も、男性用と女性用の他に、優先休憩室があるといいですね。

 

 

自由に利用可能なレンタルスペース

集中して勉強できる場所、個人作業ができる場所がほしい人、あるいはちょっとした会議をしたい人のために、個室ブースや会議室を時間区切りでレンタルしたいですね。

 

既にこうしたスペースは、マンガ喫茶やネットカフェ、あるいはコワーキングスペースやシェアオフィスといったサービスがあります。

 

なのにあえてこのようなレンタルスペースをつくるのは、相談の延長で何か作業をしたいと思ったり、専門家を交えての話し合いが必要になった場合に、利用できるスペースがあるといいなと思ったのが一つの理由です。

 

もう一つの理由は、自分が学生だった頃、受験のために一時期図書館通いしていたのですが、図書館のブースが居場所になっているように見えるホームレスの方を見かけることがあったことです。

 

色んな種類の"場所"を提供した方が、自分の過ごしやすい"居場所"を見つけられるのではないかなぁ、ということで、こうしたスペースも用意できるといいのかな、と思いました。

 

 

カフェとか足湯とか

普段の生活から気軽に立ち寄るきっかけとして、カフェとか足湯とかもどうかなー、と考えつつ。思いつき程度のオプションですね。

 

カフェは期限間近の食品を利用して安価に提供(※)できたりするといいですよね。

 

足湯は銭湯あるなら、男女関係なく共通の空間に足湯があればまったり雑談のきっかけになるかなぁ、と。

 

※最近SDG'sの盛り上がりでそうした食品ロスを減らす取り組み増えてますよね。私が知ってる中だとセカンドハーベストが一番有名だと思ってます。

2hj.org

 

 

施設の運営を利用したOJT

運営スタッフの一部について、長らく職についてなくて通常の就職が難しいような人を採用して、通常の就職へのステップアッププログラムを組めないかなぁ、と。

 

……いや、現実にやろうと思ったら本当に成立するかな、できるのかな、という気はするのですが。

自分自身、職場で普通の新人、むしろできる部類に入る新人でさえ、仕事の引継ぎとか苦労した経験があるので、口で言うほど簡単でないのはわかってるつもりです。

 

それでも、一度どん底に落ちてしまうとそこからステップアップする仕組みがほとんどない今の日本って、どうにかしたいよなぁ……と漠然と思ってしまい、こういうことできないかなぁ……と妄想だけはしてしまいます。

 

 

最後に

こういうことを考えはするものの、考えるだけで終わってるので、現実味がないという意味で"妄想"という言葉を使っています。

 

 

……"妄想"を"妄想"で終わらせないために、自分にできる最小の一歩を積み上げてくしかないんですけどね。今回のネタを実現できるところまで人生で行きつけるかなぁ……。

 

実際こういう施設あったら利用したいと思いますかね？皆さんのコメントお待ちしております。

 

 

-----------------------------------

素材取得元

今週のお題「100万円あったら」から考えた"あまやどり"のマネタイズ

あまやどり活動記

家の模型と硬貨の写真です。

 

 

こんにちは。初めましての人もそうでない人も、裏薄荷(うらはっか)です。

 

今日は


今週のお題「100万円あったら」

 

について、どう使うか真面目に考えてみた結果、

 

「100万円」の使い道より、"あまやどり"という夢の実現に向けてどうマネタイズするのか考えるのが先じゃないかしら？

 

と気づきました。

というわけで、まだアイデアレベルですが、マネタイズについて考えてみたので、備忘録として記事に残しておこうと思います。

 

目次

 

そもそも"あまやどり"ってどんな夢？

 

ブログのタイトルでもある"あまやどり"ですが、

 

誰かにとっての辛いことをしのげる場所

＝"あまやどり"

 

という意味を込めて使っています。

 

自分自身が辛かった時期、中学の頃だったのですが、部活に行ったり友達と喋ることでゆっくりとその時期を乗り越えることができました。

 

その頃の思いを原点に、同じように辛かったり困難な状況にある人の役に立つような場所づくりをしたい、というのが夢の出発点でした。

 

……漠然としてますね（＾＾；）

 

今は人よりも少しだけ得意だったプログラミングのスキルを活かして、誰かの役に立つシステムを開発するところから始められたらいいのかなぁ、と思ってます。

 

じゃあ具体的にどんなシステムをつくりたいの？

 

という話ですが。

自然言語の処理を応用して、生活相談をサポートするチャットボットをつくれたらなぁ、ということを考えています。

 

詳細はこちらの記事をご覧ください。

tnim-amayadori.hatenablog.com

 

 

「100万円あったら」からマネタイズへの思考転換

もしも自由に使える100万円があったら"あまやどり"に向けてどう使おう

 

最初は軽い気持ちで、ブログのアクセス数を増やしたくて"今週のお題"について考えてみました。

せっかくなので、"あまやどり"を実現させる方向で。

 

……100万円じゃ全然実現できるイメージわかない(笑)。

 

一応、使い道の案としてはいくつか出たのでご紹介します。

 

 

案1. 時間確保のため認可外保育園に子どもを入れるのに使う

 

現在育休中、妊娠中のような体調悪くて動けないようなこともなく、子どもさえ寝てくれれば隙間時間に開発やブログ執筆ができるようになってきた日々です。

 

……そう、子どもさえ寝てくれるのであれば。

 

その日のコンディションや家事の状況にもよりますが、一日に使える時間は日中に１時間前後 ×(かける) 1～4回です。

 

……何が嫌って細切れなので、ノってきて、さあこれから集中できるぞ！ってタイミングで、泣いて起き出す子どもに中断せざるを得ないことです。

 

多い日でトータル４時間以上取れるとはいえ、効率悪いですよね。

……かと言って、職場復帰したらもっと時間は取れません。

 

じゃあこの育休中、認可外の保育園に預けて自由時間を手に入れてみたらどうだろう？

この前チラシが入ってたところだと0歳児クラスは月36,000円、育休中ずっと預けてても100万円ならお釣りが来るぞ。

 

……

 

魅力的ですが、これだと本末転倒です。

なんで育休長めに取ろうと思ったかって、一番はやっぱり初めての子どもだからしっかり触れ合う時間を取りたかったから。

 

時々、泣き出す子どもに作業を邪魔された、と思ってしまいますが、一方で今だけの大事な時間でもあります。

そんなわけでこの案は却下です。

 

案2. 手っ取り早く人を雇ってみる

 

自分に足りてないのが技術力だけなら、技術のある人を雇ってみたらどうだろう？

 

……雇用形態にもよるでしょうが、100万円じゃせいぜい３ヵ月いかないくらいでしょう。

 

そして自分がSESや派遣でお客様先に入った時の感覚から言えば、こんなざっくりしすぎてる案件じゃ、技術者だって動けやしません。

そもそもSESとか派遣の案件として人入れるなら、それなりのレベルの人じゃ100万円じゃ１ヵ月１人しか入れらんない(笑)。

ましてや直接雇用、どんな雇用形態にしろ、100万円じゃそんないい人見つけられる可能性は限りなく低いでしょう。

 

 

案3. デザイン料として使う

 

これは比較的まともな案で、ボットのアイコンなどのデザイン料として使うという案。

 

……100万円も要らないですけどね(笑)

 

何をどれだけデザイン依頼するかにもよりますが、それでもせいぜい10万円もあれば足りるでしょう。

 

そしてデザインしたところで、肝心のコンテンツができていなければ日の目を見ない、単なる無駄遣いに終わってしまいます。

 

 

案4. 会社を辞めてしばらくの生活費に充てる

 

現在育児休暇中で職場復帰するつもりですが、一度職場復帰してから、頃合いを見て会社を辞めて一念発起するための資金、つまり生活費に充ててみたらどうでしょう？

 

……

 

子どももできたのに旦那の収入だけになる不安もありますし、

会社を辞めたら保育園に入れることはできなくなるので結局思ったほど時間は取れないだろう、という本末転倒な話になりそうな予感もあります。

 

そして何より、その100万円が尽きるまでに、収入を増やせる目途が立つのでしょうか？

 

……

 

立たないでしょう。

だってどう収益化するか、まるで考えていないんですから。

 

 ……ってかそれならどう収益化(=マネタイズ)するか考えるのが先じゃないかしら？

 

というわけで掲題の通り、マネタイズについて考えてみることにしました。

 

 

蛇足 もしも「100万円あったら」の最終結論

 

上記の通り、"あまやどり"の実現を目的として100万円を使うのはナンセンスだな、という結論に。

 

なのでその目的に縛られず、もしも「100万円あったら」を考えてみたら、以下の使い道になるかな、という結論になりました。

 

10万円

     → 案3を採用してチャットボットのアイコンやロゴのデザイン料として使う。

 

40万円

     → 諸事情あって学生時代に諦めた英語学習目的の1週間程度のホームステイに使う。英語の抵抗感なくして英語の技術コミュニティとかに飛び込めるようになって技術的な向上に役立てたい。

 

30万円

     → コロナで新婚旅行に行けなかったので国内でいいから小さい子がいても安心して泊まれるいいお宿を利用して旅行したい。

 

20万円

     → 予備費、ホームステイ中の子どもの面倒どうすんだ、って話とかお金で解決できるなら予備費から出す。余ったら積立投資信託用の口座に入れて貯金する。

 

 

……わりかし普通ですかね？

コロナでホームステイにしろ旅行にしろいつなら安心して行けるんだ、という問題がありますが（＾＾　；）。

まあ欲望のまま？にパーっと使う方向だとこんな感じですね。

 

 

本題 "あまやどり"のマネタイズ

 

ここでやっと掲げている本題に入って、"あまやどり"という夢のとっかかりにしようとしている

 

"生活相談をサポートするチャットボット"

 

をどうやってマネタイズするか、という話をしていきます。

 

 

チャットボットのヒアリング機能の可能性

 

"生活相談をサポートするチャットボット"、この利用自体は無料で提供したい。

 

ただ実現しようとしている機能の内、"ヒアリング"、これもしボットでできるならお金になると思うんですよ。

 

人間のプロのカウンセリング、受けようと思ったら30分3000円とかしますよね。

科学の発達した世の中でもなくならない占いという商売、これって話を聞いてほしい人がそれだけいるから、という側面があると思います。

 

先日、参考になるシステムを探している中で、以下のようなサービスを見つけました。

 

menhera-senpai.com

 

 

女性限定で利用できるチャット相談のWebアプリです。

無料、と記載ありますが、ちゃんと相談しようと思ったら5分100円から、相談相手のランクによって料金が変わってきます。

 

相談相手は、運営会社が選考と本人確認を行った"せんぱいユーザー"と呼ばれる女性です。

プロのカウンセラーも中にはいますが、基本は素人、相談者の評価によって３段階のランクに分かれています。

 

相談料の値段は、このせんぱいユーザーが、自身のランクに応じて設定された範囲内であれば、自由に決めることができます。

そして相談料の40%が彼女たちの懐に入る仕組み。

 

こうしたサービスが成立しているということは、やはりそれだけ需要があり、お金を出してでも話を聞いてほしい人たちがいるということ。

 

ただ"生活相談をサポートするチャットボット"自体は、上記のようなお金を出すことも難しいような人たちにこそ利用してもらいたいので、お金を取りたくありません。

 

……じゃあお金を出しても話を聞いてもらいたい人たちに、ヒアリング機能はそのままにパッケージを変えてアプリを提供したらどうでしょう？

 

……いけそうな気がしてきました。

 

 

カスタマイズできるヒアリングボット

 

例えばスマホでアプリを提供する場合、よく見かけるのは無料版でダウンロードしてもらって、特定の機能を有料で提供するパターンです。

 

そうなると、コアになるヒアリング機能は、パッケージを変えるとしてもやはり無料で利用できた方がいいでしょう。

 

じゃあどんな機能を有料化するか。

 

……例えば、相談相手のボットの見た目や口調を自分好みでカスタマイズできたらどうでしょう？

 

よくゲームで、アバターを自分好みにカスタマイズするのに、有料のアイテムを使うのと同じです。

 

それと同じようにヒアリング機能というコアは無料で提供しつつ、ボットだからこそ、相談相手を自由にカスタマイズできたら中々魅力的ですよね？

 

しかも今言ったような機能の有料化ではなく、アイテム課金という形であれば、定期的なアイテムリリースで収入を見込むことができます。

 

……いけそうな気がしてきましたね！

 

 

膨らませた夢から現実に立ち戻って

 

……と妄想を膨らませてみたものの、肝心のヒアリング機能を実現できなきゃどうにもなりませんね(^^ ;)。

 

そもそもヒアリングってどういう相槌や質問で相手の心情や実情を引き出すことができるのか。

人間がカウンセラーの資格取るのだって大変なのに、それをボットでどうやって学習させるのか。

 

……それらをクリアして学習ロジックさえ確立できれば事業化できる気がしてきました。

まだまだ肝心の部分が不透明なので実現目途立ってないですが、今回、今週のお題をきっかけにマネタイズについて考えたおかげで、少し前向きになれた気がします。

 

 

-----------------------------------

素材取得元

Seleniumでブラウザを最前面表示させる方法

開発ノウハウ

机の上のタブレットにGoogleの画面が表示されている写真です。

 

こんにちは。初めましての人もそうでない人も、裏薄荷(うらはっか)です。

 

※以下、以前Bloggerに投稿していた記事を移行した内容になります。2020年12月頃に書いた内容なので、chromeに関するエラーなど、最新の状況が変わっている可能性があります。

 

今日はSeleniumでブラウザを最前面表示させる方法、という小ネタです。

 

仕事で必要になって調べたのですが、案外いい方法がなくて、最終的に自己解決したので、記事にしておこうかと。

 

記憶ベースで書いているので、seleniumのバージョンなど細かい情報については、取り急ぎ省略させていただきます。

 

目次

 

きっかけはChromeでのクローリングエラー

 

調べようと思ったきっかけは、クローリングしていたサイトで2020年12月頭頃から出るようになったエラーです。

 

エラーが出ていた箇所は、マウスポインタを特定のアイコンにフォーカスさせて、JS制御で表示されるダイアログの情報を取得する箇所。

 

デバッグしながら動かすと、どうやら最前面で表示されている以外のChromeのブラウザが、最前面表示に切り替わるまでロードされていない様子でした。

 

(ちゃんと検証してないのですが、Chromeのバージョンが変わってから、なんだかそんな動きになったような。ロードもそうですが、JSの制御も最前面表示じゃないとうまく動いてくれなくなりました。

半年以上最前面表示じゃなくともエラー出てなかったのですが、他のサイトでも同じタイミングで似たような事象が起きるようになっていたので、Chromeのバージョンに依存する問題じゃないかなー、と思ってます。)

 

 

調べた最前面表示させる方法

 

そんなわけで、該当の処理を行う間、ブラウザを最前面表示させる方法はないかと調べました。

 

で、"selenium window 切り替え"などの検索ワードで出てきたのは、

 

driver.window_handles

 

を使う方法でした。

 

ただこの方法だと、複数ブラウザを別スレッドで制御している場合には、使えないんですよね。。。検索ワードを変えても、出てくるのは上記の方法ばかり。。。

 

 

自己解決した方法

 

で、私が考えたのはとても単純な方法。

 

Python
    from selenium import webdriver
from time import sleep

def switch_window(driver: webdriver.Chrome):
    driver.minimize_window()
    sleep(3)
    driver.maximize_window()

 

これだけです。

 

要は、ブラウザを最小化してから、最大化表示させるだけ。

 

最小化が完了しきる前に、最大化の処理が走る場合があってエラーになることがあったので、sleepを入れてます。

 

私の場合、他のスレッドと同時にこの処理が走ると意味がないので、スレッドをロックする処理も入れてました。まあその辺は今回の本題ではないので、割愛します。

 

以上、小ネタでした。 

 

-----------------------------------

素材取得元

はてなブログ無料版でスマホにメニューを表示させる方法

開発ノウハウ

スマホと紙のノート、ノートパソコンが写った写真です。

 

こんにちは。初めましての人もそうでない人も、裏薄荷(うらはっか)です。

 

今日は無料版のはてなブログでスマホにメニューを表示させる方法についてお伝えいたします。

 

……というのも、私も人様のブログを参考に表示させてみようとしたのですが、検索トップの方に出てくる方法だと無料版でスマホ表示させることができず。

試行錯誤した結果、表示できるようになったので、記事として残しておこうと思った次第です。

 

※カテゴリを開発ノウハウにするのは微妙だなぁ……と思いつつ、一応htmlとかcss関係してくるし、ということでこのカテゴリに入れました。

 

目次

 

前書き

完成イメージ

 

完成イメージはこんな感じです。

スマホ表示されたはてなブログの記事上部に、MENUと表示されています。

 

MENUをクリックすると開きます。

MENUだけ表示されていた箇所に、TOPやブログの記事カテゴリが表示されています。

 

 

公式テーマのテンプレ利用

 

前提として、ブログのデザインとして公式テーマのテンプレを利用します。

はてなブログの管理画面 > デザイン から表示されるこれです。

はてなブログデザイン設定画面で公式テーマのテンプレートが表示されています。

 

オリジナルのデザイン使いたい、という方は同じ方法で適用されるか不明ですので、ご了承ください。

 

※有料のPro版であれば下記の記事で紹介されている方法で表示できます。

www.naturalstylelife.com

 

はてなブログ無料版でスマホにメニューを表示させる方法

最新版のjQueryを参照させる

これはいくつかの記事で紹介されている話ですが、まず最新版のjQueryを参照させましょう。

以下のサイトからjQueryの3系の最新版を参照するソースをコピペします。

developers.google.com

jQueryの"3.x snippet"と記載された欄のソースコードを選択しています。

 

コピペしたら、はてなブログの管理画面から詳細設定を開きます。

はてなブログ管理画面の設定を選択し、さらに詳細設定を開いている画面です。

 

下の方にスクロールすると「head内タグ」という欄に「headに要素を追加」という項目があります。

ここに先ほどコピペした内容をはりつけましょう。

詳細設定内のhead内タグという欄に"headに要素を追加"と表示されているので、そちらに先ほどのjQueryをコピペしています。

 

レスポンシブ対応のテンプレを選択する

前書きしたように、デザイン設定で公式テーマを利用します。

その際に、レスポンシブ対応(*1)のテーマを選択します。

まず選択したいテーマがあったら、テーマ名横のiマークからテーマの情報を参照します。

iマークを選択している画面です。

 

下の方にスクロールするとテーマの説明が表示されます。

テーマの説明に、「レスポンシブデザインに対応しています」と記載されていればOKです。

 

テーマの説明欄に"レスポンシブデザインに対応しています”と記載があります。


 *1. レスポンシブ対応とは、PCやタブレット、スマホとユーザーが操作する画面の大きさが異なっても、Webサイトの表示が画面の大きさに応じて綺麗に表示されるように対応していることです。

 

 ヘッダにメニュー用のHTMLを追記する

 

デザインの設定画面からヘッダにメニュー用のHTMLを追記します。

下記のデザイン設定画面内、ヘッダのタイトル下、という欄になります。

デザイン設定画面の工具マークから、ヘッダを選択し、タイトル下という欄を選択しています。

 

追記するHTMLは下記の内容です。

ご自身のブログメニューでリンクをはりたい内容にあわせて、修正してください。

 

はてなブログデザイン設定画面ヘッダのタイトル下(HTML)
    <span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>
<ul id='menu'>
    <div class="menu-inner">
        <!-- href内のURLとカテゴリ名は適宜修正してください -->
        <li><a href='https://YourBlogURL.hatenablog.com'>TOP</a></li>
        <li><a href='https://YourBlogURL.hatenablog.com/archive/category/category1'>カテゴリ1</a></li>
        <li><a href='https://YourBlogURL.hatenablog.com/archive/category/category2'>カテゴリ2</a></li>
        <li><a href='https://YourBlogURL.hatenablog.com/archive/category/category3'>カテゴリ3</a></li>
    </div>
</ul>
<!-- 3.X.Xの部分は先にコピペしたjQueryのバージョンを入力してください -->
<script type="text/javascript" src="http://code.jquery.com/jquery-3.X.X.min.js"></script>
<script>
    $(function(){
        $(".menu-toggle").on("click", function() {
            $(this).next().slideToggle();
        });
    });
    $(window).resize(function(){
        var win = $(window).width();
        var p = 768;
        if(win > p){
            $("#menu").show();
        } else {
        $("#menu").hide();
        }
    });
</script>

 

CSSを設定する

 

同じくデザイン設定用画面からメニュー用のCSSを設定します。

下記のデザイン設定画面内、デザインCSS、という欄になります。

 

はてなのデザイン設定画面内の"デザインCSS"という項目を選択しています。

 

追記するCSSは以下の内容です。

背景色や文字色はご自身で選んだデザインに合わせて適宜修正してください。

※カラーコードは以下をご参照ください。

www.colordic.org

 

CSSにはデフォルトで選択したテーマについての記述があるので、

デフォルトの内容は消さずに追記しましょう。 

 

はてなブログデザイン設定画面デザインCSS(css)
    /* デフォルトで記載されている内容に追記する */
#menu {
position: relative;
width: 100%;
padding-left: 0px;
height: 40px;
background: #ff99a8;/*グローバルメニュー背景色*/
}
.menu-inner{
width: 968px;
margin: 0 auto;
height: 40px;
}
#menu li {
list-style-type: none;
float: left;
height: 40px;
text-align: left;
}
#menu li a {
padding-left: 15px;
padding-right: 15px;
display: block;
color: #ffffff;/*グローバルメニュー文字色*/
font-size: 80%;
font-weight: bold;
line-height: 40px;
}
#menu li:hover a {
color: #00DFFC;
background: #ffffff;
transition: all .5s;
}
.menu-toggle{
display: none;

}
/*パソコン１カラム*/
@media screen and (max-width:968px){
.menu-inner{
width: 768px;
}
}
/*タブレット*/
@media screen and (max-width:768px){
#top-editarea{
height: initial;
background: #ff99a8;/*MENU背景色*/
text-align: right;/*MENUの文字の位置*/
width: 100%;
}
.menu-toggle{
color: #ffffff;/*MENUの文字色*/
display: inline-block;
padding: 5px;
margin: 3px;
}
#menu {
width: 100%;
display: none;
height: initial;
padding: 0;
margin: 0;
}
.menu-inner{
width: 100%;
height: initial;
position: static;
margin: 0;
}
#menu li{
float: none;
height: 35px;
width: 100%;
list-style-type: none;
background: #ff99a8;/*リスト文字の背景色*/
margin: 0 auto;
text-align: right;/*リストの文字の位置*/
}
#menu li a {
height: initial;
color: #ffffff;/*リスト文字色*/
display: block;
}
#menu li:hover a{
color: initial;
background: initial;
}
}

 

レスポンシブデザインモードに切り替える

 

デザイン設定画面のスマートフォンマークを選択し、一番下部にある詳細設定を開きます。

するとレスポンシブデザインというチェックボックスがありますので、それを選択します。

 

デザイン設定画面スマホマークの詳細設定欄内にあるレスポンシブデザインモードを選択しています。

 

 

以上で設定は完了です。

 

参考にした記事

説明の流れ上、ソースコード等特に注釈なく引用しましたが、基本的には下記のサイトから引用しています。 

 

グローバルメニューの作成基本については下記の記事を参照させていただきました。

redo5151.hatenablog.com

 

最新版のjQueryを適用しましょう、という話は大元は多分こちらの記事です。

kurokinomizuiwa.hatenablog.com

 

またスマホでの表示方法を模索した際にはこちらを参照しました。

ただこちらに記載されている方法は、有料のPro版じゃないとできない方法です。

www.naturalstylelife.com

 

 

以上です。参考になりましたでしょうか？

 

-----------------------------------

素材取得元

あまやどりで開発したいシステム--生活相談をサポートするチャットボット--

あまやどり活動記

傘を差す人が見上げた先では、雨雲の隙間から日の光がのぞいています。

 

こんにちは。初めましての人もそうでない人も、裏薄荷(うらはっか)です。

 

今日は現在チャレンジしているシステム開発についての覚書です。

 

※注意

以下で記載している内容は、2021年6月現在、裏薄荷が個人で趣味の範囲で行っている活動です。

時々行ってる(今は育児優先で行けてないですが)ボランティア先の団体などは特に関与していません。(実現できる見通しが立ってきたら意見いただいたりしようかな、と思ってますが、今のところ何も話してないです。)

そのため何かありましたら、問い合わせフォームから裏薄荷に直接お問合わせいただきますようお願いいたします。

 

目次

 

創りたいシステム

生活相談をサポートするチャットボットシステム

 

相談フローイメージ
  1. 　生育歴など現在置かれている状況のヒアリング
  2. 　相談者が解決したい課題の策定
  3. 　課題に対して適切な解決策の提示

    (生活保護の申請、他の社会保障制度の利用、他の専門団体への紹介、など)

 

なぜ創りたいか

　生活相談者は、自分の置かれた状況や取り組むべき課題を整理できていないことが多い。相談員はヒアリングすることで相談者の置かれている状況と課題を明確にして、一つでも解決に向けて前進できるよう相談を進めていく。しかしながら近年の相談者の置かれた状況は多様化しており、その分解決策も多岐に渡り、相談員の知識だけでカバーすることが難しい場面が往々にしてある。相談時に他の相談員と最終確認を行う、相談を受ける団体内で定期的に勉強会を開催するなどして、組織的に相談の質を高める体制をつくっているが、そこにはシステムにも貢献できる余地があるのではないか。

 

チャットボットで実現したいこと
  1. ヒアリング機能で相談者の悩みを聞き出すこと
  2. ヒアリング結果を以下のような形で整理すること
    • 生育歴を時系列化すること
    • 出てきた登場人物を自動で図式化すること　など
  3. 相談者が抱えている問題をリストアップすること
  4. 課題に対して以下のような情報をわかりやすい形で提示すること
    • 有効な社会保障制度の利用方法
    • 相談可能な他の専門団体の連絡先　など

 

人間じゃないと難しいこと
  • 相談者の気持ちに寄り添うことで安心感や前向きな気持ちを与えること
  • 相談者の気持ちを汲んだ上で一緒に優先して取り組む課題を決めること
  • 相談者を解決に向けたアクションに一歩後押しすること

 

取り組むにあたっての不安
  • 自分自身がボランティアで経験した相談および解決事例が少ない。ので、本当にシステムの方向性として正しいのか不安。
  • 生活相談と一口に言っても広すぎるので、もう少し取り組む課題を絞り込まないと、”わかりやすく整理する”という部分が難しそう。情報を収集するにしても、収集する範囲が広くなりすぎ。
  • 自然言語処理を応用するにしても、元となるデータをどう集めるか。よしんばどこかの団体の協力を得られたとしても、センシティブ情報になってくるので、自分のセキュリティ知識だと管理が不安。
  • わかりやすいってなんだろう。ヒアリングってなんだろう。

 

調べた類似システムなど

 

今後の取り組み方針

既存システムと比較した際に特徴となる"ヒアリング機能"と"わかりやすい情報提示"という2つが実装できるようにデモ版の開発を進める。

まずは"わかりやすい情報提示"について、もやいの支援検索ナビを参考にLineAPI上でif分岐で支援検索をできるようにして、検索結果の表示形式を工夫することで、LineAPIでどのような表現が可能なのか模索する。

また"ヒアリング機能"については、ヒアリングにおける"受容"、"共感的理解"、"自己一致"を示す相槌、詳しい状況を聞き出すための質問を学習させるロジックを確立する。(ある程度取り組んで実現が難しいようであれば、ヒアリング機能は実装せず、有人前提でボットはサポートに徹底させる方向で考える。)

 

……正直、育休中にどこまで実装できるやら、という感じですが。

ある程度実現のための基本ロジックを確立するところまではいきたいですね。。。

がんばろう！

 

-----------------------------------

素材取得元

Gitの基本的な構成とコマンドのイメージを掴もう！

用語解説 開発ノウハウ

サーバー用のパソコンを分解して清掃している様子です。

こんにちは。初めましての人もそうでない人も、裏薄荷(うらはっか)です。

 

※以下、以前Bloggerに投稿していた記事を移行した内容になります。

 

今日はPyCharmでのGitの環境構築手順……の前に、Gitの基本的な構成とコマンドのイメージを掴んでいこうと思います。

 

……と言っても、筆者もGitを使い始めて1年半くらいです(^^ ;)

元々ずっと仕事だとSVNを使ってたので、最初はCommitの違いとかよくわからず、混乱しました。

その際に自分の整理用に図を描いたのですが、知り合いに見せたら好評だったので、この度清書してみました。

 

その絵がこちら。

大きく２つ、ノンベアリポジトリとリモートリポジトリに分かれている。ノンベアリポジトリは個々人の開発環境、リモートリポジトリはリモートサーバー上にある。ノンベアリポジトリの中にはローカルリポジトリと作業ディレクトリがあり、リモートリポジトリの中にはベアリポジトリがある。

 

◆基本的な構成要素

作業ディレクトリ : 開発者が直接編集しているソースコードが入っている。

ステージング(インデックス) : Git管理(履歴管理とチーム共有)を行う対象ファイルを管理する。

ローカルリポジトリ : 個々人の変更記録とブランチの管理、他のリポジトリの状態を追跡する。

ベアリポジトリ : チームでの変更記録を管理する。ソースコードの実体はない。

ノンベアリポジトリ : ローカルリポジトリと作業ディレクトリを含んだ全体を指す。

 

◆基本的なコマンド

add : Gitの履歴管理対象として新規作成したファイルを追加する。追加することで、各ファイルの差分が検知されるようになる。

commit : 作業ディレクトリの更新内容をローカルリポジトリに履歴として反映する。

push : ローカルリポジトリの変更内容をベアリポジトリに反映する。他者の変更と競合する場合は、他の変更を先に取り込むよう警告される。

clone : 初回にベアリポジトリの内容をコピーしてローカルリポジトリを生成する。

check out : 開発開始時に作業用にソースコードをローカルリポジトリから反映する。
fetch : ベアリポジトリで管理されている他者の変更をローカルリポジトリに取り込む。

merge : fetchで取得した他者の変更内容を作業用にソースコードに反映する。

rebase : 自分の更新内容を一時保存してから、mergeと同様に他者の変更内容を取り込む。修正履歴が段階的になるのがmergeとは異なる。

pull : fetchとmerge を一度に行う。

 

◆リモートサーバーの構成について補足(図の※部分)

ベアリポジトリがチーム全体で管理している変更履歴だが、それだけだとソースコードの実体はないので、サーバー内にノンベアリポジトリを構築している場合もある。

Webアプリなどの場合は、ノンベアリポジトリを本番環境にしているケースも。

そうした場合、リモートサーバー内のpullコマンドを毎回人の手で実行させるのは大変なので、pull実行をpost-receiveに定義して、自動反映することもある。

 

説明としては以上です。

なんとなくイメージ掴めましたでしょうか？

冒頭で述べた通り、筆者もGitのベテランではないので、もしかしたら不適切な説明があるかもしれません。その場合は、コメントで優しくご指摘いただけると助かります。

 

さて次回は、PyCharmでのGitHubの環境構築手順について説明していきます。

GitHubとは、この図で言うリモートサーバーの部分をweb上でクラウド管理するイメージです。

今後このブログで学習用のソースコード等を共有していくのにGitHubを利用する想定なので、環境構築しました。

筆者自身も勉強しながらになるので至らない部分もあるかもしれませんが、今後とも引き続き温かく見守っていただければ幸いです。

 

 

2022/6/25 追記

最近Gitを使ってる夫にローカルリポジトリの中にはローカルブランチとトラッキングブランチなる２つのブランチがあるんだ、という話を聞きました。

 

ちょっとこのページで説明している内容と若干の齟齬があるので私の理解が誤ってる部分がありそうなのですが、いったん参照としてトラッキングブランチについて説明しているページのリンクをはりつけておきます。

elsur.xyz

Git使って自分の理解が進んだら改めて、このページの説明を修正するなり、新しく記事を書くなりするようにします。取り急ぎ。

 

-----------------------------------

素材取得元

・トップイメージ

    [フリー写真] パソコンの中の掃除 - パブリックドメインQ：著作権フリー画像素材集
・図中のアイコン

    アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO