どうも。
ブログ始めて早2年ほど、途中休んでいましたが、今は元気なCHASUEKでございます!!
前回、当ブログ内で空間撮影アプリFyuse(フューズ)を紹介させていただきました。
→[参考]3D空間撮影が可能な『Fyuse』の写真なら現場の雰囲気が一瞬で伝わる！！
上の記事中で、Fyuseの写真データをブログ内に埋め込み表示させるため、色々と苦労したので備忘録を残しておきます。同じ悩みを抱えた人に参考になれば幸いです。
公開していないデータは表示されない。
アプリ内からブログ内に貼り付けたいFyuseデータの埋込みコードを生成して貼り付けるだけでいいはずと思ったのですが、その前に公開する必要がありました。
試しに、未公開の写真をブログ内に貼ってみます。
▼公開してないデータの埋め込みコードを生成する。
▼生成されたコードはこちら。
<div id="fyu_zvouq3f52m" class="fyu_container fyu_horizontal"></div>
<script src="https://fyu.se/embed?v=2.0"></script><script>FYU.add("zvouq3f52m", "fyu_zvouq3f52m");</script>
▼上記コードを、そのままブログ内に貼り付ける。
表示されたのは、灰色の四角のみ。
この通り、未公開の写真は表示できません。公開してなければ、自分のスマホ内にしかデータがないので当然といえば当然か(- -;)。
▼公開して再度、実験してみます。
▼公開設定にしたら、無事に表示されました。
できた！！
けど、なんか小さい。
写真を画面いっぱいに表示する方法
いろいろ試して、下記のコードの【Fyuse管理ID】の箇所に自分が貼り付けたいデータのものに変更してやれば、うまいこと表示されました!!
<div style="position: relative; height: 0; width: 100%; padding-bottom: 72%;">
<iframe width="【画像サイズ】%" height="【画像サイズ】%" style="position: absolute; width:【画像サイズ】%; height:【画像サイズ】%; left: 0; top: 0;" src="https://fyu.se/v/embed/【Fyuse管理ID】" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe>
</div>
▼ここのFyuse管理IDはココをチェック。
▼完成した埋め込みコードがこちら。
<div style="position: relative; height: 0; width: 100%; padding-bottom: 72%;">
<iframe width="85%" height="85%" style="position: absolute; width: 85%; height: 85%; left: 0; top: 0;" src="https://fyu.se/v/embed/zvouq3f52m" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe>
</div>
上記をブログ内に貼り付けることで、この通り、部分いっぱいに写真が表示してくれました！！
縦サイズのFyuseでも試したが、こちらも同じ方法で縦いっぱいに表示してくれましたよ◎
まとめ。
- Fyuseでブログに貼り付けたい場合は、公開すること。
- 埋込コードはFyuseIDを上記コードにコピペすること。
これで満足です〜♪
では、おやすみなさい☆
