Browsing articles in "JavaScript"

3月
9
2010

Google ChromeエクステンションのHello world

Google Chromeの拡張はFirefoxのアドオンと違ってものすごく作りやすいです。JavaScript, CSS, HTMLあたりの知識だけで作れますからねぇ。

そんなわけで、超ミニマムなGoogle Chrome拡張のHello Worldです。

フォルダ構成

フォルダ構成は、以下のような感じです。

HelloWorld
├ icon.png
├ manifest.json
└ popup.html

ちなみに、今回使用したicon.pngはこちら→
Google Chromeのロゴですね！

メイン部の作成

manifest.json

{
	"name": "HelloWorld",
	"version": "0.1",
	"browser_action": {
		"default_icon": "icon.png",
		"default_tilte": "Helllo World",
		"popup": "popup.html"
	}
}

manifest.jsonはJSON形式のファイルで、拡張の情報を定義します。ほとんど見て分かると思いますが、name, versionはそれぞれ拡張の名前とバージョンです。browser_actionとは、アドレスバーの横にアイコンを出して、それをクリックすることでポップアップやツールチップがでるもののことです。今回は、これでHello Worldを実現します。

popup.html

<html>
  <head>
  </head>
  <body>
    <div id="content">
      <span id="heading" class="heading">Hello World!</span>
    </div>
  </body>
</html>

popup.htmlは、上記のようにします。

インストール

あとは、chrome://extensions/ にアクセスして、デベロッパーモードから「パッケージ化されていない拡張機能を読み込みます。」をクリックし、今作成した拡張をインストールします。

成功すると、右上にこんな感じでアイコンが出てきているはずです。それがGoogle Chromeのエクステンションです。おめでとうございます！

さらなる情報は、プログラマの方なら本家サイトのAPIを見るのが一番早いかなーと思います。

それではよいGoogleライフを！

参考リンク

An article by yuyak

No Comments

2月
1
2010

JavaScript

ひらがなだけの文章を漢字混じりの読みやすい文章にするサービス

H2K – ひらがなだけの文章を漢字混じりの文書にするサービス
たまに平仮名だけで構成された文章に出会うことがあるのですが、そのままでは非常に読みづらいです。なので、その辛さを解消してくれる、その名も「ひらがなだけの文章を漢字混じりの読みやすい文章にするサービス」です。

開発余談

これまた、Google Closure Library, Compilerなどを使って作りました。

以下、JSのソースです。Closure LibraryのXhrIoの参考にもなるかと思います。
ただ、例によってエラー処理は皆無ですｗ

goog.require('goog.events');
goog.require('goog.dom');
goog.require('goog.string');
goog.require('goog.net.XhrIo');
goog.require("goog.Uri.QueryData");

var TranslationPanel = function() {
  this.init();
};

TranslationPanel.prototype = {

  SOURCE_TEXTAREA_ID : 'source-textarea',
  TARGET_TEXTAREA_ID : 'target-textarea',
  TRANSLATION_BUTTON_ID : 'translation-button',

  REQUEST_URL : './request.php',

  request : null,

  init : function() {
    this.request = new goog.net.XhrIo();
    this.initEventListeners();
  },

  initEventListeners : function() {
    goog.events.listen(goog.dom.$(this.TRANSLATION_BUTTON_ID), goog.events.EventType.CLICK
                       , goog.bind(this.translationButtonClicked, this));
    goog.events.listen(this.request, goog.net.EventType.COMPLETE
                       , goog.bind(this.translationCompleted, this));
  },

  translationButtonClicked : function(event) {
    if (goog.dom.$(this.SOURCE_TEXTAREA_ID).value == '') {
      return;
    }
    goog.dom.$(this.TARGET_TEXTAREA_ID).value = '';
    this.translate();
  },

  translationCompleted : function(event) {
    var response = event.target.getResponseJson();
    goog.dom.$(this.TARGET_TEXTAREA_ID).value = response.contents.target;
  },

  translate : function() {
    var requestData = goog.Uri.QueryData.createFromKeysValues(
     ['source'], [goog.dom.$(this.SOURCE_TEXTAREA_ID).value]
    );
    this.request.send(this.REQUEST_URL, 'POST', requestData.toString());
  }
};

