- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2020-05-01T18:04:34+09:00;2020-04-30T08:09:28+09:00","default:tgoto","tgoto")
#author("2024-03-29T09:38:25+09:00;2020-04-30T08:09:28+09:00","default:tgoto","tgoto")
これまで[[pukiwikiカスタマイズ箇所/2018]]、[[pukiwikiカスタマイズ箇所/2019]]で書いてきたような改造を続けてきましたが、2020年もpukiwikiに対してのカスタマイズを追加しています。その過程を忘れてしまわないように記録しておきます。
#contents
*Pukiwiki 1.5.3へのアップデート
*Pukiwiki 1.5.3へのアップデート [#f87f9e77]
pukiwikiは一時期ほとんどアップデートが止まっていましたが、最近になって1.5.2そして1.5.3と立て続けにアップデートがリリースされました。主にPHPのバージョンアップへの対応ですが、本家でもついにレスポンシブに対応するなどモバイルユーザビリティを意識したアップデートになりました。
#ogpi(https://oncologynote.jp/?80fea5855e,prefetch)
#ogpi(https://pukiwiki.osdn.jp/?PukiWiki/Download/1.5.3,amp)
*サイト構造化データ（JSON-LD）への対応 [#e2fbaa57]
これまでに多数のカスタマイズを加えていたために、1.5.3へのアップデートはかなり苦労しました。特に、AMP対応とURL短縮を維持したままでPHPファイルを置き換えるのに、PHPエラーが出て表示が真っ白になってしまったりして随分と修正に時間がかかりました。
#ogpi(https://oncologynote.jp/?ab056d28f5)
#ogpi(https://oncologynote.jp/?ce7e54ca7d)
#ogpi(https://oncologynote.jp/?0eff11efc5)
そのまま上書きしてしまっては現行の機能が損なわれたり設定が初期化されるなどして困るのは次のファイルです。
*AMP対応の改善 [#gf3253b9]
- default.ini.php
- en.lng.php
- ja.lng.php
- pukiwiki.ini.php
- lib/
-- lib/func.php
-- lib/html.php
-- lib/makelink.php
-- lib/pukiwiki.php
- plugin/
-- plugin/attach.inc.php //AMP化のみ
-- plugin/edit.inc.php
-- plugin/newpage.inc.php
-- plugin/read.inc.php
-- plugin/ref.inc.php
-- plugin/search.inc.php
-- plugin/topicpath.inc.php
#ogpi(https://oncologynote.jp/?78d3e6b858)
#ogpi(https://oncologynote.jp/?a9db412a51)
#ogpi(https://oncologynote.jp/?ed13e08e9b)
#ogpi(https://oncologynote.jp/?c0f678f270)
#ogpi(https://oncologynote.jp/?d310f6b14d)
また、attach、backup、cache、counter、diff、skin、wikiのフォルダは一切触れません。そして、下記のファイルは使用しないので、これもまた触りません（削除してしまっても問題ないと思います）
*CDN（Cloudflare）対応 [#d3471e9c]
- keitai.ini.php
- rules.ini.php
#ogpi(https://oncologynote.jp/?30974ad92d)
これらのカスタマイズ箇所を上書きしてしまわないように気をつけつつ、慎重にアップデートを行います。カスタマイズ箇所を探すにはテキストファイルの差分（diff）がかんたんに表示できるソフトウェアが便利です。macの場合はFilemergeが活用できました。
*ref.inc.phpプラグインのWEBP画像フォールバック対応 [#a5ef8982]
*サイト構造化データ（JSON-LD）への対応
#ogpi(https://oncologynote.jp/?5b041d2a93)
SEOにどれほど貢献するのかは不明ですが、検索エンジンで（たとえばがんゲノムなどの）当サイトで記事を書いているキーワードがあったときに表示されやすくなればと思ってJSON-LDへの対応を行いました。
*リンクのprefetch対応（instant.pageでprefetchを効率化する） [#c09969ab]
JSON-LD以外にもschema.orgに対応しているフォーマットであればどれでも良いのですが、JSON-LDはHTMLのどこに書いても良いというのがPukiwikiカスタマイズとの相性の面で利便性が高いと思います。当サイトではHTMLのbodyの末尾につけています。
#ogpi(https://oncologynote.jp/?b64eee490b)
また、OGP imageにも対応できるようにPHPで分岐を作っています。
*短縮URLを検索画面やリスト画面にも対応させる [#k170803c]
#ogpi(https://oncologynote.com/?72646a307e,amp)
ダジャレンジャーさんの[[PukiWikiのクソ長いURLをURL短縮ライブラリを組み込んで解決する！>https://dajya-ranger.com/pukiwiki/embed-url-shortener/]]で提供されているプラグインを検索画面やcmd=listでも使えるようにします。
> <script type="application/ld+json">
> {
> "@context": "http://schema.org",
> "@type": "Article",
> "name": "<?php echo $title ?> - <?php echo $page_title ?>",
> "author": {"type": "Person","name": "authorname"},
> "datePublished": "<?php echo substr($lastmodified, 0, 10) ?>",
> "dateModified": "<?php echo substr($lastmodified, 0, 10) ?>",
> "headline": "<?php if ( $title == 'FrontPage' ) { echo $page_title ; } else { echo $title ; } ?>",
> <?php if(file_exists($ogpijpg)) { /*JPGのOGP画像が存在するとき*/ ?>
> "image": "<?php echo get_script_uri().$ogpijpg ?>",
> <?php } else if(file_exists($ogpipng)) { /*PNGのOGP画像が存在するとき*/ ?>
> "image": "<?php echo get_script_uri().$ogpipng ?>",
> <?php } else { /*JPGもPNGもOGP画像が存在しないとき*/ ?>
> "image": "<?php echo get_script_uri() ?>img/toppage.png",
> <?php } ?>
> "mainEntityOfPage": "<?php echo $canonical_url ?>",
> "publisher": {"@type": "Organization","name": "<?php echo $page_title ?>"},
> "description": "<?php echo $str = str_replace(array("\r\n", "\n"), '', mb_substr(strip_htmltag($body, $all = TRUE), 1, 170, "UTF-8")); /*本文の170文字を抜粋*/ ?>"
> }
> </script>
#ogpi(https://oncologynote.jp/?27dbf117d9)
#ogpi(https://oncologynote.jp/?5b74253bf0)
*パンくずリストの実装
#navi(pukiwikiカスタマイズ箇所)
これもJSON-LDと同じ方法で手書きしても良いのですが、JSON-LDプラグイン((https://pukiwiki.osdn.jp/?%E8%87%AA%E4%BD%9C%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3/jsonld.inc.php))が非常に優れているのでこれを使用しました。なお、JSON-LDプラグインは短縮URL((https://dajya-ranger.com/pukiwiki/embed-url-shortener/))に対応していなかったために下記の修正を行いました。get_short_url_from_pagename関数は本当にすごい。
''70行目に空のitem2を追加する。''
> if (PLUGIN_JSONLD_BREADCRUMBLIST && !$isHome ) {
> $names = explode('/', $title);
> $path = '';
> $name2 = ''; //これを追加
''82行目のforeach構文内に下記の通り1行加える''
#html{{
<blockquote><p class="quotation">$name2 .= (($name2 != '')? '/' : '') . $name; //item2を加えた</p></blockquote>
}}
''88行目を下記の通り修正する。''
> 'item' => $script . get_short_url_from_pagename($name2) //先ほど加えたitem2について短縮URLを取得する
*サイトリンク検索ボックスの設定
JSON-LDの設定の延長で、サイトリンク検索ボックスの設定をしました。うまくGoogleにインデックスされればGoogle上で検索ボックスが表示できるようになるかもしれませんが、これが有効になるのはページ数が非常に多い大規模サイトだけのようなので、個人のpukiwikiでどの程度の効果があるのかは不明です。
#ogp(https://developers.google.com/search/docs/data-types/sitelinks-searchbox?hl=ja,amp)
*AMP-analyticsの実装
AMP化したページではGoogle analyticsの実装がしにくいのですが、AMP用のanalyticsスクリプトも用意されています。当サイトはほぼ全ページがAMP HTML対応の構造になっていますのでAMPページと非AMPページでわけずにすべてのページでAMP用のanalyticsスクリプトを用いています（AMP用スクリプトは非AMPページでも動作します）。
#ogp(https://developers.google.com/analytics/devguides/collection/amp-analytics?hl=ja,amp)
*AMP-social-shareの実装
このサイトは個人のメモ書きという要素が強かったのでSNSでのシェアのしやすさはそれほど意識していなかったのと、ウェブサイトが重くならないように極力シンプルな構成を目指していましたが、AMP用スクリプトはいずれもウェブサイトの重さに極力影響を与えずに様々な機能が実装できることがわかってきたので、SNSでのシェアを容易にするためのAMP-social-shareスクリプトも設定してみました。
TwitterやFacebookなどスクリプトにオフィシャルとして認められているSNSの場合は設定はほぼコピペのみで完了します。はてなブックマーク、はてなブログや、最近人気が出てきているnoteなどは日本でしか普及していないからかスクリプトの公式対応がまだなので、設定は手打ちしてやる必要があり、若干手間がかかります。
下記にnoteのボタンを設置するための例を記載しておきます。なお、ロゴは公式サイトにてSVGが配布されています。このSVGをテキストエディタで開いて、背景と本体の色を反転させています。
''CSS''
> amp-social-share[type=note] {
> background-color: #41C9B4 ;
> background-image: url('https://oncologynote.com/skin/note_logo.svg');
> background-repeat: no-repeat;
> }
''body内''
> <amp-social-share type="note" class="snsicon" width="50" height="40" data-share-endpoint="https://note.mu/intent/post?url=<?php echo $canonical_url ?>"></amp-social-share>