STUDIO KINGDOM

WEBデザイナーさん向けjQuery入門

admin — Tue, 29 Nov 2011 13:57:45 +0000

以前、静岡javaScript勉強会で使用したKeynote資料をslideshareしてみました。slideshare良いですね。Keynoteをそのままアップロードできました。

Amazon Web Services勉強会 at 静岡

admin — Mon, 28 Nov 2011 12:52:48 +0000

第1回 JAWS-UG静岡勉強会に参加してきましたので、内容についての簡単なまとめです。
Toggeterでのまとめはこちら。

Amazon EC2のアカウント作成からWordpressインストールまで

実際に触りながら、Wordpressのインストールまで行いました。
EC2上の動作は非常に軽快で、Apache,PHPのインストールの速さに驚きました。
ハンズオン重要！次回、勉強会を自分で開催する際には取り入れてみたい。

AWSを業務で使うために上司を説得する方法

上司が説得出来なかったら切腹！どうしてもAWSを使わせてくれないなら、静岡を脱藩なう！
サーバーワークスさんは、AWSいじりしたいエンジニアを新卒も含め、スタッフを絶賛募集中だそうです。

科学カイロ

ZIPPO(ジッポー) ハンディウォーマーフリース付繰り返し使える化学カイロ

posted with amazlet at 11.11.28

ZIPPO(ジッポー) (2008-09-24)
売り上げランキング: 706

Amazon.co.jp で詳細を見る

55jさんが持っていた物に、懇談会で自分が個人的に食いついたアイテム。
実物はとってもオシャレです。詳細はこちら。
寒いサーバルームで作業するエンジニアさんや冬登山する人にオススメ。

懇談会にて伺った興味深いお話

クラウドエンジニアはバイク好きが多い？
横の繋がりが結構あって、Amazonさんと他国産サーバ屋さんで集まってお互いの製品、サービスを罵り合ったりしてるとかしてないとか。
地方だとクラウドする程の案件が無いと言われるかもしれないが、過去10年を振り返ればコストの問題でボツになった企画があるはず。実際にそうして堀起こしてクラウドによって実現したサービスがある。

講師の皆様、参加者の皆様、支部長の#A様及びスタッフの皆様本当にお疲れ様でした。次回もよろしくお願い致します。

SenchaTouch入門

admin — Tue, 28 Sep 2010 01:00:50 +0000

CSS NITE IN SHIZUOKAでLTしたSenchaTouchについてなんですが、LTに用いたソースが0.9.3用だったのですが、現在の0.9.5のバージョンでは動かない事が判明 orz。なので、補足として0.9.5用にブログに残しておくことにしました。

Sencha Touch とは

iPhone、アンドロイド向けサイトを作成するためのjavaScriptライブラリ
javaScriptの値を調整するようにプログラムを組むだけで、iPhoneアプリで見かけるようなエレガントで一貫したデザインのUIが簡単に作成可能。

まぁ、百聞は一見にしかず。下のデモページをスマートフォン、PCの場合はChromeかSafariでご確認ください。

SenchaTouchのデモページ

かちびと.netさんも紹介されています。

iPhone等のWebアプリをHTML5で構築する為のフレームワーク・Sencha Touchを触ってみた – かちびと.net

SenchaTouchの導入

SenchaTouchのダウンロード

所定の場所にダウンロード後、解凍してください。
フォルダの中にSenchaTouchを動かすうえで最低限必要なファイルとフォルダは下記のとおりです。

ext-touch.js
resourcesフォルダとその中身

これを使って、リストがスライドして次々とページ遷移する簡単なページを作ってみました。
作成するファイルは以下の2つ。

index.html
index.js

完成イメージは次のとおりです。

それでは順番に見ていきます。

index.html




    
    Nested List

重要な部分は6行目～8行目。
6行目でresourcesフォルダ内のcss/ext-touch.cssを
7行目でext-touch.jsを
8行目でindex.jsをそれぞれ読み込みます。
パスは環境に合わせて変更してください。

また、この例ではタグ内には何も書きません。

index.js

