Googleカレンダーは、入力した予定を他の人と共有したり、カレンダーを複数人共同で編集できるとても便利なツールです。また、埋め込みコードを発行すれば簡単にサイトに埋め込むことができます。 埋め込みコードを利用した場合、カレンダーの見た目が固定でカスタマイズできないため、既存のサイトの見た目に合わせることができず使い勝手はよくありません。 しかし、フリー配布ライブラリであるFullCalendarを使えば、サイトにキレイな見た目のカレンダーを設置することができます。 Googleカレンダーとリアルタイムに連携 CSSでデザインを自由に変更できる 月ごとのカレンダーの他、週ごとのカレンダーや予定リストの形で表示することもできる デフォルトではシンプルなデザインですが、見た目のカスタマイズ性がとても高く、CSSを使うことができればオシャレなサイトにも馴染ませやすいのが特徴です。 Googleカ

サイト制作において、アクセスマップなどの地図の表示はどうしてますか？「Google Maps API」を利用したり、ちょっとデザインにこだわりたい時にはイラストに描き起こしたりしてるんじゃないでしょうか。 今回は、Google マップをちょいとカスタマイズすれば、まるでイラストマップみたいに見せることができるんだぜ！というお話です。 記事中に出てくる画像は2012.3現在のもののため、現在のGoogle Maps APIでの表示とは異なりますので注意です…X(。 リンク切れしていたところを、なるべく近い内容の存在するページにリンクし直しました（2015.7.20追記）。 まずはしっかり抑えておきたい「Google Maps APIの基本」から。 基本をすっ飛ばして早速カスタマイズしたい方はこちら↓。 Google Maps APIの基本 Google マップはGoogle API キーを発

同一ページ内でYouTubeプレーヤーを複数埋め込んだとき、 通常だと同時に再生することができてしまいます。 実装前のデモページ 今回はこれを回避する方法を考えてみました。 対応方法案 対応方法として、以下の3案を考えました。 YouTubeプレーヤーではなくサムネイルを設置するようにして、サムネイルをクリックしたら ライトボックスを表示して再生するようにする。 YouTubeプレーヤーの設置を一つだけにして、代わりにサムネイルを設置。 サムネイルをクリックでYouTubeプレーヤーのURLが切り替わるようにする。 YouTubeプレーヤーをクリックして再生したときに、 他に再生しているYouTubeプレーヤーがあったら停止させる。 今回はYouTubeプレーヤーを複数埋め込むことが決まっていたたので、3番目を実装してみました。 ただ、実装するのは3案どれでも問題なさそうなので、場合に応じ

Webページ上にTwitterの「ツイートする」ボタンを設置することは 今では手軽に出来るようになっていますが その場で自由にツイートできるテキストエリアをページ上に配置することは 意外と面倒だったりします。 そんなTwitterのツイートボックスを、「jTweetsAnywhere.js」プラグインを使って ページ上に設置するサンプル（…ただの実験サンプル）を作ってみたので紹介してみます。 使用するjQueryプラグイン「jTweetsAnywhere.js」はこちら。 ≫jTweetsAnywhere – jQuery Twitter Widget with @Anywhere support まずサンプルから。 jQuery TWEET BOX テキストエリアにつぶやくテキストを入力した後、「Tweet」ボタンをクリックすると、 自分のTwitterアカウント（連携承認が必要）でつぶ

Twitterの諸機能をサイトに導入するためのJavaScriptフレームワーク「@Anywhere」がリリースされましたね。 その場でフォローしたりサイト上から直接Tweetしたり、Twitterがナチュラルに様々なサイトに組み込まれるようになるんですかね。 と言うわけで僕も軽く試してみたので、使い方のメモと雑感を書いてみます。 まずはアプリケーション登録 New Twitter Applicationでアプリケーション登録を行う。 Application Name @AnywhereでTweetした時に表示されるアプリケーション名。</dd> Application Website Application NameにリンクされるサイトのURL。 Organization 組織名？とりあえず空白で。 Callback URL コネクションの許可などで一度Twitterにアクセスした場合に

この記事以降 Twitter API の仕様が変わっており、このままでは正しく機能しない場合があると思います。近いうちに今のやり方を書くので、それまで参考程度にご覧ください。 Twitter API の OAuth でひととおりやってみた。 忘れないようにメモ。 大雑把な流れ Twitter にアプリケーションを登録する。 Consumer Key と Consumer secret を取得する。 リクエストトークンを取得する。 認証用 URL を取得する。 ユーザーから承認を受ける（bot の場合は自分でやる）。 アクセストークンを取得する。 API にアクセスする。 以下、やった作業の手順です。 事前準備 HTTP_OAuth を使えるようにする OAuth の通信部分そのものは PEAR の HTTP_OAuth を使うことにしたので これをインストールする。 一番めんどくさい部分を

特定のテーマに関する情報を集めた、ポータル的なWebサイトを作りたい――。そんなとき、JavaScriptを使って、他のWebサイトのフィードから情報を得て、そのサイトの最新情報を表示できると便利です。 しかし、普通の方法ではできません。というのも、JavaScriptでフィードを読み込むのに使う「XMLHttpRequest」オブジェクトでは、セキュリティ上、異なるドメイン（クロスドメイン）とのやり取りが制限されているためです。そこで、「Google AJAX Feed API」を使いましょう。 Google AJAX Feed APIは、指定したフィードをGoogleのサーバー側で取得し、JSON（JavaScript Object Notation）と呼ばれるJavaScript専用のデータ形式に変換します。変換されたデータは、JSONP（JavaScript Object Nota

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert