ラベル javascript の投稿を表示しています。すべての投稿を表示

2015年12月14日月曜日

Google AJAX Feed APIとは

こんにちは山田です。

今年の東京は12月なのに24度を超える日がありました。
11年ぶりだそうです。
とても暖かくて半袖でも外出できそうです。

さて本題に入るのですが、
外部サイトが配信しているニュースを自分のサイト内で受けとって表示できないかと画策していたら、その方法の一つとして
統一された規格のRSSというものがあるとわかりました。

（一時期はRSSが人気だったようなのですが、
近年はサービス終了も目立っている印象ですね。）

今回はRSSについて調べて見ました。

■RSSとは
「Rich Site Summary（リッチ・サイト・サマリー）」の略で、主にWebサイトの更新情報を公開することを目的に使われています。

一昔前では、各サイト（ブログとか）の更新情報を取得する手段は、直接サイトを開いて記事が追加されているか、人が操作して確認するしかありませんでした。
その改善方法として、生まれたものです。

■バージョン

RSS1.0
RSS2.0
Atom

1.0と2.0は違うものです。Atomは2.0をシンプルにしたイメージのものです。
バージョンの違いについて詳しくはこちら↓
http://d.hatena.ne.jp/akagami_ext/20081209/p3

■RSSフィードとRSSリーダーの違いについて
RSSには配信する側と、受け取る側で呼び名が違います。
まずフィードとは供給の意味があり、RSSを発信する立場にあります。
これをRSSフィードと呼びます。
一方、それを受け取る方をRSSリーダーと呼んでいます。

■RSSリーダーの作り方
ASPNET3.5 からは
System.ServiceModel.Syndicationというクラスライブラリが追加されているのでそれを使うと便利なのですが、
今回はGoogle AJAX Feed API
という便利なAPIを見つけたので、これを使ってみたいと思います。

■Google AJAX Feed API（グーグルリファレンス）
このページに乗っているサンプルコードを参考に作ってみると、
リーダーが使えるようになりました。
https://developers.google.com/feed/v1/devguide?hl=ja

参考文献：私も試してみた
http://mypacecreator.net/blog/archives/960

XMLHttpRequestとは？

systemike 20:28

こんばんわ、開発者のⅠです。

さて、今回は前々回の投稿についての補足として、APIのひとつであるXMLHttpRequestについて説明したいと思います。

以下のソースは、前々回の投稿での使用例です。
マーカーの情報が記録されたCSVファイルを読み込むための関数 getCSVFile に組み込んでいます。

 
　function getCSVFile() {
　　　var xhr = new XMLHttpRequest();
　　　xhr.onload = function () {
　　　createArray(xhr.responseText);
　　　};

　　　xhr.open("get", "markerlist.csv", true);
　　　xhr.send();
　}
　getCSVFile();

このAPIは、ブラウザ上でサーバーとHTTP通信を行うために利用します。

また、各メソッドの意味については以下の通りです。

【onload】：レスポンスを受信完了した段階で行う処理を記述します

　【open】：実際に送信するリクエストを生成します。リクエストの型、ファイルの存在するURL、

　　　　　　　非同期通信を行うか否かを指定します。

　【send】：生成したリクエストをサーバーへ送信します。

つまり、上に記述した関数 getCSVFileを言い換えてみると、

　「markerlist.csvを対象に非同期通信を行うようGET型のリクエストを生成・送信し、

　この通信が完了した時点で、取得したファイル内のデータを引数として、

　　関数createArray(xhr.responseText)を実行する」

という感じでしょうか。

思ったよりも、シンプルに外部ファイルを取得できるのですね……。

それでは、今日はこの辺で失礼します。

CSVファイルとは？

systemike 20:57

こんにちわ、開発者のⅠです。

今回は、前回の投稿で触れたCSVファイルについて説明したいと思います。

CSVは「Comma Separated Values」のそれぞれ頭文字です。
”カンマ区切り文字”とでも言いましょうか。

「名前、経度、緯度」の各要素が書き込まれたCSVファイルを例にしてみると、

東京タワー, 35.658589, 139.745615
浅草雷門, 35.711020, 139.796336
中央本線笹子駅, 35.603862, 138.825087

という様式になっています。
カンマごとにマーカーの「各要素」が存在し、さらに「マーカー１つに一行のデータ」という対応関係になっていますね。

前回の投稿では、splitメソッドを使っていましたが、その際に区切り文字に”, (カンマ)”と”\n(改行コード)”を設定していたのはこういう理由からです。

このCSVファイルの作成・表示はMicrosoft社のExcelで実行可能ですが、若干の問題があります。
それは文字化けです。Excelでは新規ファイルを作成するときに、CSVファイルとして保存することが可能ですが、文字コードは「Shift-JIS」で固定されます。

