まだ重たいCMSをお使いですか？
毎秒1000リクエスト を捌く超高速CMS「adiary」

2019/12/30(月)adiary Version3.32 リリース情報

はてブ数 adiary::リリース

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

Ver3.32の変更点

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

*1 : 過去記事に対しては、ブログ記事の再構築が必要です。

コメント（2件）

2019/10/23(水)adiary Version3.31 リリース情報

はてブ数 adiary::リリース

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

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 荻拓）
  • 他

*1 : 記法のほうは残してあるので、画像ファイルだけ展開すれば使えます。

コメント（8件）

2019/07/05(金)JavaScriptから .png 画像を加工してCSSに適用する

はてブ数 プログラム::JavaScript

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

背景

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

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

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

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

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

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

*1 : Webの表示速度を上げるためにも、ロードファイル数は極力少ないほうが良いわけです。

正攻法

続きを読む

コメント（0件）

2019/07/02(火)ES2015(ES6)をminifyしたいけど、Node.jsに興味はない場合

はてブ数 プログラム::JavaScript

ES2015(ES6)のJavaScriptを minify(compress) したかったときに苦戦したメモ。

JavaScript Compressor

古くから有名でお手軽なYUI Compressorをインストールして、圧縮してみたのですが、謎のエラーが出て困ってしまいました。

Exception in thread "main" java.lang.reflect.InvocationTargetException
        at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
        at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
        at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
        at java.lang.reflect.Method.invoke(Method.java:498)
        at com.yahoo.platform.yui.compressor.Bootstrap.main(Bootstrap.java:21)
Caused by: java.util.MissingResourceException: Can't find bundle for base name org.mozilla.javascript.resources.Messages, locale ja_JP
（以下略）

どうやら調べてみると、YUI CompressorはES6（let/const）に対応していないようです。

2019年にJavaScriptを書くのに「ES2015ではないスクリプトを書く」のは考えられないので、ES2015対応のJavaScript Compressorを探してみました。

Node.js に用はない

色々調べてみてもNode.js関連情報しか出てきません。

「Node.js」に興味はなく、純粋にJavaScriptを圧縮したいだけなのに……。

路頭に迷っていたのですが、Uglify-jsというNode.js関連ツールを使うことで、Node.jsとは関係なく単にJavaScriptを圧縮できることがわかりました。

Wabpackというツールもあるのですが、軽く調べた感じではNode.js専用ツールっぽい感じで、単なるJavaScriptの圧縮ツールとしては使いにくそうでした。

Uglify-es

残念ながらUglify-jsは「Uglifyjs 3 (Ver3)」でもES6には対応していません。超注意点です。

Uglify-jsからフォークされた「Uglify-es」というツールを使います。まずこのツールを入れるために、Node.js用のパッケージマネージャー npm をインストールする必要があります。

今回インストールしたサーバはDebainですが、普通にapt-getすると古いツールが入るため、「Debian9 (stretch) に Node.js をインストールする」を参考にVer10系の Node.js を導入しました。

curl -sL https://deb.nodesource.com/setup_10.x | bash -
apt-get install -y nodejs

これで npm が使用できるようになったので、Uglify-esを導入します。

npm install uglify-es

Makefile

Uglify-js@2、Uglify-js@3、Uglify-esでみんなコマンドラインオプションが違うので、情報を探す際はご注意ください。

参考までに作成したMakefileを晒しておきます。

#
# Makefile for adiary.min.js
#
COMPRESSOR = uglifyjs
OPTIONS    = -c -m --comments '/^!/' --source-map includeSources,filename

OUTPUT	   = ../adiary.min.js
MAP_FILE   = ../adiary.min.map

FILES = \
	01_global-variables.js	\
	10_jquery-ext.js	\
	20_init.js		\
	30_css.js		\
	90_PrefixStorage.js	\
	91_jquery-storage.js

all:  $(OUTPUT)

$(OUTPUT): $(FILES) Makefile
	$(COMPRESSOR) $(OPTIONS) $(FILES) -o $(OUTPUT)
	mv $(OUTPUT).map $(MAP_FILE)
-c
ソースファイルを圧縮します
-m
Mangleします。これをつけたほうが圧縮率が高くなります。
--source-map includeSources,filename
mapファイルを作成します。
--comments '/^!/'
「!」マークで始まるコメント（ライセンスコメント）を残します。

terserになりました

uglify-esは更新が停止し、uglify-esをフォークした terser に乗り換えました。

インストール方法。

# apt-get install npm
# npm install terser -g

使い方は uglifyjs と一緒です。

コメント（0件）