AT4esNote: 6月 2012

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>

2012年6月18日月曜日

Google+のデータをjavascriptで抜いてブログに表示する

Google+の投稿をjavascriptで取得する方法は Google+ の情報をjavascriptで取得する

これをbloggerでやってみる．

気になったのはAPI KEYの隠蔽について．(遮蔽？)
一旦PHPに預けて〜，htaccessで〜，ファイルを外に配置して〜とか色々やっていたが，
Googleサイドでアクセス許可ドメインを設定出来るらしい．
https://code.google.com/apis/console/にアクセスして，API Accessから"Edid allowed referred"．

下のボタンを押すと，Goolge+APIを叩いて，投稿を読み込んで表示．
取り敢えず投稿内容と画像があれば画像を表示．

ここまで出来れば，色々と遊べるようになる．かな？

2012年6月17日日曜日

Google+ の情報をjavascriptで取得する

PHPでGoogle+の投稿を取得する方法ばかりやってきましたが，
ここでは javascript で取得する方法についても書いてみます．

基本的にはPHPの時と一緒で，apiのアドレスにぶん投げるだけです．

 
<html>
<head>
<script type="text/javascript">

 //ページが呼び出された時に同期通信させる
 window.onload = function(){
   
  var httpObj = new XMLHttpRequest();
   
  httpObj.onload = function(){
   document.getElementById("activities").innerHTML = httpObj.responseText;
  };
  
  //GETでapiを叩きます．key については自分で取得したものを入れて下さい．
  httpObj.open("get","https://www.googleapis.com/plus/v1/people/ID番号/activities/public?key=***************&maxResults=2",false);

  //GETなのでnullか空に設定
  httpObj.send("");
  
 }

</script>

</head>
<body>
<div id="activities"></div>
</body>
</html>

ただjsonデータを取り出すだけではアレなので，
更にjsonデータから，投稿内容と画像を取り出すことにすると，こんな感じ．

 

    //データの受け取りの所からプログラムを変更します
    var jsonData = httpObj.responseText;

    //evalで参照
    var data = eval("("+jsonData+")");
    
    //配列みたいに.で参照していく
    var resultData = data.title;
 
　　//取得した投稿数だけforループする処理
    for(var i = 0 ; i < data.items.length ; i++){

      resultData += "<hr>";

      //投稿内容
      resultData += data.items[i].object.content;

      //画像があれば画像をimgタグで囲って出力
      //画像の大きさも取り敢えず半分に調整
      if( null != data.items[i].object.attachments ){
        resultData += "<hr><img src='";
        resultData += data.items[i].object.attachments[0].fullImage.url;
        resultData += "' height='";
        resultData += (data.items[i].object.attachments[0].fullImage.height / 2);
        resultData += "' width='";
        resultData += (data.items[i].object.attachments[0].fullImage.width / 2);
        resultData += "'>";
        }
    }

    //処理が終わったので，resultDataをhtml内に返してあげる．

一気にコード書いてみました．
PHPよりもjavascriptの方が遥かに処理速度が早い・・・

2012年6月16日土曜日

Google+の投稿を取得するその３〜画像編〜

前回の記事 Google+の投稿を取得する　その２で，
画像URLを取得出来るようになったが，画像の向きがおかしくなっている．

https://plus.google.com/106102390858541443310/posts/JafA2EwwDpe

Google+APIで取って来れる情報の中には，画像の種類，縦の長さ，横の長さが格納されているが，
画像の向きはexif情報から抜き出す必要がある．

 
<?php
//exif_read_dataを使って情報を抜き取る
$exif = exif_read_data("https://lh4.googleusercontent.com/-HaywpH9Rzfg/T9nkaP7qSUI/AAAAAAAARC0/KJGPYgoY5aI/s0-d/14%2B-%2B1.jpg");
print_r($exif);

//画像URLには数種類有り，s0-dの部分や，.jpgの拡張子が無いものなどがあるので，
//ifで分けて適切に変更．
?>

 

