『ここれす！』は、ドラゴンズドグマオンライン (通称 DDON) の地図に注釈や記号などを書き込み、そのスクリーンショットを撮るためのユーティリティツールです。ゲーム情報の共有や、攻略サイトの図の作成などご利用ください。図の作成とその掲載について、私の承諾を得る必要はありません。こうした利用について目をつむっていてくれるゲーム開発会社など元画像の著作権保有者に感謝しつつ画像の利用を楽しみましょう。
が出ます。このマーカーの場所を指す URL (リンク) を簡単にコピーできるので、お友達に教えてあげてください。きちんとした使い方はこのあとに書きましたので、困ったら読んでください。とかいいつつ、まだちゃんと書いていません。
「ここでクエストが発生するよ。」など、地図上のポイントを URL でお友達に教えることができます。
地図上の伝えたい地点を、マウスまたは指で 長押しします。すると、その地点にマーカーが現れるとともに、その URL が示されます。URL をコピー を押すと URL を自動でコピーしますので、これを Twitter に流すなり LINE などのメッセージングプリケーションで送るなりしてください。「自動でコピーと言っておきながら実はフィッシング系サイトへ誘導されるじゃないか」と思ってしまうセキュリティ意識の高い方は、画面に示されている URL を手動でコピーすると良いでしょう。
サンプルとして、ワールドクエスト『騎士団の仇敵』(テルサイ) の場所 を指す URL 貼りつけておきます。実際に飛んでみてください。
地図に注釈や記号を貼りつけるには、かきこみ の中の部品を使います。部品のタイプをパネルから選び、地図の上をタップまたはクリックで配置してください。ドラッグやカーソルキーの操作で移動できます。
| タイプ | 変更できる項目 | 説明 |
|---|---|---|
 ふきだし |
|
図の説明文などを配置するための部品です。枠のサイズは、設定している文字が収まるよう自動調整されます。しっぽをつける をチェックすると、説明するものを指し示すための線が付与されます。しっぽの先の位置も自由に移動できますので、調整してください。 □ と 〇 の違いは形状のみです。〇型は漫画のふきだしのような形をしていますから、しっぽをつけてキャラクターのセリフのように配置すると雰囲気が出ます。 |
 ふきだし |
||
 画像を貼る |
|
お手持ちの画像またはウェブ上の画像を貼りつけることができます。 編集データの保存 では、表示している画像データ自体を編集データに格納します。あまりに画像を大きくすると、編集データファイル自体のファイルサイズが大きくなるという点に留意してください。 ウェブ上の画像は、URL で指定します。ウェブ上の画像を使った場合は、画像の出力 ができなくなります。これは、一般的なセキュリティによるブラウザーの制約です。1度画像を貼りつけると、これを削除しても画像を出力することができないため、この点にもご注意ください...。 |
 このへん |
