BUN:Log tag:bunlog.d-s-b.jp,2008-02-19://5 2011-03-02T22:08:44Z 福島県郡山市で働く、Webクリエイターのブログ Movable Type Pro 4.22-ja jQuery Google Maps プラグインをver.1.01にアップデート tag:bunlog.d-s-b.jp,2011://5.162 2011-03-02T22:07:37Z 2011-03-02T22:08:44Z 先日公開した、jQuery Google Maps プラグインのアップデートを公... BUN 先日公開した、jQuery Google Maps プラグインのアップデートを公開します。

jQuery Google Maps プラグイン ver.1.01
jqueryGoogleMaps1.01.zip（MITライセンス）


ver.1.00からの変更点

  • Google Maps API v3（v3.4）で、カスタムアイコンによる複数マーカーが表示されない不具合を修正しました。
  • カスタムアイコンを指定する際、アイコン・シャドウのそれぞれに、anchorおよびscaleSizeを指定できるようにしました。

3月2日にAPI自体がアップデートされたことに伴うものだと思われますが、
カスタムアイコンの複数マーカーが表示されない不具合が見つかりました。

自分なりに調べてみたところ、カスタムアイコンを設定するMarkerImageの引数で、anchorとscaleSizeを渡していなかったのが原因でした。

これに対応するための修正となります。


カスタムアイコンの指定方法について

今回のバージョンから、カスタムアイコンの指定方法だけが少し変更になります。
以下が、サンプルです。

その他の導入・利用方法については、jQuery Google Maps プラグイン ver.1.00の解説記事をご覧ください。

]]> jQuery Google Maps プラグイン ver.1.00 [ Update 2011.03.03 ] tag:bunlog.d-s-b.jp,2011://5.161 2011-02-25T01:07:12Z 2011-03-02T22:22:48Z $(function(){ $('#gmap1').Googl... BUN

毎度のことながら、「すっかりご無沙汰」で書き始めるBUNです。
早速ですが、Google Maps API v3を表示できるjQuery プラグインを作ってみたので、勢い余って公開してみます。

下記よりダウンロードして、ご利用ください。
jqueryGoogleMaps1.00.zip（MITライセンス）


jQuery Google Maps プラグイン ver.1.00の機能

  1. Google Mapsをマーカー付きで表示します。
  2. マーカークリック時に、情報ウィンドウを表示します。
  3. 所定の形式で記述されたXMLファイルを読み込んで、地図上に複数マーカーを表示します。
  4. マーカーと連動するリンクを表示します。

現状の機能は、こんな感じです。
アップデートで、マーカーや連動するリンクの一覧をカテゴリーで分けられる・・・など、機能を追加していく予定です。（※あくまで、願望。）


使い方

はじめに、jQuery 本体と当プラグインを地図を表示させたいページにリンクさせます。
サンプルでは、Google Libraries APIで、jQuery 本体を読み込んでいます。
3行目は、Google Maps API v3を利用する際に必要な記述となります。

---

追記　2011.03.02
きちんと検証していませんが、2011年3月2日時点で「複数マーカーを表示する場合に、マーカーが表示できない」現象を確認しました。

既にライブラリを導入いただいている方は、お手数ですがGoogle Maps APIのライブラリを読み込む箇所で、バージョンの指定をv=3.3と指定してください。

なお、時間を見てライブラリのアップデートを行います。

追記　2011.03.03
jQuery Google Maps プラグインをver.1.01にアップデートしました。

---

あとは、地図の表示先となる要素を指定して、プラグインの初期化を行うだけです。
下記は、シングルマーカーを表示する場合の記述例です。

