Power AppsでFluent UIを活用して、オシャレなアプリを作る

# はじめに
Microsoft MVPでPower Appsの発信をされている[Matthew Devaney](https://www.matthewdevaney.com/how-to-show-file-type-icons-in-a-power-apps-gallery)さんのブログを見て衝撃を得ました。
**SharePointサイトで表示されているファイルアイコンが、Power Appsでサクっと表現できるのなんて・・・👀✨**

https://www.matthewdevaney.com/how-to-show-file-type-icons-in-a-power-apps-gallery

一体これはどんなテクニックなんだ・・・！、**ほかにどんな画像参照ができるのか！** という興味から色々調べて見ました。

# [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/)
このアイコンの大本となるのは、[Fluent UI](https://developer.microsoft.com/en-us/fluentui#/)。
Fluent UIは、Microsoftのアプリケーション、SharePoint Onlineなどで採用されている**UXフレームワーク**です。

今回興味を持った発端となるテクニックは、`https://static2.sharepointonline.com`という、`Microsoft`の`コンテンツ配信ネットワーク(CDN)`から、**自分のサーバーにCSS(材料)を用意せずに**、Microsoftのサーバーから、Fluent UIのリソースを参照しています。

試しに、メモ帳で下記のコードをコピペして、`sample.html`と名前を付けて保存をしてください。

```html:sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Office UI Fabric アイコン例</title>
    <!-- Office UI Fabric のCSSを読み込んでいる -->
    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding: 20px;
        }
        .icon-container {
            display: flex;
            align-items: center;
        }
        .icon-container i {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <h1>Office UI Fabric アイコン例</h1>
    <div class="icon-container">
        <i class="ms-Icon ms-font-xl ms-Icon--Table ms-fontColor-themePrimary"></i>
        <span>テーブルアイコン</span>
    </div>
</body>
</html>

```

ブラウザ（Microsoft Edge）で開くと下記のように表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/08850536-9514-f007-819b-5142b24718f0.png)

[Fluent UI Icons](https://developer.microsoft.com/en-us/fluentui#/styles/web/icons)のページを参照してみると、こちらのアイコンと一致していることがわかります。

なぜ自分の手元では、CSSを用意していないのにアイコンを使えるのでしょうか。
それは`https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css`を参照しているためです。

これは **[Fabric Core](https://learn.microsoft.com/ja-jp/office/dev/add-ins/design/fabric-core)というオープンソース コレクションの一部**のとのこと。

> Fabric Core は、React以外の Office アドインで使用することを目的とした CSS クラスと Sass mixins のオープンソース コレクションです。Fabric Core には、アイコン、色、書体、グリッドなど、Fluent UI デザイン言語の基本的な要素が含まれています。 Fabric Core はフレームワークに依存しないため、任意のシングルページ アプリケーションまたは任意のサーバー側 Web UI フレームワークで使用できます。 (履歴上の理由から、"Fluent Core" ではなく "Fabric Core" と呼ばれます)。
>> [Office アドインの Fabric Core](https://learn.microsoft.com/ja-jp/office/dev/add-ins/design/fabric-core)

`任意のシングルページ アプリケーションまたは任意のサーバー側 Web UI フレームワークで使用できる`、これによって、自分でCSSを用意せずとも、Fabric Coreを参照できるということなんですね。

改めて[CSS](https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css)の中身を覗いてみます。

https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css

アイコンや画像が含まれていますね。例えばCSSの中にある[https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_16x3.png](https://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_16x3.png)にアクセスすると、Excelのアイコンが表示されます。

このおかげで、サクっとSharePointサイトのドキュメント ライブラリで映っているような映えるアイコンが表示できるということなんですね。

■ 参考リンク

https://learn.microsoft.com/ja-jp/microsoft-365/enterprise/content-delivery-networks?view=o365-worldwide#what-performance-gains-does-a-cdn-provide

https://learn.microsoft.com/ja-jp/microsoft-365/enterprise/use-microsoft-365-cdn-with-spo?view=o365-worldwide

https://developer.microsoft.com/en-us/fluentui#/styles/web/file-type-icons

# 使えるものを一覧化してみる
どのようなファイルが参照できるのか、検証してみました。
結果はこの通り。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/953b0b24-786b-15fc-b1a2-05d9effc763c.png)

圧巻ですね!! **合計61!!** (画像の種類単位、拡張子単位であれば300以上)
GitHubなど参考にして出した結果ですが、漏れもあるかもしれません。

ギャラリーコントロールに下記のプロパティに画像を参照しています。
さっそく`YAML`使うスタイルです。

```yaml
- GalleryImage:
    Control: Gallery
    Variant: BrowseLayout_Vertical_OneImageThreeColumnVariant_ver5.0
    Properties:
      Items: =["accdb","archive","audio","calendar","classifier","code","contact","csv","desktopfolder","docset","docx","dotx","email","exe", "fluid", "folder","font","form","genericfile","html","link","linkedfolder","splist","model","mpp","mpt","multiple","one","onetoc","pbiapp","pdf","photo","photo360","picturesfolder","potx","powerbi","ppsx","pptx","presentation","pub","spo","sponews","spreadsheet","rtf","sharedfolder","sway","sysfile","txt","vaultclosed","vaultopen","vector","video","video360","vsdx","vssx","vstx","xlsx","xltx","xml","xsn","zip"]
      WrapCount: =12
      DelayItemLoading: =true
      Layout: =Layout.Vertical
      LoadingSpinner: =LoadingSpinner.Data
      TemplatePadding: =4
      TemplateSize: =80
    Children:
    - FileName:
        Control: Text
        Properties:
          Size: =16
          Text: =ThisItem.Value
          Height: =53
          Width: =74
          X: =54
          Y: =1
    - IconImage:
        Control: Image
        Properties:
          OnSelect: =Select(Parent)
          Image: |-
            =$"https://static2.sharepointonline.com/files/fabric/assets/item-types/24/{Coalesce(
                ThisItem.Value,
                "genericfile"
            )}.svg"
          Height: =36
          ImagePosition: =ImagePosition.Fill
          RadiusBottomLeft: =8
          RadiusBottomRight: =8
          RadiusTopLeft: =8
          RadiusTopRight: =8
          Width: =36
          X: =7
          Y: =9
```

ギャラリーコントロールのデータソースには
```plaintext:Items
["accdb","archive","audio","calendar","classifier","code","contact","csv","desktopfolder","docset","docx","dotx","email","exe", "fluid", "folder","font","form","genericfile","html","link","linkedfolder","splist","model","mpp","mpt","multiple","one","onetoc","pbiapp","pdf","photo","photo360","picturesfolder","potx","powerbi","ppsx","pptx","presentation","pub","spo","sponews","spreadsheet","rtf","sharedfolder","sway","sysfile","txt","vaultclosed","vaultopen","vector","video","video360","vsdx","vssx","vstx","xlsx","xltx","xml","xsn","zip"]
```

画像は、Imageプロパティに

```plaintext:Image
$"https://static2.sharepointonline.com/files/fabric/assets/item-types/24/{Coalesce(
    ThisItem.Value,
    "genericfile"
)}.svg"
```
とすることで表現できています。

[Coalesce関数](https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-isblank-isempty#coalesce)と、[文字列の先頭にドル記号`$`を付けたテクニックが使われています。](https://learn.microsoft.com/ja-jp/power-platform/power-fx/data-types#string-interpolation
)
文字列の置き換えがスマートです。

https://learn.microsoft.com/ja-jp/power-platform/power-fx/data-types#string-interpolation

https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-isblank-isempty#coalesce


## アイコンを呼び出すキーとファイルの内容

下記のようにまとめました！

|キー|対象の拡張子|説明|
|---|---|---|
|accdb|`accdb`, `mdb`|Microsoft Accessファイル|
|archive|`7z`, `ace`, `arc`, `arj`, `dmg`, `gz`, `iso`, `lzh`, `pkg`, `rar`, `sit`, `tgz`, `tar`, `z`|圧縮ファイルなど|
|audio|`aif`, `aiff`, `aac`, `alac`, `amr`, `ape`, `au`, `awb`, `dct`, `dss`, `dvf`, `flac`, `gsm`, `m4a`, `m4p`, `mid`, `mmf`, `mp3`, `oga`, `ra`, `rm`, `wav`, `wma`, `wv`|音声ファイル|
|calendar|`ical`, `icalendar`, `ics`, `ifb`, `vcs`|カレンダーファイル|
|classifier|`classifier`||
|code|`abap`, `ada`, `adp`, `ahk`, `as`, `as3`, `asc`, `ascx`, `asm`, `asp`, `awk`, `bash`, `bash_login`, `bash_logout`, `bash_profile`, `bashrc`, `bat`, `bib`, `bsh`, `build`, `builder`, `c`, `cbl`, `c++`, `capfile`, `cc`, `cfc`, `cfm`, `cfml`, `cl`, `clj`, `cls`, `cmake`, `cmd`, `coffee`, `config`, `cpp`, `cpt`, `cpy`, `cs`, `cshtml`, `cson`, `csproj`, `css`, `ctp`, `cxx`, `d`, `ddl`, `di`, `disco`, `dml`, `dtd`, `dtml`, `el`, `emakefile`, `erb`, `erl`, `f`, `f90`, `f95`, `fs`, `fsi`, `fsscript`, `fsx`, `gemfile`, `gemspec`, `gitconfig`, `go`, `groovy`, `gvy`, `h`, `h++`, `haml`, `handlebars`, `hbs`, `hcp`, `hh`, `hpp`, `hrl`, `hs`, `htc`, `hxx`, `idl`, `iim`, `inc`, `inf`, `ini`, `inl`, `ipp`, `irbrc`, `jade`, `jav`, `java`, `js`, `json`, `jsp`, `jsproj`, `jsx`, `l`, `less`, `lhs`, `lisp`, `log`, `lst`, `ltx`, `lua`, `m`, `mak`, `make`, `manifest`, `master`, `md`, `markdn`, `markdown`, `mdown`, `mkdn`, `ml`, `mli`, `mll`, `mly`, `mm`, `mud`, `nfo`, `opml`, `osascript`, `p`, `pas`, `patch`, `php`, `php2`, `php3`, `php4`, `php5`, `phtml`, `pl`, `pm`, `pod`, `pp`, `profile`, `ps1`, `ps1xml`, `psd1`, `psm1`, `pss`, `pt`, `py`, `pyw`, `r`, `rake`, `rb`, `rbx`, `rc`, `rdf`, `re`, `reg`, `rest`, `resw`, `resx`, `rhtml`, `rjs`, `rprofile`, `rpy`, `rss`, `rst`, `ruby`, `rxml`, `s`, `sass`, `scala`, `scm`, `sconscript`, `sconstruct`, `script`, `scss`, `sgml`, `sh`, `shtml`, `sml`, `svn-base`, `swift`, `sql`, `sty`, `tcl`, `tex`, `textile`, `tld`, `tli`, `tmpl`, `tpl`, `vb`, `vi`, `vim`, `vmg`, `webpart`, `wsp`, `wsdl`, `xhtml`, `xoml`, `xsd`, `xslt`, `yaml`, `yaws`, `yml`, `zsh`|ソースコードなど|
|contact|`vcf`|連絡先|
|csv|`csv`|CSV|
|desktopfolder||デスクトップフォルダ|
|docset||ドキュメントセット|
|docx|`doc`, `docm`, `docx`, `docb`|Word文書|
|dotx|`dot`, `dotm`, `dotx`|Wordテンプレート|
|email|`eml`, `msg`, `oft`, `ost`, `pst`|電子メールファイル|
|exe|`application`, `appref-ms`, `apk`, `app`, `appx`, `exe`, `ipa`, `msi`, `xap`|実行ファイル|
|folder||フォルダ|
|font|`ttf`, `otf`, `woff`|フォントファイル|
|form||Formsのアイコン|
|genericfile||ファイル|
|html|`htm`, `html`, `mht`, `mhtml`|HTML|
|link|`lnk`, `link`, `url`, `website`, `webloc`|リンク|
|linkedfolder||リンク済みのフォルダ|
|splist|||
|model|`3ds`, `3mf`, `blend`, `cool`, `dae`, `df`, `dwfx`, `dwg`, `dxf`, `fbx`, `glb`, `gltf`, `holo`, `layer`, `layout`, `max`, `mtl`, `obj`, `off`, `ply`, `skp`, `stp`, `stl`, `t`, `thl`, `x`|3Dモデルファイル|
|mpp|`mpp`|Projectプロジェクト|
|mpt|`mpt`|Projectテンプレート|
|multiple||複数のファイル|
|one|`one`|OneNote|
|onetoc|`ms-one-stub`, `onetoc`, `onetoc2`, `onepkg`|OneNoteノートブック|
|pbiapp||Power BIアプリケーション|
|pdf|`pdf`|PDFファイル|
|photo|`arw`, `bmp`, `cr2`, `crw`, `dic`, `dicm`, `dcm`, `dcm30`, `dcr`, `dds`, `dib`, `dng`, `erf`, `gif`, `heic`, `heif`, `ico`, `jfi`, `jfif`, `jif`, `jpe`, `jpeg`, `jpg`, `jxr`, `kdc`, `mrw`, `nef`, `orf`, `pct`, `pict`, `png`, `pns`, `psb`, `psd`, `raw`, `tga`, `tif`, `tiff`, `wdp`|画像|
|photo360||360度写真|
|picturesfolder||ピクチャフォルダ|
|potx|`pot`, `potm`, `potx`|PowerPointテンプレート|
|powerbi|`pbids`, `pbix`|Power BIファイル|
|ppsx|`pps`, `ppsm`, `ppsx`|PowerPointスライドショー|
|pptx|`ppt`, `pptm`, `pptx`, `sldx`, `sldm`|PowerPointファイル|
|presentation|`odp`, `gslides`, `key`|プレゼンテーションファイル|
|pub|`pub`|Publisherファイル|
|spo|`aspx`|SharePoint Onlineページ|
|sponews||SharePointニュース|
|spreadsheet|`odc`, `ods`, `gsheet`, `numbers`, `tsv`|スプレッドシート（Excel以外）|
|rtf|`epub`, `gdoc`, `odt`, `rtf`, `wri`, `pages`|リッチテキストファイル|
|sharedfolder||共有済みフォルダ|
|sway||Sway|
|sysfile|`bak`, `bin`, `cab`, `cache`, `cat`, `cer`, `class`, `dat`, `db`, `dbg`, `dl_`, `dll`, `ithmb`, `jar`, `kb`, `ldt`, `lrprev`, `pkpass`, `ppa`, `ppam`, `pdb`, `rom`, `thm`, `thmx`, `vsl`, `xla`, `xlam`, `xlb`, `xll`|システムファイル|
|txt|`dif`, `diff`, `readme`, `out`, `plist`, `properties`, `text`, `txt`|テキスト|
|vaultclosed||クローズドボールト|
|vaultopen||オープンボールト|
|vector|`ai`, `ait`, `cvs`, `dgn`, `gdraw`, `pd`, `emf`, `eps`, `fig`, `ind`, `indd`, `indl`, `indt`, `indb`, `ps`, `svg`, `svgz`, `wmf`, `oxps`, `xps`, `xd`, `sketch`|ベクターファイル|
|video|`3g2`, `3gp`, `3gp2`, `3gpp`, `asf`, `avi`, `dvr-ms`, `flv`, `m1v`, `m4v`, `mkv`, `mod`, `mov`, `mm4p`, `mp2`, `mp2v`, `mp4`, `mp4v`, `mpa`, `mpe`, `mpeg`, `mpg`, `mpv`, `mpv2`, `mts`, `ogg`, `qt`, `swf`, `ts`, `vob`, `webm`, `wlmp`, `wm`, `wmv`, `wmx`|動画|
|video360||360度動画|
|vsdx|`vdx`, `vsd`, `vsdm`, `vsdx`, `vsw`, `vdw`|Visioダイアグラム|
|vssx|`vss`, `vssm`, `vssx`|Visio図面ステンシル|
|vstx|`vst`, `vstm`, `vstx`, `vsx`|Visioテンプレート|
|xlsx|`xlc`, `xls`, `xlsb`, `xlsm`, `xlsx`, `xlw`|Excelスプレッドシート|
|xltx|`xlt`, `xltm`, `xltx`|Excelテンプレート|
|xml|`xaml`, `xml`, `xsl`|XML|
|xsn|`xsn`|InfoPathファイル|
|zip|`zip`|圧縮ファイル|

:::note warn
間違いあれば教えてください🙇
:::


ファイル種類ってこんなにあったのか！と衝撃です。
[Matthew Devaney](https://www.matthewdevaney.com/how-to-show-file-type-icons-in-a-power-apps-gallery/#Add-A-File-Icons-Mapping-Table-To-The-App-Formulas)氏もマッピングしていますが、違いがあるかないかは、ぜひ見てみてください！

### こんなことができるかも！
[Fluent UI](https://developer.microsoft.com/en-us/fluentui#/styles/web/file-type-icons)を使う理由は、やはりクールであることです。
そして拡張子から算出できるのであれば、表現が簡単。

#### 添付ファイル コントロールから表示する
工夫することで、添付ファイルコントロールの`Attachments`の中身をアイコンに変換できそうです。

まずは、App.Formulasに下記を設定。
拡張子に対するFileTypeのテーブルです。

<details><summary>【注】（しこたま長いです）</summary>

```plaintext:App.Formulas
IconTable = Table(
    {
        FileType: "accdb",
        Extention: "accdb"
    },
    {
        FileType: "accdb",
        Extention: "mdb"
    },
    {
        FileType: "archive",
        Extention: "7z"
    },
    {
        FileType: "archive",
        Extention: "ace"
    },
    {
        FileType: "archive",
        Extention: "arc"
    },
    {
        FileType: "archive",
        Extention: "arj"
    },
    {
        FileType: "archive",
        Extention: "dmg"
    },
    {
        FileType: "archive",
        Extention: "gz"
    },
    {
        FileType: "archive",
        Extention: "iso"
    },
    {
        FileType: "archive",
        Extention: "lzh"
    },
    {
        FileType: "archive",
        Extention: "pkg"
    },
    {
        FileType: "archive",
        Extention: "rar"
    },
    {
        FileType: "archive",
        Extention: "sit"
    },
    {
        FileType: "archive",
        Extention: "tgz"
    },
    {
        FileType: "archive",
        Extention: "tar"
    },
    {
        FileType: "archive",
        Extention: "z"
    },
    {
        FileType: "audio",
        Extention: "aif"
    },
    {
        FileType: "audio",
        Extention: "aiff"
    },
    {
        FileType: "audio",
        Extention: "aac"
    },
    {
        FileType: "audio",
        Extention: "alac"
    },
    {
        FileType: "audio",
        Extention: "amr"
    },
    {
        FileType: "audio",
        Extention: "ape"
    },
    {
        FileType: "audio",
        Extention: "au"
    },
    {
        FileType: "audio",
        Extention: "awb"
    },
    {
        FileType: "audio",
        Extention: "dct"
    },
    {
        FileType: "audio",
        Extention: "dss"
    },
    {
        FileType: "audio",
        Extention: "dvf"
    },
    {
        FileType: "audio",
        Extention: "flac"
    },
    {
        FileType: "audio",
        Extention: "gsm"
    },
    {
        FileType: "audio",
        Extention: "m4a"
    },
    {
        FileType: "audio",
        Extention: "m4p"
    },
    {
        FileType: "audio",
        Extention: "mid"
    },
    {
        FileType: "audio",
        Extention: "mmf"
    },
    {
        FileType: "audio",
        Extention: "mp3"
    },
    {
        FileType: "audio",
        Extention: "oga"
    },
    {
        FileType: "audio",
        Extention: "ra"
    },
    {
        FileType: "audio",
        Extention: "rm"
    },
    {
        FileType: "audio",
        Extention: "wav"
    },
    {
        FileType: "audio",
        Extention: "wma"
    },
    {
        FileType: "audio",
        Extention: "wv"
    },
    {
        FileType: "calendar",
        Extention: "ical"
    },
    {
        FileType: "calendar",
        Extention: "icalendar"
    },
    {
        FileType: "calendar",
        Extention: "ics"
    },
    {
        FileType: "calendar",
        Extention: "ifb"
    },
    {
        FileType: "calendar",
        Extention: "vcs"
    },
    {
        FileType: "classifier",
        Extention: "classifier"
    },
    {
        FileType: "clipchamp",
        Extention: "clipchamp"
    },
    {
        FileType: "code",
        Extention: "abap"
    },
    {
        FileType: "code",
        Extention: "ada"
    },
    {
        FileType: "code",
        Extention: "adp"
    },
    {
        FileType: "code",
        Extention: "ahk"
    },
    {
        FileType: "code",
        Extention: "as"
    },
    {
        FileType: "code",
        Extention: "as3"
    },
    {
        FileType: "code",
        Extention: "asc"
    },
    {
        FileType: "code",
        Extention: "ascx"
    },
    {
        FileType: "code",
        Extention: "asm"
    },
    {
        FileType: "code",
        Extention: "asp"
    },
    {
        FileType: "code",
        Extention: "awk"
    },
    {
        FileType: "code",
        Extention: "bash"
    },
    {
        FileType: "code",
        Extention: "bash_login"
    },
    {
        FileType: "code",
        Extention: "bash_logout"
    },
    {
        FileType: "code",
        Extention: "bash_profile"
    },
    {
        FileType: "code",
        Extention: "bashrc"
    },
    {
        FileType: "code",
        Extention: "bat"
    },
    {
        FileType: "code",
        Extention: "bib"
    },
    {
        FileType: "code",
        Extention: "bsh"
    },
    {
        FileType: "code",
        Extention: "build"
    },
    {
        FileType: "code",
        Extention: "builder"
    },
    {
        FileType: "code",
        Extention: "c"
    },
    {
        FileType: "code",
        Extention: "cbl"
    },
    {
        FileType: "code",
        Extention: "c++"
    },
    {
        FileType: "code",
        Extention: "capfile"
    },
    {
        FileType: "code",
        Extention: "cc"
    },
    {
        FileType: "code",
        Extention: "cfc"
    },
    {
        FileType: "code",
        Extention: "cfm"
    },
    {
        FileType: "code",
        Extention: "cfml"
    },
    {
        FileType: "code",
        Extention: "cl"
    },
    {
        FileType: "code",
        Extention: "clj"
    },
    {
        FileType: "code",
        Extention: "cls"
    },
    {
        FileType: "code",
        Extention: "cmake"
    },
    {
        FileType: "code",
        Extention: "cmd"
    },
    {
        FileType: "code",
        Extention: "coffee"
    },
    {
        FileType: "code",
        Extention: "config"
    },
    {
        FileType: "code",
        Extention: "cpp"
    },
    {
        FileType: "code",
        Extention: "cpt"
    },
    {
        FileType: "code",
        Extention: "cpy"
    },
    {
        FileType: "code",
        Extention: "cs"
    },
    {
        FileType: "code",
        Extention: "cshtml"
    },
    {
        FileType: "code",
        Extention: "cson"
    },
    {
        FileType: "code",
        Extention: "csproj"
    },
    {
        FileType: "code",
        Extention: "css"
    },
    {
        FileType: "code",
        Extention: "ctp"
    },
    {
        FileType: "code",
        Extention: "cxx"
    },
    {
        FileType: "code",
        Extention: "d"
    },
    {
        FileType: "code",
        Extention: "ddl"
    },
    {
        FileType: "code",
        Extention: "di"
    },
    {
        FileType: "code",
        Extention: "disco"
    },
    {
        FileType: "code",
        Extention: "dml"
    },
    {
        FileType: "code",
        Extention: "dtd"
    },
    {
        FileType: "code",
        Extention: "dtml"
    },
    {
        FileType: "code",
        Extention: "el"
    },
    {
        FileType: "code",
        Extention: "emakefile"
    },
    {
        FileType: "code",
        Extention: "erb"
    },
    {
        FileType: "code",
        Extention: "erl"
    },
    {
        FileType: "code",
        Extention: "f"
    },
    {
        FileType: "code",
        Extention: "f90"
    },
    {
        FileType: "code",
        Extention: "f95"
    },
    {
        FileType: "code",
        Extention: "fs"
    },
    {
        FileType: "code",
        Extention: "fsi"
    },
    {
        FileType: "code",
        Extention: "fsscript"
    },
    {
        FileType: "code",
        Extention: "fsx"
    },
    {
        FileType: "code",
        Extention: "gemfile"
    },
    {
        FileType: "code",
        Extention: "gemspec"
    },
    {
        FileType: "code",
        Extention: "gitconfig"
    },
    {
        FileType: "code",
        Extention: "go"
    },
    {
        FileType: "code",
        Extention: "groovy"
    },
    {
        FileType: "code",
        Extention: "gvy"
    },
    {
        FileType: "code",
        Extention: "h"
    },
    {
        FileType: "code",
        Extention: "h++"
    },
    {
        FileType: "code",
        Extention: "haml"
    },
    {
        FileType: "code",
        Extention: "handlebars"
    },
    {
        FileType: "code",
        Extention: "hbs"
    },
    {
        FileType: "code",
        Extention: "hcp"
    },
    {
        FileType: "code",
        Extention: "hh"
    },
    {
        FileType: "code",
        Extention: "hpp"
    },
    {
        FileType: "code",
        Extention: "hrl"
    },
    {
        FileType: "code",
        Extention: "hs"
    },
    {
        FileType: "code",
        Extention: "htc"
    },
    {
        FileType: "code",
        Extention: "hxx"
    },
    {
        FileType: "code",
        Extention: "idl"
    },
    {
        FileType: "code",
        Extention: "iim"
    },
    {
        FileType: "code",
        Extention: "inc"
    },
    {
        FileType: "code",
        Extention: "inf"
    },
    {
        FileType: "code",
        Extention: "ini"
    },
    {
        FileType: "code",
        Extention: "inl"
    },
    {
        FileType: "code",
        Extention: "ipp"
    },
    {
        FileType: "code",
        Extention: "irbrc"
    },
    {
        FileType: "code",
        Extention: "jade"
    },
    {
        FileType: "code",
        Extention: "jav"
    },
    {
        FileType: "code",
        Extention: "java"
    },
    {
        FileType: "code",
        Extention: "js"
    },
    {
        FileType: "code",
        Extention: "json"
    },
    {
        FileType: "code",
        Extention: "jsp"
    },
    {
        FileType: "code",
        Extention: "jsproj"
    },
    {
        FileType: "code",
        Extention: "jsx"
    },
    {
        FileType: "code",
        Extention: "l"
    },
    {
        FileType: "code",
        Extention: "less"
    },
    {
        FileType: "code",
        Extention: "lhs"
    },
    {
        FileType: "code",
        Extention: "lisp"
    },
    {
        FileType: "code",
        Extention: "log"
    },
    {
        FileType: "code",
        Extention: "lst"
    },
    {
        FileType: "code",
        Extention: "ltx"
    },
    {
        FileType: "code",
        Extention: "lua"
    },
    {
        FileType: "code",
        Extention: "m"
    },
    {
        FileType: "code",
        Extention: "mak"
    },
    {
        FileType: "code",
        Extention: "make"
    },
    {
        FileType: "code",
        Extention: "manifest"
    },
    {
        FileType: "code",
        Extention: "master"
    },
    {
        FileType: "code",
        Extention: "md"
    },
    {
        FileType: "code",
        Extention: "markdn"
    },
    {
        FileType: "code",
        Extention: "markdown"
    },
    {
        FileType: "code",
        Extention: "mdown"
    },
    {
        FileType: "code",
        Extention: "mkdn"
    },
    {
        FileType: "code",
        Extention: "ml"
    },
    {
        FileType: "code",
        Extention: "mli"
    },
    {
        FileType: "code",
        Extention: "mll"
    },
    {
        FileType: "code",
        Extention: "mly"
    },
    {
        FileType: "code",
        Extention: "mm"
    },
    {
        FileType: "code",
        Extention: "mud"
    },
    {
        FileType: "code",
        Extention: "nfo"
    },
    {
        FileType: "code",
        Extention: "opml"
    },
    {
        FileType: "code",
        Extention: "osascript"
    },
    {
        FileType: "code",
        Extention: "p"
    },
    {
        FileType: "code",
        Extention: "pas"
    },
    {
        FileType: "code",
        Extention: "patch"
    },
    {
        FileType: "code",
        Extention: "php"
    },
    {
        FileType: "code",
        Extention: "php2"
    },
    {
        FileType: "code",
        Extention: "php3"
    },
    {
        FileType: "code",
        Extention: "php4"
    },
    {
        FileType: "code",
        Extention: "php5"
    },
    {
        FileType: "code",
        Extention: "phtml"
    },
    {
        FileType: "code",
        Extention: "pl"
    },
    {
        FileType: "code",
        Extention: "pm"
    },
    {
        FileType: "code",
        Extention: "pod"
    },
    {
        FileType: "code",
        Extention: "pp"
    },
    {
        FileType: "code",
        Extention: "profile"
    },
    {
        FileType: "code",
        Extention: "ps1"
    },
    {
        FileType: "code",
        Extention: "ps1xml"
    },
    {
        FileType: "code",
        Extention: "psd1"
    },
    {
        FileType: "code",
        Extention: "psm1"
    },
    {
        FileType: "code",
        Extention: "pss"
    },
    {
        FileType: "code",
        Extention: "pt"
    },
    {
        FileType: "code",
        Extention: "py"
    },
    {
        FileType: "code",
        Extention: "pyw"
    },
    {
        FileType: "code",
        Extention: "r"
    },
    {
        FileType: "code",
        Extention: "rake"
    },
    {
        FileType: "code",
        Extention: "rb"
    },
    {
        FileType: "code",
        Extention: "rbx"
    },
    {
        FileType: "code",
        Extention: "rc"
    },
    {
        FileType: "code",
        Extention: "rdf"
    },
    {
        FileType: "code",
        Extention: "re"
    },
    {
        FileType: "code",
        Extention: "reg"
    },
    {
        FileType: "code",
        Extention: "rest"
    },
    {
        FileType: "code",
        Extention: "resw"
    },
    {
        FileType: "code",
        Extention: "resx"
    },
    {
        FileType: "code",
        Extention: "rhtml"
    },
    {
        FileType: "code",
        Extention: "rjs"
    },
    {
        FileType: "code",
        Extention: "rprofile"
    },
    {
        FileType: "code",
        Extention: "rpy"
    },
    {
        FileType: "code",
        Extention: "rss"
    },
    {
        FileType: "code",
        Extention: "rst"
    },
    {
        FileType: "code",
        Extention: "ruby"
    },
    {
        FileType: "code",
        Extention: "rxml"
    },
    {
        FileType: "code",
        Extention: "s"
    },
    {
        FileType: "code",
        Extention: "sass"
    },
    {
        FileType: "code",
        Extention: "scala"
    },
    {
        FileType: "code",
        Extention: "scm"
    },
    {
        FileType: "code",
        Extention: "sconscript"
    },
    {
        FileType: "code",
        Extention: "sconstruct"
    },
    {
        FileType: "code",
        Extention: "script"
    },
    {
        FileType: "code",
        Extention: "scss"
    },
    {
        FileType: "code",
        Extention: "sgml"
    },
    {
        FileType: "code",
        Extention: "sh"
    },
    {
        FileType: "code",
        Extention: "shtml"
    },
    {
        FileType: "code",
        Extention: "sml"
    },
    {
        FileType: "code",
        Extention: "svn-base"
    },
    {
        FileType: "code",
        Extention: "swift"
    },
    {
        FileType: "code",
        Extention: "sql"
    },
    {
        FileType: "code",
        Extention: "sty"
    },
    {
        FileType: "code",
        Extention: "tcl"
    },
    {
        FileType: "code",
        Extention: "tex"
    },
    {
        FileType: "code",
        Extention: "textile"
    },
    {
        FileType: "code",
        Extention: "tld"
    },
    {
        FileType: "code",
        Extention: "tli"
    },
    {
        FileType: "code",
        Extention: "tmpl"
    },
    {
        FileType: "code",
        Extention: "tpl"
    },
    {
        FileType: "code",
        Extention: "vb"
    },
    {
        FileType: "code",
        Extention: "vi"
    },
    {
        FileType: "code",
        Extention: "vim"
    },
    {
        FileType: "code",
        Extention: "vmg"
    },
    {
        FileType: "code",
        Extention: "webpart"
    },
    {
        FileType: "code",
        Extention: "wsp"
    },
    {
        FileType: "code",
        Extention: "wsdl"
    },
    {
        FileType: "code",
        Extention: "xhtml"
    },
    {
        FileType: "code",
        Extention: "xoml"
    },
    {
        FileType: "code",
        Extention: "xsd"
    },
    {
        FileType: "code",
        Extention: "xslt"
    },
    {
        FileType: "code",
        Extention: "yaml"
    },
    {
        FileType: "code",
        Extention: "yaws"
    },
    {
        FileType: "code",
        Extention: "yml"
    },
    {
        FileType: "code",
        Extention: "zsh"
    },
    {
        FileType: "contact",
        Extention: "vcf"
    },
    {
        FileType: "csv",
        Extention: "csv"
    },
    {
        FileType: "designer",
        Extention: "design"
    },
    {
        FileType: "desktopfolder",
        Extention: "{}"
    },
    {
        FileType: "docset",
        Extention: "{}"
    },
    {
        FileType: "documentsfolder",
        Extention: "{}"
    },
    {
        FileType: "docx",
        Extention: "doc"
    },
    {
        FileType: "docx",
        Extention: "docm"
    },
    {
        FileType: "docx",
        Extention: "docx"
    },
    {
        FileType: "docx",
        Extention: "docb"
    },
    {
        FileType: "dotx",
        Extention: "dot"
    },
    {
        FileType: "dotx",
        Extention: "dotm"
    },
    {
        FileType: "dotx",
        Extention: "dotx"
    },
    {
        FileType: "email",
        Extention: "eml"
    },
    {
        FileType: "email",
        Extention: "msg"
    },
    {
        FileType: "email",
        Extention: "oft"
    },
    {
        FileType: "email",
        Extention: "ost"
    },
    {
        FileType: "email",
        Extention: "pst"
    },
    {
        FileType: "exe",
        Extention: "application"
    },
    {
        FileType: "exe",
        Extention: "appref-ms"
    },
    {
        FileType: "exe",
        Extention: "apk"
    },
    {
        FileType: "exe",
        Extention: "app"
    },
    {
        FileType: "exe",
        Extention: "appx"
    },
    {
        FileType: "exe",
        Extention: "exe"
    },
    {
        FileType: "exe",
        Extention: "ipa"
    },
    {
        FileType: "exe",
        Extention: "msi"
    },
    {
        FileType: "exe",
        Extention: "xap"
    },
    {
        FileType: "favoritesfolder",
        Extention: "{}"
    },
    {
        FileType: "folder",
        Extention: "{}"
    },
    {
        FileType: "font",
        Extention: "ttf"
    },
    {
        FileType: "font",
        Extention: "otf"
    },
    {
        FileType: "font",
        Extention: "woff"
    },
    {
        FileType: "form",
        Extention: "{}"
    },
    {
        FileType: "genericfile",
        Extention: "{}"
    },
    {
        FileType: "html",
        Extention: "htm"
    },
    {
        FileType: "html",
        Extention: "html"
    },
    {
        FileType: "html",
        Extention: "mht"
    },
    {
        FileType: "html",
        Extention: "mhtml"
    },
    {
        FileType: "ipynb",
        Extention: "nnb"
    },
    {
        FileType: "ipynb",
        Extention: "ipynb"
    },
    {
        FileType: "link",
        Extention: "lnk"
    },
    {
        FileType: "link",
        Extention: "link"
    },
    {
        FileType: "link",
        Extention: "url"
    },
    {
        FileType: "link",
        Extention: "website"
    },
    {
        FileType: "link",
        Extention: "webloc"
    },
    {
        FileType: "linkedfolder",
        Extention: "{}"
    },
    {
        FileType: "listitem",
        Extention: "{}"
    },
    {
        FileType: "loop",
        Extention: "fluid"
    },
    {
        FileType: "loop",
        Extention: "loop"
    },
    {
        FileType: "loop",
        Extention: "note"
    },
    {
        FileType: "loopworkspace",
        Extention: "{}"
    },
    {
        FileType: "officescript",
        Extention: "osts"
    },
    {
        FileType: "splist",
        Extention: "{}"
    },
    {
        FileType: "mcworld",
        Extention: "mcworld"
    },
    {
        FileType: "mctemplate",
        Extention: "mctemplate"
    },
    {
        FileType: "model",
        Extention: "3ds"
    },
    {
        FileType: "model",
        Extention: "3mf"
    },
    {
        FileType: "model",
        Extention: "blend"
    },
    {
        FileType: "model",
        Extention: "cool"
    },
    {
        FileType: "model",
        Extention: "dae"
    },
    {
        FileType: "model",
        Extention: "df"
    },
    {
        FileType: "model",
        Extention: "dwfx"
    },
    {
        FileType: "model",
        Extention: "dwg"
    },
    {
        FileType: "model",
        Extention: "dxf"
    },
    {
        FileType: "model",
        Extention: "fbx"
    },
    {
        FileType: "model",
        Extention: "glb"
    },
    {
        FileType: "model",
        Extention: "gltf"
    },
    {
        FileType: "model",
        Extention: "holo"
    },
    {
        FileType: "model",
        Extention: "layer"
    },
    {
        FileType: "model",
        Extention: "layout"
    },
    {
        FileType: "model",
        Extention: "max"
    },
    {
        FileType: "model",
        Extention: "mtl"
    },
    {
        FileType: "model",
        Extention: "obj"
    },
    {
        FileType: "model",
        Extention: "off"
    },
    {
        FileType: "model",
        Extention: "ply"
    },
    {
        FileType: "model",
        Extention: "skp"
    },
    {
        FileType: "model",
        Extention: "stp"
    },
    {
        FileType: "model",
        Extention: "stl"
    },
    {
        FileType: "model",
        Extention: "t"
    },
    {
        FileType: "model",
        Extention: "thl"
    },
    {
        FileType: "model",
        Extention: "x"
    },
    {
        FileType: "mpp",
        Extention: "mpp"
    },
    {
        FileType: "mpt",
        Extention: "mpt"
    },
    {
        FileType: "multiple",
        Extention: "one"
    },
    {
        FileType: "one",
        Extention: "{}"
    },
    {
        FileType: "onetoc",
        Extention: "ms-one-stub"
    },
    {
        FileType: "onetoc",
        Extention: "onetoc"
    },
    {
        FileType: "onetoc",
        Extention: "onetoc2"
    },
    {
        FileType: "onetoc",
        Extention: "onepkg"
    },
    {
        FileType: "pbiapp",
        Extention: "{}"
    },
    {
        FileType: "pdf",
        Extention: "pdf"
    },
    {
        FileType: "photo",
        Extention: "arw"
    },
    {
        FileType: "photo",
        Extention: "bmp"
    },
    {
        FileType: "photo",
        Extention: "cr2"
    },
    {
        FileType: "photo",
        Extention: "crw"
    },
    {
        FileType: "photo",
        Extention: "dic"
    },
    {
        FileType: "photo",
        Extention: "dicm"
    },
    {
        FileType: "photo",
        Extention: "dcm"
    },
    {
        FileType: "photo",
        Extention: "dcm30"
    },
    {
        FileType: "photo",
        Extention: "dcr"
    },
    {
        FileType: "photo",
        Extention: "dds"
    },
    {
        FileType: "photo",
        Extention: "dib"
    },
    {
        FileType: "photo",
        Extention: "dng"
    },
    {
        FileType: "photo",
        Extention: "erf"
    },
    {
        FileType: "photo",
        Extention: "gif"
    },
    {
        FileType: "photo",
        Extention: "heic"
    },
    {
        FileType: "photo",
        Extention: "heif"
    },
    {
        FileType: "photo",
        Extention: "ico"
    },
    {
        FileType: "photo",
        Extention: "jfi"
    },
    {
        FileType: "photo",
        Extention: "jfif"
    },
    {
        FileType: "photo",
        Extention: "jif"
    },
    {
        FileType: "photo",
        Extention: "jpe"
    },
    {
        FileType: "photo",
        Extention: "jpeg"
    },
    {
        FileType: "photo",
        Extention: "jpg"
    },
    {
        FileType: "photo",
        Extention: "jxr"
    },
    {
        FileType: "photo",
        Extention: "kdc"
    },
    {
        FileType: "photo",
        Extention: "mrw"
    },
    {
        FileType: "photo",
        Extention: "nef"
    },
    {
        FileType: "photo",
        Extention: "orf"
    },
    {
        FileType: "photo",
        Extention: "pct"
    },
    {
        FileType: "photo",
        Extention: "pict"
    },
    {
        FileType: "photo",
        Extention: "png"
    },
    {
        FileType: "photo",
        Extention: "pns"
    },
    {
        FileType: "photo",
        Extention: "psb"
    },
    {
        FileType: "photo",
        Extention: "psd"
    },
    {
        FileType: "photo",
        Extention: "raw"
    },
    {
        FileType: "photo",
        Extention: "tga"
    },
    {
        FileType: "photo",
        Extention: "tif"
    },
    {
        FileType: "photo",
        Extention: "tiff"
    },
    {
        FileType: "photo",
        Extention: "wdp"
    },
    {
        FileType: "photo360",
        Extention: "{}"
    },
    {
        FileType: "picturesfolder",
        Extention: "{}"
    },
    {
        FileType: "planner",
        Extention: "{}"
    },
    {
        FileType: "potx",
        Extention: "pot"
    },
    {
        FileType: "potx",
        Extention: "potm"
    },
    {
        FileType: "potx",
        Extention: "potx"
    },
    {
        FileType: "powerbi",
        Extention: "pbids"
    },
    {
        FileType: "powerbi",
        Extention: "pbix"
    },
    {
        FileType: "ppsx",
        Extention: "pps"
    },
    {
        FileType: "ppsx",
        Extention: "ppsm"
    },
    {
        FileType: "ppsx",
        Extention: "ppsx"
    },
    {
        FileType: "pptx",
        Extention: "ppt"
    },
    {
        FileType: "pptx",
        Extention: "pptm"
    },
    {
        FileType: "pptx",
        Extention: "pptx"
    },
    {
        FileType: "pptx",
        Extention: "sldx"
    },
    {
        FileType: "pptx",
        Extention: "sldm"
    },
    {
        FileType: "presentation",
        Extention: "odp"
    },
    {
        FileType: "presentation",
        Extention: "gslides"
    },
    {
        FileType: "presentation",
        Extention: "key"
    },
    {
        FileType: "pub",
        Extention: "pub"
    },
    {
        FileType: "spo",
        Extention: "aspx"
    },
    {
        FileType: "sponews",
        Extention: "{}"
    },
    {
        FileType: "spreadsheet",
        Extention: "odc"
    },
    {
        FileType: "spreadsheet",
        Extention: "ods"
    },
    {
        FileType: "spreadsheet",
        Extention: "gsheet"
    },
    {
        FileType: "spreadsheet",
        Extention: "numbers"
    },
    {
        FileType: "spreadsheet",
        Extention: "tsv"
    },
    {
        FileType: "rtf",
        Extention: "epub"
    },
    {
        FileType: "rtf",
        Extention: "gdoc"
    },
    {
        FileType: "rtf",
        Extention: "odt"
    },
    {
        FileType: "rtf",
        Extention: "rtf"
    },
    {
        FileType: "rtf",
        Extention: "wri"
    },
    {
        FileType: "rtf",
        Extention: "pages"
    },
    {
        FileType: "sharedfolder",
        Extention: "{}"
    },
    {
        FileType: "playlist",
        Extention: "{}"
    },
    {
        FileType: "sway",
        Extention: "{}"
    },
    {
        FileType: "sysfile",
        Extention: "bak"
    },
    {
        FileType: "sysfile",
        Extention: "bin"
    },
    {
        FileType: "sysfile",
        Extention: "cab"
    },
    {
        FileType: "sysfile",
        Extention: "cache"
    },
    {
        FileType: "sysfile",
        Extention: "cat"
    },
    {
        FileType: "sysfile",
        Extention: "cer"
    },
    {
        FileType: "sysfile",
        Extention: "class"
    },
    {
        FileType: "sysfile",
        Extention: "dat"
    },
    {
        FileType: "sysfile",
        Extention: "db"
    },
    {
        FileType: "sysfile",
        Extention: "dbg"
    },
    {
        FileType: "sysfile",
        Extention: "dl_"
    },
    {
        FileType: "sysfile",
        Extention: "dll"
    },
    {
        FileType: "sysfile",
        Extention: "ithmb"
    },
    {
        FileType: "sysfile",
        Extention: "jar"
    },
    {
        FileType: "sysfile",
        Extention: "kb"
    },
    {
        FileType: "sysfile",
        Extention: "ldt"
    },
    {
        FileType: "sysfile",
        Extention: "lrprev"
    },
    {
        FileType: "sysfile",
        Extention: "pkpass"
    },
    {
        FileType: "sysfile",
        Extention: "ppa"
    },
    {
        FileType: "sysfile",
        Extention: "ppam"
    },
    {
        FileType: "sysfile",
        Extention: "pdb"
    },
    {
        FileType: "sysfile",
        Extention: "rom"
    },
    {
        FileType: "sysfile",
        Extention: "thm"
    },
    {
        FileType: "sysfile",
        Extention: "thmx"
    },
    {
        FileType: "sysfile",
        Extention: "vsl"
    },
    {
        FileType: "sysfile",
        Extention: "xla"
    },
    {
        FileType: "sysfile",
        Extention: "xlam"
    },
    {
        FileType: "sysfile",
        Extention: "xlb"
    },
    {
        FileType: "sysfile",
        Extention: "xll"
    },
    {
        FileType: "todoitem",
        Extention: "{}"
    },
    {
        FileType: "txt",
        Extention: "dif"
    },
    {
        FileType: "txt",
        Extention: "diff"
    },
    {
        FileType: "txt",
        Extention: "readme"
    },
    {
        FileType: "txt",
        Extention: "out"
    },
    {
        FileType: "txt",
        Extention: "plist"
    },
    {
        FileType: "txt",
        Extention: "properties"
    },
    {
        FileType: "txt",
        Extention: "text"
    },
    {
        FileType: "txt",
        Extention: "txt"
    },
    {
        FileType: "vaultclosed",
        Extention: "{}"
    },
    {
        FileType: "vaultopen",
        Extention: "{}"
    },
    {
        FileType: "vector",
        Extention: "ai"
    },
    {
        FileType: "vector",
        Extention: "ait"
    },
    {
        FileType: "vector",
        Extention: "cvs"
    },
    {
        FileType: "vector",
        Extention: "dgn"
    },
    {
        FileType: "vector",
        Extention: "gdraw"
    },
    {
        FileType: "vector",
        Extention: "pd"
    },
    {
        FileType: "vector",
        Extention: "emf"
    },
    {
        FileType: "vector",
        Extention: "eps"
    },
    {
        FileType: "vector",
        Extention: "fig"
    },
    {
        FileType: "vector",
        Extention: "ind"
    },
    {
        FileType: "vector",
        Extention: "indd"
    },
    {
        FileType: "vector",
        Extention: "indl"
    },
    {
        FileType: "vector",
        Extention: "indt"
    },
    {
        FileType: "vector",
        Extention: "indb"
    },
    {
        FileType: "vector",
        Extention: "ps"
    },
    {
        FileType: "vector",
        Extention: "svg"
    },
    {
        FileType: "vector",
        Extention: "svgz"
    },
    {
        FileType: "vector",
        Extention: "wmf"
    },
    {
        FileType: "vector",
        Extention: "oxps"
    },
    {
        FileType: "vector",
        Extention: "xps"
    },
    {
        FileType: "vector",
        Extention: "xd"
    },
    {
        FileType: "vector",
        Extention: "sketch"
    },
    {
        FileType: "video",
        Extention: "3g2"
    },
    {
        FileType: "video",
        Extention: "3gp"
    },
    {
        FileType: "video",
        Extention: "3gp2"
    },
    {
        FileType: "video",
        Extention: "3gpp"
    },
    {
        FileType: "video",
        Extention: "asf"
    },
    {
        FileType: "video",
        Extention: "avi"
    },
    {
        FileType: "video",
        Extention: "dvr-ms"
    },
    {
        FileType: "video",
        Extention: "flv"
    },
    {
        FileType: "video",
        Extention: "m1v"
    },
    {
        FileType: "video",
        Extention: "m4v"
    },
    {
        FileType: "video",
        Extention: "mkv"
    },
    {
        FileType: "video",
        Extention: "mod"
    },
    {
        FileType: "video",
        Extention: "mov"
    },
    {
        FileType: "video",
        Extention: "mm4p"
    },
    {
        FileType: "video",
        Extention: "mp2"
    },
    {
        FileType: "video",
        Extention: "mp2v"
    },
    {
        FileType: "video",
        Extention: "mp4"
    },
    {
        FileType: "video",
        Extention: "mp4v"
    },
    {
        FileType: "video",
        Extention: "mpa"
    },
    {
        FileType: "video",
        Extention: "mpe"
    },
    {
        FileType: "video",
        Extention: "mpeg"
    },
    {
        FileType: "video",
        Extention: "mpg"
    },
    {
        FileType: "video",
        Extention: "mpv"
    },
    {
        FileType: "video",
        Extention: "mpv2"
    },
    {
        FileType: "video",
        Extention: "mts"
    },
    {
        FileType: "video",
        Extention: "ogg"
    },
    {
        FileType: "video",
        Extention: "qt"
    },
    {
        FileType: "video",
        Extention: "swf"
    },
    {
        FileType: "video",
        Extention: "ts"
    },
    {
        FileType: "video",
        Extention: "vob"
    },
    {
        FileType: "video",
        Extention: "webm"
    },
    {
        FileType: "video",
        Extention: "wlmp"
    },
    {
        FileType: "video",
        Extention: "wm"
    },
    {
        FileType: "video",
        Extention: "wmv"
    },
    {
        FileType: "video",
        Extention: "wmx"
    },
    {
        FileType: "video360",
        Extention: "{}"
    },
    {
        FileType: "vsdx",
        Extention: "vdx"
    },
    {
        FileType: "vsdx",
        Extention: "vsd"
    },
    {
        FileType: "vsdx",
        Extention: "vsdm"
    },
    {
        FileType: "vsdx",
        Extention: "vsdx"
    },
    {
        FileType: "vsdx",
        Extention: "vsw"
    },
    {
        FileType: "vsdx",
        Extention: "vdw"
    },
    {
        FileType: "vssx",
        Extention: "vss"
    },
    {
        FileType: "vssx",
        Extention: "vssm"
    },
    {
        FileType: "vssx",
        Extention: "vssx"
    },
    {
        FileType: "vstx",
        Extention: "vst"
    },
    {
        FileType: "vstx",
        Extention: "vstm"
    },
    {
        FileType: "vstx",
        Extention: "vstx"
    },
    {
        FileType: "vstx",
        Extention: "vsx"
    },
    {
        FileType: "whiteboard",
        Extention: "whiteboard"
    },
    {
        FileType: "whiteboard",
        Extention: "wbtx"
    },
    {
        FileType: "xlsx",
        Extention: "xlc"
    },
    {
        FileType: "xlsx",
        Extention: "xls"
    },
    {
        FileType: "xlsx",
        Extention: "xlsb"
    },
    {
        FileType: "xlsx",
        Extention: "xlsm"
    },
    {
        FileType: "xlsx",
        Extention: "xlsx"
    },
    {
        FileType: "xlsx",
        Extention: "xlw"
    },
    {
        FileType: "xltx",
        Extention: "xlt"
    },
    {
        FileType: "xltx",
        Extention: "xltm"
    },
    {
        FileType: "xltx",
        Extention: "xltx"
    },
    {
        FileType: "xml",
        Extention: "xaml"
    },
    {
        FileType: "xml",
        Extention: "xml"
    },
    {
        FileType: "xml",
        Extention: "xsl"
    },
    {
        FileType: "xsn",
        Extention: "xsn"
    },
    {
        FileType: "zip",
        Extention: "zip"
    }
);

```

</details>

そしてギャラリーコントロールはコチラ。

```yaml:AttachementControl.Attachments
- galImage:
    Control: Gallery
    Variant: BrowseLayout_Vertical_TwoTextOneImageVariant_ver5.0
    Properties:
      Items: =AttachementControl.Attachments
      WrapCount: =2
      DelayItemLoading: =true
      Layout: =Layout.Vertical
      LoadingSpinner: =LoadingSpinner.Data
      TemplatePadding: =0
      TemplateSize: =104
    Children:
    - lblTitle:
        Control: Text
        Properties:
          Text: =Last(Split(ThisItem.Name,".")).Value
          Height: =27
          Width: =224
          X: =104
          Y: =76
    - lblSubTitle:
        Control: Text
        Properties:
          Size: =18
          Text: =ThisItem.Name
          Weight: ='TextCanvas.Weight'.Semibold
          Height: =76
          Width: =197
          X: =104
    - imgFluent:
        Control: Image
        Properties:
          OnSelect: =Select(Parent)
          Image: |-
            =$"https://static2.sharepointonline.com/files/fabric/assets/item-types/24/{Coalesce(
                LookUp(IconTable,Extention=Last(Split(ThisItem.Name,".")).Value).FileType,
                "genericfile"
            )}.svg"
          Height: =72
          RadiusBottomLeft: =8
          RadiusBottomRight: =8
          RadiusTopLeft: =8
          RadiusTopRight: =8
          Width: =72
          X: =16
          Y: =(Parent.TemplateHeight / 2) - (Self.Height / 2)

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/1cfa165b-f501-e9e6-1a36-45bb6a24c061.png)

`AttachementControl`が、添付ファイルコントロールであり、`Attachments`を垂直ギャラリーのソースとしています。

画像の`Image`プロパティに関数を仕込むことで、アイコンが表現されます。

```plaintext:Image
$"https://static2.sharepointonline.com/files/fabric/assets/item-types/24/{Coalesce(
    LookUp(IconTable,Extention=Last(Split(ThisItem.Name,".")).Value).FileType,
    "genericfile"
)}.svg"
```

#### SharePointのドキュメント ライブラリを再現する
SharePointのドキュメント ライブラリをソースにして、**あたかもSharePointを直接編集できている**感覚は作れそうですね！

そしてギャラリーコントロールのソースを、下記のように設定して

```galDocLib.Items
Filter(ドキュメント,フォルダーである<>true)
```

画像はこのように！
```plaintext:Image
$"https://static2.sharepointonline.com/files/fabric/assets/item-types/24/{Coalesce(
    LookUp(IconTable,Extention=Last(Split(ThisItem.拡張子付きのファイル名,".")).Value).FileType,
    "genericfile"
)}.svg"
```

右側には、モダン コントロールのフォームを入れて、`Items`を`ギャラリーコントロール.Selected`とすると。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/c8e3b337-78f6-beb3-6a0b-51e9c421f90c.png)

**メタ データ編集が捗りそうな予感👀✨！**

# 最後に
非常にクイックにオシャレなコンテンツが使えそうです。

しかし使う場合には、下記の注意書きを読んだうえでご利用ください。

> Fluent UI primarily uses a custom font for its iconography, released under the Microsoft Fabric Assets License. As of Fluent UI React version 8, an SVG-based version of the same icon set is available under the MIT license.
>> [Fluent UI Icons](https://developer.microsoft.com/en-us/fluentui#/styles/web/icons)

それでは、よいPower Lifeを！