自分の環境ではUTF-8を用いる必要があったため、このまま作成したCSVファイルを読み込むと、マーカーは表示されますが、インフォウィンドウの中身が見事に文字化けしました。
この対処法として、一旦メモ帳でファイルを開き、改めて『名前を付けて保存』で文字コードをUTF-8に設定しました。

しかし、編集するためにExcelでCSVファイルを開いてしまうと、再び文字コードが変更されるようで、文字化けが発生してしまいました……。

※Excel上で保存時に文字コードを指定できない理由わからず、自分と同じ悩みを持った人がネット上で見受けられました……。

現在は、VisualStudio上で編集を行っており文字化けは発生しておりません。

せっかく表示させたマーカーをクリックしてみたら、わけのわからない文字が羅列されていると大変残念な気持ちになります。くれぐれもご注意ください。

それではこの辺りで失礼します。

JavaScriptを使って外部ファイルを読み込む方法

systemike 21:01

こんにちわ、開発者のⅠです。

さて、前回から時間が空いてしまいましたが、GooｇleMapに関わるお話の続きです。

前回は、Google Mapにマーカーを表示させる方法について紹介いたしましたが、今度はその応用として、マーカーのデータを外部ファイルから読み込む方法について紹介したいと思います。

今回は、名前、住所、座標(緯度と経度)を記録したCSVファイル(拡張子： .csv)を読み込む場合を例として挙げたいと思います。

まず、外部ファイルを読み込むために必要な関数 getCSVFileをMapオブジェクト宣言の下に記述します。

 
　function getCSVFile() {
　　　var xhr = new XMLHttpRequest();
　　　xhr.onload = function () {
　　　createArray(xhr.responseText);
　　　};

　　　xhr.open("get", "markerlist.csv", true);
　　　xhr.send();
　}
　getCSVFile();

次に、読み込んだCSVファイルのデータをsplitメソッドを使って "\n(改行コード)"毎に配列へ振り分けます。
続けて ", (カンマ) "毎に振り分けていきます。
そして、カンマで区切った名前、住所、座標の各データを変数name、address、latlngにそれぞれ代入します。
あとは、関数 createMarkerでマーカー生成し、インフォウインドウ(吹き出し)の中身をHTML形式で記述します。

function createArray(csvData) {
   var DataArray = csvData.split("\n");
   var csvArray = new Array();
   for (var i = 0; i < DataArray.length; i++) {
    csvArray[i] = DataArray[i].split(",");
   }

   insertData(csvArray)
  }

  
  function insertData(csvArray) {
   for (var i = 0; i < csvArray.length; i++) {

    // 配列csvArray[i][0]を変数nameに格納 
    var name = csvArray[i][0];

    // 配列csvArray[i][1]を変数addressに格納 
    var address = csvArray[i][1];

    // 配列csvArray[i][2]とcsvArray[i][3]を変数latlng に格納 
    var latlng = new google.maps.LatLng(csvArray[i][2], csvArray[i][3]);


    // 関数createMarkerに引数を指定します 
    createMarker(name, address, latlng, map)
   }
  }
 }

 // 引数で渡された値を変数に代入し｛｝内の処理を実行 
 function createMarker(name, address, latlng, map) {

  // InfoWindowクラスのオブジェクトを作成 
  var infoWindow = new google.maps.InfoWindow();

  // 指定したオプションを基にマーカーを作成 
  var marker = new google.maps.Marker({ position: latlng,  map: map });

  // addListener を使ってイベントリスナーを追加 
  // 地図上のマーカーがクリックされると｛｝内の処理を実行。
  // currentInfoWindowに値が入っているならば、既に開いている情報ウィンドウを閉じる 
  // 表示される情報ウィンドウは常に一つ 
  google.maps.event.addListener(marker, 'click', function () {
   
    if (currentInfoWindow) {
     currentInfoWindow.close();
    }

    // InfoWindowOptionsオブジェクトを指定します
    // HTML形式で記述する
    infoWindow.setContent(
    '' + '' + name + '
'+ 
'' + address + '
' + ''
    );

    // マーカーに情報ウィンドウを表示 
    infoWindow.open(map, marker);

    // 開いた情報ウィンドウを変数へ格納 
    currentInfoWindow = infoWindow;
   
  });
 }
 // ページ読込時に地図を表示 
 google.maps.event.addDomListener(window, 'load', initialize);

これで、マーカーの情報を外部ファイルから読み込むことが出来るはずです。
こうすれば、マーカーの追加・削除はソースコードではなく外部ファイルを編集するだけで済みますね。

それでは、今日はこの辺りで失礼します。

Google Maps JavaScript APIを使って、マップをWebページに埋め込む方法

systemike 16:41

こんにちわ、開発者のⅠです。
今朝、JRのある路線で遅延が発生していたようですが、その原因が猪と衝突したことによる車両不具合だったそうです……どれだけ強い衝撃だったのでしょうか。

さて、今回は前回の投稿の続きです。

前回紹介したGoogle Maps APIには、様々な種類があります。

Google Maps Android API
Google Maps SDK for iOS
Google Maps JavaScript API
Google Places API for Android
Google Places API for iOS
Google Maps Roads API
Google Static Maps API
Google Street View Image API
Google Maps Embed API
Google Places API Web Service
Google Maps Geocoding API
Google Maps Directions API
Google Maps Distance Matrix API
Google Maps Geolocation API
Google Maps Elevation API
Google Maps Time Zone API

今回はその中の「Google Maps JavaScript API」を利用する場合について、お話したいと思います。

まず、マップを表示させたいページのheaderに以下のタグを追加してください。

これを追加することで、APIのライブラリを読み込みます。

次に、JavaScriptを記述します。まずはプレーンな地図を表示してみましょう。

 google.maps.event.addDomListener(window, 'load', function () {
  var map = document.getElementById("map_canvas");
  var options = {
   zoom: 11,
   center: new google.maps.LatLng(35.360667, 138.727775),
   mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  new google.maps.Map(map, options);
 });

var optionの中のプロパティを説明しますと、以下の通りです。

① zoom =　"ズーム(拡大)値"の初期値、大きいほど拡大されて表示されます

② center = "マップの中心座標(緯度, 経度)"の初期値、この座標を中心としてマップが表示されます

③ mapTypeId = "表示するマップの様式"を指定します。今回は"ROADMAP(=２D地図)"を指定しています。

※なお、①「zoom」と②「center」は必須です。この２つを指定しないとマップが表示できません！！

いかがでしょうか？
地図の仕様ですが、公式ページとほぼ同等です。

これをさらにカスタマイズすることも可能ですが、それについては次回お話したいと思います。

---------------------------------------------------------------------------------

＊追記　(11月19日)＊

コメント欄よりご指摘を受けまして、ここに追記させていただきます。

上記の内容に加えて、HTMLのbody内に以下のdivタグを加えてください。

これがマップを実際に表示させる場所となります。
つまりは、必須の要素です！
こんなに大事な内容をお伝えできていなかったこと、申し訳ありませんでした……。
また、コメントを下さったsystem kgさんに感謝いたします。

cssやjsファイルを確実に更新させる

山田あきとし 10:51

こんにちは山田です。
身内ルールと思っていたものが実は広く一般的なやりかただったこと
というものに遭遇しました。
今日はそのお話しです。

開発環境：ASP.NET　2.0

CSSファイルに修正を加えて、よし動いたと思っていたら、
依頼者から「変わってないんだけど～」の声
ブラウザを更新してみると、、、

要するにクライアント側のキャッシュを読んでいたのが原因です。
これにクエリストリングを追加すると
新しいファイルでキャッシュしてくれるようになります。

<link rel="stylesheet" type="text/css" href="base.css" />
↓
<link rel="stylesheet" type="text/css" href="base.css?date=20150101" />

クエリストリングの中身は何でもよいのですが、管理上日付が使いやすいと思います。

また、さらにファイルに更新を加えたら、クエリストリングをまたさらに書き換えてあげればOKです。
<link rel="stylesheet" type="text/css" href="base.css?date=20150102" />

jquery.lazyload.jsを使ってみた(画像の遅延読み込み)

Unknown 18:34

こんにちは開発者のKです。

スマートフォンでWebページを閲覧する機会が増えた昨今、比較的貧弱な3G回線でもスムーズに閲覧できるように
サーバへのリクエスト数やダウンロードするリソースの容量はなるべく抑えたいですよね。

通常ページ容量の大半を占めるのは画像だと思いますので、その一つの解決策として画像の遅延読み込みを実装したjqueryのプラグイン「jquery.lazyload.js」を使ってみましたので所感を述べたいと思います。

遅延読み込みについて

通常ブラウザはHTMLを1行目から順に解析していき、imgタグやcssのbackgroudで指定された画像を発見した際、即時画像のダウンロードを開始します。

画像の遅延読み込みとは、この読み込みタイミングを遅延させ、ページを一度表示し終わった後に非同期でダウンロードしようというものです。
ブラウザの表示領域は限られていますから、表示領域の外にある画像は、あとから読み込んでも影響は少ないよね、という考え方です。
これにより、最初にページ読み込みが完了までのページ容量を削減し、表示速度の高速化が期待できます。

使い方

簡単な使い方は以下の通りです。

jquery本体とlazyloadを読み込みます。
遅延読み込みさせたいimgタグにlazyクラスを付与します。このクラス名は任意に変更可能です。srcには仮で表示させる画像を指定しておき、data-originalに本来表示させる画像のURLを指定します。
step2で付与したlazyクラスを持つ要素に対して、lazyloadを実行します。その際、様々なオプションを渡すことができます。

lazyloadのオプション

ソースを見ると、lazyloadには様々なオプションがありますが、公式ドキュメントなどでもあまり触れられていないので、紹介したいと思います。

threshold

thresholdで指定したピクセル数より下にある画像を読み込み対象とすることができます。

デフォルト値は0なので、描画領域に入った際に読み込み開始しますが、例えばスマートフォンで縦にスクロールしていくリストページを考えた時、640としておけば次の1スクロール分も事前に読み込んでおくことができます。

failure_limit

一度読み込み対象となったが、何らかの理由により読み込み完了していない画像を、何回まで再読み込みを試みるかを指定します。

コードを読んだだけで実際に試していないので、間違っていたらすみません。

event

読み込み対象を検知するイベントを指定します。デフォルトはscrollなので、ページスクロールの度に読み込み対象を再走査します。
ここにはカスタムイベントを指定することも可能で、例えばスワイプによるカルーセルUIを実装したプラグインと組み合わせて、スワイプの度に再走査をかけることも可能です。
※jqueryカスタムイベントの発火はtrigger('event_name')で行えます。

effect

遅延読み込み後に画像を表示する際の効果を指定します。デフォルトのshowはただ表示するだけですが、

fadeInとすると、アニメーションでリッチに表示することができます。

container

遅延読み込みを行う範囲を指定します。デフォルトはwindowオブジェクトなので、ページ全体となります。

特定のdivタグ内に限定したい場合などに使えると思います。

data-attribute

imgタグのdata属性の名前を変更できます。デフォルトはサンプルの通りdata-originalですが、他ライブラリとの名前の衝突などで変更したい場合に役立ちます。

skip_invisible

trueを指定すると、対象の画像が可視状態でない場合(display: noneなど)は読み込みがスキップされます。

appear

対象の画像が描画領域に入った際に(threshold含む)実行されるコールバックメソッドを登録できます。
第一引数には遅延読み込み前の要素数、第二引数にはオプション(lazyloadで渡したものとデフォルト値がマージされたもの)が渡されます。

一覧ページにおいて、画像以外にもtwitter, Facebookボタンの様な通信を要するウィジェットが実装されているケースがあるかと思います。
そんな時にページ表示時にまとめて初期化するのではなく、個別に初期化処理を走らせれば、より初回表示時のコストを削減できますね。
イメージ：

$('img.lazy').lazyload({
    appear: function (left, settings) {
        // ツイートボタンも遅延読み込み
        (typeof twttr !== 'undefined') && twttr.widgets.load();
    }
});

load

appearと似ており、対象の画像が読み込み完了した際に実行されるコールバックメソッドを登録できます。

placeholder

画像が遅延読み込みされるまでに表示する仮画像を指定します。
デフォルトではグレーの画像となっていますが、任意の画像に差し替えることができます。
元のimgタグのsrcに指定しても同じ挙動となります。

遅延読み込みはSEO的に良くない？

こんな記事がありました。

最近ではGoogleのクローラもJavascriptを実行できるようですが、遅延読み込みのトリガーの実装方法によっては、クローラに画像が認識してもらえないケースがあるとのことです。

ユーザの入力を起点(スクロール等)とする場合、クローラは再現できないようですね。

実際にFetch as Googleしてみて何かわかったらまた記事にしたいと思います。

登録: 投稿 (Atom)

開発チームのブログ

2015年12月14日月曜日

Google AJAX Feed APIとは

2015年12月3日木曜日

XMLHttpRequestとは？

2015年12月1日火曜日

CSVファイルとは？

2015年11月30日月曜日

JavaScriptを使って外部ファイルを読み込む方法

2015年11月18日水曜日

Google Maps JavaScript APIを使って、マップをWebページに埋め込む方法

2015年11月16日月曜日

cssやjsファイルを確実に更新させる

2015年10月16日金曜日

jquery.lazyload.jsを使ってみた(画像の遅延読み込み)

遅延読み込みについて

使い方

lazyloadのオプション

threshold

failure_limit

event

effect

container

data-attribute

skip_invisible

appear

load

placeholder

遅延読み込みはSEO的に良くない？

Popular Posts

Recent Posts

Categories

Unordered List

Text Widget

Pages

Blog Archive