2022-05-20

[IkumaTadokoro]

.

[IkumaTadokoro]

新聞

• [x] content_security_policy
• [x] destroy_async_parent：テストファイル名になっているけど、なんのテストしているんだろう
• [x] bin/rails testでdeclared nameによるテストのフィルターを指定
• [x] コミットにci-skipとあるのはなんだろう？
• [ ] valiatorの引数をrecord引数なしで指定できるとは？

content_secutiry_policy

• XSSに対する防御策。CSPと略されることも多い。
• Content-Security-Policyレスポンスヘッダを使って、Webブラウザで使える機能を細かく設定できる仕組み
• RailsではCSPを設定するためのDSLが提供されている
• グローバル設定はconfig/initializers/content_security_policy.rbで実施する。rails newしたタイミングで作成されているが、初期状態では何も設定されていない状態。
• グローバルな設定とは別にControllerでオーバーライドし、リソースごとに設定することも可能
• 今回の修正ではinitializerで定義されているcontent_security_policyでもhelper_methodが使用できるようになっている。もともとyieldを使っていたが、selfが正しくないので、insrance_execを使用するように変更した。
• 参考
  • Rails セキュリティガイド - Railsガイド
  • BasicObject#instance_exec (Ruby 3.1 リファレンスマニュアル)
  • Rails アプリケーションのセキュリティ対策（CORS/CSP/HSTS）

dependent: :destroy_async

• 非同期で関連を削除する。連鎖するオブジェクトが多い場合に、サーバタイムアウトするのを防ぐための仕組み
• Rails 6.1で導入
• 参考：Rails 6.1: 関連付けをバックグラウンド削除する「dependent: :destroy_async」（翻訳）｜TechRacho by BPS株式会社

テスト実行時にdeclared nameで実行できるように

class MyTest < ActiveSupport::TestCase
  test "does something" do
    # ...
  end
end

これを

$ rails test test/my_test.rb -n "does something"

で呼べるようにしたとのこと。もともと、test_does_somethingでないと呼べなかったみたい。

[ci skip]

• コミットメッセージに特定のキーワードを含めるとciをスキップできる。
• 参考
  • Gitのpush時にCIのビルドを回避する方法｜TechRacho by BPS株式会社
  • ワークフロー実行をスキップする - GitHub Docs

[IkumaTadokoro]

最後の一個は時間切れ

[IkumaTadokoro]

pigs_can_fly?をサンプルコードに使用するケースって、「絶対にfalseをかえすメソッド」って意図で使っている理解でいいのかな？ https://ja.wikipedia.org/wiki/%E7%A9%BA%E9%A3%9B%E3%81%B6%E8%B1%9A

[IkumaTadokoro]

ソフトスキル分析少し疲れたので、Chrome拡張の方に切り替える

[IkumaTadokoro]

オプションページを作っていく

参考

• とほほのChrome拡張機能開発入門 - とほほのWWW入門
• Give users options - Chrome Developers

メモ

• optionページは、フルページと埋め込みの2種類がある
  • フルページ：新しいタブが開く。manifest.jsonでoptions_pageを用いて設定する
  • 埋め込み：拡張機能の管理ページに表示する。manifest.jsonでoptions_uiを用いて設定する
• とりあえずフルページで作成するのでいいのかな

タスク

• [x] manifest.jsonにオプション画面の設定を登録する
  • [x] ページのファイルを指定する
  • [x] 入力データを保存するためにstorageの権限を指定する
• [x] HTMLファイルを作成する
  • [x] とりあえずesaのアクセストークンを保存する
• [x] storage APIを利用してデータを保存する
• [x] オプションで指定した値を使用して、esaにアクセスする
• [x] その他のオプションについてもオプションに保存するように変更する
  • [x] チーム名
  • [x] 日報が保存されているカテゴリ
  • [x] 日報のテンプレート

[IkumaTadokoro]

とりあえずoptionページが表示されるようになりました。デザイン無視してガワだけ作成します。

