• かちびと.net

    HTML5を使ってWordPressをiPadに最適化するプラグインOnswipeを試した→結果:なかなか(・∀・)イイ!!全く問題がないわけではないですけど、かなり手間が省けますねこれは。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

HTML5を使ってWordPressをiPadに最適化するプラグインOnswipeを試した→結果:なかなか(・∀・)イイ!!

スポンサーリンク

iPadでアクセスしたときに、WordPress
をiPad向けに最適化してくれるプラグイン
Onswipeを試してみましたが、思いの外
良かったのでご紹介。ページ推移もフリ
ックで出来る雑誌風レイアウトに自動で
変換してくれますよ。

OnswipeはHTML5を使って、WordPressを自動で雑誌風のレイアウトにしてくれるプラグインです。WordPress.comでも既に導入されており、プラグインとしても配布されています。

人気のFlipboardライクなインターフェースにしてくれると聞いて試してみましたが、なかなか良かったので備忘録がてらご紹介します。

Onswipe


使い方はすごく簡単で、基本的には有効化してフォントや色を選ぶだけです。試しにWPデザインギャラリーでテスト。

Before


可変式のグリッドレイアウトなので何もしなくても一応はちゃんと表示されていました。

After


ご覧のようにマガジンスタイルになります。キャプションや画像も自動で抽出してくれます。画像のサイズをこのプラグインに合わせてないので画質がアレですが・・ページングはフリックすると、フリップエフェクト付きで進んでくれます。

現在もWPデザインギャラリーにてデモをご覧頂けますが、元々一応はiPadにも配慮していたので後でプラグインは外すかもしれません。

記事はその場でポップアップ


個別記事はその場でポップアップし、ボックス内でスクロールさせる。

メニューはドリルダウンタイプ


メニューはドリルダウンタイプ。

他にもTwitterやFacebookに投稿、などのシェアボタンも付いています。

設定


設定項目もシンプルで迷うことはなさそうです。上からCover Displayはカバーの有無、Cover Logoはホームに追加したときのアイコンと、カバー有りにした時の表示ロゴになります。Launch Screen Imageは「ユーザーがサイトをホームスクリーンに追加した際の読み込み中画像」だそうです。あとはフォントの種類(かなり多い!)とかカラーテーマとか。

インストール

  1. Onswipeをダウンロードして解凍
  2. wp-content/plugins/にファイルごとコピー→アップロード
  3. プラグインを有効化
  4. 外観→Onswipeから設定

サムネイルが表示されない場合はwp-content/uploads/thumb-cacheのパーミッションを777にする等、サーバーに合わせて見直してください

注意点

  • WP3.1対応です。3.0ではエラーがでます。
  • Facebookのソーシャルプラグインによるコメント等は表示されません
  • 最適化を優先する為、場合によってはプラグイン等によるjsのロードが制御されます。
  • AndoroidやBlackberryには対応していません。iPad用です。
  • ウィジェットには対応していません
  • ナビゲーションで語尾が文字化けするのでmb_substr(以前の記事を参考に)に書き換える必要あり。

Onswipe本家サイトは以下です。まだリリースされたばかりですので今後に注目したいプロジェクトですね。因みにテーマはonswipe/themes/warp/views/内のファイルで作られていますので改造したいならここのファイルをいじれば良さそうです。

Onswipe

URL :
TRB :

Comments & Trackbacks (8)

  1. business daily

    The past four months we ve been working closely with to bring your iPad visitors our vision of what a blog can look like re-imagined for a touch experience..Our iPad-optimized view is app-like in its functionality but pure HTML5 goodness on the backend it supports touch interactions swiping rotation and many other features of the iPad. ..On WordPress.com we re seeing about 750 000 page views a day from iPad visitors and it continues to rise.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services