サポート » テーマ » テーマカスタマイザーのライブプレビュー機能について

  • 解決済 s-y-u

    (@s-y-u)


    基本的な質問ですみません。

    テーマカスタマイザーのライブプレビュー機能について調べています。
    テーマカスタマイザーで色んな設定をできることは分かり、その通りになったのですが、Codexにある「パート3: ライブプレビュー設定(任意)」がよくわかりません。

    http://wpdocs.sourceforge.jp/Theme_Customization_API

    通常はプレビューウインドウの再読み込みにより設定を反映しますが、JavaScript を使うことでより速い、インタラクティブなテーマカスタマイザーを実現できます。

    とあります。

    というのも、このjavascriptの設定をしなくともリアルタイムでカラーやテキストが変更されるからです。となると、javascriptを使ったライブプレビューというのはいったいなにか? ということになります。

    試しにjavascriptを実装してみたのですが、機能的になにが変わったのかわかりません。
    もしかして、最近のワードプレスはライブプレビュー機能があり、この設定は過去のバージョンでもライブプレビューができる、ということでしょうか?
    それであれば理解できます。

    最初から入っているテーマでいくつかカスタマイズを確認してみたのですが、どのテーマでも値が即時反映されるようです。自分で作ったテーマカスタマイザーを使っていないテーマでも即時反映されるようなので混乱しています。
    誰かこの謎について教えて下さい。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • nobita

    (@nobita)

    こんにちは、

    私も、カスタマイザーを使ってプリビュー出来るテーマを作っているのですが、現在のところ、javascriptは使っていないので、定かなことは言えないんですが、

    サンプルコードで提供されている サイトヘッダーのリンク色を変更するといった事だと、スクリプト必要あんの?、昔、リロードに時間がかかったころの名残じゃないの?
    とか、考えてしまうところはあるのかもしれません。

    でも、カスタマイザーは、これでバッチシなの? と、私なりに考えると、まだ、バッチシでないところも、ありそうで、そういう部分で、スクリプトを使っていく余地はあるんじゃないかと思っています。

    例えば、トップページや、検索結果、カテゴリアーカイブで、投稿本文を表示するか、概要文を表示するか、本文を表示しないといったコントロールを作った場合、

    たまたま、開いていたカテゴリアーカイブのページからカスタマイザーを開くと、プリビューに表示されるのは、カテゴリアーカイブのページですよね

    そのプリビューを見て、トップページの本文を概要表示に設定するという指定をしたとしても、カテゴリアーカイブのプリビューは、何も起こりませんよね。(トップページの表示を変更しているので)

    何も考えないで、プリビューみているユーザーは、「何にも変化ナーシ、壊れてんのかなー」と思ったりするかもしれないですよね。

    こういう時に、現在のページとは異なる部分での変更の場合には、アラートを出してやるだとか、javascriptを使えることで、「何とかなりそうな」部分というのがあるんじゃないかと思っています。(実際作ってはいませんけど)

    サンプルコードは、シンプルなものですが、アイディア次第でいろんなことが出来るんじゃないかなと、ちょっと希望を持っています

    kjmtsh

    (@kjmtsh)

    全体を把握しているわけではないので、確かなことは言えませんし、間違いがあるかもしれませんし、謎が解けるわけでもないのですが…

    「ライブプレビュー」というのは、プレビュー画面をリロードせずにプレビューできるという説明の通りのものだと思います。タイトルの色の変更とかは、JavaScript だけでやっているので、最低限のファイルしかないテーマでも即座に反映されますが、title や description を一文字削除したり、追加したりすると、けっこうな量のサーバ・リクエストが発生します。サーバとの通信をモニタしているとわかります。このとき、admin-ajax.php が呼ばれて、プレビュー画面は読み込み直しになっています。スクリプトなどは 304 が返るので、キャッシュが使われるでしょうから、体感的にはたいしたことはないと思いますが、1 ページ分の読み込みと同じです。

    これは、WordPress に付属のテーマでは発生しません。postMessage を使っていることからからですね。

    ご承知のように、プレビュー画面は iframe を使っていて、Ajax を使うと、管理画面のリロードなしで、プレビュー画面だけをリロードできますが、変更を反映するのに、プレビュー画面のリロード自体はなくすことができません。上に述べたとおり、サーバとのやりとりが発生して、それだけ遅延もあります。また、プレビューの body に書き込まれる JavaScript が持っていたデータがリセットされます。

    これをせずに、管理画面の JavaScript と、iframe の中の JavaScript が継続して通信できるようにするためには、別の通信手段が必要なので、postMessage を使いましょう、ってことでしょう。利点は、プレビュー画面の JavaScript が message イベントを listen していれば、管理画面から送った JSON データが即座にプレビュー画面の JavaScript に伝わって、画面の書き換えがリロードなしでできるということです。message に応答させることもできます。

    理屈の上では、JavaScript が扱える DOM 要素の変更は、全て同様の手順で実行できるはずですから (実装は別として)、サーバとの通信なしに見た目の変更のほとんどがリアルタイムでできる可能性があります。単純に Codex の例だけだと「だから何?」ってなりますけど、実装次第なのでしょう。個人的には、データベースとの連携がない (デザインがデータと連動しない)、というところが残念なのですが、だれかすごいプラグイン開発者や、nobita さんのようなすごいテーマ開発者が、あっと驚くような実装を見せてくれるのを楽しみにしています。

    s-y-u

    (@s-y-u)

    nobitaさんとkjmtshさん情報ありがとうございました

    意味が分かりました!
    テーマカスタマイザーが今後なにかしら大きな発展をしていく予感と、ライブプレビューの現状が理解できました。
    特にkjmtshさんの情報で腑に落ちました。今のところテーマが単純なので速さの違いを実感できないですが、複雑になると違いが分かりそうですね。

    調べてみるとテーマカスタマイザーはwp_optionに値を格納するための手段でしかないようなので、テーマと連動として独自にやるには自分でテーマに沿ったUIを作るというのもありかもしれませんね。
    ありがとうございました。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「テーマカスタマイザーのライブプレビュー機能について」には新たに返信することはできません。