mmahhiの随筆

私自身、そこまでウェブサイトにお金をかけられる立場ではないので、無料レンタルサーバーのXREAを借りている。
無料なので、本当に気軽に始められるのだが、

• SSL非対応
• 広告が強制表示
• 時々サーバーが落ちている
• （お金をかけているわけではないので、更新が滞りがち）

という弱点があった（最後の1つはともかく）。とくに「SSL非対応」はここ数年のSSLの急速な普及により、ブラウザーからの圧力が強くなってきていたので困っていた。
SSL未対応の警告（Firefox）

そんなとき、予備として借りているXFREEから1通のメール。
その内容は「XFREEの新規登録は終了するよー、新しいサービス作ったから今後はそちらを使ってー」という案内だった。
XFREEからのメール
そっか、XFREE終わるのかー、残念だと思った。

……のだが、新しいサービスの「シン・クラウド for Free」が無料の割に機能が充実しているのだ。名前だけはどうにかならなかったのか……。

例えば、

• 容量10GB
  XREAは1GB。ただし、XREAは元々申請すれば最大10GBまで増やせた。
  また、1週間後の10月10日に容量を10GBまで増やしている。
• SSL化完全対応
  XREAは独自ドメインのみ対応、最初からのドメイン（hogehoge.s000.xrea.com）は、共有SSL（ss1.xrea.com/hogehoge.s000.xrea.com）のみ対応。
• 広告非表示！
  XREAは一番上に強制表示される。しかも遅れて。
  XREA 広告の例

とはいっても、XREAにしかない・より劣る機能もある。

• メールの送受信
• 15世代までのバックアップ
• シン・クラウド for Freeは3か月ごとの更新が必要

特に、最後の「3か月ごとの更新が必要」が痛い。個人サイトにとっての3か月はあっという間である。せめて1年に延びないものか。
シン・クラウド for Free 更新画面

UIの比較

ここからは、両者のコンパネやウェブFTPの比較画像を載せたいと思う。正直なところ、2つに大きな差はないと思っている。

コントロールパネル

XREA

シン・クラウド for Free

ウェブ FTP

XREA

シン・クラウド for Free

というわけで、魅力的な「シン・クラウド for Free」の話であった。このサーバーを使ったサイトも立ち上げてみたい。

この随筆にもTwitterのシェアボタンを設置しています。共有してくれると嬉しいですからね。ただ、どれくらい使われているかわかりませんが……。

ところでこのボタン、一見公式のもの見えますが、実は違います。
こちら側で作ったものです。

なぜ公式のを使わないのか

理由は簡単です。「まだTwitterでいてほしいから」。
そして「ダークモード時に背景が白くなるから」です。
公式経由で実装すると、iframeで埋め込まれるがために、こちら側からCSSを適用してデザインを変更して使用することができません。仕方ないのでそのまま使っていましたが、やはり目立ちます。
そこで、自分で作ることにしました。とはいっても、デザインを考えるのは面倒なので「どうせなら公式まんまのものを作ってしまえ！」ということにしました。

作ったコード

中身はTwitterのそのままでいいとも思われそうですが、TwitterのCSSにはかなり無駄も多いので、今回はデザイン以外は別物となっています。

また、アイコンには「Fork-Awesome」を使用しています。ダウンロードしてサーバーに設置して使用することもできますが、サイトの「Get Started」のUse a CDNからすぐ下のコードをコピーしても使えます。どちらでも変わりません。

HTML
※(())部分は適宜修正を加えてください。
<a class="twitter-share" href="https://twitter.com/intent/tweet?url=((URL))&text=((タイトル))&related=((投稿後に表示させるユーザー))" target="_blank" rel="nofollow" title="この記事をTwitterでシェア"><span class="fa fa-twitter" aria-hidden="true"></span>ツイート</a>

CSS
.twitter-share {
display: inline-block;
height: 20px;
box-sizing: border-box;
padding: 1px 12px 1px 12px;
background-color: #1d9bf0;
color: #fff !important;
text-decoration: none !important;
border-radius: 9999px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
vertical-align: top;
font-size: 12px;
line-height: 18px;
}
.twitter-share:active, .twitter-share:focus, .twitter-share:hover {
background-color: #0c7abf;
}
.twitter-share .fa.fa-twitter {
display: inline-block;
font-size: 14px;
margin-right: 3px;
position: relative;
top: 0.5px;
}

HTMLを次のように変更すると、フォローボタンを作ることもできます。((ユーザー名))部分には、@から始まるユーザー名を入れてください（例：@mmahhi_1）。
なお、「title=""」や「((ユーザー名))をフォロー」部分は、お好きなものに差し替えることもできます。
<a class="twitter-share twitter-follow" href="https://twitter.com/intent/follow?screen_name=((ユーザー名))" target="_blank" rel="nofollow" title="((ユーザー名))をフォローしましょう"><span class="fa fa-twitter" aria-hidden="true"></span>((ユーザー名))をフォロー</a>

この随筆で使っているCafeLogでは、画像を投稿することができます（前回の記事で使っていますね）。

この機能は最初の段階では、画像をクリックするとその画像単体の画面に飛ぶようにリンクされているのですが、どうせなら画像拡大スクリプトを使って、その画面上にホバーさせようと考えました。結構簡単な改造で済みますので、ぜひお試しください。

注意事項

