【@WIKI】アットウィキでページの先頭に戻るボタンを設置する!

【@WIKI】アットウィキでページの先頭に戻るボタンを設置する!
Pocket

私はやりたい事ばかり多くて、アレもコレもと気が散ってイケナイ。
どれも( ゚д゚)ハッ!と思った時にちょこっとずつ調べたりメモったりなので、デスクトップは付箋アプリの付箋だらけ(しかもこの付箋アプリはテキストの検索機能がないので厄介だ。そのうち自作するか・・・ってまたやりたい事が増える)。
付箋アプリでは割と重要な内容を意図的に残している(から混乱もしている)が、普段は何でも秀丸エディタで書きなぐって途中であろうが適当に保存するため、意味不明なファイル名のテキストファイルがローカルPCのディスクのあちこちに散乱しているのが現状だ。
多分に加齢のせいもあるが、酒の毒がいよいよ30年殺しぐらいの勢いで元々足りない脳ミソを蝕んでいるらしく、アル中ハイマー記憶障害をたびたび発生させている。と言うワケで、忘れないウチにブログに書いて置こう。誰かの役に立つかも知れん。

商用ウィキサービスのもどかしさ

長くなるから割愛するが、国内でも商用ウィキサービス(私は人間が古いので「Wiki」の方がピッタリ来るが「ウィキ」に統一)が定着しつつあり、利用する人も増えた。ウィキページを作ったり更新したりする人達が増えれば、それだけウィキ本来のナレッジベースとしての利用とその発展が望めるだろうから、単純に喜ばしいことだ。問題は大いにあるにせよ、誰しもウィキペディアのお世話になったことがあると思うし、今やウィキは大小様々な個人や組織に利用されているのである(と思う)。
中でも私は個人的にアットウィキが気に入っているのだが、他のブログサービス同様、商用サービスは自分で手が出せない(プログラムの追加・修正が出来ない)のがもどかしい。そこで私は個人的に長年趣味で集めた大・松本零士コレクションを自分でウィキ化しようとして、昨年夏ごろから自前レンタルサーバでPukiWikiを立てるべくカスタマイズをしていたが、冒頭のようにアレもコレもな状態で放置状態である。

それとはまた全然別件でアットウィキでサイトを運用して更新しているが、特にウィキページは情報が集まれば集まるほどページ当たりの情報量が増えるので長くなるし、ページの分割化による情報の分断もイヤなモンだ。少しでも使い勝手を良くするために、ページの先頭に戻るボタン(以降、「ページトップ移動ボタン」と統一)をアットウィキで実現することにした。

HTMLとJavaScriptだけで実現するぞ!

アットウィキは従来のウィキ記法の他に独自で拡張したプラグインが利用可能で、ウィキの簡単さ+プラグインの中途半端な高機能が微妙に心地良い(褒めてます)。現状スマホは「SP」が付くURLになるものの、レスポンシブに対応したCSSデザインも出たし、サポートに質問を投げても割とレスポンスが良い。日々バージョンアップしていて(だから突然仕様変更が入ってビビるが)今後も伸びて行きそうな気がする(気のせい?)。
正直、ウェブ系の技術は多岐に渡っていて、元々それが本職ではないせいもあるが、「今のご時世、jQueryで何とでもなるだろ」と気軽に考えていたが、所詮はやっぱりウィキなので、アットウィキではjQueryが利用出来ないようだ(プラグインで何とかなるかにゃ~?と淡い期待をしていたのだが)。
でもまぁ、単純にJavaScriptで window.scrollTo(0, 0); と書けば有無を言わさずページのトップにスクロールするのだから、アットウィキでHTMLとJavaScriptのコードが書ければjQueryが使えないからと言って諦める必要はない。
アットウィキのプラグインを色々と探してみると、

  • #html2():HTMLをそのまま表示(複数行入力対応)(html2)
  • #javascript():javascript入力プラグイン(javascript, js)

を使えば、jQueryを使わずにページトップ移動ボタンの実装が出来そうだ。

アットウィキにページトップ移動ボタン画像を仕込む

商用サービスの場合でも、ブログならFontAwesome(フォントオーサム)を利用してお手軽かつ楽ちんに様々なアイコン画像が使えるが、ウィキではその仕様の特性上、HTMLの <head> <body> タグにメタタグを仕込めないため、ページトップ移動ボタンの画像を用意してウィキページに仕込むしかない。

私は先日WordPress用プラグインでページトップ移動ボタンをお手軽に導入したので、そのプラグインが提供しているアイコンから使えそうなヤツを見繕った。

やはり「コレだ!」というモノがないので、運用しているウィキサイトのイメージに合うように加工してこんなボタン画像を用意した。

page-top-button.png
縦横64ピクセル

どうやってこのボタン画像をアットウィキに仕込むか?だが、ウィキではページに画像を添付するのはワケない話なので、メニューページに添付して仕込めば良いだろう。

メニューページを編集する画面に移動してこのように画像ファイルを添付すれば良い。アットウィキは複数のファイルを添付する場合でもドラッグ&ドロップで簡単に追加出来るので楽だ。

