Qiitaに動画表示機能があるとしまして、その音量レベルとミュート設定を保存したり取り出すコードを人が使いやすいように書きました。
保存方法はWeb storageのLocal storageを使います。ブラウザのウィンドウやタブを閉じても永続的に保存されます。
StorageにはString型しか保存できないので、JSONファイルに変換してから保存します。
使い方は
App.js
const { Settings } = require('./Settings');
const settings = new Settings();
//Local storageに何も保存されていなければ初期設定を返します
console.log(settings.volumeLevel);//0.5が出力されます
//Local storageに保存します
settings.volumeLevel = 1.0;
//Local storageを読み込んで出力します
console.log(settings.volumeLevel);//1.0が出力されます
コードは
Settings.js
const APP_NAME = "QiitaVideo";
class Settings {
constructor() {
this._STORAGE_KEY = `${APP_NAME}Settings`;
this._DEFAULT_SETTINGS = {
volumeLevel: 0.5,
isMuted: false,
}
}
set volumeLevel(volumeLevel) {
this._setKeyValue("volumeLevel", volumeLevel);
}
get volumeLevel() {
return this._userSettings.volumeLevel;
}
set isMuted(isMuted) {
this._setKeyValue("isMuted", isMuted);
}
get isMuted() {
return this._userSettings.isMuted;
}
set _userSettings(userSettings) {
const storage = this._getStorage();
storage[this._STORAGE_KEY] = JSON.stringify(userSettings);
}
get _userSettings() {
const storage = this._getStorage();
const settingsJSON = storage.getItem(this._STORAGE_KEY);
//初めてlocalstorageを使用する場合は初期設定を返す
if (settingsJSON === null) return this._resetSettings();
let settings;
try {
settings = JSON.parse(settingsJSON);
} catch (e) {
console.error('ユーザー設定のJSONファイルが壊れています。');
console.warn('ユーザー設定を初期化します。');
return this._resetSettings();
}
//ユーザー設定の検証
if (!this._validateSettings(settings)) {
console.error('ユーザー設定のプロパティが一致しません。');
console.warn('ユーザー設定を初期化します。');
return this._resetSettings();
}
return settings;
}
_setKeyValue(key, value) {
const userSettings = this._userSettings;
userSettings[key] = value;
this._userSettings = userSettings;
}
_resetSettings() {
const storage = this._getStorage();
storage[this._STORAGE_KEY] = JSON.stringify(this._DEFAULT_SETTINGS);
return this._DEFAULT_SETTINGS;
}
_validateSettings(settings) {
const keys = Object.keys(this._DEFAULT_SETTINGS);
return keys.every(key => (key in settings));
}
_getStorage() {
try {
return window.localStorage;
} catch (e) {
console.error('Web storageを利用できません');
throw e;
}
}
}
module.exports = {
Settings,
APP_NAME,
};
最後に
英語字幕と日本語字幕を同時に表示させて英語学習が出来るChrome拡張機能を公開しました。
もしよければ使ってみてください。よろしくお願いいたします。
Hulu 同時字幕で英語学習
Netflix 同時字幕で英語学習