スポンサースポンサーになる

ユーティリティ

Framework7 ユーティリティは、内部で使用されるヘルパーメソッドのセットであり、開発中にも役立ちます。

Framework7 クラスの `utils` プロパティ (`Framework7.utils`) と、初期化されたアプリインスタンスの同じプロパティ (`app.utils`) として利用できます。

// If we need it in place where we don't have access to app instance or before we init the app
var now = Framework7.utils.now();


// After we init the app we can access it as app instance property
var app = new Framework7({ /*...*/ });
var now = app.utils.now();

ES モジュールを使用してインポートすることもできます。

import { utils } from 'framework7';

ユーティリティメソッド

parseUrlQuery()

app.utils.parseUrlQuery(url)- URLクエリのGETパラメータを解析します

  • url - 文字列 - GETパラメータ付きのURL。必須です。

メソッドはクエリパラメータを持つオブジェクトを返します

var query = app.utils.parseUrlQuery('http://google.com/?id=5&foo=bar');
console.log(query); // { id: 5, foo: 'bar' }

serializeObject()

app.utils.serializeObject(object)- URLクエリ文字列で使用できるプレーンオブジェクトのシリアライズされた表現を作成します

  • object - オブジェクト - シリアライズするオブジェクト

新しいユニークな配列を返します

var params = { foo: 'bar', id: 5 };
console.log(app.utils.serializeObject(params)); // 'foo=bar&id=5'

requestAnimationFrame()

app.utils.requestAnimationFrame(callback)- requestAnimationFrameのクロスブラウザ実装

  • callback - 関数 - 次の再描画のためにアニメーションを更新するタイミングで呼び出す関数

コールバックリストのエントリを一意に識別するアニメーションリクエストIDを返します

var animId;
function anim() {
  var left = parseInt($$('#anim').css('left'), 10) + 1;
  $$('#anim').css({left: left + 'px'})
  animId = app.utils.requestAnimationFrame(anim);
}
animId = app.utils.requestAnimationFrame(anim);

cancelAnimationFrame()

app.utils.cancelAnimationFrame(requestID)- アニメーションフレームリクエストをキャンセルします

  • requestID - 数値 - コールバックをリクエストした app.utils.requestAnimationFrame() の呼び出しによって返された ID 値
app.utils.cancelAnimationFrame(animId);

nextFrame()

app.utils.nextFrame(callback)- 次に使用可能なアニメーションフレームでコードを実行します。

  • callback - 文字列 - 次の再描画のためにアニメーションを更新するタイミングで呼び出す関数。
app.utils.nextFrame(function() {
  // do something on next frame
});

nextTick()

app.utils.nextTick(callback, delay)- 必要な遅延後にコードを実行します。基本的に `setTimeout` のエイリアスです

  • callback - 文字列 - 指定された遅延後に呼び出す関数
  • delay - 数値 - 遅延（ミリ秒）。 *オプション、デフォルトは `0` です*

タイムアウトIDを返します

app.utils.nextTick(function() {
  // do something on next tick
});

now()

app.utils.now()- 現在のタイムスタンプをミリ秒単位で返します

var now = app.utils.now();
setTimeout(function () {
  var timeDiff = app.utils.now() - now;
  console.log(timeDiff + 'ms past');
}, 2000);

extend()

app.utils.extend(target, ...from)- `from` オブジェクトのプロパティとメソッドで `target` オブジェクトを拡張します

  • target - オブジェクト - 拡張するターゲットオブジェクト
  • from - オブジェクト - プロパティとメソッドをコピーするオブジェクト

拡張されたプロパティとメソッドを持つターゲットオブジェクトを返します

このメソッドは、1つのオブジェクトを他のオブジェクトのプロパティで拡張する必要がある場合、またはオブジェクトのディープコピーが必要な場合に非常に便利です。

var a = {
  apple: 0,
  cherry: 97
};
// Pass as empty object as target to copy a into b
var b = app.utils.extend({}, a);

console.log(b); // { apple: 0, cherry: 97 }
console.log(a === b); // false
var a = {
  apple: 0,
  cherry: 97
};
var b = {
  banana: 10,
  pineapple: 20,
}

// Extends a with b
app.utils.extend(a, b);

console.log(a); // { apple: 0, cherry: 97, banana: 10, pineapple: 20 }
var a = {
  apple: 0,
  cherry: 97
};
var b = {
  banana: 10,
  pineapple: 20,
}

// Create new object c from the merge of a and b
var c = app.utils.extend({}, a, b);

console.log(c); // { apple: 0, cherry: 97, banana: 10, pineapple: 20 }
var a = {
  apple: 0,
  cherry: 97
};
var b = {
  apple: 10,
  pineapple: 20,
}

// Extend a with b
app.utils.extend(a, b);

