記一次在Ubuntu 20.04上玩FF14的經驗

註:本篇文章編寫時用的是Ubuntu 20.04,但理論上應該20.04 之後版本,甚至Steam Deck都適用文中提到的方法。

最近買了一塊外接1TB的SSD硬碟,然後在上面安裝了Ubuntu 20.04--運行速度不但比裝在HDD時快多了,還能體驗大容量硬碟空間帶來的安全感,實在太爽了!
然而跟Windows不一樣,Linux很少會累積太多的垃圾檔案,而我的重要檔案又基本都放在HDD上,所以1TB的空間其實在正常使用的情況下實在是略多了一點。

於是我就開始嘗試挑戰在Linux上玩遊戲了!

眾所周知,雖然現在Linux 上原生的遊戲已經十年前多很多,但相對來說依然是九牛一毛。然而多虧了Staem Deck的存在,現在用Wine 玩Windows 遊戲也是一個非常理想的選擇了!而我第一款挑戰的遊戲,就是我目前最愛的網絡遊戲--FF14。

實現的方法很簡單:

1. 確認系統已經安裝最新版的顯示卡驅動程式。

我個人使用的顯卡為AMD,Nvdia的我並不太清楚安裝方法,以及運行FF14時的效果…抱歉;)

要下載AMD的最新顯卡驅動,需要前往官方網站尋找對應顯卡的型號,再下載驅動程式安裝器(Radeon™ Software for Linux® installer):

https://www.amd.com/zh-hant/support/graphics

安裝過後,在命令行裡輸入:

amdgpu-install

安裝完成後重啟電腦即可。

2. 前往Flathub,下載並安裝名為XIVLauncher 的第三方啟動器。這是一個基於GPLv3 的自由軟件,請放心使用 🙂

https://flathub.org/apps/details/dev.goats.xivlauncher

要安裝Flathub上提供的軟體,需要先安裝Flatpak:

sudo add-apt-repository ppa:flatpak/stable
sudo apt update
sudo apt install flatpak

3.安裝完成後,啟動XIVLauncher,並輸入你的FF14帳號及密碼,點擊登入。(注意:如果你購買的是Steam版的FF14,請先啟動Steam,並將”Use Steam service” 打勾)

4.登入後,如果你是第一次使用XIVLauncher,它會開始在你的電腦上安裝對應的Wine版本,並且下載及安裝最新版本的FF14。

5.安裝完成後,你就可以經由XIVLauncher啟動FF14,並如同Windows上那樣遊玩了。Have Fun!

有時侯在經XIVLauncher啟動FF14時,有可能會出現明明啟動了卻沒有反應的情況,請不要慌張:你只要重啟XIVLauncher,再Login一次就可以了。 祝大家在艾歐澤亞過得快樂!

解決Ubuntu 20.4 Deepin Wine QQ登入即當機的問題

