2018年3月18日日曜日

グルグル回転している長方形(Rectangle)と線(Ray)の当たり判定

3Dで回転しているキューブとRayの当たり判定の背後にある数式がいまいちよく分からなかったのでJavaScriptのCanvasを使って図解してみた。2Dも3Dもテストする軸(Axis)の数が変わるだけで内容は一緒。コードは以下より取得してもらいたい。
JSFiddle
GitHub(上に同じ)

数式の背後にある考えは以下。
Ray Box Intersection

以下図解。
右下のRay OriginがRayの起点になっている。directionでRayの方向を指定している。
const rayCast = new Ray(origin=new Vector(400, 400), direction=new Vector(-0.8, convertYUp(1)));

左上のオレンジと黄色の線で囲われている領域がくるくる回転しているRectangleとなる。
const obb = new RotatingRectangle(pos=new Vector(150, 200), size=new Vector(80, 50));

右下のRay Originから左上のRectangleに伸びている線(Vector)はRayとRectangleの距離を算出するためのものなので、投げかけているRayとは別物なので注意してほしい。
const vectorFromOriginOfRayToCenterOfRect = obb.pos.subtract(rayCast.origin);

当たっているとき(左下に「YES!」と出る)


当たっていないとき(左下に「NO Intersection」と出る)


この数式の肝はSlab(オレンジと黄色の線)とRayがいつ(Time)交わるかなので、Timeを算出しないといけない。Timeを求める式は以下。
Time = (Axis上に投影されたRay OriginとRectangle間の距離 +/- Rectangleのサイズ) / Axis上に投影されたRay Directionの長さ
const t1 = (lengthBetweenOriginOfRayAndCenterOfRectProjectedOnXAxis + obb.size.x) / lengthOfDirectionOfRayProjectedOnXAxis;
const t2 = (lengthBetweenOriginOfRayAndCenterOfRectProjectedOnXAxis - obb.size.x) / lengthOfDirectionOfRayProjectedOnXAxis;
const t3 = (lengthBetweenOriginOfRayAndCenterOfRectProjectedOnYAxis + obb.size.y) / lengthOfDirectionOfRayProjectedOnYAxis;
const t4 = (lengthBetweenOriginOfRayAndCenterOfRectProjectedOnYAxis - obb.size.y) / lengthOfDirectionOfRayProjectedOnYAxis;

Timeを求める元々の式は以下。
+/- Rectangleのサイズ = Axis上に投影されたRay OriginとRectangle間の距離 + Time * Axis上に投影されたRay Directionの長さ
Slabの位置を求める式からTimeを求める式に変換すれば前述の式になる。

Dot Product
投影されたほにゃららの長さを求めるにはDot Productを使用すればよい。


~まとめ~
同一軸上に投影すれば後は単純な長さの比較になるのでTimeが求まると理解するまで悶々と苦しんだけど、今はスッキリ。こんな投げやりな解説で伝わるかははなはだ心もとないけれど、誰かの理解の一助になれば幸い。分からないことありましたらコメントください。

2018年2月18日日曜日

ホームページを開設するには 前段

引き続き相談シリーズで行きます。相談シリーズの概要は以下をご参照ください。


今回から数回に分けて、巷にはあふれかえっていますが実際に自分でやるにはなかなか敷居の高いホームページの開設について説明していきたいと思います。

今回は前段としてなんのためにホームページを開設するのか、ホームページを開設することによって何が得られるのかという利点の面と、ホームページ開設につきまとう難点の面を説明します。

と言いますのも、後述する難点の面と重複するのですが、ホームページはしっかりしたものを作ろうとするとお金も時間もかかりますので、ホームページでなくても良いのであればなんらかの代替手段、たとえばFacebookであったり、Twitterであったり、食べログなどを利用するほうが格段に効果的だと考えられます。そのためにもホームページの価値を利点難点含めて正しく理解していただけたらと思います。

ホームページ開設によって得られる利点

ホームページの開設によって得られる利点としては以下の2点があげられます。
  • 情報発信が可能
  • イメージの確立

情報発信が可能

ホームページ開設による最大の利点は情報の発信をいつでも自由に、またどのような形でも表現できることにあります。インターネットが世間一般に広がる以前(ブロードバンドのインターネット環境が当たり前になったあたりで情報発信ツールとしてのホームページも様変わりし始めたので、ここでは2000年に入る前ぐらいでしょうか)でしたら広告という形でテレビや、新聞、雑誌に載せるかチラシを配る、または書籍を出版することぐらいでしか広く情報発信は行えませんでしたが、今やホームページさえあれば誰に気兼ねすることなく自由な形で世界に向けて情報発信が可能になりました。

