アプリ追加処理ができたので、以前ブログで作った、Javascriptの計算機アプリをWebデスクトップに追加してみようと思います。
追加する時に気がついた仕様は、ドンドン盛り込んで行こうと思います。
デモ
計算機アイコンをクリックすると、Javascriptで作った計算機アプリが表示されます。
うまく表示されていない場合は、「メニュー」-「データ初期化」をしてください。
※デモは最新版が表示されています。該当のデモを見たい場合は、ソースをCloneしてコミットを戻してブラウザで表示して確認してください。
ソースコード
https://github.com/yugeta/web_desktop/
今回のCommitは"#24-edit"です。
解説
今回の処理は、さほど開発を伴うわけではないです。
まずは、新しくアプリを追加する場合には、setting.jsonのdesktop_iconsに、追加したいアイコンの情報を付与します。
{
"id" : "calculator",
"name" : "計算機",
"type" : "app",
"parent_id" : "",
"target" : "asset/calculator/index.html",
"window_size" : {
"status" : "fit"
}
}
assetフォルダ内に、calculatorというフォルダを作って、以前作った計算機アプリのソースコードをそのままブチこみました。
[Javascript] 電卓作ってプログラミング学習 その2
上記のブログ内に書かれているソースコードです。
そして、innerHTMLの際に、javascriptが実行されない問題を解決するために、lib/inner_html.jsというモジュールを追加しました。
これは仕事でホームページ納品の時にもよく使うモジュールを少しWebアプリ用に修正したバージョンです。
やっていることは、テキストとして取得したhtmlの文字列を、対象のウィンドウに対して、innerHTMLするんですが、その時に、scriptタグのみを抽出して、
タグごとにそのまま実行をしてあげるという処理を追加しています。
ちなみに、scriptタグに付与されている属性は、そのまま継続して、src読み込みと、プログラム実行を切り分けて処理するようにしています。
便利クラスとしてモジュールを作っておいたので、ファイルをコピペしてそのまま別環境で使うことも可能かも（多少手直しが必要かもしれませんが）。
そして、今回機能追加したもう一つのポイントは、アプリで実行するフォルダ内に、cssやscriptの読み込みパスが、どこのフォルダに入れられてもローカル処理できるように、
src属性とhref属性に関して、相対パスの場合のみ、そのアプリフォルダのルート階層を付与してあげるようにしました。
こうすることで、アプリはフォルダ内でローカル開発することもできるし、Webデスクトップとの以前関係をさほどきにしなくても良くなるという見立てです。
これは実際にアプリを、付け足して開発していく時に大きな効率アップに繋がると確信しました。
そして、今回作って気になるポイントというのもいくつか生まれました。
１、ウィンドウデザインをアプリ側で変更できるようにする仕様。
２、ウィンドウサイズの取得が、アプリ表示完了イベントを取得しずらいので、難しい点。
１番は、ウィンドウのヘッダ部分をアプリ側でコントロールできるようにすればいいのですが、あまり依存関係を作りたくないので、今のところはウィンドウデザインはそのままにすることにしています。
（そのうちに考えたいと思います。）
２番は、ウィンドウ起動後のコールバックなどの仕様を入れないとどうしても画面サイズがおざなりになってしまいます。
または、setting.jsonでのwindow_sizeで直接指定してもらう仕様で現在はそのままにしています。
※status:"fit"という、内容に合わせてフィットする仕様を作りかけていますが、動的に変化する項目とか、画像の読み込みを待たなければ行けない事が判明して、今のところ機能していません。
あとがき
これまでブログで作ってきたいろいろなプログラムを、Webアプリに実装しておくことで、便利ツールとして使うことが可能になった瞬間ですね。
毎日書いているブログで、htmlのエンコード処理や、画像の調整などは、過去にツール化したものもたくさんあるので、是非載せていきたいですね。
でも、このWebアプリは、あくまで汎用性を重視したOSSツール的な扱いにしたいので、デフォルト搭載アプリはなるべく内容にしておきたいというのもあります。
通常のOSなんかよりよっぽど気を配る範囲が大きいような気がするのは、作っている本人しかわからないんでしょうけどね。
0 件のコメント:
コメントを投稿