Masonryを使ってdivをタイリングする

先日、ODプロジェクト総合ウェブサイトのトップページのデザインを修正しました。

段組のレイアウトにするためfloatを使って配置していたのですが、その途中、特定の条件下でデザインが大きく崩れてしまうという問題に直面。
それについての簡単な説明と、僕が取った解決策を以下に記しておきます。

まずは、ざっくりと。

ブロック要素(div等)をを並べて記述すると、縦に連なって表示されることが多いと思われます。
ここでCSSの float:left を指定すると、左から順番に並ぶよう配置されます。

ブロック要素にfloat:leftを指定する(1)
ブロック要素にfloat:leftを指定する(1)

ブラウザの表示領域の右端に到達すると、次からは下に移動します。
ここでは、ブラウザのウィンドウサイズを変更して、その状態を発生させています。
ブロック要素にfloat:leftを指定する(2)
ブロック要素にfloat:leftを指定する(2)

綺麗にタイリングされていますね。
固定デザインには向きませんが、ユーザの環境に合わせて見た目が変化するウェブページの完成です。
ここまでは特に問題ありません。

異なるサイズのブロックを並べる

ですが、これが異なるサイズの場合はどうなるでしょうか。

高さの異なるブロック要素を並べる
高さの異なるブロック要素を並べる

例えばこのような、高さ(height)が異なるブロック要素を用意します。
先ほどと同じように、ウィンドウ幅を狭めてみましょう。

しまった! バラバラに配置されてしまった!
しまった!バラバラに配置されてしまった!

ご覧の通り、酷いことになっています。

もう少し見てみましょう。
1番(赤色)~3番ブロック(黄色)が一列配置され、そこで右端に到達します。
そして4番(緑色)が改行されるわけですが、左端である1番ブロックの下ではなく真下に置かれてしまっています。
これは縦に長い2番ブロック(オレンジ色)に阻まれてしまっている、と考えられます。

同様に5番(水色)と6番(青色)も、2番が邪魔になっています。
6番は上端がほんの少し引っかかっているだけですが、それでもダメです。
そして7番(ピンク色)になって、ようやく阻む物が無くなったので左端に配置されるわけですが、かえってそれが妙な空白を生み出してしまっています。

このレイアウト崩れが気になる場合、手作業で順番や高さを調整すれば良いことになります。
せっかくですし、何か自動的に解決してくれる方法が無いか探してみましょう。

Masonryを導入してみる

……と、探してみましたら、割とあっさり見つかりました。
MasonryというJavaScriptライブラリです。有名みたいですね。
ちなみにMasonは石工という意味らしいです。まさにタイル貼りといったところでしょうか。

JavaScriptライブラリのデファクトスタンダードであるjQueryを導入していれば、このMasonryはプラグインとして簡単に扱うことが出来ます。
もちろん、単独でのMasonry導入も可能とのことです。

[js title=”ヘッダ部分” htmlscript=”true”]
<head>
<script src="jquery-1.10.2.min.js"></script>
<script src="masonry.pkgd.min.js" ></script>

<script>
$(function()
{
//タイリング設定
$(‘article’).masonry(
{
itemSelector: ‘.itemSelector’,
columnWidth: 100, //width,margin,border等の合計
});
});

</script>
</head>
[/js]
2~3行目:
scriptタグでjQueryとMasonryライブラリを読み込みます。

6行目~:
jQuery向けのコードです。

9~13行目:
Masonryの設定を記述しています。
ここでは、HTMLソース内の article 要素をレイアウト領域全体とし、その中のitemSelectorクラスを実際に配置するブロックとしています。
また、columnWidth は1カラムの横幅です。ブロックの横幅にマージン等を加算した数値を記述します。

[html title=”本文”]
<article>
<!–タイリングするブロック–>
<div class="itemSelector"> 01 </div>
<div class="itemSelector"> 02 </div>
<div class="itemSelector"> 03 </div>
<div class="itemSelector"> 04 </div>
<div class="itemSelector"> 05 </div>
<div class="itemSelector"> 06 </div>
<div class="itemSelector"> 07 </div>
</article>
[/html]

続けて Body 内を以上のようにコーディングします。
article タグや itemSelector クラスにしていますが、設定さえすれば何でもOKです。
すると、以下のようなレイアウトになります。(実際には更に色指定などを追加しています)

Masonryによるレイアウト
Masonryによるレイアウト

だいぶ整いましたね!
どうやらこちらは、その時点で一番高さの合計が低いカラムを探し(同値の場合は左側を優先)、その下に配置する……というアルゴリズムのようです。

もちろんこれは極端な例ですが、それなりの効果を望めると思います。

注意点など

画像読み込みのタイミング

