とりあえず正規表現の基本は分かったんで具体的に

行き当たりばったりで今まで適当に覚えた正規表現をJavaScriptを触りながら今一度、ということで。

『split』に正規表現を使う

ヒットさせる文字列『 - 』(半角空白あり)
str = 'AAA - BBB - CCC';
arrstr = str.split(/\s\-\s/);
//arrstr[0]=AAA
//arrstr[1]=BBB
//arrstr[2]=CCC


数値を区切り文字として分割する

str = 'AAA12BBB3CCC4';
arrstr = str.split(/[0-9]/g);
//arrstr[0]=AAA
//arrstr[1]=BBB
//arrstr[2]=CCC
まあこんなことも可能的なことで。


Trim的空白削除

両端の全角/半角空白を削除する。
str = "  ABC DEF  ";
Result = str.replace(/^[\s ]+|[\s ]+$/g,'');
//Result:ABC DEF


正規表現を使用して特定の文字列を探す

例:『10. xxxxxx』のような形式の文字列から先頭にある『10. 』を探す
re = new RegExp(/^[0-9]+\.\s/);
if (str.match(re)){
    ......
} 
先頭にある文字列が対象なので『^』が必要
この場合にヒットする文字列:
『0. 』、『123456789. 』など


連続した文字列を探す
  1. re= new RegExp(/[0-9]+/);
  2. re = new RegExp(/[0-9]+/g);
str = "123abc456def";           
if (str.match(re)){
    Result = RegExp.lastMatch;
}
//1. Result:123
//2. Result:456
『1.』の場合、ヒットした時点で終わりなので、『123』が返る。
『2.』の場合、『g』があるので文字列の最後まで探す、このため最後にMatchする(lastMatchだから)『456』が返る。


文字列に含まれる連続した数字を抜き出して桁数を取得する
str = "abc123456def";
re= new RegExp(/[0-9]+/);
if (str.match(re)){
    Result = RegExp.lastMatch.length;
}
//Result :6


『(),[],~~』で囲まれた文字列を削除する
str = "abc(ABC)[DEF]~GHI~()def";
Result = str.replace(/(\(|\[|~).*(\)|\]|~)/g, "");
//Result:abcdef


特定の文字列を対象に処理を行う
ヒットさせる文字列:『 - Single,- Single, - EP,- EP』
$ を使って末尾にある場合のみヒットさせる。
下記、4パターンの文字列から該当文字列を削除
  1. str = "ABCDE - Single";
  2. str = "ABCDE- Single";
  3. str = "ABCDE - EP";
  4. str = "ABCDE- EP";
Result = str.replace(/\s?-\s(EP|Single)$/, "");
//Result:ABCDE

Webページに表示する文字列の中に『"』や『'』があるとたまにバグるので、その前に『\』を付加する。
Result = str.replace(/'/g,"\\\'");
Result = str.replace(/"/g,"\\\"");
外部から情報を取得して扱うときに起こり得ることなのでここまで十分。

etc:
『.』なんでもいい1文字
『+』最低1回以上繰り返し
『*』最低0回以上繰り返し
組み合わせて
『.+』なんでもいい文字列(1文字以上)
『.*』なんでもいい文字列(1文字もなくても良い)

Keyword Search@iTunes Store:Today's Ranking

JavaScriptだけでちょっとしたコンテンツを作成してみました。
Google Feed API(以下GF API) を使用して iTunes の Feed を取得し、ランキングされたアルバム名(曲名) or アーティスト名をキーワードにGoogle Search API(以下GS API)を使用して検索をかけるというものです。

Keyword Search@iTunes Store:Today's Ranking
http://humming.bird.2k8.googlepages.com/keyword_search.itunes_store_ranking.html

ランキングされているアーチスト名を見て「誰それ?」とか、聞いたことがない曲がランキングされているのを見て「ちょっと見てみたい」「聞いてみたい」という衝動が湧いてきたりする。
これは私だけではないはず…、ということはニーズがあるかな?と思い製作開始。とりあえず形になったのでアップました。
中身(ソース)は今後ボチボチ修正していこうと考えています。

似たようなサイトは他にあるかもしれませんが、これはPHPなどを使わずにJavaScriptだけで作られているところが注目出来る点では。(自画自賛)

Usage

ページ左側のサイドバーにあるメニューから、表示するランキングを切り替えます。

表示されているランキングの『アルバム名』『曲名』もしくは『アーティスト名』をクリックするとそれをキーワードに検索します。
上図、赤い枠で囲まれた文字列が検索するキーワードになります。


Option

  • Entry - 表示するランキングの数
  • Visible -
    • [ Title Only ] - タイトルとアーティスト名のみ表示
    • [ Full ] - 全て表示
  • Country - 国の指定(指定した国のランキングを表示)

検索結果の表示

検索結果はページ右側に表示されます。
  1. ビデオ
  2. イメージ
  3. ウェブ
  4. ニュース


▽免責事項▽
該当サイトをご利用した際に起こったいかなる損害も、制作者 Y@$ 及び humming bird はその責を負いません。ご自身の責任においてご利用ください。


更新履歴

2008/09/12:
  1. jQueryを導入。slideToggleを使用してメニューとランキングの見せ方を変えた。
  2. GF APIとGS APIのデフォルトのCSSを読み込まないように修正。
    『!important』を使用しなくとも良くなったのでIE6以下のブラウザでのページの崩れをなくした。(つもり)
  3. ランキングタイトルの検索文字列の修正。
2008/09/20:
  1. IE6に対応(したつもり)

『getElementById』を使用したときのミス

JavaScriptで『getElementById』を使用してタグを拾うつもりが何故か拾えない。

コードはこんな感じ。

document.getElementById("dhy").innerHTML = pDate.getFullYear();

『dhy』というタグを取得して、そこに日付の"年"を表示させるというものだが、何処が間違っているのか分からずしばらく悩んでいた。

以下が間違いの部分。分かりやすくするために不要な部分は出来るだけハショった。
<body>
    <script type="text/javascript">set_pdate(Date());</script>
    <div id="dhy"></div>
</body>

すぐに分かった人には「なんだ」と思わせたかも知れないが、要するに、お目当てのタグ『<div id="dhy"></div>』より前にJavaScriptのFunctionを呼び出していたため、該当のタグを取得できなかったのだ。

つまり、
<body>
    <div id="dhy"></div>
    <script type="text/javascript">set_pdate(Date());</script>
</body>

このように、取得したいタグより下(すぐ下でなくとも良いのだが)でタグを取得するJavaScriptのプログラムが実行されなければならなかったのだ。
初歩的なことかもしれないが、まともに教本など読んだことがない私には勉強になった。

追記:
『window.onload』を使用すれば簡単に解決できた。

構造体のメソッド? - C#

『構造体のメソッド』などと聞き慣れない言葉に反応してみたが、実際はクラスのメソッドと見た目にはあまり変わりない書き方で追加出来てしまった。

構造体 サンプル:

public struct Human   
{  
   public float Height;  
   public float Weight;  
  
   public Human(float x, float y)  
   {  
     this.Height = x;  
     this.Weight = y;  
   }  
  
   public float BMI()  
   {  
     return (this.Weight/(this.Height*this.Height));  
   }  
}

コンストラクタのつもりで下記のように書いたのだが、
public Human(float x, float y)
しかし、
Human human = new Human();
このように、引数を指定せずに書いてもエラーにならない。

ではこのとき、構造体『Human』のフィールド『Height』『Weight』には何が入っているのか。

『human.Height』で中身を見ると、『Height』の型であるfloatの初期値『0.0』が格納されていた。つまり自動で初期値を格納する。

構造体のプロパティも可能

以下のようにプロパティも書けてしまった。
float fheight;

public float Height
{
    get { return fheight; }
    set { fheight = value; }
}

クラスとの違いは継承できないことぐらいか(例外あり)。
そうなるとクラスと構造体の違いが… ダメだ、混乱してきた。

『BeginUpdate』を使えば『AddRange』を使用した場合と処理速度は変わらない - C#

ListBoxやComboBoxにアイテムを追加する場合、追加する値を配列で持っているなら『AddRange』を使えば1発で済むのだが、そうでない場合もある。

『AddRange』に比べ『Add』メソッドを使用すると処理に時間が掛かってしまうような気になるが、処理速度にどれ程の差があるのか、実際に調べてみた。

『Add』メソッドを使用する場合、再描画に時間が掛かること、コントロールがチラつくことを回避するために『BeginUpdate,EndUpdate』を使用するものとする。

前設定として『ListBoxに文字列(Item)を追加する処理』のみを計測するため、ListBoxに追加する文字列は予め配列に持っているものとしている。

配列の要素数は100000(10万)。

AddRangeメソッドを使用した処理

lst.Items.AddRange(sArr);


Addメソッドを使用した処理
lst.BeginUpdate();
for (int i = 0 ; i < sArr.GetLength(0) ; i++)
{
    lst.Items.Add(sArr[i]);
}
lst.EndUpdate();

上記の処理を100回繰り返し、平均値を求めた。


結果:
  • 『AddRange』を使用した場合 = 753ms
  • 『Add』を使用した場合 = 756ms

3msという差は誤差の範囲と捉えられるだろう。

この結果から『BeginUpdate,EndUpdate』を使用すれば『AddRange』と『Add』は処理速度に差はない

『AddRange』の優位性は可読性のみか。

Sony Style(ソニースタイル)
デル株式会社

Recent Posts