jQuery mobileにおけるviewport改変

jQMを使ってLibre10向けのmobile頁を作っていて、

どうもviewport タグを設定するとスマホ/タブレットでズームが出来なくなるのが気になって調べてみた。

[html]
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
</head>
<body>
[/html]

こちらは公式http://jquerymobile.com/demos/1.2.1/docs/about/getting-started.htmlからの引用このままだとuser-scalable=noになって、ズームできないから変えてみようと言うことで

[html]
<meta name="viewport" content="width=device-width, initial-scale=1">を

<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=5">へと変えてみたわけです。
[/html]

しかし、何も起こらない。

chromeの開発者ツールで見てみると

該当部elementが

[html]
<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=5, user-scalable=no, initial-scale=1 ">

になってるんです。
[/html]

どうやらjQuery mobile内で書き換えられてるらしい。

mobileinitで書き換えてみたりしたけれどもうまくいかず、

最終的にviewportの設定をjQuery mobileを読み込んだ後に変更して、うまくいくようになりました。

[html]
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>

追加→<meta name="viewport" content="width=device-width, initial-scale=1"> ←追加

</head>
<body>
[/html]

solr dbのアップデート

さて、最近Libre10の開発中にsolr dbのindexを変更したくなったため、調べてみたところ

Solrではindexのupdateには対応してない!とのことで

reindexingが必要と言うことでした。

仕方ないのでlibre10用のSQLiteのDBにchanged=1としてupdateが必要であるというフラグを立てておいて

indexerの監視時にreindexするようにしました。

これでfqを使ったより高度な検索ができるようになるはず!

Devel::NYTProfによるperlプロファイリング

Libre10の開発をしていて、pdfからjpegを切り出すcgiの速度調査をしたいと思い、
プロファイルについて調べてみました。

調べた結果がこれ
http://search.cpan.org/~timb/Devel-NYTProf/lib/Devel/NYTProf.pm

プロファイル結果をソースコード付きでHTMLにしてくれるのが非常に便利です!

とはいえ、CGIの引数を与えたときの動きを見たかったので、Apacheの該当フォルダのconfに

[bash]
SetEnv NYTPROF "file=/tmp/nytprof.out"
SetEnv PERL5OPT "-d:NYTProf"
[/bash]

を追加、nytprofhtmlで解析して調べるようにしました。

画像縮小処理がscaleよりresizeのほうが早いとか、jpegtranは結構時間かかってるから軽量化せずに

表示させた方が結果的に早いとか、色々わかってとても便利でした。

[参考] : http://perl-hunting.blogspot.jp/2010/01/use-develnytprof-with-cgi-and-apache.html

[注意]

フォルダ内にあるCGIにアクセスする毎に/tmp/nytprof.outが上書きされるので、

テスト環境で実行した方が良いかと思われます。

ImageMagickによるresize高速化

先日からLibre10の開発を進めているわけですが、

Imlib2でImageMagickより3倍高速かつ美しいサムネイル画像の生成

こちらのサイトを参考にImlib2を実装してみたはいいものの、画質が綺麗という噂に惑わされ

ImageMagickを使うことにしました。

とはいえ、先ほどのブログでも言われていたことですが、ImageMagickは処理が遅いと一般に信じられています。

ということで巷にありふれている情報ではありますが、jpegの中に持った縮小済みデータを使って、

ImageMagickのresize高速化をしてみます

[bash]
convert -resize [Width]x[Height] src.jpg dst.jpg から
convert -resize [Width]x[Height] -define jpeg:size=[Width]x[Height] src.jpg dst.jpg
[/bash]

参考はこちら 本当は速いImageMagick: サムネイル画像生成を10倍速くする方法

これでサイズにもよりますが、結構な高速化が期待できます。
ちなみにresize関連のコマンドでscaleやthumbnailがありますが、測ってみたところ最も高速なのはresizeでした。
thumbnailならファイルサイズは下がるはずなので、そことのバランスになりますね。