Google Maps API v3を使ってウェブサイトやブログに地図を表示する
Google Maps API v3を使ってウェブサイトやブログに地図を表示する方法を紹介します。 本エントリーではGoogleマップの基本的な表示するために必要な、下記の手順について説明します。 APIキーの取得 Googleマップの表示 中心地点の設定 縮尺の設定 １．APIキーの取得 Google APIコンソールのページを開いて、Google アカウントでログインし、表示された画面の左メニューにある「APIs & auth」をクリック。 APIの一覧が表示されるので、「Google Maps JavaScript API v3」の右側にある「OFF」をクリック。 サービス利用規約に同意する場合はチェックボックスをチェックして「Accept」をクリック。 （クリックで拡大） 「Google Maps JavaScript API v3」のSTATUSが「ON」になったことを確認。 「
入力フォームの全角・半角を勝手に変換してくれるJavaScript
入力フォームの全角・半角を勝手に変換してくれるJavaScriptを作りました。 １．発端 「入力フォームの迷宮。全角数字を強要するフォームを理解できません。」を読んで、たしかに私も半角全角の入力を強制されるフォームには辟易してしまいます。 というか、半角全角どちらでも良いという登録フォームを（多分）見たことがありません。 それはさておき、システム側で半角文字・全角文字の制御が不能であれば、せめてフロントエンドでなんとかできるんじゃないの？と思ったのが、作ったそもそもの発端です。 ２．半角を全角に変換する仕組み 半角文字の文字コードから65248番目の文字コードが全角文字になるようです。 よって半角を全角に変換するには、charCodeAt()で参照した半角文字コードに65248を加算したあと、fromCharCode()で文字コードを文字に戻します。 "ABC".replace( /[A
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由を調べてみました。 １．はじめに TwitterやPocketなどのソーシャルボタンのコードをみると、共通してscript要素の中にあるfunctionの前に「!（エクスクラメーション）」がついています。 Twitterの場合 <a href="https://twitter.com/share" class="twitter-share-button" data-via="yujiro" data-lang="ja" data-size="large">ツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getE
jQueryプラグインの先頭にセミコロンがある理由
jQueryプラグインの先頭にセミコロンがある理由を調べてみました。 １．「jQueryプラグインの先頭にセミコロン」とは？ 例えば、レスポンシブ対応で画像を拡大表示できる「SuperBoxプラグイン」のコードは次のようになっています。 ;(function($) { $.fn.SuperBox = function(options) { var superbox = $('<div class="superbox-show"></div>'); var superboximg = $('<img src="" class="superbox-current-img">'); …中略… }); }; })(jQuery); 1行目の行頭にセミコロンがついています。 ;(function($){ 直感的に「エラー防止用かな？」と思って調べてみたらそのとおりだったのですが、以下調べたことについ
CSSでfloatを解除する方法のまとめ
CSSのfloatを解除（クリア）する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。 １．floatにより親要素の高さが出なくなる（＝背景がなくなる）問題 親要素の中にある子要素にfloatプロパティが設定されていると、内容をもたない親要素の高さが0になるという仕様になっています。 例えば、次のCSSとHTMLを例にします。 <style> #container { width: 200px; background: #ddd; } .box { width: 25px; margin: 10px; paddi
ページを移動（離脱）するときにjQueryで警告を出す方法
Facebookなどでフォーム入力中にページを移動（離脱）しようとすると警告が表示されます。 この仕組みをjQueryで実装する方法を紹介します。jQueryは投稿時点の最新バージョン1.9.1を利用しています。 １．ページを移動するときに警告を出す ページを移動するときに警告を出すには、onイベントにbeforeunloadイベントを設定します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ $(window).on('beforeunload', function() { return '投稿が完了していません。このまま移動しますか？'; }); }); </script> <form method="post" acti
TwitterのAPI 1.1で取得したユーザーのJSONデータからAtomフィードを作成する
Twitter API 1.1で取得した、任意のユーザーのタイムライン（JSONデータ）からAtomフィードを作成する方法を紹介します。 Twitter API 1.1で取得したJSONをAtomに変換したサンプル １．Twitterアプリケーションの作成 Twitterアプリケーション開発のページを開き、Twitterのアカウントでサインイン。 右上にある「Create a new application」をクリック。 「Application Details」のName、Description、Websiteを設定。Callback URLの設定は不要です。 下の方にある「Yes, I agree」をチェックし、CAPTHCAを入力して「Create your Twitter application」をクリック。 次の画面の下にある「Create my access token」をクリ
node.jsのHTTPクライアントでレスポンス時間が遅延する問題を解消する
node.jsのHTTPクライアントでレスポンス時間が遅延する問題を解消する方法を紹介します。 １．問題点 業務で、Ruby on Railsを使ったシステム開発を行っています。 で、システムが一定の負荷（約200万HTTPリクエスト/時間）に耐えられるかという性能測定を行っています。 かなりおおざっぱなシーケンスですが、このシステムでは図のようにサーバ・クライアントともにHTTPリクエストを送受信する仕組みが必要です。 サーバはApache+Passenger+Rubyで構築し、クライアントはスタブおよびドライバとしてnode.jsを使っています。 で、スタブ・ドライバによる負荷の特徴として、時間の経過とともに処理すべき秒間HTTPリクエスト数が少しずつ増加していくのですが、秒間リクエスト数が一定数（おそらく数百）を超えると、クライアントから送信したリクエストのレスポンス時間が遅延すると
jQueryでcookieを簡単に使える「jQuery Cookie」のまとめ
jQueryでcookieを簡単に使える「jQuery Cookie」の利用方法のまとめです。 １．機能 名前のとおり、「jQuery Cookie」はjQueryでcookieを簡単に使うためのjQueryプラグインです。 JavaScriptでは値のエンコード・デコードやpathやexpireの結合、取得時の操作など、cookie処理が結構面倒なのですが、このプラグインを利用すれば簡単に扱えるようになります。 ２．プラグインのダウンロード githubの「jquery-cookie」のページにある「ZIP」をクリック。 これでアーカイブをダウンロードできます。 ３．基本的な使い方 jQueryと、ダウンロードしたアーカイブに含まれるjquery.cookie.jsを読み込みます。 <script src="http://ajax.googleapis.com/ajax/libs/jqu
三点リーダが真ん中に表示されない理由
三点リーダ「…」が「…」という風に真ん中に表示されない問題について調べてみました。 １．三点リーダとは 説明するまでもありませんが、点を3つ横に並べた形をした記号のことで、語尾を省略したり、言葉の余韻を残すときに使う「…」です。 ２．問題点 たとえばブログを書いているときに、記事編集画面のテキストエリアでは「…」と表示されているのに、公開したページでは「…」となることがあります。 ３．原因 三点リーダが真ん中に表示されないのはCSSの「font-family」の設定によるものです。 「font-family」の値には多くのフォントを並べているケースが多いと思いますが、その一番最初に記述しているフォントに依存します。 たとえば、このブログのfont-familyは以下のようになっています。 font-family: Verdana,Arial,"メイリオ",Meiryo,"ヒラギノ角ゴPro
HTML5のWebsocketを使って同時接続数をサーバから送信する
HTML5のWebsocket（Node.js+Socket.IO）を使って、現在の同時接続数をサーバから送信するサンプルを作ってみました。 環境を作ったのは自分のPCのためリアルでお見せできないのが残念ですが、動画をキャプチャしたのでそちらでご確認ください。 １．サンプル動画 2つのブラウザからそれぞれ「http://127.0.0.1:8124」にアクセスして、そのページの同時接続数を各ブラウザに表示します。接続数の増減によって、ページに接続しているコネクションすべてに、サーバから情報を送信します。操作をしていないブラウザにも即時に接続数が反映されます。 非常にシンプルなものですが動いたときはちょっと感動しました。 ２．サンプルコード Node.jsとSocket.IOを使ったサンプルコードを掲載しておきます。 色々ネットを探しましたが（探しきれてないかもしれません）、Node.js+
PerlでJSONPデータを処理する方法
PerlでJSONデータ・JSONPデータを処理する方法です。 １．JSONデータを処理する JSONPデータの処理を解説する前に、JSONデータの処理について簡単に紹介します。 外部APIを起動し、次のようなJSONデータを受信したと想定します。 [ { 'link' => 'http://user-domain/aaa.html', 'title' => "テスト1" }, { 'link' => 'http://user-domain/bbb.html', 'title' => "テスト2" }, { 'link' => 'http://user-domain/ccc.html', 'title' => "テスト3" } ]; この受信データの場合、次のようにJSONモジュールを利用することでPerlで処理できるようになります。 #!/usr/bin/perl use strict;
cronが起動しないときの確認ポイントまとめ
cronが動かないときの確認ポイントについてまとめました。 日付や時間といった基本的な内容は別エントリーしたいと思います（どこまでが基本かという話もありますが）。 １．原因を調べる 確認ポイントの説明の前に、cronに設定したコマンドやスクリプトが起動しない原因を調べるには、標準エラー出力を確認することが先決です。 もし標準エラー出力に何か残っていれば、そこから対処案を導き出すことができます。 標準エラー出力の設定方法については５項をご覧ください。 ２．ファイルを実行する場合は実行権のパーミッションをつける cronでシェルやPerlなどのファイルを実行する場合、ファイルに実行権のパーミッションの付与を忘れないようにしましょう。 ３．ファイルはフルパスで指定する よくやってしまう失敗ですが、ファイルの指定はフルパスで行います。 /home/foo/public_html/foo.shを実行
ActivePerl 5.10でImageMagickが正常に動作しない不具合の対処
Windows+ActivePerl 5.10でImageMagickをインストールしたときにImageMagickが正常に動作しない不具合の対処方法をまとめました。 このエントリーは、「Movable Type 5で「サーバーに Image::Magickか、Image::Magickの動作に必要な他のモジュールがインストールされていません。」となる事象について」から、さらに追跡調査したものです。 実験環境は次の通りです。 Windows XP Professional Service Pack 3（2台） ActivePerl 5.10.1 Build 1006 ImageMagick 6.5.5-5 Q8/ImageMagick 6.5.6-10 Q8/ImageMagick 6.5.9-1 Q8（5.10.1 Build 1006に対応する最初のバージョン・途中のバージョン・最後の
link要素「rel="canonical"」のまとめ
link要素のrel="canonical"について調べてみました。 以下、主にGoogleの「rel="canonical" 属性について」の記載を引用しながら、FAQ形式で書いていますが、認識誤りがありましたらどこかでつぶやいてください。 １．利用目的は？ 「検索エンジンのインデックス内での重複コンテンツ問題」解消のためです。 下の図で示すURLは、同じページにアクセスしているにもかかわらず、検索エンジンでは別のURLとしてインデックスされます。 検索エンジンのインデックス内での重複コンテンツ問題 link要素の「rel="canonical"」を利用することで、URLの正規化が行われ、重複コンテンツ問題を解消します。 解消イメージ 2009年2月、Google、Yahoo!、Microosftの大手検索エンジン企業が、URLの正規化に対応する共通の取り組みとして、「rel="cano
いまさら聞けないCSS font-familyのまとめ
CSSのfont-familyについて調べてみました。そのうちWebフォントが主流になる気がしますがそれまでのまとめということで。 認識誤りがありましたらどこかでつぶやいてください。 １．font-familyとは？ 通常のフォントや太字、イタリック体、斜体など、デザインを統一した複数のフォントをまとめたものを「フォントファミリー」といいます。 「Arial」「Vernada」「ヒラギノ角ゴPro W3」「ＭＳ Ｐゴシック」などがフォントファミリー名です。 このフォントファミリー名を指定するためのプロパティが「font-family」です。 サンプル body { font-family: Verdana,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
JavaScriptの文字列置換とjQueryのDOM要素置換のまとめ
JavaScriptの文字列置換とjQueryのDOM要素置換について、まとめて紹介します。 特にJavaScriptの文字列置換はいつもやり方を忘れてしまうので、このエントリーに保存しておきます。 １．replace()による文字列置換 基本的な文字列置換は、JavaScriptのreplace()メソッドを利用します。 var text = "foofoo"; var result = text.replace('foo', 'bar'); 実行結果（resultの内容） barfoo ２．replace()の正規表現による置換 replace()メソッドの第1パラメータに正規表現を指定すれば、さらに強力な文字列置換が行えます。 var text = "foofoo"; var result = text.replace(/foo/g, 'bar'); 実行結果（resultの内容）
jQueryで要素の表示・非表示を判定する方法
jQueryの要素の表示・非表示を判定する方法を紹介します。 １．基本 jQueryでは、要素の表示・非表示のためのメソッドとして、show()とhide()が提供されています。 show()は指定した要素を表示します。 $('#foo').show(); hide()は指定した要素を非表示にします。 $('#foo').hide(); が、表示・非表示を判定する方法として、isShow()やisHide()、isVisible()などは提供されていません。 ２．css('display')で判定する show()はdisplayプロパティ「block」、hide()はdisplayプロパティを「none」にするので、これを判定に利用します。 if ($('#foo').css('display') == 'block') { // 表示されている場合の処理 } else { // 非表示
jQueryで遅延ロードを汎用的に実現する「ScrollTrigger」プラグイン
jQueryで遅延ロード（遅延読み込み）を汎用的に実現する「ScrollTrigger」プラグインを紹介します。スクロールで要素が表示されたときに任意の関数を実行できます。 当ブログでも、記事ページ本文下にあるソーシャルブックマークボタンとFacebookのLikeBoxの表示にこの仕組みを使っています。 １．目的 Facebookの「いいね！」ボタンなど、最近ソーシャル系のパーツをブログなどに表示している方が少なくないと思います。 ですが、パーツの表示にはJavaScriptを使っているものがほとんどで、そのまま設置するとページのロード時間が遅くなるケースが多く、結果的にページ表示時間に影響することになります。 本プラグインは、そういったソーシャル系のJavaScriptのロードを遅延させることができ、初回のロード時間を短縮したいときに効果があります。 ２．機能 ページをスクロールして、
HTMLやCSSでのプロトコル表記（http:、https:）の省略について
HTMLやCSSではプロトコル表記（http:、https:）の省略が可能です。 ということで、プロトコル表記の省略に関することを色々調べてみましたので、本エントリーで紹介致します。 このエントリーは、「「Google HTML/CSS Style Guide」を適当に和訳してみた」の以下の部分に対しての便乗記事です。 埋め込みリソースからプロトコル表記（http:,https:）を省略する。 <!-- Not recommended --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> <!-- Recommended --> <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> １．プロトコ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
