はじめに

どうもこんにちは、HP編集係です。今回は地味に大きな更新をしたのでその中身に関して軽く説明していこうかなって思います。実装した流れとかもっと細かい話はいずれ気分が乗れば書こうかなって思います。

javascript

今回は主にJavascriptを用いた更新が多いです。というか、全部それがかかわってます。Javascriptを触るのは初めてということで、CSS同様1からの勉強で大変でした。では、次から作ったものの紹介です。

スマホ用サイト

まずはスマホ用サイトなんですが、このサイトって外部の人間っていうよりは電算の人や芝浦の人以外見ないようなものなんですけど、多分スマホからのアクセスが殆どなはずなんですよきっと(適当)。なので、スマホに合わせたサイト作りをしなければ見にくいということで作りました。具体的にはCSSに画面の大きさによる変化を加えて、小さい画面用のメニューバーを追加しました。

@media screen and (max-width:800px){
    /*ここに変更内容を記載*/
}

CSSにこのように書きその中に大きさによる変更点を書くことによって、この書き方では画面が800px以下の時は中のCSSも適用するようになります。これをうまく使って大きさによる変化(表示のオンオフなど)を付けます。次にメニューバーの追加ですが、これはここのサイトを参考にして作りました。中身のJavascriptは

$(function() {
    $("#headpanel-btn").click(function() {
        $("#panel").slideToggle(200);
        $("#headpanel-btn-icon").toggleClass("close");
        return false;
    });
});

とこのようになっていて、サイトの丸パクリです。とりあえずこんな感じでスマホ用サイトの実装ができました。

サイトのテンプレート化

この言い方が正しいかはよくわからないんですけど、すべてのページを, main.html, sub.htmlを言う形に分けました。理由としてはただ中身の変更したかっただけなのに変なとこいじっちゃってわけわかんなくなっちゃったってことが起こらないようにするためと、外見だけ少し変更したけど全部に実装しようとするとめんどくさいっていうのを回避するためです。main.htmlはこの今でいえば記事の部分です。sub.htmlはいまはブログのカテゴリーでしか使ってませんがツイッターの上に入る部分ですね。ちなみにこれを書いた人は別の部分に保存されてるやつをもってきてます。

$(function(){
    $("#mainload").load("main.html");
    $("#subload").load("sub.html");
    $("#memberexplain").load("/set/blog/19/01/explain.html");
});

このページはこのようなスクリプトで表示されてます。19/01の部分で人を判別してます。番号は今のところは入学年度と記事を書いた順です(これは書いてよかったのかとかは知らない)。

ページャー

次にページャーの実装の話なんですが、ページャーってなんぞやって人もいると思うので簡単に言えば、

これです。要するにページをスクロールするやつ(?)ですね。これは手動でも一応実装できなくはないんですけど、ブログの記事数が増えれば増えるほどめんどくさくなるので、できれば記事が増える前に自動化しておきたい部分の一つだったんですよね。というわけでいざ実装しようとしたわけなんですけど、調べても全然出来そうなものが出てきませんでした。ほんとこの世の中どうなってんだって感じです。そんななか色々とググっていたら、こんなサイトを発見したんですよね。これを使わない手はないと思って見事に使ってます。CSSのデザインとかがいまいち相性悪かったので無理やりこっちに合わせました。

$(document).ready(function() {
    $('#blog').DataTable( {
        "searching": false,
        "lengthChange": false,
        "ordering": false,
        "info":     false
    });
} );

細かいことはここに全部書いてあるのでここでは説明しませんがこいつが動くことによってページャーが動作してます。作った自分も全く分かってません(←こいつは大丈夫なのだろうか)。

カテゴリー絞り

これもブログだとよくあるやつなんですけど、カテゴリーごとにまとまって表示してくれるやつが欲しかったので作りたいなと思ってたんですけど、いざ作ろうとしたら全く動かないという現象が起こりまして、最終的に動いたのがこのJavascriptなんですが

function subete(){
    ("tbody tr:not(.all)").css("display", "");("tbody tr.all").css("display", "none");
}
function html(){
    ("tbody tr:not(.html)").css("display", "none");("tbody tr.html").css("display", "");
}
function blender(){
    ("tbody tr:not(.blender)").css("display", "none");("tbody tr.blender").css("display", "");
}
function game(){
    ("tbody tr:not(.game)").css("display", "none");("tbody tr.game").css("display", "");
}
function other(){
    ("tbody tr:not(.other)").css("display", "none");("tbody tr.other").css("display", "");
}

とこういったものです。上から順にカテゴリーの部分と一致してます。これをaタグのon-clickってやつでクリックされると実行するように作ってます。subete()とかかっこ悪いのでall()とかにしたいんですけども、all()は他で動いてる関数なのか実行しても動きがなかったので仕方なくこの関数名になりました。いい名前があったら変えます。

シンタックスハイライト

今回、スマホ用サイトの実装からこのブログまでの期間が開いてしまった原因がこれの実装に時間がかかったからです。こんな言葉聞いたこともねえよと思ったそこのあなた。自分もそうなので安心してください。シンタックスハイライトってなんぞやということですが、いわゆるコードをきれいに書きたい人のために自動で見やすい感じにしてくれるやつです。この言葉にたどり着いてからすぐに色々な種類のシンタックスハイライトするためのものを見つけたんですけど、そのなかでHPではPrismというサイトのものを使うことにしました。理由は他がなんか気に食わなかったからですね。使える言語が選択できるんですけど、このHPはいろんな言語書く人がいるってことで選択できるもの全部選んでます。あとはコピーしやすくするやつに何の言語で書かれてるか表示してくれるやつをいれてます。使える言語に関してはここから確認してください。

追記

上でも書きましたが、これを書いている現在ではブログのページを表示させる部分は次のように分けています。

もしこの記事の様にプログラムを書く場合はこの中のmain.htmlファイルに