艦これHTML5化に伴いiPhoneやiPad等のiOS各種で艦これがプレイできるようになりました。
本ページではiPhoneやAndroidスマホにおいてブラウザ版艦これを全画面でプレイする方法を解説します。
(2022/04/28)
iOS15以降でのプレイ環境に対応した全画面化プレイ用スクリプトを作成しました。たまにタッチが効かない場所があるなどの現象が出ますが使ってみて下さい。
尚、スクリプトは今までの全画面化スクリプト(うこ@escapist_uco さん作成)のものに手を加えたものです。
iOS15以降のバージョンにおいてブラウザ版艦これがプレイできない(画面が真っ白で表示される)現象が確認されています。先にこちらの対処を行った後、本ページで紹介するブックマークレットを実行してください。
実際に外で艦これを全画面プレイしてきた感想はこちら！！！
外出先でiPhone使って艦これ全画面プレイしてきたよ！！in 神戸のスタバ
普通にブラウザから艦これログイン画面へアクセスしただけだと艦これプレイ画面が見切れてしまいますが、これをブックマークレットというもので解決できます。有志の方が作成したブックマークレットに感謝！！
尚、プレイ中にフリーズする場合がちょこちょこ報告されています。
重要なシーン（イベント攻略等）でのiPhone使用は控えた方が無難。
また、動作確認は【iPhone11 iOS15.4.1 + Safari】にておこなっています。
スマホでの艦これプレイ用に、ゲーム画面をブラウザの表示領域にフィットさせるブックマークレットを作りました。iOS11 SafariとAndroid Chrome68での動作確認済みです。ブックマークレットの設定方法は各々調べてください。 #艦これhttps://t.co/0h1wyH7ZcL
— うこ (@escapist_uco) August 17, 2018
目次
いきなりまとめ
１．ブックマークレット用スクリプトが記載されている以下のページにアクセス
javascript:(($,_)=>{const html=$.documentElement,gf=$.getElementById('htmlWrap'),gs=gf.style,gw=gf.offsetWidth,gh=gw*.6;let vp=$.querySelector('meta[name=viewport]'),t=0;vp||(vp=$.createElement('meta'),vp.name='viewport',$.querySelector('head').appendChild(vp));vp.content='width='+gw;'orientation'in _&&html.webkitRequestFullscreen&&html.webkitRequestFullscreen();html.style.overflow='hidden';$.body.style.cssText='min-width:0;overflow:hidden;margin:0';gs.position='fixed';gs.marginRight='auto';gs.marginLeft='auto';gs.top='-5px';gs.right='0';gs.zIndex='100';gs.transformOrigin='50%25 16px';if(!_.kancolleFit){const k=()=>{const w=html.clientWidth,h=_.innerHeight;w/h<1/.6?gs.transform=%27scale(%27+w/gw+%27)%27:gs.transform=%27scale(%27+h/gh+%27)%27;w<gw?gs.left=%27-%27+(gw-w)/2+%27px%27:gs.left=%270%27};_.addEventListener(%27resize%27,()=>{clearTimeout(t);t=setTimeout(k,10)});_.kancolleFit=k}kancolleFit()})(document,window)
下記サイトのものはiOS15以前またはAndroidに対応しています。
https://drive.google.com/file/d/1_Lc5b9XHOY4PiW7SXOo3NLiboSkWKi4E/view
２．ページに記載されている文字列を全てコピーする
(iOS15以降対応版の場合は1記載のスクリプトをコピーして下さい。)
３．適当なサイトをブックマーク
４．3で作成したブックマークの編集画面へいき、名前をわかりやすいものに変更する。アドレス欄のところには2でコピーしておいた文字列をペースト
５．PC版DMMサイトから艦これゲーム画面を表示
６．4で作成したブックマークをタップして実行
以上の流れです。
まずはブックマークレットの作成
艦これをiPhoneで全画面プレイするためにブックマークレットというものを利用します。
まずブックマークレットのスクリプト（文字列）を入手します。
手順としては、
１．ブックマークレットが記載されている以下のページにアクセス
javascript:(($,_)=>{const html=$.documentElement,gf=$.getElementById('htmlWrap'),gs=gf.style,gw=gf.offsetWidth,gh=gw*.6;let vp=$.querySelector('meta[name=viewport]'),t=0;vp||(vp=$.createElement('meta'),vp.name='viewport',$.querySelector('head').appendChild(vp));vp.content='width='+gw;'orientation'in _&&html.webkitRequestFullscreen&&html.webkitRequestFullscreen();html.style.overflow='hidden';$.body.style.cssText='min-width:0;overflow:hidden;margin:0';gs.position='fixed';gs.marginRight='auto';gs.marginLeft='auto';gs.top='-5px';gs.right='0';gs.zIndex='100';gs.transformOrigin='50%25 16px';if(!_.kancolleFit){const k=()=>{const w=html.clientWidth,h=_.innerHeight;w/h<1/.6?gs.transform=%27scale(%27+w/gw+%27)%27:gs.transform=%27scale(%27+h/gh+%27)%27;w<gw?gs.left=%27-%27+(gw-w)/2+%27px%27:gs.left=%270%27};_.addEventListener(%27resize%27,()=>{clearTimeout(t);t=setTimeout(k,10)});_.kancolleFit=k}kancolleFit()})(document,window)
下記サイトのものはiOS15以前のものに対応しています。
https://drive.google.com/file/d/1_Lc5b9XHOY4PiW7SXOo3NLiboSkWKi4E/view
２．ページに記載されている文字列を全てコピー
(iOS15以降対応版の場合は1記載のスクリプトをコピーして下さい。)
↓表示される文字列を全部選択しコピーしておきます。
３．適当なサイトをブックマーク
適当なページをブックマークします。ここではアップルのＷＥＢサイトをブックマークしておきました。
４．３で作成したブックマークを編集。わかりやすい名前に変更し、アドレス欄に先ほどコピーしておいたブックマークレットの文字列をペースト
ブックマーク編集画面にいきます。
名前をわかりやすいものに変更します。アドレス欄には２でコピーしておいた文字列をペーストします。
ペーストし終わったら保存しておきます。
これでブックマークレットの準備が整いました。
次は艦これのゲーム画面へいきブックマークレットを実行します。
PC版DMMサイトへアクセス
iPhoneにてDMMにアクセスすると通常はスマホ版ページに飛ばされます。
スマホ版ページからだと艦これのゲーム起動画面に行けません。また、検索しても書籍などがヒットするだけでゲーム自体はヒットしません。
なのでPC版のDMMへアクセスします。ログインしたのち艦これのページへ。
http://www.dmm.com/netgame/social/-/gadgets/=/app_id=854854/
スマホ版ページが表示される場合はPC版ページに切り替えます。
DMMページの最下部へ移動。
【PC版へ】を選択します。ゲームの艦これが表示されます。
ブックマークレット実行
艦これの開始画面に切り替わったらブックマークのところから先ほど作成したブックマークを押して実行します。
するとiPhone画面に収まるようになります。
普通に起動するだけだと見切れています。
横画面も上下が見切れます。
ブックマークのところから先ほど作成・編集したブックマークを押して実行します。
これで縦と横画面両方で見切れることなく表示されます。
まとめ
１．ブックマークレット用スクリプトが記載されている以下のページにアクセス
javascript:(($,_)=>{const html=$.documentElement,gf=$.getElementById('htmlWrap'),gs=gf.style,gw=gf.offsetWidth,gh=gw*.6;let vp=$.querySelector('meta[name=viewport]'),t=0;vp||(vp=$.createElement('meta'),vp.name='viewport',$.querySelector('head').appendChild(vp));vp.content='width='+gw;'orientation'in _&&html.webkitRequestFullscreen&&html.webkitRequestFullscreen();html.style.overflow='hidden';$.body.style.cssText='min-width:0;overflow:hidden;margin:0';gs.position='fixed';gs.marginRight='auto';gs.marginLeft='auto';gs.top='-5px';gs.right='0';gs.zIndex='100';gs.transformOrigin='50%25 16px';if(!_.kancolleFit){const k=()=>{const w=html.clientWidth,h=_.innerHeight;w/h<1/.6?gs.transform=%27scale(%27+w/gw+%27)%27:gs.transform=%27scale(%27+h/gh+%27)%27;w<gw?gs.left=%27-%27+(gw-w)/2+%27px%27:gs.left=%270%27};_.addEventListener(%27resize%27,()=>{clearTimeout(t);t=setTimeout(k,10)});_.kancolleFit=k}kancolleFit()})(document,window)
下記サイトのものはiOS15以前またはAndroidに対応しています。
https://drive.google.com/file/d/1_Lc5b9XHOY4PiW7SXOo3NLiboSkWKi4E/view
２．ページに記載されている文字列を全てコピーする
(iOS15以降対応版の場合は1記載のスクリプトをコピーして下さい。)
３．適当なサイトをブックマーク
４．3で作成したブックマークの編集画面へいき、名前をわかりやすいものに変更する。アドレス欄のところには2でコピーしておいた文字列をペースト
５．PC版DMMサイトから艦これゲーム画面を表示
６．4で作成したブックマークをタップして実行
iPhone/Androidスマホユーザーの提督の方は是非やってみてください。
ちなみに3艦隊分の帰投受け入れ、再度遠征出し、演習5戦で大体300ＭＢ（0.3GB）ほどの通信量でした（バラツキあり）
実際に外で艦これを全画面プレイしてきた感想はこちら！！！
外出先でiPhone使って艦これ全画面プレイしてきたよ！！in 神戸のスタバ
ツイッターのフォローもよろしくお願いします！！
