とまと あんらいぷ…

エンジニアの活動記録とかつぶやきとか

GitHub

カテゴリ:Google Apps の記事一覧

【GAS】HTML Serviceを使ってGoogleドライブにファイルをアップロードする

Class UiAppが非推奨になってしまった


【GAS】Google Apps SrriptでGoogle ドライブにファイルをアップロードする」で
Googleドライブにファイルをアップロードする記事を書きました。

この記事の中で、htmlの出力にはClass UiAppを使う実装を紹介していましたが
どうやら2014年12月に非推奨になってしまい、ビルドが通らなくなってしまったようです。

UiApp https://developers.google.com/apps-script/reference/ui/ui-app
非推奨というか、もう動かない。

確かに、独特のhtml出力メソッドを利用するやり方は馴染みにくいし
分からなくもない。
仕方がないので新しく推奨されているHTML Serviceで書きなおしてみました。
実装の方法もガラっと変えているので、既存の実装をコンバートしたわけではないことにご注意下さい。 続きを読む

初めてのGoogle Apps Script入門(GAS)- 概念の習得

Google App Script(通称GAS)の作成時
How To が書かれているサイトはそれなりにあるけど

WEBアプリとしての考え方や概念がスッキリ入ってくるサイトがなかなか無いので
まとめておきます。

あくまでもイメージの概念の説明であるため
実際のアーキテクトとは異なる部分もあることをご容赦下さい。

まずはScriptファイルを作成可能にする


Googleドライブに移動して、スクリプトの作成ができますが、
その前に新規作成の準備をしなければいけません。
20140413_01_gas

作成ボタンを押して「アプリを追加」を選択します。

20140413_02_gas

「ドライブにアプリを追加」画面で By Google を選択し、「Google Apps Script」を選んで
Google Apps Script を作成できるようにします。

20140413_03_gas

追加し終わったら、「スクリプト」を選びます。

20140413_04_gas

初期ウィザードが出てくるので「空のプロジェクト」を選んでウィザードを閉じます。

20140413_05_gas

はい、これで空のソースコードファイルが作成され、アプリケーション作成準備完了です。
最初に「function myFunction()」っていうメソッドが用意されていますが、いらないので消します。

次に、Google Apps Script で必須のイベントや概念を説明します。

doGetイベント


Google Apps Scriptという名の通り
GASでは、WEBアプリケーション(Application)を使うという概念で成り立ってます。

doGet()は、一番最初にユーザーインターフェースを持つ
アプリケーションにアクセスする時
つまり、WEBサイトへの最初のアクセス時に発生するイベントです。

このイベント内でUIを作成し、return することで
ブラウザ(ユーザーインターフェース)へオブジェクトを返すという処理を行います。

オブジェクトというのは UiInstanceというオブジェクトであり
GAS内では UiApp.createApplication() メソッドで作成します。

・最初にdoGet()が発生するので
 UiApp.createApplication() メソッドでアプリケーションを作る。

最初のアクセス

doGet()

UiApp.createApplication()でアプリケーションを作成する。
続きを読む

テーマ:プログラミング - ジャンル:コンピュータ

【GAS】Google Apps SrriptでGoogle ドライブにファイルをアップロードする

Google Drive(ドライブ)にファイルをアップロードするアップローダーを作ってみた


Google Apps Script、通称 GAS のポテンシャルが高いと言われてる。
実際に使ってみると確かに洗礼された設計が行われてる。

それでもなかなか浸透していない理由は
プログラミングに関して独自の解釈が必要で、
デザインやScriptの作成概念を理解しないとなかなかとっつきにくい。

というわけで練習がてら
Googleドライブへのファイルアップロードをコードで実装してみた。

これまでも未知の言語、例えばPHPを初めて触るときなんかは
アップローダーを実装してきた理由は
アップローダーを作る場合、クライアント側からサーバー側へファイルを送る動作
サーバー側からクライアント側へ結果を返す動作をイヤでも作りこまないとダメだから
理解が深まりやすいと思ってるからです。

というわけでGO

createFileUploadメソッド


クライアント側の実装はなんといってもファイルアップロード
HTMLとしては
<input type = “file”>
を出力しなければいけないので
{Uiインスタンス}.createFileUpload()を使います。
そしてcreateSubmitButton()で、<input type="submit" value="アップロード">を作ります。
そしてこの2つをhtmlでいうところのformとして扱います。

Google Apps Scriptを利用する上で絶対に理解しないといけないのが
{Uiインスタンス}で、このオブジェクトを利用することで、htmlの出力を指示していくわけですが
これはまたの機会に・・・

DriveAppクラス


サーバー側の処理としては、Googleドライブを操作するために
DriveAppクラスのメンバを操作します。
今回はGoogleドライブの特定のフォルダにファイルをアップしたかったので

