こんにちは！ノーコードに特化した開発を行っております。
EPICs合同会社です。
今回はノーコードツール「Bubble 」で作成したアプリ内に「PDFデータを表示させる方法」について解説をしていきます！
動画解説バージョンはこちら！
実装イメージ
実装手順
以下の手順で実装します。
- データベースの準備
- HTMLの配置と設定
データベースの準備
PDFの表示にあたり必要なのは、基本的にPDFを格納する「File形式」のデータのみです！
今回は「User」の中に「PDF」という「File形式」のデータを用意しました。
※お好みでPDFデータを格納したい箇所に「File形式」のデータを用意してもらえれば問題ないです。
HTMLの配置と設定
データの準備ができたらPDFを表示させたいページを開き、HTMLを配置しましょう。
HTMLの配置ができたら、設定を追加していきます。
HTMLのAppearanceに下記のコードを入れましょう！
<iframe src="(PDFが格納されているデータベースの指定)
"width="100%"height="100%"</iframe>
“width=やheight=の後ろの””内の数字を変えることでPDFの表示サイズを変更することも可能です！
例："width="50%"height="50%"</iframe>
これで設定は以上です！
実際にPDFのデータをデータベースに格納して、表示がされるか試してみましょう！
本記事が開発力の向上や開発を検討している方のお役に立てておりましたら幸いです。
アプリ・Webサービスの開発相談はこちら
EPICs合同会社ではAdalo、Bubble、Flutter Flow、STUDIO、Glideなど様々なノーコードツールを活用しています。
ノーコード開発を行うことで、皆様のアイデアをより簡単に迅速に形にすることができるかと思います！
また弊社はスタートアップ、中小企業、新規事業でのアプリ開発に強みを持っており、アイデアベースから伴走をしていくことも可能です。
アプリやWebサービスの開発をご検討の方はぜひお気軽にこちらからご相談ください。
