0

Google ドキュメントのコンテンツを取得して、html ページの div 内に表示することは可能ですか? もしそうなら、以下の簡略化された例で「MAGIC」を実装する正しい方法は何ですか?

<html>
    <head>
    </head>
    <body>
       <div>
          <MAGIC>
            Script or link that retrieves and displays the body of a Google Doc.
          </MAGIC>
       </div>
    </body>
</html>

上記で、あなたは仮定することができます

  1. HTML は Google ドライブ ホスティングによって提供されます。
  2. Google ドキュメントへの参照は静的です。
  3. パブリック HTML ページ内からドキュメントを編集する必要はありません (つまり、そのコンテキストでは読み取り専用です)。

Apps Script のドキュメントを読みましたが、Document Service と Content Service を組み合わせることで何かが可能になるようです。たとえば、Document Service には getBody() メソッドと copy() メソッドがありますが、これらの呼び出しによって返されたオブジェクトを HTML として WYSIWYG でレンダリングして、html コンテナーに挿入できるかどうかは明確ではありません。

背景:小さな非営利団体向けに、安全で使いやすい CMS を実装しようとしています。Google ドライブでホストされる Web サイト フレームワークのプロトタイプを作成しました。これまでのところ有望に見えますが、変更するには html を編集できる必要があります。ワープロのような環境でコンテンツを作成できる人は何人かいますが、HTML/CSS/JQuery/AppsScript に対応できるのは私を含め数人だけです。

私が全体の枠組みに専念し、イベントなどの内容を他の人に更新してもらうことができれば、それは大きなメリットです。基本的には、Google Doc を編集してから手動で Web ページをリロードして結果を確認していただければ幸いです。

CMS には多くのアプローチがあることは承知していますが、今のところ、純粋な Google ドキュメント/Google ドライブ ソリューションを検討することに興味があります。

4

2 に答える 2

2

元の質問の「MAGIC」を実装するために、コンテンツ ドキュメントを公開し、Google が提供する iframe 埋め込みコードを含めることにしました。 

<iframe class="cmsframe" src="https://docs.google.com/document/d/1rhkuAB3IIu5Hq0tEtA4E_Qy_-sJMMnb33WBMlAEqlJU/pub?embedded=true"></iframe>

CSS で iframe のサイズを制御できるように、class タグを手動で追加します。

于 2013-08-31T13:24:47.780 に答える
1

urlFetch を使用してドライブ API を呼び出すことで、Google ドキュメントの生の HTML コンテンツを取得できます。

      var id = 'Doc-Very-Long-ID-Here';
      var url = 'https://docs.google.com/feeds/';
      var doc = UrlFetchApp.fetch(url+'download/documents/Export?exportFormat=html&format=html&id='+id,
                                  googleOAuth_('docs',url)).getContentText();

   // the variable doc is the HTML content that you can use

    function googleOAuth_(name,scope) {
      var oAuthConfig = UrlFetchApp.addOAuthService(name);
      oAuthConfig.setRequestTokenUrl("https://www.google.com/accounts/OAuthGetRequestToken?scope="+scope);
      oAuthConfig.setAuthorizationUrl("https://www.google.com/accounts/OAuthAuthorizeToken");
      oAuthConfig.setAccessTokenUrl("https://www.google.com/accounts/OAuthGetAccessToken");
      oAuthConfig.setConsumerKey('anonymous');
      oAuthConfig.setConsumerSecret('anonymous');
      return {oAuthServiceName:name, oAuthUseToken:"always"};
    }

Romain Vialard によるライブラリもあり、これはDocsListExtendedと呼ばれ、優れた拡張機能を多数提供しています。

編集： あなたの編集に続いて：

そのように使用することはできません。webapp use html serviceで HTML コンテンツをレンダリングするには、以下の例に完全なコードと実際の例を示します。

function doGet() {

    var id = '1el3DpTp1sukDjzlKXh8plf0Zj-qm0drI7KbytroVrNU';
    var url = 'https://docs.google.com/feeds/';
    var doc = UrlFetchApp.fetch(url+'download/documents/Export?exportFormat=html&format=html&id='+id, googleOAuth_('docs',url)).getContentText();
    return HtmlService.createHtmlOutput(doc);
}

// the variable doc is the HTML content that you can use

function googleOAuth_(name,scope) {
    var oAuthConfig = UrlFetchApp.addOAuthService(name);
    oAuthConfig.setRequestTokenUrl("https://www.google.com/accounts/OAuthGetRequestToken?scope="+scope);
    oAuthConfig.setAuthorizationUrl("https://www.google.com/accounts/OAuthAuthorizeToken");
    oAuthConfig.setAccessTokenUrl("https://www.google.com/accounts/OAuthGetAccessToken");
    oAuthConfig.setConsumerKey('anonymous');
    oAuthConfig.setConsumerSecret('anonymous');
    return {oAuthServiceName:name, oAuthUseToken:"always"};
}
于 2013-08-30T17:07:40.767 に答える