Google Maps API v3を使ってウェブサイトやブログに地図を表示する: 小粋空間

2014/04/24 52 users 縮尺 APIキー ウェブサイト 手順 地図

Google Maps API v3を使ってウェブサイトやブログに地図を表示する方法を紹介します。 本エントリーではGoogleマップの基本的な表示するために必要な、下記の手順について説明します。 APIキーの取得 Googleマップの表示 中心地点の設定 縮尺の設定 １．APIキーの取得 Google APIコンソールのページを開いて、Google アカウントでログインし、表示された画面の左メニ... 続きを読む

入力フォームの全角・半角を勝手に変換してくれるJavaScript: 小粋空間

2013/08/27 100 users 発端 迷宮 制御 半角文字 半角全角

入力フォームの全角・半角を勝手に変換してくれるJavaScriptを作りました。 １．発端 「入力フォームの迷宮。全角数字を強要するフォームを理解できません。」を読んで、たしかに私も半角全角の入力を強制されるフォームには辟易してしまいます。 というか、半角全角どちらでも良いという登録フォームを（多分）見たことがありません。 それはさておき、システム側で半角文字・全角文字の制御が不能であれば、せめて... 続きを読む

ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由: 小粋空間

2013/06/11 270 users function ソーシャルボタン Twitter 理由

ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由を調べてみました。 １．はじめに TwitterやPocketなどのソーシャルボタンのコードをみると、共通してscript要素の中にあるfunctionの前に「!（エクスクラメーション）」がついています。 Twitterの場合 <a href="https://twitter.com/share" class="t... 続きを読む

WordPressでサイトアドレスを変更する方法: 小粋空間

2013/04/17 103 users サブディレクトリ WordPress 備忘録 ドメイン 方法

WordPressでサイトアドレスを変更する方法を紹介します。 定番カスタマイズだと思いますが、カスタマイズの理由まで言及している記事が見当たらなかったので、その解説も含めて備忘録で残しておきます。 ここでは、ドメインのサブディレクトリ（http://user-domain/wordpress/）にWordPressをインストールしている状態で、サイトアドレスをドメイン（http://user-d... 続きを読む

floatを解除する方法のまとめ: 小粋空間

2013/03/27 678 users float After CSS 擬似要素 まとめ

CSSのfloatを解除（クリア）する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。 １．floatにより親要素の高... 続きを読む

ページを移動（離脱）するときにjQueryで警告を出す方法: 小粋空間

2013/03/10 335 users Facebook jQuery script src 離脱

Facebookなどでフォーム入力中にページを移動（離脱）しようとすると警告が表示されます。 この仕組みをjQueryで実装する方法を紹介します。jQueryは投稿時点の最新バージョン1.9.1を利用しています。 １．ページを移動するときに警告を出す ページを移動するときに警告を出すには、onイベントにbeforeunloadイベントを設定します。 <script src="//ajax.goog... 続きを読む

三点リーダが真ん中に表示されない理由: 小粋空間

2013/02/26 114 users 語尾 余韻 記号 真ん中 三点リーダ

三点リーダ「…」が「…」という風に真ん中に表示されない問題について調べてみました。 １．三点リーダとは 説明するまでもありませんが、点を3つ横に並べた形をした記号のことで、語尾を省略したり、言葉の余韻を残すときに使う「…」です。 ２．問題点 たとえばブログを書いているときに、記事編集画面のテキストエリアでは「…」と表示されているのに、公開したページでは「…」となることがあります。 ３．原因 三点リ... 続きを読む

iPhoneをウェブカメラにする方法: 小粋空間

2012/11/25 82 users iPhone ビューワー ウェブカメラ LTE WiFiルータ

iPhoneをウェブカメラにする方法を紹介します。 １．接続イメージ 接続イメージは図のとおりです。iPhoneで撮影した映像を、WiFiを利用してビューワーとなるPCにデータを転送します。 ということでiPhoneはWiFi接続している必要があります。3GやLTEでは使えません。 また、iPhoneとPCは同じネットワーク（＝WiFiルータ）に接続されている必要があります。 本エントリーではiP... 続きを読む

jQueryで既存サイトの画像を「なんちゃって遅延ロード」する方法: 小粋空間

2012/11/21 51 users jQuery Lazy Load ひとつひとつ 遅延 設定

jQueryを使って、既存サイトの画像を遅延ロードっぽく見せる方法、いわゆる「なんちゃって遅延ロード」について紹介します。 昨日エントリーした「画像を遅延ロードする定番jQueryプラグイン「Lazy Load」」ですが、投稿済み記事の画像に対して設定をひとつひとつ変更するのは現実的に厳しいと思われます。 とはいっても、他のサイトでページをスクロールすると画像がふわっと浮かび上がるアクションには憧... 続きを読む

