BugTrack/2387

スマートフォン対応†

• ページ: BugTrack
• 投稿者: umorigu
• 優先順位: 普通
• 状態: 完了
• カテゴリー: 本体新機能
• 投稿日: 2016-05-17 (火) 01:22:50
• バージョン: 1.5.1
• リリース予定バージョン: 1.5.3

メッセージ†

標準スキンをスマートフォン対応にしたい。スマートフォンの画面サイズに最適化して表示する。

表示サンプル:

• 本文領域を横幅100%で先頭に表示し、メニュー領域 (MenuBar) は本文の後に表示する
• レスポンシブレイアウト - PCのWebブラウザでも、ウィンドウ幅が狭い場合にはスマートフォン用の表示レイアウトにする
• 閾値は 768px とする。おおむね、タブレットの縦長表示はスマートフォンレイアウト、横長表示はPCレイアウトになる想定 (デバイスにより、こうならないこともあります)

Snapshot テスト†

• (PukiWiki-devデータ) https:// pukiwiki.osdn.jp/_b2387_before/ (レスポンシブレイアウト導入前)
• (PukiWiki-devデータ) https:// pukiwiki.osdn.jp/_b2387_after/ (レスポンシブレイアウト導入後)
• (PukiWiki-officialデータ) https:// pukiwiki.osdn.jp/_b2387_o_after/ (レスポンシブレイアウト)

発生した問題†

(2020-01-24現在)

• (1)(SP) 済 comment, pcomment プラグインの MSG テキストボックスが size=70 固定で表示されており、レイアウトが崩れる (テキストボックスの分ページが広くなる)
  • 
  • comment, pcomment の input type=text に対して size属性を使わず、CSSでサイズを指定する
• (2)(SP) (一部済) もともと font-size: 90%; が多用されているが、多重にかかった結果、スマートフォンでの文字サイズが読めないほど小さくなる
  • 今回は大きく崩れないことを優先し、デザイン変更は別に対応することにしました body, menubar についてスマートフォンレイアウトの場合 "font-size:100%" を追加指定
  • menubar は font-size:100%; にしました。スマートフォン表示にすると 90% x 90% => 81% は小さすぎた
• (3)(SP) 済 bugtrack プラグイン Form の見出しが小さすぎる
  • 
  • Form の td,th を display:block; にして解決
• (4)(PC) (このまま) メニューが td-div 二重構造でレイアウトを合わせていたのをdiv 1階層だけで同じレイアウトを再現させる必要あり
  • 標準スキンのままでは問題にならないようだ
• (5)(SP) 済 pre タグの要素が画面をはみ出す
  • div#body { max-size: 98%; } で解決
• (6)(SP) 済 画像が画面をはみ出す
  • "max-width:95%;" で解決
• (7)(PC) 済 幅の広いテーブルや要素がbodyにあるとメニューが極端に狭くなる (BugTrack)
  • 
  • "width: 9em;" の代わりに "min-width: 9em" で解決
• (8)(PC) 済 検索の詳細表示が画面をはみ出す (これはBugTrack/2490でのエンバグかもしれない。 Beforeでは問題ないのでBugTrack/2490とは無関係でした)
  • 解決した。 div#contents div#body の2段になっていたものを div#bodyの一段にした commit:ca70b85203
  • Before: After:
• (9) (SP) 済 長い単語URLが折り返されずに画面からはみ出し、横スクロールバーが表示される。
  • 
  • 単語の途中でも折り返す "word-break:break-all;" で解決

    div#contents {
      word-break:break-all;
      overflow-wrap:break-word;
      word-wrap:break-word;
    }

• (10) (SP) 済 ひな型とするページのページ名が長いとスクロールバーが表示される
  • 
  • "max-width:95%;" で解決
• (11) (SP) 済 固定 cols textarea の memoプラグイン、insertプラグイン
  • 対応した
• (12) 済 read (通常表示) では div#contents div#body の構造。read以外のプラグインのときは div#contents が無く div#body だけになっていることによるレイアウト崩れ / CSS適用ずれ
  • 必ず div#contents div#body の構造になるようにした
• (13) 済 tDiaryスキン、 keitaiプロファイル等、標準スキン (標準スキンが期待しているCSS) 以外での表示崩れ問題 (commentプラグインの幅が狭くなる等)
  • 対応した HTML側 (input size="60"等) はできるだけ変更せず、CSSでサイズを上書きするようにした
