(新)「萌え電卓」HTML版とそのアプリ化。

★画像アップ先の不調により、過去のエントリーで画像が見られないものが多数あります。もし画像の見たいものがありましたらご連絡いただければ復活するようにします。

先日の「萌え電卓」HTML版登場!からさらに進化した「萌え電卓」HTML版が ちる9 さんのサイトにアップ(【萌え電卓】貼れるのか?)され、それを元に勉強がてら少しモディファイした(新)「萌え電卓」HTML版を用意してみました。そして、「node-webkit」というWebベースのGUIライブラリを使ってアプリ化することにも成功しました。とりあえずWeb版は↓こちらで弄ることができます。

*イラストはジュエルセイバーFREEを利用しています。
今回の新バージョンでは吹き出しやボタンなどが画像化されているので、好きに変えることもできます。わたしはGIMPで少し吹き出しを見やすく加工して、CSSを編集して吹き出しとボタンの表示位置を調整してみました。また、計算結果で表示される「だよ」や「なったよ」に加えて「じゃない…かな?」と「くらいだよ」というのを付け加えてみました。

「萌え電卓」HTML版

「萌え電卓」HTML版



「node-webkit」でアプリ化

HTMLのアプリ化ってその昔WebサイトをFoggerでアプリ化っていうのがあったのでそれを使ってできるかな~と思っていたのですが、これもうサポートされてないみたいですね。無理やり使うことはできそうですが…。そんなことを思っていたところ、先日senopenさんが、「node-webkit」でHTMLのアプリ化をできるようなことをtweetしていたので、いろいろ調べてみたところ、ようやく使い方が分かってアプリ化に成功しました。

●アプリを起動した様子
「萌え電卓」HTML版

「node-webkit」とは

「node-webkit」はNode.jsとChromiumを利用たランタイム/開発フレームワークで、HTML/CSS/JavaScriptでアプリを作ることができるものらしいです。



「node-webkit」の入手

以下GitHubのDownloadから入手できます。使う環境に合わせてダウンロードしましょう。わたしの場合はUbuntu 14.04の64bitなので、Linux 64bit用をダウンロードしました。

nw.js

「萌え電卓」HTML版




「node-webkit」の使い方

わたし自身細かいことは分かってないので、やったことを書きますね。参考になったのはnode-webkit - らくがき帳です。

入手した「node-webkit」(nwjs-v0.12.0-linux-x64.tar.gz)を解凍して操作しやすいようにホームへ移動しておきます。
まずお約束の「Hello World」を表示してみます。用意するのは「index.html」と「package.json」です。それぞれテキストエディタで以下のファイルを作り、「node-webkit」のディレクトリ(nwjs-v0.12.0-linux-x64)に入れておきます。

*以下「index.html」と「package.json」はsenopenさんのサイトのWebベースGUIライブラリnode-webkitのチュートリアルの実行を参考にしました。

「index.html」
<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node.js <script>document.write(process.version)</script>.
  </body>
</html>


「package.json」
{
  "name": "nw-demo",
  "main": "index.html"
}


以下のようになります。

「萌え電卓」HTML版


つぎに用意した「index.html」と「package.json」は「app.zip」とZIPファイルに圧縮し、そのファイル名を「app.nw」にリネームします。

これでとりあえず準備はOKです。端末を開いてcdコマンド使うなりしてその展開した「node-webkit」のディレクトリ(nwjs-v0.12.0-linux-x64)に入ります。($は含まない)

$ cd nwjs-v0.12.0-linux-x64



「app.nw」のパッケージング

端末内で以下の操作でパッケージングができます。

$ cat ./nw app.nw > app && chmod +x app

この操作で「app」ファイルという実行ファイルが生成されます。↓こんな感じです。

「萌え電卓」HTML版

で、この「app」ファイルをダブルクリックで起動してみます。

あれ、うんともすんとも言わない?

こういう時は端末に突っ込んで(「app」ファイルを端末内にドラッグ)起動してみます。

