crond と run-parts 、そして crontab と cron.d

crond のログ

cron の設定についてググると /etc/crontab のことがヒットします。それを見て素直に設定していたのですが、あるとき /var/log/cron のログを見て違和感が。下のような感じになっていました。

Sep 30 14:00:01 illya CROND[20809]: (root) CMD (/etc/cron.every10min)
Sep 30 14:01:01 illya CROND[20822]: (root) CMD (run-parts /etc/cron.hourly)
Sep 30 14:01:01 illya run-parts(/etc/cron.hourly)[20822]: starting 0anacron

crond が直接実行しているやつは僕が設定したもので、 run-parts 経由で実行しているのがデフォルトで設定されていたものです。どちらでも実行できるようですが、バラバラってのもどうかと思い、まとめることにしました。

run-parts 経由にする

検索キーワードに「 run-parts 」を含めると /etc/cron.d/ 以下のファイルについて書かれたページがヒットします。 ls してみると 0hourly と raid-check というファイルがあります。 0hourly の中身は下のようになっています。

# Run the hourly jobs
SHELL=/bin/bash
PATH=/sbin:/bin:/usr/sbin:/usr/bin
MAILTO=root
01 * * * * root run-parts /etc/cron.hourly

これをコピーして書き換えます。僕は下のようにしました。

# Run the ever 10 minutes jobs
SHELL=/bin/bash
PATH=/sbin:/bin:/usr/sbin:/usr/bin
*/10 * * * * root run-parts /etc/cron.every10min

気分的にスッキリしたんですが、またいつの頃にか新しい設定を追加するときに同じ間違い(?)をしてしまいそうです。

Google ドライブでリンクっぽい何かを作成する

作成方法

フォルダかファイルを選択した状態で Shift + Z を押し、表示されたメニューからリンクっぽい何かの作成先を選択して「ここに追加」をクリックします。

要注意

Windows のリンクとも、 Unix ライクな OS のハードリンクやシンボリックリンクとも異なります。どちらも実態で、片方を削除すると両方消えます。リンク状態を解消するには、片方をもう片方の場所へ移動させます。

参照

リンクっぽい何かの作成方法は「 Add the Same File to Multiple Folders in Google Drive without Copying 」を参考にしました。そこには Google Apps Script でさらに何やらできると書かれているっぽいです。

Linux で削除したのと同じユーザ名でユーザを追加したらパーミッションで困った

削除したのと同じユーザ名でユーザを追加した

見出しのままなのですが、僕は何も考えず userdel yayoi_thyme した後、 useradd yayoi_thyme としたわけです。ホームディレクトリは残してあったのでそのまま使いました。

ログインするとエラー

yayoi_thyme でログインすると下のようなエラーが出ます。

bash: /home/yayoi_thyme/.bashrc: 許可がありません

パーミッションは問題なし

エラーの文言からパーミッションの問題だとすぐに分かるのですが、ホームディレクトリとかその他のパーミッションは下のように表示されて問題なさそうです。

# ls -l
drwx------. 2 yayoi_thyme yayoi_thyme 79 10月 11 2016 yayoi_thyme

伝家の宝刀

chmod 777 /home/yayoi_thyme

まぁとりあえず抜きました。そしたらログインしときにエラーが出ません。どうなっているんでしょう? まるでユーザ yayoi_thyme が所有者でもグループでもないような挙動……。

UID と GID

いろいろと試行錯誤して分かったのは、ユーザ名とグループ名は同じでもユーザ ID とグループ ID は違っていたということです。

アルファベットとかで表記するユーザ名やグループ名に対して、ユーザ ID とグループ ID は数値です。新しく追加される度にインクリメントされて増えていくので、今回のような困ったことが発生しました。

解決

まずはディレクトリやファイルのユーザ ID とグループ ID を見てみます。

# ls -n /home/yayoi_thyme
drwx------. 2 1000 1000 79 10月 11 2016 yayoi_thyme

次はユーザのを見てみます。

# id yayoi_thyme
uid=1001(yayoi_thyme) gid=1001(yayoi_thyme) groups=1001(yayoi_thyme)

ユーザ ID とグループ ID を変更するなら下のようになります。

# usermod -u 1000 yayoi_thyme
# groupmod -g 1000 yayoi_thyme

ディレクトリやファイルの所有者をユーザ ID とグループ ID で指定するには下のようにします。

# chown 1001:1001 /home/yayoi_thyme

おまけで分かったこと

