カテゴリーアーカイブ 言語

村上 著者:村上

【CSS】チェックボックス・ラジオボタンのカスタマイズについてのおすすめサイト

ほぼメモというか備忘録ですが、とても良いサイトを見つけたのでご紹介。
HTML のラジオボタンやチェックボックスをカスタマイズする方法について紹介したサイトです。

サイトはこちら。

CSSでのラジオボタン・チェックボックスのカスタマイズを詳しく説明してみた|カルチャーアカデミア広島
https://cultureacademia.jp/webcreate/303/

チェックボックスをカスタマイズしたいけど、フレームワークを使うほどではない…というときにおすすめです。
実際、現在開発中のページでも活用させていただきました。

 

今回、私が使用させていただいたコードはこちら。
まず、CSS です。

.checkbox01-input{
  display: none;
}
.checkbox01-parts{
  padding-left: 20px;
  position:relative;
  margin-right: 20px;
}
.checkbox01-parts::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 4px;
}
.checkbox01-input:checked + .checkbox01-parts{
  color: #009a9a;
}
.checkbox01-input:checked + .checkbox01-parts::after{
  content: "";
  display: block;
  position: absolute;
  top: -5px;
  left: 5px;
  width: 7px;
  height: 14px;
  transform: rotate(40deg);
  border-bottom: 3px solid #009a9a;
  border-right: 3px solid #009a9a;
}

HTML は、下記のとおりです。

<label>
  <input type="checkbox" name="checkbox01" class="checkbox01-input">
  <span class="checkbox01-parts">チェックボックス01</span>
</label>

こちらを実装すると、下のようなデザインになります。

デフォルトのチェックボックスよりはるかにお洒落!
チェックボックスのサイズも大きいので、スマートフォンでも押しやすいサイズ感です。
また、ラベルのテキストをクリックしても、ボックスにチェックが入れられるようになっているので、使い勝手も良いです(こちらについては、デザイン関係なく実装しますが)。

ほかにも、チェックした時にふわんと波のように広がるラジオボタンや、アニメーション付きのチェックボックスも紹介されていました。
ボックスの色も簡単に変えられたので、かなり使いやすいですね。

 

以上、チェックボックスやラジオボタンのカスタマイズについてのおすすめサイトのご紹介でした。

  • この記事いいね! (1)
asaba 著者:asaba

【css】ボックスを使ってコンテンツを見やすくする

今回は、cssを使ってボックスのようなコンテンツを作り、他のコンテンツと組み合わせて表示してみようと思います。

ボックスというプロパティがあるわけではなく、ボックスのような形に仕上げることでユーザーが見やすい・とっつきやすい

コンテンツを作ることを目的としております。

例として、ラジオボタンやチェックボタンをそのまま配置すると、機能としては問題ないものの押しにくかったり

見落としてしまったりとユーザー目線で見てみると意外と綻びがちらほら見受けられます。

造作もないことですが、やってみたいけど方法が分からないという方の参考になればいいなと思っています。

それでは本コードを紹介していきます。※reactベースで書いています。

</pre>
<pre><div className="box" >
  <label>
    <p id="agreeText">
      利用規約に同意する
    </p>
      <input type="checkbox" value="1" onChange={this.onPermission}></input>
      <span className="checkbox01-parts"></span>
  </label>
</div>

一番上の行のdivですが、ここでクラス名boxを定義します。このdivが、先述したボックスの役割をするコンテンツになります。

一番下にこのコンテンツを敷きたいので、このdivで全体を囲んでください。次に、囲みたいテキストとコンテンツ

(ここではチェックボックス)を書いていきます。labelは長さなどの設定をしているでだけなのでここでは無視して

ください。続いてcssの記述になります。

p#agreeText {
  position: absolute;
  margin-top: -20px;
  margin-left: 80px;
  padding: 20px;
  color: #000000;
}
div.box {
  width:300px; height:15px;
  position: relative;
  margin: auto;
  padding:10px; border:1px solid #fff;
  background-color:#fff;
}

あまり説明する必要がないと思いますが、中央揃いで表示したいためrelativeにしております。

大分端折ってしまいましたが完成物はこんな感じになります。↓

