AT4esNote

2012年6月28日木曜日

Javascriptで画像のexif情報を取得してみる

PHPを使ってexif情報を取得し，Javascriptで回転させるコードを過去に書いた．

今度は，javascriptを使って，jpeg画像からexif情報を取得したいと思う．
まずバイナリデータとしてjpg画像を読み取って・・・

なんと，jQuery exif-data-plugin なるものがあるらしい．
これを有り難く利用させて頂き，exif情報を取得してみた．

 

//imgタグを設置
<img src="exifを抜き出したい画像" id="image" exif="true" />

//jQueryを読み込む  
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

//jQuery-exif-data-pluginを読み込む
 <script type="text/javascript" src="*****/jquery.exif.js"></script>


<script type="text/javascript">
<!--
  $("#image").click(function() {
  document.getElementById("ei").innerHTML = $(this).exifPretty();
  });
// -->
</script>
 <div id="ei"></div>

javascriptをimgタグの前に書いてしまってツボにはまってしまった．

imgタグが先に無いと動かなかった・・・

Blogger上で，Google+の画像に対して出来るか試したが，ダメだった．
ドメイン外だから，というのが理由のようだが，
Google+の画像サーバからアクセスを拒否られるとは思わなかった．
images0-focus-opensocial.googleusercontent.com が許可サーバかと思ったが，やはりダメだった．

Google+APIで取れる情報に，画像の向きも入れてくれればいいのに．
強引にでも，iframeの中に入れて・・・というように，面倒な手法が必要そう．
javascriptにこだわらないなら，
PHPのサーバサイドでexif情報を取得，返して貰うのが一番簡単なんじゃないかな・・・

2012年6月27日水曜日

BloggerでTwitter Bootstrap CSSを使ってみる

BloggerでTwitter Bootstrap CSSを使ってみる．

Twitter BootStrap CSSというのは，twitterのようなデザインのCSSのこと．
これを利用する事で，カッコいいデザインのサイトを簡単に作れるようになる．

使い方は簡単．
公式サイトからファイルをダウンロードして，CSSとして読み込むだけ．
例えば，この上のボタンはこんな感じにして，classにボタンの種類を設定している．

 
//ボタンが押されたらCSSをheadに突き刺す
<script type="text/javascript">
<!--

function loadCSS(){
    var bscss = document.createElement("link");
    bscss.rel="stylesheet";
    bscss.href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css";
    bscss.type="text/css";
    document.getElementsByTagName('head')[0].appendChild(bscss);
}

// -->
</script>

//ボタンを実装
<form>
<input class="btn btn-primary" onclick="loadCSS()" type="button" value="  Change CSS !!  " />
</form>

ボタンパーツ以外にも色々とPHPでゴニョゴニョするようなものが，
簡単に実現出来る優れものです．

ちなみにprogress bar プログレスバーはこんな感じ．

2012年6月20日水曜日

jQuery.getを使ってファイルを読み込んでみる

jQuery.getを使って，ファイルを読み込む簡単なコードを書いてみたいと思います．

細かい事はhttp://api.jquery.com/jQuery.get/を参照．

とにかく簡単なプログラムを作ってみた．
同じディレクトリにtest.txtがあるとして，それを読み込む．

 
<html>
<head>

<!-- googleにあるjqueryを参照する -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

</head>
<body>

<!-- javascript code -->
<script type="text/javascript">

  //このページを読み込んだときに実行
  window.onload = function(){

   //jQuery.getを使用．同じディレクトリに存在する test.txt というファイルを読み込む．
   var httpObj = jQuery.get("./test.txt", null, function(){document.getElementById("res").innerHTML = httpObj.responseText;});
  }

</script>

<!-- javascript内で設定した res を参照 -->
<div id="res"></div>
</body>
</html>

2012年6月19日火曜日

Google+の最新の投稿をブログに表示させる

これまで，javascriptでGoogle+の投稿データを取得する方法を記してきました．

これらを利用して，Google+の最新投稿を自動でブログ記事にする方法を考えてみました．
データを取得したら，そのままBloggerに出力させる方法です．

この記事の日時を未来に設定しておけば，トップにGoogle+の最新投稿を表示させ続けられるような．
~~ツイッターをGoogle+に反映させることは出来ないようですが，~~（←出来る？）
このGoogle+取得プログラムをガジェット化しようかなあ・・・

Yuko Oshima

コード的にはこんな感じ

 
//javascript code
<script type="text/javascript">
<!--
  //ページが呼び出された時に同期通信させる
  window.onload = function(){
   
  var httpObj = new XMLHttpRequest();
   
  httpObj.onload = function(){
    var jsonData = httpObj.responseText;
    var data = eval("("+jsonData+")");
    var resultData = data.title; 
    for(var i = 0 ; i < data.items.length ; i++){
      resultData += "<hr>";
      resultData += data.items[i].object.content;
      if( null != data.items[i].object.attachments ){
        var ht = data.items[i].object.attachments[0].fullImage.height / 2;
        var wd = data.items[i].object.attachments[0].fullImage.width / 2;
        if(ht > 800){
          ht = ht/2;
          wd = wd/2;
        }
         resultData += "< br > <img src='";
         resultData += data.items[i].object.attachments[0].fullImage.url;
         resultData += "' height='";
         resultData += ht;
         resultData += "' width='";
         resultData += wd;
         resultData += "'>";
      }
      }
    document.getElementById("GAct").innerHTML = resultData;
  };

  var url = "https://www.googleapis.com/plus/v1/people/Google+のID/activities/public?key=***********&maxResults=1";
  httpObj.open("get",url,false);

  //GETなのでnull設定
  httpObj.send(null);
  
 }
// -->
</script>

//html code
<div id="GAct"></div>