ここでは記載していませんが、地図の表示先となる「<div id="gmap"></div>」の記述をお忘れなく。。。

]]> $(function(){ $('#gmap2').GoogleMaps({ lat: 37.400529, lng: 140.359743, zoom: 15, info_window: 1, info_content: '

郡山市役所

koriyama.fukushima.jp‎', icon_type: 'ltblueDot' }); $('#gmap3').GoogleMaps({ file: '/sample/sample.xml', info_window_heading_level: 3 }); $('#gmap4').GoogleMaps({ file: '/sample/sample.xml', list_target: '#list' }); });

クリック時に情報ウィンドウを表示する

シングルマーカーのクリック時に情報ウィンドウを表示したい場合は、
初期化のオプションとして「info_window:1」を追加し、「info_content」にウィンドウ内に表示させたい内容（HTMLタグなど）を記述します。

マーカーのアイコンを変更したい場合は、「icon_type」を指定します。
現時点で指定可能なアイコンは、redDot、blueDot、greenDot、 ltblueDot、llowDot、purpleDot、pinkDot、 orangeDotの8種類です。

なお、初期化のオプションで「icons:{}」を指定することで、マーカーをご自身で用意したカスタムアイコンに変更することも可能です。以下が、記述例となります。

複数のアイコンが必要であれば、「icons:{ redDot: {（中略）}, blueDot: {（中略）} }」のように、カンマ区切りで指定してください。


XMLを読み込んで複数マーカーを表示する

所定の書式でXMLを用意すれば、複数のマーカーを表示することができます。
なお、情報ウィンドウのタイトル部分をname要素から取得することから、「info_window_headeing_level: 3」のように、見出しのレベルを変更できるようにしてあります。お好みで指定してください。

以下が、XMLの書式サンプルです。
表示したいマーカーの数だけ、Placemark要素を用意してください。


XMLを読み込んで、複数マーカーおよび連動するリストを表示する

    XMLを読み込む場合、特定のul（もしくはol）要素を指定することで、地図と連動するリストを表示できます。
    li要素をappendする形になりますので、HTMLソースにul（もしくはol）の空要素を追加してください。

    地図とリストの表示先に関するHTMLの指定は、下記のようになります。


    おまけ：HTMLに出力済みの特定要素とXMLで読み込んだマーカーを連動させる

    このプラグインを作成するにあたって、実は一番やりたかったことなのですが(笑)
    「link_target」で要素を指定することで、ページ内に存在する特定の要素と地図上のマーカーを連動させることができます。

    ここで指定した要素の子要素をクリックすると、地図上で情報ウィンドウが表示されるようになります。
    この時、XMLのPlacemarkとHTMLに記述された子要素の数は、一致するように注意してください。

    なお、実際のサンプルは、株式会社 ナカノコーポレーションさんのトップページ（宅地物件情報）にて、ご確認ください。


    最後に

    デバッグやモチベーションアップ(笑)にご協力いただいた、CSS Nite in FUKUSHIMA 実行委員のみなさんに、いつもながら感謝します。

    また、不具合やお気づきの点などは、コメント欄もしくはTwitter（@BUN）にて、ご連絡くださいませ。

    ]]>     Dreamweaver CS4版/CS5版 スペシャルコードヒント tag:bunlog.d-s-b.jp,2010://5.160 2010-05-31T08:03:55Z 2010-05-31T08:53:54Z 相変わらず、すっかりご無沙汰なBUNです。 2010年5月29日(土)に開催され... BUN 相変わらず、すっかりご無沙汰なBUNです。
    2010年5月29日(土)に開催された、Dreamweaver Town Meeting in Tokyoというイベントに、僭越ながら出演者のひとりとして、参加させていただきました。

    テーマは、過去にBUN:Logでご紹介したDreamweaver CS3版 スペシャルコードヒントをネタに、コードヒントのカスタマイズ方法について。

    3年近く前の古い記事で、さらにDreamweaver CS5も発売されたということもあり、改めてCS4およびCS5版のCodeHints.xmlファイルを作ってみました。よろしければ、下記よりダウンロードしてご利用ください。

    CodeHints.xml.CS4.zip [Dreamweaver CS4版]
    CodeHints.xml.CS5.zip [Dreamweaver CS5版]

    ダウンロードしたファイルを解凍後、下記のファイルを上書きしてから、Dreamweaverを再起動すれば反映されます。

    Mac OSX：Dreamweaver CS4
    /Applications/Adobe Dreamweaver CS4/configuration/CodeHints/CodeHints.xml

    Mac OSX：Dreamweaver CS5
    Users/ユーザー名/Library/Application Support/Adobe/Dreamweaver CS5/ja_JP/Configuration/CodeHints/CodeHints.xml
    ※「ユーザー名」の部分は、ユーザーディレクトリ名で読み替えてください。

    Windows：Dreamweaver CS4/CS5
    /Program Files/Adobe/Adobe Dreamweaver CS4/configuration/CodeHints/CodeHints.xml
    ※「CS4」の部分は、バージョンにより数字が異なります。

    ]]> デフォルトのコードヒントからの変更点は、以下の通りです。

    • 利用頻度の低いCSSプロパティのコメントアウト
    • @で、@importを表示
    • 数値入力の際、px、%、em、s、deg、grad、rad、turnを表示
    • CS4版のみ「!im」で!importantを表示

    なお、コメントアウトしたCSSプロパティも、お知らせしておきますね。

    • azimuth
    • caption-side
    • clip
    • counter-increment
    • counter-reset
    • cue
    • cue-after
    • cue-before
    • direction
    • elevation
    • empty-cells
    • font-size-adjust
    • font-stretch
    • list-style-image
    • list-style-position
    • marker-offset
    • marks
    • orphans
    • outline-color
    • outline-style
    • outline-width
    • pause
    • pause-after
    • pause-before
    • pitch
    • pitch-range
    • play-during
    • richness
    • size
    • speak
    • speak-header
    • speak-numeral
    • speak-punctuation
    • speech-rate
    • stress
    • unicode-bidi
    • voice-family
    • volume
    • widows

    今回も、BUNが修正した箇所は、「<!-- Change」で一覧検索できます。
    不要なプロパティはコメントアウトしただけなので、ご自身の環境に合わせてカスタマイズしてください。

    最後に、お約束の一言ですが、
    ご利用は、自己責任でお願いします。

    ]]>     久々の更新なので、近況報告とか。 tag:bunlog.d-s-b.jp,2009://5.159 2009-07-30T00:30:39Z 2009-07-30T00:37:14Z BUN:Logの更新から、すっかり遠ざかってしまいました。 みなさん、お元気です... BUN BUN:Logの更新から、すっかり遠ざかってしまいました。
    みなさん、お元気ですか？(苦笑)

    今日は近況報告を兼ね、最近始めた2つの新しい試みについて、
    ブログ記事を書いてみようと思います。

    まず、「遊部(あそぶ)」について。

    遊部ログ::ASOBLOG
    http://blog.asob.tv/

    CSS Nite in FUKUSHIMA miniという名称で何度か開催した地元有志による勉強会のリニューアル版となります。

    理由は単純で、

    • スピーカーを立てて聴くだけの講習スタイルは、勿体ない
    • そもそも、スピーカーやテーマの選出が難しい
    • Webの勉強会だけに偏ってしまうのは、勿体ない
    • 制作作業では引き籠もりがちなので、趣味の幅を拡げる機会が欲しい
    • みんなで集まると面白いから、単純に「呑み会」の場を設けようよ

    何人かの方に、上記のご意見をいただいたことがキッカケです。

    ワークショップ形式の勉強会や地元のクリエイター同士が交流を図れるイベントにできればと思っています。※もちろん、直接制作に携わらない方とも交流すべく、画策中です。

    次に、「gabs」について。

    gabs.log｜おしゃべり好きなWEB制作者のたわごと
    http://gabs.cc/blog/

    株式会社Gazi工房さん、有限会社シップスさんと一緒に、クリエイティブユニットを発足しました。

    対外的な活動は上記のブログが主体となっていますが、
    制作上のガイドラインを設け、コーディング以降のフローでは誰が担当しても同じ結果になることを実現すべく、日々勉強中です。

    dreamseekerはフリーランスの個人事業なので、BUNに何かあった時のリスク回避も念頭に置いている・・・つもりです。

    最後に。

    BUN:Logは、お盆明けにリスタートしたいと思っています。
    更新から遠ざかっていた一番の理由は「見た目に飽きたから」です <(^_^;)

    予定通りなら、
    デザインも変わって記事の投稿も増えている・・・ハズ(笑)

    という訳で、よろしければこれからもお付き合いくださいませ。

    ]]>     「ie6-upgrade-warning」を日本語表記にする tag:bunlog.d-s-b.jp,2009://5.158 2009-04-14T08:24:16Z 2009-04-14T10:06:21Z ie6-upgrade-warning - Google Code http:/... BUN ie6-upgrade-warning - Google Code
    http://code.google.com/p/ie6-upgrade-warning/

    IE 6でサイトにアクセスした場合に、ブラウザのアップグレードを促すことができる JavaScriptライブラリ。IDEA*IDEAさんで紹介されていたので、早速試してみました。

    他のブラウザと見た目を合わせるためにある程度ノウハウが必要なIE 6から、乗り換えを検討いただけるのであれば個人的にも助かります(笑)

    さて、デフォルトでは英文表記となるこのライブラリは、
    リンクさせるJavaScript(warning.js)に一部修正を加えることで簡単に日本語表記にできます。

    msgNはオーバーレイされるウィンドウ内の説明文。
    brNとurlNには、各ブラウザのバージョンや日本語版のダウンロード先をそれぞれ設定しています。

    説明文はデフォルト表記を意訳したものです。お好みで変更してください。

    マイクロソフト社のアナウンスによれば、4月第3週からIE 8の自動配布がスタートされるそうですので、少しでも早くこのブログ記事が「意味のない情報」になってほしいところです。

    ]]> なお、この記事を掲載するにあたってSyntaxHighlighter 2.0を導入してみました。
    とりあえずの設定なので、万一不具合があればコメントいただけると嬉しいです。

    ]]>     [ PR ] GoogleAdWordsを使った簡単集客術 tag:bunlog.d-s-b.jp,2009://5.157 2009-04-13T02:29:16Z 2009-04-13T02:45:09Z 2009年5月15日(金)にビッグパレットふくしまで 『GoogleAdWord... BUN 2009年5月15日(金)にビッグパレットふくしまで
    『GoogleAdWordsを使った簡単集客術』というセミナーイベントが開催されるそうです。

    GoogleAdWordsを使った簡単集客術
    http://www.spacexone.com/google/

    地元福島でWeb制作やイベント企画などをされている
    有限会社スペースワンさんからご案内をいただきましたので、
    BUN:Logでもご紹介させていただきます。

    普段、GoogleのWebサービスを利用しているけど
    いまいちマーケティングに活かせていない・・・とお悩みの方は
    参考になるかもしれませんね。

    イベント詳細やお申し込みについては、上記リンク先を参照してください。

    ]]>     [ OSX ] Isolatorで集中力アップ！？ tag:bunlog.d-s-b.jp,2009://5.156 2009-03-13T18:22:10Z 2009-03-13T18:44:55Z 限られた時間で作業しなきゃいけないにも関わらず、 思ったほど集中できない時ってあ... BUN 限られた時間で作業しなきゃいけないにも関わらず、
    思ったほど集中できない時ってありますよね？

    背面にチラッと見えるブラウザウィンドウが無性に気になって、
    いつの間にかサボってしまうことも、しばしば。

    そんな経験が少なからずある方にオススメのツールが、Isolatorです。

    Isolator
    http://willmore.eu/software/isolator/

    メニューバーから操作するこのツールは、
    アクティブウィンドウの背面に単色のオーバーレイを表示します。

    たったそれだけの機能なのですが、
    視覚的に飛び込んでくる情報が限られることで不思議と集中力が高まります。

    もちろん、初めから起動するアプリを絞れば良いのですが
    SkypeやMailなど、クライアントとの連絡用に常駐させているアプリもあるため
    個人的にかなり重宝しています。

    なお、逆に連絡に気付けなくなりそうで心配という方は、
    Growlを併用して通知を表示させてみましょう。

    ]]>     [ MobileMe ] 待望のファイル共有機能を追加 tag:bunlog.d-s-b.jp,2009://5.155 2009-02-18T03:03:26Z 2009-02-18T03:19:13Z iPhone購入時に契約したMobileMe。 実はこの時から「使う前提」でいた... BUN iPhone購入時に契約したMobileMe。

    実はこの時から「使う前提」でいたのに利用できなかったファイル共有機能が、
    先日ひっそりと追加されていました。

    MobileMe News - 大きなファイルをiDiskで共有する
    http://www.apple.com/jp/mobileme/news/2009/02/sharing-large-files-with-idisk.html

    待ち望んでいたので、もっと大々的に宣伝してくれても・・・(笑)

    これまでiDiskのPublicディレクトリで一応共有は可能でしたが、
    ここにアップロードしたデータはアクセスした全員で共有というスタイル。

    クライアントごとに個別でやりとりするには、不向きだったんですよね。

    これで、パスワード認証付きの共有をファイル単位で簡単にできます。
    あとはiPhoneでもダウンロード可能になれば言うことないですね。

    ]]>     Photoshop CS4でズームツールの振る舞いを変更するには tag:bunlog.d-s-b.jp,2009://5.154 2009-02-07T13:59:14Z 2009-02-07T14:14:59Z Adobe Photoshop CS4では、ズームツールで拡大・縮小をすると デ... BUN Adobe Photoshop CS4では、ズームツールで拡大・縮小をすると
    デフォルトでウィンドウが画面いっぱいにリサイズされるようになりました。

    CS3以前のユーザーさんは不便と感じられる変更点だと思いますが、
    [ 環境設定 ] - [ 一般 ]にある「ズームでウィンドウのサイズを変更」のチェックを外すことで、
    この機能をオフにできます。

    また、シフトキーを押しながらズームツールを使用すれば、
    環境設定に変更を加えることなく、従来と同じ振る舞いになります。

    Tipsとすら言えないのかもしれませんが、
    今日初めて気づいて、やっと元の生活にもどれました(笑)

    ]]>     [ 御礼 ] CSS Nite in FUKUSHIMA, Vol.2、定員に達しました tag:bunlog.d-s-b.jp,2009://5.153 2009-02-07T03:25:50Z 2009-02-07T03:34:59Z 先月お知らせしたCSS Nite in FUKUSHIMA, Vol.2ですが、... BUN 先月お知らせしたCSS Nite in FUKUSHIMA, Vol.2ですが、
    お陰様で2月5日正午に追加席も含めた定員に達しました。

    お申し込みいただいたみなさん、本当にありがとうございます。

    当初予定していた締切日まで3週間を残して・・・ということで、ご検討中だった方や最近このイベントを知ったというみなさんはごめんなさい。

    現在、お問い合わせフォームにて「キャンセル待ち」を承っております。

    キャンセルの発生状況によってご期待に添えない場合もありますが、
    よろしければご検討ください。

    ]]>     [ PR ] CSS Nite in FUKUSHIMA, Vol.2、お申し込み受付中 tag:bunlog.d-s-b.jp,2009://5.152 2009-01-20T07:22:06Z 2009-01-20T08:05:52Z CSS Nite in FUKUSHIMA, Vol.2を2009年3月7日(土... BUN CSS Nite in FUKUSHIMA, Vol.2を2009年3月7日(土)に開催することになりました。

    CSS Nite in FUKUSHIMA, Vol.2 特設サイト
    http://cssnite.net6.or.jp/

    前回は「地元でCSS Niteを！」の一心で奔走した感がありますが、お陰様で第二弾に繋げることができました。

    さらに、勢い余って出演者の一人として参加することに！！！
    (僭越ながら)地元代表として恥ずかしくないよう、精一杯頑張らないと・・・です。

    なお、事前申込は2月27日(土)まで特設サイトから承っています。
    先週末に受付を開始したところ、既に50名の方からお申し込みをいただきました。

    皆さんの温かいご声援とご支援、痛感せずにはいらせません。
    この場をかりて、厚く御礼申し上げます。

    ]]> よくよく考えたら、2009年の初エントリーでした(苦笑)
    本年もマイペースなBUN:Logをよろしくお願い致します。

    ]]>     Parallels Desktop 4.0 for Mac、12月19日リリース tag:bunlog.d-s-b.jp,2008://5.151 2008-11-26T03:21:33Z 2008-11-26T03:35:57Z Intel MacでWindowsやLinuxなどを起動できる、仮想化ソフトのP... BUN Intel MacでWindowsやLinuxなどを起動できる、仮想化ソフトのParallels Desktop for Macの最新版が、12月19日に発売されるそうです。

    ■Parallels Desktop 4.0 for Mac製品概要
    http://www.runexy.co.jp/enterprise/parallels4_mac/outline/

    IEでの動作チェック用としてノートPCを所有していた時期もあったのですが、このソフトを導入して以降、Windows XPまたはVistaをMac1台で起動でき、とても重宝しています。


    なお、Vector PCショップでは12月4日までの期間限定で予約特価が設定されています。

    購入するグレードにもよりますが1,000〜3,000円程度値引きされますので、BUN同様「新しもの好き」な方は、この機会に申し込んだ方が良さそうですね。

    ]]>     Adobe CS4 体験版、配布開始 tag:bunlog.d-s-b.jp,2008://5.150 2008-11-25T04:28:12Z 2008-11-25T04:48:17Z Dreamweaver CS4 betaの起動時に「期限切れ」の通知が表示され、... BUN Dreamweaver CS4 betaの起動時に「期限切れ」の通知が表示され、使用できなくなりました。

    上がり掛けたモチベーションを無駄にするのは勿体ない！(笑)
    と、懲りずにAdobeサイトの「ダウンロード」を確認したら、いつの間にか30日間有効の体験版がDL可能になっていました。

    「期限切れ」というのは、そういうことだったんですね。


    予約済みのAdobe CS4 Web Premiumのリリースが1ヶ月以内なので、Photoshop CS4 Extended・illustrator CS4・Dreamweaver CS4・Flash CS4 Professionalをダウンロードしてみました。

    個人的に楽しみなAcrobat 9 Proだけ「Windows版のみ」というのが残念ですが、しばらく遊べそうです(笑)

    ]]> ちなみに。
    体験版がDL可能になったらAdobeから通知が来るようにメールアドレスを登録していたのですが、自分で気づくのが先というおマヌケな状態に・・・。

    意味ないし(苦笑)

    ]]>     [ iPhone ] Googleの検索結果で横スクロール不要に tag:bunlog.d-s-b.jp,2008://5.149 2008-11-13T03:13:58Z 2008-11-22T01:31:11Z CNET Japanの記事で知ったのですが、GoogleがiPhoneでの検索検... BUN CNET Japanの記事で知ったのですが、GoogleがiPhoneでの検索検索画面を改良して、横スクロールが表示されないように最適化されたそうです。

    グーグル、「iPhone」検索結果ページをアップデート--横スクロールを不要に - CNET Japan
    http://japan.cnet.com/mobile/story/0,3800078151,20383568,00.htm

    この記事内では「英語版のみを対象」と書かれているのですが、少し設定を変更するだけで利用できることが判明。


    具体的には、iPhoneでGoogleのトップページにある「設定」をタップ後に表示される「共通設定」画面にある「表示言語の設定」を「英語」にして保存するだけ。

    この時、「検索言語の設定」で「優先する言語」と「日本語」をチェックしておきましょう。

    あとはGoogle.comにアクセスすれば、検索結果画面で横スクロールが不要になります。


    正式に対応している訳ではないため、厳密には「スポンサーリンク」「ニュース検索結果」など一部画面からはみ出してしまいますが、通常の検索結果一覧の文字サイズが最適化されることで、使い勝手が良くなりますよ。


    [ update 08.11.22 ]
    App StoreでGoogle Mobile Appが公開されたあたりから、特別な設定なしで検索結果ページが最適化されているようです。

    ]]>     [ PR ] CSS Nite in FUKUSHIMA mini, Vol.3のお知らせ tag:bunlog.d-s-b.jp,2008://5.148 2008-11-12T09:12:38Z 2008-11-12T09:18:45Z 地元有志による勉強会、CSS Nite in FUKUSHIMA mini, V... BUN 地元有志による勉強会、CSS Nite in FUKUSHIMA mini, Vol.3を11月29日(土)に開催します。

    今回は、「Adobe AIR」がテーマ。
    M3 creator 松村さんにスピーカーになっていただきます。

    詳細については、CSS Nite in FUKUSHIMA特設サイトをご覧ください。

    ]]>