2022-09-24

Googleフォームのデザインをたった10行のGoogleAppsScriptで激変させていく

Program

Googleフォームは知っていますか？

GoogleフォームはGoogleが提供するオンラインのアンケートフォームです。

docs.google.com

こんなページを見たことがある方は多いでしょう。
実際オンラインで回答を回収できるので便利ですが、Googleフォームのデザインってみんな同じでダサいんです。
今回はこのGoogleフォームを魔改造して自分の好きなデザインに改変することを目標とします。

docs.google.com
引用：
https://docs.google.com/forms/u/0/

まずはここにアクセスをします。
ここで自分で質問を作ったりして項目を増やしていきます。

最終更新を見るだけでも、2012年からこのアンケートフォームを使っています。
見ていただければわかると思うのですが、どれも「紫色」のデザインが標準でダサいです。
今回はGoogleの用意したデザインは使わずオリジナルデザインにしていこうと思います。

GoogleChromeのウェブディベロッパーツールを使う

まずウェブディベロッパーツールって何？というかと思います。
わかりやすく言えばウェブページの設計図を見るためのツールです。
難しいソフトではなく、みなさんがお使いのGoogleChromeにも標準で備わっていて、

食品の場合、成分表を見れば何が入っているか？わかりますし…
建築の場合、設計図を見ればどんな建物か？わかります。
ウェブページも同じことが言えて、

引用：
https://iwb.jp/chrome-console-website-html-code-copy/

ソースコードを表示させれば、このコードがどのようなコードでその挙動をしているのかがわかります。
起動方法は

willcloud.jp
引用：
https://willcloud.jp/knowhow/dev-tools-01/

ここでは特に説明しません。

今回はこのツールを使いこなせる人向けにGoogleフォームを改造していくことを目標とします

このでディベロッパーツールを冒頭で見せたGoogleフォームで使用してみます。

ここでインスペクタをする。
インスペクタ聞き慣れない言葉かと思います。

インスペクタとは、調査官、検査官、査察官、監督官、監査役、選挙管理委員などの意味を持つ英単語。 ITの分野では何らかの対象の内部状態などを調べる働きをするソフトウェアなどをこのように呼ぶことが多い。

引用：
https://www.advantech.co.jp/resources/case-study/aviation-security-airport-baggage-inspection-system-and-hold-baggage-screening

空港で荷物検査することを「Baggage Inspection」と言い、荷物の中に不審物が入っていないか？を検査します。
同様にウェブページでもInspectionという概念があり、どうしてこのウェブページはこうゆう動きをしているんだ？というのを解析するために使います。

ウェブページのインスペクションとはこのようなことを表しまして、
Chromeメニューバー最下部デベロッパーツール

インスペクションツールを押すとこんな意味不明な英語の羅列が出てきます。

先程作ったフォームの「事前入力フォーム」からインスペクションかける

事前入力フォームというのが肝心です。
事前入力フォームである必要があって、ノーマルのフォームだと入力フォームのパラメータが隠されていてわかりません。
大事なことなので２度言いました。
日本人ってすごい手作業とか手計算とか大好きで、今の時代も試験は手計算させたりします。
でもコンピュータのインスペクション機能を使えば、コードが100行でも1000行でも簡単に目的のソースコードを探すことができます。
なので各フォームのテキスト欄に隠された項目の簡単にnameタグがわかります。

氏名欄のnameタグは
entry.1820618384

出席欠欄のnameタグは
entry.420047651

引き出物配送住所のnameタグは
entry.1407615245

ここまで来たらあとはhtmlをGoogle上で書いていき、公開しましょう。

コードは

//URLをたたいたときに呼ばれる
function doGet(req) {
  const template = 'form';
  const htmlOutput = HtmlService.createTemplateFromFile("form").evaluate();
  return HtmlService.createTemplateFromFile(template).evaluate();
}
// CSSを読み込む関数
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

まずはフォームのurlを叩いたときにform.htmlファイルを呼び出すようにします。
ここでform.htmlの拡張子htmlは無視して、コードを記述するようにしましょう。

次にフォーム本体のhtmlを書いていきます。
ここはhtmlの知識が必要になりますので、htmlの勉強は別途必要です。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Form</title>
  </head>