Ext.setup({
    onReady: function(){
        var data = {
            text: 'トップ',
            items: [{
                text: '静岡中部',
                items: [{
                    text: '静岡市',
                    items: [{
                        text: '葵区',
                        leaf: true
                    },{
                        text: '駿河区',
                        leaf: true
                    },{
                        text: '清水区',
                        leaf: true
                    }]
                },{
                    text: '焼津',
                    leaf: true
                }]
            },{
                text: '静岡西部',
                items: [{
                    text: '浜松',
                    leaf: true
                },{
                    text: '掛川',
                    leaf: true
                }]
            },{
                text: '静岡東部',
                items: [{
                    text: '沼津',
                    leaf: true
                },{
                    text: '伊豆',
                    leaf: true
                },{
                    text: '三島',
                    leaf: true
                }]
            }]
        };

        Ext.regModel('ListItem', {
            fields: [{name: 'text', type: 'string'}]
        });

        var store = new Ext.data.TreeStore({
            model: 'ListItem',
            root: data,
            proxy: {
                type: 'ajax',
                reader: {
                    type: 'tree',
                    root: 'items'
                }
            }
        });

        var nestedList = new Ext.NestedList({
            fullscreen: true,
            title: '静岡県',
            displayField: 'text',
            store: store
        });
    }

});

index.jsの中身はほとんどがjsonになっています。各項目に値を指定することで、ページ構成がデザインされます。SenchaTouchではこのjsonを上手く使いこなすことが重要になってきます。とりあえず、これで完成となります。実際のサイトは下記URL先をご確認ください。

http://sencha-demo.studio-kingdom.com/

また、0.9.3に比べて0.9.5では色々と複雑になっていますので、それについて少し載せておきます。

47～48行目では、リストに表示するjsonデータについて、モデル指定を行っています。これはデータベースで言う「カラム名」と「型」といったところでしょうか。jsonデータを使うにはこのモデル指定が必須になったのかもしれません。
51～61行目はjsonデータを入力データとして各コンポーネントで扱えるようにしているようです。modelは上記のモデル指定、rootはjsonデータのオブジェクト名と思われますが、proxyの意味がいまいち分かりません…。

本格的に作る場合にはAPIを熟読する必要がありますね。英語ですが(^-^;)

Sencha Touch API Documentation

また、肝となるjsonについてですが、自分はこの本で習いました。10日で覚えるシリーズは根本から丁寧に説明してくれる良書が結構あったりしておススメです。

10日でおぼえるAjax 入門教室漆尾貴義

netstat –nr の意味

admin — Sun, 26 Sep 2010 14:32:17 +0000

$netstat –nr
Kernel IP routing table

Destination    Gateway          Genmask         Flags    MSS   Window  irtt   Iface
192.168.1.0    0.0.0.0          255.255.255.0   U        0     0       0      eth0
127.0.0.0      0.0.0.0          255.0.0.0       U        0     0       0      lo
0.0.0.0        192.168.1.254    0.0.0.0         UG       0     0       0      eth0

どうしてもnetstat -nrの意味(読み方)が分からず、その筋の人にしつこく聞いてやっと理解できたのでメモ。

1行目

IPアドレス192.168.1.0～255のネットワーク空間(Destination 192.168.1.0、Genmask 255.255.255.0)に到達したい場合は、ゲートウェイに行かんでいいから直接(Gateway 0.0.0.0)行ってください。インターフェース(LANの出口)はeth0ね。という意味。

2行目

IPアドレス127.0.0.0に行きたい場合は、同じく直接行ってくださいという意味。ただし、インターフェースはloを指定。これはループバックという、物理的には存在しない論理的なインターフェース。127.0.0.0は実質、自機を表しているので。

3行目

それ以外のネットワーク空間(Destination 0.0.0.0、Genmask 0.0.0.0)に行きたい場合は、ゲートウェイ192.168.1.254に行って（Gateway 192.168.1.254）くださいという意味。インターフェース(LANの出口)はeth0ね。という意味。

0.0.0.0 が表すもの

各項目の0.0.0.0が何を表しているのか知っておくことが重要だと思いました。
Getewayでの0.0.0.0はゲートウェイを介さず直接、行き先へ向かってくださいという意味。
Destinationでの0.0.0.0はネットワーク空間を明示的に指定されていない、その他については、という意味。
この例はCentOSだけど、OpenSolarisでは0.0.0.0はDefaultだったりします。

CSSNITE IN SHIZUOKA vol.1に行ってきました

admin — Sat, 25 Sep 2010 03:15:46 +0000

行ってきました、CSSNITE IN 静岡！
CSS Nite in SHIZUOKA 〜Web制作者のためのセミナーイベント CSS Nite の静岡県版
まずは会場入り。