1. mmahhiは、何があっても責任を負いません。
2. 私が使用しているCafeLogのバージョンはVer.5.11です。
   最新版のVer.5.5ではありませんのでご注意ください。
   ※ただし、Ver.5.5でも全く同じ方法での改造ができそうです。

画像拡大スクリプトの導入

画像拡大スクリプトと言えば、「LightBox」が有名ですが、今回は「Fancybox V3」を使うことにしました。ちなみにV4以降はライセンス体系の変更により、個人利用でも有料となっていますのでご注意ください。
なお、LightBoxなどの他の画像拡大スクリプトも同じような手順で使用することができます。

導入はいたってシンプルで、以下の3ファイルを管理画面の「テンプレート編集」から「本体ファイル」を選択し、head内に記述するだけです。
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" ></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>

画像挿入時にdata-fancyboxを自動追加したい

さあこれで終了！……とはなりません。というかこれで終わるなら記事なんて書きません。

Fancyboxは
<a data-fancybox="gallery" href="img.jpg"><img src="img.jpg"></a>
のように、画像リンクに対してdata-fancybox="~~~"を設定することで初めて動作します。
これを毎回記述するのはかなり面倒です。しかも、CafeLogで画像貼付をしたときに出力されるHTMLには懐かしいboder="0"の記述も。今は必要ありませんし、あると文法チェッカーに怒られます。これも毎回消すのは面倒です。

ということで、このテンプレートを直してしまいましょう。たった1ファイルの変更で済みます。

FTPソフトから、CafeLogのインストールディレクトリ > admin > lib > img_mgr.plを開きます。その360行目付近に# 原寸画像タグのコメントがあります。その下の行を以下のように修正してください。((お好きな英数字))の部分は適当なものに変えておいてくださいね。

my $tag = "<a href="$cf{htmlurl}/img/$id.$ex" target="_blank"><img src="$cf{htmlurl}/img/$id.$ex" border="0" alt=""></a>";

↓

my $tag = "<a href="$cf{htmlurl}/img/$id.$ex" data-caption="" data-fancybox="((お好きな英数字))"><img src="$cf{htmlurl}/img/$id.$ex" alt=""></a>";

こうすることで、<a href="~~~.jpg" data-fancybox="((お好きな英数字))" data-caption=""><img src="~~~.jpg" alt=""></a>のようなHTMLが最初から出力されるようになります。便利！

ちなみに、data-fancyboxの値が同じものがひとかたまりとして扱われます。記事の一覧表示時に別の記事の写真がひとかたまりとして扱われるのが嫌な方は、ここを記事ごとに変更（末尾に日付を足すなど）するとよいでしょう。
また、data-captionを設定すると、写真の下に説明を追加することができます。お好みで追加してください。

CafeLogに画像拡大スクリプトを導入することはかなり簡単にできるので、試してみてはいかがでしょうか。

この随筆でお世話になっている、KENT-WEBさんの「CafeLog」。

データベース不要の手軽さで、使いやすく、しかも高機能なのですが、ちょくちょく不具合が見られるんですよね……。バージョンアップは続けられているのですが、直らないものも多く、少しストレスでした。

そこで、私が直せる限り直した、CafeLogの不具合の直し方を、備忘録も兼ねてここにまとめたいと思います。ここが備忘録と化しつつありますね (笑)。

注意事項

1. ここで書かれていることを行うときは、本番環境でやらずに、一度ローカル環境などでテストしてから行ってください。mmahhiは、何があっても責任を負いません。
2. 私が使用しているCafeLogのバージョンはVer.5.11です。
   最新版のVer.5.5ではありませんのでご注意ください。
   ※Ver.5.5のソースを見る限り、同じ不具合があり、同じ方法で直せそうですが、試してはいません。

1. カテゴリの並び替えができない

print qq|＜a href="index.cgi?cate_mgr=1&up=$no"＞
print qq|＜a href="index.cgi?cate_mgr=1&dn=$no"＞

2. テンプレートCSSを編集すると、テンプレートHTMLが置き換わってしまう

まだ解決法は見つかっていません。回避策としては、CSSを別のファイルにし、FTPソフトを使って編集、が挙げられます。または、一番上の階層のstyle.cssと、/admin/data/tmpl/にあるstyle.cssをFTPを使って編集する方法もあります（/admin/data/tmpl/style.css も編集しないと、次に「変更を反映」したときに編集内容が消えます）。

追記：KENT-WEBのサポート掲示板に解決策の案内がありました。

3. 消せない投稿、コメント、トラックバックがある

これは私特有の現象かもしれません。ウェブFTPを使ったら、空白のファイルがすべて消えてしまい、それを戻すために手作業でファイルを作った時に、余計な文字列が混入したようなので。

→データファイルに余計な文字列、改行がないかを確認。改行一つでも起きることがありました。
データファイルは、/admin/data/ の中にあります。

• base.dat：基本設定
• cate.dat：カテゴリ
• cm.dat：承認待ちのコメント
• foot.dat：フッター
• img.dat：画像
• index.dat：トップページに載せる記事
• link.dat：リンク
• num.dat：記事の数（未公開記事も含む）
• page.dat：記事の概要
• pass.dat：パスワードを暗号化したものか？
• side.dat：サイド
• tb.dat：承認待ちのトラックバック
• tbcm.dat：承認されたコメント、トラックバックの記事ごとの数

まだまだ追加予定ですので、お楽しみに。