削除したユーザ名とかって、知らないところに残り続けるってことっぽいですね。

QNAP に rsync した際のグループ設定

QNAP にバックアップしたらデータが見えなかった

CentOS のファイルサーバから rsync で QNAP にバックアップをしています。 CentOS に Windows でデータを保存するとユーザ root 、グループ public で書き込まれます。さて、これをバックアップすると、 QNAP 上ではユーザ admin 、グループ 1004 になってしまい、そんなグループに所属していない QNAP 上の僕のアカウントでは見ることさえできないのです。この 1004 は CentOS 上のグループ public の GID です

rsync に何かいいオプションがないか探したのですがない模様。仕方ないので QNAP に新たなグループ public を作ってみました。ダメでした。

で、 QNAP 上のグループ public の GID を 1004 に設定することで大成功。 Windows からバックアップデータにアクセスできるようになりました。

GID の変更方法

SSH で QNAP にログインして /etc/config/group を直接書き換えて再起動します。それだけです。

CentOS 7 に google-drive-ocamlfuse をインストールできなかった

ダメだった

結論から言いますと opam というのが下のメッセージを表示し、ファイルをダウンロードできず先に進めませんでした。ダウンロードする方法を探せばどうにかなるかもしれませんが、面倒なので諦めました。

[ERROR] The sources of the following couldn't be obtained, aborting:
          - base.v0.11.1
          - dune.1.2.1
          - result.1.3
          - sqlite3.4.4.0
          - topkg.0.9.1
          - xmlm.1.3.0

参考にしたページ

下のページを参考にしました。僕の環境が CUI のみなので、その解決方法を含みます。

