【無料情報】DMM APIを使ってウェブページに自分で作った広告を表示する簡単な方法

とりあえずチャレンジ

この記事では、DMM APIを使ってウェブページに広告のようなコンテンツを表示する方法について、できるだけわかりやすく説明していきます。特にプログラミングが初めての方でも理解できるように、コードの内容を一つ一つ解説していきます。興味がある方は、ぜひ一緒に学んでみましょう！

HTMLコードの基本構造

まずはじめに、今回使うコードは「HTML」という言語で書かれています。HTMLは、ウェブページの「骨組み」や「内容」を作るためのものです。ウェブページを家に例えると、HTMLは「柱」や「壁」を作る材料です。

1. `<html>` と `<head>` 部分の説明

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>DMM API 広告表示</title>

  • `<!DOCTYPE html>`: これは「このページはHTMLで書かれている」という宣言です。

  • `<html lang="ja">`: このタグは、「このページは日本語で書かれている」という意味です。`<html>` タグはページ全体を囲む「最初の箱」です。

  • `<head>` と `</head>`: `<head>` 部分には、ページに表示されない情報が入ります。たとえばページのタイトルや文字の設定などです。

  • `<meta charset="UTF-8">`: これは「このページで使う文字はほとんどの言語に対応しているよ」という設定です。

  • `<meta name="viewport" content="width=device-width, initial-scale=1.0">`: これにより、スマートフォンでも見やすく表示されるようになります。

  • `<title>DMM API 広告表示</title>`: これはブラウザの「タブ」に表示されるタイトルです。例えば、ブラウザの上部にある小さなタブで「DMM API 広告表示」と表示されます。

2. ページのデザイン設定 (CSS)

次は、ページの見た目を設定する「CSS」の部分です。CSSは、ページをきれいに見せるための「デザイン」を担当しています。

<style>
    /* 基本的なスタイル設定 */
    .ad-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
        padding: 20px;
    }
    .ad-item {
        width: 300px;
        border: 2px solid #ff69b4;
        border-radius: 10px;
        padding: 15px;
        background: #f9f9f9;
        transition: transform 0.3s;
        position: relative;
    }
    .ad-item img {
        max-width: 100%;
        border-radius: 10px;
    }
    .cta-button {
        background: #ff69b4;
        color: #fff;
        text-align: center;
        padding: 10px;
        border-radius: 5px;
        text-decoration: none;
        display: inline-block;
    }
    .cta-button:hover {
        background: #e758a5;
    }
</style>

  • `<style>`: この中には、ページのデザインに関する情報（CSS）が書かれています。

  • `.ad-container` と `.ad-item`: `.` (ドット) は「クラス」を表し、スタイルの設定を複数の要素に適用できます。

    • `.ad-container` は広告全体を囲む大きな箱で、広告をきれいに並べるための指示が書かれています。例えば、横に並べる（`display: flex`）や間隔を開ける（`gap: 20px`）などです。

    • `.ad-item` は広告1つ1つのデザインです。たとえば、ピンク色の枠（`border: 2px solid #ff69b4`）や丸みのある角（`border-radius: 10px`）などが設定されています。

3. `<body>` と広告を表示する箱 (`<div>`)

<body>
    <div id="adContainer" class="ad-container"></div>

  • `<body>`: この部分は、実際にブラウザで表示される「中身」を書くところです。

  • `<div id="adContainer" class="ad-container"></div>`: `<div>` タグは「箱」を作るためのものです。この箱は広告を入れるためのもので、JavaScriptを使ってこの箱の中に広告を表示します。

4. JavaScriptで動きをつける

次に「JavaScript」というプログラミング言語を使って、広告を表示させる部分を作ります。JavaScriptはウェブページに「動き」や「機能」を追加するプログラムです。

