ryo.link

独自の日本語化スクリプトのプロトタイプ完成

2012-02-03T21:52:00.000+09:00

MylingualでCodecademyの日本語化を行っていたが、Mylingualはシステムメッセージの翻訳ツールでドキュメント翻訳ツールとしては無理があることがわかった。

それならば、と独自で日本語化出来るようスクリプトを書いてみた。

prototype.ja.www.codecademy.com.user.js

// ==UserScript==
// @name            Codecademy for Japanese
// @namespace       Codecademy4Japanese
// @author          Ryo Link
// @include         http://*.codecademy.com/*
// @description     Translates http://www.codecademy.com/ to Japanese. 
// ==/UserScript==

(function(){

// start custom code.

    var translation = [
        {
            xpath:'/html/body/div[3]/div/div/div/section/div[2]/h1',
            original:/Learn to code/,
            newtext:'コードを学ぼう'
        }
        ,
        {
            xpath:'/html/body/div[3]/div/div/div/section/div/div[2]/pre/span[@class="log"]',
            original:/Hey! .*? keyboard\./,
            newtext:'はじめまして、Ryanです。あなたのお名前は何ですか？あなたのお名前を<strong>"Ryan"</strong>のように引用符で括り入力してください。入力できたらキーボードの <strong>Enter</strong> と書かれたエンターキーを押してください。<span style="font-size:small;">注意：引用符「<strong>"</strong>」は必ず半角で入力します。</span>'
        }
        ,
        {
            xpath:'/html/body/div[3]/div/div/div/section/div/div[2]/pre/span[@class="log"]',
            original:/Well done! .*?<code>"Ryan".length<\/code>/,
            newtext:'よろしく！お名前は何文字ですか？あなたのお名前を引用符で括り、そのまま続けて<code class="ace-tm"><span class="ace_line"><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">length</span></span></code>と入力しエンターキーを押してください。例: <code class="ace-tm"><span class="ace_line"><span class="ace_string">"Ryan"</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">length</span></span></code>'
        }
        ,
        {
            xpath:'/html/body/div[3]/div/div/div/section/div/div[2]/pre/span[@class="log"]',
            original:/Well done! .*? <code class="ace-tm"><span class="ace_line"><span class="ace_string">"Ryan"<\/span><span class="ace_punctuation ace_operator">\.<\/span><span class="ace_identifier">length<\/span><\/span><\/code>/,
            newtext:'よろしく！お名前は何文字ですか？あなたのお名前を引用符で括り、そのまま続けて<code class="ace-tm"><span class="ace_line"><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">length</span></span></code>と入力しエンターキーを押してください。例: <code class="ace-tm"><span class="ace_line"><span class="ace_string">"Ryan"</span><span class="ace_punctuation ace_operator">.</span><span class="ace_identifier">length</span></span></code>'
        }
    ];

    function do_platypus_script() {
        for(var i in translation){
            var o = translation[i];
            translate(o.xpath, o.original, o.newtext);
        }
    };

    function getElementsByXPath(xpath, node) {
        var node = node || document;
        var doc = node.ownerDocument ? node.ownerDocument : node;
        var nodesSnapshot = doc.evaluate(xpath, node, null,
            XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
        var data = [];
        for (var i = 0; i < nodesSnapshot.snapshotLength; i++) {
            data.push(nodesSnapshot.snapshotItem(i));
        }
        return (data.length >= 1) ? data : null;
    }

    function translate(xpath, original, newtext) {
        var elements = getElementsByXPath(xpath, document);
        for(var e in elements){
            do_modify_html_it(window.document, elements[e], original, newtext, null);
        }
    }

    function loadHandler(){
      var handler = function (evt) {
        if (handler.underOperation) {
          return;
        }
        setTimeout(
          function () {
            handler.underOperation = true;
            do_platypus_script();
            handler.underOperation = false;
          },
          1);
      };
      document.addEventListener("DOMNodeInserted", handler, false);
      document.addEventListener("DOMCharacterDataModified", handler, false);
    }

    window.addEventListener("load", loadHandler, false);

// end custom code.

    var gplatypusBundle = Components.classes["@mozilla.org/intl/stringbundle;1"].getService(Components.interfaces.nsIStringBundleService);
    var mystrings = gplatypusBundle.createBundle("chrome://platypus/locale/platypusCore.properties");
    var platypusplatypuscouldntfi1 = mystrings.GetStringFromName("platypusplatypuscouldntfi1");
    var platypusthisusuallyhappens = mystrings.GetStringFromName("platypusthisusuallyhappens");

    function walk_down(node, func) {
      if (node.nodeType == 1) {
        if (node.tagName != "IMG") func(node);
        if (node.childNodes.length != 0)
          for (var i=0; i<node.childNodes.length; i++)
    walk_down(node.childNodes.item(i),func);
      }
    }
    function make_bw(doc, node) {
      walk_down(node,
                function (node) {
          if (node.tagName != 'A') {
      node.bgcolor = "white";
      node.color = "black";
      node.style.backgroundColor = "white";
      node.style.color = "black";
      node.style.backgroundImage = "";
          }});
    }
    function center_it(doc, node) {
      var center_node = doc.createElement ("CENTER");
      node.parentNode.insertBefore(center_node, node);
      node.parentNode.removeChild(node);  
      center_node.appendChild(node);
      return center_node;
    };
    function erase_it(doc, node) {
      var offset_height = node.offsetHeight;
      var offset_width = node.offsetWidth;
      var replacement_div = doc.createElement ("DIV");
      replacement_div.setAttribute('style',
           "height: "+offset_height+"; width: "+offset_width+";");
      node.parentNode.insertBefore(replacement_div, node);
      node.style.display = "none";
      return replacement_div;
    };
    function smart_remove(doc, node) {
        if (node.parentNode.childNodes.length == 1) {
    smart_remove(doc, node.parentNode);
        } else {
    remove_it(doc, node);
        };
    };
    function remove_it(doc, node) {
      if (doc == null || node == null) return;
      if (!node.parentNode) return;
      node.style.display = "none";
      doc.last_removed_node = node;
    };
    function script_paste(doc, where, what) {
        var new_node = what.cloneNode(true);
        new_node.style.display = "";
        where.parentNode.insertBefore(new_node, where);
    };
    function isolate(doc, node) {
      if (!node.parentNode) return;
      node.parentNode.removeChild(node);
      while (doc.body.childNodes.length > 0) {
        doc.body.removeChild(doc.body.childNodes[0]);
      };
      var replacement_div = doc.createElement ("DIV");
      replacement_div.setAttribute('style',
           "margin: 0 2%; text-align: left");
      replacement_div.appendChild(node);
      doc.body.appendChild(replacement_div);
    };
    function set_style_script(doc, element, new_style) {
        element.setAttribute('style', new_style);
    };
    function modify_single_url(doc, match_re, replace_string, node) {
        if (node.href) {
    node.href = node.href.replace(match_re, replace_string);
        };
    };
    function do_modify_url_it(doc, node, match_re, replace_string, global_flag) {
        match_re = new RegExp(match_re);
        if (global_flag) {
    var allurls = doc.getElementsByTagName('A');
    for(var i = 0, url; url = allurls[i]; i++)
      modify_single_url(doc, match_re, replace_string, url);
        } else {
    modify_single_url(doc, match_re, replace_string, node);
        };
    };
    function do_modify_html_it(doc, element, match_re, replace_string) {
        match_re = new RegExp(match_re);
        if (element.innerHTML) {
            element.innerHTML = element.innerHTML.replace(match_re, replace_string);
        };
    };
    function relax(doc, node) {
      walk_down(node, function (node) {
          node.style.width = 'auto';
          node.style.marginLeft = '0pt';
          node.style.marginRight = '0pt';
          if (node.width) node.width = null; });
    }
    function fix_page_it(doc, node) {
        doc.background = null;
        doc.bgColor = "white";
        if (doc.style) {
          doc.style.backgroundColor = "white";
          doc.style.backgroundImage = "none";
          if (doc.style.color == "white") {
    doc.style.color = "black";
          };
          if (doc.text == "white") {
    doc.text = "black";
          };
        };
        doc.body.background = null;
        doc.body.bgColor = "white";
        if (doc.body.style) {
          doc.body.style.backgroundColor = "white";
          doc.body.style.backgroundImage = "none";
          if (doc.body.style.color == "white") {
    doc.body.style.color = "black";
          };
          if (doc.body.text == "white") {
    doc.body.text = "black";
          };
        };
    };
    function insertAfter(newNode, target) {
        var parent = target.parentNode;
        var refChild = target.nextSibling;
        if(refChild != null)
    parent.insertBefore(newNode, refChild);
        else
    parent.appendChild(newNode);
    };
    function html_insert_it(doc, element, new_html, before, insert_as_block) {
      var new_element;
      if (insert_as_block) {
        new_element = doc.createElement ("DIV");
      } else {
        new_element = doc.createElement ("SPAN");
      };
      new_element.innerHTML = new_html;
      if (before) {
          element.parentNode.insertBefore(new_element, element);
      } else {
          insertAfter(new_element, element);
      };
    };
    function auto_repair_it(doc, node) {
      Dump("In auto_repair_it...");
      var biggest_elem = find_biggest_elem(doc);
      Dump("biggest_elem = "+biggest_elem);
      isolate(doc, biggest_elem);
      Dump("After isolate.");
      relax(doc, biggest_elem);
      Dump("After relax.");
      make_bw(doc, biggest_elem);
      Dump("After make_bw.");
      fix_page_it(doc, biggest_elem);
      Dump("After fix_page_it.");
    };
    function find_biggest_elem(doc) {
      const big_element_limit = 0.25;
      var size_of_doc = doc.documentElement.offsetHeight *
          doc.documentElement.offsetWidth;
      var body = doc.body;
      var size_of_body = body.offsetHeight * body.offsetWidth;
      if (size_of_body < (0.80 * size_of_doc)) {
          size_of_body = size_of_doc;
      };
      var max_size = 0;
      var max_elem = doc;
      /*  
      var allElems = doc("//*",
         doc, null,
         XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
         null);
      Dump("allElems = "+allElems);
      Dump("allElems.snapshotLength = "+allElems.snapshotLength);
      for (var i = 0; i < allElems.snapshotLength; i++) {
        var thisElem = allElems.snapshotItem(i);
      */
        
      var allElems = doc.getElementsByTagName("*");
      Dump("allElems = "+allElems);
      Dump("allElems.snapshotLength = "+allElems.length);
      for (var i = 0; i < allElems.length; i++) {
          var thisElem = allElems[i];
          var thisElem_size = thisElem.offsetHeight * thisElem.offsetWidth;

          if (thisElem_size < size_of_body &&
      thisElem_size > max_size &&
      !contains_big_element(thisElem, size_of_body * big_element_limit)) {
      max_size = thisElem_size;
      max_elem = thisElem;
          };
      };
      Dump("Max elem = "+max_elem.tagName);
      return max_elem;
    };

    function contains_big_element(node, limit) {
        if (node.childNodes.length != 0)
    for (var i=0; i<node.childNodes.length; i++) {
        var child = node.childNodes.item(i);
        var child_size = child.offsetHeight * child.offsetWidth;
        if (child_size > limit) return true;
    };
        return false;
    };

    function platypus_do(win, func_name, o, other, other2, other3) {
        var func = eval(func_name);
        var doc = null;
        if (func == null) return;
        if (!o) {
    Warning(platypusplatypuscouldntfi1+
    func_name+platypusthisusuallyhappens);
        };
        doc = win.document;
        func(doc, o, other, other2, other3);
    };
})();

//.user.js

ソースはあるツールを使用して半自動で作成したのであまりよろしくないがとりあえず。

translationが翻訳テーブルとなる。このように特定要素内で正規表現による置換ができると翻訳の自由度がとても高くなり、極端な話なんでもできてしまう。原文に忠実でなくとも超意訳で日本語化できるはず。ページ毎に翻訳の判断をする必要があるかまだわからない。

このソースの正式版をgithubで公開し、userscripts.orgで配布する形になる予定。githubのソースはフォークして独自の物を作成してもよし、追加変更してプルリクエストもよし。手伝ってくれる人がいれば非常に助かる。

課題としてユーザーにスクリプトの更新をどうさせるか。自動で出来るか、何か良い方法があるか調査中。どなたかコメントを待っています。

スクリプトの更新が確実にできるようになれば、Mylingualのようにデータベース化せずスクリプトの配布だけで日本語化が出来ると見込んでいる。

将来の展望としてはブラウザ上で見ているサイトを直接翻訳可能にする機能拡張の作成、それで作成されたスクリプトを各自がgithubで公開できるようになればいいなぁ。

codecademy.comへ日本語コースを提出した

2012-02-01T15:22:00.002+09:00

Codecademyがユーザーへコース作成機能を公開した。公開したと言っても無条件に利用できるものではないようで審査があるようだ。審査後に公開の流れらしい。

mylingualに限界を感じて代替案を用意していたところだったが、公式で出来ることにこしたことはないので早速日本語コースを提出してみた。果たして審査が通るか？

Mylingual for codecademy.comの導入 - Firefox編

2012-01-22T18:39:00.000+09:00

Mylingual for codecademy.comとはcodecademy.comを日本語化するGreasemonkeyスクリプト。

Mylingual for codecademy.comをFirefoxにインストールするには以下の手順で行う。

まずアドオンのインストールから。次のURLをFirefoxで開きGreasemonkeyというアドオンをインストールする。

https://addons.mozilla.org/ja/firefox/addon/greasemonkey/

アドオンのインストールが完了したら、次はGreasemonkeyで使うスクリプトを以下のURLからインストールする。

http://userscripts.org/scripts/show/123724

スクリプトのインストールで導入作業は完了。 http://www.codecademy.com/ を開けば日本語化される。

エンジョイ！

Mylingual for codecademy.comの導入 - Google Chrome編

2012-01-22T18:03:00.001+09:00

Mylingual for codecademy.comとはcodecademy.comを日本語化するGreasemonkeyスクリプト。

Google ChromeでMylingual for codecademy.comを使うのは簡単。次のURLでスクリプトをインストールするだけだ。

http://userscripts.org/scripts/show/123724

URLを開くとこのような画面になるのでInstallボタンを押してスクリプトをインストールする。

インストール後 http://www.codecademy.com/ を開くと日本語化出来ているはずだ。

エンジョイ！

私はcodecademy.comの日本語翻訳を開始した

2012-01-19T09:34:00.000+09:00

http://www.codecademy.com/ が http://codeyear.com/ を軸に動き出したようだ。CodecademyはJavaScriptの初学はもちろんプログラミングの入門にも最適だ。これを英語圏だけにとどめておくにはあまりにもおしい。

そこで勝手ながらMylingualを利用して日本語訳をあてることにした。自分の時間が許す限り翻訳していこうと思う。

http://japanize.mylingual.net/index.cgi/view?target=codecademy.com

まずMylingualの使い方。Mylingualは以前FirefoxのアドオンとしてJapanizeという名で配布されていた。しかし開発が滞りがちで現在のFirefoxではアドオンがインストールできない。幸いな事に同様の機能がgreasemonkeyのuserscriptで配布されている。それがMylingualである。

しかし公式サイトで配布しているスクリプトは日本語版がない。修正は簡単だったので、日本語版スクリプトを作成・公開することにした。問題があれば公開は止めるかもしれない。以下のソースをmylingual_ja.user.jsという名称で保存しgreasemonkeyにインストールしてほしい。

// ==UserScript==
// @name Mylingual (ja)
// @namespace http://mylingual.net/
// @author Ryo Link
// @include http://*/*
// @description Mylingual (ja)
// ==/UserScript==

(function () {
  var elem = document.createElement('script');
  elem.id = 'mylingual-core';
  elem.src = 'http://mylingual.net/userjs/mylingual-core.js?lang=ja';
  document.body.appendChild(elem);
})();

このスクリプトを導入後、http://www.codecademy.com/ を開くと(まだ一部ではあるが)日本語化されているはずだ。

これの問題点としてMylingualが対応しているサイトは全て日本語化されてしまうところ。任意のサイトに適応させないようにする為にはuserscriptを編集するか機能拡張を作って制御するしかない。これは今後の様子を見て対応しようと思う。

追記：
Userscripts.orgでスクリプトの配布を開始、そのスクリプトをFirefoxとGoogle Chromeで導入する方法を書きました。詳しくはCodecademyノートをご覧ください。IEその他のブラウザに関しては導入方法を書くか未定。おそらくgreasemonkey相当の機能が使えるブラウザなら日本語化できると思います。だめだったらFirefoxかChrome使ってね。

デスクトップアプリの一つの形。 Mozilla Labs >> Chromeless Browser

2012-01-17T00:19:00.000+09:00

動画：デスクトップを消し去るウェブブラウザ Webian Shell、Mozilla Chromeless ベース -- Engadget Japanese:

"話が複雑になってきましたが、要はウェブアプリ時代を迎え、従来のデスクトップアプリを一掃するハイパーシンプルなフルスクリーンブラウザがリリースされたということ。"

古い記事だが、その当時自分は記事を鵜呑みにしてフルスクリーンブラウザが出来たんだ、くらいにしか思っていなかった。しかしMacGap、Fluidなどweb開発技術でのデスクトップアプリ作成を調べていくうちに、この記事が表面上のことにしか触れていない事がわかった。Web ShellとはChromelessのリファレンス実装でもあったのだ。

ではChromelessとは何か？

ChromelessとはXULRunnerアプリをhtml、javascript、cssで書けるフレームワークだ。

The “Chromeless” project experiments with the idea of removing the current browser user interface and replacing it with a flexible platform which allows for the creation of new browser UI using standard web technologies such as HTML, CSS and JavaScript.

Mozilla Labs » Chromeless Browser

XULRunnerアプリが簡単に書けるとなると俄然Chromelessに興味が湧いてきた。これはWebアプリを書くのとは本質的に違う。Thunderbird、SunbirdがChromelessで作れるという事だ。

XULRunner とは、Firefox や Thunderbird と同じくらい多機能な XUL+XPCOM アプリケーションを単独で起動するための Mozilla ランタイムパッケージです。XULRunner はアプリケーションをインストール、アップグレード、さらにアンインストールする機能も提供しています。また、他のプロジェクトや製品への Mozilla テクノロジーの組み込みを可能にする libxul も提供します。

XULRunner - MDN

私が目標の一つとしているのはweb技術でのデスクトップアプリ開発。また一つJavaScriptをマスターする理由が出来た。

制御文。

2012-01-16T03:38:00.002+09:00

JavaScriptの制御文です。一般的な制御文かと。

制御文 - jsdo.it - share JavaScript, HTML5 and CSS

オブジェクトリテラル(連想配列、ハッシュ)

2012-01-14T20:09:00.001+09:00

ここは自分なりの解釈でエントリーを書いた。

ハッシュはJavaScriptにおける一番単純なオブジェクトで、オブジェクトリテラルと呼ばれます。オブジェクトリテラルとは、ゼロ個以上のプロパティ名とそれに結びつけられた値のペアのリストであり、波括弧 {} でくくられているものです。オブジェクトリテラルの表記法をベースとした軽量なデータ記述言語をJSON(JavaScript Object Notation)と呼びます。オブジェクトリテラルとJSONは似て非なるものです。

連想配列(ハッシュ)。 - jsdo.it - share JavaScript, HTML5 and CSS

配列について。

2012-01-14T19:53:00.002+09:00

配列の生成方法、参照と代入、操作。

配列について。 - jsdo.it - share JavaScript, HTML5 and CSS

正規表現について。

2012-01-14T19:28:00.001+09:00

JavaScriptにおける正規表現です。正規表現フラグ・特殊文字はRegExp - MDC Docsにまとまっています。

正規表現オブジェクトは以下のようにして作ります。文字列から生成する場合は， \d などの特殊文字を \\d と書かなければならないことに注意してください。

正規表現について。 - jsdo.it - share JavaScript, HTML5 and CSS

文字列について。

2012-01-14T17:53:00.001+09:00

文字列はシングルクオート( ' )かダブルクオート ( " )で囲みます。両者は全く等価です。シングル・ダブルクオートのどちらの場合でも ¥t (タブ), ¥n (改行) などの特殊文字を利用することができます。他のスクリプト系言語にある，変数展開などの便利な機能はありません。

文字列の基本操作サンプルコードです。

console.log('abc¥ndef'); //¥または\でエスケープ
console.log('abc\ndef');

console.log('abc¥tdef'); //¥または\でエスケープ
console.log('abc\tdef');

console.log("'hogehoge'");
console.log('"ほげホゲ"');
console.log('¥u0068¥u006f¥u0067¥u0065¥u0068¥u006f¥u0067¥u0065'); //unicode

文字列操作のサンプルコードです。

文字列操作のサンプルコード。 - jsdo.it - share JavaScript, HTML5 and CSS

MacGapで出来ること。

2012-01-12T22:41:00.001+09:00

MacGapのJavaScriptコードで出来ることをリストアップしてみた。正直まだ出来ることは少ない。具体的にはこういうことが出来る。

// アプリケーションの終了
macgap.app.terminate();

// Activate application (前面に表示)
macgap.app.activate();

// アプリケーションを隠す
macgap.app.hide();

// アプリケーションを表示
macgap.app.unhide();

// アプリケーションウインドウサイズの変更
macgap.app.setWindowFrame({x:0,y:0,width:100,height:200})

// ビープ音を鳴らす
macgap.app.beep();

// アプリケーションのパスを取得
macgap.path.application;

// アプリケーションリソースのパスを取得
macgap.path.resource;

// サウンドを鳴らす
macgap.sound.play("./my/sound.mp3")

// システムサウンドを鳴らす
macgap.sound.playSystem("funk");

// Growl通知を送る
macgap.growl.notify({
  title: "Notify",
  content: "New Message!"
});

// ドッグアイコンにバッジを設定
macgap.dock.badge = "10";

この程度であれば最新のGoogle Chromeで同じようなことが出来る。ドッグアイコンにバッジの設定はさすがに出来ないが、通知は出来るので実質問題ないであろう。

さて、どちらを使ってアプリケーション開発をすべきなのか？正直自分も迷っている。一つの判断材料として、リソースのアクセスがある。ChromeはFile APIの実装がされておりファイルシステムにアクセスできる。いずれはWebKitフレームワークでも出来るかもしれない。自分としてはSpotlightインポータが使えるようになりたい。それが出来るようになればもうMacGap一択なのだが。

Spotlightインポータの実装ができるか検討してみよう。

XcodeでWebKitアプリ。

2012-01-12T21:29:00.000+09:00

昨日のエントリー「MacGapとUKI。」が気になってソースを追いかけた。なかなか良かった。もうMacGapを使う事になるだろうけど、独自でWebKitフレームワークを組み込んだアプリを作る時のメモとして簡単な手順をブログに残しておく。

作り方の手順。

Xcodeで新規プロジェクト作成。プロジェクトテンプレートはCocoa Aplicationを選択。
任意のプロジェクト情報を記入。
TARGETSでアプリを選択、SummaryのLinked Frameworks and LibrariesでWebKit.framewokを追加。
MainMenu.xibをクリック。続いてWindowをクリック。
Object LibraryでWeb Viewを選択しウインドウに張り付け。
Size inspectorでリサイズ可能に設定。
アプリを開いた時に設定したURLを開くにはコーディングが必要。参考URL「How to launch a web page on opening of the application」http://stackoverflow.com/questions/8599175/how-to-launch-a-web-page-on-opening-of-the-application
コーディング後、MainMenu.xibでコード内容をWev Viewにコネクトする。

設定したURLを開くサンプルコードを載せておく。

AppDelegate.h

//
//  AppDelegate.h
//  MyWebBrowser
//
//  Created by ryo on 12/01/12.
//  Copyright (c) 2012年 __MyCompanyName__. All rights reserved.
//

#import <Cocoa/Cocoa.h>
#import <WebKit/WebKit.h>

@interface AppDelegate : NSObject <NSApplicationDelegate>

@property (assign) IBOutlet NSWindow *window;
@property (retain, nonatomic) IBOutlet WebView *webview;

@end

AppDelegate.m(httpプロトコル)

//
//  AppDelegate.m
//  MyWebBrowser
//
//  Created by ryo on 12/01/12.
//  Copyright (c) 2012年 __MyCompanyName__. All rights reserved.
//

#import "AppDelegate.h"

@implementation AppDelegate

@synthesize window = _window;
@synthesize webview = _webview;

- (void)applicationDidFinishLaunching:(NSNotification *)aNotification
{
    NSString *urlAddress = @"https://docs.google.com/?browserok=true";
    NSURL *url = [NSURL URLWithString:urlAddress];
    NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
    [[self.webview mainFrame] loadRequest:requestObj];
}

@end

AppDelegate.m(ローカルリソース)

//
//  AppDelegate.m
//  MyWebBrowser
//
//  Created by ryo on 12/01/12.
//  Copyright (c) 2012年 __MyCompanyName__. All rights reserved.
//

#import "AppDelegate.h"

@implementation AppDelegate

@synthesize window = _window;
@synthesize webview = _webview;

- (void)applicationDidFinishLaunching:(NSNotification *)aNotification
{
    NSString *filepath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html" inDirectory:@"public_html"];
    NSURL *url = [NSURL fileURLWithPath:filepath];
    NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
    [[self.webview mainFrame] loadRequest:requestObj]; 
}

@end

MacGapとUKI。

2012-01-12T00:28:00.001+09:00

HTML5/CSS3/JavaScriptでMac OS Xのネイティブ・アプリケーションが作れる「MacGap」が公開されています。

HTML5でMacのネイティブアプリが作れる「MacGap」 :: dotHTML5

Windows8から同様にネイティブアプリが作れるようになるらしい。Macでもいずれ出来るだろうと思ってたけど丁度タイミングよく出てきた。

この手の物はモバイルアプリが流行りだしてから幾つか出てきている。ちょっと問題なのはUIがWebそのものだったりする。どうせなら見栄えもネイティブに近い方がいい。

Macのネイティブに近い見栄えのフレームワークと言えばSproutCoreがあったのだが、facebookに買収されてからOSXらしくなくなってしまった。他にも何かないかと探したところUKI(http://ukijs.org/)というものがあった。デモとしてメーラー(http://ukijs.org/mail/index.html)があったがもうまさにOSXのネイティブの見栄え。早速試したので出来たもののスクリーンショットを掲載しておく。

ウェブサービスのアプリはこれで十分かもしれない。

数値について。

2012-01-11T13:31:00.002+09:00

JavaScript の数値は全てが実数型です。整数型という概念はありません。JavaScript の数値は全てが実数型です。整数型という概念はありません。数値演算、代入演算子、インクリメント、デクリメント、演算子について述べます。

数値について。 - jsdo.it - share JavaScript, HTML5 and CSS

演算子は以下の通りです。

演算子の種類	個々の演算子
メンバ	. []
インスタンスの呼び出し/作成	() new
否定/インクリメント	! ~ - + ++ -- typeof void delete
乗算/除算	* / %
加算/減算	+ -
ビットシフト	<< >> >>>
関係	< <= > >= in instanceof
等価	== != 評価時に自動型変換される === !== 自動型変換なし
ビットごとの and	&
ビットごとの xor	^
ビットごとの or	\|
論理積	&&
論理和	\|\|
条件	?:
代入	= += -= *= /= %= <<= >>= >>>= &= ^= \|=
コンマ	,

変数の宣言。

2012-01-11T13:12:00.000+09:00

JavaScriptにおける変数の宣言です。var で宣言します。変数に型はありません。varで宣言しない場合はグローバル変数となります。既に宣言した変数に改めてvarで宣言してもエラーにはなりません。

変数の宣言 - jsdo.it - share JavaScript, HTML5 and CSS

JavaScriptの基礎。

2012-01-11T13:01:00.000+09:00

JavaScript基礎文法最速マスターを参考に基本を書いてみる。内容は出力、コメント、文法チェック。

既にHello World(http://jsdo.it/ryo.link/eS5r)で書いたことなので、そちらにコメント等を追加。

Hello World - jsdo.it - share JavaScript, HTML5 and CSS

前準備としてputs()を作る。

2012-01-10T22:26:00.000+09:00

前回のブログで書いたように最速マスターのまえがきを自分なりにまとめようとしたが、まとめるまでもないのと内容にちょっと不満があるので自分なりの前書きを。

ブラウザを実行環境としたJavaScriptは標準出力がない。

うん、これはわかる。だからと言ってhtmlも同時に復習するのも面倒。なのでここは小飼弾さんにならって標準出力代わりのputs()を作る事にした。そんな大げさなものでもないけど。

puts() - jsdo.it - share JavaScript, HTML5 and CSS

とこんな感じで。

そして他のサンプルで使う時はこのputs()のコードをjsdo.itで新規にコードを書いた際にJavaScriptソースとして読み込み、htmlにはidがworldのdiv要素を書けばそこにputs()で指定した内容が表示される。

Hello World - jsdo.it - share JavaScript, HTML5 and CSS

こんな小さな工夫だけど、これでDOMは今のところ気にせずJavaScriptの復習に集中できる。

復習項目。

2012-01-10T21:54:00.001+09:00

幸いな事にウェブにはよくまとめられたドキュメントがあったので、そちらを利用して進めていこうと思う。

JavaScript基礎文法最速マスター
http://d.hatena.ne.jp/gifnksm/20100131/1264934942

最速マスターシリーズというものらしく、他の言語も多くあるようだ。いつか他の言語もチャレンジしてみよう。

見出しをピックアップしてみた。

まえがき
JavaScript の標準仕様
JavaScript の実行 (ブラウザ編)
JavaScript の実行 (ブラウザ以外編)
基礎
print文
コメント
文法チェック
文
変数の宣言
数値
数値演算
代入演算子とインクリメント・デクリメント
文字列
文字列操作
配列
配列の参照と代入
要素の個数
配列の操作
連想配列 (のようなもの)
制御文
if文
if-else文
while文
for文
for in文
for each文 (Firefoxのみ対応)
Array#forEach (最近のブラウザのみ対応)
switch文
関数
ファイル入出力
正規表現
検索
置換
例外処理
JavaScriptのオブジェクト指向
オブジェクトの定義
メソッド
クラスのようなもの
継承
雑多なtips
真偽値
==と===
変数のスコープ
thisの指す物
既存のオブジェクトの拡張
既存のオブジェクト拡張の落とし穴
JavaScript参考資料

ざっとこんな感じだ。前書きから自分なりにまとめてみようか。

ブログを始める。

2012-01-10T20:31:00.004+09:00

今日からブログを始める。内容はJavaScriptを中心としたプログラミングで。最初は復習を行い、html5に向けての準備、サーバーサイド node.js を学び、最終的に何かアプリを作る。このブログはその過程を記録していく。

まずは環境の整備。と言っても何かをインストールすることはせず、ブラウザだけでやっていく。ブラウザがあればどこからでもプログラミングをできるようにね。

そこで利用するサービスが Cloud9 IDEというもの。node.jsで作られたアプリケーションだ。このサービスを利用するのにそのまま登録してもいいが、後々の事も考えて github のアカウントも取得しておく。github アカウントでCloug9にログインできるんだ。

登録方法は簡単なので特に説明はしない。github アカウントが取得できたら Cloud9 のトップページを開き「Sign up Today!」の下にある github アイコンをクリック。アクセスを許可すればCloud9の利用が可能になる。

あと学習用に jsdo.it も利用する。ブログに埋め込みできるかな？

2012-01-10 1st - jsdo.it - share JavaScript, HTML5 and CSS

無事に埋め込めた。テーマが新しいやつだと表示されないのでブログの設定に注意が必要だった。

それじゃ早速始めてみようか。