まだプログラマーですが何か?

プログラマーネタとアスリートネタ中心。たまに作成したウェブサービス関連の話も http://twitter.com/dotnsf

CSS で画面内の特定要素に回転をかけることができる、ということを知り、その様子を視覚的に確認できるサービスを作って公開してみました。

この技術(というほどのものではないけど)は CSS の tranform 属性を使って、回転軸と回転角度を指定することで実現できます。ともあれまずは実際に挙動を確認してみましょう:
https://dotnsf.github.io/transform-rotate/


上記 URL にアクセスすると以下のような画面が表示されます。画像(デフォルトではいらすとやさんの「コンピュータを使うペンギン」のイラスト)と、その下に3つのスライダーバーが表示されているはずです:
2020020101


x のスライダーバーを動かすと、動かした角度だけ画面が縦方向に回転します:
2020020102


y のスライダーバーを動かすと、同様に横方向に回転します:
2020020103


z のスライダーバーは画面と平行に回転します:
2020020104


x, y, z のスライダーバーを同時に動かすこともできます。縦、横、平行すべて指定したぶんだけ回転して画像が表示される、ということがわかると思います:
2020020105


これらはすべて CSS の transform 属性だけで実現しています。以下、その技術的な内容を紹介しますが、前提として x, y, z という軸の名前とその意味、そして立体的な位置関係を理解しておく必要があるので、そちらから説明します。以下の図のような関係になっていると理解してください:
20200201


図のような x 軸、y 軸、z 軸があって、自分は z 軸正方面から画面を見ています。実際に見えている画面は x 軸と y 軸からなる平面上に描かれています。

そしてスライダーバーはそれぞれ x 軸を中心に回転、y 軸を中心に回転、z 軸を中心に回転するスライダーバーになっていて、それぞれ指定した角度だけ回転した結果が画面に表示されます。そのため(結果的には)x で回転すると縦方向、y で回転すると横方向に回転したように見えます。また z で回転すると見えている平面上で時計回り/反時計回りに回転しているように見せることができています。

で、これをどう実現しているかという部分が CSS の transform 属性です。例えば id="a" の要素を x 軸中心に 30 度回転させて表示したい場合は、以下のようなスタイルを適用します:
#a{
  transform: rotateX( 30deg );
}

同様にして y 軸中心に 30 度回転させて表示したい場合は以下です:
#a{
  transform: rotateY( 30deg );
}

z 軸中心に 30 度回転させる場合は以下です:
#a{
  transform: rotateZ( 30deg );
}

「30 度」という部分は -180 から 180 まで変えることができます。それぞれの結果は上述のようになります。上述のサービスではこれらのスタイルを各スライダーバーの値を参照しながら動的に変更して表示しており、その結果がこのようになっています。


