OnswipeプラグインによるiPadのデザイン変更


WordPress.comを使い始めて3日目。

いろいろと管理画面をチェックしていると、外観に「モバイル」「iPad」の設定画面が!!
iPad設定を見てみると「Onswipe iPad設定」というタイトルがついているので、Onswipeというプラグインをどうやらカスタムしているようです。これは面白そうだということで、WordPress.comで使って見るとともに(iPad設定はデフォルトで無効)、自身のサイトに同プラグインをいれてみて遊んでみました。その結果をレポートします。

外観にモバイルとiPadがある on WordPress.com

外観にモバイルとiPadがある on WordPress.com

モバイル設定について

モバイル設定は、モバイル用テーマを提供することと、モバイルからブログを投稿・編集できる機能をもつアプリと機能を提供するというもの。後者については、自前で導入した場合、下図のようにWordPressの設定に「リモート投稿」というものがあるはずです。このXML-RPCを有効にすることで、WordPressアプリなどから編集することが可能になります。

WordPressのリモート投稿

WordPressのリモート投稿は、XML-RPCを有効にする

WordPress.comではスタッフによれば、XML-RPCは常に有効になっているようです(リモート投稿自体の設定は隠されているようですが)。公式アプリ「WordPress」も、iPhoneで試して見ると、WordPress.comのユーザを追加するかどうかの選択肢がありますし、簡単に使えます。

iPad設定について

このプラグインで面白いのは、iPad専用のデザインを自動で生成される点です。

まだ少ししか遊んでいませんが、その名の通りスワイプさせることで複数の記事を視覚的に分かりやすく見ることができます。本サイトはまだ記事数が少ないので分かりませんが、仕事で使っているサイト「京都大学東南アジア研究所・情報処理室」サイトに導入してみると、左にスワイプさせるとどんどん新しい記事が出てきたり、各記事の内容は2段表示され、次の記事へのアクセスボタンが出来ているなど、なかなか楽しい作りになっています。

Onswipeプラグイン有効化されたサイトをiPadで見たら

Onswipeプラグイン有効化されたサイトをiPadで見たら
– 本サイト –

Onswipeプラグイン有効化されたサイトをiPadで見たら

Onswipeプラグイン有効化されたサイトをiPadで見たら
– 京都大学東南アジア研究所・情報処理室サイト –

5つ以上の記事がある場合には、5つごとに表示され、スワイプで次の記事へ移動します。タップで記事がでるわけですが、記事をスワイプすれば次の記事や前の記事へ移動も可能。

Onswipeを有効にしたときにiPadで見たときの記事

Onswipeを有効にしたときにiPadで見たときの記事

ほぼ手間をかけずに、このような動的な見せ方をできるモバイル対応サイトが作れるのは魅力的ですね。もちろん、まだまだ利用方法や仕組みについて熟知しているわけではないので、もう少し使って見ないと正確な評価はできないかなと思います。

キャッシュ系プラグイン有効化でのOnswipeの問題

当方ではW3 Total Cacheでのみ確認しています。

Onswipeの設定を変更するとiPadからサイトがエラー表示されるというもの。バグレポートを送りましたが、まぁこの設定ができるのは自前のサイトだけなので、私の管理するサイトがおかしいのかもしれません。とりあえずエラーが起こってしまった場合の解決方法を書き出しておきます。

  1. Onswipeを停止し、再度有効化
  2. W3 Total Cacheで、empty all cachesにしてキャッシュを全クリア

これでOnewipeの設定が元に戻るみたいで、動作するようです。

2012年8月27日 木谷公哉(@kimipooh)

広告

OnswipeプラグインによるiPadのデザイン変更」への1件のフィードバック

  1. サイトによっては、「デスクトップ表示」に切り替えたりすると「記事がない」などと、うまく表示できないことがあるようですね。WordPress.comはカスタムしてもらっているのかなぁというのが感想。wired.jpの記事によれば(http://goo.gl/Tbz4A)、サイトのアプリかは広告を載せられるかわりに無料とのこと。やはりある程度の作り込みをしないとうまくいかないのかなぁとか思うこの頃です。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中