はじめに

NativeScript で Skeleton Screen を表示する方法。

TL;DR

  • CSS で Skeleton Screen のアニメーションを作成
  • Skeleton Screen を表示したい箇所に↑のクラスを適用
  • 実レイアウトにあわせて width, height, border-radius などを調整
  • 本物のコンテンツを表示する際に Skeleton Screen は非表示にする
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. 前置き: Skeleton Screen とは
    2. 本題: NativeScript で Skeleton Screen を表示
  5. まとめ
  6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.5
BuildVersion:	19F101

$ node -v
v12.7.0

$ npm -v
6.14.5

$ tns --version
6.7.8

$ grep -C1 version package.json
"tns-android": {
  "version": "6.5.1"
},
"tns-ios": {
  "version": "6.5.1"
}

$ tns plugin
Dependencies:
┌───────────────────────────────┬─────────────────────┐
│ Plugin                        │ Version             │
│ @nativescript/theme           │ ^2.2.1              │
│ @vue/devtools                 │ ^5.0.6              │
│ nativescript-socketio         │ ^3.2.1              │
│ nativescript-toasty           │ ^1.3.0              │
│ nativescript-vue              │ ^2.4.0              │
│ nativescript-vue-devtools     │ ^1.2.0              │
│ tns-core-modules              │ ^6.0.0              │
└───────────────────────────────┴─────────────────────┘
Dev Dependencies:
┌────────────────────────────────────┬─────────┐
│ Plugin                             │ Version │
│ @babel/core                        │ ^7.0.0  │
│ @babel/preset-env                  │ ^7.0.0  │
│ babel-loader                       │ ^8.0.2  │
│ nativescript-dev-webpack           │ ^1.0.0  │
│ nativescript-vue-template-compiler │ ^2.0.0  │
│ nativescript-worker-loader         │ ~0.9.0  │
│ node-sass                          │ ^4.9.2  │
│ vue-loader                         │ ^15.4.0 │
└────────────────────────────────────┴─────────┘

詳細

前置き: Skeleton Screen とは

以下のような本物のコンテンツが表示されるまで代わりに表示されているやつ。

See the Pen Skeleton Screens by Aimee (@aimeeotsu) on CodePen.

> https://codepen.io/aimeeotsu/pen/rLzrJR より

Facebookなどで使われているローディングの名称を知ってる？ / 調べたらたくさんありすぎた話 - omuriceman’s blog によると、他にも呼び方がある。

  • Skeleton Screen
  • Skeleton Placeholder
  • Skeleton Loader
  • Content Loader
  • Content Placeholder
  • Placeholder

主流は Skeleton Screen や Content Loader とのこと。

本題: NativeScript で Skeleton Screen を表示

参考: NativeScript ListView Skeleton Screens with Angular & RxJS ☠️ - DEV

上記の実装内容を参考にした。(というか、CSS はそのままコピーしてる)

以下は NativeScript-Vue での実装例。

app/app.scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.skeleton {
  animation-name: skeleton-animation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes skeleton-animation {
  0% {
    background-color: #eeeeee;
  }
  50% {
    background-color: #d1d1d1;
  }
  100% {
    background-color: #eeeeee;
  }
}

xxxx.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
  <Page>
    <StackLayout @loaded="onLoaded">
      <Label class="skeleton" height="20" v-if="loading" />
      <Label text="hello" height="20" v-else />
    </StackLayout>
  </Page>
</template>

<script >
  export default {
    data() {
      return {
        loading: true,
      }
    },
    methods: {
      onLoaded() {
        // Skeleton Screen を出したり引っ込めたり
        setInterval(() => this.loading = !this.loading, 3000);
      },
    },
  }
</script>

動作イメージ(上: Anrdroid, 下: iOS)

あとは表示したい内容(レイアウト)にあわせて width, height, border-radius などの指定、本物のコンテンツを表示したいタイミングでの切り替えを実際のプロダクトに適用すれば OK。

まとめ

  • CSS で Skeleton Screen のアニメーションを作成
  • Skeleton Screen を表示したい箇所に↑のクラスを適用
  • 実レイアウトにあわせて width, height, border-radius などを調整
  • 本物のコンテンツを表示する際に Skeleton Screen は非表示にする

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list