GoogleAppsScriptでWeb Apps その1(BootStrap)

GAS(GoogleAppsScript)でBootstrapを利用してWebアプリケーションを作成します。

Bootstrapの最新バージョンはv4.1.1です。Bootstrap v3の開発はすでに終了していますので、v4のほうが良さそうですが、まずはBootstrap3.3.7を利用します。あとでv4も試したいと思います。

開発中テスト用のURLをコメントに書くのはいいアイデアですね。真似します(^^)

Google Apps Script (以下GAS) はスプレッドシートの値を読み書きしたり、Gmailやカレンダーと連携したツールを実現することが出来ますが、ブラウザでURLを入力してHTMLを表示するWebアプリケーションを作るこ...

開発中テスト用のURLと展開用のURL(ウェブアプリケーションとして導入のURL) をソースコード冒頭にコメントとしてメモしています。

スプレッドシートに紐づくContainer Bound Scriptを作成

Standalone Scriptにしようかと思いましたが、後々、スプレッドシートと連携することもあるのでスプレッドシートに紐づくGASにしました。Standalone Scriptでもスプレッドシートと連携可能なのですが、ひとつにまとめたいので一緒にしました。まとめたくない場合はStandalone Scriptにしましょう。

コードの書き方はStandalone Scriptにします。

HelloWolrdを作成

helloworld.htmlを作成してウェブアプリケーションとして公開しました。

コート.gsはhtmlテンプレートを読み込み「HtmlOutputオブジェクト」を返す、doGet関数を作成します。このときhtmlテンプレートを切り替えたいので、aというURLパラメータで渡すようにしました。ちなみに「c」と「sid」はGASの制約でURLパラメータまたはPOST本体で使用できません。

↓スクリプトのURLにアクセスすると

スプレッドシートのログシートに出力されました。

作成したGsuiteと異なるドメインの場合は以下の表示です。

Session.getActiveUser().getEmail()はドメインが異なると取得できませんのでログに出力されません。

BootStrap Basic templateを作成

BootStrapの公式サイトを参考にbasictemplate.htmlを作成しました。

Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

ライブラリはCDNから読み込みます。

テンプレートのjqueryは1.12.4ですが、最新の3.3.7にしました。動くかな?

↓スクリプトのURLにアクセスします。

表示されました。

starter-templateを作成

BootStrapの公式サイトを参考にstartertemplate.htmlを作成しました。

starter-template.cssの値はheadタグの中に記述しました。

↓スクリプトのURLにアクセスします。

表示されました。

GoogleAppsScriptのWebアプリケーションでBootstrapが利用できした。

残りのExamplesは次回試してみます。

スポンサーリンク
memordmレクタングル(大)
memordmレクタングル(大)

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
memordmレクタングル(大)