STUDIOでPDFダウンロードボタンを実装する方法

はじめに
この記事はノーコードWebデザインプラットフォーム「STUDIO」のPDFダウンロードボタンを実装する方法を解説していきます。
STUDIO標準機能ではPDFダウンロードが実装ができないため、裏技的な方法になります。

PDFや画像などをGoogleドライブにアップロード

1. まずGoogleドライブにダウンロードさせたいPDFや画像データをアップロードします。

2. アップロードした画像を右クリック→共有→「リンクを知っている全員」に変更しリンクをコピーします。

共有をクリック

「制限付き」をクリック

「リンクを知っている全員」に変更し、リンクをコピーする

Googleドライブ側での設定はこれで完了です！

ファイルIDの確認

続いてファイルIDの確認です。
Googleドライブから取得したPDFのリンクは以下の様な構成になっています。

ドライブで取得したリンク【サンプル】

https://drive.google.com/file/d/123456789_ABCDEF/view?usp=share_link

※ファイルの種類や環境・権限等によってリンクの構成は異なります

太字の部分がファイルIDで、この後のリンク編集時に使用します。

直ダウンロードリンクに変換する

直接ダウンロードを開始させるリンクは、以下のURL・パラメータがベースとなっています。

ベースとなるURL

https://docs.google.com/uc?export=download&id=

ベースとなるURLの末尾にファイルIDを追加する事で、直ダウンロードリンクにする事ができます。

ベースURLにファイルIDを追加する

https://docs.google.com/uc?export=download&id=123456789_ABCDEF

これでダウンロードリンクが作成できました！

STUDIOにURLを貼り付け

ダウンロードリンクをSTUDIOで作成したボタンに貼り付けます。

これで完成です！🎉
実際にダウンロードできるか確認してみてください。

ちなみに、「新規タブで開く」にすると一瞬別のタブが開くので、ユーザーからしてもダウンロードボタンを押したことが分かりやすいのでオススメです。