error while loading shared libraries: libudev.so.0: cannot open shared object file: No such file or directory

上記のようなエラーが出てました。そこで検索してみたところ、fix_udev.sh(Fix for node-webkit on Ubuntu 14.04error while loading shared libraries: libudev.so.0)というのを見つけました。それで書かれているとおりにやってみました。端末上で以下を入力適用しました。

$ sudo ln -sf /lib/x86_64-linux-gnu/libudev.so.1 /lib/x86_64-linux-gnu/libudev.so.0

そのあと再度「app」ファイルをダブルクリックで起動してみます。

「萌え電卓」HTML版

無事起動しました!



「萌え電卓」のアプリ化

「Hello World」が無事表示されれば「萌え電卓」のアプリ化も同様です。「萌え電卓」のファイル郡(index.html+moecalc.css+moecalc.js+imgフォルダ)と上記「package.json」を一緒にZIPファイル化してあとは同様の手順でアプリができます。

*できた「app」ファイルの起動には同じフォルダに「nw.pak」が必要です。

「萌え電卓」HTML版


アプリ化した「萌え電卓」は以下からダウンロードできます。起動ファイルは「moecalc」とリネームしてます。

moecalc(moecalc.tar.gz):ダウンロード

データのソースはこちらに置いてあります。前回の「萌え電卓」のデータも一緒くたになっているのであしからず。indexファイルは「index2.html」の方になります。つまり「index.html」と「bg.jpg」が前回のファイルとなります。
関連記事

テーマ : Linux
ジャンル : コンピュータ

コメントの投稿

非公開コメント

Linuxでのプログラムの拡張子

TOYさん
早速DLして試してみました。うまく動作しますね。
電卓の大きさが小さくなっていて,デスクトップで開いて使いやすくなりましたね。

前回の記事で「Wine経由で起動しないといけないと」とコメントしました。どうやらLinuxでは拡張子にexeをつけるとWindowsのプログラムとして認識されてしまうみたいですね…。
拡張子からexeを除去すれば,Ubuntuでも普通にダブルクリックで起動できました。勉強になりました。それとicudtl.datは不要でしたね…。
node-webkitのチュートリアルでは,僕の記事も参考にしてくださり,ありがとうございます。

node-webkitは最近nw.jsに名前を変更したようです。
TOYさんはHTMLにお詳しそうなので,nw.jsを使えば簡単なアプリならいろいろ作れてしまいそうですね(笑)。

Re: Linuxでのプログラムの拡張子


> 早速DLして試してみました。うまく動作しますね。

試していただきありがとうございます。

> 電卓の大きさが小さくなっていて,デスクトップで開いて使いやすくなりましたね。

あとはHTMLを弄って表示されるウインドウのサイズなども調整したりするといいかもしれませんね。

> node-webkitのチュートリアルでは,僕の記事も参考にしてくださり,ありがとうございます。

なかなかUbuntu用の記述が見つからなくていろんなサイトあさってたまたま参照しました。だいぶ後になってsenopenさんのサイトだって気づきました(^_^;)。

> node-webkitは最近nw.jsに名前を変更したようです。

あ、そうなんですね。だからGitHubのところnw.jsになっていたんですね。

> TOYさんはHTMLにお詳しそうなので,nw.jsを使えば簡単なアプリならいろいろ作れてしまいそうですね(笑)。

moebuntuサイトを自力で作れるくらいで、さほど詳しくはないのですが…手軽にアプリ化できるのはいいですね。サイズが大きくなるのは難点ですけど、そういえば、小さくする方法あるんですね。まだ試していませんが教えてくれてありがとうございました。
プロフィール

TOY

Author:TOY
萌え萌えmoebuntu
ようこそ!
moebuntuサイト
moebuntu wiki
お気軽にコメントください。

Auto-Translate
最新記事
最新コメント
tweet
萌え萌えAD




月別アーカイブ
08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01 
カテゴリークラウド
RSSリンクの表示
リンク
QRコード
QRコード
最新トラックバック