ATOM自作と修理を愛するブログ。02:53:04iPhone5S/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の命名には以下のようなルールがあります。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[v1.3]】インストール方法(2014.06.16加筆)1)ダウンロードしたzipファイルを解凍し、NP_ChgSkin2SP.phpをpluginsフォルダにアップロードする2)プラグイン管理からChgSkin2SPをインストールする3)「オプション編集」で適切に設定する赤丸のリンクをクリックします。スマートホン表示で使用するスキン名:実在するスキン名を入力してください。ここで指定したスキンが存在しない場合は、スマートフォンからのアクセスでも「グローバル設定>基本のスキン」で出力します。ちなみに当サイトの場合、PCからのアクセスでは「01toyrc」、スマホからのアクセス時は「01smartphone」というスキンを使って出力しています。スキン変数:スキンに<%ChgSkin2SP%>と記述すると、その場所に表示を切り替えるためのリンクを出力します。「スマートホン表示するためのリンク名」はPCサイトに、「PC表示するためのリンク名」はスマートフォンサイトに出力されます。体裁はviewmodeクラスを使用してcssで指定してください。スマートフォン用のスキンは同梱されていませんので別途入手してください。当サイトでは「はなまちや」さんのスマートフォン用スキン「kyrie」を修正して使用しています。需要はないと踏んでいますが、人柱になってみようという場合は、コメント欄に一言入れていただけるとうれしいです。不具合報告もコメント欄からどうぞ。(2014/09/20)もっと見る...コメント20件のコメントがありますFeed(RSS/ATOM)でパースエラーになっていました。修正しv1.1としました。21:55:37kyuこんにちは。このプラグインを使わせてもらおうと思い、設定をしているのですが・・・。スキンの指定の部分が上手くいっていないのだと思うのですが、スマホ用とPC用のスキンが逆に表示されます。スマホ用に指定スキンがPCで、表示され、PC用になると思われるスキンがスマホで表示されます。よろしければ、設定の詳細を教えて下さい。17:29:44うたうたいうたうたいさん、初めましてこんにちは。上のダウンロードリンクに置いてあったZipファイル、v1.0のままでした。最新版をアップロードし直しましたので、申し訳ないですがもう一度ダウンロードしてください。サーバーのpluginフォルダに上書きしてください。再インストールの必要はないと思いますが、心配でしたら一度アンインストールして、再インストールしてください。設定の詳細については、記事に加筆追加しましたのでそちらを見てみてください。設定することもないので、バグの可能性大です。プラグインの順序を変えてみるのも手かもしれません。お手数ですがよろしくお願いします。23:29:20kyuKyuさまありがとうございます。inの読み込みの順番の調整が必要みたいですが。これからも、よろしくお願いします。22:47:57うたうたいうまくいきましたか、よかったよかった(^^他のプラグインとかち合ってたのでしょうかね。どんなプラグインより優先順位を上げたらうまくいきましたか?後学のために教えていただけるととっても嬉しいです。23:25:01kyuこのサイトは、プラグインはほとんど入れていないのですが、ShowBlogsよりも前に持ってくる方がいいようです。ページ送りのトグルがぶつかっていたのかもしれません。最初に持ってきて、安定して動いているので、そのままにしてあります。10:04:40うたうたいご報告ありがとうございます。当サイトでもShowBlogsは導入しておりまして、ChgSkin2SPよりも優先順位は上です。ShowBlogsはオプション豊富なプラグインなので、なにか設定が違うのかもしれませんね。なにはともあれ、今後ともよろしくお願いします。入れると正常に動作しないことがわかりました。どちらかをあきらめてください。12:57:27kyuyamaです。00:00:13yamamotoおお、びっくりしました。ご本人からお返事いただけるとは思ってもみませんでした。こんなシロートのつくったプラグインも気にしていただいてありがとうございます。気長に期待しております。00:09:10kyuもしよければGitHubで公開していただけたら、そちらをベースに改善してみます。07:48:31yamamoto実はわたくし、GitHubというものがよくわかっていません。アカウントを取得するところからやってみました。これでよいのか疑問ですが...https://github.com/kyumfg/NP_ChgSkin2SPなんだかとんでもない間違いを犯しているような気がしてなりません。なにかありましたらご教授を。15:44:00kyuhttps://github.com/NucleusCMS/NP_ChgSkin2SP/commit/b7167c0413f4474453f98fdb780ba7215104cb18原因分かりました。17:30:27yamamotoデバッグしていただいて恐縮です。残念ながら該当箇所にreturnをいれてもうまく動作しませんでした。PCからアクセスしてもスマートホンと判別されてしまうようです。GitHabでごっそりと修正していただいたものも挙動がおかしいです。ブラウザのキャッシュは、リロードボタンを押せば強制読み込みだと思っているのですが...なにをしたらどうなるかの整理も含めて、時間が取れるときにじっくりと取り組んでみます。23:20:10kyuあまり確証はないのですが、どうやらNP_Cacheを入れているとcookieが読み書きできていないようです。23:51:44kyuそのへんの処理を全て省略させるのがNP_Cacheの目的ですが、早いタイミングでの判定まわりを工夫するとスマートに対応できそうです。15:13:01yamamotoそうなんですね。cookieを使ったのがまずかったかなぁ。別の手段、なにかありますかね。18:41:49kyuはじめまして、kanです。当方PHP初心者につき助けてください。Nucleus大変軽くて感激したのですが、やはりスマホ用の表示ができないのは残念です。SkinFilesの方に表示され、機能しておりません。何をどうすればよいのか?よろしくお願いします。11:27:56kankanさんこんにちは。当方も素人に毛が生えた程度のスキルですので、正直良くわかりません。バージョンの問題ではないかと思われます。PHPのバージョンを教えて下さい。試してみてもらえますか。できたら今後のコメントもそちらにもらえるとうれしいです。できるだけやってみますのでお手数ですがよろしくお願いします。12:30:10kyukyuさん。回答有り難うございます。再度の質問はhttp://kyu.php.xdomain.jp/?...にさせていただきます。マー君さんこんにちは。ありがとうございました。マー君さんこんにちは。マハルさんこんにちは。ESP-WROOMにも手を出したんですね。ただの主婦さんこんばんは。makkiさんこんばんは。