Branberyheag Lab

「12 Elegant, Free & High Quality HTML5+CSS3 Templates」

これを見るとHTML5のシンプルさ、CSS3のデザインの作り込み度の高さを感じられる。もうphotoshopでデザインの作り込みをするっていう作業がなくなるかもしれない。
これは大げさだけど、現実問題おおまかなデザインは、photoshopで、パーツの作り込みはCSS3でっていう時代が来そう。すごいもんだ。

個人ブログのコンセプトを練っているんだけど、HTML5で作ってもいいかもしれないな。。。

twitterでの位置情報をどうやって送信するのか分からなかった。

設定を変えてみたりしたけど、何も変わらなかった。どうしてだろうと思っていろいろと調べてみたところ専用クライアントソフトだと位置情報と一緒に送信できるそうだ。

ちなみに、モバツィは、位置情報の取得ができない。さて、どうしたものかと思って調べてみるとはてなココは、位置情報を送信できるようだ。ツィッタークライアントソフトを作ろうかと思ったけど、そこに時間をかけるよりももっと別のところに時間をかけようと思って止めた。

twitter APIのリファレンスにもあまり詳しくは載っていないようだ。大事なことだから、載せてほしいよね。。。

あるものを作っていて、そのツールがGPSで経緯を取得して、表示するツールでこれをなんとかケータイ版に移植しようかと考え中。PHPでケータイからデータを取得できるらしいので、ライブラリを使って試してみようと思う。

ていうことで、メモ。

• PHPで携帯位置情報を扱うライブラリを僕も作りました
• 携帯GPSの基礎知識たち
• 「Google Static Maps API」を使って携帯でGoogleマップを表示する
• 位置情報を取得してみる

今、スマートフォンで位置情報を取得し、メール投稿する時にGPS情報も送信する、支援ツールを作っている。というかもう完成した。

iPhoneとAndroidで位置情報を取得できるようにして、Google Maps API v3にデータを渡して表示するということをやっているんだけど、前回の方法iPhoneは簡単に取得できる。

Androidも実は、Gears Geolocation APIを使うと案外簡単に位置情報が取得できる。
PCで検証するには、Google Gearがインストールされていないと確認ができないよ。

Geolocation API – Gears API – Google Code

を見ると書いているけど、gears_init.jsを置いて、以下のように記述すると

<pre><pre><script type="text/javascript" src="gears_init.js"></script>
<script type="text/javascript">
var geo = google.gears.factory.create('beta.geolocation');

function updatePosition(position) {
  alert('Current lat/lon is: ' + position.latitude + ',' + position.longitude);
}

function handleError(positionError) {
  alert('Attempt to get location failed: ' + positionError.message);
}

geo.getCurrentPosition(updatePosition, handleError);
</script>

簡単に取得できる。あとは、Google Maps API V3と組み合わせて実装すれば完成。
案外簡単に位置情報が取得ができるから、いいよね。

参考にした記事

Google Maps API V3 と Gears Geolocation API 使って Android のブラウザで現在位置情報を取得する

コミュニティサイトを作って、参加してくれる人もそこそこいるのに、なんで投稿してくれないんだろう・・・って、他のSNS運営者も結構悩んでたりとかしているのかなって思った。

こちらで運営している「すきなばしょ」は、そこそこの人数が方々が登録していただいた。だけど、参加人数の割には、活発な活動をしているコミュニティではないような気がする。これって、運営している側としてはものすごい心配になる。果たして、システムが悪いのかテーマがムズいのか、投稿してユーザーにメリットがないのか、もっと他の理由なのか…いろいろと考えてしまう。

ここで焦るのは、よくないので、気長に待って自分で投稿してなんとか活性化していくのが今できることだと思う。ちょっとずつちょっとずつ手を加えていいサイトにしていくつもりだけど、やはりフィードバック機能を追加して分析したほうが良いのだろうか。

ん～、悩みどころだよな・・・

PHPの勉強がてら、Twitter botを作ってみようと思う。
PHPの基本構文は、頭に叩き込んだ。それとローカルにxamppを入れた。

とりあえず、まとめサイトがあったので、これを参考にして作ってみようかなと思う。

Twitter Botの作り方まとめ
http://wiki.15cc.net/index.php?Twitter%20Bot%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9%E3%81%BE%E3%81%A8%E3%82%81#

これって、まだ仮定の段階だけど、データベースで言葉を覚えさせると案外達者なbotが作れそう。

wordpressの更新情報をJSONPで出力できるらしい。
試してみたら、結構いい感じに出力された。まぁ、別の見せ方で更新情報を出力したいときに役に立ちそう。

dogmap.jpさんのところで解説されていた。

<?php
include_once('./wp-load.php');

