![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
#author("2024-02-16T22:50:28+09:00","","") #author("2025-01-29T19:26:09+09:00","","") Wikiアプデの際に生まれた副産物の配布および紹介が主なページ Wikiカスタムにあたってのメモも記述 …の予定 ----- &color(Red){このページは今後たぶん更新しません}; 改造スキンをお求めの方はTFBL版をご利用下さい → [[PukiWiki備忘録・続:https://t-fbl.wiki/?PukiWiki%E5%82%99%E5%BF%98%E9%8C%B2%E3%83%BB%E7%B6%9A]] ----- この項目のそれは全て1.5.2以降＋PHP7系でしかテストしていません 旧環境だとエラーを吐く可能性もあります。利用は自己責任で ----- #contents *配布 [#v2b7ecd5] **PukiWiki 1.5.3向けskin [Ver. 92738] [#leb7e21b] &ref(PukiWiki備忘録/Screenshot_PC.png,25%); &ref(PukiWiki備忘録/Screenshot_SP.png,10%); ***使い方 [#ue826699] +ionicons v2一式を[[外部の専用ページへ:https://ionicons.com/v2/]]からダウンロード、解凍 +スキン一式を[[添付ファイル一覧:https://www.tffac.wiki/?plugin=attach&pcmd=open&file=%5BVer.%2092738%5D%2B%2B.zip&refer=PukiWiki%E5%82%99%E5%BF%98%E9%8C%B2]]よりダウンロード、解凍 +skinchg.phpのみディレクトリの最上層に置き、残りはskin直下へ投下。これでOK ***収録内容 [#vf944670] -pukiwiki.skin.php --[Ver. 92738]スキン本体 -pukiwiki.css --[Ver. 92738]スキン専用CSS -pukiwiki-sp.css --[Ver. 92738]スキン専用CSS。スマホ／タブレット用 -skinchg.php --疑似PC表示固定機能。Cookieを利用しページ最上部のトグルアイコンでON/OFFを切り替える -smooth-scroll.js --スムーズスクロール用。jQuery呼び出しは不必要。再配布 ***通常のスキンとの違い [#z1b8b458] -Milligramのソースを一部流用したFlexbox仕様でレイアウトを再構築 -Ioniconsを利用して編集者向けメニューをアイコン化 -デフォルトスキンよりレスポンシブ対応を強化、PC表示固定機能も搭載 -ページタイトル下に簡易検索窓搭載 -後々カスタマイズしやすくする為、無駄な隙間は悉く撤廃 ***動作確認済ブラウザ [#j115f17c] Internet Explorer 11 Microsoft Edge - EdgeHTML Microsoft Edge - Chromium Waterfox Classic Steam内蔵ブラウザ ***動作確認済機種 [#l0f14da1] iPhone SE - 第一世代 Xperia 5 Xperia 10 II Xperia 10 III Lite Pixel 5 Xbox Series S PS Vitaも表示が若干崩れますが一応閲覧可能 ***ライセンス [#m07dc5ab] スキン本体と専用CSSのライセンスは[[PukiWiki本家:https://pukiwiki.osdn.jp/?PukiWiki/Install/%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6]]に準ずる形 再配布している同梱物(smooth-scroll.js)はMIT ***アップデート履歴 [#yb9ea288] #region([Ver. 92738]+1 → [Ver. 92738]++の変更点 (2021-09-27)) viewportの再見直し。基本はwidth=device-width、PC表示固定時は720に変更 このviewportの変更に伴い、body,input,textarea,selectのfont-size絡みを部分的に再調整 .row .column、row .column-menuのpaddingを微修正。本来0であるべき所に僅かながら余計な余白があった ついでにスマホ向けCSSにおける.row .column、.row .column-menuの設定を統一。記述が僅かに違っていた bodyにword-wrap:break-word;を追加。異様に長いURLや英文があるとFlexboxの枠からはみ出るのでその対策 横幅が1024px未満になると右上のロゴが無い物として扱われる。div#navigator >:last-child { display:none; } table[class="style_table"]時のみoverflow-x:auto。画面に収まりきらない表は横スクロールで対処 特殊な条件下でのみ入力フォーム絡みが画面から飛び出す不具合を発見。適宜max-width指定をしつつ色合いも微調整 端末の縦横判定をorientation: portraitからmax-width: 555pxに変更。単純な比較だとandroidのみ入力支援出現中に崩れる 上記の調整により極小端末の大半は横にしてもスマホ向け表示のまま。サポートするのは4インチの初代iPhone SEまで #endregion #region([Ver. 92738] → [Ver. 92738]+1の変更点 (2021-04-07)) viewportの見直し。想定最大幅を1366 → 1280に変更 font-sizeをbodyのみrem＆px+calc、他は〇〇％で統一＆再調整。調整前はやや混在 letter-spacingおよびline-height、要するに文字同士の間隔と行間の微調整 ロゴの調整。PC表示時のみ右上設置以外はデフォルト仕様に先祖返り 入力フォーム周りの調整。Androidにおける諸々の問題は大体解決したはず。iOS？知らんそんなことはry 縦向き表示時のみブラウザによるおせっかいな自動拡大を無効化。手動には影響無し、一つ上の調整とは別物 アイコン配置を微調整。縦向き表示時下部にメニューを増やす案はテスト中の使用感が好ましくなかったので中止 各調整によりCSS3非対応環境は完全お断り化。とはいえWindows 2000でも対応出来るレベルの話だし…まあ… #endregion #region(v0.4 → [Ver. 92738]の変更 (2020-09-27)) Type_TR → [Ver. 92738]に名称変更 見出しの再調整 配色とfont-familyの一部見直し lastmodifiedおよびHTML convert timeをページタイトル見出しのtitleに格納 ページ名直下に簡易検索窓を設置。メニューバーに無理やり突っ込んでる案件をよく見るので… スクロール用jsをjQueryを使うmoveTo.jsから、jQueryを使わないsmooth-scroll.jsにチェンジ PC表示固定機能の追加。この影響でCSSが2つに分けられ、専用アイテムとしてskinchg.phpが増えます レスポンシブ対応が甘かった部分の大幅修正。ただしtableのみプラグインを考慮してほぼそのまま 後にカスタマイズしやすくする為、意図せず生まれていた無駄な余白を徹底的に撤廃 納得行ってない所の調整 ソースコードの整理 #endregion #region(v0.3 → v0.4の変更点 (2020-05-17)) 見出しの間隔調整および配色一部変更 bodyの背景色を指定していなかった事で起きた、Steam内蔵ブラウザで背景が真っ黒になる問題への対応 #endregion #region(v0.2 → v0.3の変更点 (2020-03-27)) 空白行、div.spacerの調整 px指定を例外を除きem指定で書き換え。borderなどの細い線を引くための1px指定はそのまま menubar側のリスト微調整 .smallのfont-size％指定を80％に変更 span.size1～size7のfont-size指定を％指定に変更。html項の指定値を基準に拡大は0.25倍ずつ、縮小は0.20倍ずつ変化 .anchor_superのfont-size:x-small指定を％指定に変更。80％ .page_passageのfont-size:small指定を80%に変更 div.counterのfont-size指定を60％に変更。当スキンにおけるx-small相当 newプラグイン用のfont-size:x-small指定を％指定に変更。95％ span.counterのfont-size指定を60％に変更。当スキンにおけるx-small相当 .search-result-page-summary(検索結果表示における灰色補足文字)のfont-size指定を80％に変更。当スキンにおけるsmall相当 極一部のremでfont-size指定していた箇所をemで再調整 スマホ向け表示時のfont-size指定を微調整 見出しの調整(予定) スキン本体にCOPYRIGHT_EXの記述追加。PukiWikiの物とは別のコピーライトを入れる必要がある場合にお使い下さい PC向け表示時のみ右上に画像を背景として表示可。縦幅に合わせて縮小、200x40のバナー辺りは丁度良い感じに収まります ホームに加えてヘルプも状況に関わらず常時表示＋アイコンの間隔を微調整＋メニューが表示されない場面でのスクロール改善 #endregion #region(v0.1 → v0.2の変更点 (2019-11-07)) marginを全体的に微調整 一部のpx指定箇所をremおよびemで修正 各font-familyから'MS Pゴシック'を削除 HTML convert timeをLast-modifiedの位置へ移動 ログイン＆ログアウト、rss、rdfもIonicons化。本来ならv0.1作成時点でそうなってたはずが見落としてました… #endregion #region(初版) 2019-07-27 この時点での名称はType_TR #endregion ***特記事項 [#z0a0d641] 基本的には一画面に収まるようなCSSの書き方をしていますが、table絡みだけはほぼそのまま ここを無理に改善すると利便性が落ちる上に表に絡むプラグインと干渉する可能性があり、なくなく… この影響でスクロール用ボタンが時々小さくなる不具合が存在しますが、上記の理由により「仕様」と化しました ***注意事項 [#pfdf38d7] 当Wikiの見出し横に付いている編集用鉛筆マークは改造版paraedit由来 故に配布中の専用スキンにデフォルトでは付いていません。あしからず また、デフォルトで想定しているサイズは横幅1280まで それ以上だとブラウザの中央配置となり周囲に余白が生まれます。ごりごりにカスタマイズする方は適宜変更を 右上のロゴ枠は自分で用意してください。一応バナーを置く事を想定した設計 ***対応を投げた箇所 [#u34a68b5] 2K以上のディスプレイ対応と4インチ未満の端末サポート。後者は初代iPhone SEが対応の境目 %%2K%%WQHD以上のディスプレイ対応と4インチ未満の端末サポート。後者は初代iPhone SEが対応の境目 iOSのPC向け表示時における文字入力時の自動拡大。iPadも考慮すると縦対応はともかく、横持ち対応は現実的でない ***（92738？） [#j5260b81] TFFAC稼働開始が9/27→927 FF→ff→ffといえばさやか→38 要約すると若干私情の入ったTFFAC4周年記念モデルです **sortabletable.inc.php - Data Tables版 [#j6c48a80] [[taru memo内の日記ページ:http://taru.s223.xrea.com/index.php?diary%2F2006-11-08]]にて配布されているプラグインを[[DataTables:https://datatables.net/]]仕様に改造した物 下位互換性を持たせているので、ユーザー側は旧版と同じ感覚で利用可能 ただしjQuery呼び出しおよび後述する各種ファイルの設置は必須 また&color(Red){利用の際はdefine('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0);設定が必須}; この設定をしないと複数行に跨るプラグイン全般が機能しません。これは改変元のプラグインでも必須 ***旧版との大きな違い [#k5e67bf1] &color(#ff4500){表データの各種外部出力およびページャー機能が付きました。また、数値ソート(Number)が若干パワーアップ}; ソート用の新オプションも追加したのでソートのON／OFF、データの一部非表示なども可能となりました Data Tablesは改造しやすく、知識さえあれば他にも色々と出来そうですが今回実装分での違いはこのくらい ***バージョンとライセンス [#j01581e0] 2019/7/24、R00。プロトタイプ的な位置付け 現状、深刻なバグが出ない限りはこのR00のまま。VerUP予定無し あくまでWikiアプデの際の副産物なのでR01以降は他の人に任せます… ライセンスは改造元の作者さんに倣い、GPLv2 or (at your option) any later version 記述時点ではGPLv2 or GPLv3の二択 ***必要なファイル [#hdd6e72d] プラグイン本体は当然pluginディレクトリ 残りはskin/Data Tables内に置く事になります。詳細はプラグインに同梱のmemo内にて jQueryの読み込ませ方はお好みで。一応デフォルトでは既に呼び出している前提の記述をしています -sortabletable.inc.php、custom.datatables.css、 --プラグイン本体＋一部改変用CSS --[[このページの添付ファイルとして配布中(直リンク):https://www.tffac.wiki/?plugin=attach&pcmd=open&file=sortabletableR.zip&refer=PukiWiki%E5%82%99%E5%BF%98%E9%8C%B2]] --ソート用の画像ファイルも一部収録。後述する一式のフォルダ内にある同名ファイルと置き換えてご使用下さい -datatables.js,datatables.cssなどなど --ソートの軸となる一式。詳細はプラグインに同梱のmemo内にて --配布先：https://datatables.net/download/ -currency.js --数値ソート用。これだけ別途ダウンロード or コピペ保存する必要がある --配布先：https://github.com/DataTables/Plugins/tree/master/sorting ***機能紹介 [#i99ea8d1] #sortabletable{{ 表|h 表 }} #sortabletable(有効値|有効値...){{ 表|h 表 }} #sortabletable(有効値|有効値...,フィルター用の0～2の数値){{ 表|h 表 }} 元のプラグインと違いsort=を付ける必要が無く、付いていても強引な修正処理により無い物として扱われる また有効値はこの強引な修正処理により大文字小文字が入り混じってもOK フィルター用の数値はきっちり半角で入力する事 有効値「」、もしくは無効値を入力 DataTablesにおけるニュートラルな条件でソート これは後述のStringとは別物。若干ソートの仕方が違う YYYYMMDD形式の日付処理はこれに任せるとよさげ 有効値「Number」 文字列を数値として扱う。旧版とおおよそは同じ仕様 旧版と違う所は数値以外を基本存在しない物として扱う点。カンマや円などの単位が付いていてもきっちり機能する 例外として、指定列内に数値が含まれていない文字列だけの箇所が混じっているとソートがおかしくなる事も 有効値「String」 文字列を文字列として扱う。旧版と同じ仕様 旧版同様、数値もただの文字扱いなので数値処理には向かない 有効値「Off」 この指定をされた列は矢印が表示されず、ソートの基準に出来ない。旧版では利用不可 「ソートの基準には出来ない」というだけなので他に合わせて動き、フィルターの対象としても扱われる 有効値「Secret」 この指定をされた行は完全に隠れて表示されない。旧版では利用不可 「表示はされないが要素として存在はしている」のでフィルターの対象にはなる 内部IDなど普段は隠しておきたい列に対して使うと良い 番外：自分で新たな有効値を設定 条件分岐をシンプルにしているのでPHPを弄る技量をお持ちならこれも有り 配布されている別のjsを使うも良し、特殊なオリジナルソートを自作するも良し ただしここでその類の解説はしませんというか出来ません。頑張れる人だけ頑張って下さい フィルター有効値「」、もしくは無効値を入力 フィルター機能無効。旧版と同じ フィルター有効値「1」 フィルター機能有効。旧版とおおよそは同じ 旧版と違うのはON／OFF機能が無い…というか付ける必要のない簡易的なフィルターという点 故に複数条件での指定は出来ない フィルター有効値「2」 フィルター機能有効＋ページャー有効。旧版では利用不可 簡易的な指定件数毎の表示機能が設けられ、表を複数ページに分ける事が可能。TOP10表示などに便利 表示は500件、100件、50件、10件、1件の中で指定が可能、初期値は500。プラグイン内の該当箇所を直接弄る事で変更可 ***サンプル1 [#pc09fbaa] #sortabletable(aaaaa|Number|SecRet|date|off,2){{ |~yyyymd|~人口|~密度|~a|~b|h |987/11/16|約555|1|2月29日|| |3411-1-5|1111人|02.1||| |5555/11/13|aaaa6aaaaaaaaaaaaaaaaaaa|10|9月15日|| |6890/12/4|5.55です|1.9|11月22日|| |0987/11/2|9,99人|2.6|1月2日|| |987/1/2|999体|-2.6|11月11日|| |987/11/2|-9ふぇ99人|2.6|11月3日|| |0987/11/2|9,99人|2.6|10月10日|| |987/1/2|999体|2.6|2月29日|| |2016/9/27|4000000|16|1月10日|ALL GOOD| |987/2/11|5000兆ギル欲しい|+2.23|0120828828|| }} #br #sortabletable(aaaaa|Number|SecRet|date|off,2){{ |~yyyymd|~人口|~密度|~a|~b|h |987/11/16|約555|1|2月29日|| |3411-1-5|1111人|02.1||| |5555/11/13|aaaa6aaaaaaaaaaaaaaaaaaa|10|9月15日|| |6890/12/4|5.55です|1.9|11月22日|| |0987/11/2|9,99人|2.6|1月2日|| |987/1/2|999体|-2.6|11月11日|| |987/11/2|-9ふぇ99人|2.6|11月3日|| |0987/11/2|9,99人|2.6|10月10日|| |987/1/2|999体|2.6|2月29日|| |2016/9/27|4000000|16|1月10日|ALL GOOD| |987/2/11|5000兆ギル欲しい|+2.23|828828|| }} *メモ(随時追加) [#m067b07c] **プラグイン微改修 [#s995397c] ***region.inc.phpのHTML5対応 [#ha4cc99f] 本家の想定バージョン自体がかなり古い為、まずはUTF-8変換して保存 ↓ tableタグ中のcellpadding=1 cellspacing=2を削除し、style="padding:0.2em;border-collpase:separate;border-spacing:1px;"に置き換え tdタグ中のvalign=topを削除し、styleにvertical-align:top;を追加 paddingは2px指定でも可 ↓ 80行目辺りのspan id=rgn_button$this-～のstyleにpadding-left:0.2em; padding-right:0.2em;を追加 更にfontの文字化け部分をＭＳ Ｐゴシックに再置き換え paddingの幅指定、fontのサイズ指定はお好み…というか環境に合わせて微調整して下さい ***secedit.inc.phpのPHP7系対応 [#aa1cb495] プログラム中に3つほどある&newをnewに置き換え。これだけ ただしform_helper.phpを筆頭とした編集支援対応は別途記述が必要。頑張れる人は頑張って下さい なお置き換え後は古いバージョンのPHPでは動作不可となる。互換性無し ***tomorrow_schedule.inc.phpのPHP7系対応 [#b1b04ec5] 本家の想定バージョン自体がかなり古い為、まずはUTF-8変換して保存 合わせてjaの方のtodayis、tomorrowis、daystoを「今日は」「明日は」「%d日後は」に書き換え その後、プラグイン内に記述されているeregを7系対応している別の何か(mb_eregなど)に置き換えればOK *コメント [#zf216c76] #pcomment(./コメント1,below,15)