<body bgcolor="pink">
<h1>フォーム</h1>
<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSczWS63qMtBkHQzYCAX2zxKuPRCbmOJ8rpAs8bh_jo-GG-u5Q/formResponse" method="post">

氏名を教えてください<br>
<input type="text" name="entry.1820618384"><br>
<br>
出欠はいかがでしょうか？<br>
<input type="radio" name="entry.420047651" value="参加">ご出席<br>
<input type="radio" name="entry.420047651" value="欠席">ご欠席<br>
<br>
メッセージ<br>
<textarea name="entry.1407615245" rows="3" cols="50"></textarea>
<br>
<button type="submit">送信</button>

</form>
</body>
</html>

こちらをコンパイルしたものを公開しておきます。

こちらがGoogle上でコンパイルした魔改造 Googleフォームです。

https://script.google.com/macros/s/AKfycbxn0Ko-Aa868Y05C2gH4_Br_ho3o2DbhE3J_M3YW3pJ/dev

パスワードなどは送信しないでください。

このフォームで回答いただいたものはこちらで閲覧ができます。

https://docs.google.com/spreadsheets/d/1VjcOyMEUoRe4t6oLzjxEHM4PQxhak8I9UxUNQveWFJg/edit?usp=sharing

2022-09-23

Men's TBCのヒゲ脱毛1,000円トライアルに行ってきた！トライアルでは個人的にはメンズクリアよりTBCに軍配が上がる

Review

引用：
https://www.tousaiblog.org/irasutoya-nazemoukaru

ヒゲ脱毛のトライアル広告がやたら表示される

特にヒゲ脱毛を死ぬほどしたいわけではないんですが、私にはよくバナー広告が表示されます。

「〜〜市に在住の29〜34歳までの男性のみに表示されています」

あ、自分のことだと思いながらいつも見ていました。
でも誕生日が何度も来るに従って、この割引も受けられなくなります。
だったら、誕生日の前に予約をして行こうと思い立ち、予約をしていました。

kazukichi0914.hatenablog.com
引用：
https://kazukichi0914.hatenablog.com/entry/2022/01/28/200000?_ga=2.235682247.719989444.1663764302-1352008730.1646394391

以前も他の店舗でトライアル1000円などでヒゲ脱毛が一箇所できるようで、私は今年の１月辺りに980円のトライアルをしてきました。
今回も1,000円で、前もって数週間前に出社日に合わせて予約をしておきました。
まぁ誤差ですが、トライアル1,000円でした。

他店は光をひげに当てて、数日かけてヒゲがポロポロ抜ける（痛くない）

TBCはをひげの黒点にレーザー照射、即日ヒゲが気持ちいいほどよく取れる（痛い）

黒点照射タイプの脱毛は威力がすごい

引用：
https://www.irasutoya.com/2013/05/blog-post_3066.html

光脱毛タイプはヒゲが抜けるまで数週間ほどかかって、店舗で効果が見えづらいのに対して
黒点を照射するタイプの脱毛は効果が、目の前でスタッフの方がモニタ越しにヒゲを決め打ちしてピンポイントで狙い撃ちします。
ただ光脱毛タイプに比べてTBCのほうが確実に痛いです。
子供は間違いなく泣きます。
同じ脱毛ですが方式によって効果が全然違うので、定期契約する人はいろいろ試してみて、定期契約するのがいいだろうなと思いました。
ちなみに私は何も定期契約していませんが。

2022-09-23

iPhoneのjailbreak必要なし！ホーム画面のアイコン配置をカスタマイズする方法

Howto

iPhoneのホーム画面の配置を変更したい

Android使ったことありますか？
jailbreakしてroot化すると非公式のアプリなどを入れることができるのでスマホを改造することができます。
しかしiPhoneはそこらへんのセキュリティがしっかりしているので、安易に改造などができないです。
他人のプライベートな情報はあまり興味がないですが、どんなアプリを入れているのか？やどんなランチャーを使っているのかは興味があります。
特に女子高生などは大人が知らないアプリなどを使いこなしているケースが多いので参考になります。
そんな私が最近出くわしたiPhoneのショートカット作成アプリが非常に優秀ですので紹介します。

iPhoneのユーティリティーで29位のアプリでホーム画面をカスタマイズすることができます。
作者が中国人なのでところどころ中国語ですが、非常に便利なアプリです。
root化することなくホーム画面をカスタマイズできます。
iPhoneのくせに見た目が完全にandroidになります。

