LoginSignup
1
6

More than 5 years have passed since last update.

@TanukiTam

うわぁ、crowi-plus便利そう

Posted at

そうだグループウェアを使おう

　寝不足でよくわからないまま作業をしていた私は、ひらめいた。
　Emacsのhowmが動かなくなって問題を解決するのに大変な目にあった八つ当たりではない。

　やっぱり、Markdownで書けるといいよね。
　本当ならEmacsのorg-modeでガシガシ書きたいんだけど、org-modeって知ってる？知らないよね？
だからMarkdownで良いんだよ。大凡が同じ、似て非なるものだし。

気付けば動いていた

　「よし！グループウェアを試してみよう」と２つほどMacに環境構築したところまでは覚えている。
　机に寄りかかり居眠りしていて、はっと気付くと、３つ目のグループウェアが動いていた。
　感覚的な話で申し訳ないけど、[Cattaz]が敷居がバリアフリーで良さげだった。
　生命レベル微存在の私だとコレぐらいの環境構築難度でも途中居眠りしてたけど、フレッシュなお肉さんのお友達ならサクサク使いこなせるはず。
　yarn（やーんて読むのコレ？や〜ん／／）のインストール途中で、node.jsスワッパーのnvmをnodebrewに変更しててhomebrewのインストール後のメッセージを信じた僕が馬鹿だったんだ。
　GithubのReadME読めば一発開帳だったのに。

Cattaz - Markdownとアプリのコラボレーションツール http://cattaz.io/index-ja.html
Markdownとアプリによる自由闊達なコラボレーションツールの「cattaz」を作った - Qiita https://qiita.com/ohtake/items/833de59a5c7850dbd984

　Cattazを入れて使い勝手を調べているうちに記憶が飛んで、気付いたら[Wiki.js]の環境構築に失敗してVisual Source Codeを開いてソースを読んでた。
　インストール手順の置いてあるオフィシャルサイトに繋がらなくて手探りなんですもの。
　ちょっとだけインストール手順書こうかな。困ってる人いるかもしれないし。

Requarks/wiki: Wiki.js | A modern, lightweight and powerful wiki app built on NodeJS, Git and Markdown https://github.com/Requarks/wiki
Wiki.js | A modern open-source Wiki software https://wiki.js.org/

Wiki.jsの環境構築

今、ちらっと見に行ったらインストール手順見れた。超簡単だった。
プログラムを置いておくディレクトリでシェルを一発叩くだけだった。

cd
cd var/wiki
curl -sSo- https://wiki.js.org/install.sh | bash

以下、まったく必要の無いものですがせっかくなので置いておきます。
作業ログみたいなものです。頑張ったんだなって思って下さい。

git clone https://github.com/Requarks/wiki.git
cd wiki
yarn install
# …かなりの時間待った。うたた寝してた。

# config.ymlがないと実行出来ないのでコピーしておきます
cp config.sample.yml config.yml
# 適当に編集する
vim config.yml

# mongodbを久しぶりにのぞいてみたら壊れたのよね。
# brew ほにゃららで入れ直してたりしてた。

# 起動スクリプトを叩く
yarn run
yarn run v1.5.1
error No command specified.
-- パッケージいっぱいずらずら並んで表示
info Project commands
   - build
      node tools/fuse
   - dev
      node tools/fuse -d
   - dev-configure
      node tools/fuse -c
   - postinstall
      opencollective postinstall
   - restart
      node wiki restart
   - start
      node wiki start
   - stop
      node wiki stop
   - test
      jest
question Which command would you like to run?:

これで起動準備できた。
コマンドを選んでねってメッセージ出してるわけです。
上から順番にコマンドを流していくわけです。
build からね

question Which command would you like to run?: build
nodeモジュールインストールだっけ？覚えてないっす。

# 何も考えずに次々と流していきます
# 最終的に動けばいいのですよ
# runの後にコマンドをつけると問い合わせ無しで実行してくれます
yarn run dev

そうやってコマンドを進めると、dev-configureのコマンドでブラウザ上から環境設定すると思います。
何度かトライアンドエラーして覚えてません。感を頼りに動いたのです。
postinstall　がモデルの構築だったかな？
Robo 3Tをダウンロードして来たのは覚えている。起きたらUserテーブル開いてたし。

ん、まぁー、いい感じっちゃいい感じで動いたんだけど。
アクセスポートを適当に変えても接続悪いんだよね。
メインページは開くけど、部品のjsがポートなしのurlで探しに行って見つからないとか。
80ポートは「働いています」ってメッセージだけだして全然働いていない不動のApacheさんが使うからダメなのよ。
このあたりでまた記憶が飛ぶ。

