2013 年 8 月 のアーカイブ

Mac版Safariの開発ツールの表示方法(メモ〜)

2013 年 8 月 28 日 水曜日 by Koh(3,499 views)
 

safari

 

MacのSafariでサイトのソースを見ようと右クリックしたら「ページのソース表示」項目がない事に気づいた。

 

今まで、開発ツール関係は、仕事ではMicrosoft IE、プライベートではGoogle Chromeを主に使っていたため、気づきませんでした。Windwos版Safariに開発ツールがある事は知っていたため、本家のMac版Safariに無いわけがないと、改めて環境設定を見直してみました。

 

やはりありました。

Mac版Safariの開発ツールは標準設定ではOFFになっているのですね。

 

という事で、Mac版Safariでの開発ツールの表示方法をメモ!

Safariの環境設定の詳細を開き、一番下の「メニューバーに”開発”メニューを表示」にチェックを入れる。

safari開発ツール

この設定をすると、メニューバーに開発メニューが追加され、下記の通り右クリックでページのソースを表示させる事も出来るようになります。

 

safari開発ツール

 

開発ツールは、HTML、CSS、JavaScriptに問題がないかを検証したり、Cookieの状態を確認したり、リクエストパラメータを取得したりとかなり便利なツールです。Web開発者だけでなく、サイト運営者には必須ツールですね。

 


 
コメントは受け付けていません。


jQueryのfadeIn・fadeOutメソッドで遊んでみた

2013 年 8 月 25 日 日曜日 by Koh(3,406 views)
  jQuery  

今回はJavaScriptライブラリの「jQuery」のfadeIn・fadeOutメソッドで遊んでみました。fadeIn・fadeOutメソッドでどのようなことが出来るかというと、まずは以下のボタンを押下してください。



※注:PC表示でのみ動きます。


当ブログのヘッダー部分に「Welcome to Koh's WebSite!」というラベルが表示され、消えましたでしょうか?そうです、このような動きをウェブサイトに加える事ができるのです。

 

jQueryライブラリーはhttp://jquery.com/download/よりダウンロードし、<script src="***.js"> </script>で読む込む事により使用可能となります。

 

今回実装したjQueryのソースは以下の通りです。

 
(function($){
  $.doWelcome = function(params) {

    var msglavel = "";
    msglavel += "div id='MessageBox'><p>";
    msglavel += params.message;
    msglavel += "</p></div>";

    $(msglavel).hide().appendTo("body").fadeIn(1500);

    setTimeout(function() {
    $("#MessageBox").fadeOut(function(){
      $(this).remove();
    })},4000);

  }
})(jQuery);

function doMessage(msg) {
  $.doWelcome({
    'message' : msg
  });
}
 

doMessage("Welcome to Koh's WebSite!")でfunctionを呼び出すことでメッセージラベルが表示されます。表示位置や表示スタイルはCSSを使用して調整してください。

 

投稿時点では、一日の初めに当ブログに訪れた際、該当のメッセージが表示されるように設定していまーす。

 
 
コメントは受け付けていません。


HTML5+GoogleMap APIを使って現在地の取得を試してみたよ

2013 年 8 月 18 日 日曜日 by Koh(6,117 views)
  GoogleMaps  

Google Mapの撮影車にであってみたい!

 

今回は、Googleが提供しているAPI(Google Maps JavaScript API v3)を使用したGoogle Mapの表示と、HTML5のGeolocation API を使用した現在地の取得を試してみました。

 

下記サンプルは、端末の位置情報を取得しますので、お試しになる場合は、GPS付きのスマートフォン、もしくはタブレット端末を使用してください。ちなみに、取得した位置情報を再利用することはありませんので、ご心配なく。

 

現在地取得ボタンを押下すると、現在地の地図表示が行われます。お試しください。

 
 

では、最後にソースを以下に添付しておきます。今回もスタイルシート部分は省いています。

 
<style>
#googleMap {
width: 100%;
height: 100%;
}
</style>

<!--
Google Maps API ライブラリーの読み込み
※APIキーは各自で取得してください。
-->
<script src="http://maps.googleapis.com/maps/api/js?key=APIキー&sensor=true"></script>

<script>
// 取得した位置情報をGoogleMapで表示
function positionMap(latitude, longitude) {
var latlng = new google.maps.LatLng(latitude, longitude);
var opt1 = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), opt1);
var opt2 = {
position: latlng
};
var marker = new google.maps.Marker(opt2);
marker.setMap(map);
}

// 位置情報の取得処理
function getPosition() {
navigator.geolocation.getCurrentPosition(getSuc,getErr);
}

// 位置情報が取得できた場合の処理
function getSuc(pos){
var latitude = pos.coords.latitude;
var longitude = pos.coords.longitude;
positionMap(latitude, longitude);
}

// 位置情報が取得できなかった場合の処理
function getErr(err){
alert("お使いの端末では現在地を取得できません。");
}

</script>
<input type="button" value="現在地取得" onclick="getPosition()">
<div id="googleMap"></div>
   
 
コメントは受け付けていません。



Mobile Site Link