blog.textfile.org結城浩のブログ

blog.textfile.org

文字コードをutf-8にし、改行コードをunixにするVimのコマンドを作る

背景

  • Vimを使っている。
  • Windowsをメインに使っていた時代に作ったShift_JISのファイルがある。

問題

  • 編集するときに「文字コードをutf-8にし、改行コードをunixにする」という操作をよく行う。

解法

  • コマンドラインから以下のように入力すればいい。
1
2
:set fenc=utf8
:set ff=unix
  • 頻繁に行うなら、以下のように ~/.vimrc に書いておき、コマンドラインから :SetUU と入力すればいい。
~/.vimrc
1
2
3
4
5
function SetUU()
  set ff=unix
  set fenc=utf8
endfunction
command -nargs=0 SetUU call SetUU()

自分用のWebフォントでアイコンを作る

背景

  • 自分のWebサイトでアイコンを使っている。

問題

  • pngなどの画像ファイルとしてアイコンを利用すると、大きさ調整や文字とのバランスで扱いが面倒である。

解法

  • Webフォントとしてアイコンを作り、CSSを用意しておく。

結果

  • シンプルなマークアップだけで任意の大きさのアイコンが利用できる。

HTML

sample.html
1
2
<link rel="stylesheet" href="http://www.hyuki.com/common/hyuki-font/hyuki-font.css" >
<h1> <i class="hyuki-ghost"></i> 結城浩 </h1>

表示

結城浩

詳細

  • OmniGraffleのようなドローソフトで、アイコンをSVG形式で書き出す。複数アイコンは複数ファイルにしておく。
  • アイコンのSVGファイルをすべてzipにまとめて、Iconvaultにアップロードする。
  • 結果、woff, ttf, eot, svg などの拡張子がついたフォントの集合がダウンロードできる。
  • ダウンロードしたファイルの中にはCSSとHTMLファイルが含まれているので、それを参考にして利用する。
  • ファイル名をリネームする場合には、そのファイル名を参照している別のファイルがないかどうかに注意する。

実例

  • 書き出したSVGファイル: hyuki-ghost.svg
  • この hyuki-ghost.svg を zip して hyuki-ghost.zip を作る。
  • Iconvaultにアップロードする。
  • 結果がまとまった zip ファイルがダウンロードできる。
  • それを展開して編集する。
hyuki-font.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/*
 * hyuki-font
 * Font Copyright by Hiroshi Yuki.
 * Font files are converted with iconvau.lt
 */

@font-face {
  font-family: "hyuki-font";
  src: url("hyuki-font.eot");
  src: url("hyuki-font.eot?#iefix") format("embedded-opentype"),
       url("hyuki-font.woff") format("woff"),
       url("hyuki-font.ttf") format("truetype"),
       url("hyuki-font.svg#hyuki-font") format("svg");
  font-weight: normal;
  font-style: normal;
}

.hyuki-ghost:before {
  font-family: "hyuki-font";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  text-decoration: inherit;
}

.hyuki-ghost:before { content: "\f101"; }
sample.html
1
2
<link rel="stylesheet" href="hyuki-font.css" >
<i class="hyuki-ghost"></i>

参照

補足

正確なところはよくわからないけれど、うまく表示されない現象が起きていたのでメモ。

  • hyuki-font.cssを www.hyuki.com ドメインに置いたままで blog.textfile.org から参照した場合:
    • MacのSafari, Chrome では表示される。
    • MacのFirefox, Windows のFirefox では表示されない。
  • hyuki-font.cssを blog.textfile.org ドメインに移して blog.textfile.org から参照した場合:
    • MacのSafari, Chrome, Firefox, WindowsのFirefox では表示される。

Octopressの一部に、独立したデザインの新ページを作る

背景

  • Octopressを使ってブログを運営している。
  • 作ったページはどれも統一感のあるデザインでまとまっている。

問題

  • Bootstrapのテンプレートを新たに使い、ブログとは独立したデザインの新ページを作りたい。
  • でも新たに別ブログや別サイトを立ち上げるのはいや。Octopressの一部を間借りする形にしたい。

解法

  • 以下では仮にsandboxという名前で新ページを作ることにする。

  • source/sandbox/index.markdown を作る。これは新ページのMarkdownソースである。

source/sandbox/index.markdown
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
layout: sandbox
date: 2014-10-20 21:12:08 +0900
title: "ささやかな、毎日の生活"
subtitle: "今日という日に感謝"
author: Hiroshi Yuki
---

# Heading 1

## Heading 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

(以下略)
  • source/_layouts/sandbox.html を作る。これは新ページのレイアウトである。Bootstrapのテンプレートをもとにする。

    • この中に出てくる css/bootstrap.min.cssなどのパスは(うまい解決方法がまだわかっていないので)assets/sandbox/ 以下に指定しておく。
    • たとえば、css/bootstrap.min.css<link href="http://blog.textfile.org/assets/sandbox/clean-blog/css/bootstrap.min.css" rel="stylesheet"> のように指定する。
    • ページのタイトルは page.title のように書き、二重の{} ではさむ。内容は content を同様にはさむ。source/_layouts/ の他のファイルを参考にすればわかる。要するにJekyllの(Liquidの)記法である。
  • 必要なファイル(自分が使いたいBootstrapのテンプレートなど)は(うまい置き場所がわかってないので)assets/sandbox/ 以下に展開する。

  • あとはいつも通りにbuildとdeployを行う。

