Webデスクトップの制作 #25 インターネットブラウザの設置

Webブラウザの中に、インターネットブラウザを搭載するなんて、アホみたいな仕様だと思いません？ でも、これができるようになると、別サイトのWebアプリケーションを簡単に実行できるようになります。 URLをそのまま表示するのは、インラインフレームを使えば比較的簡単に行えるので、Webデスクトップの機能として追加をしてみたいと思います。

デモ

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

ソースコード

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

解説

これまでの仕様を大きく変えた点としては、setting.jsonのdesktop_icons内のそれぞれのアイコン設定で行っていた、iconというアイコン画像のファイル名を記載していた箇所を、 "img/icons/"のフォルダ内に入れていたアイコンファイル名にしていたんですが、アプリ仕様で、どうしてもアプリフォルダ内にアイコンを設置する必要があり、 それに伴って、特定フォルダ内のみというアイコン画像の仕様を全て変更することにしました。 実は当初からこのアイコンファイルの置き場を固定することにこだわっていたのは、アイコンセットを手軽に切り替えられる仕様をそのうちに追加しようと考えていたからです。 任意のフォルダ指定をそのまま変更するだけなので、特定のシステム用アイコンを複数デザイン持つことができて、手軽な見た目の切り替えができると思っていたのが浅はかでしたね。 アプリはどうしても、複数箇所にモジュールを設置するというのは、全体仕様として使いづらく、手軽にインストールできて、素早くアンインストールできる仕様がやっぱり使い易いに繋がることがわかりました。 という事で、setting.jsonも、icon設定を全て書き換えて、新たに追加した、ブラウザにも、独自アイコンを設置することができました。 { "id" : "browser", "name" : "ブラウザ", "type" : "app", "icon" : "asset/browser/icon.svg", "parent_id" : "", "target" : "asset/browser/index.html" } ブラウザアイコンの中身は、asset/browser/index.html内に書かれている、スタイルシートと、Javascriptによって、独自に機能するようになり、 ウィンドウ内の.body部分に、ぴったりフィットする縦横100%のcssを書き込んでおけば、簡易なインターネットブラウザのできあがりです。 上部のアドレスバーに、urlを入力すると、そのサイトが表示されるので、利便性もあがります。 ただし・・・ この機能には注意点があって、 一番使うであろう、https://google.com とアドレスバーに入力すると、エラー画面が表示されます。 これは、GoogleのWebサイトが、iframeでの表示を許可していないことが原因で、世の中での主要サイトは軒並みこの仕様がセットされていました。 YahooやAmazon、Facebookなども、iframeではアクセスできません。 とはいえ、できれば、WebAPI化されているサイトを読み込むとか、アドレスバーを廃止して、任意のサイトのみの表示に限定すれば、外部連携機能として使うことは可能なので、セキュリティエラーをなんとかしようとは思わないようにしましょう。

あとがき

今回設置したブラウザ用のアイコン、かわいいと思いません？ Webデスクトップは、統一されたデザインのアイコンを使って、スタイリッシュなWebの表示ができる一方で、 普通のパソコンOSがそうであるように、こうした独自アイコンを使って、バラバラのアイコンでも、見た目やクオリティにはあまり影響されない事がよくわかります。 重要なのは、デスクトップ全体の構成やデザインや、それぞれの動きなどのアニメーションなどだということが理解できました。