今更モバイル対応

 こんばんは、と書いた瞬間に「鳥痔郎です」と繋がる今日この頃ですが、あー、3月も終わりですね。3期も弱酸性も終わってしまい、毎週の糧がすっかり途絶えてしまう事に気付いた今日この頃ですが、皆々様は元気にお過ごし下さい。(ワンパターンを避けようとして意味不明になるパターン)

 いやまぁ実のところは、先月頭からぼちぼちこのwordpressの手直し(いわゆるところのモバイルフレンドリーなレイアウト化)をしておりまして。それも2月中にはキリを付けてエントリを上げる予定だったのが最後の最後の日にgoogleにエラーレポートを吐かれて台無し感に悶えたり、その後もまたfirefoxが非httpsにうるさくなったりと、事あるごとに足を引っ張り回されて気付けば3末デスネー。
 まぁ詰まるところは「twenty seventeen(標準テンプレート)なんて使うもんじゃないよ」、というだけの話が以下ダラダラと続きます。

 いやね、ほぼただの愚痴なんですけども、「こういう無駄なシステム構築は繰り返されてはいけない」という戒めを、少なくとも後世の自分のために。書き改める事での記憶定着を目論むいわゆるところの記憶アンカーとして一点。しかしいずれは消え行く記憶の外部ストレージとしての役割としても一点。

 長らくアップデートを避けてきた理由に、
 ・テンプレートの作り直し(探し直し)
 ・下手にソース直修正でカスタマイズしてるものだから更新が困難
 前者の手間はもちろんのこと、後者の問題が大きくのし掛かっておりまして。
 それが故に今回の(当初の)コンセプトは、「コードに手を入れない」、極力プラグインで済ます、そしてもう見た目とかに拘るでもないから「デフォルトテーマ全開で行く」ぜと。
 、、、そう思っていた時代が私にもありました。(当然すぎるオチ)

・wordpressのアップデート
 ダッシュボードUI経由でやりましたが、事前にプラグインを無効化し忘れて無事死亡。
(まぁ以下一連の作業に当たっては、非公開テストサイトを別個作って行っているので実害には至っていませんが。こういう所は普段の仕事柄ゆえ)
 アップデータなんだから、自動でプラグインを無効化してから再有効化するとか、使用中プラグイン・テンプレートのコードをスキャンして互換性チェックするとか、それくらい無いものなんかなぁ。まぁ最新の事は分かりませんが、多少古いとはいえ3.9.1にはなってたからなぁ。何の為に世代重ねてるんだよとは思ってしまうところ(愚痴開始)

・直コードをプラグイン化
 自動更新を絶対に出来なかった理由の一つが「autop問題」。
 標準では改行を自動的にPタグ化するようになっているけれど、旧来のデータを抱えている身としては困るのでコアのファイルを書き換えてオフにしていた。同様にPタグ化を好ましく思わない人は一定数居る訳で、無事プラグイン化されていたものを導入。
 >PS Disable Auto Formatting

 他にも、テーマに直でぶっ込んでいたGoogle Analyticsのタグを、
 >Google Analytics

 編集毎にIDが変わるのが煩わしかったので、(これは前から使ってたかな)
 無効化するだけならwp-configでも良かった気がするけど一応、
 >Revision Control

 それ以外の重要性の低いカスタマイズは徐々に切り捨てていたのでこんなもん。
 因みに「custom query string」はdeprecatedで使えなくなりました。function.phpでちまちま弄るしかない。

