Aokashi Room

なんでも書き続けるAokashiの部屋

句読点を末尾に持っていける文章表示プログラム

前に、GitHubのGistにこんなものを投稿しました。

句読点がメッセージの末尾にきた場合、折り返さずに詰めるプログラム · GitHub

これは、文章を表示する際に、横末尾*1の文字の次が句読点*2だった場合に、その句読点を折り返さずに末尾に持っていくプログラムです。

実際に聞いてわからないと思うので、動いている様子を見てみましょう。

f:id:aokashi:20170810181655p:plain

句読点の「、」が3行目にはみ出していることが確認できますでしょうか。

以下は、Gistのソースコードです。長いので動く仕組みとかどうでもいい方はそのままスクロールしてください。

句読点がメッセージの末尾にきた場合、折り返さずに詰めるプログラム

注意

ただし、このプログラムをうまく動かすには幾つか条件があります。

  • フォントは固定幅フォントを利用すること
  • 文字数として全角文字は1文字で、半角文字は0.5文字でカウントします
  • CSSletter-spacing は利用しないこと(利用すると半角文字2つ分の幅が全角文字1つ分の幅と合わなくなるため)

そもそもなぜ作ったのか

多分ここが本編かもしれません。

役に立ちそうだけど、実際に使われている場面は想像しにくいと思います。

これは、JavaアプレットWWAのメッセージの表示方法を再現したかったからです。なお、Javaアプレットで実装されているWWAのことをこれからは原作と言います。

現在、JavaScript移植のWWA Wingを原作っぽく再現するようにしています。原作では、メッセージが横16文字分収まりますが、句読点をその横にはみ出すこともできます。

f:id:aokashi:20170810182826p:plain

原作では、上の図のように動いています。最終行に句読点がメッセージとメッセージ枠の隙間に付いていることが確認できます。

WWA Wing ならではの問題

WWA Wingは原作と違って、メッセージがHTML上でテキストがそのまま表示されます。わかりにくいと思いますが、この実装により、メッセージの内容をそのままテキストとして選択やコピーができます。試しにテキストのカーソルを載せると、文字が選択できる状態になっていることが下の図で確認できます(参考)。

f:id:aokashi:20170812140212p:plain

原作では、文字列を1文字ずつ描画して、折り返す必要になったときには描画位置を決めている変数を操作します。わかりやすく説明すると、xpyp が存在していて、それぞれ文字を描画する画面のX座標、Y座標を表しています。折り返す場合は xp を0にして、 yp に1行分足す仕組みになっています。ただし、次の文字が句読点だった場合はその操作をスキップする仕組みになっています*3

ただし、WWA Wingでは、HTMLのテキストが表示される都合上、Javaアプレットでは一切関わらないであろうHTMLの親子関係が存在しています。メッセージ枠の要素にメッセージが入るため、文字の位置はここで!とかのように細かく調整することができません*4

そこで、原作の仕様を似た形として、折り返す場合は br 要素を挿入して改行する方法もありますが、下の図のようにメッセージ全体をコピーして、貼り付けた結果に改行が含まれてしまいます。ページ内検索や、貼り付けたテキストへの検索を行う方もいますから、なるべく必要以上に改行されたくないのです。

f:id:aokashi:20170812142237p:plain

解決策と実装方法

このような問題を解決するために改行の代わりに実際に表示する1行分それぞれspan 要素として設ける形にしました。

  • 実際に表示する1行分は、折り返した場合に表示される1行分です。

はみ出た句読点を置くために、1行の領域に複数の span 要素が入らないために、その要素の幅はメッセージボックスいっぱいに指定しています(width プロパティが 100%)。

しかし、インライン要素は幅が指定できないため、その span 要素にはCSSdisplay プロパティには inline-block を指定しています*5

f:id:aokashi:20170812195737p:plain

説明した通りに、要素の仕組みを上の図で表す事ができます。赤い枠が span 要素になります。ここでは6つあります。

こんな感じで、今回制作したプログラムはこのように利用しています。気になる方は、プログラムのHTMLファイルを開いてみて、開発者ツールで要素を確かめてみてください。

このような実装はCSSには存在しない

残念なことに、今回のプログラムのような実装はCSSでは用意されていません。まあ、用意したらここまで苦労する必要はないと思うんですがねー…。

似たものとして font-feature-settings プロパティがありますが、句読点のみならず、カギ括弧も対象だったり、そもそも末尾に置かなくても詰めてしまい本来の目的と違っていたりするので、使おうとは思いませんでした。

