PHPでexif情報を削除する(iPod, iPhoneで画像が回転する問題)
iPod, iPhoneで撮影した画像は、特殊なExifがつき、ウェブにアップロードされたときに画像が意図しない方向に回転してしまう。
その場合、(1)exifを削除して、(2)アップロード後に画像を回転することで対応。
(1)exifの削除
これにはimagemagickを使う。
さくらインターネットのレンタルサーバーを利用している場合、コントロールパネルから「PHP設定の編集」でphp.iniにextension = imagick.soを追加。
phpでの呼び出しはsystem関数を利用する。パスは以下の通り:
system("/usr/local/bin/convert -strip $filepath $filepath");
ここでは、ファイル名を変えずに元のファイルにexifをとったファイルを上書きしている。なお、ダブルクォーテーションの中は変数が展開されるので、$filepathにはあらかじめファイル名をいれておく。
(2)ファイルの回転
ファイルの回転にはgdのImageRotateを使う。これのライブラリはさくらでは設定なしに使用出来る。
//ファイル名と回転角度をpostで受け取る
$filepath = htmlspecialchars(@$_POST{"filepath"}, ENT_QUOTES);
$degree = htmlspecialchars(@$_POST{"degree"}, ENT_QUOTES);
//画像を読み込む
$original_image = ImageCreateFromJPEG($filepath);
//画像の回転
$newimage = ImageRotate($original_image, $degree, 0);
//ファイルの上書き保存
imagejpeg($newimage,$filepath,100);
これでファイルが回転した状態で上書き保存される。なお、回転情報はexifではなく、JPEG(JFIF)のヘッダーに保存される模様。
【HP作成】美しいナビゲーションバーが使えるCSSフレームワーク5選
はじめに
CSSフレームワークを使用すると、classプロパティを指定するだけで非常に高度なレイアウト・デザインが可能です。
例えば、CSSフレームワークの1つであるTwitter Bootstrapをダウンロードして、それぞれのhtmlファイルにCSSへのリンクをheader部分に設定します。
【ヘッダーにリンクを記述】
<head>
<link href="./css/bootstrap.css" rel="stylesheet">
</head>
こうすることで、Bootsrap内のスタイルをclassで呼び出せます。実際のナビゲーションはulとliを指定して記述します。
【ナビゲーションのコード】
<ul class="nav">
<li class="active">
<ahref="#">Home</a>
</li>
<li><ahref="#">Link</a></li>
<li><ahref="#">Link</a></li>
</ul>
【サンプル】
非常に単純なコードですが、スタイリッシュなナビゲーションバーができていることがわかります。
ということで、美しいナビゲーションが利用できるCSSフレームワーク5選、まずはbootsrapから。
(1)Twitter Bootsrap
非常に有名なフレームワークでナビゲーション以外にも様々なUIが用意されています。ナビゲーションの具体例はさきほどの例を御覧ください。
(2)Groundwork CSS
カラフルで美しいナビゲーションを提供。フォームやボタンも充実しています。
【サンプル】
【コード】
<nav>
<ul>
<li><a href="#">Example Link</a></li>
<li><a href="#">Example Link</a></li>
</ul>
</nav>
(3)Yaml 4
次にYaml 4。こちらは黒いナビゲーションで重厚な感じがします。
【サンプル】
【コード】
<nav class="ym-hlist">
<ul>
<li class="active"><strong>Active</strong></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
(4)Gumby 2
こちらもデフォルトは黒のナビゲーション。サブメニューはドロップダウンで表示できます。
【サンプル】
【コード】
サブメニューが入っているため長くなっています。
<div class="row navbar pretty" id="nav1">
<!-- Toggle for mobile navigation, targeting the <ul> -->
<a class="toggle" gumby-trigger="#nav1 > .row > ul" href="#"><i class="icon-menu"></i></a>
<h1 class="four columns logo">
<a href="#">
<img src="/img/gumby_mainlogo.png" gumby-retina />
</a>
</h1>
<ul class="eight columns">
<li><a href="#">Features</a></li>
<li>
<a href="#">Documentation</a>
<div class="dropdown">
<ul>
<li><a href="#">The Grid</a></li>
<li><a href="#">UI Kit</a></li>
<li><a href="#">Sass</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Demo</a></li>
</ul>
</div>
</li>
<li><a href="#">Customize</a></li>
</ul>
</div>
(5)Kube
最後にKube。超シンプルなナビゲーションです。
【サンプル】
【コード】
<nav class="nav-h">
<ul>
<li><span>Item 1</span></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</nav>
まとめ
以上、ナビゲーションのあるCSSフレームワークを見てきました。これらをベースに使えば、おしゃれなデザインで簡単にウェブサイトを作れますので、利用してみるとよいでしょう。