月別アーカイブ 1月 2019

村上 著者:村上

【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)
takahashi 著者:takahashi

スーパーセキュリティZERO(BitDefender)とWSLを併用するとBSODを引き起こす話

自分が持ってるmacbook AirにはBootCampでWindowsもインストールしてあるのですが、このWinodws上でWSL(Windows Subsystem on Linux)でUbuntuを動作させようとしたところ(コマンドプロンプトで”bash”コマンドを実行したところ)ブルースクリーンが発生する状況になってしまいました。

ブルースクリーンの時の内容は下記の通り

     停止コード : SYSTEM_THREAD_EXCEPTION_NOT_HANDLED

     失敗した内容 : FLTMGR.SYS

Windowsの同じバージョンを搭載している別のPCでは同じ現象は起きなかったため、疑問に思っていろいろ調べたところ、ある事実が発覚しました。

WSLを起動すると、停止コードなど表示されてOSが再起動する – Microsoft Office フォーラム

実は自分のmacbookAirにのみ、スーパーセキュリティZEROというセキュリティソフトをインストールしていました。
このスーパーセキュリティZEROはBitdefenderという非常に人気の高いセキュリティソフトがベースとなっているセキュリティソフトで、性能面としてはかなり高性能なものとなっています。

しかし、上記のような情報によると、どうもBitdefender系のセキュリティソフトにWSLの機能と競合してしまう不具合があったようです。

OS build 17134.5 Stop Code: SYSTEM_THREAD_EXCEPTION_NOT_HANDLED FLTMGR.SYS #3148 – GitHub

尚上記のサイトによると本家のBitdefenderでは改善されているようですが、OEM版である”スーパーセキュリティZERO”は記事作成時点での最新版(Ver.22.0.21.297)でも修正されていないようで、自分の環境で試したところブルースクリーンが発生し、 スーパーセキュリティZERO をアンインストールすればWSLを実行しても問題なく動作することを確認しました。

当分はWSLかスーパーセキュリティZERO、どちらか片方をアンインストールするしかないようです。

僕の場合はLinuxで使用するような、基本的なネットワークツールを利用できれば問題ないので、WSLの代わりに以前ご紹介したWindows向けパッケージマネージャーのChocoとGitに付属する”GitBash”を組み合わせて使用していきたいと思います。

  • この記事いいね! (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 で遷移先のページにデータを渡す方法でした。

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

テストを読みやすくする

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

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

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

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

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

Let’s Encrypt+MyDNSでサブドメインのワイルドカードを取得する方法

以前、無料のSSL発行サービスであるLet’s Encryptと無料のDDNSサービスであるMyDNSを組み合わせて自動でワイルドカード証明書を取得・更新する方法をご紹介しましたが、前回の方法だけではサブドメインのワイルドカード証明書(例:*.hoge.example.com)を取得することはできませんでした。

今回はそのサブドメイン証明書をLet’s Encrypt+MyDNSの環境で自動取得・更新する方法をご紹介します。

本題に入る前に、そもそもなぜサブドメインにワイルドカード証明書が必要なのか、について説明します。

折角ワイルドカード証明書がとれるようになったのだから

*.example.com

の証明書だけとっておけば全部使えるじゃん!

そう思う方もいらっしゃるかもしれません。

ここがややこしいところなのですが、実は*.example.comのSSL証明書は例えばhoge.example.com に対しては有効ですが、 *.hoge.example.com(正式な呼び名ではないですが、ここでは便宜上”サブサブドメイン”と呼びます。)に対しては有効ではありません。

ということで サブサブドメインにも適用可能なワイルドカード証明書を作るためには、サブドメインのワイルドカード証明書が必要である、という説明でした。

それではその”サブドメインのワイルドカード証明書”を、Let’s Encrypt+MyDNSで取得してみましょう。

まず、MyDNSにログインします。

メニューから

USER INFO

を選択すると、登録情報編集画面が開くので、その中の

子ID関連の”追加する子IDの数”を追加するサブドメイン分選択します。

これで登録すると、申請した分の子IDのログイン情報がメールで送られてくるので、その情報をメモします。

次に、親IDにログインしたまま、DOMAIN INFOへ移動して、レコード情報に次のように入力します。

サブドメイン名を入力し、DELEGETEを指定すると、そのサブドメインの設定を行末で指定するmydnsのIDに一任させるように指定することができます。

指定するmydnsのIDは、先ほど登録情報欄で増やしたmydnsIDを選択します。

詳細は公式のドキュメントを参照してください。

https://www.mydns.jp/?MENU=030

ここまで出来たら、後は以前ご紹介した手順をサブドメイン分繰り返します。

ただし、
DirectEdit-master
はサブドメイン分用意する必要がありますので注意が必要です。(txtedit.confに登録できるアカウント情報が1つのみのため、アカウント分用意してそれぞれtxtedit.confを設定する必要があるため。)

ディレクトリ名を変えてインストールなどして対策してください。

これでサブドメインでもワイルドカード証明書の自動取得・更新をすることができました。

サブドメインの証明書が必要な方は是非試してみてください。

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

LinuxにsmartdをインストールしてHDDが壊れたときにメール通知してもらう方法

社内には一台テストサーバーが置かれてます。こちらのテストサーバーのストレージはRAID構成になっていないため、代わりに故障の兆しを見逃さないためにHDDのSMART情報に何か異変があったらメールが飛ぶようにしてみました。

なお、メールを送信するにはあらかじめメールサーバーのセットアップが必要です。

今回はUbuntuをベースに紹介します。

まず、smartdをインストールします。

sudo apt install smartmontools
sudo systemctl enable smartd

smartdの設定をしていきます。

/etc/smartd.conf

をテキストエディタで開き、下記のように変更します。

#-の行を削除し、+の行を追加
- DEVICESCAN -d removable -n standby -m root -M exec /usr/share/smartmontools/smartd-runner
+ #DEVICESCAN -d removable -n standby -m root -M exec /usr/share/smartmontools/smartd-runner

+ DEVICESCAN -a -M test -m 通知送付先メールアドレス -s スケジュール

“-M test” と入れておくとsmartd起動時にテストメールを送信してくれます。

スケジュールの指定については参考サイトを参照してください。

S.M.A.R.T. – Arch Linux

完了したらsmartdを起動(再起動)します。

sudo systemctl restart smartd

この時点でメールが送信されてこれば、セットアップは完了です。

参考サイト:
S.M.A.R.Tの値をsmartd で監視してメールを送る – それマグで!

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

【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)