「Fyuse(フューズ)」で撮影した画像をサイトで使う方法アプリFyuse-share2015.05.27前回の記事では、「Fyuse(フューズ)」の使い方と撮影の仕方を説明したのですが、今回は、撮影した画像をサイトやブログの中に貼り付けて使う方法を説明します。何度か試したのですが、そのままタグを貼り付けると横幅が狭まるし、よくわからないスペースが貼り付けた画像の下に入ってしまうので、ソースコードの修正が必要でした。今回も画像も表示してわかりやすく説明をしてみます!!目次Fyuse(フューズ)で撮影したものをサイトに表示させる方法(全体の流れ)Fyuse(フューズ)で撮影したものをサイトに表示させる流れPCにリンクを送信するFyuse(フューズ)の埋め込み用コードを取得する実際にFyuse(フューズ)の埋め込み用コードを張ってみるFyuse(フューズ)の埋め込み用コードを編集する「Fyuse(フューズ)」で撮影した画像をサイトで使う方法のまとめFyuse(フューズ)で撮影したものをサイトに表示させる方法(全体の流れ)Fyuse(フューズ)ではスマフォで撮影したものをweb上に公開することが出来ます。Youtubeとかとは違ってブラウザでFyuse(フューズ)のサイトを開いて作業する事ができず、Fyuse(フューズ)の公式サイトにアクセスすると、アプリのダウンロードがメインのページになっており、ログインとかが出来ません。スマフォ上から撮影した画像のリンクを送る必要があります。送ったページを開くとブラウザに撮影(公開)した画像表示されて、その中から埋め込みコードを取得することが出来ます。そのコードをWprdpressであれば、テキスト部分に貼り付けるだけで表示することができるのですが、ちょっと修正したほうが見やすくなると思います。Fyuse(フューズ)で撮影したものをサイトに表示させる流れPCにリンクを送信するまずは、撮影した画像のリンクを取得します。スマフォでアプリを開くとホーム画面になると思うので、画面の右下にあるマイページの部分をクリックします。Fyuse(フューズ)で撮影25(アップ完了)端末上と投稿した画像に分かれるので、右側にある「投稿」の部分をクリックします。Fyuse(フューズ)で撮影27(投稿数)ギャラリーごとに分ける機能があるのですが、「全て表示」にすると全部見ることができるので、そっちをクリックっていうかタップFyuse(フューズ)で撮影28(投稿すべての表示)そうすると、撮影したものが新しい物順に出てきます。Fyuse(フューズ)で撮影29(投稿一覧)少し下がるとその画像の投稿に対してのアクションが選択できるのですが、一番右の「・・・」の部分をタップFyuse(フューズ)で撮影30(リンク取得)そうすると「リンクをコピー」というのが出てくるので、リンクをコピーしてパソコンで見れるように送信します。パソコンで見れるのであれば、「メッセージで送信」でも、「メールで送信」でもOKです!Fyuse(フューズ)で撮影31(リンクをコピー)僕は、スマフォとパソコン共通で使っているのがチャットワークなのでチャットワークに貼り付けます!Fyuse(フューズ)で撮影32(チャットワーク)Fyuse(フューズ)の埋め込み用コードを取得するスマフォから届いたURLをクリックするとFyuse(フューズ)のURLこんな感じで表示されます。Fyuseで開いたページ右下に「share」のボタンがあるのでクリックすると、シェアするためのウィンドウが開きます。fyuse」の中に表示されているコードをコピーします。左下に「Autoplay」というところがあるのですが、チェックを入れると表示した時に自動再生するコードになるようです。実際にFyuse(フューズ)の埋め込み用コードを張ってみる先ほどのコードをそのまま貼るとこんな感じです。Autoplay(自動再生)にチェックを入れるとこんな感じ。見てもらうとわかると思うのですが、この文章の上に広いスペースが入っちゃいますよね。横幅が狭めに設定されているので、スマフォでも問題ないサイズなのですがこのブログはレスポンシブにしてあるので、もっと大きく表示したいですよね。allowfullscreen></iframe></div></div>1つ目の<div>でstyleとか書いてあるので、なんとなく消しちゃいます!※一番最後の</div>を消し忘れないように注意です。allowfullscreen></iframe></div>それで表示するとこんな感じにいい感じに大きく表示されましたね!!ただ、先ほどと同じように広いスペースが出ちゃってます。ソースを良く見ると、「;padding-bottom:177%」ってところがあるので、「77%」に変えてみましょう!!そうするとこんな感じ。このぐらいになりました!このぐらいだと悪く無いですよね!!ちなみに今までの画像はスマフォを縦にして撮影していたので、横に黒い画面がでてしまったのですが、スマフォを横にして撮影するとこんな感じで、気持よく収まります!!横で撮影した時の注意なのですが、「padding-bottom:56%」になっているので、先ほどと同じように「77%」に変更すると上記のようになります。「padding-bottom」は、お好みで変更したほうが良さそうですよ!!また、埋め込んだ画像に関しては「%」でソースが作られているので、レスポンシブにもちゃんと対応してくれます。このページのブラウザ幅をいじってもらうとわかると思うのですが、バッチリ動きました!!「Fyuse(フューズ)」で撮影した画像をサイトで使う方法のまとめここまで見ていただければ、綺麗に埋め込むことが出来たと思うのですが、やることをまとめますね。スマフォからリンクURLを取得するブラウザでURLを開いて埋め込みコードを取得するコード中の一番外側の<div>を削除するコード中の「padding-bottom」の数値を変更するこれで、サイトやブログの中に「Fyuse(フューズ)」で撮影した画像を使うことが出来ます!今までとは違う画像の見せ方ができるので、どのように使うかは色々考えるとおもしろいことが出来るかもですね。僕は、神輿が大好きで神輿のブログもやっているのでその中で使ってみました。いつも神輿本体の写真を見せるときや雰囲気を伝えるときに写真を並べていたのですが、「Fyuse(フューズ)」を使うと見やすそうです!あとは、ECで商品を見せる時にもいいかもですね!!ぐるっと一周できるし、周りだけじゃなく上方向にもアプローチできますね!!・・・ただ、やってみて思ったデメリットは、サイトの表示が遅くなってしまいますねぇ〜。コピーtontotakumiをフォローするtontotakumitontotakumi.com関連記事アプリ3D空間写真共有アプリ「Fyuse(フューズ)」の使い方(撮影の仕方)2014年12月17日にローンチされた、3D空間写真共有アプリ「Fyuse(フューズ)」の使い方です。2017年はじめ頃から僕は見かけるようになってきたのですが、すご〜く簡単に言うとスマホアプリに見える・使えるwebサイトの感じです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。views2017.04.06Wordpressで複数の会員が独自のページを作成し、内容を管理・更新できるようにする方法。(3)これから1年間ブログを頑張れるなら、最初からXサーバーにしとくのがオススメです。views2017.04.06Wordpressで複数の会員が独自のページを作成し、内容を管理・更新できるようにする方法。(3)これから1年間ブログを頑張れるなら、最初からXサーバーにしとくのがオススメです。タイトルとURLをコピーしました。