TypeScriptでファイル検索 ディレクトリ検索

TypeScriptでファイル、ディレクトリ検索を行うプログラムの備忘録。
Node.jsで検索すれば有益な情報は見つけられますし書き方ほぼ同一ですが、
TypeScriptで逆引き検索している方など、お役に立てれば幸いです。

概要

対象のディレクトリを指定し、サブディレクトリ含めて指定した拡張子のファイルを一覧として出力する。

ファイル検索、ディレクトリ検索に必要なモジュールをインストール
npm install --save @types/node
サンプルコード
import * as fs from "fs";
import * as path from "path";

// 検索したいディレクトリ
var seekBaseDir = "C:\\Users\\YFurugen\\Documents";
// 対象ファイルの拡張子
var extFilter = "sln";

function extension(element: string) {
    var extName = path.extname(element);
    return extName === '.' + extFilter;
};

function seekDir(dirpath: string) {
    fs.readdir(dirpath, function (err, list) {
        if (list !== undefined) {
            list.filter(extension).forEach(function (value) {
                console.log(dirpath + "\\" + value);
            });
            list.forEach(function (value) {
                let nextDir: string = dirpath + "\\" + value;
                if (fs.statSync(nextDir).isDirectory()) {
                    seekDir(nextDir);
                }
            });
        }
    });
}
// 検索開始
seekDir(seekBaseDir);

結果
C:\Users\YFurugen\Documents\wpf\based\XamDataGrid\Simple\Sample.sln
C:\Users\YFurugen\Documents\wpf\based\XamGrid\Simple\Sample\Sample.sln
C:\Users\YFurugen\Documents\xamarin\BlueMonkey\client\BlueMonkey\BlueMonkey.sln
C:\Users\YFurugen\Documents\xamarin\BlueMonkey\server\csharp\BlueMonkey.MobileApp\BlueMonkey.MobileApp.sln

TypeScript SQLServerにWindows認証でログイン

環境かバージョンの影響か、サンプル通りで動かなかったので備忘録。

サンプルコード
import * as mssql from "mssql";
var config = "Uid=ドメイン\\ユーザ名;Pwd=pass;Server=SmplMSDB;Database=smpl;Trusted_Connection=Yes";
const pool = new mssql.ConnectionPool(config);
pool.connect(err => {
    console.log(err);

    return pool.request()
    .input("id", mssql.VarChar, "1")
    .query("select * from tickets where id= '@ticket_number'")
    .then(result => {
        console.dir(result);
    });
});

Bindingの各プロパティ(UpdateSourceTrigger,Delay,NotifyOnSourceUpdated)の動作について

Binding

普段はそこまで弄らないプロパティをメインに備忘録

BindingGroupName

バインディングをグループで指定する際に利用します。
BindingGroupNameを指定することで一括で複数コントロールのバインディングなどを操作できる。

BindsDirectlyToSource

Path を評価するときに、データ項目を基準にするか、DataSourceProvider オブジェクトを基準にするかを示す値を取得または設定します。

UpdateSourceTrigger

バインディングのタイミングを操作できます。

  • LostFocus 

 ロストフォーカス時に動作

  • PropertyChanged

 プロパティ変更時に動作。

  • Explicit 

 マニュアル、更新タイミングはBindingExpression.UpdateSourceにて実行するなどタイミングを完全に制御したい場合に利用。

各更新タイミングの動作イメージ
f:id:furugen098:20180203040842g:plain

Delay

ソースを更新するまえにミリ秒単位で待機します。
.xaml

<TextBox  Text="{Binding Text, ElementName=txtInput, UpdateSourceTrigger=PropertyChanged, Delay=1000}"/>

f:id:furugen098:20180203035745g:plain

NotifyOnSourceUpdated

有効にするとソース更新時のイベント(NotifyOnSourceUpdated)が有効になります。
あまり利用することはないと思いますが、私はデバッグ目的での一時的にONにして監視に利用したりします。
.xaml

<TextBox  x:Name="txtNotifySouce"  Text="{Binding Text, ElementName=txtInput, NotifyOnSourceUpdated=True}"
   Binding.SourceUpdated="SourceUpdatedHandler"  />

.cs

private void SourceUpdatedHandler(object sender, DataTransferEventArgs args)
{
   UpdatedLog("SourceUpdatedHandler", args);
}
NotifyOnTargetUpdated

こちらはソースのターゲット更新時のプロパティです。
.xaml

                        <TextBox x:Name="txtNotifyTarget" Text="{Binding Text, ElementName=txtInput, NotifyOnTargetUpdated=True}"
                                  Binding.TargetUpdated="TargetUpdatedHandler"/>

.cs

private void TargetUpdatedHandler(object sender, DataTransferEventArgs args)
{
   UpdatedLog("TargetUpdatedHandler", args);
}

NotifyOnSourceUpdated および NotifyOnTargetUpdatedはDataTransferEventArgsが取得できるので、
細かいプロパティまで参照可能です。下記、プロパティ名とコントロールの内容を出力してます。
f:id:furugen098:20180203040234g:plain

IsAsync

Bindingを行う際の非同期の有効無効を制御できます。
ユーザビリティの改善や一部のコントロールの動作が遅い遅い場合に有効ですね。
画像+非同期の対応のついては下記のページが参考になります。
Async Data Binding & Data Virtualization - CodeProject


サンプル用に作ったソースをコミットしてます。
GitHub - furugen/StudyBinding

Xamarin.Formsでタップ座標を相対的に取得する。

無料で使えるライブラリ等が見当たらなかったので色々探しました。
結果的にライブラリを見つけれずXamarinのサンプルを流用することで実現しました。
絶対位置でのタップ座標ではありませんが代用する形で実現しています。同じように困っている方の参考になれば幸いです。

ちなみに私が実現した機能は下記の図のようにタップしながらアイテムを選択可能なドーナツメニューのようなものでした。
f:id:furugen098:20180105011637g:plain


下記サンプルからポイントを抜粋して記載します。

Xamarinのサンプルコード
Touch-Tracking Effect Demos - Xamarin

準備

.Forms

下記のクラスを.Formsプロジェクトにコピーします。
適当にフォルダを切ってまとめて配置するのが楽ですね。
TouchActionEventArgs / TouchActionEventHandler / TouchActionEventHandler / TouchEffect / WhiteKey
f:id:furugen098:20180131235534p:plain

iOS/Android

iOS/Androidのプロジェクトには下記赤枠のクラスを配置します。
iOSはTouchEffect.cs 及び TouchRecognizer
Androidは TouchEffect.cs ですね。
f:id:furugen098:20180131234954p:plain

利用方法(.Forms)

.xaml

<Grid Grid.Row="1" BackgroundColor="White">
   <Grid.Effects>
          <tt:TouchEffect Capture="True"
                      TouchAction="OnTouchEffectAction" />
     </Grid.Effects>
</Grid>

.cs

       void OnTouchEffectAction(object sender, TouchActionEventArgs args)
        {
            // X座標
            args.Location.X;
            // Y座標
            args.Location.Y;

            switch (args.Type)
            {
                case TouchActionType.Pressed:
                   // タップを開始した瞬間
                   break;

                case TouchActionType.Moved:
                   //タップ中
                   break;

                case TouchActionType.Released:
                    // タップが離れたとき
                    break;
            }
       }

私のドーナツメニューに関してはPressedでタッチの基礎座標を取得し、
Movedで相対座標を割り出しメニューのアクティブな座標からアニメーションを起こしています。

最後に

今回はXamarinの公式サンプルの紹介となりましたが、
私のアプリでつかっているドーナツメニューについては汎用的に使えるように改修したのちGitHubに公開します。Nugetでも公開しようかと思うので、よければご利用いただけると嬉しいです。

Reference Sorceを読む。 ItemsControl - 1Page 

Panelを読む解くうえで確認が必要なコントロールの1つである ItemsControl を読んでいきます。

    /// <summary>
    ///     The base class for all controls that have multiple children.
    /// </summary>
    /// <remarks>
    ///     ItemsControl adds Items, ItemTemplate, and Part features to a Control.
    /// </remarks>
    // 
    [DefaultEvent("OnItemsChanged"), DefaultProperty("Items")]
    [ContentProperty("Items")]
    [StyleTypedProperty(Property = "ItemContainerStyle", StyleTargetType = typeof(FrameworkElement))]
    [Localizability(LocalizationCategory.None, Readability = Readability.Unreadable)] // cannot be read & localized as string
    public class ItemsControl : Control, IAddChild, IGeneratorHost, IContainItemStorage