・モダンなテンプレート?
 シンプルなテーマでレスポンシブ(PC・スマホ・タブレット可変対応)且つ「近年メンテナンスもされていそうなもの」、となるとなかなか見付からない。
 そもそも日記サイトなど絶滅危惧種を通り越した最早シーラカンス状態なので、昨今は小洒落た情報サイト向けのUIデザインばっかりが並んでいるのだけれど、自分はそういう物は求めていない。トップには見出し一覧、詳しくは「続きを見る」で詳細ページに遷移するという行ったり来たりのUIは、確かに個々の情報を取捨選択する情報発信サイトとしては適切だろうけれど、こちとら「個人のアーカイブ」目的ですからね。ダラーッとホイールスクロール一つで眺め回せるのが順当というか。むしろ見出しだけ並べたらそもそもこんなもん誰もいちいち続きを見ようとしませんがなと(苦笑)。少なくとも自分はお断りなので断りまする。「誰のため? 俺のため」ですよ。いや本当にこれは真理。
(強いて言うなれば、「続きを見る」が遷移じゃなくてjs開閉パターンならば。+極個人用途を優先してデフォルト全開示状態に出来るオプションは欲しい。=実装面倒くさいのでそれは保留。)

 結局しばらくうろうろしたものの、「決して良いとは思わないが、何処ぞの馬の骨よりはまだ公式」という心理で、最新の標準twentyseventeen。しかしこれが悪夢の始まりなのでありました。(年号=要はわざわざ毎年異なるデザインをでっち上げてる訳で、その洗練の無さに気を配るべきだった)

・外観カスタマイズ
 「デフォルトで行くぜ」とか息巻いていましたけど、流石にあまりにあんまりなので見た目の手直しをしたくなった。
 ・背景色やらのカラースキーム変更
 ・フォントサイズの調整
これくらいはね、と思ったらそのこれくらいを弄るのが面倒くさいという、、。カスタムカラーとか機能しませんからね。公式テンプレートの癖に。
 この時点でウンザリし始めていたんですが、twentyseventeenの作りの酷さに腹を立てながらもカスタムcssで片っ端から上書きをしていくまるで簡単ではないお仕事。

 そもそもの話として、これって「英語圏向けのデザイン」なんですよ。
 まずタイトルがびっくりするくらいに埋没する。それというのも英語圏では「見出しを大文字や書体で切り分ける」という文化があるとは、以前から話には聞いていたところ。26種+10数字(+記号)しかない文字種と、単語ごとにスペースで区切られる表記法の上で形成されていったデザイン文化。これを、平仮名片仮名漢字アルファベットと何十何百文字も多種多様ごちゃまぜ且つ、単語区切りも読点句読点の切り分けと「読み手の理解力」に委ねられる圧倒的基地外言語文化圏なんぞに当てはめられる筈がないのですよ。
 うん、最初から分かりきっていた間違いなのでした。

 ただもう後には引けないとばかりに、「やっぱり前のが一番」とあれよあれよと過去テンプレートからのcss移植祭り。そりゃDOM構造だって違うしデッドコピーにもなりますけども(とほほ)。

・ウィジェット
 ver3?くらいから導入されていたサイドメニュー構成要素のウィジェット化。
 テンプレートコードを弄らなくて良くなった、なんてのはまぁ酷い建前でして。いざ並べてみるとその圧倒的な低機能ぶり。ソート順等の標準メソッドが提供する機能をまるで網羅しておらず、「ただ置くだけ」以上の機能性をまるで提供しない。
 だったら任意のphpコードを書かせて貰うしかないよね、と。
 >PHP Code Widget
 (まぁ自分は一覧の最後に「その他旧ページ」みたいなリンク足してるから、結局必要な事でもありましたけどね。)

 ついでに言うと、近年のweb・アプリケーションUIのこれまた圧倒的な低機能ぶりは「分からない奴は分からないとしか言わないし、だったらいっそシンプル単機能で製造コストも抑えてwin-win!」などと(勝手に)思い込んでいるとしか思えない、そんな今時の風潮を反映するかのごとき手抜き具合と言っていい。
 そもそも「皆使ってないのかな」ってのが正解な気もしなくもないですけどね、今思うに。初心者向けフレンドリーアピール!、しかしもう日記blogは廃れて誰も使わない。そんな形骸化した機能だったのかもしれない。

・結局twentyseventeenの手直し
 そして表面を取り繕った後に気付く、そもそものテンプレートの機能デザインへの疑問。
 ・検索のソート設定がない(デフォルト不定とかもうね)
 ・タグクラウドがクラウドになっていないという矛盾(好みの問題だが、この過去否定たるや)
 ・indexだとカテゴリ類が表示されないという罠(結局は詳細遷移ありき)
 ・その他色々

 とにかくUIの劣化が半端ない。既にあれやこれやと弄らされているので今更デフォルトに甘んじるも何もなく、むしろ度しがたいレベルに許しがたいので手直しは必然。
 ここでそういえばver3辺りから子テーマなる概念が出てきていたので、それで差分カスタマイズという方法に乗り出した。
 と言ってもコントローラとビューの切り分けも曖昧模糊なので、例えば共通ナビゲーション部を直すだけでも全パターンファイルを書き直して回る構成センスの無さ。あまりにもあんまりなのでwordpressこんなに使えないの?と首を傾げながら、過去のテンプレート(友人に貰ったもの)の構造を見直したら「普通こうだよね」という順当なファイル構成。後でその友人に話したら「あれ(twentyシリーズ)は小一時間眺めて捨てた」(笑エナイ)。
 もうどんどん後付けで書き換えていって、子テーマなんだけど子テーマなのかコレ?みたいな親テンプレートアップデートで崩壊しかねない差分の取り方になっている気がしてならない。

 とは言っても、これで全て納得するレベルまで直した、という訳でもないですけどね。一部は「劣化」した状態のまま。
 ただ一応、
 ・長くなりすぎたArchives(年月リスト)を折り畳み化
  >jQuery Archive List Widget
 ・スマホだと無駄に縦に伸びてしまうメニューを折り畳み形式に
 ・そのメニュー部へジャンプ出来るように
 といった追加調整は入れておいたので、まぁ劣化半分、改善半分。

・画像表示
 最近調子に乗って変な画像を拡大リンク付きで置くようになってきてますが、そうなると気になるブラウザ遷移の問題。ここはよく見掛けるポップアップダイアログを導入しようかとは思っていたところ。
 有名所では「Lightbox」なんですかね(もう古株だろうけど)、って事でさっくり導入も楽ちん。かと思いきや、いざスマホ(Android)で見るといまいち微妙。
 ・Androidバックキー(ブラウザバック)で閉じられない
 ・スマホだと余白が無駄すぎる

 Androidユーザをやっていればbackキーに配慮するのは至極当然当たり前、っていうか100%押してしくじるというレベル。
 まぁもうAndroid7の時代、今に始まる問題ではないのでとっくに解決済みだろうと代替品を探したのですが、「lightGallery」というのがあるにはあるんだけど、うーん???
 こちらのサイトのこのサンプルを見て貰うと分かるのだけれども、「ページ切り替え操作の全てが履歴に乗る=バック操作でそれら全てが反復される」という、全くもって困り果てた仕様。こんなもんオープンの際に一発だけhashを乗せればいいだけなのにね、と思いつつ。コアのコードを書き換えることになりそうなのでやめた。どうせ弄るならlightboxの方が分かり易い。
 そもそもこれでもって「解決した」と紹介されている時点で、web開発側ですら本質的に改善する気がないのではないかという疑念すら抱いてしまった。iOSじゃブラウザバックより閉じるボタンを押す方が早そうですもんね、と毒の一つも吐いてしまう。それくらいこの中途半端な現状には萎えた。

 それと実際のところ、機能として必要なのは「ブラウザ遷移が発生しない」という部分であって、正直に言えばポップアップでの表示が必要な訳ではない。むしろ大きな画像を狭いウィンドウに押し込める結果にもなり得てしまう(特にスマホ)。サムネイル+拡大表示という観点で言えば結局、全画面で拡縮操作もできるブラウザ標準の画像ビュアこそが一番機能性としては良い。あれをただ「画面遷移なしで=閉じた際のリロードを発生させずに素早く切り替え表示させたい」だけ、というのが実情。
 この点で調べてはみたところ、フルスクリーンモードというのがあったけど思ったのとは違う。ブラウザ内最大化じゃあなくて本当に全画面占有してしまうし、加えてブラウザ依存もある。勿論操作性も及ばない。

 結局、「いらないや」という結論になりまして。
 ただバックキーの件はコードに腹を立てたので、一応こちらで直して思うように動くのを確認してから、「いらないね」と外しました(笑)。まぁまた他に良い案が出てきた時に再利用する余地があれば。

 というか、結局これってのは、「画像ビュアから本ページへ戻る時のリロードが嫌」という話に収束する気がする。でもってこの時のもっさりが顕著になるのがembed、いわゆる埋め込み動画のスクリプトの所為なのですな。要は動画貼り付けなんてやめろやと。
 強いて言うならサムネイルクリックで別窓開いてそこで初めてロードさせるような作りにするか、かなぁ。これを検討した方がよさそう。まぁ次回。


 さてここでおしまいにしようか、というところで、
・googleウェブマスターツールの大量エラー
 どういうこと。
 ウェブマスターツールの「構造化データ」、google様がページ解析に使うための指標としてのデータ構造を規定したものなんですが、twentyseventeenが吐いたDOM構造に片っ端からエラーが出まくる(反映に期間を要するのですぐには気付かなかった)「えっと、だから最近のweb事情に適合する手間を省くために公式テンプレートを使ったんだよね、俺?」
 わざわざ気怠い思いで使い続けた結果がこの仕打ちですよ? 舐めてんの製作者? 本当にプロなのかと疑いたくもなるよ? そこいらのユーザテンプレートならともかく、お前ら仕事でやってんだよね? などともうけーぜろさん激おこぷっつんブチ切れ金剛状態、ってなものでございましたよホント(苦笑)。
 まぁ直しましたけど。
 詳細ページ以外は必要なdivを削り落とした上で組まれているので、迂闊に足してもcssが考慮されていない。ミニマムな対策としてhiddenで吐かせるなどの頭の悪い作戦に出ましたが、もう本当にtwentyseventeenのそびえ立つウンコっぷりったらない(最早遠慮無し)

 もうね、「昔のテンプレートにレスポンシブなcssを適用できるよう勉強した方が早かったよね」(+google向けDOM調整)と心底思いましたが、これぞまさしく後の祭り。

 さて今度こそ(第二弾)、
・非https
 管理用ページの話なんですが、最近firefoxがですね、非httpsなサイトでのログインフォームにくっそうるさくなって参りまして。何あの嫌がらせみたいな警告の出し方。
 まぁサイトのハックってのはただ荒らされるのみならず、それを踏み台にしたサーバ悪用という拡大被害の話もあるので、ただ個人が戸締まりに気を付けろよの時代じゃなくなっているというのはあるんですけども。
 ただhttps化というのは証明書もお金掛かるんですよねー、と言おうとしたところ、無料のletsencryptというのが近年出てきてはいるらしく。mozilla協賛でね。
 でもこれ「三ヶ月ごとに更新作業が必要」らしいんですね。ええ、パーフェクトに一度は忘れますよね。そしてめんどくさくなって有料に移行するプランですよね。流石mozillaの作戦ですよね。、、、と思いましたわこれホント(苦笑)。

 流石にこれはサーバの運用から考え直していかないといけない問題なので、今はfirefoxの忌々しいフォーム警告に目を瞑りながら凌ぐほかありません。自サイトなんぞよりも仕事で毎日叩く客先開発サーバの警告の方が鬱陶しいわ!(ハァ)

 そんなこんなで、リニューアルしたよ!とすら言い切れないこの釈然としない状況ゆえに。
 まぁ何か上手く締まらないので一旦これにて。

コメントを残す

メールアドレスが公開されることはありません。