<script>
    // APIのエンドポイント
    const apiURL = 'https://api.dmm.com/affiliate/v3/ItemList?api_id=YOUR_API_ID&affiliate_id=YOUR_AFFILIATE_ID&site=FANZA&service=doujin&floor=digital_doujin&hits=12&sort=rank&output=json';

  • `<script>`: JavaScriptを書くためのタグです。

  • `const apiURL`: `apiURL` という変数にDMMのAPIのURLを保存しています。APIとは「他のサービスからデータを取るための窓口」のようなものです。`YOUR_API_ID` と `YOUR_AFFILIATE_ID` の部分には自分のIDを入れます。

    // APIからデータを取得する関数
    async function fetchDMMData() {
        try {
            const response = await fetch(apiURL);
            const data = await response.json();
            const items = data.result.items;

  • `async function fetchDMMData()`: これは「fetchDMMData」という名前の関数です。「関数」とは、「何かをするまとまり」のことです。この関数はDMMからデータを取ってきます。

  • `fetch(apiURL)`: `apiURL` で指定された場所からデータを取ってきます。

  • `await`: データが返ってくるまで「待つ」動作です。

  • `data.result.items`: 取ってきたデータの中から、商品のリスト（items）を取り出します。

            // データを広告のように整形して表示
            const adContainer = document.getElementById('adContainer');
            items.forEach((item) => {
                const adElement = document.createElement('div');
                adElement.className = 'ad-item';

                adElement.innerHTML = `
                    <img src="${item.imageURL.large}" alt="${item.title}">
                    <a href="${item.affiliateURL}" class="cta-button" target="_blank">詳細を見る</a>
                `;
                adContainer.appendChild(adElement);
            });
        } catch (error) {
            console.error('データの取得に失敗しました:', error);
        }
    }

  • `document.getElementById('adContainer')`: HTMLの中で `id="adContainer"` と指定された場所を見つけます。

  • `items.forEach((item) => { ... })`: 商品リストに含まれるアイテム1つ1つに対して処理を行います。

  • `document.createElement('div')`: 新しい `<div>` タグを作ります。これは広告1つ分の箱になります。

  • `adElement.innerHTML = ...`: この広告の中に、商品の画像や「詳細を見る」リンクを追加します。

  • `adContainer.appendChild(adElement)`: できあがった広告を、大きな広告箱の中に入れます。

    // ページ読み込み時にデータを取得
    document.addEventListener('DOMContentLoaded', fetchDMMData);
</script>

  • `document.addEventListener('DOMContentLoaded', fetchDMMData)`: ページが読み込まれたときに、自動的に `fetchDMMData()` を実行し、DMMからデータを取ってきます。

全体の流れ

  1. HTMLとCSSでページの見た目を準備します。

  2. **JavaScriptを

使ってDMMからデータを取りに行き**ます。
3. 取ってきたデータを使って、広告を作成してページに表示します。

タブに関する説明

  • タブに表示されるタイトル: `<title>` タグに書かれた内容（「DMM API 広告表示」）は、ブラウザのタブに表示されるタイトルです。これで、どんなページを見ているかすぐにわかります。

注意点

  • `YOUR_API_ID` と `YOUR_AFFILIATE_ID` の設定: これらはあなたのDMMのIDで、データを取得するために必要です。

  • 無料ブログでの制約: 一部の無料ブログではJavaScriptが動かないことがあります。その場合は、このコードがうまく動かないかもしれません。

まとめ

このように、DMM APIを使うと簡単に広告のようなコンテンツをウェブページに表示することができます。HTML、CSS、JavaScriptという3つの技術を使って、ウェブページを作り、さらにAPIを使うことで外部のデータを簡単に取得できます。

もし興味があれば、自分のIDを使ってこのコードを試してみてください！あなたのウェブページに魅力的な広告を追加することができますよ。

自分のDMMapiでAPIIDとアフィリエイトIDを使ってみよう