デフォルトイベント、デフォルトのプロパティを設定しています。 ItemsControlだと見覚えはある方も多いと思います。 ContentPropertyもItemsですね。 スタイルのプロパティはItemContainerStyleを設定しています。

次にコンストラクタ

        public ItemsControl() : base()
        {
            ShouldCoerceCacheSizeField.SetValue(this, true);
            this.CoerceValue(VirtualizingPanel.CacheLengthUnitProperty);
        }
 
        static ItemsControl()
        {
            // 
            DefaultStyleKeyProperty.OverrideMetadata(typeof(ItemsControl), new FrameworkPropertyMetadata(typeof(ItemsControl)));
            _dType = DependencyObjectType.FromSystemTypeInternal(typeof(ItemsControl));
            EventManager.RegisterClassHandler(typeof(ItemsControl), Keyboard.GotKeyboardFocusEvent, new KeyboardFocusChangedEventHandler(OnGotFocus));
            VirtualizingStackPanel.ScrollUnitProperty.OverrideMetadata(typeof(ItemsControl), new FrameworkPropertyMetadata(new PropertyChangedCallback(OnScrollingModeChanged), new CoerceValueCallback(CoerceScrollingMode)));
            VirtualizingPanel.CacheLengthProperty.OverrideMetadata(typeof(ItemsControl), new FrameworkPropertyMetadata(new PropertyChangedCallback(OnCacheSizeChanged)));
            VirtualizingPanel.CacheLengthUnitProperty.OverrideMetadata(typeof(ItemsControl), new FrameworkPropertyMetadata(new PropertyChangedCallback(OnCacheSizeChanged), new CoerceValueCallback(CoerceVirtualizationCacheLengthUnit)));
        }

