Google製のJavaScript教育ツール「Grasshopper」は基礎から学べて初心者に優しい！【どれ使う？プログラミング教育ツール】
GoogleフォームとGASで請求書のPDFを自動生成する - Qiita
はじめに 業務で必ず必要になる請求書。皆さんはどうやって作成していますか？ 最も有名な請求書作成サービスはおそらくMisocaですが、Misocaは弥生に買収されて9月より完全にサービスが有料化し、なかなか便利かつ無料に使えるサービスがなかったりします。 Excelや時にはVBAも使っている会社もありますが、ローカルでの作成は請求書フォームの改定が徹底されなかったり、請求書の作成履歴が管理されなかったりと、不便な点がたくさんあります。 そこで当社では、Googleフォームを使用した請求書作成システムを運用しています。 これにより、 作成履歴が残り、改竄を防止できる フォーム送信時に自動でPDFが生成されてGoogleドライブに保存される ファイル名を請求書番号、請求先名など自由にカスタマイズし、自動で設定できる などを実現することができます。 フロー 図の青色部分はGoogleフォームのサ
Googleマップ ストリートビューでランニングできるウェブアプリを作った
ノートPCやタブレットとかについてるウェブカメラを使って、Googleマップ ストリートビューでランニングできるRunning on StreetViewというウェブアプリを作りました。 Google Maps Street Viewとウェブカメラを使って、ストリートビューを走るウェブアプリを書きました。 走るとストリートビューが進む感じ(雑な判定なので走らなくてもいい)https://t.co/bhYq289QmS 使い方はこちらhttps://t.co/kypr9Oo9JU Google MapのAPIキーは自分で取得する必要があります。 pic.twitter.com/tmD1XNwjSa — azu (@azu_re) May 8, 2020 動画はデバッグ用のモデルに走ってもらっていますが、ウェブカメラで走るなどのアクションに応じてストリートビューを進行できるアプリです。 色々検
【保存版】Google Apps Scriptリファレンス～キーワード別インデックス
◇API ◇Eventオブジェクト ◇Google Apps Script ◇HTTP通信 ◇Web API ◇Webhook ◇インストーラブルトリガー ◇オブジェクト ◇カウント変数 ◇カスタム関数 ◇関数 ◇強制出力スクリプトレットタグ ◇コンテナバインドスクリプト ◇コメント ◇条件式 ◇初期化式 ◇数値型 ◇スクリプトエディタ ◇スクリプトプロパティ ◇ステートメント ◇正規表現 ◇代入 ◇データ型 ◇ドキュメンテーションドキュメント ◇トリガー ◇プロジェクト ◇プロパティストア ◇変数 ◇マクロ記録 ◇文字列型 ◇ライブラリ ◇ラベル ◇リテラル 基本文法＋α ◇function ◇var ◇return ◇typeof フロー制御 ◇break ◇for ◇if ◇if～else ◇try～catch ◇while シンプルトリガー ◇doGet関数 ◇doPost関数 ◇
今すぐWebサイトの多言語対応が簡単にできる・JavaScriptの翻訳ライブラリ「Glottologist.js」を使ってみた！ -
どうも、まさとらん（@0310lan）です！ 今回は、Webサイトやアプリなどを簡単に多言語対応できるJavaScriptライブリをご紹介します！ HTML要素に「属性」を追加するだけで簡単に翻訳できるので、既存のWebサイトなどに適応しやすいという特徴があります。 グローバルなサイト作りにご興味のある方は、ぜひ参考にしてみてください！ 【 Glottologist 】 ■「Glottologist」の使い方 それでは、まず最初に「Glottologist」を使えるようにするための準備から始めましょう！ 必要になるのはライブラリの「JavaScriptファイル」1つです。 npmでインストールする場合は次のとおり！ npm i glottologist --save また、ライブラリを「scriptタグ」で読み込む場合は次のように記述しましょう。 <script src="https://
Node.gs： Node.js スタイルでの Google apps script 開発手法 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Google apps script のオリジナル・オンライン開発環境は、小さなプログラムをちゃちゃっと書いては捨てて動かすのにはとても便利ですが、ある程度大きなソフトウェアを開発・運用するとなるとそのままでは難しくなります。 特に Google apps（今は G-Suite ですね）を利用した業務システムの開発・運用をしている人は、業務システムは継続改善がつきものですし、苦労されているのではないかなあ・・・と思います（私もです！）。 そこで本稿では、Google apps scriptアプリケーションを Node.js のように複数
Google Apps Scriptの開発をモダンに行う方法 - Speee DEVELOPER BLOG
株式会社Speeeの山本です。皆様、こんにちは！ 今回ご紹介させていただくのは、Speeeで実践しているGoogle Apps Script(以下 GAS) を用いたモダンな開発手法についてです。この記事を通してGASって「便利だし使えるかも！」と思っていただければ幸いです。 Google Apps Scriptとは Google Apps Scriptは、言わずと知れたGoogleが提供するサーバサイドのスクリプト環境です。 基本的にはWebブラウザを通して開発を行います。 作業効率化に威力を発揮するGAS Speeeでは特に、管理部門の作業効率化でGASを使用しているケースが多く、例えば Slackの制限付きユーザを各種チャネルに招待するアプリケーション メーリングリストの文面生成を自動化するアプリケーション Speeeラウンジの使用状況を閲覧するアプリケーション など、様々な用途でG
JavaScriptコードを圧縮・最適化・難読化する「Closure Compiler」のJavaScript版をGoogleが公開。Node.jsもしくはWebブラウザ上で実行可能
JavaScriptコードを圧縮・最適化・難読化する「Closure Compiler」のJavaScript版をGoogleが公開。Node.jsもしくはWebブラウザ上で実行可能 JavaScriptのコードを実際のアプリケーションとしてデプロイする場合には、コード内のコメントやタブ、スペース、改行などの余計な要素を削除し、変数名を短くしたりコードの冗長性を排除するといった最適化を行うことで、ロード時間を短縮しコードを高速に実行できるようになります。また、コードの中身を簡単に読めないよう、難読化を行うことも多いでしょう。 こうしたJavaScriptコードの圧縮や最適化、そして難読化を行ってくれる代表的なツールの1つが、Googleがオープンソースで公開しているClosure Compilerです。 Closure Compilerはコードの単純な圧縮や最適化だけでなく、JavaScr
googleサイト上で好き勝手にjavascriptを動かす方法 - Qiita
はじめに googleサイト上で色々見た目をリッチ化したい、というミッションがあり、結構大変だったので 主に未来の自分に向けてメモを残しておきます。 全コード github GASのHTMLServiceを使っても色々できるようですが、Google Caja内での動作につき色々制限有。 あと、HTMLボックスでも行ける感じだったので試してみましたが、jQueryのバージョンが 特定以外だとダメだったり、やはりこちらも色々制限があります。 また、今回はどうしても従来のgoogle site内のコンテンツを拡張するというミッションだったため、 既存のgoogleサイト内にガジェットを配置する方法でjavascriptを走らせました。 できれば新しめの方法でいきたかったのですが、 時間が無い中で安全策を採択しました。 もっと簡単で良い方法があるはずです、だれか教えて下さい。 既存の方法おさらい
Google流 JavaScript におけるクラス定義の実現方法
目次 2019年追記 はじめに クラス実現のために必要な JavaScript の言語仕様 function this call new 演算子 prototype チェーン プロパティ: prototype Google Closure 流のクラスの実現方法の概要 クラスの宣言とコンストラクタの定義 メンバ変数 (インスタンス変数) メソッド定義と呼び出し private, protected 継承 プロトタイプチェーンを利用してメソッドを親クラスから引き継ぐ 親クラスのコンストラクタの呼び出し メソッドオーバーライドと親クラスのメソッドの呼び出し 多重継承 abstract, interface inherits の実際のコード 良くないクラス実現方法 ES6 のクラス 2019年追記 この記事ではclassが導入されたES6以前のJavaScriptでどのようにクラスに相当するものを
[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js
デモ：Googleマップ Googleマップもサポート。 Embed.jsの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.css"/> <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.embed.js"></script> </head> Twitterを埋め込む時には「widgets.js」、コードのシンタックスハイライトには「highlight.min.js」を使用します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.
![[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/c7f1b78c4054290453044ec517a54e1f30348b63/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015041500.png)
今っぽくなった！トレンドをおさえたjQuery プラグインまとめ
作成：2015/04/6 更新：2016/06/29 Web制作 > トレンドとなりつつある視覚効果や、細部にちょっとした動きを取り入れたいときに使えるjQuery プラグインをまとめました。ユーザーが使いやすくなるよう、ページにひと工夫したいときに。少し前のプラグインもありますが、今から使えそうなものもピックアップ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マイクロインタラクション １．粘性 ２．移動するプレースホルダー ３．滑らかにページ移動させる ４．パスワード強度を可視化 ５．オートコンプリート ６．テキスト入力 ７．Google Map（吹き出し・マーカー） ８．オートページャー ９．プログレス12パターン １０．ノーティフィケーション レタリング １１．１文字ごとに指定 フルスクリーン １２．モーダルウィンドウ（全画面） １３．フォーム（全
人気上昇中のJavaScriptライブラリを調べてみた【2015年版】
altJSの人気が混戦で面白い！ 2014年中に人気が急上昇してきており、「2015年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表。 ← 前回 連載 INDEX 次回 → こちらのページで【2016年版】も発表！ ■ 2015年が始まり、心機一転で「今年こそはWeb開発を頑張ろう」と思っている人も少なくないだろう。そんな方々に向けて本稿では、2014年中に人気が急上昇してきており、「2015年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する（※昨年の2014年版はこちら）。 なお、本稿のランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」（「すべての国」「過去 12 か月間」「すべてのカテゴリ」「ウェブ検索」という条件で絞り込み）を使って、ライブラリの人気をジャンルごとに比較した（※ライブラリ名
Google Apps Scriptの開発手法まとめ - Qiita
が良いかなーと思っています。 開発環境編 ざっと感覚値を書くと、 あまり複雑でない、小さめなアプリケーションや、ローカルで開発するメリットがあまり感じられない場合 ScriptEditorで作ったほうが良いです。 どうしてもバージョン管理したい、altJSで開発したい、Container Bound Scriptの開発じゃない Eclipseやその他サードパーティツールなどローカルで開発 初めてならやめておいたほうが良い。 ScriptEditor GASの開発環境は通常はScriptEditorになると思います。 僕もよくGoogleのAPIを利用するスクリプトを書く場合はScriptEditor上で開発します。 ScriptEditorでは各種ショートカットがありますので、手前味噌ですがこの記事を見ておくと良いと思います。 Eclipse 統合開発環境として有名なEclipseでもGA
第1回 Node.jsとは | gihyo.jp
はじめに 本連載では、注目を集めるNode.jsを使って、Webアプリケーションを様々なクラウド環境で動かすことを最終目的にしています。Node.jsに触れたことがないJavaやPHPなど普段サーバサイドで開発されている方を主な対象として、まずNode.jsの概要から紹介していきます。 Node.jsとは Node.jsとは、ブラウザGoogle Chrome用に開発されたJavaScriptエンジンV8がサーバ上でプログラムを実行できるように、ファイルやネットワークI/Oなど多くの機能を追加したものです。軽量で効率よく多くのリクエストを処理するネットワークアプリケーションの構築ができるプラットフォームになっています。いわゆるサーバサイドJavaScriptの代名詞として注目を集めています。 Node.jsでは“軽量で効率良く”というのを実現するために次の2つのモデルを採用しています。
Google Analytics API と JavaScript クライアントを使って人気記事ランキングを作る Web サービスを作ってみた - しばやん雑記
2014 年も終わりなので Google Analytics API を使ってアクセス数の多いページを取得してみた - しばやん雑記 を今年最後にしようと思ったんですが、アクセス数の多い記事の情報を JavaScript と OAuth 2 でも取れるのではないかと思ったので、実際にサービス化してみました。 2023 年の人気記事ランキング生成 使い方は単純で、OAuth 2 でログインしてドロップダウンから取得したい Web プロパティを選択し、生成ボタンをクリックするだけで終わりです。 数秒後には実行結果がはてな記法、HTML、Markdown で出力されるので、適当に再利用してください。 実装の話 Google API を JavaScript から使う場合にはライブラリを読み込みます。API キーにだけ注意。 <script> var apiKey = '公開 API へのアクセス
kuromoji.js使って構文解析した - Qiita
こんにちは、らこです。先日から話題になってるJavaScriptの形態素解析器kuromoji.jsを使って、確率自由文脈文法で構文解析してみました。(注意:アルゴリズムの解説記事 ではない です) 結論 kuromoji.js遊びまくれるのでみんな使おう kuromoji.d.ts書いた 私は型大好き人間なのでTypeScript使ってkuromoji.js使いました。型定義ファイルは自分が使う部分だけエイヤっと自作しました(laco0416/kuromoji.d.ts)。 あと、プロジェクトに↑の自作型定義ファイルを読み込むのにdtsm使いました。tsd使ってたのが馬鹿らしくなるくらい便利です。作者のvvakameさんによるわかりやすい紹介はこちら 確率自由文脈文法とは ちゃんと説明すると長くなりますしうまく説明できる自信もないので、ばっさりカットします。 雰囲気つかむにはここらへんを
チャットで勤怠管理する「みやもとさん」をリリースしました
トレタで使っている、チャットで勤怠管理する「みやもとさん」をオープンソースでリリースしました。 https://github.com/masuidrive/miyamoto Slackの#timesheetsという部屋で、「おはようございます」と書き込みと出勤が記録され、「お疲れまでした」と書き込むことで退勤となります。「明日はお休みさせて頂きます」と書き込むと、休暇の届け出になります。 チャットで勤怠管理する最大のメリットは、オフィスに居なくても誰がいつ出勤・退勤したのか全員が分かることにあります。出退勤管理アプリは色々出ていますが、営業で直行直帰する人や、リモートワーカーなどは、帰った時間がリアルタイムでわかりにくいという欠点があります。 「みやもとさん」では、チャットでやりとりする事でみんなの見える形で出退勤が記録され「あ、帰る前にあれも！」など、ありがちなコミュニケーションがスムー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://jp.techcrunch.com/2016/10/12/20161011facebook-partners-with-google-others-to-launch-a-new-javascript-package-manager/
Chrome Developer Toolsを使いこなそう！
