Lycolog

重い腰を上げてadiaryのMarkdownパーサーを脚注記法に対応させたでadiary-extendsのロゴを作ったが、SVGの中の文字をtextで書いていたため環境によってフォントが変わり上手く表示できない問題と、あと微妙に中央寄せになっていない問題があったので、それらを解決することにした。

作業にはInkscape 1.3.2 (091e20e, 2023-11-25, custom)を利用した。かなり古いが昔入れてそのままのやつだろう。

やったこと

1. まずはInkscapeでSVGを開く
   

   

2. 次にtextオブジェクトを選択し、メニューから「パス」を開き、「オブジェクトをパスへ」でパスに変換する。この作業でtextはパスに変換され、環境依存が解除される
   

   

3. 次にはみ出ている「x」の右下の先っちょを削除する。
   背景のrectと「x」が入っているtext2を選択した状態でメニューから「パス」を開き、「分割」する
   

   

4. すると、こんな感じに分割される
   

   

5. はみ出ている「x」の右下の先っちょを選択しDeleteキーを押下して削除する。
   

   

6. 削除してきれいにまとまった図
   

   

7. 最後にメインロゴの「a」を上下左右中央寄せするために「整列と配置」から基準を「ページ」に設定する
   

   

8. 赤枠のボタンを押して左右中央寄せにする
   

   

9. 保存する
10. 出力されたSVGに大量のゴミが入っているので消す。
    具体的にはSVGの表示に関係ないメタ情報や、元のSVGにあったフォントスタイル情報などを根こそぎ消す
    

    

    

できたもの

そして微調整後のPNGロゴとSVGコードが出来た。

<svg
   viewBox="0 0 64 64"
   width="64"
   height="64"
   xmlns="http://www.w3.org/2000/svg">
  <path
     d="m 33.767578,47.558594 c -0.618815,0.0061 -1.26569,0.2028 -1.939453,0.591797 -2.291357,1.322915 -2.73401,3.378215 -1.330078,6.164062 l 6.955078,-4.015625 C 36.35768,48.458753 35.128971,47.545259 33.767578,47.558594 Z"
     fill="#899aff" />
  <path
     d="M 12,0 C 5.3520066,0 0,5.3520066 0,12 v 40 c 0,6.647993 5.3520066,12 12,12 h 40 c 6.647993,0 12,-5.352007 12,-12 v -4.310547 l -3.515625,2.03125 -6.660156,-3.064453 -0.728516,7.330078 -4.681641,2.703125 1.478516,-11.28125 -10.445312,-4.435547 4.925781,-2.84375 6.550781,3.001953 0.703125,-7.189453 4.695313,-2.710937 L 54.828125,42.394531 64,46.269531 V 12 C 64,5.3520066 58.647993,0 52,0 Z m 23.636719,43.931641 c 2.516946,0.111435 4.679689,1.732138 6.486328,4.861328 l 0.84375,1.460937 -11.109375,6.414063 c 1.99292,3.035172 4.679592,3.57617 8.0625,1.623047 1.768133,-1.020833 3.176063,-2.687757 4.222656,-5 l 0.148438,-0.08594 2.078125,3.599609 c -1.651207,2.035856 -3.409979,3.593752 -5.277344,4.671875 -2.940875,1.697915 -5.58565,2.292801 -7.935547,1.785157 -2.349897,-0.507645 -4.285809,-2.078733 -5.806641,-4.712891 -1.510415,-2.616116 -1.967927,-5.094297 -1.371093,-7.435547 0.591625,-2.350271 2.17313,-4.267579 4.74414,-5.751953 1.765878,-1.01953 3.403895,-1.496549 4.914063,-1.429687 z"
     fill="#899aff" />
  <path
     d="m 50.067085,46.621735 -9.386449,1.655084 -0.819402,-4.647062 q -3.682702,4.488942 -6.228128,5.889732 -2.509225,1.426138 -5.555974,1.963362 -4.677837,0.824829 -8.287158,-1.648494 -3.614749,-2.504099 -4.455857,-7.274261 -1.063595,-6.031948 2.912289,-9.937943 4.006658,-3.911423 18.489236,-7.258394 L 36.56742,24.409727 q -0.591489,-3.354502 -3.165531,-4.455501 -2.574042,-1.100999 -7.898159,-0.162213 -3.631478,0.640327 -9.913646,4.60393 l -0.338528,0.05969 -1.318641,-7.478384 q 6.835972,-2.982363 12.621718,-4.002546 9.017146,-1.589966 13.533445,0.628236 4.541649,2.182001 5.659509,8.521701 z M 39.150362,39.5982 37.565822,30.61183 q -9.158461,2.408185 -11.209774,4.451688 -2.05674,2.012727 -1.552075,4.874824 0.537224,3.046749 2.379945,3.959379 1.842722,0.91263 5.320324,0.299434 3.662254,-0.645754 6.64612,-4.598955 z"
     fill="#ffffff" />
  <path
     d="m 35.636719,43.931639 c -1.510168,-0.06686 -3.148185,0.410157 -4.914063,1.429687 -2.57101,1.484374 -4.152515,3.401682 -4.74414,5.751954 -0.596834,2.34125 -0.139322,4.819431 1.371093,7.435547 1.520832,2.634159 3.456744,4.205247 5.806641,4.712892 2.349897,0.507644 4.994672,-0.08724 7.935547,-1.785157 1.867365,-1.078123 3.626137,-2.63602 5.277344,-4.671876 l -2.078125,-3.599609 -0.148438,0.08594 c -1.046593,2.312243 -2.454523,3.979167 -4.222656,5 -3.382908,1.953124 -6.06958,1.412126 -8.0625,-1.623047 l 11.109375,-6.414063 -0.84375,-1.460938 c -1.806639,-3.12919 -3.969382,-4.749893 -6.486328,-4.861328 z m -1.869141,3.626953 c 1.361393,-0.01333 2.590102,0.900159 3.685547,2.740235 l -6.955078,4.015625 c -1.403932,-2.785847 -0.961279,-4.841148 1.330078,-6.164063 0.673763,-0.388997 1.320638,-0.585736 1.939453,-0.591797 z"
     fill="#001382" />
  <path
     d="m 64,46.269531 -9.171875,-3.875 1.494141,-11.164062 -4.695313,2.710937 -0.703125,7.189453 -6.550781,-3.001953 -4.925781,2.84375 10.445312,4.435547 -1.478516,11.28125 4.681641,-2.703125 0.728516,-7.330078 6.660156,3.064453 L 64,47.689453 Z"
     fill="#001382" />
