tech.farend

技術メモ置き場

記事ページを選択状態にするには

SHIRASAGI 0.4.0で「記事ページ」を選択状態にする方法

  1. 画面左「フォルダー」クリック
  2. フォルダー属性が「記事/記事リスト」のフォルダー（ex.「お知らせ」など）をクリック
    新しいバージョンならここで記事の一覧が表示される（らしい）が、
    SHIRASAGIのバージョンが古いと表示されない。
    表示させるためには、画面左「記事ページ」をクリック → 記事の一覧が表示される。

しかし、その都度選択するのは少し手間。
そこで、ショートカットを表示することによって解決する。

  1. さっきの「お知らせ」などのフォルダーをクリック
  2. 「編集する」クリック
  3. 基本情報「ショートカット」を「表示」に変更
  4. 「保存」ボタンをクリック

これで、管理画面のサイトトップ「コンテンツ」をクリックすると、記事ページが選択された状態になる。

お知らせ記事を作成後、表示するための設定

今回は私がSHIRASAGIでサイトを作成する中で一番苦労した「お知らせ記事」を表示する手順を紹介します。

まずは、お知らせ記事を作ってみます。
参考：お知らせ記事を作る
※上記ページの手順に従って操作を行う上であらかじめ作成しておかなければならないのは
「トップレイアウト」ですが、手順は 前々回の記事「レイアウトの作成」で紹介してある通りです。

出来上がったらサイトプレビューを見てみます。
しかし、私の場合これだけではトップページにお知らせ記事が表示されませんでした。

公開するための設定が必要だったようです。
1. 画面左にある設定「権限/ロール」をクリック
2. ロール名をクリック
3. 「編集する」をクリック
下の方にある「記事ページの公開（所有）」、「記事ページの公開（全て）」にチェックを入れる。
（ついでに「○○の公開」という項目すべてにチェックを入れておいてもいいかも）

今度こそできた！
サイトプレビューを見てみる。

しかし、まだ表示されません。
各記事での公開設定が必要のようです。

  1. フォルダー/お知らせ/記事ページでさきほど作った「新しいページ」という記事をクリック
  2. 「編集する」クリック
    スクロールし一番下までいくと、さっきはボタンが2つ（「保存」と「キャンセル」）でしたが、
    2つの間に「公開保存」というボタンが現れました。
  3. 「公開保存」クリック

これでOKです。
サイトプレビューを見てみると表示されました^^

ubuntuでの外部ボリュームマウントについて

Linuxサーバで外部ボリュームを起動時に自動的にマウントさせるには/etc/fstabに記載をすることで可能になるが、ubuntu（debian系全般の模様であるが）では外部ボリュームが自動マウント出来ないと、ホストは起動するがsshログインが出来ないようになる。
これを回避するため、/etc/fstabの記載で nobootwait のオプションを追記する。

1

/dev/xvdf1       /mnt    ext4    defaults,nobootwait 0 0

この追記で起動時に待ち（！？）が発生せず、sshdも通常通り起動しログイン可能となる模様。

なお、AMAZON Linux（たぶんRedHat系全般と思われるが）ではnobootwaitの記載は無くてもホストはログイン可能の状態となった。

情報ソース

Amazon EBS ボリュームを使用できるようにする - Amazon Elastic Compute Cloud

SHIRASAGIで始めにやったこと

サイトの作成

SHIRASAGIにログイン後、システム/サイト にある「新規作成」

  • サイト名：ブラウザのタブで表示させたいサイトのタイトルを入力する。
    （htmlで<title>サイト名</title>と入力する文字）

  • ホスト名

  • ドメイン名

  • グループを選択
    （このときにグループに追加しないとSHIRASAGI ログイン後の画面に反映されなかった。）

レイアウトの作成

画面左 メインメニュー/レイアウト にある「新規作成」
まずはトップページのレイアウトを作成した。

  • レイアウト名：top

  • ファイル名：top.layout.html
    拡張子.layout.htmlの入力は省略してもいい。

  • HTML
    ここにソースコードを入力する。
    パーツをどの位置に置くかを記述していく。

1
2
3
4
5
6
7

<html>  
  <head>  
  </head>  
  <body>  
    </ part "news" />  
  </body>  
</html>

※ 5行目の</ part "news" />は以下で作成。

パーツの作成

