エンジニア足立のコーディング日記

エンジニア足立のコーディング日記

ブログトップ >> 『Javascript』の記事一覧

『Javascript』の記事一覧

jQuery – $(“select”) / $(‘sele …

本日ですが、 セレクトボックス(プルダウン)を一括で操作したくて、 jQueryを使ってコードを書いていたのですが、 上手く動作しないとう問題が。。。 何で?としばらく考えて気づいたのですが、 ======================================== ・ ・ $select = $("input[type='select']"); ・ ・ ======== …

公開日 更新日

「REQUEST_DENIED」というエラーコード…

GoogleMap APIを利用してマップ表示させたいのですが、 「REQUEST_DENIED」というエラーコードが返ってきてしまいます。 APIキーは発行済みなので問題ないはず。。。と思っていたのですが、 「Google API Console」の「API Manager」に入って調べてみると、 ===============================Google M …

公開日 更新日

GoogleMap APIでAPIキーの発行が必須に!!

久しぶりにGoogleMap APIを利用した案件の対応を行ったんですが、 いつも通りにコードを書いて確認すると、 ==========================================================このページでは Google マップが正しく読み込まれませんでした。JavaScript コンソールで技術情報をご確認ください。==================== …

公開日 更新日

Google Static Maps API V1の終了

かなり前に組んだガラケーサイトでGoogle Mapを表示させていたのですが、 いつの間にか、 The Staticmap API v1 has been deprecated as of 2009, and turned down in January 2016... というメッセージの画像が表示されるようになっていました。 どうもGoogleのStatic Maps API V1が終了してしまっ …

公開日 更新日

「jQuery ui Datepicker」のオプション

前回の記事では、 「jQuery ui Datepicker」の設定方法について投稿しました。 https://www.deep-blog.jp/engineer/archives/3950   で、 今回はオプションについても少しまとめておきます。   といっても、 良く使用するものだけにはなりますが。   例えば、 テキストボックスだけではなく、 …

公開日 更新日

「jQuery ui Datepicker」の基本的な使い方

先日フォームの作成依頼があった際に、 日付欄はユーザーに直接入力させるのではなくdatepickerで選択出来るようにしたいと お客様から要望がありました。 ということで、 久しぶりに jQuery ui Datepicker を使うことに!! 設置方法は簡単です!! まず、 <head>~ …

公開日 更新日

videoタグを使用する際には、html5mediaもご一緒に!!

動画をサイト上に載せる場合、   HTML5でのコーディングがメインになってからは<video>タグを使用します。   こんな風に書きます↓↓ ========================================= <video id="video" autoplay poster="sample.jpg"> <source src="sample.mp4" type="video/mp4"> <so …

公開日 更新日

写真の右クリックコピーを禁止!!

弊社は不動産会社様にホームページを提供する機会が多いのですが、   その際に物件の写真を右クリックでコピー出来ないようにしたいという要望があります。   折角、時間と労力を使って撮影してきた写真を、   右クリックで簡単にコピペして流用されてしまう事があるからです。   そのような …

公開日 更新日

Geolocation APIで位置情報を取得して、Yahoo!地図を表示

Geolocation APIを使って位置情報を取得して、 Yahoo!地図を表示させてみました。   現在位置を取得する場合は、 navigator.geolocation.getCurrentPosition(成功時のコールバック関数, 失敗時のコールバック関数, オプション) を 定期的に位置情報を取得する場合には、 navigator.geolocation.watchPosition …

公開日 更新日

Yahoo!地図にコントロール追加

Web APIを使って、 Yahoo!地図にいくつかのコントロールを追加してみました!   例えば、 「Y.LayerSetControl」をセットすれば、 レイヤセット([地図][写真][地下街])の切り替えボタンを表示してくれます。   また、 「Y.SliderZoomControlVertical」をセットすれば、縦向きの「ズームコントローラ …

公開日 更新日

Yahoo!地図のWeb APIを使ってみました!!

弊社では今までGoogleMapしか使ってこなかったのですが、 使用制限の問題が面倒くさくて、Yahoo!地図を試してみました。   まずは、 http://developer.yahoo.co.jp/start/ 辺りからアカウント登録して、アプリケーション登録して、 「アプリケーションID」を取得しておきます。   で、 後はコードを書 …

公開日 更新日

IE10でLightboxが。。。

自作の画像ギャラリーが動作しなくなったと報告がありました。   調べてみると、 どうもIE10でも起こっている現象の様で、 恐らく使用しているLightbox辺りが何か悪さしてそう!!   ということで調査してみると、 やはり使用していたLightboxのバージョンがIE10に対応していなく、 それが画像ギャラリ …

公開日 更新日

ajaxzip2からajaxzip3へ変えてみました!!

弊社で日頃からお世話になっているライブラリーといえば、 ajaxzip2です!!   フォームのテキストボックスに郵便番号を入力すると、 自動で都道府県以下の住所をテキストボックスに反映させてくれるものです。   ただ、 このライブラリって大量のJSONファイルをサーバー上にアップする必要がありました …

公開日 更新日

history.back()

履歴を残したまま全ページに戻りたい場合、 history.back()関数をよく使います。   例えば、こんな風に↓↓↓ <a href="javascript:history.back()">戻る</a>   ただ、 history.back()以外にもhistory.go()という関数もあります。   例えば、 2ページ前に戻りたい場合には、 <a hr …

公開日 更新日

Javascriptで画像サイズを取得したい

<img src="sample.jp" alt="サンプル" id="samp"> 上記のように記述したimgタグから、 Javascriptで画像サイズを取得する場合、 var w = document.getElementById("samp").width; var h = document.getElementById("samp").height; とすれば、 横幅と高さをそれぞれ取得できるはず!!   ということで …

公開日 更新日

setInterval()とsetTimeout()

Javascriptでタイマー設定する時に使用する関数にsetTimeout()があります。   こいつは、 こちらが指定した時間後にある関数を実行させたい時に使用します。   例えば、 setTimeout("alert('テスト')", 10000); ※1秒を1,000ミリ秒で指定するので、「10000」だと10秒になります。   とすれば、 …

公開日 更新日

getPanoramaByLocation()メソッド

前回の続きで、   ストリートビュー未対応地域を想定した場合の説明です。   以下はサンプルソースです。 試しに、 var latlng = new google.maps.LatLng(35.690551, 139.69257); の部分をストリートビュー未対応地域の緯度・経度に変更してみてください。   ポップアップで こちらのエリア …

公開日 更新日

Google マップのストリートビューを実装してみました!!

Google マップのストリートビューを実装してみました。   ソースはこんな感じ↓↓で、意外と簡単に実装できました。 StreetViewPanoramaクラスを使って表示させます。   まず、パノラマのオプションを設定してやります。   viewOptions = { ~ の部分です。   headingは「方角」 pitchは …

公開日 更新日

zoomi.jsでオンマウス時に画像を拡大

画像にマウスを乗せた時(オンマウス)に拡大画像を表示させたいという依頼があり、   早速zoomi.jsというライブラリを使って対応してみることに。   設置方法は簡単で、   まずは、   jQuery(現時点での最新版は「jquery-1.3.2.min.js」)とzoomiを以下よりダウンロードし …

公開日 更新日

Geolocation APIの精度ってあまり良くない!?

先日記事にしたGeolocation API!! 精度って良くないのでしょうか!?   微妙にですが、 iphoneやAndroidで確認すると位置が数メートルズレてしまいます。   実際に作成した位置情報の取得システムを使って社内から確認すると、 目の前を通っている第一京浜を挟んで反対側に弊社の位置を指し示すmarker …

公開日 更新日

Geolocation APIを使ってスマホで位置情報取得

iphoneやAndroidのGPSを利用して位置情報を取得したい場合、 getCurrentPositionで簡単に取得できます。   使い方はと言うと、 navigator.geolocation.getCurrentPosition(callbackOk, callbackError); とするだけ。   callbackOkは位置情報の取得成功時に呼び出されるコールバック関数、 callbackErr …

公開日 更新日

Google Maps API Ver.3 で地図を表示

久しぶりにGoogleMap APIを利用しようとして、 今更なんですが、 「Ver.2終了してる!!!!!!!!!!」ってなってませんか?   私は今日なりました。   Ver.3に切り替わろうとしている事は知っていたんですが、 なんせ最近はたまたまですが、あまりAPIの利用機会が無かったもんで↓↓   といこ …

公開日 更新日

画像 右クリックでのダウンロードは禁止!!

普段物件画像を取り扱うシステムを構築することが多いんですが、 不動産会社さんにとって画像は大事な資源です。   ということで、 マウスの右クリックでの画像ダウンロードを禁止したい!! という要望があり早速対応してみることに。 というJavascriptコードを作成して、 テスト開始!!   Firefo …

公開日 更新日
このページのTOPへ戻る

著者情報

足立 拓也(あだち たくや)
1980年生まれ。
出身:兵庫県丹波市。
趣味:ボクシングジム通い。
特技:歴史の話しをすること。