Webデスクトップの制作 #23 お問い合わせフォーム設置

ファイル表示ができたので、次にWebデスクトップの肝中の肝な機能である、アプリ機能の構築に着手します。 アプリ機能というのは、表示されているウィンドウの中で、それぞれのアプリ独自の機能を表示して、それぞれの挙動を発動する事を目的にします。 通常のOSは、この独立したウィンドウ内で動くプログラムの事をアプリという概念で動かしていると思います。 Webデスクトップも全く同じ概念にした方がいいですからね。 簡単に言うと、ウィンドウの中が、iframeタグみたいになっていると、別のサイトのページを表示することができるようなイメージですね。

デモ

うまく表示されていない場合は、「メニュー」-「データ初期化」をしてください。 ※デモは最新版が表示されています。該当のデモを見たい場合は、ソースをCloneしてコミットを戻してブラウザで表示して確認してください。

ソースコード

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

解説

jsフォルダのroot部分に、app.jsを追加しました。 ファイル表示の時はfile.jsを追加したのと同じ感じで、アプリケーション専用の表示にするようにしました。 そして、今回は最初からヘッダメニューに表示されていた「お問い合わせ」ボタンを押したら起動する、アイコンなしアプリも機能として実装したいと思います。 でも実は、アイコン無しに見えますが、setting.jsonのdesktop_iconsの中に、お問い合わせ用のデータを追記しました。 { "id" : "contact", "name" : "お問い合わせ", "type" : "app", "parent_id" : "app", "target" : "data/contact/index.html", "window_size" : { "width" : 500, "height" : 400 } } この中の、parent_idに、appという値を入れてますが、appというフォルダ対象のアイコンが存在しないので、表示されていないだけで、透明のアイコンは存在するというデータの持ち方ですね。 あくまでアイコンデータとして登録しておくと、アプリとして起動ができるという風にしておくことで、以後の管理などが便利になるはずです。 parent_idは、appという文字列じゃなくてもよくて、他のiconデータにそのidが存在していなければ、どんな文字列でも問題ありません。 ただ、今後、アプリケーションフォルダみたいなモノを作りたいと思ったら、appという同じ名前で複数登録するようにしておくと、いいかもという理由です。 window機能に新規に追加したのは、window_sizeとして、初回表示時のサイズを記載できるようにしておきました。 あと、今回最大の機能追加だったのは、アプリ起動をurlでもコントロールしたかったので、ハッシュ値に起動するアプリ（アイコン）のidをセットすることで、ページ表示時にアプリ起動ができるようにしてみました。

ハッシュ値について

ハッシュ値というのは、urlの後ろにくっついてくる、"#contact"みたいに、ページ内のid値(name値)に自動スクロールしてくれる、HTML特有の機能です。 今回のwebデスクトップは、PCでの表示の場合は、スクロールをしないようにするため、ハッシュ値を便利にユニークIDとして使うことが可能になるんですね。 デモ表示だとハッシュ値の操作ができないので、githubのpages表示で、urlの後ろに#contactを付けて起動してみてください。（以下リンク） https://yugeta.github.io/web_desktop/#contact

あとがき

アプリ機能は、かなりカスタマイズできるようにしなければ、今後のアプリ追加が使いづらくなるので、今後設計仕様を変えるかもしれません。 でも、とりあえず、ウェブサイトとしてのアプリ機能を追加できたので、次はゲームやツールなどを搭載した機能デモを作ってみたいと思います。