飲食店であれば営業時間はもちろん、メニューやおすすめの品など、工務店であれば施工事例やおすすめリフォーム特集など、とにかく自分の望む情報を発信可能なのです。

さらにその情報の表現の仕方には制限がありません。

おすすめのメニューに画像をつけて理解の助けにしても良いですし、逆に文字だけにして硬派な印象にしてみたり、動画をつけて詳細に解説してみたり、と何をしても良いのです。

インターネット以前の情報発信と比較するために広告を例にとると、テレビCMであれば15秒なり30秒の枠を購入しその時間内で視聴者に情報を伝えることが求められました。雑誌であれば一枚のページ、または見開きページなどの枠組み、新聞であれば一面広告や、紙面の一部などの枠組み、とこのようにすでに決められた枠内での表現しか行えませんでした。

しかしホームページであればそのような制限がなく、あなたの望む100%の形で情報発信可能なのです。

イメージの確立

ここでいうイメージとはあなたの顧客があなたの発する情報・商品に対して抱くイメージです。ホームページであれば情報の表現方法を自由に決められますし24時間公開されていますので、イメージを確立するのにとても有用です。

イメージを確立する一例をあげてみましょう。ここではホームページではなく実店舗を例とします。あなたは中華料理屋を営みたいとします。その中華料理屋の店構えを誰が見ても「あ、中華料理屋がある」と一目瞭然で認識させたいならば、どうされますか?私であれば店構えの基調色を赤にし、龍をあしらった文様を端々につけるでしょうか。加えて金字で何かしらの漢字がのれんに書いてあれば遠目から見ても中華料理屋と簡単に認識されるでしょう。ユニークでもなんでもありませんが、これで中華料理屋があるという主張したいことが人に伝わりやすくなりました

では女性向けのファッションサイトを作る場合はどうでしょうか。ファッションを扱うので女性モデルの切り抜き画像を多用してみましょう。そのサイトがティーン向けであれば明るい色調とかわいいフォントにしてみるのも良いでしょう。そうではなく年配の女性向けであれば落ち着いた色調とシックなフォントにすると良さそうです。と、このようにターゲットに合わせた表現にすることで主張を明確にしイメージの確立を目指します。こういったことはチラシであれ雑誌の広告であれ日常的にデザインとして行われていることですが、ホームページにはさらに進んだ表現の自由があります。

雑誌、新聞、チラシであれば紙面に印刷しているので動きのない静的なものになりますが、ホームページであれば動画を流すことによって動的なものにできますし、さらにはユーザーに合わせた内容を動的に表示するといったことも可能なのです。またユーザーの操作に合わせて表示を変えたり、動きを加えたりといったインタラクティブ(双方向)な表現方法もあります。

このようにホームページ上での情報の表現方法はアイディア次第で大きな広がりを見せます。これらの特性を活かせば宣伝したいものや情報のイメージの確立はほかの媒体よりも容易に行えるのです。

ここで3例ほど2018年のホームページのトレンドを紹介しましょう。どのような表現がホームページ上で行えるか参考にしてください。Webデザイン、これからどうなる?すぐに使えるアイデア見本集58選を参照しました。

  • Happier Village Toshiba
    上下方向にスクロールすることによって表示が変わっていきます。レトロでポップな感じのデザインです。
  • Buddha Pizza
    ユニークなアイコンも目を引きますが構成がスッキリとしていてとても見やすいです。
  • Loyal Coffee
    コーヒーショップのホームページです。ホームページ上ではスペースを贅沢に使うことでゆったりした感じが演出されています。

ホームページ開設の難点

ここからはホームページを開設するにあたっての難点を説明します。
  • おしゃれなホームページを作るのは大変
  • ホームページを作っても単体での広告効果は少ない
  • 維持費がかかる

おしゃれなホームページを作るのは大変

ホームページを作るのは至極簡単です。最寄りの書店で「HTMLとCSSでホームページを作る」といった感じのタイトルの書籍から適当に一冊選び、それを見ながらポチポチと打ち込めば基本的なホームページは作成可能です。実はホームページの基本となる骨子は至極単純なのです。ただ、それとあなたが目指している「あなたの発信する情報のイメージ確立」を助けてくれるホームページはまったくもって違うものなのです。

