はてなブックマーク

連載モノとなっております。 今回より全5回に渡り、pjax（pushState + Ajax）に関する基本から使用時の注意点、トラブルシューティングやtips、果てはちょっとマニアックな内容を書き綴らせていただきます。 第1回 「これからpjaxを使う人に知っておいてほしいこと」 第2回 「How to use pjax well?」 第3回 「pjaxでのイベント処理」 第4回 「jquery-pjax」 第5回 「Barba.js」 この記事を書こうとした2016年の春頃にはReactだ、Vueだ、Web Componentsだ、Riotだ…と、これまでの高コストなDOM操作をする方法ではなく、ユーザーの操作に応じてインタラクションを返す際は、Virtual DOMを使ったりコンポーネントを取り替えるようにしろ、的なものが主流になってきていたのでpjax自体もう枯れた技術になるかな…と

LightBox系のプラグインとしては、非常に多機能でインタラクションも秀逸な「PhotoSwipe」。 PhotoSwipe http://photoswipe.com/ 非jQueryという点もポイントになりますが、 反面、ちょっとピーキーだったり、導入がちょっと面倒だったり、jQueryしか使ったことが無い方には少し敷居がある感じです。（※jQuery版もあるようですが） 今回、そんなPhotoSwipeでギャラリーページをつくる際のちょっとした勘所として『PhotoSwipeとInfinite Scrollを共存させる』を書かせていただきます。 以前、クライアントワークでギャラリーページの作成があり、画像拡大を「PhotoSwipe」で行うことにしました。しかし、ギャラリーというと… ・今後どんどん画像は増えていくことでしょう。 ・1ページ内にあまりに画像が大量にあったり、ページを

このように設定するといいかなと思います。（※注2：お好みでどちらでも良いです。今回の説明では「スタイル属性」を選んだ場合で説明しています） ※注1　サブセットについて テキストは基本的にアウトライン化して出力するほうが良いです。サブセットは生のテキストに対する設定なので、アウトライン化した場合このサブセットの設定は意味を持ちません。ただ、どうしても<text>要素を使いたいなら「なし」を選びましょう。 <text>要素はブラウザ間の表示の差が激しいのであんまり安定してない感が強いかな・・と思います。 テキストはアウトライン化 Webブラウザで表示可能なフォントではないフォントを使用していた場合、テキスト部分が他のテキストに置き変わってしまうのでアウトライン化しておくほうが無難です。 その際、小数点は1桁～3桁くらいまでにしておく（※注3） よく「1桁で設定しよう」と書かれていますが、フォン

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

画像の拡大表示などのスクリプトで、よくaタグ（リンクタグ）に対してイベントを設定することがあります。 そうした仕様の場合、元々のクリックイベントである「リンク」が作動しないように「元々のイベントをキャンセルする」ということが必要になります。 こういったケースの際、よく用いられるのがタイトルにある preventDefault return false の2つです。 これらのメソッドや文の細かな説明は今回省かせていただきますが、 このいずれかをJavaScriptで記述すると元々のイベント（今回はリンク）がキャンセルされ htmlタグに記述されているリンク先へ飛ぶことはありません。 …しかし、これらのどちらを入れても、両方記述したとしても（注：無意味です。苦笑）リンクがキャンセルされず リンク先へ飛んでしまう、という事例がありました。 というか、このブログで（おそらく）結構な期間起きていまし

前回、SVGスプライトの構造と仕組みから編集方法までを書かせていただきました。 今回はIllustratorを使ってオリジナルのSVGスプライトを作成する方法を書いていきます。 SVGスプライトの作成は、Illustratorで作成→SVGファイルをテキストエディタで編集の2工程で行います。 Illustratorでの作業は実のところcssスプライト用の画像をつくるより簡単です。 作成時のポイントは「アートワークを全部重ねて作成する」です。 ドキュメントの設定 「Webドキュメント」 「カラーモード：RGB」 「ドキュメント設定」→「アートボード」→「単位：ピクセル」 以上の設定で作成します。 次に、「トリムエリアツール」で先にキャンバスサイズを決めてしまいましょう。 キャンバスサイズは作成するアートワークすべての中の最大サイズで指定します。 ※正方形と長方形のものがあるなら長方形のサイズ

SVGの最も有用な使用法の一つ、「複数のベクターグラフィックを一つのデータにまとめて、使いたい時に呼び出す」という「SVGスプライト」があります。 「SVGを使おう！」でもほんの少しお話ししましたが、cssスプライトとの大きな違いとしては、やはり「スタイルを都度変更できる」ところでしょう。 カラーバリエーションやサイズバリエーション、ちょっとした違いごとに同じグラフィックをいくつも作成する必要が無くなります。また、ベクターグラフィックなのでサイズを気にする必要もまったくありません。 極端に言えば、10×10pxのSVGを1000×1000pxに引き延ばそうが何ら問題はないのです。（※画像と同様 描画は重くなりますけれど・・） 今回はこの「SVGスプライトのつくり方」として、基礎となる部分をお話しさせていただきます。 この部分をしっかり理解しておくとIllustratorなどからSVGスプラ

さて前回の「WordPressでもっと手軽に美しい記事を書こう！」で「Page Builder by SiteOrigin」というWordPressの記事やページの更新を劇的に手軽に、かつ直観的にさせてくれるプラグインを紹介させていただきました。 今回はその使い方を詳しく紹介させていただきます。 前回簡単に概要の説明をさせていただきましたが、「Page Builder by SiteOrigin」操作のデモ動画があったのでこちらも参考として紹介させていただきます。（※説明の為に画面をいったりきたりしているところがあるので若干ややこしく見えるかもしれませんが、触ってみるとそんなに難しいことはありません） まずは、おさらい だいたいこんな感じなんだなー・・ということが分かったら、実際に使っていってみましょう。 まずはおさらいとして、投稿（ページ）エディタの「Page Builder」エディタに