中の雰囲気はこんな感じ。

来場者全員に、こんな素敵なプレゼントが！一気にmozilla充です。

それでは、どんなセッションが行われたか紹介を。

HTML5とIE9

小山田さん(株式会社ピクセルグリッド / PixelGrid, Inc.)

IE無くなってほしい人！で、まずはアンケート調査。
会場の半分の人は無くなって欲しい派でした。もちろん、自分も手を挙げました…。
その後、HTML5の機能（audio,video,canvas,svg）やCSS3についてデモ付きで色々と説明していただきました。

で、個人的に気になっていたHTML5とIE9の現在の状況なんですが…

IEは他のブラウザに比べてHTML5対応にかなりの後れをとっている。
IE9になっても、他のブラウザに比べるとHTML5で実装されていない機能が多い。
よってHTML5を用いて開発する際はIE9ベースに行うべし。そうすれば、他のブラウザでも動くはず。
html5.jsを使えば、HTML5に対応していないブラウザでも、javaScriptの力でHTML5が実現できる！？

その後の懇談会でサラダとりわけてくれたり、腰が低くてめっちゃ良い人でした。
近々、年上の女性と結婚されるそうで、おめでとうございます！チラ見したiPhoneの壁紙が、彼女さんのウェディングドレスだったような気がします。
静岡市出身だけどあまり帰ってこないそうで、最近リニューアルされた日本平動物園をススメておきました。

Movable Typeを使用したCMS構築のTIPS

工藤さん(静岡県沼津市・三島市・駿東郡-ホームページ制作とインターネット活用コンサルティングのDigitalAssist)

CSS NITEを静岡に呼んでくれた三島のITエンジニアの集まりの中心メンバーの方。
工藤「ちゃん」と呼ばれたいそうな。。。

MTのカスタムフィールドIDを使ったテクニックなどを紹介していただきました。
でも、すいません(>_<) 自分、WordPress厨なんです。

ただ、個人でWordPress使う人は多いんですが、事例で紹介されてたように大手のキッチリした企業さんはMT支持なんですよね。
確かBusiness ArchitectsさんもMT使ってたと思います。

去年から今年の前半までを振り返る！2010年上半期海外Webデザイントレンド

原さん(株式会社エフエックスビイ : FXBはメディア作りを通じ、世の中を楽しく便利にしていきます)

2010年上半期海外Webデザイントレンドについて教えていただきました。

巻き込みリボン、ネクタイのような下地のデザイン
吹き出し
背景のテクスチャに、ステッチ、皮、紙など
背景に地平線、空、海を使用したデザイン
メインイメージをインタラクティブに（Flash→jQuery）
CSSによるドロップシャドウ、へこみ、浮きなど
フォームはより多彩に
縦方向の小さな段組み（ユニクロ等）
アイコンがリアル志向から、ピクトグラム、単一色のシンプルで本来の役割に
半透明レイヤーを重ねたデザイン
WEBフォントを多用したデザイン（日本語は現状無理…）
ペナント（旗）を使用
玉をぼかしたようなイメージを使用（ヘッドライト、木漏れ日のような）

富士宮市出身だそうで、懇談会では富士宮焼そばについて語っていただきました！

ライトニングトーク

休憩のあと、5分間ずつ5人のライトニングトークがありました。
及ばずながら、私めも話をさせていただきましたが、初めての経験でしたので緊張しまくりでした。
時間制限というプレッシャーはやはり結構きついですね…。
皆さん、資料を作りこんであって正直お恥ずかしい限りでした。。。(^^;)

ジャンケンプレゼント

また、各セッションの合間にじゃんけんプレゼントがあり、あいこじゃんけんに勝ち残った人に書籍やグッズのプレゼントがありました。
途中、なんと運よく勝ち残ってしまい、下記のWP本をGET！あざっす！

WordPress 3　サイト構築スタイルブックエ・ビスコム・テック・ラボ

他にも、MTやWebデザイン関連の本が5～6冊ほど、MTのTシャツ、トートバッグ、更に更に最新のiPod nanoプレゼントもありました。
ジャンケンが強ければ逆に儲ける事が出来てしまいますね。。。

Apple iPod nano 16GB グラファイト MC694J/A 【最新モデル】

懇談会でも、ジャンケンプレゼントが行われ、こちらのFirefoxレアグッズが！
勝ち残った人にお願いして、撮影させていただきました。
内容は、