キャッシュや仮想化の文字が目立ちますね。 他には基本的なフォーカス取得時のイベントなどを登録しています。 仮想化周りは面白いですが概要でも要素としてあがっている ” Items”プパティから処理を追っていきます。

       private ItemCollection _items;  

        /// <summary>
        ///     Items is the collection of data that is used to generate the content
        ///     of this control.
        /// </summary>
        [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
        [Bindable(true), CustomCategory("Content")]
        public ItemCollection Items
        {
            get
            {
                if (_items == null)
                {
                    CreateItemCollectionAndGenerator();
                }
 
                return _items;
            }
        }

        private void CreateItemCollectionAndGenerator()
        {
            _items = new ItemCollection(this);
 
            // ItemInfos must get adjusted before the generator's change handler is called,
            // so that any new ItemInfos arising from the generator don't get adjusted by mistake
            // (see Win8 690623).
            ((INotifyCollectionChanged)_items).CollectionChanged += new NotifyCollectionChangedEventHandler(OnItemCollectionChanged1);
 
            // the generator must attach its collection change handler before
            // the control itself, so that the generator is up-to-date by the
            // time the control tries to use it (bug 892806 et al.)
            _itemContainerGenerator = new ItemContainerGenerator(this);
 
            _itemContainerGenerator.ChangeAlternationCount();
 
            ((INotifyCollectionChanged)_items).CollectionChanged += new NotifyCollectionChangedEventHandler(OnItemCollectionChanged2);
 
            if (IsInitPending)
            {
                _items.BeginInit();
            }
            else if (IsInitialized)
            {
                _items.BeginInit();
                _items.EndInit();
            }
 
            ((INotifyCollectionChanged)_groupStyle).CollectionChanged += new NotifyCollectionChangedEventHandler(OnGroupStyleChanged);
        }

"TypeScript ビギナー&ステップアップ" に参加してきました!

1/27(土)にPlus Programming .net 主催のTypeScript ビギナー&ステップアップ : ATND に参加してきました! そのイベントレポートになります。

TypeScriptの概要・書籍がカバーする範囲・ステップアップ

アバナード株式会社 マネージャー 古賀 慎一さんのセッションとなります。

内容

  1. TypeScript とは  JavaScriptの弱点を補ってとても使いやすくなる言語
    TypeScriptはビルドするとJavaScriptになる言語

    • 他の言語にコンパイルして動くという特徴的な点がある。
    • Microsoftいよって開発された言語(文法はC#に近い)
    • 2017/4にGoogleの社内標準言語に追加された。
       登場の経緯は?
        * JavaScript(だけ)で本格的な開発は難しい。
        * JavaScriptはプログラム言語のひとつだが、最も扱いやすい言語とは言い難い部分もある。
       型の宣言  ・変数の型を明確に宣言しないため、「問題」が実行してみないと分からない場合がある。
        →複数人の開発だとこの問題が大きくなる。
       ・TypeScriptを使うとビルドエラーとなるためすぐに気付くことができる。
        「問題」が実行しなくてもわかる。
        JavaScriptでも自分が「気をつければいい?」
         TypeScriptにJavaScriptでもかけるが自分で気をつけないといけない。
         ・ 気をつけるのにがコストがかかる(その間に「価値」は増えていない)
         ・ 気をつけるのはTypeScriptにやらあせて、もっと価値を生み出すことに時間をかけた方が良い。
        ・JavaScriptはバージョンによる違いが大きい、TypeScriptではJavaScriptに対するバージョンは意識せず常に最新の(楽な)書き方ができる。
         ES2015以降だとそのまま、ES2015以前を指定すると補完されたコードで自動生成されるなど。
       TypeScriptではコードをもっと楽な書き方ができる。
        ・強力な型推論もある。
        ・非同期処理Promiseをasync/awaitでシンプルに扱える。
       TypeScritとは(まとめ)
        ・ビルドするとJavaScriptになる言語
        ・変数の型を明確に扱うのでビルドエラーで問題を発見・修正できる。
  2. どうやってTypeScriptを始めれば良いか?
     必要なもの
      ・コードをビルドできる環境
         VisualStudio2017 や VisualStudioCode など
      ・ビルドしたJavaScriptを実行環境へ配置する方法の習得。
      ・実装、デバッグ、実行環境へ配置するまでの開発プロセスの理解
      ・TypeScritp言語使用の習得。
       コードの書き方
       オブジェクト指向プログラミング/ジェネリック/非同期処理/エラー処理
      ・TypeScriptの採用について
       クラスを本格的に使うかどうか?検討する。
       オブジェクト思考、高度なデータ型が必要かどうか?

TypeScript + Angular Web開発

インフラジスティックス・ジャパン 桐生 達嗣さんのセッション

内容

slides.com

開発環境は"VisualStudioCode + AngularEssentials"がおすすめ

Angular 概念と基本 ・Component と Module
 Component = 部品
 Module = 機能の固まり
   Root Module = アプリケーション起動に必須 Feature Module = アプリケーションを機能ごとに分割、サードパーティ製のモジュール ・Container component と Presentational
  Container component は データ・状態を扱う。
  Presentational Component は 渡されたデータを表示
Angularの基本
 Component … .ts / .html / .scss から成り立つ
 Binding … Property Binding, Event Bindingがある
 CustomPropertyやCustomEventが定義できる。
 ngIfやngForなどの機能が便利です。
  メインは1時間でTODOアプリを最速作成するという内容でした。
1. AngularCLI によるAnglarプロジェクトを作成する。
2. TODOアプリの構成を考える。
3. サードパーティーモジュールの追加方法など
 Ignite UI for Angularは非商用利用であれば無償で利用できる。
 AnglarCLIでは手動でファイルを作成せずコマンドでも作成することができる。

本当に1時間で作っちゃうのが凄いかったです。 ちゃんとデータの保持・編集・削除まで。 他、デバッグや実装に役立つ実践的なTipsを色々紹介して頂きました!

TypeScript + Bot Framework Node.js開発

日本マイクロソフト株式会社 物江 修さんのセッション

内容

BOTとは、自動で動作するアプリ。
昨今ではBOT=チャットアプリと認識されることが多いがそれは違うと。

また、マイクロソフトでは庶務BOTがあり名刺発注など簡単な仕事の受付をしてくれる。
デモも見せてくれましたが綺麗に動いてました。
うちにも欲しいなー。 また、Bot Frameworkは他のメッセンジャーチャンネルを接続できる(Skype,Slack,Teams,Email,Twilloなど) 色々な幅が広がりそうです。