スマホ対応プラグインNP_ChgSkin2SPをつくってみた
- カテゴリ: NucleusCMS
- 投稿日時: 2013/09/22(日) 02:53:04
iPhone5S/Cの発売とともに、iOS7がリリースされましたね。みなさんはもうアップデートしたでしょうか。
実は先週の土曜日、ポケットに入れたまま流れるプールで半周するという大失態をやらかしまして、水没したiPhone5をAppleに交換してもらいました。補償期間中でも水没の場合は実費交換なので、27800円の見積にガクブルの毎日です。ソフトバンクのあんしん保証パック(i)で85%オフになるとはいえ、見積通りだとすると4120円は払わなきゃなりません。とほほ。
悪いことに、本体交換したことをすっかり忘れてそのままiOSのアップデートをしてしまったので、過去に取得してあったiOS6のshshはすべて無駄になってしまいました。脱獄することは多分ないとはいえ、これははこれでかなり痛いです。
さて本題です。
このブログにスマートフォンでアクセスしたときの見栄えを変えた件はこの記事でちょろっと書きました。今回はそのあたりについてもうちょっと掘り下げます。
このブログで使っているNucleusというCMS、機能を拡張するためにはプラグインを使います。素の状態では結構基本的な機能も実装されていないので、プラグインが入っていないサイトは皆無でしょう。
だけどスマートフォン表示に対応するためのプラグイン、探してもなかなかないんです。
今現在、Nucleusはかなり終わった感の強いCMSなんですね。ある時期を境に公式フォーラムも閑散としてます。正確なところはわかりませんが、深刻な脆弱性が見つかったあたりから、徐々にプラグイン作者さんが離れて行ってしまったような感じです。いまやWordPressが全盛。いまさらNucleusでプラグインを書こうという人が出てくるはずもありません。なのでスマートフォン対応プラグインは少ないんです。
少ない中で一番利用されていると思われるのがNP_AdjustSkin2MobileLiteです。想像ですが、もともとはガラケーに対応するためのプラグインですね。文字コードと絵文字の変換に重きが置かれています。その中の機能の一つに、スマートフォン対応があります。
Nucleusはスキンとテンプレートというひな形を使ってページを描画するのですが、NP_AdjustSkin2MobileLiteはユーザーエージェントを判別して適当なスキンに振り分けるためのプラグインです。なので、スマートフォン専用のスキンを用意すれば、あっという間に対応サイトの完成となるわけです。
スキンを一からつくるのは結構つらいので探しましたが、これもあまり見つかりません。入手できるのは「はなまちや」さんのスマートフォン用スキン「kyrie」くらいです。
さて、ダウンロードしたスキンはこのサイトに合わせてちょいちょいと変更修正しましたが、肝心のNP_AdjustSkin2MobileLiteの使い方がよくわからない。つまずいたのはスキンの名前で、この件に関する情報はあちこちに散見されます。
ヘルプの説明では
Skinの命名には以下のようなルールがあります。 PC用のSkin名が[default]の場合 【プラットフォーム用Skin】 default/[プラットフォーム名] … (中略) … 【スマートフォン 用Skin】 default/sphone
とあります。
この「/(スラッシュ)」が曲者。スキン名にスラッシュが使えるとは思ってもみなかったので混乱したんですね。「PC用のSkin名が[default]の場合」というのも、かなり見落としがちです。
で、大抵の場合、PC用のスキン名はdefaultではないので、default/sphoneという名前のスキンをつくっても一向にスマートフォン用の表示ができず、いらいらしてしまうというわけです。例えばPC用のスキン名が「toyrc」だったら、スマートフォン用のスキンは「toyrc/sphone」という名前にしなけりゃなりません。
上記の引用部分はだいぶ端折ってますが、省略したところにはガラケーの長い説明が入ってます。で、そこにiphoneとかandroidとかもでてくるのでまたこれがわかりにくいんですね。
このサイトについてでも触れていますが、わたしはガラケーに対応させる気はまったくなかったので、携帯に関するところは読み飛ばしてました。はい。
自分の読解力のなさを呪いつつ、なんとかスマートフォン用サイトが完成、公開しました。
その後、iPhoneのsafariで大手のサイトを回ってみて、あることに気づきました。
大抵の場合、スマートフォンのWebブラウザ用に最適化されているサイトは、ページの一番上もしくは下に「PC用表示」っていうリンクがあるんです。で、そのリンクを踏むとPCのブラウザで見ているのと同じ表示がされる、と。
スマートフォン用サイトは、画面サイズの関係で、あまり重要でない情報はバッサリと切り捨ててシンプルに表示してます。でも省略されたPCサイトのリンクをたどりたいと思うこともあります。逆に画面の広いパッドでアクセスしたときはPCサイト表示してほしいです。そのための仕組みなんですね。
NP_AdjustSkin2MobileLiteには、残念ながらそんな機能はありません。となると自分でつくるしかないです。
perlはかじったことはありますが、PHPは全くの素人。よってゼロからつくるのではなく、NP_AdjustSkin2MobileLiteを改造することにしました。
まずは不要なガラケー対応部分を削除。絵文字のGIFとか文字コード変換ファンクションを削ってかなりシンプルにしました。
続いてPC/スマートフォン切り替えリンクの実装。サーバ変数の取得方法とか、GETかPOSTかはたまたcookieかとか、いろいろなことを思い出しながら、PHPの文法を調べながら、NucleusのプラグインAPIのドキュメントを参照しながらごりごりと書きました。
そこそこ動くようになったところで、スマートフォン用スキン名を自分勝手に指定できるようにプラグインオプションを実装。ローカルで確認し本番サーバに移植しました。一応期待通りの動きはしているようです。
いまあなたがPCでこの記事を読んでいるのでしたら、表示は従来と全く変わっていないはずです。
スマートフォン、つまりiOSかAndroidが載っている端末からアクセスしているのでしたら、記事の一番下に「PC表示」というリンクが出現しているはずです。このリンクをタップするとPC版の表示に切り替わります。PC表示の一番下には「スマートフォン表示」というリンクがあるはずです。
せっかくつくったので公開します。文字コードはUTF-8ですので、EUCのひとは適宜変換してください。
NP_ChgSkin2SP.zip
【新バージョンをリリースしました → NP_ChgSkin2SP[v1.3]】
インストール方法(2014.06.16加筆)
1)ダウンロードしたzipファイルを解凍し、NP_ChgSkin2SP.phpをpluginsフォルダにアップロードする
2)プラグイン管理からChgSkin2SPをインストールする
3)「オプション編集」で適切に設定する
赤丸のリンクをクリックします。
スマートホン表示で使用するスキン名:
実在するスキン名を入力してください。ここで指定したスキンが存在しない場合は、スマートフォンからのアクセスでも「グローバル設定>基本のスキン」で出力します。
ちなみに当サイトの場合、PCからのアクセスでは「01toyrc」、スマホからのアクセス時は「01smartphone」というスキンを使って出力しています。
スキン変数:
スキンに<%ChgSkin2SP%>と記述すると、その場所に表示を切り替えるためのリンクを出力します。
出力例:
「スマートホン表示するためのリンク名」はPCサイトに、「PC表示するためのリンク名」はスマートフォンサイトに出力されます。
体裁はviewmodeクラスを使用してcssで指定してください。
なお、スマートフォン用のスキンは同梱されていませんので別途入手してください。当サイトでは「はなまちや」さんのスマートフォン用スキン「kyrie」を修正して使用しています。
ほぼ需要はないと踏んでいますが、人柱になってみようという場合は、コメント欄に一言入れていただけるとうれしいです。不具合報告もコメント欄からどうぞ。
Tweet
コメント
20件のコメントがあります
Feed(RSS/ATOM)でパースエラーになっていました。ごめんなさい。
修正しv1.1としました。
こんにちは。
このプラグインを使わせてもらおうと思い、設定をしているのですが・・・。
多分、スキンの指定の部分が上手くいっていないのだと思うのですが、スマホ用とPC用のスキンが逆に表示されます。スマホ用に指定スキンがPCで、表示され、PC用になると思われるスキンがスマホで表示されます。
もし、よろしければ、設定の詳細を教えて下さい。
うたうたいさん、初めましてこんにちは。
まずお詫びです。
上のダウンロードリンクに置いてあったZipファイル、v1.0のままでした。最新版をアップロードし直しましたので、申し訳ないですがもう一度ダウンロードしてください。
Zipを解凍して得られる NP_ChgSkin2SP.php を、サーバーのpluginフォルダに上書きしてください。再インストールの必要はないと思いますが、心配でしたら一度アンインストールして、再インストールしてください。
設定の詳細については、記事に加筆追加しましたのでそちらを見てみてください。
ただ、大して設定することもないので、バグの可能性大です。
プラグインの順序を変えてみるのも手かもしれません。
お手数ですがよろしくお願いします。
Kyuさま
ありがとうございます。上手くいきました。
グローバル設定のところの変更と、plug inの読み込みの順番の調整が必要みたいですが。
これからも、よろしくお願いします。
うまくいきましたか、よかったよかった(^^
他のプラグインとかち合ってたのでしょうかね。
どんなプラグインより優先順位を上げたらうまくいきましたか?
後学のために教えていただけるととっても嬉しいです。
このサイトは、プラグインはほとんど入れていないのですが、ShowBlogsよりも前に持ってくる方がいいようです。
ページ送りのトグルがぶつかっていたのかもしれません。
とりあえず、一番最初に持ってきて、安定して動いているので、そのままにしてあります。
ご報告ありがとうございます。
当サイトでもShowBlogsは導入しておりまして、ChgSkin2SPよりも優先順位は上です。
ShowBlogsはオプション豊富なプラグインなので、なにか設定が違うのかもしれませんね。
なにはともあれ、今後ともよろしくお願いします。
Nucleus(JP)フォーラムで活躍している yama さん作成の NP_Cache (http://japan.nucleuscms.org/forum/viewtopic.php?id=7301) を入れると正常に動作しないことがわかりました。
すみません。どちらかをあきらめてください。
yamaです。NP_Cacheの改善を試みますので、またしばらくしてからトピックを見てください
おお、びっくりしました。ご本人からお返事いただけるとは思ってもみませんでした。
こんなシロートのつくったプラグインも気にしていただいてありがとうございます。
気長に期待しております。
もしよければGitHubで公開していただけたら、そちらをベースに改善してみます。
実はわたくし、GitHubというものがよくわかっていません。
アカウントを取得するところからやってみました。これでよいのか疑問ですが…
https://github.com/kyumfg/NP_ChgSkin2SP
なんだかとんでもない間違いを犯しているような気がしてなりません。なにかありましたらご教授を。
https://github.com/NucleusCMS/NP_ChgSkin2SP/commit/b7167c0413f4474453f98fdb780ba7215104cb18
原因分かりました。ここにreturnを入れると動作します
デバッグしていただいて恐縮です。
残念ながら該当箇所にreturnをいれてもうまく動作しませんでした。PCからアクセスしてもスマートホンと判別されてしまうようです。
GitHabでごっそりと修正していただいたものも挙動がおかしいです。
ブラウザのキャッシュは、リロードボタンを押せば強制読み込みだと思っているのですが…
なにをしたらどうなるかの整理も含めて、時間が取れるときにじっくりと取り組んでみます。
あまり確証はないのですが、どうやらNP_Cacheを入れているとcookieが読み書きできていないようです。
そのへんの処理を全て省略させるのがNP_Cacheの目的ですが、早いタイミングでの判定まわりを工夫するとスマートに対応できそうです。
少し考えてみます。
そうなんですね。
cookieを使ったのがまずかったかなぁ。別の手段、なにかありますかね。
はじめまして、kanです。
突然ですが、当方PHP初心者につき助けてください。
Nucleus大変軽くて感激したのですが、やはりスマホ用の表示ができないのは残念です。そこで、kyuさんの
NP_ChgSkin2SP.phpをpluginsに、kyrieスキンをskinsディレクトリにアップし、管理画面から登録しようとしたところ、Warning: Declaration of NP_ChgSkin2SP::doSkinVar() should be compatible with NucleusPlugin::doSkinVar($skinType) in /インストールディレクトリ/nucleus/plugins/NP_ChgSkin2SP.php on line 181 がSkinFilesの方に表示され、機能しておりません。
何をどうすればよいのか？よろしくお願いします。
kanさんこんにちは。
当方も素人に毛が生えた程度のスキルですので、正直良くわかりません。ですが、なんとなく PHP のバージョンの問題ではないかと思われます。
こちらで動作確認している環境は、NucleusCMS 3.71 、PHP 5.6.30 です。
NucleusCMS と PHPのバージョンを教えて下さい。
あと、このページの NP_ChgSkin2SP は古いので、http://kyu.php.xdomain.jp/?... にある v1.31 を試してみてもらえますか。できたら今後のコメントもそちらにもらえるとうれしいです。
できるだけやってみますのでお手数ですがよろしくお願いします。
kyuさん。回答有り難うございます。
再度の質問はhttp://kyu.php.xdomain.jp/?...にさせていただきます。