NC3への記録

NC3のインストール・移行・カスタマイズの記録

移行時のページの表示順番とリンクURLについて

移行作業をしていて今回ページの表示順番と下位ページのリンクがおかしいところをちょっと踏み込んで調査してみました。

やはり、NC2でのメニューのページ表示順番と固定リンクの内容がそのまま使用したいと思うのですが、移行後では表示順番はページID順?、また固定リンクのURLはカテゴリ名が重複して編集されてしまいます。

パブリック以外は、そもそも編集方法がNC2とNC3とで異なるためそのままの移行は無理と思いますが、パブリックだけでもそのまま移行できればと考えました。(パブリック・プライベート以外のルームでは、NC2はgroup、NC3はcommunityとなるため)

移行後、手作業でページ設定にて表示順番を変更し、URLは一つずつ該当ページを編集で開き「固定リンク」を変更すれば解消できます。

ただページ数が多くなるとかなりの手間となるため、以前まではDBのpageテーブルの「permalink」「slug」を直接updateし修正していたのですが、今回は移行時の問題として調査してみました。

原因は、表示順番については移行の際、NC2のページ情報を読込む順番が指定されていないことと判明、また固定URLについては、pageテーブルの「slug」項目の設定がおかしく、それが「permalink」に影響していたのです。

pageテーブルの移行プログラムは
「/app/Plugin/Nc2ToNc3/Model/Nc2ToNc3Page.php」
となり、順番の指定、および「slug」項目の設定を少し手を加えれば、移行後もNC2のページの表示順番、固定リンク内容が正しく編集されるようになりました。

ということで、移行ツールはほとんどうまく動作するのですが、ところどころ微妙に調整する必要がありますね。

しかし、移行できるのは本当に便利です。開発チームの方々には感謝します。ありがとうございます。

移行時の画像について

今回、透過GIF・bmpを多用されているサイトの移行作業で移行したにも関わらず画像が正しく表示されないといった事象が気になり調査してみました。

その結果、移行時の「サイズの異なる画像作成」「掲載する画像サイズの指定」に問題があることが判明しました。

透過GIFの場合、別サイズのGIFを作成する際、色の透過度を指定し作成する必要があるのですが、そのようなことを行っていないため背景色が黒色になってしまっていました。

ちなみにこれは上記「エディ・ケイのロゴ」でアップロード時自動で作成された「medium」サイズの画像です。

また、bmpは「サイズの異なる画像作成」が行われず、使用・掲載画像の指定が「big」サイズの画像を指定されているため表示されないことが分りました。

っということで、移行後、透過GIFの背景が黒色・bmpが表示されないといった場合、そのような画像を含むコンテンツを編集画面で開き、ソース表示にし、画像を指定している部分(imgタグのsrc=)の「/big」部分を削除すれば元画像を指定することになり透過GIF・bmpが表示されます。

また、数が多い場合は、透過GIFのGIF作成部分
「app/Plugin/Upload/Model\Behavior/UploadBehavior.php」
を、bmpは移行時のサイズ指定部分
「/app/Plugin/Nc2ToNc3/Model/Behavior/Nc2ToNc3WysiwygBehavior.php」
をカスタマイズすれば、移行にて正しく表示されるようになります。

ちなみに移行時での問題でもなく、wysiwygでの問題で透過GIFで原寸以外のサイズを掲載した場合にも背景色が黒色になることが分かりました。またwysiwygでbmpは使用できないことも分かりました。

wysiwygでbmpを使用するためには
「/app/Plugin/Wysiwyg/Controller/WysiwygImageController.php」
をカスタマイズする必要がありました。(移行はできるのですが・・・)

以上、今回の作業でわかったことを掲載します。同様のことでお困りの方が少しでも解消できるのであれば幸いです。

何かNCのこと、移行のことでお困りのことがあればご連絡ください。お待ちしていま~す。

NC3.3.3にバージョンアップしました

本日やっとNC3.3.3にアップしました。

いろいろとカスタマイズをしているのでバージョンアップを躊躇していましたが、ローカルで実施・確認し問題ないことが確認できましたのでサーバにそのままもってきました。

次は、ドロップダウンメニューを新バージョンを作成したので、メニューを交換しようと計画中です。

新バージョンは「東京成徳大学深谷高校」のサイトにも使用しているドロップダウンメニュー、スマホバージョンはいいできかなあとちょっと気に入っているのです。興味ある方は一度ご覧ください。

WEB制作実績を更新しました

キャッチボール21さまからのご依頼で、昨年末よりNC2からの移行・リニュアル作業として作業させていただいていた「東京成徳大学深谷高校」のサイトが2月に公開されました。今回エディ・ケイのWEB制作実績に追加させていただきました。

是非一度ご覧ください。

「東京成徳大学深谷高校」のホームページ

今更なのですがページ表示速度の向上

みなさんご存じでしょうか。本当に今更なのですが、画像を多く含むページは表示速度が遅くなります。それは、画像のダウンロードに時間が取られ遅くなっているのです。「そんなん言われんでも」って声が聞こえてくるのがわかります。

っで、先日「表示速度の改善」といったことを調べていて今更なのですが分かったことがありました。

ひょっとして知ってられる方も多いかもしれませんが、私は知らなかったのでお教えします。

「lazyload」といったものがあり、ページ表示する際、初めに見える画像だけを読込み、それ以外の画像読込を遅延させるといったものがあるのです。それを使うとページの表示が早くなったと感じられます。

ちなみにこのサイトの「Web制作実績」に使用してみました。私的には本当に早くなったと感じられました。

一度「Web制作実績」御覧願います。

使用方法は、<img>タグに「loading="lazy"」を追加するだけです。

いかがでしょうか。

しかし、wysiwygの編集では「loading="lazy"」を記述しても削除されました。とほほほほ!

「Web制作実績」は汎用DBのカスタマイズで表示しているので、<img>タグを吐く部分で追加したので大丈夫なのですが・・・

 

2021年3月某日追記

先日移行作業をさせていただいた「東京成徳深谷高校」のサイトでは、wysiwygでの編集にて画像を使用した場合、自動的に「loading="lazy"」が付与するようにカスタマイズしています。また、移行時の編集にも追加付与するようにし日誌などの投稿でも画像があれば「loading="lazy"」を付与しました。

学校などの日誌にて画像を多用されているサイトにはよいのではと思います。