console.log(a); // { apple: 10, cherry: 97, pineapple: 20 }

uniqueNumber()

app.utils.uniqueNumber()- 呼び出すたびに1ずつ増加するユニークな数値を返します

app.utils.uniqueNumber(); // -> 2

app.utils.uniqueNumber(); // -> 3

app.utils.uniqueNumber(); // -> 4

id()

app.utils.id(mask, map)- ランダムなIDのような文字列を生成します

  • mask - 文字列 - ID文字列マスク、デフォルトは `xxxxxxxxxx` です
  • map - 文字列 - 生成に使用される文字、デフォルトは `0123456789abcdef` です

ランダムに生成された文字列を返します

app.utils.id() // -> ffe28ab56e

app.utils.id('xxxx-xxxx-xxxx-xxxx') // -> 1ea3-f127-dc67-627d

app.utils.id('xxxx-xxxx', 'abcd') // -> aabc-ccda

プリローダーコンテンツ

プリローダー要素のテーマ関連（iOS、MD）コンテンツを含むプロパティがあります。 これらのプロパティは、プリローダーを動的に作成する場合に役立ちます。

app.utils.iosPreloaderContent- iOSテーマに必要なプリローダー内部コンテンツ（HTML文字列）が含まれています

app.utils.mdPreloaderContent- MDテーマに必要なプリローダー内部コンテンツ（HTML文字列）が含まれています

// call method dynamically based on current app theme
var preloaderContent = app.utils[app.theme + 'PreloaderContent'];

// create required preloader content
var myPreloader = '<div class="preloader">' + preloaderContent + '</div>';

// add it somewhere
$('.something').append(myPreloader);

colorHexToRgb()

app.utils.colorHexToRgb(hexColor)- HEXカラーをRGBカラーに変換します

  • hexColor - 文字列 - HEXカラー文字列

`[R, G, B]` 配列を返します

app.utils.colorHexToRgb('#f00') // -> [255, 0, 0]

colorRgbToHex()

app.utils.colorRgbToHex(R, G, B)- RGBカラーをHEXカラーに変換します

  • R - 数値 - 赤の値（0〜255）
  • G - 数値 - 緑の値（0〜255）
  • B - 数値 - 青の値（0〜255）

HEXカラー文字列を返します

app.utils.colorHexToRgb(255, 0, 0) // -> '#ff0000'

colorRgbToHsl()

app.utils.colorRgbToHsl(R, G, B)- RGBカラーをHSLカラーに変換します

  • R - 数値 - 赤の値（0〜255）
  • G - 数値 - 緑の値（0〜255）
  • B - 数値 - 青の値（0〜255）

`[H, S, L]` 配列を返します

app.utils.colorRgbToHsl(255, 0, 0) // -> [0, 1, 0.5]

colorHslToRgb()

app.utils.colorHslToRgb(H, S, L)- HSLカラーをRGBカラーに変換します

  • H - 数値 - 色相の値（0〜360）
  • S - 数値 - 彩度の値（0〜1）
  • L - 数値 - 明度の値（0〜1）

`[R, G, B]` 配列を返します

app.utils.colorHslToRgb(0, 1, 0.5) // -> [255, 0, 0]

colorHsbToHsl()

app.utils.colorHsbToHsl(H, S, B)- HSB(V)カラーをHSLカラーに変換します

  • H - 数値 - 色相の値（0〜360）
  • S - 数値 - 彩度の値（0〜1）
  • B - 数値 - 明るさの値（0〜1）

`[H, S, L]` 配列を返します

app.utils.colorHsbToHsl(360, 0.5, 0.5) // -> [360, 0.33, 0.375]

colorHslToHsb()

app.utils.colorHslToHsb(H, S, L)- HSLカラーをHSB(V)カラーに変換します

  • H - 数値 - 色相の値（0〜360）
  • S - 数値 - 彩度の値（0〜1）
  • L - 数値 - 明度の値（0〜1）

`[H, S, B]` 配列を返します

app.utils.colorHslToHsb(360, 0.5, 0.5) // -> [360, 0.66, 0.75]

colorThemeCSSProperties()

app.utils.colorThemeCSSProperties(hexColor)- 指定されたテーマカラーを設定するために必要なCSS変数を生成したオブジェクトを返します

  • hexColor - 文字列 - HEXカラー文字列

必要なCSS変数とその値を持つオブジェクトを返します。

app.utils.colorThemeCSSProperties(R, G, B)- 指定されたテーマカラーを設定するために必要なCSS変数を生成したオブジェクトを返します

  • R - 数値 - 赤の値
  • G - 数値 - 緑の値
  • B - 数値 - 青の値

必要なCSS変数とその値を持つオブジェクトを返します。

