LANG SELRCT

コードを書く場所についてはこちら

2017年11月4日土曜日

Webアプリのiframeの中にGoogle Driveのファイルを表示する(編集可能)





HTML Serviceで作ったWebアプリケーションの中に
Google Driveのファイルを読み込みたくて試した方法です

今回の方法では編集もできますが表示するだけの場合は
↓こちらの記事に別の方法を書きました
Webアプリのiframeの中にGoogle Driveのファイルを表示する


Webアプリを作る方法はこちらにまとめました





コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}
意訳
この処理は以下を実行する
indexという名のHTMLファイルを返す




index.html
<!DOCTYPE html>
<html>
<head>
  <style>
    .iframe_doc {
      width: 800px;
      height: 1300px;
    }
  </style>
</head>
<body>
  <iframe class="iframe_doc" src="https://docs.google.com/document/d/FILE_ID/edit">
</iframe>
</body>
</html>
意訳
HTMLファイルであることを宣言する
htmlタグを作成
headタグを作成
styleタグを作成
iframe_docの
withを設定
heightを設定

styleタグを閉じる
headタグを閉じる
bodyタグを作成
iframeタグを作成し読み込むファイルを指定する
iframeタグを閉じる
bodyタグを閉じる
htmlタグを閉じる


Spreadsheetの場合
    <iframe class="iframe_doc" src="https://docs.google.com/spreadsheets/d/ID/edit#gid=0">


Slideの場合
<iframe class="iframe_doc" src="https://docs.google.com/presentation/d/ID/edit">



参考サイト
https://developers.google.com/apps-script/guides/html/