手順

  1. まず yum groupinstall "Development Tools" とのことですが、表示されるインストールリストを見て考えました。実際のところ、これ全部は要らんだろうと。何かあればシェルに文句を言われるでしょうから、とりあえず無視しました。

  2. yum install sqlite-devel fuse fuse-devel libcurl-devel zlib-devel m4 しました。メッセージ曰く依存関係で fuse-libs も必要だそうです。

  3. yum install ocaml ocamldoc ocaml-camlp4-devel ncurses-devel しました。

  4. cd /etc/yum.repos.d/
    wget http://download.opensuse.org/repositories/home:ocaml/CentOS_7/home:ocaml.repo
    yum install opam

    とのことですが、その URL が存在しないようです。仕方ないので OCaml の opam のページに行きました。

  5. sh <(curl -sL https://raw.githubusercontent.com/ocaml/opam/master/shell/install.sh) とのことです。言われるまま実行しました。

  6. opam がインストールできたところで opam init だそうです。しかし、 unzip とかなんかのパッケージが足りないとのことで yum からインストールします。しかし、 Bubblewrap はリポジトリになく、 Make とかする必要があるっぽいです。面倒なので opam 実行時に opam init --disable-sandboxing として回避しました。

  7. 次は opam update です。しばらく待ちました。

  8. 目的の FUSE filesystem over Google Drive のインストールです。 opam install google-drive-ocamlfuse としてしばらく待ちました。が、下のようなことを言ってきます。

    [ERROR] The sources of the following couldn't be obtained, aborting:
              - base.v0.11.1
              - dune.1.2.1
              - result.1.3
              - sqlite3.4.4.0
              - topkg.0.9.1
              - xmlm.1.3.0

    ここで僕は終了したわけです。

小説家になろうの表示を変更するブックマークレット 2

はじめに

表示変更のサンプル

小説家になろうの表示を縦書きかつ黒背景で白文字にするブックマークレットを作りました。完全な黒と白ではなくて monokai と呼ばれるカラースキームを真似てみたので色っぽいはずです。

今回のやつは色や文字サイズが決め打ちなんですが、ゆくゆくはブックマークレットをカスタマイズできるジェネレータを作りたいと思っています。

使い方

小説家になろうの本文があるページでブックマークレットを実行します。元の画面へ戻るにはページをリロード(再読み込み)します。

ブックマークレット

表示変更ブックマークレット

ブックマークレットのコード

javascript:(function(){var e="<style>#novel_no,.novel_bn,.novel_subtitle{text-align:center}body,html{height:90%}body,div,p{margin:0;padding:0}body{font-family:"font-size:16px;letter-spacing:.05em;line-height:1.7;writing-mode:vertical-rl;direction:ltr;unicode-bidi:bidi-override;color:#f8f8f2;background-color:#272822}a,a:link{color:#66d9ef}a:visited{color:#f92672}#novel_color{position:absolute;top:0;right:0;bottom:0;left:0;height:100%;max-height:600px;margin:auto;padding-right:20px;padding-left:20px;box-sizing:border-box}.novel_bn{margin:0 auto}.novel_bn:last-child{margin-top:30px}#novel_honbun,.novel_subtitle{margin-top:10px}.novel_bn a{display:inline-block;margin-right:10px;margin-left:10px}#novel_no{margin-top:15px}.novel_subtitle{font-weight:700}#novel_a,#novel_p{margin-top:10px;color:#75715e}</style>",n='<meta name="viewport" content="width=device-width, initial-scale=1">',o=$("title"),i=$("#novel_color"),t=$("#novel_a").next("novel_bn");$("head, body").empty(),$("link, style, script").remove(),$("head").append(e),$("head").append(n),$("head").append(o),$("body").append(i),$("body").append(t),$("*").removeAttr("style")})();

元になるコード

元になる JavaScript

$(function() {
  var style = '<style>#novel_no,.novel_bn,.novel_subtitle{text-align:center}body,html{height:90%}body,div,p{margin:0;padding:0}body{font-family:"font-size:16px;letter-spacing:.05em;line-height:1.7;writing-mode:vertical-rl;direction:ltr;unicode-bidi:bidi-override;color:#f8f8f2;background-color:#272822}a,a:link{color:#66d9ef}a:visited{color:#f92672}#novel_color{position:absolute;top:0;right:0;bottom:0;left:0;height:100%;max-height:600px;margin:auto;padding-right:20px;padding-left:20px;box-sizing:border-box}.novel_bn{margin:0 auto}.novel_bn:last-child{margin-top:30px}#novel_honbun,.novel_subtitle{margin-top:10px}.novel_bn a{display:inline-block;margin-right:10px;margin-left:10px}#novel_no{margin-top:15px}.novel_subtitle{font-weight:700}#novel_a,#novel_p{margin-top:10px;color:#75715e}</style>'
  var viewport = '<meta name="viewport" content="width=device-width, initial-scale=1">'
  var title = $('title')
  var novel_color = $('#novel_color')
  var novel_bn = $('#novel_a').next('novel_bn')
  $('head, body').empty()
  $('link, style, script').remove()
  $('head').append(style)
  $('head').append(viewport)
  $('head').append(title)
  $('body').append(novel_color)
  $('body').append(novel_bn)
  $('*').removeAttr('style')
});

元になる CSS

html,
body {
  height: 90%;
}
body,
div,
p {
  margin: 0;
  padding: 0;
}
body {
  font-family: "Meiryo", "Helvetica", "Arial";
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 1.7;
  writing-mode: vertical-rl;
  direction: ltr;
  unicode-bidi: bidi-override;
  color: #f8f8f2;
  background-color: #272822;
}
a,
a:link {
  color: #66d9ef;
}
a:visited {
  color: #f92672;
}
#novel_color {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  max-height: 600px;
  margin: auto;
  padding-right: 20px;
  padding-left:  20px;
  box-sizing: border-box;
}
.novel_bn {
  margin: 0 auto;
  text-align: center;
}
.novel_bn:last-child {
  margin-top: 30px;
}
.novel_bn a {
  display: inline-block;
  margin-right: 10px;
  margin-left:  10px;
}
#novel_no {
  margin-top: 15px;
  text-align: center;
}
.novel_subtitle {
  margin-top: 10px;
  font-weight: bold;
  text-align: center;
}
#novel_p,
#novel_a {
  margin-top: 10px;
  color: #75715e;
}
#novel_honbun {
  margin-top: 10px;
}

CSS だけでおしゃれなウェブアルバムを作る

JavaScript 不要CSS だけでおしゃれなウェブアルバムを作ります。

画像サイズがバラバラの場合はそれぞれに合った CSS を記述しなくてはならないので、サイズを揃えるのが望ましいです。

実際の表示

デモページ

コード

HTML

