Googleマップのカスタマイズがお手軽簡単にできる「EZ Map」を丁寧に説明します - イケメン息子とぐうたら猫の成長見守りブログ
皆様、こんにちは。 本日は埋め込み用Googleマップのデザインカスタマイズについてのエントリーを書きます。 私はブログを書いていますが、企業や個人のWebサイトでも地図の表示のためにGoogleマップを貼り付ける機会って結構あると思います。普通に貼ることもできますが、Webサイトの雰囲気と合ってなかったりして残念なことってありませんか？ というわけで、せっかくなのでサイトとマッチするデザインにして貼り付けちゃいましょう！オリジナルな雰囲気も出るので、他の人から見られたときに結構目に留まると思いますよ。 カスタマイズのやり方も色んなところでも載っていますけど、今まではステップが多かったりプログラムの知識が多少必要だったりすることが多かったです。今回は「EZ Map」というWebブラウザ上で簡単にカスタマイズのコード生成ができるツールができたのでそちらのやり方を説明したいと思います。 手順に
小さくても大きなニュース。Google Mapsのオフライン機能がロールアウト
5月の Google I/O で予告されていた Google Maps のオフライン機能がこれから順次 Android ユーザー向けにロールアウトするというニュースが、Google オフィシャルブログで告知されています。 Google Maps アプリ上のオフライン機能はこれまでも限定的にはありましたが、今回は地図を国や地域単位であらかじめダウンロードしておくことで道順案内も、レストランなどといったロケーションの開店時間などもオフラインで有効になるのが売りとなっています。 使い方は普通に場所を検索するように地名を入力し、オフラインボタンを押すことでデータが端末にダウンロードされます。デフォルトではWi-Fiを利用して行われるので、旅に出かけるなどがいいでしょう。 あとはアプリが自動的に、通信を失うとオフラインモードに移行し、通信が回復すると元に戻るようになっています。 実際に利用する際には
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キー)が必要です。この章では取得方法を説明します。 アカウントの用
純正iPhoneアプリより便利な代替アプリ | ライフハッカー・ジャパン
AppleはiOSをアップデートさせるたびに、デフォルトでiOSにインストールされているアプリも少しずつそれに対応させています。しかしながら、それらのアプリのラインナップはローンチ当初とほとんど変わっていないので、もはや私たち多くのユーザにとって斬新と感じられるものではなくなっています。 Appleのアプリの多くはデザインも機能もややマンネリ感があり、全体的なパフォーマンスに対して不満を高めている人が多いかもしれません。何よりもAppleのアプリの多くがApple独自のデータエコシステムとiCloudに限定対応した作りになっています。しかし今やそれらに代わる優秀な他社製アプリがたくさん出ています。マップアプリからメールアプリまで、もっと使い勝手の良い代替アプリをご紹介していこうと思います。 Apple純正の『マップ』から『Google Maps』へ Apple純正の『マップ』はリリースされ
AppleとGoogleのマップアプリに見るUXデザイン思想の違いを徹底比較
スマートフォンアプリの開発ではユーザーエクスペリエンス(UX)を高めることが重要で、優れたアプリには必ずと言ってよいほどUXを高めるデザイン上の工夫があるものです。人気の地図アプリである「Google Maps」と「Apple Maps」のUXデザインを比較すると、両アプリが異なる思想の下で緻密にデザインされていることがよく分かります。 Maps on iOS: Design Explosions #1 http://uxlaunchpad.com/designexplosions/1-mapping-on-ios.html 左がGoogleの地図アプリ「Google Maps」で右がAppleの地図アプリ「Apple Maps」。一見、よく似たデザインですが、UXデザインの思想は大きく異なっています。 ◆地図表示とツールの配置 これはGoogle Mapsのレイアウト。右の図は、ユーザー
Mischiefを日本語で説明書並みに徹底解説！ＤＬ～使い方まで
チュートリアルマニアックスの中の人、@sakimitamaですこんにちは。 海外で話題のグラフィックソフト「Mischief(ミスチーフ、ミスチフ)」 どんなもんかいな、と使ってみたら思った以上に使いやすく、触っていて結構楽しかったので多くの人が使えるように記事にしてみました。 ダウンロードから使い方、使ってみた感想まで徹底的に解説していきます！もちろん日本語！ 管理人の環境がWin→Macに変わったため、スクリーンショット等が混在しています。ご注意ください。 最終更新日 2014/05/01 ・Mischief 1.09がリリースに伴い、解説を1.11に対応させました。 （アップデートされる際はアップデート時の注意をご参照下さい） ・印刷用ショートカット一覧（1.11版）は現在作成中です。 目次 Mischiefとは？ Mischiefの特徴って？ Mischiefの動作条件 ダウンロー
完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)
作成：2014/01/27 更新：2015/08/07 Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コーディング前の準備 １．仕様書の確認 ２．入稿データの確認・スケジューリング HTML5 マークアップ ３．テンプレート作成 ４．条件付きコメント ５．GCF＋キャッシュクリア ６．OGP記述 ７．ファビコン ８．アウトライン作成 ９．バリデーターをチェック CSS の設定 １０．ノーマライズスタイル レスポンシブデザイン設計 １１．モバイルファーストを基準に設計 １２．プログレッ
GoogleMapの簡単な埋め込み方法。アイコンやデザインのカスタマイズも！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、はやちです(◞‸◟) いきなりですがみなさん、せっかくデザインされたWebサイトの中にデフォルトのGoogleマップがあるとなんだかもったいなく感じませんか？(◞‸◟) どーにかこれをうまくデザインできないだろうか(◞‸◟) ということで、今回は簡単にGoogleマップのデザインをカスタマイズできる方法をご紹介したいと思います٩( ᐛ )و Googleマップを表示させよう まずはじめに基本から。Googleマップを設置しましょう( ˘ω˘)☝ Googleマップの設置 <script src="http://maps.google.com/maps/api/js?key=ここにAPIキーを入れます&language=ja"> </script> headerタグAPIを取得するスクリプトをつけます。 APIの取得はこちらをご参照ください <div id="js-map-tae
こんなに便利だったのか！「Googleマップ」アプリを使いこなす8つの小技まとめ
片手で拡大、縮小する 一回タップした後に素早くもう一度タップし、そのまま上にスワイプすることでマップがズームします。 下にスワイプすると縮小します。 まぁ歩きスマホがなんだかんだと言われてますが、スマホ片手にウロウロしたいときはこの小技がすげー便利です。 たまに意図せず発動してイライラしますが。 交通状況、路線図などを見る 左下にでっぱりがあるので押してやると… 交通状況（渋滞状況）やら航空写真やらに切り替えるボタンが出ます。 この辺は小技と言うよりも基本技ですが、交通状況なんかは車ユーザーには便利なんじゃないでしょうか。 自宅や職場を設定する 上で書いたメニュー内の「設定」からは、自宅や職場の位置を登録することができます。 自宅か職場を選択して住所を入力します。 登録された。 新しい職場や家に移った場合は登録しておくと、地図上に常に目立つようにマークが表示されます。 これでもう迷わない。
スマートフォンサイトのHTMLコーディングメモ12個 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
グーグル、「Chrome」でプッシュ通知を可能に--「Google Cloud Messaging for Chrome」発表
Googleは、ブラウザベースのアプリケーションにもそうでないソフトウェアと同等の機能を持たせるため、「Chrome」で動作しているウェブアプリケーションにプログラマーがプッシュ通知できるようにした。 Googleは米国時間5月9日、「Google Chrome」および同ブラウザベースのOS「Google Chrome OS」でプッシュ通知機能を利用できるサービス「Google Cloud Messaging for Chrome」（GCM）の提供を開始した。Googleで製品マネージャーを務めるMark Scott氏は、同サービスをブログ投稿で発表した。 この技術により、株価のアラートやニュース記事など、ブラウザでのアクションを呼び出すメッセージをサーバが送信できるようなる。このサービスを利用すると、開発者のサーバがGoogleのGCMサーバにメッセージを送信し、GCMサーバはChrom
ウェブページを保存して閲覧できる、魚拓関連ウェブサービス9選
ネットにおける「魚拓」といえば、ウェブページのキャッシュをクラウド上に保存すること、およびそのサービスを指す。将来的に消えてしまう可能性があるページを保存しておき、あとから参照できるようにするこれらのサービスは、サーバに何らかの障害が発生してオリジナルのページにアクセスできなくなった時の代替としても使えるほか、世代ごとのコピーを保存するクリッピングの用途にも有益だ。 今回は、任意のウェブページをクラウド上に保存できる、いわゆる「魚拓」サービスと、ウェブページのキャッシュを定期的に保存しているウェブサービスを紹介する。これらを使いこなせば、万が一の場合にオリジナルのページが見られなくなっていて困り果てることもなくなるはずだ。併せてウェブページの内容を画像化もしくはPDF化して保存できるサービスも紹介するので、用途に合わせて役立てていただきたい。 ウェブページのキャッシュを保存するサービス ま
新Google Mapsアプリ採用のフレームワーク NimbusKit がいい感じ | fladdict
iPhoneの新しいGoogle Mapsのアプリ、色々弄り倒してますがステキな感じ。 でこれひょっとして、「NimbusKit使ってない？」って思ったら、案の定で使ってた。 NimbusKitはiOS用のヘルパークラスと、コンポーネントと、デバッグツールの集合体。 以下のような機能がサクサクとつけられる。 CSSスキニング インターフェースの外見にCSSを適用できる。ビューのカスタマイズがラクチンに。 TextLabel iOSの微妙なTextLabelにリッチテキストやリンクがつけられるように。 バッジ 通知件数などのバッジを簡単に作成。 他アプリとの連動 他アプリ・・・マップ、ストア、電話、SMS、FB等の連携をラクチンに。 アプリ内ホーム画面 ホーム画面的なUIをアプリ内に簡単に追加できる。 キャッシュ／非同期通信つきのImageView 画像ローダー付きのImageView拡張。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flatis
Loading...