おはようございます。ウェブサイト制作のアズーロ＠野口です。最近はスマホ対応のレスポンシブサイト制作を中心に中小企業様のウェブサイトを作らせていただいています。 先日、スタッフがGoogleマップのカスタマイズをしようと色変更やマーカーの変更をしていたところ、 「エラーが発生しました。 このページでは Google マップが正しく読み込まれませんでした。JavaScript コンソールで技術情報をご確認ください。」というエラーで、どうにも進まなくなりました。 「JavaScript コンソール」は（ＩＥなら）F12開発者ツールでエラーなどを確認できるツール。 エラーを見ると「Google Maps API error:MissingKeyMapError 」というエラーです。 ああ、APIキーを求めてるな・・・・APIキーか（懐） 「MissingKeyMapError」で検索したところ h

Pjaxを使うメリットとしては ページ全体でなく一部のみを読み込むため、転送量の削減が期待できる 上記と同じ理由でページの読み込み時間も減少する 書き換え面積が減るため端末の負荷も少ない ページ遷移時にエフェクトをかけられる などが挙げられるかと思います。 実装方法 ありがたいことに手軽にPjaxを扱えるjQueryプラグインを公開してくださっている方がいるので、そちらを使います。 さて、このプラグインを使ってPjaxを実装するためには、サーバーサイドとクライアントサイドの両方を書き換える必要があります。全体的な動きとしては、まずjavascriptの方で特定のリンクがクリックされたときにpjaxイベントを起こして、httpヘッダに特定文字列を付加するように記述。サーバーサイドではhttpヘッダに特定文字列があるかどうか判別し、もし有ったらpjaxイベントが発生したと判定して、ページの一部

WordPressでPjaxを実装した後、色々な壁にぶち当たったので、その時の解決方法を紹介していきます。 WordPressでPjaxを実装する 「jquery-pjax」というjQueryプラグインを使います。 GitHub defunkt / jquery-pjax <?php get_header(); ?> <nav id="gnav"> <ul> <li><a href="">nav1</a></li> <li><a href="">nav2</a></li> <li><a href="">nav3</a></li> <li><a href="">nav4</a></li> <li><a href="">nav5</a></li> </ul> </nav> <div id="main_content"> <!-- コンテンツが入れ替わる部分 --> </div> <?php g

site: http://develo.org/2014/04/29/1614.html サイトをpjaxを使って実装して思ったのですが、ページ移動がものすごくはやくて快適！今後サイト新しく作るときはpushStateとAjaxの組み合わせ検討してみてもよいかなぁって思いました！ pushStateとは Ajaxなどで、非同期なサイトを作る際に、 アドレスが変更されない問題をjsで解消してくれる便利なやつです。 少し前の話だとFlashサイトを作るときに#（ハッシュ）をつけてurlを管理したりしていました。 pushStateを使うと普通にページ遷移しているようにアドレスを変更することができます！ Ajaxとは ページを遷移せずに情報だけを非同期でとってきてサイトに描画する仕組みのことです。 pushStateとAjax 2つを合わせてつくった仕組みのことです。 実際に作るにあたり 下記を

大前提 ウェブサイトを作っていて、スクロールを起点に演出を行い場合が多々あります（ページがスライドしたりなど）。 しかし、通常のマウスと違い、MacBookとかのトラックパッドだと慣性スクロールが働いて、ユーザーがトラックパッドから指を離した後も一定時間スクロールし続けます（onWheelイベントやonScrollイベントが発火し続けます）。 これを制御したいというのが今回のテーマです。 失敗ケース とりあえず以下に試してみたけどダメだったやつを。 ググる 先人の方々がとっくに解決策を見つけてくれてるだろうと期待しましたが、ベストな策は見つかりませんでした。 同じ悩みの方はたくさん見つかったのですが……。 http://stackoverflow.com/questions/12486141/check-if-user-is-scrolling-with-trackpad 慣性スクロールを

以前ブログのテーマをマテリアルデザインにリニューアルしたとき、pjaxを導入したとお伝えしましたが、肝心の解説をするのを忘れていました。今回は簡単なデモと解説でpjaxを実際に触れてみるまでをご紹介したいと思います。 pjaxとは PJAX リニューアル告知の時にも少し触れましたが、おさらいを兼ねてもう少し詳しくご紹介します。 pjaxとはajaxとpushStateを組み合わせた技術です。Ajaxで非同期にコンテンツを入れ替え、HTML5から導入されたHistory APIを使ってブラウザにURLの履歴を追加できます。 これを使えばコンテンツ部分だけを読み込んで通信量を削減&読み込み速度が向上されます。ページを遷移にアニメーションなどを追加してカッコいいページが作れちゃいます。 対応ブラウザは以下のとおり。非対応ブラウザであっても通常のリンクとして遷移するので問題ありません。 Can I

Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects. Getting started