画面左 メインメニュー/パーツ にある「新規作成」
自分の分かりやすいように適当に入力。

  • パーツ名：お知らせ

  • ファイル名：news.part.html
    拡張子.part.htmlの入力は省略してもいい。
    さっきtop.layout.htmlで</ part "news" />と入力したので、ここはnews.part.htmlとなる。

    ？マークをクリックすると「.htmlなどの拡張子の記述は不要です。」と書いてあるので
    newsだけ入力すると「保存」をクリックすれば自動的に拡張子はつく。
    また、拡張子を省略せずにnews.part.htmlと入力するのは問題ないが、
    news.partと途中まで入力するとエラーが表示されるので気をつける。

  • HTML
    ここにソースコードを入力する。

1
2
3

<div id="news">  
  お知らせ内容  
</div>

これで、レイアウトとパーツが繋がった。

サイトメニュー/サイトプレビュー で見てみる。
しかし表示されない…固定ページを作っていなかった。

固定ページの作成

画面左 メインメニュー/固定ページ にある「新規作成」

  • タイトル：index

  • ファイル名：index.html
    拡張子.htmlの入力は省略してもいい。

  • レイアウト：top
    ここでさっき作ったレイアウトのtopを選択

もう一度、サイトメニュー/サイトプレビュー で見てみると表示された。

Octopressでの記事の書き方

記事のひな形の作成

コマンドラインで以下を実行すると記事のひな形が生成されます。生成されるひな形のファイル名は source/_posts/YYYY-MM-DD-title.markdown です。

1

bundle exec rake new_post["title"]

rakeタスクを実行するときの title 部分がそのままファイル名となり、またURLの一部となるので、日本語ではなく英語またはローマ字としてください。

記事の編集

source/_posts ディレクトリ内に生成されたひな形をエディタで開いて記事を編集します。

front matter の編集

ひな形の冒頭には「front matter」と呼ばれる記述があり、記事のタイトルや作成日、カテゴリなどが指定できるようになっています。このうち、titleとcategoriesを適宜書き換えてください。

1
2
3
4
5
6
7

---
layout: post
title: "Octopressでの記事の書き方"
date: 2014-11-27 17:38:31 +0900
comments: true
categories: ['@g_maeda', 'octpress']
---

title

記事のタイトルです。ここに記述したタイトルがページに表示されます。

categories

記事を分類するカテゴリです。複数指定できます。tech.farend.jpでは次の規則に従って付与します。

  • 半角英数文字のみ使用
  • アルファベットは小文字のみ使用
  • 記事の1個目のカテゴリはその記事の著者名を @username の形式で記述する
  • カテゴリを増やしすぎない。なるべく既存のカテゴリを使用

本文の記述

front matterの後にMarkdownで記述します。

記事の見た目の確認

コマンドラインで以下を実行すると、サイトの生成が行われるとともにwebサーバが起動します。 http://localhost:4000 にアクセスするとサイトをプレビューできます。

1

bundle exec rake preview

なお、bundle exec rake preview によってwebサーバが起動している間は、記事を保存するとファイルが書き換えられたのが検知され、サイトの再生製が即時行われます。記事執筆中はwebサーバを立ち上げっぱなしにして、 ①少し書いて保存 ②自動で再生成 ③生成されたサイトをブラウザで確認 — のサイクルを繰り返すと作業しやすいと思います。

ファイル名が文字化けして指定出来ない場合の対応

なんらかの事情でファイル名が文字化けし、指定ができなくなる場合がある（というかそういう場面に遭遇した）。
Linuxでは下記の様に表示されるが、Windowsなどでftpツールでログインするとindex.htmlが３つ、report.htmlが３つという訳のわからない状態に見える。
ちなみにLinuxでは表示できるが、 ファイル名を指定することができない ため何の対応も出来ない。
（そもそも同一のフォルダに同じ名前のファイルとか…）

1
2
3
4
5
6
7
8
9
10
11
12
13
14

