リンク、タイ文字の部分(ภาษาไทย)、下線部は、マウスカーソルを当てるとツールチップが出ます☆


the third place -5th take-

[底] 小説の縦書き表示

 最近、pixiv のブラウザ版で、小説の縦書き表示が実装されました。元々日本語の小説は本なら縦書きが一般的なのですが、元々英語圏で開発されたパソコン上で縦書きを扱うのはまだまだしちめんどくさいのです。で、pixiv ではどんな風に実装しているのかをスタートに、自分なりに縦書き表示ができないものかと調べてみました。

 結論から書くと、pixiv の縦書きの基本的な部分は CSS 3 で実現しているということがわかりました。CSS というのは Web ページの見た目を変更する仕組みで、CSS 3 ではかなり複雑なことができるようになっています。私が Web サイトを自力で組んでいた頃はまだ CSS 3 なんてなかったので、今回使った要素も初めて使うものが大半でした。

 pixiv で実装されている要素のうち、真似ができたのはこんな感じです。

  • 縦書き表示 …… -webkit-writing-mode:vertical-rl、direction:ltr、unicode-bidi:bidi-override
  • 小説の表示エリアからはみ出さない …… width:100%、overflow:auto
  • フォントをきれいに表示する …… font-family:Meiryo

 ここでキモになるのが -webkit-writing-mode。これを vertical-rl にすることで右から左に読む縦書き表示モードになります。direction と unicode-bidi はどちらも文字の方向を決めているのですが、これはどうやら指定しなくても適切な方向にデフォルトで設定されるみたいです。試しに逆にしてみてもうまくいきませんでした。

 しかし、-webkit-writing-mode を指定しただけでは、縦書きになった日本語が画面右側に思い切り延びていきます。これを防ぐために、widthoverflow を指定します。width は横幅を指定するもので、これを % で指定すると、親要素、ここでは小説の表示エリアを 100% として実際の表示範囲を決めることができます。これで 100% とすると横幅一杯になりますし、例えば 90% くらいにすると、右側に1割ほど余裕ができます。
 しかしこれだけでは収まりきらない部分が見えません。そこで、追加で overflow を指定します。こいつは指定した範囲から中身がはみ出した時にスクロールバーを出すかどうかを指定するもので、auto に指定するとはみ出している方向のスクロールバー(縦書き表示の場合は横スクロールバー)だけが表示されます。
 最後のフォントをきれいに表示するというのは、たまたま私のブラウザの指定では鉤括弧が次の文字にくっついてしまうフォントを使っていたので、pixiv を参考にメイリオを優先的に使うように指定しただけです。これは私の環境が Windows 7 だからで、Mac だったらヒラギノとかを指定するとよいと思います。Web で公開するなら両方指定しておいて、ある方で表示するようにするのが無難ですね。

 さて、ここまでができたこと。次にできなかったことです。

  • スクロールバーをクリックするまで表示しない …… jQuery プラグインの nicescroll を使用しているみたいです
  • マウスカーソルが縦書きの範囲にある時にホイールを回すと左右にスクロールする …… これも nicescroll です
  • 左右の矢印をクリックすると一定行スクロール …… 正体不明

 特に3番目の矢印をクリックすると一定行スクロール。これができると、ページめくりに近いことが実現できます。これは CSS だけで実現するのは無理なので JavaScript を使っていると思いますし、スクロールバーに nicescroll という jQuery プラグインを使っていることを考えれば、同じ jQuery プラグインの何かを使っているか、jQuery をベースに自力開発したかのどちらかだと思いますが。これはちょろっと試してみる程度では無理で、ちゃんとファイルをいじる必要があるので手を出していません。
 しかし、2番目のホイールで左右のスクロールができると大幅に読みやすくなるので、nicescroll を導入するだけでも意外と実用レベルの縦書き表示は難しくないかもしれません。
 そして、縦書きじゃなくて横書きの方がいい、という方のために切り替え機能を作る必要もあるので、JavaScript で CSS の指定を動的に切り替えるというボタンを作ることになりますが、これは難しくなさそう。実際、お気に入りをクリックすると背景色を変える、というスクリプトを書いたことがあるので、同じことを -webkit-writing-mode に対して行うだけです。

 ただし、一番大きな問題は、Firefox が対象外だということ。Chrome 系ブラウザーや Opera、Safari は大丈夫で、Internet Explorer も別の要素を指定する必要はありますが対応は難しくありません。しかし Firefox は writing-mode に対応していないので肝心の縦書きがそもそも実現できないのです。

 ちょっと余裕がある時かちょっと余裕がない時に、やってみますかねぇ。せっかく小説メインのサイトなのですし。

