プログラマーですが何か?まだプログラマーですが何か?プログラマーネタとアスリートネタ中心。画面内の特定要素に回転をかけることができる、ということを知り、その様子を視覚的に確認できるサービスを作って公開してみました。属性を使って、回転軸と回転角度を指定することで実現できます。アクセスすると以下のような画面が表示されます。スライダーバーを同時に動かすこともできます。属性だけで実現しています。いう軸の名前とその意味、そして立体的な位置関係を理解しておく必要があるので、そちらから説明します。軸正方面から画面を見ています。軸からなる平面上に描かれています。軸を中心に回転するスライダーバーになっていて、それぞれ指定した角度だけ回転した結果が画面に表示されます。回転すると横方向に回転したように見えます。回転すると見えている平面上で時計回り/反時計回りに回転しているように見せることができています。変えることができます。それぞれの結果は上述のようになります。上述のサービスではこれらのスタイルを各スライダーバーの値を参照しながら動的に変更して表示しており、その結果がこのようになっています。パラメータ指定することで表示画像を変更することができます。OpenStreetMap)を使って表示する地図は原則的には上が北になります。これを変更して(つまり地図を回転させて、上が北側にならないようにして)表示することに挑戦してみました。ネイティブで用意された方法は存在しない」、「簡単な方法はない」とされています。言うは簡単ですが実際には細かな調整含めて結構面倒なものでした。一応サンプルとして動く形にできましたので、公開&紹介します。ソースコードはこちらに用意しました。ページも用意しました。イベントをハンドリングしているため、環境によっては事前準備が必要です。以下の場合は事前設定不要です(ページを表示すればそのまま動きます)。以上の場合は事前の準備は不要ですが、ページロード直後の初期状態で表示される「センサーの有効化」というボタンをクリックしてから「許可」してください:いずれの環境においても上記の準備を済ませた上でアクセスすると、東京を中心とした関東の地図が表示されます。画面の中心には赤字でこのスマホデバイスの横方向への傾き角度が表示されます:スマホを横方向に傾けると、その傾きに合わせて地図が画面内で回転して表示されます。下図ではスマホを向かって右側に(時計回り方向に)傾けています。スマホの傾きに関係なく、常に真上(下図では左上方向)が北になります:実際に動かしている様子を動画にしました:以下、技術的な解説を加えていきます。指定して、全画面で地図が表示されるようにしています。属性を適用して実現しています。内で表示していますが、こちらは特別な処理をしていないため、詳細は省略します)。これだけだとうまくいきません。画面を回転させると、角度によっては表示されない部分が出来てしまうのでした:↑黒がスマホ本体(黒枠の中だけが実際に表示される)、左側は本体画面に地図が表示されている。スマホを回転させて表示すると、元の地図の矩形部分は表示されるが、表示しきれない部分(黄色の部分)が生じる。実際には黄色部分はグレーで表示されてしまいます。この状況を回避するための工夫を加えています。して、そのロードしたエリアの中心部分だけを表示するよう調整しています。することで表示された画面の中心を軸に画面が自然に回転するようになります)。抑制したりしています:↑地図部分を実画面サイズよりも大きくすることで、回転させても表示不可エリアが生じないように調整しています。した工夫によってなんとか実現できました。地図上に書かれた文字が斜めになってしまうのはさすがにどうしようもないです。側でサポートしてくれるのを待つしかないかなあ。これらの値を変えると表示するエリアや拡大縮小レベルを変えることができますので、自分の環境で挑戦してみたい方は是非挑戦してみてください。dotnsfむかーしから存在している技術なのですが、イメージマップという便利な機能があります(最近あまり使われなくなったという印象もあります)。ページ内の画像内にクリッカブルな領域を複数定義し、いずれかの領域がクリックされたら何らかの処理を行う、というものです。関数を実行するとか、・・)を変えることができる、というものです。こんな感じで実現します。いらすとやさんの『ホワイト企業~ブラック企業のイラスト』を例に紹介します:このイラスト画像は横650ピクセル、縦137ピクセルです。その中にホワイト企業~ブラック企業が5段階のイラストで表示されています。いう矩形でできています。属性でイメージマップの名称を定義します。記述すればリンクを作成することもできます。いうメッセージが表示されるようになります。元は1枚の画像でしたが、クリッカブルな領域を5箇所定義することができ、それぞれのクリックハンドラを個別に設定することもできました:(左から2番めのビルをクリックした時の様子)ここまでが普通のイメージマップです。このイメージマップ、非常に便利な反面で「レスポンシブ対応が難しい」という難点がありました。要はクリッカブルな矩形領域をピクセル絶対値で指定しているため、画像がそのまま表示された場合はいいのですが、レスポンシブ対応などで画面サイズに合わせて拡大縮小されて画面いっぱいに表示された場合、縮尺が変更になってしまい、絶対値で指定していたイメージマップの定義がおかしくなってしまうのでした。クリッカブル矩形部分となっていて、本来の位置からズレていました。プラグインを使うことで解決できました:以下に具体的な対応手順を紹介します。内でレスポンシブのための宣言をしておきます。画像サイズの調整を行います。使って簡易ドライブゲームを作って公開しました。誰でも無料&自由に使える地図や地理情報のオープンデータプロジェクトです。使ってドライブゲームを作って公開してみました。ブラウザ画面いっぱいに表示され、その中心に赤い車(この車でドライブします)が表示されます。右旋回とりあえず「下」を押すと動き出します(もう一度押すと止まります)。初期状態では5時の方角を向いているので右下方向に向かって移動を始めます(実際には車の位置は変わらず、地図部分がスクロールしていきます)。1990年にセナとプロストが接触した1コーナー)ぶっちゃけコースアウトしようが、何かと接触しようが車は動き続けます。角度(何時の方向、という時計の短針の方角を示す。整数)下図はhttps://dotnsf.github.io/openmap_drive/?lat=43.733009&lng=7.4228981&anglelevel=4にアクセスした時の様子です。モナコグランプリ市街地コース上です。これから最終コーナーに向かうラスカス・コーナーのあたり:地図で表示するのは必ずしもサーキットである必要はありません。作って教育目的に使っていたことがありました。キーの取得が必要になってしまい、オープンな教材としては使いにくくなってしまったのでした。ライブラリを併用して使う形で作り直しました。内容を直接参照してください)。公開できる形にもなった、という副産物的なメリットも生まれました。今回公開したファイルはあくまでテンプレートというか、「これを元に改良するための素」のつもりです。的な要素を使ってデバイスからの信号を受け取れるようにしたり、身近なものをリモートコントローラー代わりにして使えたら面白いかな、と思っています。あと少し技術方向性は異なるけど、複数台の車を同時に走らせたりとかも面白そう。関数を使う機会があります。要素に比較的簡単にアニメーション要素を加えることができます。(矩形の右上)を指定しています。これだけで現在位置から目的位置までの間を(直線的に)移動するアニメーションが実現できます。移動させることで実現できています。ここで紹介したのは位置に関するパラメータでしたが、位置以外でも数字で指定できる要素を使って現在の値から目的の値までアニメーション処理させるだけであれば同様に実現できます。本ブログエントリで紹介するのは曲線的な軌道でアニメーション移動処理させたい場合の方法です。左下から右上まで、円軌道でアニメーション処理させたい場合にどうすればよいか、という場合の方法を紹介します。変化させているだけです)。関数の値が少しずつ変化するたびに、その値を引数(current)にして実行されるます。位置移動する、という方法によってアニメーション処理を実現します。関数を実行しています。軌跡を計算して返しています(※)。要素の位置を変える、という処理を加えています。要素の位置を円曲線に沿って移動させる、という処理を実現しています。求めることができます。)の平方根なので、この数値を計算して求めています。関数で要素を曲線軌道でアニメーション移動させることができます。ブログ検索」ブログパーツは、サービスを終了しました。