ノンプログラマーのためのjQuery生成ツール: 小粋空間

2012/11/12 419 users ノンプログラマー jQuery jQuery生成ツール 設定

ノンプログラマーのためのjQuery生成ツールを作ってみました。よければご活用ください。 ノンプログラマーのためのjQuery生成ツール サンプル表示つき このツールは「7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座」にインスパイアされて作った、初心者向けのお勉強ツールです。 コールバックなど複雑な設定はできませんが、基本的な設定とメソッドチェ... 続きを読む

画像の一部をズームアップできるjQueryプラグイン「jqZoom」: 小粋空間

2012/10/30 59 users jQueryプラグイン ディテール 質感 プラグイン 一部

画像の一部をズームアップできるjQueryプラグイン「jqZoom」を紹介します。 jqZoom １．概要 Amazonをはじめとする、オンラインショッピングサイトですっかり定着した機能として、画像のズームアップがあります。商品の質感やディテールなど、念入りに確認したいときに大変重宝します。 本エントリーで紹介するプラグインを利用すれば簡単に設置することができます。 画像ズームアップのプラグインは... 続きを読む

レスポンシブWebデザインで3カラムと2カラムを切り替えるためのCSS: 小粋空間

2012/10/24 60 users Media Queries メインコンテンツ 左右 CSS

レスポンシブWebデザインで、Media Queriesを使って3カラムと2カラムを切り替えるためのCSSの設定について紹介します。 １．やりたいこと まず、次のような3カラムレイアウトがあるとします。一番左がメインコンテンツで、その右側にサイドバーが2列並んだものです。 あるいは、左右にサイドバーがあるオーソドックスな3カラムレイアウト。 これらの3カラムレイアウトをデバイス幅によって2カラムレ... 続きを読む

レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」: 小粋空間

2012/09/19 319 users Responsive Firefox デバイス タブレット

レスポンシブWebデザイン制作に便利なFirefoxの「レスポンシブデザインビュー」を紹介します。 「レスポンシブデザインビュー」はFirefox15から搭載されています。 １．「レスポンシブWebデザイン」とは 「レスポンシブWebデザイン」とは、PCやスマートフォンやタブレットなど、あらゆるデバイスに対応するWebデザインのことを指します。 レスポンシブ（Responsive）は、「よく反応し... 続きを読む

CSSでtable幅を設定するためのまとめ: 小粋空間

2012/08/19 69 users table CSS まとめ エントリー サンプル

CSSでtable幅を設定するためのまとめです。 以前、tableをレイアウトしたときに表示幅がなかなか思い通りにならず苦労したことがあったので、このエントリーにまとめてみました。 うまくまとまっていなかもしれませんが参考になれば幸いです。認識誤りがありましたらどこかでつぶやいてください。 記事中で使ったサンプルの表示は、Firefox/Google Chromeで確認しています。 １．table... 続きを読む

link要素「rel="canonical"」のまとめ: 小粋空間

2012/08/15 105 users rel canonical link要素 属性 まとめ

link要素のrel="canonical"について調べてみました。 以下、主にGoogleの「rel="canonical" 属性について」の記載を引用しながら、FAQ形式で書いていますが、認識誤りがありましたらどこかでつぶやいてください。 １．利用目的は？ 「検索エンジンのインデックス内での重複コンテンツ問題」解消のためです。 下の図で示すURLは、同じページにアクセスしているにもかかわらず、... 続きを読む

いまさら聞けないCSS font-familyのまとめ: 小粋空間

2012/08/12 419 users まとめ font-family 太字 イタリック体 CSS

CSSのfont-familyについて調べてみました。そのうちWebフォントが主流になる気がしますがそれまでのまとめということで。 調べたついでに、当ブログのfont-familyも変更してみました。 変更前 変更後 認識誤りがありましたらどこかでつぶやいてください。 １．font-familyとは？ 通常のフォントや太字、イタリック体、斜体など、デザインを統一した複数のフォントをまとめたものを「... 続きを読む

JavaScriptの文字列置換とjQueryのDOM要素置換のまとめ: 小粋空間

2012/08/09 50 users jQuery replace Tex 文字列置換 まとめ

JavaScriptの文字列置換とjQueryのDOM要素置換について、まとめて紹介します。 特にJavaScriptの文字列置換はいつもやり方を忘れてしまうので、このエントリーに保存しておきます。 １．replace()による文字列置換 基本的な文字列置換は、JavaScriptのreplace()メソッドを利用します。 var text = "foofoo"; var result = tex... 続きを読む