このwiki.jsはnode.jsアプリケーションとして、すごく丁寧で綺麗に作られている。
Authまわりとかここまで綺麗に作ってあるなんて、まるで私が自分で作ったプロジェクトを見ているみたいで楽しかった。
ミドルクラスのwebサイトをnode.jsを使って構築する場合などに、とても参考になると思います。
読みやすくて綺麗なソースで良かったです。

crowi-plus使うことにします。

＞ weseek/crowi-plus: crowi-plus - Enhanced Crowi https://github.com/weseek/crowi-plus

これも環境構築がすごく大変だった気がする。
もう眠くてそれどころじゃなかった。
頭痛もきついから眠りに布団へ行ったはずなのにオカシイよね。
うたた寝から目覚めたら、カスタマイズページを開いてCSSをぶっこん調整してたわ。
裏でデーモンプロセスがぶんぶん行ってるようなお大名アプリですね。

気に入ったので使ってみます。

さて、ここからが本命。
Google Chromeさんが編集不可に負けて息を止めそうですけど、頑張れ、超がんばれ。
意識をつけたり消したりしながらこねこねしたCSSです。
「markdown用CSS」でググって貰ってきたものを合わせた後に、適当にちょうせしたものです

カスタムヘッダーCSS
@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Ubuntu:bold);
@import url(http://fonts.googleapis.com/css?family=Vollkorn);

html {
  font-size: 100%;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

* {
  font-family: "游ゴシック体", YuGothic, "YuGothic M", sans-serif, Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
}

body {
  padding: 5em;
  margin: auto;
  color: #333;
  font-size: middle;
  font-weight: 500;
  line-height: 1.5em;
  padding: 1em;
  /* max-width: 42em; */
  background: #fefefe;
}

a {
  /* color: #0076e0; */
  /* color: #0645ad; */
  color: #00358c;
  text-decoration: none;
}

a:visited {
  color: #0b0080;
  text-decoration: none;
}

a:hover {
  color: #06e;
}

a:active {
  color: #faa700;
}

a:focus {
  outline: thin dotted;
}

a:hover,
a:active {
  text-decoration: none;
  color: #009cd5;
  outline: 0;
}

::-moz-selection {
  background: rgba(255, 255, 0, 0.3);
  color: #000;
}

::selection {
  background: rgba(255, 255, 0, 0.3);
  color: #000;
}

a::-moz-selection {
  background: rgba(255, 255, 0, 0.3);
  color: #0645ad;
}

a::selection {
  background: rgba(255, 255, 0, 0.3);
  color: #0645ad;
}

p {
  margin: 1em 0;
}

img {
  border: 0.5em #eee solid;
  -ms-interpolation-mode: bicubic;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

tr, img {
  page-break-inside: avoid;
}

h1,h2,h3,h4,h5,h6 {
  font-weight:normal;
  color:#111;
  line-height: 1.4;
  font-weight: 500;
}

h1 {
  font-size: xx-large;
  border: none;
  margin: 30px auto;
}
h2 {
  font-size: x-large;
  margin: 50px auto 25px;
  padding-top: .7em;
}
h3 {
  font-size: larger;
  font-weight: bold;
  margin: 2em 0 15px;
  padding: 4px 0 4px 12px;
  border-left: 1px solid #009cd5;
}
h4 {
  font-size: large;
  margin: 2em 0 .8em;
  padding: 4px 0 4px 12px;
  border-left: 1px solid #009cd5;
}
h5 {
  margin: 0 0 .5em;
  font-weight: bold;
}

h2,h3 {
  page-break-after: avoid;
}

p, h2, h3 {
  orphans: 3;
  widows: 3;
}


blockquote {
  font-family: "Source Code Pro", "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", "Meiryo", verdana, sans-serif;
  color: #666666;
  background: #fafafa;
  margin-bottom: 0.5em;
  padding-left: 3em;
  border-left: 0.5em #eee solid;
  border-top: 1px solid #f1f1f1;
  border-bottom: 1px solid #f1f1f1;
}

hr {
  border-bottom: 1px solid #eee;
  border-top: 1px solid #aaa;
  display: block;
  height: 1px;
  margin: 50px 0;
  padding: 0;
  background-color: transparent;
}

figure, dl, ol, ul, p, pre, table, blockquote {
  color: #333;
  margin-left: 25px;
  margin-bottom: 1.5em;
  padding: 0 5px;
}

pre, code, kbd, samp {
  color: #000;
  font-family: "Source Code Pro", "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", "Meiryo", verdana, sans-serif;
  font-size: 0.98em;
  page-break-inside: avoid;
  font-weight: normal;
}

pre {
  background: white;
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

figure {
  margin-left: 0;
  margin-right: 0;
  background: #eee;
}

figure figcaption {
  font-size: large;
  margin-bottom: 1px;
  padding: 5px 15px;
  background: #eee;
  text-shadow: 1px 1px 0 white;
}

figure pre {
  margin-bottom: 0;
}

figure pre+figcaption {
  margin-top: 1px;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

ins {
  background: #ff9;
  color: #000;
  text-decoration: none;
}

mark {
  background: #ff0;
  color: #000;
  font-style: normal;
  font-weight: bold;
}

sub,
sup {
  font-size: 87%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

ul,
ol {
  margin: 1em 0;
  padding: 0 0 0 2em;
}

li p:last-child {
  margin: 0;
}

dd {
  margin: 0 0 0 2em;
}

table, .table {
  border-collapse: collapse;
  border-spacing: 0;
  max-width: 800px;
}

table th {
  padding: 10px 35px 10px 0;
  text-align: center;
  border-bottom: 30px solid transparent;
  color: #666;
  background-color: #eee;
}

table tr {
  border-top: #666;
}

table td {
  padding: 10px 35px;
  border-left: 2px solid #009cd5;
  border-bottom: 30px solid white;
  vertical-align: top;
}

table td p,
table td ul {
  margin-bottom: 0;
}

li {
  margin-bottom: 5px;
}

dl dt {
  color: #666;
  font-size: large;
}

dl dd {
  margin-bottom: 1.2em;
  padding-bottom: 1.4em;
  border-bottom: 1px solid #f1f1f1;
}
dl dd:last-of-type {
  padding-bottom: 0;
  border-bottom: 0;
}

.crowi.main-container .crowi-header .navbar-collapse {
  background: #002B72;
}

.nav > li {
  font-size: large;
}

.nav > li.dropdown > button {
  margin: 7px 0 0 0;
}

.wiki ul li {
  line-height: 1.1em;
}
.wiki ol li {
  line-height: 1.1em;
}
.wiki ul li p {
  line-height: 1.1em;
  margin: 8px 0;
}
.wiki ol li p {
  line-height: 1.1em;
  margin: 8px 0;
}
.wiki a {
  color: #0057e5;
}
.wiki pre {
  color: #333;
  max-width: 800px;
  background-color: #ddd;
  border: 4px double #aaa;
  border-radius: 4px;
}

@page :left {
  margin: 15mm 20mm 15mm 10mm;
}

@page :right {
  margin: 15mm 10mm 15mm 20mm;
}

@media only screen and (min-width: 480px) {
  body {
    font-size: 14px;
  }
}

@media only screen and (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

@media print {
  * { background: transparent !important; color: black !important; filter:none !important; -ms-filter: none !important; }
  body{font-size:12pt; max-width:100%;}
  a, a:visited { text-decoration: underline; }
  hr { height: 1px; border:0; border-bottom:1px solid black; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; padding-right: 1em; page-break-inside: avoid; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

/**---------------------------------------------------------------------------
 **
 **/

cite {
  font-style: italic;
}

iframe {
  max-width: 100%;
}


.fr,
.imgR {
  float: right;
  margin-left: 30px;
}

.fl,
.imgL {
  float: left;
  margin-top: 7px;
  margin-right: 30px;
}

.btn,
.imgC,
.tC {
  text-align: center;
}

.imgC {
  margin-left: auto;
  margin-right: auto;
}

img.imgC,
img.imgL,
img.imgR {
  margin-bottom: 1.5em;
}

.text {
  overflow: hidden;
}

.description {
  clear: both;
  position: relative;
  margin: 0 auto 1.5em;
  padding: 2.5em 20px 1px;
  border: 1px solid #eee;
  box-shadow: 2px 2px 0 #eee;
}

.description:before {
  content: "description";
  position: absolute;
  top: 0;
  left: 0;
  background: #eee;
  padding: 1px 10px;
  border-radius: 0 0 5px 0;
  color: #333;
  font-size: 12px;
}

.note {
  clear: both;
  margin: 0 auto 1.5em;
  padding: 1.5em 20px 1px;
  background: rgba(255, 255, 0, 0.06);
  border: 2px solid rgba(255, 165, 0, 0.25);
  box-shadow: inset 0 0 25px rgba(255, 165, 0, 0.12), inset -1px -1px 0 white, inset 1px 1px 0 white;
}

.btn {
  clear: both;
  font-size: large;
}

.btn a {
  box-sizing: border-box;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1), inset -1px -1px white;
}

.btn a:hover {
  background: #009cd5;
  top: 1px;
  box-shadow: 3px 2px 0 rgba(0, 0, 0, 0.1), inset -1px -1px white
}

.movie,
.video,
.youtube {
  position: relative;
  margin-bottom: 1.5em;
  padding-top: 56.25%;
}

.movie iframe,
.video iframe,
.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.twitter-tweet {
  margin-bottom: 1.5em !important;
}

　

1
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
6