こんにちは山田です。
今年の東京は12月なのに24度を超える日がありました。
11年ぶりだそうです。
とても暖かくて半袖でも外出できそうです。
さて本題に入るのですが、
外部サイトが配信しているニュースを自分のサイト内で受けとって表示できないかと画策していたら、その方法の一つとして
統一された規格のRSSというものがあるとわかりました。
（一時期はRSSが人気だったようなのですが、
近年はサービス終了も目立っている印象ですね。）
今回はRSSについて調べて見ました。
■RSSとは
「Rich Site Summary（リッチ・サイト・サマリー）」の略で、主にWebサイトの更新情報を公開することを目的に使われています。
一昔前では、各サイト（ブログとか）の更新情報を取得する手段は、直接サイトを開いて記事が追加されているか、人が操作して確認するしかありませんでした。
その改善方法として、生まれたものです。
■バージョン
RSS1.0
RSS2.0
Atom...
2015年12月14日月曜日
2015年12月3日木曜日
XMLHttpRequestとは？
こんばんわ、開発者のⅠです。
さて、今回は前々回の投稿についての補足として、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】...
2015年12月1日火曜日
CSVファイルとは？
こんにちわ、開発者のⅠです。
今回は、前回の投稿で触れたCSVファイルについて説明したいと思います。
CSVは「Comma Separated Values」のそれぞれ頭文字です。
”カンマ区切り文字”とでも言いましょうか。
「名前、経度、緯度」の各要素が書き込まれたCSVファイルを例にしてみると、
東京タワー, 35.658589, 139.745615
浅草 雷門, 35.711020, 139.796336
中央本線 笹子駅, 35.603862, 138.825087
という様式になっています。
カンマごとにマーカーの「各要素」が存在し、さらに「マーカー１つに一行のデータ」という対応関係になっていますね。
前回の投稿では、splitメソッドを使っていましたが、その際に区切り文字に”, (カンマ)”と”\n(改行コード)”を設定していたのはこういう理由からです...
2015年11月30日月曜日
JavaScriptを使って外部ファイルを読み込む方法
こんにちわ、開発者のⅠです。
さて、前回から時間が空いてしまいましたが、GooｇleMapに関わるお話の続きです。
前回は、Google Mapにマーカーを表示させる方法について紹介いたしましたが、今度はその応用として、マーカーのデータを外部ファイルから読み込む方法について紹介したいと思います。
今回は、名前、住所、座標(緯度と経度)を記録したCSVファイル(拡張子： .csv)を読み込む場合を例として挙げたいと思います。
まず、外部ファイルを読み込むために必要な関数 getCSVFileをMapオブジェクト宣言の下に記述します。
function getCSVFile() {
var xhr = new XMLHttpRequest();
xhr.onload = function () {
createArray(xhr.responseText);
};
xhr.open("get",...
2015年11月18日水曜日
Google Maps JavaScript APIを使って、マップをWebページに埋め込む方法
こんにちわ、開発者のⅠです。
今朝、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...
2015年11月16日月曜日
cssやjsファイルを確実に更新させる
こんにちは山田です。
身内ルールと思っていたものが実は広く一般的なやりかただったこと
というものに遭遇しました。
今日はそのお話しです。
開発環境：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...
2015年10月16日金曜日
jquery.lazyload.jsを使ってみた(画像の遅延読み込み)
こんにちは開発者のKです。
スマートフォンでWebページを閲覧する機会が増えた昨今、比較的貧弱な3G回線でもスムーズに閲覧できるように
サーバへのリクエスト数やダウンロードするリソースの容量はなるべく抑えたいですよね。
通常ページ容量の大半を占めるのは画像だと思いますので、その一つの解決策として画像の遅延読み込みを実装したjqueryのプラグイン「jquery.lazyload.js」を使ってみましたので所感を述べたいと思います。
遅延読み込みについて
通常ブラウザはHTMLを1行目から順に解析していき、imgタグやcssのbackgroudで指定された画像を発見した際、即時画像のダウンロードを開始します。
画像の遅延読み込みとは、この読み込みタイミングを遅延させ、ページを一度表示し終わった後に非同期でダウンロードしようというものです。
ブラウザの表示領域は限られていますから、表示領域の外にある画像は、あとから読み込んでも影響は少ないよね、という考え方です。
これにより、最初にページ読み込みが完了までのページ容量を削減し、表示速度の高速化が期待できます。
使い方
簡単な使い方は以下の通りです。
jquery本体とlazyloadを読み込みます。
遅延読み込みさせたいimgタグにlazyクラスを付与します。このクラス名は任意に変更可能です。srcには仮で表示させる画像を指定しておき、data-originalに本来表示させる画像のURLを指定します。
step2で付与したlazyクラスを持つ要素に対して、lazyloadを実行します。その際、様々なオプションを渡すことができます。
$(function...
登録:
投稿 (Atom)