BlogNPO法人みんなのコードのエンジニアによる技術ブログです。Hiring!こんにちは。みんなのコードのエンジニアの板東です。「〇〇と言います」ブロック実行時に音が出るようになりました!(Chrome限定です)(実は5月からこの機能は追加されたのですが...お知らせが遅くなってしまいました)下に示すような、音声ON/OFF切り替えボタンをONにすることで、グラミン(吹き出しが出ているロボット)が「〇〇と言います」の「〇〇」を喋ってくれるようになります。下に示している場合だと、1から10まで数を数える毎に、「プロ!」と読み上げてくれるようになります。最終ステージ(ステージ15)にある音声ON/OFF切り替えボタン本記事では、この音声読み上げ機能についてどのように開発が進んで行ったのかどのような技術を使っているのか等について書かせていただきます。開発のきっかけ使っていただいた様々な方からのフィードバック・感想の中で先生方から「公倍数コースで〜〜と言いますブロックがありますが、この時グラミンがほんとにしゃべったら絶対おもしろいですよね!子どもたちも喜ぶと思います!」という声をいただいたり、実際の子どもたちからも「グラミンにしゃべってほしい!」という感想をもらったことが、一番のきっかけです。開発チームとしても、「〇〇と言います」の「〇〇」を、グラミンの吹き出しに表示するだけでなく、「〇〇」を実際に喋ってくれるようになれば、プログルを使ったプログラミング学習が、もっと面白くなりそうだなと思い、この機能を開発するに至りました。音声合成機能を利用するためのインターフェースです。引数に渡してあげることで、ブラウザはその文字列を読み上げてくれます。例として、以下のようなコードを挙げます。以下の2行を実行することで、ブラウザは「あいうえお」と読み上げてくれます。ブラウザのコンソールを開いて、そこに以下の2行を打ち込んでみると、(IE以外の)ブラウザは「あいうえお」と読み上げてくれると思います。渡してやることで、この音声読み上げ機能を実装しました。IE未対応であるようです。プログルでのブロックプログラミングの処理が時々止まってしまうという不具合が発生してしまいました。APIの仕様なのか、調べきれてはいないのですが、まずはリリースを優先して、不具合が確認されなかったChromeのみの機能とすることにしました。Chrome以外のブラウザではそもそも音声ボタンが表示されないようになっています。開発を振り返ってプログルに音声読み上げ機能が追加されたということで、この機能を楽しんでくださる方々がいらっしゃればとても嬉しいなと思います。自分はこの開発をする前は主にバックエンドの開発をしており、フロントエンドの開発は実務であまりしたことがなかったのですが、この開発を経て、実務でのフロントエンド開発に慣れてき始めた感じがあり、良い機会だったなと思います。みんなのコードでは一緒に働く仲間を募集しています最後に、みんなのコードでは、一緒にプログラミング教材「プログル」を開発してくれる方を募集しています。Hiring!しれっと変更していましたみなさんこんにちは。みんなのコードCTOの田中です。実は今年4月初旬...プログルのリリース前から、この時期にやろうと決めていた、ある小さな変更を行いました。それが、タイトルにもある通り、プログルロゴから「β」を外したことです。今までのロゴ(左)と4月からのロゴ(右)(これ気づいた人がいたらすごい...!😁)βに込めた想いこのベータ表記ですが、実はリリースの直前、急遽デザイナーさんに頼んで入れてもらったものです。Apps(現GSuite)が長らくベータ版であった件へのオマージュでもありまた、2017年4月のプログルリリース当時、これから必修化に向けてがんばろうというタイミングだったプログラミング教育を、一緒に盛り上げていきたいという想いを込めていました。小学校でのプログラミング教育必修化のタイミングまで、無事プログルが存在していたら(リリース当時からすると、存在していない可能性も大いにあったわけです...🤭)、このベータ表記を取り、名実ともに正式版として、次のフェーズを迎えられるようにしようと考えていました。リリースして3年、無事こうしてベータ表記を外し、このような形でお知らせできるのは、何より日々プログルを利用し、ご支援いただいている皆さまのおかげです。本当にありがとうございます。多角形コースが英語に対応しました。ブラウザが持っているユーザの言語設定を取得し英語と日本語を切り替えるようにしています。日本語設定であっても英語に簡単に切り替えて学習できるように、ヘッダーに言語設定の切り替えボタンも設けています。jsファイルなどを作成して対応させるだけなのですが、いくつか知見もたまりました。リンクを貼ることになるので、注意しておかないと文法が崩れてしまいます。記載されている通りに作成したら良さそうです。問題なく使用できました。リリースを振り返ってスウェーデンの方から、ありがたいお言葉をいただきました。静的ページを生成しているので実装案を検討中です。みんなのコードでは一緒に働く仲間を募集しています最後に、みんなのコードでは、一緒にプログラミング教材「プログル」を開発してくれる方を募集しています。Hiring!自己紹介みんなのコードのエンジニアの板東です。2020年1月にみんなのコードに入社し、現在は主にプログルのバックエンドの開発をしています。みんなのコードに入社する前は、大学院で宇宙ロボットについて研究したり、メーカーで勤務したりしていました。いうプロジェクトを担当させていただきました。今回は、CI/CDを移行することになったきっかけや、移行後の所感などについてお話させていただきます。CircleCIじゃダメなの?プログルは、そのリリース時から長らくCircleCIを利用していました。実際のところ、機能的な問題は全くありません。開発メンバーが増えていくにつれ、大きな問題が出てきました。CircleCIの料金です。circleci.comCircleCIはクレジット料金の他に、プロジェクトに関わるユーザー数に応じて課金されるようになっています。$15ではどうがんばっても収まらず、少なくとも$70は超えてしまいました...。弊社はGithubのNPOプランに入っており、GithubのTeamプランを無料で使わせていただいています。ことです(ありがたや...🙏)。Actionsを使わない手は無いなと感じました。Actionsに移行することにしました。CircleCIと比べて感じたことpushするブランチごとにyamlファイルを作成する必要があるらしい例えば、テストや構文チェックをmasterブランチにpushしたら実行、デプロイをproductionブランチにpushしたら実行するようにしたいとします。masterブランチにpushしたら実行するワークフロー・productionブランチにpushしたら実行するワークフロー、それぞれのyamlファイルを作成する必要があるようです。push先の各ブランチごとのワークフローを1つのファイルにまとめるのか別々のファイルに分けるのか、この辺は好みが分かれるのかなと思いました。ジョブ内各ステップの途中経過を確認しづらい感CircleCIのUIだと、CI/CD実行時に、そのステップで行われる処理の途中経過をサクサク表示してくれるので、その点が良いなぁと感じました。issueやプルリクの画面から、タブを切り替えるだけでCI/CDの様子を確認できる点は非常に便利です。Actions・CircleCI双方で、そこまで大差ないような気がします。今後も何か新しくて良さそうな技術やサービスが出てきた時は、積極的に取り入れられるようにしたいなと思います。みんなのコードでは一緒に働く仲間を募集しています最後に、みんなのコードでは、一緒にプログラミング教材「プログル」を開発してくれる方を募集しています。Actionsの利用時間は3000分に変更されるという内容の発表がありました。🐧twitter.com2月3日、プログル理科電気コースをリリースしました。rika.proguru.jpプログル理科電気コースは、チュートリアルに沿って回路の組み方、プログラムの作り方や考え方までを授業の中で学ぶことができる、micro:bitのプログラミング環境です。プログルボードと組み合わせて使うことを想定しています。2時間ほどの時間を取りつつ実装してきました。無事にリリースし、リリース後の細かい修正の対応も終えたので、プログル理科電気コースの開発がどのように進んでいったのかどのような技術を使っているのかについて書かせていただきます。fork2019年の5月に『プログル6年理科電気キット』の提供を開始しました。機能として提供されているプロジェクトの共有機能を用いて、6年生の単元「電気の利用」で使用するブロックを使えるようにしていました。カスタムブロックを読み込む機能やプロジェクトを共有する機能など様々な機能があるのですが、実際にどのくらいのユーザが使用してくれているのかの正確な値を知ることができませんでした。プログルの開発において意識している点はプログラミング教育の必修化を受け、初めて児童に教える先生でも使える教材です。そのため、チュートリアルを用意することで先生にとって使いやすく、児童にとって理解しやすくすることを意識しました。するところから始めます。示されているので参考にしていただけたらと思います。終わった後は、プログルのデザインに合わせるため、CSSファイルを探っていました。色の定義がされていたのでプログルらしい色に変えました。#ffffff;メインビジュアルの画像やヘッダーの画像・リンクを変更し、トップページのデザインが完成しました。レスポンシブデザインなのですが、メインビジュアルの画像が画面の横幅によって押しつぶされることがあったので、修正する作業が地味に大変でした。使う人向けに簡単なチュートリアルが用意されています。書けそうな臭いがしたので、ワクワクしていました。現実はそう甘くありませんでした。Makecodeの「点滅するハート」のチュートリアルです。規則に沿って同じようにファイルを作ることでチュートリアルが作れます。実際にプログル理科電気コースの最初のチュートリアルは以下のような内容が書かれています。コマンドを叩く必要があります。どちらでも同じ結果になると思いきや画像ファイルのディレクトリが異なるため、実際にホスティングする際にはリダイレクトを適用する必要があります。}}リリース直前に襲いかかるIEの魔の手リリース前に、都内の小学校で実際に使ってもらう機会をいただき、みんなのコードのメンバーも数名授業を拝見しに伺っていました。実は当日朝、IE11で動作させたら組んだブロックのコンパイルができないことが発覚していました。授業中は動かなかったりしないか、バグが出てくるのではないかとヒヤヒヤしていました。幸いにも授業はスムーズに進行しました。Hosting環境下のみ起こる現象であることがわかりました。コンテナをサーバレス環境で実行するというモダン(大事!)なサービスです。Dockerコンテナを使うことで自由な環境を用意できる点と、サーバーレスなのでインフラを意識しなくて良くなる点から、今回導入することにしました。用いると、以下の手順を実行するだけでアプリケーションをデプロイすることができます。デプロイこのように手軽にデプロイできるのも大きなメリットだなと感じました。無事にリリース2月3日、無事にリリースしました。リリース後も色んな方々から使ってみての感想をいただきました。みんなのコードのメンバーや活動に熱心に関わってくださる先生方には、年末年始で落ち着きたい時期にも関わらずレビューしていただきたりしました。この場を借りて感謝申し上げます。ファイルサイズ大きいので学校で使うには...小学校で使ってもらおうと思った時に、このままだとファイルサイズが大きくて待ち時間が発生するという問い合わせがありました。SPAということもあるのでファイルを取得完了してからの時間も加えるともう少し時間がかかりそうです。gzip圧縮やチュートリアルで表示されるGIFファイルの圧縮、キャッシュする期間の調整などをして3分の1くらいになりました。リリースを振り返って他の開発と並行してプログル理科電気コースの開発を進めていたため、がっつりと時間を割くことは出来なかったですが、使わない機能を省いて必要な機能だけを提供できるように心がけました。IEでのバグが出たときのリリース判定会議では学校で一番使われているブラウザに対応できないとダメだよなぁということで落ち込んでいましたが、無事にリリースでき、まずは一安心です。みんなのコードでは一緒に働く仲間を募集しています最後に、みんなのコードでは、一緒にプログラミング教材「プログル」を開発してくれる方を募集しています。🐧twitter.com今日は絶賛クラウドファンディング募集中のコンピュータクラブハウス加賀に行ったときのことについて、お話したいと思います。www.furusato-tax.jp加賀と東京の距離は遠いみんなのコードがふるさと納税のスキームを活用して設置したコンピュータクラブハウス加賀(以下、クラブハウス加賀)が5月25日のオープンから約半年が経つのですが、東京と加賀市で距離が離れていることもあり、日々の細かな気づきや子ども達の成長を見ることが出来ていませんでした。現地のメンバーからの写真の共有や口頭で日々の活動の一部は知ることはできていましたが、東京にいるみんなのコードのメンバーですら、なかなか日々の活動内容や現地のコミュニティマネージャーの末廣さんの想いを共有できていませんでした。そのため、実際にクラブハウス加賀に行って子ども達と一緒に過ごす時間を2度ほど取らせていただきました。加賀に行ったんですが...1度目は6月上旬に。オープンして間もないこともあり、まだ来る子ども達は少なかったですが、朝から夕方までずっと居てくれる子もいました。そのとき、小学生ながらプログラミングをしている少年に出会いました。おじいちゃんから貰ったというパソコンでMinecraftで遊んだのがきっかけでMODを作りたいと思ったそうです。その少年は、ネットで調べた情報を頼りにJavaの勉強を始めたそうです。Swingでシューティングゲームを作っていました。JFrameやJLabelの扱い方に困っていたようだったので助けようと見ていたのですが、Java少年は公式のJavaドキュメントを漁りながら問題を解決していました。Javaのドキュメントを見てる様子(唯一撮っていた写真)その彼は、クラスとインスタンスの概念を理解していたことも勿論ですが、ちゃんとドキュメントを見る習慣がついてるのには驚きでした。高専に入ってからプログラミングを始め、クラスで挫折した頃の自分が懐かしいです。来ていたのですが、テクノロジーを使ったさまざまなことに、とてもやる気がありました。その彼は、当時は、まだプログラミングを始めていなかった(始めなければならないという意識は強かった)ため、アイデアを語ってくれたのですが、内心ボクは「どうやって実装するんやー!」と思ったりもしました。紙に設計を起こしてイメージをどんどん書いていく姿を見てると、ボク自身もすごく楽しかったことを覚えています。エンジニアとしては、良くも悪くもどのような技術を使ってどのくらいで実現可能かを考えてしまいがちなのですが、彼自身がアイデアをたくさん出すだけでなく、プログラミングが必要だと分かってることは1歩目としては良いなぁと感じました。訪れた、加賀に行ける機会2度目のクラブハウス加賀の訪問は、8月のお盆に。夏休みということもあり、たくさんの子ども達が遊びに来てくれてました。Scratchで自分が描くストーリーを作ってる子やmicro:bitのさまざまな機能を試して遊んでる子など、みんな夢中になっていました。高校生の男の子もいたのですが、その子はクラブハウス加賀においてある本を写経してJavaの勉強をしていました。勉強する中で困った時は、Java少年に聞いて教えてもらっているそうです。男の子にとっては、教えてもらう相手として年下であることに意識はあるようでしたが、年下であろうと自分よりも詳しい相手から学ぼうとする姿勢は素晴らしいなと感じました。自走できれば勝ち?きっかけを作らなきゃ!コンピュータクラブハウス加賀を訪れる子ども達に会って、まだ始まったばかりではあるけど成功してるような感じがしました。考えていたのですが、誰から言われるわけでなく自走できるようになっていたから成功してるように感じたのだと気づきました。学校で勉強していて、はじめはやりたいと思っていたことでも、ただ教えられたことをすることより、何かを自発的に行えるようになる段階に持っていくことが大事じゃないですか。それがプログラミングに限らず、スポーツであっても趣味であっても同じだと思ってます。Tokyoなどでも提供されていますが、ボク自身も地方出身であることもあり、特に地方になるときっかけを提供するのが難しいのかなとも感じています。Java少年でさえ、PCはおじいちゃんからのお下がりでスペックが低くて困ってると言ってました。クラブハウス加賀に来ればヌルヌル動かせれるから来ているそうです。きっかけを持っている子ども達だけが来るわけではないので、PCや3Dプリンタといった機材だけでなくふさわしいメンターとなる人が必要にもなります。ふるさと納税、お願いします🙇‍♂️ふるさと納税のページはここからアクセスできます。www.furusato-tax.jp設備の拡充は勿論ですが、クラブハウス加賀に来て成長する子ども達が少しでも自分のキャリアを描くきっかけにもしていきたいと考えているので、ご支援お願いします。ワンストップ特例制度を使うと(適用条件はありますが)、決済完了日の翌年の1月10日までに申請すれば住民税控除を受けることができます。今回ボクも初めてふるさと納税を利用しましたが、5分ほどで寄付の手続きが終わりました。今年のふるさと納税は今年のうちに。読者になる2019-12-04Googleさん、日本でIE11は根強く生きてますよ。小学校のデバイス・ブラウザ事情あれ、バグがあるぞ。🐧twitter.com来年の4月から小学校でプログラミング教育が必修化されます。実際にPCを用いる学校もあれば、PCに比べ手軽に使えるということでタブレットを導入している学校もあり、使うデバイスは実に多種多様となっています。問題はブラウザに潜んでいます。プログルのユーザが用いるブラウザの約7割はIE11で、このこと自体が悪いわけではないのですが、エンジニアとしてはリリースの際に注意して検証する項目が増えてしまいます。タブレットといってもiPadを使用する学校もあれば、Windowsタブレットの使用も想定されます。このように、様々なデバイスやブラウザでの動作検証の大変さをひしひしと感じています。全国の学校現場のブラウザ事情を考慮するとIE11には対応させなければなりません。入社してすぐにあった中央値・最頻値コースのリリースで、IE11対応のissueやバグ修正と向き合ってきました。code.or.jpあれ、バグがあるぞ。そんなとき、IE11で発生するBlockly本家のバグを発見しました。ブロックに対応するコードをステップ実行する際に、実行されている箇所のブロックがハイライト表示されるのですが、IE11ではアンハイライトされないことが分かりました。Blocklyのminifyされたコードから原因を探りました。バグの原因を特定し修正用のパッチも当てました。BlocklyはGoogleが管理しており、オープンソースで世界中(まだまだニッチなBlocklyコミュニティ)の人の手によって機能の追加やバグの修正がされています。Blocklyを使って開発されているプロダクトも多く存在するため、貢献できたらと思いプルリクを作成しました。このバグに関するプルリクはこちら。気合を入れすぎてIE10でもOperaでも検証しました。プルリクメッセージを書く上で、英語が得意なパートナー担当のメンバーにお願いしました。関してはとても素晴らしい文章を書いていただきました。変更は別の形できちんと反映されたので良かったです。Googleの方が新たにプルリクを作成して変更を加えてました。diffを見ると自分の出したプルリクと少し変更点が異なっていたのもあったので、レビューが面倒だったのかもしれないです。形は違えど、Blocklyユーザや開発者に貢献できたので良かったです。Googleの開発者もIEが嫌いということが分かりました。Blockly開発は楽しい9月に開催された技術書典7に「楽しいBlockly」という名前で出してきました。PDF版に関してはBOOTHで購入可能です。ReactとBlocklyを用いたアプリケーション開発について書きました。触れたのですが、Blocklyが公式にnpm公開しており、VueやAngularでの開発の例も紹介されています。いうライブラリを使ってるのですが、現在移行中です。プロダクト開発をする中で「NPOだけど面白いベンチャーだなぁ」と感じてます。ためにプロダクトを開発しているからでしょうか。みんなのコードでは一緒に働く仲間を募集しています最後に、みんなのコードでは、一緒にプログラミング教材「プログル」を開発してくれる方を募集しています。みんなのコード(以下、みんなのコード)CTOの田中です。今回は、私達が開発しているプログラミング教材「プログル」がどんな技術で支えられているかを紹介したいと思います。proguru.jpプログルは、2020年の小学校におけるプログラミング教育必修化に合わせて、「学校の授業ですぐに使える」ように設計されたプログラミング教材です。先生の意見を取り入れて開発されたシンプルな画面構成と、教科学習に特化したドリル型のコースで、誰でも簡単にプログラミング教育を実践することができます。プログルを2017年4月にリリースしてから約2年が経過し、利用者累計40万人を突破しました。対象学年の小学校5年生の年間人数100万人で割ると、2.5人に1人が使っているという計算になります。Hostingで提供しているサーバーレスのプロダクトになります。この「プログル」を支えるため、以下に紹介するような技術を利用してサービスを展開しています。Hostingに環境を全面移行しました。移行して1年以上経過しますが、特に大きな問題もなく稼働しています。言えば、Basic認証を実装しづらく、社内確認用のプレビュー環境の構築には不向きなところでしょうか。Hostingを選定した理由FirebaseはGoogleが運営しているmBaaSです。Androidアプリのバックエンド環境として利用しているケースが多いかもしれませんが、Webアプリでも使用することができます。Hostingはその中でもGoogleのCDNを利用した静的ホスティングサービスです。Hostingで運用することにしました。移行時の懸念点CDNでリソースを配信するようになるため、配信元のサーバが国内に限らず世界中に存在することになります。そのため、学校内のフィルタリングソフトにひっかかり、アクセスできない...という残念なケースが発生する可能性がありました。公立の小学校は学校内のコンピュータにフィルタリングを設定していることが多く、海外のサーバは基本的にアクセス不可...ということもしばしばです。一応Googleのサポートに問い合わせたところ、やはり弊社側でフィルタリングを回避する方法は無いとの回答を受け(まあそうですよね)ました。そこで、弊社と交流がある小学校の先生グループに協力を依頼して、フィルタリングの影響を受けないか報告してもらう...という事前確認をして、ようやく環境を移行することができました。AWSで運用していた時期は、ELBにEC2というオーソドックスな構成に、自作のデプロイスクリプトをのせていました。Hostingに移行することで、サーバの管理費を大幅に削減でき、デプロイの自動化もしやすくなり、サーバ管理も不要と良いことづくめで、かなり運用が楽になりました。その他、Route53やS3といったAWSのサービスも平行して利用しています。サーバーサイド実装していないのかこの理由はシンプルで、「実装要件がないから」です。プログルはユーザー登録不要で使えるようにしています。Analytics、お問合せフォームなどのユーザー入力情報はGoogleフォームにそれぞれ集約)ため、サーバーサイド実装をせず、フロントエンドだけで完結するSPA構成にする意思決定を行いました。サーバーサイド実装があると追々便利になることもありますが、要件が無いまま実装してもそれだけ気にしなければならないことが増えてしまいます。インフラの項でも記載しましたが、少ない開発リソースをなるべく必要なところに注力できるよう、なるべく不必要な実装はしないようにしてきました。Blocklyプログルのフロントエンド技術の中で核となるライブラリがあります。https://developers.google.com/blockly/プログルの右側(画像赤枠)にあるプログラミングスペースのUI構築を担うライブラリです。この「〇〇前に進む」などのブロック一つひとつにJavaScriptのコードが埋め込まれておりユーザーがブロックをつなげていくと、その組み合わせ方に合わせて、JavaScriptコードのコンテキストが出来上がり、evalなどを介して処理系に渡して実行する...というフローで、ビジュアルプログラミングを実現しています。プログルの開発を始めるにあたり、似たような機能を持つライブラリが無いか調査しましたが、プロダクション投入レベルで安定感のあるライブラリは、Blockly以外に見つかりませんでした。Blocklyに触れていると思います)。上記の実行フローからお察しの通り、少々クセがあるライブラリで、npmの公式リポジトリがイマドキJSのモジュールインポートに対応していない(モジュール対応をサポートする非公式ライブラリはあります)*1などレガシーな部分があるため、プログルのフロントエンド技術は、このBlocklyとの相性に焦点が置かれています。組みわせて使っています。他にもBlocklyをReactから扱いやすくする小規模なOSSがあったりします)。MobXは実装がシンプルなところと、Blocklyの実行内容も含めた状態管理がしやすそうだったことから採用しました。React.jsはViewを構築するライブラリのため、実装する要件に合わせて、様々なライブラリを組み合わせる必要が出てきます。賄えない実装要件については、react-app-rewiredで設定を上書きすることで、対応しています(ejectしても良いのですが、それだとせっかくcreate-react-app流に乗せたメリットが無くなってしまうので一旦やめました)。その他、フロントエンドで使用している技術をまとめると、以下になります。経由で呼び出し(CommonJSモジュール対応をサポートしてくれる)アニメーションCreateJS(Blocklyの実行結果を描画するために使用します。4ESLintJest(ほぼ導入しただけで終わってしまった...)FlowTypes(ほぼ導入しただけで終わってしまった...)プロダクトの規模が大きくなるにつれて、ソフトウェアテストなどの基盤部分を整えていく必要性をひしひしと感じています(このあたりの知見がある方、ヘルプミー😢)。その他開発を支える技術その他、プログルの開発で使われている技術要素やサービスもご紹介します。Formお問い合わせフォームなどで利用しています。Scriptお問い合わせフォームの通知や、SlackにGAの計測情報を送ったり、いろいろなところで使っていますその他、みんなのコードで使っているツールを↓にまとめたので、よかったらご覧ください。www.wantedly.com最後に使っている技術スタックから選定時の思想まで、一通り書かせていただきました。これからも要件に合わせて積極的に新しい技術を取り入れ、エンジニアの「新しいものを作りたい」という想いと開発のモチベーションを大切にしていきたいと思っています。いえ、ここまで技術選定から、環境構築、実装まで自分ひとりで行ってきたため、未熟な点だらけだと思っています。プログルをより良いプロダクトにするためには、まだまだやりたいことがあり、仲間が必要です。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。