2017年04月01日

WebStorm はじめました

最近 AngularJS やら NodeJS やらとなにかと JavaScript を触る機会が多いのですが、なかなか使い勝手のよいエディタがなく難儀していたところ、WebStorm がかなり使えるということなので早速使ってみることにしました。

NodeJS、Angular-cli、WebStorm をインストールして、さっそく新規プロジェクト作成を行ったところ、しょっぱなから怪しい雰囲気が・・・

参考書にはパスを指定しろとは書いてないのに、Angular-cli のパスが設定されていませんでした。
長い経験から参考書と違う動きをしている時はうまくいかないことが多いので心配です。

とりあえず Angular-cli のパスを設定してそのまま「Create」を実行しました。

新規のプロジェクトは作成されましたがなんか様子が変です???
どうやらプロジェクトが空っぽなようです。

よく見てみるとコンソールに「Directory '.' already exixts.」と表示されていました。
ん〜…
コンソールの内容から察するに、
@.WebStorm がプロジェクトフォルダを作成
A.WebStorm がプロジェクト構成情報を作成したフォルダに格納
B.カレントパスをプロジェクトフォルダに移動
C.Angular-cli の new コマンドでプロジェクトを作成
 ⇒ここで怒られている!

実は原因の察しはついています。参考書には Angular-cli の 1.0.0-beta.17 をインストールしろと指示されていたのに、1.0.0-beta-28.3 を入れてしまっているからです。
どうせやるなら最新版でやりたいので、NodeJS も Angular-cli も最新版にしてしまいました。

だからと言って、古いバージョンに戻すのも嫌なので、ちょっとやり方を工夫してみました。

まず始めに、WebStorm で作成されたプロジェクトをリネームします。


コマンドプロンプトを表示して new コマンドでプロジェクトを作成します。
元のプロジェクトフォルダはリネームしてあるので、これでエラーは発生しないはずです。


プロジェクトが作成されたら、WebStorm のプロジェクトの構成情報を移動して完了です。


WebStorm を起動するときちんとプロジェクトが読込まれました。


ng serve で起動して


無事表示できました。


Angular-cli は絶賛開発中なので、こんな不具合が発生してしまうんだろうと思います。
そのうち WebStorm もアップデートされると思いますが、WebStorm を使ってバリバリ開発しようと思っていたのに、出鼻をくじかれてしまう形になりました。
posted by j.shiozaki at 12:44| Comment(0) | TrackBack(0) | プログラミング

2011年11月06日

Java Script Super Library 始動!

すらすらプログラマーの New コンテンツ「Java Script Super Library」が本日始動しました。
略して「JSSL」別名を「Jun Shiozaki Script Library」です。
第1弾として今準備しているのが下のスライドショーです。すでにすらすらプログラマーで使用しているものですが、汎用的に使えるようにカスタマイズして公開する予定です。



とりあえず第3弾まで考えています。
第1弾:
 スライドショー
第2弾:
 メニューバー
第3弾:
 入力オブジェクト
  ・入力できるコンボボックス
  ・入力チェックを行うテキストボックス
  ・HTML編集が入力できるテキストボックス

これからコツコツと仕上げていきますので JSSL をよろしくお願いします。
posted by j.shiozaki at 16:48| Comment(0) | TrackBack(0) | プログラミング

2011年10月02日

CopeyHereでファイルのコピーをキャンセル

前回 JavaScriptでZIP圧縮のキャンセルする方法をない知恵を絞って考えたと書きましたが、もう一つファイルコピーのキャンセルを検出する方法も考えました。ファイルをコピーする場合はCopyHereは同期で動作するので、コピーが終わったあとに単純にファイル数、フォルダ数を比較してキャンセルを判断しています。もしお困りの方がいたら参考にしてください。


    // 指定されたパスをコピーします。

    
