2014年12月26日金曜日

iPhoneやiPadで撮った写真(縦)をCANVASへdrawimageすると、勝手に回転する現象

「input file="type"」でiPhoneやiPadで写真を撮らせてCANVASへ貼り付けると何故か勝手に横向いてる・・・。
という現象があったので、解決方法です。

まず前提として、iPhoneで撮った写真は縦位置だろうが横位置だろうが、横幅の画像として保存されます。
でも、イメージビューワやブラウザ上でIMGタグで貼り付けた状態で見ると正しく縦位置で表示されます。
何故かと言うと、EXIF情報に画像の回転に対する情報が記述されており、
ビューワー等はそれを読み取って自動的に回転させて表示してくれてるわけです。

ですが、CMS等でサーバで処理したりCANVASへ持ってきたりすると、
EXIF情報が失われたりして横向きに表示されてしまいます。

そんな時、PHPでファイルを一時保存しているのであればできる解決方法です。

$image = ImageCreateFromJPEG($filepath);  //保存した画像を複製
$exif = exif_read_data($filepath);    //画像のEXIF情報取得

if( isset($exif['Orientation']) ){
 $orientation = $exif['Orientation'];
 switch($orientation) {
   case 0:#未定義
      break;
   case 1:#通常
      break;
   case 2:#左右反転
      image_flop($image);
      break;
   case 3:#180°回転
      image_rotate($image,180, 0);
      break;
   case 4:#上下反転
      image_Flip($image);
      break;
   case 5:#反時計回りに90°回転 上下反転
      image_rotate($image,270, 0);
      image_flip($image);
      break;
   case 6:#時計回りに90°回転
      image_rotate($image,90, 0);
      break;
   case 7:#時計回りに90°回転 上下反転
      image_rotate($image,90, 0);
      image_flip($image);
      break;
   case 8:#反時計回りに90°回転
      image_rotate($image,270, 0);
      break;
 }
 ImageJPEG($image ,$filepath);
}

まず「exif_read_data($filepath)」で、EXIF情報を読み込みます。
($filepathは相対パスで記述。URLからの絶対パスは不可みたいです)

