HarioNote

表題にある通りGoogleフォームで作成したフォームのURLをコピペしてiframeで埋め込んで表示させたら
<pre><code>[Report Only] Refused to frame 'https://docs.google.com/' because an ancestor violates the following Content Security Policy directive: &quot;frame-ancestors 'none'&quot;.
</code></pre>
と言われてしまい、ググっても一発で出てこなかったので解消方法の備忘録です。
<h2>結論</h2>
結論としてはシンプルで、フォームのURLに<code>?embedded=true</code>を付ければokです。 
当たり前すぎてググっても出てこなかったのかもしれません。
ちなみに、Googleフォームの作成画面で送信ボタンをクリックして出てくるリンク等をコピーできるモーダル内で、iframeのコードをコピーすれば最初からembeddedパラメータは付いています。 
<img src="https://storage.googleapis.com/newt-files/8ebad0f5-f63b-4d8c-88df-78e3a9996a1c%2F2023-02-02_1.png" alt="2023-02-02_1.png">
今回は↓のようにリンクをコピーしてiframeに使用した場合に発生する事象になります。 
<img src="https://storage.googleapis.com/newt-files/15349c5c-7dc4-4264-b318-75af09a6a6f6%2F2023-02-02_2.png" alt="2023-02-02_2.png">
以上。

Googleフォームをiframeに埋め込んだら「[Report Only] Refused to frame 'https://docs.google.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".」と言われた【GoogleForm/iframe】

表題にあるとおり、文字コードがEUC-JP形式のテキストファイルの閲覧編集ができて、UTF-8やShift_JISへの変換もできる方法の紹介です。
<h2>結論</h2>
結論、<a href="https://tera-net.com/">TeraPad</a>を使えば全部できます。 
TeraPadはWindows対応のシンプルなテキストエディタです。 
<a href="****">https://tera-net.com/</a> 
のダウンロードからダウンロードしてインストールすることで使用できます。
<h2>EUC-JP形式のファイルを開く方法</h2>
これはそのまま対象のファイルをTeraPadで開くだけでOKです。 
TeraPadを開いておいてそこにEUC-JP形式のファイルをドラッグアンドドロップするだけでも開けます。 
開くとウィンドウ右下に「EUC」を表示されるため現在開いているファイルの文字コードが何なのか確認できます。 
<img src="https://storage.googleapis.com/newt-files/dabf1357-4b8c-45ec-a1e5-5bcea131f5b3%2F2023-01-24-01.png" alt="2023-01-24-01.png">
<h2>UTF-8やShift_JISなど他の文字コードに変換する</h2>
TeraPadで(EUC-JP形式の)対象のファイルを開いた状態で、「ファイル &gt; 文字/改行コード指定保存」を選択します。 
<img src="https://storage.googleapis.com/newt-files/92a64366-bd42-4b39-b1b4-8743fd6b7538%2F2023-01-24-02.png" alt="2023-01-24-02.png"> 
表示されたウィンドウにて「文字コード」の項目で変換したい形式を選択してOKボタンをクリックすれば指定の形式に変換されて保存されます。 
<img src="https://storage.googleapis.com/newt-files/da58cf9c-7e96-470e-b475-b79a02760b53%2F2023-01-24-03.png" alt="2023-01-24-03.png">
元データを取っておきたい場合は「名前を付けて保存」にチェックしておきます。
以上です。

【文字コード変換】Windowsで文字コードが「EUC-JP」のテキストファイルを文字化けせずに閲覧できてかつUTF-8やShift_JISに変換する方法【EUC-JP/UTF-8/Shift_JIS】