これはオマケの情報ですが、このサービスではデフォルトでペンギンの画像を表示して回転させていますが、imgurl という画像の URL をパラメータ指定することで表示画像を変更することができます。例えばこの画像を使いたい場合は、画像の URL(https://1.bp.blogspot.com/-A-AUINeSdLY/XexqsbbnoVI/AAAAAAABWiA/1zwr87fQJbsntV_Ez_ky6-RJPRfgeCZ5ACNcBGAsYHQ/s400/kinshi_mark_computer.png)をパラメータとして以下のように指定します:

https://dotnsf.github.io/transform-rotate/?imgurl=https://1.bp.blogspot.com/-A-AUINeSdLY/XexqsbbnoVI/AAAAAAABWiA/1zwr87fQJbsntV_Ez_ky6-RJPRfgeCZ5ACNcBGAsYHQ/s400/kinshi_mark_computer.png


こんな感じで表示できるはずです:
2020020106




各種メディアのニュースでも話題になっていますが、香川県が「香川県の子どもたちがネット・ゲームの長時間の利用により、心身や家族的・社会的な問題を引き起こすネット・ゲーム依存に陥らないために必要な対策を推進し、健全な育成を図るため、本条例を制定しようとするもの」という条例の素案を示しました。具体的には18歳未満の場合、1日にオンラインゲームは60分(土日・祝日・長期休暇中は90分)以内と規定する方針のようです(ただし子供にも保護者にも罰則なし)。


この内容で気になったのは、香川県内のルールだけでなく「ゲーム提供事業者に求める役割」が規定されようとしている点です。具体的には以下の第11条部分が相当します:
香川県の「ネット・ゲーム依存症対策条例案」【全文】

2020012501


※なお、この第11条に相当する事業者および香川県在住者とを対象に2月6日までパブリックコメントを受け付けています:
香川県ネット・ゲーム依存症対策条例(仮称)素案についてパブリック・コメント(意見公募)を実施します


「インターネットを利用して情報を閲覧に供する事業またはコンピュータゲームのソフトウェアの開発、製造、抵抗等の事業を行う者」をどのように解釈するかにもよりますが、僕自身も個人でオープンソースのゲームを作ったり、ネットで誰でも遊べる状態で公開したりしています。例えば来週の IT 勉強会の題材にもしようとしているスライドパズルゲームとかもその1つです。以下の URL にアクセスするだけで遊べてしまいます(遊び方は後述):
https://dotnsf.github.io/slidepuzzle/


↑こういう趣味開発レベルのゲームも「県民のネット・ゲーム依存症の対策に協力するものとする」の対象になっちゃうんですかね? という意見をパブリックコメントで伝える権利を有するのかな?(有する場合は協力しないといけないってこと??)


・・などなど、まあ色々言いたいこともありますが、とりあえず自分なりに考えた上で対策を講じてみました。対策済みのゲームはこちらから遊べます:
https://kawaga-game.mybluemix.net/


上記 URL にウェブブラウザでアクセスすると、以下のような位置情報へのアクセス許可を促すメッセージが表示されるので「許可」を選択してください(以下は FireFox を使った場合の画面です):
2020012502


利用者(=あなた)が香川県以外からアクセスしていた場合、以下のような画面になり、そのままゲームを遊ぶことができるようになります。ゲーム自体はカメラアイコン部分をクリックして、PC内に保存されている画像を選びます:
2020012503


すると選んだ画像が懐かしいスライドパズルとなって遊べる、というものです。一応移動回数やゲームを解くまでの時間がカウントされていて、競技性のある作りにしています:
2020012504


しかしアクセス元が香川県であった場合のみ少し挙動が変わり、画面ロード直後に以下のような警告画面が表示されます。これで上述の第11条で求められる対策努力が講じられているのではないかと自負しております(笑):
2020012505


このゲームのソースコードもこちらで公開しています:
https://github.com/dotnsf/kagawa


具体的な実現方法としては HTML ページの中で GeoLocation API の getCurrentPosition メソッドを実行して現在地の緯度・経度を取得しています。そして取得結果に対して Yahoo! デベロッパーネットワークYahoo! ジオコーダ API を使って緯度・経度を住所に変換し、その住所が「香川県」で始まっているかどうかを識別する、というロジックで実現しています。

少しだけ補足すると、アクセス元の識別はできているので、単なる警告に留めずに実際に利用時間を測定して、1時間を超えることがあったら強制終了、みたいなことができないわけではありません。まあこのゲームに限っては1時間超えても飽きずに遊んでもらえる可能性はかなり低いと思ってますけど・・


・・・どなたかの参考になれば幸いでございます。 (^^;

"Hash File Storage" という、(IBM Cloud を使って)無料でも運用できるウェブストレージサービスのソースコードを公開します:
https://github.com/dotnsf/hfs


もともとはマンホールマップという自作の位置情報付き画像投稿サービスの機能の一部として開発したものだったのですが、画像投稿機能部分を切り出して、かつハッシュ計算を加えた上で API を整備しました。基本ストレージとして IBM Cloudant を使いますが、IBM Cloud のライトアカウント(無料)の範囲内でランタイム含めて運用可能なので、よかったら IBM Cloud と合わせてお使いください。


機能そのものは「ファイルストレージ」です。用意されたサンプルページや API を使ってファイルをアップロードしたり、アップロードしたファイルをダウンロードしたり、というよくあるものです。各種機能を REST API や Swagger ドキュメントでも提供しており、容易に外部アプリケーションから呼び出して利用することも可能です。

最大の特徴は格納時のファイル ID をファイルバイナリのハッシュ値で管理している点です。したがって既に登録されているファイルと(ファイル名などは異なっていても)バイナリレベルで全く同じファイルを登録しようとすると、同じファイル ID が既に存在しているため「登録できない」というエラーが返ります。またファイルを登録する以外にも「このファイルと同じものが既に登録されているか?」だけを調べる API が用意されていて、一度登録した後になんらかの変更が加わっているか/いないかを ID(ハッシュ値)で調べることができる、という特徴があります。 このサービス自体には含まれていませんが、ブロックチェーンと連携することでバイナリファイルの真偽性保証や、対改ざん性の強化を実現するものです。


実際に動作を確認するにはソースコードを git clone するかダウンロード&展開し、IBM Cloudant のクレデンシャル情報を指定した上で Node.js で起動します。詳しくは README.md を参照ください。



このページのトップヘ