#author("2020-02-06T12:07:58+09:00","","")
#author("2020-02-06T19:18:29+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]
標準スキンをスマートフォン対応にしたい。スマートフォンの画面サイズに最適化して表示する。

** 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%" を追加指定
- (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%;" で解決

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

- [[BugTrack/709]] 解決 %%(SP) 横スクロールバーが表示される%%
- [[BugTrack/579]] 解決 %%(SP) 横スクロールバーが表示される%%
- [[開発談義/5]] 解決 %%(SP) 横スクロールバーが表示される%%
- [[スキン]] 解決 %%(SP) 横スクロールバーが表示される%%
- [[BugTrack/2073]] (SP) 横スクロールバーが表示される

- [[BugTrack/2237]]

** 参照 [#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};

#comment


トップ   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Site admin: PukiWiki Development Team

PukiWiki 1.5.3+ © 2001-2020 PukiWiki Development Team. Powered by PHP 5.6.40-0+deb8u12. HTML convert time: 0.281 sec.

OSDN