最後に

とりあえず「できた」のですが、今後の課題とかは現在思いつきません。もしあるとしましたら、横幅の文字数を指定しなくてもいいようにしたいこと、計算量を減らすためにアルゴリズムを最適化すること、でしょうか。

ちなみに、原作っぽく再現したWWA Wingはもう少しユーザーに体験できるようになります。

  • 8月24日追記:ベータ版が公開されました、お確かめください。→WWA Wing

*1:折り返す直前の文字の、次の文字で、文章全体の一番後ろではありません。

*2:ここで指す句読点は「。」と「、」の2つです

*3:ただしメッセージには枠や余白も存在しますので、必ずこの方法で描画するとは限りません

*4:しかし、その分文字を置くだけというメリットは存在しますが…

*5:幅が 100% なら単純に div 要素使ったほうが楽かもしれないですが、ブロック要素になると先程あげた br 要素の挿入と同様に貼り付けたテキストに改行が生じます。

RPGツクールMVに列車を走らせるぞ

今までWWAの素材向けに列車の素材を制作していました。しかし、マルチプラットフォームRPGツクールMVが発表されました。素材規格は1マス48×48と、32×32や40×40よりも更に広い解像度になります。

もちろん今まで制作した素材を使いまわすのは違和感があるし、色数を気にしないことからいっその事使いたい色数で制作できることから模索しながら制作しました。

  • 説明に利用されている画像は素材公開前に制作したものと、後に制作したものが混合しています。
  • ここでは、列車の正面から見たイメージを前面、側面から見たイメージを側面と言います。
  • どんな感じで作ったか、長めで説明します。

以下は目次です。

とりあえず作る

まずは前面の横幅を48pxにした形で制作しました。結構小さいようですが、RPGツクールMVの自動車の素材もかなり小さく作っているので、これでもいいかと思って制作しました。

f:id:aokashi:20170717195630p:plain

ここで映っているのは205系です。最近までは列車の素材を作るときに205系をお手本にすることが多かったです。でも、上の図では何か違和感があります。高さの割に奥行きが少ないように見えます。

見る角度を決める

まず列車を見る角度を定める必要がありました。そのため俯角による高さと幅の関係を決めました*1。ある角度から見下ろした際、実際の幅や高さはどれほど縮小するのか、計算します。

俯角は45°に決まりました。例えば、前面の高さが1とした場合、45°から見下ろすと√2で割る形になるため、0.70710…となります。45°ということは0°と90°のちょうど中間ということで、天面の奥行きも同じことがいえます。

f:id:aokashi:20170717195649p:plain

上の図のように縦に潰れたような感じですが、まあ良くなりました。また、この時は前面の幅を96pxにした形で試作もしていました。

サイズの選定

48pxは小さすぎる、96pxは大きすぎると思い、ここで最適なサイズを探しました。

元になる高さと幅の比率も決める必要がありました。最適な比率を求めて、Wikipediaの車両限界*2や手元にあった東武鉄道の電車見取り図のクリアファイル、各鉄道会社の車両紹介などから、最適な比率を求めました。ここで、幅2800mm, 高さ3600mm(床下分を除くと2700mm)鉄道車両をベースにしました。

ここから、様々な幅で簡易な形で列車の素材を制作、調査しました。

  • 48px
  • 60px
  • 64px … 一時期はRPGツクールVX(ace)で2マス幅になる64pxを検討していた
  • 68px
  • 70px
  • 72px … 48pxと96pxの中間のサイズ
  • 78px … 新幹線を96pxのサイズにした場合、在来線になるとこのサイズになる
  • 96px

更に条件を縛る

制作や調査をしましたが、それでも最適なサイズが見つからないので、ここから条件を加えました。

  • ドアのサイズはプレイヤーに収まる程度のサイズにする。
    • 程度なので、収まらなくても良い。
  • マス単位でピッタリ収まるようにする。

まず上記の条件で幅48pxは除外になります。やっぱり、48pxは小さすぎましたね。

それでも見つからない…と側面で縦のポジションを確認しました。下の図のように、この時は線路を中央に置くように基準を決めていましたが、この場合になるとドアがマスの境目を跨ぐ形になってしまい、大変使いづらいことが分かりました。でもなぜ線路を中央に置きたかったのか、これはなかなか説明しづらいのですが、縦と横の線路でポジションを揃えることで、カーブの素材を作りやすくしたかったからです。なお、線路を中央に置いた場合、幅60pxが上のマスでピッタリ収まります。

f:id:aokashi:20170716213832p:plain