function copyPath(toFolder, items) {

        
var Fso = new ActiveXObject("Scripting.FileSystemObject");



        
// コピー先のフォルダを作成します。

        Fso.CreateFolder(toFolder);



        
// ファイルをコピーします。

        
var sa = new ActiveXObject("Shell.Application");

        
var ns = sa.NameSpace(toFolder);



        
var fileCount = 0;

        
var folderCount = 0;

        
for (var i = 0; i < items.length; i++) {

            
// ファイルコピー

            ns.CopyHere(items[i]);



            
// キャンセルのチェック

            
var f = getFileCount(items[i]);

            
var t = getFileCount(toFolder);

            fileCount += f.fileCount;

            folderCount += f.folderCount;



            WScript.Echo(
"コピー元 ファイル数:" + f.fileCount + " フォルダ数:" + f.folderCount);

            WScript.Echo(
"コピー先 ファイル数:" + t.fileCount + " フォルダ数:" + t.folderCount);

            WScript.Echo(
"合計     ファイル数:" + fileCount + " フォルダ数:" + folderCount);

            
if (t.fileCount != fileCount || (t.folderCount - 1) != folderCount) {

                
// ファイル数又はフォルダ数が一致しないのでキャンセルと判断する。

                WScript.Echo(
"コピーキャンセル!");

                Fso.DeleteFolder(toFolder);

                
return false;

            }

        }



        
return true;

    }



    
// ファイル数とフォルダ数を数えます。

    
function getFileCount(path) {

        
var file = 0;

        
var folder = 0;



        
var Fso = new ActiveXObject("Scripting.FileSystemObject");



        
// フォルダ内をカウントする。

        
var countFolder = function (fld) {

            
// フォルダをカウント

            
var e1 = new Enumerator(fld.SubFolders);

            
for (; !e1.atEnd(); e1.moveNext()) {

                folder++;

                countFolder(e1.item());

            }



            
// ファイルをカウント

            
var e2 = new Enumerator(fld.files);

            
for (; !e2.atEnd(); e2.moveNext()) {

                file++;

            }

        }



        
if (Fso.FileExists(path)) {

            file++;

        } 
else {

            folder++;

            countFolder(Fso.GetFolder(path));

        }



        
return {

            fileCount:file,

            folderCount:folder

        }

    }


posted by j.shiozaki at 16:22| Comment(2) | TrackBack(0) | プログラミング

JavaScriptでZIP 圧縮

JavaScriptでZIP圧縮する方法をネットで検索すると空のZIPファイルにCopyHereで追加する方法をよく見かけます。CopyHereを使うと進捗ダイアログが表示されるので見た目がいいのですが、非同期で動作するのでコピーされたアイテム数の変化をループ処理で監視する必要があります。
しかし、進捗ダイアログには「キャンセル」ボタンがあり、コピー中にクリックされるとアイテム数が増えずに無限ループ状態になってしまいます。

このZIP圧縮方法はとてもシンプルで使いやすいのでこの問題をなんとかしたいと思い。ない知恵を絞って以下のような方法を考えてみました。
このZIP圧縮方法はテンプファイルを使わないので圧縮の途中であっても事前に作ってあるZIPファイルのサイズが変化します。この特性を利用してファイルサイズをチェックしてサイズが変化しなかった場合はキャンセル扱いにします。
ただし、圧縮処理はすぐには立ち上がらないのでファイルサイズをチェックするのは3秒間隔にしてあります。大きなファイルを圧縮する場合には3秒でも足りない可能性がありますが、そこは使用状況に合わせてチューニングしてください。
この方法だと無限ループする可能性はなくなるので安心して使えると思います。


   var CTL_PermissionDenied = -2146828218;



    
