Web共有APIの使用

34436 ワード
webdev react javascript テキストリンク

First published on Telerik Blog


あなたはおそらくあなたの連絡先またはいくつかの他のアプリケーションにお使いのデバイス上のコンテンツを共有している.これは、コピー/ペースト、新しいウィンドウをポップアップするWebアプリケーションの共有機能、またはモバイルデバイスのネイティブ共有機能を使用することができます.つのアプリケーションから他のモバイルOSのリソースを共有するためのUXは、ユーザーがあなたが共有したいものの目的地を選択できるピッカーダイアログをもたらす共有アクションを開始することができます.

このデバイスの機能を利用できるようにするAPIを定義する仕様があり、ユーザがネイティブアプリケーションでできるように、Webアプリケーションからリソースを共有できるようになります.このAPIはWeb共有APIと呼ばれます.
Web共有APIは、ユーザーが任意のランダムな宛先に簡単にWebブラウザからリソースを共有することができます.あまりにも多くのコードを書くことなく、ネイティブの共有機能を処理します.このポストでは、私はあなたに反応APIでこのAPIを使用する方法を示すつもりです.

始めましょう!
新しい反応アプリを作成しましょうcreate-react-app . コマンドラインアプリケーションで以下のコマンドを実行します.
npx create-react-app sharer
お好みのコードエディターでアプリケーションを開いてくださいApp.js . 内容を以下のコードで置き換えます.
import React from "react";
import "./App.css";
function App() {
  return <div className="App"></div>;
}
export default App;
アプリをきれいにするために、CSSのビットを振りかけましょう.開くApp.css そして以下の内容に置き換えます.
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
}
.App {
  font-family: "Jost", sans-serif;
  position: relative;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
  color: #888;
}

button {
  border: 0;
  padding: 0 20px;
  border-radius: 4px;
  cursor: pointer;
}
.close-button {
  align-self: center;
  padding: 0;
  background: transparent;
  font-size: 1.6rem;
  color: #666;
}

.share-button-wrapper {
  padding: 10px 20px;
  background: #ddd;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.9rem;
  cursor: pointer;
}

