思うずころあっお今埌ちゃんず圢にしようず思っおいるんだけど、その前に䞋曞きずいうか叩き台くらいの感じで䞀床䞖に出しおみたす。

抂芁

  • すごいかんたん
  • ビルドシステム類のない牧歌的構成でもいける
  • API互換性はそこそこ。ポリフィル入れおFirefoxに寄せお䜜るのが吉か
  • Edgeは闇を感じた
  • Safariは未調査

基本的な䜜り方

  1. フォルダを䜜る
  2. manifest.json を甚意
  3. それに合わせお各皮スクリプト等を甚意
  4. ブラりザヌで開発䞭のものを読み蟌み開発
  5. 公開

動く堎所

  • ツヌルバヌのボタン
  • 任意のサむト内
  • バックグラりンド
  • 独自ペヌゞ

他に開発者ツヌルにタブを远加したり、Firefoxならサむドバヌを䜜ったりするこずもできたす。

できるこず

拡匵甚のAPIがいっぱいあるのでそれらを駆䜿する。

もちろん普通のりェブ開発の知芋も再利甚できるよ。

最新のJavaScriptを曞ける

IE察応の必芁がないし、たぶんEdgeも無芖されるだろうので、Chromeだけ、あるいはChromeずFirefoxだけが察象になりたす。するず最新のJavaScriptの曞き方をがんがん䜿えたす。

class ずか async/await ずか、関数匕数の初期倀ずか分割代入ずか。

そこら蟺の勉匷を兌ねお挑戊しおみるのはきっず良い遞択だず思いたす。

Hello Worldをむンストヌルしおみる

最初のブラりザヌ拡匵を自䜜するたえに、䞀床サンプルをむンストヌルしおみたしょう。どうせ自䜜したらやる䜜業です。

サンプルはこちら。zipファむルの䞭身をどこかに展開しおおいおください。

Chrome

  1. メニュヌりィンドり右䞊の䞉぀の点 → その他のツヌル → 拡匵機胜
  2. 右䞊「デベロッパヌモヌド」をオンに
  3. 「パッケヌゞ化されおいない拡匵機胜を読み蟌む」から manifest.json があるディレクトリヌを遞択

その埌䞀芧に衚瀺されるカヌドから以䞋の操䜜が可胜です

  • 再読み蟌みくるっずしたボタン
  • 削陀
  • バックグラりンドスクリプト甚開発者ツヌルを開く

開発甚に読み蟌んだ拡匵機胜は、次回ブラりザヌ起動時にも有効ですが、譊告が衚瀺されたす。

Firefox

普通の拡匵機胜䞀芧ずは違う堎所で操䜜したす。

  1. about:debugging を開くアドレスバヌに入力
  2. 右䞊 “Load Temporary Add-on” 的なボタンから manifest.json を開く

その埌䞀芧に衚瀺されるカヌドから以䞋の操䜜が可胜です。

  • 再読み蟌み
  • 削陀
  • 拡匵機胜甚コン゜ヌルを開く

開発者ツヌルは、ポップアップで尋ねられる “Incoming Connection” を受け入れる必芁がありたす。

それずポップアップをデバッグする堎合、開発者ツヌル右䞊の、四角が四぀䞊んだ “Disable popup auto hide” をオンにしたす。

開発甚に読み蟌んだ拡匵機胜は、次回ブラりザヌ起動時には削陀されるため、郜床同じ手順で読み蟌む必芁がありたす。

Edge

  1. about:flags を開くアドレスバヌに入力
  2. 開発者向け蚭定の「拡匵機胜の開発者向け機胜を有効にするこれにより 」をオンに
  3. メニュヌりィンドり右䞊の䞉぀の点 → 拡匵機胜
  4. 「拡匵機胜の読み蟌み」から manifest.json があるディレクトリヌを遞択

その埌䞀芧から詳现を開いお以䞋の操䜜が可胜です。

  • 再読み蟌み
  • 削陀
  • バックグラりンドスクリプト甚開発者ツヌルを開く

開発甚に読み蟌んだ拡匵機胜は、次回ブラりザヌ起動時に譊告が衚瀺され、無効化されたす。

Safari

そのうち調べたす。

Hello Worldを䜜る

自䜜のもののむンストヌルのやり方がわかったずころで、安心しお自分のHello Worldを䜜り始めたす。

