なでしこ配布キットを使ってデスクトップアプリを作ってみよう

最近ではブラウザからアプリを使う「Webアプリ」が増えています。しかし、オフラインでも使えるデスクトップアプリがあると便利な場面も多いものです。そこで、今回は「なでしこ3配布キット」を利用して、Windows/Macで動くデスクトップアプリを作る方法を紹介します。例として簡単なデジタル時計アプリを作ってみましょう。

• 

  配布キットを使うと手軽にデスクトップアプリを作成できる)

デスクトップアプリのメリット

「Webアプリ」とはブラウザから使うアプリのことです。基本的に「なでしこ3」はWebアプリとして提供されています。インストールの必要もなく、ブラウザ上でプログラムを作って動かすことができるのが特徴です。

とは言え、デスクトップアプリであれば、インターネットに繋がっていない時（オフラインの状態）でも使うことができます。また、ショートカットをデスクトップに配置して、アイコンをダブルクリック一発で起動できるというのも大きいでしょう。

そのため、Webブラウザで動かすなでしこ3を、オフラインでも動かせる「なでしこ3配布キット(nadesiko3webkit)」が先日公開されました。これを利用すると、手軽になでしこ3のプログラムをデスクトップアプリとして動かすことができます。

• 

  なでしこ3の配布キットを使うと手軽にデスクトップアプリを作ることができる

それでは、この配布キットを利用して、簡単なデスクトップアプリを作る手順を紹介しましょう。

配布キットをダウンロードしよう

まずは、配布キットを入手しましょう。こちらからダウンロードできます。原稿執筆時点では、Windows版とmacOS版があります。

• 

  ダウンロードサイト

なでしこ3配布キットには、OSのデフォルトブラウザ(Edge/Safari)を動作ランタイムとして利用するWebView版と、Google Chromeをランタイムとして使用するChrome版の二種類があります。ファイル名でWebView版が「＊＊＊-nako3-webview.zip」でChrome版が「＊＊＊-nako3-chrome.zip」と分かれています。

筆者のオススメはChrome版で、例えば、Windowsを使っているなら、「win-nako3-chrome.zip」をダウンロードします。ただし、この場合は、Google Chromeをインストールしておく必要があります。

なお、OS標準のブラウザを使うWebView版の方が汎用的に感じるかもしれませんが、Edgeの場合は、別途WebView2ランタイムのインストールが必要になる可能性があります。

この「可能性がある」という部分が曲者です。WebView2ランタイムをインストールしなくても動いたという人も多くいるのですが、インストールしないと正しく動かない人もいてトラブルの元になりそうなのです。それならば最初からGoogle Chromeが必要なChrome版を選んでおけば安心というのが筆者の考えです。

上記インストールの問題に加えて、Chrome版の方が、忠実にWeb版のなでしこ3の動作を再現してくれます。現在のところ、WebView版では、「言う」「尋ねる」「二択」などの命令がうまく動かない問題が残っています。Chrome版にはこの問題はありません。

配布キットを実行してみよう

配布キットはZIP形式で圧縮されています。ダウンロードした配布キットは解凍して使います。解凍すると「nadesiko3.exe」（macOSなら「nadesiko3.app」)というファイルが現れるので、これをダブルクリックしてみましょう。うまくいけば、デモプログラムが実行されます。

ただし、最近では多くの環境でセキュリティ保護が働くため、インターネットからダウンロードしたプログラムを実行できない仕組みになっています。例えば、Windowsでは、実行ファイルを右クリックし「プロパティ」をクリックします。そして、セキュリティの項目にある「許可する」をチェックする必要があります。

• 

  Windowsでのセキュリティチェックを許可する方法

macOSでは、アプリのアイコンを右クリック(contorol+クリック)して「開く」をクリックします。次いで、開いてもよろしいですか？のダイアログで「開く」をクリックします。この手順が必要なのは、初回のみで二回目からは普通にダブルクリックで実行できます。

• 

  macOSでダウンロードしたアプリを実行する方法

自作プログラムに差し替えよう

無事にデモアプリが実行できたら、プログラムを自作のプログラムに差し替えましょう。そもそも、このデモプログラムは、webappというフォルダの中の「main.nako3」が実行されているのです。そのため、この「main.nako3」を自作のものに差し替えることで、任意のプログラムを実行できる仕組みとなっています。

なお、配布キット解凍すると、次のようなフォルダ構造になっています。それぞれのファイルやフォルダは次のような役割を果たしています。

<配布キット>
│  nadesiko3.exe ... メインプログラム
│  README.md
└─<webapp>
    │  index.html ... メインHTMLファイル
    │  index.json ... 設定ファイル
    │  main.nako3 ... 最初に実行されるプログラム
    ├─<css>
    ├─<extlib>
    ├─<image>
    ├─<js>
    └─nadesiko3 ... なでしこ3のランタイム

macOSでは、nadesiko3.appを右クリックして、「パッケージの内容を表示 > Contents > macOS」と開いていくと、webappフォルダを見つけられるでしょう。webappフォルダを開くと「main.nako3」というファイルがあります。

ここでは、メモ帳などのテキストエディタを利用して、main.nako3を次のようなプログラムに書き換えてみましょう。

時計更新処理。
1秒タイマー開始した時には
　　時計更新処理。
ここまで。
●時計更新処理とは
　　# 時計のデザインを指定
　　「#header」に{
　　　　"文字サイズ":"72px", "色": 白色, "背景色": 赤色,
　　　　"マージン": "2em", "余白":"1em", "text-align": "center"
　　}をDOMスタイル一括設定。
　　# デジタル時計を表示
　　「#header」に今をHTML設定。
ここまで。

プログラムを書き換えて、nadesiko3.exeをダブルクリックして実行すると以下のようにデジタル時計が表示されます。

• 

  書き換えたプログラムを実行した場合

まとめ

このように、配布キットをダウンロードして「main.nako3」というファイルを書き換えるだけで実行できるのでとても簡単です。画像やその他の素材ファイルを使いたい時にも、webappというフォルダにコピーしておくだけで大丈夫です。

そして、自作アプリを誰かに配布したい時には、nadesiko3.exeとwebappフォルダ以下を圧縮して配布します。Webアプリでなくデスクトップアプリを利用したい場面もあるのでぜひ使ってみてください。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユース スーパークリエータ認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。直近では、「シゴトがはかどる Python自動処理の教科書(マイナビ出版)」「すぐに使える!業務で実践できる! PythonによるAI・機械学習・深層学習アプリのつくり方 TensorFlow2対応(ソシム)」「マンガでざっくり学ぶPython(マイナビ出版)」など。