.share-modal {
  position: absolute;
  z-index: 9999;
  width: 80%;
  max-width: 400px;
  box-shadow: 0 0 5px #eee;
  transform: translateY(-200%);
  transition: 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.share-modal.opened {
  background: #fff;
  transform: translateY(0%);
}

.modal-header,
.modal-body,
.modal-footer {
  display: flex;
  padding: 20px;
}

.modal-header {
  justify-content: space-between;
  padding: 15px 20px;
}

.modal-title {
  align-self: center;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-size: 0.9rem;
  color: #666;
}

.modal-body {
  flex: 1;
  display: grid;
  grid-gap: 20px;
}

.modal-body > .row {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

.modal-body > .row > div {
  align-self: center;
  justify-self: center;
  width: 100%;
}

.modal-body > .row > div > button {
  height: 35px;
  width: 100%;
  padding: 0 25px;
  background: transparent;
  color: #888;
  border: 1px solid #eee;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.8rem;
  cursor: pointer;
}

.modal-footer-link {
  align-self: center;
  background: #eee;
  padding: 10px 15px;
  margin-right: 10px;
  border-radius: 4px;
  text-transform: lowercase;
  letter-spacing: 2px;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-footer-button {
  flex: 1 0 auto;
  text-transform: uppercase;
  color: #fff;
  background: #ff008d;
  font-weight: 600;
}
ファイル名Share.js srcフォルダ内にあります.このコンポーネントは、共有ポップアップをトリガーする責任があります.以下の内容を加えるShare.js .
import React from "react";
function Share({ label }) {
  return (
    <button className="sharer-button">
      <span className="sharer-button-text">{label}</span>
    </button>
  );
}
export default Share;
次に、共有コンポーネントをインポートして使用しますApp.js . インポート文を追加するShare.js 1行目以降App.js
import Share from "./Share";
次に、以下のコードを返す関数を更新します.
return (
  <div>
    <Share
      label="Share"
      title="My Web Share Adventures"
      text="Hello World! I shared this content via Web Share"
    />
  </div>
);
ここでは、Propsのラベル、タイトル、およびテキストを共有コンポーネントに渡しました.ボタンをクリックしても何も特別なことは起きていません.そのことをしましょう.
更新Share.js 次のようにします.
function Share({ label, text, title }) {
  const canonical = document.querySelector("link[rel=canonical]");
  let url = canonical ? canonical.href : document.location.href;
  const shareDetails = { url, title, text };

  const handleSharing = async () => {
    if (navigator.share) {
      try {
        await navigator
          .share(shareDetails)
          .then(() =>
            console.log("Hooray! Your content was shared to tha world")
          );
      } catch (error) {
        console.log(`Oops! I couldn't share to the world because: ${error}`);
      }
    } else {
      // fallback code
      console.log(
        "Web share is currently not supported on this browser. Please provide a callback"
      );
    }
  };
  return (
    <button className="sharer-button" onClick={handleSharing}>
      <span className="sharer-button-text">{label}</span>
    </button>
  );
}
という名前の関数を追加しましたhandleSharing これは、共有のピッカーをトリガし、ユーザーが目的地を選択できるようにWeb共有APIを使用します.これは、ブラウザがif (navigator.share) . そうでない場合は、コンソールにメッセージが表示されます.それ以外の場合はnavigator.share() ブラウザの実行中のデバイスのネイティブ共有メカニズムをトリガーする.それは、共有されるURL、テキストとタイトルのためにプロパティを含むオブジェクトを受け入れます.約束が満たされるとき、それはコンソールで成功メッセージを印刷するという約束を返します.からの約束navigator.share() パラメータが正しく指定されていない場合は直ちに拒否し、ユーザが共有をキャンセルした場合にも拒否されます.それ以外の場合は、ユーザが目的地を選択したときに成功します.
サポートされていないブラウザでは、コンソール内のメッセージ以外は何も起こりません.この場合、モーダルを表示することで修正しましょう.
ファイル名ShareModal.js srcディレクトリで次のように更新します.
import React, { Fragment } from "react";
function ShareModal({ modalVisible, shareData, handleClose }) {
  return (
    <>
      <div className={`${"share-modal"} ${modalVisible ? "opened" : "closed"}`}>
        <section className="modal-header">
          <h3 className="modal-title">Share Via</h3>
          <button className="close-button" onClick={() => handleClose(false)}>
            &times;
          </button>
        </section>
        <section className="modal-body">
          <div className="row">
            <div>
              <button>Facebook</button>
            </div>
            <div>
              <button>Twitter</button>
            </div>
          </div>
          <div className="row">
            <div>
              <button>Instagram</button>
            </div>
            <div>
              <button>Tiktok</button>
            </div>
          </div>
        </section>
        <section className="modal-footer">
          <div className="modal-footer-link">{shareData.url}</div>
          <button className="modal-footer-button">Copy Link</button>
        </section>
      </div>
    </>
  );
}
export default ShareModal;
これはモーダルのマークアップです.これは、小道具を開くか閉じたり、共有するリソースについての詳細を決定する小道具を受け取ります.
今すぐ更新Share.js 状態を表示したり、モードを非表示に決定するためにデータを追加することによって.
const [showModal, setShowModal] = useState(false);
その後、我々はhandleSharing 関数呼び出しsetShowModal(true) 他のブロックでは、Web共有APIがブラウザによってサポートされていない場合.
else {
    // fallback code
    setShowModal(true); //this is the line added in this snippet
    // .... other code statement below
  }
最後の作品は、それをレンダリングするにはShareModal . return文を更新するShare.js 下のコードに.
return (
  <>
    <button className="sharer-button" onClick={handleSharing}>
      <span className="sharer-button-text">{label}</span>
    </button>

    <ShareModal
      handleClose={setShowModal}
      shareData={shareDetails}
      modalVisible={showModal}
    />
  </>
);
それだ!今、あなたは反応アプリを実行することができますし、どのように動作を参照してください.

あなたはデモオンラインを見つけることができますhere .
これはブラウザのサポートが限られていることに注意することが重要です.参照MDN 互換性チャート.

包む
近年のweb規格の改良と追加がなされている.それらのいくつかはService Worker API and Web Bluetooth API . このポストではWeb Share API そして、どのように反応アプリでWeb共有APIを使用することができます.我々は、さまざまなメカニズムを使用して共有する機能を使用して別のモードを表示するためにフォールバックメカニズムを持つサンプルアプリを構築しました.私たちの焦点がWeb共有APIにあるので、私はその部分を実行している詳細に入りませんでした、しかし、あなたはプロジェクトで遊んで、それによってそれを実行することができます.
実行中にエラーが発生した場合は、コメントを残して自由に感じ、メールを送ってください.
ソースコードはGitHub .
参考文献
  • Web Share API
  • Service Worker API on MDN
  • Web Bluetooth API on MDN
  • Web Share Demos
    • 【Android】カスタムProgressView-プログレスバーアニメーション
    How to Choose a Coaching for MPPSC State Service Exam?