</svg>

以前のtextだった時のものと比べるとパスデータになった関係でだいぶコードが増えているが、やむを得ない。以下は以前のSVGコード。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
  <rect x="0" y="0" width="64" height="64" rx="12" ry="12" fill="#899aff"></rect>
  <text x="18" y="52" transform="rotate(-10, 25, 62)" font-family="Meiryo, serif" font-size="64" font-weight="bold" fill="#fff">
    a
  </text>
  <text x="25" y="55" transform="rotate(-30, 50, 50)" font-family="Meiryo, serif" font-size="32" font-weight="bold" fill="#001382">
    ex
  </text>
</svg>

この記事はadiary改造シリーズ三本目である。

今回はadiaryの私的改造版であるadiary-extendsを0.11.5から0.12.0にバージョンアップした。

何をしたかというと、adiaryを採用したいが…で導入検討以来ずっと懸念事項だったMarkdownの脚注書式に対応した。なんと二年越し。なおまともな動作確認はしていないので、ちゃんと動くかは不明だ。とはいえ、軽く見た感じとりあえず動いてそうなので、いったん対応したということにしておく。

現状では脚注に書いたMarkdownはパースされないのでそのまま出てくるが、今のところ仕様。そのうち直す。多分。

何故やったか？

ミンゲイインターネットの紹介を書くにあたり、古のサイト探究～駄文同盟のID上位100サイトを巡り、今までのネット人生や自サイトの過去を振り返ってみるをリンクしたかったのだが、この記事には破綻した脚注記法が使われており、まさか他のサイトの紹介記事を書くのにこんな状態があってはならないだろうと思い着手した。

どうやったか？

Claude Opus 4.5に9割書いてもらった。

というのもadiaryのコードはPerlで実装されてあり、私はPerlに疎い部分もあるし、パーサー系のコードの理解が難しいためだ。

過去にGPT4やClaude Sonnet 3.5などにトライさせたことはあるのだが、余りにも出てくるコードが使い物にならず、当時は諦めていた。しかしOpus 4.5は極めて性能がいいので、ひょっとしたら今なら行けるのでは！？と思い試してみたところ、大まかには上手くいったので、実装することが出来た。

勿論コピペ実装できる代物ではなかったので、細かいところは手直ししている。

Opus 4.5に任せた流れ

キャプチャでアレだが、こんな感じで出してもらった。最初投げつけてるのはlib/Satsuki/TextParser/Markdown.pmそのものを渡している。

行が破綻していたり、前後の行にあるコードが正しくなく、リンク処理に[]が食われた後に脚注の[]をしようとして失敗したり、正規表現が微妙に間違っていたり、余計なフラグがあったりしたので、そういうのは適当に直している。

あとがき

GitHubのWikiに改造内容をまとめているが、割とそこそこ改造したと思う。

