レンダリングは可能

レンダリングは問題ありませんでした

Vue.jsで作られているサイトもPDF化できるのか不安でしたが、無事生成できました。Vuetifyで開発されているサイトも崩れることなくバッチリPDF化できました。

VueRouterは動作しない

VueRouterの一部機能は動作しませんでした。

クエリパラメータの取得などがうまく行われないケースが確認されました。watchも動作してくれるか微妙です。

このあたりは環境ごとにテストしてみる必要がありそうです。

ボタントグルコンポーネント — Vuetify

ボタントグルコンポーネントを使用すると、選択可能な一連のボタンを単一の要素にまとめることができます。

vuetifyjs.com

サンプルコード

Vuetifyではv-toggle-btnを使用すると、かんたんにトグルボタンを実装することができます。

はじめに基本となるサンプルコードを紹介します。

<v-btn-toggle v-model="sample">
      <v-btn>A</v-btn>
      <v-btn>B</v-btn>
      <v-btn>C</v-btn>
</v-btn-toggle>

複数のv-btnをv-btn-toggleで囲むことで、トグルボタンとすることができます。

ボタンに任意の値を設定するには？

デフォルトでは、選択されているボタンのインデックスがv-btn-toggleのv-modelに格納されます。

<v-btn-toggle v-model="sample">
      <v-btn>A</v-btn>
      <v-btn>B</v-btn>
      <v-btn>C</v-btn>
</v-btn-toggle>

たとえば上のサンプルでAをクリックすると0、Bをクリックすると1がv-modelにセットされます。

ボタンを選択したときに反映される値を任意の値に変更したいときは、v-btnにvalue属性を設定します。

<v-btn-toggle v-model="sample">
      <v-btn :value="a">A</v-btn>
      <v-btn :value="b">B</v-btn>
      <v-btn :value="c">C</v-btn>
</v-btn-toggle>

ここで注意すべきなのがコロンのつけ忘れ。コロンを忘れていると、v-modelに値が反映されませんので、要注意です。

ボタンがクリックされたら処理を実行したいときは？

トグルボタンにもイベントを設定することができます。

トグルボタンのクリックをきっかけに処理を行いたいときは、v-btn-toggleに@changeを設定します。いずれかのボタンがクリックされ、値が変更された場合に発火します。

特定のボタンがクリックされたときのみ処理を行いたいときは、v-btnに@clickを設定します。

サンプル

当サイト（ばすにっきTips）の新着記事を取得し、表示するサンプルです。

Vue.jsとAxiosで実装してみました。

解説

まず、axiosでAPIにアクセスし、データを取得しています。

// 最新記事を取得する
axios
  .get("https://takabus.com/tips/wp-json/wp/v2/posts?_embed")
  .then((res) => {
    this.posts = res.data;
  });

最新の投稿は/wp-json/wp/v2/posts?_embedからGETで取得できます。

例えば、hoge.comにwordpressのトップがあるとすると、hoge.com/wp-json/wp/v2/posts?_embedがAPIとなります。ブラウザからアクセスして確認してみましょう。URLと一緒にクエリパラメーターを追加することで、カテゴリ（?categories）やタグ（?tags）で絞り込んだりといったこともできます。

このほか多くのパラメーターが準備されており、かなり細かい指定が可能となっているようです。

Posts – REST API Handbook | Developer.WordPress.org

Schema

developer.wordpress.org

取得したデータはdataに置いておき、v-forで各記事へのリンクとサムネイル・タイトルなどを表示させています。

<!-- 記事ごと -->
<a :href="post.link" v-for="post in posts" :key="post.id" style="text-decoration:none;color:#2c2c2c;">
    <div class="card" style="max-width: 540px;">
        <div class="row g-0">
            <div class="col-4">
                <img class="d-block w-100"
                    :src="post._embedded['wp:featuredmedia'][0].media_details.sizes.thumb320.source_url"
                    alt="..." />
            </div>
            <div class="col-8">
                <div class="card-body p-2">
                    <h6 class="card-title mb-0">{{post.title.rendered}}</h6>
                    <div>
                        <small>{{post.date.substr(0,10)}}</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</a>

余分なクラスやスタイルを取り払うとこんな感じとなります。

<a :href="post.link" v-for="post in posts" :key="post.id">
    <div>
    <img :src="post._embedded['wp:featuredmedia'][0].media_details.sizes.thumb320.source_url" />
    <h6>{{post.title.rendered}}</h6>
    <small>{{post.date.substr(0,10)}}</small>
    </div>
</a>

よくつかうであろうキーは以下のとおりです。

なお、サムネイル画像は?_embedをつけないと取得できません。

まとめ

WordPressサイトの記事一覧をほかのサイトに埋め込みたいときなどに便利そうですね。例えばWebアプリのお知らせサイトをWordPressで制作し、Webアプリ内にお知らせを埋め込む、なんて使い方が考えられます。

