KeystoneJS で CMS を作成してみようと遊び始めたところ、問題にぶつかってしまったので共有します。
- OS: Windows 10 64bit (1909)
- Node.js: v.12.13.1
- Node.js のバージョン選択: nvm-windows 1.1.7
- Chocolatey 経由でインストール
- 以前は Nodist を使用
- yarn: 1.12.1
- コマンドライン: Cmder 1.3.13.967
はてなブログのデザインテーマを投稿しました。
今回投稿したテーマは「Vertical BlogTheme」です。明るい色と暗い色の組み合わせを目指しました。左側のコンテンツは明るい色で、各記事の項目には白い背景色を与えています。一方の右側のサイドバーは暗い色で、デザインのカスタマイズで背景を変更すると反映されます。サイドバーの暗い色が縦に伸びる意味で「Vertical」と名付けました。
WordPress の公式テーマ Twenty Fifteen をベースに、昔制作した WordPress のテーマの要素と、はてなブログの環境に合う要素を加えながらデザインしました。
Twenty Fifteen は左側にサイドバーが配置されていますが、はてなブログでは右側にサイドバーを配置することがほとんどのため、右側に配置を変更しました。また、ヘッダーやフッターも、左側のコンテンツに配置しています。
スマートフォンでもタブレットでも同じデザインで表示できるレスポンシブデザイン対応のテーマです。
サンプルは下記のブログからご覧になれます。
vertical-blogtheme.hatenablog.com
既存のテーマであれば、「Gravity」と類似しているかもしれません。こちらは3カラムになります。
前からブログのデザインを変更して、ブログ更新のモチベーションを上げれば良いなと思っていました。
そこで、自分でテーマを作ろうと思ったのですが、結構手間が掛かりそうだと思い、作成せずに既存のテーマにカスタマイズを加えれば良さそうと判断しました。
しかしながら、後で調べてみると、はてなブログのデザインテーマ作成はCSSファイルのみということが分かり、これなら短時間で作成できると思って開発に至りました。
短時間で作成できる と言いましたが、はてなブログのデザインテーマはCSSのみですので、レイアウトの配置に凝ってみようとすると、逆に時間がかかってしまいます。
両者とも満たそうと実装しましたが、この場合だとサイドバー部分の位置を絶対座標にする必要がありました。
#container { background-color: #c0c0c0; /* 左側の背景色の割当は簡単なのだが... */ position: relative; } #box2 { position: absolute; top: 0; left: 800px; }
しかし、この場合だと、左側コンテンツの高さが、右側サイドバーの高さよりも低いと、右側サイドバーの背景が途切れるなど、レイアウト崩れが発生してしまいます *1 。
レイアウト崩れを起こさないようにすることも出来ないことは無いですが、結構大変な作業になることから、ブログタイトル、メイン、フッターそれぞれの要素に左側コンテンツの背景色を割り当てるようにしました。
そのため、左側コンテンツの背景色を変更しようとすると、下記のようになります。ちょっと面倒ですね。
#blog-title, .header-image-enable #blog-title, #wrapper, #footer { background-color: (お好きな色); }
WordPress だと、テーマのカスタマイズ機能があるおかげで、テーマを使用する側からは、簡単に色を変えることができます。
まあ、それ以前にはてなブログでは HTML の編集が出来ないので、出来るだけで解決する問題かもしれません。
ここから先は、数学的な内容が含まれています。このために久しぶりに方程式を使いました。
このテーマはレスポンシブデザイン対応です。ということは、画面の横幅を変えると自動的にコンテンツの幅も変わります。
どのようにコンテンツの幅が変わるかを下図に用意しました。なお、 768px よりも狭い場合は1カラムレイアウトとみなし、コンテンツとサイドバーが同じ列に並びます。
ここで悩んだのが、左側コンテンツ 外側 の幅の決め方でした。
まず最初に考えたのは、50vw + (左側コンテンツ内側の幅) / (何かの率)
という計算式で、左側コンテンツ外側の横幅を決める方法です。50vw
にした理由は、ブログのコンテンツが中央に寄って見やすくなると判断したためです。率の値は最初は適当に 4 としていましたが、後に 3.238 辺りに変更していました。
868px
です。実際に左側コンテンツ外側の幅は calc(50vw + 868px / 4)
になります。この方法で進めた結果、幅を変えるとヘッダーとコンテンツの幅が合わない事態が発生しました。
スクロールバーが原因で画面の横幅が狭くなってしまい、コンテンツ内側の幅が確保出来ないから・・・というのもありましたが、デバイスごとに率の値が同じだと、違うデバイスで正しく幅が揃わないようです。
とりあえず 50vw
にこだわるのをやめて、デバイス毎に幅を vw
単位で割り当てる方法を用意しました。左側コンテンツ外側の幅を決めるには、(左側コンテンツ内側の幅 / 指定したメディアクエリーの最小幅) * 100
で済みます。
1200px
です。先程の左側コンテンツ内側の幅である 868px
と併せて使用すると、左側コンテンツ外側の幅は 72.3vw
になります。それをデバイス単位で設定したところ、幅が揃わない事態は直りましたが・・・。
上図のように、幅を広げると内容がかなり右寄りになり、このテーマのコンセプトである「デザイン設定で設定した背景が大きく見えるようになる」と合いません。
そういったことがあって、一度 50vw
から値を足す方法に戻って再び最適な方法を模索しました。デバイス毎に率を変えれば良さそうなので、下記関数を用意して計算してみました。
/** * 左側の横幅を取得します。 * このテーマは右側のサイドバーをなるべく広く取るために、画面の半分の幅をベースに、左側の横幅を計算しています。 * 左側の横幅を取得するまでには、左側の内容の横幅を割るための率(ratio)が必要です。 * ratio はコンテンツとサイドバーの内側の幅で値が異なるため、ここで計算することになります。 */ @function make-content-outer-width($viewport-width, $content-width) { $half-viewport-diff: $content-width - ($viewport-width / 2); $ratio: $content-width / $half-viewport-diff; @return calc(50vw + #{$content-width / $ratio}); } // タブレット、PC(狭い)、PC(広い) それぞれに対応した左側内側の幅を設定 (実際は関数を使用して計算しています) $content-width-sm: 520px; $content-width-md: 660px; $content-width-lg: 868px; // それぞれの左側外側の幅を設定 $content-width-outer-sm: make-content-outer-width(768px, $content-width-sm); $content-width-outer-md: make-content-outer-width(992px, $content-width-md); $content-width-outer-lg: make-content-outer-width(1200px, $content-width-lg); // 設定した変数はレイアウトに使用される
実際に動かしてみると、レイアウトが崩れず、ちゃんと中央に寄るようになりました。
おまたせしました。ながーい間公開できていないまま放置していた依頼生活の3章ですが、現在制作中です。
2010年2月に1章が公開された長編のWWA作品です。1章は一番最初に公開されたWWA作品となります。3章構成になっていて、自分のWWA作品の中では唯一の複数章作品です。
このゲームの舞台となっている惑星「森星 *1」では、地球温暖化が原因による災害が発生しています。今作の舞台であるハヅツ国も例外ではなく、近年台風の発生に頭を悩ますばかり。
この後絶対おかしい現象が起こるはずだと思った主人公は、翌日見事に的中。普段おとなしくしていたモンスターたちが急遽暴走してきました。本来なら出てこないスライムも出てきてしまい、住民は困惑しています。
普段だったら通っていた学校も、急遽国からの指導により、「冒険者学校」に変更。暴走を止めるために、国中くまなく散策することになります・・・。
ちなみに、この物語の文章はこのブログ記事の執筆時に刷新しました。
3章はサントグ町に到着した主人公とその仲間が、まだ残っているとされている鍵を見つけ出すために冒険を進めます。
マップはすでに完成していて、後はメッセージやストーリーの追加、モンスターのバランス調整、最後のシーンの制作が残っています。なお、グラフィックは「謎めいた機械を追い求めて」で使用していたグラフィックを使用しています。
章毎にグラフィックが違うのは、WWA作品の中では数少ないかもしれません。プレイしてみると、進むたびにグラフィックが次第に進化していく・・・という小さいお楽しみ要素が待っています。
ゲームのストーリーの設定を明確にしたり、優しすぎたゲームバランスを調整したりするため、2章以前のマップデータにも修正を加えます。
なお、だいぶ前に1章をリメイクしたことがありますが、リメイクしたマップは使用せず、すでにあるマップを修正する形で済ませます。
リメイク中の依頼生活1章は、鉄道の移動方法をベルトコンベアのようにしました。地下の区間は、カット(省略)無しで移動します。 pic.twitter.com/qWNxmti41k
— Aokashi (あおかし) (@aokashi) 2015年5月11日
*1:住んでいる人からは森惑星と言っているのだが
あけましておめでとうございます。 2020年もよろしくお願いします。
さて、気がついたら最初のホームページ「Coden City」設立からもうすぐ10年! このために Aokashi Home を GatsbyJS で作り直しました。
現在、 WWA Wing のバージョンは 3.2.11。
2019年では、スタイルシートの SASS (SCSS) 化を担当しました。途中で $color
マクロが動作しないバグが発生しましたが、後に修正されています。
現状の WWA Wing は packages/engine/src/
をあれこれ見ればわかるのですが、 ほとんどの処理が wwa_main.ts
に集約されています。
ですので、なるべく別のファイルに移りしたりして、ソースコードを見やすいようにリファクタリングを進めています。
WWA マップ作成ツールに代わる新しい WWA の作成ツールを模索しています。
完成した場合は、そのタイミングで、 WWA のマップデータの仕様を公開したいですね。スーパー正男では、作成ツールが結構出ているので、 WWA も作成ツールを自由に選ぶ世の中になりたいです。 ただ、これは暗証番号がバレるリスクが高いため、慎重に進めようと思います。
WWA COLLECTION 2 が配信されました。前回と同じく、自分の作品が WWA COLLECTION 2 に収録されます。
誰かが街に残した機械を撤去するために行動する主人公の物語です。Aokashi Home で公開している最後の作品「シティーアイランド」から5年ぶりの新作となります。
これまで制作したWWAのいいところを合わせた集大成として、演出やボリュームはできるだけ盛りました。
また、WWAを初めて知る方にも、WWAの文化を知ってもらうためにギミックも入れています。難易度は易しく設定しています。
WWA COLLECTION 2 のゲームボリュームに収めるには大きすぎるため、前編と後編で分けています。
そして WWA COLLECTION 2 配信後の来年には、この作品を前編と後編を統合させて、Aokashi Home や PLiCy にも公開します!
WWA COLLECTION 2 を遊んだ方や、逆にこの作品を通じて WWA COLLECTION 2 を知った方が増えればと思っています。
この前編と後編の統合作業については、随時ブログやTwitterで発信する予定です。いつ公開するかは分かり次第お知らせします。
この作品に関する裏話を、ゲームのプレイに影響しない範囲でお話します。
ちなみに、 WWA COLLECTION 2 の発表に合わせて、 PLiCy さんと協力して紹介ページを作成しました。今回はトップ画面に収録作品の画面を集めましたので、コレクション作品だと一目で分かると思います!
Aokashi Home のWWA素材に新しい素材が加わります!
街と街の移動として、路面電車が必要なことから制作しました。あ、鉄道とかバスとかでも良かったんですが、時代設定上、路面電車を景観として入れたかったんです。
素材は Aokashi Home のWWA素材ページ からどうぞ。タグ「路面電車」から探すことができます。
ついでに、路面電車を走らせるための路面軌道も追加しています。電停は後ほど追加する予定です。
画像素材にある路面電車を、使用するWWAのイメージ画像に貼り付けて、WWA側では各マスを使用して物体パーツを作成します。
19Tram-1.gif
... アイボリー1色の車体に、1つ目の前照灯が特徴。昭和レトロを感じさせるデザインです。前照灯の位置はお好みでどうぞ。19Tram-2.gif
... 清潔な白い車体にグレーとオレンジを組み合わせた箱型路面電車。いわゆる軽快電車で、大都市の路面電車では廃止が相次ぎ、実用的な路面電車として開発されたという設定です。なぜかここだけ前方のドアが引戸になっています。19Tram-3.gif
... 近年話題のLRT方式の路面電車です。超低床電車なので、車内のステップで頑張って上ったり、降りる際にこけて転んだりする必要はありません。3つの車体で構成されていて、真ん中の車両には台車が入っていません。これらの車両は、実世界の路面電車をモデルにして、いくつか変更を加えながら制作しました。ちなみに、そのモデルになった路面電車は 一度も乗っていません! (広島とか愛媛に行きたい・・・)
Aokashi Homeで更新された情報を下記に掲載しています。