今回からWebデスクトップの開発を進めていきます。
基本的な構造は、HTML5構成とデータ管理APIの2種類の構築です。
特にインターフェイスとしての使い心地が重要視される、HTML5のデスクトップUIは、念入りに構築していきたいと思います。
今回は、HTML5のフロントエンドの基本部分であるフレーム構造（フォルダ構成）をルール化します。
フォルダ構造について
/ Root directory
├ data
│ ├ desktop
│ └ folder
├ img
│ └ icon
├ page
│ ├ common
│ │ ├ css
│ │ └ js
│ └ desktop
│ ├ css
│ └ js
└ index.html
ヘタな依存を防ぎたいのと、バニラ構造がとにかく好きなので、特別なフレームワークなどは使わず、ベタに作っていきます。
このまま、別のフレームワークに組み込むこともできると思うので、ご自身で気に入った方式で構築するのがオススメです。
dataフォルダ
各種設定ファイル(.json）などを格納する予定
imgフォルダ
画面に表示するアイコン等の保存場所
page
個人的に通常ホームページで使用する時は、トップページからの下層ページとしてpageフォルダを使っているので、
今回は、ホームページとしての仮想ページ利用と合わせて、いろいろな機能の格納場所としても使っていきます。
index.html
ルート改装にindex.htmlを設置しておけば、大体のサーバーではドキュメントルートになってくれるので、Webデスクトップの入口ファイルとして設置しておきます。
SSRっぽくしたい場合は、このファイルをindex.phpなどに変更して、内部に初期読み込みのプログラムをechoしてあげることで、処理速度などが少し上がると思います。
でも、そうした処理は、完成後に精度アップをやる際に行いたいと思うので、当面はシンプルなHTMLで構築していきます。
ソースコード
index.html
<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='utf-8'>
<link rel='stylesheet' href='page/common/css/style.css'>
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<title>ページタイトル</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="サイトの説明文" />
<meta name="keywords" content=">サイトで使っているキーワード" />
<script type='module' src='page/common/js/main.js'></script>
<meta property="og:title" content="ページタイトル" />
<meta property="og:type" content="website" />
<meta property="og:url" content="サイトURL" />
<meta property="og:image" content="サイトのアイキャッチ画像" />
<meta property="og:site_name" content="ページタイトル" />
<meta property="og:description" content="サイトの説明文" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:description" content="サイトの説明文" />
<meta name="twitter:site" content="サイトURL" />
<meta name="twitter:image" content="サイトのアイキャッチ画像" />
<meta property="image_src" content="サイトのアイキャッチ画像" />
</head>
<body>
<input type='hidden' name='ip'>
<header>
<a class='logo' href='./'>
Logo
</a>
<ul class="menu">
<li>
<a href='#news'>
最新情報
</a>
</li>
<li>
<a href='#contact' data-logined>
お問い合わせ
</a>
</li>
<li>
<label for="menu">
メニュー
</label>
<ul>
<li>
<a class='sort-icon'>
アイコン整列
</a>
</li>
<li>
<a href='#link'>
Links
</a>
</li>
</ul>
</li>
</ul>
<div class='time'><span class='ymd'></span><span class='his'></span></div>
<label for='menu_toggle'>
<div class='hamburger'>
<span></span>
</div>
</label>
</header>
<main class='desktop'></main>
</body>
</html>
common/css/style.css
#desktop{
--header-size : 50px;
--main-size : calc(100% - var(--header-size));
--color-bg1 : #6bd8e5;
--color-bg2 : #98cead;
width : 100%;
height:50vh;
min-height: 300px;
box-shadow:4px 4px 20px rgba(0,0,0,0.5);
display:flex;
flex-direction:column;
gap:0;
}
#desktop,
#desktop *{
white-space:normal;
}
#desktop main{
height : var(--main-size);
position:relative;
z-index:1;
background: linear-gradient(-45deg, var(--color-bg1), var(--color-bg2));
}
#desktop header{
width:100%;
height : var(--header-size);
display : flex;
gap:20px;
align-items : center;
padding:0 10px;
background-color:white;
position:relative;
z-index:100;
}
#desktop header .time{
padding-right:10px;
}
#desktop header .time *{
font-size:0.8em;
display:block;
height:30%;
text-align:right;
}
#desktop header .time > *{
display:block;
margin:0;
}
#desktop .menu{
--hover-color: #FDD;
height:100%;
margin-left:auto;
display:flex;
align-items:center;
gap:10px;
}
#desktop .menu li{
height:100%;
padding:5px;
display:flex;
gap:2px;
align-items:center;
justify-content:center;
cursor:pointer;
position:relative;
}
#desktop .menu *{
color : black;
text-decoration:none;
}
#menu .icon{
width:20px;
height: 20px;
fill:black;
vertical-align:middle;
}
#desktop label[for='menu_toggle']{
display:none;
}
/**
* サブメニュー
*/
#desktop .menu > li > ul{
display:flex;
flex-direction:column;
background-color:white;
min-width:100px;
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%);
margin:0;
padding:0;
}
#desktop .menu > li:has(ul)::after{
content:"";
display:inline-block;
width:0.5em;
height:0.5em;
border-color:black;
border-style:solid;
border-width:0 1px 1px 0;
transform:rotate(45deg);
margin-left:4px;
}
#desktop .menu > li:hover{
background-color: var(--hover-color);
}
#desktop .menu > li:not(:hover) > ul{
display:none;
}
#desktop .menu > li > ul li{
height:var(--header-size);
padding:5px 10px;
cursor:pointer;
justify-content:start;
}
#desktop .menu > li > ul li *{
white-space:nowrap;
}
#desktop .menu > li > ul li:hover{
background-color: var(--hover-color);
}
@media (max-width:500px){
#desktop label[for='menu_toggle']{
display:block;
}
#desktop header nav{
height:100%;
margin:0;
width:100%;
}
#desktop header .menu{
justify-content:flex-start;
width:100%;
height:100%;
background-color:var(--color-body-bg);
}
#desktop header .menu > *{
padding:0;
flex-grow:1;
}
}
#desktop .logo{
height:100%;
display:flex;
align-items:center;
text-decoration:none;
background-color:var(--color-bg);
}
#desktop .logo img,
#desktop .logo svg{
height:100%;
fill:var(--color-01);
}
@media (max-width:500px){
#desktop header .time{
padding:0;
}
}
デモ
画面表示と、メニュー部分ができました。
※モバイル用の表示仕様は、PC用機能完成後に設計します。
構成ルールについて
index.htmlが読み込まれたら、page/common/に置かれているモジュールを読み込むようにしています。
サイトでの基本仕様変更の場合は、できるだけpage/commonの内容書き換えで対応できるようにするためです。
パターンの違う複数のフレームバージョンを
page/フレームバージョンフォルダという風に設置しておくと、index.htmlのscriptタグ読み込みの切り替えだけで簡単にサイトリニューアルができてしまうというメリットもあります。
そして、page内の各フォルダには、cssとjsをそれぞれ独立した形で配置します。
それぞれが、class joinして、ソース連携することもありますが、基本的には、page内の各モジュールが独立した形になっているのが望ましいです。
機能追加する場合に、pageフォルダ内にモジュールフォルダを追加するだけみたいな事ができると非常に管理しやすくなります。
いわるゆ、フォルダ・ファイル構造的な
オブジェクト思考ですね。
あとがき
ここまでは、普通にホームページを作る作業となんら変わらないのですが、モジュール構成などは、アプリケーションの構造イメージを持っておいて、どういう機能でまとめるかとか、MVCっぽい構造を作っておくと、開発後期や完成後の運用時や機能追加の時に非常に助かります。
まあ、これからこのWebデスクトップにアイコンを配置して、それをマウスで操作できるようにして、ウィンドウを表示して・・・他にも様々な制約が必要になることを想像すると、非常に長い道のりになるかと思いますが、
地道に構築していきたいと思います。
気になることや、言いたいこと、ご要望などある方は、メッセージかコメントを送ってくださいね。
0 件のコメント:
コメントを投稿