今日は本当に色々と進捗があった。まずスマホのアビリティ表示で、縦書きにチャレンジしていた部分が解決した。一時はテーブル形式を自前で作ろうかとも覚悟したのだが、どうも縦書き(writing-mode: vertical-rl)の指定を、<TD>にしていたのがまずかったようだ。<td>タグはブロック要素で、かつテーブルの要素という事もあって、特殊な動きをしているようだ。また、TDに直接指定するという事は、文字の向きというより、セルの向きに影響するという感じだった。その証拠に、<div>でテーブルの外に作ったブロック内では、意図通りの縦書き表示が行えていた。
そのあたりで、ブロック要素とインライン要素という概念があった事を思い出す。(今はその区分は使われなくなったようだが)
TDはブロック要素であり、かつテーブルの要素なのでうまくいかないのであれば、TDの中に更に要素を入れ込んで、その要素に対して縦書きを指定してはどうなのか？と閃いた。実際には<span>を入れてみることにした。
CSSではTD用のスタイルのほかに、spanに対して使うスタイルもクラス定義し、それぞれにわけて指定するようにしてみた。結果…。
できた！
後は細かい調整だが、PCとスマホでは表示のされ方が異なり、幅の調整も昨日知ったViewportWidthだけではうまくできなかった。そこでCSSの@mediaを使い、幅が480以下の場合にのみ、縦書きのCSSを使うように記述してみた。そして、これも思うとおりに実現できた。
これで懸案事項は全て解決した(と思っていた)ので、モジュールわけやデバッグ情報の削除などに取り掛かった。
最初に固定ページを作った時は、ショートコードなどはfunctions.phpに入れろとなっていたので、それに従っていたが、複数の固定ページを作っている場合、functions.phpより、page-XXX.phpの方が適切ではないだろうかと思い、アビ画面、キャラ画面はそのようにしてある。しかし、検索画面のショートコードはfunctions.php(子テーマ用)に入れっぱなしだったので、一斉にpage-XXX.phpに移動してみた。
ら、動かなくなった。どうやらAjaxで呼び出す関数は、page-XXX.phpにあっても参照されないご様子。要するに、page-XXX.phpは画面表示までに使うものは入っていても良くて、画面表示された後にはpage-XXX.phpは一切参照されなくなる。以前表示時と、Ajax時でプロセスが異なりデータが共有できなかったという話をしているが、この辺りがまさにそういう話なのだろう。
functions.phpはページ表示後も繰り返し参照される可能性があり、プロセスが常駐していたりするのかもしれない。page-XXX.phpは画面表示時のみに作られる、インスタンスのようなものなのだろう。
という事で、画面表示までで役目を終えるショートコードはpage-XXX.phpに、Ajaxなどで呼び出される関数はfunctions.phpにというモジュール分けを実施した。JavaScriptは現状固定ページのソース上に直持ちしているが、これも本来なら別モジュール化して、表示時に読み込むような対応をすべき。だが、開発のし易さを今は優先して、しばらく現状のままにする。
検索画面からデバッグ情報を除去していくうちに、そういえば機能の説明が一切存在していない事に気がついた。いわゆる「マニュアル」が無いwという事で、検索画面(プルダウン)の上に、説明文を書き入れた。そうすると当然邪魔になるので、トグルで開閉できるようにした。さらに、開いた中も長くなりそうなので開閉できるようにしてみた。トグルボタンのデザインも、いつか「＋」みたいなのに変えたいが、今はいいだろう。
機能の説明を書いていたら、プルダウンが２つあるのに、どっちがどっちかわからなくなりそうだったので、ラベルを置いてみた。普通にラベルを置くと、これまたPCとスマホで綺麗に表示できそうになかったので、display: flexをうまいこと活用して自動的にデザインが切り替わるようにしてみた。こっちは@mediaとかは使わず、単純に実現できた。
ただ、ブラウザ幅広くして使ってる自分はいいけど、狭くして使ってる人の事考えてなかったな…。それも考慮しないとアカンか…。ブラウザ対応の１項目として考えよう。
そう、IE11で動かしてみたら、ちょいちょいおかしかったので、IEやEdge、Safari、FireFoxあたりのブラウザもちゃんと対応しないとならないだろう。IEやFireFoxは入手可能だからなんとかなるにしても、EdgeやSafariはどうしよう。SafariはWindows版はあるだろうけど、MacやiPhoneなどと挙動含め全部同じなのだろうか？ここら辺は、テストしてくれる人を募集していくしかないかな…。
そんなこんなで、とりあえずリリースに向けての画面の開発や、モジュールなどの整理は完了した。次は公開テスト用のサイトを構築してリリースするだけだ。当初はドメインもキチンと取得してリリースしようと思っていたのだが、テスト版とリリース版ではドメイン分けた方がいいような気もしているので、まず無料版のドメインでテスト公開し、並行してドメイン取得して正式リリースの準備をしようと思う。どのくらいの負荷がかかるのか、そもそも使って貰わないとそのあたりもわからないのだけれどｗ
全然ニーズが無いとは思わないけど、そんなに頻繁に使うものでも無いのだよな…。英語版までできたらまた違うのだろうけれど。ま、まずは公開に向けて着々と準備をしていこう。
今日は良くがんばったｗ