Masonryでのレイアウトには、各カラムの高さ情報が必要となります。
そのため、画像ファイル等を読み込む場合は、ロードのタイミングによっては綺麗に配置されません。
imgタグにwidth/heightを設定したり、あるいは読み込み完了を検知するライブラリを別途導入するなどで回避できるとのことです。

padding設定

itemSelectorで指定したブロック要素に対し、CSSでpaddingの値を設定しようとしたところ、上手く行きませんでした。
理由は分かりませんが、このブロック要素の内部に更に

タグでブロックを作り、そちらにmarginなりpaddingなりを設定することで解決できました。

Oculus Rift購入手順

最近、巷で話題のゲーム用ヘッドマウントディスプレイ「Oculus Rift(オキュラスリフト)」が気になって仕方ありません。

"Orlovsky and Oculus Rift" by http://galyonkin.com http://creativecommons.org/licenses/by-sa/2.0/deed.en http://en.wikipedia.org/wiki/File:Orlovsky_and_Oculus_Rift_%289084790214%29.jpg
“Orlovsky and Oculus Rift” by http://galyonkin.com
http://creativecommons.org/licenses/by-sa/2.0/deed.en
http://en.wikipedia.org/wiki/File:Orlovsky_and_Oculus_Rift_%289084790214%29.jpg

探せば輸入代行もあるようですが、OculusVR社は日本への発送も行っているようでしたので、公式通販してみることにしました。
英語オンリーな海外サイトゆえ、日本での買い物とは多少異なる部分がありましたので、その購入方法をメモしておきます。

注文してみよう

まず、OculusVR社の公式サイトから、Oculus Rift開発キットの注文ページを探しましょう。
Pre-Order Nowと書かれたリンクがありますので、これをクリックします。

OculusVR公式サイトのスクリーンショット
OculusVR公式サイトのスクリーンショット

Oculus Rift Development Kitの注文ページには、幾つかのフォームがありますが、これを埋めていきます。
文字コードがUTF-8になっているので、Addressの欄は日本語でも大丈夫かもしれませんが、念のため英語で書くことにしました。
また、クレジットカード番号など極めて重要な情報を入力することになりますので、セキュリティには十分に気をつけてください。

Order Form(注文フォーム)

Product
品物名。当然、Oculus Development Kitを選択します。
Qty
数量。quantityの略らしいです。
✓ I understand this hardware is intended for developers and it is not a consumer product.
開発者向けの商品であることを把握してますか?というチェックボックス。ONにします。

Payment Method(支払い方法)

VISA/MasterCard/Discover
クレジットカードで購入する場合に選択。これを選択したときは、以下のクレジットカード情報も入力する必要があります。
PayPal
電子決済サービスのPayPalを利用する場合に選択します。注文ページ入力後、PayPalのサイトで認証(支払い)を行います。
Card Number
クレジットカードの番号。
Expiration (MM/YY)
クレジットカードの有効期限。
CVV2
クレジットカードのセキュリティコード。カード裏面に書かれていたと思います。
Promo Code
プロモーションコード。何らかの方法でコードを貰った人は入力するらしいですが、詳細は不明です。

Billing Information(請求先)

Country
国名。Japanを選択します。
Company
会社名。個人なら空欄で良いでしょう。
First Name
購入者の下の名前。
Last Name
購入者の苗字。
Phone
電話番号。国際電話番号を付けて、+81-xx-…とした方が良いかもしれません。
Email
メールアドレス。当然ながら英語で送られてきますのでスパムフィルタに注意しましょう。
Address
市町村名より後の住所。例えば永田町1丁目7番1号ならNagata-cho 1-7-1とします。
Address 2
住所その2。建物名などを書く欄ですが、スペルが分からない建物が多いので困りものです。
City
区市町村名。例えば千代田区なら、ChiyodakuかChiyoda-kuのように書きます。
State / Province
都道府県名。
Zip / Postal Code
郵便番号。ちなみにZIPコードというのはアメリカ用の番号なので特に気にしなくて良いでしょう。

Shipping Information(送り先)

✓ Same as billing information
請求先と配達先が同じ場合にチェックします。チェックを外すと住所等の入力欄が表示されます。

以上を入力してcontinueボタンを押すと確認画面が出ます。
送料分の加算などもありますので、きちんと確認し、問題なければ購入します。
自分はPayPal支払いだったのですが、このタイミングで認証を行いました。

その後、確認メールが届きます。注文番号が記載されているので失くさないよう注意しましょう。
また、https://www.oculusvr.com/sales/のリンクから、状況確認や宛先変更ができるようです。

一太郎2013 玄を使って脚注入りepub電子書籍を作る

 前回の「一太郎2013 玄を使ってepubの縦書き電子書籍を作る」に引き続き「一太郎2013 玄」のepub変換機能を検証しようと思います。

 epubの特徴としてリフローで改行や表示行数を環境に応じて変えられるというのがありますが、そうなると気になるのがページごとに脚注を入れた場合の扱いです。
 一太郎では、脚注を「文書末に入れる」方法と「ページごとに入れる」方法が選べるので、今回はページごとに入れてみました。

一太郎で脚注を入力する

 脚注を入れたいところを選択して[挿入]>[脚注/割注/注釈]を選択

1taro_foot1

 今回は、脚注番号として「†(ダガー)」を頭文字、半角数字の連番を設定
 脚注文章に説明内容を入力します。

1taro_foot2

     また、[脚注オプション]を次のように設定しました。

  • [脚注の表示方法]の「縦組のとき縦中横で表示する」をチェック
  • [脚注番号の文字スタイル]を「ゴシック(小)」
  • [脚注エリアの位置]を「ページ末」
  • [番号の振り方]を「連続」

1taro_foot3

 同じ要領で、2ページにわたって3つの脚注を入れました。

1taro_foot0

epubに変換してみる

 メニューから[ファイル]>[他形式の保存/開く]>[EPUB保存]を選択して、epubで保存
 chromeの拡張機能「Readium」で表示させてみます、

epub_foot3

 ウィンドウサイズを調整して一太郎の編集画面と同じぐらいにして見ましたが、脚注は文章末にそろえられてしまいました。
 一太郎からの変換ではページごとに脚注表示をすることはできないようです。
 縦中横で表示されていた脚注番号も普通の縦書きになってしまっています。
 表示環境に左右される部分もあるのかもしれませんが、やはり表示を追及するとepubのコード調整が必要になりそうです。

WordPressカスタマイズのメモ(2)

先日の記事に引き続き、WordPressの設定を少し弄ってみました。
今回は以下の2項目です。

  1. コメントスパム対策
  2. カスタマイズ用テーマ作成

コメントスパム対策

どこから嗅ぎつけてこられたのか定かではありませんが、開始して間もない当Blogもコメントスパムの洗礼を受けることになりました。
管理画面で各コメントを「承認」しないとページには表示されないため、そこまで大きな被害があったわけではないのですが、そんな無意味なことで手間を取らされるのはハッキリ言って面白くありません。
スパム防止の手段は幾つかありますが、WordPressのプラグインで何か便利なものがないか探してみましょう。

新規追加のページで検索してみたところ、予想通り多くのプラグインが見つかりました。
今回はBestWebSoftが配布しているCaptchaプラグインを導入してみました。

Captchaプラグイン導入後のコメント欄
Captchaプラグイン導入後のコメント欄

画像のハイライト部分を見ていただければ分かりますが、コメント投稿フォームに簡単な計算式が表示されるようになります。
正しい答えが入力されていなければ、スパム投稿と判断されるようです。
ここでは漢数字の足し算が表示されていますが、設定によって算用数字のみにしたり、計算式の種類(と言っても減算&乗算くらいですが)を変更することも出来ます。

巷でよく見かける画像の文字を入力してもらうタイプに比べるとSPAM排除の精度は少し下がってしまいそうですが、とりあえずの対策としてはこれで十分かなと思います。
これでどうなるか、しばらく様子を見ることにします。

カスタマイズ用テーマ作成

前回、記事の末尾に表示されているメタデータ部分を変更しようと、WordPressのテーマファイルを修正しました。
それの続きとなります。

現在、当Blogで使用しているテーマファイルは「TwentyTwelve」で、これはWordPressの2012年デフォルトです。
公式で配布されているテーマファイル(デフォルトテーマを含む)は、WordPressに備わっているアップデート機能の対象となっているらしく、せっかくカスタマイズしてもWordPress本体の更新により元の状態に戻されてしまいました。
その対策として、TwentyTwelveのテーマファイル(ディレクトリ)を複製した、カスタマイズ専用のデーマを用意することにします。
参考にしたのは以下のサイトです。

デフォルトテーマの複製

ではまず、FTPクライアントなりターミナルなりを使用して、(WordPressインストールディレクトリ)/wp-content/themes へアクセスします。
そこで元になるテーマファイルをコピーします。
[bash]
$ cd ~/(インストールディレクトリ)/wp-content/themes
$ cp -a twentytwelve odproject_mytwentytwelve
[/bash]
新規テーマファイルの名前は分かりやすいものが良いでしょう。
ここでは TwentyTwelveの改造版という意味を込めて、My TwentyTwelve(ファイル名としては odproject_mytwentytwelve)という名前にしてみました。
そして各テーマディレクトリの直下にある style.css に、このテーマファイル自体のメタ情報(名称や説明など)が記述されていますので、これを適当に書き換えます。
[text title=”style.css” firstline=”2″]
Theme Name: My TwentyTwelve
Theme URI:
Author: ODプロジェクト
Author URI: http://odproject.net/
Description: 公式テーマTwentyTwelveのカスタマイズ用
Version:
[/text]
一旦ここでWordPressの管理画面を覗いてみましょう。
外観 – テーマ のページに、無事「My TwentyTwelve」が表示されています。ここまではどうにか成功のようです。