(本篇已經過期,關於如何在Ubuntu上取得最新可用版的QQ,請參考以下文章:
https://zhuanlan.zhihu.com/p/428285559

自從因為一些私人原因每天都要用到QQ後,這玩意就成為了我用Linux時永遠的痛。
以前還有完美的WebQQ可以使用,現在沒有這個選項了。那麼到底該怎麼辦呢?你說用虛擬機吧,肯定不會出任何BUG,但Windows10佔的記憶體是真的太多了遭不住。
用第三方QQ客戶端吧,功能也挺完美的,但是討論組沒法正常用。

最後還是得投靠Deepin Wine上的QQ,但這玩意前陣子在更新後也沒有辦法正常運行了--只要一登入就會當住,閃退,根本沒法用。

最後的解決方案是這樣的:

1. 按照Github上的教程安裝Deepin-wine-ubuntu。
https://github.com/wszqkzqk/deepin-wine-ubuntu

2. 下載並安裝舊版的QQ軟體包:
wget https://gitee.com/wszqkzqk/deepin-wine-containers-for-ubuntu/raw/master/deepin.com.qq.im_9.1.8deepin0_i386.deb
sudo dpkg -i deepin.com.qq.im_9.1.8deepin0_i386.deb

3. 登出系統並重新登入。

4. 如同平常那樣使用Deepin QQ-看,成功了!

有夠蠢的。

Ubuntu 20.04 Spotify無法播放本地音樂問題

一開始以為Ubuntu20.04不能播放本地音樂是資料夾問題,結果一查才發現原來只是缺少了某些Library罷了。 

首先安裝必要的軟體:

sudo apt install ubuntu-restricted-extras ffmpeg

下載Spotify提供的Library並複製檔案至:

git clone https://github.com/ramedeiros/spotify_libraries.git
cd spotify_libraries
sudo cp lib* /usr/lib/x86_64-linux-gnu/

執行ldconfig:

sudo ldconfig
#修正檔案連結
sudo ln -frs /usr/lib/x86_64-linux-gnu/libavutil.so.52.6.100 /usr/lib/x86_64-linux-gnu/libavutil.so.52
sudo ln -frs /usr/lib/x86_64-linux-gnu/libavformat.so.54.36.100 /usr/lib/x86_64-linux-gnu/libavformat.so.54
sudo ln -frs /usr/lib/x86_64-linux-gnu/libavcodec.so.54.71.100 /usr/lib/x86_64-linux-gnu/libavcodec.so.54

 完成。其實我也只是照樣參考資料寫的,這個解法… 

參考資料:

https://community.spotify.com/t5/Desktop-Linux/Linux-Local-files-do-not-play-on-Ubuntu-16-04-SOLVED/td-p/1343831

Ubuntu 18.04解決無法使用VirtualBox共享剪貼簿的問題

裝在VirtualBox裡的Ubuntu18.04之所以辦法共享剪貼簿,是因為缺少了名為virtualbox-guest-x11的套件。 

照樣安裝VirtualBox Guest Addition後,再打開終端機輸入指令安裝此套件:

sudo apt-get update
sudo apt-get install virtualbox-guest-x11

遇到版本相容性提示訊息時,選擇安裝新版本。

再手動啟用共享剪貼簿功能即可:

sudo VBoxClient --clipboard

Drupal 8 在/admin/config頁面下新增分類

首先在自訂模組的links.menu.yml(例如your_custom_module.links.menu.yml)下新增以下內容:

system.admin_config_new:
title: 'My New Config'
route_name: system.admin_config_new
parent: system.admin_config

然後再在routing.yml(例如your_custom_module.routing.yml)新增內容:

system.admin_config_new:
  path: '/admin/config/new'
  defaults:
    _controller: '\Drupal\system\Controller\SystemController::systemAdminMenuBlockPage'
    _title: 'My New Config'
  requirements:
    _permission: 'access administration pages'

清除緩存後即會生效。

以上代碼中請將自行將route名改為想要的名字,path和title同理。

Node Sass Watch不能正常使用的暫時代替方案

不知為何自從node-sass升級後,-w的選項就一直沒有生效過--能執行成功,但無法偵測指定Sass/Scss檔案的修改,這樣在無法使用IDE(例如在伺服器作業)的情況下編譯檔案會變得有點麻煩。

目前想到的解決方法是改用Gulp 監視檔案修改,有點麻煩但最少有效。

  1. 安裝gulp和gulp-sass:
npm install gulp gulp-sass
yarn add gulp gulp-sass

2.創建gulpfile.js,輸入以下內容:

vi gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass');

gulp.task('watch', function () {
  gulp.watch('./css/*.scss', gulp.series('build:scss'));
});

gulp.task('build:scss', function() {
    return gulp.src('./css/style.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css/'));
});

3.在Package.json加入Watch指令:

  "scripts": {
    "watch": "./node_modules/.bin/gulp watch"
  }

4.想要編譯Sass/Scss檔案時,運行Watch指令:

npm run watch
yarn watch

完成。逃避可恥但有用,對吧?

如何在使用Let’s Encrypt + Nginx 重定向的情況下避免CORS問題?

用Fetch抓取和傳輸資料雖然很方便,也遇上CORS問題的時侯就笑不出來了。查資料加上除錯了一整晚,最後終於知道要如何在API 使用Let’s Encrypt重定向的時侯到底要怎樣避免CORS問題。

首先,要在後端程式加上Access-Control-Allow-Origin的Header。這應該大家都知道了,但還是提醒一下這個是基礎第一步喔。以PHP為例子:

header("Access-Control-Allow-Origin: *");

之後你可能會發現:咦?為什麼我設定了Access-Control-Allow-Origin,還是會出現同樣的問題呢?原因非常簡單:CORS不接受2xx以外的Staus Code回應!

用Fetch POST JSON時,瀏覽器會先發出OPTION的請求。這時Nginx如果不好好處理,就會給出405回應,導致問題發生。

所以我們要在Nginx的設定裡加上這個:

location / {  
    if ($request_method = 'OPTIONS') {
        return 204;
    }
} 

重啟Nginx後就能解決問題了。

順便提醒一下,前端的Code也需要注意在CROS模式下Fetch的時侯不能帶Header,否則一樣會出現問題喔。嚶嚶嚶。

  fetch(apiUrl, {
      body:JSON.stringify({
        width: 500,
        height: 300,
        imageUrl: imgUrl,
      }),
      mode: 'cors',
      method: 'POST',
    })

鳴謝Front-End Developers Taiwan翁傳翔林坤南先生指出文中問題!

如何讓遠端伺服器使用自己電腦上的SSH Key?

習慣用Git在伺服器上部署網站後,已經不想再用FTP或者SFTP這麼老套的方法來做事了。

不過如果想用SSH的方法訪問Git,很多時侯我們需要先為伺服器準備獨立的KEY,這樣實在有點麻煩。其實最好的方法是使用SSH Agent Forwarding讓遠端伺服器也能使用你電腦原來的金鑰,做法也非常簡單。

首先,新建/修改你電腦上的~/.ssh/config檔案 ,新增以下內容:

Host your_server
HostName server.com
user root
ForwardAgent yes

Host是你設定的伺服器名稱,請隨意修改。HostName則是你的伺服器網址/IP,user是指定的伺服器用戶,至於ForwardAgent就是本次的重點,請務必設定為yes。

完成後,輸入以下指令檢查目前Agent是否正使用你的Key:

ssh-add -L

否則輸入指令:

ssh-add -K

完成後再次登入你的伺服器:(請使用之前設定的伺服器名稱登入,否則不會生效)

ssh your_server

想知道更多關於ForwardAgent的資料,可以查看以下參考網站:

SSH agent forwarding 的應用

Javascript 如何比對Object是否相同(Equal)

在沒有Key或者Id的情況下,比對Object真的是世界上最噁心的一件事情了。

最簡單的方法是這個:

const object1 = {"Name": "Hello"};
const object2 = {"Name": "Hello"};

if(JSON.stringify(object1) === JSON.stringify(object2)){
  return true;
}

很簡單對吧?然而世界沒有那麼美好。更多時侯你會遇到這種情況:

const object1 = {"Sex": "Girl", "Name": "Hello"};
const object2 = {"Name": "Hello", "Sex": "Girl"};

這種時侯用上一種方法是會Return False,失敗的。手寫排序Function是一種處理方法,但工時不足的情況下可以考慮用Sort Object這個模組解決問題:

https://github.com/doowb/sort-object
const sortObj = require('sort-object');
const object1 = sortObj({"Sex": "Girl", "Name": "Hello"});
const object2 = sortObj({"Name": "Hello", "Sex": "Girl"});

if(JSON.stringify(object1) === JSON.stringify(object2)){
  return true;
}

好了,輕鬆搞定。如果遇到更複雜的情況,需要深度比對的話,那就需要另一個名為Deep Equal的模組了。

https://github.com/substack/node-deep-equal
const sortObj = require('sort-object');
const equal = require('deep-equal');
const object1 = sortObj({"Sex": "Girl", "Name": "Hello"});
const object2 = sortObj({"Name": "Hello", "Sex": "Girl"});

if(equal(object1) === equal(object2)){
  return true;
}

過於依靠他人的模組是不好的事,但這是最簡單和最快的方法了。有空的時侯再研究一下怎麼手寫出同樣的功能吧!

◢▆▅▄▃崩╰(〒皿〒)╯潰▃▄▅▇◣

Mastodon Docker 更新版本教簡易教學

要用Docker架設Mastodon並不困難,要升級更加不難,但當初官方寫的教學文檔好像已經很久沒更新了,所以還是寫一寫吧。

要升級Docker版Mastodon,首先要進入你的Mastodon資料夾,運行以下指令:

cd <你的Mastodon資料夾路徑>
git fetch && git checkout <目前最新版本,例如v2.7.3>

Git Checkout能讓你的Mastodon代碼馬上更新到指定版本。但Docker裡的代碼並不會隨之更新,所以我們還需要用Docker Compose重建Image,最後重啟Container即可:

docker-compose build
docker-compose up -d

一般來說,到了這個步驟一切就已經大公告成。可是某些比較大型的更新需要更新資料庫或其他額外步驟,建議參閱Mastodon更新日誌裡的Upgrade notes。

https://github.com/tootsuite/mastodon/releases
空氣力學