[底]今年もこんな調子?/短編追加

 今年もあっという間に2ヶ月が過ぎ、書いたものはほぼデレマスだけです。ごきげんよう。

 というわけで、アイドルマスターシンデレラガールズの短編を2本追加しました。「お試しの日」と「目指せお嬢様」です。前者はアイマス1時間 SS 参加、後者は現時点で最終日を迎えたイベント、アイドルチャレンジの裏話的な話です。

 今回のイベントは、思わず本を作ってしまうくらい好きな池袋晶葉がメダルで獲得できる(つまり運さえ良ければ手に入る)ということでちょっとばかり頑張ったのですが、最終日を残して現時点で入手できていません。運が悪い……。ついでに言うと、イベントとは関係のないガチャで、同じく大好きな荒木比奈もレアで出ているので、これも引きたかったんですが引けず。こちらはフリートレードで入手できたのですが、もし自力で引ければ特別なムービーを見ることができたので、それが残念ですね。

 アニメも放送日からかなり遅れつつも見ていて、結局のところアイマスに半身浸かって過ごしています。漫画はちょいちょい買ってるんですが、書くものはアイマスばかりの状態。
 さらに、2月、3月でライブが3本あって、残り半分は楽器演奏に浸かっている状態なので、5月のコミティアは見送ることにしました。

 4月にはバンドがすべていったん止まるので、夏か秋にはティア復帰したいものです。

[底]千早パンデミック!(Pandemic: the Cure リプレイ)

  • 2015-02-08 (日)
  • game

 先日 Pandemic: the Cure というゲームを買ったのですが、人とやる前に簡単にルール確認のためにソロプレイをやるか、と思い、せっかくなので765プロのメンバーから千早、春香、真をセレクトして遊んでもらいました。

 ということで、よくあるリプレイの形式ではないですが、プレイ小説「千早パンデミック!」を公開しました。ルール確認から1ゲーム丸ごとすべて含めたので長くなってしまい、6本に分けました。

(1) きっかけ」はそのままで、前振りというか導入というか。普通はゲームというと亜美真美なのですが、あの2人はゲーム結構やってる印象が強くて、私自身がゲーム勘のない人間なので、ゲーム自体がうまそうな2人は外しました。逆に千早はゲーム全般ほぼ経験がないことと、ゲームの主題歌歌ったらキャラのコスプレさせられて、周りの評価は高いのに本人はぶすくれてるイメージが(どこで読んだのか覚えていませんが)強かったので、今回は語り部に据えました。
 実際にゲームに触れるのは「(2) 箱を開けよう」からです。ボードゲームを知っていると「あ、小さい」と思う箱ですが、ダイスゲームと聞いていたので第一印象は「思ったよりデカイ」(ぷちます5巻53-B の響)でした。そして開けると説明書。コンポーネントはカードとダイスが大半なので、箱の大きさの割に中には余裕はあります。無理すれば感染バッグという同梱の青い袋にすべて入れて持ち運ぶこともできそう。袋に無理させるので私はやりませんが。
(3) ルールを確認」でひととおりルール確認。説明書には図解も多くて、わりと簡単です。そして「(4) ゲーム開始」でゲーム開始です。1周目で手順を1つ抜いているのですが、これは私が実際にうっかり忘れていたのです。わりと簡単です、と書いた割にアレですが、これは難しいとかそういうレベルの問題ではないので……。
(5) エピデミックとアウトブレイク」は中盤戦。徐々にエピデミックやアウトブレイクなど、通常よりも速いペースで感染が進むイベントがじわじわと増えてきます。そして「(6) 決着」で決着します。演出ゼロで進めた割には劇的なエンディングになったように思います。

 1回通してやってみて、さまざまなことがダイスの目に左右される代わりに行動の自由度がかなり高く、じわじわと進むバイオハザードやアウトブレイクに対処できそうで微妙に間に合わないところが面白いと思いました。いや、間に合う時はちゃんと間に合うんですよ、これ。でも間に合わない時もあって、「これ次やったら絶対大丈夫!」って思ってしまうんです。

 ただ、今回は私が1人でやっているので、なるべく3人の思考を分けるように複数の行動パターンを考えて「その子らしい」パターンを選択しましたが、自分以外の人とやるともっと発想の広がりがでると思うんですよね。友人と一緒にやるのが楽しみです。

トップページ

サイト内検索
紹介

管理人:春屋アロヅ(alohz)
連絡先:alohzhgmail.com
詳細、サイトについては諸々の紹介から。

最近の記事
カテゴリー
昔の記事
外部コンテンツ

ページの先頭に戻る