3ステップでオリジナルのGoogle Analyticsレポート画面を作成できる「Google Analytics Embed API」
twitter facebook hatena google pocket Google AnalyticsにEmbed APIがあるのをご存知でしょうか。 これはGoogle公式のAPIで、利用すると難しい知識がほとんど不要で、知りたい数値を簡単にグラフ化してもらえちゃいます。 というわけで、このEmbed APIを紹介します。 What Is The Embed API - Overview - Google Analytics -- Google Developers sponsors 下準備 利用するためには、まずAnalytics APIを有効にすることとclient IDの取得が必要です。 Analytics APIの有効化 ・Google Developers Consoleへ。 ・適当なプロジェクトを作成。 ・メニューから「APIと認証」にあるAPIをクリック。 ・Anal
[メモ]ロケーションメディア（ジオメディア）
twitter facebook hatena google pocket foursquareが世界的なロケーションメディア（ ジオメディア）の幕を開き、いまやmixiまでもが乗り出す狂騒の時代。 一時期はまってましたが、あらためてmixiチェックイン到来でまた気持ちが復活。 以前似たようなエントリーを書きながら、また現状サービスをまとめました・・・。 foursquare 押しも押されぬ世界的知名度NO.1のサービスです。 注目記事はこのあたりですかね。 Foursquareが300万利用者を達成。新たなFoursquare 2.0も間もなく公開予定 Facebook Placesとの連携もあり、ますますの発展が期待されます。 日本語にローカライズされるのが待ち遠しい感じです。 sponsors コロプラ 日本のさきがけコロプラさんです。 近年は旅行業界との提携などを積極的に行い、新聞
![[メモ]ロケーションメディア（ジオメディア）](https://cdn-ak-scissors.b.st-hatena.com/image/square/9a5303cbba6c446c79ab5905e84b4664586c7dec/height=288;version=1;width=512/http%3A%2F%2Fwww.skuare.net%2Fassets_c%2F2010%2F09%2Fgeo_1-thumb-300x152-501.jpg)
Facebook風のツールチップを実現するJavaScript「tipsy」
twitter facebook hatena google pocket jQueryを使用してFacebookスタイルのツールチップを実現する「tipsy - Facebook-style tooltip plugin for jQuery」です。 ツールチップとは吹き出しのようなもので、リンクや画像などの説明をわかりやすく表示してくれます。 sponsors 使用方法 tipsyからファイルをダウンロードします。 <link rel="stylesheet" type="text/css" href="tipsy.css" /> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.tipsy.js"></script> <sc
テーブルの内容をグラフで表示するJavaScript「graphTable」
twitter facebook hatena google pocket テーブルで表組みを作って、それにあわせて画像でグラフを作る・・・ そんな作業は億劫です。 なので、jQueryプラグイン「graphTable」を使用して、楽をしましょう。 sponsors 使用方法 graphTableからjquery.graphTable.jsをjQueryからjquery.js、flotからjquery.flot.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.flot.js"></script> <script type="text/javascript" src="jquery.graphTable
コンテンツをスライド表示するjavascript「glider.js」
twitter facebook hatena google pocket タブやアコーディオンなどを使用することで限れられたスペースを活用することができます。 このような手法の一つにcarouselというものがあります。 glider.jsではcarouselを作成することができます。 sponsors 使用方法 Glider.jsからZipファイルをダウンロードし、全てをheadに書き込みます。 <link rel="stylesheet" href="http://yourdomain/glider.css" type="text/css" media="screen"> <script src="http://yourdomain/prototype.js" type="text/javascript"></script> <script src="http://yourdomai
CMSツール「Movable Type」を使いこなすためのサイト25
twitter facebook hatena google pocket CMSツールはさまざま公開されていますが、「Movable Type（MT）」ほど日本に根付いたものはないでしょう。 BlogツールからスタートしたMTはバージョン4.xからCMSツールとして大きく変貌を遂げ、オープンソース版もリリースするなど利便性が非常に高くなりました。 今回はこのMTを使いこなすためのサイトを紹介します。 sponsors Reference ・Movable Type 4 ドキュメント ・テンプレートタグリファレンス HowTo / Review ・Movable Type備忘録 ・小粋空間 ・Ogawa::Memoranda ・Open MagicVox.net ・The blog of H.Fujimoto ・Dr.blog ・MTまとめサイト ・Movable Type入門 ・Mova
Movable Typeで手軽に訪問者数などを確認するプラグイン「Visitor Stats」
twitter facebook hatena google pocket サイトの訪問者を分析するツールには代表的なところではGoogle Analyticsがあります。 しかし、高機能すぎることやサイトを見に行く手間が生じます。 Visitor StatsはMovable Typeのプラグインとして、管理画面で訪問者数とPVを手軽に確認することができます。 sponsors 使用方法 Visitor StatsからダウンロードしたVisitorStatsディレクトリをmt/plugins/以下にアップロードします。 MTにログインすると自動的にデータベースがアップグレードされます。 最後にhead内に<MTVisitorStatsTracker>を書き込めば完成です。 あとは、管理画面でVisitorsとViewsで確認できます。 また、<MTVisitorStatsCounter>と
script.aculo.usベースの日付選択javascript「DatePicker」
twitter facebook hatena google pocket フォームで日付を選択する際にポップアップでカレンダーを表示することで訪問者のユーザビリティを向上できます。 DatePicker using Prototype and Scriptaculousでは、script.aculo.usベースで実現しています。 sponsors 使用方法 DatePicker using Prototype and Scriptaculousからdatepicker.js、datepicker.cssをダウンロードします。 さらにscriptaculous.jsの1.7.0をダウンロードします。 <script src="http://yourdomain/prototype.js" type="text/javascript"></script> <script src="http:
カレンダー表示＆日付選択させるjavascript「Fancy MooTools Date Picker」
twitter facebook hatena google pocket 申込フォームなどでは、よく日付を入力してもらうことがあります。 これを簡単にかつ奇麗なデザインで実現したFancy MooTools Date Pickerを紹介します。 sponsors 使用方法 Fancy MooTools Date Pickerから、DatePicker.js、DatePicker.css、date.gif、datefocus.gifをダウンロードします。 また、mootoolsからmootools.jsもダウンロードします。 <script src="http://yourdomain/mootools.js" type="text/javascript"></script> <script src="http://yourdomain/DatePicker.js" type="text/
既存のテーブルを簡単にソートさせるjavascript「Table-Sort」
twitter facebook hatena google pocket テーブルで作成した表をソートさせるjavascriptは多くありますが、内部を少しいじらなければならないケースが多いです。 Table-Sortは、既存の仕組みでそのまま簡単にソートさせることができるjavascriptです。 sponsors 使用方法 Table-Sortのtable-sort.jsを、mootoolsからmootools.jsをダウンロードします。 <script src="http://yourdomain/mootools.js" type="text/javascript"></script> <script src="http://www.skuare.net/test/js/table-sort.js" type="text/javascript"></script> <script
ページを指定要素で分割するjavascript「pager」
twitter facebook hatena google pocket ページを作成する際にどうしても長文になってしまうことがあります。 しかし、内容自体は繋がっているので、なるべくなら単一ページに収めたい。。。 そんな我が儘をpager jQuery plug-inは、ページを指定要素で分割し、解決してくれます。 sponsors 使用方法 pager jQuery plug-inからpager.jsを、jQueryからjquery.jsをダウンロードします。 あとは以下のようにhead内に記述します。 <script src="http://yourdomian/jquery.js" type="text/javascript"></script> <script src="http://yourdomian/jquery.pager.js" type="text/javascri
高機能なツールチップjavascript「Prototip」
twitter facebook hatena google pocket リンクなどに説明を付与するツールチップというものがあります。 今回紹介するPrototipは、エフェクトや出す場所を調整できる高機能なjavascriptです。 sponsors 使用方法 Prototipからprototip.js、prototip.cssをprototypeからprototype.jsをダウンロードします。 ＊エフェクトを付ける場合はscript.aculo.usのeffect.jsが必要です。 <script src="http://yourdomain/prototype.js" type="text/javascript"></script> <script src="http://yourdomain/effects.js" type="text/javascript"></script
javascriptライブラリ「mootools」でポップなメニューを作成する
twitter facebook hatena google pocket メニューは訪問者が一番目にする機会の多い場所です。 そのため、目立ち、わかりやすいメニューを作成することが求められます。 popMenuではmootoolsを使用し、簡単に動きのあるメニューを作成する方法を紹介しています。 sponsors 作成方法 <script src="http://yourdomain/mootools.js" type="text/javascript"></script> <script type="text/javascript"> Window.onDomReady(function(){ Window.disableImageCache(); $S('#id名 li a').each(function(el) { var effect = el.effect('backgroun
クールな画像ギャラリーjavascript「jQuery Gallery」
twitter facebook hatena google pocket 画像ギャラリーのjavascriptは数あれどここまで凝ったものはなかったのではないでしょうか。 Image Gallery using jQuery, Interface & Reflectionsは、メニュー、サムネイル、リフレクションなど実にさまざまな処理を施します。 その分スクリプトが多くなっていますが。。。 sponsors 使用方法 Image Gallery using jQuery, Interface & Reflectionsからgallery.zipをダウンロードすると必要なファイルが全て手に入ります。 <script type="text/javascript" src="http://yourdomain/js/jquery/jquery.js"></script> <script typ
フォームをリアルタイムでチェックするjavascript「FormCheck」
twitter facebook hatena google pocket フォームで入力を間違われると確認のしようがなくなる可能性があります そのためにもフォームの入力項目を確認する必要があります。 Formcheck 2ではリアルタイムに入力内容を確認し、異なる場合は、ヒントを出すjavascriptを公開しています。 sponsors 使用方法 Formcheck 2からformcheck.jsとformcheck.cssをダウンロードします。 ヒント用に画像が幾つかありますので、ダウンロードした上でCSSのパスを修正してください。 またmootoolsからmootools.jsもダウンロードします。 <link rel="stylesheet" href="http://yourdomain/formcheck.css" type="text/css" media="screen"
テキストボックスを伸縮させるjavascript「resizeTextarea」
twitter facebook hatena google pocket ディスプレイの表示領域は使用環境によって異なってきます。 そのため、限れられたスペースを有効活用することが求められます。 Eject MediaではmootoolsベースのresizeTextareaを公開し、テキストボックスの伸縮を可能にしています。 sponsors 使用方法 resizeTextareaからresizeTextarea.jsを、mootoolsからmootools.jsをダウンロードします。 head内にこの2つのscriptを埋め込みます。 <script type="text/javascript" src="http://www.skuare.net/test/js/mootools.js"></script> <script type="text/javascript" src="ht
ソートするテーブルを作成するjavascript「SortableTable」
twitter facebook hatena google pocket ソートできるテーブルを作成するjavascriptは多く出回っています。 その中で簡単にソースをあまりいじることなく導入できるものはあまり多くありません。 SEO Blog - joost de ValkのSortableTableは外部javascript一つでソートテーブルを作成できます。 sponsors 使用方法 SortableTableからダウンロードしたsortable.jsをheadに挿入します。 <script src="http://yourdomain/sortable.js" type="text/javascript"></script> あとは普通にテーブルで表を作成し <table class="sortable" id="好きなid名"> と記入すれば完成です。 ただこのままでは寂し
リンクテキストをスクロールさせるjavascript「Scrollovers」
twitter facebook hatena google pocket 検索エンジンの高度化にともない閲覧者はトップページではなく、目的のページに直接アクセスする様になっています。 このため、サイト内の回遊率を高めるためリンクの視認性を高めることが必要になります。 Scrolloversではリンクにマウスをのせた時、リンクテキストをスクロールさせるjavascriptを公開しています。 sponsors 使用方法 Scrolloversからscrollovers.jsをダウンロードし、headに挿入します。 <script type="text/javascript" src="http://yourdomain/scrollovers.js"></script> またCSSに下記の様に記します。 a.scrollover { /* デフォルトカラー */ color: #557AFF
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AMP（Accelerated Mobile Pages）対応におけるサイト作成と広告表示などなど
Javascriptライブラリ