Riveってなんですか？

デザイン・アニメーションを簡単に作成できるツール

Riveってなんですか？

デザイン・アニメーションを簡単に作成できるツール

【WEBアニメーション】RiveをWordPressで使用する方法

320

こんにちは。
320（@320megane）です。

マウスホバーしてみて下さい

グリグリできました？
スマホの方は是非、PCでも試してくださいね。

ところで…
あなたは、WordPressブログなどで
こんなこと思ったことありませんか？

何か特別な装飾で「差別化」したい

ブログ有料テーマでも簡単に達成できない装飾

それは…
「Webアニメーション」

この記事の対象者

WordPressにアニメーションを追加したい方
RiveをWordPressで使用したい方
Riveのアニメーションに興味がある方

320

難しいんでしょ…?

Webアニメーション…
あなたは作ったことがありますか？

作ったり表示させたりと…
何かとハードルが高い印象ですよね。

でも、実は簡単なんです。

他サイトとの差別化を図る為にも…
Webアニメーションを取り入れてみませんか？

「ブログ」始めてみませんか？

Rive学習のアウトプットで収益化も狙えるチャンスです。
低コストで始められる「ロリポップ」がおすすめです。

[PR]
▷ ロリポップ

2023年9月1日
料金改定に伴い、無料プランに機能制限
2023年12月
無料プランのウォーターマーク撤廃
WordPressでRive(無料)を利用する場合
- 機能制限としてShareLinkは不可
- ランタイム方式は可能
＜詳細＞
こちらのページにまとめてあります

本記事の信頼性

AndroidアプリDevOpsエンジニア
個人開発アプリのリリース経験

Riveでアニメーションを作成する
RiveをWordPressで表示させる
- Share Link
- ランタイム
WordPressとRiveのまとめ

Riveでアニメーションを作成する

Riveとは

Webアニメーションの作成は
「Rive」というツールを使用します。

Q Riveってなんですか？: A

デザイン・アニメーションを簡単に作成できるツール

【WEBアニメーション】初心者に「Rive」を勧める3つの理由

ブログやスマホアプリにwebアニメーションを採用する際は「Rive」がお勧め。 Riveは、1つのエディターでデザインからアニメーション、エクポートが可能です。 webアニメーションが未経験の方にもおすすめです。

Riveダウンロード

Riveは、ブラウザ上でも簡単に利用できます。

安定利用のためには…
デスクトップ版のダウンロードがお勧めです。

Rive Downloads

Use our familiar design and animation tools with our ground-breaking State Machine to create interactive motion graphics...

Riveの特徴

アニメーション制作の王道といえば
Adobeの「AfterEffects」ですよね。

RiveもタイムラインやキーフレームなどAfterEffectsの操作感と同様に操作できます。

Riveのスゴイところ

デザイン
- 他ソフトのファイルをアセット化
- 本格的なデザイン作成が可能
  - Bone機能やConstraintなど
アニメーション
- AE等と同等な操作感
- Listeners制御が可能
エクスポート
- 軽量なファイル
- プラットフォームの多様性
- ShareLink

たった1つのツールで完了できる

アプリ開発に使用したアニメーションを
プロモーション用のwebサイトでも利用する…

そんなことも簡単にできるのです。

Riveで作成したアニメーションをWordPressで使用する方法は、2つあります。

その技術を副業に使えていますか？

「何でも相談できるメンター」
あなたはいますか？

[PR] テックアカデミー無料メンター相談

RiveをWordPressで表示させる

2023年9月1日
料金改定に伴い、無料プランに機能制限
2023年12月
無料プランのウォーターマーク撤廃
WordPressでRive(無料)を利用する場合
- 機能制限としてShareLinkは不可
- ランタイム方式は可能
＜詳細＞
こちらのページにまとめてあります

RiveをWordPressで使用方法は…
「Share Link」と「ランタイム」の2つ。

Share Link

2023年9月1日
料金改定と無料プランの機能制限が追加
ShareLinkは、有料プランの契約が必要

Riveで生成した「Share Link」を…
HTMLに貼り付けるだけで完了です。

利用方法

WordPress x Rive ShareLink

STEP1
Rive
1. デザイン作成
2. アニメーション作成
3. エクスポート
  - ShareLink＞リンクを生成
  - Embed code
    
    コードスニペットをcopy
STEP2
WordPress
- カスタムHTMLにペースト

WordPress カスタムHTML記述例

<iframe style="border: none" width="100" height="100" src="https://rive.app/s/〇〇〇〇/embed" allowfullscreen></iframe>

センター表示にしています。

このリンクは…
生成時点のファイル凍結バージョンです。

内容に変更があった際は、再度取得する必要がありますのでご注意ください。

ランタイム

Rive runtimesとは

アプリ、ゲーム、ウェブサイトなどで制御するためのオープンソースライブラリ
エディターで設計されたファイルを再生、またはコードで操作

利用可能なエクスポート先

Web
iOS
Android
Windows
Flutter
React
React Native
C++
Defold
Tizen
Unity
Unreal

2023年12月現在、「ランタイム」が…
無料プランのRiveで作成したアニメーションをWordPressで使用する唯一の方法です。

作業としては…
少しだけ「Share Link」に比べて面倒です。

WordPressブログにRiveのボタンアニメーションを実装しよう！

WordPressブログにRiveのボタンアニメーションを実装する方法をまとめました。ボタンアニメーションを追加することでオリジナリティの確立と訴求性の向上を実現できます。この機会にアニメーション制作を始めてみませんか？

利用方法

WordPress x Riveランタイム

STEP1
Rive
1. デザイン作成
2. アニメーション作成
3. エクスポート(rivファイル)
  - Download＞For runtime
STEP2
WordPress
1. プラグイン追加(※1)
  - 「WP Add Mine Types」
2. 「WP Add Mine Types」設定
  - “riv = application/octet-stream”
  - 上記を追加項目に記述して保存
3. メディアの新規追加
  - rivファイルをアップロード
4. カスタムHTML
  - scriptタグでwebランタイムライブラリを使用する

※1：アップロード形式が限られているため

WordPress カスタムHTML記述例

<html>
  <head>
    <title>Rive Hello World</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>

    <script src="https://unpkg.com/@rive-app/canvas@2.7.0"></script>
    <script>
      const r = new rive.Rive({
        src: "〇〇〇〇.riv（ファイルのURL）",
        canvas: document.getElementById("canvas"),
        // artboard: "artboardの名前"
        // automaticallyHandleEvents: true, // Automatically handle OpenUrl events
        autoplay: true,
        stateMachines: "〇〇〇〇（stateMachinesの名前）",
        onLoad: () => {
          r.resizeDrawingSurfaceToCanvas();
        },
      });
    </script>
  </body>
</html>

参考：Rive Guide – Web(JS)

同一のRiveプロジェクトファイル内のアートボードを変更する際は、”artbord”名と”stateMachines”名を変えれば同じランタイム用ファイル(.riv)で利用可能（ファイルURLはDL毎に変更）です。
WordPressの同じページ上に複数のJavaScriptを含むカスタムHTMLウィジェットを配置すると、一部のウィジェットが正常に表示されないことがあります。
その際は、”canvas id”、”変数名”（”const r = …”の部分)、”該当箇所”を変更して試してみてください。