Blogスマートフォン用の表示で見るスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。Blog株式会社インテリジェントテクノロジーの技術情報ブログです。AppsChromeJavaScriptHTML5こんにちは、中山です。書かれるウェブアプリなのだけれども、ネイティブアプリのようにふるまうことのできる、というこのプラットフォームは、Googleが2013年9月に正式に発表したものです。Apps」、現状は、PCやMacだけがターゲットのようです。(iOSやAndroidなどでは使えないみたい。)また、日本語での呼び方は「Chromeアプリ」となっているようですね。Apps」については、以下のページが参考になります。Apps」を実際に作って動かしてみるための、最初の4つのステップを、順を追って紹介してみたいと思います。ChromeのインストールChromeの最新版をインストールします。今回はMacにインストールしました。インストール後、Chromeのバージョンを確認します。当記事の執筆時点では「30.0.1599.66」でした。Build版)」を使え、と書いているのですが、バージョン30の通常のChromeでも、今のところ問題なく使えるようでした。Apps」を作って動かすために、ちょっとだけ「Chrome」の設定を変更します。以下の3項目を「有効」に設定します。(※設定を有効にすると、リンクが「無効にする」に切り替わります。)1)「試験運用版の拡張機能API」2)「パッケージ化されたアプリのデバッグの有効化」3)「パッケージ化されたアプリのショートカットを有効にする」(※この設定は、Macのみのようです。)設定変更後、Chromeを再起動して、変更内容を反映します。「デベロッパーモード」チェックボックスにチェックをつけます。設定の変更はこれだけです。Appsのサンプルアプリを、そのまま利用してみます。サンプルアプリのソースはこちらから取得することができます。先ほど開いた「拡張機能」画面の「パッケージ化されていない拡張機能を読み込む」ボタンをクリックします。表示されたダイアログボックスの「拡張機能のルートディレクトリ」欄に、読み込むアプリのディレクトリを指定します。World」サンプルアプリのディレクトリを指定しました。以下のように、読み込んだアプリの情報が表示されます。ソースコード自体は、以下の通り、マニフェストファイルHTMLファイルJavaScriptファイルCSSファイル画像などのリソースファイルから構成されています。このあたりの詳細については、近いうちにまた紹介できればいいなと思っています。読み込んだアプリを起動するのはとてもシンプルで、先ほどの「拡張機能」画面から、対象アプリの「起動」リンクをクリックするだけです。Chromeの新しいタブを表示して、アプリの一覧から、該当するアプリのアイコンをクリックします。アプリが起動すると、以下の通り、Chromeのブラウザ内ではなく、通常のネイティブアプリと同様に、独立した形で画面上に表示されます。Apps」作ってみたアプリ起動まで、なんの問題もなくスムーズにできてしまったので、私のほうでも、サンプルアプリを参考にして、ひとつアプリを作ってみました。Advisor(うどんアドバイザー)」です。うどん県在住の私が、日々のうどん情報収集のためだけに作ったアプリです。(もちろん、今日のお昼もうどん。)アプリを起動しますと、上記のとおり、最新の「うどん」に関連するニュースが表示されます。(実際は、Googleのニュース検索結果を表示しているだけです。)また、下側の「SEARCH」メニューをクリックすると、上部に検索欄のある画面に切り替わります。ここでは、入力した内容に、必ず「うどん」をからめて、その検索結果を表示してくれる、という大変便利な機能が搭載されています。Apps」が独自に用意している、「webview」というタグとそのAPIを利用して、機能を実現しているところがあります。この「webview」タグとそのAPIについては、また改めて紹介できる機会があればよいな、と考えています。Advisor」アプリのソースは、こちらから取得することができます。Apps」を実行して表示される、HTMLの要素を確認するJavaScriptコードからのコンソール出力を確認するといった操作も、以下のような手順で実施することができます。1)Chromeの「拡張機能」画面から、「起動」リンクをクリックして、アプリを起動します。2)「拡張機能」画面に、そのアプリのエントリポイントとなるHTMLファイル(今回の場合は「index.html」)のリンクが表示されます。3)そのリンクをクリックすると、Chromeのデベロッパーツールが表示されます。デバッグに関しては、このほかにも便利な機能があるかもしれません。アプリ起動ショートカット作成Chromeのアプリ一覧画面から、アプリアイコンを右クリックして「ショートカットを作成」を選択することで、そのアプリを起動するショートカットを作成することができます。Macの場合、「アプリケーション」ディレクトリにファイルが作成されます。Windowsの場合は、デスクトップ、スタートメニュー、またはタスクバーのいずれか指定した場所に、ショートカットが作成されるようです。Apps」すごいのか?!いろいろポテンシャルは持っているのだと思います。現状は、PCやMacだけをターゲットにしていますが、もしこれが今後、iOSやAndroidなどのスマートデバイスでも難なく動作するようになったとしたら・・・、ひょっとしたらアプリ界隈に、大きな変化が出るかもしれないなぁ、とも考えています。Apps」の、モバイルプラットフォーム上での実行にもチャレンジしてみました。Apps」ツールキットを用いた挑戦について、詳しくはこちらから。Blog|ブログを報告する。