うんとかすんとか

sakase_sanのブログです。ガジェットの話題やらなんやら。

(2016.4.2更新)Google Chromeで艦これを遊ぶならデスクトップアプリケーション化でウィンドウを独立させよう!

f:id:sakase_san:20140426172617j:plain

2016/04/02 DMMページレイアウト変更に合わせてStylesの設定内容を更新しました。

艦隊これくしょん -艦これ-」、やってますか?「艦これ」はブラウザゲームですので、通常ウェブページ上で遊ぶことになりますが、これを独立したウィンドウで、まるでデスクトップアプリケーションのようにすることができます。しかも特別なツールは使用せず、Google Chromeの機能と拡張機能だけでOKです。とっても「艦これ」が遊びやすくなりますよ!

手順は2ステップ

最終的にはトップ画像のように、ゲーム画面以外はすべて取っ払ってシンプルなウィンドウのみとなります。起動もGoogle Chromeとは独立したアイコンやスタートメニューから行えます。

その手順は以下の2ステップです。

  1. Google Chromeのアプリケーションショートカット作成
  2. 拡張機能を使ったスタイルシート調整

Google Chromeアプリケーションのショートカット作成

この機能は、頻繁にアクセスするウェブサイトや、Chromeストアからインストールしたアプリを、独立したアプリケーションのように扱うことができるショートカットを作成できるというものです。

アプリケーションのショートカットを作成する - Chrome ヘルプ

まずは、ゲームのページを開き、メニューから「ツール」 - 「アプリケーションのショートカットを作成」を選択。

f:id:sakase_san:20140426172703j:plain

ショートカットを配置する場所を選択し「作成」をクリック。場所はお好みで。

f:id:sakase_san:20140426162807p:plain

すると、アドレスバーやタブバーがない専用のウィンドウが開き、Google Chromeから独立したアプリケーションライクにWebページを閲覧することができます。

この画面は作成されたショートカットアイコンをダブルクリックすることでも表示できます。

f:id:sakase_san:20140426172825j:plain

ちなみに、ウィンドウ左上のアイコンまたはタイトルバーを右クリックすることで、ブラウザメニューを開くことができます。リロードするときなどはここから行います。

f:id:sakase_san:20140426172847j:plain

拡張機能を使用したスタイルシートの調整

さて、ウインドウの独立化ができたので、スタイルシートを調整します。スタイルシートとは、"ウェブページをどういう風に画面に表示させる"かを定義しているものです。これはもちろんページの提供者が作成しますが、ユーザーが独自に編集することも可能です。このスタイルシートを編集(ページの見せ方を変える)し、ゲーム画面以外の箇所は非表示にしてしまいます。 

今回は「Stylebot」という拡張機能を使用し、ユーザー独自にスタイルを調整します。インストールは以下から。

Chrome Web Store - Stylebot

インストールできましたら、アイコンをクリック、「Options...」を選択しオプション画面を表示させます。

f:id:sakase_san:20140426173403p:plain

左メニューから「Styles」を選択し、「Styles」欄の「Add a new style...」ボタンをクリック。

f:id:sakase_san:20140426173745j:plain

URLとその下の欄にそれぞれ以下を入力し、「Add」ボタンをクリックします。

(2016/04/02更新 全体的に修正)

http://www.dmm.com/netgame/social/-/gadgets/=/app_id=854854/
.dmm-ntgnavi, #foot, .area-naviapp, #spacing_top, #sectionWrap, #ntg-recommend, #w > img {
display: none;
}

#game_frame {
height: 480px;
width: 800px;
}

#main-ntg {
text-align: start;
margin: 0;
padding: 0;
}

body {
margin: 0;
min-width: 100%;
}

#area-game {
height: 480px;
overflow: hidden;
}

f:id:sakase_san:20160402000309p:plain

 

コードに関しては以下のサイト様を参考にしております。感謝。

【艦これ】ユーザースタイルシート | しぐれづき - shigurezuki -

オプション画面タブを閉じ、ゲーム画面をリロードします。すると、ゲーム画面のみが左上に表示される形となります。あとはウィンドウサイズをスクロールバーが出ないようドラッグで調整するだけ。これで完成です。

f:id:sakase_san:20140426174735j:plain

まとめ

いかがでしょうか。艦これブラウザゲームと意識せずに遊ぶことが出来るようになりました。リマインダーなどより多くの機能を盛り込んだ「艦これウィジェット」の簡易版ともいえますね。いやー、快適に遊ぶって大事。

おまけ

作成したアイコンの画像を変更すると、よりそれっぽい。

f:id:sakase_san:20140426174932j:plain

 

※大丈夫だと思いますがDMM.comおよび艦隊これくしょんの規約に抵触するおそれがありますので自己責任でお願いします…。