TypeScript その2

年末の休暇を利用してtypeScriptの演習を続行中。 現在まで理解できたところをとりあえず列挙。
nodejs が導入されている必要あり。

npm install typescript -g

これで tscコマンドが使えるようになる。

tsc example.ts

そして、これでexample.ts から example.jsがトランスパイルされる。

プロジェクトフォルダー内で

 tsc init

とやると、コンパイラー設定用のtsconfig.jsonが作成され規定値が設定される。例えば、出力のJavaScriptのレベルが

<pre>”target”:”es5″</pre>

などと記述されている。またコードをトランスパイルしたときのエラーの出力設定などもできる。今のところ全く変更の必要のないレベルでトライアル中。

TypeScript は 基本的には JavaScriptのsuper setなのだが、 ’let’, ‘const’, ‘arrow function ()=>’, ‘ … spread operator’,’Template strings’ などes2015の書式が既にサポートされている。 なのでexample.tsではこれらの言語機能を使ってプログラムを書き、tscでトランスパイルすると、これらの表記をまだサポートしていない現行のブラウザでも動くようなJavaScriptに書き換えてくれる。上のConfig例ではes5レベルのコードに置き換わる。 つまりBabelと同じような使い方ができる、。

type safeなので 異なったタイプの変数へのアサインは論外としてもその可能性が生じそうなコードにはエラー表示が鬼のようにでる。例外処理とか、Interface定義を記述して対処すると満足して何も言わなくなってくれるので、バグの可能性のあるコードを書く可能性が低くなる。

SharePoint Column Formatter の使い方

SharePoint Onlineのテナントで一ヶ月くらい前からPushされはじめた機能なのだが、リストのコラムセッティングに”Column Formatting”というのが追加されている。 Text Entry Field になっており、説明は”JSON書式でフォーマットを記入してください”とかなりそっけない。 詳細はOffice Devのほうにある。 ここ 。

さらに書式サンプルのDepositoryがGitHUBにおいてある。 ここ

 

で、上の記述を参考にListViewのカスタム化を自分で試してみたのがこれ。

ここではCheckedのColumn Formatting に以下を指定

{
  "debugMode": true,
  "elmType":"div",
  "children":[
    {
      "elmType": "img",
      "attributes": {
        "src": {
          "operator":"?",
          "operands":[
            "@currentField",
            "/_layouts/images/CNSAPP16.GIF",
            "/_layouts/images/CbUnChecked.gif"
          ]
        },
        "aria-hidden":"true"
      },
      "style": {

      }
    }
  ]

}


これでYes/Noの文字表示をアイコンイメージに置き換えている。

Delivery Statusのコラム書式はちょっと長くなる。(参照する各Columnの内部名称をColumn settingsでそれぞれ確認しておく必要があることに注意 下の例では CheckedはCheckedだがDue DateはTaskDueDateになっている)

{
  "debugMode": true,
  "elmType": "div",
  "attributes": {
    "class": {
      "operator": "?",
      "operands": [
        "[$Checked]",
        "sp-field-severity--good",
        {
          "operator": "?",
          "operands": [
            {
              "operator": "<=",
              "operands": [
                "[$TaskDueDate]",
                {
                  "operator": "-",
                  "operands": [
                    "@now",
                    86400000
                  ]
                }
              ]
            },
            "sp-field-severity--severeWarning",
            {
              "operator": "?",
              "operands": [
                {
                  "operator": "<=",
                  "operands": [
                    "[$TaskDueDate]",
                    "@now"
                  ]
                },
                "sp-field-severity--blocked",
                {
                  "operator": "?",
                  "operands": [
                    {
                      "operator": "<=",
                      "operands": [
                        "[$TaskDueDate]",
                        {
                          "operator": "+",
                          "operands": [
                            "@now",
                            604800000
                          ]
                        }
                      ]
                    },
                    "sp-field-severity--warning",
                    "sp-field-severity--low"
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": {
          "operator": "?",
          "operands": [
            "[$Checked]",
            "CheckMark",
            {
              "operator": "?",
              "operands": [
                {
                  "operator": "<=",
                  "operands": [
                    "[$TaskDueDate]",
                    {
                      "operator": "-",
                      "operands": [
                        "@now",
                        86400000
                      ]
                    }
                  ]
                },
                "ErrorBadge",
                {
                  "operator": "?",
                  "operands": [
                    {
                      "operator": "<=",
                      "operands": [
                        "[$TaskDueDate]",
                        "@now"
                      ]
                    },
                    "Warning",
                    {
                      "operator": "?",
                      "operands": [
                        {
                          "operator": "<=",
                          "operands": [
                            "[$TaskDueDate]",
                            {
                              "operator": "+",
                              "operands": [
                                "@now",
                                604800000
                              ]
                            }
                          ]
                        },
                        "Error",
                        "Forward"
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      }
    },
    {
      "elmType": "span",
      "txtContent": {
        "operator": "?",
        "operands": [
          "[$Checked]",
          "Delivered",
          {
            "operator": "?",
            "operands": [
              {
                "operator": "<=",
                "operands": [
                  "[$TaskDueDate]",
                  {
                    "operator": "-",
                    "operands": [
                      "@now",
                      86400000
                    ]
                  }
                ]
              },
              "Past Due",
              {
                "operator": "?",
                "operands": [
                  {
                    "operator": "<=",
                    "operands": [
                      "[$TaskDueDate]",
                      "@now"
                    ]
                  },
                  "Due Today",
                  {
                    "operator": "?",
                    "operands": [
                      {
                        "operator": "<=",
                        "operands": [
                          "[$TaskDueDate]",
                          {
                            "operator": "+",
                            "operands": [
                              "@now",
                              604800000
                            ]
                          }
                        ]
                      },
                      "Nearing Due Date",
                      "Upcoming"
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      "style": {
        "color": "black"
      }
    }
  ]
}

それぞれのAttribute (Text, Class, iConName)に対して出力は異なるものの条件自体は同じ式をを繰り返していれてやらなければならないので記述がやたらに長くなる。 また簡単な条件式を入れ子状に繰り返し使うので、どんどん括弧がふえていく。

条件式のロジックだが、 due date 当日には

@now – 1 day < Due Date < @now

になっていることを利用して 以下のIf構文をJasonにて記述している。

If checked == True then “Delivered 納品済み”
else if Due Date < = @now – 1 day then “Over Due 納期遅れ”
else if Due Date < = @ now then “Due Today 本日納期”
else if Due Date < = @now + 7 days then “Nearing Due Date 納期近し”
else “Upcoming 今後の納入”

ページにJavaScript を埋め込まずにこういうことができるのは画期的だが、 普通のNotepadでエラーを出さずに記述するのはまず不可能。JSON構文のチェック機能とエレメントブロックの折りたたみ機能がしっかりついているProgramming Editorは必須。(無料で使えるVisual Studio Codeがいまどきの旬です。)

なお、このフォーマッターはModern View のみで有効。 Classic Viewでは何も起こらないので CSRを使ったJavaScriptコードの必要性がなくなったというわけではない。 また、 将来への計画はされているようだが、WebPartを使ってリストViewをページに埋め込んだ場合も現時点では機能しない。

最初の行の”debugmode”: trueは記述しておくとエラーの内容がブラウザーのデベロッパーコンソールとコラム表示に吐き出されるのでデバッグ用に便利だがもちろん削除してもかまわない。