引用を自動化

ブログで記事を書いていると引用することがよくあります。引用の仕方は人それぞれ、インターネット・サービスでも多種多様です。要は見てくれている人に正しい情報が伝われば良いのです。が、しかし、W3Cが提唱する基本ルールと云うのがあるのでその記述に添って書いていく方が万人に受け入れやすいのではないでしょうか。まだ、この基本ルールは世の中に浸透しているとは言いにくい状況ですが、そのうち足並みも揃ってくると思います。

ただ、基本ルール通りに記述するにはたくさんの情報をHTML要素の中に含めなければいけません。正しい記述方法は知っているけど、それが面倒でやっていない人も多いかと思います。そこでタグの生成を自動化できないかとAppleScriptを使って試してみました。私が採用した記述方法はこちら。ちょっと冗長かな。

ブロック要素

インライン要素

Get Quote Tag on GitHubDemo

Safariブラウザでタグを生成するAppleScript書類とAppleScript実行環境を持たない人のためにAutomator書類も同梱しています。Automator書類はダブルクリックすることでダイアログが出ますので「インストール」を選択してください。「アプリケーションメニュー > サービス」から利用できます。

使い方はSafariブラウザで引用したいところを選択した状態でサービスメニューから「Get Block Quote Tag」または「Get Inline Quote Tag」を選択すると上記の引用タグに整形されてクリップボードに保存されます。

参考にしたサイト

HTMLのsrcset属性が次期Safariで実装されるかも?

srcset属性とは、表示する環境に応じて画像を指定できる属性です。例えばRetinaディスプレイだと解像度が高い画像を表示させ、一般的なディスプレイだと標準解像度の画像を使用する、iPhoneなどの表示横幅が狭い時にはサムネイル画像を使用する。などのことをスクリプトやメディアクエリーを使わずに実装できるのです。しかもimg要素を拡張する形で行われるので手間がかからなくていい。

<img src="normal-image.jpg" srcset="better-image.jpg 2x">

間もなくリリースされるiOS 8やOS X Yosemiteに実装されるSafariでは、この属性が使える可能性が高いです。

Sass & Compassを導入

去年あたりからちょくちょく耳にするようになったSASSを本格的に使ってみようと思う。便利そうだなとはわかっていたんだけど、環境を整えなければ使えないところがネックとなってなかなか手を出し辛かったのです。愛用しているコーディングツールCoda 2がSASSへの対応を進めてきているので、ここで波に乗っていろいろな景色を眺めてみたい。

準備

利用するSASSとCompassはRubyプログラム言語を便利にするツール(ライブラリ)として提供されています。このライブラリを簡単に効率よくインストールや更新してくれるのがRuby言語用のパッケージ管理システムRubyGemsです。Macをお使いの方は、RubyおよびRubyGemsは予めインストールされているのですぐに作業を始められます。その他の方はRuby公式より入手できます。

OS Xに予めインストールされているバージョンは

  • Ruby 1.8.7
  • RubyGems 1.3.6

となっていました。Ruby 1.8.7は1年前に引退したので、興味のある方は現在の安定板Ruby 2.0.0-p247にしておくことをオススメします。しかし、SASSとCompassのみ使用される方はRuby 1.8.7でも大丈夫なようです。

では、パッケージ管理システムRuby Gemsを最新版にアップデートしてインストール作業を行います。ターミナルを起動して以下のコマンドを実行してください。

$ gem -v  #バージョンを確認
$ gem update --system  #システムのアップデート
$ gem cleanup  #古いバージョンの削除

インストール

CompassはSASSを機能拡張するライブラリなのでSASSは一緒にインストールされます。

$ gem install compass  #Compassのインストール
$ compass -v  #バージョン確認
$ sass -v  #バージョン確認

バージョンが表示されればインストールされている確認となります。現在のインストールバージョンは以下のようになりました。(date: 2013/07/10)

  • SASS 3.2.9
  • Compass 0.12.2

運用

さて、準備は整いました。
サイトデータを置くフォルダ(ディレクトリ)へターミナルで移動します。方法はいくつかありますが比較的簡単な方法を説明します。

  • ターミナルを起動し、サイトデータが含まれるフォルダをDockにあるターミナルアプリアイコンへドロップする
  • サイトデータが含まれるフォルダでコンテキストメニュー(右クリック)を表示させサービスから「フォルダに新規ターミナル」コマンドを実行する(参考:フォルダをターミナルで開く

ターミナルがサイトデータフォルダを開いた状態で表示されます。次にCompassの環境設定を行います。

$ compass create

自動的にCompassが運用するために必要なフォルダやファイルが作成されます。運用管理するために config.rb ファイルを開き、4−8行部分で設定を行います。

http_path = "/"  #サイトのルートディレクトリ
css_dir = "css"  #CSSのディレクトリ
sass_dir = "sass"  #SASSのディレクトリ
images_dir = "img"  #画像のディレクトリ
javascripts_dir = "js"  #JavaScriptのディレクトリ

17行目をコメントアウト

line_comments = false  #CSSに書きだした時に行数コメントを入れない

既存のサイトにCompassを設定する。

$ compass init

運用しているフォルダ名に config.rb の内容を書き換える。

以上でCompassの設定は終わりです。

実際に運用してみましょう!

sass/style.scss を作成して内容を書き込んで保存します。

$ compass compile

コマンドを実行します。
css/style.css が作成されて内容が反映されていると思います。ただ、保存するたびにコマンドを実行するのは面倒ですよね。以下のコマンドを実行すると保存すると同時にコンパイルしてくれます。

$ compass watch

このコマンドを終了するにはコントロールキーと’C’キーを同時に押す必要がありますのでお忘れなく。

おわりに

SASSとCompassを運用するにはターミナル操作が欠かせないので、まだまだ取っ付きにくい部分があるので普及するには時間がかかりそうだけど、この便利さを使いこなせるようになればかなり開発時間を短縮できるように思う。

サイトロゴをRetina対応

久しぶりにサイトに手を入れました。

Macbook Pro Retinaにしてからというもの、自分のサイトを見るたびにロゴがにじんで見えるようになって目の焦点が合わない気持ち悪い見栄えになったのでRetina画面に対応させました。

新しいロゴはこちら。あんまり代わり映えしないものです。

Thematic top logo 2x

今回は、スタイルシートのメディアクエリーを利用して、デバイス別に違う画像を表示するようにしました。Retina対応デバイスでは上記の新しいロゴが表示されるようにしてます。それ以外のデバイスは旧ロゴが表示され、これまでと変わりません。

どんな感じで設置しているかというと

#blog-title a {/* Retina以外のデバイスで表示 */
	background-image: url(image.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) {
	#blog-title a {/* Retina対応デバイスで表示 */
		background-image: url([email protected]);
		background-size: 100px 100px;	
	}
}

画像サイズが単純計算で4倍になる予定だったんですが、旧ロゴが10 KBだったのに対して新ロゴは175 KBへと17倍以上のサイズアップとなってしまいました。これからRetina対応サイトを作成する際には、予想以上のサイズアップが予想されそうです。

追記:新ロゴの画像サイズですが、大きな勘違いをしてました。作成に使ったイラストレータの画像サイズを参照してました。すいません。PNG画像サイズは16 KBと4倍どころか1.6倍程度に収まっていました。