花園・パソコン研究会

アクセスカウンタ

zoom RSS BlogにOneDriveのファイルを埋め込む

<<   作成日時 : 2015/07/14 18:48   >>

ブログ気持玉 0 / トラックバック 0 / コメント 0

この動画は、OneDriveに置いたexcelファイルを、Onedriveのwebページで表示されるものを埋め込んだものです。
埋め込むというのは、HTMLタグの<iframe>を使うもので、ページの中にwebページを表示させるものです。リンクは、アドレスだけ埋め込んで、クリックするとそのページに飛ぶもので、別のページが表示されますが、iframeで埋め込むものは、ページの中に表示されます。

ワードやエクセルファイルは、リンクを共有することで、ファイルを見せることはできますが、その場合はダウンロードした相手が、同じofficeソフトをインストールしている必要があります。MicrosoftのOnedriveのwebページは、OfficeOnlineという方式で、ブラウザでofficeファイルを表示でき、これを<iframe>でブログの中で表示できます。そうすると、これを見る人はofficeソフトがなくても見ることができるのです。

mp4などの動画も埋め込めます。動画の埋め込みというと、youtubeにアップしたものをiframeタグを生成させ、これを表示させるものがありますが、onedriveを使うと、このファイルをiframeで埋め込めます。

新しいブラウザでは、動画を直接表示させられるようになりました。OneDriveに置いたmp4ファイルは、Onedriveのwebページで直接表示でき、これをブログに埋め込むことが可能です。ただし、理由は不明ですが、埋め込みがリンクになることもあるようです。

●frameタグを生成する

clomeなどのブラウザで、自分のOneDriveに繋いで、ファイルを表示させます。ここが分かりにくいのですが、パソコンのonedriveではなく、それと同期しているweb上のonedriveにログインします。アドレスは、 https://onedrive.live.com/ ですが、自分のmicrosoftアカウントでログインします。

スクリーンショット 2015-07-14 12.27.59 

埋め込みたいファイルを右クリックし、メニューの「埋め込み」を開きます。

スクリーンショット 2015-07-14 12.28.16

HTMLコードを生成、というページで、生成ボタンをクリックします。

スクリーンショット 2015-07-14 12.34.59

ブルーに選択されているコードを、ctrl+Cでコピーします。コピーしたものは、取りあえずメモ帳などに張り付けて保存しておくと便利です。

スクリーンショット 2015-07-14 18.16.33

ここでは、メモ帳の表示を「右端で折り返す」で2行表示にしていますが、もともと長い1行の文字列です。ここのwidth heightの数字を変えることで、フレームのサイズを調整できます。

●frameタグを、ブログに書き込む

ブログの編集は、何らかのソフトを使って、直接タグを書き込みませんが、コピーしたタグをブログに書き込むには、HTML編集ページを開いて張り付ける必要があります。下の図は、LiveWriterの場合ですが、下のソースのページを開くと、HTMLタグを直接書き込めます。編集ページに張り付けても、タグにならないので注意してください。

スクリーンショット 2015-07-14 17.47.28

また、編集ページに戻っても、埋め込みは表示されません。ページを投稿した画面で確認してください。

●frameタグの取得

OneDriveのサイトも、完成したものではないので、タグの取得はファイルの種類によって異なります。

スクリーンショット 2015-07-13 18.57.20

mp4動画の場合は、ファイルではなくクリックして開いたページの上に、</>のマークのメニューがあります。</>は、埋め込みタグを意味しています。

スクリーンショット 2015-07-13 19.00.30

ワードファイルの場合は、OfficeOnlineで開いたページに、右上に設定ボタンがあり、これを開くと</>埋め込みメニューがあります。

●タグが書き込めるブログは

直接frameタグを書き込めるのはブログだけで、facebookやtwitterなどは、ユーザーがタグを書き込むことはできません。ブログを使っている人は、この自由を使わない手はありません。twitterなども、frameタグを生成してくれるので、これをブログに張り付ければ、ブログ内にtwitterページを表示できます。

これは、パワーポイントファイルを埋め込みました。Onedriveに置いたファイルを、埋め込みで共有すれば、見る人がパワーポイントのソフトがなくても見られます。


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
BlogにOneDriveのファイルを埋め込む 花園・パソコン研究会/BIGLOBEウェブリブログ
文字サイズ:       閉じる