Webデスクトップの制作 #08 Asset機能の追加

CompornentとかAssetとかのフォルダで、いろいろなフレームワークで設置されているフォルダがあります。 Webシステムなどであれば、これらに、HTMLパーツや、いろいろな部品的なモノが格納されているので、 今後の修正や機能追加に素早く対応できるために、できるだけこれらの部品系は、単一ファイル化しておいて、それらをチョコっと修正するだけで簡単に反映できるようにするために、 今回はAsset機能というのを導入したいと思います。 そんなに難しいモノではなく、単にテキストファイルを読み込んで、メモリ上に保持して、再利用できる状態にするだけです。

デモ

今回から、Github pagesを利用してのデモ配信をしています。 ※今後のアップデートで最新版のみが表示されるので、該当のデモを見たい場合は、ソースをCloneしてコミットを戻してブラウザで表示して確認してみてください。

ソースコード

https://github.com/yugeta/web_desktop/ 今回のCommitは"#08"です。

解説

Githubのソース修正箇所を見てもらえると、いくつかのアセットファイルとモジュールファイルの追加が行われているのがわかると思います。 asset.jsは、基本的に、事前にリストアップされているファイル一覧を順番に読み込んで、classのstaticに配列で保存していく操作です。 ただ、これまでと違う点として、class="window"のdivタグ（ウィンドウのエレメント）が、テキストで扱われるので、設置後にソート処理を実行するために、再度エレメントを選択する必要があり、 それを簡易にするために、uuidという任意名をつけるようにしています。 ※uuidについては、uuid.js（ずっと前に作っていた自分ライブラリ）を追加してクラス呼び出しをするだけのモジュールです。 あと、もうひとつポイントがあり、assetとして保持するテキストファイルは、静的なテキストファイルであれば問題ないんですが、HTMLのいろいろな属性を埋め込むために、データ連動する必要があります。 これを実現するために、convert.jsというモジュールを追加しています。 これは、テキストファイル内にある、{{data}}のように、二重ブラケットで囲まれてその中の文字を変数（連想配列のkey値）と置き換える処理を入れることでかなり動的なテキスト情報を扱えるようになります。 コレ、Webサイトなどでも非常に便利に使えるのでオススメです。 ちなみに、{{hash[key]}}のように書くことで、多段配列や、複数階層の連想配列にも対応できるようにしているので、気になる人は、convert.jsのソースの中身を読み解いてみてください。

あとがき

Webデスクトップがだいぶ安定してきているんですが、まだ、アイコンがHTMLベタ書きという事に今更ながら気がついてしまいました。 そろそろ、データの構造化を行って、アイコン設置なども、データベースで動的にやらなきゃですね。