• (14) 済 pukiwiki.css で media query "@media (max-width:767px) { ... }" が多すぎる問題 (CSSメンテナンス性、カスタマイズしやすさの低下)
  • いったんこのまま。今はプラグインごとのスキン設定を集約している メディアクエリ部分をまとめた方がいいかもしれない
  • まとめました commit:e8606e584c
• (15) calendar2 プラグイン - カレンダーの幅が小さく2桁日付が改行されてしまう (レイアウト変更に伴い、本文のフォントが少し大きくなり、元のカレンダーの幅150pxでは収まらなくなった)
  • 1.5.2 (横150px):
  • 問題: 解決 (横200px):

まだ問題が残っているページ [2020/02/06現在]†

• div#contents よりも内側の div#body の幅が広い
  • BugTrack/709 解決 (SP) 横スクロールバーが表示される
  • BugTrack/579 解決 (SP) 横スクロールバーが表示される
  • 開発談義/5 解決 (SP) 横スクロールバーが表示される
  • スキン 解決 (SP) 横スクロールバーが表示される
• 注釈が折り返されない
  • BugTrack/2073 解決 (SP) 横スクロールバーが表示される (2020/02/06)
  • BugTrack/2237 解決 (SP) 横スクロールバーが表示される (2020/02/06)
• pcomment コンパイルエラー 解決(2020/02/08)
  • official:欲しいプラグイン/234 [[official:自作プラグイン/1]
• traker form レイアウト崩れ 解決 (2020/02/08)
  • official:欲しいプラグイン official:WebTrack
    • tracker設定の自由度とスマートフォンレイアウトの共存が難しい...

参照†

• PukiWiki/1.4/ちょっと便利に/skinをテーブルレイアウトでなくする

標準PukiWikiレイアウト (PC向け)†

• ヘッダー、フッターが上下固定
• メインコンテンツ部分の左側に MenuBar
• 右側にもカラムを追加したものは「3カラムレイアウト」「聖杯レイアウト」などと呼ばれ、PC向けWebサイトでメジャーなもの

レイアウト手法†

• Tableレイアウト: CSSを使わずHTML tableのみで要素を配置する (現行PukiWikiの手法)
• CSS / float レイアウト
  • tableを使わずCSSでbox要素を横並びにする場合に昔からよく用いられている手法
• CSS3 / display: table
  • テーブルに近い動作
• CSS3 / Flexbox レイアウト
  • モダンブラウザはほぼ対応している
• CSS3 / Grid レイアウト
  • IE11以外のモダンブラウザは対応している。IE11は準拠レベルが低く、個別対応が必要

スマートフォン向けレイアウト†

よくあるスマートフォン向けレイアウト:

• 左右にカラムを並べず、メニュー (index) も含めて上から下に1方向に並べる
• メニューページ (MenuBar) よりコンテンツを先に表示させる
• ハンバーガーメニュー (ボタンクリックで各種メニューやリンクを表示) が併用されることもある

PC / スマートフォン切り替え†

• HTTP User-Agent ヘッダを見て、スマートフォンっぽいUAであればスマートフォン用の表示を行う (PukiWiki 標準profile / keitaiプロファイル 切り替えと同じ)
  • User-Agent の手動メンテナンスが必要
• ブラウザのWindow幅に応じてレイアウト切り替え
  • CSS media query でwindow幅に応じて適用するCSSを変える
  • PCでもウィンドウ幅を狭くするとスマートフォン用レイアウトになる
  • 最近はこちらが主流 (User-Agentメンテナンスが不要)
  • Flexbox の機能を駆使して media query を使わない手法もあり
    • メディアクエリを使わないためにはmainコンテンツ領域の幅が固定(または最小幅固定)である必要がある→不採用

互換性†

• media query, CSS3やいわゆる「モダンブラウザ」ベースにする場合、IE4-6 やフィーチャーフォン(いわゆるガラケー)のブラウザでは表示できない (表示が崩れる)
• 対応案
  • 現行のPukiWiki標準スキンを何らかの形で残す (レガシースキン、等)
  • 「レガシーブラウザへ対応したい人はPukiWiki 1.5.2を利用していください」案内をする

外部サイト†

• PukiWiki1.5.2をレスポンシブデザインに変更する！ | SEの良心
  • https:// dajya-ranger.com/pukiwiki/make-responsive-design/
• レスポンシブ対応スキン「sr」がPukiWiki 1.5.2に対応しました - src256ログ
  • https:// srcw.net/archives/491
• PukiwikiレスポンシブSkin - mynote
  • http:// reddog.s35.xrea.com/wiki/Pukiwiki%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96Skin.html
• Wiki/PukiWiki/Skin - 180style wiki
  • https:// 180xz.com/wiki/index.php?Wiki/PukiWiki/Skin
  • よく参照されるSmartphone対応スキン

• official:PukiWiki/Download/1.5.1 での要望を転記しました -- umorigu 2016-05-17 (火) 01:25:45
• Twitter bootstrap等を使えると楽なのですが、標準でできるだけ外部ライブラリに依らない作りにしたいと思っていて、そこが悩みどころです -- umorigu 2016-05-17 (火) 01:23:47
• ぜひお願いする -- 匿名 2016-05-18 (水) 00:14:59
• dev:BugTrack2/368これも考えて欲しいです -- . 2016-06-15 (水) 01:43:40
• $pkwk_dtd に PKWK_DTD_HTML_5 を足したくなりますね。あるいは $pkwk_dtd 周辺のロジックをすべて削除して <!DOCTYPE html> に統一してしまうか。 -- bee 2016-09-28 (水) 20:36:40
• HTML 4 互換なkeitaiスキンの存続問題や、convert_html やmake_link などの改修話（HTML 5 のタグや属性を入れるかどうかや、BugTrack2/388ネタなど）にまで、いづれは発展しそうですねソレ＞DTD切り替え BugTrack/768#reea7092 -- 2016-09-30 (金) 20:38:14
• 半ば自己レスになりますが、HTML5 は DTD で定義されているわけではないので PKWK_DOCTYPE_HTML5 のほうがいいのかもしれない。あと $pkwk_dtd も $pkwk_doctype にしようとか、PKWK_DOCTYPE_XHTML5 が必要かどうかとか… -- bee 2016-10-01 (土) 20:31:41
• そうですね。DocTypeはもうHTML5のものでいいと思ってます。古いブラウザは無視してくれるでしょうし -- umorigu 2016-10-07 (金) 23:50:29
• BugTrack2/389 HTML5 の DOCTYPE 宣言を出力できるようにする -- 2016-10-15 (土) 14:40:32
• 進捗: xrea.beecle.net/pukiwiki/ -- bee 2016-12-03 (土) 12:55:52
  • とりあえずレスポンシブにはなったのですが、細かい調整がまだまだ必要そうです。 -- bee 2016-12-03 (土) 13:00:36
  • いいですね。素晴らしい！ -- umorigu 2016-12-04 (日) 07:03:42
  • 素晴らしい！私もスマートフォン用にいじっていた(途中の) css があったのですが、これだけきちんとしていれば不要そうですね… -- takotakot 2017-01-02 (月) 23:11:50
• こちらの方は1.5.2には盛り込まれますか？ -- tok 2017-11-14 (火) 12:46:02
  • 今の時点では「盛り込まない」つもりです。(CSSのファイル名が変わりましたが、構造はほとんど変わっていません) 1.4.7から(次の)1.5.2まで、意図的に、skin(pukiwiki.skin.php)やCSSの構造を変えずにいます。1.4.7の時代が長かったので、利用現場では各所でカスタマイズが多く入っていると考えており、そのカスタマイズを極力壊さないように新機能やバグ修正をしています。1.5.2までは今の構造にして、次のバージョン(1.5.3)でskinの大幅変更・スマートフォン対応を入れたいと思っています。大幅に変更するとバージョンアップできない人も出てくると思います。それから1.5.3はスマートフォン対応に集中してバージョンアップ間隔を短くしたいです -- umorigu 2017-11-15 (水) 00:54:18
• 横からですが、ということは最悪1.5.2で終わる人も多いということですね。現行の構造のままのバグ修正版楽しみにしています。 -- poison 2017-11-15 (水) 10:33:03
• そろそろ標準スキンでスマートフォン対応したい、ということで情報整理しました -- umorigu 2020-01-13 (月) 11:53:01
• 768px を境にした メディアクエリとFlexboxで対応しました commit:937d248904 -- umorigu 2020-01-22 (水) 00:35:46
• div#contents の flex-flow:row no-wrap; は flex-flow:row nowrap; ではないでしょうか。 -- kei1 2020-01-22 (水) 18:08:27
  • ご指摘ありがとうございます。その通りでした。このサイト (PukiWiki-dev) に適用しようとしてますが、他にも問題があって調整中です。まだ「完了」とは言えませんね -- umorigu 2020-01-24 (金) 01:32:19
• articleプラグインも題名の部分がMSG テキストボックスなので（1）と同じ問題が発生します -- D 2020-01-24 (金) 15:30:45
  • ありがとうございます。articleプラグインにも対処します -- umorigu 2020-02-04 (火) 06:47:05
• Chromeがユーザーエージェントの出し方を変えるようなので、そこでのテンプレートの切り替えは難しくなるかもしれませんね -- D 2020-01-24 (金) 15:38:15
  • そういう話もありますので今回のスマートフォン対応はkeitaiスキンとは違い、デバイスの幅のみを見て切り替えようとしています。従来のPukiWikiの切り替え機能とは異なった動作になります。いわゆるレスポンシブレイアウトです。User-Agentには依存しません -- umorigu 2020-01-29 (水) 23:57:57
• _b2387_afterですが長いURL（例 BugTrack/2387）があると横にはみ出し、その影響か分かりませんがメニューがコンテンツに重なります。iOS Safariです。 -- nuri 2020-02-05 (水) 05:05:04
  • 指摘ありがとうございます。『(9) (SP) 済 長い単語URLが折り返されずに画面からはみ出し、横スクロールバーが表示される』として列挙しました。”word-break:break-all;” で解決してみました -- umorigu 2020-02-06 (木) 01:07:50
• ほぼ問題ないレベルまで調整しました https:// pukiwiki.osdn.jp/_b2387_after/ -- umorigu 2020-02-06 (木) 03:36:49
• 最新のスマートフォン対応標準スキンで PukiWiki-official のデータを表示するようにしました (表示サンプル/動作確認用) https:// pukiwiki.osdn.jp/_b2387_o_after/ -- umorigu 2020-02-06 (木) 05:57:57
• スマートフォンの実機は Xperia 5 で動作確認しています -- umorigu 2020-02-06 (木) 06:07:44
• [_b2387_o_after] [iOS Safari](9) の修正ありがとうございます。 試験運用中と思われるprev nextは当環境だと大きいのですが、実装時はこの大きさが標準値でしょうか？賛否が分かれると思いますが、標準スキンにトップに戻るボタンがあると有難いです。 i.imgur.com/eAuxRqr.jpg -- nuri 2020-02-06 (木) 19:18:29
  • (1) ですがmemoとinsertが残っているようです。 -- nuri 2020-02-06 (木) 23:12:45
  • 確認ありがとうございます。 Prev と Next ボタンの説明がなくてすみません。このPrev/Next は今のこの確認環境限定で、PukiWiki本体には入れるつもりはありませんでした。 devの全BugTrackのを表示して BugTrack/2073 BugTrack/2237 が期待通りに表示されないことがわかりました。memoとinsertも対応します -- umorigu 2020-02-07 (金) 01:17:18
  • （11）対応ありがとうございます。prev nextの件承知しました。 -- nuri 2020-02-07 (金) 08:13:33
• 2020/02/08 既存ページのレイアウト確認
  • Internal Server Error - offitial:欲しいプラグイン/234 offitial:自作プラグイン/1 -- umorigu 2020-02-07 (金) 09:00:36
  • tracker レイアウト崩れ offitial:欲しいプラグイン / offitial:WebTrack (tracker) -- umorigu 2020-02-07 (金) 09:07:51
• 一通り解決しました。tracker設定自由度とスマートフォンレイアウトの共存が難しいですね。禁断の !import を使ってしまった -- umorigu 2020-02-08 (土) 07:43:53
• 「メディアクエリ多すぎ問題」を除いてすべて対応しました。 commit:0d96704797 -- umorigu 2020-02-09 (日) 06:37:44
• [_b2387_o_after] 現行Officialで使われているincludeのオプション短文化（on,off）は1.5.3に追加されますか？ -- nuri 2020-02-09 (日) 10:24:50
  • 「includeのオプション短文化（on,off）」これスマートフォン対応のなにかですか？ 別の話でしょうか？ どこかで話されていればリンクを貼ってほしいです -- umorigu 2020-02-09 (日) 11:30:32
  • すみません。説明不足および本題のスマホ対応とは無関係でした。質問箱のソースですが、現行Official1.5.2+では#include(:admin/QA_Board,off) でタイトルリンク無効になるようですが、[_b2387_o_after]では非対応のようです。on,offのオプションはofficial:PukiWiki/1.4/Manual/Plugin/H-Kに載っていません。 -- nuri 2020-02-09 (日) 11:58:11
    • こちら自己解決しました。現行Officalのincludeが旧式？のようでした。BugTrack/712 失礼しました。 -- nuri 2020-02-09 (日) 12:14:34
  • 自己解決、、というより、Officialサイトの問題ですねこれは。ご指摘ありがとうございました。BugTrack/712で一時的に入ったカスタマイズが今も使われていたようです。notitleが採用されたのならこちらを利用するように変えるべきですね -- umorigu 2020-02-10 (月) 22:46:18
  • さらに調べました。 Official は include の on/off のカスタマイズが残っていたわけではなくて 『define('PLUGIN_INCLUDE_WITH_TITLE', FALSE);』の設定になっていました。つまり、 include オプションの "off" は単に間違った指定で、何も効果がなかった、ということのようです -- umorigu 2020-02-11 (火) 00:01:43
  • 確認ありがとうございます -- nuri 2020-02-12 (水) 12:45:03
• メディアクエリ部分 @media (max-width:767px) {...} をまとめてみました。 commit:68b31a025c 既存CSSからの変更点が少なく見えるのと、スマートフォン対応部分がまとまっている点 (別のカスタマイズに変えやすい) でこちらのほうがよさそうです -- umorigu 2020-02-12 (水) 02:47:27
  • さらにclass指定を改良しました。"7 files changed, 120 insertions(+), 29 deletions(-)" まで小さくなりました commit:e8606e584c -- umorigu 2020-02-13 (木) 01:50:57
  • もう少し改良 commit:b5c7a243be9 "7 files changed, 110 insertions(+), 29 deletions(-)" -- umorigu 2020-02-13 (木) 20:42:20
• お疲れさまです。MenuBarのリストマークが途切れるのが気になります。 -- nuri 2020-02-13 (木) 06:04:23
  • div#menubar ulにlist-style-position:insideを追加すると気にならなくなりました。 -- nuri 2020-02-13 (木) 08:19:48
  • これは前からある問題なので別BugTrackで管理します BugTrack/2502 -- umorigu 2020-02-13 (木) 18:12:27
• calendar2 のカレンダーが細い (レイアウト変更に伴い、本文のフォントが少し大きくなり、元のカレンダーの幅150pxでは収まらなくなった) -- umorigu 2020-03-05 (木) 01:27:42
  • カレンダーの幅を 150px → 200px にして解決 commit:0c6e0e1c90 -- umorigu 2020-03-05 (木) 02:46:58
• bugftrackプラグインのテーブルレイアウトの改善 commit:69ed02d7ea -- umorigu 2020-03-21 (土) 08:32:31
• 本文側が長いとmenubar側が重なって本文末尾が見えません。このページやrecentchangeで確認。スマホ　Android　Chrome -- nuri 2020-03-21 (土) 14:45:38
  • レポートありがとうございます。バージョンや機種がわかりますか？ Xperia 5では問題ないようでした https:// imgur.com/a/8ixDLGQ -- umorigu 2020-03-22 (日) 16:22:34
• 確認ありがとうございます。当方のバージョンが古い(43)ことが原因のようです。新しいChromeでは発生しませんでした。大変失礼しました。 -- nuri 2020-03-22 (日) 21:16:57

• BugTrack
• 開発版
  • リポジトリ
  • 開発日記
• :CategoryDev
  • PukiWiki2
  • PukiWiki/1.5
  • PukiWiki/1.4
  • PukiWiki/1.3
  • メーリングリスト
  • 開発談義
  • 雑談
• 開発者向け情報
  • Books
  • プラグイン

最新の16件