画像付きWhatsAppリンクを共有！HTML、メタタグ、JavaScriptで実現

2024-05-19

HTML、メタタグ、WhatsApp を用いた画像付き WhatsApp リンク共有のプログラミング解説

この解説では、HTML、メタタグ、および WhatsApp API を活用して、Web ページに画像付きの WhatsApp リンクを共有できる機能を実装する方法を説明します。

必要なもの

ウェブサーバー
テキストエディタ (例: Visual Studio Code, Sublime Text)
基本的な HTML と JavaScript の知識

手順

HTML ページを作成する

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>共有ページ</title> </head> <body> <img src="image.jpg" alt="共有したい画像"> <p>このコンテンツを WhatsApp で共有しましょう！</p>

   <button id="shareButton">WhatsApp で共有</button>

   <script>
       const shareButton = document.getElementById('shareButton');

       shareButton.addEventListener('click', () => {
           const imageUrl = 'image.jpg'; // 共有したい画像のURL
           const message = 'このコンテンツをチェックしてみてください！'; // 共有メッセージ

           const whatsappURL = `whatsapp://send?image=<span class="math-inline">\{imageUrl\}&text\=</span>{message}`;

           // ブラウザが WhatsApp をサポートしているかどうかを確認
           if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
               window.location = whatsappURL;
           } else {
               alert('WhatsApp をインストールしてください');
           }
       });
   </script>

</body> </html>


2. **メタタグを追加する**

`head` セクションに以下のメタタグを追加します。このメタタグは、WhatsApp アプリ内でページがどのように表示されるかを制御します。

```html
<meta name="og:image" content="image.jpg">
<meta name="og:title" content="共有ページ">
<meta name="og:description" content="このコンテンツを WhatsApp で共有しましょう！">

og:image: 共有時に表示される画像のURL を指定します。

JavaScript コードを追加する

上記の HTML コードに、JavaScript コードを追加して、WhatsApp 共有ボタンのクリックイベントを処理します。

const shareButton = document.getElementById('shareButton');

shareButton.addEventListener('click', () => {
    const imageUrl = 'image.jpg'; // 共有したい画像のURL
    const message = 'このコンテンツをチェックしてみてください！'; // 共有メッセージ

    const whatsappURL = `whatsapp://send?image=<span class="math-inline">\{imageUrl\}&text\=</span>{message}`;

    // ブラウザが WhatsApp をサポートしているかどうかを確認
    if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
        window.location = whatsappURL;
    } else {
        alert('WhatsApp をインストールしてください');
    }
});

このコードは、以下の処理を行います。

共有したい画像のURL とメッセージを取得します。
whatsapp://send スキーマを使用して WhatsApp 共有 URL を作成します。
ブラウザが WhatsApp をサポートしているかどうかを確認します。
サポートしている場合は、WhatsApp 共有 URL を開きます。
サポートしていない場合は、ユーザーに WhatsApp をインストールするように促します。

補足

上記は基本的な例であり、ニーズに合わせてカスタマイズできます。
共有する画像のサイズは、WhatsApp の推奨事項に従ってください。
ユーザーが共有を拒否する可能性があることに注意してください。

HTML、メタタグ、WhatsApp を用いた画像付き WhatsApp リンク共有のサンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>共有ページ</title>

    <meta name="og:image" content="image.jpg">
    <meta name="og:title" content="共有ページ">
    <meta name="og:description" content="このコンテンツを WhatsApp で共有しましょう！">
</head>
<body>
    <img src="image.jpg" alt="共有したい画像">
    <p>このコンテンツを WhatsApp で共有しましょう！</p>

    <button id="shareButton">WhatsApp で共有</button>

    <script>
        const shareButton = document.getElementById('shareButton');

        shareButton.addEventListener('click', () => {
            const imageUrl = 'image.jpg'; // 共有したい画像のURL
            const message = 'このコンテンツをチェックしてみてください！'; // 共有メッセージ

            const whatsappURL = `whatsapp://send?image=${imageUrl}&text=${message}`;

            // ブラウザが WhatsApp をサポートしているかどうかを確認
            if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
                window.location = whatsappURL;
            } else {
                alert('WhatsApp をインストールしてください');
            }
        });
    </script>
</body>
</html>

// JavaScript コードは HTML コード内に記載されています。

このコードはあくまでサンプルであり、必要に応じて変更してください。

HTML、メタタグ、JavaScript 以外の方法で画像付き WhatsApp リンクを共有する方法

ファイル共有サービスを使用する

画像を共有できるオンラインサービス (例: Dropbox, Google Drive) に画像をアップロードし、WhatsApp でそのファイルへのリンクを共有します。この方法は、画像のサイズが大きい場合や、複数の画像を共有したい場合に適しています。

QR コードを使用する

静的な QR コードジェネレータを使用して、画像付き WhatsApp リンクの QR コードを作成します。QR コードを画像として保存し、WhatsApp で共有します。ユーザーは QR コードをスキャンして、リンクを開くことができます。この方法は、オフラインで共有したい場合や、スマートフォンに QR コードスキャナーがインストールされていないユーザーに共有したい場合に適しています。

WhatsApp Web を使用する

コンピュータで WhatsApp Web を使用している場合は、画像をドラッグして WhatsApp チャットウィンドウにドロップすることで、画像付きリンクを共有できます。この方法は、コンピュータから共有したい場合に適しています。

各方法の比較

方法	メリット	デメリット
HTML、メタタグ、JavaScript	簡単、カスタマイズ可能	セットアップが複雑
ファイル共有サービス	大容量の画像や複数の画像を共有可能	アップロードとダウンロードが必要
QR コード	オフラインで共有可能、QR コードスキャナーが必要	QR コードをスキャンする必要がある
WhatsApp Web	コンピュータから簡単に共有可能	WhatsApp Web を使用する必要がある