イメージの確立を行うにはデザインのいろはを知らなければなりません。またIT全般に言えることですが、ホームページの世界も日進月歩で、前述したホームーページのトレンドで紹介されているホームページは最新技術を駆使して実現されています。

ホームページの基本は簡素なのですが、デザインしたものを最新技術を駆使してホームページに落とし込むのは非常に高度な技術が必要になります。そのため自作するにはハードルが高いですし、外注するにしてもゼロからの作成ですと数十万円の費用は必要になるかと思われます。

ただWiXテンプレートモンスターのような出来合いのホームページのテンプレートを基に作るのであれば、数万円から制作依頼を受けている会社もありますので自分のイメージと合致するものが見つかったのであればそういったものを活用するのも一つの手だとは思います。

ホームページを作っても単体での広告効果は少ない

ホームページをただ作って開設しただけではそのホームページのURLを知っている人しかアクセスできません。そのためGoogleやBingなどの検索エンジンに登録し、検索によって人が訪れるようにする必要があります。しかし、検索エンジンに登録したからと言って多くの人眼に触れるとは限りませんし、むしろほぼゼロに近いというのが実情です。

そのため検索エンジンの検索結果の上位に表示されるように対応する(世間一般ではそれをSEOと呼びます)のですが、近年は扱っている情報そのものの価値を検索エンジンが正しく認識しそれによって検索結果の並び順が決定するようになってきたので、以前のように検索エンジンを騙すような手法で検索結果の上位に表示するのは難しくなっていますし、逆にペナルティを受けて検索結果から除外されたりもするようです。そのため扱う情報の価値と一意性(ユニークさ)がとても重要になってきます。

例としてレストランをあげましょう。あなたは「ボンジョールノ」というイタリアンレストランを東京都渋谷区の渋谷駅、宮益坂周辺で経営しているとします。そのレストランのホームページをつい最近開設したとしましょう。そのホームページがどのように検索結果に表れるか見てみましょう。

ユーザーが「東京 レストラン」と検索したとします。仮に都内の飲食店、レストラン形式の店舗が2万店あったとしたら、あなたのホームページは最後尾のあたりの2万番目で表示されるのが予想されます。これは「東京 レストラン」という枠組みの中ではつい最近開設されたばかりのホームページの情報価値は非常に低いからです。

次いでユーザーが「渋谷 イタリアンレストラン」で検索したとします。渋谷は飲食店がとても多いですし、イタリアンレストランの数も多いのでここでも最後尾あたりで表示されるのが予想されます。先ほどと同様にこれは「渋谷 イタリアンレストラン」という枠組みの中での情報価値が低いからです。

次いでユーザーが「渋谷 宮益坂 イタリアンレストラン」と検索したとします。ここで初めてあなたのホームページの情報価値が高く評価されます。とても特定的な情報である「宮益坂にあるイタリアンレストラン」に合致する店舗はそこまで多くないので、つい最近開設されたばかりにも関わらずあなたのホームページは検索結果の上位に表示されることが予想されます。

最後にユーザーが「宮益坂 ボンジョールノ イタリアンレストラン」と検索したとします。ここまで特定してやっと検索結果の最上位、もしくは10件以内に表示されることが予想されます。なぜ必ずしも最上位ではないかというと、食べログなどの情報集約型のホームページ(一般的にはこのようなものはWebサイトと呼びますがこのブログ記事ではホームページ呼称で統一しましょう)の方が高く評価されることがままあるからです。

と、このようにホームページ単体の広告効果は高くはないのでホームページを開設したとしても「これで日本中から予約の連絡が来る!」というようなことは起こりえません。ホームページは任意の情報を発信できますが、情報発信可能なのと、その発信した情報が誰かに伝わることとはまったくもって違うのだということは正しく認識しておかなければなりません。

維持費がかかる

外注するのであればホームページの作成にも費用はかかりますが、ホームページを開設・公開し続けるのにも費用がかかります。サーバー費用とドメイン費用になります。

サーバー費用
ホームページを公開するには24時間稼働し続けているサーバーにホームページを設置する必要があります。グローバルIPさえあれば個人宅でもサーバーを設置、ホームページを公開することは可能ですが、電気代やPC機器の故障などを考えると下記のようなレンタルサーバーが一番現実的かと思われます。
アマゾンの方はデータの転送量などによって値段が変わるのですが、開設初期の人気のないホームページであれば最低価格で事足りるでしょうから年額120円ほどかと思われます。またさくらインターネットのほうも最低価格の設定では年額1500円ぐらいのプランがあります。

