FC2ブログ

架空創造地図描画日記2020[No.6762]

 画面上をスクロールする場合、画面より一回り大きいぐらいの面積で、上下左右にはみ出たマップを反対側へループさせる。この構造は、Web上の地図ではどれも共通の方法のようである。どんな言語でもやり方は共通なわけで、ツクールでもピクチャーをタイル状に並べれば理論上可能だろう。要するにそれを作る方法を知っているかどうかということだが、その辺は問題無い。後は有効なメソッドを拾い出して組み込むことである。
 色々調べて試してみたところ、マップ1枚のサイズである250px四方で割り切れるようにスクロール領域の縦横を設定して、append系のメソッドでループさせれば、領域内に隙間無くマップを並べることが可能らしい。スクリプトを使わずにガチで並べるとなると、positionやwidthやheightを細かく設定する必要があるのだが、それに比べると意外に楽な作業であった。そして画像のスライドもこの系統のメソッドで可能なようだが、実際やってみると暴走したり漬物石のように微動だにしなかったり、マップの配置がグダグダになったり…と何だかんだで苦労している。

架空創造地図描画日記2020[No.6761]

 本日未明にスクロールマップを更新した。新機能や操作方法はサイトの閲覧入口に書いてある。クリック(タップ)すると、その場所が画面の中心にくるように瞬間移動する。そして画面上部にセレクタが新設された。デフォルト表示ですぐ分かるが、選択すると全国の県庁所在地にワープすることができる。更に地味な仕様変更として、起動時と画面サイズ変更時は首都:大都が画面の中心にくるようになった。その際は同時にセレクタの選択もリセットされる。
 新機能は副産物でしかないが、ロースペックの端末では動作不良が大きいので、その代替手段ということになる。それでもタップの移動はもっさりしているが、セレクタの全国ワープは作者のスマホでも動作が軽いので問題無いだろう。PCならば矢印キーでセレクタの操作が可能なので、全国巡りが簡単にできるはずである。

架空創造地図描画日記2020[No.6760]

 どうにかしてスクロールは動くとはいえ、作者のスマホの性能ではまだ不安要素が多い。PCでは飛ぶようにサクサク動くのだが、こういう格差がある限り、作者はスマホに依存した生活はとてもできないだろう。 
 てなわけで、性能の低い端末でも画面を動かせるようなシステムの構築は続いている。だが、滑らかに動くようになるにはまだ程遠い。速くなるかと思ったら、逆に地図が鉄板を並べたかのように重くなってしまって結局ボツとなった。これはもうスワイプを無効化してパンのみにするしかあるまい。
 それでもこの開発過程において、スクロールの代替手段になり得る副産物が開発された。それは画面をクリック(タップ)すると、その場所が画面の中心にくるように瞬間移動するシステムである。これもPCでは何の滞りも無く動くのだが、作者のスマホでは相変わらずもっさりしている。スマホの性能のせいもあるが、作者は街のATM等のタッチパネルの反応が鈍くていつもぼやいているので、そのせいもあるのか!?だけどスクロールとの競合は無さそうなので、そのまま採用するとしよう。

架空創造地図描画日記2020[No.6759]

 引き続き閲覧システムの開発を進めている。次なる目標は高速スクロールだが、スワイプを搭載したことでテストでは既に実現した。もっとも、ここに達するまでにやはり何度か罠にハマっていたのであった。
 通常のスクロールはドラッグ又はパン操作であり、これらは画面に触れたまま話さずにゆっくり動かす操作になる。だがこの操作は微調整で行うものであって、長距離の高速移動となるとスワイプで弾き飛ばせた方が操作性は向上する。だが、画面に触れている間は両者が微妙に競合してしまい、制御がもっさりしていると動作不良の原因となっていた。
 これを改善すべく、ドラッグ操作の方でまどろっこしい制御が見つかったので直したところ、今度はまるでリミッターが解除されたかのようにドラッグが暴走してしまい、スワイプの存在意味が無くなってしまった。サクサク動くのだからこれでいいのではないか!?と思うかもしれないが、微調整が利かなくなって狙い通りの場所に止められないのではまずい。そこで両者の間を取って、リミッターを付けた状態でほどよくスワイプさせることにした。だがそのままだと競合するので、それを避けるためにドラッグ移動中は一時的にスワイプを無効化させたのであった。

