2011年9月3日土曜日

reverse_iterator

reverse_iteratorのメモ。

reverse_iteratorは通常のiterator(反復子)と逆向きに要素を横断するための逆転反復子。
図示すると以下の通り。





向きが逆なだけでなく、順方向と一部用法が違ったので注意。
eraseするとき、順方向なら

// std::set a_set;
std::set::iterator ite = a_set.begin();
a_set.erase(ite++);

こういう感じだが、reverseだと
std::set::reverse_iterator rev_ite = a_set.rbegin();
a_set.erase(--rev_ite.base());

になる。

2011年6月11日土曜日

プログラミングに適したフォント


TOP 10 PROGRAMMING FONTS
という記事を読んで開発環境のフォントを変えてみる気になりました。

曰く、
1位 INCONSOLATA

2位 CONSOLAS

どちらもフリーのフォントで、CONSOLASの方はWindows VIsta以降は標準で入っているらしいです。
サイトを見る限りではINCONSOLATAの方がすっきりして見えるのですが、
私のXPにはCONSOLASが入っていたので(Visual studioに入っていたのか?)CONSOLASにしてみました。


今までCOURIERを使うことが多かったんですが、こっちのが良いです!!
気分も変わりますし。
ちなみに上の記事ではCOURIERは10位だったんですが、おすすめしないって書いてありました...。

Strawberry Perl に入ってたg++

Windows上でちょっとC++のソース書きたいなーと思ったんですが
そのために仮想環境でlinux入れるのもcygwinとか入れるのもめんどくさい....。

この間WindowsでPerl動かしてみるために入れたStrawberry Perlにgcc/g++入ってるって何かに書いてなかったか?と思ってコマンドプロンプトで試しに
g++ -v
打ってみたらちゃんと返ってきました。


これでわざわざ他のもの入れる必要ないですね!!ラッキーです。
hello world も大丈夫。


Strawberry Perlに同梱されているのはMinGWというGNUのCコンパイラのWindows移植版ということでした。

2011年4月13日水曜日

Panelなどのtitleをhtmlで設定する (ExtJS)

Panelとその拡張のコンポーネントはheader、headerCfgオプションを使用してタイトルを設定できます。titleオプションでタイトルを設定する場合はテキストしか使えませんが、headerをtrueにしてheaderCfgを有効にすれば、DOM要素でタイトルを設定することができます。このときtitleオプションは指定しないようにします。
headerCfgの書式はExt.DomHelperと同じです。

もともとfieldsetのtitleにcollapse/expandの動きと関係ないチェックボックスを付ける方法を探していたんで、その例をおいておきます。

上段のfieldsetはタイトルをheaderCfgオプションで設定したもの、下段はタイトルをtitleオプションで設定し、checkboxToggleをtrueに設定したものです。チェックボックスを外したときの動きが違います(checkboxToggleはfieldsetのcollapse / expandのためのオプションなので)。

 checked
unchecked

javascriptソースは以下の通りです。

javascript:
Ext.onReady(function(){
    var panal = new Ext.Panel({
        title: 'Sample panel',
        height: 250,
        width: 300,
        bodyStyle: 'padding: 15px',
        renderTo: 'panel',
        layout: 'form',
        items: [{
            xtype: 'fieldset',
            header: true,
            headerCfg: {
                tag: 'legend',
                cls: 'x-fieldset-header x-unselectable',
                cn: [{
                    tag: 'input',
                    type: 'checkbox'
                }, {
                    tag: 'span',
                    cls: 'x-fieldset-header-text',
                    html: 'header config'
                }]
            },
            defaultType: 'textfield',
            items :[{
                fieldLabel: 'Field 1'
            }, {
                fieldLabel: 'Field 2'
            }]
        }, {
            xtype: 'fieldset',
            checkboxToggle: true,
            collapsed: true,
            title: 'Title',
            defaultType: 'textfield',
            items :[{
                fieldLabel: 'Field 3'
            }, {
                fieldLabel: 'Field 4'
            }]
        }]
    });
});

headerCfgでは次の4つの以外は、DOM要素の属性と判断されます。


  • tag: 要素のタグ名
  • children or cn: 子要素の配列
  • cls: 要素のclass属性
  • html: innerHTML



2011年3月10日木曜日

コンポーネントのlistenersオプションで、同一イベントに対して複数のハンドラを設定したいとき (ExtJS)

createSequenceを使ってできました。関数を呼び出した後に別の関数を呼び出す関数です。
createSequence( Function fcn, [Object scope] ) : Function

javascript:
var secondFn = function(){
    // 何か処理
};

var cmb = Ext.form.ComboBox({
    typeAhead: true,
    triggerAction: 'all',
    lazyRender:true,
    mode: 'local',
    store: new Ext.data.ArrayStore({
        id: 0,
        fields: [
            'myId',
            'displayText'
        ],
        data: [[1, 'item1'], [2, 'item2']]
    }),
    valueField: 'myId',
    displayField: 'displayText',
    listeners: {
        select: function(cmb, record, index){
            // 何か処理
        }.createSequence(secondFn)
    }
});

というように書けます。

2011年3月6日日曜日

layoutの中のitem間にスペースを作る(ExtJS - Ext.spacer)

地味に便利だと思いました。
例えばanchor layoutで縦に要素をただならべると、こんな感じに要素同士は隣あっています。

ちょっと間空けたい時とかスタイルの設定すんのかなー、でもそれめんどすぎと思ったらちゃんとありました。
Ext.Spacer。xtypeはspacerです。
これをitem1とitem2の間に追加するとこんな感じに間隔を空けられます。

javascriptのソース
Ext.onReady(function(){

    var panal = new Ext.Panel({
        title: 'anchor layout',
        autoHeight: true,
        width: 300,
        bodyStyle: 'padding: 15px',
        renderTo: 'panel',
        layout: 'anchor',
        items: [{
            title: 'item1',
            anchor: '90%',
            height: 100
        }, {
          xtype: 'spacer',
          height: 10
        }, {
            title: 'item2',
            height: 100
        }]
    });
});

なんということもないんですが、最初は存在に気づきませんでした。
スペースの大きさ設定、はheightやwidthの他に、layoutがboxのときはflexというのを使うことができます。
下はitem間にflex: 1のspacerを配置して均等に配置した例です。


このあたりはExtJS exampleのHBox Layout, VBox Layoutのところに例がありましたね。

2011年3月5日土曜日

カラーパレットウィンドウ (ExtJS)

ExtJSでカラーパッレトウィンドウです。
パレットで色を選択してOKボタンをクリックすると、もとの画面に反映します。
以下はサンプル画像です。

初期状態:

colorボタンをクリックしてカラーパレットウィンドウをポップアップ。
カラーボタンをクリックするとウィンドウ下部に選択した色のコードを表示します。

OKボタンクリックでもとの画面に選択した色を表示します。



HTML
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="./resources/css/ext-all.css" />

    <script type="text/javascript" src="./jslib/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="./jslib/adapter/jquery/ext-jquery-adapter.js"></script>
    <script type="text/javascript" src="./jslib/ext-all.js"></script>
    <script type="text/javascript" src="./sample.js"></script>
  </head>
  <body>
    <div id="btn" style="margin: 10px"></div>
    <div  style="margin: 10px">selected color: <span id="selected">□</span></div>
  </body>
</html>

javascript
Ext.onReady(function(){
    var btn = new Ext.Button({
      text: 'color',
      renderTo: 'btn',
      listeners: {
        click: function(){
            var win = new Ext.Window({
              height: '180',
              width: '160',
              xtype: 'panel',
              title: 'color select',
              items: [{
                xtype: 'colorpalette',
                listeners: {
                  select: function(plt, color){
                      Ext.getCmp('sel-color').setValue(color);
                  }
                }
              }, {
                xtype: 'form',
                border: false,
                bodyStyle: 'background-color: transparent; padding-left: 5px;',
                labelWidth: 60,
                items: [{
                    xtype: 'displayfield',
                    id: 'sel-color',
                    style: 'margin-top: 2px',
                    fieldLabel: 'selected'
                }]
                
              }],
              buttons: [{
                text: 'OK',
                listeners: {
                  click: function(){
                      var clrtext = Ext.getCmp('sel-color').getValue();
                      var ele = Ext.get('selected');
                      if((clrtext == 'ffffff') || (clrtext == 'FFFFFF')){
                          ele.update('□');
                          ele.applyStyles('color: #000000');
                      }else{
                          ele.update('■');
                          ele.applyStyles('color: #'+ clrtext);
                      }
                      win.destroy();
                  }
                }
              }]
            });
            win.show();
        }
      }
    });
});

ポイントはpanelのitemsにcolorpaletteを指定するところです。
この例ではさらにdisplayfieldに選択した色のコードを表示しています。

2011年2月27日日曜日

ハンドラの関数に引数を追加したいとき (ExtJS)

コンポーネントにイベントハンドラを設定するとき、追加の引数を渡したいときがあります。
たとえばコンボボックスのselectイベントの場合

// 関数定義
function doSomething(combo, record, index){
    // 何か処理
}

// イベントハンドラ設定部分
Ext.getCmp('comboID').on('select', doSomething);

そのままだと、引数として以下が渡されます。

combo: Ext.form.ComboBox
コンボボックス
record: Ext.data.Record
ストアから返されたデータレコード
index: Number
ドロップダウンリスト内の選択された項目のインデックス

ハンドラに引数を追加したいとき、関数定義を次のようにしても、そりゃーダメです。

// 間違った関数定義
function doSomething(combo, record, index, addParam){
    // 何か処理
}

こういうときはFunctionクラスのcreateCallback、またはcreateDelegateを使います。

上の例だと次のように書けます。

/**
* createDelegateを使う
*/
// 関数定義部分
function doSomething(addParam){
    var value = this.getValue();
    // 何か処理
}

// ハンドラ設定部分
var cmb = Ext.getCmp('comboID');
cmb.on('select', doSomething.createDelegate(cmb, [addParam]));

createCallbackとcreateDelegateの違いは、スコープを渡せるかどうかです。

引数の形式
createCallback(/*args...*/):Function
createDelegate([Object obj], [Array args], [Boolean/Number appendArgs]):Function

ExtJSのAPIリファレンスにはbuttonの例が載っています。
ExtJS 3.0 API Documentation 日本語版
http://extdocs.xenophy.com/

2011年2月22日火曜日

LPIから『高信頼システム構築標準教科書』無料公開

http://lpi.or.jp/linuxtext/system.shtml

おおー!ありがたい。アンケートに答えるのめんどくさかったけど。

基準にしているOSはcentOS 5.5です。
目次は次の通り。

 1章 高信頼システムの概要
 2章 Linuxサーバ1台の稼働率を上げる設計
 3章 複数台のサーバによる高信頼性システムの設計例
 4章 データの共有
 5章 データベースの冗長化
 6章 クラスタシステムの監視
 7章 システム監視
 8章 ロードシェアリングによるシステムの構築
 9章 アクティブ・スタンバイクラスタによるシステムの構築
10章 サーバの仮想化
11章 仮想サーバを構築する(Xen編)
12章 仮想サーバを構築する(KVM編)

週末あたりにまとめて読めると、いいなあ...

2011年2月19日土曜日

Eclipseショートカット -インクリメンタルサーチができてうれしい-

とりあえずよく使うものをメモです。キーアシスト(Ctrl + Shift L)を見つつ。


行ジャンプ
Ctrl + L の後表示されるフォームに行番号を入力

選択文字列を検索 next find
Ctrl + K
逆方向
Ctrl + Shift + K

インクリメンタルサーチ 
Ctrl + J
逆向き(reverse)は
Ctrl + Shift + J
次の候補へは↑↓キーで移動できます。サーチから抜けるときはescや←→で。

コード整形
Ctrl + I

1行コメントアウト / 1行コメントアウト解除
Ctrl + /

ブロックコメントアウト
Ctrl + Shift + /
解除
Ctrl + Shift + \

1行削除
Ctrl + D

矩形選択
Alt + Shift + A
これで矩形選択と通常の選択を切り替えられます。

getter/setter生成のウィンドウを開く
Alt + Shift + S の後 R

あとショートカットじゃないですが
"/**"と入力した後でエンターすると、デフォルトのdocが入力されるのは便利ですね。

Firefoxでgoogle検索に便利なプラグインと設定

プラグイン

「chromeだとGoogle Quick Scrolが便利なんだけど、同じものはない。google toolbarは便利だけど縦幅の狭いノートPCではなるべくツールバーを表示したくない」
と思って代わりに何かないか探していました。

その結果
  • searchWP
  • searchBox sync
ついでに
  • SearchPreview
searchWPでは検索語へのジャンプとハイライトができます。
検索ボックスの見た目はこんな感じです。


マーカアイコンをクリックすると検索語をハイライトし、ボックスの中の単語をクリックすると、その単語位置にジャンプします。 ハイライト表示する文字列の最小長さは設定で変えられます。
searchBox syncは検索ページの入力フォームと、firefoxの検索ボックスの内容を同期します。

SearchPreviewは検索結果の左側に、そのページのプレビュー画像を表示します。
こんな感じ。


google検索にはプレビュー機能がありますが、ブログなどがブロックされたり、警告画面を見せられる環境(会社とか)だと、そのページに対しては使えないんですよね…。そういう場合にはとてもお役立ちです。

それから

firefoxの検索ボックスからの検索結果を別タブに表示する方法

はないかなーと思ったらありました。
about:configページ(アドレスバーにabout:configと入力してエンター)の
browser.search.openintab
をtrueにします。

もう一つついでに

ショートカット

firefoxの検索ボックスにジャンプするには
ctrl + K

2011年2月5日土曜日

おすすめ 『Webを支える技術 HTTP、URI、HTML、そしてREST』

webの仕事を最近やるようになりました。何を知るべきかわからない、というところからスタートです。

えーとHTTP、HTML? とか?

という状態です。
そこから何とか担当部分を完成させることができました。
使用したのは、サーバサイドはPHP(Zend Framework)、クライアントサイドはXHTML、CSS、javascript。
各言語 について知ることも当然必要なんですが、HTTPについて知ることが私にとってはポイントでした。

『Webを支える技術 HTTP、URI、HTML、そしてREST』
アマゾンのリンク

この本がとても参考になりました。

HTTPはステートレス

これをわかっていないために最初はずいぶんもやもやしました。
それぞれの事柄についての情報は本にもWeb上にもたくさんありますが、Webに関する技術やその背景までを総合的に説明していて、開発の指針になるようなものはまだ他に見つけていません。

Web周辺の技術を包括的に知りたい、あるいは私のような「初めてのWeb」の人におすすめできると思います。

eclipseのjavaエディタの背景をdarkに!

新しい環境を使うときにはまず背景を黒くせずにはいられません。
白い背景だとどうにも目がチカチカしてしまって。輝度を下げたりしてもダメなんですよね。


eclipse(Version: 3.6.1)かーと使い始めたんですが、自分で色を一から設定するのめんどくさい。
何か、誰か…、プラクインとか…テーマとか… 、と思っていたら公開している人がいました。


Eclipse Java Color Themes
http://srand2.blogspot.com/2009/08/eclipse-color-themes.html


リンク先から設定ファイルをダウンロードできます。
次の2つのファイルを上書きすればOKです。

[workspace]\.metadata\.plugins\org.eclipse.core.runtime\.settings\org.eclipse.jdt.ui.prefs
[workspace]\.metadata\.plugins\org.eclipse.core.runtime\.settings\org.eclipse.ui.editors.prefs


6種類あるんですが、私はsulaというのにしました。下のはダウンロードファイルに入っていたサンプル画像です。


ありがたい!!

2011年2月4日金曜日

googleをdarkに!



google検索画面をdarkに!
Stylishに次のテーマをインストールします。

January 2011 - Google Dark Gray Theme (vC) Fix

あるいはこっち
IXO FIXED 09/09/10 - Google Dark Grey by Valacar
(こっちの方がアイコンの背景が白くなったりしない)

このままだと日本語サイトの設定がないのでスタイルを編集します。
Stylishアイコンクリック -> スタイルの管理で

イギリスサイトの部分をコピーして


  url(http://www.google.co.uk/),
  url-prefix(http://www.google.co.uk/webhp),
  url-prefix(http://www.google.co.uk/search?),
日本語サイトの設定を作る。
  url(http://www.google.co.jp/),
  url-prefix(http://www.google.co.jp/webhp),
  url-prefix(http://www.google.co.jp/search?),


これで画像のような画面になります。

2011年2月3日木曜日

FirefoxアドオンGmarksのサイドバー背景をdarkに!

FirefoxのアドオンGmarksを入れました。
が、そのままだとサイドバーに表示したとき背景が白い。

履歴とローカルブックマークは既にStylishで黒設定にしていたので
Gmarksも黒くしたいしたいなー。

と、Gmarksのcssを探しました。
↓こんな感じのフォルダの下にstyle.cssというファイルがあります。

C:\Documents and Settings\[user]\Application Data\Mozilla\Firefox\Profiles\[何か文字列].default\extensions\[何かID]\skin\classic

指定を加えるのは
.gmarksTree treechildren
というクラスです。

というわけで
ローカルブックマーク、履歴と合わせてStylishのサイドバー設定は次のようになりました。

#bookmarks-view, #historyTree, .gmarksTree treechildren {
background-color: #262626 !important;
color: #c0c0c0 !important;
}