ドラクエ攻略FAQ(https://www.dqfaq.com/)のデザインをBootstrapを使って更新しようとしています。

せっかく新しくするのだからBootstrap4をもとに作成しているのですが、そのバージョンではjQuery3系が利用されています。そして、jQuery3ではfadeInとfadeOutが効かず、使えなくなっていることに気づきました、今更ながら。

ということで、なんとか「fadeInとfadeOutが使えなくなった」問題に対処しようと思い、はじめはjavascriptでfadeIn/fadeOutを実装してもいいかな、と考えたのですが、そういう見た目部分はCSSが、特にCSS3でできたよなぁと思い、いろいろ探してみたところ、以下のページですでにばっちり実験されていました。
【HTML/CSS】たかがフェードイン/フェードアウトするだけの挙動に全力で取り組んだ結果、最強のCSSができてしまった話【最強】
20180815.png


うん、もうこれでいい。というか、最強なんだからこれがいい。
ありがとうございます。大変役立ちました。

日本語ファイル名のファイルをWEBサーバにアップロードして、そこから日本語ファイル名のままファイルをダウンロードさせたい、アクセスさせたい、ということは割とよくあると思います。
よくわからない文字列に変換されてしまうと、サーバーからも探しにくいですし。

で、ローカルはWindows、でもWEBサーバはLinux、という割とよくあるパターンの場合、Windowsのファイル名の文字コードはShift_JIS、Linux側のファイル名の文字コードはUTF-8のため、何も考えずファイルをFTPでアップロードすると文字化けが発生します。
文字化けというか、サーバ側でもSfift_JISの文字コードの日本語ファイル名で保存されます。

Apache2.4でバーチャルホストに自己証明書を入れる方法(その1)からの続きです。
前回作成したSSL証明書を使ってWEBサーバを起動します。

さくらのレンタルサーバーで動かしている ドラクエ攻略FAQfswikiを使っているのですが、この度バージョンアップがあったので、サーバー側もバージョンアップすることにしました。

せっかくなので、同じく古いままになっていたローカル環境もアップデート、というかxamppを再セットアップしました。

また、dqfaqはさくら、というかLet’s Encrypt が提供してるSSLサーバー証明書を使ってHTTPSでアクセスできるようにしているので、ローカルにも同じ環境、つまりHTTPSでテストできるようにしました。
ただし、さくらからは証明書のエクスポートができない(プランによる?)のて、ローカル側は自己証明書(オレオレ証明書)にしています。

ローカルの環境はwindows10です。


javascript と jQuery をつかってスムーズスクロールをウェブサイトに導入することは割とよくあると思います。ドラクエ11攻略プロジェクトでも導入ました。

しかし、なぜか全く動かない。うんともすんとも言わない。
「なぜか」というとjavascriptのコードが間違っているんでしょうけど、なぜかがわからない状態でした。

jQueryのコードは、(おそらく)よく見かける以下です。

jQuery(function() {
// #で始まるアンカーをクリックした場合に処理
$("a[href^=#]").click(function() {
// スクロールの速度
var speed = 400; // ミリ秒
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top-60;//固定メニューの分ずらす
$('body, html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});