//細かい情報．この中のOrientationが向きについて．
[ImageWidth] => 1600 [ImageLength] => 1200 
[Make] => SAMSUNG [Model] => SC-03D 
[Orientation] => 8 
[XResolution] => 72/1 [YResolution] => 72/1 
[ResolutionUnit] => 2 [DateTime] => 2012:06:14 21:59:53 
[YCbCrPositioning] => 1 [Exif_IFD_Pointer] => 198

Orientation については，以下の記事を参考にさせて頂いた．
JPEGのExifタグ情報のOrientaionの定義の早見表

画像の回転角度は判明したが，htmlのimgタグには画像を回転させるオプションが無い．
そこで，ヘッダー等の情報を取り外し，画像のデータをピクセル単位で読み込み，並べ替える．

なんてことはしない．（昔はゴリゴリとスクラッチから書いてやってましたけど

イマドキは，javascriptでシャレオツなコードを書くのが良いらしい．

コレを使った．http://code.google.com/p/jqueryrotate/
コードはこんな感じ．

 




<img src="https://lh4.googleusercontent.com/-HaywpH9Rzfg/T9nkaP7qSUI/AAAAAAAARC0/KJGPYgoY5aI/s0-d/14%2B-%2B1.jpg" id='pictUrl' height="300" width="400">

javascriptの動かし方のようにして，javascriptを動かすと，こんな感じ．

取り敢えず，画像の回転を簡単にやってみました．

Google+の投稿を取得する　その２

前回見事にデータの取得に成功した→ Google+の投稿を取得する

ちゃんとデータごとの要素を参照してみる．
（最新の構造はhttps://developers.google.com/+/api/をチェックして下さい）

phpのソースはこんな感じ

 
<?php
//前回取り出したデータを取り出して，表示させてみる．
//（☆なんか激重だったので，ローカルに一度書き出した）


//json_decodeを噛ませて読み込み
$jsonActData = json_decode(file_get_contents("./jsonActData.txt"),true);

foreach ($jsonActData["act"] as $act) {

 //投稿者のタイトル
 print "投稿者タイトル：".$act["title"];
 print "< br >";

 //それぞれの各投稿はitemsの中にある，
 foreach ($act["items"] as $item) {
  print "< br >";

  //投稿URL
  print "ＵＲＬ：".$item["url"]."< br >";

  //投稿で共有機能を使ってない場合
  if(!preg_match("/Reshare/i", $item["title"])){

   //投稿の内容
   print "投稿：".$item["object"]["content"]."< br >";

    
   if(isset($item["object"]["attachments"][0]["objectType"])){
    if( 0 == strcmp("photo", $item["object"]["attachments"][0]["objectType"]) ){
     //投稿データの画像URL
     echo "投稿画像URL：".$item["object"]["attachments"][0]["fullImage"]["url"]."< br >";
      
    }elseif( 0 == strcmp("video", $item["object"]["attachments"][0]["objectType"])){
     //投稿データのビデオURL
     echo "投稿動画URL：".$item["object"]["attachments"][0]["embed"]["url"]."< br >";
    }
   }
  }else{
   //投稿で共有機能を使ってる場合

   //共有したものへのコメント
   print "投稿：".$item["annotation"]."< br >";
  }

  print "";
 }
 print "";
}
?>

取り出した画像URLの終わりに.jpgをつけてimgタグで囲ってみる

画像の大きさをimgタグで弾力的に動的に調節するのは出来ないので，プログラミングサイドで処理する．
画像の向き，画像の大きさ設定についてはまた今度．
誰かが読んでくれてる場合，続く

2012年6月15日金曜日

Google+の投稿を取得する

Google+から情報を取ってくる．
API → 参考
結構昔に書いたコードだが，ちょっとブログのネタが無いので書いてみる．
☆なぜか深夜でも激重だったので，一旦ローカルにデータを書き出すことにした．

用意したのは１つのtxtファイルと１つのPHPプログラム．

 
//テスト用にsampleID.txtファイルにID番号を入れておく
//小室哲哉さんとか，ＡＫＢのひとの．
111212040212155147566
108536765591006886419
105229500895781124316
101423472932208115437
106102390858541443310

コードはこんな感じ．


<?php
require_once "HTTP/Request.php";

