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をトグルで付け外しする方法
Visual Studio Codeの「Debugger for Chrome」でJavaScriptのデバッグを行う
「Dart Sass」「LibSass」「Ruby Sass」などSassの種類や記法に関するまとめ
Nuxt.jsでコンポーネントを作成してコードの共通化を行う|Nuxt.jsの基本
Dart Sassの変数の基本的な使い方|Dart Sass入門
Visual Studio CodeでDart Sassのコンパイルができる拡張機能「DartJS Sass Compiler and Sass Watcher」
scpコマンドでターミナル接続先のリモートファイルをローカルにダウンロードする方法
Google Maps APIでピンをクリックしたときに吹き出しを表示する方法
Google Chromeでinput要素の補完機能を使うと背景に色がついてしまう問題
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
PubSubHubbubを利用してWebサイトの更新をリアルタイムに通知しよう
Macの音量や輝度を「細かく調節」したり「音量を確認しながら調節」する方法
Google Chromeでいま開いているページのQRコード生成方法
iPhoneやiPadのSafariに機能拡張をインストールして、さらに快適なブラウジングを行う
個人ブログにコメント欄は必要なのかどうか
無料版を使っている人は検討する価値あり!MAMP PRO 5で簡単にローカル開発環境を構築・管理する
人前でデモをするための設定や、始める前のチェックリスト
CSS疑似要素(::beforeや::after)のcontent内で改行したり半角スペースを複数入力する方法
MacDownでLaTeX風の記述を使って数式をキレイに表示させる