BugTrack/2387 の編集

RIGHT:&size(12){Category:[[Design>:Design]], [[CSS]]};
* スマートフォン対応 [#kdb7f613]

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

** メッセージ [#v07f8bbd]
標準スキンをスマートフォン対応にしたい。スマートフォンの画面サイズに最適化して表示する。

表示サンプル:

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

&img(pukiwiki_smartphone_layout_bugtrack_2387.png,,80%);

** Snapshot テスト [#i3912035]

- (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/ (レスポンシブレイアウト)

** 発生した問題 [#u3bbcb67]

(2020-01-24現在)

- (1)(SP) 済 %%comment, pcomment プラグインの MSG テキストボックスが size=70 固定で表示されており、レイアウトが崩れる (テキストボックスの分ページが広くなる)%%
-- &img(b2387_sized70_comment_msg.png,,40%);
-- 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 の見出しが小さすぎる%%
-- &img(b2387_sp_bugtrack_form_collapse.png,,50%);
-- 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]])%%
-- &img(b2389_collapse_pc_layout.png,,40%);
-- "width: 9em;" の代わりに "min-width: 9em" で解決
- (8)(PC) 済 %%検索の詳細表示が画面をはみ出す%% %%(これは[[BugTrack/2490]]でのエンバグかもしれない。%% Beforeでは問題ないので[[BugTrack/2490]]とは無関係でした)
--解決した。 div#contents div#body の2段になっていたものを div#bodyの一段にした commit:ca70b85203
-- Before: &img(b2387_before_search2.png,,50%); After: &img(b2387_after_search2.png,,50%);
- (9) (SP) 済 %%長い単語URLが折り返されずに画面からはみ出し、横スクロールバーが表示される。%%
-- &img(b2387_nowrap_long_url.png,,50%);
-- 単語の途中でも折り返す "word-break:break-all;" で解決
 div#contents {
   word-break:break-all;
   overflow-wrap:break-word;
   word-wrap:break-word;
 }
- (10) (SP) 済 %%ひな型とするページのページ名が長いとスクロールバーが表示される%%
-- &img(b2387_long_page_name_on_edit.png,,50%);
-- "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): &img(pkw-2389_calendar2_normal_v152.png);
-- 問題: &img(pkw-2389_calendar2_thin.png); 解決 (横200px): &img(pkw-2389_calendar2_200px.png);

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

- 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設定の自由度とスマートフォンレイアウトの共存が難しい...

** 参照 [#o284f39b]

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

** 標準PukiWikiレイアウト (PC向け) [#s097a5ef]

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

** レイアウト手法 [#v9448943]

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

** スマートフォン向けレイアウト [#bd631613]

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

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

** PC / スマートフォン切り替え [#l0e6f2c4]

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

** 互換性 [#ef4b2500]

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

** 外部サイト [#hfd6c851]

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

#comment

タイムスタンプを変更しない