架空創造地図描画日記2020[No.6758]

 本日17:45頃、公式サイトにて更新事故が発生したらしいが、今は元通りになっている。やれやれ、せっかく完成したと思ったら、自分のスマホで動かないとは…。通話とメールと防水機能を最重要視して選んだスマホなので、スペック自体は大したことがないのだが、今後もこいつで正常に動くレベルを目標にすればよかろう。
 てなわけで、マウスのドラッグ・タッチパネルのパン操作の両対応で理論上動くシステムは、一応完成したのであった。もちろんテストは一通りしたわけだったが、やはり最後は実際にアップロードしてスマホでテストしなければダメだろう。
 ところで、テストの度にアップロードするのは難儀なので、普段はスマホにインストールしたリモートデスクトップで試している。こいつは画面表示のチェックやタッチ操作をテストするにはよいだろう。だけどスマホはリモコンでしかないので、動作はクライアント側のPCの性能に依存するのが現実である。

架空創造地図描画日記2020[No.6757]

 Webサイトの閲覧は、スクロールが不要な方が閲覧者にとって都合がよい。だけどサイトの1ページ分の情報が普通は1画面に収まり切れるわけもない。そういう場合はスクロールして画面を送るしかない。そればかりはしょうがないのだが、ここで世界中の言語の文章が圧倒的に横書きが主流なわけである。よって、スクロールの方向は横よりも縦の方が閲覧しやすい。となると、横スクロールは不要にすべく、常に横幅を広げないことに徹すれば、自然に閲覧しやすいサイトになるだろう。
 かくして、Web開発では、制御文を書いたらブラウザでプレビューテストしてみて、横スクロールバーが出てしまったらNG…と考えるのが妥当である。ここでWebにおけるビューポートとは、ざっくり言えば端末の画面サイズの設定なのだが、もっと端折れば横幅の設定のみに意識を集中させればよいわけである。

架空創造地図描画日記2020[No.6756]

 さてそろそろ作業の話に戻すか…。突然だが、レスポンシブやらビューポートやら、一般には聞き慣れない言葉を出してみた。これらは現代におけるWeb制作では不可欠な要素である。
 作者は20世紀末には既にPCを所持していたが、当時はスマホどころか携帯も登場したばかりであり、インターネットの登場もこの頃であった。要するにITやネット関連といえば、ほぼすべてPCに依存していた。それが今ではどうか?Webの閲覧ともなると、もはやスマホが全体の過半数に達しているのではないか!?
 作者のように長年PCを扱ってきた人間にとっては、つい最近までケータイやスマホごときでは、PCの足元にも及ばない…なんて普通に思っていたはずである。それが今ではどうよ…。スマホを横に立てて、Bluetoothでペアリングしたキーボードとマウスを置けば、それなりの性能のPCと大差無い作業ができてしまうのではないか…!?これは極端な例なようであっても、それが現実なのである。
 昔からWebサイトを運営している人間にとって、この急激な時代の流れに逆らうわけにもいかなくなってしまった。それは何年も昔から考えていたことだったが、要するにどんな端末でも普通に閲覧できるサイトにしなければなるまい…ということである。てなわけで、上の二つの横文字がそいつに大きく関与するのであった。

架空創造地図描画日記2020[No.6755]

 いよいよ梅雨らしい天気である。これだけ雨が降れば作物もよく育つだろうに…。ただでさえコロナのせいで床屋は三密を避けて連日大渋滞である。これでは髪の毛が伸び放題ではないか…。既に前髪は目をかぶってしまって鼻先まで達している。ていうか舌を伸ばせば届いてしまうほどである。こうなったら自分で切るのもありかもしれないが、自爆しそうでやっぱり手が出せそうにない。
 前回に続いてまたも国民の半数ほどの人間から呪われそうだが、髪の毛が多ければ多いで全然まとまらなくて困っている。勝手に伸びるものなので知ったことではないが、普段どうやってこうなったのか記しておくか…。洗髪は毎日毛穴の脂まで割と念入りに洗い落とす。手入れらしい手入れは多分これだけかもしれない。シャンプーのみでコンディショナーは一切使っていない。ドライヤーも全く使わず、タオルで拭いたら自然乾燥。整髪剤の類も一切使っていない。白髪はごく微量なので染めるなんて考えたことも無い。そして効果を疑問視されることが多いが、毎朝海苔を食べている。ざっとそんなところだが、すべて個人差によるので、有効かどうかは不明なので悪しからず。

架空創造地図描画日記2020[No.6754]

 当地も梅雨入りしたらしい。最近急激に暑くなっているが、この作業場の冷房は2011年の震災以来活動自粛してそのまま風化した。40年以上使っている古ぼけた扇風機が1台あればよい。窓を開けて風を通せば十分である。台所の冷蔵庫にはアイスクリームや氷の類は10年以上入っていた記憶が無い。今年もこれで夏を乗り切ろうではないか…。尚、よい子の皆様がこの暮らしを真似したところで、いかなる不測の事態が起きたとしても当局は一切関知しない。ただ、アイスクリームの類はカロリーが高い上に内臓に負担がかかるので、過度の摂取は太ることだけは確かである。
 やれやれ、ダラダラと世間話が続いているということは、システム開発は行き詰っているということか…。まあその通りである。今日も寝落ちを繰り返してダメニートに劣化している作者であった。だが、体重は多分増えても減ってもいない。学生時代に買った服はまだ着られるはずである。国民の半数ほどの人間から呪われそうなので、どうやってこうなったのか記しておくか…。1日3回朝昼晩ガッツリ食事を摂取して、それ以外は余計に食べないことである。尚、個人差によるので有効かどうかは不明なので悪しからず。

架空創造地図描画日記2020[No.6753]

 タッチ操作攻略の重要なカギが遂に発見された。その名も「hammer.js」という拡張機能である。一連のブラウザでタッチ操作全般はもちろん、マウス操作にも対応しているらしい。サンプルやデモを漁って試してみたところでは、今までで最も目標に近い結果が出た。これらをごっそり拝借して、少しずつアレンジしてはテストを繰り返しているが、今のところ作業は順調である。
 JavaScriptのように異国の文字がずらりと並んでいるプログラミングにおいて、サンプルを参照しながら作業をする場合、最も面倒なのが名前の解読である。予約語のようなものはどの言語も共通なのですぐ気付くが、そいつが言語固有のコマンド名なのか、又はプログラマーが独自に付けた名前なのか、一見して判断に迷うことも多い。前者は1文字でも変えれば全く動かなくなるのに対して、後者は自分で理解できるように変えることは自由である。特にJavaScriptでは、作者が今まで扱ってきた言語の中ではこの判断が一番難しい印象である。これが即座に解決できるようになれば、自然にLvは上がっていくだろう。

架空創造地図描画日記2020[No.6752]

 本日スクロールマップを更新した。画面外へフェードアウトする仕様という名の不具合が解消されて、枠内で1pxもブレずにぴったり止まるはずである。同時にウィンドウサイズを変更してもマップの端までスクロールできるようになった。
 さて、現在延々と作業が続いているのは、スマホやタブのタッチ操作の対応である。一般的にはtouchstart・touchmove・touchendを使うらしいのだが、サンプルを片っ端から拾って試してみたところ、IEとEdgeではどうしても動かない。需要の低いブラウザなんかこの際無視してしまってもよいのだが、そういうことが無視できないのが作者なわけで、だからいつまで経っても作業が進まない。昔からぼやいていたが、ブラウザとはWeb管理者にとっても閲覧者にとっても、こういうところがブラうざなのである…。

架空創造地図描画日記2020[No.6751]

 動かない→やり直す→動かない→やり直す→動かない→寝落ち…何だかここ数日こんな流れ図がループしているような気がする。これでは昼間寝過ぎて夜が寝られないではないか…。かつて「Made in GAPAN 歩」を開発した当時も似たような事態が繰り返されたものだったが、あれの開発期間がどれくらいだったか?今はもう思い出せない。
 JavaScriptもjQueryも、ネット上にはサンプルが星の数ほど散らばってはいる。そいつを拝借しては試してアレンジしての繰り返しだが、動かない場合の行き着くところは結局「使い方が分からない」…なのである。便利らしいプラグインも多数あるらしいが、以下同文の理由でどうにも使いこなせないのである。率直な感想でツクールとどちらが難しいか?それは母国語と異国語との差がそのまま出ていると言えよう。