クリアケース
ストラップ
フォクスケシール
ペンライト(マークが浮かび上がるそうな)
ボールペン

確認できたのはこんな感じでしたが、他にも何かあったかもしれません。
自分もめっちゃ欲しかった…。

皆様お疲れ様でした。

ともかく今回CSSNITEを読んでくださった工藤さんを三島近辺のスタッフの方々、CSSNITE代表の鷹野さん、いずれも静岡出身の講師の皆様、本当にお疲れ様でした。何でも、次回Vol.2の開催も決定しているそうで、非常に楽しみ。また、参加します。

本当にありがとうございました！

WinSCPにPuttyの設定を取り込む

admin — Tue, 21 Sep 2010 10:37:10 +0000

前回のさくらVPSのsshによる鍵認証の設定に絡んで、WinSCPというツールをご紹介。
このツールはFFFTPのようにファイルのアップロード、ダウンロードをsshによって実現することが出来るツールです。また、Puttyで設定した内容をそのまま取り込んで利用することが出来る機能があるため、Puttyとセットで使用すると大変便利です。

WinSCP :: Download

ダウンロードしてインストールした後、ツールを起動して
まず、[機能]→[取り込み]を選択

Puttyで設定されている情報一覧が表示されるので、WinSCPに取り込む項目と「キャッシュしたホスト鍵を取り込む」にチェックを入れて、最後に「取り込み」をクリックします。

設定完了後、この設定を選択し、鍵認証に使用したユーザー名とパスフレーズを入力すると、ファイルのアップロード、ダウンロードが出来るようになります。

さくらVPSのsshによる鍵認証の設定

admin — Wed, 15 Sep 2010 07:56:01 +0000

VPSのセキュリティーってどうなってるの?

↑で指摘されているユーザーによる脆弱性について、自分もインフラ周りに弱い危ういユーザーの一人です。先日、さくらVPSに登録したのですが備忘録を兼ねて、まずはsshによる鍵認証について、ここに書き残しておこうと思います。まずはPuttyをダウンロード、インストールします。

PuTTY ごった煮版

鍵認証の設定手順は次の通り。

公開鍵と秘密鍵の生成
鍵認証ログイン用のユーザー作成
サーバ側に公開鍵を登録
sshの設定
Puttyに秘密鍵をセットして接続

では、順番に進めていきます。

1). 公開鍵と秘密鍵の生成

[スタート]-> [プログラム]-> [PuTTY]-> [PuTTYgen]で鍵生成ツールを開き、公開/秘密鍵ペアの生成の「生成」をクリックします。

赤い斜線部分のエリアをマウスで動かして、乱数を生成します。

鍵の生成が完了すると次のような画面になります。

鍵のコメントを任意で編集します。用途やユーザー情報を書いておくと良いでしょう。
鍵のパスフレーズには任意のパスワードを入力します。これはOSへのログインパスワードとは関係ありません。
次に生成した鍵を保存します。「公開鍵の保存」と「秘密鍵の保存」ボタンを押して鍵を保存します。
秘密鍵のファイル名は拡張子を.ppk、公開鍵は.pubとしておくと良いでしょう。

2). 鍵認証ログイン用のユーザー作成

次に鍵認証でログインするユーザーを作成します。

useradd sakura
passwd sakura
Changing password for user sakura.
New UNIX password:
Retype new UNIX password:
passwd: all authentication tokens updated successfully.

3).サーバ側に公開鍵を登録

サーバ側に公開鍵を登録します。
鍵認証用のユーザーのディレクトリの.sshディレクトリにauthorized_keysを作成します。
.sshディレクトリが無ければ作成してください。また、「.」で始まるファイルはlsでは確認することが出来ず、ls -aとしなければなりません。

cd /home/sakura (ユーザーディレクトリに移動)
mkdir .ssh (.sshディレクトリを作成)
chmod 700 .ssh (.sshディレクトリの権限を所有者だけに限定)
chown -R sakura:sakura .ssh (所有者をrootからユーザに変更)
vi authorized_keys (公開鍵ファイルを作成、編集)

PuTTYgenの「OpenSSHのauthorized_keysファイルに～公開鍵」の部分をコピーして、authorized_keysにペーストして、保存します。
PuTTYgenを閉じてしまった場合は、[変換]->[鍵のインポート]で秘密鍵を指定してください。

