瀏覽器bfcache

bfcache是“back/foward cache”的縮寫。當頁面「符合某些條件」的時候，當使用者按了瀏覽器的上下頁，瀏覽器可以快速回復剛剛瀏覽的頁面。且因為bfcache做cache的方式是對整個頁面做快照（包含了Javascript Heap（用來儲存變數、函式的地方）），因此會包含剛剛所做的改變，例如變更過的DOM內容、Javascript的執行結果等等。同時，因為不需要再次載入資源，所以速度超快。

因為Javascript也被緩存的關係，假設我們是用vue.js開發前端頁面，當離開頁面後再返回時，就勢必不會重新觸發fetch, data, asyncData, mounted, created…等等的Methods與Lifecycle Hooks。

可快取條件

目前我測起來，各個瀏覽器可bfcache的條件似乎不太一樣。例如在Chrome中點擊了File Input就會無法cache，但在ios的Safari中並不會有問題。以下把查到的以及自己測試出來的整理出來。

  1. 不要使用unload事件：可以改用pagehide替代。
  2. 有條件地使用beforeunload事件：不使用匿名函數，且使用完後立刻removeEventListener是可以的。
  3. 標頭不要有Cache-Control: no-store
  4. 不要使用window.open()開啟新視窗或分頁，改用a標籤並指定target是_blank並加上rel=”noopener”
  5. 不要使用File Input, WebSocket, WebRTC, WebAuthetication API, IndexedDB, Web Locks API

測試方式

因為WebSocket不能用，因此若有使用Hot Module Replacement的開發環境，例如Vue, React，在開發模式時無法使用bfcache也是正常的。因此測試時最好以相同於正式環境的方式來測試。

打開Chrome的console，切換到Application頁籤，左邊找到Background Services，點選Back/foward cache。針對要測試的頁面點選Test back/foward cache按鈕。點選後頁面會快速地來回chrome://terms/與當前頁面，並回應是否成功。若失敗的話則會在下方顯示錯誤的原因。

用瀏覽器console批次移除Jenkins建置紀錄

某天公司Jenkins的容量爆了，而那天有權限進那台機器的同事剛好請假。唯一能做的只能從前端一筆一筆刪掉。但這樣刪，不知道要刪到民國幾年。於是看看他刪除是怎麼打的，然後用一個回圈批次把一個branch中的所有舊建置都刪掉。

沒權限進主機以外，懶得進主機，也可以用這個方式來刪除。原始碼如下：

const jenkinsCrumb = 'your jenkins crumb'

