さくらインターネットのレンタルサーバにGitWebを入れた。GitWebはいろいろパッとしないけれどレンタルサーバに入れるにはちょうど良いだろうと思ったので。
いや、実は大分前に入れていたのだけど使いづらいのであまり使っていなかった。
使いづらい点:
- 見た目がパッとしない上にスマホ縦持ちだとかなり見づらい(画面が切り替わるたびにいちいちズーム調整したりスクロールしたりしながら見なければならない)
- ソースコードのハイライトを有効にしていない
というわけで、入れ直してそのあたりを改善してみた。
gitのインストール
gitのインストール。基本的に最新のソースコードをダウンロードして展開、 gmake
、 gmake install
する。その際 gmake prefix=/gitインストール先 install
とインストール先を指定する。(参考:さくらインターネットのレンタルサーバーへGitをソースコードからインストールする手順 | WPlogs)
gitwebの配置
gitwebは gitインストール先 の share/gitweb
以下にある。とりあえずコピーしてhttpサーバが見えるところに配置した。
/gitweb置き場/gitweb.cgi
/gitweb置き場/static/*
gitへのパスはビルドした時に gitweb.cgi
に埋め込まれている。
gitwebの設定
/gitweb置き場/gitweb_config.perl
を作る。
# 全gitリポジトリの置き場所 our $projectroot = "/gitリポジトリ置き場"; # プロジェクト一覧のデフォルトの表示順。最近変更した物優先 our $default_projects_order = "age"; # プロジェクトの所有者を非表示 our $omit_owner=1; # UTF-8ではない場合のエンコーディング our $fallback_encoding = 'cp932'; # サーバに /etc/mime.types が無いので作って指定(必要なら) #our $mimetypes_file = "/gitweb置き場/mime.types"; # 見た目のカスタマイズ。モバイルデバイス(スマホ)対応 push @stylesheets, "gitweb-site.css"; our $site_html_head_string = '<meta name="viewport" content="width=device-width,initial-scale=1.0" />'; # ソースコードハイライト $highlight_bin = "/highlightインストール先/bin/highlight"; $feature{'highlight'}{'default'} = [1]; push @stylesheets, "highlight.css"; #highlight --print-style -s <stylename>
gitwebのテーマ?……失敗
gitwebのテーマというのがあると知って試してみたが、あまり使いやすくはならなかった。
- GitHub - kogakure/gitweb-theme: An alternative theme for gitweb, strongly inspired by GitHub
- gitwebのインストール&githubっぽいテーマを適応 | いちよんこーど
- Macにgitwebを導入してハイライト表示とgithub風テーマに変更する方法 | Macとかの雑記帳
モバイルデバイスに対応していない。
モバイルデバイス対応
スマホ(縦)でもそこそこ見られるようにcssを調整する。
/gitweb置き場/gitweb_config.perl
に次の文を追加。
our $site_html_head_string = '<meta name="viewport" content="width=device-width,initial-scale=1.0" />'; push @stylesheets, "gitweb-site.css";
/gitweb置き場/gitweb-site.css
を次のように作成。
/* page header,body,footer height */ /* (レイアウトが崩れるので) */ div.page_header { height: auto; } div.page_body { overflow: scroll; } div.page_footer { height: auto; overflow: auto; } /* search box width */ /* サーチボックスの幅が広すぎ */ input { max-width: 30%; } /* table vertical align */ /* (狭い画面幅だと文字の折り返しでセルの高さが高くなりがち。 ファイル名やプロジェクト名部分など、中央に合わせた方が見た目が良い) */ td { vertical-align: middle; } table.object_header > tr > td { vertical-align: top; } /* narrow screen device */ /* (幅か狭いデバイス用の設定) */ @media screen and (max-width:480px){ body { margin: 0; } td { word-wrap: break-word; } table { padding-left: 1px; padding-right: 1px;} /* source code */ /* (ソースの文字を小さくする) */ td.pre, div.pre, div.diff { font-size: 8px; } /* file list */ /* (ファイル一覧のモード列とサイズ列を消す) */ td.mode { display: none; font-size: 0; width: 0; padding: 0;} td.size { display: none; font-size: 0; width: 0; padding: 0;} /* project list */ /* (プロジェクトリストの幅を画面に合わせ、description列を消し、 その他の列の幅を指定する) */ table.project_list { display: fixed; width: 100%; } table.project_list > tr { width: 100%; } table.project_list > tr > td:nth-child(1) { max-width: 150px; } table.project_list > tr > th:nth-child(2){display:none; width:0; padding:0;} table.project_list > tr > td:nth-child(2){display:none; width:0; padding:0;} table.project_list > tr > td:nth-child(3) { width: 4em;} table.project_list > tr > td:nth-child(4) { width: 6.5em;} /* shortlog */ /* (shortlogのレイアウトを横に幅を取らないように) */ div.title_text { padding: 4px; } div.log_link { float: none; } div.log_body { padding: 4px; } /* (shortlogテーブルの幅を画面に合わせて列の幅を調整) */ table.shortlog { table-layout: fixed; width: 100%; } table.shortlog > tr{ width: 100%; } table.shortlog > tr > td:nth-child(1) {width: 4em;} table.shortlog > tr > td:nth-child(2) {width: 20%;} table.shortlog > tr > td:nth-child(4) {width: 6.5em;} /* log */ /* (logのコミット経過時間とコミットログとの間に改行を挟む。 横に長くならないように) */ div.header > a.title > span.age { width: 100%; } /* tags */ /* (タグ一覧のテーブル幅を画面に合わせ、列の幅を調整) */ table.tags { table-layout: fixed; width: 100%; } table.tags > tr{ width: 100%; } table.tags > tr > td:nth-child(1) {width: 4em;} table.tags > tr > td:nth-child(4) {width: 2.5em;} table.tags > tr > td:nth-child(5) {width: 5em;} /* object header */ /* (gitオブジェクトヘッダーテーブルの幅を画面に合わせ、列の幅を調整)*/ table.object_header { table-layout: fixed; width: 100%; } table.object_header > tr { width: 100%; } table.object_header > tr > td:nth-child(1) {width: 4em;} table.object_header > tr > td:nth-child(3) {width: 5em;} /* history */ /* (履歴一覧テーブルの幅を画面に合わせ、列の幅を調整)*/ table.history { table-layout: fixed; width: 100%; } table.history > tr { width: 100%; } table.history > tr > td:nth-child(1) {width: 4em;} table.history > tr > td:nth-child(2) {width: 4em;} table.history > tr > td:nth-child(4) {width: 6.5em;} } /* link buttons */ /* (リンクの見た目をボタンにする) */ td.link > a, div.page_nav > a, div.log_link > a, td.selflink > a { display: inline-block; background: #ffffff; padding: 2px; margin: 1px 1px; font-weight: bold; font-size: 11px; color: black; text-decoration: none; border-radius: 3px; border: 1px solid #e0e0e0; } td.link > a:visited, div.page_nav > a:visited, div.log_link > a:visited, td.selflink > a:visited { color: black; } /* small buttons */ div.log_link > a { font-size: 70%; } /* log */ /* (ログのボタンの位置を調整) */ div.log_link { margin-top: -6px; padding: 0 0 4px 0; width: 150px; } /* expand anchor clickable area */ /* (ファイル名やプロジェクト名のリンクを押しやすくする) */ table.tree > tr > td.list { padding: 0; } table.tree > tr > td.list > a, table.project_list > tr > td > a.list { display: block; padding: 0.4em 1em; }
ボタンの間の区切り線(|)が邪魔なので取り除くために gitweb.cgi
を修正する。CSSやJavaScriptでやるのは大変なのでCGIを直接書き換える。 gitweb.cgi
内の " | "
や ' | '
の部分を $linksep
に置き換え、変数 our $linksep = "";
を頭の方で定義しておく。 ただし、run_highlighterのところの " | "
は置き換えてはダメだと思う。
一部のソースがダウンロードされてしまう問題(mime typeの調整)
一部のソースコードで blob を押しても表示されずダウンロードしてしまうので、見知らぬファイルは基本 text/plain として扱うものとする。
gitweb.cgi
の sub blob_mimetype {
内を次のように変更。
} else { - return 'application/octet-stream'; + #return 'application/octet-stream'; + return 'text/plain'; } }
困る場合もあるかもしれないが、いちいち mime.types を追加していられないし Makefile
のように拡張子が無い場合もある。
ソースコードのハイライト
ハイライトには André Simon の highlight を使用する。
ただし、さくらのレンタルサーバではg++のバージョンにより最新版はビルド出来なかった。試行錯誤の末、最終的に少し古いバージョンをビルドして済ませた。
Luaのインストール
highlightはLuaをライブラリとして使用するので、先にビルドする。
wget https://www.lua.org/ftp/lua-5.3.4.tar.gz tar xf lua-5.3.4.tar.gz cd lua-5.3.4 gmake freebsd gmake install INSTALL_TOP=/luaインストール先
続いてhighlightのインストール……失敗
wget http://www.andre-simon.de/zip/highlight-3.42.tar.bz2 tar xf highlight-3.42.tar.bz2 cd highlight-3.42 gmake PREFIX=/highlightインストール先
エラー。 g++のオプションに -std=c++11
がついている。一部のソースコードでC++11の機能を使用しているので、対応コンパイラでないとビルド出来ない。 さくらのサーバに入ってるのはg++ 4.2.1(20070831)なのでc++11はおろか c++0xオプションすら使えない。 unique_ptrを使っている部分はauto_ptrで済むけれど、union内にstd::string入れているのはよく調査しないと無理。 最新のg++をインストールするのはさすがに無茶。
パッケージを利用出来ないか……失敗
ユーザーローカルなパッケージシステムを使う試みもあったようだ。
さくらのレンタルサーバ(スタンダード)でportsとpkgngを使って超簡単インストールツールを作ってみた - Qiita
sh -c 'bash -c "$(curl -fsSL https://raw.githubusercontent.com/bellflower2015/pspkg/master/setup.bash)"'
.cshrcに環境変数を設定するコードをセットして少し試してみる。
pspkg --search vim
Unknown modifier 't' "/home/***/.pspkg/ports/Mk/bsd.port.mk", line 1043: Unknown directive Unknown modifier 't' Variable .CURDIR is recursive. "/home/***/.pspkg/ports/Mk/bsd.port.subdir.mk", line 117: warning: "make -V _JAVA_VERSION_LIST_REGEXP USE_JAVA=1 -f /home/***/.pspkg/ports/Mk/bsd.port.mk" returned non-zero status "/home/***/.pspkg/ports/Mk/bsd.port.mk", line 1043: Unknown directive Unknown modifier 't' ...
うーん、エラー。makeがらみで動かなくなってるみたい。.pspkgのサイズも1GB以上ある。諦める。
highlightの古いバージョンを試す
いつからC++11前提になっているのか。
次のコミットからgcc4.7に移行し、C++11オプションが入った。
その直前のコミットでauto_ptrがunique_ptrへ置き換わっている。
となるとその直前のコミットか?
このバージョンならc++11オプションもunique_ptrもunion内std::stringも使っていない。
というわけで、 1fd00c2
のコミットでビルド。
git clone https://github.com/andre-simon/highlight.git cd highlight git checkout --forced 1fd00c2 cd highlight gmake PREFIX=/highlightインストール先 conf_dir=/highlightインストール先/etc/highlight/ LUA_CFLAGS="-I/luaインストール先/include -I/boost展開先" LUA_LIBS=/luaインストール先/lib/liblua.a LDFLAGS= gmake PREFIX=/highlightインストール先 conf_dir=/highlightインストール先/etc/highlight/ LUA_CFLAGS="-I/luaインストール先/include -I/boost展開先" LUA_LIBS=/luaインストール先/lib/liblua.a LDFLAGS= install
※boostは昔サーバに入れておいたboost_1_39_0を使った。xpressiveを使っているっぽい。インクルードファイルだけ必要なので展開して適当なところに置くだけで良い。
オプション | 説明 |
---|---|
PREFIX= | highlightのインストール先 |
conf_dir= | デフォルトは/etc/highlight固定なので明示的に指定 |
LUA_CFLAGS= | luaの(ついでにboostの)インクルードパスを入れる |
LUA_LIBS= | luaのライブラリ(.a)ファイル |
LDFLAGS= | -ldl の指定がエラーになるので |
※一部のパス(データ等へのパス)はプログラム内に埋め込まれるので注意。
テーマを選ぶ。
/highlightインストール先/bin/highlight -w
でテーマ名一覧が出る。- 一部のテーマは highlight Theme-Samples にサンプルがある。
Fine-Blueにする。
gitwebのディレクトリに行き、次のコマンドを実行すると highlight.css
が生成される。
/highlightインストール先/bin/highlight --print-style -s fine_blue
設定ファイルに次を追加。
$highlight_bin = "/highlightインストール先/bin/highlight"; $feature{'highlight'}{'default'} = [1]; push @stylesheets, "highlight.css";