ここで、側面のポジションを、ドアがマスの下辺と接するように基準を変えました。最終的には、横幅70pxに決まりました。理由は色々ありますが…

  • 上記の要件を満たしている(ただし側面で2マスピッタリ納める場合は、床下分を除く必要がある)
    • 前面はドアが見えず、側面より使う場面が少ないと思うので、前面の場合は横幅2マスピッタリにはなりません。
  • 定めた幅2800mmは70の倍数なので1px辺り40mmちょうどと、この後実際のサイズ[mm]から作る際[px]には計算しやすい
    • つまり1000[mm]の横幅にしたければ40[mm]を割るだけで25[px]になる!

f:id:aokashi:20170716213847p:plain

やった!いい感じに乗れる!(上図参照、キャラクターが僅かにドアと接しているのはRPGツクールMVの仕様です)

f:id:aokashi:20170716215600p:plain

先程Twitterでアップロードした検証用ファイルは最終的に上の図になりました。横幅70pxの分にドアの分が塗っていませんが許してください。幅96pxになるとほぼリアルスケールになりますが、このサイズになると制作するのも利用するにも難しいですね…。

制作に取り掛かる

WWAで制作した時は他サイトの素材を混合する際に変色しないように決まった色数で制限をしていましたが、RPGツクールMVの場合は特に制限を受けることもないので使いやすい色数で制作しました。ただし、色を決めるのが下手であることと、8や16の倍数でRGB値を求めたいことから、やっぱり256色で制作しました。下の図の通り、制作に利用しているパレットはWWAで制作したものをベースにしています。

f:id:aokashi:20170716221203p:plain

制作した素材がこちらになります。前面の素材が無いですが許してくだ(略)。

パンタグラフの制作は大変でした。側面から見ると大きいように見えるけど、正面から見ると予想より結構狭かったです。

ところで…RPGツクールMVのSeason Passには蒸気機関車の素材があります。この場合は私の2倍以上のサイズになっているようですね。床の上に乗車することはありえない、いや海外だったらあるかもしれないですが、このままのサイズで制作するつもりです。

ちなみにスクリーンショット以外の画像は好きに使ってください。あ、利用する時はAokashi Homeから利用したよ、みたいな報告があれば喜びます。この後ちゃんと素材コンテンツに追加するつもりです。

f:id:aokashi:20170717211423p:plain

最後に…国鉄時代の車両によくある、前面右側面の金具は何でしょうかね。タブレット閉塞にタブレットを掛けておくもの…じゃ無いですよね。

お世話になったサイト

TeXやnpmがだいぶ分かってきたお話

最近までは、レポートを制作する際にMicrosoft Wordとかのワープロソフトウェアを利用していました。というのも、去年か一昨年辺りにTeXを利用しようとして途中で挫折したことがあったためです。

最近までは周りがTeXやnpm、herokuとかを使いこなしている中、私だけ*1なかなか理解できず追いついていけない状態でしたが、だいぶ分かってきたので記事に残しておきます。なお、TeXとnpmの間で関係とかは無いのでそれぞれ別に説明します。ちなみに、下記の説明は間違いが残っているかもしれません。

TeX

TeXは簡単に言うと、記号と文字列を組み合わせて紙の文章に印刷できるPDFファイル*2を生成するプログラムです。TeXと一口に言ってますが、実際は派生*3が数多く存在していて、現在は機能的にもその派生を利用することが多いです。HTMLがWebサイトを作るためにテキストで書いているならば、TeXは文章を作るためにテキストで書いている事になります。多分。

TeXの環境構築で挫折した

そんなTeXですが、最近までは環境構築で挫折していました。環境構築をし始めた時はTeX Live(詳細は後述)をインストールしていましたが、そのままインストールして容量を大きく取っていたことで後に手放してしまいました。

その後、Linuxを使い始めて、TeXのエディタも使い始めたのですが、実行の際にエラーが表示されてうまくいきませんでした。この後、検索で資料を得るなりした所、自己解決しました。

  • 前述の通り、TeXのプログラムは派生が数多く存在していること。そしてその上にプラグインを活用して、出力する文章のバラエティ(?)を広げている。
    • この2つを導入するには数多くのプログラムとプラグインが必要なので、ここでTeX Liveでインストールすることで手間が省ける。
  • また、TeXのエディタはTeXのプログラムと別であること
    • エディタはどうしようかとそれぞれインストールして試しましたが、TeXWorksで落ち着きました。
    • インストール後はTeX Wikiの記事に従ってタイプセットを追加しました。
  • TeX Liveは確かに容量を大きく取るが、インストーラーの際は「スキーム」を選ぶことで容量は削減できる

