BugTrack/2387 の履歴ソース(No.35)

#author("2020-01-24T15:38:15+09:00","","")
RIGHT:&size(12){Category:[[Design>:Design]], [[CSS]]};
* スマートフォン対応 [#kdb7f613]

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

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

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

(2020-01-24現在)

- (1)(SP) comment, pcomment プラグインの MSG テキストボックスが size=70 固定で表示されており、レイアウトが崩れる (テキストボックスの分ページが広くなる)
- (2)(SP) もともと font-size: 90%; が多用されているが、多重にかかった結果、スマートフォンでの文字サイズが読めないほど小さくなる
- (3)(SP) bugtrack プラグイン Form の見出しが小さすぎる
- (4)(PC) メニューが td-div 二重構造でレイアウトを合わせていたのをdiv 1階層だけで同じレイアウトを再現させる必要あり
- (5)(SP) pre タグの要素が画面をはみ出す
- (6)(SP) 画像が画面をはみ出す
- (7)(PC) 幅の広いテーブルがbodyにあるとメニューが極端に狭くなる ([[BugTrack]])
- (8)(PC) 検索の詳細表示が画面をはみ出す (これは[[BugTrack/2490]]でのエンバグかもしれない)

** 参照 [#o284f39b]

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

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

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

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

- Tableレイアウト: CSSを使わずHTML tableのみで要素を配置する (現行PukiWikiの手法)
- CSS / float レイアウト
-- tableを使わずCSSでbox要素を横並びにする場合に昔からよく用いられている手法
- 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};
- Chromeがユーザーエージェントの出し方を変えるようなので、そこでのテンプレートの切り替えは難しくなるかもしれませんね -- [[D]] &new{2020-01-24 (金) 15:38:15};

#comment