Movable TypeでMTLoopを使ってkeyでソートしたときに、10個以上表示させると並びがおかしくなる

Movable Typeで配列を作成して<mt:loop>を「sort_by="key"」でkey順にループしたいときがありました。
<mt:CategorySets id="1">
<mt:SetVar name="undef(arr)">
<mt:SubCategories category="$const_maincategory">
<mt:SetVarBlock name="arr" key="$count"><$MTCategoryLabel$></mt:SetVarBlock>
</mt:SubCategories>
</mt:CategorySets>
<mt:loop name="arr" sort_by="key">
<mt:if name="__first__">
<ul>
</mt:if>
<mt:getVar name="__value__" />
<mt:if name="__last__">
</ul>
</mt:if>
</mt:loop>しかしこれを実行すると、意図した並びになりませんでした。
表示する数が少ない場合は問題ありませんでしたが、10個以上になった場合に、下記のように1番目と2番目の間に10番目や11番目が割り込んできてしまいます。
- 1番目
- 10番目
- 11番目
- 12番目
- 13番目
- 2番目
- 3番目
- 4番目
- …
数字としての「10」ではなく「1と0」としか認識していないようです。
解決方法:先頭に「0」をつける
仕方がないのでkeyが1桁の場合は先頭に「0」をつけるようにしました。
こうすれば「01、02、03…10、11」と正しく並んでくれます。
<mt:CategorySets id="○">
<mt:SetVar name="undef(arr)">
<mt:SetVar name="count" value="0">
<mt:SubCategories category="$const_maincategory">
<mt:if tag="count" like="^\d{1}">
<mt:setVarBlock name="keyCount"><mt:getVar name="count" regex_replace="/^\d{1}/","0$1" /></mt:setVarBlock>
<mt:else>
<mt:setVarBlock name="keyCount"><mt:getVar name="count" /></mt:setVarBlock>
</mt:if>
<mt:SetVarBlock name="arr" key="$keyCount"><$MTCategoryLabel$></mt:SetVarBlock>
<mt:SetVar name="count" op="++">
</mt:SubCategories>
</mt:CategorySets>
<mt:loop name="arr" sort_by="key">
<mt:if name="__first__">
<ul>
</mt:if>
<mt:getVar name="__value__" />
<mt:if name="__last__">
</ul>
</mt:if>
</mt:loop>追加した処理は下記の部分です。
<mt:if>を使って1桁かどうかを確認して、1桁の場合は「regex_replace」で数字の先頭に「0」を追加したものを「keyCount」という変数に入れています。
<mt:if tag="count" like="^\d{1}">
<mt:setVarBlock name="keyCount"><mt:getVar name="count" regex_replace="/^\d{1}/","0$1" /></mt:setVarBlock>
<mt:else>
<mt:setVarBlock name="keyCount"><mt:getVar name="count" /></mt:setVarBlock>
</mt:if>もともと「count」変数をkeyに入れていたのですが、先頭に「0」追加が必要になったのでそれとは別に「keyCount」をつくってそれをkeyに入れるようにしています。
これで意図した順番になります。
- 01番目
- 02番目
- 03番目
- 04番目
- …
- 10番目
- 11番目
- 12番目
- 13番目
ただループしているだけなのに、どうして順番がおかしくなるのか分からず「key」の番号を出力して確認してようやく気がつけました。
100個以上表示させる場合は3桁にする必要がある
とり急ぎ今回の対応をしましたが、これだと今度は100個以上表示させたときに並びがおかしくなってしまいます。
100個も表示させることはないと思いますが、表示させる可能性がある場合は3桁にする必要があります。

Bracket Pair ColorizerでVisual Studio Codeの括弧を色分けして見やすくする
JavaScriptで配列内から特定条件の要素を探す方法
スクロールしてもテーブルヘッダーが追尾するテーブルの作り方
Gitで1行しか変更していないはずのに全行変更した判定になってしまう
思考したり情報整理したい時はMarkdown記法で文章を書き出そう!!Webデザイナーの情報整理術
Visual Studio CodeでSVGをプレビューする拡張機能「SVG Preview」
Visual Studio Codeのエクスプローラー上でファイル・フォルダの複製ができるようになる拡張機能「Duplicate action」
Visual Studio CodeでCSVの編集を見やすく行う拡張機能「Edit csv」
MacでCLIツールをインストールするときに行うターミナルでの「パスを通す」とは一体なにか?
Google Maps APIをローカル開発環境で使用するときの制限設定方法
iTerm2で「Use System Window Restoration Setting」を設定しているとアラートが表示されて機能しない
Google Chromeのサイト内検索(カスタム検索)機能を別のプロファイルに移行する方法
iPadで入力モードを切り替えずに数字や記号をすばやく入力する方法
iPhoneやiPadでYouTubeの再生速度を3倍速や4倍速にする方法
Keynoteで有効にしているはずのフォントが表示されない現象
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Keyboard Maestroの変数基礎
Neovimを使い始める最初の一歩として便利な「LazyVim」
ウェブサイトをmacOSアプリとしてラッピングする「Unite Pro」
Keyboard Maestroの「Macro Debugger」で複雑なマクロのデバッグを行う方法
無料版でも高機能なランチャーアプリ「Raycast」の基本機能と環境設定
OnyXでターミナルを使わずにmacOSの詳細設定を行う
軽量で高速なターミナルエミュレーター「Ghostty」の設定方法
Eagleで実現するクリエイティブ素材の簡単管理
かゆいところに手が届く「Supercharge」でMac環境を便利にカスタマイズする
超軽量なコードエディタ 「Zed」をサブエディタとして活用する