非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

ChromebookでChromeアプリを開発できる「Chromeアプリ開発ツール」の使い方

      2019/07/05

ChromebookにはやはりChromeアプリを作るしかないだろうと思い、Chromeアプリの開発をやろうと思ったところ、「Chromeアプリ開発ツール」というものがあることを知りちょっと使ってみました。

[ad#top-1]

Chromeアプリ開発ツールのインストール

こちらのChromeウェブストアからインストールしましょう。

インストールするとシェルフにアイコンが現れます。Chromeブラウザと同じアイコン画像なので一瞬迷いましたが…。これでインストール完了です。

Chromeアプリ開発ツールを使ってみる

起動するとこんな画面になります。下段の「アプリケーションの設定」に必要事項を入力します。アプリ名以外は適当です。

 

最後に一番下の「Export kiosk app」ボタンをクリックします。この際に「キオスクモード有効」にチェックを入れてください。これにチェックを入れておかないと単独で起動するChromeアプリにはなりませんので。

アプリの保存先を聞いてくるので任意の場所を指定して「開く」ボタンをクリックしましょう。

これでChromeアプリのExportは完了です。

アプリをインストールする

本来であればChrome Web Storeにアップロードするのが正解ですが、まだテスト的なアプリなのであくまで自分のPC内にとどめたい場合は以下の方法でインストールします。

Chromeブラウザのメニューから「その他のツール」ー「拡張機能」を選びます。

拡張機能のページが現れたら上部の「パッケージ化されていない拡張機能を読み込む」ボタンを押し、先程Exportしたフォルダを指定します。

すると、シェルフにアイコンが現れます。Chromeアプリ開発ツールで生成したアプリのデフォルトアイコンはChromeアイコンです。あとで変えることができますがまずはデフォルトのままにしました。

これをクリックすると以下のようなアプリが現れます。ボタンなどは機能せずあまり意味がありません。

アプリをカスタマイズしてみる

生成したファイル一覧です。この中から「exported_app_view.html」の中身をいじってみましょう。

中身はこんな感じです。赤枠のところを消して別のタグを入れてみましょう。

h1タグで定番の「Hello World」と入れてみました。再度アプリを起動するとご覧の通りHello Worldが表示されました。

 

Amazonで購入できるChromebookはこちらです。

スポンサーリンク

 - Chromebook, Chrome拡張機能開発