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

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

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

ウェブサイトの画像にAmazonのアフィリエイトリンクを簡単に設定できる「Amazon Publisher Studio」の使い方: 小粋空間

2014/04/13 13 users アフィリエイトリンク Amaz ウェブサイト Amazon

ウェブサイトの画像にAmazonのアフィリエイトリンクを簡単に設定できる「Amazon Publisher Studio」の使い方を紹介します。 １．完成イメージ まず最初に、「Amazon Publisher Studio」でウェブサイト上の任意の画像に設定したアフィリエイトリンク（赤枠部分）です。 このリンクにマウスをポイントすると、次のように商品情報が表示されます。 ということで、「Amaz... 続きを読む

YouTube動画をGIFアニメに変換する方法: 小粋空間

2013/11/06 23 users YouTube動画 GIFアニメ オプション Sign In

YouTube動画をGIFアニメに変換する方法を紹介します。 ここでは動画をGIFアニメに変換してくれるサービス「Giflike」を利用します。 Giflike １．アカウント作成 Giflikeのページ右上にある「Sign in」をクリック。 下の方にある「Create an account in seconds.」をクリック。 任意のユーザー名とパスワード、メールアドレス（オプション）を入力し... 続きを読む

文字を上下反転させるサービス「Lunicode」のまとめ: 小粋空間

2013/10/11 23 users GitHub Lunicode 上下反転 上下 まとめ

ご存知の方も多いと思いますが、文字を上下反転するサービス「Lunicode」の紹介です。 Lunicode 文字反転だけを紹介しているサイトが多いのですが、他にも色々な機能があるのでまとめて紹介したいと思います。 またJavaScriptライブラリがGitHubで公開されているので、利用方法についてあわせて紹介します。 １．文字を上下反転する 使い方を説明するまでもありませんが、ページ上のテキスト... 続きを読む

Windows向けMySQL管理クライアント「HeidiSQL」: 小粋空間

2013/09/03 18 users クライアントソフト phpMyAdmin MySQL 概要

Windows向けのMySQL管理クライアント「HeidiSQL」を紹介します。 HeidiSQL １．概要 「HeidiSQL（ハイディSQL/ハイジSQL）」はWindows向けのオープンソースソフトウェアです。 MySQLのクライアントといえば「phpMyAdmin」が有名ですが、たとえばローカルなMySQLを操作するのであればクライアントソフトの方が設定が簡単です。 ちなみに、HeidiS... 続きを読む

入力フォームの全角・半角を勝手に変換してくれる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... 続きを読む

jQuery UIを使ってテーブルをドラッグ＆ドロップでソートできるようにする: 小粋空間

2013/04/11 30 users jQuery jQuery UI ドラッグ＆ドロップ とおり

jQuery UIを使ってテーブルをドラッグ＆ドロップでソートできるようにする方法を紹介します。 テーブルをソートするには、jQuery UI Soatableを利用します。 １．基本 まず、jQueryのsoatable()を使ったテーブルのサンプルを示します。 サンプル サンプルのコード（抜粋）は次のとおりです。 <script src="http://ajax.googleapis.com/... 続きを読む

jQuery UIのtoggle()でjQueryのslideToggle()よりカッコよくスライドさせる方法: 小粋空間

2013/04/04 33 users toggle jQuery jQuery UI とこ 要素

jQuery UIのtoggle()を使って、jQueryのslideToggle()よりカッコよくスライドさせる方法について紹介します。 ある要素をスライドさせながら表示・非表示を行うには、jQueryのslideToggle()（またはslideUp()とslideDown()）がよく知られていると思います。 が、slideToggle()ではコンテンツの動き方に個人的に不満があり、調べたとこ... 続きを読む

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

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

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

jQuery UI Tabsのタブ切替でブラウザの「戻る」「進む」を有効にする方法: 小粋空間

2013/03/25 38 users Tabs タブ切替 タブ タブ切り替え jQuery UI

jQuery UI Tabsのタブ切替でブラウザの「戻る」「進む」を有効にする方法を紹介します。 １．jQuery UI Tabsについて 基本情報として、jQuery UI Tabsでタブ切り替えを行う方法については「jQuery UI Tabsを使ってタブを実装する」を参照してください。 サンプル ２．hashchangeプラグインについて jQuery UI Tabsのタブ切替でブラウザの「... 続きを読む

ページを移動（離脱）するときに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つ横に並べた形をした記号のことで、語尾を省略したり、言葉の余韻を残すときに使う「…」です。 ２．問題点 たとえばブログを書いているときに、記事編集画面のテキストエリアでは「…」と表示されているのに、公開したページでは「…」となることがあります。 ３．原因 三点リ... 続きを読む

スマホのマルチタッチジェスチャーを判断できるjQueryプラグイン「Hammer.js」: 小粋空間

2013/02/01 33 users jQueryプラグイン Hammer.js ダウンロー 拡大

スマホでのタップやスワイプなど、マルチタッチジェスチャーを判断できるjQueryプラグイン「Hammer.js」を紹介します。 Hammer.js １．機能 このプラグインを利用すれば、スマホなどのタッチデバイスで、 タップ ダブルタップ スワイプ 長押し トランスフォーム（ピンチイン・ピンチアウト） ドラッグ のイベントを判断できるようになります。 （クリックで拡大） ２．プラグインのダウンロー... 続きを読む

WordPressのコメント一覧に新着マークを表示する「wp_recent_comments_with_newmarkプラグイン」: 小粋空間

2012/12/20 21 users ウィジェット プラグイン 完成例 右側 表示件数

WordPressで最近のコメント一覧に新着マークを表示する「wp_recent_comments_with_newmarkプラグイン」を公開します。 １．機能 このプラグインを適用すれば、最近のコメント一覧のコメント投稿ユーザー名の右側に新着マークを表示することができます。 完成例 コメント一覧は専用のウィジェットで簡単に制御できます。表示件数はもちろん、新着マークや新着表示時間を変更することも... 続きを読む

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」」ですが、投稿済み記事の画像に対して設定をひとつひとつ変更するのは現実的に厳しいと思われます。 とはいっても、他のサイトでページをスクロールすると画像がふわっと浮かび上がるアクションには憧... 続きを読む

Windowsのシャットダウンを止める方法: 小粋空間

2012/11/14 22 users シャットダウン 私事 スリープ Windows 再起動

Windowsを間違ってシャットダウンしてしまったときに止める方法を紹介します。 １．問題点 私事ですが、その日の作業が終わったとき、Windowsはシャットダウンさせず、スリープするようにしています。 が、メニューを選択するときに誤って「スリープ」の上にある「再起動」や、なぜか一番下にある「シャットダウン」をうっかり選択してしまうことがあります（バカ）。 ということで、シャットダウンを止める方法... 続きを読む

ノンプログラマーのための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）は、「よく反応し... 続きを読む

AjaxでファイルをアップロードするjQueryプラグイン「jQuery.upload」: 小粋空間

2012/08/31 19 users Ajax jQueryプラグイン プラグイン サンプル 以下

AjaxでファイルをアップロードするjQueryプラグイン「jQuery.upload」を紹介します。 jQuery.upload １．機能 フォームのファイルアップロード実行に「jQuery.upload」プラグインを利用することで、Ajaxによるファイルのアップロードが行えるようになります。 以下のサンプルでお試しください。 サンプル ２．プラグインのダウンロード jQuery.uploadの... 続きを読む

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

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

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