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

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

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

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

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

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

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

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

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

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

難しいんでしょ…?

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

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

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

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

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

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

[PR]
▷ ロリポップ

本記事の信頼性
  • AndroidアプリDevOpsエンジニア
  • 個人開発アプリのリリース経験
スポンサーリンク

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

Riveとは

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

Q
Riveってなんですか？
A

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

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

Riveダウンロード

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

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

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

Riveの特徴

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

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

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

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

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

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

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

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

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

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

RiveをWordPressで表示させる

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

  • 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

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

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

WordPressブログにRiveのボタンアニメーションを実装しよう！
WordPressブログにRiveのボタンアニメーションを実装する方法をまとめました。 ボタンアニメーションを追加することでオリジナリティの確立と訴求性の向上を実現できます。 この機会にアニメーション制作を始めてみませんか？
320megane.com
2024.02.07
利用方法
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 – Web(JS)
  • 同一のRiveプロジェクトファイル内のアートボードを変更する際は、”artbord”名と”stateMachines”名を変えれば同じランタイム用ファイル(.riv)で利用可能（ファイルURLはDL毎に変更）です。
  • WordPressの同じページ上に複数のJavaScriptを含むカスタムHTMLウィジェットを配置すると、一部のウィジェットが正常に表示されないことがあります。
    その際は、”canvas id”、”変数名”（”const r = …”の部分)、”該当箇所”を変更して試してみてください。

WordPressとRiveのまとめ

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

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

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

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

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

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