カテゴリー: WEBサービス

余談ですが・・・こんなHTMLも出力できちゃう！
[html]
<font face="Courier New" size="2">
<font color = "blue">SELECT</font> <font color = "silver">*</font>
<br/><font color = "blue">FROM</font>   <font color = "maroon">tabless</font>
<br/><font color = "blue">WHERE</font>  <font color = "maroon">a</font> <font color = "silver">=</font> <font color = "red">’aaa'</font>
<br/>       <font color = "blue">AND</font> <font color = "maroon">b</font> <font color = "silver">=</font> <font color = "red">’bbb'</font> 
</font>
[/html]
↓↓

SELECT *

FROM   tabless

WHERE  a = ‘aaa’

       AND b = ‘bbb’

2011年7月4日

HTML5で緯度経度測位するサンプル google maps geocode使用

投稿者：isc_blog

HTML5 Demo: geolocation　を見てやってみようと思いました。
で、ボタン押したら・・・的なことを盛りこんでみました。（ちょっとテキトーなのでソースが綺麗じゃないのはご容赦ください）

geocode サンプルはこちら

ソースはこれだっ！
[html]
<meta charset="utf-8">
<title>測位！</title>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var lat = "";
var lng = "";
function success(position)
{
var s = document.querySelector(‘#status’);
if (s.className == ‘success’)
{
return;
}
s.innerHTML = "ここだっ！ちがうかっ！";
s.className = ‘Success’;
var mapcanvas = document.createElement(‘div’);
mapcanvas.id = ‘mapcanvas’;
mapcanvas.style.height = ‘100%’;
mapcanvas.style.width = ‘100%’;
document.querySelector(‘#map’).appendChild(mapcanvas);
lat = position.coords.latitude;
lng = position.coords.longitude;
alert(‘Latitued: ‘+lat);
alert(‘Longitude: ‘+lng);
var url="http://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+lng+"&sensor=false";
alert(‘Google Map API: ‘+url);
//Get Json Request Here
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"You are here!"
});
}
function error(msg)
{
var s = document.querySelector(‘#status’);
s.innerHTML = typeof msg == ‘string’ ? msg : "failed";
s.className = ‘Fail’;
}
//Jquery Code
$(document).ready(function()
{
$("#check").click(function()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(success, error);
}
else
{
error(‘Not supported’); //HTML Support
}
});
});
</script>
<input type=’button’ id=’check’ value=’測位！’/>
<div id="status">読込中・・・</div>
<div id="map"></div>
[/html]
※ソースは文字コードUTF-8で保存してください。

最近はGoogle様のおかげで簡単ですね。

その昔、某携帯用のナビゲーションを開発する仕事があってその際は緯度・経度の計算から地図の描画までスンゴイ計算して～ごにょごにょして～なんとか切り出した画像がこれです・・・的な感じでした。
なつかしい・・・けどたかだか6年前くらいか・・・

2011年6月10日

15秒でHTML5のプロジェクトを始めるテンプレート生成サイト

投稿者：isc_blog

Initializr というサイトで
15秒でHTML5のテンプレート的なコードを生成出来てしまいます！

こんな感じで・・・・

【HTML&CSS】
サンプルページにするとサンプルページのコードがくっついてきます。

【Javascript】
jQueryのminバージョンを付けて！

【Compatibility】※互換性
Modernizr!・・・ってモダンブラウザ的なことだろう・・・　と思う。

【Server Configuration】
サーバーコンフィグ・・・いらない

【Analytics】
いらないかな・・・・

この設定で作った物をダウンロードしたページ・・・

中身のコードはこんな感じ・・・（抜粋）
[html]
<!doctype html>
<!–[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]–>
<!–[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]–>
<!–[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]–>
<!–[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]–>
<!–[if (gt IE 9)|!(IE)]><!–> <html lang="en" class="no-js"> <!–<![endif]–>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

冒頭に[if IE]の嵐がっ！
モダンブラウザ対応した証拠ですね。
No Contentsを選べば手っ取り早い雛形の完成です。

2011年6月7日

Google +1ボタン付けてみました・・・

投稿者：isc_blog

Google +1 ボタン・・・というのが話題になっていました。
正直、知らなかったのですが
概要はこんな感じ・・・　※以下「Google +1 ボタン」より引用

+1 ボタンは「おすすめ」や「要チェック」などの情報を手軽にマークできる機能です。

+1 をクリックすると、あなたのおすすめの情報であることが世界中に公開され、友達や連絡先、ウェブユーザーが検索するときに参考にすることができます。

なるほどぉ～

つづけてこう書かれています。

+1 ボタンの詳細についてはこちら、ウェブにおけるサイトのパーソナライズの詳細についてはこちらをご覧ください。

というわけで詳細を見ました。

そちらにはこんな記述があります。

Google 検索に表示されるコンテンツの関連性を向上させるうえでも役立てられます。

・・・ということは押された数で検索結果表示順位が変わる・・・ということですね。

このブログを構築している「WordPress」には「WP Social Bookmarking Light」というソーシャルブックマークサービス・Twitterボタンなどを表示するプラグインがあり
それを使用しているおかげですんなり「＋１」ボタンが表示されています。
このプラグイン「WP Social Bookmarking Light」オススメです。

通常サイト等でタグを貼る場合は下記のようになります。
[html]
<!– 次のタグを head 要素内または body 終了タグの直前に貼り付けてください –>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
{lang: ‘ja’}
</script>

<!– 次のタグを +1 ボタンを表示する箇所に貼り付けてください –>
<g:plusone></g:plusone>
[/html]

こんなタグを生成出来るページは　↓↓↓
Google ＋１ボタンをウェブサイトに表示

まずは「＋１」ボタンのテストにこの記事の「＋１」を押してみましょう！！さぁどうぞ（笑）

追記・・・・・　2011/06/08
InternetExplorer6,7 では「＋１」ボタンが表示されていないことがわかりました。
うーん、残念。

2011年6月5日

PHP製WebベースのTwitterクライアントを作れる「Wootter」

投稿者：isc_blog

MOONGIFTさんの記事
PHP製Webベース、自分好みのTwitterクライアントを作る「Wootter」
を見てやってみようと思いました。

サイトに行ってみると「スペイン語」・・・
なにがなんだかさっぱりわからないながらも・・・
メニューらしき「Demo/Source」とあったので
まずは「Demo」を押して見ました。

Twitterのアプリ認証画面を経てポップな感じの画面にいつものつぶやき情報が表示されました！