jQueryで要素の表示・非表示を判定する方法: 小粋空間

2012/08/02 128 users jQuery foo hide show ＩＳ

jQueryの要素の表示・非表示を判定する方法を紹介します。 １．基本 jQueryでは、要素の表示・非表示のためのメソッドとして、show()とhide()が提供されています。 show()は指定した要素を表示します。 $('#foo').show(); hide()は指定した要素を非表示にします。 $('#foo').hide(); が、表示・非表示を判定する方法として、isShow()やis... 続きを読む

スクロールで要素が表示されたときに任意の関数を実行できるjQueryプラグイン「TriggerLoad」: 小粋空間

2012/07/11 58 users Facebook スクロール 関数 jQueryプラグイン

スクロールで要素が表示されたときに任意の関数を実行できるjQueryプラグイン「TriggerLoad」を紹介します。 １．目的 Facebookの「いいね！」ボタンなど、最近ソーシャル系のパーツをブログなどに表示している方が少なくないと思います。 ですが、パーツの表示にはJavaScriptを使っているものがほとんどで、そのまま設置するとページのロード時間が遅くなるケースが多く、結果的にページ表... 続きを読む

CDNでウェブサイトを高速化するためのまとめ: 小粋空間

2012/06/12 136 users CDN Con まとめ ウェブサイト バージョン

CDNでウェブサイトを高速化するためのまとめです。 「そんなの知ってるよ」という方も多いと思いますが、バージョンの指定方法や、キャッシュ・フォールバックなど、CDNに関する情報を集めましたのでご覧いただければ幸いです。 認識誤り等ありましたらどこかでつぶやいてください。 １．CDNとは CDNとは「Contents Delivery Network（コンテンツデリバリネットワーク）」または「Con... 続きを読む

img要素でCSS Spriteする方法: 小粋空間

2012/06/06 90 users img要素 座標 CSS Sprite HTTPリクエスト数

「CSS Sprite」は背景画像などの複数の画像ファイルをひとつの画像にまとめて、画像の中から表示させたい部分の座標をbackground-positionプロパティで指定するという手法です。これにより画像ファイルのHTTPリクエスト数を減らすことができます。 この手法は背景画像での利用が一般的なのですが、img要素でも利用することができるようなので、本エントリーで紹介します。 本エントリーでは... 続きを読む

HTMLやCSSでのプロトコル表記（http:、https:）の省略について: 小粋空間

2012/05/10 343 users リソース エントリー CSS 便乗記事 省略

HTMLやCSSではプロトコル表記（http:、https:）の省略が可能です。 ということで、プロトコル表記の省略に関することを色々調べてみましたので、本エントリーで紹介致します。 このエントリーは、「「Google HTML/CSS Style Guide」を適当に和訳してみた」の以下の部分に対しての便乗記事です。 埋め込みリソースからプロトコル表記（http:,https:）を省略する。 <... 続きを読む

YouTubeを効果的に見せるための12の隠しパラメータ: 小粋空間

2012/04/23 101 users YouTube frameborder パラメータ src

YouTubeの動画をブログに貼り付けるときに次のようなiframeタグを利用するのはご存知かと思います。 <iframe width="470" height="269" src="http://www.youtube.com/embed/YDxYmhze5Do" frameborder="0" allowfullscreen> </iframe> このiframeタグに隠しパラメータ（隠されて... 続きを読む

jQueryによる要素の存在チェックまとめ: 小粋空間

2012/04/17 94 users jQuery selector jQueryオブジェクト

jQueryによる要素の存在チェックまとめです。 jQueryを実行する際、「$(selector)」が成功してjQueryオブジェクトが生成されたことを判断したいケースがあるかと思います。なかったらすいません。 ということで、jQueryで要素（jQueryオブジェクト）が1つでも存在することをチェックする方法を調べてみました。実際に動かした結果でまとめてます。 サンプルはscript要素で括っ... 続きを読む

phpMyAdminでインポートできない大きなファイルを一気にインポートできる「BigDump」: 小粋空間

2012/04/03 78 users phpMyAdmin インポート サーバ移転 PHPベース

phpMyAdminを使ったSQLファイルのインポートにはファイルサイズの制限があり、サーバ環境によってはサイズの大きいSQLファイルをインポートできない場合があります。 これを解消してくれるのが「BigDump」です。 BigDump BigDumpは、PHPベースのMySQLインポートツールです。 先日行ったサーバ移転で、100MBほどあるSQLファイルのインポートにこれを利用しました。約10... 続きを読む