【縦書き】h2v.js の新バージョンは h2vR.js となりました（事後報告）。

PC版へ 2015年06月02日

毎度ご贔屓にしていただいている縦書き変換JavaScript・h2v.jsなのですが。

いろいろと考えた結果、縦書きに必要なパラメータ（フォントサイズや行間スペースなど）の設定方法を大幅に変更することとなりました。

つまり。

「縦書きに変換する動作」自体は殆ど変わっていないけれど、パラメータの設定方法には全く互換性がない

…というバージョンが誕生してしまったわけなのですね。

そういうわけで、混乱を避けるためにこの新しいバージョンからはスクリプト名を変更します。名づけて

h2vR.js

です。はい。

詳しくは公式ページで。

…ということなのです。突然の仕様変更、申し訳なく思っています。

h2vR.jsの開発意図は「レスポンシブなデザインのページに、もっと楽に対応したい」という事に尽きます。

スマホが爆発的に増加しているこのご時世、うちのサイトでも最近は、アクセスの半分近くがスマートフォンからとなっています。で、必然的にスマホにも対応したデザインのページを作成せざるを得ない状況。

PC / スマホ 両対応のページを作ろう、と思った時によく使われる手が、

スタイルシートの @media クエリを利用して、ブラウザのウィンドウサイズ（スクリーンサイズ）に応じてスタイルを切り替える。

…という、皆さんご存知の所謂『レスポンシブデザイン』という奴です。

で、これまでの h2v.js。

表示フォントサイズなどのパラメータを、関数 h2vconvert.init() に渡して縦書きに変換。

という仕様だったので、スクリーンサイズによって縦書き領域のフォントサイズなどを変更したい…と思った時にちょっと面倒臭い。例えば、

…と、なんだか二度手間三度手間。

さて、どうしよう。もっとシンプルに行けないものか。

あ、フォントサイズなどの値をパラメータ渡しするのは止めて、その要素に指定されているスタイルシートから取得することにすればいいんじゃね？

…ということで仕様変更して出来たのが h2vR.js というわけなのです。

h2v.js → h2vR.js の重要な変更点は以下のとおりです。

h2vR.jsの設定方法は こちらのドキュメント などをご覧ください。

そして、旧バージョン h2v.js の今後です。

などなど、様々な理由で h2v.js を使い続けたい方々もいらっしゃると思います。そのお考え、至極ごもっとも。

今後も当分の間、h2v.js のメンテナンスは続けてゆくつもりです。今後のポリシーはこちらのとおりです。

ということで、よろしくお願いします。

関連記事

コメント

hillomi2

いつも大変お世話になっております。
早速ローカルで試させていただきましたが、IE, safariではOKなのですが、chrome, firefox, operaでは、縦書きになりません。
何かお心当たりがあれば、ご教授していただければと存じます。
ちなみにバージョンはchromeが43、firefoxが37、operaが29でした。

よろしくお願いいたします。

hillomi2

メールでのご対応ありがとうございました。
教えていただきました暫定の方法のを、タグの直前に入れる方法、うまく行きましたので、とりあえずそれで対応いたします。
ありがとうございました。

tyzからhillomi2への返信

この不具合、複数の環境で再現できました。
別ドメインから外部スタイルシートをページに読み込んでいる場合などに発生します。JavaScriptのセキュリティに引っかかる場合があって、そのときに縦書き変換に失敗するようです。

とりあえず、

・</head> 終了タグの直前に、空のスタイルタグ <style></style> を挿入する。

…という方法で回避できます。

修正バージョンを準備しますので、お待ちください。

eight-m

お世話になっております。
h2vr_0　の使用で高さを固定にした場合に左寄せになってしまいます。
position:absolute;
left:0;
が関係しているようですが、意味があってのことなのでしょうか？
通常h2vr_nn使用時のように右から始まるようにならないでしょうか？
また、その他対応方法があれば教えていただきたく思います。
よろしくお願い致します。

eight-mからtyzへの返信

お世話になっております。
早々のご対応ありがとうございます！
希望通りの表示になりました。
今後もお世話になれればと思います。
よろしくお願い致します。