goog.events.listen(window, goog.events.EventType.LOAD, function() {
  var translationPanel = new TranslationPanel();
});

An article by yuyak

No Comments

1月
12
2010

JavaScript

iPhone/iPod touch向けの翻訳サービスを作ってみた

翻訳サービス

しかしまぁ、PCで見ると悲惨なことに。。ｗ

使った技術とか

Closure Library, Compiler
Google Ajax Language API

以下、メインのJSのソース

ちなみに、エラー処理は皆無なのだ。

goog.require('goog.events');
goog.require('goog.dom');
goog.require('goog.debug');
goog.require('goog.debug.Logger');
goog.require('goog.debug.DivConsole');
goog.require('goog.string');

var TranslationPanel = function() {
  this.init();
};

TranslationPanel.prototype = {
  SOURCE_LANGUAGES_ID : 'source-languages-selector',
  TARGET_LANGUAGES_ID : 'target-languages-selector',

  SOURCE_TEXTAREA_ID : 'source-textarea',
  TARGET_TEXTAREA_ID : 'target-textarea',
  TRANSLATION_BUTTON_ID : 'translation-button',

  init : function() {
    var divDebug = new goog.debug.DivConsole(goog.dom.$('log'));
    this.logger = goog.debug.Logger.getLogger('TranslationPanel');
    this.logger.addHandler(function(record) {
      divDebug.addLogRecord(record);
    });
    this.initEventListeners();
  },

  initEventListeners : function() {
    goog.events.listen(goog.dom.$(this.TRANSLATION_BUTTON_ID), goog.events.EventType.CLICK
                      , goog.bind(this.translationButtonClicked, this));
  },

  translationButtonClicked : function(event) {
    if (goog.dom.$(this.SOURCE_TEXTAREA_ID).value == '') {
      return;
    }
    this.translate();
  },

  translate : function() {
    google.language.getBranding('branding');
    google.language.translate(goog.dom.$(this.SOURCE_TEXTAREA_ID).value
      , goog.dom.$(this.SOURCE_LANGUAGES_ID).value, goog.dom.$(this.TARGET_LANGUAGES_ID).value
      , goog.bind(function(result){
        if (result.translation) {
          goog.dom.$(this.TARGET_TEXTAREA_ID).value = goog.string.unescapeEntities(result.translation);
        }
      }, this)
     );
  }
};

以下、余談

iPhone向けなので、Closure Libraryの依存関係は事前に解決しとかないと（HTTP的に）エライことになりますので、実際はpack.jsというすでに依存関係解消済みかつコンパイラされたものを読み込んでいます。

また、jQueryと併用して開発しようと思いましたが、途中で「アレ、jQueryいらなくね？」と思い至ったので、Closure Library オンリーで開発しました。Closure Libraryは便利なメソッド多すぎなのでかなりおすすめです。

JavaScriptもビルドしてHTMLから読み込むのが当然になるのかなぁ。。

An article by yuyak

No Comments

1月
12
2010

JavaScript

Closure Libraryがbase.jsだけ読み込む方式だとHTTP通信が多すぎるので

cd C:\home\yuyak\web\project\hoge\
..\..\lib\js\closure\closure\bin\calcdeps.py -i heavy.js -p ..\..\lib\js\closure -o compiled -c ..\..\..\..\share\compiler-latest\compiler.jar > pack.js

こんなの書いてbatファイルにしといた。

他にもっといい方法があると思う。

参考リンク

Using the Dependency Calculation Script – Closure Library – Google Code

An article by yuyak

No Comments

12月
30
2009

JavaScript

Google Closure Library – Hello World, Event, $

Hello World

hello.html

<html>
  <head>
    <script src="goog/base.js"></script>
    <script src="hello.js"></script>
  </head>
  <body onload="sayHi()">
  </body>