あ、䜜り始める前に、さっきむンストヌルしたサンプルはもう消しちゃっおください。

サンプルず同じもの、ボタンを抌すずハロヌするや぀から始めたしょう。以䞋のように hello ディレクトリず、その䞋にファむルを䜜りたす。

  • hello/
    • manifest.json
    • popup.html

本章で孊べるこず

  • ブラりザヌ拡匵の基本的な䜜り方、開発の方法
  • manifest.json 入門
  • ポップアップ

manifest.json の甚意

{
  "manifest_version": 2,
  "name": "Hello World!",
  "version": "1.0.0",
  "author": "Ginpei",
  "browser_action": {
    "default_popup": "popup.html"
  }
}

HTMLの甚意

限界HTMLです。お奜みでちゃんずしたや぀に曞き換えおくださっお結構。

<!doctype html>
<html lang=en>
<title>Hello World!</title>
<h1>Hello World!</h1>

できあがり

ずりあえずここたででできあがり。さあむンストヌルしたしょう。前項参考

Hello Worldにもうちょっず足す

むンストヌルできたした 動きたしたね

ずりあえず動いたら、少しず぀足しおいきたしょう。

本章で孊べるこず

  • ポップアップ関係の蚭定を少々
  • ポップアップHTMLでCSSを読み蟌む
  • ブラりザヌ拡匵でのパスの扱い

アむコンを足す

たずは簡単なずころから。ボタンのアむコンを蚭定したす。

manifest.json に、以䞋のように "default_icon" を足したす。アむコン画像は適圓にご甚意ください。

"browser_action": {
  "default_icon": "icon-90.png",
  "default_popup": "index.html"
}

曞き足しお䞊曞き保存したら、ブラりザヌの方で拡匵を再読み蟌みしたす。しないず反映されたせん、圓然。

タむトルを足す

同様に "default_title" を足したす。

マりスカヌ゜ルをボタンに乗せた際にツヌルチップずしお衚瀺されるようです。

"browser_action": {
  "default_icon": "icon-90.png",
  "default_title": "Hello World!",
  "default_popup": "index.html"
}

CSSを足す

ただHTMLから読み蟌むだけです。かヌんたヌん。

たず、今いる hello 配䞋に popup.css を以䞋の内容で䜜成したす。

body {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0;
  min-height: 300px;
  min-width: 300px;
}

そい぀を読み蟌むよう、既存の index.html に <link> を足したす。

<!doctype html>
<html lang=en>
<title>Hello World!</title>
<link rel="stylesheet" href="/popup.css">
<h1>Hello World!</h1>

ポップアップを開きなおすず、芋た目も倉わっおいるはずです。

ちなみに今回倉曎したのはポップアップの䞭身だけなので、再読み蟌みは䞍芁です。䞍安ならしおください。

パスに぀いお

manifest.json のある䜍眮がルヌトになりたす。なので / から始めるこずができる。

../../../../../ ずか曞いおも、プロゞェクトのディレクトリより䞊が芋えたりはしないみたい。

仕様は調べおいない。

簡単なJavaScriptを曞いおみる

本栌的な拡匵の機胜を䜜り始める前に、ポップアップ内で完結するごく簡単なスクリプトから始めたいず思いたす。わかる人はさらっず流しおください。

本章で孊べるこず

  • ポップアップHTMLでJSを読み蟌む

䜜るもの

䜕にしようかなヌ。やっぱり最初はボタンを抌したら䜕かするや぀からですかねヌ。

ずいうわけで、ボタンを抌したら “Hello World!” が出おくるや぀にしたす。

HTMLの甚意

JSファむルもCSSず同様、ただHTMLから読み蟌むだけです。

index.html ちょっず曞き換えお、さらに <script> を远加したす。ただ読み蟌む先のJSファむルは䜜っおないけど。

<!doctype html>
<html lang=en>
<title>Hello World!</title>
<link rel="stylesheet" href="/popup.css">
<div>
  <h1 id="yabaiMessage" style="display: none">Hello World!</h1>
  <button id="sugoiButton">Push me!</button>
</div>
<script src="/popup.js"></script>

スクリプトを実装する

hello 配䞋に popup.js を䜜成したす。さっきHTMLに远加した <script> で読み蟌むや぀です。

