You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
はじめに 「GASでQRコードを使った同人頒布会向け予約システムを作った話」の続きです。 半年ほど前、日本最大級のアナログゲーム頒布会である「ゲームマーケット2018春」で、上記の予約システムを実際に運用してみたところ、 (こちらからの声かけ後を含め)QRコードを提示してくれたのは6割弱 0.5割くらいの人がガラケーないしキャリアメールのため、QRコード自体を受信できていない という問題にぶち当たりました。 QR コードが提示されなかった場合、スマホの Google スプレッドシートアプリから予約番号 or 名前を検索していましたが、いまいち操作性がよろしくない1。 というわけで、いっそスプレッドシートを外部 API 化して、スマホアプリから予約情報の検索&購入確定できるようにして、なんならアプリに QR コード読み取り機能も埋め込んじゃおう、というのが今回の趣旨です。 PWA (Prog
Send feedback V8 Runtime Overview Stay organized with collections Save and categorize content based on your preferences. In Apps Script and JavaScript, a runtime or runtime environment contains the JavaScript engine that parses and executes script code. The runtime provides rules for how memory is accessed, how the program can interact with the computer's operating system, and what program syntax
最も簡単にデータを更新する方法 Webシステムでデータを更新する方法としては、管理画面にログインして、リスト上にデータが並んでおり、「編集」ボタンをクリックすると、フォームが並んだ編集画面に遷移して、そこでデータを更新したあと、「更新」ボタンを押して完了、というのが定番であろう。 しかし、筆者が考える一般の方が最も簡単にデータを更新出来る方法、それはエクセル状のシートの更新だと考えている。 住所を持ったデータがあって、それらを Google マップ上にピンを置いて参照できるようにしたい。その上、それらのデータを随時編集したり、新しいデータを追加したい、という要件があって、まず浮かんだのは Google マイマップでした。しかし、Google マイマップの場合、Google スプレッドシートから簡単に Google マップにデータをインポートはできるのですが、スプレッドシートと Google
maps-journey-replayは座標とタイムスタンプのデータをJSONで渡すとGoogleマップ上に経路をアニメーション表示してくれるスクリプトです。説明下手なせいでピンとこないかもなので動作サンプル見て頂いた方が早いですね。以下のようなJSONデータを渡す事で実装できるのだそう。 [ { "lat": 53.94632335995299, "lng": -1.3704424708440581, "timestamp": 1486291045000 }, { "lat": 53.94624075051081, "lng": -1.3701714873316115, "timestamp": 1486291052000 }, ..... ] マラソン大会の経路説明とか店舗やオフィスまでの道順案内とか旅行サービスとか他にもいろいろ使えそうですね。ただし、このままだとユーザーの意思と関係
function doGet(request) { var template = 'index'; return HtmlService.createTemplateFromFile(template).evaluate(); } <!DOCTYPE html> <html> <head> <base target="_top"> <meta charset="utf-8"> <style> p { color: #4aac00; } </style> <!-- vue.js --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="vm"> <p>{{ message }}</p> </div> <script> var vm = new Vue({ el: "#vm", da
morishitaです。 Cloud Functions と並ぶ(?)Google のサーバレスな JavaScript 実行環境といえば Google Apps Scripts(GAS)です。 GAS ってあの Excel で言う VB スクリプト環境のようなものでしょう? と思ったあなた! このエントリでその認識が変わると思います。 以前は使いやすいとは言い難かったGASですが、最近は使いやすくなってきました。 といっても、GAS 自体がアップデートされたのではなく周辺ツールが整備が進み開発・運用しやすい状況が整ってきたからです。 そして、なんと最近Typescript でとても実装しやすくなったので、それをご紹介したいと思います。 google/clasp 以前の GAS は Web エディタ上でしか実装できず、コードを VCS で管理することもままならない状況でしたが、Google
Vue.jsの公式ドキュメント 最初にVue.jsの公式ドキュメントを紹介します。 コチラです。 バッチリ日本語にも翻訳されていて、とても見やすいです。 Vue.jsは学習コストは低いと言われているとはいえ、とても奥は深く、多機能です。 そして、本来はWebエンジニアがメインターゲットとなるフレームワークですから、GASユーザーにとっては遠回りになる情報も多くあります。 なので、最初のうちは、このブログのシリーズなどを参考にしながら進めたほうが良いかも知れません。 何かそれ以上に知りたいことがあるときには、この公式ドキュメントが頼りになると思います。 CDNを使用してVue.jsを導入する Vue.jsのインストールについてお伝えしていきます。 Webエンジニアの皆さんはnpmなどを使うのでしょうけど、GASの場合はCDNが便利です。 CDNとはContent Delivery Netwo
GASユーザーかつHTMLページ・CSS初心者向けにWebページの作り方の基本中の基本を解説していきます。まず、その最初の一歩として、GASで最も簡単なWebページを作成して公開する方法をお伝えします。 面倒なサーバーの準備も不要、しかも無料…。 社内用アプリケーションとかちょっとしたツールを作る上で、どうしても必要になる技術があります。 それは、クライアント側のJavaScriptです。 クライアント側、つまりブラウザで動作するJavaScriptを使いこなすことで、作成したWebページに動きをつけたり、リアルタイムで更新や計算をしたり、さまざまなことが実現できるようになります。 このシリーズでは、はじめてクライアント側JavaScriptを動かすところからスタートし、人気急上昇中のフレームワークVue.jsを使ってWebアプリケーションを作成する方法を紹介していきます。 初回となる今回
こちらの内容は第一回 MAMORIO Meetupで発表した内容をまとめたものです。 背景 弊社ではお弁当が必要な人は前日に注文しておけば、会社が無料で提供してくれる福利厚生があります。(素晴らしいですね ) ちょうど会社の近くに安くて美味しいお弁当屋さんがあり、配達もしてくれるのですが、この注文先のお弁当屋さんは電話かFAXでしか注文を受け付けておらず、誰かが毎日集計して朝お弁当屋さんに注文する必要がありかなり面倒です。 具体的には以下のような作業が毎日必要になります。 集計 呼びかけ: 明日誰がお弁当が必要か聞く リマインド: 集計時に忙しくてすぐ答えてくれない人もいるので未回答の人に対してリマインドする キャンセル: 集計したもののやっぱりキャンセルとなった場合はその分を差し引く 確定&発注: 集計した個数を電話あるいはFaxで発注する この作業を毎日人がやっているようでは、弊社の様
※ GitHub と Slack を利用している人向けの記事になります こんにちは。はてなでアプリケーションエンジニアをしている id:hatz48 です。 社内で使っているちょっとしたツールの紹介と、それを作るのに Google App Script を利用したら楽だったという話をしようと思います。 どんなツールですか github.com はてなでは現在、コードの管理に GitHub/GitHub Enterprise、コミュニケーションツールに Slack を利用しています。 GitHub と Slack を利用していれば、おそらくその二つの連携機能 も利用しているのではないかと思います。連携はとても便利ですが、現状すべての活動を Slack に流すことが出来るわけではありません。出来ないことのうちの一つが「ラベル変更」の通知です。 はてなではいくつかのチームで、ラベルによるレビュー
無料で自動化環境を整備できることで有名な Google Apps Script ですが、以前はブラウザで JavaScript を用いて開発する必要があったため辛い部分もありました(人による)。 現在は公式からローカル開発をするための公式 CLI ツールが提供されているので、静的型付けの恩恵を受けるべく TypeScript を用いて開発できるようにしてみました。 公式の CLI ツール G Suite Developers Blog: Advanced Development Process with Apps Script danthareja/node-google-apps-script: The easiest way to develop Google Apps Script projects インストール自体は Node.js が入っている環境であれば npm install
株式会社Speeeの山本です。皆様、こんにちは! 今回ご紹介させていただくのは、Speeeで実践しているGoogle Apps Script(以下 GAS) を用いたモダンな開発手法についてです。この記事を通してGASって「便利だし使えるかも!」と思っていただければ幸いです。 Google Apps Scriptとは Google Apps Scriptは、言わずと知れたGoogleが提供するサーバサイドのスクリプト環境です。 基本的にはWebブラウザを通して開発を行います。 作業効率化に威力を発揮するGAS Speeeでは特に、管理部門の作業効率化でGASを使用しているケースが多く、例えば Slackの制限付きユーザを各種チャネルに招待するアプリケーション メーリングリストの文面生成を自動化するアプリケーション Speeeラウンジの使用状況を閲覧するアプリケーション など、様々な用途でG
はじめに HTML の script タグ内にインラインで書かれた js をデバッグする方法を共有します 本来であれば外部ファイルとして *.js にすべきですが、ワケあって <script> タグ内に js が書かれている場合に有効です! この方法は script タグに囲まれた js を、 あたかも外部ファイルの js として扱えるようになります やってみよう 例えば、以下のような html があるとします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Qiita</title> </head> <body> <div id="hello">Hello World!</div> <script> document.querySelector('#hello').addEventListene
jQueryではもうアカンと思った時に挙った乗り換え候補はRiot.jsとMithril.js。 どっちもナウいんで一応両方試してみたんだけども、Riot.jsに落ち着いた感じであります。 なんでRiot.jsになったかというと、完全に個人的な好みの問題でして、 すごい大雑把にいうとRiot.jsはHTMLにJSを書くという方針に対してMithril.jsはJSにHTMLを書くという親のReact.jsの流れを汲む文化を継承してるんですが、試しで作ってる時に「HTMLにJS書く方が違和感ない」と思ったからなのでした。 あとはRiot.jsが企業に対してMithril.jsは個人であるといった、開発母体の差もちょっと気になる点でした。 機能面はどちらもミニマムでシンプルでAPI数少なくてとっつきやすいのでそんなに変わらないが、学習コストは独自ルールが多いRiot.jsの方が数段高いと思う。
どうも、まさとらん(@0310lan)です。 今回は、Googleが提供する「Chromeブラウザ」で動作するアプリケーションを作ってみたいと思います。 「なんだか難しそう…」と思うかもしれませんが、ざっくり言ってしまうと普通に「Webページ」を作るのと変わりません。 そこで、簡単なサンプルアプリを作りながら、自分だけのChromeアプリ開発に挑戦してみましょう! ■Chromeアプリとは? 開発を始める前に、まずは予備知識としてChromeアプリの「種類」についてご紹介しておきます。 実は、「Chromeアプリ」と言っても、いくつか異なる種類があります。 例えば、「Appspector」というChromeアプリは、ブラウザの機能を拡張することで、表示されているWebページがどんな技術を利用して作られているのかを表示できるようになります。(https://chrome.google.com
Example Pen Markers A marker is a locator on a map. It’s generally shown as a balloon hanging over the marked location. GMaps offers the addMarker() method to add a marker. It accepts an object literal with the following properties for the marker: lat: Latitude lng: Longitude title: Title displayed on mouseover icon: Custom image for the marker details: Custom object with extra data infoWindow: In
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く