</html>

hello.js

goog.require('goog.dom');

function sayHi() {
  var newHeader = goog.dom.createDom('h1', {'style': 'background-color: #EEE'},
    'Hello world!');
  goog.dom.appendChild(document.body, newHeader);
}

ライブラリの読み込むファイルが、goog/base.jsだけってところがいいですね。

イベントリスナー

ロード時に何かする

goog.events.listen(window, goog.events.LOAD, function(e) {
    alert('onload!');
});

ID:button1をクリックしたときに何かする

goog.events.listen(goog.dom.$('button1'), goog.events.CLICK, function(e) {
    alert('button1 clicked!');
});

ちなみに、定義されているイベントタイプは以下の通り。

/**
 * Constants for event names.
 * @enum {string}
 */
// TODO: Move to its own file.
goog.events.EventType = {
  // Mouse events
  CLICK: 'click',
  DBLCLICK: 'dblclick',
  MOUSEDOWN: 'mousedown',
  MOUSEUP: 'mouseup',
  MOUSEOVER: 'mouseover',
  MOUSEOUT: 'mouseout',
  MOUSEMOVE: 'mousemove',
  SELECTSTART: 'selectstart', // IE, Safari, Chrome

  // Key events
  KEYPRESS: 'keypress',
  KEYDOWN: 'keydown',
  KEYUP: 'keyup',

  // Focus
  BLUR: 'blur',
  FOCUS: 'focus',
  DEACTIVATE: 'deactivate', // IE only
  // TODO: Test these. I experienced problems with DOMFocusIn, the event
  // just wasn't firing.
  FOCUSIN: goog.userAgent.IE ? 'focusin' : 'DOMFocusIn',
  FOCUSOUT: goog.userAgent.IE ? 'focusout' : 'DOMFocusOut',

  // Forms
  CHANGE: 'change',
  SELECT: 'select',
  SUBMIT: 'submit',

  // Misc
  CONTEXTMENU: 'contextmenu',
  DRAGSTART: 'dragstart',
  ERROR: 'error',
  HASHCHANGE: 'hashchange',
  HELP: 'help',
  LOAD: 'load',
  LOSECAPTURE: 'losecapture',
  READYSTATECHANGE: 'readystatechange',
  RESIZE: 'resize',
  SCROLL: 'scroll',
  UNLOAD: 'unload'
};

DOM操作

document.getElementByIdは、goog.dom.$(‘id’)のようにやる。
実際のソースではこうなっている。

/**
 * Alias for getElementById. If a DOM node is passed in then we just return
 * that.
 * @param {string|Element} element Element ID or a DOM node.
 * @return {Element} The element with the given ID, or the node passed in.
 */
goog.dom.getElement = function(element) {
  return goog.isString(element) ?
      document.getElementById(element) : element;
};

/**
 * Alias for getElement.
 * @param {string|Element} element Element ID or a DOM node.
 * @return {Element} The element with the given ID, or the node passed in.
 * @deprecated Use {@link goog.dom.getElement} instead.
 */
goog.dom.$ = goog.dom.getElement;

参考リンク

Getting Started with the Closure Library – Closure Library – Google Code

An article by yuyak

No Comments

ページ:12 »

Now loading...

Google ChromeエクステンションのHello world

フォルダ構成

メイン部の作成

manifest.json

popup.html

インストール

おすすめ書籍

参考リンク

ひらがなだけの文章を漢字混じりの読みやすい文章にするサービス

開発余談

iPhone/iPod touch向けの翻訳サービスを作ってみた

使った技術とか

以下、メインのJSのソース

以下、余談

Closure Libraryがbase.jsだけ読み込む方式だとHTTP通信が多すぎるので

参考リンク

Google Closure Library – Hello World, Event, $

Hello World

hello.html

hello.js

イベントリスナー

ロード時に何かする

ID:button1をクリックしたときに何かする

DOM操作

参考リンク

PR

最近の投稿

カテゴリー

タグ

Flickr

Popular Posts

最近のコメント

Blogroll