TwentyTwelveの複製
TwentyTwelveの複製

言語ファイルの複製

次に言語ファイルを用意します。こちらはテーマファイルとは異なり wp-content/languages/themes に置かれています。
先程と同様に、これもコピーしてしまいましょう。
[bash]
$ cd ~/(インストールディレクトリ)/wp-content/languages/themes
$ cp -a twentytwelve-ja.po odproject_mytwentytwelve-ja.po
$ cp -a twentytwelve-ja.mo odproject_mytwentytwelve-ja.mo
[/bash]
*.poファイルと*.moファイルが言語ファイルです。
これらの説明、および編集方法については前回の記事を参照してください。

参照する言語ファイルの指定

テーマファイルと言語ファイルの複製が完了しました。ですがこれだけでは正しくカスタマイズ出来ません。
今のままでは元テーマの言語ファイル(twentytwelve-ja.mo)を読み込んでしまいますので、この参照先を修正しましょう。

WordPressでは多言語対応の手段として、__()_e() 等の関数を用意しています。
これら翻訳関数に引数として英語の文章を渡すと、それに対応した別言語の文章が返り、無ければ英文のまま返ってくるという仕組みです。
リファレンスやテーマファイルの記述を読むと、第2引数としてテーマファイル名(正確にはテキストドメインと呼ぶようです)を与えることで、テーマに応じて参照する言語ファイルを設定できることが分かります。

*.phpファイルのあちらこちらに以下のような記述がありますので、これを片っ端から置換します。
自力でやる場合、数が多いので面倒かもしれません。ターミナルからsedコマンドを叩いた方が楽だと思います。
[php title=”元データ”]
<?php
_e( ‘English Message’, ‘twentytwelve’ );
?>
[/php]
[php title=”修正後”]
<?php
_e( ‘English Message’, ‘odproject_mytwentytwelve’ );
?>
[/php]
また、function.phpには、テキストドメインを指定しているらしき箇所がありますので、これも修正してしまいましょう。
[php title=”function.php” firstline=”45″ highlight=”52″]
/*
* Makes Twenty Twelve available for translation.
*
* Translations can be added to the /languages/ directory.
* If you’re building a theme based on Twenty Twelve, use a find and replace
* to change ‘odproject_mytwentytwelve’ to the name of your theme in all the template files.
*/
load_theme_textdomain( ‘odproject_mytwentytwelve’, get_template_directory() . ‘/languages’ );
[/php]
おそらく、これで odproject_mytwentytwelve-ja.mo を読んでくれるようになったはずです。

一太郎2013 玄を使ってepubの縦書き電子書籍を作る

LibreOfficeとwriter2epubを使って縦書き電子書籍を作る」に続いて「一太郎2013 玄」を使ってみます。

 

 テスト環境はWindows7に「一太郎2013 玄 体験版」を使いました。
 体験版は30日間利用できます。

一太郎で縦書き設定にする

 メニューの[書式]>[文書スタイル]を選択

taro_tate1

 [スタイル]タブの[文字組]から[縦組み]を選択

taro_tate2

EPUBで保存

 文章を入力したら、メニューから[ファイル]>[他形式の保存/開く]>[EPUB保存]を選択

taro_epub1

 EPUBファイルのプロパティを設定します。
 タイトルや作成者等を入力します。ここで表紙につかうデータも指定できます。
 種類は「リフロー」と「固定レイアウト」が選べます。今回は「リフロー」を選択します。

taro_epub2

 保存を選択して、ファイル名を指定すれば、EPUBで出力されます。

出力結果は・・・?

 綺麗に縦書きになっています。

taro_epub3

 ウィンドウサイズを変えてやると、ちゃんと改行され、表示行数も変わります。
 単語の検索などもちゃんとできるようです。

taro_epub4

 さすが日本語に特化しているだけあって、epubのソースを見ても綺麗になっており、調整をしたいときも編集が楽そうです。
 Wordからの乗換え版であれば8000円以下で買えるので、海外のツールを使って修正に苦労するのに比べれば、かなりよさそうです。
 文章主体の電子書籍であれば一太郎が今のところ最適かもしれません。