夜中に前へ

読者です 読者をやめる 読者になる 読者になる

夜中に前へ

思考実験、書評、ゲームレビュー、あと雑記

LINE風の吹き出し会話が簡単にできるCSSを作ってみた(はてなブログ)

ブログ ブログカスタマイズ

こんばんは、夜中たわしです。

今回は主にはてなブロガー向けの記事です。

前回の記事のためにLINE風の表現ができるCSSを作ったんですが、それのやり方が知りたいという熱い声(1件)があったので、公開することにしました。

他のサービスでも使用可能ですが、はてなブログ向けの導入方法として紹介します。

紹介するCSSでできること

これから紹介するCSSでできる表現はこんな感じです

なるほど

しいたけ しいたけ

そのしいたけの人は一体?

わかりません

f:id:tawashix:20170423030055p:plain

なんか料理が出てきた


このようにLINEのグループ会話、に近い表現ができます。
補足:このしいたけは私が撮影したものです

一応、画像じゃないですよ。テキスト部分など選択可能なのがわかると思います。

誰かと本当にLINEでやり取りしているみたいで、面白い使い方ができそうですよね。

できないこと

なおできないこともあります。

  • 左側アイコンの非表示(左寄せ)
  • 右側アイコンの表示
  • 右側名前の表示

なぜできないか。

それは多機能にするとコードが増えて保守が大変だ……ということと、私のCSS歴が5日だからです。

でもそこまでの機能はいらないのではないでしょうか!?

制作背景・前置き

LINE風の表現をするCSSはネットでいくつか見つかるんですが、

  • アイコンを左側にのみ表示させたい
  • 複数アイコンを混在させたい
  • 楽に記述したい

という私のニーズに答えてくれるものに出会えなかったので、自作しました。

自分が必要とする機能だけ。

主に参考にしたのは下記です。

特にベースにしたのは、シロマティ(id:shiromatakumi)さんの会話形式CSSです。


こういうやつです。はてなブログでよく見かけますよね。


これのいいところは、非常に記述が楽だということです。

なので極力似た感じで使えるようにしたのと、アイコン画像が使いまわせるようにしました。この両立がめちゃめちゃ大変でした。自分、ほぼ素人だし。

まあそういうことでシロマティさんの会話形式CSSを導入していても共存が可能ですし、もちろん本記事のCSSだけでも動作可能です。

※ベースがシロマティさんのものなので、説明内容に流用っぽい表現が多発しますがご勘弁ください。

注意事項

  • 導入後は必ずPCとスマホで表示されるか確認してください。紹介するCSSはレスポンシブに対応していますが、PCとスマホで表示形式を分けている場合、両方のCSSの更新が必要です。
  • カスタマイズは自己責任で行ってください。トラブルの責任は負いかねます。
  • 作業前のCSSを必ずバックアップしておいてください。

CSSにコードを追加(その1)

まずは下記のコードをデザイン→カスタマイズ→デザインCSSにコピペしてください。

/* LINE風のCSS */
.entry-content .my-line,
.entry-content .other-line {
    clear:both;
    position: relative;
    display: inline-block;
    max-width: 80%;
    max-width: -webkit-calc(100% - 60px);
    max-width: calc(100% - 60px);
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 5px 10px;
    border-radius: 15px;
    background-size: cover;
    z-index: 1;
}
.entry-content .my-line {
    background-color: #85ff49;
    float: right;
    margin: 5px 5px 5px 60px;
}
.entry-content .other-line {
    background-color: White;
    float: left;
    margin: 25px 15px 5px 50px;
}
.entry-content .my-line.stamp {
    background-color: transparent;
}
.entry-content .other-line.stamp {
    background-color: transparent;
}
.entry-content .my-line.stamp img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
.entry-content .other-line.stamp img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
.entry-content .other-line::before {
    position: absolute;
    white-space: nowrap;
    top: -22px;
    display: block;
    color: white;
    left: 0px;
}
.entry-content .other-line::after {
    position: absolute;
    content: "";
    width: 45px;
    height: 45px;
    top: -17px;
    border-radius: 40px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    left: -55px;
}
.my-toge::before,
.other-toge::before {
    z-index: 1;
    content: "";
    position: absolute;
    top: 10px;
    width: 0;
    height: 0;
    border-top: 2px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid transparent;
}
.my-toge::before {
    border-left: 10px solid #85ff49;
    right: -14px;
}
.other-toge::before {
    border-right: 10px solid White;
    left: -14px;
}

