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桁にする必要があります。


Vue.jsのv-forで生成した要素をクリックするたびに、classをトグルで付け外しする方法
Google Maps APIでマップの見た目をカスタマイズする方法
gulp-sass 5の「does not have a default Sass compiler」エラーを解消する
Visual Studio Codeのマルチカーソル機能で文字操作を一括で行う
MacVim-Kaoriyaのインストール方法
WordPressの自動バックグラウンド更新を無効にする方法とその注意点
JavaScriptで簡単にCookie操作ができるライブラリ「js-cookie」
Visual Studio Codeの文字サイズやタブサイズの設定方法
Visual Studio CodeでSVGをプレビューする拡張機能「SVG Preview」
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
AirPodsで片耳を外しても再生が止まらないようにする方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
1Passwordの開発者向け機能(SSH Agent / Environments / 1Password CLI / Developer Watchtower)
Default Folder Xで保存ダイアログ内のファイルリストにフォーカスする方法
Obsidianで整理した知識をAnkiで定着させる方法
Figma × Keyboard Maestroでどこまで効率化できる?
マウス操作の完成度が高いウインドウリサイズアプリ「Magnet」
Macで複数ディスプレイを使っている場合に便利な設定集
AppCleanerでMacアプリを関連ファイルごと完全に削除する
操作に没頭できる!Firefox版 Arcのようなブラウザ「Zen Browser」
chezmoi(シェモア)で始めるdotfiles管理
GitHubの通知を見逃さない!通知に特化したアプリ「Gitify」