ボタン画像をアップロードしたら、ファイル名のリンクを右クリックして「リンクのURLをコピー」するのも忘れずに。このURLを使ってHTMLコードでページトップ移動ボタンに仕立てるからだ。

いざ、実装!

ウィキとは言えJavaScriptを使うので、アットウィキの場合はページの編集権限を「管理者のみ」に設定しないと、せっかくのJavaScriptが有効にならない

アットウィキのプルダウンメニュー「編集」⇒「ページの閲覧/編集権限の変更」をクリックし、ページトップ移動ボタンを設置するページは全て図のように編集権限を変更する必要がある。
私が運用しているウィキサイトは私しかページの作成も編集もしないから良いが、不特定多数または複数の参加者とウィキの編集をしているサイトの場合は、かなり切実な問題ではある。ページトップ移動ボタンの導入ごときでウィキサイトの運用に支障をきたすのは、普通にダメだろう。
ともあれページの編集権限を変更したら、編集するページの一番最後にコピペすればOK!(ページを編集・保存する前に、管理者設定からCSSを先に追加して設定を保存しておく必要はあるが

任意のウィキページに次のコードをコピーペーストする

----
#html2(pc){
<button id="pageTopButton"><img src="https://img.atwikiimg.com/www99.atwiki.jp/hogehoge/attach/2/53/page-top-button.png"></button>
}

#javascript(){{{{{{
<script>
// スクロール量の取得
function getScrolled() {
    return (window.pageYOffset !== undefined) ? window.pageYOffset: document.documentElement.scrollTop;
}

// ページトップ移動ボタンをセット
var topButton = document.getElementById('pageTopButton');

// ページトップ移動ボタンの表示・非表示
window.onscroll = function() {
    (getScrolled() > 50) ? topButton.classList.add('fadeIn'): topButton.classList.remove('fadeIn');
};

// ページトップ移動関数
function scrollToTop() {
    var scrolled = getScrolled();
    window.scrollTo(0, Math.floor(scrolled / 2) );
    if (scrolled > 0) {
        window.setTimeout(scrollToTop, 30);
    }
    // ページトップ移動ボタンのフォーカスを外す
    topButton.blur();
};

// イベント登録
topButton.onclick = function() {
    scrollToTop();
};
</script>
}}}}}}

CSS(管理者でログイン⇒「デザイン」⇒「CSSカスタマイズ」⇒「CSSカスタマイズ」で次のコードをコピーペーストして保存する)

#pageTopButton {
    position: fixed;        /* 固定表示 */
    right: 40px;            /* 右から40ピクセル(任意の位置に設定) */
    bottom: 64px;           /* 下から64ピクセル(任意の位置に設定) */
    width: 0px;             /* アイコン画像の幅(非表示) */
    height: 0px;            /* アイコン画像の高さ(非表示) */
    opacity: 0;             /* 透過度(非表示) */
}

#pageTopButton.fadeIn {
    width: 64px;             /* アイコン画像の幅 */
    height: 64px;            /* アイコン画像の高さ */
    border-radius: 50%;      /* アイコン画像が円のため50%指定(アイコン画像による) */
    border: none;            /* ボーダーなし */
    opacity: 0.8;            /* 透過度80%(任意の透過度) */
    transition: opacity 1s;  /* 経過時間(この場合1秒かけて80%の透過度にする) */
}

コードの解説

簡単ではあるが、コードの解説をしよう。

HTML

#html2(pc){
<button id="pageTopButton"><img src="https://img.atwikiimg.com/www99.atwiki.jp/hogehoge/attach/2/53/page-top-button.png"></button>
}

#html2()プラグインは特に説明することはないが、私が運用しているウィキサイトはレスポンシブ対応前のCSSデザインのため、スマホではURLに「SP」が付くせいか、スマホ画面では標準でページトップ移動ボタンが表示される。よって、プラグインの引数に「pc」を追加して「パソコン」(タブレットでも同様)のみの出力にしている。
それ以外は普通に <button> タグにメニューページで添付したページトップ移動ボタン画像を定義しているに過ぎない。

CSS

#pageTopButton {
    position: fixed;        /* 固定表示 */
    right: 40px;            /* 右から40ピクセル(任意の位置に設定) */
    bottom: 64px;           /* 下から64ピクセル(任意の位置に設定) */
    width: 0px;             /* アイコン画像の幅(非表示) */
    height: 0px;            /* アイコン画像の高さ(非表示) */
    opacity: 0;             /* 透過度(非表示) */
}

#pageTopButton.fadeIn {
    width: 64px;             /* アイコン画像の幅 */
    height: 64px;            /* アイコン画像の高さ */
    border-radius: 50%;      /* アイコン画像が円のため50%指定(アイコン画像による) */
    border: none;            /* ボーダーなし */
    opacity: 0.8;            /* 透過度80%(任意の透過度) */
    transition: opacity 1s;  /* 経過時間(この場合1秒かけて80%の透過度にする) */
}