TeXはHTMLやmarkdownのような手軽さには及びませんが、学べる環境が構築できただけでも大きな進歩だと思いました。

npm

npmはパッケージマネージャです。パッケージマネージャについてはLinuxを学ぶ際に理解しているものの、今までの感覚で試すとエラーばかり出力されてしまい、困っていました。

Webでは npm install (パッケージ名) とかの箇所がよく目立っていて、「(パッケージ名)をパソコンにインストール…ただの実行ファイルをインストールして何に活用するんだ?」と思っていました。

Angularを学習し始める時からnpmについてだいぶわかってきました。Angularを入れる際も、npm install angular@1.6.4*4 と記載されていて、疑問を持ちながらnpmでインストールした所、ちょっとした便利さを感じました。

  • npmはJavaScriptCSSのファイルを取り扱う際でも、バージョンアップのためにWebからダウンロードする手間が省ける。
    • 「パソコンにインストールする」のではなく、「プロジェクトにインストールする」感覚で扱う。
  • ただし、コマンドラインから実行するプログラムも存在する。パソコンにインストールする感覚で扱いたい場合はインストールの際に -g を添える。

以前は bower を、最近は yarn を扱うことが多いみたいですが、まだ初心者なので npm で慣らすことにします。

その他

現在、Dockerやherokuとかのインフラ系の知識が疎い*5ので、色々構築して学んで見ましょうかね。

*1:もしくは周りの一部かもしれない…

*2:TeX初期の頃はDVIファイルでしたっけ?

*3:LaTeX, pLaTeX, …

*4:バージョンは2017年6月26日現在

*5:特にDockerは大量の仮想マシンが同時稼働することで、リソースの使用量に疑っている

コースターが光る

1.コースターが届いた

2017年1月6日頃、IntelがKaby LakeのデスクトップCPUを発表しました。合わせて、PCパーツ各社がマザーボードを発表しました。

ここで、ASUSマザーボードとともに、R.O.G 光るコースターが絶対にもらえるキャンペーンを行っていました。対象商品を購入すると光るコースターが絶対にもらえる*1とのことです。

届くまで

f:id:aokashi:20170611192310j:plain

1月末の申し込みから、概ね3ヶ月かかりました🚚。なお、3月頃には、もう届かないと諦めていました。ちなみにクリックポストで包装されていました。

2.コースターの原理

このコースターは何か物を乗せると、そのコースターにあるライトが光ります。ただし、激しい光り方をするのではなく、おとなしく、控えめに光ります。

そして構造はとても簡素でした。底面にマイクロスイッチが付いていて、物を乗せるとその物の重みでスイッチが床に着き、あわせて光る仕組みです。おもりのサンプルとして1.63g(2017年6月11日現在) MX Anywhere 2 を利用しましたが、押さえることで反応した程度です。また底面には蓋が付いていて、外すとボタン電池が入っています。

コースター表面にあるR.O.Gのイラストは紙として挟まれています。工夫すれば別のイラストに差し替えることができます。

ライトを光らせたままにすると、鮮やかに色が変わります。赤→緑→青→(紫)→黄色→青→(紫)→ピンク→(オレンジ)→赤、・・・の順番で色が変わります。紫やオレンジはほんの少ししか光りませんでした。

3.最後に

  • 3ヶ月かかったからには、コースターはもうちょっと厚みを増やすとかして(見た目を)凝ってほしかったなあと思います。
  • このブログ記事は5月21日の 第七回 帰ってきたhojiroLT で発表した内容を修正した上で公開しています。
  • コースターがなくても、ROGマザーボードは所有欲を満たしてくれる製品です。予算に余裕があれば是非購入しよう。

*1:いつもらえるかは言ってない

WWA FanSquareを設立したお話

WWA Wing Team(http://wwawing.com) から WWA FanSquare(http://www.wwafansq.com) を独立、設立しました。

続きを読む

Aokashi Roomは はてなブログのドメインになりました

以下の記事でお伝えしたとおり、Aokashi Roomは はてなブログドメインに変わりました。

aokashi.hatenablog.jp

続きを読む

これからMacBook Proを使う機会が減っていくのでThinkPad YogaにLinuxを入れた話

一昨年購入したMacBook Proなんですが、最近家族(特に兄)に使われるようになったため、Linuxの勉強がてらThinkPad YogaにLinuxを導入しました。

続きを読む