2023年11月4日土曜日

Assassin's Creed/アサシンクリード何を買えばいい?発売の順番を知りたい人用

 ゲームの感想を書く前にアサシンクリード何を買えばいいのかを纏めます。
PS4の購入についてまとめますが基本的なセット売りは同じはずです。

ひとまずは公式アサシンクリードポータルサイト
https://www.ubisoft.co.jp/ac-portal/」をちらっと見てください。

上記が主なメインシリーズです。
他にも携帯向けのゲームなどがあるにはあるのですがサービスを終了してたりするので紹介はしません。全てを知りたい人はWikipediaを見てください。

公式サイトで何を買えばいいか分かる場合はこのページに留まる必要はありません。
これから説明しますがパックやセットに過去作本編が含まれてたり正直めちゃ面倒です。

シリーズ一覧と販売順番

2007年11月29日■無印(1st)【Windows/PS3/Xbox360】
2009年11月17日■ブラッドライン【PSPortableのみ移植なし】
2009年11月17日■Ⅱ
2010年11月16日■Ⅱブラザーフッド
2011年11月15日■Ⅱリベレーション
2012年10月30日■Ⅲ
2012年10月30日■Ⅲレディリバティ【PSVita/移植あり】
2013年10月29日■Ⅳブラック フラッグ
2014年11月11日■ユニティ
2014年11月11日■ローグ
2015年04月21日■クロニクル
2015年10月23日■シンジケート
2017年10月27日オリジンズ
2018年10月05日■オデッセイ
2020年11月10日■ヴァルハラ
2023年10月05日■ミラージュ

以上です。
発売順もこの通りですので遊ぶならこの順番が個人的にはオススメです。
と言うのも過去作ほどフリーランの地獄のような判定に苦しみます。

後半の作品をやってからⅡなどやったら操作の不自由さ心がやられます。
システムが徐々に改善されていく方が心に優しい。

あくまで…あくまでも個人的な感想ですが少なからず順番にⅡから順に遊んでいますが「Ⅱの競争ミッション」などはコントローラー地面に叩きつけたくなりました。

Ⅲからある程度フリーランに調整が入ります」がそれでも…ry。


何を購入すればいいのか

0.上記全てのシリーズを購入する前提で書きます。
※シーズンパスで過去作を遊べる対象があるため

1.まずPS4では「無印」と「ブラッドライン」は遊べません諦めましょう。

2.Ⅱは「エツィオコレクション」を購入すればOK

エツィオコレクションは【Ⅱ/Ⅱブラザーフッド/Ⅱリベレーション】のセットです。
現代にいる主人公は変わりませんがアニムスに接続する対象が「エツィオ・アウディトーレ」というキャラの生涯を3シリーズによってまとめてあります。

3.Ⅲ(&レディリバティ)は下部に記載の「オデッセイ」のゴールドかアルティメットを購入すればOK

ちなみにオデッセイのソフトの中で選択するのではなくて特典の権利を得るだけなので
「オデッセイゴールド(アルティメット)購入者用:アサシンクリードⅢ」を別途DLする必要があります。
さらに注意する必要なのは単体でもⅢが購入できる点です。
単体Ⅲと特典ⅢのDLページは違うので重複購入しないように注意。

4.[単体]Ⅳブラック フラッグを購入すればOK

Ⅳにはシーズンパスがありますが、「ゴールド!」みたいなパック売りは現状されていません。
単純に単品で「Ⅳブラック フラッグ」です。

■ⅣのストーリーDLCについて…
1.無料DLC「アヴリーンミッション」
トロフィー等実績なしの2時間程度の超オマケストーリーです。
超短いので味わって遊んでください。

2.有料DLC「自由の叫び」
内容的にはⅣのシステムを一通り遊べる有料体験版みたいなものでした。
トロコンしても1日で終わります(7~8時間)程度です。

自由の叫びは遊ぶ方法は3種類あります。
・シーズンパスを購入する
・DLC「自由の叫び」を購入する
・完全個別品「自由の叫び」を購入する(本編不要でDLCの内容を遊べる)

どの購入方法でも内容は同じです。ただ、完全個別品がたまに割引販売しています。現状自由の叫びDLCの方は割引は見たことが無いのでまぁタイミング次第で個別品を買ってもいいかもしれません。

5.[単体]ユニティを購入すればOK