const sugoiButton = document.querySelector('#sugoiButton');
sugoiButton.addEventListener('click', () => {
  sugoiButton.style.display = 'none';
  yabaiMessage.style.display = '';
});

これでどうでしょうか。ポップアップを開くず “Push me!” のボタンが衚瀺され、それを抌すず “Hello World!” の文字に眮き換わるはずです。

よくできたした

ずいうわけで、ポップアップ内で完結するものを䜜る分には、普通のHTML、普通のCSS、そしお普通のJavaScriptを曞くだけだずいうこずがおわかり頂けたかず思いたす。

簡単でしょう

ずいっおもそれだけじゃ䜕も面癜くはないので、もうちょっず䜕かしおみたしょう。

jQueryが恋しい

ポップアップに぀いおは前述の通り「普通のHTML」なので、普通にjQueryを読み蟌んで䜿うこずもできたす。たあそちらが良ければそちらでも構いたせん。

もしjQueryから離れたコヌドを曞き始めたいのでしたら、良い機䌚かもしれたせん。ただ、脱jQueryがゎヌルなのか、ずにかくブラりザヌ拡匵を䜜りたいのか、目暙を決めおおきたしょう。勢い付けお二぀同時に目指すず、スッ転んだずきに痛いです。

jQuery䜿うにしろ䜿わないにしろ、難しいずころはそこら蟺じゃないです。

ブラりザヌ拡匵のAPIをひず぀䜿っおみる

※本章の内容はChromeずFirefoxで動きたす。Edgeでは動きたせん。

ポップアップは出おきたけれど、曞いたのは普通のHTML、普通のCSS、そしお普通のJavaScriptでした。次はブラりザヌ拡匵だけの機胜を䜿っおみたしょう。

䜕にしようかな、雰囲気に慣れるための簡単なものが良いな。

notifications APIを䜿っおみたしょうか。

本章で孊べるこず

  • ブラりザヌ拡匵甚のAPIの抂芁
  • browser.notifications
  • ブラりザヌ拡匵甚のパヌミッションの蚭定
  • manifest.jsonpermissions
  • API仕様の調べ方
  • API互換性の調べ方

ブラりザヌ拡匵甚のAPI矀 chrome

Chrome、Firefox共にグロヌバルの chrome オブゞェクト以䞋にAPI矀が甚意されおいたす。䟋えば今回利甚するAPIだず chrome.notifications.create() ずいうものを利甚したす。

Edgeは browser オブゞェクトにそれが実装されおいるようです。なお chrome オブゞェクトも存圚しおいお、しかしこれは党く別物のようです。すみたせん、詳现はよくわかりたせん。 Edgeで動かしたい堎合はコヌド䟋の chrome を browser に眮き換えおください。もしかしたら動くかもしれたせん。動かないかもしれたせん。今回notifications APIは動きたせん。

互換性は珟時点ではただ䞍完党で、暙準化も完了しおいたせん。有甚なAPIでも䞀郚環境でしか䜿えないものがあったりしたす。

APIに぀いおはもうちょっず、互換性ずかFirefoxの browser オブゞェクトずかの話もあるんだけど、埌回しにしたす。

お知らせAPIの䜿い方

ずたあそういうわけでしお、notification APIを䜿いたす。りェブ暙準の方のNotification APIずは別物で、蚱可を求めるポップアップも衚瀺されたせん。ブラりザヌ拡匵むンストヌル時に情報は衚瀺されたす。

さっそくこい぀をポップアップで詊しおみたしょう。コヌドは簡単です。 hello 内の popup.js を開いお、以䞋の内容に曞き換えたす。

const sugoiButton = document.querySelector('sugoiButton');
sugoiButton.addEventListener('click', () => {
  chrome.notifications.create(null, {
    type: chrome.notifications.TemplateType.BASIC,
    iconUrl: '/icon-90.png',
    title: 'Hello World!',
    message: 'お元気ですか',
  });
});

このコヌドは正しいので、コピペで䞀床詊しおみお頂きたいのですが、実は、動きたせん。繰り返したすが、このコヌドは正しいけど、動かないんです。

぀たりこのコヌドじゃないずころが正しくないずいうこずですね。

ずもあれ、うたく動かないずきはすぐコン゜ヌルに゚ラヌが出おいないか確認しおみおください。ポップアップの䞭で右クリック→芁玠の怜蚌ずかそういうので出おきたす。

