はてなブックマーク

Flatpickrとは FlatpickrはJS製の軽量な日時入力補助ライブラリで、入力エリアにカレンダーや時間を表示してUIを強化できます。 FlatpickrのExample画面 似たような日付入力補助ライブラリ datepicker datetimepicker bootstrap-datepicker Pikaday 日時入力フィールドがあるようなフォームはほぼこれらのライブラリを設定されているんじゃないかなーという印象。 jQuery UIの「datepicker」は昔ながらって感じでわかりやすいですが、jQuery依存なのはイマイチな感じです。「datetimepicker」はその名の通り時間も扱えるので便利ですが、こちらもjQuery依存。「Pikaday」は日本語化しようと思うと「Moment.js」が別途必要ですし、「bootstrap-datepicker」はBootS

Webページの背景に動画を埋め込む時のメモ 今回はWebページの背景に動画を埋め込む時に必要なテクニックをまとめてメモ。 TOPページのファーストビューに背景動画を設置したサイトをよく見かけますが、実際に実装することになると下記のような点で悩むことがあります。 埋め込み方法（<video>タグ、YouTubeやVimeoなどの外部サイトをiframeで埋め込み） 動画の容量による負荷の問題（サーバー負荷、ロード時間） 動画上のコントロールバーやタイトルなど不要な情報の表示 ループ再生 自動再生 ミュート再生 こういった点について、動画の埋め込み方法を紹介した上でメリット・デメリットを比較してまとめてみました。 動画の埋め込み方法の比較 この記事で紹介する背景動画の埋め込み方法は下記の4つです。 直接サーバー上のファイルを読み込む（videoタグ） Googleドライブのファイルを読み込む（

ドロップダウンメニューって？ メニューをクリックしたりマウスを上に載せたりすることでそのメニューの下に出てくるようなメニューのことです。 ドロップダウンメニューの例 ドロップダウンメニューの実装方法はググると結構出てきます。 ただjQueryプラグインとかをこのためだけに読み込ませたりするのはなんか違う気がするし、「CSSだけでできる！」とかいうのもありますが、実際は動いてもデザインが思い通りにならなかったり、タブレットで全然使い物にならなかったり、なんてことがありますね。 僕なんかは特にそうですが、ほぼ「コーディング専業」の人は依頼されたデザインに合わせて自由自在に変えられるように、このくらいのUIはササっと書ける知識を持っておく必要があります。 今回はそういう時に使えるメモです。 言うて自分もけっこう忘れるので。w まずはデザインをhtml・cssで実装 基本的にはデザイナーから依頼さ

WP REST APIとは WP REST APIはWordPressに投稿した記事やデータにアクセスできるAPI機能のことです。WordPress 4.7以降より、標準で利用できるようになっています。 WP REST API 公式 https://ja.wp-api.org/ なぜ独自のエンドポイント？ WordPressに標準で設定されているエンドポイントで十分な情報が取得できるのですが、アイキャッチ画像やカスタムフィールドの情報を取得するのにちょっと工夫が必要だったり、逆に必要ない情報がたくさん入っていたりします。 これは非常に面倒臭い！ 自分でAPIのカスタマイズはできないものか！と調べたらけっこう情報がありました。 参考にさせてもらったのはこちらの記事。 WP REST API V2にてカスタムエンドポイントを追加するまとめ http://kayakuguri.github.io

今回はフロントエンドの開発環境についてのメモ。 gulpやwebpackなどの環境設定について。 まだgulp？ gulpってもう古くない？まだ使ってんの？ ってツッコミがありそうですが、僕の開発環境ではまだまだ現役です！ gulp.jsから卒業！や、もういらない！など、検索するといろいろな記事が出てきますが、個人的にはJSとCSSさえビルドできればなんでも一緒です。 そうなるとますますgulpじゃなくてもええやん。ってなりそうですが、 昔から特にgulpで消耗したこともないですし、他に変えるコストを考えるとバージョン上げて使い続ける方が楽だったので使い続けています。 とは言え、gulpを使っていてもフロントの開発環境はすぐに新しくなって変わっていくので、古くなったサイトの環境が今と合わなくてよく開発環境の立ち上げ方や使い方を忘れたりします。 そんなときのために今の開発環境を備忘録として残

barba.js v2って？ 端的に言うと非同期画面遷移が簡単にできるライブラリ「Barba.js」のバージョン2がbarba.js v2です。このサイトでも使っていますが、デモも作ってみました。 barba.js DEMO 最近はREST API + フレームワークなどで簡単にサクサク見れるSPA（Single Page Application）を作れるようになりました。しかし通常のコーポレートサイトやブログメディアサイトなどにSEOを考えた上でサクッとSPAを取り入れることは難易度が高く、SSRなど余計なことを考え出すと工数と合わないので僕はなかなか手が出ません。（Vue.jsなどはSSRしなくてもGoogleがちゃんとレンダリングしてくれる説もありますが） それでも快適にかっこよくシュバっとページ遷移したい！という思いで方法を探していると「Barba.js」にたどり着きました。弊社H