サイト制作の様子と設計画像

MMDモデルを多方向から見られるサイトを制作しています。

当サイトは「MMDモデルのキャラクターを多方向から見られるサイト（仮）」のサイト制作の様子を画像にした記録サイトです。<br><br>【サイトの閲覧方法】<br>左の小さなサムネイル画像をクリックすると、右側に大きな画像が表示される仕組みとなっています。<br>今、右側に表示されている画像は、当サイトにある「色々メモ」というメニューのページを静止画にしたものです（FHDモニターかつIEブラウザ閲覧時の画面）<br>このページは、サイト制作の様子を画像（FHD解像度用が標準）にしたものが主な内容となっていますので、スマホ向けには作られていません。<br>閲覧に関しての詳細は、サイト内にある「サイトについて・連絡」をお読みください。

▼2015/05/27▼

モデルデータの登録フォームを作成中（その3）<br>ドラッグアンドドロップさせる処理の手前までの状態です。<br>右側の「頭上・顔1・左側・正面・右側・後側・顔2」が表示されている枠内に用意した画像をドラッグアンドドロップで落とすと画像がアップロードされる仕組みにする予定です。<br>

▼2015/05/26▼

モデルデータの登録フォームを作成中（その2）<br>今回の追加箇所は3箇所。<br>①キャラクターの種類の選択ボタン。<br>②二次創作・版権キャラクターを選択すると「作品名」と「キャラクター名」の入力フォームが表示される。<br>③検索タグの登録フォーム。<br>やはり気になるのは、ドラッグアンドドロップによる静止画像のアップロードのプログラム！<br>しばらく触れてない処理内容だからスムーズに終わるか心配です。

▼2015/05/25▼

モデルデータの登録フォームを作成中（その1）<br>テキスト入力の部分はほぼ完成。<br>フォーム関係で手付かずの箇所は、タグ登録フォーム（左側に予定）と画像のアップロードフォーム（右側に予定）の二箇所。<br>特に画像のアップロードの部分は時間かかりそうです。<br>機能や使い勝手のことを考えると、画像フォルダーやソフトから、ドラッグアンドドロップで静止画像をアップロード出来る仕組みにした方が便利なので、動的プログラム（phpやperlなど）の組み込みが必要になってくる。取りあえず機能に合わせて自作します。

▼2015/05/23▼

画像枠の機能に変更を加えました。<br>変更内容は、制作者の名前をタグ化させたことです。<br>クリック選択型のタグ検索機能（サイト内に登録された情報のみ）を組み込むまでは、この枠周辺の作業は中断かな・・・

▼2015/05/22▼

画像枠に設定された機能を確認する様子（その1）<br>浦風の画像をクリックする直前の様子です。<br>現在制作中の「MMDモデルのキャラクターを多方向から見られるサイト（仮）」の機能設計にあたる部分を画像にしたものです。<br>MMDモデルが表示されている画像を囲む部分の機能を#1～#33の画像を使って説明されています。<br>興味のある方は、小さな画像をクリックして閲覧ください。<br>また、画像と一緒に説明枠も表示されます。<br>表示された説明枠は、マウスカーソルを載せると自動的に閉じる仕組みとなっています。

画像枠に設定された機能を確認する様子（その2）<br>浦風の画像をクリックした直後の様子です。<br>画像内に方向（頭上・左側・顔1・右側・後側）ボタンのメニューが表示されました。

画像枠に設定された機能を確認する様子（その3）<br>浦風の画像に方向ボタンを表示させた直後の様子です。<br>方向ボタンにマウスカーソルが乗ると自動的にの領域色が濃くなる仕組みになっています。

画像枠に設定された機能を確認する様子（その4）<br>浦風の画像に表示された顔1の方向ボタンをクリックした直後の様子です。<br>正面の静止画から、よりアップされた画像に変更されました。<br>と、同時に顔2の方向ボタンが表示されました（マウスカーソルが顔2に乗っている状態。領域色が濃くなっています）

画像枠に設定された機能を確認する様子（その5）<br>浦風の画像に表示された方向ボタン以外の領域をクリックした直後の様子です。<br>方向ボタン以外の画像領域をクリックすると方向ボタンのメニューが消える仕組みとなっています。

画像枠に設定された機能を確認する様子（その6）<br>浦風の画像を再度クリックした直後の様子です。<br>方向ボタンが表示されました。この一連の制御はjavascriptで処理されています。

画像枠に設定された機能を確認する様子（その7）<br>浦風の画像に表示された右側の方向ボタンをクリックした直後の様子です。<br>右側のボタンの意味は、こちらから見ての右側となります。逆に左も同じとなります。