素のadiaryより格段に使いやすくなった。とはいえ、まだ足りないところは多いし、adiaryを保守するのも大変なので、そのうちフルスクラッチで作り直したいところだ。こうやってadiaryに手入れしている現状、その日がいつ来るのかは謎だが…。

ついでにロゴもSVGとPNGで作ってみた。adiaryのオリジナルロゴの改変だが、SVGの書式をMDNで引いて細かいことはOpus 4.5に聞きつつ、手書きしたものだ。

GitHubのリンクは消えるかもしれないので、現時点の版も置いておく。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
  <rect x="0" y="0" width="64" height="64" rx="12" ry="12" fill="#899aff"></rect>
  <text x="18" y="52" transform="rotate(-10, 25, 62)" font-family="Meiryo, serif" font-size="64" font-weight="bold" fill="#fff">
    a
  </text>
  <text x="25" y="55" transform="rotate(-30, 50, 50)" font-family="Meiryo, serif" font-size="32" font-weight="bold" fill="#001382">
    ex
  </text>
</svg>

SVGをPNGに落とすのにはSVG to PNG / ものおきを利用させていただいた。縁のアンチエイリアスや透過情報がきちんと保たれていて、非常に便利だった。

関連記事

過去のadiary改造シリーズの記事。

• CMSをadiaryに変えてよかったこと
  • コピペによる画像添付に対応した話
• adiaryを地味に改修している話
  • 去年やった改造の全般的な話

確認環境

MantisBT 2.27.1

課題

要約が先頭になく見づらいことや、不要な項目があることがあり、これをどうにかしたかった。

やり方

MantisBTにログインし、画面右上のアカウントメニューからアカウント設定を開く。

表示項目管理というのがあるので、課題一覧の表示項目を適当にいじる。

例えばこうする。

すると、列の順序や表示列を変えることができる。

確認環境

OpenWeb UI v0.6.42

事象

モデル一覧にはdeepseek-r1:32bがあるが

チャットには出てこず、選択できない状態。

この状態でdeepseek-r1:14bを入れるとdeepseek-r1:32bが出てきたりする。

解決した方法

管理者設定のモデルから右上の歯車の設定を開き、「すべてのモデルをリセット」ボタンを押し、リセットすると表示されるようになった。

恐らく過去にpoe.com経由で使ったときにOFFにした設定が残骸として残っていて、競合していたのかもしれない。

ffmpegを使ってMP4などの動画からgifを作る方法。

スクリーンレコーダーなどで画面の録画をとってGitHubとかに載せたいけど動画よりGifみたいにパッと見れる方式がいいとか、そういうユースケース。

音声を抜けばMP4のほうが軽かったりするので、容量上の利点はないが、動画と違ってプレイヤーがなく、プレーンに見れるのはメリットだと思う。

またGIFを作ったことがある人なら知っていると思うがGIFは保存方法で画質がかなり変わる、そのため今回はいくつかの方法も比較していく。

• 元の動画
• やり方
  • 単にGIFに落とす
  • 綺麗なGIFに落とす
  • 画質と容量を両立させる
• おまけ
  • APNGに落とす
  • 音声を抜いたMP4にする
• 参考

元の動画

やり方

ループ再生させるために-plays 0を付けているが、単にGIFに落とすだけであれば、このオプションはなくていい。

単にGIFに落とす

もっとも単純な方法で、保存時の容量も1,279,855byteと小さくなるが、画質が荒くなる欠点がある。

ffmpeg -i input.mp4 -plays 0 output.gif

綺麗なGIFに落とす

非常に綺麗なGIFが出来るが、24,186,455byteと、非常にサイズが大きくなる欠点がある。

ffmpeg -i input.mp4 -filter_complex "[0:v] split [a][b];[a] palettegen=stats_mode=single [p];[b][p] paletteuse=new=1" -plays 0 output.gif

画質と容量を両立させる

サイズが3,749,739byteと、1/7ほどのサイズまで圧縮できているが、画質も悪くない。これがいい感じの落としどころだと思う。

ffmpeg -i input.mp4 -filter_complex "[0:v] split [a][b];[a] palettegen=stats_mode=single [p];[b][p] paletteuse=dither=none" -plays 0 output.gif

おまけ

APNGに落とす

画質はいいが、ファイルサイズが26,110,504byteと大きくなりすぎる。劣化なしでやりたい場合くらいしか選択肢に挙がらないだろう。

ffmpeg -i input.mp4 -plays 0 output.apng

音声を抜いたMP4にする

ビデオフレームを複製し、オーディオを落としたMP4にする方法。ファイルサイズが2,019,647byteと小さく、元の画質を維持できるため、動画であることを許容できるならこれが一番無難だ。

ffmpeg -i input.mp4 -c:v copy -an output.mp4

参考

• ffmpegでとにかく綺麗なGIFを作りたい - qiita.com