<h2>ポイント</h2>
以下のものを利用しました。
GitHub Actions 
「Add To GitHub projects」（※classicのGitHub projectsはサポートしてないので注意）
<h2>手順</h2>
<h3>アクセストークンを生成しておく</h3>
GitHubの右上のアカウントメニューのSettingsをクリックし
<img src="https://storage.googleapis.com/newt-files/dc573fd2-bbf4-47d0-9d6e-88af33a9974f%2Fimage-6165.png" alt="image-6165.png">
Settings左メニュー一番下の「Developer settings」をクリック
<img src="https://storage.googleapis.com/newt-files/31e4a880-9b06-4e2f-8d17-800cbf47fbd1%2Fimage-8651.png" alt="image-8651.png">
左メニューのPersonal access tokensのTokens(classic)をクリック 
<img src="https://storage.googleapis.com/newt-files/4ff7bfcc-b531-41b7-b139-9a46de22766d%2Fimage-9556.png" alt="image-9556.png">
「Generate new token」をクリックし、「Generate new token(classic)」を選択します。
<img src="https://storage.googleapis.com/newt-files/bb90fff9-252d-455f-9f01-928c61d36bd5%2Fimage-1061.png" alt="image-1061.png">
各項目を入力してtokenを作成します。 
scopesは以下のようにしました。 
これについては、個人アカウントのリポジトリで行うかorgで利用するかで異なると思うので各自調整してください。
<img src="https://storage.googleapis.com/newt-files/a3513df0-4a5d-4d55-b0a6-6c29c0dfdb7c%2Fimage-11024.png" alt="image-11024.png">
tokenを生成すると最初にtokenを表示してくれますが、以降リロード等すると二度と表示されないので、コピーして控えておきます。
<img src="https://storage.googleapis.com/newt-files/977d5749-983d-4698-a64a-1b74910fc8c6%2Fimage-1254.png" alt="image-1254.png">
<h2>目的のリポジトリのSecretsにtokenを登録する</h2>
今回はOrganizationで行いたいのでOrganizationのSecretsでもいいのですが、リポジトリのSecretsで行いたいと思います。
監視対象のリポジトリのページにアクセスして「Settings」をクリックします。 
<img src="https://storage.googleapis.com/newt-files/b2769bb6-fc30-474d-bf02-a775bc75affa%2Fimage-13428.png" alt="image-13428.png">
遷移先ページ左メニューのSecrets &gt; Actionsをクリックします。
<img src="https://storage.googleapis.com/newt-files/97777bf9-a47f-41c0-ad7e-3ec7a23ae9fe%2Fimage-1585.png" alt="image-1585.png">
表示されたページの「New Repository secret」をクリックします。 
<img src="https://storage.googleapis.com/newt-files/ddac0134-c13f-497d-bfcb-71893600950f%2Fimage-1654.png" alt="
">
Nameは「GHPROJECT_TOKEN」とでもして（なんでも良いです） 
Secretに先程コピーして控えておいたtokenを入力し、「Add secret」をクリックしてsecretに登録します。
<img src="https://storage.googleapis.com/newt-files/e164358b-8fae-43b7-940f-47e98c394384%2Fimage-1775.png" alt="image-1775.png">
<h2>Workflowを作成</h2>
リポジトリにissueが作成されたらActionsで実行されるworkflowを作成します。先程作成したtokenやsecretはここの処理で必要になります。
監視するリポジトリのページにアクセスし、「Actions」をクリックします。
<img src="https://storage.googleapis.com/newt-files/5654f026-ff5d-4ac3-867e-233c0b5fec6a%2Fimage-1885.png" alt="image-1885.png">
左メニューの「New workflow」をクリックします。
<img src="https://storage.googleapis.com/newt-files/68d5b70f-886a-4ae2-9c92-a51490b36ea5%2Fimage-1978.png" alt="image-1978.png">
表示されたページの「set up a workflow yourself」をクリックします。 
<img src="https://storage.googleapis.com/newt-files/78210b79-2ed4-4325-8e0f-9d56d4c7b30e%2Fimage-2075.png" alt="image-2075.png">
workflowのエディタが開かれるので、以下のように入力します。 
ファイル名(〇〇.yml)も各々で自由につけてokです。
<img src="https://storage.googleapis.com/newt-files/68df02cc-ccb3-448f-997c-eaea5d1c6240%2Fimage-2297.png" alt="image-2297.png">
<pre><code>name: 'Your workflow name'
on:
 issues:
 types: [opened]
jobs:
 add-issue-to-project:
 runs-on: ubuntu-latest
 steps:
 - uses: actions/add-to-project@vX.X.X　←バージョンは各々確認
 id: add-issue-to-project
 with:
 project-url: 自分のGitHub ProjectのURL（〇〇/projects/[project No.] まででok）
 github-token: ${{ secrets.GHPROJECT_TOKEN }}　←自分で付けたtokenの名前にしてください
</code></pre>
↑各項目は各々の環境に合わせて変更してください。 
「actions/add-to-project@vX.X.X」のバージョンは↓で確認できます。 
<a href="https://github.com/marketplace/actions/add-to-github-projects">https://github.com/marketplace/actions/add-to-github-projects</a>
書き終わったら右上の「Start commit」でcommitしてymlを保存しましょう。
これで準備は完了です。
<h3>確認</h3>
最後に対象のリポジトリでissueを作成してProjectに追加されるか確認し、できてればokです。
以上です。
<h2>Advanced</h2>
趣味とか私用でないOrganizationにおいては、個人のアクセストークンの利用はやはり避けた方が良いと思います。今回は試験的な試みというか私自身がやりたくてやっているだけなので、参考にする場合は自己責任でお願いします。
どのようなルールで組織のトークンを管理するかは議論するといろんな意見が出てきそうですね。

【GitHub】特定のリポジトリにissueが作成されたら、自動で Project(GitHub Projects)に追加されるようにする【GitHub Projects】