DriveApp.getFolderById('XXXXX');

でフォルダを取得し、createFile()メソッドでクライアントから引き渡されたファイルを
フォルダの中に作っています。

doPost(e)メソッド


クライアント側からサーバー側にポストされた時、
doPost(e)が実行されます。この辺の仕組みや概念の学習が必要で
Google Apps Srriptを利用する場合必須の知識となります。

今回はeに格納されているアップロードされたファイルを取り出し
Googleドライブにファイル作成を行っています。

アップローダーのソースコード


できあがったコードはこんな感じ


GAS (共有の都合でみえないかも)
GASアップローダー
実行画面はこんな感じ。

実行画面

ファイルを選んで、アップロードをクリック
アップロード完了

Googleドライブにファイルが保存できた。
ドライブ

ちなみに選択ファイルが0byteの場合、Googleドライブ側ではファイルが選択されていないのと
同じ扱いになるので注意です。 続きを読む

テーマ:プログラミング - ジャンル:コンピュータ

【GAS】Google Apps Srript タイトル(title)タグの設定方法

ウェブアプリケーションとして導入した時のタイトルタグ設定方法


Google Apps Srriptをウェブアプリケーションとして導入する時、
必然的にhtmlテンプレートを作成し、HtmlService.createTemplateFromFile()メソッド呼び出しによって
ページを作成することになります。

サイト全体の作りとしてはこんな感じ。
html

コード.gs


タイトル(title)タグにURLが・・・


ところが、html側にtitleタグを埋め込んでも反映されません。
理由はサーバー側のパーサ処理で、htmlタグの生成が行われ、別のtitleタグが
追加されるからです。

結果としてブラウザのタイトル部分や、タブブラウザだとタブ部分に
URLが表示されたままとなります。
20140129_nontitle.png
続きを読む

テーマ:プログラミング - ジャンル:コンピュータ

Google Apps Script(スクリプト)内からSpreadSheetを参照する方法(初級)

スプレッドシートを読み込んでデータベースっぽく使う



前提として、Webアプリケーションとして導入しています。
実行権限は、ウェブアプリケーションにアクセスしているユーザーです。

やっている事は単純で、スプレッドシートの内容を取得してクライアントに返しているだけ。

具体的には
スクリプトと、スプレッドを用意して・・・
20131114_spreadlist.gif

スプレッドにデータつくりーの。
20131114_spread.gif

コードつくりーの。





ブラウザで確認すると。
20131114_spreadreadweb.gif

htmlのformに「1」と入力してサーバーサイドでコードを実行すると、
スプレッドを読み込んで、1列目と同じ値を探して、該当する2列目の値を返すというもの。

実行アカウントについての注意点



実行時に注意することは
編集権限がないとスクリプトが実行できないので注意。
まとめると

◆ログオンアカウントによるscriptの実行
⇒閲覧権限は不可 実行には、編集権限が必要

◆ログオンカウントによるscript内で、SpreadSheetの参照
⇒閲覧権限のみ付与すればOK

スプレッドは、参照権限がないと、スクリプト内でエラーが出ます。
見れないって・・・

コード解説


SpreadsheetApp.openById(スプレッドのID) が殆どキモです。

ブラウザでスプレッドを開いて、URLの部分のkey=から始まって&の一つ前までの部分がIDになります。

20131114_uri.gif

スプレッドを取ってきたら次はシート。
シート名は名前で取得できます。

スプレッドを扱うメソッド群は
Google 先生が公開してくれている
Spreadsheet Service クラスを参照下さい。

色々できるそうです。

とりあえず、Google Appsとはなんぞやという慣れのために
エントリを書いてるので、もう少し凝ったことができれば連携していきたいと思います。

今回はこのへんで。


Google Apps でlocation.hrefが効かない

The property 'href' has no setter.


エントリの通りだけど、Google Appsの出力htmlに

 location.href = "URL";

って書いても全く機能しない。

コードは以下のような感じで、単純にhtmlで
location.href = "URL"; のあるコードを書いて
gsファイルの方で出力しているだけ。

htmlファイル


gsファイル


うーん・・・なんで動かないんだ。
Chromeでデバッグしてみたところ、以下の様なエラーが・・・・

Google Apps

The property 'href' has no setter.

だって・・・

Google Appsの使用上、コーディングしたhtmlはAppsの中にフレーム展開されるんだけど
その中で、location.hrefのセッターが隠蔽されてるのかな。
静的リンクはちゃんと動くし。

ここに書いてあるように

stackoverflow

document.location.href; もダメだし

window.event.returnValue = false;
と書いたら、こちらもエラーになる。

困った・・・

続きを読む

テーマ:プログラミング - ジャンル:コンピュータ

FC2Ad