使ってみていいなと思ったこと

まずはiPhoneなのにandroidのように魔改造できることです。
通常ウィジェットはAppleから提供されたものを使いますが、自身でホーム画面を改造ができます。

Quike Widget

妮琳张
ユーティリティ
無料

apps.apple.com

それを実現するのはQuickというアプリです。
直感的に使えるので中国語ができない人でも大丈夫です。

URLスキームは知っている？

www.app-visor.com
引用：
https://www.app-visor.com/glossary/show/?page=url_scheme#:~:text=URL%E3%82%B9%E3%82%AD%E3%83%BC%E3%83%A0%E3%81%A8%E3%81%AF%E3%80%81WEB,%E3%81%AA%E3%82%89%E3%80%8Ccomgooglemaps%3A%2F%2F%E3%80%8D%E3%81%A7%E3%81%99%E3%80%82

このアプリが技術的にすごいところは「URLスキーム」を網羅しているところです。
しかしURLスキームってわからないと思います。
普段iPhoneを使っていて、URLはsafariで開く、地図情報はGoogleMapsで開く、電話番号は電話アプリで開く、TwitterのシェアボタンはTwitterアプリで開くなど…
URLを踏んだときに実は知らないうちにこのアプリで開くよね？というのが指定されていると思います。
それはURLスキームという記法が使われているから実現できます。

blog.thetheorier.com
引用：
https://blog.thetheorier.com/entry/ios15-settings-urlscheme

URL末尾にパラメータを設定することで、実はこのリンクの挙動を変更することができます。

prefs:root=General&path=PiP_SPEC

でピクチャーインピクチャーで開くなどです。
これらオプションを設定することで、実はURLの特殊な開き方を設定できるのです。
多くの人が何も知らずにアイコンを押したら、時計が開いた、写真が開いたなどと思っていると思いますが…
実はリンクの書き方に特徴があったのです。

URLスキームはディープリンクである

URLというと…多くの人はhttp://を思い浮かべます。
しかし現実には

music://

などの様々なオプションがあります。
私もすべてのURLスキームは網羅できていません。
でも仕組みは知っています。

blog.thetheorier.com
引用：https://blog.thetheorier.com/entry/ios15-settings-urlscheme

で調べるといろいろ発見できます。
なので、あとは自分でURLを作る際にオプションを設定することで特殊な動作をユーザにさせることができます。
興味ある人はぜひ遊んでみてください！

2022-09-22

ウェブに精通している人からすると松丸亮吾の「70万人をスクショしたい」という発言に違和感を覚える

Web

70万人のフォロワーを必ず自分の手でスクショをしたい？

700,000の瞬間はこの手で必ずスクショします

これから夜まで収録で携帯見れないけど、さすがに今日中には行かないはず pic.twitter.com/sGJnQDi25q
— 松丸亮吾 🍥 (@ryogomatsumaru) 2022年9月19日

松丸亮吾がTwitterでこんな発言をしている。
この発言に私は違和感を覚える。
多くのYouTuberなどは登録者数が100万人を達成したときにスクショを撮りたいという願望があるようだ。
しかしGoogleChromeのウェブディベロッパーツールを使えば、いくらでもネットの数字は改ざんできてしまう。

引用：
https://twitter.com/ryogomatsumaru

どうやら70万人は達成できたようで、70万人の瞬間を撮影できたかは謎である。

そんな時はウェブディベロッパーツールを使えばいくらでも改ざんができる

本人のTwitterの画面はこのように表される。
インターネット上だと、自分の給料明細とか、自分のフォロワー数とか載せたがる人をよく見かける。
でもいつもそのキャプチャが取れたとこで意味があるのかな？と思う。

インターネット上の静的なキャプチャであれば、いくらでも偽造ができるし…
しかも麻布→東京大学ときて、こういうことにこだわるのかと少し思ったりする。

ウェブ開発を行っていると、仮想的に環境を作ることが多い

日本にいながえら、アメリカからのアクセスに偽造してテスト
パソコンでインターネットをしていても、モバイルからのアクセスに偽造してテスト
のようなことは多々行う。
なので、フォロワー100万人などの画像を見せられても、あまり驚かないというか…
これって本当？って思ってしまう。

2022-09-21

