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 とする。おおむね、タブレットの縦長表示はス...
&img(pukiwiki_smartphone_layout_bugtrack_2387.png,,80%);
** Snapshot テスト [#i3912035]
- (PukiWiki-devデータ) https:// pukiwiki.osdn.jp/_b2387_b...
- (PukiWiki-devデータ) https:// pukiwiki.osdn.jp/_b2387_a...
- (PukiWiki-officialデータ) https:// pukiwiki.osdn.jp/_b2...
** 発生した問題 [#u3bbcb67]
(2020-01-24現在)
- (1)(SP) 済 %%comment, pcomment プラグインの MSG テキス...
-- &img(b2387_sized70_comment_msg.png,,40%);
-- comment, pcomment の input type=text に対して size属性...
- (2)(SP) (一部済) %%もともと font-size: 90%; が多用され...
-- 今回は大きく崩れないことを優先し、デザイン変更は別に対...
-- 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 二重構造でレイアウ...
-- 標準スキンのままでは問題にならないようだ
- (5)(SP) 済 %%pre タグの要素が画面をはみ出す%%
-- div#body { max-size: 98%; } で解決
- (6)(SP) 済 %%画像が画面をはみ出す%%
-- "max-width:95%;" で解決
- (7)(PC) 済 %%幅の広いテーブルや要素がbodyにあるとメニュ...
-- &img(b2389_collapse_pc_layout.png,,40%);
-- "width: 9em;" の代わりに "min-width: 9em" で解決
- (8)(PC) 済 %%検索の詳細表示が画面をはみ出す%% %%(これは...
--解決した。 div#contents div#body の2段になっていたもの...
-- Before: &img(b2387_before_search2.png,,50%); After: &i...
- (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プラグイン、in...
-- 対応した
- (12) 済 %%read (通常表示) では div#contents div#body の...
-- 必ず div#contents div#body の構造になるようにした
- (13) 済 %%tDiaryスキン、 keitaiプロファイル等、標準スキ...
-- 対応した HTML側 (input size="60"等) はできるだけ変更せ...
- (14) 済 %%pukiwiki.css で media query "@media (max-widt...
-- いったんこのまま。今はプラグインごとのスキン設定を集約...
-- まとめました commit:e8606e584c
- (15) calendar2 プラグイン - カレンダーの幅が小さく2桁日...
-- 1.5.2 (横150px): &img(pkw-2389_calendar2_normal_v152.p...
-- 問題: &img(pkw-2389_calendar2_thin.png); 解決 (横200px...
** まだ問題が残っているページ [2020/02/06現在] [#t14c46ce]
- div#contents よりも内側の div#body の幅が広い
-- [[BugTrack/709]] 解決 %%(SP) 横スクロールバーが表示さ...
-- [[BugTrack/579]] 解決 %%(SP) 横スクロールバーが表示さ...
-- [[開発談義/5]] 解決 %%(SP) 横スクロールバーが表示され...
-- [[スキン]] 解決 %%(SP) 横スクロールバーが表示される%%
- 注釈が折り返されない
-- [[BugTrack/2073]] 解決 %%(SP) 横スクロールバーが表示さ...
-- [[BugTrack/2237]] 解決 %%(SP) 横スクロールバーが表示さ...
- %%pcomment コンパイルエラー%% 解決(2020/02/08)
-- [[official:欲しいプラグイン/234]] [[official:自作プラ...
- %%traker form レイアウト崩れ%% 解決 (2020/02/08)
-- [[official:欲しいプラグイン]] [[official:WebTrack]]
--- tracker設定の自由度とスマートフォンレイアウトの共存が...
** 参照 [#o284f39b]
- [[PukiWiki/1.4/ちょっと便利に/skinをテーブルレイアウト...
** 標準PukiWikiレイアウト (PC向け) [#s097a5ef]
- ヘッダー、フッターが上下固定
- メインコンテンツ部分の左側に MenuBar
- 右側にもカラムを追加したものは「3カラムレイアウト」「聖...
** レイアウト手法 [#v9448943]
- Tableレイアウト: CSSを使わずHTML tableのみで要素を配置...
- CSS / float レイアウト
-- tableを使わずCSSでbox要素を横並びにする場合に昔からよ...
- CSS3 / display: table
-- テーブルに近い動作
- CSS3 / Flexbox レイアウト
-- モダンブラウザはほぼ対応している
- CSS3 / Grid レイアウト
-- IE11以外のモダンブラウザは対応している。IE11は準拠レベ...
** スマートフォン向けレイアウト [#bd631613]
よくあるスマートフォン向けレイアウト:
- 左右にカラムを並べず、メニュー (index) も含めて上から下...
- メニューページ (MenuBar) よりコンテンツを先に表示させる
- ハンバーガーメニュー (ボタンクリックで各種メニューやリ...
** PC / スマートフォン切り替え [#l0e6f2c4]
- HTTP User-Agent ヘッダを見て、スマートフォンっぽいUAで...
-- User-Agent の手動メンテナンスが必要
- ブラウザのWindow幅に応じてレイアウト切り替え
-- CSS media query でwindow幅に応じて適用するCSSを変える
-- PCでもウィンドウ幅を狭くするとスマートフォン用レイアウ...
-- 最近はこちらが主流 (User-Agentメンテナンスが不要)
-- Flexbox の機能を駆使して media query を使わない手法も...
--- メディアクエリを使わないためにはmainコンテンツ領域の...
** 互換性 [#ef4b2500]
- media query, CSS3やいわゆる「モダンブラウザ」ベースにす...
- 対応案
-- 現行のPukiWiki標準スキンを何らかの形で残す (レガシース...
-- 「レガシーブラウザへ対応したい人はPukiWiki 1.5.2を利用...
** 外部サイト [#hfd6c851]
- PukiWiki1.5.2をレスポンシブデザインに変更する! | SEの...
-- https:// dajya-ranger.com/pukiwiki/make-responsive-des...
- レスポンシブ対応スキン「sr」がPukiWiki 1.5.2に対応しま...
-- https:// srcw.net/archives/491
- PukiwikiレスポンシブSkin - mynote
-- http:// reddog.s35.xrea.com/wiki/Pukiwiki%E3%83%AC%E3%...
- Wiki/PukiWiki/Skin - 180style wiki
-- https:// 180xz.com/wiki/index.php?Wiki/PukiWiki/Skin
-- よく参照されるSmartphone対応スキン
--------
- [[official:PukiWiki/Download/1.5.1]] での要望を転記しま...
- Twitter bootstrap等を使えると楽なのですが、標準でできる...
- ぜひお願いする -- [[匿名]] &new{2016-05-18 (水) 00:14:5...
- [[dev:BugTrack2/368]]これも考えて欲しいです -- [[.>./]]...
- $pkwk_dtd に PKWK_DTD_HTML_5 を足したくなりますね。ある...
- HTML 4 互換なkeitaiスキンの存続問題や、convert_html やm...
- 半ば自己レスになりますが、HTML5 は DTD で定義されている...
- そうですね。DocTypeはもうHTML5のものでいいと思ってます...
- [[BugTrack2/389]] HTML5 の DOCTYPE 宣言を出力できるよう...
- 進捗: xrea.beecle.net/pukiwiki/ -- [[bee]] &new{2016-12...
-- とりあえずレスポンシブにはなったのですが、細かい調整が...
-- いいですね。素晴らしい! -- [[umorigu]] &new{2016-12-0...
-- 素晴らしい!私もスマートフォン用にいじっていた(途中の)...
- こちらの方は1.5.2には盛り込まれますか? -- [[tok]] &new...
-- 今の時点では「盛り込まない」つもりです。(CSSのファイル...
- 横からですが、ということは最悪1.5.2で終わる人も多いとい...
- そろそろ標準スキンでスマートフォン対応したい、というこ...
- 768px を境にした メディアクエリとFlexboxで対応しました ...
- div#contents の flex-flow:row no-wrap; は flex-flow:row...
-- ご指摘ありがとうございます。その通りでした。このサイト...
- articleプラグインも題名の部分がMSG テキストボックスなの...
-- ありがとうございます。articleプラグインにも対処します ...
- Chromeがユーザーエージェントの出し方を変えるようなので...
-- そういう話もありますので今回のスマートフォン対応はkeit...
- _b2387_afterですが長いURL(例 BugTrack/2387)があると横...
-- 指摘ありがとうございます。『(9) (SP) 済 長い単語URLが...
- ほぼ問題ないレベルまで調整しました https:// pukiwiki.os...
- 最新のスマートフォン対応標準スキンで PukiWiki-official ...
- スマートフォンの実機は Xperia 5 で動作確認しています --...
- [_b2387_o_after] [iOS Safari](9) の修正ありがとうござい...
-- (1) ですがmemoとinsertが残っているようです。 -- [[nuri...
-- 確認ありがとうございます。 Prev と Next ボタンの説明が...
-- (11)対応ありがとうございます。prev nextの件承知しま...
- 2020/02/08 既存ページのレイアウト確認
-- Internal Server Error - [[offitial:欲しいプラグイン/23...
-- tracker レイアウト崩れ [[offitial:欲しいプラグイン]] /...
- 一通り解決しました。tracker設定自由度とスマートフォンレ...
- 「メディアクエリ多すぎ問題」を除いてすべて対応しました...
- [_b2387_o_after] 現行Officialで使われているincludeのオ...
-- 「includeのオプション短文化(on,off)」これスマートフ...
-- すみません。説明不足および本題のスマホ対応とは無関係で...
--- こちら自己解決しました。現行Officalのincludeが旧式?...
-- 自己解決、、というより、Officialサイトの問題ですねこれ...
-- さらに調べました。 Official は include の on/off のカ...
-- 確認ありがとうございます -- [[nuri]] &new{2020-02-12 (...
- メディアクエリ部分 @media (max-width:767px) {...} をま...
-- さらにclass指定を改良しました。"7 files changed, 120 i...
-- もう少し改良 commit:b5c7a243be9 "7 files changed, 110 ...
- お疲れさまです。MenuBarのリストマークが途切れるのが気に...
-- div#menubar ulにlist-style-position:insideを追加すると...
-- これは前からある問題なので別BugTrackで管理します [[Bug...
- calendar2 のカレンダーが細い (レイアウト変更に伴い、本...
-- カレンダーの幅を 150px → 200px にして解決 commit:0c6e0...
- bugftrackプラグインのテーブルレイアウトの改善 commit:69...
- 本文側が長いとmenubar側が重なって本文末尾が見えません。...
-- レポートありがとうございます。バージョンや機種がわかり...
- 確認ありがとうございます。当方のバージョンが古い(43)こ...
#comment
終了行:
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 とする。おおむね、タブレットの縦長表示はス...
&img(pukiwiki_smartphone_layout_bugtrack_2387.png,,80%);
** Snapshot テスト [#i3912035]
- (PukiWiki-devデータ) https:// pukiwiki.osdn.jp/_b2387_b...
- (PukiWiki-devデータ) https:// pukiwiki.osdn.jp/_b2387_a...
- (PukiWiki-officialデータ) https:// pukiwiki.osdn.jp/_b2...
** 発生した問題 [#u3bbcb67]
(2020-01-24現在)
- (1)(SP) 済 %%comment, pcomment プラグインの MSG テキス...
-- &img(b2387_sized70_comment_msg.png,,40%);
-- comment, pcomment の input type=text に対して size属性...
- (2)(SP) (一部済) %%もともと font-size: 90%; が多用され...
-- 今回は大きく崩れないことを優先し、デザイン変更は別に対...
-- 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 二重構造でレイアウ...
-- 標準スキンのままでは問題にならないようだ
- (5)(SP) 済 %%pre タグの要素が画面をはみ出す%%
-- div#body { max-size: 98%; } で解決
- (6)(SP) 済 %%画像が画面をはみ出す%%
-- "max-width:95%;" で解決
- (7)(PC) 済 %%幅の広いテーブルや要素がbodyにあるとメニュ...
-- &img(b2389_collapse_pc_layout.png,,40%);
-- "width: 9em;" の代わりに "min-width: 9em" で解決
- (8)(PC) 済 %%検索の詳細表示が画面をはみ出す%% %%(これは...
--解決した。 div#contents div#body の2段になっていたもの...
-- Before: &img(b2387_before_search2.png,,50%); After: &i...
- (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プラグイン、in...
-- 対応した
- (12) 済 %%read (通常表示) では div#contents div#body の...
-- 必ず div#contents div#body の構造になるようにした
- (13) 済 %%tDiaryスキン、 keitaiプロファイル等、標準スキ...
-- 対応した HTML側 (input size="60"等) はできるだけ変更せ...
- (14) 済 %%pukiwiki.css で media query "@media (max-widt...
-- いったんこのまま。今はプラグインごとのスキン設定を集約...
-- まとめました commit:e8606e584c
- (15) calendar2 プラグイン - カレンダーの幅が小さく2桁日...
-- 1.5.2 (横150px): &img(pkw-2389_calendar2_normal_v152.p...
-- 問題: &img(pkw-2389_calendar2_thin.png); 解決 (横200px...
** まだ問題が残っているページ [2020/02/06現在] [#t14c46ce]
- div#contents よりも内側の div#body の幅が広い
-- [[BugTrack/709]] 解決 %%(SP) 横スクロールバーが表示さ...
-- [[BugTrack/579]] 解決 %%(SP) 横スクロールバーが表示さ...
-- [[開発談義/5]] 解決 %%(SP) 横スクロールバーが表示され...
-- [[スキン]] 解決 %%(SP) 横スクロールバーが表示される%%
- 注釈が折り返されない
-- [[BugTrack/2073]] 解決 %%(SP) 横スクロールバーが表示さ...
-- [[BugTrack/2237]] 解決 %%(SP) 横スクロールバーが表示さ...
- %%pcomment コンパイルエラー%% 解決(2020/02/08)
-- [[official:欲しいプラグイン/234]] [[official:自作プラ...
- %%traker form レイアウト崩れ%% 解決 (2020/02/08)
-- [[official:欲しいプラグイン]] [[official:WebTrack]]
--- tracker設定の自由度とスマートフォンレイアウトの共存が...
** 参照 [#o284f39b]
- [[PukiWiki/1.4/ちょっと便利に/skinをテーブルレイアウト...
** 標準PukiWikiレイアウト (PC向け) [#s097a5ef]
- ヘッダー、フッターが上下固定
- メインコンテンツ部分の左側に MenuBar
- 右側にもカラムを追加したものは「3カラムレイアウト」「聖...
** レイアウト手法 [#v9448943]
- Tableレイアウト: CSSを使わずHTML tableのみで要素を配置...
- CSS / float レイアウト
-- tableを使わずCSSでbox要素を横並びにする場合に昔からよ...
- CSS3 / display: table
-- テーブルに近い動作
- CSS3 / Flexbox レイアウト
-- モダンブラウザはほぼ対応している
- CSS3 / Grid レイアウト
-- IE11以外のモダンブラウザは対応している。IE11は準拠レベ...
** スマートフォン向けレイアウト [#bd631613]
よくあるスマートフォン向けレイアウト:
- 左右にカラムを並べず、メニュー (index) も含めて上から下...
- メニューページ (MenuBar) よりコンテンツを先に表示させる
- ハンバーガーメニュー (ボタンクリックで各種メニューやリ...
** PC / スマートフォン切り替え [#l0e6f2c4]
- HTTP User-Agent ヘッダを見て、スマートフォンっぽいUAで...
-- User-Agent の手動メンテナンスが必要
- ブラウザのWindow幅に応じてレイアウト切り替え
-- CSS media query でwindow幅に応じて適用するCSSを変える
-- PCでもウィンドウ幅を狭くするとスマートフォン用レイアウ...
-- 最近はこちらが主流 (User-Agentメンテナンスが不要)
-- Flexbox の機能を駆使して media query を使わない手法も...
--- メディアクエリを使わないためにはmainコンテンツ領域の...
** 互換性 [#ef4b2500]
- media query, CSS3やいわゆる「モダンブラウザ」ベースにす...
- 対応案
-- 現行のPukiWiki標準スキンを何らかの形で残す (レガシース...
-- 「レガシーブラウザへ対応したい人はPukiWiki 1.5.2を利用...
** 外部サイト [#hfd6c851]
- PukiWiki1.5.2をレスポンシブデザインに変更する! | SEの...
-- https:// dajya-ranger.com/pukiwiki/make-responsive-des...
- レスポンシブ対応スキン「sr」がPukiWiki 1.5.2に対応しま...
-- https:// srcw.net/archives/491
- PukiwikiレスポンシブSkin - mynote
-- http:// reddog.s35.xrea.com/wiki/Pukiwiki%E3%83%AC%E3%...
- Wiki/PukiWiki/Skin - 180style wiki
-- https:// 180xz.com/wiki/index.php?Wiki/PukiWiki/Skin
-- よく参照されるSmartphone対応スキン
--------
- [[official:PukiWiki/Download/1.5.1]] での要望を転記しま...
- Twitter bootstrap等を使えると楽なのですが、標準でできる...
- ぜひお願いする -- [[匿名]] &new{2016-05-18 (水) 00:14:5...
- [[dev:BugTrack2/368]]これも考えて欲しいです -- [[.>./]]...
- $pkwk_dtd に PKWK_DTD_HTML_5 を足したくなりますね。ある...
- HTML 4 互換なkeitaiスキンの存続問題や、convert_html やm...
- 半ば自己レスになりますが、HTML5 は DTD で定義されている...
- そうですね。DocTypeはもうHTML5のものでいいと思ってます...
- [[BugTrack2/389]] HTML5 の DOCTYPE 宣言を出力できるよう...
- 進捗: xrea.beecle.net/pukiwiki/ -- [[bee]] &new{2016-12...
-- とりあえずレスポンシブにはなったのですが、細かい調整が...
-- いいですね。素晴らしい! -- [[umorigu]] &new{2016-12-0...
-- 素晴らしい!私もスマートフォン用にいじっていた(途中の)...
- こちらの方は1.5.2には盛り込まれますか? -- [[tok]] &new...
-- 今の時点では「盛り込まない」つもりです。(CSSのファイル...
- 横からですが、ということは最悪1.5.2で終わる人も多いとい...
- そろそろ標準スキンでスマートフォン対応したい、というこ...
- 768px を境にした メディアクエリとFlexboxで対応しました ...
- div#contents の flex-flow:row no-wrap; は flex-flow:row...
-- ご指摘ありがとうございます。その通りでした。このサイト...
- articleプラグインも題名の部分がMSG テキストボックスなの...
-- ありがとうございます。articleプラグインにも対処します ...
- Chromeがユーザーエージェントの出し方を変えるようなので...
-- そういう話もありますので今回のスマートフォン対応はkeit...
- _b2387_afterですが長いURL(例 BugTrack/2387)があると横...
-- 指摘ありがとうございます。『(9) (SP) 済 長い単語URLが...
- ほぼ問題ないレベルまで調整しました https:// pukiwiki.os...
- 最新のスマートフォン対応標準スキンで PukiWiki-official ...
- スマートフォンの実機は Xperia 5 で動作確認しています --...
- [_b2387_o_after] [iOS Safari](9) の修正ありがとうござい...
-- (1) ですがmemoとinsertが残っているようです。 -- [[nuri...
-- 確認ありがとうございます。 Prev と Next ボタンの説明が...
-- (11)対応ありがとうございます。prev nextの件承知しま...
- 2020/02/08 既存ページのレイアウト確認
-- Internal Server Error - [[offitial:欲しいプラグイン/23...
-- tracker レイアウト崩れ [[offitial:欲しいプラグイン]] /...
- 一通り解決しました。tracker設定自由度とスマートフォンレ...
- 「メディアクエリ多すぎ問題」を除いてすべて対応しました...
- [_b2387_o_after] 現行Officialで使われているincludeのオ...
-- 「includeのオプション短文化(on,off)」これスマートフ...
-- すみません。説明不足および本題のスマホ対応とは無関係で...
--- こちら自己解決しました。現行Officalのincludeが旧式?...
-- 自己解決、、というより、Officialサイトの問題ですねこれ...
-- さらに調べました。 Official は include の on/off のカ...
-- 確認ありがとうございます -- [[nuri]] &new{2020-02-12 (...
- メディアクエリ部分 @media (max-width:767px) {...} をま...
-- さらにclass指定を改良しました。"7 files changed, 120 i...
-- もう少し改良 commit:b5c7a243be9 "7 files changed, 110 ...
- お疲れさまです。MenuBarのリストマークが途切れるのが気に...
-- div#menubar ulにlist-style-position:insideを追加すると...
-- これは前からある問題なので別BugTrackで管理します [[Bug...
- calendar2 のカレンダーが細い (レイアウト変更に伴い、本...
-- カレンダーの幅を 150px → 200px にして解決 commit:0c6e0...
- bugftrackプラグインのテーブルレイアウトの改善 commit:69...
- 本文側が長いとmenubar側が重なって本文末尾が見えません。...
-- レポートありがとうございます。バージョンや機種がわかり...
- 確認ありがとうございます。当方のバージョンが古い(43)こ...
#comment
ページ名: