adiary開発日誌

Ver3.32のバグ修正リリースです。

ダウンロードはこちらから。

Ver3.33の変更点

• 記事エクスポートの改善。
• 【Fix】アルバムで同じダイアログを2度開けない。
• 【Fix】一部のテーマで、アルバム等のフォルダ階層の表示位置が正しくない。

C97にて、adiary Special Editionが限定配布されます。

• 12/31「南3-ヨ19b」　頒価100円
• 参加団体：adiaryユーザ会
• 内容
  • adiary Ver3.32 C97 Special Edition
  • C97限定配布テーマ「ちえ」収録

ダウンロードはこちらから。

Ver3.32の変更点

• 静的出力時に記事一覧や年月別の記事リストを生成する機能を追加。（Thanks to Hansen）
• タグツリー、コンテンツツリーを一括で閉じるボタンを追加。
• 【スマホ】ドラッグアンドドロップの操作性を改善しました。
• 【Plugin】【ja】カレンダーの祝日（天皇誕生日）を変更しました。
• 【記法】script-deferブロック記法を追加。
• 【記法/Fix】Google画像検索等のURLを変更しました*1。（Thanks to jimba）
• 【Fix】ブログ一覧のテーブル表示でソートカラムを選択すると画面が切り替わる。

ダウンロードはこちらから。

Ver3.31の主な変更点

JavaScriptまわりを1つのファイルにまとめて、adiary.jsとしてminifyしています。同時にCSSまわりも最適化しましたので、ロード時間が更に改善していると思います。

ただ、adiary.jsの根幹に手を加えているため、予期せぬ不具合が発生する可能性があります。安定志向の方はVer3.30をご利用いただければ幸いです。

Ver3.31d : 2019/11/24

• adiary.jsをリファクタリングしました。
  • jQuery等のjsライブラリとまとめて、adiary.min.js に minify しました。
  • テキストボックスのリサイズ等いくつか機能を削除しました。
  • dailogを自作して、jQuery UIへの依存度を下げました。
• テーマ、CSS関連
  • ui-iconをJavaScriptで生成するよう変更（pub-dist/ui-icon/ 画像ファイルを削除）
  • 別で読み込んでいた Lightbox.css を削除し、関連画像のロードも減らしました。
  • Ver2以前との互換のための画像アイコンを削除。*1
• ドロップダウンメニューの内部仕様を更新しました。
  • CSS仕様を整理。
  • JavaScriptを使わず中央等の位置調整するように変更。
  • いくつかのテーマで表示が崩れていた問題を修正。
• Cookie設定時に「httpOnly」と「SameSite=Lax」を設定するようにしました（セキュリティ対策）。
• インポートログをボタンの近くに表示するようにしました。
• 【テーマ】いくつかのテーマで画像を埋め込み等最適化しました。
• 【記法】Ver3.30で削除していたインラインでtargetを指定する記法を再び使用可能にしました。
• 【記法】麻雀記法をより使いやすく拡張しました。
• 【記法】入れ子タグの解釈が間違っていた（後方一致検索をしていた）。
• 【Plugin】設定リセット機能をつけました。
• 【Plugin/des_twitter】管理画面で非表示にしました。
• 【Fix】HTTP.pmのtypoを修正（Thanks to t-hide）
• 【Fix】デザイン編集でタイミングにより二重に初期化してしまうことがある。
• 【Fix】月別記事リストのドロップボックス表示時のリンクが正しくない。（Ver3.20以降）
• 【Fix】記事一覧画面でログインしていない時もメニューへのリンクが出る。
• 【Fix】記事一覧画面から記事の表示/非表示を変更した際、タグ内の記事数が狂う。
• 【Fix】デフォルトブログでソーシャルアイコン等のリンクが正しくない（Thanks to やす）
• 【Fix】【sumomoテーマ】幅480pxのタブレット等で必要な画像が表示されない。
• 【Fix】【sumomoテーマ】タブレット等で表示時に、Viewportの設定に失敗する。
• 【Ver3.31a/Fix】コメント欄があふれることがある。
• 【Ver3.31b/Fix】記事編集画面で、タグを連続で追加できない。
• 【Ver3.31c/Fix】スマホ画面のドロップダウンメニュー動作がおかしい。
• 【Ver3.31d/Fix】【標準記法】（Ver3.30～）エスケープ文字の復元ミスを修正。script環境を修正。（Thanks to 荻拓）
• 他

png画像をJavaScript上で加工して、CSSに適用する方法。

• 背景
• 正攻法
• ファイルを直接加工
• まとめ

背景

adiaryでは、UIアイコン（このサイトだとページ送りやタグ一覧に出ている▼等）を色指定に基づいて動的にロードしています。

仕組みとしては、予め128種類の色の異なる画像アイコンを用意して、指定色にもっとも近い色をロードするという感じになっていますが、いくつか問題があります。

• 画像ファイルを増やすには限界があり近似色になってしまう。
• 1KBにも満たないような小さなファイルをわざわざ別ファイルとしてロードさせるのは嫌。*1

色が固定で良いなら、base64で埋め込むだけの話なのですが……。

.ui-icon {
	background-image:	url('data:image/png;base64,XXXX----XXX=');
}

adiaryはテーマの色をユーザーが自由に変更できるという素敵な機能が付いておりまして、そういうわけにも行きません……。

正攻法

続きを読む