2014/11/28

exif-js と ios-imagefile-megapixel でスマホからの画像アップロードのプレビュー表示に対応する

画像アップロードするときにプレビュー欲しいよね〜
プレビューするとたまに画像が回転されてるよね〜
スマホだと画像選択するアプリで EXIF 情報を見て回転させて表示しているから
プレビューが横向きとかになってておかしいと思われがちだよね〜

そんな問題を解決するのが exif-js です。

exif-js

jseidelin/exif-js

使い方は https://github.com/jseidelin/exif-js/blob/master/example/index.html を見てください。
例えば、アップロードされたファイルに対して Orientation を取得する場合は以下のように記述します。
$('#jsFileInput').on("change",function(){
    var file = $(this).prop("files")[0];
    EXIF.getData(file, function(){
        var orientation = file.exifdata.Orientation;
    });
});
EXIF 情報を取得するメソッドが提供されていて、
EXIF.getTag(file, "Orientation") で Orientation を取得できるようだけど
取得できないこともあるみたい?で file.exifdata.Orientation で直接取得してしまっています。
よくわからないので動作確認してもらえればと思います。

さて Orientation は取れましたが、どうやって画像を回転しましょう。
そんな時は megapix-image.js が便利でした。

megapix-image.js

stomita/ios-imagefile-megapixel

iOS とか入っていますが気にしなくても大丈夫です。
megapix-image.js は大きな画像を表示する際に便利なライブラリですが、
回転もやってくれるので表示は全部任せてしまいましょう。
スマホからだと数 MB 〜 十数 MB の画像が平気でアップロードされるので
普通にプレビューさせようとするとブラウザごとメモリ不足で落ちることがあるのでが
megapix-image.js を使えば、そういったことが少なくなります。
(※直接は見たことないが、画面が真っ暗になるなどの報告を受けたことがあるので銀の弾丸ではない?)

さきほどの exif-js と組み合わせて使うには以下のようにします。
$('#jsFileInput').on("change",function(){
    var file = $(this).prop("files")[0];
    EXIF.getData(file, function(){
        var orientation = file.exifdata.Orientation;
        var mpImg = new MegaPixImage(file);
        mpImg.render($("#jsPreviewImage")[0], { orientation: orientation });
    });
});

まとめ

これで回転している大きな画像をプレビュー表示することができるようになったと思います。
まれに表示できないこともあるらしいので、もっと良い方法があれば教えて下さい。
2014/11/27

jquery.transform.js で CSS3 の transform をアニメーションさせる

要素を CSS3 の transform で移動・回転・拡大縮小などさせつつ、
アニメーションもさせたい場合に便利な jQuery プラグインを紹介します。

jquery.transform.js

eenox/jQuery-3D-transform

このプラグインは指定の面倒な transform 属性を簡単に指定できるようにします。
transform 属性については transform-CSS3リファレンス を参照して下さい。
transform 属性は各種変換関数をスペース区切りで指定しなくてはならないので面倒でしたが、
普通の CSS の属性を扱うように transform 属性の関数を扱うことができます。
$(".transform").css({
    "top": top1,
    "left": left1,
    "opacity": "0",
    "rotate": rotate1 + "deg",
    "scale": "2, 2"
  }).animate({
    "top": top2,
    "left": left2,
    "opacity": "1",
    "rotate": rotate2 + "deg",
    "scale": "1, 1"
  }, 2000, 'swing');

transform 属性を上記のように簡単に扱えるというだけで
アニメーションさせなくても使いたい jQuery プラグインです。

参考

jQueryアニメーションでCSS3のTransformを操作して拡大縮小/回転などを実装させるいろいろ | BlackFlag
2014/11/19

さくらのVPSにスタードメインで取得した独自ドメインを設定してみた

さくらののVPSにスタードメインで取得した独自ドメインの設定してみました。
個人でVPSを借りて遊ぶのには hosts ファイル書き換えで十分でしたが、
サイトを他の人にも見せることになったので
IP でアクセスしてもらうのもカッコがつかないなぁ、ということでドメインを取得しました。
安くて Twitter などでも評判が良く、Whois情報公開代行も無料で行ってくれるスタードメインにしました。

さくらのVPS

コントロールパネルにログイン

さくらのVPSコントロールパネルにログインし、左メニューにある「ネームサーバ登録」をクリックします。

「さくらインターネットの会員メニュー」ログインページに移動します。

「会員ID」「パスワード」を入力し、「ログイン(認証)」をクリックします。

新しいネームサーバの登録

ページの下の方に「新しいネームサーバの登録」があります。

設定する「ドメイン名」を入力し、「送信する」をクリックします。

ゾーンの追加が実施されるので、ゾーンの初期設定をするために「ドメインメニューへ」をクリックします。

ドメイン名の一覧が表示されるので、設定するドメインの「ゾーン編集」をクリックします。

簡単設定の項目の「サーバのIPアドレス」にVPSのIPアドレスを入力し、「送信する」をクリックします。

さくらインターネットのネームサーバ

設定したドメインの情報が表示されます。

先ほど入力したIPアドレスは、「Aレコード」に追加されています。
ネームサーバーの情報(タイプが NS のもの)は、
スタードメイン側に登録するのでページは閉じないでおきましょう。

スタードメイン

「さくらのネームサーバ」を利用するように設定したので、
スタードメイン側から「さくらのネームサーバ」を参照するように設定します。

スタードメインを運営している NetOwl の管理ページから
「スタードメイン管理」の「管理ドメイン一覧」を開いて「ドメイン管理ツール」をクリックします。

「ネームサーバの確認・変更」をクリックします。

ネームサーバにさくらのVPSのネームサーバーの情報を入力して保存します。

ドメイン設定完了

数時間くらいすれば名前解決されてドメインでアクセスすれば
さくらのVPS側にアクセスできるようになります。

DNS逆引きレコード変更

DNS逆引きは IP アドレスからドメイン名を取得することで、
DNS逆引きレコードが設定してあれば取得できる。
DNS逆引きレコードが設定してあると
どこの馬の骨かもわからないサーバではない(※自称)と宣言できるので
設定しておくといいかもね(※ただし必須ではない)というくらいのノリっぽいです。

以下を参考に設定しました。
DNS逆引きレコードを変更する|さくらのVPS|さくらインターネット公式サポートサイト

設定すると nslookup IP.ADD.RE.SS で設定したドメイン名が取得できます。

参考

さくらのVPSに独自ドメインを設定してみた - VPS比較 - Webkaru

タグ(RSS)