先月の8月27日、私のSpeaker Deckのスライドを、一部を除き公開を取りやめました。
Speaker Deckにはライトニングトーク(LT)で発表したスライドが含まれていて、発表後では内容を調整して公開していました。しかし、自分自身無理してスライドの制作、発表を行っていたため、公に出せるようなものではないと思い、公開を取りやめることになりました。決して、高頻度でLTのスライド制作と発表を行うことに悪いことはありません。
今後、公開を取りやめたスライドの公開を再開する予定はありません。それでも必要でしたら、私までご連絡ください。また、この後も現在公開しているコンテンツの公開を終了する場合もあります。
スライドの公開の取りやめでご迷惑をおかけしたこと、そして報告が遅れたこと、お詫び申し上げます。申し訳ございませんでした。
前に、GitHubのGistにこんなものを投稿しました。
句読点がメッセージの末尾にきた場合、折り返さずに詰めるプログラム · GitHub
これは、文章を表示する際に、横末尾*1の文字の次が句読点*2だった場合に、その句読点を折り返さずに末尾に持っていくプログラムです。
実際に聞いてわからないと思うので、動いている様子を見てみましょう。
句読点の「、」が3行目にはみ出していることが確認できますでしょうか。
以下は、Gistのソースコードです。長いので動く仕組みとかどうでもいい方はそのままスクロールしてください。
句読点がメッセージの末尾にきた場合、折り返さずに詰めるプログラム
ただし、このプログラムをうまく動かすには幾つか条件があります。
letter-spacing は利用しないこと(利用すると半角文字2つ分の幅が全角文字1つ分の幅と合わなくなるため)多分ここが本編かもしれません。
役に立ちそうだけど、実際に使われている場面は想像しにくいと思います。
これは、JavaアプレットのWWAのメッセージの表示方法を再現したかったからです。なお、Javaアプレットで実装されているWWAのことをこれからは原作と言います。
現在、JavaScript移植のWWA Wingを原作っぽく再現するようにしています。原作では、メッセージが横16文字分収まりますが、句読点をその横にはみ出すこともできます。
原作では、上の図のように動いています。最終行に句読点がメッセージとメッセージ枠の隙間に付いていることが確認できます。
WWA Wingは原作と違って、メッセージがHTML上でテキストがそのまま表示されます。わかりにくいと思いますが、この実装により、メッセージの内容をそのままテキストとして選択やコピーができます。試しにテキストのカーソルを載せると、文字が選択できる状態になっていることが下の図で確認できます(参考)。
原作では、文字列を1文字ずつ描画して、折り返す必要になったときには描画位置を決めている変数を操作します。わかりやすく説明すると、xp と yp が存在していて、それぞれ文字を描画する画面のX座標、Y座標を表しています。折り返す場合は xp を0にして、 yp に1行分足す仕組みになっています。ただし、次の文字が句読点だった場合はその操作をスキップする仕組みになっています*3。
ただし、WWA Wingでは、HTMLのテキストが表示される都合上、Javaアプレットでは一切関わらないであろうHTMLの親子関係が存在しています。メッセージ枠の要素にメッセージが入るため、文字の位置はここで！とかのように細かく調整することができません*4。
そこで、原作の仕様を似た形として、折り返す場合は br 要素を挿入して改行する方法もありますが、下の図のようにメッセージ全体をコピーして、貼り付けた結果に改行が含まれてしまいます。ページ内検索や、貼り付けたテキストへの検索を行う方もいますから、なるべく必要以上に改行されたくないのです。
このような問題を解決するために改行の代わりに実際に表示する1行分それぞれを span 要素として設ける形にしました。
はみ出た句読点を置くために、1行の領域に複数の span 要素が入らないために、その要素の幅はメッセージボックスいっぱいに指定しています(width プロパティが 100%)。
しかし、インライン要素は幅が指定できないため、その span 要素にはCSSの display プロパティには inline-block を指定しています*5。
説明した通りに、要素の仕組みを上の図で表す事ができます。赤い枠が span 要素になります。ここでは6つあります。
こんな感じで、今回制作したプログラムはこのように利用しています。気になる方は、プログラムのHTMLファイルを開いてみて、開発者ツールで要素を確かめてみてください。
残念なことに、今回のプログラムのような実装はCSSでは用意されていません。まあ、用意したらここまで苦労する必要はないと思うんですがねー...。
似たものとして font-feature-settings プロパティがありますが、句読点のみならず、カギ括弧も対象だったり、そもそも末尾に置かなくても詰めてしまい本来の目的と違っていたりするので、使おうとは思いませんでした。
とりあえず「できた」のですが、今後の課題とかは現在思いつきません。もしあるとしましたら、横幅の文字数を指定しなくてもいいようにしたいこと、計算量を減らすためにアルゴリズムを最適化すること、でしょうか。
ちなみに、原作っぽく再現したWWA Wingはもう少しユーザーに体験できるようになります。
今までWWAの素材向けに列車の素材を制作していました。しかし、マルチプラットフォームのRPGツクールMVが発表されました。素材規格は1マス48×48と、32×32や40×40よりも更に広い解像度になります。
もちろん今まで制作した素材を使いまわすのは違和感があるし、色数を気にしないことからいっその事使いたい色数で制作できることから模索しながら制作しました。
以下は目次です。
まずは前面の横幅を48pxにした形で制作しました。結構小さいようですが、RPGツクールMVの自動車の素材もかなり小さく作っているので、これでもいいかと思って制作しました。
ここで映っているのは205系です。最近までは列車の素材を作るときに205系をお手本にすることが多かったです。でも、上の図では何か違和感があります。高さの割に奥行きが少ないように見えます。
まず列車を見る角度を定める必要がありました。そのため俯角による高さと幅の関係を決めました*1。ある角度から見下ろした際、実際の幅や高さはどれほど縮小するのか、計算します。
俯角は45°に決まりました。例えば、前面の高さが1とした場合、45°から見下ろすと√2で割る形になるため、0.70710...となります。45°ということは0°と90°のちょうど中間ということで、天面の奥行きも同じことがいえます。
上の図のように縦に潰れたような感じですが、まあ良くなりました。また、この時は前面の幅を96pxにした形で試作もしていました。
48pxは小さすぎる、96pxは大きすぎると思い、ここで最適なサイズを探しました。
元になる高さと幅の比率も決める必要がありました。最適な比率を求めて、Wikipediaの車両限界*2や手元にあった東武鉄道の電車見取り図のクリアファイル、各鉄道会社の車両紹介などから、最適な比率を求めました。ここで、幅2800mm, 高さ3600mm(床下分を除くと2700mm)の鉄道車両をベースにしました。
ここから、様々な幅で簡易な形で列車の素材を制作、調査しました。
月本国( https://t.co/N0AzXyKtOf )さんのRPG開発関連総合ページより、俯角45°で見下ろした際、RPGツクールMVだとどのサイズの列車が最適か色々計算してみた。上から幅48, 64, 96ピクセルで、灰色の穴はドアのサイズ。 pic.twitter.com/saW4nTkUGh
— Aokashi (あおかし) (@aokashi) 2017年7月3日
制作や調査をしましたが、それでも最適なサイズが見つからないので、ここから条件を加えました。
まず上記の条件で幅48pxは除外になります。やっぱり、48pxは小さすぎましたね。
それでも見つからない...と側面で縦のポジションを確認しました。下の図のように、この時は線路を中央に置くように基準を決めていましたが、この場合になるとドアがマスの境目を跨ぐ形になってしまい、大変使いづらいことが分かりました。でもなぜ線路を中央に置きたかったのか、これはなかなか説明しづらいのですが、縦と横の線路でポジションを揃えることで、カーブの素材を作りやすくしたかったからです。なお、線路を中央に置いた場合、幅60pxが上のマスでピッタリ収まります。
ここで、側面のポジションを、ドアがマスの下辺と接するように基準を変えました。最終的には、横幅70pxに決まりました。理由は色々ありますが...
やった！いい感じに乗れる！(上図参照、キャラクターが僅かにドアと接しているのはRPGツクールMVの仕様です)
先程Twitterでアップロードした検証用ファイルは最終的に上の図になりました。横幅70pxの分にドアの分が塗っていませんが許してください。幅96pxになるとほぼリアルスケールになりますが、このサイズになると制作するのも利用するにも難しいですね...。
WWAで制作した時は他サイトの素材を混合する際に変色しないように決まった色数で制限をしていましたが、RPGツクールMVの場合は特に制限を受けることもないので使いやすい色数で制作しました。ただし、色を決めるのが下手であることと、8や16の倍数でRGB値を求めたいことから、やっぱり256色で制作しました。下の図の通り、制作に利用しているパレットはWWAで制作したものをベースにしています。
制作した素材がこちらになります。前面の素材が無いですが許してくだ（略）。
RPGツクールMVで使える列車素材を作ろう、ということで制作してみました。ホーム上に置く場合は下のマスは削除すれば良いので2マスほぼピッタリ収まります。
— Aokashi (あおかし) (@aokashi) 2017年7月15日
車両はほぼ架空のつもりです。 pic.twitter.com/Qom08tB7rd
パンタグラフの制作は大変でした。側面から見ると大きいように見えるけど、正面から見ると予想より結構狭かったです。
ところで...RPGツクールMVのSeason Passには蒸気機関車の素材があります。この場合は私の2倍以上のサイズになっているようですね。床の上に乗車することはありえない、いや海外だったらあるかもしれないですが、このままのサイズで制作するつもりです。
ちなみにスクリーンショット以外の画像は好きに使ってください。あ、利用する時はAokashi Homeから利用したよ、みたいな報告があれば喜びます。この後ちゃんと素材コンテンツに追加するつもりです。
最後に...国鉄時代の車両によくある、前面右側面の金具は何でしょうかね。タブレット閉塞にタブレットを掛けておくもの...じゃ無いですよね。
公開しました。この記事を公開したときよりも凝って作ってます。
最近までは、レポートを制作する際にMicrosoft Wordとかのワープロソフトウェアを利用していました。というのも、去年か一昨年辺りにTeXを利用しようとして途中で挫折したことがあったためです。
最近までは周りがTeXやnpm、herokuとかを使いこなしている中、私だけ*1なかなか理解できず追いついていけない状態でしたが、だいぶ分かってきたので記事に残しておきます。なお、TeXとnpmの間で関係とかは無いのでそれぞれ別に説明します。ちなみに、下記の説明は間違いが残っているかもしれません。
TeXは簡単に言うと、記号と文字列を組み合わせて紙の文章に印刷できるPDFファイル*2を生成するプログラムです。TeXと一口に言ってますが、実際は派生*3が数多く存在していて、現在は機能的にもその派生を利用することが多いです。HTMLがWebサイトを作るためにテキストで書いているならば、TeXは文章を作るためにテキストで書いている事になります。多分。
そんなTeXですが、最近までは環境構築で挫折していました。環境構築をし始めた時はTeX Live(詳細は後述)をインストールしていましたが、そのままインストールして容量を大きく取っていたことで後に手放してしまいました。
その後、Linuxを使い始めて、TeXのエディタも使い始めたのですが、実行の際にエラーが表示されてうまくいきませんでした。この後、検索で資料を得るなりした所、自己解決しました。
TeXはHTMLやmarkdownのような手軽さには及びませんが、学べる環境が構築できただけでも大きな進歩だと思いました。
npmはパッケージマネージャです。パッケージマネージャについてはLinuxを学ぶ際に理解しているものの、今までの感覚で試すとエラーばかり出力されてしまい、困っていました。
Webでは npm install (パッケージ名) とかの箇所がよく目立っていて、「(パッケージ名)をパソコンにインストール...ただの実行ファイルをインストールして何に活用するんだ？」と思っていました。
Angularを学習し始める時からnpmについてだいぶわかってきました。Angularを入れる際も、npm install angular@1.6.4*4 と記載されていて、疑問を持ちながらnpmでインストールした所、ちょっとした便利さを感じました。
-g を添える。以前は bower を、最近は yarn を扱うことが多いみたいですが、まだ初心者なので npm で慣らすことにします。
現在、Dockerやherokuとかのインフラ系の知識が疎い*5ので、色々構築して学んで見ましょうかね。
2017年1月6日頃、IntelがKaby LakeのデスクトップCPUを発表しました。合わせて、PCパーツ各社がマザーボードを発表しました。
ここで、ASUSはマザーボードとともに、R.O.G 光るコースターが絶対にもらえるキャンペーンを行っていました。対象商品を購入すると光るコースターが絶対にもらえる*1とのことです。
1月末の申し込みから、概ね3ヶ月かかりました🚚。なお、3月頃には、もう届かないと諦めていました。ちなみにクリックポストで包装されていました。
このコースターは何か物を乗せると、そのコースターにあるライトが光ります。ただし、激しい光り方をするのではなく、おとなしく、控えめに光ります。
そして構造はとても簡素でした。底面にマイクロスイッチが付いていて、物を乗せるとその物の重みでスイッチが床に着き、あわせて光る仕組みです。おもりのサンプルとして1.63g(2017年6月11日現在) MX Anywhere 2 を利用しましたが、押さえることで反応した程度です。また底面には蓋が付いていて、外すとボタン電池が入っています。
コースター表面にあるR.O.Gのイラストは紙として挟まれています。工夫すれば別のイラストに差し替えることができます。
ROG の光るコースターは、光り続けると色が変わります。 pic.twitter.com/2cAUwzR0hB
— Aokashi(あおかし) (@aokashi) 2017年6月11日
ライトを光らせたままにすると、鮮やかに色が変わります。赤→緑→青→(紫)→黄色→青→(紫)→ピンク→(オレンジ)→赤、・・・の順番で色が変わります。紫やオレンジはほんの少ししか光りませんでした。
*1:いつもらえるかは言ってない
WWA Wing Team(http://wwawing.com) から WWA FanSquare(http://www.wwafansq.com) を独立、設立しました。
続きを読む