sitateru tech blog: css

sitateru tech blog

シタテルの技術やエンジニアの取り組みを紹介するテックブログです。

ラベル css の投稿を表示しています。 すべての投稿を表示
ラベル css の投稿を表示しています。 すべての投稿を表示

2019年1月28日月曜日

WEBエンジニアが知っていてもいいかもしれない出版やデザインの話

1月 28, 2019
こんにちは、シタテルでエンジニアをやっている茨木です。

私は出版・DTPをかじったことが少しだけあるのですが、デザインや文章校正の基礎知識はエンジニアの仕事でも活用できる機会が時折あったりします。

基本的なキーワードだけ簡単にご紹介します。
興味がでたらぜひ本格的なデザインや文章校正の本などで調べてみてください。
少し気にするだけでも、画面が結構「それっぽく」なりますので、コスパの良い知識だと思います。

ジャンプ率

1画面(1紙面)でのフォントサイズの変化率を指す言葉です。

一般に、落ち着いた雰囲気にしたい場合はジャンプ率を小さく、派手な印象を与えたい場合はジャンプ率を高くすべきと言われています。

色の指定方法

RGB

WEBエンジニアがまず思いつくのはこれかと思います。光の三原色ですね。

HSB

色相(Hue)、彩度(Saturation)、明度(Brightness)の3要素で色を指定する方法があります。
色相は赤系・青系などの色味、彩度は鮮やかさ(小さいほどグレーに近くなる)、明度は明るさ(小さいほど黒に近くなる)を表します。

SBを固定し、Hのみを変動させることで、比較的まとまりのある色のバリエーションが作りやすいです。

例えば、画面上でステータスAとステータスBの表示色を変えて視認性を上げたい、といった場合には、色相のみ違う2色を用いると、比較的おさまりが良かったりします。

CMYK

インクの4色です。基本的に印刷物の色味はCMYKで表現されます。
WEBだと気にする機会はあまりないですが、RGBやHSBで表現できる色は、必ずしも同じ見え方のCMYKに変換できない、という点は知っておいてもいいかもしれません。

人物写真の「首切り」

インタビューに添付される人物写真において、人物の顔部分に背景の直線(窓枠等)が被る構図はNGとされています。

必ずしも合理的な理由はない(私が知る限りでは)ですが、確かにちゃんとしたサイトや紙面の写真では見ない構図ですから、気にしておくといいかと思います。

文章の書き方

表現したい内容によって正しい日本語の書き方というのは当然変わりますが、かっちりした文章を書く場合には新聞ルールを参考にすると、素人感が出なくていいです。

  • 「出来る」と「できる」はどちら?
  • 「行なう」と「行う」はどちら?
  • 「〜です(〜)。」「〜です。(〜)」はどちら?

たとえばこういう疑問に対して、どっちがプロっぽいか、という回答を与えてくれます。

文献としては共同通信社の記者ハンドブックなどがメジャーですが、買うと高いので、新聞社サイトの文章を参考にするなどでもいいかもしれません。


以上です。散文になってしまいましたが、ご参考になれば幸いです。

2018年11月19日月曜日

スネーク?キャメル?ケバブ?命名規則のカオスが発生

11月 19, 2018

こんにちは!
SCSチームのいしづかです。

シタテルでは主にRails + Vue.jsにてシステムを開発しています。

生産管理を行うシタテルコントロールシステム(SCS)もRailsで書かれており、Viewは基本的にhaml + scssです。

SCS全体のAPI + SPA化によるマイクロサービス化計画も進んでいる中、ここ最近作られている画面はhamlの中にVue.jsを埋め込むという方法が取られています。

その埋め込み方法は別の機会に書くとして、そこで出てきた 命名規則のアレコレ についてレポートしたいと思います。

Railsはパスカル + スネーク、Javascriptはキャメル、htmlはケバブ・・・

表題の通り、いろいろ混ざりました。

Railsでは、ネームスペースやクラス名はパスカルケース(ClassName)、それ以外のメソッド名などはスネークケース(method_name)で書きます。

定数などはアッパーケース(CONST_VALUE)で書きますね。いつの間にか3種類使い分けていました。

私自身、前職ではC#.NETでWindowsアプリケーションを作っていたのでパスカルケースを見ると安心します(笑)

Vueを使いだしてから、メソッド名はキャメルケース(methodName)、htmlやcssのidやクラスなどはケバブケース(class-name)が登場してきました。

・・・ついに1つのRailsプロジェクトに、ほぼすべての命名規則が揃ってしまったのです。

RailsとVueで分かれていればまだよかったかもしれませんが、Railsで書いたAPIのjsonがスネークケースで出力されてしまうため、Vue側にもスネークケースが進出してしまいました。

そこで、さすがにルールを設けようということになったのです。

統一ルール発令

Railsで使っているパスカルケース・スネークケースは崩すことができません。これはこのまま。

Vue側は データに関わるもの(data・computed)はスネークケース、処理に関わるもの(methods)はキャメルケース、html・css周りはケバブケース というルールに統一しました。

なんとなく複雑っぽいですが、メソッドとhtml周りはそのままで、データに関わるところだけちょっとRailsに寄せたという形です。

これでRails側はこれまでのソースを流用できますし、Vue側ではJsonをパースしてバインドする際、スネークケースが出てきてもOKです。

Vueが入ってきて発生した命名規則の混乱は、この統一ルール発令によってひとまずしばらくは沈静化するでしょう。。。

API + SPA化計画では、フロントはキャメル統一の予定

とはいえ!Javascriptは基本的にキャメルケース。
現在実装中のSCS APIでは、RailsからJsonを出力する際にキャメルケースに変換するように実装しています。

これでSPA側でデータを受け取る時だけスネークケースにしなくても済みそうです。

まとめ

これまでとは異なる言語やプラットフォームを使う時、既存のものとの整合性が取れなくなるときがありますね。

今回、私たちは「命名規則がカオスになる」という形でそれが表れました。

シタテルではそんなカオスとも仲良くしながら(闘いながら?)、日々新しいものにも取り組みつつシステムを構築しています。