WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね