砂塵の彼方

スマホでの表示は、これまで自分の好みで黒地に白文字にしていました。
が、この際、選べるようにしておこうかと。
ブラウザーのテーマ設定によって、ライトなら白地に黒文字、ダークなら黒字に白文字の表示に自動で切り替わるようにしました。

今回作業を行ったのは、以下の5か所です。
※印の3つは、パソコン表示もダークモードに対応させました。

• 時空の塔 https://www.simoom.net/
• 踊る金狼亭(※) https://www.simoom.net/cw/
• 砂塵の彼方 https://www.simoom.net/sj/
• simoom.net.BAK(※) http://hp.vector.co.jp/authors/VA054753/
• simoom.net.BAK2(※) https://simoomnet.web.fc2.com/

ライトの方は、スマホで見ると配色がいまいちな気がします。もう少し改善の余地がありそうです。いずれ調整するかもしれません。


（1/14追記）
ライト版の配色の調整を行いました。

（1/27追記）
時空の塔のパソコン表示を、ダークモードに対応させました。
元が基本的に黒地に白文字でしたので、「ダークモードでない時は白地に黒文字で表示できるようになった」が正しい気もします。
単純に白＆黒ではなかった部分は元の色や壁紙画像を残しているため、場所によって淡色に濃色文字／濃色に淡色文字の切り替えになることもあります。

（2/14追記）
砂塵の彼方（この場所）のパソコン表示を、ダークモードに対応させました。
元の茶系の色を残しつつの明暗切り替えです。

一年前の今日から始めた「レスポンシブ化っぽい何か（仮）」の、その後です。
踊る金狼亭（とそのほかのCardWirth関連ページ）について、全ての作業が完了しました。パソコン用ゲームの記事がスマートフォンで閲覧されることはなさそうですが、まあ、やっておけば何かの役に立つかもしれません。少なくとも、自分の勉強にはなりました。

今年2月6日に主な作業が終わり、本日までに最終的な調整と色の変更を行いました。色は、最初は白背景に黒文字にしていたのですが、閲覧テストの段階で疲れ目対策のために反転させて、黒背景に白文字としました。背景が白だとディスプレイの光で目が疲れてしまい、長時間見続けるのが辛かったのです。黒背景が見やすいかというと、それもまた微妙ではあるのですが、当面この色でいこうと思います。
（ついでと言っては何ですが、この不定期日記も、スマートフォン表示を黒背景に白文字に変更しました。）

これで、CardWirth関連の記事は、すべてスマートフォンでの表示に対応しました。
あっという間に1年が経ってしまい、時間の流れる速さに愕然としています。
今後は、時空の塔の方でも徐々に作業を進めていく予定です。

ほんの気の迷いで、レスポンシブ化しました。

と言っても、きちんと調整したのは、最も見辛いであろうトップページだけです。未調整のページも表示の横幅が一定以下になると小さい画面サイズ用の表示が適用されますが、ほとんどは横幅480pxで閲覧可能なように作ってあるので、だいたいのところ大丈夫ではないかと思いたい思います。調整が終わったところから等倍表示の設定をかけていく予定です。

作業の範囲は、「時空の塔」及び「踊る金狼亭」内の静的コンテンツを考えています。ただ、レスポンシブWebデザインを意識して作り直すところまでやるのは、手間を考えると無理そうです。元々あったパソコン用サイトはそのまま、スタイルシートだけ（＋場合によってはHTMLの方も少し）いじって、スマホなど指で操作する端末でもだいたいストレスなく使えるようにできればと思っています。これを、胸を張ってレスポンシブ化と言うのもアレで……レスポンシブ化っぽい何か、ぐらいでしょうか。終わっていないので、今のところ（仮）です。

現在パソコン用フリーゲームの記事がメインらしい構成で、レスポンシブ化して意味があるのかはさておき。

なお、この不定期日記は、パソコン・スマホ・ガラケー用にそれぞれテンプレートが存在し、適宜切り替えて表示しています。何かあるたびに膨大な数のファイルを微調整していく手間を考えたら、CMSを上手く使っていく方が楽ですかねぇ。
Firefoxはウェブ開発メニュー内に「レスポンシブデザインモード」というのがあって、作業を進めるにあたって、かなり助かっています。


（3/5追記）
CardWirth関連で作ったTwitterアプリ「cwNowUp」にも、レスポンシブ化っぽい何かを施しました。

自サイト内から他のサイトへのリンクが生きているのか、前回調査してから、もう3年ぐらいは経ちました。その間に無料ホームページサービスや無料ブログのサービス終了が相次ぎ、結構リンク切れが増えているのではないか……

ということで調べてみると、やはりかなり出てきました。
必要に応じて修正や削除など行っています。主な修正箇所は、以下の通りです。

• 踊る金狼亭：メモ箱＞ユーザー作成バリアントにCardWirth Extenderを導入する
• Extender関連ファイルの入手先が変わっていたため、リンクを修正。
• 今後入手ができなくなる可能性を考慮して、代替手段も追加。
• 踊る金狼亭：初めてカードワース＞見た目や宿のカスタマイズ
• エンジン差替え素材リンクを1件追加。閉鎖など4件削除。
• CW1.28用外観変更パッチ「でこぱち」配布サイトが消滅したため、「でこぱち」に関する記述を削除。
• 踊る金狼亭：ツール紹介
• 差し替え1、修正4
• リンク集
• 「時空の塔」修正6
• 「踊る金狼亭」追加1、修正4
• リンクミス（書き間違い）の修正。
• 踊る金狼亭、札楽亭内の関連日記ログに1か所。。。

※※※
【メモ】そこそこ最近（？）のサービス終了例
2010/10/31：infoseek isweb ライト
2011/06/30：COOL ONLINE
2012/05/21：infoseek isweb ベーシック
2014/11/30：OCNブログ人
2015/02/28：PageOn（OCN）
2016/03/31：フリーティケットシアター
2016/11/10：@homepage（Nifty）
2017/01/31：ZAQ BLOGari、WebSpace（J:COM）
2017/10/31：au one netホームページ公開代理サービス（旧DION）
2018/02/28：@PAGES

だいぶ前からそういう流れになってきてましたが、これまで費用面で諦めていました。特に重要な情報をやり取りするわけでもない個人の趣味サイトのために、そう高くはないとはいえ追加の出費をするのは、どうも躊躇われたのです。
ところが先月から、SAKURA InternetでLet's Encryptが使えるように。何と更新も自動でやってくれるありがたさです。

証明書の取得はワンクリックで終了、http://～へのアクセスをhttps://～に送る設定も難しくなく、簡単簡単と思っていたら、そこからが大変でした。長くやっている間にサイトの構成ファイルが結構な数になっていて、SSLを想定していないスクリプト類の更新、網の目のように張り巡らされたリンクの中から修正が必要なものを探す作業、そして最終的な確認と、それなりの時間を消費しました。
やはり、そんなに甘くは無かった……！

なお、1つだけ作業が終わっていない部分があります。
ガラケー向けの変換スクリプトが、これまでの設定では上手く動かなくなりました。自分で作っていないので、ゼロからの調査が必要です。今日明日の対応とはいかないかもしれません。
ガラケー派の方にはご迷惑おかけしますが、今しばらくお待ちください。
・この不定期日記は単体でガラケーでの表示に対応しているため、そのままご利用いただけます。
・連絡用掲示板など他にもいくつか影響を受けない部分がありますが、そもそも使われていないので（以下略）
※11/12 ガラケー表示、再稼働しました。
なお、証明書不一致による接続不能を避けるため、ガラケーでアクセスした場合にはHTTP接続となります。
HTTPSではアクセスできない端末もあるのでやむなく……。
ガラケーでご覧になる方は、セキュリティ対策がなされていないことにご注意ください。


（11/7追記）
その後、URL正規化の過程で不具合が起きることが分かりました。
サーバのデフォルトの仕様では、
http://simoom.net/
http://www.simoom.net/
のどちらを使ってもアクセスできるようになっているのですが、内容同じでURLが2つにならないように、wwwなしのアクセスはwwwありに書き換えて、URLを統一していました。
が！ SSL化後も同じことをやろうとすると、転送で無限ループが発生し、正常にアクセスできません。.htaccessの記述は間違っていないし、だいたい過去には問題無かった箇所です。

これは処理に使っている環境変数の方がおかしいのかもと一覧で出力してみたところ、HTTP_HOST（SERVER_NAMEも）値が面白いことになってました。

http://simoom.net/ にアクセス
→HTTP_HOST=simoom.net

http://www.simoom.net/ にアクセス
→HTTP_HOST=www.simoom.net

https://simoom.net/ にアクセス
→HTTP_HOST=simoom.net

https://www.simoom.net/ にアクセス
→HTTP_HOST=simoom.net（←！！？！）

HTTP_HOST=simoom.netならhttps://www.simoom.net/～に送るという操作をしていたので、ループするのは当然です。
SAKURA Internet、何故こんな仕様？？ 他に代用できる変数もなし、困った……

と思っていたら、ちゃんと解決している方がおられました。
上級者向け設定、そう言えばそんなのあったなぁ；
→さくらでURL正規化を正しく行うSSLの設定方法 - はるかのひとりごと

なお、上記記事は有料の証明書を使う時のやり方です。
無料SSLでは、そのままの手順は使えませんが、だいたい同じ方法で解決できます。

管理上の都合により、「砂塵の彼方」内のページ（index.php/page/*）を整理しました。
移動や名称変更でアクセス用URLが変わったページが多数あります。

お手数ですが、ページへのリンクは、リンク先の変更をお願いします。
また、自サイト内からのリンクは修正済みですが、万一リンクが切れているところがあればお知らせください。可能な限り速やかに修正致します。
よろしくお願いします。

（※エントリ＝日記パートのURLは変更なしです。）

このブログはあくまで「時空の塔」と「踊る金狼亭」のオマケだと思っていたので、各種ご案内などにはほとんど気を遣ってきませんでしたが、この際、少し整備しておくことにしました。
迷った時分かり易くを目指して……

• このブログに、専用の「案内所」を設置しました。
• これまで各サイトに個別に掲載していた案内文のうち、直接連絡の対象になりそうなものを、連絡先まとめ内の事前説明「その他」に移動させました。

と、3つそれぞれに案内所を作ったところ、今度は情報の在り処がばらけて分かり辛いような気がしてきました。いずれ、サイト毎に置いている案内所やご利用条件の類を、一か所にまとめるかもしれません。

色々と試行錯誤中です。
そもそもCardWirthの記事を作った時、別館扱いにしたのが拙かったようにも思えます。
家庭用ゲーム攻略と同じ個人の趣味という括りで、時空の塔の一コーナーとして、まとめて管理しておけば良かったかも……（後の祭り

※※※
案内文を移動させて、少々懐かしい気分になりました。
元々本館用に書いたものですが、当時、こういう事を事前にお知らせしておいた方が親切と思える程度には、メールなどで直接連絡してくる方がいらっしゃいました。今から考えると信じられないぐらい頻繁に更新していた頃の話です。
今はもう、サイト自体がほぼ死んでいるような。返信する余裕も有ったり無かったり。。。

Twitterに更新情報を流すので、OGPとTwitter Cardsに対応してみました。
その手順記録です。

（1）OGP対応
Twitter Cardsには専用の設定タグがありますが、その多くはOGPの設定で代用できます。
OGPの方が汎用性がありますので、書けるところはOGPで書いてしまう事にしました。

HTMLファイルのヘッダ部分に専用のタグを入れます。
サイトやブログの個別の記事ならこんな感じ。
↓
<meta property="og:title" content="※記事タイトル" />
<meta property="og:type" content="article" />
<meta property="og:url" content="※記事のURL" />
<meta property="og:image" content="※サムネイル画像URL" />
<meta property="og:description" content=" ※記事概要（200文字以内、100文字以内推奨）" />
<meta property="og:site_name" content="※ブログタイトル" />

OGPの仕様で上から4つは必須、その下の2つは任意です。
が、og:imageは敢えて空欄にしてあります。記事毎に画像を準備はできないし、かと言って記事内容に関係ない共用画像の指定は不可らしく。Twitter Cardsの方ではサムネイル画像は任意項目のため、無しでいきます。
og:descriptionは任意項目ですが、Twitter Cardsで必須項目の代わりとして使われます。必ず何か入れるようにしてあります。

OGP絡みでやる事はこれで終わりです。
申請等は必要ありません。


（2）Twitter Cards対応
HTMLファイルのヘッダ部分に専用のタグを入れます。
↓
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="※サイトオーナーのTwitterID" />
<meta name="twitter:creator" content="※記事執筆者のTwitterID" />

同時にOGP対応する場合は、この3つだけ書けば大丈夫です。
twitter:cardに指定できるカードの種類はいくつかあります。更新情報のお知らせなら記事のタイトルと概要ぐらい表示されればいいので、今回はSummary Cardを選びました。
記事に関する情報は、og:～の方から読んでくれます。


（3）ファイルのアップロード
タグを追加したファイルを、サーバにアップロードします。


（4）Twitter Cards利用申請
最後に、Twitter Cardsの利用申請を行います。

Twitter公式のvalidator toolにChromeなどWebKit系のブラウザで（※1）アクセスし、Twitterアカウントでログイン。
「Validate ＆ Apply」のタブをクリックし、タグを追加したページのURLを入力して情報が正常に表示されるか確認します。
（↑Enter URL to validate の所にURLを入力、Go!ボタンを押す）

表示項目の取得状況やテスト表示を見て問題が無ければ「Request Approval」をクリックし、次に出てくる連絡先やサイト情報を書く欄で必須項目を埋めて（※2）申請を実行します。

正常に申請が終わると、Twitterから通知のメールが届きます。
……が、これが短い英文＋URLの一見怪しい感じだったりしましてですね。。
いつまでも届かない場合は、一度迷惑メールフィルタに引っかかっていないか確認することをお勧めします。

（※1）Firefoxではカードのテスト表示ができませんでした。ただ、実際の表示が見えなくても、表示項目がきちんと取得できていれば問題ないと思います。

（※2）だいたいの項目は、申請に使ったTwitterアカウントの登録情報や、直前にvalidator toolで取得した情報を利用して自動入力済みです。私が手入力したのは、サイトの概要とサイトオーナーのTwitterID欄だけでした。


これで全て完了です。
前からやろうと思っていたのを、やっと実行しました。
テンプレートに細工すれば簡単なここだけでもやっとこうかと、、、。


※Twitter Cards補足メモ

• Twitter Cardsは、申請した後、反映されるまでにしばらくかかるようです。
  私はほぼ直後と言って良いタイミングで使えるようになりましたが、検索で探すと、もっと時間がかかったという話も出ています。
• 申請はカードの種類ごとに必要です。（今回はSummary Cardのみ申請）
• 申請は、指定したドメイン内の記事全てに適用されます。独自ドメインでない場合は記入に工夫が必要かもしれません。（独自ドメインと違いがあるのかは調べてません）
• 基本的に、TwitterにURLが書き込まれた時点の情報が表示されます。
  validator toolで表示のチェックを行ったURLについては、その都度情報が更新されるようです。
• Twitter CardsのSummary Cardにもサムネイル画像の表示機能があり、twitter:image:srcに画像のURLを指定します。画像は120×120ピクセル以上、サイズは1MBまで。表示は120×120ピクセル固定です。
  指定が無い場合はog:imageから読み込んでくれるのですが、og:imageの推奨サイズは非常に大きく、共通で使うのはかなり無理がありそうです。

10/28 22:35
不定期日記、ただ今移動中です。
リンク切れで画像が表示されない等々、あちこち不具合が出ています。
移動完了まで、しばらくお待ち下さい。

10/30 22:33
移動作業が完了しました。
URLが変わりましたが、前の場所へのアクセスすると新しい場所の同じ記事に自動で転送されます。リンクやブックマーク等は、そのままでも問題ありません。

旧）http://www.simoom.net/cgi-bin/memo/
　↓
新）http://www.simoom.net/sj/

3か月ほど暗緑色の背景でやってきたのを、明るい茶色に変えてみました。
やはり暗背景に明るい文字が見辛くなっているようです。目に優しい緑色系統なら大丈夫かと思っていたら、そうでもありませんでした。

色に対する感覚も、時と共に変わっていくものなんでしょうか。
にしては、絵を描く時はあまり感じないですね。
……疲れ目が酷くなっているだけ？

※※※
時空の塔もいずれは白黒逆転するかな。
しかし、もう黒背景白文字のイメージでしか考えられないような気も。