app.utils.colorThemeCSSProperties('#f00')
/* returns the following object:
{
  "ios": {
    "--f7-theme-color": "var(--f7-ios-primary)",
    "--f7-theme-color-rgb": "var(--f7-ios-primary-rgb)",
    "--f7-theme-color-shade": "var(--f7-ios-primary-shade)",
    "--f7-theme-color-tint": "var(--f7-ios-primary-tint)"
  },
  "md": {
    "--f7-theme-color": "var(--f7-md-primary)",
    "--f7-theme-color-rgb": "var(--f7-md-primary-rgb)",
    "--f7-theme-color-shade": "var(--f7-md-primary-shade)",
    "--f7-theme-color-tint": "var(--f7-md-primary-tint)"
  },
  "light": {
    "--f7-ios-primary": "#f00",
    "--f7-ios-primary-shade": "#d60000",
    "--f7-ios-primary-tint": "#ff2929",
    "--f7-ios-primary-rgb": "255, 0, 0",
    "--f7-md-primary-shade": "#970100",
    "--f7-md-primary-tint": "#e90100",
    "--f7-md-primary-rgb": "192, 1, 0",
    "--f7-md-primary": "#c00100",
    "--f7-md-on-primary": "#ffffff",
    "--f7-md-primary-container": "#ffdad4",
    "--f7-md-on-primary-container": "#410000",
    "--f7-md-secondary": "#775651",
    "--f7-md-on-secondary": "#ffffff",
    "--f7-md-secondary-container": "#ffdad4",
    "--f7-md-on-secondary-container": "#2c1512",
    "--f7-md-surface": "#fffbff",
    "--f7-md-on-surface": "#201a19",
    "--f7-md-surface-variant": "#f5ddda",
    "--f7-md-on-surface-variant": "#534341",
    "--f7-md-outline": "#857370",
    "--f7-md-outline-variant": "#d8c2be",
    "--f7-md-inverse-surface": "#362f2e",
    "--f7-md-inverse-on-surface": "#fbeeec",
    "--f7-md-inverse-primary": "#ffb4a8",
    "--f7-md-surface-1": "#fceff2",
    "--f7-md-surface-2": "#fae7eb",
    "--f7-md-surface-3": "#f8e0e3",
    "--f7-md-surface-4": "#f7dde0",
    "--f7-md-surface-5": "#f6d8db",
    "--f7-md-surface-variant-rgb": [245, 221, 218],
    "--f7-md-on-surface-variant-rgb": [83, 67, 65],
    "--f7-md-surface-1-rgb": [252, 239, 242],
    "--f7-md-surface-2-rgb": [250, 231, 235],
    "--f7-md-surface-3-rgb": [248, 224, 227],
    "--f7-md-surface-4-rgb": [247, 221, 224],
    "--f7-md-surface-5-rgb": [246, 216, 219]
  },
  "dark": {
    "--f7-md-primary-shade": "#ff917f",
    "--f7-md-primary-tint": "#ffd7d1",
    "--f7-md-primary-rgb": "255, 180, 168",
    "--f7-md-primary": "#ffb4a8",
    "--f7-md-on-primary": "#690100",
    "--f7-md-primary-container": "#930100",
    "--f7-md-on-primary-container": "#ffdad4",
    "--f7-md-secondary": "#e7bdb6",
    "--f7-md-on-secondary": "#442925",
    "--f7-md-secondary-container": "#5d3f3b",
    "--f7-md-on-secondary-container": "#ffdad4",
    "--f7-md-surface": "#201a19",
    "--f7-md-on-surface": "#ede0dd",
    "--f7-md-surface-variant": "#534341",
    "--f7-md-on-surface-variant": "#d8c2be",
    "--f7-md-outline": "#a08c89",
    "--f7-md-outline-variant": "#534341",
    "--f7-md-inverse-surface": "#ede0dd",
    "--f7-md-inverse-on-surface": "#362f2e",
    "--f7-md-inverse-primary": "#c00100",
    "--f7-md-surface-1": "#2b2220",
    "--f7-md-surface-2": "#322624",
    "--f7-md-surface-3": "#392b29",
    "--f7-md-surface-4": "#3b2c2a",
    "--f7-md-surface-5": "#3f302d",
    "--f7-md-surface-variant-rgb": [83, 67, 65],
    "--f7-md-on-surface-variant-rgb": [216, 194, 190],
    "--f7-md-surface-1-rgb": [43, 34, 32],
    "--f7-md-surface-2-rgb": [50, 38, 36],
    "--f7-md-surface-3-rgb": [57, 43, 41],
    "--f7-md-surface-4-rgb": [59, 44, 42],
    "--f7-md-surface-5-rgb": [63, 48, 45]
  }
}
*/
このドキュメントを改善する
このページの内容