次に「$exif['Orientation']」で、回転情報を取得します。
Orientationの数値に対して、それぞれの回転や左右反転を設定していきます。
(読み込んでいるfunctionについては下記を参照
 http://www.glic.co.jp/blog/archives/88

最後に「ImageJPEG($image ,$filepath)」で画像を上書き保存して終了です。
(保存先を変えれば複製画像を保存できます。)


これをJSでやろうと思うと「Javascript Load Image」ってプラグインを使えばいいみたいです。
http://am-yu.net/2014/04/11/load-image-js/
https://github.com/blueimp/JavaScript-Load-Image


(参考)
http://blog.diginnovation.com/archives/1104/

2014年12月15日月曜日

モーダルウィンドウで、コンテンツ以外のところをクリックしたらモーダルを非表示にする

以前「要素全体のclickイベントで、クリックした要素の種類で処理をわける」ってのを書いたのですが、 それと似たようでちょっと違う方法。

モーダルウィンドウを表示したあと、コンテンツと閉じるボタンが表示されるとして、 コンテンツエリア以外をクリックしたらモーダルウィンドウを閉じるにはどうすればいいんだろ。 と思っていたんですが、めちゃくちゃ簡単でした。

$('.modal').click(function(){
 if( $('.foo:hover').length == 0 ){
  $('.modal').hide();
 }
});

すごく単純なことなのに悩んでました。。。

2014年12月11日木曜日

bloggerにsyntaxhighlighterいれる方法

自分への備忘録

</head>前に以下挿入
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type='text/css">
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css">

JSに関しては、使うプログラムによって読み込み変える
ここ参考
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

CSSに関しては、色変更できる。 ここ参考
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/

</body>前に以下挿入


実際にコード書くときはこんな感じ

function foo(){
}

GAイベント・ページビューのPUSH

Ajax使ったページやパララックスサイトなんかで、ページは切り替わらないけど、GAタグでそれぞれ計測させたい!って時の実装方法です。

ページビュー送信したいとき

ga('send', 'pageview', {
  'page': 'ページURL',
  'title': 'ページタイトル'
});

イベント送信したいとき

ga('send', 'event', 'Category ', 'Action ', ('Label'), ('Value'));
Categoryには、タグ要素何かを入れます。(例:button)
Actionにはイベントを入れます。(例:click)
Label(省略可)はイベントの分類に使うようです。(例:nav button)
Value(省略可) は・・・いまいちよくわかってません。

実際の使い方はこんな感じ。だと思う
ちなみに、飛び先のURLにページがなくても下層ページビューとしてアナリティクスにカウントされていきます。 (ハッシュの場合はイベント使った方がいいのかな)
$('a#foo').click(function(){
  var target = $(this).attr('href');
  ga('send', 'pageview' , {  'page': target,  'title': '次画面のタイトル' };
  return false;
});
参考
https://developers.google.com/analytics/devguides/collection/analyticsjs/events?hl=ja
https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced#send

フォームデータをAjax(jQuery)でサーバ(PHP)へPOST

フォームデータをjQueryの$.ajaxを使ってPHPへポスト紙、戻り値を取得する方法の備忘録です。

htmlはこんな感じ

javascriptはこんな感じ
$('#foo').submit(function(){
 if(window.FormData) {
  formdata = new FormData($('#foo').get(0));

  $.ajax({
   url: 'example.php',
   type: 'POST',
   data: formdata,
   processData: false,
   contentType: false,
   dataType: 'json',
   success: function( data ) {
    console.log(data);
   }
  });
 } else {
  // IE8用
 }
});

PHPはこんな感じ
 $size[0],
              'height' => $size[1],
              'type' => $type
    );
     
    header('Content-type: text/html');
    echo json_encode($data);
}
?>

FormDataはIE10以上でしか使えないので要注意。
if(window.FormData){}で分けておいて、
elseの方にiframeへ出力させるものを書いておいて、それを引っ張ってくる方法を取るみたいです。

PHPは$dataに入れた連想配列をjson形式で戻しています。
successの後のconsole.log(data)では、
{
“width”:”画像の幅”,
“height”:”画像の高さ”,
“type”:”ファイルタイプ(image/jpeg等)”
}

が返ってきます。
$_FILES[‘file’]の’file’は対象inputのname属性が入ります

参考
http://www.koikikukan.com/archives/2014/09/30-013333.php

iPhone6発売されてからの、スマホのシェアがおもしろい

TechCrunchによく掲載されている「http://www.kantarworldpanel.com/」の国別スマホ利用統計情報ですが、10月のシェアは「Android 48.1%, iOs 48%」になってます。

これが、9月だと
Android 64.5%
iOS 31.3%

発売前の8月だと
Android 70.2%
iOS 27.1%

制作を行う上で、Androidってないがしろにしがちなので、気をつけねばですね。。。

http://www.kantarworldpanel.com/global/smartphone-os-market-share/

facebookのOGPキャッシュクリア

一度facebookにOGPがキャッシュされると、OGPを更新しても反映されずそのまま・・・みたいなことになります。

そんなときは、developer tool の debugger で該当URLを入れてやるとキャッシュがクリアされて更新されたものが表示されます。

https://developers.facebook.com/tools/debug/

もしくは自動でキャッシュクリアできる方法があるようです。
APIの「https://graph.facebook.com/?scrape=true&id=URL」にPOSTメソッドでアクセスすると、再クロールしてくれるんですね(またはデバッガー利用または7日後)。APIアクセスをシステムに組み込みました。

参考
http://web-tan.forum.impressrd.jp/e/2013/12/17/16623

ツイッターカードについて(twitter card)

必須ツイッターアカウント!