画像枠に設定された機能を確認する様子（その8）<br>浦風の画像に表示された方向ボタン以外の領域をクリックした直後の様子です。<br>方向ボタンのメニューが消えました。

画像枠に設定された機能を確認する様子（その9）<br>浦風の画像を再度クリックした直後の様子です。<br>方向ボタンが表示されました。

画像枠に設定された機能を確認する様子（その10）<br>浦風の画像に表示された後側の方向ボタンをクリックする直前の様子です。

画像枠に設定された機能を確認する様子（その11）<br>浦風の画像に表示された後側の方向ボタンをクリックした直後の様子です。<br>後ろ側の画像に変更されました。

画像枠に設定された機能を確認する様子（その12）<br>浦風の画像に表示された方向ボタン以外の領域をクリックした直後の様子です。<br>方向ボタンのメニューが消えました。

画像枠に設定された機能を確認する様子（その13）<br>浦風の画像に表示された頭上の方向ボタンをクリックする直前の様子です。

画像枠に設定された機能を確認する様子（その14）<br>浦風の画像に表示された頭上の方向ボタンをクリックした直後の様子です。<br>頭上の画像に変更されました。

画像枠に設定された機能を確認する様子（その15）<br>浦風の画像に表示された方向ボタン以外の領域をクリックした直後の様子です。<br>方向ボタンのメニューが消えました。

画像枠に設定された機能を確認する様子（その16）<br>浦風の画像に表示された正面の方向ボタンをクリックする直前の様子です。

画像枠に設定された機能を確認する様子（その17）<br>浦風の画像に表示された正面の方向ボタンをクリックした直後の様子です。<br>正面の画像に変更されました。

画像枠に設定された機能を確認する様子（その18）<br>浦風の画像に表示された顔2の方向ボタンをクリックする直前の様子です。<br>顔2の方向ボタンは、顔1の方向ボタンをクリックした直後に表示されるボタンとなっています。

画像枠に設定された機能を確認する様子（その19）<br>浦風の画像に表示された顔2の方向ボタンをクリックした直後の様子です。<br>大きな画像が表示され、画像以外の領域が全体的に暗くなる仕組みとなっています。

画像枠に設定された機能を確認する様子（その20）<br>浦風大画像が表示された直後の様子です。<br>機能設計の話になりますが、この画像の周囲に特殊メニューを設置して何かできたらと考えています。

画像枠に設定された機能を確認する様子（その21）<br>浦風の画像をクリックした直後の様子です。<br>顔1の画像に変更されました。

画像枠に設定された機能を確認する様子（その22）<br>浦風のすぐ右側にあるツイッターのアイコン画像をクリックする直前の様子です。<br>関連情報を取得できる仕組みにしています。

画像枠に設定された機能を確認する様子（その23）<br>浦風のすぐ右側にあるツイッターのアイコン画像をクリックした直後の様子です。<br>モデル制作者のツイッターのリンクが表示されました。<br>URLをクリックするとブラウザの別タブに制作者のツイッターページが表示されます。

画像枠に設定された機能を確認する様子（その24）<br>浦風のすぐ右側にあるニコニコ動画のアイコン画像をクリックする直前の様子です。

画像枠に設定された機能を確認する様子（その25）<br>浦風のすぐ右側にあるニコニコ動画のアイコン画像をクリックした直後の様子です。<br>モデル制作者のニコニコ動画のリンクが表示されました。<br>URLをクリックするとブラウザの別タブに制作者のニコニコ動画ページが表示されます。

画像枠に設定された機能を確認する様子（その26）<br>浦風のすぐ右側にあるBowlRollのアイコン画像をクリックした直後の様子です。<br>モデル制作者のBowlRollのリンクが表示されました。

画像枠に設定された機能を確認する様子（その27）<br>BowlRollのリンクURLをクリックする直前の画像です。<br>クリックすると制作者のBowlRollページが表示されます。

画像枠に設定された機能を確認する様子（その28）<br>モデル制作者のBowlRollのリンク枠内に表示されている閉じるのボタンをクリックする直前の画像です。

画像枠に設定された機能を確認する様子（その29）<br>閉じるのボタンをクリックした直後の画像です。

画像枠に設定された機能を確認する様子（その30）<br>浦風の画像枠領域右下位置に表示されている「動画リンクを表示する」のボタンをクリックする直前の画像です。<br>この枠にはモデルデータの説明が表示されています。

