経緯 先日後輩のJSについての相談を受けていたとき、以下のような書き方をみて「こんな感じに書けるんですねー」と言われました。 window.hoge = default_hoge || {}; 結構、普段から使ったりはしていますが、なぜ、これが「default_hogeがundefinedやnilだったら{}にする」という意味になるのか、明確に答えられなかったので、そのことについ
キーワード検索するとき、検索ボタンを押さなくとも、入力された時点で自動的に検索結果が表示されるインクリメンタルサーチは今や多くのWebサイトで利用されています。 インクリメンタルサーチを実装するにはいくつかの方法がありますが、changeイベントは一度フォーカスをはずさないと発火しないので、keyupでやることが多いと思います。 しかしながらこの実装方法では、入力キーが押される度、通信
経緯 display: inline-block;を指定するとあたかもinlineでの表示のように振る舞いながら、heightや上下のpaddingを指定することができてすごく便利です。4列のデータ一覧を作りたいとき、これを使うとレイアウトが崩れてしまったので、そのメモ書き。 不具合がおきるサンプル 以下がサンプルです。4列に画像を並べたいときのHTML/CSSを想定しています。
管理画面などを実装しているとき、一覧画面では<table>タグでデータを表示することが多いと思います。また、顧客側から、行のどこをクリックしても詳細画面や編集画面にジャンプするような行を実装したいという要望が出ることもあります。 今日はそのシンプルな方法をご紹介します。 HTML 以下のように、<tr>にdata-href属性を付与して、リンク先を記載しま
iCheck.jsを使うとチェックボックスやラジオボタンをスタイリングできます。 http://icheck.fronteed.com/ かなり定番のJSライブラリにはなりますが、使ってみると、onchangeイベントが取れなくなってしまいました。 対処法 公式ドキュメントみるとちゃんとifChangedを使うように指示がありました。 c.f.) こちらのCallba
ユーザの手によって<div>タグの大きさや位置を、ドラッグして移動や拡大させたいとき、簡単に実装できるInteract.jsのご紹介します。ちゃんとスマホでも動作確認できたのでこのようなUIが必要なとき、必要な使い勝手がいいと思います。 http://interactjs.io/ Document: http://interactjs.io/docs/ 実装方法
Railsではlink_toヘルパーにdata: {confirm: 'よろしいですか？'}のように書いたり、HTMLで<a data-confirm="よろしいですか？">確認</a>のようにdata-confirmと、リンクをクリックしたときに確認のアラートが出るようにできます。 通常のhrefで指定されたリンクの場合は、confirmでOKを押すと、リンク先に遷移します。た
経緯 WordPressを使ってWebサイトなどを構築していると、設定で管理すべき部分が出てくると思います。 例えば、企業のWebページとかだと、所在地や電話番号などはアクセスのページにあったり、footerにあったり。 こういう情報はカスタムフィールドなんかで登録するより、設定で管理したほうが自然です。独自の設定の作り方について。 作り方 設定項目の追加 まずは、func
システムを構築してると、幾つかのステータスを持つことがあります。例えば、商品についてのモデルProductのstatusとして、「発売予定」「発売中」「絶版」「再販未定」の4つのステータスを持っているとします。 これらを扱うModelの良い書き方を紹介します。 ステータスを数値を使って表現した時の問題点 それぞれのステータスを10, 20, 30, 40という数値で管理しようと思います
WordPressのカスタムフィールドは使いにくいので、それを解決するための様々なプラグインがあります。 ただ、これらを使うと、開発環境で構築したあと、本番環境に移すとき、再設定する必要があります。 個人的に、WordPressは出来る限りテーマで完結させて、サーバ上でWordPressをインストールして、テーマだけデプロイできるようにするのが好きです。 そこで、WordPres
