案件対応が必要になりそうなので先回りしての実証実験になります。うまく出来るかぁ、ワクワク。
本当は少し話題になったpicture-in-pictureの記事にしようと思っていたんですが、実作業で使う可能性があるものを優先します。
Web Sare APIとはいったい何者？
唐突ですが、お金かかります？
Web関連の仕事をやっていると「単純なAPI」と「WebAPI」を混同しがちではないでしょうか。純粋にAPIという場合は、OSやソフトウェア管轄の一部の機能を、外部のプログラム（イメージではこれから作る・作ったプログラム）から利用できるようにした一連の仕組みです。
さらにイメージしやすくすると、APIはOSやソフトウェアの持つ汎用性の高い機能をまとめ、ご自由に機能やモジュールを呼び出してくださいな、というプログラム群（関数群は言い過ぎかな）の総称です。「コアな部分は渡せないけど、表面部分（Interface）はどうぞ使ってください」というような理解で大丈夫かと思います。
一方「WebAPI」の場合、http、httpsのようなプロトコルを介してAPIを提供します。
使用するパッケージ自身にAPIが入っている場合と、インターネット経由でパッケージの外にあるサービスのAPIを使う場合の2種類が大きく分けて存在します。前者が「API」で後者が「WebAPI」だと考えておいて良いでしょう。
本題の、料金は発生するのか、という問題ですがが「Web Sare API」は「純粋に各ブラウザ標準で提供されるAPI」なのでもちろん無料です。話題のTwtterAPIみたいに有料化にします、的な大惨事にはならないのでご安心ください。そもそもTwitterAPIはWebAPIなので有料でもおかしくないんですけどね。
脱線しましたが、「Web Sare API」はWebブラウザの機能の一部をWebブラウザ内で使うので、生粋のAPIです。なので料金はかかりません。
対応ブラウザを確認しましょう
2023年2月16日時点では下記のブラウザの最新版に対応しています。
- Chrome
- Edge
- Safari
- Chrome for Android
- Safari on iOS
- Samsung Internet
- Firefox for Android
もちろんIEさんは、先日お亡くなりになりましたので対応が進むことはありません。合掌。
上記のリストを見る限りでは主戦力となっているブラウザ達は全員対応しているようです。
詳しくは、https://caniuse.com/web-share をご覧ください。
本題の Web Sare API について
ユーザーが選択した任意の宛先にURLやテキスト、ファイルなどを共有するためのAPIです。
実は、このAPIはHTMLとCSSとJavaScriptがある程度わかっていれば全く難しくありません。発火した後のUIはブラウザ依存で、こちらでレイアウトを整える必要もないです。
実際にソースを触るのが理解の早道
もちろん、このWeb Sare APIをWebページ内に埋め込むことが可能です。見たり触ったりした方が100倍早いのでサンプルを掲載します。下記ボタンを押すと共有のダイアログが出現します。UIや挙動はスマホやPCなどのデバイスに依存しますのでiPhoneでもAndroidでも確認してみてください。
<button id="webShareApi">【シェアしてね！】</button>#webShareApi {
background-color: orange;
color: white;
font-weight: bold;
font-size: 120%;
cursor: pointer;
}const shareButton = document.getElementById('webShareApi');
shareButton.addEventListener('click', async () => {
try {
await navigator.share(
{
title: document.title,
url: "https://engineering.webstudio168.jp/"
});
} catch (error) {
console.error(error);
}
});このサンプルコードで、開いているWebページを共有出来ると思います。最も簡単なサンプルなので少し改良してみてください。
格文法（try…catch、async…awaitなど）については別記事でまとめますので気長にお待ちください。