|
「このへん」は、地図上の一定の範囲を示すために使おうと思って用意しました。たとえば、「お目当てのモンスターはこのへん一帯に生息している。」といった風です。 この部品には枠線がありません。範囲を示すときに普通に中抜きの 〇 を使いたい方もいると思いますが、技術的な理由により今回は枠線を持たせないようにしました。ごめんなさい。 |
| 各色/各種のシンボル |
|
マーカーが主な用途ですが、それにとどまらず、キャラクターの額や目に貼るなど面白おかしくお使いください。 |
部品の位置、大きさ、角度は GUI で変更できますが、ふきだしの内容や色の変更には編集パネルを使います。編集パネルは、部品を 右クリックまたは長押し すると表示されます。編集できる項目は、タイプごとに異なります。
位置を微調整したいときや、マウスを触りたくないときにはカーソルキーでの操作が便利です。
| 移動 | ↑ | 選択している部品を上に移動します。 |
|---|---|---|
| ↓ | 選択している部品を下に移動します。 | |
| ← | 選択している部品を左に移動します。 | |
| → | 選択している部品を右に移動します。 | |
| しっぽの先の移動 (ふきだし，画像) | K | 選択している部品のしっぽの先を上に移動します。 |
| J | 選択している部品のしっぽの先を下に移動します。 | |
| H | 選択している部品のしっぽの先を左に移動します。 | |
| L | 選択している部品のしっぽの先を右に移動します。 | |
| 拡大と縮小 | Shift + ↑ | 選択している部品を拡大します。 |
| Shift + → | 選択している部品を拡大します。 | |
| Shift + ↓ | 選択している部品を縮小します。 | |
| Shift + ← | 選択している部品を縮小します。 | |
| 回転 | R | 選択している部品を時計回りに回転します。 |
| Shift + R | 選択している部品を反時計回りに回転します。 | |
| オプション | Ctrl | Ctrl を押しながら操作すると、移動や回転の量が大きくなります。 |
かきこみしていると、地図中の各種ラベルが邪魔に思えてくることがあります。特に、ダウ渓谷はどうでもいい洞窟や倉庫が狭い区域に密集していて不快です。そんなときのために、ラベルを消すことができるようになっています。
まず、「施設・魔物警戒スポットのラベル」というのは、地図中でグレーで表示しているラベルです。かきこみ の下にある 施設・魔物警戒スポットを表示 のチェックを外すと、これらのラベルがすべて非表示になります。再度チェックを入れると、また表示されます。表示/非表示を個別に設定することはできません。
拠点、礎、洞窟などアイコンと一緒に表示されているラベルは、そのアイコンをクリック/タップすると表示/非表示を切り替えられます。これらは個別に表示/非表示を設定することができます。
通常、『ここれす！』では編集パネルを表示していつでも編集できるようになっていますが、シェアする URL に特殊な記述を加えると、編集を制限できます。GUI は用意していませんので、少しだけ Web の知識が必要です。
『ここれす！』で使用しているアイコンは、MAKI ICONS と Flaticon のものを使用しています。
地図中のアイコン、および各色の 
を除くすべての書き込み用アイコンは MAKI ICONS のものを同サイトで加工して使用しています。これらは、クリエイティブ・コモンズ・ゼロ 1.0 のライセンスで提供されています。ちょっと絵が細くてアイコンとしては視認性の悪いものもありますが、枠線や背景色も編集できて自分のサイトの雰囲気に合わせたアイコンに加工できるのが特長です。
サイトの運営元は mapbox という地図関連のウェブのサービスを展開している会社です。
各色の アイコンは、Flaticon プロジェクトのデザインを Freepik で加工して使っています。このアイコンは クリエイティブ・コモンズ 3.0 のライセンスで提供されています。
Right arrow icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY.
『ここれす！』は、Fabric.js という JavaScript のライブラリを使用して画像の操作を実装しています。Fabric.js は HTML 5 の Canvas を使い易くする API 群で、生の JavaScript よりも Canvas の操作が格段に簡単になります。『ここれす！』は架空のものではありますが地図を扱うユーティリティツールですから Canvas の汎用ライブラリではなく地図専用のライブラリを利用する選択肢もあったのですが、今後も他のアプリケーションを開発することに役立ちそうだったことから Fabric.js を選びました。本当に素晴らしいライブラリです。
Fabric.js は、MIT ライセンスで配布されています。
リリース。
ふきだしの文字と線の初期色を黒に変更。
ふきだし等のオブジェクトのしっぽ位置をタッチ操作でも移動しやすいよう、コントロール部を巨大化。
アッカーシェランの地図を追加。
地図画像を分割して取得するよう修正。これにより動作がやや軽快に。
視認性の向上のためシンボル画像を縁取り。
広告がスクロールされるようレイアウトを変更。
編集データを iOS で保存できるよう修正。
編集データの保存において、表示している解像度でローカル画像を保存するように修正。これにより、画像を含む場合にも編集データファイルのサイズが小さくなった。代償として、再度編集データを開いたときに元画像の解像度を再現できなくなった。
編集データ (JSON ファイル) からマップ名を除外。これまで編集データに記録されている対象マップを自動的に開いてたが、今後は対象マップを表示してから編集データを反映させる必要がある。
編集のロック機能を追加。編集データのロード後はロックした状態になる。
URL で画像を指定する機能を追加。この機能で画像を貼りつけると、ツールでの画像出力ができなくなる。1 度貼ると削除しても復活しないので注意。
URL 指定の画像を拡大表示する機能を追加（ロック時に画像をクリック）。ローカル画像では不可。
範囲指定で画像出力するとき、ふきだしの尻尾を移動できる不具合を修正。
編集ロックされているとき、ウェブ画像 (URL を指定して貼りつけた画像) の上でドラッグまたはスワイプすると地図を移動できなくなる問題を修正。
Web に保存する機能を追加。
背景画像（地図画像）を変更する機能を削除。(隠し機能としては残っている...。)
書き込みオブジェクトの回転を操作するキーを変更。
編集ロックされているとき、画像出力範囲を指定する矩形オブジェクトをドラッグすると同時に地図を移動させてしまう不具合を修正。
コントロール類の配置を変更。
フィンダムの地図を追加。
拠点、冒険スポットのアイコンを変更。
かきこみ部品の操作中は座標マーカーが出現しないよう修正。
地図の画像や定義ファイル (JSON) などのリソースファイルが更新されたときに端末のキャッシュが利用されないよう、変更の度に異なるパスになるよう処理を修正。
シェアボタンで URI がテスト用ページの URI を表示する問題を修正。はづかしい。
スマートフォンでの操作において、配置したオブジェクトを長押ししても編集パネルが表示されない不具合を修正。このバグは ver. 1.0.7 で盛り込まれたものです...。
魔赤島の地図を追加。
亡都メルゴダおよび王宮層の地図を追加。
ボルド大坑道および灼熱の封鎖道の地図を追加。
メニューのレイアウトを変更。
（ユーザーによる編集とは別の）注釈機能を追加。注釈の表示/非表示を切替えられる。
「施設・魔物警戒スポットを表示」「注釈を表示」の状態をシェア用 URI のパラメーターに加えるよう修正。
アルファベット 1 字で示したマップ連携部分の切替え処理を改善。
ふきだしや画像オブジェクトのしっぽの先をキーボードで移動できる修正。
エルテ・ディナン、レ・カルバス・サルトー、レ・カルバス・アーマ、レ・カルバス・パティーロ、レ・カルバス・ロタナの地図を追加。
ミスリウ鍾乳洞、ディナン深層林の残りすべての区画の地図を追加。
外部画像の読み込み周辺処理を改善。
閲覧モードとピクチャーモードを追加。
広告を除去 (また復帰させるかも)。
額縁モード (仮称) を追加。マウスホイールによる拡大と縮小ができなくなる。
ふきだしなどの色選択における既定色「青」の値を調整。
辺境の礎「修練の祠」「森の一軒家」を追加。
ラベルを縁取りデザインに変更。最初からこうしたかったが、Fabric.js では日本語での縁取りが正常に表示されなかった。問題の対処が成された最新の Fabric.js 2.2.3 にアップデートして実現できた。新しいバージョンに上げるためには他にも問題があって今までできていなかったのだが、これも頑張って解消...！
範囲を選択して画像出力するとき、範囲指定オブジェクトを Delete キーで消去できてしまう問題を修正。
Chrome 系ブラウザーで吹き出しから文字が飛び出してしまう問題を修正。