検索エンジンはプロファイリング！Googleはあなたがどんな人間なのか？と思っているのか見てみよう

Web

Googleはあなたの何を知っている？

Googleといえば、「検索エンジン」として認識している方が多いと思います。
ですが、利益の大半は広告主から支払われる広告料になります。

「転職に興味がある人」に「転職」の広告を出したり…
「結婚に興味がある人」に「結婚」の広告を出したりします。

それはあなたがいつも検索ボックスに入れる言葉からGoogleが「あなたはどんな人かをプロファイリングしている」からです。

検索ボックスに入力される言葉は検索者の興味がある言葉です。
それを収集することで、Googleは閲覧者にピンポイントな広告を出しています。
ではGoogleはあなたのことをどのような人物だと認識しているのでしょうか？

adssettings.google.com
引用：
https://adssettings.google.com/authenticated

このページにアクセスしてみてください。
あなたが今まで検索してきたワードを元にあなたがどんな人物なのかのプロファイリングが出てくるはずです。
検索ボックスに入力する言葉、Gmailであなたに届くメールの内容、あなたがYouTubeで見ている動画はあなたの興味の範疇のはずです。
Googleはあなたの人物像を想定して、あなたにあった広告を表示しているんです。

広告が嫌な人はAdBlockを入れてみよう

chrome.google.com
引用：
https://chrome.google.com/webstore/detail/adblock-%E2%80%94-best-ad-blocker/gighmmpiobklfepjocnamgkkbiglidom?hl=ja

AdBlockというのはウェブに表示される広告をブロックするアドオンです。
私ももちろん入れています。
広告は表示したくないので…

検索

コンタクト

権利関係・執筆依頼等

商品のレビューや権利関係のお問い合わせなど。24時間以内に対応いたします。

はてなスター獲得履歴

検索(AdBlockオフ)

広告に関する取り扱い

筆者

書いている人：かずきち。(id:kazukichi_0914)

都心で情報システム系の仕事に携わっている30代ビジネスマンです。東京都出身、私立桐朋学園を経て東京大学工学部へ進学、大学院では人工知能分野を専攻しました。プライベートでは、Googleプロダクトフォーラム（GooglePlay・GooglePhoto）プラチナプロダクトエキスパートや翻訳精度向上に積極的に参加・関与し、ローカルガイド（認定フォトグラファー）も務めています。最近は、都内だけではなく旅先でもRICOH TEATAを活用して、アラウンドビュー投稿に凝っています。ネット上で製品レビューするのも楽しみのひとつで、GAFAから目が離せない毎日を過ごしています。@kazukichi_0914

Follow @kazukichi_0914

Amazonほしいものリスト

SNSリンク

メルカリ招待コード

招待コード：
ポイント消費

今すぐ購入

カテゴリー

RSS

注目記事

このブログについて

はてなスター獲得推移

月別アーカイブ

↓ストリートビュー撮影依頼はこちらから↓ https://www.google.com/intl/ja/streetview/contacts-tools/#sv-pro

↓GoogleフォトとGooglePlayのプロダクトエキスパートやっています↓ https://support.google.com/photos/profile/9947 https://support.google.com/googleplay/profile/9947 ↓GoogleLocalGuides↓ https://www.google.com/maps/contrib/117059506614615484750/contribute/@36.9714048,137.416952,7z/data=!3m1!4b1!4m3!8m2!3m1!1e1

メディア掲載

筆者

書いている人：かずきち。(id:kazukichi_0914)

都心で情報システム系の仕事に携わっている30代ビジネスマンです。東京都出身、私立桐朋学園を経て東京大学工学部へ進学、大学院では人工知能分野を専攻しました。プライベートでは、Googleプロダクトフォーラム（GooglePlay・GooglePhoto）や翻訳精度向上に積極的に参加・関与し、ローカルガイド（認定フォトグラファー）も務めています。最近は、都内だけではなく旅先でもRICOH TEATAを活用して、アラウンドビュー投稿に凝っています。ネット上で製品レビューするのも楽しみのひとつで、GAFAから目が離せない毎日を過ごしています。

SNSリンク

お問い合わせ

プライバシーポリシー

広告に関するクッキーの取り扱い

かずきち。の日記

サーバサイドエンジニアのつぶやき

最新ITニュース 2022/09/24版発行