入力されたデータを保存するように変更します

// Saves options to chrome.storage
const save_options = () => {
  const accessToken = document.getElementById('accessToken').value

  chrome.storage.sync.set({
    accessToken: accessToken
  }, () => {
    console.log('保存しました!')
    const status = document.getElementById('status')
    status.textContent = 'Options saved'
    setTimeout(() => {
      status.textContent = ''
    }, 750)
  })
}

document.getElementById('save').addEventListener('click', save_options);

Uncaught TypeError: Cannot read properties of undefined (reading 'sync')
    at HTMLButtonElement.save_options (options.js:5:18)

う〜ん、chromeのAPIの方がうまく読み取れていないみたいですね。 →リロードしたら治ったんですが、どうもmanifest.jsonのpermissionが読み取れていなかったときの挙動のようです。メッセージとしてこれはわかりづらいなあ

[IkumaTadokoro]

StorageAPIで保存した情報はどこに設定されているのか？Local Storage？

chrome.storage - Chrome Developers Chromeエクステンションを作ろう：ストレージ編 - Qiita

Storageの形態には複数あるようです

• local
• managed
• session
• sync

[IkumaTadokoro]

syncに保存して、永続化できるようになりました！

[IkumaTadokoro]

保存した情報でAPIアクセスができるようになった。

https://github.com/IkumaTadokoro/kyo-no-esa/commit/5c4449c28fdba265047e1e6ebe040f7f651d0198

[IkumaTadokoro]

その他の情報についてもオプションページで指定できるように変更する

[IkumaTadokoro]

とりあえず枠だけ作成する

[IkumaTadokoro]

全部オプションページを使用した値を使って設定できるようになった。

[IkumaTadokoro]

あとはちゃんとスタイルを当てるか。ViteでTailwindCSSでやるならこれかな〜 Install Tailwind CSS with Vue 3 and Vite - Tailwind CSS

[IkumaTadokoro]

デザインはざっくりにして、buildをする

$ npm run build

src/App.vue:17:70 - error TS2304: Cannot find name 'chrome'.

17   const { accessToken, teamName, diaryCategory, templateId } = await chrome.storage.sync.get([
                                                                        ~~~~~~

src/App.vue:32:29 - error TS2322: Type '{}' is not assignable to type 'string'.

32     <a class="text-center" :href="diaryUrl">今日の<br>esa</a>
                               ~~~~

  node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:481:3
    481   href?: string
          ~~~~
    The expected type comes from property 'href' which is declared here on type 'ElementAttrs<AnchorHTMLAttributes>'

Found 2 errors in the same file, starting at: src/App.vue:17

とりあえずchrome関連については、chromeのtypesを追加する

npm install --save-dev @types/chrome

これで再度buildする

src/App.vue:32:29 - error TS2322: Type '{}' is not assignable to type 'string'.

32     <a class="text-center" :href="diaryUrl">今日の<br>esa</a>
                               ~~~~

  node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:481:3
    481   href?: string
          ~~~~
    The expected type comes from property 'href' which is declared here on type 'ElementAttrs<AnchorHTMLAttributes>'

Found 1 error in src/App.vue:32

{}に対してstringを代入することはできないよってか？

// before
const diaryUrl = ref({})

// after
const diaryUrl = ref('')

これで解決しました。

[IkumaTadokoro]

今日の分のdiaryがGitHub Pagesに反映されていないのは何故だろう？GitHub Actionsは問題なさそうなんだけどね。

[IkumaTadokoro]

最初のコメントを編集したら連携された。本家の方も連携されていなかったっぽいので、構造的に問題があるのかな？

[IkumaTadokoro]

https://apps.apple.com/jp/app/moom/id419330170?mt=12

Moomという画面分割アプリを買った。1500円くらい。 アプリの画面配置を覚えてくれるので、Twitter用ChromerとterminalとメインChromeみたいな構成を保持できて便利。結構ストレスだったので買ってよかった