手軽になった！Google Maps API V3 (1/2)
Web上で地図を表示するツールの定番といえば「Googleマップ」。独自の地図を簡単に作れる「Google Maps API」を使って、会社案内のページに地図を埋め込んだり、地図と連動するネットサービスを運営している方も多いでしょう。 このGoogle Maps APIの新バージョン「Version 3」（以下V3と略）が5月27日に公開されました。今回は、V3を使って地図を表示する基本的な手順を紹介しましょう。 Google Maps API V3の主な変更点 Google Maps API V3では、以下の点が新しくなりました。 （1）API Keyが不要 V2まででは、Google Maps APIを使うためにはAPI Keyを取得する必要がありましたが、V3では不要になりました。 （2）iPhone／Androidへの対応 iPhoneやAndroidで地図を高速に表示できるように
サンプルで学ぶjQuery：(X)HTML/CSSを操作する (2/7)
2．(X)HTMLの変更と取得 text() ではテキストを操作できましたが、(X)HTMLのタグを含むテキストを操作したい場合は、html() という命令を利用します。 ■(X)HTMLの変更 html()を利用して(X)HTMLを変更するには、html(...)の内側に変更後の(X)HTMLを記述します。 ▼サンプルコード（スクリプト部分） $("p#first").html("<strong>変更後</strong>"); 上記のサンプルコードを実行すると、id属性にfirstが設定されているp要素の内容が、「<strong>変更後</strong>」に変更されます。 ▼サンプルコード（元の(X)HTML部分） <p id="first">変更前</p> ▼実行結果（実際のWebページ） <p id="first"><strong>変更後</strong></p> ■(X)HTMLの
IE9がHTML5 Canvasに対応、VideoやWebフォントも
米マイクロソフトが開発中の「Internet Explorer 9」（IE9）で、HTML5のCanvas/Video/AudioおよびWebフォントがサポートされることが分かった。同社が米国現地時間23日に公開した「Platform Preview 3」（PP3）で実装された。 HTML5 Canvas/Video/Audioは一部で「Flashの代替技術」と表現されることもあるHTML5の目玉機能だ。CanvasはJavaScriptを使って図形を描く機能で、VideoとAudioはプラグインを使わずに動画や音声を再生できる。PP3の時点でIE9がサポートする動画・音声フォーマットと他のブラウザーの対応状況は以下のとおり。 Video Audio
ASCII.jp：iPhoneとカレンダーを同期 Google Syncを試す
複数のカレンダーを表示したい さて、筆者はGoogleカレンダーで「仕事」「Mac/iPodタブの公開予定」「個人」という3つのカレンダーを作り、予定の内容ごとに使い分けている。Googleカレンダーで表示した際、色でどんな予定なのか把握できるので便利なのだ。 しかし、先ほどまでの設定では、3つあるカレンダーのうち、最初に作った「仕事」しか表示されなかった。加えて、別のユーザーが公開した共有カレンダーも出てこない。これらをiPhoneの「カレンダー」アプリで表示するためには、iPhoneのSafariでGoogle Syncのページにアクセスして、カレンダーの設定を変える必要がある。 iPhoneのSafariで「m.google.com/sync/」と入力してGoogle Syncのページを開く。「この端末はサポートされていません」と表示されるが、気にせずに「言語を変更」をタップして、言
jQueryだけで作る、サムネイル画像を魅力的に見せる方法 (1/5)
普段あまり目にしないようなインパクトのあるサイトを作りたい。そんなときにはいつも見ている日本国内のWebサイトだけでなく、海外サイトに目を向けてみるといいかもしれません。これまでにもこの連載ではいくつかの海外サイトを紹介してきましたが、今回見つけたのはアルゼンチンのWebサイトです。 「Sikker」という名前のサイトは、Webデザイナー・Nicolas Calabreseさんのポートフォリオサイト。1ページのみ、スクロール無しの“1枚絵”のようなごくごく小さなサイトですが、その分、CSSやJavaScriptの小技を効かせて、カッコよく楽しいサイトにデザインされています。今回は、このSikkerをお手本とさせてもらうことにします。 今回のお手本サイト：『Sikker』 アルゼンチンのWebデザイナー、Nicolas Calabreseさんのポートフォリオサイト。グローバルブランドのロゴが
ブラウザーテストの決定版！MS謹製ツールが登場
ブラウザーによって差異の出るWebページの表示テストを効率化したいWeb制作者に朗報だ。マイクロソフト製のブラウザーテストツールが、3月に米国で開催された“MIX09”（関連記事）で発表された。現段階ではInternet Explorer（IE）6～8の表示テストが可能で、正式版ではFirefoxやSafariもサポートする計画だという。 新ツールの名前は、「Expression Web SuperPreview」。現在、最初のプレビュー版「Expression Web SuperPreview(March Preview)」が、同社のブログで公開されている。正式版は、Webオーサリングツール（Dreamweaverの対抗製品）の次期バージョン「Expression Web 3」に同梱される予定だ。 このSuperPreviewを使えば、通常は共存できない、異なるバージョンのIEレンダリン
自分だけのPhotoshopが作れる！超便利な新機能
間もなく出荷が始まる「Adobe Creative Suite 4（CS4）」（関連記事1、関連記事2）。多彩な製品群、見どころの多い新機能の中で、個人的に「これはいい」と思ったのが、勝手に“Photoshop CS4の目玉機能”と思い込んでいる強力なカスタマイズ機能だ。 この新機能を使うと、なんと自分専用のユーザーインターフェイス（UI）が作れてしまう。もう少し詳しく言うと、Photoshopのツールやコマンドの中からよく使うものだけを抜き出して、独自のパネル（パレット）が作れるのだ。11月18日にはカスタマイズ用ツール「Adobe Configurator」のプレリリース版が米アドビ システムズから公開され、いよいよ一般ユーザーも試せるようになった。編集部で確認したところ、日本語版のPhotoshop CS4（ベータ版）環境でも動作したので、簡単な使い方を紹介しよう。 Adobe Co
たった6行でWebサイトのUIをガラッと変える
「こんな長いWebページ、まったく読む気がしない」。Webサイトを閲覧していてこんな経験をしたことは誰しもあるのではないだろうか。一方で、Webサイトを作る側にとっては、どこまでを1ページにまとめるかは常に悩むところだと思う。長いからといってむやみにページが分割されているのも考えもので、今度は「次のページへ」ボタンをクリックするのが面倒になり、ストレスがたまる。 CogniTom Academic Designが作った「bookreader.js」は、そんな悩みを解決してくれるかもしれない。bookreaderは、本や雑誌をめくるような感覚で、Webページの本文を横にスクロールさせるJavaScriptライブラリだ。 「bookreader.js」のWebサイト。サイト自体がbookreader.jsを使ったデモサイトを兼ねている。中央にある [<] [>] をクリックすると1ページずつ、
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
実践！iPhone＆Androidサイト制作ガイド
IEにも対応！10分でできるWebフォント実装法 (1/3)