// パラメータ取得
$limit = (int) (isset($_GET['limit']) && is_numeric($_GET['limit']) ? $_GET['limit'] : 5 );
$callback = wp_specialchars(attribute_escape(isset($_GET['callback']) ? $_GET['callback'] : 'callback'));
$charset = get_bloginfo('charset');

query_posts("showposts=$limit");		// 最終 $limit エントリ取得のループをつくる
if ( have_posts() ) {
	$out = null;

	// 最終 $limit エントリのタイトル・URL・日付を取得する
	while ( have_posts() ) {
		the_post();
		$out .= ( !empty($out) ? ',' : '');
		$out .= '{';
		$out .= '"title":"' . get_the_title() . '"';
		$out .= ',"link":"' . get_permalink() . '"';
		$out .= ',"pubdate":"' . the_date('Y-m-d H:i:s','','',false) . '"';
		$out .= '}';
	}

	// JSONP 形式で書き出す
	nocache_headers();
	header("Content-Type: application/x-javascript; charset=$charset");
	echo "$callback([$out]);";

} else {
	// 無ければ 404 Not Found を返す
	header("HTTP/1.0 404 Not Found");
	wp_die("404 Not Found");
}
?>

以上のソースコードを記述したファイルをwordpressのルートに配置する。

http://www.exsample.jp/get_archives.php?limit=5&callback=callback

にアクセスすると出力される。Javascriptで、callback関数を指定する。
これで出力されたJSONPを別のHTMLに出力される。

コミュニティサイトで使えると思う。JSON APIとして用意してもいいかもしれない。

参考サイト
WordPress の更新情報を JSONP 形式で出力

いよいよ、ひとりで作っていたポータルサイトがやっと公開できるかなというところまでこぎつけました。
今は、wordpressの使い方のコンテンツを作っているところ。これが終わったらやっと告知ができます。ここまでくるのに何気に長かったな。。

でも、機能追加やgoogle maps apiのバージョンアップやら公開後もしばらくはやることがあるかな。
システム構築ができなくてもポータルサイトができるのは、うれしい。

今回、google maps apiにadsenseを追加できるそうなので、ご紹介。

実装方法としては

function initialize() {
      var map;
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(34.69243868718141,135.19187450408936), 13);
      }

      // Note: replace this publisher ID with your own.
      var publisherID = 'exsample';

      var adsManagerOptions = {
        maxAdsOnMap : 2,
        style: 'adunit',
      };

      adsManager = new GAdsManager(map, publisherID, adsManagerOptions);
      adsManager.enable();
    }

と記述するみたい。

「adsManagerOptions」という変数を宣言をしているけど、ここでadsenseのオプションを制御しているようだ。
だから、いろいろと設定を変更することができるみたい。インスタンス（表現が間違っている？）するときにgoogle mapのオブジェクト指定すれば
あとは自動的に挿入してくれるみたい。

オプションでいろいろと設定できるようで、google maps apiのマニュアルに書いてあった。

var mapOptions = {
googleBarOptions : {
style : "new",
adsOptions: {
client: "partner-google-maps-api",
channel: "<em>AdSense for Search channel</em>",
adsafe: "high",
language: "en"
}
}
}

いろんなところにadsenseが貼れると便利だよね。

Google MapにAdsenseを貼り付けてみた

Google Maps Apiでマネタイズ

Google Maps api リファレンス（英語）

GoogleからJavaScriptアプリ開発ツール「Closure」が出た。

Closureは，JavaScriptコードを高速化／コンパクト化するツール「Closure Compiler」，デバッガ「Closure Inspector」，ライブラリ「Closure Library」，テンプレート「Closure Templates」で構成されているみたい。

今、コミュニティーサイトを構築しているんだけど、それに使ってみようかなと思う。

Google，JavaScriptアプリ開発ツール「Closure」を公開

思いつきというかノリでコミュニティサイトをひとつ構築中。
今回は、wordpressで作ってみようと思ったり、あとはフロント部分を完成させたいので、仮り組しながらあとでデザインエレメントを流し込む作戦でサッサと作ろうと思っている。

AS3からJavascriptをさわってみると、プログラムのスキルがあがっているような感じがする。まだまだ、AS3は、使いこなせてないけどプログラムとして理解はすごい深まった気がする。

ついでだけど、HTML5がとても気になる。
「HTML 5 ― HTML 4 からの変更点」を読んだだけでも、早くさわりたくなってきた。JavascriptでのDOMスクリプティングしても指定しやすくなるかもしれない。今回作っているサイトでどこかで使いたい・・・

ちなみｎCSS3も面白そう。
http://www.thinkit.co.jp/article/48/3/

Flashにはない魅力がまだまだあるな、と思った。