※過去のゴールドエディションはもう購入出来ません。
※また、アサクリに珍しくシーズンパスが存在しません。
・無料DLC「デッド キング」ユニティのその後の話です。クリア後どうぞ。
・有料DLC「革命の秘密パック」ミッション他
・有料DLC「革命武装パック」武器パック(ミッション付きと名前似てるので購入時注意)
・有料DLC「ヘリックス・クレジット系」いわゆるゲーム内課金です。しかも期限付きなのでよほど魅力を感じない限りは不要です。


PS4のローカライズに関して○と×の決定ボタンが入れ替わる為「Ⅳ→ローグ→ユニティ」の順番が良いかも。
ローグと違いシステムが一新されます。過去作と違い入れる建物がかなり増えます。

6.[単品]ローグを購入すればOK

DLCもないみたいなので単純に単品


ユニティとローグは同日発売で話の繋がりが少しあります。
どちらを先にプレイしても良いと思いますが操作性を考えると「ローグ→ユニティ」の方が良いかも。

システムは限りなくⅣといって良いです。
アニムスの話的にはⅢとⅣの前の話になりますが現実パート的には建築中の壁が直ってたりするのやはり順番発売順が良いです。

7.クロニクル(全入り)を購入すればOK

「クロニクル:ロシア・インディア・チャイナ」の個別売りもあるので間違わないように


Ⅱの主人公エツィオの老体時に出てきた女の子がチャイナの主人公として出てきます。
ちなみに2Dアクションゲームです。3Dゲームを期待してる人は注意。

 2Dですがアサシン系アクションが多数ありアサシンクリードをうまく2Dゲームにまとめてあります。
キャラとステージは3Dで作られており画面前後の移動やステージを90度曲げたり凝っています。

8.シンジケートは任意でゴールドエディションを購入すればOK

ゴールドに過去作は含まれてないので興味があればゴールド、不要なら単体で

9.オリジンズは任意で別エディションを購入すればOK

※内容全部楽しむならゴールド買って置けばOK
・デラックス: ミッション「海の急襲」+装備+アビリティptx3
・ゴールド:上記+シーズンパス

10.オデッセイはゴールド以上を購入すればOK

・デラックス:本編+アイテム類+ブースト
・ゴールド:本編+シーズンパス+過去作
・アルティメット:デラックスエディション+ゴールドエディション
※シーズンパスに過去作「Ⅲ・Ⅲレディリバティ」が含まれます

11.ヴァルハラは任意で別エディションを購入すればOK

・デラックス:本編+装備類
・コンプリート:本編+装備類+シーズンパス


このゲームはアサシンの過去を遡って深く探っていくゲームです。
故にシリーズ的には「親から次の子供の話」よりも「子供から親の若い頃の話」へ思いだして行く流れが多いです。

ケンウェイ(アサシン:4主人公)
↓子供
ヘイザム(テンプル騎士)
↓子供
コナー(アサシン:3主人公)
ーーー
ヘイザム(テンプル騎士)
|仲間
シェイ(テンプル騎士(元アサシン):ローグ主人公)
↓暗殺
シャルル・ドリアン(アサシン)
↓子供
アルノ(アサシン:ユニティ主人公)


余談

アサクリに限りませんが、基本的にシーズンパスが入っているものがおすすめです。
シーズンパスは本来発売直後に購入して後から出るDLC分も内包した先払いの仕組みみたいなものです。
現状はもうアップデートはないのでシーズンパスを購入すると特別な例外でもない限りはDLC全てを楽しむことができます。

そういう意味ではアサクリはパックにシーズンパスを含まないセットがあるので注意してください。

困ったら全部一番高いのを購入すれば抜けは無いです。

ーーーここから下は完全に超余談ですーーー

システム面の話

■ⅢのDLC限り
鳥になって高低差を無視して移動でき鳥になってる間は警戒されない。
アサクリ史上最強の移動手段過ぎて暫く忘れられなかった。
これを緩和したのがシンジケートのロープでの移動。

■Ⅳ~
宝箱を蹴り開ける様になり早く宝箱を開けれるようになった

■シンジケート

・サブ条件を表示し続ける様になった
シンジケート前までの作品はサブ条件が数秒で消えていたがサブ条件が出たままになる様になった。プレイ中は画面中央に視線が誘導されている為、過去作で何度かクリア後にフルシンクロ条件を満たせていない事がありかなり不満だったのが解消された。

・強制ジャンプが無くなった
「R2+×」でジャンプを強制していたが無くなった。
利点もあるが暴発事故のストレスの方が高かった。
また、イーグルダイブ時のあらぬ方向へジャンプして落下死する事が無くなった


