1. 概要
ガイド内でエンドユーザーにファイルをダウンロードさせるためのリンクをステップ内に挿入します。 ※こちらのコードでは、Googleドライブ上にファイルを格納していただく必要がございます。
2. 設定方法
- Googleドライブに共有用のフォルダを作成
- 1.のフォルダにエンドユーザーにダウンロードさせたいファイルをアップロード
- 2.のファイルの共有権限を［リンクを知っている全員］」に変更 ※本操作はGoogle ドライブの機能を用いた一例となります。共有設定やアクセス権限の管理については、貴社にてセキュリティポリシーに基づきご判断・ご管理をお願いいたします
- 3.のファイルのリンクをコピー ※フォルダのリンクではなくファイルのリンクをコピーしてください
- コピーしたリンクのうち、【FILE_ID】の部分を抽出
- 下記サンプルコードの「https://drive.google.com/uc?export=download&id=【FILE_ID】」の【FILE_ID】の部分に、5.で抽出したIDを記載
- ステップへHTMLブロックを追加し、上記で作成したコードを適宜修正して貼り付け
3. サンプルコード
あくまでサンプルコードとなりますので、作成したいデザインや内容を反映させてご利用ください。
3-1.テキストリンクのみ
<a href="https://drive.google.com/uc?export=download&id=【FILE_ID】"
download target="_blank" rel="noopener noreferrer">ダウンロードリンク</a>3-2.ダウンロードボタン
<div class="onb-download-wrapper">
<a href="https://drive.google.com/uc?export=download&id=【FILE_ID】"
download
target="_blank"
rel="noopener noreferrer"
class="onb-download-link">
ダウンロードリンク
<span class="onb-download-icon"></span>
</a>
</div>
<style>
.onb-download-wrapper {
display: flex;
justify-content: center;
padding: 20px;
}
.onb-download-link {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 24px;
background-color: #4361ee;
color: white !important;
text-decoration: none !important;
font-weight: bold;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease;
}
.onb-download-link:hover {
background-color: #3a56d4 !important;
text-decoration: none !important;
color: white !important;
}
.onb-download-icon {
display: inline-block;
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4'%3E%3C/path%3E%3C/svg%3E");
background-size: cover;
margin-left: 4px;
}
</style>注意
一部のブラウザではリンクをクリックしてもすぐにダウンロードが始まらず、プレビュー画面に遷移することがあります。 その場合は、ダウンロードボタンから手動で保存が可能です。
注意
セキュリティの観点より、Googleドライブの共有フォルダには機密性の高いファイルは格納しないようにご注意ください。
