スプレッドシートに連携させてGASを作成する場合の方法です。 スプレッドシートを開き、メニューの「ツール」->「スクリプトエディタ」を選択します するとスクリプトエディタが開きます。
スプレッドシートに連携させてGASを作成する場合の方法です。 スプレッドシートを開き、メニューの「ツール」->「スクリプトエディタ」を選択します するとスクリプトエディタが開きます。
目的 まずはデータを入力したスプレッドシートを用意します。 今回はフォームに上記の内容を表示しようと思います。 次にHTMLを用意します。 このHTMLにJavaScriptのfetch()を使って、非同期でGASのAPIを呼び出し、データを更新します。 更新はスプレッドシートのヘッダー(1列目)とHTMLの要素のname属性で紐づけています。 結論 では結論です。 まずはGASで作成するWebAPIに使用するコードはこちらです。 //ここは各自変更してください。 const SPREAD_SHEET_ID = 'スプレッドシートのID'; const SHEET_NAME = 'シート名'; //GETリクエスト時に呼び出される関数 function doGet(e) { //スプレッドシートをIDで取得 const app = SpreadsheetApp.openById(SPREA
Googleスプレッドシートに書いた内容をtableで実装するjQueryプラグインのご紹介です。データを手軽にWebサイトに表示出来るのは楽でいいですね。 Googleスプレッドシートをtableで表示するスクリプトです。以前にも似たスクリプトをご紹介しているので選択肢の一つとして。 空のtableにスプレッドシートに書かれた内容が挿入されています。 var mySpreadsheet = 'https://docs.google.com/spreadsheet/foo?key=bar#gid=0'; 読み込みたいスプレッドシートを指定します。 $('#hoge').sheetrock({ url: mySpreadsheet }); tableをセレクタに設定してスプレッドシートを読み込みます。 <table id="hoge"></table> tableを用意すればOK。 手軽で良
背景 こんなサイトを作りました https://meatup.love/ 🍖 どうやっていい感じにデータを取得してきたのか気になる、という方がいたので、ここに書いてみます！ 概要 Google SpreadSheet のデータを JSON 形式で取得する Web API をサクッと作る ほとんどは上記の記事の内容です。 ただこの記事では、「GoogleスプレッドシートをAPIサーバー化し」てフロントでデータを受け取るところまで記載します。 この記事に書いてあること こんなデータが こんなデータ形式に変換され [ { "title": "1973年のピンボール", "review": "ウイスキー飲みたくなる", "rate": 4 }, { "title": "風の歌を聴け", "review": "忘れた", "rate": 3 }, { "title": "ノルウェイの森", "re
近年ではウェブに対する要求が肥大化しており、それに対応してHTMLも複雑化してきています。しかし、もともとHTMLはウェブアプリを記述するための言語ではありません。大規模なウェブアプリを作成するとなると、様々な点で不都合が出てきてしまいます。特に、まとまった部品をコンポーネント化して扱う機能に欠けていました。このことが私たちを悩ませ、今まで多くの苦労を引き起こしていました。 でも、もう悩まなくてもよくなるかもしれません。HTMLをコンポーネント化する規格が生まれました。それがWeb Componentsです。 Web ComponentsとShadow DOM Web Componentsは次の4つの部分からなる規格です。 Templates Shadow DOM Custom Elements HTML Imports 今回は、このうちのShadow DOMに焦点を当てていきたいと思いま
addEventListener()とは？ それでは、まず最初に基本的な前提知識から学習を始めていきましょう！ 「addEventListener()」は、JavaScriptからさまざまなイベント処理を実行することができるメソッドになります。 では、ここで言う「イベント処理」とはどのようなことを指すのでしょうか？Webサイトを構成するページ内では、以下のようにさまざまなイベントが発生するのです。 これらの状態を監視しながら、自分が想定したイベントが発生した時に「addEventListener()」を利用して処理を行うわけです。本記事では、基本的な使い方からさまざまなイベント処理の実行方法を解説するので、ぜひ参考にして見てください！ 「addEventListener()」の使い方 この章では、基本的な使い方から実際にプログラムするための手法について見ていきましょう！一般的な構文からさま
十三章第一回 XMLHTTPRequestこのページの最終更新日：2019年7月1日 今回は、かなりよく使われる技術のひとつであるXMLHTTPRequestを紹介します。 略してXHRと呼ばれることもあるこの技術は何かというと、JavaScriptでHTTP通信を行うためのAPIです。Ajaxという言葉はもはや死語かもしれませんが、その根幹をなす技術です。 HTTP通信がどういうものかご存知でしょうか。ブラウザでインターネットを閲覧する場合はHTTP通信により行われます。HTTP通信は、基本的にはページを見たい側（クライアント）がウェブサイト（サーバー）に対してリクエストを送り、それに対してサーバーからページの内容（レスポンス）が帰ってくるというものです。このようなHTTP通信をJavaScriptから行うことができるのです。 リクエストを送るJavaScriptからHTTPリクエストを
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
ブラウザでWebGLが使えるようになって3DCGプログラミングはずいぶん身近なものになりました。と書いてるそばから違和感を感じるくらい生のWebGLをJavaScriptで書くのは敷居が高かったりします。できなくはないけど前提となる知識がかなり必要な感じ。 three.jsが登場したときは、これで普通に3DCGができるということで一気にひろまりました。とはいえ、それでもまだやることは多く、画面に四角い箱を表示する場合以下のようなプログラムを書くことになります。 ・シーンを作成 ・ライトを作成、位置と向きを設定、シーンに追加 ・カメラを作成、位置と向きを設定、シーンに追加 ・マテリアルを作成、色を指定 ・BoxGeometryを作成、サイズを指定 ・メッシュを作成、位置と向きを設定、シーンに追加 ・レンダラーを作成 ・レンダリングループ処理 これらのひとつでも間違えたりパラメーターが適切でな
おはようございますの人もいれば、こんにちはの人もいて、こんばんはの人もいれば、スラマッパギの人もいますね。ということで本日はどうも、まとめてスラマッパギ。 えーと、今日はちょっとした発表があります。といっても本当にちょっとしたものなので、ちょっとだけ耳を傾けてお聞きください。ええ、JavaScriptの代入についてです。そう、値渡しだの参照渡しだの猫ダマシだの「村長だ、ワシ」だの、そんな話です。 ということで、ちょっとこれから始めようかなと、ちょっと思います。 さっそくだが、見よ！この値渡しを！ var a, b; a = ["hoge", "fuga"]; b = a; // 値渡し b; // => ["hoge", "fuga"] b[0] = "hogera"; b; // => ["hogera", "fuga"] a; // => ["hogera", "fuga"] 値渡し！
このページの最終更新日：2019年7月4日 JavaScript。主にWebページを作るのに使われるほか、現在ではさまざまなところで活躍しているプログラミング言語です。 このページはJavaScriptの中級講座です。最新鋭ではないかもしれませんが、読み進めれば大抵のものを自分で作れるようになることでしょう。 言い訳とJavaScriptの歴史 / 問い合わせ 最近の更新2017/10/05 全ページを手直ししました。十六章第六回を追加。2017/11/9 十六章第二十一回・十六章第二十二回を追加。2017/12/2 十七章第三回・十七章第四回を追加。2017/12/3 十七章第五回・十七章第六回・十七章第七回を追加。概要コンテンツは第一篇と第二篇に分かれています。 JavaScriptは昔からWebページに動きを与えるものとして用いられてきましたが、第一篇ではそのような、昔からあるJav
第7回Node.jsアプリケーションをWindow Azureで動かす 高橋俊光 2012-11-27
Learn typed code through a programming game. Learn Python, JavaScript, and HTML as you solve puzzles and learn to make your own coding games and websites.
2013-09-28 【ボイド】JavaScriptとHTML5で『群れ』をシミュレーションしてみよう【プログラミング】 適当プログラミング解説シリーズ やり方 はじめに。 ボイドを知っていますか？ボイド(Boids)はCraig Raynoldsによって発表された人工生命シミュレーションプログラムです。Boidsとはによると、以下のように記述されています。 Boid（ボイド）とは、1987年にCraig Raynoldsによって発表された理論です。 この理論は、３つのルールを規定するだけで鳥の群れをシミュレーションできるというものです。 ちなみにBoidという名の由来は、鳥もどきという意味の言葉birdoid（バードイド）が短くなりこのように呼ばれるようになりました。 シンプルな3つのルールで生きているかのような群れができるのでとても興味深く、魅力的なゲームです。 ボイドを応用して作られ
https://github.com/mixi-inc/JavaScriptTraining と http://alpha.mixi.co.jp/2013/11844/ とセットでご覧ください。
DOM操作の最適化によるJavaScriptチューニング（前編） | HTML5Experts.jp はてなブックマーク - DOM操作の最適化によるJavaScriptチューニング（前編） | HTML5Experts.jp はてなブックマークで『後でツッコミする』と書いたとおり、ちょっとツッコミたいと思う。 ツッコミ記事のつもりが、自分がツッコミされることとなり、ダメダメな記事です。それでも良ければお読み下さいｗ // サンプル1: パフォーマンスが悪い var ul = document.querySelector('#output'); for ( var i = 0; i < data.length; i++ ) { ul.innerHTML += ‘<li>’ + data[i] + ‘</li>’; } 上記コードはダメなコードであり、理由は、 li要素をループが回るたびに追
連載「Webサイト・アプリ高速化テクニック徹底解説」の第4回は、JavaScriptのチューニングのうち、ボトルネックになりやすいDOM操作の最適化について解説します。前編・後編にわたって、DOM操作が遅くなる原因と仕組み、その解決策について詳しく解説します。 CodeIQとの連動企画！ この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。もう既に自信がある方は腕試しに、もしくは理解度チェックのための復習として是非ご活用ください！こちらから問題にチャレンジ！ DOM（Document Object Model）とは、HTMLをアプリケーション（ここではJavaScript）から利用するためのAPIです。JavaScriptによるユーザーインターフェースの構築やレスポンスの表示など、インタラクティブな部分はほとんどがDOM操作によるも
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