ドメイン費用
ドメインというのは先ほど出てきたグローバルIPにつく名称のようなものです。マツオソフトウェアのグローバルIPは157.7.128.94ですがドメインはmatsuo-software.comになります。IPアドレス(157.7.128.94のような数字の羅列です)を覚えるは難しいですが、yahoo.co.jpだったりamazon.co.jpを覚えるのは難しくないかと思います。ドメインというのはヒューマンフレンドリーな別称と言えます。先ほどのレストランの例でしたらbuongiorno-miyamasu.co.jpなどのドメインがふさわしいかと考えられます。

ドメインの価格はco.jpやnetなどのドメインの種類にもよるのですがおおむね年額数百円から数千円かかります。


まとめ

ホームページ公開の利点、難点を説明しました。ホームページを意味あるものにするのはなかなかに難しいということが伝わったらと思います。ただ単に情報発信場所とするのであれば、FacebookやTwitterを組み合わせれば事足りると思いますのでそちらでも良いかもしれません。飲食店などであれば食べログ、ぐるなびなどの利用を検討されるのも良いでしょう(掲載料などはよく検討されたほうが良いとは思いますが)。

しかし、イメージの確立、ひいてはブランディングまでも行うのでしたらホームページというのは非常に良い場所になりますので費用と時間、労力をかける価値はあると考えられます。

2018年2月2日金曜日

ITに関すること何でもご相談ください

先日、レストランでオーナーシェフをしている友人より「ホームページを作りたいんだけどどうしたら良いかな?」という相談を受けました。

友人曰く「ぐるなびとかでもいいんだけどちゃんとしようとするとお金結構かかるみたいなんだよね」という話でした。私も寡聞にして食べログやぐるなびの料金がどうなっているか知らなかったので色々と友人に尋ねたところ、友人も詳細は知らないらしく伝聞情報で大体の費用を推測するしかそのときはありませんでした。ただ自分でホームページを作るにしても、まずホームページを作る時点で何かしらの費用は発生する(何らかの作成サービスを利用する、または制作会社に依頼するなど)し、作成されたホームページを設置、公開し続けるために毎月いくばくかの固定費が発生すると伝えたところ、ぐるなびなどを使用せずに自分でホームページを作って宣伝するのはなかなかに難しいということが理解できたようでした。

また次のような相談を受けたこともあります。

伯母の勤めている職場で従業員の情報を管理するソフトウェアがあるそうなのですが、そのソフトウェアはかなりの年代物らしく、また保守管理していた従業員の定年退職が近くなり、代替手段を探しているという話でした。伯母の職場は従業員も少ないですし、代替手段に潤沢な費用をかけられる状況でもありませんでした。詳しい状況がわからないとなかなか効果的なアドバイスもできませんのでそのソフトウェアで何を行っているのかを詳しく聞いてみたところ、どうやら専用のソフトウェアで行う必要もなさそうな内容で、エクセルなどでも代替できそうでした。ただエクセルでは誤ってデータを削除してしまったり、意図せぬ編集なども起こりえるので単純に置き換えるのではなく自動バックアップなどの仕組みを構築したほうが良いと伝えました。伯母が私の伝えた内容を職場に持ち帰ったところ私にまた話が戻ってきまして、担当の方と詳細に話したところ初期のアドバイスとは違う形ですが誰でも保守管理できる形に移行できました。

こういった相談が友人・知人からあると再認識するのが、ITというのは今も昔も馴染みのない方々には変わらず敷居が高いのだということです。

一つ目のホームページの件などは、少しITスキルの高い方であればGoogleなどのサーチエンジンを使って情報を集めることができるでしょうし、二つ目のソフトウェアの件などもPCに詳しい方であれば同じような解決策に思い至れたかもしれません。ただ、ITスキルも乏しい、資金も潤沢ではない場合はなかなか思うような結果を得られず、困った・不便な状況を強いられていることが多いのではと推察されました。

そこで、ITに関することを何でも気軽にきける存在として私がお役に立てればなと思い立ちましてこのような場を設けることにいたしました。
  • 業務をシステム化することによって効率化を図りたいけどいくらかかるのか
  • 楽天にお店を出店したいけどやり方がわからない
  • アマゾンストアに出店するにはどうすればよいのか
  • ECサイトを作りたい
  • ホームページを公開したい
  • 保守する人員のいない小規模システムをどうすればよいか
  • スマホアプリを作りたい
などなど、上記の内容に限らずなんでも良いのでITに関することで窓口がどこか分からない方がいらしたら下記までお気軽にご連絡・ご相談いただけたらと存じます。