▼こちらのURLで実際に運用しているサンプルも公開しています。Nuxt.jsを使用したサイトですが、記事内容はサーバーサイドレンダリング、新着記事のところは当記事の方法を使いクライアントサイドでレンダリングすることで、つねに最新の記事が表示される仕組みとなっています。実際のユースケースとして、参考にしていただければ幸いです。

バスずかん

バスの写真をたくさん掲載！バスずかんでは仙台を中心としたバスの写真を掲載しています。バスにっきとあわせてごらんください。

takabus.com

ランタイムキャッシュとは？

動的にアクセスされたリソースをキャッシュさせることをいいます。

例えば、APIで取得したjsonを保存しておき、オフラインでも見れるようにするといったことができます。

@vue/cli-plugin-pwaならかんたんに実装できる！

Vueで作成したプロジェクトであれば、@vue/cli-plugin-pwaというパッケージを追加することで、かんたんにランタイムキャッシュを実装できます。

vue-cli/packages/@vue/cli-plugin-pwa at dev · vuejs/vue-cli

🛠️ webpack-based tooling for Vue.js Development. Contribute to vuejs/vue-cli development by creating an account on GitHu...

github.com

通常はservice-workerを手動で実装する必要がありますが、このパッケージを入れてしまえばイチコロです！

手順

さっそくランタイムキャッシュを実装する手順を紹介。

@vue/cli-plugin-pwaをインストール

npmなどで @vue/cli-plugin-pwaをインストールします。

npm install "@vue/cli-plugin-pwa"

PWA対応だけではなく、プレキャッシュやランタイムキャッシュ（APIキャッシュ）も容易に実装できます。

ランタイムキャッシュを有効にする

この記事の本題であるランタイムキャッシュ。

@vue/cli-plugin-pwaなら、vue.config.jsに以下を追加するだけでOKです。

module.exports = {
pwa: {
    name: 'PWAアプリケーション名',
    themeColor: 'テーマカラー(#aabbccなどで指定する)',
    manifestOptions: {

        background_color: "#adcdff"
    },
    workboxPluginMode: 'GenerateSW',
    workboxOptions: {
        runtimeCaching: [{
            // キャッシュするファイルのURLを正規表現で指定する
            urlPattern: new RegExp( "https://hoge.com/.*"),
            handler: 'CacheFirst',
        }]
    }
},
}

ビルドする

npm run buildを実行し、ビルドします。

すると、service-worker.jsが自動的に作成され、ランタイムキャッシュが有効になります。

あとはサーバーにアップすれば、キャッシュが動作するようになります。

動かないときのチェックポイント

ここまで実装方法を記してみましたが、うまくいかないときのチェックポイントをまとめておきます。

チェック① service-worker.jsにランタイムキャッシュの部分が出力されているか？

まずはここをチェックしましょう。

buildすると、distフォルダにservice-worker.jsというファイルが出力されます。これにランタイムキャッシュの部分が正しく出力されているか確認します。

出力されていない場合は、vue.config.jsを確認し、記述があっているか確認してください。

チェック② URLパターンがあっているか？

問題なくランタイムキャッシュさせるコードが出力されている場合は、内容があっているか確認します。urlPatternが正しいかチェックします。

urlPattern: new RegExp("https://korekore.com/hoge/.*")

urlPatternにはRegExpを使うことができます。

• HTTPSであること
• ホストは自由に指定できる（PWAをホストするサーバーとは別のホストでも動作します）
• Javascriptの正規表現で指定すること

チェック③ ホスティング環境が対応しているか？

ホスティング環境にも制限があります。

いろいろと制限があるので、ひとつひとつ確認していく必要があります。

axiosでは動かない？→動きます

axiosでは動かず、fetchをつかってAPIにアクセスしなければならないという話がありますが、これは違います。

axiosでもまったく問題なくキャッシュされます。特殊な仕込みは不要です。

参考

ページにたどり着きにくいので、参考になるドキュメントもメモしておきます。

PWAに関するconfig

Workbox  |  Chrome for Developers

Build progressive web apps (PWAs) with Workbox - the Service Worker library from the Chrome team

developer.chrome.com

ランタイムキャッシュに関するオプション

Modules  |  Chrome for Developers

Dig deeper into specific Workbox modules.

developer.chrome.com

どういうことかというと、たとえば

{
    "hoge": {
    "1a": "a",
    "2a": "b",
    "3a": "c",
    "4a": "d",
    "5a": "e"
  }
}

というjsonをaxiosで取得し、dataaに格納したとします。

hogeの1aの値を取得したいとき、ふつうに

this.dataa.hoge.1a

としてしまうと、エラーが発生してしまい、うまくいかないのです。

解決法

こういうときは配列の記法を使います。

this.dataa.hoge["1a"]

Objectは配列のようにキーで取得することができます。

この方法なら先頭に数字がついていても、変数を取得できます。