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

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

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

Ver3.31の主な変更点

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

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

Ver3.31 : 2019/10/23

  • 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】コメント欄があふれることがある。

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

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

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

背景

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

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

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

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

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

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

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

正攻法

続きを読む

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

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 '/^!/'
「!」マークで始まるコメント(ライセンスコメント)を残します。

2019/06/30(日)adiary Version3.30 リリース情報

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

Ver3.30の主な変更点

アップデートしたadiaryでreStructuredTextを使用する場合、adiary.conf.cgi に設定を追加する必要があります。RST(reST)に直接対応した初のCMSだといいな。

続きを読む

2019/05/31(金)adiary Version3.24 リリース情報

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

Ver3.24の変更点

バグ修正が主です。

  • RSSからのリンクhash(#rss-tm)を除去する際、リロードしないようにしました。
  • はてなブックマークの常時SSL化に伴い、はてなブックマークへのリンクを https に変更。
  • RFC7231に準拠し、リダイレクトを相対パスで出力するよう変更。
  • アルバムにアップロード時の拡張子制約を緩和し、半角英数以外を含むものを許可しました。(Thanks to harata
  • 【conf】<$v.album_allow_ver_ext>の設定を削除
  • 【アルバム】ファイル名に使えない文字の制限を緩和しました。
  • 【Fix】トップページの2ページ目で「前のページ」のリンクが正しくない。(Thanks to sabazo
  • 【Fix】mixiの画像サーバ等、一部のサイトにSSL接続できない。*1
  • 【Fix】body が 0byte の結果を応答するとき、「Content-Length: 0」を送れていなかった。
  • 【Fix/httpd】mime.types をロードする際、コメントも処理していた。
  • 【Fix/httpd】"file?query" 形式のとき、ファイルをロードできない。
  • 【Fix/httpd】拡張子判定時、大文字小文字を区別してしまう。
  • 【Fix/アルバム】ゴミ箱関連のファイル名の挙動がおかしい。
  • 【Fix/アルバム】ファイル名に特殊文字を含む場合の挙動がおかしい時がある。
  • 【Fix/Markdown】「|:---|:---|」のようなテーブルを認識できない。
  • 【Fix/Markdown】通常文字列に「|---|---|」などが続いた場合、テーブルと判定してしまう。

*1 : Net::SSLeayモジュールで、SNIが有効になっていないため。

既知の不具合

  • PostgreSQL/MySQL運用時、外部画像の取り込みが動作しない。