ツイッターカードを使うと、ページ内に埋め込んだtweetボタンを押してタイムラインに流れるときに、facebookのように画像なんかもついでに表示してくれます。

まず、OGPタグと同じように、ツイッター用のタグをhead内に追加していきます。
どの種類のカードをいれるかで変わってくるかと思いますが、
詳しくは公式を参考に。
https://dev.twitter.com/ja/cards/overview

タグを追加し終わったら、バリデーターで確認します。
https://cards-dev.twitter.com/validator

次に承認を受けます。
↑上記でプレビューすると、「not whitelisted・・・」みたいなエラーがでるので、その右下あたりにある「Request Approval」をクリックして、もろもろ入力していきます。

承認まで時間かかるかもーみたいな案内が表示されますが、割とすぐ来るっぽいです。(試してみたらすぐきました)

これで完了です。

(参考)
http://netbiz-life.com/archives/3487

facebookのシェアボタンをカスタマイズ

OGPに頼らず、シェアするページの情報をfacebook javascript SDKで入れるにはってのを調べていたら見つかりました。

が、実際には下記のコードで動くは動くんですが、
PCはシェアされたものに画像がつくんですが、
SP(iPhone6)で見てみたら、画像がつかない・・・。
やっぱりシェアとは違うのですね。

https://developers.facebook.com/tools/console/
    $('#share_button').click(function(e){
      e.preventDefault();
      FB.ui({
          method: 'feed',
            name: 'タイトル',
            link: 'link URL',
            picture: 'image URL',
            caption: 'caption',
            description: '中身です。 test'
        });
    });

(参考)
http://stackoverflow.com/questions/6138780/facebook-share-button-and-custom-text
http://fb.dev-plus.jp/column1/column1_7/

画面内に.invisible要素が入ったら、.visibleにリネーム

全然検証してないけど、画面内に入ったら何かするってので、使えないだろうか
 var resizeTimer = false;
 $(window).resize('load', function() {
  if (resizeTimer !== false) { clearTimeout(resizeTimer); }
  resizeTimer = setTimeout(function() {
   winHeight = $(window).height();
  }, 20);
 });
 
 $(window).scroll(function(){
  winScrollTop = $(window).scrollTop();
        $('.invisible').each(function() {
         var itemTtop = $(this).offset().top;
            
            if( winScrollTop + winHeight > itemTtop ) {
                $(this).removeClass('invisible');
                $(this).addClass('visibled');
            }
        });
    });

HTML5 videoタグでの動画のスロー再生(by javascript)

とある案件にて、HTML5のVIDEOタグで再生する動画のコマ送りかスロー再生ができないかという事で調べてみました。

状況としては下記のようです。
【WIN】
IE9・IE10:△
FF:△
Chrome:○

【MAC】
SAFARI:○
Chrome:○

△となっているものは、一応スロー再生はするんだけど、
指示した速度にならない感じです。
(0.1倍速を指定してもそうならない。たぶん0.5倍速均一?)

参考)
http://www.w3schools.com/tags/av_prop_playbackrate.asp
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_prop_playbackrate

要素全体のclickイベントで、クリックした要素の種類で処理をわける

たとえば、モーダルウィンドウなんかを表示して、
「[閉じる]ボタンはあるけど、めんどくさいから画面全体どこクリックしても閉じたいよね。でも、リンクがあるときは消えちゃ困るよね。」

そんなときに、クリックした箇所がだった時だけ閉じない。みたいにする方法

たとえば下記のようなコードがあったとします。

[HTML]


[JS]
$(‘.modal’).click(function(){
  $(this).fadeOut();
});
この場合、「hoge」部分をクリックしても消えちゃう。