async function remove (domain, project, branch, from, to) {
  for (let i = from; i < to; i++) {
    const url = `https://${domain}/job/${project}/job/${branch}/${i}/doDelete`
    const form = new FormData()
    form.set('Jenkins-Crumb', jenkinsCrumb)
    const body = new URLSearchParams(form)
    await fetch(url, {body, method: 'POST', headers: {
      'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }})
  }
  alert('刪除完畢')
}

remove('your.jenkins.domain', 'my-repo', 'development', 1, 300)

先將程式碼複製下來，打開Jenkins頁面，打開瀏覽器console，找到head標籤的data-crumb-value把這段token（黃色處）複製起來。貼到const jenkinsCrumb的引號中。

這段token每次當我們登入Jenkins時都會變，所以你可以每次要執行之前都先更新一下，避免後面執行失敗。接著，我們開始修改 remove(‘your.ci.domain’, ‘my-repo’, ‘development’, 1, 300) 這行。

首先把你Jenkins的domain複製起來，替換掉’your.ci.domain’。接著進入要刪除的專案與branch，複製專案名稱與branch名稱，替換掉’my-repo’與’development’。

接著，看看畫面左下的建置號碼。目前最新的是85，假設我想刪掉1~84，我就把後面的1, 300替換成1, 85

接下來，打開瀏覽器console，把這段改好的code貼入console按下Enter即可。fetch的地方我用非同步的方式，是因為想讓一筆刪完後，在刪除下一筆。雖然會比較花時間，但數量一多才不會灌爆Jenkins。接下來只要等待刪完時彈出的「刪除完畢」視窗就大功告成了！

AI歌聲生成手把手教學

有聽了陳珊妮的「教我如何做你的愛人」了嗎？

協助這首曲子的Vocal的大功臣 AI Labs.tw 台灣人工智慧實驗室釋出了體驗平台，讓大家可以自己生成自己的創作。

這個平台有兩個模式，一般版模式比較屬於好玩的版本，只要輸入歌詞，AI會幫你作曲然後唱出來。專業模式的話，就需要一點專業能力，需要先用Midi做主旋律，然後便可以讓AI依照自己作的曲來唱出歌詞。

如果沒有安裝Midi軟體，可以用這個網頁版的，也算是不難用。確認曲速後，可以打開節拍器，然後把音符標好。

需要注意音符不可重疊，並適當留空白給予呼吸。雖然AI生成平台限定了音域範圍在48-84之間，也就是C3-B5之間，超過這個範圍會生成失敗。但是經過實測後，我發現只要是C5以上的音符，都會走音，男女聲都一樣。

接下來，本來以為可以調整每個音符的Volume，想說這樣AI唱出來就會更具有真實感，不過實測之後發現對歌聲生成AI並沒有用。不過還是可以稍微看一下這個線上版的Midi軟體可以調整哪些東西。

下方頁籤最左邊的Velocity是用來調整單一音符的音量，把頁籤切換到Volume頁簽的話，就可以像GarageBand一樣直接用畫的。然後這個網頁版的Midi軟體竟然連Pan, Pitch Bend, 研音踏板都可以設定，一樣都可以直接用畫的。但測試後目前AI對這些設定似乎都唱不出來，所以這個階段就先不用白做工了。

一切都搞定後，我們就可以把Midi匯出成檔案了。選擇左上方的 File -> Download MIDI File，點選後，.mid就會下載到電腦中。

進入專業版的歌聲生成平台，我們主要要準備的Input就是Step1的Midi檔跟Step2的歌詞

我們把剛剛輸出的Midi拖拉進左邊Step1下的方格。把歌詞填入Step2下方的文字框。這邊要注意一下，因為一個音符需要配一個文字，可以透過Step1下方的音符與歌詞字數統計，來確認一下是否有少。

我們可以從Step3這裡的音符表來確認，歌詞是否都有對應到我們設定的音符上

一切都確認無誤後，我們就來決定要怎樣的Vocal吧。目前平台上只有男生跟女生各一的選項可選。

選取完成後，按下「合成音檔並下載」就完成拉！

下面是剛剛我做的範例的男聲版與女聲版，真的真假難辨，連呼吸聲都有。硬要挑一些小細節的話，可能就只有拉長音的時候，偶爾會出現一點聽起來不太自然的抖動。

最後我把女生改成合音，再把兩個聲音放進去GarageBand，加上其他樂器後，就完成拉～

運命の人 – 槇原敬之 歌詞翻譯

作詞：槇原敬之 作曲：槇原敬之

残念な事に君は
僕の友人に恋してて
彼の事を聞きだそうと
誘われた焼き鳥屋を出た所
帰り道が同じ方向で
送ってけるのは嬉しいけれど
家の前に来ると改まって
礼を言う君がいつも少し寂しい

很遺憾
你愛上我的朋友
你想打聽他的事情
所以約我來串燒店，出去的時候
雖然因為回家的方向一樣
可以送你回家我很開心
但來到你家門前時
突然變得很正經地向我道謝的你，總是有點落寞

君が時々ぼんやり
遠くを見てため息付いてる
気持ち痛いほどわかる
君の事考えている僕と同じだ

你常常心不在焉
看著遠方嘆氣
內心的痛楚我了解
正在思考著你的事情的我也是

他の誰かの事を
好きだと知った後でも
いきなり嫌いになれるはずもなく
当面は君を好きなまま
ハシカみたいな恋だったと
笑える時が来るのかな
それともこのまま
一人で君を想いながら
年を取って行くのかな

就算知道你喜歡別人之後
我也應該無法突然討厭你
目前我還是喜歡你
我覺得像麻疹一般的戀情
能微笑的那天會到來吧
亦或是依然像現在這樣
一個人想著你
然後慢慢變老呢

見送る道のウィンドウは
秋冬の服を着せられた
マネキンが並んでいて
ダブって僕らが映っている
こういう時どう思うの？とか
どっち貰う方が嬉しいの？とか
男心のサンプリングに
必死な横顔に笑えた

送你離開的路上的櫥窗
有著被穿上秋冬裝的模特兒假人排列著
剛好映在我們的反光身上
這種情況男生會怎麼想？之類的
得到哪個東西男生會開心呢？之類的
你拼命地調查著男人的內心的側臉讓我笑了

はぐらかす事も出来るけど
真面目に答えてしまうのは
君の恋が上手く行けばいいとも思う
僕もいるから

我也可以轉移話題
但我不小心誠實地回答了
因為我也希望你的戀情可以順利
戀愛麻煩的地方就在於，每次遇到一個人
我都會覺得這個人一定就是對的人

他の誰かの事を
好きだと知った後でも
いきなり嫌いになれるはずもなく
当面は君を好きなまま
この人こそがきっと
運命の人に違いないと
出会うその度に
思ってしまうのが
恋のやっかいな所だ

就算知道你喜歡別人之後
我也應該無法突然討厭你
目前我還是喜歡你
我說「因為是這個人，所以一定是對的人沒錯（一直很想翻成真命天子）」
戀愛麻煩的地方就在於，我都會不小心想起那次見面的事

夏の終わりの匂いがする
風が今日この街に吹いた
移ろう季節の中で
僕は移ろわない気持ちもてあましている
ハシカみたいな恋だったと
笑える時が来るのかな
それともこのまま
一人で君を想いながら
年を取って行くのかな

聞起來有夏天要結束的味道的風
今天吹著這個小鎮
季節轉換之中
我難以處理我還沒換季的心情
我覺得像麻疹一般的戀情
能微笑的那天會到來吧
亦或是依然像現在這樣
一個人想著你
然後慢慢變老呢

まぁ　たぶんそれはないよな
ちゃんと気付けるかな
運命の人と会ったら
君だったらいいのに

大概不會那樣吧
如果遇到對的人
我應該不會錯過吧？
如果那個人是你就好了

我がままなハイヒール – 秋元薫 歌詞翻譯

作詞：秋元薫 作曲：鳥山雄司

我がままなハイヒール
気ままな方よ私
女心はきっと
秋の空より Magical
気にするのやめなさい　噂もなんでもない
危ない夜　私にかかればきっと Paradise

任性的高跟鞋
我很做自己呦
女人心一定比變化無窮的秋天的天空還魔幻
不用擔心，謠言我無所為
把危險的夜晚交給我的話，絕對是天堂

街を歩いていても
みんな私に　Fall In Love
ちょっと Wink をすれば
こわいもの何にもない
からかってただけなのに　本気であわてないでね
眠ってた街のあかり　今に輝き出す

即使只是走在街上
大家都會愛上我
稍微眨眨眼的話
沒什麼可怕的東西
我明明只是鬧你的，不要太驚慌耶
沈睡的街燈，現在開始閃耀

いつでも恋をしたいの　ねぇ Darling！
向う見ずで我がままだわ　誰か早く
つかまえて私を

親愛的，我無論何時都想戀愛
我魯莽又任性呀
誰快來抓住我

気まぐれなハイヒール
気が強いのよ私

反復無常的高跟鞋
我很不服輸的呦

ただのゲームにしても
負けるのが嫌いなのよ
その気なら勝負していい　何賭けるつもり？
ただの Cardも　私にかかればみんな Joker

就算只是玩遊戲
我也討厭輸
你想要的話，要來輸贏一下嗎？你要賭什麼呢？
只是一般的撲克牌，交給我的話大家都變鬼牌

いつでも恋をしたいの　ねぇ Darling！
ときめいてはじけてるわ　誰か早く
しかけてよ私に

親愛的，我無論何時都想戀愛
內心澎湃到炸裂了呀
快來找我

いつでも恋をしたいの　ねぇ Darling！
向う見ずで我がままだわ　誰か早く
つかまえて私を

親愛的，我無論何時都想戀愛
我魯莽又任性呀
誰快來抓住我

いつでも恋をしたいの　ねぇ Darling！
ときめいてはじけてるわ　誰か早く

親愛的，我無論何時都想戀愛
內心澎湃到炸裂了呀
誰快點⋯⋯

いつでも恋をしたいの　ねぇ Darling！
I just wanna be the special
misty lady.
Say you love me again.

親愛的，我無論何時都想戀愛
我只想當個特別的神秘女子
再說一次你愛我