架空創造地図描画日記2020[No.6750]

 システム開発では、ユーザーが常識範囲を超えた操作をすることまで常に想定しなければならない。それはツクールでのRPG開発でも長年やってきたことである。かくして、今回の地図閲覧システムでもその考えは普通に及んでいる。だったらとっととタッチ操作対応にせい!…と突っ込まれると元も子もないが、不完全極まりない現状を放置しておくのはさすがに歯痒いものである。
 …で、今回も最低限のシステムを考える一方で、通常はやらないような操作まで想定してしまい、そこで余計に悩んでいるのであった。それは閲覧中のウィンドウサイズ変更である。
 最近では作者もインターネットを閲覧中に、モニターの片隅でアニメを観るようなことをする機会も多いので、こういう需要はそれなりにあるだろう。最初からウィンドウサイズの設定はpxでなく%で設定しているので一応対応できているが、ドラッグ可能な範囲が変わってしまうので、今後の開発を考えると今のうちに対策を講じなければならない。そこでまた色々と調べていたが、スタイルを変数で制御できないと非常に不便なことが分かり、CSS変数の存在にたどり着いたのであった。こいつは非常に便利そうだが、IEには未対応とか…。だけどアクセス解析では、このブラウザを使っている人は微々たる数らしい。ならばもうゴリ押しするか…。

架空創造地図描画日記2020[No.6749]

 現状ではマップがウィンドウの端を超えるとフェードアウトして戻せなくなってしまうが、それを止めるためのシステムを構築している。だがこいつも一筋縄ではいかないようで、どうにも成功しない。
 外枠を含めた全図のマップ寸法は11750×15250pxだから、ざっくりとスクロールする範囲は縦横各2倍のぐらいの寸法になるとして、スタイルシートに書き込んだところで、いざ起動させても微動だにしない…。寸法がでか過ぎてブラウザが受け付けないのか…!?小さい寸法でテストすれば動くので、その可能性が高い気がする。画像を表示するボックスの寸法はマップサイズより小さくしても動くようだから、後は計算でどうにかできるものなのか…?

架空創造地図描画日記2020[No.6748]

 途中つぎはぎではあるが、古守県から公開開始した新版地図は、現時点で首都:大都までつながった。スクロールマップでは、その領域はどうしても矩形にしなければ具合が悪いだろう。となると、未完成の領域は、旧版スクロールマップの外枠の画像を流用すれば暫定的な措置として埋めることはできる。そういう段取りで進めていくとするか…。
 一方、閲覧システム開発の方はどうなっているのか?旧版全国地図は最初に全域を読み込んで全域のままスクロールさせるという強引な方法だが、今後は容量を考えるとそういうわけにいかない。スクロールマップの領域は、あらかじめ枠外に少しばかり余裕を持たせる程度の小さめなサイズとする。スクロールした方向で枠外へフェードアウトしたマップは、瞬時に反対方向の端へ移動させて、ファイル名を変えて再読み込みする。……そんな流れ図でシステムを検討しているが、小規模な実験ではまだ成功していない。
管理人

ごとりん

  • 著者:ごとりん
  •  架空想像国家「月本國」の全国地図描画作業を地味に続けている貧乏クリエーター。このブログの毎日更新が途切れない限り、無事に生存しているものと関知して下さい。
Simulation Country GAPAN 月本國


現代和風RPG「月影の駅」Ver2
 RPGツクール2000製フリーウェア。駅から始まり駅で終わる、オトナのドライな人間模様。
 ゲーム宣伝動画配信中!

「Made in GAPAN 歩 ~Ayumu~」
 2D-RPG向け歩行グラフィック合成ソフト。当局開発の32規格8方向部品セット他、一般的な部品セットも利用可能。各使用環境に合わせた既存素材の組み直しや、顔グラ等の合成もOK。
(上記の管理人画像はこれで合成したものです。)

 「月本國」では、2D-RPG向け現代和風素材の無償配布の他、開国(平成13年12月16日)~平成17年2月28日までの過去ログ「旧月本国政府広報」を扱っています。
 又、連載物「RPG制作雑記」「徒然なる200x裏技集」(↓のカテゴリーで★が付いているもの)等のwardファイル版過去ログを扱っています。このblogの過去ログが読みにくい場合は是非御利用下さい。
ブログ内検索
カテゴリー(★:「月本國」にward版あり)
カレンダー
06 | 2020/07 | 08
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 -
月別アーカイブ
最近のコメント
最近のトラックバック
リンク
RSSフィード