chmod 600 authorized_keys (権限を所有者だけに変更)

4)サーバのssh設定

サーバ側のssh設定で、鍵認証ログインを許可するように設定します。

vi /etc/ssh/sshd_config

#PermitEmptyPasswords no ⇒ PermitEmptyPasswords no(パスワード無しのログインを禁止)

#RSAAuthentication yes                        ⇒(RSA認証を許可)
RSAAuthentication yes
#PubkeyAuthentication yes                     ⇒(公開鍵認証を許可)
PubkeyAuthentication yes
#AuthorizedKeysFile      .ssh/authorized_keys ⇒(認証鍵ファイルの場所を指定)
AuthorizedKeysFile      .ssh/authorized_keys

#PasswordAuthentication yes ⇒ (rhost認証を無効)
PasswordAuthentication no
#RhostsRSAAuthentication no ⇒ (rhost認証を無効)
RhostsRSAAuthentication no

設定を保存後、設定を反映させるためにsshdをリスタートします。

/etc/init.d/sshd restart

5).Puttyに秘密鍵をセットして接続

セッションを指定して、ホスト名またはIPアドレスを入力。セッション一覧の欄には任意の設定名を入力します。

[接続]->[SSH]->[認証]を選択し、「認証のためのプライベートキーファイル」に秘密鍵ファイルを指定します。

最初の画面に戻って保存をし、開くボタンをクリックします。

VPSに鍵認証でログイン出来ることを確認できたら、Rootログインが出来ないように設定を変更します。

vi /etc/ssh/sshd_config

#PermitRootLogin yes ⇒
PermitRootLogin no

設定が完了したら、再度sshdをリスタートします。

/etc/init.d/sshd restart

rootでログイン出来ないことを確認しましょう。
これで、公開鍵認証の設定は完了です。

清水Webフォーラムに参加してきました

admin — Sun, 29 Mar 2009 16:44:51 +0000

といっても、一週間以上も前の話なんですが訳あってネットに繋がらなかったのでご容赦を。清水Webフォーラム

セミナーの内容

セミナーの講師はこんな方々でした。

実は今回のセミナーはサンとリクルート共催のマッシュアップアワードの繋がりだったそうな。サイトのトップにはケンタローさんの優勝作品「Chamap」が紹介されています。

セミナー後の懇談会

各講師の方にいろいろ聞いてみましたが、ケンタローさんのフリーに成りたての頃は数ヶ月無収入だったという話は結構衝撃でした。その期間に地元アピールのポータルサイトなどを作り、それがきっかけで商工会議所からお声が掛かるようになったのだそうです。実は一ヶ月ほど前に偶然にもある起業家さんに、お金になる仕事をとってくるにはどうしたら良いのでしょうか？と聞いてみたところ、「お金云々より、まず自分が何を出来るかアピールできなきゃ本末転倒だよ～」みたいなお言葉をいただいており、正にその通りだなぁと実感。

セミナー後の飲み会

懇談会の後、講師陣と同志で近くの居酒屋に直行。さすがIT系というか何というか、料理が出てくればデジカメでパシャパシャ、お酒が入ってしばらく経つとバッグからもぞもぞとノートPC＆Eモバイルのセットが登場。この辺で完全に装備を間違ったなぁと反省。次回同じようなセミナーがあったら、デジタル装備で行こう。

Yahoo UIに入門してみた

admin — Sun, 25 Jan 2009 12:23:30 +0000

最近浅く広い、この手のエントリ多いです。Yahoo UIが何気に優秀という噂を聞きつけて、どうしても試してみたくなったので。
Ajaxのおさらいをしていて、ちょうどYahooUIの項目もあったのでサンプルプログラムを改良して、多少実践向けにして晒してみたくなったという事情もあります。
おさらいに使用した本はこちら。

10日でおぼえるAjax 入門教室

posted with amazlet at 09.01.25

漆尾貴義
翔泳社
売り上げランキング: 120488

Amazon.co.jp で詳細を見る

この本、結構おススメ。IEでAjaxする方法を解説⇒次はFireFoxで⇒各ブラウザ毎に処理を振り分け⇒innterHTMLやCSSの説明⇒prototype.js登場といった感じで、Ajaxに必要なことを基礎から追って順に説明してくれるので分かりやすいです。
Yahoo UI Library リファレンスの[■Calendar]⇒[Calendar]も参考にしてます。
で、カスタマイズしたプログラムはこんな感じ。

カレンダー表示リンクを押すとカレンダーが表示。
入力欄が空でリンクを押された場合は当月を表示、日付が入力されていたら対象月を表示。
カレンダー上で日付をクリックするとyyyy/mm/dd形式で入力欄に日付が入り、カレンダーが閉じる。
(入力欄の日付エラーチェックはしてません。アルファベットとか入れるとトンデモカレンダーが表示されます(>_<))

では、実際に作ってみましょう。まずはYahooUIをダウンロードしてきます。
http://developer.yahoo.com/yui/

使用するのはbuildフォルダ内のファイル群になります。作成するプログラムと同じフォルダ階層にbuildフォルダを移し、フォルダ名をyuiに変更してください。
肝心のプログラムは、下記の通り。
















カレンダー表示

変数がやたら多くて美しくないですなぁ、即興で作ったのでご勘弁を。
バグ等あったら教えてください。

NetBeansでMercurialを試してみた

admin — Sun, 25 Jan 2009 02:47:29 +0000

ポストSubversionといわれているMercurialを試してみました。また、NetBeansが標準でMercurialをサポートしているようなのでNetBeansもついでに導入してみました。それぞれの特徴は下記のとおり。

Mercurial

ようはSubversionのようなバージョン管理ツールなんですが、大きな違いは従来のバージョン管理ツールとは違ってプロジェクト間で共有するリポジトリを事前に用意しなくて良いという点です。共有リポジトリを用意しないでローカルのみでバージョン管理することが可能で、また、後ほど構築した共有リポジトリにまとめてコミットしてしまうといったことが出来るようです。ローカルで個人的にバージョン管理、サーバ等の共通スペースでチーム間でのバージョン管理が出来るということですね。

NetBeans

Eclipseと同じような統合開発環境（IDE）です。Eclipseと比較すると、よりGUI的で動作が速いように感じます。個人的にはEclipseが細かいカスタマイズが可能な自作PCだとすると、NetBeansは安定したメーカ製のPCという印象を持ってます。またEclipseのようにJavaだけでなくPHPやRuby(Rails）、C等のメジャーな言語もサポートされています。

Mercurialのインストール

MercurialにもSubversionのようにWindowsクラインであるTortoiseHgがあるので、そちらをインストールしてみました。
ちなみにMercurialの意味は水銀で、水銀の元素記号がHgとなっています。

※TortoiseHgは現在のバージョンでは日本語環境に問題があるようです。NetBeans上で使う分には問題無いと思いますが、念のためTortoiseHg以外のインストーラのリンクを貼り付けておきます。
Mercurialの利用＞インストール

それではまず、TortoiseHgをダウンロードしてきます。
http://tortoisehg.sourceforge.net/

↓

ダウンロードしたexeファイルをダブルクリックして、インストールを行います。

NetBeansをインストール

下記サイトからNetBeansをダウンロードします。使用言語によって任意のツールを選択することが可能です。また、後から[ツール]->[プラグイン]で機能追加することもできます。
http://www.netbeans.org/downloads/?pagelang=ja

ダウンロードしたexeファイルをダブルクリックして、インストールを行います。インストールが完了したらNetBeansを起動して動作確認を行ってください。

NetBeans上でMercurialの基本動作を確認

まずはプロジェクトを初期化します。ナビゲーションからプロジェクトを選択し、[バージョン管理]->[プロジェクトを初期化]を選択してください。

プロジェクトフォルダにMercurialの管理ファイルが作成されます。Subversionは各フォルダに隠しファイルが生成されますが、Mercurialはプロジェクトフォルダ直下にのみ作成されるようです。これは良いですなぁ。

とりあえず、初回コミットを試してみます。コミットするフォルダを右クリックして[Mercurial]->[コミット]を選択。

コミットをクリックしたら下記ウインドウが表示されました。空欄には自分の名前とメルアドを記入すれば良いと思うんですが、Name Contextの欄がどういうことなのか分からない。Global to ～がサーバ等の共有リポジトリへのコミットでLocal to ～がローカルへのコミットってことでしょうか。

コミットした後、適当なファイルを編集して差分確認を行ってみました。

ちゃんとローカルとリポジトリで比較されてますね。時間があれば、サーバにMercurialをインストールしてそちらへのコミットも試してみたいと思います。