結果

以下は、Start Bootstrapの Clean-Blog というテンプレートを利用した例である。blog.textfile.org配下なのに、このブログとまったく異なるテイストの新ページができている。

MacBook AirをYosemiteにバージョンアップ

ふだん使っているMacBook AirをOS X Yosemite (version 10.10)にバージョンアップした。

/usr/local に大量のファイルがあるとインストールにとても時間がかかるという話を聞いたので、待避してスピードアップした。

すべて実行するのに、二時間程度かかった。

手順は以下の通り。

バックアップ

外付けUSBハードディスクにTime Machineでバックアップを行った。

Mavericks でソフトウェア・アップデート

アップルマーク>ソフトウェア・アップデートで、できるだけアップデートをした。

brew update

以下のコマンドを実行した(機械的に実行したのではなく、指示に従った措置を行った。詳細は省略)。

$ brew update
$ brew doctor
$ brew cleanup

なお、この際に、/usr/local/Library/brew.rb の一行目をチェックしておくといいらしい。YosemiteではプレインストールされるRubyのバージョンが新しくなるため、/usr/local/Library/brew.rbの一行目(shebang行)にRubyのバージョンが明示的に書かれていると動かなくなる可能性があるらしい。

以下のように、.../Current/...になっていれば大丈夫。

#!/System/Library/Frameworks/Ruby.framework/Versions/Current/usr/bin/ruby -W0

/usr/local の待避

以下のコマンドを実行して、/usr/local を自分のホームディレクトリ直下に待避した。

$ sudo mv /usr/local ~/local

/usr/local以下に自分がふだん使っているシェルがインストールされているとハマるらしいので注意。詳細は末尾の「参考サイト」参照のこと。

Yosemiteインストール

AppStoreでYosemiteをダウンロードして、指示に従う。

残り20分→残り8分→終了(途中で何回か自動的に再起動)。

/usr/local の復帰

以下のコマンドを実行して、/usr/local を復帰した。

$ sudo mv ~/local /usr

brew doctor

以下のコマンドを実行した(機械的に実行したのではなく、指示に従った措置を行った。詳細は省略)。

$ brew doctor

バックアップ

外付けUSBハードディスクにTime Machineでバックアップを行った。

動作確認

  • TeX Live 2013
  • OmniGraffle Pro 5.4.4
  • ATOK 2013

参考サイト

静的サイトをgithub.ioでホスティングし、独自ドメインでアクセスする

はじめに

draftという名前を付けた、非常に単純な”Distraction Free”エディタを使っている。

このエディタは静的なサイトとして設置できるので、GitHub Pages (github.io)でホスティングすることにした。

また、そのサイトを独自ドメイン draft.textfile.org でアクセスできるようにした。

GitHub Pagesの公式サイトに書いてある通りの手順でできた。

手順

  • gh-pagesブランチを作成する。
  • gh-pagesブランチに、index.html および必要なファイルをコミットする。gh-pages ブランチにコミットしたファイルが、github.ioでホスティングされる。
  • この時点で、http://hyuki0000.github.io/draft にアクセスできる。

  • gh-pagesブランチに、独自ドメイン名を書いた CNAME という名前のファイルをコミットする。このファイルの内容は draft.textfile.org という一行である。

  • DNSプロバイダで、CNAMEの設定をする。draft.textfile.orgのCNAMEレコードがhyuki0000.github.ioを指すようにする。
  • DNSプロバイダでの設定が正しくなされているかどうかは、digコマンドで確認する。
1
2
3
4
5
$ dig +nostats +nocomments +nocmd draft.textfile.org
;draft.textfile.org.      IN  A
draft.textfile.org.   300 IN  CNAME   hyuki0000.github.io.
hyuki0000.github.io.  1524    IN  CNAME   github.map.fastly.net.
github.map.fastly.net.    17  IN  A   103.245.222.133
  • DNSの設定が反映されるまでには数分〜十数分の時間がかかる。
  • そこからさらにGitHub Pagesが表示されるまでに少し時間がかかる。
  • GitHubでの設定が正しくなされているかどうかは、Settingsで確認する。

以上。

参照

Bootstarpで「レビューア専用ページ」をリニューアル

結城は自著を執筆するときにレビューアさんにレビューをお願いする。

そのときにレビューア専用ページというものを作って、メールやPDFを渡すようにしている。

Bootstrapを利用して、レビューア専用ページをリニューアルしてみた。

これまでのレビューア専用ページ

リニューアルしたレビューア専用ページ

次回ではこれを使ってみよう。

参考にしたページ

http://startbootstrap.com/templates/heroic-features/