ものすごーくシンプルですが、装飾さえしてしまえば今風のデザインに近いものが作れるんじゃないかと感じています。

他のcssフレームワークならもっと簡単にできてしまうかもですが、何も施していないノーマルのcssでもこんな感じで

仕上げられるので、もしこんなものでよければ参考にしてみてください。

  • この記事いいね! (0)
著者:杉浦

Null object patternによる未定義エラー防止

 存在しない場所を参照することはエラーの原因です。下図はそれぞれPHP、JavaScriptで未定義箇所を参照した時のエラーです。この手のエラーは時にプログラムが止まる致命的エラーになるので防ぐ必要があります。


 防ぎ方でよくあるパターンが、もし未定義か否かで条件文を用いるパターンです。


 この方法は稀に用いる程度ならば問題ないですが、ネストの深いオブジェクトでこの未定義問題を気にする必要がある時もあります。そのような時に用いられるコーディングのパターンのがNull object patternです。
Null object pattern – Wikipedia
 Null object patternはメソッド、プロパティの未定義によるエラーを防ぐために空のメソッド、null値のプロパティを用意します。もしそのメソッド、プロパティを参照しても未定義ではないので致命的にエラーにならないわけです。


 サンプルは簡単なコードなので実感はわかないでしょうが、対象が巨大になる程、抜けがある場所が増える程、参照する場所が増える程、便利なコーディングのパターンになります。

  • この記事いいね! (0)
asaba 著者:asaba

【html5】forプロパティについて

今回は、html5でテキストとコンテンツを隣接して表示したい時に使われるfor(予約語のほうではないです)のお話になります。

例えば、selectタグで項目を選択している時は、アプリを使用しているユーザーに今何を選択しているか認知させている必要があります。

〇〇年と表示したい時ですが、中で文字列として埋め込んで表示させることができます。しかし、選択した情報を値としてデータベース

などに送りたい時は、この状態で送信すると例:’2019年’のように選択した西暦全体が文字列としてみなされてしまうので、

データベース側としては都合が悪いです。

この現象の解決策の中には、forタグを使ってセレクトボックス外で‘年’を表示させる方法があります。

forタグは、主に<label>タグの開始タグと終了タグに挟まれた文書を、隣接したコンテンツに関連付けさせるオブジェクトです。

通常ならば下の例のように書いていけば、セレクトボックスと文字列が紐付けられた状態で表示されます。

</pre>
<select value={this.state.year || 1970} onChange={ e => this.setState({year: e.target.value}) } >

{ this.yearData.map( d => <option key={d.value} value={d.value}>{d.label}</option>)}</select>

<label htmlFor="select-01">年</label>
<pre>

このように、forを使えば簡単にコンテンツと文字列を関連付けられるのですが、reactだとこのforがアンノウンになってしまい

認識されないというエラーが起きてしまいました。下記がそのエラーになります。

Unknown property ‘for’ found, use ‘htmlFor’ instead

通常のhtmlでは何の問題もなく使用することができるのですが、reactなどのフレームワークの中では効いてくれないので、

単にreactの仕様なのかな・・・?と感じています。と思ったのですが、javascriptでは予約語のforを使用するので

これでは混同してしまうのでhtmlForをつかってくださいとのことでした。→ htmlFor versus for?

書いているうちにちゃんとした理由が見つかりました。どおりでjavascriptを用いたreactでは使えない訳ですね!

てな訳で、reactでforを使いたいよという方は、代わりにhtmlForを使ってください。

その他参考にさせていただいたサイト→Using the for attribute in JSX – linter unknown property “for”

  • この記事いいね! (0)
村上 著者:村上

【React-Router】history.pushで遷移先のページにデータを渡す方法

昨日の記事に引き続き、React-Router でのページ遷移について。
今回は、遷移先ページにデータを渡す方法です。
パスからパラメータを取得する方法もありますが、個人的にはこちらの方が好きですね。

 

早速、値の渡し方ですが、history.push() を下記のように指定します。

this.props.history.push({ pathname: '[遷移先パス]', state: { [変数名]: [値] }});

history.push() の引数には、遷移先パスのみを指定することが多いと思いますが、上記のように連想配列で pathnamestate をそれぞれ指定することで、遷移先にデータを渡すことができます。