下記にプレーンなDMMapiを掲載します。興味のある方は、自分のDMMapiでAPIIDとアフィリエイトIDを使ってwebページに掲載してみてください。
結構面白いですよ

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DMM API 広告表示</title>
    <style>
        /* 基本的なスタイル設定 */
        .ad-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
            padding: 20px;
        }
        .ad-item {
            width: 300px;
            border: 2px solid #ff69b4;
            border-radius: 10px;
            padding: 15px;
            background: #f9f9f9;
            transition: transform 0.3s;
            position: relative;
        }
        .ad-item img {
            max-width: 100%;
            border-radius: 10px;
        }
        .cta-button {
            background: #ff69b4;
            color: #fff;
            text-align: center;
            padding: 10px;
            border-radius: 5px;
            text-decoration: none;
            display: inline-block;
        }
        .cta-button:hover {
            background: #e758a5;
        }
    </style>
</head>
<body>
    <div id="adContainer" class="ad-container"></div>

    <script>
        // APIのエンドポイント
        const apiURL = 'https://api.dmm.com/affiliate/v3/ItemList?api_id=YOUR_API_ID&affiliate_id=YOUR_AFFILIATE_ID&site=FANZA&service=doujin&floor=digital_doujin&hits=12&sort=rank&output=json';

        // APIからデータを取得する関数
        async function fetchDMMData() {
            try {
                const response = await fetch(apiURL);
                const data = await response.json();
                const items = data.result.items;

                // データを広告のように整形して表示
                const adContainer = document.getElementById('adContainer');
                items.forEach((item) => {
                    const adElement = document.createElement('div');
                    adElement.className = 'ad-item';

                    adElement.innerHTML = `
                        <img src="${item.imageURL.large}" alt="${item.title}">
                        <a href="${item.affiliateURL}" class="cta-button" target="_blank">詳細を見る</a>
                    `;
                    adContainer.appendChild(adElement);
                });
            } catch (error) {
                console.error('データの取得に失敗しました:', error);
            }
        }

        // ページ読み込み時にデータを取得
        document.addEventListener('DOMContentLoaded', fetchDMMData);
    </script>
</body>
</html>

下記に注意の上、楽しくdmmアフィリエイトライフをお楽しみください

免責事項

  1. DMM APIの使用について

    • この記事で紹介しているスクリプトは、DMM APIを使用して広告のようなコンテンツをウェブページに表示する方法を紹介しています。DMM APIの利用には事前にAPI利用規約に同意し、APIキーを取得する必要があります。

    • この記事で紹介されている内容は学習目的です。DMM APIを使用する際は、必ずDMM公式の利用規約を遵守してください。

  2. 著作権とデータの利用

    • DMMから取得するコンテンツ（画像、タイトル、リンクなど）はDMM.comの著作権に属します。許可なく商用目的での利用や無断転載はお控えください。

  3. 利用によるリスク

    • このスクリプトを使用したことによるいかなる損害や損失についても、筆者およびnote.comは一切責任を負いません。特に、スクリプトが正しく機能しない場合や、APIの仕様変更により動作に問題が生じた場合も同様です。

    • セキュリティ上の観点から、APIキーやアフィリエイトIDを第三者に漏らさないよう注意してください。また、スクリプトを公開する際にはAPIキーが漏えいしないようにしてください。

  4. note.comでの動作について

    • このスクリプトはJavaScriptを含んでおり、一部のブログプラットフォームでは実行できない場合があります。note.comの環境でJavaScriptが適切に動作する保証はありませんので、その点をご了承ください。

  5. サポートに関して

    • このスクリプトに関するサポートは提供しておりません。記事を参考にする際には、自己責任でのご利用をお願いいたします。

  6. API利用の制限

    • DMM APIには利用回数の制限がありますので、過剰なリクエストを送るとAPIが一時的に利用停止になることがあります。開発やテストの際は、適切なリクエスト間隔を設けるようにしてください。

  7. 改変の自由

    • この記事で紹介しているコードは自由に改変して使用することができますが、改変後の動作については各自で確認をお願いします。改変によって生じた不具合や問題についての責任は負いかねます。


よろしければサポートお願いします！ いただいたサポートはクリエイターとしての活動費に使わせていただきます！ よろしくお願い致します