(license)みなさん、こんにちは!タカハシ(@ntakahashi0505)です。初心者向けにGASとVue.jsによるWebアプリケーションの作り方についてお伝えしています。ScriptでWebアプリを作成するシリーズ。今回はGASとJavaScriptフレームワークVue.jsを使ってWebアプリを作成するための最初の一歩を進めて行きます。tonari-it.com2018.08.15Vue.jsについてその基礎知識と、GASユーザーがそれを学ぶメリットについてお伝えしました。今回からいよいよ本格的にVue.jsとはなんぞやということについて解説していきます。Vue.jsの公式ドキュメントを参考にしながらGASにVue.jsを導入する方法とその動作確認、そしてVue.jsの超基本を解説していきます。行ってみましょう!目次Vue.jsの公式ドキュメントCDNを使用してVue.jsを導入するはじめてのVue.jsの準備GASでVue.jsの導入とインスタンスの生成をするVue.jsのelオプションとdataオプションについてDOM要素からdataオプションの値を参照するはじめてのVue.jsの表示結果まとめ連載目次:GASユーザーのためのVue.js&Webアプリ作成入門Vue.jsの公式ドキュメント最初にVue.jsの公式ドキュメントを紹介します。日本語にも翻訳されていて、とても見やすいです。Vue.jsは学習コストは低いと言われているとはいえ、とても奥は深く、多機能です。本来はWebエンジニアがメインターゲットとなるフレームワークですから、GASユーザーにとっては遠回りになる情報も多くあります。最初のうちは、このブログのシリーズなどを参考にしながら進めたほうが良いかも知れません。何かそれ以上に知りたいことがあるときには、この公式ドキュメントが頼りになると思います。CDNを使用してVue.jsを導入するVue.jsのインストールについてお伝えしていきます。Webエンジニアの皆さんはnpmなどを使うのでしょうけど、GASの場合はCDNが便利です。Networkの略で世界中に張り巡らされたCDN専用の配信ネットワーク(CDNプラットフォーム)を利用して、Webサイトにアクセスしようとするエンドユーザに最も近い配信拠点から効率的かつ高速にWebを配信する仕組みです。CDNつまり、何らかのコンテンツをネットワーク経由で、なるべく高速に取得するための手法ということですね。以下のリンクにアクセスしてください。Frameworkjp.vuejs.orgそして、以下の部分をコピーしましょう。この一文を、GASプロジェクトの「js.html」の冒頭に記述しますので、だいじにとっておいてください。exampleを用いて、はじめてのVue.jsの動作確認をしてみましょう。editor.jsfiddle.netまず、サーバー側のスクリプトmain.gsに以下doGet関数を仕込んでおきましょう。忘れがちですが、これがあることでURLアクセスを受けてWebページを展開できますからね。htmlOutput;}GASでVue.jsの導入とインスタンスの生成をするでは、js.htmlを見ていきましょう、以下の通りです。Vue.js!'}});</script>1行目は前述のCDNですね。コピーしたものを、そのまま貼り付ければOKです。3行目からnewキーワードを使ってVueインスタンスを生成しています。書式は以下の通りです。Vue(options)この引数optionsはオブジェクト形式で様々なオプションを指定することができます。Vue.jsのelオプションとdataオプションについておそらく、必ず指定するオプションは、以下の2つでしょう。DOMと連携するデータオブジェクト例では、elオプションには「#app」を指定しています。これはid属性が「app」としている要素を生成したVueインスタンスの連携するDOM要素としてね、という意味です。id属性が「app」の要素が、Vue.jsの連携範囲となるわけです。値」という形式でデータを列挙していきます。すると、Vueインスタンスの連携するDOM要素の配下では、そのプロパティを介して、データの連携が可能になります。このようにDOM要素とJavaScriptのデータオブジェクト(dataオプション)とを紐付ける仕組みを「データバインディング」といいます。Vue.js!」という文字列を設定しています。そのデータバインディングしたデータをDOM要素から参照するにはどうしたら良いでしょうか?DOM要素からdataオプションの値を参照するそれを明らかにするために、index.htmlを見てみましょう。?></body></html>まず、8~10行目のdiv要素に注目しましょう。生成したVueインスタンスの適用範囲を表すid要素「app」が付与されていますね。この配下では、Vueインスタンスと連携が可能ということになります。その子要素であるpタグ内に二重波括弧、そしてその中に「message」とありますね。}}」という表現は「Mustache構文」と言います。読み方は「マスタッシュ」です。Mustacheは「口ひげ」という意味です。見えなくもないですね。この二重波括弧、Mustache構文の中にdataオプションで指定したオブジェクトのプロパティを指定すれば、その位置にそのプロパティの値を連携して参照することができます。dataオプションのデータとの連携方法は、このMustache構文を使う方法以外にもありますので、おいおい紹介していきます。Vue.jsの表示結果では、以上の内容でWebページを表示してみましょう。Vue.js!」という文字列が表示されるはずです。これはid属性「app」と新規で生成されたVueインスタンスが連携されているVueオブジェクトのdataオプションのmessageプロパティの値が、連携するDOM要素配下のMustache構文で参照されているという動作によります。まとめ以上、GASにVue.jsを導入する方法とその動作確認、そしてVue.jsの超基本についてお伝えしました。無事にVue.jsは動作しましたでしょうか?今回は最も簡単な例を紹介しましたが、もっと色々な機能があり、様々な連携や操作が可能です。次回以降、少しずつ見ていきましょう。v-bindディレクティブによるデータバインディングですかね。【GAS&Vue.js】v-bindディレクティブを使って属性のデータバインディングをしてみようGASとVue.jsを使ってWebアプリケーションを作成する方法をお伝えしています。今回は、属性のデータバインディングをするv-bindディレクティブの使い方、ディレクティブとは何かについて解説します。ScriptではHTML・CSSを使ってWebページを作成し公開することができます。このシリーズでは、その続きとしてはじめてクライアント側JavaScriptを動かすところからスタートし、人気急上昇中のフレームワークVue.jsを使ってWebアプリケーションを作成する方法をお伝えしていきます。プランノーツ代表、コミュニティ「ノンプロ研」主宰。ITで日本の『働く』の価値を上げる!」をテーマに、VBA&GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ★フォロー頂ければ嬉しいです。「コミュニティ+講座」形式で継続性&教え合える環境も提供。!ノンプログラマーがプログラミングスキルを身に着ける支援ををするコミュニティ。セミナー・もくもく会・Facebookグループのサポートで「自らで学び続ける力をつける」支援、「教え合うことで学びの価値を上げる」場の提供をしています。Scriptでチャットワークからのメッセージを取得する方法チャットワークで「おみくじチャット」を作るというのを目標にチャットワークAPIの使い方を勉強していきます。Scriptで取得するところまでです。Script【GASユーザーのためのHTML入門】好きな要素にだけCSSでスタイルを適用するGASユーザーのためのHTML講座ということで、簡単なWebページの作り方を解説しています。今回はGASのWebページにid属性、class属性を使ってCSSのスタイルを好きな要素にだけ適用する方法です。Script」を中心に学びをレポートをしていきます。Scriptでクラスを作ろう!」をテーマとしたシリーズをお送りしています。今回はGASでdefinePropertiesメソッドを使ってプロパティを定義する方法です。Scriptのトリガー設定は毎日実行する場合は、午前8時~9時のように1時間の幅があります。時間を細かく指定するには、2018年2月16日08:30のように日にちも設定する必要があります。この二つを使用して、毎日指定した時間にスクリプトを実行させるトリガーを設定します。ScriptGASでWebページを作るときにページのタイトルを設定する方法GASユーザーのためのHTML入門ということで、簡単なWebページの作り方を紹介しています。今回は、GASでWebページを作るときにページのタイトルを設定するsetTitleメソッドの使い方です。「コミュニティ+講座」形式で継続性&教え合える環境も提供。詳細・お申込はこちら隣ITを応援する当ブログを「応援したい!」「役に立ったよ!」というお気持ちを、コチラからお支払いただくことができます。日々更新の活力倍増いたします。※PayPalアカウントが必要です。※金額は変更可能です。Platform23HTML・CSS32iPhone・アプリ29Monaca・スマホアプリ開発7PC全般・Windows86PowerPoint・VBA28Python87RPA1VBScript15Vue.js・JavaScript13WEBサービス・クラウド68WordPress・ブログ88Word・VBA42コミュニティ・イベント109セミナーのお知らせ11チャットワーク72データ分析・アクセス解析40仕事・生産性・働き方73動画配信8商業出版21起業・フリーランス72電子書籍・Kindle3運営会社プランノーツは"IT×働き方改革"をお手伝いする会社です。「コミュニティ+講座」形式で継続性&教え合える環境も提供。詳細・お申込はこちら隣ITを応援する当ブログを「応援したい!」「役に立ったよ!」というお気持ちを、コチラからお支払いただくことができます。日々更新の活力倍増いたします。※PayPalアカウントが必要です。※金額は変更可能です。Platform23HTML・CSS32iPhone・アプリ29Monaca・スマホアプリ開発7PC全般・Windows86PowerPoint・VBA28Python87RPA1VBScript15Vue.js・JavaScript13WEBサービス・クラウド68WordPress・ブログ88Word・VBA42コミュニティ・イベント109セミナーのお知らせ11チャットワーク72データ分析・アクセス解析40仕事・生産性・働き方73動画配信8商業出版21起業・フリーランス72電子書籍・Kindle3運営会社プランノーツは"IT×働き方改革"をお手伝いする会社です。Scriptが「V8ランタイム」をサポート!モダンなECMAScript構文が使えるようになった2020.02.072020.02.08GASでコピーしたGoogleスライドのプレゼンテーションを取得する方法2020.02.052020.02.05Facebookページいつも隣にitのお仕事タイトルとURLをコピーしました。