CSSにコードを追加(その2)

続いてもCSSへの追加なんですが、こちらはユーザー自身で書き換える必要がある部分です。
(注:会話形式CSSを導入済みの場合、一部流用が可能です。後述)

下記のコードをカスタマイズした上で、デザイン→カスタマイズ→デザインCSSにコピペしてください。テキストエディタなどで編集後のペーストを推奨します。

.クラス名::before {content:"名前";}
.クラス名::after {background-image:url(画像のURL);}
.クラス名::before {content:"名前";}
.クラス名::after {background-image:url(画像のURL);}

書き換えが必要なのは「クラス名」「名前」「画像のURL」の部分です。

「クラス名」は「before」と「after」をペアにしてユニークな名前を付けてください。

使用できる文字は、半角の英数字、ハイフン( - )、アンダーバー( _ )です。アルファベットで始めなければなりません。(数字や記号で始めてはならない)

はてなフォトライフの画像を使う場合は、使いたい画像のページ(↓↓このページ)に行って、「右クリック」→「画像アドレスをコピー」して上記コードの「画像のURL」の部分にペーストしてください。

f:id:tawashix:20170423024828p:plain


【例】

.tawashi::before {content:"たわし";}
.tawashi::after {background-image:url(http://cdn-ak.f.st-hatena.com/images/fotolife/t/tawashix/20160910/20160910223959.png);}
.siitake::before {content:"しいたけ";}
.siitake::after {background-image:url(http://cdn-ak.f.st-hatena.com/images/fotolife/t/tawashix/20170422/20170422223241.gif);}

ほら、ここまでは簡単でしょう?

簡単かなあ……?

f:id:tawashix:20170423031237p:plain

また料理だ


.クラス名::before {content:"名前";}
.クラス名::after {background-image:url(画像のURL);}
.クラス名::before {content:"名前";}
.クラス名::after {background-image:url(画像のURL);}

このコードはクラス名が重複しなければ、いくら増やしてもOKです。

会話形式CSSを導入している場合

シロマティさんの会話形式CSSを導入している場合、既にアイコン画像表示のためにこんな感じの部分は既にあると思います。

.クラス名::after {background-image:url(画像のURL);}

このクラスはLINE風表示に流用可能です。

下記のように同一クラス名のbeforeのみを追加して、名前を入力してください。LINE風表示に利用しない画像に対しては、追加不要です。

.クラス名::before {content:"名前";}
.クラス名::after {background-image:url(画像のURL);}

なおこれで過去に吹き出し表示している記事に対して悪影響はありません。

ですが念のため確認をお願いします。違和感を感じたらCSSを速やかに元に戻してください。

使用方法

シロマティさんは見たままモードでの編集用にChrome拡張機能を用意されていますが、私はそんな高度なものは作れません。

なので申し訳ありませんが見たままモード派の方は、HTML編集に切り替えて下記手順を行ってください。

はてな記法・MarkdownモードではそのままHTMLを記載すればOKです。


まず実例を示します。

しいたけ食べたくない?

いらないです

f:id:tawashix:20170423031558p:plain

f:id:tawashix:20170423022613p:plain


上記の表示をするには、以降のように記述します。

<table style="width:100%; max-width:400px; margin:0 auto;"><td style="background:#88a4d4">

<p class="other-line クラス名"><span class="other-toge">テキスト<span/></p>
<p class="my-line"><span class="my-toge">テキスト<span/></p>
<p class="other-line stamp クラス名"><img src="画像のURL"></p>
<p class="my-line stamp"><img src="画像のURL"></p>

<div style="clear:both;"></div>
</td></table>

これをコピペして編集すれば、大体わかるかと。


一応1つずつ解説を。

「table」内がLINE風表示用の領域です。

<table style="width:100% ; max-width:400px; margin:0 auto;"><td style="background:#88a4d4"></td></table>


左の人の場合の記述です。クラス名に紐付いた名前・画像が表示されます。

<p class="other-line クラス名"><span class="other-toge">テキスト<span/></p>


右の人の場合の記述です。クラス名は必要ありません。なぜなら画像を出す機能がないから。

<p class="my-line"><span class="my-toge">テキスト<span/></p>


続いて左にスタンプを出す場合。スタンプの画像は透過処理をするか、背景色と合わせておいた方が見栄えがいいでしょう。

<p class="other-line stamp クラス名"><img src="画像のURL"></p>


右にスタンプを出す場合。

<p class="my-line stamp"><img src="画像のURL"></p>


最後に、おまじない的な行です。これは必ず記載してください。さもないと、それ以降の文章や画像が上にめり込んできます(美しくないんですが、他のやり方を見い出せませんでした)。

<div style="clear:both;"></div>


なお1行目最後「background」のカラーコードを変更すれば、背景色も自由自在です。

しいたけの世界にようこそ

f:id:tawashix:20170423030119j:plain

お帰りください


カラーコードは下記サイトなどを参考にしてください。

おわりに

はたしてLINE風の表示にどれほどのニーズがあるのかは分かりませんが、よければ気分転換にでもご利用ください。

不明な点などあればコメントなどでご質問ください。ただCSSを勉強しはじめて5日目なので、あまり高度な内容だと「分かりません」という解答になる恐れがあります。


……この機会にほしい物リストを作って、CSS関係の本やらを入れてみました。

もし神が振り込め詐欺をしてきたら(パスカルの賭け)

思考実験 ネタ ショートショート もしもシリーズ

こんばんは、夜中たわしです。

みなさんは神の存在を信じていますか?

本日は「パスカルの賭け」という、神を信じたほうがいいんじゃないの? という説があるので紹介します。

f:id:tawashix:20170419222644j:plain

パスカルの賭け

はじめまして突然失礼します

え? あなたは!?

神です

神!?

はい

バカな! 神はニーチェが死亡を確認したはず……!

いや、確かにニーチェ君は「神は死んだ」って言ったけど

多分そういう意味じゃないよ。実際私、存命してるし。

で、その神様が無料チャットアプリ経由で何の御用ですか?

実は、率直に言うと天国の運営資金に困っていて

寄付をお願いしたいのです

はあ

つきましては、近くのコンビニでiTunesのポイントカードを買ってきてくれませんか

1万円のやつ

いやいやいや

払うわけ無いでしょう

明らかに詐欺ですやん!

もちろん一方的に寄付を求めるわけではなく

寄付いただければ死後の天国行きを約束しますが?

いや、だから信用できるわけないじゃん!

まあすぐに信用いただけるとは思っていませんでした。

ひとつ「パスカルの賭け」という話をしましょう

パスカル君はご存知ですよね

「人間は考える葦である」とか言った人でしょ

そう、そのパスカル君が考えた「パスカルの賭け」という思考実験を元にした話をちょっとしましょう

まず私が本当に神であるケースと、私は神じゃなくて単なる詐欺師だというケースの2パターンが考えられますよね

うん

あなたが寄付してくれた場合、私が本当に神ならば、たったの1万円で天国行きが決定します

一方私が詐欺師だったら、あなたは1万円損をします

ここまではいいですね

はい

じゃあ次にあなたが寄付しない場合

私が神ならば、あなたは死後永遠に地獄の業火で焼かれることになります

!?

私が神でなければ、1万円は失わずに済みますが

ああ、あの時寄付しなくて本当によかったんだろうか?

まさか地獄行きが決まってしまったのか……?

と、死ぬまでもやもやしながら暮らすことになります

たった1万円のために

……

もう合理的に考えればお分かりでしょう

神を信じれば良くて天国、悪くてたった1万円の損

神を信じなければ良くて1万円が浮くだけ、最悪は地獄の業火

さあ、どうされます?

……

正直、この条件で神を信じる方に賭けないのはどうかしてますよね

わかった

1万円くらい、払ってやるよ!

f:id:tawashix:20170423045023j:plain


何だ今のスタンプは? これが無償の、いや有償の愛か……!?

しかし結局、払ってしまった。どう考えても詐欺なのに。

数日後

よう、突然すまんな

ふぁっ!? ガネーシャ? インド神話の……?

今日はあんさんにお願いがあって来たんや

まさか

ちょっとわしに融資してくれへんか

iTunesカードで

ちょうど数日前に、神を名乗る人に同じことを言われたんですが

関係者の詐欺師の方ですか?

神? 知らんなあ

……

ちなみに融資したら私にはどんなメリットが?

もちろん、何十倍にもして金を返してやるわ!

融資しなかったら?

お前の顔も、象にするで

そんなあ

iTunesカードが嫌だったら、ワシが登場してる本「夢をかなえるゾウ」を買ってくれてもええで

はいはい、わかりましたよ……!

f:id:tawashix:20170423045330p:plain


また1万円振り込んだ上に、本まで買ってしまった。

しかしこの本を買って、奴にメリットはあるのか?

そしてあのスタンプ、流行っているのか……?

数日後

あの

今度はエジプト神話の方ですか……!

はい。死の神です。

払います

f:id:tawashix:20170423045347p:plain

数日後

よろしくお願いします

ヴァルキリー……北欧神話ですね!

アイコンが怖いです

寄付してくれないと、即刻ヴァルハラ送りにします

数日後

たのもう

ギリシャ神話の最高神が何用ですか

寄付してくれないと、雷で全宇宙を破壊します

あの、もう寄付はしますけど

最近いろんな神話の神様から寄付を求められてるんですが

別の神を信じてても大丈夫なんですか?

え? 普通に駄目だけど?

今後他の神に寄付したりしたら、罰するよ

ガチで

え、え、えーーーっ


実在する神が、他の神を信じた時に怒ってきちゃう神だったらもう駄目じゃん!

もう今後払うのはやめとこ。

数日後

ふんぐるい むぐるうなふ くとぅるう るるいえ iTunesカード ふたぐん

話の通じなさそうなのがキターー!!


というか、たまたま下界に来たからノリで信じてみたらここまでカモにされるとは……。

もちろん全員詐欺師だし。

あいつら全員地獄送りにしてやろ。

まったく……ちょっと早いけど、そろそろ終末でも引き起こそうかなあ。

おわりに

みなさんも詐欺にはお気をつけください。


参考にした本

画像利用元

かわいいフリー素材集 いらすとや
ホビヲノエ
ワルキューレ - Wikipedia
ゼウス - Wikipedia
クトゥルフ - Wikipedia

関連記事

もしメロスが定期的な進捗報告を求められたら - 夜中に前へ

思考実験「トロッコ問題」を全力で説明する/5人のために1人を犠牲にできるか? - 夜中に前へ

「ホビヲノエ」のLINEスタンプをどうしても買ってしまう - 夜中に前へ

ダイソーの「レンジでかんたん!!薄焼きたまご」を使ってみた

料理 食べ物

こんばんは。夜中たわしです。

今回紹介しますのは、「レンジでかんたん!!薄焼きたまご」です。

その名の通り、レンジで薄焼きたまごを作ることができる商品です。

f:id:tawashix:20170416214857j:plain

前回(5ヶ月前)に紹介した「レンジで簡単!!だし巻きたまご」は、簡単(楽とは言っていない)と言った感じでしたが、今回はどうでしょうか。

こちらは商品名の「かんたん」がひらがななので、期待が持てるんじゃないでしょうか

前回と同様、ダイソーで100円で購入しました。

形状

f:id:tawashix:20170416214908j:plain

開封するとこんな感じです。

写真だと分かりづらいかもしれませんが小さな突起がたくさんついており、ご飯のつきにくいシャモジに似ています。

使ってみた

それではやってみます。

玉子を大さじ2杯入れる

f:id:tawashix:20170416214926j:plain

パッケージの指示通り、よく混ぜた玉子を大さじ2杯入れます。

ただ大さじ2杯と言われたので大さじを使ってやってみましたが、白身部分がドゥルンドゥルンしてこぼれ落ち、すりきり一杯まですくえません。

なので結局フィーリングで入れることになります。

電子レンジで加熱

電子レンジで加熱します。

500Wなら20秒、600Wなら15秒とのことなんですが、その通りやってもまったく固まりませんでした。

どうやら我が家の電子レンジでは600Wで30秒ほど必要なようです。うちの電子レンジ、おかしいのかなあ……。

f:id:tawashix:20170416215029j:plain

レンジから出すとこんな感じです。

完成!

f:id:tawashix:20170416215036j:plain

容器の特殊形状のおかげでしょう。箸で簡単に剥がすことができました。

いきなり4枚完成しているように見えますが、当然4枚作るには4回作業する必要があります。

M寸の玉子2個を使って、ちょうど4枚作れました。


f:id:tawashix:20170416215216j:plain

持ち上げるとこんな感じです。撮影難しい。


さてこれをどうやっていただくか。

パッケージによると錦糸卵にしたり、おむすびに巻いたりできるとのこと。

f:id:tawashix:20170416215258j:plain f:id:tawashix:20170416215301j:plain

そこで私はパンに適当なものと一緒に挟んでサンドイッチ的なやつにして食べました。

レタスも用意しとけばよかった。

簡単だ!

本当に簡単にできてしまいました。失敗しないし、油も使いません。

何より、容器が洗いやすい!! 間違いなくフライパンを洗うより楽です。

前回のだし巻き卵は微妙でしたが、これは普通に繰り返し使えますね。当たりです。

難点があるとすれば、玉子のサイズによっては最後に半端なサイズのやつができるってことくらいでしょう。

おわりに

なんやかんや調べていたら通販で業務用の薄焼きたまごを売っているのを見つけて驚きました。

(これの方が簡単ですね)

関連記事

ダイソーの「レンジで簡単!!だし巻きたまご」を使ってみた - 夜中に前へ

【手抜きレシピ】まずまず簡単! ささみのチーズ焼き(包丁いらず) - 夜中に前へ

麻婆玉子の素で作る麻婆玉子丼があっという間に作れてうまい! - 夜中に前へ

スマホRPG『アナザーエデン』がほぼ『クロノ・トリガー』の続編だった

ゲーム

こんばんは、夜中たわしです。

今回は『クロノ・トリガー』『クロノ・クロス』を知っている人向けの記事です。

ご存知の通りクロノ・トリガーは私の大好きなゲームベスト3にランクインしているわけですが、そのクロノ・トリガーの制作者が関わっているスマホRPGが本日4月12日配信開始されました。

※追記:当初クロノ・トリガーの制作陣と記載していましたが、過剰な表現だったので訂正しました

f:id:tawashix:20170412212154p:plain

タイトルは『アナザーエデン 時空を超える猫』です。

シナリオと演出が加藤正人さん、音楽が光田康典さん(追記:担当されたのはオープニングのみ)。クロノ・トリガーと同じです。

そして基本無料でシングルプレイ専用のスマホRPGという思い切ったコンセプト。

普段スマホゲーはほぼ遊ばないんですが、そりゃ試しにやってみますよね。

そしたら、驚くほどクロノ・トリガーでした。

アナザーエデン 時空を超える猫

副題からも分かる通りタイムトラベルもので、古代、現代、未来を旅します。

この時点で設定がクロノ・トリガーやん! やったー! と思ってたんですが、クロノ・トリガーなのは設定だけじゃありませんでした。

クロノ・トリガー?

とにもかくにも画像をどうぞ。

あ、当たり前ですがネタバレ注意です。

カーテンを開けて主人公を起こす

f:id:tawashix:20170412211354p:plain f:id:tawashix:20170412211400p:plain

もう、いきなりクロノ・トリガーのオープニングそのものじゃないですか。

これだけでテンション上がりましたよね。

属性「天」「冥」

f:id:tawashix:20170412211449p:plain

パラメータに「天」があります。

写真撮ってませんが「冥」の人もいました。

ルッカ?

f:id:tawashix:20170412211523p:plain

ルッカ似の人に見えますが、これは考えすぎかもしれません。

かいてんぎり

f:id:tawashix:20170412211538p:plain

主人公の固有技がクロノも持ってた「回転斬り」だ!

カエル!

f:id:tawashix:20170412211545p:plain

カエルやん!! これは間違いないでしょう。

名前は? カエル? グレン??

サイラス!?

f:id:tawashix:20170412211552p:plain

な!? サイラス!!?

お前もカエルになってたんか!!

ラッキーダン?

f:id:tawashix:20170412211604p:plain

クロノ・クロスのラッキーダンみたいなやつがサイラスと話しておられる。

時の最果て?(追記)

f:id:tawashix:20170413090829p:plain

時空の狭間っていう場所が登場したんですが、このバケツってラヴォスのやつじゃないですか……?



……と、まだ半分も進めてませんが、こんな感じです。

ファンサービスがスゴイってことはわかりました。

ゲームシステム

これだけじゃあんまりなので、ちょっとゲームシステムなど。

マップ

f:id:tawashix:20170412211638p:plain

スマホゲームにしては珍しく、歩き回れます。普通にRPGです。

操作感はかなり自然。ヴァルキリープロファイルみたいに軸の上を歩き回る感じなんで、直感的に操作できます。

村人など、結構離れていてもタッチで話しかけられるのは楽です。

スマホで操作しやすいよう、かなりチューニングしたことと思われます。

戦闘

f:id:tawashix:20170412211721p:plain

戦闘画面はこんな感じで、フィールドマップがそのまま戦闘に移行します。

基本ランダムエンカウントで、強い敵はシンボルが歩いてます。

コマンド式で基本的にリアルタイム要素はありません。

右側の2人は待機状態で、ターン経過するとHP、MPが回復します。

また戦闘中に入れ替えを行うこともできて、飛び出してきたキャラは何か固有の補助技を出します。

あと気に入ったのは、時代によって戦闘BGMが変わるところです。

通常戦闘のBGMが複数あるゲームは、いいんだよな~。

成長要素

f:id:tawashix:20170412211750p:plain

キャラごとにアビリティボードというものがあり、レベルが上がると手に入るAPというポイントを使って、パラメータ強化やスキル獲得ができます。FF10のスフィア盤みたいなものですね。

あと武器防具は、敵を倒して得られる素材を店に売ることでラインナップが増える方式です。

課金要素

f:id:tawashix:20170412211804p:plain

課金要素のメインはキャラクターのガチャです。


f:id:tawashix:20170412211809p:plain

初回は無料のチケットで召喚できますが、次からは「クロノスの石」という課金アイテムが必要です。


f:id:tawashix:20170412211817p:plain

なお「クロノスの石」は課金せずとも、ゲームを進めて実績を解除していけば手に入ります。

クロノスの石を使用するのはガチャと戦闘不能後のリトライ時くらいのもので、時間制限などもなくずっと遊べます。

本当に、ほぼ普通のRPGです。ガチャ以外は。

現時点では課金しなくても十分遊べています。

ただちょっと、レアリティの高いキャラがいないと終盤きつくなるであろうビジョンが見え初めていますが、ハードモードだと考えれば何も問題ないのでは、ないでしょうか。

おまけ

f:id:tawashix:20170412211922p:plain

彼女はおそらくクロノ・トリガーで言うロボのポジションの人です。おそらく。

※CV:釘宮理恵

おわりに

f:id:tawashix:20170412212236p:plain

ということでこの『アナザーエデン』。もともとクリアするか飽きるかしてから記事にしようかと思っていたんですが、カエルが出てきてしまったため我慢できませんでした。

あまりスマホゲームは遊んできてないですが、現行のスマホゲームの中では最もRPGっぽい(?)作品だと思います。

特にスマホなのにかなり操作しやすいのに驚きました。甘く見てました。

スマホで遊びやすいよう極限まで最適化したクロノ・トリガー(ガチャもあるよ!)って感じですね!

それではまた未来でお会いしましょう。

アナザーエデン 時空を超える猫
アナザーエデン 時空を超える猫
無料
posted with アプリーチ

関連記事

『ニーアオートマタ』感想/ゲームシステムと演出が見事に調和した傑作(ネタバレほぼなし) - 夜中に前へ

コミュ力が超必要な良質アクションパズル『スニッパーズ』感想(クリア済み) - 夜中に前へ

【感想】「ニューダンガンロンパV3」という劇薬/結末に怒り狂うプレイヤーの心理(ネタバレ配慮あり) - 夜中に前へ

『文学としてのドラゴンクエスト 日本とドラクエの30年史』感想

読書 ゲーム

こんばんは、夜中たわしです。

こんな本を読みました。

f:id:tawashix:20170411222617j:plain


『文学としてのドラゴンクエスト』です。

はい。ジャケ買いです。

私はドラクエ1~9までをクリアしています(10はオンラインのため見送り)。

こんなもん、見かけたら買うでしょう。

なお本記事は、当然ながらドラクエのネタバレが含まれます。ご容赦ください(特にドラクエ3)。

文学としてのドラゴンクエスト

本書にはドラクエ1から現時点での最新作であるドラクエ10までについて、その制作背景、時代性、コンセプトなど、開発者である堀井雄二さんの考え、狙いについてフォーカスして分析されています。またドラクエ開発以前の堀井さんについても触れられていました。

何作かドラクエを遊んでいれば面白く、懐かしさを感じて読めると思います。

1作ごとの深掘りには若干物足りなさを感じましたがそれでも面白い!

ドラクエ1~3(通称ロト編)の構造の巧みさ。

ドラクエ4では、AIの実装によりキャラクターに自我が与えられたこと。

ドラクエ5の人生を、人間を描いた物語としての秀逸さ。ビアンカ、フローラどちらを選ぶかで多くのプレイヤーを悩ませた、あの没入感。

などなど、「あー、そうなんだよなー」と頷く部分がいくつも。

好きなゲームの物語の構造や、システムの狙いについての分析を読むのって楽しいなあ。

ドラクエ3のラストについて

本書で特に印象に残ったのは、ドラクエ3のラストについての分析です。

ドラクエ3のエンディングは、上下2つの世界をつないでいたギアガの大穴が閉じられ、主人公が上の世界に戻れなくなる、そして「ドラクエ1」に話が繋がるというものです。

非常にインパクトがあり、プレイヤーの評価も高いです。

著者もこのシナリオの巧妙さに言及しており、上の世界を「現実世界」下の世界を「フィクション世界」と捉え、ドラクエが「現実」から分離し、『ドラクエ1』という新しい時代を切り開くフィクションに続くものとして閉ざされることでハッピーエンドになるのだ、と分析しています。

(なお、上記が村上春樹の『世界の終りとハードボイルド・ワンダーランド』と対比して分析されていますが、申し訳ないことに私は村上春樹は読んでいないため、そちらについては特に何も言えません……)

ここは読んでいて非常に面白かった!

ですが私は知っているのです。

ドラクエ3のあの結末は、多忙を極めた堀井雄二さんがエンディングで世界中の人の祝福のセリフを用意することに耐えられず「わかった! 元の世界閉じちゃえ」という発想に至ったためだということを。

おわりに

まああの、ひとつ言っておきたいのは……どういった背景で作られたものであろうと、いいものはいいんだなー、ということです。はい。

そして本日発売日が決まって、予約も開始されたドラクエ11の発売が超楽しみだってことです! うひょーっ!!

関連記事

RPG好きなら人生も楽しめる?『人生ドラクエ化マニュアル』 - 夜中に前へ

スクエニの公式ショップ「ARTNIA」に行ってきた - 夜中に前へ

スポンサーリンク