HTML,CSSの基礎を学んだらGoogle Apps Scriptでアウトプットしよう
HTML,CSSの基礎を学んだらGoogle Apps Scriptでアウトプットしよう:
今回はGoogle Apps ScriptのHtmlServiceを使って
HTML,CSS,JavaScriptで構成されるページをブラウザで確認できるようにしました。
自分はwebの仕事に携わるようになって半年未満なのですが
思い返せば去年の今頃からプログラミングの勉強をはじめました。
勉強をはじめた当初からアウトプットが大事だと聞いていていたのですが
きちんとした成果物を作るのは大変だった覚えがあります。
そこで簡単なアウトプット方法の一つとして今回は記事で提案したいと思います。
Gmail, Google Drive, Google スプレッドシートなど
Googleが用意したアプリケーションをJavaScript形式でコードを書くことで制御できるスクリプトです。
Google スプレッドシートを開き
ツール＝＞スクリプトエディタを押すとエディタ画面を開くことができます。
今回用意するファイルは
- コード.gs
- hello.html
- css.html
- js.html
です
.gsファイルはデフォルトで用意されています。
.htmlファイルは
ファイル＝＞新規作成＝＞HTMLファイルから作成できます。
本来ならば
HTML=>hello.html
CSS=>@@.css
Javascript=>@@.js
という拡張子をつけてファイルを保存しますが
google apps scriptでファイルを扱う時は.gs以外は
".html"という形で扱います。
基本的なhtmlを用意します。
.gsファイルには
doGet関数
HtmlService.createTemplateFromFile("").evaluate();
を使うことでブラウザでURLにアクセスすると
htmlファイルを返して表示させることができます。
cssを導入する時は
HTMLのheadタグの中に下記の文章を追記しましょう。
<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
コードがかけたら
公開=>ウェブアプリケーションとして導入
=>導入
するとURLが設定されアクセスすると先ほど作ったページが表示されます！！
ブラウザでアクセスして確認することができました。
デメリット
・コードを改変して更新を反映する時、WEBアプリケーションの導入からバージョンをあげて更新してから確認しないといけないのがめんどくさい
・１プロジェクトから１ページしかできない。
=>これは下記のページを参考にすると解消できそうです。
https://qiita.com/kakkiichan/items/a6a653bbe113a1dee2eb
今回はGoogle Apps ScriptのHtmlServiceを使って
HTML,CSS,JavaScriptで構成されるページをブラウザで確認できるようにしました。
自分はwebの仕事に携わるようになって半年未満なのですが
思い返せば去年の今頃からプログラミングの勉強をはじめました。
勉強をはじめた当初からアウトプットが大事だと聞いていていたのですが
きちんとした成果物を作るのは大変だった覚えがあります。
そこで簡単なアウトプット方法の一つとして今回は記事で提案したいと思います。
Google Apps Scriptとは...
Gmail, Google Drive, Google スプレッドシートなどGoogleが用意したアプリケーションをJavaScript形式でコードを書くことで制御できるスクリプトです。
Google Apps Scriptの使い方
Google スプレッドシートを開きツール＝＞スクリプトエディタを押すとエディタ画面を開くことができます。
今回用意するファイルは
- コード.gs
- hello.html
- css.html
- js.html
です
.gsファイルはデフォルトで用意されています。
.htmlファイルは
ファイル＝＞新規作成＝＞HTMLファイルから作成できます。
本来ならば
HTML=>hello.html
CSS=>@@.css
Javascript=>@@.js
という拡張子をつけてファイルを保存しますが
google apps scriptでファイルを扱う時は.gs以外は
".html"という形で扱います。
ファイルの中身
基本的なhtmlを用意します。hello.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
おはよう
</body>
</html>
doGet関数
HtmlService.createTemplateFromFile("").evaluate();
を使うことでブラウザでURLにアクセスすると
htmlファイルを返して表示させることができます。
コード.gs
function doGet() {
return htmlOutput = HtmlService.createTemplateFromFile("hello").evaluate();
}
css.html
<style> </style>
<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
hello.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= HtmlService.createHtmlOutputFromFile('css').getContent(); ?>
</head>
<body>
おはようこんにちはさようなら
</body>
</html>
アプリとして公開する
コードがかけたら公開=>ウェブアプリケーションとして導入
=>導入
するとURLが設定されアクセスすると先ほど作ったページが表示されます！！
ブラウザでアクセスして確認することができました。
デメリット
・コードを改変して更新を反映する時、WEBアプリケーションの導入からバージョンをあげて更新してから確認しないといけないのがめんどくさい
・１プロジェクトから１ページしかできない。
=>これは下記のページを参考にすると解消できそうです。
https://qiita.com/kakkiichan/items/a6a653bbe113a1dee2eb
コメント
コメントを投稿