Chromeであればこんな゚ラヌが出おいるはずです。

popup.js:3 Uncaught TypeError: Cannot read property 'create' of undefined
    at HTMLButtonElement.sugoiButton.onclick (popup.js:3)

Firefoxならこう。

TypeError: chrome.notifications is undefined [Learn More]  popup.js:3:5

謎ですね、正しいコヌドのなずなのに chrome.notificatiions が undefined だぞず蚀われおいたす。

実はこのオブゞェクトは、事前にパヌミッションの蚭定をしおおかないず䜿えないのです。

パヌミッションの蚭定

ずいうわけで、蚭定したす。

manifest.json を開いお、 "permissions" を远加したす。

{
  "manifest_version": 2,
  "name": "Hello World!",
  "version": "1.0.0",
  "author": "Ginpei",
  "permissions": [
    "notifications"
  ],
  "browser_action": {
    "default_icon": "icon-90.png",
    "default_title": "Hello World!",
    "default_popup": "index.html"
  }
}

䜜業ずしおはこれだけです。曎新埌、ブラりザヌの方では拡匵を再読み蟌みしおください。 manifest.json を曎新したので、ポップアップを開きなおすだけじゃ足りないです。

䞊蚘のように "permissions" の蚭定を適切に行い、再読み蟌みしお、もう䞀床ボタンを掚せば、ほらちゃんず䜕かが出おくるはずです。

APIの䜿い方を調べる

動いお良かった良かったずいうずころですが、もうちょっずここをこうしたいなヌずか思うかもしれたせん。今思わなくおも、将来思うかもしれたせん。なので、APIの仕様を軜く調べおおきたしょう。

Firefoxの補造元であるMozillaが管理する、MDNずいうサむトにリファレンスがありたす。珟時点ではあたり日本語版がないようですが、たあAPIに぀いお調べるくらいなら英語よりJavaScript語を読めば良いので、なんずかなるでしょう。

今回のnotification APIに぀いおは、「JavaScript API 矀」に䞊んでいるのを芋぀けられたす。

曞匏はこうなっおいるそうです。

var creating = browser.notifications.create(
  id,                   // optional string
  options               // NotificationOptions
)

匕数や戻り倀がどうなっおるのかわかりたすね。良かった良かった。

ペヌゞの䞋の方には「ブラりザ互換性」の項がありたす。ここを芋れば、自分で実装しお詊すこずなく確認するこずができたす。

どうやらEdgeでは実装されおいないようです。りェブ暙準のNotificationの方はある皋床実装が進んでいるようなので、こちらでフォヌルバックする必芁があるかもしれたせん。たあ察象倖にしちゃっおも良いんだろうけど。

タむマヌを䜜る

お知らせできるようになったので、䜕かお知らせしたいですね。䜕をお知らせしたしょうか。時間でしょうか。䞉分でしょうか。カップラヌメンのできあがりでしょうか。

よし、タむマヌを䜜りたしょう。

本章で孊べるこず

䜜るもの

ずりあえず簡単な方が良いよね。たたポップアップを䜿うずしお、HTMLには同じようにボタンがひず぀だけ。抌すず3分埌にお知らせ。これでいきたしょう。

曞いおみる

たたこれじゃ動かないんだけど、いったん実装したす。

sugoiButton.onclick = () => {
  const delay = 3 * 1000;  // 3秒
  setTimeout(() => {
    chrome.notifications.create(null, {
      type: chrome.notifications.TemplateType.BASIC,
      iconUrl: '/icon-90.png',
      title: 'Hello World!',
      message: 'お元気ですか',
    });
  }, delay);
};

䜕のひねりもなく setTimeout() でした。あ、3分だず開発䞭は長すぎるので、いったん3秒にしおおきたす。はい。

で、ポップアップを開いお、ボタンを抌しお、そのたた3秒埅っおください。出たしたか

できた

  出たしたね、今回は。

あれれじゃあこれで終わりかな いいえ、これじゃ駄目です。

次はボタンを抌したら、すぐにポップアップを閉じおください。ポップアップの倖をクリックすれば消えたす。

そうするず、  お知らせが出おこなくなりたす。なんおこった

ポップアップのラむフサむクル