画像枠に設定された機能を確認する様子（その31）<br>モデルデータが使用されている動画枠が表示された直後の画像です。<br>

画像枠に設定された機能を確認する様子（その32）<br>丸いボタンをクリックすると再生数の多い動画サイトにリンクされます。<br>この機能は廃止され、クリック選択型の検索機能に統合する予定です。

画像枠に設定された機能を確認する様子（その33）<br>浦風以外の箇所もいじってみました。<br>現時点では、1モデルにつき7種類の画像まで表示可能となっていますが、複数の種類（ポーズとステージ）を登録できるように仕様変更する予定です。<br>見るだけ、検索できるだけでしたら有り触れていますので、何か面白い機能を仕込ませようよ模索中です。<br>今このページを見られている方で意見や提案などある方いましたら、是非ツイッターの方から気軽に連絡ください（興味のある方からの連絡やフォローは大歓迎です）

画像テキスト

色々メモ

・当サイトはＰＣ用サイトです。
・ＦＨＤモニターでの閲覧を推奨します。
・制作の様子を画像で公開しているサイトです。
・画像をクリックすると大画像が表示されます。
・管理人への連絡はツイッターからお願いします。

自分用の即席サイトで御免なさい。

独りで作れるのか？

　最初は既に公開されているスクリプトを使用してＭＭＤモデルを操作することから始まりました。
テストの結果、モデルデータであるＰＭＤファイルならウェブサイト上で動作することを確認（驚き）
とても興味深いスクリプトでしたが、開発中段階？らしいので様子見ということにして断念。

静止画や動画を使うことにします・・

管理人への連絡について

管理人への連絡はツイッターからお願いします。

https://twitter.com/tomakaki

サイトついて

当サイトは、現在制作中の「MMDモデルのキャラクターを多方向から見られるサイト（仮）」のサイト制作の様子を画像にした記録サイトです。
管理人が個人的に開設したウェブサイトとなっていますので閲覧の際には色々と不便が生じることがあります（PC向けサイト/最新版のIE推奨・FF可/FHDモニター推奨）
今後のサイト制作の様子は、両方（ツイッターで発信・当サイトで静止画を全て記録）で更新していく予定です。

※当サイトで表示されている静止画について

管理人：10ma_san

【サイト名】MMDモデルのキャラクターを多方向から見られるサイト（仮）
【制作開始日】2015/05/15
【制作者】10ma_san
【完成予定日】未定
【内容と機能】
MMDモデルを他方向から見られる機能
モデルデータやモデラーさんを丁寧に紹介する機能
クリック選択型の検索機能（ワード入力不要）・他

管理人がウェブ制作に必要なコードを直接打ち込み自作したものです。
いじりたい箇所が複数ありましたので、ブログや出来合いものをカスタマイズさせるサイトは利用しませんでした。

PC閲覧向けに作られていますので、スマホ閲覧では正常に表示されないという意味合いになります。
コードの方は、閲覧者には無関係となりますが、javascriptだけではなくcssのposition:fixedなども連発させています。
サイト制作に関心ある方がソースコードを見れば、香ばしい顔をするような記述となっていることでしょう。
素早く作成させることを優先としましたので、中身には触れないで下さいね。
今の話をイラストで例えると、少し見やすくしたラフ画みたいなような状態です。そういうことですので気にしないで下さい。
その他の情報→
1920×1080モニター推奨。
最新ブラウザ IE推奨◎/FF○/他シカト（ただし、FF未対応コードを数箇所使用しています。簡易的処理で取りあえず見ることはできます）
ブラウザでの javascript 動作許可必須。

【当サイトで使用されている静止画について】
MMDモデラーさんが二次創作として作成されたMMDキャラクターモデル（PMD/PMXファイル）をMikuMikuDanceで動作させたときの静止画像になります。
サイト内に表示された静止画像を複製して、原作及び関係者様に迷惑や問題をかける行為（不適切な加工や利用方法・違法行為）を行っても、管理人及びその関係者は、一切の責任を任を持ちません。
サイト内に表示された静止画像の利用は、自己責任となりますのでご注意ください。

【管理人の情報】 10ma_san
虫が嫌いなのに大自然が好きなアウトドア派の困った人です。
サイト制作は、前の職場の部署で覚えました。
使える言語は「html/css/javascript/php/perl」など。
MMDは、最近はじめた初心者です。
色々と教えてくださる方が出来ると嬉しいです。
ツイッターから「よろしく」や「サイトを見た」とかの一言でも構いませんので気軽に話しかけて下さい。