・イーグルダイブが固有ボタン
イーグルダイブ可能場所で【方向キー+R2+○】を押さない限りイーグルダイブしないようにされたおかげで上ったが少し下に戻りたい時○ボタン押してシンクロが暴発しなくなった。

・昇降機が不要になった
ロープでいつでも壁を素早く登れるようになった。
かなり高い塔なども簡単に素早く登れる。

・高所建物の間をロープ移動
ユニティでは建物の間にロープを付けまくっていて、外観が損なわれていたかもしれない。
でも自身で建物にロープを掛けて移動出来る様になった。
高い方から低い方へなら方向キーだけでまぁまぁの速度で移動でき楽。
過去作ではイーグルポイントから見える屋根上の目的地へ移動する際はイーグルダイブして地上を移動してまた家を上るという「垂直落下、水平移動、垂直で上る」動作だったが今作から斜めに高所から直接ロープを張って移動できる。

・推理時のデータベースにアクセス表示緩和
過去作ユニティでは「殺人ミステリー」という名前であったが今作では「凶悪犯罪」という名前で同じように推理していくパートがある。
ユニティでは証拠品を見つけて確認している際に説明文の上にデータベースを確認と表示されて全然内容が読めずデータベースを一度表示しても無限に出るのであまりにも邪魔過ぎたがそれが緩和されている。


■定期的に表れる地獄部分
・Ⅱ:競争、飛行操作、戦車
・ユニティ:競技会

全体的にイライラしてしまうのは難しいからもにゃるというよりもミスしてリトライするのはいいが他に問題があって
・ミス部分まで戻し作業が長い(チェックポイントがない・チェックポイントまでが遠い)
・ロード時間が長すぎる(直ぐにリトライ出来ない)
・ミスした瞬間にチェックポイントセーブされる時

結果的に
難しい箇所で数十秒プレイしてやり直しのロードに数分待たされるのがキツイ。
条件達成時にチェックポイントを即セーブされるのは良いが条件未達成時に即チェックポイントがセーブされて結果的にメモリーの初めからやらなければならない場合、戻し作業をやってると精神がやられる。

地獄になりやすい系は「時間制限」「ノーダメージ」「倒さない」「見つからない」
フリーランのシステムは視線によって何処を掴むか決まるのに一体どこを対象に取るか視覚的アシストが無い。そのためプレイヤーが思っている動作を行わない。
時間制限+フリーラン条件は特に精神を病みやすい。

2023年8月15日火曜日

タグの意味とデザインタグ

タグの意味とデザインタグ

タグ意味要素
h1大見出しブロック要素
p段落ブロック要素
ulとli箇条書きブロック要素
table表(一覧)ブロック要素
div意味を持たないブロック要素
span意味を持たないインライン要素

さて、少しだけピックアップしましたが、例えばタイトルなどはh1タグを使います。
段落を区切る場合はpタグ、箇条書きならulタグを使います。

tableタグはデザインで避けられがちでdivで無理やり表にしている人もいますがある程度のデータ量があるならばそれはtableタグで纏めるべきです。

単一の情報を並べるだけなら箇条書きだし、2つ以上の情報の掛け合いによって意味をなすデータであるならば表であるべきです。

htmlは意味のあるタグはその意味の通りに使おう。
というのが前提の元に考えられています。

なので基本的に特定のタグを使う場合は「~タグ」は「こう使うべき」と明確に決まっています。

我々がデザインする上で実はデザインタグというものは存在していません
現在デザインするのにdivが意味を持たないブロック要素であるからこれを使っています。

また、現在はCSS(Cascading Style Sheets/ カスケーディングスタイルシート )で文章と装飾は分けるのを基本にしています。
同様にjs(javascript)で動的操作や動的機能を分けるのを基本とします。

こうする事で、本来の『情報』と『デザイン』と『機能』を分離して考える事が出来ます。
ウェブを巡回しているクローラーなどは正しい意味の通りにタグが使われている事で正しく文章の内容、文章の重要度や順序を正しく判定する事ができます。

このように整理されてきた結果html上で直接デザインに影響するcenterタグなどいくつかのタグは徐々に非推奨や廃止の方向に向かっています。

これらは結果的にメンテナンス性を上げ、人間にとっても見やすい表示になると考えられています。

ブロック要素とインライン要素

ブロック要素というのは、コンテンツの内容が一つの塊という事です。
基本的に幅100%で左右に自動改行される要素です。
(まぁ左右改行というよりどちらかと言えばこの範囲が100%で両端まで潰すために上下に押し出すイメージです。)
ブロックですので、高さや幅を指定する事が出来ます。

逆にインライン要素というのはコンテンツの一部に配置される要素であり、文中の一部を強調表示したりする様に情報の途中に一部変化を加えるものです。
ですのでインライン要素では改行要素は付きませんし高さや幅を指定出来ません

divとspanの違い

まず根源的な話をすればこの二つの違いは
「div=display: block」
「span=display: inline」
のたったこれだけです。

どちらも意味を持たないタグであるため、divにdisplay: inlineした場合はspanと同じ様に扱えます。
ただ、このように設定されているという事は、divはコンテンツの一つのデータのブロック単位である事をさしており、逆にspanはコンテンツの一部の変化に使うべきものです。

divにdisplay: inlineを指定するなら最初からspanを使うべきであり、逆にspanにdisplay: blockを指定するなら最初からdivを使うべきです。

つまりどちらも意味を持たないタグとはなっていますが
・divはコンテンツのブロック単位で使うタグ
・spanはコンテンツの一部で使うタグ
と言う最低限の意味を持っている事になります。

div内のdivを中央揃え

内側のdivに「style="width:100px;margin:0 auto;"」を追加するだけで良いです。
幅は任意に変えて下さい。これは他のブロック要素も同様です。

仕組みとして二つの要素があります
・「幅を指定」
・「左右の余白を自動調整」

divは幅100%がデフォルト設定です。
ですので幅を指定して左右に余白を作ります

インライン要素の場合、たとえばテキストなどは外側の親要素に「text-align:center; 」を指定しますがdiv内のdivを中央に寄せる場合は違います。

<div><span>内容</span></div>
である場合は
<divここにtext-align:center指定><span>内容</span></div>

<div><div>内容</div></div>
の場合は外側のdivに指定は不要です。

<div>余白自動調整<divここに幅指定とmargin:0 auto>内容</div>余白自動調整</div>
内部のdiv自身が左右の余白を自動調整することで結果的に中央にコンテンツが配置されます。


ボックス構造

ボックス構造は以下の様になっています

マージン
枠線
余白
コンテンツ
余白(padding)
枠線(border)
マージン(margin)

コンテンツとそれを囲む枠線は認識しやすいと思います。
・余白は枠線とコンテンツの間部分:無色透明
・マージンはこのボックスと外側の間部分:無色透明

指定指定範囲/指定方法
margin・値が1つの場合……「上下左右」
・値が2つの場合……「上下」「左右」
・値が3つの場合……「上」「左右」「下」
・値が4つの場合……「上」「右」「下」「左」
margin:10px;
margin:10px 10px;
margin:10px 10px 10px;
margin:10px 10px 10px 10px;
margin-top上のマージン(余白)を指定
margin-bottom下のマージン(余白)を指定
margin-left左のマージン(余白)を指定
margin-right右のマージン(余白)を指定
padding・値が1つの場合……「上下左右」
・値が2つの場合……「上下」「左右」
・値が3つの場合……「上」「左右」「下」
・値が4つの場合……「上」「右」「下」「左」
padding:10px;
padding:10px 10px;
padding:10px 10px 10px;
padding:10px 10px 10px 10px;
padding-top上のパディング(余白)を指定
padding-bottom下のパディング(余白)を指定
padding-left左のパディング(余白)を指定
padding-right右のパディング(余白)を指定
border-width線の太さ
・値が1つの場合……「上下左右」
・値が2つの場合……「上下」「左右」
・値が3つの場合……「上」「左右」「下」
・値が4つの場合……「上」「右」「下」「左」
border-width:10px;
border-width:10px 10px;
border-width:10px 10px 10px;
border-width:10px 10px 10px 10px;
border-top-width上線の太さを指定
border-bottom-width下線の太さを指定
border-left-width左線の太さを指定
border-right-width右線の太さを指定
border-style線の太さ
・値が1つの場合……「上下左右」
・値が2つの場合……「上下」「左右」
・値が3つの場合……「上」「左右」「下」
・値が4つの場合……「上」「右」「下」「左」
border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

border-style: dotted solid;
border-style: hidden double dashed;
border-style: none solid dotted dashed;
border-top-style上枠線にスタイルを指定
border-bottom-style下枠線にスタイルを指定
border-left-style左枠線にスタイルを指定
border-right-style右枠線にスタイルを指定
border-color線の色
・値が1つの場合……「上下左右」
・値が2つの場合……「上下」「左右」
・値が3つの場合……「上」「左右」「下」
・値が4つの場合……「上」「右」「下」「左」
border-color: red;
border-color: red #f015ca;
border-color: red rgb(200,50,60,.8) green;
border-color: red yellow green blue;

