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

【WEBアニメーション】RiveをWordPressで使用する方法 Rive
Rive
当ページのリンクには広告が含まれています。
320
320

こんにちは。
320(@320megane)です。

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

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

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

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

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

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

この記事の対象者
  • WordPressにアニメーションを追加したい方
  • RiveをWordPressで使用したい方
  • Riveのアニメーションに興味がある方
320
320

難しいんでしょ…?

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

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

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

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


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

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

月額99円から。WordPressも簡単にインストールできるレンタルサーバー


  • 2023年9月1日
    料金改定に伴い、無料プランに機能制限
  • 2023年12月
    無料プランのウォーターマーク撤廃
  • WordPressでRive(無料)を利用する場合
    • 機能制限としてShareLinkは不可
    • ランタイム方式は可能
  • <詳細>
    こちらのページにまとめてあります
本記事の信頼性
  • AndroidアプリDevOpsエンジニア
  • 個人開発アプリのリリース経験
スポンサーリンク

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

Riveとは

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

Q
Riveってなんですか?
A

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


Riveダウンロード

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

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

Riveの特徴

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

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

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

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

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

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

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


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

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

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

RiveをWordPressで表示させる

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

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

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

ウォーターマークについて

2023年9月1日
料金改定と合わせて無料プランでは、ウォーターマーク(Riveのロゴ)付きの制限が加わりましたのでご注意ください。

2023年12月
ウォーターマークの条件は撤廃されました。

WordPressとRiveのまとめ

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

WordPressでRiveを利用する2種類の方法を紹介しました。

記事の振り返り
※ クリックで項目へ戻れます

WordPressのデザインをレベルアップさせる
RiveのWebアニメーション。

是非、チャレンジしてみて下さいね。

タイトルとURLをコピーしました