タグ

2015年8月21日のブックマーク (4件)

  • Google Maps JavaScript APIの使い方まとめ

    公開日: 2015/09/01 | 更新日: 2017/07/05 Googleが提供する、Google Maps JavaScript APIを利用して、ウェブページに地図を表示させる方法を説明します。通常の埋め込み型の地図とは違い、コントローラの調整、マーカーや吹き出しを配置したりなど、機能が満載です。 Google Maps JavaScript API V3 ReferenceGoogle Maps JavaScript API V3 ReferenceGoogle Maps JavaScript APIの公式リファレンスです。全てのメソッド、オプションなどについての解説が掲載されています。準備 (APIキーの取得)Google Maps JavaScript APIを利用するには、APIの有効化と、認証情報(APIキー)が必要です。この章では取得方法を説明します。 アカウントの用

    Google Maps JavaScript APIの使い方まとめ
  • ほんのちょっと高度なSVGスプライトの使い方

    当ブログではちょくちょくSVGについて書いていました。 (といっても、ほぼ月一更新なので、前に書いたのは1年くらい前かもしれませんが……) みなさま使ってらっしゃいますでしょうか? 今回は「ほんのちょっと高度なSVGスプライトの使い方」と銘打って、『グラフィックのモジュール化』を行うための基礎的な考え方と方法をお伝えします。 ロゴにこそ、使ってみようSVGスプライト このブログでもロゴ(というレベルのクオリティではありませんが…)をSVGで表示させています。 また、お気付きの方もいらっしゃるかと思いますが、このトピックス「Web Resource」とその他のトピックスでは使用しているロゴの形状が異なっています。 しかし、これらはすべて「一つのSVGスプライトファイル」の中の「同一データ」です。 アイコン等をひとまとめにして、httpリクエストをみだりに増やさず、かつ非常に軽量(これだけのグ

    ほんのちょっと高度なSVGスプライトの使い方
  • ユニークな見せ方や動きを実装したい時に使えそうなスクリプト 10 - NxWorld

    他ではあまり見かけることのないユニークな見せ方や動きを実装したいとき、遊び心あるイースターエッグを仕込んでおきたいときなどに個人的に使えそうだなと思ったスクリプトをまとめてみました。 ブラウザやデバイスによっては実装できないものも幾つかあるのでその点は注意が必要ですが、いずれもそこまで難しい記述などもなく実装することができます。 窓に水滴がついていく様子を表現できる「rainyday.js」 とにかく実際に動いているデモを見てほしいのですが、雨が降って窓に水滴が徐々についていく様子をリアルに表現することができるスクリプトです。 水滴のサイズやついていくスピード、ぼかしや不透明度具合を調整することができます。 水面に滴が落ちているような感じを表現できる「Raindrops.js」 コンテンツやセクションの区切りなどを水面に見立て、そこに滴が落ちてきたようなエフェクトを実装できるjQueryプ

    ユニークな見せ方や動きを実装したい時に使えそうなスクリプト 10 - NxWorld
  • 資生堂Webマスターが考える企業サイトリニューアルのポイントは「ユーザビリティ」と「美」 | 稲富滋のWebマスター探訪記

    木村さんは資生堂のグループ企業情報サイトのオーナーで、リニューアルを実施するに当たって、企業サイトの役割を次のように定めました。 目的をもってサイトを来訪してくれた人へ「目的の情報」と「資生堂のアピールしたい情報」を伝えること。 つまり、資生堂の企業サイト = 資生堂グループの「姿勢を伝える顔」ととらえて、リニューアルを実施しました。そこで、リニューアルのポイントとして次の3つを掲げました。 ポイント①「知りたい人」に「知りたいこと」を早く、正確に伝えるリニューアルで最初に掲げたことは、目的となる情報への「導線強化」です。 「グループ企業情報サイトへの訪問者は、キャンペーンなどで呼び込まれるのではなく、目的を持って自らの意思で訪問して来てくださる方です。この方々の目的に沿った情報をきちんと提供できることが大切です」と木村さんは言います。 ポイント②「資生堂らしさ」、それは「美」2番目のポイ

    資生堂Webマスターが考える企業サイトリニューアルのポイントは「ユーザビリティ」と「美」 | 稲富滋のWebマスター探訪記