■色の指定方法
・「red、yellow、green、blue」等
文字で指定する

・「#F00」「#FF0000」等
#で指定する場合RGBの順序で#000000~#FFFFFFまで
#FA0と指定した場合2桁は同じ指定となり#FFAA00となる

・「rgb(255,100,10)」等
上記と同じでRGB順序でrgb(0,0,0)~rgb(255,255,255)
border-top-color上枠線に色を指定
border-bottom-color下枠線に色を指定
border-left-color左枠線に色を指定
border-right-color右枠線に色を指定

例えば「margin:10px 10px;」と指定した場合
つまり「margin:[上下10px余白] [左右10px余白]」と指定されます。

2023年7月17日月曜日

viewportに挑戦した話

今回はタイトルの通りviewportに挑戦した話です。
アクセス解析は忍者ツールズの埋め込みとGoogle Search Consoleを使っています。
Google Search Consoleはサイトのダメ出しもしてくれます。

スマホでみても拡大すりゃいいんじゃないと思っていたのでサーチコンソールのモバイルユーザビリティが全て警告なのをしばらく放置していたのですがついにメスを入れる事にしました。

具体的には
ページがモバイルで利用できない理由
以下の問題があるページでは、良好なページ エクスペリエンスが実現されません。
  • テキストが小さすぎて読めません
  • クリック可能な要素同士が近すぎます
  • ビューポートが設定されていません
  • コンテンツの幅が画面の幅を超えています
たぶん、単にサイトを作ってる人はこうなるんじゃないかなと思います。

問題1:テキストが小さすぎて読めません

現在推奨されてるフォントサイズはおおよそですが14px~18pxで自サイトでのサイズはだいたいが12pxなので確かに小さいのかと思ったのですが根本的な問題はそこじゃありません。
勿論フォントサイズを大きくすればこの警告は消せるのですがこんどはPCで大きくなりま過ぎます。

この警告が言いたいのはPC向けに作られている場合、スマホなどで表示するとコンテンツ幅で表示するので「サイトを開いた際に拡大しないと文字が読めない」これです。


問題2:クリック可能な要素同士が近すぎます。

これはほぼ上記に付随します。PC向けサイトを普通に作って入れる場合はそんなクリックし辛いとかはまずないです。
上記同様にこの警告が言いたいのは「サイトを開いた際に拡大しないとリンクエリアが小さくなりすぎて隣接するリンクが2つ以上あると押し間違いしちゃう」こんな感じです。

問題3:ビューポートが設定されていません

これは上記二つを解消するものです。
ビューポートを設定するとサイトに入った瞬間にスマホなどで適切な画面幅で表示されます。
タグを入れるとぱっと見は「最初からズームで表示されている状態」になるだけです。
ただこのビューポートを設定したこの状態は「この範囲がスマホ等の適切な見える範囲だよ」って意味です。

問題4:コンテンツの幅が画面の幅を超えています

これはビューポートを設定した時に「ウェブページが画面はみ出てる」って意味です。


問題1・2・3解決方法

これ自体は簡単です。
ビューポートタグを全てのページに入れるだけです。
ビューポートを設定すると画面スマホ等で見た時にその適切な範囲で表示されます。
するとフォントサイズが12pxでも十分に見える文字サイズですし、リンクも近すぎるっていう状態でもなくなります。

「ただしユーザーに拡大縮小させてはいけない」ので第四の問題となります。

問題4の解決方法

モバイルユーザビリティを凄く簡単に言えば「拡大縮小しないで見えるサイトにして」って事です。
さらに言えば幅400前後のサイトにしてって事です。

ビューポートタグを全てのページに入れて拡大縮小しないで見ようとすればコンテンツの幅がはみ出てますよね。それがダメなのです。

普通の幅固定のPCサイトであれば1000~2000pxとかの幅があると思いますがスマホでの場合はスマホのスタイルに書き換える。
具体的には

@media screen and (min-width:481px) {
.a{PC用すたいる}
}
@media screen and (max-width:480px) {
.b{スマホ用すたいる}
}

こんな感じです。
「@media screen and (max-width:480px) 」は最後に読み込ませます。
共通のスタイルを上書きする事が出来ます。
ただし空定義で設定を無効は出来ません。あくまでも上書きです。
もしもPCの時のみの設定がある場合は「@media screen and (min-width:481px) 」に居れればOKです。

スタイルシートは後に来るのが上書きです。
読み込みも後にする必要があります。