Google Apps Script（GAS）を試す
無料で簡単にWebアプリが公開できるGoogle Apps Scriptなるものがあると聞いて試してみました。
Google Apps Script を追加する
まずはGoogleドライブにアクセスします。
新規 > その他 > アプリを追加 を選択し、「script」で検索します。Google Apps Scriptが出てくるので追加し、ファイルを新規作成します。
GASプロジェクトを作成する
新規作成すると、無題のプロジェクトに「コード.gs」が表示されているはずです。 が、メニューのヘルプ > 開始画面 と選択し、左ペイン下部のウェブアプリケーションを選択します。
すると、以下の４ファイルがすでに生成されています。
- コード.gs
- Index.html
- JavaScript.html
- Styleshiit.html
コード.gs がサーバー側処理、それ以外が View になります。 JavaScriptとCSSがhtmlファイルになっているのが気になるかもしれませんが、 GASでは現状このような形でしかJavaScriptとCSSを分離することができません・・・。
プロジェクト名を適当に変えてください。とりあえず「Sample Project」としてみます。
Webアプリケーションを公開する
メニューから 公開 > ウェブアプリケーションとして導入 を選択します。
以下を選択して「導入」ボタンを押しましょう。 承認が必要です、というダイアログが出たら確認して承認してください。
- プロジェクトバージョン： 新規作成
- 次のユーザーとしてアプリケーションを実行： 自分
- アプリケーションにアクセスできるユーザー： 全員（匿名ユーザーを含む）
なんとこれだけでWebアプリケーションが公開できます！ 「現在のウェブアプリケーションのURL」が公開したWebアプリケーションのエンドポイントになります。
ちなみにURLをそのままブラウザにコピー&ペーストすると、自分のGoogleドライブのルート階層のファイル一覧が表示されるはずです。
URLパラメータにfolderIdを指定すると、Googleドライブにある特定のフォルダ直下のファイル一覧が見れるようになります。 folderIdというのは、Googleドライブ内のフォルダにアクセスした時のURL末尾についているランダムな文字列のことです。
例) https ://drive.google.com/drive/folders/XXXXXXX ←このXXXXXXXの部分です。
URLパラメータの指定方法ですが、アプリケーションのURLが「https ://example/hogehoge/」だとすると、以下のように末尾に指定します。
例) https ://example/hogehoge/?folderId=XXXXXXX
簡単にコードの解説
コード.gs 内の doGet 関数がアプリケーションのエンドポイントです。
HtmlService.createTemplateFromFile('Index') で、Index.html からViewを生成して返していますね。
そのあとのif文でリクエストのパラメータをチェックして、folderIdがなければ”root”に設定しています。
function doGet(e) {
var template = HtmlService.createTemplateFromFile('Index');
// Retrieve and process any URL parameters, as necessary.
if (e.parameter.folderId) {
template.folderId = e.parameter.folderId;
} else {
template.folderId = 'root';
}
// Build and return HTML in IFRAME sandbox mode.
return template.evaluate()
.setTitle('Web App Window Title')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
getFolderContents 関数でGoogleドライブにアクセスしています。
DriveApp.getRootFolder()とDriveApp.getFolderById(folderId)で、フォルダの情報をごそっと取得しています。
で、そこからフォルダ名やら子要素を取り出しているわけです。
function getFolderContents(folderId) {
var topFolder;
var contents = {
children: []
};
if (folderId == 'root') {
topFolder = DriveApp.getRootFolder();
} else {
// May throw exception if the folderId is invalid or app
// doesn't have permission to access.
topFolder = DriveApp.getFolderById(folderId);
}
contents.rootName = topFolder.getName() + '/';
var files = topFolder.getFiles();
var numFiles = 0;
while (files.hasNext() && numFiles < 20) {
var file = files.next();
contents.children.push(file.getName());
numFiles++;
}
return contents;
}
この getFolderContents 関数を呼び出しているのが、JavaScript.html 内の無名関数です。
リクエスト失敗時と成功時のコールバックが含まれているのでやや複雑になっていますが、
google.script.run.getFolderContents(folderId)だけでも呼び出すことが可能です。
リクエスト成功時は、updateDisplay 関数でレスポンスから必要な情報を取り出してDOMに挿入しています。
$(function() {
// Call the server here to retrieve any information needed to build the page.
google.script.run
.withSuccessHandler(function(contents) {
// Respond to success conditions here.
updateDisplay(contents);
})
.withFailureHandler(function(msg) {
// Respond to failure conditions here.
$('#main-heading').text(msg);
$('#main-heading').addClass("error");
$('#error-message').show();
})
.getFolderContents(folderId);
});
...
function updateDisplay(contents) {
var headingText = "Displaying contents for " + contents.rootName + " folder:";
$('#main-heading').text(headingText);
for (var i = 0; i < contents.children.length; i++) {
var name = contents.children[i];
$('#results').append('<div>' + name + '</div>');
}
}
まとめ
ざっくりとした説明ですが、とりあえずここまで。いろいろと制限はあると思いますが、無料でこれだけ簡単に個人でWebアプリを公開できるのはすごいことですよね。
HTMLによる View の生成、JavaScriptによるサーバー処理の呼び出しとUIの更新、Googleドライブとの連携と開発に必要なエッセンスが詰まっていると思います。
あとは公式のドキュメントを見ながら修正していくだけで、それなりのものが作れるでしょう。
公式ドキュメント： https://developers.google.com/apps-script/overview
ちなみに、メニューの 公開 > ウェブアプリケーションとして導入 からテスト用のURLも取得できます。 修正をした後はテスト用のURLで確認が可能ですし、もちろん第三者に公開しているURLには修正内容は見えません。
修正が済んで新しいバージョンとして公開したいときは、プロジェクトバージョンから新規作成を選んで「更新」ボタンを押してください。公開用URLに修正が反映されます。
次はこれを元にオリジナルアプリを作る予定。
