spotlightにそれっぽいアマゾンの商品リンクを埋め込む方法

ocknamo

2020-07-30 21:59:34

※スマホに対応しました。

spotlightにもnoteみたいにこういうアマゾンへのリンクを貼りたいですよね。

生成ツールなどは無いので自分で作ってみました。

嘘喰い 1 (ヤングジャンプコミックスDIGITAL) Kindle版

Kindle本マンガ

遊ぶ金欲しさに闇金に手を出し、取立てに追われる青年・梶くんの前に現れた謎の男・斑目貘。自らギャンブラーと名乗り、借金返済を手伝うと豪語する貘は、闇カジノへと乗り込むが…!?

528円

ソースコード

上に貼った貼り付けるソースコードはこんな感じになっています。

<div style="display: flex; margin-left: 10px; border: 1px solid #e6e6e6; border-radius: 4px; max-width: fit-content;">
    <div style="margin-left: 16px;">
        <a href="https://www.amazon.co.jp/dp/B009LHC0J2/ref=cm_sw_r_tw_dp_x_uSJiFb9SX7NDT" target="_blank" rel="noreferrer noopener" style="color: #333;text-decoration-line: none;">
            <h2 style="font-size: 16px; margin: 16px 0px 0px; word-break: break-word;">嘘喰い 1 (ヤングジャンプコミックスDIGITAL) Kindle版</h2>
            <p style="font-size: 14px; margin: 4px 0px 0px;">Kindle本 マンガ</p>
            <p style="font-size: 14px; max-width: 300px !important; margin: 0px; max-height: 10em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;">遊ぶ金欲しさに闇金に手を出し、取立てに追われる青年・梶くんの前に現れた謎の男・斑目貘。自らギャンブラーと名乗り、借金返済を手伝うと豪語する貘は、闇カジノへと乗り込むが…!?</p>
            <p class="price" style="font-weight: 700; margin: 0px;" >528<span style="font-size: 0.8em;">円</span></p>
        </a>
    </div>
    <a href="https://www.amazon.co.jp/dp/B009LHC0J2/ref=cm_sw_r_tw_dp_x_uSJiFb9SX7NDT" target="_blank" rel="noreferrer noopener" style="color: #333;text-decoration-line: none;">
        <img style="height: auto; max-width: 150px !important; margin: 8px;" src="https://m.media-amazon.com/images/I/51a9nSyjZbL.jpg" title="商品画像" />
    </a>
</div>

埋め込む商品情報を{{}}で囲んで表示するとこうなります。

<div style="display: flex; margin-left: 10px; border: 1px solid #e6e6e6; border-radius: 4px; max-width: fit-content;">
  <div style="margin-left: 16px;">
      <a href="{{商品ページURL}}" target="_blank" rel="noreferrer noopener" style="color: #333;text-decoration-line: none;">
          <h2 style="font-size: 16px; margin: 16px 0px 0px; word-break: break-word;">{{商品名}}</h2>
          <p style="font-size: 14px; margin: 4px 0px 0px;">{{商品ジャンル}}</p>
          <p style="font-size: 14px; max-width: 300px !important; margin: 0px; max-height: 10em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;">{{商品説明}}</p>
          <p class="price" style="font-weight: 700; margin: 0px;" >{{価格}}<span style="font-size: 0.8em;">円</span></p>
      </a>
  </div>
  <a href="{{商品ページURL}}" target="_blank" rel="noreferrer noopener" style="color: #333;text-decoration-line: none;">
      <img style="height: auto; max-width: 150px !important; margin: 8px;" src="{{商品画像URL}}" title="商品画像" />
  </a>
</div>

必要な情報を{{商品名}}{{商品ジャンル}}などに入れていきます。エディターにコピーしてください。

作り方

それでは作成してみましょう

まず紹介したい商品のサイトに行きます。

矢印の画像の上で右クリックすると「画像アドレスをコピー」のようなメニューがでるので、コピーしてソースコードの{{商品画像URL}}に貼り付けます。

次に商品名と商品ジャンル、商品説明、価格を同じく貼り付けます。

最後に商品URLですが、右下のシェアボタンを押すと商品URLが作成されるのでそれを貼り付けると良いでしょう。

コードができたら、spotlightに貼り付けます。

空白業にカーソルを合わせると出てくる、これを選択して。

Embedを選びます。

"Paste youre embed code below"の下のフォームにさっき作ったコードを貼り付けます。

Saveすると、

嘘喰い 49 (ヤングジャンプコミックスDIGITAL) Kindle版

本コミック

ついに貘の仕掛けた一世一代の策“閏秒”が切間創一に炸裂!!　たった1秒の為、途方も無いスケールで仕込まれた一撃は、果たして嘘喰い史上最強の敵を屠るに至るのか!?　そして“屋形越え”の決着と共に物語はいよいよ終局へ――…。賭博（ギャンブル）に魅せられ、全てを捧げた男の武勇録、『嘘喰い』堂々完結――!!

537円

できました。まあまあかな。

面倒なので自動化ツールができると良いですね。スクリプトなら作れるかもですが。

付録

表示が崩れているようで、ソースコードからコピペできるか不安になったのでソースコードのテキスト版も載せておきます。

「```」の間をコピペしてもらえば使えるはず。

```

<div style="display: flex; margin-left: 10px; border: 1px solid #e6e6e6; border-radius: 4px; max-width: fit-content;">
<div style="margin-left: 16px;">
<a href="{{商品ページURL}}" target="_blank" rel="noreferrer noopener" style="color: #333;text-decoration-line: none;">
<h2 style="font-size: 16px; margin: 16px 0px 0px; word-break: break-word;">{{商品名}}</h2>
<p style="font-size: 14px; margin: 4px 0px 0px;">{{商品ジャンル}}</p>
<p style="font-size: 14px; max-width: 300px !important; margin: 0px; max-height: 10em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;">{{商品説明}}</p>
<p class="price" style="font-weight: 700; margin: 0px;" >{{価格}}<span style="font-size: 0.8em;">円</span></p>
</a>
</div>
<a href="{{商品ページURL}}" target="_blank" rel="noreferrer noopener" style="color: #333;text-decoration-line: none;">
<img style="height: auto; max-width: 150px !important; margin: 8px;" src="{{商品画像URL}}" title="商品画像" />
</a>
</div>

```