なので、JSを下記のように変えてやると回避できます。
[JS]
$(‘.modal’).click(function(e){
  if( !$(e.target).is(‘video’) ){
    $(this).fadeOut();
});
isじゃなくても、hasClassなどでも使えますね

[参考]
http://qiita.com/ituki_b/items/7fc1402df47baf332552

Grunt導入してみた

自動化が叫ばれる昨今、まったくついていけてなかったので、
今日やってみました。
ついでにGrunt導入までの流れをまとめてみました。

http://qiita.com/konnma/items/3837626e18942b8ae9d4

コマンドプロンプト触った事ないから分からない事ばかりですし、
引用ばかりで恐縮ですが、画像最適化までまとめているので、
導入の手助けになればと思います。

PCブラウザで親要素にoverflow:hidden;をしていても、子要素の position:fixed;はマスクされない

この記事にも関連する話ですが、
親要素に「overflow:hidden;」を設定し、
子要素に「position:fixed;」を設定した場合、
親要素のボックスの大きさに対して、子要素がoverflow:hiddenでマスクされそうですが、
PC系ブラウザだとマスクされません。

PCサイトとSPサイト分けている場合はいいですが、
同様に作らなければいけないときは、
JSにて、
SPの時「背景固定用の空divを表示する」
PCの時はそのままー
ってのをやらないといけなさそうですね。

iOSは background-attachment: fixedが効かない

パララックスサイトとかで使うような背景位置を固定する
background-attachment: fixed
ですが、iOSだと効かずに、変に拡大された画像がついてくるだけになります。

そんなときは、空のdivタグを設置してやって、
position: fixed;

を使ってやってくのがいいそうですよ。

さらに、帯のように、高さ100pxでマスクかけたい!!ってときは、
親のdiv要素にoverflow:hidden;でいけます。
[注意]
マスクかけるときは、この記事も読むといいです。

参考:
http://d.hatena.ne.jp/tt_clown/20130819/fixed_background

iPhone6 Plus ( iOS8 ) で、ベーシック認証下で動画(videoタグ)が再生されない

Android端末でvideoタグがベーシック認証下で再生されないのは
なんとなく知っていたんですが、
iOS8からなのか検証はしていませんが、
iPhone6 + iOS8 の組み合わせでも同じく、
ベーシック認証下で動画が再生されなくなってました。

「三角」の再生矢印マークが出るんですが、
タップすると、斜線が表示されて何も表示されない・・・。
他のiPhone達では表示されるので謎な現象でした。

参考
http://case-mobile-design.com/iphone-android-movie/

GoProも独自ドローン開発!

TechCrunch見てると、ドローン情報が多くて面白い。
http://jp.techcrunch.com/2014/11/27/20141126gopro-drones/

360度撮影可能な変身ドローン
http://jp.techcrunch.com/2014/11/13/20141112dji-introduces-the-3300-inspire-1-transforming-drone/

羽ばたきする飛行ドローン
http://jp.techcrunch.com/2014/11/06/20141105bionic-bird/

iPhone,iPad safariでベーシック認証下のページが表示されない

iPhone,iPadのsafariでベーシック認証下のページを閲覧使用した際に、
「何も表示されなーい。てか、そもそもダイアログもでないんだけど・・・」
ってなるのは、safariがID/PWを記憶してる場合に起きるエラーみたい。
safariアプリを一回メモリから削除して、もう一回アプリを起動してやれば、
ベーシック認証の確認ダイアログが出て、ちゃんと表示されます。

参考:
http://www.yuichon.com/2014/03/ipad-safari-basic/

2014年12月10日水曜日

iPadでのアニメーションのチラツキ

スマホ用サイトを構築していたのですが、
突如としてスライダー部分がチラツク現象が起きました。

原因を調べてみると、サイト内のスクロールの動きをなめらかにするために、

-webkit-overflow-scrolling: touch;
-webkit-transform: translateZ(0px);

を入れていたのですが、下の
-webkit-transform: translateZ(0px);
が駄目だったみたい。
GPUアクセラレータ効かせたために、動作が重くなったんですかね?

原因はよくわかってないので、また分かったら追記しますー。

参考:
http://blog.asial.co.jp/iphone/1147