Electron で Cross Platform なデスクトップアプリをHelloWorld

HTMLなどの標準的なWeb技術を使って Cross Platform なデスクトップアプリを作れる Electron でHelloWorldしてみるテスト。

GoogleDriveを使うChromeアプリのサンプル

GoogleDrive上のファイルをアップロード/ダウンロードするときは Google APIs Client Library (gapi) を使うのが最も簡単な方法ですが、Chrome Packaged Apps（Chrome Apps）の場合だとセキュリティポリシーの関係で外部URLにある gapi を読み込むことができません。Chrome Apps から gapi を無理くり使うためのライブラリもあるみたいですが、こちらはまだ完全ではないようです。

ですから今回は、 gapi を使わないで Chrome Apps から GoogleDrive にアクセスする方法をご紹介したいと思います。
以下はそのサンプルコードです。

Chromeアプリで長押しコンテキストメニュー

Chromeアプリ開発でコンテキストメニュー（もどき）を簡単に実装する方法です。
通常の chrome.contextMenus は実際にプログラマティカルにメニュー内容を変更しようとすると background.js とcontent script との通信が発生するので結構面倒です。でも、これから紹介するやり方ならそんな面倒な手間もなく結構楽に実現できます。
ついでなので左マウスボタン長押しでコンテキストメニューを表示するような実装にしてみましょう。

Chromeアプリの画面印刷

以下はChromeアプリで画面を印刷するサンプルアプリです。

YeomanでChromeアプリを作る手順

YeomanはモダンWebアプリの雛形を自動生成してくれる便利なツールですが、YeomanをインストールするとGruntやBowerも自動的にインストールされて、プロジェクト管理自体が非常に楽になります。Yeoman + Grunt + Bower は、JavaでいうところのビルドツールMavenのような存在です。
これからYeomanをインストールして実際にChromeアプリを作るところまでの手順を紹介したいと思います。
※ここではnode.jsとnpmが事前にインストールされていることを前提に話を進めます。

Chrome版2chブラウザ「niichrome」をリリース

Chromeアプリ版２ちゃんねるブラウザ「niichrome」(ニクロム)をリリースしました。
軽量なのにそこそこ便利な２ちゃんブラウザに仕上がったと自負しています。

インストールは下の Chrome Web Store (CWS) からどうぞ。
CWS: niichrome 2chブラウザ

niichromeはオープンソースです。ソースコードはGitHubで公開しています。
GitHub: niichrome-2ch-browser

要望やバグ報告などありましたら、レビューページで気軽にコメントしてください。

ChromeAppsでWebViewのDOM操作

Chrome packaged apps からWebView内に表示されたWebページのDOMを操作する方法です。

Chrome appsで外部サイトの画像をロードする方法

Chrome apps では外部サイトの画像を読み込みたいとき、 HTML内部で <img src="http://..../hoge.gif"> のようにしても上手く行きません。

例えば、<img src="http://k.yimg.jp/images/top/sp2/cmn/logo-ns-131205.png" /> のような画像URLをHTMLから読み込んだとき、以下のエラーが発生します。

Refused to load the image 'http://k.yimg.jp/images/top/sp2/cmn/logo-ns-131205.png' because it violates the following Content Security Policy directive: "img-src 'self' data: chrome-extension-resource:".

これは Chrome apps の Content Security Policy (CSP) による規制のためです。
これを回避して、外部の画像を読み込むには以下のようにします。

Chromeアプリをフルスクリーンで起動させる方法

Chromeアプリをフルスクリーンモードで起動させるサンプルコードです。

英和/和英辞書アプリ「Enjad」を公開

オフラインで使えるChrome用の英和/和英辞書アプリ「Enjad」を公開しました。

Bookeepaを公開

無料の家計簿Chromeアプリ「Bookeepa」を公開しました。

ChromeアプリでlocalStorageを扱う簡単なサンプル

今回はHTML5仕様のlocalStorageをChromeアプリで使う方法をご紹介します。
今回使うAPIのchrome.storage.localは、設定などの小さなデータから大きめのデータまで、とても簡単に扱える便利なchrome実装です。
下の簡単なサンプルを見れば、その使い方はすぐに理解できるでしょう。

Chrome OS の魅力 [動画有]

こちらは Chrome OS の魅力が分かる動画です。

Chromeアプリの国際化。

Chromeアプリ開発では、国際化(多言語化)に対応するためのとても便利な仕組みが用意されています。その仕組みを使えば、国際化に関する処理部分とビジネスロジック部分を切り離すことができ、アプリ開発者と翻訳者が分業しやすくなります。
Chromeアプリの国際化はとてもシンプルです。

Chromeアプリのオプション画面作成

Chrome Apps のオプション画面（設定画面）の作り方を紹介します。
作り方はとても簡単。手順は下の３つだけ。

コンテキストメニューなChrome拡張機能の作り方

2014-08-02 追記
content script内だけで完結する（background.jsとの通信が発生しない）シンプルなコンテキストメニューをお探しならこちらのエントリが参考になると思います→Chromeアプリで長押しコンテキストメニュー

上の画像のようなコンテキストメニューをChrome拡張機能で実現する方法をご紹介します。

ChromeアプリをHelloWorld

Chromeアプリ開発の HelloWorld です。
下のサンプルはブランク・プロジェクトとしてもお使いいただけるかと。