«

»

9月 24

HTML5&CSS&JSでWindows 7やVista向けのアプリを作る方法

HTML5とCSS3でWindowsアプリを開発する方法(9x系~8まで対応)

モバイルアプリ開発ではHTML5やCSS3、JSを使った開発が主流になりつつありますが、そんな中Windowsでのアプリ開発は8からMetroスタイルでサポートされたものの、7までは使えません。

しかし、IEに付いているある技術を掘り起こすことでこの悩みは解消できます。

この技術はIE5からサポートされているので、HTML5やCSS3など新技術を使わないのであればWindows 95でも動かせます。

そしてなによりOS標準付属。つまりメモ帳とIEさえあれば開発できちゃうということです。

なおここでは趣旨はHTML5とCSS3なので、IE9を使います。WindowsXPを使ってる人はIE8でガマンしてください。

とりあえず作ってみる

このHTML5&CSS3&JavaScriptで開発できる技術はHTAです。いわゆる。なんか全然流行りませんでしたが、HTML5やCSS3、JSでソフト開発が主流になってきている現代、注目されてもいいはずです。説明ばっかりしていてもなんですので、Hello , Worldをやってみましょう。MSDNから引っ張ってくると、

  Hello, World

すごいシンプルです。業界標準もへったくれもありゃしません。これをテキストエディタで拡張子を.htaにして保存すれば確かに「Hello , World」とウィンドウが表示されてその中に出力されていることがわかります。

ですが、これでは考えたら分かりますがレタリングモードがQuirks。HTML5やCSS3を使う分にはちゃんと表示させたいので、

<!DOCTYPE html>
<html lang="ja>
  <head>
    <meta charset="UTF-8" >
    <title> HTAテスト </title>
    <style>
      *{
        padding : 0px ;
        margin : 0px ;
      }
      div{
        width : 600px ;
        padding : 15px ;
        margin : 0 auto ;
        margin-top : 15px ;
        background-color : skyblue ;
        border : solid 1px skyblue ;
        border-radius : 15px ;
        -ms-border-radius : 15px ;
      }
    </style>
  </head>
  <body>
    <div>Hello , World!</div>
  </body>
</html>

こうしたら角丸のついた背景で「Hello , World」・・・と表示されると思いたいのですが、そうはいきません。何が間違っているのでしょうか。ユーザーエージェントを調べてみましょう。

ちなみに、title要素に指定した内容がタイトルバーに表示されます。

<!DOCTYPE html>
<html lang="ja>
  <head>
    <meta charset="UTF-8" >
    <title> HTAテスト </title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
      $(function(){
        $("div").html(navigator.userAgent) ;
      })
    </script>
    <style>
      *{
        padding : 0px ;
        margin : 0px ;
      }
      div{
        width : 600px ;
        padding : 15px ;
        margin : 0 auto ;
        margin-top : 15px ;
        background-color : skyblue ;
        border : solid 1px skyblue ;
        border-radius : 15px ;
        -ms-border-radius : 15px ;
      }
    </style>
  </head>
  <body>
    <div>Hello , World!</div>
  </body>
</html>

これを.htaにして、文字コードはUTF-8で保存して実行すると・・・

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)

そうなんです。これ、標準ではIE7でレタリングしよるんです。IE8が入ってても9が入ってても7です。どうにかならんもんか。これでは「HTML5&CSS3」ではなく「HTML4.01&CSS2.1」になってしまいます。

IEのレタリングモードを強制的に変える

そういえば、レタリングモードをIEでは<meta>タグを用いて変更することができました。ためしにこの方法をとってみましょう。

<!DOCTYPE html>
<html lang="ja>
  <head>
    <meta charset="UTF-8" >
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <title> HTAテスト </title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
      $(function(){
        $("div").html(navigator.userAgent) ;
      })
    </script>
    <style>
      *{
        padding : 0px ;
        margin : 0px ;
      }
      div{
        width : 600px ;
        padding : 15px ;
        margin : 0 auto ;
        margin-top : 15px ;
        background-color : skyblue ;
        border : solid 1px skyblue ;
        border-radius : 15px ;
        -ms-border-radius : 15px ;
      }
    </style>
  </head>
  <body>
    <div>Hello , World!</div>
  </body>
</html>

こうすれば、IE9がインストールされていればユーザーエージェントはIE9のもので表示され、さらに角丸になってくれます。補足ですが、JSON.parseやdocument.querySelectorAllなどIE7で対応していないものもちゃんと使えます。

さて、IE9で表示できたところで、他の機能についていろいろ見ていきましょう。

<HTA:APPLICATION>タグ

HTA:APPLICATIONタグは、HTAに関していろいろ設定できる機能です。たとえばコンテキストメニューの無効(JavaScriptから右クリックのハンドルは受け取れる)、タイトルバーや最小化ボタンの表示の有無など。

ActiveXコンポーネント

書くのが面倒なんで自力で調べちゃってください。実はこのHTAやWindows Scripting Hostなどの界隈では、JScriptはそんなに人気が無くVBScriptが主流だという事実がありますが・・・。

ActiveXObjectとググればその他もろもろ色んなAPIが見つかると思います。

もちろん、IE9なのですからjQueryプラグインなどJavaScriptライブラリも使えます。その系でいろいろ実装しちゃうのもいいでしょう。たとえばCodeMirrorでシンタックスハイライト可能なテキストエディタを作ったり。

最後の方はちょっと投げやりですが、とにかくHTML5やCSS3やJavaScriptを使ったOSネイティブのデスクトップアプリをOS標準の機能だけで実装するというものでしたー

コメントを残す

メールアドレスが公開されることはありません。