<h2>MFAとは</h2>
MFAとは「多要素認証」という意味で、ユーザー名＋パスワード以外でも認証を行います。
今回のawsではスマートフォンアプリで認証を行います。
<h2>きっかけ</h2>
IAMにダッシュボードにアクセスするとMFAの設定を行うことを推奨されます。 
　なので「MFAを追加」ボタンをクリックしてMFA設定の手続きを開始します。
<img src="https://storage.googleapis.com/newt-files/c5794fb8-a0eb-48f4-a654-b07fd2daab66%2Fimage23.png" alt="image23.png">
<h2>MFA設定手順</h2>
「MFAを追加」ボタンをクリックすると以下のような画面が表示されるので、「MFAの有効化」をクリックします。
<img src="https://storage.googleapis.com/newt-files/7eed7d76-6717-4390-9d22-42fcd969d8e1%2Fimage-4141.png" alt="image-4141.png">
クリックして表示されたモーダルで「仮想MFAデバイス」を選択して「続行」をクリックします。
<img src="https://storage.googleapis.com/newt-files/c8c3016b-518c-4c83-95ec-5adf4215637e%2Fimage-5615.png" alt="image-5615.png">
MFAデバイスを用意します。今回はスマホです。事前に自身のスマホに、awsのMFAでの認証に使用可能なアプリを事前にインストールしておきます。 
　MFAに使えるスマホアプリとしては以下のものがあるようです。
<img src="https://storage.googleapis.com/newt-files/c14a17b9-53ca-46cb-a382-5fc283800cc2%2Fimage-6461.png" alt="image-6461.png">
今回はiphoneでGoogle Authenticatorというアプリを使用します。
<img src="https://storage.googleapis.com/newt-files/d35b5a1a-089f-4b5c-a002-54bbbcb2a164%2Fimage-6415.png" alt="image-6415.png">
手元のiphoneで「Google Authenticator」を起動しておき、「QRコードの表示」をクリックしてQRコードを表示して、Google Authenticatorアプリの＋ボタンをタップして、「QRコードをスキャン」を選択して、表示されているQRコードをスキャンします。
<img src="https://storage.googleapis.com/newt-files/15ff2572-9de5-4973-8f30-93d97fd2380a%2Fimage-5646.png" alt="image-5646.png">
スキャンすると「Google Authenticator」にMFAコードが表示されますのでこれを入力します。
<img src="https://storage.googleapis.com/newt-files/1df4ea07-9694-4b45-9f32-ce6fcde6545a%2Fimage-65744.png" alt="image-65744.png">
しかし私はここで、入力欄にある文言の「連続する2つのMFAコードを以下に入力」のやり方がよくわかりませんでした。。。 
　Google Authenticatorにはコードは1つしか表示されていなかったからです。
結局どうすればうまくいったかというと…
Google Authenticatorに表示されているコードを「MFAコード1」の欄に入力し、30秒程待ってGoogle Authenticatorのコードが更新されたらそれを「MFAコード2」に入力。
これで「MFAの割り当て」をクリックすることでうまくいきました。
<img src="https://storage.googleapis.com/newt-files/bdffe3a0-7a09-4134-8737-46cdfa2feb56%2Fimage-8644.png" alt="image-8644.png">
私の確認不足で何処かに明記されていたのかもしれませんが、この単純な手順がわからず無駄に悩んでしまいました。
以上です。

AWSのIAMでMFAを設定しようとしたら「連続する2つのMFAコードを以下に入力」がわかりにくかったので備忘録

Reactなどの開発をチームで行っていると、MacユーザーとWindowsユーザーのどちらもいる場合、ESLintなどのチェックで改行コードが引っかかることがあります。
そんなときGitを使っているなら、設定ファイルを利用して一度に変更してしまうのが楽です。
<h2>手順</h2>
今回は改行コードをCRLFからLFに変更する場合を例とします。
まず「.gitattributes」ファイルをプロジェクトのルートディレクトリに作成します。
次にエディタで次の一行を書いて保存します。
<pre><code>* text=auto eol=lf
</code></pre>
これで、以降は自動で作成したファイルの改行コードはLFになります。
その時点で既に存在している他のファイルの改行コードはそのままなので、一度ファイルを削除してGitの機能でチェックアウトするなどして復活させればLFになった状態で復活します。
コマンドなら
<pre><code>git checkout -f
</code></pre>
で復活させます。
以上

#IT LifeHack

Googleフォームをiframeに埋め込んだら「[Report Only] Refused to frame 'https://docs.google.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".」と言われた【GoogleForm/iframe】

【文字コード変換】Windowsで文字コードが「EUC-JP」のテキストファイルを文字化けせずに閲覧できてかつUTF-8やShift_JISに変換する方法【EUC-JP/UTF-8/Shift_JIS】

【GitHub】特定のリポジトリにissueが作成されたら、自動で Project(GitHub Projects)に追加されるようにする【GitHub Projects】

AWSのIAMでMFAを設定しようとしたら「連続する2つのMFAコードを以下に入力」がわかりにくかったので備忘録

【改行コード変換】Gitの機能を利用して複数ファイルの改行コードを一括変更する方法の備忘録