[root@xxxx xxxxx]# ls -la
合計 244
-rw-r--r--.  1 hogehoge hogehoge 16959  2月 29 12:25 2012 ??report.html
-rw-rw-r--.  1 hogehoge hogehoge 16959  2月 24 14:41 2012 ??report.html
-rw-r--r--.  1 hogehoge hogehoge  8516  2月 29 12:25 2012 ??index.html
-rw-rw-r--.  1 hogehoge hogehoge  8516  2月 24 14:41 2012 ??index.html
drwxr-xr-x. 12 hogehoge hogehoge  4096  7月 11 11:51 2013 .
drwx--x--x.  3 hogehoge    500  4096  7月  1 15:03 2000 ..
drwxr-xr-x.  6 hogehoge hogehoge  4096  4月  2 20:08 2013 event
-rw-r--r--.  1 hogehoge hogehoge 12247  4月 29 21:56 2013 event.html
drwxr-xr-x.  5 hogehoge hogehoge  4096  1月 22 16:16 2013 report
-rw-r--r--   1 hogehoge hogehoge 16235  7月 11 11:51 2013 report.html
drwxrwxr-x.  5 hogehoge hogehoge  4096  4月 28 20:02 2013 img
-rw-r--r--   1 hogehoge hogehoge  9979  7月 11 11:51 2013 index.html

ファイルinode番号の確認

この場合はLinuxのファイルinode番号で処理をする。
ls コマンドの i オプションをつけると各ファイルのinode番号が表示される。
（最初の列がinode番号）

1
2
3
4
5
6
7
8
9
10
11
12

[root@xxxx xxxxx]# ls -li
合計 236
785288 -rw-r--r--. 1 hogehoge hogehoge 16959  2月 29 12:25 2012 ??report.html
785214 -rw-rw-r--. 1 hogehoge hogehoge 16959  2月 24 14:41 2012 ??report.html
785213 -rw-r--r--. 1 hogehoge hogehoge  8516  2月 29 12:25 2012 ??index.html
785212 -rw-rw-r--. 1 hogehoge hogehoge  8516  2月 24 14:41 2012 ??index.html
785289 drwxr-xr-x. 6 hogehoge hogehoge  4096  4月  2 20:08 2013 event
785071 -rw-r--r--. 1 hogehoge hogehoge 12247  4月 29 21:56 2013 event.html
785016 drwxr-xr-x. 5 hogehoge hogehoge  4096  1月 22 16:16 2013 report
784916 -rw-r--r--  1 hogehoge hogehoge 16235  7月 11 11:51 2013 report.html
785072 drwxrwxr-x. 5 hogehoge hogehoge  4096  4月 28 20:02 2013 img
784915 -rw-r--r--  1 hogehoge hogehoge  9979  7月 11 11:51 2013 index.html

inode番号でファイル指定しリネーム

inode番号で指定するには find コマンドが使いやすい。

1
2

[root@xxxx xxxxx]# find . -inum 785214
./??report.html

find コマンドに exec オプションをつける事で引数を受け渡してコマンド実行が可能

1

[root@xxxx xxxxx]# find . -inum 785214 -exec mv {} report._html1 \;

これで指定出来なかった ??report.html の一つが report._html1 にリネームされる。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

[root@xxxx xxxxx]# ls -la
合計 244
-rw-r--r--.  1 hogehoge hogehoge 16959  2月 29 12:25 2012 ??report.html
-rw-r--r--.  1 hogehoge hogehoge  8516  2月 29 12:25 2012 ??index.html
-rw-rw-r--.  1 hogehoge hogehoge  8516  2月 24 14:41 2012 ??index.html
drwxr-xr-x. 12 hogehoge hogehoge  4096  7月 11 12:31 2013 .
drwx--x--x.  3 hogehoge    500  4096  7月  1 15:03 2000 ..
drwxr-xr-x.  6 hogehoge hogehoge  4096  4月  2 20:08 2013 event
-rw-r--r--.  1 hogehoge hogehoge 12247  4月 29 21:56 2013 event.html
drwxr-xr-x.  5 hogehoge hogehoge  4096  1月 22 16:16 2013 report
-rw-rw-r--.  1 hogehoge hogehoge 16959  2月 24 14:41 2012 report._html1
-rw-r--r--   1 hogehoge hogehoge 16235  7月 11 11:51 2013 report.html
drwxrwxr-x.  5 hogehoge hogehoge  4096  4月 28 20:02 2013 img
-rw-r--r--   1 hogehoge hogehoge  9979  7月 11 11:51 2013 index.html

これで普通にファイル名でアクセスできる様になるので、その後の処理をすることになる。

一気に削除するなら

一気に削除するなら下記のコマンドとなる。 ただし -i オプションは削除実行の前に確認をするためコワイので、普通はリネームしてから処理することが多いと思われる。

1

[root@xxxx xxxxx]# find . -inum 785214 -exec rm -i {} \;