Angularアプリにグーグルフォームを埋め込みたいけどどうすればいいんだろう…？
この記事では、上記の悩みを解決します。
今回実装するイメージ図は以下です。
グーグルフォームつきのリンクがあります。
リクエストフォームへをクリックすると、埋め込んだグーグルフォームに遷移します。
Contents
グーグルフォームのリンクを埋め込む
イメージ図のように、リンクをクリックしたらグーグルフォームのリンクが開くように実装していきましょう。
まずはHTML側です。
<p class="request-form" (click)="googleFormUrl()">yoteiPickerのリクエストフォームへ</p>解説すると、リンクをクリックするイベントを記載します。
上記の挙動では、yoteiPickerのリクエストフォームへをクリックするとグーグルフォームが開く形です。
ts側にクリックイベントの内容を記載します。
import { Component, OnInit } from '@angular/core';
import { environment } from 'src/environments/environment';
@Component({
selector: 'app-sample',
templateUrl: './sample.component.html',
styleUrls: ['./sample.component.css']
})
export class SampleComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
/**
* 環境変数からグーグルフォームのURLを取得する
*
* @return グーグルフォームURL
*/
public googleFormUrl() {
const url = environment.google_form_url;
return window.open(url);
}
}
解説すると、urlの変数には、別ファイルの環境変数にグーグルフォームのurlを記載するようにします。
window.openで、()内に記載したURLのウィンドウを開くようにする形です。
environmentの内容を呼ぶために、import { environment }を忘れずに記載ください。
グーグルフォームのURLを環境変数に記載する
最後に、グーグルフォームのURLをenvironmentの環境変数に記載します。
import { env } from "src/environments/env";
export const environment = {
production: false,
google_form_url: env.GOOGLE_FORM_URL
};グーグルフォームのURLはセキュアな情報なので、さらにenvファイルにグーグルフォームのURLを記載するようにします。
※env.tsにURLを記載しますが、このenv.tsはgitにあげないように.gitignoreのファイルに以下のようにgit管理から除外することも忘れずに。
src/environments/env.ts最後にenv.tsにグーグルフォームの情報を記載して終わりです。
export const env = {
GOOGLE_FORM_URL: "https://forms.gle/××××××××××××××××××"
};これでグーグルフォームのリンク埋め込みができるかと思います。
エンジニアの基礎力を上げるおすすめ本を紹介！
- 30冊以上紹介(個人的に推し本の『仮説思考』の何が良かったかも書いています)
- エンジニアなら読むべき定番の技術本や思考力を上げるなど…多数の本を紹介
- AIの回答を判断できるための知識をつける本がたくさん
あわせて読みたい
エンジニアなら読むべきおすすめ本【2026年版の基礎力が身につく必読書】
「AIに聞けば答えは出る。でも、その答えの『正しさ』を判断する力はありますか？」 なかなか「正しく判断する力は私はある」と答えられる人は少なくなってきているので...
コメント