なお、渡したデータについては、遷移先で下記のように指定すると、値を取得することができます。

this.props.location.state.[変数名];

渡す値は多次元配列でも問題ないので、限度はあるかと思いますが、かなりのデータを渡すことができます。
渡したい値が1つだけだった場合は、パスのパラメータで渡すのもありだと思いますが、データ数が多い場合はこちらがおすすめです。
個人的に、指定方法もこちらの方が好みですね。

 

以上、React-Router で遷移先のページにデータを渡す方法でした。

  • この記事いいね! (1)
著者:杉浦

テストを読みやすくする

一般的な設計原則として、「大切ではない詳細はユーザから隠し、大切な詳細は目立つようにする」べきだ。

Dustin Boswell; Trevor Foucher. リーダブルコード (Kindle の位置No.2601-2602). 株式会社オライリー・ジャパン. Kindle 版.

 コードのテストコードを記述する際、様々なテストケースでテストコードを作る必要があります。上記の引用文にある大切な詳細とはどの様なケースでテストをしているかの詳細で、大切でない詳細はどの様にテストをしているかです。テストとして実行される最も表面的な部分(メソッド)はテストケースを示す内容以外の記述が極力ないことが理想です。この原則を守るとテストケースを追加するユーザは次の様なテストコードの表面部分のみを読めばよくなります。

 このコードはある検索ページのテストです。検索項目の種類(自由入力、日付入力、ドロップダウン、ラジオボタン)ごとにテンプレート化することでテスト内部を共通化しています。この様にした場合、機能追加、テスト実装漏れがあったとしてもテストを追加することが苦にならなくなります。また何をテストしたかもすぐにわかります。このコードを実装するために必要なのは入力部、出力部の共通化です。必要とされる引数、操作の種類が同じならば、テストも共通化できます。これはテストが行うことが、入力部にある値を投げて、期待通りの出力が返ってくるか確かめることだからです。多くのプログラミング言語が持つインタフェースの仕組みを用いると入出力を共通化したコーディングが自然にできます。

  • この記事いいね! (1)
村上 著者:村上

【React】子コンポーネントでhistory.pushを使用する方法

タイトル通り、React 環境でページ遷移機能である、history.push を使用する方法です。
React Router を使用すれば、ページ遷移機能が簡単に実装できるのですが、子要素では history.push を使用することができません。
this.props.history.push('[遷移先]'); と記述しても、エラーになってしまします。
なお、前ページに戻るための history.goBack() でも同様です。

今回は、現在開発中のサービスで、戻るボタンのついたヘッダーが共通だったので、子コンポーネントとしてそれを定義していたのですが、上述のとおり、history.goBack() が、子コンポーネントでは使用できないので、どうしたものかと悩んでいました。
が、解決策が見つかったのでご紹介。

なお、今回参考にさせていただいた記事はこちらから。

[フロントエンド] React Routerで、子要素でもhistory.pushを使いたい(withRouterの利用) – YoheiM.NET
https://www.yoheim.net/blog.php?q=20180412

 

さて、その対処法ですが、React-Router の withRouter を使用します。
具体的には下記のとおりです。

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router';

class Header extends Component { 
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }
  render() {
    return (
      <div id='header'>
        <a className='back' onClick={() => this.props.history.goBack()}>戻る</a>
        <h1>タイトル</h1>
      </div>
    );
  }
}
export default withRouter(Header)

3行目で、withRouter をインポートし、最終行で、その withRouter で Header コンポーネントを囲っています。
6~10行目で、propTypes の定義を追加しており、これにより、14行目で this.props.history.goBack(); の呼び出しが可能になっています。

子コンポーネントで前ページに戻る機能が実装できるととても便利ですね!
これを知る前は、かなり無理矢理で動かしていたので、とてもスッキリしました。

 

以上、子コンポーネントで history.push や history.goBack を使用する方法でした。
ご参考にしていただければ幸いです。

  • この記事いいね! (0)
著者:杉浦