ボタンの表示(フェードイン効果)と非表示はCSSで実装し、JavaScriptで fadeIn 要素をクラスに追加(表示)・削除(非表示)で実現している。
取り敢えずウィキページにコードを貼る形で実現するため、CSSも最低限のシンプルなものとした。

スクロール量の取得

スクロール量を取得するJavaScriptを調べるといくつかあるが、ブラウザによって対応状況が違うので困った。

  • window.pageYOffset⇒IEは非対応(undeinedを返す)
  • document.body.scrollTop⇒ForeFoxだと戻り値が0?
  • document.documentElement.scrollTop⇒ChromeとSafariの対応が怪しい

結局、「IEに対応しとく?」って話になるんだが、捨てるよりは・・・という判断でこのようなコードになった。多分、この判断は間違いではないだろうし、今回スマホは考えなくて良いが、スマホでもこのコードで大丈夫だろう。

// スクロール量の取得
function getScrolled() {
    return (window.pageYOffset !== undefined) ? window.pageYOffset: document.documentElement.scrollTop;
}

ページトップ移動ボタンの表示・非表示

// ページトップ移動ボタンをセット
var topButton = document.getElementById('pageTopButton');

// ページトップ移動ボタンの表示・非表示
window.onscroll = function() {
    (getScrolled() > 50) ? topButton.classList.add('fadeIn'): topButton.classList.remove('fadeIn');
};

CSSの箇所でも書いたが、スクロール量が50ピクセルを超えたら fadeIn 要素をクラスに追加するか削除するかで表示と非表示を実現している。
私は「少しでもスクロールしたらすぐ反応させたい」人なので50ピクセルとしたが、この辺は本当にお好みで。

ページトップ移動関数

// ページトップ移動関数
function scrollToTop() {
    var scrolled = getScrolled();
    window.scrollTo(0, Math.floor(scrolled / 2));
    if (scrolled > 0) {
        window.setTimeout(scrollToTop, 30);
    }
    // ページトップ移動ボタンのフォーカスを外す
    topButton.blur();
};

単純にページのトップに移動するだけなら、 window.scrollTo(0, 0); とすれば良い。ただこれだと一瞬で移動するため、ぶっちゃけ面白くないし素っ気なさ過ぎる
そこで、クイックソートのように取得したスクロール量の半分まで移動して30ミリ秒(0.03秒)デレーし、スクロールイベントの発生で取得したスクロール量の半分まで移動してデレーし・・・と自動的にスクロールイベントが繰り返されて行けば、スクロールする移動量と移動にかかる時間が徐々に【速い(移動量・多)→遅い(移動量・少)】に変化し、見た目は「スーッ」となめらかにスクロールしてページのトップに移動するような効果が得られる
終了条件はスクロール量が【0=ページトップ】になるまで勝手に【スクロール→イベント発生→スクロール】を繰り返すので、短いコードで最大の効果が得られる
ここまではノープロブレムだが、ページトップ移動ボタンをクリックしてページのトップまで移動すると、ページトップ移動ボタンは自動的に消えるが、そのまま次にページをスクロールさせた時にページトップ移動ボタンにフォーカスが残ってて枠線(ボーダー)が消えない(そもそも、ページトップ移動ボタンの枠線が微妙にズレて表示されるので、コレの理由がサッパリ分からなかった)。
私か運用しているウィキサイトはCSSに手を入れてカスタマイズしているので、とりあえずCSSを全部チェックしたが、どうもアットウィキの不具合(?)っぽい。仕方ないから topButton.blur(); で強引にフォーカスを外して回避というパワーテクニック(力技)で捨て置いた。そのうちまた、アットウィキ側でバージョンアップするか何かで不具合が消えるだろう(多分)。

おわりに

ウィキ記法そのものは実にシンプルなので、誰でもすぐに習熟してページの作成や更新が簡単かつ手軽に行えるため、ナレッジベースとしてウィキは優れていると思う。しかし、1ページ当たりの情報量が増えて行った場合に「見やすく」「便利に」といった面では、ウィキサイトの機能の拡張を行わなくては対応が取れないのも事実である。
私の場合は商用ウィキサービスを利用するに当たって、一通り見た中でアットウィキが気に入って使っているから、正直他社のウィキサービスの「本当の良さ」は分からないし、アットウィキも含め、商用サービス各社も日々改良をし続けていることだろう。
私が運用しているウィキサイトは更新・管理が私一人だし、管理しているページ数もまだ少ないから、アットウィキの仕様的な制限の中で今回のページトップ移動ボタンの設置を実施出来た。しかし、不特定多数や複数人でページの作成や更新をしているサイトや、ページ数が数百ページ以上にものぼるようなサイトだと実質導入は無理か、相当に厳しいと思われる。
ウィキの利用と普及がまだまだだと言ってしまえばそれまでではあるし、サービスを提供しているアットウィキ側を責められない面もあるが、何でスマホだけ標準でページトップ移動ボタンが用意されているのかそれをPCやタブレットユーザに何故開放しないのか?と疑問に思わざるを得ない。

 

 

この記事が気に入ったら
いいね ! をお願いします

Pocket

ソフトウェアカテゴリの最新記事