.iphone { position: relative; height: 123.75px; width: 62.5px; border-radius: 8.75px; margin: 12.5px auto; background: -webkit-linear-gradient(-165deg, rgba(255,255,255,0.4), rgba(255,255,255,0.15) 35%, transparent 35%), -webkit-linear-gradient(top, transparent 21.25px, #222222 21.25px, #151515 102.5px, transparent 102.5px), -webkit-linear-gradient(top, #000, #0a0a0a); background-repeat: no-repeat; background-size: 100% 100%, 55px 100%, 100% 100%; background-position: 0 0, 3.75px 0, 0 0; box-shadow: 0 0 0 0.75px black, -10px -32px 0 -30.75px black, 0 0 0 1.25px #a09f9d, 12.25px -32.5px 0.75px -30.75px #777, 11.5px -32.5px 0.5px -30.75px #ddd, 15.5px -27.75px 0 -26.25px #8e8d8b, 15.5px -28px 0 -26.25px #b4b3b1, 15.5px -28.25px 0 -26.25px #666; } .iphone:after { content: ‘▢’; line-height: 11.5px; text-align: center; font-size: 7px; color: #666; position: absolute; width: 11.5px; height: 11.5px; border-radius: 50%; background: white; bottom: 4.5px; left: 25px; border: 0.5px solid #0a0a0a; background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.85), black); box-shadow: -9.75px -102.5px 0 -5.75px #000f31, -9.75px -102.5px 0 -5.5px #0a1c5a, -10px -102.5px 0 -5.25px #0d1216, -10px -102.5px 0 -4.75px #1b191a, -3px -102.5px 0 -5.5px #333, -2px -102.5px 0 -5.5px #333, -1px -102.5px 0 -5.5px #333, -0px -102.5px 0 -5.5px #333, 1px -102.5px 0 -5.5px #333, 2px -102.5px 0 -5.5px #333, 3px -102.5px 0 -5.5px #333, 4px -102.5px 0 -5.5px #333, 5px -102.5px 0 -5.5px #333, 6px -102.5px 0 -5.5px #333, -3px -102.5px 0 -4.5px #0a0a0a, -2.25px -102.5px 0 -4.5px #0a0a0a, -1.5px -102.5px 0 -4.5px #0a0a0a, -0.75px -102.5px 0 -4.5px #0a0a0a, 0px -102.5px 0 -4.5px #0a0a0a, 0.75px -102.5px 0 -4.5px #0a0a0a, 1.5px -102.5px 0 -4.5px #0a0a0a, 2.25px -102.5px 0 -4.5px #0a0a0a, 3px -102.5px 0 -4.5px #0a0a0a, 3.75px -102.5px 0 -4.5px #0a0a0a, 4.5px -102.5px 0 -4.5px #0a0a0a, 5.25px -102.5px 0 -4.5px #0a0a0a, 6px -102.5px 0 -4.5px #0a0a0a; } .iphone:before { position: absolute; content: ‘’; width: 0.5px; height: 29.25px; background: transparent; top: 10px; left: -1.75px; background-image: -webkit-linear-gradient(left, transparent 0px, transparent 0.25px, #7a7879 0.5px), -webkit-linear-gradient(top, #383838 0.25px, #b9b9b9 0.75px, #b9b9b9 2.5px, #383838 4.75px, #b9b9b9 5.75px, transparent 5.75px, transparent 13.25px, #383838 13.25px, #b9b9b9 13.5px, #dadada 14.5px, #383838 15.5px, black 15.5px, black 16.5px, #383838 16.5px, #b9b9b9 16.75px, #dadada 17px, #383838 17.5px, transparent 17.5px, transparent 25px, #383838 25px, #b9b9b9 25.25px, #dadada 26.25px, #383838 27.25px, black 27.25px, black 28.25px, #383838 28.25px, #b9b9b9 28.5px, #dadada 28.75px, #383838 29.25px); } .display { position: absolute; top: 21.75px; left: 2px; width: 56px; height: 80px; margin: 0; padding: auto; background: #fafafa; border: solid 1px #afafaf; font-size: 24px; font-weight: bold; line-height: 78px; text-align: center; vertical-align: middle; } .rotate_90deg { -moz-transform: rotateZ(90deg); -webkit-transform: rotateZ(90deg); -o-transform: rotateZ(90deg); } .rotate_180deg { -moz-transform: rotateZ(180deg); -webkit-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); } .rotate_270deg { -moz-transform: rotateZ(270deg); -webkit-transform: rotateZ(270deg); -o-transform: rotateZ(270deg); } .device_deg_list { margin: 1em auto 2em; padding: 0; background: #ffffff; border: solid 1px #999999; } .device_deg_list th { padding: 2px; background: #d0d0d0; font-weight: bold; } .device_deg_list td { text-align: center; vertical-align: middle; } .device_deg_list td.odd { background: #f0f0f0; } .device_deg_list td.visual { width: 160px; text-align: center; vertical-align: middle; } .device_deg_list td.orientation { min-width: 120px; } .device_deg_list td.resampling { min-width: 200px; } .exif-value{ clear: both; display: block; font-size: 9px; color: #808080; }

先日WordPressでギャラリープラグイン「Nextgen Gallery」を利用してサイトを構築した際に、対処するのに苦労した問題が表題のケースだ。
具体的には、iPhoneやiPadといったiOS系のデバイスで撮影された画像がアップロードされた場合、（iOSに標準搭載された）Safari以外のブラウザでそのアップロード画像を表示すると、意図しない方向に回転されて表示されてしまうという症状。
原因は、iOSで撮影された写真では専用のExif（写真に付与される撮影状態のメタ情報）が付与され、端末を縦方向にして撮影しても、横向きで表示した際に最適化されるようにExifが付与されてしまうのだ。iOS端末で撮影した写真をそのままiOS端末で閲覧する際には端末側でそのExifを自動解釈してくれるので、問題なく表示されるのだが、iOS以外の端末（PCやAndroid端末）などでその画像を表示してしまうと、意図しない方向に回転してしまい、正常な表示が行えないことがあるのだ。
実際には、撮影画像の向きと、アップロード後に他デバイスで表示した場合の向きは、下記のようになっている。

| 6(Rotate 90 CW) | 時計回りに90°回転させる | |

↑

| 8(Rotate 270 CW) | 時計回りに180°回転させる | |

↑

| 3(Rotate 180) | 反時計回りに90°回転させる | |

↑

| 1(Horizontal (normal)) | 回転させない（そのまま表示する） |

※ 対処法はWordPressの「NextGen Gallery」プラグイン（ImageMagick利用時）準拠での補正方法になります。

実際の対応方法としては、画像がアップロードされた際に、上記の表に合わせて、Orientation値に基づいて画像を回転させてしまい、特定デバイスで悪さをしないように、Exif情報も削除してしまうという方法だ。

また、2013年3月25日現在の最新バージョン「NextGen Gallery 1.9.12」のプラグイン内のImageMagickライブラリ「lib/imagemagick.inc.php」には根本的にimagemagickのコマンド部分にバグがあって、convertコマンドが正常に動いていなかった。
具体的には、ImageMagickのコマンドの記述順として、「convert （画像処理コマンド） （オリジナル画像ファイル名） （画像処理後ファイル名）」という書式にてコマンドが実行されないといけないのだが、該当のライブラリ（クラス）での記述順は「convert （オリジナル画像ファイル名） （画像処理コマンド） （画像処理後ファイル名）」となっているのだ。なので、WordPressの管理パネルで画像ライブラリにImageMagickを設定しても画像処理が行われずに登録されたり表示されたりしてしまう次第。
そこで今回は、このコマンドを正常化しつつ、iOSで撮影・アップロードされた画像を全てのクライアントで正常に表示されるように修正してみたので、その手順をナレッジとして残しておく。

まず、「lib/imagemagick.inc.php」の画像回転処理をiOSで撮影された画像向けに最適化する。
[php firstline=“374”] function rotateImage($dir = ‘CW’) { if($dir == ‘CW’){ $angle = 90; }else if($dir == ‘CCW’){ $angle = -90; }else if((int)$dir == 180){ $angle = 180; }else{ $angle = ‘’; } if(!empty($angle)){ if(strpos($this->imageMagickExec, ‘-strip’) === false){ $this->imageMagickExec .= ’ -rotate “’. $angle .’>” ‘; $this->imageMagickExec .= ‘-strip ‘; } } $newWidth = $this->currentDimensions[‘height’]; $newHeight = $this->currentDimensions[‘width’]; $this->currentDimensions[‘width’] = $newWidth; $this->currentDimensions[‘height’] = $newHeight; } [/php] ※ImageMagickの「-strip」オプションは画像のExif情報を削除することができる。

次に、convertコマンドを生成する処理の記述順を修正する。
[php firstline=“584”] function show( $quality = 85, $name = ‘’) { //save the image if we get a filename if( $name != ’’ ) { $args = “{$this->imageMagickBefore} “; $args .= " $this->imageMagickExec $this->imageMagickComp -quality ‘$quality’ “; $args .= escapeshellarg("$this->fileName”); $args .= ’ ’ . escapeshellarg("$name”); //$args = “{$this->imageMagickBefore} ‘$this->fileName’ $this->imageMagickExec $this->imageMagickComp -quality $quality ‘$name’”; $this->execute(‘convert’, $args); //$this->error = true; } else { //return a raw image stream $args = “{$this->imageMagickBefore} $this->imageMagickExec $this->imageMagickComp -quality $quality JPG:- ‘$this->fileName’”; //$args = “{$this->imageMagickBefore} ‘$this->fileName’ $this->imageMagickExec $this->imageMagickComp -quality $quality JPG:-”; $this->execute(‘convert’, $args, true); $this->error = true; } } [/php] これで、iOS端末で撮影された画像もどんなデバイスで見ても正常な向きで表示されるようになる。