Apps ScriptでGoogleフォーム情報漏洩リスクを確認する方法
Googleフォームの情報漏洩リスクを確認 最近Googleフォームによる個人情報漏洩のニュースをよく見かけます。 あわわ、情報漏えいの可能性 Googleフォームで設定ミス - ITmedia NEWS Acompany で 4 件の Google フォーム誤設定、最大 164 名の個人情報が閲覧可能に Googleフォーム「結果の概要を表示する」設定をONで公開、申込者の個人情報が閲覧可能に 映画の感想投稿キャンペーンで「名前」「住所」など個人情報漏えい 上越市 就学相談説明会で申込者12人の個人情報が漏えい 「ぶいすぽっ！」漏えい問題、被害者の電話番号変更費用を負担 家の引越費用も - ITmedia NEWS このようなGoogleフォームによる個人情報漏洩のリスクを減らすために、Apps ScriptでGoogleフォームの一覧を表示してリスクを確認できる、Googleスプレッド
CSSで三角形や斜め背景色はborderではなくclip-pathを使用する
CSSのborderで三角形を実装 CSSで三角形を実装する方法はいくつかありますが、そのうちの1つはborderプロパティを使用する方法です。 以下のようにborderを指定することで三角形が作成できます。 /* 20x20の三角形 */ .triangle-border { border-style: solid; border-width: 10px 0 10px 20px; border-color: transparent transparent transparent #CC0000; } しかし、borderは文字通り枠線のためのCSSプロパティなので、三角形を作成するためのものではありません。 そのため、borderだと形、色、サイズなどを柔軟に実装できません。 CSSのclip-pathで三角形を実装 CSSのclip-pathプロパティを使用すれば、borderよりも簡
JavaScriptでCookieの追加・削除の操作は誤解が多い
Cookieの追加・削除の操作は誤解が多い JavaScriptでCookieの追加や削除する方法を検索すると、色々な方法が検索結果に表示されます。 localStorageだと追加はsetItem、削除はremoveItemなので、すぐに理解できますが、Cookieは色々な方法がネット上にあるので、JavaScript初心者だと処理方法を誤解して間違いやすいです。 この記事ではJavaScriptが得意でない人によくあるCookieの誤解についてまとめました。 Chromeで保存されたCookieを確認する方法 Chromeで保存されたCookieを確認するには、Applicationを選択してCookiesを見ます。 確認だけでなく、Cookieの追加や削除もここからできます。 Cookieを追加・削除できるサンプルページを用意しましたので、実際に追加と削除がどのように反映されるか確認
pixelmatchライブラリを使用した画像差分確認方法
pixelmatchライブラリとは 画像の差分を検出するために使用されるJavaScriptライブラリです。 主にWebサイトなどの画像の変更を検出するために使用されます。 このライブラリは2つの画像を比較し、ピクセル単位での違いを数値化できます。 pixelmatchライブラリの使い方 まず、pixelmatchコマンドを試すために以下のコマンドでディレクトリなどを作成して、cdで移動します。 mkdir pixelmatch-test; cd pixelmatch-test; touch test.mjs; npm init -y; curl -o dragon_01.png https://iwb.jp/s/img/dragon_01.png && curl -o dragon_02.png https://iwb.jp/s/img/dragon_02.png; 画像比較のためにサン
1分でできるjsQRによるブラウザのQRコード読み込みアクセス
jsQRとは ブラウザからカメラを起動してQRコードを読み込めるようにするJavaScriptライブラリ。 スマートフォンの場合、最新のOSであればカメラにQRコード読み取り機能があるが、古いOSだとアプリを別途インストールする必要がある。 しかし、QRコード読み取りアプリをインストールさせずにブラウザからカメラを起動してQRコードを読み取らせて画面遷移させたい場合もあるので、この記事ではその方法について書きました。 jsQRをインストール npmの場合は以下のコマンドでインストールする。 npm i -D jsqr インストールしたらES6 importかCommonJS requireで読み込んで使用する。 // ES6 import import jsQR from "jsqr"; // CommonJS require const jsQR = require("jsqr"); j
Google Apps ScriptでGmailをLINEに通知する方法
特定のGmailをLINEに通知 Gmailを使用していると特定のメールのみLINEに通知したいことがある。 例えば会社のメールだけ条件を付けてLINEに通知するなどだ。 この記事ではGoogle Apps Scriptで簡単にGmailをLINEに通知する方法について説明します。 コードがわからない方でもほとんどコピペだけでできるようにしてあります。 LINE Notifyのトークンを発行 まずパソコンでLINE Notifyにログインします。 ログインできない場合はLINEアプリの設定 => アカウント => ログイン許可 が有効になっていません。 https://notify-bot.line.me/ja/ ログインしたらパソコンでLINE Notifyのマイページにアクセスして、アクセストークンの発行(開発者向け)の「トークンを発行する」を押します。 ※ スマートフォンからではアク
1分でできるYouTube動画をWebサイトの背景での再生方法
YouTubeをWebサイトの背景で再生 最近はWebサイトのトップページの背景にYouTubeの動画を再生させていることが多い。 例: プリコネR アイマスSS 動画ファイルはファイルサイズが大きいため、サーバー負荷軽減のためYouTubeに動画をアップロードしてWebサイトで読み込むケースが多く見られる。 (最近はvideoタグでの表示も多いが。 例: アークナイツ) iwb.jpでも以前「背景にYouTube動画を再生する方法」の記事を投稿したことがあるが、コードが多めなので初心者には少し難しい。 しかし、jQueryプラグインにはjquery.mb.YTPlayerというYouTube動画を背景に設定するものがあるので、これを使用すれば簡単に実装できる。 jquery.mb.YTPlayer やり方はjQuery、プラグイン、プラグインのCSSを読み込んで表示箇所にdata-pro
PuppeteerによるヘッドレスChromeの使い方 2021年度版
Puppeteerとは 以前「PuppeteerによるヘッドレスChromeの使い方 evaluate」という記事を書いたのだが、現在ではコードが古くなってまともに動作しなくなってしまったので「PuppeteerによるヘッドレスChromeの使い方 2021年度版」を新たに作成した。 PuppeteerとはChromeを操ってWebスクレイピングを行い各種チェックなどができるNodeライブラリ。 例えば下記のようなスクリプトを作成してnode test.jsを実行すればChromeが指定した文字列を検索して、さらにスクリーンショットを保存してくれる。 // test.js const puppeteer = require('puppeteer'); puppeteer.launch().then(async browser => { const page = await browser.
Google Apps ScriptとcheeriogsでWebサイトのtitleなどを取得する方法
cheeriogsとは GASで使用可能なHTMLをパースできるライブラリ。 Google Apps ScriptだけだとWebサイトのHTMLをgetContentTextを使用してHTMLをテキストで取得して正規表現で抽出しなければならないため、非常に取得しづらい。 cheeriogsを使用すれば$('title').text()とjQueryようなコードで簡単に取得できる。 cheeriogsを使用するには スクリプトエディタでリソース => ライブラリを選択してAdd a libraryに以下のスクリプトIDを検索して、最新バージョンを選択して保存を押せば使えるようになる。 1ReeQ6WO8kKNxoaA_O0XEQ589cIrRvEBA9qcWpNqdOP17i47u6N9M5Xh0 スクリプトエディタのリソース => ライブラリからcheeriogs(Cheerio)を追加
Google Apps ScriptでgetRangeの範囲をSUM関数のように計算する方法
Google Apps Script(以下GAS)でgetRangeの範囲をSUM関数のように計算したいことがある。 例えばこのようなシート上でA1:B3の合計値を計算したい場合は=SUM(A1:B3)で簡単に計算できるがGASはSUM関数を直接使用して計算できないため、自分で計算式を作成する必要がある。 SUM関数のように計算式 GASでgetRangeの範囲をSUM関数のように計算する計算式は以下のようになる。 function myFunction() { var ss = SpreadsheetApp.getActiveSpreadsheet(); var sheet = ss.getActiveSheet(); var col = 2; var total = sheet.getRange(1, 1, 3, col).getValues().reduce(function(a,
1分でできるVue.js vue2-hammerのスワイプ・タップイベント実装
vue2-hammerとは Hammer.jsというスワイプやタップイベントの実装が簡単にできるライブラリのVue.js版。 vue2-hammerの使い方 まず適当なディレクトリでVueのプロジェクトを作成。 # default, npmを選択 $ vue create my-hammer インストールが完了したらcd my-hammerでディレクトリに移動後、下記のコマンドでvue2-hammerをインストール。 npm install vue2-hammer vue2-hammerのインストールが完了したらmain.js�にimportとVue.useを追記して読み込む。 import Vue from 'vue' import App from './App.vue' import { VueHammer } from 'vue2-hammer' Vue.use(VueHammer
Vue.jsで便利なカスタムフィルターのサンプル一覧まとめ
Vue.jsのフィルターとは Vue.jsのフィルターとはテキストフォーマットなどを適用するためもの。 例えば{{ str }}がabcと表示される箇所に{{ str | capitalize }}のような記述でフィルターを記述するとAbcで値が返されるようになる。 Vue.js 2.xではフィルターはすべて自分で作成する必要がある。 Vue.js 1.x のデフォルトのフィルター Vue.js 1.x以下だと10個のデフォルトのフィルターが存在するが2.x以降では削除されているため、これらは自分で作成する必要がある。 capitalize uppercase lowercase currency pluralize json key debounce filterBy orderBy 以降にVue.jsでよく使用されるカスタムフィルターのサンプルを掲載した。 必要なものを取り入れたり、フ
Chrome拡張機能 Puppeteer Recorderの自動操作の使い方と注意点
Puppeteer Recorderとは ブラウザ操作を自動記録してPuppeteerのコードを出力してくれるChrome拡張拡機能。 例えば… Chromeを開く iwb.jpの最近の投稿の1番目を開く iwb.jpの最近の投稿の2番目を開く Chromeを閉じる という以上の動作などを自動化することができる。 下記のURLからインストール可能。 https://chrome.google.com/webstore/detail/puppeteer-recorder/djeegiggegleadkkbgopoonhjimgehda Puppeteerとは Node.jsでChromeを制御できるやつ。使用するにはNode.jsのインストールが必要。 Node.js 推奨版のダウンロード Puppeteer Recorderの使い方 Recordボタンを押すと記録が開始される。 例えばiw
Chromeの顔認識機能で自動で画像にモザイクを追加できるWebサービス
写真の顔にモザイクを付けたいことがあるが、人物が多く写っている画像の場合は1つ1つにモザイクを付けるのは手間がかかる。 しかしChromeの顔認識機能で自動で画像にモザイクを追加できるWebサービスを使用すれば自動で画像にモザイクを追加できる。 画像顔モザイク追加前 画像顔モザイク追加後 自動顔モザイク追加 自動顔モザイク追加というWebサービスを使用するにはChromeのExperimental Web Platform featuresをEnabled(有効)にする。(要Chromeバージョン68以上) Chromeブラウザで以下URLを開いてEnabledにする。 chrome://flags/#enable-experimental-web-platform-features 設定が終わったら以下のページで画像を追加して顔モザイク画像を自動生成させる。 左下のダウンロードボタンを押
1分でできるJavaScriptで国民の祝日を判定する方法
JavaScriptで国民の祝日を判定 JavaScriptのnew Dateによる日付の処理をしている際に国民の祝日を判定したいことがあります。 たとえば2018年1月1日(月)のような月〜金の曜日でも祝日の場合は(月)のように赤くするなどの処理です。 JavaScriptにはgetHolidayはない JavaScriptには曜日を数値で取得するgetDayはあるが祝日を取得するgetHolidayのようなものはない。 そのため祝日のデータをあらかじめ用意しておく必要がある。 祝日のデータは自分で作成しない 祝日のデータを自分で作成して判定に使用している人をたまに見かけるが、祝日は毎年変わるしデータを自分で作成するのは手間がかかる。 間違った祝日データを作成してしまう可能性もあるので自作は避けたほうがよい。 内閣府から祝日のデータをダウンロード 内閣府のWebサイトには国民の祝日につい
PixiJSでスマホブラウザゲームのタップした場所に画像表示実装方法
最近のブラウザゲーム(アプリゲーム)だとタップした場所に画像のアニメーションが表示されることが多い。 簡単なものであればCSSとJavaScriptで実装できる。 まずCSSアニメーション用のCSSを用意する。 html { position: relative; } body { margin: 0; padding: 0; } #c { position: absolute; z-index: 99999; width: 10px; height: 10px; border-radius: 50%; background: cyan; opacity: 0; } #c.show { animation: a 0.3s; } @keyframes a { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1
GoogleスプレッドシートのGoogle Apps Scriptでcsv, json, yawl出力
GoogleスプレッドシートのGoogle Apps Scriptでcsv, json, yawl出力 シート内のデータをcsv, json, yawlなどで出力 Googleスプレッドシート内のデータをcsv, json, yawl, md(Markdown)などで書き出したいことがある。 Googleスプレッドシートはファイル=>形式を指定してダウンロードを使用すればcsv, tsvファイルであればダウンロードできるが若干面倒だ。 しかも、json, jsonp, yawl形式には対応していない。 Google Apps Scriptで書き出す Google Apps Scriptを使用すればcsv, tsv, json, jsonp, yawl, md(Markdown)形式で書き出すことが可能だ。 やり方はまずシート内に適当なデータを入力する。 https://docs.googl
1分でわかるvideoタグでWebサイトに簡単に動画を表示する方法
videoタグとは 動画を埋め込むためのHTMLタグ。これを使用することで動画をWebサイト内に簡単に表示させることができる。 videoタグの使い方 基本的な使い方は画像のimgタグを似ており、まずwidthとheightでvideoタグ(動画)の高さと幅を指定する。 <video width="640" height="360"> </video> poster="rabbit.jpg"のように指定すると動画再生前のサムネイルを表示できるため、動画のサムネイル画像もあらかじめ用意しておく。 <video width="640" height="360" poster="rabbit.jpg"> </video> poster属性でサムネイル画像を表示しないと再生するまで何も表示されない。 さらにpreload="none"を付けて動画を再生ボタンを押すまで動画データを読み込まないように
JavaScriptで西暦を明治・大正・昭和・平成・令和に簡単に変換する方法
JavaScriptで西暦を和暦に変換 JavaScriptで西暦を明治・大正・昭和・平成・令和の和暦に変換したいことがある。例えば1990年を和暦(平成)に変換したいなどだ。 そんなときはtoLocaleDateStringメソッドを使用すれば西暦を和暦に変換できる。 toLocaleDateString使用時の注意点 toLocaleDateStringはブラウザによって動作が異なる。例えば1990年1月1日を変換した場合、Chromeだと平成2/1/1だがSafariだと2/1/1を返す。 new Date('1990/01/01').toLocaleDateString('ja-JP-u-ca-japanese'); // Chrome => 平成2/1/1 // Safari => 2/1/1 そのため、下記のように取得した和暦を削除して、新たに付け直す必要がある。 var c
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Animations APIでCSSなしでアニメーションを実装する方法
