管理画面などを実装しているとき、一覧画面では<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
サービスを作っていると、マスター管理された文字列を利用してパスを切り分けたいことがよくあります。たとえば、顧客ごとに、customer_a/awesome/path,customer_b/awesome/pathのようなイメージです。 この記事ではRailsでこのように動的にパスを切り替えるルーティングの記述方法について、解説しています。 問題点 マスター管理された文字列でシステ
経緯 Webアプリケーションでは往々にして管理者向け画面とユーザー向けの画面に大きく別れることがよくあります。 ただ、「両方とも、productを扱うから！」と管理者画面もユーザー画面もapp/controllers/products_controller.rbに記述してしまうと、ファイルが大きくなり、管理しづらくなってしまいます。 また、公開側のURLは/productsのよう
全ての<p>タグに対してスタイルを当てたかったのですが、単純にやってしまうと、#hoge以下の表示が崩れてしまうことがありました。そこで、#hogeに囲まれていない<p>に対してCSSを当てる方法のご紹介です。 コード :not(#hoge) p{ /* 当てたいスタイルシート */ } 解説 :not()は()内のセレクタ以外のものにマッチしま