//ID番号をテキストファイルから取り出す
$strName = "sampleID";
$array_buff = file("./".trim($strName).".txt");

//jsonデータをまとめるための枠を作る
$arrayWri[] = "{ \"act\" : [";

foreach ($array_buff as $id_num){

 //最新の投稿内容を持ってくる
 $url = "https://www.googleapis.com/plus/v1/people/".trim($id_num)."/activities/public?key=*********&maxResults=2";

 $request = &new HTTP_Request();
 $request->setURL($url);


 $result = $request->sendRequest();
 if (!PEAR::isError($result)) {
  $buff = $request->getResponseBody();

  //配列にポンポコ入れて行く
  $arrayWri[] = $buff;
  $arrayWri[] = ",";

  print_r($buff);
  print "<br>";
 }
}

//最終的にデータを書き出す
array_pop($arrayWri);
$fp = fopen("./jsonActData.txt","w");
fputs($fp , implode("\n",$arrayWri));
//加工分の } を付与する
fputs($fp , "] }\n");
fclose($fp);

?>

このファイルのデータをいじくりまわすと，色々とデータが取れる．
２０１２年現在，ちょいちょい仕様が変わってるので，上記参考をチェックして下さい．
誰かこのブログを読んでいる人が入れば，続く

2012年6月10日日曜日

sqlでデータベースに差分 Insert をしたい時

リレーショナルDB (MySQL, PostgreSQL) などに Insert をしたいが，
主キー（プライマリキー）が重複して入らないとき

Insert ignore into table_name( key_num, item_num ) VALUE( '100', '55' );

なぜか一発でignoreが出てこなかったのでメモしておく

外部のwebページ，webサイトの情報を取得する

表示されるwebデータをプログラム的に引っ張ってくる．

取りあえずPHPでやるのが簡単そうなので，PHPでやってみる．

#1. file_get_contents関数を使う．
*file_exists関数で，まずファイルが存在するか確認しようとしたが，これは他サーバには使えないらしい

sample.php

 
 <?php
  $buff = file_get_contents("http://at4esnote.blogspot.jp/2012/06/webweb.html");
  echo $buff;
?>

このブログのページソースを取ってくる．
単にページが表示されるだけだが，htmlデータを取ってきたということ．

#2. HTTP_Request を使う．
使うには，PEARの一部分であるHTTP_Requestをインストールする必要がある．
install HTTP_Request 　確実にインストールして下さい．(←ここでハマった)

sample2.php

 
<?php
require_once "HTTP/Request.php";
$req =& new HTTP_Request("http://at4esnote.blogspot.jp/2012/06/webweb.html");
if (!PEAR::isError($req->sendRequest())) {
    echo $req->getResponseBody();
}
?>

取りあえず，ここまで．
さらにGoogleで検索をして，その結果を取り出したい！なんてのは
http://www.phppro.jp/school/pear/vol8/1
こちら様のサイトを参考にして，file_put_contents関数と組み合わせればOK.

GET を使って Google検索をする

通信方法と言えば，GETとPOSTがある．
GoogleさんではPOSTを受け付けていないので，GETで投げる必要が有る．

簡単なプログラムで書くと，こんな感じ．

<html>
  <head>
  </head>
  <body>
    
      
      
    
  </body>
</html>

↓検索したい単語を入力して下さい．

fluxflexの使い方

node.jsを走らせたくて無料のサーバ探したところ，
いくつかサービスをやってるところを見つけた．

http://www.heroku.com/
http://www.fluxflex.com/ （ flexflux では無い）

取りあえず，fluxflexを使ってみることにした．

Gitを利用するので，Mac で Git を使えるようにしておく．

取りあえず，なんでもいいからとにかく動かしてみる．

アカウント取得後，まず自分自身で公開鍵を作成する．

ここで，好きな名前でファイルを作成できるが，やらない方がいい．

別の名前をつけて，やってハマったので．
もしハマってしまったら，configファイルを作成して，
IdentityFile などを設定し，参照先を指示する必要がある．

ssh-keygen -t rsa で公開鍵を作成する．

作成した公開鍵.pubを cat やテキストエディタで確認して，