<div id="thumbnail">
  <ul>
    <li><a href="#disp-1"><img src="/cmp/parts/web-album/pic1-150s.jpg"></a></li>
    <li><a href="#disp-2"><img src="/cmp/parts/web-album/pic2-150s.jpg"></a></li>
    <li><a href="#disp-3"><img src="/cmp/parts/web-album/pic3-150s.jpg"></a></li>
    <li><a href="#disp-4"><img src="/cmp/parts/web-album/pic4-150s.jpg"></a></li>
    <li><a href="#disp-5"><img src="/cmp/parts/web-album/pic5-150s.jpg"></a></li>
    <li><a href="#disp-6"><img src="/cmp/parts/web-album/pic6-150s.jpg"></a></li>
    <li><a href="#disp-7"><img src="/cmp/parts/web-album/pic7-150s.jpg"></a></li>
    <li><a href="#disp-8"><img src="/cmp/parts/web-album/pic8-150s.jpg"></a></li>
    <li><a href="#disp-9"><img src="/cmp/parts/web-album/pic9-150s.jpg"></a></li>
  </ul>
</div>
<div id="display">
  <div id="disp-1"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic1-300s.jpg"></div></a></div>
  <div id="disp-2"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic2-300s.jpg"></div></a></div>
  <div id="disp-3"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic3-300s.jpg"></div></a></div>
  <div id="disp-4"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic4-300s.jpg"></div></a></div>
  <div id="disp-5"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic5-300s.jpg"></div></a></div>
  <div id="disp-6"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic6-300s.jpg"></div></a></div>
  <div id="disp-7"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic7-300s.jpg"></div></a></div>
  <div id="disp-8"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic8-300s.jpg"></div></a></div>
  <div id="disp-9"><a href="#anchor"><div class="close"><img src="/cmp/parts/web-album/pic9-300s.jpg"></div></a></div>
</div>
<div id="anchor"></div>

CSS

#thumbnail {
  width:  100%;
  height: 100%;
  margin:  0;
  padding: 0;
  background-color: #fff;
}
#thumbnail ul {
  margin: 30px 0 0 30px;
  padding: 0;
  list-style: none;
}
#thumbnail ul::before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  line-height: 0;
  margin-bottom: -30px;
}
#thumbnail ul::after {
  clear: both;
  content: "";
  display: block;
  line-height: 0;
}
#thumbnail li {
  float: left;
  margin-top: 30px;
}
#thumbnail li + li {
  margin-left: 30px;
}
#thumbnail li:nth-child(4),
#thumbnail li:nth-child(7) {
  clear: left;
  margin-left: 0;
}
#thumbnail img {
  width: 80%;
  transition: all .1s
}
#thumbnail img:hover {
  width: 100%;
  margin: -10%;
  transition: all .2s;
}
#display > div {
  position: fixed;
  z-index: -1;
  top:  0;
  left: 0;
  width:  100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: all .2s;
}
#display > div:target {
  z-index: 1;
  opacity: 1;
  transition: all .4s;
}
#display a {
  display: block;
  width:  100%;
  height: 100%;
  cursor: default;
}
#display .close {
  position: absolute;
  top:  50%;
  left: 50%;
  margin-top:  -150px;
  margin-left: -150px;
}
#display .close::after {
  content: "✕ 閉じる";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 100%;
  padding: 5px;
  color: #fff;
  font-weight: bold;
  word-break: keep-all;
  white-space: nowrap;
  background-color: rgba(0, 0, 0, .2);
  cursor: pointer;
}
#anchor {
  position: fixed;
  width: 0;
  height: 0;
  line-height: 0;
}

メニューのサンプル 3

メニューのサンプルです。

実際の表示

コード

HTML

<ul id="menu">
  <li id="item1"><a href="">ITEM 1</a></li>
  <li id="item2"><a href="">ITEM 2</a></li>
  <li id="item3"><a href="">ITEM 3</a></li>
  <li id="item4"><a href="">ITEM 4</a></li>
  <li id="item5"><a href="">ITEM 5</a></li>
</ul>

CSS

#menu {
  margin: 0;
  padding: 0;
  line-height: 1;
  list-style: none;
}
#menu::after {
  clear: both;
  content: "";
  display: block;
  line-height: 0;
}
#menu li {
  float: left;
  position: relative;
  z-index: 1;
}
#menu li + li {
  margin-left: 5px;
}
#menu li::before,
#menu li::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  line-height: 0;
}
#menu li::before {
  bottom: 0;
  width: 100%;
  height: 2px;
}
#menu li::after {
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
}
#menu li:hover::before {
  bottom: calc(100% - 2px);
  transition-property: bottom;
  transition-timing-function: linear;
  transition-duration: 0.1s;
  transition-delay: 0;
}
#menu li:hover::after {
  left: calc(100% - 2px);
  transition-property: left;
  transition-timing-function: linear;
  transition-duration: 0.1s;
  transition-delay: 0;
}
#menu li:hover a {
  transition-property: color;
  transition-timing-function: linear;
  transition-duration: 0.1s;
  transition-delay: 0;
}
#menu a {
  display: block;
  margin: 0;
  padding: 0.75em 1em;
  color: #333;
  font-weight: bold;
  text-decoration: none;
}
#item1::before,
#item1::after {
  background-color: #dd3333;
}
#item2::before,
#item2::after {
  background-color: #dd9933;
}
#item3::before,
#item3::after {
  background-color: #81d742;
}
#item4::before,
#item4::after {
  background-color: #8224e3;
}
#item5::before,
#item5::after {
  background-color: #52C0D4;
}
#item1:hover a {
  color: #dd3333;
}
#item2:hover a {
  color: #dd9933;
}
#item3:hover a {
  color: #81d742;
}
#item4:hover a {
  color: #8224e3;
}
#item5:hover a {
  color: #52C0D4;
}

メニューのサンプル 2

メニューのサンプルです。

実際の表示

コード

HTML

<ul id="menu">
  <li id="item1"><a href="">ITEM 1</a></li>
  <li id="item2"><a href="">ITEM 2</a></li>
  <li id="item3"><a href="">ITEM 3</a></li>
  <li id="item4"><a href="">ITEM 4</a></li>
  <li id="item5"><a href="">ITEM 5</a></li>
</ul>

CSS

#menu {
  margin: 0;
  padding: 0;
  line-height: 1;
  list-style: none;
}
#menu::after {
  clear: both;
  content: "";
  display: block;
  line-height: 0;
}
#menu li {
  float: left;
  position: relative;
  z-index: 1;
}
#menu li + li {
  margin-left: 5px;
}
#menu li::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  bottom: 0;
  width: 100%;
  height: 5px;
  line-height: 0;
}
#menu li:hover::before {
  bottom: 100%;
  transition-property: bottom;
  transition-timing-function: linear;
  transition-duration: 0.1s;
  transition-delay: 0;
}
#menu li:hover a {
  transition-property: color;
  transition-timing-function: linear;
  transition-duration: 0.1s;
  transition-delay: 0;
}
#menu a {
  display: block;
  margin: 0;
  padding: 0.75em 1em;
  color: #333;
  font-weight: bold;
  text-decoration: none;
}
#item1::before {
  background-color: #dd3333;
}
#item2::before {
  background-color: #dd9933;
}
#item3::before {
  background-color: #81d742;
}
#item4::before {
  background-color: #8224e3;
}
#item5::before {
  background-color: #52C0D4;
}
#item1:hover a {
  color: #dd3333;
}
#item2:hover a {
  color: #dd9933;
}
#item3:hover a {
  color: #81d742;
}
#item4:hover a {
  color: #8224e3;
}
#item5:hover a {
  color: #52C0D4;
}

メニューのサンプル 1

メニューのサンプルです。

実際の表示

コード

HTML

<ul id="menu">
  <li id="item1"><a href="">ITEM 1</a></li>
  <li id="item2"><a href="">ITEM 2</a></li>
  <li id="item3"><a href="">ITEM 3</a></li>
  <li id="item4"><a href="">ITEM 4</a></li>
  <li id="item5"><a href="">ITEM 5</a></li>
</ul>

CSS

#menu {
  margin: 0;
  padding: 0;
  line-height: 1;
  list-style: none;
}
#menu::after {
  clear: both;
  content: "";
  display: block;
  line-height: 0;
}
#menu li {
  float: left;
  position: relative;
  z-index: 1;
}
#menu li + li {
  margin-left: 5px;
}
#menu li::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  bottom: 0;
  width: 100%;
  height: 5px;
  line-height: 0;
}
#menu li:hover::before {
  height: 100%;
  transition-property: height;
  transition-timing-function: linear;
  transition-duration: 0.1s;
  transition-delay: 0;
}
#menu li:hover a {
  color: #fff;
  transition-property: color;
  transition-timing-function: linear;
  transition-duration: 0.1s;
  transition-delay: 0;
}
#menu a {
  display: block;
  margin: 0;
  padding: 0.75em 1em;
  color: #333;
  font-weight: bold;
  text-decoration: none;
}
#item1::before {
  background-color: #dd3333;
}
#item2::before {
  background-color: #dd9933;
}
#item3::before {
  background-color: #81d742;
}
#item4::before {
  background-color: #8224e3;
}
#item5::before {
  background-color: #52C0D4;
}