[Chrome] - ずっと君のターン

2012-08-31 雨降ってるらしい、土砂降りだって、ってウソ言われました

ChromeウェブアプリでIRCクライアント作ってみた

Google I/Oで発表されたChrome拡張の機能追加で一見するとネイティブアプリっぽく見えるChrome拡張を作れるようになりました。分かりやすく言えばAdobe AIRのChrome版みたいな。結構よさそうな気がするけど、実際どんなもんかなと思ったので試しにIRCクライアントを作ってみました。

https://github.com/technohippy/irc-client-for-chrome

まだいろいろと機能は足りない代わりにバグがたくさんあるけど、わりと普通に使えてます。Chromeウェブアプリ、結構いいんじゃないでしょうか。ドッグフード食べながらちびちびマトモなIRCクライアントにしていこうと思うので、よろしければ皆様にもお使いいただきたい・・・

・・・と思ったんだけど、今のところネイティブっぽいChromeウェブアプリが使えるのはDev Channelだけなので、素人にはオススメできない。まぁお前らド素人は、Lime Chatでも使ってなさいってこった。

いつのまにかCanary Buildで動くようになってた！見た目がちょっと違うけど。Canary Buildは普通のChromeと共存できるのでよろしければみなさんお試しください。

コメントを書く

2012-07-24 また暑くなってきた

パッケージアプリとは？

Chrome, 翻訳 | 23:32 |

Chromeの拡張機能、特にパッケージアプリの大幅な強化がGoogle I/Oで発表されました。有り体に言えば、ブラウザの枠から出て、ネイティブアプリのように見えるウェブアプリを開発することができるようになります。

これってなかなかアツい話だと思うんですが、意外に話題に登っていない気がするので、とりあえずオフィシャルの説明ページを勝手に訳してみました。

http://code.google.com/chrome/extensions/trunk/apps/about_apps.html

・・・

パッケージアプリとは？

パッケージアプリはネイティブアプリのようにパワフルでありつつ、ウェブページのように安全な体験を提供します。ウェブアプリと同じく、パッケージアプリもHTML5、JavaScript、CSSで記述されます。しかし、パッケージアプリは見た目も動作もネイティブアプリ同様で、ウェブアプリよりもずっと強力な機能を持ちます。

これまでのウェブアプリには不可能だったChrome APIやサービスへのアクセスが利用可能になったことにより、ネットワークやハードウェアデバイスと相互作用するパワフルなアプリ、メディアアプリを構築できます。以下はその簡単な例です:

シェル（VMWare、Citrix、SSH、RDP、VNCクライアントなど）
音楽／動画ストリーミング
画像／動画／音楽編集

どのような見た目か

ユーザーがパッケージアプリを開くと、アプリに関係したタスクにしっかりと焦点が合わされます。パッケージアプリには従来のような装飾はありません。オムニボックス（アドレスバー）も、タブも、その他のブラウザインターフェースはもはや存在しないのです。ネイティブアプリと同じく、もうブラウザに閉じ込められてはいません。起動すると、パッケージアプリはウィンドウの中で開き、次のような見た目になります。（もちろん全く違うスタイルのウィンドウにもできます）

どのように動作するか

パッケージアプリのページは常にローカルに読み込まれます。これによりアプリのネットワークへの依存が少なくなります。ユーザーはアプリをインストールすると、そのアプリのライフサイクルを完全に制御できます。アプリの起動と終了は高速で、システムはパフォーマンス向上のためにいつでもアプリをシャットダウンできます。ユーザーはアプリを完全にアンインストールできます。

あなたがなにもしなくても、アプリはオフラインで起動します。しかし、オフラインの間確実にユーザーデータをローカルに保存し、データサーバーがオンラインになったときにバックアップを同期するにはいくらかの作業が必要です（オフラインファースト参照）。

どのように開発するか

パッケージアプリはウェブアプリの変形です。アプリを記述するにはウェブプラットフォームと同じコード・フレームワーク・ツールを使います。しかしブラウザの機能のいくつかは除かれ、セキュリティやプログラミングの慣習を改善するためにウェブAPIは削除されたり変更されたりしたものもあります。

よりネイティブに近いアプリを作成する助けになるように新しい機能も追加されています。アプリコンテナとプログラミングモデルはパッケージアプリの見た目と動作を規定します。これらのモデルはユーザーによりネイティブに近い体験を提供することを目的としています。強力なAPIが追加されているので、アプリはネイティブ同様の機能を持つことができます。また、厳格なセキュリティモデルはAPIの悪用を禁止します。

パッケージアプリの開発についてより詳細を学ぶには

アーキテクチャを理解するではアプリコンテナ、プログラミング、セキュリティのモデルを説明しています。
基礎ではこのアーキテクチャをどのように利用するか、オフライン、データ管理、外部コンテンツの組み込みの実現方法について説明しています。
高度な技術ではパワフルなネットワークやハードウェアAPIの使い方と、ウェブインテンツを利用してアプリとアプリを繋ぐ方>法について説明しています。
停止される機能では禁止されるウェブの機能と、代わりになにを用いればいいかを説明しています。

コメントを書く

2011-02-09 ぱらっと

はじめてのChrome Web Store

Chrome | 00:37 |

今週末締切りのHTML5コンテスト用に、以前作ったWebアプリをChrome Web Appにしてみた。アイコンとかキャプチャとか適当ですまんス。

https://chrome.google.com/webstore/detail/jgfgjadfdpdmimfjnfelgbgdbpipclco

無料サービスならChrome Web Storeに乗っけるの簡単なんすね。以下手順。

1. Webアプリを作る

まずは普通につくるだけ。今回Chrome Web Appにするのはこれ。

http://physicsketch.appspot.com/chrome/index.html

2. WebアプリのURLをGoogle Webmater Toolに登録する

https://www.google.com/webmasters/tools/home

これやっとかないとChrome Web Storeに載せてもらえないらしい。所有権の確認方法は次の四つ。

DNSレコードをドメインの設定に追加
Google Analyticsアカウントにリンク
HTMLファイルをサーバーにアップロード
メタタグをサイトのホームページに追加

4つ目が一番簡単なんじゃないかと。

3. Webアプリの情報をmanifest.jsonに記述

今回のアプリ用のは以下。記述の内容は見たまんま。詳細についてはドキュメントを参照くださいってことで。

{
  "name": "physicSketch",
  "description": "When you draw something on a canvas, it starts moving under the Newtonian law.",
  "version": "0.0.0.1",
  "icons": {
    "128": "icon_128.png"
  },  
  "app": {
    "urls": [
      "http://physicsketch.appspot.com/chrome/index.html"
    ],  
    "launch": {
      "web_url": "http://physicsketch.appspot.com/chrome/index.html"
    }   
  }
}