ssh-rsa から　== までをコピーする．

fluxflexの plan & setting から [Public keys]を選択，そこにペーストする．

Projectのsandboxを選択し，Setup から [Git]を選択する．
ご丁寧にやり方が書いてあるので，自分のPCのどこかにフォルダを作り，そこで git clone ~~~ を実行する．
作成されたsandbox~ に移動し，public_html に移動．index.htmlを書き換える．
一番簡単に，bodyタグを閉じてる箇所のすぐ上にコメントを書き込む．

次に git commit ~~ でコミットする．（手持ちの環境を固める）
git push でfluxflex側に押し出す．

Setup画面から，Home画面に戻り，表示されてるURLに移動する．
コメントが下の方に表示されてるのを確認して終わり．

!!! 非常に簡単に環境構築することが出来ます．ですが他人様のサーバです．
!!! 必ず自前の環境でテストしたものを，uploadすることにしましょう．

Git を Mac にインストール ( Leopard OS X10.5 )

想像以上にハマったので，書き残しておく．
OS: Leopard (OSX10.5)
xcode: 3.0

古いMacでの環境構築は，イバラの道であった．
Gitのインストール方法は主に３つ．

Macportsを使う．
Git-osx-installerを使う．
sourceをビルド

上にある程簡単なのだが，問題は xcodeが3.0であることだ．

macports → 失敗

結論から言って，macportsは失敗した．
xcodeが古すぎて，zlibが入らなかった．
zlibを個別に入れても良いが，zlib以外も入らないかもしれない．
Git-osx-installer を使うことにした．

Git-osx-installer → 失敗

git-osx-installer list から，自分自身のMacに対応したものを落とす．
実行する．
落としたファイルに同梱されてるsh set~~~.sh をターミナルから叩いてPATHを通す．
PATHを確認する．→　確認出来ず．
同じような失敗をしてる人がいる．
結局，ソースからビルドするのが堅実らしい．

Xcodeのバージョンを上げることにする

Leopard (10.5) にXcode4を適用する事は出来ない．
そのため，xcode 3.1 など古いバージョンを探してくる必要がある．
こちらのサイトを参考にさせて頂き，バージョンを上げた．
これでmacportsが使えるだろう．

あえてソースからビルドしてみる．

http://kernel.org/pub/software/scm/git/ という所に無いみたいなので．
wget http://git-core.googlecode.com/files/git-1.7.8.4.tar.gz
tar xzvf git-1.7.8.4.tar.gz
cd git-1.7.8.4
./configure
sudo make install

ここまで．
新たに git --version と打ち込んで，インストール確認．

Blogger で javascript

ブロガーでジャバスクリプトを走らせてみる．

方法１．HTMLに直書き

//<![CDATA[

<!--

document.write("Hello World!!");

//-->

//]]>

</script>

実行結果

方法２．外部ファイルを読み込む
Google siteを利用して， .jsファイルをネットに上げる．
今回は以下の内容の test_scripts1.jsファイルを作成した．


function say_hello() {
    window.alert("Hello!");
}

ここで，どこから参照を行うか選ぶ．
壱．テンプレートからHTMLの編集を行い，<head>タグ内に書き込む．
→ 簡単な記述ミスにはエラーを返して教えてくれる
弐．レイアウトからガジェットを追加，HTML/javascript として書き込む．

取りあえずは弐の手段で，
レイアウトに以下の内容でHTML/javascriptガジェットを追加した．
外部ファイルは置いたし，参照するためのスクリプトも置いた．
以下の内容で say_hello を呼び出してみる．
ボタンを押して，say_helloが呼ばれたら動作確認完了．

2012年6月1日金曜日

はじめに

はじめに．

ブログ名：AT4esNote
管理人：atfoure (at4e)
ブログURL：http://at4esnote.blogspot.jp/

・はじめまして！
コンピュータや旅行に関するブログ記事を投稿しています．
twitterはこちら→ http://twitter.com/at4e

このウェブサイトは，私個人のウェブブログであり，
所属する団体等とは一切関係がありません．
また，このサイトを原因に発生した，いかなる損失に対しても責任を負いません．