はてなブックマーク

Google Analyticsの仕様がgtag.jsに変わり、pjaxを使用した際のgtag.jsの対応方法が検索でなかったので投稿します。 どうしてpjaxだと対応が必要なのか？ pjaxを使用したことがある人は飛ばして構いません。 pjax、今回案件で使用したのはBarba.jsですが、使用する際に注意すべき点があります。 それはhead内の更新と、読み込みで実行されるJSです。 pjaxはコンテンツ部分を変更してくれますが、なんの対応もしないとmeta情報やCSSファイル、URLなどの情報は、最初に読み込んだページのままになります。 CSSやJSは一つのファイルにまとめておけば読み込みに関して解決しますが、meta情報やURL情報は処理を加えないと解決しません。 なので、pjaxを使用する際は、ページが更新したタイミングでmeta情報を変更する対応が必要です。 その際に、更新したU

jQueryなんていらないって記事を見ることがありますが、まだまだWebサイト制作の現場では現役。レベル差や入れ替えの多くなりがちなWebサイト制作会社では必須だと思います。 自分用にも含め、よくWebサイト制作で使うプラグインをまとめてみました。 （中にはjQuery不要のものもあります。） モーダル・ライトボックス Magnific Popup これに出会う前まではColorboxばかり使ってましたが、ColorboxはRWD対応が特殊なのでこちらにしました。 アニメーションが物足りないですが、今はCSSでなんとかなるので問題なく使用しています。 最近はこれか自作かになってます。 公式：Magnific Popup 使い方：よく使うjQueryプラグイン② 「Magnific Popup」 スライダー Slick 定番中の定番スライダーですね。 だいたいこれがあれば、Webサイトで制作

約１ヶ月ぶりの投稿になります。 以前Illustrator CC のスライス注意点を投稿しましたが、 その後、制作の中でWebデザインにおけるIllustratorの注意点をまとめる必要がでてきたため、 合わせてこちらを投稿したいと思います。 そもそも注意点を守らないとどうなるの？ 関わる人が大体困ってしまいます。 例えばコーダーがスライスを行う場合、注意点が守られていないとデザインの修正が発生します。 デザイナーさんがスライスする場合は、スライスしてやっと終わったと思ったらデザインの修正を言われてしまいます。 デザイン修正はコーダーの作業の開始が遅れにも影響しますし、デザイナーも何回も修正するのは嫌だと思います。 制作の流れをスムーズに進めるためにも、最初にちょっと手間を掛けて対策しましょう。 注意点まとめ 1. カラーモードはRGBで作成する Webサイトで使用しているモニターは「RG

久しぶりのブログ更新になりました。 さて、今回はAPIを使います。 API使ってますか？ 世の中たくさんのWEBサービスがありAPIも多く提供されています。 WEB制作で身近なものといえば「Google Map」がありますが、他にも「Google Analytics」や「Youtube」なんかも提供しています。 うまく使えば色々なものに利用できますが、パッと使うものは思いつかないものです。 このままではもったいないので、APIに慣れるためにも普段利用しているものを使いAPIに慣れようというのが今回の記事です。 よろしくお願いします。 何を使うのか？ 今回使用するのはタイトル通り下記になります。 ChatWork API Google Apps Script 「ChatWork API」を選んだのは普段から使用しているからです。 「Google Apps Script」を選んだのは、ホントで

一昔前まではIllustratorのWebデザインのコーディングはスライスが大変でめんどくさいという人がほとんどだと思います。 しかし、CCなったIllustratorはスライスが快適！！ 使い方を覚えてしまえば、IllustratorのWebデザインのスライスも負担が少なく対応できます。 今回は便利は「アセットの書き出し」と「注意点」を紹介します。 注意点として今回の対応方法は「2017」と「2018」での対応方法になります。 「2016」でもできますが一部機能が「2017」と「2018」とは異なるため中して下さい。 自分のバージョンにあった記事を探すしたほうが躓くことなくIllustratorを使うことができると思います。 上記、問題なければお進み下さい。 便利なアセットで書き出し 今までのIllustratorの書き出しといえば「スライスツール」などを使っていたと思います。 これがめ

最近WEBデザインをします。 デザイン自体は久しぶりです。 昔はコーディングもよくわかっていませんでしたし、デザインもより堅い感じでした。 なのでデザインされていれば問題無いという感じでしたが、最近はそうもいかないことがあると思いました。 そんなそうもいかないことを注意してくれる、伝えてくれるだけでコーディングする側も楽になると思い、まとめてみました。 （個人的な部分も多々あります。） 対応方法をはっきりさせる CSSとブラウザも変わり、画像でやっていたことがCSSだけでできるようになりました。 例えば不透明度だったりWEBフォントだったり。 画像は写真やイラストだけでそれ以外はCSSというサイトも多いと思います。 ただし、実際コーディングをするときはっきりしていることは多いでしょうか？ WEBフォントの場合 Google fontsやTypekitなど無料で使えるWEBフォントが増えてき

前から興味のあった「WAI-ARIA」。 業務に余裕があったので調べてみました。 調べれは今は参考となる記事がたくさん。本当に助かります。 調べただけで終わらないように、タブに実装してみました。 タブの実装 いつもであればclassやdata属性を使い切り替え、表示・非表示にアニメーションを加えたいのであればfadeInやfadeOutのjQueryのメソッドを使っています。 今回は「WAI-ARIA」のrole属性とaria属性を使い切り替え、アニメーションをCSS3で行いたいと思います。 role属性とaria属性 まずはこの２つの違い。 簡単に言えば以下のような感じです。 role属性：コンテンツの役割を表す aria属性：コンテンツの状態や性質を表す この辺に関してはいずれ勉強した者をまとめたいと思いますが、今回は簡単に上記を覚えてコードを見て頂けたらと思います。 マークアップ r

SassをCSSにコンパイル、画像の圧縮、svgスプライトの作成等など便利すぎて今の制作には欠かせなくなった「gulp」。 そんなgulpを制作を行う中で便利だと思ったプラグインを3つ紹介します。 merge-stream このプラグインは1つのタスクで複数のソースを処理するときに使用します。 Sassを使用する環境であればSassのファイルを分割しそれぞれの役割で管理しコンパイルで一つのCSSにまとめるという方法を使われている方をも多いと思います。 しかしSassを使用していない時代であればそれぞれのCSSで管理し、共通部分と各ページのCSSのディレクトリが違うということもあると思います。 追記 - ディレクトリ例がなかったので追記しました 下記ディレクトリであれば一つの箇所にありまとめているから通常のコンパイルでも問題無い src ┗sass ┠_reset.css ┠_layout.