function zipComp(zipFile, items) {

        
var Fso = new ActiveXObject("Scripting.FileSystemObject");



        
// 空の zip ファイルを作成します。

        
var w = Fso.OpenTextFile(zipFile, 2, true);

        w.Write(
"PK\5\6\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0\0");

        w.Close();



        
// 圧縮データを書き込みます。

        
var sa = new ActiveXObject("Shell.Application");

        
var ns = sa.NameSpace(zipFile);

        
var cnt = ns.Items().Count;

        
var fl = Fso.GetFile(zipFile);



        
var cnt = 0;

        
for (var i = 0; i < items.length; i++) {

            
var sz = fl.Size;

            
var c = 0;



            WScript.Echo(
"item:" + items[i]);

            WScript.Echo(
"圧縮開始:" + sz);



            ns.CopyHere(items[i]);

            cnt = cnt + 1;



            
// 追加されるまで待つ。

            
while (ns.Items().Count < cnt) {

                
// キャンセルの検出を行う。

                
if (c++ >= 30) {

                    WScript.Echo(
"現在のサイズ:" + fl.Size);

                    
if (sz >= fl.Size) {

                        
var cancel = false;

                        
// サイズが変わっていないのでキャンセルされたかチェックする。

                        
try {

                            Fso.DeleteFile(zipFile);

                            WScript.Echo(
"圧縮キャンセル");

                            
return false;

                        } 
catch (e) {

                            
if (e.number != CTL_PermissionDenied) {

                                
throw e;

                            }

                        }

                    }

                    c = 0;

                }

                WScript.Sleep(100);

            }

        }



        WScript.Echo(
"ZIP 圧縮完了!");

        
return true;

    }


posted by j.shiozaki at 13:02| Comment(0) | TrackBack(0) | プログラミング

2011年09月25日

Word でボタンをお絵かき

本日「Word でお絵かき」 にボタンの作り方のページを追加しました。
これが作り方を紹介しているボタン達です。

まだ下2つのボタンはまだ微調整が必要なのでホームページにはアップしていませんが、ちゃんといろんな色やサイズのボタンが作れるように工夫してあります。

一から作るのがめんどくさい方は、サンプルファイルもダウンロードできるので、色やサイズを変えて自由にお使いください。

自分のホームページもそのうちこのボタンを使ってカッコよくしたいと思います。


posted by j.shiozaki at 16:13| Comment(0) | TrackBack(0) | プログラミング

2011年09月11日

Word でお絵かき3

プログラミングに役立つ 「Word でお絵かき」 について、近々アップする内容をちょっと紹介します。プログラミングをする時にOS標準のボタンじゃ新鮮味がなくてつまらないな〜と感じることがあります。そんな時はネットからフリーの素材をダウンロードすればいいじゃん!ってよく人に言われます。周りの人からは一見その辺にゴロゴロしていそうに思われているボタンの素材ですが、実際にはサイズが合わなかったり色がイマイチだったりとなかないいものをさがすには苦労します。
それならば、自分で気に入ったボタンをつくってしまえということで、次の 「Word でお絵かき」 ではボタンの作り方を紹介する予定です。
下が Word で作った「閉じる」ボタンです。



でも、誰でも簡単に作れなくては意味がないので、その辺を踏まえていろいろ自分なりに考えてみました。綺麗なボタンを描くにはバランスが肝心で、最近はテカっているボタンが主流なのでそのテカリのバランスを一定の法則で算出してそれに沿って曲線を引くだけでカッコイイボタンが作れるようにしました。
下がボタンを作成しているところの Word の画面です。カンのいい人ならこれだけで描けてしまうかも知れませんね。



一定の規則性をもってボタンを描いていけばいいわけなので、これをプログラムにするのは簡単で J.S Draw と組み合わせればボタン作成ツールもできそうです。
ボタンも1種類だけではなくて、もっとたくさん作り方を研究して紹介していこうと思っていますのでご期待ください。
posted by j.shiozaki at 19:04| Comment(0) | TrackBack(0) | プログラミング

2011年07月10日

アンドロイドはじめました。

スマートフォンは持っていないけど、アンドロイドアプリには興味があるので google からSDKをダウンロードしてエミュレーターを動かしてみました。
google のサイトアクセスすると zip 以外に exe(インストーラー)があったので、インストーラーがあるなら楽勝じゃんわーい(嬉しい顔) と思ってインストーラーをダウンロードしてインストールしました。
しかし、自分の思惑とは裏腹にエミュレーターが動くまで四苦八苦しましたので、同じ過ちを二度と繰り返さないようにメモしておきます。

@Java SDK
windows 7 の 64bit 版を使っているので Java SDK も 64bit 版をインストールしていたが、64 bit 版ではエミュレーターが動作しないので 32bit 版を使用する。

Bインストールフォルダ
インストーラのデフォルトフォルダが [C:\Program Files\Android]なのにこのままインストールするとエミュレータが動作しないので[C:\Android]等の途中に空白が入らないパスにインストールする。これにはかなりむかつく!ちっ(怒った顔)

B環境変数
インストーラーで環境変数の設定までは行ってくれないので次の2つのパスを通しておく
・C:\Android\android-sdk\tools;
・C:\Android\android-sdk\platforms;
※ついでに Java のパスも通しておく
・C:\Program Files (x86)\Java\jdk1.6.0_26\bin




四苦八苦したといっても半日ぐらいしかかかっていないけど、結局インストーラーを使っても環境変数等のめんどくさい設定はやらないといけないということみたいです。今後開発環境の構築も含めてホームページにアップしようと思いっています。
すでに同様のサイトは腐るほどネット上にあるけど、すらすら流の切り口で有用な情報を提供して行きたいと思っています。
posted by j.shiozaki at 09:34| Comment(0) | TrackBack(0) | プログラミング

2010年12月18日

RenderTargetBitmap

最近 WPF の描画速度についていろいろ調べているのでちょっとまとめてみました。

100 × 100 の四角形を 250,000 個 描画するのにかかった時間です。

WPF Shape42秒
WPF Drawing37秒
WPF RenderTargetBitmap25秒

上の2つはベクターグラフィックですが、一番下の RenderTargetBitmap はビットマップを使ったラスタグラフィック(たぶんふらふら)です。
GDI で描画した場合が 10秒なのでまだまだなのですが、だいぶ高速に描画できるようになりました。
GDI 並に高速描画できるようになったら WPF版の J.S Draw を作ろうと思います。

今まで調査した WPF の情報はこちらから。
GDI vs WPF @
GDI vs WPF A
GDI vs WPF B
posted by j.shiozaki at 21:32| Comment(0) | TrackBack(0) | プログラミング

2010年12月11日

Visual Studio 2010 SP1

以前から Visual Stuido 2010 のあるバグが気になっていて非常に使いにくい思いをしておりましたが、どうやら SP1 で対策がなされることになったようです。

Microsoft(R) Connect: ソースコードをPowerPoint2010にコピー&ペーストすると文字化けを起こします。

自分もソースコードをホームページに掲載する際に日本語が文字化けしてわざわざ Visual Studio 2008 で開いてからコピペしていました。
そしてようやく Microsoft Visual Studio 2010 Service Pack 1 Beta が 12/3 から公開されたのでインストールしてみました。



インストール前はこのように文字化けしていました。



SP1 Beta をインストールすることで無事解消されました。



これでだいぶ楽になります。
posted by j.shiozaki at 20:44| Comment(0) | TrackBack(0) | プログラミング

2010年12月05日

WPF は速い?

.NET Framework 3.0 から新しいユーザーインターフェイスのデザイナとして WPF が実装されていますが、いまだにお遊び程度にしか使用したことがありません。
しかし、時代の流れとしては WPF の方向へ向かっていますので無視するわけにもいけません。そこで WPF について理解を深めるために少しずつですが調査してみることにしました。

まず調べてみたのは描画性能です。今まで GDI で描画していた処理を WPF に置き換えてどれぐらい高速になったかを調べてみました。
WPF では描画処理を GPU に任せているそうなのでかなりの高速化が期待できます。

テスト用に For 文で四角形を 25,000個を連続で描画するプログラムを作って描画し終わるまでの時間を計測してみました。

【GDI】
・FillRectangle と DrawRectangle で描画

【WPF】
・Windows.Shapes.Rectalge オブジェクトを追加

GDI 側の処理はダブルバッファを用いて高速に処理します。一方 WPF はキャンパスに Rectangle オブジェクトを追加していきます。
さっそくプログラムを作って時間を計測してみたところ以外な結果になりました。

GDIで描画 ⇒ 10秒
WPFで描画 ⇒ 42秒

WPF の方が早いと思われていたのですが、結果は GDI の圧勝で少なくとも単純図形の 2D 描画でWPF効果はあまりないみたいです。

ただし、今回作成したプログラムは GDI でダブルバッファを使用しているのでその効果も大きいかもしれません。

この GDI と WPF の処理性能比較については 「やってみよう! GDI vs WPF 」のページで詳しく紹介しています。
posted by j.shiozaki at 16:46| Comment(1) | TrackBack(0) | プログラミング

2010年09月12日

サンプルプログラム作成

本日 ライアルパターンのサンプルプログラムを作りました。
下は概要図です。


理想的な MVC モデルを作成するためにラジアルパターンをぜひ使ってみてください。
posted by j.shiozaki at 17:44| Comment(1) | TrackBack(0) | プログラミング

2010年09月11日

名前変更⇒ラジアルパターン

昨日書いたデザインパターンですが、名前がいまいちだったので「ラジアルパターン」に改名します。
中央に Hub があり、放射状に展開されるイメージから名づけました。これを使えばMVCモデルも簡単に構築できるようになるのでは?と思っています。
近いうちにホームページでサンプルを作って紹介したいなと思っています。


posted by j.shiozaki at 23:52| Comment(0) | TrackBack(0) | プログラミング

2010年09月10日

ターミナルパターン

ここ1カ月ぐらいブログの更新をさぼっていましたが、裏では J.S Draw の開発を着々と進めておりました。
仮想化の進めが一区切りついたので J.S Draw の開発を再開することにしたのですが、まず最初に以前から気になっていたメタボ対策を行うことにしました。
J.S Draw の開発を始めてかれこれ2年ぐらい経つのですが、その間にソースコードがふくれ上がってしまいメインのコントロールクラスがちょっとメタボ気味になってきました。

メタボの原因はコントロールクラスに機能が集中しているためで、それらはとても密接に連携を取っているためにバラバラにできませんでした。


そこで、オブジェクト間の連携を保ちながら機能をコントロールから分離する方法を考えて出た結論がこれです。
名前を「ターミナルパターン」となずけました。それぞれのオブジェクトからターミナルを経由して他のオブジェクトへアクセスすることができます。


さらにストラテジーの要素を加えてオブジェクトを切り替えることでいろいろなデバイスに対応させることが可能です。


さらにさらに、データオブジェクトを多重化することでデータの切り替えも可能になります。


このパターンは発想次第でまだまだ拡張できます。
いまはJ.S Draw をバラバラにしてこのパターンで再構築を行っています。再構築が完了した時はきっと素晴らしいプログラムになっていることを願っています。
posted by j.shiozaki at 23:51| Comment(0) | TrackBack(0) | プログラミング

2010年04月07日

List は 配列?

本日、会社で List クラスはリスト構造でなく、配列ではないか?という話題で盛り上がりました。List クラスは便利なので私も良く使っていますが、Insert メソッドとか Delete メソッドがあるので私はリスト構造だろうと思いこんでいましたが、I君にキャパシティプロパティで初期サイズを定義できるのだから配列じゃないですか?指摘されてハッとしました。
このままだと今夜は眠れそうのないので検証してみました。

検証方法は次の通りです。
List クラスのインスタンスを作成して、Addと、Insert メソッドで処理時間を計測する。
もし配列ならば、Insert する時に配列全体をシフトしないといけないので単純に後ろに追加する Add よりはるかに時間がかかる。
リスト構造であれば、ポインタを付け替えるだけなので、Add も Insert もそんなに時間は変わらない。

ということで、次のようなコードを書きました



        private const int LOOP_CNT = 5000;

        
/// <summary>
        /// リストに Add
        /// </summary>
        private void button1_Click(object sender, EventArgs e)
        {
            
DateTime t = DateTime.Now;

            
for (int i = 0; i < LOOP_CNT; i++)
            {
                
List<int> list = new List<int>(LOOP_CNT);
                
for (int j = 0; j < LOOP_CNT; j++)
                {
                    list.Add(j);
                }
            }

            
TimeSpan span = DateTime.Now - t;

            
Console.WriteLine(string.Format("List.Add time {0}.{1:000}", span.Seconds, span.Milliseconds));
        }

        
/// <summary>
        /// リストの先頭に Insert
        /// </summary>
        private void button2_Click(object sender, EventArgs e)
        {
            
DateTime t = DateTime.Now;

            
for (int i = 0; i < LOOP_CNT; i++)
            {
                
List<int> list = new List<int>(LOOP_CNT);
                
for (int j = 0; j < LOOP_CNT; j++)
                {
                    list.Insert(0, j);
                }
            }

            
TimeSpan span = DateTime.Now - t;

            
Console.WriteLine(string.Format("List.Insert1 time {0}.{1:000}", span.Seconds, span.Milliseconds));
        }

        
/// <summary>
        /// リストの最後に Insert
        /// </summary>
        private void button3_Click(object sender, EventArgs e)
        {
            
DateTime t = DateTime.Now;

            
for (int i = 0; i < LOOP_CNT; i++)
            {
                
List<int> list = new List<int>(LOOP_CNT);
                
for (int j = 0; j < LOOP_CNT; j++)
                {
                    list.Insert(j, j);
                }
            }

            
TimeSpan span = DateTime.Now - t;

            
Console.WriteLine(string.Format("List.Insert2 time {0}.{1:000}", span.Seconds, span.Milliseconds));
        }




気になる結果はこのようになりました。


List.Add time 0.158
List.Add time 0.157
List.Add time 0.156
List.Add time 0.156
List.Add time 0.156

List.Insert1 time 13.069
List.Insert1 time 12.749
List.Insert1 time 12.698
List.Insert1 time 13.655
List.Insert1 time 12.699

List.Insert2 time 0.186
List.Insert2 time 0.182
List.Insert2 time 0.181
List.Insert2 time 0.182
List.Insert2 time 0.182


結論、List は配列です。Insert の乱用はやめましょう。もうやだ〜(悲しい顔)
変な思い込みは失敗の元、今回の件はいい教訓になりました。これからは疑問に思った事は積極的に検証してみることにします。

最後におまけで List を new する時に Capacity の指定をしない状態でも計測していました。


List.Add time 0.190
List.Add time 0.190
List.Add time 0.190
List.Add time 0.189
List.Add time 0.189

List.Insert1 time 13.490
List.Insert1 time 12.759
List.Insert1 time 12.846
List.Insert1 time 12.956
List.Insert1 time 12.779

List.Insert2 time 0.213
List.Insert2 time 0.214
List.Insert2 time 0.214
List.Insert2 time 0.218
List.Insert2 time 0.213


Capacty の指定なしだと 10% ぐらい遅くなるみたいです。
posted by j.shiozaki at 23:51| Comment(0) | TrackBack(0) | プログラミング

プチツールシリーズ

Merge HTML ををリリースしたばかりですが、以前から「すらすら.NET」を作成する際に使っていたリッチテキスト⇒HTML変換ツールをプチツールシリーズとしてリリースすることにしました。



このツールは Visual Studio のソースコードをホームページに掲載する時に重宝します。Visual Studio では文字列や、クラス名やコメントなど、あちこちフォントの色を変えて見やすくなっていますが、これを同じように HTML 化するのは大変な作業です。
そこで、Visual Studio のエディタが リッチテキストである事を利用して、ソースコードをコピペして HTML 化します。プチツールなので機能が限定てきですがどこかで約に立てればうれしいです。

次に、現在作成中の Merge HTML の解説ページの1イメージをアップしました。



Merge HTML の概念を図にしたものです。たくさんの人に Merge HTML を使ってもらえるように解説ページもしっかり作成する予定です。
posted by j.shiozaki at 00:09| Comment(0) | TrackBack(0) | プログラミング