はじめに
この記事は LIFULLその3 Advent Calendar 2019 の5日目の記事です。
が、この記事を書こう！と思ったのが12/20だったので、だいぶ遅くなりましたがご容赦を
Qiita投稿2回目！
今回も、前回同様GoogleAppsScript(GAS)について書きます。
Googleサイトについて
タイトルにも書いています「Googleサイト」ですが、
このツールを用いることで、サイトの知識もサーバーも必要がないため、
直感的な操作方法さえ覚えれば、そこそこの出来のサイトが誰でも作れます。
GoogleAppsということもあり、サイトの中にGoogleGroupsの一部投稿を埋め込んだりと、
ちょっとしたパーツを埋め込むこともできるのですが、
こだわりを持って改造しようと思っても、デザイン上や機能面での制約があり、
なかなか思うようにいかないのです。
GoogleAppsScriptはサイトも作れる！
活用している人は少ないと思いますが、
GASは、GoogleAppsを操作するだけでなく、サイトも作れちゃうんです。
二番煎じ~~＆手順を全て書くのが面倒~~なので、
その辺は他の記事（最下部に用意した「参考」参照）を参考にしてみてください。
ちなみに、APIなんかも作れるんですが、割愛します。
Googleサイトの中にGASで作ったパーツを埋め込む
GASでサイトが作れるっていうのを見た時点でピンと来たと思いますが、
GASで出来上がったパーツをGoogleサイトの中に組み込むことで、
Googleサイトでの手軽さとGASパーツの＋α機能を足し合わせることで、
痒いところに手が届くけど、更新が楽なサイトが出来上がるわけです。
実例：検索フォームを作る
今回、GoogleドライブもしくはConfluenceどちらかを対象に、
フリーワード検索（別窓で検索結果を表示させます）ができるパーツを作ります。
用意するのは以下の３ファイルです。
※htmlファイルは「ファイル」>「新規作成（もしくはNew）」>「HTMLファイル」から作成する必要があります。
※見た目にもこだわりたい方は、別途CSS用のhtmlファイルを用意してjavascript同様に埋め込むか、
直接index.htmlファイル内にスタイルを書き込んでください。
function doGet() {
var template = HtmlService.createTemplateFromFile('index.html');
return template.evaluate();
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<form onsubmit="return false;" id="myForm">
<input type="radio" name="target" value="confluence">コンフル(個人スペース除く)
<input type="radio" name="target" value="google_drive">Googleドライブ
<input type="text" name="search">
<input type="submit" value="検索する">
</form>
<?!= HtmlService.createHtmlOutputFromFile('javascript').getContent(); ?>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
// ロード完了後の処理
$(function() {
// submit時のイベント登録
$('#myForm').on('submit', function(e) {
var searchTxt = $('#myForm [name=search]').val();
var target = $('#myForm [name=target]:checked').val();
var url = '';
switch(target){
case 'google_drive':
url = 'https://drive.google.com/drive/search?q=' + searchTxt;
break;
case 'confluence':
url = 'https://jira.next-group.jp/wiki/dosearchsite.action?cql=siteSearch+~+%22'
+ searchTxt
+ '%22+and+space.type+%3D+%22global%22&queryString='
+ searchTxt
;
break;
}
if (url) {
window.open(url);
}
});
});
</script>
上記のファイルを作ったら、「公開」>「ウェブアプリケーションとして公開...」でデプロイします。
URLが生成されるので、それをコピーしてブラウザ表示します。
すると、
こんな感じのアウトプットが出来上がるはずです。
後は、Googleサイトの管理画面上から「埋め込む」を選ぶと、URLを入力する欄が出てくるので、
ここで先ほどゲットしたURLを貼り付けます。
プレビュー画面内がつぶれててほとんど見えないですが、
こんな感じで指定します。埋め込んだ後にプレビューモードにしたものが下記です。
最後に
いかがでしたでしょうか。
上記のサンプルコードは、実際に社内用サイトで取り入れているものを簡素化したものです。
他にもGoogleAppsで作成したものをGASで読み込んで見せ方などをカスタマイズさせることもできるので、
色々と幅が広がります。
サーバーを用意することなく、見た目にこだわった自分のサイトなんかも作れますので、
ちょっとしたHTML/CSSの勉強にもオススメです