PHPStormでartisanコマンドの予測入力をする

 PHPフレームワークLaravelにはartisanコマンドがあります。artisanはアプリケーション開発全体で役に立つ、数多くのコマンドを提供しています。例えば必須ないしあった方がよいコードを持ったモデル、テスト、ミドルウェアの作成、データベースのまとまった操作、Laravelが今持つことになるルーティングリストの表示です。もちろん他にも様々なものがあります。
 artisanの一覧を見ることはphp artisan listからできますが、いちいち確認するのは面倒です。PHPStormのコマンドラインツールにはSymfonyのコマンドライン用クラス\Symfony\Component\Console\Command\Commandを元に作成されたコマンドのコマンドライン入力とサポートするプラグインCommand Line Tool Supportがあります。LaravelのartisanコマンドはSymfonyのCommandクラスから継承されて作られています。次の図はCommandクラスの継承先のリストの一部です。各aritsanコマンドの名が冠されたクラスが並んでいます。
 
 プラグインは設定->プラグインのマーケットプレイスから検索できます。インストールできたなら設定->ツール->コマンド・ライン・ツールのサポートを選び、追加からTool Based on Symfony Consoleを選択、php実行ファイルとartisanファイルのパスを設定して完成です。


 これでartisanコマンドの予測ができるようになりました。artisanを介することでnamespaceや必須メソッド、継承元などをいちいち記述せずとも各基本クラスのひな型を作ることができ、データベースの操作もまとめてでき、開発がはかどります。

  • この記事いいね! (0)
村上 著者:村上

【JavaScript】ReactでFont Awesomeを利用する

タイトルにある通り、Reactを導入しているプロジェクトで Font Awesome を利用したかったので、その導入方法についてです。
なお、導入手順は Font Awesome の公式サイトでも説明されていますので、そちらをご覧になっても良いかと。
ページはこちらから。

React | Font Awesome
https://fontawesome.com/how-to-use/on-the-web/using-with/react

 

導入方法ですが、まずは下記のコマンド3つを実行します。

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/react-fontawesome

無事インストールが完了したら、下記コードを参考に、プロジェクトに Font Awesome をインポートします。

import React from 'react'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAngleLeft } from '@fortawesome/free-solid-svg-icons';
library.add(faAngleLeft);

export const Sample = () => (
  
<div>
    Font Awesome: <FontAwesomeIcon icon="faAngleLeft" />
  </div>

)

Font Awesome に関連したインポート類は、2~5行目にあたります。
4、5行目は、使用したいアイコンに応じて変更してください。
なお、上記のコードは、iタグ を使用して記述する場合、下記のようになります。

<i class="fas fa-angle-left"></i>

クラスで指定している「fa-angle-left」をキャメルケースで書き直しています。

導入手順は以上です。
あとは、お好きなアイコンを指定してお使いください。

 

以上、Reactで Font Awesome を導入する方法でした。
通常の、HTML の Head で linkタグを使用する方法でも良かったかもしれませんが、そうすると今度は Cordova の Content-Security-Policy が厄介かと思ったので、今回はこちらの方法を使いました。
その辺りは、開発環境に応じて臨機応変に対応してください。

  • この記事いいね! (0)
著者:杉浦

ORDER BY句で指定するカラムはFROM句の頭のテーブルの方が高速

ORDER BY 句と別の GROUP BY 句がある場合、または、ORDER BY または GROUP BY に結合キュー内の最初のテーブルと異なるテーブルのカラムが含まれている場合は、一時テーブルが作成されます。
MySQL :: MySQL 5.6 リファレンスマニュアル :: 8.4.4 MySQL が内部一時テーブルを使用する仕組み

 この一時テーブルを作る動作が案外重く、FROM句の最初のテーブルで指定できるならば、そちらで指定しましょうという話です。具体的には下図です。結合に用いている同じ値を持つmembers.primary_keyとpoints.member_keyそれぞれによるソートを用いたクエリの実行時間です。10数回程度しか試していませんが、ここまで差があるならば違いがあることは明らかです。

 一時テーブルが作られているかどうかを確かめるためにはEXPLAIN句、その結果が次の図等です(どちらもtype=Allなのは気にしないでください)。それぞれ上がmembers.primary_keyによるソート、下がpoints.member_keyによるソートです。上側のEXtraにのみあるUsing temporaryは一時テーブルを作るという意味です。これがある場合FROM句の最初のテーブル中のカラムでソートを指定するとかで、どうにか消すと高速化が望めます。

  • この記事いいね! (0)