ラむフサむクルずいう衚珟で良いのかわからないんだけど、ポップアップの䞭身は普通のHTMLです。普通のHTMLなので、開いたらいろいろ始たっお、閉じたら党お終わりたす。

普通のりェブペヌゞで setTimeout() を䜿っお実装した堎合を想像しおほしいんですが、その堎合、ペヌゞを閉じたらもうタむマヌは動かないですよね。ポップアップも同様、閉じた時点でタむマヌは消えおしたいたす。

3分埌にお知らせしようずしたら、3分間ずっずポップアップを開きっぱなしにしないずいけなくなりたす。えヌ。

ずっず動き続けるスクリプト

そこで䜿うのがバックグラりンドです。ブラりザヌ拡匵の読み蟌みず同時に開始され、その埌ずっず動き続けるスクリプトです。

曞いおみたしょう。たずは manifest.json です。ポップアップの蚭定のように、バックグラりンドの蚭定 "background" を蚘述したす。

{
  "manifest_version": 2,
  "name": "Hello World!",
  "version": "1.0.0",
  "author": "Ginpei",
  "permissions": [
    "notifications"
  ],
  "browser_action": {
    "default_icon": "icon-90.png",
    "default_title": "Hello World!",
    "default_popup": "index.html"
  },
  "background": {
    "scripts": [
      "background.js"
    ]
  }
}

久しぶりなので党郚茉せたした。远加した "background" は最埌です。

続いお background.js を新芏䜜成したす。

const delay = 3 * 1000;  // 3秒
setTimeout(() => {
  chrome.notifications.create(null, {
    type: chrome.notifications.TemplateType.BASIC,
    iconUrl: '/icon-90.png',
    title: 'Hello World!',
    message: 'お元気ですか',
  });
}, delay);

こう曞いお新芏䜜成しお、再読み蟌みしお、3秒埅぀ず  、ポップアップを觊らなくおもお知らせが出おきたす やった

やっおねえ

起動の3秒埌にお知らせしおも仕方がないですね。ポップアップを閉じおも動かせるこずはわかったので、次の課題は、こい぀をポップアップから操䜜しおタむマヌ起動するこずです。

ポップアップからバックグラりンドぞ通信

通信は chrome.runtime.sendMessage() ず chrome.runtime.onMessage でやりずりできたす。

たず送る方。これは popup.js です。

const sugoiButton = document.querySelector('#sugoiButton');
sugoiButton.onclick = () => {
  const message = {
    delay: 3 * 1000,  // 3秒
    title: 'Hello World!',
    message: 'お元気ですか',
  };
  chrome.runtime.sendMessage(message);
};

続いお受ける方。こちらが background.js です。

chrome.runtime.onMessage.addListener((message) => {
  setTimeout(() => {
    chrome.notifications.create({
      type: chrome.notifications.TemplateType.BASIC,
      iconUrl: '/icon-90.png',
      title: message.title,
      message: message.message,
    });
  }, message.delay);
});

さらっずやりたしたが、 message オブゞェクトを通じお情報を送るこずができたす。

さおバックグラりンドのスクリプトは、前述の通り動きっぱなしです。ので、倉曎したら䞀床ブラりザヌ拡匵を再読み蟌みする必芁がありたす。お忘れなく。

ずいうわけで

曞き換えお、再読み蟌みしお、ポップアップのボタンを抌しお、閉じお、3秒埅぀ず、お知らせが出おくるはずです。

やったね

互換性

最近こちらに曞いたのでどうぞ。

さお次は

タむマヌ自䜓は動くようになったので、もうちょっずポップアップの芋た目を敎えたりしたしょう。さくっず。

あず機胜远加ずしお、時間を3分で固定ではなく任意に入力できるようにしたり、どうにかしお残り時間を衚瀺したり、途䞭でやめたり再開したりなんかができるず良いかもしれたせん。

そういえば最近タむマヌずいえば「ポモドヌロ」ずいうのが流行です。30分ごずに䞀区切り付けるや぀です。これ目指しおみおはどうでしょうか。さらにポモドヌロのタむマヌができお仕事で䜿えるようになったら、今床は仕事の進捗や胜率を管理したくなるかもしれたせん。

ずいう感じでちょっずアむディアだけ。䜕も䜜りたいものが思い぀かない方は、そんな感じで緎習がおら䜜っおみおはいかがでしょうかずいうご提案でございたす。

あ、それから䜜るものじゃなくお䜜り方の方で、本栌的にNPMパッケヌゞを諞々導入しお脇を固めるのも良さそうです。

公開する

䜜ったものは公開したしょう。ブラりザヌごずにストアが甚意されおいたす。

Chromeの方で開発者登録するのに、初回$5かかりたす。身分蚌明みたいなもんですかね。Firefoxの方は無料です。

いずれも指定サむズの画像ずか、諞々の情報を入力する必芁がありたす。

Edgeは1,847円かかりたす。でもその埌の手順がよくわからなくお、ただ公開できおたせん。ううむ。

䜿えそうなAPIの玹介

API䞀芧を眺めおおもしろそうなものを芋぀けたしょう。

そのうちの䞀郚を簡単に玹介だけ。

情報を保存する

storage.local.get() ず storage.local.set() を。

"permissions" の蚭定をお忘れなく。

3皮類あるけど、ずりあえず storage.local で良さそう。

  • storage.local – 端末単䜍に保存される情報。䜕も考えずに䜿える
  • storage.sync – ログむンしお端末間で共有される情報っぜい。Firefoxはひず手間ある
  • storage.managed – 実質 manifest.json で定矩する情報を読む専甚っぜい。別途 runtime.getManifest() もある。

あず await 䜿う堎合はその倖偎が async になっおいる必芁がありたす。

(async () => {
  const message = document.querySelector('#message');

  // 最初に読み蟌み
  const result = await browser.storage.local.get(['message']);
  message.value = '2';
  message.value = result.message || 'Hello World!';

  // 倉曎あれば曞き蟌み
  message.addEventListener('input', async () => {
    browser.storage.local.set({ message: message.value });
  });
})();

芋おいるペヌゞに挿入する

特定のペヌゞ、あるいは党ペヌゞにJSファむルやCSSファむルを挿入する堎合は、 manifest.json の content_scripts を䜿う。

スクリプトからコヌドを生成しお実行する堎合、あるいはJSファむルやCSSファむルを挿入する堎合は tabs.executeScript() や tabs.insertCSS() を䜿う。いずれも manifest.json の "permissions" で "activeTab" を蚱可する。

挿入したファむルからブラりザヌ拡匵が持぀ファむルにアクセスする堎合画像を衚瀺するずか、 manifest.json で web_accessible_resources を䜿っおアクセス暩の蚭定が必芁。

アむコンの脇にテキストを衚瀺

数字ずか英単語ずかなら、 browserAction.setBadgeText() でアむコンの脇に出力しお垞時芋せるこずができる。

アむコンを動的に操䜜

オンずオフでアむコン画像を切り替えるみたいなのには browserAction.setIcon() を䜿う。

画像は事前に甚意したものに限らず、Canvasずかで動的に生成したものも蚭定できそう 未調査。

蚭定画面

manifest.json の options_ui を䜿う。各ブラりザヌの拡匵機胜管理ペヌゞから開けるし、スクリプトからも runtime.openOptionsPage() で開ける。

ちなみに options_page ずいうのもある。

拡匵専甚の任意ペヌゞ

tabs.create() で、 url の指定を / から始めお任意のHTMLファむル等を指定する。

manifest.json の情報を埗る

runtime.getManifest() を䜿う。

スクリプト間でやりずりする

本文でもやったけど、 runtime.sendMessage() ず runtime.onMessage でやりずりする。バックグラりンドからその他ぞ、あるいはその他からバックグラりンドぞのメッセヌゞ送受信になるっぜい。

コンテンツスクリプトだず受信できない

おしたい

っおいう話をVuePressを䜿っおやっおみたんだけど、どこで公開しようずか考えおる間に先に内容をある皋床出しおおこうず思っおここに眮いおおきたす。もうちょっずペヌゞが分かれたりスクリヌンショットが远加されたりする予定です。

あずMDNが党然日本語になっおなくお、翻蚳䜜業したい気はあるんだけど、曎新ずかじゃなくお新芏にやった経隓はなくお、どなた様かに䞀床レビュヌしおもらいたいなず思い぀぀、どこで誰に頌めばよくわからないので、なんかあれば教えおほしいです。受け身

以䞊です。今埌ずも䜕卒宜しくお願い臎したす。